/* =====================================================================
   Deep Growth Agency — Arquitetura de Aquisição
   styles.css

   Ordem do ficheiro:
     1. Tokens (:root) ................ cores, tipografia, raios, medidas
     2. Reset e base .................. normalização e elementos globais
     3. Layout ........................ container, secções, header, footer
     4. Componentes ................... hero, dores, protocolo, timeline,
                                        blueprint, qualificação, FAQ,
                                        garantia, oferta, PS, modal, form
     5. Acessibilidade e estados ...... focus visível, erros, skip link
     6. Responsivo .................... 1024px / 768px / 390px

   As secções 1–4 e 6 reproduzem o protótipo aprovado sem alterações
   visuais. A secção 5 acrescenta apenas o que a versão funcional exige
   (foco de teclado, mensagens de erro, bloqueio de scroll do modal).
   ===================================================================== */

:root {
  --bg-page:#faf9f6;
  --bg-page-pure:#fff;
  --bg-sand-subtle:#f4f0ea;
  --bg-sand-muted:#ece7de;
  --bg-sand-highlight:#faf2eb;
  --bg-dark-deep:#0a1412;
  --bg-dark-surface:#0e1a17;
  --bg-dark-card:#132420;
  --bg-dark-card-hover:#192d28;
  --text-primary:#0c1513;
  --text-secondary:#3d4844;
  --text-muted:#6c7874;
  --text-on-dark:#faf9f6;
  --text-on-dark-secondary:#a2b2ad;
  --text-on-dark-muted:#6e7f79;
  --accent-gold:#b85b28;
  --accent-gold-light:#ce6f39;
  --accent-gold-pale:#fbf2eb;
  --accent-gold-border:#b85b2840;
  --accent-gold-glow:#b85b281f;
  --border-subtle:#0c151312;
  --border-light:#0c15131f;
  --border-sand:#b85b282e;
  --border-dark:#ffffff14;
  --border-dark-gold:#b85b2861;
  --accent-check:#186e4f;
  --accent-cross:#9c3838;
  --font-serif:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", SFMono-Regular, Consolas, monospace;
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-full:9999px;
  --container-max:1140px;
  --container-narrow:840px
}

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

html {
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-color:var(--bg-page);
  color:var(--text-primary);
  font-size:16px;
  font-family:var(--font-sans)
}

body {
  background-color:var(--bg-page);
  min-height:100vh;
  color:var(--text-secondary);
  line-height:1.7;
  position:relative;
  overflow-x:hidden
}

.container {
  width:100%;
  max-width:var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:32px;
  padding-right:32px;
  position:relative
}

.container-narrow {
  max-width:var(--container-narrow)
}

h1,h2,h3,h4 {
  color:var(--text-primary);
  letter-spacing:-.025em;
  text-wrap:balance;
  font-weight:700;
  line-height:1.18
}

.serif-title {
  font-family:var(--font-serif);
  letter-spacing:-.02em;
  font-weight:400
}

.serif-title strong,.serif-title b {
  font-weight:700
}

.serif-title em {
  color:var(--accent-gold);
  font-style:italic;
  font-weight:400
}

p {
  color:var(--text-secondary);
  font-size:1.0625rem;
  line-height:1.72
}

.mono-num {
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em
}

.section {
  padding-top:120px;
  padding-bottom:120px;
  position:relative
}

.section-light {
  background:linear-gradient(180deg, #fff 0%, var(--bg-page) 100%);
  border-bottom:1px solid var(--border-subtle)
}

.section-sand {
  background:linear-gradient(180deg, var(--bg-page) 0%, var(--bg-sand-subtle) 50%, var(--bg-page) 100%);
  border-top:1px solid var(--border-sand);
  border-bottom:1px solid var(--border-sand)
}

.section-white {
  border-bottom:1px solid var(--border-subtle);
  background-color:#fff
}

.section-dark-contrast {
  color:var(--text-on-dark-secondary);
  background:radial-gradient(circle at 50% 0,#b85b281f 0%,#0000 65%),linear-gradient(#0d1a17 0%,#081210 100%);
  border-top:1px solid #b85b283d;
  border-bottom:1px solid #b85b283d
}

.section-dark-contrast h1,.section-dark-contrast h2,.section-dark-contrast h3,.section-dark-contrast h4 {
  color:var(--text-on-dark)
}

.section-lead {
  text-align:center;
  max-width:800px;
  margin:0 auto 64px
}

.section-lead-left {
  text-align:left;
  max-width:820px;
  margin:0 0 54px
}

.section-kicker {
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--accent-gold);
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  font-size:.75rem;
  font-weight:600;
  display:inline-flex
}

.section-kicker:before {
  content:"";
  background:var(--accent-gold);
  width:14px;
  height:1px;
  display:inline-block
}

.section-title {
  font-family:var(--font-serif);
  margin-bottom:20px;
  font-size:2.875rem;
  font-weight:400;
  line-height:1.18
}

.section-title em {
  color:var(--accent-gold);
  font-style:italic
}

.section-subtitle {
  color:var(--text-secondary);
  max-width:620px;
  margin:0 auto;
  font-size:1.1875rem
}

.section-dark-contrast .section-subtitle {
  color:var(--text-on-dark-secondary)
}

.site-header {
  -webkit-backdrop-filter:blur(10px);
  z-index:100;
  background:#faf9f6f0;
  border-bottom:1px solid #0c15130f;
  width:100%;
  padding:22px 24px;
  transition:all .18s;
  position:sticky;
  top:0
}

.brand-mark {
  text-align:center;
  -webkit-user-select:none;
  user-select:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  display:flex
}

.brand-title {
  font-family:var(--font-serif);
  letter-spacing:-.015em;
  color:var(--text-primary);
  font-size:1.375rem;
  font-weight:700;
  line-height:1.15
}

.brand-subtitle {
  font-family:var(--font-mono);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent-gold);
  padding-left:.28em;
  font-size:.6875rem;
  font-weight:600;
  line-height:1
}

.hero-section {
  background:radial-gradient(at 50% 15%,#b85b280f 0%,#0000 60%),linear-gradient(#fff 0%,#faf9f6 100%);
  padding-top:110px;
  padding-bottom:120px;
  position:relative;
  overflow:hidden
}

.hero-section:before {
  content:"";
  pointer-events:none;
  opacity:.8;
  background-image:linear-gradient(90deg,#0c151305 1px,#0000 1px),linear-gradient(#0c151305 1px,#0000 1px);
  background-size:60px 60px;
  width:100%;
  max-width:1200px;
  height:100%;
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%)
}

.hero-content {
  text-align:center;
  z-index:2;
  max-width:900px;
  margin:0 auto;
  position:relative
}

.hero-headline {
  font-family:var(--font-serif);
  letter-spacing:-.025em;
  color:#0a1311;
  margin-bottom:28px;
  font-size:4.125rem;
  font-weight:400;
  line-height:1.1
}

.hero-headline em {
  color:var(--accent-gold);
  font-style:italic;
  font-weight:400
}

.hero-subheadline {
  color:#384542;
  max-width:730px;
  margin:0 auto 36px;
  font-size:1.375rem;
  font-weight:400;
  line-height:1.58
}

.hero-value-badge {
  border:1px solid var(--border-sand);
  border-left:3px solid var(--accent-gold);
  border-radius:var(--radius-sm);
  text-align:left;
  background:#fff;
  align-items:center;
  margin-bottom:42px;
  padding:16px 26px;
  display:inline-flex;
  box-shadow:0 4px 20px #b85b280f
}

.hero-value-text {
  color:var(--text-primary);
  font-size:1.0625rem;
  font-weight:600
}

.hero-cta-wrapper {
  flex-direction:column;
  align-items:center;
  gap:14px;
  display:flex
}

.hero-support-text {
  font-family:var(--font-mono);
  color:var(--text-muted);
  font-size:.875rem
}

.btn-cta {
  color:#faf9f6;
  font-family:var(--font-sans);
  letter-spacing:-.01em;
  border-radius:var(--radius-sm);
  cursor:pointer;
  white-space:nowrap;
  background-color:#0a1513;
  border:1px solid #1c2b27;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:19px 40px;
  font-size:1.0625rem;
  font-weight:600;
  text-decoration:none;
  transition:all .2s cubic-bezier(.16,1,.3,1);
  display:inline-flex;
  position:relative;
  overflow:hidden;
  box-shadow:0 6px 18px #0a15132e
}

.btn-cta:after {
  content:"";
  pointer-events:none;
  background:linear-gradient(#ffffff14 0%,#0000 100%);
  position:absolute;
  inset:0
}

.btn-cta:hover {
  border-color:var(--accent-gold);
  background-color:#142421;
  transform:translateY(-2px);
  box-shadow:0 10px 28px #b85b283d
}

.btn-cta:active {
  transform:translateY(0)
}

.btn-cta svg {
  color:var(--accent-gold);
  transition:transform .16s
}

.btn-cta:hover svg {
  transform:translate(4px)
}

.pain-stream {
  flex-direction:column;
  gap:18px;
  max-width:920px;
  margin:0 auto 52px;
  display:flex
}

.pain-item {
  border-radius:var(--radius-md);
  background:#101c19bf;
  border:1px solid #ffffff14;
  grid-template-columns:48px 1fr;
  align-items:baseline;
  gap:24px;
  padding:30px 36px;
  transition:transform .18s,border-color .18s,background-color .18s;
  display:grid
}

.pain-item:hover {
  border-color:var(--border-dark-gold);
  background:#162622e0;
  transform:translate(4px)
}

.pain-num {
  font-family:var(--font-mono);
  color:var(--accent-gold);
  opacity:.95;
  font-size:1.125rem;
  font-weight:700
}

.pain-desc {
  color:#f2f5f4;
  font-size:1.25rem;
  font-weight:400;
  line-height:1.6
}

.pain-conclusion {
  border:1px solid var(--border-dark-gold);
  border-radius:var(--radius-md);
  text-align:center;
  background:linear-gradient(135deg,#142420eb 0%,#0c1613eb 100%);
  max-width:920px;
  margin:0 auto;
  padding:44px 36px;
  box-shadow:0 12px 36px #00000061
}

.pain-conclusion-text {
  font-family:var(--font-serif);
  color:#fff;
  letter-spacing:-.015em;
  font-size:2.125rem;
  font-weight:400;
  line-height:1.35
}

.pain-conclusion-text em {
  color:var(--accent-gold-light);
  font-style:italic
}

.reframe-wrapper {
  max-width:820px;
  margin:0 auto
}

.reframe-title {
  font-family:var(--font-serif);
  color:var(--text-primary);
  margin-bottom:38px;
  font-size:2.875rem;
  font-weight:400;
  line-height:1.2
}

.reframe-body p {
  color:#384542;
  margin-bottom:28px;
  font-size:1.25rem;
  line-height:1.8
}

.reframe-highlight-box {
  border-left:4px solid var(--accent-gold);
  border-top:1px solid var(--border-sand);
  border-right:1px solid var(--border-sand);
  border-bottom:1px solid var(--border-sand);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:#fff;
  margin-top:44px;
  padding:34px 40px;
  box-shadow:0 6px 24px #b85b280f
}

.reframe-highlight-text {
  font-family:var(--font-serif);
  color:var(--text-primary);
  font-size:1.625rem;
  font-weight:400;
  line-height:1.45
}

.reframe-highlight-text em {
  color:var(--accent-gold);
  font-style:italic
}

.protocol-fluid-card {
  border:1px solid var(--border-sand);
  border-radius:var(--radius-lg);
  background:#fff;
  padding:52px;
  box-shadow:0 12px 36px #b85b280d
}

.protocol-start-growth-header {
  border-radius:var(--radius-sm);
  background:linear-gradient(90deg,#fbf2eb 0%,#f7eae0 100%);
  border:1px solid #b85b284d;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:32px;
  padding:16px 24px;
  display:flex
}

.start-growth-title-tag {
  font-family:var(--font-mono);
  color:var(--accent-gold);
  letter-spacing:.1em;
  text-transform:uppercase;
  align-items:center;
  gap:8px;
  font-size:.8125rem;
  font-weight:700;
  display:flex
}

.start-growth-title-tag:before {
  content:"";
  background:var(--accent-gold);
  border-radius:50%;
  width:8px;
  height:8px;
  display:inline-block
}

.start-growth-desc-tag {
  color:#42504c;
  font-size:.9375rem;
  font-weight:600
}

.protocol-ribbon-grid {
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:40px;
  display:grid;
  position:relative
}

.protocol-ribbon-stage {
  background:var(--bg-page);
  border:1px solid var(--border-light);
  border-radius:var(--radius-md);
  flex-direction:column;
  padding:34px 24px;
  transition:all .18s;
  display:flex;
  position:relative
}

.protocol-ribbon-stage.is-start-growth {
  background:#faf3ec;
  border-color:#b85b2859;
  box-shadow:0 4px 16px #b85b280d
}

.protocol-ribbon-stage:hover {
  border-color:var(--accent-gold);
  transform:translateY(-2px)
}

.stage-badge-num {
  font-family:var(--font-mono);
  color:var(--text-primary);
  margin-bottom:18px;
  font-size:2.25rem;
  font-weight:800;
  line-height:1
}

.protocol-ribbon-stage.is-start-growth .stage-badge-num {
  color:var(--accent-gold)
}

.stage-heading {
  font-family:var(--font-serif);
  color:var(--text-primary);
  margin-bottom:10px;
  font-size:1.4375rem;
  font-weight:700
}

.stage-explanation {
  color:var(--text-secondary);
  font-size:.9375rem;
  line-height:1.5
}

.stage-fluid-arrow {
  border:1px solid var(--border-sand);
  width:26px;
  height:26px;
  color:var(--accent-gold);
  z-index:2;
  background:#fff;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  font-size:.75rem;
  display:flex;
  position:absolute;
  top:48px;
  right:-14px;
  box-shadow:0 2px 6px #0000000d
}

.protocol-footer-statement {
  background:var(--bg-page);
  border-top:1px solid var(--border-sand);
  border-radius:var(--radius-sm);
  text-align:center;
  padding:26px 30px
}

.protocol-footer-text {
  font-family:var(--font-serif);
  color:var(--text-primary);
  font-size:1.1875rem;
  font-weight:400;
  line-height:1.6
}

.christian-editorial-layout {
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:60px;
  display:grid
}

.christian-editorial-quote {
  font-family:var(--font-serif);
  color:#121a18;
  margin-top:18px;
  font-size:1.625rem;
  font-weight:400;
  line-height:1.65
}

.christian-editorial-quote em {
  color:var(--accent-gold);
  font-style:italic
}

.timeline-pathway {
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:stretch;
  gap:16px;
  margin-bottom:48px;
  display:grid
}

.timeline-station {
  border:1px solid var(--border-sand);
  border-radius:var(--radius-md);
  background:#fff;
  flex-direction:column;
  padding:38px 30px;
  transition:transform .18s,box-shadow .18s;
  display:flex;
  box-shadow:0 4px 18px #b85b280a
}

.timeline-station:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 26px #b85b2814
}

.timeline-station-step {
  font-family:var(--font-mono);
  color:var(--accent-gold);
  letter-spacing:.04em;
  margin-bottom:10px;
  font-size:.8125rem;
  font-weight:700
}

.timeline-station-title {
  font-family:var(--font-serif);
  color:var(--text-primary);
  margin-bottom:14px;
  font-size:1.625rem;
  font-weight:700
}

.timeline-station-pill {
  font-family:var(--font-mono);
  color:#384542;
  background:var(--bg-sand-subtle);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-full);
  width:fit-content;
  padding:6px 14px;
  font-size:.9375rem;
  font-weight:600
}

.timeline-flow-connector {
  color:var(--accent-gold);
  justify-content:center;
  align-items:center;
  font-size:1.5rem;
  display:flex
}

.timeline-disclaimer-card {
  border:1px solid var(--border-sand);
  border-left:4px solid var(--text-primary);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:#fff;
  padding:34px 38px;
  box-shadow:0 4px 16px #00000008
}

.timeline-disclaimer-text {
  font-family:var(--font-serif);
  color:var(--text-primary);
  font-size:1.25rem;
  font-weight:400;
  line-height:1.65
}

.blueprint-sheet-card {
  border:1px solid var(--border-sand);
  border-radius:var(--radius-md);
  background:#fff radial-gradient(circle at 1px 1px,#b85b2814 1px,#0000 0) 0 0/24px 24px;
  margin-bottom:56px;
  padding:44px;
  position:relative;
  box-shadow:0 12px 36px #b85b280f
}

.blueprint-sheet-top {
  border-bottom:1px solid var(--border-sand);
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:30px;
  padding-bottom:20px;
  display:flex
}

.blueprint-sheet-title {
  font-family:var(--font-mono);
  letter-spacing:.1em;
  color:var(--text-primary);
  font-size:.8125rem;
  font-weight:700
}

.blueprint-sheet-meta {
  font-family:var(--font-mono);
  color:var(--accent-gold);
  font-size:.75rem
}

.blueprint-quad-grid {
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:30px;
  display:grid
}

.blueprint-quad-box {
  border:1px solid var(--border-sand);
  border-radius:var(--radius-sm);
  background:#faf9f6e6;
  padding:22px 18px;
  transition:all .16s
}

.blueprint-quad-box:hover {
  border-color:var(--accent-gold);
  background:#fff
}

.blueprint-box-num {
  font-family:var(--font-mono);
  color:var(--accent-gold);
  margin-bottom:6px;
  font-size:.6875rem;
  font-weight:700
}

.blueprint-box-heading {
  font-family:var(--font-sans);
  color:var(--text-primary);
  margin-bottom:6px;
  font-size:.875rem;
  font-weight:700
}

.blueprint-box-sub {
  color:var(--text-secondary);
  font-size:.75rem;
  line-height:1.45
}

.blueprint-sheet-bottom {
  border-top:1px solid var(--border-sand);
  font-family:var(--font-mono);
  color:var(--text-muted);
  justify-content:space-between;
  padding-top:18px;
  font-size:.75rem;
  display:flex
}

.deliverable-center-callout {
  text-align:center;
  max-width:820px;
  margin:0 auto 54px
}

.deliverable-strong-statement {
  font-family:var(--font-serif);
  color:var(--text-primary);
  margin-bottom:32px;
  font-size:2.125rem;
  font-weight:400
}

.deliverable-strong-statement em {
  color:var(--accent-gold);
  font-style:italic
}

.qualification-flow-grid {
  grid-template-columns:1fr 1fr;
  gap:32px;
  display:grid
}

.qual-side {
  border-radius:var(--radius-md);
  flex-direction:column;
  padding:44px 38px;
  display:flex
}

.qual-side-for {
  border:1px solid var(--border-sand);
  border-top:4px solid var(--accent-check);
  background:#fff;
  box-shadow:0 8px 24px #186e4f0f
}

.qual-side-not {
  border:1px solid var(--border-subtle);
  background:#f6f4ee;
  border-top:4px solid #7e8d88
}

.qual-side-title {
  font-family:var(--font-serif);
  color:var(--text-primary);
  margin-bottom:28px;
  font-size:1.75rem;
  font-weight:700
}

.qual-items-list {
  flex-direction:column;
  gap:20px;
  list-style:none;
  display:flex
}

.qual-item-line {
  color:#2b3633;
  align-items:flex-start;
  gap:14px;
  font-size:1.0625rem;
  line-height:1.6;
  display:flex
}

.qual-mark {
  flex-shrink:0;
  font-size:1.125rem;
  font-weight:800;
  line-height:1.4
}

.qual-mark.check {
  color:var(--accent-check)
}

.qual-mark.cross {
  color:#7e8d88
}

.faq-accordion-wrap {
  max-width:840px;
  margin:0 auto
}

.faq-row-item {
  border-bottom:1px solid var(--border-sand)
}

.faq-row-item:first-child {
  border-top:1px solid var(--border-sand)
}

.faq-trigger-btn {
  text-align:left;
  cursor:pointer;
  width:100%;
  color:var(--text-primary);
  font-family:var(--font-serif);
  letter-spacing:-.01em;
  background:0 0;
  border:none;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:28px 0;
  font-size:1.3125rem;
  font-weight:400;
  transition:color .14s;
  display:flex
}

.faq-trigger-btn:hover {
  color:var(--accent-gold)
}

.faq-icon-cross {
  font-family:var(--font-mono);
  color:var(--accent-gold);
  flex-shrink:0;
  font-size:1.375rem;
  font-weight:400;
  transition:transform .2s
}

.faq-row-item.open .faq-icon-cross {
  color:var(--text-primary);
  transform:rotate(45deg)
}

.faq-collapsible-content {
  max-height:0;
  transition:max-height .24s cubic-bezier(.16,1,.3,1),padding .18s;
  overflow:hidden
}

.faq-row-item.open .faq-collapsible-content {
  max-height:400px;
  padding-bottom:28px
}

.faq-collapsible-content p {
  color:#384542;
  font-size:1.0625rem;
  line-height:1.75
}

.guarantee-velvet-box {
  border:1px solid var(--border-dark-gold);
  border-radius:var(--radius-lg);
  text-align:center;
  background:linear-gradient(135deg,#101d19f5 0%,#0a1310f5 100%);
  max-width:880px;
  margin:0 auto;
  padding:68px 52px;
  box-shadow:0 16px 48px #00000061
}

.guarantee-title {
  font-family:var(--font-serif);
  color:#fff;
  margin-bottom:30px;
  font-size:2.75rem;
  font-weight:400
}

.guarantee-title em {
  color:var(--accent-gold-light);
  font-style:italic
}

.guarantee-statement {
  font-family:var(--font-serif);
  color:#faf9f6;
  max-width:720px;
  margin:0 auto;
  font-size:1.625rem;
  font-weight:400;
  line-height:1.65
}

.offer-exclusive-frame {
  border:2px solid var(--text-primary);
  border-radius:var(--radius-lg);
  text-align:center;
  background:#fff;
  max-width:900px;
  margin:0 auto;
  padding:68px 52px;
  box-shadow:0 16px 44px #b85b2812
}

.offer-cap-pill {
  font-family:var(--font-mono);
  color:var(--accent-gold);
  background:var(--bg-sand-subtle);
  border-radius:var(--radius-full);
  border:1px solid #b85b284d;
  align-items:center;
  margin-bottom:24px;
  padding:6px 16px;
  font-size:.8125rem;
  font-weight:700;
  display:inline-flex
}

.offer-title {
  font-family:var(--font-serif);
  color:var(--text-primary);
  margin-bottom:24px;
  font-size:3.375rem;
  font-weight:400;
  line-height:1.14
}

.offer-title em {
  color:var(--accent-gold);
  font-style:italic
}

.offer-highlight-takeaway {
  font-family:var(--font-serif);
  color:var(--text-primary);
  background:var(--bg-sand-subtle);
  border:1px solid var(--border-sand);
  border-radius:var(--radius-sm);
  margin-bottom:40px;
  padding:16px 28px;
  font-size:1.4375rem;
  font-weight:400;
  display:inline-block
}

.ps-wrap {
  text-align:center;
  max-width:820px;
  margin:0 auto
}

.ps-editorial-card {
  border-left:4px solid var(--text-primary);
  border-top:1px solid var(--border-sand);
  border-right:1px solid var(--border-sand);
  border-bottom:1px solid var(--border-sand);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  text-align:left;
  background:#fff;
  margin-bottom:40px;
  padding:38px 36px;
  box-shadow:0 6px 20px #b85b280d
}

.ps-text {
  font-family:var(--font-serif);
  color:var(--text-primary);
  font-size:1.375rem;
  font-weight:400;
  line-height:1.65
}

.ps-text strong {
  font-family:var(--font-sans);
  color:var(--accent-gold);
  font-weight:700
}

.site-footer {
  border-top:1px solid var(--border-subtle);
  text-align:center;
  background-color:var(--bg-page);
  padding:52px 24px
}

.footer-brand {
  font-family:var(--font-sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-size:.9375rem;
  font-weight:700
}

.modal-overlay {
  -webkit-backdrop-filter:blur(6px);
  z-index:999;
  opacity:0;
  visibility:hidden;
  background:#0a1412b8;
  justify-content:center;
  align-items:center;
  padding:20px;
  transition:opacity .2s,visibility .2s;
  display:flex;
  position:fixed;
  inset:0
}

.modal-overlay.active {
  opacity:1;
  visibility:visible
}

.modal-container {
  border:1px solid var(--border-sand);
  border-radius:var(--radius-md);
  background:#fff;
  width:100%;
  max-width:580px;
  max-height:90vh;
  padding:44px;
  transition:transform .2s cubic-bezier(.16,1,.3,1);
  position:relative;
  overflow-y:auto;
  transform:translateY(14px);
  box-shadow:0 24px 60px #00000038
}

.modal-overlay.active .modal-container {
  transform:translateY(0)
}

.modal-close-btn {
  color:var(--text-muted);
  cursor:pointer;
  background:0 0;
  border:none;
  padding:4px;
  font-size:1.375rem;
  line-height:1;
  transition:color .14s;
  position:absolute;
  top:24px;
  right:24px
}

.modal-close-btn:hover {
  color:var(--text-primary)
}

.modal-header {
  margin-bottom:28px
}

.modal-title {
  font-family:var(--font-serif);
  color:var(--text-primary);
  margin-bottom:8px;
  font-size:2.25rem;
  font-weight:400
}

.modal-desc {
  color:var(--text-secondary);
  font-size:1.0625rem;
  line-height:1.5
}

.form-group {
  margin-bottom:20px
}

.form-label {
  color:var(--text-primary);
  margin-bottom:8px;
  font-size:.875rem;
  font-weight:600;
  display:block
}

.form-label-micro {
  color:var(--text-muted);
  margin-left:6px;
  font-size:.8125rem;
  font-style:italic;
  font-weight:400
}

.form-input {
  border:1px solid var(--border-light);
  border-radius:var(--radius-xs);
  width:100%;
  color:var(--text-primary);
  font-family:var(--font-sans);
  background:#fff;
  outline:none;
  padding:13px 16px;
  font-size:.9375rem;
  transition:border-color .14s,box-shadow .14s
}

.form-input:focus {
  border-color:var(--accent-gold);
  box-shadow:0 0 0 3px #b85b281f
}

.radio-group-grid {
  grid-template-columns:1fr 1fr;
  gap:10px;
  display:grid
}

.radio-card {
  background:var(--bg-page);
  border:1px solid var(--border-light);
  border-radius:var(--radius-xs);
  cursor:pointer;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  transition:border-color .14s,background-color .14s;
  display:flex
}

.radio-card:hover {
  border-color:var(--accent-gold)
}

.radio-card input[type=radio] {
  accent-color:var(--accent-gold)
}

.radio-label-text {
  color:var(--text-primary);
  font-size:.875rem;
  font-weight:500
}

.modal-footer-note {
  text-align:center;
  color:var(--text-muted);
  margin-top:14px;
  font-size:.8125rem
}

@media (max-width:1024px) {
  .hero-headline {
    font-size:3.375rem
  }
  .protocol-ribbon-grid {
    grid-template-columns:1fr 1fr;
    gap:16px
  }
  .stage-fluid-arrow {
    display:none
  }
  .christian-editorial-layout {
    grid-template-columns:1fr;
    gap:40px
  }
  .christian-portrait {
    max-width:380px;
    margin:0 auto
  }
  .timeline-pathway {
    grid-template-columns:1fr;
    gap:16px
  }
  .timeline-flow-connector {
    padding:6px 0;
    transform:rotate(90deg)
  }
  .blueprint-quad-grid {
    grid-template-columns:1fr 1fr
  }
}

@media (max-width:768px) {
  .section {
    padding-top:80px;
    padding-bottom:80px
  }
  .hero-headline {
    font-size:2.625rem
  }
  .hero-subheadline {
    font-size:1.1875rem
  }
  .section-title {
    font-size:2.25rem
  }
  .pain-item {
    grid-template-columns:36px 1fr;
    padding:24px 20px
  }
  .pain-desc {
    font-size:1.125rem
  }
  .pain-conclusion-text {
    font-size:1.625rem
  }
  .reframe-title {
    font-size:2.125rem
  }
  .reframe-highlight-text {
    font-size:1.375rem
  }
  .qualification-flow-grid {
    grid-template-columns:1fr
  }
  .offer-title {
    font-family:var(--font-serif);
    font-size:2.5rem
  }
  .protocol-fluid-card {
    padding:28px 20px
  }
  .blueprint-sheet-card {
    padding:24px 18px
  }
  .blueprint-quad-grid,.radio-group-grid {
    grid-template-columns:1fr
  }
  .modal-container {
    padding:30px 22px
  }
}

/* O protótipo parava o tratamento de telemóvel nos 390px, o que deixava
   os ecrãs de 391–480px (iPhone Pro Max, Plus e afins) com a grelha do
   protocolo em duas colunas e o CTA sem quebra de linha — ambos a
   transbordar da janela. O limite passa para 480px: são exactamente as
   mesmas regras, aplicadas a todos os telemóveis em vez de só aos mais
   estreitos. Nenhum valor foi alterado. */
@media (max-width:480px) {
  .container {
    padding-left:20px;
    padding-right:20px
  }
  .hero-headline {
    font-size:2.125rem;
    line-height:1.18
  }
  .hero-subheadline {
    font-size:1.0625rem
  }
  .btn-cta {
    white-space:normal;
    text-align:center;
    width:100%;
    padding:16px 20px;
    font-size:.9375rem
  }
  .protocol-ribbon-grid {
    grid-template-columns:1fr
  }
  .offer-exclusive-frame {
    padding:36px 20px
  }
}

/* =====================================================================
   5. ACESSIBILIDADE, ESTADOS FUNCIONAIS E MOVIMENTO REDUZIDO
   Acrescentado na implementação final. Não altera o desenho aprovado:
   só torna visíveis estados que o protótipo não tinha (foco, erro,
   carregamento) usando os mesmos tokens de cor e tipografia.
   ===================================================================== */

/* --- Skip link: primeiro tab da página salta para o conteúdo --------- */
.skip-link {
  background: var(--bg-dark-deep);
  color: var(--text-on-dark);
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  transition: transform .18s ease;
  z-index: 1000;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Foco visível consistente em todos os alvos interáveis ----------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Em áreas escuras o dourado perde contraste: usa-se o tom claro. */
.section-dark-contrast a:focus-visible,
.section-dark-contrast button:focus-visible {
  outline-color: var(--accent-gold-light);
}

/* O rato não deve desenhar o anel de foco nos cartões de rádio. */
.radio-card input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

.radio-card:has(input[type="radio"]:checked) {
  border-color: var(--accent-gold);
  background: var(--accent-gold-pale);
}

/* --- Scroll lock enquanto o modal está aberto ------------------------ */
body.is-modal-open {
  overflow: hidden;
}

/* --- Estados de erro do formulário ----------------------------------- */
.form-input[aria-invalid="true"] {
  border-color: var(--accent-cross);
  background: #fdf8f8;
}

.form-input[aria-invalid="true"]:focus {
  border-color: var(--accent-cross);
  box-shadow: 0 0 0 3px #9c383821;
}

.form-group[data-invalid="true"] .radio-group-grid {
  border: 1px solid var(--accent-cross);
  border-radius: var(--radius-xs);
  padding: 8px;
}

.form-error {
  color: var(--accent-cross);
  font-size: .8125rem;
  line-height: 1.45;
  margin-top: 6px;
  min-height: 0;
  display: none;
}

.form-error.is-visible {
  display: block;
}

/* Aviso de falha de envio, no topo do formulário. */
.form-notice {
  border: 1px solid var(--accent-cross);
  border-left: 3px solid var(--accent-cross);
  border-radius: var(--radius-xs);
  background: #fdf8f8;
  color: var(--accent-cross);
  font-size: .875rem;
  line-height: 1.5;
  padding: 12px 16px;
  margin-bottom: 20px;
  display: none;
}

.form-notice.is-visible {
  display: block;
}

/* --- Estado de envio do botão ---------------------------------------- */
.btn-cta[data-state="sending"] {
  cursor: progress;
  opacity: .72;
}

.btn-cta[disabled] {
  cursor: not-allowed;
}

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

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- Painéis de FAQ fechados saem da árvore de acessibilidade --------
   O protótipo colapsa por max-height, o que mantinha o texto fechado
   focável por teclado e legível por leitores de ecrã. A visibilidade
   resolve isso sem tocar na animação: ao abrir aplica-se de imediato,
   ao fechar só no fim da transição. A altura exacta é definida pelo JS
   (scrollHeight), pelo que respostas longas nunca ficam cortadas. */
.faq-collapsible-content {
  visibility: hidden;
  transition: max-height .24s cubic-bezier(.16, 1, .3, 1), padding .18s, visibility .24s;
}

.faq-row-item.open .faq-collapsible-content {
  visibility: visible;
}

/* =====================================================================
   UTILITÁRIOS
   O protótipo trazia cinco declarações em atributos style="" inline.
   Foram movidas para aqui sem qualquer alteração de valores, para que
   o HTML fique limpo e estes ajustes passem a ser editáveis num só
   sítio. A especificidade dupla replica a prioridade que o inline
   tinha sobre as media queries.
   ===================================================================== */

/* Secção PS — espaçamento próprio de fecho de página. */
.section.section-ps {
  padding-top: 80px;
  padding-bottom: 96px;
}

/* Título da secção «Quem está do outro lado» — alinhado à esquerda. */
.section-title.christian-section-title {
  text-align: left;
  margin-bottom: 24px;
}

/* Frase de posse do entregável. */
.deliverable-highlight-phrase {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 32px;
  color: var(--text-primary);
}

/* CTA do modal ocupa a largura total do formulário. */
.btn-cta.btn-cta-block {
  width: 100%;
}

.form-submit-wrap {
  margin-top: 32px;
}

/* A lista de dores passou a ser <ol> por semântica; sem marcadores. */
.pain-stream {
  list-style: none;
}

/* Texto só para leitores de ecrã. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Armadilha anti-spam: fora do ecrã, nunca focável. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* O fieldset da faturação não deve introduzir moldura nem espaçamento. */
.form-group fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}



/* =====================================================================
   RETRATO DO CHRISTIAN
   ---------------------------------------------------------------------
   A estrutura vem da referência aprovada; a linguagem é a da página.

     cartão   mesmo tratamento dos outros cartões da página — fundo
              branco, contorno --border-sand, cantos --radius-lg e a
              sombra dourada suave. A malha de pontos é a mesma do
              cartão do Blueprint, que liga esta secção àquela.
     círculo  massa dourada atrás, mais larga que o cartão, de modo a
              ser aparada pelos cantos arredondados
     figura   o recorte inteiro à frente, a sangrar nos lados, com a
              base aparada pelo cartão

   PORQUE A FIGURA SANGRA ATÉ AOS BORDOS
   A fotografia de origem corta os ombros nas margens, pelo que o
   recorte tem arestas verticais. Fazendo-a sangrar, essas arestas
   passam a coincidir com os bordos do cartão — deixam de se ler como
   corte e passam a ser o limite do enquadramento. É assim que a
   referência resolve o mesmo problema, e é por isso que aqui não há
   máscara nenhuma. Em cima, onde só há cabeça, é a silhueta recortada
   que aparece contra o fundo claro: é aí que o recorte se dá a ver.
   ===================================================================== */

.christian-portrait {
  aspect-ratio: 18 / 25;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Contorno, cantos e sombra iguais aos restantes cartões da página.
     O fundo, porém, não é o branco desses cartões: aqui o retrato ocupa
     quase tudo e o pouco que sobra ficava a ler-se como mancha branca
     vazia à volta da cabeça. Um areia quente, tirado dos mesmos tokens
     da secção, dá continuidade em vez de buraco. */
  border: 1px solid var(--border-sand);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 1px 1px, #b85b2814 1px, #0000 0) 0 0 / 24px 24px,
    linear-gradient(168deg, var(--bg-sand-highlight) 0%, #f6efe6 52%, var(--bg-sand-muted) 100%);
  box-shadow: 0 12px 36px #b85b280f;
}

/* --- Círculo dourado, atrás -------------------------------------------
   Mais largo que o cartão, pelo que os lados são aparados pelos cantos
   arredondados — como na referência. O topo fica escondido atrás da
   cabeça e a massa assoma de ambos os lados, mais abaixo. */

.christian-portrait-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.christian-portrait-disc {
  position: absolute;
  top: 1%;
  left: 50%;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  display: block;

  /* Sobe até junto ao topo e é mais largo que o cartão: a massa quente
     passa a ocupar a zona à volta da cabeça, que antes ficava vazia.
     Os lados e o topo são aparados pelos cantos arredondados, e só os
     quatro cantos ficam no areia do cartão — é isso que continua a
     fazê-lo ler como disco por trás, e não como fundo. */
  background: radial-gradient(
    circle at 50% 42%,
    rgba(184, 91, 40, .24) 0%,
    rgba(184, 91, 40, .21) 54%,
    rgba(184, 91, 40, .16) 82%,
    rgba(184, 91, 40, .12) 100%
  );
}

/* --- A figura ----------------------------------------------------------
   Sangra nos lados (largura 100%) e é aparada na base pelo cartão, que
   lhe corta os braços — o mesmo enquadramento da referência. O desvio
   de 4% no topo deixa ar sobre a cabeça. */

.christian-portrait-figure {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  z-index: 1;

  /* Sombra pela silhueta, para a figura assentar sobre o dourado.
     Contra fundo claro não é precisa luz de contorno: a roupa escura
     separa-se sozinha. */
  filter: drop-shadow(0 10px 24px rgba(58, 38, 22, .18));
}

/* O <picture> é só selecção de formato; sai do layout. */
.christian-portrait-figure picture {
  display: contents;
}

.christian-portrait-figure img {
  width: 100%;
  height: auto;
  display: block;
}