/* css/hero.css - Archivo principal del hero */

/* NOTA: Este archivo ha sido reorganizado para mejorar la mantenibilidad */
/* Las secciones específicas están en archivos separados */

/* ===== IMPORTACIONES DE ARCHIVOS ESPECÍFICOS ===== */
/* 
   Para implementar esta nueva estructura, incluir estos archivos en el HTML:
   <link rel="stylesheet" href="css/hero-left.css">
   <link rel="stylesheet" href="css/hero-right.css">
   
   O importar desde CSS:
   @import url('hero-left.css');
   @import url('hero-right.css');
*/

/* ===== ESTILOS GLOBALES DEL HERO (FALLBACK) ===== */
/* Solo se mantienen aquí los estilos que no están en los archivos específicos */

/* Ajustes globales que afectan a toda la sección hero */
.hero-section * {
    box-sizing: border-box;
}

/* Prevenir desbordamiento horizontal */
.hero-section,
.hero-container,
.hero-content,
.hero-video {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ===== TRANSICIONES GLOBALES ===== */
.hero-section *,
.hero-container *,
.hero-content *,
.hero-video * {
    transition: all var(--transition-normal);
}

/* ===== MEJORAS DE RENDIMIENTO ===== */
.hero-section {
    will-change: transform;
    contain: layout style;
}

.hero-container {
    will-change: transform;
}

.hero-content,
.hero-video {
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ===== ACCESIBILIDAD ===== */
.hero-section [role="button"],
.hero-section button,
.hero-section .urgency-badge,
.hero-section .main-cta {
    cursor: pointer;
    outline: none;
    position: relative;
}

.hero-section [role="button"]:focus,
.hero-section button:focus,
.hero-section .urgency-badge:focus,
.hero-section .main-cta:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
}

/* ===== MEJORAS PARA USUARIOS CON PREFERENCIAS DE MOVIMIENTO REDUCIDO ===== */
@media (prefers-reduced-motion: reduce) {
    .hero-content {
        animation: none;
    }

    .hero-video {
        animation: none;
    }

    .urgency-badge i {
        animation: none;
    }

    .hero-video .main-cta i {
        animation: none;
    }

    .pulse-button {
        animation: none;
    }

    /* Mantener solo transiciones suaves */
    * {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
}

/* ===== MEJORAS PARA MODO OSCURO ===== */
@media (prefers-color-scheme: dark) {
    .hero-section {
        background:
            linear-gradient(135deg, rgba(20, 30, 40, 0.8) 0%, rgba(0, 100, 120, 0.7) 100%),
            url('../assets/img/fondo.png') center/cover no-repeat;
    }

    .video-container {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    .hero-right .event-card {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
    }
}

/* ===== AJUSTES PARA DISPOSITIVOS CON HOVER ===== */
@media (hover: hover) and (pointer: fine) {
    .hero-right .event-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .payment-option:hover {
        transform: translateY(-2px) scale(1.05);
    }
}

/* ===== AJUSTES PARA DISPOSITIVOS TÁCTILES ===== */
@media (hover: none) and (pointer: coarse) {
    .urgency-badge {
        min-height: 48px;
        min-width: 120px;
    }

    .hero-video .main-cta {
        min-height: 56px;
        padding: var(--spacing-lg) var(--spacing-xl);
    }

    .payment-option {
        min-height: 44px;
        min-width: 44px;
    }

    .hero-right .event-card {
        min-height: 80px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .hero-section {
        background: white;
        color: black;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .hero-video,
    .video-container,
    .payment-methods-message,
    .urgency-badge,
    .hero-video .main-cta {
        display: none;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-title,
    .hero-subtitle,
    .value-proposition {
        color: black;
        text-shadow: none;
        background: none;
        -webkit-text-fill-color: unset;
        background-clip: unset;
    }
}

/* ===== COMPATIBILIDAD CON NAVEGADORES ANTIGUOS ===== */
/* Fallbacks para navegadores que no soportan CSS Grid */
@supports not (display: grid) {
    .hero-container {
        display: flex;
        flex-direction: column;
    }

    .hero-content {
        order: 1;
        margin-bottom: var(--spacing-xl);
    }

    .hero-video {
        order: 2;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
}

/* Fallbacks para backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .video-container {
        background: rgba(0, 0, 0, 0.3);
    }

    .payment-methods-message {
        background: rgba(255, 255, 255, 0.9);
        color: var(--dark-color);
    }
}

/* ===== DEBUGGING HELPERS (Remover en producción) ===== */
/*
.hero-section {
    outline: 2px solid red;
}

.hero-container {
    outline: 2px solid blue;
}

.hero-content {
    outline: 2px solid green;
}

.hero-video {
    outline: 2px solid orange;
}
*/