:root {
    --primary: #003366;
    --accent: #FF6600;
    --hueso: #f8f9fa;
    --puro: #ffffff;
    --transition: all 0.4s ease;
}

body { font-family: 'Poppins', sans-serif; margin: 0; background: var(--hueso); color: #333; scroll-behavior: smooth; overflow-x: hidden; }

/* Navbar con Logo en Esquina */
.navbar { background: var(--puro); padding: 15px 0; position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.navbar .container { display: flex; justify-content: space-between; align-items: center; padding: 0 5%; }

.logo-container { display: flex; align-items: center; gap: 15px; }
.main-logo { width: 50px; height: 50px; border-radius: 50%; transition: var(--transition); cursor: pointer; border: 2px solid var(--accent); }
/* EFECTO HOVER LOGOTIPO */
.main-logo:hover { transform: rotate(360deg) scale(1.2); box-shadow: 0 0 15px var(--accent); }

.logo-text { font-size: 1.2rem; color: var(--primary); margin: 0; font-family: 'Playfair Display', serif; }
.logo-text span { color: var(--accent); }

.nav-links { list-style: none; display: flex; gap: 20px; margin: 0; }
.nav-links a { text-decoration: none; color: var(--primary); font-weight: 600; transition: var(--transition); }
.nav-links a:hover { color: var(--accent); }

/* Hero Section */
.hero { 
    background: linear-gradient(rgba(0,51,102,0.7), rgba(0,51,102,0.7)), url('image/hero-bg.png'); 
    height: 100vh; 
    background-size: cover; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    color: white; 
}

/* Botones */
.btn-main { background: var(--accent); color: white; padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: bold; transition: var(--transition); }
.btn-secondary { border: 2px solid white; color: white; padding: 15px 35px; border-radius: 50px; text-decoration: none; font-weight: bold; transition: var(--transition); }
.btn-main:hover { background: #e65c00; transform: translateY(-5px); }

/* Secciones Generales */
section { padding: 100px 10%; }
.section-title { text-align: center; font-size: 2.5rem; color: var(--primary); font-family: 'Playfair Display', serif; margin-bottom: 60px; }

/* Beneficios Card */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.benefit-card { background: var(--puro); padding: 40px; border-radius: 15px; text-align: center; transition: var(--transition); box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.benefit-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.benefit-card i { font-size: 3rem; color: var(--accent); margin-bottom: 20px; }

/* Materias */
.grid-materias { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card { background: var(--puro); border-radius: 20px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.img-container { position: relative; height: 250px; overflow: hidden; }
.img-container img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.overlay { position: absolute; top: 0; background: rgba(255,102,0,0.85); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; opacity: 0; transition: 0.4s; }
.card:hover .img-container img { transform: scale(1.15); }
.card:hover .overlay { opacity: 1; }
.card-info { padding: 25px; }

/* Galería (Estilo Cuadrícula Limpia) */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.gallery-item img { width: 100%; height: 250px; object-fit: cover; border-radius: 10px; transition: var(--transition); cursor: pointer; }
.gallery-item img:hover { filter: brightness(70%); transform: scale(0.98); }

/* Formulario Portal */
.contact-portal { background: var(--primary); }
.form-wrapper { background: var(--puro); padding: 50px; border-radius: 30px; max-width: 800px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.portal-form .input-group { display: flex; gap: 20px; margin-bottom: 20px; }
.portal-form input, .portal-form select, .portal-form textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 10px; font-family: inherit; }
.btn-submit { width: 100%; padding: 18px; background: var(--accent); color: white; border: none; border-radius: 10px; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: var(--transition); }

/* WhatsApp y Subir */
.whatsapp-btn { position: fixed; bottom: 30px; right: 30px; background: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 1000; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
#scrollTop { position: fixed; bottom: 105px; right: 35px; background: var(--primary); color: white; border: none; width: 50px; height: 50px; border-radius: 12px; cursor: pointer; display: none; z-index: 1000; }
/* ... (Todo tu CSS anterior se mantiene igual) ... */

.form-spacer {
    height: 35px; /* Espacio entre selector y mensaje */
    width: 100%;
}

.whatsapp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* ESTILOS PARA LA BARRA DE INFORMACIÓN */
.info-quick-bar {
    margin-top: -50px; /* Hace que flote sobre el Hero */
    position: relative;
    z-index: 20;
    padding: 0 5%;
}

.info-box {
    background: var(--puro);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-bottom: 4px solid var(--accent);
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-item i {
    font-size: 2rem;
    color: var(--accent);
}

.info-text span {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 1px;
}

.info-text p {
    margin: 0;
    font-size: 1rem;
    color: #555;
    font-weight: 400;
}

.info-divider {
    width: 1px;
    height: 50px;
    background: #eee;
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .info-box {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        margin-top: -30px;
    }
    .info-item {
        flex-direction: column;
    }
    .info-divider {
        display: none;
    }
}