/* ============================================================
   SITE — Colégio Terceira Dimensão
   Ordem: reset → base → layout → componentes → páginas → utils
   Medidas-chave anotadas em comentários "redline:" conforme
   @specs/plano.md
   ============================================================ */

/* ============================================================
   1. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  color: var(--gray-800);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;              /* redline: §7 quebra */
}

img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-navy); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Foco visível — redline: outline 3px + offset 2px */
:focus-visible {
  outline: 3px solid var(--color-red);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-navy :focus-visible,
.site-footer :focus-visible { outline-color: var(--color-white); }

::selection { background: var(--color-navy); color: #fff; }

/* ============================================================
   2. BASE TIPOGRÁFICA — [PLANO §3]
   ============================================================ */
.h1, h1 {
  font-size: var(--text-h1-mobile);
  line-height: var(--text-h1-lh);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.h2, h2 {
  font-size: var(--text-h2-mobile);
  line-height: var(--text-h2-lh);
  font-weight: 800;
  letter-spacing: -0.005em;
}
.h3, h3 {
  font-size: var(--text-h3-mobile);
  line-height: var(--text-h3-lh);
  font-weight: 700;
}
@media (min-width: 720px){
  .h1, h1 { font-size: var(--text-h1-desktop); }
  .h2, h2 { font-size: var(--text-h2-desktop); }
  .h3, h3 { font-size: var(--text-h3-desktop); }
}

.lead { font-size: 17px; line-height: 1.6; color: var(--gray-600); max-width: 60ch; }
.prose p + p { margin-top: var(--space-4); }
.prose { max-width: 68ch; }                /* redline: §7 medida de leitura */

@media (max-width: 599px){
  .prose p, .lead { hyphens: auto; }       /* redline: hifenização só no mobile */
}

/* Eyebrow — redline: Sora 700 · 12px · +0.06em · uppercase */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-red-ink);             /* [PLANO §5] 4.84:1 */
  margin: 0 0 var(--space-4);
}
.on-navy .eyebrow { color: var(--on-navy-strong); } /* [PLANO §8.2] era sky-blue */

.stat-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);                /* redline: útil = 1152px */
}
.container--reading { max-width: var(--content-max); }

.section { position: relative; padding: var(--section-y) 0; }  /* redline: 48 / 64 / 96 */
.section--navy {
  background: var(--color-navy);
  color: var(--on-navy-soft);
}
.section--tint   { background: var(--color-white); }
.section--tinted { background: var(--surface-tint); }
/* Seções com grafismo precisam conter as formas que sangram para fora */
.section--deco { overflow: hidden; }

/* ------------------------------------------------------------
   GRAFISMOS — círculos e pontos soltos, só em navy e vermelho.
   Atmosfera vinda da referência; desenho e posições originais.
   redline: contorno 1.5px · opacidade 0.10–0.22 · nunca sobre texto
   ------------------------------------------------------------ */
.deco { position: absolute; pointer-events: none; border-radius: 50%; z-index: 0; }
.deco--ring        { border: 1.5px solid rgba(0, 40, 86, .13); }
.deco--ring-red    { border: 1.5px solid rgba(255, 0, 16, .20); }
.deco--ring-light  { border: 1.5px solid rgba(255, 255, 255, .14); }
.deco--dot-red     { background: var(--color-red); opacity: .85; }
.deco--dot-navy    { background: var(--color-navy); opacity: .85; }

.deco--xl { width: 320px; height: 320px; }
.deco--lg { width: 200px; height: 200px; }
.deco--md { width: 120px; height: 120px; }
.deco--xs { width: 24px;  height: 24px;  }

.deco--tl { top: -60px;    left: -70px;  }
.deco--tr { top: -80px;    right: -90px; }
.deco--bl { bottom: -70px; left: -60px;  }
.deco--br { bottom: -90px; right: -70px; }
/* Ornamentos de margem: ficam na faixa entre a borda da tela e o container */
.deco--ml { top: 34%;      left: 5%;     }
.deco--mr { top: 24%;      right: 5%;    }

/* Abaixo de 1100px o container encosta nas bordas e não há margem
   suficiente para o ornamento — some para não competir com o texto. */
@media (max-width: 1099px){
  .deco--ml, .deco--mr { display: none; }
}
/* O conteúdo sempre por cima do grafismo */
.section > .container { position: relative; z-index: 1; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-navy); color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ============================================================
   4. HEADER — [PLANO §8.1]
   redline: altura 64/72 · sticky · sombra após 8px de rolagem
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  transition: box-shadow var(--dur-fast) ease;
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  height: var(--header-h);
}
.site-header__logo img { height: 32px; width: auto; }   /* redline: 32 mobile / 36 desktop */
@media (min-width: 900px){ .site-header__logo img { height: 36px; } }

.site-header__nav { display: none; }
@media (min-width: 720px){
  .site-header__nav {
    display: flex; align-items: center; gap: var(--space-6); /* redline: gap 32 */
    font-family: var(--font-display); font-weight: 600; font-size: 14px;
  }
  .site-header__nav a { position: relative; color: var(--gray-800); padding: 6px 0; }
  .site-header__nav a:hover { color: var(--color-navy); }
  .site-header__nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 3px; background: var(--color-red);            /* redline: filete 3px */
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-fast) ease;
  }
  .site-header__nav a:hover::after,
  .site-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
}
/* Especificidade dupla de propósito: .btn é declarado depois e reativaria
   o display se esta regra tivesse a mesma especificidade. */
.site-header__cta.btn { display: none; }
@media (min-width: 900px){ .site-header__cta.btn { display: inline-flex; } }

/* Botão hambúrguer — redline: alvo 44×44 */
.nav-toggle {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; color: var(--color-navy);
}
@media (min-width: 720px){ .nav-toggle { display: none; } }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-menu) var(--ease-menu), opacity var(--dur-fast) ease;
}
.nav-toggle span::before { transform: translateY(-7px); }
.nav-toggle span::after  { transform: translateY(5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

/* Painel mobile */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: #fff;
  padding: var(--space-6) var(--gutter) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-2);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-menu) var(--ease-menu),
              transform var(--dur-menu) var(--ease-menu),
              visibility var(--dur-menu);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: none; opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-950);
}
.mobile-nav a[aria-current="page"] { color: var(--color-navy); border-bottom-color: var(--color-red); }
/* O seletor .mobile-nav a é mais específico que .btn--primary — o botão
   precisa reafirmar cor e borda para não herdar o estilo de item de menu. */
.mobile-nav a.btn {
  margin-top: var(--space-5);
  width: 100%;
  color: #fff;
  border: 2px solid var(--color-navy);
  padding: 14px 26px;
}
body.nav-open { overflow: hidden; }
@media (min-width: 720px){ .mobile-nav { display: none; } }

/* ============================================================
   5. BOTÕES — [PLANO §8.3]
   redline: min-height 48 · padding 14/26 · radius 8 · Sora 700 15px
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px;                                  /* [PLANO §8.3] alvo de toque */
  padding: 14px 26px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-button-size); line-height: 1; letter-spacing: 0.01em;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
              background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary   { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.btn--primary:hover { box-shadow: var(--shadow-md); }

.btn--secondary { background: #fff; color: var(--color-navy); border-color: var(--color-navy); }
.btn--secondary:hover { background: var(--gray-100); }

.btn--accent    { background: var(--color-red-ink); color: #fff; border-color: var(--color-red-ink); }
.btn--accent:hover { box-shadow: var(--shadow-md); }

.on-navy .btn--secondary,
.cta-banner .btn--secondary {
  background: transparent; color: #fff; border-color: #fff;
}
.on-navy .btn--secondary:hover,
.cta-banner .btn--secondary:hover { background: rgba(255,255,255,.12); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (max-width: 479px){
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }                     /* redline: empilha < 480 */
}

/* ============================================================
   6. BADGE
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  padding: 5px 12px; border-radius: 999px;
}
.badge--navy    { background: var(--color-navy); color: #fff; }
.badge--red     { background: var(--color-red); color: #fff; }
.badge--outline { background: transparent; border: 1.5px solid var(--color-navy); color: var(--color-navy); }

/* ============================================================
   7. SECTION-HEADER — [PLANO §8.4]
   redline: filete 4px vermelho · padding-left 16 (12 mobile) · mb 32
   ============================================================ */
.section-header {
  border-left: 4px solid var(--color-red);
  padding-left: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 600px){
  .section-header { padding-left: var(--space-4); margin-bottom: var(--space-6); }
}
.section-header .eyebrow { margin-bottom: var(--space-2); }
.section-header__lead { margin-top: var(--space-3); max-width: 60ch; font-size: 17px; color: var(--gray-600); }
.section--navy .section-header__title { color: #fff; }
.section--navy .section-header__lead  { color: var(--on-navy-soft); }
.section--navy .section-header .eyebrow { color: #fff; }

/* Régua curta opcional — redline: 48×3px */
.rule-red { width: 48px; height: 3px; background: var(--color-red); border: 0; margin: var(--space-4) 0 0; }

/* ============================================================
   8. HERO — [PLANO §8.2]
   redline: grid 1.1fr/0.9fr · gap 64 → texto 598 / mídia 490
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: #fff;
  padding: var(--space-8) 0 var(--space-7);
}
@media (min-width: 900px){ .hero { padding: var(--space-9) 0 var(--space-8); } }

/* Formas decorativas — atmosfera vinda da referência, desenho original */
.hero::before, .hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(255,255,255,.14);
}
.hero::before { width: 320px; height: 320px; right: -120px; top: -110px; }
.hero::after  { width: 180px; height: 180px; right: 120px; bottom: -90px; border-color: rgba(255,0,16,.35); }

.hero__grid { position: relative; display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px){
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); }
}
.hero__title { color: #fff; max-width: 620px; }       /* redline: §7 medida do H1 */
.hero__title em { color: var(--color-red); font-style: normal; }
.hero__lead { margin-top: var(--space-5); max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--on-navy-soft); }
@media (min-width: 720px){ .hero__lead { font-size: 18px; } }
.hero__actions { margin-top: var(--space-6); }

.hero__media { order: -1; }
@media (min-width: 900px){ .hero__media { order: 0; } }

.hero--compact { padding: var(--space-7) 0; }
.hero--compact .hero__grid { grid-template-columns: 1fr; }
.hero--compact .hero__lead { max-width: 60ch; }
/* redline: H1 de página interna é um degrau menor que o da home */
.hero--compact .hero__title { font-size: clamp(26px, 7vw, 34px); max-width: 18ch; }
@media (min-width: 720px){
  .hero--compact .hero__title { font-size: clamp(34px, 4.2vw, 52px); max-width: 20ch; }
}

/* ------------------------------------------------------------
   HERO COM BANNER — home
   O banner já traz navy à esquerda e a aluna à direita, então o
   texto ocupa a faixa escura da própria imagem. Sem coluna de
   mídia ao lado. [22/08/2026]
   redline: imagem 1920×830 · texto máx. 560px · altura 43.23vw
   ------------------------------------------------------------ */
.hero.hero--banner {
  padding: 0;
  /* mesma cor da borda esquerda do banner, para a emenda sumir */
  background: linear-gradient(180deg, #001537 0%, #000C2A 100%);
}
/* O banner já tem o próprio grafismo — os anéis do hero padrão sairiam sobrepostos */
.hero--banner::before, .hero--banner::after { display: none; }

.hero__bg { position: relative; line-height: 0; }
.hero__bg img { width: 100%; height: auto; display: block; }
/* Esfumado que funde o pé da imagem com o fundo do bloco de texto */
.hero__bg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 36%;
  background: linear-gradient(180deg, rgba(0, 21, 55, 0) 0%, rgba(0, 21, 55, .72) 46%, #001537 92%);
  pointer-events: none;
}
.hero--banner .hero__content {
  position: relative; z-index: 1;
  padding: var(--space-4) 0 var(--space-8);
}

@media (min-width: 900px){
  .hero--banner .hero__bg { position: absolute; inset: 0; }
  .hero--banner .hero__bg picture { display: block; width: 100%; height: 100%; }
  .hero--banner .hero__bg img {
    height: 100%;
    object-fit: cover;
    object-position: 68% 50%;   /* redline: mantém a aluna enquadrada ao estreitar */
  }
  /* Véu horizontal: escurece só a metade do texto, some antes da aluna */
  .hero--banner .hero__bg::after {
    inset: 0; height: auto;
    background: linear-gradient(90deg,
      rgba(0, 18, 49, .94) 0%,
      rgba(0, 18, 49, .80) 30%,
      rgba(0, 18, 49, .25) 52%,
      rgba(0, 18, 49, 0)   66%);
  }
  .hero--banner .hero__content {
    display: flex; flex-direction: column; justify-content: center;
    min-height: clamp(520px, 43.23vw, 830px);   /* 830 ÷ 1920 = 43.23% */
    max-width: 560px;
    padding: var(--space-8) 0;
  }
}

/* Trilha de migalhas */
.breadcrumb { font-size: 13.5px; color: var(--on-navy-soft); margin-bottom: var(--space-4); }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb span[aria-hidden] { opacity: .6; margin: 0 6px; }

/* ============================================================
   9. MÍDIA / PLACEHOLDER DE FOTO — [PLANO §6]
   Enquanto não há foto real, o slot mostra a proporção e a
   dimensão exigida. Trocar por <picture> ao receber o material.
   ============================================================ */
.media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #123a68 0%, var(--color-navy) 60%, var(--color-navy-deep) 100%);
  box-shadow: var(--shadow-md);
}
/* Contorno tracejado só enquanto o slot está sem foto real */
.media:has(.media__note)::after {
  content: ""; position: absolute; inset: 10px;
  border: 1.5px dashed rgba(255,255,255,.28);
  border-radius: var(--radius-md);
  pointer-events: none;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--1x1  { aspect-ratio: 1 / 1; }
@media (max-width: 899px){
  .hero .media--4x3 { aspect-ratio: 16 / 9; }         /* redline: art direction §6.2 */
}

.media--flat { border-radius: 0; box-shadow: none; }

/* Slot de foto dentro do thumb de card: preenche sem criar segunda caixa */
.card__thumb > .media {
  position: absolute; inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

.media__note {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: var(--space-4);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.media__note small {
  font-family: var(--font-body); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.6);
}

/* ============================================================
   10. CARD — [PLANO §8.5]
   redline: borda 1px gray-200 · radius 14 · padding 24 · thumb 3:2
   ============================================================ */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 600px){ .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (min-width: 900px){ .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px){ .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--dur-card) ease, transform var(--dur-card) ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card:focus-within { box-shadow: var(--shadow-md); }

.card__thumb {
  aspect-ratio: 3 / 2;                                /* [PLANO §8.5] era 140px fixo */
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-deep));
  position: relative;
}
.card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card__tag {
  align-self: flex-start;
  background: var(--gray-100); color: var(--gray-600);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  margin-bottom: var(--space-3);
}
.card__title {
  font-size: 16px; line-height: 1.35; font-weight: 700;
  margin-bottom: var(--space-2);
  min-height: calc(2 * 1.35 * 16px);                  /* redline: 2 linhas reservadas = 43px */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__desc {
  font-size: var(--text-small-size); line-height: 1.5; color: var(--gray-600);
  min-height: calc(3 * 1.5 * 13.5px);                 /* redline: 3 linhas reservadas ≈ 61px */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Card inteiro clicável mantendo texto selecionável */
.card__link::after { content: ""; position: absolute; inset: 0; }
.card__more {
  margin-top: var(--space-4);
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--color-navy);
}
.card__more::after { content: " →"; }

/* Card sem foto (diferenciais) */
.card--plain .card__body { padding: var(--space-6) var(--space-5); }
.card--plain .card__title { min-height: 0; -webkit-line-clamp: 3; }
.card--plain .card__desc  { min-height: 0; }
.card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--color-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.card__icon svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------
   CARD DE FOTO — variante usada na faixa escura de segmentos.
   Foto ocupa o card inteiro e o rótulo fica sobre ela, como na
   referência; estilo e proporções originais.
   redline: 3:2 · radius 14 · overlay navy 0→72% · rótulo 24px do pé
   ------------------------------------------------------------ */
.card--photo {
  position: relative;
  aspect-ratio: 4 / 3;   /* redline: 368×276 no desktop — casa com a foto original 480×360 */
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, #123a68 0%, var(--color-navy) 60%, var(--color-navy-deep) 100%);
  display: block;
}
.card--photo picture { display: block; width: 100%; height: 100%; }
.card--photo img { width: 100%; height: 100%; object-fit: cover; }
.card--photo::after {
  content: ""; position: absolute; inset: 0;
  /* véu mais alto que na versão retrato: o card é mais baixo e a legenda
     precisa do mesmo contraste sobre a foto */
  background: linear-gradient(180deg, rgba(0,26,61,0) 18%, rgba(0,26,61,.55) 52%, rgba(0,26,61,.92) 100%);
}
.card--photo .card__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--space-5);
}
.card--photo .card__tag {
  background: var(--color-red); color: #fff;   /* redline: badge vermelho 11px */
  margin-bottom: var(--space-2);
}
.card--photo .card__title {
  color: #fff; min-height: 0; -webkit-line-clamp: 2;
  font-size: 18px; line-height: 1.3;
}
.card--photo .card__more { color: #fff; margin-top: var(--space-2); display: inline-block; }
.card--photo:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card--photo .media__note { z-index: 1; padding-bottom: 104px; }

/* ------------------------------------------------------------
   FAIXA DE CONQUISTAS — números grandes em cartões brancos
   redline: cartão branco · radius 22 · número Sora 800 clamp(36→56)
   ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 720px){ .stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.stat {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.stat__num {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 5vw, 56px); line-height: 1;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}
.stat__num.is-placeholder { font-size: 16px; line-height: 1.4; }
.stat__label { font-size: var(--text-small-size); color: var(--gray-600); line-height: 1.5; }
.stat__label strong { color: var(--gray-950); font-weight: 700; }

/* ------------------------------------------------------------
   CERTIFICAÇÕES E PARCERIAS — faixa de logos
   redline: slot 160×72 · 6 por linha no desktop · 2 no celular
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   GALERIA DE AMBIENTES — página Estrutura
   Tiles de foto com rótulo sobre a imagem, em vez de card com
   miniatura + corpo de texto. A coluna do meio desce 32px no
   desktop, para o conjunto não virar uma grade rígida.
   As fotos originais têm 370px — a grade de 3 colunas entrega
   exatamente 368px por tile, então não há ampliação. [28/08/2026]
   redline: tile 3:2 · radius 14 · véu navy 0→92% · numeral 12px
   ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 600px){ .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (min-width: 900px){
  .gallery { grid-template-columns: repeat(3, 1fr); margin-bottom: var(--space-6); }
  /* deslocamento da coluna central — quebra a rigidez da grade */
  .gallery__item:nth-child(3n + 2) { transform: translateY(var(--space-6)); }
}

.gallery__item { display: flex; flex-direction: column; }

/* moldura da foto — o véu escuro fica só na faixa do rótulo,
   para a imagem não ficar encoberta */
.gallery__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-navy);
  box-shadow: var(--shadow-sm);
}
.gallery__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.gallery__item:hover .gallery__frame img { transform: scale(1.04); }
.gallery__frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,26,61,0) 58%, rgba(0,26,61,.86) 100%);
  pointer-events: none;
}
.gallery__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--space-4);
}
.gallery__num {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: .06em;
  /* etiqueta em vez de texto solto: sobre foto, cor sozinha não garante
     contraste — branco sobre --color-red-ink dá 4.84:1 em qualquer imagem */
  background: var(--color-red-ink); color: #fff;
  padding: 3px 8px; border-radius: 999px;
  margin-bottom: var(--space-2); font-variant-numeric: tabular-nums;
}
.gallery__name { font-size: 17px; line-height: 1.25; color: #fff; }
.gallery__text {
  margin-top: var(--space-3);
  font-size: var(--text-small-size); line-height: 1.5; color: var(--gray-600);
}

/* ------------------------------------------------------------
   REDES SOCIAIS — ícones circulares
   Cada link tem aria-label: ícone sozinho não tem nome acessível.
   redline: alvo 44×44 (mínimo de toque) · ícone 20px ·
            contorno 1.5px · hover inverte fundo e ícone
   ------------------------------------------------------------ */
.social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1.5px solid var(--gray-200);
  color: var(--color-navy);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.social a:hover {
  background: var(--color-navy); border-color: var(--color-navy);
  color: #fff; transform: translateY(-2px);
}
.social svg { width: 20px; height: 20px; }

/* Sobre o rodapé escuro — gap menor para os 4 ícones caberem numa linha */
.social--escura { gap: var(--space-2); }
.social--escura a {
  border-color: rgba(255, 255, 255, .22);
  color: var(--on-dark-soft);
}
.social--escura a:hover {
  background: #fff; border-color: #fff; color: var(--gray-950);
}

/* O WhatsApp é o último da fila e ganha a cor da própria marca no hover */
.social li:last-child a:hover {
  background: var(--color-whatsapp); border-color: var(--color-whatsapp); color: #fff;
}

/* Dentro da lista de contato, o dd não deve herdar o espaçamento de texto */
.contact-list dd .social { margin-top: var(--space-2); }

/* ------------------------------------------------------------
   CHIPS — ambientes sem foto, listados em linha
   ------------------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--color-navy);
}
.chips li::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--color-red); flex: none;
}

/* ------------------------------------------------------------
   FAIXA DE CREDIBILIDADE — parceiros
   Não é uma "seção" com cabeçalho e grade: é uma tira fina, com
   título pequeno à esquerda e os logos alinhados à direita.
   Existe para quebrar a repetição de "section-header + cards"
   na home. [26/08/2026]
   redline: padding 40/56 · filetes 1px em cima e embaixo ·
            logo máx. 40px de altura · divisórias entre logos
   ------------------------------------------------------------ */
.strip {
  background: #fff;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: var(--space-7) 0;
}
@media (min-width: 900px){ .strip { padding: var(--space-8) 0; } }

.trust { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px){
  .trust { grid-template-columns: minmax(230px, 300px) 1fr; gap: var(--space-8); }
}
.trust__rule { width: 32px; height: 3px; background: var(--color-red); border: 0; margin: 0 0 var(--space-4); }
.trust__title { font-size: 20px; line-height: 1.25; font-weight: 700; margin-bottom: var(--space-2); }
.trust__text  { font-size: var(--text-small-size); line-height: 1.5; color: var(--gray-600); max-width: 34ch; }

.trust__logos {
  list-style: none;
  display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@media (min-width: 600px){
  .trust__logos { grid-template-columns: repeat(3, 1fr); gap: 0; }
  /* divisória fina entre os logos, no lugar da borda de card */
  .trust__logos li + li { border-left: 1px solid var(--gray-200); }
}
.trust__logos li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-3) var(--space-5); text-align: center;
}
.trust__logos img { max-height: 40px; width: auto; object-fit: contain; }
.trust__role {
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gray-600);
}

/* ------------------------------------------------------------
   LINHAS DE ACESSO — lista com divisórias, ao lado do título
   Segunda quebra do padrão: cabeçalho na coluna da esquerda e
   os itens como linhas, não como cards.
   redline: linha com 20px de padding vertical · seta 20px ·
            hairline gray-200 entre as linhas
   ------------------------------------------------------------ */
.linkrows { display: grid; gap: var(--space-6); }
@media (min-width: 900px){
  .linkrows { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: start; }
}
.linkrows__list { list-style: none; border-top: 1px solid var(--gray-200); }
.linkrows__list li { border-bottom: 1px solid var(--gray-200); }
.linkrows__list a {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2) var(--space-5) 0;
  min-height: 64px;
  transition: background var(--dur-fast) ease, padding-left var(--dur-fast) ease;
}
.linkrows__list a:hover {
  background: var(--gray-100);
  padding-left: var(--space-4);
}
.linkrows__label {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--color-navy); margin-bottom: 4px;
}
.linkrows__desc { display: block; font-size: var(--text-small-size); line-height: 1.5; color: var(--gray-600); }
.linkrows__arrow {
  width: 36px; height: 36px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1.5px solid var(--gray-200);
  color: var(--color-navy);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.linkrows__list a:hover .linkrows__arrow {
  border-color: var(--color-red); background: var(--color-red); color: #fff;
  transform: translateX(2px);
}
.linkrows__arrow svg { width: 16px; height: 16px; }


/* ------------------------------------------------------------
   MARCOS — mini-linha do tempo horizontal (home, "Quem somos")
   Comunica experiência, evolução e proposta atual em 3 blocos
   curtos, em vez de dois parágrafos corridos. [26/08/2026]
   redline: ano Sora 800 clamp(30→44) navy · filete 32×3 vermelho
   ------------------------------------------------------------ */
.milestones { list-style: none; display: grid; gap: var(--space-5); }
@media (min-width: 720px){
  .milestones { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}
.milestone { position: relative; }
.milestone__year {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 4vw, 44px); line-height: 1;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
.milestone__rule {
  width: 32px; height: 3px; border: 0;
  background: var(--color-red);          /* redline: indicador vermelho */
  margin: var(--space-3) 0;
}
.milestone__text {
  font-size: 15px; line-height: 1.5; color: var(--gray-800);
  max-width: 28ch;
}
.milestone__text strong { color: var(--color-navy); font-weight: 700; }

/* ------------------------------------------------------------
   BLOCO DE PROPOSTA — fecha a seção "Quem somos"
   ------------------------------------------------------------ */
.pitch {
  background: var(--surface-tint);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 720px){
  .pitch { padding: var(--space-7); display: grid; grid-template-columns: 1fr auto; gap: var(--space-6); align-items: center; }
}
.pitch__title { margin-bottom: var(--space-3); }
.pitch__text { font-size: 16px; line-height: 1.6; color: var(--gray-800); max-width: 60ch; }
.pitch .btn { margin-top: var(--space-5); }
@media (min-width: 720px){ .pitch .btn { margin-top: 0; } }

/* ------------------------------------------------------------
   LINHA DO TEMPO — página Sobre Nós
   Celular: linha à esquerda, tudo do mesmo lado.
   Desktop: linha ao centro, conteúdo alternando os lados.
   redline: linha 2px · marcador 24px aro vermelho 3px · ano navy
   ------------------------------------------------------------ */
.timeline { list-style: none; position: relative; display: grid; gap: var(--space-7); }
.timeline::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 11px; width: 2px;
  background: linear-gradient(180deg, var(--color-navy) 0%, rgba(0, 40, 86, .16) 100%);
}
.timeline__item { position: relative; padding-left: 44px; }
.timeline__marker { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.timeline__dot {
  position: absolute; left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 999px;
  background: #fff; border: 3px solid var(--color-red);
  box-sizing: border-box;
}
.timeline__year {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 5vw, 28px); line-height: 1;
  color: var(--color-navy); font-variant-numeric: tabular-nums;
}
.timeline__title { font-size: 18px; line-height: 1.3; margin-bottom: var(--space-2); }
.timeline__text { font-size: 15.5px; line-height: 1.6; color: var(--gray-600); max-width: 46ch; }
.timeline__media { margin-top: var(--space-4); max-width: 360px; }

@media (min-width: 900px){
  .timeline { gap: var(--space-8); }
  .timeline::before { left: 50%; transform: translateX(-1px); }
  .timeline__item {
    display: grid; grid-template-columns: 1fr 168px 1fr;
    align-items: start; gap: var(--space-5); padding-left: 0;
  }
  .timeline__marker {
    grid-column: 2; grid-row: 1;
    flex-direction: column; gap: var(--space-3); align-items: center;
    /* fundo branco interrompe a linha atrás do ano */
    background: #fff; padding: var(--space-2) 0;
    position: relative; z-index: 1;
  }
  .timeline__dot { position: static; }
  .timeline__card { grid-column: 1; grid-row: 1; text-align: right; }
  .timeline__text, .timeline__media { margin-left: auto; }
  .timeline__item:nth-child(even) .timeline__card { grid-column: 3; text-align: left; }
  .timeline__item:nth-child(even) .timeline__text,
  .timeline__item:nth-child(even) .timeline__media { margin-left: 0; margin-right: auto; }
}

/* ------------------------------------------------------------
   CITAÇÃO EM FAIXA ESCURA — declaração destacada
   ------------------------------------------------------------ */
.statement {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 3.2vw, 30px); line-height: 1.35;
  color: #fff; max-width: 24ch;
}
.statement em { color: var(--color-red); font-style: normal; white-space: nowrap; }

/* ------------------------------------------------------------
   CREED — declaração + três pilares, na faixa navy do Sobre Nós
   A frase sozinha deixava metade da faixa vazia. Agora a citação
   fica à esquerda e os três pontos que ela cita ganham corpo à
   direita. [28/08/2026]
   redline: split 1.05fr/0.95fr · aspas 96px vermelhas ·
            numeral Sora 800 · divisória 1px branca a 14%
   ------------------------------------------------------------ */
.creed { display: grid; gap: var(--space-7); }
@media (min-width: 900px){
  .creed { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: start; }
}
.creed__quote { position: relative; }
.creed__mark {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 96px; line-height: 0.6;
  color: var(--color-red);
  margin-bottom: var(--space-4);
}
.creed__quote .statement { max-width: 26ch; }

.creed__pillars { list-style: none; display: grid; gap: 0; }
.creed__pillars li {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--space-4); align-items: start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.creed__pillars li:first-child { padding-top: 0; }
.creed__pillars li:last-child  { border-bottom: 0; padding-bottom: 0; }
.creed__num {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  line-height: 1.4; color: var(--color-red);
  font-variant-numeric: tabular-nums;
}
.creed__label { font-size: 17px; line-height: 1.3; color: #fff; margin-bottom: 6px; }
.creed__text  { font-size: var(--text-small-size); line-height: 1.6; color: var(--on-navy-soft); max-width: 40ch; }

/* ============================================================
   11. LISTA DE ETAPAS (matrículas) e listas com marcador
   ============================================================ */
.steps { list-style: none; display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 900px){ .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  counter-increment: step;
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  padding: var(--space-5);
}
.steps li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--color-navy); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  margin-bottom: var(--space-4);
}
.steps h3 { font-size: 16px; margin-bottom: var(--space-2); }
.steps p  { font-size: var(--text-small-size); color: var(--gray-600); line-height: 1.5; }

.list-group { display: grid; gap: var(--space-6); }
@media (min-width: 720px){ .list-group { grid-template-columns: repeat(3, 1fr); } }
.list-group h3 {
  font-size: 16px; line-height: 1.3; margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255,255,255,.16);
}
.section--navy .list-group h3 { color: #fff; }

.list-check { list-style: none; display: grid; gap: var(--space-3); }
.list-check li { position: relative; padding-left: 28px; }
.list-check li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 12px; height: 3px; background: var(--color-red); border-radius: 2px;
}
.section--navy .list-check li { color: var(--on-navy-soft); }

/* ============================================================
   12. CTA-BANNER — [PLANO §8.6]
   redline: navy · radius 22 · padding 48/32 · uma vez por página
   ============================================================ */
.cta-banner {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  position: relative; overflow: hidden;
}
@media (min-width: 600px){ .cta-banner { padding: var(--space-7) var(--space-6); } }
.cta-banner::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.12); right: -70px; bottom: -110px; pointer-events: none;
}
.cta-banner__title { color: #fff; position: relative; }
.cta-banner__lead { color: var(--on-navy-soft); max-width: 48ch; margin: var(--space-3) auto 0; position: relative; }
.cta-banner .btn-row { justify-content: center; margin-top: var(--space-6); position: relative; }

/* ============================================================
   13. RODAPÉ — [PLANO §8.7]
   ============================================================ */
.site-footer {
  background: var(--gray-950); color: var(--on-dark-soft);
  /* Sem margem: a última seção já traz o próprio respiro embaixo.
     Somando os dois, sobrava um vão vazio de ~192px antes do rodapé. */
  padding: var(--space-8) 0 var(--space-5);
}
/* A última seção fecha com respiro menor, encostando melhor no rodapé */
main > .section:last-child { padding-bottom: var(--space-6); }
@media (min-width: 900px){
  main > .section:last-child { padding-bottom: var(--space-8); }
}

/* Duas seções seguidas sem cor de fundo própria somavam 192px de vão
   contínuo (96 embaixo + 96 em cima) — sem troca de cor para justificar.
   A de baixo dispensa o respiro do topo. Quando há mudança de fundo
   (navy, branco, tinta), o respiro fica, porque a borda de cor precisa
   de folga. */
.section:not(.section--navy):not(.section--tint):not(.section--tinted)
  + .section:not(.section--navy):not(.section--tint):not(.section--tinted) {
  padding-top: 0;
}
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 600px){ .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.1fr 1fr; } }
.site-footer__logo img { height: 40px; width: auto; margin-bottom: var(--space-4); }
.site-footer__col-title {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: #fff; margin-bottom: var(--space-3);
}
/* Filho direto, de propósito: `.site-footer__col a` pegava também os links
   dentro de componentes aninhados (os ícones de rede, por exemplo) e, por
   vir depois no arquivo, sobrescrevia o display deles. */
.site-footer__col > p, .site-footer__col > a {
  display: block; font-size: var(--text-small-size); color: var(--on-dark-soft);
  margin-bottom: var(--space-2); line-height: 1.6;
}
.site-footer__col > a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: var(--space-6); padding-top: var(--space-5);
  font-size: 12.5px; color: var(--on-dark-mute);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}

/* ============================================================
   14. WHATSAPP FLUTUANTE — [PLANO §8.8]
   redline: 56×56 · offset 24 · z-index 90
   ============================================================ */
.wa-fab {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90;
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--color-whatsapp); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) ease;
}
.wa-fab:hover { transform: translateY(-2px) scale(1.03); }
.wa-fab svg { width: 26px; height: 26px; }
@media (min-width: 900px){
  /* No desktop há margem lateral sobrando: cabe maior e mais afastado */
  .wa-fab { right: var(--space-5); bottom: var(--space-5); width: 56px; height: 56px; }
  .wa-fab svg { width: 28px; height: 28px; }
}
body.nav-open .wa-fab { display: none; }

/* ============================================================
   15. FORMULÁRIO — [PLANO §8.9]
   redline: campo 48px · radius 8 · borda gray-400 (3:1)
   ============================================================ */
.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 600px){ .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--gray-950);
}
.field .req { color: var(--color-red-ink); }
.field input, .field select, .field textarea {
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-body); font-size: 16px; color: var(--gray-950);
  background: #fff;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray-600); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px rgba(0,40,86,.12);
  outline: none;
}
.field .hint { font-size: 12.5px; color: var(--gray-600); }
.field .error {
  display: none; align-items: center; gap: 6px;
  font-size: var(--text-small-size); color: var(--color-red-ink); font-weight: 600;
}
.field .error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 999px; background: var(--color-red-ink); color: #fff;
  font-size: 11px; font-weight: 800; flex: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-red-ink); }
.field.has-error .error { display: flex; }

.field--check { flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.field--check input { min-height: 0; width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--color-navy); }
.field--check label { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small-size); color: var(--gray-600); line-height: 1.5; }
.field--check a { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }

/* Honeypot — precisa existir no DOM e ficar invisível para pessoas.
   display:none seria ignorado por parte dos robôs, por isso é
   tirado da tela em vez de escondido. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form__status { font-size: var(--text-small-size); font-weight: 600; }
.form__status[data-tipo="erro"] {
  display: flex; align-items: flex-start; gap: var(--space-2);
  color: var(--color-red-ink);
  background: rgba(229, 0, 14, .07);
  border-left: 3px solid var(--color-red);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.form-card {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: var(--space-5);
}
@media (min-width: 600px){ .form-card { padding: var(--space-7); } }

/* ------------------------------------------------------------
   PÁGINA LEGAL — política de privacidade
   Texto longo, então a medida de leitura é o que importa: 66ch,
   títulos com respiro generoso e um índice ancorado no topo.
   redline: h2 32px acima / 12px abaixo · lista com marcador vermelho
   ------------------------------------------------------------ */
.legal { max-width: 66ch; }
.legal h2 {
  font-size: clamp(20px, 2.4vw, 24px); line-height: 1.3;
  margin: var(--space-8) 0 var(--space-3);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 17px; line-height: 1.35; margin: var(--space-6) 0 var(--space-2); }
.legal p { font-size: var(--text-body-size); line-height: 1.7; color: var(--gray-800); }
.legal p + p { margin-top: var(--space-4); }
.legal ul { list-style: none; margin-top: var(--space-4); display: grid; gap: var(--space-3); }
.legal ul li { position: relative; padding-left: 24px; line-height: 1.6; }
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 10px; height: 3px; border-radius: 2px; background: var(--color-red);
}
.legal a { color: var(--color-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--color-red-ink); }
.legal strong { color: var(--gray-950); }

.legal__meta {
  font-size: var(--text-small-size); color: var(--gray-600);
  padding-bottom: var(--space-5); margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--gray-200);
}

/* Índice ancorado */
.toc {
  background: var(--surface-tint);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}
.toc__title {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-red-ink);
  margin-bottom: var(--space-4);
}
.toc ol { list-style: none; counter-reset: toc; display: grid; gap: var(--space-2); }
@media (min-width: 720px){ .toc ol { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-5); } }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: var(--space-3); align-items: baseline;
  font-size: var(--text-small-size); line-height: 1.5;
  color: var(--gray-800); text-decoration: none; padding: 4px 0;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  color: var(--color-red); flex: none; font-variant-numeric: tabular-nums;
}
.toc a:hover { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   16. FAQ
   ============================================================ */
.faq { display: grid; gap: var(--space-3); }
.faq details {
  background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.faq summary {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--color-navy);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4);
  min-height: 24px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--color-red); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: var(--space-3); font-size: var(--text-small-size); color: var(--gray-600); line-height: 1.6; }

/* ============================================================
   17. BLOCOS DIVERSOS
   ============================================================ */
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px){ .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.split--reverse > *:first-child { order: 0; }
@media (min-width: 900px){ .split--reverse > *:first-child { order: 1; } }

.quote {
  border-left: 4px solid var(--color-red);            /* redline: filete 4px */
  padding-left: var(--space-4);
  font-size: 18px; line-height: 1.55; color: var(--gray-950);
}
.quote cite { display: block; margin-top: var(--space-3); font-size: 13.5px; font-style: normal; color: var(--gray-600); }

.contact-list { display: grid; gap: var(--space-4); }
.contact-list dt { font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-red-ink); margin-bottom: 4px; }
.contact-list dd { margin: 0; font-size: var(--text-body-size); color: var(--gray-950); }

.hint { font-size: 12.5px; color: var(--gray-600); line-height: 1.5; }

.map-embed {
  aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-5);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; }

.anchor-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.anchor-nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--gray-200); background: #fff; color: var(--color-navy);
  min-height: 44px; display: inline-flex; align-items: center;
}
.anchor-nav a:hover { border-color: var(--color-navy); }

/* ============================================================
   18. PLACEHOLDER DE CONTEÚDO — [PLANO §7]
   Busca por "is-placeholder" tem que dar zero antes de publicar.
   ============================================================ */
.is-placeholder {
  background: var(--gray-100);
  border-left: 3px solid var(--color-red);
  padding: 2px 8px;
  color: var(--gray-600);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.section--navy .is-placeholder,
.site-footer .is-placeholder {
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.75);
}

/* ============================================================
   19. REVELAÇÃO AO ROLAR — [PLANO §11]
   ============================================================ */
/* Sem JS o conteúdo aparece normalmente — só escondemos quando há JS. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) ease-out, transform var(--dur-reveal) ease-out;
}

/* --- Rede de segurança: texto nunca pode ficar invisível ---------------
   Esconder conteúdo e devolvê-lo por transição de opacidade é uma aposta:
   se a transição não completar, o texto some de vez. Isso acontece quando
   o `main.js` não roda (404, cache velho, erro de script, bloqueador) e
   também quando a página abre em aba de segundo plano, porque o navegador
   congela a animação e a opacidade fica presa em 0.
   O script embutido no <head> de cada página — que roda sempre, porque não
   depende de nenhum arquivo externo — marca `revelar-tudo` nesses casos.
   `transition: none` é essencial aqui: revela na hora, sem fade nenhum
   para poder travar. Especificidade (0,4,0) e (0,3,0) declaradas DEPOIS
   das regras acima, então ganham por peso e por ordem. */
.js.revelar-tudo .reveal,
.js.revelar-tudo .reveal.is-visible {
  opacity: 1; transform: none; transition: none;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* `.is-visible` precisa constar aqui: sem ela, a regra de cima (0,3,0)
     continuava aplicando a transição em quem pediu menos movimento. */
  .js .reveal,
  .js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   BRILHO DE BORDA — anel de luz que segue o ponteiro
   ============================================================
   Porte em CSS+JS nativo do efeito "glowing border" (Aceternity).
   O original é React + Tailwind + a biblioteca `motion`; este site
   é estático, sem build, por decisão registrada em specs/site.md.
   O que muda: a interpolação do ângulo é feita à mão no main.js
   (12 linhas) em vez de vir de uma biblioteca. O resultado na tela
   é o mesmo, e o site continua sem dependência nenhuma.

   Paleta: só navy e vermelho da marca. O gradiente original tinha
   rosa, dourado e verde — nada disso existe na identidade do 3D.

   Ativa-se pela classe `.brilho` no CONTÊINER; os filhos diretos
   recebem o anel. Escopo explícito de propósito: `.card` é usado
   em várias páginas e o efeito só foi pedido em três seções.

   redline: anel 2px · arco 80° · proximidade 64px · fade 350ms
   ------------------------------------------------------------ */

.brilho > .card,
.brilho > .stat { position: relative; }

.brilho > .card::before,
.brilho > .stat::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 3px;                       /* espessura do anel */
  z-index: 2;
  pointer-events: none;
  opacity: var(--brilho-ativo, 0);
  transition: opacity .35s ease;

  /* O arco de luz: vermelho no centro, navy nas pontas, resto
     transparente. Girar `--brilho-angulo` é o que faz a luz correr
     pela borda. */
  background: conic-gradient(
    from calc((var(--brilho-angulo, 0) - 50) * 1deg),
    rgba(0,40,86,0)   0deg,
    var(--color-navy) 22deg,
    var(--color-red)  42deg,
    #fff              50deg,   /* núcleo claro: é o que dá a sensação de luz */
    var(--color-red)  58deg,
    var(--color-navy) 78deg,
    rgba(0,40,86,0) 100deg
  );

  /* Recorte clássico de borda em gradiente: pinta a área toda e
     "fura" o miolo, sobrando só a moldura. O `xor` do WebKit é o
     equivalente do `exclude` padrão — os dois ficam porque o
     Safari só entendeu a versão sem prefixo a partir do 15.4. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* Sem halo externo de propósito: a primeira versão usava um `::after`
   com `z-index: -1`, que depende do contexto de empilhamento do cartão e
   quebra em qualquer mudança de fundo. O anel sozinho entrega o efeito,
   e não tem como quebrar. */

/* O anel é desenhado POR DENTRO da borda (`inset: 0`), e não por fora
   como no componente original. Motivo: `.card` tem `overflow: hidden`
   para recortar a foto do topo, e qualquer coisa desenhada fora da
   caixa seria cortada — a luz só apareceria nos cantos. Desenhar por
   dentro dá o mesmo resultado visual sem mexer no `overflow`, que
   existe por outro motivo. */

/* Sem ponteiro (celular e tablet) não há de onde tirar o ângulo —
   o efeito simplesmente não entra, e o cartão fica como sempre foi. */
@media (hover: none), (pointer: coarse) {
  .brilho > .card::before, .brilho > .stat::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .brilho > .card::before, .brilho > .stat::before { display: none; }
}

/* ============================================================
   20. UTILITÁRIOS
   ============================================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.text-center { text-align: center; }