/* ============================================================
   USAM - EDUCACIÓN
   Archivo: public/css/educacion.css
   ============================================================
   Criterios aplicados:
   - HTML/W3C: estilos acotados a la vista.
   - WCAG 2.2 AA: foco visible, contraste y reduced motion.
   - Responsive: móvil, tablet, escritorio y Full.
   - Seguridad: sin recursos remotos desde CSS.
   - Rendimiento: transiciones cortas y propiedades optimizadas.

   CAMPUS NO SE DEFINE AQUÍ.
   El componente vive en:
   public/css/components/campus.css
   ============================================================ */

.education-page {
  --edu-navy: #081a40;
  --edu-blue: #0b3f78;
  --edu-blue-2: #154a84;
  --edu-aqua: #6fc8cc;
  --edu-aqua-light: #bfe3ef;
  --edu-red: #c8102e;
  --edu-wine: #9e242b;
  --edu-beige: #f4dec5;
  --edu-text: #163e6d;
  --edu-white: #ffffff;
  --edu-gray: #f3f4f6;
  --edu-focus: #ffd54f;
  --edu-container: 1320px;

  width: 100%;

  overflow-x: clip;

  background: #ffffff;
  color: var(--edu-text);

  font-family:
    'Montserrat',
    Arial,
    sans-serif;
}


.education-page,
.education-page * {
  box-sizing: border-box;
}


.education-page img {
  max-width: 100%;
}


.education-page button,
.education-page a {
  -webkit-tap-highlight-color:
    transparent;
}


.education-page a:focus-visible,
.education-page button:focus-visible,
.education-page [tabindex]:focus-visible {
  outline:
    3px solid
    var(--edu-focus);

  outline-offset:
    3px;
}


.education-page section[id] {
  scroll-margin-top:
    90px;
}


/* ============================================================
   01. HERO PRINCIPAL
   Misma lógica visual del hero de Facultades
   ============================================================ */

.education-hero {
  position: relative;
  width: 100%;
  height: 520px;
  min-height: 0;
  overflow: hidden;
  top: -53px;
  background: var(--edu-navy);
}

.education-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);
}

.education-hero .hero-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(8, 26, 64, .75) 0%,
    rgba(8, 26, 64, .55) 40%,
    rgba(8, 26, 64, .15) 70%,
    rgba(8, 26, 64, 0) 100%
  );
}

.education-hero .hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--edu-container);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #ffffff;
}

.education-hero .hero-title {
  max-width: 850px;
  margin: 0;
  color: #ffffff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -.5px;
  line-height: 1.1;
}

.education-hero .hero-subtitle {
  max-width: 720px;
  margin: 0;
  color: #ffffff;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
}


/* ============================================================
   02. HOVER REUTILIZABLE PARA IMÁGENES
   ============================================================ */

.education-page
.hover-media {
  overflow: hidden;
}


.education-page
.hover-media img {
  transition:
    transform .45s ease,
    filter .45s ease;
}


.education-page
.hover-media:hover img,
.education-page
.hover-media:focus-within img {
  transform:
    scale(1.045);

  filter:
    saturate(1.03)
    contrast(1.02);
}


/* ============================================================
   03. OFERTA ACADÉMICA
   ============================================================ */

.oferta-section {
  max-width:
    var(--edu-container);

  margin:
    0 auto;

  padding:
    54px 24px 58px;
}


.oferta-header {
  max-width:
    930px;

  margin-bottom:
    28px;
}


.oferta-title {
  margin:
    0 0 10px;

  color:
    #222222;

  font-size:
    clamp(
      32px,
      3vw,
      42px
    );

  font-weight:
    500;

  line-height:
    1.1;
}


.oferta-description {
  margin: 0;

  color:
    #334155;

  font-size:
    14px;

  line-height:
    1.7;
}


.oferta-grid {
  display: grid;

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

  gap:
    20px;

  align-items:
    start;
}


.oferta-card {
  min-width: 0;

  overflow: hidden;

  border-radius:
    18px;

  background:
    var(--edu-aqua);

  box-shadow:
    0 8px 24px
    rgba(8, 26, 64, .08);
}


.oferta-media {
  position: relative;

  height: 250px;

  display: block;

  color:
    inherit;

  text-decoration:
    none;
}


.oferta-media img {
  width: 100%;
  height: 100%;

  object-fit:
    cover;

  display:
    block;
}


.oferta-band {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  min-height:
    58px;

  padding:
    10px 14px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  background:
    rgba(8, 26, 64, .88);
}


.oferta-band-title {
  color:
    #ffffff;

  font-size:
    16px;

  font-weight:
    700;

  line-height:
    1.15;
}


.oferta-band-chevron {
  position: relative;

  width: 11px;
  height: 8px;

  margin-top:
    5px;
}


.oferta-band-chevron::before,
.oferta-band-chevron::after {
  content: "";

  position: absolute;

  top: 3px;

  width: 7px;
  height: 2px;

  background:
    #ffffff;
}


.oferta-band-chevron::before {
  left: 0;

  transform:
    rotate(45deg);
}


.oferta-band-chevron::after {
  right: 0;

  transform:
    rotate(-45deg);
}


.oferta-body {
  padding:
    14px 15px 16px;
}


.oferta-subtitle {
  display:
    block;

  margin-bottom:
    5px;

  color:
    #08315a;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.3;
}


.oferta-text {
  min-height:
    45px;

  margin:
    0 0 12px;

  color:
    #0b3f69;

  font-size:
    12px;

  line-height:
    1.5;
}


.oferta-btn,
.btn-primary {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    34px;

  padding:
    7px 16px;

  border-radius:
    999px;

  text-decoration:
    none;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .02em;
}


.oferta-btn {
  background:
    var(--edu-red);

  color:
    #ffffff;
}


.oferta-btn:hover {
  background:
    #a80d27;
}


.oferta-modelo {
  grid-column:
    span 2;

  padding:
    20px 12px 0 20px;
}


.oferta-modelo-title {
  margin:
    0 0 12px;

  color:
    #0b3257;

  font-size:
    clamp(
      30px,
      3vw,
      40px
    );

  font-weight:
    700;

  line-height:
    1.05;
}


.oferta-modelo-text {
  max-width:
    560px;

  margin: 0;

  color:
    #134582;

  font-size:
    13px;

  line-height:
    1.65;
}


/* ============================================================
   04. LIFE USAM
   ============================================================ */

.life-usam {
  padding:
    54px 0;

  background:
    #ffffff;
}


.life-usam-container {
  max-width:
    var(--edu-container);

  margin:
    0 auto;

  padding:
    0 24px;

  display:
    grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.2fr);

  gap:
    54px;

  align-items:
    center;
}


.life-usam-title {
  margin:
    0 0 14px;

  color:
    #0b3257;

  font-size:
    clamp(
      34px,
      4vw,
      46px
    );

  font-weight:
    700;
}


.life-usam-text {
  margin:
    0 0 24px;

  color:
    #334155;

  font-size:
    14px;

  line-height:
    1.7;
}


.life-usam-list {
  max-width:
    560px;

  margin:
    0;

  padding:
    0;

  list-style:
    none;
}


.life-usam-list li {
  border-bottom:
    1px solid
    #70cbd2;
}


.life-usam-list a {
  min-height:
    42px;

  padding:
    8px 4px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    #0b3257;

  text-decoration:
    none;
}


.life-usam-list
a:hover
.life-text,

.life-usam-list
a:hover
.life-arrow,

.life-usam-list
li.active
.life-text,

.life-usam-list
li.active
.life-arrow {
  color:
    var(--edu-red);
}


.life-arrow {
  flex:
    0 0 auto;

  font-size:
    21px;

  line-height:
    1;
}


.life-text {
  font-size:
    15px;

  font-weight:
    700;
}


.life-usam-media {
  position:
    relative;

  min-height:
    360px;

  background:
    var(--edu-navy);

  border-radius:
    3px;
}


.life-usam-media > img {
  width: 100%;

  min-height:
    360px;

  height: 100%;

  object-fit:
    cover;

  display:
    block;
}


.life-usam-play {
  position:
    absolute;

  z-index:
    2;

  inset:
    0;

  width:
    92px;

  height:
    92px;

  margin:
    auto;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    4px solid
    #ffffff;

  border-radius:
    50%;

  background:
    rgba(8, 26, 64, .18);

  color:
    #ffffff;

  cursor:
    pointer;

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


.life-usam-play svg {
  width:
    43px;

  height:
    43px;

  fill:
    currentColor;

  stroke:
    none;
}


.life-usam-play:hover {
  transform:
    scale(1.05);

  background:
    rgba(8, 26, 64, .48);
}


/* ============================================================
   05. LO QUE NOS HACE SER ELEGIDOS
   ============================================================ */

.elegidos {
  padding:
    46px 0;

  background:
    var(--edu-blue);

  color:
    #ffffff;
}


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

  margin:
    0 auto;

  padding:
    0 24px;

  display:
    grid;

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

  gap:
    60px;

  align-items:
    center;
}


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

  color:
    #ffffff;

  font-size:
    clamp(
      36px,
      4vw,
      46px
    );

  font-weight:
    700;

  line-height:
    1.15;
}


.elegidos-pill {
  display:
    inline-block;

  margin-top:
    6px;

  padding:
    7px 18px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #be0b3b 0%,
      #41356e 35%,
      #113d74 65%,
      #081a40 100%
    );

  color:
    #ffffff;

  font-size:
    .76em;

  font-weight:
    600;
}


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

  color:
    rgba(255, 255, 255, .9);

  font-size:
    14px;

  line-height:
    1.7;
}


.elegido-resaltar {
  color:
    #f5dfc8;

  font-weight:
    700;
}


.elegidos-media {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.elegidos-media img {
  width:
    100%;

  display:
    block;
}


/* ============================================================
   06. PILARES
   ============================================================ */

.pilares {
  position:
    relative;

  padding:
    0 0 56px;

  background:
    linear-gradient(
      to bottom,
      var(--edu-blue) 0%,
      var(--edu-blue) 50%,
      #ffffff 50%,
      #ffffff 100%
    );
}


.pilares-title {
  position:
    absolute;

  z-index:
    10;

  top:
    50%;

  left:
    50%;

  margin:
    0;

  display:
    flex;

  align-items:
    stretch;

  transform:
    translate(-50%, -50%);

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    #ffffff;

  box-shadow:
    0 8px 24px
    rgba(8, 26, 64, .18);

  font-size:
    clamp(
      20px,
      2vw,
      28px
    );

  line-height:
    1.1;

  white-space:
    nowrap;
}


.pilares-title span,
.pilares-title strong {
  padding:
    12px 22px;
}


.pilares-title span {
  padding-right:
    8px;

  color:
    var(--edu-blue);

  font-weight:
    600;
}


.pilares-title strong {
  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #be0b3b 0%,
      #41356e 35%,
      #113d74 65%,
      #081a40 100%
    );

  color:
    #ffffff;

  font-weight:
    700;
}


.pilares-grid {
  max-width:
    var(--edu-container);

  margin:
    0 auto;

  display:
    grid;

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


.pilar {
  --arrow-color:
    transparent;

  position:
    relative;

  min-height:
    300px;

  padding:
    42px 38px;

  color:
    #ffffff;
}


.pilar img {
  width:
    72px;

  height:
    auto;

  margin-bottom:
    14px;
}


.pilar h3 {
  margin:
    0 0 10px;

  font-size:
    24px;

  font-weight:
    700;

  line-height:
    1.2;
}


.pilar p {
  margin:
    0;

  font-size:
    14px;

  line-height:
    1.55;
}


.pilar-beige {
  --arrow-color:
    #f4dec5;

  background:
    #f4dec5;

  color:
    #0b3257;
}


.pilar-red {
  --arrow-color:
    #c8102e;

  background:
    #c8102e;
}


.pilar-wine {
  --arrow-color:
    #9e242b;

  background:
    #9e242b;
}


.pilar-blue {
  --arrow-color:
    #154a84;

  background:
    #154a84;
}


.pilar-navy {
  --arrow-color:
    #0a1f45;

  background:
    #0a1f45;
}


.pilar-aqua {
  --arrow-color:
    #6fc8cc;

  background:
    #6fc8cc;

  color:
    #0b3257;
}


.pilar-bottom:first-of-type {
  border-bottom-left-radius:
    60px;
}


.pilar-bottom:last-child {
  border-bottom-right-radius:
    60px;
}


.pilar::after {
  content:
    "";

  position:
    absolute;

  z-index:
    2;

  width:
    0;

  height:
    0;
}


.arrow-right::after {
  top:
    50%;

  right:
    -30px;

  transform:
    translateY(-50%);

  border-top:
    30px solid transparent;

  border-bottom:
    30px solid transparent;

  border-left:
    30px solid
    var(--arrow-color);
}


.arrow-left::after {
  top:
    50%;

  left:
    -30px;

  transform:
    translateY(-50%);

  border-top:
    30px solid transparent;

  border-bottom:
    30px solid transparent;

  border-right:
    30px solid
    var(--arrow-color);
}


.arrow-down::after {
  left:
    50%;

  bottom:
    -30px;

  transform:
    translateX(-50%);

  border-left:
    30px solid transparent;

  border-right:
    30px solid transparent;

  border-top:
    30px solid
    var(--arrow-color);
}


.arrow-up::after {
  left:
    50%;

  top:
    -30px;

  transform:
    translateX(-50%);

  border-left:
    30px solid transparent;

  border-right:
    30px solid transparent;

  border-bottom:
    30px solid
    var(--arrow-color);
}


.pilar:nth-child(3)::after,
.pilar:nth-child(6)::after {
  display:
    none;
}


/* ============================================================
   07. FORMAMOS GANADORES
   ============================================================ */

.ganadores {
  padding:
    50px 24px 62px;

  text-align:
    center;

  background:
    #ffffff;
}


.ganadores-title {
  margin:
    0 0 10px;

  color:
    #8b1d2c;

  font-size:
    clamp(
      34px,
      4vw,
      46px
    );

  font-weight:
    700;
}


.ganadores-intro {
  max-width:
    800px;

  margin:
    0 auto 38px;

  color:
    #2b5c94;

  font-size:
    13px;

  line-height:
    1.65;
}


.ganadores-grid {
  max-width:
    1184px;

  margin:
    0 auto;

  display:
    grid;

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

  gap:
    18px;
}


.ganador-card {
  min-height:
    174px;

  padding:
    26px 22px;

  text-align:
    left;
}


.ganador-card.bg {
  background:
    #f1f1f1;
}


.ganador-card
.num {
  display:
    block;

  margin-bottom:
    10px;

  font-size:
    clamp(
      38px,
      4vw,
      50px
    );

  font-weight:
    700;

  line-height:
    1;

  font-variant-numeric:
    tabular-nums;
}


.num.redd {
  color:
    var(--edu-red);
}


.num.bluee {
  color:
    var(--edu-blue);
}


.ganador-card p {
  margin:
    0;

  color:
    #1f4e85;

  font-size:
    11.5px;

  font-weight:
    500;

  line-height:
    1.35;
}


/* ============================================================
   08. DESTACADOS
   ============================================================ */

.usam-destacados {
  width:
    100%;

  padding:
    42px 24px 10px;

  background:
    #f8f8f8;
}


.u-des {
  max-width:
    var(--edu-container);

  margin:
    0 auto;
}


.destacado {
  display:
    grid;

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

  gap:
    60px;

  align-items:
    center;

  margin-bottom:
    62px;
}


.destacado-middle {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1.1fr);
}


.destacado-img {
  min-width:
    0;

  overflow:
    hidden;
}


.destacado-img img {
  width:
    100%;

  display:
    block;
}


.destacado-text {
  max-width:
    540px;
}


.title-red {
  margin:
    0 0 16px;

  color:
    var(--edu-red);

  font-size:
    clamp(
      32px,
      3vw,
      42px
    );

  font-weight:
    700;

  line-height:
    1.08;
}


.destacado-text p {
  margin:
    0 0 15px;

  color:
    #2b5c94;

  font-size:
    13px;

  line-height:
    1.7;
}


.stats-list {
  margin:
    20px 0 0;

  padding:
    0;

  list-style:
    none;
}


.stats-list li {
  min-height:
    42px;

  display:
    flex;

  align-items:
    baseline;

  gap:
    14px;

  border-bottom:
    1px solid
    #7fd8dc;
}


.stats-list strong {
  width:
    46px;

  flex:
    0 0 46px;

  color:
    var(--edu-blue);

  font-size:
    24px;

  font-weight:
    700;

  font-variant-numeric:
    tabular-nums;
}


.stats-list span {
  color:
    var(--edu-blue);

  font-size:
    16px;
}


.btn-primary {
  margin-top:
    8px;

  background:
    var(--edu-blue);

  color:
    #ffffff;
}


.btn-primary:hover {
  background:
    #082f5d;
}


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

.rectora-motivacion {
  padding:
    62px 24px;

  background:
    var(--edu-aqua-light);
}


.rectora-wrap {
  max-width:
    900px;

  margin:
    0 auto;

  display:
    grid;

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

  gap:
    52px;

  align-items:
    center;
}


.rectora-foto {
  border-radius:
    50%;
}


.rectora-foto img {
  width:
    150px;

  height:
    150px;

  border-radius:
    50%;

  object-fit:
    cover;

  display:
    block;
}


.rectora-texto {
  margin:
    0;
}


.rectora-frase {
  position:
    relative;

  margin:
    0;

  color:
    var(--edu-navy);

  font-size:
    clamp(
      24px,
      3vw,
      34px
    );

  font-weight:
    600;

  line-height:
    1.35;
}


.rectora-frase::before,
.rectora-frase::after {
  position:
    absolute;

  color:
    #65bdc8;

  font-family:
    Georgia,
    serif;

  font-size:
    74px;

  font-weight:
    700;

  line-height:
    1;
}


.rectora-frase::before {
  content:
    "“";

  left:
    -42px;

  top:
    -20px;
}


.rectora-frase::after {
  content:
    "”";

  right:
    -32px;

  bottom:
    -42px;
}


.frase-destacada {
  display:
    inline-block;

  padding:
    3px 12px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #be0b3b 0%,
      #41356e 35%,
      #113d74 65%,
      #081a40 100%
    );

  color:
    #ffffff;
}


.rectora-firma {
  margin-top:
    18px;
}


.rectora-firma strong {
  display:
    block;

  color:
    var(--edu-red);

  font-size:
    14px;

  letter-spacing:
    .03em;
}


.rectora-firma span {
  color:
    var(--edu-blue);

  font-size:
    12px;
}


/* ============================================================
   10. USAM DIGITAL
   ============================================================ */

.usam-digital {
  padding:
    64px 24px 72px;

  background:
    #ffffff;
}


.digital-wrap {
  max-width:
    1080px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(0, .9fr)
    minmax(0, 1.2fr);

  gap:
    70px;

  align-items:
    center;
}


.digital-logo {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.digital-logo img {
  width:
    min(100%, 395px);

  display:
    block;
}


.digital-info h2 {
  margin:
    0 0 14px;

  color:
    var(--edu-navy);

  font-size:
    clamp(
      30px,
      3vw,
      38px
    );

  font-weight:
    500;

  line-height:
    1.15;
}


.digital-info > p {
  margin:
    0 0 24px;

  color:
    #2b5c94;

  font-size:
    13px;

  line-height:
    1.65;
}


.digital-lista {
  margin:
    0;

  padding:
    0;

  list-style:
    none;
}


.digital-lista li {
  border-bottom:
    1px solid
    #7fd8dc;
}


.digital-lista button {
  width:
    100%;

  min-height:
    44px;

  padding:
    8px 2px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  border:
    0;

  background:
    transparent;

  color:
    var(--edu-blue);

  font:
    inherit;

  font-size:
    14px;

  font-weight:
    600;

  text-align:
    left;

  cursor:
    pointer;
}


.digital-lista
button:hover {
  color:
    var(--edu-red);
}


.digital-lista
.flecha {
  font-size:
    20px;

  line-height:
    1;
}


.digital-lista
.descarga {
  justify-self:
    end;

  color:
    var(--edu-red);

  font-size:
    18px;

  line-height:
    1;
}


/* ============================================================
   11. REVEAL / ANIMACIONES DE ENTRADA
   ============================================================ */

.reveal {
  opacity:
    1;

  transform:
    none;
}


.js
.education-page
.reveal {
  opacity:
    0;

  transform:
    translateY(22px);

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

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


.js
.education-page
.reveal.is-visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* ============================================================
   12. MODAL UNIVERSAL
   ============================================================ */

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


.education-modal {
  position:
    fixed;

  z-index:
    10000;

  inset:
    0;

  display:
    none;
}


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


.education-modal__backdrop {
  position:
    absolute;

  inset:
    0;

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

  backdrop-filter:
    blur(3px);
}


.education-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);
}


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

  padding:
    12px 16px 12px 22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  background:
    var(--edu-navy);

  color:
    #ffffff;
}


.education-modal__header h2 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      18px,
      2vw,
      24px
    );

  font-weight:
    600;

  line-height:
    1.25;
}


.education-modal__close {
  width:
    44px;

  height:
    44px;

  flex:
    0 0 44px;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    50%;

  background:
    transparent;

  color:
    #ffffff;

  cursor:
    pointer;
}


.education-modal__close span {
  display:
    block;

  margin-top:
    -2px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    34px;

  font-weight:
    300;

  line-height:
    .8;
}


.education-modal__close:hover {
  background:
    rgba(255, 255, 255, .14);
}


.education-modal__toolbar {
  padding:
    9px 18px;

  display:
    flex;

  justify-content:
    flex-end;

  border-bottom:
    1px solid
    #d8dee8;

  background:
    #f7f9fc;
}


.education-modal__toolbar[hidden] {
  display:
    none;
}


.education-modal__open-document {
  color:
    var(--edu-blue);

  font-size:
    13px;

  font-weight:
    700;

  text-decoration:
    none;
}


.education-modal__open-document:hover {
  text-decoration:
    underline;
}


.education-modal__body {
  min-height:
    0;

  flex:
    1 1 auto;

  overflow:
    auto;

  background:
    #0d1729;
}


.education-modal__content {
  min-height:
    0;

  width:
    100%;
}


.education-modal__video,
.education-modal__pdf {
  width:
    100%;

  height:
    min(72vh, 720px);

  display:
    block;

  border:
    0;

  background:
    #111827;
}


/* ============================================================
   13. GALERÍA DEL MODAL
   ============================================================ */

.education-gallery {
  min-height:
    min(72vh, 720px);

  padding:
    22px;

  display:
    grid;

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

  grid-template-rows:
    minmax(0, 1fr) auto;

  gap:
    14px;

  align-items:
    center;

  background:
    #0d1729;
}


.education-gallery__stage {
  min-width:
    0;

  min-height:
    0;

  height:
    min(64vh, 640px);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.education-gallery__image {
  max-width:
    100%;

  max-height:
    100%;

  object-fit:
    contain;

  display:
    block;
}


.education-gallery__arrow {
  width:
    48px;

  height:
    48px;

  padding:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px solid
    #ffffff;

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, .08);

  color:
    #ffffff;

  cursor:
    pointer;
}


.education-gallery__arrow svg {
  width:
    24px;

  height:
    24px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2.4;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.education-gallery__arrow:hover {
  background:
    rgba(255, 255, 255, .18);
}


.education-gallery__status {
  grid-column:
    1 / -1;

  justify-self:
    center;

  color:
    #ffffff;

  font-size:
    13px;

  font-variant-numeric:
    tabular-nums;
}


/* ============================================================
   14. TABLET
   ============================================================ */

@media (max-width: 1279px) {

  .education-hero {
    height:
      440px;
  }

  .education-hero .hero-title {
    font-size:
      42px;
  }

  .education-hero .hero-subtitle {
    font-size:
      20px;
  }


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


  .oferta-modelo {
    grid-column:
      span 3;
  }


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


  .pilar {
    min-height:
      290px;

    padding:
      36px 30px;
  }

}


@media (max-width: 1024px) {

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


  .oferta-modelo {
    grid-column:
      span 2;
  }


  .life-usam-container,
  .elegidos-container,
  .digital-wrap {
    gap:
      40px;
  }


  .pilares {
    padding-top:
      90px;

    background:
      var(--edu-blue);
  }


  .pilares-title {
    top:
      24px;

    transform:
      translateX(-50%);
  }


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

    padding:
      0 24px;

    gap:
      0;
  }


  .pilar:nth-child(n)::after {
    display:
      none;
  }


  .pilar-bottom:first-of-type,
  .pilar-bottom:last-child {
    border-radius:
      0;
  }

}


/* ============================================================
   15. MÓVIL
   ============================================================ */

@media (max-width: 768px) {

  .education-page
  section[id] {
    scroll-margin-top:
      72px;
  }


  .education-hero {
    height:
      380px;
  }

  .education-hero .hero-content {
    padding:
      0 16px;
  }

  .education-hero .hero-title {
    font-size:
      34px;
  }

  .education-hero .hero-subtitle {
    font-size:
      18px;
  }


  .oferta-section {
    padding:
      42px 16px 48px;
  }


  .oferta-grid {
    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .oferta-modelo {
    grid-column:
      span 1;

    padding:
      20px 4px 0;
  }


  .oferta-media {
    height:
      auto;

    aspect-ratio:
      16 / 10;
  }


  .oferta-text {
    min-height:
      0;
  }


  .life-usam {
    padding:
      46px 0;
  }


  .life-usam-container,
  .elegidos-container,
  .digital-wrap {
    padding-left:
      16px;

    padding-right:
      16px;

    grid-template-columns:
      1fr;

    gap:
      34px;
  }


  .life-usam-media,
  .life-usam-media > img {
    min-height:
      250px;
  }


  .life-usam-play {
    width:
      76px;

    height:
      76px;
  }


  .elegidos {
    padding:
      42px 0;
  }


  .elegidos-container {
    text-align:
      left;
  }


  .pilares {
    padding:
      100px 16px 48px;
  }


  .pilares-title {
    width:
      calc(100% - 32px);

    top:
      24px;

    justify-content:
      center;

    font-size:
      18px;
  }


  .pilares-title span,
  .pilares-title strong {
    padding:
      10px 12px;
  }


  .pilares-grid {
    padding:
      0;

    grid-template-columns:
      1fr;

    gap:
      0;
  }


  .pilar {
    min-height:
      0;

    padding:
      34px 26px;
  }


  .ganadores {
    padding:
      44px 16px 50px;
  }


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

    gap:
      10px;
  }


  .ganador-card {
    min-height:
      160px;

    padding:
      22px 18px;
  }


  .usam-destacados {
    padding:
      36px 16px 8px;
  }


  .destacado,
  .destacado-middle {
    grid-template-columns:
      1fr;

    gap:
      28px;

    margin-bottom:
      50px;
  }


  .destacado-middle
  .destacado-text {
    order:
      2;
  }


  .destacado-middle
  .destacado-img {
    order:
      1;
  }


  .rectora-motivacion {
    padding:
      48px 16px;
  }


  .rectora-wrap {
    grid-template-columns:
      1fr;

    gap:
      28px;

    text-align:
      center;
  }


  .rectora-foto {
    justify-self:
      center;
  }


  .rectora-frase::before,
  .rectora-frase::after {
    display:
      none;
  }


  .digital-logo {
    order:
      2;
  }


  .digital-info {
    order:
      1;
  }


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

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

    margin:
      10px auto;
  }


  .education-modal__header {
    min-height:
      60px;

    padding:
      10px 12px 10px 16px;
  }


  .education-modal__video,
  .education-modal__pdf {
    height:
      72vh;
  }


  .education-gallery {
    min-height:
      72vh;

    padding:
      12px;

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

    gap:
      8px;
  }


  .education-gallery__arrow {
    width:
      40px;

    height:
      40px;
  }

}


@media (max-width: 480px) {

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


  .ganador-card {
    min-height:
      0;

    text-align:
      center;
  }


  .stats-list strong {
    width:
      42px;

    flex-basis:
      42px;
  }


  .stats-list span {
    font-size:
      14px;
  }


  .pilares-title {
    flex-direction:
      column;

    border-radius:
      18px;

    text-align:
      center;
  }


  .pilares-title strong {
    border-radius:
      14px;
  }


  .pilares {
    padding-top:
      126px;
  }

}


/* ============================================================
   16. FULL > 1920PX
   ============================================================ */

@media (min-width: 1921px) {

  .education-page {
    --edu-container:
      1580px;
  }


  .oferta-media {
    height:
      300px;
  }


  .life-usam-container,
  .digital-wrap {
    max-width:
      1380px;
  }


  .ganadores-grid {
    max-width:
      1420px;
  }


  .ganador-card {
    min-height:
      190px;
  }

}


/* ============================================================
   17. REDUCED MOTION
   ============================================================ */

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

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


  .education-page .hover-media img,
  .life-usam-play,
  .js .education-page .reveal {
    transition:
      none !important;

    animation:
      none !important;
  }


  .education-page
  .hover-media:hover img,

  .education-page
  .hover-media:focus-within img,

  .life-usam-play:hover,

  .js
  .education-page
  .reveal,

  .js
  .education-page
  .reveal.is-visible {
    transform:
      none !important;
  }


  .js
  .education-page
  .reveal {
    opacity:
      1 !important;
  }

}