/**
 * CAMPOAVENTURAS 2026 - CSS MEJORADO PARA PROGRAMAS.PHP
 * Efectos 3D profundos, imagen dinámica de BD y responsividad completa
 * Versión: 2.0 PREMIUM | Fecha: 2025-10-18
 * Autor: Clubkaribe ®
 */

/* ===================================
   HERO MISION DETAIL - EFECTO 3D PROFUNDO
   (Reemplaza y mejora los estilos anteriores)
   =================================== */

.hero-mision-detail {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: left;
    overflow: hidden;
    padding: 4rem 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    /* Fallback por si no carga la imagen */
    background-color: linear-gradient(135deg, #ff6600, #6bccf1);
}

/* Overlay oscuro ligero (35% de opacidad) para mejor legibilidad */
.hero-mision-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    backdrop-filter: blur(2px);
}

/* Wrapper del contenido - encima del overlay */
.hero-mision-content-wrapper {
    position: relative;
    z-index: 2;
}

/* ===================================
   TÍTULO 3D CON EFECTO PROFUNDO
   =================================== */

.hero-mision-title-3d {
    font-family: 'Righteous', cursive;
    font-size: clamp(2.2rem, 8vw, 4.5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    line-height: 1.2;

    /* Efecto 3D estratificado - múltiples capas de sombra */
    text-shadow:
        /* Capa 1: Sombra base lejana */
        4px 4px 0px rgba(0, 0, 0, 0.5),

        /* Capa 2: Sombra media */
        8px 8px 0px rgba(0, 0, 0, 0.4),

        /* Capa 3: Sombra profunda */
        12px 12px 0px rgba(0, 0, 0, 0.3),

        /* Capa 4: Sombra difusa grande */
        16px 16px 20px rgba(0, 0, 0, 0.6),

        /* Capa 5: Borde luminoso sutil - doble azul */
        0px 0px 10px rgba(107, 204, 241, 0.6),
        0px 0px 20px rgba(255, 102, 0, 0.4);

    /* Efecto de levitación */
    animation: titleLevitate 3s ease-in-out infinite;

    /* Transformación inicial para mejor presentación */
    transform: perspective(1000px) rotateX(0deg);
    letter-spacing: 0.5px;
}

/* ===================================
   SUBTÍTULO 3D
   =================================== */

.hero-mision-subtitle-3d {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 600;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 700px;

    /* Efecto 3D más sutil que el título */
    text-shadow:
        /* Capas de profundidad */
        3px 3px 0px rgba(0, 0, 0, 0.4),
        6px 6px 0px rgba(0, 0, 0, 0.3),
        9px 9px 15px rgba(0, 0, 0, 0.5),

        /* Borde luminoso */
        0px 0px 8px rgba(107, 204, 241, 0.5);

    animation: subtitleLevitate 3.5s ease-in-out infinite;
    animation-delay: 0.2s;
}

/* ===================================
   TARJETA DE ESLOGAN 3D
   =================================== */

.card-eslogan-3d {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px);
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease;

    /* Sombra 3D en la tarjeta */
    box-shadow:
        0 8px 0px rgba(0, 0, 0, 0.15),
        0 12px 20px rgba(0, 0, 0, 0.2),
        0 20px 40px rgba(0, 0, 0, 0.1);

    animation: cardFloat 3s ease-in-out infinite;
}

.card-eslogan-3d:hover {
    transform: translateY(-8px);
    box-shadow:
        0 12px 0px rgba(0, 0, 0, 0.2),
        0 16px 30px rgba(0, 0, 0, 0.3),
        0 24px 50px rgba(0, 0, 0, 0.15);
}

/* Texto del eslogan dentro de la tarjeta */
.eslogan-3d-text {
    text-shadow:
        2px 2px 0px rgba(255, 102, 0, 0.2),
        4px 4px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.3px;
}

/* ===================================
   ANIMACIONES DE LEVITACIÓN
   =================================== */

@keyframes titleLevitate {
    0%, 100% {
        transform: perspective(1000px) translateY(0px) rotateX(0deg);
    }
    50% {
        transform: perspective(1000px) translateY(-8px) rotateX(0.5deg);
    }
}

@keyframes subtitleLevitate {
    0%, 100% {
        transform: perspective(1000px) translateY(0px);
    }
    50% {
        transform: perspective(1000px) translateY(-5px);
    }
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* ===================================
   BADGES INFORMATIVOS
   =================================== */

.badge-info {
    font-size: 1rem;
    font-weight: 600;
    animation: badgePulse 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.badge-info:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* ===================================
   RESPONSIVE - TABLETS (768px - 991px)
   =================================== */

@media (max-width: 991px) {
    .hero-mision-detail {
        min-height: 320px;
        padding: 3rem 0;
        background-attachment: scroll;
    }

    .hero-mision-title-3d {
        font-size: clamp(1.8rem, 6vw, 3rem);
        text-shadow:
            3px 3px 0px rgba(0, 0, 0, 0.5),
            6px 6px 0px rgba(0, 0, 0, 0.4),
            9px 9px 15px rgba(0, 0, 0, 0.5),
            0px 0px 8px rgba(107, 204, 241, 0.5);
    }

    .hero-mision-subtitle-3d {
        font-size: clamp(1rem, 3vw, 1.3rem);
        text-shadow:
            2px 2px 0px rgba(0, 0, 0, 0.4),
            4px 4px 10px rgba(0, 0, 0, 0.4),
            0px 0px 6px rgba(107, 204, 241, 0.4);
    }

    .card-eslogan-3d {
        margin-top: 2rem;
    }

    .d-flex.gap-3 {
        flex-wrap: wrap;
        gap: 1rem !important;
    }
}

/* ===================================
   RESPONSIVE - MÓVILES (max-width 767px)
   =================================== */

@media (max-width: 767px) {
    .hero-mision-detail {
        min-height: 300px;
        padding: 2rem 1rem;
        background-attachment: scroll;
    }

    .hero-mision-overlay {
        background: rgba(0, 0, 0, 0.4); /* Ligeramente más oscuro en móvil */
    }

    .hero-mision-title-3d {
        font-size: clamp(1.6rem, 6vw, 2.5rem);
        margin-bottom: 1rem;
        text-shadow:
            2px 2px 0px rgba(0, 0, 0, 0.5),
            4px 4px 0px rgba(0, 0, 0, 0.4),
            6px 6px 10px rgba(0, 0, 0, 0.5),
            0px 0px 6px rgba(107, 204, 241, 0.4);
    }

    .hero-mision-subtitle-3d {
        font-size: clamp(0.95rem, 3vw, 1.2rem);
        margin-bottom: 1.5rem;
        max-width: 100%;
        text-shadow:
            2px 2px 0px rgba(0, 0, 0, 0.4),
            3px 3px 8px rgba(0, 0, 0, 0.4),
            0px 0px 5px rgba(107, 204, 241, 0.3);
    }

    .card-eslogan-3d {
        margin-top: 1.5rem;
        box-shadow:
            0 6px 0px rgba(0, 0, 0, 0.15),
            0 10px 15px rgba(0, 0, 0, 0.2),
            0 15px 30px rgba(0, 0, 0, 0.1);
    }

    .card-eslogan-3d .card-body {
        padding: 1.5rem !important;
    }

    .d-flex.gap-3 {
        flex-direction: column;
        gap: 0.75rem !important;
    }

    .badge-info {
        width: 100%;
        text-align: center;
        font-size: 0.95rem;
    }

    .hero-mision-content-wrapper .row {
        gap: 1.5rem;
    }
}

/* ===================================
   RESPONSIVE - MÓVILES MUY PEQUEÑOS (max-width 576px)
   =================================== */

@media (max-width: 576px) {
    .hero-mision-detail {
        min-height: 280px;
        padding: 1.5rem 0.75rem;
    }

    .hero-mision-title-3d {
        font-size: clamp(1.4rem, 5vw, 2rem);
        margin-bottom: 0.75rem;
        text-shadow:
            2px 2px 0px rgba(0, 0, 0, 0.5),
            3px 3px 5px rgba(0, 0, 0, 0.4),
            0px 0px 5px rgba(107, 204, 241, 0.3);
    }

    .hero-mision-subtitle-3d {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
        margin-bottom: 1.25rem;
        text-shadow:
            1px 1px 0px rgba(0, 0, 0, 0.4),
            2px 2px 6px rgba(0, 0, 0, 0.3),
            0px 0px 4px rgba(107, 204, 241, 0.2);
    }

    .card-eslogan-3d {
        margin-top: 1rem;
        box-shadow:
            0 4px 0px rgba(0, 0, 0, 0.12),
            0 8px 12px rgba(0, 0, 0, 0.15),
            0 12px 20px rgba(0, 0, 0, 0.08);
    }

    .card-eslogan-3d .card-body {
        padding: 1.25rem !important;
    }

    .badge-info {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem;
    }

    .hero-mision-title-3d i {
        font-size: 0.9em;
        margin-right: 0.5rem;
    }
}

/* ===================================
   RESPONSIVE - TABLETS GRANDES (992px - 1199px)
   =================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    .hero-mision-detail {
        min-height: 380px;
    }

    .hero-mision-title-3d {
        font-size: clamp(2.5rem, 7vw, 3.8rem);
    }

    .hero-mision-subtitle-3d {
        font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    }
}

/* ===================================
   RESPONSIVE - LAPTOPS / PCS (1200px - 1439px)
   =================================== */

@media (min-width: 1200px) and (max-width: 1439px) {
    .hero-mision-detail {
        min-height: 400px;
        background-attachment: fixed;
    }

    .hero-mision-title-3d {
        font-size: clamp(3rem, 6vw, 4.2rem);
        text-shadow:
            4px 4px 0px rgba(0, 0, 0, 0.5),
            8px 8px 0px rgba(0, 0, 0, 0.4),
            12px 12px 0px rgba(0, 0, 0, 0.3),
            16px 16px 20px rgba(0, 0, 0, 0.6),
            0px 0px 12px rgba(107, 204, 241, 0.6),
            0px 0px 24px rgba(255, 102, 0, 0.4);
    }

    .hero-mision-subtitle-3d {
        font-size: 1.4rem;
    }
}

/* ===================================
   RESPONSIVE - PANTALLAS GRANDES / TV (1440px en adelante)
   =================================== */

@media (min-width: 1440px) {
    .hero-mision-detail {
        min-height: 450px;
        background-attachment: fixed;
        padding: 5rem 0;
    }

    .hero-mision-title-3d {
        font-size: clamp(3.5rem, 8vw, 5rem);
        text-shadow:
            5px 5px 0px rgba(0, 0, 0, 0.55),
            10px 10px 0px rgba(255, 255, 255, 0.15),
            15px 15px 0px rgba(0, 0, 0, 0.35),
            20px 20px 30px rgba(0, 0, 0, 0.65),
            0px 0px 15px rgba(107, 204, 241, 0.7),
            0px 0px 30px rgba(255, 255, 255, 0.5);
        animation: titleLevitateXL 3s ease-in-out infinite;
    }

    .hero-mision-subtitle-3d {
        font-size: 1.6rem;
        max-width: 900px;
        animation: subtitleLevitateXL 3.5s ease-in-out infinite;
        animation-delay: 0.2s;
    }

    .card-eslogan-3d {
        box-shadow:
            0 10px 0px rgba(0, 0, 0, 0.18),
            0 16px 30px rgba(0, 0, 0, 0.25),
            0 28px 60px rgba(0, 0, 0, 0.15);
    }

    .card-eslogan-3d:hover {
        box-shadow:
            0 14px 0px rgba(0, 0, 0, 0.22),
            0 20px 40px rgba(0, 0, 0, 0.35),
            0 32px 70px rgba(0, 0, 0, 0.2);
    }
}

/* Animaciones extra para pantallas XL */
@keyframes titleLevitateXL {
    0%, 100% {
        transform: perspective(1200px) translateY(0px) rotateX(0deg);
    }
    50% {
        transform: perspective(1200px) translateY(-12px) rotateX(0.5deg);
    }
}

@keyframes subtitleLevitateXL {
    0%, 100% {
        transform: perspective(1200px) translateY(0px);
    }
    50% {
        transform: perspective(1200px) translateY(-8px);
    }
}

/* ===================================
   OTRAS MEJORAS COMPLEMENTARIAS
   =================================== */

.mission-detail-content,
.actividades-section {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mejorar visibilidad de breadcrumb */
.breadcrumb-item a {
    transition: all 0.3s ease;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
    transform: translateX(2px);
}

/* Descripción vendedora mejorada */
.descripcion-vendedora {
    line-height: 1.8;
    font-size: 1.05rem;
}

.descripcion-vendedora h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    font-weight: 700;
}

.descripcion-vendedora h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 600;
}

.descripcion-vendedora p {
    margin-bottom: 1rem;
    text-align: justify;
}

.descripcion-vendedora ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.descripcion-vendedora li {
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

/* ===================================
   FIN - CSS MEJORADO PROGRAMAS.PHP
   =================================== */