/* ══════════════════════════════════════════════════════════════
   TIPOGRAFÍAS DE MARCA
   Trancoso Sans (titulares) y General Sans (cuerpo), servidas
   desde el propio dominio. Sustituyen a Fraunces y a Fontshare:
   ya no hay peticiones a terceros ni sustitutos aproximados.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-300.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-300i.woff2') format('woff2');
  font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-400i.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-500i.woff2') format('woff2');
  font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-600i.woff2') format('woff2');
  font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Trancoso Sans';src:url('/assets/fuentes/tra-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/fuentes/gs-var.woff2') format('woff2-variations');
  font-weight:200 700;font-style:normal;font-display:swap}
/* Cursiva real de General Sans: antes el navegador la falseaba inclinando la recta */
@font-face{font-family:'General Sans';src:url('/assets/fuentes/gs-var-i.woff2') format('woff2-variations');
  font-weight:200 700;font-style:italic;font-display:swap}


/* ── TOKENS ───────────────────────────────── */
:root{
  --cream:#f8f3e7; --aceite:#e0d3a7; --peach:#cf734c; --terra:#9e4e2a;
  --olive:#706034; --choco:#6d4c44; --cacao:#412c27; 
  --serif:'Trancoso Sans',Georgia,serif;
  --sans:'General Sans',system-ui,-apple-system,sans-serif;
  --azul:#374a79;
  --max:1140px; --g:clamp(1.25rem,5vw,3rem);
  --r4:4px; --r8:8px; --r16:16px; --r32:32px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
html{overflow-x:clip}
body{font-family:var(--sans);background:var(--cream);color:var(--cacao);line-height:1.65;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

/* ── LAYOUT ──────────────────────────────── */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}

/* ── TYPE ────────────────────────────────── */
.eyebrow{
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--peach);display:inline-flex;align-items:center;gap:.55rem
}
.eyebrow::before{
  content:'';width:18px;height:1px;background:currentColor;opacity:.6;flex-shrink:0
}
.h-display{
  font-family:var(--serif);font-size:clamp(2.6rem,5.5vw,5rem);
  font-weight:400;line-height:1.0;color:var(--cacao);letter-spacing:-.01em
}
.h-display em{font-style:italic;color:var(--peach)}
.h-section{
  font-family:var(--serif);font-size:clamp(2rem,3.8vw,3.2rem);
  font-weight:400;line-height:1.08;color:var(--cacao);letter-spacing:-.01em
}
.h-section em{font-style:italic;color:var(--peach)}
.h-section-light{color:var(--cream)}
.body-lg{font-size:clamp(.95rem,1.5vw,1.08rem);line-height:1.8;color:var(--choco)}
.divider{width:2.5rem;height:1.5px;background:var(--peach);border:none}

/* ── BUTTONS ─────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2rem;border-radius:var(--r4);font-family:var(--sans);font-size:.9375rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:all .25s ease;border:none;white-space:nowrap}
.btn-primary{background:var(--terra);color:var(--cream)}
.btn-primary:hover{background:var(--cacao);transform:translateY(-2px);box-shadow:0 8px 24px rgba(158,78,42,.25)}
.btn-outline{background:transparent;color:var(--cacao);border:1.5px solid var(--cacao)}
.btn-outline:hover{background:var(--cacao);color:var(--cream)}
.btn-light{background:var(--cream);color:var(--terra)}
.btn-light:hover{background:var(--cream);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(248,243,231,0.5)}
.btn-ghost:hover{background:rgba(248,243,231,0.08)}
.btn-full{width:100%;justify-content:center}

/* ── NAV ─────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:.9rem var(--g);display:flex;align-items:center;justify-content:space-between;background:rgba(248,243,231,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(65,44,39,.07);transition:box-shadow .3s}
.nav.up{box-shadow:0 2px 24px rgba(65,44,39,.09)}
.nav-logo{display:block;line-height:0}
/* Logotipo en SVG: la variante sin tagline aguanta tamaños pequeños,
   la completa convertía el tagline en una mancha ilegible. */
.nav-logo img{height:30px;width:auto;display:block}
@media(max-width:520px){.nav-logo img{height:26px}}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:.76rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--choco);transition:color .2s}
.nav-links a:hover{color:var(--peach)}
.nav-cta{padding:.6rem 1.3rem;font-size:.73rem}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--cacao);transition:.3s}
.nav-mobile{display:none;position:fixed;top:60px;left:0;right:0;background:var(--cream);border-bottom:1px solid rgba(65,44,39,.1);padding:1.5rem var(--g) 2rem;flex-direction:column;gap:1.2rem;z-index:199}
.nav-mobile.open{display:flex}
.nav-mobile a{font-size:.85rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--choco);padding:.5rem 0;border-bottom:1px solid rgba(65,44,39,.06)}

/* ── HERO ────────────────────────────────── */
.hero{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;padding-top:62px}
.hero-content{display:flex;flex-direction:column;justify-content:center;gap:1.75rem;padding:4rem var(--g) 4rem clamp(1.25rem,6vw,5rem)}
.hero-pills{display:flex;flex-wrap:wrap;gap:.55rem}
.pill{font-size:.68rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:.35rem .85rem;border-radius:100px;border:1px solid var(--aceite);color:var(--olive)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero-proof{display:flex;align-items:center;gap:.85rem}
.avatars{display:flex}
.av{width:32px;height:32px;border-radius:50%;border:2px solid var(--cream);background:var(--aceite);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:600;color:var(--olive);margin-left:-7px}
.av:first-child{margin-left:0}
.proof-text{font-size:.76rem;color:var(--choco);line-height:1.35}
.proof-text strong{color:var(--cacao)}
.hero-visual{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:var(--terra)}
.hero-fade{position:absolute;inset:0;background:linear-gradient(to right,var(--cream) 0%,transparent 18%)}
.hero-badge{position:absolute;bottom:2rem;right:2rem;background:var(--cacao);color:var(--cream);padding:1rem 1.25rem;border-radius:var(--r16);text-align:center;max-width:190px}
.hero-badge .num{font-family:var(--serif);font-size:2.2rem;font-weight:500;color:var(--peach);line-height:1}
.hero-badge p{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aceite);margin-top:.3rem}

/* ── STRIP ───────────────────────────────── */
.strip{background:var(--cacao);padding:.95rem 0;overflow:hidden}
.strip-inner{display:flex;gap:2rem;animation:marquee 20s linear infinite;width:max-content;white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip-item{font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(224,211,167,.88);flex-shrink:0}
.strip-dot{width:4px;height:4px;border-radius:50%;background:var(--peach);flex-shrink:0}

/* ── PAIN POINTS ─────────────────────────── */
.pain{padding:clamp(4rem,9vw,7rem) var(--g);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.pain-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:.85rem}
.pain-item{display:flex;gap:.9rem;align-items:flex-start;font-size:.92rem;color:var(--choco);line-height:1.55}
.pain-mark{width:24px;height:24px;border-radius:50%;background:var(--aceite);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--olive);margin-top:.1rem}
.pain-visual{height:480px;border-radius:var(--r32);background:var(--terra);position:relative;overflow:hidden}
.pain-pull{position:absolute;bottom:2rem;left:2rem;right:2rem;background:rgba(65,44,39,.85);backdrop-filter:blur(8px);border-radius:var(--r16);padding:1.25rem}
.pain-pull p{font-family:var(--serif);font-size:1.1rem;font-style:italic;color:var(--aceite);line-height:1.4}

/* ── PROGRAMMES GRID ─────────────────────── */
.programs{padding:clamp(3.5rem,8vw,6rem) var(--g);background:var(--cacao)}
.programs-hd{margin-bottom:3rem}
.programs-hd .h-section{color:var(--cream)}
.prog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.prog-card{border-radius:var(--r16);overflow:hidden;border:1px solid rgba(224,211,167,0.28);transition:transform .25s,box-shadow .25s;cursor:pointer}
.prog-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(65,44,39,.32)}
.prog-visual{height:190px;position:relative}
.pv1{background:var(--terra)}
.pv2{background:var(--olive)}
.pv3{background:var(--choco)}
.prog-tag{position:absolute;top:1.1rem;left:1.1rem;background:rgba(248,243,231,0.08);backdrop-filter:blur(8px);border:1px solid rgba(248,243,231,0.28);border-radius:100px;padding:.28rem .75rem;font-size:.63rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cream)}
.prog-glyph{position:absolute;bottom:1.2rem;left:1.6rem;font-family:var(--serif);font-size:4.5rem;font-weight:300;color:rgba(248,243,231,0.78);font-style:italic;line-height:1}
.prog-body{background:rgba(248,243,231,0.08);padding:1.5rem 1.6rem 1.75rem;display:flex;flex-direction:column;gap:.85rem}
.prog-title{font-family:var(--serif);font-size:1.45rem;font-weight:400;color:var(--cream);line-height:1.15}
.prog-title small{display:block;font-family:var(--sans);font-size:.72rem;font-style:normal;color:rgba(224,211,167,.88);font-weight:400;letter-spacing:.05em;margin-top:.15rem}
.prog-desc{font-size:.84rem;line-height:1.7;color:rgba(224,211,167,.88);flex-grow:1}
.prog-link{font-size:.73rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--peach);display:flex;align-items:center;gap:.4rem;transition:gap .2s}
.prog-link:hover{gap:.75rem}

/* ── QUOTE ───────────────────────────────── */
.quote-break{background:var(--choco) url(/assets/textura_cacao.jpg) center/cover;padding:clamp(3rem,7vw,5rem) var(--g);text-align:center}
.quote-break blockquote{font-family:var(--serif);font-size:clamp(1.5rem,3.5vw,2.6rem);font-weight:300;font-style:italic;color:var(--cream);line-height:1.25;max-width:780px;margin:0 auto}
.quote-break cite{display:block;font-family:var(--sans);font-size:.72rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:rgba(248,243,231,.92);margin-top:1.25rem;font-style:normal}

/* ── ALIMENT-ARTE ────────────────────────── */
.aa-hero{background:var(--cream);padding:clamp(4rem,9vw,7rem) var(--g)}
.aa-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.aa-hero-h{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.5rem);font-weight:400;line-height:1.08;margin:.75rem 0 1.25rem}
.aa-hero-h em{font-style:italic;color:var(--peach)}
.aa-cycle{background:var(--cacao);border-radius:var(--r16);padding:1.75rem 1.5rem}
.aa-cycle-title{font-family:var(--serif);font-size:1rem;font-weight:400;color:rgba(224,211,167,.88);margin-bottom:1.5rem;text-align:center;font-style:italic}
/* Cycle — geometric, no emojis */
.cycle-flow{display:flex;flex-direction:column;gap:0;position:relative;padding:.5rem 0}
.cycle-flow::before{content:'';position:absolute;left:19px;top:24px;bottom:24px;width:1px;border-left:1px dashed rgba(207,115,76,.25)}
.cycle-step{display:flex;align-items:center;gap:1rem;padding:.6rem 0}
.cycle-step-dot{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.cs1 .cycle-step-dot{background:rgba(207,115,76,.2);border:1.5px solid rgba(207,115,76,.5)}
.cs2 .cycle-step-dot{background:rgba(112,96,52,.2);border:1.5px solid rgba(112,96,52,.4)}
.cs3 .cycle-step-dot{background:rgba(109,76,68,.25);border:1.5px solid rgba(109,76,68,.4)}
.cs4 .cycle-step-dot{background:rgba(65,44,39,.5);border:1.5px solid rgba(224,211,167,0.45)}
.cycle-step-glyph{font-family:var(--serif);font-size:.85rem;font-weight:500;line-height:1}
.cs1 .cycle-step-glyph{color:var(--peach)}
.cs2 .cycle-step-glyph{color:rgba(224,211,167,.88)}
.cs3 .cycle-step-glyph{color:rgba(224,211,167,.88)}
.cs4 .cycle-step-glyph{color:rgba(224,211,167,.88)}
.cycle-step-text{display:flex;flex-direction:column;gap:.15rem}
.cycle-step-name{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.cs1 .cycle-step-name{color:var(--peach)}
.cs2 .cycle-step-name{color:rgba(224,211,167,.88)}
.cs3 .cycle-step-name{color:rgba(224,211,167,.88)}
.cs4 .cycle-step-name{color:rgba(224,211,167,.88)}
.cycle-step-sub{font-size:.73rem;color:rgba(224,211,167,.88);line-height:1.4}
.cycle-arrow-row{padding:.2rem 0 .2rem 47px;font-size:.75rem;color:rgba(207,115,76,.4)}
.cycle-cta{text-align:center;margin-top:1.25rem;font-size:.78rem;color:rgba(224,211,167,.88);line-height:1.5}
.cycle-cta strong{color:var(--peach);display:block;font-size:.88rem;margin-bottom:.2rem}

.aa-truth{background:var(--cacao) url(/assets/textura_cacao.jpg) center/cover;padding:clamp(3.5rem,8vw,6rem) var(--g);text-align:center}
.aa-truth-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;align-items:center}
.aa-truth h2{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:400;color:var(--cream);line-height:1.15}
.aa-truth h2 em{font-style:italic;color:var(--peach)}
.three-nots{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:.5rem 0}
.not-item{background:rgba(224,211,167,0.08);border:1px solid rgba(224,211,167,0.28);border-radius:100px;padding:.45rem 1.1rem;font-size:.78rem;color:var(--aceite)}
.not-item s{text-decoration:line-through;opacity:.92}
.aa-truth p{font-size:.95rem;color:rgba(224,211,167,.88);line-height:1.75;max-width:620px}

/* 5 months */
.aa-months{background:var(--aceite) url(/assets/textura_aceite.jpg) center/cover;padding:clamp(3.5rem,8vw,6rem) var(--g)}
.aa-months-hd{margin-bottom:3rem}
.months-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(65,44,39,.12);border-radius:var(--r16);overflow:hidden}
.month-card{background:var(--cream);padding:1.6rem 1.3rem;display:flex;flex-direction:column;gap:.75rem;transition:background .2s;position:relative}
.month-card:hover{background:#f8f3e7}
.month-phase{border-top:3px solid var(--peach)}
.month-phase-badge{display:inline-block;background:var(--peach);color:var(--cream);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.22rem .65rem;border-radius:100px;align-self:flex-start}
.month-result{font-size:.78rem;font-style:italic;color:var(--terra);line-height:1.5;padding-top:.25rem;border-top:1px dashed rgba(65,44,39,.12)}
.month-num{font-family:var(--serif);font-size:2.8rem;font-weight:300;color:var(--aceite);line-height:1}
.month-label{font-size:.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--peach)}
.month-name{font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--cacao);line-height:1.2}
.month-desc{font-size:.82rem;line-height:1.65;color:var(--choco)}

/* 3 phases */
.aa-phases{background:var(--cream);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.aa-phases-hd{margin-bottom:3rem}
.phases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.phase-card{border:1px solid rgba(65,44,39,.1);border-radius:var(--r16);padding:2rem 1.75rem;display:flex;flex-direction:column;gap:1.1rem;position:relative;overflow:hidden}
.phase-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--peach)}
.phase-card:nth-child(2)::before{background:var(--olive)}
.phase-card:nth-child(3)::before{background:var(--choco)}
.phase-num{font-family:var(--serif);font-size:3.5rem;font-weight:300;color:var(--aceite);line-height:1}
.phase-label{font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--peach)}
.phase-card:nth-child(2) .phase-label{color:var(--olive)}
.phase-card:nth-child(3) .phase-label{color:var(--choco)}
.phase-name{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--cacao);line-height:1.1}
.phase-sub{font-size:.82rem;font-weight:500;color:var(--cacao);margin-bottom:.15rem}
.phase-list{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.phase-list li{font-size:.82rem;color:var(--choco);line-height:1.55;padding-left:1.1rem;position:relative}
.phase-list li::before{content:'—';position:absolute;left:0;color:var(--peach)}
.phase-result{background:var(--aceite);border-radius:var(--r8);padding:.85rem 1rem;margin-top:.5rem}
.phase-result p{font-size:.82rem;color:var(--olive);line-height:1.55}
.phase-result strong{color:var(--cacao)}

/* What's included */
.aa-includes{background:var(--cacao);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.aa-includes-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5rem);align-items:start}
.includes-list{display:flex;flex-direction:column;gap:0;margin-top:1.5rem;border-radius:var(--r16);overflow:hidden;border:1px solid rgba(224,211,167,0.28)}
.inc-item{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.1rem 1.25rem;border-bottom:1px solid rgba(224,211,167,0.18);align-items:start}
.inc-item:last-child{border-bottom:none}
.inc-icon{width:34px;height:34px;border-radius:var(--r8);background:rgba(207,115,76,.15);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem}
.inc-text h4{font-size:.84rem;font-weight:600;color:var(--cream);margin-bottom:.2rem}
.inc-text p{font-size:.79rem;color:rgba(224,211,167,.88);line-height:1.55}

/* CTA block */
.cta-block{background:rgba(207,115,76,.1);border:1px solid rgba(207,115,76,.25);border-radius:var(--r16);padding:2rem;display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.cta-block h3{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--cream);line-height:1.2}
.cta-block h3 em{font-style:italic;color:var(--peach)}
.cta-block p{font-size:.85rem;color:rgba(224,211,167,.88);line-height:1.65}
.session-perks{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.session-perks li{font-size:.82rem;color:rgba(224,211,167,.88);padding-left:1.1rem;position:relative}
.session-perks li::before{content:'✓';position:absolute;left:0;color:var(--peach);font-weight:600}

/* For whom */
.aa-fit{background:transparent;padding:clamp(3.5rem,8vw,6rem) var(--g)}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.5rem}
.fit-col{border-radius:var(--r16);padding:2rem}
.fit-col-no{background:rgba(65,44,39,.06);border:1px solid rgba(65,44,39,.1)}
.fit-col-yes{background:var(--cacao)}
.fit-col h3{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin-bottom:1.25rem}
.fit-col-no h3{color:var(--choco)}
.fit-col-yes h3{color:var(--cream)}
.fit-list{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.fit-list li{font-size:.85rem;line-height:1.55;padding-left:1.3rem;position:relative}
.fit-col-no .fit-list li{color:var(--choco)}
.fit-col-no .fit-list li::before{content:'✕';position:absolute;left:0;color:rgba(65,44,39,.3);font-size:.8rem}
.fit-col-yes .fit-list li{color:rgba(224,211,167,.8)}
.fit-col-yes .fit-list li::before{content:'✓';position:absolute;left:0;color:var(--peach);font-weight:600}

/* FAQ */
.aa-faq{background:var(--cream);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.faq-list{margin-top:2.5rem;display:flex;flex-direction:column;gap:0;border-radius:var(--r16);overflow:hidden;border:1px solid rgba(65,44,39,.1)}
.faq-item{border-bottom:1px solid rgba(65,44,39,.08)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:1.25rem 1.5rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;transition:background .2s}
.faq-q:hover{background:rgba(65,44,39,.03)}
.faq-q span{font-size:.9rem;font-weight:500;color:var(--cacao);line-height:1.4}
.faq-icon{width:22px;height:22px;border-radius:50%;background:var(--aceite);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--olive);transition:transform .3s,background .2s}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--peach);color:var(--cream)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
.faq-item.open .faq-a{max-height:400px;padding-bottom:1.25rem}
.faq-a p{font-size:.87rem;line-height:1.75;color:var(--choco);padding:0 1.5rem}

/* ── RESETEA TU SALUD ────────────────────── */
.rts-hero{background:var(--olive);padding:clamp(4rem,9vw,7rem) var(--g)}
.rts-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;max-width:var(--max);margin-inline:auto}
.rts-h{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.5rem);font-weight:400;color:var(--cream);line-height:1.1;margin:.75rem 0 1rem}
.rts-h em{font-style:italic;color:var(--aceite)}
.rts-sub{font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--aceite);margin-bottom:1rem;line-height:1.4}
.rts-body{font-size:.9rem;color:rgba(224,211,167,.88);line-height:1.75}
.rts-feeling{font-size:.73rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:rgba(224,211,167,.88);margin-bottom:1.1rem}
.rts-symptoms{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.75rem}
.rts-symptoms li{display:flex;align-items:center;gap:.8rem;font-size:.92rem;color:var(--cream);line-height:1.4}
.rts-dot{width:7px;height:7px;border-radius:50%;background:var(--peach);flex-shrink:0}
.rts-tried{background:rgba(207,115,76,.1);border-left:3px solid var(--peach);padding:1rem 1.2rem;border-radius:0 var(--r8) var(--r8) 0}
.rts-tried p{font-size:.86rem;color:rgba(224,211,167,.88);line-height:1.6;margin-bottom:.3rem}
.rts-tried strong{color:var(--cream)}

.rts-what{background:var(--aceite) url(/assets/textura_aceite.jpg) center/cover;padding:clamp(3.5rem,8vw,6rem) var(--g)}
.rts-what-inner{max-width:var(--max);margin-inline:auto;display:flex;flex-direction:column;gap:2.5rem}
.rts-what-h{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);font-weight:400;color:var(--cacao);line-height:1.2;margin-top:.5rem}
.rts-what-h em{font-style:italic;color:var(--terra)}
.rts-nots{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.rts-not{padding:1.1rem;border-radius:var(--r8);display:flex;flex-direction:column;gap:.4rem}
.rts-not.no{background:rgba(65,44,39,.07);border:1px solid rgba(65,44,39,.1)}
.rts-not.no span{color:rgba(65,44,39,.3);font-weight:700;font-size:1rem}
.rts-not.no p{font-size:.82rem;color:var(--choco)}
.rts-not.yes{background:var(--terra)}
.rts-not.yes span{color:rgba(248,243,231,.92);font-size:1rem}
.rts-not.yes p{font-size:.82rem;color:var(--cream);font-weight:500}
.rts-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem}
.rts-pillar{background:rgba(65,44,39,.06);border-radius:var(--r8);padding:1.1rem;display:flex;flex-direction:column;gap:.6rem}
.rts-pillar-icon{font-size:1.4rem}
.rts-pillar p{font-size:.82rem;color:var(--cacao);line-height:1.5}

.rts-journey{background:var(--cacao);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.rts-journey-hd{max-width:var(--max);margin-inline:auto 0 3rem}
.rts-months{max-width:var(--max);margin-inline:auto;display:flex;flex-direction:column;gap:0}
.rts-month{display:grid;grid-template-columns:80px 1fr;gap:1.75rem;padding:2rem 0;border-bottom:1px solid rgba(224,211,167,0.18)}
.rts-month:last-child{border-bottom:none}
.rts-month-num{font-family:var(--serif);font-size:3.5rem;font-weight:300;color:rgba(207,115,76,.25);line-height:1}
.rts-month-tag{font-size:.65rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--peach);margin-bottom:.4rem}
.rts-month-title{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.75rem);font-weight:400;color:var(--cream);line-height:1.2;margin-bottom:.6rem}
.rts-month-quote{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--aceite);border-left:2px solid var(--peach);padding-left:.9rem;margin-bottom:.8rem;line-height:1.5}
.rts-month-body{font-size:.86rem;color:rgba(224,211,167,.88);line-height:1.7;margin-bottom:.8rem}
.rts-month-list{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin-bottom:.9rem}
.rts-month-list li{font-size:.83rem;color:rgba(224,211,167,.88);line-height:1.5;padding-left:1.1rem;position:relative}
.rts-month-list li::before{content:'—';position:absolute;left:0;color:var(--peach)}
.rts-month-result{background:rgba(207,115,76,.1);border-radius:var(--r8);padding:.9rem 1.1rem}
.rts-result-lbl{font-size:.63rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--peach);margin-bottom:.3rem}
.rts-month-result p{font-size:.84rem;color:var(--aceite);line-height:1.6}

.rts-bonus{background:var(--cream);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.rts-bonus-hd{margin-bottom:2.5rem}
.rts-bonus-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;max-width:var(--max);margin-inline:auto}
.rts-bonus-card{background:var(--cream);border:1px solid rgba(65,44,39,.08);border-radius:var(--r16);padding:1.5rem 1.3rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .2s}
.rts-bonus-card:hover{transform:translateY(-3px)}
.rts-bonus-num{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--aceite);line-height:1}
.rts-bonus-card h4{font-family:var(--serif);font-size:1rem;font-weight:500;color:var(--cacao);line-height:1.3}
.rts-bonus-card p{font-size:.8rem;color:var(--choco);line-height:1.6}

.rts-cta{background:var(--aceite) url(/assets/textura_aceite.jpg) center/cover;padding:clamp(3.5rem,8vw,6rem) var(--g);text-align:center}
.rts-cta-inner{max-width:640px;margin-inline:auto;display:flex;flex-direction:column;gap:1.5rem;align-items:center}
.rts-cta-h{font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:400;color:var(--cacao);line-height:1.15}
.rts-cta-h em{font-style:italic;color:var(--terra)}

/* ── TESTIMONIALS ────────────────────────── */
.testi{padding:clamp(4rem,9vw,7rem) var(--g)}
.testi-hd{text-align:center;margin-bottom:3rem}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2rem}
.testi-card{background:var(--cream);border:1px solid rgba(65,44,39,.07);border-radius:var(--r16);padding:1.75rem 1.6rem;display:flex;flex-direction:column;gap:1.1rem;transition:transform .2s}
.testi-card:hover{transform:translateY(-3px)}
.testi-quote{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--cacao);line-height:1.55;flex-grow:1}
.testi-author{display:flex;align-items:center;gap:.8rem}
.testi-av{width:38px;height:38px;border-radius:50%;background:var(--aceite);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:var(--olive)}
.testi-name{font-size:.8rem;font-weight:500;color:var(--cacao)}
.testi-stars{font-size:.75rem;color:var(--peach);margin-top:.1rem}
.testi-large{background:var(--cacao);border-radius:var(--r16);padding:2.5rem;display:grid;grid-template-columns:1fr 2fr;gap:2.5rem;align-items:center}
.tl-title{font-family:var(--serif);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:400;color:var(--cream);line-height:1.15;margin-bottom:.5rem}
.tl-sub{font-size:.72rem;color:rgba(224,211,167,.88);letter-spacing:.1em;text-transform:uppercase}
.tl-text{font-family:var(--serif);font-size:1.05rem;font-style:italic;color:var(--aceite);line-height:1.65}
.tl-name{font-size:.8rem;font-weight:500;color:var(--cream);margin-top:1rem}

/* ── ABOUT ───────────────────────────────── */
.about{padding:clamp(4rem,9vw,7rem) var(--g);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.about-img{height:560px;position:relative}
.about-img-main{width:100%;height:100%;border-radius:var(--r32);background:var(--terra)}
.about-img-accent{position:absolute;bottom:-1.5rem;right:-1.5rem;width:52%;height:44%;border-radius:var(--r16);border:4px solid var(--cream);background:var(--olive)}
.about-content{display:flex;flex-direction:column;gap:1.35rem}
.about-body p{font-size:.93rem;line-height:1.8;color:var(--choco);margin-bottom:.9rem}
.about-body em{font-family:var(--serif);font-size:1.2rem;color:var(--peach);font-style:italic}
.creds{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.25rem}
.cred{background:var(--aceite);color:var(--olive);padding:.35rem .85rem;border-radius:var(--r4);font-size:.71rem;font-weight:500}

/* ── ICEBERG ─────────────────────────────── */
.iceberg{background:var(--cacao);padding:clamp(4rem,9vw,7rem) var(--g)}
.iceberg-hd{text-align:center;max-width:var(--max);margin:0 auto 3.5rem}
.iceberg-hd .body-lg{color:rgba(224,211,167,.88);max-width:580px;margin:.75rem auto 0}
.ice-wrap{max-width:680px;margin:0 auto}
.ice-top{background:var(--peach);border-radius:var(--r16) var(--r16) 0 0;padding:1.75rem;text-align:center}
.ice-lbl{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(248,243,231,.92);margin-bottom:.4rem}
.ice-frac{font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--cream);margin-bottom:.6rem}
.ice-chips{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.ice-chip{background:rgba(248,243,231,0.08);border:1px solid rgba(248,243,231,0.28);border-radius:100px;padding:.22rem .65rem;font-size:.65rem;color:rgba(248,243,231,.8);text-transform:uppercase;letter-spacing:.07em}
.ice-gap{height:1.5rem;background:rgba(224,211,167,0.08);border-left:1px dashed rgba(224,211,167,0.3);border-right:1px dashed rgba(224,211,167,0.3)}
.ice-bot{background:var(--cacao);border-radius:0 0 var(--r32) var(--r32);padding:2.25rem 1.75rem;text-align:center}
.ice-bot .ice-frac{color:var(--aceite)}
.ice-bot .ice-chip{border-color:rgba(224,211,167,0.3);color:rgba(224,211,167,.88)}

/* ── FREE SESSION CTA ────────────────────── */
.free-cta{background:var(--peach);padding:clamp(4rem,9vw,7rem) var(--g);position:relative;overflow:hidden}
.free-cta-d{position:absolute;right:-4%;bottom:-18%;width:clamp(260px,30vw,480px);opacity:.14;pointer-events:none}
.free-cta .container{position:relative;z-index:1}
.free-cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.free-cta h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);font-weight:400;color:var(--cream);line-height:1.1;margin-bottom:1rem}
.free-cta h2 em{font-style:italic;opacity:.8}
.free-cta p{font-size:.93rem;color:rgba(248,243,231,.82);line-height:1.7}
.free-feats{display:flex;flex-direction:column;gap:1.1rem}
.free-feat{display:flex;gap:.9rem;align-items:flex-start}
.feat-ico{width:40px;height:40px;border-radius:var(--r8);background:rgba(248,243,231,0.14);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.feat-txt h4{font-size:.85rem;font-weight:600;color:var(--cream);margin-bottom:.15rem}
.feat-txt p{font-size:.8rem;color:rgba(248,243,231,.92);line-height:1.5}
.free-cta-btn{margin-top:1.75rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.free-note{font-size:.72rem;color:rgba(248,243,231,.92)}

/* ── EMPRESAS ────────────────────────────── */
.empresas{padding:clamp(4rem,9vw,7rem) var(--g)}
.empresas-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.empresas-content{display:flex;flex-direction:column;gap:1.4rem}
.colabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.25rem}
.colab{background:var(--aceite);color:var(--olive);padding:.32rem .8rem;border-radius:var(--r4);font-size:.7rem;font-weight:500}
.empresas-img{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.75rem;height:460px}
.empresas-img-main{border-radius:var(--r16);overflow:hidden;grid-column:1;grid-row:1/3;position:relative}
.empresas-img-sm{border-radius:var(--r16);overflow:hidden;position:relative}
.empresas-img img{width:100%;height:100%;object-fit:cover;display:block}
.empresas-pull{font-family:var(--serif);font-size:1.45rem;font-style:italic;font-weight:400;color:rgba(248,243,231,.88);line-height:1.35}

/* ── MEDIA ───────────────────────────────── */
.media{background:var(--cacao);padding:2rem var(--g);text-align:center}
.media-lbl{font-size:.63rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(224,211,167,0.78);margin-bottom:1.25rem}
.media-logos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.75rem 3rem}
.media-logo{font-family:var(--serif);font-size:1.15rem;font-weight:500;font-style:italic;color:rgba(224,211,167,0.78);letter-spacing:.08em;transition:color .2s}
.media-logo:hover{color:rgba(224,211,167,.88)}

/* ── FOOTER ──────────────────────────────── */
.footer{background:#412c27;padding:3rem var(--g) 1.75rem}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.25rem;border-bottom:1px solid rgba(224,211,167,0.2);margin-bottom:1.75rem}
.footer-logo{margin-bottom:1rem;line-height:0}
.footer-logo img{height:64px;width:auto;display:block}
.footer-tagline{font-size:.8rem;color:rgba(224,211,167,.88);line-height:1.6}
.footer-col h4{font-size:.67rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(224,211,167,0.78);margin-bottom:1rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer-col a{font-size:.81rem;color:rgba(224,211,167,.88);transition:color .2s}
.footer-col a:hover{color:var(--peach)}
.footer-bot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.footer-copy{font-size:.72rem;color:rgba(224,211,167,0.78)}
.footer-legal{display:flex;gap:1.25rem}
.footer-legal a{font-size:.72rem;color:rgba(224,211,167,0.78);transition:color .2s}
.footer-legal a:hover{color:rgba(224,211,167,.88)}

/* ── SECTION DIVIDERS — split layout ─────── */
.prog-divider{display:grid;grid-template-columns:1fr 1fr;min-height:460px;overflow:hidden}
.prog-divider::before{display:none}
.prog-divider-inner{
  background:var(--terra) url(/assets/textura_terra.jpg) center/cover;
  padding:clamp(3rem,6vw,5rem) clamp(1.5rem,5vw,4rem);
  display:flex;flex-direction:column;justify-content:flex-end;gap:.85rem
}
.prog-divider-2 .prog-divider-inner{background:var(--olive) url(/assets/textura_oliva.jpg) center/cover}
.prog-divider-3 .prog-divider-inner{background:var(--cacao)}
.prog-divider-4 .prog-divider-inner{background:var(--choco) url(/assets/textura_cacao.jpg) center/cover}
.prog-divider-label{font-size:.65rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:rgba(248,243,231,.92);display:block;margin-bottom:.75rem}
.prog-divider-title{font-family:var(--serif);font-size:clamp(2.5rem,6vw,5rem);font-weight:400;color:var(--cream);line-height:1;margin-bottom:.85rem}
.prog-divider-title em{font-style:italic;color:var(--aceite)}
.prog-divider-sub{font-size:.82rem;color:rgba(248,243,231,.92);letter-spacing:.08em}
.prog-divider-photo{position:relative;overflow:hidden}
.prog-divider-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prog-divider-img{display:none}

/* ── WHAT IS RTS - IMPROVED ──────────────── */
.rts-what-v2{background:var(--aceite);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.rts-what-v2-inner{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.rts-what-big-quote{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:400;font-style:italic;color:var(--cacao);line-height:1.3;border-left:4px solid var(--terra);padding-left:1.5rem;margin-bottom:1.75rem}
.rts-system-list{display:flex;flex-direction:column;gap:.7rem}
.rts-sys-item{display:flex;align-items:center;gap:1rem;background:rgba(65,44,39,.06);border-radius:var(--r8);padding:.85rem 1rem}
.rts-sys-icon{width:36px;height:36px;border-radius:50%;background:var(--cream);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.rts-sys-text{font-size:.85rem;color:var(--cacao);line-height:1.4}
.rts-sys-text strong{color:var(--cacao)}
.rts-what-v2-right{display:flex;flex-direction:column;gap:1rem}
.rts-imagine-title{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--cacao);margin-bottom:.75rem}
.rts-imagine-items{display:flex;flex-direction:column;gap:.55rem}
.rts-imagine-item{display:flex;gap:.75rem;font-size:.87rem;color:var(--choco);line-height:1.5}
.rts-imagine-check{color:var(--terra);font-weight:700;flex-shrink:0}

/* ── PROG DIVIDER 3 ──────────────────────── */
.prog-divider-3::before{background:var(--choco)}

/* ── HIPOPRESIVOS ────────────────────────── */
.hipo-intro{padding:clamp(3.5rem,8vw,6rem) var(--g);background:var(--cream)}
.hipo-intro-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;max-width:var(--max);margin-inline:auto}
.hipo-for-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:1.25rem}
.hipo-for-item{display:flex;align-items:flex-start;gap:.7rem;font-size:.84rem;color:var(--choco);line-height:1.45}
.hipo-for-mark{width:22px;height:22px;border-radius:50%;background:var(--aceite);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:.7rem;font-weight:500;color:var(--olive);margin-top:.05rem}
.hipo-experience{padding:clamp(3.5rem,8vw,6rem) var(--g);background:var(--cacao)}
.hipo-exp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;margin-top:2.5rem;max-width:var(--max);margin-inline:auto}
.hipo-exp-card{background:rgba(248,243,231,0.08);border:1px solid rgba(224,211,167,0.28);border-radius:var(--r16);padding:1.6rem}
.hipo-exp-num{font-family:var(--serif);font-size:2rem;font-weight:300;color:rgba(207,115,76,.4);line-height:1;margin-bottom:.75rem}
.hipo-exp-card p{font-size:.86rem;color:rgba(224,211,167,.88);line-height:1.65}
.hipo-exp-card strong{color:var(--cream)}
.hipo-course{padding:clamp(3.5rem,8vw,6rem) var(--g);background:var(--aceite) url(/assets/textura_aceite.jpg) center/cover}
.hipo-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;max-width:var(--max);margin-inline:auto}
.hipo-block{background:var(--cream);border-radius:var(--r16);padding:1.6rem;display:flex;flex-direction:column;gap:.75rem}
.hipo-block-num{font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--peach)}
.hipo-block-title{font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--cacao)}
.hipo-block-list{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.hipo-block-list li{font-size:.8rem;color:var(--choco);line-height:1.45;padding-left:.9rem;position:relative}
.hipo-block-list li::before{content:'—';position:absolute;left:0;color:var(--peach)}
.hipo-bonus{padding:clamp(3rem,7vw,5rem) var(--g);background:var(--cream)}
.hipo-bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem;max-width:var(--max);margin-inline:auto}
.hipo-bonus-card{border:1px solid rgba(65,44,39,.1);border-radius:var(--r16);padding:1.6rem;display:flex;flex-direction:column;gap:.75rem}
.hipo-bonus-mark{width:36px;height:36px;border-radius:50%;background:var(--aceite);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:.85rem;font-weight:500;color:var(--olive)}
.hipo-bonus-card h4{font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--cacao)}
.hipo-bonus-card p{font-size:.82rem;color:var(--choco);line-height:1.6}
.hipo-cta{background:var(--cacao) url(/assets/textura_cacao.jpg) center/cover;padding:clamp(3rem,7vw,5rem) var(--g);text-align:center}
.hipo-cta-inner{max-width:600px;margin-inline:auto;display:flex;flex-direction:column;gap:1.25rem;align-items:center}

/* ── ABOUT LANDING ───────────────────────── */
.about-landing{background:var(--cream);padding:clamp(4rem,9vw,7rem) var(--g)}
.about-landing-inner{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5.5rem);align-items:start}
.about-photos{position:sticky;top:100px;display:flex;flex-direction:column;gap:1.25rem}
.about-photo-main{width:100%;height:480px;object-fit:cover;border-radius:var(--r32)}
.about-photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.about-photo-sm{width:100%;height:180px;object-fit:cover;border-radius:var(--r16)}
.about-story{display:flex;flex-direction:column;gap:2rem}
.about-story-block{display:flex;flex-direction:column;gap:.9rem}
.about-story-block h3{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--cacao);line-height:1.15}
.about-story-block h3 em{font-style:italic;color:var(--terra)}
.about-story-block p{font-size:.93rem;line-height:1.85;color:var(--choco)}
.about-story-block em{font-family:var(--serif);font-size:1.05rem;color:var(--terra);font-style:italic}
.about-story-sep{width:2rem;height:1px;background:var(--aceite)}
.about-signature{font-family:var(--serif);font-size:1.75rem;font-style:italic;font-weight:400;color:var(--choco);margin-top:.5rem}

/* ── VIDEO GRID ──────────────────────────── */
.testi-scroll-wrap{position:relative;overflow:hidden}
.testi-scroll-wrap::before,.testi-scroll-wrap::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.testi-scroll-wrap::before{left:0;background:linear-gradient(to right,var(--cacao),transparent)}
.testi-scroll-wrap::after{right:0;background:linear-gradient(to left,var(--cacao),transparent)}
.video-grid{display:flex;gap:1rem;overflow-x:auto;padding:0 2rem 1.5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.video-grid::-webkit-scrollbar{display:none}
.video-item{flex:0 0 210px;scroll-snap-align:start;display:flex;flex-direction:column;gap:.6rem}
.video-item-frame{border-radius:var(--r12);overflow:hidden;position:relative;background:#412c27;aspect-ratio:1/1;transition:transform .25s,box-shadow .25s}
.video-item-frame:hover{transform:scale(1.02);box-shadow:0 12px 36px rgba(65,44,39,.5)}
.video-item iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

/* ── RESPONSIVE ADDITIONS ────────────────── */
@media(max-width:1024px){
  .hipo-intro-inner,.hipo-exp-grid,.hipo-blocks,.hipo-bonus-grid{grid-template-columns:1fr}
  .about-landing-inner{grid-template-columns:1fr}
  .about-photos{position:static}
  .hipo-for-grid{grid-template-columns:1fr}
}

/* ── VIDEOS ──────────────────────────────── */
.videos{background:var(--cacao);padding:clamp(4rem,9vw,7rem) var(--g)}
.videos-hd{text-align:center;margin-bottom:3rem}
.videos-hd .h-section{color:var(--cream)}

/* ── NAV DROPDOWN ────────────────────────── */
.nav-item-dropdown{position:relative}
.nav-dropdown{position:absolute;top:calc(100% + .75rem);left:50%;transform:translateX(-50%) translateY(-6px);background:var(--cream);border:1px solid rgba(65,44,39,.1);border-radius:var(--r8);padding:.5rem 0;min-width:220px;box-shadow:0 12px 40px rgba(65,44,39,.12);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s}
.nav-item-dropdown.open .nav-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dropdown a{display:block;padding:.6rem 1.1rem;font-size:.73rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--choco);transition:background .15s,color .15s;white-space:nowrap}
.nav-dropdown a:hover{background:rgba(65,44,39,.04);color:var(--peach)}
.nav-dropdown-divider{height:1px;background:rgba(65,44,39,.07);margin:.3rem 0}
.nav-dropdown-arrow{display:inline-block;margin-left:.3rem;font-size:.55rem;vertical-align:middle;transition:transform .2s}
.nav-item-dropdown.open .nav-dropdown-arrow{transform:rotate(180deg)}

/* ── LOGOS ───────────────────────────────── */
.colabs-logos{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-top:.5rem}
.colab-logo{height:36px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(100%);opacity:.55;transition:opacity .3s,filter .3s}
.colab-logo:hover{opacity:.85;filter:grayscale(0)}
.colabs-logos{display:flex;align-items:center;flex-wrap:wrap;gap:1.25rem 2.25rem;margin:1rem 0 1.5rem}
.colab-text-logo{color:var(--olive);font-size:.82rem}
.media-logos{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:0 clamp(1.5rem,3vw,3.5rem);padding:.5rem var(--g);overflow-x:auto;scrollbar-width:none}
.media-logos::-webkit-scrollbar{display:none}
.media-logos svg{flex-shrink:0}

/* ── DEBORA PHOTOS ───────────────────────── */
.hero-bg-img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.7}
.about-img-photo{width:100%;height:100%;object-fit:cover;border-radius:var(--r32)}

/* ── TEXT BALANCE ────────────────────────── */
h1,h2,h3,h4,blockquote{text-wrap:balance}
p{text-wrap:pretty}

/* ── SCROLL ANIMATIONS ───────────────────── */
/* (revelado definido más abajo como mejora progresiva) */

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;min-height:100svh;position:relative;padding-top:0;overflow:hidden}
  .hero-content{position:relative;z-index:2;padding-top:calc(62px + 2.5rem);padding-bottom:4rem;background:none}
  .hero-visual{position:absolute!important;inset:0!important;height:100%!important;min-height:unset!important;z-index:1}
  .hero-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(248,243,231,.93) 0%,rgba(248,243,231,.82) 38%,rgba(248,243,231,.5) 70%,rgba(248,243,231,.12) 100%);z-index:1;pointer-events:none}
  .hero-bg-img{object-position:50% 15% !important}
  .hero-fade{background:none}
  .pain{grid-template-columns:1fr}
  .prog-grid{grid-template-columns:1fr}
  .aa-hero-inner,.rts-hero-inner,.rts-what-v2-inner,.aa-includes-inner,.free-cta-inner,.empresas-inner,.about{grid-template-columns:1fr}
  .phases-grid,.fit-grid{grid-template-columns:1fr}
  .months-grid{grid-template-columns:1fr 1fr}
  .rts-nots,.rts-pillars{grid-template-columns:1fr 1fr}
  .rts-month{grid-template-columns:1fr}
  .rts-month-num{font-size:2rem}
  .rts-bonus-grid{grid-template-columns:1fr 1fr}
  .testi-grid,.testi-large{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .about-img{height:360px}
  .about-img-accent{display:none}
  .nav-links{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:640px){
  html,body{overflow-x:clip}
  html{font-size:15px}
  /* Secciones más compactas en móvil */
  section,.htl,.media,.prog-divider-inner{padding-top:clamp(2.5rem,10vw,3.5rem)!important;padding-bottom:clamp(2.5rem,10vw,3.5rem)!important}
  .hero{padding-top:0!important;padding-bottom:0!important}
  .strip{padding:.7rem 0!important}
  /* Menos aire entre bloques internos */
  .hipo-exp-grid,.hipo-blocks,.hipo-bonus-grid{gap:.9rem;margin-top:1.75rem}
  .prog-divider{min-height:340px}
  .months-grid,.rts-nots,.rts-pillars,.rts-bonus-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .testi-large{padding:1.5rem}
  .hero-content{padding:calc(62px + 1.75rem) var(--g) 3rem}
  .pain-visual{height:300px !important}
  .claves-grid{grid-template-columns:1fr !important}
  .hero-badge{display:none}
  .yo-fui-tu-grid{grid-template-columns:1fr !important}
  .yo-fui-tu-photo{display:none}
  .rts-what-v2-inner{grid-template-columns:1fr !important}
  .hipo-intro-inner,.hipo-exp-grid,.hipo-blocks,.hipo-bonus-grid{grid-template-columns:1fr !important}
  .prog-divider{grid-template-columns:1fr !important}
  .prog-divider-photo{display:none}
  .months-grid{grid-template-columns:1fr !important}
  .htl-track{gap:1.5rem}
  .htl-step{min-width:0}
  .empresas-img{height:auto !important;grid-template-columns:1fr !important;grid-template-rows:auto !important}
  .empresas-img-main{grid-column:1;grid-row:auto}
  .about-photos a{height:380px !important}
  .prog-divider{min-height:unset}
  .about-img{height:280px}
  .pain{padding-inline:var(--g)}
  .video-grid{padding:0 var(--g) 1.5rem}
}

/* ── ICEBERG RESPONSIVE ──────────────────── */
@media(max-width:860px){
  .iceberg .ice-grid-2col{grid-template-columns:1fr !important}
  .iceberg .ice-svg-col{display:none}
}

/* ── PROGRAM IMAGE FILTER ────────────────── */
/* Warm brand-color overlay on all prog-card images */
.prog-visual{position:relative}
.prog-visual::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(158,78,42,.28) 0%,rgba(65,44,39,.45) 100%);
  mix-blend-mode:multiply;
  pointer-events:none;z-index:1
}
.prog-visual img{filter:saturate(75%) brightness(.92)}
.prog-tag{z-index:2;position:relative}

/* ── HORIZONTAL TIMELINE ─────────────────── */
.htl{padding:clamp(2.5rem,5vw,4rem) var(--g);overflow:hidden}
.htl-inner{max-width:var(--max);margin-inline:auto}
.htl-track{display:flex;gap:0;position:relative;overflow-x:auto;padding-bottom:1rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(207,115,76,.3) transparent}
.htl-track::before{content:'';position:absolute;top:28px;left:0;right:0;height:2px;background:rgba(207,115,76,.22);z-index:0}
.htl-step{flex:1;min-width:160px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 .5rem;position:relative;z-index:1}
.htl-dot{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.15rem;font-weight:400;color:var(--cream);margin-bottom:.9rem;border:2px solid transparent;flex-shrink:0;transition:transform .2s}
.htl-step:hover .htl-dot{transform:scale(1.1)}
.htl-step-num{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--peach);margin-bottom:.3rem}
.htl-step-title{font-family:var(--serif);font-size:.95rem;font-weight:500;line-height:1.25;margin-bottom:.4rem}
.htl-step-desc{font-size:.74rem;line-height:1.5;max-width:130px}
.htl-step-result{font-size:.7rem;font-style:italic;color:var(--peach);margin-top:.5rem;line-height:1.4;max-width:130px}

/* theme variants */
.htl-cream{background:var(--cream)}
.htl-cream .htl-dot{background:var(--peach);border-color:rgba(207,115,76,.3)}
.htl-cream .htl-step-title{color:var(--cacao)}
.htl-cream .htl-step-desc{color:var(--choco)}
.htl-cream .htl-track::before{background:rgba(65,44,39,.12)}

.htl-dark{background:var(--cacao)}
.htl-dark .htl-track::before{background:rgba(224,211,167,0.08)}
.htl-dark .htl-dot{background:rgba(207,115,76,.25);border-color:rgba(207,115,76,.45)}
.htl-dark .htl-step-title{color:var(--cream)}
.htl-dark .htl-step-desc{color:rgba(224,211,167,.88)}

.htl-aceite{background:var(--aceite) url(/assets/textura_aceite.jpg) center/cover}
.htl-aceite .htl-dot{background:var(--olive);border-color:rgba(112,96,52,.4)}
.htl-aceite .htl-step-title{color:var(--cacao)}
.htl-aceite .htl-step-desc{color:var(--choco)}
.htl-aceite .htl-track::before{background:rgba(65,44,39,.15)}

/* ── RECUPERA TU CALMA SECTION ───────────── */
.calma-section{background:var(--choco);padding:clamp(4rem,9vw,7rem) var(--g)}
.calma-inner{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.calma-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(224,211,167,0.08);border:1px solid rgba(224,211,167,0.28);border-radius:100px;padding:.4rem 1rem;font-size:.63rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(224,211,167,.88);margin-bottom:1.25rem}
.calma-h{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.5rem);font-weight:400;color:var(--cream);line-height:1.08;margin-bottom:1rem}
.calma-h em{font-style:italic;color:rgba(224,211,167,.88)}
.calma-pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 1.5rem}
.calma-pill{background:rgba(224,211,167,0.08);border:1px solid rgba(224,211,167,0.28);border-radius:100px;padding:.32rem .85rem;font-size:.73rem;color:rgba(224,211,167,.88)}
.calma-img{border-radius:var(--r32);overflow:hidden;height:520px;position:relative}
.calma-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.calma-img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(65,44,39,.72) 100%)}
@media(max-width:1024px){.calma-inner{grid-template-columns:1fr}}


/* ══ SISTEMA NUEVO (hub + landings) ══════════════════════ */
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:2px}
.btn{min-height:48px;min-width:48px}
body{font-size:1rem}
.body-lg{font-size:1.05rem}

/* Revelado accesible: visible por defecto; solo anima con JS */
/* El contenido NUNCA se oculta: la entrada solo desplaza, no hace invisible.
   Un revelado por opacidad puede dejar secciones en blanco si el observador
   falla (scroll rapido, pestana en segundo plano, restauracion de sesion).
   El desplazamiento es puramente decorativo y siempre legible. */
.fade-up{opacity:1;transform:none}
html.js-anim .fade-up{transform:translateY(10px);transition:transform .45s ease}
html.js-anim .fade-up.in{transform:none}
@media(prefers-reduced-motion:reduce){
  html.js-anim .fade-up{transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* Reencuadre (home) */
.reframe{background:var(--cacao);padding:clamp(5rem,12vw,8rem) var(--g);text-align:center}
.reframe p{font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:300;color:var(--cream);line-height:1.35;max-width:820px;margin-inline:auto;text-wrap:balance}
.reframe em{font-style:italic;color:var(--aceite)}

/* Testimonios (3 tarjetas home) */
.testi3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:var(--max);margin-inline:auto}
.testi3{background:var(--cream);border:1px solid rgba(65,44,39,.1);border-radius:var(--r16);padding:1.6rem;display:flex;flex-direction:column;gap:.8rem}
.testi3 .t-who{font-family:var(--serif);font-size:1.05rem;color:var(--cacao);font-weight:500}
.testi3 .t-prod{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--terra)}
.testi3 p{font-size:1rem;color:var(--choco);line-height:1.65}
@media(max-width:860px){.testi3-grid{grid-template-columns:1fr}}

/* Elige tu camino */
.paths{padding:clamp(3.5rem,8vw,6rem) var(--g);background:var(--cream)}
.paths-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:var(--max);margin-inline:auto;margin-top:2.5rem}
.path-card{background:#fff;border:1px solid rgba(65,44,39,.12);border-radius:var(--r16);padding:1.75rem;display:flex;flex-direction:column;gap:.9rem;position:relative}
.path-card.featured{border:2px solid var(--peach);box-shadow:0 16px 48px rgba(158,78,42,.12)}
.path-tag{position:absolute;top:-0.8rem;left:1.5rem;background:var(--peach);color:var(--cacao);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .8rem;border-radius:100px}
.path-meta{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--olive)}
.path-card h3{font-family:var(--serif);font-size:1.45rem;font-weight:500;color:var(--cacao);line-height:1.15}
.path-price{font-size:1rem;font-weight:600;color:var(--terra)}
.path-card ul{list-style:none;display:flex;flex-direction:column;gap:.4rem}
.path-card li{font-size:1rem;color:var(--choco);line-height:1.5;padding-left:1.1rem;position:relative}
.path-card li::before{content:'—';position:absolute;left:0;color:var(--peach)}
.path-card .btn{margin-top:auto;justify-content:center}
@media(max-width:860px){.paths-grid{grid-template-columns:1fr}}

/* FAQ nativa */
.faq-native{max-width:780px;margin-inline:auto;margin-top:2.5rem;display:flex;flex-direction:column;border:1px solid rgba(65,44,39,.12);border-radius:var(--r16);overflow:hidden;background:#fff}
.faq-native details{border-bottom:1px solid rgba(65,44,39,.08)}
.faq-native details:last-child{border-bottom:none}
.faq-native summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.5rem;font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--cacao)}
.faq-native summary::-webkit-details-marker{display:none}
.faq-native summary::after{content:'+';font-size:1.3rem;color:var(--terra);flex-shrink:0;transition:transform .2s}
.faq-native details[open] summary::after{transform:rotate(45deg)}
.faq-native .faq-body{padding:0 1.5rem 1.25rem;font-size:1rem;color:var(--choco);line-height:1.7}

/* Formulario de captura */
.lead-form{display:flex;flex-direction:column;gap:.8rem;max-width:440px}
.lead-form label{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cacao)}
.lead-form input[type=text],.lead-form input[type=email]{width:100%;padding:.85rem 1rem;border:1.5px solid rgba(65,44,39,.25);border-radius:var(--r8);font-family:var(--sans);font-size:1rem;color:var(--cacao);background:var(--cream)}
.lead-form input:focus{border-color:var(--terra)}
.lead-form .consent-row{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;color:var(--choco);line-height:1.5}
.lead-form .consent-row input{width:18px;height:18px;margin-top:.15rem;accent-color:var(--terra)}
.lead-form .consent-row a{text-decoration:underline;color:var(--aceite)}

/* Doble puerta */
.double-gate{background:var(--cacao);padding:clamp(4rem,9vw,7rem) var(--g)}
.double-gate-inner{max-width:var(--max);margin-inline:auto;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.gate-high h2{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:400;color:var(--cream);line-height:1.15;margin-bottom:1rem}
.gate-high p{font-size:1.05rem;color:rgba(224,211,167,.88);line-height:1.7;max-width:480px;margin-bottom:1.5rem}
.gate-low{background:rgba(248,243,231,0.07);border:1px solid rgba(224,211,167,0.28);border-radius:var(--r16);padding:1.75rem}
.gate-low h3{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--cream);margin-bottom:.5rem}
.gate-low>p{font-size:.95rem;color:rgba(248,243,231,0.92);line-height:1.6;margin-bottom:1.1rem}
.gate-low label{color:var(--cream)}
.gate-low input[type=text],.gate-low input[type=email]{background:var(--cream)}
.gate-low .consent-row{color:rgba(248,243,231,0.9)}
@media(max-width:900px){.double-gate-inner{grid-template-columns:1fr}}

/* Barra CTA fija móvil */
.cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--cream);border-top:1px solid rgba(65,44,39,.15);padding:.6rem var(--g) calc(.6rem + env(safe-area-inset-bottom));display:none;transform:translateY(110%);transition:transform .3s ease}
.cta-sticky.show{transform:none}
.cta-sticky .btn{width:100%;justify-content:center}
@media(max-width:700px){.cta-sticky{display:block}}

/* Banner de consentimiento */
.consent-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:400;background:var(--cacao);color:var(--cream);border-radius:var(--r16);padding:1.25rem 1.5rem;max-width:520px;box-shadow:0 20px 60px rgba(65,44,39,.35);display:none}
.consent-banner.show{display:block}
.consent-banner p{font-size:.9rem;line-height:1.6;color:rgba(248,243,231,.92);margin-bottom:1rem}
.consent-banner a{text-decoration:underline;color:var(--aceite)}
.consent-actions{display:flex;gap:.7rem;flex-wrap:wrap}
/* El outline por defecto va en Cacao, que es el fondo del propio banner:
   sobre él el botón desaparecía. Aquí se invierte a Hueso. */
.consent-banner .btn-outline{color:var(--cream);border-color:rgba(248,243,231,.55)}
.consent-banner .btn-outline:hover{background:rgba(248,243,231,.12);border-color:var(--cream)}
.consent-actions .btn{min-height:44px;padding:.6rem 1.3rem;font-size:.8rem}

/* Facade de vídeo */
.video-facade{position:relative;cursor:pointer;border:0;padding:0;display:block;width:100%;aspect-ratio:1/1;background:var(--cacao);border-radius:var(--r12,12px);overflow:hidden}
.video-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.video-facade .vf-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video-facade .vf-play span{width:58px;height:58px;border-radius:50%;background:rgba(248,243,231,.95);display:flex;align-items:center;justify-content:center}

/* Páginas legales */
.legal-wrap{max-width:760px;margin-inline:auto;padding:8rem var(--g) 4rem}
.legal-wrap h1{font-family:var(--serif);font-size:2.2rem;font-weight:500;color:var(--cacao);margin-bottom:1.5rem}
.legal-wrap h2{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--cacao);margin:2rem 0 .75rem}
.legal-wrap p,.legal-wrap li{font-size:1rem;color:var(--choco);line-height:1.75;margin-bottom:.8rem}

/* Landing: quitar dropdowns del nav (páginas de producto) */
.nav-simple .nav-links{gap:1.6rem}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--terra);color:var(--cream);padding:.7rem 1.2rem;z-index:500;border-radius:0 0 var(--r8) 0}
.skip-link:focus{left:0}

/* ══ HOME: ritmo vertical más contenido (objetivo <9000px) ══ */
body.home .pain{padding-block:clamp(3rem,6vw,4.5rem)}
body.home .reframe{padding-block:clamp(3.5rem,8vw,5.5rem)}
body.home .paths{padding-block:clamp(3rem,6vw,4.5rem)}
body.home .iceberg{padding-block:clamp(3rem,6vw,4.5rem)}
body.home .videos{padding-block:clamp(3rem,6vw,4.5rem)}
body.home .double-gate{padding-block:clamp(3rem,6vw,4.5rem)}
body.home .videos .video-item{flex:0 0 180px}
body.home .iceberg-hd{margin-bottom:2.25rem}

/* ══ CONTRASTE AA — correcciones vinculantes ══════════════════════ */
/* El botón dentro del nav no debe heredar color/tamaño de .nav-links a */
.nav-links a.btn,
.nav-mobile a.btn{
  font-size:.9375rem;          /* 15px mínimo */
  color:var(--cream);          /* Hueso sobre Terracota = 5,30 */
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nav-links a.btn-primary,
.nav-mobile a.btn-primary{background:var(--terra);color:var(--cream)}
.nav-links a.btn-primary:hover,
.nav-mobile a.btn-primary:hover{background:var(--cacao);color:var(--cream)}

/* Antetítulos: Terracota (5,30) y 12px mínimo — nunca Melocotón sobre Hueso */
.eyebrow{color:var(--terra);font-size:.75rem}
.eyebrow::before{background:var(--terra)}
/* Sobre fondo oscuro el antetítulo va en Aceite (8,70 sobre Cacao) */
.aa-truth .eyebrow,.videos-hd .eyebrow,.iceberg .eyebrow,
section[style*="var(--cacao)"] .eyebrow,
.gate-high .eyebrow,.rts-hero .eyebrow,.calma-section .eyebrow,
.hipo-experience .eyebrow,.hipo-cta .eyebrow{color:var(--aceite)}

/* Marcas e iniciales: Cacao sobre Aceite (8,70) en vez de Oliva (4,12) */
.av{color:var(--cacao);font-size:.68rem}
.pain-mark,.hipo-for-mark,.rts-not-mark{color:var(--cacao)}

/* Cita sobre Terracota: Hueso (5,30) en vez de Aceite (3,93) */
.pain-pull p{color:var(--cream)}

/* Cuerpo mínimo 16px */
body{font-size:1rem}
.body-lg{font-size:1.0625rem}
/* ══ PULIDO AA (auto) ══ */
/* Etiqueta destacada: Hueso sobre Terracota (5,30) en vez de Cacao sobre Melocotón (3,85) */
.path-tag{background:var(--terra);color:var(--cream)}

/* Antetítulo sobre cualquier fondo oscuro → Aceite (8,70 sobre Cacao) */
.iceberg .eyebrow,.videos .eyebrow,.videos-hd .eyebrow,.gate-high .eyebrow,
.aa-truth .eyebrow,.rts-hero .eyebrow,.calma-section .eyebrow,.hipo-experience .eyebrow,
.hipo-cta .eyebrow,.free-cta .eyebrow,.prog-divider .eyebrow,
.on-dark .eyebrow{color:var(--aceite)}

/* Credenciales: Cacao sobre Aceite (8,70) en vez de Oliva (4,12) */
.cred{color:var(--cacao)}

/* Enlaces dentro de bloques oscuros del formulario */
.gate-low a,.consent-row a,.lead-form .consent-row a{color:var(--aceite);text-decoration:underline}
.gate-low a:hover,.consent-row a:hover{color:var(--cream)}

/* Pie: legales y meta legibles */
.footer-bot p{color:rgba(224,211,167,0.82)}
.footer-legal a{color:rgba(224,211,167,0.82)}
.footer-legal a:hover{color:var(--cream)}
.media-lbl{color:rgba(224,211,167,0.8)}

/* Rótulos de testimonio en vídeo */
.video-item p{color:rgba(224,211,167,0.85)}

/* Foco visible en Terracota, 2px */
a:focus-visible,button:focus-visible,input:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--terra);outline-offset:3px;border-radius:2px;
}
.gate-low a:focus-visible,.footer a:focus-visible,
.prog-divider a:focus-visible,.iceberg a:focus-visible{outline-color:var(--aceite)}


/* ── Ciclo ALIMENT-ARTE: sobre Cacao el texto va en Aceite/Hueso ── */
.aa-cycle .cycle-step-glyph,.aa-cycle .cycle-step-name,
.aa-cycle strong,.cycle-step-glyph,.cycle-step-name{color:var(--aceite)}
.cycle-arrow-row{color:rgba(224,211,167,0.8)}
.aa-cycle em,.aa-truth em{color:var(--aceite)}

/* ── Tarjetas de mes: sobre Hueso/Aceite ── */
.month-num{color:var(--cacao)}
.month-label{color:var(--terra)}
.month-phase-badge{background:var(--terra);color:var(--cream)}

/* ── Antetitulo sobre Aceite: Terracota da 3,93 -> Cacao (8,70) ── */
.aa-months .eyebrow,.aa-fit .eyebrow,.hipo-course .eyebrow,
.rts-what .eyebrow,.htl-aceite .eyebrow{color:var(--cacao)}

/* ── Enfasis sobre fondos oscuros ── */
.prog-divider em,.hipo-cta em,.rts-cta em,.calma-section em{color:var(--aceite)}


/* ── Enfasis sobre fondo Aceite: Melocoton da 2,26 -> Terracota ── */
.aa-months em,.aa-fit em,.hipo-course em,.rts-what em,
.htl-aceite em,.rts-cta em,.aa-months h2 em,.aa-fit h2 em{color:var(--terra)}


/* ── Sobre OLIVA el texto va en Hueso (5,56). Aceite sobre Oliva = 4,12: no cumple ── */
.rts-hero .eyebrow,.rts-hero .rts-sub,.rts-hero .rts-body,.rts-hero .rts-feeling,
.rts-hero p,.rts-hero li,.rts-hero span,.rts-hero strong,.rts-hero em,
.prog-divider-2 .prog-divider-inner p,.prog-divider-2 .prog-divider-inner span,
.prog-divider-4 .prog-divider-inner p,.prog-divider-4 .prog-divider-inner span{
  color:var(--cream);
}
.rts-hero .rts-body,.rts-hero .rts-feeling,.rts-hero p{color:rgba(248,243,231,0.92)}
.rts-hero .rts-tried p{color:rgba(248,243,231,0.9)}
.rts-hero .rts-not-mark,.rts-hero .rts-dot{color:var(--cream)}


/* ── Refuerzo: Oliva y Aceite como fondos ── */
/* Sobre Oliva -> Hueso (5,56) */
.rts-hero *,.prog-divider-2 .prog-divider-inner *{color:inherit}
.rts-hero,.prog-divider-2 .prog-divider-inner{color:var(--cream)}
.rts-hero .eyebrow,.prog-divider-2 .prog-divider-label{color:var(--cream)}

/* Sobre Aceite -> Cacao (8,70). Terracota sobre Aceite = 3,93: insuficiente */
.rts-what .eyebrow,.rts-what .rts-what-label,.rts-what li,.rts-what span,
.rts-what-v2 .eyebrow,.rts-what-v2 span,.rts-what-v2 li,
.aa-months .month-label,.aa-fit li,.aa-fit span{color:var(--cacao)}


/* ── Correccion de color en linea segun el fondo real de la seccion ──
   Los bloques heredados traen color en linea; el fondo manda sobre el tono.
   Se usa !important solo aqui, para vencer al atributo style. */

/* Fondo OLIVA -> Hueso (5,56). Aceite sobre Oliva seria 4,12 */
.rts-hero .eyebrow,
.rts-hero [style*="--aceite"]{color:var(--cream) !important}

/* Fondo ACEITE -> Cacao (8,70). Terracota sobre Aceite seria 3,93 */
.rts-what-v2 .eyebrow,.rts-what-v2 .rts-sys-icon,
.aa-months .eyebrow,.aa-months [style*="--terra"],
.aa-fit .eyebrow,.aa-fit [style*="--terra"],
.hipo-course .eyebrow,.hipo-course [style*="--terra"],
.rts-bonus .eyebrow,.rts-bonus [style*="--terra"]{color:var(--cacao) !important}


/* ── Recorrido de meses (RESETEA, fondo Cacao) ── */
.rts-month-num{color:rgba(224,211,167,0.55) !important}   /* decorativo, gran tamano */
.rts-month-tag{color:var(--aceite) !important}
.rts-journey .rts-month-tag,.rts-journey .eyebrow{color:var(--aceite) !important}
/* Cacao sobre Terracota no cumple: etiqueta del divisor en Hueso */
.prog-divider-sub,.prog-divider-inner .prog-divider-sub{color:rgba(248,243,231,0.92)}
.prog-divider-inner [style*="--cacao"]{color:var(--cream) !important}


/* ── Bonus RESETEA (fondo Hueso): Aceite sobre Hueso = 1,35 ── */
.rts-bonus-num{color:var(--terra) !important}
/* ── Etiqueta "3 meses" del divisor: Cacao sobre Oliva = 2,22 ── */
.prog-divider-2 .prog-divider-inner *,
.prog-divider-4 .prog-divider-inner *{color:var(--cream)}
.prog-divider-2 .prog-divider-title,.prog-divider-4 .prog-divider-title{color:var(--cream)}


/* <strong> sobre fondo oscuro hereda Cacao por defecto: forzar herencia del padre */
.rts-journey strong,.rts-hero strong,.calma-section strong,
.prog-divider strong,.hipo-cta strong,.aa-truth strong,
.videos strong,.iceberg strong,.gate-high strong{color:inherit}


/* ── Fondo CHOCOLATE: Hueso da 6,85; Aceite se queda en ~5,5 y con alfa baja ── */
.calma-section p,.calma-section li,.calma-section span,
.calma-section .calma-badge,.calma-section .calma-pill,
.calma-section div{color:rgba(248,243,231,0.92)}
.calma-section .eyebrow,.calma-section .calma-badge{color:var(--cream)}
.calma-section h2,.calma-section h3,.calma-section h4{color:var(--cream)}
.prog-divider-4 .prog-divider-inner *{color:var(--cream)}


/* Vence a los rgba en linea heredados dentro de secciones Chocolate */
.calma-section [style*="rgba(224,211,167"],
.calma-section [style*="rgba(224, 211, 167"],
.hipo-cta [style*="rgba(224,211,167"],
.hipo-cta [style*="rgba(224, 211, 167"]{color:rgba(248,243,231,0.93) !important}


/* Numeros grandes decorativos de las tarjetas: legibles sobre Cacao */
.hipo-exp-num{color:rgba(224,211,167,0.65) !important}
/* Nota de CTA sobre Chocolate/Cacao */
.hipo-cta-inner p,.rts-cta-inner p,.calma-cta p{color:rgba(248,243,231,0.92)}
.cta-band-note,.free-note{color:rgba(248,243,231,0.9)}


/* Etiqueta de bloque sobre fondo Hueso: Melocoton da 3,05 -> Terracota (5,30) */
.hipo-block-num{color:var(--terra) !important}
/* Nota del CTA sobre Chocolate */
.cta-band p,section[style*="--choco"] p{color:rgba(248,243,231,0.92)}

/* Marca de bonus: circulo Aceite sobre Hueso -> texto en Cacao (8,70) */
.hipo-bonus-mark{color:var(--cacao) !important}
.rts-bonus-num{color:var(--terra) !important}


/* Enfasis dentro del relato sobre fondo Hueso: Melocoton 3,05 -> Terracota 5,30 */
.about-landing em,.about-story-block em,.about-landing p em{color:var(--terra)}

/* <strong> hereda siempre el color de su contenedor (evita Cacao sobre oscuro) */
.rts-journey strong,.rts-month strong,.rts-month-body strong{color:inherit !important}

/* Regla general: <strong> nunca impone color propio; hereda el del contexto */
strong,b{color:inherit}

/* Lista de sistemas sobre Aceite: el contenedor fija Cacao y strong hereda */
.rts-what-v2 .rts-sys-text,.rts-what-v2 .rts-sys-item,
.rts-what-v2 .rts-sys-list,.rts-what-v2 .rts-sys-note{color:var(--cacao)}


/* ── Facade de video: poster real + boton de play ── */
.video-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  background:var(--cacao);cursor:pointer;display:block;overflow:hidden}
.vf-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease,filter .35s ease}
.video-facade:hover .vf-poster{transform:scale(1.04);filter:brightness(1.06)}
.vf-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.vf-play>span{width:56px;height:56px;border-radius:50%;background:rgba(248,243,231,.95);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(65,44,39,.35);
  transition:transform .25s ease}
.video-facade:hover .vf-play>span{transform:scale(1.08)}
.video-facade:focus-visible{outline:3px solid var(--aceite);outline-offset:-3px}

/* Enlace dentro de la tarjeta de testimonio */
.testi3 .t-link{display:inline-block;margin-top:.9rem;color:var(--terra);font-size:.85rem;
  font-weight:600;text-decoration:underline;text-underline-offset:3px}
.testi3 .t-link:hover{color:var(--cacao)}


/* ── Precios ── */
.path-price .precio-antes,.precio-grande .precio-antes{
  text-decoration:line-through;opacity:.62;font-weight:400;margin-right:.35rem}
.path-price strong,.precio-grande strong{font-weight:700}
.precio-nota{font-size:.78rem;opacity:.8}
.precio-box{max-width:640px;margin-inline:auto;text-align:center;
  background:var(--aceite);border-radius:var(--r32);padding:clamp(2rem,5vw,3rem)}
.precio-grande{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.2rem);
  color:var(--cacao);line-height:1;margin:.5rem 0 .35rem}
.precio-nota-grande{font-size:.9rem;color:var(--terra);font-weight:600;margin-bottom:1.25rem}
.precio-lista{list-style:none;display:flex;flex-direction:column;gap:.55rem;
  text-align:left;max-width:420px;margin:0 auto 1.5rem}
.precio-lista li{font-size:.95rem;color:var(--cacao);line-height:1.5;padding-left:1.4rem;position:relative}
.precio-lista li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;
  border-radius:50%;background:var(--terra)}
.precio-box .eyebrow{color:var(--cacao)}
.precio-box em{color:var(--terra)}


/* ══ TEST DEL SISTEMA NERVIOSO ══════════════════════════════════ */
.test-intro,.test-quiz,.test-result{background:var(--cacao);
  padding:clamp(6rem,12vw,8rem) var(--g) clamp(4rem,9vw,6rem);min-height:70vh}
.test-wrap{max-width:720px;margin-inline:auto}
.test-intro h1{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.2rem);font-weight:400;
  color:var(--cream);line-height:1.12;margin:.6rem 0 1.25rem}
.test-intro h1 em{font-style:italic;color:var(--aceite)}
/* Sobre Cacao, Terracota se queda en 2,22: el antetitulo va en Aceite */
.test-intro .eyebrow,.test-quiz .eyebrow,.test-result .eyebrow{color:var(--aceite)}
.test-lead{font-size:1.05rem;color:rgba(248,243,231,0.92);line-height:1.75;margin-bottom:1rem}
.test-nota{font-size:.88rem;color:rgba(248,243,231,0.75);margin-top:.9rem}
.test-intro .btn{margin-top:.75rem}

.test-progress{margin-bottom:2rem}
.test-progress-bar{height:4px;background:rgba(248,243,231,0.18);border-radius:4px;overflow:hidden}
.test-progress-bar span{display:block;height:100%;width:16.6%;background:var(--peach);
  border-radius:4px;transition:width .35s ease}
.test-step{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(248,243,231,0.8);margin-top:.7rem}

#test-form fieldset{border:0;padding:0;margin:0}
#test-form legend{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);font-weight:400;
  color:var(--cream);line-height:1.25;margin-bottom:1.5rem;padding:0}
.test-op{display:flex;align-items:flex-start;gap:.9rem;padding:1.05rem 1.25rem;margin-bottom:.7rem;
  background:rgba(248,243,231,0.06);border:1px solid rgba(224,211,167,0.24);
  border-radius:var(--r12,12px);cursor:pointer;transition:background .2s,border-color .2s;
  min-height:48px;color:rgba(248,243,231,0.95);font-size:1rem;line-height:1.5}
.test-op:hover{background:rgba(248,243,231,0.11);border-color:var(--aceite)}
.test-op.sel{background:rgba(207,115,76,0.22);border-color:var(--peach)}
.test-op input{margin-top:.28rem;accent-color:var(--peach);width:18px;height:18px;flex-shrink:0}
.test-op:focus-within{outline:2px solid var(--aceite);outline-offset:2px}
.test-nav{margin-top:1.25rem}
#test-prev{font-size:.85rem}

.test-result h2{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.8rem);font-weight:400;
  color:var(--cream);line-height:1.15;margin:.5rem 0 1.1rem}
.res-detail{background:rgba(248,243,231,0.07);border-left:3px solid var(--peach);
  border-radius:0 var(--r8) var(--r8) 0;padding:1.1rem 1.35rem;margin:1.5rem 0 2rem}
.res-detail p{font-size:1rem;color:rgba(248,243,231,0.92);line-height:1.7}
.res-rec{background:rgba(248,243,231,0.07);border:1px solid rgba(224,211,167,0.28);
  border-radius:var(--r16);padding:1.75rem;margin-bottom:2rem}
.res-rec-label{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--aceite);margin-bottom:.5rem}
.res-rec h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--cream);margin-bottom:.6rem}
.res-rec p{font-size:1rem;color:rgba(248,243,231,0.92);line-height:1.7}
.res-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.35rem 0 .5rem}
.res-gate{margin-top:1rem}
.test-reset{display:block;margin:2rem auto 0;background:none;border:0;
  color:rgba(248,243,231,0.8);font-family:var(--sans);font-size:.88rem;
  text-decoration:underline;cursor:pointer;padding:.6rem;min-height:44px}
.test-reset:hover{color:var(--cream)}
@media(max-width:640px){
  .test-intro,.test-quiz,.test-result{padding-top:calc(62px + 2rem)}
  .res-actions .btn{width:100%;justify-content:center}
}

/* Home: las FAQ con respuestas largas necesitan algo menos de aire alrededor */
body.home .faq-native{margin-top:1.75rem}
body.home .faq-native summary{padding-block:1rem}
body.home section:has(.faq-native){padding-block:clamp(2.75rem,6vw,4rem)}

body.home .videos{padding-block:clamp(2.5rem,5vw,3.5rem)}
body.home .double-gate{padding-block:clamp(2.5rem,5vw,3.75rem)}
body.home .reframe{padding-block:clamp(3rem,6vw,4.5rem)}

/* ── Cita central: medida corta y saltos por unidad de sentido ── */
.reframe p{max-width:19ch;font-size:clamp(1.55rem,3.6vw,2.6rem);line-height:1.28;
  text-wrap:balance;letter-spacing:-.01em}
.reframe .reframe-cierre{margin-top:1.15em;max-width:21ch}
/* En pantallas anchas caben mas palabras por linea: los <br> finos desaparecen */
.br-fina{display:none}
@media(min-width:900px){
  .reframe p{max-width:28ch}
  .reframe .reframe-cierre{max-width:30ch}
}
@media(max-width:560px){
  .reframe p{max-width:100%;font-size:clamp(1.35rem,6vw,1.75rem)}
  .br-fina{display:inline}
  .reframe p br:not(.br-fina){display:none}
}

/* Bloque alternativo del resultado: la sesion de claridad siempre a mano */
.res-alt{border:1px dashed rgba(224,211,167,0.4);border-radius:var(--r16);
  padding:1.4rem 1.6rem;margin-bottom:2rem}
.res-alt p{font-size:.98rem;color:rgba(248,243,231,0.9);line-height:1.65;margin-bottom:1rem}
.res-alt[hidden]{display:none}
.test-intro .test-nota a{color:var(--aceite);text-decoration:underline}
.test-intro .test-nota a:hover{color:var(--cream)}

/* Boton contorno sobre fondo oscuro: Cacao sobre Cacao es invisible */
.test-result .btn-outline,.res-alt .btn-outline,.gate-high .btn-outline,
.calma-section .btn-outline,.prog-divider .btn-outline,.hipo-cta .btn-outline,
.double-gate .btn-outline,.test-intro .btn-outline,.test-quiz .btn-ghost{
  color:var(--cream);border:1px solid var(--aceite);background:transparent}
.test-result .btn-outline:hover,.res-alt .btn-outline:hover,
.gate-high .btn-outline:hover,.double-gate .btn-outline:hover{
  background:var(--aceite);color:var(--cacao)}
.test-quiz .btn-ghost{color:rgba(248,243,231,0.85);border:1px solid rgba(224,211,167,0.4)}
.test-quiz .btn-ghost:hover{color:var(--cream);border-color:var(--aceite)}


/* ══ LANDINGS DE CURSO: bloques nuevos ══════════════════════════ */
/* Garantías bajo el hero */
.hero-garantias{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.4rem;padding:0}
.hero-garantias li{font-size:.82rem;color:rgba(248,243,231,.9);
  border:1px solid rgba(224,211,167,.4);border-radius:100px;padding:.35rem .85rem}

/* Línea de tiempo de resultados */
.linea-tiempo{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.5rem;
  max-width:var(--max);margin-inline:auto}
.lt-hito{background:var(--cream);border-radius:var(--r16);padding:1.5rem 1.35rem;
  border-top:3px solid var(--terra)}
.lt-cuando{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin-bottom:.6rem}
.lt-hito h3{font-family:var(--serif);font-size:1.12rem;font-weight:500;color:var(--cacao);
  line-height:1.25;margin-bottom:.5rem}
.lt-hito p{font-size:.92rem;color:var(--choco);line-height:1.6}

/* Intro de cada módulo */
.hipo-block-intro{font-size:.92rem;color:var(--choco);line-height:1.6;margin-bottom:.25rem}

/* Características del curso */
.curso-features{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem .9rem;margin:2rem auto 0;max-width:760px;padding:0}
.curso-features li{font-size:.88rem;color:var(--cacao);background:var(--aceite);
  border-radius:100px;padding:.42rem 1rem}

/* Valor de cada bonus */
.bonus-valor{font-size:.82rem;font-weight:600;color:var(--terra);margin-top:.35rem}

/* Patrones de por qué no funcionó */
.patrones{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;
  max-width:var(--max);margin:0 auto}
.patron{background:rgba(248,243,231,.07);border:1px solid rgba(224,211,167,.24);
  border-radius:var(--r16);padding:1.6rem}
.patron h4{font-family:var(--serif);font-size:1.12rem;font-weight:500;color:var(--cream);
  margin-bottom:.6rem;line-height:1.3}
.patron p{font-size:.95rem;color:rgba(248,243,231,.9);line-height:1.7}

/* Filtro sí / no */
.fit-col{background:var(--cream);border-radius:var(--r16);padding:1.75rem}
.fit-title{font-family:var(--serif);font-size:1.25rem;font-weight:500;margin-bottom:1rem}
.fit-title.si{color:var(--olive)}
.fit-title.no{color:var(--terra)}
.fit-list{list-style:none;display:flex;flex-direction:column;gap:.7rem;padding:0}
.fit-list li{font-size:.95rem;color:var(--choco);line-height:1.6;padding-left:1.5rem;position:relative}
.fit-title.si+.fit-list li::before{content:'→';position:absolute;left:0;color:var(--olive);font-weight:600}
.fit-title.no+.fit-list li::before{content:'→';position:absolute;left:0;color:var(--terra);font-weight:600}

/* Desglose de precio */
.precio-tabla{width:100%;max-width:420px;margin:0 auto 1.5rem;border-collapse:collapse;text-align:left}
.precio-tabla td{font-size:.92rem;color:var(--choco);padding:.5rem 0;
  border-bottom:1px solid rgba(65,44,39,.1)}
.precio-tabla td:last-child{text-align:right;font-weight:600;color:var(--cacao);white-space:nowrap}
.precio-tabla .precio-total td{font-weight:700;color:var(--cacao);border-bottom:0;padding-top:.8rem}
.precio-tabla .precio-total td:last-child{text-decoration:line-through;opacity:.82}

/* Sello de garantía */
.garantia-box{display:flex;align-items:center;gap:1.1rem;margin-top:1.75rem;
  background:var(--aceite);border-radius:var(--r16);padding:1.2rem 1.35rem;text-align:left}
.garantia-sello{flex-shrink:0;width:64px;height:64px;border-radius:50%;background:var(--terra);
  color:var(--cream);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:.95rem;font-weight:600;line-height:1.1;text-align:center}
.garantia-box p{font-size:.9rem;color:var(--cacao);line-height:1.6}

@media(max-width:900px){
  .linea-tiempo{grid-template-columns:repeat(2,1fr)}
  .patrones{grid-template-columns:1fr}
}
@media(max-width:640px){
  .linea-tiempo{grid-template-columns:1fr}
  .fit-grid{grid-template-columns:1fr}
  .hipo-bonus-grid,.hipo-blocks{grid-template-columns:1fr!important}
  .garantia-box{flex-direction:column;text-align:center}
}


/* ══ SOBRE MÍ ═══════════════════════════════════════════════════ */
.sm-hero{background:var(--cacao);padding:clamp(6rem,12vw,9rem) var(--g) clamp(3.5rem,8vw,6rem)}
.sm-hero-inner{max-width:var(--max);margin-inline:auto;display:grid;
  grid-template-columns:1.15fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.sm-hero h1{font-family:var(--serif);font-size:clamp(2.1rem,4.8vw,3.6rem);font-weight:400;
  color:var(--cream);line-height:1.12;margin:.6rem 0 1.25rem}
.sm-hero h1 em{font-style:italic;color:var(--aceite)}
.sm-lead{font-size:1.08rem;color:rgba(248,243,231,.92);line-height:1.8;margin-bottom:.9rem;max-width:480px}
.sm-hero-foto img{width:100%;height:520px;object-fit:cover;object-position:center 15%;
  border-radius:var(--r32)}

.sm-historia{background:var(--cream);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.sm-historia-inner{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;gap:3rem}
.sm-cap{position:relative;padding-left:3.5rem}
.sm-cap-num{position:absolute;left:0;top:.15rem;font-family:var(--serif);font-size:1.5rem;
  font-weight:400;color:var(--terra);opacity:.75}
.sm-cap h2{font-family:var(--serif);font-size:clamp(1.45rem,3vw,2rem);font-weight:500;
  color:var(--cacao);line-height:1.2;margin-bottom:.9rem}
.sm-cap p{font-size:1.05rem;color:var(--choco);line-height:1.85;margin-bottom:.9rem}
.sm-cap em{font-style:italic;color:var(--terra)}
.sm-quote{font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--terra);
  line-height:1.55;border-left:3px solid var(--terra);padding-left:1.2rem;margin-top:1.2rem}
.sm-quote.clara{color:var(--aceite);border-left-color:var(--aceite)}
.sm-firma{font-family:var(--serif);font-size:1.15rem;font-style:italic;color:var(--cacao);margin-top:.5rem}


.sm-metodo{background:var(--cacao);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.sm-metodo-inner{max-width:var(--max);margin-inline:auto;display:grid;
  grid-template-columns:1.1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.sm-metodo-txt{font-size:1.05rem;color:rgba(248,243,231,.92);line-height:1.8;margin-bottom:.9rem}
.sm-metodo-foto img{width:100%;height:440px;object-fit:cover;border-radius:var(--r32)}

@media(max-width:900px){
  .sm-hero-inner,.sm-cred-inner,.sm-metodo-inner{grid-template-columns:1fr}
  .sm-hero-foto img{height:380px}
  .sm-metodo-foto{order:-1}
  .sm-metodo-foto img{height:320px}
}
@media(max-width:640px){
  .sm-cap{padding-left:2.6rem}
  .sm-historia-inner{gap:2.25rem}
}

/* Antetitulo sobre Cacao en Sobre mi: Terracota da 2,22 -> Aceite (8,70) */
.sm-hero .eyebrow,.sm-metodo .eyebrow{color:var(--aceite)}



/* .btn-ghost es para fondos oscuros; sobre Hueso hay que invertirlo */
.sm-donde .btn-ghost{color:var(--terra);border-color:var(--terra);background:transparent}
.sm-donde .btn-ghost:hover{background:var(--terra);color:var(--cream)}


/* ══ EMPRESAS ══════════════════════════════════════════════════ */
.emp-hero{background:var(--cream) url(/assets/textura_hueso.jpg) center/cover;
  padding:clamp(6rem,12vw,9rem) var(--g) clamp(3.5rem,8vw,6rem)}
.emp-hero-inner{max-width:var(--max);margin-inline:auto;display:grid;
  grid-template-columns:1.1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.emp-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.8rem);font-weight:400;
  color:var(--cream);line-height:1.1;margin:.6rem 0 1.25rem}
.emp-hero h1 em{font-style:italic;color:var(--aceite)}
.emp-lead{font-size:1.08rem;color:rgba(248,243,231,.92);line-height:1.8;max-width:500px}
.emp-nota{font-size:.85rem;color:rgba(248,243,231,.72);letter-spacing:.05em;margin-top:1.25rem}
.emp-hero-foto img{width:100%;height:420px;object-fit:cover;border-radius:var(--r32)}

.emp-problema{background:var(--aceite) url(/assets/textura_aceite.jpg) center/cover;padding:clamp(3.5rem,8vw,6rem) var(--g)}
.emp-problema-inner{max-width:var(--max);margin-inline:auto}
.emp-sintomas{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.5rem}
.emp-sintoma{background:var(--cream);border-radius:var(--r16);padding:1.6rem 1.45rem;
  border:1px solid rgba(158,78,42,.18);box-shadow:0 6px 22px rgba(65,44,39,.10)}
.emp-sintoma span{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--terra);margin-bottom:.6rem}
.emp-sintoma p{font-size:.95rem;color:var(--cacao);line-height:1.6}

.emp-formatos{background:var(--choco) url(/assets/textura_choco.jpg) center/cover;padding:clamp(3.5rem,8vw,6rem) var(--g)}
.emp-formatos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
  margin-top:2.5rem;max-width:var(--max);margin-inline:auto}
.emp-formato{background:rgba(248,243,231,0.07);border:1px solid rgba(224,211,167,0.28);
  border-radius:var(--r16);padding:1.75rem}
.emp-formato.destacado{border-color:var(--peach);background:rgba(207,115,76,0.14)}
.emp-formato-meta{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--aceite);margin-bottom:.5rem}
.emp-formato h3{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--cream);margin-bottom:.7rem}
.emp-formato>p{font-size:.97rem;color:rgba(248,243,231,.9);line-height:1.7;margin-bottom:1rem}
.emp-formato ul{list-style:none;display:flex;flex-direction:column;gap:.45rem;padding:0}
.emp-formato li{font-size:.88rem;color:rgba(224,211,167,.9);line-height:1.5;padding-left:1.1rem;position:relative}
.emp-formato li::before{content:'—';position:absolute;left:0;color:var(--peach)}

.emp-temas{background:var(--cream);
  padding:clamp(3.5rem,8vw,6rem) var(--g)}
.emp-temas-inner{max-width:var(--max);margin-inline:auto;display:grid;
  grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.emp-temas .eyebrow{color:var(--cacao)}
.emp-temas-fotos{display:grid;gap:1rem}
.emp-temas-fotos img{width:100%;height:230px;object-fit:cover;border-radius:var(--r16)}
.emp-tema{padding:1.1rem 0;border-bottom:1px solid rgba(65,44,39,.14)}
.emp-tema:last-child{border-bottom:0}
.emp-tema h3{font-family:var(--serif);font-size:1.18rem;font-weight:500;color:var(--cacao);margin-bottom:.35rem}
.emp-tema p{font-size:.95rem;color:var(--choco);line-height:1.65}

.emp-confianza{background:var(--cream);padding:clamp(2rem,4vw,3rem) var(--g) clamp(3rem,7vw,5rem)}
.emp-proceso{background:var(--cacao) url(/assets/textura_cacao.jpg) center/cover;padding:clamp(3.5rem,8vw,6rem) var(--g)}
.emp-proceso .linea-tiempo{grid-template-columns:repeat(3,1fr)}

@media(max-width:900px){
  .emp-hero-inner,.emp-temas-inner{grid-template-columns:1fr}
  .emp-sintomas{grid-template-columns:repeat(2,1fr)}
  .emp-formatos-grid{grid-template-columns:1fr}
  .emp-proceso .linea-tiempo{grid-template-columns:1fr}
  .emp-hero-foto img{height:300px}
}
@media(max-width:640px){.emp-sintomas{grid-template-columns:1fr}}


/* ══ SOBRE MÍ · credenciales (texto agrupado, no lista) ══ */
.sm-cred{background:var(--aceite) url(/assets/textura_aceite.jpg) center/cover;
  padding:clamp(3.5rem,8vw,6rem) var(--g)}
.sm-cred-inner{max-width:var(--max);margin-inline:auto;display:grid;
  grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:start}
.sm-cred .eyebrow{color:var(--cacao)}
.sm-cred-txt{font-size:1.02rem;color:var(--choco);line-height:1.8;max-width:380px}
.sm-cred-listas{display:flex;flex-direction:column;gap:1.6rem}
.sm-cred-grupo{padding-bottom:1.6rem;border-bottom:1px solid rgba(65,44,39,.16)}
.sm-cred-grupo:last-child{border-bottom:0;padding-bottom:0}
.sm-cred-grupo h3{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--terra);margin-bottom:.6rem}
.sm-cred-grupo p{font-size:1.05rem;color:var(--cacao);line-height:1.7}
.sm-cred-uni{font-size:.85rem;color:var(--olive);font-style:italic}

/* ══ SOBRE MÍ · trayectoria (cifras + bandas de logos) ══ */
.sm-trayectoria{background:var(--cacao);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.sm-tray-inner{max-width:var(--max);margin-inline:auto;display:flex;flex-direction:column;gap:3rem}
.sm-tray-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  padding-bottom:2.5rem;border-bottom:1px solid rgba(224,211,167,.22);text-align:center}
.sm-tray-cifras strong{display:block;font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:400;color:var(--aceite);line-height:1}
.sm-tray-cifras span{display:block;font-size:.85rem;color:rgba(248,243,231,.82);
  letter-spacing:.08em;margin-top:.5rem}
.sm-tray-bloque{text-align:center}
.sm-tray-label{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(224,211,167,.85);margin-bottom:1.4rem}
.sm-trayectoria .sm-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1.2rem 2.2rem;margin:0}
.sm-trayectoria .colab-logo{filter:grayscale(100%) brightness(2.4);opacity:.7}
.sm-trayectoria .colabs-logos span{color:rgba(248,243,231,.8)!important}
.sm-trayectoria .colabs-logos svg text{fill:rgba(248,243,231,.8)!important}
.sm-trayectoria .colabs-logos svg rect{fill:rgba(248,243,231,.16)!important}
.sm-logos-medios{overflow:visible;padding:0}
.sm-logos-medios svg{height:26px;width:auto}
.sm-tray-link{display:inline-block;margin-top:1.4rem;font-size:.88rem;color:var(--aceite);
  text-decoration:underline;text-underline-offset:4px}
.sm-tray-link:hover{color:var(--cream)}

@media(max-width:900px){
  .sm-cred-inner{grid-template-columns:1fr}
  .sm-tray-cifras{grid-template-columns:1fr;gap:1.75rem}
}

/* Sobre fondo Aceite: Terracota da 3,93 y Oliva 4,12 -> Cacao (8,70) */
.sm-cred-grupo h3{color:var(--cacao)}
.sm-cred-uni{color:var(--choco)}
.sm-cred h2 em{color:var(--terra)}
.sm-cred .h-section em{color:var(--terra)}

/* Empresas: antetitulos sobre oscuro en Aceite; numeros sobre Aceite en Cacao */
.emp-hero .eyebrow,.emp-formatos .eyebrow,.emp-proceso .eyebrow{color:var(--aceite)}
.emp-sintoma span{color:var(--cacao)}

/* Enfasis: sobre Aceite -> Terracota; sobre Chocolate -> Aceite */
.emp-temas em,.emp-temas .h-section em{color:var(--terra)}
.emp-proceso em,.emp-proceso .h-section em{color:var(--aceite)}





/* ══ SOBRE MÍ · showreel en reproducción automática ══ */
.sm-reel{margin-bottom:.5rem}
.sm-reel figure{margin:0;max-width:900px;margin-inline:auto}
.sm-reel-marco{position:relative;border-radius:var(--r16);overflow:hidden;
  border:1px solid rgba(224,211,167,.22);background:var(--cacao);line-height:0}
.sm-reel video{width:100%;aspect-ratio:16/9;height:auto;display:block;object-fit:cover}
.sm-reel figcaption{text-align:center;font-size:.88rem;color:rgba(248,243,231,.82);
  line-height:1.6;margin-top:.9rem}

/* Control de pausa: obligatorio si algo se mueve solo */
.sm-reel-btn{position:absolute;bottom:.9rem;right:.9rem;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(248,243,231,.45);
  background:rgba(65,44,39,.72);backdrop-filter:blur(6px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .2s;padding:0}
.sm-reel-btn:hover{background:rgba(65,44,39,.92);transform:scale(1.06)}
.sm-reel-btn:focus-visible{outline:3px solid var(--aceite);outline-offset:3px}
/* Icono pausa (dos barras) */
.reel-ico-pausa{width:12px;height:14px;position:relative;display:block}
.reel-ico-pausa::before,.reel-ico-pausa::after{content:'';position:absolute;top:0;
  width:4px;height:14px;background:var(--cream);border-radius:1px}
.reel-ico-pausa::before{left:0}
.reel-ico-pausa::after{right:0}
/* Icono play cuando esta pausado */
.sm-reel-btn[aria-pressed="true"] .reel-ico-pausa::before{
  left:1px;width:0;height:0;background:transparent;
  border-left:11px solid var(--cream);border-top:7px solid transparent;
  border-bottom:7px solid transparent;border-radius:0}
.sm-reel-btn[aria-pressed="true"] .reel-ico-pausa::after{display:none}

/* Si se pide menos movimiento, no se reproduce solo */
@media (prefers-reduced-motion: reduce){
  .sm-reel video{animation:none}
}


/* ══ SOBRE MÍ · historia como descenso ══════════════════════════ */
.sm-historia-inner{position:relative}

/* Carril vertical que une los capítulos: se llena al bajar */
.sm-carril{position:absolute;left:13px;top:.6rem;bottom:2rem;width:2px;
  background:rgba(65,44,39,.14);border-radius:2px;pointer-events:none}
.sm-carril-fill{display:block;width:100%;height:0;background:var(--terra);
  border-radius:2px;transition:height .25s linear}

/* El número deja de ser texto suelto y pasa a ser un hito del carril */
.sm-cap{padding-left:3.75rem}
.sm-cap-num{position:absolute;left:0;top:.05rem;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:.82rem;font-weight:500;
  color:var(--olive);background:var(--cream);
  border:2px solid rgba(65,44,39,.18);border-radius:50%;
  opacity:1;z-index:1;
  transition:border-color .4s ease,color .4s ease,transform .4s ease,background .4s ease}

/* Capítulo alcanzado: el hito se enciende */
.sm-cap.visto .sm-cap-num{border-color:var(--terra);color:var(--cream);
  background:var(--terra);transform:scale(1.12)}

/* Capítulo en el que estás leyendo ahora */
.sm-cap.activo .sm-cap-num{transform:scale(1.22);
  box-shadow:0 0 0 6px rgba(158,78,42,.14)}
.sm-cap h2{transition:color .4s ease}
.sm-cap.activo h2{color:var(--terra)}

@media(max-width:640px){
  .sm-cap{padding-left:2.9rem}
  .sm-carril{left:11px}
  .sm-cap-num{width:24px;height:24px;font-size:.75rem}
}

/* Sin movimiento: los hitos salen ya encendidos y nada se anima */
@media (prefers-reduced-motion: reduce){
  .sm-carril-fill{transition:none}
  .sm-cap-num,.sm-cap h2{transition:none}
  .sm-cap .sm-cap-num{border-color:var(--terra);color:var(--cream);background:var(--terra)}
}


/* ══════════════════════════════════════════════════════════════
   SISTEMA DE ANIMACIÓN
   Regla única: solo se anima `transform`. Nunca opacidad, nunca
   visibility. Si el JS no corre, todo está en su sitio y legible.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Secuencias: los elementos de una rejilla entran en cascada ── */
html.js-anim .seq > *{
  transform:translateY(16px);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
html.js-anim .seq.seq-in > *{transform:none}
html.js-anim .seq.seq-in > *:nth-child(1){transition-delay:0s}
html.js-anim .seq.seq-in > *:nth-child(2){transition-delay:.07s}
html.js-anim .seq.seq-in > *:nth-child(3){transition-delay:.14s}
html.js-anim .seq.seq-in > *:nth-child(4){transition-delay:.21s}
html.js-anim .seq.seq-in > *:nth-child(5){transition-delay:.28s}
html.js-anim .seq.seq-in > *:nth-child(6){transition-delay:.35s}
html.js-anim .seq.seq-in > *:nth-child(n+7){transition-delay:.42s}

/* ── 2. Línea de tiempo: el trazo se dibuja y los hitos se encienden ── */
.linea-tiempo{position:relative}
.linea-tiempo::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:rgba(65,44,39,.12);border-radius:3px}
.lt-progreso{position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--terra);border-radius:3px;
  transition:width .45s cubic-bezier(.22,.61,.36,1);z-index:1}
.lt-hito{position:relative;transition:transform .45s ease,border-color .45s ease}
.lt-hito .lt-cuando{transition:color .45s ease}
html.js-anim .lt-hito{border-top-color:rgba(65,44,39,.14)}
html.js-anim .lt-hito.alcanzado{border-top-color:var(--terra)}
html.js-anim .lt-hito.alcanzado .lt-cuando{color:var(--terra)}
html.js-anim .lt-hito.actual{transform:translateY(-5px)}
/* Sobre fondo oscuro la línea usa Aceite */
.hipo-course .linea-tiempo::before,.emp-proceso .linea-tiempo::before{background:rgba(224,211,167,.2)}
.emp-proceso .lt-progreso{background:var(--aceite)}

/* ── 3. Cifras que cuentan hacia arriba ── */
.sm-tray-cifras strong{font-variant-numeric:tabular-nums}

/* ── 4. Iceberg: el descenso se revela al bajar ── */
.ice-reveal{transition:transform .7s cubic-bezier(.22,.61,.36,1)}
html.js-anim .ice-reveal{transform:translateY(22px)}
html.js-anim .ice-reveal.in-vista{transform:none}

/* ── 5. Tarjetas de camino: elevación al pasar por encima ── */
.path-card{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.path-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(65,44,39,.28)}
.path-card:focus-within{transform:translateY(-6px)}

/* ── Sin movimiento: nada se transforma ── */
@media (prefers-reduced-motion: reduce){
  html.js-anim .seq > *,
  html.js-anim .ice-reveal,
  .lt-hito,.path-card{transform:none!important;transition:none!important}
  .lt-progreso{transition:none}
  html.js-anim .lt-hito{border-top-color:var(--terra)}
}


/* ══════════════════════════════════════════════════════════════
   KIT DE MARCA · reglas del manual
   ══════════════════════════════════════════════════════════════ */

/* Destacado dentro de párrafo: 600 en Terracota (kit, pág. 03).
   Sobre fondo oscuro no puede ser Terracota, así que hereda en Hueso. */
p strong,li strong{font-weight:600}
.sm-cap p strong,.body-lg strong,.emp-tema p strong,
.hipo-block-list strong,.precio-lista strong{color:var(--terra)}

/* ── Formas orgánicas de fondo ────────────────────────────────
   Regla del kit: siempre de fondo, a baja opacidad, sangrando por
   un borde. Nunca como icono dentro de un texto. Se elige la forma
   por su relación con el contenido. */
.con-forma{position:relative;overflow:hidden;isolation:isolate}
.forma-fondo{position:absolute;pointer-events:none;z-index:0;
  width:clamp(240px,32vw,460px);height:auto;opacity:.09}
.con-forma > *:not(.forma-fondo){position:relative;z-index:1}
/* Posiciones: siempre sangrando por un borde */
.forma-dcha{right:-7%;top:8%}
.forma-izda{left:-8%;bottom:-6%}
.forma-abajo-dcha{right:-6%;bottom:-10%}
.forma-arriba-izda{left:-7%;top:-8%}
/* Sobre fondo oscuro la forma respira un poco más */
.aa-truth .forma-fondo,.hipo-experience .forma-fondo,
.calma-section .forma-fondo,.sm-trayectoria .forma-fondo,
.emp-formatos .forma-fondo{opacity:.13}

@media(max-width:640px){
  .forma-fondo{width:clamp(180px,52vw,280px);opacity:.07}
}

/* La regla genérica .fit-col (añadida para los cursos) pisaba las variantes
   oscura y clara de ALIMENT-ARTE. Se les devuelve la prioridad. */
.fit-grid .fit-col.fit-col-yes{background:var(--cacao)}
.fit-grid .fit-col.fit-col-no{background:rgba(65,44,39,.06);border:1px solid rgba(65,44,39,.12)}
.fit-grid .fit-col.fit-col-yes h3{color:var(--cream)}
.fit-grid .fit-col.fit-col-yes .fit-list li{color:rgba(224,211,167,.92)}
.fit-grid .fit-col.fit-col-no h3{color:var(--choco)}
.fit-grid .fit-col.fit-col-no .fit-list li{color:var(--choco)}


/* ══════════════════════════════════════════════════════════════
   HOME · ELIGE TU CAMINO
   Dos niveles separados: acompañamiento (alto) y cursos (entrada).
   Se separan porque son dos decisiones distintas — una se habla,
   la otra se compra — y mezclarlas confunde y devalúa la primera.
   ══════════════════════════════════════════════════════════════ */
.caminos{background:var(--cream);padding:clamp(3rem,7vw,5rem) var(--g)}
.caminos-inner{max-width:var(--max);margin-inline:auto}
.caminos-hd{text-align:center;margin-bottom:2.5rem}
.caminos-hd .h-section{margin-top:.5rem}

.nivel{margin-bottom:2.75rem}
.nivel-hd{margin-bottom:1.5rem;max-width:640px}
.nivel-tag{display:inline-block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:.32rem .8rem;border-radius:100px;margin-bottom:.75rem}
.nivel-hd h3{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;
  line-height:1.2;margin-bottom:.6rem}
.nivel-hd p{font-size:1rem;line-height:1.7}
.nivel-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}

/* Nivel 1 — acompañamiento: bloque oscuro, más peso visual */
.nivel-acompanada{background:var(--cacao) url(/assets/textura_cacao.jpg) center/cover;
  border-radius:var(--r32);padding:clamp(1.75rem,4vw,2.75rem)}
.nivel-acompanada .nivel-tag{background:var(--terra);color:var(--cream)}
.nivel-acompanada .nivel-hd h3{color:var(--cream)}
.nivel-acompanada .nivel-hd p{color:rgba(248,243,231,.9)}
.camino-alto{background:rgba(248,243,231,.07);border:1px solid rgba(224,211,167,.28);
  border-radius:var(--r16);padding:1.6rem;display:flex;flex-direction:column;gap:.75rem}
.camino-alto h4{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--cream);line-height:1.2}
.camino-alto .camino-meta{color:var(--aceite)}
.camino-alto .camino-para{color:rgba(248,243,231,.9)}
.camino-alto li{color:rgba(224,211,167,.92)}
.camino-alto li::before{color:var(--peach)}
.nivel-pie{margin-top:1.4rem;font-size:.95rem;color:rgba(248,243,231,.88);text-align:center}
.nivel-pie a{color:var(--aceite);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.nivel-pie a:hover{color:var(--cream)}

/* Nivel 2 — cursos: claro, más ligero, secundario */
.nivel-sola .nivel-tag{background:var(--aceite);color:var(--cacao)}
.nivel-sola .nivel-hd h3{color:var(--cacao)}
.nivel-sola .nivel-hd p{color:var(--choco)}
.camino-curso{background:var(--cream);border:1px solid rgba(65,44,39,.16);
  border-radius:var(--r16);padding:1.6rem;display:flex;flex-direction:column;gap:.75rem;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease}
.camino-curso:hover{transform:translateY(-4px);border-color:var(--terra);
  box-shadow:0 14px 34px rgba(65,44,39,.14)}
.camino-curso h4{font-family:var(--serif);font-size:1.22rem;font-weight:500;color:var(--cacao);line-height:1.25}
.camino-curso .camino-meta{color:var(--olive)}
.camino-curso li{color:var(--choco)}
.camino-curso li::before{color:var(--terra)}

/* Comunes a las tarjetas */
.camino{position:relative}
.camino-meta{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase}
.camino-para{font-size:.95rem;line-height:1.6;font-style:italic}
/* ── Bloque autotest nervio vago ── */
.autotest{background:transparent;padding:clamp(3rem,7vw,4.5rem) var(--g)}
.autotest-inner{max-width:760px;margin-inline:auto;background:var(--cream);
  border-radius:6px;padding:clamp(1.8rem,4vw,2.75rem);
  display:flex;gap:1.5rem;align-items:flex-start;position:relative;z-index:1}
.autotest-inner p{color:var(--cacao);line-height:1.7;margin-bottom:1.25rem}
.autotest-inner .test-nota{font-size:.78rem;opacity:.7;margin:.7rem 0 0}
.autotest-inner .btn{display:inline-block}
@media(max-width:640px){.autotest-inner{flex-direction:column;gap:1rem}}

/* ── Oferta de lanzamiento ──
   Sin tachados: la etiqueta explica por qué el precio es este,
   la cifra manda sola y la condición va debajo, en pequeño. */
.oferta{margin:.9rem 0 1.1rem}
.oferta-tag{display:inline-block;background:var(--terra);color:var(--cream);
  font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:3px}
.oferta-cifra{font-family:var(--serif);font-size:clamp(2.1rem,4.5vw,2.9rem);
  font-weight:400;color:var(--cacao);line-height:1;margin:.5rem 0 .2rem}
.oferta-cifra strong{font-weight:400}
.oferta-pie{font-size:.78rem;color:var(--cacao);opacity:.72;letter-spacing:.02em}
.oferta-grande{margin:1.5rem 0 1.4rem}
.oferta-grande .oferta-cifra{font-size:clamp(3rem,7vw,4.2rem)}
.oferta-grande .oferta-pie{font-size:.85rem}

.camino-precio{font-family:var(--serif);font-size:1.5rem;color:var(--cacao);line-height:1}
.camino-precio strong{font-weight:700}
.camino ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;padding:0;margin-top:.15rem}
.camino li{font-size:.92rem;line-height:1.5;padding-left:1.15rem;position:relative}
.camino li::before{content:'—';position:absolute;left:0}
.camino .btn{margin-top:auto;align-self:flex-start}

/* Botón contorno en Terracota para los cursos (sobre fondo claro) */
.btn-outline-terra{background:transparent;color:var(--terra);border:1.5px solid var(--terra)}
.btn-outline-terra:hover{background:var(--terra);color:var(--cream)}

/* Salida para quien no sabe elegir */
.caminos-duda{text-align:center;background:var(--aceite);border-radius:var(--r16);
  padding:1.6rem;max-width:620px;margin:0 auto}
.caminos-duda p{font-size:1.05rem;color:var(--cacao);line-height:1.6;margin-bottom:1rem}

@media(max-width:820px){
  .nivel-grid{grid-template-columns:1fr}
  .camino .btn{width:100%;justify-content:center}
}


/* ══════════════════════════════════════════════════════════════
   AJUSTES ESTÉTICOS · aire y color por producto
   ══════════════════════════════════════════════════════════════ */

/* El hero de landing es la primera sección: tiene que despejar el nav fijo.
   Antes el antetítulo quedaba pegado al menú. */
main > section:first-child .prog-divider-inner,
main > .prog-divider:first-of-type .prog-divider-inner{
  padding-top:calc(72px + clamp(2.5rem,5vw,4rem));
  padding-bottom:clamp(2.5rem,5vw,4rem);
  justify-content:center;
}
main > section:first-child .prog-divider-photo img{min-height:520px}
/* Un poco de aire entre el antetítulo y el titular */
.prog-divider-label{margin-bottom:1.1rem}
.prog-divider-title{margin-bottom:.35rem}
.prog-divider-sub{margin-top:.15rem}

/* ── Recupera tu calma · Azul umbral ──
   El kit reserva el azul como acento excepcional: comunicación,
   intuición y mirada interior. Es exactamente este curso, así que
   aquí sostiene la página entera en vez de aparecer suelto. */
.prog-divider-4 .prog-divider-inner{
  background:var(--azul) url(/assets/textura_azul.jpg) center/cover
}
.calma-section{background:var(--azul)}
.calma-section .calma-badge{background:rgba(248,243,231,.1);border-color:rgba(224,211,167,.4)}
.calma-section .calma-pill{background:rgba(248,243,231,.1);border-color:rgba(224,211,167,.35)}
.calma-img-overlay{background:linear-gradient(180deg,transparent 40%,rgba(55,74,121,.72) 100%)}

/* ── Umbral azul → cacao ──
   Dos colores oscuros a tope crean un corte duro. Aquí el azul lleva
   grano, respira más y se funde hacia el cacao de la sección siguiente. */
.calma-umbral{position:relative;isolation:isolate;background:transparent;
  padding:clamp(3.5rem,7vw,5rem) var(--g) clamp(8rem,16vw,12rem);
  text-align:center}
/* El azul se pinta como capa con máscara: al desvanecerse deja ver la textura
   de la zona, que es la misma imagen y el mismo encuadre que las secciones
   siguientes. Por eso ya no hay salto de dibujo en la unión. */
.calma-umbral::after{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--azul) url(/assets/textura_azul.jpg) center/cover;
  -webkit-mask-image:linear-gradient(180deg,#000 0 62%,rgba(0,0,0,.72) 76%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0 62%,rgba(0,0,0,.72) 76%,transparent 100%)}
.calma-umbral::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(55,74,121,.38) 0%,rgba(55,74,121,0) 24%)}
/* La textura de Aceite emerge desde abajo con una máscara: al ser la misma
   imagen que la sección siguiente, no queda costura entre las dos. */

.calma-umbral > *{position:relative;z-index:1}
.calma-umbral .forma-fondo{z-index:0;opacity:.07}

/* Vence a las reglas de contraste que fuerzan Hueso en todo el hero */
.prog-divider .prog-divider-inner .prog-divider-title em{color:var(--aceite)}

@media(max-width:900px){
  main > section:first-child .prog-divider-inner{
    padding-top:calc(62px + clamp(2rem,6vw,3rem));
  }
  main > section:first-child .prog-divider-photo img{min-height:340px}
}


/* ── Símbolos ilustrados en medallón (kit, pág. 06) ──
   A diferencia de las formas orgánicas, estos van en primer plano:
   círculo en Aceite con el símbolo en Cacao dentro. */
.medallon{width:56px;height:56px;border-radius:50%;background:var(--aceite);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.medallon img{width:60%;height:60%;object-fit:contain;
  filter:brightness(0) saturate(100%) invert(14%) sepia(18%) saturate(1100%) hue-rotate(340deg)}
.hipo-bonus-card:hover .medallon,.emp-formato:hover .medallon{transform:scale(1.08) rotate(-4deg)}
/* Sobre fondo oscuro el medallón mantiene el Aceite: el kit lo fija así */
.hipo-experience .medallon,.aa-truth .medallon{background:var(--aceite)}

/* La "D" como marca de agua (kit: recurso de fondo a gran tamaño) */
.marca-agua{position:absolute;pointer-events:none;z-index:0;opacity:.07;
  width:clamp(200px,26vw,380px);height:auto}
.marca-agua-dcha{right:-4%;bottom:-12%}
.marca-agua-izda{left:-5%;top:-10%}

/* Capas del hero con orden explícito: el color plano es solo el respaldo
   mientras carga la foto, nunca debe quedar por encima de ella. */
.hero-visual{position:relative;isolation:isolate}
.hero-bg{z-index:0}
.hero-bg-img{z-index:1;opacity:1}
.hero-fade{z-index:2}
.hero-badge{z-index:3}

/* ══ ALIMENT-ARTE · copy nuevo ═══════════════════════════════════ */

/* Voz de Débora en primera persona: el momento en que deja de
   explicar y se pone al lado de quien lee. */
.aa-yo{font-family:var(--serif);font-size:clamp(1.15rem,2.1vw,1.45rem);line-height:1.45;
  color:var(--cacao);margin:1.4rem 0;padding-left:1.1rem;border-left:3px solid var(--terra)}
.aa-yo em{font-style:italic;color:var(--terra)}

/* Frase puente entre el problema y el método */
.aa-puente{background:var(--cacao) url(/assets/textura_cacao.jpg) center/cover;
  padding:clamp(3.5rem,8vw,5.5rem) var(--g);text-align:center}
.aa-puente > div{max-width:760px;margin-inline:auto}
.aa-puente p{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.1rem);font-weight:400;
  color:var(--cream);line-height:1.3}
.aa-puente-em{margin-top:.35rem}
.aa-puente-em em{font-style:italic;color:var(--aceite)}

/* Las tres fases */
.aa-fases{background:var(--cream);padding:clamp(3.5rem,8vw,6rem) var(--g)}
.aa-fases-hd{max-width:var(--max);margin:0 auto clamp(2.2rem,5vw,3.2rem)}
.fases-grid{max-width:var(--max);margin-inline:auto;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);align-items:start}
.fase{background:rgba(224,211,167,.22);border:1px solid rgba(158,78,42,.16);
  border-radius:var(--r16);padding:clamp(1.6rem,3vw,2.1rem);height:100%}
.fase-num{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--serif);font-size:1.35rem;color:var(--cream);
  margin-bottom:1.1rem}
.fase-nombre{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:400;
  color:var(--cacao);line-height:1.15;margin-bottom:.7rem}
.fase-intro{font-size:.95rem;line-height:1.7;color:var(--choco);margin-bottom:1.1rem}
.fase-rotulo{font-family:var(--sans);font-size:.65rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terra);margin-bottom:.6rem}
.fase-lista{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.fase-lista li{position:relative;padding-left:1.1rem;font-size:.9rem;line-height:1.65;
  color:var(--choco)}
.fase-lista li::before{content:"—";position:absolute;left:0;color:var(--terra)}

@media(max-width:900px){.fases-grid{grid-template-columns:1fr;gap:1rem}}


/* ── «Lo que cambia» en Aceite (solo en Recupera tu calma) ──
   El azul umbral desemboca en luz, no en otro bloque oscuro:
   es lo que cuenta la propia sección — salir del modo alerta. */
.hipo-experience.exp-aceite{background:var(--aceite) url(/assets/textura_aceite.jpg) center/cover}
/* Terracota sobre Aceite = 3,93: insuficiente. Cacao (8,70), como en el resto */
.exp-aceite .eyebrow{color:var(--cacao)}
.exp-aceite .h-section{color:var(--cacao)}
.exp-aceite .h-section em{color:var(--terra)}
.exp-aceite .hipo-exp-card{background:rgba(248,243,231,.62);border-color:rgba(158,78,42,.22)}
.exp-aceite .hipo-exp-num{color:var(--terra) !important;opacity:1}
.exp-aceite .hipo-exp-card p{color:var(--choco)}
.exp-aceite .hipo-exp-card strong{color:var(--cacao)}
.exp-aceite .forma-fondo{opacity:.10}
/* Se encadena con la sección siguiente, que ya es Aceite: sin costura entre las dos */
.exp-aceite{padding-bottom:clamp(2rem,4vw,3rem)}
.exp-aceite + .hipo-course{padding-top:clamp(2rem,4vw,3rem)}


/* ── Zonas de Aceite continuas ──────────────────────────────────
   Cada sección con `cover` reencuadraba la textura por su cuenta, así que
   el dibujo saltaba en cada frontera. Ahora el fondo lo pone la zona entera
   y las secciones de dentro son transparentes: una sola pincelada continua.
   El tile lleva su mitad espejada, de modo que al repetirse no hay costura. */
.zona-aceite{background:var(--aceite) url(/assets/textura_aceite_tile.jpg) top center/100% auto repeat-y}
.zona-aceite > section{background:transparent !important}
.zona-aceite > section.hipo-course{background:transparent !important}

/* Las fronteras Aceite↔Hueso son dos claros separados por una recta: se leen
   como un fallo, no como una decisión. Un fundido corto las cose. */
.zona-aceite{position:relative;isolation:isolate;
  /* el fundido cae sobre esta reserva, no sobre el último párrafo */
  padding-bottom:clamp(90px,10vw,150px)}
.zona-aceite > *{position:relative;z-index:1}
.zona-aceite::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:clamp(90px,10vw,150px);pointer-events:none;
  background:linear-gradient(180deg,rgba(248,243,231,0) 0%,var(--cream) 100%)}
/* El primer tramo termina en Hueso y el segundo también: en ambos casos
   lo que viene debajo es Hueso, así que el fundido es al mismo color. */
.zona-precio{padding:clamp(4rem,8vw,6rem) var(--g) clamp(4rem,8vw,6rem)}
.zona-precio::after{content:"";position:absolute;left:0;right:0;top:0;z-index:2;
  height:clamp(90px,10vw,150px);pointer-events:none;
  background:linear-gradient(0deg,rgba(248,243,231,0) 0%,var(--cream) 100%)}

/* ── Cierre en Azul umbral (solo en Recupera tu calma) ──
   La página abre en azul y cierra en azul: el color enmarca el curso
   entero en vez de aparecer suelto en mitad del recorrido. */
.hipo-cta.cta-azul{background:var(--azul) url(/assets/textura_azul.jpg) center/cover}

/* ── «Por qué no terminó de funcionar» en Oliva empolvado ──
   El azul del kit es un acento excepcional y esta página ya lo usa tres veces
   (entrada, umbral y cierre). Un cuarto lo convertiría en color de relleno.
   Oliva es color base, aporta el tercer registro al tramo más plano de la
   página y encaja con lo que cuenta la sección: raíz y tierra. */
.aa-truth.truth-oliva{background:var(--olive) url(/assets/textura_oliva.jpg) center/cover}
/* Sobre Oliva: Aceite 3,46 y Melocotón 1,82 no llegan. Antetítulo y cuerpo
   en Hueso; la cursiva del titular en Aceite, que a 41 px sí cumple (3,46). */
.truth-oliva .eyebrow{color:var(--cream)}
.truth-oliva h2 em{color:var(--aceite)}
.truth-oliva .patron{background:rgba(65,44,39,.20);border-color:rgba(248,243,231,.30)}
.truth-oliva .patron p{color:var(--cream)}

/* ── Línea de tiempo abierta (variante «flujo») ─────────────────
   Iba en tarjetas iguales a las del bloque anterior, así que dos
   secciones seguidas se leían como lo mismo. Aquí el recorrido se
   dibuja: un trazo continuo, un hito por parada y nada de cajas.
   La rejilla de tarjetas queda para lo que sí es una lista. */
.lt-flujo{margin-top:3.25rem;gap:1.6rem}
.lt-flujo::before,.lt-flujo .lt-progreso{display:none}
/* Cada parada tiende el tramo hasta la siguiente, así el trazo empieza y
   termina justo en un punto en vez de sobresalir por los lados. */
.lt-flujo .lt-hito::after{content:"";position:absolute;top:7px;left:16px;
  width:calc(100% + 1.6rem - 16px);height:2px;background:rgba(158,78,42,.28)}
.lt-flujo .lt-hito:last-child::after{display:none}
.lt-flujo .lt-hito{background:transparent;border:0;border-radius:0;
  padding:2.6rem .6rem 0 0;text-align:left}
/* la parada sobre el trazo */
.lt-flujo .lt-hito::before{content:"";position:absolute;top:0;left:0;
  width:16px;height:16px;border-radius:50%;background:var(--cream);
  border:2px solid rgba(158,78,42,.45);box-sizing:border-box;
  transition:background .45s ease,border-color .45s ease,transform .45s ease}
.lt-flujo .lt-cuando{display:block;font-family:var(--serif);font-size:1.6rem;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--terra);
  background:none;padding:0;margin-bottom:.35rem;line-height:1}
.lt-flujo .lt-hito h3{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cacao);
  margin-bottom:.5rem;line-height:1.4}
.lt-flujo .lt-hito p{font-size:.9rem;color:var(--choco);line-height:1.65}

html.js-anim .lt-flujo .lt-hito{border-top-color:transparent}
html.js-anim .lt-flujo .lt-hito.alcanzado::before{background:var(--terra);border-color:var(--terra)}
html.js-anim .lt-flujo .lt-hito.actual{transform:none}
html.js-anim .lt-flujo .lt-hito.actual::before{transform:scale(1.25)}

@media(max-width:820px){
  /* en vertical el trazo pasa a la izquierda y los hitos cuelgan de él */
  .lt-flujo{grid-template-columns:1fr;gap:1.9rem;margin-top:2.5rem}
  .lt-flujo .lt-hito::after{top:22px;left:7px;width:2px;
    height:calc(100% + 1.9rem - 22px)}
  .lt-flujo .lt-hito{padding:0 0 0 2.1rem}
  .lt-flujo .lt-hito::before{top:6px}
  .lt-flujo .lt-cuando{font-size:1.35rem}
}


/* ══ TRAMO FINAL SIN TEXTURA ═══════════════════════════════════
   Del filtro honesto hasta el cierre azul el fondo va liso. Después de
   tanto grano el ojo necesita descansar antes de la decisión de compra,
   y aquí el interés lo ponen los símbolos del kit, no la textura. */
.zona-lisa{background:var(--cream);position:relative;isolation:isolate}
.zona-lisa > section{background:transparent}
/* El precio sí se separa: Aceite liso para que la caja Hueso destaque */
.zona-precio{background:var(--aceite);padding:clamp(4rem,8vw,6rem) var(--g);
  position:relative;isolation:isolate}

/* ── Símbolos de fondo con deriva lenta ──
   Movimiento mínimo y muy lento: da vida sin pedir atención.
   Solo transform, para no repintar. */
@keyframes deriva{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(0,-18px,0) rotate(1.2deg)}
}
@keyframes deriva-alt{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%    {transform:translate3d(10px,14px,0) rotate(-1.4deg)}
}
.forma-flota{animation:deriva 19s ease-in-out infinite;will-change:transform}
.forma-flota.forma-dcha,.forma-flota.forma-abajo-dcha{animation:deriva-alt 23s ease-in-out infinite}
.forma-flota.forma-abajo-dcha{animation-delay:-6s}
.forma-flota.forma-arriba-izda{animation-delay:-11s}
/* En el tramo liso las formas mandan más que sobre textura */
.zona-lisa .forma-fondo,.zona-precio .forma-fondo{opacity:.13}

@media(prefers-reduced-motion:reduce){
  .forma-flota{animation:none}
}

/* ── Ajustes del tramo liso ─────────────────────────────────────
   Sobre Hueso, las cajas que también eran Hueso desaparecían: aquí se
   apoyan en Aceite suave y un filete, que es como el kit separa planos. */
.zona-lisa .fit-col,
.zona-lisa .autotest-inner,
.zona-lisa .testi3{background:rgba(224,211,167,.34);border:1px solid rgba(158,78,42,.14)}
.zona-lisa .autotest-inner{background:rgba(224,211,167,.42)}
.zona-lisa .autotest-inner .btn-outline-terra{background:var(--cream)}

/* Los símbolos se recortaban en ángulo recto contra el borde de la
   sección. Con una máscara radial se apagan antes de llegar al corte. */
.zona-lisa .forma-fondo,.zona-precio .forma-fondo{
  -webkit-mask-image:radial-gradient(ellipse at center,#000 42%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,#000 42%,transparent 78%)}

/* ══ CREDENCIALES ══════════════════════════════════════════════
   Antes eran veinte «logos» dibujados con Arial y Georgia imitando
   cada marca: tipografías, pesos y colores distintos en dos filas
   idénticas. Ni se reconocían ni eran los logos reales. Aquí los
   nombres van todos en la tipografía de la casa y lo que cambia es
   el FORMATO de cada bloque, que es lo que rompe la repetición. */

/* ── Empresas: banda en marcha ── */
.marquesina{position:relative;display:flex;gap:0;overflow:hidden;margin:1.4rem 0 1.6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-pista{display:flex;align-items:center;flex-shrink:0;
  animation:desfile 78s linear infinite;will-change:transform}
.marquesina:hover .marq-pista{animation-play-state:paused}
@keyframes desfile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
.marq-item{font-family:var(--sans);font-size:clamp(.95rem,1.7vw,1.15rem);font-weight:500;
  letter-spacing:.06em;color:rgba(248,243,231,.88);white-space:nowrap;padding:0 clamp(1.1rem,2.4vw,2rem)}
/* Logos reales dentro de la banda. La altura va por marca: igualar píxeles
   no iguala el peso visual — un cuadrado necesita más alto que un 8:1. */
.marq-logo{width:auto;display:block;flex-shrink:0;opacity:.88;
  margin:0 clamp(1.1rem,2.4vw,2rem)}
.marquesina{padding:.4rem 0}
.marq-sep{display:inline-block;width:7px;height:7px;flex-shrink:0;
  background:var(--terra);transform:rotate(45deg);opacity:.85}

/* ── Medios: logos reales en Hueso ──
   Los originales van en negro, rojo, azul y naranja: sobre Cacao los oscuros
   no se leerían y los siete colores pelearían con la paleta. En Hueso se
   conservan las formas de cada cabecera y el bloque queda de una pieza.
   La altura va marca por marca: igualar píxeles no iguala el peso visual. */
.cred-medios{margin-top:.5rem}
.medios-destacados{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.6rem,4.5vw,3.4rem);margin:1.7rem 0 1.5rem}
.medios-resto{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.3rem,3.5vw,2.6rem)}
.medio-logo{width:auto;display:block;opacity:.92;flex-shrink:0}
.medio-logo-sm{opacity:.72}
@media(max-width:620px){
  .marq-logo{max-height:26px}
  .medios-destacados{gap:1.3rem 2rem}
  .medio-logo{height:22px !important}
  .medio-logo-sm{height:14px !important}
  .medio-logo[alt="rac105"],.medio-logo[alt="CCM"]{height:24px !important}
}

@media(prefers-reduced-motion:reduce){
  .marq-pista{animation:none}
  .marquesina{flex-wrap:wrap;justify-content:center;mask-image:none;-webkit-mask-image:none}
  .marquesina .marq-pista[aria-hidden="true"]{display:none}
  .marq-pista{flex-wrap:wrap;justify-content:center}
}
@media(max-width:620px){
  .medios-destacados{gap:1rem 1.8rem}
}

/* Al pasar de <button> a <a>, el botón heredaba el color y el subrayado de
   los enlaces del bloque: Aceite sobre Terracota da 3,93. Se fija a Hueso. */
.gate-low a.btn{text-decoration:none}
.gate-low a.btn-primary{color:var(--cream)}


/* ══ EMPRESAS · color propio ═══════════════════════════════════
   La página abría en Cacao con textura, igual que Hipopresivos, y llevaba
   tres bloques oscuros casi idénticos. Ahora el recorrido es
   Terracota → Hueso → Chocolate → Aceite → Hueso → Oliva → Hueso → Terracota:
   abre y cierra en el mismo color, con tres oscuros distintos en medio.
   Terracota porque es lo que dice el titular: encender. */
.hipo-cta.cta-terra{background:var(--terra) url(/assets/textura_terra.jpg) center/cover}
/* Sobre Terracota el Aceite da 3,93 y el Melocotón menos: valen para
   titulares grandes, no para el cuerpo ni los antetítulos. Ahí manda Hueso. */
.emp-hero .emp-lead,.emp-hero .emp-nota,
.emp-hero .eyebrow,.cta-terra .eyebrow{color:var(--cream)}

/* Chocolate: mismo caso que Terracota */
.emp-formatos .eyebrow{color:var(--cream)}
.emp-formatos .h-section-light em{color:var(--aceite)}
.emp-formato li,.emp-formato p{color:var(--cream)}
.emp-formato-meta{color:var(--aceite)}

/* Oliva: las tarjetas del recorrido pasan a oscuras, así que su texto
   —pensado para fondo Hueso— tiene que invertirse. */
.emp-proceso .lt-hito{background:rgba(65,44,39,.28);border-color:rgba(248,243,231,.30)}
.emp-proceso .eyebrow{color:var(--cream)}
.emp-proceso .h-section-light em{color:var(--aceite)}
.emp-proceso .lt-hito h3{color:var(--cream)}
.emp-proceso .lt-hito p{color:rgba(248,243,231,.92)}
.emp-proceso .lt-cuando{color:var(--cream);background:rgba(248,243,231,.12)}

/* ── Logos como máscara ─────────────────────────────────────────
   El mismo PNG sirve para fondo claro y oscuro: la imagen aporta la
   silueta y el color lo pone el CSS. Así no hay que duplicar archivos
   ni mantener dos versiones de cada logo. */
.logo-mask{display:inline-block;flex-shrink:0;background:currentColor;
  -webkit-mask:var(--l) center/contain no-repeat;mask:var(--l) center/contain no-repeat}
.logos-oscuros{color:var(--cacao);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:1.4rem 2.2rem;
  max-width:var(--max);margin:1.8rem auto 0}
.logos-oscuros .logo-mask{opacity:.82}
@media(max-width:620px){
  .logos-oscuros{gap:1rem 1.5rem}
  .logos-oscuros .logo-mask{transform:scale(.82);transform-origin:center}
}

/* ── Estado animado de la línea de tiempo, por fondo ────────────
   `html.js-anim .lt-hito.alcanzado .lt-cuando` pone Terracota al pasar el
   scroll, y gana en especificidad a las reglas de sección. Sobre Oliva eso
   daba 2,22 y el rótulo desaparecía: por eso los pasos ya vistos no se leían
   y el último sí. Aquí se fija el color para cada fondo, en ambos estados. */
html.js-anim .emp-proceso .lt-hito .lt-cuando,
html.js-anim .emp-proceso .lt-hito.alcanzado .lt-cuando{color:var(--cream)}
html.js-anim .emp-proceso .lt-hito.alcanzado{border-top-color:var(--aceite)}

/* Sobre Aceite, Terracota se queda en 3,93 y el rótulo va a 11,5 px */
html.js-anim .hipo-course .lt-hito .lt-cuando,
html.js-anim .hipo-course .lt-hito.alcanzado .lt-cuando{color:var(--cacao)}

/* Al pasar el tramo final a fondo liso, la caja del autotest quedó sobre
   Aceite y el Melocotón del titular bajó a 2,70. Terracota da 3,93. */
.zona-lisa .autotest-inner .h-section em{color:var(--terra)}

/* ══ DESPEJE DEL NAV FIJO ═══════════════════════════════════════
   El nav va fijo, así que la primera sección de cada página tiene que
   reservarle sitio. Estaba resuelto en las landings, pero no en Sobre mí,
   Empresas ni el Test: ahí el antetítulo quedaba tapado en el móvil.
   La altura del nav se declara una vez y se usa en todas. */
:root{--nav-h:76px;
  /* Melocotón del kit con 40 % de Hueso: el puro no admite texto encima */
  --melo-suave:#dfa68a}
@media(max-width:900px){:root{--nav-h:64px}}
@media(max-width:520px){:root{--nav-h:58px}}

/* Las landings tenían el despeje calculado a mano; ahora comparten variable
   y suben de 21 a ~45 px de aire, que es lo que respiran las demás. */
main > section:first-child .prog-divider-inner,
main > .prog-divider:first-of-type .prog-divider-inner{
  padding-top:calc(var(--nav-h) + clamp(2rem,5vw,3.5rem))
}

/* En móvil hay una regla que compacta TODAS las secciones con !important.
   Es correcta para el interior de la página, pero también aplastaba la
   primera sección, que es justo la que tiene que dejar sitio al nav fijo.
   Estas excepciones le devuelven el aire — y también con !important,
   porque si no la de compactación gana. */
@media(max-width:640px){
  main > .sm-hero:first-child,
  main > .emp-hero:first-child,
  main > .test-intro:first-child,
  main > .legal-wrap:first-child{
    padding-top:calc(var(--nav-h) + clamp(1.4rem,5vw,2.4rem))!important
  }
  main > section:first-child .prog-divider-inner,
  main > .prog-divider:first-of-type .prog-divider-inner{
    padding-top:calc(var(--nav-h) + clamp(1.6rem,5vw,2.8rem))!important
  }
}


/* ══ EMPRESAS · hero en Hueso ══════════════════════════════════
   El hero va en Hueso con textura y la tinta en Cacao: es el único hero
   claro de la web, así que Empresas ya no se parece a ALIMENT-ARTE sin
   necesidad de un color propio. El recorrido queda
   Hueso → Aceite → Chocolate → Hueso → Aceite → Oliva → Hueso → Terracota,
   sin dos tonos iguales seguidos. */
.emp-hero .eyebrow{color:var(--terra)}
.emp-hero h1{color:var(--cacao)}
.emp-hero h1 em{color:var(--terra)}
.emp-hero .emp-lead{color:var(--choco)}
.emp-hero .emp-nota{color:var(--choco)}
.emp-hero .btn-light{background:var(--terra);color:var(--cream);border-color:var(--terra)}
.emp-hero .btn-light:hover{background:var(--cacao);border-color:var(--cacao)}

.hipo-cta.cta-oliva{background:var(--olive) url(/assets/textura_oliva.jpg) center/cover}
.cta-oliva .eyebrow{color:var(--cream)}

/* Al pasar estas dos a Aceite, sus textos seguían pensados para Hueso:
   sobre Aceite, Terracota da 3,93 y Melocotón 2,26. Antetítulo a Cacao
   (8,48) y cursiva del titular a Terracota, que a 30 px sí cumple. */
.emp-problema .eyebrow,.emp-confianza .eyebrow{color:var(--cacao)}
.emp-problema .h-section em,.emp-confianza .h-section em{color:var(--terra)}


/* ── Separador de marca ─────────────────────────────────────────
   Dos bloques seguidos en Hueso se fundirían en uno. En vez de meter otro
   color, los separa el símbolo de la marca entre dos filetes: marca el
   cambio de apartado y de paso firma la página. */
.sep-simbolo{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2rem);
  max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,6vw,4rem) var(--g) 0}
.sep-simbolo::before,.sep-simbolo::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(158,78,42,.30),transparent)}
.sep-simbolo img{width:clamp(26px,4vw,34px);height:auto;opacity:.55;flex-shrink:0}