/* Compiled CSS (generado a partir de scss/style.scss) */

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: #222;
  background: #fff;
  padding-top: clamp(60px, 10vw, 70px);
}

:root{
  --brand:#0d6efd;
  --brand-700:#0b5ed7;
  --muted:#6c757d;
  --surface:#ffffff;
  --accent:#0dcaf0;
}

/* Accessibility: visible skip-link */
.skip-link{position:absolute;left:12px;top:12px;background:#000;color:#fff;padding:8px 10px;border-radius:4px;z-index:999;transform:translateY(-120%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}

/* Navbar responsive improvements */
.navbar{padding:clamp(0.3rem, 1vw, 0.5rem) 0}
.navbar-brand{display:flex;align-items:center;gap:0.3rem;font-size:clamp(0.75rem, 1.8vw, 0.9rem)}
@media(max-width:768px){.navbar-brand{gap:0.2rem}}
.navbar-brand img{width:clamp(32px, 6vw, 40px);height:clamp(32px, 6vw, 40px)}
.navbar-brand div{display:flex;flex-direction:column;justify-content:center}
.navbar-brand div > div{font-weight:700;line-height:1;font-size:clamp(0.65rem, 1.5vw, 0.85rem)}
.navbar-brand small{font-size:clamp(0.55rem, 0.9vw, 0.65rem);margin-top:2px;line-height:1}
.nav-link{font-size:clamp(0.75rem, 1.2vw, 0.85rem);padding:0.3rem clamp(0.3rem, 1vw, 0.6rem);white-space:nowrap}
.navbar-nav{gap:clamp(0.15rem, 0.4vw, 0.35rem)}
@media(max-width:768px){.nav-link{font-size:0.8rem;padding:0.25rem 0.4rem}}
@media(max-width:576px){.nav-link{font-size:0.75rem;padding:0.2rem 0.3rem}}
.dropdown-menu{font-size:clamp(0.8rem, 1.1vw, 0.9rem)}
/* Arreglar dropdown que se sale de la página */
.navbar-nav .dropdown-menu{
  left:0 !important;
  right:auto !important;
  min-width:200px;
}
@supports(--css:variables){
  .navbar-nav .dropdown-menu{
    transform:translateX(0) !important;
  }
}

.hero {
  background: linear-gradient(180deg, rgba(13,110,253,0.06), transparent 60%);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: .5rem;
}

.person-card img {
  object-fit: cover;
}

/* Person photo: circular/oval crop focused on the face */
.person-photo{width:140px;height:140px;margin:0 auto;border-radius:50%;overflow:hidden;display:block}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media(min-width:768px){.person-photo{width:180px;height:180px}}
@media(min-width:1200px){.person-photo{width:200px;height:200px}}

/* Modal person image adjustments */
#personModalImg{max-width:100%;height:auto;display:block}

/* Center specific section headings */
#quienes h2, #vision h2, #equipo h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 1rem;
}

.person-card{transition:transform .18s ease, box-shadow .18s ease}
.person-card:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(13,110,253,0.12)}

.header-banner{position:relative;overflow:hidden;border-radius:.5rem}
.header-banner img{display:block;width:100%;height:auto;filter:contrast(.98) saturate(.95)}
.header-banner .overlay{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0));display:flex;align-items:center}

.btn-cta{background:var(--brand);color:#fff;border:none;padding:clamp(0.5rem, 1vw, 0.6rem) clamp(0.8rem, 2vw, 1rem);border-radius:.375rem;text-decoration:none;display:inline-block;font-size:clamp(0.85rem, 1.5vw, 0.95rem);white-space:nowrap}
.btn-cta:hover{background:var(--brand-700);color:#fff}

.navbar .nav-link.active{font-weight:600;color:var(--brand) !important}

@media (min-width: 992px) {
  body {
    font-size: 1rem;
  }
}

.muted {
  color: #6c757d !important;
}

/* Small helpers */
.card.person-card { overflow: hidden; }

/* Contact form styles */
.contact-form-wrapper{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.08);padding:2rem;border:1px solid rgba(0,0,0,0.05)}
@media(max-width:576px){.contact-form-wrapper{padding:1.5rem;box-shadow:0 2px 12px rgba(0,0,0,0.06)}}
.contact-form-wrapper .form-header{margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f0f0f0}
.contact-form-wrapper .form-header h3{margin:0 0 0.5rem 0;color:#333;font-size:1.5rem;font-weight:700}
@media(max-width:576px){.contact-form-wrapper .form-header h3{font-size:1.25rem}}
.contact-form-wrapper .form-header p{margin:0;font-size:0.95rem}
@media(max-width:576px){.contact-form-wrapper .form-header p{font-size:0.9rem}}
.contact-form .form-group{margin-bottom:1.25rem}
.contact-form label{display:block;font-weight:600;margin-bottom:0.5rem;color:#444;font-size:0.95rem}
@media(max-width:576px){.contact-form label{font-size:0.9rem}}
.contact-form .form-control{width:100%;padding:0.75rem 1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:all 0.3s ease;font-family:inherit}
@media(max-width:576px){.contact-form .form-control{padding:0.65rem 0.85rem;font-size:0.95rem}}
.contact-form .form-control:focus{outline:none;border-color:#0d6efd;box-shadow:0 0 0 0.2rem rgba(13,110,253,0.15)}
.contact-form .form-control::placeholder{color:#999}
.contact-form textarea.form-control{min-height:140px;resize:vertical}
.contact-form .submit-button{padding:0.875rem 2rem;font-size:1.05rem;font-weight:600;border-radius:8px;transition:all 0.3s ease;border:none}
@media(max-width:576px){.contact-form .submit-button{padding:0.75rem 1.5rem;font-size:0.95rem}}
.contact-form .submit-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(13,110,253,0.3)}
.contact-form .form-text{display:block;margin-top:0.5rem;font-size:0.875rem}
@media(max-width:576px){.contact-form .form-text{font-size:0.8rem}}
.contact-success{padding:0.75rem 1rem;background:#e6ffed;border:1px solid #baf0bf;color:#084b1f;margin-bottom:1rem;border-radius:8px}
@media(max-width:576px){.contact-success{padding:0.6rem 0.85rem;font-size:0.9rem}}
.contact-error{padding:0.6rem 1rem;background:#fff4f4;border:1px solid #f4c2c2;color:#7a1b1b;margin-bottom:1rem;border-radius:8px}
@media(max-width:576px){.contact-error{padding:0.5rem 0.85rem;font-size:0.9rem}}

/* List group responsive styles */
.list-group-item{padding:clamp(0.75rem, 2vw, 1rem) clamp(1rem, 3vw, 1.25rem)}
@media(max-width:768px){.list-group-item.d-flex{flex-direction:column}}
.list-group-item h5{font-size:1rem;margin:0 0 0.25rem 0;word-break:break-word}
@media(max-width:576px){.list-group-item h5{font-size:0.95rem}}
.list-group-item .text-muted.small{font-size:0.85rem}
@media(max-width:576px){.list-group-item .text-muted.small{font-size:0.8rem}}
@media(max-width:768px){.list-group-item > div:last-child{margin-top:0.75rem;display:flex;gap:0.5rem;flex-wrap:wrap}}

/* Admin table */
.admin-table{width:100%;border-collapse:collapse;margin-top:1rem;font-size:clamp(0.8rem, 1.5vw, 1rem)}
@media(max-width:768px){.admin-table{font-size:0.85rem}}
@media(max-width:576px){.admin-table{font-size:0.75rem}}
.admin-table th,.admin-table td{border:1px solid #eee;padding:clamp(0.35rem, 1vw, 0.5rem);vertical-align:top}
.admin-table pre.msg{white-space:pre-wrap;margin:0;font-family:inherit;word-break:break-word}
.btn-plain{background:transparent;border:1px solid #ddd;padding:0.25rem 0.4rem;border-radius:4px;cursor:pointer;font-size:clamp(0.7rem, 1vw, 0.8rem)}
@media(max-width:576px){.btn-plain{padding:0.2rem 0.35rem}}

/* Nosotros / Programas / Contacto sections styling */
.nosotros, .programas, .contacto { padding: clamp(2rem, 5vw, 3rem) 1rem; }
.nosotros { background: linear-gradient(180deg, rgba(13,110,253,0.03), transparent); }
.nosotros h2, .programas h2, .contacto h2 { text-align:center; margin-bottom:clamp(1rem, 2vw, 1.25rem); color:var(--brand); font-size: clamp(1.5rem, 3vw, 2rem); }
.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(0.8rem, 2vw, 1.1rem)}
@media(max-width:576px){.content-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}
.content-item{background:#fff;padding:clamp(0.85rem, 2vw, 1rem);border-radius:8px;box-shadow:0 6px 18px rgba(13,110,253,0.04);text-align:center;transition:transform .18s ease, box-shadow .18s ease}
@media(max-width:576px){.content-item{padding:0.75rem}}
.content-item i{font-size:24px;color:var(--brand);display:block;margin-bottom:0.5rem}
@media(max-width:576px){.content-item i{font-size:20px}}
.content-item h3{font-size:clamp(0.9rem, 1.5vw, 1rem);margin:0.5rem 0 0.25rem}
.content-item p{font-size:clamp(0.8rem, 1.2vw, 0.9rem);margin:0}
.content-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(13,110,253,0.08)}

.programs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
@media(max-width:576px){.programs-grid{grid-template-columns:1fr}}
@media(min-width:768px){.programs-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.program-card{background:#fff;border-radius:10px;padding:1rem;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.04);transition:transform .18s ease}
@media(max-width:576px){.program-card{padding:0.85rem}}
.program-header{font-size:0}
.program-header svg{font-size:32px;color:var(--brand);display:inline-block}
@media(max-width:576px){.program-header svg{width:28px;height:28px}}
.program-card h3{margin-top:.5rem;font-size:1rem;word-break:break-word}
@media(max-width:576px){.program-card h3{font-size:0.9rem;margin-top:0.35rem}}
.program-card p{font-size:0.9rem;line-height:1.4}
@media(max-width:576px){.program-card p{font-size:0.8rem}}
.learn-more{display:inline-block;margin-top:.75rem;color:var(--brand);font-weight:600}

/* Egresados gallery */
.egresados-grid{
  /* Masonry-like column layout: items flow vertically and reflow as images are added */
  column-gap:0.9rem;
  column-fill: balance;
  column-count: 3;
}
.egresado-item{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.06);display:inline-block;margin:0 0 0.9rem;width:100%;break-inside:avoid;vertical-align:top;position:relative}
.egresado-item img{width:100%;height:auto;object-fit:cover;display:block;transition:transform .25s ease}
.egresado-item:focus{outline:3px solid rgba(13,110,253,0.12)}
.egresado-item:hover img{transform:scale(1.04)}

/* Delete overlay: centered button over thumbnail */
.egresado-item .delete-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.28);opacity:0;transition:opacity .12s ease;pointer-events:none}
.egresado-item:hover .delete-overlay{opacity:1;pointer-events:auto}
.egresado-item .delete-overlay .delete-btn{background:rgba(220,53,69,0.95);border:none;color:#fff;padding:.4rem .6rem;border-radius:.35rem;cursor:pointer;font-size:.9rem}
.egresado-item .delete-overlay .delete-btn:hover{background:rgba(200,40,55,0.98)}

/* Fade-out when removing an item */
.egresado-item.removing{opacity:0;transform:scale(.98);transition:opacity .32s ease, transform .32s ease}



/* Responsive column counts */
@media (max-width: 1199px) { .egresados-grid{column-count:2;} }
@media (max-width: 767px) { .egresados-grid{column-count:1;} }

/* Stagger support via CSS variable --delay */
.egresado-item{opacity:0;transform:translateY(18px);transition:opacity .55s ease-out var(--delay,0s), transform .55s ease-out var(--delay,0s)}
.egresado-item.in-view{opacity:1;transform:none}

/* Floating social buttons */
.facebook-float,.instagram-float,.whatsapp-btn{position:fixed;right:18px;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;z-index:999;box-shadow:0 8px 20px rgba(0,0,0,0.12);transition:transform .18s ease,opacity .18s ease}
/* Increase vertical gaps so buttons don't overlap each other or the scroll-to-top */
.facebook-float{bottom:160px;background:#1877f2}
.instagram-float{bottom:110px;background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
.whatsapp-btn{bottom:60px;background:#25D366}
.facebook-float:hover,.instagram-float:hover,.whatsapp-btn:hover{transform:translateY(-6px);opacity:0.95}

.social-float{position:fixed;right:82px;bottom:20px;display:flex;flex-direction:column;gap:0.75rem;opacity:0;pointer-events:none;transition:opacity .18s ease}
.social-float.show{opacity:1;pointer-events:auto}
.social-btn{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--brand);box-shadow:0 6px 18px rgba(0,0,0,0.08)}

/* Ensure SVG icons inside colored buttons are white */
.facebook-float svg,.instagram-float svg,.whatsapp-btn svg{color:#fff;fill:currentColor}
.social-btn svg{color:var(--brand);fill:currentColor}
.scroll-to-top svg{color:#fff;fill:currentColor}

/* Scroll to top */
.scroll-to-top{position:fixed;right:82px;bottom:110px;width:44px;height:44px;border-radius:50%;background:#0d6efd;color:#fff;border:none;display:none;align-items:center;justify-content:center;z-index:900}
.scroll-to-top.show{display:flex}

/* Ensure main content has enough bottom padding so footer doesn't overlap */
main#main-content { padding-bottom: clamp(2rem, 5vw, 4.5rem); }

/* Slightly darker footer for contrast on gallery pages */
footer.bg-light { background: #f8f9fa; }

/* Responsive tweaks */
@media(max-width:767px){
  .facebook-float,.instagram-float,.whatsapp-btn{right:clamp(8px, 2vw, 12px);width:clamp(40px, 8vw, 48px);height:clamp(40px, 8vw, 48px)}
  /* On small screens keep buttons stacked but slightly closer to bottom */
  .facebook-float{bottom:clamp(120px, 25vh, 140px)}
  /* instagram removed; place scroll-to-top where instagram used to be on small screens */
  .scroll-to-top{right:clamp(60px, 12vw, 66px);bottom:clamp(90px, 20vh, 100px);width:clamp(36px, 7vw, 44px);height:clamp(36px, 7vw, 44px)}
  .whatsapp-btn{bottom:clamp(40px, 10vh, 48px)}
  .social-float{right:clamp(56px, 11vw, 66px)}
}

/* Reveal (fade-in on scroll) base state */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease-out, transform .65s ease-out;will-change:opacity,transform}
.reveal.in-view{opacity:1;transform:none}
.reveal[data-delay]{transition-delay: var(--delay, 0s)}

/* Subtle stagger helper when JS sets inline --delay via dataset */
.reveal.stagger-1{transition-delay:.08s}
.reveal.stagger-2{transition-delay:.16s}
.reveal.stagger-3{transition-delay:.24s}

/* Contact info styles */
.contact-info{background:#f8f9fa;border-radius:8px;padding:1.5rem;border-left:4px solid var(--brand)}
@media(max-width:576px){.contact-info{padding:1.25rem}}
.info-item{display:flex;gap:1rem;align-items:flex-start}
.info-item h4{margin:0 0 0.5rem 0;color:#333;font-size:1rem}
@media(max-width:576px){.info-item h4{font-size:0.95rem}}
.info-item p{margin:0;color:#666;font-size:0.95rem}
@media(max-width:576px){.info-item p{font-size:0.9rem}}
.info-item svg{flex-shrink:0;margin-top:4px}

/* Tooltip enhancements (native title works; improve focus outline) */
[title]{outline-offset:4px}

/* Event cards */
.event-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.event-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Improved typography and colors for modern look */
h2, h3, h4, h5, h6 {
  color: #1a1a1a;
}

section h2 {
  font-weight: 700;
  letter-spacing: -0.5px;
}

p {
  color: #666;
  letter-spacing: 0.2px;
}

/* Enhanced content-item styling */
.content-item svg {
  color: #0d6efd;
}

/* Program card improvements */
.program-card {
  border: 1px solid #e8ecf1;
  transition: all 0.3s ease;
}

.program-card:hover {
  border-color: #0d6efd;
  box-shadow: 0 8px 24px rgba(13, 110, 253, 0.12);
}

.program-card .program-header svg {
  color: #0d6efd;
}

/* Contact section improvements */
.contacto {
  background: linear-gradient(180deg, #fafbfc, #ffffff);
}

/* Footer improvements */
footer {
  border-top: 1px solid #e8ecf1;
  background: #fafbfc;
}

footer p {
  color: #666;
  font-size: 0.95rem;
}

footer a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
}

footer a:hover {
  color: #0b5ed7;
  text-decoration: underline;
}

/* Enhancement: subtle line under hero section */
.hero {
  background: linear-gradient(180deg, rgba(13,110,253,0.05) 0%, transparent 100%);
  border-bottom: 1px solid #e8ecf1;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

/* Better spacing for sections */
section {
  padding-top: clamp(1rem, 2vw, 1.5rem);
}