:root {
    --primary: #ff0066;
    --secondary: #00f0ff;
    --dark: #0a0a0a;
    --light: #ffffff;
}

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Montserrat', sans-serif; background:var(--dark); color:var(--light); }

/* HERO */
.hero { position:relative; height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-video {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: center;
    top:0;
    left:0;
}
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(0,0,0,0.65),
        rgba(0,0,0,0.75)
    );
    z-index: 2;
}
.hero-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px; max-width:900px; padding:20px; }
.hero-content h1 { font-size:clamp(2.5rem,5vw,4rem); font-weight:800; color:var(--secondary); text-shadow:0 2px 8px rgba(0,0,0,0.6); }
.hero-content p { font-size:1.2rem; max-width:700px; }

/* BOTONES */
.btn-primary { padding:14px 35px; border-radius:50px; font-weight:700; background:linear-gradient(45deg,var(--primary),var(--secondary)); color:#000; text-decoration:none; transition:transform .3s, box-shadow .3s; }
.btn-primary:hover { transform:scale(1.05); box-shadow:0 8px 20px rgba(255,0,102,0.6); }

/* INFO HERO */
.hero-info { display:flex; flex-wrap:wrap; gap:15px; justify-content:center; margin-top:20px; }
.info-card { background:rgba(255,255,255,0.1); padding:10px 20px; border-radius:15px; font-weight:600; backdrop-filter:blur(5px); transition:transform .3s, box-shadow .3s; }
.info-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.5); }

/* COUNTDOWN */
.countdown { display:flex; gap:20px; margin-top:20px; justify-content:center; }
.countdown div { background:rgba(255,255,255,0.1); padding:10px 15px; border-radius:12px; font-weight:700; min-width:60px; }
.countdown span { font-size:1.2rem; display:block; color:var(--secondary); }

/* SECCIONES */
.section { padding:80px 20px; text-align:center; opacity:0; transform:translateY(40px); transition:all 0.8s ease-out; }
.section h2 { font-size:2rem; margin-bottom:40px; color:var(--secondary); }

/* BENEFITS */
.benefits-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; }
.benefit-card { background:rgba(255,255,255,0.05); padding:25px; border-radius:25px; transition:transform .3s, box-shadow .3s; }
.benefit-card:hover { transform:translateY(-10px); box-shadow:0 15px 35px rgba(0,0,0,0.5); }
.card-icon { font-size:2.5rem; margin-bottom:15px; }

/* AGENDA */
.agenda-timeline { display:flex; flex-direction:column; gap:20px; max-width:600px; margin:0 auto; }
.timeline-item { background:rgba(255,255,255,0.1); padding:20px; border-radius:15px; display:flex; gap:25px; align-items:center; position:relative; transition:transform .3s; }
.timeline-item span { font-size:1.2rem; color:var(--secondary); font-weight:700; min-width:70px; text-align:right; }
.timeline-item::before { content:""; position:absolute; left:-35px; top:50%; transform:translateY(-50%); width:12px; height:12px; background:var(--primary); border-radius:50%; }
.timeline-item:hover { transform:translateX(5px); }

/* EXPERIENCIA */
.experience-subtitle { margin-bottom:40px; font-size:1.1rem; color:#ddd; }
.experience-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; }
.experience-card { background:linear-gradient(45deg, #ff0066, #00f0ff); padding:25px; border-radius:35% 15% 30% 20%; color:#000; transition:transform .3s, box-shadow .3s; text-align:center; }
.experience-card:hover { transform:translateY(-10px) rotate(-2deg); box-shadow:0 15px 35px rgba(0,0,0,0.5); }
.experience-icon { font-size:2.5rem; margin-bottom:15px; }

/* ACTIVIDADES */
.activities-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; }
.activity-card { background:rgba(255,255,255,0.05); border-radius:20px; overflow:hidden; transition:transform .3s; }
.activity-card img { width:100%; height:180px; object-fit:cover; }
.activity-card h4 { padding:10px; font-weight:700; color:var(--secondary); }
.activity-card:hover { transform:scale(1.05); }

/* SPONSORS / TIENDAS */
.sponsor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; }
.sponsor-card { background:linear-gradient(135deg,#ff0066,#00f0ff); padding:20px; border-radius:25px; text-align:center; transition:transform .3s, box-shadow .3s; color:#000; }
.sponsor-card img { width:80px; border-radius:12px; margin-bottom:10px; }
.sponsor-card h4 { font-weight:700; margin-bottom:5px; }
.sponsor-card p { font-size:0.9rem; }
.sponsor-card:hover { transform:translateY(-8px) rotate(-2deg); box-shadow:0 15px 35px rgba(0,0,0,0.5); }

/* UBICACIÓN */
.location iframe { border-radius:15px; margin-top:20px; }

/* FAQ */
details { margin-top:10px; text-align:left; max-width:700px; margin-left:auto; margin-right:auto; }
summary { cursor:pointer; padding:8px; background:#111; border-radius:8px; font-weight:600; }

/* FOOTER */
footer { padding:20px; background:#000; font-size:.9rem; text-align:center; }

/* RESPONSIVE */
@media(max-width:768px){
    .hero-content h1 { font-size:2rem; }
    .hero-content p { font-size:1rem; }
    .hero-info { flex-direction:column; gap:10px; }
    .countdown { flex-wrap:wrap; gap:10px; justify-content:center; }
    .benefits-grid, .experience-grid, .activities-grid, .sponsor-grid { grid-template-columns:1fr; }
}

/* ================= MAPA MEJORADO ================= */
.map-container {
    position: relative;
    width: 100%;
    max-width: 1000px;           /* 🔹 Limita el ancho en pantallas grandes */
    margin: 30px auto 0;         /* 🔹 Centrado + espacio arriba */
    padding-bottom: 35%;         /* 🔹 ALTURA PERFECTA PARA MAPAS */
    height: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6); /* 🔹 Más elegante */
}

.map-container iframe {
    position: absolute;
    inset: 0;                    /* 🔹 Simplifica top/left/width/height */
    width: 100%;
    height: 100%;
    border: 0;
}
/* ================= AJUSTE VIDEO HERO EN PC ================= */
@media (min-width: 1024px) {
    .hero-video {
        object-position: top center;
    }
}
/* ================= VIDEO HERO MODO ESPEJO (PC) ================= */

/* Video principal: se ve completo */
.hero-video-main {
    object-fit: contain;
    z-index: 1;
}

/* Video de fondo: rellena lados */
.hero-video-bg {
    object-fit: cover;
    filter: blur(25px) brightness(0.6);
    transform: scale(1.1);
    z-index: 0;
}

/* En móvil dejamos el comportamiento normal */
@media (max-width: 768px) {
    .hero-video-bg {
        display: none;
    }

    .hero-video-main {
        object-fit: cover;
    }
}

/* Oscurecer ligeramente el video principal */
.hero-video-main {
    opacity: 0.9;
}

/* ================= HERO SPLIT EN DESKTOP ================= */
@media (min-width: 1024px) {

    .hero {
        flex-direction: row;
        justify-content: flex-end;
        text-align: left;
    }

    /* El video ocupa la mitad izquierda */
    .hero-video {
        width: 50%;
        height: 100%;
        left: 0;
    }

    /* Contenido a la derecha */
    .hero-content {
        width: 50%;
        align-items: flex-start;
        padding: 60px;
    }

    .hero-content h1 {
        text-align: left;
    }

    .hero-content p {
        text-align: left;
    }

    .hero-info {
        justify-content: flex-start;
    }
}