:root{
  --negro:#000000;
  --rojo:#e50914;
  --rojo-claro:#ff4d4d;
  --blanco:#f7f7f7;
  --gris-oscuro:#1a1a1a;
  --card-gris:rgba(255,255,255,0.05);
  --gradiente-bg: linear-gradient(135deg, var(--negro) 0%, var(--rojo) 100%);
  --card-size: 280px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;background:var(--negro);color:var(--blanco);overflow-x:hidden;position:relative;}

/* VIDEO DE FONDO: SIEMPRE VISIBLE */
.hero-video{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  object-fit:cover;z-index:-1;opacity:0.15;filter:brightness(0.5);
  transform:translateZ(0);display:block !important;
}

/* App Wrapper */
.app-wrapper{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{width:240px;background:var(--gris-oscuro);padding:20px 0;display:flex;flex-direction:column;z-index:10;box-shadow:2px 0 10px rgba(229,9,20,0.1);}
.logo-sidebar{padding:0 20px 20px;text-align:center;border-bottom:1px solid rgba(229,9,20,0.2);}
.logo-sidebar .logo{width:60px;height:60px;border-radius:50%;background:var(--rojo);color:var(--blanco);display:flex;align-items:center;justify-content:center;font-weight:800;margin:0 auto 10px;animation:pulse 2s infinite;}
.logo-sidebar h2{margin:0;font-size:16px;color:var(--rojo-claro);}
.nav-menu{flex:1;padding:20px 0;}
.nav-menu ul{list-style:none;padding:0;margin:0;}
.nav-menu li{padding:10px 20px;}
.nav-menu a{display:flex;align-items:center;gap:12px;color:var(--blanco);text-decoration:none;transition:all 0.3s;font-size:14px;}
.nav-menu a:hover{color:var(--rojo);background:rgba(229,9,20,0.1);}
.sidebar-footer{padding:20px;border-top:1px solid rgba(229,9,20,0.2);text-align:center;}
.sidebar-footer p{margin:0;color:var(--rojo-claro);font-size:12px;}

/* Main */
.main-content{flex:1;overflow-y:auto;background:var(--gradiente-bg);padding:0;}

/* Hero */
.hero-section{padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;background:var(--negro);}
.hero-image{width:100%;max-width:800px;margin-bottom:20px;background:#000;display:flex;align-items:center;justify-content:center;padding:15px;border-radius:12px;}
.hero-img{max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain;background:#000;border-radius:8px;}
.hero-overlay{text-align:center;}
.hero-overlay h1{margin:0;font-size:2.2rem;color:var(--blanco);text-shadow:0 2px 8px var(--negro);}
.hero-overlay p{margin:10px 0 20px;font-size:1.1rem;color:var(--rojo-claro);}
.hero-btn{background:var(--rojo);color:var(--blanco);border:none;padding:12px 24px;border-radius:25px;font-size:16px;cursor:pointer;transition:all 0.3s;}
.hero-btn:hover{background:var(--rojo-claro);transform:scale(1.05);}

/* === TARJETAS UNIFORMES === */
.dedications-section, .top-section, .razones-section{padding:40px 20px;background:var(--negro);}
.dedications-section h2, .top-section h3, .razones-section h2{
  text-align:center;margin-bottom:30px;color:var(--rojo-claro);font-size:1.8rem;
}

/* Dedicatorias */
.dedications-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--card-size), 1fr));
  gap:20px;
}
.dedication-card{
  width:var(--card-size);
  height:calc(var(--card-size) * 1.3);
  background:var(--card-gris);
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(229,9,20,0.2);
  display:flex;
  flex-direction:column;
  transition:all 0.3s;
  cursor:pointer;
  margin:0 auto;
}
.dedication-card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(229,9,20,0.3);}
.dedication-card img{
  width:100%;height:60%;object-fit:contain;background:#000;
}
.card-content{
  padding:14px;flex:1;display:flex;flex-direction:column;justify-content:center;
}
.card-content h3{margin:0 0 6px;color:var(--rojo-claro);font-size:1.1rem;}
.card-content p{margin:0;color:var(--blanco);font-size:0.95rem;}

/* Carruseles */
.top-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;}
.carousel-wrapper{position:relative;}
.viewport{
  overflow:hidden;border-radius:12px;border:1px solid rgba(229,9,20,0.2);background:#000;
  width:var(--card-size);height:calc(var(--card-size) * 1.3);margin:0 auto;
}
.slides, .video-slides{display:flex;transition:transform .6s ease;}
.slide, .video-slide{
  min-width:100%;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:15px;gap:10px;width:var(--card-size);height:calc(var(--card-size) * 1.3);
}
.slide img, .video-item{
  width:100%;height:60%;object-fit:contain;background:#000;border-radius:8px;display:block;
}
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  background:var(--rojo);color:var(--blanco);border:none;width:36px;height:36px;
  border-radius:50%;cursor:pointer;z-index:5;transition:all 0.3s;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
}
.prev{left:8px;}
.next{right:8px;}
.arrow:hover{background:var(--rojo-claro);transform:translateY(-50%) scale(1.15);}

/* 100 Razones */
.tarjetas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--card-size), 1fr));
  gap:15px;max-height:500px;overflow:auto;padding-right:10px;
}
.card{
  width:var(--card-size);
  height:120px;
  background:var(--card-gris);
  padding:14px;
  border-radius:8px;
  border:1px solid rgba(229,9,20,0.3);
  transition:all 0.3s;
  cursor:pointer;
  margin:0 auto;
}
.card:hover{background:rgba(229,9,20,0.12);transform:translateY(-3px);}
.card h4{margin:0 0 6px;color:var(--rojo-claro);font-size:0.95rem;}
.card p{margin:0;font-size:0.9rem;}

/* Playlist */
.playlist-section{padding:40px 20px;background:var(--gris-oscuro);}
.playlist-section h2{text-align:center;margin-bottom:30px;color:var(--rojo-claro);font-size:1.8rem;}
.playlist-item{
  display:flex;gap:20px;background:var(--card-gris);border-radius:12px;padding:20px;
  border:1px solid rgba(229,9,20,0.2);max-width:600px;margin:0 auto;
}
.playlist-item img{width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0;}
.playlist-info{flex:1;}
.playlist-info h3{margin:0 0 6px;color:var(--blanco);font-size:1.2rem;}
.playlist-info p{margin:0 0 12px;color:var(--rojo-claro);}

/* Popup y Flores */
.flores-container{position:fixed;left:0;right:0;bottom:0;pointer-events:none;z-index:100;}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px);}
.popup{background:var(--gris-oscuro);border-radius:12px;padding:24px;max-width:90%;width:380px;border:1px solid var(--rojo);text-align:center;}
.popup h4{margin:0 0 12px;color:var(--rojo-claro);font-size:1.3rem;}
.popup p{margin:0 0 16px;font-size:1rem;}
.btn{background:var(--rojo);color:var(--blanco);border:none;padding:12px 20px;border-radius:25px;cursor:pointer;width:100%;transition:all 0.3s;font-size:1rem;}
.btn:hover{background:var(--rojo-claro);}

/* Animations */
@keyframes pulse {0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* RESPONSIVE */
@media (max-width:1000px){
  .app-wrapper{flex-direction:column;}
  .sidebar{width:100%;padding:15px 0;}
  .nav-menu{display:none;}
  .top-grid{grid-template-columns:1fr;}
  :root{--card-size: 260px;}
}
@media (max-width:768px){
  :root{--card-size: 240px;}
  .dedications-grid, .tarjetas-grid{grid-template-columns:1fr;}
  .hero-overlay h1{font-size:1.8rem;}
  .hero-overlay p{font-size:1rem;}
  .playlist-item{flex-direction:column;text-align:center;}
  .playlist-item img{width:70px;height:70px;}
}
@media (max-width:480px){
  :root{--card-size: 220px;}
  .hero-section{padding:20px 10px;min-height:50vh;}
  .hero-overlay h1{font-size:1.5rem;}
  .hero-overlay p{font-size:0.9rem;}
  .hero-btn{font-size:0.95rem;padding:10px 20px;}
  .dedications-section,.top-section,.razones-section,.playlist-section{padding:25px 10px;}
  .tarjetas-grid{max-height:350px;}
  .popup{width:95%;padding:20px;}
}