:root{
  --graf:#2B2B2B;
  --graf-soft:#5A5A5A;
  --petrol:#234E52;
  --champ:#D8C4A0;
  --champ-light:#EADFC6;
  --champ-deep:#B69E72;
  --cream:#F4EFE4;
  --white:#FFFFFF;
  --line:rgba(182,158,114,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--cream);color:var(--graf);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Merriweather',serif;line-height:1.2;font-weight:700}
a{color:var(--petrol);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  font-weight:600;color:var(--champ-deep);margin-bottom:16px}
section{padding:104px 0}
@media(max-width:720px){section{padding:68px 0}}
.sec-h2{font-size:clamp(27px,3.6vw,38px);max-width:22ch}
.intro{margin-top:20px;color:var(--graf-soft);max-width:62ch}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:60;background:var(--cream);
  border-bottom:1px solid var(--line)}
.nav{max-width:1060px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo svg{width:42px;height:42px;flex:none}
.logo .wm{font-family:'Merriweather',serif;font-weight:700;
  letter-spacing:.09em;font-size:16.5px;color:var(--graf);white-space:nowrap}
.logo .wm b{color:var(--champ-deep)}
nav.menu{margin-left:auto;display:flex;align-items:center;gap:28px}
nav.menu a{color:var(--graf);font-weight:500;font-size:14.5px}
nav.menu a:hover,nav.menu a[aria-current="page"]{color:var(--petrol);text-decoration:none}
nav.menu a[aria-current="page"]{border-bottom:2px solid var(--champ)}
nav.menu a.btn{color:var(--cream);font-weight:600}
nav.menu a.btn:hover{color:var(--graf);background:transparent}
.btn{display:inline-block;background:var(--graf);color:var(--cream);
  font-weight:600;font-size:15px;padding:13px 26px;border-radius:4px;
  border:1.5px solid var(--graf);transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--graf);text-decoration:none}
.btn.ghost{background:transparent;color:var(--graf)}
.btn.ghost:hover{background:var(--graf);color:var(--cream)}
.btn.sm{padding:10px 18px;font-size:13.5px}
.burger{display:none;margin-left:auto;cursor:pointer;border:1px solid var(--line);
  border-radius:4px;padding:8px 10px;font-size:18px;line-height:1;background:none;color:var(--graf)}
#navtoggle{display:none}
@media(max-width:880px){
  nav.menu{position:fixed;inset:75px 0 auto 0;background:var(--cream);
    flex-direction:column;align-items:flex-start;padding:22px 24px 26px;gap:18px;
    border-bottom:1px solid var(--line);display:none}
  #navtoggle:checked ~ nav.menu{display:flex}
  .burger{display:block}
}

/* ---------- HERO ---------- */
.hero{padding:124px 0 112px}
@media(max-width:720px){.hero{padding:72px 0 64px}}
.hero h1{font-size:clamp(36px,5.2vw,58px);font-weight:900;
  letter-spacing:-.015em;max-width:19ch}
.hero.sub h1{font-size:clamp(32px,4.6vw,50px);max-width:22ch}
.hero p.lead{margin-top:26px;font-size:19.5px;color:var(--graf-soft);max-width:56ch}
.hero p.lead i,.hero .microcopy i{font-family:'Merriweather',serif;font-style:italic;color:var(--graf)}
.hero .cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.hero .microcopy{margin-top:18px;font-size:13.5px;color:var(--graf-soft)}
.migas{font-size:13px;color:var(--graf-soft);margin-bottom:22px}
.migas a{color:var(--graf-soft);border-bottom:1px solid var(--line)}
.migas a:hover{text-decoration:none;color:var(--petrol)}

/* ---------- DOS CAMINOS ---------- */
.caminos{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dos{margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.dos{grid-template-columns:1fr}}
.camino{border:1px solid var(--line);border-top:3px solid var(--champ);padding:32px 30px;
  display:flex;flex-direction:column;background:var(--cream)}
.camino .para{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--champ-deep)}
.camino h3{font-size:23px;margin:12px 0 12px}
.camino p{color:var(--graf-soft);font-size:15.5px}
.camino ul{margin:18px 0 26px;padding-left:18px;font-size:15px}
.camino li{margin-bottom:6px}
.camino .acciones{margin-top:auto;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.camino .acciones a.mas{font-size:14.5px;font-weight:600}

/* ---------- EL PROBLEMA ---------- */
.problema{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.cards.tres{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.cards,.cards.tres{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.cards,.cards.tres{grid-template-columns:1fr}}
.card{padding-top:18px;border-top:2px solid var(--champ)}
.card h3{font-size:17px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--graf-soft)}

/* ---------- OSCURO (método / proceso) ---------- */
.metodo{background:var(--graf);color:var(--cream)}
.metodo .eyebrow{color:var(--champ)}
.metodo h2{font-size:clamp(30px,4vw,44px);max-width:22ch;font-weight:900;letter-spacing:-.01em}
.steps{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(216,196,160,.25);border:1px solid rgba(216,196,160,.25)}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--graf);padding:30px 24px}
.step .n{font-family:'Inter',sans-serif;font-weight:600;color:var(--champ);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.step h3{font-size:18px;margin:12px 0 10px;color:var(--cream)}
.step p{font-size:14.5px;color:rgba(244,239,228,.7)}
.metodo .intro{color:rgba(244,239,228,.75)}
.metodo .nota{margin-top:34px;border-left:2px solid var(--champ);
  padding:4px 0 4px 22px;max-width:64ch;font-size:16px;color:rgba(244,239,228,.85)}
.metodo .nota i{font-family:'Merriweather',serif}
.metodo a{color:var(--champ)}

/* ---------- QUIÉN ---------- */
.quien .caja{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:start}
@media(max-width:720px){.quien .caja{grid-template-columns:1fr;gap:26px}}
.quien .caja{grid-template-columns:260px 1fr}
.quien .foto{aspect-ratio:3/4;background:var(--graf);border-bottom:3px solid var(--champ);overflow:hidden}
.quien .foto img{width:100%;height:100%;object-fit:cover}
@media(max-width:720px){.quien .caja{grid-template-columns:1fr}.quien .foto{max-width:300px}}
.quien h2{font-size:clamp(26px,3.2vw,34px);max-width:24ch}
.quien p{margin-top:16px;color:var(--graf-soft);max-width:60ch}
.quien .dato{margin-top:22px;display:flex;gap:34px;flex-wrap:wrap}
.quien .dato div{border-top:2px solid var(--champ);padding-top:10px;font-size:14px;color:var(--graf-soft)}
.quien .dato b{display:block;font-family:'Merriweather',serif;font-size:22px;color:var(--graf)}

/* ---------- RESEÑAS ---------- */
.resenas{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.citas{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.citas{grid-template-columns:1fr}}
.citas blockquote{border-left:2px solid var(--champ);padding:6px 0 6px 24px}
.citas blockquote p{font-family:'Merriweather',serif;font-style:italic;font-size:17.5px;line-height:1.55}
.citas blockquote footer{margin-top:12px;font-size:13px;color:var(--graf-soft);padding:0}

/* ---------- LISTA DE ENTREGABLES ---------- */
.entregables{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 36px}
@media(max-width:820px){.entregables{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.entregables{grid-template-columns:1fr}}
.entregables .e{padding-top:16px;border-top:2px solid var(--champ)}
.entregables h3{font-size:16px;margin-bottom:7px}
.entregables p{font-size:14px;color:var(--graf-soft);line-height:1.55}
.metodo .entregables h3,.ctafinal .entregables h3{color:var(--cream)}
.metodo .entregables p,.ctafinal .entregables p{color:rgba(244,239,228,.7)}
.aclara{margin-top:34px;max-width:64ch;font-size:15px;color:var(--graf-soft);
  border-left:2px solid var(--champ);padding:4px 0 4px 20px}

/* ---------- PREGUNTAS ---------- */
.faq .lista{margin-top:40px;max-width:780px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:'Merriweather',serif;font-weight:700;
  font-size:18px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Inter',sans-serif;color:var(--champ-deep);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--graf-soft);max-width:68ch}

/* ---------- CTA ---------- */
.ctafinal{background:var(--graf);color:var(--cream);text-align:center}
.ctafinal .eyebrow{color:var(--champ)}
.ctafinal h2{font-size:clamp(29px,4.2vw,44px);max-width:20ch;margin:0 auto}
.ctafinal p.sub{margin:22px auto 0;max-width:56ch;color:rgba(244,239,228,.75)}
.ctafinal p.sub i{font-family:'Merriweather',serif;font-style:italic;color:var(--champ)}
.ctafinal .entregables{max-width:900px;margin-left:auto;margin-right:auto;text-align:left}
.garantia{margin:48px auto 0;max-width:620px;border:1px solid var(--champ);
  border-radius:8px;padding:26px 30px;background:rgba(216,196,160,.06)}
.garantia p{font-family:'Merriweather',serif;font-style:italic;font-size:16.5px;color:var(--cream)}
.ctafinal .cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn.champ{background:var(--champ);border-color:var(--champ);color:var(--graf)}
.btn.champ:hover{background:transparent;color:var(--champ)}
.btn.line{background:transparent;border-color:rgba(244,239,228,.5);color:var(--cream)}
.btn.line:hover{border-color:var(--cream);background:var(--cream);color:var(--graf)}
.ctafinal .cupos{margin-top:22px;font-size:13.5px;color:rgba(244,239,228,.6)}

/* ---------- FOOTER ---------- */
footer.pie{padding:52px 0 42px}
.f{display:flex;align-items:flex-start;gap:48px;flex-wrap:wrap}
.f .col{min-width:190px}
.f .logo .wm{font-size:15px}
.f .tag{margin-top:14px;font-family:'Merriweather',serif;font-style:italic;
  font-size:14.5px;color:var(--graf-soft)}
.f h4{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--champ-deep);margin-bottom:14px}
.f ul{list-style:none}
.f li{margin-bottom:9px;font-size:14.5px}
.f a{color:var(--graf)}
.f a:hover{color:var(--petrol)}
.legal{margin-top:42px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--graf-soft);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.quien .guardar{margin-top:28px}
.quien .guardar-nota{display:inline-block;margin:10px 0 0 12px;font-size:13.5px;color:var(--graf-soft)}
@media(max-width:520px){.quien .guardar-nota{display:block;margin-left:0}}