body {
  background: #f6f8fb;
}

.main-header {
  background: rgba(23, 59, 109, 0.96);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14);
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.header-top {
  background: rgba(15, 42, 76, 0.75);
}

.header-top,
.header-top span,
.header-top a,
.header-top i,
.contact-info span {
  color: rgba(255,255,255,0.92) !important;
}

/* Obs. 6 (tanda 2-B) — SEPARACIÓN ÚNICA DE LA CABECERA: el padding vertical
   de .navbar (15px 0) vive solo en css/components.css. Aquí estaba en 12px y
   era una de las diferencias de «separación» entre páginas. No volver a fijarlo. */
/* Obs. 6 (tanda 2-B) — ANCHO ÚNICO DE LA CABECERA: 1480px en todas las páginas
   públicas. Tanda 2-F: se documenta aquí por qué la portada se veía distinta
   pese a cargar esta misma hoja — su bloque <style> definía
   `.container { width: min(1180px, calc(100% - 40px)) }` (un solo selector de
   clase, que por orden de carga ganaba a esta regla) y recortaba SOLO su navbar
   en 300px, justo el espacio que hacía falta para que el nombre del colegio
   cupiera en una línea. Esa regla ya no existe en la portada: las 15 páginas
   públicas comparten este ancho. No volver a fijar el ancho del navbar en una
   página suelta. */
.navbar .container {
  max-width: 1480px;
  gap: 24px;
}

.logo {
  /* Obs. 6 (tanda 2-B): antes `flex: 0 0 auto; max-width: 330px`, que impedía
     encoger el bloque y empujaba el menú fuera del contenedor. El tope y el
     tamaño del nombre viven en css/components.css (única fuente del valor). */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 560px;
}

.logo img,
.logo > div:first-child {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  border: 2px solid rgba(242, 183, 5, 0.85) !important;
}

.logo > .logo-text {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  align-items: flex-start !important;
}

/* Obs. 6 (tanda 2-B) — NOMBRE DEL COLEGIO: aquí ya NO se fija ni el ancho, ni
   el tamaño, ni el corte. Antes esta regla imponía `max-width: 260px` +
   `white-space: nowrap` + `text-overflow: ellipsis` (el «…» que veía el dueño)
   en las 12 páginas que cargan esta hoja. Los valores únicos (tamaño,
   interlineado y salto en dos líneas) están en css/components.css
   (.logo-text .logo-title). No volver a agregar max-width/ellipsis aquí. */
.logo-text h1,
.logo-text .logo-title {
  color: #fff !important;
  letter-spacing: 0;
  text-shadow: none !important;
}

.logo-text p {
  color: rgba(255,255,255,0.72) !important;
  text-shadow: none !important;
}

.nav-menu {
  flex: 1;
  min-width: 0;
  /* Obs. 1 (tanda 1): red de seguridad. Antes era nowrap y, cuando el ancho no
     alcanzaba, el final del menú (botón Portal) quedaba recortado porque
     html/body tienen overflow-x: hidden. Con wrap salta a una segunda línea.
     El drawer móvil (≤768px, al final de este archivo) se fuerza a nowrap. */
  flex-wrap: wrap;
  row-gap: 4px;
  justify-content: flex-end;
  gap: 3px;
}

.nav-menu a {
  padding: 9px 10px;
  border-radius: 8px;
  text-shadow: none !important;
  /* Obs. 1 — TAMAÑO UNIFICADO DEL MENÚ PÚBLICO:
     el valor vive en UN solo lugar, css/components.css (.nav-menu a →
     font-size: 0.95rem). Aquí NO se vuelve a fijar font-size: este archivo
     siempre se carga después de components.css. No re-agregar 0.76rem/0.82rem. */
}

.btn-portal {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  margin-left: 4px;
  background: #0f9f8e;
  box-shadow: 0 10px 24px rgba(15, 159, 142, 0.26);
  flex-shrink: 0;
}

@media (max-width: 1250px) and (min-width: 769px) {
  .navbar .container { gap: 10px; }
  /* Obs. 6 (tanda 2-B): aquí se recortaba el nombre a 205px con `1rem` y se
     limitaba el bloque del logo a 270px. Ya no se toca ni el ancho ni el
     tamaño del nombre: el nombre envuelve a dos líneas antes que desbordar
     (valores únicos en css/components.css). Solo se ajusta el menú. */
  /* Obs. 1 (unificado): aquí ya NO se encoge la letra del menú (antes .76rem,
     ≈12,16px). Se mantiene solo el padding ajustado para que el menú quepa;
     el tamaño sigue siendo el único valor de css/components.css (0.95rem). */
  .nav-menu a { padding: 8px 6px; }
  .btn-portal { min-width: 62px; padding-left: 9px !important; padding-right: 9px !important; }
}

/* Tanda 2-E: antes `height: 560px` fija. Una altura fija impedía que el hero
   respirara (en pantallas bajas o muy anchas las fotos quedaban aplastadas) y
   era una de las razones del «no tiene suficiente alto» del dueño. Ahora la
   altura es FLUIDA y la comparte todo el sitio.
   Tanda 2-F: el alto SUBE — de clamp(420px, 55vh, 640px) a
   clamp(520px, 68vh, 780px): suelo +100px y techo +140px (a 1080px de ventana
   el hero pasa de 594px a 734px). El `background` sí se conserva: es el color
   que se ve mientras carga la foto. Si esta regla cambia, debe cambiar igual en
   pages/home-institucion.php (bloque <style>, .hero-slider), que repite el
   mismo clamp con `!important` para que ninguna hoja posterior lo baje. */
.hero-slider {
  min-height: clamp(520px, 68vh, 780px);
  background: #102a4c;
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16,42,76,0.86), rgba(16,42,76,0.44), rgba(16,42,76,0.16)),
    linear-gradient(0deg, rgba(15,23,42,0.46), transparent 56%);
}

.slide img {
  filter: saturate(0.92) contrast(1.02);
}

.slide-content {
  left: max(24px, calc((100vw - 1200px) / 2 + 20px));
  right: auto;
  bottom: 74px;
  transform: none;
  max-width: 600px;
  padding: 0;
  text-align: left;
  background: transparent;
  backdrop-filter: none;
  z-index: 2;
}

.slide-content span {
  background: rgba(242, 183, 5, 0.95) !important;
  color: #102a4c !important;
}

.hero-slider .slide-content h2,
.hero-slider .slide-content .hero-slide-title {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(2.25rem, 5vw, 4.4rem);
  line-height: 1.02;
  margin-bottom: 18px;
  text-shadow: 0 8px 28px rgba(0,0,0,0.25);
}

.hero-slider .slide-content p {
  max-width: 520px;
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.13rem;
  line-height: 1.7;
}

.slide-content .btn-primary {
  border-radius: 10px;
  background: #f2b705;
  color: #102a4c;
  box-shadow: 0 14px 30px rgba(242,183,5,0.25);
}

.slider-prev,
.slider-next {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.24);
}

.indicator.active {
  background: #f2b705;
}

.info-section .container > div {
  background: #fff;
  padding: 30px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(15,23,42,0.08);
}

.news-preview,
.events-preview {
  background: #f6f8fb;
}

.platform-showcase {
  background: #f6f8fb;
  padding: 64px 0;
}

.showcase-head {
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
}

.showcase-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15, 159, 142, 0.12);
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.showcase-head h2 {
  margin-bottom: 12px;
  color: #173b6d !important;
  font-size: clamp(2rem, 4vw, 3rem);
}

.showcase-head p {
  color: #64748b;
  font-size: 1.05rem;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 24px;
  align-items: stretch;
}

.showcase-panel,
.role-access {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.showcase-panel {
  overflow: hidden;
}

.showcase-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  background: #173b6d;
  color: #fff;
}

.showcase-panel-top strong {
  font-size: 1rem;
}

.showcase-panel-top span {
  color: rgba(255,255,255,0.7);
  font-size: 0.86rem;
}

.showcase-panel-body {
  padding: 22px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.module-card {
  min-height: 132px;
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.module-card i {
  color: #0f9f8e;
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.module-card h3 {
  margin-bottom: 8px;
  color: #173b6d !important;
  font-size: 1rem;
}

.module-card p {
  color: #64748b;
  font-size: 0.9rem;
  line-height: 1.55;
}

.role-access {
  padding: 22px;
}

.role-access h3 {
  color: #173b6d !important;
  margin-bottom: 8px;
}

.role-access > p {
  color: #64748b;
  margin-bottom: 18px;
}

.role-list {
  display: grid;
  gap: 12px;
}

.role-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  text-decoration: none;
  color: #1f2937;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.role-item:hover {
  transform: translateY(-2px);
  border-color: #0f9f8e;
  box-shadow: 0 10px 24px rgba(15, 159, 142, 0.12);
}

.role-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #e0f7f3;
  color: #0f766e;
  flex: 0 0 auto;
}

.role-copy strong {
  display: block;
  color: #173b6d;
}

.role-copy span {
  display: block;
  color: #64748b;
  font-size: 0.86rem;
}

.news-card,
.event-card {
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15,23,42,0.07);
}

@media (max-width: 768px) {
  .navbar .container {
    gap: 10px;
  }

  .mobile-menu-toggle {
    display: inline-flex !important;
    width: 48px;
    height: 42px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid rgba(255,255,255,0.28);
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    position: relative;
    z-index: 1202;
    line-height: 1;
    appearance: none;
  }

  .mobile-menu-toggle > i {
    display: block !important;
    color: #fff !important;
    font-size: 1.35rem;
    line-height: 1;
  }

  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    margin-top: 0 !important;
    right: -100% !important;
    bottom: auto !important;
    width: min(82vw, 320px) !important;
    max-width: 320px;
    height: auto !important;
    max-height: calc(100dvh - 16px) !important;
    flex: none !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    /* Obs. 1 (unificado): el drawer móvil queda en UNA sola columna con scroll
       (como estaba); los wraps de escritorio (el del menú, components.css:206,
       y el del contenedor del navbar, components.css:107) no aplican aquí:
       `.nav-menu` es `position: fixed` y el contenedor no envuelve por debajo de
       768px. */
    flex-wrap: nowrap !important;
    padding: 74px 22px 20px !important;
    overflow-y: auto;
    background: #213f90;
    box-shadow: -24px 0 60px rgba(15,23,42,0.32);
    transition: right 0.22s ease;
    z-index: 1200;
  }

  .nav-menu.active {
    right: 0 !important;
  }

  .nav-menu a {
    width: 100%;
    padding: 13px 14px !important;
    margin: 0;
    font-size: 1rem;
  }

  .nav-menu .btn-portal {
    margin-top: 8px;
    margin-left: 0;
  }

  .logo {
    min-width: 0;
    /* Deja libre el ancho del botón hamburguesa: el nombre envuelve en vez de
       montarse sobre el menú (Obs. 6, tanda 2-B). */
    max-width: calc(100vw - 88px);
  }

  .logo-text {
    min-width: 0;
  }

  .logo-text h1,
  .logo-text .logo-title {
    /* Solo el tamaño baja en móvil; el corte/ellipsis ya no existe en ninguna
       banda. Se mantiene el salto de línea de css/components.css. */
    font-size: 1rem;
    line-height: 1.2;
  }

  .logo-text p {
    font-size: 0.76rem;
    line-height: 1.2;
  }

  /* Tanda 2-E: aquí había `height: 520px` en móvil. Se elimina: el alto del
     hero es uno solo y fluido (clamp(420px, 55vh, 640px) en la regla base de
     este archivo, más arriba). Tener dos alturas distintas por banda era
     justamente lo que hacía que en móvil el hero quedara corto. */
  .slide-content {
    left: 20px;
    right: 20px;
    bottom: 54px;
  }

  .info-section .container > div {
    grid-template-columns: 1fr !important;
  }

  .showcase-grid,
  .module-grid {
    grid-template-columns: 1fr;
  }
}