/* =====================================================
   Bestia Fit Gym — página de inicio
   Identidad: negro + rosado Bestia, blanco en títulos y lima solo en detalles.
   Tipografía de títulos: Anton (alojada en /assets/fonts, licencia OFL).
   Se carga solo en index.php (ver $estilosExtra).
   ===================================================== */
@font-face {
    font-family: "Anton";
    src: url("../fonts/anton.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}

.inicio {
    --rosa: #e2408c;
    --rosa-fuerte: #ff4fa0;
    --lima: #d3f15d;
    --negro: #070707;
    --titulos: "Anton", "Arial Narrow", Impact, sans-serif;
}
[data-theme="claro"] .inicio { --rosa: #cf2a78; --rosa-fuerte: #b81f68; }

.inicio .rosa { color: var(--rosa); }
.inicio main { overflow-x: clip; }

/* ---------- Botones ---------- */
.inicio .boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font: 400 1.05rem/1 var(--titulos); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none;
    padding: 15px 26px; border-radius: 6px; border: 2px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.inicio .boton:hover { transform: translateY(-3px); }
.inicio .boton:active { transform: translateY(0); }
.inicio .boton:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
.inicio .boton-xl { font-size: 1.3rem; padding: 20px 34px; }
.inicio .boton-ancho { width: 100%; }
.inicio .boton-rosa { background: var(--rosa); color: #fff; box-shadow: 0 8px 26px rgba(226, 64, 140, .35); }
.inicio .boton-rosa:hover { background: var(--rosa-fuerte); box-shadow: 0 12px 34px rgba(226, 64, 140, .55); }
.inicio .boton-linea { background: transparent; color: var(--color-titulo); border-color: currentColor; }
.inicio .boton-linea:hover { background: var(--color-titulo); color: var(--color-fondo); }
.inicio .boton-whatsapp { background: #25d366; color: #06301a; box-shadow: 0 8px 26px rgba(37, 211, 102, .3); }
.inicio .boton-whatsapp:hover { box-shadow: 0 12px 34px rgba(37, 211, 102, .5); }

/* ---------- Portada ---------- */
.portada {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: min(calc(100vh - 73px), 820px); display: flex; align-items: flex-end;
    background: var(--negro); color: #fff;
}
.portada-foto {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -2;
    animation: portada-zoom 14s ease-out both;
}
.portada::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, rgba(7,7,7,.92) 0%, rgba(7,7,7,.62) 45%, rgba(7,7,7,.15) 100%),
        linear-gradient(0deg, rgba(7,7,7,.95) 0%, rgba(7,7,7,0) 45%);
}
.portada-contenido { width: 100%; padding-top: 48px; padding-bottom: 56px; }
.portada-logo { width: clamp(96px, 12vw, 150px); height: auto; display: block; margin-bottom: 8px; filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)); animation: sube .7s ease-out both; }
.portada-titulo {
    font: 400 clamp(3.4rem, 11.5vw, 9.5rem)/.92 var(--titulos); text-transform: uppercase; letter-spacing: .5px;
    margin: 0 0 18px; color: #fff;
}
.portada-titulo .linea { display: block; overflow: hidden; padding-top: .06em; }
.portada-titulo .linea > span { display: inline-block; animation: sube-linea .8s cubic-bezier(.2,.8,.2,1) both; }
.portada-titulo .linea:nth-child(2) > span { animation-delay: .14s; }
.portada-titulo .rosa { color: var(--rosa-fuerte); text-shadow: 0 0 42px rgba(255, 79, 160, .45); }
[data-theme="claro"] .portada-titulo .rosa { color: #ff4fa0; }
.portada-bajada { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 30em; color: #e9e9e9; margin: 0 0 26px; animation: sube .7s .3s ease-out both; }
.portada-acciones { display: flex; gap: 14px; flex-wrap: wrap; animation: sube .7s .42s ease-out both; }
.portada .boton-linea, .cierre .boton-linea { color: #fff; }
.portada .boton-linea:hover, .cierre .boton-linea:hover { background: #fff; color: #070707; }
.portada .estado-gym { margin: 22px 0 0; background: rgba(0,0,0,.55); animation: sube .7s .55s ease-out both; }
.portada .estado-gym.abierto { color: #5fe08f; }
.portada .estado-gym.cerrado { color: #ff8fc0; }

@keyframes portada-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sube-linea { from { transform: translateY(105%); } to { transform: none; } }

/* ---------- Cinta en movimiento ---------- */
.cinta { background: var(--rosa); color: #0a0a0a; overflow: hidden; border-block: 3px solid #0a0a0a; }
.cinta-pista { display: flex; align-items: center; gap: 28px; width: max-content; padding: 12px 0; animation: cinta 32s linear infinite; }
.cinta span { font: 400 1.25rem/1 var(--titulos); text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap; }
.cinta i { width: 10px; height: 10px; background: #0a0a0a; transform: rotate(45deg); flex: 0 0 auto; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Bloques y titulares ---------- */
.bloque { padding: clamp(56px, 8vw, 96px) 0; }
.bloque-alt { background: var(--color-fondo-alt); border-block: 1px solid var(--color-borde); }
.bloque-cabecera { max-width: 640px; margin: 0 0 36px; }
.bloque-cabecera p { color: var(--color-texto-suave); margin: 0; font-size: 1.05rem; }
.bloque-cabecera strong { color: var(--rosa); }
.inicio .titular {
    font: 400 clamp(2.3rem, 5.6vw, 4.2rem)/1 var(--titulos); text-transform: uppercase; letter-spacing: .5px;
    color: var(--color-titulo); margin: 0 0 14px;
}
.inicio .titular::after { content: ""; display: block; width: 72px; height: 6px; background: var(--rosa); margin-top: 16px; }
.inicio .titular-chico { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }

/* ---------- Planes ---------- */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; align-items: stretch; }
.plan {
    position: relative; display: flex; flex-direction: column;
    background: var(--color-fondo-card); border: 1px solid var(--color-borde); border-top: 6px solid var(--color-borde);
    border-radius: 10px; padding: 28px 26px 22px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.plan:hover { transform: translateY(-6px); border-color: var(--rosa); box-shadow: 0 18px 44px rgba(226, 64, 140, .22); }
.plan-destacado { border-color: var(--rosa); box-shadow: 0 0 0 1px var(--rosa), 0 18px 50px rgba(226, 64, 140, .25); }
.plan-sello {
    position: absolute; top: -17px; left: 22px; background: var(--lima); color: #0a0a0a;
    font: 400 .9rem/1 var(--titulos); letter-spacing: 1px; text-transform: uppercase; padding: 7px 12px; border-radius: 4px;
}
.plan-nombre { font: 400 2rem/1 var(--titulos); text-transform: uppercase; letter-spacing: .5px; color: var(--color-titulo); margin: 0 0 6px; }
.plan-dias { margin: 0 0 16px; color: var(--color-texto-suave); }
.plan-dias strong { color: var(--rosa); font-size: 1.15em; }
.plan-precio { font: 400 clamp(3rem, 6vw, 3.8rem)/1 var(--titulos); color: var(--color-titulo); margin: 0 0 14px; }
.plan-precio small { font: 400 .95rem/1 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--color-texto-suave); letter-spacing: 0; }
.plan-texto { margin: 0 0 12px; }
.plan-lista { list-style: none; padding: 0; margin: 0 0 22px; color: var(--color-texto-suave); }
.plan-lista li { position: relative; padding: 5px 0 5px 26px; }
.plan-lista li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 12px; height: 7px; border-left: 3px solid var(--rosa); border-bottom: 3px solid var(--rosa); transform: rotate(-45deg); }
.plan-accion { margin-top: auto; }
.plan-detalle { display: block; text-align: center; margin-top: 12px; font-size: .9rem; color: var(--color-texto-suave); }
.plan-detalle:hover { color: var(--rosa); }

.pase {
    display: flex; align-items: center; justify-content: center; gap: 12px 20px; flex-wrap: wrap;
    margin: 30px 0 0; padding: 18px 22px; border: 2px dashed var(--color-borde); border-radius: 10px; text-align: center;
}
.pase span { color: var(--color-texto-suave); }
.pase strong { font: 400 1.6rem/1 var(--titulos); text-transform: uppercase; color: var(--color-titulo); letter-spacing: .5px; }
.pase .boton { padding: 11px 18px; font-size: .95rem; }
.inicio .link-flecha { color: var(--color-texto-suave); }
.inicio .link-flecha:hover { color: var(--rosa); }

/* ---------- Frases grandes (se desplazan con el scroll) ---------- */
.frase { background: var(--negro); padding: clamp(40px, 6vw, 76px) 0; overflow: hidden; border-block: 1px solid #1c1c1c; }
.frase-linea {
    margin: 0; white-space: nowrap; text-align: center; will-change: transform;
    font: 400 clamp(2.6rem, 10.5vw, 9rem)/1 var(--titulos); text-transform: uppercase; letter-spacing: 1px; color: #fff;
    transform: translateX(var(--x, 0));
}
.frase-rosa { color: transparent; -webkit-text-stroke: 2px var(--rosa-fuerte); }
[data-theme="claro"] .frase-rosa { -webkit-text-stroke-color: #ff4fa0; }
@supports not (-webkit-text-stroke: 2px #000) { .frase-rosa { color: var(--rosa-fuerte); } }

/* ---------- Por qué Bestia Fit ---------- */
.porque { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.porque-foto { position: relative; }
.porque-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; display: block; }
.porque-foto::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 4px solid var(--rosa); border-radius: 10px; z-index: 0; }
.porque-foto img { position: relative; z-index: 1; }
.porque-lista { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.porque-lista li { display: flex; gap: 14px; align-items: flex-start; }
.porque-lista svg { flex: 0 0 auto; width: 46px; height: 46px; padding: 9px; color: var(--rosa); border: 2px solid var(--rosa); border-radius: 8px; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.porque-lista li:hover svg { background: var(--rosa); color: #fff; transform: rotate(-6deg); }
.porque-lista h3 { margin: 2px 0 4px; font-size: 1.08rem; color: var(--color-titulo); }
.porque-lista p { margin: 0; color: var(--color-texto-suave); font-size: .95rem; }

/* ---------- Galería en mosaico ---------- */
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 230px); grid-auto-flow: dense; gap: 12px; }
.pieza {
    position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 8px; cursor: zoom-in;
    background: #0d0d0d; color: #fff; font: inherit; text-align: left; box-shadow: none;
}
.inicio .pieza:hover, .inicio .pieza:focus-visible { transform: none; box-shadow: none; }
.pieza-grande { grid-column: span 2; grid-row: span 2; }
.pieza-ancha { grid-column: span 2; }
.pieza-alta { grid-row: span 2; }
.pieza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.pieza:hover img, .pieza:focus-visible img { transform: scale(1.07); filter: saturate(1.15); }
.pieza:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
.pieza::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,7,7,.88) 0%, rgba(7,7,7,0) 55%); transition: background-color .3s ease; }
.pieza:hover::after { background-color: rgba(226, 64, 140, .16); }
.pieza-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 16px; display: block; }
.pieza-texto strong { display: block; font: 400 1.25rem/1.1 var(--titulos); text-transform: uppercase; letter-spacing: .6px; }
.pieza-texto span { display: block; font-size: .85rem; color: #dcdcdc; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease, margin .35s ease; }
.pieza:hover .pieza-texto span, .pieza:focus-visible .pieza-texto span { max-height: 6em; opacity: 1; margin-top: 6px; }
.pieza-grande .pieza-texto strong { font-size: 1.9rem; }

/* ---------- Cierre ---------- */
.cierre { position: relative; isolation: isolate; overflow: hidden; background: var(--negro); color: #fff; text-align: center; padding: clamp(72px, 11vw, 140px) 0; }
.cierre-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.4); }
.cierre::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 120%, rgba(226,64,140,.5) 0%, rgba(7,7,7,.9) 60%), rgba(7,7,7,.72); }
.cierre-titulo { font: 400 clamp(2.8rem, 8.5vw, 7rem)/.95 var(--titulos); text-transform: uppercase; margin: 0 auto 16px; max-width: 12em; color: #fff; }
.cierre-titulo .rosa { color: var(--rosa-fuerte); display: block; }
[data-theme="claro"] .cierre-titulo .rosa { color: #ff4fa0; }
.cierre p { color: #e2e2e2; font-size: 1.15rem; margin: 0 0 28px; }
.cierre .portada-acciones { justify-content: center; animation: none; }

/* ---------- Aparición al hacer scroll (solo si hay JavaScript) ---------- */
.con-js [data-aparece] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 80ms); }
.con-js [data-aparece].visible { opacity: 1; transform: none; }
.con-js .plan[data-aparece].visible:hover { transform: translateY(-6px); transition-delay: 0s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .porque { grid-template-columns: 1fr; }
    .porque-foto img { aspect-ratio: 16 / 10; }
    .porque-foto::before { inset: 12px -10px -12px 10px; }
    .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 38vw, 220px); gap: 8px; }
}
@media (max-width: 700px) {
    .portada { min-height: calc(100svh - 62px); }
    .portada::after { background: linear-gradient(0deg, rgba(7,7,7,.96) 0%, rgba(7,7,7,.55) 55%, rgba(7,7,7,.2) 100%); }
    .portada-contenido { padding-bottom: 36px; }
    .portada-acciones .boton { flex: 1 1 100%; }
    .inicio .boton-xl { font-size: 1.15rem; padding: 18px 22px; }
    .porque-lista { grid-template-columns: 1fr; }
    .pieza-texto span { display: none; }
    .pieza-texto strong, .pieza-grande .pieza-texto strong { font-size: 1.05rem; }
    .pieza-grande .pieza-texto strong { font-size: 1.4rem; }
    .frase-rosa { -webkit-text-stroke-width: 1.5px; }
    .cinta span { font-size: 1.05rem; }
}

/* ---------- Menos movimiento si el visitante lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
    .portada-foto, .portada-logo, .portada-titulo .linea > span, .portada-bajada, .portada-acciones, .portada .estado-gym, .cinta-pista { animation: none; }
    .con-js [data-aparece] { opacity: 1; transform: none; transition: none; }
    .frase-linea { transform: none; }
    .inicio .boton, .plan, .pieza img { transition: none; }
}

/* Que el menú fijo no tape el título al saltar a una sección (#planes, #contacto…) */
.inicio .bloque, .inicio .cierre { scroll-margin-top: 72px; }