:root {
  --brand: #0A1D56;
  --primary: #EF4423;
  --accent: #FFD60A;
  --text: #1f2937;
  --text-light: #4b5563;
  --bg-light: #f9fafb;
  --border-color: #e5e7eb;
}

/* --- ESTILOS GENERALES --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Inter', sans-serif; color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
.container { width: min(1120px, 92%); margin-inline: auto; }
main > .container > section, main > section {
  padding: 50px 0;
}

/* --- ENCABEZADO Y MENÚ --- */
.site-topbar { background: var(--brand); color: #eaf1ff; font-size: .95rem; }
.topbar-inner { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 8px 0; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 14px; }
.site-topbar a { color: #eaf1ff; }
.chip-sga {
  color: var(--accent) !important;
  font-weight: 800;
  text-decoration: none;
  padding: 6px 4px;
  transition: filter .2s;
}
.chip-sga:hover { filter: brightness(.9); text-decoration: none; }
.hide-xxs { display: inline; }
@media(max-width: 520px) { .hide-xxs { display: none; } }

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--border-color); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--brand); font-weight: 800; }
.brand img { height: 52px; width: auto; }
.brand-text { display: none; }
@media(min-width: 520px) { .brand-text { display: inline; } }

.menu-toggle { display: none; background: none; border: 1px solid var(--border-color); padding: .6rem .7rem; border-radius: .6rem; cursor: pointer; color: var(--brand); }
@media(max-width: 979px) { .menu-toggle { display: block; } }

.navbar { display: block; }
@media(max-width: 979px) {
  .navbar { position: fixed; inset: 80px 0 auto 0; background: #fff; border-top: 1px solid var(--border-color); transform: translateY(-120%); transition: transform .3s ease; box-shadow: 0 6px 18px rgba(0, 0, 0, .05); }
}

.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; }
@media(max-width: 979px) {
  .menu { display: grid; gap: 4px; padding: 10px 16px; align-items: stretch; }
}

.menu > li > a, .menu > li > button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 8px; font-weight: 600; color: var(--brand); background: transparent; border: none; transition: background-color 0.2s ease, color 0.2s ease; font-size: 0.95rem; text-align: left; cursor: pointer;
}
@media(max-width: 979px) {
  .menu > li > a, .menu > li > button { padding: 12px 10px; font-size: 1rem; }
}

.menu > li > a:hover, .menu > li > button:hover {
  background: rgba(10, 29, 86, .05);
  text-decoration: none;
  color: var(--primary);
}

.has-submenu { position: relative; }
.has-submenu > button::after { content: "▾"; margin-left: auto; }
@media(max-width: 979px) {
  .has-submenu > button::after { margin-left: auto; }
}

.submenu { display: none; list-style: none; padding: 8px; margin: 0; position: absolute; inset: 100% auto auto 0; background: #fff; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 24px rgba(2, 8, 20, .08); min-width: 240px; margin-top: 8px; z-index: 100; }
.has-submenu:hover .submenu { display: block; }
@media(max-width: 979px) {
  .submenu { position: static; display: none; border: none; box-shadow: none; padding-left: 20px; margin: 6px 0; background: transparent; }
}

.submenu li a { display: block; padding: 10px; border-radius: 8px; }
.submenu li a:hover { background: rgba(10, 29, 86, .05); }

.menu a[aria-current="page"] { color: var(--primary) !important; font-weight: 800; }
.submenu a[aria-current="page"] { background: rgba(10, 29, 86, .05); }
.navbar .menu-sga-link { font-weight: 800; color: var(--primary); }

/* --- TÍTULOS DE SECCIÓN --- */
.section-title { text-align: center; font-size: 2.25rem; font-weight: 800; color: var(--brand); margin-top: 0; margin-bottom: 1rem; }
.section-sub { text-align: center; font-size: 1.1rem; color: var(--text-light); max-width: 700px; margin: 0 auto 40px; line-height: 1.6; }
.section-sub-alt { text-align: center; font-size: 1.25rem; color: var(--primary); font-weight: 600; margin-bottom: 1rem; }

/* --- SECCIONES DE CONTENIDO --- */
.stats-section { padding: 50px 0; }
.oferta-section { background-color: var(--bg-light); padding: 50px 0; }
.logros-section { background-color: var(--brand); color: #fff; padding: 50px 0; }
.alianzas-section, .plataformas-section { padding: 50px 0; }

/* --- GRID Y CARDS --- */
.grid-3 { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.5rem; color: var(--brand); margin-top: 0; margin-bottom: 0.5rem; }
.card-body p { color: var(--text-light); flex-grow: 1; line-height: 1.6; }
.card-link { color: var(--primary); font-weight: 600; text-decoration: none; margin-top: 1rem; }
.card-link:hover { text-decoration: underline; }

/* --- SECCIÓN LOGROS --- */
.logros-section h2 { color: #fff; text-align: center; font-size: 2.25rem; margin-bottom: 40px; }
.icons-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
@media (min-width: 980px) { .icons-grid { grid-template-columns: repeat(4, 1fr); } }
.icon-card { text-align: center; }
.icon-card i { font-size: 3rem; color: var(--accent); margin-bottom: 1rem; }
.icon-card p { font-size: 1rem; font-weight: 500; margin: 0; }

/* --- SECCIÓN ALIANZAS Y PLATAFORMAS --- */
.logo-showcase { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; }
.logo-box { background: #fff; padding: 20px 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); display: flex; align-items: center; justify-content: center; min-height: 90px; }
.logo-box img { max-height: 50px; width: auto; }

/* --- FOOTER Y OTROS --- */
.site-footer { background: var(--brand); color: #eaf1ff; padding: 40px 0 20px; }
.footer-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media(min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media(min-width: 980px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-col h4 { color: var(--accent); margin-top: 0; }
.footer-col p, .footer-col a { font-size: 0.95rem; color: #d1d5db; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.quicklinks { list-style: none; padding: 0; }
.quicklinks li { margin-bottom: 8px; }
.social { display: flex; gap: 12px; font-size: 1.5rem; }
.footer-legal { border-top: 1px solid #374151; margin-top: 30px; padding-top: 20px; display: flex; justify-content: space-between; font-size: 0.9rem; color: #9ca3af; flex-wrap: wrap; }

.whatsapp-selector {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  align-items: center !important;
  visibility: visible !important;
  width: auto !important;
  height: auto !important;
}

.whatsapp-option {
  display: flex !important;
  position: relative !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  background: linear-gradient(135deg, #25d366 0%, #20ba5a 100%) !important;
  color: white !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  border: 3px solid #fff !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

.whatsapp-option:link,
.whatsapp-option:visited {
  color: white !important;
  text-decoration: none !important;
}

.whatsapp-option i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
}

.whatsapp-option:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6) !important;
}

.whatsapp-option .label {
  position: absolute !important;
  right: 75px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0, 0, 0, 0.9) !important;
  color: #fff !important;
  padding: 10px 15px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.whatsapp-option:hover .label {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .whatsapp-selector {
    gap: 12px !important;
  }
  
  .whatsapp-option {
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    min-height: 55px !important;
    font-size: 1.5rem !important;
  }
  
  .whatsapp-option i {
    font-size: 1.5rem !important;
  }
  
  .whatsapp-option .label {
    font-size: 0.65rem !important;
    right: 60px !important;
    padding: 8px 12px !important;
  }
}
.social-sidebar { display: none; }
@media(min-width: 1200px) {
  .social-sidebar { position: fixed; top: 50%; transform: translateY(-50%); left: 0; display: grid; gap: 4px; z-index: 100; }
  .ss-item { background: var(--brand); color: #fff; padding: 12px; text-decoration: none; border-radius: 0 8px 8px 0; }
}

.stat { text-align: center; padding: 20px; background: #f9fafb; border-radius: 12px; }
.stat .icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 10px; }
.stat .value { font-size: 2.2rem; font-weight: 800; color: var(--brand); }
.stat .label { font-size: 0.95rem; color: #6b7280; }

.carousel { position: relative; overflow: hidden; width: 100%; height: 600px; background: #000; }
.slides { position: relative; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.slide { min-width: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.6s ease-in-out; pointer-events: none; height: 100%; }
.arrow { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  background-color: rgba(0, 0, 0, 0.5); 
  color: white; 
  border: 2px solid white;
  cursor: pointer; 
  padding: 12px 18px; 
  font-size: 24px; 
  z-index: 50; 
  border-radius: 50%; 
  transition: background-color 0.3s; 
  font-weight: bold;
  min-width: 50px;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
}
.arrow:hover { 
  background-color: rgba(0, 0, 0, 0.8); 
}
.arrow:active { 
  background-color: rgba(0, 0, 0, 0.9); 
  transform: translateY(-50%) scale(0.95);
}
.arrow.prev { left: 15px; }
.arrow.next { right: 15px; }

/* Indicadores del carrusel (Dots) */
.carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; background: rgba(0, 0, 0, 0.4); padding: 10px 15px; border-radius: 25px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; border: 2px solid rgba(255, 255, 255, 0.8); }
.dot.active { background-color: rgba(255, 255, 255, 1); width: 14px; height: 14px; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
.dot:hover { background-color: rgba(255, 255, 255, 0.8); }

























/* --- ESTILOS PARA LA PÁGINA SGA (DISEÑO FINAL) --- */

/* Estilo para el banner superior */
.sga-hero {
  background: linear-gradient(to right, #a13333, #5a1e1e);
  color: #fff;
  padding: 50px 20px;
  text-align: center;
}

.sga-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.sga-hero p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

/* Estilo para la sección de las tarjetas */
.sga-portals-section {
  padding: 50px 0;
  background-color: #f4f7f6; /* Fondo gris claro */
}

.sga-portals-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 columna en móvil */
  gap: 30px;
}

@media (min-width: 980px) {
  .sga-portals-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en escritorio */
  }
}

/* Estilo general para las tarjetas */
.portal-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.portal-card-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  color: #fff;
  font-size: 1.1rem;
}

.portal-card-header i {
  font-size: 1.5rem;
}

.portal-card-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.student-card .portal-card-header { background-color: var(--primary); }
.teacher-card .portal-card-header { background-color: var(--brand); }

.portal-card-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.portal-card-body {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Hace que el cuerpo de la tarjeta ocupe el espacio disponible */
}

.portal-card-body h3 {
  font-size: 1.25rem;
  margin-top: 0;
  color: var(--brand);
}

.portal-card-body p {
  color: var(--text-light);
  line-height: 1.6;
}

.portal-card-body ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 25px;
  flex-grow: 1; /* Empuja el botón hacia abajo */
}

.portal-card-body li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
  color: var(--text);
}

/* Viñetas de colores */
.portal-card-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.student-card li::before { background-color: var(--primary); }
.teacher-card li::before { background-color: var(--brand); }

/* Estilo para los botones */
.btn-portal {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  margin-top: auto; /* Se alinea al fondo */
  transition: filter 0.2s;
}

.btn-portal i {
  font-size: 0.8em;
  margin-left: 8px;
}

.student-card .btn-portal { background: var(--primary); }
.teacher-card .btn-portal { background: var(--brand); }

.btn-portal:hover {
  filter: brightness(1.1);
  color: #fff;
  text-decoration: none;
}































/* --- ESTILOS PARA LA PÁGINA DE DESCARGAS --- */

.downloads-hero {
  background: linear-gradient(to right, #6d2828, #4a2727); /* Gradiente oscuro rojizo */
  color: #fff;
  padding: 50px 20px;
  text-align: center;
}

.downloads-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.downloads-hero p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

.downloads-section {
  padding: 50px 0;
  background-color: #f4f7f6; /* Fondo gris claro */
}

.downloads-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 columna en móvil */
  gap: 30px;
}

@media (min-width: 768px) {
  .downloads-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
  }
}
@media (min-width: 980px) {
  .downloads-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio */
  }
}

.download-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.download-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.download-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
}

.file-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text-light);
}

.file-icon i {
  font-size: 1.5rem;
  color: var(--primary);
}

.file-size {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-light);
}

.download-card .card-body {
  padding: 20px;
  flex-grow: 1; /* Empuja el footer hacia abajo */
}

.download-card h3 {
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--brand);
}

.download-card p {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

.download-card .card-footer {
  padding: 0 20px 20px 20px;
  margin-top: auto;
}

.btn-download {
  display: block;
  width: 100%;
  background: var(--primary);
  color: #fff;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: filter 0.2s;
}

.btn-download:hover {
  filter: brightness(1.1);
  color: #fff;
  text-decoration: none;
}

.btn-download i {
  margin-right: 8px;
}

/* Estilos especiales para la tarjeta destacada del formulario único */
.featured-card {
  background: #fff;
  border: 3px solid var(--accent);
}

.featured-card .card-top {
  border-bottom-color: rgba(239, 68, 35, 0.3);
}

.featured-card h3 {
  color: var(--brand);
  font-weight: 800;
}

.featured-card p {
  color: var(--brand);
  font-weight: 500;
}

.featured-btn {
  background: var(--accent);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--brand);
}

.featured-btn:hover {
  filter: brightness(1.15);
}

/* Estilos para la tarjeta secundaria destacada - Solicitud Retiro de Documentos */
.secondary-featured-card {
  border: 3px solid var(--brand);
}

.secondary-featured-card .card-top {
  border-bottom-color: rgba(10, 29, 86, 0.2);
}

.secondary-featured-btn {
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

.secondary-featured-btn:hover {
  filter: brightness(1.15);
}


























/* --- ESTILOS PARA LA PÁGINA DE INSTALACIONES --- */

.instalaciones-hero {
  background: linear-gradient(to right, #6d2828, #4a2727); /* Mismo gradiente que otras páginas */
  color: #fff;
  padding: 50px 20px;
  text-align: center;
}

.instalaciones-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.instalaciones-hero p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

.campus-section {
  padding: 50px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 columna en móvil */
  gap: 20px;
  margin: 40px auto;
  max-width: 800px;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en escritorio */
  }
}

.feature-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.feature-box i {
  font-size: 1.8rem;
  color: var(--primary);
}

.feature-box div {
  display: flex;
  flex-direction: column;
}

.feature-box span {
  font-size: 0.9rem;
  color: var(--text-light);
}

.gallery-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas por defecto */
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en tablet */
  }
}

@media (min-width: 980px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columnas en escritorio */
  }
}

.gallery-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.gallery-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}


































/* --- ESTILOS PARA LA PÁGINA DE HISTORIA --- */

.historia-hero {
  background: linear-gradient(to right, #6d2828, #4a2727); /* Mismo gradiente que otras páginas */
  color: #fff;
  padding: 50px 20px;
  text-align: center;
}
.historia-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.historia-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; opacity: 0.9; }

.historia-content-section { padding: 50px 0; }
.historia-content-section h2 { font-size: 2rem; color: var(--brand); text-align: center; margin-bottom: 1rem; }
.historia-content-section p { color: var(--text-light); line-height: 1.8; max-width: 800px; margin: 0 auto 1.5rem auto; text-align: center; }
.historia-image-wrapper { margin-top: 40px; }
.historia-image-wrapper img { border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }

.mision-vision-section { padding: 50px 0; background-color: var(--bg-light); }
.mision-vision-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 980px) { .mision-vision-grid { grid-template-columns: 1fr 1fr; } }
/* Estilos antiguos de info-card deshabilitados - usar la nueva versión en las secciones de precios y horarios */
/* .info-card { background: #fff; padding: 30px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.05); } */
/* .info-card h3 { font-size: 1.8rem; color: var(--brand); margin-top: 0; display: flex; align-items: center; gap: 10px; } */
/* .info-card h3 i { color: var(--primary); } */
/* .info-card p { line-height: 1.7; color: var(--text-light); } */

.valores-section { padding: 50px 0; }
.valores-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 980px) { .valores-grid { grid-template-columns: repeat(4, 1fr); } }
.valor-card { background: #fff; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.07); padding: 30px 20px; text-align: center; }
.valor-icon { width: 60px; height: 60px; margin: 0 auto 15px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; }
.valor-card h4 { font-size: 1.2rem; color: var(--brand); margin-bottom: 8px; }
.valor-card p { font-size: 0.9rem; color: var(--text-light); margin: 0; }

.hitos-section { padding: 50px 0; background-color: var(--bg-light); }
.timeline { position: relative; max-width: 1000px; margin: 0 auto; }
.timeline::after { content: ''; position: absolute; width: 4px; background-color: var(--primary); top: 0; bottom: 0; left: 50%; margin-left: -2px; }
.timeline-item { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; }
.timeline-item::after { content: ''; position: absolute; width: 20px; height: 20px; right: -10px; background-color: white; border: 4px solid var(--primary); top: 25px; border-radius: 50%; z-index: 1; }
.timeline-item.left { left: 0; }
.timeline-item.right { left: 50%; }
.timeline-item.right::after { left: -10px; }
.timeline-content { padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.timeline-content h4 { margin-top: 0; color: var(--brand); display: flex; align-items: center; gap: 8px; }
.timeline-content h4 i { color: var(--primary); }
.timeline-content span { color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.timeline-content p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 0; }

/* Media query para hacer la línea de tiempo vertical en móviles */
@media screen and (max-width: 768px) {
  .timeline::after { left: 20px; }
  .timeline-item { width: 100%; padding-left: 50px; padding-right: 10px; }
  .timeline-item.right { left: 0%; }
  .timeline-item.left::after, .timeline-item.right::after { left: 11px; }
}





















/* --- ESTILOS PARA LA PÁGINA DE EXTRACURRICULARES --- */

.extracurricular-hero {
  background: linear-gradient(to right, #6d2828, #4a2727);
  color: #fff;
  padding: 50px 20px;
  text-align: center;
}
.extracurricular-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.extracurricular-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; opacity: 0.9; }

.program-info-section { padding: 50px 0; background-color: var(--bg-light); }
.info-boxes-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
@media (min-width: 768px) { .info-boxes-grid { grid-template-columns: repeat(3, 1fr); } }

.info-box { background: #fff; border-radius: 12px; padding: 25px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.info-box i { font-size: 2rem; color: var(--primary); margin-bottom: 10px; }
.info-box h3 { margin: 0 0 5px 0; font-size: 1.2rem; color: var(--brand); }
.info-box p { margin: 0; color: var(--text-light); }

.why-choose-box { background-color: #fffbeb; border-left: 4px solid var(--accent); border-radius: 8px; padding: 25px; }
.why-choose-box h4 { margin-top: 0; color: var(--brand); }
.why-choose-box p { margin-bottom: 0; color: var(--text-light); }

.activities-section { padding: 50px 0; }
.activity-item { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; margin-bottom: 50px; }
@media (min-width: 980px) {
  .activity-item { grid-template-columns: 1fr 1fr; }
  .activity-item-reverse .activity-image { grid-column: 2; grid-row: 1; }
  .activity-item-reverse .activity-details { grid-column: 1; grid-row: 1; }
}

.activity-image img { border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.activity-details h3 { font-size: 1.8rem; color: var(--brand); display: flex; align-items: center; gap: 15px; margin-bottom: 1rem; }
.activity-details h3 i { color: var(--primary); }
.activity-details p { color: var(--text-light); line-height: 1.7; }
.activity-details h4 { color: var(--brand); margin-top: 25px; margin-bottom: 10px; }

.benefits-list { list-style: none; padding: 0; margin: 0 0 25px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.benefits-list li { position: relative; padding-left: 20px; }
.benefits-list li::before { content: '•'; position: absolute; left: 0; color: var(--primary); font-weight: bold; }

.availability-note { background-color: #e0f2fe; color: #0c5472; padding: 10px 15px; border-radius: 8px; font-weight: 500; display: inline-block; }
.availability-note i { margin-right: 8px; }

.cta-section { padding: 50px 20px; background-color: var(--brand); color: #fff; text-align: center; }
.cta-section h2 { font-size: 2rem; color: #fff; }
.cta-section p { max-width: 600px; margin: 1rem auto 1.5rem auto; opacity: 0.9; }
.cta-section .btn { background-color: var(--primary); }

/* --- ESTILO PARA BOTÓN AMARILLO ESPECÍFICO --- */
.btn.btn-accent {
  background-color: var(--accent); /* Color amarillo */
  color: var(--brand); /* Texto azul oscuro para contraste */
  font-weight: 800;
  border: 2px solid var(--accent);
}

.btn.btn-accent:hover {
  background-color: #fff;
  color: var(--brand);
  text-decoration: none;
}


































/* --- ESTILOS PARA LA PÁGINA DE CONVENIOS --- */

.convenios-hero {
  background: linear-gradient(to right, #6d2828, #4a2727);
  color: #fff;
  padding: 50px 20px;
  text-align: center;
}
.convenios-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.convenios-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; opacity: 0.9; }

.convenios-stats-section { padding: 50px 0; background-color: var(--bg-light); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 980px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-box { background: #fff; border-radius: 12px; padding: 25px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.stat-box i { font-size: 2rem; color: var(--primary); margin-bottom: 10px; }
.stat-value { font-size: 2rem; font-weight: 800; color: var(--brand); }
.stat-label { font-size: 0.9rem; color: var(--text-light); }

.universities-section { padding: 50px 0; }
.university-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-color);
}
.university-item:last-child { border-bottom: none; }

@media (min-width: 768px) {
  .university-item { grid-template-columns: 1fr 2fr; }
  .university-item-reverse .university-logo { grid-column: 2; grid-row: 1; }
  .university-item-reverse .university-details { grid-column: 1; grid-row: 1; text-align: right; }
}

.university-logo { background: #fff; border-radius: 12px; padding: 20px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 25px rgba(0,0,0,0.05); }
.university-logo img { max-height: 80px; width: auto; }
.university-details h3 { font-size: 1.8rem; color: var(--brand); margin-top: 0; margin-bottom: 0.5rem; }
.university-details p { color: var(--text-light); line-height: 1.7; margin-bottom: 0; }

.benefits-section { background-color: var(--brand); color: #fff; padding: 50px 20px; text-align: center; }
.benefits-section h2 { font-size: 2rem; color: #fff; }
.benefits-section p { max-width: 600px; margin: 1rem auto 1.5rem auto; opacity: 0.9; }
.benefits-grid { display: grid; grid-template-columns: 1fr; gap: 30px; max-width: 800px; margin: 30px auto 0; }
@media (min-width: 768px) { .benefits-grid { grid-template-columns: 1fr 1fr; } }

.benefit-item i { font-size: 2.5rem; color: var(--accent); margin-bottom: 10px; }
.benefit-item h3 { color: #fff; }
.benefit-item p { font-size: 0.9rem; opacity: 0.8; }

.cta-section-orange { padding: 50px 20px; background-color: var(--primary); color: #fff; text-align: center; }
.cta-section-orange h2 { font-size: 2rem; color: #fff; }
.cta-section-orange p { max-width: 600px; margin: 1rem auto 1.5rem auto; opacity: 0.9; }
.cta-section-orange .btn.btn-accent { border-color: #fff; background: var(--accent); color: var(--brand); }
.cta-section-orange .btn.btn-accent:hover { background: #fff; color: var(--brand); }






























/* --- ESTILOS PARA LA PÁGINA DE EDUCACIÓN INICIAL --- */

.inicial-hero {
  background-color: var(--primary);
  color: #fff;
}
.inicial-hero-content {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 30px;
  padding: 40px 0;
}
@media (min-width: 980px) {
  .inicial-hero-content { grid-template-columns: 1fr 1fr; }
}
.inicial-hero h1 { font-size: 2.5rem; }
.inicial-hero .btn { background-color: #fff; color: var(--primary); }

.why-choose-section { padding: 50px 0; background-color: var(--bg-light); }
.features-grid-inicial { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 980px) { .features-grid-inicial { grid-template-columns: repeat(3, 1fr); } }
.feature-card-inicial { background: #fff; border-radius: 12px; padding: 25px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.feature-card-inicial i { font-size: 2rem; color: var(--primary); margin-bottom: 10px; }
.feature-card-inicial h4 { margin: 0 0 5px 0; font-size: 1.1rem; color: var(--brand); }
.feature-card-inicial p { margin: 0; color: var(--text-light); font-size: 0.9rem; }

.methodology-section { padding: 50px 0; }
.methodology-item { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; margin-bottom: 50px; }
@media (min-width: 980px) { .methodology-item { grid-template-columns: 1fr 1fr; } }
.methodology-item h2 { font-size: 2rem; color: var(--brand); margin-bottom: 1.5rem; }
.methodology-item h4 { font-size: 1.2rem; color: var(--brand); margin-bottom: 0.5rem; }
.methodology-item p { color: var(--text-light); line-height: 1.7; }
.methodology-image img { border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.methodology-item:last-child .methodology-text { grid-column: 1 / -1; } /* Hace que el segundo texto ocupe todo el ancho */

.cta-yellow-section { padding: 50px 20px; background-color: var(--accent); color: var(--brand); text-align: center; }
.cta-yellow-section h2 { font-size: 2rem; color: var(--brand); }
.cta-yellow-section p { max-width: 600px; margin: 1rem auto 1.5rem auto; }
.cta-yellow-section .btn { background-color: var(--primary); color: #fff; }

.video-section { padding: 50px 0; }
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- SECCIONES DE PRECIOS Y HORARIOS --- */
.pricing-section {
  padding: 80px 0;
  background: linear-gradient(180deg, var(--bg-light) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.pricing-section .container {
  text-align: center;
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 60px;
  place-items: center;
}
@media (max-width: 768px) {
  .pricing-cards {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.info-card {
  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.95) 100%);
  border-radius: 16px;
  padding: 60px 45px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(10, 29, 86, 0.15);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  max-width: 350px;
  width: 100%;
}

.info-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 50px rgba(10, 29, 86, 0.25);
  border-color: var(--primary);
}

.info-card i {
  font-size: 4.5rem;
  color: var(--primary);
  margin-bottom: 25px;
  display: block;
  opacity: 0.9;
}

.info-card h3 {
  font-size: 1.4rem;
  color: var(--brand);
  margin: 0 0 30px 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.price-amount {
  font-size: 3.5rem;
  color: var(--primary);
  font-weight: 800;
  margin: 0;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(10, 29, 86, 0.1);
}

.hours-section {
  padding: 80px 0;
  background-color: #fff;
}

.hours-section .container {
  text-align: center;
}

.hours-card {
  background: linear-gradient(135deg, var(--accent) 0%, rgba(255, 214, 10, 0.9) 100%);
  border-radius: 16px;
  padding: 70px 50px;
  text-align: center;
  box-shadow: 0 15px 50px rgba(10, 29, 86, 0.2);
  max-width: 600px;
  margin: 60px auto 0;
  border: 3px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.hours-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(10, 29, 86, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
}

.hours-card i {
  font-size: 4.5rem;
  color: var(--brand);
  margin-bottom: 25px;
  display: block;
  opacity: 0.95;
}

.hours-card h3 {
  font-size: 1.4rem;
  color: var(--brand);
  margin: 0 0 30px 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.hours-time {
  font-size: 3.2rem;
  color: var(--brand);
  font-weight: 800;
  margin: 0;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(10, 29, 86, 0.1);
}

/* --- SECCIÓN DE PRECIOS Y HORARIOS PARA ADMISIONES --- */
.pricing-horarios-section {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--bg-light) 0%, rgba(239, 68, 35, 0.03) 100%);
}

.pricing-table-wrapper {
  overflow-x: auto;
  margin-top: 50px;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(10, 29, 86, 0.15);
}

.pricing-table thead {
  background: linear-gradient(135deg, var(--brand) 0%, rgba(10, 29, 86, 0.9) 100%);
  color: #fff;
}

.pricing-table th {
  padding: 25px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  border-bottom: 3px solid var(--primary);
}

.pricing-table th i {
  margin-right: 8px;
  color: var(--accent);
}

.pricing-table tbody tr {
  border-bottom: 2px solid var(--border-color);
  transition: all 0.3s ease;
}

.pricing-table tbody tr:hover {
  background-color: rgba(239, 68, 35, 0.05);
  transform: scale(1.02);
}

.pricing-table tbody tr:last-child {
  border-bottom: none;
}

.pricing-table td {
  padding: 25px 20px;
  font-size: 1rem;
  color: var(--text);
}

.table-row-inicial td:first-child,
.table-row-basica td:first-child,
.table-row-bachillerato td:first-child {
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 5px;
}

.badge-inicial {
  background-color: rgba(134, 204, 172, 0.15);
  color: #22863a;
  border-left: 4px solid #22863a;
}

.badge-basica {
  background-color: rgba(239, 68, 35, 0.15);
  color: var(--primary);
  border-left: 4px solid var(--primary);
}

.badge-bachillerato {
  background-color: rgba(10, 29, 86, 0.15);
  color: var(--brand);
  border-left: 4px solid var(--brand);
}

.price-cell {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  text-shadow: 0 1px 2px rgba(10, 29, 86, 0.08);
}

.hours-cell {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand);
}

@media (max-width: 768px) {
  .pricing-table th,
  .pricing-table td {
    padding: 15px 12px;
    font-size: 0.9rem;
  }
  
  .pricing-table th {
    font-size: 0.8rem;
  }
  
  .price-cell {
    font-size: 1.1rem;
  }
  
  .hours-cell {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .pricing-table-wrapper {
    overflow-x: auto;
  }
  
  .pricing-table {
    min-width: 600px;
  }
}


























/* --- ESTILOS PARA LA PÁGINA DE EDUCACIÓN BÁSICA --- */

.basica-hero {
  background: linear-gradient(to right, #6d2828, #4a2727);
  color: #fff;
}
.basica-hero-content {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: 30px; padding: 40px 0;
}
@media (min-width: 980px) { .basica-hero-content { grid-template-columns: 1fr 1fr; } }
.basica-hero h1 { font-size: 2.5rem; }
.btn-outline-white {
  background: transparent; color: #fff; border: 2px solid #fff; padding: 10px 20px;
  border-radius: 8px; font-weight: 600; text-decoration: none; display: inline-block;
  transition: all .2s;
}
.btn-outline-white:hover { background: #fff; color: var(--primary); text-decoration: none; }

.niveles-basica-section { padding: 50px 0; }
.niveles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 980px) { .niveles-grid { grid-template-columns: repeat(4, 1fr); } }
.nivel-card { background: var(--primary); color: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 5px 20px rgba(239, 68, 35, 0.3); }
.nivel-card h3 { margin-top: 0; font-size: 1.2rem; }
.nivel-card span { display: block; margin-bottom: 10px; font-weight: 600; opacity: 0.9; }
.nivel-card p { font-size: 0.9rem; opacity: 0.9; line-height: 1.6; }

.areas-estudio-section { padding: 50px 0; background-color: var(--bg-light); }
.areas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 980px) { .areas-grid { grid-template-columns: repeat(3, 1fr); } }
.area-card {
  background: #fff; border-radius: 12px; padding: 25px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: center;
}
.area-card i {
  font-size: 2rem; color: #fff; background-color: var(--primary);
  width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 15px;
}
.area-card h4 { font-size: 1.1rem; color: var(--brand); margin: 0 0 5px 0; }
.area-card p { font-size: 0.9rem; color: var(--text-light); margin: 0; }

.metodologia-basica-section { padding: 50px 0; }
.metodologia-item {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  align-items: center; margin-bottom: 50px;
}
@media (min-width: 980px) {
  .metodologia-item { grid-template-columns: 1fr 1fr; }
  .metodologia-item-reverse .metodologia-image { grid-column: 1; grid-row: 1; }
  .metodologia-item-reverse .metodologia-text { grid-column: 2; grid-row: 1; }
}
.metodologia-item:last-child { margin-bottom: 0; }
.metodologia-text h2 { font-size: 2rem; color: var(--brand); margin-bottom: 1.5rem; }
.metodologia-text h4 { font-size: 1.2rem; color: var(--primary); margin-bottom: 0.5rem; }
.metodologia-text p { color: var(--text-light); line-height: 1.7; }
.metodologia-image img { border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }





































/* --- ESTILOS PARA LA PÁGINA DE BACHILLERATO --- */

.bachillerato-hero {
  background: linear-gradient(to right, #4a2727, #2c1d3e); /* Gradiente más oscuro y morado */
  color: #fff;
}
.bachillerato-hero-content {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: 30px; padding: 40px 0;
}
@media (min-width: 980px) { .bachillerato-hero-content { grid-template-columns: 1fr 1fr; } }
.bachillerato-hero h1 { font-size: 2.5rem; }

.especializaciones-section { padding: 50px 0; }
.bgu-card {
  background: #fff; border-radius: 12px; padding: 30px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  max-width: 900px; margin: 0 auto;
}
.bgu-header { display: flex; align-items: center; gap: 15px; margin-bottom: 1rem; }
.bgu-header i {
  font-size: 2rem; color: #fff; background-color: var(--brand);
  width: 50px; height: 50px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.bgu-header h3 { margin: 0; font-size: 1.5rem; color: var(--brand); }
.bgu-card p { color: var(--text-light); }
.bgu-card h4 { color: var(--brand); margin-top: 25px; margin-bottom: 15px; }
.materias-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px;
}
@media (min-width: 768px) { .materias-list { grid-template-columns: repeat(3, 1fr); } }
.materias-list li { position: relative; padding-left: 20px; color: var(--text); }
.materias-list li::before { content: '•'; position: absolute; left: 0; color: var(--primary); font-weight: bold; font-size: 1.2rem; }
.materias-complementarias { font-size: 0.9rem; color: var(--text-light); margin-top: 20px; }

.logros-resultados-section { padding: 50px 0; background-color: var(--bg-light); }
.logros-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 980px) { .logros-grid { grid-template-columns: repeat(4, 1fr); } }
.logro-box { background: #fff; border-radius: 12px; padding: 25px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.logro-box i { font-size: 2rem; color: #fff; background-color: var(--primary); width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.logro-box h4 { margin: 0 0 5px 0; font-size: 1.1rem; color: var(--brand); }
.logro-box p { margin: 0; font-size: 0.9rem; color: var(--text-light); }

.convenios-bachillerato-section { padding: 50px 0; }
.logo-scroller {
  max-width: 100%;
  overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
  mask: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}
.scroller-inner {
  display: flex;
  gap: 40px;
  width: max-content; /* Importante para la animación */
  animation: scroll 40s linear infinite;
}
.scroller-inner img {
  height: 60px;
  width: auto;
}
@keyframes scroll {
  to {
    transform: translateX(calc(-50% - 20px)); /* Mueve la mitad del contenedor */
  }
}

.beneficios-convenios-banner { padding: 40px 0; background-color: var(--brand); margin-top: 40px; text-align: center; color: #fff; }
.beneficios-convenios-banner h3 { font-size: 1.5rem; margin-bottom: 30px; color: #fff; }
.beneficios-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 768px) { .beneficios-grid { grid-template-columns: repeat(3, 1fr); } }
.beneficio-item i { font-size: 2rem; color: var(--accent); margin-bottom: 10px; }
.beneficio-item h4 { margin: 0 0 5px 0; font-size: 1.1rem; color: #fff; }
.beneficio-item p { margin: 0; font-size: 0.9rem; opacity: 0.8; }

/* ===== ANIMACIÓN PROMO BANNER MODAL ===== */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes popUp {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}












































/* --- ESTILOS PARA LA PÁGINA DE ADMISIONES --- */

.admisiones-hero {
  background: linear-gradient(to right, #6d2828, #4a2727);
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}
.admisiones-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.admisiones-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto 1.5rem auto; opacity: 0.9; }
.admisiones-hero .btn.btn-accent { font-size: 1.1rem; padding: 12px 25px; }

.propuesta-section { padding: 50px 0; background-color: var(--bg-light); }
.propuesta-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 980px) { .propuesta-grid { grid-template-columns: repeat(3, 1fr); } }
.propuesta-card { background: #fff; border-radius: 12px; padding: 30px 25px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-number {
  width: 40px; height: 40px; margin: 0 auto 15px; background: var(--primary);
  color: #fff; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 1.2rem; font-weight: 800;
}
.propuesta-card h4 { margin: 0 0 10px 0; font-size: 1.2rem; color: var(--brand); }
.propuesta-card p { margin: 0; color: var(--text-light); }

.proceso-section { padding: 50px 0; text-align: center; }
.proceso-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 768px) { .proceso-steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .proceso-steps { grid-template-columns: repeat(5, 1fr); } }
.step-card { background: #fff; border-radius: 12px; padding: 25px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.step-icon {
  width: 50px; height: 50px; margin: 0 auto 15px; background: var(--primary);
  color: #fff; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem;
}
.step-card h5 { color: var(--text-light); font-size: 0.9rem; margin: 0; }
.step-card h4 { color: var(--brand); font-size: 1.1rem; margin: 5px 0; }
.step-card p { color: var(--text-light); font-size: 0.9rem; margin: 0; }

.inscripciones-button-wrapper { margin: 30px 0; }
.cta-box-dark { background-color: var(--brand); color: #fff; border-radius: 12px; padding: 30px; max-width: 500px; margin: 0 auto; }
.cta-box-dark h4 { margin-top: 0; color: #fff; font-size: 1.5rem; }
.cta-box-dark p { opacity: 0.8; margin-bottom: 20px; }

.documentos-section { padding: 50px 0; }
.documentos-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 980px) { .documentos-grid { grid-template-columns: 1fr 1fr; } }
.documentos-text h2 { font-size: 2rem; color: var(--brand); }
.documentos-text p { color: var(--text-light); line-height: 1.7; }
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 12px; color: var(--text); }
.checklist li::before {
  content: '\f058';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--primary);
  position: absolute;
  left: 0;
  top: 2px;
}
.documentos-image img { border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }




































/* --- ESTILOS PARA LA PÁGINA DE GALERÍA (VERSIÓN HTML+CSS) --- */

.gallery-hero {
  background: linear-gradient(to right, #6d2828, #4a2727);
  color: #fff; padding: 50px 20px; text-align: center;
}
.gallery-hero h1 { font-size: 2.5rem; }
.gallery-hero p { max-width: 600px; margin: 0 auto; opacity: 0.9; }

.eventos-destacados-section { padding: 50px 0; background-color: var(--bg-light); }
.eventos-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 768px) { .eventos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .eventos-grid { grid-template-columns: repeat(3, 1fr); } }

.evento-card {
  background: #fff; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.07);
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform 0.2s ease;
}
.evento-card:hover { transform: translateY(-5px); }
.evento-image { position: relative; }
.evento-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px 12px 0 0; }
.evento-tag {
  position: absolute; top: 10px; right: 10px; color: #fff; padding: 5px 10px;
  border-radius: 5px; font-size: 0.8rem; font-weight: 600;
}
.evento-tag.civico { background: #007bff; }
.evento-tag.deportivo { background: #28a745; }
.evento-tag.cultural { background: #dc3545; }

.evento-fotos {
  position: absolute; bottom: 10px; left: 10px; background: rgba(0,0,0,0.6);
  color: #fff; padding: 5px 10px; border-radius: 5px; font-size: 0.8rem;
}
.evento-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.evento-body h3 { font-size: 1.3rem; color: var(--brand); margin-top: 0; }
.evento-date, .evento-category { font-size: 0.85rem; color: var(--text-light); margin-bottom: 10px; display: block; }
.evento-body p { color: var(--text-light); font-size: 0.9rem; line-height: 1.6; flex-grow: 1; }
.evento-ver-mas { color: var(--primary); font-weight: 600; margin-top: 10px; text-align: right; }

/* --- ESTILOS DEL VISOR DE FOTOS (LIGHTBOX CSS-ONLY) --- */
.lightbox-css {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none; /* Oculto por defecto */
  align-items: center;
  justify-content: center;
  z-index: 999;
}

/* Cuando el ID del lightbox está en la URL, se muestra */
.lightbox-css:target {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 85%;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh; /* Altura máxima de la imagen */
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 40px;
  text-decoration: none;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
  text-decoration: none;
  padding: 10px;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }


















































/* --- ESTILOS PARA LA PÁGINA DE CONTACTO --- */

.contact-hero {
  background: linear-gradient(to right, #6d2828, #4a2727);
  color: #fff;
  padding: 50px 20px;
  text-align: center;
}
.contact-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.contact-hero p { font-size: 1.1rem; max-width: 600px; margin: 0 auto; opacity: 0.9; }

.contact-info-section { padding: 50px 0; }
.info-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 980px) { .info-cards-grid { grid-template-columns: repeat(4, 1fr); } }

.info-card-contact {
  background: #fff; border-radius: 12px; padding: 30px 20px;
  text-align: center; box-shadow: 0 5px 25px rgba(0,0,0,0.07);
}
.info-card-contact i {
  font-size: 2rem; color: var(--primary); margin-bottom: 15px;
}
.info-card-contact h4 { font-size: 1.2rem; color: var(--brand); margin: 0 0 10px 0; }
.info-card-contact p { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; margin: 0; }

.cta-buttons-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.cta-btn {
  padding: 12px 25px;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: filter 0.2s;
}
.cta-btn:hover { color: #fff; text-decoration: none; filter: brightness(1.1); }
.cta-btn.whatsapp { background-color: #25D366; }
.cta-btn.call { background-color: var(--primary); }
.cta-btn.email { background-color: var(--brand); }

.map-section { padding: 50px 0; background-color: var(--bg-light); }
.map-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.map-wrapper iframe {
  border: 0;
  width: 100%;
  height: 450px;
  display: block;
}

/* --- ANIMACIÓN DE PARPADEO PARA ADMISIONES --- */
@keyframes pulse-border {
  0%, 100% {
    border: 2px solid var(--primary);
    box-shadow: 0 0 8px rgba(239, 68, 35, 0.5);
  }
  50% {
    border: 2px solid var(--primary);
    box-shadow: 0 0 15px rgba(239, 68, 35, 1);
  }
}

.highlight-admisiones {
  animation: pulse-border 1.5s infinite;
  border-radius: 8px;
}

.highlight-admisiones > a {
  color: var(--primary);
  font-weight: 700;
}