/* ==========================================================================
   RELACIONES CONSCIENTES — Marimar · María del Mar Alexander
   Maqueta de landing (CORE CLUB). Editorial cálido, sin dependencias.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --cream:      #FBF8F2;
  --sand:       #F3EEE6;
  --paper:      #FFFDFA;
  --blush:      #F4E8EF;
  --blush-2:    #F1E3ED;

  --plum:       #3B2B36;
  --plum-2:     #46333F;
  --plum-3:     #523C4A;

  --ink:        #241C22;
  --ink-soft:   #4A3D46;
  --ink-mute:   #6E6069;
  --ink-light:  #FBF4F7;
  --ink-light-2:#E5D5DF;

  /* malva: `mauve-deep` es el malva de TEXTO (contraste comprobado sobre crema);
     el botón usa un degradado más oscuro con texto blanco. */
  --mauve:      #A38C9B;
  --mauve-deep: #7B6372;
  --mauve-soft: #D9C3D1;
  --btn-1:      #977B8D;
  --btn-2:      #85697B;
  --btn-3:      #6C5263;

  --sage:       #A7B090;
  --sage-soft:  #E7F0D2;
  --sage-deep:  #66714D;

  --line:       rgba(59,43,54,.13);
  --line-light: rgba(251,244,247,.22);

  --wrap:       1120px;
  --narrow:     760px;
  --r:          16px;

  --ease:       cubic-bezier(.22,.61,.36,1);

  --f-display:  "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; overflow-x:clip; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-size:17px; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--mauve); color:#fff; }
:focus-visible{ outline:2px solid var(--mauve-deep); outline-offset:3px; border-radius:4px; }
[hidden]{ display:none !important; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }
.wrap--narrow{ max-width:var(--narrow); }
.center{ text-align:center; }
.sec{ padding:clamp(64px,9vw,118px) 0; position:relative; }
.sec--dark{ background:var(--plum); color:var(--ink-light); }
.sec--blush{ background:var(--blush); }
/* La cuadrícula de su web actual, como textura de marca */
.sec--grid{
  background-color:var(--sand);
  background-image:
    linear-gradient(rgba(255,253,250,.85) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255,253,250,.85) 1.5px, transparent 1.5px);
  background-size:30px 30px;
}
.sec__head{ text-align:center; margin-bottom:clamp(38px,5vw,60px); }

/* ---------- Tipografía ---------- */
.eyebrow,.kicker{
  font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--mauve-deep); margin:0 0 18px;
}
.kicker--light{ color:var(--mauve-soft); }
.h2{
  font-family:var(--f-display); font-weight:400; font-variation-settings:"SOFT" 60;
  font-size:clamp(1.9rem,4.1vw,3.05rem); line-height:1.14; letter-spacing:-.015em;
  margin:0 0 22px; text-wrap:balance;
}
.h2 em{ font-style:italic; color:var(--mauve-deep); }
.h2--light{ color:var(--ink-light); }
.h2--light em{ color:var(--mauve-soft); }
.lead{ font-size:clamp(1.02rem,1.6vw,1.16rem); color:var(--ink-soft); max-width:60ch; margin-inline:auto; }
.sec--dark .lead{ color:var(--ink-light-2); }
.pull{
  font-family:var(--f-display); font-style:italic; font-variation-settings:"SOFT" 80;
  font-size:clamp(1.35rem,2.9vw,2rem); line-height:1.3; color:var(--mauve-deep); margin:40px 0 0; text-wrap:balance;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  color:#fff; font-family:var(--f-body); font-weight:600; font-size:.98rem; letter-spacing:.01em; line-height:1.15;
  padding:1.05em 2em; border:0; border-radius:100px; text-decoration:none; cursor:pointer; text-align:center;
  background:var(--btn-2);
  background-image:linear-gradient(135deg, var(--btn-1) 0%, var(--btn-2) 50%, var(--btn-3) 100%);
  box-shadow:0 12px 30px -12px rgba(108,82,99,.8);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), filter .28s var(--ease);
}
.btn:hover{ filter:brightness(1.06); transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(108,82,99,.9); }
.btn:active{ transform:translateY(0); }
.btn--lg{ font-size:1.04rem; padding:1.2em 2.4em; }
.btn--sm{ font-size:.85rem; padding:.82em 1.35em; box-shadow:none; }
.btn--full{ width:100%; }
.btn--light{ color:var(--plum); background:var(--ink-light); background-image:none; box-shadow:0 12px 30px -14px rgba(20,10,16,.8); }
.btn--light:hover{ background:#fff; background-image:none; }
.btn__price{ opacity:.8; font-weight:400; font-size:.9em; }
.trust{ font-size:.85rem; color:var(--ink-mute); margin:16px 0 0; letter-spacing:.01em; text-wrap:balance; }
.trust--light{ color:var(--ink-light-2); }
.cta-inline{ margin-top:clamp(40px,5vw,60px); }

/* ---------- Barra superior ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px;
  background:rgba(251,248,242,0); border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
.topbar.is-stuck{
  background:rgba(251,248,242,.94); border-bottom-color:var(--line); padding-block:9px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.topbar__brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.topbar__logo{ width:40px; height:auto; }
.topbar__name{ font-family:var(--f-display); font-size:1.1rem; letter-spacing:.01em; line-height:1.1; }
.topbar__name small{ display:block; font-family:var(--f-body); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }
.topbar__cta{ opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.topbar.is-stuck .topbar__cta{ opacity:1; pointer-events:auto; transform:none; }
@media (max-width:640px){ .topbar__cta{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  position:relative; color:var(--ink);
  background:linear-gradient(180deg, #F7EEF2 0%, #F8F2EE 45%, var(--cream) 100%);
  padding:clamp(112px,15vw,150px) 0 clamp(60px,8vw,92px); overflow:hidden; isolation:isolate;
}
.hero__glow{
  position:absolute; z-index:-1; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(46% 40% at 50% 8%, rgba(217,195,209,.75), transparent 70%),
    radial-gradient(38% 32% at 86% 58%, rgba(167,176,144,.35), transparent 72%),
    radial-gradient(34% 30% at 12% 48%, rgba(241,227,237,.9), transparent 74%);
  filter:blur(26px); pointer-events:none;
}
.hero__inner{ text-align:center; }
.hero__title{
  font-family:var(--f-display); font-weight:300; font-variation-settings:"SOFT" 70;
  font-size:clamp(2.05rem,5.2vw,3.9rem); line-height:1.1; letter-spacing:-.02em;
  margin:0 auto 22px; max-width:21ch; text-wrap:balance; color:var(--ink);
}
.hero__title em{ font-style:italic; color:var(--mauve-deep); }
.hero__sub{ font-size:clamp(1.02rem,1.75vw,1.2rem); color:var(--ink-soft); max-width:58ch; margin:0 auto clamp(34px,4.5vw,48px); text-wrap:pretty; }
.hero__cta{ margin-top:clamp(28px,3.5vw,40px); }

/* ---------- VSL ---------- */
.vsl{ max-width:1040px; margin-inline:auto; }
.vsl__facade{
  position:relative; display:block; width:100%; padding:0; aspect-ratio:16/9; border:0; border-radius:var(--r);
  overflow:hidden; cursor:pointer; background:var(--plum-2);
  box-shadow:0 34px 72px -34px rgba(59,43,54,.55), 0 0 0 1px rgba(123,99,114,.16);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vsl__facade:hover{ transform:translateY(-3px); box-shadow:0 42px 84px -34px rgba(59,43,54,.62), 0 0 0 1px rgba(123,99,114,.4); }
.vsl__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.95; transition:opacity .4s var(--ease), transform .6s var(--ease); }
.vsl__facade:hover .vsl__poster{ opacity:1; transform:scale(1.02); }
.vsl__facade::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(59,43,54,.55) 0%, rgba(59,43,54,.08) 46%, rgba(59,43,54,.32) 100%); }
.vsl__title{
  position:absolute; z-index:2; left:clamp(16px,4vw,44px); top:clamp(16px,4vw,40px); text-align:left;
  font-family:var(--f-display); color:var(--ink-light); line-height:.95; font-size:clamp(1.1rem,3.6vw,2.6rem);
  text-shadow:0 2px 18px rgba(36,28,34,.35);
}
.vsl__title b{ display:block; font-weight:400; }
.vsl__title i{ display:block; font-weight:300; color:#F3DDEA; }
.vsl__play{
  position:absolute; z-index:2; top:66%; left:50%; translate:-50% -50%;
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,253,250,.96); color:var(--btn-3); padding-left:5px;
  box-shadow:0 12px 34px -8px rgba(0,0,0,.55); transition:transform .35s var(--ease), background .35s var(--ease);
}
.vsl__facade:hover .vsl__play{ transform:scale(1.07); background:#fff; }
.vsl__play::before{ content:""; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(255,250,252,.6); animation:halo 3.2s var(--ease) infinite; }
@keyframes halo{ 0%{ transform:scale(.9); opacity:.8 } 70%,100%{ transform:scale(1.28); opacity:0 } }
.vsl__hint{ position:absolute; z-index:2; left:50%; bottom:18px; translate:-50% 0; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-light); opacity:.85; white-space:nowrap; }
.vsl__msg{
  position:absolute; z-index:3; left:50%; bottom:22px; translate:-50% 10px; width:max-content; max-width:88%;
  background:rgba(36,28,34,.86); color:var(--ink-light); font-size:.86rem; padding:.7em 1.2em; border-radius:999px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease), translate .4s var(--ease);
}
.vsl.is-msg .vsl__msg{ opacity:1; translate:-50% 0; }
.vsl.is-msg .vsl__hint{ opacity:0; }
@media (max-width:640px){ .vsl__play{ width:62px; height:62px; } .vsl__hint{ display:none; } .vsl__msg{ font-size:.74rem; bottom:12px; } }

/* ---------- Marquee ---------- */
.marquee{ background:linear-gradient(90deg, var(--plum-3), var(--plum)); color:var(--ink-light); padding:14px 0; overflow:hidden; white-space:nowrap; }
.marquee__track{ display:inline-flex; align-items:center; gap:22px; font-family:var(--f-display); font-style:italic; font-size:1.05rem; animation:slide 38s linear infinite; will-change:transform; }
.marquee__track i{ font-style:normal; opacity:.45; color:var(--mauve-soft); }
@keyframes slide{ to{ transform:translateX(-33.333%) } }

/* ---------- Oferta ---------- */
.pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:clamp(20px,3vw,26px) 0 0; padding:0; }
.pills span{ padding:7px 15px; border:1px solid var(--line); border-radius:999px; background:var(--paper); font-size:.78rem; letter-spacing:.02em; color:var(--ink-soft); white-space:nowrap; }
.offer{
  display:grid; grid-template-columns:1.25fr .85fr; margin-top:clamp(40px,5vw,56px);
  background:var(--paper); border:1px solid var(--line); border-radius:calc(var(--r) + 4px); overflow:hidden;
  box-shadow:0 34px 70px -40px rgba(59,43,54,.55);
}
.offer__body{ padding:clamp(28px,4vw,44px); }
.offer__label{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mauve-deep); margin:0 0 22px; }
.stack{ list-style:none; padding:0; margin:0; }
.stack li{ display:grid; grid-template-columns:1fr 64px; align-items:baseline; gap:14px; padding:13px 0; border-bottom:1px dashed var(--line); color:var(--ink-soft); font-size:.97rem; }
.stack__item{ min-width:0; }
.stack__item strong{ color:var(--ink); font-weight:600; }
.stack__val{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:.92rem; color:var(--ink-mute); }
.stack__head{ padding-top:0 !important; padding-bottom:7px !important; border-bottom:1px solid var(--line) !important; }
.stack__head .stack__val{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.stack__bonus{ background:linear-gradient(90deg, rgba(231,240,210,.6), rgba(231,240,210,0)); margin:0 -10px; padding-inline:10px !important; border-radius:8px; }
.stack__bonus .stack__val{ color:var(--sage-deep); font-weight:600; }
.stack__total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:18px 0 0; padding-top:17px; border-top:1.5px solid var(--ink); }
.stack__total > span{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mauve-deep); }
.stack__total strong{ font-family:var(--f-display); font-weight:400; font-size:1.7rem; line-height:1; white-space:nowrap; }
.stack__nota{ margin:12px 0 0; font-size:.78rem; line-height:1.55; color:var(--ink-mute); }
.offer__price{ background:var(--plum); color:var(--ink-light); padding:clamp(30px,4vw,44px); display:flex; flex-direction:column; justify-content:center; text-align:center; }
.offer__price-label{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mauve-soft); margin:0 0 12px; }
.offer__amount{ margin:0; display:flex; align-items:baseline; justify-content:center; gap:.1em; }
.offer__amount span{ font-family:var(--f-display); font-weight:400; font-size:clamp(3rem,7vw,4.4rem); line-height:1; }
.offer__amount span + span{ font-size:clamp(1.6rem,3.4vw,2.2rem); }
.offer__split{ margin:8px 0 18px; font-size:.84rem; color:var(--ink-light-2); }
.offer__deadline{ margin:0 0 20px; font-size:.82rem; line-height:1.6; color:var(--ink-light-2); }
.offer__deadline strong{ color:var(--ink-light); font-weight:600; }
.offer__deadline b{ display:inline-block; margin-top:7px; font-weight:500; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-soft); }
.reloj{ display:flex; justify-content:center; gap:6px; margin:0 0 22px; }
.reloj__u{ flex:0 0 auto; min-width:56px; padding:9px 6px 7px; border-radius:12px; border:1px solid var(--line-light); background:rgba(251,244,247,.07); }
.reloj__u b{ display:block; font-family:var(--f-display); font-weight:400; font-size:1.5rem; line-height:1; color:var(--ink-light); font-variant-numeric:tabular-nums; }
.reloj__u i{ display:block; margin-top:4px; font-style:normal; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mauve-soft); }
.offer__fine{ font-size:.78rem; color:var(--ink-light-2); opacity:.85; margin:16px 0 0; text-wrap:balance; }
.urg{
  display:flex; width:fit-content; max-width:100%; align-items:center; gap:9px; text-wrap:balance; margin:14px auto 0; padding:8px 16px;
  border:1px solid rgba(123,99,114,.3); border-radius:999px; background:rgba(123,99,114,.07);
  font-size:.8rem; line-height:1.4; color:var(--btn-3); text-align:center;
}
.urg strong{ font-weight:600; white-space:nowrap; }
.urg__dot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--mauve-deep); animation:pulso 2.2s var(--ease) infinite; }
.urg--light{ border-color:var(--line-light); background:rgba(251,244,247,.08); color:var(--ink-light-2); }
.urg--light .urg__dot{ background:var(--mauve-soft); }
@keyframes pulso{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@media (max-width:840px){ .offer{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .stack li{ grid-template-columns:1fr 54px; gap:10px; font-size:.93rem; }
  .reloj__u{ min-width:0; flex:1 1 0; }
  .stack__total strong{ font-size:1.42rem; }
}

/* ---------- Problema ---------- */
.know{ list-style:none; padding:0; margin:34px 0 0; }
.know li{ position:relative; padding:14px 0 14px 34px; border-top:1px solid var(--line); font-size:clamp(1.02rem,1.7vw,1.18rem); color:var(--ink-soft); }
.know li:last-child{ border-bottom:1px solid var(--line); }
.know li::before{ content:""; position:absolute; left:6px; top:calc(50% - 4px); width:8px; height:8px; border-radius:50%; background:var(--mauve-soft); }
.vuelves{ margin-top:44px; }
.vuelves__lead{ font-family:var(--f-display); font-size:clamp(1.5rem,3.4vw,2.3rem); margin:0 0 14px; color:var(--ink); }
.vuelves__list{ margin:0; display:flex; flex-direction:column; gap:2px; }
.vuelves__list span{ color:var(--ink-mute); font-size:1.04rem; }

/* ---------- Transformación ---------- */
.stages{ display:grid; gap:18px; grid-template-columns:repeat(3,1fr); align-items:stretch; }
.stage{ position:relative; background:var(--plum-2); border:1px solid var(--line-light); border-radius:var(--r); padding:30px 26px 32px; }
.stage--mid{ background:var(--plum-3); }
.stage--after{ background:linear-gradient(160deg, #6A5162, #4B3644); border-color:rgba(217,195,209,.35); }
.stage__tag{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mauve-soft); margin:0 0 12px; }
.stage__title{ font-family:var(--f-display); font-weight:400; font-size:1.7rem; line-height:1.15; margin:0 0 18px; color:var(--ink-light); }
.stage__list{ list-style:none; padding:0; margin:0; }
.stage__list li{ padding:7px 0; font-size:.98rem; color:var(--ink-light-2); border-bottom:1px solid rgba(251,244,247,.12); }
.stage__list li:last-child{ border-bottom:0; }
.stage__note{ color:var(--ink-light-2); margin:0; font-size:1.02rem; }
@media (max-width:840px){ .stages{ grid-template-columns:1fr; } }

/* ---------- Método ---------- */
.split__note{ margin:26px 0 0; padding-top:20px; border-top:1px solid var(--line); font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mauve-deep); }
.split__head .lead{ margin-inline:0; }
.weeks{ list-style:none; padding:0; display:grid; gap:16px; grid-template-columns:1fr; margin:36px 0 0; }
.week{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; position:relative; }
.week::before{ content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:0 3px 3px 0; background:var(--mauve-soft); }
.week .week__tag{ font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mauve-deep); margin:0 0 6px; }
.week h3{ font-family:var(--f-display); font-weight:400; font-size:1.55rem; margin:0 0 6px; line-height:1.15; }
.week p{ margin:0; color:var(--ink-mute); font-size:.97rem; }
.week .week__one{ margin-top:14px; padding:10px 14px; border-radius:10px; background:var(--sage-soft); color:var(--ink-soft); font-size:.92rem; }
.week__one b{ display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:2px; }

/* ---------- Frase ancla ---------- */
.anchorline{ padding:clamp(56px,8vw,104px) 0; background:var(--cream); text-align:center; }
.anchorline__text{ font-family:var(--f-display); font-weight:300; font-variation-settings:"SOFT" 70; font-size:clamp(1.6rem,4.2vw,3.1rem); line-height:1.18; letter-spacing:-.015em; color:var(--ink); margin:0 auto; max-width:21ch; text-wrap:balance; }
.anchorline__text em{ font-style:italic; color:var(--mauve-deep); }

/* ---------- Testimonios ---------- */
.quotes{ display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)); margin:clamp(34px,5vw,52px) auto 0; max-width:980px; }
.quote{ margin:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:30px 30px 26px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; position:relative; }
.quote::before{ content:"“"; position:absolute; top:-6px; right:22px; font-family:var(--f-display); font-size:5.4rem; line-height:1; color:var(--mauve-soft); opacity:.7; }
.quote blockquote{ margin:0; font-family:var(--f-display); font-weight:300; font-size:1.14rem; line-height:1.5; color:var(--ink); }
.quote figcaption{ display:flex; flex-direction:column; gap:2px; padding-top:14px; border-top:1px solid var(--line); }
.quote figcaption strong{ font-weight:600; font-size:.9rem; color:var(--ink); }
.quote figcaption span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.tstms__cta{ margin-top:clamp(32px,5vw,44px); }
@media (max-width:760px){ .quotes{ grid-template-columns:1fr; } }

/* ---------- Marimar ---------- */
.about{ display:grid; gap:clamp(30px,5vw,64px); grid-template-columns:.9fr 1fr; align-items:center; }
.about__media{ position:relative; max-width:460px; width:100%; margin-inline:auto; }
.about__frame{ position:relative; aspect-ratio:1/1.06; }
.about__frame::before{ content:""; position:absolute; inset:-5% -5% -2% 4%; background:var(--sage-soft); clip-path:url(#scallop); }
.portrait{ position:relative; width:100%; height:100%; object-fit:cover; object-position:center 28%; clip-path:url(#scallop); }
.badge{ position:absolute; right:-4px; bottom:2%; width:clamp(92px,12vw,120px); height:auto; filter:drop-shadow(0 10px 20px rgba(59,43,54,.18)); }
.badge__ring{ transform-origin:60px 60px; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.about__text p{ color:var(--ink-soft); }
.about__text strong{ color:var(--ink); font-weight:600; }
.sign{ font-family:var(--f-display); font-style:italic; font-size:1.18rem; line-height:1.5; color:var(--mauve-deep); border-left:2px solid var(--mauve-soft); padding-left:20px; margin-top:26px; }
.creds{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.creds li{ font-size:.78rem; padding:6px 12px; border-radius:999px; background:var(--sage-soft); color:var(--sage-deep); font-weight:500; }
.about__social{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.about__social a{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); text-decoration:none; padding-bottom:3px; border-bottom:1px solid var(--line); transition:color .3s var(--ease), border-color .3s var(--ease); }
.about__social a:hover{ color:var(--mauve-deep); border-color:var(--mauve-deep); }
@media (max-width:840px){ .about{ grid-template-columns:1fr; } .about__media{ max-width:340px; } }

/* ---------- Lo que tienes dentro: dispositivos hechos en CSS ---------- */
.devices{ position:relative; max-width:980px; margin:clamp(34px,5vw,54px) auto clamp(28px,4vw,40px); padding-right:clamp(40px,9vw,120px); }
.laptop__screen{ background:#1B1418; border-radius:16px 16px 0 0; padding:12px; box-shadow:0 0 0 1px rgba(251,244,247,.12); }
.laptop__base{ height:16px; margin:0 -5%; background:linear-gradient(#CDBFC8,#A898A3); border-radius:0 0 18px 18px; box-shadow:0 30px 60px -24px rgba(0,0,0,.6); }
.app{ display:grid; grid-template-columns:30% 1fr; aspect-ratio:16/9.6; background:var(--cream); border-radius:6px; overflow:hidden; color:var(--ink); text-align:left; }
.app__side{ background:var(--plum); color:var(--ink-light); padding:clamp(10px,2vw,20px); overflow:hidden; }
.app__side img{ width:clamp(30px,4vw,48px); margin-bottom:clamp(8px,1.6vw,16px); }
.app__lab{ font-size:clamp(7px,.9vw,10px); letter-spacing:.18em; text-transform:uppercase; color:var(--mauve-soft); margin:0 0 8px; }
.app__side ul{ list-style:none; padding:0; margin:0; display:grid; gap:clamp(2px,.5vw,6px); }
.app__side li{ font-size:clamp(7px,1vw,11.5px); padding:clamp(3px,.6vw,7px) clamp(5px,.8vw,10px); border-radius:6px; color:var(--ink-light-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app__side li.is-done{ opacity:.6; text-decoration:line-through; text-decoration-color:rgba(251,244,247,.4); }
.app__side li.is-on{ background:rgba(217,195,209,.18); color:#fff; }
.app__main{ padding:clamp(10px,2.4vw,26px); display:flex; flex-direction:column; gap:clamp(5px,1vw,12px); min-width:0; }
.app__k{ margin:0; font-size:clamp(7px,.9vw,10px); letter-spacing:.18em; text-transform:uppercase; color:var(--mauve-deep); font-weight:600; }
.app__t{ margin:0; font-family:var(--f-display); font-size:clamp(.8rem,2vw,1.6rem); line-height:1.1; }
.app__video{ position:relative; border-radius:8px; overflow:hidden; aspect-ratio:16/7; }
.app__video img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.app__video span{ position:absolute; top:50%; left:50%; translate:-50% -50%; width:clamp(22px,3.4vw,40px); height:clamp(22px,3.4vw,40px); border-radius:50%; background:rgba(255,253,250,.95); color:var(--btn-3); display:grid; place-items:center; padding-left:2px; }
.app__todo{ list-style:none; padding:0; margin:0; display:grid; gap:clamp(2px,.5vw,6px); }
.app__todo li{ font-size:clamp(7px,1vw,11.5px); display:flex; align-items:center; gap:8px; color:var(--ink-soft); }
.app__todo li::before{ content:""; width:clamp(8px,1.1vw,13px); height:clamp(8px,1.1vw,13px); border-radius:4px; border:1.5px solid var(--mauve); flex:0 0 auto; }
.app__todo li.is-done::before{ background:var(--sage-deep); border-color:var(--sage-deep); }
.mobile{ position:absolute; right:0; bottom:-6%; width:clamp(120px,24%,220px); background:#1B1418; border-radius:clamp(18px,3vw,30px); padding:clamp(5px,.9vw,9px); box-shadow:0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(251,244,247,.14); }
.mobile__screen{ background:var(--blush); border-radius:clamp(14px,2.4vw,23px); aspect-ratio:9/18; padding:clamp(12px,2vw,20px) clamp(9px,1.5vw,15px); display:flex; flex-direction:column; gap:clamp(6px,1vw,10px); color:var(--ink); text-align:left; }
.mobile__k{ margin:0; font-size:clamp(7px,.9vw,10px); letter-spacing:.16em; text-transform:uppercase; color:var(--mauve-deep); font-weight:600; }
.mobile__day{ margin:0; font-family:var(--f-display); font-size:clamp(.85rem,1.6vw,1.25rem); line-height:1.1; }
.mobile__card{ background:var(--paper); border-radius:clamp(8px,1.4vw,14px); padding:clamp(8px,1.3vw,13px); display:flex; flex-direction:column; gap:clamp(6px,1vw,10px); box-shadow:0 10px 24px -16px rgba(59,43,54,.5); }
.mobile__card p{ margin:0; font-size:clamp(7.5px,1vw,11.5px); line-height:1.45; color:var(--ink-soft); }
.mobile__btn{ border:0; cursor:pointer; border-radius:999px; padding:clamp(5px,.8vw,8px) 6px; font-size:clamp(7px,.95vw,11px); font-weight:600; color:#fff; background:var(--btn-2); transition:background .3s var(--ease); }
.mobile__btn.is-done{ background:var(--sage-deep); }
.mobile__dots{ display:grid; grid-template-columns:repeat(8,1fr); gap:clamp(2px,.4vw,4px); margin-top:auto; }
.mobile__dots i{ aspect-ratio:1; border-radius:50%; background:rgba(123,99,114,.18); transition:background .4s var(--ease), transform .4s var(--ease); }
.mobile__dots i.is-on{ background:var(--mauve); }
.mobile__dots i.is-today{ background:var(--sage-deep); transform:scale(1.25); }

@media (max-width:700px){
  .devices{ padding-right:0; padding-bottom:64px; }
  .mobile{ width:36%; right:2px; bottom:0; }
  .mobile__screen{ aspect-ratio:9/16; }
  .mobile__dots{ display:none; }
  .app{ grid-template-columns:34% 1fr; }
}

/* ---------- Para quién ---------- */
.fit{ display:grid; gap:20px; grid-template-columns:repeat(2,1fr); }
.fit__col{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:34px 30px; }
.fit__col:last-child{ background:transparent; border-style:dashed; }
.fit__title{ font-family:var(--f-display); font-weight:400; font-size:1.45rem; margin:0 0 20px; }
.fit__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px; }
.fit__list li{ position:relative; padding-left:30px; color:var(--ink-soft); font-size:.99rem; }
.fit__list--yes li::before{ content:""; position:absolute; left:0; top:.42em; width:15px; height:8px; border-left:1.8px solid var(--sage-deep); border-bottom:1.8px solid var(--sage-deep); transform:rotate(-45deg); }
.fit__list--no li{ color:var(--ink-mute); }
.fit__list--no li::before{ content:""; position:absolute; left:2px; top:.72em; width:13px; height:1.8px; background:var(--ink-mute); opacity:.55; }
@media (max-width:760px){ .fit{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ margin-top:clamp(34px,4vw,48px); display:flex; flex-direction:column; gap:10px; }
.faq__item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .3s var(--ease); }
.faq__item[open]{ border-color:var(--mauve-soft); }
.faq__item summary{ cursor:pointer; list-style:none; padding:20px 54px 20px 24px; position:relative; font-weight:500; font-size:1.02rem; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:""; position:absolute; right:24px; top:calc(50% - 6px); width:10px; height:10px; border-right:1.8px solid var(--mauve-deep); border-bottom:1.8px solid var(--mauve-deep); transform:rotate(45deg); transition:transform .3s var(--ease); }
.faq__item[open] summary::after{ transform:rotate(225deg); top:calc(50% - 2px); }
.faq__body{ padding:0 24px 22px; }
.faq__body p{ margin:0; color:var(--ink-mute); font-size:.98rem; }
.faq__body a{ color:var(--mauve-deep); }

/* ---------- Cierre ---------- */
.close__text{ font-size:clamp(1.02rem,1.7vw,1.16rem); color:var(--ink-light-2); max-width:52ch; margin:0 auto 22px; }
.close__seq{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:34px 0; }
.close__seq span{ font-family:var(--f-display); font-style:italic; font-size:clamp(1.15rem,2.4vw,1.6rem); color:var(--mauve-soft); }

/* ---------- Footer ---------- */
.foot{ background:var(--plum-2); color:var(--ink-light-2); padding:54px 0 40px; font-size:.88rem; }
.foot__top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; padding-bottom:26px; border-bottom:1px solid var(--line-light); }
.foot .topbar__brand{ color:var(--ink-light); }
.foot .topbar__name small{ color:var(--ink-light-2); }
.foot__nav{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.foot__nav a{ color:var(--ink-light-2); text-decoration:none; transition:color .3s var(--ease); }
.foot__nav a:hover{ color:var(--mauve-soft); }
.foot__disclaimer{ margin:26px 0 0; font-size:.76rem; line-height:1.7; opacity:.7; max-width:92ch; }
.foot__disclaimer strong{ color:var(--ink-light); }
.foot__copy{ margin:22px 0 0; font-size:.76rem; opacity:.55; }

/* ---------- Dock móvil ---------- */
.dock{ position:fixed; z-index:70; left:0; right:0; bottom:0; display:none; padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(to top, rgba(59,43,54,.98) 55%, rgba(59,43,54,0)); transform:translateY(130%); transition:transform .45s var(--ease); pointer-events:none; }
.dock.is-on{ transform:none; }
.dock__btn{ pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:3px; padding:13px 20px 14px; border-radius:100px; text-decoration:none; color:#fff; background:linear-gradient(135deg, var(--btn-1), var(--btn-3)); box-shadow:0 10px 32px -6px rgba(151,123,141,.8), 0 0 0 1px rgba(255,240,248,.35) inset; position:relative; overflow:hidden; }
.dock__main{ position:relative; z-index:1; font-weight:700; font-size:1.04rem; line-height:1.15; }
.dock__sub{ position:relative; z-index:1; text-wrap:balance; text-align:center; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:#FBEFF6; font-weight:600; }
.dock__btn::after{ content:""; position:absolute; top:0; bottom:0; width:38%; left:-50%; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); animation:dockShine 5.5s ease-in-out 2s infinite; }
@keyframes dockShine{ 0%{ left:-50% } 24%,100%{ left:130% } }
@media (max-width:760px){ .dock{ display:block; } body{ padding-bottom:84px; } }

/* ---------- Modal de reserva (maqueta) ---------- */
.modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:18px; background:rgba(36,28,34,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:fadeIn .3s var(--ease); }
.modal__box{ position:relative; width:min(440px,100%); max-height:calc(100svh - 36px); overflow:auto; background:var(--paper); border-radius:calc(var(--r) + 4px); padding:30px 28px 24px; text-align:center; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); }
.modal__box > img{ width:56px; margin:0 auto 12px; }
.modal__box .kicker{ margin-bottom:6px; }
.modal__t{ font-family:var(--f-display); font-size:1.7rem; margin:0 0 16px; line-height:1.1; }
.modal__x{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:0; background:var(--sand); display:grid; place-items:center; cursor:pointer; }
.modal__sum{ list-style:none; padding:0; margin:0 0 18px; text-align:left; border-top:1px solid var(--line); }
.modal__sum li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--ink-mute); }
.modal__sum b{ color:var(--ink); font-weight:600; }
.modal__form{ display:grid; gap:10px; text-align:left; }
.modal__form label span{ display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:4px; }
.modal__form input{ width:100%; font:inherit; font-size:.95rem; padding:.75em .9em; border-radius:10px; border:1px solid var(--line); background:var(--cream); color:var(--ink); }
.modal__form input:focus{ outline:2px solid var(--mauve-soft); border-color:var(--mauve); }
.modal__form .btn{ margin-top:6px; }
.modal__ok{ margin:14px 0 0; padding:12px 14px; border-radius:12px; background:var(--sage-soft); color:var(--ink-soft); font-size:.86rem; text-align:left; }
.modal__fine{ margin:12px 0 0; font-size:.72rem; color:var(--ink-mute); }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

/* ---------- Barra de progreso ---------- */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80; pointer-events:none; }
.progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--mauve-soft), var(--mauve-deep)); transition:width .12s linear; }

/* ---------- Reveal ---------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
/* El hero no depende de JS */
.hero .reveal{ opacity:0; transform:none; transition:none; animation:fadeUp .85s var(--ease) both; }
.hero .eyebrow{ animation-delay:.05s; }
.hero .hero__title{ animation-delay:.15s; }
.hero .hero__sub{ animation-delay:.4s; }
.hero .vsl{ animation-delay:.55s; }
.hero .hero__cta{ animation-delay:.72s; }
.no-js .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
@media (prefers-reduced-motion: reduce){
  .marquee__track,.vsl__play::before,.dock__btn::after,.badge__ring,.urg__dot{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero .reveal{ animation:none; opacity:1; }
}

/* ==========================================================================
   ESCRITORIO
   ========================================================================== */
@media (min-width:861px){
  .sec{ padding:128px 0; }
  .sec--problema{ padding:160px 0 140px; }
  .sec--problema .wrap{ max-width:880px; }
  .close{ padding:150px 0; }
  .know li{ font-size:1.22rem; padding:18px 0 18px 38px; }
  .pull{ font-size:2.4rem; margin-top:60px; max-width:24ch; }

  .split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(48px,6vw,96px); align-items:start; }
  .split__head{ position:sticky; top:110px; }
  .split__head .h2{ font-size:clamp(2rem,3.4vw,2.9rem); }
  .weeks{ margin-top:0; }

  .stages{ gap:26px; align-items:start; padding-bottom:36px; }
  .stage{ padding:36px 32px 40px; }
  .stage--mid{ translate:0 42px; }
  .stage--after{ translate:0 84px; }
  .stage__title{ font-size:2rem; }
  .stage:not(:last-child)::after{ content:""; position:absolute; top:62px; right:-17px; width:9px; height:9px; rotate:45deg; border-top:1.5px solid var(--mauve-soft); border-right:1.5px solid var(--mauve-soft); opacity:.75; }

  .fit{ gap:26px; }
  .fit__col{ padding:46px 40px; }
  .fit__title{ font-size:1.6rem; margin-bottom:26px; }

  .about{ grid-template-columns:.95fr 1fr; gap:80px; }
  .about__text .h2{ font-size:3rem; }
  .about__text p{ font-size:1.06rem; }

  .offer{ grid-template-columns:1.2fr .8fr; box-shadow:0 46px 90px -50px rgba(59,43,54,.65); }
  .offer__body{ padding:52px 50px; }
  .offer__price{ padding:52px 42px; }

  .faq__item summary{ padding:24px 62px 24px 30px; font-size:1.06rem; }
  .faq__body{ padding:0 30px 26px; }
  .reveal{ transform:translateY(36px); }
}
@media (min-width:1280px){ .h2{ font-size:3.2rem; } }