/* ============================================================
   APEX MUSIC ACADEMY — v3 Design System
   "Kinetic warmth" · editorial serif + kinetic product craft,
   translated to Apex's warm brand (cream / lime / blue / espresso).

   Shared stylesheet: index.html + en.html link this directly.
   Instrument pages inherit tokens + shell (nav/footer/type) so the
   whole site reads as one system. Class contracts match the
   existing markup + JS hooks — this ELEVATES, never renames.

   Light is the default, warm brand look. Dark is a warm espresso
   theme (never cold-tech). Editorial + footer surfaces use --ink,
   an always-dark warm surface, so they stay cinematic in BOTH
   themes. Fully reduced-motion + focus-visible aware.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --crema:#FAF8F4;          /* page background */
  --bg:#FAF8F4;
  --superficie:#EEEAE4;     /* muted surface */
  --surface:#FFFFFF;        /* raised card */
  --borde:#DDD9D3;
  --hair:rgba(44,44,44,.09);
  --texto:#2C2C2C;
  --texto-suave:#635D57;
  --azul:#0078A3;           /* primary blue */
  --azul-light:#00A8CC;
  --azul-deep:#005F82;
  --acento:#BFCB00;         /* lime accent */
  --acento-text:#7A8500;    /* lime, AA on light */
  --on-azul:#fff;           /* texto seguro sobre --azul/--azul-light/--azul-deep/--acento-text,
                               que se invierten en oscuro (oliva -> lime claro) */
  /* Segundo acento: azul REAL (decision de Axel, 2026-07-28). El lime sigue
     siendo el acento principal -- esto NO revierte la migracion, es un
     sistema de dos acentos: LIME = pide una decision del usuario (botones,
     chips/cards seleccionables, badges de venta); AZUL = orienta o informa
     sin pedir nada (navegacion, texto informativo, prueba social, estados
     neutros). --azul/--azul-light/--azul-deep de arriba son LIME desde la
     migracion (el nombre quedo, el valor no) -- por eso el azul real usa
     nombres honestos nuevos, --info*, para no confundir a quien lea el CSS.
     Valores = el azul historico de la marca (#0078A3, el que sigue en
     backend/webhook.gs) + el juego dark que ya vivia en --azul ANTES de la
     migracion (quedaba sombreado por la capa editorial de abajo, nunca se
     borro). Ya pasan AA sin oscurecerlos: 4.70:1 sobre --crema. */
  --info:#0078A3;
  --info-light:#00A8CC;
  --info-deep:#005F82;
  --ink:#211A13;            /* always-dark warm surface (editorial/footer) */
  --on-ink:#F6F1E8;
  --on-ink-soft:rgba(246,241,232,.60);
  --on-ink-faint:rgba(246,241,232,.34);
  --ink-borde:rgba(246,241,232,.13);
  --sombra:0 2px 16px rgba(44,44,44,.06);
  --sombra-lg:0 22px 60px -24px rgba(44,44,44,.24);
  --glow:rgba(0,120,163,.16);
  --radius-sm:6px;
  --radius:12px;
  --radius-lg:20px;
  --container:1140px;
  --sans:'DM Sans',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --step:clamp(15px,.4vw + 14px,16px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --crema:#17130E; --bg:#17130E;
    --superficie:#211B15;
    --surface:#241E17;
    --borde:rgba(246,241,232,.11);
    --hair:rgba(246,241,232,.09);
    --texto:#F3EEE7;
    --texto-suave:#B7AC9F;
    --azul:#3FB4D6; --azul-light:#63C9E9; --azul-deep:#8AD8F0;
    --acento:#D2DD3E; --acento-text:#D8E15E;
    --on-azul:#1B1D00;
    --info:#3FB4D6; --info-light:#63C9E9; --info-deep:#8AD8F0;
    --ink:#100D0A; --on-ink:#F6F1E8;
    --sombra:0 2px 16px rgba(0,0,0,.4);
    --sombra-lg:0 28px 72px -28px rgba(0,0,0,.75);
    --glow:rgba(63,180,214,.22);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --crema:#17130E; --bg:#17130E;
  --superficie:#211B15;
  --surface:#241E17;
  --borde:rgba(246,241,232,.11);
  --hair:rgba(246,241,232,.09);
  --texto:#F3EEE7;
  --texto-suave:#B7AC9F;
  --azul:#3FB4D6; --azul-light:#63C9E9; --azul-deep:#8AD8F0;
  --acento:#D2DD3E; --acento-text:#D8E15E;
  --on-azul:#1B1D00;
  --info:#3FB4D6; --info-light:#63C9E9; --info-deep:#8AD8F0;
  --ink:#100D0A; --on-ink:#F6F1E8;
  --sombra:0 2px 16px rgba(0,0,0,.4);
  --sombra-lg:0 28px 72px -28px rgba(0,0,0,.75);
  --glow:rgba(63,180,214,.22);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:var(--step);
  color:var(--texto);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .5s ease,color .5s ease;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--acento);color:var(--ink)}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* subtle paper grain (calmer than v2, brand-warm) */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{opacity:.05;mix-blend-mode:overlay}}
:root[data-theme="dark"] body::after{opacity:.05;mix-blend-mode:overlay}

/* scroll progress bar */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--info),var(--acento));
  animation:scroll-track linear;animation-timeline:scroll();
}
@keyframes scroll-track{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);color:var(--texto);text-wrap:balance}
h2{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:600;line-height:1.05;letter-spacing:-.012em;margin-bottom:12px}
section{padding:clamp(72px,9vw,120px) 0}
.section-label{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);text-transform:uppercase;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;
  color:var(--info);margin-bottom:16px;
}
.section-label::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
.section-sub{color:var(--texto-suave);margin-bottom:48px;max-width:56ch;font-size:1rem;line-height:1.75}

/* section rhythm dividers */
#pilares,#precios{border-bottom:1px solid var(--hair)}

/* ---------- buttons ---------- */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--texto);color:var(--bg);
  padding:15px 28px;border-radius:var(--radius-sm);
  font-family:var(--sans);font-weight:600;font-size:.9rem;letter-spacing:.01em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  line-height:1;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .22s,opacity .22s;
  touch-action:manipulation;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sombra-lg)}
.btn-primary:active{transform:translateY(0)}
.btn-acento{background:var(--azul);color:#fff}
.btn-acento:hover{background:var(--azul-deep)}
:root[data-theme="dark"] .btn-primary{background:var(--texto);color:#17130E}
:root[data-theme="dark"] .btn-acento{background:var(--azul);color:#08222b}

/* ---------- header / nav ---------- */
#header{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:12px 0;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
#header.scrolled{border-bottom:1px solid var(--hair)}
#header .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo-wrap{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto)}
.logo-icon{height:30px;width:auto;display:block}
:root[data-theme="light"] .logo-icon,:root:not([data-theme]) .logo-icon{mix-blend-mode:multiply}
:root[data-theme="dark"] .logo-icon{filter:brightness(0) invert(1);opacity:.9}
.logo-text{font-family:var(--serif);font-size:1.08rem;font-weight:500;letter-spacing:.02em;color:var(--texto);line-height:1;transition:font-weight .25s ease}
.logo-text span{display:block;font-size:.64rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-suave);font-family:var(--sans);margin-top:3px}
.logo-wrap:hover .logo-text{font-weight:700}

.nav-main{display:flex;align-items:center;gap:18px}
.nav-link{position:relative;font-family:var(--sans);font-size:.88rem;font-weight:500;color:var(--texto-suave);text-decoration:none;letter-spacing:.01em;transition:color .2s}
.nav-link::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--info);transition:width .25s}
.nav-link:hover{color:var(--texto)}.nav-link:hover::after{width:100%}
.lang-pill{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--texto-suave);text-decoration:none;border:1px solid var(--borde);padding:4px 11px;border-radius:14px;transition:.2s;letter-spacing:.04em}
.lang-pill:hover{border-color:var(--info);color:var(--info)}
.theme-toggle{
  display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  border:1px solid var(--borde);background:transparent;color:var(--texto-suave);cursor:pointer;transition:.2s;
}
.theme-toggle:hover{color:var(--info);border-color:var(--info)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}

/* ---------- HERO — cinematic ambient ---------- */
#hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding-top:140px;padding-bottom:100px;background:var(--crema);
}
#hero .hero-fallback,#hero #gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
#hero .hero-fallback{
  background:
    radial-gradient(1200px 620px at 84% -8%,color-mix(in srgb,var(--info) 12%,transparent),transparent 60%),
    radial-gradient(900px 520px at -8% 108%,color-mix(in srgb,var(--acento) 14%,transparent),transparent 55%),
    var(--crema);
}
#hero #gl{opacity:.85;z-index:0}
#hero .container{position:relative;z-index:2}
.hero-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.hero-content .section-label{color:var(--info)}
.hero-content h1{
  font-family:var(--serif);font-size:clamp(3rem,7.4vw,5.6rem);font-weight:600;
  line-height:1.03;letter-spacing:-.015em;margin-bottom:24px;color:var(--texto);
}
.hero-acento{color:var(--acento-text);font-style:italic}
.hero-line{display:block;opacity:0;transform:translateY(18px);animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero-line:nth-child(1){animation-delay:.08s}
.hero-line:nth-child(2){animation-delay:.24s;font-style:italic}
.hero-line:nth-child(3){animation-delay:.4s}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.hero-sub{font-size:1.06rem;color:var(--texto-suave);margin-bottom:28px;max-width:48ch;line-height:1.72;opacity:0;animation:fadeUp .8s ease .62s forwards}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;opacity:0;animation:fadeUp .8s ease .78s forwards}
.hero-cta-row .btn-primary{padding:15px 32px;font-size:.96rem}
.hero-cta-row .btn-primary .arw{transition:transform .22s}
.hero-cta-row .btn-primary:hover .arw{transform:translateX(4px)}
.hero-gratis{font-size:.84rem;color:var(--texto-suave);margin:22px 0 0;line-height:1.8;opacity:0;animation:fadeUp .8s ease .92s forwards}
.hero-gratis span{color:var(--azul);font-weight:600}

/* hero showcase (recital media) */
.hero-showcase{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
  background:var(--superficie);isolation:isolate;
  box-shadow:0 1px 2px rgba(44,44,44,.05),var(--sombra-lg),0 24px 64px -18px var(--glow);
  opacity:0;transform:translateY(24px) scale(.99);
  animation:fadeUp .95s cubic-bezier(.2,.8,.2,1) .4s forwards;
}
.hero-showcase video,.hero-showcase img.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-showcase img.hero-poster{z-index:1;transition:opacity .6s ease}
.hero-showcase video{z-index:2;opacity:0;transition:opacity .8s ease}
.hero-showcase.video-ready video{opacity:1}
.hero-showcase.video-ready img.hero-poster{opacity:0}
.hero-showcase::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(12,26,34,0) 52%,rgba(12,26,34,.6) 100%)}
.hero-badge{
  position:absolute;bottom:22px;left:22px;z-index:4;display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-radius:var(--radius-sm);font-size:.78rem;font-weight:500;color:#2C2C2C;box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.hero-badge-dot{width:7px;height:7px;background:#E63946;border-radius:50%;animation:pulseDot 2s infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(230,57,70,.6)}70%{box-shadow:0 0 0 8px rgba(230,57,70,0)}100%{box-shadow:0 0 0 0 rgba(230,57,70,0)}}
.hero-corner-tag{
  position:absolute;top:20px;right:20px;z-index:4;padding:7px 14px;background:var(--acento);color:#2C2C2C;
  font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.12);
}
/* live "next generation" readout under the hero copy */
.hero-live{
  margin-top:26px;display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border:1px solid var(--hair);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--surface) 70%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:.8rem;color:var(--texto-suave);opacity:0;animation:fadeUp .8s ease 1.05s forwards;
}
.hero-live .live-dot{width:8px;height:8px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 0 var(--acento);animation:pulseLive 2.4s infinite}
@keyframes pulseLive{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acento) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero-live b{color:var(--texto);font-weight:600}
.hero-live .sep{width:1px;height:14px;background:var(--hair)}

/* Summer-course announcement banner — reused on / and /en, links to /curso-de-verano */
.hero-anuncio{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 22px;padding:9px 9px 9px 16px;
  border:1px solid var(--hair);border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-family:var(--sans);font-size:.82rem;color:var(--texto);
  text-decoration:none;line-height:1.3;
  box-shadow:var(--sombra);transition:border-color .2s,transform .2s,box-shadow .2s;
  opacity:0;animation:fadeUp .8s ease .55s forwards;
}
.hero-anuncio:hover{border-color:var(--info);transform:translateY(-1px);box-shadow:var(--sombra-lg)}
.hero-anuncio .anuncio-tag{
  flex:none;padding:4px 10px;border-radius:var(--radius-sm);
  background:var(--acento);color:#2C2C2C;
  font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.hero-anuncio .anuncio-txt b{font-weight:600}
.hero-anuncio .anuncio-fecha{color:var(--texto-suave)}
.hero-anuncio .arw{color:var(--info);font-weight:600;transition:transform .2s}
.hero-anuncio:hover .arw{transform:translateX(3px)}
@media (max-width:520px){
  .hero-anuncio{font-size:.78rem;gap:10px;padding-left:12px}
  .hero-anuncio .anuncio-fecha{width:100%;flex-basis:100%}
}

/* scroll cue */
.scroll-cue{position:absolute;left:24px;bottom:26px;z-index:2;display:flex;align-items:center;gap:11px;color:var(--texto-suave);font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue .bar{width:1px;height:32px;background:linear-gradient(var(--texto-suave),transparent);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;inset:0;background:var(--info);animation:cueDrop 2.2s infinite ease-in-out}
@keyframes cueDrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-showcase{aspect-ratio:4/3;max-height:520px}
  #hero{padding-top:112px;padding-bottom:72px}
  .scroll-cue{display:none}
}
@media (max-width:600px){
  .hero-showcase{aspect-ratio:5/4}
  .hero-cta-row{gap:10px}
  .hero-cta-row .btn-primary{width:100%}
}

/* ---------- trust bar ---------- */
#trust-bar{background:var(--superficie);padding:60px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.trust-items{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.trust-item{position:relative}
.trust-item:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:1px;height:38px;background:var(--hair)}
.trust-num{display:block;font-family:var(--serif);font-size:clamp(2.4rem,4vw,3rem);font-weight:600;color:var(--info);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.trust-label{font-size:.8rem;color:var(--texto-suave);letter-spacing:.02em}
@media (max-width:600px){.trust-items{grid-template-columns:repeat(2,1fr);gap:32px 24px}.trust-item:nth-child(2)::after{display:none}}

/* ---------- pilares ---------- */
#pilares{background:var(--crema)}
.pilares-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pilar-card{
  position:relative;overflow:hidden;background:var(--surface);border-radius:var(--radius);
  padding:36px 26px;border:1px solid var(--hair);box-shadow:var(--sombra);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;
}
.pilar-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(420px 200px at var(--mx,50%) var(--my,0%),var(--glow),transparent 62%)}
.pilar-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--info) 30%,var(--borde));box-shadow:var(--sombra-lg)}
.pilar-card:hover::before{opacity:1}
.pilar-icon{width:26px;height:26px;color:var(--info);margin-bottom:22px;display:block}
.pilar-card h3{font-family:var(--serif);font-size:1.24rem;font-weight:600;margin-bottom:8px}
.pilar-card p{font-size:.88rem;color:var(--texto-suave);line-height:1.65}
@media (max-width:768px){.pilares-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.pilares-grid{grid-template-columns:1fr}}

/* ---------- testimonios (uses inline styles in markup; harmonize card look) ---------- */
#testimonios{background:var(--surface)}

/* ---------- instrumentos — dark editorial (always ink) ---------- */
#instrumentos{background:var(--ink);padding:clamp(80px,9vw,108px) 0;color:var(--on-ink)}
#instrumentos .section-label{color:var(--on-ink-faint)}
#instrumentos .section-label::before{background:var(--acento)}
#instrumentos h2{color:var(--on-ink)}
#instrumentos .section-sub{color:var(--on-ink-soft)}
#instrumentos .section-sub button{color:var(--azul-light) !important}
.marquee-wrap{overflow:hidden;border-top:1px solid var(--ink-borde);border-bottom:1px solid var(--ink-borde);padding:16px 0;margin:28px 0 40px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:marquee 32s linear infinite;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--on-ink-faint);letter-spacing:.03em}
.marquee-track:hover{animation-play-state:paused}
.marquee-sep{color:var(--acento);margin:0 18px;opacity:.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.instrumentos-grid{display:flex;flex-wrap:wrap;gap:10px}
.instrumento-chip{background:transparent;border:1px solid var(--ink-borde);color:var(--on-ink-soft);padding:10px 22px;border-radius:var(--radius-sm);font-family:var(--sans);font-size:.87rem;font-weight:500;cursor:pointer;transition:all .2s;touch-action:manipulation}
.instrumento-chip:hover{border-color:var(--azul-light);color:var(--on-ink);background:color-mix(in srgb,var(--azul-light) 14%,transparent);transform:translateY(-1px)}
.instrumento-chip.activo{background:var(--azul);border-color:var(--azul);color:var(--on-azul)}
.instrumento-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:22px}
.instrumento-links-label{font-size:.72rem;color:var(--on-ink-faint);letter-spacing:.1em;text-transform:uppercase}
.instrumento-link{font-size:.83rem;color:var(--on-ink-soft);text-decoration:none;transition:color .2s}
.instrumento-link:hover{color:var(--azul-light)}
#instrumento-panel{display:none;margin-top:28px;background:rgba(246,241,232,.05);border:1px solid var(--ink-borde);border-radius:var(--radius-lg);padding:36px;position:relative}
#instrumento-panel.visible{display:block;animation:fadeUp .35s ease forwards}
.panel-close{position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;color:var(--on-ink-faint);font-size:1.1rem;padding:6px;line-height:1;border-radius:6px}
.panel-close:hover{color:var(--on-ink)}
.panel-nombre{font-family:var(--serif);font-size:2rem;font-weight:600;font-style:italic;color:var(--on-ink);margin-bottom:8px}
.panel-desc{font-size:.94rem;color:var(--on-ink-soft);margin-bottom:28px;max-width:64ch;line-height:1.8}
.panel-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.panel-block{background:rgba(246,241,232,.04);border:1px solid var(--ink-borde);border-radius:var(--radius);padding:20px 22px}
.panel-tag{font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--azul-light);margin-bottom:10px;display:block}
.panel-block p{font-size:.85rem;color:var(--on-ink-soft);line-height:1.75}
#instrumento-panel .btn-primary{background:var(--acento);color:#211A13}
#instrumento-panel .btn-primary:hover{background:#cfda2a}
@media (max-width:600px){.panel-cols{grid-template-columns:1fr}#instrumento-panel{padding:24px 20px}}

/* ---------- precios bento ---------- */
#precios{background:var(--crema)}
.precios-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:16px;align-items:start}
.plan-grupal{grid-column:1;grid-row:1}
.plan-duo{grid-column:2/4;grid-row:1}
.plan-esencial{grid-column:1/3;grid-row:2}
.plan-avanzado{grid-column:3;grid-row:2}
.plan-card{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--radius-lg);padding:30px 26px;border:1px solid var(--hair);box-shadow:var(--sombra);height:100%;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.plan-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(460px 220px at var(--mx,50%) var(--my,0%),var(--glow),transparent 60%)}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--sombra-lg)}
.plan-card:hover::before{opacity:1}
.plan-card.plan-featured{border-color:var(--azul);background:var(--surface);box-shadow:0 6px 28px -8px var(--glow);padding:38px 34px}
.plan-card.plan-featured .plan-nombre{font-size:1.7rem}
.plan-card.plan-featured .plan-precio{font-size:2.6rem}
.plan-badge{position:absolute;top:-11px;left:32px;background:var(--azul);color:var(--on-azul);font-size:.66rem;font-weight:600;padding:4px 14px;border-radius:var(--radius-sm);white-space:nowrap;letter-spacing:.06em;text-transform:uppercase}
.plan-nombre{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:2px}
.plan-precio{font-size:1.9rem;font-weight:700;margin:10px 0 4px;color:var(--texto);font-variant-numeric:tabular-nums}
.plan-precio span{font-size:.9rem;font-weight:400;color:var(--texto-suave)}
.plan-desc{font-size:.84rem;color:var(--texto-suave);margin-bottom:6px}
.plan-inscripcion{font-size:.78rem;color:var(--texto-suave);margin:0 0 12px}
.plan-inscripcion sup{font-size:.65rem}
.plan-ahorro{font-size:.83rem;color:#2d8a4e;font-weight:600;margin-bottom:14px}
:root[data-theme="dark"] .plan-ahorro{color:#7fd39a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plan-ahorro{color:#7fd39a}}
.plan-features{list-style:none;margin-bottom:22px}
.plan-features li{font-size:.87rem;padding:7px 0;color:var(--texto-suave);border-bottom:1px solid var(--hair)}
.plan-features li:last-child{border-bottom:none}
.plan-features li::before{content:"— ";color:var(--info)}
.plan-card .btn-primary{width:100%}
.plan-avanzado .plan-precio s{text-decoration-color:#E63946}
@media (max-width:900px){
  .precios-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .plan-grupal{grid-column:1;grid-row:1}.plan-duo{grid-column:2;grid-row:1}
  .plan-esencial{grid-column:1;grid-row:2}.plan-avanzado{grid-column:2;grid-row:2}
  .plan-card.plan-featured{padding:30px 26px}
  .plan-card.plan-featured .plan-nombre{font-size:1.3rem}.plan-card.plan-featured .plan-precio{font-size:1.9rem}
}
@media (max-width:480px){.precios-grid{grid-template-columns:1fr}.plan-grupal,.plan-duo,.plan-esencial,.plan-avanzado{grid-column:1;grid-row:auto}}

/* ---------- como funciona ---------- */
#como-funciona{background:var(--superficie)}
.pasos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:48px}
.paso{position:relative;padding-top:6px}
.paso-num{font-family:var(--serif);font-size:4.6rem;font-weight:300;line-height:1;margin-bottom:14px;display:block;
  background:linear-gradient(135deg,var(--info),var(--info-light));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.paso h3{font-family:var(--serif);font-size:1.28rem;font-weight:600;margin-bottom:8px}
.paso p{font-size:.87rem;color:var(--texto-suave);line-height:1.7}
@media (max-width:768px){.pasos-grid{grid-template-columns:repeat(2,1fr);gap:32px 24px}}

/* ---------- inscripcion form ---------- */
#inscripcion{background:var(--crema)}
.form-wrapper{max-width:720px}
.form-progress{display:flex;align-items:center;margin-bottom:40px;max-width:260px}
.progress-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.progress-dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--borde);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--texto-suave);transition:all .3s;position:relative;z-index:1}
.progress-dot.active,.progress-dot.done{border-color:var(--info);background:var(--info);color:var(--on-azul)}
.progress-label{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--texto-suave)}
.progress-line{height:1px;flex:1;background:var(--borde);margin-bottom:22px;transition:background .3s}
.progress-line.done{background:var(--info)}
.form-step{display:none}
.form-step.active{display:block;animation:fadeUp .35s ease forwards}
.step-question{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin-bottom:20px}
.instrumento-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px}
.picker-chip{border:1px solid var(--borde);border-radius:var(--radius-sm);padding:11px 8px;font-family:var(--sans);font-size:.82rem;font-weight:500;background:var(--surface);cursor:pointer;text-align:center;transition:all .18s;color:var(--texto);touch-action:manipulation}
.picker-chip:hover{border-color:var(--azul);color:var(--azul)}
.picker-chip.selected{border-color:var(--azul);background:var(--azul);color:var(--on-azul)}
.plan-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:28px}
.plan-picker-card{border:1px solid var(--borde);border-radius:var(--radius);padding:18px 20px;cursor:pointer;background:var(--surface);transition:all .18s;text-align:left;touch-action:manipulation}
.plan-picker-card:hover{border-color:var(--azul);transform:translateY(-2px)}
.plan-picker-card.hidden{display:none}
.plan-picker-card.selected{border-color:var(--azul);background:color-mix(in srgb,var(--azul) 6%,var(--surface));box-shadow:0 2px 14px -4px var(--glow)}
.ppc-nombre{font-family:var(--serif);font-size:1.16rem;font-weight:600;display:block;margin-bottom:2px}
.ppc-precio{font-size:1.12rem;font-weight:700;color:var(--info)}
.ppc-desc{font-size:.8rem;color:var(--texto-suave);margin-top:4px}
.plan-nota{font-size:.82rem;color:var(--info);background:color-mix(in srgb,var(--info) 7%,transparent);border:1px solid color-mix(in srgb,var(--info) 22%,transparent);border-radius:var(--radius-sm);padding:9px 13px;margin-top:4px;line-height:1.5}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-group{display:flex;flex-direction:column;margin-bottom:20px}
.form-group label{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;color:var(--texto-suave)}
.form-group input{padding:13px 16px;border:1px solid var(--borde);border-radius:var(--radius-sm);font-size:.95rem;font-family:var(--sans);background:var(--surface);color:var(--texto);transition:border-color .2s,box-shadow .2s}
.form-group input:focus{outline:none;border-color:var(--info);box-shadow:0 0 0 3px color-mix(in srgb,var(--info) 16%,transparent)}
.form-selected-summary{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;font-size:.87rem;color:var(--texto-suave);display:flex;justify-content:space-between;align-items:center;gap:14px}
.form-selected-summary strong{color:var(--texto)}
.edit-link{font-size:.78rem;color:var(--info);cursor:pointer;text-decoration:underline;background:none;border:none;font-family:var(--sans)}
#submit-btn{width:100%;font-size:.96rem;padding:16px;background:var(--azul);color:var(--on-azul);margin-bottom:12px}
#submit-btn:hover{background:var(--azul-deep)}
#submit-btn:disabled{opacity:.65;cursor:not-allowed}
.form-disclaimer{font-size:.78rem;color:var(--texto-suave);text-align:center}
.form-success{max-width:480px;text-align:center;padding:56px 32px;background:var(--surface);border-radius:var(--radius-lg);border:1px solid var(--hair);box-shadow:var(--sombra)}
.success-icon{display:flex;justify-content:center;margin-bottom:20px;color:var(--info)}
.form-success h3{font-family:var(--serif);font-size:1.9rem;font-weight:600;margin-bottom:12px}
.form-success p{font-size:.9rem;color:var(--texto-suave);line-height:1.7}
@media (max-width:600px){.form-row{grid-template-columns:1fr}.instrumento-picker{grid-template-columns:repeat(3,1fr)}.plan-picker-grid{grid-template-columns:1fr}}
.form-error{display:block;font-size:.78rem;color:#C0392B;margin-top:6px;min-height:1em;font-weight:500}
:root[data-theme="dark"] .form-error{color:#ff8a80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .form-error{color:#ff8a80}}
.form-group input[aria-invalid="true"]{border-color:#C0392B;background:rgba(192,57,43,.05)}
.form-consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 8px;font-size:.82rem;color:var(--texto-suave);line-height:1.55}
.form-consent input[type="checkbox"]{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--info);cursor:pointer}
.form-consent a{color:var(--info);text-decoration:underline;text-underline-offset:2px}

/* ---------- faq (inline-styled details harmonized) ---------- */
#faq{background:var(--surface)}
#faq details{background:var(--crema) !important;border:1px solid var(--hair) !important;transition:border-color .25s}
#faq details[open]{border-color:color-mix(in srgb,var(--info) 30%,var(--borde)) !important}
#faq summary{color:var(--texto) !important;transition:color .2s}
#faq summary:hover{color:var(--info) !important}
#faq details p{color:var(--texto-suave) !important}

/* ---------- ubicacion ---------- */
.ubicacion-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
#ubicacion address{font-style:normal;color:var(--texto-suave);margin-bottom:24px;line-height:1.8}
.horario-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.horario-grid strong{font-size:.85rem;display:block;margin-bottom:3px}
.horario-grid p{color:var(--texto-suave);font-size:.87rem}
#ubicacion iframe{filter:none}
:root[data-theme="dark"] #ubicacion iframe{filter:invert(.9) hue-rotate(180deg) contrast(.9)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #ubicacion iframe{filter:invert(.9) hue-rotate(180deg) contrast(.9)}}
@media (max-width:768px){.ubicacion-grid{grid-template-columns:1fr;gap:40px}}

/* ---------- footer (always ink) ---------- */
#footer{background:var(--ink);color:var(--on-ink-soft);padding:72px 0 40px}
.footer-content{text-align:center}
.footer-logo-text{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:var(--on-ink);display:block;margin-bottom:14px}
.footer-slogan{color:var(--on-ink-faint);margin:0 0 24px;font-size:.82rem;font-style:italic}
.footer-links{display:flex;gap:26px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--on-ink-soft);text-decoration:none;font-size:.85rem;transition:color .2s}
.footer-links a:hover{color:var(--acento)}
.footer-legal a{color:var(--on-ink-soft)}
.footer-copy{font-size:.72rem;color:var(--on-ink-faint)}

/* ---------- reveal heading + generic reveal ---------- */
.reveal-heading{overflow:hidden}
.reveal-heading .word{display:inline-block;opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.reveal-heading.in-view .word{opacity:1;transform:translateY(0)}
.reveal-heading .word:nth-child(1){transition-delay:.04s}
.reveal-heading .word:nth-child(2){transition-delay:.1s}
.reveal-heading .word:nth-child(3){transition-delay:.16s}
.reveal-heading .word:nth-child(4){transition-delay:.22s}
.reveal-heading .word:nth-child(5){transition-delay:.28s}
.reveal-heading .word:nth-child(6){transition-delay:.34s}
.reveal-heading .word:nth-child(7){transition-delay:.4s}
[data-animate]{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
[data-animate].in-view{opacity:1;transform:none}
[data-animate][data-delay="1"]{transition-delay:.08s}
[data-animate][data-delay="2"]{transition-delay:.16s}
[data-animate][data-delay="3"]{transition-delay:.24s}
[data-animate][data-delay="4"]{transition-delay:.32s}
[data-animate][data-delay="5"]{transition-delay:.4s}
[data-animate][data-delay="6"]{transition-delay:.48s}

/* ---------- quiz modal ---------- */
#quizModal{display:none;position:fixed;inset:0;z-index:1000;background:rgba(20,16,12,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:20px}
#quizModal.open{display:flex}
.quiz-box{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-lg);width:100%;max-width:520px;padding:40px 36px 36px;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.4)}
.quiz-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:20px;color:var(--texto-suave);cursor:pointer;line-height:1;border-radius:6px}
.quiz-close:hover{color:var(--texto)}
.quiz-progress{height:3px;background:var(--borde);border-radius:2px;margin-bottom:32px;overflow:hidden}
.quiz-progress-bar{height:3px;background:linear-gradient(90deg,var(--info),var(--acento));border-radius:2px;transition:width .35s ease}
.quiz-step{display:none;animation:fadeUp .35s ease forwards}
.quiz-step.active{display:block}
.quiz-label{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acento-text);font-weight:600;margin-bottom:10px}
.quiz-question{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--texto);line-height:1.25;margin-bottom:28px}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-option{background:var(--bg);border:1.5px solid var(--borde);border-radius:10px;padding:14px 20px;font-family:var(--sans);font-size:.95rem;color:var(--texto);cursor:pointer;text-align:left;transition:all .18s}
.quiz-option:hover{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--bg));transform:translateX(3px)}
.quiz-option.selected{border-color:var(--acento);background:color-mix(in srgb,var(--acento) 16%,var(--bg));font-weight:500}
.quiz-result{display:none;text-align:center}
.quiz-result.active{display:block;animation:fadeUp .35s ease forwards}
.quiz-result-label{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acento-text);font-weight:600;margin-bottom:8px}
.quiz-result-instrument{font-family:var(--serif);font-size:2.5rem;font-weight:700;color:var(--texto);margin-bottom:16px}
.quiz-result-desc{font-family:var(--sans);font-size:.95rem;color:var(--texto-suave);line-height:1.7;margin-bottom:28px}
.quiz-ctas{display:flex;flex-direction:column;gap:10px}
.quiz-cta-primary{display:block;background:var(--azul);color:var(--on-azul);text-align:center;padding:14px 24px;border-radius:var(--radius-sm);font-family:var(--sans);font-size:.95rem;text-decoration:none;font-weight:600;transition:background .2s}
.quiz-cta-primary:hover{background:var(--azul-deep)}
.quiz-cta-wa{display:block;background:var(--surface);color:var(--texto);text-align:center;padding:13px 24px;border-radius:var(--radius-sm);font-family:var(--sans);font-size:.95rem;text-decoration:none;border:1.5px solid var(--borde);transition:border-color .2s,color .2s}
.quiz-cta-wa:hover{border-color:#25D366;color:#25D366}
.quiz-restart{background:none;border:none;color:var(--texto-suave);font-size:.8rem;font-family:var(--sans);cursor:pointer;margin-top:16px;text-decoration:underline}
.quiz-restart:hover{color:var(--texto)}
.quiz-entry-btn{background:none;border:none;color:var(--texto-suave);font-family:var(--sans);font-size:.9rem;font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:8px 0;transition:color .2s}
.quiz-entry-btn:hover{color:var(--info)}
@media(max-width:480px){.quiz-box{padding:32px 24px 28px}.quiz-question{font-size:1.4rem}}

/* ---------- skip link ---------- */
.skip-link{position:absolute;top:-48px;left:0;background:var(--azul);color:var(--on-azul);padding:10px 16px;text-decoration:none;font-size:.88rem;font-weight:600;z-index:10000;border-radius:0 0 var(--radius-sm) 0;transition:top .2s}
.skip-link:focus{top:0}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:90;display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 14px;background:#25D366;color:#fff;border-radius:999px;text-decoration:none;font-size:.88rem;font-weight:600;box-shadow:0 8px 24px rgba(37,211,102,.35),0 2px 6px rgba(0,0,0,.12);transition:transform .2s ease,box-shadow .2s ease}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.45)}
.wa-float svg{flex-shrink:0}
.wa-float-label{white-space:nowrap}
@media (max-width:480px){.wa-float{right:14px;bottom:14px;padding:12px}.wa-float-label{display:none}}

/* ---------- cookie banner ---------- */
.cc-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9990;max-width:720px;margin:0 auto;background:#1a1f24;color:#f5f3ee;border-radius:var(--radius);padding:18px 22px;box-shadow:0 16px 48px rgba(0,0,0,.28);display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;transform:translateY(120%);transition:transform .4s cubic-bezier(.2,.8,.2,1);font-size:.86rem;line-height:1.5}
.cc-banner.cc-show{transform:translateY(0)}
.cc-banner p{margin:0}
.cc-banner a{color:var(--acento);text-decoration:underline}
.cc-btn{border:1px solid rgba(245,243,238,.25);background:transparent;color:#f5f3ee;padding:9px 18px;border-radius:var(--radius-sm);font-family:var(--sans);font-size:.84rem;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s}
.cc-btn:hover{border-color:#f5f3ee}
.cc-btn-primary{background:var(--azul);border-color:var(--azul);color:var(--on-azul)}
.cc-btn-primary:hover{background:var(--azul-light);border-color:var(--azul-light)}
@media (max-width:600px){.cc-banner{grid-template-columns:1fr;gap:10px;padding:16px 18px}.cc-btn{width:100%}}

/* ---------- mobile bottom nav ---------- */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hair);padding:8px 16px calc(8px + env(safe-area-inset-bottom));z-index:900;justify-content:space-around;align-items:center;gap:4px}
.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:600;color:var(--texto-suave);text-decoration:none;padding:6px 12px;border-radius:8px;transition:color .2s,background .2s}
.mobile-nav a:hover,.mobile-nav a:focus-visible{color:var(--info);background:var(--superficie)}
.mobile-nav a svg{width:20px;height:20px}
.mobile-nav .nav-wa{color:#25D366}
@media(max-width:768px){.mobile-nav{display:flex}body{padding-bottom:72px}}

/* ---------- form submit spinner ---------- */
.btn-primary[disabled]{opacity:.7;cursor:not-allowed;position:relative}
.btn-primary[disabled]::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* ---------- accessibility: focus + reduced motion ---------- */
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:3px}
.btn-primary:focus-visible,.picker-chip:focus-visible,.plan-picker-card:focus-visible,.instrumento-chip:focus-visible,.quiz-option:focus-visible{outline:2px solid var(--azul);outline-offset:3px}
@media (hover:none){
  .btn-primary:hover{transform:none;box-shadow:none}
  .plan-card:hover,.pilar-card:hover,.plan-picker-card:hover{transform:none}
  .instrumento-chip:hover{transform:none}
  .quiz-option:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  html{scroll-behavior:auto}
  [data-animate],.reveal-heading .word{opacity:1 !important;transform:none !important}
  .hero-line,.hero-sub,.hero-cta-row,.hero-gratis,.hero-showcase,.hero-live{animation:none;opacity:1;transform:none}
  .hero-showcase video{display:none}
  .hero-showcase img.hero-poster{opacity:1}
  .marquee-track{animation:none}
  #gl{display:none}
}


/* ============================================================================
   CAPA EDITORIAL — 2026-07-28
   ----------------------------------------------------------------------------
   Retunea las primitivas EXISTENTES en vez de crear un sistema paralelo, para
   que las 9 páginas hereden el cambio sin tocar su marcado.

   Las tres decisiones que la sostienen:

   1. UN SOLO ACENTO, Y ES EL DEL EDIFICIO.
      La sesión de fotos lo dejó claro: las paredes de los salones, el fondo de
      los audífonos y el cuarto de guitarras son lime. `--acento` no era una
      decisión de escritorio, es el color del lugar. El azul `--azul` en cambio
      no existe en ninguna foto: era el único color frío de una marca cálida.
      No se renombra el token (lo usan 9 páginas): se REAPUNTA a lime.
      Para texto e iconos se usa `--acento-text`, que ya es consciente del tema
      (#7A8500 en claro, #D8E15E en oscuro) y sí pasa contraste.

   2. UN SOLO RADIO.
      Había siete conviviendo (6, 10, 12, 14, 20, 50, 999px): deriva, no sistema.

   3. EL FILETE DE 1 px SUSTITUYE A LA SOMBRA.
      Las sombras suaves son el delator más rápido de plantilla genérica.

   Ambos temas —claro y oscuro— quedan cubiertos: se reapuntan las variables,
   no los valores literales.
   ============================================================================ */

:root,
:root[data-theme="light"],
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --azul: var(--acento-text);
  --azul-light: var(--acento);
  --azul-deep: var(--acento-text);
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --sombra: none;
}
:root, :root[data-theme="light"] {
  --glow: rgba(191, 203, 0, .16);
  --sombra-lg: 0 20px 56px -30px rgba(44, 44, 44, .30);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --glow: rgba(210, 221, 62, .16);
  --sombra-lg: 0 24px 70px -34px rgba(0, 0, 0, .70);
}

/* ---------- Botones: rectángulo y versalita, no píldora ---------- */
.btn-primary, .btn-acento, .btn {
  border-radius: var(--radius-sm);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: .74rem;
}
.hero-cta-row .btn-primary { font-size: .78rem; }
.btn-primary:hover { transform: none; box-shadow: none; }
/* El acento en fondo pide tinta encima: lime sobre blanco no se lee. */
.btn-acento,
:root[data-theme="dark"] .btn-acento { background: var(--acento); color: #1B1D00; }
.btn-acento:hover,
:root[data-theme="dark"] .btn-acento:hover { background: var(--acento-text); color: var(--on-azul); }

/* ---------- Etiquetas de sección: versalitas anchas ---------- */
.section-label { letter-spacing: .17em; font-weight: 500; }

/* ============================================================================
   LOS 4 PILARES — de rejilla de tarjetas a lista con filete.
   Era el bloque más genérico del sitio: cuatro tarjetas iguales con iconos de
   librería. El numeral hace el trabajo que hacía el icono, y sin pedirle a una
   librería que decida cómo se ve "Técnica".
   ============================================================================ */
.pilares-grid { display: block; border-top: 1px solid var(--borde); }
.pilar-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 20ch) 1fr;
  gap: 28px;
  align-items: baseline;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  box-shadow: none;
  padding: 30px 4px;
  transition: background .25s ease;
}
.pilar-card:hover { transform: none; box-shadow: none; background: var(--superficie); }
.pilar-card::before { display: none; }
/* Los iconos de librería se retiran; el numeral los sustituye vía CSS counter,
   así el marcado no tiene que cargar un número escrito a mano. */
.pilares-grid { counter-reset: pilar; }
.pilar-card { counter-increment: pilar; }
.pilar-icon { display: none; }
.pilar-card::after {
  content: counter(pilar, decimal-leading-zero);
  grid-column: 1; grid-row: 1;
  font-size: .72rem; font-weight: 500; letter-spacing: .12em;
  color: var(--acento-text);
  font-variant-numeric: tabular-nums;
}
.pilar-card h3 {
  grid-column: 2; grid-row: 1;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem); font-weight: 500;
  letter-spacing: -.02em; margin-bottom: 0;
}
.pilar-card p {
  grid-column: 3; grid-row: 1;
  max-width: 54ch; font-size: .93rem; line-height: 1.7;
}
@media (max-width: 860px) {
  .pilar-card { grid-template-columns: 44px 1fr; gap: 6px 16px; padding: 22px 2px; }
  .pilar-card h3 { grid-column: 2; }
  .pilar-card p  { grid-column: 2; grid-row: 2; }
}

/* ============================================================================
   TESTIMONIOS — de tres tarjetas iguales a citas con filete.
   Se retiraron las tres filas de ★★★★★ idénticas: tres calificaciones perfectas
   seguidas se leen como plantilla, no como prueba. La prueba es lo específico
   («4 meses», «TDAH», «un año y medio»), y eso vive en el texto.
   ============================================================================ */
#testimonios { background: var(--superficie); padding: clamp(72px, 9vw, 108px) 0; }
.citas { margin-top: 44px; border-top: 1px solid var(--borde); }
.cita {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr minmax(0, 24ch);
  gap: 40px;
  align-items: start;
  padding: 34px 4px;
  border-bottom: 1px solid var(--borde);
}
/* La primera cita se queda con el peso: manda una, no compiten tres. */
.cita:first-child blockquote { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.cita blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -.02em;
  max-width: 34ch;
  text-wrap: pretty;
}
.cita blockquote::before { content: "\201C"; }
.cita blockquote::after  { content: "\201D"; }
.cita figcaption {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--texto-suave);
  padding-top: .5em;
}
.cita figcaption b {
  display: block;
  color: var(--texto);
  font-weight: 500;
  letter-spacing: .01em;
}
@media (max-width: 780px) {
  .cita { grid-template-columns: 1fr; gap: 14px; padding: 26px 2px; }
}

/* ---------- Aviso de temporada: rectángulo, no píldora ---------- */
.hero-anuncio { border-radius: var(--radius-sm); }

/* ═══════════════════════════════════════════════════════════════════════
   CAPA EDITORIAL II — tipografía, scroll suave y la sección del oído
   ═══════════════════════════════════════════════════════════════════════ */

/* ── UNA SOLA GROTESCA ────────────────────────────────────────────────
   Cormorant Garamond es la fuente con la que Google Fonts te hace creer
   que algo se ve caro; está en cientos de miles de sitios y se lee como
   plantilla. El par serif+sans es el delator #1 de diseño por default.
   Instrument Sans es libre (OFL) y hace el trabajo de una grotesca de paga.
   RUTA DE UPGRADE — cuando se compre la licenciada, es cambiar estas dos
   líneas y nada más: Söhne (klim.co.nz) o GT America (grillitype.com).
   Los tokens siguen llamándose --serif/--sans para no tocar 40 reglas;
   hoy apuntan a la misma familia y se diferencian por peso y tracking. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  --sans: 'Instrument Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Una grotesca a tamaño de display necesita MENOS peso y MÁS tracking negativo
   que una serif. Con weight 600 heredado se leía a encabezado de blog. */
h1, h2, h3, h4, .logo-text, .trust-num, .panel-nombre, .plan-nombre,
.paso h3, .step-question, .ppc-nombre, .form-success h3,
.footer-logo-text, .quiz-question, .quiz-result-instrument, .pilar-card h3 {
  font-weight: 500;
  letter-spacing: -.022em;
}
#hero-heading { font-weight: 480; letter-spacing: -.038em; line-height: 1.02; }
h2 { letter-spacing: -.028em; }
.trust-num, .paso-num { font-weight: 400; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.panel-nombre, .marquee-track { font-style: normal; }

.hero-sub-2 {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--texto-suave);
  max-width: 52ch;
}

/* ── SCROLL SUAVE ─────────────────────────────────────────────────────
   `scroll-behavior:smooth` pelea contra el scrollTo interpolado del rAF:
   el navegador intenta suavizar cada micro-paso y sale a tirones. La clase
   la pone el JS, así que si el script no carga se conserva el suave nativo. */
.scroll-js { scroll-behavior: auto; }

/* ── ARRASTRE DIRECCIONAL ─────────────────────────────────────────────
   Una sola idea: lo que pesa se queda atrás. El JS publica --vel (-1..1,
   signo = dirección de viaje) y aquí se convierte en px. Su default es 0,
   así que sin script esto no hace absolutamente nada.

   Va todo sobre `translate`, NO sobre `transform`, y esto no es capricho:
   `.hero-showcase` traía el efecto en `transform` y nunca pintó un pixel,
   porque su animación `fadeUp ... forwards` se queda dueña de `transform`
   para siempre. `translate` es una propiedad propia — no pelea con esa
   animación, ni con los `:hover{transform:translateY(-Npx)}` de las cards,
   ni lo arrastra el `transition:transform` de nadie (que lo dejaría
   embarrado en lugar de responder por frame).

   Y va donde se PERCIBE. Un paralaje sólo se ve como movimiento relativo:
   si todo se desplaza igual, no se ve nada. Así que son dos lugares donde
   hay algo quieto contra qué medirlo. */

/* 1. La foto se mueve DENTRO de su marco; el marco no se mueve. El sobre-alto
      evita que el arrastre descubra el borde. */
.hero-showcase video,
.hero-showcase img.hero-poster {
  top: -18px; bottom: -18px; height: auto;
  translate: 0 calc(var(--vel, 0) * -14px);
}

/* 2. El marquee de instrumentos. Su banda está quieta y recortada; el renglón
      de adentro ya viaja solo. Empujarlo con --vel hace que el scroll acelere
      la tipografía contra su propio riel: es el único sitio de media página
      donde hay movimiento contra un marco fijo, y por eso es el único donde
      un paralaje se percibe en vez de confundirse con el scroll mismo.
      Va en `translate` porque `transform` es de la animación `marquee`. */
.marquee-track { translate: calc(var(--vel, 0) * -22px) 0; }

/* NO se le cuelga arrastre a .pilar-card ni a .plan-card: desde el rediseño
   editorial .pilares-grid es `display:block` —una lista apilada con filetes—
   y desfasar sus filas haría respirar los filetes, que se lee como maquetado
   flojo, no como peso. .precios-grid es 3 columnas con 4 cards (3+1), así que
   tampoco es una fila pareja contra la cual medir nada. */

/* En táctil el JS ni arranca; esto es sólo por si acaso. */
@media (max-width: 768px) { .marquee-track { translate: none; } }

/* Con reduced-motion el JS no monta y --vel nunca se escribe, así que esto ya
   sería inerte. Va explícito de todos modos: que la hoja diga sola que no anima,
   sin depender de que alguien recuerde qué hace el script. */
@media (prefers-reduced-motion: reduce) {
  .hero-showcase video, .hero-showcase img.hero-poster, .marquee-track { translate: none; }
}

/* ── EL OÍDO ──────────────────────────────────────────────────────────
   Es la única parte del sitio donde el visitante hace algo y el sitio
   responde con lo que la academia realmente vende. Por eso vive sobre
   tinta: se tiene que leer como un instrumento, no como otra sección. */
#oido { padding: clamp(76px, 10vw, 124px) 0; }

.oido-cab {
  display: grid;
  grid-template-columns: 1fr minmax(0, 34ch);
  gap: 48px;
  align-items: end;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--borde);
}
.oido-cab h2 { font-size: clamp(1.7rem, 3.3vw, 2.7rem); line-height: 1.14; margin: 10px 0 0; }
.oido-intro { color: var(--texto-suave); font-size: .95rem; line-height: 1.65; margin: 0 0 4px; }

.oido-tablero {
  margin-top: 40px;
  background: var(--ink);
  color: var(--on-ink);
  border: 1px solid var(--ink-borde);
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: var(--radius);
}

.oido-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.oido-chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent;
  border: 1px solid var(--ink-borde);
  color: var(--on-ink-soft);
  font: inherit; font-size: .84rem; font-weight: 500;
  letter-spacing: .01em;
  padding: 10px 17px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
  touch-action: manipulation;
}
.oido-chip:hover { color: var(--on-ink); border-color: var(--acento); }
.oido-chip.activo { color: var(--on-ink); border-color: var(--acento); }
.oido-play {
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  opacity: .55; transition: opacity .2s;
}
.oido-chip.activo .oido-play { opacity: 1; color: var(--acento); }
/* El pulso marca QUÉ está sonando. Si la pestaña se va al fondo y la animación
   se congela, el chip se queda simplemente en su color activo: legible igual. */
.oido-chip.sonando { background: rgba(210, 221, 62, .07); }
.oido-chip.sonando .oido-play { animation: oido-pulso 1.1s ease-in-out infinite; }
@keyframes oido-pulso { 50% { opacity: .3 } }

.oido-pantalla {
  margin-top: 34px;
  padding: 30px 0 26px;
  border-top: 1px solid var(--ink-borde);
  border-bottom: 1px solid var(--ink-borde);
}
.oido-acordes { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 54px); }
.oido-acorde {
  font-size: clamp(1.7rem, 5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--on-ink-soft);
  font-variant-numeric: tabular-nums;
  transition: color .16s ease, opacity .16s ease;
}
.oido-acorde.suena { color: var(--acento); }
.oido-grados {
  margin: 22px 0 0;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
}
.oido-lectura {
  margin: 22px 0 0;
  max-width: 56ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--on-ink-soft);
}
.oido-aviso { margin: 16px 0 0; font-size: .84rem; color: var(--on-ink-faint); max-width: 48ch; }

@media (max-width: 760px) {
  .oido-cab { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .oido-acordes { gap: 20px; }
}

/* ── HERO: ajustes que exigió el cambio de tipografía ─────────────────
   Una grotesca ocupa ~18% más de ancho que Cormorant al mismo cuerpo.
   Con el tamaño heredado, "Somos el ápice de tu aprendizaje musical"
   se partía en cinco renglones y se comía el hero. */
#hero-heading { font-size: clamp(2.4rem, 5.4vw, 4.2rem); }

/* El ecualizador cruzaba por detrás del párrafo y lo volvía ilegible.
   Un velo del propio color de fondo, difuminado con máscara: funciona
   igual en claro y en oscuro porque hereda --bg, y si el canvas no
   carga simplemente no se nota. */
.hero-content { position: relative; z-index: 2; isolation: isolate; }
.hero-content::before {
  content: "";
  position: absolute;
  inset: -48px -80px -36px -56px;
  z-index: -1;
  background: var(--bg);
  opacity: .88;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(118% 94% at 15% 48%, #000 0%, #000 44%, transparent 80%);
          mask-image: radial-gradient(118% 94% at 15% 48%, #000 0%, #000 44%, transparent 80%);
}