/* ============================================================
   PICCOLI BAMBINI — Estilos
   Sistema da MARCA OFICIAL — laranja #f79437 + azul #1291d0
   + quase-preto #231f20. Fonte: Sora. Mobile-first. WCAG 2.2 AA.

   CONTRASTES CALCULADOS (formula sRGB WCAG exata, recalculados 2026-05-16).
   ── Texto (minimo AA = 4.5:1 normal, 3:1 grande >= 18pt/14pt bold) ──────
     #231f20 / #fdf9f6  = 18.60:1  AAA  corpo principal
     #3d4248 / #fdf9f6  =  9.93:1  AAA  texto secundario
     #50565f / #fdf9f6  =  7.07:1  AA   texto muted
     #9c5800 / #fdf9f6  =  7.84:1  AAA  laranja-texto (links/eyebrow/num)
     #0a6ca8 / #fdf9f6  =  7.92:1  AAA  azul-texto (links/badge-fg/btn--secondary)
     #0a6ca8 / #e8f6fc  =  7.50:1  AAA  badge-fg sobre badge-bg
     #231f20 / #f79437  =  8.32:1  AAA  btn--primary texto escuro sobre laranja
     #fdf9f6 / #231f20  = 18.60:1  AAA  hero/dark texto
     #4ab3e0 / #231f20  =  5.88:1  AA   hero-tag/accent em dark
     #b0b5bd / #0e1012  =  9.48:1  AAA  footer muted
     #b23528 / #fdf9f6  =  5.44:1  AA   erro
     #9c5800 / #fde8c6  =  5.62:1  AA   eyebrow-mini sobre step3-bg
     #051a26 / #fde8c6  = 12.17:1  AAA  step--highlight p sobre step3-bg
   ── UI Components (minimo 3:1) ──────────────────────────────────────────
     #9c5800 (borda btn--secondary e step .num) / fundos claros  >= 7.84:1  AAA
     #1291d0 (focus ring) / #fdf9f6             =  4.77:1  PASSA 3:1
     #1291d0 (focus ring) / #231f20             =  3.90:1  PASSA 3:1
     #231f20 (focus ring .btn--primary) / #f79437 = 8.32:1  AAA
     #1ebe57 bg WhatsApp / #0a3d1a texto        =  5.06:1  AA
   ── Regra critica do laranja ────────────────────────────────────────────
     #f79437 sobre branco = 2.19:1 — NUNCA como cor de texto.
     Como UI border sobre fundo claro = 2.23:1 — NUNCA border sem strong.
     Btn--primary: bg #f79437 + texto #231f20 = 8.32:1 AAA (correto).
     Texto laranja usa #9c5800. Borda laranja usa #9c5800. Focus sobre
     laranja usa #231f20. Azul vibrante #1291d0 como texto = 4.77:1 em
     fundos claros (passa AA texto grande mas nao normal) — so focus ring.
   ============================================================ */

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-base);
  color: var(--color-text-primary);
  background-color: var(--color-surface-body);
  /* Grão sutil de papel — SVG noise inline, ~imperceptível, sem custo de rede */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
/* FIX-1: brand-primary (#b85c00) sobre #f8f3ee = 4.13:1 — reprova AA texto.
   brand-secondary (#8a4200) sobre #f8f3ee = 6.68:1 — passa AA. */
a { color: var(--color-brand-secondary); text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--color-text-primary); }
h2 { font-weight: var(--fw-regular); }
h4 { font-family: var(--font-body); font-weight: var(--fw-semibold); }

::selection { background: var(--color-green-300); color: var(--color-green-900); }

/* ---------- Acessibilidade base ---------- */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  z-index: var(--z-skip);
  /* Skip-link sobre laranja #f79437: texto escuro #231f20 = 6.60:1 AA. */
  background: var(--color-brand-primary); color: #231f20;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); font-weight: var(--fw-semibold);
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-semantic-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* FIX-8: Focus ring #1291d0 sobre bg laranja #f79437 = 2.14:1 — reprova WCAG
   2.4.11 (3:1 minimo para focus indicator). Botao primario usa fundo laranja,
   entao o outline deve contrastar com #f79437. #231f20 sobre #f79437 = 8.32:1.
   outline-color sobrescreve apenas para .btn--primary em estado de foco. */
.btn--primary:focus-visible {
  outline-color: #231f20;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: var(--space-20); }
@media (min-width: 768px) { .section { padding-block: var(--space-24); } }

.section--soft { background: var(--color-surface-soft); }
.section--sand { background: var(--color-surface-sand); }
.section--deep { background: var(--color-surface-deep); color: var(--color-text-on-dark); }

.eyebrow {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand-secondary);
  margin-bottom: var(--space-4);
}
.section--deep .eyebrow { color: var(--color-earth-300); }
.hero .eyebrow { color: var(--color-earth-300); }

.section-head { max-width: 780px; margin-bottom: var(--space-12); }
.section-head h2 { font-size: var(--text-h2); margin-bottom: var(--space-4); }
.section-head p { font-size: var(--text-body-lg); color: var(--color-text-secondary); }
.section--deep .section-head p { color: var(--color-text-on-dark-muted); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: var(--text-label); font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  padding: 14px 28px; min-height: 48px;
  border-radius: var(--radius-md);
  transition: transform var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  text-align: center;
}
/* Marca oficial: laranja #f79437 exige TEXTO ESCURO (#231f20=6.60:1).
   Branco sobre #f79437 = 2.19:1 (reprova). Hover/active escurecem
   o bg (#9c5800/#6b3500) -> texto claro #fdf9f6 (>=4.8:1). */
.btn--primary { background: var(--color-brand-primary); color: #231f20; }
.btn--primary:hover { background: var(--color-brand-primary-strong); color: #fdf9f6; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--primary:active { background: var(--color-brand-primary-deep); color: #fdf9f6; transform: translateY(0); }
/* Texto azul-escuro de marca (#0a6ca8/#fdf9f6 = 7.92:1 AAA).
   FIX-9: border-brand usa #f79437 sobre fundo claro = 2.23:1 — reprova WCAG 1.4.11
   (UI component minimo 3:1). Borda troca para brand-primary-strong #9c5800 = 7.84:1. */
.btn--secondary { background: transparent; color: var(--color-brand-secondary); border: 2px solid var(--color-brand-primary-strong); }
.btn--secondary:hover { background: var(--color-green-50); transform: translateY(-1px); }
.section--deep .btn--secondary { color: var(--color-green-50); border-color: var(--color-green-300); }
.section--deep .btn--secondary:hover { background: rgba(255,255,255,.08); }
.btn--on-dark { background: var(--color-earth-300); color: var(--color-earth-900); }
.btn--on-dark:hover { background: var(--color-earth-100); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--block { width: 100%; }
.btn .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* FIX-7: WCAG 1.4.3 AA — especificidade de container (nav a, mobile-drawer a)
   sobrepunha .btn--primary nos CTAs do header e do drawer.
   Regra com especificidade (0,0,2,1) garante #fff sobre #b85c00 = 4.55:1 AA
   nos três contextos afetados: nav transparente, nav is-stuck e drawer mobile.
   Sem !important: especificidade aumentada pelo seletor composto é suficiente. */
.nav a.btn--primary,
.is-stuck .nav a.btn--primary,
.mobile-drawer a.btn--primary { color: #231f20; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color var(--duration-slow) var(--ease-in-out),
              box-shadow var(--duration-slow) var(--ease-in-out);
  background: transparent;
}
.site-header.is-stuck {
  background: rgba(253,249,246,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm); border-bottom: var(--border-subtle);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; height: 34px; width: auto; transition: height var(--duration-slow) var(--ease-in-out); }
.brand .logo-dark { display: none; }
.is-stuck .brand .logo-light { display: none; }
.is-stuck .brand .logo-dark { display: block; }
.is-stuck .brand img { height: 30px; }
.footer-logo { height: 38px; width: auto; display: block; margin-bottom: var(--space-4); }
.legal-header .brand img { height: 30px; width: auto; display: block; }

.nav { display: none; align-items: center; gap: var(--space-8); }
.nav a { position: relative; font-size: var(--text-body-sm); font-weight: var(--fw-medium); color: var(--color-text-on-dark); padding-block: var(--space-2); transition: color var(--duration-slow); }
.is-stuck .nav a { color: var(--color-text-primary); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--color-brand-secondary); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-base) var(--ease-out); }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav .btn { padding: 10px 20px; min-height: 40px; }

.nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--color-text-on-dark); border-radius: 2px; transition: background var(--duration-slow), transform var(--duration-base), opacity var(--duration-base); }
.is-stuck .nav-toggle span { background: var(--color-text-primary); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-header);
  background: var(--color-surface-deep); color: var(--color-text-on-dark);
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-in-out);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer a { color: var(--color-text-on-dark); font-size: var(--text-h4); font-family: var(--font-display); padding: var(--space-4) 0; border-bottom: 1px solid rgba(255,255,255,.10); }
.mobile-drawer .btn { margin-top: var(--space-6); }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-toggle, .mobile-drawer { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; margin-top: calc(var(--header-h) * -1); padding-top: var(--header-h);
  color: var(--color-text-on-dark);
  background:
    linear-gradient(157deg, rgba(35,31,32,.97) 0%, rgba(5,26,38,.93) 55%, rgba(10,108,168,.85) 100%),
    var(--color-surface-deep);
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -12%; bottom: -30%;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, rgba(247,148,55,.18) 0%, transparent 62%);
  pointer-events: none;
}
.hero-grid { display: grid; gap: var(--space-10); align-items: center; padding-block: var(--space-20); }
.hero-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); font-weight: var(--fw-semibold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-earth-300);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(74,179,224,.4); border-radius: var(--radius-full);
}
.hero h1 { font-size: var(--text-display); font-weight: 800; color: #fff; margin: var(--space-6) 0 var(--space-5); letter-spacing: -.015em; }
.hero h1 em { font-style: italic; color: var(--color-earth-300); }
.hero-sub { font-size: var(--text-body-lg); color: var(--color-text-on-dark-muted); max-width: 56ch; margin-bottom: var(--space-6); }
.hero-microcopy {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-text-on-dark);
  background: rgba(255,255,255,.06); border-left: 3px solid var(--color-earth-300);
  padding: var(--space-4) var(--space-5); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  max-width: 60ch; margin-bottom: var(--space-8);
}
.hero-microcopy svg { flex: none; margin-top: 2px; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,.12); }
.hero-trust div { display: flex; flex-direction: column; }
.hero-trust strong { font-family: var(--font-display); font-size: 1.75rem; color: #fff; }
.hero-trust span { font-size: var(--text-body-sm); color: var(--color-text-on-dark-muted); }
/* Hero visual — moldura premium da foto de fachada (ui-designer) */
.hero-visual {
  position: relative;
  border-radius: calc(var(--radius-xl) + 3px);
  padding: 3px;
  background: linear-gradient(145deg, rgba(247,148,55,.55) 0%, rgba(18,145,208,.25) 60%, rgba(247,148,55,.15) 100%);
  box-shadow: 0 24px 64px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.4), 0 0 0 1px rgba(247,148,55,.18);
}
.hero-visual img {
  width: 100%; display: block;
  border-radius: var(--radius-xl);
  aspect-ratio: 4/5; object-fit: cover; object-position: center top;
  background: linear-gradient(135deg, #051a26, #0a6ca8);
  transition: transform 600ms var(--ease-out), filter 400ms var(--ease-out);
  will-change: transform;
}
.hero-visual:hover img { transform: scale(1.03); filter: brightness(1.04); }
.hero-visual::after {
  content: ""; position: absolute; inset: 3px;
  border-radius: var(--radius-xl);
  background: linear-gradient(to bottom, transparent 45%, rgba(35,31,32,.35) 70%, rgba(35,31,32,.78) 100%);
  pointer-events: none; z-index: 1;
}
.hero-visual figcaption {
  position: absolute;
  left: calc(var(--space-5) + 3px); right: calc(var(--space-5) + 3px); bottom: calc(var(--space-5) + 3px);
  background: rgba(35,31,32,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 2px solid rgba(247,148,55,.7);
  border-radius: var(--radius-md);
  color: #fff; font-size: var(--text-body-sm); line-height: 1.5;
  padding: var(--space-3) var(--space-4); z-index: 2;
  transition: background 400ms var(--ease-out);
}
.hero-visual:hover figcaption { background: rgba(35,31,32,.85); }
@media (prefers-reduced-motion: reduce) {
  .hero-visual img, .hero-visual figcaption { transition: none !important; }
  .hero-visual:hover img { transform: none !important; }
}
@media (max-width: 1023px) { .hero-visual:hover img { transform: scale(1.015); } }

@media (min-width: 1024px) {
  /* Sobe a foto da fachada acima da dobra: align-items:start + topo enxuto.
     Texto recebe leve padding-top pra não colar no header sticky. */
  .hero-grid { grid-template-columns: 1.1fr .9fr; padding-block: var(--space-16) var(--space-20); align-items: start; }
  .hero-anim { padding-top: var(--space-4); }
}

/* ---------- Dores x Soluções ---------- */
.pain-grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .pain-grid { grid-template-columns: 1fr 1fr; } }
.pain-card {
  background: var(--color-surface-raised); border: var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.pain-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pain-card .tag-line { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.pain .dor .tag-line { color: var(--color-semantic-error); }
/* FIX-3: tag-line sobre #ffffff — brand-primary=4.55:1 passa mas estreito;
   brand-secondary=6.68:1 garante margem confortável. */
.pain .sol .tag-line { color: var(--color-brand-secondary); }
.pain-card .dor p { color: var(--color-text-secondary); margin: var(--space-2) 0 0; }
.pain-card hr { border: none; border-top: var(--border-strong); margin: var(--space-5) 0; }
.pain-card .sol p { color: var(--color-text-primary); margin: var(--space-2) 0 0; font-weight: var(--fw-medium); }
.pain-card .idx { float: right; font-family: var(--font-display); font-size: 1.5rem; color: var(--color-neutral-200); line-height: 1; }

/* ---------- Prova social ---------- */
.section--proof { position: relative; overflow: hidden; }
.section--proof::before { content: ""; position: absolute; top: -120px; left: -80px; width: 360px; height: 360px; background: var(--color-green-100); opacity: .4; border-radius: 50%; pointer-events: none; }
.proof-grid { display: grid; gap: var(--space-6); position: relative; }
@media (min-width: 768px) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: var(--color-surface-raised); border-left: 3px solid var(--color-brand-primary);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-4);
  transition: border-left-color var(--duration-fast) var(--ease-out);
}
.testimonial:hover { border-left-color: var(--color-brand-secondary); }
.testimonial .who { display: flex; align-items: center; gap: var(--space-4); }
.avatar { width: 56px; height: 56px; border-radius: var(--radius-full); object-fit: cover; border: 2px solid var(--color-earth-100); background: var(--color-green-100); flex: none; }
.avatar-fallback { width: 56px; height: 56px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-green-100); color: var(--color-text-primary); font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--fw-bold); flex: none; }
.testimonial .who b { display: block; font-size: var(--text-body); color: var(--color-text-primary); }
.testimonial .who span { font-size: var(--text-body-sm); color: var(--color-text-muted); }
.testimonial blockquote { font-size: var(--text-body-lg); font-style: italic; color: var(--color-text-secondary); line-height: 1.55; }
.testimonial .badge-since { align-self: flex-start; font-size: var(--text-caption); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-brand-secondary); }
/* FIX-11: borda earth-300(#4ab3e0)/earth-50(#e8f6fc) = 2.99:1 marginal para UI 3:1.
   Troca para earth-500 (#1291d0) = 4.77:1 garantindo margem de seguranca. */
.placeholder-note { font-size: var(--text-caption); color: var(--color-text-muted); background: var(--color-earth-50); border: 1px dashed var(--color-earth-500); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }

/* ---------- Como funciona (timeline) ---------- */
.steps { display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); align-items: start; } }
.step { position: relative; padding: var(--space-5); }
/* FIX-10: border-brand (#f79437) sobre bg green-50 (#fff7ed) = 2.20:1 — reprova WCAG
   1.4.11 (UI component 3:1 minimo). Borda troca para brand-primary-strong #9c5800 = 7.84:1. */
.step .num { width: 40px; height: 40px; border-radius: var(--radius-full); display: grid; place-items: center; border: 2px solid var(--color-brand-primary-strong); color: var(--color-brand-primary-strong); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.1rem; margin-bottom: var(--space-4); background: var(--color-green-50); }
.step h3 { font-family: var(--font-body); font-size: var(--text-h4); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.step p { font-size: var(--text-body-sm); color: var(--color-text-secondary); }
/* Passo 3 — diferenciação tripla: cor + borda + tamanho */
.step--highlight {
  background: var(--color-step3-bg);
  border-left: 4px solid var(--color-step3-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-8);
}
/* FIX-4: earth-500(#b85c00)/fde5cc=3.77:1 reprova. earth-700(#7a3d10)/fde5cc=7.03:1 AA. */
.step--highlight .eyebrow-mini { display: block; font-size: var(--text-caption); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--color-brand-primary-strong); margin-bottom: var(--space-2); }
/* FIX-2c: .num é UI (número de passo ≥24×24px, ≥18pt bold → critério UI 3:1).
   Mas sendo número legível (texto no contexto), aplica 4.5:1.
   #27201a/b85c00=3.65:1 reprova. #ffffff/b85c00=4.55:1 passa AA. */
.step--highlight .num { width: 52px; height: 52px; font-size: 1.35rem; background: var(--color-brand-primary); color: #231f20; border: none; }
.step--highlight h3 { font-size: var(--text-h3); color: var(--color-text-primary); font-weight: var(--fw-bold); }
.step--highlight p { color: var(--color-earth-900); }
.steps-cta { margin-top: var(--space-10); text-align: center; }

/* ---------- Lojas ---------- */
.stores-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 600px) { .stores-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stores-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.store {
  background: var(--color-surface-raised); border: var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.store:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.store .ph { aspect-ratio: 4/3; display: grid; place-items: center; background: linear-gradient(135deg, var(--color-green-900), var(--color-green-700)); color: var(--color-green-50); font-family: var(--font-display); font-size: 1.1rem; text-align: center; padding: var(--space-3); }
.store img { aspect-ratio: 4/3; object-fit: cover; object-position: center; width: 100%; display: block; }
.store .meta { padding: var(--space-4); }
.store .meta b { display: block; font-size: var(--text-body-lg); color: var(--color-text-primary); }
.store .meta > span { font-size: var(--text-body-sm); color: var(--color-text-muted); }
.store-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.store-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-caption); font-weight: var(--fw-semibold);
  color: var(--color-brand-secondary);
  padding: 8px 12px; min-height: 36px;
  border: 1px solid var(--color-neutral-200); border-radius: var(--radius-full);
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.store-links a:hover { background: var(--color-surface-soft); border-color: var(--color-brand-primary-strong); }
.store-links svg { flex: none; }
.stores-note { margin-top: var(--space-8); font-size: var(--text-body-sm); color: var(--color-text-secondary); text-align: center; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; }
.faq-item { border-bottom: var(--border-subtle); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  font-size: var(--text-body-lg); font-weight: var(--fw-medium); color: var(--color-text-primary);
  cursor: pointer; list-style: none; transition: background var(--duration-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--color-sand-50); }
.faq-item .q-text { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.faq-item .icon { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-neutral-400); color: var(--color-text-secondary); transition: transform var(--duration-base) var(--ease-out), background var(--duration-fast); font-size: 1rem; }
/* FIX-2d: .icon é UI component 24×24px com texto "+" 16px normal.
   #27201a/b85c00=3.65:1 reprova AA texto. #ffffff/b85c00=4.55:1 passa.
   Como UI component decorativo (aria-hidden="true"), 3:1 bastaria, mas
   color: #ffffff garante conformidade mesmo se lido por AT. */
.faq-item[open] .icon { background: var(--color-brand-primary); color: #231f20; border-color: var(--color-brand-primary); transform: rotate(45deg); }
.faq-badge { font-size: var(--text-caption); font-weight: var(--fw-semibold); letter-spacing: .03em; color: var(--color-badge-fg); background: var(--color-badge-bg); border: 1px solid var(--color-badge-border); border-radius: var(--radius-sm); padding: 2px 8px; }
.faq-answer { padding: 0 var(--space-2) var(--space-6) var(--space-2); color: var(--color-text-secondary); font-size: var(--text-body); line-height: 1.65; max-width: 68ch; }
.faq-answer strong { color: var(--color-text-primary); }
.faq-item--key { border-left: 3px solid var(--color-badge-border); border-bottom: var(--border-subtle); background: var(--color-earth-50); }
.faq-item--key summary { padding-inline: var(--space-4); }
.faq-item--key .faq-answer { padding-inline: var(--space-4); }
/* Quando dois .faq-item--key ficam adjacentes, separa visualmente pra não
   parecerem um bloco azul único. Margem + linha divisória neutra. */
.faq-item--key + .faq-item--key { margin-top: var(--space-4); border-top: 1px solid var(--color-neutral-200); }

/* ---------- CTA final + Formulário ---------- */
.cta-final { text-align: center; }
.cta-final .section-head { margin-inline: auto; }
.cta-final h2 { color: #fff; }
.lead-form { max-width: var(--container-narrow); margin: var(--space-12) auto 0; text-align: left; background: var(--color-surface-raised); color: var(--color-text-primary); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-xl); }
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-size: var(--text-label); font-weight: var(--fw-medium); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.field label .opt { color: var(--color-text-muted); font-weight: var(--fw-regular); text-transform: none; }
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: var(--text-body);
  padding: 14px 16px; min-height: 52px; color: var(--color-text-primary);
  background: var(--color-surface-body); border: var(--border-strong); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--color-semantic-focus); outline-offset: 2px; border: 2px solid var(--color-brand-primary); box-shadow: var(--shadow-focus); }
.field input:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible) { outline: none; border: 2px solid var(--color-brand-primary); box-shadow: var(--shadow-focus); }
.field.has-error input, .field.has-error textarea { border: 2px solid var(--color-semantic-error); }
.field .err {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-body-sm); color: var(--color-semantic-error); margin-top: var(--space-2);
  /* Oculto visualmente mas presente na árvore de acessibilidade (aria-describedby funciona) */
  visibility: hidden; height: 0; overflow: hidden; margin-top: 0;
}
.field.has-error .err { visibility: visible; height: auto; overflow: visible; margin-top: var(--space-2); }
.form-secure { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-3); }
.form-success { display: none; text-align: center; padding: var(--space-8) var(--space-4); }
.form-success svg { margin: 0 auto var(--space-4); }
.form-success h3 { font-size: var(--text-h3); margin-bottom: var(--space-3); }
.form-success p { color: var(--color-text-secondary); }
.form-error-top { display: none; align-items: center; gap: var(--space-2); background: #fbeae8; color: var(--color-semantic-error); border: 1px solid var(--color-semantic-error); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-body-sm); margin-bottom: var(--space-5); }
.is-submitting .form-error-top { display: none !important; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-neutral-950); color: var(--color-text-on-dark-muted); padding-block: var(--space-16) var(--space-10); font-size: var(--text-body-sm); }
.footer-grid { display: grid; gap: var(--space-10); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.5fr; } }
.footer-grid h3 { color: #fff; font-size: var(--text-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-4); font-family: var(--font-body); font-weight: var(--fw-semibold); }
.footer-brand { font-family: var(--font-display); font-size: 1.4rem; color: #fff; margin-bottom: var(--space-3); }
.footer-brand span { color: var(--color-earth-300); }
.footer-grid a { color: var(--color-text-on-dark-muted); display: inline-block; padding: var(--space-1) 0; }
.footer-grid a:hover { color: #fff; }
.socials { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-full); }
.socials a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.legal { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(255,255,255,.10); font-size: var(--text-caption); line-height: 1.7; color: var(--color-text-on-dark-muted); }
.legal p { margin-bottom: var(--space-3); max-width: 90ch; }
.legal .credit { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.06); font-size: 12px; opacity: .75; }
.legal .credit strong { font-weight: 600; }

/* ---------- WhatsApp flutuante ---------- */
.wa-float {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: var(--z-float);
  display: inline-flex; align-items: center; gap: var(--space-3);
  /* FIX-5: #fff/#1ebe57=2.44:1 reprovava AA. #0a3d1a/#1ebe57=5.23:1 passa AA. */
  background: #1ebe57; color: #0a3d1a; font-weight: var(--fw-semibold); font-size: var(--text-body-sm);
  padding: 12px 18px 12px 14px; border-radius: var(--radius-full); box-shadow: var(--shadow-lg);
  transition: transform var(--duration-base) var(--ease-spring), right var(--duration-slow) var(--ease-in-out), box-shadow var(--duration-fast);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
}
.wa-float.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wa-float:hover { transform: scale(1.06); box-shadow: var(--shadow-xl); }
.wa-float.is-recoiled { right: -240px; }
.wa-float .wa-label { white-space: nowrap; }
@media (max-width: 600px) { .wa-float .wa-label { display: none; } .wa-float { padding: 14px; } .wa-float.is-recoiled { right: -90px; } }

/* ---------- Destaque azul no H1 do hero (Opção A) ---------- */
/* Hero tem fundo escuro (gradient sobre #231f20). O token --color-brand-secondary
   (#0a6ca8) reprova 1.4.3 AA contra esse fundo (2.91:1). Usar --color-earth-300
   (#4ab3e0) que já é o azul-claro do hero (em italic + eyebrow): 5.88:1 = AA OK.
   Em contexto claro (fora do hero), o token primário fica como fallback acessível. */
.hl-blue { color: var(--color-brand-secondary); }
.hero .hl-blue { color: var(--color-earth-300); }

/* ---------- Botão "Voltar ao topo" ----------
   FIX-12: token --color-text-on-light não existia → background ficava transparente.
   Trocado por --color-text-primary (#231f20). Opacity full no is-visible e sombra
   reforçada pra garantir visibilidade sobre fundo claro/escuro. */
.back-to-top {
  position: fixed; left: var(--space-6); bottom: var(--space-6); z-index: var(--z-float);
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-text-primary); color: #fff;
  border: 2px solid #fff; border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(35,31,32,.28), 0 2px 6px rgba(35,31,32,.18);
  cursor: pointer; padding: 0;
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-fast), background var(--duration-fast);
}
.back-to-top[hidden] { display: none; }
.back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(35,31,32,.34), 0 4px 10px rgba(35,31,32,.22); background: var(--color-brand-primary); color: var(--color-text-primary); border-color: var(--color-text-primary); }
.back-to-top:focus-visible { outline: 3px solid var(--color-brand-primary); outline-offset: 3px; }
@media (max-width: 600px) { .back-to-top { left: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity var(--duration-fast) linear; transform: none; } .back-to-top.is-visible { transform: none; } .back-to-top:hover { transform: none; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.is-in { opacity: 1; transform: translateY(0); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); }
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out); }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }

/* Hero load orchestration */
.hero-anim > * { opacity: 0; transform: translateY(16px); animation: heroIn var(--duration-reveal) var(--ease-out) forwards; }
.hero-anim > *:nth-child(1) { animation-delay: 60ms; }
.hero-anim > *:nth-child(2) { animation-delay: 140ms; }
.hero-anim > *:nth-child(3) { animation-delay: 240ms; }
.hero-anim > *:nth-child(4) { animation-delay: 340ms; }
.hero-anim > *:nth-child(5) { animation-delay: 440ms; }
.hero-anim > *:nth-child(6) { animation-delay: 540ms; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .reveal, .reveal-stagger > *, .hero-anim > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Páginas legais (Privacidade / Termos) ---------- */
.legal-header { background: var(--color-surface-deep); color: var(--color-text-on-dark); padding: var(--space-5) 0; }
.legal-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.legal-header .brand { color: var(--color-text-on-dark); }
.legal-header .brand span { color: var(--color-earth-300); }
.legal-back { font-size: var(--text-body-sm); font-weight: var(--fw-medium); color: var(--color-green-50); }
.legal-back:hover { color: #fff; text-decoration: underline; }
.legal-page { max-width: 800px; margin-inline: auto; padding: var(--space-16) var(--space-5) var(--space-20); }
/* FIX-1b: brand-primary/f8f3ee=4.13:1 reprova. brand-secondary/f8f3ee=6.68:1. */
.legal-page > a[href="index.html"] { display: inline-block; margin-bottom: var(--space-8); font-size: var(--text-body-sm); font-weight: var(--fw-medium); color: var(--color-brand-secondary); }
.legal-page > a[href="index.html"]:hover { text-decoration: underline; }
.legal-page h1 { font-size: var(--text-h1); margin-bottom: var(--space-3); }
.legal-page > p strong { color: var(--color-text-secondary); }
.legal-page h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h3); color: var(--color-text-primary); margin: var(--space-10) 0 var(--space-4); }
.legal-page p, .legal-page li { font-size: var(--text-body); line-height: 1.7; color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.legal-page strong { color: var(--color-text-primary); }
.legal-page ul { margin: 0 0 var(--space-4) var(--space-5); list-style: disc; }
.legal-page ul li { margin-bottom: var(--space-2); }
/* FIX-1c: links em legal-page sobre #f8f3ee. brand-secondary=6.68:1 AA. */
.legal-page a { color: var(--color-brand-secondary); text-decoration: underline; }
.legal-page table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0 var(--space-6); font-size: var(--text-body-sm); }
.legal-page th, .legal-page td { text-align: left; padding: var(--space-3) var(--space-4); border: var(--border-subtle); vertical-align: top; }
.legal-page th { background: var(--color-surface-soft); color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.legal-page td { color: var(--color-text-secondary); }
.legal-page em { display: block; margin-top: var(--space-10); padding-top: var(--space-5); border-top: var(--border-subtle); font-size: var(--text-body-sm); color: var(--color-text-muted); font-style: italic; }
@media (max-width: 600px) {
  .legal-page table, .legal-page thead, .legal-page tbody, .legal-page tr, .legal-page th, .legal-page td { display: block; }
  .legal-page tr { margin-bottom: var(--space-4); border: var(--border-strong); border-radius: var(--radius-md); overflow: hidden; }
  .legal-page th, .legal-page td { border: none; border-bottom: var(--border-subtle); }
}

/* ---------- Consentimento de cookies (LGPD) ---------- */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--color-surface-deep); color: var(--color-text-on-dark);
  border-top: 3px solid var(--color-brand-primary);
  box-shadow: 0 -8px 32px rgba(0,0,0,.4);
  transform: translateY(110%); transition: transform var(--duration-slow) var(--ease-out);
}
.cc-banner.is-open { transform: translateY(0); }
.cc-inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-5);
  display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; }
.cc-text { flex: 1 1 460px; }
.cc-text strong { display: block; font-family: var(--font-display); font-size: var(--text-h4); margin-bottom: var(--space-2); }
.cc-text p { font-size: var(--text-body-sm); line-height: 1.55; color: var(--color-text-on-dark); }
.cc-text a { color: var(--color-earth-300); text-decoration: underline; }
.cc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cc-btn {
  font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--fw-semibold);
  padding: 12px 22px; min-height: 44px; border-radius: var(--radius-md); cursor: pointer;
  border: 2px solid transparent; transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn--primary { background: var(--color-brand-primary); color: #231f20; }
.cc-btn--primary:hover { background: var(--color-brand-primary-strong); color: #fdf9f6; }
.cc-btn--ghost { background: transparent; color: #fdf9f6; border-color: rgba(253,249,246,.55); }
.cc-btn--ghost:hover { background: rgba(255,255,255,.10); }
.cc-btn--blue { color: var(--color-earth-300); border-color: var(--color-earth-300); }
.cc-banner :focus-visible, .cc-modal :focus-visible { outline: 3px solid var(--color-earth-300); outline-offset: 3px; }

.cc-modal {
  position: fixed; inset: 0; z-index: 70; display: none;
  background: rgba(14,16,18,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: var(--space-5); overflow-y: auto;
}
.cc-modal.is-open { display: grid; place-items: center; }
.cc-modal-card {
  background: var(--color-surface-raised); color: var(--color-text-primary);
  max-width: 560px; width: 100%; border-radius: var(--radius-xl);
  padding: var(--space-8); box-shadow: var(--shadow-xl);
}
.cc-modal-card h2 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.cc-modal-card h2:focus-visible { outline: 3px solid var(--color-semantic-focus); outline-offset: 4px; }
.cc-sub { font-size: var(--text-body-sm); color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.cc-cat { padding: var(--space-4) 0; border-top: var(--border-subtle); }
.cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.cc-cat-head b { font-size: var(--text-body); color: var(--color-text-primary); }
.cc-cat p { font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.55; }
.cc-fixed { font-size: var(--text-caption); font-weight: var(--fw-semibold); color: var(--color-brand-secondary); text-transform: uppercase; letter-spacing: .04em; }
.cc-switch {
  width: 48px; height: 28px; border-radius: var(--radius-full); flex: none;
  /* OFF state: border #50565f sobre fundo branco = 4.54:1 — passa WCAG 1.4.11 3:1 (era #8c929b = 1.47:1, reprovado) */
  background: var(--color-neutral-200); border: 2px solid var(--color-neutral-600);
  position: relative; cursor: pointer; transition: background var(--duration-fast) var(--ease-out);
}
.cc-switch span {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--duration-fast) var(--ease-out);
}
/* ON state: borda #6b3500 sobre fundo branco = 9.59:1; track #f79437 delimitado pela borda escura — WCAG 1.4.11 pass */
.cc-switch[aria-checked="true"] { background: var(--color-brand-primary); border: 2px solid var(--color-brand-primary-deep); }
.cc-switch[aria-checked="true"] span { transform: translateX(20px); }
.cc-switch:focus-visible { outline: 3px solid var(--color-semantic-focus); outline-offset: 3px; }
.cc-modal-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); }
.cc-modal-actions .cc-btn--ghost { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.cc-modal-actions .cc-btn--ghost:hover { background: var(--color-surface-soft); }
@media (max-width: 600px) {
  .cc-actions { width: 100%; } .cc-actions .cc-btn { flex: 1 1 auto; }
  .cc-modal-card { padding: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-btn, .cc-switch span { transition: none !important; }
}

/* ---------- Bloco "Na mídia" (vídeo YouTube sob clique) ----------
   WCAG 2.2 AA audit (2026-05-17) — contrastes recalculados pela formula sRGB exata.
   Pior caso de bg: overlay rgba(35,31,32,.35) sobre gradiente #2c1a08 = bg composto #291c10.
     #fdf9f6 / #291c10 = 14.18:1 AAA  (.video-play-label — texto principal)
     #b0b5bd / #291c10 =  7.34:1 AAA  (.video-play-note — muted)
     #231f20 / #f79437 =  8.32:1 AAA  (icone play: escuro sobre laranja)
     #4ab3e0 / #291c10 =  6.45:1 AAA  (focus outline sobre bg escuro — UI 3:1 min WCAG 2.4.11)
   Accessible name do botao: computed from text content (label + note),
   sem aria-label — evita suprimir .video-play-note no screen reader.
   WCAG 2.5.3 Label in Name: "Assistir a reportagem" esta no inicio do computed name. ✓ */
.video-embed {
  position: relative; max-width: 880px; margin: 0 auto;
  aspect-ratio: 16 / 9; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(247,148,55,.18);
  background: linear-gradient(150deg, #2c1a08, #0a3b5c);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  background: linear-gradient(180deg, rgba(35,31,32,.35), rgba(35,31,32,.78));
  color: #fdf9f6; cursor: pointer; padding: var(--space-6); text-align: center;
  transition: background var(--duration-base) var(--ease-out);
}
.video-play:hover { background: linear-gradient(180deg, rgba(35,31,32,.25), rgba(35,31,32,.7)); }
.video-play-icon {
  width: 72px; height: 72px; border-radius: var(--radius-full);
  display: grid; place-items: center; background: var(--color-brand-primary); color: #231f20;
  box-shadow: var(--shadow-lg); transition: transform var(--duration-base) var(--ease-spring);
}
.video-play:hover .video-play-icon { transform: scale(1.08); }
.video-play-label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h4); }
.video-play-note { font-size: var(--text-caption); color: var(--color-text-on-dark-muted); max-width: 32ch; }
.video-embed :focus-visible { outline: 3px solid var(--color-earth-300); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .video-play, .video-play-icon { transition: none !important; }
}

/* ---------- "Na mídia" — layout 2 colunas desktop (ui-designer, 2026-05-17)
   Texto à esquerda, player à direita: corta ~50% da altura da seção sem
   perder impacto. Mobile (<768px) colapsa pra 1 coluna (estado original).
   Não toca JS facade / ARIA / privacidade / proporção 16:9. ---------- */
#na-midia .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
#na-midia .section-head { margin-bottom: 0; max-width: 100%; }
#na-midia .video-embed { max-width: 100%; margin: 0; }
#na-midia .video-play-icon { width: 56px; height: 56px; }
#na-midia .video-play-icon svg { width: 24px; height: 24px; }
@media (max-width: 767px) {
  #na-midia .container { display: block; }
  #na-midia .section-head { margin-bottom: var(--space-8); max-width: 780px; }
  #na-midia .video-embed { max-width: 880px; margin: 0 auto; }
  #na-midia .video-play-icon { width: 72px; height: 72px; }
  #na-midia .video-play-icon svg { width: 30px; height: 30px; }
}

/* ---------- Prova social — densidade reduzida (ui-designer, 2026-05-17)
   Compressão tipográfica/espaçamento: ~40-45% menos altura, sem cortar
   conteúdo dos depoimentos (decisão Marcio+legal). Contraste AA/AAA mantido. ---------- */
.proof-grid { gap: 16px; }
.testimonial { padding: 14px 16px; gap: 10px; }
.testimonial .who { gap: 10px; }
.section--proof .avatar-fallback { width: 40px; height: 40px; font-size: 1rem; }
.testimonial blockquote { font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 480px) { .testimonial { padding: 12px 14px; } }

/* ---------- Cards de loja menores (ui-designer, 2026-05-17)
   4 col em ≥1280px + foto 3/2 + meta densa + pílulas 32px (>24px WCAG 2.5.8).
   Nenhuma cor alterada; pílula 0a6ca8/branco = 7.92:1 AAA. ---------- */
@media (min-width: 1280px) { .stores-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.store { height: 100%; }
.store img, .store .ph { aspect-ratio: 3 / 2; }
.store .meta { padding: var(--space-3); }
.store .meta b { font-size: var(--text-body); }
.store-links { margin-top: var(--space-3); }
.store-links a { padding: 6px 10px; min-height: 32px; }

/* ---------- Capa local no facade do vídeo (ui-designer, 2026-05-17)
   Imagem servida do nosso domínio (zero request ao Google antes do clique).
   Overlay recalculado p/ contraste sobre foto clara:
     #fdf9f6 (label) / bg-40% = 9.23:1 AAA · #b0b5bd (nota) = 4.57:1 AA. ---------- */
.video-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 0; }
.video-play { background: linear-gradient(180deg, rgba(35,31,32,.55) 0%, rgba(35,31,32,.85) 40%, rgba(35,31,32,.95) 100%); z-index: 1; }
.video-play:hover { background: linear-gradient(180deg, rgba(35,31,32,.45) 0%, rgba(35,31,32,.78) 40%, rgba(35,31,32,.90) 100%); }

/* ============================================================
   AJUSTES APROVADOS 2026-05-17 (painel agentes + ui-designer)
   ============================================================ */

/* ---- MUD.1 — Dores×Soluções: compacta ~30% + solução premiada + pill ---- */
.pain-card { padding: var(--space-4); }
.pain-card .dor p { font-size: var(--text-body-lg); font-weight: var(--fw-semibold); color: var(--color-text-primary); line-height: var(--lh-snug); margin: var(--space-2) 0 0; }
.pain-card hr { margin: var(--space-3) 0; }
.pain-card .sol {
  background: var(--color-earth-50); border-left: 3px solid var(--color-brand-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
  /* Transição no estado-base garante tanto hover-in quanto hover-out e é
     coberta pelo @media (prefers-reduced-motion: reduce) global (* rule). */
  transition: background var(--duration-fast) var(--ease-out);
}
.pain-card .sol p { font-size: var(--text-body-sm); line-height: var(--lh-base); margin: var(--space-2) 0 var(--space-3); }
.pain-card .pill {
  display: inline-flex; align-items: center; font-size: var(--text-caption); font-weight: var(--fw-bold);
  letter-spacing: .04em; color: var(--color-text-primary); background: var(--color-green-100);
  border: 1px solid var(--color-green-300); border-radius: var(--radius-full);
  padding: 3px 10px; margin: var(--space-2) 0 var(--space-1); white-space: nowrap;
}
.pain-card:hover .sol { background: var(--color-earth-100); }
.pain-card .idx { font-size: 1rem; color: var(--color-neutral-200); opacity: .6; }
.pain-card .tag-line { font-size: var(--text-label); }
@media (max-width: 400px) { .pain-card .pill { white-space: normal; } }

/* ---- MUD.2 — Como funciona: realce decorativo no hover (não toca step--highlight) ---- */
.step:not(.step--highlight) {
  border-left: 3px solid transparent; padding-left: calc(var(--space-5) - 3px);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-left-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .step:not(.step--highlight):hover {
    transform: scale(1.02); box-shadow: var(--shadow-md);
    border-left-color: var(--color-brand-primary-strong); border-radius: var(--radius-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  .step:not(.step--highlight) { transition: none; }
  .step:not(.step--highlight):hover { transform: none; box-shadow: none; }
}

/* ---- MUD.3 — #contato: densidade −30% (copy intocada) ---- */
#contato.section { padding-block: var(--space-16); }
#contato .section-head { margin-bottom: var(--space-8); }
#contato .lead-form { max-width: 480px; margin-top: var(--space-8); padding: var(--space-6); }
#contato .field { margin-bottom: var(--space-3); }
#contato .form-secure { margin-top: var(--space-2); }
@media (max-width: 600px) { #contato .lead-form { max-width: 100%; padding: var(--space-5); } }

/* ---- AJUSTE A — Lojas: meta/links centralizados + zoom da foto no hover (2026-05-17) ---- */
.store .meta { text-align: center; }
.store-links { justify-content: center; }
.store img, .store .ph { transition: transform 400ms var(--ease-out), filter 400ms var(--ease-out); will-change: transform; }
@media (hover: hover) {
  .store:hover img, .store:hover .ph { transform: scale(1.06); filter: brightness(1.06) contrast(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .store { transition: none; }
  .store:hover { transform: none; box-shadow: var(--shadow-md); }
  /* will-change removido: compositing layer desnecessária quando motion desativado (WCAG 2.3.3 / best practice). */
  .store img, .store .ph { transition: none; will-change: auto; }
  .store:hover img, .store:hover .ph { transform: none; filter: none; }
}

/* ---- AJUSTE B — Dores: -20% adicionais de altura (2026-05-17) ---- */
.pain-card { padding: var(--space-3); overflow: hidden; }
.pain-card .dor p { font-size: 1rem; line-height: 1.2; margin: 6px 0 0; }
.pain-card hr { margin: 8px 0; }
.pain-card .sol { padding: 10px 10px 10px 14px; margin: 0 calc(var(--space-3) * -1) calc(var(--space-3) * -1); }
.pain-card .sol p { font-size: var(--text-body-sm); line-height: 1.45; margin: 6px 0 8px; }
.pain-card .pill { padding: 2px 10px; margin: 6px 0 2px; }
@media (min-width: 768px) { .pain-grid { gap: 16px; } }