/* ═══════════════════════════════════════════════════════════════════
   konexautoriza.com.br — raiz institucional.
   Esta folha e' tambem o SISTEMA do formulario que vem depois: os
   tokens abaixo (papel de cor, raio, altura de toque, tipografia,
   espacamento) sao para ser copiados nas telas de preenchimento.

   POR QUE A PAGINA EXISTE
   O proprietario recebe o link por WhatsApp e parte das pessoas apaga o
   caminho e digita so o dominio, para conferir se aquilo e' de verdade.
   A pagina nao explica o link: ela responde "quem esta' me pedindo
   isso?" — com a marca, a sede filmada, e o registro da empresa.

   ── COMPOSICAO POR QUADROS (manual da agencia) ─────────────────────
   p.23  a peca e' dividida em CAMPOS DE COR que sangram ate' a borda:
         ambar / escuro / neutro / claro, sem moldura entre eles.
   p.32  e p.35: os campos ficam LADO A LADO — painel ambar, foto,
         painel escuro — em quadros de proporcao quase quadrada, com a
         sarjeta escura aparecendo entre eles. E' a gramatica de tela
         larga da marca, e e' o que esta pagina usa a partir de 1200px.
   p.38  sobre ambar, cartao de TRACO FINO escuro e raio generoso, sem
         preenchimento (o mockup "Pagina inicial" do proprio manual).

   ── ARQUITETURA RESPONSIVA ─────────────────────────────────────────
   Um so' HTML, tres arranjos do MESMO grid `.hero`:
     < 900px   marca ambar em cima; abaixo, faixa escura com o texto das
               agencias a' esquerda e o video sangrando pela direita.
               (arranjo aprovado — nao mexer)
     900-1199  duas colunas: marca em cima e agencias embaixo a'
               esquerda, video em ALTURA CHEIA da dobra a' direita.
     >= 1200   tres quadros lado a lado: AMBAR | VIDEO | ESCURO,
               ocupando a dobra inteira. O video e' o objeto mais alto
               e mais claro da tela — o chamariz, como pedido.

   ⚠️ Ambar continua proibido como TEXTO sobre fundo claro (1,7:1).
      Ele aparece como SUPERFICIE, ou como texto sobre o escuro.
   ⚠️ "Autoriza" NAO faz parte do logotipo: fica separado dele pela
      area de respiro (altura do simbolo), como elemento tipografico.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paleta bruta (MARCA.md §1) ────────────────────────────────── */
  --escuro: #0C181F;
  --ambar:  #FFBB10;
  --neutro: #8993A4;
  --claro:  #F0F0F0;

  /* ── Papeis de cor — use ESTES nomes no formulario ─────────────── */
  --superficie-marca:  var(--ambar);   /* capa, etiqueta, confirmacao  */
  --superficie-escura: var(--escuro);  /* cabecalho, rodape, midia     */
  --superficie-clara:  var(--claro);   /* fundo de leitura e de campo  */
  --tinta:             var(--escuro);  /* texto sobre claro ou ambar   */
  --tinta-invertida:   var(--claro);   /* texto sobre escuro           */
  --tinta-legenda:     var(--neutro);  /* legenda, SO sobre escuro     */
  --fio:               rgba(12, 24, 31, .28);    /* sobre claro/ambar  */
  --fio-invertido:     rgba(240, 240, 240, .18); /* sobre escuro       */

  /* ── Forma ─────────────────────────────────────────────────────── */
  --raio-bloco: 20px;   /* cards e midia (p.33 usa raio generoso)      */
  --raio-campo: 12px;   /* campo de formulario, botao, etiqueta        */
  --toque: 52px;        /* altura minima de botao e de campo           */

  /* ── Espacamento: escala de 4 ──────────────────────────────────── */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 20px;
  --e5: 32px; --e6: 48px; --e7: 64px;

  /* ── Tipografia ────────────────────────────────────────────────── */
  --fonte: "Schibsted Grotesk", "Inter", "Segoe UI", Calibri, Arial, sans-serif;

  /* ── Medidas ───────────────────────────────────────────────────── */
  --medida: 560px;        /* coluna de LEITURA / de formulario         */
  --medida-larga: 1600px; /* faixa institucional em tela larga         */
  --margem: 24px;         /* respiro lateral da coluna                 */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--superficie-clara);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── Faixas: a cor sangra na tela toda, o conteudo fica na coluna ── */
.faixa { width: 100%; }
.faixa > .coluna { max-width: var(--medida); margin: 0 auto; padding: 0 var(--margem); }
.faixa--marca  { background: var(--superficie-marca);  color: var(--tinta); }
.faixa--escura { background: var(--superficie-escura); color: var(--tinta-invertida); }
.faixa--clara  { background: var(--superficie-clara);  color: var(--tinta); }

/* ── Niveis tipograficos (reaproveitar no formulario) ─────────────── */
.display {                       /* so na capa                        */
  margin: 0;
  font-size: clamp(54px, 17.5vw, 76px);
  font-weight: 600; letter-spacing: -.035em; line-height: .92;
}
.titulo {                        /* titulo de bloco / de etapa        */
  margin: 0;
  font-size: clamp(21px, 5.6vw, 25px);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.22;
}
.subtitulo {
  margin: 0;
  font-size: clamp(15.5px, 4.4vw, 18px);
  font-weight: 500; letter-spacing: -.01em; line-height: 1.35;
}
.corpo {
  margin: 0;
  font-size: clamp(14.5px, 3.9vw, 16px);
  font-weight: 400; line-height: 1.55;
}
.rotulo {                        /* rotulo de campo, de secao         */
  margin: 0;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
}
.rotulo--ambar { color: var(--ambar); font-weight: 600; }
.legenda { margin: 0; font-size: 12.5px; line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════════════
   HERO — um unico grid com tres quadros: MARCA (ambar), MIDIA (video)
   e AGENCIAS (escuro). O que muda entre celular e desktop e' so' onde
   cada quadro cai no grid; o conteudo e a ordem no HTML sao os mesmos.
   O fundo do grid ja' e' o escuro, entao MIDIA e AGENCIAS nao precisam
   de cor propria: eles sao o mesmo campo escuro, como na p.23.
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--superficie-escura);
  color: var(--tinta-invertida);
}
.hero .coluna { max-width: var(--medida); margin: 0 auto; padding: 0 var(--margem); }

.hero__marca {
  grid-column: 1 / -1; grid-row: 1;
  background: var(--superficie-marca); color: var(--tinta);
}
.hero__agencias { grid-column: 1; grid-row: 2; }
/* `overflow:hidden` + video absoluto (no desktop) impede que a ALTURA
   INTRINSECA do 9:16 dite a altura da dobra: com height:100% num
   container de altura indefinida o Chrome cai no aspecto do arquivo e
   o hero virava 410x729 em vez de ocupar a tela. */
.hero__midia    { grid-column: 2; grid-row: 2; display: flex; position: relative; overflow: hidden; }

/* ── Quadro 1: marca ─────────────────────────────────────────────── */
.hero__marca .coluna {
  padding-top: calc(14px + env(safe-area-inset-top));
  padding-bottom: var(--e6);
}
/* `flow-root` so' para a margem do logotipo nao vazar para fora do
   nucleo — no celular o espacamento resultante e' o mesmo de antes. */
.nucleo { display: flow-root; }
.etiquetas {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding-bottom: var(--e3);
  border-bottom: 1px solid var(--fio);
}
.etiquetas .rotulo { white-space: nowrap; }

.logo { width: 100%; max-width: 216px; display: block; }
/* Area de respiro do manual: >= altura do simbolo (216/6,02 ≈ 36px),
   acima e abaixo do logotipo. E' o que impede "Autoriza" de colar na
   marca e virar um logotipo novo. */
.hero__marca .logo { margin-top: var(--e6); }
.hero__marca .display { margin-top: var(--e6); }
.hero__marca .subtitulo { margin-top: var(--e3); max-width: 22ch; }
.hero__marca .corpo { margin-top: var(--e4); max-width: 33ch; }

/* ── Quadro 2: o video ───────────────────────────────────────────── */
/* No celular o video sangra pela borda direita e acompanha a altura da
   faixa escura: e' um BLOCO do sistema, nao um cartaozinho boiando. */
.filme {
  display: block; width: clamp(150px, 46vw, 190px);
  height: 100%; min-height: 320px; object-fit: cover;
  border-radius: var(--raio-bloco) 0 0 var(--raio-bloco);
  background: var(--superficie-escura);  /* some no bloco se falhar */
}

/* ── Quadro 3: agencias ──────────────────────────────────────────── */
.hero__agencias .coluna { padding-top: var(--e6); padding-bottom: var(--e6); }
.hero__agencias .titulo { margin-top: var(--e3); max-width: 19ch; }
.enderecos { margin-top: var(--e5); margin-bottom: 0; }
.enderecos > div { padding: 9px 0; border-top: 1px solid var(--fio-invertido); }
.enderecos dt {
  font-size: 9.5px; font-weight: 600; color: var(--ambar);
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 3px;
}
.enderecos dd { margin: 0; font-size: 12.5px; line-height: 1.4; }
.enderecos .legenda {
  margin-top: var(--e3); color: var(--tinta-legenda);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
}

/* ══ FAIXA CLARA — registro da empresa ══════════════════════════ */
.registro-bloco > .coluna { padding-top: var(--e6); padding-bottom: var(--e6); }
.registro { margin: var(--e3) 0 0; border-top: 1px solid var(--fio); }
.registro > div {
  display: grid; grid-template-columns: 92px 1fr;
  gap: var(--e1) 14px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--fio);
}
.registro dt {
  font-size: 10px; font-weight: 500; padding-top: 2px;
  letter-spacing: .12em; text-transform: uppercase;
}
.registro dd {
  margin: 0; font-size: clamp(14.5px, 4vw, 16px);
  font-weight: 500; letter-spacing: -.005em; line-height: 1.3;
}
/* Etiqueta ambar: uso previsto no manual para "chamadas curtas". O dado
   que prova a legitimidade e' o que recebe a cor da marca. */
.etiqueta {
  display: inline-block;
  background: var(--superficie-marca); color: var(--tinta);
  padding: 4px 10px; border-radius: var(--raio-campo);
  font-weight: 600; letter-spacing: .01em;
}
.registro a {
  color: var(--tinta); text-decoration: none;
  border-bottom: 1.5px solid var(--tinta); padding-bottom: 1px;
}
/* A seta ↗ ecoa o conceito do simbolo — um K que aponta para cima e
   para a direita. E' um sinal, nao a marca. */
.registro .seta { border: 0; font-weight: 600; }

/* ══ FAIXA ESCURA — fecho ═══════════════════════════════════════ */
.fecho > .coluna {
  padding-top: var(--e5);
  padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--e4);
}
.fecho__marca { display: flex; align-items: center; gap: var(--e4); }
.fecho img { height: 40px; flex-shrink: 0; }
.fecho p { margin: 0; font-size: 13.5px; line-height: 1.4; max-width: 26ch; }
.fecho__dominio { display: none; color: var(--tinta-legenda); }

/* ── Telas de celular baixas (360x640): a capa continua cabendo ──── */
/* Escopado por max-width tambem: uma JANELA de desktop com 660px de
   altura nao pode cair aqui e encolher a marca. */
@media (max-height: 680px) and (max-width: 899px) {
  .hero__marca .logo { max-width: 186px; margin-top: var(--e5); }
  .hero__marca .display { margin-top: var(--e5); font-size: clamp(46px, 14.5vw, 60px); }
  .hero__marca .coluna { padding-bottom: var(--e5); }
  .hero__agencias .coluna { padding-top: var(--e5); padding-bottom: var(--e5); }
  .registro-bloco > .coluna { padding-top: var(--e5); padding-bottom: var(--e5); }
  .filme { min-height: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════
   >= 900px — TELA LARGA
   A coluna de leitura de 560px deixa de reger a pagina: cada quadro
   ganha a propria largura e o video passa a ocupar a ALTURA CHEIA da
   primeira dobra. E' aqui que acaba o "celular esticado".
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 34vw, 420px);
    grid-template-rows: minmax(0, 1fr) auto;
    /* 94svh, nao 100: deixa a faixa clara aparecer por uns 40px no pe'
       da tela, que e' o que avisa que a pagina continua. */
    min-height: min(94svh, 860px);
  }
  .hero__marca    { grid-column: 1; grid-row: 1; display: flex; align-items: stretch; }
  .hero__agencias { grid-column: 1; grid-row: 2; }
  .hero__midia    { grid-column: 2; grid-row: 1 / span 2; }

  /* dentro do hero a coluna encosta a' esquerda e respira mais */
  .hero .coluna {
    margin: 0; width: 100%; max-width: 48ch;
    padding-inline: clamp(28px, 3.6vw, 64px);
  }
  /* etiquetas ancoradas no topo, nucleo da marca centrado no resto */
  .hero__marca .coluna {
    display: flex; flex-direction: column;
    padding-top: clamp(24px, 3.4vh, 40px); padding-bottom: clamp(24px, 3.4vh, 40px);
  }
  .hero__marca .nucleo { margin-block: auto; }
  .hero__agencias .coluna { padding-top: var(--e4); padding-bottom: var(--e5); }

  /* O video vira um CAMPO DE COR que sangra ate' as bordas do bloco:
     sem raio, sem margem, como os quadros justapostos da p.32/p.35. */
  .filme {
    position: absolute; inset: 0;
    width: 100%; height: 100%; min-height: 0;
    border-radius: 0;
  }

  /* Cartao de traco fino sobre ambar — vocabulario da p.38 */
  .nota {
    margin-top: var(--e4); max-width: 40ch;
    border: 1px solid var(--fio); border-radius: var(--raio-bloco);
    padding: 16px 20px;
  }

  /* ── Faixas de baixo: largura institucional, nao a de leitura ────
     Mesmo recuo lateral do hero, para o "QUEM RECEBE" nascer na mesma
     vertical do logotipo la' em cima. */
  .faixa > .coluna { max-width: var(--medida-larga); padding-inline: clamp(28px, 3.6vw, 64px); }

  .registro-bloco > .coluna { padding-top: var(--e6); padding-bottom: var(--e6); }
  .registro {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--e6); margin-top: var(--e4); border-top: 0;
  }
  .registro > div {
    display: block; padding: var(--e4) 0 0;
    border-top: 1px solid var(--fio); border-bottom: 0;
  }
  .registro dt { display: block; margin-bottom: var(--e2); }
  .registro dd { font-size: 17px; }

  .fecho > .coluna { justify-content: space-between; }
  .fecho__dominio { display: block; }
}

/* ═══════════════════════════════════════════════════════════════════
   >= 1200px — TRES QUADROS LADO A LADO (p.32 / p.35)
   AMBAR | VIDEO | ESCURO na mesma linha, preenchendo a dobra inteira.
   Nada de ar morto nas laterais: a cor vai ate' a borda da tela.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .hero {
    grid-template-columns:
      minmax(0, 1.04fr) clamp(360px, 32vw, 460px) minmax(0, 0.96fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .hero__marca    { grid-column: 1; grid-row: 1; }
  .hero__midia    { grid-column: 2; grid-row: 1; }
  .hero__agencias { grid-column: 3; grid-row: 1; display: flex; align-items: center; }

  .hero .coluna { max-width: none; padding-inline: clamp(36px, 3.6vw, 64px); }
  .hero__agencias .coluna { padding-top: var(--e5); padding-bottom: var(--e5); }
  .hero__marca .display { font-size: clamp(68px, 6.2vw, 92px); }
  .hero__marca .logo { max-width: 232px; }
  .hero__agencias .titulo { font-size: 27px; max-width: 15ch; }
  .enderecos dd { font-size: 14px; }
  .nota { max-width: 34ch; }
}

/* ── Botao de Login — unico acrescimo sobre a pagina de producao ────
   Sobre o quadro AMBAR do hero: fundo escuro, texto ambar (10,61:1) — a
   mesma regra de acao primaria da marca. Substitui o chip "Página
   oficial"; o resto da pagina nao muda. */
.botao-login {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 26px;
  background: var(--escuro, #0C181F); color: var(--ambar, #FFBB10);
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
  text-decoration: none; border-radius: 999px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.botao-login:hover, .botao-login:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(12, 24, 31, .35);
}
.botao-login:focus-visible { outline: 3px solid #8A6008; outline-offset: 2px; }

/* ⚠️ Onde o ponteiro é o DEDO, o alvo sobe ao --toque do projeto (52px) — sugestão do
   UX/UI, aceita porque o botão é o ÚNICO acréscimo sobre a página de produção: 44px é o
   piso de acessibilidade, 52px é o padrão da casa, e aqui não há fidelidade a ferir. */
@media (pointer: coarse) {
  .botao-login { min-height: 52px; padding: 13px 30px; }
}

/* ☠️ "Reduzir movimento" também na CAMADA DE CSS — achado 64 do Code Review. O inicio.js
   (herdado da página de produção) já tira autoplay e pausa o vídeo, mas depende de script:
   quem tem a preferência ligada e o script bloqueado ficava com o filme em loop — WCAG
   2.2.2 na primeira página que qualquer pessoa vê. Aqui o filme some e o quadro fica com o
   poster, que já existe. (Quem poupa o download do 1,5 MB é o js tirando o autoplay; esta
   camada garante a imagem PARADA mesmo sem script.) */
@media (prefers-reduced-motion: reduce) {
  .filme { display: none; }
  .hero__midia {
    background: url("/konex-agencias.jpg") center / cover no-repeat;
  }

  /* ⚠️ E o botão para quieto — reforço do Code Review no mesmo achado: transition
     numa folha que ignora a preferência é a mesma dívida em miniatura. */
  .botao-login { transition: none; }
  .botao-login:hover, .botao-login:focus-visible { transform: none; }
}

/* ☠️ Achado 66: abaixo de 900px quem dava dimensão ao quadro era o PRÓPRIO filme
   (width, min-height e o raio); escondido ele, .hero__midia colapsava a zero e o poster
   não pintava — a promessa do bloco acima falhava exatamente no celular. O quadro herda
   as dimensões que o filme lhe dava, ESCOPADO: ≥900px a coluna já dimensiona, e a mesma
   width lá estragaria o notebook. */
@media (prefers-reduced-motion: reduce) and (max-width: 899px) {
  .hero__midia {
    width: clamp(150px, 46vw, 190px);
    min-height: 320px;
    border-radius: var(--raio-bloco) 0 0 var(--raio-bloco);
  }
}

/* ⚠️ E o celular BAIXO encolhe igual ao filme (o mesmo escopo do bloco 360x640 acima). */
@media (prefers-reduced-motion: reduce) and (max-width: 899px) and (max-height: 680px) {
  .hero__midia { min-height: 260px; }
}