*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:#FAFAF8;color:#2C1A0E;
  overflow-x:hidden;line-height:1.65;
  font-synthesis-weight:none;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));
}
:root{
  --coral:#E8604C;--coral-d:#C94535;--coral-l:rgba(232,96,76,.11);
  --rose:#C05070;--rose-l:rgba(192,80,112,.1);
  --peach:#F2A07B;
  --cream:#FAFAF8;--cream-d:#F2EDE6;--cream-dd:#EAE2D8;
  --sand:#E8DDD2;
  --text:#2C1A0E;--text-2:#5C4335;--text-3:#7A5A48;--text-4:#A8907F;
  --white:#FFFFFF;
  --border:rgba(208,160,130,.22);--border-s:rgba(208,160,130,.4);
  --sh-sm:0 2px 10px rgba(80,40,20,.07);
  --sh-md:0 4px 20px rgba(80,40,20,.11);
  --px:20px;--nav-h:56px;
  --r:16px;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* superficies oscuras: tinta ciruela, sin cafe */
  --dark:#1B1622;--dark-2:#262032;--dark-3:#141019;
  --on-dark:#F6F2F7;--on-dark-2:#C7BFD0;--on-dark-3:#9C93AC;
  --accent-on-dark:#FF8A73;
}
h1,h2{font-family:var(--font-display);font-weight:600;line-height:1.08;color:var(--text)}
h3,h4{font-family:var(--font-sans);font-weight:700;line-height:1.35;color:var(--text)}
h1{font-size:2.1rem;font-weight:700;line-height:1.1}
h2{font-size:1.55rem;font-weight:700;line-height:1.18}
h3{font-size:1.1rem;font-weight:600}
h4{font-size:.92rem;font-weight:600}
em{font-style:italic;color:var(--coral)}
p{color:var(--text-2);line-height:1.72;font-size:.9rem}
a{color:var(--coral);text-decoration:none}

.tag{
  display:inline-block;font-size:.58rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--rose);background:var(--rose-l);
  padding:.22rem .75rem;border-radius:50px;margin-bottom:.7rem
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.38rem;
  font-family:var(--font-sans);font-weight:600;font-size:.87rem;
  padding:.78rem 1.5rem;border-radius:50px;border:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s;
  text-decoration:none;white-space:nowrap;min-height:48px;
  -webkit-tap-highlight-color:transparent
}
.btn-lg{font-size:.95rem;padding:.88rem 1.8rem;min-height:54px}
.btn-coral{background:var(--coral-d);color:#fff;box-shadow:0 1px 2px rgba(27,22,34,.14),0 6px 16px -10px rgba(27,22,34,.45)}
.btn-coral:hover{background:#B03A2A;transform:translateY(-1px);box-shadow:0 2px 4px rgba(27,22,34,.16),0 12px 24px -14px rgba(27,22,34,.5)}
.btn-outline{background:transparent;color:var(--coral-d);border:1.6px solid var(--coral-d)}
.btn-outline:hover{background:var(--coral-l)}
.btn-white{background:#fff;color:var(--coral-d);box-shadow:0 2px 6px rgba(27,22,34,.18)}
.btn-white:hover{background:#FFF6F3}
.btn-ghost{background:transparent;color:var(--text-2);border:1.5px solid var(--border-s)}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,96,76,.45)}60%{box-shadow:0 0 0 9px rgba(232,96,76,0)}}

.rv.animate{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.rv.animate.on{opacity:1;transform:none}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  display:flex;align-items:center;justify-content:space-between;
  padding-left:var(--px);padding-right:var(--px);
  background:rgba(250,250,248,.96);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s
}
.nav.scrolled{box-shadow:0 2px 24px rgba(80,40,20,.1)}
.nav-logo{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text);text-decoration:none}
.nav-logo span{color:var(--coral);font-style:italic}
.nav-ham{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;
  width:44px;height:44px;align-items:center;
  -webkit-tap-highlight-color:transparent
}
.nav-ham span{display:block;width:20px;height:1.5px;background:var(--text);border-radius:2px;transition:all .25s}
.nav-ham.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-ham.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-drawer{
  position:fixed;
  top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  left:0;right:0;bottom:0;
  background:var(--cream);z-index:299;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;padding:1.6rem var(--px) 2rem
}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer ul{list-style:none;display:flex;flex-direction:column;margin-bottom:1.5rem}
.nav-drawer ul li a{
  display:flex;align-items:center;justify-content:space-between;
  font-size:1rem;font-weight:500;color:var(--text-2);
  padding:.85rem 0;border-bottom:1px solid var(--border);
  text-decoration:none;min-height:50px
}
.nav-drawer ul li a.ac{color:var(--coral);font-weight:600}
.nav-drawer ul li a::after{content:'›';font-size:1.2rem;color:var(--text-4)}
.nav-drawer-cta{display:flex;flex-direction:column;gap:.55rem}
.nav-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(44,26,14,.35);z-index:298;
  backdrop-filter:blur(3px)
}
.nav-overlay.open{display:block}

/* HERO */
.hero{
  padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px));
  background:var(--cream);position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 95% 0%,rgba(232,96,76,.12) 0%,transparent 55%),
    radial-gradient(ellipse 45% 35% at 5% 100%,rgba(242,160,123,.08) 0%,transparent 50%);
  pointer-events:none
}
.hero-content{position:relative;z-index:1;padding:1.4rem var(--px) 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:.42rem;
  background:var(--white);border:1px solid var(--border-s);border-radius:50px;
  padding:.3rem .8rem .3rem .48rem;
  font-size:.64rem;font-weight:600;color:var(--text-2);
  margin-bottom:1.1rem;box-shadow:var(--sh-sm);
  width:fit-content;animation:fadeUp .45s ease both
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--coral);animation:pulse 2s infinite;flex-shrink:0}
.hero h1{margin-bottom:.9rem;animation:fadeUp .45s .08s ease both}
.hero-sub{font-size:.92rem;color:var(--text-2);line-height:1.7;margin-bottom:1.5rem;animation:fadeUp .45s .15s ease both}
.hero-ctas{animation:fadeUp .45s .22s ease both;display:flex;flex-direction:column;gap:.5rem;align-items:stretch;margin-bottom:1.4rem}
.hero-ctas .btn{width:100%;justify-content:center}
.free-class-box{
  background:linear-gradient(135deg,rgba(232,96,76,.07) 0%,rgba(242,160,123,.07) 100%);
  border:1.5px solid rgba(232,96,76,.22);
  border-radius:14px;padding:.9rem 1rem;
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:1.5rem;animation:fadeUp .45s .28s ease both
}
.free-class-icon{font-size:1.5rem;flex-shrink:0}
.free-class-text strong{display:block;font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:.1rem}
.free-class-text span{font-size:.74rem;color:var(--text-3);line-height:1.4}
.trust-row{display:flex;gap:.28rem;flex-wrap:nowrap;overflow-x:auto;padding-bottom:1.5rem;animation:fadeUp .45s .33s ease both;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.ti{display:flex;align-items:center;gap:.22rem;font-size:.58rem;color:var(--text-3);font-weight:500;background:var(--white);border:1px solid var(--border);padding:.18rem .45rem;border-radius:50px;white-space:nowrap;flex-shrink:0}

/* PROOF STRIP */
.proof-strip{background:var(--dark);padding:1.6rem var(--px);overflow:hidden;position:relative}
.proof-strip-inner{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1rem;text-align:center}
.ps-num{font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--accent-on-dark);line-height:1;margin-bottom:.18rem}
.ps-lbl{font-size:.63rem;color:var(--on-dark-3);line-height:1.4}

/* FREE CLASS HERO */
.free-hero{background:linear-gradient(158deg,#1B1622 0%,#2A2237 100%);padding:2.4rem var(--px);text-align:center;position:relative;overflow:hidden}
.free-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 25%,rgba(255,138,115,.16),transparent 62%);pointer-events:none}
.free-hero-in{position:relative;z-index:1}
.fh-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(255,138,115,.14);border:1px solid rgba(255,138,115,.32);
  border-radius:50px;padding:.28rem .85rem;
  font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-on-dark);margin-bottom:1rem
}
.free-hero h2{color:#fff;margin-bottom:.65rem;font-size:1.6rem}
.fh-sub{color:var(--on-dark);font-size:.88rem;margin-bottom:1.5rem;line-height:1.65;text-align:justify}
.fh-perks{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.5rem;text-align:left;background:rgba(255,255,255,.04);border-radius:12px;padding:.85rem 1rem;border:1px solid rgba(255,255,255,.07)}
.fh-perk{display:flex;align-items:center;gap:.55rem;font-size:.78rem;color:var(--on-dark)}
.fh-perk-ic{font-size:.9rem;flex-shrink:0;width:20px;text-align:center}
.fh-disclaimer{font-size:.65rem;color:var(--on-dark-2);margin-top:.85rem}

/* PAIN */
.section{padding:2.2rem var(--px)}
.section-cream{background:var(--cream-d)}
.section-white{background:var(--white)}
.pain-grid{display:flex;flex-direction:column;gap:.7rem;margin-top:1.25rem}
.pc{background:var(--white);border-radius:var(--r);padding:1.05rem 1.1rem;border:1px solid var(--border);display:flex;gap:.7rem;align-items:flex-start}
.pe{font-size:1.4rem;flex-shrink:0;line-height:1;margin-top:.06rem}
.pc h4{font-family:var(--font-display);font-size:.96rem;margin-bottom:.18rem;color:var(--text)}
.pc p{font-size:.78rem;line-height:1.6;color:var(--text-3)}

/* ABOUT */
.about-photo{
  width:100%;height:200px;
  background:linear-gradient(155deg,#f0ddd3 0%,#e8cdd8 60%,#ddc0d0 100%);
  border-radius:var(--r);margin-bottom:1.2rem;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.4rem;position:relative;overflow:hidden
}
.about-photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--r)}
.about-photo::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 40%,rgba(232,96,76,.14),transparent 55%)}
.ap-placeholder{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.3;color:var(--text)}
/* ABOUT VIDEO */
.about-video-wrap{
  width:100%;border-radius:var(--r);margin-bottom:1.2rem;
  overflow:hidden;position:relative;
  background:#000;
  aspect-ratio:16/9;
  max-width:100%;
  box-shadow:var(--sh-md);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#about-video{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  border-radius:var(--r);
}
/* Custom controls overlay */
.vc-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  border-radius:var(--r);
  z-index:5;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 55%);
  opacity:1;
  transition:opacity .35s ease;
  pointer-events:none;
}
.vc-overlay.hidden{opacity:0;}
/* All interactive children get pointer-events back */
.vc-overlay .vc-center,
.vc-overlay .vc-bar,
.vc-overlay .vc-progress,
.vc-overlay .vc-play-pause,
.vc-overlay .vc-skip,
.vc-overlay .vc-vol,
.vc-overlay .vc-fs{
  pointer-events:auto;
}
/* Center play/pause */
.vc-center{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.vc-play-pause{
  width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  border:none;cursor:pointer;
  transition:transform .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.vc-play-pause:active{transform:scale(.9);background:rgba(0,0,0,.65)}
/* Bottom bar */
.vc-bar{
  padding:.55rem .75rem .65rem;
  display:flex;flex-direction:column;gap:.3rem;
  position:relative;z-index:20;
}
/* Progress */
.vc-progress{
  width:100%;height:20px;
  display:flex;align-items:center;
  cursor:pointer;position:relative;
  touch-action:none;
}
.vc-progress-track{
  width:100%;height:3px;
  background:rgba(255,255,255,.3);
  border-radius:3px;position:relative;
  pointer-events:none;
}
.vc-progress-fill{
  height:100%;border-radius:3px;
  background:var(--coral);
  width:0%;pointer-events:none;
  position:relative;
}
.vc-progress-fill::after{
  content:'';
  position:absolute;right:-5px;top:50%;
  transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 2px rgba(255,255,255,.6);
  opacity:0;transition:opacity .15s;
}
.vc-overlay:not(.hidden) .vc-progress-fill::after{opacity:1}
/* Time + volume row */
.vc-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;position:relative;z-index:20;
}
.vc-time{
  font-family:var(--font-sans);font-size:.62rem;
  color:rgba(255,255,255,.9);font-weight:500;letter-spacing:.02em;
}
.vc-vol{
  background:none;border:none;cursor:pointer;
  padding:.15rem;display:flex;align-items:center;
  -webkit-tap-highlight-color:transparent;
  min-width:36px;min-height:36px;justify-content:center;
  pointer-events:auto;
}
/* Skip buttons */
.vc-skip{
  background:none;border:none;cursor:pointer;
  padding:.2rem;display:flex;flex-direction:column;align-items:center;gap:.05rem;
  -webkit-tap-highlight-color:transparent;
}
.vc-skip span{
  font-family:var(--font-sans);font-size:.52rem;font-weight:700;
  color:rgba(255,255,255,.9);letter-spacing:.01em;line-height:1;
}
.vc-skip:active{opacity:.7}
/* Fullscreen button */
.vc-fs{
  background:none;border:none;cursor:pointer;
  padding:.15rem;display:flex;align-items:center;
  -webkit-tap-highlight-color:transparent;
  margin-left:.25rem;
  min-width:36px;min-height:36px;justify-content:center;
  pointer-events:auto;
}
.vc-fs:active{opacity:.7}
/* Replay overlay */
.vc-replay{
  display:none;
  position:absolute;inset:0;
  align-items:center;justify-content:center;flex-direction:column;gap:.55rem;
  background:rgba(44,26,14,.6);
  cursor:pointer;z-index:10;border-radius:var(--r);
}
.vc-replay.visible{display:flex}
.vc-replay span{
  font-family:var(--font-sans);font-size:.85rem;font-weight:600;
  color:#fff;letter-spacing:.02em;
}

.about-quote{font-family:var(--font-display);font-size:1.05rem;font-style:italic;color:var(--text);line-height:1.58;margin:.85rem 0 1.2rem;padding-left:.9rem;border-left:3px solid var(--coral)}
.about-chips{display:flex;flex-wrap:wrap;gap:.38rem;margin-bottom:1.25rem}
.achip{font-size:.66rem;font-weight:600;color:var(--text-2);background:var(--cream-dd);border-radius:50px;padding:.24rem .7rem;border:1px solid var(--border-s)}
.hl-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.2rem}
.hl{display:flex;gap:.65rem;align-items:flex-start}
.hl-icon{width:34px;height:34px;border-radius:50%;background:var(--cream-d);display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0}
.hl-b h4{font-size:.82rem;font-weight:600;margin-bottom:.06rem;color:var(--text)}
.hl-b p{font-size:.74rem;color:var(--text-3);line-height:1.45}

/* SERVICES */
.sg{display:flex;flex-direction:column;gap:.8rem;margin-top:1.3rem}
.sv{background:var(--white);border-radius:var(--r);padding:1.15rem 1.2rem;border:1.5px solid var(--border);position:relative;overflow:hidden}
.sv.feat{border-color:var(--coral);background:linear-gradient(150deg,#fff 0%,rgba(232,96,76,.03) 100%)}
.sv-badge{position:absolute;top:.75rem;right:.75rem;background:var(--coral);color:#fff;font-size:.5rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:50px}
.sv-ttag{display:inline-block;font-size:.56rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--rose);background:var(--rose-l);padding:.13rem .5rem;border-radius:50px;margin-bottom:.55rem}
.sv-icon{font-size:1.4rem;margin-bottom:.38rem;display:block}
.sv h3{font-family:var(--font-display);font-size:1.1rem;margin-bottom:.28rem}
.sv p{font-size:.78rem;color:var(--text-3);margin-bottom:.75rem;line-height:1.6}
.sv-price{font-family:var(--font-display);font-size:1.28rem;font-weight:700;color:var(--coral);margin-bottom:.65rem;display:flex;align-items:baseline;gap:.3rem}
.sv-price small{font-size:.85rem;font-weight:400;color:var(--text-3);font-family:var(--font-sans)}
.sv-link{display:inline-flex;align-items:center;gap:.28rem;font-size:.77rem;font-weight:600;color:var(--coral)}

/* TESTIMONIALS */
.tg{display:flex;flex-direction:column;gap:.75rem;margin-top:1.25rem}
.tc{background:var(--cream);border-radius:var(--r);padding:1.1rem 1.1rem;border:1px solid var(--border);position:relative}
.tc::before{content:'\201C';font-family:var(--font-display);font-size:3.2rem;color:var(--sand);line-height:.8;font-weight:700;position:absolute;top:.72rem;left:.88rem}
.tc-stars{color:#E8A020;font-size:.62rem;letter-spacing:1.5px;margin-bottom:.05rem;position:relative;z-index:1}
.tc-txt{font-size:.82rem;line-height:1.65;color:var(--text-2);font-style:italic;margin-top:1.55rem;margin-bottom:.85rem;text-align:justify}
.tc-auth{display:flex;align-items:center;gap:.52rem}
.tc-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;color:#fff;flex-shrink:0}
.tc-name{font-size:.78rem;font-weight:600;color:var(--text)}
.tc-role{font-size:.6rem;color:var(--text-3)}

/* MINI CTA */
.mini-cta{background:var(--coral-d);padding:1.8rem var(--px);text-align:center}
.mini-cta h3{color:#fff;font-size:1.2rem;margin-bottom:.35rem}
.mini-cta p{color:rgba(255,255,255,.9);font-size:.82rem;margin-bottom:1.1rem;line-height:1.55}

/* RESOURCES */
.bgrid{display:flex;flex-direction:column;gap:.7rem;margin-top:1.15rem}
.bc{background:var(--white);border-radius:var(--r);overflow:hidden;border:1.5px solid var(--border);display:flex;gap:.82rem;padding:.9rem .95rem;align-items:flex-start}
.bthumb{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.bta{background:linear-gradient(135deg,#f0ddd0,#e8cec0)}
.btb{background:linear-gradient(135deg,#e8d8e8,#d8c0d0)}
.btc{background:linear-gradient(135deg,#e8d8d0,#ddc8c0)}
.bb{flex:1;min-width:0}
.btag{font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);margin-bottom:.22rem}
.bc h4{font-family:var(--font-sans);font-size:.88rem;font-weight:600;line-height:1.4;margin-bottom:.28rem;color:var(--text)}
.brl{font-size:.72rem;font-weight:600;color:var(--coral)}

/* FINAL CTA */
.fcta{background:linear-gradient(158deg,#1B1622 0%,#2A2237 100%);padding:2.4rem var(--px);text-align:center;position:relative;overflow:hidden}
.fcta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 18%,rgba(255,138,115,.18),transparent 58%);pointer-events:none}
.fcta-in{position:relative;z-index:1}
.fcta h2{color:#fff;margin-bottom:.65rem;font-size:1.55rem}
.fcta p{color:var(--on-dark-2);font-size:.9rem;margin-bottom:1.5rem;line-height:1.65}
.fcta-btn-wrap{display:flex;justify-content:center}

/* FOOTER */
footer{background:var(--dark-3);padding:2rem var(--px) 1.5rem}
.ft-brand{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(255,255,255,.07)}
.ft-logo{font-family:var(--font-display);font-size:1.12rem;font-weight:700;color:#FAFAF8;display:block;margin-bottom:.4rem}
.ft-logo span{color:var(--accent-on-dark);font-style:italic}
.ft-brand p{font-size:.7rem;line-height:1.6;color:var(--on-dark-2);max-width:230px}
.ft-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
.ft-col h5{font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-on-dark);margin-bottom:.72rem}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.42rem}
.ft-col ul li a{font-size:.7rem;color:var(--on-dark-2);text-decoration:none}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1rem;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;gap:.6rem}
.ft-copy{font-size:.62rem;color:var(--on-dark-3)}
.ft-soc{display:flex;gap:.4rem}
.ft-soc a{width:34px;height:34px;border-radius:50%;background:rgba(250,250,248,.1);display:flex;align-items:center;justify-content:center;text-decoration:none;color:rgba(250,250,248,.7);transition:background .2s,color .2s}.ft-soc a:hover{background:var(--on-dark-3);color:#fff}
.ft-legal{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.7rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.05)}
.ft-legal a{font-size:.62rem;color:var(--on-dark-3);text-decoration:none}

/* STICKY BAR */
.sticky-bar{will-change:transform;
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:var(--white);border-top:1px solid var(--border);
  padding:.65rem var(--px);
  padding-bottom:calc(.65rem + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  box-shadow:0 -4px 24px rgba(80,40,20,.12)
}
.sticky-bar-text{font-size:.66rem;color:var(--text-3);line-height:1.35;flex:1}
.sticky-bar-text strong{display:block;font-size:.78rem;font-weight:600;color:var(--text-2)}
.sticky-bar .btn{flex-shrink:0;font-size:.8rem;padding:.62rem 1.15rem;min-height:44px}


/* ── INTERACTIVIDAD ADICIONAL ── */

/* Números del proof strip con contador animado */
.ps-num{
  transition:transform .3s ease,color .3s ease;
}
.proof-strip-inner > div:hover .ps-num{
  transform:scale(1.1);
  color:var(--coral);
}

/* Pain cards con hover lift */
.pc{
  transition:transform .25s ease, box-shadow .25s ease;
}
.pc:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-md);
}

/* Pain icons con pulse suave al hover */
.pe{
  display:inline-block;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pc:hover .pe{
  transform:scale(1.25) rotate(-5deg);
}

/* Service cards */
.sv{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sv:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 32px rgba(80,40,20,.14);
  border-color:rgba(232,96,76,.3);
}

/* Testimonial cards */
.tc{
  transition:transform .25s ease, box-shadow .25s ease;
}
.tc:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 24px rgba(80,40,20,.1);
}

/* Resource cards */
.bc{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.bc:hover{
  transform:translateX(4px);
  box-shadow:0 4px 18px rgba(80,40,20,.1);
  border-color:rgba(232,96,76,.28);
}

/* Buttons press feel */
.btn{
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease, background .15s ease;
}
.btn:active{
  transform:scale(.95) !important;
}

/* Perks de la free-class con slide-in escalonado */
.fh-perk{
  opacity:0;
  transform:translateX(-12px);
  transition:opacity .5s ease, transform .5s ease;
}
.fh-perk.in-view{
  opacity:1;
  transform:translateX(0);
}

/* Tags con shimmer al entrar */
@keyframes tagPop{
  0%{transform:scale(.8);opacity:0}
  70%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
.tag.in-view{
  animation:tagPop .4s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* Reveal variants: desde abajo, desde la izquierda, desde la derecha */
.rv-left.animate{opacity:0;transform:translateX(-22px);transition:opacity .6s ease,transform .6s ease}
.rv-left.animate.on{opacity:1;transform:none}
.rv-right.animate{opacity:0;transform:translateX(22px);transition:opacity .6s ease,transform .6s ease}
.rv-right.animate.on{opacity:1;transform:none}

/* Stagger para grids */
.rv-stagger.animate{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.rv-stagger.animate.on{opacity:1;transform:none}

/* Proof strip contador */
.ps-num.counting{
  display:inline-block;
}

/* Live dot pulse mejorado */
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(80,200,80,.6),0 0 0 0 rgba(80,200,80,.3)}
  50%{box-shadow:0 0 0 5px rgba(80,200,80,0),0 0 0 10px rgba(80,200,80,0)}
}
.live-dot{
  animation:livePulse 2s infinite;
}

/* Parallax sutil en hero */
.hero-content h1{
  will-change:transform;
}

/* CTA section float effect */
.fcta::after{
  content:'';
  position:absolute;
  width:200px;height:200px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,138,115,.13),transparent 70%);
  bottom:-60px;left:-60px;
  animation:floatBlob 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floatBlob{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(20px,-15px) scale(1.1)}
  66%{transform:translate(-10px,10px) scale(.95)}
}

/* Trust row items */
.ti{
  transition:transform .2s ease, color .2s ease;
}
.ti:hover{
  transform:translateY(-2px);
  color:var(--coral);
}

/* About quote highlight on scroll */
.about-quote{
  transition:border-left-color .4s ease;
}
.about-quote.in-view{
  border-left-color:var(--coral);
}


/* Hero col wrappers (mobile: stacked) */
.hero-col-main{width:100%}
.hero-col-aside{width:100%;margin-top:1.4rem}
.hero-aside-stats{display:none}

/* Desktop nav links */
.nav-links-desktop{display:none}

/* ── DESKTOP RESPONSIVE ── */
@media(min-width:768px){
  :root{--nav-h:60px}
  body{padding-bottom:0}

  /* Nav */
  .nav{padding-left:clamp(24px,5vw,80px);padding-right:clamp(24px,5vw,80px)}
  .nav-ham{display:none}
  .nav-drawer{display:none!important}
  .nav-overlay{display:none!important}
  .nav-links-desktop{
    display:flex;align-items:center;gap:1.6rem
  }
  .nav-links-desktop a:not(.btn){
    font-size:.82rem;font-weight:500;color:var(--text-2);
    text-decoration:none;padding:.3rem .1rem;
    border-bottom:2px solid transparent;
    transition:color .15s,border-color .15s
  }
  .nav-links-desktop a:not(.btn):hover{color:var(--coral);border-bottom-color:var(--coral)}

  /* Layout wrapper */
  .hero-content,.section,.mini-cta,.free-hero-in,.fcta-in{
    max-width:1100px;margin-left:auto;margin-right:auto;
    padding-left:clamp(32px,6vw,100px);padding-right:clamp(32px,6vw,100px)
  }
  .proof-strip{padding-left:clamp(24px,5vw,60px);padding-right:clamp(24px,5vw,60px)}
  .proof-strip-inner{max-width:1100px;margin:0 auto;grid-template-columns:repeat(4,1fr)}
  footer{padding-left:clamp(24px,5vw,60px);padding-right:clamp(24px,5vw,60px)}
  .ft-brand,.ft-grid,.ft-bottom,.ft-legal{max-width:1100px;margin-left:auto;margin-right:auto}

  /* Typography */
  h1{font-size:3.2rem;line-height:1.06}
  h2{font-size:2.2rem}

  /* Hero */
  .hero-ctas{flex-direction:row;align-items:center;gap:.75rem}
  .hero-ctas .btn{width:auto}

  /* Grids */
  .pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .sg{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
  .tg{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}

  /* About */
  .about-video-wrap{max-width:600px;margin-left:auto;margin-right:auto;margin-bottom:1.5rem}
  .fh-perks{max-width:520px;margin-left:auto;margin-right:auto}

  /* Sticky bar hidden on desktop */
  .sticky-bar{display:none!important}
}

/* ── WIDE DESKTOP (1024px+) ── */
@media(min-width:1024px){
  /* Hero 2-column layout */
  .hero-content{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:3rem;
    align-items:center;
    padding-top:3.5rem!important;
    padding-bottom:3.5rem!important;
  }
  .hero-col-main{width:100%}
  .hero-col-aside{
    width:100%;margin-top:0;
    display:flex;flex-direction:column;gap:1rem;
  }
  .free-class-box{margin-bottom:0}
  .hero-aside-stats{
    display:flex;flex-direction:column;gap:.55rem;
    background:var(--white);border-radius:var(--r);
    border:1px solid var(--border);padding:1rem 1.1rem;
    box-shadow:var(--sh-sm);
  }
  .has-item{display:flex;align-items:center;gap:.7rem}
  .has-num{
    font-family:var(--font-display);font-size:1.5rem;font-weight:700;
    color:var(--coral);min-width:42px;
  }
  .has-lbl{font-size:.72rem;color:var(--text-3);line-height:1.35}

  /* About section 2-column layout */
  #sobre-mi .about-grid{
    display:grid;
    grid-template-columns:45% 1fr;
    gap:3rem;
    align-items:start;
    margin-top:1.5rem;
  }
  .about-video-wrap{max-width:100%!important;margin-left:0!important;margin-right:0!important;margin-bottom:0!important}
  .about-text-col{display:flex;flex-direction:column}
}


/* =====================================================================
   REDISENO 2026-08 - Digital North Growth Partners
   Tipografia legible, escala fluida, iconos SVG, accesibilidad
   ===================================================================== */
:root{
  --fs-hero:clamp(2.15rem,1.35rem + 3.35vw,4.15rem);
  --fs-h2:clamp(1.72rem,1.28rem + 1.85vw,2.6rem);
  --fs-h3:clamp(1.14rem,1.04rem + .42vw,1.38rem);
  --fs-h4:clamp(1.02rem,.98rem + .2vw,1.12rem);
  --fs-lead:clamp(1.02rem,.96rem + .3vw,1.2rem);
  --fs-body:clamp(.95rem,.92rem + .16vw,1.05rem);
  --fs-sm:clamp(.87rem,.85rem + .1vw,.94rem);
  --fs-xs:clamp(.78rem,.76rem + .07vw,.83rem);
  --fs-eyebrow:clamp(.68rem,.66rem + .06vw,.72rem);
}
h1{font-size:var(--fs-hero);letter-spacing:-.028em;line-height:1.04;font-weight:600}
h2{font-size:var(--fs-h2);letter-spacing:-.022em;line-height:1.12;font-weight:600}
h3{font-size:var(--fs-h3);letter-spacing:-.014em}
h4{font-size:var(--fs-h4);letter-spacing:-.008em}
p{font-size:var(--fs-body);line-height:1.72;color:var(--text-2)}
.measure{max-width:62ch}
em{font-style:italic;color:var(--coral-d)}

/* iconos */
.ico{width:1.15em;height:1.15em;flex:none;display:block}
.ico-box{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;
  justify-content:center;flex:none;background:var(--coral-l);color:var(--coral-d);
  border:1px solid rgba(232,96,76,.18)}
.ico-box .ico{width:20px;height:20px}
.ico-box.on-dark{background:rgba(255,138,115,.12);border-color:rgba(255,138,115,.26);color:var(--accent-on-dark)}

/* accesibilidad */
.skip-link{position:absolute;left:-9999px;top:.5rem;z-index:999;background:var(--dark);color:#fff;
  padding:.7rem 1.1rem;border-radius:10px;font-weight:600;font-size:var(--fs-sm)}
.skip-link:focus{left:1rem}
:focus-visible{outline:3px solid var(--coral-d);outline-offset:3px;border-radius:6px}
.free-hero :focus-visible,.fcta :focus-visible,footer :focus-visible,.proof-strip :focus-visible{outline-color:var(--on-dark)}
html{scroll-padding-top:calc(var(--nav-h) + 16px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv.animate,.rv-left.animate,.rv-right.animate,.rv-stagger.animate,.fh-perk{opacity:1!important;transform:none!important}
}

/* eyebrow y tags */
.eyebrow{font-size:var(--fs-eyebrow);gap:.5rem;padding:.42rem 1rem .42rem .7rem;letter-spacing:.005em}
.tag{font-size:.7rem;letter-spacing:.12em;padding:.32rem .85rem;margin-bottom:.85rem;color:#A33A5C;background:rgba(163,58,92,.09)}

/* hero */
.hero-sub{font-size:var(--fs-lead);line-height:1.68;color:var(--text-2);max-width:56ch}
.hero h1{max-width:19ch}
.trust-row{gap:.4rem;padding-bottom:1.6rem}
.ti{font-size:var(--fs-xs);gap:.4rem;padding:.4rem .75rem;color:var(--text-2);font-weight:600}
.ti .ico{width:15px;height:15px;color:var(--coral-d)}
.free-class-box{gap:.9rem;padding:1rem 1.1rem;border-radius:var(--r)}
.free-class-text strong{font-size:var(--fs-sm);margin-bottom:.15rem}
.free-class-text span{font-size:var(--fs-xs);color:var(--text-2);line-height:1.5}

/* foto del hero */
.hero-photo{position:relative;margin:0 0 1rem;border-radius:20px;overflow:hidden;
  aspect-ratio:5/4;background:linear-gradient(155deg,#F4EFE9 0%,#EADFD6 60%,#E4D3D6 100%);
  border:1px solid var(--border);box-shadow:0 20px 50px -26px rgba(27,22,34,.4)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block}
.hero-photo.is-empty::after{content:'Espacio reservado para la foto de Brittany';
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding:1rem;font-size:var(--fs-xs);font-weight:600;letter-spacing:.03em;
  color:var(--text-3);text-align:center}
.hero-photo.is-empty::before{content:'TB';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-size:3.4rem;font-weight:600;
  color:var(--text);opacity:.12}

/* proof strip */
.ps-num{font-size:clamp(1.9rem,1.5rem + 1.3vw,2.6rem);font-weight:600}
.ps-lbl{font-size:var(--fs-xs);color:var(--on-dark-2);line-height:1.5}

/* clase gratis */
.free-hero h2{color:#fff;font-size:var(--fs-h2)}
.fh-badge{font-size:.68rem;letter-spacing:.09em;padding:.4rem 1rem}
.fh-sub{font-size:var(--fs-lead);text-align:left;color:var(--on-dark);max-width:58ch;margin-left:auto;margin-right:auto;line-height:1.68}
.fh-perks{gap:.7rem;padding:1.1rem 1.2rem;border-radius:var(--r);max-width:560px;margin-left:auto;margin-right:auto}
.fh-perk{font-size:var(--fs-sm);color:var(--on-dark);gap:.75rem;align-items:flex-start;line-height:1.5}
.fh-perk .ico{width:19px;height:19px;color:var(--accent-on-dark);margin-top:.12rem}
.fh-disclaimer{font-size:var(--fs-xs);color:var(--on-dark-2);max-width:46ch;margin-left:auto;margin-right:auto}

/* dolores */
.pc{gap:.9rem;padding:1.2rem 1.25rem;align-items:flex-start}
.pc h4{font-family:var(--font-sans);font-size:var(--fs-h4);margin-bottom:.3rem}
.pc p{font-size:var(--fs-sm);line-height:1.62;color:var(--text-2)}
.pc:hover .ico-box{transform:none}

/* sobre mi */
.about-quote{font-size:clamp(1.15rem,1.02rem + .55vw,1.5rem);line-height:1.5;padding-left:1.1rem;border-left-width:3px;margin:1rem 0 1.3rem}
.achip{font-size:var(--fs-xs);font-weight:600;padding:.38rem .85rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--text-2)}
.achip .ico{width:15px;height:15px;color:var(--coral-d)}
.hl-list{gap:.9rem}
.hl{gap:.85rem}
.hl-icon{width:40px;height:40px;border-radius:12px;background:var(--coral-l);border:1px solid rgba(232,96,76,.18);color:var(--coral-d)}
.hl-icon .ico{width:20px;height:20px}
.hl-b h4{font-size:var(--fs-h4);margin-bottom:.15rem}
.hl-b p{font-size:var(--fs-sm);line-height:1.55;color:var(--text-2)}

/* servicios */
.sg{gap:1rem;margin-top:1.5rem}
.sv{padding:1.5rem 1.4rem;display:flex;flex-direction:column;border-radius:20px}
.sv-ttag{font-size:.68rem;letter-spacing:.1em;padding:.24rem .7rem;margin-bottom:.8rem;color:#A33A5C;background:rgba(163,58,92,.09)}
.sv-badge{font-size:.62rem;letter-spacing:.08em;padding:.28rem .7rem;top:1.1rem;right:1.1rem}
.sv-icon{margin-bottom:.7rem}
.sv h3{font-family:var(--font-sans);font-size:var(--fs-h3);margin-bottom:.45rem}
.sv p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.62;margin-bottom:1rem}
.sv-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:0 0 1.2rem;padding:1.1rem 0 0;border-top:1px solid var(--border)}
.sv-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--text-2);line-height:1.5}
.sv-list .ico{width:17px;height:17px;color:#2E7D5B;margin-top:.15rem}
.sv-price{font-family:var(--font-sans);font-weight:800;font-size:clamp(1.8rem,1.5rem + 1vw,2.35rem);
  color:var(--text);margin-bottom:1.1rem;letter-spacing:-.03em;line-height:1;margin-top:auto}
.sv-price .cur{font-size:.95rem;font-weight:600;color:var(--text-3);letter-spacing:0}
.sv-price small{font-size:.9rem;font-weight:500;color:var(--text-3);font-family:var(--font-sans)}
.sv .btn{width:100%}
.sv-note{margin-top:1.4rem;font-size:var(--fs-sm);color:var(--text-2);text-align:center;max-width:60ch;
  margin-left:auto;margin-right:auto;line-height:1.6}

/* testimonios */
.tc{padding:1.4rem 1.35rem;border-radius:20px}
.tc-txt{font-size:var(--fs-sm);line-height:1.7;text-align:left;margin-top:1.7rem;margin-bottom:1rem}
.tc-featured .tc-txt{font-size:var(--fs-lead);line-height:1.65}
.tc-stars{font-size:.8rem;letter-spacing:2px}
.tc-name{font-size:var(--fs-sm)}
.tc-role{font-size:var(--fs-xs);color:var(--text-3)}
.tc-featured .tc-role{color:var(--on-dark-2)}
.tc::before{color:var(--sand);font-size:3.4rem}
.tc-featured::before{color:rgba(255,138,115,.3)}

/* mini cta */
.mini-cta h3{color:#fff;font-family:var(--font-display);font-weight:600;font-size:var(--fs-h2)}
.mini-cta p{color:rgba(255,255,255,.92);font-size:var(--fs-sm)}

/* recursos */
.bc{padding:1.1rem 1.15rem;gap:1rem;border-radius:var(--r)}
.bthumb{width:44px;height:44px;border-radius:12px;background:var(--coral-l);
  border:1px solid rgba(232,96,76,.18);color:var(--coral-d)}
.bthumb .ico{width:21px;height:21px}
.btag{font-size:.66rem;letter-spacing:.1em;color:#A33A5C;margin-bottom:.3rem}
.bc h4{font-size:var(--fs-sm);line-height:1.45;margin-bottom:.4rem}
.brl{font-size:var(--fs-xs);display:inline-flex;align-items:center;gap:.3rem;color:var(--coral-d)}

/* cierre y footer */
.fcta h2{color:#fff;font-size:var(--fs-h2)}
.fcta p{color:var(--on-dark-2);font-size:var(--fs-body);max-width:52ch;margin-left:auto;margin-right:auto}
.ft-brand p{font-size:var(--fs-xs);color:var(--on-dark-2);max-width:34ch;line-height:1.65}
.ft-col h5{font-size:.66rem;letter-spacing:.14em}
.ft-col ul li a{font-size:var(--fs-xs);color:var(--on-dark-2)}
.ft-col ul li a:hover{color:#fff}
.ft-copy{font-size:var(--fs-xs);color:var(--on-dark-3)}
.ft-legal a{font-size:var(--fs-xs);color:var(--on-dark-3)}
.ft-legal a:hover{color:var(--on-dark-2)}
.ft-soc a{width:40px;height:40px;color:var(--on-dark-2)}

/* barra fija movil */
.sticky-bar-text{font-size:var(--fs-xs);color:var(--text-3)}
.sticky-bar-text strong{font-size:var(--fs-sm);color:var(--text)}
.sticky-bar .btn{font-size:var(--fs-sm);min-height:46px}

/* nav */
.nav-logo{font-size:1.25rem;font-weight:600}
.nav-drawer ul li a{font-size:var(--fs-body);min-height:54px}
.nav-links-desktop a:not(.btn){font-size:var(--fs-sm)!important;font-weight:500}

/* ---------- TABLET / DESKTOP ---------- */
@media(min-width:768px){
  .section{padding-top:clamp(3rem,5vw,5.5rem);padding-bottom:clamp(3rem,5vw,5.5rem)}
  .free-hero,.fcta{padding-top:clamp(3.4rem,6vw,6rem);padding-bottom:clamp(3.4rem,6vw,6rem)}
  .proof-strip{padding-top:2.4rem;padding-bottom:2.4rem}
  .mini-cta{padding-top:3rem;padding-bottom:3rem}
  .sg{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;max-width:860px;margin-left:auto;margin-right:auto}
  .pain-grid{gap:1.1rem}
  .tg{gap:1.1rem}
  .bgrid{gap:1.1rem}
  .hero-photo{aspect-ratio:4/5;margin-bottom:1.1rem}
  .section > h2,.section > p,.section > .tag{max-width:60ch}
}
@media(min-width:1024px){
  .hero-content{grid-template-columns:minmax(0,1.06fr) minmax(300px,.94fr)!important;gap:clamp(2.5rem,4vw,4.5rem)!important}
  .hero-aside-stats{padding:1.15rem 1.25rem;border-radius:var(--r)}
  .has-num{font-family:var(--font-sans);font-weight:800;font-size:1.35rem;color:var(--coral-d);letter-spacing:-.02em}
  .has-lbl{font-size:var(--fs-xs);color:var(--text-2);line-height:1.45}
  .free-class-box{margin-bottom:1rem!important}
  #sobre-mi .about-grid{grid-template-columns:42% 1fr!important;gap:clamp(2.5rem,4vw,4rem)!important;align-items:center!important}
}
@media(min-width:1280px){
  .hero-content,.section,.mini-cta,.free-hero-in,.fcta-in{max-width:1180px}
}
/* ---------- MOVIL FINO ---------- */
@media(max-width:400px){
  :root{--px:16px}
  .hero h1{max-width:none}
  .sv{padding:1.25rem 1.1rem}
}


/* ---- hero: entra completo en una pantalla ---- */
@media(min-width:1024px){
  .hero-content{
    min-height:calc(100vh - var(--nav-h));
    min-height:calc(100svh - var(--nav-h));
    align-content:center;
    padding-top:1.4rem!important;padding-bottom:1.4rem!important;
  }
  .hero h1{
    font-size:min(clamp(2.4rem,1.35rem + 2.5vw,3.35rem),8.6vh)!important;
    line-height:1.06;max-width:15ch;margin-bottom:.75rem
  }
  .hero-sub{font-size:min(clamp(.98rem,.93rem + .22vw,1.12rem),2.4vh)!important;margin-bottom:1.15rem;max-width:50ch}
  .hero-ctas{margin-bottom:0!important;gap:.65rem}
  .hero-photo{aspect-ratio:auto!important;height:min(46vh,420px);margin-bottom:.85rem}
  .free-class-box{margin-bottom:0!important;padding:.85rem 1rem}
  .free-class-text strong{font-size:var(--fs-xs)}
  .free-class-text span{font-size:.74rem;line-height:1.45}
}
@media(min-width:1024px) and (max-height:720px){
  .hero-photo{height:min(40vh,300px)}
  .hero .btn-lg{min-height:50px;font-size:var(--fs-sm)}
}
@media(min-width:768px) and (max-width:1023px){
  .hero-content{padding-top:2rem}
  .hero h1{font-size:clamp(2.3rem,1.4rem + 3vw,3rem)!important;max-width:18ch}
  .hero-photo{aspect-ratio:16/10}
}
@media(max-width:767px){
  .hero-content{padding-top:1.5rem}
  .hero-sub{margin-bottom:1.15rem}
  .hero-photo{aspect-ratio:4/3;margin-bottom:.85rem}
}

/* ---- servicios compactos: caben en una pantalla ---- */
.sec-compact{padding-top:clamp(2rem,3vw,3rem)!important;padding-bottom:clamp(2rem,3vw,3rem)!important}
.sv-head-block{margin-bottom:1.15rem}
.sv-head-block h2{margin-bottom:.35rem}
.sv-head-block p{font-size:var(--fs-sm);max-width:64ch}
.sg{margin-top:0!important}
.sv{padding:1.2rem 1.25rem!important;gap:0}
.sv-head{display:grid;grid-template-columns:auto 1fr;grid-template-areas:'ico txt' 'price price';
  align-items:center;gap:.55rem .8rem;margin-bottom:.65rem}
.sv-head .ico-box{grid-area:ico}
.sv-head-t{grid-area:txt;min-width:0}
.sv-head .sv-price{grid-area:price;justify-self:start;margin:.3rem 0 0!important}
.sv-head .sv-ttag{margin-bottom:.12rem!important;font-size:.63rem!important;padding:.14rem .55rem!important}
.sv-head h3{margin-bottom:0!important;font-size:clamp(1.06rem,.98rem + .35vw,1.26rem)!important}
.sv-price{font-size:clamp(1.45rem,1.25rem + .7vw,1.85rem)!important;white-space:nowrap}
.sv-price .cur{font-size:.72rem}
.sv-price small{font-size:.72rem}
.sv-icon{margin-bottom:0!important;width:36px;height:36px}
.sv-icon .ico{width:18px;height:18px}
.sv p{font-size:var(--fs-xs)!important;margin-bottom:.8rem!important;line-height:1.55}
.sv-list{gap:.4rem!important;margin:0 0 .95rem!important;padding-top:.8rem!important}
.sv-list li{font-size:var(--fs-xs)!important;line-height:1.45}
.sv-list .ico{width:15px;height:15px;margin-top:.1rem}
.sv-badge{top:1.2rem!important;right:1.25rem!important;left:auto;bottom:auto}
.sv-note{margin-top:.95rem!important;font-size:var(--fs-xs)!important}
@media(min-width:1100px){
  .sv-head{grid-template-columns:auto 1fr auto;grid-template-areas:'ico txt price';gap:.75rem}
  .sv-head .sv-price{justify-self:end;margin:0!important}
  .sv-badge{top:.85rem!important}
}

/* badge tipo cinta, sin chocar con el precio */
.sv{overflow:visible!important}
.sv-badge{top:-10px!important;left:1.25rem!important;right:auto!important;bottom:auto!important;
  box-shadow:0 2px 6px rgba(44,26,14,.18)}
.sv.feat{margin-top:10px}
@media(min-width:768px){.sg{align-items:stretch}.sv.feat{margin-top:0}}

/* carrusel de precios en mobile, para que quepa en una pantalla */
.sg-hint{display:none}
@media(max-width:767px){
  .sg{
    display:grid!important;grid-auto-flow:column;grid-auto-columns:87%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    gap:.8rem!important;padding:14px var(--px) .5rem;
    margin-left:calc(var(--px) * -1);margin-right:calc(var(--px) * -1);
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch
  }
  .sg::-webkit-scrollbar{display:none}
  .sg > .sv{scroll-snap-align:center;margin-top:0}
  .sg-hint{display:block;text-align:center;font-size:var(--fs-xs);color:var(--text-3);margin-top:.55rem}
  .sv-list li{font-size:.8rem!important}
}

.sv .btn{white-space:normal;text-align:center;line-height:1.25;padding-left:1rem;padding-right:1rem;font-size:var(--fs-sm)}

/* ---- iconos mas sobrios ---- */
.ico-box,.hl-icon{background:var(--cream-d);border-color:var(--border);color:var(--text-2)}
.sv .ico-box{background:var(--coral-l);border-color:rgba(232,96,76,.18);color:var(--coral-d)}
.bthumb{background:var(--cream-d);border:1px solid var(--border);color:var(--text-2)}
.achip{padding:.42rem 1rem;letter-spacing:.01em}
.pc:hover .pe{transform:none!important}

/* ---- cierre: version clara ---- */
.fcta{
  background:
    radial-gradient(ellipse 80% 90% at 50% 0%,rgba(232,96,76,.14),transparent 62%),
    radial-gradient(circle at 1px 1px,rgba(44,26,14,.055) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#FCF6F2 0%,#F4E5DC 100%)!important;
  border-top:1px solid rgba(208,160,130,.5);
}
.fcta::before{background:none!important}
.fcta::after{background:radial-gradient(circle,rgba(232,96,76,.10),transparent 70%)!important}
.fcta h2{color:var(--text)!important}
.fcta p{color:var(--text-2)!important}
.fcta .btn-coral{box-shadow:0 2px 4px rgba(44,26,14,.1),0 16px 34px -18px rgba(201,69,53,.55)}

/* ---- footer: grafito neutro + credito Digital North ---- */
footer{
  background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0) 0 0/26px 26px,
    linear-gradient(180deg,#232120 0%,#1A1817 100%)!important;
  border-top:3px solid var(--coral-d);
  color:rgba(255,255,255,.72)
}
.ft-logo span{color:#F2A07B!important}
.ft-col h5{color:#F2A07B!important}
.ft-brand p,.ft-col ul li a{color:rgba(255,255,255,.62)!important}
.ft-col ul li a:hover{color:#fff!important}
.ft-copy{color:rgba(255,255,255,.45)!important}
.ft-legal a{color:rgba(255,255,255,.4)!important}
.ft-soc a{background:rgba(255,255,255,.07);color:rgba(255,255,255,.68)}
.ft-soc a:hover{background:var(--coral-d);color:#fff}
.ft-bottom{gap:1.2rem}
.ft-dn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  padding:.5rem .9rem;border-radius:50px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);transition:border-color .2s,background .2s
}
.ft-dn:hover{border-color:rgba(242,160,123,.5);background:rgba(255,255,255,.07)}
.ft-dn-lbl{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600}
.dn-mark{width:19px;height:19px;color:#F2A07B;flex:none}
.ft-dn-name{font-size:var(--fs-xs);font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.15}
.ft-dn-name em{display:block;font-style:normal;font-weight:500;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
@media(max-width:600px){
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:1rem}
  .ft-dn{order:3}
}

/* ---- clase diagnostico: version clara con division marcada ---- */
.free-hero{
  background:
    radial-gradient(ellipse 75% 85% at 50% -10%,rgba(232,96,76,.13),transparent 62%),
    radial-gradient(ellipse 45% 60% at 92% 100%,rgba(192,80,112,.08),transparent 62%),
    radial-gradient(circle at 1px 1px,rgba(44,26,14,.055) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#FCF6F2 0%,#F5E8E0 100%)!important;
  border-top:1px solid rgba(208,160,130,.5);
  border-bottom:1px solid rgba(208,160,130,.5);
}
.free-hero::before{
  background:
    linear-gradient(90deg,rgba(252,246,242,.85),transparent 14%,transparent 86%,rgba(245,232,224,.85))!important;
}
.free-hero h2{color:var(--text)!important}
.free-hero h2 em{color:var(--coral-d);font-style:italic}
.fh-sub{color:var(--text-2)!important}
.fh-perks{
  background:var(--white);border:1px solid var(--border);
  box-shadow:0 2px 4px rgba(44,26,14,.04),0 18px 40px -26px rgba(44,26,14,.3);
  padding:1.3rem 1.4rem
}
.fh-perk{color:var(--text-2)!important;font-weight:500}
.fh-perk .ico{color:var(--coral-d)!important}
.fh-disclaimer{color:var(--text-3)!important}
/* separacion clara entre secciones claras consecutivas */
.section-white + .section-cream,.section-cream + .section-white{border-top:1px solid var(--border)}
.section-cream{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hero{border-bottom:0}

/* ---- video de la seccion sobre mi ---- */
.about-video-wrap{margin-left:auto;margin-right:auto}
@media(min-width:1024px){
  #sobre-mi .about-grid{align-items:center!important}
  .about-video-wrap{position:sticky;top:calc(var(--nav-h) + 24px)}
}

/* ---- franja de cifras: version clara y texturizada ---- */
.proof-strip{
  background:
    radial-gradient(ellipse 55% 130% at 12% 0%,rgba(232,96,76,.09),transparent 62%),
    radial-gradient(ellipse 50% 130% at 88% 100%,rgba(192,80,112,.07),transparent 62%),
    radial-gradient(circle at 1px 1px,rgba(44,26,14,.075) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,#F8F4EF 0%,#F0E9E1 100%)!important;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding-top:clamp(1.5rem,2.2vw,2.1rem);padding-bottom:clamp(1.5rem,2.2vw,2.1rem);
}
.proof-strip::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(248,244,239,.9) 0%,transparent 12%,transparent 88%,rgba(240,233,225,.9) 100%);
}
.proof-strip-inner{position:relative;z-index:1;gap:1.6rem 1rem}
.proof-strip-inner > div{position:relative}
.ps-num{
  color:var(--text)!important;font-family:var(--font-display);font-weight:600;
  letter-spacing:-.02em;margin-bottom:.45rem;
}
.ps-lbl{color:var(--text-2)!important;font-size:var(--fs-xs);max-width:22ch;margin-inline:auto}
.proof-strip-inner > div:hover .ps-num{color:#A64A38!important;transform:none}
@media(min-width:768px){
  .proof-strip-inner > div:not(:last-child)::after{
    content:'';position:absolute;right:-.5rem;top:12%;bottom:12%;width:1px;
    background:linear-gradient(180deg,transparent,rgba(44,26,14,.14),transparent);
  }
}
@media(max-width:767px){
  .proof-strip-inner > div:nth-child(odd)::after{
    content:'';position:absolute;right:-.5rem;top:10%;bottom:10%;width:1px;
    background:linear-gradient(180deg,transparent,rgba(44,26,14,.12),transparent);
  }
}

/* ---- header mas alto ---- */
:root{--nav-h:64px}
@media(min-width:768px){:root{--nav-h:76px}}
.nav-logo{font-size:clamp(1.25rem,1.15rem + .4vw,1.5rem)}
.nav .btn{min-height:46px}

/* ---- balanceo de titulares y parrafos ---- */
h1,h2,h3,h4,.mini-cta h3{text-wrap:balance}
p,.fh-sub,.hero-sub,.sv-note,.tc-txt,.ps-lbl,.hl-b p,.pc p{text-wrap:pretty}
.hero h1{max-width:16ch;hyphens:none;overflow-wrap:break-word}
@media(max-width:767px){
  .hero h1{max-width:none;font-size:clamp(1.95rem,1.15rem + 4.2vw,2.6rem);letter-spacing:-.03em;line-height:1.08}
  .hero-content{padding-top:1.9rem}
}
@media(min-width:768px) and (max-width:1023px){
  .hero h1{max-width:20ch}
}

/* ---- ajustes finos de layout ---- */
html{overflow-x:clip}
.nav-drawer:not(.open){visibility:hidden;pointer-events:none}
.nav-drawer.open{visibility:visible;pointer-events:auto}

.sv-ttag,.sv-icon{align-self:flex-start}
.sg{max-width:none!important}
.trust-row{flex-wrap:wrap;overflow-x:visible}
.tc::before{left:auto;right:1.05rem;top:.85rem;opacity:.6}
.tc-stars{margin-bottom:.7rem}
.tc-txt{margin-top:0}
.tc-featured::before{opacity:.5}
.sv-price{display:flex;align-items:baseline;gap:.45rem}
.sv-price small{margin-left:.1rem}
.bc{flex-direction:row}
.bb{display:flex;flex-direction:column;height:100%}
.brl{margin-top:auto;padding-top:.45rem;align-self:flex-start}
.free-class-icon{align-self:flex-start}
.ico-box.pe{margin-top:.05rem}
@media(min-width:768px){
  .bgrid{align-items:stretch}
  .bc{align-items:stretch}
}

/* red de seguridad: si el observer no dispara, el contenido igual se ve */
.js-reveal-failsafe .rv.animate,.js-reveal-failsafe .rv-left.animate,
.js-reveal-failsafe .rv-right.animate,.js-reveal-failsafe .rv-stagger.animate{opacity:1;transform:none}
.js-reveal-failsafe .fh-perk{opacity:1;transform:none}


/* =====================================================================
   LOOK & FEEL CLARO 2026-08 (direccion de arte Digital North)
   Superficies casi blancas, neutros desaturados, cero lineas de color
   ===================================================================== */
:root{
  --cream:#FCFCFB;      /* antes #FAFAF8 */
  --cream-d:#F5F4F1;    /* antes #F2EDE6 */
  --cream-dd:#EDEBE7;   /* antes #EAE2D8 */
  --sand:#E4E1DC;       /* antes #E8DDD2 */
  --text:#2E2A28;       /* antes #2C1A0E */
  --ink-h:#46403C;      /* NUEVO: titulares, mas ligeros que el negro */
  --text-2:#57524E;     /* antes #5C4335 */
  --text-3:#6E6863;     /* antes #7A5A48 */
  --text-4:#8C8681;     /* antes #A8907F */
  --border:rgba(46,42,40,.08);    /* antes rgba(208,160,130,.22) */
  --border-s:rgba(46,42,40,.14);  /* antes rgba(208,160,130,.4) */
  --coral-t:#FDF4F1;    /* NUEVO: wash coral para bandas */
  --coral-t2:#FAE8E2;   /* NUEVO */
  --sh-1:0 1px 2px rgba(46,42,40,.04);
  --sh-2:0 6px 20px -8px rgba(46,42,40,.10);
  --sh-3:0 22px 50px -26px rgba(46,42,40,.18);
}
body{background:var(--cream)}
h1,h2{font-weight:500!important;color:var(--ink-h)!important;
  font-variation-settings:'SOFT' 22,'WONK' 0;letter-spacing:-.018em}
h3,h4{color:var(--text)}
em{color:var(--coral-d)}
p{color:var(--text-2)}
.tag{color:#A34A63;background:rgba(163,74,99,.08)}
.sv-ttag{color:#A34A63;background:rgba(163,74,99,.08)}
.btag{color:#A34A63}

/* superficies: alternancia, sin lineas de color */
.hero{background:var(--cream)}
.section-white{background:var(--white)}
.section-cream{background:var(--cream-d);border-top:0!important;border-bottom:0!important}
.section-white + .section-cream,.section-cream + .section-white{border-top:0!important}
.proof-strip{
  background:
    radial-gradient(circle at 1px 1px,rgba(46,42,40,.055) 1px,transparent 0) 0 0/22px 22px,
    var(--cream-d)!important;
  border-top:0!important;border-bottom:0!important;
}
.proof-strip::after{background:none!important}
.free-hero{
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%,rgba(232,96,76,.07),transparent 62%),
    var(--coral-t)!important;
  border-top:0!important;border-bottom:0!important;
}
.free-hero::before{background:none!important}
.fcta{
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%,rgba(232,96,76,.08),transparent 62%),
    var(--coral-t)!important;
  border-top:0!important;
}
.fcta::before,.fcta::after{background:none!important;display:none}
.mini-cta{background:var(--coral-t2)!important}
.mini-cta h3{color:var(--ink-h)!important;font-weight:500}
.mini-cta p{color:var(--text-2)!important}
.mini-cta .btn-white{background:var(--coral-d);color:#fff;box-shadow:var(--sh-2)}
.mini-cta .btn-white:hover{background:#B03A2A}
.free-hero h2,.fcta h2{color:var(--ink-h)!important}
.fh-sub,.fcta p{color:var(--text-2)!important}
.fh-disclaimer{color:var(--text-3)!important}
.fh-perks{background:var(--white);border:1px solid var(--border);box-shadow:var(--sh-2)}
.fh-perk{color:var(--text-2)!important}
.ps-num{color:var(--ink-h)!important;font-weight:500}
.ps-lbl{color:var(--text-3)!important}
.tc-featured{background:var(--white)!important;border:1px solid var(--border)!important;box-shadow:var(--sh-2)}
.tc-featured .tc-txt{color:var(--text-2)!important}
.tc-featured .tc-name{color:var(--text)!important}
.tc-featured .tc-role{color:var(--text-3)!important}
.tc-featured .tc-stars{color:#D98324!important}
.tc-featured::before{color:var(--sand)!important;opacity:1}
.tc-stars{color:#D98324}
.ico-box,.hl-icon,.bthumb{background:var(--cream-d);border-color:var(--border);color:var(--text-3)}
.sv .ico-box{background:var(--coral-t2);border-color:rgba(201,69,53,.14);color:var(--coral-d)}
.achip{background:var(--cream-d);border-color:var(--border);color:var(--text-2)}
.sv,.pc,.tc,.bc,.free-class-box,.hero-aside-stats{box-shadow:var(--sh-1)}
.sv.feat{box-shadow:var(--sh-2)}
.hero-photo{box-shadow:var(--sh-3);background:var(--cream-d)}
.free-class-box{background:var(--coral-t)!important;border-color:rgba(201,69,53,.14)!important}

/* nav y barra fija */
.nav{background:rgba(252,252,251,.9);border-bottom:1px solid var(--border)}
.nav.scrolled{box-shadow:0 2px 20px rgba(46,42,40,.06)}
.nav-logo{color:var(--text)}
.sticky-bar{background:rgba(255,255,255,.96);border-top:1px solid var(--border);
  box-shadow:0 -6px 24px rgba(46,42,40,.09)}

/* footer claro: cierra por ritmo, no por oscuridad */
footer{
  background:var(--cream-d)!important;border-top:0!important;
  color:var(--text-2)!important;padding-top:clamp(2.6rem,4vw,4rem)
}
.ft-logo{color:var(--text)!important}
.ft-logo span{color:var(--coral-d)!important}
.ft-col h5{color:var(--text-4)!important}
.ft-brand p,.ft-col ul li a{color:var(--text-2)!important}
.ft-col ul li a:hover{color:var(--coral-d)!important}
.ft-brand{border-bottom:1px solid var(--border)}
.ft-bottom{border-top:1px solid var(--border)}
.ft-copy,.ft-legal a{color:var(--text-4)!important}
.ft-legal{border-top:1px solid var(--border)}
.ft-soc a{background:var(--white);border:1px solid var(--border);color:var(--text-3)}
.ft-soc a:hover{background:var(--coral-d);border-color:var(--coral-d);color:#fff}
.ft-dn{border:1px solid var(--border);background:var(--white);padding:.5rem .95rem;gap:.75rem}
.ft-dn:hover{border-color:rgba(18,194,70,.45);box-shadow:var(--sh-1)}
.ft-dn-lbl{color:var(--text-4)}
.dn-logo{height:22px;width:auto;display:block}

/* correcciones de contraste */
.ft-copy,.ft-legal a{color:var(--text-3)!important}
.ft-col h5{color:var(--text-3)!important}
.tc-stars,.tc-featured .tc-stars{color:#9C5D10!important}

/* alineaciones */
#sobre-mi .about-grid > *{align-self:start!important}
.about-video-wrap{align-self:start!important;margin-top:0!important;margin-bottom:0!important;top:auto!important;position:relative!important}

.free-class-box{align-items:flex-start}
.free-class-icon{margin-top:.1rem}
#sobre-mi .about-grid{align-items:start!important}
.about-video-wrap{position:relative!important;margin-top:.2rem}

/* clase diagnostico en dos columnas, sin vacio a los lados */
.fh-grid{display:grid;gap:1.4rem}
.fh-copy h2{margin-bottom:.6rem}
@media(min-width:900px){
  .free-hero{text-align:left}
  .fh-grid{grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
    gap:clamp(2rem,4vw,4rem);align-items:center}
  .fh-copy{text-align:left}
  .fh-sub{margin-left:0;margin-right:0;max-width:44ch;text-align:left}
  .fh-perks{margin:0;max-width:none}
  .fh-disclaimer{margin-left:0;text-align:left;max-width:40ch}
  .free-hero .btn-lg{margin-bottom:.9rem}
}

/* STICKY BAR RESET */
.sticky-bar{
  opacity:0 !important;
  transform:translateY(110%) !important;
  transition:opacity .35s ease, transform .35s ease !important;
  pointer-events:none !important;
  will-change:transform, opacity;
}
.sticky-bar.sb-on{
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}

/* =====================================================================
   CAPA "SIN BLANCO Y NEGRO": superficies calidas, sombras en vez de bordes
   ===================================================================== */
:root{
  --cream:#FBF8F5;      /* blanco calido, no blanco puro */
  --cream-d:#F5F0EA;    /* arena suave */
  --cream-dd:#EDE6DE;
  --sand:#E3D9D0;
  --white:#FFFFFF;
  --text:#3A322E;       /* nunca negro */
  --ink-h:#4A403A;
  --text-2:#6B605A;
  --text-3:#8A7E76;
  --text-4:#A2968D;
  --border:rgba(58,50,46,.075);
  --border-s:rgba(58,50,46,.13);
  --coral-t:#FCEFE9;
  --coral-t2:#F9E2D9;
  --accent2:#2E6F63;    /* verde profundo, rompe la bicromia */
  --sh-1:0 1px 2px rgba(58,50,46,.04),0 2px 8px -4px rgba(58,50,46,.06);
  --sh-2:0 2px 6px rgba(58,50,46,.05),0 12px 28px -14px rgba(58,50,46,.16);
  --sh-3:0 4px 10px rgba(58,50,46,.05),0 28px 56px -28px rgba(58,50,46,.22);
}
html{background:#FBF8F5}
body{background:linear-gradient(178deg,#FDFBF9 0%,#F8F2EC 55%,#FAF4EE 100%)}
.hero{background:transparent!important;position:relative}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 52% at 88% 6%,rgba(232,96,76,.13),transparent 62%),
    radial-gradient(ellipse 40% 46% at 4% 88%,rgba(46,111,99,.07),transparent 60%),
    radial-gradient(ellipse 34% 40% at 62% 100%,rgba(242,160,123,.10),transparent 60%)!important;
}
.section-white{background:rgba(255,255,255,.66)!important;backdrop-filter:saturate(105%)}
.section-cream{background:rgba(240,232,223,.5)!important}
.proof-strip{
  background:
    radial-gradient(circle at 1px 1px,rgba(58,50,46,.05) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,rgba(246,239,232,.85),rgba(250,244,238,.85))!important;
}
.free-hero{
  background:
    radial-gradient(ellipse 60% 70% at 18% 0%,rgba(232,96,76,.10),transparent 62%),
    radial-gradient(ellipse 46% 60% at 92% 100%,rgba(46,111,99,.07),transparent 62%),
    linear-gradient(180deg,#FDF3EE,#FBEDE6)!important;
}
.fcta{
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%,rgba(232,96,76,.12),transparent 62%),
    linear-gradient(180deg,#FDF3EE,#F9E8DF)!important;
}
.mini-cta{background:linear-gradient(120deg,#F9E2D9,#FBEFE7)!important}
footer{background:linear-gradient(180deg,#F3ECE4,#EFE7DE)!important}
/* tarjetas: sombra, no borde */
.pc,.tc,.bc,.sv,.fh-perks,.free-class-box,.hero-aside-stats,.ft-dn{
  border-color:transparent!important;background:var(--white)!important;box-shadow:var(--sh-1)!important}
.sv.feat{box-shadow:var(--sh-2)!important;border:1.5px solid rgba(201,69,53,.28)!important;
  background:linear-gradient(160deg,#fff 0%,#FEF7F4 100%)!important}
.tc-featured{box-shadow:var(--sh-2)!important}
.free-class-box{background:linear-gradient(120deg,#FDF1EC,#FCF6F2)!important}
.fh-perks{box-shadow:var(--sh-2)!important}
.hero-photo{box-shadow:var(--sh-3);background:var(--cream-d)}
.ico-box,.hl-icon,.bthumb{background:#F6EFE9!important;border-color:transparent!important;color:#B0553F!important}
.sv .ico-box{background:#FBE7DF!important;color:var(--coral-d)!important}
.sv-list .ico{color:var(--accent2)!important}
.achip{background:rgba(255,255,255,.85)!important;border-color:var(--border-s)!important;color:var(--text-2)!important}
.nav{background:rgba(252,249,246,.88)!important;border-bottom:1px solid rgba(58,50,46,.06)!important}
.sticky-bar{background:rgba(255,255,255,.95)!important}
.tag{color:#9C4A5E!important;background:rgba(156,74,94,.10)!important}
.sv-ttag{color:#9C4A5E!important;background:rgba(156,74,94,.10)!important}
.btag{color:#9C4A5E!important}
.tc-stars{color:#C07A16!important}
.about-quote{border-left-color:var(--coral)!important}
.ft-soc a{background:rgba(255,255,255,.9)!important;border-color:transparent!important;box-shadow:var(--sh-1)}


/* ---------------------------------------------------------------
   VARIANTE B, peso contenido: la negrita se reserva para keywords
   --------------------------------------------------------------- */
:root{--font-display:"Bricolage Grotesque",system-ui,sans-serif;--font-sans:"Instrument Sans",system-ui,sans-serif}

h1,h2{font-family:var(--font-display)!important;font-weight:400!important;
  font-variation-settings:'opsz' 72!important;letter-spacing:-.032em!important;
  color:var(--ink-h)!important}
h1{line-height:1.03!important}
h2{line-height:1.12!important}
h3{font-family:var(--font-display)!important;font-weight:500!important;
  font-variation-settings:'opsz' 24!important;letter-spacing:-.02em}
h4{font-family:var(--font-display)!important;font-weight:500!important;
  font-variation-settings:'opsz' 16!important;letter-spacing:-.012em}
body,p,li,span,a,.btn{font-family:var(--font-sans)}

/* la negrita solo resalta: palabra clave en peso alto y color de marca */
em{font-style:normal!important;font-weight:700!important;color:var(--coral-d)!important;
  font-variation-settings:'opsz' 72}
h1 em,h2 em{font-family:var(--font-display)!important}
strong{font-weight:600}

em{font-weight:700!important}
h1 em,h2 em{font-weight:700!important}
.free-class-text strong{color:var(--text)!important;font-size:var(--fs-sm)!important}
.free-class-text span{color:var(--text-2)!important}
.fh-perk,.sv-list li{color:var(--text-2)!important}

/* pesos contenidos en el resto de la interfaz */
.nav-logo{font-family:var(--font-display)!important;font-weight:600}
.nav-logo span{font-weight:700}
.ft-logo{font-family:var(--font-display)!important;font-weight:600}
.nav-links-desktop a:not(.btn){font-weight:450!important}
.btn{font-weight:600!important}
.tag,.sv-ttag,.btag,.ft-col h5,.ft-dn-lbl{font-weight:600!important;letter-spacing:.1em}
.ps-num{font-family:var(--font-display)!important;font-weight:600!important;
  font-variation-settings:'opsz' 48}
.sv-price{font-family:var(--font-display)!important;font-weight:600!important;
  font-variation-settings:'opsz' 48}
.sv-price .cur,.sv-price small{font-family:var(--font-sans)!important;font-weight:500}
.free-class-text strong{font-weight:600}
.tc-name{font-weight:600}
.sv-badge{font-weight:600}
.mini-cta h3{font-family:var(--font-display)!important;font-weight:400!important;
  font-variation-settings:'opsz' 48}
.about-quote{font-family:var(--font-sans)!important;font-weight:400;font-style:italic;
  font-size:clamp(1.1rem,1rem + .5vw,1.42rem);line-height:1.55}
.tc-txt{font-family:var(--font-sans)!important;font-weight:400}
.hl-b h4,.pc h4,.bc h4{font-weight:500!important}
.sv-list li,.fh-perk{font-weight:400}
.hero-sub,.fh-sub,.sec p{font-weight:400}

/* ============ OPCION 6: Gabarito + Schibsted Grotesk ============ */
:root{--font-display:'Gabarito',system-ui,sans-serif;--font-sans:'Schibsted Grotesk',system-ui,sans-serif}
h1,h2{font-family:'Gabarito',sans-serif!important;font-variation-settings:normal!important;color:var(--ink-h)!important}
h1{font-weight:400!important;letter-spacing:-.025em!important;line-height:1.06!important}
h2{font-weight:500!important;letter-spacing:-.022em!important;line-height:1.14!important}
h3,h4{font-family:'Gabarito',sans-serif!important;font-weight:500!important;font-variation-settings:normal!important;letter-spacing:-.015em}
body,p,li,a,span,input,button,.btn,.tc-txt,.about-quote{font-family:'Schibsted Grotesk',sans-serif!important}
body,p{letter-spacing:.003em;line-height:1.6}
em,h1 em,h2 em{font-family:'Gabarito',sans-serif!important;font-weight:700!important;font-style:normal!important;color:var(--coral-d)!important}
.ps-num,.sv-price{font-family:'Gabarito',sans-serif!important;font-weight:600!important;font-variation-settings:normal!important}
.nav-logo,.ft-logo{font-family:'Gabarito',sans-serif!important;font-weight:500!important}
.nav-logo span,.ft-logo span{font-weight:700!important}
.mini-cta h3{font-family:'Gabarito',sans-serif!important;font-weight:400!important;font-variation-settings:normal!important}
.about-quote{font-style:italic;font-weight:400}
.hl-b h4,.pc h4,.bc h4{font-weight:500!important}
.btn{font-weight:600!important}
.tag,.sv-ttag,.btag,.ft-col h5,.ft-dn-lbl{font-weight:700!important}

/* =====================================================================
   COLOR + ENCUADRE 2026-08 (opcion 6: Gabarito + Schibsted Grotesk)
   Paleta ampliada, ritmo vertical unico, contenedores alineados
   ===================================================================== */
:root{
  /* acentos */
  --coral:#E8604C;  --coral-d:#C94535;  --coral-t:#FDEEE8;  --coral-t2:#FADCD1;
  --amber:#C97A1A;  --amber-t:#FCF2E0;
  --teal:#2E7D6E;   --teal-t:#E9F3F0;
  --plum:#A34A63;   --plum-t:#FAECF0;
  /* superficies, todas claras */
  --surf-white:#FFFFFF;
  --surf-sand:#F9F2E9;
  --surf-blush:#FDF1EB;
  --surf-sage:#EFF4F1;
  --surf-footer:#F2EAE0;
  --text:#3A322E; --ink-h:#4A403A; --text-2:#6B605A; --text-3:#897D75; --text-4:#A2968D;
  --border:rgba(58,50,46,.075); --border-s:rgba(58,50,46,.13);
  /* ritmo vertical unico */
  /* ritmo mas ceñido: entre seccion y seccion sobraba aire vacio */
  --sec-y:clamp(2.4rem,3.5vw,3.6rem);
  --sec-y-sm:clamp(2rem,2.7vw,2.7rem);
  --maxw:1180px;
}
body{background:linear-gradient(178deg,#FEFCFA 0%,#FAF4EE 50%,#FDF6F1 100%)}

/* ---------- encuadre: un solo contenedor ---------- */
.hero-content,.section,.free-hero-in,.fcta-in,.mini-cta,
.proof-strip-inner,.ft-brand,.ft-grid,.ft-bottom,.ft-legal{
  max-width:var(--maxw)!important;margin-left:auto!important;margin-right:auto!important}
@media(min-width:768px){
  .hero-content,.section,.free-hero-in,.fcta-in,.mini-cta{
    padding-left:clamp(32px,6vw,100px)!important;padding-right:clamp(32px,6vw,100px)!important}
  .proof-strip{padding-left:0!important;padding-right:0!important}
  .proof-strip-inner{padding-left:clamp(32px,6vw,100px);padding-right:clamp(32px,6vw,100px)}
  footer{padding-left:clamp(32px,6vw,100px)!important;padding-right:clamp(32px,6vw,100px)!important}
  .ft-brand,.ft-grid,.ft-bottom,.ft-legal{padding-left:0;padding-right:0}
  /* ritmo vertical identico en todas las secciones */
  .section,.free-hero,.fcta{padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}
  .sec-compact{padding-top:var(--sec-y-sm)!important;padding-bottom:var(--sec-y-sm)!important}
  .proof-strip,.mini-cta{padding-top:var(--sec-y-sm)!important;padding-bottom:var(--sec-y-sm)!important}
  footer{padding-top:var(--sec-y)!important}
  footer{padding-left:0!important;padding-right:0!important}
  .ft-brand,.ft-grid,.ft-bottom,.ft-legal{
    padding-left:clamp(32px,6vw,100px)!important;padding-right:clamp(32px,6vw,100px)!important}
}
/* tarjetas de la misma altura en cada fila */
.pain-grid,.bgrid,.tg,.sg{align-items:stretch}
.pc,.bc,.tc,.sv{height:100%}

/* ---------- superficies con color, ninguna oscura ---------- */
.hero{background:transparent!important}
.hero::before{
  background:
    radial-gradient(ellipse 44% 50% at 90% 4%,rgba(232,96,76,.16),transparent 62%),
    radial-gradient(ellipse 38% 44% at 2% 86%,rgba(46,125,110,.10),transparent 60%),
    radial-gradient(ellipse 32% 38% at 58% 102%,rgba(201,122,26,.10),transparent 60%)!important}
.proof-strip{
  background:
    radial-gradient(circle at 1px 1px,rgba(58,50,46,.055) 1px,transparent 0) 0 0/22px 22px,
    linear-gradient(100deg,#F8F1E7 0%,#FAF3EA 50%,#F6EFE6 100%)!important}
.free-hero{
  background:
    radial-gradient(ellipse 55% 70% at 14% 0%,rgba(232,96,76,.14),transparent 62%),
    radial-gradient(ellipse 42% 55% at 94% 100%,rgba(163,74,99,.10),transparent 62%),
    linear-gradient(180deg,#FDF2EC,#FBE9E0)!important}
.section-white{background:rgba(255,255,255,.74)!important}
#sobre-mi{background:linear-gradient(170deg,#F0F5F2 0%,#EDF3EF 100%)!important}
#servicios{background:rgba(255,255,255,.8)!important}
.section-cream{background:linear-gradient(180deg,#FAF3EA,#F7EFE5)!important}
.mini-cta{background:linear-gradient(115deg,#FADCD1 0%,#FDEFE7 55%,#F7E7DE 100%)!important}
.fcta{
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%,rgba(232,96,76,.15),transparent 62%),
    linear-gradient(180deg,#FDF2EC,#F9E5DA)!important}
footer{background:linear-gradient(180deg,#F4ECE2,#EFE6DB)!important}

/* ---------- color repartido en los iconos ---------- */
.pain-grid .pc:nth-child(1) .ico-box{background:var(--coral-t)!important;color:var(--coral-d)!important}
.pain-grid .pc:nth-child(2) .ico-box{background:var(--plum-t)!important;color:var(--plum)!important}
.pain-grid .pc:nth-child(3) .ico-box{background:var(--amber-t)!important;color:var(--amber)!important}
.pain-grid .pc:nth-child(4) .ico-box{background:var(--teal-t)!important;color:var(--teal)!important}
.hl-list .hl:nth-child(1) .hl-icon{background:var(--coral-t)!important;color:var(--coral-d)!important}
.hl-list .hl:nth-child(2) .hl-icon{background:var(--teal-t)!important;color:var(--teal)!important}
.hl-list .hl:nth-child(3) .hl-icon{background:var(--amber-t)!important;color:var(--amber)!important}
.bgrid .bc:nth-child(1) .bthumb{background:var(--plum-t)!important;color:var(--plum)!important}
.bgrid .bc:nth-child(2) .bthumb{background:var(--teal-t)!important;color:var(--teal)!important}
.bgrid .bc:nth-child(3) .bthumb{background:var(--amber-t)!important;color:var(--amber)!important}
.fh-perks .fh-perk:nth-child(1) .ico{color:var(--coral-d)!important}
.fh-perks .fh-perk:nth-child(2) .ico{color:var(--plum)!important}
.fh-perks .fh-perk:nth-child(3) .ico{color:var(--amber)!important}
.fh-perks .fh-perk:nth-child(4) .ico{color:var(--teal)!important}
.sv-list .ico{color:var(--teal)!important}
.tc-stars,.tc-featured .tc-stars{color:var(--amber)!important}
.tag{color:var(--plum)!important;background:var(--plum-t)!important}
.sg .sv:nth-child(1) .sv-ttag{color:var(--coral-d)!important;background:var(--coral-t)!important}
.sg .sv:nth-child(1) .ico-box{background:var(--coral-t)!important;color:var(--coral-d)!important}
.sg .sv:nth-child(2) .sv-ttag{color:var(--teal)!important;background:var(--teal-t)!important}
.sg .sv:nth-child(2) .ico-box{background:var(--teal-t)!important;color:var(--teal)!important}
.sg .sv:nth-child(2) .btn-outline{color:var(--teal)!important;border-color:var(--teal)!important}
.sg .sv:nth-child(2) .btn-outline:hover{background:var(--teal-t)!important}
.btag{color:var(--plum)!important}
.ps-num{color:var(--ink-h)!important}
.proof-strip-inner > div:nth-child(1) .ps-num{color:var(--coral-d)!important}
.proof-strip-inner > div:nth-child(2) .ps-num{color:var(--teal)!important}
.proof-strip-inner > div:nth-child(3) .ps-num{color:var(--amber)!important}
.proof-strip-inner > div:nth-child(4) .ps-num{color:var(--plum)!important}
.free-class-box{background:linear-gradient(120deg,#FDF0E9,#FCF7F3)!important;border:1px solid rgba(201,69,53,.12)!important}
.free-class-icon{background:var(--coral-t)!important;color:var(--coral-d)!important}
.achip{background:rgba(255,255,255,.9)!important;color:var(--text-2)!important;border:1px solid var(--border-s)!important}
.about-quote{border-left:3px solid var(--teal)!important}
.ft-logo span{color:var(--coral-d)!important}
.ft-col h5{color:var(--plum)!important}
.ft-soc a:hover{background:var(--teal)!important;border-color:var(--teal)!important;color:#fff!important}
.tc-featured{background:linear-gradient(150deg,#FFFFFF,#FBF6F0)!important}
.tc{background:#fff!important}
.eyebrow,.live-dot{}

/* =====================================================================
   MAS VIDA 2026-08: video sin barras negras, tarjetas flotantes,
   subrayado de marca, superficies mas luminosas y movimiento sutil
   ===================================================================== */
:root{
  --surf-white:#FFFFFF;
  --text:#413833; --ink-h:#4E443E; --text-2:#6F645D; --text-3:#8D8179;
}
body{background:linear-gradient(180deg,#FFFDFC 0%,#FDF7F2 42%,#FEF9F5 100%)}

/* superficies un punto mas luminosas */
.section-white,#servicios{background:#fff!important}
.section-cream{background:linear-gradient(180deg,#FDF8F1,#FBF4EC)!important}
.proof-strip{background:
  radial-gradient(circle at 1px 1px,rgba(65,56,51,.05) 1px,transparent 0) 0 0/22px 22px,
  linear-gradient(100deg,#FCF6EE 0%,#FEF9F3 50%,#FBF4EC 100%)!important}
#sobre-mi{background:linear-gradient(170deg,#F3F8F5 0%,#F0F6F2 100%)!important}
.free-hero{background:
  radial-gradient(ellipse 55% 70% at 14% 0%,rgba(232,96,76,.13),transparent 62%),
  radial-gradient(ellipse 42% 55% at 94% 100%,rgba(163,74,99,.09),transparent 62%),
  linear-gradient(180deg,#FEF6F1,#FDEFE7)!important}
.fcta{background:
  radial-gradient(ellipse 60% 70% at 50% 0%,rgba(232,96,76,.14),transparent 62%),
  linear-gradient(180deg,#FEF6F1,#FCEBE1)!important}
.mini-cta{background:linear-gradient(115deg,#FBE3D8 0%,#FEF3EC 55%,#F9EBE2 100%)!important}
footer{background:linear-gradient(180deg,#F7F0E7,#F3EBE1)!important}

/* video vertical real, sin la caja negra */
.about-video-wrap{aspect-ratio:4/3!important;background:#F0F5F2!important;
  border-radius:20px!important;box-shadow:0 4px 12px rgba(65,56,51,.06),0 28px 56px -28px rgba(65,56,51,.28)!important}
#about-video{border-radius:20px}
.vc-overlay{border-radius:20px}
.vc-replay{border-radius:20px}

/* tarjetas flotantes sobre la foto */
.hero-photo{overflow:visible!important}
.hero-photo img{border-radius:20px}
.hero-photo::after,.hero-photo::before{border-radius:20px}
.ph-badge{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-radius:50px;padding:.6rem 1rem;
  font-size:.78rem;font-weight:600;color:var(--text);white-space:nowrap;
  box-shadow:0 2px 6px rgba(65,56,51,.08),0 16px 34px -18px rgba(65,56,51,.35)}
.ph-badge strong{color:var(--amber);font-weight:700;font-size:.95rem}
.ph-badge-1{top:1.1rem;left:-1.6rem;animation:floaty 6s ease-in-out infinite}
.ph-badge-2{bottom:1.2rem;right:-1.2rem;animation:floaty 6s ease-in-out infinite .8s}
.ph-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;
  box-shadow:0 0 0 0 rgba(46,125,110,.5);animation:pulseDot 2.4s ease-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(46,125,110,.5)}70%{box-shadow:0 0 0 9px rgba(46,125,110,0)}100%{box-shadow:0 0 0 0 rgba(46,125,110,0)}}
@media(max-width:1023px){.ph-badge-1{left:.8rem}.ph-badge-2{right:.8rem}}
@media(max-width:420px){.ph-badge{font-size:.7rem;padding:.5rem .8rem}}

/* la palabra clave lleva subrayado de marca, no solo color */
h1 em,h2 em{position:relative;display:inline-block}
h1 em::after,h2 em::after{content:'';position:absolute;left:-.04em;right:-.04em;bottom:.02em;
  height:.16em;border-radius:.1em;z-index:-1;
  background:linear-gradient(90deg,rgba(232,96,76,.26),rgba(201,122,26,.24))}
h1 em,h2 em{z-index:0}

/* movimiento muy sutil en el fondo del hero */
.hero::before{animation:auraShift 18s ease-in-out infinite alternate}
@keyframes auraShift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-1.5%,1%,0) scale(1.06)}}

/* interacciones con mas respuesta */
.sv:hover,.pc:hover,.bc:hover,.tc:hover{transform:translateY(-5px)}
.btn-coral:hover{transform:translateY(-2px)}
.ft-soc a,.ico-box,.hl-icon,.bthumb{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .25s}
.pc:hover .ico-box,.bc:hover .bthumb,.hl:hover .hl-icon{transform:scale(1.08) rotate(-4deg)}
.nav .btn-coral{box-shadow:0 2px 6px rgba(201,69,53,.22),0 10px 22px -12px rgba(201,69,53,.5)}

@media(prefers-reduced-motion:reduce){
  .ph-badge,.hero::before,.ph-dot{animation:none!important}
}

/* =====================================================================
   AJUSTE: fuera el verde. Paleta de tres acentos calidos
   coral, ambar y ciruela
   ===================================================================== */
:root{
  --teal:#A34A63;      /* remapeado a ciruela, ya no existe verde */
  --teal-t:#FAECF0;
  --accent2:#C94535;
}
/* superficie de "Sobre mi": de salvia verde a un lila calido muy claro */
#sobre-mi{background:linear-gradient(170deg,#FAF3F5 0%,#F8F0F2 100%)!important}

/* rotacion de acentos sin verde */
.pain-grid .pc:nth-child(1) .ico-box{background:var(--coral-t)!important;color:var(--coral-d)!important}
.pain-grid .pc:nth-child(2) .ico-box{background:var(--plum-t)!important;color:var(--plum)!important}
.pain-grid .pc:nth-child(3) .ico-box{background:var(--amber-t)!important;color:var(--amber)!important}
.pain-grid .pc:nth-child(4) .ico-box{background:var(--coral-t)!important;color:var(--coral-d)!important}
.hl-list .hl:nth-child(1) .hl-icon{background:var(--coral-t)!important;color:var(--coral-d)!important}
.hl-list .hl:nth-child(2) .hl-icon{background:var(--plum-t)!important;color:var(--plum)!important}
.hl-list .hl:nth-child(3) .hl-icon{background:var(--amber-t)!important;color:var(--amber)!important}
.bgrid .bc:nth-child(1) .bthumb{background:var(--plum-t)!important;color:var(--plum)!important}
.bgrid .bc:nth-child(2) .bthumb{background:var(--coral-t)!important;color:var(--coral-d)!important}
.bgrid .bc:nth-child(3) .bthumb{background:var(--amber-t)!important;color:var(--amber)!important}
.fh-perks .fh-perk:nth-child(1) .ico{color:var(--coral-d)!important}
.fh-perks .fh-perk:nth-child(2) .ico{color:var(--plum)!important}
.fh-perks .fh-perk:nth-child(3) .ico{color:var(--amber)!important}
.fh-perks .fh-perk:nth-child(4) .ico{color:var(--coral-d)!important}
.sv-list .ico{color:var(--coral-d)!important}
.sg .sv:nth-child(2) .sv-ttag{color:var(--plum)!important;background:var(--plum-t)!important}
.sg .sv:nth-child(2) .ico-box{background:var(--plum-t)!important;color:var(--plum)!important}
.sg .sv:nth-child(2) .btn-outline{color:var(--plum)!important;border-color:var(--plum)!important}
.sg .sv:nth-child(2) .btn-outline:hover{background:var(--plum-t)!important}
.proof-strip-inner > div:nth-child(1) .ps-num{color:var(--coral-d)!important}
.proof-strip-inner > div:nth-child(2) .ps-num{color:var(--plum)!important}
.proof-strip-inner > div:nth-child(3) .ps-num{color:var(--amber)!important}
.proof-strip-inner > div:nth-child(4) .ps-num{color:var(--coral-d)!important}
.about-quote{border-left:3px solid var(--coral)!important}
.ft-soc a:hover{background:var(--coral-d)!important;border-color:var(--coral-d)!important;color:#fff!important}
.free-hero{background:
  radial-gradient(ellipse 55% 70% at 14% 0%,rgba(232,96,76,.13),transparent 62%),
  radial-gradient(ellipse 42% 55% at 94% 100%,rgba(163,74,99,.10),transparent 62%),
  linear-gradient(180deg,#FEF6F1,#FDEFE7)!important}
.hero::before{background:
  radial-gradient(ellipse 44% 50% at 90% 4%,rgba(232,96,76,.16),transparent 62%),
  radial-gradient(ellipse 38% 44% at 2% 86%,rgba(163,74,99,.10),transparent 60%),
  radial-gradient(ellipse 32% 38% at 58% 102%,rgba(201,122,26,.11),transparent 60%)!important}
.about-video-wrap{background:#F8F0F2!important}
/* la tarjeta flotante que queda, centrada abajo de la foto */
.ph-badge-2{bottom:1.2rem;right:1.2rem;animation:floaty 6.5s ease-in-out infinite}
@media(max-width:1023px){.ph-badge-2{right:.8rem}}

/* =====================================================================
   FOTO VERTICAL + CAJA DE LA CLASE DIAGNOSTICO SIN HUECOS
   ===================================================================== */
.hero-photo{
  aspect-ratio:4/5!important;height:auto!important;
  width:100%;max-width:100%;margin-left:auto;margin-right:auto;
  border-radius:22px!important;overflow:visible!important}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:22px}
@media(min-width:1024px){
  .hero-photo{height:min(54vh,470px)!important;aspect-ratio:4/5!important;width:auto!important}
}
@media(min-width:1024px) and (max-height:760px){
  .hero-photo{height:min(48vh,380px)!important}
}
@media(max-width:1023px){
  .hero-photo{width:min(72%,330px)}
}
@media(max-width:520px){
  .hero-photo{width:min(78%,280px)}
}
.ph-badge-2{bottom:.9rem;right:-.9rem}
@media(max-width:1023px){.ph-badge-2{right:-.4rem}}

/* la tarjeta de bullets llena la altura, sin aire arriba y abajo */
@media(min-width:900px){
  .fh-grid{align-items:stretch!important}
  .fh-perks{display:flex!important;flex-direction:column!important;justify-content:center!important;
    margin:0!important;padding:1.6rem 1.5rem!important;gap:1rem!important}
  .fh-copy{display:flex;flex-direction:column;justify-content:center}
}

/* =====================================================================
   SOBRE MI reordenado + cierre y footer con los fondos invertidos
   ===================================================================== */
.about-head{margin-bottom:1.6rem;max-width:24ch}
.about-head .tag{margin-bottom:.85rem}
.about-head h2{margin:0}
.about-cta{display:flex;justify-content:center;margin-top:2rem}
#sobre-mi .about-grid{margin-top:0!important}
@media(min-width:1024px){
  .about-head{max-width:none;display:grid;grid-template-columns:42% 1fr;
    gap:clamp(2.5rem,4vw,4rem);align-items:end;margin-bottom:1.5rem}
  .about-head .tag{grid-column:1/-1;justify-self:start;margin-bottom:.2rem}
  .about-head h2{grid-column:1/-1;max-width:26ch}
  #sobre-mi .about-grid{align-items:start!important;grid-template-columns:42% 1fr!important;
    gap:clamp(2.5rem,4vw,4rem)!important}
  .about-video-wrap{margin:0!important;width:100%}
  .about-text-col{padding-top:0}
  .about-text-col > *:first-child{margin-top:0!important}
  .about-quote{margin-top:0!important}
}
@media(max-width:1023px){
  #sobre-mi .about-grid{display:flex;flex-direction:column;gap:1.6rem}
  .about-video-wrap{max-width:520px;margin-left:auto!important;margin-right:auto!important}
}

/* cierre y footer con los fondos intercambiados */
.fcta{background:linear-gradient(180deg,#F8F1E8,#F4ECE2)!important}
footer{background:
  radial-gradient(ellipse 60% 80% at 50% 0%,rgba(232,96,76,.13),transparent 62%),
  linear-gradient(180deg,#FEF5F0,#FBE9E0)!important}
.ft-brand{border-bottom:1px solid rgba(65,56,51,.09)}
.ft-bottom,.ft-legal{border-top:1px solid rgba(65,56,51,.09)}
.ft-dn{background:rgba(255,255,255,.85)!important}
.ft-soc a{background:rgba(255,255,255,.85)!important}

.fh-perks-t{font-weight:700;font-size:var(--fs-sm);color:var(--text)!important;margin:0 0 .35rem;
  letter-spacing:-.01em}
@media(min-width:900px){
  .fh-perks{justify-content:flex-start!important;gap:.85rem!important;padding:1.9rem 1.7rem!important}
  .fh-perks-t{margin-bottom:.5rem}
}

.fh-perks .fh-disclaimer{margin-top:auto!important;padding-top:.95rem;
  border-top:1px solid var(--border);text-align:left!important;
  max-width:none!important;margin-left:0!important;margin-right:0!important;
  font-size:var(--fs-xs)!important;color:var(--text-3)!important;line-height:1.5}
@media(min-width:900px){
  .fh-perks{justify-content:flex-start!important;padding:1.7rem 1.7rem 1.4rem!important}
}

/* La tarjeta se estiraba a la altura de la columna de texto y el pie se
   empujaba al fondo con margin-top:auto, asi que al acortar el copy quedaba
   un hueco muerto. Ahora la tarjeta mide lo que mide su contenido. */
@media(min-width:900px){
  .fh-grid{align-items:center!important}
  .fh-perks{justify-content:flex-start!important;align-self:center!important}
  .fh-perks .fh-disclaimer{margin-top:1.1rem!important}
}

/* foto real de Brittany, recorte limpio sobre blanco */
.hero-photo{background:#FFFFFF!important;border:1px solid rgba(65,56,51,.06)!important}
.hero-photo img{object-position:50% 30%}
.hero-photo.is-empty{background:linear-gradient(155deg,#F7F1EC,#EFE6DE)!important}

/* =====================================================================
   SOBRE MI en bloque unico: titular, video centrado a lo ancho,
   y debajo el texto explicativo
   ===================================================================== */
#sobre-mi .about-head,
#sobre-mi .about-grid,
#sobre-mi .about-head h2{display:block!important;grid-template-columns:none!important}
#sobre-mi .about-head{max-width:none!important;text-align:center;margin-bottom:1.8rem}
#sobre-mi .about-head .tag{justify-self:center;margin:0 auto .9rem}
#sobre-mi .about-head h2{max-width:22ch;margin:0 auto!important}

#sobre-mi .about-grid{margin:0!important}
#sobre-mi .about-video-wrap{
  width:100%!important;max-width:760px!important;
  margin:0 auto 2.2rem!important;float:none!important}

#sobre-mi .about-text-col{display:block!important;padding:0!important;max-width:none}
#sobre-mi .about-quote{
  max-width:44ch;margin:0 auto 1.4rem!important;text-align:center;
  border-left:0!important;padding-left:0!important;position:relative;padding-top:1.6rem}
#sobre-mi .about-quote::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:46px;height:3px;border-radius:3px;background:var(--coral)}
#sobre-mi .about-text-col > p{max-width:64ch;margin:0 auto 1.5rem!important;text-align:center}
#sobre-mi .about-chips{justify-content:center;margin:0 auto 2.2rem!important;max-width:44rem}
#sobre-mi .hl-list{display:grid;gap:1.4rem;margin:0 auto!important;max-width:none}
#sobre-mi .hl{flex-direction:column;align-items:flex-start;gap:.7rem}
#sobre-mi .about-cta{margin-top:2.4rem}
@media(min-width:860px){
  #sobre-mi .hl-list{grid-template-columns:repeat(3,1fr);gap:2rem}
}
@media(max-width:859px){
  #sobre-mi .hl{flex-direction:row;align-items:flex-start;gap:.85rem}
  #sobre-mi .about-video-wrap{margin-bottom:1.8rem!important}
}

/* =====================================================================
   FOTO MAS GRANDE + CAJA DE CLASE GRATIS MAS COMPACTA
   ===================================================================== */
@media(min-width:1024px){
  .hero-photo{height:min(64vh,600px)!important;aspect-ratio:4/5!important;width:auto!important;
    margin-left:auto!important;margin-right:auto!important;margin-bottom:.85rem!important}
}
@media(min-width:1024px) and (max-height:780px){
  .hero-photo{height:min(60vh,470px)!important}
}
@media(min-width:768px) and (max-width:1023px){
  .hero-photo{width:min(60%,400px)!important;height:auto!important;aspect-ratio:4/5!important}
}
@media(max-width:767px){
  .hero-photo{width:min(80%,320px)!important;height:auto!important;aspect-ratio:4/5!important}
}

/* caja de la clase gratuita, mas discreta */
.free-class-box{padding:.7rem .85rem!important;gap:.7rem!important;border-radius:14px!important}
.free-class-icon{width:32px!important;height:32px!important;border-radius:10px!important}
.free-class-icon .ico{width:16px!important;height:16px!important}
.free-class-text strong{font-size:.82rem!important;line-height:1.3;margin-bottom:.15rem!important}
.free-class-text span{font-size:.73rem!important;line-height:1.45!important}
@media(min-width:1024px){
  .free-class-text strong{font-size:.8rem!important}
  .free-class-text span{font-size:.71rem!important}
}
.ph-badge-2{bottom:1rem;right:-1.1rem;font-size:.76rem;padding:.55rem .95rem}
@media(max-width:1023px){.ph-badge-2{right:-.5rem}}

/* =====================================================================
   FOTO AL MAXIMO POSIBLE + CAJA MINIMA
   ===================================================================== */
@media(min-width:1024px){
  .hero-content{grid-template-columns:minmax(0,1fr) minmax(320px,1fr)!important;
    gap:clamp(2rem,3.2vw,3.4rem)!important}
  .hero-photo{
    width:100%!important;height:auto!important;aspect-ratio:4/5!important;
    max-height:min(72vh,680px)!important;margin:0 0 .7rem!important}
  .hero h1{max-width:14ch}
}
@media(min-width:1024px) and (max-height:780px){
  .hero-photo{max-height:min(66vh,520px)!important}
}
@media(min-width:768px) and (max-width:1023px){
  .hero-photo{width:min(66%,440px)!important;max-height:none!important}
}
@media(max-width:767px){
  .hero-photo{width:min(86%,340px)!important;max-height:none!important}
}

/* caja de clase gratuita al minimo */
.free-class-box{padding:.5rem .65rem!important;gap:.55rem!important;border-radius:12px!important;
  align-items:center!important}
.free-class-icon{width:26px!important;height:26px!important;border-radius:8px!important;margin-top:0!important}
.free-class-icon .ico{width:14px!important;height:14px!important}
.free-class-text strong{font-size:.74rem!important;line-height:1.25!important;margin-bottom:.08rem!important}
.free-class-text span{font-size:.66rem!important;line-height:1.4!important;display:block}

/* =====================================================================
   COMPOSICION: menos borde dentado, sin cortes raros
   ===================================================================== */
/* titulares: reparto equilibrado de lineas, nunca justificado */
h1,h2,h3,.mini-cta h3{
  text-wrap:balance;text-align:left;hyphens:none;
  word-spacing:-.012em}
.hero h1{max-width:16ch!important}
@media(min-width:1024px){.hero h1{max-width:15ch!important}}

/* parrafos: justificado real con particion silabica en espanol */
.hero-sub,.fh-sub,.sv p,.pc p,.hl-b p,.bc p,.tc-txt,
.section > p,.sv-head-block p,.about-text-col > p,.ft-brand p{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
  text-wrap:pretty}
/* en bloques centrados el justificado no aplica */
#sobre-mi .about-text-col > p,#sobre-mi .about-quote,
.fcta p,.mini-cta p,.sv-note,.sg-hint,.fh-perks .fh-disclaimer{
  text-align:center!important;hyphens:none!important}
#sobre-mi .about-text-col > p{text-align:center!important}
.fh-perks .fh-disclaimer{text-align:left!important}
/* listas y microcopy sin justificar, que quedan feas en 2 lineas */
.sv-list li,.fh-perk,.ps-lbl,.free-class-text span,.ti,.bc h4{
  text-align:left;hyphens:none}

/* =====================================================================
   TITULAR COMPACTO, VIDEO MENOR Y "SOBRE MI" SIN AIRE DE MAS
   ===================================================================== */
.hero h1{max-width:19ch!important}
@media(min-width:1024px){
  .hero h1{font-size:min(clamp(2.2rem,1.3rem + 2.1vw,2.95rem),7.6vh)!important;
    max-width:19ch!important;line-height:1.08!important}
  .hero-sub{font-size:min(clamp(.95rem,.9rem + .2vw,1.05rem),2.2vh)!important}
}

/* video mas chico */
#sobre-mi .about-video-wrap{max-width:470px!important;margin-bottom:1.6rem!important}
@media(max-width:767px){#sobre-mi .about-video-wrap{max-width:100%!important;margin-bottom:1.4rem!important}}

/* bloque de texto mas denso */
#sobre-mi{padding-top:var(--sec-y)!important;padding-bottom:var(--sec-y)!important}
#sobre-mi .about-head{margin-bottom:1.3rem!important}
#sobre-mi .about-quote{max-width:42ch!important;margin:0 auto 1rem!important;padding-top:1.2rem!important;
  font-size:clamp(1.05rem,.98rem + .4vw,1.28rem)!important;line-height:1.5!important}
#sobre-mi .about-quote::before{width:38px;height:3px}
#sobre-mi .about-text-col > p{max-width:66ch!important;margin:0 auto 1.9rem!important}
#sobre-mi .hl-list{max-width:1000px;gap:1.2rem 2.2rem!important}
#sobre-mi .hl{flex-direction:row!important;align-items:flex-start!important;gap:.75rem!important}
#sobre-mi .hl-icon{width:34px!important;height:34px!important;border-radius:10px!important}
#sobre-mi .hl-icon .ico{width:17px!important;height:17px!important}
#sobre-mi .hl-b h4{margin-bottom:.2rem!important;line-height:1.3}
#sobre-mi .hl-b p{line-height:1.5!important;text-align:left!important}
#sobre-mi .about-cta{margin-top:1.8rem!important}

/* footer sin bloque de marca y con texto mas legible */
.ft-grid{margin-top:0!important}
footer{padding-top:clamp(2.2rem,3.4vw,3.2rem)!important}
.ft-col h5{color:#8E3B52!important;font-size:.68rem!important;letter-spacing:.13em!important;
  font-weight:700!important;margin-bottom:.85rem!important}
.ft-col ul li a{color:var(--text)!important;font-size:.86rem!important;font-weight:500!important}
.ft-col ul li a:hover{color:var(--coral-d)!important}
.ft-copy{color:var(--text-2)!important;font-size:.78rem!important}
.ft-legal a{color:var(--text-2)!important;font-size:.78rem!important}
.ft-legal a:hover{color:var(--coral-d)!important}
.ft-dn-lbl{color:var(--text-3)!important}
.ft-soc a{color:var(--text-2)!important}

/* =====================================================================
   FOTO: proporcion 4:5 exacta siempre, sin recortes ni deformacion
   ===================================================================== */
.hero-photo{
  aspect-ratio:4/5!important;height:auto!important;max-height:none!important;
  margin-left:auto!important;margin-right:auto!important;overflow:visible!important}
.hero-photo img{object-fit:cover;object-position:50% 50%}
@media(min-width:1024px){
  /* el ancho se calcula desde la altura disponible, asi el ratio nunca se rompe */
  .hero-photo{
    width:min(100%, calc((100vh - var(--nav-h) - 168px) * 0.8))!important;
    width:min(100%, calc((100svh - var(--nav-h) - 168px) * 0.8))!important;
    margin-bottom:.7rem!important}
}
@media(min-width:768px) and (max-width:1023px){
  .hero-photo{width:min(62%,420px)!important}
}
@media(max-width:767px){
  .hero-photo{width:min(84%,330px)!important}
}

/* los CTA del hero no pueden invadir la columna de la foto */
.hero-ctas{flex-wrap:wrap!important;gap:.6rem!important;max-width:100%}
.hero-ctas .btn{max-width:100%}
@media(min-width:1024px){
  .hero .btn-lg{font-size:.9rem!important;padding:.8rem 1.35rem!important;min-height:50px!important}
  .hero-ctas .btn-outline{font-size:.86rem!important;padding:.75rem 1.2rem!important;min-height:50px!important}
  .hero-col-main{min-width:0}
  .hero-content{gap:clamp(2.2rem,3.4vw,3.6rem)!important}
}
@media(min-width:1024px) and (max-width:1180px){
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
}

@media(min-width:1024px) and (max-width:1180px){
  .hero-ctas{flex-direction:row!important;align-items:center!important}
  .hero-ctas .btn{width:auto!important}
}

/* =====================================================================
   La foto y la caja de abajo comparten exactamente el mismo ancho y ejes
   ===================================================================== */
.hero-col-aside{
  --photo-w:100%;
  display:flex!important;flex-direction:column!important;align-items:center!important}
@media(min-width:1024px){
  .hero-col-aside{--photo-w:min(100%, calc((100vh - var(--nav-h) - 168px) * 0.8));
                  --photo-w:min(100%, calc((100svh - var(--nav-h) - 168px) * 0.8))}
}
@media(min-width:768px) and (max-width:1023px){.hero-col-aside{--photo-w:min(62%,420px)}}
@media(max-width:767px){.hero-col-aside{--photo-w:min(84%,330px)}}
.hero-photo{width:var(--photo-w)!important;margin-left:0!important;margin-right:0!important}
.free-class-box{width:var(--photo-w)!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
/* la insignia se queda dentro del ancho de la tarjeta */
.ph-badge-2{right:.9rem!important;bottom:.9rem!important}

/* =====================================================================
   SOBRE MI: video y cita a la izquierda, explicacion a la derecha
   ===================================================================== */
#sobre-mi .about-head{text-align:left!important;max-width:none!important;margin-bottom:1.6rem!important}
#sobre-mi .about-head .tag{margin:0 0 .8rem!important}
#sobre-mi .about-head h2{margin:0!important;max-width:26ch!important;text-align:left!important}

#sobre-mi .about-grid{display:grid!important;grid-template-columns:1fr;gap:1.8rem;align-items:start!important}
#sobre-mi .about-media{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
#sobre-mi .about-video-wrap{
  width:100%!important;max-width:none!important;margin:0!important;aspect-ratio:4/3!important}
#sobre-mi .about-quote{
  max-width:none!important;margin:0!important;text-align:left!important;
  padding:0 0 0 1.1rem!important;border-left:3px solid var(--coral)!important;
  font-size:clamp(1rem,.95rem + .35vw,1.2rem)!important;line-height:1.5!important}
#sobre-mi .about-quote::before{display:none!important}

#sobre-mi .about-text-col{display:flex!important;flex-direction:column;min-width:0}
#sobre-mi .about-text-col > p{
  max-width:none!important;margin:0 0 1.6rem!important;text-align:justify!important;
  hyphens:auto;-webkit-hyphens:auto}
#sobre-mi .hl-list{display:flex!important;flex-direction:column!important;gap:1.15rem!important;
  max-width:none!important;margin:0 0 1.7rem!important}
#sobre-mi .hl{flex-direction:row!important;align-items:flex-start!important;gap:.8rem!important}
#sobre-mi .hl-icon{width:36px!important;height:36px!important}
#sobre-mi .hl-icon .ico{width:18px!important;height:18px!important}
#sobre-mi .hl-b h4{margin-bottom:.18rem!important}
#sobre-mi .hl-b p{text-align:left!important;hyphens:none!important;line-height:1.5!important}
#sobre-mi .about-cta{margin:auto 0 0!important;display:flex;justify-content:flex-start!important}

@media(min-width:900px){
  #sobre-mi .about-grid{grid-template-columns:minmax(0,44fr) minmax(0,56fr)!important;
    gap:clamp(2rem,3.4vw,3.4rem)!important}
}
@media(max-width:899px){
  #sobre-mi .about-video-wrap{max-width:520px!important;margin:0 auto!important}
  #sobre-mi .about-cta{justify-content:center!important;margin-top:.4rem!important}
}

/* =====================================================================
   SIN PARTIR PALABRAS: la palabra entera pasa a la linea siguiente
   ===================================================================== */
*,*::before,*::after{hyphens:none!important;-webkit-hyphens:none!important;-ms-hyphens:none!important}
html,body{hyphenate-limit-chars:auto!important}

/* con medida comoda el justificado aguanta sin partir palabras */
#sobre-mi .about-text-col > p,.sv-head-block p,.section > p{
  text-align:justify!important;text-justify:inter-word!important;text-wrap:pretty}
/* columna estrecha: bandera, para que no se abran huecos entre palabras */
.fh-sub{text-align:left!important;text-justify:auto!important;word-spacing:normal!important;
  text-wrap:pretty!important}
/* en columnas estrechas, bandera: evita los huecos entre palabras */
.hero-sub,.pc p,.sv p,.hl-b p,.bc p,.tc-txt,.ft-brand p,.sv-list li,.fh-perk,.ps-lbl,
.free-class-text span,.about-quote{
  text-align:left!important;text-wrap:pretty}
/* nada de cortes en palabras largas */
p,li,h1,h2,h3,h4,span,a{overflow-wrap:normal;word-break:normal}

/* =====================================================================
   HERO: solo la foto en la columna derecha, ocupando el espacio
   ===================================================================== */
.hero-col-aside{justify-content:center!important}
@media(min-width:1024px){
  .hero-content{grid-template-columns:minmax(0,48fr) minmax(0,52fr)!important}
  .hero-col-aside{--photo-w:min(100%, calc((100vh - var(--nav-h) - 96px) * 0.8));
                  --photo-w:min(100%, calc((100svh - var(--nav-h) - 96px) * 0.8))}
  .hero-photo{margin-bottom:0!important}
}
@media(min-width:768px) and (max-width:1023px){.hero-col-aside{--photo-w:min(66%,460px)}}
@media(max-width:767px){.hero-col-aside{--photo-w:min(86%,340px)}}
.hero-photo{margin-bottom:0!important}

/* franja de cifras: todo centrado */
.proof-strip-inner{text-align:center}
.ps-lbl{text-align:center!important;margin-left:auto;margin-right:auto}
.ps-num{text-align:center!important}
.proof-strip-inner > div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}

/* el texto del hero al mismo cuerpo que el resto de secciones */
.hero-sub{font-size:clamp(1.02rem,.95rem + .34vw,1.2rem)!important;line-height:1.66!important;
  max-width:54ch!important;color:var(--text-2)!important}
@media(min-width:1024px){
  .hero-sub{font-size:min(clamp(1.02rem,.95rem + .34vw,1.2rem),2.6vh)!important;margin-bottom:1.4rem!important}
}

/* =====================================================================
   VIDEO COMPLETO (sin recortar los subtitulos) Y CIERRE INTERMEDIO
   ===================================================================== */
#sobre-mi .about-video-wrap{aspect-ratio:5/3!important}
#about-video{object-fit:contain!important;background:#F5F0F2}

/* banda intermedia centrada y con copy desarrollado */
.mini-cta{text-align:center}
.mini-cta h3{text-align:center!important;max-width:20ch;margin:0 auto .7rem!important;text-wrap:balance}
.mini-cta p{text-align:center!important;max-width:56ch;margin:0 auto 1.4rem!important;
  font-size:var(--fs-body)!important;line-height:1.65!important;color:var(--text-2)!important}
.mini-cta .btn{margin-inline:auto}

/* el video necesita mas ancho al ser 5:3 */
@media(min-width:900px){
  #sobre-mi .about-grid{grid-template-columns:minmax(0,50fr) minmax(0,50fr)!important;
    gap:clamp(1.8rem,3vw,3rem)!important}
}

#about-video{object-fit:cover!important;background:#1a1a1a}
#sobre-mi .about-video-wrap{aspect-ratio:900/540!important;background:#1a1a1a!important}

/* bloques centrados: el titular tambien va centrado */
.fcta-in{text-align:center}
.fcta h2{text-align:center!important;max-width:26ch;margin:0 auto .7rem!important;text-wrap:balance}
.fcta p{text-align:center!important;max-width:56ch;margin:0 auto 1.5rem!important}
.fcta .fcta-btn-wrap{justify-content:center}

/* =====================================================================
   BOTONES DE RESERVA: planos, sin brillo ni halo de color
   ===================================================================== */
.btn,.btn-coral,.btn-white,.btn-outline,.btn-ghost,
.nav .btn-coral,.fcta .btn-coral,.mini-cta .btn-white,
.hero .btn-coral,.sv .btn,.free-hero .btn-coral,.sticky-bar .btn,
.about-cta .btn,.nav-drawer-cta .btn{
  box-shadow:none!important;filter:none!important;text-shadow:none!important}
.btn:hover,.btn-coral:hover,.btn-white:hover,.mini-cta .btn-white:hover,
.nav .btn-coral:hover,.fcta .btn-coral:hover{
  box-shadow:none!important;filter:none!important}
/* el feedback pasa a ser solo cambio de color, sin brillo */
.btn-coral{background:var(--coral-d)!important;color:#fff!important;transition:background .18s ease,transform .18s ease}
.btn-coral:hover{background:#AE3626!important;transform:translateY(-1px)}
.btn-coral:active{background:#9C3021!important;transform:translateY(0)}
.mini-cta .btn-white{background:var(--coral-d)!important;color:#fff!important}
.mini-cta .btn-white:hover{background:#AE3626!important}
/* fuera el destello que se dibujaba al hacer clic */
.btn-coral > span[style*="animation:ripple"]{display:none!important}

/* botones sin flecha */
.btn .ico{display:none!important}
.btn{gap:0!important}

.hero-sub strong{font-weight:700;color:var(--text)}

/* =====================================================================
   LEGIBILIDAD: textos secundarios mas oscuros, mejor contraste
   ===================================================================== */
:root{
  --text:#332C28;    /* antes #413833 */
  --ink-h:#3D352F;   /* antes #4E443E */
  --text-2:#4E463F;  /* antes #6F645D, de 5.7:1 a 9.2:1 */
  --text-3:#665D56;  /* antes #8D8179, de 3.8:1 a 6.4:1 */
  --text-4:#7E7469;  /* antes #A2968D, de 2.9:1 a 4.6:1 */
}
p,li,.hero-sub,.fh-sub,.tc-txt,.sv p,.pc p,.hl-b p,.bc h4,.ps-lbl,.sv-list li,.fh-perk,
.about-quote,.fcta p,.sv-note,.free-class-text span,.ft-col ul li a{color:var(--text-2)!important}
.ps-lbl,.sv-price small,.sv-price .cur,.tc-role,.sg-hint,.fh-perks .fh-disclaimer,
.ft-copy,.ft-legal a,.ft-dn-lbl,.plans-note{color:var(--text-3)!important}
h1,h2{color:var(--ink-h)!important}
h3,h4,.hl-b h4,.pc h4,.tc-name,.free-class-text strong,.fh-perks-t{color:var(--text)!important}
.hero-sub strong{color:var(--text)!important}
.nav-links-desktop a:not(.btn){color:var(--text-2)!important}
.nav-drawer ul li a{color:var(--text-2)!important}
.tag,.sv-ttag,.btag{color:#8E3B52!important}
.ft-col h5{color:#8E3B52!important}

.ft-dn .ft-dn-lbl{color:#5C544D!important}

/* =====================================================================
   NAV: desplegable de Servicios
   ===================================================================== */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop-t{display:inline-flex!important;align-items:center;gap:.3rem}
.nav-drop-t .chev{width:14px;height:14px;flex:none;transition:transform .2s ease;opacity:.65}
.nav-drop:hover .chev,.nav-drop:focus-within .chev{transform:rotate(180deg)}
.nav-drop-menu{
  position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  min-width:262px;background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 2px 8px rgba(51,44,40,.06),0 20px 40px -22px rgba(51,44,40,.32);
  padding:.4rem;display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:120}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,10px)}
/* puente invisible para que el raton no pierda el hover */
.nav-drop::after{content:'';position:absolute;top:100%;left:0;right:0;height:14px}
.nav-drop-menu a{
  display:block;padding:.6rem .75rem;border-radius:10px;text-decoration:none;
  transition:background .15s ease}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:var(--coral-t)}
.nav-drop-menu strong{display:block;font-size:.9rem;font-weight:700;color:var(--text);line-height:1.3}
.nav-drop-menu span{display:block;font-size:.76rem;color:var(--text-3);margin-top:.1rem;line-height:1.35}
/* tras hacer clic en una opcion, el enlace se queda con el foco y
   :focus-within mantendria el desplegable abierto. Este estado lo cierra
   hasta que el raton sale del menu o se vuelve a navegar con el teclado. */
.nav-drop.nd-off .nav-drop-menu{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translate(-50%,6px)!important}
.nav-drop.nd-off .chev{transform:none!important}
@media(max-width:860px){.nav-drop{display:none}}

/* drawer movil: subitems */
.nav-drawer ul li.sub a{
  padding-left:1.1rem;font-size:.94rem;color:var(--text-3)!important;
  border-bottom:1px solid var(--border);position:relative}
.nav-drawer ul li.sub a::before{
  content:'';position:absolute;left:0;top:50%;width:10px;height:1px;background:var(--border-s)}

/* subtitulo del hero justificado: borde derecho parejo con las negritas */
.hero-sub{text-align:justify!important;text-justify:inter-word!important;text-wrap:wrap!important;
  max-width:46ch!important}
.hero-sub strong{white-space:normal}

/* subtitulo del hero en bandera, con reparto natural de lineas */
.hero-sub{text-align:left!important;text-wrap:pretty!important;max-width:48ch!important;
  word-spacing:normal!important;letter-spacing:0}

/* =====================================================================
   INTERACCION AL SCROLL
   ===================================================================== */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:400;pointer-events:none;
  background:linear-gradient(90deg,var(--coral-d),var(--amber));
  border-radius:0 3px 3px 0;transition:width .08s linear;will-change:width}

/* el subrayado de la palabra clave se dibuja al entrar en pantalla */
h1 em::after,h2 em::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .85s cubic-bezier(.22,.85,.24,1) .1s}
.uw-on em::after{transform:scaleX(1)}
h1.uw-on em::after,h2.uw-on em::after{transform:scaleX(1)}

/* entrada de bloques: direccion segun su lado */
.sc{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.85,.24,1),transform .7s cubic-bezier(.22,.85,.24,1)}
.sc.sc-l{transform:translate3d(-28px,10px,0)}
.sc.sc-r{transform:translate3d(28px,10px,0)}
.sc.sc-zoom{transform:scale(.965);opacity:0}
.sc.on{opacity:1;transform:none}
.sc-d1{transition-delay:.07s}.sc-d2{transition-delay:.14s}.sc-d3{transition-delay:.21s}

/* la foto y el video acompanan el scroll con un desplazamiento muy leve */
.hero-photo,#sobre-mi .about-video-wrap{will-change:transform}

/* las tarjetas de precio se elevan al entrar */
.sg .sv{transition:transform .7s cubic-bezier(.22,.85,.24,1),opacity .7s,box-shadow .25s}

/* la franja de cifras dibuja sus separadores */
.proof-strip-inner > div::after{transform-origin:center top;transform:scaleY(0);
  transition:transform .8s cubic-bezier(.22,.85,.24,1)}
.proof-strip.on-strip .proof-strip-inner > div::after{transform:scaleY(1)}

@media(prefers-reduced-motion:reduce){
  .scroll-progress{display:none}
  .sc,.sc.sc-l,.sc.sc-r,.sc.sc-zoom{opacity:1!important;transform:none!important;transition:none!important}
  h1 em::after,h2 em::after{transform:scaleX(1)!important;transition:none!important}
  .proof-strip-inner > div::after{transform:scaleY(1)!important}
}

.scroll-progress{display:none!important}

/* =====================================================================
   CREDITO DE DIGITAL NORTH: integrado, sin caja tipo anuncio
   ===================================================================== */
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.ft-dn{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;gap:.55rem!important;opacity:.9;
  transition:opacity .2s ease}
.ft-dn:hover{background:transparent!important;box-shadow:none!important;opacity:1}
.ft-dn-lbl{font-size:.6rem!important;letter-spacing:.17em!important;color:var(--text-4)!important;
  font-weight:600!important}
.dn-logo{height:17px!important;width:auto}
.ft-copy{margin:0}

@media(max-width:700px){
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .ft-bottom .ft-copy{order:1;width:100%}
  .ft-bottom .ft-soc{order:2}
  .ft-bottom .ft-dn{order:3;width:100%;padding-top:.9rem!important;
    border-top:1px solid var(--border)!important;justify-content:flex-start}
}
@media(min-width:701px){
  .ft-bottom .ft-copy{order:1}
  .ft-bottom .ft-dn{order:2;margin-inline:auto}
  .ft-bottom .ft-soc{order:3}
}

.dn-logo{height:21px!important}
@media(max-width:700px){.dn-logo{height:23px!important}}
.ft-dn{align-items:center!important}
.ft-dn-lbl{line-height:1;transform:translateY(1px)}

/* En movil chocaban dos alineaciones: la regla global manda los encabezados
   a la izquierda y el contenedor centraba el boton, asi que el bloque se veia
   descuadrado. Aqui se centra todo, y el parrafo se limita en ancho para que
   las lineas queden parejas en lugar de rotas a distintas alturas. */
@media(max-width:899px){
  .free-hero{text-align:center!important}
  .fh-copy{text-align:center!important;align-items:stretch}
  /* texto alineado a la izquierda, pero con las lineas repartidas para que
     el borde derecho quede parejo. Es el efecto de un texto justificado sin
     el defecto del justificado: aqui los espacios entre palabras no se
     estiran, solo se decide mejor donde cortar cada linea. */
  .fh-copy h2{text-align:left!important;text-wrap:balance;margin-inline:0;max-width:none}
  .fh-sub{text-align:left!important;text-wrap:balance!important;
    max-width:none!important;margin-left:0!important;margin-right:0!important}
  .fh-copy .btn{margin-left:auto!important;margin-right:auto!important}
  .fh-perks{margin-left:auto!important;margin-right:auto!important}
}

/* Las dos tarjetas de servicio comparten fila. Si una tiene menos texto, su
   boton subia y la tarjeta parecia mas pequena. Con la lista creciendo y el
   boton anclado abajo, las dos terminan a la misma altura. */
.sg{align-items:stretch}
.sg .sv{display:flex;flex-direction:column;height:100%}
.sg .sv .sv-list{flex:1 1 auto}
.sg .sv > .btn{margin-top:auto}

/* En movil los dos botones de las bandas de cierre no cabian en una fila y
   se salian por los lados. Se apilan y ocupan el ancho disponible. */
@media(max-width:600px){
  .fcta-btn-wrap{flex-direction:column;align-items:stretch;gap:.6rem;width:100%}
  .fcta-btn-wrap .btn{width:100%;white-space:normal}
}

/* Ajustes de densidad pedidos en revision.
   1. El parrafo de entrada de cada seccion cortaba a 62 caracteres, que es lo
      recomendado para textos largos. En dos o tres lineas se queda corto y
      deja un hueco muerto a la derecha, asi que usa el ancho del contenedor,
      que ya esta limitado a 1180 px. */
.sec-head p.measure,p.measure{max-width:none!important}
/*  2. Menos aire entre secciones. */
:root{--sec-y:clamp(2rem,2.8vw,3rem);--sec-y-sm:clamp(1.7rem,2.2vw,2.3rem)}
/*  3. Las tarjetas de nivel deben caber en una pantalla con sus botones. */
.levels{gap:1rem;align-items:stretch}
.level{padding:1.05rem 1rem;display:flex;flex-direction:column}
/* la descripcion ocupa siempre lo mismo, asi la linea separadora y las listas
   de las tres tarjetas arrancan a la misma altura. Solo cuando van en varias
   columnas: en movil, apiladas, reservar alto sobraria. */
.level > p{margin-bottom:.5rem}
@media(min-width:900px){ .level > p{min-height:calc(3 * 1.55em)} }
.level .sv-list{gap:.4rem;padding-top:.7rem;margin-bottom:.85rem}
/* el boton se ancla abajo solo cuando las listas miden lo mismo. Si una
   tarjeta se queda corta, mejor un boton un poco mas arriba que un hueco
   vacio de cuarenta pixeles */
@media(min-width:1200px){ .level .sv-list{flex:1 1 auto} }
.level h3{margin-bottom:.3rem}
.level > .btn{margin-top:auto}

/* El body reservaba 68 px al fondo para la barra fija, y esa franja mostraba
   el fondo de la pagina en lugar del color del pie: se veia una banda blanca
   debajo del footer. La reserva pasa al propio pie, que si lleva color, y se
   quita cuando la barra no esta. */
@media(max-width:860px){
  body{padding-bottom:0!important}
  footer{padding-bottom:calc(1.5rem + 68px + env(safe-area-inset-bottom,0px))!important}
  body.sin-barra footer{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))!important}
}

/* el "desde" del precio: pequeño y en linea, sin robarle peso a la cifra */
.sv-price .desde,.plan-price .desde{font-size:.62em;font-weight:600;color:var(--text-3);
  letter-spacing:.02em;margin-right:.12em}

/* Las tarjetas de nivel de la pagina de inscripcion tienen que caber en una
   pantalla junto con su boton. Se aprieta el bloque de horario, que era el que
   mas espacio ocupaba, y los margenes internos. */
@media(min-width:900px){
  .nv{padding:1.15rem 1.15rem}
  .nv-top{margin-bottom:.6rem;min-height:0}
  .nv-desc{margin:0 0 .75rem!important;padding-bottom:.75rem}
  .nv-hora{padding:.6rem .75rem;margin-bottom:.75rem}
  .nv-hora strong{font-size:1.2rem}
  .nv-otros{margin-top:.25rem}
  .nv-list{margin:0 0 .9rem!important;gap:.4rem!important}
  .nv-price{margin-bottom:.55rem}
  .nv-price strong{font-size:1.6rem}
  /* la cabecera de la seccion tambien pesaba */
  #planes .sec-head{margin-bottom:.9rem}
  #planes .sec-head h2{margin-bottom:.3rem}
  .nv-list li{line-height:1.45}
  .nv-hora .nv-dias{margin-bottom:.15rem}
  #planes{padding-top:var(--sec-y-sm)!important;padding-bottom:var(--sec-y-sm)!important}
}

/* Vista previa de la agenda. El calendario incrustado es funcional, asi que
   sin esto parecia que se podia reservar sin haber pagado. La tapa transparente
   se come los clics: se ve la disponibilidad real, pero no se reserva aqui. */
.cal-prev{margin-top:.5rem}
.cal-prev-marco{position:relative;background:#fff;border:1px solid var(--border);
  border-radius:20px;overflow:hidden;box-shadow:var(--sh-1)}
.cal-prev-marco iframe{display:block;border:0;width:100%;pointer-events:none}
.cal-prev-tapa{position:absolute;inset:0;z-index:2;cursor:default;background:transparent}
.cal-prev-eti{display:block;margin-top:.7rem;text-align:center;
  font-size:var(--fs-xs);color:var(--text-3)}
@media(max-width:600px){ .cal-prev-marco iframe{height:520px} }

/* Los titulares de las paginas sin foto lateral estaban limitados a 21
   caracteres por linea, asi que caian en tres lineas estrechas con mucho
   aire a los lados. Con mas ancho respiran mejor y ocupan menos alto. */
@media(min-width:900px){
  .hero.ph-solo h1{max-width:32ch!important}
  .hero.ph-solo .hero-sub{max-width:76ch!important}
}

/* Ventana de captura de correo para los PDF gratuitos */
.mr{position:fixed;inset:0;z-index:100050;display:flex;align-items:center;justify-content:center;padding:20px}
.mr[hidden]{display:none!important}
.mr-fondo{position:absolute;inset:0;background:rgba(44,26,14,.5);backdrop-filter:blur(3px)}
.mr-caja{position:relative;z-index:1;width:100%;max-width:420px;background:#fff;border-radius:22px;
  padding:1.7rem 1.6rem 1.4rem;box-shadow:0 30px 70px -20px rgba(44,26,14,.45);
  max-height:90vh;overflow:auto}
.mr-x{position:absolute;top:.6rem;right:.75rem;border:0;background:none;font-size:1.6rem;line-height:1;
  color:var(--text-3);cursor:pointer;padding:.2rem .4rem;border-radius:8px}
.mr-x:hover{background:var(--cream-d,#F2EAE0);color:var(--text)}
.mr-eti{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--coral-d);margin:0 0 .35rem}
.mr-caja h3{font-size:1.35rem;margin:0 0 .3rem;line-height:1.2}
.mr-sub{font-size:var(--fs-sm);color:var(--text-2);margin:0 0 1.1rem;line-height:1.5}
.mr-caja label{display:block;font-size:.74rem;font-weight:700;color:var(--text-2);margin:0 0 .3rem}
.mr-caja input{width:100%;padding:.7rem .85rem;border:1.5px solid var(--border-s);border-radius:12px;
  font:inherit;font-size:.92rem;margin-bottom:.85rem;background:#fff;color:var(--text)}
.mr-caja input:focus{outline:0;border-color:var(--coral);box-shadow:0 0 0 3px rgba(232,96,76,.14)}
.mr-error{background:rgba(201,69,53,.09);color:var(--coral-d);font-size:.8rem;line-height:1.45;
  border-radius:10px;padding:.6rem .75rem;margin:0 0 .8rem}
.mr-error[hidden]{display:none!important}
.mr-enviar{width:100%}
.mr-legal{font-size:.68rem;color:var(--text-3);line-height:1.5;margin:.8rem 0 0;text-align:center}
/* Casillas de consentimiento. Van desmarcadas y la de marketing es aparte de
   la obligatoria: aceptar la politica no es lo mismo que querer recibir correos.

   Los tres selectores llevan el elemento delante a proposito. Unas lineas mas
   arriba hay un ".mr-caja label{display:block;font-weight:700}" que es mas
   concreto que un ".mr-check" a secas y por tanto le ganaba: la casilla perdia
   el display:flex, el texto legal salia en negrita como si fuera la etiqueta de
   un campo, y las lineas siguientes se metian debajo de la casilla en vez de
   quedar alineadas. Lo mismo pasaba con el ".mr-caja input" de los campos de
   texto, que le colaba a la casilla el relleno, el borde y el margen inferior
   de un cuadro de escribir. */
label.mr-check{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 0;
  font-size:.72rem;font-weight:400;color:var(--text-2);line-height:1.5;text-align:left;cursor:pointer}
label.mr-check input[type=checkbox]{margin:.1rem 0 0;flex:0 0 auto;width:16px;height:16px;
  padding:0;border-radius:4px;accent-color:var(--coral,#E8604C)}
/* El foco de los campos de texto es un halo ancho, que en una casilla de 16px
   se ve como una mancha. Aqui se marca con un contorno, que ademas se ve en
   modo de alto contraste. */
label.mr-check input[type=checkbox]:focus{box-shadow:none}
label.mr-check input[type=checkbox]:focus-visible{outline:2px solid var(--coral,#E8604C);
  outline-offset:2px;box-shadow:none}
label.mr-check a{color:inherit;text-decoration:underline}
.mr-ok{text-align:center;padding:.6rem 0 .2rem}
.mr-ok[hidden]{display:none!important}
.mr-ok-ico{width:52px;height:52px;margin:0 auto .8rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(58,140,110,.12);color:#3A8C6E}
.mr-ok-ico svg{width:26px;height:26px}
.mr-ok h3{margin-bottom:.4rem}
.mr-ok p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.55;margin:0 0 1.1rem}
#mr-form[hidden]{display:none!important}

/* Heroes sin botones: el subtitulo era el ultimo elemento y su margen inferior
   sumado al relleno de la seccion siguiente abria un hueco grande en movil. */
.hero.ph-solo:not(:has(.hero-ctas)) .hero-sub{margin-bottom:0!important}
@media (max-width:767px){
  .hero.ph-solo:not(:has(.hero-ctas)) + .section{padding-top:1.4rem!important}
}

/* Linea que dice al alumno exactamente que acaba de comprar, en la pagina de
   pago confirmado. Va destacada porque es el dato que viene a buscar. */
.pc-plan{display:block;margin:0 0 1.6rem;padding:.85rem 1.15rem;border-radius:12px;
  background:var(--coral-l);border-left:3px solid var(--coral-d);
  font-weight:600;color:var(--text);line-height:1.5;max-width:62ch}
.pc-plan:empty{display:none}