/*
 * STYLE.CSS v13.0 - ¡¡EL PUTO ANTI-FILEMÓN!!
 * ¡¡GENTELMAYER AL MANDO!!
 */

/* ¡¡¡PRIMERO, FUNDIDO A NEGRO!!! */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Arial', sans-serif; /* Una letra base que se lea */
    background-color: #111; /* ¡¡NEGRO GARAJE!! */
    color: #f5f5f5; /* ¡Blanco hueso! */
    scroll-behavior: smooth; /* Pa' que los enlaces del menú bajen suave */
}

/* ¡¡LAS LETRAS MACARRAS (TÍTULOS)!! */
h1, h2 {
    font-family: 'Oswald', 'Impact', sans-serif; /* ¡¡LETRA CON COJONES!! */
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    color: #FFFFFF; /* ¡BLANCO PURO PA' QUE REVIENTE! */
    margin-bottom: 30px;
}

h2 {
    font-size: 2.5em; /* 2.5 veces el tamaño normal */
    border-bottom: 2px solid #FFFFFF; /* Una puta línea debajo */
    display: inline-block; /* Pa' que la línea no ocupe todo */
    padding-bottom: 10px;
}

/* LA CABECERA (Header) - ¡¡FIJA AHÍ ARRIBA!! */
.main-header {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo negro pero un pelín transparente */
    backdrop-filter: blur(5px); /* ¡Un efecto de cristal borroso que te cagas! */
    border-bottom: 1px solid #444; /* Línea pa' separar */
    padding: 10px 30px;
    display: flex;
    justify-content: space-between; /* Logo a un lao, menú al otro */
    align-items: center;
    position: fixed; /* ¡¡QUE SE QUEDE QUIETA ARRIBA!! */
    width: 100%;
    top: 0;
    z-index: 1000; /* Por encima de todo */
    box-sizing: border-box; /* Pa' que el padding no joda el ancho */
}

/* EL LOGO DE ARRIBA */
.logo-container {
    display: flex;
    align-items: center;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    text-decoration: none;
    color: #f5f5f5;
}

.logo-peque {
    height: 40px; /* Tamaño del logo en la barra */
    margin-right: 15px;
    filter: brightness(1.2); /* ¡Pa' que brille un poco más! */
}

/* EL MENÚ (NAV) */
.main-nav {
    flex-grow: 1; /* ¡¡Pa' que empuje a los iconos!! */
    text-align: right; /* ¡¡Que se pegue a los iconos!! */
}
.main-nav a {
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    color: #f5f5f5;
    margin-left: 20px;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease; /* ¡Efecto guapo al pasar el ratón! */
}
.main-nav a:hover {
    color: #d81b60; /* ¡¡UN PUTO ROSA/FUCSIA MACARRA!! */
}

/* ======================================= */
/* ¡¡LOS PUTOS ICONOS EN LA CABECERA!! */
/* ======================================= */
.header-social {
    display: flex;
    align-items: center;
    padding-left: 25px; /* ¡¡Un hueco pa' separar!! */
    border-left: 1px solid #444; /* ¡¡Una línea to guapa!! */
    margin-left: 20px;
}
.header-social a {
    font-size: 1.8em; /* ¡Un poco más peques! */
    color: #aaa;
    margin-left: 20px;
    transition: all 0.3s ease;
}
.header-social a:hover {
    color: #d81b60; /* ¡¡El puto fucsia!! */
    transform: scale(1.1);
}


/* LA SECCIÓN "HÉROE" - ¡¡LA PUTA CALAVERA GIGANTE!! */
#hero {
    height: 100vh; /* ¡¡Que ocupe toda la puta pantalla al entrar!! */
    background-color: #0a0a0a; /* Un negro más negro aún */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 2px solid #444;
}

.hero-content {
    animation: fadeIn 2s ease-in; /* ¡Efecto de aparición! */
}

.logo-hero {
    max-width: 300px; /* ¡¡La calavera grande!! */
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3)); /* ¡¡Un puto brillo alrededor!! */
} 

#hero h1 {
    font-size: 3em;
    color: #f5f5f5;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* ¡Brillo en las letras! */
}

/* LAS SECCIONES (Bolos, Música...) */
.seccion {
    padding: 80px 30px;
    text-align: center;
    max-width: 900px; /* Que no se vaya a los laos en pantallas tochas */
    margin: 0 auto;
}

/* ¡¡¡LA PUTA LISTA DE BOLOS!!! */
#bolos {
    background-color: #0a0a0a;
}

.lista-bolos {
    list-style: none; /* ¡¡Fuera los puntitos de mierda!! */
    padding: 0;
    margin: 40px auto 0 auto;
    width: 100%;
}

.lista-bolos li {
    background-color: #1c1c1c; /* Fondo de cada bolo */
    border-left: 5px solid #d81b60; /* ¡¡La línea fucsia macarra!! */
    margin-bottom: 15px;
    padding: 20px;
    display: flex;
    flex-wrap: wrap; /* Pa' que se reordene en móviles */
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.lista-bolos li:hover {
    transform: scale(1.02); /* ¡¡Que crezca un poco al pasar el ratón!! */
    background-color: #252525;
}

.lista-bolos .fecha {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #f5f5f5;
    flex-basis: 120px; /* Ancho fijo pa' la fecha */
}

.lista-bolos .sala {
    font-size: 1.4em;
    font-weight: 700;
    color: #f5f5f5;
    flex-grow: 1; /* Que ocupe el hueco */
    margin: 0 20px;
}

.lista-bolos .ciudad {
    font-size: 1.2em;
    color: #aaa;
    flex-basis: 150px;
}

/* ¡¡EL PUTO BOTÓN DE ENTRADAS!! */
.entradas-btn {
    text-decoration: none;
    background-color: #d81b60; /* ¡¡FUCSIA!! */
    color: #FFFFFF;
    padding: 10px 20px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.entradas-btn:hover {
    background-color: #ff4081; /* Fucsia más brillante */
}

/* ¡¡BOTÓN AGOTADO!! */
.entradas-btn.sold-out {
    background-color: #555; /* GRIS MUERTO */
    color: #aaa;
    pointer-events: none; /* ¡Que no se pueda pinchar! */
}

/* ================================================== */
/* ¡¡EL HISTORIAL!! ¡¡CON LA PUTA CUARTA COLUMNA!! */
/* ================================================== */
.seccion-historial {
    background-color: #1a1a1a; /* ¡¡Un fondo gris oscuro pa' diferenciar!! */
}

.subtitulo-historial {
    font-size: 1.2em;
    color: #aaa;
    margin-top: -20px;
    margin-bottom: 30px;
    font-style: italic;
}

.lista-bolos-pasados {
    display: none; /* ¡¡A tomar por culo!! */
}

.lista-historial {
    list-style: none; /* ¡¡Fuera los puntitos de mierda!! */
    padding: 0;
    margin: 40px auto 0 auto;
    width: 100%;
    max-width: 800px; /* ¡¡Pa' que no se desparrame!! */
}

.lista-historial li {
    background-color: #1a1a1a; /* Un gris más oscuro que los bolos nuevos */
    border-left: 5px solid #555; /* ¡¡Gris "histórico", coño!! */
    margin-bottom: 12px;
    padding: 15px 20px;
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: background-color 0.2s ease;
}

.lista-historial li:hover {
    background-color: #252525;
}

.lista-historial .fecha-historial {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    color: #bbb;
    flex-basis: 120px; 
}

.lista-historial .sala-historial {
    font-size: 1.2em;
    font-weight: 700;
    color: #eee; /* ¡¡La sala se tiene que leer de puta madre!! */
    flex-grow: 1;
    margin: 0 15px;
}

.lista-historial .ciudad-historial {
    font-size: 1.1em;
    color: #999;
    font-style: italic;
    flex-basis: 130px; 
    text-align: right;
    margin-right: 15px;
}

.lista-historial .tipo-historial {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    color: #333; /* ¡Letra negra! */
    background-color: #888; /* ¡Un fondo gris to' guapo! */
    padding: 4px 10px;
    border-radius: 4px;
    flex-basis: 130px; /* Ancho fijo */
    text-align: center;
}

.lista-historial .tipo-historial.privado {
     background-color: #d81b60; /* ¡¡El fucsia macarra!! */
     color: #fff;
}
.lista-historial .tipo-historial.sala {
     background-color: #777;
     color: #fff;
}
.lista-historial .tipo-historial.fiestas {
     background-color: #aaa;
     color: #222;
}

/* ======================================= */
/* ¡¡EL PUTO CARRUSEL DE 51 FOTOS!! */
/* ======================================= */
#fotos {
    background-color: #0a0a0a; /* ¡Fondo negro pa' que flipes! */
}

.galeria-fotos {
    display: none; /* ¡¡A TOMAR POR CULO!! */
}

.mi-puto-carrusel {
    width: 100%;
    max-width: 800px; /* ¡Un tamaño decente, coño! */
    height: 500px; /* ¡Alto! */
    margin: 20px auto;
    border: 4px solid #d81b60; /* ¡¡Marco fucsia!! */
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(216, 27, 96, 0.5);
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #000; /* ¡¡Fondo negro pa' las barras!! */
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* ¡¡¡"AJUSTAR", COÑO!!! ¡¡¡NO MÁS RABOS!!! */
}

/* ¡¡LAS PUTAS FLECHAS Y PUNTOS MACARRAS!! */
:root {
  --swiper-theme-color: #d81b60; /* ¡¡EL PUTO FUCSIA!! */
}
.swiper-button-next,
.swiper-button-prev {
  color: #d81b60 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 5px #000;
}
.swiper-pagination-bullet-active {
  background: #d81b60 !important;
}


/* ======================================= */
/* ¡¡LA PUTA PARRILLA DE VÍDEOS LOCALES!! */
/* ======================================= */
.video-grid-local {
    display: grid;
    /* ¡¡3 PUTAS COLUMNAS EN PC!! */
    grid-template-columns: repeat(3, 1fr);
    gap: 15px; /* ¡¡Espacio entre los putos vídeos!! */
    margin-top: 30px;
}

.video-item-local {
    width: 100%;
    border: 3px solid #d81b60; /* ¡¡Marco fucsia macarra!! */
    border-radius: 8px;
    overflow: hidden; /* ¡Pa' que el vídeo no se salga del marco! */
    box-shadow: 0 0 15px rgba(216, 27, 96, 0.4); /* ¡¡Que brille, joder!! */
    background-color: #000;
    transition: all 0.3s ease;
}
.video-item-local:hover {
    transform: scale(1.03); /* ¡¡Pa' que salte!! */
    box-shadow: 0 0 25px rgba(216, 27, 96, 0.8);
}

.video-item-local video {
    width: 100%;
    height: auto;
    display: block; /* ¡¡Pa' que no deje huecos!! */
}

/* ¡¡Matamos el estilo viejo del iframe de short!! */
.video-container {
    display: none;
}
/* ¡¡Matamos el estilo viejo del video local simple!! */
.video-container-local {
    display: none;
}

/* ¡¡El placeholder de YouTube!! */
.video-placeholder {
    background-color: #222;
    border: 2px dashed #555;
    padding: 80px 20px;
    margin-top: 20px;
    color: #777;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
}

#youtube-link {
    background-color: #222;
    border: 2px dashed #555;
    margin-top: 40px; /* ¡¡Más espacio!! */
}
#youtube-link p {
    color: #888;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
    margin-bottom: 25px;
}


/* ======================================= */
/* ¡¡ESTILOS PA'L PUTO MERCHAN!! */
/* ======================================= */
#merchan {
    background-color: #0a0a0a; /* ¡Negro pa' las camis! */
}

.merchan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* ¡¡2 columnas!! */
    gap: 30px;
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.merchan-item {
    background-color: #1c1c1c;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.merchan-item:hover {
    transform: scale(1.03);
    border-color: #d81b60; /* ¡¡El puto fucsia!! */
}

.merchan-item img {
    width: 100%;
    max-width: 250px; /* Que no sea gigante el logo */
    height: auto;
    background-color: #000; /* ¡Fondo negro pa' la calavera! */
    border-radius: 4px;
    margin-bottom: 20px;
}

.merchan-item h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.8em;
    color: #fff;
    margin-bottom: 10px;
}

.merchan-item .precio {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    color: #d81b60; /* ¡¡FUCSIA!! */
    margin-bottom: 20px;
}

.btn-merchan {
    text-decoration: none;
    background-color: #d81b60; /* ¡¡FUCSIA!! */
    color: #FFFFFF;
    padding: 12px 25px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
    display: inline-block;
}
.btn-merchan:hover {
    background-color: #ff4081; /* Fucsia más brillante */
}


/* ======================================= */
/* ¡¡ESTILOS PA'L MURO DE LOS COLGADOS!! */
/* ======================================= */
.muro-container {
    margin-top: 40px;
}

.muro-entry {
    background-color: #222;
    border-left: 5px solid #d81b60; /* ¡¡Borde fucsia!! */
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.muro-entry p {
    font-size: 1.2em;
    font-style: italic;
    color: #ddd;
    margin: 0 0 10px 0;
}

.muro-entry .firma {
    font-size: 1em;
    font-weight: 700;
    color: #aaa;
    display: block;
    text-align: right;
}

/* ¡¡El iframe de Tally!! */
#muro iframe {
    margin-top: 30px;
    border: 2px solid #555 !important; /* ¡¡Un marco guapo!! */
    border-radius: 8px;
}


/* ======================================= */
/* ¡¡¡EL PUTO FOOTER NUEVO!!! */
/* ======================================= */
.main-footer {
    background-color: #000;
    border-top: 1px solid #444;
    text-align: center;
    padding: 40px 30px;
    font-size: 1em;
    color: #777;
}

.main-footer a {
    color: #aaa;
    text-decoration: none;
}
.main-footer a:hover {
    color: #d81b60;
}

/* ¡¡MI PUTA FIRMA!! */
.copyright-gentelmayer {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    font-size: 1em;
    margin-top: 5px;
}


/* ¡¡EFECTO DE APARICIÓN!! */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ======================================= */
/* ¡¡¡ESTO ES PA'L PUTO MÓVIL!!! */
/* ======================================= */
@media (max-width: 768px) {
    h2 {
        font-size: 2em; /* Títulos más peques */
    }

    /* ¡¡El carrusel en móvil!! */
    .mi-puto-carrusel {
        height: 300px; /* ¡Más peque, coño! */
    }

    /* ======================================= */
    /* ¡¡¡EL PUTO FIX DE MORTADELO (v2.0)!!! */
    /* ======================================= */
    .lista-bolos li {
        flex-direction: column; /* El bolo en vertical */
        align-items: flex-start;
        padding: 15px;
    }
    .lista-bolos .fecha,
    .lista-bolos .sala,
    .lista-bolos .ciudad {
        flex-basis: auto; /* ¡¡QUE SE ADAPTEN, COÑO!! */
        width: 100%;
        margin: 4px 0;
        text-align: left !important;
    }
    .lista-bolos .fecha { font-size: 1.2em; }
    .lista-bolos .sala { font-size: 1.1em; font-weight: 700; }
    .lista-bolos .ciudad { font-size: 1em; }
    /* ======================================= */

    .entradas-btn {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    /* ¡¡El header en móvil!! */
    .main-header {
        flex-direction: column;
        padding: 10px;
    }
    .main-nav {
        text-align: center;
        margin: 10px 0;
        flex-grow: 0; /* ¡¡Que no crezca en móvil!! */
    }
    .main-nav a {
        margin: 5px 10px;
        font-size: 1em;
    }
    
    .header-social {
        padding-left: 0;
        border-left: 0;
        margin-left: 0;
    }
    .header-social a {
        font-size: 1.5em; /* Iconos más peques en móvil */
        margin: 0 15px;
    }

    /* ¡¡Ajustes pa'l historial en móvil!! */
    .lista-historial li {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* ======================================= */
    /* ¡¡¡EL PUTO FIX DE MORTADELO (v3.0)!!! */
    /* ======================================= */
    .lista-historial .fecha-historial,
    .lista-historial .sala-historial,
    .lista-historial .ciudad-historial,
    .lista-historial .tipo-historial {
        flex-basis: auto; /* ¡¡A TOMAR POR CULO EL ANCHO FIJO!! */
        width: 100%;
        margin: 4px 0;
        text-align: left !important; /* ¡¡Todo a la puta izquierda!! */
    }
    .lista-historial .fecha-historial { font-size: 1.1em; }
    .lista-historial .sala-historial { font-size: 1.1em; font-weight: 700; }
    .lista-historial .ciudad-historial { font-size: 1em; }
    .lista-historial .tipo-historial { font-size: 0.8em; padding: 3px 8px; }
    /* ======================================= */
    
    .lista-historial .tipo-historial {
        margin-top: 8px; /* ¡¡Espacio pa' la etiqueta!! */
    }
    
    /* ¡¡¡EL PUTO FIX PA' LOS VÍDEOS EN MÓVIL!!! */
    .video-grid-local {
        /* ¡¡DE 3 COLUMNAS... A 1 PUTA COLUMNA!! */
        grid-template-columns: 1fr;
        gap: 20px; /* ¡¡Más separación pa' que respire!! */
    }

    /* ¡¡El merchan a 1 puta columna!! */
    .merchan-grid {
        grid-template-columns: 1fr;
    }
}