@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Archivo:wdth,wght@100..125,400..800&display=swap");
/* ========================================
   GLOBAL.CSS - ESTILOS BASE Y VARIABLES
   ======================================== */

:root {
    /* Colores */
    --color-primary: #333;
    --color-secondary: #666;
    --color-text: #333;
    --color-border: #ccc;
    --color-bg: #eee;
    --color-card: #fff;
    --color-accent: #0066cc;
    --color-hover: #0052a3;

    /* Espaciados */
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* Sombras */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    font-family: Arial, sans-serif;
    background-color: #1c1c1c;
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Foto real del complejo, difuminada, de fondo en toda la pagina */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/src/Public/uploads/hero-cancha.jpg");
    background-size: cover;
    background-position: center;
    filter: blur(6px) brightness(0.45);
    transform: scale(1.08);
    z-index: -1;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    flex: 1;
    width: 100%;
}

/* ========================================
   ANIMACIONES COMPARTIDAS
   ======================================== */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ========================================
   TEMA COMPLEJO RD: noche bajo los reflectores
   (mismo lenguaje que la portada; pisa los valores de arriba)
   ======================================== */
:root {
    --noche: #070d0a;
    --tinta: #0f2416;
    --reflector: #f5f8ee;
    --halo: #d7f06a;
    --halo-sombra: #8fa63a;
    --texto: #14261a;
    --texto-suave: #4f6157;
    --fuente: Archivo, Arial, sans-serif;
    --fuente-titulo: "Big Shoulders Display", "Arial Narrow", sans-serif;

    --color-primary: var(--tinta);
    --color-secondary: var(--texto-suave);
    --color-text: var(--texto);
    --color-accent: #24683f;
    --color-hover: #174a2b;
    --color-border: #d3ddd5;
}

body { font-family: var(--fuente); background-color: var(--noche); }
body::before { filter: blur(8px) brightness(.3) saturate(.75); }
h1, h2 { font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: .01em; line-height: 1.08; }
::selection { background: var(--halo); color: var(--noche); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--halo); outline-offset: 3px; }

/* Botón principal: lima, con barrido de reflector al pasar y onda al tocar (script en el menú) */
.btn-primary, .login-box button, .btn-reservar, .servicio-boton {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--halo); color: var(--noche); border: 0; border-radius: 999px;
    font-family: var(--fuente); font-weight: 700; text-decoration: none; cursor: pointer;
    box-shadow: 0 5px 0 -2px var(--halo-sombra);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .25s;
}
:is(.btn-primary, .login-box button, .btn-reservar, .servicio-boton)::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
    transform: translateX(-120%);
}
:is(.btn-primary, .login-box button, .btn-reservar, .servicio-boton, .btn-fx)::after {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: var(--x, 50%); top: var(--y, 50%); width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-radius: 50%; background: currentColor; opacity: 0;
}
.tap::after { animation: onda-toque .6s ease-out; }
@keyframes onda-toque { from { opacity: .35; transform: scale(0); } to { opacity: 0; transform: scale(24); } }
:is(.btn-primary, .login-box button, .btn-reservar, .servicio-boton):active { transform: scale(.96); }
:is(.btn-primary, .login-box button, .btn-reservar, .servicio-boton):disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
@media (hover: hover) {
    :is(.btn-primary, .login-box button, .btn-reservar, .servicio-boton):hover { background: var(--halo); color: var(--noche); transform: translateY(-2px); box-shadow: 0 7px 0 -2px var(--halo-sombra); }
    :is(.btn-primary, .login-box button, .btn-reservar, .servicio-boton):hover::before { transform: translateX(120%); transition: transform .7s ease; }
}

/* Botón secundario sobre fondo oscuro (volver, acciones de menor peso) */
.btn-borde-claro { color: var(--reflector); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(245,248,238,.6); transition: background-color .25s, color .25s; }
.btn-borde-claro:hover { background: var(--reflector); color: var(--noche); }

/* Enlaces dentro de cajas claras */
:is(.panel, .card) a:not(.btn) { color: #24683f; text-underline-offset: 3px; }

/* Pie compartido */
.footer { font-family: var(--fuente); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}