/* ========================================
   HOME.CSS - ESTILOS EXCLUSIVOS DE LA PAGINA DE INICIO
   Noche bajo los reflectores + líneas de cancha
   ======================================== */

.pagina-inicio {
    --noche: #070d0a; --tinta: #0f2416; --reflector: #f5f8ee; --halo: #d7f06a; --gris: #b3c0b6;
    background: var(--noche); color: var(--reflector); font-family: Archivo, sans-serif; overflow-x: hidden;
}
.pagina-inicio::before { display: none; }
.pagina-inicio a:focus-visible { outline: 3px solid var(--halo); outline-offset: 3px; }

/* Portada: foto nocturna con la cancha marcada encima */
.portada { position: relative; overflow: hidden; min-height: min(88svh, 860px); display: grid; align-items: end;
    padding: clamp(56px, 10vh, 120px) clamp(16px, 6vw, 88px) clamp(40px, 8vh, 96px);
    background: linear-gradient(90deg, rgba(7,13,10,.75) 0%, rgba(7,13,10,.1) 70%), linear-gradient(180deg, rgba(7,13,10,.1) 0%, rgba(7,13,10,.35) 50%, var(--noche) 100%), url("/src/Public/uploads/cancha-2.jpg") center 40% / cover; }
.portada svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.portada svg * { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: marcar 1.8s .1s ease-out forwards; }
@keyframes marcar { to { stroke-dashoffset: 0; } }
.portada-texto { position: relative; }
.portada h1 { font-family: "Big Shoulders Display", sans-serif; font-weight: 900; font-size: clamp(3rem, 11vw, 8.6rem); line-height: .86; max-width: 9ch; text-wrap: balance; animation: encender 1.1s .3s ease-out; }
/* Arranca y termina visible: si el navegador pausa la animación, el título igual se lee */
@keyframes encender { 0%, 100% { opacity: 1; } 12% { opacity: .15; } 24% { opacity: .9; } 34% { opacity: .3; } 50% { opacity: 1; } }
.portada p { font-size: clamp(1.02rem, 2.4vw, 1.18rem); color: #dde4de; max-width: 40ch; margin: 22px 0 30px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Botones con efecto: barrido de reflector al pasar y onda al tocar (home.js) */
.btn-fx { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
    font: 700 1rem Archivo, sans-serif; font-stretch: 110%; border-radius: 999px; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, color .3s; }
.btn-fx::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); }
.btn-fx::after { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: currentColor; opacity: 0; }
.btn-fx.tap::after { animation: onda .6s ease-out; }
@keyframes onda { from { opacity: .35; transform: scale(0); } to { opacity: 0; transform: scale(24); } }
.btn-fx:active { transform: scale(.96); }
.btn-luz { background: var(--halo); color: var(--noche); box-shadow: 0 6px 0 -2px #8fa63a; }
.btn-borde { color: var(--reflector); box-shadow: inset 0 0 0 1.5px rgba(245,248,238,.6); background: linear-gradient(var(--reflector), var(--reflector)) bottom / 100% 0 no-repeat;
    transition: background-size .35s cubic-bezier(.2,.8,.2,1), color .3s, transform .25s; }
.btn-borde::before { background: linear-gradient(105deg, transparent 35%, rgba(215,240,106,.5) 50%, transparent 65%); }
@media (hover: hover) {
    .btn-fx:hover::before { transform: translateX(120%); transition: transform .7s ease; }
    .btn-luz:hover { transform: translateY(-3px); box-shadow: 0 9px 0 -2px #8fa63a; }
    .btn-borde:hover { background-size: 100% 100%; color: var(--noche); }
}

/* Accesos rápidos */
.accesos { position: relative; max-width: 1120px; margin: -28px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--tinta); border-radius: 14px; overflow: hidden; }
.accesos a { position: relative; padding: 28px clamp(18px, 3vw, 32px); color: var(--reflector); text-decoration: none; border-right: 1px solid rgba(255,255,255,.1); transition: background .2s; }
.accesos a:last-child { border-right: 0; }
.accesos h2 { font-size: 1.3rem; font-stretch: 115%; font-weight: 800; margin-bottom: 6px; }
.accesos p { color: var(--gris); }
.accesos span { display: inline-block; margin-top: 14px; color: var(--halo); font-weight: 700; background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat; padding-bottom: 3px; transition: background-size .35s ease; }
.accesos a:active { background: #173622; }
@media (hover: hover) { .accesos a:hover { background: #173622; } .accesos a:hover span { background-size: 100% 2px; } }
@media (max-width: 760px) {
    .accesos { grid-template-columns: 1fr; margin: 0 16px; }
    .accesos a { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .accesos a:last-child { border-bottom: 0; }
}

/* Propuestas del complejo */
.complejo { max-width: 1120px; margin: 0 auto; padding: 72px clamp(16px, 5vw, 48px) 88px; }
.complejo h2 { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.complejo > p { color: var(--gris); margin: 10px 0 28px; }
.fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.fotos a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; color: var(--reflector); text-decoration: none; }
.fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.fotos div { position: absolute; inset: auto 0 0; padding: 60px 22px 20px; background: linear-gradient(transparent, rgba(7,13,10,.92)); }
.fotos h3 { font-family: "Big Shoulders Display", sans-serif; font-size: 2rem; line-height: 1; }
.fotos p { color: #d3dbd5; }
@media (hover: hover) { .fotos a:hover img { transform: scale(1.05); } }

.pie { margin-top: auto; text-align: center; color: #97a39a; padding: 28px 16px; border-top: 1px solid #1a231e; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
    .pagina-inicio *, .pagina-inicio *::before, .pagina-inicio *::after { animation: none !important; transition: none !important; }
    .portada svg * { stroke-dashoffset: 0; }
}

.clima { max-width: 1120px; margin: 0 auto; padding: 56px clamp(16px, 5vw, 48px) 0; }
.clima h2 { font-family: "Big Shoulders Display", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1; margin-bottom: 18px; }
.clima ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.clima li { display: grid; gap: 4px; padding: 16px; border: 1px solid rgba(245, 248, 238, .18); border-radius: 12px; background: var(--tinta); }
.clima li strong { color: var(--halo); }
.clima li span { color: var(--reflector); }
.clima li time { color: var(--gris); font-size: .85rem; }