:root{
      --brand:#0d6efd; --brand-2:#0b5ed7; --ink:#0f172a; --muted:#64748b;
      --cpes:#2563eb; --epp:#16a34a; --jin:#f59e0b;
}

body{ font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); font-size:clamp(0.98rem, 0.9rem + 0.3vw, 1.05rem); 
    }
.brand-title{ 
    font-family:'Montserrat', sans-serif; font-weight:800; letter-spacing:.2px; font-size:clamp(1.05rem, 0.9rem + 1vw, 1.35rem); 
    }
h1,h2,h3{ font-family:'Montserrat', sans-serif; font-weight:800; letter-spacing:.2px; 
    }
.navbar{ backdrop-filter: blur(6px); 
    }
.nav-link{ font-weight:700; 
    }

/* ===== SUB-BARRA debajo del navbar (gradiente + container) ===== */
.subbar {
    background: linear-gradient(90deg, #0d6efd, #2563eb 45%, #60a5fa);
    color:#fff;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(13,110,253,.16);
    }
.subbar .subbar-wrap{ 
    padding:.5rem 0; 
    }
.subbar-link{ text-decoration:none; color:#fff; font-weight:800; font-size:clamp(.9rem, .88rem + .3vw, 1rem); 
    }
.subbar-link:hover{ 
    text-decoration:underline; 
    }

/* ===== carrusel  ===== */
.carousel.carousel-fade .carousel-item{ 
    transition: opacity .8s ease-in-out; 
    }
.carousel-badge{
      position:absolute; top:50%; left:0; transform:translate(-110%, -50%);
      background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
      padding:.7rem 1rem; border-radius:0 .75rem .75rem 0; box-shadow:0 8px 24px rgba(0,0,0,.2);
      min-width: 210px; font-weight:800; letter-spacing:.4px; opacity:0;
    }
.carousel-item.active .carousel-badge{ animation: slideIn .9s forwards .2s; 
    }
    
/* ===== Ajuste de imágenes del carrusel ===== */
.carousel-item img {
    width: 100%;
    height: 76vh;          
    object-fit: cover;    
    object-position: center;
}

/* ===== egreso  ===== */
.card-img-top {
    height: 250px;       
    object-fit: cover;   
    object-position: center; 
}

.card-img-top {
    height: 250px;          
    object-fit: cover;
    transition: transform 0.6s ease; 
    transform-origin: center center; 
}

/* Efecto zoom contenido */
.card:hover .card-img-top {
    transform: scale(1.08);  
}

/* estudiante */
.student-card-elegant {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.2rem 1rem;
    text-align: center;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover */
.student-card-elegant:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

/* Nombre */
.student-name {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: #111827;
}

/* Iconos */
.student-icon {
    font-size: 1.4rem;
}

/* Colores por género */
.student-icon.male {
    color: #2563eb;   
}

.student-icon.female {
    color: #db2777; 
}

/* icono estudiante */
.icono-escuela {
    width: 32px;     
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
}

/* --- CARD EXCLUSIVO PARA GESTIÓN EDUCATIVA --- */
.gestion-card {
    transition: all 0.35s ease;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}

/* hover */
.gestion-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.20);
}

/* icono animado */
.gestion-card:hover i {
    transform: scale(1.12);
    transition: transform .3s ease;
}

@keyframes slideIn{ 
        0%{ transform:translate(-110%, -50%); opacity:0; } 
        100%{ transform:translate(0, -50%); opacity:1; } 
    }
.carousel-caption{ background: rgba(0,0,0,.45); border-radius: 1rem; padding: 1rem 1.25rem; 
    }

/* ===== Intro del proyecto (H1 ===== */
.intro-project{
    background: linear-gradient(180deg, #f8fbff, #ffffff);
    border-bottom: 1px solid #eef2ff;
    }

/* ===== CARDS Instituciones ===== */
.card-viva{
    border:none; border-radius:1.1rem; overflow:hidden; position:relative;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    transition:transform .22s ease, box-shadow .22s ease;
}

/* línea inferior más delgada (antes 10px) */
.card-viva::before{ content:""; position:absolute; inset:auto 0 0 0; height:6px; background:var(--accent, var(--brand)); 
    }
.card-viva::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 0 0 2px var(--accent, var(--brand)); opacity:.20; pointer-events:none; 
    }
.card-viva:hover{ transform:translateY(-4px); box-shadow:0 16px 42px rgba(0,0,0,.14); 
    }
.card-img-zoom{ height:400px; object-fit:cover; transition:transform .5s ease, filter .5s ease; 
    }
.card-viva:hover .card-img-zoom{ transform:scale(1.06); filter:saturate(1.1); 
    }
.card-viva h3{ font-weight:800; 
    }
.accent-cpes{ --accent: var(--cpes); 
    }
.accent-epp{ --accent: var(--epp); 
    }
.accent-jin{ --accent: var(--jin); 
    }
.quick-links a{ font-weight:700; font-size:.95rem; 
    }

/* ===== Tarjetas Gestión ===== */
.card-gestion{ border:none; border-radius:1.1rem; background:#fff; position:relative; overflow:hidden;
    box-shadow:0 8px 26px rgba(0,0,0,.08); transition:transform .2s ease, box-shadow .2s ease; 
    }
.card-gestion:hover{ transform:translateY(-3px); box-shadow:0 12px 34px rgba(0,0,0,.12); 
    }
.icon-wrap{ width:56px; height:56px; display:grid; place-items:center; border-radius:14px; color:#fff; font-size:26px; font-weight:700; 
    }
.i-blue{ background:#2563eb; 
    } 
.i-red{ background:#ef4444; 
    } 
.i-green{ background:#16a34a; 
    } 
.i-amber{ background:#f59e0b; 
    }

/* ===== Footer / WhatsApp ===== */
.site-footer{ background:#0b1220; color:#c8d1e1; 
    }
.site-footer a{ color:#e8eefc; text-decoration:none; 
    }
.site-footer a:hover{ text-decoration:underline; 
    }
.fab-float{ position: fixed; right: 16px; bottom: 16px; z-index: 1040; 
    }

/* Accesibilidad */
a:focus, button:focus{ outline:3px solid #94b6ff; outline-offset:2px; 
    }

/* Contacto/Ubicación alturas */
.equal-row { align-items: stretch; }
.card-equal { height: 100%; display: flex; flex-direction: column; }
.map-body { flex: 1 1 auto; }
.map-body iframe { width: 100%; height: 100%; border: 0; border-radius: 0 0 1rem 1rem; }

/* colegios-pes34 */
.hero-img{
    max-height:420px;object-fit:cover;
    }
.timeline::before{
    content:"";position:absolute;left:1rem;top:0;bottom:0;width:3px;background:#0d6efd
    }
.timeline-item{
    position:relative;padding-left:2.5rem
    }
.timeline-item::before{
    content:"";position:absolute;left:.6rem;top:.35rem;width:.9rem;height:.9rem;border:2px solid #0d6efd;background:#fff;border-radius:50%
    }
.gallery-thumb{
    border-radius:.5rem;overflow:hidden
    }

/* Media Queries*/
@media (max-width: 575.98px){ 
    .map-body { min-height: 320px; 
    } 
}
@media (min-width: 576px){ 
    .map-body { min-height: 380px; 
    } 
}

/* ----- AJUSTES SOLO PARA CELULAR (pantallas menores a 576px) ----- */
@media (max-width: 576px) {

    /* Ocultar la información del carrusel */
    .carousel-caption {
        display: none !important;
    }

    /* Si en algún carrusel querés texto, hacerlo negro */
    .carousel-caption h2,
    .carousel-caption p {
        color: #000 !important;
        text-shadow: none !important;
    }
}

/* ===== Ajustes del carrusel SOLO en celular ===== */
@media (max-width: 575.98px) {

    /* Texto del carrusel en negro (si se muestra) */
    #hero .carousel-caption h2,
    #hero .carousel-caption p {
        color: #000 !important;
        text-shadow: none !important;
        font-size: 1rem;
    }

    /* OCULTAR SOLO la caption del primer slide en modo celular */
    #hero .carousel-caption.caption-principal {
        display: none !important;
    }
}

/* En celular: altura más baja para que no tape todo */
@media (max-width: 768px) {
    .carousel-item img {
        height: 45vh;
    }
}