/* =========================================================================
   LA BASE WORKOUT — hoja única
   Base: plantilla propia «impacto» (web-negocio-local), rehecha para La Base.
   Marca: blanco y negro del logo; el rojo, muestreado de sus bancos y del
   rótulo de la fachada. Letra: Oswald, la familia condensada del logo.
   ========================================================================= */

@import url('fuentes.css');

:root{
  --paper:      #F3F2EF;
  --ink:        #121212;
  --accent:     #C81E2B;   /* rojo de sus bancos y del rótulo, muestreado */
  --accent-ink: #FFFFFF;   /* si el acento es CLARO (turquesa, amarillo…): texto oscuro aquí */
  --accent-text:#B01A26;   /* acento para TEXTO sobre fondo claro (precios, hitos). Con acento claro, un tono profundo */
  --accent-hover: color-mix(in srgb, var(--accent) 85%, #000);
  --dark:       #161616;
  --darker:     #0B0B0B;
  --black:      #0E0E0E;

  --muted:    color-mix(in srgb, var(--ink) 64%, transparent);
  --hairline: color-mix(in srgb, var(--ink) 16%, transparent);
  --on-dark-muted:    color-mix(in srgb, var(--paper) 62%, transparent);
  --on-dark-hairline: color-mix(in srgb, var(--paper) 14%, transparent);

  /* clases: una por día */
  --c-leg:  #C81E2B;
  --c-lbw:  #ECEAE5;
  --c-core: #8D9AA7;
  --c-hiit: #E39B2D;

  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1280px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);
  --radius: 8px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 16px); overflow-x:clip; }
@media (max-width:960px){ :root{ --nav-h: 64px; } }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
/* lo que asoma al estirar la página (rebote de iOS) arriba o abajo: oscuro,
   como la portada y el pie, en vez de un hueco blanco */
html{ background:var(--darker); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:clamp(1rem, .96rem + .2vw, 1.0625rem); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;                    /* clip, no hidden: hidden rompe position:sticky */
}
img{ max-width:100%; height:auto; display:block; }   /* height:auto evita que width/height del HTML aplasten la foto */
a{ color:inherit; }
figure{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.saltar{ position:absolute; left:1rem; top:-4rem; z-index:100; background:var(--accent); color:#fff; padding:.6rem 1rem; }
.saltar:focus{ top:1rem; }

.envoltorio{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* ----------------------------------------------------------- tipografía */
.display{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  line-height:.92; letter-spacing:-.005em; margin:0;
  font-size:clamp(2.75rem, 6.6vw, 5.75rem);
}
.display--xl{ font-size:clamp(4.5rem, 15vw, 13rem); line-height:.84; }
.display--m { font-size:clamp(2.25rem, 5vw, 4rem); }

/* cabecera de sección: título a la izquierda, texto a la derecha en escritorio */
.cabecera{ display:grid; gap:1.25rem 4rem; align-items:end; margin-bottom:clamp(2.25rem, 5vw, 4rem); }
.cabecera__texto{ margin:0; max-width:44ch; color:var(--muted); font-size:1.075rem; }
@media (min-width:900px){ .cabecera{ grid-template-columns: 1fr minmax(0, 30rem); } .cabecera__texto{ padding-bottom:.5rem; } }

/* --------------------------------------------------------------- botones */
.botones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-display); font-size:1.3rem; letter-spacing:.05em; line-height:1;
  background:var(--accent); color:var(--accent-ink);
  padding:1rem 1.75rem .9rem; border-radius:999px; text-decoration:none;
  transition: background .2s, color .2s, transform .2s var(--ease);
}
.boton:hover{ background:var(--accent-hover); }
.boton svg{ transition:transform .2s var(--ease); margin-top:-.1rem; }
.boton:hover svg{ transform:translateX(4px); }
.boton--linea{ background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor; }
.boton--linea:hover{ background:transparent; box-shadow:inset 0 0 0 2px var(--accent); color:var(--accent); }
.boton--blanco{ background:#fff; color:var(--accent); }
.boton--blanco:hover{ background:var(--ink); color:#fff; }

/* ------------------------------------------------------------------- nav */
/* A lo ancho. Transparente sobre el vídeo (logo blanco) y clara en cuanto se
   sale de la portada (logo original negro y rojo). La clase .is-solida la pone
   main.js; sin JS se queda clara, que se lee en cualquier fondo. */
.nav{
  position:fixed; z-index:60; top:0; left:0; right:0; height:var(--nav-h);
  display:flex; align-items:center; gap:clamp(1rem, 2.5vw, 2.5rem);
  padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  color:var(--ink); background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 1px 0 var(--hairline), 0 10px 30px rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), background .35s, box-shadow .35s, color .35s;
}
.js-listo .nav:not(.is-solida){ background:transparent; box-shadow:none; color:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
.nav.is-oculta{ transform: translateY(-100%); }
/* arriba del todo la nav va pegada a la portada (absolute) y no fija: al tirar
   hacia abajo con el rebote de iOS, logo, menú y vídeo bajan como un bloque.
   En y=0 absolute y fixed pintan en el mismo sitio, así que el cambio no se ve */
.nav.en-cima{ position:absolute; }
.nav__marca{ display:block; position:relative; flex:none; }
.nav__marca img{ height:46px; width:auto; transition:opacity .35s; }
.nav__marca .logo-claro{ position:absolute; left:0; top:0; opacity:0; }
.js-listo .nav:not(.is-solida) .logo-claro{ opacity:1; }
.js-listo .nav:not(.is-solida) .logo-oscuro{ opacity:0; }
.nav__enlaces{ display:flex; gap:clamp(1.1rem, 2.2vw, 2.25rem); list-style:none; margin:0 0 0 auto; padding:0; }
.nav__enlaces a{
  position:relative; font-family:var(--font-display); font-size:1.2rem; letter-spacing:.06em; text-decoration:none;
  opacity:.78; transition:opacity .2s;
}
.nav__enlaces a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent); transform:scaleX(0); transition:transform .25s var(--ease); }
.nav__enlaces a:hover{ opacity:1; }
.nav__enlaces a:hover::after{ transform:scaleX(1); }
.nav__cta{
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:.06em; line-height:1;
  background:var(--accent); color:#fff; text-decoration:none;
  padding:.8rem 1.35rem .7rem; border-radius:999px; white-space:nowrap;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: background .2s, transform .2s var(--ease);
}
.nav__cta:hover{ background:var(--accent-hover); transform:translateY(-1px); }
.nav__boton{ display:none; background:none; border:0; padding:.5rem; margin-right:-.5rem; cursor:pointer; color:inherit; }
.nav__boton span{ display:block; width:24px; height:2px; background:currentColor; margin:5px 0; transition:transform .3s var(--ease), opacity .3s; }
.nav.is-abierta .nav__boton span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-abierta .nav__boton span:nth-child(2){ opacity:0; }
.nav.is-abierta .nav__boton span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width: 960px){
  .nav{ gap:.9rem; }
  .nav__marca img{ height:40px; }
  .nav__boton{ display:block; position:relative; z-index:2; margin-left:auto; }
  .nav__enlaces{
    position:fixed; inset:0; z-index:1; margin:0;
    flex-direction:column; justify-content:center; align-items:flex-start; gap:.35rem;
    padding: 0 var(--gut); background:var(--paper); color:var(--ink);
    opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  }
  .nav.is-abierta .nav__enlaces{ opacity:1; visibility:visible; }
  .nav__enlaces a{ font-size:clamp(2.5rem, 11vw, 3.5rem); opacity:1; }
  .nav.is-abierta .nav__boton{ color:var(--ink); }
  /* con el menú abierto la nav no puede llevar transform ni filtro: los dos
     convierten a la nav en bloque contenedor del panel fijo y lo encierran */
  .nav.is-abierta{ transform:none !important; transition:none; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative; min-height:100svh; background:var(--darker); color:#fff;
  display:flex; align-items:flex-end; overflow:hidden;
  padding: calc(var(--nav-h) + 4rem) 0 clamp(3rem, 7vw, 5.5rem);
}
.hero__fondo{ position:absolute; inset:0; }
.hero__fondo img, .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__video{ opacity:0; transition:opacity 1s var(--ease); }
.hero__video.is-lista{ opacity:1; }
/* velo: sin él el texto blanco no se lee sobre las zonas claras del vídeo */
.hero__fondo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(11,11,11,.92) 0%, rgba(11,11,11,.55) 38%, rgba(11,11,11,.15) 70%, rgba(11,11,11,.45) 100%),
    linear-gradient(90deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,0) 60%);
}
.hero__contenido{ position:relative; z-index:1; }
.antetitulo{
  display:flex; align-items:center; gap:.9rem; margin:0 0 1.25rem;
  font-weight:600; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.antetitulo::before{ content:""; width:2.25rem; height:2px; background:var(--accent); flex:none; }
@media (max-width:540px){ .antetitulo{ font-size:.72rem; letter-spacing:.14em; } .antetitulo::before{ width:1.5rem; } }
.hero__texto{ margin:1.5rem 0 0; max-width:34ch; font-size:clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height:1.45; color:rgba(255,255,255,.88); }
.hero .boton--linea{ color:#fff; }
.estrellas{ color:#F2B01E; letter-spacing:.12em; font-size:.95em; }

/* -------------------------------------------------------------- secciones */
.sec{ padding-block:var(--section-y); }
.sec--oscura{ background:var(--dark); color:var(--paper); }
.sec--oscura .cabecera__texto, .sec--oscura .nota{ color:var(--on-dark-muted); }

/* ---------------------------------------------------------------- clases */
.clases-rejilla{ display:grid; gap:clamp(2rem, 3vw, 2.75rem) clamp(1rem, 2vw, 1.75rem); grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){ .clases-rejilla{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:540px){ .clases-rejilla{ grid-template-columns:1fr; } }
.clase img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
@media (max-width:540px){ .clase img{ aspect-ratio:4/3; } }
.clase h3{
  display:flex; align-items:center; gap:.7rem; margin:1.1rem 0 .35rem;
  font-family:var(--font-display); font-weight:400; font-size:2rem; letter-spacing:.02em; line-height:1; text-transform:uppercase;
}
.clase h3::before{ content:""; width:.8rem; height:.8rem; background:var(--c); flex:none; margin-top:-.2rem; }
.clase p{ margin:0; color:var(--muted); max-width:38ch; }

/* --------------------------------------------------------------- horario */
/* escritorio: rejilla semanal */
.semana{ display:grid; gap:4px; }
.semana__fila{ display:grid; grid-template-columns: 4.5rem repeat(6, 1fr); gap:4px; }
@media (max-width:1000px){ .semana__fila{ grid-template-columns: 3.5rem repeat(6, 1fr); } .bloque{ padding:.4rem .5rem; } .bloque b{ font-size:1rem; } .semana__cab span{ font-size:1.1rem; } }
.semana__cab span{
  font-family:var(--font-display); font-size:1.35rem; letter-spacing:.06em; text-align:center;
  padding-bottom:.6rem; color:var(--on-dark-muted);
}
.semana__cab span.is-hoy{ color:#fff; box-shadow: inset 0 -2px 0 var(--accent); }
.semana time{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.02em; align-self:center; }
.semana__fila > span{ min-height:3.25rem; background: color-mix(in srgb, var(--paper) 3%, transparent); }
.semana__cab > span{ min-height:0; background:none; }
.semana__corte{
  margin:1rem 0 .4rem; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-dark-muted); display:flex; align-items:center; gap:1rem;
}
.semana__corte::after{ content:""; flex:1; height:1px; background:var(--on-dark-hairline); }
/* jerarquía: el WOD es la base (neutro con filete rojo), el Open box es
   espacio libre (solo filete) y las clases especiales van en su color */
.bloque{
  display:flex; align-items:center; height:100%;
  padding:.45rem .8rem; border-left:4px solid var(--c);
  background: color-mix(in srgb, var(--paper) 8%, transparent); color:var(--paper);
}
.bloque b{ font-family:var(--font-display); font-weight:400; font-size:1.2rem; letter-spacing:.05em; line-height:1.05; }
.bloque--libre{ background:transparent; color:var(--on-dark-muted); box-shadow: inset 0 0 0 1px var(--on-dark-hairline); }
.bloque--especial{ background:var(--c); color:var(--ink); }

/* móvil: un día cada vez, con barra de días fija */
.horario-movil{ display:none; }
@media (max-width:760px){
  .semana{ display:none; }
  .horario-movil{ display:block; }
}
.tabs{
  position:sticky; top:0; z-index:40;
  /* Bajo la nav visible se desplaza con transform (lo pone main.js en --desp): animar
     `top` de un sticky obliga a recalcular la página en cada fotograma y en iOS frena
     la inercia del desplazamiento al llegar a la sección. */
  transform: translateY(var(--desp, 0px));
  display:grid; grid-template-columns:repeat(6, 1fr); gap:4px;
  background:var(--dark); padding:.6rem 0;
}
.animando .tabs{ transition: transform .35s var(--ease); }  /* solo al esconderse/aparecer la nav */
.tabs-centinela{ height:0; }   /* sin nav encima, los días suben al borde: no se ve pasar nada por detrás */
.tabs button{
  font-family:var(--font-display); font-size:1.4rem; letter-spacing:.04em; line-height:1;
  background: color-mix(in srgb, var(--paper) 6%, transparent); color:var(--paper);
  border:0; padding:.7rem 0 .6rem; border-radius:var(--radius); cursor:pointer;
  transition: background .2s, color .2s;
}
.tabs button.is-activa{ background:var(--accent); color:var(--accent-ink); }
.js-listo .panel{ display:none; }
.js-listo .panel.is-activo{ display:block; }
.dia{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:4px; }
.dia li{ display:grid; grid-template-columns:4.25rem 1fr; gap:4px; min-height:3.4rem; }
.dia time{ font-family:var(--font-display); font-size:1.5rem; align-self:center; }
.dia .corte{ display:block; min-height:0; margin:.9rem 0 .3rem; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-muted); }

/* horario sin grilla semanal: cuando solo hay un horario público confirmado se lista tal cual,
   sin inventar días ni horas. Filas que crecen con el texto (nada de alturas fijas). */
.horario-lista{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.horario-item{
  display:grid; gap:.4rem 2rem; align-items:center;
  padding:1.25rem 1.25rem 1.25rem 1.5rem; border-left:4px solid var(--c);
  background: color-mix(in srgb, var(--paper) 8%, transparent); color:var(--paper);
}
.horario-item h3{ margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height:1; letter-spacing:.02em; text-transform:uppercase; }
.horario-item__cuando{ margin:0; font-size:1.1rem; color:var(--on-dark-muted); }
.horario-item__cuando strong{ color:#fff; font-weight:600; }
@media (min-width:900px){ .horario-item{ grid-template-columns: 1.2fr 1fr; } }

.horario-pie{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:1rem 2.5rem; align-items:center; justify-content:space-between; }
.leyenda{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; font-size:.9rem; }
.leyenda i{ display:inline-block; width:.8rem; height:.8rem; background:var(--c); margin-right:.5rem; vertical-align:-.05rem; }
.nota{ margin:0; font-size:.88rem; color:var(--muted); max-width:52ch; }

/* --------------------------------------------------------------- tarifas */
.planes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5, 1fr);
  border-top:2px solid var(--ink);
}
.plan{ padding:1.5rem 1.25rem 1.75rem; border-right:1px solid var(--hairline); }
.plan:first-child{ padding-left:0; }
.plan:last-child{ border-right:0; }
.plan h3{ margin:0; font-family:var(--font-display); font-weight:400; font-size:1.75rem; letter-spacing:.03em; line-height:1; text-transform:uppercase; }
.plan__clases{ margin:.35rem 0 0; color:var(--muted); font-size:.95rem; }
.plan__precio{ margin:1.75rem 0 0; font-family:var(--font-display); font-size:clamp(3rem, 5vw, 4.25rem); line-height:.9; color:var(--accent-text); }
.plan__precio small{ font-family:var(--font-body); font-size:.95rem; font-weight:500; color:var(--muted); margin-left:.2rem; }
.plan__trimestre{ margin:.6rem 0 0; font-size:.88rem; color:var(--muted); }
@media (max-width:980px){
  .planes{ grid-template-columns:1fr; }
  .plan{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:0 1rem; padding:1.1rem 0; border-right:0; border-bottom:1px solid var(--hairline); }
  .plan__precio{ grid-column:2; grid-row:1 / span 2; margin:0; text-align:right; font-size:2.75rem; }
  .plan__trimestre{ grid-column:1 / -1; margin-top:.25rem; }
}
.bono{ margin:1.25rem 0 0; color:var(--muted); }
.bono strong{ color:var(--ink); font-weight:600; }
.prueba{
  margin-top:clamp(2.5rem, 5vw, 3.5rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem 2rem;
  padding:clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  background:var(--ink); color:var(--paper); border-radius:var(--radius);
}
.prueba p{ margin:0; font-size:1.1rem; max-width:46ch; color:var(--on-dark-muted); }
.prueba strong{ color:#fff; font-weight:600; }

/* ------------------------------------------------------------- comunidad */
.retratos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(.5rem, 1vw, .75rem); }
.retratos img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); }
@media (max-width:760px){ .retratos{ grid-template-columns:repeat(2, 1fr); } }

.opiniones{ margin-top:clamp(3.5rem, 8vw, 6rem); display:grid; gap:2.5rem clamp(2rem, 5vw, 5rem); }
@media (min-width:980px){ .opiniones{ grid-template-columns: 1.25fr 1fr; } .opiniones__nota{ grid-column:1 / -1; } }
.opiniones__nota{ margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1rem; color:var(--on-dark-muted); }
.opiniones__nota strong{ font-family:var(--font-display); font-weight:400; font-size:3.25rem; line-height:1; color:#fff; }
.opinion blockquote{ margin:0; }
.opinion figcaption{ margin-top:.75rem; font-size:.85rem; color:var(--on-dark-muted); }
.opinion--grande blockquote{ font-size:clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height:1.4; font-weight:500; color:#fff; text-wrap:pretty; }
.opinion--grande{ border-left:3px solid var(--accent); padding-left:clamp(1.25rem, 2.5vw, 2rem); }
.opiniones__resto{ display:grid; gap:1.75rem; align-content:start; }
.opiniones__resto .opinion{ padding-top:1.5rem; border-top:1px solid var(--on-dark-hairline); }
.opiniones__resto .opinion:first-child{ padding-top:0; border-top:0; }
.opiniones__resto blockquote{ font-size:1.05rem; color:var(--paper); }

/* --------------------------------------------------------------- el box */
/* colocación explícita (sin huecos): 5 fotos llenan 4 × 2 */
.mosaico{
  display:grid; gap:clamp(.5rem, 1vw, .75rem);
  grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(2, clamp(200px, 22vw, 300px));
}
.mosaico figure{ overflow:hidden; border-radius:var(--radius); }
.mosaico img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.mosaico figure:hover img{ transform:scale(1.03); }
.mosaico figure:nth-child(1){ grid-area:1 / 1 / 2 / 3; }
.mosaico figure:nth-child(2){ grid-area:1 / 3 / 3 / 4; }
.mosaico figure:nth-child(3){ grid-area:2 / 1 / 3 / 2; }
.mosaico figure:nth-child(4){ grid-area:1 / 4 / 3 / 5; }
.mosaico figure:nth-child(5){ grid-area:2 / 2 / 3 / 3; }
@media (max-width:760px){
  .mosaico{ grid-template-columns:repeat(2, 1fr); grid-template-rows:none; grid-auto-rows:46vw; }
  .mosaico figure:nth-child(n){ grid-area:auto; }
  .mosaico figure:nth-child(1){ grid-column:1 / -1; }   /* 1 ancha + 4 en 2×2: sin huecos */
}

/* -------------------------------------------------------------- contacto */
.contacto{ display:grid; gap:clamp(2.5rem, 5vw, 5rem); grid-template-columns:1fr 1fr; align-items:center; }
@media (max-width:900px){ .contacto{ grid-template-columns:1fr; } }
.ficha{ margin:2.25rem 0 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.75rem 2rem; }
.ficha dt{ font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-muted); }
.ficha dd{ margin:.4rem 0 0; font-size:1.05rem; line-height:1.5; }
.ficha a{ color:var(--paper); text-decoration-color:var(--accent); text-underline-offset:3px; }
@media (max-width:420px){ .ficha{ grid-template-columns:1fr; } }
.contacto__foto{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }

/* ---------------------------------------------------------------- cierre */
.cierre{ background:var(--accent); color:var(--accent-ink); padding-block:clamp(4rem, 9vw, 7rem); }
.cierre__dentro{ display:grid; gap:1.25rem; justify-items:start; }
.cierre p{ margin:0; font-size:1.15rem; max-width:44ch; color:rgba(255,255,255,.9); }
.cierre .boton{ margin-top:.75rem; }

/* ------------------------------------------------------------------- pie */
.pie{ background:var(--darker); color:var(--on-dark-muted); padding-block:3rem; font-size:.9rem; }
.pie__dentro{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem 2rem; align-items:center; }
.pie img{ width:78px; }
.pie p{ margin:0; }
.pie p + p{ margin-top:.4rem; }
.pie strong{ color:var(--paper); font-weight:600; }
.pie a{ color:var(--paper); text-decoration:none; }
.pie a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--accent); }
.pie__credito{ grid-column:1 / -1; padding-top:1.5rem; border-top:1px solid var(--on-dark-hairline); font-size:.8rem; }

/* ------------------------------------------------------ volver arriba (JS) */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:50;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink); color:var(--paper); display:grid; place-items:center;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  opacity:0; visibility:hidden;      /* no display:none, o no hay transición */
  transition:opacity .3s var(--ease), visibility .3s, background .2s;
}
.to-top.is-visible{ opacity:1; visibility:visible; }
.to-top:hover{ background:var(--accent); }

/* ------------------------------------------------------ entrada del hero */
/* La foto se abre desde una ventana apaisada; después baja la nav y sube el
   texto escalonado. Sin JS no se aplica nada y todo se ve colocado. */
.js-listo .hero__fondo{ clip-path: inset(40% 42% 40% 42%); transition: clip-path 1.4s cubic-bezier(.66,0,.2,1); }
.entrada .hero__fondo{ clip-path: inset(0); }
.js-listo .hero__fondo::after{ opacity:0; transition:opacity .9s var(--ease) .7s; }
.entrada .hero__fondo::after{ opacity:1; }
.js-listo .hero__fondo img{ transform:scale(1.12); transition:transform 2.4s cubic-bezier(.16,.72,.28,1); }
.entrada .hero__fondo img{ transform:none; }
.js-listo .nav:not(.is-abierta){ opacity:0; transition:opacity .6s var(--ease) 1.1s, transform .35s var(--ease), background .35s, box-shadow .35s, color .35s; }
.entrada .nav{ opacity:1 !important; }
.js-listo .hero__contenido > *{
  opacity:0; transform:translateY(var(--dy, 60px));
  transition:opacity .8s var(--ease), transform 1s cubic-bezier(.16,.72,.28,1);
  transition-delay:calc(1.05s + var(--i, 0) * 90ms);
}
.entrada .hero__contenido > *{ opacity:1; transform:none; }

.js-listo .revela{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js-listo .revela.visto{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js-listo .hero__fondo, .js-listo .hero__fondo img, .js-listo .nav, .js-listo .hero__contenido > *, .js-listo .revela{
    opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
  }
}

/* =========================================================================
   LA BASE — ajustes de Oswald y secciones propias
   ========================================================================= */

/* Bebas solo tiene mayúsculas; Oswald no: todo lo que usa la letra de titular
   va en mayúsculas y un punto más pequeño (Oswald es más ancha) */
.boton, .nav__enlaces a, .tabs button, .semana__cab span, .semana time, .dia time,
.bloque b, .clase h3, .plan h3, .plan__precio, .opiniones__nota strong{ text-transform:uppercase; }
.boton{ font-size:1.02rem; font-weight:500; letter-spacing:.06em; padding:1.05rem 1.7rem 1rem; }
.nav__enlaces a{ font-size:.98rem; font-weight:500; letter-spacing:.08em; }
@media (max-width:960px){ .nav__enlaces a{ font-size:clamp(2.1rem, 9vw, 3rem); font-weight:600; letter-spacing:0; } }
.nav__marca img{ height:42px; }
@media (max-width:960px){ .nav__marca img{ height:36px; } }
.tabs button{ font-size:1.15rem; font-weight:500; }
.semana__cab span{ font-size:1.05rem; font-weight:500; letter-spacing:.1em; }
.semana time, .dia time{ font-size:1.25rem; font-weight:500; }
.bloque b{ font-size:1.05rem; font-weight:600; letter-spacing:.06em; }
.plan h3{ font-size:1.5rem; font-weight:600; letter-spacing:.01em; }
.plan__precio{ font-weight:700; }
.opiniones__nota strong{ font-weight:700; }
.boton--negro{ background:var(--ink); color:#fff; }
.boton--negro:hover{ background:#000; }

.sec--negra{ background:var(--black); color:var(--paper); }
.sec--negra .cabecera__texto{ color:var(--on-dark-muted); }
.sec--sin-arriba{ padding-top:clamp(.5rem, 1vw, .75rem); }
.subtitulo{
  margin:clamp(3.5rem, 7vw, 5rem) 0 1.5rem; font-family:var(--font-display); font-weight:500;
  font-size:1rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-muted);
  display:flex; align-items:center; gap:1rem;
}
.subtitulo::after{ content:""; flex:1; height:1px; background:var(--on-dark-hairline); }

/* ------------------------------------------------- portada: el nombre como logo */
.marca-texto{
  margin:0; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(5.2rem, 19vw, 15.5rem); line-height:.8; letter-spacing:-.02em;
  display:grid; grid-template-columns:auto auto; justify-content:start; column-gap:.04em;
}
.marca-texto .fino{ font-weight:200; letter-spacing:-.03em; }
.marca-texto small{
  grid-column:1 / -1; font-weight:300; font-size:.335em; letter-spacing:.2em; line-height:1;
  margin-top:.16em; padding-left:.04em; color:rgba(255,255,255,.9);
}
.hero__fondo img{ object-position:50% 60%; }
.hero__bajar{
  position:absolute; z-index:2; right:max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); bottom:clamp(3rem, 7vw, 5.5rem);
  width:52px; height:84px; border-radius:999px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
  display:grid; justify-items:center; padding-top:16px;
}
.hero__bajar span{ width:3px; height:14px; border-radius:2px; background:#fff; animation:bajar 1.8s var(--ease) infinite; }
@keyframes bajar{ 0%{ transform:translateY(0); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateY(34px); opacity:0; } }
@media (max-width:760px){ .hero__bajar{ display:none; } }
@media (prefers-reduced-motion: reduce){ .hero__bajar span{ animation:none; } }

/* ---------------------------------------------------- lema: 1 hora = 4 % */
.lema{ overflow:hidden; }
.lema__cabeza{ display:grid; gap:1.5rem clamp(2rem, 5vw, 5rem); align-items:center; }
@media (min-width:900px){ .lema__cabeza{ grid-template-columns:auto 1fr; } }
.lema__cifra{
  margin:0; font-family:var(--font-display); font-weight:700; line-height:.78; letter-spacing:-.04em;
  font-size:clamp(9rem, 30vw, 22rem); color:var(--accent); display:flex; align-items:flex-start;
}
.lema__cifra i{ font-style:normal; font-weight:200; font-size:.42em; line-height:1; margin:.06em 0 0 .06em; color:var(--paper); }
.lema__texto h2{ font-size:clamp(2.4rem, 5.4vw, 4.75rem); }
.lema__texto p{ margin:1.5rem 0 0; max-width:46ch; font-size:1.125rem; color:var(--on-dark-muted); }

.reloj{ margin:clamp(3rem, 6vw, 4.5rem) 0 0; }
.reloj__barra{ display:grid; grid-template-columns:repeat(24, 1fr) 0; gap:3px; }
.hora{
  position:relative; height:clamp(54px, 7vw, 84px); border:0; padding:0; border-radius:3px;
  background:color-mix(in srgb, var(--paper) 7%, transparent);
}
.hora em{
  position:absolute; left:0; top:calc(100% + .55rem); font-style:normal; font-size:.78rem; font-weight:600;
  color:var(--on-dark-muted); transform:translateX(-30%);
}
.hora--fin{ background:none; }
.hora--abierta{ background:color-mix(in srgb, var(--paper) 26%, transparent); cursor:pointer; transition:background .25s, transform .25s var(--ease); }
.hora--abierta:hover{ background:color-mix(in srgb, var(--paper) 45%, transparent); }
.hora.is-tu{ background:var(--accent); transform:scaleY(1.18); }
.reloj__pie{
  margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:center;
  font-size:.92rem; color:var(--on-dark-muted);
}
.reloj__pie b{ color:#fff; font-weight:600; }
.m{ display:inline-block; width:.85rem; height:.85rem; border-radius:2px; margin-right:.5rem; vertical-align:-.08rem; }
.m--abierto{ background:color-mix(in srgb, var(--paper) 26%, transparent); }
.m--tu{ background:var(--accent); }
.reloj__ayuda{ margin-left:auto; font-size:.82rem; }
@media (max-width:640px){
  .reloj__barra{ gap:2px; }
  .hora em{ font-size:.68rem; }
  .reloj__ayuda{ margin-left:0; width:100%; }
}

.cifras{
  list-style:none; margin:clamp(4rem, 8vw, 6rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--on-dark-hairline);
}
.cifras li{ padding:1.75rem 1.5rem 0 0; display:grid; gap:.5rem; align-content:start; }
.cifras li + li{ padding-left:1.5rem; border-left:1px solid var(--on-dark-hairline); }
.cifras b{ font-family:var(--font-display); font-weight:600; font-size:clamp(2.6rem, 4.6vw, 4rem); line-height:.9; color:#fff; }
.cifras b small{ font-size:.42em; font-weight:400; margin-left:.12em; color:var(--on-dark-muted); }
.cifras span{ color:var(--on-dark-muted); font-size:.95rem; max-width:22ch; }
@media (max-width:760px){
  .cifras{ grid-template-columns:1fr 1fr; }
  .cifras li:nth-child(3){ padding-left:0; border-left:0; }
  .cifras li:nth-child(n+3){ border-top:1px solid var(--on-dark-hairline); margin-top:1.75rem; }
}

/* ------------------------------------------------------------- servicios */
.servicios{ display:grid; gap:clamp(2rem, 5vw, 5rem); align-items:start; }
@media (min-width:900px){ .servicios{ grid-template-columns:5fr 7fr; } }
.servicios__foto{ position:sticky; top:calc(var(--nav-h) + 1.5rem); }
.servicios__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
@media (max-width:899px){ .servicios__foto{ position:static; } .servicios__foto img{ aspect-ratio:4/3; object-position:50% 30%; } }
.servicios__lista{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.servicio{ display:grid; gap:.35rem; padding:1.5rem 0; border-bottom:1px solid var(--hairline); }
.servicio h3{ margin:0; font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1.05; transition:color .2s; }
.servicio p{ margin:0; color:var(--muted); max-width:52ch; }
.servicio:hover h3{ color:var(--accent-text); }

/* ------------------------------------------- especialidad + palmarés */
.especial{ display:grid; background:var(--black); color:var(--paper); }
@media (min-width:900px){ .especial{ grid-template-columns:1fr 1fr; min-height:100vh; } }
.especial__foto{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); }
@media (max-width:899px){ .especial__foto{ aspect-ratio:4/3; height:auto; object-position:50% 35%; } }
.especial__texto{ padding:var(--section-y) var(--gut); align-self:center; max-width:40rem; }
@media (min-width:900px){ .especial__texto{ padding-left:clamp(2.5rem, 5vw, 5rem); } }
.especial__texto > p{ color:var(--on-dark-muted); font-size:1.08rem; max-width:46ch; }
.especial__texto h2{ margin-bottom:1.5rem; }
.especial .antetitulo{ color:var(--on-dark-muted); }
.palmares{ list-style:none; margin:2rem 0 2.25rem; padding:0; border-top:1px solid var(--on-dark-hairline); }
.palmares li{ display:grid; grid-template-columns:4.5rem 1fr; gap:1rem; padding:.95rem 0; border-bottom:1px solid var(--on-dark-hairline); align-items:baseline; }
.palmares time{ font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:#F04A55; }
.palmares span{ color:var(--on-dark-muted); }
.palmares b{ color:#fff; font-weight:600; }

/* ------------------------------------------------------------------ equipo */
.equipo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 4rem); }
@media (max-width:700px){ .equipo{ grid-template-columns:1fr; } }
.persona:nth-child(2){ margin-top:clamp(0rem, 8vw, 7rem); }
@media (max-width:700px){ .persona:nth-child(2){ margin-top:0; } }
.persona__foto{ overflow:hidden; border-radius:var(--radius); }
.persona__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 40%; filter:grayscale(1); transition:filter .6s var(--ease), transform .8s var(--ease); }
.persona:hover .persona__foto img{ filter:none; transform:scale(1.02); }
.persona__cargo{ margin:1.5rem 0 .4rem; font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.persona h3{ margin:0; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2rem, 3.6vw, 3rem); line-height:.95; }
.persona__logro{ margin:.75rem 0 0; font-weight:600; color:var(--accent-text); }
.persona p:last-child{ margin:.75rem 0 0; color:var(--muted); max-width:46ch; }

/* ------------------------------------------------------------------ clases */
.clases4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; }
@media (max-width:980px){ .clases4{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .clases4{ grid-template-columns:1fr; } }
.clase4{ padding:1.5rem 1.4rem 1.75rem; background:color-mix(in srgb, var(--paper) 5%, transparent); border-top:4px solid var(--c); }
.clase4__dia{ margin:0; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-muted); }
.clase4 h3{ margin:.6rem 0 .75rem; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(2rem, 3vw, 2.6rem); line-height:1; }
.clase4 p:last-child{ margin:0; color:var(--on-dark-muted); font-size:.98rem; }
.semana--4 .semana__fila{ grid-template-columns:4.5rem repeat(4, 1fr); }
.semana--4 .semana__fila > span{ min-height:3.6rem; }
.tabs{ grid-template-columns:repeat(4, 1fr); }
/* el rojo lleva texto blanco; el resto, tinta */
.bloque--especial{ color:var(--ink); }
.bloque--especial[style*="c-leg"]{ color:#fff; }

/* ----------------------------------------------------------------- tarifas */
.planes--4{ grid-template-columns:repeat(4, 1fr); }
.plan__incluye{ list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.4rem; font-size:.92rem; color:var(--muted); }
.plan__incluye li{ display:flex; gap:.55rem; align-items:baseline; }
.plan__incluye li::before{ content:""; width:.5rem; height:2px; background:var(--accent); flex:none; transform:translateY(-.25rem); }
@media (max-width:980px){
  .planes--4{ grid-template-columns:1fr; }
  .plan__incluye{ grid-column:1 / -1; margin-top:.75rem; }
}
.otros{
  list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); gap:4px;
}
.otros li{ display:grid; gap:.15rem; padding:1.1rem 1.1rem 1.2rem; background:color-mix(in srgb, var(--ink) 5%, transparent); border-radius:var(--radius); }
.otros span{ font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.otros b{ font-family:var(--font-display); font-weight:700; font-size:2rem; line-height:1.05; color:var(--accent-text); }
.otros small{ font-size:.85rem; color:var(--muted); }
@media (max-width:980px){ .otros{ grid-template-columns:1fr 1fr; } .otros li:first-child{ grid-column:1 / -1; } }

/* -------------------------------------------------------- muro (200 m²) */
.muro{ position:relative; min-height:clamp(420px, 78vh, 760px); display:flex; align-items:flex-end; color:#fff; overflow:hidden; background:var(--black); }
.muro > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%; }
.muro::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,11,.85) 0%, rgba(11,11,11,.25) 45%, rgba(11,11,11,0) 70%); }
.muro__texto{ position:relative; z-index:1; padding-block:clamp(2.5rem, 6vw, 4.5rem); display:grid; gap:1rem; }
.muro__texto p{ margin:0; max-width:38ch; font-size:clamp(1.1rem, 1rem + .5vw, 1.4rem); color:rgba(255,255,255,.88); }
.mosaico{ margin-top:0; }

/* --------------------------------------------------------------- contacto */
.contacto__foto{ aspect-ratio:4/5; max-height:640px; object-position:50% 70%; }
@media (max-width:900px){ .contacto__foto{ aspect-ratio:4/3; } }
.unidad{ text-transform:none; font-weight:300; font-size:.4em; margin-left:.08em; vertical-align:top; line-height:1.2; }
.especial__texto h2{ font-size:clamp(2.6rem, 4.8vw, 4.6rem); }
@media (max-width:640px){ .marca-texto{ font-size:25vw; } .lema__cifra{ font-size:44vw; } }
.display--m{ line-height:1; }

@media (max-width:760px){ .hero{ padding-bottom:5.5rem; } }

/* ---------------------------------------------------------- material nuevo */
.nuevo{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1rem, 2vw, 1.75rem); }
@media (max-width:860px){ .nuevo{ grid-template-columns:1fr; max-width:34rem; } }
.nuevo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); background:#000; }
.nuevo figcaption{ margin-top:1rem; color:var(--on-dark-muted); font-size:.98rem; max-width:36ch; }
.nuevo figcaption b{ display:block; margin-bottom:.3rem; font-family:var(--font-display); font-weight:600; font-size:1.5rem; text-transform:uppercase; color:#fff; line-height:1.1; }