/*
|--------------------------------------------------------------------------
| GALERÍA FILÀ MARRÀQUEIX
|--------------------------------------------------------------------------
*/


/* Variables de colores */

:root {

    --blanco: #FFFFFF;

    --rojo: #8E2D2D;

    --azul: #3B456D;

    --dorado: #B17E20;

    --gris: #f4f4f4;

}



/* General */

* {

    box-sizing: border-box;

}



body {

    margin: 0;

    padding: 0;

    background: var(--blanco);

    color: var(--azul);

    font-family: Arial, Helvetica, sans-serif;

}



/* Cabecera */

.cabecera {

    text-align: center;

    padding: 40px 20px;

    background: var(--azul);

    color: var(--blanco);

}



.cabecera h1 {

    margin: 0;

    font-size: 42px;

}



.cabecera p {

    margin-top: 10px;

    font-size: 22px;

    color: var(--dorado);

}



/* Contenedor principal */

.contenedor {

    max-width: 1200px;

    margin: auto;

    padding: 30px 20px;

}



/* Años */

.lista-anios {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 25px;

}



.tarjeta-anio {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 130px;

    background: var(--rojo);

    color: var(--blanco);

    text-decoration: none;

    font-size: 32px;

    font-weight: bold;

    border-radius: 12px;

    transition: .3s;

}



.tarjeta-anio:hover {

    background: var(--dorado);

    transform: translateY(-5px);

}

/* Galería de fotos */

.galeria {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 25px;

}



.galeria img {

    width: 100%;

    height: 320px;

    object-fit: cover;

    border-radius: 12px;

    transition: .3s;

}



.galeria img:hover {

    transform: scale(1.03);

}


/* Visor de foto */

/* VISOR CARRUSEL */


.visor {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    z-index:9999;

    justify-content:center;

    align-items:center;

    flex-direction:column;

}



.visor img {

    max-width:90%;

    max-height:80%;

}



.cerrar {

    position:absolute;

    top:20px;

    right:30px;

    color:white;

    font-size:35px;

    cursor:pointer;

}



.descargar {

    margin-top:20px;

    background:#8E2D2D;

    color:white;

    padding:12px 20px;

    text-decoration:none;

    border-radius:8px;

}



#anterior,

#siguiente {

    position:absolute;

    top:50%;

    font-size:50px;

    background:none;

    color:white;

    border:0;

}



#anterior {

    left:20px;

}



#siguiente {

    right:20px;

}



/* Botones */

button,

.boton-descarga {

    display: inline-block;

    background: var(--rojo);

    color: var(--blanco);

    border: none;

    padding: 12px 25px;

    border-radius: 8px;

    cursor: pointer;

    text-decoration: none;

    font-size: 16px;

}



button:hover,

.boton-descarga:hover {

    background: var(--dorado);

}



/* Login */

.login {

    max-width: 400px;

    margin: 100px auto;

    padding: 35px;

    text-align: center;

    border-radius: 15px;

    background: var(--gris);

}



.login input {

    width: 100%;

    padding: 12px;

    margin: 10px 0 20px;

    border: 1px solid #ccc;

    border-radius: 5px;

}



.error {

    background: var(--rojo);

    color: white;

    padding: 10px;

    border-radius: 5px;

}

/*
|--------------------------------------------------------------------------
| LOGO DE FONDO FILÀ MARRÀQUEIX
|--------------------------------------------------------------------------
*/


body::before {

    content: "";

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);


    width: 450px;

    height: 450px;


    background-image: url("../images/logo.png");

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;


    opacity: 0.08;


    filter: blur(1px);


    pointer-events: none;


    z-index: -1;

}



/* Adaptación móvil */

@media (max-width: 600px) {


    body::before {


        width: 280px;

        height: 280px;


        opacity: 0.07;


    }


}


/* Footer */

footer {

    text-align: center;

    padding: 25px;

    color: var(--azul);

    font-size: 14px;

}