/* =========================================================
   PLANNERS ELITE — Landing page
   Paleta clara y editorial: marfil, crema, arena,
   negro suave, terracota como acento principal
   y dorado solo como detalle.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --white:#FFFFFF;
  --ivory:#FFFDFA;
  --cream:#FAF7F2;
  --sand:#F4EEE6;
  --beige:#E8DFD2;
  --line:#EAE1D4;
  --ink:#23201C;
  --ink-soft:#332E28;
  --body:#5A544C;
  --muted:#8C8377;
  --terra:#B4694F;
  --terra-dark:#96543D;
  --terra-soft:#F6EBE5;
  --gold:#A98A5B;

  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:"Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap:1200px;
  --narrow:760px;
  --pad:clamp(1.25rem, 5vw, 3rem);
  --sec-y:clamp(4.5rem, 11vw, 9rem);
  --r:4px;
  --r-lg:10px;
  --shadow:0 1px 2px rgba(35,32,28,.03), 0 12px 34px -20px rgba(35,32,28,.18);
  --shadow-lg:0 2px 4px rgba(35,32,28,.04), 0 28px 60px -30px rgba(35,32,28,.26);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--ivory); color:var(--body);
  font-family:var(--sans); font-weight:300; font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
table{border-collapse:collapse; width:100%}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; color:var(--ink); letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--terra); outline-offset:3px; border-radius:2px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--ivory); padding:.75rem 1.25rem;
}
.skip:focus{left:.5rem; top:.5rem}

/* ---------- 3. Layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.narrow{max-width:var(--narrow); margin-inline:auto}
.center{text-align:center}

.sec{padding-block:var(--sec-y); position:relative}
.sec--tight{padding-block:clamp(3.5rem,8vw,6rem)}
.sec--white{background:var(--white)}
.sec--cream{background:var(--cream)}
.sec--sand{background:var(--sand)}

.sec__head{max-width:760px; margin:0 auto clamp(2.75rem,6vw,4.5rem)}
.sec__head.reveal{text-align:center}
.sec__sub{color:var(--muted); max-width:62ch; margin-inline:auto; text-align:center}

.grid-2{display:grid; gap:clamp(2.25rem,5vw,4.5rem); align-items:start}
.grid-2>*,.cards>*,.incl>*,.quotes>*,.steps>*,.gallery>*{min-width:0}
@media(min-width:900px){
  .grid-2{grid-template-columns:1fr 1fr; align-items:center}
  .grid-2--media{grid-template-columns:.85fr 1fr; gap:clamp(3rem,6vw,6rem)}
  .grid-2--rev .ph{order:2}
  .grid-2--fit{align-items:stretch}
}

/* ---------- 4. Tipografía ---------- */
h1{
  font-size:clamp(2.5rem,1.5rem + 4.4vw,4.35rem); line-height:1.05;
  font-weight:300; letter-spacing:-.02em; color:var(--ink);
}
h1 em,.h2 em,.h3 em{font-style:italic; color:var(--terra)}
.h2{font-size:clamp(2rem,1.3rem + 2.9vw,3.5rem); line-height:1.1; font-weight:300; margin-bottom:.7em}
.h3{font-size:clamp(1.45rem,1.2rem + 1vw,2rem); line-height:1.2; margin-bottom:.6em}

.eyebrow{
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--terra);
  margin:0 0 1.1rem;
}

.lead{font-size:clamp(1.1rem,1.02rem + .4vw,1.3rem); color:var(--ink-soft); line-height:1.6}

.mini-title{
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  margin:2rem 0 1.1rem; padding-bottom:.7rem; border-bottom:1px solid var(--line);
}

.strong-line{
  font-family:var(--serif); font-size:clamp(1.2rem,1.05rem + .7vw,1.6rem);
  line-height:1.4; color:var(--ink); font-style:italic; margin-top:1.5rem;
}
.closer{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem,1.05rem + .6vw,1.55rem); line-height:1.4;
  color:var(--ink); margin-top:2rem;
}
.center.closer{margin-top:clamp(2.5rem,5vw,3.5rem); max-width:62ch; margin-inline:auto}

/* Cifra o frase destacada (comisiones, inversión) */
.figure-xl{
  font-family:var(--serif); font-size:clamp(1.7rem,1.2rem + 2.4vw,2.9rem);
  line-height:1.25; color:var(--ink); margin:clamp(1.75rem,4vw,2.5rem) 0;
}
.figure-xl strong{font-weight:400; color:var(--terra)}

/* Banda de nota destacada */
.note-band{
  margin-top:clamp(2.5rem,5vw,3.5rem); max-width:70ch; margin-inline:auto;
  font-family:var(--serif); font-size:clamp(1.1rem,1rem + .5vw,1.4rem);
  line-height:1.45; color:var(--ink);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding-block:clamp(1.25rem,3vw,1.75rem);
}

/* Frase editorial destacada */
.pull{
  margin-top:clamp(2.5rem,5vw,3.5rem); max-width:62ch; margin-inline:auto;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,1.05rem + .8vw,1.7rem); line-height:1.4;
  color:var(--ink); text-align:center; padding-left:0;
  border-left:0; position:relative;
}
.pull::before{
  content:""; display:block; width:44px; height:1px; background:var(--gold);
  margin:0 auto 1.5rem;
}

/* ---------- 5. Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--sans); font-size:.92rem; font-weight:500; letter-spacing:.03em;
  padding:1.05rem 1.9rem; border-radius:var(--r); text-align:center; line-height:1.2;
  transition:transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn--solid{background:var(--terra); color:#fff; box-shadow:0 10px 26px -16px rgba(180,105,79,.9)}
.btn--solid:hover{background:var(--terra-dark); transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(180,105,79,.95)}
.btn--ghost{border:1px solid var(--beige); color:var(--ink); background:var(--white)}
.btn--ghost:hover{border-color:var(--terra); color:var(--terra)}
.btn--lg{padding:1.2rem 2.4rem; font-size:1rem}
.btn--sm{padding:.72rem 1.35rem; font-size:.82rem}
.btn--block{display:flex; width:100%}

/* ---------- 6. Navbar ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:76px}
.nav__brand{display:flex; align-items:center; gap:.7rem}
.nav__mark{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--beige); position:relative;
}
.nav__mark::after{content:""; position:absolute; inset:6px; border-radius:50%; background:var(--gold)}
.nav__name{
  font-family:var(--serif); font-size:1.08rem; color:var(--ink);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
}
.nav__name em{
  font-style:italic; color:var(--gold); text-transform:none;
  font-size:1.22rem; letter-spacing:.01em; margin-left:.22em;
}

.nav__links{display:flex; align-items:center; gap:2rem}
.nav__links a{
  font-size:.85rem; font-weight:400; letter-spacing:.04em; color:var(--ink-soft);
  transition:color .3s var(--ease); position:relative; white-space:nowrap;
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--terra); transition:width .35s var(--ease);
}
.nav__links a:not(.btn):hover{color:var(--terra)}
.nav__links a:not(.btn):hover::after{width:100%}
.nav__cta{color:#fff !important}

.nav__burger{display:none; width:44px; height:44px; padding:10px; margin-right:-10px}
.nav__burger span{
  display:block; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav__burger span+span{margin-top:5px}

.nav.is-stuck{
  background:rgba(255,253,250,.93); backdrop-filter:blur(14px);
  border-color:var(--line); box-shadow:0 1px 24px -16px rgba(35,32,28,.4);
}

@media(max-width:1080px){
  .nav__links{gap:1.35rem}
  .nav__links a:not(.btn){font-size:.8rem}
}
@media(max-width:960px){
  .nav__burger{display:block}
  .nav__links{
    position:fixed; inset:76px 0 auto; flex-direction:column; align-items:stretch;
    gap:0; background:var(--ivory); padding:1rem var(--pad) 2rem;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .4s var(--ease), opacity .3s var(--ease);
    max-height:calc(100dvh - 76px); overflow-y:auto;
  }
  .nav__links.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav__links a{padding:1rem 0; border-bottom:1px solid var(--line); font-size:1rem}
  .nav__links a:not(.btn)::after{display:none}
  .nav__cta{margin-top:1.5rem; border-bottom:0 !important; justify-content:center; padding:1.05rem 1.5rem; font-size:.95rem}
  .nav.is-open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .nav.is-open .nav__burger span:nth-child(2){opacity:0}
  .nav.is-open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ---------- 7. Placeholders de imagen ---------- */
.ph{
  position:relative; margin:0; overflow:hidden; border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 20% 10%, #F7F1E8 0%, transparent 60%),
    radial-gradient(100% 100% at 85% 90%, #EADDCC 0%, transparent 55%),
    linear-gradient(150deg,#F5EEE4 0%,#E9DDCC 55%,#DFD1BC 100%);
  background-size:cover; background-position:center;
  min-height:220px;
}
.ph::after{
  content:attr(data-label);
  position:absolute; inset:auto .9rem .9rem; z-index:2;
  font-family:var(--sans); font-size:.68rem; font-weight:400; line-height:1.45;
  letter-spacing:.06em; text-transform:uppercase; color:#75695B;
  background:rgba(255,255,255,.85); backdrop-filter:blur(4px);
  border:1px solid rgba(117,105,91,.16); border-radius:var(--r);
  padding:.55rem .7rem; text-align:center;
}
.ph::before{
  content:"Sustituir imagen"; position:absolute; top:.9rem; left:.9rem; z-index:2;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:#fff; background:var(--terra); padding:.3rem .6rem; border-radius:2px;
}
.ph.has-img::before,.ph.has-img::after{display:none}
/* Hueco sin fotografía: se oculta y el bloque se reacomoda */
.ph.is-empty{display:none}
.gallery.is-empty{display:none}
@media(min-width:900px){
  .grid-2--media.is-solo{grid-template-columns:1fr; max-width:840px; margin-inline:auto}
}
.ph--tall,.ph--portrait{aspect-ratio:4/5}
.ph--wide{aspect-ratio:16/10}
.ph--avatar{min-height:0; width:48px; height:48px; border-radius:50%; flex:0 0 auto}
.ph--avatar::before,.ph--avatar::after{display:none}

/* ---------- 8. Hero (claro y editorial) ---------- */
.hero{position:relative; min-height:min(100svh,860px); display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate; background:var(--ivory)}
.hero__media{position:absolute; inset:0; border-radius:0; min-height:100%; z-index:-2}
.hero__media::after{bottom:auto; top:6.5rem; left:auto; right:1.25rem; transform:none; width:max-content; max-width:min(60vw,320px); z-index:1}
.hero__media::before{top:6.5rem; left:auto; right:1.25rem; transform:translateY(-150%); z-index:1}
/* Velo marfil: mantiene la foto visible pero deja el texto en negro suave */
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(255,253,250,.97) 0%, rgba(255,253,250,.94) 38%, rgba(255,253,250,.74) 78%, rgba(255,253,250,.62) 100%),
    linear-gradient(180deg, rgba(255,253,250,.6) 0%, rgba(255,253,250,0) 30%);
}
@media(max-width:900px){
  .hero__scrim{background:linear-gradient(180deg, rgba(255,253,250,.96) 0%, rgba(255,253,250,.93) 60%, rgba(255,253,250,.96) 100%)}
}
.hero__body{padding-block:clamp(6.5rem,13vh,8.5rem) clamp(2rem,4vw,3rem); max-width:1100px}
.hero__sub{color:var(--ink-soft); max-width:56ch; font-size:clamp(1.02rem,.98rem + .3vw,1.18rem); margin-top:1.3rem}
.hero__sub--2{color:var(--body); font-size:1.02rem; max-width:62ch}
.hero__sub strong{color:var(--ink); font-weight:500}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.9rem}
.hero__micro{margin-top:1rem; font-size:.85rem; color:var(--muted); letter-spacing:.03em}

.hero__trust{border-top:1px solid var(--line); background:rgba(255,253,250,.82); backdrop-filter:blur(6px)}
.hero__trust-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem 1.35rem;
  padding-block:1.1rem; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}
.hero__trust-inner strong{color:var(--ink); font-weight:500}
.dot{width:3px; height:3px; border-radius:50%; background:var(--gold); flex:0 0 auto}
@media(max-width:640px){ .dot{display:none} .hero__trust-inner{gap:.35rem 1rem; font-size:.7rem} }

/* ---------- 9. Listas ---------- */
.list-check li,.list-x li{position:relative; padding-left:2rem; margin-bottom:.95rem; line-height:1.6}
.list-check li::before{
  content:""; position:absolute; left:0; top:.58em; width:11px; height:6px;
  border-left:1.5px solid var(--terra); border-bottom:1.5px solid var(--terra);
  transform:rotate(-45deg);
}
.list-x li::before{
  content:""; position:absolute; left:.15rem; top:.62em; width:11px; height:11px;
  background:
    linear-gradient(45deg,transparent 45%,var(--muted) 45%,var(--muted) 55%,transparent 55%),
    linear-gradient(-45deg,transparent 45%,var(--muted) 45%,var(--muted) 55%,transparent 55%);
  transform:translateY(-50%);
}
.list-check--center{display:inline-block; text-align:left; margin-top:1.75rem}
/* Lista neutra, sin iconos de X */
.list-plain li{position:relative; padding-left:1.5rem; margin-bottom:.95rem; line-height:1.6}
.list-plain li::before{
  content:""; position:absolute; left:0; top:.78em; width:7px; height:1px; background:var(--muted);
}

/* ---------- 10. Calculadora ---------- */
.calc{
  margin-top:clamp(3rem,7vw,5rem); background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.75rem,4vw,3.25rem); box-shadow:var(--shadow);
  text-align:center;
}
.calc__head{margin-bottom:2.25rem}
.calc__head .eyebrow{margin-bottom:.75rem}
.calc__head .h3{margin-bottom:0}
.calc__body{display:grid; gap:2rem; text-align:left; margin-bottom:1.75rem}
@media(min-width:820px){ .calc__body{grid-template-columns:1fr 1.05fr; gap:3rem; align-items:center} }

.calc__fields{display:grid; gap:1.35rem}
.field{display:block}
.field__label{display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem}
.field input{
  width:100%; font-family:var(--serif); font-size:1.9rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
  padding:.75rem 1rem; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field input:focus{background:#fff; border-color:var(--terra); outline:none}

.calc__out{background:var(--terra-soft); border-radius:var(--r); padding:clamp(1.5rem,3vw,2rem); border:1px solid #EDDCD2}
.calc__out-label{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--terra); margin-bottom:.5rem}
.calc__figure{font-family:var(--serif); font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem); line-height:1; color:var(--ink); margin-bottom:.75rem}
.calc__split{font-size:.9rem; color:var(--ink-soft); margin-bottom:.6rem}
.calc__note{font-size:.88rem; color:var(--muted); margin:0}

.disclaimer{font-size:.78rem; line-height:1.6; color:var(--muted); max-width:66ch; margin:1.75rem auto 0}
.calc .disclaimer{margin:0 auto 1.75rem}

/* ---------- 11. Tarjetas ---------- */
.cards{display:grid; gap:clamp(1rem,2vw,1.5rem)}
@media(min-width:680px){ .cards--3,.cards--4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--4{grid-template-columns:repeat(4,1fr)}
}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.6vw,2.15rem); position:relative;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--beige)}
.card h3{font-size:1.3rem; margin-bottom:.55rem; line-height:1.25}
.card p{font-size:.96rem; margin-bottom:.5rem}
.card__num{
  font-family:var(--sans); font-size:.7rem; font-weight:500; color:var(--terra);
  display:block; margin-bottom:1.1rem; letter-spacing:.2em;
}
.sec--white .card{background:var(--cream); border-color:transparent}
.sec--white .card:hover{border-color:var(--line)}

/* ---------- 12. Pasos ---------- */
.steps{display:grid; gap:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:900px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{position:relative; padding-top:2.5rem; border-top:1px solid var(--line)}
.step__num{
  font-family:var(--serif); font-style:italic; font-size:2.6rem; line-height:1;
  color:var(--beige); display:block; margin-bottom:1.1rem;
}
.step h3{font-size:1.45rem; margin-bottom:.6rem}
.step p{font-size:.98rem}

/* ---------- 13. Qué incluye ---------- */
.incl{display:grid; gap:clamp(1.75rem,3vw,2.5rem)}
@media(min-width:720px){ .incl{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1080px){ .incl{grid-template-columns:repeat(4,1fr)} }
.incl__col{background:var(--cream); border-radius:var(--r-lg); padding:clamp(1.6rem,2.6vw,2.1rem); border:1px solid var(--line)}
.incl__col h3{font-size:1.28rem; margin-bottom:1.2rem; padding-bottom:.9rem; border-bottom:1px solid var(--line)}
.incl__col li{font-size:.93rem; margin-bottom:.8rem}

/* ---------- 14. Features (capacitaciones) ---------- */
.feat{padding:1.4rem 0; border-top:1px solid var(--line)}
.feat:first-of-type{margin-top:.5rem}
.feat h3{font-size:1.22rem; margin-bottom:.35rem}
.feat p{font-size:.96rem; margin:0}

/* ---------- 15. Galería ---------- */
.gallery{display:grid; gap:clamp(1rem,2vw,1.25rem); margin-top:clamp(2.5rem,5vw,3.5rem)}
@media(min-width:820px){
  .gallery{grid-template-columns:1.6fr 1fr 1fr}
  .gallery .ph{aspect-ratio:auto; min-height:300px}
}

/* ---------- 16. Flujo de comisión ---------- */
.flow{
  display:grid; gap:1rem; margin:clamp(2rem,4vw,3rem) auto 0; max-width:840px;
}
@media(min-width:760px){ .flow{grid-template-columns:repeat(3,1fr); gap:1.25rem} }
.flow li{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.75rem 1.35rem; font-size:1rem; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.85rem;
}
.flow__num{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold);
  display:grid; place-items:center; font-family:var(--serif); font-size:.95rem;
}

/* ---------- 17. Tablas ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg); max-width:100%}
.tbl{font-size:.94rem; background:var(--white); border-radius:var(--r-lg); overflow:hidden}
.tbl th,.tbl td{padding:1.05rem 1.15rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.tbl thead th{
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); background:var(--cream); vertical-align:bottom;
}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}

.tbl--compare{min-width:820px; font-size:.9rem; line-height:1.55}
.tbl--compare tbody th{
  font-family:var(--sans); font-weight:500; font-size:.86rem; color:var(--ink);
  background:var(--cream); white-space:nowrap; letter-spacing:.04em;
}
.tbl--compare td{color:var(--body)}
.tbl--compare .is-us{background:var(--terra-soft); color:var(--ink)}
.tbl--compare thead .is-us{background:var(--terra); color:#fff; font-weight:500}

/* En móvil la tabla se apila en tarjetas: sin scroll horizontal ni texto cortado */
@media(max-width:760px){
  #comparativa .table-wrap{overflow:visible; border-radius:0}
  .tbl--compare{min-width:0; background:none; display:block}
  .tbl--compare thead{display:none}
  .tbl--compare tbody,.tbl--compare tr{display:block}
  .tbl--compare tr{
    background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
    padding:1.25rem 1.35rem 1.35rem; margin-bottom:1rem;
  }
  .tbl--compare tbody th,.tbl--compare td{display:block; border:0; padding:0}
  .tbl--compare tbody th{
    background:none; white-space:normal; font-family:var(--serif); font-weight:400;
    font-size:1.25rem; color:var(--ink); letter-spacing:0;
    padding-bottom:.9rem; margin-bottom:1.1rem; border-bottom:1px solid var(--line);
  }
  .tbl--compare td{margin-bottom:1.1rem; font-size:.94rem}
  .tbl--compare td:last-child{margin-bottom:0}
  .tbl--compare td::before{
    content:attr(data-col); display:block; margin-bottom:.3rem;
    font-family:var(--sans); font-size:.66rem; font-weight:500;
    letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  }
  .tbl--compare .is-us{
    background:var(--terra-soft); border-radius:var(--r);
    padding:.9rem 1rem; margin-top:.25rem;
  }
  .tbl--compare .is-us::before{color:var(--terra)}
}

/* ---------- 18. Para quién ---------- */
.fit{padding:clamp(1.75rem,3vw,2.5rem); border-radius:var(--r-lg); height:100%}
.fit--yes{background:var(--cream); border:1px solid var(--line)}
.fit--no{background:var(--white); border:1px solid var(--line)}
.fit .h3{margin-bottom:1.5rem}
.fit li{font-size:.97rem}
.fit--no .eyebrow{color:var(--muted)}

/* ---------- 19. Inversión y garantía ---------- */
.lock{
  margin-top:clamp(2.25rem,4vw,3rem); background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.25rem); text-align:center;
}
.lock h3{font-size:1.3rem; margin-bottom:.5rem}
.lock p{font-size:.96rem; color:var(--body); margin:0}
.mt-cta{margin-top:clamp(2.25rem,4vw,3rem)}

.guarantee{
  background:var(--cream); border:1px solid var(--line); color:var(--body);
  border-radius:var(--r-lg); padding:clamp(1.85rem,4vw,3rem);
  display:grid; gap:clamp(1.5rem,3vw,2.5rem); align-items:start;
}
@media(min-width:760px){ .guarantee{grid-template-columns:auto 1fr} }
.guarantee__seal{
  width:104px; height:104px; border-radius:50%; border:1px solid var(--gold); color:var(--gold);
  display:grid; place-items:center; font-family:var(--serif); font-size:2.4rem; line-height:1;
  position:relative; margin-inline:auto; background:var(--white);
}
.guarantee__seal::after{
  content:"MESES"; position:absolute; bottom:22px; font-family:var(--sans);
  font-size:.5rem; letter-spacing:.22em;
}
.guarantee h3{font-size:1.5rem; margin-bottom:.75rem}
.guarantee p{font-size:1rem}
.guarantee__ex{font-size:.86rem; color:var(--muted); margin-top:1rem}

/* ---------- 20. Testimonios (sección desactivada, estilos listos) ---------- */
.quotes{display:grid; gap:clamp(1.25rem,2.5vw,1.75rem)}
@media(min-width:900px){ .quotes{grid-template-columns:repeat(3,1fr)} }
.quote{
  margin:0; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.75rem,3vw,2.25rem); position:relative; display:flex; flex-direction:column;
}
.quote__mark{font-family:var(--serif); font-size:4.5rem; line-height:.6; color:var(--beige); height:2rem; margin-bottom:1rem}
.quote blockquote{margin:0 0 1.75rem; font-family:var(--serif); font-size:1.16rem; line-height:1.55; color:var(--ink); flex:1}
.quote figcaption{display:flex; align-items:center; gap:.9rem; padding-top:1.25rem; border-top:1px solid var(--line)}
.quote figcaption strong{display:block; font-weight:500; color:var(--ink); font-size:.95rem}
.quote figcaption em{display:block; font-style:normal; font-size:.83rem; color:var(--muted)}

/* ---------- 21. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none; cursor:pointer; padding:1.4rem 3rem 1.4rem 0; position:relative;
  font-family:var(--serif); font-size:clamp(1.12rem,1.05rem + .35vw,1.35rem);
  color:var(--ink); line-height:1.35; transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--terra)}
.faq__item summary::after,.faq__item summary::before{
  content:""; position:absolute; right:.35rem; top:50%; background:var(--terra);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.faq__item summary::before{width:14px; height:1.5px; transform:translateY(-50%)}
.faq__item summary::after{width:1.5px; height:14px; right:6.5px; transform:translateY(-50%)}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(90deg); opacity:0}
.faq__a{padding:0 3rem 1.6rem 0; font-size:1rem; color:var(--body)}
.faq__a p{margin:0}

/* ---------- 22. CTA final (claro) ---------- */
.cta{position:relative; padding-block:clamp(5rem,12vw,9rem); isolation:isolate; text-align:center; background:var(--ivory)}
.cta__media{position:absolute; inset:0; border-radius:0; min-height:100%; z-index:-2}
.cta__media::after{inset:auto auto 1rem 1rem; max-width:min(70vw,320px)}
.cta__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,253,250,.95) 0%, rgba(255,253,250,.9) 55%, rgba(255,253,250,.95) 100%);
}
.cta h2{max-width:22ch; margin-inline:auto}
.cta .lead{max-width:56ch; margin-inline:auto}
.cta__soft{margin-top:1rem; color:var(--muted); font-size:.95rem}
.cta .hero__actions{justify-content:center; margin-top:2.5rem}
.cta .hero__micro{text-align:center}

/* ---------- 23. Footer (claro) ---------- */
.foot{background:var(--cream); color:var(--body); border-top:1px solid var(--line); padding-block:clamp(3.5rem,7vw,5rem) 2rem; font-size:.92rem}
.foot__inner{display:grid; gap:clamp(2.5rem,5vw,4rem)}
@media(min-width:860px){ .foot__inner{grid-template-columns:1fr 1.3fr} }
.foot__name{
  font-family:var(--serif); font-size:1.4rem; color:var(--ink);
  margin-bottom:1.1rem; letter-spacing:.16em; text-transform:uppercase;
}
.foot__name em{font-style:italic; color:var(--gold); text-transform:none; font-size:1.6rem; letter-spacing:.01em; margin-left:.22em}
.foot__tag{max-width:38ch; font-size:.95rem; line-height:1.65}
.foot__nav{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2rem}
.foot__nav h4{
  font-family:var(--sans); font-size:.72rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--terra); margin-bottom:1.1rem;
}
.foot__nav a{display:block; padding:.4rem 0; color:var(--body); transition:color .3s var(--ease)}
.foot__nav a:hover{color:var(--terra)}
.foot__legal{margin-top:clamp(3rem,6vw,4.5rem); padding-top:2rem; border-top:1px solid var(--line)}
.foot__legal p{font-size:.8rem; line-height:1.65; color:var(--muted); max-width:80ch}
.foot__copy{display:flex; flex-wrap:wrap; gap:.75rem 1.75rem; margin-top:1.5rem; align-items:center}

/* ---------- 24. CTA móvil + WhatsApp ---------- */
.mobile-cta{
  position:fixed; inset:auto 0 0; z-index:95; padding:.75rem var(--pad) calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(255,253,250,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--ease); display:none;
}
.mobile-cta.is-visible{transform:none}
@media(max-width:960px){ .mobile-cta{display:block} }

.wa{
  position:fixed; right:1rem; bottom:1rem; z-index:96; width:52px; height:52px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 8px 22px -10px rgba(37,211,102,.9);
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.wa:hover{transform:scale(1.07)}
.wa svg{width:28px; height:28px; fill:#fff}
@media(max-width:960px){
  .wa{bottom:calc(5.4rem + env(safe-area-inset-bottom)); opacity:0; pointer-events:none; transform:scale(.85)}
  .wa.is-visible{opacity:1; pointer-events:auto; transform:none}
}

/* ---------- 25. Animaciones ---------- */
.js .reveal{opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
.reveal--delay{transition-delay:.12s}
.cards .reveal:nth-child(2),.quotes .reveal:nth-child(2),.steps .reveal:nth-child(2),.incl .reveal:nth-child(2){transition-delay:.09s}
.cards .reveal:nth-child(3),.quotes .reveal:nth-child(3),.steps .reveal:nth-child(3),.incl .reveal:nth-child(3){transition-delay:.18s}
.cards .reveal:nth-child(4),.incl .reveal:nth-child(4){transition-delay:.27s}
.cards .reveal:nth-child(5){transition-delay:.36s}
.cards .reveal:nth-child(6){transition-delay:.45s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none; transition:none}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------- 26. Impresión ---------- */
@media print{
  .nav,.mobile-cta,.wa,.hero__scrim{display:none}
  body{background:#fff; color:#000}
  .sec{padding-block:2rem; break-inside:avoid}
}