/* ============================================================
   PAULO SOUZA ADVOCACIA — Landing Page
   Sistema: Grafite/preto + dourado champanhe (sóbrio e premium)
   Gold extraído da logo: #E0C08E
   ============================================================ */

:root{
  /* Graphite base (warm near-black) */
  --ink:        #0B0B0C;
  --ink-1:      #101012;
  --ink-2:      #16161A;
  --ink-3:      #1D1D22;
  --ink-card:   #141418;

  /* Champagne gold */
  --gold:       #E0C08E;
  --gold-deep:  #C9A66E;
  --gold-soft:  #EBD6AE;
  --gold-ink:   #5A4A2C;

  /* Warm off-white paper (for inverted sections) */
  --paper:      #F4F0E7;
  --paper-2:    #EBE5D8;

  /* Text */
  --text:       #ECE8DF;
  --text-mut:   #A39D90;
  --text-dim:   #726D62;
  --on-paper:   #1A1814;
  --on-paper-mut:#5C564B;

  /* Lines */
  --line:       rgba(236,232,223,0.10);
  --line-2:     rgba(236,232,223,0.16);
  --line-gold:  rgba(224,192,142,0.30);

  /* Fonts */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Hanken Grotesk', system-ui, sans-serif;
  --alt:   'Archivo', system-ui, sans-serif;

  /* Display family per direction (default = clássico) */
  --display: var(--serif);
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.34em;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;

  --section-pad: clamp(72px, 11vh, 140px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 360;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--gold); color: #1a1408; }

.wrap{ width:100%; max-width: var(--maxw); margin:0 auto; padding: 0 var(--gutter); }

/* ---------- Typographic atoms ---------- */
.eyebrow{
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}
.eyebrow::before{
  content:"";
  width: 28px; height:1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
  content:"";
  width:28px; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

h1,h2,h3,h4{ font-family: var(--display); font-weight: var(--display-weight); margin:0; line-height: 1.04; letter-spacing: var(--display-tracking); }

.h-display{
  font-size: clamp(38px, 6.4vw, 86px);
  line-height: 1.02;
}
.h-section{
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.06;
}
.h-sub{
  font-size: clamp(23px, 2.6vw, 34px);
  line-height: 1.12;
}
.lede{
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  color: var(--text-mut);
  font-weight: 360;
}
em.gold, .gold-text{ color: var(--gold); font-style: inherit; }
.serif-em{ font-family: var(--serif); font-style: italic; font-weight: 500; }

/* gold hairline rule */
.rule{ height:1px; background: var(--line-2); border:0; margin:0; }
.rule.gold{ background: linear-gradient(90deg, var(--line-gold), transparent); }

/* ---------- Buttons ---------- */
.btn{
  --bg: var(--gold);
  display:inline-flex; align-items:center; gap:12px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  letter-spacing: 0.01em;
  padding: 17px 30px;
  border-radius: var(--radius);
  background: var(--bg);
  color: #1a1408;
  border: 1px solid var(--bg);
  cursor:pointer;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background .25s, color .25s;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 40px -18px rgba(224,192,142,0.6);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset, 0 22px 50px -16px rgba(224,192,142,0.75); }
.btn .arrow{ transition: transform .25s; }
.btn:hover .arrow{ transform: translateX(4px); }
.btn.ghost{
  background: transparent; color: var(--text); border-color: var(--line-2);
  box-shadow:none;
}
.btn.ghost:hover{ border-color: var(--gold); color: var(--gold); transform: translateY(-2px); box-shadow:none; }
.btn.on-paper{ color:#1a1408; }
.btn.lg{ padding: 20px 38px; font-size: 17px; }

.microcopy{
  font-size: 13.5px; color: var(--text-dim); margin-top: 16px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.microcopy .dot{ width:3px;height:3px;border-radius:50%;background: var(--gold); display:inline-block; opacity:.7; }
.microcopy.center{ justify-content:center; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  transition: background .4s, border-color .4s, padding .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
  padding: 22px 0;
}
.site-header.scrolled{
  background: rgba(11,11,12,0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
  padding: 14px 0;
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.nav-logo img{ height: 46px; width:auto; transition: height .4s; }
.scrolled .nav-logo img{ height: 38px; }
.nav-menu{ display:flex; align-items:center; gap: 34px; list-style:none; margin:0; padding:0; }
.nav-menu a{
  font-size: 14px; color: var(--text-mut); font-weight: 450; letter-spacing: 0.01em;
  position:relative; padding: 4px 0; transition: color .25s; white-space: nowrap;
}
.nav-menu a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background: var(--gold); transition: width .3s;
}
.nav-menu a:hover{ color: var(--text); }
.nav-menu a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-burger{ display:none; background:none;border:0;cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
.nav-burger span{ width:24px;height:1.5px;background:var(--text);display:block; transition:.3s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  padding: clamp(140px, 20vh, 210px) 0 clamp(60px, 9vh, 110px);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(224,192,142,0.13), transparent 60%),
    radial-gradient(900px 700px at 8% 110%, rgba(224,192,142,0.05), transparent 55%),
    var(--ink);
}
.hero-bg::after{
  /* subtle vertical grid lines */
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: clamp(120px, 16vw, 220px) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  opacity:.5;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px,5vw,80px);
  align-items:center;
}
.hero-copy{ max-width: 660px; }
.hero h1{ margin-bottom: 26px; }
.hero .lede{ max-width: 540px; margin-bottom: 38px; }
.hero-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.hero-figure{
  position:relative;
  aspect-ratio: 4/5;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow:hidden;
}
.hero-figure::after{
  content:""; position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(224,192,142,0.10), inset 0 -120px 120px -60px rgba(11,11,12,0.9);
  pointer-events:none;
}
.hero-figure .corner{ position:absolute; width:18px;height:18px;border:1px solid var(--gold); opacity:.7; z-index:2; }
.hero-figure .corner.tl{ top:14px;left:14px;border-right:0;border-bottom:0; }
.hero-figure .corner.br{ bottom:14px;right:14px;border-left:0;border-top:0; }

/* hero photo (B&W studio portrait) married into the graphite hero */
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: 50% 15%;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  will-change: transform;
}
.hero-figure::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(135deg, rgba(224,192,142,0.10), transparent 42%),
    linear-gradient(90deg, rgba(11,11,12,0.55) 0%, transparent 32%),
    linear-gradient(180deg, rgba(11,11,12,0.10) 0%, transparent 26%, transparent 52%, rgba(11,11,12,0.88) 100%);
}

/* image placeholder */
.ph{
  position:relative; width:100%; height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(224,192,142,0.05) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--ink-3), var(--ink-1));
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.ph .ph-label{
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); padding: 8px 12px;
  border: 1px dashed var(--line-2); border-radius: 2px;
  background: rgba(11,11,12,0.4);
}

/* hero trust strip */
.hero-trust{
  position:relative; z-index:1;
  margin-top: clamp(50px, 7vh, 84px);
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display:flex; align-items:center; gap: clamp(20px,4vw,54px); flex-wrap:wrap;
}
.hero-trust .label{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-dim); }
.hero-trust .cities{ display:flex; gap: clamp(14px,2.4vw,30px); flex-wrap:wrap; }
.hero-trust .cities span{ font-size:14px; color:var(--text-mut); position:relative; }
.hero-trust .cities span:not(:last-child)::after{ content:"·"; color: var(--gold); margin-left: clamp(7px,1.2vw,15px); opacity:.6; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{ position:relative; }
.section{ padding: var(--section-pad) 0; }
.section-head{ max-width: 760px; margin-bottom: clamp(44px,6vh,72px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section.paper{ background: var(--paper); color: var(--on-paper); }
.section.paper .lede{ color: var(--on-paper-mut); }
.section.paper .eyebrow{ color: var(--gold-deep); }
.section.tint{ background: linear-gradient(180deg, var(--ink-1), var(--ink)); }

/* ---------- Value opening (narrative) ---------- */
.opening{ position:relative; }
.opening .wrap{ display:grid; grid-template-columns: 0.42fr 0.58fr; gap: clamp(36px,5vw,80px); align-items:start; }
.opening .big-statement{
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12; font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
}
.opening .big-statement .serif-em{ color: var(--gold); }
.opening .body p{ margin: 0 0 22px; color: var(--text-mut); font-size: 19px; max-width: 56ch; }
.opening .body p:last-child{ margin-bottom:0; color: var(--text); }
.opening .body strong{ color: var(--text); font-weight: 600; }

/* ---------- Pain points ---------- */
.pains{ display:grid; grid-template-columns: repeat(2,1fr); gap: 0; margin-top: 8px; border-top:1px solid var(--line); }
.pain{
  display:flex; gap:18px; align-items:flex-start;
  padding: 26px 30px 26px 0; border-bottom: 1px solid var(--line);
}
.pain:nth-child(odd){ padding-right: clamp(24px,4vw,56px); border-right:1px solid var(--line); padding-left:0; }
.pain:nth-child(even){ padding-left: clamp(24px,4vw,56px); }
.pain .mark{
  flex:none; width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line-gold); color:var(--gold);
  display:flex;align-items:center;justify-content:center; font-size:14px; margin-top:2px;
}
.pain p{ margin:0; color: var(--text-mut); font-size: 17px; line-height:1.55; }
.pains-foot{
  margin-top: 34px; font-family: var(--display); font-style: italic;
  font-size: clamp(22px,2.6vw,30px); color: var(--gold-soft);
}

/* ---------- Solution / mechanism ---------- */
.mechanism{ display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); margin-top: 8px; }
.mech-step{ background: var(--ink); padding: 40px 32px; position:relative; }
.mech-step .num{ font-family: var(--display); font-size: 15px; color: var(--gold); letter-spacing:.1em; }
.mech-step h4{ font-size: 24px; margin: 14px 0 10px; }
.mech-step p{ margin:0; color: var(--text-mut); font-size: 16px; }
.mech-step .arrow-flow{ position:absolute; right:-12px; top:50%; transform:translateY(-50%); color:var(--gold); z-index:2; background:var(--ink); width:24px;height:24px; display:flex;align-items:center;justify-content:center; }
.mech-step:last-child .arrow-flow{ display:none; }

/* ---------- Benefits grid ---------- */
.benefits{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.benefit{ background: var(--ink); padding: 34px 28px; transition: background .35s; min-height: 210px; display:flex; flex-direction:column; }
.benefit:hover{ background: var(--ink-2); }
.benefit .b-ico{ width:34px;height:34px; color:var(--gold); margin-bottom: 22px; }
.benefit .b-ico.bidx{ font-family: var(--display); font-size: 26px; line-height:1; color: var(--gold); opacity:.85; height:auto; width:auto; margin-bottom: 26px; letter-spacing:.02em; }
.benefit:hover .b-ico.bidx{ opacity:1; }
.benefit h4{ font-size: 20px; margin-bottom: 10px; line-height:1.15; }
.benefit p{ margin:0; color: var(--text-mut); font-size: 15px; line-height:1.5; }

/* ---------- Social proof / credibility ---------- */
.cred{ display:grid; grid-template-columns: repeat(12,1fr); gap: 18px; }
.cred-card{
  border:1px solid var(--line-2); border-radius: var(--radius); padding: 32px 30px;
  background: linear-gradient(180deg, rgba(224,192,142,0.04), transparent);
  position:relative; overflow:hidden;
}
.cred-card .ck{ font-size: 12px; letter-spacing:.18em; text-transform:uppercase; color: var(--gold); margin-bottom: 16px; }
.cred-card h4{ font-size: clamp(22px,2.2vw,28px); line-height:1.1; margin-bottom: 10px; }
.cred-card p{ margin:0; color: var(--text-mut); font-size: 15.5px; }
.cred-card.wide{ grid-column: span 6; }
.cred-card.half{ grid-column: span 6; }
.cred-card.third{ grid-column: span 4; }
.cred-card.feature{ grid-column: span 6; }
.cred-stat{ font-family: var(--display); font-size: clamp(40px,5vw,64px); color: var(--gold); line-height:1; margin-bottom: 8px; }
.cred-cities{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 6px; }
.cred-cities span{ font-size: 14px; color: var(--text); padding: 7px 14px; border:1px solid var(--line-2); border-radius: 100px; }
.cred-note{ margin-top: 26px; font-size: 13.5px; color: var(--text-dim); display:flex; gap:10px; align-items:flex-start; max-width: 70ch; }
.cred-note .i{ color: var(--gold); flex:none; }

/* ---------- Offer / stack ---------- */
.offer{ background: linear-gradient(180deg, var(--ink-1), var(--ink)); }
.offer-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px,5vw,80px); align-items:center; }
.offer-card{
  border:1px solid var(--line-gold); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(224,192,142,0.06), rgba(11,11,12,0.4));
  padding: clamp(30px,3.4vw,46px);
  box-shadow: 0 40px 120px -50px rgba(0,0,0,0.8);
}
.offer-card .stack-title{ font-size: 13px; letter-spacing:.16em; text-transform:uppercase; color: var(--gold); margin-bottom: 22px; }
.stack{ list-style:none; margin:0; padding:0; }
.stack li{ display:flex; gap:15px; align-items:flex-start; padding: 14px 0; border-bottom:1px solid var(--line); font-size: 16px; color: var(--text); }
.stack li:last-child{ border-bottom:0; }
.stack li .chk{ flex:none; width:22px;height:22px; color: var(--gold); margin-top:1px; }
.offer-card .stack-foot{ margin-top: 24px; padding-top: 22px; border-top:1px solid var(--line-gold); font-size:15px; color: var(--text-mut); }
.offer-card .stack-foot strong{ color: var(--gold-soft); font-weight:600; }

/* ---------- Objections ---------- */
.objections{ display:grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line); border:1px solid var(--line); }
.objection{ background: var(--ink); padding: 38px 36px; }
.objection .q{ font-family: var(--display); font-style: italic; font-size: clamp(21px,2.2vw,27px); color: var(--text); margin-bottom: 14px; display:flex; gap:12px; align-items:baseline; }
.objection .q .qmark{ color: var(--gold); font-style: normal; font-size: 0.8em; }
.objection .a{ margin:0; color: var(--text-mut); font-size: 16px; line-height:1.6; }
.objection .a strong{ color: var(--text); font-weight:600; }

/* ---------- Guarantee ---------- */
.guarantee .wrap{ max-width: 920px; text-align:center; }
.guarantee .shield{ width:54px;height:54px;color:var(--gold); margin: 0 auto 28px; }
.guarantee p.big{ font-family: var(--display); font-size: clamp(26px,3.2vw,40px); line-height:1.18; color: var(--text); margin: 0 0 22px; letter-spacing: var(--display-tracking); }
.guarantee p.sub{ color: var(--text-mut); font-size: 18px; max-width: 62ch; margin: 0 auto; }

/* ---------- Urgency ---------- */
.urgency{ background: var(--ink-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.urgency .wrap{ display:grid; grid-template-columns: 0.5fr 0.5fr; gap: clamp(36px,5vw,72px); align-items:center; }
.urgency .u-head{ font-family: var(--display); font-size: clamp(30px,4vw,52px); line-height:1.06; letter-spacing: var(--display-tracking); }
.urgency .u-head .serif-em{ color: var(--gold); }
.urgency .u-body p{ color: var(--text-mut); font-size: 18px; margin: 0 0 20px; }
.urgency .u-body .kicker{ font-family: var(--display); font-style:italic; font-size: clamp(20px,2.2vw,26px); color: var(--gold-soft); margin-top: 8px; }

/* ---------- FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns: 0.36fr 0.64fr; gap: clamp(36px,5vw,72px); align-items:start; }
.faq-list{ border-top: 1px solid var(--line-2); }
.faq-item{ border-bottom: 1px solid var(--line-2); }
.faq-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding: 26px 0; color: var(--text); font-family: var(--display);
  font-size: clamp(20px,2vw,25px); letter-spacing: var(--display-tracking);
  transition: color .25s;
}
.faq-q:hover{ color: var(--gold); }
.faq-icon{ flex:none; width:26px;height:26px; position:relative; }
.faq-icon::before,.faq-icon::after{ content:""; position:absolute; background: var(--gold); transition: transform .3s, opacity .3s; }
.faq-icon::before{ top:50%; left:3px; right:3px; height:1.5px; transform: translateY(-50%); }
.faq-icon::after{ left:50%; top:3px; bottom:3px; width:1.5px; transform: translateX(-50%); }
.faq-item.open .faq-icon::after{ transform: translateX(-50%) scaleY(0); opacity:0; }
.faq-a{ overflow:hidden; max-height:0; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
.faq-a-inner{ padding: 0 0 28px; color: var(--text-mut); font-size: 16.5px; line-height:1.65; max-width: 60ch; }

/* ---------- Final CTA ---------- */
.final-cta{ position:relative; overflow:hidden; padding: clamp(90px,13vh,160px) 0; }
.final-cta .fc-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 500px at 50% -20%, rgba(224,192,142,0.16), transparent 62%),
    var(--ink-1);
}
.final-cta .fc-bg::after{ content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size: 30px 30px; opacity:.5;
  -webkit-mask-image: radial-gradient(700px 400px at 50% 30%, #000, transparent);
          mask-image: radial-gradient(700px 400px at 50% 30%, #000, transparent);
}
.final-cta .wrap{ position:relative; z-index:1; text-align:center; max-width: 900px; }
.final-cta .q-lead{ font-family: var(--display); font-size: clamp(30px,4.4vw,58px); line-height:1.08; letter-spacing: var(--display-tracking); margin-bottom: 22px; }
.final-cta .q-lead .serif-em{ color: var(--gold); }
.final-cta p.fc-sub{ color: var(--text-mut); font-size: 19px; max-width: 60ch; margin: 0 auto 40px; }
.final-cta .actions{ display:flex; flex-direction:column; align-items:center; gap:0; }

/* ---------- PS ---------- */
.ps{ padding: clamp(56px,8vh,90px) 0; border-top:1px solid var(--line); }
.ps .wrap{ max-width: 820px; display:flex; gap: 28px; align-items:flex-start; }
.ps .ps-tag{ font-family: var(--display); font-style:italic; font-size: 34px; color: var(--gold); flex:none; line-height:1; padding-top:4px; }
.ps p{ margin:0; color: var(--text-mut); font-size: 18px; line-height:1.7; }
.ps p strong{ color: var(--text); font-weight:600; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink-1); border-top:1px solid var(--line); padding: clamp(56px,8vh,84px) 0 36px; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,56px); }
.foot-brand img{ height: 56px; width:auto; margin-bottom: 20px; }
.foot-brand p{ color: var(--text-dim); font-size: 15px; max-width: 32ch; margin:0; }
.foot-col h5{ font-family: var(--sans); font-size: 12px; letter-spacing:.16em; text-transform:uppercase; color: var(--gold); margin:0 0 18px; font-weight:600; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.foot-col a, .foot-col li{ color: var(--text-mut); font-size: 15px; transition: color .25s; }
.foot-col a:hover{ color: var(--gold); }
.foot-bottom{ margin-top: clamp(40px,6vh,64px); padding-top: 26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.foot-bottom, .foot-bottom a{ color: var(--text-dim); font-size: 13px; }
.foot-disclaimer{ margin-top: 18px; font-size: 12px; color: var(--text-dim); max-width: 90ch; line-height:1.6; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

/* ---- Scroll progress bar (gold) ---- */
.scroll-progress{
  position: fixed; top:0; left:0; height:2px; width:0; z-index:300;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  box-shadow: 0 0 14px rgba(224,192,142,0.55);
  transition: width .08s linear;
  pointer-events:none;
}

/* ---- Button shimmer sweep on hover ---- */
.btn{ overflow:hidden; }
.btn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,0.40) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .65s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after{ transform: translateX(130%); }
.btn.ghost::after{ background: linear-gradient(110deg, transparent 32%, rgba(224,192,142,0.18) 50%, transparent 68%); }

/* ---- Card hover lift ---- */
.cred-card{ transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s, box-shadow .45s, background .45s; }
.cred-card:not(.feature):hover{ transform: translateY(-5px); border-color: var(--line-gold); box-shadow: 0 34px 64px -42px rgba(0,0,0,0.9); }
.cred-card.feature{ transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s; }
.cred-card.feature:hover{ transform: translateY(-5px); }

/* ---- Benefit hover: gold top-line draw + number lift ---- */
.benefit{ position:relative; }
.benefit::before{
  content:""; position:absolute; top:-1px; left:-1px; height:2px; width:0;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.benefit:hover::before{ width: calc(100% + 2px); }
.benefit .b-ico.bidx{ transition: transform .4s cubic-bezier(.2,.7,.3,1), opacity .4s; }
.benefit:hover .b-ico.bidx{ transform: translateY(-3px); }

/* ---- Mechanism flow arrow subtle nudge ---- */
.mech-step{ transition: background .4s; }
.mech-step:hover{ background: var(--ink-2); }
.mech-step .arrow-flow{ transition: transform .4s; }
.mech-step:hover .arrow-flow{ transform: translateY(-50%) translateX(3px); }

/* ---- Pain row hover ---- */
.pain{ transition: background .35s; }
.pain:hover{ background: rgba(224,192,142,0.03); }
.pain .mark{ transition: transform .35s, border-color .35s, color .35s; }
.pain:hover .mark{ transform: translateX(3px); border-color: var(--gold); }

/* ---- Stack item hover ---- */
.stack li{ transition: color .3s, padding-left .3s; }
.stack li:hover{ color: var(--gold-soft); }
.stack li .chk{ transition: transform .3s; }
.stack li:hover .chk{ transform: scale(1.15); }

/* ---- Hero figure subtle parallax target ---- */
.hero-figure .ph{ will-change: transform; transition: transform .1s linear; }
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ display:none; }
  .btn::after{ display:none; }
}

/* ============================================================
   DIRECTION VARIANTS
   data-direction = classico | moderno | ousado
   ============================================================ */

/* --- CLÁSSICO (default already set) — serif display, centered, ornamental --- */
[data-direction="classico"]{
  --display: var(--serif);
  --display-weight: 500;
  --display-tracking: 0em;
  --eyebrow-tracking: 0.36em;
}
[data-direction="classico"] .hero-grid{ grid-template-columns: 1fr; text-align:center; }
[data-direction="classico"] .hero-copy{ max-width: 880px; margin:0 auto; }
[data-direction="classico"] .hero .lede{ margin-left:auto;margin-right:auto; }
[data-direction="classico"] .hero-actions{ align-items:center; }
[data-direction="classico"] .hero .eyebrow{ justify-content:center; }
[data-direction="classico"] .hero .eyebrow::after{ content:""; width:28px;height:1px; background: linear-gradient(90deg, transparent, var(--gold)); }
[data-direction="classico"] .hero-figure{ display:none; }
[data-direction="classico"] .hero h1{ font-size: clamp(40px,6.6vw,92px); }
[data-direction="classico"] .section-head{ margin-left:auto;margin-right:auto; text-align:center; }
[data-direction="classico"] .opening .wrap{ grid-template-columns:1fr; max-width: 860px; text-align:center; }
[data-direction="classico"] .opening .body p{ margin-left:auto;margin-right:auto; }

/* --- MODERNO — grotesque display, left aligned, airy, lighter --- */
[data-direction="moderno"]{
  --display: var(--alt);
  --display-weight: 600;
  --display-tracking: -0.025em;
  --eyebrow-tracking: 0.22em;
  --section-pad: clamp(84px, 13vh, 168px);
}
[data-direction="moderno"] .h-display{ font-size: clamp(40px,6.6vw,84px); line-height:0.98; }
[data-direction="moderno"] .hero-figure{ aspect-ratio: 1/1.15; }
[data-direction="moderno"] .eyebrow{ font-weight:600; }
[data-direction="moderno"] .pains-foot,
[data-direction="moderno"] .objection .q,
[data-direction="moderno"] .ps .ps-tag,
[data-direction="moderno"] .urgency .u-body .kicker{ font-family: var(--alt); font-style: normal; font-weight:600; letter-spacing:-0.02em; }
[data-direction="moderno"] .faq-q{ font-weight:600; }

/* --- OUSADO — oversized editorial, asymmetric, gold blocks, mixed serif italic --- */
[data-direction="ousado"]{
  --display: var(--alt);
  --display-weight: 700;
  --display-tracking: -0.035em;
  --eyebrow-tracking: 0.2em;
}
[data-direction="ousado"] .h-display{ font-size: clamp(46px,8.4vw,118px); line-height:0.92; text-transform: uppercase; }
[data-direction="ousado"] .hero h1 .serif-em{ text-transform: none; font-family: var(--serif); font-weight:500; }
[data-direction="ousado"] .hero{ padding-top: clamp(150px,22vh,230px); }
[data-direction="ousado"] .hero-grid{ grid-template-columns: 1.25fr 0.75fr; align-items:end; }
[data-direction="ousado"] .h-section{ font-size: clamp(34px,5.6vw,72px); text-transform:uppercase; letter-spacing:-0.03em; }
[data-direction="ousado"] .eyebrow{ font-weight:700; }
[data-direction="ousado"] .section-head{ max-width: 900px; }
[data-direction="ousado"] .pains-foot,
[data-direction="ousado"] .objection .q{ font-family: var(--serif); font-style:italic; font-weight:500; }
[data-direction="ousado"] .offer-card{ background: linear-gradient(180deg, rgba(224,192,142,0.12), rgba(11,11,12,0.5)); }
[data-direction="ousado"] .cred-card.feature{ background: var(--gold); color:#1a1408; border-color: var(--gold); }
[data-direction="ousado"] .cred-card.feature .ck{ color: var(--gold-ink); }
[data-direction="ousado"] .cred-card.feature h4{ color:#1a1408; }
[data-direction="ousado"] .cred-card.feature p{ color: #4a3c20; }
[data-direction="ousado"] .cred-card.feature .cred-stat{ color:#1a1408; }
[data-direction="ousado"] .final-cta .q-lead{ text-transform: uppercase; }
[data-direction="ousado"] .final-cta .q-lead .serif-em{ text-transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .benefits{ grid-template-columns: repeat(2,1fr); }
  .cred-card.wide,.cred-card.half,.cred-card.third,.cred-card.feature{ grid-column: span 6; }
}
@media (max-width: 920px){
  body{ font-size: 17px; }
  .hero-grid{ grid-template-columns:1fr !important; }
  .hero-figure{ display:none !important; }
  .hero-copy{ max-width: 680px; }
  .opening .wrap{ grid-template-columns:1fr !important; gap:24px; }
  .offer-grid{ grid-template-columns:1fr !important; }
  .urgency .wrap{ grid-template-columns:1fr !important; }
  .faq-grid{ grid-template-columns:1fr !important; }
  .mechanism{ grid-template-columns:1fr !important; }
  .mech-step .arrow-flow{ display:none !important; }
  .foot-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px){
  :root{ --gutter: 20px; }
  .nav-menu{ display:none; }
  .nav-burger{ display:flex; }
  .nav-cta .btn:not(.nav-mobile-cta){ display:none; }
  .pains{ grid-template-columns:1fr !important; }
  .pain{ padding: 22px 0 !important; border-right:0 !important; }
  .benefits{ grid-template-columns:1fr; }
  .cred{ grid-template-columns:1fr; }
  .cred-card.wide,.cred-card.half,.cred-card.third,.cred-card.feature{ grid-column: span 1; }
  .objections{ grid-template-columns:1fr; }
  .objection{ padding: 30px 26px; }
  .foot-grid{ grid-template-columns: 1fr; }
  .ps .wrap{ flex-direction:column; gap:14px; }
  .hero-trust{ flex-direction:column; align-items:flex-start; gap:16px; }
}

/* Mobile menu drawer */
.mobile-drawer{
  position: fixed; inset: 0; z-index: 200; background: rgba(11,11,12,0.97);
  backdrop-filter: blur(8px); display:flex; flex-direction:column;
  padding: 30px var(--gutter); transform: translateX(100%); transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.mobile-drawer.open{ transform: none; }
.mobile-drawer .md-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 50px; }
.mobile-drawer .md-top img{ height: 40px; }
.mobile-drawer .md-close{ background:none;border:0;color:var(--text); font-size: 30px; cursor:pointer; line-height:1; }
.mobile-drawer nav{ display:flex; flex-direction:column; gap: 4px; }
.mobile-drawer nav a{ font-family: var(--serif); font-size: 30px; padding: 14px 0; border-bottom:1px solid var(--line); color: var(--text); }
.mobile-drawer .btn{ margin-top: 36px; justify-content:center; }