/* ============================================
   RESET Y CONFIGURACIÓN BASE
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-black: #000000;
    --color-gold: #D4AF37;
    --color-gold-hover: #F4CF47;
    --color-white: #FFFFFF;
    --color-dark: #0a0a0a;
    --color-grey: #1a1a1a;
    --transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Crimson Text', 'Lora', serif;
    background-color: var(--color-black);
    color: var(--color-white);
    line-height: 1.8;
    overflow-x: hidden;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.2), 0 0 4px rgba(212, 175, 55, 0.1);
}

/* ============================================
   TIPOGRAFÍA
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', 'Crimson Text', serif;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    animation: titlePulse 5s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.5), 0 0 30px rgba(212, 175, 55, 0.2);
    }
}

p {
    font-size: 1.15rem;
    margin-bottom: 1.2rem;
    animation: gentleTextGlow 4s ease-in-out infinite;
    font-weight: 400;
    letter-spacing: 0.3px;
}

@keyframes gentleTextGlow {
    0%, 100% {
        text-shadow: 0 0 8px rgba(212, 175, 55, 0.3), 0 0 4px rgba(212, 175, 55, 0.2), 0 0 2px rgba(255, 255, 255, 0.1);
    }
    50% {
        text-shadow: 0 0 12px rgba(212, 175, 55, 0.5), 0 0 6px rgba(212, 175, 55, 0.3), 0 0 3px rgba(255, 255, 255, 0.2);
    }
}

/* ============================================
   CONTENEDOR
   ============================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   HEADER Y NAVEGACIÓN
   ============================================ */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    padding: 20px 0; /* Aumentado para acomodar el logo más grande */
}

.main-header:hover {
    background: rgba(0, 0, 0, 0.98);
    border-bottom-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 2px 20px rgba(212, 175, 55, 0.1);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--transition);
}

.logo-link:hover {
    transform: scale(1.05);
}

.main-logo {
    height: 80px;
    width: auto;
    max-width: 350px; /* Tamaño aumentado para mayor visibilidad */
    min-width: 180px; /* Tamaño mínimo para legibilidad */
    transition: var(--transition);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
    object-fit: contain;
}

.logo-link:hover .main-logo {
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
}

.main-nav {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-link {
    color: var(--color-white);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 12px 20px;
    position: relative;
    transition: var(--transition);
    font-family: 'Crimson Text', serif;
    border-radius: 4px;
    overflow: hidden;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3), 0 0 4px rgba(212, 175, 55, 0.2);
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    transition: width 0.4s ease;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.nav-link:hover {
    color: var(--color-gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 10px rgba(212, 175, 55, 0.6), 0 0 5px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover::after {
    width: 80%;
}

/* Botón hamburguesa para móvil */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    position: relative;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.menu-toggle:hover {
    background: rgba(212, 175, 55, 0.1);
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background: var(--color-gold);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.menu-toggle:hover .hamburger-line {
    background: var(--color-gold-hover);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

.menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(10px, 10px);
}

.menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(10px, -10px);
}

/* Overlay para móvil */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mobile-nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Menú móvil */
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.98);
    border-left: 2px solid rgba(212, 175, 55, 0.3);
    z-index: 1000;
    padding: 80px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: right 0.3s ease;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav .nav-link {
    font-size: 1.2rem;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    text-align: left;
    width: 100%;
    display: block;
}

.mobile-nav .nav-link:hover {
    background: rgba(212, 175, 55, 0.1);
    border-left: 3px solid var(--color-gold);
    padding-left: 17px;
}

/* ============================================
   SECCIÓN HERO
   ============================================ */

.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-top: 80px; /* Espacio para el header fijo */
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #000000;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
    z-index: 1;
    min-height: 100%;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.9));
    z-index: 2;
}

/* Partículas mágicas doradas */
.magic-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.magic-particles::before,
.magic-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-gold);
    border-radius: 50%;
    box-shadow: 
        20vw 30vh 2px 1px rgba(212, 175, 55, 0.8),
        40vw 60vh 1px 1px rgba(212, 175, 55, 0.6),
        60vw 20vh 2px 1px rgba(212, 175, 55, 0.7),
        80vw 80vh 1px 1px rgba(212, 175, 55, 0.5),
        10vw 70vh 2px 1px rgba(212, 175, 55, 0.6),
        90vw 10vh 1px 1px rgba(212, 175, 55, 0.8),
        30vw 90vh 2px 1px rgba(212, 175, 55, 0.5),
        70vw 50vh 1px 1px rgba(212, 175, 55, 0.7);
    animation: floatParticles 20s infinite ease-in-out;
    opacity: 0.6;
}

.magic-particles::after {
    animation-delay: -10s;
    box-shadow: 
        15vw 25vh 2px 1px rgba(212, 175, 55, 0.7),
        35vw 55vh 1px 1px rgba(212, 175, 55, 0.5),
        55vw 15vh 2px 1px rgba(212, 175, 55, 0.6),
        75vw 75vh 1px 1px rgba(212, 175, 55, 0.4),
        5vw 65vh 2px 1px rgba(212, 175, 55, 0.5),
        85vw 5vh 1px 1px rgba(212, 175, 55, 0.7),
        25vw 85vh 2px 1px rgba(212, 175, 55, 0.4),
        65vw 45vh 1px 1px rgba(212, 175, 55, 0.6);
}

@keyframes floatParticles {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-40px) translateX(-10px);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-20px) translateX(5px);
        opacity: 0.7;
    }
}

.hero-content {
    position: relative;
    z-index: 3;
    padding: 20px;
    max-width: 800px;
}

.hero-title {
    font-size: 4rem;
    color: var(--color-white);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5), 0 0 10px rgba(212, 175, 55, 0.3), 2px 2px 10px rgba(0,0,0,0.8);
    position: relative;
    letter-spacing: 1px;
}

/* Efecto mágico de brillo en el título */
.magic-glow {
    animation: gentleGlow 3s ease-in-out infinite;
    text-shadow: 
        0 0 10px rgba(212, 175, 55, 0.5),
        0 0 20px rgba(212, 175, 55, 0.3),
        0 0 30px rgba(212, 175, 55, 0.2),
        2px 2px 10px rgba(0,0,0,0.8);
}

.magic-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.4), transparent);
    animation: shimmer 4s infinite;
}

@keyframes gentleGlow {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(212, 175, 55, 0.5),
            0 0 20px rgba(212, 175, 55, 0.3),
            0 0 30px rgba(212, 175, 55, 0.2),
            2px 2px 10px rgba(0,0,0,0.8);
    }
    50% {
        text-shadow: 
            0 0 15px rgba(212, 175, 55, 0.7),
            0 0 25px rgba(212, 175, 55, 0.5),
            0 0 35px rgba(212, 175, 55, 0.3),
            2px 2px 10px rgba(0,0,0,0.8);
    }
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--color-gold);
    margin-bottom: 2.5rem;
    font-weight: 300;
    letter-spacing: 1px;
    animation: fadeInUp 1s ease-out 0.3s both, subtitleMagic 3s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    position: relative;
}

/* Cuenta Regresiva */
.countdown-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
    animation: fadeInUp 1s ease-out 0.6s both;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.countdown-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-gold);
    font-family: 'Cormorant Garamond', serif;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 10px rgba(212, 175, 55, 0.6);
    line-height: 1;
    margin-bottom: 8px;
    animation: countdownPulse 2s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 10px rgba(212, 175, 55, 0.6);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 0 30px rgba(212, 175, 55, 1), 0 0 15px rgba(212, 175, 55, 0.8);
    }
}

.countdown-label {
    font-size: 0.9rem;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.countdown-separator {
    font-size: 2.5rem;
    color: var(--color-gold);
    font-weight: 300;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    margin-top: -15px;
    animation: separatorBlink 1s ease-in-out infinite;
}

@keyframes separatorBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Estilos para la caja de fecha del evento */
.event-date-box {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.event-date-box:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.2);
}

.calendar-options {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    animation: fadeInDown 0.3s ease;
}

.calendar-link {
    display: inline-block;
    margin: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid var(--color-gold);
    border-radius: 5px;
    color: var(--color-gold);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    font-family: 'Crimson Text', serif;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    cursor: pointer;
    z-index: 1001;
    position: relative;
    min-height: 44px;
    min-width: 120px;
}

.calendar-link:hover {
    background: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
}

.calendar-link:active {
    transform: translateY(0);
    background: rgba(212, 175, 55, 0.4);
}

.location-link {
    color: var(--color-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.5);
    transition: all 0.3s ease;
}

.location-link:hover {
    border-bottom-color: var(--color-gold);
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   SECCIÓN DE CONTRIBUCIÓN
   ============================================ */

.contribution-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.contribution-card {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 15px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
}

.contribution-card > * {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.contribution-card a,
.sponsor-card a {
    position: relative;
    z-index: 1001;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
}

.contribution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.contribution-card:hover::before {
    left: 100%;
}

.contribution-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-gold);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 768px) {
    .contribution-options {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contribution-card {
        padding: 2rem;
        pointer-events: auto;
    }
    
    .contribution-card .btn {
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    }
    
    /* Botones de calendario en móvil */
    .calendar-link {
        min-width: 140px;
        min-height: 48px;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        pointer-events: auto !important;
        touch-action: manipulation;
        z-index: 1001 !important;
    }
    
    .calendar-options {
        pointer-events: auto;
    }
}

@media (max-width: 480px) {
    .contribution-card {
        padding: 1.5rem;
    }
    
    /* Botones de calendario en móvil pequeño */
    .calendar-link {
        min-width: 130px;
        min-height: 46px;
        padding: 0.9rem 1.3rem;
        font-size: 0.95rem;
        pointer-events: auto !important;
        touch-action: manipulation;
        z-index: 1001 !important;
    }
}

/* ============================================
   SECCIÓN DE PATROCINADORES
   ============================================ */

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin: 3rem 0;
    padding: 0 1rem;
}

.sponsor-card {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
}

.sponsor-card > * {
    position: relative;
    z-index: 2;
}

.sponsor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.sponsor-card:hover::before {
    left: 100%;
}

.sponsor-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-gold);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    background: rgba(0, 0, 0, 0.8);
}

.sponsor-logo-wrapper {
    margin-bottom: 1.5rem;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sponsor-logo {
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0.9) contrast(1.1);
    transition: all 0.3s ease;
}

.sponsor-card:hover .sponsor-logo {
    filter: brightness(1.1) contrast(1.2);
    transform: scale(1.05);
}

.sponsor-logo-placeholder {
    width: 100%;
    height: 150px;
    background: rgba(212, 175, 55, 0.1);
    border: 2px dashed rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(212, 175, 55, 0.7);
}

.sponsor-placeholder-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.sponsor-info {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.sponsor-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: var(--color-gold);
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.sponsor-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.3);
    color: var(--color-gold);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1001;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    -webkit-touch-callout: none;
    user-select: none;
    cursor: pointer;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.social-link:hover::before,
.social-link:active::before {
    width: 100%;
    height: 100%;
}

.social-link:hover {
    border-color: var(--color-gold);
    background: rgba(212, 175, 55, 0.2);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.social-link svg {
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.social-link.facebook:hover {
    color: #1877F2;
    border-color: #1877F2;
}

.social-link.instagram:hover {
    color: #E4405F;
    border-color: #E4405F;
}

.social-link.tiktok:hover {
    color: #000000;
    border-color: #000000;
}

/* Responsive para patrocinadores */
@media (max-width: 768px) {
    .sponsors-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0;
    }
    
    .sponsor-card {
        padding: 1.5rem;
    }
    
    .sponsor-logo-wrapper {
        min-height: 100px;
        margin-bottom: 1rem;
    }
    
    .sponsor-logo {
        max-height: 100px;
        max-width: 90%;
    }
    
    .sponsor-logo-placeholder {
        height: 100px;
    }
    
    .sponsor-placeholder-icon {
        font-size: 2.5rem;
    }
    
    .sponsor-name {
        font-size: 1.3rem;
    }
    
    .social-link {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        z-index: 1001 !important;
        pointer-events: auto !important;
        position: relative;
        margin: 0 0.5rem;
    }
    
    .social-link svg {
        width: 24px;
        height: 24px;
        pointer-events: none;
    }
    
    .sponsor-social {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .sponsor-card {
        pointer-events: auto;
    }
    
    .sponsor-logo-wrapper {
        pointer-events: none;
    }
    
    /* Asegurar que los botones en la sección de patrocinio funcionen */
    #patrocinio-detalle .btn,
    #nuestros-patrocinadores .btn,
    .contribution-card .btn {
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
        z-index: 1001 !important;
        position: relative;
        min-height: 44px;
        cursor: pointer;
    }
    
    /* Asegurar que todos los enlaces funcionen */
    a.btn,
    a.social-link,
    .sponsor-card a,
    .contribution-card a {
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
        z-index: 1001 !important;
        position: relative;
        cursor: pointer;
    }
}

@media (max-width: 480px) {
    .sponsors-grid {
        gap: 1.5rem;
    }
    
    .sponsor-card {
        padding: 1rem;
        pointer-events: auto;
    }
    
    .sponsor-logo-wrapper {
        min-height: 80px;
        margin-bottom: 0.8rem;
        pointer-events: none;
    }
    
    .sponsor-social {
        gap: 0.8rem;
        margin-top: 0.8rem;
    }
    
    .social-link {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        margin: 0;
    }
    
    .social-link svg {
        width: 22px;
        height: 22px;
    }
    
    .sponsor-name {
        font-size: 1.2rem;
    }
    
    .sponsor-role {
        font-size: 0.85rem !important;
    }
    
    /* Asegurar que los botones en la sección de patrocinio funcionen en móviles pequeños */
    #patrocinio-detalle .btn,
    #nuestros-patrocinadores .btn {
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
        z-index: 10;
        position: relative;
        min-height: 44px;
        width: 100%;
        margin: 0.5rem 0 !important;
    }
    
    .sponsor-logo {
        max-height: 80px;
        max-width: 85%;
    }
    
    .sponsor-logo-placeholder {
        height: 80px;
    }
    
    .sponsor-placeholder-icon {
        font-size: 2rem;
        margin-bottom: 0.3rem;
    }
    
    .sponsor-logo-placeholder p {
        font-size: 0.85rem;
    }
    
    .sponsor-name {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .sponsor-role {
        font-size: 0.85rem !important;
        margin-bottom: 0.8rem !important;
    }
    
    .social-link {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
    }
    
    .social-link svg {
        width: 18px;
        height: 18px;
    }
}

@keyframes subtitleMagic {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.3), 0 0 20px rgba(212, 175, 55, 0.1);
        transform: translateY(0);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.1);
        transform: translateY(-3px);
    }
}

/* ============================================
   BOTONES
   ============================================ */

.btn {
    display: inline-block;
    padding: 15px 40px;
    font-size: 1.15rem;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 2px solid var(--color-gold);
    color: var(--color-white);
    background-color: transparent;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 0;
    font-family: 'Crimson Text', serif;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4), 0 0 5px rgba(212, 175, 55, 0.2);
    position: relative;
    z-index: 1001;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    -webkit-touch-callout: none;
    user-select: none;
}

.btn-primary {
    background-color: var(--color-gold);
    color: var(--color-black);
    border-color: var(--color-gold);
}

.btn-primary:hover {
    background-color: var(--color-gold-hover);
    border-color: var(--color-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
}

/* Efecto mágico en botones */
.magic-button {
    position: relative;
    overflow: hidden;
}

.magic-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.magic-button:hover::before {
    width: 300px;
    height: 300px;
}

.magic-button:hover {
    box-shadow: 
        0 0 20px rgba(212, 175, 55, 0.6),
        0 0 40px rgba(212, 175, 55, 0.4),
        0 5px 20px rgba(212, 175, 55, 0.4);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-gold);
    border-color: var(--color-gold);
}

.btn-secondary:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn-outline:hover {
    background-color: var(--color-white);
    color: var(--color-black);
    border-color: var(--color-white);
    transform: translateY(-2px);
}

/* ============================================
   SECCIONES DE CONTENIDO
   ============================================ */

.content-section {
    padding: 100px 0;
    position: relative;
}

.dark-section {
    background-color: var(--color-grey);
}

.section-title {
    text-align: center;
    color: var(--color-gold);
    margin-bottom: 2rem;
    position: relative;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.section-title:hover {
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    transform: scale(1.02);
}

.section-divider {
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-gold), transparent);
    margin: 0 auto 3rem;
    opacity: 0.6;
    position: relative;
    animation: pulseGlow 3s ease-in-out infinite;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 4px;
    background: linear-gradient(to right, transparent, var(--color-gold), transparent);
    opacity: 0.3;
    animation: expandGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    }
}

@keyframes expandGlow {
    0%, 100% {
        width: 120%;
        opacity: 0.3;
    }
    50% {
        width: 150%;
        opacity: 0.5;
    }
}

.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.section-description {
    font-size: 1.2rem;
    line-height: 1.9;
    color: var(--color-white);
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 1.5rem;
    animation: textFloat 6s ease-in-out infinite;
    position: relative;
    font-weight: 400;
    letter-spacing: 0.4px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3), 0 0 5px rgba(212, 175, 55, 0.2), 0 0 2px rgba(255, 255, 255, 0.1);
}

@keyframes textFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-2px);
        opacity: 0.95;
    }
}

.section-description:hover {
    animation: textGlow 0.5s ease-in-out;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 10px rgba(212, 175, 55, 0.4), 0 0 5px rgba(255, 255, 255, 0.2);
}

@keyframes textGlow {
    0% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.3), 0 0 5px rgba(212, 175, 55, 0.2);
    }
    50% {
        text-shadow: 0 0 25px rgba(212, 175, 55, 0.7), 0 0 15px rgba(212, 175, 55, 0.5), 0 0 8px rgba(255, 255, 255, 0.3);
    }
    100% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 10px rgba(212, 175, 55, 0.4), 0 0 5px rgba(255, 255, 255, 0.2);
    }
}

/* ============================================
   CARRUSEL MÁGICO DE EXPERIENCIAS
   ============================================ */

.magic-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 20px 0;
}

.magic-carousel {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 para videos horizontales */
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.2);
    border: 2px solid rgba(212, 175, 55, 0.3);
    background-color: var(--color-black);
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translate3d(100%, 0, 0) scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    will-change: transform, opacity;
}

.carousel-item.active {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: all;
    z-index: 2;
}

.carousel-item.active .carousel-video {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.carousel-item.prev {
    transform: translate3d(-100%, 0, 0) scale(0.8);
    opacity: 0.3;
}

.carousel-item.next {
    transform: translate3d(100%, 0, 0) scale(0.8);
    opacity: 0.3;
}

.carousel-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
}

.carousel-video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Muestra todo el video sin cortar */
    filter: brightness(0.7) contrast(1.1);
    transition: filter 0.3s ease;
    background-color: var(--color-black);
    max-width: 100%;
    max-height: 100%;
    will-change: filter;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

.carousel-item.active .carousel-video {
    filter: brightness(0.8) contrast(1.2);
}

/* Desactivar animación de glow en móviles para mejor rendimiento */
@media (min-width: 769px) {
    .carousel-item.active .carousel-video {
        animation: videoGlow 3s ease-in-out infinite;
    }
}

@keyframes videoGlow {
    0%, 100% {
        filter: brightness(0.8) contrast(1.2);
    }
    50% {
        filter: brightness(0.9) contrast(1.3);
    }
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
    z-index: 1;
}

.carousel-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    z-index: 2;
    text-align: center;
}

.carousel-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    color: var(--color-gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.4);
    margin: 0;
    animation: titleFloat 3s ease-in-out infinite;
    letter-spacing: 2px;
    font-weight: 600;
}

@keyframes titleFloat {
    0%, 100% {
        transform: translateY(0);
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.4);
    }
    50% {
        transform: translateY(-5px);
        text-shadow: 0 0 30px rgba(212, 175, 55, 1), 0 0 50px rgba(212, 175, 55, 0.6);
    }
}

/* Controles del carrusel */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    color: var(--color-gold);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.carousel-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold-hover);
    color: var(--color-gold-hover);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

.carousel-btn svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

/* Indicadores */
.carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(212, 175, 55, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-gold);
    transition: all 0.3s ease;
}

.indicator.active {
    border-color: var(--color-gold);
    background: rgba(212, 175, 55, 0.3);
}

.indicator.active::before {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

.indicator:hover {
    transform: scale(1.2);
    border-color: var(--color-gold-hover);
}

/* Botón de control de audio */
.magic-carousel-container .audio-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    color: var(--color-gold);
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.audio-toggle:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold-hover);
    color: var(--color-gold-hover);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.audio-toggle:active {
    transform: scale(0.95);
}

.audio-toggle.active {
    background: rgba(212, 175, 55, 0.3);
    border-color: var(--color-gold-hover);
}

.audio-icon {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
    transition: all 0.3s ease;
}

.audio-toggle.active .audio-off {
    display: none;
}

.audio-toggle.active .audio-on {
    display: block !important;
}

.audio-toggle:not(.active) .audio-on {
    display: none;
}

.audio-toggle:not(.active) .audio-off {
    display: block;
}

/* Efecto mágico de rotación automática */
@keyframes carouselRotate {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.magic-carousel::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, var(--color-gold), transparent, var(--color-gold), transparent);
    border-radius: 15px;
    opacity: 0;
    z-index: -1;
    animation: borderGlow 4s ease-in-out infinite;
}

@keyframes borderGlow {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
}

/* ============================================
   LISTA DE CARACTERÍSTICAS (mantener para otras secciones)
   ============================================ */

.feature-list {
    list-style: none;
    margin: 2rem 0;
}

.feature-list li {
    padding: 15px 0;
    padding-left: 30px;
    position: relative;
    font-size: 1.2rem;
    color: var(--color-white);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    animation: listItemFloat 4s ease-in-out infinite;
    transition: all 0.3s ease;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3), 0 0 4px rgba(212, 175, 55, 0.2);
}

@keyframes listItemFloat {
    0%, 100% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(3px);
        opacity: 0.9;
    }
}

.feature-list li:before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--color-gold);
    font-size: 1.2rem;
    animation: sparkle 2s ease-in-out infinite, starTwinkle 3s ease-in-out infinite;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

@keyframes starTwinkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    25% {
        opacity: 0.7;
        transform: scale(1.1) rotate(5deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    75% {
        opacity: 0.8;
        transform: scale(1.15) rotate(-5deg);
    }
}

.feature-list li {
    transition: all 0.3s ease;
}

.feature-list li:hover {
    padding-left: 35px;
    color: var(--color-gold);
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

.feature-list li:hover:before {
    animation: sparkle 0.5s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

@keyframes sparkle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.feature-list li:last-child {
    border-bottom: none;
}

/* ============================================
   SECCIÓN PONENTE
   ============================================ */

.ponente-image-wrapper {
    text-align: center;
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ponente-image {
    max-width: 400px;
    width: 100%;
    height: auto;
    border-radius: 50%;
    border: 3px solid var(--color-gold);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    min-height: 400px;
    object-fit: cover;
    transition: all 0.5s ease;
    position: relative;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.ponente-image:hover {
    transform: scale(1.05);
    box-shadow: 
        0 15px 40px rgba(212, 175, 55, 0.5),
        0 0 30px rgba(212, 175, 55, 0.3);
    border-color: var(--color-gold-hover);
}

.ponente-image::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    opacity: 0;
    animation: pulseRing 2s ease-in-out infinite;
}

.ponente-image:hover::before {
    opacity: 0.6;
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.1);
        opacity: 0;
    }
}

.ponente-bio {
    margin-top: 2rem;
}

.quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-style: italic;
    color: var(--color-gold);
    text-align: center;
    padding: 2rem;
    margin: 2rem 0;
    border-left: 3px solid var(--color-gold);
    background-color: rgba(212, 175, 55, 0.05);
    position: relative;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.5), 0 0 8px rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
    animation: quoteGlow 4s ease-in-out infinite;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

@keyframes quoteGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.3), 0 0 20px rgba(212, 175, 55, 0.1);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.1);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    }
}

@keyframes quoteGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.3), 0 0 20px rgba(212, 175, 55, 0.1);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.3), 0 0 40px rgba(212, 175, 55, 0.1);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    }
}

.quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 4rem;
    color: var(--color-gold);
    opacity: 0.3;
    font-family: 'Cormorant Garamond', serif;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.quote::after {
    content: '"';
    position: absolute;
    bottom: -30px;
    right: 20px;
    font-size: 4rem;
    color: var(--color-gold);
    opacity: 0.3;
    font-family: 'Cormorant Garamond', serif;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.quote:hover {
    background-color: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

/* ============================================
   SECCIÓN EXPERIENCIAS
   ============================================ */

.experiencia-image-wrapper {
    text-align: center;
    margin-bottom: 3rem;
}

.experiencia-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    border: 2px solid var(--color-gold);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    min-height: 400px;
    object-fit: cover;
    transition: all 0.5s ease;
    position: relative;
}

.experiencia-image:hover {
    transform: scale(1.02);
    box-shadow: 
        0 15px 40px rgba(212, 175, 55, 0.4),
        0 0 25px rgba(212, 175, 55, 0.2);
    border-color: var(--color-gold-hover);
}

.experiencia-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(212, 175, 55, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.experiencia-image:hover::after {
    opacity: 1;
}

/* ============================================
   SECCIÓN CTA
   ============================================ */

.cta-section {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(to bottom, var(--color-black), var(--color-grey));
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 3rem;
}

.cta-buttons .btn {
    min-width: 300px;
}

/* ============================================
   FORMULARIO DE CONTACTO
   ============================================ */

.contact-form {
    max-width: 700px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-gold);
    font-weight: 500;
    font-size: 1.1rem;
    font-family: 'Crimson Text', serif;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: var(--color-grey);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--color-white);
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    transition: var(--transition);
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.2);
    letter-spacing: 0.3px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.form-group input.error,
.form-group textarea.error {
    border-color: #ff4444;
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
    background-color: rgba(255, 68, 68, 0.05);
}

.form-group input.error:focus,
.form-group textarea.error:focus {
    border-color: #ff6666;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.4);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Mensajes de error inline */
.field-error {
    display: none;
    color: #ff6666;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    padding-left: 5px;
    text-shadow: 0 0 5px rgba(255, 68, 68, 0.5);
    animation: errorShake 0.3s ease;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Contador de caracteres */
.char-count {
    display: block;
    text-align: right;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.5rem;
    font-family: 'Crimson Text', serif;
}

.char-count.over-limit {
    color: #ff6666;
}

.char-count span {
    color: var(--color-gold);
    font-weight: 600;
}

/* Botón de envío con estado de carga */
#submit-btn {
    position: relative;
    min-width: 200px;
}

#submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loading {
    display: inline-block;
}

.btn-loading::after {
    content: '...';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

.form-footer {
    text-align: center;
    margin-top: 3rem;
    font-style: italic;
    color: var(--color-gold);
    font-size: 1rem;
    animation: footerGlow 3s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

@keyframes footerGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        opacity: 1;
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.3);
        opacity: 0.95;
    }
}

/* ============================================
   MENSAJES DEL FORMULARIO
   ============================================ */

.form-message {
    padding: 20px;
    margin-bottom: 2rem;
    border: 2px solid;
    text-align: center;
    border-radius: 8px;
    animation: messageSlideIn 0.5s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

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

.form-success {
    background-color: rgba(212, 175, 55, 0.15);
    border-color: var(--color-gold);
    color: var(--color-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.form-error {
    background-color: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
    color: #ff6666;
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.2);
}

.form-message p {
    margin: 0;
    font-weight: 500;
    font-size: 1.1rem;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background-color: var(--color-dark);
    padding: 30px 0;
    text-align: center;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.footer p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    margin: 0;
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.2);
    font-family: 'Crimson Text', serif;
    letter-spacing: 0.3px;
}

/* ============================================
   ANIMACIONES
   ============================================ */

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
    animation: gentleFadeIn 0.8s ease-out;
}

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

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

@keyframes gentleTextAppear {
    0%, 100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 0.98;
        transform: translateY(-1px) scale(1.01);
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablets y móviles */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    
    /* Botón de audio responsive tablet */
    .magic-carousel-container .audio-toggle {
        width: 45px;
        height: 45px;
        top: 15px;
        right: 15px;
    }
    
    .magic-carousel-container .audio-icon {
        width: 20px;
        height: 20px;
    }
    
    /* Carrusel responsive tablet */
    .magic-carousel-container {
        margin: 2.5rem auto;
        padding: 15px 20px;
    }
    
    .carousel-title {
        font-size: 1.5rem;
    }
    
    .carousel-content {
        padding: 25px 20px;
    }
    
    .carousel-btn {
        width: 45px;
        height: 45px;
    }
    
    .carousel-prev {
        left: 15px;
    }
    
    .carousel-next {
        right: 15px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .countdown-container {
        gap: 10px;
        padding: 1.5rem;
    }
    
    .countdown-item {
        min-width: 60px;
    }
    
    .countdown-number {
        font-size: 2.2rem;
    }
    
    .countdown-label {
        font-size: 0.75rem;
    }
    
    .countdown-separator {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .content-section {
        padding: 60px 0;
    }
    
    .section-description {
        font-size: 1rem;
        text-align: justify;
        text-justify: inter-word;
    }
    
    .quote {
        font-size: 1.2rem;
        padding: 1.5rem;
    }
    
    .cta-buttons .btn {
        min-width: 100%;
        width: 100%;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
        z-index: 1001 !important;
        position: relative;
        min-height: 44px;
    }
    
    .ponente-image {
        max-width: 300px;
    }
    
    /* Header responsive */
    .main-logo {
        height: 60px;
        max-width: 280px; /* Proporcional al tamaño desktop aumentado */
        min-width: 160px;
    }
    
    /* Mostrar botón hamburguesa en tablets */
    .menu-toggle {
        display: flex;
    }
    
    /* Ocultar menú normal en tablets */
    .main-nav {
        display: none;
    }
}

/* Móviles */
@media (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .countdown-container {
        gap: 8px;
        padding: 1rem;
        flex-wrap: wrap;
    }
    
    .countdown-item {
        min-width: 50px;
    }
    
    .countdown-number {
        font-size: 1.8rem;
    }
    
    .countdown-label {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
    
    .countdown-separator {
        font-size: 1.5rem;
        margin-top: -10px;
    }
    
    .hero-date p:first-child {
        font-size: 1.1rem;
    }
    
    .hero-date p:last-child {
        font-size: 0.9rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    .content-section {
        padding: 40px 0;
    }
    
    .btn {
        padding: 12px 30px;
        font-size: 0.95rem;
    }
    
    .section-description {
        font-size: 1rem;
        text-align: justify;
        text-justify: inter-word;
        text-shadow: 0 0 6px rgba(212, 175, 55, 0.3), 0 0 3px rgba(212, 175, 55, 0.2);
    }
    
    .feature-list li {
        font-size: 1rem;
    }
    
    .quote {
        font-size: 1.1rem;
        padding: 1rem;
    }
    
    /* Botón de audio responsive móvil */
    .magic-carousel-container .audio-toggle {
        width: 40px;
        height: 40px;
        top: 10px;
        right: 10px;
    }
    
    .magic-carousel-container .audio-icon {
        width: 18px;
        height: 18px;
    }
    
    .container {
        padding: 0 15px;
    }
    
    .hero-section {
        min-height: 500px;
        padding-top: 70px;
    }
    
    /* Header móvil */
    .main-header {
        padding: 15px 0; /* Aumentado para acomodar el logo más grande */
    }
    
    .header-container {
        padding: 0 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .main-logo {
        height: 55px;
        max-width: 220px; /* Proporcional al tamaño desktop aumentado */
        min-width: 120px;
    }
    
    /* Mostrar botón hamburguesa en móviles */
    .menu-toggle {
        display: flex;
    }
    
    /* Ocultar menú normal en móviles */
    .main-nav {
        display: none;
    }
    
    /* Mostrar overlay y menú móvil */
    .mobile-nav-overlay {
        display: block;
    }
    
    .mobile-nav {
        display: flex;
    }
    
    /* Ajustar header en móviles */
    .header-container {
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    .logo-link {
        flex: 0 0 auto;
    }
    
    /* Carrusel responsive móvil - Optimizado para rendimiento */
    .magic-carousel-container {
        margin: 2rem auto;
        padding: 10px 15px;
    }
    
    .magic-carousel {
        padding-bottom: 56.25%; /* Mantener aspect ratio 16:9 en móviles */
        border-radius: 10px;
    }
    
    /* Simplificar transiciones en móviles */
    .carousel-item {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .carousel-title {
        font-size: 1.1rem;
        letter-spacing: 1px;
        padding: 0 10px;
        /* Desactivar animaciones pesadas en móviles */
        animation: none !important;
    }
    
    .carousel-content {
        padding: 15px 10px;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        opacity: 0.9;
    }
    
    .carousel-prev {
        left: 10px;
    }
    
    .carousel-next {
        right: 10px;
    }
    
    .carousel-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .indicator {
        width: 8px;
        height: 8px;
        border-width: 1px;
    }
    
    .indicator.active::before {
        width: 6px;
        height: 6px;
    }
    
    .carousel-indicators {
        bottom: 10px;
        gap: 8px;
    }
    
    /* Optimizar videos en móviles */
    .carousel-video {
        max-width: 100%;
        max-height: 100%;
        /* Reducir filtros en móviles */
        filter: brightness(0.75) contrast(1.05);
    }
    
    .carousel-item.active .carousel-video {
        filter: brightness(0.8) contrast(1.1);
    }
    
    .carousel-video-wrapper {
        width: 100%;
        height: 100%;
    }
    
    /* Desactivar efectos pesados en móviles */
    .carousel-overlay {
        background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8));
    }
    
    /* Reducir efectos visuales pesados en móviles */
    .carousel-btn {
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.9);
    }
    
    .magic-carousel {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.15);
    }
    
    /* Desactivar partículas mágicas en móviles para mejor rendimiento */
    .magic-particles::before,
    .magic-particles::after {
        display: none;
    }
    
    .indicator.active::before {
        width: 6px;
        height: 6px;
    }
}

/* Parallax effect para hero */
@media (min-width: 769px) {
    .hero-background {
        transition: transform 0.3s ease-out;
    }
}

/* ============================================
   BOTÓN FLOTANTE DE WHATSAPP
   ============================================ */

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    z-index: 1002;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #FFFFFF;
    animation: pulseWhatsApp 2s ease-in-out infinite;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.3);
    cursor: pointer;
    padding: 0;
    overflow: visible;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.9);
}

.whatsapp-float:hover svg path {
    fill: #FFFFFF !important;
}

.whatsapp-float:hover .whatsapp-icon-img {
    transform: scale(1.05);
}

.whatsapp-float:active {
    transform: scale(0.95);
}

.whatsapp-float svg,
.whatsapp-float .whatsapp-icon-img {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.4));
    pointer-events: none;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.whatsapp-float .whatsapp-icon-img {
    display: block;
}

.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--color-white);
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-family: 'Inter', sans-serif;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid rgba(0, 0, 0, 0.9);
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
}

@keyframes pulseWhatsApp {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
    }
    50% {
        box-shadow: 0 4px 30px rgba(212, 175, 55, 0.6);
        filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5));
    }
}

/* ============================================
   SECCIÓN INTRO IMPACTANTE
   ============================================ */

.intro-impactante-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #000000 100%);
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.intro-impactante-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    pointer-events: none;
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

.intro-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* Número extremadamente pequeño */
.number-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    font-family: 'Courier New', monospace;
    position: relative;
    animation: numberReveal 2s ease-out;
    gap: 0.1rem;
}

@keyframes numberReveal {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.number-main {
    font-size: 4rem;
    color: var(--color-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.zero-first {
    font-size: 4rem;
    color: var(--color-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.zeros-small-container {
    display: inline-flex;
    align-items: baseline;
    gap: 0.05rem;
}

.zero-small {
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.5);
    font-weight: 400;
    line-height: 1;
}

.dots-before,
.dots-after {
    font-size: 2rem;
    color: var(--color-gold);
    font-weight: 700;
    margin: 0 0.5rem;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.zeros-info-inline {
    font-size: 1.1rem;
    color: var(--color-gold);
    font-family: 'Crimson Text', serif;
    font-style: italic;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    margin: 0 0.3rem;
}

.zeros-final {
    font-size: 4rem;
    color: var(--color-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

@keyframes zeroFade {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.number-end {
    font-size: 4rem;
    color: var(--color-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* Información sobre los ceros */
.zeros-info {
    margin: 1.5rem 0 2.5rem;
    padding: 1rem 2rem;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    display: inline-block;
}

.zeros-count {
    font-size: 1.1rem;
    color: var(--color-gold);
    font-family: 'Crimson Text', serif;
    font-style: italic;
    margin: 0;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
    letter-spacing: 0.5px;
}

.intro-text-container {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.8;
}

.intro-subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
    font-family: 'Crimson Text', serif;
}

.intro-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
}

.intro-list li {
    margin: 0.8rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.intro-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-gold);
    font-weight: bold;
}

.brain-icon {
    font-size: 4rem;
    margin: 2rem 0;
    animation: brainPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4));
}

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

.intro-question {
    font-size: 2rem;
    color: var(--color-gold);
    font-family: 'Cormorant Garamond', serif;
    margin: 2rem 0;
    font-weight: 600;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.intro-explanations {
    margin: 2.5rem 0;
    font-size: 1.3rem;
}

.intro-statement {
    margin: 1rem 0;
    padding: 0.5rem 0;
}

.cross-out {
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.4);
    text-decoration-color: rgba(255, 255, 255, 0.6);
    text-decoration-thickness: 2px;
}

.intro-statement.highlight {
    color: var(--color-gold);
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    animation: highlightPulse 2s ease-in-out infinite;
}

@keyframes highlightPulse {
    0%, 100% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
    }
    50% {
        text-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
    }
}

.intro-context {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 2rem 0 1rem;
    font-style: italic;
}

.intro-context-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    font-size: 1.1rem;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.intro-context-list li {
    margin: 1rem 0;
    padding-left: 2rem;
    position: relative;
    color: rgba(255, 255, 255, 0.85);
}

.intro-context-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-gold);
    font-size: 1.5rem;
    line-height: 1;
}

.intro-context-list li strong {
    color: var(--color-gold);
    font-weight: 600;
}

.intro-quote {
    margin: 4rem 0 2rem;
    padding: 2.5rem;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 15px;
    position: relative;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.2);
}

.intro-quote::before {
    display: none;
}

.quote-text {
    font-size: 1.8rem;
    color: var(--color-gold);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    line-height: 1.6;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    position: relative;
    z-index: 1;
}

/* Animaciones de fade-in con delay */
.fade-in-delay-1 {
    animation: fadeInUp 1s ease-out 0.5s both;
}

.fade-in-delay-2 {
    animation: fadeInUp 1s ease-out 1s both;
}

.fade-in-delay-3 {
    animation: fadeInUp 1s ease-out 1.5s both;
}

.fade-in-delay-4 {
    animation: fadeInUp 1s ease-out 2s both;
}

.fade-in-delay-5 {
    animation: fadeInUp 1s ease-out 2.5s both;
}

.fade-in-delay-6 {
    animation: fadeInUp 1s ease-out 3s both;
}

.fade-in-delay-7 {
    animation: fadeInUp 1s ease-out 3.5s both;
}

.fade-in-delay-8 {
    animation: fadeInUp 1.5s ease-out 4s both;
}

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

/* Responsive para intro impactante */
@media (max-width: 768px) {
    .intro-impactante-section {
        padding: 100px 0 60px;
        min-height: auto;
    }
    
    .intro-content {
        padding: 0 15px;
    }
    
    .number-main,
    .number-end,
    .zero-first,
    .zeros-final {
        font-size: 2.5rem;
    }
    
    .zero-small {
        font-size: 0.9rem;
    }
    
    .dots-before,
    .dots-after {
        font-size: 1.5rem;
        margin: 0 0.3rem;
    }
    
    .zeros-info-inline {
        font-size: 0.95rem;
        padding: 0.5rem 1rem;
        margin: 0 0.2rem;
        display: inline-block;
        line-height: 1.5;
        white-space: nowrap;
    }
    
    .number-display {
        gap: 0.05rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .intro-subtitle {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
    
    .intro-list {
        font-size: 1.1rem;
        margin: 2rem 0;
        text-align: left;
        max-width: 100%;
    }
    
    .intro-list li {
        margin: 1rem 0;
    }
    
    .intro-question {
        font-size: 1.6rem;
        margin: 2rem 0;
    }
    
    .quote-text {
        font-size: 1.4rem;
    }
    
    .intro-explanations {
        font-size: 1.1rem;
        margin: 2rem 0;
    }
    
    .intro-statement {
        margin: 1rem 0;
        font-size: 1.2rem;
    }
    
    .intro-statement.highlight {
        font-size: 1.3rem;
    }
    
    .intro-context {
        font-size: 1.1rem;
        margin: 2rem 0 1rem;
    }
    
    .intro-context-list {
        font-size: 1rem;
        margin: 1.5rem 0;
        max-width: 100%;
    }
    
    .intro-context-list li {
        margin: 1rem 0;
    }
    
    .intro-quote {
        margin: 3rem 0 2rem;
        padding: 2rem 1.5rem;
    }
    
    .intro-quote::before {
        display: none;
    }
    
    /* Asegurar que las animaciones funcionen en móvil */
    .fade-in-delay-1,
    .fade-in-delay-2,
    .fade-in-delay-3,
    .fade-in-delay-4,
    .fade-in-delay-5,
    .fade-in-delay-6,
    .fade-in-delay-7,
    .fade-in-delay-8 {
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@media (max-width: 480px) {
    .number-main,
    .number-end,
    .zero-first,
    .zeros-final {
        font-size: 2rem;
    }
    
    .zero-small {
        font-size: 0.8rem;
    }
    
    .dots-before,
    .dots-after {
        font-size: 1.2rem;
    }
    
    .zeros-info-inline {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
        white-space: normal;
        display: block;
        margin: 0.5rem 0;
        text-align: center;
    }
    
    .number-display {
        flex-direction: column;
        align-items: center;
    }
    
    .intro-question {
        font-size: 1.4rem;
    }
    
    .quote-text {
        font-size: 1.2rem;
    }
    
    .intro-subtitle {
        font-size: 1.1rem;
    }
    
    .intro-list {
        font-size: 1rem;
    }
    
    .intro-explanations {
        font-size: 1rem;
    }
    
    .intro-statement {
        font-size: 1.1rem;
    }
    
    .intro-statement.highlight {
        font-size: 1.2rem;
    }
    
    .intro-context {
        font-size: 1rem;
    }
    
    .intro-context-list {
        font-size: 0.95rem;
    }
}

/* Responsive WhatsApp Button */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        z-index: 1002 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        min-width: 50px;
        min-height: 50px;
    }
    
    .whatsapp-float svg,
    .whatsapp-float .whatsapp-icon-img {
        width: 50px;
        height: 50px;
        pointer-events: none;
    }
    
    .whatsapp-float .whatsapp-icon-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    .whatsapp-tooltip {
        display: none; /* Ocultar tooltip en móvil */
    }
}

@media (max-width: 480px) {
    .whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: 20px;
        right: 20px;
        z-index: 1002 !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        min-width: 48px;
        min-height: 48px;
    }
    
    .whatsapp-float svg,
    .whatsapp-float .whatsapp-icon-img {
        width: 48px;
        height: 48px;
        pointer-events: none;
    }
    
    .whatsapp-float .whatsapp-icon-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}