:root { 
    --negro: #0f172a; --oro: #facc15; --oro-hover: #eab308; 
    --gris-fondo: #f8fafc; --blanco: #ffffff; --wa-verde: #25D366; 
}
body { font-family: 'Segoe UI', Tahoma, sans-serif; background: var(--gris-fondo); margin: 0; padding: 0; scroll-behavior: smooth; }
.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ==========================================================================
   NUEVA NAVBAR PREMIUM (LOGO CENTRAL RESALTADO)
   ========================================================================== */
.navbar-pro { background: var(--negro); position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0 4px 20px rgba(0,0,0,0.5); height: 70px; }
.nav-container-pro { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 20px; position: relative; }

.nav-izq, .nav-der { flex: 1; display: flex; align-items: center; }
.nav-izq { justify-content: flex-start; }
.nav-der { justify-content: flex-end; }

/* El Logo que sobresale */
.nav-centro { position: absolute; left: 50%; transform: translateX(-50%); top: 5px; z-index: 1001; }
.logo-pop img { height: 100px; width: 100px; border-radius: 50%; border: 4px solid var(--oro); box-shadow: 0 10px 20px rgba(0,0,0,0.5); object-fit: cover; background: var(--negro); transition: 0.3s; }
.logo-pop img:hover { transform: scale(1.05); }

/* Botones Nav */
.btn-nav-primario { background: var(--oro); color: var(--negro); padding: 10px 20px; text-decoration: none; font-weight: 900; border-radius: 8px; transition: 0.2s; font-size: 1rem; animation: latido 2s infinite; }
.btn-nav-primario:hover { background: var(--oro-hover); }
@keyframes latido { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

.btn-nav-secundario { background: transparent; color: var(--blanco); border: 2px solid var(--oro); padding: 8px 18px; text-decoration: none; font-weight: bold; border-radius: 8px; transition: 0.2s; font-size: 0.95rem; }
.btn-nav-secundario:hover { background: var(--oro); color: var(--negro); }

/* Móvil: Ajustar NavBar */
@media (max-width: 768px) {
    .btn-nav-secundario { display: none; }
    .nav-centro { top: 10px; }
    .logo-pop img { height: 70px; width: 70px; }
}


/* ==========================================================================
   RESTO DE LA PÁGINA
   ========================================================================== */
.wa-flotante { position: fixed; bottom: 30px; right: 30px; background-color: var(--wa-verde); width: 65px; height: 65px; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.5); z-index: 9999; transition: 0.3s; }
.wa-flotante:hover { transform: scale(1.1); }

.hero-section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 0; background-image: url('https://via.placeholder.com/1920x1080/1e293b/ffffff?text=FOTO+GIGANTE+DEL+PREMIO'); background-size: cover; background-position: center; background-attachment: fixed; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(15,23,42,0.7), rgba(15,23,42,0.95)); z-index: 1; }
.hero-contenido { position: relative; z-index: 2; padding: 20px; max-width: 800px; }
.hero-contenido h1 { color: var(--oro); font-size: 4.5rem; font-weight: 900; line-height: 1; margin-bottom: 20px; text-shadow: 2px 5px 10px rgba(0,0,0,0.8); }
.hero-contenido p { color: var(--blanco); font-size: 1.3rem; margin-bottom: 40px; }
.btn-hero { background: var(--oro); color: var(--negro); font-size: 1.3rem; font-weight: 900; padding: 20px 40px; border-radius: 50px; text-decoration: none; display: inline-block; box-shadow: 0 10px 30px rgba(250, 204, 21, 0.4); }

.titulo-seccion { text-align: center; font-size: 2.5rem; color: var(--negro); margin: 0 0 10px 0; font-weight: 900; }
.subtitulo-seccion { text-align: center; color: #64748b; font-size: 1.1rem; margin-bottom: 40px; }
.seccion-catalogo { padding: 80px 0; background: var(--gris-fondo); }
.grid-sorteos { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }
.tarjeta-sorteo { background: var(--blanco); border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.1); display: flex; flex-direction: column; position: relative; border: 2px solid transparent; transition: 0.3s; }
.tarjeta-sorteo:hover { border-color: var(--oro); transform: translateY(-5px); }

.etiqueta-vivo { position: absolute; top: 15px; left: 15px; background: #ef4444; color: white; padding: 5px 15px; font-weight: 900; border-radius: 50px; z-index: 10; box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); animation: pulse 2s infinite; }
.tarjeta-sorteo img { width: 100%; height: 280px; object-fit: cover; }

/* ==========================================================================
   DISEÑO DEL CONTADOR DE URGENCIA
   ========================================================================== */
.caja-contador { background: #000; padding: 15px; text-align: center; border-bottom: 3px solid #ef4444; position: relative; overflow: hidden; }
.titulo-contador { color: #ef4444; font-size: 0.8rem; font-weight: 900; letter-spacing: 2px; display: block; margin-bottom: 5px; }
.reloj-digital { color: var(--oro); font-family: 'Courier New', Courier, monospace; font-size: 1.8rem; font-weight: bold; text-shadow: 0 0 10px rgba(250, 204, 21, 0.5); letter-spacing: 1px; }

.info-tarjeta { padding: 30px; display: flex; flex-direction: column; flex: 1; }
.info-tarjeta h3 { margin: 0 0 15px 0; font-size: 1.6rem; color: var(--negro); font-weight: 900; text-align: center; }
.detalles-sorteo { display: flex; justify-content: space-around; margin-bottom: 25px; color: #475569; background: #f1f5f9; padding: 10px; border-radius: 10px; }
.detalles-sorteo strong { color: var(--negro); }
.btn-tarjeta { background: var(--negro); color: var(--oro); padding: 15px; text-align: center; text-decoration: none; font-weight: 900; border-radius: 12px; margin-top: auto; font-size: 1.1rem; transition: 0.2s; }
.btn-tarjeta:hover { background: #1e293b; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

.seccion-ganadores { padding: 80px 0; background: var(--blanco); }
.grid-ganadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.tarjeta-ganador { border: 2px solid #e2e8f0; border-radius: 15px; overflow: hidden; }
.tarjeta-ganador img { width: 100%; height: 250px; object-fit: cover; }
.info-ganador { padding: 20px; background: #f8fafc; }
.info-ganador h4 { margin: 0 0 10px 0; color: var(--negro); font-size: 1.2rem; }
.estado-ganador { color: #059669; font-weight: bold; }

.seccion-facebook { padding: 80px 0; background: var(--gris-fondo); }
.iframe-container { display: flex; justify-content: center; width: 100%; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.footer-publico { background: #020617; color: #64748b; text-align: center; display: flex; flex-direction: column; }
.barra-contacto-wa { background: var(--wa-verde); color: var(--blanco); padding: 15px; font-size: 1.2rem; font-weight: 600; width: 100%; }
.barra-contacto-wa strong { font-weight: 900; }
.footer-legal { padding: 30px 20px; }
.footer-legal h2 { color: var(--oro); margin-bottom: 10px; }

@media (max-width: 768px) { .hero-contenido h1 { font-size: 2.5rem; } }


/* VISTA PARA COMPUTADORA */
@media (min-width: 768px) {
    body { background-color: #94a3b8; display: flex; flex-direction: column; align-items: center; }
    .header-principal, .contenedor-web, .barra-reservados { width: 100%; max-width: 500px !important; margin-left: auto !important; margin-right: auto !important; left: 0; right: 0; }
    .contenedor-web { background: #f1f5f9; min-height: 100vh; box-shadow: 0 0 30px rgba(0,0,0,0.3); }
    .btn-whatsapp { left: calc(50% - 250px + 20px); }
}