:root {
      --navy: #07142f;
      --blue: #405486;
      --muted: #7180a2;
      --orange: #ff3b0a;
      --surface: rgba(255, 255, 255, 0.9);
      --line: rgba(54, 75, 116, 0.14);
      --shadow: 0 1vw 2.4vw rgba(25, 45, 78, 0.09);
      --u: min(1vw, 1.7778vh);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }

    body {
      display: grid;
      place-items: center;
      color: var(--navy);
      background: #dce3ed;
      font-family:
        Inter,
        Montserrat,
        "Segoe UI",
        Arial,
        sans-serif;
    }

    .screen {
      display: grid;
      grid-template-rows: 6.5fr minmax(0, 38fr) 6.3fr;
      gap: calc(var(--u) * 1.05);
      width: 100vw;
      height: 100vh;
      height: 100svh;
      min-width: 0;
      padding:
        calc(var(--u) * 1.65)
        calc(var(--u) * 2.3);
      overflow: hidden;
      background:
        radial-gradient(
          circle at 50% -20%,
          #ffffff,
          transparent 54%
        ),
        linear-gradient(
          135deg,
          #fbfcfe 0%,
          #edf2f7 100%
        );
    }

    /* ENCABEZADO */

    .topbar {
      display: grid;
      grid-template-columns: 43fr 36fr 21fr;
      align-items: center;
      min-height: 0;
    }

    .institutional-brand {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      min-width: 0;
      overflow: hidden;
    }

    .institutional-logo {
      display: block;
      width: 100%;
      height: 100%;
      max-width: calc(var(--u) * 40);
      max-height: calc(var(--u) * 6);
      object-fit: contain;
      object-position: left center;
    }

    .topbar > *,
    .footer > * {
      min-width: 0;
    }

    .values {
      display: grid;
      grid-template-columns: repeat(5, auto);
      align-items: center;
      justify-content: center;
      gap: calc(var(--u) * 1.15);
      color: var(--blue);
      font-size: calc(var(--u) * 0.88);
      font-weight: 600;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .values i {
      width: 1px;
      height: calc(var(--u) * 1.2);
      background: #a8b2c8;
    }

    .values small {
      grid-column: 1 / -1;
      margin-top: calc(var(--u) * 0.24);
      font-size: 0.75em;
      font-weight: 500;
      letter-spacing: 0.46em;
      text-align: center;
    }

    .purpose {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: calc(var(--u) * 1.15);
      color: var(--blue);
      font-size: calc(var(--u) * 0.76);
      font-weight: 600;
      letter-spacing: 0.23em;
      line-height: 1.55;
      text-transform: uppercase;
    }

    .purpose p {
      margin: 0;
    }

    .purpose-mark {
      width: calc(var(--u) * 1.2);
      height: calc(var(--u) * 3);
      background: var(--orange);
      clip-path: polygon(
        38% 0,
        100% 0,
        62% 100%,
        0 100%
      );
    }

    /* CONTENIDO */

    .content {
      display: grid;
      grid-template-columns: 64fr 34fr;
      gap: calc(var(--u) * 1.2);
      min-height: 0;
    }

    /* EVENTO DESTACADO */

    .hero {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.95);
      border-radius: calc(var(--u) * 2);
      background:
        linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.99) 0%,
          rgba(255, 255, 255, 0.96) 36%,
          rgba(255, 255, 255, 0.46) 59%,
          rgba(4, 14, 32, 0.08) 100%
        ),
        url("../evento-destacado.jpg")
        center / cover no-repeat,
        linear-gradient(
          135deg,
          #f8fafc 0%,
          #c3cfdd 100%
        );
      box-shadow: var(--shadow);
    }

    .hero::after {
      position: absolute;
      inset: auto 0 0;
      height: 28%;
      background:
        linear-gradient(
          transparent,
          rgba(3, 12, 29, 0.18)
        );
      content: "";
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      width: 60%;
      height: 100%;
      padding: calc(var(--u) * 2);
    }

    .featured-label {
      display: inline-flex;
      align-self: flex-start;
      align-items: center;
      gap: calc(var(--u) * 0.65);
      padding:
        calc(var(--u) * 0.65)
        calc(var(--u) * 1.4);
      border-radius: 999px;
      color: #ffffff;
      background:
        linear-gradient(
          90deg,
          #ff3008,
          #ff7748
        );
      box-shadow:
        0
        calc(var(--u) * 0.5)
        calc(var(--u) * 1.25)
        rgba(255, 55, 10, 0.3);
      font-size: calc(var(--u) * 0.82);
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    .featured-label span {
      font-size: 1.45em;
    }

    .featured-label b {
      font: inherit;
      font-weight: inherit;
    }

    .hero-copy {
      margin: auto 0;
    }

    .hero h1 {
      margin: 0;
      font-size: calc(var(--u) * 4.6);
      font-weight: 850;
      letter-spacing: -0.07em;
      line-height: 0.86;
    }

    .hero h1 strong {
      display: block;
      color: var(--orange);
    }

    .hero-slogan {
      margin: calc(var(--u) * 1.2) 0 0;
      color: var(--blue);
      font-size: calc(var(--u) * 1.18);
      letter-spacing: 0.37em;
      text-transform: uppercase;
    }

    .hero-topics {
      margin: calc(var(--u) * 1.05) 0 0;
      color: var(--blue);
      font-size: calc(var(--u) * 0.8);
      font-weight: 650;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .event-details {
      display: flex;
      gap: calc(var(--u) * 0.8);
      margin-top: calc(var(--u) * 1.3);
    }

    .detail {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 0.8);
      min-height: calc(var(--u) * 4.2);
      padding:
        calc(var(--u) * 0.65)
        calc(var(--u) * 1.05);
      border: 1px solid rgba(68, 87, 126, 0.17);
      border-radius: calc(var(--u) * 1.15);
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(12px);
    }

    .detail:last-child {
      flex: 1;
    }

    .detail-icon {
      color: #050a14;
      font-size: calc(var(--u) * 1.7);
    }

    .detail strong,
    .detail small {
      display: block;
    }

    .detail strong {
      font-size: calc(var(--u) * 1.02);
    }

    .detail small {
      margin-top: calc(var(--u) * 0.12);
      color: var(--blue);
      font-size: calc(var(--u) * 0.8);
    }

    .hero-footer {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 2);
    }

    .hero-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: calc(var(--u) * 13.5);
      padding:
        calc(var(--u) * 0.85)
        calc(var(--u) * 1.35);
      border-radius: 999px;
      color: #ffffff;
      background:
        linear-gradient(
          90deg,
          #ff3108,
          #ff7546
        );
      box-shadow:
        0
        calc(var(--u) * 0.55)
        calc(var(--u) * 1.2)
        rgba(255, 55, 10, 0.27);
      font-size: calc(var(--u) * 0.82);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .hero-button span {
      font-size: 1.5em;
    }

    .hero-motto {
      padding-left: calc(var(--u) * 1.55);
      border-left: 1px solid #8e9ab5;
      color: var(--blue);
      font-size: calc(var(--u) * 0.68);
      font-weight: 650;
      letter-spacing: 0.27em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .hero-keywords {
      position: absolute;
      top: calc(var(--u) * 2);
      right: calc(var(--u) * 2);
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: calc(var(--u) * 0.32);
      color: #ffffff;
      font-size: calc(var(--u) * 0.65);
      letter-spacing: 0.26em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .hero-keywords::after {
      width: calc(var(--u) * 1.2);
      height: 2px;
      margin-top: calc(var(--u) * 0.45);
      background: var(--orange);
      content: "";
    }

    /* COLUMNA DERECHA */

    .sidebar {
      display: grid;
      grid-template-rows: minmax(0, 1fr) 31%;
      gap: calc(var(--u) * 0.75);
      min-height: 0;
    }

    .events {
      display: grid;
      grid-template-rows:
        calc(var(--u) * 3.2)
        repeat(var(--event-count, 3), minmax(0, 1fr));
      gap: calc(var(--u) * 0.62);
      min-height: 0;
    }

    .events-header,
    .event-card,
    .programs {
      border: 1px solid rgba(255, 255, 255, 0.95);
      background: var(--surface);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .events-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 calc(var(--u) * 1.4);
      border-radius: calc(var(--u) * 1.4);
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 0.65);
    }

    .section-title span {
      font-size: calc(var(--u) * 1.3);
    }

    .section-title h2 {
      margin: 0;
      font-size: calc(var(--u) * 1.02);
    }

    .view-all {
      color: var(--blue);
      font-size: calc(var(--u) * 0.68);
      font-weight: 750;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .view-all b {
      margin-left: calc(var(--u) * 0.3);
      color: var(--orange);
      font-size: 1.5em;
    }

    .event-card {
      display: grid;
      grid-template-columns:
        calc(var(--u) * 4.5)
        minmax(0, 1fr)
        calc(var(--u) * 3);
      align-items: center;
      gap: calc(var(--u) * 0.75);
      min-height: 0;
      padding:
        calc(var(--u) * 0.65)
        calc(var(--u) * 1.2);
      border-radius: calc(var(--u) * 1.4);
    }

    .date-card {
      display: flex;
      flex-direction: column;
      padding-right: calc(var(--u) * 0.75);
      border-right: 1px solid var(--line);
      font-style: normal;
    }

    .date-card span {
      color: var(--orange);
      font-size: calc(var(--u) * 0.86);
      font-weight: 800;
      text-transform: uppercase;
    }

    .date-card strong {
      font-size: calc(var(--u) * 1.95);
      line-height: 1;
    }

    .date-card small {
      margin-top: calc(var(--u) * 0.22);
      color: var(--muted);
      font-size: calc(var(--u) * 0.76);
    }

    .event-info {
      min-width: 0;
    }

    .event-info h3,
    .event-info p,
    .event-location {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .event-info h3 {
      margin: 0;
      font-size: calc(var(--u) * 1.02);
      line-height: 1.2;
    }

    .event-info p {
      margin: calc(var(--u) * 0.18) 0 0;
      color: #53658b;
      font-size: calc(var(--u) * 0.82);
    }

    .event-location {
      display: block;
      margin-top: calc(var(--u) * 0.22);
      color: #53658b;
      font-size: calc(var(--u) * 0.73);
    }

    .event-location b {
      margin-right: calc(var(--u) * 0.28);
      color: var(--orange);
    }

    .event-arrow {
      display: grid;
      place-items: center;
      width: calc(var(--u) * 2.65);
      aspect-ratio: 1;
      border-radius: 50%;
      color: var(--orange);
      background: rgba(255, 65, 18, 0.11);
      font-size: calc(var(--u) * 1.4);
    }

    /* CARRERAS */

    .programs {
      min-height: 0;
      padding: calc(var(--u) * 0.72);
      border-radius: calc(var(--u) * 1.4);
    }

    .programs-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .programs-header div {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 0.48);
    }

    .programs-header b {
      color: var(--orange);
      font-size: calc(var(--u) * 1.25);
    }

    .programs-header h2 {
      margin: 0;
      font-size: calc(var(--u) * 0.94);
    }

    .programs-header > span {
      color: var(--blue);
      font-size: calc(var(--u) * 0.6);
      font-weight: 750;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .program-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: calc(var(--u) * 0.42);
      height: calc(100% - var(--u) * 1.45);
      margin-top: calc(var(--u) * 0.42);
    }

    .program {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-width: 0;
      border-radius: calc(var(--u) * 0.95);
      background: rgba(255, 255, 255, 0.66);
      text-align: center;
    }

    .program-icon {
      display: grid;
      place-items: center;
      width: calc(var(--u) * 3.3);
      aspect-ratio: 1;
      border-radius: 50%;
      color: #ffffff;
      box-shadow:
        0
        calc(var(--u) * 0.42)
        calc(var(--u) * 1)
        rgba(30, 50, 85, 0.16);
      font-size: calc(var(--u) * 1.3);
    }

    .program h3 {
      min-height: 2.2em;
      margin: calc(var(--u) * 0.32) 0 0;
      color: #14213d;
      font-size: calc(var(--u) * 0.72);
      font-weight: 650;
      line-height: 1.16;
    }

    .systems .program-icon {
      background:
        linear-gradient(145deg, #ff773d, #ff3108);
    }

    .industrial .program-icon {
      background:
        linear-gradient(145deg, #ffc92b, #e89c00);
    }

    .mechatronics .program-icon {
      background:
        linear-gradient(145deg, #ac40ff, #7128df);
    }

    .chemistry .program-icon {
      background:
        linear-gradient(145deg, #3bd67f, #0bab56);
    }

    /* PIE */

    .footer {
      display: grid;
      grid-template-columns: 27fr 37fr 26fr 10fr;
      align-items: center;
      min-height: 0;
      padding:
        calc(var(--u) * 0.5)
        calc(var(--u) * 1.9);
      border: 1px solid rgba(255, 255, 255, 0.95);
      border-radius: calc(var(--u) * 2);
      background: rgba(255, 255, 255, 0.9);
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .clock {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 1.15);
      min-width: 0;
    }

    .clock > strong {
      padding-right: calc(var(--u) * 1.15);
      border-right: 2px solid var(--orange);
      color: #050505;
      font-size: calc(var(--u) * 2.3);
      line-height: 1;
    }

    .clock div {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .clock b {
      font-size: calc(var(--u) * 0.78);
    }

    .clock span {
      margin-top: calc(var(--u) * 0.18);
      overflow: hidden;
      color: #53658b;
      font-size: calc(var(--u) * 0.72);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .phrase {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: calc(var(--u) * 0.75);
      height: 70%;
      margin: 0;
      padding: 0 calc(var(--u) * 0.9);
      border-right: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .phrase span {
      color: var(--orange);
      font-family: Georgia, serif;
      font-size: calc(var(--u) * 2.5);
      font-weight: 700;
      line-height: 0.7;
    }

    .phrase p {
      margin: 0;
      font-size: calc(var(--u) * 0.92);
      font-weight: 500;
      font-style: italic;
      text-align: center;
    }

    /* CLIMA */

    .weather {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: calc(var(--u) * 0.55);
      height: 78%;
      padding: 0 calc(var(--u) * 0.75);
      overflow: hidden;
    }

    .weather-icon {
      display: grid;
      place-items: center;
      width: calc(var(--u) * 2.7);
      height: calc(var(--u) * 2.7);
      font-size: calc(var(--u) * 1.95);
      line-height: 1;
    }

    .weather-data {
      min-width: 0;
    }

    .weather-heading {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * 0.4);
      min-width: 0;
    }

    .weather-heading strong {
      flex-shrink: 0;
      font-size: calc(var(--u) * 1.1);
      line-height: 1;
    }

    .weather-heading b {
      overflow: hidden;
      font-size: calc(var(--u) * 0.76);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .weather-description,
    .weather-forecast {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .weather-description {
      margin-top: calc(var(--u) * 0.16);
      color: #53658b;
      font-size: calc(var(--u) * 0.62);
    }

    .weather-forecast {
      margin-top: calc(var(--u) * 0.12);
      color: var(--blue);
      font-size: calc(var(--u) * 0.58);
      font-weight: 600;
    }

    .weather-indicators {
      position: absolute;
      right: calc(var(--u) * 0.75);
      bottom: 0;
      display: flex;
      gap: calc(var(--u) * 0.16);
    }

    .weather-indicators span {
      width: calc(var(--u) * 0.22);
      height: calc(var(--u) * 0.22);
      border-radius: 50%;
      background: #cad1de;
      transition:
        width 0.4s ease,
        background-color 0.4s ease;
    }

    .weather-indicators span.active {
      width: calc(var(--u) * 0.7);
      border-radius: 999px;
      background: var(--orange);
    }

    .footer-brand {
      padding-left: calc(var(--u) * 1.3);
      border-left: 1px solid var(--line);
      color: var(--blue);
      font-size: calc(var(--u) * 0.59);
      font-weight: 650;
      letter-spacing: 0.28em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    /* TABLETAS Y PANTALLAS COMPACTAS */

    @media (max-width: 1100px) {
      :root {
        --u: clamp(0.72rem, 1.55vw, 1rem);
        --shadow: 0 0.75rem 2rem rgba(25, 45, 78, 0.09);
      }

      html,
      body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
      }

      body {
        display: block;
      }

      .screen {
        grid-template-rows: auto auto auto;
        width: 100%;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        gap: 1rem;
        padding: clamp(1rem, 3vw, 2rem);
        overflow: visible;
      }

      .topbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1rem 2rem;
      }

      .institutional-brand {
        min-height: 4.5rem;
      }

      .institutional-logo {
        width: min(100%, 34rem);
        height: auto;
        max-width: 100%;
        max-height: 5rem;
      }

      .values {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: clamp(0.65rem, 2.2vw, 1.25rem);
        font-size: clamp(0.66rem, 1.4vw, 0.8rem);
      }

      .purpose {
        font-size: clamp(0.6rem, 1.25vw, 0.75rem);
      }

      .content {
        grid-template-columns: 1fr;
        gap: 1rem;
      }

      .hero {
        min-height: clamp(31rem, 67vw, 42rem);
        border-radius: 1.5rem;
      }

      .hero-content {
        width: min(68%, 43rem);
        padding: clamp(1.25rem, 3vw, 2rem);
      }

      .hero h1 {
        font-size: clamp(3.15rem, 7.2vw, 4.8rem);
      }

      .hero-slogan {
        font-size: clamp(0.85rem, 2vw, 1.2rem);
      }

      .hero-topics,
      .featured-label,
      .detail strong,
      .detail small,
      .hero-button,
      .hero-motto {
        font-size: clamp(0.75rem, 1.5vw, 1rem);
      }

      .sidebar {
        grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
        grid-template-rows: auto;
        gap: 1rem;
      }

      .events {
        grid-template-rows: auto repeat(var(--event-count, 3), minmax(7rem, auto));
        gap: 0.75rem;
      }

      .events-header,
      .event-card,
      .programs {
        border-radius: 1.25rem;
      }

      .events-header {
        min-height: 4rem;
        padding: 0 1.25rem;
      }

      .section-title h2 {
        font-size: clamp(0.95rem, 2vw, 1.15rem);
      }

      .view-all {
        font-size: 0.7rem;
      }

      .event-card {
        grid-template-columns: 4rem minmax(0, 1fr) 2.5rem;
        gap: 0.85rem;
        padding: 0.85rem 1rem;
      }

      .date-card span,
      .event-info h3 {
        font-size: 0.9rem;
      }

      .date-card strong {
        font-size: 1.9rem;
      }

      .date-card small,
      .event-info p,
      .event-location {
        font-size: 0.75rem;
      }

      .event-arrow {
        width: 2.5rem;
        font-size: 1.25rem;
      }

      .programs {
        padding: 1rem;
      }

      .programs-header > span {
        display: none;
      }

      .programs-header h2 {
        font-size: 0.9rem;
      }

      .program-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto;
        margin-top: 0.75rem;
        gap: 0.65rem;
      }

      .program {
        min-height: 7.25rem;
        padding: 0.65rem;
      }

      .program-icon {
        width: 3.25rem;
        font-size: 1.3rem;
      }

      .program h3 {
        margin-top: 0.4rem;
        font-size: 0.72rem;
      }

      .footer {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-radius: 1.5rem;
      }

      .clock > strong {
        font-size: 2.2rem;
      }

      .clock b,
      .clock span,
      .weather-heading b,
      .weather-description,
      .weather-forecast,
      .footer-brand {
        font-size: 0.75rem;
      }

      .phrase {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 3.5rem;
        border: 0;
        border-top: 1px solid var(--line);
      }

      .phrase p {
        font-size: 0.9rem;
      }

      .weather {
        height: auto;
        min-height: 4rem;
        padding: 0;
      }

      .weather-icon {
        width: 3rem;
        height: 3rem;
        font-size: 2rem;
      }

      .weather-heading strong {
        font-size: 1.2rem;
      }

      .footer-brand {
        display: none;
      }
    }

    /* TELÉFONOS */

    @media (max-width: 700px) {
      :root {
        --u: 1rem;
      }

      .screen {
        gap: 0.85rem;
        padding: clamp(0.75rem, 4vw, 1.25rem);
      }

      .topbar {
        grid-template-columns: 1fr;
        gap: 0.75rem;
      }

      .institutional-brand {
        justify-content: center;
        min-height: 0;
      }

      .institutional-logo {
        width: 100%;
        max-height: none;
      }

      .values {
        grid-column: 1;
        grid-row: auto;
        gap: clamp(0.35rem, 2vw, 0.75rem);
        font-size: clamp(0.58rem, 2.5vw, 0.72rem);
        letter-spacing: 0.14em;
      }

      .values small {
        letter-spacing: 0.28em;
      }

      .purpose {
        justify-content: center;
        font-size: 0.68rem;
        text-align: center;
      }

      .purpose p br {
        display: none;
      }

      .purpose-mark {
        width: 0.8rem;
        height: 2rem;
      }

      .hero {
        min-height: 39rem;
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(255, 255, 255, 0.94) 72%,
            rgba(238, 243, 249, 0.92) 100%
          ),
          url("../evento-destacado.jpg") center / cover no-repeat;
      }

      .hero-content {
        width: 100%;
        padding: clamp(1rem, 5vw, 1.5rem);
      }

      .featured-label {
        padding: 0.65rem 1rem;
        font-size: 0.7rem;
      }

      .hero h1 {
        font-size: clamp(2.5rem, 12.5vw, 3.9rem);
        line-height: 0.92;
      }

      .hero-slogan {
        font-size: clamp(0.78rem, 3.5vw, 1rem);
        letter-spacing: 0.2em;
      }

      .hero-topics {
        font-size: 0.7rem;
        line-height: 1.6;
        white-space: normal;
      }

      .event-details {
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 1rem;
      }

      .detail {
        width: 100%;
        min-height: 4.25rem;
        padding: 0.7rem 0.9rem;
      }

      .detail:last-child {
        flex: initial;
      }

      .detail-icon {
        font-size: 1.5rem;
      }

      .detail strong {
        font-size: 0.95rem;
      }

      .detail small {
        font-size: 0.78rem;
      }

      .hero-footer {
        flex-wrap: wrap;
        gap: 0.9rem;
      }

      .hero-button {
        width: min(100%, 14rem);
        padding: 0.8rem 1.1rem;
        font-size: 0.8rem;
      }

      .hero-motto {
        font-size: 0.66rem;
      }

      .hero-keywords {
        display: none;
      }

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

      .events {
        grid-template-rows: auto;
      }

      .events-header {
        min-height: 3.75rem;
      }

      .event-card {
        min-height: 7.25rem;
      }

      .programs-header h2 {
        font-size: clamp(0.8rem, 3.6vw, 1rem);
      }

      .footer {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .clock,
      .weather {
        min-height: 5rem;
      }

      .weather {
        border-top: 1px solid var(--line);
      }

      .phrase {
        grid-column: 1;
        grid-row: auto;
        min-height: 4.5rem;
        padding: 0.75rem 0;
      }

      .phrase span {
        font-size: 2rem;
      }

      .weather-description,
      .weather-forecast {
        white-space: normal;
      }

      .weather-indicators {
        right: 0;
        bottom: 0.25rem;
      }
    }

    /* TELÉFONOS MUY ESTRECHOS */

    @media (max-width: 390px) {
      .values {
        grid-template-columns: repeat(3, auto);
      }

      .values i {
        display: none;
      }

      .values small {
        grid-column: 1 / -1;
      }

      .purpose {
        display: none;
      }

      .hero {
        min-height: 37rem;
      }

      .event-card {
        grid-template-columns: 3.5rem minmax(0, 1fr);
      }

      .event-arrow {
        display: none;
      }

      .event-info p,
      .event-location {
        white-space: normal;
      }

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

      .program {
        min-height: 6.5rem;
      }

      .clock {
        gap: 0.75rem;
      }

      .clock > strong {
        padding-right: 0.75rem;
        font-size: 1.85rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
    /* CAPA DINÁMICA: conserva el diseño original y muestra medios solo cuando existen */

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0;
      background-color: #cbd3dc;
      background-position: center 38%;
      background-size: cover;
      filter: saturate(1.12) contrast(1.08);
      transition: opacity 500ms ease;
    }

    .hero-media-frame {
      position: absolute;
      inset: 0;
      opacity: 0;
      background-position: center 38%;
      background-size: cover;
      transition: opacity 700ms ease;
    }

    .hero-media-frame.active {
      opacity: 1;
    }

    .hero-media.active {
      opacity: 1;
    }

    .hero-media::after {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          90deg,
          #ffffff 0%,
          rgba(255, 255, 255, 0.96) 20%,
          rgba(255, 255, 255, 0.76) 38%,
          rgba(255, 255, 255, 0.28) 56%,
          rgba(255, 255, 255, 0.02) 72%,
          rgba(5, 18, 42, 0.08) 100%
        ),
        linear-gradient(
          0deg,
          rgba(5, 18, 42, 0.38) 0%,
          rgba(5, 18, 42, 0.08) 24%,
          transparent 45%
        );
      content: "";
    }

    .hero-media-frame video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero.slide-enter .hero-content {
      animation: hero-copy-in 560ms ease both;
    }

    @keyframes hero-copy-in {
      from {
        opacity: .72;
        transform: translateY(calc(var(--u) * .3));
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .featured-carousel {
      position: absolute;
      top: calc(var(--u) * 8.1);
      right: calc(var(--u) * 2);
      z-index: 3;
      display: grid;
      grid-template-columns: auto auto;
      gap: calc(var(--u) * .28) calc(var(--u) * .65);
      min-width: calc(var(--u) * 10.5);
      padding: calc(var(--u) * .62) calc(var(--u) * .78);
      border: 1px solid rgba(255,255,255,.38);
      border-radius: calc(var(--u) * .75);
      color: #fff;
      background: rgba(7,20,47,.66);
      box-shadow: 0 calc(var(--u) * .45) calc(var(--u) * 1.2) rgba(7,20,47,.14);
      backdrop-filter: blur(10px);
    }

    .featured-carousel[hidden] {
      display: none;
    }

    .featured-carousel span,
    .featured-carousel strong {
      font-size: calc(var(--u) * .68);
      line-height: 1;
    }

    .featured-carousel span {
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .featured-carousel strong {
      justify-self: end;
      color: #fff;
      font-variant-numeric: tabular-nums;
    }

    .featured-progress {
      grid-column: 1 / -1;
      height: 3px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.28);
    }

    .featured-progress b {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: var(--orange);
      transform: scaleX(0);
      transform-origin: left;
    }

    .hero.carousel-running .featured-progress b {
      animation: featured-progress var(--carousel-duration, 10s) linear forwards;
    }

    @keyframes featured-progress {
      to { transform: scaleX(1); }
    }

    /* MICROCARRUSEL DE INGENIERÍAS */

    .programs.dce-careers {
      --active: #10a66d;
      position: relative;
      isolation: isolate;
      width: 100%;
      height: 100%;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      border-radius: calc(var(--u) * 1.4);
      background: rgba(255, 255, 255, .96);
    }

    .dce-careers::after {
      position: absolute;
      right: calc(var(--u) * -3);
      bottom: calc(var(--u) * -6);
      z-index: 0;
      width: calc(var(--u) * 16);
      height: calc(var(--u) * 16);
      border-radius: 50%;
      background: var(--active);
      content: "";
      filter: blur(4px);
      opacity: .065;
      transition: background .6s ease;
    }

    .dce-top {
      position: absolute;
      inset: 0 0 auto;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: calc(var(--u) * .85) calc(var(--u) * 1.1) 0;
    }

    .dce-title {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * .5);
      font-size: calc(var(--u) * .82);
      font-weight: 850;
    }

    .dce-title svg {
      width: calc(var(--u) * .72);
      height: calc(var(--u) * 1.15);
      color: var(--orange);
    }

    .dce-motto {
      color: var(--blue);
      font-family: Georgia, serif;
      font-size: calc(var(--u) * .56);
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .dce-viewport,
    .dce-track,
    .dce-slide {
      height: 100%;
    }

    .dce-viewport {
      overflow: hidden;
    }

    .dce-track {
      display: flex;
      will-change: transform;
      transition: transform .75s cubic-bezier(.72, 0, .2, 1);
    }

    .dce-slide {
      --accent: #10a66d;
      --wash: #e6f8f0;
      position: relative;
      display: grid;
      flex: 0 0 100%;
      grid-template-columns: 53% 47%;
      align-items: center;
      padding: calc(var(--u) * 2.3) calc(var(--u) * 1.1) calc(var(--u) * .75);
    }

    .dce-copy {
      position: relative;
      z-index: 2;
      padding-left: calc(var(--u) * .45);
      opacity: 0;
      transform: translateX(calc(var(--u) * -1.1));
      transition: opacity .45s .22s ease, transform .45s .22s ease;
    }

    .dce-slide.is-active .dce-copy {
      opacity: 1;
      transform: none;
    }

    .dce-kicker {
      display: flex;
      align-items: center;
      gap: calc(var(--u) * .4);
      margin-bottom: calc(var(--u) * .18);
      color: var(--accent);
      font-size: calc(var(--u) * .58);
      font-weight: 900;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .dce-kicker::before {
      width: calc(var(--u) * 1.1);
      height: 2px;
      background: currentColor;
      content: "";
    }

    .dce-copy h3 {
      margin: 0;
      max-width: calc(var(--u) * 20);
      color: var(--navy);
      font-size: calc(var(--u) * 1.65);
      letter-spacing: -.045em;
      line-height: .94;
    }

    .dce-copy p {
      display: -webkit-box;
      max-width: calc(var(--u) * 19);
      margin: calc(var(--u) * .42) 0 0;
      overflow: hidden;
      color: #53647d;
      font-size: calc(var(--u) * .7);
      line-height: 1.35;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .dce-tags {
      display: flex;
      gap: calc(var(--u) * .3);
      margin-top: calc(var(--u) * .48);
    }

    .dce-tags span {
      padding: calc(var(--u) * .18) calc(var(--u) * .42);
      border-radius: 999px;
      color: var(--accent);
      background: var(--wash);
      font-size: calc(var(--u) * .52);
      font-weight: 800;
    }

    .dce-visual {
      position: relative;
      z-index: 1;
      display: grid;
      height: calc(var(--u) * 7);
      place-items: center;
      opacity: 0;
      transform: translateX(calc(var(--u) * 1.35)) scale(.92);
      transition: opacity .55s .2s ease, transform .55s .2s ease;
    }

    .dce-slide.is-active .dce-visual {
      opacity: 1;
      transform: none;
    }

    .dce-visual::before {
      position: absolute;
      width: calc(var(--u) * 8.1);
      height: calc(var(--u) * 6);
      border-radius: 58% 42% 47% 53% / 46% 58% 42% 54%;
      background: var(--wash);
      content: "";
      animation: dce-morph 5.5s ease-in-out infinite alternate;
    }

    .dce-art {
      position: relative;
      width: min(calc(var(--u) * 14.8), 98%);
      height: calc(var(--u) * 6.9);
      overflow: visible;
      color: var(--accent);
      filter: drop-shadow(0 calc(var(--u) * .6) calc(var(--u) * .8) color-mix(in srgb, var(--accent) 17%, transparent));
    }

    .dce-art .base { fill: #fff; stroke: #dce4ec; stroke-width: 2; }
    .dce-art .line { fill: none; stroke: #aebcca; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .dce-art .accent { fill: currentColor; }
    .dce-art .stroke { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .dce-art .wash { fill: var(--wash); }
    .chem-bubble { transform-box: fill-box; transform-origin: center; animation: dce-bubble 2.3s ease-in infinite; }
    .chem-bubble.b2 { animation-delay: .7s; }
    .chem-bubble.b3 { animation-delay: 1.4s; }
    .atom { transform-origin: 190px 54px; animation: dce-rotate 8s linear infinite; }
    .robot-shoulder { transform-box: view-box; transform-origin: 68px 82px; animation: dce-robot-shoulder 3.2s ease-in-out infinite alternate; }
    .robot-forearm { transform-box: view-box; transform-origin: 112px 45px; animation: dce-robot-elbow 3.2s ease-in-out infinite alternate; }
    .robot-claw-left { transform-box: view-box; transform-origin: 166px 69px; animation: dce-claw-left 1.6s ease-in-out infinite alternate; }
    .robot-claw-right { transform-box: view-box; transform-origin: 166px 69px; animation: dce-claw-right 1.6s ease-in-out infinite alternate; }
    .robot-piece { animation: dce-piece 3.2s ease-in-out infinite alternate; }
    .robot-signal { stroke-dasharray: 5 6; animation: dce-dash 1.3s linear infinite; }
    .parcel { animation: dce-conveyor 3.6s linear infinite; }
    .parcel.p2 { animation-delay: -1.8s; }
    .bar { transform-box: fill-box; transform-origin: center bottom; animation: dce-bar 1.8s ease-in-out infinite alternate; }
    .bar.b2 { animation-delay: .35s; }
    .bar.b3 { animation-delay: .7s; }
    .net { stroke-dasharray: 4 7; animation: dce-dash 1.5s linear infinite; }
    .packet { animation: dce-packet 2s ease-in-out infinite alternate; }
    .packet.p2 { animation-delay: .55s; }
    .code { animation: dce-blink 1.2s steps(2, end) infinite; }

    .dce-nav {
      position: absolute;
      right: calc(var(--u) * 1);
      bottom: calc(var(--u) * .65);
      z-index: 20;
      display: flex;
      align-items: center;
      gap: calc(var(--u) * .3);
    }

    .dce-dot {
      position: relative;
      width: calc(var(--u) * 1.25);
      height: 4px;
      padding: 0;
      overflow: hidden;
      border: 0;
      border-radius: 9px;
      background: #dce3ea;
      cursor: pointer;
    }

    .dce-dot i {
      position: absolute;
      inset: 0;
      background: var(--dot);
      transform: scaleX(0);
      transform-origin: left;
    }

    .dce-dot.is-active i {
      animation: dce-progress 4.8s linear forwards;
    }

    .dce-dot:focus-visible {
      outline: 2px solid var(--active);
      outline-offset: 3px;
    }

    @keyframes dce-morph { to { border-radius: 42% 58% 61% 39% / 58% 42% 58% 42%; transform: rotate(7deg) scale(1.05); } }
    @keyframes dce-rotate { to { transform: rotate(360deg); } }
    @keyframes dce-bubble { 0% { opacity: 0; transform: translateY(10px) scale(.45); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-25px) scale(1.15); } }
    @keyframes dce-robot-shoulder { to { transform: rotate(-5deg); } }
    @keyframes dce-robot-elbow { to { transform: rotate(10deg); } }
    @keyframes dce-claw-left { to { transform: rotate(8deg); } }
    @keyframes dce-claw-right { to { transform: rotate(-8deg); } }
    @keyframes dce-piece { to { transform: translateY(-7px); } }
    @keyframes dce-conveyor { from { transform: translateX(-65px); } to { transform: translateX(210px); } }
    @keyframes dce-bar { to { transform: scaleY(.5); } }
    @keyframes dce-dash { to { stroke-dashoffset: -22; } }
    @keyframes dce-packet { to { transform: translate(26px, -15px); } }
    @keyframes dce-blink { 50% { opacity: .25; } }
    @keyframes dce-progress { to { transform: scaleX(1); } }

    .hero-button {
      color: #fff;
      text-decoration: none;
    }

    .announcement-chip {
      position: absolute;
      right: calc(var(--u) * 2);
      bottom: calc(var(--u) * 2);
      z-index: 3;
      display: flex;
      max-width: 35%;
      align-items: center;
      gap: calc(var(--u) * .75);
      padding: calc(var(--u) * .65) calc(var(--u) * .9);
      border: 1px solid rgba(255,255,255,.85);
      border-radius: calc(var(--u) * .7);
      background: rgba(255,255,255,.88);
      box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1.8) rgba(17,38,75,.12);
      color: var(--blue);
      backdrop-filter: blur(12px);
    }

    .announcement-chip[hidden] {
      display: none;
    }

    .announcement-chip b {
      flex: none;
      color: var(--orange);
      font-size: calc(var(--u) * .58);
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .announcement-chip span {
      overflow: hidden;
      font-size: calc(var(--u) * .62);
      font-weight: 650;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .events-empty {
      display: grid;
      min-height: 0;
      place-items: center;
      padding: 1rem;
      border-radius: calc(var(--u) * 1.2);
      background: var(--white);
      color: var(--muted);
      font-size: .8rem;
      text-align: center;
    }

    @media (max-width: 720px) {
      .hero-media {
        background-position: 62% center;
      }

      .hero-media::after {
        background:
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.88) 52%,
            rgba(255, 255, 255, 0.42) 75%,
            rgba(5, 18, 42, 0.14) 100%
          );
      }

      .announcement-chip {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        max-width: none;
        padding: .7rem .85rem;
      }

      .announcement-chip b,
      .announcement-chip span {
        font-size: .7rem;
      }

      .featured-carousel {
        top: 5.4rem;
        right: 1rem;
        min-width: 8.75rem;
        padding: .55rem .65rem;
      }

      .featured-carousel span,
      .featured-carousel strong {
        font-size: .68rem;
      }

      .programs.dce-careers {
        min-height: 14rem;
      }

      .dce-slide {
        grid-template-columns: 55% 45%;
        padding: 3rem .85rem 1.25rem;
      }

      .dce-copy h3 {
        font-size: clamp(1.4rem, 6vw, 2rem);
      }

      .dce-copy p {
        font-size: .72rem;
      }

      .dce-motto {
        display: none;
      }

      .dce-art {
        width: min(13rem, 98%);
        height: 7rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .dce-dot.is-active i {
        transform: scaleX(1);
      }
    }