/* ============================================================
   CONOCENOS.CSS
   Universidad Salvadoreña Alberto Masferrer

   IMPORTANTE:
   El componente Facultades se carga desde la vista mediante:

   public/css/components/facultades.css

   Por eso NO se duplica aquí.
   ============================================================ */


/* ============================================================
   01. BASE
   ============================================================ */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


section[id],
#organigrama {
  scroll-margin-top: 96px;
}


.about-explore a:focus-visible,
.about-menu-toggle:focus-visible,
.read-more-toggle:focus-visible,
.cta-btnn:focus-visible,
.about-modal button:focus-visible,
.regs-list a:focus-visible {
  outline: 3px solid #ffd54f;
  outline-offset: 3px;
}


/* ============================================================
   02. HERO / VIDEO INSTITUCIONAL

   Un único archivo 1920x1080.
   object-fit: cover adapta el video a escritorio, tablet y móvil.
   ============================================================ */

.about-hero {
  position: relative;
  width: 100%;
  height: 670px;
  overflow: hidden;
  top: -53px;
  background:
    #081a40
    url("../img/conocenos/hero-poster.webp")
    center / cover
    no-repeat;
}

.about-hero__video {
position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 14%;
    pointer-events: none;
}

.about-hero__overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(8, 26, 64, .22) 0%,
      rgba(8, 26, 64, .08) 52%,
      rgba(8, 26, 64, 0) 100%
    );

  pointer-events: none;
}


/* ============================================================
   03. EXPLORA QUIÉNES SOMOS
   ============================================================ */

.about-explore {
  width: 100%;

  padding:
    0
    0
    40px;

  background: #ffffff;
}


.about-explore__container {
  max-width: 1200px;

  margin:
    0
    auto;

  padding:
    0
    24px;

  display: grid;

  grid-template-columns:
    280px
    minmax(0, 1fr);

  gap: 60px;

  align-items: flex-start;
}


/* ============================================================
   03.1 MENÚ LATERAL
   ============================================================ */

.about-explore__menu ul {
  margin: 0;

  padding: 0;

  list-style: none;
}


.about-explore__menu li {
  border-bottom:
    1px solid
    #d9eef1;
}


.about-explore__menu a {
  position: relative;

  display: block;

  padding:
    10px
    0;

  color:
    #2d598f;

  font-size:
    14px;

  font-weight:
    700;

  text-decoration: none;

  transition:
    color .25s ease,
    padding-left .25s ease;
}


.about-explore__menu a::before {
  content: "›";

  margin-right: 8px;

  color: #78c9c9;
}


.about-explore__menu a:hover,
.about-explore__menu a.is-active {
  padding-left: 5px;

  color: #78c9c9;
}


/* ============================================================
   03.2 BOTÓN MENÚ RESPONSIVE
   Solo aparece en Tablet y Móvil.
   ============================================================ */

.about-menu-toggle {
  display: none;
}


/* ============================================================
   03.3 CONTENIDO
   ============================================================ */

.about-explore__content {
  min-width: 0;

  text-align: justify;
}


.about-explore__content h1 {
  margin:
    0
    0
    20px;

  color: #0a2540;

  font-size: 36px;

  font-weight: 700;

  line-height: 1.15;
}


.about-explore__content p {
  margin:
    0
    0
    16px;

  color: #1f3c68;

  font-size: 15px;

  line-height: 1.7;
}


/* ============================================================
   04. VER MÁS / MOSTRAR MENOS
   ============================================================ */

.read-more-content {
  display: block;
}


/*
 * Sin JavaScript todo permanece visible.
 * Solo se oculta cuando JS está funcionando.
 */
.js .read-more-content[hidden] {
  display: none;
}


.read-more-toggle {
  min-height: 36px;

  margin-top: 2px;

  padding:
    7px
    17px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 4px;

  border: 0;

  border-radius: 999px;

  background: #be0a3a;

  color: #ffffff;

  font: inherit;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition:
    background-color .25s ease,
    transform .25s ease;
}


.read-more-toggle:hover {
  background: #9d092f;

  transform:
    translateY(-2px);
}


.read-more-toggle i {
  font-size: 19px;

  transition:
    transform .25s ease;
}


.read-more-toggle[aria-expanded="true"] i {
  transform:
    rotate(180deg);
}


/* ============================================================
   05. CITA ALBERTO MASFERRER
   Mantiene diseño inicial.
   ============================================================ */

.usam-quote {
  width: 100%;

  padding:
    35px
    0;

  background: #bfe3ef;
}


.usam-quote__container {
  position: relative;

  max-width: 800px;

  margin:
    0
    auto;

  padding:
    0
    24px
    0
    70px;

  display: flex;

  align-items: center;

  gap: 40px;
}


.usam-quote__mark {
  position: absolute;

  color: #0a2540;

  font-size: 96px;

  font-weight: 700;

  line-height: 1;

  pointer-events: none;
}


.usam-quote__mark--left {
  top: 51px;

  left: 0;
}


.usam-quote__mark--right {
  right: 219px;

  bottom: -6px;
}


.usam-quote__logo {
  flex:
    0
    0
    auto;
}


.usam-quote__logo img {
  width: 120px;

  height: auto;

  display: block;

  transition:
    transform .35s ease;
}


.usam-quote:hover
.usam-quote__logo img {
  transform:
    scale(1.035);
}


.usam-quote__content {
  color: #0a2540;
}


.usam-quote__text {
  margin:
    0
    0
    16px;

  color: #0a2540;

  font-size: 28px;

  line-height: 1.2;

  font-weight: 700;
}


.usam-quote__text span {
  padding:
    4px
    12px;

  display: inline-block;

  border-radius: 20px;

  background: #c8102e;

  color: #ffffff;

  font-weight: 700;

  line-height: 1.5;
}


.usam-quote__author {
  font-size: 16px;

  font-weight: 600;
}


/* ============================================================
   06. HISTORIA
   ============================================================ */

.history-section {
  width: 100%;

  padding:
    42px
    0
    68px;

  background: #ffffff;
}


.history-container {
  max-width: 1200px;

  margin:
    0
    auto;

  padding:
    0
    20px;
}


/* ============================================================
   06.1 TÍTULO
   ============================================================ */

.history-title {
  margin:
    0
    0
    24px;

  color: #0b2c5d;

  font-size: 34px;

  font-weight: 800;
}


.history-title span {
  color: #6dc6ca;
}


/* ============================================================
   06.2 LOGO + TEXTO

   El logo queda pegado a los dos primeros párrafos.
   ============================================================ */

.history-intro {
  display: grid;

  grid-template-columns:
    135px
    minmax(0, 1fr);

  gap: 22px;

  align-items: flex-start;
}


.history-brand {
  padding-top: 3px;
}


.history-years {
  width: 125px;

  max-width: 100%;

  height: auto;

  margin: 0;

  display: block;
}


.history-text {
  min-width: 0;

  text-align: justify;
}


.history-text p {
  margin:
    0
    0
    14px;

  color: #2a4a77;

  font-size: 14px;

  line-height: 1.7;
}


/* ============================================================
   06.3 TIMELINE
   Diseño original.
   ============================================================ */

.history-timeline {
  width: 100%;

  margin-top: 76px;

  padding:
    30px
    0
    36px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 22px;

  overflow-x: auto;

  scrollbar-width: thin;
}


.history-item {
  position: relative;

  flex:
    0
    0
    174px;

  width: 174px;

  height: 227px;

  padding:
    26px
    16px;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.history-item:hover {
  z-index: 10;

  transform:
    translateY(-6px);

  box-shadow:
    0
    13px
    27px
    rgba(11, 44, 93, .13);
}


.history-body {
  font-size: 12px;

  line-height: 1.4;
}


.history-body p {
  margin: 0;
}


.history-body i {
  margin-bottom: 8px;

  display: block;

  font-size: 26px;
}


/* ============================================================
   06.4 AÑOS
   ============================================================ */

.history-item .year {
  position: absolute;

  color: #0b2c5d;

  font-size: 14px;

  font-weight: 800;
}


.history-item .year.top {
  top: -26px;

  left: 50%;

  transform:
    translateX(-50%);
}


.history-item .year.bottom {
  bottom: -26px;

  left: 50%;

  transform:
    translateX(-50%);
}


/* ============================================================
   06.5 FORMAS
   ============================================================ */

.history-item.left {
  margin-left: -35px;

  border-top-left-radius: 80px;

  border-bottom-left-radius: 80px;

  border-top-right-radius: 80px;
}


.history-item.right {
  margin-left: -35px;

  border-top-right-radius: 80px;

  border-bottom-right-radius: 80px;

  border-bottom-left-radius: 80px;
}


/* ============================================================
   06.6 COLORES
   ============================================================ */

.history-item.aqua {
  background: #6dc6ca;

  color: #0b2c5d;
}


.history-item.light {
  background: #cfeaf0;

  color: #0b2c5d;
}


.history-item.red {
  background: #be0a3a;

  color: #ffffff;
}


.history-item.navy {
  background: #0b2c5d;

  color: #ffffff;
}


/* ============================================================
   07. MENSAJE DE RECTORÍA
   ============================================================ */

.rectoria-section {
  position: relative;

  width: 100%;

  padding:
    30px
    0;

  overflow: hidden;

  background: #ffffff;
}


/*
 * Franja azul adaptable.
 * No depende de porcentajes de altura.
 */
.rectoria-section::before {
  content: "";

  position: absolute;

  z-index: 0;

  top: 82px;

  right: 0;

  bottom: 112px;

  left: 0;

  background: #123d73;
}


.rectoria-container {
  position: relative;

  z-index: 1;

  max-width: 1200px;

  margin:
    0
    auto;

  display: grid;

  grid-template-columns:
    380px
    minmax(0, 1fr);

  align-items: start;
}


/* ============================================================
   07.1 FOTO
   ============================================================ */

.rectoria-photo {
  position: relative;

  padding-top: 9px;

  display: flex;

  justify-content: center;

  align-items: flex-start;
}


.rectoria-photo::before {
  content: "";

  position: absolute;

  width: 340px;

  height: 520px;

  z-index: 0;
}


.rectoria-photo img {
  position: relative;

  z-index: 2;

  width: 320px;

  height: auto;

  display: block;

  transition:
    transform .35s ease;
}


.rectoria-photo:hover img {
  transform:
    scale(1.02);
}


/* ============================================================
   07.2 CONTENIDO
   ============================================================ */

.rectoria-content {
  position: relative;

  min-width: 0;

  padding:
    0
    20px
    0
    57px;

  color: #ffffff;
}


.rectoria-title {
  margin:
    0
    0
    22px;

  color: #c8102e;

  font-size: 36px;

  font-weight: 800;

  line-height: 1.15;
}


.rectoria-text p {
  margin:
    0
    0
    17px;

  color: #ffffff;

  font-size: 13px;

  line-height: 1.45;

  text-align: justify;
}

/* ============================================================
   RECTORÍA - VER MÁS
   ============================================================ */

.rectoria-read-more {
  margin-top: 2px;
  margin-bottom: 4px;
}


/* ============================================================
   07.3 FIRMA
   ============================================================ */

.rectoria-sign {
  margin-top: 34px;

  padding-top: 10px;

  line-height: 1;
}


.rectoria-sign .name {
  display: block;

  color: #134581;

  font-size: 10px;

  font-weight: 500;
}


.rectoria-sign .cargo {
  color: #134581;
}


.rectoria-sign .last {
  color: #cc0b3b;

  font-size: 21px;

  font-weight: 700;
}


.rectoria-sign .name strong {
  color: #134581;

  font-size: 21px;

  font-weight: 700;
}


.rectoria-sign .role {
  color: #be0b3b;

  font-size: 14px;
}


/* ============================================================
   08. MISIÓN Y VISIÓN
   ============================================================ */

.mv-section {
  width: 100%;

  background:
    linear-gradient(
      to right,
      #12467b 0%,
      #12467b 50%,
      #071e45 50%,
      #071e45 100%
    );
}


.mv-wrapper {
  max-width: 1100px;

  min-height: 260px;

  margin:
    0
    auto;

  display: flex;
}


.mv-block {
  width: 50%;

  display: flex;

  align-items: center;
}


.mv-content {
  padding:
    0
    30px;
}


.mv-content h3 {
  margin-bottom: 16px;

  color: #78c9c9;

  font-size: 28px;

  font-weight: 700;
}


.mv-content p {
  margin: 0;

  color: #ffffff;

  font-size: 14px;

  line-height: 1.6;
}


/* ============================================================
   09. JUNTA CENTRAL DE DIRECTORES
   Diseño inicial.
   ============================================================ */

.container-junta {
  max-width: 1100px;

  margin:
    0
    auto;

  padding:
    0
    24px;
}


/* ============================================================
   09.1 ENCABEZADO
   ============================================================ */

.board-header {
  padding-top: 46px;

  padding-bottom: 34px;
}


.board-header h2 {
  margin:
    0
    0
    12px;

  color: #0b2c5d;

  font-size: 34px;

  font-weight: 800;
}


.board-header h2 span {
  color: #6dc6ca;
}


.board-header p {
  max-width: 900px;

  margin: 0;

  color: #2a4a77;

  font-size: 14px;

  line-height: 1.6;
}


/* ============================================================
   09.2 MIEMBROS
   ============================================================ */

.board-members {
  padding:
    50px
    0;

  background: #cfeaf0;
}


.board-grid {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 30px;
}


.board-card {
  min-width: 0;

  transition:
    transform .3s ease;
}


.board-card img {
  width: 160px;

  height: 160px;

  margin:
    0
    10px
    14px;

  display: block;

  border-radius: 50%;

  object-fit: cover;

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


.board-card .prefix {
  color: #0b2c5d;

  font-size: 12px;
}


.board-card h4 {
  margin:
    0
    0
    -6px;

  color: #0b2c5d;

  font-size: 14px;

  font-weight: 800;

  line-height: 1.3;
}


.board-card h4 .highlight {
  color: #c8102e;
}


.board-card .role {
  color: #c8102e;

  font-size: 12px;
}


/* ============================================================
   09.3 HOVER
   ============================================================ */

.board-card:hover {
  transform:
    translateY(-6px);
}


.board-card:hover img {
  transform:
    scale(1.04);

  box-shadow:
    0
    12px
    25px
    rgba(11, 44, 93, .16);
}


/* ============================================================
   10. ORGANIGRAMA
   ============================================================ */

.board-cta {
  margin-top: 22px;

  padding-top: 10px;

  padding-bottom: 20px;

  text-align: center;

  background:
    linear-gradient(
      to bottom,
      #0b3b70 0%,
      #0b3b70 73%,
      #ffffff 73%,
      #ffffff 100%
    );
}


.board-cta p {
  margin:
    0
    0
    18px;

  color: #ffffff;

  font-size: 20px;

  font-weight: 600;
}


.cta-btnn {
  padding:
    12px
    28px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  border: 0;

  border-radius: 30px;

  background:
    linear-gradient(
      90deg,
      rgb(190 11 59) 20%,
      rgb(84 47 102) 40%,
      rgb(18 66 125) 50%,
      rgb(8 26 64) 100%
    );

  color: #ffffff;

  font: inherit;

  font-size: 18px;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.cta-btnn:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0
    10px
    24px
    rgba(11, 44, 93, .2);
}


/* ============================================================
   11. ACREDITACIONES
   ============================================================ */

.acred-section {
  padding:
    0
    0
    50px;

  background: #ffffff;
}


.acred-container {
  max-width: 1100px;

  margin:
    0
    auto;

  padding:
    0
    24px;
}


.acred-header {
  margin-bottom: 40px;
}


.acred-header h2 {
  margin:
    0
    0
    12px;

  color: #0b2c5d;

  font-size: 34px;

  font-weight: 800;
}


.acred-header h2 span {
  color: #6dc6ca;
}


.acred-header p {
  max-width: 900px;

  margin: 0;

  color: #2a4a77;

  font-size: 14px;

  line-height: 1.6;
}


/* ============================================================
   11.1 COLUMNAS
   Altura igual en ambos lados.
   ============================================================ */

.acred-columns {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  align-items: stretch;
}


.acred-col {
  min-width: 0;

  display: grid;

  grid-template-rows:
    1fr
    auto;
}


.acred-top {
  min-height: 310px;

  height: 100%;

  padding:
    32px
    34px;
}


.acred-top h3 {
  margin:
    0
    0
    12px;

  font-size: 28px;

  font-weight: 700;
}


.acred-top p {
  margin: 0;

  font-size: 14px;

  line-height: 1.6;
}


.acred-top.aqua {
  background: #78c9c9;

  color: #0b2c5d;
}


.acred-top.navy {
  background: #123d73;

  color: #ffffff;
}


/* ============================================================
   11.2 LOGOS
   ============================================================ */

.acred-logos {
  min-height: 105px;

  padding: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 26px;

  flex-wrap: wrap;

  background: #f1f1f1;
}


.acred-logos img {
  height: 65px;

  width: auto;

  filter:
    grayscale(100%);

  opacity: .7;

  transition:
    filter .3s ease,
    opacity .3s ease,
    transform .3s ease;
}


.acred-logos img:hover {
  filter:
    grayscale(0);

  opacity: 1;

  transform:
    translateY(-3px);
}


/* ============================================================
   12. REGLAMENTOS Y NORMATIVAS
   ============================================================ */

.regs-section {
  padding:
    0
    0
    20px;

  background: #ffffff;
}


.regs-container {
  max-width: 1100px;

  margin:
    0
    auto;

  padding:
    0
    24px;
}


.regs-header {
  margin-bottom: 40px;
}


.regs-header h2 {
  margin:
    0
    0
    12px;

  color: #0b2c5d;

  font-size: 34px;

  font-weight: 800;
}


.regs-header h2 span {
  color: #6dc6ca;
}


.regs-header p {
  max-width: 900px;

  margin: 0;

  color: #2a4a77;

  font-size: 14px;

  line-height: 1.6;
}


/* ============================================================
   12.1 COLUMNAS
   ============================================================ */

.regs-columns {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  align-items: stretch;
}


.regs-col {
  min-width: 0;

  display: grid;

  grid-template-rows:
    1fr
    auto;
}


.regs-top {
  height: 100%;

  padding:
    32px
    34px;
}


.regs-top h3 {
  margin:
    0
    0
    10px;

  font-size: 26px;

  font-weight: 700;
}


.regs-top p {
  margin: 0;

  font-size: 14px;

  line-height: 1.6;
}


.regs-top.navy {
  background: #0b2c5d;

  color: #7fd1d2;
}


.regs-top.dark {
  background: #081e3f;

  color: #ffffff;
}


/* ============================================================
   12.2 DOCUMENTOS
   ============================================================ */

.regs-list {
  min-width: 0;

  padding:
    18px
    30px
    26px;

  background: #eeeeee;
}


.regs-list a {
  min-height: 42px;

  padding:
    10px
    0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  border-bottom:
    1px solid
    #9aa6bf;

  color: #0b2c5d;

  font-size: 14px;

  text-decoration: none;

  transition:
    color .25s ease,
    padding-left .25s ease;
}


.regs-list a:last-child {
  border-bottom: 0;
}


.regs-list a:hover {
  padding-left: 4px;

  color: #be0a3a;
}


.regs-list a span {
  flex:
    0
    0
    auto;

  padding:
    4px
    10px;

  border-radius: 12px;

  background: #c8102e;

  color: #ffffff;

  font-size: 11px;

  font-weight: 600;

  white-space: nowrap;
}


/* ============================================================
   13. FACULTADES
   El componente se carga externamente.
   Solo ajuste específico de Conócenos.
   ============================================================ */

.about-faculties.faculties-section {
  padding-top: 0;
}


/* ============================================================
   14. MODAL ORGANIGRAMA
   ============================================================ */

body.about-modal-open {
  overflow: hidden;
}


.about-modal {
  position: fixed;

  z-index: 10000;

  inset: 0;

  display: none;
}


.about-modal.is-open {
  display: block;
}


.about-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(2, 10, 28, .78);

  backdrop-filter:
    blur(3px);
}


.about-modal__dialog {
  position: relative;

  z-index: 1;

  width:
    min(
      1100px,
      calc(100% - 40px)
    );

  max-height:
    calc(100vh - 48px);

  margin:
    24px
    auto;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  border-radius: 10px;

  background: #ffffff;

  box-shadow:
    0
    24px
    70px
    rgba(0, 0, 0, .35);
}


.about-modal__header {
  min-height: 66px;

  padding:
    12px
    16px
    12px
    22px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  background: #081a40;

  color: #ffffff;
}


.about-modal__header h2 {
  margin: 0;

  color: #ffffff;

  font-size: 22px;

  font-weight: 600;
}


.about-modal__close {
  width: 44px;

  height: 44px;

  padding: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(255, 255, 255, .65);

  border-radius: 50%;

  background: transparent;

  color: #ffffff;

  cursor: pointer;
}


.about-modal__close span {
  margin-top: -2px;

  font-family:
    Arial,
    sans-serif;

  font-size: 34px;

  line-height: .8;
}


.about-modal__body {
  min-height: 0;

  flex:
    1
    1
    auto;

  background: #111827;
}


.about-modal__content {
  width: 100%;
}


.about-modal__pdf {
  width: 100%;

  height:
    min(
      76vh,
      760px
    );

  display: block;

  border: 0;

  background: #ffffff;
}


/* ============================================================
   15. ANIMACIONES DE ENTRADA
   ============================================================ */

.about-reveal {
  opacity: 1;

  transform: none;
}


.js .about-reveal {
  opacity: 0;

  transform:
    translateY(22px);

  transition:
    opacity .62s ease,
    transform .62s ease;

  transition-delay:
    var(
      --about-reveal-delay,
      0ms
    );
}


.js .about-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* ============================================================
   16. TABLET / LAPTOP
   769px – 1100px
   ============================================================ */

@media (min-width: 769px) and (max-width: 1100px) {

  /* HERO / VIDEO */
  .about-hero {
    height: 440px;
  }

  .about-hero__video {
    object-position: center center;
  }



  /* ==========================================================
     CONTENEDORES
     ========================================================== */

  .about-explore__container,
  .history-container,
  .rectoria-container,
  .acred-container,
  .regs-container,
  .container-junta {
    width: calc(100% - 40px);

    max-width: 100%;

    margin:
      0
      auto;
  }


  /* ==========================================================
     EXPLORA / MENÚ
     ========================================================== */

  .about-explore__container {
    grid-template-columns:
      1fr;

    gap: 24px;
  }


  .about-menu-toggle {
    width: 100%;

    min-height: 48px;

    padding:
      10px
      16px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
      1px solid
      #d5e5ec;

    border-radius: 8px;

    background: #ffffff;

    color: #0b2c5d;

    font: inherit;

    font-size: 14px;

    font-weight: 700;

    text-align: left;

    cursor: pointer;

    box-shadow:
      0
      5px
      18px
      rgba(11, 44, 93, .06);
  }


  .about-menu-toggle > span {
    flex: 1;
  }


  .about-menu-toggle .material-icons {
    color: #78c9c9;
  }


  .about-menu-toggle__arrow {
    transition:
      transform .25s ease;
  }


  .about-menu-toggle[aria-expanded="true"]
  .about-menu-toggle__arrow {
    transform:
      rotate(180deg);
  }


  /*
   * Solo con JS se oculta.
   */
  .js .about-explore__menu {
    display: none;
  }


  .js .about-explore__menu.is-open {
    display: block;
  }


  .about-explore__menu {
    margin-top: -12px;

    padding:
      10px
      16px;

    border:
      1px solid
      #d5e5ec;

    border-radius: 8px;

    background: #ffffff;

    box-shadow:
      0
      8px
      22px
      rgba(11, 44, 93, .08);
  }


  .about-explore__menu ul {
    display: block;
  }


  .about-explore__menu li {
    border-bottom:
      1px solid
      #e4eef2;
  }


  .about-explore__menu li:last-child {
    border-bottom: 0;
  }


  .about-explore__menu a {
    padding:
      11px
      2px;
  }


  /* ==========================================================
     HISTORIA
     ========================================================== */

  .history-timeline {
    justify-content: flex-start;
  }


  /* ==========================================================
     RECTORÍA
     Se mantiene FOTO + TEXTO en tablet.
     ========================================================== */

  .rectoria-section {
    padding:
      24px
      0
      30px;
  }


  .rectoria-section::before {
    top: 65px;

    bottom: 92px;
  }


  .rectoria-container {
    grid-template-columns:
      320px
      minmax(0, 1fr);
  }


  .rectoria-photo {
    padding-top: 0;
  }


  .rectoria-photo img {
    width: 280px;
  }


  .rectoria-content {
    padding:
      0
      18px
      0
      34px;
  }


  .rectoria-title {
    margin-bottom: 20px;

    font-size: 30px;

    line-height: 1.1;
  }


  .rectoria-text p {
    margin-bottom: 14px;

    font-size: 12.5px;

    line-height: 1.42;
  }


  .rectoria-sign {
    margin-top: 28px;
  }


  /* ==========================================================
     MISIÓN / VISIÓN
     Se mantienen dos columnas.
     ========================================================== */

  .mv-wrapper {
    width: calc(100% - 40px);

    max-width: 100%;
  }


  /* ==========================================================
     JUNTA
     TABLET = 3 COLUMNAS
     ========================================================== */

  .board-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap:
      38px
      28px;
  }


  .board-card img {
    width: 150px;

    height: 150px;
  }


  /* ==========================================================
     ACREDITACIONES
     Se mantienen dos columnas.
     ========================================================== */

  .acred-columns {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .acred-top {
    min-height: 300px;

    padding:
      28px
      28px;
  }


  .acred-top h3 {
    font-size: 25px;
  }


  .acred-top p {
    font-size: 13px;

    line-height: 1.55;
  }


  .acred-logos {
    gap: 16px;
  }


  .acred-logos img {
    height: 55px;
  }


  /* ==========================================================
     REGLAMENTOS
     TABLET = 2 COLUMNAS
     ========================================================== */

  .regs-columns {
    width: 100%;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .regs-col {
    min-width: 0;
  }


  .regs-top {
    padding:
      28px
      28px;
  }


  .regs-top h3 {
    font-size: 24px;
  }


  .regs-top p {
    font-size: 13px;

    line-height: 1.55;
  }


  .regs-list {
    padding:
      16px
      22px
      24px;
  }


  .regs-list a {
    font-size: 13px;
  }


  .regs-list a span {
    font-size: 10px;
  }

}


/* ============================================================
   17. MÓVIL
   Hasta 768px
   ============================================================ */

@media (max-width: 768px) {


  section[id],
  #organigrama {
    scroll-margin-top: 76px;
  }

  /* ==========================================================
     HERO / VIDEO
     ========================================================== */

  .about-hero {
    height: 380px;
    top: -53px;
  }

  .about-hero__video {
    object-position: center center;
  }


/* ==========================================================
     EXPLORA
     ========================================================== */

  .about-explore {
    padding-bottom: 32px;
  }


  .about-explore__container {
    width: 100%;

    padding:
      0
      16px;

    grid-template-columns:
      1fr;

    gap: 22px;
  }


  .about-menu-toggle {
    width: 100%;

    min-height: 48px;

    padding:
      10px
      14px;

    display: flex;

    align-items: center;

    gap: 9px;

    border:
      1px solid
      #d5e5ec;

    border-radius: 8px;

    background: #ffffff;

    color: #0b2c5d;

    font: inherit;

    font-size: 14px;

    font-weight: 700;

    text-align: left;

    cursor: pointer;

    box-shadow:
      0
      5px
      18px
      rgba(11, 44, 93, .06);
  }


  .about-menu-toggle > span {
    flex: 1;
  }


  .about-menu-toggle
  .material-icons {
    color: #78c9c9;
  }


  .about-menu-toggle__arrow {
    transition:
      transform .25s ease;
  }


  .about-menu-toggle[aria-expanded="true"]
  .about-menu-toggle__arrow {
    transform:
      rotate(180deg);
  }


  .js .about-explore__menu {
    display: none;
  }


  .js .about-explore__menu.is-open {
    display: block;
  }


  .about-explore__menu {
    margin-top: -10px;

    padding:
      8px
      14px;

    border:
      1px solid
      #d5e5ec;

    border-radius: 8px;

    background: #ffffff;

    box-shadow:
      0
      8px
      22px
      rgba(11, 44, 93, .08);
  }


  .about-explore__menu ul {
    display: block;
  }


  .about-explore__menu li {
    border-bottom:
      1px solid
      #e4eef2;
  }


  .about-explore__menu li:last-child {
    border-bottom: 0;
  }


  .about-explore__menu a {
    padding:
      11px
      2px;
  }


  .about-explore__content {
    text-align: left;
  }


  .about-explore__content h1 {
    font-size: 28px;
  }


  /* ==========================================================
     CITA
     ========================================================== */

  .usam-quote {
    padding:
      52px
      0;
  }


  .usam-quote__container {
    padding:
      0
      20px;

    flex-direction: column;

    text-align: center;
  }


  .usam-quote__mark {
    display: none;
  }


  .usam-quote__text {
    font-size: 21px;
  }


  /* ==========================================================
     HISTORIA
     ========================================================== */

  .history-section {
    padding:
      34px
      0
      56px;
  }


  .history-container {
    padding:
      0
      16px;
  }


  .history-title {
    font-size: 30px;
  }


  .history-intro {
    grid-template-columns:
      95px
      minmax(0, 1fr);

    gap: 15px;
  }


  .history-years {
    width: 88px;
  }


  .history-text {
    text-align: left;
  }


  .history-timeline {
    margin-top: 65px;

    justify-content: flex-start;
  }


  /* ==========================================================
     RECTORÍA
     MÓVIL = UNA COLUMNA
     ========================================================== */

  .rectoria-section {
    padding:
      40px
      0;

    background: #123d73;
  }


  .rectoria-section::before {
    display: none;
  }


  .rectoria-container {
    width: 100%;

    max-width: 100%;

    grid-template-columns:
      1fr;
  }


  .rectoria-photo {
    padding-top: 15px;

    margin-bottom: 20px;
  }


  .rectoria-photo img {
    width:
      min(
        290px,
        80%
      );
  }


  .rectoria-content {
    padding:
      20px
      24px
      36px;
  }


  .rectoria-title {
    font-size: 28px;

    line-height: 1.12;
  }


  .rectoria-text p {
    font-size: 13px;

    line-height: 1.5;

    text-align: left;
  }


  .rectoria-sign {
    margin-top: 28px;
  }


  /*
   * En móvil la firma queda sobre azul.
   */
  .rectoria-sign .name,
  .rectoria-sign .cargo,
  .rectoria-sign .name strong {
    color: #ffffff;
  }


  .rectoria-sign .last,
  .rectoria-sign .role {
    color: #78c9c9;
  }


  /* ==========================================================
     MISIÓN / VISIÓN
     ========================================================== */

  .mv-section {
    background: none;
  }


  .mv-wrapper {
    flex-direction: column;
  }


  .mv-block {
    width: 100%;
  }


  .mv-mision {
    background: #12467b;
  }


  .mv-vision {
    background: #071e45;
  }


  .mv-content {
    padding:
      38px
      24px;
  }


  /* ==========================================================
     JUNTA
     MÓVIL = 2 COLUMNAS
     ========================================================== */

  .container-junta {
    padding:
      0
      18px;
  }


  .board-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      34px
      18px;
  }


  .board-card {
    min-width: 0;
  }


  .board-card img {
    width: 125px;

    height: 125px;

    margin:
      0
      0
      12px;
  }


  .board-card h4 {
    font-size: 13px;
  }


  .board-header h2 {
    font-size: 29px;
  }


  /* ==========================================================
     ACREDITACIONES
     MÓVIL = UNA COLUMNA
     ========================================================== */

  .acred-container {
    padding:
      0
      16px;
  }


  .acred-columns {
    grid-template-columns:
      1fr;
  }


  .acred-col {
    grid-template-rows:
      auto
      auto;
  }


  .acred-top {
    min-height: 0;

    padding:
      28px
      24px;
  }


  .acred-logos {
    gap: 18px;
  }


  /* ==========================================================
     REGLAMENTOS
     MÓVIL = UNA COLUMNA
     ========================================================== */

  .regs-container {
    padding:
      0
      16px;
  }


  .regs-columns {
    grid-template-columns:
      1fr;
  }


  .regs-col {
    grid-template-rows:
      auto
      auto;
  }


  .regs-top {
    padding:
      28px
      24px;
  }


  .regs-list {
    padding:
      16px
      20px
      22px;
  }


  .regs-list a {
    align-items: center;

    gap: 10px;

    font-size: 13px;
  }


  /* ==========================================================
     MODAL
     ========================================================== */

  .about-modal__dialog {
    width:
      calc(100% - 20px);

    max-height:
      calc(100vh - 20px);

    margin:
      10px
      auto;
  }


  .about-modal__pdf {
    height: 78vh;
  }

}


/* ============================================================
   18. MÓVIL PEQUEÑO
   ============================================================ */

@media (max-width: 430px) {


  /* HISTORIA */

  .history-intro {
    grid-template-columns:
      1fr;
  }


  .history-brand {
    display: flex;

    justify-content: flex-start;
  }


  .history-years {
    width: 108px;
  }


  /* JUNTA */

  .board-grid {
    gap:
      30px
      12px;
  }


  .board-card img {
    width: 112px;

    height: 112px;
  }


  .board-card h4 {
    font-size: 12px;
  }


  .board-card .prefix,
  .board-card .role {
    font-size: 11px;
  }


  /* DOCUMENTOS */

  .regs-list a {
    align-items: flex-start;

    flex-direction: column;
  }


  .regs-list a span {
    align-self: flex-start;
  }

}


/* ============================================================
   19. FULL
   Pantallas superiores a Full HD
   ============================================================ */

@media (min-width: 1921px) {

  .about-hero {
    height: 620px;
  }


  .about-explore__container,
  .history-container,
  .rectoria-container {
    max-width: 1480px;
  }


  .container-junta,
  .acred-container,
  .regs-container,
  .mv-wrapper {
    max-width: 1300px;
  }

}


/* ============================================================
   20. REDUCED MOTION
   WCAG
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .about-hero__video {
    display: none;
  }


  html {
    scroll-behavior: auto;
  }


  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }


  .js .about-reveal {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }


  .read-more-toggle,
  .read-more-toggle i,
  .about-menu-toggle__arrow,
  .usam-quote__logo img,
  .history-item,
  .rectoria-photo img,
  .board-card,
  .board-card img,
  .acred-logos img,
  .cta-btnn {
    transition: none !important;
  }


  .read-more-toggle:hover,
  .usam-quote:hover
  .usam-quote__logo img,
  .history-item:hover,
  .rectoria-photo:hover img,
  .board-card:hover,
  .board-card:hover img,
  .acred-logos img:hover,
  .cta-btnn:hover {
    transform: none !important;
  }

}