/* CrossFit Aristo, prototipo. Sistema: BMW M (awesome-design-md). Paleta: Aristo. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/saira-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/saira-condensed-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --canvas: #000000;
  --soft: #0d0d0d;
  --card: #1a1a1a;
  --hairline: #3c3c3c;
  --white: #ffffff;
  --body: #bbbbbb;
  --body-strong: #e6e6e6;
  --muted: #7e7e7e;
  --red: #FC221C;
  --error: #ff6b61;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Saira Condensed", "Inter", "Arial Narrow", sans-serif;
  --gutter: clamp(20px, 4.5vw, 64px);
  --max: 1440px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  scrollbar-color: var(--hairline) var(--canvas);
}
::selection { background: var(--red); color: var(--canvas); }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--red); text-underline-offset: 0.2em; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--white); font-weight: 700; }
button { font: inherit; color: inherit; }
main { display: block; overflow-x: clip; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--white); color: var(--canvas); padding: 12px 20px; z-index: 100; font-weight: 700; font-size: 14px; text-decoration: none; }
.skip:focus { top: 12px; }

.display { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 5.6vw, 84px); line-height: 0.95; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; }
.lead { font-size: 20px; font-weight: 300; line-height: 1.4; color: var(--body-strong); margin-top: 20px; max-width: 56ch; }
.dot { display: inline-block; width: 8px; height: 8px; background: var(--red); flex: none; }

/* Buttons: rectangles, radius 0, uppercase letterspaced */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding: 0 32px; border: 1px solid var(--white); border-radius: 0;
  font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1;
  color: var(--white); background: transparent; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn--outline:hover { background: var(--white); color: var(--canvas); }
.btn--solid { background: var(--white); color: var(--canvas); }
.btn--solid:hover { background: var(--body-strong); }
.btn--lg { height: 56px; padding: 0 40px; }
.btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }
.ico { width: 20px; height: 20px; flex: none; }
.ico--arrow { width: 18px; height: 18px; }
.link-caps { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--white); text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.25s; }
.link-caps:hover { border-bottom-color: var(--red); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50; height: 64px;
  display: flex; align-items: center; gap: 40px;
  padding: 0 var(--gutter); background: var(--canvas);
}
.nav__brand { flex: none; }
.nav__brand img { height: 40px; width: auto; }
.nav__links { display: flex; gap: 32px; margin: 0 auto; }
.nav__links a { font-size: 14px; font-weight: 400; letter-spacing: 0.5px; color: var(--body-strong); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color 0.25s; white-space: nowrap; }
.nav__links a:hover { border-bottom-color: var(--red); }
.nav__actions { display: flex; align-items: center; gap: 24px; }
.nav__ig { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--white); }
.nav__ig:hover { color: var(--red); }
.nav__tel { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; color: var(--white); text-decoration: none; white-space: nowrap; }
.nav__menu { display: none; width: 48px; height: 48px; border: 0; background: transparent; margin-left: auto; align-items: center; justify-content: center; color: var(--white); }
.stripe { height: 4px; background: var(--red); transform-origin: left; }
.nav + .stripe { position: sticky; top: 64px; z-index: 50; }
.menu { position: fixed; inset: 68px 0 0; z-index: 49; background: var(--canvas); display: flex; flex-direction: column; padding: 24px var(--gutter); }
.menu[hidden] { display: none; }
.menu a { font-family: var(--font-display); font-size: 40px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; color: var(--white); text-decoration: none; padding: 18px 0; border-bottom: 1px solid var(--hairline); }

/* Hero */
.hero { position: relative; min-height: calc(100vh - 68px); display: grid; align-items: end; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.3) 100%); }
.hero__inner { position: relative; padding: 96px var(--gutter) 64px; max-width: var(--max); width: 100%; margin: 0 auto; }
.stamp { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 9vw, 128px); line-height: 0.92; letter-spacing: 0; text-transform: uppercase; display: grid; }
.stamp span { display: block; }
.hero__sub { margin-top: 24px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 300; color: var(--white); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }

.specs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--hairline); border-top: 1px solid var(--hairline); }
.spec { background: var(--soft); padding: 24px var(--gutter); }
.spec dt { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 48px); white-space: nowrap; font-weight: 800; line-height: 1; color: var(--white); text-transform: uppercase; letter-spacing: 0; }
.spec dd { margin: 8px 0 0; font-size: 14px; font-weight: 400; letter-spacing: 0.5px; color: var(--body); }

/* Sections */
.section { position: relative; width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: 96px 0; border-top: 1px solid var(--hairline); }
.section, .hero, [id] { scroll-margin-top: 84px; }
.section__head { max-width: 760px; }

/* Steps */

/* Train */
.train__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.rows li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: end; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.rows__k { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 48px); font-weight: 800; color: var(--white); text-transform: uppercase; letter-spacing: 0; line-height: 0.95; transition: color 0.25s var(--ease); }
.rows li:hover .rows__k { color: var(--red); }
.rows__v { font-size: 18px; font-weight: 300; line-height: 1.4; padding-bottom: 6px; }
/* Hours */
.hours__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-top: 64px; }
.board { background: var(--soft); padding: 40px; }
.board h3 { font-family: var(--font-display); font-size: 32px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; line-height: 1; }
.timetable { width: 100%; border-collapse: collapse; margin-top: 24px; font-variant-numeric: tabular-nums; }
.timetable th, .timetable td { text-align: left; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--hairline); font-weight: 300; }
.timetable thead th { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--body); }
.timetable tbody th { color: var(--white); font-weight: 700; }
.timetable td { color: var(--body-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timetable__none { color: var(--muted); }
.placeholder { border-bottom: 2px dashed var(--red); color: var(--body-strong); }
.pending--inline { margin-top: 0; padding: 2px 8px; font-size: 12px; }
.pending { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: var(--red); border: 1px dashed var(--red); padding: 6px 12px; }
.board .link-caps { display: inline-flex; margin-top: 24px; }

/* FAQ */
.faq__list { margin-top: 48px; max-width: 900px; }
.faq__list details { border-top: 1px solid var(--hairline); }
.faq__list details:last-child { border-bottom: 1px solid var(--hairline); }
.faq__list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 20px; font-weight: 700; color: var(--white); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; font-weight: 300; font-size: 24px; color: var(--red); flex: none; }
.faq__list details[open] summary::after { content: "−"; }
.faq__list details p { padding: 0 0 24px; max-width: 70ch; font-size: 18px; line-height: 1.5; }

/* Instagram */
.insta__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.insta__grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.insta__grid a { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--card); }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease), filter 0.4s var(--ease); }
.insta__grid a:hover img { transform: scale(1.04); filter: none; }
.insta__note { margin-top: 20px; font-size: 14px; color: var(--body); max-width: 70ch; }

/* Where */
.where__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.where .link-caps { margin-top: 32px; }
.where__photo { margin: 0; aspect-ratio: 16 / 10; background: var(--soft); overflow: hidden; position: relative; }
.where__photo img { width: 100%; height: 100%; object-fit: cover; }
.where__photo figcaption { position: absolute; left: 16px; bottom: 16px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); background: rgba(0,0,0,0.6); padding: 6px 10px; }

/* Footer */
.footer { margin-top: 96px; background: var(--canvas); }
.footer__grid { width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: 64px 0 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer img { height: 48px; width: auto; }
.footer__addr { margin-top: 20px; font-size: 14px; line-height: 1.6; }
.footer h3 { font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; }
.footer p { margin-top: 14px; font-size: 14px; line-height: 1.8; }
.footer__bottom { width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: 24px 0 112px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px; letter-spacing: 0.5px; color: var(--muted); }

/* Flotantes: en móvil, WhatsApp y el asistente abajo a la derecha; en tablet y
   escritorio solo el asistente, porque la cabecera fija ya lleva teléfono y
   WhatsApp (revisión del 22 sep 2026). */

.dock { display: contents; }
.dock > a { display: none; }
.dock > .btn { width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0; background: #25D366; color: var(--white); gap: 0; }
.dock > .btn:hover { background: #1FB859; }
.dock > .btn .ico { width: 26px; height: 26px; }
.dock__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Voice assistant sheet */

   

/* Responsive */
@media (max-width: 1340px) and (min-width: 1024px) {
  .nav { gap: 24px; }
  .nav__links { gap: 20px; }
  .nav__actions { gap: 14px; }
  .nav__actions .btn { padding: 0 16px; font-size: 12px; letter-spacing: 1px; }
}
@media (max-width: 1023px) {
  .nav { gap: 20px; }
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0, 1fr) y no 1fr: 1fr equivale a minmax(auto, 1fr) y auto no baja del
     contenido mínimo, así que a 320 px la columna pedía 351 px y la sección de
     contacto entera (titular, texto, teléfono y formulario) se salía 52 px. */
  .train__grid, .hours__grid, .where__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 767px) {
  .section { padding: 64px 0; }
  .hero { min-height: 0; }
  .hero__inner { padding: 72px var(--gutter) 48px; }
  .hero__actions .btn { width: 100%; padding: 0 16px; white-space: normal; text-align: center; }
  .specs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .spec { padding: 20px 16px; min-width: 0; }
  .spec dd { overflow-wrap: anywhere; }
  /* El horario se leía "6:45 A 20:0": nowrap sobre una celda de 128 px que
     necesitaba 150. Es una de las dos cosas que mira cualquiera. */
  .spec dt { font-size: 32px; white-space: normal; }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  /* A 320 px "ACONDICIONAMIENTO" forzaba la rejilla a 340 px y el bloque entero
     se salía. Con overflow-x: clip no aparecía barra de scroll: simplemente
     faltaba texto, que es la forma peor de romperse. */
  .rows__k { font-size: 32px; overflow-wrap: anywhere; hyphens: auto; }
  .board { padding: 20px 16px; }
  .timetable, .timetable tbody, .timetable tr, .timetable th, .timetable td { display: block; }
  .timetable thead { display: none; }
  .timetable tr { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .timetable tbody th { border: 0; padding: 0 0 6px; font-size: 16px; }
  .timetable td { border: 0; padding: 4px 0; white-space: normal; font-size: 14px; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .timetable td::before { content: attr(data-label); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--body); align-self: center; }
  .timetable td[data-label=""]::before { content: none; }
  .timetable td[data-label=""] { grid-template-columns: 1fr; }
  .timetable td.timetable__empty { display: none; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { padding-bottom: 120px; }
  /* Three round buttons floating bottom-right, no container (client decision, 18 Sep 2026) */
  .dock { display: flex; align-items: center; gap: 10px; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 55; padding: 0; background: transparent; border: 0; }
  .dock > a { display: inline-flex; }
  .dock > .btn { width: 50px; height: 50px; }
  .dock > .btn .ico { width: 24px; height: 24px; }
  
  
  
}

/* ---------------------------------------------------------------------------
   Revisión del 22 sep 2026: menos flotantes, y que no tapen texto.
   --------------------------------------------------------------------------- */

/* El asistente deja de ser un tercer círculo verde. En ese verde parecía otro
   botón de WhatsApp, y un micrófono solo no se entendía: píldora blanca, de la
   paleta del box, con la palabra delante. */

/* En escritorio la píldora con la palabra, más ancha que el círculo de antes,
   tapaba "años de experiencia" nada más cargar a 1440x900. Con ratón se queda
   en círculo y se despliega al pasar por encima o al llegar con el teclado. En
   táctil no hay "pasar por encima", así que ahí la palabra va siempre. */

/* ---------------------------------------------------------------------------
   Revisión del 22 sep 2026, segunda parte: la cabecera fija es el sitio de los
   contactos permanentes, en vez de más botones flotando sobre el contenido.
   --------------------------------------------------------------------------- */

.nav__tel { display: inline-flex; align-items: center; gap: 8px; }
.nav__tel .ico, .nav__cta .ico { width: 18px; height: 18px; flex: none; }
.nav__cta { gap: 10px; }
.nav__cta-corto { display: none; }

/* Donde el texto largo no cabe junto a los iconos. */
@media (max-width: 1519px) {
  .nav__cta-largo { display: none; }
  .nav__cta-corto { display: inline; }
}

/* Tablet y móvil: Instagram y teléfono como iconos junto al menú. */
@media (max-width: 1023px) {
  .nav__actions { display: flex; margin-left: auto; gap: 4px; }
  .nav__tel { width: 44px; height: 44px; justify-content: center; }
  .nav__tel .ico { width: 22px; height: 22px; }
  .nav__tel-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__menu { margin-left: 4px; }
}
/* Móvil: WhatsApp ya está abajo, donde va el pulgar. */
@media (max-width: 767px) {
  .nav__cta { display: none; }
}

/* Un teléfono partido en dos líneas ("639 02 37" y "15") no se lee como número. */
.lead a[href^="tel:"] { white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Versión 2 (reunión del 7 oct 2026): calendario que abre WhatsApp, cuota sin
   números, motivos, coaches, reseñas y el club con más peso. Sin formulario.
   --------------------------------------------------------------------------- */

.hero__sub strong { font-weight: 700; }
.spec dd a { color: var(--body-strong); text-decoration: underline; text-decoration-color: var(--red); }

/* Motivos */
.motives__grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.motives__grid li { background: var(--canvas); padding: 32px; }
.motives__grid h3 { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.motives__grid h3::after { content: ""; display: block; width: 32px; height: 4px; background: var(--red); margin-top: 16px; }
.motives__grid p { margin-top: 16px; font-size: 18px; line-height: 1.45; }
.motives__cta { margin-top: 32px; }

/* Pasos: el número grande, como una marca de pizarra */

/* Calendario */
.cal { margin-top: 48px; }
.cal:empty { display: none; }
.cal__tabs { display: none; }
.cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.cal__day { background: var(--soft); padding: 20px 16px 24px; min-width: 0; }
.cal__head { display: grid; gap: 2px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.cal__name { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--white); }
.cal__date { font-size: 12px; font-weight: 400; color: var(--body); }
.cal__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--hairline); color: var(--white); text-decoration: none; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); }
a.slot:hover, a.slot:focus-visible { background: var(--red); border-color: var(--red); color: var(--canvas); }
.slot.is-past { color: var(--muted); border-style: dashed; text-decoration: line-through; text-decoration-color: var(--muted); }
.cal__closed { color: var(--muted); font-size: 16px; padding: 12px 0; }
.cal__foot { margin-top: 16px; font-size: 14px; color: var(--body); }
.hours .board--cuota { margin-top: 24px; }

/* Cuota sin números */
.board--cuota { background: var(--red); color: var(--canvas); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.board--cuota h3 { color: var(--canvas); font-size: clamp(32px, 3.4vw, 48px); font-weight: 800; line-height: 0.95; }
.board__text { margin-top: 20px; font-size: 20px; line-height: 1.4; color: var(--canvas); font-weight: 400; max-width: 34ch; }
.board--cuota .board__note { margin-top: 16px; color: rgba(0, 0, 0, 0.8); }
.btn--dark { margin-top: auto; background: var(--canvas); border-color: var(--canvas); color: var(--white); white-space: normal; text-align: left; height: auto; min-height: 56px; padding: 14px 24px; line-height: 1.25; }
.board--cuota .btn--dark { margin-top: 0; flex: none; }
.btn--dark:hover { background: #1a1a1a; }

/* Coaches */
.coaches__grid { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.coach { background: var(--soft); padding-bottom: 24px; border: 1px solid var(--hairline); }
.coach__photo { aspect-ratio: 1 / 1; background: var(--card); display: grid; place-items: center; border-bottom: 1px solid var(--hairline); }
.coach h3 { margin: 24px 24px 0; font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.coach__role { margin: 8px 24px 0; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); }
.coach__text { margin: 12px 24px 0; }

/* Reseñas */
.reviews__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.reviews__score { display: grid; justify-items: start; gap: 6px; text-decoration: none; color: var(--white); padding: 24px 28px; background: var(--soft); border-bottom: 4px solid var(--red); }
.reviews__num { font-family: var(--font-display); font-size: clamp(56px, 6vw, 96px); font-weight: 800; line-height: 0.85; }
.reviews__stars { display: flex; gap: 4px; color: var(--red); }
.reviews__stars svg { width: 20px; height: 20px; }
.reviews__count { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.reviews__score:hover .reviews__count { text-decoration: underline; text-decoration-color: var(--red); }
.quotes { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.quotes li { display: grid; gap: 14px; align-content: start; }
.quotes blockquote { margin: 0; }
.quotes p { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.3; color: var(--white); text-wrap: balance; }
.quotes p::before { content: "\201C"; } .quotes p::after { content: "\201D"; }
.quotes__src { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--body); }
.testimonials { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.testimonials__media { aspect-ratio: 16 / 10; background: var(--soft); border: 1px solid var(--hairline); display: grid; place-items: center; padding: 16px; text-align: center; }
.testimonials h3 { margin-top: 16px; font-size: 20px; line-height: 1.3; }
.testimonials p { margin-top: 6px; font-size: 16px; color: var(--body); }
.reviews__note { margin-top: 24px; font-size: 14px; color: var(--body); max-width: 70ch; }

/* Club */
.where__facts { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.where__facts li { padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 18px; color: var(--body-strong); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.where__facts li::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
.club__shots { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.club__shots li { aspect-ratio: 4 / 3; background: var(--soft); border: 1px solid var(--hairline); display: grid; place-items: center; padding: 16px; text-align: center; }

/* Cierre */
.final { text-align: left; }
.final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; }

.footer__ig { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; min-height: 44px; font-size: 14px; color: var(--white); text-decoration: none; }
.footer__ig:hover { color: var(--red); }
.footer p a { display: inline-block; min-height: 24px; }

@media (max-width: 1023px) {
  .motives__grid, .coaches__grid, .quotes, .testimonials, .club__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews__head { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* El calendario pasa a pestañas: un día cada vez. */
  .cal.is-live .cal__tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 4px; scrollbar-width: none; }
  .cal__tabs::-webkit-scrollbar { display: none; }
  .cal__tab { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 10px 12px; background: transparent; border: 1px solid var(--hairline); color: var(--body-strong); cursor: pointer; }
  .cal__tab[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--canvas); }
  .cal__tab-dia { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
  .cal__tab-num { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1; }
  .cal__days { grid-template-columns: minmax(0, 1fr); }
  .cal.is-live .cal__day:not(.is-active) { display: none; }
  .cal__day { padding: 20px 16px; }
  .cal__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot { height: 52px; font-size: 18px; }
}
@media (max-width: 767px) {
  .motives__grid, .coaches__grid, .quotes, .club__shots { grid-template-columns: minmax(0, 1fr); }
  .motives__grid li { padding: 24px 20px; }
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .testimonials h3 { font-size: 16px; }
  .testimonials p { font-size: 14px; }
  .testimonials__media .pending { font-size: 12px; }
  .coach__photo { aspect-ratio: 16 / 11; }
  .final__actions .btn { width: 100%; }
  .btn--dark { width: 100%; }
}

/* Páginas legales */
.legal { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; padding: 56px 0 96px; }
.legal .display { margin-top: 24px; font-size: clamp(32px, 3.4vw, 48px); }
.legal h2 { margin-top: 40px; font-size: 20px; }
.legal p { margin-top: 12px; color: var(--body-strong); }
.legal a { color: var(--white); }

/* Revisión v2: el CTA corto en móvil, y entre 1024 y 1199 px el horario en una
   columna (se cortaba "19:0") y el número de teléfono solo como icono (se comía
   el logo). */
.cta-corto { display: none; }
@media (max-width: 767px) {
  .hero__actions .cta-largo { display: none; }
  .hero__actions .cta-corto { display: inline; }
  .hero__actions .btn { white-space: nowrap; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .nav__tel { width: 44px; height: 44px; justify-content: center; }
  .nav__tel-num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  .hero__actions .btn { white-space: normal; letter-spacing: 1px; }
}
/* Con cinco secciones en el menú no caben enlaces, teléfono y botón por debajo
   de 1200 px: el botón de WhatsApp se salía 18 px por la derecha a 1024. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; margin-left: 4px; }
  .nav__actions { margin-left: auto; gap: 8px; }
}

/* Calendario semanal fijo: la próxima fecha de cada día, y mañana marcado. */
.cal__date:empty { display: none; }
.cal__tab-num:empty { display: none; }

@media (max-width: 1023px) and (min-width: 768px) {
  .coaches__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .coaches__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .coach h3 { margin: 16px 12px 0; font-size: 32px; }
  .coach__role, .coach__text { margin-left: 12px; margin-right: 12px; }
  .coach__photo { aspect-ratio: 1 / 1; }
  .board--cuota .btn--dark { width: 100%; }
}
/* Las siete pestañas caben siempre a lo ancho: con scroll horizontal, sábado y
   domingo quedaban fuera de la pantalla y no se sabía que existían. */
@media (max-width: 1023px) {
  .cal__tabs { overflow: visible; gap: 4px; }
  .cal__tab { flex: 1 1 0; min-width: 0; padding: 8px 0; }
}
@media (max-width: 767px) {
  .coach__role { font-size: 12px; letter-spacing: 1px; }
}

/* Calendario con flechas: siete días desde hoy y semanas hacia delante. */
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.cal__range { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--white); text-align: center; }
.cal__arrow { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: transparent; border: 1px solid var(--white); color: var(--white); cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.cal__arrow:hover:not([disabled]) { background: var(--white); color: var(--canvas); }
.cal__arrow[disabled] { border-color: var(--hairline); color: var(--muted); cursor: default; }
.cal__arrow[data-mover="-1"] .ico { transform: scaleX(-1); }
@media (max-width: 1023px) {
  .cal:not(.is-live) .cal__days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cal:not(.is-live) .cal__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Nota de Google con estrella */
.star { width: 1em; height: 1em; flex: none; color: var(--red); }
.spec__rating { display: flex; align-items: center; gap: 8px; }
.spec__rating .star { width: 0.8em; height: 0.8em; }
.spec__rating small, .reviews__num small { font-size: 0.45em; color: var(--body); margin-left: 2px; }
.reviews__score { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
.reviews__star { width: clamp(48px, 5vw, 72px); height: clamp(48px, 5vw, 72px); grid-row: span 2; }
.reviews__count { grid-column: 2; }

.spec__rating small { font-size: 14px; }
.reviews__num small { font-size: 24px; }

/* Semanas de lunes a domingo: lo pasado, apagado; hoy, destacado. */
.cal__day.is-gone .cal__head, .cal__tab.is-gone { opacity: 0.45; }
.cal__day.is-today { background: var(--card); }
.cal__day.is-today .cal__name { color: var(--red); }

/* Historias de socios: una fila que se desliza, con flechas en escritorio. */
.carousel { margin-top: 56px; }
.carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.carousel__title { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.carousel__nav { display: flex; gap: 8px; }
.carousel__prev .ico { transform: scaleX(-1); }
.carousel .testimonials { margin-top: 24px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); grid-template-columns: none; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.carousel .testimonials::-webkit-scrollbar { display: none; }
.carousel .testimonials li { scroll-snap-align: start; }
@media (max-width: 1023px) {
  .carousel .testimonials { grid-auto-columns: calc((100% - 24px) / 2.2); grid-template-columns: none; }
}
@media (max-width: 767px) {
  .carousel .testimonials { grid-auto-columns: 78%; gap: 16px; grid-template-columns: none; }
  .carousel__nav { display: none; }
  .carousel__title { font-size: 24px; }
}

/* Flotantes en todos los anchos (decisión de Álvaro, 8 oct 2026): WhatsApp y
   el asistente. Siguen siendo dos. */
.dock { display: flex; align-items: center; gap: 10px; position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 55; }
.dock > a { display: inline-flex; }

@media (max-width: 767px) { .dock { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }

/* Revisión del 8 oct: carruseles iguales para historias y club, con flechas
   también en el móvil para que se vea que hay más. */
.carousel [data-track] { margin: 24px 0 0; padding: 0 0 4px; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); grid-template-columns: none; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel [data-track]::-webkit-scrollbar { display: none; }
.carousel [data-track] > li { scroll-snap-align: start; }
@media (max-width: 1023px) {
  .carousel [data-track] { grid-auto-columns: calc((100% - 24px) / 2.2); grid-template-columns: none; }
}
@media (max-width: 767px) {
  .carousel [data-track] { grid-auto-columns: 78%; gap: 16px; grid-template-columns: none; }
  .carousel__nav { display: flex; }
  .carousel__nav .cal__arrow { width: 40px; height: 40px; }
}
.where .carousel { margin-top: 48px; }

/* Instagram, compacto: una fila de cuatro, también en el móvil. */
.insta { padding-block: 64px; }
.insta .display { font-size: clamp(32px, 3.4vw, 48px); }
.insta__grid { margin-top: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.insta__grid a { aspect-ratio: 1 / 1; }
@media (max-width: 1023px) { .insta__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
@media (max-width: 767px) { .insta { padding-block: 48px; } }

/* Botones flotantes como icono de app: cuadrados con las esquinas redondeadas,
   los dos iguales (Álvaro, 8 oct 2026). Sustituye al círculo y a la píldora. */

/* Esquinas redondeadas en todo lo que es una pieza (botones, horas, tarjetas,
   fotos), a juego con los botones flotantes (Álvaro, 8 oct 2026). Lo que es
   estructura (franjas, líneas, secciones a sangre) sigue recto. */
:root { --r-xs: 6px; --r-sm: 8px; --r-md: 14px; --r-lg: 16px; }
.btn, .link-caps:focus-visible { border-radius: var(--r-sm); }

.slot, .cal__tab, .cal__arrow { border-radius: var(--r-sm); }
.pending { border-radius: var(--r-xs); }
.cal__days, .motives__grid { border-radius: var(--r-lg); overflow: hidden; }
.reviews__score { border-bottom: 0; }
.quotes li::before { content: ""; display: block; width: 48px; height: 4px; background: var(--red); margin-bottom: 16px; }
.faq__list summary { border-radius: var(--r-sm); }

/* "¿Qué buscas?": seis tarjetas sueltas, como el resto de piezas, en vez de
   una tabla unida por líneas. */
.motives__grid { background: none; border: 0; border-radius: 0; overflow: visible; gap: 16px; }
.motives__grid li { background: var(--soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); }

/* Reseñas de Google en tarjetas (13 oct 2026, idea de CrossFit 184): nombre,
   "Publicada en Google", estrellas y el texto real. Sin "verificada": Google
   dice en la ficha que sus reseñas no se verifican. */
.reviews__list .review { display: grid; align-content: start; gap: 12px; padding: 20px; background: var(--soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.review__head { display: flex; align-items: center; gap: 12px; }
.review__avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: var(--canvas); font-weight: 700; font-size: 18px; }
.review__name { font-weight: 700; color: var(--white); font-size: 16px; line-height: 1.2; }
.review__src { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--body); margin-top: 2px; }
.gmark { width: 14px; height: 14px; flex: none; }
.review__stars { display: flex; gap: 2px; color: var(--red); }
.review__stars svg { width: 18px; height: 18px; }
.review__text { font-size: 16px; line-height: 1.5; color: var(--body-strong); }
.review__more { font-size: 14px; font-weight: 700; color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.2em; }
.reviews__all { margin-top: 16px; }
.reviews .carousel + .carousel { margin-top: 64px; }

/* Empezar en tres pasos, como una escalera (llamada del 21 oct 2026): cada
   peldaño más alto que el anterior y con la foto más grande; el último, en
   rojo, es el "go" que lleva al calendario. En el móvil, los peldaños bajan
   uno tras otro unidos por una línea roja. */
.stairs { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.stair { display: flex; flex-direction: column; background: var(--soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.stair__photo { margin: 0; overflow: hidden; }
.stair__photo img { width: 100%; height: 100%; object-fit: cover; }
.stair--1 .stair__photo { height: 120px; }
.stair--2 .stair__photo { height: 190px; }
.stair--3 .stair__photo { height: 260px; }
.stair__body { padding: 20px; display: grid; gap: 8px; }
.stair__num { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 0.9; color: var(--red); }
.stair h3 { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.stair p { font-size: 16px; line-height: 1.45; }
.stair--go { background: var(--red); border-color: var(--red); }
.stair__go { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 520px; padding: 24px; color: var(--canvas); text-decoration: none; }
.stair__go-big { font-family: var(--font-display); font-size: clamp(96px, 9vw, 128px); font-weight: 800; line-height: 0.8; }
.stair__go-text { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.stair__go:hover .stair__go-text, .stair__go:focus-visible .stair__go-text { text-decoration: underline; text-underline-offset: 0.25em; }
@media (max-width: 1023px) {
  .stairs { grid-template-columns: minmax(0, 1fr); gap: 0; margin-left: 12px; padding-left: 23px; position: relative; }
  .stairs::before { content: ""; position: absolute; left: 0; top: 0; bottom: 24px; width: 3px; background: var(--red); }
  .stair { margin-bottom: 16px; position: relative; overflow: visible; }
  .stair::before { content: ""; position: absolute; left: -29px; top: 28px; width: 15px; height: 15px; border-radius: 50%; background: var(--red); }
  .stair__photo { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .stair--1 .stair__photo, .stair--2 .stair__photo, .stair--3 .stair__photo { height: 180px; }
  .stair--go { margin-bottom: 0; }
  .stair__go { min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 24px; }
  .stair__go-big { font-size: 84px; }
}

/* Instagram con Behold: con seis publicaciones, una fila en escritorio y dos
   de tres en el móvil. */
.insta__grid[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 767px) { .insta__grid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Fotos de la escalera (Javi, 29 oct 2026): verticales, así que en cada
   peldaño se elige qué franja se ve. */
.coach__photo img { width: 100%; height: 100%; object-fit: cover; }
.stair--1 .stair__photo img { object-position: 50% 72%; }
.stair--2 .stair__photo img { object-position: 50% 55%; }
.stair--3 .stair__photo img { object-position: 50% 58%; }

/* Equipo (rehecho el 30 oct 2026, tras ver Álvaro la primera versión):
   - Todas las tarjetas igual de altas y el "Conocer a…" siempre en el mismo
     sitio, abajo.
   - La ficha completa no se despliega hacia abajo: aparece encima de la propia
     tarjeta, sobre la foto difuminada, y abajo queda "Cerrar". Sin JavaScript:
     es un <details> que se pinta encima.
   - En escritorio, cinco en fila; en tablet, tres; en el móvil, carrusel como
     el de las reseñas, para que cada tarjeta tenga altura para leer la ficha. */
.coaches__carousel { margin-top: 56px; }
.coaches__carousel .carousel__head { justify-content: flex-end; }
.coaches__carousel .coaches__grid { margin: 0; }
@media (min-width: 768px) {
  .coaches__carousel .carousel__head { display: none; }
  .coaches__carousel [data-track].coaches__grid { display: grid; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; gap: 16px; align-items: stretch; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .coaches__carousel [data-track].coaches__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.coach { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.coach__photo { aspect-ratio: 1 / 1; width: 100%; height: auto; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--card); }
.coach__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach__info { flex: 1 1 auto; padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 6px; }
.coach h3, .coach .coach__role, .coach .coach__text { margin: 0; }
.coach h3 { font-size: 32px; }
.coach__text { font-size: 16px; line-height: 1.45; color: var(--body-strong); }
.coach__more { flex: none; margin: 0 20px; border-top: 1px solid var(--hairline); }
.coach__more summary { position: relative; z-index: 3; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; height: 56px; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--white); }
.coach__more summary::-webkit-details-marker { display: none; }
.coach__more summary::after { content: "+"; color: var(--red); font-size: 24px; font-weight: 300; }
.coach__more[open] summary::after { content: "×"; }
.coach__cerrar { display: none; }
.coach__more[open] .coach__abrir { display: none; }
.coach__more[open] .coach__cerrar { display: inline; }
.coach__bio { position: absolute; z-index: 2; inset: 0 0 57px 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 20px; display: grid; align-content: start; gap: 10px; background: rgba(13, 13, 13, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.coach__bio p { font-size: 14px; line-height: 1.5; color: var(--body-strong); }
.coach__more[open] { border-top-color: transparent; }
@media (prefers-reduced-transparency: reduce) { .coach__bio { background: var(--soft); } }
@media (max-width: 767px) {
  .coaches__carousel [data-track].coaches__grid { grid-auto-columns: 82%; gap: 12px; grid-template-columns: none; }
  .coach { display: flex; grid-template-columns: none; }
  .coach h3 { font-size: 32px; }
  .coach__photo { aspect-ratio: 5 / 4; }
}

.reviews .carousel__head { justify-content: flex-end; }

/* Revisión final antes de publicar (30 oct 2026). */
/* Una sola línea entre secciones: la última fila de la lista no lleva la suya,
   que ya pone el borde superior de la sección siguiente. */
.rows li:last-child { border-bottom: 0; }
.faq__list details:last-child { border-bottom: 0; }
/* Que se note que la ficha del coach sigue más abajo: el final se difumina. */
.coach__bio { padding-bottom: 0; background: rgba(13, 13, 13, 0.74); }
/* Con la ficha abierta, el resumen de la tarjeta no se ve por debajo (se
   transparentaba por la parte baja). La pista de que el texto sigue es un
   degradado pegado al final de la zona que se desplaza, del mismo color que el
   fondo: tapa las letras, no deja ver lo de detrás. */
.coach:has(.coach__more[open]) .coach__info { visibility: hidden; }
.coach__bio::after { content: ""; position: sticky; bottom: 0; display: block; height: 40px; margin-top: -8px; background: linear-gradient(rgba(13, 13, 13, 0), rgba(13, 13, 13, 0.9)); pointer-events: none; }
/* Instagram en el móvil: cuatro miniaturas de 80 px no se distinguían. */
@media (max-width: 767px) {
  .insta__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .insta__grid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* En escritorio, los dos botones flotantes caían encima de la última celda de
   la banda de datos en la primera pantalla. */
@media (min-width: 1024px) { .specs > div:last-child { padding-right: 160px; } }

/* Escalera en escritorio (30 oct 2026, Álvaro): la parte negra de los tres
   pasos mide lo mismo (número y título a la misma altura aunque un texto sea
   más largo) y la escalera la marcan solo las fotos, cada una más alta, y el
   GO, que sobresale por encima de todas. Rejilla de dos filas (foto y texto)
   compartida con subgrid. */
@media (min-width: 1024px) {
  .stairs { grid-template-rows: 300px auto; row-gap: 0; align-items: stretch; }
  .stair:not(.stair--go) { grid-row: span 2; display: grid; grid-template-rows: subgrid; background: none; border: 0; border-radius: 0; overflow: visible; }
  .stair:not(.stair--go) .stair__photo { align-self: end; border: 1px solid var(--hairline); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .stair:not(.stair--go) .stair__body { background: var(--soft); border: 1px solid var(--hairline); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); align-content: start; }
  .stair--1 .stair__photo { height: 150px; }
  .stair--2 .stair__photo { height: 225px; }
  .stair--3 .stair__photo { height: 300px; }
  .stair--go { grid-row: span 2; margin-top: -72px; }
  .stair--go .stair__go { min-height: 0; height: 100%; }
  .stair--1 .stair__photo img { object-position: 50% 66%; }
  .stair--3 .stair__photo img { object-position: 50% 30%; }
}
/* Paso 3 (30 oct 2026, Álvaro): la mancuerna arriba del todo y debajo el
   cuerpo de quien la levanta, no el techo. La franja visible no mide lo mismo
   en móvil que en escritorio, así que cada uno lleva su encuadre. */
.stair--3 .stair__photo img { object-position: 50% 60%; }
@media (min-width: 1024px) { .stair--3 .stair__photo img { object-position: 50% 88%; } }