/* ==========================================================================
   NEUROPRESENCIA — Landing Page (One Page Site)
   Ornella Sánchez · Entrenamiento de bienestar personal
   Vanilla HTML/CSS/JS — sin frameworks, ligero.
   ========================================================================== */

:root{
  /* Paleta cálida de vela + teal profundo (fiel a la marca) */
  --candle:      #E7A85B;   /* dorado vela */
  --candle-soft: #F4CE96;   /* halo cálido */
  --candle-glow: #FBE9CC;   /* luz suave */
  --teal-deep:   #1E2E2A;   /* verde-teal muy oscuro */
  --teal:        #2C433D;   /* teal medio */
  --teal-2:      #37514A;
  --slate:       #5F7178;   /* azul-gris apagado */
  --slate-soft:  #93A4AC;
  --cream:       #F7F1E7;   /* crema */
  --cream-dim:   #E9DECB;
  --ink:         #24211C;   /* texto oscuro */
  --ink-soft:    #4A463E;

  --navy:        #16284A;   /* azul marino de la marca (logo) */
  --navy-2:      #1F3A63;

  --wa:          #25D366;   /* WhatsApp */

  --maxw: 1180px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 4px 18px rgba(20,25,23,.10);
  --shadow-md: 0 14px 40px rgba(20,25,23,.18);
  --shadow-lg: 0 26px 70px rgba(20,25,23,.28);

  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:  'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{ font-family: var(--font-serif); font-weight:600; line-height:1.15; letter-spacing:-.01em; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* -------- Utilities -------- */
.eyebrow{
  font-family:var(--font-sans);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:600;
  color:var(--candle);
}
.section{ padding: clamp(64px, 9vw, 120px) 0; position:relative; }
.section-head{ max-width:720px; margin:0 auto clamp(40px,6vw,64px); text-align:center; }
.section-head h2{ font-size: clamp(2rem, 4.5vw, 3.2rem); margin:.5rem 0 1rem; }
.section-head p{ color:var(--ink-soft); font-size:1.06rem; }

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-sans); font-weight:600; font-size:1rem;
  padding:.9rem 1.7rem; border-radius:999px; cursor:pointer;
  border:1.5px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  line-height:1;
}
.btn svg{ width:20px; height:20px; }
.btn-primary{ background:var(--candle); color:#2a1c07; box-shadow:0 4px 14px rgba(36,33,28,.15); }
.btn-primary:hover{ background:var(--candle-soft); box-shadow:0 6px 18px rgba(36,33,28,.2); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--cream); border-color:rgba(247,241,231,.5); }
.btn-ghost:hover{ background:rgba(247,241,231,.12); border-color:var(--cream); transform:translateY(-2px); }
.btn-dark{ background:var(--teal); color:var(--cream); }
.btn-dark:hover{ background:var(--teal-2); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-wa{ background:var(--wa); color:#04310f; box-shadow:0 10px 26px rgba(37,211,102,.35); }
.btn-wa:hover{ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 14px 34px rgba(37,211,102,.45); }

/* Placeholder de imagen (para reemplazar con fotos reales) */
.img-slot{
  position:relative; width:100%; height:100%;
  background:
    linear-gradient(135deg, rgba(231,168,91,.22), rgba(44,67,61,.35)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
  background-color: var(--teal);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:rgba(247,241,231,.75); font-size:.8rem; letter-spacing:.05em;
  border-radius:inherit; overflow:hidden; padding:14px;
}
.img-slot span{ max-width:80%; font-family:var(--font-sans); font-weight:500; }
.img-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:3; }
.img-slot::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%, rgba(251,233,204,.28), transparent 60%);
}
.img-slot span{ position:relative; z-index:1; }

/* =====================================================================
   NAVBAR
   ===================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
  padding:18px 0;
}
.nav.scrolled{ background:rgba(30,46,42,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 6px 24px rgba(0,0,0,.22); padding:10px 0; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }

.brand{ display:flex; align-items:center; gap:.7rem; color:var(--cream); }
.brand .mark{ width:38px; height:38px; flex:0 0 auto; }
.brand-logo{ height:46px; width:auto; flex:0 0 auto; filter:brightness(0) invert(1); }
.nav.scrolled .brand-logo{ height:40px; transition:height .35s ease; }
.brand .mark circle, .brand .mark path{ transition:stroke .3s; }
.brand-txt{ line-height:1.05; }
.brand-txt strong{ font-family:var(--font-serif); font-size:1.05rem; font-weight:600; letter-spacing:.04em; display:block; }
.brand-txt small{ font-family:var(--font-sans); font-size:.56rem; letter-spacing:.24em; text-transform:uppercase; color:var(--slate-soft); }

.nav-links{ display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a{
  color:var(--cream); font-weight:500; font-size:.95rem; position:relative; padding:.2rem 0;
  opacity:.85; transition:opacity .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px;
  background:var(--candle); transition:width .25s ease;
}
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ margin-left:.5rem; }
.nav-cta a{ opacity:1; font-weight:600; }
.nav-cta a::after{ display:none; }   /* sin la rayita del menú bajo el botón */

.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px; z-index:60;
}
.nav-toggle span{ display:block; width:26px; height:2px; background:var(--cream); margin:5px 0; transition:.3s; border-radius:2px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  color:var(--cream); overflow:hidden;
  background:
    radial-gradient(120% 90% at 62% 30%, rgba(231,168,91,.34) 0%, rgba(231,168,91,0) 45%),
    linear-gradient(160deg, #24322e 0%, #1a2825 40%, #26312f 100%);
}
.hero::after{ /* viñeta */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 20%, transparent 55%, rgba(12,18,16,.55) 100%);
}
.hero-glow{
  position:absolute; width:520px; height:520px; border-radius:50%; right:-6%; top:8%;
  background: radial-gradient(circle, rgba(251,233,204,.35), rgba(231,168,91,.08) 45%, transparent 70%);
  filter:blur(6px); animation: floatGlow 9s ease-in-out infinite; z-index:0;
}
@keyframes floatGlow{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-24px) scale(1.06); } }

.hero .container{ position:relative; z-index:2; padding-top:120px; padding-bottom:60px; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:48px; align-items:center; }

.hero-title{ font-size: clamp(2.6rem, 6vw, 4.6rem); line-height:1.05; }
.hero-title .neuro{
  display:block; font-style:italic; font-weight:500; letter-spacing:.06em;
  background:linear-gradient(100deg,var(--candle-soft),var(--candle));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-top:.15em;
}
.hero-welcome{ display:block; font-family:var(--font-sans); font-size:1rem; letter-spacing:.24em; text-transform:uppercase; color:var(--candle-soft); margin-bottom:1.4rem; }
.hero p.lead{ font-size:1.14rem; color:rgba(247,241,231,.86); max-width:36ch; margin:1.6rem 0 2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero-visual{ position:relative; }
.hero-card{
  position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5;
  box-shadow:var(--shadow-lg); border:1px solid rgba(247,241,231,.12);
}
.hero-badge{
  position:absolute; left:-18px; bottom:26px; z-index:3;
  background:rgba(30,46,42,.85); backdrop-filter:blur(8px);
  border:1px solid rgba(231,168,91,.35); border-radius:16px;
  padding:14px 20px; box-shadow:var(--shadow-md); max-width:220px;
}
.hero-badge strong{ font-family:var(--font-serif); color:var(--candle-soft); font-size:1.5rem; display:block; }
.hero-badge span{ font-size:.82rem; color:rgba(247,241,231,.8); }

.scroll-hint{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; color:rgba(247,241,231,.6); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scroll-hint .dot{ width:22px; height:36px; border:2px solid rgba(247,241,231,.4); border-radius:12px; position:relative; }
.scroll-hint .dot::after{ content:""; position:absolute; left:50%; top:7px; transform:translateX(-50%); width:4px; height:7px; background:var(--candle-soft); border-radius:2px; animation:scrollDot 1.8s infinite; }
@keyframes scrollDot{ 0%{ opacity:0; top:7px; } 40%{ opacity:1; } 100%{ opacity:0; top:18px; } }

/* =====================================================================
   BENEFICIOS
   ===================================================================== */
.benefits{ background:var(--cream); }
.benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.benefit{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid var(--cream-dim);
  transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column;
}
.benefit:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.benefit .media{ aspect-ratio:16/11; }
.benefit .body{ padding:22px 24px 26px; }
.benefit .ic{ display:none !important; }
.benefit .ic svg{ width:24px; height:24px; }
.benefit h3{ font-size:1.18rem; margin-bottom:.4rem; }
.benefit p{ color:var(--ink-soft); font-size:.98rem; }
.benefit.featured{ grid-column: span 3; }
@media(min-width:861px){
  .benefit.featured{ grid-column: span 1; }
}

/* =====================================================================
   ESTRUCTURA 8 SEMANAS
   ===================================================================== */
.weeks{ background:linear-gradient(165deg, var(--teal-deep), #223430 60%, #2c2419); color:var(--cream); position:relative; }
.weeks .section-head h2{ color:var(--cream); }
.weeks .section-head p{ color:rgba(247,241,231,.75); }
.timeline{ position:relative; max-width:900px; margin:0 auto; }
.timeline::before{ content:""; position:absolute; left:50%; top:6px; bottom:6px; width:3px; transform:translateX(-50%);
  background:linear-gradient(var(--candle) 0%, #3a9d8f 35%, #8bbf5a 68%, #5a8fc9 100%); opacity:.5; border-radius:3px; }
.tl-item{ position:relative; width:50%; padding:0 46px 30px; box-sizing:border-box; }
.tl-item:nth-child(odd){ left:0; text-align:right; }
.tl-item:nth-child(even){ left:50%; text-align:left; }
.tl-node{ position:absolute; top:2px; width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-serif); font-size:1.4rem; font-weight:600; color:#fff; z-index:2;
  box-shadow:0 8px 20px rgba(0,0,0,.35); border:3px solid var(--teal-deep); }
.tl-item:nth-child(odd) .tl-node{ right:-27px; }
.tl-item:nth-child(even) .tl-node{ left:-27px; }
.tl-item:nth-child(4n+1) .tl-node{ background:var(--candle); }
.tl-item:nth-child(4n+2) .tl-node{ background:#3a9d8f; }
.tl-item:nth-child(4n+3) .tl-node{ background:#8bbf5a; }
.tl-item:nth-child(4n)   .tl-node{ background:#5a8fc9; }
.tl-card{ background:rgba(247,241,231,.05); border:1px solid rgba(247,241,231,.12); border-radius:14px; padding:18px 22px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease; }
.tl-card:hover{ background:rgba(247,241,231,.09); border-color:rgba(231,168,91,.4); transform:translateY(-3px); }
.tl-item h3{ font-size:1.06rem; color:var(--candle-soft); margin-bottom:.28rem; }
.tl-item p{ font-size:.92rem; color:rgba(247,241,231,.78); }

/* =====================================================================
   INCLUYE
   ===================================================================== */
.includes{ background:var(--cream); }
.includes-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.include{
  text-align:center; background:#fff; border-radius:var(--radius);
  border:1px solid var(--cream-dim); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.include:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.include .media{ aspect-ratio:4/3; }
.include .body{ padding:26px 24px 30px; }
.include h3{ font-size:1.16rem; margin-bottom:.4rem; }
.include p{ color:var(--ink-soft); font-size:.96rem; }

/* =====================================================================
   TESTIMONIOS
   ===================================================================== */
.testi{ background:linear-gradient(160deg, #2c2419 0%, #223430 55%, var(--teal-deep) 100%); color:var(--cream); }
.testi .section-head h2{ color:var(--cream); }
.testi .section-head p{ color:rgba(247,241,231,.78); }
.testi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:960px; margin:0 auto; }
.quote{
  background:rgba(247,241,231,.05); border:1px solid rgba(247,241,231,.12);
  border-radius:var(--radius); padding:30px 30px 26px; position:relative;
  transition:transform .3s ease, border-color .3s ease;
}
.quote:hover{ transform:translateY(-4px); border-color:rgba(231,168,91,.4); }
.quote .mark{ font-family:var(--font-serif); font-size:3.4rem; line-height:.6; color:var(--candle); opacity:.5; height:.5em; display:block; }
.quote p{ font-size:1.02rem; color:rgba(247,241,231,.92); font-style:italic; font-family:var(--font-serif); margin:.4rem 0 1.2rem; }
.quote .who{ display:flex; align-items:center; gap:12px; }
.quote .avatar{ width:44px; height:44px; border-radius:50%; background:var(--candle); display:grid; place-items:center; font-family:var(--font-serif); font-weight:600; color:var(--teal-deep); flex:0 0 auto; }
.quote .who strong{ font-family:var(--font-sans); font-weight:600; font-size:.95rem; }
.quote .who .stars{ color:var(--candle-soft); font-size:.8rem; letter-spacing:2px; }

/* =====================================================================
   PRECIOS
   ===================================================================== */
.pricing{ background:var(--cream); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:stretch; }
.plan{
  background:#fff; border:1px solid var(--cream-dim); border-radius:var(--radius);
  padding:34px 30px; display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.plan.highlight{ border-color:var(--candle); box-shadow:0 20px 50px rgba(231,168,91,.28); background:linear-gradient(180deg,#fffdf9,#fff); }
.plan-tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--candle); color:#2a1c07; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.4rem 1rem; border-radius:999px; box-shadow:var(--shadow-sm); white-space:nowrap; }
.plan .opt{ font-family:var(--font-serif); font-size:1.05rem; color:var(--candle); font-style:italic; }
.plan h3{ font-size:1.4rem; margin:.3rem 0 .2rem; }
.plan .sub{ font-size:.92rem; color:var(--slate); margin-bottom:1.2rem; }
.plan .price{ font-family:var(--font-serif); font-size:2.4rem; font-weight:600; color:var(--ink); line-height:1; }
.plan .price small{ font-family:var(--font-sans); font-size:.9rem; color:var(--slate); font-weight:500; }
.plan .price-note{ font-size:.82rem; color:var(--slate); margin-top:.3rem; }
.plan ul{ list-style:none; margin:1.4rem 0 1.8rem; display:flex; flex-direction:column; gap:.7rem; }
.plan ul li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); }
.plan ul li svg{ width:20px; height:20px; flex:0 0 auto; color:var(--candle); margin-top:1px; }
.plan .btn{ margin-top:auto; justify-content:center; }

/* =====================================================================
   CONTACTO / CTA FINAL
   ===================================================================== */
.contact{
  color:var(--cream); position:relative; overflow:hidden;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(231,168,91,.28), transparent 55%),
    linear-gradient(165deg, #26312f, #1a2825);
}
.contact-inner{ text-align:center; max-width:760px; margin:0 auto; }
.contact h2{ font-size:clamp(2.2rem,5vw,3.4rem); }
.contact .presence{ font-style:italic; font-family:var(--font-serif); font-size:clamp(2rem,5vw,3rem); color:var(--candle-soft); margin:.2rem 0 1.4rem; }
.contact p{ color:rgba(247,241,231,.85); font-size:1.1rem; margin-bottom:2rem; }
.contact-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.4rem; }
.contact-info{ display:flex; gap:2.4rem; justify-content:center; flex-wrap:wrap; color:rgba(247,241,231,.8); font-size:.98rem; }
.contact-info a{ display:inline-flex; align-items:center; gap:.5rem; }
.contact-info a:hover{ color:var(--candle-soft); }
.contact-info svg{ width:18px; height:18px; color:var(--candle); }
.contact-note{ margin-top:1.6rem; font-size:.86rem; color:rgba(247,241,231,.55); font-style:italic; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{ background:var(--teal-deep); color:rgba(247,241,231,.7); padding:40px 0; text-align:center; }
.footer-logo{ height:104px; width:auto; margin:0 auto 10px; filter:brightness(0) invert(1); }
.footer .brand{ justify-content:center; margin-bottom:14px; }
.footer small{ font-size:.82rem; display:block; margin-top:.4rem; opacity:.7; }
.footer-legal{ margin-top:.7rem; font-size:.84rem; }
.footer-legal a{ color:rgba(247,241,231,.85); transition:color .2s ease; }
.footer-legal a:hover{ color:var(--candle-soft); }
.footer-legal .sep{ opacity:.4; margin:0 .5rem; }

/* =====================================================================
   WHATSAPP FLOTANTE
   ===================================================================== */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:55;
  width:60px; height:60px; border-radius:50%; background:var(--wa);
  display:grid; place-items:center; box-shadow:0 10px 30px rgba(37,211,102,.5);
  transition:transform .25s ease; animation:waPulse 2.6s infinite;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:32px; height:32px; }
@keyframes waPulse{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); } 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); } }

/* =====================================================================
   REVEAL ANIMATION
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s; } .reveal.d2{ transition-delay:.2s; } .reveal.d3{ transition-delay:.3s; }

/* =====================================================================
   SOBRE ORNELLA
   ===================================================================== */
.about{ background:linear-gradient(160deg, var(--navy) 0%, #12203c 58%, var(--navy-2) 100%); color:var(--cream); position:relative; overflow:hidden; }
.about::before{ content:""; position:absolute; width:360px; height:360px; border-radius:50%; right:-8%; top:-10%; background:radial-gradient(circle, rgba(231,168,91,.18), transparent 68%); pointer-events:none; }
.about-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:center; position:relative; z-index:1; }
.about-photo{ position:relative; max-width:400px; width:100%; margin:0 auto; }
.about-photo .img-slot{ border-radius:22px; aspect-ratio:1/1; box-shadow:var(--shadow-lg); border:1px solid rgba(247,241,231,.14); background:#fff; }
.about-photo .img-slot img{ border-radius:inherit; }
.about-copy .eyebrow{ color:var(--candle-soft); }
.about-copy h2{ font-size:clamp(1.9rem,4vw,2.8rem); margin:.5rem 0 1.1rem; }
.about-copy p{ color:rgba(247,241,231,.85); margin-bottom:1rem; font-size:1.05rem; }
.about-tags{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.5rem; }
.about-tags span{ border:1px solid rgba(231,168,91,.45); color:var(--candle-soft); padding:.45rem 1.1rem; border-radius:999px; font-size:.82rem; font-weight:600; letter-spacing:.02em; }

/* =====================================================================
   TIENDA / CHECKOUT
   ===================================================================== */
.course-feature{
  display:grid; grid-template-columns:1fr 1.25fr; gap:0; overflow:hidden;
  border-radius:var(--radius); background:#fff; border:1px solid var(--cream-dim);
  box-shadow:var(--shadow-sm); margin-bottom:38px;
}
.course-feature-media{ position:relative; min-height:280px; }
.course-feature-media .img-slot{ position:absolute; inset:0; border-radius:0; }
.course-feature-body{ padding:36px 38px; display:flex; flex-direction:column; }
.course-feature-body h3{ font-size:1.75rem; margin:.3rem 0 .6rem; }
.course-feature-body p{ color:var(--ink-soft); margin-bottom:1.5rem; }
.course-feature-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.course-feature-foot .price{ font-family:var(--font-serif); font-size:2.1rem; font-weight:600; color:var(--ink); line-height:1; }
.course-feature-foot .price small{ font-family:var(--font-sans); font-size:.85rem; color:var(--slate); }

.course-divider{ text-align:center; position:relative; margin:12px 0 34px; }
.course-divider::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--cream-dim); }
.course-divider span{ position:relative; background:var(--cream); padding:0 20px; font-family:var(--font-serif); font-style:italic; color:var(--slate); font-size:1.1rem; }

/* Modal */
.modal{ position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.open{ display:flex; }
.modal-overlay{ position:absolute; inset:0; background:rgba(10,16,14,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.modal-card{
  position:relative; z-index:1; width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  background:var(--cream); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:32px 32px 34px; animation:modalIn .3s ease;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.modal-close{ position:absolute; top:14px; right:14px; width:38px; height:38px; border:none; background:var(--cream-dim); border-radius:50%; cursor:pointer; display:grid; place-items:center; color:var(--ink); transition:background .2s; }
.modal-close:hover{ background:#d8ccb6; }
.modal-close svg{ width:20px; height:20px; }
.modal-eyebrow{ color:var(--candle); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; }
.modal-card h3{ font-size:1.5rem; margin:.35rem 0 .1rem; padding-right:40px; }
.modal-price{ font-family:var(--font-serif); font-size:1.9rem; color:var(--ink); font-weight:600; margin-bottom:1rem; }
.modal-price small{ font-family:var(--font-sans); font-size:.85rem; color:var(--slate); }
.steps{ list-style:none; display:flex; flex-direction:column; gap:.7rem; margin:1rem 0 1.3rem; }
.steps li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); }
.steps .n{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--candle); color:#2a1c07; font-weight:700; font-size:.85rem; display:grid; place-items:center; }
.bank{ background:#fff; border:1px solid var(--cream-dim); border-radius:var(--radius-sm); padding:8px 18px; margin-bottom:1.3rem; font-size:.95rem; }
.bank .row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:.55rem 0; }
.bank .row + .row{ border-top:1px solid var(--cream-dim); }
.bank .lbl{ color:var(--slate); flex:0 0 auto; }
.bank .val{ display:flex; align-items:center; gap:8px; justify-content:flex-end; flex-wrap:wrap; font-weight:600; color:var(--ink); text-align:right; }
.copy-btn{ border:none; background:var(--teal); color:var(--cream); border-radius:8px; padding:.35rem .7rem; font-size:.76rem; cursor:pointer; font-weight:600; transition:background .2s; white-space:nowrap; }
.copy-btn:hover{ background:var(--teal-2); }
.modal .field{ margin-bottom:.9rem; }
.modal label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:.3rem; }
.modal input{ width:100%; padding:.7rem .9rem; border:1px solid var(--cream-dim); border-radius:10px; font-family:var(--font-sans); font-size:1rem; background:#fff; color:var(--ink); }
.modal input:focus{ outline:none; border-color:var(--candle); box-shadow:0 0 0 3px rgba(231,168,91,.22); }
.modal-actions{ display:flex; flex-direction:column; gap:.7rem; margin-top:.6rem; }
.modal-actions .btn{ justify-content:center; }
.modal-note{ font-size:.82rem; color:var(--slate); margin-top:1rem; text-align:center; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-visual{ max-width:420px; margin:0 auto; width:100%; }
  .hero p.lead{ max-width:48ch; }
  .about-grid{ grid-template-columns:1fr; gap:36px; text-align:center; }
  .about-photo{ max-width:320px; }
  .about-tags{ justify-content:center; }
}
@media(max-width:860px){
  .benefits-grid,.includes-grid,.pricing-grid,.testi-grid{ grid-template-columns:1fr; }
  .timeline::before{ left:26px; transform:none; }
  .tl-item{ width:100%; left:0 !important; text-align:left !important; padding:0 0 22px 82px; }
  .tl-item .tl-node{ left:0 !important; right:auto !important; }
  .course-feature{ grid-template-columns:1fr; }
  .course-feature-media{ min-height:200px; }
  .course-feature-body{ padding:28px 26px; }
  /* Sin desenfoque en la barra: evita que "atrape" y recorte el menú fijo */
  .nav.scrolled{ background:rgba(22,34,31,.97); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(82vw,330px);
    background:#16221f;                 /* fondo 100% sólido y opaco */
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1.35rem;
    padding:92px 32px 40px;             /* espacio arriba: no queda bajo la barra */
    overflow-y:auto;                    /* si no cabe, hace scroll dentro del menú */
    transform:translateX(100%); transition:transform .35s ease; box-shadow:var(--shadow-lg);
    z-index:56;
  }
  .nav-links.open{ transform:translateX(0); }
  /* Capa oscura sobre el resto de la página cuando el menú está abierto */
  .nav-backdrop{
    position:fixed; inset:0; z-index:54; background:rgba(10,16,14,.6);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  }
  .nav-backdrop.open{ opacity:1; visibility:visible; }
  body.menu-open{ overflow:hidden; }   /* evita scroll del fondo con el menú abierto */
  body.menu-open .wa-float{ opacity:0; visibility:hidden; }  /* WhatsApp no flota sobre el menú */
  .nav-links a{ font-size:1.15rem; }
  .nav-toggle{ display:block; }
  .nav-cta{ margin-left:0; }
}
@media(max-width:480px){
  body{ font-size:16px; }
  .container{ padding:0 18px; }
  .hero .container{ padding-top:104px; }
  .contact-info{ gap:1rem; flex-direction:column; }
}

/* Accesibilidad: reduce motion */
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
}
:focus-visible{ outline:3px solid var(--candle); outline-offset:3px; border-radius:6px; }