:root {
    --primary: #2196F3;
    --primary-dark: #1976D2;
    --primary-light: #BBDEFB;
    --surface: #FFFFFF;
    --surface-variant: #F5F5F5;
    --on-surface: #212121;
    --on-surface-variant: #757575;
    --elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --elevation-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --border-radius: 8px;
    --transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif !important;
    min-height: 100vh;
}

/* Navbar Principal */
.navbar-material {
    background: var(--surface);
    box-shadow: var(--elevation-2);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1050;
    transition: var(--transition);
    will-change: padding, box-shadow;
}

.navbar-material.scrolled {
    padding: 0.5rem 0;
    box-shadow: var(--elevation-3);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

.navbar-brand:hover {
    transform: translateY(-2px);
    color: var(--primary-dark) !important;
}

.navbar-brand i {
    font-size: 1.8rem;
    background: linear-gradient(45deg, var(--primary), var(--primary-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Menú Principal */
.navbar-nav {
    gap: 0.25rem;
}

.nav-link {
    color: var(--on-surface) !important;
    font-weight: 500;
    padding: 0.75rem 1.25rem !important;
    border-radius: var(--border-radius);
    position: relative;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.nav-link:hover, .nav-link:focus {
    background: var(--surface-variant);
    color: var(--primary) !important;
    transform: translateY(-1px);
}

.nav-link.active {
    background: var(--primary-light);
    color: var(--primary-dark) !important;
    font-weight: 600;
}

/* Indicador de submenú */
.dropdown-toggle::after {
    margin-left: 0.5rem;
    transition: var(--transition);
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Dropdown/Submenú */
.dropdown-menu {
    background: var(--surface);
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--elevation-3);
    margin-top: 0.5rem;
    padding: 0.75rem 0;
    min-width: 280px;
    animation: slideDown 0.3s ease-out;
    backdrop-filter: blur(10px);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item {
    padding: 0.75rem 1.25rem;
    color: var(--on-surface);
    transition: var(--transition);
    border: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 400;
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--surface-variant);
    color: var(--primary);
    transform: translateX(8px);
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    color: var(--on-surface-variant);
    transition: var(--transition);
}

.dropdown-item:hover i {
    color: var(--primary);
    transform: scale(1.1);
}

/* Divider en dropdown */
.dropdown-divider {
    margin: 0.5rem 1rem;
    border-color: rgba(0,0,0,0.08);
}

/* Mega menú para pantallas grandes */
.mega-dropdown {
    position: static !important;
}

.mega-dropdown .dropdown-menu {
    width: 100%;
    max-width: 1200px;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Toggle button personalizado */
.navbar-toggler {
    border: none;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    background: transparent;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
    background-image: none;
    position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon {
    background: var(--on-surface);
    transition: var(--transition);
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    border-radius: 2px;
}

.navbar-toggler-icon::before {
    top: -6px;
}

.navbar-toggler-icon::after {
    top: 6px;
}

/* Animación del toggle */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Responsivo - Mobile */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--surface);
        border-radius: var(--border-radius);
        margin-top: 1rem;
        padding: 1rem;
        box-shadow: var(--elevation-2);
    }

    .navbar-nav {
        gap: 0.5rem;
    }

    .nav-link {
        padding: 1rem !important;
        border-radius: var(--border-radius);
    }

    .dropdown-menu {
        position: static !important;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: var(--surface-variant);
        border: none;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
        transform: none !important;
    }

    .dropdown-item {
        padding-left: 2rem;
    }
}

.content-area {
    margin-top: 0;
    padding: 0;
}

.hero-section {
    background: var(--surface);
    border-radius: var(--border-radius);
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--elevation-1);
    text-align: center;
}

.hero-title {
    color: var(--on-surface);
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-subtitle {
    color: var(--on-surface-variant);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Mejoras adicionales */
.badge-new {
    background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    margin-left: 0.5rem;
    font-weight: 500;
}

/* Hover effects mejorados */
/* .dropdown:hover .dropdown-menu {
    display: block;
} */

/* Scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Loading animation */
.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 80%;
}

.nav-link,
.dropdown-item {
  position: relative;
  overflow: hidden; /* Esto evita el desbordamiento del ripple */
}

.navbar-toggler {
  border: none;
  padding: .5rem;
}

.navbar-toggler:focus { box-shadow: none; }

/* El contenedor del icono NO debe tener background sólido */
.navbar-toggler-icon{
  position: relative;
  width: 24px;
  height: 18px;          /* alto del área de clic, no de la barra */
  background: transparent;
  display: inline-block;
}

/* Las barras */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--on-surface);
  border-radius: 2px;
  transition: transform .3s ease, top .3s ease, opacity .2s ease;
}

/* barra central */
.navbar-toggler-icon::before { top: 0; }
.navbar-toggler-icon::after  { top: 16px; }

.navbar-toggler-icon span{
  position: absolute;
  left: 0; right: 0;
  top: 8px;                /* centro */
  height: 2px;
  background: var(--on-surface);
  border-radius: 2px;
  transition: opacity .2s ease;
}

/* Estados al abrir (X) */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  top: 8px; transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  top: 8px; transform: rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon span {
  opacity: 0;
}


.ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.2;
    pointer-events: none;
    animation: ripple-anim 0.45s forwards;
}
@keyframes ripple-anim {
    from { transform: scale(0); opacity: 0.4; }
    to   { transform: scale(2.5); opacity: 0; }
}

.navbar-collapse {
  transition: none !important; /* Dejar que Bootstrap maneje la transición */
}

/* Cuando la navegación está animándose, pausar otras animaciones */
.nav-animating .nav-link::before {
  transition: none !important;
}

.nav-animating .nav-link {
  transition: none !important;
}

.nav-animating .dropdown-item {
  transition: none !important;
}

/* Optimización para mejor rendimiento durante animaciones */
.nav-animating * {
  pointer-events: none;
}

.nav-animating .navbar-toggler {
  pointer-events: auto;
}

/* Asegurar que las transiciones del ripple no interfieran */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.2;
    pointer-events: none;
    animation: ripple-anim 0.45s forwards;
    will-change: transform, opacity; /* Optimización GPU */
}

@keyframes ripple-anim {
    from { 
        transform: scale(0); 
        opacity: 0.4; 
    }
    to { 
        transform: scale(2.5); 
        opacity: 0; 
    }
}

/* Mejorar rendimiento del navbar durante scroll */
.navbar-material {
    background: var(--surface);
    box-shadow: var(--elevation-2);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1050;
    transition: var(--transition);
    will-change: padding, box-shadow;
    /* Añadir para mejor rendimiento */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimizar transiciones para elementos que cambian frecuentemente */
.nav-link {
    color: var(--on-surface) !important;
    font-weight: 500;
    padding: 0.75rem 1.25rem !important;
    border-radius: var(--border-radius);
    position: relative;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    /* Optimización GPU */
    will-change: transform, background-color;
    transform: translateZ(0);
}

/* Asegurar que el toggle funcione suavemente */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
    transition: transform 0.2s ease, top 0.2s ease, opacity 0.15s ease;
    will-change: transform, top, opacity;
}

/* Prevenir layout shifts durante las animaciones */
.navbar-nav {
    gap: 0.25rem;
    min-height: 0; /* Evitar saltos de layout */
}

/* Responsivo optimizado */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: var(--surface);
        border-radius: var(--border-radius);
        margin-top: 1rem;
        padding: 1rem;
        box-shadow: var(--elevation-2);
        /* Importante: NO transiciones aquí */
        transition: none !important;
    }

    /* Optimizar para móvil */
    .nav-link {
        padding: 1rem !important;
        border-radius: var(--border-radius);
        /* Reducir work durante animaciones móviles */
        will-change: auto;
    }

    .nav-animating .nav-link {
        will-change: auto;
        transform: none;
    }
}

/* Estilos para el logo */
.navbar-logo {
    height: 60px; /* Ajusta según tu diseño */
    width: auto;
    max-width: 150px;
    object-fit: contain; /* Mantiene proporciones */
    transition: var(--transition);
    padding: 0;
    margin: 0;
}

/* Logo más pequeño cuando el navbar hace scroll */
.navbar-material.scrolled .navbar-logo {
    height: 35px;
}

/* Hover effect para el logo */
.navbar-brand:hover .navbar-logo {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Responsive - logo más pequeño en móvil */
@media (max-width: 767.98px) {
    .navbar-logo {
        height: 35px;
        max-width: 120px;
    }
    
    .navbar-material.scrolled .navbar-logo {
        height: 32px;
    }
    
    .brand-text {
        font-size: 1.3rem;
        margin-left: 0.5rem;
    }
}

/* Si tu logo tiene fondo blanco y quieres que se adapte al tema */
.navbar-logo {
    /* Para logos con fondo transparente */
    background: transparent;
}

/* Si necesitas un filtro para logos oscuros en navbar claro */
.navbar-logo.dark-logo {
    filter: none;
}

/* Para modo oscuro (si lo implementas) */
@media (prefers-color-scheme: dark) {
    .navbar-logo.adaptable {
        filter: invert(1) hue-rotate(180deg);
    }
}

/* Animación suave al cargar */
.navbar-logo {
    opacity: 0;
    animation: fadeInLogo 0.5s ease forwards;
}

@keyframes fadeInLogo {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fallback si la imagen no carga */
.navbar-brand {
    min-width: 150px; /* Evita saltos de layout */
}

.navbar-logo[alt]:after {
    content: attr(alt);
    display: block;
    font-weight: 700;
    color: var(--primary);
    font-size: 1.2rem;
}

/* Para logos anchos como Bibb Holandés - tamaño compacto */
.navbar-logo.compact {
    height: 35px;
    max-width: 140px;
}

.navbar-material.scrolled .navbar-logo.compact {
    height: 32px;
    max-width: 120px;
}

/* Para logos cuadrados */
.navbar-logo.square {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.hero-landing { 
    margin-top: -100px;
}

/* v18: remove strike-through lines on nav links, keep caret on dropdowns */
.navbar .nav-link,
.navbar .nav-link:hover,
.navbar .nav-link:focus{
    text-decoration: none !important;
}
.navbar .nav-link::before,
.navbar .nav-link::after,
.navbar-nav .nav-item .nav-link::before,
.navbar-nav .nav-item .nav-link::after{
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
.navbar .dropdown > a.dropdown-toggle{
    position: relative;
    padding-right: 1.1rem;
}
.navbar .dropdown > a.dropdown-toggle::after{
    content: "▾" !important;
    display: inline-block !important;
    position: absolute;
    right: .35rem; top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .22s ease;
    font-size: .9em;
    opacity: .9;
}
.navbar .dropdown.open > a.dropdown-toggle::after{
    transform: translateY(-50%) rotate(180deg);
}

.navbar .dropdown-menu .dropdown-item{
    transition: background-color .18s ease, color .18s ease;
}


/* Submenú de OFERTA EDUCATIVA: caja blanca translúcida */
.navbar .navbar-nav > .dropdown:nth-of-type(2) .dropdown-menu{
    padding: 8px;
    backdrop-filter: blur(6px);                 /* glass suave (si está disponible) */
    -webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
    overflow: hidden;
    min-width: 240px;
}

/* Items: fondo transparente y texto oscuro */
.navbar .navbar-nav > .dropdown:nth-of-type(2) .dropdown-item{
    background: transparent !important;
    color: #111 !important;
    padding: 10px 14px;
    box-shadow: none !important;
}

/* Hover/Focus: realce sutil (no invasivo) */
@media (hover:hover){
    .navbar .navbar-nav > .dropdown:nth-of-type(2) .dropdown-item:hover{
        background: rgba(255,255,255,.55) !important;
    }
}
.navbar .navbar-nav > .dropdown:nth-of-type(2) .dropdown-item:focus-visible{
    outline: 2px solid rgba(0,0,0,.15);
    outline-offset: 2px;
}

/* Reset de los colores fijos que pusimos antes por ID */
#nav-daycare, #nav-kinder, #nav-primaria, #nav-secundaria{
    background: transparent !important;
    color: #111 !important;
    box-shadow: none !important;
}


/* Daycare */
#nav-daycare {
    background-image: linear-gradient(90deg, #ff7e29 0%, #ffb055 100%) !important;
    color: #fff !important;
    font-weight: bold;
}

/* Kinder */
#nav-kinder{
    background-image: linear-gradient(90deg, #ff7e29 0%, #ffb055 100%) !important;
    color: #fff !important;
    font-weight: bold;
}

/* Primaria */
#nav-primaria{
    background-image: linear-gradient(90deg, #0052cc 0%, #0000cc 100%) !important;
    color: #fff !important;
    font-weight: bold;
}

/* Secundaria */
#nav-secundaria{
    background-image: linear-gradient(90deg, #25D366 0%, #25D366 100%) !important;
    color: #fff !important;
    font-weight: bold;
}

/* === WhatsApp FAB aislado === */
.wa {                    /* contenedor fijo en la esquina */
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 3000;
}

.wa__btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,.28);
    text-decoration: none;
    cursor: pointer;
}

.wa__tip {              /* tooltip pegado al centro del botón */
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);       /* a la izquierda del botón */
    transform: translateY(-50%) translateX(8px);
    opacity: 0;
    pointer-events: none;

    background: #fff;
    color: #333;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    font: 14px/1.2 'Roboto', sans-serif;
    transition: opacity .22s ease, transform .22s ease;
    z-index: 3001;
}

.wa__tip::after {       /* flecha hacia el botón */
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
}

.wa:hover .wa__tip,
.wa:focus-within .wa__tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* En móvil: muestra el tooltip arriba del botón */
@media (max-width: 600px){
    .wa__tip{
        top: auto;
        bottom: calc(100% + 0px);
        right: 0;
        transform: none;
    }
    .wa__tip::after{
        top: auto;
        bottom: -6px;
        right: 16px;
        transform: none;
        border-width: 6px 6px 0 6px;
        border-color: #fff transparent transparent transparent;
    }
}


/* animación en el botón (sin media query) */
.wa__btn{
    animation: bounce 1.5s infinite;
    transform-origin: center bottom;
    will-change: transform;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-12px); }
    60% { transform: translateY(-6px); }
}

/* Pausar rebote al hacer hover */
.wa__btn:hover {
    animation-play-state: paused;
}

.navbar-material { border-bottom: 0; }