/* ==========================================================================
   Rasta Yogui — sistema de diseño
   Paleta tomada de la identidad real: verde #007853, crema, ámbar del logo
   ========================================================================== */

@import url("../fonts/fonts.css");

:root{
  /* --- Color --- */
  --ink:        #082A23;
  --ink-soft:   #354A42;
  /* Oscurecidos para mantener AA con la foto de fondo por debajo:
     #7C9289 daba 3.11 y #556960 caía a 3.64 sobre el fondo con foto. */
  --ink-faint:  #3C4E46;

  --green:      #007853;
  --green-dark: #004832;
  --green-deep: #06251D;
  --green-mist: #E4F1E9;

  --cream:      #FDF7EE;
  --cream-warm: #F7EDDD;
  --sand:       #EEDFC7;

  --amber:      #DE8B33;
  --amber-soft: #E9BE86;
  --bindi:      #E23B2E;

  --white:      #FFFFFF;

  /* --- Tipografía --- */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.84rem, 0.80rem + 0.17vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.40vw, 1.46rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.68vw, 1.9rem);
  --step-3:  clamp(1.73rem, 1.51rem + 1.08vw, 2.47rem);
  --step-4:  clamp(2.07rem, 1.74rem + 1.66vw, 3.2rem);
  --step-5:  clamp(2.49rem, 1.99rem + 2.48vw, 4.2rem);

  /* --- Espacio --- */
  --gutter:    clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --max:        1180px;
  --max-narrow:  700px;

  --radius:     14px;
  --radius-lg:  26px;
  --radius-blob: 46% 54% 40% 60% / 56% 44% 56% 44%;

  --shadow-sm: 0 1px 2px rgba(8,42,35,.06), 0 4px 14px rgba(8,42,35,.05);
  --shadow-md: 0 2px 8px rgba(8,42,35,.07), 0 20px 44px -14px rgba(8,42,35,.18);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --- Reset --- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:82px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img, picture, svg, video, iframe{ display:block; max-width:100%; }
img{ height:auto; }
button, input, textarea, select{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.017em;
  margin:0 0 .5em;
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
h1{ font-size:var(--step-5); }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--green-dark); text-underline-offset:.22em; }
a:hover{ color:var(--green); }
::selection{ background:var(--green); color:var(--cream); }

:focus-visible{ outline:2.5px solid var(--green); outline-offset:3px; border-radius:4px; }
.section--dark :focus-visible{ outline-color:var(--amber); }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Saltar al contenido: oculto hasta que se enfoca con teclado */
.skip-link:focus{
  position:fixed; top:.75rem; left:.75rem; z-index:100;
  width:auto; height:auto; margin:0; clip:auto; overflow:visible;
  padding:.8em 1.3em; border-radius:999px;
  background:var(--green); color:var(--cream);
  text-decoration:none; box-shadow:var(--shadow-md);
}

/* --- Layout --- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--max-narrow); }

.section{ padding-block:var(--section-y); position:relative; }
.section--warm{ background:var(--cream-warm); }
.section--mist{ background:var(--green-mist); }
.section--dark{ background:var(--green-deep); color:var(--cream); }
.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--cream); }

/* --- Tipografía utilitaria --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.65em;
  font-size:var(--step--1); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); margin:0 0 1.1rem;
}
.eyebrow::before{ content:""; width:1.9em; height:1px; background:currentColor; opacity:.55; }
.section--dark .eyebrow{ color:var(--amber); }

.lede{ font-size:var(--step-1); line-height:1.55; color:var(--ink-soft); max-width:56ch; }
.section--dark .lede{ color:rgba(253,247,238,.78); }
.balance{ text-wrap:balance; }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.75em; border-radius:999px;
  border:1.5px solid transparent;
  font-weight:500; font-size:var(--step-0); line-height:1;
  text-decoration:none; cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ background:var(--green); color:var(--cream); box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--green-dark); color:var(--white); box-shadow:var(--shadow-md); }

.btn--ghost{ background:transparent; color:var(--green-dark); border-color:rgba(0,120,83,.35); }
.btn--ghost:hover{ background:var(--green); color:var(--cream); border-color:var(--green); }

.btn--amber{ background:var(--amber); color:var(--green-deep); }
.btn--amber:hover{ background:#EA9B48; color:var(--green-deep); }

.btn--light{ background:var(--cream); color:var(--green-deep); }
.btn--light:hover{ background:var(--white); }

.btn--outline-light{ background:transparent; color:var(--cream); border-color:rgba(253,247,238,.36); }
.btn--outline-light:hover{ background:var(--cream); color:var(--green-deep); border-color:var(--cream); }

.btn--sm{ padding:.68em 1.2em; font-size:var(--step--1); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }
.center .btn-row{ justify-content:center; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(253,247,238,.85);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:rgba(8,42,35,.1);
  background:rgba(253,247,238,.95);
}
/* Tres columnas: la del centro queda centrada respecto a la página,
   sin que la desplace el ancho del logo o del botón. */
.site-header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1.5rem;
  min-height:78px;
  transition:min-height .3s var(--ease);
}
.site-header.is-stuck .site-header__inner{ min-height:62px; }

.brand{ display:flex; align-items:center; flex-shrink:0; text-decoration:none; }
.brand img{ height:52px; width:auto; transition:height .3s var(--ease); }
.site-header.is-stuck .brand img{ height:42px; }

.nav{ display:flex; align-items:center; justify-content:center; gap:clamp(.9rem,2vw,1.8rem); }
.nav a{
  font-size:var(--step--1); font-weight:500;
  color:var(--ink); text-decoration:none;
  position:relative; padding-block:.4rem;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--green-dark); }
.nav a:hover::after{ transform:scaleX(1); }

/* Sección en la que estás ahora */
.nav a[aria-current="true"]{ color:var(--green-dark); }
.nav a[aria-current="true"]::after{
  transform:scaleX(1);
  background:var(--amber);
  height:2px;
}

.header-cta{ display:flex; align-items:center; justify-content:flex-end; gap:.75rem; }

/* En escritorio el CTA vive en .header-cta; el del menú es sólo para móvil */
@media (min-width:901px){
  .nav > .btn{ display:none; }
}

.nav-toggle{
  display:none; width:44px; height:44px;
  align-items:center; justify-content:center;
  background:transparent; border:1.5px solid rgba(8,42,35,.16);
  border-radius:999px; cursor:pointer;
}
.nav-toggle span{ display:block; width:17px; height:1.6px; background:var(--ink); position:relative; transition:background .2s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:17px; height:1.6px; background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.nav-toggle span::before{ top:-5.5px; }
.nav-toggle span::after{ top:5.5px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .header-cta .btn{ display:none; }
  .site-header__inner{ grid-template-columns:1fr auto; }
  .nav{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); padding:.5rem var(--gutter) 2rem;
    border-bottom:1px solid rgba(8,42,35,.1); box-shadow:var(--shadow-md);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
    max-height:calc(100dvh - 78px); overflow-y:auto;
  }
  .nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav a{ padding:1rem 0; font-size:var(--step-1); border-bottom:1px solid rgba(8,42,35,.08); }
  .nav a::after{ display:none; }
  .nav .btn{ margin-top:1.4rem; width:100%; }
}

/* ==========================================================================
   1 · Hero
   ========================================================================== */
.hero{ position:relative; padding-block:clamp(.75rem,2vw,1.75rem) clamp(3.5rem,7vw,5.5rem); overflow:hidden; }

/* --- Fondo tenue: la terraza de Casa Guanacaste ---
   Se desvanece hacia arriba para que el titular quede sobre crema limpia,
   y sólo toma cuerpo en la parte baja del hero. */
.hero__fondo{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  /* Ahora la foto vive debajo del texto, así que va aclarada y a menos
     opacidad: es el máximo que aguanta manteniendo AA en la bajada. */
  opacity:.34;
  filter:saturate(1.05) brightness(1.32);
  pointer-events:none;
  /* Sólo se apaga arriba, para que el header no se ensucie */
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.35) 16%, rgba(0,0,0,.85) 34%, #000 55%);
  mask-image:linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.35) 16%, rgba(0,0,0,.85) 34%, #000 55%);
}

/* Velo invertido: el video es opaco, así que la foto detrás de él no se ve.
   Se deja limpia del lado del texto y se apaga hacia la derecha. */
.hero__velo{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:linear-gradient(96deg,
    transparent 0%,
    transparent 42%,
    rgba(253,247,238,.30) 58%,
    rgba(253,247,238,.62) 76%,
    rgba(253,247,238,.78) 100%);
}
@media (max-width:900px){
  /* Apilado: el video queda arriba y el texto abajo, así que el velo se
     invierte en vertical — se apaga sobre el video y se abre bajo el texto. */
  .hero__velo{
    background:linear-gradient(to bottom,
      rgba(253,247,238,.70) 0%,
      rgba(253,247,238,.42) 28%,
      transparent 52%);
  }
}

/* --- Luz de atardecer ---
   Las clases son a las 6 PM y las fotos son de hora dorada. Un halo ámbar
   muy tenue que se desplaza despacio, como la luz cayendo. */
.hero::before{
  content:"";
  position:absolute; z-index:0;
  inset:-30% -20% auto auto;
  width:min(900px, 85%); aspect-ratio:1/1;
  background:radial-gradient(circle,
    rgba(222,139,51,.20) 0%,
    rgba(222,139,51,.09) 38%,
    transparent 68%);
  pointer-events:none;
  animation:caeLaTarde 42s ease-in-out infinite alternate;
}
/* El fondo queda fuera: si recibe position:relative entra en el flujo
   y empuja todo el contenido hacia abajo. */
.hero > *:not(.hero__fondo):not(.hero__velo){ position:relative; z-index:1; }
@keyframes caeLaTarde{
  from{ transform:translate3d(0,0,0) scale(1);      opacity:.75; }
  to  { transform:translate3d(-6%,7%,0) scale(1.18); opacity:1; }
}
.hero__grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__title{ margin-bottom:.4em; }
.hero__title em{ font-style:italic; color:var(--green); font-variation-settings:"SOFT" 40,"WONK" 1; }
.hero__lede{ margin-bottom:1.6rem; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:1.1rem 2.2rem;
  margin-top:1.5rem; padding-top:1.2rem;
  border-top:1px solid rgba(8,42,35,.12);
}
.hero__meta > div{ display:flex; flex-direction:column; gap:.1rem; }
.hero__meta dt{ font-size:var(--step--1); color:var(--ink-faint); letter-spacing:.05em; text-transform:uppercase; }
.hero__meta dd{ margin:0; font-family:var(--display); font-size:var(--step-1); color:var(--green-dark); line-height:1.2; }

.hero__media{ position:relative; }
/* --- Video de presentación en el hero ---
   Formato vertical 9:16 respetado: recortarlo se comería los subtítulos,
   que van abajo. Por eso lleva esquinas redondeadas en vez de la hoja:
   una silueta de hoja en un marco tan alto haría puntas larguísimas y
   le cortaría la cabeza. La hoja sigue presente en la forma de atrás. */
.hero__video{
  position:relative; z-index:2;
  /* El video es 9:16, pero se muestra en 4:5 con object-fit:cover.
     Comprobado que el recorte no se come los subtítulos quemados,
     que van a media altura, ni la cabeza. */
  width:min(100%, 430px);
  margin-inline:auto;
  aspect-ratio:4/5;
  /* Forma de hoja, como el resto de la identidad. Con el 9:16 anterior hacía
     puntas larguísimas; en 4:5 funciona. */
  border-radius:52% 14% 52% 14% / 14% 52% 14% 52%;
  overflow:hidden;
  background:var(--green-deep);
  /* Sombra suave: la fuerte lo hacía leer como una tarjeta pegada encima */
  box-shadow:0 18px 40px -22px rgba(8,42,35,.45);
}
/* El video es su propio botón de pausa */
.hero__video video{ cursor:pointer; }
.hero__video video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero__play{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem;
  background:linear-gradient(180deg, rgba(6,37,29,.12), rgba(6,37,29,.55));
  border:0; cursor:pointer; color:var(--cream);
  transition:background .3s var(--ease), opacity .3s var(--ease);
}
.hero__play:hover{ background:linear-gradient(180deg, rgba(6,37,29,.05), rgba(6,37,29,.42)); }
.hero__play svg{
  width:26px; height:26px;
  padding:1.1rem; box-sizing:content-box;
  border-radius:50%;
  background:var(--amber); color:var(--green-deep);
  transition:transform .3s var(--ease);
}
.hero__play:hover svg{ transform:scale(1.08); }
.hero__play span{
  font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 2px 12px rgba(6,37,29,.7);
}
.hero__play[hidden]{ display:none; }
/* --- La forma respira ---
   Ritmo real de respiración: 4 segundos inhalando, 6 exhalando.
   El ciclo completo dura 10s, así que el 40% de la línea de tiempo es la
   inhalación y el 60% restante la exhalación. */
.hero__blob{
  position:absolute; z-index:1; inset:-7% -9% auto auto;
  width:74%; aspect-ratio:1/1; background:var(--green-mist);
  /* Forma de hoja, como las del logotipo */
  border-radius:8% 62% 8% 62% / 62% 8% 62% 8%;
  transform-origin:center;
  animation:respira 10s ease-in-out infinite;
}
@keyframes respira{
  0%   { transform:scale(.94) rotate(0deg); }
  40%  { transform:scale(1.10) rotate(-3deg); }
  100% { transform:scale(.94) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce){
  .hero__blob{ animation:none; transform:scale(1); }
  .hero::before{ animation:none; }
}

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; max-width:420px; margin-inline:auto; width:100%; }
}

/* ==========================================================================
   2 · Para quién es y cómo se practica
   ========================================================================== */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}

/* --- Titulares que se escriben letra por letra ---
   No es sólo un desplazamiento: cada letra entra dura y angulosa
   (SOFT 0, peso 300) y se ablanda hasta la forma orgánica de Fraunces
   (SOFT 100, peso 500). El movimiento sale de la tipografía misma. */
/* Sólo se animan opacity y transform: son las dos propiedades que la GPU
   compone sin repintar. Animar font-variation-settings obliga a rasterizar
   cada letra en cada frame, y filter:blur impide componer del todo — con
   30+ letras a la vez eso se siente lento y a tirones. */
.palabra{ display:inline-block; white-space:nowrap; }
.js [data-letras] .letra{
  display:inline-block;
  opacity:0;
  transform:translateY(.34em) rotate(-5deg);
  transition:opacity .42s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--i, 0) * 15ms);
  will-change:opacity, transform;
}
/* Al terminar se sueltan las capas: dejar 30 elementos con will-change
   permanente consume memoria de composición sin motivo. */
.js [data-letras].ya-entro .letra{ will-change:auto; }
.js [data-letras].is-visible .letra{ opacity:1; transform:none; }

/* El ablandado de la tipografía se hace una sola vez sobre el titular
   entero, no letra por letra: una rasterización en vez de treinta. */
.js [data-letras]{
  font-variation-settings:"SOFT" 0, "WONK" 0;
  transition:font-variation-settings .8s var(--ease) .2s;
}
.js [data-letras].is-visible{ font-variation-settings:"SOFT" 100, "WONK" 1; }
/* --- Variante del hero: más marcada ---
   Las letras entran desenfocadas, giradas y encogidas, y se van asentando
   hasta la forma blanda de Fraunces. */
.js .letras--hero .letra{
  opacity:0;
  transform:translateY(.5em) rotate(-7deg) scale(.88);
  transform-origin:50% 100%;
  transition:opacity .45s var(--ease), transform .55s var(--ease);
  transition-delay:calc(var(--i, 0) * 17ms);
}
.js .letras--hero.is-visible .letra{ opacity:1; transform:none; }
/* El itálico entra un poco después, para que remate la frase */
.js .letras--hero em .letra{ transition-delay:calc(var(--i, 0) * 17ms + 90ms); }

@media (prefers-reduced-motion: reduce){
  .js [data-letras] .letra,
  .js .letras--hero .letra{ opacity:1; transform:none; transition:none; }
  .js [data-letras]{
    transition:none; font-variation-settings:"SOFT" 100, "WONK" 1;
  }
}
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }

.pain-list{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:0; }
.pain-list li{
  padding:1.05rem 0 1.05rem 2rem; position:relative;
  color:var(--ink-soft); border-bottom:1px solid rgba(8,42,35,.11);
}
.pain-list li:first-child{ border-top:1px solid rgba(8,42,35,.11); }
.pain-list li::before{
  content:""; position:absolute; left:.35rem; top:1.62rem;
  width:7px; height:7px; border-radius:50%; background:var(--amber);
}

.method{ display:grid; gap:1.5rem; margin-top:1.6rem; }
.method__item{ display:flex; gap:1.1rem; align-items:flex-start; }
.method__num{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--green); color:var(--cream);
  display:grid; place-items:center;
  font-family:var(--display); font-size:.95rem; line-height:1;
}
.method__item h3{ margin:.25rem 0 .3rem; font-size:var(--step-1); }
.method__item p{ margin:0; color:var(--ink-soft); font-size:var(--step--1); line-height:1.6; }

/* ==========================================================================
   3 · Horario y ubicación
   ========================================================================== */
/* Datos de la clase + preguntas, lado a lado */
.practico{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(1.75rem,4vw,3.5rem); align-items:start;
}
@media (max-width:900px){ .practico{ grid-template-columns:1fr; } }

.classcard{
  background:var(--white); border:1px solid rgba(8,42,35,.1);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.classcard__body{ padding:clamp(1.5rem,3.5vw,2.2rem); }
.classcard__when{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  font-family:var(--display); font-size:var(--step-3);
  color:var(--green-dark); line-height:1.1; margin-bottom:.4rem;
}
.classcard__when span{ font-family:var(--body); font-size:var(--step-0); color:var(--ink-faint); }
.classcard__addr{ color:var(--ink-soft); margin-bottom:1.6rem; }
.classcard__addr strong{ color:var(--ink); font-weight:500; }

.price-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem;
  padding:1.1rem 0; margin-bottom:1.6rem;
  border-block:1px solid rgba(8,42,35,.11);
}
.price{ display:flex; align-items:baseline; gap:.3rem; font-family:var(--display); line-height:1; }
.price b{ font-size:var(--step-3); font-weight:500; color:var(--green-dark); }
.price span{ font-family:var(--body); font-size:var(--step--1); color:var(--ink-faint); }
.price-free{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--amber); color:var(--green-deep);
  font-size:var(--step--1); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.5em 1em; border-radius:999px;
}

.classcard__map{ background:var(--sand); line-height:0; }
.classcard__map iframe{ width:100%; height:230px; border:0; }
@media (max-width:900px){ .classcard__map iframe{ height:210px; } }

/* ==========================================================================
   4 · Benjamin
   ========================================================================== */
.instructor{
  display:grid; grid-template-columns:.82fr 1.18fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.instructor__photo{
  border-radius:var(--radius-blob); overflow:hidden;
  aspect-ratio:1/1; box-shadow:var(--shadow-md); background:var(--sand);
}
.instructor__photo img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Benjamín — sección anclada que se expande con el scroll
   Versión en JS plano del efecto ScrollExpand.
   Sin JS (o con "reducir movimiento") cae al diseño estático de arriba.
   ========================================================================== */
.bx{ background:var(--green-deep); }
.bx__track{ position:relative; }
.bx__stage{
  position:sticky; top:0;
  height:100svh; width:100%;
  overflow:hidden;
  display:grid; place-items:center;
}
.bx__frame{
  position:absolute; inset:0;
  clip-path:inset(26% 30% 26% 30% round 40px);
  will-change:clip-path;
}
.bx__media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.28); transform-origin:center;
  will-change:transform;
  user-select:none; -webkit-user-drag:none;
}
.bx__scrim{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(to top,
    rgba(6,37,29,.88), rgba(6,37,29,.30) 52%, rgba(6,37,29,.62));
}
/* Rótulo que se levanta y desaparece al abrirse el marco */
.bx__intro{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 6%;
  pointer-events:none; will-change:opacity, transform;
}
.bx__intro h2{
  color:var(--cream); margin:0;
  font-size:clamp(2.2rem, 7vw, 4.6rem);
  text-shadow:0 2px 30px rgba(6,37,29,.5);
}
.bx__intro .eyebrow{ color:var(--amber); }

/* Contenido que entra escalonado sobre la foto */
.bx__overlay{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.75rem,5vw,4.5rem);
  pointer-events:none;
}
.bx__overlay > *{
  max-width:60ch;
  opacity:0; transform:translate3d(0,26px,0);
  will-change:opacity, transform;
}
.bx__overlay h3{
  color:var(--cream); font-size:clamp(1.6rem,4vw,2.6rem); margin-bottom:.6rem;
}
.bx__overlay p{
  color:rgba(253,247,238,.9); font-size:var(--step-1); line-height:1.55;
  text-shadow:0 1px 14px rgba(6,37,29,.6);
}
.bx__overlay .creds{ margin-top:1.4rem; pointer-events:auto; }
.bx__overlay .creds li{
  background:rgba(253,247,238,.1); color:var(--cream);
  border-color:rgba(253,247,238,.32);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

@media (max-width:760px){
  .bx__overlay{ justify-content:flex-end; }
  .bx__overlay p{ font-size:var(--step-0); }
}
.creds{ list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem; }
.creds li{
  font-size:var(--step--1); padding:.5em 1.05em;
  border:1px solid rgba(0,120,83,.3); border-radius:999px;
  color:var(--green-dark); background:var(--white);
}
@media (max-width:820px){
  .instructor{ grid-template-columns:1fr; }
  .instructor__photo{ max-width:340px; }
}

/* ==========================================================================
   5 · Experiencia de sonido (bloque oscuro)
   ========================================================================== */
.sound{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
/* --- Carrusel con profundidad ---
   Port en CSS/JS plano de DepthCarousel: una pila de tarjetas que se aleja
   en 3D, girando y desenfocándose conforme retrocede. */
.depth{
  position:relative;
  width:100%;
  perspective:1500px;
  perspective-origin:50% 50%;
  touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  cursor:grab;
  outline:none;
}
.depth:active{ cursor:grabbing; }
.depth:focus-visible{ outline:2.5px solid var(--amber); outline-offset:6px; border-radius:14px; }

.depth__stage{
  position:relative;
  width:100%;
  transform-style:preserve-3d;
}
.depth__card{
  position:absolute; top:50%; left:50%;
  transform-origin:center center;
  transform:translate(-50%,-50%);
  overflow:hidden;
  border-radius:18px;
  background:#0A1F19;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65), 0 8px 20px -10px rgba(0,0,0,.5);
  will-change:transform, opacity, filter;
  cursor:pointer;
  margin:0;
}
.depth__card img{
  width:100%; height:100%; object-fit:cover;
  display:block; pointer-events:none; -webkit-user-drag:none;
}
.depth__tint{
  position:absolute; inset:0; opacity:0;
  pointer-events:none; mix-blend-mode:multiply;
  background:var(--green-deep);
}

.depth__arrow{
  position:absolute; top:50%; translate:0 -50%;
  z-index:3000;
  width:46px; height:46px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(253,247,238,.24);
  background:rgba(6,37,29,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--cream); cursor:pointer;
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.depth__arrow:hover{ background:var(--amber); border-color:var(--amber); color:var(--green-deep); }
.depth__arrow--prev{ left:0; }
.depth__arrow--next{ right:0; }
.depth__arrow svg{ width:19px; height:19px; }
@media (max-width:620px){
  .depth__arrow--prev{ left:-4px; }
  .depth__arrow--next{ right:-4px; }
}

.depth__dots{
  display:flex; justify-content:center; gap:0;
  margin-top:1.2rem;
}
/* El punto se ve de 8px pero el área que se puede tocar mide 40x40:
   con 8px reales era imposible acertarle en un teléfono. */
.depth__dot{
  width:40px; height:40px;
  padding:0; border:0; background:transparent;
  display:grid; place-items:center;
  cursor:pointer;
}
.depth__dot::after{
  content:"";
  width:8px; height:8px; border-radius:999px;
  background:rgba(253,247,238,.3);
  transition:width .25s var(--ease), background .25s var(--ease);
}
.depth__dot[aria-selected="true"]::after{ width:24px; background:var(--amber); }

.depth__count{
  text-align:center; margin-top:.75rem;
  font-size:var(--step--1); color:rgba(253,247,238,.5);
}

@media (prefers-reduced-motion: reduce){
  .depth__card{ will-change:auto; }
  .depth__arrow, .depth__dot{ transition:none; }
}
.sound__points{ list-style:none; margin:1.7rem 0 2.2rem; padding:0; display:grid; gap:.75rem; }
.sound__points li{
  position:relative; padding-left:1.7rem;
  color:rgba(253,247,238,.78); font-size:var(--step--1);
}
.sound__points li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; border:1.5px solid var(--amber);
}
@media (max-width:820px){
  .sound{ grid-template-columns:1fr; }
  .sound__photo{ order:-1; max-width:400px; margin-inline:auto; width:100%; }
}

/* ==========================================================================
   6 · Galería + testimonios
   ========================================================================== */
/* --- Galería en acordeón ---
   Port en CSS/JS plano de AccordionGallery: los paneles se expanden con
   flex-grow, los cerrados se inclinan, se atenúan y pierden color. */
.acordeon{
  display:flex; gap:10px;
  width:100%;
  height:clamp(300px, 30vw, 390px);
  perspective:1400px; perspective-origin:50% 50%;
  margin-bottom:clamp(1.75rem,3.5vw,2.75rem);
}
.acordeon__panel{
  position:relative;
  flex:1 1 0; min-width:0;
  overflow:hidden;
  border-radius:var(--radius);
  cursor:pointer;
  background:var(--green-deep);
  box-shadow:0 10px 30px -18px rgba(8,42,35,.8);
  transform-style:preserve-3d; transform-origin:center center;
  will-change:flex-grow, transform;
  -webkit-tap-highlight-color:transparent;
  border:0; padding:0;
  transition:flex-grow .6s var(--ease), transform .6s var(--ease);
}
.acordeon__panel:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--amber), 0 10px 30px -18px rgba(8,42,35,.8);
}
.acordeon__media{
  position:absolute; inset:0;
  transition:filter .6s var(--ease);
  filter:grayscale(1);
}
.acordeon__panel[aria-current="true"] .acordeon__media{ filter:grayscale(0); }
.acordeon__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none;
}
.acordeon__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(6,37,29,.82) 100%),
    rgba(6,37,29,.42);
  transition:background .6s var(--ease);
}
.acordeon__panel[aria-current="true"] .acordeon__velo{
  background:linear-gradient(180deg, transparent 45%, rgba(6,37,29,.82) 100%);
}
.acordeon__etiqueta{
  position:absolute; left:18px; right:18px; bottom:18px;
  display:flex; align-items:center; gap:11px;
  pointer-events:none; z-index:2;
}
.acordeon__barra{
  flex:0 0 auto; width:3px; height:24px; border-radius:3px;
  background:var(--amber);
  opacity:0; transform:translateX(-14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.acordeon__texto{
  color:var(--cream); font-weight:500;
  font-size:clamp(.95rem,1.3vw,1.2rem);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 2px 14px rgba(6,37,29,.6);
  opacity:0; transform:translateX(-14px);
  transition:opacity .5s var(--ease) .06s, transform .5s var(--ease) .06s;
}
.acordeon__panel[aria-current="true"] .acordeon__barra,
.acordeon__panel[aria-current="true"] .acordeon__texto{
  opacity:1; transform:translateX(0);
}

@media (max-width:640px){
  .acordeon{
    flex-direction:column; perspective:none;
    height:auto; gap:8px;
  }
  .acordeon__panel{ transform:none !important; min-height:74px; }
  .acordeon__panel[aria-current="true"]{ min-height:300px; }
  .acordeon__texto{ opacity:1; transform:none; }
  .acordeon__barra{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .acordeon__panel, .acordeon__media, .acordeon__barra, .acordeon__texto{
    transition:none; will-change:auto;
  }
}

/* --- Testimonios compactos --- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(1rem,2.2vw,1.5rem); }
.quote{
  background:var(--white); border:1px solid rgba(8,42,35,.1);
  border-radius:var(--radius-lg);
  padding:clamp(1.25rem,2.4vw,1.6rem);
  display:flex; flex-direction:column;
  position:relative;
}
.quote p{
  color:var(--ink-soft); flex:1; margin:0 0 .9rem;
  font-size:var(--step-0); line-height:1.55;
}
.quote p::before{ content:"“"; color:var(--amber); font-family:var(--display); font-size:1.5em; line-height:0; vertical-align:-.15em; margin-right:.12em; }
.quote footer{
  font-size:var(--step--1);
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.quote cite{ font-style:normal; font-weight:500; color:var(--ink); }
/* Sin reducir: el tamaño heredado ya es el más chico del sitio, y por debajo
   de 13px cuesta leer en un teléfono. */
.quote small{ color:var(--ink-faint); font-size:1em; }
.quote small::before{ content:"· "; }

/* ==========================================================================
   7 · FAQ + CTA
   ========================================================================== */
.faq__titulo{
  font-size:var(--step-2); margin:0 0 .4rem;
  padding-bottom:.9rem;
}
.faq details{ border-bottom:1px solid rgba(8,42,35,.13); }
.faq details:first-of-type{ border-top:1px solid rgba(8,42,35,.13); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.15rem 2.6rem 1.15rem 0;
  font-family:var(--display); font-size:var(--step-1); line-height:1.3;
  transition:color .25s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--green); }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%;
  width:11px; height:11px; margin-top:-8px;
  border-right:1.6px solid var(--green); border-bottom:1.6px solid var(--green);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq details > div{ padding:0 2.6rem 1.4rem 0; color:var(--ink-soft); max-width:62ch; }

/* ---- Variante sobre fondo oscuro (sección de ubicación) ---- */
.section--dark .classcard{
  background:rgba(253,247,238,.055);
  border-color:rgba(253,247,238,.15);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.section--dark .classcard__when{ color:var(--cream); }
.section--dark .classcard__when span{ color:rgba(253,247,238,.55); }
.section--dark .classcard__addr{ color:rgba(253,247,238,.75); }
.section--dark .classcard__addr strong{ color:var(--cream); }
.section--dark .price-row{ border-color:rgba(253,247,238,.16); }
.section--dark .price b{ color:var(--cream); }
.section--dark .price span{ color:rgba(253,247,238,.55); }
.section--dark .classcard__map{ background:rgba(253,247,238,.08); }

.section--dark .faq__titulo{ color:var(--cream); }
.section--dark .faq details,
.section--dark .faq details:first-of-type{ border-color:rgba(253,247,238,.16); }
.section--dark .faq summary{ color:var(--cream); }
.section--dark .faq summary:hover{ color:var(--amber); }
.section--dark .faq summary::after{ border-color:var(--amber); }
.section--dark .faq details > div{ color:rgba(253,247,238,.76); }

/* Última sección antes del footer: no necesita el mismo colchón inferior
   que las intermedias, porque debajo ya viene el divisor y el footer. */
.cta-final{
  position:relative; overflow:hidden;
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
.cta-final .center h2{ max-width:20ch; margin-inline:auto; }
.cta-final .center .lede{ margin-inline:auto; max-width:48ch; }
.cta-final__glow{
  position:absolute; inset:auto 50% -60% auto; transform:translateX(50%);
  width:min(760px,125%); aspect-ratio:1/1;
  background:radial-gradient(circle, rgba(0,120,83,.5), transparent 68%);
  pointer-events:none;
}
.cta-final .wrap{ position:relative; z-index:2; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--green-deep); color:rgba(253,247,238,.7);
  /* El aire sobre el divisor va como padding del footer, no como margen del
     divisor: siendo primer hijo, su margen se colapsaría hacia afuera y
     dejaría ver el crema del body entre la sección y el footer. */
  padding-block:clamp(2.5rem,4vw,3.5rem) 2rem; font-size:var(--step--1);
}

/* --- Divisor entre la última sección y el footer ---
   La línea se desvanece hacia los bordes y lleva el punto ámbar del logo
   en el centro, con un halo del color de fondo que la interrumpe. */
.divisor{
  position:relative;
  height:1px;
  /* Sólo hacia abajo: el aire de arriba lo pone el padding del footer. */
  margin-block:0 clamp(2.5rem,4vw,3.5rem);
  background:linear-gradient(90deg,
    transparent,
    rgba(253,247,238,.20) 22%,
    rgba(253,247,238,.20) 78%,
    transparent);
}
.divisor::after{
  content:"";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:6px; height:6px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 7px var(--green-deep);
}
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1.3fr; gap:clamp(1.8rem,4vw,3rem); }
.site-footer .brand img{ height:56px; margin-bottom:1.1rem; }
.site-footer h3{
  color:var(--cream); font-family:var(--body); font-size:var(--step--1);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin:0 0 1.1rem;
}
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.site-footer ul li{ line-height:1.55; }
/* Área táctil cómoda en móvil */
.site-footer ul a{ display:inline-block; padding-block:.62rem; }
.site-footer a{ color:rgba(253,247,238,.7); text-decoration:none; transition:color .22s var(--ease); }
.site-footer a:hover{ color:var(--amber); }
.socials{ display:flex; gap:.7rem; margin-top:1.2rem; }
.socials a{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(253,247,238,.22); display:grid; place-items:center;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.socials a:hover{ background:var(--amber); border-color:var(--amber); color:var(--green-deep); }
.socials svg{ width:18px; height:18px; }
.footer__bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem;
  border-top:1px solid rgba(253,247,238,.13);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.8rem; color:rgba(253,247,238,.5);
}
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }

/* --- WhatsApp flotante --- */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,1.75rem); bottom:clamp(1rem,3vw,1.75rem);
  z-index:70; width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(8,42,35,.3);
  transition:transform .28s var(--ease);
}
.wa-float:hover{ transform:scale(1.07); color:#fff; }
.wa-float svg{ width:29px; height:29px; }

/* --- Reveal ---
   El estado oculto sólo se aplica si el JS confirmó que está activo (clase .js
   en <html>). Sin JS, o si el script falla, el contenido se ve igual. */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }

/* --- Entrada escalonada ---
   Cada elemento marcado sube y aparece con su propio retardo (--d). */
.js .sube{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js .sube.is-in{ opacity:1; transform:none; }

/* Escalona los hijos de un contenedor sin marcar cada uno */
.js [data-escalonar] > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-escalonar].is-visible > *{ opacity:1; transform:none; }
.js [data-escalonar].is-visible > *:nth-child(1){ transition-delay:.05s; }
.js [data-escalonar].is-visible > *:nth-child(2){ transition-delay:.13s; }
.js [data-escalonar].is-visible > *:nth-child(3){ transition-delay:.21s; }
.js [data-escalonar].is-visible > *:nth-child(4){ transition-delay:.29s; }
.js [data-escalonar].is-visible > *:nth-child(5){ transition-delay:.37s; }
.js [data-escalonar].is-visible > *:nth-child(6){ transition-delay:.45s; }

/* El círculo del número del método entra girando apenas */
.js [data-escalonar].is-visible .method__num{
  animation:brotar .7s var(--ease) backwards;
}
.js .method__item:nth-child(2) .method__num{ animation-delay:.13s; }
.js .method__item:nth-child(3) .method__num{ animation-delay:.21s; }
@keyframes brotar{
  from{ transform:scale(.5) rotate(-25deg); opacity:0; }
  to{ transform:scale(1) rotate(0); opacity:1; }
}

/* --- Parallax suave al hacer scroll --- */
.js .parallax{ transition:transform .12s linear; will-change:transform; }

/* --- Latido lento de la foto del hero --- */
.js .hero__photo img{ animation:respirar 22s ease-in-out infinite alternate; }
@keyframes respirar{
  from{ transform:scale(1); }
  to{ transform:scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .sube, .js [data-escalonar] > *{
    opacity:1; transform:none; transition:none;
  }
  .js [data-escalonar].is-visible .method__num{ animation:none; }
  .js .hero__photo img{ animation:none; }
  .js .parallax{ transition:none; transform:none !important; }
}