/* =================================================================
   CAA do Zero à Implementação — Fga. Dra. Allessandra Fraga Da Ré
   styles-deferred.css
   Fonte de verdade dos design tokens + todos os estilos da página.
   Carregado via media="print" onload para não bloquear renderização.
   ================================================================= */

/* ================================================================
   0 — TOKENS (CSS Custom Properties)
   Nenhum valor hard-coded nos seletores abaixo — tudo referencia
   variáveis declaradas aqui.
   ================================================================ */
:root {
  /* --- NEUTROS — areia quente --- */
  --sand-50:  #faf6f0;
  --sand-100: #f4ece1;
  --sand-200: #ecdfd1;
  --sand-300: #ddccba;
  --sand-400: #c9b6a0;
  --surface:  #fffdf9;

  /* --- TINTA --- */
  --ink-900: #221f1b;
  --ink-700: #3b352e;
  --ink-500: #6b6258;
  --ink-300: #9a9085;

  /* --- VERDE DA MARCA --- */
  --green-50:  #eef4e3;
  --green-100: #dcebc3;
  --green-200: #c1dd96;
  --green-300: #a0cb69;
  --green-400: #80b449;
  --green-500: #669c3b;
  --green-600: #4f7d2e;
  --green-700: #3e6325;
  --green-800: #2f4c1f;
  --green-900: #223914;

  /* --- TERRACOTA --- */
  --terracotta-100: #fadfcd;
  --terracotta-300: #e6a47d;
  --terracotta-500: #cd6e40;
  --terracotta-600: #b3592e;
  --terracotta-700: #93481f;

  /* --- SEMÂNTICOS --- */
  --color-bg:           var(--sand-50);
  --color-surface:      var(--surface);
  --color-text:         var(--ink-900);
  --color-text-muted:   var(--ink-500);
  --color-primary:      var(--green-700);
  --color-primary-dark: var(--green-900);
  --color-accent:       var(--terracotta-500);
  --color-accent-dark:  var(--terracotta-600);
  --color-border:       #e6dac9;
  --color-border-soft:  #efe6d8;

  /* --- CATEGORIAS CAA (Fitzgerald Key adaptado) --- */
  --cat-pessoas-bg:     #fbe6ad;
  --cat-pessoas-bg-h:   #f7dc90;
  --cat-pessoas-border: #e0a52f;
  --cat-pessoas-icon:   #a4720e;
  --cat-pessoas-text:   #5b4310;

  --cat-verbos-bg:      #dcebc3;
  --cat-verbos-bg-h:    #cfe2af;
  --cat-verbos-border:  #669c3b;
  --cat-verbos-icon:    #3e6325;
  --cat-verbos-text:    #2b4017;

  --cat-subst-bg:       #fbdcc2;
  --cat-subst-bg-h:     #f6cba6;
  --cat-subst-border:   #d97a44;
  --cat-subst-icon:     #bd5a2a;
  --cat-subst-text:     #6e3823;

  --cat-descr-bg:       #fbdcc2;
  --cat-descr-bg-h:     #f6cba6;
  --cat-descr-border:   #d97a44;
  --cat-descr-icon:     #bd5a2a;
  --cat-descr-text:     #6e3823;

  --cat-social-bg:      #f6d7e1;
  --cat-social-bg-h:    #efc4d4;
  --cat-social-border:  #d57fa4;
  --cat-social-icon:    #b15580;
  --cat-social-text:    #5d3a4c;

  --cat-misc-bg:        #ece4d7;
  --cat-misc-bg-h:      #e0d6c5;
  --cat-misc-border:    #b0a087;
  --cat-misc-icon:      #7a6c58;
  --cat-misc-text:      #483f33;

  /* --- TIPOGRAFIA --- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --text-hero:    clamp(2.8rem, 5.5vw, 4.8rem);
  --text-h1:      clamp(2.2rem, 4vw, 3.2rem);
  --text-h2:      clamp(1.75rem, 2.8vw, 2.4rem);
  --text-h3:      1.5rem;
  --text-body-lg: 1.25rem;
  --text-body:    1.0625rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-label:   0.6875rem;

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-label:   0.08em;
  --ls-eyebrow: 0.16em;

  /* --- ESPAÇAMENTO base 4px --- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-10: 40px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;

  --container-max: 1200px;
  --gutter: 24px;

  /* --- RAIO --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 100px;

  /* --- SOMBRAS --- */
  --shadow-sm:    0 1px 2px rgba(45,32,20,.06), 0 1px 3px rgba(45,32,20,.04);
  --shadow-md:    0 4px 14px rgba(45,32,20,.08), 0 2px 5px rgba(45,32,20,.05);
  --shadow-lg:    0 16px 44px rgba(45,32,20,.11), 0 5px 12px rgba(45,32,20,.05);
  --shadow-green: 0 14px 36px rgba(38,48,29,.22);

  /* --- MOTION --- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  180ms;
  --dur-mid:   400ms;
  --dur-slow:  650ms;
  --stagger:   350ms;
}

/* ================================================================
   1 — BASE / RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--green-200); color: var(--green-900); }

/* ================================================================
   2 — LAYOUT HELPERS
   ================================================================ */
.ctx {
  padding: clamp(var(--space-12), 7vw, var(--space-24))
           clamp(var(--space-6), 5vw, var(--space-20));
}
.ctx-inner { max-width: var(--container-max); margin: 0 auto; }

/* ================================================================
   3 — TIPOGRAFIA UTILITÁRIA
   ================================================================ */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}
.serif  { font-family: var(--font-display); }
.it     { font-style: italic; }
.hl-green   { color: var(--green-600); }
.hl-terra   { color: var(--terracotta-600); }
.hl-green-d { color: var(--green-300); }
.hl-terra-d { color: var(--terracotta-300); }

.ctx-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--terracotta-100);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
}

/* ================================================================
   4 — CATEGORIAS CAA — mapeamento de variáveis via data-cat
   ================================================================ */
.caa-card, .caa-chip, .cta-bigcard {
  --bg:  var(--cat-misc-bg);
  --bgh: var(--cat-misc-bg-h);
  --bd:  var(--cat-misc-border);
  --ic:  var(--cat-misc-icon);
  --tx:  var(--cat-misc-text);
}
[data-cat="pessoas"] { --bg: var(--cat-pessoas-bg); --bgh: var(--cat-pessoas-bg-h); --bd: var(--cat-pessoas-border); --ic: var(--cat-pessoas-icon); --tx: var(--cat-pessoas-text); }
[data-cat="verbos"]  { --bg: var(--cat-verbos-bg);  --bgh: var(--cat-verbos-bg-h);  --bd: var(--cat-verbos-border);  --ic: var(--cat-verbos-icon);  --tx: var(--cat-verbos-text); }
[data-cat="subst"]   { --bg: var(--cat-subst-bg);   --bgh: var(--cat-subst-bg-h);   --bd: var(--cat-subst-border);   --ic: var(--cat-subst-icon);   --tx: var(--cat-subst-text); }
[data-cat="descr"]   { --bg: var(--cat-descr-bg);   --bgh: var(--cat-descr-bg-h);   --bd: var(--cat-descr-border);   --ic: var(--cat-descr-icon);   --tx: var(--cat-descr-text); }
[data-cat="social"]  { --bg: var(--cat-social-bg);  --bgh: var(--cat-social-bg-h);  --bd: var(--cat-social-border);  --ic: var(--cat-social-icon);  --tx: var(--cat-social-text); }
[data-cat="misc"]    { --bg: var(--cat-misc-bg);    --bgh: var(--cat-misc-bg-h);    --bd: var(--cat-misc-border);    --ic: var(--cat-misc-icon);    --tx: var(--cat-misc-text); }

/* ================================================================
   5 — CAA-CHIP (pictograma pequeno — hero strip)
   ================================================================ */
.caa-chip {
  width: 84px;
  height: 92px;
  flex: 0 0 auto;
  background: var(--bg);
  border: 2px solid var(--bd);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px 7px;
  color: var(--tx);
  box-shadow: var(--shadow-sm);
}
.caa-chip .glyph { width: 34px; height: 34px; color: var(--ic); }
.caa-chip .lbl {
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  line-height: 1;
}

/* ================================================================
   6 — CAA-CARD (card de módulo — grade de prancha)
   ================================================================ */
.caa-card {
  position: relative;
  background: var(--bg);
  border: 2px solid var(--bd);
  border-radius: var(--radius-md);
  padding: 18px var(--space-6);
  color: var(--tx);
  text-align: left;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ic num" "ic name" "desc desc";
  column-gap: var(--space-4);
  row-gap: 2px;
  align-items: center;
  min-height: 120px;
  transition:
    transform var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    background var(--dur-fast) ease;
}
.caa-card .mod-num {
  grid-area: num;
  align-self: end;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ic);
}
.caa-card .glyph {
  grid-area: ic;
  width: 40px;
  height: 40px;
  color: var(--ic);
  align-self: center;
  background: rgba(255,255,255,.55);
  border: 1.5px solid var(--bd);
  border-radius: var(--radius-sm);
  padding: 7px;
  box-sizing: content-box;
}
.caa-card .mod-name {
  grid-area: name;
  align-self: start;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.caa-card .mod-desc {
  grid-area: desc;
  font-size: var(--text-caption);
  line-height: 1.55;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity var(--dur-fast) ease,
    max-height var(--dur-mid) var(--ease-soft),
    margin-top var(--dur-mid) var(--ease-soft);
}
.caa-card:hover {
  transform: translateY(-4px);
  background: var(--bgh);
  box-shadow: var(--shadow-md);
}
.caa-card:hover .mod-desc {
  opacity: 1;
  max-height: 160px;
  margin-top: var(--space-4);
}
.caa-card:focus-visible { outline: 3px solid var(--bd); outline-offset: 3px; }

/* ================================================================
   7 — BOTÕES
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  padding: 14px 28px;
  line-height: 1;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast),
    color var(--dur-fast),
    transform var(--dur-fast),
    box-shadow var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn svg, .btn .glyph { width: 18px; height: 18px; pointer-events: none; }

.btn--primary { background: var(--green-900); color: var(--sand-50); }
.btn--primary:hover { background: #1d2616; box-shadow: var(--shadow-md); }

.btn--accent  { background: var(--terracotta-500); color: #fff; }
.btn--accent:hover { background: var(--terracotta-600); box-shadow: var(--shadow-md); }

.btn--secondary {
  background: transparent;
  border-color: var(--green-700);
  color: var(--green-800);
}
.btn--secondary:hover { background: var(--green-50); }

.btn--secondary-light {
  background: transparent;
  border-color: rgba(244,236,225,.45);
  color: var(--sand-100);
}
.btn--secondary-light:hover { background: rgba(244,236,225,.08); }

.btn--lg { padding: 18px 38px; font-size: var(--text-body-lg); }
.btn--sm { padding: 10px 20px; font-size: var(--text-body-sm); }

/* ================================================================
   8 — BADGES
   ================================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  font-weight: 600;
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  color: var(--green-800);
}
.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.badge .glyph { width: 14px; height: 14px; flex: 0 0 auto; }
.badge--accent { background: var(--terracotta-100); color: var(--terracotta-700); }
.badge--amber  { background: var(--cat-pessoas-bg); color: var(--cat-pessoas-text); }
.badge--live   { background: var(--terracotta-100); color: var(--terracotta-700); }
.badge--live .dot { background: var(--terracotta-500); animation: live-pulse 1.6s ease infinite; }

@keyframes live-pulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ================================================================
   9 — DEPOIMENTOS
   ================================================================ */
.testimonial {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.testimonial--placeholder {
  background: var(--sand-100);
  border-style: dashed;
  border-color: var(--color-border);
}
.testimonial .quote-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 4rem;
  line-height: .6;
  color: var(--terracotta-300);
}
.testimonial .quote {
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--ink-700);
}
.testimonial .quote .serif { font-style: italic; color: var(--green-700); }
.testimonial .person { display: flex; align-items: center; gap: var(--space-4); }
.testimonial .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--green-200);
  color: var(--green-800);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--text-body-sm);
}
.testimonial .avatar--placeholder {
  background: var(--sand-300);
  color: var(--ink-500);
}
.testimonial .person-name { font-weight: 700; font-size: var(--text-body-sm); }
.testimonial .person-role { font-size: var(--text-caption); color: var(--color-text-muted); }

/* ================================================================
   10 — ACCORDION / FAQ
   ================================================================ */
.faq { max-width: var(--container-max); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h3);
  color: var(--color-text);
  line-height: 1.3;
  cursor: pointer;
}
.faq-icon { flex: 0 0 auto; width: 28px; height: 28px; position: relative; }
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--green-700);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-mid) var(--ease-expo), opacity var(--dur-fast);
}
.faq-icon::before { width: 16px; height: 2px; }
.faq-icon::after  { width: 2px;  height: 16px; }
.faq-item.open .faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-expo); }
.faq-a-inner {
  padding: 0 4px var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-body);
}

/* ================================================================
   11 — GRID HELPERS
   ================================================================ */
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-6); }

/* ================================================================
   12 — ANIMAÇÕES
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-expo), transform var(--dur-slow) var(--ease-expo);
}
.reveal.in { opacity: 1; transform: none; }

.stagger-enter { opacity: 0; transform: translateY(16px); }
.stagger-enter.in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-mid) var(--ease-expo), transform var(--dur-mid) var(--ease-expo);
}

@keyframes cta-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(205,110,64,.45); }
  70%  { box-shadow: 0 0 0 18px rgba(205,110,64,0); }
  100% { box-shadow: 0 0 0 0 rgba(205,110,64,0); }
}
.pulse { animation: cta-pulse 2s ease infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger-enter { opacity: 1; transform: none; transition: none; }
  .pulse, .badge--live .dot { animation: none; }
}

/* ================================================================
   13 — GLYPH / SVG
   ================================================================ */
.glyph { display: inline-flex; align-items: center; justify-content: center; }
.glyph svg { width: 100%; height: 100%; display: block; }
.glyph img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* ================================================================
   14 — SEÇÃO: HERO
   ================================================================ */
.sec-hero {
  background: var(--sand-50);
  position: relative;
  overflow: hidden;
  padding: clamp(var(--space-8), 4.5vw, var(--space-16))
           clamp(var(--space-6), 5vw, var(--space-20));
}
.sec-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 88% 12%, rgba(109,122,71,.10), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(192,113,76,.08), transparent 70%);
  pointer-events: none;
}
.hero-inner { max-width: var(--container-max); margin: 0 auto; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.38fr 1fr;
  gap: clamp(var(--space-8), 4vw, 64px);
  align-items: center;
  position: relative;
}
.hero-eyebrow {
  margin-bottom: var(--space-6);
  line-height: 1.3;
}
.hero-eyebrow .eyebrow-title {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  letter-spacing: .03em;
}
.hero-eyebrow .eyebrow-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-body);
  color: var(--green-700);
  letter-spacing: var(--ls-tight);
}
.hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-6);
  text-wrap: balance;
  color: var(--color-text);
}
.hero-copy h1 em { font-style: italic; color: var(--green-700); }
.hero-sub {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  line-height: 1.6;
}
.hero-chip-strip {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-8);
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero-media { position: relative; }
.hero-photo::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 130px;
  background: linear-gradient(to top, rgba(250,246,240,.88) 0%, transparent 100%);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  pointer-events: none;
}
.hero-media .hero-chip-strip {
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  margin-bottom: 0;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
  z-index: 2;
}
.hero-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--surface);
  aspect-ratio: 4/5;
  background: var(--sand-200);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-float {
  position: absolute;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}
.hero-float--1 { left: -28px; top: 18%; }
.hero-float--2 { right: -22px; bottom: 14%; }
.hero-badge-card {
  position: absolute;
  left: -34px;
  bottom: 8%;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 270px;
}
.hero-badge-card .ring {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
}
.hero-badge-card .ring .glyph { width: 22px; height: 22px; }
.hero-badge-card .badge-text { line-height: 1.25; }
.hero-badge-card b  { font-size: var(--text-body-sm); display: block; }
.hero-badge-card span { font-size: var(--text-caption); color: var(--color-text-muted); }

/* ================================================================
   15 — SEÇÃO: DOR / IDENTIFICAÇÃO
   ================================================================ */
.sec-dor { background: var(--sand-100); }
.sec-dor .dor-inner { max-width: var(--container-max); }
.sec-dor h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-8);
}
.sec-dor p {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.65;
}
.sec-dor p:last-child { margin-bottom: 0; }
.sec-dor .dor-destaque {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3);
  color: var(--green-700);
  border-left: 3px solid var(--terracotta-300);
  padding-left: var(--space-6);
  margin: var(--space-8) 0 0;
  line-height: 1.45;
}

/* ================================================================
   16 — SEÇÃO: APRESENTAÇÃO DO CURSO
   ================================================================ */
.sec-curso { background: var(--sand-50); }
.sec-curso .curso-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, 72px);
  align-items: center;
}
.sec-curso h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-6);
}
.sec-curso h2 em { font-style: italic; color: var(--terracotta-600); }
.sec-curso p {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.65;
}
.curso-promises { display: flex; flex-direction: column; gap: var(--space-4); }
.curso-promise-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) var(--space-6);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-left: 3px solid var(--green-500);
  border-radius: var(--radius-md);
}
.curso-promise-item .check-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-500);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.curso-promise-item .check-icon .glyph { width: 13px; height: 13px; }
.curso-promise-item p {
  font-size: var(--text-body);
  color: var(--ink-700);
  font-weight: 500;
  margin: 0;
}

/* ================================================================
   17 — SEÇÃO: PARA QUEM É
   ================================================================ */
.sec-paraquem { background: var(--green-900); color: var(--sand-100); }
.sec-paraquem .head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-12);
}
.sec-paraquem .head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: #fff;
  margin-bottom: var(--space-4);
}
.sec-paraquem .head h2 em { font-style: italic; color: var(--terracotta-300); }
.perfil-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}
.perfil-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(244,236,225,.14);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.perfil-card .perfil-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.1);
  display: grid;
  place-items: center;
  color: var(--terracotta-300);
}
.perfil-card .perfil-icon .glyph { width: 22px; height: 22px; }
.perfil-card p {
  font-size: var(--text-body);
  color: rgba(244,236,225,.85);
  line-height: 1.6;
}
.perfil-card p strong {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-2);
}
.paraquem-fechamento {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3);
  color: var(--terracotta-300);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.5;
}

/* ================================================================
   18 — SEÇÃO: MÓDULOS (prancha CAA)
   ================================================================ */
.sec-modulos { background: var(--sand-100); }
.modulos-head { max-width: 640px; margin: 0 auto var(--space-12); text-align: center; }
.modulos-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}
.modulos-head h2 em { font-style: italic; color: var(--green-700); }
.modulos-head p { font-size: var(--text-body-lg); color: var(--color-text-muted); }
.modulos-meta {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.hint {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hint .glyph { width: 15px; height: 15px; color: var(--terracotta-500); }
.sec-modulos .grid-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
  gap: var(--space-6);
}
.sec-modulos .grid-4 .caa-card { flex: 0 0 calc(25% - 18px); }

/* ================================================================
   19 — SEÇÃO: ANTES E DEPOIS
   ================================================================ */
.sec-transformacao { background: var(--sand-50); }
.transformacao-head { text-align: center; max-width: 560px; margin: 0 auto var(--space-12); }
.transformacao-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}
.transformacao-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
.antes-card, .depois-card {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}
.antes-card {
  background: var(--sand-100);
  border: 1px solid var(--color-border);
}
.depois-card {
  background: var(--green-900);
  color: var(--sand-100);
}
.card-label {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.antes-card .card-label { color: var(--color-text-muted); }
.depois-card .card-label { color: var(--terracotta-300); }
.card-label .glyph { width: 18px; height: 18px; }
.antes-card p { color: var(--color-text-muted); font-size: var(--text-body); line-height: 1.7; }
.depois-card p { color: rgba(244,236,225,.88); font-size: var(--text-body); line-height: 1.7; }
.transformacao-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta-500);
}
.transformacao-arrow .glyph { width: 32px; height: 32px; }
.transformacao-fechamento {
  text-align: center;
  margin-top: var(--space-10);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-h3);
  color: var(--green-700);
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.5;
}
.transformacao-fechamento::before { content: "\201C"; }
.transformacao-fechamento::after  { content: "\201D"; }

/* ================================================================
   20 — SEÇÃO: SOBRE (AUTORIDADE)
   ================================================================ */
.sec-sobre {
  background: var(--green-900);
  color: var(--sand-100);
  padding-top: clamp(var(--space-8), 4.5vw, var(--space-16));
  padding-bottom: clamp(var(--space-8), 4.5vw, var(--space-16));
}
.sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1.38fr;
  gap: clamp(var(--space-8), 4vw, 64px);
  align-items: center;
}
.sobre-photo {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  background: var(--green-800);
}
.sobre-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sobre-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-6);
  color: #fff;
}
.sobre-body h2 em { font-style: italic; color: var(--terracotta-300); }
.sobre-body p {
  color: rgba(244,236,225,.82);
  font-size: var(--text-body-lg);
  margin-bottom: var(--space-6);
  line-height: 1.65;
}
.sobre-quote {
  border-left: 3px solid var(--terracotta-500);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--terracotta-300);
  line-height: 1.5;
}
.sobre-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.sobre-stat .n {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}
.sobre-stat .l {
  font-size: var(--text-caption);
  color: rgba(244,236,225,.6);
  margin-top: 6px;
}

/* ================================================================
   21 — SEÇÃO: URGÊNCIA / VAGAS
   ================================================================ */
.sec-urgencia { background: var(--sand-100); }
.urgencia-box {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--terracotta-500);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  max-width: 760px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.urgencia-box .eyebrow { margin-bottom: var(--space-4); display: block; }
.urgencia-box h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-6);
}
.urgencia-box h2 em { font-style: italic; color: var(--terracotta-600); }
.urgencia-box p {
  font-size: var(--text-body-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.65;
}
.urgencia-box .cta-wrap {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.urgencia-box .sub-note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ================================================================
   22 — SEÇÃO: OFERTA
   ================================================================ */
.sec-oferta { background: var(--sand-50); }
.oferta-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-12);
}
.oferta-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}
.oferta-head h2 em { font-style: italic; color: var(--terracotta-600); }
.oferta-head p { font-size: var(--text-body-lg); color: var(--color-text-muted); }

/* Container escuro oferta — 2 colunas: conteúdo + foto */
.offer {
  background: var(--green-900);
  color: var(--sand-100);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-10), 5vw, var(--space-16)) clamp(var(--space-8), 5vw, var(--space-16));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center;
  box-shadow: var(--shadow-green);
  position: relative;
  overflow: hidden;
}
.offer-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.offer-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  width: 100%;
}
.offer-block .ctx-tag { margin-bottom: 0; }
.offer-block--cta { gap: var(--space-3); }
.offer-block--cta .btn { width: 100%; }
.offer-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: #fff;
}
.offer-subtitle {
  font-size: var(--text-body);
  color: rgba(244,236,225,.72);
  line-height: 1.6;
}
.offer-photo-col {
  /* sem position: relative — quem posiciona os chips é o frame */
}
.offer-photo-frame {
  position: relative;
}
.offer-photo-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--surface);
  aspect-ratio: 4/5;
  background: var(--green-800);
}
.offer-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.offer-chip--aprender {
  position: absolute;
  left: -28px;
  top: 30%;
  z-index: 2;
}
.offer-chip--caa {
  position: absolute;
  right: -28px;
  top: 68%;
  z-index: 2;
}
.offer::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192,113,76,.22), transparent 70%);
  pointer-events: none;
}
.offer-list { display: flex; flex-direction: column; gap: var(--space-3); position: relative; width: 100%; }
.offer-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--text-body);
  color: rgba(244,236,225,.92);
}
.offer-list li.bonus { /* sem padding/margin extra — gap do flex já separa uniformemente */ }
.offer-check {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-500);
  color: #fff;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.offer-check .glyph { width: 13px; height: 13px; }
.offer-star {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--terracotta-600);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  margin-top: 1px;
}
.offer-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
  position: relative;
}
.offer-sep { height: 1px; background: rgba(244,236,225,.18); margin: var(--space-5) 0; width: 100%; }
.offer-content .offer-sep { margin: 0; }
.offer-price-label {
  font-size: var(--text-caption);
  color: rgba(244,236,225,.6);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.offer-price-group { display: flex; flex-direction: column; gap: 2px; }
.offer-price { display: flex; align-items: baseline; gap: 8px; }
.offer-price .cur {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--terracotta-300);
}
.offer-price .val {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 4.6rem);
  font-weight: 500;
  line-height: .9;
  color: #fff;
}
.offer-price-note { font-size: var(--text-caption); color: rgba(244,236,225,.6); }
.offer-vagas {
  font-size: var(--text-caption);
  color: var(--terracotta-300);
  display: flex;
  align-items: center;
  gap: 8px;
}
.offer-vagas .glyph { width: 15px; height: 15px; display: inline-flex; }
.offer-sub-note {
  font-size: var(--text-caption);
  color: rgba(244,236,225,.5);
  margin-top: var(--space-2);
  line-height: 1.6;
}
.offer-unlock {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(244,236,225,.18);
  text-align: center;
}
.offer-unlock-cards {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
  justify-content: center;
}
.offer-unlock-hint {
  font-size: var(--text-caption);
  color: rgba(244,236,225,.55);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.offer-unlock-hint::before { content: "↓"; color: var(--terracotta-300); }

/* ================================================================
   23 — SEÇÃO: DEPOIMENTOS
   ================================================================ */
.sec-depoimentos { background: var(--sand-100); }
.depoimentos-head { margin-bottom: var(--space-10); }
.depoimentos-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}
.depoimentos-head h2 em { font-style: italic; color: var(--green-700); }
.placeholder-notice {
  background: var(--sand-200);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  display: inline-block;
}

/* ================================================================
   24 — SEÇÃO: FAQ
   ================================================================ */
.sec-faq { background: var(--sand-50); }
.faq-head { margin-bottom: var(--space-10); }
.faq-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
}

/* ================================================================
   25 — SEÇÃO: CTA FINAL
   ================================================================ */
.sec-cta-final {
  background: var(--green-900);
  color: var(--sand-100);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sec-cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(109,122,71,.20), transparent 70%);
  pointer-events: none;
}
.cta-inner { position: relative; max-width: 920px; margin: 0 auto; }
.cta-phrase {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
  justify-content: center;
  margin: 0 auto var(--space-12);
}
.cta-bigcard {
  --bg: var(--cat-misc-bg);
  --bd: var(--cat-misc-border);
  --ic: var(--cat-misc-icon);
  --tx: var(--cat-misc-text);
  width: clamp(110px, 16vw, 160px);
  aspect-ratio: 1/1.08;
  background: var(--bg);
  border: 3px solid var(--bd);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--tx);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  font-family: inherit;
}
.cta-bigcard:hover { transform: translateY(-6px) rotate(-1deg); }
.cta-bigcard .glyph {
  width: clamp(40px, 6.5vw, 60px);
  height: clamp(40px, 6.5vw, 60px);
  color: var(--ic);
}
.cta-bigcard .lbl {
  font-size: clamp(.75rem, 1.3vw, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cta-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-4);
  color: #fff;
}
.cta-headline em { font-style: italic; color: var(--terracotta-300); }
.cta-sub {
  color: rgba(244,236,225,.78);
  font-size: var(--text-body-lg);
  margin-bottom: var(--space-10);
  max-width: 72ch;
  margin-inline: auto;
  line-height: 1.6;
}
.cta-speech-bar {
  min-height: 36px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--terracotta-300);
  margin-bottom: var(--space-6);
  line-height: 1.2;
  letter-spacing: .01em;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}
.cta-sub-note {
  font-size: var(--text-caption);
  color: rgba(244,236,225,.5);
  margin-top: var(--space-6);
}

.btn--locked {
  opacity: 0.28 !important;
  pointer-events: none;
  cursor: not-allowed;
  animation: none !important;
  filter: grayscale(0.4);
}
.cta-unlock-hint {
  font-size: var(--text-caption);
  color: rgba(244,236,225,.55);
  letter-spacing: .04em;
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cta-unlock-hint::before { content: "↓"; color: var(--terracotta-300); }

/* ================================================================
   26 — RODAPÉ
   ================================================================ */
.site-footer {
  background: var(--ink-900);
  color: rgba(244,236,225,.6);
  padding: var(--space-10) clamp(var(--space-6), 5vw, var(--space-20));
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--sand-100);
  font-weight: 500;
}
.footer-brand span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 400;
  color: rgba(244,236,225,.55);
  margin-top: 4px;
}
.footer-contact {
  font-size: var(--text-caption);
  text-align: right;
}
.footer-contact a {
  color: var(--terracotta-300);
  text-decoration: none;
}
.footer-contact a:hover { text-decoration: underline; }

/* ================================================================
   27 — RESPONSIVO
   ================================================================ */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .sec-modulos .grid-4 .caa-card { flex: 0 0 calc(50% - 12px); }
  .transformacao-grid { grid-template-columns: 1fr; }
  .transformacao-arrow { display: none; }
}
.hint-mobile { display: none; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 440px; margin: 0 auto; }
  .hero-photo { aspect-ratio: 1/1; }
  .hero-copy { padding-top: 52px; }
  .hero-eyebrow { margin-bottom: var(--space-2); }

  .sobre-grid { grid-template-columns: 1fr; }
  .sobre-photo { max-width: 380px; }

  .sec-curso .curso-grid { grid-template-columns: 1fr; }

  .offer { grid-template-columns: 1fr; }
  .offer-photo-wrap { max-width: 380px; margin: 0 auto; }
  .offer-photo-frame { max-width: 380px; margin: 0 auto; }
  .offer-unlock { grid-column: 1; }

  .perfil-grid { grid-template-columns: 1fr; }

  .hint-mobile { display: inline; }
  .hint-desktop { display: none; }
}
@media (max-width: 620px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .sec-modulos .grid-4 .caa-card { flex: 0 0 100%; }
  .caa-chip { width: 74px; height: 82px; }
  .hero-media .hero-chip-strip { flex-wrap: wrap; gap: var(--space-1); }
  .cta-bigcard { width: clamp(90px, 22vw, 130px); }
  .footer-contact { text-align: left; }
}