/* Basically Spanish shared styles */
:root{
  --ink:#14110e;
  --ink-soft:#4c443b;
  --bg:#fcf9f5;
  --sand:#f4ede3;
  --line:#e6ddcf;
  --gold:#f5a81c;
  --gold-l:#fdba3b;
  --gold-d:#c97a05;
  --dark:#12100e;
  --radius:22px;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.narrow{max-width:820px}

/* type */
h1,h2,h3{font-family:'Montserrat',system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(38px,5.6vw,66px);text-transform:uppercase}
h2{font-size:clamp(29px,4.2vw,46px);text-transform:uppercase}
h3{font-size:clamp(19px,2.2vw,24px);text-transform:none;letter-spacing:-.01em}
.brush{font-family:'Knewave',cursive;font-weight:400;color:var(--gold-d);text-transform:none;letter-spacing:0;line-height:1.1;display:inline-block;padding-bottom:.08em}
.lede{font-size:clamp(17px,1.9vw,21px);color:var(--ink-soft);max-width:62ch}
.eyebrow{font-weight:600;text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--gold-d)}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.mark{background:linear-gradient(180deg,transparent 58%,rgba(253,186,59,.55) 58%);padding:0 2px}

/* layout */
section{padding:clamp(54px,7.5vw,96px) 0}
.sand{background:var(--sand)}
.ink{background:var(--dark);color:#f6f1ea}
.ink h2,.ink h3{color:#fff}
.ink .lede{color:#cdc3b6}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(252,249,245,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0}
.logo{display:flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-weight:900;font-size:19px;text-decoration:none}
.logo svg{width:30px;height:30px;flex:0 0 30px}
.navlinks{display:flex;align-items:center;gap:24px;font-weight:500;font-size:16px}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--gold-d)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;text-decoration:none;
  padding:16px 30px;border-radius:999px;transition:transform .15s ease,box-shadow .15s ease}
.btn-primary{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#231603;box-shadow:0 10px 24px rgba(245,168,28,.35)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(245,168,28,.45)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{padding:11px 20px;font-size:15px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.microcopy{font-size:15px;color:var(--ink-soft)}
.ink .microcopy{color:#b8ada0}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;height:100%}
.card .ico{font-size:30px;line-height:1;margin-bottom:12px}
.card p{color:var(--ink-soft);margin-top:9px;font-size:17px}
.ink .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.ink .card p{color:#c6bcae}
.badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--gold);color:var(--gold-d);
  font-weight:700;font-size:15px;padding:8px 16px;border-radius:999px}
.ink .badge{background:rgba(253,186,59,.12)}

/* lists */
.ticks{list-style:none;display:grid;gap:13px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-size:18px}
.ticks li::before{content:"✓";flex:0 0 27px;height:27px;border-radius:50%;
  background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#231603;
  display:grid;place-items:center;font-family:'Montserrat',sans-serif;font-weight:900;font-size:14px;margin-top:3px}

/* steps */
.steps{counter-reset:s;display:grid;gap:22px}
.stepcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 26px 78px;position:relative}
.stepcard::before{counter-increment:s;content:counter(s);position:absolute;left:24px;top:24px;
  width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-family:'Montserrat',sans-serif;font-weight:900;font-size:18px}
.stepcard p{color:var(--ink-soft);font-size:17px;margin-top:8px}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat .n{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(34px,4.6vw,52px);line-height:1;color:var(--gold-d)}
.stat .l{font-size:16px;color:var(--ink-soft);margin-top:6px}
.ink .stat .n{color:var(--gold-l)}
.ink .stat .l{color:#c6bcae}

/* week strip */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:28px}
.day{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 6px;text-align:center}
.day b{display:block;font-family:'Montserrat',sans-serif;font-size:15px;letter-spacing:.5px}
.day span{font-size:14px;color:var(--ink-soft)}
.day.last{background:linear-gradient(180deg,#fff5e2,#ffe9c2);border:2px solid var(--gold)}

/* problem / solution panel */
.ps{display:grid;gap:16px}
.psbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;box-shadow:0 14px 34px rgba(20,17,14,.07)}
.psbox.sol{border:2px solid var(--gold);background:linear-gradient(180deg,#fffaf0,#fff3dd)}
.psk{font-family:'Montserrat',sans-serif;font-weight:900;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px;display:flex;align-items:center;gap:9px}
.psbox p{font-size:clamp(18px,2vw,21px);line-height:1.45;font-weight:500}

/* example conversation */
.convo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 18px 44px rgba(20,17,14,.08)}
.convo .tag{font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold-d);margin-bottom:16px}
.line{padding:14px 0;border-bottom:1px dashed var(--line)}
.line:last-child{border-bottom:none;padding-bottom:0}
.line .es{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(19px,2.2vw,23px)}
.line .en{font-size:16px;color:var(--ink-soft);margin-top:3px}

/* theme chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 22px;font-weight:600;font-size:17px}

.ink .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.chip.gold,.ink .chip.gold{background:linear-gradient(180deg,var(--gold-l),var(--gold));border-color:transparent;color:#231603}

/* offer */
.offer{background:#fff;border:3px solid var(--gold);border-radius:28px;padding:clamp(26px,4vw,44px);
  box-shadow:0 24px 60px rgba(20,17,14,.12);max-width:720px;margin:0 auto}
.price{display:flex;align-items:baseline;justify-content:center;gap:16px;flex-wrap:wrap;margin:10px 0 6px}
.price .now{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(46px,8vw,72px);line-height:1}
.price .was{font-family:'Montserrat',sans-serif;font-weight:800;font-size:26px;color:#9a8f80;text-decoration:line-through;text-decoration-color:#e0483a;text-decoration-thickness:4px}

/* reviews */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;height:100%}
.rtop{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.av{flex:0 0 50px;height:50px;border-radius:50%;background:linear-gradient(180deg,var(--gold-l),var(--gold-d));
  color:#231603;display:grid;place-items:center;font-family:'Montserrat',sans-serif;font-weight:900}
.rname{font-family:'Montserrat',sans-serif;font-weight:900;font-size:18px}
.stars{color:var(--gold-d);letter-spacing:2px;font-size:15px}
.review p{font-size:16.5px;color:var(--ink-soft)}

/* book */
.book{max-width:330px;margin:0 auto;border-radius:6px 12px 12px 6px;overflow:hidden;
  box-shadow:26px 30px 50px rgba(20,17,14,.28);transform:rotate(-2deg)}
.photo{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,17,14,.14)}

/* faq */
details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:12px}
details summary{cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--gold-d);font-size:24px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--ink-soft);font-size:17px}

/* cta band */
.band{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#231603;border-radius:28px;padding:clamp(30px,5vw,52px);text-align:center}
.band h2{color:#231603}
.band .btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(20,17,14,.25)}

/* footer */
footer{background:var(--dark);color:#cfc7bc;padding:50px 0 38px;font-size:16px}
footer a{color:#fff;text-decoration:none}
footer a:hover{color:var(--gold-l)}
.fgrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.fbrand{font-family:'Montserrat',sans-serif;font-weight:900;color:#fff;font-size:20px;margin-bottom:8px}
.fnav{display:grid;gap:8px}
.fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:20px;font-size:14px;color:#9b9287}

@media (max-width:900px){
  .g3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:26px}
  .week{grid-template-columns:repeat(4,1fr)}
  .navlinks{gap:14px;font-size:15px}
  .navlinks .hide-sm{display:none}
}
@media (max-width:560px){
  body{font-size:17px}
  .g2{grid-template-columns:1fr}
  .week{grid-template-columns:repeat(2,1fr)}
  .btn{width:100%;justify-content:center}
  .stepcard{padding:24px 22px 24px 70px}
}

/* ---------- section variety ---------- */
.white{background:#fff}
.cream{background:var(--bg)}
.dots{position:relative}
.dots::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(20,17,14,.10) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 70%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 70%)}
.glow{position:relative;overflow:hidden}
.glow::after{content:"";position:absolute;width:760px;height:760px;right:-260px;top:-380px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,168,28,.30),rgba(245,168,28,0) 65%);pointer-events:none}
.sect-inner{position:relative;z-index:1}

/* angled edges */
.slant{position:relative;z-index:0}
.slant::before{content:"";position:absolute;inset:-46px 0;background:inherit;transform:skewY(-2deg);z-index:-1}
.slant.ink::before{background:var(--dark)}
.slant.gold::before{background:linear-gradient(120deg,var(--gold-l),var(--gold))}

/* gold band section */
.gold{background:linear-gradient(120deg,var(--gold-l),var(--gold));color:#231603}
.gold h2,.gold h3{color:#231603}
.gold .lede,.gold .microcopy{color:#4a3208}
.gold .eyebrow{color:#5b3c05}
.gold .brush{color:#3a2503;background:none;-webkit-background-clip:border-box;background-clip:border-box}

/* card variants */
.card--bar{border-top:5px solid var(--gold);border-radius:6px 6px var(--radius) var(--radius)}
.card--edge{border-left:5px solid var(--gold);border-radius:6px var(--radius) var(--radius) 6px;display:flex;gap:16px;align-items:flex-start}
.card--edge .em{font-size:28px;line-height:1.2}
.ink .card--bar{border-top-color:var(--gold-l)}
.ink .card--edge{border-left-color:var(--gold-l)}

/* quote marks on reviews */
.review{position:relative}
.review::before{content:"\201C";position:absolute;right:20px;top:2px;font-family:'Montserrat',serif;font-weight:900;
  font-size:74px;line-height:1;color:rgba(245,168,28,.20)}

/* alternating steps */
@media (min-width:901px){
  .steps .stepcard:nth-child(even){margin-left:64px}
  .steps .stepcard:nth-child(odd){margin-right:64px}
}
.ink .stepcard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.ink .stepcard p{color:#c6bcae}
.ink .stepcard::before{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#231603}
.ink .day{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
.ink .day span{color:#c6bcae}
.ink .day.last{background:linear-gradient(180deg,var(--gold-l),var(--gold));border-color:transparent;color:#231603}
.ink .day.last span{color:#4a3208}
.gold .card,.gold .stepcard,.gold .offer{background:#fff}

/* pull quote */
.pull{max-width:900px;margin:0 auto;text-align:center;font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(24px,3.4vw,40px);line-height:1.15;text-transform:uppercase;letter-spacing:-.02em}
.pull .brush{text-transform:none}

.gold .stat .n{color:#231603}
.gold .stat .l{color:#5b3c05}
.band--ink{background:var(--dark);color:#f3ece3}
.band--ink h2{color:#fff}
.band--ink .btn-primary{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#231603}

/* slant fixes */
.slant{background:transparent}
.slant.ink{background:transparent}
.slant.gold{background:transparent}
.slant.ink::before{background:var(--dark)}
.slant.gold::before{background:linear-gradient(120deg,var(--gold-l),var(--gold))}

/* white cards inside dark sections keep dark text */
.ink .offer,.ink .offer h2{color:var(--ink)}
.ink .offer .microcopy{color:var(--ink-soft)}
.ink .offer .ticks li{color:var(--ink)}
.gold .offer,.gold .offer h2{color:var(--ink)}

.gold .btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(20,17,14,.25)}
.gold .offer .btn-primary{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#231603}

/* slant spacing: diagonal belongs to the section below */
.slant{padding-top:clamp(42px,4.4vw,60px)}
.slant::before{inset:-24px 0 -44px}
.before-slant{padding-bottom:calc(clamp(54px,7.5vw,96px) + 58px)}