/* =============================================================================
   style.css — identidade AUTOGLASS RESOLVE (manual oficial, 6 pags).
   Direcao B, "imersiva da marca": a capa do manual vira produto. O campo
   azul-assinatura E a pagina; o conteudo mora num card branco flutuando sobre
   ele. Formulario permanece em fundo claro — legibilidade nao se negocia.

   Hex PRIMARIOS escritos no manual (spec, nao amostra):
     #037ff7 azul vivo | #00298e marinho | #0649c9 royal
   Apoio (os hex do PDF vieram errados; amostrados dos swatches):
     #1e1d1e quase-preto | #f3f0ee off-white quente

   CONTRASTE — medido, nao herdado (WCAG relative luminance):
     #0649c9 x branco = 7,56:1  -> botao primario, eyebrow, link, texto no card
     #00298e x branco = 12,29:1 -> caixa do protocolo invertida
     #037ff7 x branco =  3,90:1 -> LUZ, foco e decoracao. NUNCA texto normal.
   Teto para texto BRANCO: L(fundo) <= 0,1833. #037ff7 tem L = 0,219, ACIMA do
   teto — por isso ele entra so como alpha baixo sobre o royal, nunca chapado.
   ============================================================================= */
:root{
  /* ---- marca ---- */
  --azul-vivo:#037ff7;
  --royal:#0649c9;
  --marinho:#00298e;
  --preto:#1e1d1e;
  --offwhite:#f3f0ee;

  /* aliases historicos (acompanhar.html e privacidade.html consomem estes) */
  --marca:#0649c9; --marca-hover:#00298e;
  --marca-soft:#7590cf; --marca-tint:#e9effc;
  --destaque:#c1740c; --destaque-soft:#eccb95; --destaque-tint:#faf0e1;

  --surface:#fff;
  --campo:#fcfdff;          /* fundo de input: sussurro de azul, ainda "claro" */
  --line-1:#e3e8f1; --line-2:#e7edf7;
  /* borda de INPUT precisa de 3:1 (WCAG 1.4.11). #8f8f8f dava 3,24 — este da
     3,64 e ainda puxa para a familia azul. */
  --line-campo:#7c8798;

  /* Cinzas RE-MEDIDOS: o canvas do texto agora e branco puro (o card), nao o
     #f1f4f9 antigo. Nenhum regride; todos sobem. */
  --ink-0:#1e1d1e;          /* 16,84:1 */
  --ink-corpo:#4d5a6c;      /*  7,01:1 */
  --ink-2:#5d6b7f;          /*  5,42:1 */
  --ink-3:#646d78;          /*  4,82:1 */

  --critical:#b42318; --critical-tint:#fdf2f1; --critical-soft:#f2b8b2;
  --success:#12693b; --success-soft:#a9d6bd; --success-tint:#e7f4ec;

  /* Respiro do anel de foco = a cor ATRAS do elemento. Antes era --canvas, que
     hoje aponta para o campo AZUL — o anel sairia com miolo azul dentro de um
     card branco. Token proprio resolve. */
  --ring-gap:#fff;

  --r-md:12px; --r-lg:16px; --r-card:22px;
  --sombra-card:
    0 34px 68px -28px rgba(0,14,54,.62),
    0 14px 30px -18px rgba(0,14,54,.42),
    0 2px 6px rgba(0,14,54,.16);
  --font:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;min-height:100dvh;background:var(--marinho);color:var(--ink-0);
  font-family:var(--font);font-size:16px;line-height:1.5;display:flex;flex-direction:column}
[hidden]{display:none!important}
h1,h2,p{margin:0}
a{color:var(--royal)}

/* ---------------------------------------------------- campo azul-assinatura --
   Duas camadas FIXAS (elemento fixo + background normal), nao
   `background-attachment:fixed` — que e quebrado no iOS Safari, justamente o
   aparelho da maior parte deste publico. Pseudo-elemento de flex container
   viraria flex item; `position:fixed` o tira do fluxo e o problema some.       */
body::before,body::after{content:'';position:fixed;inset:0;pointer-events:none}
body::before{
  z-index:-2;
  background:
    /* luz de #037ff7 — alpha, nunca chapada: chapada estouraria o teto de
       luminancia e o texto branco cairia para 3,9:1.
       Alpha CALIBRADO por medicao (medir-campo.mjs), nao pelo olho: em .52/.30
       o pixel mais claro do campo dava #2074e1 = 4,52:1 com branco — passa AA
       raspando, e o pico ficava exatamente sob o lockup branco. Em .38/.22 o
       pior caso do campo inteiro sobe para ~5,4:1. */
    radial-gradient(78% 52% at 18% -6%, rgba(3,127,247,.34), transparent 70%),
    radial-gradient(52% 38% at 92% 12%, rgba(3,127,247,.20), transparent 74%),
    /* vinheta inferior: garante fundo escuro sob o rodape em qualquer altura.
       .60/86%: a .92/72% ela chapava os 20% de baixo num navy morto (revisao). */
    radial-gradient(140% 80% at 50% 122%, rgba(0,22,84,.60), transparent 86%),
    /* SEM stops intermediarios: royal->marinho puro. #0a4ecb/#053aab criavam
       vincos de banding (p99 residuo 121 vs 6 no manual) e eram cores fora da
       familia — dois achados da revisao de marca num so fix. */
    linear-gradient(170deg,#0649c9 0%,#00298e 96%);
}
/* Marca d'agua: a silhueta OFICIAL (icone do kit da AG, vetor puro), branca,
   girada, sangrando pelo topo/direita — paginas 1 e 6 do manual. UMA instancia
   (a revisao matou a segunda: lia como caroco). Opacidade ~.10: abaixo disso a
   marca le como defeito de gradiente; acima de ~.13 vira ruido atras do card e
   o campo perde a serenidade que o manual pede. viewBox do SVG e JUSTO na tinta
   (46.06 65.33 956.38 961.77) — com o 0 0 1080 1080 cru a arte encolhia 11%
   e descalibrava o sangramento medido abaixo. */
body::after{
  /* max() SEM teto: com clamp(...,1180px) a marca parava de crescer a 787px e
     fechava DENTRO da tela a 1440/1920 — poligono avulso em vez de campo sangrado
     (pags. 1/6). UMA instancia: a segunda era invencao e lia como caroco. */
  --wm:max(560px,132vw);
  z-index:-1;
  background-image:url(./marca-agua.svg);
  background-repeat:no-repeat;
  background-size:var(--wm) auto;
  background-position:right calc(var(--wm) * -.30) top calc(var(--wm) * -.31);
  opacity:.095;
  transform:rotate(-13deg) scale(1.15);
  transform-origin:60% 30%;
}

/* ----------------------------------------------------------- card flutuante -- */
.page{flex:1;display:flex;justify-content:center;padding:34px 20px 44px}
.card{width:100%;max-width:820px;height:fit-content;scroll-margin-top:20px;
  background:var(--surface);border:0;border-radius:var(--r-card);
  box-shadow:var(--sombra-card);padding:26px 28px 28px}

.head-brand{position:relative;display:flex;align-items:center;justify-content:center;min-height:54px}
.ja-tem{font-size:13px;color:var(--ink-2);text-align:center;margin:2px 0}
.ja-tem a{color:var(--royal);font-weight:600;text-underline-offset:2px}
.lockup-cor{position:absolute;left:0;top:0;height:54px;width:auto}
.head-brand h1{margin:0;min-width:0}
/* Fio no lugar de faixa colorida sangrada: no #tela-recibo o .ok-mark vem ANTES
   do .head, e a faixa deixaria o selo verde boiando. Fio serve os dois cards. */
.head{padding-bottom:20px;border-bottom:1px solid var(--line-2);margin-bottom:20px}
/* min-height do header e reserva da LOGO absoluta: precisa ser content-box,
   senao padding-bottom+fio entram na conta e a logo encosta no fio (medido:
   5px de folga no cheio, 0px nos tiers compactos). */
.head-brand{box-sizing:content-box}
.head h1{font-size:28px;font-weight:600;letter-spacing:-.024em;color:var(--ink-0);
  line-height:1.18;margin-bottom:6px}
.sub{color:var(--ink-corpo);font-size:14px;line-height:1.5}
.head .sub{margin-top:7px}
/* O card tem 820px porque o FORMULARIO precisa de duas colunas. Prosa corrida
   nessa largura passa de 120 caracteres por linha e o olho perde a volta —
   trava so no texto, sem estreitar os campos. */
.sub,.next ol,.next h2{max-width:66ch}

/* ------------------------------------------------------------------ campos --- */
form{display:flex;flex-direction:column;gap:15px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;align-items:start}
.form-grid .col-span{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:7px;font-size:14px}
label>span.lbl{font-weight:500;color:var(--ink-0)}
label em{color:var(--ink-3);font-style:normal;font-weight:400}
label.req>span.lbl::after{content:" *";color:var(--royal)}
input,textarea,select{width:100%;min-height:46px;padding:12px 14px;background:var(--campo);
  border:1px solid var(--line-campo);border-radius:var(--r-md);color:var(--ink-0);font:inherit;font-size:16px;
  transition:border-color .12s,box-shadow .12s,background-color .12s}
textarea{resize:vertical;min-height:112px}
input::placeholder,textarea::placeholder{color:var(--ink-3);font-size:13px}
input:hover:not(:disabled),textarea:hover,select:hover{border-color:#5f6c80}
/* Anel de 3 camadas: respiro branco + nucleo ROYAL (7,56:1) + halo #037ff7. O
   halo honra o "anel de foco #037ff7" da identidade sem rebaixar o indicador
   para os 3,9:1 do azul vivo. */
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;
  background:var(--surface);border-color:var(--royal);
  box-shadow:0 0 0 2px var(--ring-gap),0 0 0 5px var(--royal),0 0 0 8px rgba(3,127,247,.30)}
/* Erro nunca e sinalizado so por cor (WCAG 1.4.1): ha borda + texto + role=alert. */
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--critical);
  background:var(--critical-tint)}
.hint-row{display:flex;align-items:baseline;justify-content:space-between;gap:4px 14px;flex-wrap:wrap}
.hint{font-size:12.5px;color:var(--ink-2);line-height:1.45}
.counter{margin-left:auto;flex:none;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.counter.warn{color:#96500a}
.field-msg{font-size:12.5px;color:var(--critical);font-weight:500}

/* Off-white quente do manual: separa a letra miuda juridica do azul da marca. */
.aviso{padding:13px 15px;background:var(--offwhite);border:0;border-left:3px solid var(--royal);
  border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-corpo);font-size:12.5px;line-height:1.6}
.aviso b{color:var(--ink-0);font-weight:600}
.aviso a{color:var(--royal);font-weight:500}
.optin{flex-direction:row;gap:9px;align-items:flex-start;font-size:13px}
.optin input{width:18px;height:18px;min-height:0;flex:none;margin-top:2px;padding:0;accent-color:var(--royal)}

/* ------------------------------------------------------------------ envio ---- */
.submit-col{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:6px}
/* Reserva a altura do widget: sem isto o botao desce ~90px quando o Turnstile
   termina de carregar, e o dedo ja estava a caminho. */
#btn-acomp-copy{display:none}
/* Leo 27/08: sem "Limpar formulario". display:none (nao remocao do no):
   app.js:395 pendura addEventListener direto nele — no ausente mata o modulo. */
#btn-limpar{display:none!important}
#ts-widget{min-height:65px;display:flex;align-items:center;justify-content:center;width:100%;
  /* O iframe vem fixo em 300x65 do Cloudflare; scale reduz o VISUAL (clique segue
     mapeando) e a margem negativa devolve o excesso de layout que o scale nao tira. */
  transform:scale(.78);transform-origin:center top;margin-bottom:-14px}
/* Enquanto o widget nao chegou, o espaco reservado era um BURACO branco de ~100px
   no meio do card — parece pagina quebrada. Esqueleto neutro no lugar. Para de
   casar no instante em que o Turnstile injeta o iframe (`:empty`), entao nunca
   aparece por tras do widget real. Sem texto: nao inventa copy. */
#ts-widget:empty{width:300px;max-width:100%;height:65px;
  background:#f5f8fd;border:1.5px dashed #7c8798;border-radius:var(--r-md)}
button.primary{min-height:50px;min-width:300px;padding:15px 32px;background:var(--royal);color:#fff;
  border:0;border-radius:var(--r-md);font:inherit;font-weight:600;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(6,73,201,.55);transition:background .12s,box-shadow .12s,transform .08s}
button.primary:hover:not(:disabled){background:var(--marca-hover);
  box-shadow:0 10px 22px -8px rgba(0,41,142,.6)}
button.primary:active:not(:disabled){transform:translateY(1px)}
button.primary:disabled{opacity:.55;cursor:progress;box-shadow:none}
button.primary:focus-visible{outline:none;
  box-shadow:0 0 0 2px var(--ring-gap),0 0 0 5px var(--royal),0 0 0 8px rgba(3,127,247,.35)}
.msg{margin-top:12px;font-size:14px;color:var(--ink-corpo)}
.msg.err{color:var(--critical);font-weight:500}
/* Foco PROGRAMATICO (tabindex=-1): o JS foca o container p/ o leitor de tela;
   anel visivel ai e ruido — nao e alvo de teclado. */
#tela:focus,#tela:focus-visible,#tela-recibo:focus,#tela-recibo:focus-visible{outline:0}

/* ----------------------------------------------------------------- recibo ---- */
.ok-mark{width:52px;height:52px;border-radius:999px;background:var(--success-tint);
  border:1px solid var(--success-soft);display:grid;place-items:center;margin-bottom:16px}
.ok-mark svg{width:26px;height:26px;stroke:var(--success);fill:none;stroke-width:2.6}

/* MOMENTO-TROFEU: a caixa do protocolo INVERTE. Branco sobre #00298e = 12,29:1,
   o maior contraste da tela — o numero que a pessoa precisa guardar e o ponto
   mais legivel da pagina, nao um detalhe em caixa clarinha. Vale nas DUAS telas
   onde a caixa aparece (recibo e status): e o mesmo componente. */
.proto-box{position:relative;overflow:hidden;margin:20px 0;padding:18px 20px;
  background:linear-gradient(150deg,#0649c9 0%,#00298e 82%);
  border:0;border-radius:var(--r-lg);
  box-shadow:0 14px 30px -16px rgba(0,26,96,.6)}
/* Facet grande e MUITO para fora: contida, a marca virava um objeto reconhecivel
   flutuando dentro da caixa (visto no status desktop, onde a caixa e larga).
   Sangrando, entra so uma aresta ampla — que e o efeito do manual. */
/* Marca inteira, cortada SO pela direita: em -150/-160px sobrava no quadro o
   vazado do check, que lia como SETA apontando para longe do numero (revisao).
   Menor e mais dentro, le como a marca. */
.proto-box::after{content:'';position:absolute;right:-96px;top:-118px;width:320px;height:320px;
  background:url(./marca-agua.svg) no-repeat center/contain;opacity:.12;
  transform:rotate(-12deg);pointer-events:none}
.proto-box .lbl{position:relative;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.82)}
.proto-num{position:relative;font-family:ui-monospace,Menlo,monospace;font-size:27px;font-weight:500;
  letter-spacing:.01em;color:#fff;margin-top:8px;word-break:break-all}
.proto-actions{position:relative;display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.proto-nota{font-size:12.5px;color:var(--ink-corpo);margin-top:11px;line-height:1.5}
.proto-box .proto-nota{position:relative;color:rgba(255,255,255,.86)}

/* Pill tem dois habitats: sobre o marinho (dentro da .proto-box) e sobre o card
   branco (link de acompanhar, "registrar outra"). Cada um com seu contraste. */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:9px 16px;border:1px solid var(--marca-soft);background:var(--surface);
  border-radius:999px;color:var(--royal);font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s}
.pill:hover{background:var(--marca-tint);border-color:var(--royal)}
.pill:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ring-gap),0 0 0 5px var(--royal)}
.proto-box .pill{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55);color:#fff}
.proto-box .pill:hover{background:rgba(255,255,255,.24);border-color:#fff}
.proto-box .pill:focus-visible{box-shadow:0 0 0 2px var(--marinho),0 0 0 5px #fff}

.canais{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:8px;
  font-size:13.5px;color:var(--ink-corpo)}
.next{margin-top:22px;padding-top:19px;border-top:1px solid var(--line-2)}
.next h2{font-size:13px;font-weight:600;color:var(--ink-0);margin-bottom:10px}
.next ol{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-corpo);
  display:flex;flex-direction:column;gap:6px}
.relaxa{margin-top:13px;font-size:14.5px;font-weight:600;color:var(--ink-0)}
/* Alerta de risco FISICO ("nao dirija") permanece ambar. Cor semantica sobrevive
   a reskin: um aviso de seguranca em azul-da-marca e bonito e e errado.
   #96500a sobre #faf0e1 = 6,1:1. */
.note{margin-top:20px;padding:13px 15px;background:var(--destaque-tint);
  border:1px solid var(--destaque-soft);border-left:3px solid #b06f10;
  border-radius:var(--r-md);font-size:13px;color:#7a4406;line-height:1.55}
.note span{display:block;font-weight:700;margin-bottom:3px}

/* ------------------------------------------------------------- pe da pagina -- */
.limpar{background:none;border:0;padding:6px;margin:-12px 0 -10px;font:inherit;font-size:12.5px;
  color:var(--ink-2);text-decoration:underline;cursor:pointer;min-height:44px}
.limpar:hover{color:var(--critical)}
.limpar:focus-visible{outline:none;border-radius:8px;
  box-shadow:0 0 0 2px var(--ring-gap),0 0 0 5px var(--royal)}
/* Sobre o campo AZUL: so branco. #fff x #0649c9 = 7,56:1 e a vinheta inferior do
   body::before garante que o ponto sob o rodape nunca clareia. */
.rodape{text-align:center;padding:4px 16px 32px;font-size:12.5px;color:#fff;
  text-shadow:0 1px 2px rgba(0,18,64,.3)}
.rodape b{font-weight:600;color:#fff}

/* Indicador de foco em alto contraste: forced-colors descarta box-shadow, entao
   sem isto o usuario perde COMPLETAMENTE a nocao de onde esta. */
@media (forced-colors:active){
  input:focus-visible,textarea:focus-visible,select:focus-visible,
  button:focus-visible,a:focus-visible{outline:3px solid Highlight;outline-offset:2px}
  /* O campo azul e a marca d'agua sao decoracao: em alto contraste eles somem e
     o texto do lockup/rodape volta para a tinta do sistema — senao ficaria
     branco sobre Canvas branco, ou seja, invisivel. */
  /* O lockup PNG e decorativo: em alto contraste vira mancha invisivel —
     sai do fluxo e o h1 assume. */
  body::before,body::after,.proto-box::after,.lockup-cor{display:none!important}
  /* Unico controle que abre o canal: sem borda ele vira texto solto (medido). */
  button.primary{border:1px solid ButtonText}
  .rodape,.rodape b,.proto-box .lbl,.proto-num,.proto-box .proto-nota,
  .proto-box .pill{color:CanvasText!important;text-shadow:none!important}
  .proto-box{background:Canvas!important;border:1px solid CanvasText!important}
  .card{border:1px solid CanvasText}
}
/* IMPRIMIR/PDF: Chrome e Safari NAO imprimem fundo por default — sem isto o
   protocolo saia BRANCO sobre papel branco (1,0:1, medido em PDF A/B na revisao).
   Producao imprimia perfeito; o reskin nao pode piorar um comprovante. */
@media print{
  body::before,body::after,.proto-box::after{display:none!important}
  /* Flex column + min-height:100dvh fragmentam mal: o Chrome empurrava o card
     INTEIRO para a pagina 2 e deixava a 1 so com o lockup (medido no PDF A/B).
     Em papel, fluxo de bloco simples. */
  body{background:#fff;display:block;min-height:0}
  .page{display:block;padding:10px 0 0}
  .card{margin:0 auto}
  .card{box-shadow:none;border:1px solid #bfc6d0}
  .proto-box{background:#fff!important;border:1.5px solid #00298e;box-shadow:none}
  .proto-box .lbl{color:#00298e!important}
  .proto-num{color:#00298e!important}
  .proto-box .proto-nota{color:#333!important}
  .proto-box .pill{color:#00298e!important;border-color:#00298e}
  .rodape{color:#333;text-shadow:none}
  .rodape b{color:#333}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ------------------------------------------------------ gateway (raiz) -----
   A raiz e um portal minimo (logo + "Como podemos te ajudar?" + Avancar) no
   layout do mock da AG: editorial a esquerda, card pequeno a direita. O FORM
   vive em /abrir com o card CENTRADO classico — este bloco so estiliza a raiz
   (.page-gate); /abrir e /acompanhar nao passam por aqui. */
.painel-lp{display:none}
.gate-card{max-width:520px;align-self:center;padding:32px 32px 30px}
/* boas-vindas, nao formulario: sem o fio de cabecalho de form */
.gate-card .head{border-bottom:0;padding-bottom:0;margin-bottom:18px}
.gate-card .head h1{font-size:23px}
.gate-card .sub{text-align:center;margin:-8px 0 16px}
/* card estreito: logo absoluta colidiria com o titulo — empilha sempre */
.gate-card .head-brand{display:block;min-height:0;text-align:center}
.gate-card .lockup-cor{position:static;display:block;height:54px;margin:0 auto 12px}
@media (min-width:1100px){
  /* no desktop o painel editorial ja diz isto — a linha do card sai */
  .gate-card .sub{display:none}
}
.gate-acoes{display:flex;flex-direction:column;gap:18px}
.gate-acoes .field-msg{font-size:13.5px;text-align:center}
.gate-acoes .primary{width:100%}
@media (min-width:1100px){
  .page-gate{justify-content:center;align-items:center;gap:48px;padding:20px 4vw}
  .page-gate .painel-lp{display:block;flex:1;max-width:620px;color:#fff;
    text-shadow:0 1px 2px rgba(0,20,80,.25)}
  .page-gate .painel-lp h2{font-size:clamp(28px,2.4vw,38px);font-weight:600;letter-spacing:-.02em;
    line-height:1.16;margin-bottom:14px;text-wrap:balance}
  .page-gate .painel-lp p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.93);max-width:46ch}
  .page-gate .painel-lp .tag{margin-top:14px;font-weight:600;color:#fff}
  .gate-card{width:min(38vw,520px)}
  /* na raiz a marca d'agua migra pro lado do editorial (o card cobriria a sangria
     da direita). :has sem suporte = fica a sangria padrao, sem quebra. */
  body:has(.page-gate)::after{background-position:left calc(var(--wm) * -.42) top 38%}
}

/* -------------------------- form/acompanhar: compactacao por ALTURA --------
   O card centrado classico tem ~943px; em laptop (768-960 de altura util) o
   botao e o Turnstile cairiam abaixo da dobra (medido: 1366x768 = botao 52px
   fora). Compacta SO as paginas de conteudo — o gateway (.page-gate) nao
   precisa (card pequeno). */
@media (min-width:1100px){
  /* com folga, o card centra na vertical — sem isto ele cola no topo */
  .page:not(.page-gate){align-items:center}
  /* descricao absorve folga tambem no card cheio (janela alta) */
  .page:not(.page-gate) #f-descricao{height:clamp(96px,calc(100vh - 985px),240px);min-height:96px}
}
@media (min-width:1100px) and (max-height:960px){
  .page:not(.page-gate){padding-top:12px;padding-bottom:12px}
  .page:not(.page-gate) .card{padding:20px 26px 22px}
  .page:not(.page-gate) .head{padding-bottom:12px;margin-bottom:12px}
  .page:not(.page-gate) .head h1{font-size:23px}
  .page:not(.page-gate) .head-brand{min-height:44px}
  .page:not(.page-gate) .head-brand .lockup-cor{height:44px}
  .page:not(.page-gate) .form-grid{gap:10px 18px}
  .page:not(.page-gate) input,.page:not(.page-gate) textarea,.page:not(.page-gate) select{padding:10px 13px}
  .page:not(.page-gate) #f-descricao{height:clamp(60px,calc(100vh - 830px),220px);min-height:60px}
  .page:not(.page-gate) .aviso{padding:7px 12px;font-size:12px;margin-top:8px}
  .page:not(.page-gate) .submit-col{gap:10px;margin-top:10px}
  .page:not(.page-gate) button.primary{min-height:46px;padding:11px 30px}
  .page:not(.page-gate) #ts-widget{transform:scale(.72);margin-bottom:-20px}
}
@media (min-width:1100px) and (max-height:800px){
  .page:not(.page-gate){padding-top:6px;padding-bottom:6px}
  .page:not(.page-gate) .card{padding:10px 20px 12px}
  .page:not(.page-gate) .head{padding-bottom:6px;margin-bottom:6px}
  .page:not(.page-gate) .head h1{font-size:19px}
  .page:not(.page-gate) .head-brand{min-height:36px}
  .page:not(.page-gate) .head-brand .lockup-cor{height:36px}
  .page:not(.page-gate) .form-grid{gap:6px 14px}
  .page:not(.page-gate) input,.page:not(.page-gate) textarea,.page:not(.page-gate) select{padding:7px 11px}
  .page:not(.page-gate) #f-descricao{height:clamp(50px,calc(100vh - 712px),200px);min-height:50px}
  .page:not(.page-gate) .hint{display:none}
  .page:not(.page-gate) .hint-row{justify-content:flex-end}
  .page:not(.page-gate) .aviso{padding:5px 10px;font-size:11.5px;margin-top:5px}
  .page:not(.page-gate) .submit-col{gap:6px;margin-top:6px}
  .page:not(.page-gate) button.primary{min-height:38px;padding:7px 24px}
  .page:not(.page-gate) #ts-widget{transform:scale(.64);margin-bottom:-26px}
  .page:not(.page-gate) .ja-tem{font-size:12px;margin:1px 0 0}
}

/* 681-800px: o h1 centrado na largura toda NAO enxerga a logo absoluta —
   medido: gap -44px a 700, -0,7px no iPad 768. Empilha (logo em cima,
   titulo embaixo) ate a folga real existir (>=15px a partir de ~800). */
@media (max-width:800px){
  .head-brand{display:block;min-height:0;text-align:center}
  .lockup-cor{position:static;display:block;height:54px;margin:0 auto 12px}
}

@media (max-width:680px){
  /* 16px e o limiar do auto-zoom do Safari: abaixo disso, cada toque de campo
     da zoom, o layout sai da tela e o usuario precisa de pinch para voltar —
     oito vezes num formulario de oito campos. */
  .form-grid{grid-template-columns:1fr}
  .page{padding:20px 14px 34px}
  .card{padding:22px 14px 24px;border-radius:20px}
  .head h1{font-size:22px}
  .lockup-cor{height:44px}
  .gate-card .lockup-cor{height:44px}
  .proto-num{font-size:20px}
  .proto-box{padding:16px 17px}
  button.primary{width:100%;min-width:0}
}

/* ------------------------- gateway: foto da atendente (aprovado Leo 27/08) --
   3 niveis: campo+boomerang ao fundo, foto NATURAL escurecida a 95% no meio
   (capa-camada.png ja carrega mascara de brilho + fades assados), conteudo na
   frente. Regras portadas VERBATIM do preview aprovado (gate-niveis). */
.page-gate::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(./capa-camada.png) top center/cover no-repeat;
  opacity:.95}
.page-gate::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(93deg, rgba(4,20,60,.38) 0%, rgba(4,22,66,.24) 34%, rgba(4,24,70,.06) 55%, rgba(4,24,70,0) 72%),
    radial-gradient(80% 60% at 50% 112%, rgba(0,14,52,.5), transparent 70%)}
/* texto menor e mais baixo: sai do rosto dela */
.page-gate .painel-lp{transform:translateY(76px)}
.page-gate .painel-lp h2{font-size:clamp(19px,1.45vw,23px)}
.page-gate .painel-lp p{font-size:13.5px}
.page-gate .painel-lp .tag{font-size:14px;margin-top:10px}
/* boomerang segue no fundo, mas mais quieto — sem riscar o rosto */
body:has(.page-gate)::after{opacity:.045}
@media (max-width:1099px){
  .page-gate::before,.page-gate::after{display:none}
}

/* --------------------- /abrir: foto da atendente (aprovado Leo 27/08) ------
   MESMA receita do gateway (foto natural + mascara de brilho assadas no
   capa-abrir.png); card do formulario na direita (3vw), na faixa do card
   pequeno da raiz. Escopo body[data-sitekey] = SO a pagina do formulario —
   gateway, acompanhar e privacidade nao passam por aqui. */
body[data-sitekey] .page::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(./capa-abrir.png) top center/cover no-repeat;opacity:.95}
body[data-sitekey] .page::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(93deg, rgba(4,20,60,.38) 0%, rgba(4,22,66,.24) 34%, rgba(4,24,70,.06) 55%, rgba(4,24,70,0) 72%),
             radial-gradient(80% 60% at 50% 112%, rgba(0,14,52,.5), transparent 70%)}
body[data-sitekey]::after{opacity:.045}
@media (min-width:1100px){
  body[data-sitekey] .page{justify-content:flex-end;padding-right:3vw}
}
@media (max-width:1099px){
  body[data-sitekey] .page::before,body[data-sitekey] .page::after{display:none}
}

/* ---------------- /acompanhar: foto das atendentes (aprovado Leo 27/08) ----
   Mesma receita; card de consulta 15% mais estreito (697px) a 3vw da direita.
   Escopo body:has(#tela) = so a pagina de acompanhamento (o #tela e o card
   dela). Sem :has (browser velho): fica o layout centrado classico. */
body:has(#tela) .page::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(./capa-acomp.png) top center/cover no-repeat;opacity:.95}
body:has(#tela) .page::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(93deg, rgba(4,20,60,.38) 0%, rgba(4,22,66,.24) 34%, rgba(4,24,70,.06) 55%, rgba(4,24,70,0) 72%),
             radial-gradient(80% 60% at 50% 112%, rgba(0,14,52,.5), transparent 70%)}
body:has(#tela)::after{opacity:.045}
@media (min-width:1100px){
  body:has(#tela) .page{justify-content:flex-end;padding-right:3vw}
  body:has(#tela) .card{max-width:697px}
}
@media (max-width:1099px){
  body:has(#tela) .page::before,body:has(#tela) .page::after{display:none}
}