/* Landing do app de gestão para instrutores de trânsito.
   Ordem: tokens → reset → base → layout (primitivos) → componentes → utilitários. */

@layer reset, base, layout, componentes, utilitarios;

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  --grafite-950: #0E1014;
  --grafite-900: #14171C;
  --grafite-800: #1C2027;
  --grafite-700: #2A2F37;
  --grafite-300: #A9AFBA;
  --amarelo: #FFC400;
  --verde: #1FA35B;
  --whats: #1EBE5D;

  /* papéis (tema claro) */
  --fundo: #F7F6F2;
  --fundo-suave: #EFEDE6;
  --texto: #14171C;
  --texto-suave: #4A505B;
  --borda: #E2DFD6;
  --icone: #14171C;

  /* faixas escuras ficam escuras nos dois temas */
  --escuro-fundo: var(--grafite-900);
  --escuro-texto: #F4F5F7;
  --escuro-suave: #B6BBC5;

  /* tela vazia dentro da moldura (antes dos PNGs chegarem) */
  --tela-fundo: #ECEEF2;
  --tela-bloco: #D9DDE4;
  --tela-destaque: color-mix(in oklch, var(--amarelo) 55%, var(--tela-fundo));

  /* espaço e tipo fluidos (sempre com termo em rem: respeita o zoom) */
  --gutter: clamp(1rem, -0.5rem + 4vi, 3rem);
  --esp-1: 0.5rem;
  --esp-2: clamp(0.75rem, 0.6rem + 0.5vi, 1rem);
  --esp-3: clamp(1.25rem, 1rem + 1vi, 1.75rem);
  --esp-4: clamp(2rem, 1.4rem + 2.5vi, 3.5rem);
  --esp-5: clamp(3.5rem, 2.4rem + 5vi, 7rem);

  --fs-0: clamp(1rem, 0.95rem + 0.25vi, 1.125rem);
  --fs-1: clamp(1.125rem, 1rem + 0.5vi, 1.375rem);
  --fs-2: clamp(1.75rem, 1.2rem + 2.4vi, 3rem);
  --fs-3: clamp(2.25rem, 1.3rem + 4.4vi, 4.5rem);

  --raio: 0.875rem;
  --largura: 74rem;
  --sombra-celular: 0 2.5rem 4rem -1.5rem rgb(0 0 0 / 0.45), 0 0.5rem 1rem -0.5rem rgb(0 0 0 / 0.3);
  --duracao: 0.6s;

  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: var(--grafite-950);
    --fundo-suave: #161A20;
    --texto: #EEF0F3;
    --texto-suave: #B6BBC5;
    --borda: var(--grafite-700);
    --icone: var(--amarelo);
    --escuro-fundo: var(--grafite-800);
    --tela-fundo: #222730;
    --tela-bloco: #2E343E;
  }
}

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg { display: block; max-inline-size: 100%; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;  /* única exceção: desarmar movimento é o propósito */
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------- Base ---------- */
@layer base {
  html { scroll-behavior: smooth; }
  body {
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: var(--fs-0);
    line-height: 1.55;
    font-weight: 500;
    overflow-x: clip; /* rede de segurança: sombras e rotações nunca geram rolagem lateral */
  }
  h1, h2 { line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; text-wrap: balance; }
  h1 { font-size: var(--fs-3); }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--amarelo); outline-offset: 3px; border-radius: 4px; }
  figure { margin: 0; }
}

/* ---------- Layout: primitivos ---------- */
@layer layout {
  /* Center */
  .centro {
    inline-size: 100%;
    max-inline-size: calc(var(--largura) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Stack */
  .pilha { display: flex; flex-direction: column; gap: var(--esp-2); }
  .pilha--grande { gap: var(--esp-4); }

  /* Cluster */
  .grupo { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }

  /* Grid automático: quantas colunas couberem */
  .grade-auto {
    display: grid;
    gap: var(--esp-3) var(--esp-2);
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  }

  /* Sidebar: texto com largura intrínseca, imagem ocupa o resto; quebra sem media query */
  .barra-lateral { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; }
  .barra-lateral > :first-child { flex: 1 1 20rem; }
  .barra-lateral > :last-child { flex: 999 1 24rem; }

  .secao { padding-block: var(--esp-5); }
  .secao--curta { padding-block: var(--esp-4); }
  .secao--suave { background: var(--fundo-suave); }
  .secao--escura { background: var(--escuro-fundo); color: var(--escuro-texto); }
}

/* ---------- Componentes ---------- */
@layer componentes {

  /* Moldura de celular (Box). A moldura mede a si mesma: raio e borda escalam com cqi. */
  .celular {
    container-type: inline-size;
    position: relative;
    inline-size: 100%;
    /* % no raio é relativo à própria caixa: 13% da largura e 6% da altura dão canto redondo */
    border-radius: 13% / 6%;
    background: linear-gradient(160deg, #2B3038, #0B0D10 45%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), var(--sombra-celular);
  }
  /* ilha da câmera */
  .celular::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset-block-start: 7cqi;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 26cqi;
    block-size: 7.5cqi;
    border-radius: 99px;
    background: #050607;
  }
  .tela {
    aspect-ratio: 412 / 915;
    overflow: hidden;
    margin: 0.5rem;
    margin: 3.6cqi; /* cqi aqui mede a moldura, que é o contêiner */
    border-radius: 1.75rem;
    border-radius: 9.5cqi;
    background: var(--tela-fundo);
  }
  /* Esqueleto de app desenhado em gradientes: aparece enquanto o PNG não existe. */
  .tela,
  .tela img::after {
    background:
      linear-gradient(var(--tela-bloco) 0 0) 8% 7.5% / 34% 1.6% no-repeat,
      linear-gradient(var(--tela-destaque) 0 0) 50% 15% / 86% 16% no-repeat,
      linear-gradient(var(--tela-bloco) 0 0) 50% 39% / 86% 9% no-repeat,
      linear-gradient(var(--tela-bloco) 0 0) 50% 51% / 86% 9% no-repeat,
      linear-gradient(var(--tela-bloco) 0 0) 50% 63% / 86% 9% no-repeat,
      linear-gradient(var(--tela-bloco) 0 0) 50% 96% / 100% 7% no-repeat,
      var(--tela-fundo);
  }
  .tela img {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    color: transparent; /* esconde o texto alternativo visualmente se o arquivo faltar */
  }
  /* Imagem que falhou ganha ::after no Chrome e Firefox: cobre o ícone de imagem quebrada. */
  .tela img::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  /* Hero */
  .topo { background: var(--escuro-fundo); color: var(--escuro-texto); }
  .topo__linha {
    display: flex; flex-wrap: wrap; gap: var(--esp-2);
    align-items: center; justify-content: space-between;
    padding-block: var(--esp-2);
  }
  .marca {
    display: inline-flex; align-items: center; gap: 0.6rem;
    text-decoration: none; font-weight: 800; font-size: var(--fs-1); letter-spacing: -0.01em;
  }
  .marca b { color: var(--amarelo); }
  .topo__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  /* tela estreita: só "Entrar" no topo; o contato segue no "Quero testar grátis" logo abaixo */
  @media (width < 30rem) { .topo__acoes .botao--fantasma { display: none; } }

  .heroi {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--escuro-fundo);
    color: var(--escuro-texto);
    padding-block: var(--esp-4) var(--esp-5);
  }
  /* brilho amarelo e faixa tracejada de pista atrás dos celulares */
  .heroi::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto -20% -30% 30%;
    block-size: 80%;
    background: radial-gradient(closest-side, color-mix(in oklch, var(--amarelo) 28%, transparent), transparent);
  }
  .heroi__grade {
    display: grid;
    gap: var(--esp-4);
    grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
    align-items: center;
  }
  .heroi__texto { gap: var(--esp-3); max-inline-size: 36rem; }
  .heroi h1 em { font-style: normal; color: var(--amarelo); }
  .heroi__apoio { font-size: var(--fs-1); color: var(--escuro-suave); max-inline-size: 32ch; }

  .selo {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.8rem;
    border-radius: 99px;
    color: var(--amarelo);
    background: color-mix(in oklch, var(--amarelo) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--amarelo) 40%, transparent);
  }

  /* Três celulares sobrepostos: o do meio na frente, os laterais menores e inclinados */
  .trio {
    display: flex;
    justify-content: center;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 36rem;
    margin-inline: auto;
    padding-block: var(--esp-2);
  }
  .trio__meio { flex: 0 0 44%; z-index: 1; }
  .trio__lado { flex: 0 0 36%; opacity: 0.96; }
  .trio__lado:first-child { margin-inline-end: -9%; rotate: -6deg; translate: 0 6%; }
  .trio__lado:last-child { margin-inline-start: -9%; rotate: 6deg; translate: 0 6%; }

  /* Placa amarela tipo "AUTOESCOLA" */
  .placa {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.35rem 1.75rem;
    padding: 0.9rem var(--gutter);
    background: var(--amarelo);
    color: var(--grafite-900);
    font-weight: 800;
    font-size: 0.9375rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-block: 4px solid var(--grafite-900);
  }

  /* Botões */
  .botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-block-size: 3rem;
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    border: 2px solid transparent;
    background: var(--amarelo);
    color: var(--grafite-900);
    font-weight: 800;
    text-decoration: none;
    transition: background-color 0.2s, translate 0.2s;
  }
  .botao:hover { background: color-mix(in oklch, var(--amarelo), white 25%); translate: 0 -2px; }
  .botao--fantasma { background: transparent; color: inherit; border-color: currentColor; }
  .botao--fantasma:hover { background: color-mix(in oklch, currentColor 12%, transparent); }
  .topo .botao { min-block-size: 2.5rem; padding: 0.45rem 1.1rem; font-size: 0.9375rem; }
  .botao--whats { background: var(--whats); color: #06240F; }
  .botao--whats:hover { background: color-mix(in oklch, var(--whats), white 20%); }
  .botao svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

  /* Títulos de seção */
  .titulo-secao { font-size: var(--fs-2); max-inline-size: 20ch; }
  .linha-apoio { font-size: var(--fs-1); color: var(--texto-suave); max-inline-size: 48ch; }
  .secao--escura .linha-apoio { color: var(--escuro-suave); }

  /* Benefícios */
  .beneficios { align-items: start; }
  .beneficio { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); }
  .beneficio .celular { max-inline-size: 15rem; }
  .beneficio figcaption {
    font-weight: 800;
    font-size: var(--fs-1);
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
  }

  /* Linha do tempo: rolagem com encaixe no celular, quatro colunas quando cabe */
  .passos {
    --vao: var(--esp-3);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(12.5rem, 1fr);
    gap: var(--vao);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    /* sangra até a borda da tela sem estourar a página */
    margin-inline: calc(-1 * var(--gutter));
    padding: 0.5rem var(--gutter) 2rem;
    scrollbar-width: thin;
  }
  .passo { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--esp-3); }
  /* trilho tracejado que liga um passo ao próximo, com ponta de seta */
  .passo:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-block-start: 1.125rem;
    inset-inline: 2.75rem calc(-1 * var(--vao) + 0.5rem);
    border-block-start: 2px dashed color-mix(in oklch, var(--texto) 35%, transparent);
  }
  .passo:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(1.125rem - 5px);
    inset-inline-end: calc(-1 * var(--vao) + 0.25rem);
    inline-size: 12px;
    block-size: 12px;
    background: color-mix(in oklch, var(--texto) 55%, transparent);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  /* número em cima (na linha do trilho), texto embaixo: o trilho nunca cruza o texto */
  .passo__rotulo {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem;
    font-weight: 800;
    line-height: 1.2;
    padding-inline-end: 1rem;
  }
  .passo__num {
    flex: none;
    display: grid; place-items: center;
    inline-size: 2.25rem; block-size: 2.25rem;
    border-radius: 50%;
    background: var(--amarelo);
    color: var(--grafite-900);
    font-weight: 800;
  }
  .passo__num--ok { background: var(--verde); color: #fff; }
  .passo .celular { max-inline-size: 15rem; }

  /* Autoescolas */
  .dupla { display: flex; justify-content: center; align-items: flex-start; }
  .dupla .celular { flex: 0 1 15rem; }
  .dupla .celular + .celular { margin-inline-start: -2rem; margin-block-start: 3.5rem; }
  .autoescolas__texto { gap: var(--esp-3); }
  .secao--escura .titulo-secao { color: var(--escuro-texto); }

  /* Confiança */
  .confianca {
    display: grid;
    gap: var(--esp-2);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  }
  .confianca li {
    display: flex; align-items: center; gap: 0.9rem;
    padding: var(--esp-2) var(--esp-3);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    font-weight: 700;
    line-height: 1.3;
  }
  .confianca svg {
    flex: none;
    fill: none;
    stroke: var(--icone);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .confianca li:first-child svg path:last-child,
  .confianca li:last-child svg path:last-child { stroke: var(--verde); }

  /* Contato */
  .contato { padding-block-start: var(--esp-4); }
  .contato__caixa {
    align-items: center;
    text-align: center;
    gap: var(--esp-3);
  }
  .contato__caixa > * { margin-inline: auto; }
  .contato .titulo-secao { max-inline-size: 16ch; }

  /* Rodapé */
  .rodape {
    padding-block: var(--esp-4);
    border-block-start: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 0.9375rem;
  }
  .rodape strong { color: var(--texto); }
  .rodape__nota { font-size: 0.875rem; max-inline-size: 60ch; }
}

/* ---------- Movimento: só para quem não pediu menos movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  @layer componentes {
    .trio .celular { animation: subir 0.9s cubic-bezier(.2, .7, .2, 1) both; }
    .trio .trio__meio { animation-delay: 0.1s; }
    .trio .trio__lado:last-child { animation-delay: 0.2s; }
    @keyframes subir { from { opacity: 0; transform: translateY(2.5rem); } }

    /* Progressivo: revelação ao rolar só onde há linha do tempo de rolagem */
    @supports (animation-timeline: view()) {
      .beneficio, .passo, .dupla, .confianca li {
        animation: revelar linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }
      @keyframes revelar { from { opacity: 0; transform: translateY(1.5rem); } }
    }
  }
}

/* ---------- Utilitários ---------- */
@layer utilitarios {
  .visualmente-oculto {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}