/* Reset y Estilos Base */
* { box-sizing: border-box; }

html, body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background-color:#fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #003333;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}


a {
    text-decoration: none;
    color: black;
}

a:hover, a:focus {
    color: #2E2E2E;
}

h1 {
    margin: 0 auto;
    text-align: center;
    padding-top: 20px; 
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: normal;
}

/* Fuentes */
@font-face {
    font-family: 'Optima';
    src: url('../typo/optima.eot?#iefix') format('embedded-opentype'),
         url('../typo/optima.woff') format('woff'),
         url('../typo/optima.ttf') format('truetype'),
         url('../typo/optima.svg#optima') format('svg');
    font-display: swap;
}

header nav .logo {
    font-family: Optima;
}

.menu-idioma-actiu {
    color: #77ab26d4;
}

#subtitol {
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1rem;
}

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


 /* Estilos base para todos los textos animados */        
        .text-slide {            
            position: absolute;             
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0; /* Empieza invisible */                        
            /* Configuración de la animación */            
            animation-name: rotacion-sincronizada;            
            animation-duration: 40s; 
            animation-timing-function: ease-in-out;             
            animation-iteration-count: infinite;             
            animation-fill-mode: forwards;        
        }
        
        /* ========================================= */        
        /* 2. DEFINICIÓN DE LA ANIMACIÓN (@keyframes) */        
        /* ========================================= */        
        @keyframes rotacion-sincronizada {            
            /* FASE 1: Oculto */            
            0%   { opacity: 0; }             
            0.1% { opacity: 0; }                         
            /* FASE 2: Aparición (Fade In: 2.5s) */            
            4%  { opacity: 0; }             
            10% { opacity: 1; } 
            
            /* FASE 3: Visibilidad Estática y Preparación para el Fade Out */            
            20% { opacity: 1; }                         
            
            /* FASE 4: Fade Out (2.5s) */            
            24.9% { opacity: 0; } 
            
            /* FASE 5: Permanecer Oculto (75% restante del tiempo) */            
            25% { opacity: 0; }            
            100% { opacity: 0; }         
        }
        
        /* ========================================= */        
        /* 3. SINCRONIZACIÓN DE RETARDOS (animation-delay) */        
        /* ========================================= */
        
        /* Escalonamiento de 10 segundos para cada par (ciclo completo de 40s) */        
        .slide-1 { animation-delay: 0s; }        
        .slide-2 { animation-delay: -10s; }        
        .slide-3 { animation-delay: -20s; }        
        .slide-4 { animation-delay: -30s; }
        
        /* --- Ajuste Fino para Text1 (Aparición a 3s) --- */        
        .text1.slide-1 { animation-delay: -3s; }        
        .text1.slide-2 { animation-delay: -13s; }        
        .text1.slide-3 { animation-delay: -23s; }        
        .text1.slide-4 { animation-delay: -33s; }
        
        /* --- Ajuste Fino para Text2 (Aparición a 6s) --- */        
        .text2.slide-1 { animation-delay: -6s; }        
        .text2.slide-2 { animation-delay: -16s; }        
        .text2.slide-3 { animation-delay: -26s; }        
        .text2.slide-4 { animation-delay: -36s; } 

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












/* Slider */
.textslider1, .textslider2 {
   
    display: none;
    position: absolute;
    left: 1%;
    top: 1%;
    width: inherit;
    height: inherit;
    z-index: 9;
    background-color: transparent;
}


.text1 {
    padding-top:2%;/* 2 */
    padding-left:20px;/* 10 */
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    font-size: 3.5vw;
    color: white; /* color text blanc*/
    background-color: transparent;
}

.text2 {
    padding-top:4%;/* 5 */
    padding-left: 20px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    font-size: 2vw;
    color: white; /* color text blanc*/
    background-color: transparent;
    
}
.slider-content {
    padding-top: 120px;
    position: relative; /* Establece el contexto de posicionamiento */
    width: 100%; /* Asegura que ocupe todo el ancho del slide */
    height: auto; /* Ajusta la altura automáticamente */
}
#img1 {
   
    padding-top:0px; /* Aplica el padding aquí */
    z-index: 1; /* Asegura que la imagen esté debajo del texto */
    width: 100%;
    position: absolute;
}


#contenidor-slider {
    position: relative;
    margin: 0 auto;
    width: inherit;
    height: inherit;
    background-color: transparent;
}


#contenidor-slider {
    z-index: 0;
}

#contenidor-text-slider {
    z-index: 11;
    background-color: transparent;
   
}

/* Header y Menú */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0;
    z-index: 3;
    background: rgba(255, 255, 255, 1); /* Color blanc fons header */
    height: 120px;
}

header nav a {
    text-decoration: none;
    color: black;
}

header nav .logo {
    cursor: pointer;
    font-size: 1.5em;
    line-height: inherit;
}

header nav ul {
    list-style: none;
    padding-left: 0;
    padding-top: 0;
    margin: 0;
}

header nav ul li {
    text-transform: capitalize;
    float: none;
    margin-left: 0;
}

header nav ul li a {
    display: block;
}

.menu-left a {
    display: inline-block;
    position: relative;
    padding-top: 10px;
}

.menu-left a:before, .menu-left a:after {
    content: '';
    display: block;
    position: absolute;
    height: 2px;
    transition: all 0.35s ease;
}

.menu-left a:before {
    bottom: 0;
    width: 0;
}

.menu-left a:after {
    right: 0;
    width: 0;
    background: #ccc;
}

.menu-left a:hover:before {
    width: 100%;
    background: #77ab26d4;
}

.menu-left a:hover:after {
    width: 100%;
    background: #fff;
    transition: all 0s ease;
}

#idioma {
    float: left;
    padding-top: 5px;
    padding-left: 10px;
}

ul.menu-left {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    z-index: 10;
}

ul.menu-left.collapse {
    max-height: 20em !important;
    z-index: 20;
    
}

.nav-toggle {
    display: block;
    padding-top: 10px;
    background-color: #fff;
    text-align: center;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    margin-top: 4px;
    transition: all 0.25s;
}

.hide-nav {
    transform: translateY(-120%) !important;
    -webkit-transform: translateY(-120%) !important;
}
/* Formularios y Contacto */
#myForm input, #myForm input::placeholder, #myForm textarea::placeholder {
    color: #282828;
    opacity: 1;
    font-family: 'Montserrat', sans-serif;
}

#contacte-parent {
    font-size: 1rem;
    text-align: center;
    position: relative;
}

#formulari-contacte {
    vertical-align: top;
    margin: 0;
    padding-bottom: 20px;
    max-width: 1280px;
}

input[type=text], input[type=email], input[type=tel], textarea {
    border: 1px solid #ccc;
    padding: 12px 20px;
    margin: 8px 0;
    font-size: 13px;
    color: #000000;
    box-shadow: inset 0 0 8px #e5e8e7;
}

input[type=submit] {
    border: 2px solid #ccc;
    padding: 8px 25px;
    margin: 2px 0;
    color: black;
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
}

input[type=submit]:hover {
    border: 2px solid #000;
    opacity: 0.8;
}

.dades-contacte {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: black;
    margin: 0;
    line-height: 150%;
    text-align: center;
    color: white;
}

/* Estilos de Texto y Contenido */
.parrafo, .titulo, .titulo-inf, .xdiv-contingut {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.parrafo {
    padding-left: 20px;padding-right: 20px;padding-top: 10px;
    font-style: normal;
    text-align: justify;
    text-justify: inter-word;
}

.parrafo:first-letter {
    font-size: 110%;
}

.titulo {
    padding-top: 20px;
    padding-bottom: 5px;
    font-style: normal;
    font-size: 1.1rem;
    text-align: center;
}

.titulo-inf {
    padding-top: 0;
    font-style: normal;
    font-size: 1rem;
    text-align: center;
}

.responsive-container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.responsive-container img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.slider-container {
    position: relative;
    max-width: 1280px;
    margin: auto;
    overflow: hidden;
}

#maps {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 0 !important;
}

/* Media Queries */
@media (min-width: 1280px) {
    #contenidor-slider {
        width: 1280px;
        height: 548px;
    }

    .swiper-slide img {
        border-radius: 15px;
    }
}


@media (min-width: 768px) {
    #logo-menu {
       margin-left:auto;margin-right:auto;text-align:center;padding-top:15px 
    }

    header nav ul li {
        margin: 0 auto;
        white-space: 100%;
        left: 50%;
        display: inline;
        margin-left: 0.5rem;
        margin-right: 0.5;
    }
    #logo {
        margin: 0 auto;
    padding-bottom: 0px;
    padding-top: 0px;
    font-size: 1.2em;
        max-width: 75%
    }
    #idioma {
        width:120px;
    }
    #icon-contact{
        width:120px;
    }
    input[type=text], input[type=email], input[type=tel], textarea {
        width: 50vw;
    }

    #icon-instagram {
        width: 30px;
        height: 30px;
    }

    .menu-left a {
        font-size: 1.1rem;
    }

    #idioma {
        font-size: .90rem;
    }

    header nav .logo {
        font-size: 1.5em;
    }

    .parrafo {
        font-size: 16px !important;
        line-height: 1.2;
        
    }

    .espaisperesdeveniments {
        font-size: 16px;
        color: black;
    }

    .nav-toggle {
        display: none;
    }

    #icon-telefon {
        display: none;
    }

    #icon-localizacion {
        display: none;
    }

    ul.menu-left {
        display: block !important;
        text-align: center;
        max-height: none;
    }
}

@media (min-width: 768px) and (orientation: portrait) {

    .swiper-slide img {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media only screen and (max-width: 932px) and (min-width: 321px) and (orientation: landscape) {
   .slider-content {
    padding-top: 0px;
    position: relative; /* Establece el contexto de posicionamiento */
    width: 100%; /* Asegura que ocupe todo el ancho del slide */
    height: auto; /* Ajusta la altura automáticamente */
     
}
    .swiper-slide img {
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    header {
        position:relative;
    }
}

@media (max-width: 767px) {
    
      #logo-menu {
       clear: both;background-color:white; 
    }
    header {
        height: 120px;
    }

    ul {
        background-color:#e8f0ec ;/* color menu */
        
    }

    .menu-left a {
        font-size: 1.3rem;
    }

    .menu-left {
        text-align: center;
    }

    #idioma {
        font-size: 1rem;
    }

    input[type=text], input[type=email], input[type=tel], textarea {
        width: 90vw;
    }

    #icon-instagram {
        width: 25px;
        height: 25px;
    }

    #contenidor-slider {
        width: 100vw;
        height: 42.857vw;
    }

    li {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .parrafo {
        font-size: 12px !important;
        line-height: 1.1;
    }

    .espaisperesdeveniments {
        font-size: 12px;color: #000;
    }
}