/* ============================================================
   IMECA CUCOSTASUR - styles.css
   Paleta: negro tecnico, naranja industrial y blancos suaves
   Fuentes: Orbitron, Inter
   ============================================================ */

/* ============================================================
   1. VARIABLES
   ============================================================ */

:root {
       /* Fondos */
       --fondo1:          #15171A;
       --fondo2:          #20242A;
       --fondo3:          #2D333A;
       --fondo-card:      #252A31;
       --negro:           #0F1114;
       /* Aside noche: gris oscuro distinguible del contenido principal. */
       --aside-bg:        var(--fondo3);
       --aside-txt:       #FFFFFF;
       --aside-txt-soft:  rgba(255,255,255,0.76);
       --aside-surface:   rgba(255,255,255,0.08);
       --aside-borde:     rgba(255,255,255,0.14);
       --footer-bg:       #0D0D0D;
       --footer-txt:      #FFFFFF;
       --footer-txt-soft: rgba(255,255,255,0.76);
       --footer-surface:  rgba(255,255,255,0.08);
       --footer-borde:    rgba(255,255,255,0.12);
       --contact-section-bg: #343A42;

       /* Degradados */
       --degradado-hero:    linear-gradient(to bottom, rgba(17,17,17,0.3) 0%, rgba(17,17,17,0.7) 100%);
       --degradado-naranja: linear-gradient(135deg, #E8620A 0%, #C94010 100%);
       --degradado-oscuro:  linear-gradient(to bottom, rgba(21,23,26,0.96) 0%, #15171A 100%);
       --degradado-card:    linear-gradient(to bottom, rgba(15,17,20,0) 0%, rgba(15,17,20,0.56) 46%, rgba(15,17,20,0.92) 100%);

       /* Naranja */
       --naranja1:          #E8620A;
       --naranja2:          #FF7420;
       --naranja-opaco:     rgba(232,98,10,0.12);
       --naranja-borde:     rgba(232,98,10,0.35);
       --naranja-glow:      0 0 32px rgba(232,98,10,0.30);

       /* Textos */
       --gris1:             #888888;
       --gris2:             #CCCCCC;
       --gris-borde:        rgba(255,255,255,0.14);
       --blanco:            #FFFFFF;
       --blanco-op1:        rgba(255,255,255,0.88);
       --blanco-op2:        rgba(255,255,255,0.68);
       --blanco-op3:        rgba(255,255,255,0.10);

       /* Tipografia */
       --font-display:      'Orbitron', 'Segoe UI', Arial, sans-serif;
       --font-titles:       'Rajdhani', 'Segoe UI', Arial, sans-serif;
       --font-body:         'Inter', 'Segoe UI', Arial, sans-serif;

       /* Escala fluid */
       --fs-2xs:   clamp(0.60rem, 0.9vw,  0.70rem);
       --fs-xs:    clamp(0.68rem, 1.1vw,  0.78rem);
       --fs-sm:    clamp(0.78rem, 1.4vw,  0.90rem);
       --fs-base:  clamp(0.88rem, 1.7vw,  1.00rem);
       --fs-md:    clamp(1.00rem, 2.0vw,  1.10rem);
       --fs-lg:    clamp(1.10rem, 2.2vw,  1.30rem);
       --fs-xl:    clamp(1.30rem, 2.8vw,  1.65rem);
       --fs-2xl:   clamp(1.60rem, 3.2vw,  2.00rem);
       --fs-3xl:   clamp(2.00rem, 4.0vw,  2.60rem);
       --fs-hero:  clamp(2.60rem, 5.8vw,  4.80rem);
       --fs-stat:  clamp(2.80rem, 7.0vw,  5.00rem);

       /* Font weights */
       --fw-light:     300;
       --fw-regular:   400;
       --fw-medium:    500;
       --fw-semibold:  600;
       --fw-bold:      700;
       --fw-extrabold: 800;
       --fw-black:     900;

       /* Espaciado fluid */
       --gap-xs:   clamp(0.40rem, 0.8vw,  0.55rem);
       --gap-sm:   clamp(0.60rem, 1.2vw,  0.85rem);
       --gap-md:   clamp(0.90rem, 1.8vw,  1.30rem);
       --gap-lg:   clamp(1.40rem, 2.8vw,  2.00rem);
       --gap-xl:   clamp(2.20rem, 4.5vw,  3.20rem);
       --gap-2xl:  clamp(3.50rem, 7.0vw,  5.50rem);

       /* Layout */
       --max-width:       1280px;
       --px-section:      clamp(1.20rem, 5vw, 5.00rem);
       --ancho-principal: 945px;
       --ancho-aside:     498px;
       --header-height:   78px;
       --hero-height:     100vh;
       --stats-height:    9rem;
       --aside-offset:    calc(var(--hero-height) + var(--stats-height));

       /* Border radius */
       --radius-sm:   0.40rem;
       --radius-md:   0.50rem;
       --radius-lg:   0.50rem;
       --radius-card: 0.50rem;
       --radius-full: 9999px;

       /* Sombras */
       --shadow-sm:      0 2px  8px  rgba(0,0,0,0.30);
       --shadow-md:      0 4px  20px rgba(0,0,0,0.45);
       --shadow-lg:      0 8px  40px rgba(0,0,0,0.65);
       --shadow-naranja: 0 4px  28px rgba(232,98,10,0.45);

       /* Transiciones */
       --t-fast: 0.15s ease;
       --t-mid:  0.28s ease;
       --t-slow: 0.50s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   2. RESET Y BASE
   ============================================================ */

*,
*::before,
*::after {
       box-sizing:    border-box;
}

html {
       scroll-behavior: smooth;
       background:    var(--fondo1);
}

body {
       min-width:     320px;
       margin:        0;
       background:    var(--fondo1);
       color:         var(--blanco-op1);
       font-family:   var(--font-body);
       font-size:     var(--fs-base);
       line-height:   1.65;
       overflow-x:    hidden;
}

img {
       display:       block;
       max-width:     100%;
       height:        auto;
}

a {
       color:         inherit;
       text-decoration: none;
}

button,
input,
textarea {
       font:          inherit;
}

section {
       scroll-margin-top: var(--header-height);
}

/* ============================================================
   3. UTILIDADES
   ============================================================ */

.visually-hidden {
       position:     absolute;
       width:        1px;
       height:       1px;
       overflow:     hidden;
       clip:         rect(0 0 0 0);
       white-space:  nowrap;
}

.Em_Naranja {
       color:        var(--naranja2);
       font-style:   normal;
}

.D_ProgressBar {
       position:     fixed;
       top:          0;
       left:         0;
       width:        0%;
       height:       3px;
       background:   var(--degradado-naranja);
       box-shadow:   var(--shadow-naranja);
       z-index:      9999;
       transition:   width var(--t-fast);
}

.Span_Eyebrow {
       display:      inline-flex;
       align-items:  center;
       gap:          var(--gap-xs);
       color:        var(--naranja2);
       font-family:  var(--font-titles);
       font-size:    var(--fs-xs);
       font-weight:  var(--fw-bold);
       letter-spacing: 0;
       text-transform: uppercase;
}

.Span_Eyebrow::before {
       content:      '';
       width:        2rem;
       height:       2px;
       background:   var(--naranja1);
}

.D_SeccionHead {
       display:      flex;
       flex-direction: column;
       align-items:  flex-start;
       gap:          var(--gap-xs);
       width:        100%;
       max-width:    var(--ancho-principal);
       margin:       0 auto var(--gap-xl);
}

.H2_Seccion,
.H2_Acercade,
.H2_Mision,
.H2_Vision {
       margin:       0;
       color:        var(--blanco);
       font-family:  var(--font-titles);
       font-size:    var(--fs-3xl);
       font-weight:  var(--fw-extrabold);
       line-height:  1.12;
}

.A_BtnPrimario,
.A_BtnVerMas,
.Btn_Enviar {
       display:      inline-flex;
       align-items:  center;
       justify-content: center;
       gap:          var(--gap-xs);
       min-height:   2.85rem;
       padding:      0.75rem 1.35rem;
       background:   var(--degradado-naranja);
       color:        var(--blanco);
       font-family:  var(--font-titles);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-semibold);
       border:       1px solid var(--naranja-borde);
       border-radius: var(--radius-sm);
       box-shadow:   var(--shadow-sm);
       cursor:       pointer;
       transition:   background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

.A_BtnPrimario:hover,
.A_BtnVerMas:hover,
.Btn_Enviar:hover {
       transform:    translateY(-2px);
       box-shadow:   var(--shadow-naranja);
       border-color: var(--naranja2);
}

.A_BtnPrimario--outline {
       background:   rgba(17,17,17,0.55);
       border-color: var(--naranja-borde);
}

.A_BtnPrimario--full {
       width:        100%;
}

.Span_Badge {
       display:      inline-flex;
       align-items:  center;
       width:        fit-content;
       padding:      0.35rem 0.62rem;
       background:   var(--naranja-opaco);
       color:        var(--naranja2);
       font-family:  var(--font-titles);
       font-size:    var(--fs-2xs);
       font-weight:  var(--fw-bold);
       border:       1px solid var(--naranja-borde);
       border-radius: var(--radius-sm);
}

/* ============================================================
   4. HEADER Y NAV
   ============================================================ */

.Header {
       position:     fixed;
       top:          0;
       left:         0;
       right:        0;
       height:       var(--header-height);
       z-index:      1000;
       background:   rgba(17,17,17,0.96);
       border-bottom: 1px solid var(--naranja1);
       backdrop-filter: blur(18px);
       animation:    glowBorde 2.4s ease-in-out infinite;
       transition:   background var(--t-mid), border-color var(--t-mid), height var(--t-mid), box-shadow var(--t-mid);
}

.Header.is-scrolled {
       height:       68px;
       background:   rgba(17,17,17,0.98);
       border-color: var(--naranja1);
       box-shadow:   var(--shadow-md);
       backdrop-filter: blur(18px);
}

.Nav_Principal {
       position:     relative;
       display:      grid;
       grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
       align-items:  center;
       width:        100%;
       height:       100%;
       max-width:    none;
       margin:       0 auto;
       padding:      0 var(--px-section);
}

.Ul_NavLinks {
       display:      flex;
       align-items:  center;
       gap:          clamp(1.5rem, 2.35vw, 2.75rem);
       margin:       0;
       padding:      0;
       list-style:   none;
}

.Ul_NavLinks--izq {
       grid-column:  1;
       justify-content: flex-end;
       padding-right: clamp(8.75rem, 13vw, 12rem);
}

.Ul_NavLinks--der {
       grid-column:  2;
       justify-content: flex-start;
       padding-left:  clamp(8.75rem, 13vw, 12rem);
       padding-right: 3.25rem;
}

.A_Nav {
       display:      inline-flex;
       align-items:  center;
       min-height:   2.5rem;
       padding:      0.3rem 0.15rem;
       color:        var(--blanco-op2);
       font-family:  var(--font-titles);
       font-size:    clamp(0.92rem, 1.45vw, 1.05rem);
       font-weight:  var(--fw-bold);
       text-transform: none;
       letter-spacing: 0.08em;
       transition:   color var(--t-fast);
}

.A_Nav:hover,
.A_Nav.is-active {
       color:        var(--blanco);
}

.A_NavLogo {
       display:      inline-flex;
       align-items:  center;
       justify-content: center;
       position:     absolute;
       top:          50%;
       left:         50%;
       width:        7rem;
       flex:         0 0 auto;
       transform:    translate(-50%, -50%);
       z-index:      3;
}

.Img_NavLogo {
       width:        6.25rem;
       height:       auto;
}

.Btn_MenuBars {
       display:      none;
       align-items:  center;
       justify-content: center;
       width:        2.75rem;
       height:       2.75rem;
       background:   rgba(232,98,10,0.22);
       color:        var(--naranja2);
       border:       1px solid var(--naranja-borde);
       border-radius: var(--radius-sm);
       cursor:       pointer;
       transition:   background var(--t-fast), color var(--t-fast);
}

.Btn_MenuBars:hover {
       background:   var(--naranja1);
       color:        var(--blanco);
}

.Btn_Tema {
       display:      flex;
       align-items:  center;
       justify-content: center;
       position:     absolute;
       top:          50%;
       right:        var(--px-section);
       width:        2.4rem;
       height:       2.4rem;
       background:   var(--blanco-op3);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-full);
       color:        var(--gris2);
       font-size:    var(--fs-sm);
       cursor:       pointer;
       transform:    translateY(-50%);
       z-index:      4;
       transition:   background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.Btn_Tema:hover {
       background:   var(--naranja-opaco);
       border-color: var(--naranja-borde);
       color:        var(--naranja1);
}

.D_MenuMobile {
       display:      none;
       position:     fixed;
       top:          var(--header-height);
       left:         var(--gap-md);
       right:        var(--gap-md);
       padding:      var(--gap-md);
       background:   rgba(13,13,13,0.98);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-card);
       box-shadow:   var(--shadow-lg);
}

.D_MenuMobile.is-open {
       display:      grid;
       gap:          var(--gap-xs);
}

.A_MenuMobile {
       display:      flex;
       align-items:  center;
       min-height:   2.7rem;
       padding:      0 var(--gap-sm);
       color:        var(--blanco-op1);
       border-left:  2px solid var(--naranja-borde);
       background:   var(--blanco-op3);
       border-radius: var(--radius-sm);
}

/* ============================================================
   5. LAYOUT PRINCIPAL
   ============================================================ */

.D_Layout {
       display:      flex;
       flex-direction: row;
       align-items:  flex-start;
       min-height:   100vh;
       background:   var(--fondo1);
}

.Main_Contenido {
       flex:         1 1 0%;
       min-width:    0;
       background:   var(--fondo1);
}

.Aside_Principal {
       position:     sticky;
       top:          68px;
       align-self:   flex-start;
       width:        var(--ancho-aside);
       max-height:   calc(100vh - 68px);
       padding:      var(--gap-lg);
       overflow-y:   auto;
       background:   var(--aside-bg);
       border-left:  1px solid var(--aside-borde);
       z-index:      100;
       scrollbar-width: thin;
       scrollbar-color: var(--naranja1) var(--aside-bg);
       min-height:   100%;
}

/* ============================================================
   6. HERO
   ============================================================ */

.S_Hero {
       position:     relative;
       display:      flex;
       align-items:  center;
       justify-content: center;
       width:        100%;
       min-height:   100vh;
       padding:      var(--header-height) var(--px-section) var(--gap-xl);
       overflow:     hidden;
       background:   var(--fondo1) url("img/hero-taller.webp") center / cover no-repeat;
}

.S_Hero::before {
       content:      '';
       position:     absolute;
       inset:        0;
       background:   linear-gradient(to bottom, rgba(17,17,17,0.20) 0%, rgba(17,17,17,0.65) 100%);
       z-index:      1;
}

.S_Hero::after {
       content:      '';
       position:     absolute;
       inset:        auto 0 0;
       height:       35vh;
       background:   linear-gradient(to bottom, rgba(17,17,17,0) 0%, var(--fondo1) 100%);
       z-index:      1;
}

.D_HeroInner {
       position:     relative;
       display:      flex;
       flex-direction: column;
       align-items:  center;
       justify-content: center;
       width:        min(100%, 680px);
       gap:          var(--gap-sm);
       text-align:   center;
       z-index:      2;
}

.Img_LogoHero {
       width:        clamp(4.5rem, 9vw, 6.5rem);
       margin-bottom: var(--gap-xs);
       filter:       drop-shadow(0 12px 28px rgba(0,0,0,0.55));
}

.H1_Hero {
       margin:       0;
       color:        #FFFFFF;
       font-family:  var(--font-display);
       font-size:    var(--fs-hero);
       font-weight:  var(--fw-black);
       line-height:  1.08;
       text-shadow:  0 2px 12px rgba(0,0,0,0.7);
       text-wrap:    balance;
}

.P_HeroDesc {
       display:      flex;
       align-items:  center;
       justify-content: center;
       flex-wrap:    wrap;
       gap:          0.5ch;
       width:        min(100%, 34rem);
       margin:       0;
       color:        var(--blanco-op2);
       font-family:  var(--font-titles);
       font-size:    var(--fs-md);
       font-weight:  var(--fw-medium);
       letter-spacing: 0.02em;
       text-wrap:    balance;
       overflow-wrap: anywhere;
}

.Span_HeroSep {
       color:        var(--naranja1);
       font-weight:  var(--fw-bold);
       margin:       0 var(--gap-xs);
}

.Span_HeroCampus,
.Span_HeroUni {
       display:      inline-flex;
       align-items:  center;
}

.Span_HeroCampus::after {
       content:      '';
       margin-left:  0;
}

.D_HeroBotones {
       display:      flex;
       justify-content: center;
       flex-wrap:    wrap;
       gap:          var(--gap-sm);
       margin-top:   var(--gap-xs);
}

.A_HeroScroll {
       display:      inline-flex;
       align-items:  center;
       justify-content: center;
       width:        3rem;
       height:       3rem;
       margin-top:   var(--gap-md);
       color:        var(--naranja2);
       border:       1px solid var(--naranja-borde);
       border-radius: var(--radius-full);
       animation:    bounceDown 1.8s ease-in-out infinite;
}

/* ============================================================
   7. STATS
   ============================================================ */

.S_Stats {
       width:        100%;
       padding:      var(--gap-xl) var(--px-section);
       background:   #333333;
}

.D_StatsInner {
       display:      flex;
       flex-wrap:    wrap;
       justify-content: space-between;
       align-items:  stretch;
       gap:          var(--gap-lg);
       width:        100%;
       margin:       0 auto;
}

.D_StatItem {
       position:     relative;
       flex:         1 1 0;
       min-width:    9rem;
       display:      flex;
       flex-direction: column;
       align-items:  center;
       gap:          var(--gap-sm);
       min-height:   8rem;
       padding:      var(--gap-lg) var(--gap-xl);
       text-align:   center;
}

.D_StatItem:not(:last-child)::after {
       content:      '';
       position:     absolute;
       top:          28%;
       right:        0;
       width:        2px;
       height:       44%;
       background:   var(--naranja1);
}

.Span_StatNumero {
       color:        var(--naranja2);
       font-family:  var(--font-display);
       font-size:    var(--fs-stat);
       font-weight:  var(--fw-black);
       line-height:  1;
}

.P_StatLabel {
       margin:       0;
       color:        #B0B0B0;
       font-family:  var(--font-body);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-medium);
       text-transform: none;
       letter-spacing: 0.03em;
}

/* ============================================================
   8. ACERCA DE
   ============================================================ */

.S_Acercade {
       display:      grid;
       grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
       align-items:  center;
       gap:          var(--gap-xl);
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo1);
}

.D_AcercadeTexto {
       display:      flex;
       flex-direction: column;
       align-items:  flex-start;
       gap:          var(--gap-md);
}

.P_Acercade {
       margin:       0;
       color:        var(--blanco-op1);
       font-size:    var(--fs-md);
}

.D_AcercadeCards {
       display:      grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap:          var(--gap-sm);
       width:        100%;
       margin-top:   var(--gap-sm);
}

.D_AcercadeCard {
       display:      flex;
       flex-direction: column;
       align-items:  flex-start;
       justify-content: center;
       gap:          var(--gap-xs);
       min-height:   7rem;
       padding:      var(--gap-md);
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-left:  3px solid var(--naranja1);
       border-radius: var(--radius-card);
}

.D_AcercadeCard i {
       color:        var(--naranja2);
       font-size:    var(--fs-xl);
}

.Span_AcercadeCard {
       color:        var(--blanco);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-semibold);
}

.D_AcercadeImagen {
       position:     relative;
       overflow:     hidden;
       border-left:  3px solid var(--naranja1);
       border-radius: var(--radius-card);
       box-shadow:   var(--shadow-lg);
}

.Img_Acercade {
       width:        100%;
       height:       100%;
       min-height:   30rem;
       object-fit:   cover;
}

/* ============================================================
   9. EVENTOS RECIENTES
   ============================================================ */

.S_EventosRecientes {
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo2);
}

.D_EventosSwiper {
       width:        100%;
       padding-bottom: var(--gap-xl);
}

.D_EventoCard {
       height:       auto;
       overflow:     hidden;
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-card);
       box-shadow:   var(--shadow-sm);
}

.Img_Evento {
       width:        100%;
       aspect-ratio: 4 / 3;
       object-fit:   cover;
}

.D_EventoBody {
       display:      flex;
       flex-direction: column;
       align-items:  flex-start;
       gap:          var(--gap-sm);
       min-height:   12rem;
       padding:      var(--gap-md);
}

.H3_EventoTitulo {
       margin:       0;
       color:        var(--blanco);
       font-family:  var(--font-titles);
       font-size:    var(--fs-lg);
       line-height:  1.18;
}

.swiper-pagination-bullet {
       background:   var(--blanco-op2);
       opacity:      1;
}

.swiper-pagination-bullet-active {
       background:   var(--naranja2);
}

.swiper-button-prev,
.swiper-button-next {
       color:        var(--naranja1);
       transition:   color var(--t-fast);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
       color:        var(--naranja2);
}

.swiper-button-prev::after,
.swiper-button-next::after {
       font-size:    1.4rem;
       font-weight:  var(--fw-bold);
}

.D_CarruselWrap {
       position:     relative;
       display:      block;
       width:        100%;
       max-width:    var(--ancho-principal);
       margin:       0 auto;
}

.D_CarruselWrap .swiper {
       width:        100%;
       min-width:    0;
}

.D_CarruselWrap .swiper-button-prev,
.D_CarruselWrap .swiper-button-next {
       position:     absolute;
       top:          50%;
       width:        2.75rem;
       height:       2.75rem;
       margin:       0;
       transform:    translateY(-50%);
       z-index:      5;
}

.D_CarruselWrap .swiper-button-prev {
       left:         calc(-2.75rem - var(--gap-md));
       right:        auto;
}

.D_CarruselWrap .swiper-button-next {
       right:        calc(-2.75rem - var(--gap-md));
       left:         auto;
}

/* ============================================================
   10. AREAS
   ============================================================ */

.S_Areas {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-lg);
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo1);
}

.D_AreaItem {
       display:      grid;
       grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
       align-items:  center;
       gap:          var(--gap-lg);
       padding:      var(--gap-md);
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-card);
}

.D_AreaItem--invertido .D_AreaTexto {
       order:        2;
}

.D_AreaItem--invertido .Video_Area {
       order:        1;
}

.D_AreaTexto {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-sm);
       padding:      var(--gap-md);
}

.H3_AreaNombre {
       display:      flex;
       align-items:  center;
       gap:          var(--gap-sm);
       margin:       0;
       color:        var(--naranja2);
       font-family:  var(--font-titles);
       font-size:    var(--fs-xl);
       line-height:  1.18;
}

.P_AreaDesc {
       margin:       0;
       color:        var(--blanco-op1);
}

.Video_Area {
       display:      block;
       width:        100%;
       aspect-ratio: 16 / 10;
       object-fit:   cover;
       background:   var(--negro);
       border-radius: var(--radius-sm);
}

/* ============================================================
   11. MATERIAS
   ============================================================ */

.S_Materias {
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo2);
}

.D_MateriasSwiper {
       width:        100%;
       padding-bottom: var(--gap-xl);
}

.D_MateriaCard {
       position:     relative;
       min-height:   28rem;
       overflow:     hidden;
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-card);
       box-shadow:   var(--shadow-sm);
}

.Img_Materia {
       width:        100%;
       height:       100%;
       object-fit:   cover;
}

.D_MateriaOverlay {
       position:     absolute;
       inset:        0;
       display:      flex;
       flex-direction: column;
       justify-content: flex-end;
       align-items:  flex-start;
       gap:          var(--gap-sm);
       padding:      var(--gap-md);
       background:   var(--degradado-card);
}

.H3_MateriaNombre {
       margin:       0;
       color:        var(--blanco);
       font-family:  var(--font-titles);
       font-size:    var(--fs-xl);
       line-height:  1.15;
}

/* ============================================================
   12. MISION Y VISION
   ============================================================ */

.S_MisionVision {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-lg);
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo1);
}

.D_MisionWrap,
.D_VisionWrap {
       position:     relative;
       display:      flex;
       flex-direction: column;
       justify-content: center;
       gap:          var(--gap-md);
       width:        100%;
       min-height:   20rem;
       padding:      var(--gap-xl) clamp(2rem, 6vw, 5rem);
       overflow:     hidden;
       border:       1px solid rgba(255,255,255,0.12);
       border-radius: 0;
       box-shadow:   var(--shadow-lg);
       clip-path:    polygon(0 0, calc(100% - 3.5rem) 0, 100% 3.5rem, 100% 100%, 3.5rem 100%, 0 calc(100% - 3.5rem));
       isolation:    isolate;
}

.D_MisionWrap::before,
.D_VisionWrap::before {
       content:      '';
       position:     absolute;
       inset:        0 auto 0 0;
       width:        0.55rem;
       background:   var(--naranja2);
       z-index:      -1;
}

.D_MisionWrap::after,
.D_VisionWrap::after {
       position:     absolute;
       right:        clamp(1rem, 4vw, 3rem);
       bottom:       -0.35em;
       color:        rgba(255,255,255,0.10);
       font-family:  var(--font-display);
       font-size:    clamp(7rem, 18vw, 14rem);
       font-weight:  var(--fw-black);
       line-height:  1;
       pointer-events: none;
       z-index:      -1;
}

.D_MisionWrap {
       background:   linear-gradient(135deg, #E8620A 0%, #C94010 56%, #111111 100%);
}

.D_MisionWrap::after {
       content:      '01';
}

.D_VisionWrap {
       background:   linear-gradient(135deg, #111111 0%, #2A2A2A 58%, #E8620A 140%);
       clip-path:    polygon(3.5rem 0, 100% 0, 100% calc(100% - 3.5rem), calc(100% - 3.5rem) 100%, 0 100%, 0 3.5rem);
}

.D_VisionWrap::before {
       inset:        0 0 0 auto;
}

.D_VisionWrap::after {
       content:      '02';
       left:         clamp(1rem, 4vw, 3rem);
       right:        auto;
}

.P_Mision,
.P_Vision {
       margin:       0;
       max-width:    58rem;
       color:        rgba(255,255,255,0.88);
       font-size:    var(--fs-lg);
       line-height:  1.65;
       text-wrap:    balance;
}

/* ============================================================
   13. PERFIL INGRESO
   ============================================================ */

.S_PerfilIngreso {
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo2);
}

.D_PerfilIngresoGrid {
       display:      grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap:          var(--gap-md);
}

.D_PerfilIngresoCard {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-sm);
       min-height:   13rem;
       padding:      var(--gap-md);
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-left:  3px solid var(--naranja1);
       border-radius: var(--radius-card);
       transition:   transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}

.D_PerfilIngresoCard:hover {
       transform:    translateY(-4px);
       border-color: var(--naranja-borde);
       box-shadow:   var(--shadow-md);
}

.D_PerfilIngresoCard i {
       color:        var(--naranja2);
       font-size:    var(--fs-xl);
}

.H3_PerfilIngreso {
       margin:       0;
       color:        var(--blanco);
       font-family:  var(--font-titles);
       font-size:    var(--fs-md);
       line-height:  1.2;
}

.P_PerfilIngreso {
       margin:       0;
       color:        var(--blanco-op2);
       font-size:    var(--fs-sm);
}

/* ============================================================
   14. PERFIL EGRESO
   ============================================================ */

.S_PerfilEgreso {
       display:      flex;
       flex-direction: column;
       align-items:  center;
       gap:          var(--gap-md);
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo1);
       text-align:   center;
}

.S_PerfilEgreso .Span_Eyebrow {
       justify-content: center;
}

.S_PerfilEgreso .Span_Eyebrow::before {
       display:      none;
}

.P_PerfilEgreso {
       width:        min(100%, 700px);
       margin:       0;
       color:        var(--blanco-op1);
       font-size:    var(--fs-md);
}

/* ============================================================
   15. PROFESORES
   ============================================================ */

.S_Profesores {
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo2);
}

.D_ProfesoresSwiper {
       width:        100%;
       padding-bottom: var(--gap-xl);
}

.D_ProfesorCard {
       display:      flex;
       flex-direction: column;
       align-items:  center;
       gap:          var(--gap-sm);
       height:       auto;
       min-height:   26rem;
       padding:      var(--gap-lg);
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-card);
       text-align:   center;
}

.Img_ProfesorFoto {
       width:        9rem;
       height:       9rem;
       object-fit:   cover;
       border:       3px solid var(--naranja1);
       border-radius: var(--radius-full);
       box-shadow:   var(--naranja-glow);
}

.H3_ProfesorNombre {
       margin:       var(--gap-sm) 0 0;
       color:        var(--blanco);
       font-family:  var(--font-titles);
       font-size:    var(--fs-lg);
       line-height:  1.2;
}

.P_ProfesorCargo,
.P_ProfesorMaterias {
       margin:       0;
       color:        var(--blanco-op2);
       font-size:    var(--fs-sm);
}

.P_ProfesorCargo {
       color:        var(--naranja2);
       font-weight:  var(--fw-semibold);
}

/* ============================================================
   16. MALLA CURRICULAR
   ============================================================ */

.S_MallaCurricular {
       width:        100%;
       padding:      var(--gap-xl) var(--px-section);
       background:   #111111;
}

.D_MallaHead {
       width:        min(100%, 38rem);
       margin:       0 auto var(--gap-sm);
       text-align:   center;
}

.H2_MallaPrincipal {
       margin:       0;
       color:        #FFFFFF;
       font-family:  var(--font-titles);
       font-size:    clamp(1.75rem, 4vw, 2.35rem);
       font-weight:  var(--fw-black);
       line-height:  1.05;
}

.D_MallaCiclo {
       width:        min(100%, 38rem);
       margin:       0 auto;
}

.D_MallaCiclo + .D_MallaCiclo {
       margin-top:   var(--gap-lg);
}

.H3_MallaCiclo {
       margin:       0 0 var(--gap-sm);
       color:        #FFFFFF;
       font-family:  var(--font-titles);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-black);
       text-align:   center;
}

.D_MallaGrid {
       display:      grid;
       grid-template-columns: repeat(6, minmax(0, 1fr));
       gap:          1rem 1.35rem;
       padding:      var(--gap-sm);
       background:   rgba(255,255,255,0.08);
       border:       1px solid rgba(255,255,255,0.12);
       border-radius: var(--radius-md);
}

.D_MallaMateria {
       display:      flex;
       flex-direction: column;
       justify-content: space-between;
       grid-column:  span 2;
       min-height:   9.25rem;
       padding:      0.55rem 0.65rem;
       overflow:     hidden;
       color:        #FFFFFF;
       background:   #151515;
       border:       1px solid rgba(0,0,0,0.10);
       border-radius: 0.22rem;
       box-shadow:   0 1px 4px rgba(0,0,0,0.16);
}

.D_MallaMateria--centro {
       grid-column:  2 / span 2;
}

.D_MallaMateria--centro + .D_MallaMateria--gris {
       grid-column:  4 / span 2;
}

.D_MallaMateria--clara {
       color:        #222222;
       background:   #FFFFFF;
       border-color: rgba(0,0,0,0.18);
}

.D_MallaMateria--oscura {
       background:   #151515;
}

.D_MallaMateria--naranja {
       background:   #E8620A;
}

.D_MallaMateria--gris {
       background:   #8A8A8A;
}

.D_MallaMeta,
.D_MallaDatos {
       display:      flex;
       justify-content: space-between;
       gap:          0.4rem;
       font-family:  var(--font-display);
       font-size:    clamp(0.58rem, 1.25vw, 0.72rem);
       font-weight:  var(--fw-bold);
       line-height:  1;
       opacity:      0.88;
}

.H4_MallaMateria {
       margin:       0.45rem 0;
       font-family:  var(--font-titles);
       font-size:    clamp(0.82rem, 1.8vw, 1.02rem);
       font-weight:  var(--fw-semibold);
       line-height:  1.12;
       text-align:   center;
       text-wrap:    balance;
}

.D_MallaAccion {
       display:      flex;
       justify-content: center;
       margin-top:   var(--gap-lg);
}

.A_MallaVerMas {
       color:        #FFFFFF;
       font-family:  var(--font-titles);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-black);
       transition:   color var(--t-fast);
}

.A_MallaVerMas:hover {
       color:        var(--naranja1);
}

/* ============================================================
   17. CONTACTO
   ============================================================ */

.S_Contacto {
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--contact-section-bg);
}

.S_Contacto .Span_Eyebrow,
.S_Contacto .H2_Seccion,
.S_Contacto .F_Label,
.S_Contacto .P_ContactoInfo {
       color:        #FFFFFF;
}

.S_Contacto .D_ContactoItem {
       color:        #FFFFFF;
       background:   rgba(17,17,17,0.34);
       border-color: rgba(255,255,255,0.14);
}

.D_ContactoGrid {
       display:      grid;
       grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
       gap:          var(--gap-xl);
}

.F_Contacto {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-sm);
}

.F_Label {
       color:        var(--blanco);
       font-size:    var(--fs-xs);
       font-weight:  var(--fw-semibold);
       text-transform: uppercase;
       letter-spacing: 0;
}

.F_Input,
.F_Textarea {
       width:        100%;
       padding:      0.9rem 1rem;
       background:   var(--fondo-card);
       color:        var(--blanco);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-sm);
       outline:      none;
       transition:   border-color var(--t-fast), box-shadow var(--t-fast);
}

.F_Input:focus,
.F_Textarea:focus {
       border-color: var(--naranja1);
       box-shadow:   var(--naranja-glow);
}

.F_Textarea {
       resize:       vertical;
       min-height:   10rem;
}

.Btn_Enviar:disabled {
       cursor:       wait;
       opacity:      0.65;
}

.P_FormEstado {
       min-height:   1.5rem;
       margin:       0;
       color:        var(--naranja2);
       font-size:    var(--fs-sm);
}

.D_ContactoInfo {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-md);
}

.D_ContactoItem {
       display:      grid;
       grid-template-columns: 2.4rem minmax(0, 1fr);
       align-items:  start;
       gap:          var(--gap-sm);
       padding:      var(--gap-md);
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-card);
}

.D_ContactoItem i {
       display:      inline-flex;
       align-items:  center;
       justify-content: center;
       width:        2.4rem;
       height:       2.4rem;
       color:        var(--naranja2);
       background:   var(--naranja-opaco);
       border-radius: var(--radius-sm);
}

.P_ContactoInfo {
       margin:       0;
       color:        var(--blanco-op1);
}

.D_Mapa {
       position:     relative;
       min-height:   18rem;
       overflow:     hidden;
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-card);
}

.Iframe_Mapa {
       display:      block;
       width:        100%;
       min-height:   18rem;
       border:       0;
}

.A_MapaExpandir {
       position:     absolute;
       right:        var(--gap-sm);
       bottom:       var(--gap-sm);
       display:      inline-flex;
       align-items:  center;
       gap:          var(--gap-xs);
       padding:      0.55rem 0.75rem;
       color:        #FFFFFF;
       font-family:  var(--font-titles);
       font-weight:  var(--fw-bold);
       font-size:    var(--fs-xs);
       background:   rgba(17,17,17,0.86);
       border:       1px solid rgba(255,255,255,0.18);
       border-radius: var(--radius-sm);
       box-shadow:   var(--shadow-sm);
       transition:   background var(--t-fast), color var(--t-fast), transform var(--t-fast);
       z-index:      2;
}

.A_MapaExpandir:hover {
       color:        var(--naranja2);
       background:   rgba(17,17,17,0.96);
       transform:    translateY(-1px);
}

/* ============================================================
   18. ASIDE
   ============================================================ */

.D_AsideSeccion {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-sm);
       margin-bottom: var(--gap-lg);
       padding-bottom: var(--gap-lg);
       border-bottom: 1px solid var(--aside-borde);
}

.H3_AsideTitulo {
       display:      flex;
       align-items:  center;
       gap:          var(--gap-xs);
       margin:       0;
       color:        var(--aside-txt);
       font-family:  var(--font-titles);
       font-size:    var(--fs-md);
       line-height:  1.22;
}

.H3_AsideTitulo i {
       color:        var(--naranja2);
}

.Ul_AsideEventos,
.Ul_AsideConvocatorias,
.Ul_AsideDuracion,
.Ul_AsideCampo,
.Ul_AsideObjetivos {
       display:      flex;
       flex-direction: column;
       gap:          var(--gap-xs);
       margin:       0;
       padding:      0;
       list-style:   none;
}

.Ul_AsideObjetivos {
       counter-reset: objetivo;
}

.D_AsideEventoItem,
.D_AsideConvItem,
.D_AsideDurItem {
       display:      grid;
       grid-template-columns: 3rem minmax(0, 1fr);
       align-items:  center;
       gap:          var(--gap-sm);
       min-height:   3rem;
       padding:      0.55rem;
       background:   var(--aside-surface);
       border:       1px solid var(--aside-borde);
       border-radius: var(--radius-sm);
}

.Span_AsideFecha,
.Span_AsideNum,
.Span_AsideDurNum {
       display:      inline-flex;
       align-items:  center;
       justify-content: center;
       min-width:    2.35rem;
       min-height:   2.35rem;
       padding:      0 0.45rem;
       color:        var(--blanco);
       font-family:  var(--font-display);
       font-size:    var(--fs-xs);
       font-weight:  var(--fw-bold);
       background:   var(--naranja1);
       border-radius: var(--radius-sm);
}

.P_AsideEvento,
.P_AsideConv,
.P_AsideDurLabel {
       margin:       0;
       color:        var(--aside-txt-soft);
       font-size:    var(--fs-sm);
       line-height:  1.35;
       min-width:    0;
}

.D_AsideObjetivoItem {
       counter-increment: objetivo;
       position:     relative;
       padding:      0.65rem 0.65rem 0.65rem 2.3rem;
       color:        var(--aside-txt-soft);
       background:   var(--aside-surface);
       border-radius: var(--radius-sm);
       font-size:    var(--fs-sm);
}

.D_AsideObjetivoItem::before {
       content:      counter(objetivo);
       position:     absolute;
       left:         0.55rem;
       top:          50%;
       transform:    translateY(-50%);
       color:        var(--naranja2);
       font-family:  var(--font-display);
       font-weight:  var(--fw-bold);
}

.D_AsideCampoItem {
       display:      flex;
       align-items:  center;
       gap:          var(--gap-xs);
       color:        var(--aside-txt-soft);
       font-size:    var(--fs-sm);
}

.D_AsideCampoItem i {
       color:        var(--naranja2);
       font-size:    var(--fs-2xs);
}

.A_AsideLink {
       display:      inline-flex;
       align-items:  center;
       gap:          var(--gap-xs);
       color:        var(--naranja2);
       font-weight:  var(--fw-semibold);
       transition:   color var(--t-fast);
}

.A_AsideLink:hover {
       color:        var(--aside-txt);
}

.S_AsideMobile {
       display:      none;
       width:        100%;
       padding:      var(--gap-2xl) var(--px-section);
       background:   var(--fondo1);
}

.D_AsideMobileGrid {
       display:      grid;
       gap:          var(--gap-sm);
}

.D_AsideAcordeon {
       padding:      var(--gap-md);
       background:   var(--fondo-card);
       border:       1px solid var(--gris-borde);
       border-radius: var(--radius-card);
}

.D_AsideAcordeon summary {
       color:        var(--blanco);
       font-family:  var(--font-titles);
       font-weight:  var(--fw-bold);
       cursor:       pointer;
}

.D_AsideAcordeon p {
       margin:       var(--gap-sm) 0 0;
       color:        var(--blanco-op2);
}

/* ============================================================
   19. FOOTER
   ============================================================ */

.Footer {
       width:        100%;
       color:        var(--footer-txt);
       background:   var(--footer-bg);
       border-top:   1px solid var(--footer-borde);
}

.D_FooterInner {
       display:      flex;
       flex-direction: column;
       align-items:  center;
       gap:          var(--gap-lg);
       width:        min(100%, var(--ancho-principal));
       margin:       0 auto;
       padding:      var(--gap-2xl) var(--px-section);
       text-align:   center;
}

.Img_FooterLogo {
       width:        9.5rem;
}

.D_FooterNav {
       display:      flex;
       flex-wrap:    wrap;
       justify-content: center;
       gap:          var(--gap-sm) var(--gap-md);
}

.A_FooterLink {
       color:        var(--footer-txt-soft);
       font-size:    var(--fs-sm);
       font-weight:  var(--fw-semibold);
       transition:   color var(--t-fast);
}

.A_FooterLink:hover {
       color:        var(--naranja2);
}

.D_FooterSocial {
       display:      flex;
       justify-content: center;
       gap:          var(--gap-sm);
}

.A_FooterSocial {
       display:      inline-flex;
       align-items:  center;
       justify-content: center;
       width:        2.75rem;
       height:       2.75rem;
       color:        var(--footer-txt);
       background:   var(--footer-surface);
       border:       1px solid var(--footer-borde);
       border-radius: var(--radius-sm);
       transition:   transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.A_FooterSocial:hover {
       transform:    translateY(-2px);
       color:        #FFFFFF;
       background:   var(--naranja1);
       border-color: var(--naranja1);
}

.Hr_Separador {
       width:        100%;
       height:       1px;
       margin:       0;
       background:   var(--footer-borde);
       border:       0;
}

.P_FooterCopy {
       margin:       0;
       color:        var(--footer-txt-soft);
       font-size:    var(--fs-xs);
}

/* ============================================================
   20. ANIMACIONES
   ============================================================ */

@keyframes bounceDown {
       0%,
       100% {
              transform: translateY(0);
       }

       50% {
              transform: translateY(8px);
       }
}

@keyframes audioPulse {
       0%,
       100% {
              box-shadow: 0 0 0 0 rgba(232,98,10,0.42);
       }

       50% {
              box-shadow: 0 0 0 18px rgba(232,98,10,0);
       }
}

@keyframes glowBorde {
       0%, 100% {
              border-bottom-color: var(--naranja1);
              box-shadow: 0 1px 0 rgba(232,98,10,0.25);
       }

       50% {
              border-bottom-color: var(--naranja2);
              box-shadow: 0 1px 16px rgba(232,98,10,0.75);
       }
}

.anim-abajo {
       opacity:      1;
       transform:    none;
}

.anim-derecha {
       opacity:      1;
       transform:    none;
}

.anim-izquierda {
       opacity:      1;
       transform:    none;
}

.js-anim .anim-abajo {
       opacity:      0;
       transform:    translateY(32px);
}

.js-anim .anim-derecha {
       opacity:      0;
       transform:    translateX(40px);
}

.js-anim .anim-izquierda {
       opacity:      0;
       transform:    translateX(-40px);
}

.js-anim .anim-visible {
       opacity:      1;
       transform:    translate(0);
       transition:   opacity 0.55s ease, transform 0.55s ease;
}

.anim-delay-1.anim-visible {
       transition-delay: 0.12s;
}

.anim-delay-2.anim-visible {
       transition-delay: 0.24s;
}

.anim-delay-3.anim-visible {
       transition-delay: 0.36s;
}

.anim-delay-4.anim-visible {
       transition-delay: 0.48s;
}

.anim-delay-5.anim-visible {
       transition-delay: 0.60s;
}

/* ============================================================
   MODO NOCHE - superficies del contenido principal
   ============================================================ */

[data-tema="noche"] .S_Acercade,
[data-tema="noche"] .S_Areas,
[data-tema="noche"] .S_MisionVision,
[data-tema="noche"] .S_PerfilEgreso {
       background:   linear-gradient(180deg, #15171A 0%, #1B1F24 100%);
}

[data-tema="noche"] .S_EventosRecientes,
[data-tema="noche"] .S_Materias,
[data-tema="noche"] .S_PerfilIngreso,
[data-tema="noche"] .S_Profesores {
       background:   linear-gradient(180deg, #20242A 0%, #252A31 100%);
}

[data-tema="noche"] .S_Contacto {
       background:   linear-gradient(180deg, #3A414A 0%, #343A42 100%);
}

[data-tema="noche"] .S_MallaCurricular {
       background:   linear-gradient(180deg, #171A1E 0%, #22272D 100%);
}

[data-tema="noche"] .D_AcercadeCard,
[data-tema="noche"] .D_EventoCard,
[data-tema="noche"] .D_AreaItem,
[data-tema="noche"] .D_MateriaCard,
[data-tema="noche"] .D_PerfilIngresoCard,
[data-tema="noche"] .D_ProfesorCard,
[data-tema="noche"] .S_Contacto .D_ContactoItem,
[data-tema="noche"] .F_Input,
[data-tema="noche"] .F_Textarea {
       background:   linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.035) 100%), var(--fondo-card);
       border-color: rgba(255,255,255,0.16);
       box-shadow:   0 10px 28px rgba(0,0,0,0.28);
}

[data-tema="noche"] .D_Mapa {
       background:   linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), var(--fondo3);
       border-color: rgba(255,255,255,0.16);
}

[data-tema="noche"] .D_MallaGrid {
       background:   rgba(255,255,255,0.12);
       border-color: rgba(255,255,255,0.18);
       box-shadow:   inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 30px rgba(0,0,0,0.28);
}

[data-tema="noche"] .D_MallaMateria--oscura {
       background:   #22262C;
       border-color: rgba(255,255,255,0.10);
}

[data-tema="noche"] .D_MallaMateria--gris {
       background:   #A0A0A0;
}

[data-tema="noche"] .D_MisionWrap {
       background:   linear-gradient(135deg, #E8620A 0%, #C94A14 54%, #24282E 100%);
}

[data-tema="noche"] .D_VisionWrap {
       background:   linear-gradient(135deg, #20242A 0%, #343A42 64%, rgba(232,98,10,0.42) 140%);
}

/* ============================================================
   MODO DIA - se activa con [data-tema="dia"] en <html>
   ============================================================ */

[data-tema="dia"] {
       --fondo1:          #F5F5F5;
       --fondo2:          #EBEBEB;
       --fondo3:          #E0E0E0;
       --fondo-card:      #FFFFFF;
       /* Aside invertido: en DIA va oscuro */
       --aside-bg:        #0D0D0D;
       --aside-txt:       #FFFFFF;
       --aside-txt-soft:  rgba(255,255,255,0.70);
       --aside-surface:   rgba(255,255,255,0.06);
       --aside-borde:     rgba(255,255,255,0.08);
       --footer-bg:       #FFFFFF;
       --footer-txt:      #111111;
       --footer-txt-soft: rgba(17,17,17,0.70);
       --footer-surface:  rgba(0,0,0,0.05);
       --footer-borde:    rgba(0,0,0,0.10);
       --contact-section-bg: #E4E8EC;
       --gris-borde:      rgba(0,0,0,0.10);
       --blanco:          #111111;
       --blanco-op1:      rgba(17,17,17,0.88);
       --blanco-op2:      rgba(17,17,17,0.55);
       --blanco-op3:      rgba(17,17,17,0.06);
       --gris1:           #555555;
       --gris2:           #333333;
       --shadow-sm:       0 2px  8px  rgba(0,0,0,0.10);
       --shadow-md:       0 4px  20px rgba(0,0,0,0.15);
       --shadow-lg:       0 8px  40px rgba(0,0,0,0.20);
}

[data-tema="dia"] .Header {
       background:   rgba(13,13,13,0.96);
       border-bottom: 1px solid var(--naranja1);
       backdrop-filter: blur(18px);
       animation:    glowBorde 2.4s ease-in-out infinite;
}

[data-tema="dia"] .Header.is-scrolled {
       background:   rgba(13,13,13,1);
       box-shadow:   0 2px 20px rgba(0,0,0,0.40);
}

[data-tema="dia"] .Btn_Tema {
       background:   rgba(255,255,255,0.10);
       border-color: rgba(255,255,255,0.28);
       color:        rgba(255,255,255,0.85);
}

[data-tema="dia"] .A_Nav {
       color:        rgba(255,255,255,0.85);
}

[data-tema="dia"] .A_Nav:hover,
[data-tema="dia"] .A_Nav.is-active {
       color:        var(--naranja1);
}

[data-tema="dia"] .S_Hero {
       background:   #F5F5F5 url("img/hero-taller.webp") center / cover no-repeat;
}

[data-tema="dia"] .S_Hero::before {
       background:   linear-gradient(to bottom, rgba(17,17,17,0.15) 0%, rgba(17,17,17,0.55) 100%);
}

[data-tema="dia"] .S_Hero::after {
       height:     22vh;
       background: linear-gradient(to bottom, rgba(17,17,17,0) 0%, rgba(17,17,17,0.65) 100%);
}

[data-tema="dia"] .H1_Hero {
       color:        #FFFFFF;
       text-shadow:  0 2px 12px rgba(0,0,0,0.7);
}

[data-tema="dia"] .P_HeroDesc {
       color:        #333333;
}

[data-tema="dia"] .S_Contacto .Span_Eyebrow,
[data-tema="dia"] .S_Contacto .H2_Seccion,
[data-tema="dia"] .S_Contacto .F_Label,
[data-tema="dia"] .S_Contacto .P_ContactoInfo {
       color:        #111111;
}

[data-tema="dia"] .S_Contacto .D_ContactoItem {
       color:        #111111;
       background:   #FFFFFF;
       border-color: rgba(0,0,0,0.08);
}

[data-tema="dia"] .S_MallaCurricular {
       background:   #FFFFFF;
}

[data-tema="dia"] .H2_MallaPrincipal,
[data-tema="dia"] .H3_MallaCiclo,
[data-tema="dia"] .A_MallaVerMas {
       color:        #111111;
}

[data-tema="dia"] .D_MallaGrid {
       background:   #FFFFFF;
       border-color: transparent;
       box-shadow:   0 8px 24px rgba(0,0,0,0.06);
}

[data-tema="dia"] .D_MisionWrap {
       background:   #E8620A;
}

[data-tema="dia"] .D_VisionWrap {
       background:   #FFFFFF;
       border-color: rgba(0,0,0,0.10);
}

[data-tema="dia"] .D_VisionWrap::after {
       color:        rgba(17,17,17,0.08);
}

[data-tema="dia"] .D_VisionWrap .H2_Vision {
       color:        #111111;
}

[data-tema="dia"] .D_VisionWrap .P_Vision {
       color:        rgba(17,17,17,0.78);
}

/* ============================================================
   21. MEDIA QUERIES
   ============================================================ */

@media only screen and (max-width: 1200px) {
       .Ul_NavLinks {
              gap: clamp(1rem, 1.6vw, 1.35rem);
       }

       .A_Nav {
              font-size: clamp(0.82rem, 1.25vw, 0.95rem);
              letter-spacing: 0.07em;
       }

       .Ul_NavLinks--izq {
              padding-right: clamp(7rem, 9vw, 8.25rem);
       }

       .Ul_NavLinks--der {
              padding-left: clamp(7rem, 9vw, 8.25rem);
       }
}

@media only screen and (max-width: 1024px) {
       .Header {
              right: 0;
       }

       .D_Layout {
              padding-right: 0;
       }

       .Main_Contenido {
              width: 100%;
       }

       .Aside_Principal {
              display: none;
       }

       .Footer {
              width: 100%;
       }

       .S_AsideMobile {
              display: block;
       }

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

@media only screen and (max-width: 900px) {
       .Ul_NavLinks {
              display: none;
       }

       .Nav_Principal {
              display: flex;
              justify-content: center;
       }

       .Btn_MenuBars {
              display: inline-flex;
              position: absolute;
              top: 50%;
              right: calc(var(--px-section) + 3rem);
              background: var(--naranja1);
              color: var(--blanco);
              box-shadow: var(--shadow-sm);
              transform: translateY(-50%);
              z-index: 4;
       }

       .A_NavLogo {
              width: 7rem;
       }

       .S_Acercade,
       .D_ContactoGrid {
              grid-template-columns: 1fr;
       }

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

@media only screen and (max-width: 768px) {
       .S_Hero {
              min-height: 92vh;
       }

       .D_StatsInner {
              justify-content: center;
       }

       .D_StatItem:nth-child(2)::after {
              display: none;
       }

       .D_AreaItem,
       .D_AreaItem--invertido {
              grid-template-columns: 1fr;
       }

       .D_AreaItem--invertido .D_AreaTexto,
       .D_AreaItem--invertido .Video_Area {
              order: initial;
       }

       .D_MisionWrap,
       .D_VisionWrap {
              min-height: 17rem;
              clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
       }

       .D_VisionWrap {
              clip-path: polygon(2rem 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%, 0 2rem);
       }
}

@media only screen and (max-width: 640px) {
       :root {
              --header-height: 68px;
       }

       .Nav_Principal {
              padding: 0 var(--gap-md);
       }

       .D_AcercadeCards,
       .D_PerfilIngresoGrid {
              grid-template-columns: 1fr;
       }

       .D_StatsInner {
              justify-content: center;
       }

       .D_StatItem {
              min-height: 7rem;
       }

       .D_StatItem::after {
              display: none;
       }

       .D_EventoBody {
              min-height: 10rem;
       }

       .D_MateriaCard {
              min-height: 24rem;
       }

       .P_HeroDesc {
              flex-direction: column;
              gap: 0.15rem;
              width: min(100%, 18rem);
              font-size: var(--fs-base);
              line-height: 1.35;
       }

       .Span_HeroCampus::after {
              content: '';
              margin-left: 0;
       }
}

@media only screen and (max-width: 480px) {
       .S_Hero,
       .S_Stats,
       .S_Acercade,
       .S_EventosRecientes,
       .S_Areas,
       .S_Materias,
       .S_MisionVision,
       .S_PerfilIngreso,
       .S_PerfilEgreso,
       .S_Profesores,
       .S_MallaCurricular,
       .S_Contacto,
       .S_AsideMobile {
              padding-left: var(--gap-md);
              padding-right: var(--gap-md);
       }

       .H1_Hero {
              font-size: clamp(2.25rem, 16vw, 3.2rem);
       }

       .P_HeroDesc {
              flex-direction: column;
              gap: 0.15rem;
              width: min(100%, 18rem);
              font-size: var(--fs-base);
              line-height: 1.35;
       }

       .Span_HeroCampus::after {
              content: '';
              margin-left: 0;
       }

       .D_HeroBotones,
       .A_BtnPrimario {
              width: 100%;
       }

       .A_BtnPrimario,
       .A_BtnVerMas,
       .Btn_Enviar {
              padding-left: var(--gap-sm);
              padding-right: var(--gap-sm);
       }
}

@media only screen and (max-width: 400px) {
       .Img_NavLogo {
              width: 5.4rem;
       }

       .Btn_MenuBars {
              width: 2.5rem;
              height: 2.5rem;
       }

       .D_AreaItem,
       .D_AcercadeCard,
       .D_PerfilIngresoCard {
              padding: var(--gap-sm);
       }

       .D_MallaGrid {
              gap: 0.65rem;
       }

       .D_MallaMateria {
              min-height: 7.75rem;
              padding: 0.42rem 0.46rem;
       }
}

@media only screen and (max-width: 360px) {
       .H2_Seccion,
       .H2_Acercade,
       .H2_Mision,
       .H2_Vision {
              font-size: clamp(1.55rem, 12vw, 2.05rem);
       }

       .P_HeroDesc {
              font-size: var(--fs-base);
       }
}

/* ============================================================
   22. ACCESIBILIDAD
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
       *,
       *::before,
       *::after {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              scroll-behavior: auto !important;
              transition-duration: 0.01ms !important;
       }

       .anim-abajo,
       .anim-derecha,
       .anim-izquierda {
              opacity: 1;
              transform: none;
       }
}