@font-face {
  font-family: Archivo;
  src: url(fonts/archivo.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html:has(dialog[open]) { overflow: hidden; }

/* Ficha (pop-up). Cada página define as cores em --f-* no :root. */
.ficha {
  border: 0; padding: 0; margin: 0;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  background: var(--f-fundo); color: var(--f-tinta);
  font: 400 17px/1.45 Archivo, system-ui, sans-serif;
}
.ficha[open] { display: flex; flex-direction: column; }
.ficha::backdrop { background: rgb(8 10 10 / .72); }
@media (min-width: 760px) {
  .ficha { margin: auto; width: min(640px, 100% - 48px); height: min(92dvh, 980px); box-shadow: 0 32px 80px -24px rgb(0 0 0 / .55); }
}
.ficha form, .ficha .feito { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ficha [hidden] { display: none !important; }

.ficha-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 12px 14px 20px; background: var(--f-faixa); color: var(--f-faixa-tinta);
}
.ficha-topo h2, .feito h2 {
  margin: 0; font-weight: 900; font-stretch: var(--f-largura); text-transform: uppercase; line-height: .95;
  font-size: 1.35rem; letter-spacing: -.005em;
}
.ficha-topo h2 span { display: block; margin-top: 5px; font-size: .78em; font-weight: 700; }
.fechar {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; background: transparent; color: inherit; cursor: pointer;
}
.fechar:hover { background: rgb(0 0 0 / .08); }

.ficha-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 28px; }
.ficha fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ficha-corpo > fieldset { padding: 22px 0 6px; border-bottom: 2px solid var(--f-linha); }
.ficha legend { padding: 0; }
.ficha-corpo > fieldset > :not(legend) { clear: both; } /* legenda flutua pra não ganhar o espaço extra do fieldset */
.ficha-corpo > fieldset > legend {
  float: left; width: 100%; margin-bottom: 14px;
  font-weight: 900; font-stretch: var(--f-largura); text-transform: uppercase; font-size: 1.15rem; letter-spacing: .01em;
}

.campo { display: block; margin-bottom: 14px; }
.campo > span, .opcoes > legend { display: block; margin-bottom: 6px; font-weight: 600; font-size: .95rem; }
.campo small { font-weight: 400; color: var(--f-suave); font-size: inherit; }
.campo input {
  display: block; width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: 17px; color: var(--f-tinta); caret-color: var(--f-foco);
  background: var(--f-campo); border: 2px solid var(--f-linha); border-radius: 0;
  transition: border-color .15s;
}
.campo input::placeholder { color: var(--f-suave); opacity: 1; }
.campo input:focus { outline: 0; border-color: var(--f-foco); box-shadow: 0 0 0 3px var(--f-anel); }
.dupla { display: grid; grid-template-columns: 1fr 7.5rem; gap: 0 12px; }
.dupla:has(.curto:first-child) { grid-template-columns: 9rem 1fr; }

.opcoes { margin-bottom: 14px; }
.opcoes > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.opcoes.largas > div { grid-template-columns: 1fr 1fr; }
.opcoes label { position: relative; }
.opcoes input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opcoes span {
  display: grid; place-items: center; min-height: 48px; padding: 6px 4px;
  border: 2px solid var(--f-linha); font-weight: 700; text-align: center; line-height: 1.15;
  transition: background .15s, color .15s, border-color .15s, scale .12s;
}
.opcoes input:hover + span { border-color: var(--f-tinta); }
.opcoes input:checked + span { background: var(--f-acento); color: var(--f-acento-tinta); border-color: var(--f-acento); }
.opcoes input:focus-visible + span { box-shadow: 0 0 0 3px var(--f-anel); border-color: var(--f-foco); }

.nota { margin: 0 0 14px; font-size: .92rem; color: var(--f-suave); }
.erro { display: none; margin-top: 6px; font-style: normal; font-size: .9rem; font-weight: 600; color: var(--f-erro); }
.conferir .campo:has(input:invalid) .erro,
.conferir .opcoes:has(input:invalid) .erro { display: block; }
.conferir .campo input:invalid,
.conferir .opcoes:has(input:invalid) span { border-color: var(--f-erro); }

.passageiros { list-style: none; margin: 0; padding: 0; }
.passageiro { padding: 14px 0 2px; border-top: 2px dashed var(--f-linha); }
.passageiro-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.remover {
  min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--f-tinta);
  font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.mais {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 4px 0 16px;
  border: 2px solid var(--f-tinta); background: transparent; color: var(--f-tinta);
  font: inherit; font-weight: 800; cursor: pointer; transition: background .15s, color .15s;
}
.mais:hover { background: var(--f-tinta); color: var(--f-fundo); }

.aceite { display: flex; gap: 12px; align-items: flex-start; padding: 20px 0 8px; font-size: .95rem; cursor: pointer; }
.aceite input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--f-acento); }
.conferir .aceite:has(input:invalid) { color: var(--f-erro); font-weight: 600; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; }

.ficha-rodape { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 2px solid var(--f-linha); background: var(--f-fundo); }
.total { margin: 0 0 8px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.total strong { font-weight: 900; font-stretch: var(--f-largura); font-size: 1.2rem; }
.aviso { margin: 0; color: var(--f-erro); font-weight: 600; font-size: .95rem; }
.aviso:not(:empty) { margin-bottom: 10px; }
.ficha-rodape .nota { margin: 8px 0 0; font-size: .85rem; }
.enviar {
  display: grid; place-items: center; width: 100%; min-height: 58px; padding: 0 16px;
  border: 0; background: var(--f-botao); color: var(--f-botao-tinta); text-decoration: none;
  font: inherit; font-weight: 900; font-stretch: var(--f-largura); text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em;
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.enviar:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgb(0 0 0 / .5); }
.enviar:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.enviar:focus-visible, .mais:focus-visible, .remover:focus-visible, .fechar:focus-visible { outline: 3px solid var(--f-foco); outline-offset: 3px; }

.feito { position: relative; overflow-y: auto; padding: 72px 24px 32px; }
.feito .fechar { position: absolute; top: 12px; right: 12px; }
.feito h2 { font-size: clamp(2rem, 9vw, 2.8rem); margin-bottom: 16px; outline: 0; }
.feito p { margin: 0 0 14px; max-width: 34em; }
.feito dl { display: flex; gap: 28px; margin: 6px 0 20px; padding: 14px 0; border-block: 2px solid var(--f-linha); }
.feito dt { font-size: .85rem; color: var(--f-suave); }
.feito dd { margin: 0; font-weight: 900; font-stretch: var(--f-largura); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.feito .enviar { margin-top: 10px; }
.previa { padding: 10px 12px; background: var(--f-faixa); color: var(--f-faixa-tinta); font-weight: 700; font-size: .9rem; }

/* movimento da ficha: sobe de baixo no celular, surge no desktop; o que muda dá sinal */
.ficha[open] { animation: ficha-sobe .42s cubic-bezier(.16,1,.3,1); }
.ficha[open]::backdrop { animation: aparece .3s ease-out; }
@media (min-width: 760px) { .ficha[open] { animation-name: ficha-surge; } }
@keyframes ficha-sobe { from { translate: 0 100%; } }
@keyframes ficha-surge { from { opacity: 0; translate: 0 28px; scale: .97; } }
@keyframes aparece { from { opacity: 0; } }
.passageiro { animation: entra .4s cubic-bezier(.16,1,.3,1); }
@keyframes entra { from { opacity: 0; translate: 0 -10px; } }
.total strong { display: inline-block; animation: pulsa .45s cubic-bezier(.16,1,.3,1); }
@keyframes pulsa { from { scale: 1.35; color: var(--f-foco); } }
.opcoes input:active + span { scale: .95; }
.feito:not([hidden]) h2 { animation: entra .6s cubic-bezier(.16,1,.3,1); }

/* o botão principal do topo ganha um brilho que passa 3 vezes e para */
.heroi-cta .botao { position: relative; overflow: hidden; isolation: isolate; }
.heroi-cta .botao::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .3) 50%, transparent 65%);
  translate: -100% 0; animation: brilho 4.5s ease-in-out 2s 3;
}
@keyframes brilho { 0% { translate: -100% 0; } 30%, 100% { translate: 100% 0; } }