/* ========================================
   ESTILOS ESPECÍFICOS PARA ÁREA EXTREMA
   ======================================== */

/* Hereda de hospedaje-detail-section pero reduce el espaciado */
.extrema-detail-section {
    width: 100%;
    padding: 35px 0;
    background: transparent;
    scroll-margin-top: 120px;
}

.extrema-detail-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    gap: 60px;
    align-items: center;
}

/* Invertir orden en secciones reverse */
.extrema-detail-section.reverse .extrema-detail-container {
    flex-direction: row-reverse;
}

.extrema-detail-image {
    flex: 1;
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extrema-detail-image .detail-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.5s ease;
    border-radius: 20px;
}

.extrema-detail-image:hover .detail-img {
    transform: scale(1.05);
}

/* Cuando hay múltiples imágenes en un contenedor */
.extrema-detail-image .detail-img + .detail-img {
    margin-top: 20px;
}

.extrema-detail-image .evento-boton-wrapper {
    position: relative;
    margin-top: 15px;
    width: 100%;
    z-index: 5;
    display: flex;
    justify-content: center;
    order: 10;
}

.extrema-detail-image .evento-boton-img {
    max-width: 60%;
    width: 60%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    animation: subtle-pulse 2s ease-in-out infinite;
}

.extrema-detail-image .evento-boton-img:hover {
    transform: scale(1.08);
    animation: none;
}

/* Animación de pulso sutil */
@keyframes subtle-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.05);
    }
}

/* Responsive para tablets */
@media (max-width: 1024px) {
    .extrema-detail-container {
        gap: 50px;
        padding: 0 40px;
    }
}

/* Responsive para móviles */
@media (max-width: 768px) {
    .extrema-detail-section {
        padding: 30px 0;
    }

    .extrema-detail-container {
        flex-direction: column;
        gap: 30px;
        padding: 0 20px;
    }

    /* En móvil, mantener siempre el mismo orden: texto arriba, imagen abajo */
    .extrema-detail-section.reverse .extrema-detail-container {
        flex-direction: column;
    }

    .extrema-detail-image {
        width: 100%;
        flex-direction: column;
    }

    /* Caso 1: Botón en primer elemento (button-first) - botón va al final */
    .button-first .extrema-detail-container > .extrema-detail-image:first-child {
        order: 2;
    }

    .button-first .extrema-detail-container > .extrema-detail-image:nth-child(2) {
        order: 1;
    }

    /* Caso 2: Botón en segundo elemento (button-second) - mantiene su orden natural */
    .button-second .extrema-detail-container > .extrema-detail-image:first-child {
        order: 1;
    }

    .button-second .extrema-detail-container > .extrema-detail-image:nth-child(2) {
        order: 2;
    }

    .extrema-detail-image .detail-img {
        width: 100%;
        border-radius: 20px;
    }

    .extrema-detail-image .detail-img + .detail-img {
        margin-top: 15px;
    }

    .extrema-detail-image .evento-boton-wrapper {
        margin-top: 25px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .extrema-detail-image .evento-boton-img {
        max-width: 70%;
        width: 70%;
    }
}

@media (max-width: 480px) {
    .extrema-detail-section {
        padding: 20px 0;
    }

    .extrema-detail-container {
        padding: 0 15px;
        gap: 20px;
    }

    .extrema-detail-image .detail-img + .detail-img {
        margin-top: 12px;
    }

    .extrema-detail-image .evento-boton-img {
        max-width: 80%;
    }

    .extrema-detail-image .evento-boton-wrapper {
        margin-top: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Banner específico para área extrema */
.extrema-banner {
    width: 100%;
    margin-top: 110px;
    position: relative;
    overflow: hidden;
}

.extrema-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

@media (max-width: 768px) {
    .extrema-banner {
        margin-top: 86px;
    }
}