/* CrossFit Lanzarote — piezas multipágina: hero de página, home corta, precios, horario, galería y campeonato */

/* Hero de página: negro como el de la home, foto b/n oscura solo como textura */
.phero {
  position: relative; isolation: isolate; overflow: hidden; background: #000; color: var(--bone);
  min-height: min(68svh, 640px); display: grid; align-items: end;
  padding: calc(var(--header-h) + var(--topbar-h) + 40px) 0 clamp(40px, 6vw, 72px);
}
.phero__media { position: absolute; inset: -10% 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, #000 4%, rgba(0, 0, 0, 0.78) 45%, rgba(0, 0, 0, 0.45)), linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1) 75%);
}
.phero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--red); }
.crumbs { display: flex; gap: 10px; margin-bottom: 18px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--bone); }
.phero__eyebrow { color: var(--bone); }
.phero__title {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.84; letter-spacing: -0.01em;
  font-size: clamp(3.6rem, 10vw, 9.5rem); margin-bottom: 20px;
}
.phero__title em { color: var(--red-hot); }
.phero__lead { max-width: 52ch; margin: 0; font-size: clamp(1rem, 0.8vw + 0.7rem, 1.2rem); }
.phero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.phero .btn--ghost { --fill: var(--bone); --fill-fg: var(--lava); }

/* Enlace «ver todo» ------------------------------------------------------ */
.see-all {
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 48px; margin-top: 28px; padding-bottom: 2px;
  font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: 0.03em; text-transform: uppercase;
  text-decoration: none; border-bottom: 3px solid var(--red);
}
.see-all::after { content: "→"; transition: transform 0.35s var(--ease-out); }
.see-all:hover::after { transform: translateX(8px); }

/* Home corta: menos aire vertical y clases en rejilla -------------------- */
.page-inicio .section { padding-block: clamp(64px, 7vw, 104px); }
.page-inicio .sec-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.page-inicio .lsc--teaser { padding-block: clamp(56px, 6vw, 96px); }
.page-inicio .cls__txt { display: none; }
.page-inicio .h-xl { font-size: clamp(2.8rem, 6.4vw, 6.2rem); }
.page-inicio .cta__price { font-size: clamp(8rem, 18vw, 15rem); }
.page-inicio .cta__inner { padding-block: clamp(64px, 7vw, 104px); }
.page-inicio .tape { --tape-h: clamp(40px, 4vw, 56px); }
@media (min-width: 980px) {
  .cls--compact { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .cls--compact .cls__row { grid-template-columns: 44px 1fr; }
}
.manifesto__grid--short { align-items: start; }
.manifesto__grid--short .statement__punch { font-size: clamp(4rem, 9vw, 8.5rem); margin: 0; }
.stats--grid { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
.stats--grid .stat { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--hair-strong); }
.stats--grid .stat__num { font-size: clamp(4rem, 7vw, 7rem); }
@media (min-width: 1100px) {
  .stats--grid { grid-template-columns: repeat(2, 1fr); }
  .stats--grid .stat { padding: 26px 0; border-right: 0; }
}
.cls--compact .cls__row { padding: 14px 0; }
.cls--compact .cls__name { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.faces--strip { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .faces--strip { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) {
  .faces--strip { grid-template-columns: repeat(8, 1fr); gap: 10px; padding-bottom: 0; }
  .faces--strip .face:nth-child(even) { margin: 32px 0 -32px; }
  .faces--strip .face__name { font-size: 1.25rem; }
}
.lsc--teaser { padding-block: clamp(72px, 9vw, 130px); }
.lsc--teaser .lsc__poster { width: min(100%, 360px); }
.summary__grid { display: grid; gap: 40px; margin-top: clamp(32px, 4vw, 56px); align-items: start; }
.plans--mini .plan { padding: 20px 20px 18px; }
.plans--mini .plan__price { font-size: clamp(3.6rem, 6vw, 5rem); }
.plan--visit { background: var(--ocean); }
.plan--visit .plan__name, .plan--visit .plan__price small { color: var(--bone); }
@media (min-width: 980px) { .summary__grid { grid-template-columns: 1.3fr 1fr; } .plans--mini { grid-template-columns: repeat(3, 1fr); } }

/* Precios: FAQ --------------------------------------------------------- */
.faq__grid { display: grid; gap: 40px; }
.faq__item { border-top: 1px solid var(--hair-strong); }
.faq__item:last-child { border-bottom: 1px solid var(--hair-strong); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--mono); color: var(--red); font-size: 1.6rem; transition: transform 0.3s var(--ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 20px; max-width: 60ch; color: var(--muted); }
@media (min-width: 980px) { .faq__grid { grid-template-columns: 1fr 1.4fr; } }

/* Horario ----------------------------------------------------------------- */
.board--top { grid-template-columns: 1fr; }
.book p { color: var(--muted); max-width: 46ch; margin: 20px 0 24px; }
.book__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 980px) { .board--top { grid-template-columns: 0.9fr 1.1fr; align-items: center; } }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 18px; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--slot); vertical-align: -1px; }
.slot--crossfit { --slot: var(--red); }
.slot--funcional { --slot: var(--lava); }
.slot--halterofilia { --slot: #b8860b; }
.slot--skills { --slot: var(--ocean); }
.slot--team-wod { --slot: #6b2fa0; }
.week { display: grid; gap: 10px; }
.day { background: var(--card); border: 1px solid var(--hair); }
.day__name {
  display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hair);
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; line-height: 1;
}
.day__name span { color: var(--red); }
.day.is-today { outline: 3px solid var(--red); outline-offset: -3px; }
.day.is-today .day__name::after { content: "Hoy"; margin-left: auto; padding: 3px 8px; background: var(--red); color: var(--bone); font-family: var(--mono); font-size: 0.7rem; }
.day__list { padding: 8px 10px 12px; display: grid; gap: 4px; }
.slot { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; padding: 6px 8px; border-left: 4px solid var(--slot, var(--red)); background: rgba(10, 8, 7, 0.03); font-size: 0.9rem; }
.slot__time { font-family: var(--mono); font-weight: 700; }
.slot__cls { font-weight: 600; }
.slot.is-next { background: var(--lava); color: var(--bone); }
/* Columnas que pueden encoger: nombres largos (p. ej. «Weightlifting») no empujan la tarjeta fuera */
.week { grid-template-columns: minmax(0, 1fr); }
.day { min-width: 0; }
.slot__cls { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .day__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot { grid-template-columns: 44px minmax(0, 1fr); gap: 6px; padding: 6px; }
}
@media (min-width: 640px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .week { grid-template-columns: repeat(6, minmax(0, 1fr)); } .slot { grid-template-columns: 1fr; gap: 0; } }
.extra { display: grid; gap: 12px; margin-top: 28px; }
.extra__item { padding: 22px; background: var(--card); border-left: 4px solid var(--red); }
.extra__item h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 1.8rem; line-height: 1; margin-bottom: 10px; }
.extra__item p { margin: 0 0 8px; color: var(--muted); }
.pending { padding: 8px 12px; background: #fff3cd; color: #5c4400; font-size: 0.85rem; border-left: 4px solid #b8860b; }
@media (min-width: 900px) { .extra { grid-template-columns: repeat(3, 1fr); } }

/* Galería ----------------------------------------------------------------- */
.gal__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 0 18px; border: 2px solid var(--lava); background: transparent; color: var(--lava); cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.chip[aria-pressed="true"], .chip:hover { background: var(--lava); color: var(--bone); }
.gal { columns: 2 160px; column-gap: 10px; }
.gal__item { break-inside: avoid; margin-bottom: 10px; }
.gal__item[hidden] { display: none; }
.gal__link { position: relative; display: block; overflow: hidden; background: var(--hair); }
.gal__link img { width: 100%; transition: transform 0.8s var(--ease-out), filter 0.5s; }
.gal__link:hover img, .gal__link:focus-visible img { transform: scale(1.05); }
.gal__cat {
  position: absolute; left: 8px; top: 8px; padding: 3px 8px; background: #000; color: var(--bone);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.gal__count { margin-top: 16px; color: var(--muted); font-size: 0.85rem; }
@media (min-width: 760px) { .gal { columns: 3; } }
@media (min-width: 1100px) { .gal { columns: 4; column-gap: 14px; } .gal__item { margin-bottom: 14px; } }

/* Visor (lightbox) */
.lightbox { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; background: rgba(0, 0, 0, 0.94); color: var(--bone); padding: 64px 16px; }
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: min(1400px, 100%); }
.lightbox__fig img { max-width: 100%; max-height: calc(100svh - 170px); width: auto; object-fit: contain; }
.lightbox__cap { font-family: var(--mono); font-size: 0.85rem; color: var(--ash); text-align: center; }
.lightbox__btn {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center; background: #000; color: var(--bone);
  border: 2px solid var(--line-strong); font-size: 1.4rem; cursor: pointer;
}
.lightbox__btn:hover { background: var(--red); border-color: var(--red); }
.lightbox__close { top: 12px; right: 12px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox :focus-visible { outline: 3px solid var(--red-hot); outline-offset: 3px; }
@media (max-width: 599px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: 12px; transform: none; }
}
html.lb-open { overflow: hidden; }

/* Campeonato ---------------------------------------------------------- */
.lsc--page .lsc__lead { margin-bottom: 0; }
.lsc--page .lsc__lead + .lsc__lead { margin-top: 16px; }
.trophies { display: grid; gap: 14px; }
.trophy { position: relative; padding: 28px 24px 24px; background: var(--lava); color: var(--bone); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.trophy__year { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(5rem, 10vw, 8rem); line-height: 0.8; color: var(--red-hot); margin-bottom: 14px; }
.trophy__name { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 0.95; margin-bottom: 8px; }
.trophy p { margin: 0; color: var(--ash); font-family: var(--mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
@media (min-width: 900px) { .trophies { grid-template-columns: 1fr 1fr; } }
.posters__wide { margin-top: 32px; }
.posters__wide img { width: 100%; }
.posters__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }
.posters__cta p { margin: 0; max-width: 50ch; color: var(--muted); }