@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
body {
    font-family: "DM Sans", sans-serif; /*Fuente general*/     
}

main {
    font-size: 120%;
}

main::before {
    background-image: var(--fondo, url("../img/fondo.webp"));
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    filter:grayscale(100%);
    transition: .5s;
    /*Adaptado de: https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image*/
}

h1, h2, h3, h4, h5, h6, .font-title {
    font-family: Oswald, sans-serif; /*Fuente para encabezados*/
}

nav .logo {
    width: 4rem;
}

.bg-bandera, .bg-bandera2 {    
    background-size: cover;
    background-position: center;
    aspect-ratio: 1/1;  
}
.bg-bandera {
    background-image: url('../ico/es.webp');
    width:3rem;
    height:3rem;
}
.bg-bandera2 {
    background-image: url('../ico/gb.svg');
    overflow: hidden;
    object-fit: cover;
    clip-path: inset(0 0 0 50% round 0 50% 50% 0);
    height: 100%;
}

.cont-ico {
    height: 2rem;
}

.ico {
    width: 2em;
    transition: .3s;
}

.copy {font-size: 80%}

.btn-dark {
    border: 2px solid #ffc107!important;
}

.circle-down, .fixed-buttons .btn {
    width: 3rem;
    height: 3rem;
}

.circle-down {    
    aspect-ratio: 1/1;
    bottom: 2vw;
    left: 2vw;
    opacity: 0;   
}

/*Estilo diferente con el botón más arriba si hay un vídeo*/
.header-img:has(>video) .circle-down{
    bottom: 5rem;
}

.circle-down:hover, .fixed-buttons .btn:hover {
    width: 3.5rem;
    height: 3.5rem;    
}

.circle-down img {
    width: 1.5rem;
}

@keyframes Intermitente {
    0% {opacity: 50%}  
    25% {opacity: 100%}
    50% {opacity: 50%}
    75% {opacity: 100%}
    100% {opacity: 50%;}
}
@keyframes FlechaIntermitente {
    0% {top: 0;}  
    25% {top: .2rem;}
    50% {top: 0;}
    75% {top: .2rem;}
    100% {top: 0;}
}

.header-img:hover .circle-down, .header-img:focus-within .circle-down {
    opacity: 1;
    animation-name: Intermitente;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.header-img a:focus-visible .circle-down {
 outline: 3px solid #000;
 box-shadow: 0 0 0 7px #fff;
}

.header-img:hover .circle-down img {
    /*opacity: 75%;*/
    position: relative;
    animation-name: FlechaIntermitente;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.fixed-buttons {
    width: 4rem;    
    position:fixed;
    bottom:0;
    right:0;
}

.fixed-buttons .btn:hover, .circle-down:hover, .fixed-buttons .btn:hover img, .circle-down:hover img {
    transition:.3s;
    animation-play-state: paused;
    opacity: 100%;    
}

.fixed-buttons .btn:hover img, .circle-down:hover img {
    width: 1.75rem;
}

.fixed-buttons .btn:focus-visible, .nav-link:focus-visible {
    outline: 3px solid black;
    box-shadow: 0 0 0 7px white;
}

.header-img .logo {
    height: 3rem;
}

.header-img { 
    margin-top: 3.7rem;
    height: 75vh;
    /*background: url("../img/banner_platea.webp") center;*/
    background-size: cover;
    background-position: center;
}

.mbm {    /*Disimula el color de fondo del logo. Funciona bien en dark, pero no en black.
            Con la imagen editada para tener el fondo 100% negro funciona bien en todos lados. */
    mix-blend-mode:lighten;
    filter: grayscale(100%);
}

header .mbm { /*con esto el del header parece funcionar*/
    filter:contrast(150%);    
}

.nav-link {
    background-color: rgba(0,0,0,0);
    color: white;
}

.nav-link:hover {
    border-color: transparent!important;    
}

.nav-link:focus {
    color:white!important;
}

footer a, .btn-link, .nav-link:hover{    
    text-decoration: underline;    
    text-underline-offset: .2em;
}

main .btn-link {
    text-decoration-color: goldenrod;
    color: black;
}

main .btn-link:hover {
    font-style: italic;
    color:black;
}

.nav-link:hover, .footer-links a, .footer-links .btn-link {    
    color: white!important;
    text-decoration-color: #ffc107;  
}

.nav-link.active, .footer-links a:hover, .btn-link:hover, .btn-link:active {
    background-color: white!important;
    transition: .3s;
    color: black!important;
    text-decoration-color: goldenrod;
}

footer .cont-ico a:hover {
    background-color: transparent;
}

.cont-ico a:hover .ico {
    width: 2.5em;  
}

a:hover .w-logo-2 {
    filter:drop-shadow(0px 0px 4px goldenrod);
    transform: scale(1.1);
}

main p a, .a-enclaro {
    text-decoration: underline;
    text-decoration-color: goldenrod;
    text-underline-offset: .2em;        
    color: black;
    font-weight: 500;
}

main p a:hover, .a-enclaro:hover {
    font-style: italic;
}

.dropdown-item:hover, .dropdown-item:focus-within {
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: #ffc107;
    text-underline-offset: .2em;
    background-color: black!important;
    color: white!important;
}

.dropdown-item.active {
    background-color: black!important;
    color: #f8f9fa!important;     
}

.bg-opacity-90 {
    --bs-bg-opacity:.95;
}

.bg-opacity-90 p, .bg-opacity-90 div, .bg-opacity-90 span, .bg-opacity-90 h1, .bg-opacity-90 h2, .bg-opacity-90 h3 {
    color: black;
}

.object-fit-cover {
    object-position: center bottom;
}

.w-campoamor {
    width: 50%;
}

.w-logo-1, .w-logo-2 {
    width: 75%;
    transition: .2s;
    border-radius: 15px;
}

.dropdown-menu {
    margin-top: 0!important;
}

/*
Source - https://stackoverflow.com/a/74985391
Posted by Bauroziq
Retrieved 2026-02-16, License - CC BY-SA 4.0
*/

/*Editado para permitir acceso por teclado*/
.dropdown:hover>.dropdown-menu, .dropdown:focus-within .dropdown-menu{
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

/*Estilos solo SM y MD*/

@media screen and (min-width: 576px) and (max-width: 991px) {
    .w-campoamor {
        width: 25%;
    }

    .w-logo-2 {
        width: 50%;
    }
}

/*Estilos solo MD*/
@media screen and (min-width: 768px) and (max-width: 991px){
    .w-75 {
        width: 50%!important;
    }
}

/*Estilos LG+*/
@media screen and (min-width: 992px){

    /*Esto permite que el menú colapsado no abarque la totalidad de la pantalla cuando se abra*/
    .navbar-nav {        
        width: 100%!important;
        border-radius: 0!important;
    }

    /*Esto hace que los submenús estén centrados en vez de alineados a la izquierda con el botón*/
    .dropdown-menu {
        left: 50%!important;
        transform: translateX(-50%);        
    }

    .header-img {        
        height: 94vh;
    }

}

/*Estilos XXL*/
@media screen and (min-width: 1400px) {    

    .w-logo-1, .w-logo-2 {
        width: 60%;
    }
}

/* =============================================
   MODAL GALERÍA - Más grande en tablet vertical
   ============================================= */

@media (max-width: 991.98px) and (orientation: portrait) {
    #imagenModal .modal-dialog {
        max-width: 95% !important;
        margin: 0.5rem auto !important;
    }
    
    #imagenModal .modal-content {
        border-radius: 12px;
    }
    
    /* Imagen dentro del carrusel */
    #imagenModal .carousel-item img {
        max-height: 82vh !important;
        width: auto !important;
        object-fit: contain;
    }
    
    /* Ajuste del header del modal para que no ocupe tanto */
    #imagenModal .modal-header {
        padding: 0.75rem 1rem;
    }
}