/* ==========================================================================
   VISOFLEX — TOKENS
   Fonte da verdade para cor, tipografia, espaçamento e layout.
   Nenhum valor de cor, fonte, tamanho de fonte, entrelinha, padding ou margin
   deve ser escrito fora deste arquivo (CLAUDE.md, regra 1).

   v2 — redesenho "industrial preciso": mesma marca (#124387, Montserrat,
   cantos retos), escala tipográfica maior, ritmo vertical mais generoso.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     COR — MARCA
     Um só azul institucional (DECISOES C1). #164B96 não existe.
     ------------------------------------------------------------------ */
  --azul:              #124387;   /* Azul Títulos (Brand Book 2026) */
  --amarelo:           #FFFE79;   /* Amarelo Destaque — só sobre fundo escuro: números, sublinhados */
  --azul-hover:        #0E3770;   /* primário pressionado/hover */
  --azul-escuro:       #0D1E37;   /* Azul Noite — fundos de seção escura */
  --azul-profundo:     #0D1E37;   /* Azul Noite — hero e rodapé */
  --ciano:             #4DD5FF;   /* acento — só sobre fundo escuro */
  --whatsapp:          #25D366;   /* cor oficial do botão WhatsApp */
  --sucesso:           #1E7F4F;   /* mensagem de envio ok */
  --erro:              #B42318;   /* mensagem de erro */

  /* COR — NEUTROS */
  --preto:             #08111F;
  --branco:            #FFFFFF;
  --cinza-fundo:       #F1F3F6;   /* fundo de seção clara */
  --cinza-borda:       #E0E4E9;   /* única borda cinza */

  /* COR — TEXTO */
  --texto:             #3E4853;   /* Parágrafo (Brand Book) */
  --titulo:            var(--azul);
  --texto-suave:       #5B6D81;   /* Legendas (Brand Book) */
  --texto-claro:       var(--branco);
  --texto-claro-suave: rgba(255, 255, 255, 0.72);

  /* COR — SUPERFÍCIES DERIVADAS */
  --azul-06:           rgba(18, 67, 135, 0.06);
  --azul-10:           rgba(18, 67, 135, 0.10);
  --azul-20:           rgba(18, 67, 135, 0.20);
  --branco-08:         rgba(255, 255, 255, 0.08);
  --branco-16:         rgba(255, 255, 255, 0.16);
  --ciano-16:          rgba(77, 213, 255, 0.16);
  --veu-escuro:        rgba(2, 12, 28, 0.97);   /* fundo do lightbox */
  --veu-janela:        rgba(13, 30, 55, 0.8);   /* fundo atrás da janela de download */
  --veu-painel: linear-gradient(90deg, rgba(13, 30, 55, 0.97) 0%, rgba(13, 30, 55, 0.9) 70%, rgba(5, 37, 82, 0.86) 100%);
  --veu-cartao: linear-gradient(180deg, rgba(13, 30, 55, 0) 35%, rgba(13, 30, 55, 0.88) 100%);

  /* Véu sobre foto do hero — legibilidade do texto branco */
  --veu-hero: linear-gradient(90deg,
                rgba(13, 30, 55, 0.94) 0%,
                rgba(13, 30, 55, 0.82) 40%,
                rgba(13, 30, 55, 0.35) 75%,
                rgba(13, 30, 55, 0.15) 100%);
  --veu-hero-mobile: linear-gradient(180deg,
                rgba(13, 30, 55, 0.55) 0%,
                rgba(13, 30, 55, 0.92) 70%);

  /* ------------------------------------------------------------------
     TIPOGRAFIA — uma família (DECISOES C4)
     ------------------------------------------------------------------ */
  --fonte: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Escala — mobile first. Valores desktop no bloco @media abaixo. */
  --fs-display:   2.25rem;   /* 36 — h1 */
  --fs-h2:        1.75rem;   /* 28 — título de seção */
  --fs-h3:        1.125rem;  /* 18 — título de card */
  --fs-lead:      1.0625rem; /* 17 — subtítulo/lead */
  --fs-corpo:     0.9375rem; /* 15 */
  --fs-pequeno:   0.8125rem; /* 13 */
  --fs-label:     0.75rem;   /* 12 — eyebrow, uppercase */
  --fs-nav:       0.875rem;  /* 14 */
  --fs-campo:     1rem;      /* 16 — mínimo p/ não dar zoom no iOS (AJUSTES F2) */
  --fs-estat:     1.5rem;    /* 24 — número das estatísticas */
  --fs-passo:     2.5rem;    /* 40 — numeração dos próximos passos */

  --lh-titulo:    1.12;
  --lh-corpo:     1.6;
  --lh-compacto:  1.3;

  --fw-regular:   400;
  --fw-medio:     500;
  --fw-semi:      600;
  --fw-bold:      700;
  --fw-light:     300;
  --fw-titulo:    800;   /* ExtraBold — títulos (Brand Book 2026) */

  --ls-titulo:    -0.02em;   /* títulos grandes mais compactos */
  --ls-label:     0.12em;    /* eyebrow */

  /* ------------------------------------------------------------------
     ESPAÇAMENTO — escala base 4px
     ------------------------------------------------------------------ */
  --e-1:  0.25rem;   /*   4 */
  --e-2:  0.5rem;    /*   8 */
  --e-3:  0.75rem;   /*  12 */
  --e-4:  1rem;      /*  16 */
  --e-5:  1.25rem;   /*  20 */
  --e-6:  1.5rem;    /*  24 */
  --e-8:  2rem;      /*  32 */
  --e-10: 2.5rem;    /*  40 */
  --e-12: 3rem;      /*  48 */
  --e-16: 4rem;      /*  64 */
  --e-20: 5rem;      /*  80 */
  --e-24: 6rem;      /*  96 */
  --e-32: 8rem;      /* 128 */

  --secao-py:   var(--e-16);   /* respiro vertical das seções */
  --hero-py:    var(--e-16);


  /* ------------------------------------------------------------------
     MARCA — A SETA (o "X" do logo: chevron branco + diagonal ciano)
     Usada como recorte de seções, ponta de botão, canto de foto e marcador.
     ------------------------------------------------------------------ */
  --seta-svg:        url("/img/marca/seta.svg");
  --seta-dupla-svg:  url("/img/marca/seta-dupla.svg");
  --seta-ponta:      0.875rem;  /* ponta do botão em forma de seta */
  --seta-secao:      2.5rem;    /* profundidade do V no fim das seções escuras */
  --seta-hero:       4rem;      /* ponta do painel do hero apontando para a foto */
  --corte:           2.25rem;   /* canto chanfrado das fotos */
  --moldura-desloc:  0.75rem;   /* deslocamento do traço ciano atrás da foto */
  --marca-tam:       28rem;     /* chevron gigante de fundo */
  --subnav-h:        3.5rem;
  --thumb-galeria:   3.5rem;    /* miniaturas da galeria */
  --produto-foto-min: 22rem;   /* altura da foto da capa (home) no mobile */
  --hero-produto-min: 30rem;  /* topo da página de produto: baixo o bastante para a faixa de números aparecer na 1ª tela */
  --tile-h:          16rem;
  --fs-numero:       1.5rem;    /* faixa de números-chave */
  --fs-estat-6:      1.75rem;
  --fs-titulo-longo: 1.625rem;
  --fs-capa:         3.5rem;
  --fs-titulo-artigo: 1.875rem; /* H1 de artigo/case (títulos longos) */
  --capa-painel:     52%;       /* largura do painel de texto da capa */
  --capa-degrade:    26rem;     /* extensão do degradê azul sobre a foto */
  --capa-filtro:     brightness(.9) contrast(1.06) saturate(.95);  /* segura o branco estourado */    /* H1 da capa com texto à direita (desktop) */  /* títulos de frase inteira */   /* estatísticas da home em 6 colunas */
  --fs-dif-n:        3rem;      /* numeração 01/02/03 */
  --contorno-num:    1px;       /* traço dos números vazados */

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --container:     1240px;
  --container-txt: 46rem;     /* coluna de leitura */
  --medida:        60ch;      /* largura máxima de parágrafo */
  --gutter:        var(--e-4);
  --gutter-desk:   var(--e-8);
  --hero-min:      34rem;     /* altura mínima do hero */
  --hero-min-desk: 40rem;
  --icone:         1.25rem;   /* 20 — ícone padrão */
  --icone-lg:      2.75rem;   /* 44 — ícone de destaque */
  --logo-h:        1.5rem;    /* altura do logo na navbar */
  --logo-cliente-h: 3rem;      /* caixa igual para todos os logos de cliente */
  --logo-cliente-w: 7.5rem;
  --logos-duracao:  60s;      /* volta completa da faixa de clientes */
  --produto-img-max: 36rem;   /* altura máx. da foto no hero de produto */
  --campo-h:       3rem;      /* altura de input */
  --btn-h:         3rem;
  --linha-acento:  1.5rem;    /* traço antes do eyebrow */
  --mega-thumb:    5.5rem;    /* miniatura no mega menu */
  --mega-trilho:   14rem;     /* coluna de categorias do mega menu */
  --mega-lado:     15rem;     /* coluna lateral do mega menu */
  --card-thumb-cel: 7rem;    /* foto do card de produto no celular (ao lado do texto) */
  --cookies-max:   34rem;    /* largura do banner de cookies no desktop */
  --mega-compacto: 24rem;     /* dropdown de Contato */
  --mapa-max:      32rem;     /* largura máx. do mapa de credenciados */
  --fs-mapa:       0.6875rem; /* 11 — sigla do estado (unidades do viewBox 450×460) */
  --ceo-foto:      15rem;     /* foto do CEO (original 320 px) */
  --ceo-max:       60rem;     /* largura do bloco do CEO */
  --institucional-logo-h: 1.125rem; /* logo no lugar do eyebrow do institucional */

  --borda:         1px;
  --borda-forte:   2px;
  --raio:          2px;       /* visual reto, industrial (brand kit) */
  --raio-md:       4px;
  --proporcao-quadrada: 1 / 1;
  --play-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E");
  --janela-largura: 40rem;  /* janela do formulário de download */
  --marcador:       1.5rem;   /* número sobre ilustração (celular) */
  --marcador-lg:    2rem;     /* idem, tablet/desktop */
  --divisor-altura: 3rem;     /* faixa de transição cinza → branco no topo da seção */
  --raio-pill:     999px;

  --sombra:        0 1px 2px rgba(8, 17, 31, 0.06), 0 2px 8px rgba(18, 67, 135, 0.08);
  --sombra-forte:  0 4px 12px rgba(8, 17, 31, 0.08), 0 16px 40px rgba(18, 67, 135, 0.16);

  --transicao:     200ms cubic-bezier(.2, .7, .2, 1);
  --entrada-dur:    600ms;     /* fade in do topo das páginas de produto */
  --entrada-curva:  ease-out;
  --zoom-foto:     1.04;
  --elevar:        -4px;

  --proporcao-card:   4 / 3;
  --proporcao-video:  16 / 9;
  --proporcao-faixa:  2 / 1;
  --proporcao-retrato: 3 / 4;
  --proporcao-produto: 1 / 1;

  --btn-flutuante:    3.5rem;
  --flutuante-borda:  var(--e-4);

  --z-base:      1;
  --z-flutuante: 90;
  --z-cookies:   95;          /* banner de cookies acima dos botões flutuantes */
  --z-navbar:    100;
  --z-menu:      110;
  --z-lightbox:  200;

  /* Breakpoints — documentados aqui, usados nas media queries
     tablet: 768px | desktop: 1024px  (não criar outros) */
}

@media (min-width: 768px) {
  :root {
    --fs-display: 2.75rem;    /* 44 */
    --fs-h2:      2rem;       /* 32 */
    --secao-py:   var(--e-20);
    --fs-estat:   2.25rem;
    --logo-h:     1.75rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 4.25rem;    /* 68 */
    --fs-h2:      2.75rem;    /* 44 */
    --fs-numero:  2.25rem;
    --fs-titulo-artigo: 2.75rem;
    --fs-titulo-longo: 2.125rem;
    --fs-dif-n:   4.5rem;
    --seta-secao: 4rem;
    --seta-hero:  7rem;
    --corte:      3rem;
    --tile-h:     20rem;
    --mega-thumb: 7.5rem;
    --thumb-galeria: 4.5rem;
    --fs-h3:      1.25rem;    /* 20 */
    --fs-lead:    1.1875rem;  /* 19 */
    --fs-corpo:   1rem;       /* 16 */
    --fs-pequeno: 0.875rem;   /* 14 */
    --fs-estat:   3rem;       /* 48 */
    --fs-passo:   3rem;
    --gutter:     var(--gutter-desk);
    --secao-py:   var(--e-24);
    --hero-py:    var(--e-24);
    --hero-min:   var(--hero-min-desk);
    --logo-h:     2rem;
    --ceo-foto:   20rem;      /* = 320 px, tamanho do original */
    --institucional-logo-h: 1.5rem;
  }
}