/* ============================================================
   Instituto del Hidrógeno Molecular · Molecular Hydrogen Information
   Portada bilingüe — hidrogenomolecular.info
   Stylesheet compartido entre /index.html (ES) y /en/index.html (EN)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --purple-deep:#1E1148;
  --purple-darker:#0D0826;
  --lavender:#5B3FD9;
  --lavender-soft:#EEE9F7;
  --amber:#F59E0B;
  --amber-light:#FEF3E2;
  --cream:#F0EEE9;
  --text-dark:#1E1148;
  --text-body:#3A3340;
  --text-muted:#6B6680;
  --white:#FFFFFF;

  --font-serif:'DM Serif Display', Georgia, serif;
  --font-sans:'DM Sans', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', 'Courier New', monospace;

  --container:1240px;
  --gutter:60px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--white);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
input{ font:inherit; color:inherit; }
::selection{ background:var(--lavender); color:var(--white); }

/* ---------- Accessibility ---------- */
.skip{
  position:absolute; top:-100px; left:16px;
  background:var(--purple-deep); color:var(--white);
  padding:10px 16px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:12px; letter-spacing:1px;
  text-transform:uppercase; z-index:9999;
  transition:top .2s ease;
}
.skip:focus{ top:16px; outline:2px solid var(--amber); }
:focus-visible{ outline:2px solid var(--lavender); outline-offset:3px; border-radius:2px; }

/* ---------- Utility ---------- */
.container{
  width:100%; max-width:var(--container);
  margin:0 auto; padding:0 var(--gutter);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:2.2px;
  text-transform:uppercase;
  color:var(--text-muted);
  display:inline-block;
  margin-bottom:24px;
}
.eyebrow--light{ color:rgba(255,255,255,.65); }
.eyebrow--lavender{ color:var(--lavender); }
.lav{ color:var(--lavender); font-style:italic; font-family:var(--font-serif); font-weight:400; }
em.lav{ font-style:italic; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; left:0; right:0; z-index:100;
  padding:16px 0;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background .3s ease;
}
.site-header.is-scrolled{
  border-bottom-color:rgba(30,17,72,.08);
  background:rgba(255,255,255,.92);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:32px;
}
.header-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:1.6px; text-transform:uppercase;
  color:var(--purple-deep); font-weight:500;
}
.header-logo img{ height:26px; width:auto; }
.header-logo .logo-mark{
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #8a6fee, var(--purple-deep) 75%);
  display:grid; place-items:center;
  color:var(--white); font-family:var(--font-serif); font-size:14px;
}
.header-nav{
  display:flex; align-items:center; gap:28px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:1.6px; text-transform:uppercase;
  font-weight:500;
}
.header-nav a{
  color:var(--text-body);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.header-nav a:hover{ color:var(--lavender); border-bottom-color:var(--lavender); }
.lang-toggle{
  display:inline-flex; align-items:center;
  border:1px solid rgba(30,17,72,.18);
  border-radius:999px;
  padding:3px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:1.2px;
}
.lang-toggle a{
  padding:6px 12px; border-radius:999px;
  color:var(--text-muted);
  transition:background .2s, color .2s;
}
.lang-toggle a[aria-pressed="true"]{
  background:var(--purple-deep); color:var(--white);
}

/* ---------- Hero (sección 1) ---------- */
.hero{
  position:relative;
  padding:96px 0 120px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91,63,217,.06), transparent 70%),
    var(--white);
  text-align:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(91,63,217,.045) 1px, transparent 1.5px);
  background-size:32px 32px;
  background-position:0 0;
  mask-image:radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 75%);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; }

/* ---------- Hero · atmospheric media layer ---------- */
.hero-media{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.hero-media .hero-portrait{
  position:absolute; inset:-4%;
  width:108%; height:108%;
  object-fit:cover; object-position:center 32%;
  opacity:.22;
  filter:saturate(.85) contrast(1.02);
  mask-image:radial-gradient(ellipse 70% 75% at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 50% 45%, #000 25%, transparent 78%);
}
.hero-media .hero-loop{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:.32;
  mix-blend-mode:multiply;
  mask-image:radial-gradient(ellipse 65% 65% at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 65% 65% at 50% 50%, #000 30%, transparent 85%);
}
@media (prefers-reduced-motion: reduce){
  .hero-media .hero-loop{ display:none; }
  .hero-media .hero-portrait{ opacity:.18; }
}
.hero h1{
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(44px, 7vw, 92px);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--purple-deep);
  margin:8px auto 24px;
  max-width:980px;
  text-wrap:balance;
}
.hero h1 .lav{ font-family:var(--font-serif); font-style:italic; color:var(--lavender); }
.hero-deck{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.55;
  color:var(--text-body);
  max-width:600px;
  margin:0 auto 56px;
  font-weight:400;
}
.hero-deck br{ display:none; }
@media(min-width:768px){ .hero-deck br{ display:inline; } }

.search-eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:2.4px; text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:16px;
}
.search-form{
  position:relative;
  max-width:640px; margin:0 auto 18px;
  z-index:60;
}
.search-input{
  width:100%;
  height:64px;
  padding:0 20px 0 56px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(4px);
  border:1px solid var(--lavender);
  border-radius:999px;
  font-family:var(--font-sans);
  font-size:16px;
  color:var(--text-dark);
  box-shadow:0 4px 32px rgba(91,63,217,.08);
  transition:box-shadow .2s, border-color .2s;
}
.search-input:focus{
  outline:none;
  border-color:var(--purple-deep);
  box-shadow:0 8px 40px rgba(91,63,217,.18);
}
.search-input::placeholder{
  color:transparent; /* faux placeholder span handles it for smooth crossfade */
}
.search-placeholder{
  position:absolute;
  left:56px; right:24px; top:0; bottom:0;
  display:flex; align-items:center;
  pointer-events:none;
  color:var(--text-muted);
  font-family:var(--font-sans);
  font-size:16px;
  font-style:italic;
  opacity:.78;
  transition:opacity .55s cubic-bezier(.4,.0,.2,1);
  white-space:nowrap; overflow:hidden;
}
.search-placeholder.is-out{ opacity:0; }
.search-form.is-focused .search-placeholder,
.search-form.has-value .search-placeholder{ opacity:0; }
.search-icon{
  position:absolute; left:22px; top:50%;
  width:20px; height:20px;
  transform:translateY(-50%);
  color:var(--lavender);
  pointer-events:none;
  z-index:2;
}
/* ---------- Search results dropdown ---------- */
.search-results{
  position:absolute;
  left:0; right:0; top:calc(100% + 8px);
  background:var(--white);
  border:1px solid rgba(30,17,72,.10);
  border-radius:var(--radius-md);
  box-shadow:0 24px 80px rgba(30,17,72,.18), 0 4px 12px rgba(30,17,72,.08);
  max-height:480px; overflow-y:auto;
  z-index:50;
  display:none;
  text-align:left;
  scrollbar-width:thin;
  scrollbar-color:rgba(30,17,72,.18) transparent;
}
.search-form.has-results .search-results{ display:block; }
.search-form.has-results{ z-index:120; }
.search-results::-webkit-scrollbar{ width:8px; }
.search-results::-webkit-scrollbar-thumb{ background:rgba(30,17,72,.18); border-radius:4px; }

.search-results .sr-meta{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 18px;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-muted);
  background:linear-gradient(to bottom, var(--lavender-soft), transparent);
  border-bottom:1px solid rgba(30,17,72,.06);
  position:sticky; top:0; z-index:1;
}
.search-results .sr-meta strong{ color:var(--purple-deep); font-weight:500; }

.search-results .sr-item{
  display:flex; align-items:center; gap:14px;
  padding:12px 18px;
  border-bottom:1px solid rgba(30,17,72,.05);
  transition:background .12s;
  cursor:pointer;
}
.search-results .sr-item:last-child{ border-bottom:none; }
.search-results .sr-item:hover,
.search-results .sr-item.is-active{
  background:var(--lavender-soft);
}
.sr-kind{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.15em; text-transform:uppercase;
  padding:4px 8px;
  border-radius:4px;
  background:var(--cream);
  color:var(--text-muted);
  min-width:64px; text-align:center;
}
.sr-kind[data-kind="article"]{ background:var(--amber-light); color:#B45309; }
.sr-kind[data-kind="level"]{   background:rgba(91,63,217,.12); color:var(--lavender); }
.sr-kind[data-kind="block"]{   background:rgba(30,17,72,.08); color:var(--purple-deep); }
.sr-kind[data-kind="longform"]{ background:rgba(245,158,11,.18); color:#9A6500; }

.sr-body{ flex:1; min-width:0; }
.sr-title{
  font-family:var(--font-sans);
  font-size:14px; font-weight:500;
  color:var(--text-dark);
  line-height:1.35;
  margin:0 0 2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.sr-url{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-muted);
  letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-arrow{
  flex-shrink:0;
  font-size:18px; color:var(--text-muted);
  transition:transform .15s, color .15s;
}
.search-results .sr-item:hover .sr-arrow,
.search-results .sr-item.is-active .sr-arrow{
  color:var(--lavender);
  transform:translateX(3px);
}

.search-results .sr-empty{
  padding:36px 24px;
  text-align:center;
  color:var(--text-muted);
  font-size:13px;
}
.search-results .sr-empty strong{ color:var(--text-dark); font-weight:500; }
.search-results .sr-footer{
  padding:10px 18px;
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-muted);
  background:linear-gradient(to top, var(--cream), transparent);
  border-top:1px solid rgba(30,17,72,.05);
  text-align:center;
}
.search-results .sr-footer a{
  color:var(--lavender); border-bottom:1px solid currentColor;
}
.search-results mark{
  background:rgba(245,158,11,.28);
  color:inherit;
  padding:0 2px; border-radius:2px;
}

@media (max-width:640px){
  .search-results{ max-height:60vh; }
  .sr-kind{ display:none; }
  .sr-item{ padding:11px 14px; }
}

.search-chips{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px;
  max-width:640px; margin:0 auto 36px;
}
.search-chips button{
  padding:7px 14px;
  border:1px solid rgba(91,63,217,.35);
  border-radius:999px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.5px;
  color:var(--lavender);
  background:transparent;
  transition:all .2s;
}
.search-chips button:hover{
  background:var(--lavender);
  color:var(--white);
  border-color:var(--lavender);
}
.stats-bar{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.2px;
  color:var(--text-muted);
  opacity:.85;
}
.stats-bar span{ white-space:nowrap; }

/* ---------- Sección 1.5 — Cuatro razones ---------- */
.s-reasons{
  background:var(--cream);
  padding:100px 0;
}
.s-reasons-head{
  text-align:center;
  margin-bottom:72px;
}
.s-reasons h2{
  font-family:var(--font-serif);
  font-size:clamp(36px,4.5vw,48px);
  line-height:1.1;
  color:var(--purple-deep);
  font-weight:400;
  margin:0;
  text-wrap:balance;
}
.reasons-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
@media(max-width:1023px){ .reasons-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:599px){ .reasons-grid{ grid-template-columns:1fr; gap:40px; } }
.reason{
  display:flex; flex-direction:column; gap:14px;
}
.reason-thumb{
  width:100%;
  aspect-ratio: 1 / 1;
  object-fit:cover;
  border-radius:var(--radius-sm);
  filter:saturate(.92) contrast(1.02);
  margin-bottom:4px;
  transform:translateY(8px);
  opacity:0;
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
}
.reason.is-in .reason-thumb{ transform:translateY(0); opacity:1; }
@media (prefers-reduced-motion: reduce){
  .reason-thumb{ transform:none; opacity:1; transition:none; }
}
.reason-num{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:2px;
  color:var(--lavender);
  font-weight:500;
}
.reason-title{
  font-family:var(--font-serif);
  font-size:24px; line-height:1.2;
  color:var(--purple-deep);
  font-weight:400;
  margin:0;
}
.reason-body{
  font-size:14px;
  line-height:1.6;
  color:var(--text-body);
  margin:0;
  flex:1;
}
.reason-link{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--lavender);
  border-bottom:1px solid var(--lavender);
  align-self:flex-start;
  padding-bottom:2px;
  transition:color .2s;
}
.reason-link:hover{ color:var(--purple-deep); border-bottom-color:var(--purple-deep); }
.s-reasons-close{
  text-align:center;
  margin-top:64px;
  font-family:var(--font-serif);
  font-style:italic;
  font-size:18px;
  color:var(--text-muted);
  max-width:520px;
  margin-left:auto; margin-right:auto;
}

/* ---------- Sección 2 — La diferencia ---------- */
.s-difference{
  padding:100px 0;
  text-align:center;
}
.s-difference h2{
  font-family:var(--font-serif);
  font-size:clamp(40px,5.5vw,68px);
  line-height:1.08;
  color:var(--purple-deep);
  font-weight:400;
  max-width:920px;
  margin:0 auto 40px;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.s-difference .body{
  max-width:560px;
  margin:0 auto;
  font-size:15px;
  line-height:1.7;
  color:var(--text-body);
}

/* ---------- Sección 3 — La cifra ---------- */
.s-number{
  background:var(--purple-deep);
  color:var(--white);
  padding:160px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.s-number::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(91,63,217,.5), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(245,158,11,.12), transparent 55%);
  pointer-events:none;
}
.s-number .s-number-bg{
  position:absolute; inset:-8% 0;
  width:100%; height:116%;
  object-fit:cover; object-position:center;
  opacity:.35;
  filter:saturate(1.05);
  pointer-events:none;
  will-change:transform;
  z-index:0;
}
@media (prefers-reduced-motion: reduce){
  .s-number .s-number-bg{ transform:none !important; }
}
.s-number-inner{ position:relative; z-index:1; }
.s-number .eyebrow{ color:rgba(255,255,255,.6); }
.huge-number{
  font-family:var(--font-serif);
  font-size:clamp(120px,18vw,220px);
  line-height:.9;
  color:var(--white);
  font-weight:400;
  letter-spacing:-.03em;
  margin:8px 0 32px;
  display:block;
}
.s-number-sub{
  max-width:540px;
  margin:0 auto 88px;
  font-size:17px;
  line-height:1.6;
  color:rgba(255,255,255,.85);
}
.s-number h3{
  font-family:var(--font-serif);
  font-size:clamp(34px,3.5vw,44px);
  line-height:1.15;
  color:var(--white);
  font-weight:400;
  max-width:680px;
  margin:0 auto 56px;
  text-wrap:balance;
}
.s-number h3 .lav{ color:#b8a9ff; }

/* ---------- CTA amber ---------- */
.btn-amber{
  display:inline-flex; align-items:center;
  gap:12px;
  padding:18px 32px;
  background:var(--amber);
  color:var(--purple-deep);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:12px; font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
  transition:transform .2s, box-shadow .2s, background .2s;
  box-shadow:0 4px 24px rgba(245,158,11,.3);
}
.btn-amber:hover{
  transform:translateY(-2px);
  background:#fcb226;
  box-shadow:0 10px 32px rgba(245,158,11,.4);
}
.btn-amber .arrow{ font-family:var(--font-serif); font-size:18px; }

.btn-outline{
  display:inline-flex; align-items:center; gap:12px;
  padding:18px 32px;
  border:1px solid rgba(255,255,255,.5);
  color:var(--white);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:12px; font-weight:500;
  letter-spacing:1.5px;
  text-transform:uppercase;
  transition:background .2s, border-color .2s;
}
.btn-outline:hover{
  background:rgba(255,255,255,.08);
  border-color:var(--white);
}

.link-inline{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--lavender);
  border-bottom:1px solid var(--lavender);
  padding-bottom:3px;
  display:inline-block;
  transition:color .2s, border-color .2s;
}
.link-inline:hover{ color:var(--purple-deep); border-bottom-color:var(--purple-deep); }

/* ---------- Sección 4 — Tres mentiras ---------- */
.s-lies{
  padding:100px 0;
  text-align:center;
}
.s-lies-head{ margin-bottom:80px; }
.s-lies h2{
  font-family:var(--font-serif);
  font-size:clamp(36px,4.2vw,52px);
  line-height:1.1;
  color:var(--purple-deep);
  font-weight:400;
  max-width:760px;
  margin:0 auto;
  text-wrap:balance;
}
.lies-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  text-align:left;
}
@media(max-width:899px){ .lies-grid{ grid-template-columns:1fr; } }
.lie-card{
  background:var(--lavender-soft);
  padding:40px 32px;
  border-radius:var(--radius-md);
  display:flex; flex-direction:column; gap:16px;
  border:1px solid rgba(91,63,217,.12);
}
.lie-num{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:2px;
  color:var(--lavender);
  font-weight:500;
}
.lie-card h3{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:26px;
  line-height:1.15;
  color:var(--purple-deep);
  font-weight:400;
  margin:0;
}
.lie-card p{
  font-size:14px;
  line-height:1.65;
  color:var(--text-body);
  margin:0;
}
.lie-card em{ font-style:italic; color:var(--purple-deep); }

/* ---------- Sección 5 — Años del medio ---------- */
.s-middle{
  background:var(--amber-light);
  padding:100px 0;
}
.middle-grid{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:80px;
  align-items:center;
}
@media(max-width:899px){ .middle-grid{ grid-template-columns:1fr; gap:48px; } }
.middle-figure{
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(135deg, rgba(91,63,217,.07) 0 14px, rgba(91,63,217,.03) 14px 28px),
    linear-gradient(180deg, rgba(245,158,11,.18), rgba(91,63,217,.18));
  border-radius:var(--radius-md);
  display:flex; align-items:flex-end;
  padding:28px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.4px;
  color:var(--text-muted);
  text-transform:uppercase;
}
img.middle-figure{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  padding:0;
  background:none;
  filter:saturate(.95) contrast(1.02);
  box-shadow:0 24px 60px rgba(30,17,72,.12);
  transform:translateY(24px) scale(.98);
  opacity:0;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1s ease;
}
img.middle-figure.is-in{ transform:translateY(0) scale(1); opacity:1; }
@media (prefers-reduced-motion: reduce){
  img.middle-figure{ transform:none; opacity:1; transition:none; }
}
.s-middle h2{
  font-family:var(--font-serif);
  font-size:clamp(40px,5vw,64px);
  line-height:1.05;
  color:var(--purple-deep);
  font-weight:400;
  margin:0 0 32px;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.s-middle p{
  font-size:15px;
  line-height:1.75;
  color:var(--text-body);
  margin:0 0 32px;
  max-width:520px;
}

/* ---------- Sección 6 — Nivel 1 ---------- */
.s-level1{
  padding:100px 0;
  text-align:center;
}
.s-level1-head{ margin-bottom:72px; }
.s-level1 h2{
  font-family:var(--font-serif);
  font-size:clamp(36px,4.2vw,52px);
  line-height:1.1;
  color:var(--purple-deep);
  font-weight:400;
  margin:0 auto 16px;
  max-width:760px;
  text-wrap:balance;
}
.s-level1 .subhead{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:17px;
  color:var(--text-muted);
  max-width:560px;
  margin:0 auto;
}
.level1-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  text-align:left;
  margin-bottom:72px;
}
@media(max-width:1023px){ .level1-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:599px){ .level1-grid{ grid-template-columns:1fr; } }
.l1-card{
  background:var(--white);
  border:1px solid rgba(30,17,72,.08);
  border-radius:var(--radius-md);
  padding:32px 28px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position:relative;
  min-height:220px;
}
.l1-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(30,17,72,.08);
  border-color:rgba(91,63,217,.25);
}
.l1-tag{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:1.6px;
  color:var(--lavender);
  text-transform:uppercase;
  font-weight:500;
}
.l1-card h3{
  font-family:var(--font-serif);
  font-size:22px;
  line-height:1.2;
  color:var(--purple-deep);
  font-weight:400;
  margin:0;
}
.l1-card .l1-sub{
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-body);
  margin:0;
  flex:1;
}
.l1-card .l1-arrow{
  font-family:var(--font-serif);
  color:var(--lavender);
  font-size:18px;
  align-self:flex-end;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .25s, transform .25s;
}
.l1-card:hover .l1-arrow{ opacity:1; transform:translateX(0); }

/* ---------- Sección 7 — Nivel 2 carrusel ---------- */
.s-level2{
  background:var(--cream);
  padding:100px 0;
}
.s-level2-head{
  text-align:center;
  margin-bottom:64px;
}
.s-level2 h2{
  font-family:var(--font-serif);
  font-size:clamp(36px,4.2vw,52px);
  line-height:1.1;
  color:var(--purple-deep);
  font-weight:400;
  margin:0 auto 16px;
  max-width:840px;
  text-wrap:balance;
}
.s-level2 .subhead{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:16px;
  color:var(--text-muted);
}
.carousel{
  position:relative;
}
.carousel-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:8px 0 32px;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.l2-card{
  flex:0 0 calc(28% - 16px);
  min-width:260px;
  scroll-snap-align:start;
  background:var(--white);
  border:1px solid rgba(30,17,72,.08);
  border-radius:var(--radius-md);
  padding:32px 28px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .3s, box-shadow .3s, border-color .3s;
  text-decoration:none;
  color:inherit;
  position:relative;
  min-height:240px;
}
@media(max-width:1023px){ .l2-card{ flex-basis:42%; } }
@media(max-width:639px){ .l2-card{ flex-basis:80%; min-width:0; } }
.l2-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(30,17,72,.1);
  border-color:rgba(91,63,217,.25);
}
.l2-tag{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:1.6px;
  color:var(--lavender);
  text-transform:uppercase;
  font-weight:500;
}
.l2-card h3{
  font-family:var(--font-serif);
  font-size:22px;
  line-height:1.18;
  color:var(--purple-deep);
  font-weight:400;
  margin:0;
}
.l2-card .l2-sub{
  font-size:13.5px;
  line-height:1.55;
  color:var(--text-body);
  margin:0;
  flex:1;
}
.l2-card .l2-arrow{
  font-family:var(--font-serif);
  font-size:20px;
  color:var(--lavender);
  align-self:flex-end;
  transition:transform .25s;
}
.l2-card:hover .l2-arrow{ transform:translateX(4px); }

.carousel-controls{
  display:flex; align-items:center; justify-content:center;
  gap:24px;
  margin-top:24px;
}
.carousel-btn{
  width:44px; height:44px;
  border:1px solid rgba(30,17,72,.2);
  border-radius:50%;
  background:var(--white);
  display:grid; place-items:center;
  color:var(--purple-deep);
  font-family:var(--font-serif);
  font-size:22px;
  transition:all .2s;
}
.carousel-btn:hover:not(:disabled){
  background:var(--purple-deep);
  color:var(--white);
  border-color:var(--purple-deep);
}
.carousel-btn:disabled{ opacity:.35; cursor:not-allowed; }
.carousel-dots{
  display:flex; gap:8px;
}
.carousel-dots button{
  width:8px; height:8px; border-radius:50%;
  background:rgba(30,17,72,.2);
  transition:background .2s, transform .2s;
}
.carousel-dots button.active{
  background:var(--lavender);
  transform:scale(1.4);
}
.s-level2-cta{
  text-align:center;
  margin-top:48px;
}

/* ---------- Sección 8 — Cita ancla ---------- */
.s-quote{
  background:var(--cream);
  padding:110px 0;
  text-align:center;
  border-top:1px solid rgba(30,17,72,.06);
  position:relative;
  overflow:hidden;
}
.s-quote::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("../img/quote-paper.jpg");
  background-size:cover;
  background-position:center;
  opacity:.22;
  mix-blend-mode:multiply;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 35%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 35%, transparent 90%);
  pointer-events:none;
}
.s-quote > .container{ position:relative; z-index:1; }
.s-quote blockquote{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.3;
  color:var(--purple-deep);
  font-weight:400;
  max-width:820px;
  margin:0 auto 40px;
  text-wrap:balance;
}
.s-quote cite{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--text-muted);
  font-style:normal;
}

/* ---------- Sección 9 — 9 bloques ---------- */
.s-blocks{
  padding:100px 0;
}
.s-blocks-head{
  text-align:center;
  margin-bottom:72px;
}
.s-blocks h2{
  font-family:var(--font-serif);
  font-size:clamp(36px,4.2vw,52px);
  line-height:1.1;
  color:var(--purple-deep);
  font-weight:400;
  margin:0 auto 16px;
  max-width:780px;
  text-wrap:balance;
}
.s-blocks .subhead{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:16px;
  color:var(--text-muted);
  max-width:560px;
  margin:0 auto;
}
.blocks-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(30,17,72,.08);
  border:1px solid rgba(30,17,72,.08);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:64px;
}
@media(max-width:899px){ .blocks-grid{ grid-template-columns:1fr; } }
.block{
  background:var(--white);
  padding:36px 32px;
  display:flex; flex-direction:column; gap:12px;
  transition:background .25s;
  position:relative;
  overflow:hidden;
  min-height:280px;
}
.block::after{
  content:"";
  position:absolute;
  right:-8%;
  bottom:-15%;
  width:78%;
  height:88%;
  background-image:var(--block-img, none);
  background-size:cover;
  background-position:center;
  opacity:.40;
  transition:opacity .4s ease, transform .6s cubic-bezier(.2,.7,.2,1);
  mask-image:radial-gradient(ellipse 70% 70% at 60% 55%, #000 35%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 55%, #000 35%, transparent 90%);
  pointer-events:none;
  z-index:0;
  transform:translate(8px, 8px);
}
.block--aging       { --block-img: url("../img/blocks/aging.jpg"); }
.block--cardio      { --block-img: url("../img/blocks/cardio.jpg"); }
.block--neuro       { --block-img: url("../img/blocks/neuro.jpg"); }
.block--liver       { --block-img: url("../img/blocks/liver.jpg"); }
.block--long-covid  { --block-img: url("../img/blocks/long-covid.jpg"); }
.block--autoimmune  { --block-img: url("../img/blocks/autoimmune.jpg"); }
.block--kidney      { --block-img: url("../img/blocks/kidney.jpg"); }
.block--other       { --block-img: url("../img/blocks/other.jpg"); }
.block--performance { --block-img: url("../img/blocks/performance.jpg"); }
.block > *{ position:relative; z-index:1; }
.block:hover::after{
  opacity:.66;
  transform:translate(0,0);
}
@media (prefers-reduced-motion: reduce){
  .block::after{ transition:opacity .2s ease; transform:none; }
}
.block:hover{ background:var(--lavender-soft); }
.block-letter{
  font-family:var(--font-mono);
  font-style:normal;
  font-size:13px;
  letter-spacing:2.4px;
  color:var(--lavender);
  line-height:1;
  margin-bottom:6px;
  font-weight:500;
}
.block-title{
  font-family:var(--font-serif);
  font-size:22px;
  line-height:1.2;
  color:var(--purple-deep);
  font-weight:400;
  margin:0;
}
.block-count{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--text-muted);
}
.block-desc{
  font-size:14px;
  line-height:1.6;
  color:var(--text-body);
  margin:0;
}
.block-arrow{
  margin-top:auto;
  padding-top:16px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--lavender);
}
.s-blocks-cta{ text-align:center; }

/* ---------- Sección 10 — CTA dual ---------- */
.s-cta-dual{
  background:var(--purple-deep);
  color:var(--white);
  padding:160px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.s-cta-dual::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 80%, rgba(245,158,11,.1), transparent 50%),
    radial-gradient(circle at 75% 20%, rgba(91,63,217,.4), transparent 55%);
  pointer-events:none;
}
.s-cta-dual-inner{ position:relative; z-index:1; }
.s-cta-dual h2{
  font-family:var(--font-serif);
  font-size:clamp(40px,5.5vw,68px);
  line-height:1.05;
  color:var(--white);
  font-weight:400;
  margin:0 auto 80px;
  max-width:780px;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.s-cta-dual h2 .lav{ color:#b8a9ff; }
.dual-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  text-align:left;
  max-width:980px;
  margin:0 auto;
}
@media(max-width:899px){ .dual-grid{ grid-template-columns:1fr; gap:64px; } }
.dual-col{
  display:flex; flex-direction:column; gap:20px;
  align-items:flex-start;
  position:relative;
  padding:36px 28px;
  border-radius:var(--radius-lg);
  isolation:isolate;
}
.dual-col::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--dual-img, none);
  background-size:cover;
  background-position:var(--dual-pos, center);
  opacity:.32;
  border-radius:inherit;
  mask-image:radial-gradient(ellipse 80% 100% at 70% 50%, #000 28%, transparent 92%);
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 70% 50%, #000 28%, transparent 92%);
  pointer-events:none;
  z-index:-1;
  transition:opacity .5s ease;
}
.dual-col:hover::before{ opacity:.48; }
.dual-col--strength{ --dual-img: url("../img/cta-strength.jpg"); --dual-pos: center 18%; }
.dual-col--clarity{  --dual-img: url("../img/cta-clarity.jpg");  --dual-pos: center; }
.dual-col h3{
  font-family:var(--font-serif);
  font-size:32px;
  line-height:1.15;
  color:var(--white);
  font-weight:400;
  margin:0;
}
.dual-col p{
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.78);
  margin:0;
  max-width:380px;
}
.dual-col p em{
  font-style:italic;
  display:block;
  margin-top:8px;
  color:rgba(255,255,255,.6);
  font-family:var(--font-serif);
  font-size:14px;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--purple-darker);
  color:rgba(255,255,255,.7);
  padding:80px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:48px;
  margin-bottom:64px;
}
@media(max-width:899px){
  .footer-grid{ grid-template-columns:repeat(2,1fr); gap:48px 32px; }
}
@media(max-width:539px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col h4{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:500;
  color:rgba(255,255,255,.55);
  margin:0 0 20px;
}
.footer-col ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:12px;
}
.footer-col a{
  font-size:14px;
  color:rgba(255,255,255,.75);
  transition:color .2s;
}
.footer-col a:hover{ color:var(--white); }
.footer-identity{
  display:flex; flex-direction:column; gap:16px;
}
.footer-identity .footer-logo{
  display:flex; align-items:center; gap:10px;
}
.footer-identity .footer-logo img{
  height:28px; width:auto;
  filter:brightness(0) invert(1) opacity(.95);
}
.footer-identity .identity-mark{
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #8a6fee, var(--lavender) 75%);
  display:grid; place-items:center;
  color:var(--white); font-family:var(--font-serif); font-size:16px;
}
.footer-identity .identity-name{
  font-family:var(--font-serif);
  font-size:20px;
  color:var(--white);
  margin:0;
  font-weight:400;
}
.footer-identity p{
  font-size:13.5px;
  line-height:1.65;
  color:rgba(255,255,255,.6);
  margin:0;
  max-width:280px;
}
.newsletter-title{
  font-family:var(--font-serif);
  font-size:24px;
  color:var(--white);
  margin:0 0 8px;
  font-weight:400;
}
.newsletter-body{
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,255,255,.65);
  margin:0 0 16px;
}
.newsletter-form{
  display:flex;
  gap:8px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:4px;
  background:rgba(255,255,255,.04);
}
.newsletter-form input{
  flex:1; min-width:0;
  border:none; background:transparent;
  padding:10px 14px;
  font-size:13px;
  color:var(--white);
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,.4); }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{
  padding:10px 18px;
  background:var(--lavender);
  color:var(--white);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  transition:background .2s;
}
.newsletter-form button:hover{ background:#7259e8; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:32px;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.8px;
  color:rgba(255,255,255,.45);
  line-height:1.7;
}

/* ---------- Reveal helper for IntersectionObserver ---------- */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
  will-change:transform, opacity;
}
.reveal.is-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Mobile menu (editorial hamburger) ---------- */
.menu-toggle{
  display:none; position:relative; z-index:1001;
  width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid rgba(30,17,72,.18); border-radius:999px; background:transparent;
  padding:0; cursor:pointer; transition:background .18s, border-color .18s;
}
.menu-toggle:hover{ background:var(--lavender-soft); border-color:var(--lavender); }
.menu-toggle .bar{
  position:absolute; left:11px; width:22px; height:1.5px; background:var(--text-dark);
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.menu-toggle .bar:nth-child(1){ top:16px; }
.menu-toggle .bar:nth-child(2){ top:22px; width:14px; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(1){ top:21px; transform:rotate(45deg); width:22px; }
.menu-toggle[aria-expanded="true"] .bar:nth-child(2){ top:21px; transform:rotate(-45deg); width:22px; }
.mobile-drawer{
  position:fixed; inset:0; z-index:1000;
  background:var(--white);
  display:none; flex-direction:column;
  padding:84px 32px 48px;
  overflow-y:auto;
  animation:drawerIn .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes drawerIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.mobile-drawer.is-open{ display:flex; }
.mobile-drawer .md-eyebrow{
  font-family:var(--font-mono); font-size:10px; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--text-muted); margin:0 0 28px;
}
.mobile-drawer .md-nav{
  display:flex; flex-direction:column; gap:4px; list-style:none; padding:0; margin:0 0 44px;
}
.mobile-drawer .md-nav a{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  font-family:var(--font-serif); font-size:34px; font-weight:400;
  color:var(--text-dark); padding:14px 0; line-height:1.1;
  border-bottom:1px solid rgba(30,17,72,.08);
  transition:color .2s, padding-left .2s;
}
.mobile-drawer .md-nav a:hover{ color:var(--lavender); padding-left:6px; }
.mobile-drawer .md-nav a .arr{ font-family:var(--font-mono); font-size:18px; color:var(--lavender); }
.mobile-drawer .md-lang{
  margin-top:auto; padding-top:32px;
  border-top:1px solid rgba(30,17,72,.1);
}
.mobile-drawer .md-lang span{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:2.4px;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:14px;
}
.mobile-drawer .md-lang a{
  display:inline-block; padding:10px 22px; margin-right:8px;
  border:1px solid rgba(30,17,72,.18); border-radius:999px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:1.6px;
  color:var(--text-body);
}
.mobile-drawer .md-lang a[aria-pressed="true"]{ background:var(--purple-deep); color:var(--white); border-color:var(--purple-deep); }
body.menu-open{ overflow:hidden; }

/* ---------- Mobile ---------- */
@media(max-width:1023px){
  :root{ --gutter:32px; }
  .header-nav{ gap:14px; }
  .header-nav .nav-item{ display:none; }
  .header-nav .lang-toggle{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .s-difference, .s-lies, .s-middle, .s-level1, .s-level2, .s-blocks, .s-number, .s-cta-dual{
    padding:90px 0;
  }
  .s-quote{ padding:120px 0; }
  .hero{ padding:64px 0 80px; }
}
@media(max-width:639px){
  :root{ --gutter:24px; }
  .hero{ padding:48px 0 72px; }
  .hero-deck{ margin-bottom:40px; }
  .search-input{ height:56px; padding-left:48px; font-size:15px; }
  .search-icon{ left:18px; width:18px; height:18px; }
  .stats-bar{ font-size:10px; line-height:1.8; }
  .s-difference, .s-lies, .s-middle, .s-level1, .s-level2, .s-blocks, .s-number, .s-cta-dual{
    padding:72px 0;
  }
  .s-number{ padding:96px 0; }
  .s-quote{ padding:96px 0; }
  .footer-identity p{ max-width:none; }
}

/* WCAG 2.4.7 — keyboard focus indicator */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #F59E0B!important;outline-offset:2px}

/* ---------- Search results mobile positioning fix ---------- */
@media(max-width:639px){
  .search-results, .header-search-results, #searchResults{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    margin-top:8px !important;
    max-height:60vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:100 !important;
    box-shadow:0 24px 48px -8px rgba(30,17,72,.22) !important;
  }
  /* Long URLs and titles must wrap, not push the row sideways */
  .search-results .sr-item{
    align-items:flex-start !important;
    min-width:0 !important;
  }
  .search-results .sr-body{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  .search-results .sr-title{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:normal !important;
  }
  .search-results .sr-url{
    overflow-wrap:anywhere !important;
    word-break:break-all !important;
    white-space:normal !important;
    max-width:100% !important;
  }
  /* Prevent search box from jumping when results render */
  .search-wrap, .hero-search{ position:relative; }
}


/* ---------- Adjacent section spacing — tightened on desktop ---------- */
@media(min-width:1024px){
  /* Same-color adjacent sections (cream → cream) collapse to a single visual block */
  .s-level2 + .s-quote{ padding-top:60px; }   /* both cream */
  .s-quote{ padding-bottom:80px; }
  .s-level2{ padding-bottom:80px; }

  /* After the dense blocks grid, the next section needs less air */
  .s-blocks + .s-level1{ padding-top:70px; }
  .s-blocks{ padding-bottom:70px; }

  /* After reasons (cream) → into difference (white): tighter */
  .s-reasons + .s-difference{ padding-top:80px; }

  /* Lies → middle (cream): tighter */
  .s-lies + .s-middle{ padding-top:70px; }
}


/* ---------- Sección 5 — Slider editorial (8 estudios) ---------- */
.s-middle .middle-eyebrow{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:2.2px; text-transform:uppercase; color:var(--text-muted);
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:24px;
}
.s-middle .middle-eyebrow .accent{ color:var(--lavender); }
.s-middle .middle-lvl{
  font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:1.4px;
  padding:3px 7px; border-radius:4px;
  background:rgba(255,255,255,.85);
}
.s-middle .middle-lvl.lv1{ color:var(--amber); border:1px solid rgba(245,158,11,.35); }
.s-middle .middle-lvl.lv2{ color:var(--lavender); border:1px solid rgba(91,63,217,.3); }

/* Slider — grid-stack: every slide occupies same cell so the slider
   auto-sizes to the tallest slide. Avoids absolute-positioned slides
   bleeding into the next section when image height > a fixed min-height. */
.middle-slider{
  position:relative;
  display:grid;
  grid-template-areas:"stack";
}
.middle-slide{
  grid-area:stack;
  opacity:0; visibility:hidden;
  transition:opacity .55s ease, visibility 0s linear .55s;
  pointer-events:none;
}
.middle-slide.is-active{
  opacity:1; visibility:visible;
  transition:opacity .55s ease, visibility 0s linear 0s;
  pointer-events:auto;
}

/* Controls below slider */
.middle-controls{
  margin-top:36px;
  display:flex; align-items:center; justify-content:center; gap:22px;
  font-family:var(--font-mono);
}
.middle-controls .ms-prev,
.middle-controls .ms-next{
  width:44px; height:44px;
  border:1px solid rgba(30,17,72,.18);
  border-radius:999px;
  background:transparent;
  color:var(--text-body); font-size:16px;
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.middle-controls .ms-prev:hover,
.middle-controls .ms-next:hover{
  background:var(--lavender-soft); border-color:var(--lavender); color:var(--purple-deep);
}
.middle-controls .ms-dots{
  display:flex; gap:8px;
}
.middle-controls .ms-dot{
  width:8px; height:8px; padding:0;
  border:1px solid rgba(30,17,72,.25); border-radius:999px;
  background:transparent; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
}
.middle-controls .ms-dot.is-active{
  background:var(--purple-deep); border-color:var(--purple-deep);
  transform:scale(1.15);
}
.middle-controls .ms-dot:hover{ border-color:var(--lavender); }
.middle-controls .ms-counter{
  font-size:11px; letter-spacing:1.6px; color:var(--text-muted);
  margin-left:8px;
}
.middle-controls .ms-counter .ms-cur{ color:var(--purple-deep); font-weight:600; }

@media(max-width:899px){
  .middle-controls{ margin-top:24px; gap:14px; }
}
@media(max-width:639px){
  /* Mobile: scroll-snap horizontal carousel — full-width cards (no peek),
     swipeable with the finger, with refined progress segments below. */
  .s-middle{ padding:40px 0 32px; }
  .s-middle .container{ padding:0; }
  .s-middle-head{ padding:0 22px; }

  .middle-slider{
    display:flex !important;
    align-items:flex-start;
    grid-template-areas:none !important;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    gap:0;
    padding:0;
    scrollbar-width:none;
  }
  .middle-slider::-webkit-scrollbar{ display:none; }

  .middle-slide{
    display:block !important;
    flex:0 0 100%;
    width:100%;
    padding:0 22px;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    align-self:flex-start;
  }

  .middle-slide .middle-grid{
    display:flex !important;
    flex-direction:column;
    gap:14px !important;
  }
  .middle-figure{
    aspect-ratio:4/5;
    max-height:280px;
    width:100%;
    object-fit:cover;
    object-position:center 30%;
    border-radius:14px;
  }
  .middle-copy{
    padding:2px 4px 0;
    position:relative;
  }
  /* Subtle lavender chevron on the right edge of every slide,
     aligned with the eyebrow row — communicates "swipeable". */
  .middle-copy::after{
    content:"→";
    position:absolute;
    top:0;
    right:0;
    font-family:var(--font-mono);
    font-size:18px;
    font-weight:500;
    line-height:1;
    color:var(--lavender);
    opacity:.55;
    pointer-events:none;
    animation:middleArrowNudge 2.4s ease-in-out infinite;
  }
  @keyframes middleArrowNudge{
    0%,100%{ transform:translateX(0); opacity:.45; }
    50%   { transform:translateX(5px); opacity:.95; }
  }
  @media (prefers-reduced-motion: reduce){
    .middle-copy::after{ animation:none; opacity:.7; }
  }
  .s-middle .middle-eyebrow{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:6px;
    padding-right:30px;
    font-size:11.5px !important;
    letter-spacing:1.4px !important;
    line-height:1.4;
  }
  .s-middle h2{
    font-size:28px !important;
    line-height:1.12 !important;
    margin:4px 0 10px !important;
  }
  .s-middle p{
    font-size:15.5px !important;
    line-height:1.46 !important;
    margin:0 0 12px !important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .s-middle .middle-cta,
  .s-middle .link-inline{
    font-size:12px;
    letter-spacing:1px;
  }

  /* Subtle one-time nudge — on first view, the carousel gently
     bounces right ~28px to signal swipeability, then settles back.
     Triggered via JS by adding .is-nudge to .middle-slider. */
  .middle-slider.is-nudge{
    animation:swipeNudgeMobile 1300ms cubic-bezier(.34,1.2,.5,1) 1;
  }
  @keyframes swipeNudgeMobile{
    0%   { transform:translateX(0); }
    35%  { transform:translateX(-22px); }
    65%  { transform:translateX(-22px); }
    100% { transform:translateX(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .middle-slider.is-nudge{ animation:none; }
  }

  /* Refined controls: arrows on outside, segmented progress in middle */
  .middle-controls{
    margin-top:22px;
    padding:0 22px;
    gap:14px;
    justify-content:space-between;
    flex-wrap:nowrap;
  }
  .middle-controls .ms-prev,
  .middle-controls .ms-next{
    width:38px; height:38px;
    border-color:rgba(30,17,72,.22);
    font-size:15px;
    color:var(--purple-deep);
    flex-shrink:0;
  }
  /* Convert the 8 dots into a segmented progress bar */
  .middle-controls .ms-dots{
    flex:1;
    gap:4px;
    align-items:center;
    min-width:0;
    max-width:none;
  }
  .middle-controls .ms-dot{
    flex:1;
    width:auto; height:3px;
    border:none;
    border-radius:99px;
    background:rgba(30,17,72,.14);
    padding:0;
    transform:none;
    transition:background .25s ease;
  }
  .middle-controls .ms-dot.is-active{
    background:var(--purple-deep);
    transform:none;
  }
  .middle-controls .ms-dot:hover{ border:none; background:rgba(30,17,72,.28); }
  .middle-controls .ms-dot.is-active:hover{ background:var(--purple-deep); }
  .middle-controls .ms-counter{
    font-size:12px;
    letter-spacing:.8px;
    color:var(--text-body);
    margin-left:0;
    flex-shrink:0;
  }
}


/* ---------- Sección 6 + 7 — Study cards ---------- */
.study-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); border:1px solid rgba(30,17,72,.08);
  border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height:520px;
}
.study-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(30,17,72,.12);
  border-color:rgba(91,63,217,.3);
}
.study-card-image{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(135deg,#1E1148 0%,#5B3FD9 100%);
}
.study-card-image img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 25%;
  filter:saturate(.85);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.study-card:hover .study-card-image img{ transform:scale(1.04); }
.study-card-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 50%, rgba(30,17,72,.08) 100%),
    linear-gradient(135deg, rgba(91,63,217,.10) 0%, rgba(245,158,11,.04) 100%);
  mix-blend-mode:multiply;
}
.study-card-body{
  padding:22px 24px 22px; display:flex; flex-direction:column; gap:10px; flex:1;
}
.study-card-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:1.4px; text-transform:uppercase;
}
.study-card-num{ color:var(--amber); font-weight:600; font-size:11px; }
.study-card-tag{ color:var(--text-muted); }
.study-card-meta .lv{
  font-weight:700; padding:3px 7px; border-radius:4px;
  font-size:9.5px; letter-spacing:1.2px;
}
.study-card-meta .lv.lv1{ color:var(--amber); border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.08); }
.study-card-meta .lv.lv2{ color:var(--lavender); border:1px solid rgba(91,63,217,.3); background:rgba(91,63,217,.06); }
.study-card-title{
  font-family:var(--font-serif); font-size:19px; line-height:1.22;
  color:var(--purple-deep); font-weight:400; margin:4px 0 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.study-card-key{
  font-size:13.5px; line-height:1.55; color:var(--text-body); margin:6px 0 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.study-card-arrow{
  margin-top:auto; padding-top:14px;
  font-family:var(--font-serif); font-size:22px; color:var(--lavender);
  align-self:flex-end;
  transition:transform .25s;
}
.study-card:hover .study-card-arrow{ transform:translateX(4px); }

/* L2 carousel sizing */
.carousel-track .study-card{
  flex:0 0 calc(32% - 16px); min-width:300px;
  scroll-snap-align:start;
}
@media(max-width:1023px){ .carousel-track .study-card{ flex-basis:46%; min-width:260px; } }
@media(max-width:639px){ .carousel-track .study-card{ flex-basis:84%; min-width:0; } }

/* ============================================================
   MOBILE LEGIBILITY PASS — 2026-05
   ─────────────────────────────────────────────────────────────
   Objetivo: en móvil, ningún texto por debajo de ~17px para
   párrafos y ~13px para meta. Subir contraste de texto muted.
   No toca la sección /cuerpo/ (tiene CSS propio).
   ============================================================ */
@media (max-width: 767px){
  /* Darker secondary text → mayor contraste (de 5.1:1 a ~8.6:1) */
  :root{
    --text-muted:#4A4458;
  }

  /* Base body bump: 15 → 17 */
  body{
    font-size:17px;
    line-height:1.55;
    color:var(--text-body);
  }

  /* Eyebrows / kicker labels — ya no microcopy ilegible */
  .eyebrow{
    font-size:12.5px;
    letter-spacing:1.6px;
    color:var(--text-body);
    margin-bottom:18px;
  }
  .eyebrow--light{ color:rgba(255,255,255,.82); }

  /* Hero */
  .hero-deck{
    font-size:18px;
    line-height:1.5;
    color:var(--text-body);
    margin-bottom:40px;
  }
  .search-eyebrow{
    font-size:12.5px;
    letter-spacing:1.6px;
    color:var(--text-body);
  }
  .search-input,
  .search-input::placeholder{ font-size:17px; }
  .search-chips button{
    font-size:13px;
    letter-spacing:.3px;
    color:var(--lavender);
  }
  .stats-bar{
    font-size:13px;
    letter-spacing:.8px;
    line-height:1.8;
    color:var(--text-body);
    opacity:1;
  }

  /* Sección 1.5 — Razones */
  .reason-num{
    font-size:12.5px; letter-spacing:1.6px;
  }
  .reason-title{ font-size:26px; }
  .reason-body{
    font-size:17px;
    line-height:1.5;
    color:var(--text-body);
  }
  .reason-link{
    font-size:13px; letter-spacing:1.2px;
  }

  /* Sección 2 — Diferencia */
  .s-difference .lead,
  .s-difference p{
    font-size:17px;
    line-height:1.6;
    color:var(--text-body);
  }

  /* Sección 3 — La cifra (sobre fondo oscuro) */
  .s-number-sub{
    font-size:17px;
    line-height:1.55;
    color:rgba(255,255,255,.92);
  }

  /* Sección 4 — Mentiras / cartas de cita */
  .lie-num{
    font-size:12.5px; letter-spacing:1.6px;
  }
  .lie-card h3{ font-size:24px; line-height:1.2; }
  .lie-card p{
    font-size:17px;
    line-height:1.55;
    color:var(--text-body);
  }

  /* Sección 5 — Slider editorial */
  .s-middle p{
    font-size:17px;
    line-height:1.6;
    color:var(--text-body);
  }
  .s-middle .middle-eyebrow{
    font-size:12.5px;
    letter-spacing:1.6px;
    color:var(--text-body);
  }
  .s-middle .middle-lvl{
    font-size:11px; letter-spacing:1.2px;
  }

  /* Subheads italicas (varias secciones) */
  .s-level1 .subhead,
  .s-level2 .subhead,
  .s-blocks .subhead{
    font-size:18px;
    line-height:1.5;
    color:var(--text-body);
  }

  /* Sección 6/7 — Cartas L1 / L2 */
  .l1-tag, .l2-tag{
    font-size:12px;
    letter-spacing:1.3px;
  }
  .l1-card h3, .l2-card h3{ font-size:22px; }
  .l1-card .l1-sub,
  .l2-card .l2-sub{
    font-size:17px;
    line-height:1.5;
    color:var(--text-body);
  }

  /* Sección 8 — Cita ancla */
  .s-quote cite{
    font-size:12.5px;
    letter-spacing:1.8px;
  }

  /* Sección 9 — Bloques anatómicos */
  .block-letter{
    font-size:13px;
    letter-spacing:1.8px;
  }
  .block-title{ font-size:23px; line-height:1.18; }
  .block-count{
    font-size:13px;
    letter-spacing:1.2px;
    color:var(--text-body);
  }
  .block-desc{
    font-size:17px;
    line-height:1.5;
    color:var(--text-body);
  }
  .block-arrow{
    font-size:13px;
    letter-spacing:1.2px;
  }

  /* Botones / links inline */
  .btn-amber,
  .btn-outline{
    font-size:14px;
    letter-spacing:1px;
  }
  .link-inline{
    font-size:13px;
    letter-spacing:1.1px;
  }

  /* Header chrome (variantes legacy) */
  .header-logo{ font-size:12px; letter-spacing:1.2px; }
  .header-nav{ font-size:12px; letter-spacing:1.2px; }
  .lang-toggle,
  .lang-toggle a{ font-size:12px; letter-spacing:.8px; }

  /* Search results dropdown */
  .sr-title{ font-size:15.5px; line-height:1.35; }
  .sr-url{ font-size:11.5px; }
  .sr-empty{ font-size:14px; }
  .sr-eyebrow,
  .sr-footer{ font-size:11.5px; letter-spacing:.12em; }
}