/* Punta y Taco — hoja de estilos compartida del sitio (Inicio, Presencial, Online). */

/* ── Tokens: colores originales de Punta y Taco (flyers oficiales) ───── */
:root{
  --cream:#FBEFD0;      /* fondo */
  --cream-2:#F3E1B9;
  --teal:#0E4A4B;       /* verde azulado oscuro: títulos y bloques */
  --teal-deep:#0A3738;
  --mustard:#F9B23B;    /* mostaza: botones y destacados */
  --turq:#2F8F9B;       /* turquesa: acentos secundarios */
  --turq-strong:#1F6F78;
  --mute:#47696A;       /* texto secundario sobre crema */
  --mute-dark:#A9C9C6;  /* texto secundario sobre verde */
  --line:rgba(14,74,75,.18);
  --line-dark:rgba(251,239,208,.18);

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gutter:clamp(16px,5vw,72px);
  --maxw:1160px;
  --r:4px;
  --radius:8px;
  --nav-h:64px;
  --section:clamp(56px,8vw,112px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
[id]{ scroll-margin-top:var(--nav-h); }

body{
  margin:0; background:var(--cream); color:var(--teal);
  font-family:var(--body); font-size:clamp(16px,1.05vw,18px); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img, video{ max-width:100%; display:block; }
a{ color:inherit; }
::selection{ background:var(--mustard); color:var(--teal); }
:focus-visible{ outline:2px solid var(--turq-strong); outline-offset:3px; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section--teal{ background:var(--teal); color:var(--cream); }
.section--teal .eyebrow, .section--teal .lead{ color:var(--mute-dark); }
.section--flush{ padding-top:0; }
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin:0 0 16px;
}
h1,h2,h3{
  font-family:var(--display); font-weight:800; letter-spacing:-.028em; line-height:.95;
  text-wrap:balance; margin:0;
}
h2{ font-size:clamp(32px,4.8vw,60px); }
h3{ font-size:clamp(22px,2.4vw,30px); line-height:1.02; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
.lead{ font-size:clamp(17px,1.4vw,20px); line-height:1.5; color:var(--mute); max-width:46ch; margin:0; }
.head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 48px; margin-bottom:clamp(28px,4vw,52px); }
.serif-it{ font-family:var(--body); font-style:italic; font-weight:400; letter-spacing:-.01em; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:var(--mustard); color:var(--teal);
  font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:-.015em;
  text-decoration:none; padding:16px 24px; border:0; border-radius:var(--r);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 10px 0 -4px rgba(249,178,59,.4); }
.cta .arrow{ transition:transform .16s; }
.cta:hover .arrow{ transform:translateX(4px); }
.cta--ghost{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(251,239,208,.6); }
.cta--ghost:hover{ box-shadow:inset 0 0 0 1px var(--cream); }
.cta--teal{ background:var(--teal); color:var(--cream); }
.cta--teal:hover{ box-shadow:0 10px 0 -4px rgba(14,74,75,.3); }
.cta--cream{ background:var(--cream); color:var(--teal); }
.cta--cream:hover{ box-shadow:0 10px 0 -4px rgba(251,239,208,.3); }
.ctas{ display:flex; flex-wrap:wrap; gap:12px; }

/* Palpito: los botones de llamado al final de cada sección laten suavemente (un anillo que se expande y un pequeño latido).
   Se detiene al pasar el cursor y no se aplica si la persona prefiere menos movimiento. */
.cta{ --pulse:249,178,59; }
.cta--teal{ --pulse:14,74,75; }
.cta--cream{ --pulse:251,239,208; }
@keyframes cta-pulse{
  0%   { transform:scale(1);    box-shadow:0 0 0 0 rgba(var(--pulse),.55); }
  14%  { transform:scale(1.035); }
  28%  { transform:scale(1); }
  42%  { transform:scale(1.025); }
  60%  { box-shadow:0 0 0 14px rgba(var(--pulse),0); }
  70%, 100% { transform:scale(1); box-shadow:0 0 0 14px rgba(var(--pulse),0); }
}
.section__cta .cta, .alone--cta .cta, .band .ctas .cta,
.price .cta:not(.cta--ghost), .single .cta, .chapter .cta{ animation:cta-pulse 2.8s ease-out infinite; }
.section__cta .cta:hover, .alone--cta .cta:hover, .band .ctas .cta:hover, .price .cta:hover, .single .cta:hover, .chapter .cta:hover,
.section__cta .cta:focus-visible, .alone--cta .cta:focus-visible, .band .ctas .cta:focus-visible,
.price .cta:focus-visible, .single .cta:focus-visible, .chapter .cta:focus-visible{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .section__cta .cta, .alone--cta .cta, .band .ctas .cta, .price .cta, .single .cta, .chapter .cta{ animation:none; }
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--nav-h);
  background:rgba(251,239,208,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{
  max-width:var(--maxw); height:100%; margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:20px;
}
.wordmark{ display:flex; flex-direction:column; text-decoration:none; color:var(--teal); line-height:1; }
.wordmark b{ font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.03em; white-space:nowrap; }
.wordmark b span{ color:var(--turq); }
.wordmark small{ font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-top:4px; }
.nav__links{ display:flex; gap:24px; margin-left:auto; }
.nav__links a{
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute); text-decoration:none; padding-block:10px;
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--teal); }
.nav__links a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--mustard); }
.nav .cta{ padding:10px 16px; font-size:14px; }
@media (max-width:720px){
  .nav .cta{ display:none; }
  .nav__links{ gap:16px; }
  .nav__links a{ font-size:11px; letter-spacing:.06em; }
}
.wordmark small{ white-space:nowrap; }
@media (max-width:420px){ .wordmark small{ display:none; } .nav__links{ gap:12px; } }

/* ── Héroe con video de fondo ─────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:end; color:var(--cream);
  padding:calc(var(--nav-h) + 40px) 0 clamp(40px,7vw,88px);
  overflow:hidden; isolation:isolate; background:var(--teal-deep);
}
.hero--short{ min-height:88svh; }
/* El video empieza debajo del menú fijo y se alinea arriba: en pantallas anchas el recorte cae abajo, bajo el texto,
   y no sobre las cabezas. */
.hero__media{ position:absolute; inset:var(--nav-h) 0 0 0; z-index:-2; }
.hero__media video, .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.hero__media .hero__clip[data-scene="logo"]{ object-position:50% 50%; }
/* El video es el protagonista: solo se oscurece la franja baja donde va el texto. */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,55,56,.35) 0%, rgba(10,55,56,0) 20%, rgba(10,55,56,0) 48%, rgba(10,55,56,.8) 80%, var(--teal-deep) 100%);
}
.hero .eyebrow{ color:var(--cream-2); text-shadow:0 1px 8px rgba(10,55,56,.7); }
.hero h1{ font-size:clamp(32px,4.4vw,62px); max-width:19ch; margin-bottom:14px; text-shadow:0 2px 18px rgba(10,55,56,.45); }
.hero h1 em{ color:var(--mustard); font-style:normal; }
.hero__lede{ font-size:clamp(16px,1.3vw,19px); line-height:1.45; max-width:44ch; color:var(--cream-2); margin-bottom:20px; text-shadow:0 1px 10px rgba(10,55,56,.6); }
.hero__note{ margin-top:20px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--cream-2); }


/* Héroe de Actualidad: el cabezote es el fondo, en bucle. Como el logo trae fondos claros (amarillo), el velo es más
   marcado que en las otras páginas para que el título se lea en todos los fotogramas. */
.hero--cabezote::after{
  background:
    radial-gradient(ellipse 78% 64% at 22% 86%, rgba(10,55,56,.86) 0%, rgba(10,55,56,.66) 42%, rgba(10,55,56,0) 80%),
    linear-gradient(180deg, rgba(10,55,56,.26) 0%, rgba(10,55,56,.14) 40%, rgba(10,55,56,.5) 72%, var(--teal-deep) 100%);
}
.hero--cabezote .hero__media video{ object-position:50% 50%; }
.hero .stage__controls{
  position:absolute; right:var(--gutter); bottom:clamp(16px,3vw,32px); z-index:2;
  display:flex; align-items:center; gap:8px;
}
.stage__sound, .stage__spotify{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:0; text-decoration:none;
  padding:10px 14px; border-radius:999px; color:var(--cream); background:rgba(10,55,56,.82);
  box-shadow:inset 0 0 0 1px rgba(251,239,208,.35); backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
}
.stage__sound[hidden]{ display:none; }
.stage__sound:hover, .stage__spotify:hover{ background:rgba(10,55,56,.95); box-shadow:inset 0 0 0 1px var(--cream); }
.stage__sound .stage__sound-on{ display:none; }
.stage__sound[aria-pressed="true"] .stage__sound-on{ display:block; }
.stage__sound[aria-pressed="true"] .stage__sound-off{ display:none; }
.stage__spotify{ color:#1ED760; padding:9px; width:40px; height:40px; }
@media (max-width:720px){ .hero .stage__controls{ bottom:auto; top:calc(var(--nav-h) + 12px); left:var(--gutter); right:var(--gutter); } }

/* Mensaje en el marco inferior del héroe (Online): "video real de un estudiante". */
.hero--credit{ padding-bottom:calc(clamp(40px,7vw,88px) + 28px); }
.hero__credit{
  position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:34px var(--gutter) 14px; text-align:center; color:#fff;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; line-height:1.4;
  background:linear-gradient(0deg, rgba(10,55,56,.8), rgba(10,55,56,0));
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* Franja de respaldo bajo el héroe */
.proof{ background:var(--mustard); color:var(--teal); }
.proof__in{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.proof__item{
  padding:22px 20px; border-right:1px solid rgba(14,74,75,.2); text-align:center;
  font-family:var(--display); font-weight:700; font-size:15px; line-height:1.3; letter-spacing:-.01em;
}
.proof__item:last-child{ border-right:0; }
.proof__item b{ display:block; font-weight:800; font-size:clamp(20px,2.2vw,28px); letter-spacing:-.025em; margin-bottom:4px; }
@media (max-width:760px){
  .proof__in{ grid-template-columns:1fr; }
  .proof__item{ border-right:0; border-bottom:1px solid rgba(14,74,75,.2); padding:14px 8px; }
  .proof__item:last-child{ border-bottom:0; }
}

/* ── Dos puertas ──────────────────────────────────────────────────────── */
.doors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,28px); }
@media (max-width:760px){ .doors{ grid-template-columns:1fr; } }
.door{
  position:relative; border-radius:var(--radius); overflow:hidden; isolation:isolate;
  color:var(--cream); display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(440px,46vw,560px); padding:clamp(22px,3vw,36px);
}
.door > img, .door > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .6s cubic-bezier(.2,.8,.3,1); }
.door:hover > img, .door:hover > video{ transform:scale(1.03); }
.door::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(10,55,56,.1) 10%, rgba(10,55,56,.94) 62%); }
.door__tag{
  align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 10px; border-radius:var(--r); margin-bottom:auto;
}
.door--presencial .door__tag{ background:var(--mustard); color:var(--teal); }
.door--online .door__tag{ background:var(--turq-strong); color:var(--cream); }
.door__q{ font-family:var(--body); font-style:italic; font-size:clamp(19px,1.7vw,24px); line-height:1.3; color:var(--cream); margin:0 0 6px; max-width:30ch; }
.door h3{ font-size:clamp(32px,3.8vw,48px); margin:12px 0 20px; }
.door .cta{ align-self:flex-start; }
.door__qs{ display:block; }
@media (min-width:761px){
  @supports (grid-template-rows: subgrid){
    .doors{ grid-template-rows:auto minmax(calc(clamp(440px,46vw,560px) - 360px),1fr) auto auto auto; }
    .door{ display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0; }
    .door__tag{ grid-row:1; margin-bottom:0; justify-self:start; }
    .door__qs{ grid-row:3; align-self:start; }
    .door h3{ grid-row:4; }
    .door .cta{ grid-row:5; justify-self:start; }
  }
}
.door--online .cta{ background:var(--cream); color:var(--teal); }

/* Listas con guion (puertas, precios) */
.dash{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:6px; font-size:16px; }
.dash li{ display:grid; grid-template-columns:18px 1fr; gap:8px; }
.dash li::before{ content:"—"; color:var(--mustard); }
.door .dash{ color:var(--cream-2); }
.door--online .dash li::before{ color:#7FD0D6; }

/* ── Estilos ──────────────────────────────────────────────────────────── */
.styles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.8vw,24px); }
@media (max-width:860px){
  .styles{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  }
  .styles::-webkit-scrollbar{ display:none; }
  .style{ scroll-snap-align:center; }
}
.style{ margin:0; }
.style figcaption{ margin-top:14px; }
.style figcaption h3{ font-size:clamp(22px,2.2vw,28px); }
.style figcaption small{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-top:6px; }
.extra{
  margin-top:clamp(24px,3vw,36px); padding:18px 20px; border:1px dashed rgba(14,74,75,.35); border-radius:var(--radius);
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline;
}
.extra b{ font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.015em; }
.extra span{ color:var(--mute); }
.extra--dark{ border-color:rgba(251,239,208,.35); }
.extra--dark span{ color:var(--mute-dark); }
/* Mensaje complementario con peso de título (p. ej. Baile Social bajo los estilos) */
.also{ margin-top:clamp(28px,4vw,48px); font-size:clamp(22px,2.6vw,34px); line-height:1.12; max-width:30ch; }
.also em{ font-style:normal; color:var(--turq-strong); }

/* Mensaje destacado: "Nunca estás solo" */
.alone{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px 22px; align-items:center;
  margin-top:clamp(24px,3vw,36px); padding:clamp(20px,2.6vw,30px); border-radius:var(--radius);
  background:var(--mustard); color:var(--teal);
}
.alone b{ font-family:var(--display); font-weight:800; font-size:clamp(22px,2.6vw,32px); letter-spacing:-.025em; line-height:1.05; }
.alone p{ margin:0; font-size:16.5px; line-height:1.45; }
@media (max-width:640px){ .alone{ grid-template-columns:1fr; } }
.alone--cta{ grid-template-columns:auto minmax(0,1fr) auto; }
@media (max-width:860px){ .alone--cta{ grid-template-columns:1fr; } .alone--cta .cta{ justify-self:start; } }

/* Marco de video (horizontal por defecto) con botón propio */
.media{ position:relative; aspect-ratio:16/9; background:var(--teal); overflow:hidden; border-radius:var(--radius); }
.media--vertical{ aspect-ratio:9/16; }
.media video, .media img{ width:100%; height:100%; object-fit:cover; }
.media__play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg, transparent 50%, rgba(10,55,56,.6));
  border:0; cursor:pointer; color:var(--teal); padding:0;
}
.media__play span{
  width:64px; aspect-ratio:1; border-radius:50%; background:var(--mustard);
  display:grid; place-items:center; transition:transform .2s cubic-bezier(.2,.8,.3,1);
}
.media__play:hover span{ transform:scale(1.08); }
.media.is-playing .media__play{ display:none; }
.media__pending{
  position:absolute; left:12px; bottom:12px; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  background:rgba(10,55,56,.78); color:var(--cream); padding:6px 9px; border-radius:var(--r);
}

/* Héroe con dos tomas en ciclo (Inicio): se funden una sobre otra. */
.hero__media .hero__clip{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.hero__media .hero__clip.is-active{ opacity:1; }
/* Toma muy luminosa (ventana al fondo): se oscurece un poco para que el texto del héroe se lea. */
.hero__media .hero__clip--bright{ filter:brightness(.66) saturate(1.05); }
.hero .wrap, .hero::after{ transition:opacity .5s ease, visibility 0s; }
/* Mientras corre la animación del logo, el texto y el degradado se retiran para dejarla sola. */
.hero.hero--logo .wrap{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility 0s .5s; }
.hero.hero--logo::after{ opacity:0; }
@media (prefers-reduced-motion: reduce){
  .hero__media .hero__clip, .hero .wrap, .hero::after{ transition:none; }
}
/* Botón de sonido del héroe: fijo abajo a la derecha, legible sobre cualquier toma. */
.hero__sound{
  position:absolute; right:var(--gutter); bottom:clamp(16px,3vw,32px); z-index:2;
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(10,55,56,.82); color:var(--cream); backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 0 0 1px rgba(251,239,208,.28);
}
.hero__sound[hidden]{ display:none; }
.hero__sound:hover{ background:rgba(10,55,56,.95); }
.hero__sound .hero__sound-on{ display:none; }
.hero__sound[aria-pressed="true"] .hero__sound-on{ display:block; }
.hero__sound[aria-pressed="true"] .hero__sound-off{ display:none; }
@media (max-width:720px){ .hero__sound{ bottom:auto; top:calc(var(--nav-h) + 12px); } }

/* ── Tarjetas verticales de video ("reels") ───────────────────────────── */
:root{ --reel-gap:clamp(12px,1.8vw,24px); }
.reels{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--reel-gap); }
.reel{ margin:0; }
.reel figcaption{ margin-top:14px; }
.reel figcaption h3{ font-size:clamp(20px,2vw,24px); }
.reel figcaption small{ display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-top:6px; }
.section--teal .reel figcaption small{ color:var(--mute-dark); }
/* Cuadrícula de 4 columnas. Variante --lead (Online, «Detrás de cámaras»): título + tira. Variante --full (El Combo): la fila de 3 videos
   ocupa todo el ancho; cada actividad lleva título + etiqueta y una caja «Conoce más» que despliega su descripción (sin columna de texto aparte). */
.combo-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--reel-gap); align-items:start; margin-bottom:clamp(24px,3vw,36px); }
.combo-grid--full .reels{ grid-column:1 / -1; }
/* Caja «Conoce más»: verde sólido sobre crema (Inicio) y verde más claro sobre fondo verde (Presencial y Online). Mismo patrón +/− que «Mitos». */
.combo-grid--full .more{ margin-top:14px; background:var(--teal); color:var(--cream); border-radius:var(--radius); }
.section--teal .combo-grid--full .more{ background:rgba(251,239,208,.08); }
.combo-grid--full .more summary{
  list-style:none; cursor:pointer; min-height:44px; padding:10px 16px; border-radius:var(--radius);
  display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:12px; align-items:center;
  font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em;
}
.combo-grid--full .more summary::-webkit-details-marker{ display:none; }
.combo-grid--full .more summary::after{ content:"+"; font-family:var(--mono); color:var(--mustard); font-size:22px; text-align:right; }
.combo-grid--full .more[open] summary::after{ content:"−"; }
.combo-grid--full .more summary:hover{ color:var(--mustard); }
.combo-grid--full .more summary:focus-visible{ outline:2px solid var(--mustard); outline-offset:-4px; }
.combo-grid--full .more p{ margin:0; padding:0 16px 12px; font-size:15.5px; line-height:1.5; }
.combo-grid--full .more p:last-child{ padding-bottom:16px; }
/* Letra pequeña de la Feria de Cali: va dentro de la caja, tras la descripción. Crema atenuada: contraste ≥ 5,9:1 sobre el verde claro. */
.combo-grid--full .more p.fineprint{ font-size:12.5px; line-height:1.5; color:rgba(251,239,208,.85); }
.combo-grid--lead{ margin-bottom:0; }
.combo-grid--lead .bts-head .lead{ margin-top:14px; }
.combo-grid--lead .bts-head h2{ font-size:clamp(30px,3.2vw,44px); }
@media (max-width:860px){
  .combo-grid{ display:block; }
  .combo-grid--lead .bts-head{ margin-bottom:24px; }
  .combo-grid .reels{ margin-bottom:24px; }
  .reels{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:68%;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  }
  .reels::-webkit-scrollbar{ display:none; }
  .reel{ scroll-snap-align:center; }
}

/* Botón de llamado al final de cada sección */
.section__cta{ margin-top:clamp(24px,3vw,40px); }
/* Lista con viñetas de mostaza (beneficios) */
.bullets{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px; font-size:clamp(16px,1.2vw,18px); line-height:1.45; }
.bullets li{ position:relative; padding-left:24px; }
.bullets li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--mustard); }
.bullets b{ font-family:var(--display); font-weight:800; letter-spacing:-.01em; }

/* Bloque de texto + video vertical (Presencial: "Sales de la oficina a las 6") */
.social-feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:clamp(24px,5vw,72px); align-items:center; }
.social-feature__text .lead{ margin-top:18px; }
.social-feature__video{ width:100%; justify-self:end; }
@media (max-width:760px){ .social-feature{ grid-template-columns:1fr; } .social-feature__video{ max-width:300px; justify-self:start; } }

/* ── El Combo ─────────────────────────────────────────────────────────── */
.combo{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
@media (max-width:860px){ .combo{ grid-template-columns:1fr; } }

/* ── Pasos (la semana del estudiante) ─────────────────────────────────── */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.8vw,24px); counter-reset:step; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.steps li{ counter-increment:step; background:var(--cream-2); border-radius:var(--radius); padding:22px 20px; }
.steps li::before{
  content:counter(step, decimal-leading-zero); display:block; font-family:var(--mono); font-size:12px;
  letter-spacing:.1em; color:var(--turq-strong); margin-bottom:12px;
}
.steps h3{ font-size:20px; margin-bottom:10px; }
.steps p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--mute); }
.steps ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:15.5px; line-height:1.4; color:var(--mute); }
.steps ul li{ background:none; padding:0 0 0 16px; border-radius:0; position:relative; counter-increment:none; }
.steps ul li::before{ content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--mustard); margin:0; }
.steps p + ul, .steps ul + p{ margin-top:8px; }
.section--teal .steps ul{ color:var(--mute-dark); }
.section--teal .steps ul li, .steps ul li{ background:none; padding:0 0 0 16px; border-radius:0; }
.section--teal .steps li{ background:rgba(251,239,208,.07); }
.section--teal .steps li::before{ color:var(--mustard); }
.section--teal .steps p{ color:var(--mute-dark); }

/* ── Para quién (tarjetas cortas) ─────────────────────────────────────── */
.fits{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.8vw,20px); }
@media (max-width:900px){ .fits{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fits{ grid-template-columns:1fr; } }
.fit{ border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.fit b{ display:block; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.015em; margin-bottom:8px; }
.fit p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--mute); }

/* ── Precios ──────────────────────────────────────────────────────────── */
.prices{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,28px); }
@media (max-width:760px){ .prices{ grid-template-columns:1fr; } }
.price{ background:var(--teal); color:var(--cream); border-radius:var(--radius); padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; gap:14px; }
.price--single{ max-width:640px; }
.price__unit{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-dark); }
.price__amount{ font-family:var(--display); font-weight:800; font-size:clamp(36px,4vw,52px); letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums; }
.price__amount small{ font-size:.4em; letter-spacing:0; }
.price .dash{ margin:0; color:var(--cream-2); }
.price .cta{ align-self:flex-start; margin-top:auto; }
.price__aside{ margin:0; font-family:var(--body); font-style:italic; color:var(--cream-2); }
/* Tarjeta horizontal: clase suelta */
.single{
  margin-top:clamp(14px,2vw,28px); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px 32px; align-items:center;
  border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,36px);
}
.single .price__amount{ font-size:clamp(30px,3vw,40px); color:var(--teal); }
.single .price__unit{ color:var(--mute); display:block; margin-bottom:6px; }
.single p{ margin:0; color:var(--mute); }
.single b{ color:var(--teal); }
@media (max-width:860px){ .single{ grid-template-columns:1fr; } .single .cta{ justify-self:start; } }
.single .single__note{ grid-column:1 / -1; font-size:13.5px; line-height:1.45; padding-top:14px; border-top:1px solid var(--line); }

/* ── Testimonios / reseñas ────────────────────────────────────────────── */
.google{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 40px; align-items:center;
  border-radius:var(--radius); padding:clamp(24px,4vw,44px); color:var(--cream);
  background:radial-gradient(120% 140% at 0% 0%, rgba(47,143,155,.45), transparent 60%), var(--teal);
}
@media (max-width:760px){ .google{ grid-template-columns:1fr; } }
.google__mark{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-dark); margin-bottom:14px; }
.google__stars{ color:var(--mustard); letter-spacing:.12em; font-size:18px; }
.google h2{ font-size:clamp(28px,3.6vw,46px); margin-bottom:12px; }
.google p{ color:var(--mute-dark); margin:0; max-width:46ch; }

/* Reseñas de Google en vivo (se agregan debajo del bloque cuando /api/reviews responde) */
.google__reviews{
  grid-column:1 / -1; display:grid; grid-auto-flow:column; grid-auto-columns:min(340px,82%); gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:6px; margin-top:6px;
}
.greview{
  scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; padding:20px;
  background:rgba(251,239,208,.08); border:1px solid var(--line-dark); border-radius:var(--radius);
}
.greview__head{ display:flex; align-items:center; gap:12px; }
.greview__head img{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; }
.greview__who{ display:flex; flex-direction:column; min-width:0; }
.greview__name{ font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--cream); text-decoration:none; overflow-wrap:anywhere; }
a.greview__name:hover{ text-decoration:underline; }
.greview__who small{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mute-dark); }
.greview__stars{ color:var(--mustard); letter-spacing:.1em; font-size:15px; }
.greview__text{
  margin:0; font-size:15.5px; line-height:1.5; color:var(--cream-2);
  display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden;
}
.greview__note{ font-family:var(--mono); font-size:11px; color:var(--mute-dark); }
.greview__more{ margin-top:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mustard); }
.google .google__note{ grid-column:1 / -1; margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--mute-dark); max-width:none; }
.google__note a{ color:inherit; }

/* ── Objeciones (preguntas) ───────────────────────────────────────────── */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 0;
  display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:16px; align-items:center;
  font-family:var(--display); font-weight:700; font-size:clamp(18px,1.7vw,22px); letter-spacing:-.018em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--turq-strong); font-size:20px; text-align:right; }
.faq details[open] summary::after{ content:"−"; }
.faq p{ margin:0; padding:0 0 22px; max-width:64ch; color:var(--mute); }
/* "Mitos que vamos a desmentir": sección turquesa para que no se mezcle con el pie de página y invite a abrirla. */
.section--myths{ background:var(--turq-strong); color:var(--cream); }
.section--myths h2{ color:var(--cream); }
.section--myths .eyebrow{ color:var(--cream); opacity:1; }
.section--myths .faq{ border-top-color:rgba(251,239,208,.35); }
.section--myths .faq details{ border-bottom-color:rgba(251,239,208,.35); }
.section--myths .faq summary{ transition:color .15s; }
.section--myths .faq summary:hover{ color:var(--mustard); }
.section--myths .faq summary::after{ color:var(--mustard); font-size:26px; }
.section--myths .faq p{ color:var(--cream); }

/* ── Banda final de llamado ───────────────────────────────────────────── */
.band{ background:var(--mustard); color:var(--teal); padding-block:clamp(48px,7vw,88px); text-align:center; }
.band h2{ max-width:18ch; margin:0 auto 16px; }
.band p{ max-width:46ch; margin:0 auto 26px; }
.band .ctas{ justify-content:center; }

/* Banda amarilla con "Cómo llegar" dentro (Presencial) */
.band__place{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,240px); gap:clamp(20px,4vw,48px); align-items:center; text-align:left;
  max-width:760px; margin:clamp(32px,5vw,56px) auto 0; padding-top:clamp(28px,4vw,44px); border-top:1px solid rgba(14,74,75,.28);
}
.band .band__where .eyebrow{ color:var(--teal); margin:0 0 12px; max-width:none; }
.band__where address{ font-style:normal; font-family:var(--display); font-weight:800; font-size:clamp(24px,2.8vw,34px); letter-spacing:-.025em; line-height:1.05; }
.band__where address small{ display:block; font-family:var(--body); font-weight:400; font-size:17px; letter-spacing:0; margin-top:10px; }
.band .place__hint{ color:var(--teal); margin:16px 0 20px; max-width:38ch; }
.band .place__video{ justify-self:end; max-width:240px; }
.band .reel figcaption small{ color:var(--teal); }
@media (max-width:760px){
  .band__place{ grid-template-columns:1fr; }
  .band .place__video{ justify-self:start; max-width:260px; }
}

/* ── Ubicación ────────────────────────────────────────────────────────── */
.place{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 40px; align-items:end; }
@media (max-width:760px){ .place{ grid-template-columns:1fr; } }
.place address{ font-style:normal; font-family:var(--display); font-weight:800; font-size:clamp(26px,3.2vw,40px); letter-spacing:-.025em; line-height:1.05; }
.place address small{ display:block; font-family:var(--body); font-weight:400; font-size:17px; letter-spacing:0; color:var(--mute); margin-top:10px; }

.place--video{ grid-template-columns:minmax(0,1fr) minmax(0,260px); align-items:center; }
.place__text .eyebrow{ margin-bottom:14px; }
.place__hint{ margin:18px 0 20px; color:var(--mute); max-width:44ch; }
.place__video{ width:100%; justify-self:end; }
@media (max-width:760px){ .place--video{ grid-template-columns:1fr; } .place__video{ max-width:280px; justify-self:start; } }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.footer{ padding-block:clamp(40px,5vw,64px) clamp(28px,3vw,40px); border-top:1px solid var(--line); }
.footer__grid{ display:grid; grid-template-columns:1.3fr repeat(3,minmax(0,1fr)); gap:28px 40px; }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1 / -1; } }
.footer h4{ font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin:0 0 12px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:15px; }
.footer a{ text-decoration:none; }
.footer ul a:hover{ color:var(--turq-strong); }
.footer__brand p{ color:var(--mute); margin:12px 0 0; max-width:32ch; font-size:15px; }
.colophon{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  margin-top:clamp(28px,4vw,44px); padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; color:var(--mute);
}
.colophon a:hover{ color:var(--teal); }

/* ── Actualidad ───────────────────────────────────────────────────────── */
.weekly{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(14px,2vw,28px); align-items:stretch; }
@media (max-width:860px){ .weekly{ grid-template-columns:1fr; } }
.song{
  border-radius:var(--radius); padding:clamp(24px,3vw,36px); background:var(--mustard); color:var(--teal);
  display:flex; flex-direction:column; gap:14px;
}
.song__label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.song__title{ font-family:var(--display); font-weight:800; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.03em; line-height:1; }
.song__artist{ margin:-4px 0 0; font-family:var(--display); font-weight:700; font-size:clamp(16px,1.5vw,19px); letter-spacing:-.01em; }
.song__meta{ display:flex; flex-wrap:wrap; gap:8px; }
.song__meta span{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; border:1px solid rgba(14,74,75,.35); border-radius:999px; padding:6px 11px; }
.song .cta{ align-self:flex-start; margin-top:auto; }
.song__player{ display:block; width:100%; height:152px; border:0; border-radius:12px; margin-top:4px; }
.embed{ border-radius:var(--radius); overflow:hidden; background:var(--teal); min-height:352px; display:flex; }
.embed iframe{ display:block; flex:1; width:100%; min-height:352px; border:0; }
.cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.8vw,20px); }
@media (max-width:860px){ .cards{ grid-template-columns:1fr; } }
.card{ border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:10px; }
.card b{ font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.015em; }
.card p{ margin:0; color:var(--mute); font-size:15.5px; line-height:1.5; }
.card .tag{ align-self:flex-start; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:var(--cream-2); padding:5px 9px; border-radius:var(--r); }
.card--link{ text-decoration:none; transition:border-color .2s; }
.card--link:hover{ border-color:var(--turq-strong); }
.story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
@media (max-width:860px){ .story{ grid-template-columns:1fr; } }
.story img{ width:100%; border-radius:var(--radius); aspect-ratio:4/3; object-fit:cover; }
.story p{ color:var(--mute-dark); }
.updated{ display:block; margin-top:6px; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--mute); }
.card__meta{ margin-top:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--turq-strong); }
.card__img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 20%; border-radius:var(--r); }

/* Historia en capítulos */
.chapters{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,2vw,24px); align-items:stretch; }
.chapters .chapter--artist{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(20px,3vw,40px); align-items:center; }
.chapters .chapter--artist img{ aspect-ratio:4/3; align-self:center; }
.chapter__body{ display:flex; flex-direction:column; gap:14px; }
.chapter__body .tracks{ margin-bottom:14px; }
.tracks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:900px){ .chapters{ grid-template-columns:1fr; } .chapters .chapter--artist{ grid-template-columns:1fr; } .tracks{ grid-template-columns:1fr; } }
.chapter{ display:flex; flex-direction:column; gap:14px; background:rgba(251,239,208,.07); border:1px solid var(--line-dark); border-radius:var(--radius); padding:clamp(20px,2.4vw,28px); }
.chapter__n{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mustard); }
.chapter h3{ font-size:clamp(24px,2.4vw,32px); }
.chapter p{ margin:0; color:var(--mute-dark); }
.chapter img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }
.chapter .cta{ align-self:flex-start; margin-top:auto; }
.track{ margin:0; display:grid; gap:6px; }
.track figcaption{ display:flex; flex-direction:column; gap:2px; }
.track figcaption b{ font-family:var(--display); font-weight:700; font-size:16px; color:var(--cream); }
.track figcaption small{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--mute-dark); }
.track audio{ width:100%; height:40px; }
.track iframe{ display:block; width:100%; height:152px; border:0; border-radius:12px; }
.pending{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--turq-strong); }
.section--teal .pending{ color:var(--mustard); }

/* ── Documento legal (política de privacidad) ────────────────────────── */
.legal-page{ padding:calc(var(--nav-h) + clamp(32px,6vw,72px)) 0 var(--section); }
.legal__head{ max-width:var(--maxw); margin-bottom:clamp(28px,4vw,48px); }
.legal__head h1{ font-size:clamp(30px,4.6vw,56px); max-width:22ch; line-height:1; }
.legal__meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin:18px 0 0; }
.legal{ max-width:72ch; }
.legal section{ padding-top:clamp(20px,3vw,32px); margin-top:clamp(20px,3vw,32px); border-top:1px solid var(--line); }
.legal h2{ font-size:clamp(21px,2.2vw,27px); line-height:1.1; margin-bottom:14px; }
.legal p{ margin:0 0 1em; }
.legal a{ color:var(--turq-strong); text-underline-offset:3px; }
.legal ul{ list-style:none; margin:0 0 1.2em; padding:0; display:grid; gap:8px; }
.legal li{ display:grid; grid-template-columns:18px 1fr; gap:8px; }
.legal li::before{ content:"—"; color:var(--mustard); font-weight:700; }
.legal__id{ margin:0 0 1.2em; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.legal__id div{ display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:16px; padding:11px 16px; border-top:1px solid var(--line); }
.legal__id div:first-child{ border-top:0; }
.legal__id dt{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); padding-top:3px; }
.legal__id dd{ margin:0; overflow-wrap:anywhere; }
@media (max-width:560px){ .legal__id div{ grid-template-columns:1fr; gap:2px; } }
.legal__sign{ margin-top:clamp(28px,4vw,44px); padding-top:20px; border-top:1px solid var(--line); font-family:var(--display); font-weight:700; line-height:1.5; }
.legal__todo{ background:var(--mustard); color:var(--teal); padding:1px 6px; border-radius:var(--r); }

/* ── Botón fijo inferior en celular ───────────────────────────────────── */
.dock{
  position:fixed; inset:auto 0 0 0; z-index:60; display:none;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(251,239,208,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.dock .cta{ width:100%; }
.dock.is-visible{ transform:none; }
@media (max-width:720px){
  .dock{ display:block; }
  body.has-dock{ padding-bottom:84px; }
}