/* ==========================================================================
   base.css — reset, tokens, tipografia e layout
   Ponto Certo Brindes · implementa specs/design.md §2 §3 §4 §5
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes locais (specs/site.md §10 — nada de CDN)
   Manual de marca v2 (06/10/2026): Rubik nos titulos, DM Sans no texto e
   Fraunces Italico so em destaque curto. Licenca OFL em assets/fontes/licencas/.
   Rubik e DM Sans sao variaveis; Fraunces e uma instancia fixa (italico 500,
   opsz 72), valida a partir de ~22px.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Rubik';
  src: url('../fontes/rubik-latin-wght400-700.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fontes/dm-sans-latin-opsz-wght400-600.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fontes/fraunces-italic-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens — specs/design.md §2 §4 §5
   -------------------------------------------------------------------------- */

:root {
  /* Azul marinho — primaria */
  --azul-900: #051426;
  --azul-800: #071B33;
  --azul-700: #09213F;  /* cor da marca (navy v2) */
  --azul-600: #273C56;
  --azul-500: #46586F;
  --azul-200: #CCDBEE;
  --azul-100: #E1EAF5;
  --azul-50:  #F2F6FB;

  /* Amarelo — acento. Nunca como texto sobre fundo claro (design.md §2.2) */
  --amarelo-700: #725907;  /* amarelo como texto em fundo claro (6,67:1) */
  --amarelo-600: #E0AD0E;
  --amarelo-500: #FEC510;  /* acento da marca (amarelo v2) */
  --amarelo-200: #FEDF7C;
  --amarelo-100: #FFF6DB;

  /* Novos no manual v2 (06/10/2026). Coral: acento raro, nunca disputa com o
     amarelo; texto coral so no tom 700. Creme e azul-claro: fundos de apoio. */
  --coral-500:  #FE7D5F;
  --coral-700:  #8C4534;
  --creme-300:  #F3E7D2;
  --creme-400:  #D7CFC0;
  --azul-claro: #AAC3E2;

  /* Neutros */
  --branco:     #FFFFFF;
  --neutro-100: #FAF6EE;  /* creme v2 */
  --neutro-200: #E6E9EC;
  --neutro-300: #D3D7DC;
  --neutro-500: #6B7A8C;  /* so texto grande: 4,39:1 sobre branco */
  --neutro-700: #46586F;
  --neutro-900: #09213F;

  /* Funcionais — verde SO no WhatsApp (design.md §2.4) */
  --whatsapp: #25D366;
  --sucesso:  #127A3D;
  --erro:     #C42121;

  /* Tipografia */
  --fonte-titulo: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo:  'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --fonte-destaque: 'Fraunces', Georgia, serif;  /* italico 500, so destaque curto >= 22px */

  /* Escala fluida entre 320px e 1200px — design.md §3.1 */
  --t-display:      clamp(2.25rem,   1.7045rem + 2.7273vw, 3.75rem);
  --t-h1:           clamp(1.875rem,  1.5114rem + 1.8182vw, 2.875rem);
  --t-h2:           clamp(1.625rem,  1.3977rem + 1.1364vw, 2.25rem);
  --t-h3:           clamp(1.3125rem, 1.1989rem + 0.5682vw, 1.625rem);
  --t-h4:           clamp(1.125rem,  1.0795rem + 0.2273vw, 1.25rem);
  --t-sobretitulo:  clamp(0.75rem,   0.7273rem + 0.1136vw, 0.8125rem);
  --t-corpo-grande: clamp(1.0625rem, 1.017rem  + 0.2273vw, 1.1875rem);
  --t-corpo:        clamp(1rem,      0.9773rem + 0.1136vw, 1.0625rem);
  --t-pequeno:      clamp(0.875rem,  0.8523rem + 0.1136vw, 0.9375rem);
  --t-legenda:      0.8125rem;
  --t-botao:        1rem;

  /* Espacamento — base 4px (design.md §4) */
  --e-1:  0.25rem;  /* 4  */
  --e-2:  0.5rem;   /* 8  */
  --e-3:  0.75rem;  /* 12 */
  --e-4:  1rem;     /* 16 */
  --e-6:  1.5rem;   /* 24 */
  --e-8:  2rem;     /* 32 */
  --e-10: 2.5rem;   /* 40 */
  --e-14: 3.5rem;   /* 56 */
  --e-18: 4.5rem;   /* 72 */
  --e-24: 6rem;     /* 96 */
  --e-32: 8rem;     /* 128 */

  /* Ritmo vertical */
  /* design.md secao 4 fixa 96px no desktop e 56px no mobile. Reduzido em
     10/09/2026 a seu pedido para 72 / 48, que continuam na escala de 4px da
     mesma secao (72 e o valor de "entre secoes irmas"). Sao 10 secoes, entao
     a Home fica ~500px mais curta sem encostar nos blocos de conteudo. */
  --secao-y:        clamp(3rem, 2.4545rem + 2.7273vw, 4.5rem);
  --secao-titulo-y: clamp(2rem,   1.7273rem + 1.3636vw, 3rem);

  /* Conteineres (design.md §4) */
  --container:         1200px;
  --container-estreito: 760px;
  --container-largo:   1360px;
  --container-pad:     clamp(1.25rem, 1.1364rem + 0.5682vw, 1.5rem);

  /* Header */
  --header-h:        5rem;    /* 80px desktop */
  --header-h-mobile: 4rem;    /* 64px mobile  */

  /* Raios (design.md §5) */
  --raio-sm:   8px;
  --raio-md:   12px;
  --raio-lg:   18px;
  --raio-xl:   28px;
  --raio-pill: 999px;

  /* Sombras — sempre em azul, nunca preto puro (design.md §5) */
  --sombra-sm:   0 1px 2px rgba(9, 33, 63, .06);
  --sombra-md:   0 6px 20px rgba(9, 33, 63, .08);
  --sombra-lg:   0 16px 40px rgba(9, 33, 63, .12);
  --sombra-foco: 0 0 0 2px #FFFFFF, 0 0 0 5px #09213F;  /* anel duplo: funciona em fundo claro e escuro */

  /* Movimento (design.md §9) */
  --mov-rapido: 180ms ease-out;
  --mov-medio:  200ms ease-out;
  --mov-lento:  260ms ease-out;

  /* Camada de contraste obrigatoria sobre foto (design.md §8) */
  --scrim-foto: linear-gradient(90deg, rgba(9, 33, 63, .92), rgba(9, 33, 63, .28));
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--e-4));
}

body {
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  color: var(--neutro-700);
  background-color: var(--branco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

/* Links: navy, com sublinhado so em texto corrido (manual v2, cap. 09) */
a { color: var(--azul-700); text-decoration: none; }

a:hover { color: var(--azul-800); }

p a,
.acordeao__painel a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Foco visivel em anel duplo: 2px branco por dentro e 3px navy por fora, para
   funcionar em fundo claro e escuro (specs/site.md §12). O contorno transparente
   aparece no modo de alto contraste do Windows. */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--sombra-foco);
  border-radius: var(--raio-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   4. Tipografia — design.md §3
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulo);
  color: var(--neutro-900);
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h1, .h1 {
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h2, .h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

h4, .h4 {
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.3;
}

/* Sobretitulo + H2 e o par estrutural do site (design.md §3.2) */
.sobretitulo {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: var(--t-sobretitulo);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-500);
  margin-bottom: var(--e-3);
}

.em-azul .sobretitulo,
.secao--azul .sobretitulo,
.secao--azul-escuro .sobretitulo { color: var(--amarelo-500); }

.corpo-grande { font-size: var(--t-corpo-grande); line-height: 1.6; }
.pequeno      { font-size: var(--t-pequeno);      line-height: 1.5; }

.legenda {
  font-size: var(--t-legenda);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--neutro-700);
}

/* Sobre fundo escuro a legenda usa o azul claro (o cinza azulado fica sem contraste) */
.rodape .legenda,
.em-azul .legenda,
.secao--azul .legenda,
.secao--azul-escuro .legenda { color: var(--azul-200); }

/* Grifo amarelo — so sobre fundo azul escuro (design.md §2.2) */
.grifo { color: var(--amarelo-500); }

/* Marcacao visivel de dado pendente (CLAUDE.md — nada de placeholder mentiroso) */
.a-definir {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px dashed var(--erro);
  border-radius: var(--raio-sm);
  font-family: var(--fonte-corpo);
  font-size: 0.8em;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--erro);
  background-color: #FFF5F5;
}

.em-azul .a-definir {
  color: var(--amarelo-200);
  border-color: var(--amarelo-200);
  background-color: rgba(255, 232, 148, .12);
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--estreito { max-width: var(--container-estreito); }
.container--largo    { max-width: var(--container-largo); }

.secao { padding-block: var(--secao-y); }

/* Seccoes vizinhas nunca compartilham fundo (design.md §4) */
.secao--clara     { background-color: var(--branco); }
.secao--alternada { background-color: var(--neutro-100); }
.secao--azul-claro { background-color: var(--azul-50); }

.secao--azul {
  background-color: var(--azul-800);
  color: var(--azul-200);
}

.secao--azul h1, .secao--azul h2, .secao--azul h3, .secao--azul h4,
.secao--azul-escuro h1, .secao--azul-escuro h2,
.secao--azul-escuro h3, .secao--azul-escuro h4 {
  color: var(--branco);
}

.secao--azul-escuro {
  background-color: var(--azul-900);
  color: var(--azul-200);
}

.secao__cabecalho { margin-bottom: var(--secao-titulo-y); }

.secao__cabecalho p {
  margin-top: var(--e-4);
  max-width: 40rem; /* ~68 caracteres (design.md §3.2) */
  font-size: var(--t-corpo-grande);
}

.secao__cabecalho--centro {
  text-align: center;
  margin-inline: auto;
  max-width: 46rem;
}

.secao__cabecalho--centro p { margin-inline: auto; }

/* CTA centralizada no fim de uma secao. site.md secao 8 pede que toda secao de
   conteudo termine com um caminho para orcamento; nas secoes de cabecalho
   centralizado nao havia onde encaixar esse botao. */
.secao__acao {
  display: flex;
  justify-content: center;
  margin-top: var(--secao-titulo-y);
}

/* Cabecalho de secao com link a direita, no desktop */
.secao__cabecalho--linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-6);
}

.grade { display: grid; gap: var(--e-6); }

@media (max-width: 599px) {
  .grade { gap: var(--e-4); }
}

.pilha { display: flex; flex-direction: column; gap: var(--e-4); }

.linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
}

/* Pular para o conteudo — primeiro item focavel (specs/site.md §12) */
.pular-conteudo {
  position: absolute;
  left: var(--e-4);
  top: var(--e-4);
  z-index: 200;
  padding: var(--e-3) var(--e-6);
  border-radius: var(--raio-md);
  background-color: var(--azul-700);
  color: var(--branco);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--mov-rapido);
}

.pular-conteudo:focus {
  transform: translateY(0);
  color: var(--branco);
}

.so-leitor-de-tela {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Entrada de secao — design.md §9
   -------------------------------------------------------------------------- */

/* O estado oculto so vale quando o JS esta vivo. Sem a classe .js no <html>
   o conteudo fica visivel — nunca uma pagina em branco se o script falhar. */
.js .revelar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.js .revelar.visivel { opacity: 1; transform: none; }

/* Escalonamento em grade: 60ms por item, maximo 6 (design.md §9) */
.revelar--1 { transition-delay:   0ms; }
.revelar--2 { transition-delay:  60ms; }
.revelar--3 { transition-delay: 120ms; }
.revelar--4 { transition-delay: 180ms; }
.revelar--5 { transition-delay: 240ms; }
.revelar--6 { transition-delay: 300ms; }

/* --------------------------------------------------------------------------
   7. Movimento reduzido — design.md §9, specs/site.md §12
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js .revelar { opacity: 1; transform: none; }
}