* {
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

header,
body {
    background-color: #ffffff;
    color: #505050;
    
}

.header {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            background-color: white;
            color: white;
            text-align: left;
            padding: 0px 0;
            font-size: 20px;
            z-index: 1000;
        }

        .content {
            padding: 20px;
        }

        .content p {
            margin-bottom: 10px;
        }

p {
    font-size: 1em;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    text-align: center;
}

h1 {
    font-size: 2em;
    color: #02b3c5;
}

h2 {
    font-size: 1.7em;
    color: #fdfeff;
}

h3 {
    color: #02b3c5;
    font-size: 1.4em;
}

h4 {
    color: #02b3c5;
    font-size: 1.1em;
}

h5 {
    color: #eb07df;
    font-size: 2em;
}

/* MIGAS DE PAN *************************/

#migas {
    font-size: 0.8em;
    padding: 0 1em 1.5em 1em;
}

#migas a {
    color: #02b3c5;
    text-decoration: underline;
}



/* LOGO *************************/

#logo{
    display:grid;
    padding:10px;
}

/* centro */
.logo-centro{
    text-align:center;
}


/* imágenes */
#logo img{
    height:auto;
    max-height:100px;
}

/* logo principal */
.logo-centro img{
    max-height:150px;
}

@media (max-width:600px){

#logo img{
    max-height:30px;
   
}

.logo-centro img{
    max-height:20px;
}

}


/* FIN LOGO *************************/

/* PLAZAS LIBRES *******************/

 
        .banner {
            width: 100%;
            height:50px;
            position: relative;
            background: url('https://source.unsplash.com/1600x900/?nature') no-repeat center/cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .banner-text {
            font-size: 25px;
            font-weight: bold;
            color: white;
            background: rgb(248, 7, 148);
            padding: 10px 20px;
            border-radius: 5px;
            animation: blinkText 1.5s infinite alternate;
            text-align: center;
        }

.banner-premio {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-premio img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.banner-premio img {
    width: 100%;      /* 🔥 se adapta al contenedor */
    max-width: 600px; /* 🔥 límite en pantallas grandes */
    height: auto;     /* 🔥 mantiene proporción */
    display: block;
}

@media (max-width: 600px) {
    .banner-premio img {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .banner-premio {
        font-size: 16px;   /* 🔥 más pequeño en móvil */
        padding: 10px;
        line-height: 1.3;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .banner-premio {
        font-size: 22px;
    }
}

        @keyframes blinkText {
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
            
        }

        @media (max-width: 600px) {
    .banner-premio {
        font-size: 18px;
        padding: 8px;
    }
}

/* FIN PLAZAS LIBRES **************/




/* FIN BANNER PREMIO EXCELENCIA******/



/* MENÚ PRINCIPAL *************************/

#navegacion {
    /* El div que contiene la navegación tendrá la anchura total del header (su elemento padre)*/
    width: 100%;
    background: #02b3c5;
    
}

#btn-menu {
    /* Hacemos desaparecer el check asociado al icono de menú hamburguesa, y el espacio que ocupaba*/
    display: none;
}


/* Estilo para el label que contiene el icono de menu hamburguesa */

#navegacion label {
    display: none;
    /*block*/
    height:30px;
    padding: 10px;
    width: 30px;
    border-right: 1px solid #ffffff;
}


/* Estilo cuando pasamos el ratón por el menu hamburguesa */

#navegacion label:hover {
    /* Hace que salga la mano en vex del puntero de flecha */
    cursor: pointer;
    /* Cambia el color al pasar el ratón por encima */
    background: #02b3c5;
}


/* Menú para pantallas grandes. Usamos flexbox*/

.menu ul {
    /* Eliminamos el margen y el relleno */
    margin: 0;
    padding: 0;
    /* Eliminamos el estilo de lista */
    list-style: none;
    /* Hacemos que el menú sea un contenedor flex con sus elementos alineados por defecto en horizontal */
    display: flex;
    /* Damos a los ul del menu una posición relativa para hacer un menú de dos niveles */
    position: relative;
}

.menu li>ul {
    /* Estilos del menu desplegable. Imprescindible position absolute por ser el padre (hijos position:relative para que sea desplegable) */
    position: absolute;
    background-color: #02b3c5;
    border-top: 1px solid #ffffff;
}

.menu li>ul {
    /* No se ve el menu desplegable */
    display: none;
}

.menu li:hover>ul {
    /* Se ve el menú desplegable en una columna cuando se pasa el ratón*/
    display: block;
    min-width: 8em;
    flex-grow: 1;
}

.menu li {
    /* Reparte el espacio de forma equitativa entre los elementos de lista del menú */
    flex-grow: 1;
    text-align: center;
    border-right: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
}


/* Cuando pasamos el ratón por el menu se ocurece */

.menu li:hover {
    background: #025f69;
    transition: all 0.3s;
}


/* Estilo para los enlaces del menú: Usamos display block para poder darle un padding (relleno), ponemos la letra en blanco para que contraste y eliminamos los estilos de enlaces por defecto */

.menu li a {
    display: block;
    padding: 1px 20px;
    color: #ffffff;
    text-decoration: none;
}


/* MEDIA QUERIES para pantallas menores de 768px*/

@media screen and (max-width: 767px) {
    /* Media queries menu hamburguesa */
    #navegacion label {
        display: block;
    }
    .menu {
        position: absolute;
        background: #02b3c5;
        width: 30%;
        /* Para que desaparezca el menú le damos un margen negativo (lo cambiaremos cuando se pulse el menu hamburguesa para que aparezca)*/
        margin-left: -70%;
    }
    .menu ul {
        /* La dirección del menú pasa a ser vertical, ya no es una fila sino una columna*/
        flex-direction: column;
    }
    .menu li {
        border-top: 1px solid #ffffff;
    }
    .menu li:hover>ul {
        /* Despliega el submenu al 100% del ancho de du contenedor padre en el menu hamburguesa, cambia la posición a relativa para que se abra con el hover en el flujo normal desplazando el resto de items del menú para abajo. La damos un tono distinto para diferenciar que es un submenú*/
        width: 100%;
        position: relative;
        background-color: lightseagreen;
    }
    /* Cuando el check del menú esté pulsado se busca la clase menu y se mustra el menú con el margen 0 (deja de estar oculto al pasar de -70% a 0) */
    #btn-menu:checked~.menu {
        margin: 0;
        /* Para que el menú lateral del móvil salga de forma progresiva */
        transition: all 0.4s;
    }
}


/* FIN MENÚ PRINCIPAL *************************/


/* MAIN ***************************************/


/* Ancla para saltar secciones */

.ancla {
    text-align: right;
    background-color: antiquewhite;
    padding: 0.7em 1.5em;
    margin: 0.5em 0;
    font-weight: bold;
    border-radius: 0 30px 30px 0;
    position: absolute;
    color: #02b3c5;
}

.ancla:hover {
    background-color: rgb(255, 222, 180);
    transition: all 0.4s;
}


/* TARJETAS ***********************************/

main {
    width: 100%;
    margin: 1% auto;
}



/* Contenedor flex horizontal de los tres bloques de texto titulo e imagen */

.textos {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
    grid-auto-rows: minmax(100px, auto);
}

.tarjeta figure img {
    width: 100%;
    border-radius: 5px;
    text-align:center;
    height: auto;

}

.logo-excelencia img{
    width: 100%;
    border-radius: 5px;
    text-align:center;
    height: auto;
}



/* MEDIA QUERIES TARJETAS **********************/


/* Para pantallas medianas: 2 tarjetas en horizontal */

@media only screen and (min-width: 768px) {
    main {
        width: 90%;
    }
    .textos {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .tarjeta figure img {
        height: 150px;
    }

    .logo-excelencia img {
        width: 60px;
    }
}

/* Para pantallas grandes: 3 tarjetas en horizontal */

@media only screen and (min-width: 1200px) {
    main {
        width: 90%;
    }
    .textos {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media only screen and (min-width: 1200px) {
    main {
        width: 90%;
    }
    .logo-excelencia {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* En pantallas medianas en la página de concierto se elimina la última tarjeta de cada apartado */

@media only screen and (max-width: 1200px) {
    #concierto4,
    #hotel2,
    #evento3,
    #opinion4 {
        display: inline-block;
    }
}


/* FIN MEDIA QUERIES TARJETAS *****************/

.tarjeta {
    background-color: #ffffff;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    margin: 10px;
    border-radius: 5px;
}

.tarjeta figure {
    margin: 20px;
    text-align: center;
}

.tarjeta h3 {
    text-align: center;
    padding:5px;
    line-height: 1.7;
}

.tarjeta p {
    padding: 5px 20px;
    line-height: 1.4;
    text-align: justify;
}

.logo-excelencia {
    padding: 5px 20px;
    line-height: 1.4;
    text-align: justify;
}


/* FIN TARJETAS ********************************/


/* ¿POR QUÉ CONFIARNOS LO QUE TÚ MÁS QUIERES? *******************************/

#titulo-centrado {
    background-color: #02b3c5;
    color: #ffffff;
    margin-top: 2em;
    padding: 0.5em;
    text-align: center;
}


/* Grid padre de la tienda de discos */

.tienda-discos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 10px;
    justify-items: center;
    align-items: center;
    margin-top: 0.5em;
    margin-bottom: 0em;
}


/* Elementos internos del grid */

.discos {
    text-align: center;
    width: 80%;
    max-width: 300px;
    height: 430px;
    line-height: 1.7;
    margin: 2em;
}

.discos figure img {
    border-radius: 5px;
    width: 100%;
    margin-bottom: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}


/* FIN TIENDA DISCOS **************************/


/* FIN MAIN ***********************************/


/* PIE ****************************************/

/*footer {
    width: 100%;
    margin: 4em auto 0 auto;
    background-color: #505050;
    color: #ffffff;
}

.pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    margin: 20px 20% 0px 20%;
}

.pie address,
a {
    flex: auto;
    padding: 1em 0.5em;
    text-align: center;
    text-decoration: none;
    color: #afafaf;
}

.pie a:hover {
    color: #ffffff;
    cursor: pointer;
}/*
/* Footer */
        footer {
            background-color: #00000015;
            color: #02b3c5;
            padding: 30px 0;
            text-align: center;
            border-top: 5px solid #02b3c5;
            border-radius: 15px 15px 0 0;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            flex-wrap: wrap;
        }

        .social-icons {
            display: flex;
            gap: 25px;
        }

        .social-icon {
            font-size: 30px;
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .social-icon:hover {
            color: #07e3f3;
        }

        .legal-notice a {
            color: #02b3c5;
            text-decoration: none;
            font-size: 16px;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 15px;
            display: block;
            transition: color 0.3s ease;
        }

        .legal-notice a:hover {
            color: #f10fc8;
        }

        /* Estilos del contenido de los Avisos Legales */
        #avisos-legales {
            background-color: #ffffff;
            padding: 30px;
            margin-top: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin: 20px auto;
        }

        ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
        }

        ul li {
            margin: 12px 0;
        }

        ul li a {
            text-decoration: none;
            color: #f10fc8;
            font-size: 18px;
            font-weight: bold;
        }

        ul li a:hover {
            text-decoration: underline;
        }

        /* Estilo de los derechos reservados */
        .copyright {
            margin-top: 20px;
            font-size: 14px;
            color: #02b3c5;
            font-weight: normal;
        }


/* FIN PIE *************************************/


/***********************************************/


/***********************************************/


/* concierto.html ******************************/

#pg-concierto a,
#pg-concierto h3 {
    color: #02b3c5;
}

#pg-concierto h1 {
    text-align: center;
}

#pg-concierto h2 {
    color: #02b3c5;
}

#aquellos-maravillosos-anos {
    background-color: #02b3c5;
    padding-bottom: 2em;
}

#aquellos-maravillosos-anos>p {
    margin: 2em 4em;
    color: #ffffff;
}

#aquellos-maravillosos-anos>table {
    margin: 2em auto;
    color: #ffffff;
}

#aquellos-maravillosos-anos>table td,
#aquellos-maravillosos-anos>table th,
#aquellos-maravillosos-anos>table caption {
    padding: 0.5em 1em;
    text-align: left;
}

#aquellos-maravillosos-anos>table a {
    color: #ffffff;
    text-decoration: underline;
}

#aquellos-maravillosos-anos>table a:hover {
    color: #ff9900;
    text-decoration: none;
}


/* el-concierto */

#titulo-el-concierto {
    padding: 3em 4em 2em 4em;
    text-align: center;
    background-color: #02b3c5;
    margin-top: 4em;
}

#titulo-el-concierto h2 {
    color: #ffffff;
    font-size: 2.3em;
}

#titulo-el-concierto h3 {
    color: #ffffff;
    padding-top: 1em;
}

#el-concierto {
    background-color: #02b3c5;
    padding: 1em 3em 3em 3em;
}

#el-concierto div {
    background-color: #ffffff;
}

#el-concierto div p {
    text-align: center;
    color: #02b3c5;
    font-weight: bold;
}


/* Localidad */

#titulo-localidad {
    background-color: #ffffff;
    margin-top: 3em;
    padding: 3em 4em 0em 4em;
    text-align: left;
}

#localidad {
    background-color: #ffffff;
    padding: 2em 3em 4em 3em;
}

#localidad #huelva>div {
    /* Cambia el formato de la primera tarjeta de las tres de localidad */
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.0);
    margin-bottom: 0;
}

#localidad #hotel1>div,
#localidad #hotel2>div {
    /* Cambia el formato de la segunda y tercera tarjeta de las tres de localidad */
    background-color: antiquewhite;
    padding-top: 1em;
}

#localidad h4,
#localidad p {
    text-align: center;
    color: #505050;
}


/* Proximos eventos */

#titulo-proximos-eventos {
    padding: 2em 4em 2em 4em;
    text-align: left;
    margin-top: 4em;
    background-color: #02b3c5;
}

#titulo-proximos-eventos>h2 {
    color: #ffffff;
    text-align: center;
}

#proximos-eventos div {
    /* Cambia el formato de las tarjeta de proximos eventos */
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.0);
    padding: 3em 3em 0em 3em;
}

#proximos-eventos p,
#proximos-eventos h4 {
    text-align: center;
    color: #02b3c5;
}


/* Opiniones */

#titulo-opiniones {
    background-color: #fcfdfd;
    margin-top: 4em;
    padding: 0em 4em 0em 4em;
    text-align: left;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif

}

#titulo-opiniones>h3 {
    color: #02b3c5;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif}

#titulo-opiniones>h2 {
    color: #02b3c5;
}

#opiniones {
    background-color: #02b3c5;
    padding: 2em 3em 6em 3em;
}

#opiniones div {
    padding: 2em 2em 0em 2em;
}

#opiniones h4,
#opiniones h5 {
    text-align: center;
    padding: 0.2em;
}


/* Galeria */



/* FIN concierto.html **************************/


/***********************************************/


/***********************************************/


/* formulario.html ******************************/

#pg-formulario h1,
#pg-formulario h4 {
    margin: 0 auto;
    text-align: center;
}

#pg-formulario form {
    max-width: 50em;
    margin: 2em auto;
    width: 90%;
}

#pg-formulario fieldset {
    padding: 2em;
    margin: 2em auto;
    background-color: #02b3c548;
    /*rgba(250, 235, 215, 0.9);*/
    border: none;
    border-radius: 20px;
}

#pg-formulario fieldset legend {
    color: #02b3c5;
    font-size: 1.2em;
    font-weight: bold;
}


/* Campos input de tipo texto, email y telefono */

#pg-formulario input[type=text],
#pg-formulario input[type=email],
#pg-formulario input[type=tel],
#pg-formulario select,
#pg-formulario fieldset p {
    padding: 0.3em;
    margin: 0.4em auto;
    font-size: 1em;
    display: block;
    width: 90%;
    color: #02b3c5;
}

#pg-formulario input[type=range] {
    width: 240px;
    height: 17px;
    margin: 0 1em;
}

#numeros-valoracion {
    letter-spacing: 5px;
}

#pg-formulario label {
    padding: 0.3em;
}


/* Formulario: campos Inválidos */

#pg-formulario input[type="text"]:focus:required:invalid,
#pg-formulario input[type=email]:focus:required:invalid,
#pg-formulario input[type=tel]:focus:required:invalid,
#pg-formulario input[type=radio]:focus:required:invalid,
#pg-formulario select:focus:required:invalid {
    border: 2px solid #ff003c;
    box-shadow: 0px 0px 2px 2px #ff003c inset;
}


/* Botones input enviar y cancelar */

#pg-formulario input[type=text],
#pg-formulario input[type=email],
#pg-formulario input[type=tel],
#pg-formulario select {
    border-radius: 5px;
    border: none;
    background-color: #ffffff;
}

input[type=submit],
input[type=reset] {
    background-color: #02b3c5;
    color: #ffffff;
    padding: 0.6em;
    margin: 1em 1em 0 0;
    font-size: 1em;
    font-weight: bold;
    border-radius: 20px;
    border: none;
    width: 8em;
}

input[type=reset] {
    background-color: #02b3c59f;
}

input[type=submit]:hover,
input[type=reset]:hover {
    background-color: #02b3c5;
}


/* TITULO */

.titulo-galeria{
text-align:center;
margin-top:30px;
font-size:32px;
}


/* FILTROS */

.filtros{
text-align:center;
margin:30px;
}

.filtros button{
padding:10px 18px;
margin:5px;
border:none;
background:#ddd;
cursor:pointer;
border-radius:20px;
font-size:15px;
transition:0.3s;
}

.filtros button:hover{
background:#ffb703;
}

.filtros .activo{
background:#ffb703;
color:white;
}


/* GALERIA */

.galeria-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:15px;
padding:30px;

}

.galeria-grid img{

width:100%;
height:220px;
object-fit:cover;
border-radius:12px;
cursor:pointer;
transition:0.3s;

}

.galeria-grid img:hover{

transform:scale(1.05);

}


/* LIGHTBOX */

#lightbox{

display:none;
position:fixed;
z-index:999;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
justify-content:center;
align-items:center;

}

#lightbox img{

max-width:90%;
max-height:90%;

}

#lightbox .cerrar{

position:absolute;
top:20px;
right:40px;
font-size:40px;
color:white;
cursor:pointer;

}

.prev,.next{

position:absolute;
top:50%;
font-size:40px;
color:white;
cursor:pointer;
user-select:none;
padding:10px;

}

.prev{
left:40px;
}

.next{
right:40px;
}