.only-mobile {
    display: none;
}

body {
    font-family: "DM Sans", sans-serif;
    color: #4E3131;
    margin: 0 auto;
}

.header-vigo {
    text-align: center;
    padding: 20px;
}
.vigo-p{
    font-size: 16px;
}
.h2-vigo{
    font-weight: 700;
}
.header-image img {
    width: 100%;
    max-width: 1200px;
    height: auto;
}

.header-text h1 {
    font-size: 25px;
    margin: 10px 0;
    color: #4E3131;
}

.main-video {
    width: 100%;
}

.container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    /*max-width: 1200px;  Cambia el ancho máximo según tus necesidades */
    margin: 0 auto;
}
.image-composite-desk {
position: relative;
width: 30%; /* Ajusta este valor según la cantidad de bloques que quieras mostrar en una fila */
height: auto; /* Mantiene la altura proporcional a la imagen */
overflow: hidden;
}

.background-image-desk {
    width: 100%;
    height: 80%;
    display: block;
}

.foreground-image-desk {
position: absolute;
top: 50%; /* Centra verticalmente */
left: 50%; /* Centra horizontalmente */
transform: translate(-50%, -50%); /* Ajusta la posición para centrar */
max-width: 20%; /* Ajusta el tamaño según la imagen */
height: auto; /* Mantiene la proporción de la imagen */
}
.foreground-image-desk2 {
position: absolute;
top: 50%; /* Centra verticalmente */
left: 50%; /* Centra horizontalmente */
transform: translate(-50%, -50%); /* Ajusta la posición para centrar */
max-width: 45%; /* Ajusta el tamaño según la imagen */
height: auto; /* Mantiene la proporción de la imagen */
}
.image-composite-desk:hover .foreground-image-desk,
.image-composite-desk:hover .foreground-image-desk2 {
transition: transform 0.3s ease-in-out;
transform: translate(-50%, -50%) scale(1.3); /* Crece al pasar el ratón */
}
.block-title {
    font-size: 30px;
    font-weight: 700;
    /*margin: 0 20px;*/
    text-align: center;
    color: #4E3131;
    flex: 1;
    margin: 65px 0px 50px;
}

.block {
    height: 300px;
    flex: 1;
    margin: 10px;
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 50px 20px 20px;
    text-align: center;
    color: white;
}



h3 {
    font-size: 18px;
    margin: 0 0 10px 0;
    color: black;
    text-align: center;
}

.block-btn {
    font-size: 30px;
    font-weight: 700;
    /*margin: 0 20px;*/
    text-align: center;
    color: #4E3131;
    flex: 1;
    margin: 65px 10px 50px;
}

/*------------------------------------------------------------*/



.button-container {
    margin-top: 20px;
}

button {
    width: 100%;
    padding: 15px;
    background-color: #4E3131;
    color: white;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

button:hover {
    opacity: 0.7;
}

button#toggle-content-4 {
    background-color: #D48D88;
}

button#toggle-content-5 {
    background-color: #5C9ED7;
}

button img {
    margin-left: 10px;
    vertical-align: middle;
    width: 12px;
    height: auto;
}

.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

button img {
    transition: transform 0.3s ease;
}

/* Estilos para el contenido desplegable */
.extra-content {
    /*display: none;*/
    margin-top: 20px;
    text-align: center;
}

.extra-content h3 {
    font-size: 22px;
    color: #4E3131;
}

.extra-content video .extraHowTo {
    width: 100%;
    max-width: 800px;
    margin: 0px 0;
}

.extra-content video {
    width: 75%;
    max-width: 800px;
    margin: 20px 0;
}


.extra-content p {
    font-size: 18px;
    color: #4E3131;
    margin: 20px;
}

.carousel-vigo-item img {
    width: 100%;
    height: 300px;
 
    object-fit: contain;
    /* Esto asegura que la imagen no se corte */
}

.carousel-vigo-item {
    text-align: center;
    /* Centra el contenido dentro del item */
}

.buy-link {
    display: block;
    margin-top: 10px;
    text-decoration: underline;
    color: #E20026;
    font-weight: bold;
    font-size: 14px;
}

.buy-link:hover {
    text-decoration: underline;
}

.image-mama {
    margin-bottom: 20px;
}

.image-pair {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.image-item {
    text-align: center;
    width: 200px;
}

.image-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.image-unique {
    width: 100%;
    text-align: center;
    /* Asegura que la imagen esté centrada si tiene márgenes */
}

.image-unique img {
    width: 100%;
    height: auto;
    /* Mantiene la proporción original de la imagen */
    max-width: 1200px;
    /* Ajusta este valor según el límite máximo que desees */
}

.buy-link {
    display: block;
    margin-top: 10px;
    text-decoration: underline;
    color: #E20026;
    font-weight: bold;
    font-size: 14px;
}

.buy-link:hover {
    text-decoration: underline;
}

/* Inicialmente, los bloques están ocultos */
/*.extra-content-desk {
    display: none;
}*/
/* Estilos base para los bloques de contenido oculto (móvil y escritorio) */
.extra-content, .extra-content-desk {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.5s ease;
}

/* Cuando se active, el contenido se expande (para ambos bloques) */
.extra-content.active, .extra-content-desk.active {
    height: auto; /* Ajusta la altura según el contenido real */
    opacity: 1;
}

/* Estilo de la imagen rotada */
img.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* Estilo para rotar la imagen del botón 180 grados */
.rotate {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
}

div#extra-content-desk-1,
div#extra-content-desk-2,
div#extra-content-desk-3 {
    text-align: center;
    width: 80%;
    margin: 0px auto;
}

.section-title-mama {
    text-align: center;
    color: #D48D88;
    margin-bottom: 50px;
    width: 80%;
    margin: 50px auto;
}

button#toggle-content-desk-4 {
    background-color: #D48D88;
}

div#extra-content-desk-4 {
    text-align: center;
    width: 80%;
    margin: 0 auto;
}

p.mama-desk {
    margin-top: 50px;
    font-size: 16px;
}

.section-title-howTo {
    color: #5C9ED7;
    text-align: center;
    width: 80%;
    margin: 80px auto 50px;
}

button#toggle-content-desk-5 {
    background-color: #5C9ED7;
}

.image-unique {
    width: 80%;
    text-align: center;
    margin: 0 auto;
}

.final-block {
    text-align: center;
    width: 80%;
    margin: 50px auto;
}

/*-------------------------MOBILE STYLES-----------------------------------*/

@media (max-width: 768px) {
    .only-mobile {
        display: block;
    }

    /*body {
        font-family: "DM Sans", sans-serif;
        color: #4E3131;
        margin: 0 auto;
    }

    header {
        text-align: center;
        padding: 20px;
    }*/

    .header-image img {
        width: 100%;
       /* max-width: 1200px;*/
        height: auto;
    }

    .header-text h1 {
        font-size: 25px;
        margin: 10px 0;
        color: #4E3131;
    }

    .day-section,
    .city-section,
    .mountain-section,
    .mama-section,
    .howTo-section {
        text-align: center;
        margin: 20px 0;
    }

    .section-title h2 {
        font-size: 22px;
        color: #4E3131;
        margin-bottom: 15px;
    }

    .section-title-mama h2 {
        font-size: 22px;
        color: #D48D88;
        margin-bottom: 15px;
    }

    .section-title-howTo h2 {
        font-size: 22px;
        color: #5C9ED7;
        margin-bottom: 15px;
    }

    .image-composite {
        position: relative;
        display: inline-block;
        margin: 50px 0px;
    }

    .background-image {
        width: 100%;
        max-width: 1200px;
        height: auto;
    }

    .foreground-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        max-width: 20%;
    }

    .foreground-image-2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        max-width: 50%;
    }

    .foreground-image-3 {
        position: absolute;
        top: 57%;
        left: 57%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        max-width: 25%;
    }

    .button-container {
        margin-top: 20px;
    }

    button {
        width: 100%;
        padding: 15px;
        background-color: #4E3131;
        color: white;
        font-size: 15px;
        border: none;
        cursor: pointer;
    }

    button#toggle-content-4 {
        background-color: #D48D88;
    }

    button#toggle-content-5 {
        background-color: #5C9ED7;
    }

    button img {
        margin-left: 10px;
        vertical-align: middle;
        width: 12px;
        height: auto;
    }

    .rotated {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    button img {
        transition: transform 0.3s ease;
    }

    /* Estilos para el contenido desplegable */
    .extra-content {
        /*display: none;*/
        margin-top: 20px;
        text-align: center;
    }
/* Estilos base para los bloques de contenido oculto (móvil y escritorio) */
.extra-content, .extra-content-desk {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.5s ease;
}

/* Cuando se active, el contenido se expande (para ambos bloques) */
.extra-content.active, .extra-content-desk.active {
    height: auto; /* Ajusta la altura según el contenido real */
    opacity: 1;
}

/* Estilo de la imagen rotada */
img.rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

    .extra-content h3 {
        font-size: 22px;
        color: #4E3131;
    }

    .extra-content video .extraHowTo {
        width: 100%;
        max-width: 800px;
        margin: 0px 0;
    }

    .extra-content video {
        width: 75%;
        max-width: 800px;
        margin: 20px 0;
    }


    .extra-content p {
        font-size: 18px;
        color: #4E3131;
        margin: 20px;
    }

    .buy-link {
        display: block;
        margin-top: 10px;
        text-decoration: underline;
        color: #E20026;
        font-weight: bold;
        font-size: 14px;
    }

    .buy-link:hover {
        text-decoration: underline;
    }

    .image-mama {
        margin-bottom: 20px;
    }

    .image-pair {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .image-item {
        text-align: center;
        width: 45%;
    }

    .image-item img {
        width: 100%;
        height: auto;
        border-radius: 5px;
    }

    .image-unique {
        width: 100%;
        text-align: center;
        /* Asegura que la imagen esté centrada si tiene márgenes */
    }

    .image-unique img {
        width: 100%;
        height: auto;
        /* Mantiene la proporción original de la imagen */
        max-width: 1200px;
        /* Ajusta este valor según el límite máximo que desees */
    }

    .buy-link {
        display: block;
        margin-top: 10px;
        text-decoration: underline;
        color: #E20026;
        font-weight: bold;
        font-size: 14px;
    }

    .buy-link:hover {
        text-decoration: underline;
    }

    .final-block {
        width: 80%;
        margin: 60px auto;
        font-size: 18px;
        color: #4E3131;
    }
    .swiffy-slider {
        --swiffy-slider-item-count: 2 !important;
}
    .only-desktop {
        display: none;
    }
}
@media (max-width: 425px) {
    .swiffy-slider {
        max-width: 425px; 
        margin: 0 auto;
    }
}
@media (max-width: 415px) {
    .swiffy-slider {
        max-width: 415px; 
        margin: 0 auto;
    }
}
@media (max-width: 400px) {
    .swiffy-slider {
        max-width: 400px; 
        margin: 0 auto;
    }
}
@media (max-width: 385px) {
    .swiffy-slider {
        max-width: 385px; 
        margin: 0 auto;
    }
}
@media (max-width: 375px) {
    .swiffy-slider {
        max-width: 375px; 
        margin: 0 auto;
    }
}
@media (max-width: 365px) {
    .swiffy-slider {
        max-width: 365px; 
        margin: 0 auto;
    }
}
@media (max-width: 350px) {
    .swiffy-slider {
        max-width: 350px; 
        margin: 0 auto;
    }
}
@media (max-width: 340px) {
    .swiffy-slider {
        max-width: 340px; 
        margin: 0 auto;
    }
}
@media (max-width: 320px) {
    .swiffy-slider {
        max-width: 320px; 
        margin: 0 auto;
    }
}