/* ===========================================================
   ELCHE LOVE SALSA — Base styles, layout, components, sections
   Theme tokens live in themes.css (body[data-style="a|b|c"])
   =========================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  transition:background .5s ease,color .5s ease;
  -webkit-font-smoothing:antialiased;
}
/* ---------- Textura moderna de fondo: cuadrícula degradada ---------- */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 8%,transparent) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(130% 120% at 50% 0%,#000 20%,transparent 85%);mask-image:radial-gradient(130% 120% at 50% 0%,#000 20%,transparent 85%)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.05;font-family:var(--font-display);font-weight:var(--display-weight,700)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:root{
  --maxw:1200px;
  --pad:clamp(20px,5vw,64px);
  --nav-h:74px;
}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(64px,9vw,128px)}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.section--alt{background:var(--bg-2);transition:background .5s ease}

.eyebrow{
  font-family:var(--font-script);
  font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  color:var(--primary);
  line-height:1;
  display:inline-block;
  transform:rotate(-3deg);
}
.eyebrow--plain{font-family:var(--font-body);font-weight:700;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;transform:none;color:var(--accent)}

.title{
  font-size:clamp(2rem,5.4vw,3.9rem);
  letter-spacing:var(--display-tracking,-.01em);
  text-transform:var(--display-transform,none);
  margin-top:.18em;
  text-wrap:balance;
}
.lead{font-size:clamp(1.06rem,1.9vw,1.32rem);color:var(--ink-soft);max-width:60ch;text-wrap:pretty}
.section-head{max-width:760px;margin-bottom:clamp(34px,5vw,58px)}
.section-head--center{margin-inline:auto;text-align:center}

/* ---------- Buttons ---------- */
.btn{
  --_bg:var(--primary);
  display:inline-flex;align-items:center;gap:.6em;
  padding:1.02em 1.7em;border-radius:6px;border:2px solid transparent;
  font-weight:800;font-size:1rem;letter-spacing:.01em;line-height:1;
  background:var(--_bg);color:var(--on-primary,#fff);
  box-shadow:var(--btn-shadow,0 12px 28px -10px rgba(0,0,0,.4));
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px) scale(1.02)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn .ico{width:1.15em;height:1.15em}
.btn--ghost{background:transparent;color:var(--ink);border-color:color-mix(in srgb,var(--ink) 30%,transparent);box-shadow:none}
.btn--ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn--accent{--_bg:var(--accent);--on-primary:#fff}
.btn--lg{padding:1.15em 2.1em;font-size:1.08rem}
.btn--wa{--_bg:#25D366;--on-primary:#fff}

/* ---------- Navbar ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .35s,box-shadow .35s,backdrop-filter .35s;
}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(0,0,0,.5)}
/* transparent-over-hero state: light, legible links until the user scrolls */
.nav:not(.scrolled) .nav__links a{color:#fff;opacity:.96;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.nav:not(.scrolled) .nav__links a:hover{color:#fff}
.nav:not(.scrolled) .nav__links a::after{background:#fff}
.nav:not(.scrolled) .nav__cta .btn{box-shadow:0 0 0 1.6px rgba(255,255,255,.65),0 10px 24px -10px rgba(0,0,0,.5)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);gap:18px}
.nav__brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav__brand img{height:46px;width:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav__links a{font-weight:650;font-size:.95rem;color:var(--ink);position:relative;padding:6px 0;opacity:.86;transition:opacity .2s,color .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--primary);transition:width .25s}
.nav__links a:hover{opacity:1;color:var(--primary)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* ---------- Nav dropdown (Servicios) ---------- */
.nav__drop{position:relative;display:flex;align-items:center}
.nav__drop-toggle{display:inline-flex;align-items:center;gap:.28em;font-weight:650;font-size:.95rem;color:var(--ink);opacity:.86;padding:6px 0;position:relative;transition:opacity .2s,color .2s}
.nav__drop:hover .nav__drop-toggle,.nav__drop:focus-within .nav__drop-toggle{opacity:1;color:var(--primary)}
.nav__drop:hover .nav__drop-toggle::after,.nav__drop:focus-within .nav__drop-toggle::after{width:100%}
.nav__menu a::after{content:none}
.nav__drop-caret{width:15px;height:15px;transition:transform .25s}
.nav__drop:hover .nav__drop-caret,.nav__drop:focus-within .nav__drop-caret{transform:rotate(180deg)}
.nav__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);min-width:230px;background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:0 26px 54px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(14px) saturate(1.3);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s;z-index:80}
.nav__menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav__menu a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:11px;font-weight:650;font-size:.95rem;color:var(--ink);opacity:.9;transition:background .2s,opacity .2s,padding-left .2s}
.nav__menu a:hover{background:color-mix(in srgb,var(--primary) 14%,transparent);opacity:1;padding-left:18px}
.nav__menu-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}
/* drawer group for services */
.drawer__group{border-bottom:1px solid var(--line);padding-bottom:8px}
.drawer__group-label{display:block;padding:15px 6px 6px;font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.drawer__panel a.drawer__sub{display:flex;align-items:center;gap:10px;font-size:1.02rem;padding-left:16px;border-bottom:none}
.nav__burger{display:none;width:46px;height:46px;border:none;border-radius:14px;background:var(--primary);color:var(--on-primary,#fff);align-items:center;justify-content:center}
.nav__burger svg{width:22px;height:22px}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:70;pointer-events:none;visibility:hidden}
.drawer__scrim{position:absolute;inset:0;background:rgba(20,8,10,.5);opacity:0;transition:opacity .3s}
/* El panel se desplaza por dentro. Sin overflow no podía moverse, así que el
   dedo arrastraba la página de detrás: se abría el menú y al deslizar se
   movía la web, no el menú.

   overscroll-behavior:contain es la otra mitad del arreglo: impide que al
   llegar al final del panel el gesto siga de largo y empiece a mover lo de
   atrás. */
.drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,360px);background:var(--bg);box-shadow:-20px 0 60px -20px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .35s cubic-bezier(.3,.9,.3,1);display:flex;flex-direction:column;padding:26px 26px 40px;gap:6px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer.open{pointer-events:auto;visibility:visible}
.drawer.open .drawer__scrim{opacity:1}
.drawer.open .drawer__panel{transform:translateX(0)}
.drawer__panel a{padding:15px 6px;font-size:1.18rem;font-weight:700;border-bottom:1px solid var(--line)}
.drawer__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer__head img{height:42px}
.drawer__close{border:none;background:var(--bg-2);width:42px;height:42px;border-radius:12px;font-size:1.3rem;color:var(--ink)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden}
.hero__bg{position:absolute;inset:-12% 0 -6% 0;z-index:0;background:var(--hero-fallback,#c8453c)}
.hero__bg image-slot,.hero__bg .ph{position:absolute;inset:0;width:100%;height:100%}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero__vimeo{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;container-type:size}
.hero__vimeo iframe{position:absolute;top:50%;left:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%);border:0}
.hero__bg::after{content:"";position:absolute;inset:0;background:var(--hero-overlay);z-index:1}
.hero__inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);text-align:center;color:var(--hero-ink,#fff)}
.hero__logo{height:clamp(120px,20vw,210px);width:auto;margin:0 auto 6px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.45))}
.hero h1{font-size:clamp(2.5rem,7vw,5.6rem);letter-spacing:var(--display-tracking,-.015em);text-transform:var(--display-transform,none);text-shadow:0 6px 30px rgba(0,0,0,.35)}
.hero__sub{font-size:clamp(1.1rem,2.3vw,1.5rem);max-width:40ch;margin:22px auto 0;color:var(--hero-ink,#fff);opacity:.95;text-wrap:pretty}
/* El atributo hidden tiene que ganar siempre. La regla del navegador que lo
   esconde es muy débil y cualquier display: puesto por nosotros la pisa: el
   botón de reserva de repuesto del hero de +55 salía aunque estuviera marcado
   como oculto, porque .hero__cta lleva display:flex. */
[hidden]{display:none!important}
.hero__cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.hero__scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:var(--hero-ink,#fff);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll .mouse{width:24px;height:38px;border:2px solid currentColor;border-radius:14px;position:relative}
.hero__scroll .mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:2px;background:currentColor;transform:translateX(-50%);animation:wheel 1.5s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* floating chips that drift in hero */
.hero__chip{position:absolute;z-index:2;font-family:var(--font-script);color:#fff;opacity:.0;font-size:clamp(1.4rem,3vw,2.3rem);text-shadow:0 4px 18px rgba(0,0,0,.4);pointer-events:none}

/* ---------- ABOUT (academia) ---------- */
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.about__media{position:relative}
.about__media image-slot{width:100%;aspect-ratio:4/5;display:block}
.about__media .badge{position:absolute;right:-14px;bottom:-18px;background:var(--primary);color:var(--on-primary,#fff);border-radius:var(--radius);padding:18px 22px;box-shadow:0 22px 44px -18px rgba(0,0,0,.5);text-align:center;rotate:-4deg}
.about__media .badge b{display:block;font-family:var(--font-display);font-size:2rem;line-height:1}
.about__media .badge span{font-size:.78rem;letter-spacing:.04em;opacity:.92}
.about__text p{margin-top:1.1em;color:var(--ink-soft);font-size:1.06rem}
.about__text p strong{color:var(--ink);font-weight:750}
.about__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{display:inline-flex;align-items:center;gap:.5em;padding:.6em 1em;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);font-weight:650;font-size:.92rem}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 26px;text-align:center;box-shadow:var(--card-shadow);overflow:hidden}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.stat .ico{width:46px;height:46px;margin:0 auto 14px;color:var(--primary)}
.stat .num{font-family:var(--font-display);font-size:clamp(2.4rem,4.4vw,3.4rem);line-height:1;color:var(--ink)}
.stat .num .plus{color:var(--accent)}
.stat .label{margin-top:10px;font-size:.96rem;color:var(--ink-soft);font-weight:600}

/* ---------- BAND (colored feature section) ---------- */
.band{background:var(--band-bg);color:var(--band-ink);position:relative;overflow:hidden}
.band .eyebrow{color:var(--band-eyebrow,#fff)}
.band .title,.band .lead{color:var(--band-ink)}
.band .lead{opacity:.92}

/* ---------- CLASSES ---------- */
.classes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.dance-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;box-shadow:0 26px 50px -26px rgba(0,0,0,.55);isolation:isolate;background:#1a0e10}
.dance-card image-slot{position:absolute;inset:0;width:100%;height:100%}
.dance-card__overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(20,8,10,.92) 0%,rgba(20,8,10,.35) 45%,rgba(20,8,10,.05) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:26px;pointer-events:none}
.dance-card__overlay h3{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);text-transform:uppercase;letter-spacing:.01em}
.dance-card__overlay p{color:rgba(255,255,255,.85);margin-top:6px;font-size:.95rem;font-family:var(--font-body)}
.dance-card__tag{align-self:flex-start;margin-bottom:auto;background:var(--primary);color:var(--on-primary,#fff);font-weight:800;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;padding:.5em .9em;border-radius:999px}
.dance-card .arrow{position:absolute;right:20px;bottom:24px;z-index:3;width:42px;height:42px;border-radius:50%;background:#fff;color:#1a0e10;display:grid;place-items:center;transform:translateY(8px);opacity:0;transition:.3s}
.dance-card:hover .arrow{transform:translateY(0);opacity:1}
.dance-card image-slot{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.dance-card:hover image-slot{transform:scale(1.06)}

/* ---------- WHY / features ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.feature{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--card-shadow);transition:transform .3s,box-shadow .3s}
.feature::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.feature:hover{transform:translateY(-6px);box-shadow:0 30px 50px -24px rgba(0,0,0,.4)}
.feature__ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);margin-bottom:18px}
.feature__ico svg{width:28px;height:28px}
.feature h3{font-size:1.22rem;margin-bottom:8px}
.feature p{color:var(--ink-soft);font-size:.99rem}

/* ---------- TEACHERS ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,36px)}
.teacher{text-align:center}
.teacher image-slot{width:100%;aspect-ratio:1;display:block;border:4px solid var(--surface);box-shadow:var(--card-shadow)}
.teacher h3{margin-top:16px;font-size:1.18rem}
.teacher .role{color:var(--primary);font-weight:700;font-size:.92rem;margin-top:2px}
.teacher .bio{color:var(--ink-soft);font-size:.9rem;margin-top:8px}

/* ---------- SCHEDULE ---------- */
.sched{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.sched__day{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--card-shadow)}
.sched__day h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);margin-bottom:14px;padding-bottom:12px;border-bottom:2px dashed var(--line)}
.sched__slot{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:.93rem;border-bottom:1px solid var(--line)}
.sched__slot:last-child{border-bottom:none}
.sched__slot time{color:var(--ink-soft);font-weight:650;font-variant-numeric:tabular-nums}
.sched__slot .cls{font-weight:700}
.sched__note{margin-top:22px;text-align:center;color:var(--ink-soft);font-size:.95rem}

/* ---------- GALLERY ---------- */

/* ---------- EVENTS ---------- */
.events{display:grid;gap:16px}
.event{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,40px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;box-shadow:var(--card-shadow);transition:transform .3s}
.event:hover{transform:translateX(6px)}
.event__date{text-align:center;background:var(--band-bg);color:var(--band-ink);border-radius:16px;padding:14px 18px;min-width:84px}
.event__date b{display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1}
.event__date span{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.event__body h3{font-size:1.25rem}
.event__body p{color:var(--ink-soft);margin-top:5px;font-size:.96rem}
.event__meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.84rem;color:var(--ink-soft);font-weight:600}
.event__meta span{display:inline-flex;align-items:center;gap:.4em}

/* ---------- REVIEWS ---------- */
.reviews-top{text-align:center;margin-bottom:38px}
.reviews-top .rating{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.04em}
.stars{display:inline-flex;gap:4px;color:#FBB034;margin:8px 0}
.stars svg{width:26px;height:26px}
.reviews-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(86vw,380px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 24px;scrollbar-width:none}
.reviews-track::-webkit-scrollbar{display:none}
.review{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--card-shadow);display:flex;flex-direction:column;gap:14px}
.review__head{display:flex;align-items:center;gap:12px}
.review__avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:1.1rem}
.review__head b{display:block;font-size:1rem}
.review__head span{font-size:.82rem;color:var(--ink-soft)}
.review p{color:var(--ink-soft);font-size:.98rem}
.review .stars svg{width:18px;height:18px}
.reviews-dots{display:flex;gap:8px;justify-content:center;margin-top:8px}
.reviews-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--line);transition:.25s;padding:0;position:relative}
/* El punto mide 9 px y un dedo no acierta en 9 px. Esta capa invisible le da
   33 px de zona de toque sin cambiar nada de lo que se ve. */
.reviews-dots button::after{content:"";position:absolute;inset:-12px}
.reviews-dots button.active{background:var(--primary);width:26px;border-radius:6px}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;background:none;border:none;text-align:left;padding:24px 4px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--font-display);font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--ink)}
.faq__q .pm{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;transition:.3s;color:var(--primary)}
.faq__item.open .pm{background:var(--primary);color:var(--on-primary,#fff);rotate:135deg}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq__a p{padding:0 4px 24px;color:var(--ink-soft);max-width:70ch}

/* ---------- CONTACT / FORM ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:stretch}
.contact__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,4vw,44px);box-shadow:var(--card-shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent)}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--ink) 42%,transparent)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink-soft);margin-bottom:20px}
.consent input{margin-top:3px;accent-color:var(--primary);width:18px;height:18px}
.contact__aside{display:flex;flex-direction:column;gap:18px;justify-content:center}
.contact__perks{display:grid;gap:14px;margin-top:8px}
.contact__perk{display:flex;gap:14px;align-items:flex-start}
.contact__perk .ico{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.contact__perk b{display:block;font-size:1.05rem}
.contact__perk span{color:var(--ink-soft);font-size:.93rem}

/* ---------- LOCATION ---------- */
.loc__card{display:grid;grid-template-columns:1fr 1.15fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--card-shadow)}
.loc__info{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.loc__row{display:flex;gap:14px;align-items:flex-start}
.loc__row .ico{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.loc__row b{display:block}
.loc__row span{color:var(--ink-soft);font-size:.96rem}
.loc__map{min-height:340px;position:relative}
.loc__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:var(--map-filter,none)}
.map-load{position:absolute;inset:0;width:100%;height:100%;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;color:var(--ink);background:
  radial-gradient(60% 60% at 70% 20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
  radial-gradient(70% 70% at 20% 80%,color-mix(in srgb,var(--primary) 24%,transparent),transparent 70%),
  var(--bg-2);transition:filter .25s}
.map-load:hover{filter:brightness(1.12)}
.map-load svg{width:46px;height:46px;color:var(--primary);margin-bottom:4px}
.map-load__title{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase}
.map-load small{font-size:.8rem;color:var(--ink-soft);max-width:30ch}

/* ===================== ONLINE / MÉTODO HÍBRIDO ===================== */
.online{position:relative;overflow:hidden;background:#000000}
.online::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:54px 54px;opacity:.35;mask:radial-gradient(80% 70% at 50% 30%,#000,transparent 75%);pointer-events:none}
.online__intro{position:relative;z-index:2;max-width:820px;margin:0 auto clamp(40px,6vw,68px);text-align:center}
.online__pill{display:inline-flex;align-items:center;gap:.6em;padding:.72em 1.5em;border-radius:999px;background:linear-gradient(135deg,var(--primary),var(--primary-strong));border:none;color:#fff;font-weight:900;font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-body);box-shadow:0 12px 30px -8px color-mix(in srgb,var(--primary) 70%,transparent),0 0 0 6px color-mix(in srgb,var(--primary) 14%,transparent);animation:pillPulse 2.4s ease-in-out infinite}
@keyframes pillPulse{0%,100%{box-shadow:0 12px 30px -8px color-mix(in srgb,var(--primary) 70%,transparent),0 0 0 6px color-mix(in srgb,var(--primary) 14%,transparent)}50%{box-shadow:0 12px 34px -6px color-mix(in srgb,var(--primary) 85%,transparent),0 0 0 12px color-mix(in srgb,var(--primary) 6%,transparent)}}
.online__pill .dot{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.3);animation:blink 1.8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.online__claim{display:inline-block;margin-top:18px;font-family:var(--font-script);font-size:clamp(1.6rem,4vw,2.6rem);color:var(--accent-2);transform:rotate(-2deg)}

.online__layout{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center}
/* Con la maqueta arriba, al método le toca el ancho entero: los tres pasos
   en fila en vez de una columna estrecha. */
body.home .online__layout{grid-template-columns:minmax(0,1fr)}
body.home .method{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px);align-content:start}
@media (max-width:860px){ body.home .method{grid-template-columns:minmax(0,1fr)} }
.method{display:flex;flex-direction:column;gap:16px}
.method__item{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:0 24px 50px -34px rgba(0,0,0,.8);backdrop-filter:blur(6px)}
.method__num{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-family:var(--font-display);font-size:1.5rem;color:var(--on-primary);background:linear-gradient(135deg,var(--primary),var(--primary-strong))}
.method__item:nth-child(2) .method__num{background:linear-gradient(135deg,var(--accent),#2f8f6b)}
.method__item:nth-child(3) .method__num{background:linear-gradient(135deg,var(--accent-2),#c8842f)}
.method__item h3{font-size:1.3rem;letter-spacing:.01em}
.method__item p{color:var(--ink-soft);font-size:.98rem;margin-top:5px}
.method__item .tag{display:inline-block;margin-top:10px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-family:var(--font-body)}

.online__tech{position:relative;z-index:2;margin-top:clamp(40px,6vw,64px);display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tech-chip{display:inline-flex;align-items:center;gap:.6em;padding:.7em 1.15em;border-radius:999px;background:color-mix(in srgb,var(--surface) 60%,transparent);border:1px solid var(--line);font-weight:650;font-size:.92rem}
.tech-chip svg{width:18px;height:18px;color:var(--accent)}
.online__cta{position:relative;z-index:2;text-align:center;margin-top:clamp(34px,4vw,48px)}

/* phone mockup */
.phone-wrap{display:flex;justify-content:center;position:relative}
.phone-wrap::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(10deg);width:min(310px,82vw);aspect-ratio:300/616;border-radius:42px;background:transparent;box-shadow:0 0 55px 14px rgba(242,80,62,.5),0 0 110px 34px rgba(242,80,62,.26);z-index:0}
.phone{position:relative;z-index:1;width:min(310px,82vw);aspect-ratio:300/616;background:#05030a;border-radius:42px;padding:13px;box-shadow:0 50px 90px -30px rgba(0,0,0,.85),inset 0 0 0 2px rgba(255,255,255,.06);transform:rotate(10deg)}
.phone__notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:88px;height:26px;background:#000;border-radius:999px;z-index:6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.phone__notch::after{content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2a2f45,#05060c)}
.phone__screen{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#FEF6F5,#FCECEA);color:#3a1512;font-family:var(--font-body);display:flex;flex-direction:column}
.app{flex:1;display:flex;flex-direction:column;padding:30px 16px 0;gap:13px;overflow:hidden}
.phone__screen::after{content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);width:38%;height:5px;border-radius:99px;background:rgba(0,0,0,.32);z-index:6}
.app__top{display:flex;align-items:center;gap:10px}
.app__avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--pop));display:grid;place-items:center;font-weight:800;color:#fff;font-size:1rem;flex-shrink:0}
.app__hi{flex:1;line-height:1.15}
.app__hi b{font-size:.95rem;display:block}
.app__hi span{font-size:.72rem;color:#a85149}
.app__bell{width:32px;height:32px;border-radius:10px;background:rgba(0,0,0,.06);display:grid;place-items:center}
.app__bell svg{width:16px;height:16px;color:#5a201c}
.app__card{background:#fff;border:1px solid color-mix(in srgb,#F2503E 30%,transparent);border-radius:18px;padding:15px;box-shadow:0 8px 20px -12px rgba(214,43,53,.35)}
.app__card .lbl{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#c0392b;font-weight:800}
.app__card .lvl{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.02em;margin-top:4px}
.app__card .lvl small{font-size:.8rem;color:#9a4b44;letter-spacing:0}
.app__bar{height:8px;border-radius:99px;background:rgba(0,0,0,.1);margin-top:11px;overflow:hidden}
.app__bar i{display:block;height:100%;width:62%;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--accent-2))}
.app__bar-meta{display:flex;justify-content:space-between;font-size:.68rem;color:#9a4b44;margin-top:6px}
.app__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.app__stat{background:#fff;border:1px solid var(--_c,rgba(0,0,0,.08));border-radius:13px;padding:10px 8px;text-align:center;box-shadow:0 6px 16px -12px rgba(0,0,0,.4)}
.app__stat:nth-child(1){--_c:color-mix(in srgb,#F2503E 32%,transparent)}
.app__stat:nth-child(1) b{color:#F2503E}
.app__stat:nth-child(2){--_c:color-mix(in srgb,#F7CF46 42%,transparent)}
.app__stat:nth-child(2) b{color:#C99A0E}
.app__stat:nth-child(3){--_c:color-mix(in srgb,#40D8B3 38%,transparent)}
.app__stat:nth-child(3) b{color:#1E9E7F}
.app__stat b{font-family:var(--font-display);font-size:1.25rem;display:block;line-height:1}
.app__stat span{font-size:.62rem;color:#a85149;letter-spacing:.04em}
.app__sec{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#a85149;font-weight:800;margin-top:2px}
.app__class{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:13px;padding:9px 10px;box-shadow:0 6px 16px -12px rgba(0,0,0,.4)}
.app__thumb{position:relative;width:56px;height:44px;border-radius:10px;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,#F2503E,#D62B35)}
.app__thumb::before{content:none}
.app__thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.app__thumb image-slot{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.app__thumb image-slot::part(frame){background:transparent}
.app__thumb image-slot::part(empty){display:none}
.app__thumb-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;backdrop-filter:blur(2px)}
.app__thumb-play svg{width:11px;height:11px}
.app__class .ci{flex:1;line-height:1.2}
.app__class .ci b{font-size:.84rem;display:block}
.app__class .ci span{font-size:.68rem;color:#a85149}
.app__play{width:26px;height:26px;border-radius:50%;background:var(--primary);display:grid;place-items:center;flex-shrink:0}
.app__play svg{width:12px;height:12px;color:#1a0a0a}
.app__tab{margin-top:auto;margin-inline:-16px;display:grid;grid-template-columns:repeat(4,1fr);padding:10px 8px calc(18px + env(safe-area-inset-bottom));background:rgba(0,0,0,.06);border-top:1px solid rgba(0,0,0,.08)}
.app__tab a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.56rem;color:#a85149}
.app__tab a.on{color:var(--primary)}
.app__tab svg{width:19px;height:19px}

/* ---------- FOOTER ---------- */
.footer{background:var(--footer-bg);color:var(--footer-ink);position:relative;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,48px);padding-block:clamp(56px,7vw,84px)}
.footer__brand img{height:120px;width:auto;margin-bottom:18px}
.footer__brand p{color:color-mix(in srgb,var(--footer-ink) 80%,transparent);max-width:34ch}
.footer__brand .socials{display:flex;gap:12px;margin-top:20px}
.footer__brand .socials a{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--footer-ink) 14%,transparent);display:grid;place-items:center;transition:.25s}
.footer__brand .socials a:hover{background:var(--primary);color:var(--on-primary,#fff);transform:translateY(-3px)}
.footer__brand .socials svg{width:20px;height:20px}
.footer h4{font-family:var(--font-display);font-size:1.3rem;margin-bottom:18px}
.footer__col a,.footer__col p{display:block;color:color-mix(in srgb,var(--footer-ink) 78%,transparent);padding:7px 0;font-size:.96rem;transition:color .2s,padding-left .2s}
.footer__col a:hover{color:var(--footer-ink);padding-left:6px}
.footer__contact a{display:flex;gap:10px;align-items:center;font-weight:600}
.footer__contact svg{width:18px;height:18px;flex-shrink:0}
.footer__bottom{border-top:1px solid color-mix(in srgb,var(--footer-ink) 16%,transparent);padding-block:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.85rem;color:color-mix(in srgb,var(--footer-ink) 66%,transparent)}
.footer__bottom a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:55;width:60px;height:60px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -8px rgba(37,211,102,.7);transition:transform .25s}
.wa-float:hover{transform:scale(1.08) rotate(6deg)}
.wa-float svg{width:32px;height:32px}
.wa-float::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #25D366;opacity:.6;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.5);opacity:0}}

/* ---------- Reveal on scroll (guarded by html.js for no-JS/SEO safety) ---------- */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .reveal{opacity:0;transform:translateY(34px)}
html.js .reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.4s}
.reveal[data-d="6"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}.hero__scroll .mouse::after{animation:none}}

/* decorative section eyebrow center wrapper */
.eyebrow-wrap{display:flex;flex-direction:column;align-items:flex-start}
.section-head--center .eyebrow-wrap{align-items:center}

/* placeholder default look inside image-slot is handled by component; ensure radius */
image-slot{border-radius:var(--radius);overflow:hidden}
.hero__bg image-slot{border-radius:0}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .footer__top{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__cta:has(.nav__burger) .btn:not(.nav__burger){display:none}
  /* Sin hamburguesa (las landings de campaña) el botón se queda, pero más
     justo, para que quepa al lado del de volver al inicio. */
  .nav__cta:not(:has(.nav__burger)) .btn{padding:.78em 1.15em;font-size:.92rem}
  .nav__burger{display:inline-flex}
  .about__grid{grid-template-columns:1fr}
  .about__media{max-width:440px;margin-inline:auto}
  .classes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:minmax(0,1fr)}
  .loc__card{grid-template-columns:1fr}
  .loc__map{min-height:280px}
  .event{grid-template-columns:auto 1fr;gap:18px}
  .event .btn{grid-column:1/-1;justify-content:center}
  .online__layout{grid-template-columns:1fr;gap:40px}
  .phone-wrap{order:-1}
}
@media (max-width:520px){
  .classes-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer__top{grid-template-columns:1fr}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%;justify-content:center}
}


/* ---------- Pop-up permanente: clase gratis ---------- */
.freepop{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(22px) scale(.96);z-index:56;display:flex;align-items:center;gap:14px;width:min(360px,calc(100vw - 40px));padding:15px 20px 15px 17px;border-radius:18px;background:linear-gradient(120deg,var(--primary),var(--primary-strong));border:2px solid rgba(255,255,255,.5);box-shadow:0 26px 54px -18px color-mix(in srgb,var(--primary) 60%,rgba(0,0,0,.55));color:var(--on-primary,#1a0a0a);opacity:0;visibility:hidden;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.85,.25,1),visibility .45s,box-shadow .28s}
.freepop.show{opacity:1;visibility:visible;transform:translateX(-50%);animation:freepop-beat 2.6s ease-in-out 1s infinite}
.freepop.show:hover{transform:translateX(-50%) translateY(-3px) scale(1.02);animation-play-state:paused;box-shadow:0 32px 66px -18px color-mix(in srgb,var(--primary) 70%,rgba(0,0,0,.5))}
.freepop__ico{position:relative;flex-shrink:0;width:46px;height:46px;border-radius:13px;background:#1a0a0a;color:var(--primary);display:grid;place-items:center}
.freepop__ico svg{width:24px;height:24px}
.freepop__ico::after{content:"";position:absolute;inset:-5px;border-radius:16px;border:2px solid #1a0a0a;opacity:.55;animation:pulse 2.4s ease-out infinite}
.freepop__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.freepop__kicker{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#1a0a0a}
.freepop__title{font-weight:800;font-size:1.12rem;line-height:1.25;color:#1a0a0a}
.freepop__sub{font-size:.84rem;font-weight:600;color:#1a0a0a;line-height:1.35}
@keyframes freepop-beat{0%,88%,100%{transform:translateX(-50%)}92%{transform:translateX(-50%) scale(1.045)}96%{transform:translateX(-50%) scale(.99)}}
@media (max-width:640px){
  .freepop{width:calc(100vw - 28px);bottom:20px;padding:13px 15px;gap:11px;justify-content:center}
  .freepop.show{transform:translateX(-50%)}
  .freepop.show:hover{transform:translateX(-50%) translateY(-3px) scale(1.02)}
  .freepop__ico{width:38px;height:38px;border-radius:11px}
  .freepop__ico svg{width:21px;height:21px}
  .freepop__title{font-size:.95rem}
  .freepop__sub{display:none}
}
@media (prefers-reduced-motion:reduce){.freepop,.freepop.show{transition:opacity .2s,visibility .2s;animation:none}.freepop__ico::after{animation:none}}

/* ===========================================================
   PROMOCIÓN 2x1 Y HORARIOS — compartido por todas las landings
   ===========================================================
   Vive aquí y no en la hoja de una landing concreta porque lo usan varias. Los
   colores salen de las variables de cada página, así que la de salsa se pinta
   en rojo-naranja y la de +55 en rosa sin duplicar una sola línea. */
/* La tira del hero: confirma en el primer segundo lo que prometía el anuncio.
   Es un enlace, no un adorno: lleva a los horarios, que es donde la persona
   comprueba si esa franja le encaja. */
.promo2x1{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:2px 10px;margin:18px auto 0;max-width:720px;padding:14px 24px;
  border-radius:16px;text-align:center;line-height:1.3;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;box-shadow:0 18px 34px -16px color-mix(in srgb,var(--primary) 55%,transparent);
  transition:transform .2s,box-shadow .2s;
}
.promo2x1:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px color-mix(in srgb,var(--primary) 65%,transparent)}
.promo2x1 b{
  flex:0 0 100%;
  font-family:var(--font-display);font-size:clamp(2.1rem,5.2vw,2.9rem);
  line-height:1;letter-spacing:.02em;text-transform:uppercase;
}
.promo2x1__txt,.promo2x1__plazas{font-size:.9rem;font-weight:600;opacity:.97}
/* El día y la hora en mayúsculas: es el dato que la persona busca para saber si
   le encaja, y el que trae del anuncio. */
.promo2x1 em{font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.promo2x1__plazas::before{content:"· "}

@media (max-width:760px){
  /* En móvil no cabe todo seguido: la frase parte en dos, dejando el día y la
     hora solos en su línea para que se lean de un golpe. */
  .promo2x1{gap:1px}
  .promo2x1__txt{flex:0 0 100%}
  .promo2x1 em{display:block;font-size:1.02rem;margin-top:1px}
  .promo2x1__plazas{flex:0 0 100%}
  .promo2x1__plazas::before{content:none}
}

/* ---------- Horarios ---------- */
.horarios{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.horario{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 16px;text-align:center;
}
.horario__dia{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.02em}
.horario__hora{font-weight:800;font-size:1.02rem;margin-top:6px}
.horario__que{margin-top:8px;font-size:.88rem;color:var(--ink-soft);font-weight:600}
/* El sello va SOLO en el grupo que lo tiene. Cuatro tarjetas sin sello y una con
   él se entiende de un vistazo, sin tener que explicar con palabras que el 2x1
   no aplica a los demás. */
.horario--promo{
  border-color:color-mix(in srgb,var(--primary) 55%,transparent);
  background:color-mix(in srgb,var(--primary) 12%,var(--surface));
}
.horario__sello{
  display:inline-block;margin-top:12px;padding:6px 12px;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
  font-weight:800;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;
}
.horarios__nota,.horarios__niveles{
  text-align:center;margin-top:18px;color:var(--ink-soft);font-size:.95rem;max-width:62ch;margin-inline:auto
}
.horarios__niveles{margin-top:10px}
.horarios__niveles strong{color:var(--ink)}

@media (max-width:900px){
  .horarios{grid-template-columns:repeat(2,1fr)}
  /* El grupo con 2x1 ocupa las dos columnas: es el que trae el anuncio. */
  .horario--promo{grid-column:1 / -1}
}
@media (max-width:420px){
  .horarios{grid-template-columns:1fr}
}


/* ===========================================================
   BLOQUES COMPARTIDOS POR LAS LANDINGS DE CAMPAÑA
   -----------------------------------------------------------
   Vivían en salsabachata.css, pero la landing de Mujeres +55 usa los mismos
   (formulario de clase gratis, reseñas de Google, pantalla de "casi listo").
   Nada de aquí fija un color a mano: todo sale de --primary / --accent, así
   que cada landing los pinta con su paleta. El prefijo "slsb-" de las clases
   es herencia de cuando solo los usaba la landing de salsa; se mantiene para
   no tocar el HTML que ya funciona.
   =========================================================== */
/* ---------------------------------------------------------
   BLOQUES CTA REPETIDOS — máxima conversión, mínima fricción
   --------------------------------------------------------- */
.slsb-cta{position:relative;overflow:hidden;padding:clamp(48px,6.5vw,92px) 0}
.slsb-cta--soft{--ink:#24101A;--ink-soft:#6B4A50;color:#24101A;background:linear-gradient(160deg,color-mix(in srgb,var(--primary) 7%,#fff),color-mix(in srgb,var(--accent) 9%,#fff))}
.slsb-cta--soft::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 92% 12%,color-mix(in srgb,var(--accent-2) 26%,transparent),transparent 70%)}
.slsb-cta--fire{background:var(--band-bg);color:#fff}
.slsb-cta--fire::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 8% 100%,rgba(0,0,0,.22),transparent 60%)}
.slsb-cta__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4vw,58px);align-items:center}
.slsb-cta__eyebrow{display:inline-block;font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.slsb-cta--soft .slsb-cta__eyebrow{color:var(--primary)}
.slsb-cta--fire .slsb-cta__eyebrow{color:var(--band-eyebrow)}
.slsb-cta__title{font-family:var(--font-display);font-size:clamp(2rem,4.4vw,3.3rem);line-height:.98;letter-spacing:.01em;text-wrap:balance}
.slsb-cta--soft .slsb-cta__title{color:#24101A}
.slsb-cta__sub{margin-top:14px;font-size:1.08rem;line-height:1.6;max-width:46ch;text-wrap:pretty}
.slsb-cta--soft .slsb-cta__sub{color:#6B4A50}
.slsb-cta--fire .slsb-cta__sub{color:rgba(255,255,255,.9)}
.slsb-cta__bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.slsb-cta__bullets li{display:flex;align-items:flex-start;gap:.65em;font-weight:700;font-size:1rem}
.slsb-cta__bullets svg{flex:0 0 20px;width:20px;height:20px;margin-top:2px}
.slsb-cta--soft .slsb-cta__bullets li{color:#24101A}
.slsb-cta--soft .slsb-cta__bullets svg{color:var(--primary)}
.slsb-cta--fire .slsb-cta__bullets li{color:#fff}
.slsb-cta--fire .slsb-cta__bullets svg{color:var(--accent-2)}

.slsb-ctaform{--ink:#24101A;--ink-soft:#6B4A50;color:#24101A;background:#fff;border-radius:calc(var(--radius) + 2px);padding:clamp(22px,2.6vw,34px);display:grid;gap:12px;
  box-shadow:0 30px 70px -26px rgba(20,5,15,.4),0 2px 0 rgba(255,255,255,.6) inset;border:1px solid rgba(20,5,15,.07)}
.slsb-ctaform__label{font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
  display:inline-flex;align-items:center;gap:.5em}
.slsb-ctaform__label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent)}
.slsb-ctaform .field{margin:0}
.slsb-ctaform input[type=text],.slsb-ctaform input[type=tel],.slsb-ctaform input[type=email],.slsb-ctaform select{
  width:100%;height:56px;padding:0 16px;border-radius:14px;border:1.5px solid rgba(20,5,15,.14);background:#fff;
  font-family:inherit;font-size:1.02rem;font-weight:600;color:#24101A;transition:border-color .18s,box-shadow .18s}
.slsb-ctaform select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF2D55' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:20px;padding-right:46px}
.slsb-ctaform input::placeholder{color:#8A6C72;font-weight:500}
.slsb-ctaform input:focus,.slsb-ctaform select:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent)}
.slsb-ctaform button[type=submit]{width:100%;justify-content:center;margin-top:2px}
.slsb-ctaform__legal{display:flex;align-items:flex-start;gap:.6em;font-size:.8rem;line-height:1.45;color:#6B4A50}
.slsb-ctaform__legal input{flex:0 0 17px;width:17px;height:17px;margin-top:2px;accent-color:var(--primary)}
.slsb-ctaform__legal a{color:var(--primary);text-decoration:underline}

@media (max-width:900px){
  .slsb-cta__inner{grid-template-columns:1fr;gap:28px}
  .slsb-cta__sub{max-width:none}
  .slsb-cta__bullets{gap:8px}
}

.slsb-ctaform select{color:#24101A}
.slsb-ctaform select:invalid{color:#8A6C72}
.slsb-ctaform option{color:#24101A;background:#fff}

/* ---------- Reseñas Google ---------- */
.gr .gr-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;margin-bottom:34px}
.gr-badge{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:18px;background:#fff;color:#202124;box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}
.gr-badge .gg{width:44px;height:44px;flex-shrink:0}
.gr-badge__txt{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.gr-word{font-weight:700;font-size:.95rem;color:#5f6368}.gr-word b{font-weight:700}
.gr-score{display:flex;align-items:center;gap:8px}.gr-score>b{font-size:1.7rem;font-weight:800;color:#202124}
.gr-score .stars{color:#FBBC05;margin:0}.gr-score .stars svg{width:18px;height:18px}
.gr-badge small{font-size:.78rem;color:#5f6368;font-weight:600}
.gr-top__copy .title{margin-top:6px}
.gr-card .review__head{position:relative}
.gr-card .review__head .gg{width:22px;height:22px;margin-left:auto;flex-shrink:0}
.gr-card .stars{color:#FBBC05}
@media (max-width:860px){.gr .gr-top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px}}
.gr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px;max-width:980px;margin-inline:auto}
.gr-grid .review{max-width:none;width:auto}

/* ---------- Reseñas: carrusel en móvil, rejilla en ordenador ----------
   En móvil las tarjetas van una al lado de otra y se deslizan con el dedo, que
   es como la gente espera leer opiniones en el teléfono y además no alarga la
   página por muchas que se añadan. En ordenador se ven todas en rejilla, que
   llena mejor y da sensación de volumen. */
@media (max-width: 860px) {
  .gr-grid{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:min(82vw,340px);
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:6px;
    /* Los márgenes negativos dejan que el carrusel sangre hasta el borde de la
       pantalla: así se ve el trozo de la siguiente tarjeta y se entiende solo
       que hay más que deslizar. */
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
  }
  .gr-grid::-webkit-scrollbar{display:none}
  .gr-grid .gr-card{scroll-snap-align:start;height:100%}
}

/* En ordenador, que las tarjetas se repartan solas según cuántas haya. */
@media (min-width: 861px) {
  .gr-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
}

/* ---------- Formulario: error y pantalla de "casi listo" ---------- */
.lead-error{
  color:#ff8a7a; font-size:.9rem; font-weight:600; margin:.6em 0 0; text-align:left;
}
.lead-ok{
  background:#fff; color:#1a1013; border-radius:22px; padding:30px 26px; text-align:center;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.45);
}
.lead-ok h3{font-family:var(--font-display);font-size:1.9rem;margin:0 0 .3em;color:#1a1013}
.lead-ok p{margin:0 0 1.3em;color:#5b4f52;line-height:1.5}
.lead-ok .btn{width:100%;justify-content:center}

/* ---------- CTA de después del hero: en una columna ----------
   El orden es titular → formulario → argumentos. Quien llega pulsando "Reserva
   tu clase GRATIS" ya viene decidido: lee de qué va en una línea, rellena, y si
   todavía duda tiene los motivos justo debajo. Antes eran dos columnas; con
   tres bloques apilados, una sola centrada se lee mucho mejor. */
.slsb-cta__inner--apilado{
  display:block;max-width:560px;margin-inline:auto;text-align:center;
}
.slsb-cta__inner--apilado .slsb-cta__title{margin-bottom:22px}
.slsb-cta__inner--apilado .slsb-cta__sub{max-width:none;margin-top:26px}
/* La lista de motivos, centrada como bloque pero con el texto alineado a la
   izquierda: tres líneas centradas una debajo de otra se leen mal. */
.slsb-cta__inner--apilado .slsb-cta__bullets{
  display:inline-flex;text-align:left;margin-top:18px
}


/* ===========================================================
   HERO Y ESCUELA ONLINE — comunes a las landings de campaña
   -----------------------------------------------------------
   Estaban en salsabachata.css. La landing de Mujeres +55 quiere el mismo
   formato, así que las reglas valen ya para las dos: :is(body.slsb,body.p55).
   Los colores salen de la paleta de cada una.
   =========================================================== */
/* La sala del vídeo es MUY clara (paredes blancas, suelo de madera) y el
   titular es blanco. Sin un velo oscuro por encima no se lee nada. Es más
   fuerte por abajo, que es donde caen el texto y el botón. */
/* ---------- Hero: vídeo propio de fondo ----------
   El <video> ocupa todo el hero y se recorta para llenarlo. El poster hace de
   fondo mientras el vídeo carga, así que nunca se ve un hueco vacío. */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  z-index:0; pointer-events:none;
}

:is(body.slsb,body.p55) .hero__bg::after{
  background:linear-gradient(180deg,
    rgba(12,4,8,.55) 0%,
    rgba(12,4,8,.62) 40%,
    rgba(12,4,8,.88) 100%) !important;
}

/* ---------- Hero más bajo en móvil ----------
   El vídeo es horizontal (16:9) y la pantalla del móvil es vertical. Al llenar
   900 px de alto, de los 1600 px de ancho que ocupa el vídeo escalado solo se
   ven 420: el 26%, o sea un hombro en vez de la sala. Bajando el hero a 78vh
   se ve bastante más ancho, y de paso la página acorta.
   Lo ideal sería una versión vertical del vídeo para móvil. */
/* Al quitar el párrafo y las tres cifras, el contenido del hero se quedó en
   titular, badge y botón: 245 px de 702, o sea que dos tercios eran vídeo vacío.
   Se recorta para que el hero siga respirando pero no sobre tanto, y así el
   formulario aparece antes. */
/* La altura se ha movido dos veces a propósito. Se bajó al quitar el párrafo y
   las cifras, porque dos tercios eran vídeo vacío; y vuelve a subir al añadir la
   tarjeta del 2x1, que se comió 123 px de los que quedaban. La referencia es que
   sobre un 45% siga siendo vídeo: menos y el hero se agobia, más y sobra. */
:is(body.slsb,body.p55) .hero { min-height: 88svh; }
@media (max-width: 700px) {
  :is(body.slsb,body.p55) .hero { min-height: 76svh; }
  :is(body.slsb,body.p55) .hero__video { object-position: center 55%; }
}




/* ---------- Cuadrícula sobre el vídeo del hero ----------
   La página ya tiene una textura de celdas, pero va por detrás del contenido y
   en el hero el vídeo la tapa. Esta va encima del vídeo y del velo (capa 2),
   pero por debajo del texto (capa 3), así que no le resta legibilidad.

   Las líneas son de un blanco a muy baja opacidad: se intuyen las celdas y no
   estorban para ver lo que pasa en el vídeo. Y se desvanecen hacia abajo, que
   es donde caen el titular y el botón. */
:is(body.slsb,body.p55,body.home,body.boda) .hero__bg::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.35) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,.35) 100%);
}

/* ---------- Escuela online: el móvil, más contenido ----------
   La maqueta del móvil viene de la web principal, donde tiene una sección para
   ella sola. Aquí es un apoyo del texto, no el protagonista: a tamaño original
   se comía más de una pantalla entera y alargaba justo lo que se quería acortar.
   En pantalla pequeña se reduce y se deja ver solo la parte de arriba, que es
   la que cuenta la historia (tu nivel, tus clases). */

/* ===========================================================
   ESCUELA ONLINE — portátil + móvil
   =========================================================== */
/* Una sola columna: primero se cuenta qué es la zona online y después se
   enseña. Las pantallas ilustran el argumento, no lo sustituyen.

   OJO con el ámbito de este bloque: la maqueta del portátil y el móvil vive
   entera aquí dentro. Si se copia la sección #online a otra landing y no se
   añade su body a estos :is(), el HTML aparece pero sin ni una regla: el
   "portátil" se ve como una foto suelta a pantalla completa y el móvil se
   descuelga debajo a tamaño real. Le pasó a rueda cubana. */
:is(body.slsb,body.p55,body.rueda,body.home) .online-simple{max-width:660px;margin-inline:auto;text-align:center}
:is(body.slsb,body.p55,body.rueda,body.home) .online-simple .lead{margin-inline:auto}

/* Las dos pantallas juntas: el portátil detrás y el móvil delante, como se ve
   un producto que va contigo en los dos sitios. */
:is(body.slsb,body.p55,body.rueda,body.home) .devices{position:relative;margin:38px auto 0;width:100%;max-width:560px;
  padding-bottom:42px}

/* La maqueta del móvil arrastra de la web principal una copia de sí misma
   girada diez grados, sin relleno pero con un resplandor alrededor. Allí hace
   de halo detrás del móvil; aquí, con el móvil metido en una esquina, ese
   rectángulo se despliega por toda la sección y su interior sin pintar se lee
   como una franja negra con luz por detrás. Fuera: la luz la pone el
   resplandor de abajo, que sí envuelve a las dos pantallas. */
:is(body.slsb,body.p55,body.rueda,body.home) #online .phone-wrap::after{display:none}

/* El resplandor de debajo: da la sensación de que las pantallas están
   encendidas e iluminan lo que tienen alrededor, en vez de flotar pegadas
   sobre el negro. Abarca las dos, portátil y móvil. */
:is(body.slsb,body.p55,body.rueda,body.home) .devices::before{
  content:"";position:absolute;left:50%;bottom:-14%;transform:translateX(-50%);
  width:128%;height:104%;pointer-events:none;z-index:0;
  background:radial-gradient(52% 54% at 50% 66%,
    color-mix(in srgb,var(--primary) 62%,transparent) 0%,
    color-mix(in srgb,var(--accent-2) 30%,transparent) 46%,
    transparent 76%);
  filter:blur(46px);
}

/* ---------- Portátil ---------- */
:is(body.slsb,body.p55,body.rueda,body.home) .laptop{position:relative;z-index:1;width:100%;margin-inline:auto}
:is(body.slsb,body.p55,body.rueda,body.home) .laptop__screen{position:relative;border-radius:12px;overflow:hidden;
  background:#0a070c;padding:8px 8px 9px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.14), 0 34px 60px -26px rgba(0,0,0,.85);
}
:is(body.slsb,body.p55,body.rueda,body.home) .laptop__screen img{display:block;width:100%;height:auto;border-radius:5px}
/* La cámara, para que se lea como un portátil y no como una foto con marco. */
:is(body.slsb,body.p55,body.rueda,body.home) .laptop__screen::before{content:"";position:absolute;top:3px;left:50%;
  transform:translateX(-50%);width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.28)}
/* La base: el trapecio que apoya la pantalla. */
:is(body.slsb,body.p55,body.rueda,body.home) .laptop__base{position:relative;width:114%;margin:0 -7%;height:11px;
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#2a2228,#15111a);
  box-shadow:0 12px 22px -10px rgba(0,0,0,.8)}
:is(body.slsb,body.p55,body.rueda,body.home) .laptop__base::after{content:"";position:absolute;left:50%;top:0;
  transform:translateX(-50%);width:16%;height:4px;border-radius:0 0 6px 6px;
  background:rgba(255,255,255,.12)}

/* ---------- Móvil, delante y ligeramente inclinado ---------- */
/* El desplazamiento no es decorativo: el móvil está girado, y al girar sobre su
   esquina inferior derecha la esquina de arriba se va hacia fuera. Sin este
   margen, asomaba por el borde y la página entera cogía scroll lateral. */
:is(body.slsb,body.p55,body.rueda,body.home) #online .phone-wrap{position:absolute;right:22px;bottom:0;z-index:2;
  display:block;width:auto;height:auto;margin:0}
:is(body.slsb,body.p55,body.rueda,body.home) #online .phone{
  /* Se escala, no se estrecha: reduciendo solo el ancho, la letra de dentro
     mantiene su tamaño y el saludo parte en tres líneas. */
  width:310px;transform:scale(.42) rotate(7deg);transform-origin:bottom right;
  box-shadow:0 40px 70px -24px rgba(0,0,0,.9), inset 0 0 0 2px rgba(255,255,255,.09);
}
/* El contenido arrancaba debajo de la muesca y cortaba el "¡Hola, María!".
   Se baja para que empiece por debajo de ella. */
:is(body.slsb,body.p55,body.rueda,body.home) #online .phone .app{padding-top:58px}

@media (max-width:640px){
  :is(body.slsb,body.p55,body.rueda,body.home) .devices{max-width:none;padding-bottom:30px}
  :is(body.slsb,body.p55,body.rueda,body.home) #online .phone{transform:scale(.34) rotate(7deg)}
}

/* ---------- Cierre de las preguntas, en color ----------
   Desde la zona online hasta el final había cuatro bloques negros seguidos, y
   el ojo deja de distinguir dónde acaba uno y empieza otro. Este bloque es
   además una llamada a la acción: merece destacar, no fundirse. */
body.slsb{--finalcta-grad:linear-gradient(135deg,#FF2D55 0%,#FF5A2D 46%,#FF9E1B 100%)}
body.p55{--finalcta-grad:linear-gradient(135deg,#FF4D9E 0%,#FF6FB0 46%,#FFC24B 100%)}
:is(body.slsb,body.p55) .p55-finalcta{
  position:relative;
  margin-top:clamp(40px,5vw,60px);
  padding:clamp(34px,5vw,54px) clamp(22px,4vw,44px);
  border-radius:calc(var(--radius) + 8px);
  background:var(--finalcta-grad);
  color:#26100a;
  box-shadow:0 34px 64px -28px rgba(255,90,45,.55);
  overflow:hidden;
}
/* Un velo muy suave arriba a la derecha, para que el degradado no quede plano. */
:is(body.slsb,body.p55) .p55-finalcta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 88% 6%,rgba(255,255,255,.22),transparent 62%);
}
:is(body.slsb,body.p55) .p55-finalcta > *{position:relative;z-index:1}
:is(body.slsb,body.p55) .p55-finalcta .title{color:#26100a}
:is(body.slsb,body.p55) .p55-finalcta .lead{color:rgba(38,16,10,.82)}
/* El botón se queda rosa, el mismo del hero. Sobre el naranja del degradado se
   confundiría, así que se le pone un filo claro y una sombra que lo despeguen
   del fondo en vez de cambiarle el color. */
:is(body.slsb,body.p55) .p55-finalcta .btn:not(.btn--wa){
  border-color:rgba(255,255,255,.9);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.06);
}


/* ---------- Home: velo del hero en móvil ----------
   El vídeo vertical del móvil está grabado en la sala, que es MUY clara
   (paredes blancas, focos), y el titular es blanco. El velo de la home se
   aclara justo a la altura del titular (0,40 al 35%), así que ahí no se leía.
   Solo en pantalla estrecha: en ordenador sigue el vídeo de Vimeo, que es más
   oscuro, y su velo no se toca. */
@media (max-width:899px){
  body.home .hero__bg::after{
    background:linear-gradient(180deg,
      rgba(15,6,8,.58) 0%,
      rgba(15,6,8,.62) 40%,
      rgba(15,6,8,.92) 100%) !important;
  }
}

/* ===========================================================
   HOME — HERO
   -----------------------------------------------------------
   El titular va en tres alturas: la academia Nº1 de / SALSA Y BACHATA / en
   Elche. Las dos pequeñas son el contexto y la grande es el reclamo, que es
   lo único que se lee de lejos o de pasada. Debajo, el claim en dos niveles:
   una frase corta que se queda y una segunda que la sostiene con un dato.
   =========================================================== */
body.home .hhero__title{
  display:flex;flex-direction:column;align-items:center;
  /* Medido sobre "SALSA Y BACHATA": quince letras de Bebas ocupan unas 5,5
     veces el cuerpo, así que a 16,5vw la línea llena el ancho de un móvil y
     en ordenador se para a 7rem para que no se desmadre. */
  font-size:clamp(3rem,16.5vw,8.6rem);
  line-height:.86;text-shadow:none;margin:0;
}
/* Las dos líneas de fuera: bastante menores, para que la grande domine sin
   competencia. Un punto de espaciado entre letras las separa del bloque rojo. */
body.home .hhero__pre,
body.home .hhero__post{
  font-size:.36em;letter-spacing:.015em;color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.55);
}
body.home .hhero__pre{margin-bottom:.06em}
body.home .hhero__post{margin-top:.16em}

/* El reclamo. El degradado se recorta al texto y las dos sombras hacen el
   resto: la primera, sin desenfoque, es el filo oscuro que lo despega del
   vídeo; la segunda lo apoya en el fondo. */
body.home .hhero__big{
  font-size:1em;line-height:.84;letter-spacing:-.005em;
  background:linear-gradient(177deg,#FF7A63 0%,#F2503E 46%,#D62B35 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .028em 0 rgba(26,3,6,.75)) drop-shadow(0 .11em .2em rgba(0,0,0,.62));
  /* Bebas Neue viene en un solo grosor; el contorno la engorda lo justo para
     que a este tamaño no se vea fina al lado de las dos líneas blancas. */
  -webkit-text-stroke:.012em transparent;
}

/* El trazo de debajo. Es una forma cerrada que se afina por las puntas, como
   un brochazo: una línea recta aquí quedaría de plantilla. */
body.home .hhero__brocha{
  display:block;width:min(94%,580px);height:clamp(16px,4.6vw,30px);
  margin:-.1em auto 0;fill:var(--primary);
  filter:drop-shadow(0 3px 10px rgba(242,80,62,.45));
}

/* El claim: una frase que se queda y, debajo, el dato que la respalda. */
/* Las dos frases van seguidas, separadas solo por el punto. El tamaño está
   puesto para que en un móvil entren en dos líneas: son 76 caracteres, así que
   caben 38 por línea, y a 4vw el texto ocupa justo eso. text-wrap:balance se
   encarga de que las dos líneas queden parecidas en vez de una llena y otra
   con tres palabras. */
body.home .hhero__claim{
  font-family:var(--font-body);font-weight:500;
  font-size:clamp(.86rem,4vw,1.42rem);line-height:1.35;
  margin:clamp(18px,3.4vw,26px) auto 0;max-width:42ch;color:#fff;
  text-shadow:0 3px 16px rgba(0,0,0,.6);text-wrap:balance;
}

body.home .hero__cta{margin-top:clamp(26px,4.4vw,38px)}
body.home .hero__cta .btn{gap:.7em}
body.home .hero__cta .flecha{width:1.05em;height:1.05em;flex:0 0 auto;transition:transform .22s ease}
body.home .hero__cta .btn:hover .flecha{transform:translateX(4px)}

/* Las líneas de adorno: muy tenues y por detrás del texto. Sugieren movimiento
   en las esquinas sin robarle atención a nada. */
body.home .hero__trazos{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;fill:none;
  stroke:var(--primary);stroke-width:2;opacity:.3;
}
body.home .hero__trazos .fina{stroke-width:1.2;opacity:.55}

@media (max-width:640px){
  /* En el móvil los botones a todo el ancho y uno debajo del otro: son el
     final del hero y así no hay que apuntar. */
  body.home .hero__cta{flex-direction:column;gap:12px}
  body.home .hero__cta .btn{width:100%;justify-content:center}
}

/* Las palabras sueltas del hero, recolocadas: antes "Pasión" caía justo al
   lado del botón principal y parecía parte de él. */
body.home .hero__chip:nth-of-type(1){top:16%;left:5%}
body.home .hero__chip:nth-of-type(2){top:14%;right:5%}
body.home .hero__chip:nth-of-type(3){bottom:16%;left:7%}

/* En pantalla estrecha el titular y los botones ocupan todo el centro, así que
   las palabras se van arriba del todo y al pie, que es donde queda sitio.
   Este bloque va DESPUÉS de las posiciones de ordenador a propósito: con la
   misma especificidad gana la última, y si fuera al revés no se aplicaría. */
@media (max-width:640px){
  body.home .hero__chip:nth-of-type(1){top:12%;left:6%;bottom:auto;right:auto}
  body.home .hero__chip:nth-of-type(2){top:21%;right:7%;bottom:auto;left:auto}
  body.home .hero__chip:nth-of-type(3){top:auto;right:auto;bottom:4%;left:8%}
}

/* El claim del hero: la primera frase manda y la segunda la acompaña.
   Manrope no trae cursiva propia, así que el navegador la inclina él; a este
   tamaño se lee bien y evita cargar otra fuente entera para media línea. */
body.home .hhero__claim strong{font-weight:800;color:#fff}
body.home .hhero__claim em{font-style:italic;color:rgba(255,255,255,.86)}

/* ===========================================================
   CUENTA ATRÁS — compartida por las landings de campaña
   -----------------------------------------------------------
   Estaba en salsabachata.css y ya la usa también rueda cubana. El prefijo
   "slsb-" es herencia de cuando solo la tenía una; se mantiene para no tocar
   el HTML que ya funciona.
   =========================================================== */
/* La cuenta atrás, también al aire. Cifras de ancho fijo: si no, el bloque
   tiembla cada segundo al cambiar de número. */
.slsb-reloj{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(8px,2vw,16px);margin-top:clamp(16px,2.6vw,24px);
}
.slsb-reloj__u{display:flex;flex-direction:column;align-items:center;line-height:1;min-width:2.4em}
.slsb-reloj__u b{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.7rem,6vw,2.6rem);color:var(--accent);
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.slsb-reloj__u small{
  margin-top:.45em;font-size:clamp(.52rem,1.9vw,.64rem);
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);
}
.slsb-reloj__sep{
  font-family:var(--font-display);font-size:clamp(1.3rem,4.4vw,2rem);
  color:rgba(255,255,255,.28);line-height:1.15;
}


/* ---------- Foto de profesor ----------
   Las tarjetas de profesores nacieron con <image-slot>, que es el hueco
   arrastrable del editor. En cuanto hay foto de verdad se pone un <img>
   normal, que pesa menos y carga antes. Hereda la forma del hueco: mismo
   círculo, mismo borde y misma sombra, para que no desentone con los que
   todavía están vacíos. */
.teacher__foto{
  /* height:auto es obligatorio, no cosmético: el <img> lleva height="600" como
     atributo para reservar sitio mientras carga, y con una altura declarada el
     navegador IGNORA aspect-ratio. Sin esto la foto salía de 218x600, o sea
     un churro vertical en vez de un círculo. */
  width:100%;height:auto;aspect-ratio:1;display:block;object-fit:cover;border-radius:50%;
  border:4px solid var(--surface);box-shadow:var(--card-shadow);
}
/* Los huecos vacíos de <image-slot> traen su propia altura y se comían
   la sección entera. Mientras queden profesores sin foto, se les impone la
   misma caja cuadrada que a los que ya la tienen. */
.teacher image-slot{height:auto !important;max-height:none}

/* ---------- Profesor destacado ----------
   El mismo gesto que ya hacen las tarjetas de "por qué elegirnos": se levanta
   un poco y se enciende. Aquí además crece, que es lo que pide una cara.

   Dos caminos porque en el móvil no existe el ratón:
   - Con ratón, al pasar por encima.
   - Sin ratón, el que esté en la franja central de la pantalla, que lo marca
     profe-destacado.js. Así al bajar con el dedo se van encendiendo solos.

   OJO con el "html.js" de los selectores: NO es decoración. Estas tarjetas
   llevan la animación de entrada, y su regla —html.js .reveal.in{transform:
   none}— pesa más que un simple .teacher:hover y lo anulaba entero. Hay que
   igualarle el peso para que el efecto se vea. */
html.js .teacher.reveal{transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .8s cubic-bezier(.2,.7,.2,1)}
.teacher__foto,
.teacher image-slot{transition:box-shadow .32s ease}

html.js .teacher.reveal.destacado{transform:translateY(-8px) scale(1.05)}
/* ---------- Una luz por categoría ----------
   Los dos que dirigen comparten color; la coordinadora tiene el suyo; los
   tres profesores, otro común. Así la jerarquía se ve antes de leer el cargo.
   Los tres colores salen del logo. */
.teacher{--luz:#12B0C7}                                   /* profesores: turquesa */
.teacher:nth-child(1),.teacher:nth-child(2){--luz:#F2503E} /* dirección: rojo coral */
.teacher:nth-child(3){--luz:#FFC531}                       /* coordinación: amarillo */

/* La luz está siempre puesta, no solo al pasar por encima: es lo que agrupa
   a cada uno con los de su categoría de un vistazo. */
.teacher__foto,
.teacher image-slot{
  box-shadow:
    0 20px 40px -24px rgba(0,0,0,.55),
    0 18px 44px -24px color-mix(in srgb,var(--luz) 60%,transparent);
}
.teacher.destacado .teacher__foto,
.teacher.destacado image-slot{
  box-shadow:
    0 26px 50px -26px rgba(0,0,0,.6),
    0 26px 58px -22px color-mix(in srgb,var(--luz) 92%,transparent);
}
@media (hover:hover){
  html.js .teacher.reveal:hover{transform:translateY(-8px) scale(1.05)}
  .teacher:hover .teacher__foto,
  .teacher:hover image-slot{
    box-shadow:
      0 26px 50px -26px rgba(0,0,0,.6),
      0 26px 58px -22px color-mix(in srgb,var(--luz) 92%,transparent);
  }
}
@media (prefers-reduced-motion:reduce){
  html.js .teacher.reveal,.teacher__foto,.teacher image-slot{transition:none}
  html.js .teacher.reveal.destacado,html.js .teacher.reveal:hover{transform:none}
}

/* Segunda especialidad, en su propia línea.
   Con cinco columnas la tarjeta mide 170 px y "Salsa & Bachata · Mujeres +55"
   necesita 209: no cabe de una. Dejándolo partir solo, el punto se quedaba
   colgando al final de la primera línea. Así baja entero y el "+55" nunca se
   separa de "Mujeres". */
.teacher .role__linea{display:block;white-space:nowrap}

/* Tope al retrato. Con tres columnas la caja mide casi 400 px y una cara a
   ese tamaño convierte la sección en una galería: se frena en 200 y se
   centra dentro de su columna. */
.teacher__foto,
.teacher image-slot{max-width:200px;margin-inline:auto}

/* ---------- Vídeo en la tarjeta de estilo ----------
   Va encima de la foto, no en su lugar. Aparece cuando el vídeo ya tiene algo
   que enseñar (la clase la pone el script al cargarse), así que nunca se ve
   un rectángulo negro mientras descarga: hasta ese momento manda la foto. */
.dance-card__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;opacity:0;transition:opacity .45s ease;pointer-events:none;
}
.dance-card.con-video .dance-card__video{opacity:1}
/* El zoom del hover lo hace la foto; cuando hay vídeo, lo hacen los dos a la
   vez para que no se despeguen uno del otro. */
.dance-card__video{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.dance-card:hover .dance-card__video{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .dance-card__video{transition:none}
  .dance-card:hover .dance-card__video{transform:none}
}

/* La chapa de la zona online, en móvil.
   "Nuevo · Temporada 2026-2027" es mucho más largo que el "Nuevo · Septiembre"
   de antes: con el espaciado entre letras de ordenador se parte en dos líneas
   y una chapa de dos líneas deja de parecer una chapa. Se le afloja el cuerpo
   y el espaciado lo justo para que entre de una. */
@media (max-width:560px){
  .online__pill{font-size:.74rem;letter-spacing:.1em;padding:.7em 1.2em}
}

/* El estilo que manda cada día, debajo de su nombre. El cartel lo organiza
   así —LUNES · BACHATA— y ayuda a orientarse antes de leer hora por hora. */
.sched__foco{
  display:block;margin-top:4px;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- Cuadrante plegable en móvil ----------
   36 clases puestas en fila ocupan tres pantallas de teléfono. Con <details>
   cada día se abre al tocarlo y la sección cabe de un vistazo, sin esconder
   nada: lo que no se ve está a un toque.

   Se usa <details> y no un acordeón hecho a mano porque lo trae el navegador:
   funciona sin JavaScript, el teclado lo abre y los lectores de pantalla ya
   saben anunciarlo. */
.sched__day > summary{
  list-style:none;cursor:pointer;position:relative;
}
.sched__day > summary::-webkit-details-marker{display:none}
.sched__day > summary h3{margin-bottom:0;padding-bottom:12px}
/* Plegado, la línea de puntos se queda sola debajo del título y parece una
   fila vacía. Solo aparece cuando hay algo que separar. */
.sched__day:not([open]) > summary h3{border-bottom:none;padding-bottom:0}

/* La flecha, solo donde el plegado hace algo. */
.sched__day > summary::after{
  content:"";position:absolute;right:2px;top:7px;
  width:9px;height:9px;border-right:2px solid var(--primary);
  border-bottom:2px solid var(--primary);transform:rotate(45deg);
  transition:transform .25s ease;
}
.sched__day[open] > summary::after{transform:rotate(-135deg)}

@media (min-width:701px){
  /* En ordenador van siempre abiertos y sin flecha. Abrirlos NO se puede
     hacer desde aquí —el navegador esconde el contenido de un <details>
     cerrado de una forma que "display" no deshace—, así que lo hace
     horarios.js poniéndoles el atributo open. Esto solo quita lo que sobra
     cuando no hay nada que plegar. */
  .sched__day > summary{cursor:default;pointer-events:none}
  .sched__day > summary::after{content:none}
  .sched__day > summary h3{padding-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .sched__day > summary::after{transition:none}
}

/* Aviso de "empieza el día X" dentro de una clase del cuadrante. Va en gris y
   pequeño: es una coletilla, no el nombre de la clase. */
.sched__desde{
  display:block;margin-top:2px;font-size:.74rem;font-weight:600;
  color:var(--primary);letter-spacing:.02em;
}

/* "Solo 2 datos · 15 segundos", encima del formulario. El miedo a un
   formulario es que sea largo; decir cuánto cuesta lo desactiva antes de que
   la persona empiece a contarlos. Es el mismo recurso que ya usan las
   landings de campaña. */
.contact__rapido{
  display:inline-block;margin-top:10px;font-size:.78rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
}

/* ===========================================================
   ESTILOS: CARRUSEL EN MÓVIL
   -----------------------------------------------------------
   En ordenador son siete tarjetas en rejilla y se ven de un vistazo. En un
   teléfono esa misma rejilla es una columna de siete: hay que bajar mucho
   para enterarse de que existe la kizomba. Así que en móvil se convierten en
   un carrusel que va pasando solo.

   El desplazamiento lo hace el navegador con scroll-snap, no JavaScript: el
   dedo arrastra con la inercia de siempre y el script solo decide cuándo
   avanzar.
   =========================================================== */
@media (max-width:700px){
  .classes-grid[data-carrusel]{
    display:flex;gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* Sangra hasta el borde para que asome la siguiente tarjeta: así se
       entiende solo que hay más y que se puede deslizar. */
    margin-inline:calc(var(--pad) * -1);
    padding:6px var(--pad) 34px;
  }
  .classes-grid[data-carrusel]::-webkit-scrollbar{display:none}
  .classes-grid[data-carrusel] > .dance-card{
    flex:0 0 78%;scroll-snap-align:center;
  }
}

/* ---------- La luz de debajo, una por tarjeta ----------
   Los colores salen del logo: rojo, rosa, naranja, amarillo, menta y
   turquesa. Cada estilo lleva el suyo, así que al pasar el carrusel la luz va
   cambiando y se nota que has cambiado de tarjeta aunque no leas el título.

   Va con la sombra negra debajo, que es la que da altura; la de color sola
   aplana la tarjeta. */
.classes-grid .dance-card{
  --luz:#F2503E;
  box-shadow:
    0 26px 50px -26px rgba(0,0,0,.55),
    0 24px 54px -26px color-mix(in srgb,var(--luz) 70%,transparent);
}
.classes-grid .dance-card:nth-child(1){--luz:#F2503E} /* rojo coral */
.classes-grid .dance-card:nth-child(2){--luz:#FF4878} /* rosa */
.classes-grid .dance-card:nth-child(3){--luz:#FF7A18} /* naranja */
.classes-grid .dance-card:nth-child(4){--luz:#FFC531} /* amarillo */
.classes-grid .dance-card:nth-child(5){--luz:#30D8A8} /* menta */
.classes-grid .dance-card:nth-child(6){--luz:#12B0C7} /* turquesa */
.classes-grid .dance-card:nth-child(7){--luz:#FF2D55} /* rojo rosado */

/* La tarjeta que está en el centro del carrusel se enciende más: es la que
   toca mirar. */
.classes-grid .dance-card.en-centro{
  box-shadow:
    0 26px 50px -26px rgba(0,0,0,.6),
    0 30px 66px -22px color-mix(in srgb,var(--luz) 95%,transparent);
}
.classes-grid .dance-card{transition:box-shadow .4s ease}
@media (prefers-reduced-motion:reduce){
  .classes-grid .dance-card{transition:none}
}

/* ---------- Contacto en móvil: todo centrado ----------
   A una columna, el texto alineado a la izquierda deja los títulos
   descolgados del formulario, que sí va centrado. Centrando las dos tarjetas
   el bloque se lee como una sola cosa. */
@media (max-width:860px){
  .contact__card,
  .contact__aside{text-align:center;min-width:0}
  .contact__card .lead,
  .contact__aside .lead{margin-inline:auto}
  /* La ficha de contacto mantiene su icono a la izquierda del texto: un
     teléfono y una dirección se leen peor centrados. */
  .contact__perk{text-align:left;justify-content:center}
  .consent{text-align:left;justify-content:center;max-width:30rem;margin-inline:auto}
}

/* ---------- Botones a todo lo ancho en pantalla pequeña ----------
   .btn--lg lleva un relleno lateral pensado para un botón que se ajusta a su
   texto. Cuando además ocupa el 100% del ancho, ese relleno se come el sitio
   que necesitan las letras: en un móvil de 390 px dejaba 179 de 350, y
   "Quiero mi clase gratis" salía cortado por los dos lados.

   Un botón que ya ocupa todo el ancho no necesita separarse de nada. */
@media (max-width:560px){
  .btn--lg{padding-inline:clamp(14px,4vw,22px)}
  .btn{white-space:normal;text-align:center}
}

/* La hora ahora es un rango —"19:30 a 20:30"— y ocupa el doble. Se le impide
   partirse por la mitad y se deja que el nombre de la clase sea el que ceda
   sitio, que es el que puede permitírselo. */
.sched__slot time{white-space:nowrap;flex:0 0 auto}
.sched__slot .cls{flex:1 1 auto;min-width:0}

/* ---------- Crédito del estudio, lo último de todo ----------
   Centrado y en voz baja: es una firma, no un anuncio. El logo ya lleva su
   nombre y su "estudio audiovisual", así que al lado solo hace falta el
   "Hecha por". Va separado por una línea del resto del pie para que no se
   confunda con los enlaces legales. */
.hechapor{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:22px var(--pad) 26px;margin-top:8px;
  border-top:1px solid var(--line);
}
.hechapor span{
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  color:color-mix(in srgb,var(--ink) 48%,transparent);
}
.hechapor img{
  width:104px;height:auto;display:block;
  opacity:.78;transition:opacity .25s ease;
}
.hechapor:hover img{opacity:1}
@media (prefers-reduced-motion:reduce){ .hechapor img{transition:none} }

/* En las páginas legales el pie va sobre blanco: el logo es claro y ahí
   desaparecería, así que se le pone su fondo oscuro, como en el original. */
body.legal .hechapor{
  background:#0E0A0C;border-top:none;margin-top:0;
}
body.legal .hechapor span{color:rgba(255,255,255,.55)}

/* ---------- El botón de WhatsApp y la tarjeta de reserva ----------
   En ordenador caben los dos en la misma línea: la tarjeta va centrada y el
   botón en la esquina. En el móvil la tarjeta ocupa casi todo el ancho y se
   le pone encima, así que el botón sube por encima de ella.

   Sube solo mientras la tarjeta está a la vista; el resto del tiempo se
   queda en su esquina de siempre. */
@media (max-width:700px){
  .wa-float{transition:transform .25s, bottom .32s cubic-bezier(.2,.8,.2,1)}
  body.con-tarjeta .wa-float{bottom:calc(20px + 86px)}
}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none}
}

/* Página bloqueada mientras el menú está abierto.
   Se usa position:fixed y no overflow:hidden porque en iOS el segundo no
   basta: la página sigue moviéndose por debajo. El top negativo conserva
   dónde estaba la persona para devolverla al mismo sitio al cerrar. */
body.menu-abierto{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* La caja de rescate es la de éxito con el color de aviso arriba: se parece
   lo justo para no parecer una pantalla de error rota, y se distingue lo
   suficiente para que nadie la confunda con un "ya está". */
.lead-ok--rescate{border-top:4px solid var(--accent-2,#FFC24B)}
.lead-ok--rescate h3{color:#8a5a00}

/* La peana del portátil sobresale un 7% por cada lado a propósito, para que
   parezca una base más ancha que la pantalla. En el móvil ese 7% se sale de
   la pantalla y hacía que la página entera se desplazase en horizontal: un
   defecto que se notaba en las cuatro landings que llevan el maquetado.
   En pantalla estrecha el saliente se recorta a lo que cabe. */
@media (max-width:700px){
  :is(body.slsb,body.p55,body.rueda,body.home) .laptop__base{width:104%;margin:0 -2%}
}

/* El móvil del maquetado va girado 7 grados sobre su esquina inferior
   derecha, así que la de arriba se va hacia fuera ~26 px y empujaba el ancho
   de la página: por eso las landings se desplazaban en horizontal en el
   móvil. Subir el "right" no bastaba (ya se intentó con 22 px).
   Se recorta en el propio apartado, que ocupa todo el ancho, así que lo único
   que se corta es lo que de todas formas caía fuera de la pantalla.
   Es "clip" y no "hidden" a propósito: hidden crearía un contenedor de
   desplazamiento y rompería cualquier position:sticky de dentro. */
:is(body.slsb,body.p55,body.rueda,body.home) #online{overflow-x:clip}

/* ---------- Vuelta a la home desde una landing ----------
   En estas páginas el logo no es un enlace a propósito: son tráfico de pago y
   cada salida cuesta dinero. Pero quien llega desde la home sí necesita poder
   volver, y antes se quedaba encerrado.

   Va sin apellidos de página para que sirva en las siete. Toma el color de
   cada landing de --primary, así que se adapta sola a la paleta de cada una.

   Es una pastilla de cristal, no un enlace suelto: así no compite con el botón
   de "Clase gratis" que tiene al lado —ese es el que manda— pero se ve que se
   puede pulsar. */
.nav__back{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.58em .95em .58em .72em;
  border-radius:999px;
  border:1px solid color-mix(in srgb,currentColor 26%,transparent);
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-weight:700;font-size:.9rem;line-height:1;white-space:nowrap;
  color:var(--ink);
  transition:color .2s,border-color .2s,background .2s;
}
.nav__back svg{width:15px;height:15px;transition:transform .2s ease}
.nav__back:hover{
  color:var(--primary);
  border-color:color-mix(in srgb,var(--primary) 55%,transparent);
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
}
/* La flecha se asoma hacia la izquierda al pasar por encima: dice "hacia
   atrás" sin necesidad de leer la palabra. */
.nav__back:hover svg{transform:translateX(-3px)}
.nav__back:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* Sobre el hero, antes de hacer scroll, la barra es transparente y el fondo es
   una foto: ahí el botón va en blanco y con el cristal algo más oscuro para
   que no se pierda sobre las zonas claras de la imagen. */
.nav:not(.scrolled) .nav__back{
  color:#fff;
  border-color:rgba(255,255,255,.34);
  background:rgba(0,0,0,.26);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.nav:not(.scrolled) .nav__back:hover{
  background:rgba(0,0,0,.42);border-color:rgba(255,255,255,.6);color:#fff;
}

/* En el móvil manda el botón de reservar: el de volver se queda en el icono,
   redondo, que se entiende igual y deja sitio. */
@media (max-width:560px){
  .nav__back{padding:.6em;gap:0}
  .nav__back span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  .nav__back svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  .nav__back,.nav__back svg{transition:none}
  .nav__back:hover svg{transform:none}
}

/* El botón de volver nace con el atributo hidden y lo destapa volver-inicio.js
   solo si la página anterior fue la home. Hace falta decirlo aquí porque la
   regla de arriba le pone display:inline-flex, y una hoja de autor gana al
   display:none que el navegador le da por el atributo: sin esto, el botón se
   vería siempre y el hidden no serviría de nada. */
.nav__back[hidden]{display:none}

/* ---------- Elegir el día de la clase dentro del formulario ----------
   El selector nace del JavaScript: si el CRM no contesta no aparece y el
   formulario se queda como estaba, así que estos estilos solo se usan cuando
   de verdad hay clases que ofrecer. */
.reserva{border:0;margin:4px 0 2px;padding:0;display:block}
.reserva__titulo{
  padding:0;text-align:left;font-family:var(--font-display);font-size:1.35rem;line-height:1.1;
  color:var(--ink);letter-spacing:.01em;
}
.reserva__pista{margin:.3em 0 .8em;text-align:left;font-size:.86rem;color:var(--ink-soft);line-height:1.35}

/* Cada opción es una fila pulsable entera, no un puntito diminuto: mucha de
   esta gente reserva desde el móvil y con prisa. */
.reserva__opcion{
  display:flex;align-items:flex-start;gap:.7em;
  padding:.72em .9em;margin-bottom:7px;
  border:1.5px solid rgba(20,5,15,.14);border-radius:14px;
  background:#fff;
  cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;
}
.reserva__opcion:hover{border-color:color-mix(in srgb,var(--primary) 50%,transparent)}
.reserva__opcion:has(input:checked){
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 8%,#fff);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);
}
.reserva__opcion input{margin-top:.25em;accent-color:var(--primary);width:18px;height:18px;flex-shrink:0}
.reserva__texto{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.reserva__texto b{font-size:.97rem;line-height:1.25;color:var(--ink)}
.reserva__texto small{font-size:.82rem;line-height:1.3;color:var(--ink-soft)}

/* Pantalla de reservado: dos botones, y ninguno obligatorio. */
.lead-ok--reservado .btn{margin-top:8px}
.lead-ok--reservado .btn--ghost{margin-bottom:2px}

/* Segundo paso: las fechas de la clase elegida. Van como fichas en fila y no
   como otra lista vertical, para que un día con cuatro o cinco fechas no
   empuje el botón de enviar fuera de la pantalla en el móvil. */
.reserva__fechas{margin:2px 0 8px}
.reserva__subtitulo{
  margin:.2em 0 .5em;text-align:left;
  font-weight:800;font-size:.86rem;color:var(--ink);
}
.reserva__chips{display:flex;flex-wrap:wrap;gap:7px}
.reserva__chip{position:relative;cursor:pointer}
/* El radio de verdad se esconde pero sigue ahí: con el tabulador se recorre y
   los lectores de pantalla lo anuncian. La ficha es solo su aspecto. */
.reserva__chip input{position:absolute;opacity:0;width:0;height:0}
.reserva__chip span{
  display:inline-block;padding:.5em .85em;border-radius:999px;
  border:1.5px solid rgba(20,5,15,.14);background:#fff;
  font-size:.88rem;font-weight:700;color:#24101A;
  transition:border-color .18s,background .18s,color .18s;
}
.reserva__chip:hover span{border-color:color-mix(in srgb,var(--primary) 50%,transparent)}
.reserva__chip input:checked + span{
  border-color:var(--primary);
  background:var(--primary);color:var(--on-primary,#fff);
}
.reserva__chip input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
/* Día de la semana, hora y nombre de la clase, siempre a la vista: cuando hay
   una sola clase el primer paso se salta y, sin esto, en las fichas solo se
   leería "13 de noviembre". */
.reserva__detalle{
  margin:-.25em 0 .6em;text-align:left;
  font-size:.84rem;font-weight:600;color:var(--ink-soft);
}
/* Vuelta atrás desde "ya sé bailar". Es un botón de verdad (no un enlace) para
   que entre con el tabulador y lo anuncien los lectores de pantalla, pero se
   le quita el aspecto de botón: aquí es una salida discreta, no una acción
   que compita con la de reservar. */
.reserva__volver{
  display:inline-block;margin:-2px 0 6px;padding:.35em 0;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:.86rem;font-weight:700;
  color:var(--primary);text-decoration:underline;text-underline-offset:3px;
}
.reserva__volver:hover{opacity:.8}