:root {
    --color-azul: #003366;
    --color-azul-oscuro: #001a33;
    --color-naranja: #FF6600;
}

body { font-family: 'Poppins', sans-serif; overflow-x: hidden; padding-top: 0; }

/* FIX: Margen para que el scroll pare antes del titulo y no lo tape el menu */
section, header { scroll-margin-top: 90px; }

/* Navbar */
.navbar { transition: all 0.4s ease; padding: 15px 0; }
.navbar-transparent { background: transparent; position: absolute; width: 100%; z-index: 1000; }
.navbar-scrolled { background: var(--color-azul); padding: 10px 0; position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1); animation: slideDown 0.3s; }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.text-naranja { color: var(--color-naranja) !important; }
.text-azul { color: var(--color-azul) !important; }

/* Hero */
.hero-section {
    background: radial-gradient(circle at center, #004488 0%, var(--color-azul-oscuro) 100%);
    padding-top: 180px; padding-bottom: 80px; position: relative; color: white; min-height: 80vh; display: flex; align-items: center;
}
.hero-card-visual { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); }

/* Componentes */
.divider-naranja { width: 50px; height: 4px; background: var(--color-naranja); margin: 15px 0; border-radius: 10px; }

/* Botones */
.btn-naranja { background: var(--color-naranja); color: white; border: none; padding: 12px 35px; border-radius: 50px; transition: 0.3s; font-weight: 600; }
.btn-naranja:hover { background: #e65c00; transform: translateY(-3px); color: white; }

.btn-outline-custom { color: var(--color-azul); border: 2px solid var(--color-azul); background: transparent; padding: 10px 0; border-radius: 50px; font-weight: 600; transition: 0.3s; }
.btn-outline-custom:hover { background: var(--color-azul); color: white; }

/* Tarjetas */
.card-custom { border: none; border-radius: 15px; border-top: 5px solid var(--color-azul); box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; background: white; overflow: hidden; position: relative; }
.card-custom:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.card-recomendada { border-top-color: #198754; }

/* Tarjeta Inactiva (Moto) */
.card-disabled { background-color: #f8f9fa; border-top-color: #6c757d; opacity: 0.9; }
.card-disabled:hover { transform: none; box-shadow: none; }
.text-secondary { color: #6c757d !important; }

/* Ribbon */
.ribbon-corner { position: absolute; top: 0; right: 0; background: #198754; color: white; font-size: 0.75rem; font-weight: bold; padding: 5px 15px; border-bottom-left-radius: 15px; z-index: 10; }

/* Badge Popular */
.badge.bg-azul-claro { background-color: rgba(0, 51, 102, 0.1); border: 1px solid rgba(0, 51, 102, 0.2); }

/* Precios Promo */
.price-wrapper .old-price { text-decoration: line-through; color: #999; font-size: 1rem; margin-right: 10px; }
.price-wrapper.promo-active h2 { color: #dc3545; }

/* Dashboard Estudiantes */
.bg-azul { background-color: var(--color-azul) !important; }
.progress { background-color: #e9ecef; border-radius: 50px; overflow: hidden; }
.card-body h1 { letter-spacing: -2px; }

/* WhatsApp & Social */
.float-whatsapp { position: fixed; width: 60px; height: 60px; bottom: 30px; right: 30px; background: #25d366; color: white; border-radius: 50%; text-align: center; font-size: 32px; display: flex; align-items: center; justify-content: center; z-index: 2000; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.3s; }
.float-whatsapp:hover { background: #128C7E; color: white; transform: scale(1.1); }
.social-icon { display: inline-flex; width: 45px; height: 45px; background: var(--color-azul); color: white; border-radius: 50%; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none; transition: 0.3s; font-size: 1.2rem; }
.social-icon:hover { background: var(--color-naranja); color: white; transform: translateY(-3px); }
.icon-box { font-size: 3rem; color: var(--color-naranja); margin-bottom: 1rem; }
.info-tooltip { color: var(--color-azul); margin-left: 5px; cursor: pointer; }