@charset "UTF-8";
/* 1. FOUNDATIONS (Tokens y Variables) */
/* ==========================================================================
   DESIGN SYSTEM UNAV - ARCHIVO MAESTRO OOCSS / ITCSS
   ========================================================================== */
/* 1. FOUNDATIONS (Tokens y Variables) */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Condensed:wght@400;700&family=Roboto+Slab:wght@400;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,400&display=swap");
:root {
  /* ==========================================
     SISTEMA CENTRAL DE CAPAS (z-index)
     ========================================== */
  --unav-zIndex-base: 1;
  --unav-zIndex-controls: 10;
  --unav-zIndex-dropdown: 100;
  --unav-zIndex-sticky: 500;
  --unav-zIndex-overlay: 1000;
  --unav-zIndex-modal: 1050;
  /* --- 0. PRIMITIVOS ABSOLUTOS --- */
  --unav-white: #ffffff;
  /* --- 0.1 TOKENS SEMÁNTICOS DE APLICACIÓN --- */
  --unav-text-inverse: var(--unav-white);
  --unav-bg-surface: var(--unav-white);
  /* --- 1. PRIMARIOS --- */
  /* Rojo Unav */
  --unav-rojo-100: #FFEbee;
  --unav-rojo-200: #FFCDD2;
  --unav-rojo-300: #EF9A9A;
  --unav-rojo-400: #E57373;
  --unav-rojo-500: #eb0000;
  --unav-rojo-600: #D32F2F;
  --unav-rojo-700: #C62828;
  --unav-rojo-800: #B71C1C;
  --unav-rojo-900: #7F0000;
  /* Black Primary */
  --unav-black-100: #E6E6E6;
  --unav-black-200: #CCCCCC;
  --unav-black-300: #999999;
  --unav-black-400: #666666;
  --unav-black-500: #000000;
  --unav-black-600: #333333;
  --unav-black-700: #222222;
  --unav-black-800: #111111;
  --unav-black-900: #050505;
  /* Grey Primary */
  --unav-grey-100: #F5F6F6;
  --unav-grey-200: #EBECEC;
  --unav-grey-300: #D1D3D4;
  --unav-grey-400: #A8ABAC;
  --unav-grey-500: #6A6D6E;
  --unav-grey-600: #56595A;
  --unav-grey-700: #424445;
  --unav-grey-800: #2E2F30;
  --unav-grey-900: #1A1B1B;
  /* --- 2. SECUNDARIOS --- */
  /* Moss */
  --unav-moss-100: #E6F4D7;
  --unav-moss-200: #CEEAB0;
  --unav-moss-300: #ACDC79;
  --unav-moss-400: #86CB3C;
  --unav-moss-500: #669F2A;
  --unav-moss-600: #4F7A21;
  --unav-moss-700: #3F621A;
  --unav-moss-800: #335015;
  --unav-moss-900: #2B4212;
  /* Green Light */
  --unav-green-l-100: #E4FBCC;
  --unav-green-l-200: #D0F8AB;
  --unav-green-l-300: #A6EF67;
  --unav-green-l-400: #85E13A;
  --unav-green-l-500: #66C61C;
  --unav-green-l-600: #4CA30D;
  --unav-green-l-700: #3B7C0F;
  --unav-green-l-800: #326212;
  --unav-green-l-900: #2B5314;
  /* Green */
  --unav-green-100: #D3F8DF;
  --unav-green-200: #AAF0C4;
  --unav-green-300: #73E2A3;
  --unav-green-400: #3CCB7F;
  --unav-green-500: #16B364;
  --unav-green-600: #099250;
  --unav-green-700: #087443;
  --unav-green-800: #095C37;
  --unav-green-900: #084C2E;
  /* Teal */
  --unav-teal-100: #CCFBEF;
  --unav-teal-200: #99F6E0;
  --unav-teal-300: #5FE9D0;
  --unav-teal-400: #2ED3B7;
  --unav-teal-500: #15B79E;
  --unav-teal-600: #0E9384;
  --unav-teal-700: #107569;
  --unav-teal-800: #125D56;
  --unav-teal-900: #134E48;
  /* Cyan */
  --unav-cyan-100: #CFF9FE;
  --unav-cyan-200: #A5F0FC;
  --unav-cyan-300: #67E3F9;
  --unav-cyan-400: #22CCEE;
  --unav-cyan-500: #06AED4;
  --unav-cyan-600: #088AB2;
  --unav-cyan-700: #0E7090;
  --unav-cyan-800: #155B75;
  --unav-cyan-900: #164C63;
  /* Blue Light */
  --unav-blue-l-100: #E0F2FE;
  --unav-blue-l-200: #B9E6FE;
  --unav-blue-l-300: #7CD4FD;
  --unav-blue-l-400: #36BFFA;
  --unav-blue-l-500: #0BA5EC;
  --unav-blue-l-600: #0086C9;
  --unav-blue-l-700: #026AA2;
  --unav-blue-l-800: #065986;
  --unav-blue-l-900: #0B4A6F;
  /* Blue */
  --unav-blue-100: #D1E9FF;
  --unav-blue-200: #B2DDFF;
  --unav-blue-300: #84CAFF;
  --unav-blue-400: #53B1FD;
  --unav-blue-500: #2E90FA;
  --unav-blue-600: #1570EF;
  --unav-blue-700: #175CD3;
  --unav-blue-800: #1849A9;
  --unav-blue-900: #194185;
  /* Blue Dark */
  --unav-b-dark-100: #D1E0FF;
  --unav-b-dark-200: #B2CCFF;
  --unav-b-dark-300: #84ADFF;
  --unav-b-dark-400: #528BFF;
  --unav-b-dark-500: #2970FF;
  --unav-b-dark-600: #155EEF;
  --unav-b-dark-700: #004EEB;
  --unav-b-dark-800: #0040C1;
  --unav-b-dark-900: #00359E;
  /* Indigo */
  --unav-indigo-100: #E0EAFF;
  --unav-indigo-200: #C7D7FE;
  --unav-indigo-300: #A4BCFD;
  --unav-indigo-400: #8098F9;
  --unav-indigo-500: #6172F3;
  --unav-indigo-600: #444CE7;
  --unav-indigo-700: #3538CD;
  --unav-indigo-800: #2D31A6;
  --unav-indigo-900: #2D3282;
  /* Violet */
  --unav-violet-100: #ECE9FE;
  --unav-violet-200: #DDD6FE;
  --unav-violet-300: #C3B5FD;
  --unav-violet-400: #A48AFB;
  --unav-violet-500: #875BF7;
  --unav-violet-600: #7839EE;
  --unav-violet-700: #6927DA;
  --unav-violet-800: #5720B7;
  --unav-violet-900: #491C96;
  /* Purple */
  --unav-purple-100: #EBE9FE;
  --unav-purple-200: #D9D6FE;
  --unav-purple-300: #BDB4FE;
  --unav-purple-400: #9B8AFB;
  --unav-purple-500: #7A5AF8;
  --unav-purple-600: #6938EF;
  --unav-purple-700: #5925DC;
  --unav-purple-800: #4A1FB8;
  --unav-purple-900: #3E1C96;
  /* Fuchsia */
  --unav-fuchsia-100: #FBE8FF;
  --unav-fuchsia-200: #F6D0FE;
  --unav-fuchsia-300: #EEAAFD;
  --unav-fuchsia-400: #E478FA;
  --unav-fuchsia-500: #D444F1;
  --unav-fuchsia-600: #BA24D5;
  --unav-fuchsia-700: #9F1AB1;
  --unav-fuchsia-800: #821890;
  --unav-fuchsia-900: #6F1877;
  /* Pink */
  --unav-pink-100: #FCE7F6;
  --unav-pink-200: #FCCEEE;
  --unav-pink-300: #FAA7E0;
  --unav-pink-400: #F670C7;
  --unav-pink-500: #EE46BC;
  --unav-pink-600: #DD2590;
  --unav-pink-700: #C11574;
  --unav-pink-800: #9E165F;
  --unav-pink-900: #851651;
  /* Rose */
  --unav-rose-100: #FFE4E8;
  --unav-rose-200: #FECDD6;
  --unav-rose-300: #FEA3B4;
  --unav-rose-400: #FD6F8E;
  --unav-rose-500: #F63D68;
  --unav-rose-600: #E31B54;
  --unav-rose-700: #C01048;
  --unav-rose-800: #A11043;
  --unav-rose-900: #89123E;
  /* Orange Dark */
  --unav-o-dark-100: #FFE6D5;
  --unav-o-dark-200: #FFD6AE;
  --unav-o-dark-300: #FF9C66;
  --unav-o-dark-400: #FF692E;
  --unav-o-dark-500: #FF4405;
  --unav-o-dark-600: #E62E05;
  --unav-o-dark-700: #BC1B06;
  --unav-o-dark-800: #97180C;
  --unav-o-dark-900: #771A0D;
  /* Orange */
  --unav-orange-100: #FDEAD7;
  --unav-orange-200: #F9DBAF;
  --unav-orange-300: #F7B27A;
  --unav-orange-400: #F38744;
  --unav-orange-500: #EF6820;
  --unav-orange-600: #E04F16;
  --unav-orange-700: #B93815;
  --unav-orange-800: #932F19;
  --unav-orange-900: #772917;
  /* Yellow */
  --unav-yellow-100: #FEF7C3;
  --unav-yellow-200: #FEEE95;
  --unav-yellow-300: #FDE272;
  --unav-yellow-400: #FAC515;
  --unav-yellow-500: #EAAA08;
  --unav-yellow-600: #CA8504;
  --unav-yellow-700: #A15C07;
  --unav-yellow-800: #854A0E;
  --unav-yellow-900: #713B12;
  /* --- ESCALA DE ESPACIADO (Spacing) --- */
  /* Basada en pasos de 4px para mantener el ritmo vertical */
  --unav-spacing-0: 0;
  --unav-spacing-1: 0.063rem; /* 1px  - Separación mímina */
  --unav-spacing-xs: 0.25rem; /* 4px  - Micro ajustes */
  --unav-spacing-sm: 0.5rem; /* 8px  - Gaps pequeños */
  --unav-spacing-md: 1rem; /* 16px - Padding estándar */
  --unav-spacing-lg: 1.5rem; /* 24px - Separación entre bloques */
  --unav-spacing-xl: 2rem; /* 32px - Márgenes de sección */
  --unav-spacing-2xl: 3rem; /* 48px */
  --unav-spacing-3xl: 4rem; /* 64px - Grandes aperturas */
  /* --- ESCALA DE BORDES (Shape / Radii) --- */
  /* Define la personalidad de los contenedores */
  --unav-radius-none: 0; /* Esquinas vivas (Estilo institucional duro) */
  --unav-radius-sm: 2px; /* Botones pequeños y checkboxes */
  --unav-radius-md: 4px; /* Tarjetas, inputs y migas */
  --unav-radius-lg: 8px; /* Modales y banners */
  --unav-radius-xl: 16px; /* Secciones envolventes */
  --unav-radius-full: 9999px; /* Píldoras y botones circulares */
  /* --- FAMILIAS TIPOGRÁFICAS --- */
  --unav-fontFamilyPrimary: "Roboto", sans-serif;
  --unav-fontFamilyPrimaryCondensed: "Roboto Condensed", sans-serif;
  --unav-fontFamilySecondaryPlayfair: "Playfair Display", serif;
  --unav-fontFamilySecondarySlab: "Roboto Slab", serif;
  --unav-fontFamilySecondaryDm: "DM Serif Text", serif;
  /* --- PESOS (WEIGHTS) --- */
  --unav-fontWeightThin: 100;
  --unav-fontWeightLight: 300;
  --unav-fontWeightRegular: 400;
  --unav-fontWeightMedium: 500;
  --unav-fontWeightBold: 700;
  /* --- TAMAÑOS (ESCALA MODULAR) --- */
  /* Base: 16px (1rem) */
  --unav-fontSize500: 5rem; /* 80px - Hero Titles / Displays */
  --unav-fontSize400: 4rem; /* 64px - H1 Grandes */
  --unav-fontSize300: 3rem; /* 48px - H1 / H2 Destacados */
  --unav-fontSize250: 2.5rem; /* 40px - H2 */
  --unav-fontSize200: 2rem; /* 32px - H3 */
  --unav-fontSize175: 1.75rem; /* 28px - H4 */
  --unav-fontSize150: 1.5rem; /* 24px - H5 / Subtítulos grandes */
  --unav-fontSize125: 1.25rem; /* 20px - H6 / Destacados / Leads */
  --unav-fontSize1125: 1.125rem; /* 18px - Body Base Texto */
  --unav-fontSize100: 1rem; /* 16px - Body Base */
  --unav-fontSize085: 0.85rem; /* 13.6px */
  --unav-fontSize075: 0.75rem; /* 12px - Small / Meta / Tags */
  /* --- INTERLINEADO (LINE HEIGHT) --- */
  --unav-lineHeightNone: 1; /* Para componentes, iconos, botones */
  --unav-lineHeightTight: 1.1; /* Para titulares enormes (300, 400, 500) */
  --unav-lineHeightSnug: 1.25; /* Para titulares medios (150, 175, 200, 250) */
  --unav-lineHeightNormal: 1.5; /* Base lectura (100, 1125, 125) */
  --unav-lineHeightRelaxed: 1.75; /* Para párrafos muy largos, mejora legibilidad (085, 075)) */
  /* --- TRACKING (ESPACIADO DE LETRAS) --- */
  --unav-trackingTighter: -0.04em; /* Para titulares gigantes (400, 500) */
  --unav-trackingTight: -0.02em; /* Para titulares grandes (200, 250, 300) */
  --unav-trackingNormal: 0em; /* Body copy (100, 1125, 125) */
  --unav-trackingMedium: 0.05em;
  --unav-trackingWide: 0.08em; /* Para subtítulos en mayúsculas / Tags (085) */
  --unav-trackingWidest: 0.1em; /* Elementos muy pequeños que necesitan respirar (075) */
  /* ==========================================
     1. TOKENS TRANSVERSALES: MOTION Y FÍSICAS
     ========================================== */
  /* Duraciones (Timing) */
  --unav-durationFast: 150ms;
  --unav-durationNormal: 250ms;
  --unav-durationSlow: 600ms;
  --unav-durationSlower: 1200ms;
  --unav-durationEpic: 20s; /* Para efectos Ken Burns continuos */
  /* Curvas de Aceleración (Easing) */
  --unav-easingStandard: ease;
  --unav-easingDecel: ease-out; /* Entradas suaves en pantalla */
  --unav-easingAccel: ease-in; /* Salidas de pantalla */
  --unav-easingElastic: cubic-bezier(0.165, 0.84, 0.44, 1); /* Rebote sutil */
  /* Transiciones Base Compuestas */
  --unav-transitionBase: all var(--unav-durationNormal) var(--unav-easingStandard);
  --unav-transitionTransform: transform var(--unav-durationSlow) var(--unav-easingElastic);
  /* Opacidades Interactivas */
  --unav-opacityHoverSubtle: 0.85; /* Para Banners / Tarjetas */
  --unav-opacityHoverIntense: 0.7; /* Para enlaces de texto */
  /* Transformaciones espaciales */
  --unav-translateHoverElevation: -4px; /* Elevación en Z para hover */
  --unav-translateEntranceY: 1.25rem; /* 20px de caída inicial para Stagger */
  /* ==========================================
     2. TOKENS TRANSVERSALES: MICRO-TIPOGRAFÍA
     ========================================== */
  --unav-trackingMedium: 0.8px;
  --unav-trackingWide: 1.2px;
  /* ==========================================
     3. TOKENS TRANSVERSALES: ICONOGRAFÍA
     ========================================== */
  --unav-iconSizeSm: 1rem; /* ~16px: Textos pequeños / Botón Secundario */
  --unav-iconSizeMd: 1.25rem; /* ~20px: Botón Primario / Navegación */
  --unav-iconSizeLg: 1.5rem; /* ~24px: UI genérica */
  --unav-iconSizeXl: 2rem; /* ~32px: Destacados / Feature Box */
  --unav-iconSizeXXl: 3rem; /* 48~px: */
  --unav-iconSizeBigger: 4rem; /* ~64px: */
  --unav-iconSizeBiggest: 5rem; /* ~80px: */
  --unav-iconStrokeWeight: 1.5px; /* Sincronizado con bordes de interfaz */
  /* ==========================================
     4. TOKENS COMPONENTE: BOTONES
     ========================================== */
  /* Botones Primarios */
  --unav-botonPaddingY: 0.8rem;
  --unav-botonPaddingX: 2rem;
  --unav-botonGap: 0.6rem;
  --unav-botonFontSize: 0.875rem; /* ~14px */
  /* Botones Secundarios */
  --unav-botonSecundarioPaddingY: 0.5rem;
  --unav-botonSecundarioPaddingX: 1.2rem;
  --unav-botonSecundarioFontSize: 0.8125rem; /* ~13px */
  --unav-botonSecundarioRadius: 50px;
  --unav-botonSecundarioBorderWidth: 1.5px;
  /* ==========================================
     5. TOKENS COMPONENTE: ETIQUETAS (TAGS)
     ========================================== */
  --unav-tagPaddingY: 0.25rem; /* 4px */
  --unav-tagPaddingX: 0.625rem; /* 10px */
  --unav-tagBorderRadius: 0.375rem; /* 6px */
  --unav-tagLetterSpacing: 0.3px;
  /* ==========================================
     6. TOKENS COMPONENTE: SEPARADORES
     ========================================== */
  --unav-separadorMarginY: var(--unav-spacing-md);
  --unav-separadorPaddingX: var(--unav-spacing-md);
  --unav-separadorThicknessBase: 1px;
  --unav-separadorColorBase: var(--unav-grey-300);
  /* ==========================================
     7. TOKENS COMPONENTE: BLOQUE DE ENLACES
     ========================================== */
  --unav-bloqueEnlacePadding: 0.9375rem; /* 15px */
  --unav-bloqueEnlaceLineHeight: 1.35;
  --unav-bloqueEnlaceGap: 2px;
  --unav-bloqueEnlaceUnderlineThickness: 1px;
  /* Excepción cromática histórica */
  --unav-bloqueEnlaceBg: #e3eaed;
  --unav-bloqueEnlaceText: var(--unav-black-800);
  --unav-bloqueEnlaceHoverBg: var(--unav-black-500);
  --unav-bloqueEnlaceHoverText: var(--unav-text-inverse);
  /* ==========================================
     8. TOKENS COMPONENTE: LISTA DESCRIPTIVA
     ========================================== */
  --unav-descItemMarginBottom: 1.5rem;
  --unav-descItemPaddingBottom: 1rem;
  --unav-descTermGap: 0.5rem;
  --unav-descTermMarginBottom: 0.5rem;
  --unav-descDefinitionLineHeight: 1.5;
  /* Layout Colgante (Hanging) */
  --unav-descHangingOffset: 2.5rem;
  --unav-descBorderColorDefault: var(--unav-grey-200);
  /* ==========================================
     9. TOKENS COMPONENTE: ACORDEONES
     ========================================== */
  --unav-accordionHeaderPaddingY: 1rem;
  --unav-accordionHeaderPaddingX: 0.5rem;
  --unav-accordionHeaderPaddingRight: 3rem;
  --unav-accordionBorderColor: var(--unav-grey-200);
  --unav-accordionIconSize: var(--unav-iconSizeLg);
  --unav-accordionTitleGap: 0.75rem;
  /* Consumo de Motion Tokens */
  --unav-accordionPanelTransition: max-height var(--unav-durationNormal) var(--unav-easingDecel);
  /* ==========================================
     10. TOKENS COMPONENTE: TARJETAS (CARDS)
     ========================================== */
  --unav-cardBgBase: var(--unav-bg-surface);
  --unav-cardBorderRadius: 0; /* Cambiar a 0.75rem/12px si queremos las esquinas redondeadas */
  --unav-cardPaddingBase: 2rem;
  --unav-cardPaddingFloating: 3.5rem 2rem 2.5rem 2rem;
  /* Elevaciones de tarjeta */
  --unav-cardShadowBase: 0 4px 6px rgba(0, 0, 0, 0.05);
  --unav-cardShadowHover: 0 15px 30px rgba(0, 0, 0, 0.12);
  /* Consumo de Motion Tokens */
  --unav-cardTransitionAnim: transform var(--unav-durationNormal) var(--unav-easingStandard),
                             box-shadow var(--unav-durationNormal) var(--unav-easingStandard),
                             opacity var(--unav-durationSlow) var(--unav-easingDecel);
  /* Dimensiones de Elementos Internos */
  --unav-cardIconFloatingSize: 5rem; /* 80px */
  --unav-cardIconInnerSize: 4rem; /* 64px */
  --unav-cardImageHeight: 13.75rem; /* 220px */
  /* ==========================================
     11. TOKENS COMPONENTE: FICHAS DE PERSONA
     ========================================== */
  --unav-personCardPadding: 1rem;
  --unav-personCardGap: 1rem;
  --unav-personCardRadius: 0; /* Cambiar a 0.5rem si queremos las esquinas redondeadas */
  --unav-personCardShadow: var(--unav-cardShadowBase);
  --unav-personImageRatio: 4 / 5;
  --unav-personNameSize: var(--unav-fontSize150);
  --unav-personRoleWeight: var(--unav-fontWeightBold);
  /* ==========================================
     12. TOKENS COMPONENTE: EVENTOS
     ========================================== */
  --unav-eventCardPadding: 1.5rem;
  --unav-eventCardRadius: 0rem; /* Cambiar a 0.25rem/4px si queremos las esquinas redondeadas */
  --unav-eventImageHeight: 12.5rem; /* 200px */
  --unav-eventCardBorder: var(--unav-grey-200);
  --unav-eventDateColor: var(--unav-grey-500);
  --unav-eventTimeColor: var(--unav-black-800);
  --unav-eventTitleColor: var(--unav-black-800);
  --unav-eventLocationBg: var(--unav-grey-100);
  --unav-eventLocationText: var(--unav-grey-600);
  /* ==========================================
     13. TOKENS COMPONENTE: NOTICIAS
     ========================================== */
  --unav-newsImageRatio: 16 / 10;
  --unav-newsDateColor: var(--unav-grey-600);
  --unav-newsTitleColor: var(--unav-black-800);
  --unav-newsTitleLineHeight: 1.3;
  /* ==========================================
     14. TOKENS COMPONENTE: BANNERS
     ========================================== */
  --unav-bannerMinHeightFull: 25rem; /* 400px */
  --unav-bannerMinHeightWide: 17.5rem; /* 280px */
  --unav-bannerMinHeightMini: 17.5rem; /* 280px */
  --unav-bannerPaddingFull: 4rem 0;
  --unav-bannerPaddingWide: 2.5rem 2rem;
  --unav-bannerPaddingMini: 2.5rem 2rem;
  --unav-bannerOverlayGradient: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
  --unav-bannerOverlaySolid: rgba(0,0,0,0.5);
  --unav-bannerTitleLineHeight: 1.2;
  --unav-bannerTextLineHeight: 1.4;
  --unav-bannerTextMaxWidth: 90%;
  /* ==========================================
     15. TOKENS COMPONENTE: HERO
     ========================================== */
  --unav-heroAspectDesktop: 21 / 9;
  --unav-heroAspectMobile: 4 / 5;
  --unav-heroOverlayLight: rgba(0, 0, 0, 0.4);
  --unav-heroQuadrantPadding: 2.5rem; /* 40px */
  --unav-heroBtnGap: 1.25rem; /* 20px */
  --unav-heroZIndexVisuals: 1;
  --unav-heroZIndexOverlay: 5;
  --unav-heroZIndexControls: 10;
  /* ==========================================
     16. TOKENS COMPONENTE: CIFRAS DINÁMICAS
     ========================================== */
  --unav-counterMinHeightBase: 21.875rem; /* 350px */
  --unav-counterMinHeightSmall: 28.125rem; /* 450px */
  --unav-counterOverlayColor: rgba(0, 0, 0, 0.75);
  /* Motion tokens asignados */
  --unav-counterTransitionSpeed: var(--unav-durationSlower);
  --unav-counterTranslateY: var(--unav-translateEntranceY);
  /* ==========================================
     17. TOKENS COMPONENTE: MENÚ DE ANCLAS
     ========================================== */
  --unav-menuAnclasTopOffset: 7rem; /* Compensación para Navbar Sticky */
  --unav-menuAnclasHeaderMargin: 1.5rem;
  --unav-menuAnclasSubtitleColor: var(--unav-grey-600);
  --unav-menuAnclasTitleColor: var(--unav-black-800);
  --unav-menuAnclasTransition: var(--unav-transitionBase);
  /* ==========================================
     18. TOKENS COMPONENTE: PANEL LATERAL
     ========================================== */
  --unav-panelWidth: 25rem; /* 400px */
  --unav-panelZIndexOverlay: 1055;
  --unav-panelZIndex: 1060;
  --unav-panelOverlayBg: rgba(0, 0, 0, 0.6);
  --unav-panelShadow: -10px 0 30px rgba(0,0,0,0.1);
  /* Botón Sticky */
  --unav-panelStickyBtnPadding: 1.5rem 0.75rem; /* 24px 12px */
  --unav-panelStickyBtnGap: 1rem;
  --unav-panelStickyBtnMobileHeight: 3.75rem; /* 60px */
  /* ==========================================
     19. TOKENS COMPONENTE: GALERÍA DE IMÁGENES
     ========================================== */
  --unav-gallerySidebarWidth: 18.75rem; /* 300px */
  --unav-galleryMinHeight: 25rem; /* 400px */
  --unav-galleryThumbGap: 0.25rem; /* 4px */
  --unav-galleryThumbSizeMobile: 5.625rem; /* 90px */
  --unav-galleryControlSize: 2.25rem; /* 36px */
  --unav-galleryControlIconSize: 1.25rem; /* 20px */
  --unav-galleryBg: var(--unav-black-800);
  --unav-galleryStageBg: var(--unav-black-900);
  --unav-gallerySidebarBg: var(--unav-bg-surface);
  --unav-galleryBorderColor: var(--unav-grey-200);
  --unav-galleryMetaBg: var(--unav-grey-100);
  --unav-galleryControlBg: rgba(255, 255, 255, 0.95);
  --unav-galleryControlColor: var(--unav-black-800);
  --unav-galleryControlHoverBg: var(--unav-rojo-600);
  --unav-galleryControlHoverColor: var(--unav-text-inverse);
  /* ==========================================
     20. TOKENS COMPONENTE: GALERÍA DE VÍDEOS
     ========================================== */
  --unav-videoSidebarWidth: 20rem; /* 320px */
  --unav-videoThumbWidth: 6.875rem; /* 110px */
  --unav-videoSidebarWidthTablet: 15rem; /* 240px */
  --unav-videoThumbWidthTablet: 5rem; /* 80px */
  --unav-videoItemWidthMobile: 10rem; /* 160px */
  --unav-videoGalleryBg: var(--unav-bg-surface);
  --unav-videoGalleryStageBg: var(--unav-black-900);
  --unav-videoGalleryBorderColor: var(--unav-grey-200);
  --unav-videoGalleryHoverBg: var(--unav-grey-100);
  --unav-videoGalleryActiveBg: var(--unav-rojo-100);
  --unav-videoGalleryActiveBorder: var(--unav-rojo-600);
  /* ==========================================
     21. TOKENS ESTRUCTURALES: LAB DE MUESTRAS
     ========================================== */
  --unav-sampleRowPaddingY: 3rem;
  --unav-sampleRowPaddingX: 2rem;
  --unav-sectionLabelPaddingY: 1rem;
  --unav-sectionLabelPaddingX: 2rem;
}

/* 2. BASE (Reseteos globales) */
/* ==========================================
   00. ACCESIBILIDAD GLOBAL Y LECTORES DE PANTALLA
   ========================================== */
*:focus-visible {
  outline: 2px solid var(--unav-rojo-500) !important;
  outline-offset: var(--unav-spacing-xs) !important;
  border-radius: inherit;
}

/*@use '02-base/global';*/
/* 3. ATOMOS (Elementos indivisibles) */
/* ==========================================
   COMPONENTE: BOTONES UNAV
   ========================================== */
/* 1. CLASE BASE (Estructura y Comportamiento) */
.unav-boton {
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-botonFontSize);
  text-transform: uppercase;
  letter-spacing: var(--unav-trackingWide);
  padding: var(--unav-botonPaddingY) var(--unav-botonPaddingX);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--unav-botonGap);
  text-decoration: none;
  transition: var(--unav-transitionBase);
  cursor: pointer;
  border: 1px solid transparent;
  outline: none; /* Reseteamos outline nativo del navegador */
}

.unav-boton .unav-botonIcono {
  font-size: var(--unav-iconSizeMd);
  color: var(--unav-botonIcon, inherit);
  transition: var(--unav-transitionBase);
}

.unav-boton:hover .unav-botonIcono {
  color: inherit;
}

/* =========================================
   2. PIEL: BOTÓN PRIMARIO
   ========================================= */
.unav-botonPrimario {
  width: 100%;
  --unav-botonBg: #ffffff;
  --unav-botonText: var(--unav-black-500);
  --unav-botonBorder: var(--unav-black-500);
  --unav-botonIcon: inherit;
  --unav-botonHoverBg: var(--unav-black-500);
  --unav-botonHoverText: #ffffff;
  --unav-botonHoverBorder: var(--unav-black-500);
  background-color: var(--unav-botonBg);
  color: var(--unav-botonText);
  border-color: var(--unav-botonBorder);
}

.unav-botonPrimario:hover {
  background-color: var(--unav-botonHoverBg);
  color: var(--unav-botonHoverText);
  border-color: var(--unav-botonHoverBorder);
}

/* =========================================
   3. PIEL: BOTÓN SECUNDARIO (Outlined)
   ========================================= */
.unav-botonSecundario {
  font-size: var(--unav-botonSecundarioFontSize);
  letter-spacing: var(--unav-trackingMedium);
  padding: var(--unav-botonSecundarioPaddingY) var(--unav-botonSecundarioPaddingX);
  border-radius: var(--unav-botonSecundarioRadius);
  width: fit-content;
  --unav-botonColorSource: var(--unav-black-800);
  --unav-botonTextHover: #ffffff;
  background-color: transparent;
  color: var(--unav-botonColorSource);
  border: var(--unav-botonSecundarioBorderWidth) solid var(--unav-botonColorSource);
}

.unav-botonSecundario .unav-botonIcono,
.unav-botonSecundarioInverso .unav-botonIcono {
  font-size: var(--unav-iconSizeSm);
}

.unav-botonSecundario:hover {
  background-color: var(--unav-botonColorSource);
  color: var(--unav-botonTextHover);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* MODIFICADOR: BOTÓN SECUNDARIO BLANCO (Para fondos oscuros/banners) */
.unav-botonSecundarioBlanco {
  --unav-botonColorSource: #ffffff;
  --unav-botonTextHover: var(--unav-black-800);
}

/* =========================================
   4. PIEL: BOTÓN SECUNDARIO INVERSO (Solid)
   ========================================= */
.unav-botonSecundarioInverso {
  font-size: var(--unav-botonSecundarioFontSize);
  letter-spacing: var(--unav-trackingMedium);
  padding: var(--unav-botonSecundarioPaddingY) var(--unav-botonSecundarioPaddingX);
  border-radius: var(--unav-botonSecundarioRadius);
  width: fit-content;
  --unav-botonColorSource: var(--unav-black-800);
  --unav-botonTextHover: #ffffff;
  background-color: var(--unav-botonColorSource);
  color: var(--unav-botonTextHover);
  border: var(--unav-botonSecundarioBorderWidth) solid var(--unav-botonColorSource);
}

.unav-botonSecundarioInverso .unav-botonIcono {
  font-size: 1.1rem;
}

.unav-botonSecundarioInverso:hover {
  background-color: transparent;
  color: var(--unav-botonColorSource);
  box-shadow: none;
}

/* =========================================
   5. VARIANTES Y ESTADOS UTILITARIOS GLOBALES
   ========================================= */
.unav-botonFit {
  width: fit-content !important;
}

.unav-botonHoverInnerBorder:hover {
  box-shadow: inset 0 0 0 1px #ffffff;
}

.unav-botonDisabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
}

.unav-botonPrimario.unav-botonDisabled {
  --unav-botonBg: var(--unav-black-200) !important;
  --unav-botonText: var(--unav-black-400) !important;
  --unav-botonBorder: var(--unav-black-300) !important;
  opacity: 1;
}

/* =========================================
   6. MODIFICADOR: BOTÓN SOLO ICONO (Icon Only)
   ========================================= */
.unav-botonIconOnly {
  width: 2.75rem;
  height: 2.75rem;
  /* Consumo de Tokens de Espacio y Forma */
  padding: var(--unav-spacing-0) !important;
  border-radius: var(--unav-radius-full) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.unav-botonIconOnly .unav-botonIcono {
  /* Consumo de Token de Espacio */
  margin: var(--unav-spacing-0) !important;
  font-size: 1.25rem;
}

.unav-botonGroup .unav-botonIconOnly {
  /* Consumo de Token de Espacio para separar iconos hermanos */
  margin: var(--unav-spacing-0) var(--unav-spacing-xs);
}

.unav-botonIconOnlySm {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
}

.unav-botonIconOnlySm .unav-botonIcono {
  font-size: 1rem !important;
}

/* ==========================================
   COMPONENTE: ENLACE FLECHA (Botón Terciario)
   ========================================== */
.unav-enlaceFlecha {
  --unav-enlaceColor: var(--unav-black-800);
  color: var(--unav-enlaceColor);
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize100);
  letter-spacing: 0.5px;
  text-transform: none !important;
  display: inline-flex;
  align-items: center;
  /* Consumo de Token de Espacio */
  padding: var(--unav-spacing-sm) var(--unav-spacing-0);
  white-space: nowrap;
  outline: none;
  text-decoration: underline transparent;
  /* Consumo de Token de Espacio para el offset del subrayado */
  text-underline-offset: var(--unav-spacing-xs);
  text-decoration-thickness: 1px;
  transition: opacity var(--unav-transitionBase), text-decoration-color var(--unav-transitionBase), text-decoration-thickness var(--unav-transitionBase);
}

.unav-enlaceFlecha:hover {
  opacity: var(--unav-hoverOpacity);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.unav-enlaceFlecha .unav-arrowWrapper {
  position: relative;
  display: inline-block;
  width: 2.5875rem;
  height: 0.75rem;
  overflow: hidden;
  /* Mantenemos REM aquí porque afecta directamente a la física de la animación SVG/Línea */
  margin-right: 0.625rem;
  vertical-align: middle;
}

.unav-enlaceFlecha .unav-arrow,
.unav-enlaceFlecha .unav-arrowClone {
  position: absolute;
  top: 50%;
  width: 2.5rem;
  height: var(--unav-botonSecundarioBorderWidth);
  background-color: currentColor;
}

.unav-enlaceFlecha .unav-arrow {
  left: 0;
  transform: translateY(-50%);
}

.unav-enlaceFlecha .unav-arrowClone {
  left: -4.375rem;
  transform: translateY(-50%);
}

.unav-enlaceFlecha .unav-arrow::after,
.unav-enlaceFlecha .unav-arrowClone::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  border-top: var(--unav-botonSecundarioBorderWidth) solid currentColor;
  border-right: var(--unav-botonSecundarioBorderWidth) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@keyframes unav-arrowConveyor {
  0% {
    transform: translateY(-50%) translateX(0);
  }
  100% {
    transform: translateY(-50%) translateX(4.375rem);
  }
}
.unav-enlaceFlecha:hover .unav-arrow,
.unav-enlaceFlecha:hover .unav-arrowClone {
  animation: unav-arrowConveyor 1.2s linear infinite;
}

/* ==========================================
   COMPONENTE: ENLACES INLINE (Cuerpo de texto)
   ========================================== */
.unav-enlaceInline {
  /* 1. Identidad: Color institucional y peso destacado */
  color: var(--unav-rojo-500);
  font-weight: var(--unav-fontWeightMedium);
  /* 2. Subrayado Moderno y Legible */
  text-decoration: underline;
  text-decoration-color: var(--unav-rojo-300); /* Línea más suave por defecto para no saturar la lectura */
  text-decoration-thickness: 1px;
  text-underline-offset: 4px; /* Evita tachar las letras como la 'p', 'y', 'g' */
  /* 3. Transiciones */
  transition: color var(--unav-transitionBase), text-decoration-color var(--unav-transitionBase), text-decoration-thickness var(--unav-transitionBase);
  outline: none;
}

/* Estado Hover: Oscurece y engrosa la línea para dar feedback interactivo */
.unav-enlaceInline:hover {
  color: var(--unav-rojo-600); /* Bajamos un tono para indicar acción */
  text-decoration-color: var(--unav-rojo-600); /* La línea se vuelve del color del texto */
  text-decoration-thickness: 2px; /* Mayor grosor visual */
}

/* Modificador para fondos oscuros/corporativos */
.unav-enlaceInlineBlanco {
  color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, 0.7);
  text-decoration-thickness: 2px; /* Más grueso para mayor visibilidad */
  text-underline-offset: 4px; /* Separación forzada (offset) */
}

.unav-enlaceInlineBlanco:hover {
  color: #ffffff;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 3px; /* Feedback grueso al hover */
}

/* ==========================================
   COMPONENTE: ETIQUETAS (.unav-tag)
   ========================================== */
/* Clase Base Estructural (OOCSS) */
.unav-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* REFACTOR: Consumo directo de Tokens de Espaciado (4px 8px aprox) */
  padding: var(--unav-spacing-xs) var(--unav-spacing-sm);
  /* REFACTOR: Consumo de Token de Forma (Píldora) */
  border-radius: var(--unav-radius-full);
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightMedium);
  font-size: var(--unav-fontSize075); /* 12px exactos */
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: var(--unav-tagLetterSpacing);
  user-select: none;
  text-decoration: none;
  transition: var(--unav-transitionBase);
}

/* Pieles: Variantes de Color Corporativo
   Fondo: Nivel 100 / Texto: Nivel 800
*/
.unav-tagRojo {
  background-color: var(--unav-rojo-100);
  color: var(--unav-rojo-800);
}

.unav-tagBlack {
  background-color: var(--unav-black-100);
  color: var(--unav-black-800);
}

.unav-tagGrey {
  background-color: var(--unav-grey-100);
  color: var(--unav-grey-800);
}

.unav-tagMoss {
  background-color: var(--unav-moss-100);
  color: var(--unav-moss-800);
}

.unav-tagGreenLight {
  background-color: var(--unav-green-l-100);
  color: var(--unav-green-l-800);
}

.unav-tagGreen {
  background-color: var(--unav-green-100);
  color: var(--unav-green-800);
}

.unav-tagTeal {
  background-color: var(--unav-teal-100);
  color: var(--unav-teal-800);
}

.unav-tagCyan {
  background-color: var(--unav-cyan-100);
  color: var(--unav-cyan-800);
}

.unav-tagBlueLight {
  background-color: var(--unav-blue-l-100);
  color: var(--unav-blue-l-800);
}

.unav-tagBlue {
  background-color: var(--unav-blue-100);
  color: var(--unav-blue-800);
}

.unav-tagBlueDark {
  background-color: var(--unav-b-dark-100);
  color: var(--unav-b-dark-800);
}

.unav-tagIndigo {
  background-color: var(--unav-indigo-100);
  color: var(--unav-indigo-800);
}

.unav-tagViolet {
  background-color: var(--unav-violet-100);
  color: var(--unav-violet-800);
}

.unav-tagPurple {
  background-color: var(--unav-purple-100);
  color: var(--unav-purple-800);
}

.unav-tagFuchsia {
  background-color: var(--unav-fuchsia-100);
  color: var(--unav-fuchsia-800);
}

.unav-tagPink {
  background-color: var(--unav-pink-100);
  color: var(--unav-pink-800);
}

.unav-tagRose {
  background-color: var(--unav-rose-100);
  color: var(--unav-rose-800);
}

.unav-tagOrangeDark {
  background-color: var(--unav-o-dark-100);
  color: var(--unav-o-dark-800);
}

.unav-tagOrange {
  background-color: var(--unav-orange-100);
  color: var(--unav-orange-800);
}

.unav-tagYellow {
  background-color: var(--unav-yellow-100);
  color: var(--unav-yellow-800);
}

/* Variante Neutra: Fondo Blanco y Letra Negra */
.unav-tagWhite {
  background-color: #ffffff;
  color: var(--unav-black-900);
  box-shadow: inset 0 0 0 1px var(--unav-grey-300); /* Borde sutil para que no se pierda sobre fondos blancos */
}

/* Nueva Variante Excepcional Solicitada por el Sistema: Inversa Negra */
.unav-tagBlackInverso {
  background-color: var(--unav-black-500) !important; /* Fondo Negro Puro */
  color: #ffffff !important; /* Texto Blanco Absoluto */
}

/* ==========================================
   COMPONENTE: ICONOGRAFÍA UNAV
   ========================================== */
/* 1. ESCALA DE TAMAÑOS (Utilitarias) */
.unav-icono-sm {
  font-size: var(--unav-iconSizeSm);
}

.unav-icono-md {
  font-size: var(--unav-iconSizeMd);
}

.unav-icono-lg {
  font-size: var(--unav-iconSizeLg);
}

.unav-icono-xl {
  font-size: var(--unav-iconSizeXl);
}

.unav-icono-xxl {
  font-size: var(--unav-iconSizeXXl);
}

.unav-icono-bigger {
  font-size: var(--unav-iconSizeBigger);
}

.unav-icono-biggest {
  font-size: var(--unav-iconSizeBiggest);
}

/* 2. COMPONENTE: CAJA DE ICONO DESTACADO (Feature Box) */
.unav-iconoDestacado {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  background-color: var(--unav-grey-100);
  border: 1px solid var(--unav-grey-200);
  border-radius: 0.5rem;
  transition: var(--unav-transitionBase);
  color: var(--unav-black-800);
  height: 100%;
  text-decoration: none;
}

.unav-iconoDestacado:hover {
  background-color: var(--unav-black-500);
  color: #ffffff;
  border-color: var(--unav-black-500);
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Fuerza el color en Material Symbols durante el hover */
.unav-iconoDestacado:hover .material-symbols-outlined {
  color: #ffffff;
}

/* 3. ELEMENTOS INTERNOS Y DOCUMENTACIÓN */
.unav-iconoNombre {
  text-align: center;
  word-break: break-all;
  font-family: monospace;
  margin-top: 0.75rem;
}

.unav-docLink {
  display: inline-flex;
  align-items: center;
  color: var(--unav-rojo-500);
  text-decoration: none;
  transition: var(--unav-transitionBase);
}

.unav-docLink:hover {
  color: var(--unav-black-500);
}

/* Para SVGs inyectados directamente */
.unav-customIconSvg {
  width: 1em; /* Hereda el tamaño de la fuente del contenedor (.unav-icono-xl, etc.) */
  height: 1em;
  fill: currentColor;
}

/* Nuevo componente de icono personalizado (Átomo OOCSS) PARA LIBRERIA DE ICONOS UNAV */
.unav-icon-custom {
  display: inline-block;
  width: 1em; /* Se adaptará dinámicamente al tamaño del contenedor (unav-icono-md, etc.) */
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor; /* Mantiene la coherencia de color corporativo sin hardcodear HEX */
  vertical-align: middle;
}

/* ==========================================
   COMPONENTE: SEPARADORES (.unav-separador)
   ========================================== */
.unav-separador {
  /* Variables de instancia (Sobrescribibles vía style inline) */
  --unav-separadorWidth: 100%;
  --unav-separadorColor: var(--unav-separadorColorBase);
  --unav-separadorThickness: var(--unav-separadorThicknessBase);
  --unav-separadorStyle: solid;
  /* Variables de espaciado declaradas explícitamente */
  --unav-separadorMarginY: var(--unav-spacing-md);
  --unav-separadorPaddingX: var(--unav-spacing-md);
  display: flex;
  align-items: center;
  width: var(--unav-separadorWidth);
  /* Consumo directo y limpio de los tokens de instancia */
  margin-top: var(--unav-separadorMarginY);
  margin-bottom: var(--unav-separadorMarginY);
  clear: both;
}

/* --- Modificadores de Alineación --- */
.unav-separadorAlignLeft {
  margin-left: 0;
  margin-right: auto;
}

.unav-separadorAlignCenter {
  margin-left: auto;
  margin-right: auto;
}

.unav-separadorAlignRight {
  margin-left: auto;
  margin-right: 0;
}

/* --- Elementos Internos --- */
.unav-separadorLine {
  flex-grow: 1;
  border: none;
  border-top-width: var(--unav-separadorThickness);
  border-top-style: var(--unav-separadorStyle);
  border-top-color: var(--unav-separadorColor);
  margin: 0;
  transition: var(--unav-transitionBase);
}

.unav-separadorContent {
  /* Consumo directo de la variable local */
  padding: 0 var(--unav-separadorPaddingX);
  color: var(--unav-separadorColor);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--unav-transitionBase);
}

.unav-separadorText {
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize100);
  text-transform: uppercase;
  letter-spacing: var(--unav-trackingWide);
  margin: 0;
  color: inherit;
}

.unav-separadorIcon {
  font-size: var(--unav-iconSizeLg);
  color: inherit;
}

/* --- Layout de Documentación --- */
/* (Se asume el borde en px porque forma parte de la geometría estructural de la caja) */
.unav-techSummary {
  border-left: 4px solid var(--unav-rojo-600);
}

.unav-sectionTitle {
  color: var(--unav-black-800);
  border-bottom: 2px solid var(--unav-grey-200);
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  padding-bottom: var(--unav-spacing-sm);
}

/* ==========================================
   COMPONENTE: TÍTULOS VISUALES (Desacoplados)
   ========================================== */
/* Clase Base Estructural (OOCSS) */
/* Se aplica a <p>, <div>, <span>, etc., para darles comportamiento de bloque de título */
.unav-titulo {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.15;
  word-wrap: break-word;
  /* La tipografía, peso y color se inyectan vía clases utilitarias o tokens */
}

/* 4. MOLECULAS (Agrupaciones de átomos) */
/* ==========================================
   COMPONENTE: TARJETAS UNIFICADAS (.unav-card)
   ========================================== */
/* 1. CLASE BASE MAESTRA */
.unav-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* REFACTOR: Consumo de Tokens de Forma (16px por defecto) */
  border-radius: var(--unav-cardBorderRadius, var(--unav-radius-xl));
  background-color: var(--unav-cardBgBase, #ffffff);
  border: 1px solid var(--unav-grey-200);
  box-shadow: var(--unav-cardShadowBase);
  /* Las transiciones, box-shadow en hover y opacidades 
     se delegan a unav-movimiento.css (.unav-efectoElevacion y .unav-efectoEntradaOculto) */
}

/* 2. MODIFICADORES DE ESTRUCTURA */
/* Tipo A: Con Icono Flotante Superior */
.unav-cardFloating {
  margin-top: calc(var(--unav-cardIconFloatingSize, 80px) / 2);
  /* REFACTOR: Consumo de Tokens de Espaciado (48px top, 32px laterales/bottom aprox) */
  padding: var(--unav-cardPaddingFloating, var(--unav-spacing-2xl) var(--unav-spacing-xl) var(--unav-spacing-xl) var(--unav-spacing-xl));
  height: calc(100% - var(--unav-cardIconFloatingSize, 80px) / 2);
}

/* Tipo B/C: Estándar */
.unav-cardSolid {
  /* REFACTOR: Consumo de Tokens de Espaciado (32px) */
  padding: var(--unav-cardPaddingBase, var(--unav-spacing-xl));
}

/* Tipo D: Con Imagen Superior (Media) */
.unav-cardMedia {
  padding: var(--unav-spacing-0);
  overflow: hidden; /* Importante para el zoom de la imagen */
}

/* 3. MODIFICADOR: MODO OSCURO */
.unav-cardDark {
  border: none;
  color: #ffffff;
}

.unav-cardDark .unav-cardTitle {
  color: #ffffff !important;
}

.unav-cardDark .unav-cardText {
  color: rgba(255, 255, 255, 0.85);
}

.unav-cardDark .unav-link,
.unav-cardDark .unav-botonSecundario,
.unav-cardDark .unav-enlaceFlecha {
  color: #ffffff !important;
  border-color: #ffffff;
}

.unav-cardDark .unav-cardIconInner {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* 4. ELEMENTOS INTERNOS */
.unav-cardBody {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* REFACTOR: Consumo de Tokens de Espaciado (32px) */
  padding: var(--unav-cardPaddingBase, var(--unav-spacing-xl));
}

/* Iconos */
.unav-cardIconFloating {
  position: absolute;
  top: calc(var(--unav-cardIconFloatingSize, 80px) / -2);
  width: var(--unav-cardIconFloatingSize, 80px);
  height: var(--unav-cardIconFloatingSize, 80px);
  border-radius: var(--unav-radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 6px solid var(--unav-cardBgBase, #ffffff);
  color: #ffffff;
}

.unav-cardIconFloating .material-symbols-outlined {
  font-size: var(--unav-iconSizeXl, 2rem) !important;
}

.unav-cardIconInner {
  width: var(--unav-cardIconInnerSize, 64px);
  height: var(--unav-cardIconInnerSize, 64px);
  /* REFACTOR: Consumo de Tokens de Forma (Igual al borde de la tarjeta) */
  border-radius: var(--unav-cardBorderRadius, var(--unav-radius-xl));
  display: flex;
  justify-content: center;
  align-items: center;
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  margin-bottom: var(--unav-spacing-lg);
}

.unav-cardIconInner .material-symbols-outlined {
  font-size: var(--unav-iconSizeXl, 2rem) !important;
}

/* Imagen y Overlay */
.unav-cardImageContainer {
  position: relative;
  width: 100%;
  height: var(--unav-cardImageHeight, 220px);
  overflow: hidden;
  background-color: var(--unav-grey-200);
}

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

.unav-cardOverlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  padding: var(--unav-spacing-lg);
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 100%);
  color: #ffffff;
}

.unav-cardOverlay .unav-cardTitle {
  color: #ffffff !important;
  margin-bottom: var(--unav-spacing-0);
}

/* Textos Generales */
.unav-cardTags {
  display: flex;
  flex-wrap: wrap;
  /* REFACTOR: Consumo de Tokens de Espaciado */
  gap: var(--unav-spacing-sm);
  margin-bottom: var(--unav-spacing-md);
}

.unav-cardTitle {
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize125);
  font-weight: var(--unav-fontWeightBold);
  color: var(--unav-black-800);
  /* REFACTOR: Consumo de Tokens de Espaciado */
  margin-bottom: var(--unav-spacing-sm);
  line-height: 1.3;
}

.unav-cardText {
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightLight);
  font-size: var(--unav-fontSize100);
  color: var(--unav-grey-800);
  line-height: 1.6;
  /* REFACTOR: Consumo de Tokens de Espaciado */
  margin-bottom: var(--unav-spacing-lg);
  flex-grow: 1;
}

.unav-cardAction {
  margin-top: auto;
}

/* 5. MODIFICADORES DE ALINEACIÓN */
.unav-cardAlignLeft {
  text-align: left;
}

/* REFACTOR: Consumo de Tokens de Espaciado (32px en lugar de 2rem) */
.unav-cardAlignLeft .unav-cardIconFloating {
  left: var(--unav-spacing-xl);
}

.unav-cardAlignLeft .unav-cardIconInner {
  margin-right: auto;
}

.unav-cardAlignLeft .unav-cardTags {
  justify-content: flex-start;
}

.unav-cardAlignLeft .unav-cardAction {
  text-align: left;
  justify-content: flex-start;
}

.unav-cardAlignCenter {
  text-align: center;
}

.unav-cardAlignCenter .unav-cardIconFloating {
  left: 50%;
  transform: translateX(-50%);
}

.unav-cardAlignCenter .unav-cardIconInner {
  margin-left: auto;
  margin-right: auto;
}

.unav-cardAlignCenter .unav-cardTags {
  justify-content: center;
}

.unav-cardAlignCenter .unav-cardAction {
  text-align: center;
  justify-content: center;
  display: flex;
}

/* =======================================================
   VARIANTE: TARJETAS CON ESQUINAS RECTAS (.unav-card--flat)
   ======================================================= */
/* Forzar esquinas vivas en la estructura principal y elementos internos */
.unav-card.unav-card--flat {
  --unav-cardBorderRadius: var(--unav-radius-none, 0px) !important;
  border-radius: var(--unav-radius-none, 0px) !important;
}

/* Asegurar que las imágenes superiores no mantengan curvas heredadas */
.unav-card--flat .unav-cardImage,
.unav-card--flat .unav-cardImg,
.unav-card--flat .unav-cardImageContainer {
  border-top-left-radius: var(--unav-radius-none, 0px) !important;
  border-top-right-radius: var(--unav-radius-none, 0px) !important;
  border-radius: var(--unav-radius-none, 0px) !important;
}

/* Asegurar que los fondos temáticos sólidos o cabeceras también sean rectos */
.unav-card--flat .unav-cardHeader,
.unav-card--flat .unav-cardInner,
.unav-card--flat[style*=background-color] {
  border-radius: var(--unav-radius-none, 0px) !important;
}

/* ==========================================
   COMPONENTE: ACORDEÓN UNAV (OOCSS)
   ========================================== */
.unav-accordionGroup {
  border-top: 1px solid var(--unav-accordionBorderColor, var(--unav-grey-200));
  width: 100%;
}

.unav-accordionItem {
  border-bottom: 1px solid var(--unav-accordionBorderColor, var(--unav-grey-200));
  transition: background-color var(--unav-transitionBase);
}

/* Cabecera / Botón */
.unav-accordionHeader {
  width: 100%;
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  outline: none; /* Reseteamos el outline nativo del navegador */
  padding: var(--unav-accordionHeaderPaddingY, var(--unav-spacing-md)) var(--unav-accordionHeaderPaddingRight, var(--unav-spacing-2xl)) var(--unav-accordionHeaderPaddingY, var(--unav-spacing-md)) var(--unav-accordionHeaderPaddingX, var(--unav-spacing-lg));
  cursor: pointer;
  position: relative;
  text-align: inherit;
  /* Consumo del token de movimiento transversal */
  transition: var(--unav-transitionBase);
  /* Tipografía vía Tokens */
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize100);
  font-weight: var(--unav-fontWeightLight);
  color: var(--unav-black-800);
}

/* Estado Activo: Cambio de Peso y Color */
.unav-accordionHeader:hover,
.unav-accordionHeader[aria-expanded=true] {
  font-weight: var(--unav-fontWeightMedium);
  color: var(--unav-black-500);
}

.unav-accordionTitleWrapper {
  display: flex;
  align-items: center;
  gap: var(--unav-accordionTitleGap, var(--unav-spacing-sm));
  flex-grow: 1;
}

/* Alineaciones dinámicas */
.unav-alignCenter .unav-accordionTitleWrapper {
  justify-content: center;
}

.unav-alignRight .unav-accordionTitleWrapper {
  justify-content: flex-end;
}

/* Icono Toggle */
.unav-accordionToggleIcon {
  position: absolute;
  right: var(--unav-spacing-lg);
  top: 50%;
  transform: translateY(-50%);
  /* Rotación sincronizada con el Motion System */
  transition: transform var(--unav-transitionBase);
  font-size: var(--unav-accordionIconSize, 1.5rem);
}

.unav-accordionHeader[aria-expanded=true] .unav-accordionToggleIcon {
  transform: translateY(-50%) rotate(180deg);
}

/* Panel Desplegable */
.unav-accordionPanel {
  max-height: 0;
  overflow: hidden;
  /* Expansión estructural basada en Motion Tokens */
  transition: var(--unav-accordionPanelTransition, max-height 0.4s ease-out);
  background-color: var(--unav-cardBgBase, #ffffff);
}

.unav-accordionInner {
  /* REFACTOR: Consumo de Tokens de Espaciado (24px alrededor del contenido) */
  padding: var(--unav-spacing-lg);
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize100);
  line-height: 1.6;
  color: var(--unav-grey-700);
}

/* --- LÓGICA DE TEMATIZACIÓN DINÁMICA --- */
.unav-accordionItem.unav-isThemed .unav-accordionHeader {
  color: #ffffff;
}

.unav-accordionItem.unav-isThemed .unav-accordionHeader:hover,
.unav-accordionItem.unav-isThemed .unav-accordionHeader[aria-expanded=true] {
  /* Filtro dinámico de opacidad */
  background-color: rgba(0, 0, 0, 0.1);
  color: #ffffff;
}

.unav-accordionItem.unav-isThemed .unav-accordionToggleIcon {
  color: #ffffff;
}

/* ==========================================
   COMPONENTE: MIGAS DE PAN (BREADCRUMBS)
   ========================================== */
/* 1. Contenedor principal con Scroll Móvil */
.unav-breadcrumbs {
  display: flex;
  flex-wrap: nowrap; /* Fuerza una sola línea siempre */
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize0875, 0.875rem);
  gap: var(--unav-spacing-xs, 0.25rem);
  /* MAGIA MÓVIL: Scroll horizontal suave */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Scroll fluido en iOS */
  scrollbar-width: none; /* Oculta scrollbar en Firefox */
}

/* Oculta la barra de scroll nativa en Chrome/Safari/Edge */
.unav-breadcrumbs::-webkit-scrollbar {
  display: none;
}

/* 2. Texto introductorio ("Estás en:") */
.unav-breadcrumbHere {
  font-weight: var(--unav-fontWeightBold);
  color: var(--unav-black-900);
  margin: 0;
  padding-right: var(--unav-spacing-xs, 0.25rem);
  flex-shrink: 0; /* Evita que el flexbox lo aplaste */
  white-space: nowrap; /* Evita saltos de línea */
}

/* 3. Envoltorio de cada nivel */
.unav-breadcrumbItem {
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Vital para que funcione el scroll horizontal */
}

/* 4. Separador Automático (Bootstrap Icon a prueba de fallos) */
.unav-breadcrumbItem + .unav-breadcrumbItem::before {
  content: "\f285"; /* Código unicode del chevron-right */
  font-family: "bootstrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  font-size: 0.7rem;
  padding-right: var(--unav-spacing-sm, 0.5rem);
  padding-left: var(--unav-spacing-xs, 0.25rem);
  color: var(--unav-grey-400);
}

/* 5. Enlaces (Protección contra overrides de Bootstrap) */
.unav-breadcrumbItem a,
.unav-breadcrumbLink {
  color: var(--unav-black-800) !important; /* Fuerza nuestro color */
  text-decoration: none !important; /* Elimina subrayados nativos */
  transition: color var(--unav-transitionBase);
  border-radius: var(--unav-radius-sm, 2px);
  display: inline-flex;
  align-items: center;
}

.unav-breadcrumbItem a:hover,
.unav-breadcrumbLink:hover {
  color: var(--unav-rojo-600) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* 7. Truncamiento de textos largos (Truncate) */
.unav-breadcrumbItem span {
  max-width: 200px; /* Ancho máximo antes de poner "..." */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* 8. Ítem final (Página Actual) */
.unav-breadcrumbItem.unav-isActive span,
.unav-breadcrumbItem .active {
  color: var(--unav-black-800);
  font-weight: var(--unav-fontWeightMedium);
  pointer-events: none; /* Evita que sea clickeable por error */
}

/* ==========================================
   COMPONENTE: LISTA DESCRIPTIVA (.unav-descList)
   ========================================== */
.unav-descList {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.unav-descItem {
  display: flex;
  flex-direction: column;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px default) */
  margin-bottom: var(--unav-descItemMarginBottom, var(--unav-spacing-md));
  padding-bottom: var(--unav-descItemPaddingBottom, var(--unav-spacing-md));
  font-family: var(--unav-fontFamilyPrimary);
  width: 100%;
  box-sizing: border-box;
  transition: var(--unav-transitionBase);
}

.unav-descItem:last-child {
  margin-bottom: 0;
}

/* Modificador de Borde Inferior */
.unav-hasBorder {
  border-bottom: 1px solid var(--unav-descBorderColor, var(--unav-descBorderColorDefault));
}

/* Título del Término (Term) */
.unav-descTerm {
  display: flex;
  align-items: center;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px default) */
  gap: var(--unav-descTermGap, var(--unav-spacing-sm));
  font-size: var(--unav-fontSize100, 1rem); /* Uso de escala tipográfica */
  font-weight: var(--unav-fontWeightBold);
  /* REFACTOR: Consumo de Tokens de Espaciado (4px default) */
  margin-bottom: var(--unav-descTermMarginBottom, var(--unav-spacing-xs));
  color: var(--unav-descColorPrimary, var(--unav-black-800));
  transition: var(--unav-transitionBase);
}

/* Icono (Si existe) */
.unav-descIcon {
  font-size: var(--unav-iconSizeSm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--unav-descColorPrimary, inherit);
}

/* Texto de Definición (Definition) */
.unav-descDefinition {
  margin: 0;
  font-size: var(--unav-fontSize100);
  line-height: var(--unav-descDefinitionLineHeight);
  font-weight: var(--unav-fontWeightRegular);
  color: var(--unav-grey-700);
}

/* =========================================
   VARIANTE: ICONO COLGANTE (.unav-descItemHanging)
   ========================================= */
.unav-descItemHanging {
  /* Desplaza el contenedor y su borde a la derecha */
  /* REFACTOR: Consumo de Tokens de Espaciado (32px default) */
  margin-left: var(--unav-descHangingOffset, var(--unav-spacing-xl));
  width: calc(100% - var(--unav-descHangingOffset, var(--unav-spacing-xl)));
}

.unav-descItemHanging .unav-descTerm {
  display: block;
  position: relative;
}

.unav-descItemHanging .unav-descIcon {
  /* Posiciona el icono fuera del flujo, hacia la izquierda */
  position: absolute;
  left: calc(var(--unav-descHangingOffset, var(--unav-spacing-xl)) * -1);
  /* REFACTOR: Ajuste óptico mediante token xs (4px) */
  top: var(--unav-spacing-xs);
  display: inline-flex;
  justify-content: flex-start;
}

/* Layout de la Documentación */
.unav-techSummary {
  border-left: 4px solid var(--unav-rojo-600);
}

.unav-sectionTitle {
  color: var(--unav-black-800);
  border-bottom: 2px solid var(--unav-grey-200);
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  padding-bottom: var(--unav-spacing-sm);
}

/* ==========================================
   COMPONENTE: LISTA CON ICONOS (.unav-listIcon)
   ========================================== */
/* Contenedor principal de la lista (ul) */
.unav-listIcon {
  list-style: none; /* Eliminamos los bullets nativos del navegador */
  padding-left: 0;
  margin: 0;
  /* REFACTOR: Consumo de Tokens de Espaciado (24px de margen inferior por defecto) */
  margin-bottom: var(--unav-spacing-lg);
  display: flex;
  flex-direction: column;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px de separación entre los elementos) */
  gap: var(--unav-spacing-sm);
}

/* Último elemento sin margen inferior para no romper cajas contenedoras */
.unav-listIcon:last-child {
  margin-bottom: 0;
}

/* Elemento de la lista (li) */
.unav-listIconItem {
  display: flex;
  align-items: flex-start; /* Alinea el icono a la parte superior del texto (ideal para textos largos) */
  /* REFACTOR: Consumo de Tokens de Espaciado (8px de separación entre icono y texto) */
  gap: var(--unav-spacing-sm);
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize100);
  line-height: var(--unav-lineHeightNormal, 1.5);
  color: var(--unav-black-800);
}

/* Contenedor del Icono (i, span o svg) */
.unav-listIconIcon {
  flex-shrink: 0; /* Evita que el icono se aplaste si el texto es muy largo */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--unav-listIconColor, var(--unav-rojo-600)); /* Rojo corporativo por defecto */
  font-size: var(--unav-iconSizeMd, 1.5rem);
  /* Ajuste óptico: Baja el icono unos píxeles para que su centro visual se alinee con la primera línea de texto */
  /* REFACTOR: Consumo de token micro (4px) */
  margin-top: var(--unav-spacing-xs);
}

/* =========================================
   MODIFICADORES DE DENSIDAD
   ========================================= */
/* Lista relajada (Más espacio entre los li) */
.unav-listIcon--relaxed {
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  gap: var(--unav-spacing-md);
}

/* Lista compacta (Menos espacio entre los li) */
.unav-listIcon--compact {
  /* REFACTOR: Consumo de Tokens de Espaciado (4px) */
  gap: var(--unav-spacing-xs);
}

/* =========================================
   MODIFICADORES DE ESTILO (Pieles)
   ========================================= */
/* Variante Neutra (Iconos en gris/negro) */
.unav-listIcon--neutral .unav-listIconIcon {
  color: var(--unav-black-800);
}

/* Variante Oscura (Para usar sobre fondos oscuros o banners) */
.unav-listIcon--dark .unav-listIconItem {
  color: rgba(255, 255, 255, 0.9);
}

.unav-listIcon--dark .unav-listIconIcon {
  color: #ffffff; /* Opcional: Podría ser var(--unav-rojo-400) si quieres mantener el acento */
}

/* ==========================================
   COMPONENTE: BLOQUE DE ENLACES UNAV (OOCSS)
   ========================================== */
/* Contenedor Flex para el apilamiento automático */
.unav-listadoEnlaces {
  display: flex;
  flex-direction: column;
  /* Consumo de Token de Espacio: 2px no está en la escala, pero usamos 'xs' (4px) o un gap base */
  gap: var(--unav-spacing-1, 4px);
  width: 100%;
}

/* Átomo: Bloque Individual */
.unav-bloqueEnlace {
  display: block;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: var(--unav-transitionBase);
  outline: none; /* Reseteo del outline nativo */
  /* Consumo de Tokens Corporativos */
  color: var(--unav-bloqueEnlaceText);
  background-color: var(--unav-bloqueEnlaceBg);
  /* El padding dependerá de las variables de instancia, pero su fallback consume tokens */
  padding: var(--unav-bloqueEnlacePadding, var(--unav-spacing-md));
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize100);
  line-height: var(--unav-bloqueEnlaceLineHeight);
  /* Consumo de Token de Forma: Esquinas rectas estrictas */
  border-radius: var(--unav-radius-none) !important;
}

.unav-bloqueEnlace:hover {
  background-color: var(--unav-bloqueEnlaceHoverBg);
  color: var(--unav-bloqueEnlaceHoverText);
  text-decoration: none;
}

.unav-bloqueEnlaceText {
  display: inline;
  font-weight: var(--unav-fontWeightRegular);
  transition: font-weight 0.1s ease;
}

/* Estado de medición (JS) y Hover (Transición a Bold) */
.unav-bloqueEnlace.unav-measuringBold .unav-bloqueEnlaceText,
.unav-bloqueEnlace:hover .unav-bloqueEnlaceText {
  font-weight: var(--unav-fontWeightBold);
  text-decoration: none;
}

/* Línea de subrayado trazada vía JavaScript */
.unav-bloqueEnlace::after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: currentColor; /* Hereda el color del hover automáticamente */
  /* Coordenadas inyectadas por el motor JS */
  left: var(--unav-lineLeft, var(--unav-spacing-md));
  width: var(--unav-lineWidth, 0px);
  bottom: var(--unav-lineBottom, var(--unav-spacing-sm)); /* Fallback asimilado al token sm */
  opacity: 0;
  transition: opacity var(--unav-transitionBase);
}

.unav-bloqueEnlace:hover::after {
  opacity: 1;
}

/* ==========================================
   COMPONENTE: PAGINACIÓN UNAV (ESTÁNDAR)
   Basado en .unav-botonPrimario y OOCSS
   ========================================== */
.unav-paginacion {
  display: inline-flex;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* Evitamos el doble borde unificando los laterales de ítems contiguos */
.unav-paginacion li:not(:first-child) .unav-paginacionItem,
.unav-paginacion li:not(:first-child) .unav-paginacionTrigger {
  border-left: none;
}

/* Forzar esquinas en ángulo recto perfectas en todo el componente, incluidos extremos (Chevrons) */
.unav-paginacion .unav-paginacionItem,
.unav-paginacion .unav-paginacionTrigger {
  /* REFACTOR: Consumo de Tokens de Forma (Esquinas vivas) */
  border-radius: var(--unav-radius-none) !important;
  min-width: 44px; /* Touch target size (WCAG) */
  height: 44px; /* Touch target size (WCAG) */
  display: flex;
  align-items: center;
  justify-content: center;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px lateral) */
  padding: 0 var(--unav-spacing-md);
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-size: var(--unav-fontSize100);
  font-weight: var(--unav-fontWeightBold);
  text-decoration: none;
}

/* Modificador de Estado Activo (Página Actual) */
.unav-paginacion li.active .unav-paginacionItem {
  background-color: var(--unav-rojo-600) !important;
  color: #ffffff !important;
  border-color: var(--unav-rojo-600) !important;
  cursor: default;
  pointer-events: none;
}

/* ==========================================
   SELECTOR DESPLEGABLE CON SCROLL (...) 
   ========================================== */
.unav-paginacionDropdownMenu {
  max-height: 200px; /* Altura máxima para ver 4-5 opciones */
  overflow-y: auto; /* Activación del scroll vertical */
  min-width: 90px;
  /* REFACTOR: Consumo de Tokens de Espaciado (4px vertical, 0 horizontal) */
  padding: var(--unav-spacing-xs) 0;
  border: 1px solid var(--unav-grey-300);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  /* REFACTOR: Consumo de Tokens de Forma (Esquinas rectas) */
  border-radius: var(--unav-radius-none) !important;
}

/* Estilos de las opciones dentro del desplegable con scroll */
.unav-paginacionDropdownMenu .dropdown-item {
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize085);
  text-align: center;
  /* REFACTOR: Consumo de Tokens de Espaciado (4px vertical, 8px horizontal) */
  padding: var(--unav-spacing-xs) var(--unav-spacing-sm);
  color: var(--unav-grey-700);
  transition: background-color var(--unav-transitionBase), color var(--unav-transitionBase);
}

.unav-paginacionDropdownMenu .dropdown-item:hover {
  background-color: var(--unav-grey-100);
  color: var(--unav-rojo-600);
}

/* ==========================================
   COMPONENTE: CINTILLO DE TITULACIONES
   ========================================== */
.unav-cintillo {
  background-color: var(--unav-bloqueEnlaceBg);
  border-top: 1px solid var(--unav-grey-200);
  border-bottom: 1px solid var(--unav-grey-200);
  width: 100%;
}

/* Contenedor Flex con Scroll Horizontal para Móviles */
.unav-cintilloList {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center; /* <-- AÑADIDO: Centrado absoluto de los ítems */
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.unav-cintilloList::-webkit-scrollbar {
  display: none;
}

/* Cada característica */
.unav-cintilloItem {
  display: flex;
  align-items: center;
  gap: var(--unav-spacing-sm);
  padding: var(--unav-spacing-md) var(--unav-spacing-lg);
  border-right: 1px solid var(--unav-black-800);
  flex-shrink: 0;
  color: var(--unav-bloqueEnlaceText);
}

.unav-cintilloItem:last-child {
  border-right: none;
}

/* Contenedor del Icono */
.unav-cintilloIcon {
  font-size: var(--unav-iconSizeLg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* Pequeño parche para UX móvil: 
   Si hay muchos ítems en móvil, justify-content: center recorta la izquierda. 
   Lo liberamos a 'flex-start' solo en pantallas móviles para que el scroll funcione perfecto. */
@media (max-width: 991px) {
  .unav-cintilloList {
    justify-content: flex-start;
  }
}
/* ==========================================
   COMPONENTE: PESTAÑAS (TABS) UNAV OOCSS
   ========================================== */
/* 1. Estructura Base y Comportamiento Móvil (Scroll Horizontal) */
.unav-tabsList {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: var(--unav-spacing-sm);
}

.unav-tabsList::-webkit-scrollbar {
  display: none;
}

/* Botón Base de Pestaña */
.unav-tabBtn {
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--unav-fontFamilyPrimary);
  transition: all var(--unav-transitionBase);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}

/* Paneles de Contenido */
.unav-tabPanel {
  display: none;
  animation: unavFadeIn var(--unav-durationFast) var(--unav-easingStandard) forwards;
}

.unav-tabPanel.unav-isActive {
  display: block;
}

@keyframes unavFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================
   MEJORA UX: INDICADOR DE DESBORDAMIENTO MOBILE
   ========================================== */
.unav-tabsOverflow {
  position: relative;
  width: 100%;
  border-radius: var(--unav-radius-none);
}

@media (max-width: 767px) {
  .unav-tabsOverflow::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--unav-spacing-3xl, 3rem);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 1;
    z-index: 10;
  }
  /* Piel: Variante Tarjeta (El header es gris, así que fundimos a gris para dar profundidad) */
  .unav-tabs--card .unav-tabsOverflow::after {
    background: linear-gradient(to right, transparent 0%, var(--unav-grey-100, #f8f9fa) 100%);
  }
  /* Piel: Variante Subrayada (El header es blanco, fundimos a blanco) */
  .unav-tabs--underline .unav-tabsOverflow::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  }
  .unav-tabsOverflow.unav-isEnd::after {
    opacity: 0;
  }
}
/* ---------------------------------------------------
   VARIANTE 1: PESTAÑAS TARJETA CON ICONO (.unav-tabs--card)
   --------------------------------------------------- */
.unav-tabs--card {
  background-color: #ffffff;
  border: 1px solid var(--unav-bloqueEnlaceBg);
  border-radius: var(--unav-radius-none);
  overflow: hidden;
  box-shadow: var(--unav-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
}

.unav-tabs--card .unav-tabsList {
  background-color: var(--unav-bloqueEnlaceBg); /* Pista de fondo histórico como Bloque de Enlaces */
  padding: var(--unav-spacing-sm);
  border-bottom: 1px solid var(--unav-bloqueEnlaceBg);
  gap: var(--unav-spacing-xs);
}

/* CORRECCIÓN UX: Todas las pestañas son "Cajas" blancas explícitas */
.unav-tabs--card .unav-tabBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--unav-spacing-sm) var(--unav-spacing-lg);
  border-radius: var(--unav-radius-none);
  color: var(--unav-grey-600);
  min-width: 120px;
  /* NUEVO: Físicas de botón inactivo */
  background-color: #ffffff;
  border: 1px solid var(--unav-bloqueEnlaceBg);
}

.unav-tabs--card .unav-tabIcon {
  font-size: var(--unav-iconSizeLg);
  margin-bottom: 4px;
}

.unav-tabs--card .unav-tabBtn:hover {
  color: var(--unav-black-800);
  border-color: var(--unav-grey-300); /* Feedback visual al pasar el ratón */
}

/* Estado Activo Variante 1 */
.unav-tabs--card .unav-tabBtn.unav-isActive {
  background-color: #ffffff;
  color: var(--unav-black-900);
  font-weight: var(--unav-fontWeightBold);
  border-color: transparent; /* Quitamos el borde... */
  box-shadow: var(--unav-shadow-md, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)); /* ...y aplicamos elevación */
}

.unav-tabs--card .unav-tabsContent {
  padding: var(--unav-spacing-xl);
}

/* ---------------------------------------------------
   VARIANTE 2: PESTAÑAS SUBRAYADAS (.unav-tabs--underline)
   --------------------------------------------------- */
.unav-tabs--underline {
  border-bottom: 1px solid var(--unav-bloqueEnlaceBg);
  box-shadow: var(--unav-shadow-sm, 0 0.25rem 0.25rem -0.25rem rgba(0, 0, 0, 0.075));
}

.unav-tabs--underline .unav-tabsList {
  border-bottom: 2px solid var(--unav-bloqueEnlaceBg);
  gap: var(--unav-spacing-xl);
}

.unav-tabs--underline .unav-tabBtn {
  padding: var(--unav-spacing-sm) 0;
  color: var(--unav-grey-600);
  font-weight: var(--unav-fontWeightMedium);
  font-size: var(--unav-fontSize1125);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}

.unav-tabs--underline .unav-tabBtn:hover {
  color: var(--unav-black-900);
}

/* Estado Activo Variante 2 */
.unav-tabs--underline .unav-tabBtn.unav-isActive {
  color: var(--unav-rojo-500) !important;
  border-bottom: 3px solid var(--unav-rojo-500) !important;
}

.unav-tabs--underline .unav-tabsContent {
  padding-top: var(--unav-spacing-xl);
}

/* 5. ORGANISMOS (Secciones y Layouts complejos) */
/* 5. ORGANISMOS (Secciones y Layouts complejos) */
/* ==========================================
   COMPONENTE: HERO UNAV (OOCSS UNIFICADO)
   ========================================== */
/* Envoltorio principal (Fullwidth) */
.unav-hero {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  background-color: var(--unav-black-900);
}

/* Base Visual (Imágenes y Vídeo) */
.unav-heroVisuals {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--unav-heroAspectDesktop, 21/9);
  background-color: var(--unav-black-900);
}

/* Modificadores de Altura (Hero B) */
.unav-hero--short .unav-heroVisuals {
  aspect-ratio: var(--unav-heroAspectShort, 21/6);
}

.unav-hero--half .unav-heroVisuals {
  aspect-ratio: var(--unav-heroAspectHalf, 21/4.5);
}

/* Control de Imágenes Responsive */
.unav-heroImgMobile, .unav-heroImgDesktop {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.unav-heroAnimZoom {
  animation: unav-slowZoom 20s ease-in-out infinite alternate;
  will-change: transform; /* Optimización de rendimiento GPU */
}

/* Elementos de Vídeo */
.unav-heroVideoMp4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  pointer-events: none;
  z-index: var(--unav-heroZIndexVisuals, 1);
}

.unav-heroVideoYoutubeWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  z-index: var(--unav-heroZIndexVisuals, 1);
}

.unav-heroVideoYoutubeWrapper iframe {
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

/* Modificador OOCSS: Hero Vertical Estricto (9:16) en Móviles */
.unav-hero--mobile9x16 {
  /* Reescribimos el token. El hijo (.unav-heroVisuals) lo heredará automáticamente */
  --unav-heroAspectMobile: 9/16;
}

/* Capa de Superposición y Textos (Overlay) */
.unav-heroOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Deja pasar los clics hacia atrás si no hay botones */
  z-index: var(--unav-heroZIndexOverlay, 5);
  background-color: var(--unav-heroOverlayLight, rgba(0, 0, 0, 0.4));
}

.unav-hero--darkOverlay .unav-heroOverlay {
  background-color: var(--unav-heroOverlayDark, rgba(0, 0, 0, 0.5));
}

/* Contenedor de Textos */
.unav-heroContent {
  width: 70%;
  text-align: center;
  pointer-events: none; /* Dejamos que los clics atraviesen todo el contenedor */
  color: var(--unav-text-inverse);
}

/* Recuperamos los clics SOLO en los botones y textos para no tapar el vídeo */
.unav-heroBtnGroup {
  pointer-events: auto;
}

.unav-heroHeaderTexts {
  pointer-events: auto;
}

.unav-heroContent--center {
  margin: 0 auto;
  max-width: 50rem;
}

.unav-heroContent--left {
  text-align: left;
  width: 40%;
  margin-left: 0;
}

/* ==========================================
   INTERACCIÓN MULTIMEDIA: HERO VÍDEO
   ========================================== */
.unav-efectoDesvanecerTextos {
  opacity: 1;
  visibility: visible;
  /* Consumo riguroso de Motion Tokens corporativos (600ms, ease) */
  transition: opacity var(--unav-durationSlow) var(--unav-easingStandard), visibility var(--unav-durationSlow) var(--unav-easingStandard);
}

/* Clase de estado interactivo controlada por JS */
.unav-isHidden {
  opacity: 0;
  visibility: hidden; /* Esto asegura que el elemento desaparezca del árbol de clics */
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Tipografías Hero */
.unav-heroPretitle {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize125);
  font-weight: var(--unav-fontWeightMedium);
  line-height: 1.5;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px bottom) */
  margin: 0 0 var(--unav-spacing-sm) 0;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.unav-heroTitle {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize500); /* 80px */
  font-weight: var(--unav-fontWeightThin);
  line-height: 1;
  margin: 0;
  word-wrap: break-word;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Variantes Tipográficas Hero B */
.unav-heroTitle--bold {
  font-weight: var(--unav-fontWeightBold);
}

/* REFACTOR: Consumo de Tokens de Espaciado (16px y 4px vertical) */
.unav-heroTitle--lg {
  font-size: var(--unav-fontSize400);
  margin: var(--unav-spacing-md) 0;
  line-height: 1.1;
}

.unav-heroTitle--md {
  font-size: var(--unav-fontSize300);
}

.unav-heroTitle--sm {
  font-size: var(--unav-fontSize200);
  margin: var(--unav-spacing-xs) 0;
}

.unav-heroLead {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize125); /* 20px */
  font-weight: var(--unav-fontWeightLight);
  line-height: 1.5;
  /* REFACTOR: Consumo de Tokens de Espaciado (32px bottom) */
  margin-bottom: var(--unav-spacing-xl);
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Truncado de 3 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Grupos de Elementos Internos */
.unav-heroTagGroup {
  display: flex;
  flex-wrap: wrap;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  gap: var(--unav-spacing-md);
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  margin-bottom: var(--unav-spacing-md);
}

.unav-heroContent--center .unav-heroTagGroup {
  justify-content: center;
}

.unav-heroContent--left .unav-heroTagGroup {
  justify-content: flex-start;
}

.unav-heroBtnGroup {
  display: flex;
  flex-wrap: wrap;
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  gap: var(--unav-heroBtnGap, var(--unav-spacing-lg));
  pointer-events: auto; /* Permite clics dentro de las áreas de botones */
}

.unav-heroBtnGroup--horizontal {
  flex-direction: row;
}

.unav-heroBtnGroup--vertical {
  flex-direction: column;
}

.unav-heroContent--center .unav-heroBtnGroup {
  justify-content: center;
  /* REFACTOR: Consumo de Tokens de Espaciado (32px) */
  margin-top: var(--unav-spacing-xl);
}

.unav-heroContent--left .unav-heroBtnGroup {
  justify-content: flex-start;
}

/* =======================================================
   CUADRANTES ABSOLUTOS (Para Botones Hero Estándar)
   ======================================================= */
.unav-heroControlsDesktop {
  position: absolute;
  inset: 0;
  pointer-events: none; /* CRÍTICO: Evita que esta capa bloquee el hover/click del centro */
  z-index: var(--unav-heroZIndexControls, 10);
}

.unav-heroQuadrant {
  position: absolute;
  display: flex;
  width: 50%;
  height: 50%;
  /* REFACTOR: Consumo de Tokens de Espaciado gigante (48px default) */
  padding: var(--unav-heroQuadrantPadding, var(--unav-spacing-2xl));
  box-sizing: border-box;
  pointer-events: none; /* CRÍTICO: Deja que el click llegue al botón hijo (auto) */
}

.unav-heroQuadrant--topLeft {
  top: 0;
  left: 0;
  justify-content: flex-start;
  align-items: flex-start;
}

.unav-heroQuadrant--topRight {
  top: 0;
  right: 0;
  justify-content: flex-end;
  align-items: flex-start;
}

.unav-heroQuadrant--bottomLeft {
  bottom: 0;
  left: 0;
  justify-content: flex-start;
  align-items: flex-end;
}

.unav-heroQuadrant--bottomRight {
  bottom: 0;
  right: 0;
  justify-content: flex-end;
  align-items: flex-end;
}

/* Controles Móvil */
.unav-heroControlsMobile {
  display: none;
}

.unav-heroControlsMobileInner {
  display: flex;
  flex-direction: column;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  gap: var(--unav-spacing-md);
  width: 100%;
}

/* Controles de Vídeo */
.unav-heroVideoControls {
  position: absolute;
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  bottom: var(--unav-spacing-lg);
  right: var(--unav-spacing-lg);
  z-index: var(--unav-heroZIndexVideoControls, 20);
  pointer-events: auto;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  display: flex;
  gap: var(--unav-spacing-sm);
}

/* ==========================================
  MODIFICADOR OOCSS: Botones Móviles sobre la Imagen
  ========================================== */
@media (max-width: 767.98px) {
  .unav-heroMobile--overImage {
    display: grid !important;
  }
  /* Colapsamos la imagen y los controles en la misma celda del grid */
  .unav-heroMobile--overImage > .unav-heroVisuals,
  .unav-heroMobile--overImage > .unav-heroControlsMobile {
    grid-area: 1/1;
  }
  /* NUEVO: Elevamos el centro de gravedad del texto para separarlo de los botones */
  .unav-heroMobile--overImage .unav-heroOverlay {
    /* 160px equivale a la altura aproximada de 3 botones + sus márgenes */
    padding-bottom: 160px !important;
  }
  /* Posicionamos los controles en la base táctil segura */
  .unav-heroMobile--overImage > .unav-heroControlsMobile {
    align-self: end;
    padding-bottom: var(--unav-spacing-xl);
    background-color: transparent !important;
    z-index: 10;
    pointer-events: none; /* Evita que la caja invisible bloquee el scroll/clics en la foto */
  }
  /* Reactivamos la interactividad solo en la botonera */
  .unav-heroMobile--overImage > .unav-heroControlsMobile .unav-heroControlsMobileInner {
    pointer-events: auto;
    background-color: transparent !important;
    padding: 0 var(--unav-spacing-md);
  }
}
/* =======================================================
   RESPONSIVIDAD: TABLET (Entre móvil y escritorio)
   ======================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
  /* 1. Damos más anchura al contenedor de texto para aprovechar la pantalla */
  .unav-heroContent {
    width: 90%;
  }
  /* 2. Reducimos el Título Gigante (80px) a un tamaño H1 estándar (48px o 64px) */
  .unav-heroTitle {
    font-size: var(--unav-fontSize300); /* ~48px, ideal para tablets */
  }
  .unav-heroTitle--lg {
    font-size: var(--unav-fontSize400); /* ~64px */
  }
  /* 3. Reducimos ligeramente la entradilla y el interlineado */
  .unav-heroLead {
    font-size: var(--unav-fontSize1125); /* ~18px */
    margin-bottom: var(--unav-spacing-lg);
  }
  /* 4. Comprimimos un poco los cuadrantes laterales de los botones para que no ahoguen el texto */
  .unav-heroQuadrant {
    padding: var(--unav-spacing-xl);
  }
}
/* =======================================================
   RESPONSIVIDAD (Mobile First Approach)
   ======================================================= */
@media (min-width: 769px) {
  .unav-heroImgMobile {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .unav-heroVisuals {
    aspect-ratio: var(--unav-heroAspectMobile, 4/5) !important;
  }
  .unav-heroImgDesktop {
    display: none !important;
  }
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  .unav-heroOverlay {
    padding: var(--unav-spacing-lg);
  }
  .unav-heroContent {
    width: 100%;
    text-align: center;
  }
  .unav-heroContent--left {
    margin-left: auto;
    margin-right: auto;
  }
  .unav-heroContent--left .unav-heroTagGroup, .unav-heroContent--left .unav-heroBtnGroup {
    justify-content: center;
  }
  .unav-heroPretitle {
    font-size: var(--unav-fontSize100);
  }
  .unav-heroTitle {
    font-size: var(--unav-fontSize200);
  }
  .unav-heroTitle--bold {
    font-size: var(--unav-fontSize200);
  }
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  .unav-heroLead {
    font-size: var(--unav-fontSize100);
    margin-bottom: var(--unav-spacing-lg);
  }
  .unav-heroControlsDesktop {
    display: none !important;
  }
  .unav-heroControlsMobile {
    display: block;
    width: 100%;
    /* REFACTOR: Consumo de Tokens de Espaciado (24px arriba/lados, 48px abajo) */
    padding: var(--unav-spacing-lg) var(--unav-spacing-lg) var(--unav-spacing-2xl) var(--unav-spacing-lg);
    text-align: center;
    background-color: var(--unav-cardBgBase, var(--unav-bg-surface));
  }
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  .unav-heroBtnGroup {
    flex-direction: column !important;
    width: 100%;
    margin-top: var(--unav-spacing-lg);
  }
  .unav-heroBtnGroup .unav-botonPrimario {
    width: 100% !important;
  }
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) en móvil */
  .unav-heroVideoControls {
    bottom: var(--unav-spacing-sm);
    right: var(--unav-spacing-sm);
  }
}
/* ==============================================================
   NUEVO: Transiciones dinámicas para la capa de opacidad (Overlay)
   ============================================================== */
.unav-hero--darkOverlay::before,
.unav-hero--darkOverlay::after,
.unav-heroOverlay {
  transition: opacity 1s ease, background-color 1s ease, background 1s ease !important;
}

.unav-hero.unav-fondoDesvanecido::before,
.unav-hero.unav-fondoDesvanecido::after {
  opacity: 0 !important;
}

.unav-heroOverlay.unav-fondoDesvanecido {
  background: transparent !important;
  background-color: transparent !important;
}

/* ==========================================
   COMPONENTE: BANNERS UNAV (OOCSS)
   ========================================== */
/* ESTRUCTURA BASE */
.unav-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* REFACTOR: Consumo de Tokens de Forma (Esquinas rectas estrictas) */
  border-radius: var(--unav-radius-none) !important;
  overflow: hidden;
  transition: var(--unav-transitionBase);
  color: var(--unav-black-800);
}

/* Modificador: Tematización Oscura (Textos blancos) */
.unav-banner.unav-themeDark {
  color: var(--unav-text-inverse);
  /* Propagación de Token: Cualquier enlace flecha hijo se vuelve blanco */
  --unav-enlaceColor: var(--unav-text-inverse);
}

/* Capa de Contraste (Overlay) */
.unav-bannerOverlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--unav-bannerOverlayGradient);
  z-index: 1;
}

/* Contenedor del contenido */
.unav-bannerContent {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Tipografía Interna */
.unav-bannerTitle {
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightBold);
  text-transform: uppercase;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px aprox) */
  margin-bottom: var(--unav-bannerTitleMargin, var(--unav-spacing-md));
  line-height: var(--unav-bannerTitleLineHeight);
}

.unav-bannerText {
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightRegular);
  line-height: var(--unav-bannerTextLineHeight);
  max-width: var(--unav-bannerTextMaxWidth);
}

/* Modificador de Alineación: Centrado */
.unav-banner.unav-alignCenter {
  text-align: center;
}

.unav-banner.unav-alignCenter .unav-bannerOverlay {
  background: var(--unav-bannerOverlaySolid);
}

.unav-banner.unav-alignCenter .unav-bannerContent {
  align-items: center;
}

.unav-banner.unav-alignCenter .unav-bannerText {
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================
   VARIANTES DE TAMAÑO / LAYOUT
   ========================================== */
/* 1. Banner Ancho Completo (Fullwidth) */
.unav-bannerFull {
  width: 100%; /* Ocupa el 100vw al estar fuera del container en HTML */
  min-height: var(--unav-bannerMinHeightFull);
  padding: var(--unav-bannerPaddingFull, var(--unav-spacing-3xl));
}

.unav-bannerFull .unav-bannerTitle {
  font-size: var(--unav-fontSize250);
}

.unav-bannerFull .unav-bannerText {
  font-size: var(--unav-fontSize125);
}

/* 2. Banner Ancho (12 Columnas Grid) */
.unav-bannerWide {
  width: 100%;
  min-height: var(--unav-bannerMinHeightWide);
  /* REFACTOR: Fallback a Token de Espaciado Grande (48px) */
  padding: var(--unav-bannerPaddingWide, var(--unav-spacing-2xl));
}

.unav-bannerWide .unav-bannerTitle {
  font-size: var(--unav-fontSize200);
}

.unav-bannerWide .unav-bannerText {
  font-size: var(--unav-fontSize125);
}

/* 3. Banner Mini (Grid interior) */
.unav-bannerMini {
  width: 100%;
  height: 100%; /* Estira el banner en grids de Flexbox */
  min-height: var(--unav-bannerMinHeightMini);
  /* REFACTOR: Fallback a Token de Espaciado Medio (32px) */
  padding: var(--unav-bannerPaddingMini, var(--unav-spacing-xl));
}

.unav-bannerMini:hover {
  opacity: 0.95;
}

.unav-bannerMini .unav-bannerContent {
  height: 100%;
  justify-content: center;
}

.unav-bannerMini .unav-bannerTitle {
  font-size: var(--unav-fontSize150);
}

.unav-bannerMini .unav-bannerText {
  font-size: var(--unav-fontSize100);
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  margin-bottom: var(--unav-spacing-lg);
}

/* Integración del Botón Terciario (Enlace Flecha) y Primarios */
.unav-bannerMini .unav-bannerContent > .unav-enlaceFlecha,
.unav-bannerMini .unav-bannerContent > .unav-boton {
  margin-top: auto;
  align-self: flex-start;
}

.unav-bannerMini.unav-alignCenter .unav-bannerContent > .unav-enlaceFlecha,
.unav-bannerMini.unav-alignCenter .unav-bannerContent > .unav-boton {
  align-self: center;
}

/* ==========================================
   COMPONENTE: TABLAS DE DATOS UNAV (OOCSS)
   ========================================== */
/* Envoltorio para permitir scroll horizontal si no se desea apilar */
.unav-tableWrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* REFACTOR: Consumo de Tokens de Espaciado (32px) */
  margin-bottom: var(--unav-spacing-xl);
}

/* Tabla Base */
.unav-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  background-color: var(--unav-tableBg, var(--unav-bg-surface));
}

/* Título de la Tabla (Caption) */
.unav-tableCaption {
  caption-side: top;
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-size: var(--unav-fontSize125);
  font-weight: var(--unav-fontWeightBold);
  color: var(--unav-black-900);
  text-align: left;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px arriba/abajo) */
  padding: var(--unav-spacing-md) 0;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  margin-bottom: var(--unav-spacing-sm);
  border-bottom: 3px solid var(--unav-tableCaptionBorder, var(--unav-rojo-600));
}

/* Celdas (Th y Td) */
.unav-table th,
.unav-table td {
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  padding: var(--unav-spacing-md);
  border-bottom: 1px solid var(--unav-tableBorderColor, var(--unav-grey-200));
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize100);
  line-height: var(--unav-lineHeightNormal);
  color: var(--unav-black-800);
}

/* Cabeceras Superiores (Th) */
.unav-table thead th {
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize075);
  text-transform: uppercase;
  letter-spacing: var(--unav-trackingWide);
  color: var(--unav-tableHeaderColor, var(--unav-black-900));
  background-color: var(--unav-tableHeaderBg, var(--unav-grey-100));
  vertical-align: bottom;
}

/* Cabeceras de Agrupación (Subtítulos en tbody) */
.unav-tableGroupHeader th {
  background-color: var(--unav-grey-100);
  color: var(--unav-black-800);
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-size: var(--unav-fontSize100);
  font-weight: var(--unav-fontWeightBold);
  text-transform: uppercase;
  letter-spacing: var(--unav-trackingWide);
  text-align: left;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px vertical, 16px horizontal) */
  padding: var(--unav-spacing-sm) var(--unav-spacing-md);
  border-bottom: 2px solid var(--unav-grey-300);
}

/* =========================================
   MODIFICADORES DE ESTILO (OOCSS)
   ========================================= */
/* NUEVO MODIFICADOR OOCSS: Bordes verticales internos */
.unav-tableInnerVerticalBorders th:not(:last-child),
.unav-tableInnerVerticalBorders td:not(:last-child) {
  border-right: 1px solid var(--unav-tableBorderColor, var(--unav-grey-200));
}

/* Tabla con todos los bordes */
.unav-tableBorders th,
.unav-tableBorders td {
  border: 1px solid var(--unav-tableBorderColor, var(--unav-grey-200));
}

/* Filas Alternas (Zebra Striping) - Ignora las filas de agrupación */
.unav-tableStriped tbody tr:not(.unav-tableGroupHeader):nth-of-type(odd) {
  background-color: var(--unav-tableStripeBg, var(--unav-grey-200));
}

/* Filas Alternas en pares */
.unav-tableStriped--even tbody tr:not(.unav-tableGroupHeader):nth-of-type(even) {
  background-color: var(--unav-tableStripeBg, var(--unav-grey-200));
}

/* Efecto Hover en filas (Ignora las de agrupación) */
.unav-tableHover tbody tr:not(.unav-tableGroupHeader):hover {
  background-color: var(--unav-tableHoverBg, var(--unav-grey-100));
}

/* =======================================================
   RESPONSIVIDAD: MODO APILADO (Stack)
   ======================================================= */
@media (max-width: 767px) {
  .unav-tableResponsiveStack thead {
    /* Ocultamiento accesible */
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .unav-tableResponsiveStack tr:not(.unav-tableGroupHeader) {
    display: block;
    /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
    margin-bottom: var(--unav-spacing-lg);
    border: 1px solid var(--unav-tableBorderColor, var(--unav-grey-200));
    /* REFACTOR: Consumo de Tokens de Forma (4px) */
    border-radius: var(--unav-radius-md);
    background-color: var(--unav-bg-surface);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
  .unav-tableResponsiveStack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    border-bottom: 1px solid var(--unav-tableBorderColor, var(--unav-grey-100));
    /* REFACTOR: Consumo de Tokens de Espaciado (8px vertical, 16px horizontal) */
    padding: var(--unav-spacing-sm) var(--unav-spacing-md);
  }
  .unav-tableResponsiveStack td:last-child {
    border-bottom: none;
  }
  .unav-tableResponsiveStack td::before {
    content: attr(data-label);
    font-family: var(--unav-fontFamilyPrimaryCondensed);
    font-weight: var(--unav-fontWeightBold);
    font-size: var(--unav-fontSize075);
    text-transform: uppercase;
    color: var(--unav-grey-600);
    /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
    margin-right: var(--unav-spacing-lg);
    text-align: left;
    flex-shrink: 0;
    letter-spacing: 0.5px;
  }
  /* Adaptación específica para cabeceras de agrupación en móvil */
  .unav-tableResponsiveStack .unav-tableGroupHeader {
    display: block;
    background-color: transparent;
    border: none;
    /* REFACTOR: Consumo de Tokens de Espaciado (32px top, 8px bottom) */
    margin-top: var(--unav-spacing-xl);
    margin-bottom: var(--unav-spacing-sm);
  }
  .unav-tableResponsiveStack .unav-tableGroupHeader th {
    display: block;
    text-align: center;
    border: none;
    border-bottom: 2px solid var(--unav-tableCaptionBorder, var(--unav-grey-300));
    /* REFACTOR: Consumo de Tokens de Espaciado (8px top/bottom) */
    padding: var(--unav-spacing-sm) 0;
    background-color: transparent;
  }
}
/* =========================================================
   TEMATIZACIÓN DE TABLAS OOCSS (.unav-tableTheme[Color])
   ========================================================= */
/* Tema Asignaturas */
.unav-tableThemeAsignaturas {
  --unav-tableCaptionBorder: var(--unav-rojo-500);
  --unav-tableHeaderBg: var(--unav-grey-300);
  --unav-tableHeaderColor: var(--unav-black-600);
  --unav-tableStripeBg: var(--unav-grey-200) ;
}

/* Tema Materias */
.unav-tableThemeMaterias {
  --unav-tableBorderColor: var(--unav-black-500);
  --unav-tableCaptionBorder: var(--unav-black-500);
}

.unav-tableThemeMaterias th {
  color: var(--unav-black-500);
  border-bottom: 2px solid var(--unav-black-500);
}

/* Tema Rojo */
.unav-tableThemeRojo {
  --unav-tableCaptionBorder: var(--unav-rojo-600);
  --unav-tableHeaderBg: var(--unav-rojo-100);
  --unav-tableHeaderColor: var(--unav-rojo-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-rojo-100) 30%, transparent);
}

/* Tema Black */
.unav-tableThemeBlack {
  --unav-tableCaptionBorder: var(--unav-black-600);
  --unav-tableHeaderBg: var(--unav-black-100);
  --unav-tableHeaderColor: var(--unav-black-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-black-100) 30%, transparent);
}

/* Tema Grey */
.unav-tableThemeGrey {
  --unav-tableCaptionBorder: var(--unav-grey-600);
  --unav-tableHeaderBg: var(--unav-grey-100);
  --unav-tableHeaderColor: var(--unav-grey-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-grey-100) 30%, transparent);
}

/* Tema Moss */
.unav-tableThemeMoss {
  --unav-tableCaptionBorder: var(--unav-moss-600);
  --unav-tableHeaderBg: var(--unav-moss-100);
  --unav-tableHeaderColor: var(--unav-moss-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-moss-100) 30%, transparent);
}

/* Tema Green Light */
.unav-tableThemeGreenLight {
  --unav-tableCaptionBorder: var(--unav-green-l-600);
  --unav-tableHeaderBg: var(--unav-green-l-100);
  --unav-tableHeaderColor: var(--unav-green-l-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-green-l-100) 30%, transparent);
}

/* Tema Green */
.unav-tableThemeGreen {
  --unav-tableCaptionBorder: var(--unav-green-600);
  --unav-tableHeaderBg: var(--unav-green-100);
  --unav-tableHeaderColor: var(--unav-green-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-green-100) 30%, transparent);
}

/* Tema Teal */
.unav-tableThemeTeal {
  --unav-tableCaptionBorder: var(--unav-teal-600);
  --unav-tableHeaderBg: var(--unav-teal-100);
  --unav-tableHeaderColor: var(--unav-teal-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-teal-100) 30%, transparent);
}

/* Tema Cyan */
.unav-tableThemeCyan {
  --unav-tableCaptionBorder: var(--unav-cyan-600);
  --unav-tableHeaderBg: var(--unav-cyan-100);
  --unav-tableHeaderColor: var(--unav-cyan-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-cyan-100) 30%, transparent);
}

/* Tema Blue Light */
.unav-tableThemeBlueLight {
  --unav-tableCaptionBorder: var(--unav-blue-l-600);
  --unav-tableHeaderBg: var(--unav-blue-l-100);
  --unav-tableHeaderColor: var(--unav-blue-l-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-blue-l-100) 30%, transparent);
}

/* Tema Blue */
.unav-tableThemeBlue {
  --unav-tableCaptionBorder: var(--unav-blue-600);
  --unav-tableHeaderBg: var(--unav-blue-100);
  --unav-tableHeaderColor: var(--unav-blue-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-blue-100) 30%, transparent);
}

/* Tema Blue Dark */
.unav-tableThemeBlueDark {
  --unav-tableCaptionBorder: var(--unav-b-dark-600);
  --unav-tableHeaderBg: var(--unav-b-dark-100);
  --unav-tableHeaderColor: var(--unav-b-dark-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-b-dark-100) 30%, transparent);
}

/* Tema Indigo */
.unav-tableThemeIndigo {
  --unav-tableCaptionBorder: var(--unav-indigo-600);
  --unav-tableHeaderBg: var(--unav-indigo-100);
  --unav-tableHeaderColor: var(--unav-indigo-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-indigo-100) 30%, transparent);
}

/* Tema Violet */
.unav-tableThemeViolet {
  --unav-tableCaptionBorder: var(--unav-violet-600);
  --unav-tableHeaderBg: var(--unav-violet-100);
  --unav-tableHeaderColor: var(--unav-violet-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-violet-100) 30%, transparent);
}

/* Tema Purple */
.unav-tableThemePurple {
  --unav-tableCaptionBorder: var(--unav-purple-600);
  --unav-tableHeaderBg: var(--unav-purple-100);
  --unav-tableHeaderColor: var(--unav-purple-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-purple-100) 30%, transparent);
}

/* Tema Fuchsia */
.unav-tableThemeFuchsia {
  --unav-tableCaptionBorder: var(--unav-fuchsia-600);
  --unav-tableHeaderBg: var(--unav-fuchsia-100);
  --unav-tableHeaderColor: var(--unav-fuchsia-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-fuchsia-100) 30%, transparent);
}

/* Tema Pink */
.unav-tableThemePink {
  --unav-tableCaptionBorder: var(--unav-pink-600);
  --unav-tableHeaderBg: var(--unav-pink-100);
  --unav-tableHeaderColor: var(--unav-pink-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-pink-100) 30%, transparent);
}

/* Tema Rose */
.unav-tableThemeRose {
  --unav-tableCaptionBorder: var(--unav-rose-600);
  --unav-tableHeaderBg: var(--unav-rose-100);
  --unav-tableHeaderColor: var(--unav-rose-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-rose-100) 30%, transparent);
}

/* Tema Orange Dark */
.unav-tableThemeOrangeDark {
  --unav-tableCaptionBorder: var(--unav-o-dark-600);
  --unav-tableHeaderBg: var(--unav-o-dark-100);
  --unav-tableHeaderColor: var(--unav-o-dark-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-o-dark-100) 30%, transparent);
}

/* Tema Orange */
.unav-tableThemeOrange {
  --unav-tableCaptionBorder: var(--unav-orange-600);
  --unav-tableHeaderBg: var(--unav-orange-100);
  --unav-tableHeaderColor: var(--unav-orange-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-orange-100) 30%, transparent);
}

/* Tema Yellow */
.unav-tableThemeYellow {
  --unav-tableCaptionBorder: var(--unav-yellow-600);
  --unav-tableHeaderBg: var(--unav-yellow-100);
  --unav-tableHeaderColor: var(--unav-yellow-900);
  --unav-tableStripeBg: color-mix(in srgb, var(--unav-yellow-100) 30%, transparent);
}

/* ==========================================
   COMPONENTE: GALERÍA DE IMÁGENES UNAV (OOCSS)
   ========================================== */
/* Envoltorio Base para Container Queries */
.unav-galleryWrapper {
  container-type: inline-size;
  container-name: unavGallery;
  width: 100%;
}

/* Contenedor Grid Principal */
.unav-mediaGallery {
  display: grid;
  grid-template-columns: 1fr var(--unav-gallerySidebarWidth, 250px);
  background-color: var(--unav-galleryBg, var(--unav-black-900));
  /* REFACTOR: Consumo de Tokens de Forma (Esquinas rectas estrictas) */
  border-radius: var(--unav-radius-none) !important;
  overflow: hidden;
  box-shadow: var(--unav-cardShadowBase);
  width: 100%;
  aspect-ratio: 16/9;
  min-height: var(--unav-galleryMinHeight, 400px);
}

/* ==========================================
   1. ÁREA VISUALIZADORA (Stage)
   ========================================== */
.unav-galleryStage {
  position: relative;
  background-color: var(--unav-galleryStageBg, var(--unav-black-800));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unav-mainImageWrapper {
  position: absolute;
  inset: 0;
  display: flex; /* Siempre flex para centrar contenido */
  align-items: center;
  justify-content: center;
  /* REFACTOR: Consumo de Tokens de Espaciado (24px default) */
  padding: var(--unav-galleryStagePadding, var(--unav-spacing-lg));
  pointer-events: none; /* Inactivo por defecto */
}

.unav-mainImageWrapper.unav-isActive {
  pointer-events: auto; /* Interactivo solo si está activa */
}

.unav-mainImage {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

/* Pie de Foto */
.unav-imageCaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* REFACTOR: Consumo de Tokens de Espaciado (Top: 32px, Laterales: 24px, Bottom: 16px) */
  padding: var(--unav-spacing-xl) var(--unav-spacing-lg) var(--unav-spacing-md);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: var(--unav-text-inverse);
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize100);
  font-weight: var(--unav-fontWeightRegular);
  pointer-events: none;
}

/* ==========================================
   2. SIDEBAR DE MINIATURAS Y CONTROLES
   ========================================== */
.unav-gallerySidebar {
  background-color: var(--unav-gallerySidebarBg, var(--unav-bg-surface));
  border-left: 1px solid var(--unav-galleryBorderColor, var(--unav-grey-800));
  display: flex;
  flex-direction: column; /* Permite empujar la barra de controles al fondo */
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.unav-thumbGrid {
  flex-grow: 1; /* Ocupa el espacio sobrante empujando los controles al fondo */
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
  /* REFACTOR: Consumo de Tokens de Espaciado (4px default) */
  gap: var(--unav-galleryThumbGap, var(--unav-spacing-xs));
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  padding: var(--unav-spacing-sm);
  align-content: start;
  scrollbar-width: none; /* Oculta scrollbar en Firefox */
}

.unav-thumbGrid::-webkit-scrollbar {
  display: none; /* Oculta scrollbar en Webkit */
}

/* Ítem de Miniatura (Convertido a botón semántico en JS) */
.unav-thumbItem {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--unav-transitionBase), border-color var(--unav-transitionBase);
  border: 2px solid transparent;
  overflow: hidden;
  display: block;
  /* Resets para elemento <button> */
  padding: 0;
  margin: 0;
  background: transparent;
  outline: none; /* Evita el marco nativo del navegador */
}

.unav-thumbItem img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.unav-thumbItem:hover {
  opacity: 1;
}

.unav-thumbItem.unav-isSelected {
  opacity: 1;
  border-color: var(--unav-rojo-600);
}

/* Estilos de la Barra de Controles integrada */
.unav-galleryControlsBar {
  background-color: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  padding: var(--unav-spacing-md);
  flex-shrink: 0;
}

/* =======================================================
   3. LÓGICA RESPONSIVE (Container Queries)
   ======================================================= */
@container unavGallery (max-width: 850px) {
  .unav-mediaGallery {
    grid-template-columns: 1fr 200px;
  }
  .unav-thumbGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@container unavGallery (max-width: 550px) {
  .unav-mediaGallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto 120px;
    aspect-ratio: auto;
    height: 500px;
  }
  .unav-galleryStage {
    height: 100%;
  }
  .unav-gallerySidebar {
    border-left: none;
    border-top: 1px solid var(--unav-galleryBorderColor, var(--unav-grey-800));
    flex-direction: row; /* En móvil, el sidebar pasa a horizontal */
  }
  .unav-thumbGrid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    height: 100%;
    align-items: center;
    /* REFACTOR: Consumo de Tokens de Espaciado (4px default) */
    gap: var(--unav-galleryThumbGap, var(--unav-spacing-xs));
    scroll-snap-type: x mandatory;
    min-width: 0; /* Crucial para permitir scroll horizontal interno en flexbox */
  }
  .unav-thumbItem {
    flex: 0 0 var(--unav-galleryThumbSizeMobile, 80px);
    width: var(--unav-galleryThumbSizeMobile, 80px);
    height: var(--unav-galleryThumbSizeMobile, 80px);
    scroll-snap-align: center;
  }
  .unav-galleryControlsBar {
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }
}
/* ==========================================
   COMPONENTE: GALERÍA DE VÍDEOS UNAV (OOCSS)
   ========================================== */
/* Envoltorio para Container Queries */
.unav-videoGalleryWrapper {
  container-type: inline-size;
  container-name: unavVideoGallery;
  width: 100%;
  background-color: var(--unav-videoGalleryBg, var(--unav-bg-surface));
  border: 1px solid var(--unav-videoGalleryBorderColor, var(--unav-grey-200));
  position: relative;
  /* REFACTOR: Consumo de Tokens de Forma (Esquinas rectas estrictas) */
  border-radius: var(--unav-radius-none) !important;
}

/* Contenedor Flex Principal */
.unav-videoMediaContainer {
  position: relative;
  padding-right: var(--unav-videoSidebarWidth, 320px);
  background-color: var(--unav-videoGalleryStageBg, var(--unav-black-900));
}

/* Área Visualizadora (Stage 16:9) */
.unav-videoStage {
  width: 100%;
  position: relative;
  aspect-ratio: 16/9;
  background-color: var(--unav-black-900);
}

.unav-videoFluid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  border: none;
  display: block;
}

/* Sidebar de la Playlist (Estructura Flex Vertical por defecto) */
.unav-videoPlaylistSidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--unav-videoSidebarWidth, 320px);
  background-color: var(--unav-videoGalleryBg, var(--unav-bg-surface));
  display: flex;
  flex-direction: column; /* Organiza: Botón Arriba -> Miniaturas -> Botón Abajo */
  border-left: 1px solid var(--unav-videoGalleryBorderColor, var(--unav-grey-200));
  overflow: hidden;
}

/* Contenedores de los Botones (Fijos en los extremos) */
.unav-videoControlNav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--unav-grey-100);
  flex-shrink: 0; /* Impide que los botones se encojan */
  z-index: 10;
}

/* REFACTOR: Consumo de Tokens de Espaciado (8px) */
.unav-videoControlNav.unav-navTop {
  border-bottom: 1px solid var(--unav-grey-200);
  padding: var(--unav-spacing-sm);
}

.unav-videoControlNav.unav-navBottom {
  border-top: 1px solid var(--unav-grey-200);
  padding: var(--unav-spacing-sm);
}

/* Lista de miniaturas (Scrollable) */
.unav-videoPlaylistItems {
  flex-grow: 1; /* Ocupa todo el espacio entre los botones */
  min-height: 0; /* Truco CSS vital para que el overflow funcione en Flexbox */
  overflow-y: auto;
  scrollbar-width: none; /* Oculta scrollbar en Firefox */
  display: flex;
  flex-direction: column;
}

.unav-videoPlaylistItems::-webkit-scrollbar {
  display: none; /* Oculta scrollbar en Chrome/Safari */
}

/* Ítem de Vídeo en Playlist */
.unav-videoItem {
  display: flex;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  padding: var(--unav-spacing-md);
  background-color: transparent;
  border: none;
  outline: none; /* Reseteo del outline nativo */
  border-bottom: 1px solid var(--unav-videoGalleryBorderColor, var(--unav-grey-200));
  cursor: pointer;
  text-align: left;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  gap: var(--unav-spacing-md);
  transition: background-color var(--unav-transitionBase);
  width: 100%;
  position: relative;
}

.unav-videoItem:hover {
  background-color: var(--unav-videoGalleryHoverBg, var(--unav-grey-100));
}

.unav-videoItem.unav-isActive {
  background-color: var(--unav-videoGalleryActiveBg, var(--unav-rojo-100));
  box-shadow: inset 4px 0 0 0 var(--unav-videoGalleryActiveBorder, var(--unav-rojo-600));
}

/* Miniatura del Vídeo */
.unav-videoThumb {
  position: relative;
  width: var(--unav-videoThumbWidth, 120px);
  flex-shrink: 0;
  aspect-ratio: 16/9;
  background-color: var(--unav-black-800);
  /* REFACTOR: Consumo de Tokens de Forma (4px) */
  border-radius: var(--unav-radius-md);
}

.unav-videoThumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity var(--unav-transitionBase);
}

.unav-videoItem:hover .unav-videoThumb img,
.unav-videoItem.unav-isActive .unav-videoThumb img {
  opacity: 1;
}

/* Icono Play (Motion Tokens) */
.unav-videoPlayIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: var(--unav-text-inverse);
  opacity: 0.8;
  z-index: 5;
  transition: transform var(--unav-durationNormal, 250ms) var(--unav-easingStandard, ease), color var(--unav-durationNormal, 250ms) var(--unav-easingStandard, ease), opacity var(--unav-durationNormal, 250ms) var(--unav-easingStandard, ease);
}

.unav-videoItem:hover .unav-videoPlayIcon {
  transform: translate(-50%, -50%) scale(1.2);
  color: var(--unav-rojo-500);
  opacity: 1;
}

.unav-videoItem.unav-isActive .unav-videoPlayIcon {
  color: var(--unav-rojo-600);
  opacity: 1;
}

/* Textos de la Playlist */
.unav-videoItemInfo {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Line Clamping (Protección contra textos largos) */
.unav-videoItemTitle {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize075, 0.875rem);
  font-weight: var(--unav-fontWeightBold);
  color: var(--unav-black-800);
  line-height: 1.2;
  display: -webkit-box;
  /* Truncamiento a 2 líneas compatible con compiladores SCSS / Autoprefixer */
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Propiedad estándar emergente (Evita el error del Linter) */
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* REFACTOR: Consumo de Tokens de Espaciado (4px) */
  margin-bottom: var(--unav-spacing-xs);
}

.unav-videoItemMeta {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: 0.75rem;
  color: var(--unav-grey-600);
}

/* Modificadores de Visibilidad Sincronizada */
.unav-btnVertical {
  display: inline-flex !important;
}

.unav-btnHorizontal {
  display: none !important;
}

/* =======================================================
   RESPONSIVIDAD POR CONTENEDOR (Container Queries)
   ======================================================= */
@container unavVideoGallery (max-width: 850px) {
  .unav-videoMediaContainer {
    padding-right: var(--unav-videoSidebarWidthTablet, 280px);
  }
  .unav-videoPlaylistSidebar {
    width: var(--unav-videoSidebarWidthTablet, 280px);
  }
  .unav-videoThumb {
    width: var(--unav-videoThumbWidthTablet, 100px);
  }
  /* REFACTOR: Consumo de Tokens de Espaciado (8px o 16px según densidad) */
  .unav-videoItem {
    padding: var(--unav-spacing-sm);
  }
}
@container unavVideoGallery (max-width: 600px) {
  .unav-videoMediaContainer {
    padding-right: 0;
    display: flex;
    flex-direction: column;
  }
  .unav-videoPlaylistSidebar {
    position: relative;
    width: 100%;
    border-left: none;
    border-top: 1px solid var(--unav-videoGalleryBorderColor, var(--unav-grey-200));
    flex-direction: row; /* Cambio mágico a Horizontal */
  }
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) en móvil */
  .unav-videoControlNav.unav-navTop {
    border-bottom: none;
    border-right: 1px solid var(--unav-grey-200);
    padding: var(--unav-spacing-sm);
  }
  .unav-videoControlNav.unav-navBottom {
    border-top: none;
    border-left: 1px solid var(--unav-grey-200);
    padding: var(--unav-spacing-sm);
  }
  .unav-videoPlaylistItems {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0; /* Truco vital para scroll horizontal en Flexbox */
    scroll-snap-type: x mandatory;
  }
  .unav-videoItem {
    width: var(--unav-videoItemWidthMobile, 200px);
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid var(--unav-videoGalleryBorderColor, var(--unav-grey-200));
    scroll-snap-align: start;
    flex-direction: column;
  }
  .unav-videoThumb {
    width: 100%;
  }
  .unav-videoItemInfo {
    display: none;
  }
  .unav-videoItem.unav-isActive {
    box-shadow: inset 0 -4px 0 0 var(--unav-videoGalleryActiveBorder, var(--unav-rojo-600));
  }
  /* Inversión Mágica de Controles */
  .unav-btnVertical {
    display: none !important;
  }
  .unav-btnHorizontal {
    display: inline-flex !important;
  }
}
/* ==========================================
   COMPONENTE: PANEL SOLICITUD UNAV (OOCSS)
   ========================================== */
/* Capa de Oscurecimiento (Overlay) */
.unav-panelOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--unav-panelOverlayBg);
  z-index: var(--unav-panelZIndexOverlay);
  opacity: 0;
  visibility: hidden;
  /* Consumo de Motion Tokens para la aparición */
  transition: opacity var(--unav-durationNormal, 250ms) var(--unav-easingStandard, ease), visibility var(--unav-durationNormal, 250ms) var(--unav-easingStandard, ease);
}

.unav-panelOverlay.unav-isActive {
  opacity: 1;
  visibility: visible;
}

/* Contenedor del Panel Lateral */
.unav-sidePanel {
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%);
  width: 100%;
  max-width: var(--unav-panelWidth);
  height: 100vh;
  background-color: var(--unav-cardBgBase, var(--unav-bg-surface));
  z-index: var(--unav-panelZIndex);
  box-shadow: var(--unav-panelShadow);
  display: flex;
  flex-direction: column;
  /* Consumo de Motion Tokens para el deslizamiento estructural */
  transition: transform var(--unav-durationSlow, 600ms) var(--unav-easingDecel, ease-out);
}

.unav-sidePanel.unav-isOpen {
  transform: translateX(0);
}

/* Botón Flotante (Sticky) */
.unav-stickyButton {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%);
  --unav-botonBg: var(--unav-rojo-500);
  background-color: var(--unav-botonBg);
  color: #ffffff;
  --unav-botonHoverBg: var(--unav-rojo-600);
  border: none;
  outline: none; /* Reseteo del outline nativo para usar uno a medida */
  /* REFACTOR: Consumo de Tokens de Forma (Esquinas rectas estrictas) */
  border-radius: var(--unav-radius-none) !important;
  padding: var(--unav-panelStickyBtnPadding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--unav-panelStickyBtnGap);
  cursor: pointer;
  box-shadow: var(--unav-cardShadowBase);
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize075); /* ~12px */
  letter-spacing: var(--unav-trackingWide);
  text-transform: uppercase;
  transition: background-color var(--unav-durationNormal, 250ms) var(--unav-easingStandard, ease);
}

/* =========================================
   ACCESIBILIDAD: Foco asimétrico a medida
   ========================================= */
.unav-stickyButton::before {
  content: "";
  position: absolute;
  /* REFACTOR: Consumo de Tokens de Espaciado para el offset óptico del foco (4px) */
  top: calc(var(--unav-spacing-xs) * -1);
  bottom: calc(var(--unav-spacing-xs) * -1);
  left: calc(var(--unav-spacing-xs) * -1);
  right: 0; /* A ras del panel */
  border: 2px solid transparent;
  border-right: none; /* Omitimos la línea derecha para que no se superponga al panel */
  pointer-events: none; /* Evita que bloquee el clic */
}

.unav-stickyButton:hover {
  background-color: var(--unav-botonHoverBg);
}

/* Elementos del Botón */
.unav-buttonText {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.unav-iconArrow {
  display: flex;
  align-items: center;
  transition: transform var(--unav-durationNormal, 250ms) var(--unav-easingStandard, ease);
}

.unav-iconArrow svg {
  fill: currentColor;
}

.unav-sidePanel.unav-isOpen .unav-iconArrow {
  transform: rotate(180deg);
}

/* Cuerpo del Panel (Iframe) */
.unav-panelBody {
  flex-grow: 1;
  overflow: hidden;
}

.unav-iframeContainer {
  width: 100%;
  height: 100%;
  border: none;
}

/* =======================================================
   COMPORTAMIENTO RESPONSIVE (MÓVIL)
   ======================================================= */
@media (max-width: 767px) {
  .unav-sidePanel {
    max-width: 100%;
    height: 100dvh;
    transform: translateY(calc(100% - var(--unav-panelStickyBtnMobileHeight)));
  }
  .unav-sidePanel.unav-isOpen {
    transform: translateY(0);
  }
  .unav-stickyButton {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: var(--unav-panelStickyBtnMobileHeight);
    flex-direction: row;
    justify-content: center;
    padding: 0;
  }
  /* Adaptación del foco a medida para la geometría de móvil */
  .unav-stickyButton::before {
    /* REFACTOR: Consumo de Tokens de Espaciado (4px) en versión móvil */
    top: calc(var(--unav-spacing-xs) * -1);
    left: 0;
    right: 0;
    bottom: 0; /* A ras del panel inferior */
    border: 2px solid transparent;
    border-bottom: none; /* En móvil omitimos la línea inferior */
    border-right: 2px solid transparent; /* Restauramos el borde derecho */
  }
  .unav-buttonText {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: var(--unav-fontSize100);
  }
  .unav-iconArrow {
    transform: rotate(90deg);
  }
  .unav-sidePanel.unav-isOpen .unav-iconArrow {
    transform: rotate(-90deg);
  }
}
/* ==========================================
   COMPONENTE: CIFRAS DINÁMICAS UNAV (OOCSS)
   ========================================== */
/* Estructura Base */
.unav-countersSection {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--unav-text-inverse); /* El color de texto siempre es blanco al ir sobre un overlay oscuro */
  min-height: var(--unav-counterMinHeightBase);
  width: 100%;
  /* REFACTOR: Consumo de Tokens de Forma (Esquinas vivas obligatorias) */
  border-radius: var(--unav-radius-none) !important;
}

/* Modificador de Altura */
.unav-countersSmall {
  min-height: var(--unav-counterMinHeightSmall);
}

/* Capa de Imagen */
.unav-counterBgImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  z-index: 1;
}

/* Capa de Contraste (Overlay) */
.unav-counterOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--unav-counterOverlayColor);
  z-index: 2;
}

/* Contenedor del contenido */
.unav-countersContent {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Elemento Individual (Delegamos animación a unav-movimiento.css) */
.unav-counterItem {
  text-align: center;
}

/* Tipografía Interna por Tokens */
.unav-counterTop {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize075);
  letter-spacing: var(--unav-trackingWide);
  text-transform: uppercase;
  font-weight: var(--unav-fontWeightBold);
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  margin-bottom: var(--unav-spacing-sm);
  display: block;
}

.unav-counterValue {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize300); /* 3rem (~48px) */
  line-height: 1;
  font-weight: var(--unav-fontWeightBold);
  display: block;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  margin-bottom: var(--unav-spacing-sm);
}

.unav-counterBottom {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize100);
  opacity: 0.9;
  display: block;
}

/* Modificador tipográfico para contenedores pequeños */
.unav-countersSmall .unav-counterValue {
  font-size: var(--unav-fontSize250); /* 2.5rem (~40px) */
}

/* ==========================================
   COMPONENTE: MENÚ DE ANCLAS UNAV (OOCSS)
   ========================================== */
/* Contenedor Sticky */
.unav-menuAnclasWrapper {
  top: var(--unav-menuAnclasTopOffset);
  z-index: 90;
}

/* Cabecera del Menú */
.unav-menuAnclasHeader {
  /* REFACTOR: Consumo de Tokens de Espaciado con fallback (24px) */
  margin-bottom: var(--unav-menuAnclasHeaderMargin, var(--unav-spacing-lg));
}

.unav-menuAnclasSubtitle {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize075);
  color: var(--unav-menuAnclasSubtitleColor);
  display: block;
  /* REFACTOR: Consumo de Tokens de Espaciado (4px) */
  margin-bottom: var(--unav-spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--unav-fontWeightBold);
}

.unav-menuAnclasTitle {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize125);
  font-weight: var(--unav-fontWeightBold);
  color: var(--unav-menuAnclasTitleColor);
  margin: 0;
  line-height: 1.2;
}

/* ==========================================
   ESTADO ACTIVO (Integración ScrollSpy)
   ========================================== */
/* Cuando el JS detecta la sección, aplica .unav-isActive.
   Consumimos los tokens de movimiento para que el cambio de color 
   y el subrayado sean fluidos.
*/
.unav-bloqueEnlace.unav-isActive {
  background-color: var(--unav-bloqueEnlaceHoverBg);
  color: var(--unav-bloqueEnlaceHoverText);
  transition: var(--unav-menuAnclasTransition);
}

.unav-bloqueEnlace.unav-isActive .unav-bloqueEnlaceText {
  font-weight: var(--unav-fontWeightBold);
}

.unav-bloqueEnlace.unav-isActive::after {
  opacity: 1;
}

/* ==========================================
   COMPONENTE: FICHA PERSONA UNAV (OOCSS)
   ========================================== */
.unav-personCard {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--unav-bg-surface);
  box-sizing: border-box;
  /* REFACTOR: Consumo de Tokens de Espaciado (16px default) */
  padding: var(--unav-personCardPadding, var(--unav-spacing-md));
  gap: var(--unav-personCardGap, var(--unav-spacing-md));
  box-shadow: var(--unav-personCardShadow);
  border: 1px solid var(--unav-grey-200);
  /* REFACTOR: Consumo de Tokens de Forma (16px default) */
  border-radius: var(--unav-personCardRadius, var(--unav-radius-xl));
  height: 100%;
  font-family: var(--unav-fontFamilyPrimary); /* Roboto global */
}

/* Variante: Sin marco ni sombra */
.unav-personCard.unav-cardNoBorder {
  border: none;
  box-shadow: none;
  background-color: transparent;
  padding: var(--unav-personCardPadding, var(--unav-spacing-md));
}

/* =========================================
   ESTRUCTURA DE CAMPOS
   ========================================= */
/* IMAGEN: Siempre Cuadrada */
.unav-imageWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.unav-personImage {
  width: 100%;
  aspect-ratio: 1/1; /* Cuadrado estricto (no modificar) */
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: var(--unav-radius-sm, 4px);
  display: block;
}

/* TEXTOS Y TIPOGRAFÍAS */
.unav-personName {
  margin: 0;
  /* Especificación: Roboto Light 22px */
  font-weight: 300; /* Light */
  font-size: 1.375rem; /* 22px */
  color: var(--unav-black-900);
  line-height: 1.2;
}

.unav-personRole {
  margin: 0;
  /* Especificación: Roboto Black 18px */
  font-weight: 900; /* Black */
  font-size: 1.125rem; /* 18px */
  color: var(--unav-rojo-500); /* Acento corporativo */
  line-height: 1.2;
}

.unav-personAddress,
.unav-personPhones {
  margin: 0;
  /* Especificación: Roboto Regular 18px */
  font-weight: 400; /* Regular */
  font-size: 1.125rem; /* 18px */
  color: var(--unav-grey-700);
  line-height: 1.5;
}

/* Detalle interno para múltiples teléfonos */
.unav-personPhones span {
  display: block; /* Cada teléfono en una línea si hay varios */
}

.unav-personEmail {
  margin: 0;
  /* Especificación: Roboto Black 18px */
  font-weight: 900; /* Black */
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
}

.unav-personEmail a {
  color: var(--unav-black-800);
  text-decoration: none;
}

.unav-personEmail a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Áreas de Acción (Botones y Enlaces) */
.unav-actionContainer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unav-spacing-sm);
  width: 100%;
  align-items: center;
}

.unav-linkContainer {
  /* Contenedor separado para el enlace de flecha final */
  width: 100%;
}

/* =======================================================
   VARIANTES DE ORDENACIÓN DINÁMICA (Flexbox Order)
   ======================================================= */
/* VARIANTE A: FICHA COMPLETA VERTICAL (.unav-layoutPersona)
   Orden: foto, nombre, puesto, dirección, telefono, botones secundarios, email, botón flecha enlace */
.unav-layoutPersona .unav-imageWrapper {
  order: 1;
  margin-bottom: var(--unav-spacing-sm);
}

.unav-layoutPersona .unav-personName {
  order: 2;
}

.unav-layoutPersona .unav-personRole {
  order: 3;
}

.unav-layoutPersona .unav-personAddress {
  order: 4;
}

.unav-layoutPersona .unav-personPhones {
  order: 5;
}

.unav-layoutPersona .unav-actionContainer {
  order: 6;
  margin-top: var(--unav-spacing-sm);
  margin-bottom: var(--unav-spacing-xs);
}

.unav-layoutPersona .unav-personEmail {
  order: 7;
}

.unav-layoutPersona .unav-linkContainer {
  order: 8;
  margin-top: var(--unav-spacing-md);
}

/* Ocultar elementos no necesarios por si vienen en el HTML */
.unav-layoutPersona .unav-personDetails {
  display: none;
}

/* VARIANTE B: SOLO CONTACTO (.unav-layoutContacto)
   Orden: email, dirección, teléfonos, flecha enlace */
.unav-layoutContacto .unav-personEmail {
  order: 1;
}

.unav-layoutContacto .unav-personAddress {
  order: 2;
  margin-top: var(--unav-spacing-sm);
}

.unav-layoutContacto .unav-personPhones {
  order: 3;
}

.unav-layoutContacto .unav-linkContainer {
  order: 4;
  margin-top: var(--unav-spacing-md);
}

/* Ocultar elementos específicos de persona si se usa este layout */
.unav-layoutContacto .unav-imageWrapper,
.unav-layoutContacto .unav-personName,
.unav-layoutContacto .unav-personRole,
.unav-layoutContacto .unav-actionContainer {
  display: none !important;
}

/* VARIANTE C: DIRECTIVO / SIN FOTO (.unav-layoutDirectivo)
   Orden: nombre, puesto, email, dirección, teléfonos, flecha enlace */
.unav-layoutDirectivo .unav-personName {
  order: 1;
}

.unav-layoutDirectivo .unav-personRole {
  order: 2;
  margin-bottom: var(--unav-spacing-sm);
}

.unav-layoutDirectivo .unav-personEmail {
  order: 3;
  margin-bottom: var(--unav-spacing-sm);
}

.unav-layoutDirectivo .unav-personEmail a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.unav-layoutDirectivo .unav-personAddress {
  order: 4;
  margin-bottom: var(--unav-spacing-sm);
}

.unav-layoutDirectivo .unav-personPhones {
  order: 5;
}

.unav-layoutDirectivo .unav-linkContainer {
  order: 6;
  margin-top: var(--unav-spacing-md);
}

/* Ocultar elementos específicos no requeridos */
.unav-layoutDirectivo .unav-actionContainer,
.unav-layoutDirectivo .unav-imageWrapper {
  display: none !important;
}

/* VARIANTE E: PERFIL CONTACTO DESTACADO (.unav-layoutPerfilContacto)
   Orden: nombre, email, foto, dirección, teléfonos, flecha enlace */
.unav-layoutPerfilContacto .unav-personName {
  order: 1;
  margin-bottom: var(--unav-spacing-xs);
}

.unav-layoutPerfilContacto .unav-personEmail {
  order: 2;
  margin-bottom: var(--unav-spacing-sm);
}

.unav-layoutPerfilContacto .unav-personEmail a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.unav-layoutPerfilContacto .unav-imageWrapper {
  order: 3;
  margin-bottom: var(--unav-spacing-md);
}

.unav-layoutPerfilContacto .unav-personAddress {
  order: 4;
  margin-bottom: var(--unav-spacing-sm);
}

.unav-layoutPerfilContacto .unav-personPhones {
  order: 5;
}

.unav-layoutPerfilContacto .unav-linkContainer {
  order: 6;
  margin-top: var(--unav-spacing-md);
}

/* Ocultar elementos específicos no requeridos en esta variante */
.unav-layoutPerfilContacto .unav-actionContainer,
.unav-layoutPerfilContacto .unav-personRole {
  display: none !important;
}

/* ==========================================
   COMPONENTE: TARJETA DE EVENTO UNAV (OOCSS)
   ========================================== */
/* Enlace contenedor */
.unav-eventLink {
  text-decoration: none !important;
  color: inherit;
  display: block;
  height: 100%;
  outline: none;
}

/* Tarjeta Estructural */
.unav-eventCard {
  background-color: var(--unav-cardBgBase, var(--unav-bg-surface));
  border: 1px solid var(--unav-eventCardBorder);
  display: flex;
  flex-direction: column;
  height: 100%;
  /* REFACTOR: Fallback de Token de Forma (4px) */
  border-radius: var(--unav-eventCardRadius, var(--unav-radius-md));
  overflow: hidden;
}

/* Bloque de Imagen */
.unav-eventImageWrapper {
  width: 100%;
  height: var(--unav-eventImageHeight);
  margin: 0;
  overflow: hidden;
  background-color: var(--unav-grey-100);
  position: relative;
}

.unav-eventImageWrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

/* Cuerpo de la Tarjeta */
.unav-eventBody {
  /* REFACTOR: Consumo de Tokens de Espaciado (16px default) */
  padding: var(--unav-eventCardPadding, var(--unav-spacing-md));
  flex-grow: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Grupo Fecha y Etiqueta */
.unav-eventDateGroup {
  display: flex;
  align-items: center;
  justify-content: center;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  gap: var(--unav-spacing-sm);
  /* REFACTOR: Consumo de Tokens de Espaciado (4px) */
  margin-bottom: var(--unav-spacing-xs);
}

/* FECHA: Bold y Condensed (1.25rem) */
.unav-eventDate {
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize125);
  margin: 0;
  color: var(--unav-black-800);
  text-transform: uppercase;
}

/* HORA: 1rem Regular */
.unav-eventTime {
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightRegular);
  font-size: var(--unav-fontSize100);
  margin: 0;
  color: var(--unav-grey-700);
}

/* TÍTULO: Light y Grande (1.50rem) */
.unav-eventTitle {
  /* Consumo de Tokens de Espaciado (24px) */
  margin-top: var(--unav-spacing-lg);
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize125);
  font-weight: var(--unav-fontWeightRegular);
  color: var(--unav-black-900);
  margin-bottom: var(--unav-spacing-0);
  /* Configuración del subrayado invisible por defecto */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: var(--unav-spacing-xs);
  text-decoration-thickness: 1px;
  /* Transición suave para color consumiendo los Motion Tokens */
  transition: color var(--unav-durationNormal) var(--unav-easingStandard), text-decoration-color var(--unav-durationNormal) var(--unav-easingStandard);
}

/* EFECTO HOY: Subrayado y color al posarse sobre la tarjeta */
.unav-eventLink:hover .unav-eventTitle {
  color: var(--unav-rojo-500);
  text-decoration-color: var(--unav-rojo-500);
}

/* Localización Base */
.unav-eventLocation {
  /* REFACTOR: Consumo de Tokens de Espaciado (16px) */
  padding: var(--unav-spacing-md);
  background-color: var(--unav-grey-100);
  border-top: 1px solid var(--unav-eventCardBorder);
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize075);
  color: var(--unav-grey-700);
  display: flex;
  align-items: center;
  justify-content: center;
  /* REFACTOR: Consumo de Tokens de Espaciado (4px) */
  gap: var(--unav-spacing-xs);
}

.unav-eventLocation i {
  font-size: var(--unav-fontSize125);
  color: var(--unav-grey-400);
  flex-shrink: 0;
}

/* ==========================================
   COMPONENTE: TARJETA DE NOTICIA UNAV (OOCSS)
   ========================================== */
.unav-newsCard {
  border: none;
  background-color: transparent;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* La animación de entrada se delega a unav-movimiento.css (.unav-efectoEntradaOculto) */
}

/* Contenedor de Imagen (16:10 forzado) */
.unav-newsImageWrapper {
  position: relative;
  overflow: hidden;
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  margin-bottom: var(--unav-spacing-lg);
  aspect-ratio: var(--unav-newsImageRatio);
  /* REFACTOR: Consumo de Tokens de Forma (Esquinas vivas estrictas por sistema) */
  border-radius: var(--unav-radius-none) !important;
  /* La animación de zoom se delega inyectando .unav-efectoZoomImagen */
}

.unav-newsImage {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

/* Metadatos (Fecha) */
.unav-newsDate {
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize075); /* ~12px */
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  margin-bottom: var(--unav-spacing-sm);
  text-transform: uppercase;
  color: var(--unav-newsDateColor);
  letter-spacing: 0.5px;
}

/* Título de la Noticia */
.unav-newsTitle {
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize125); /* ~20px */
  font-weight: var(--unav-fontWeightRegular);
  line-height: var(--unav-newsTitleLineHeight);
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  margin-bottom: var(--unav-spacing-lg);
  flex-grow: 1; /* Empuja el enlace (.unav-enlaceFlecha) hacia la base de la tarjeta */
}

.unav-newsTitle a {
  color: var(--unav-newsTitleColor);
  text-decoration: none;
  transition: color var(--unav-transitionBase), -webkit-text-decoration var(--unav-transitionBase);
  transition: color var(--unav-transitionBase), text-decoration var(--unav-transitionBase);
  transition: color var(--unav-transitionBase), text-decoration var(--unav-transitionBase), -webkit-text-decoration var(--unav-transitionBase);
  outline: none; /* Reseteo del outline nativo */
}

.unav-newsTitle a:hover {
  color: var(--unav-rojo-500);
  text-decoration: underline;
  /* REFACTOR: Consumo de Tokens de Espaciado (4px) */
  text-underline-offset: var(--unav-spacing-xs);
}

/* ==========================================
    COMPONENTE: LISTA DE NOTICIAS (REFINADO)
    ========================================== */
.unav-newsListItem {
  /* Separador inferior oscuro basado en tokens UNAV */
  border-bottom: 1px solid var(--unav-black-800);
  /* REFACTOR: Consumo de Tokens de Espaciado (32px) */
  padding-bottom: var(--unav-spacing-xl);
  margin-bottom: var(--unav-spacing-xl);
  display: flex;
  flex-direction: column;
}

.unav-newsListItem:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Ajuste de imagen para formato lista */
@media (min-width: 768px) {
  .unav-newsListItem .unav-newsImageWrapper {
    margin-bottom: 0;
    height: 100%;
  }
}
/* Formato de fecha específico solicitado: 15 Abr. 2026 */
.unav-newsListItem .unav-newsDate {
  color: var(--unav-grey-600);
  font-family: var(--unav-fontFamilyPrimary);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize075);
  text-transform: none; /* Se respeta el formato mixto Solicitado */
  letter-spacing: 0.5px;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) */
  margin-bottom: var(--unav-spacing-sm);
}

.unav-newsListItem .unav-newsTitle {
  margin-bottom: 0;
  font-size: var(--unav-fontSize125); /* Tamaño optimizado para lectura en lista */
}

/* ==========================================
   COMPONENTE ESPECÍFICO: NOTICIA EDITORIAL
   ========================================== */
.unav-noticiaEditorial {
  background-color: var(--unav-bg-surface);
  padding-top: var(--unav-spacing-sm);
  padding-bottom: var(--unav-spacing-sm);
}

/* Contenedor máscara para cada línea */
.unav-noticiaEditorial-mask {
  display: block;
  overflow: hidden;
  line-height: 1.15;
  /* Consumo de token para proteger colas de letras como la 'p' o la 'q' */
  padding-bottom: var(--unav-spacing-xs);
}

/* El texto animado (Refinado para efecto editorial suave) */
.unav-noticiaEditorial-revealText {
  display: inline-block;
  color: var(--unav-black-800);
  /* Partimos de una distancia corta y sutil usando el token de entrada del DS */
  transform: translateY(var(--unav-translateEntranceY));
  opacity: 0;
  /* Usamos Decel (ease-out) para un frenado elegante al llegar a su sitio */
  animation: unavRevealSmooth var(--unav-durationSlower) var(--unav-easingDecel) forwards;
}

/* Keyframes fluidos y precisos */
@keyframes unavRevealSmooth {
  0% {
    transform: translateY(var(--unav-translateEntranceY));
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.unav-noticiaEditorial-title {
  font-size: var(--unav-fontSize200);
  margin: 0;
}

.unav-noticiaEditorial-imageWrapper {
  width: 100%;
  border-radius: var(--unav-radius-none);
  overflow: hidden;
  margin-bottom: var(--unav-spacing-xs);
}

.unav-noticiaEditorial-imageWrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.unav-pullquote {
  border-left: 4px solid var(--unav-rojo-500);
  padding-left: var(--unav-spacing-lg);
  font-family: var(--unav-fontFamilySecondaryPlayfair);
  font-size: var(--unav-fontSize200);
  line-height: var(--unav-lineHeightTight);
  margin: var(--unav-spacing-xl) 0;
  color: var(--unav-black-800);
  font-style: italic;
}

/* ==========================================
   CONTENEDOR DE ICONOS DE COMPARTIR (GLOBAL)
   ========================================== */
.unav-shareIconsGroup {
  display: flex;
  align-items: center;
  /* Consumo del token oficial de espaciado (8px) para separar los botones */
  gap: var(--unav-spacing-sm);
  flex-wrap: wrap;
}

/* ==========================================
   REFACTOR MÓVIL (Acordeón a Sticky Bar)
   ========================================== */
@media (max-width: 767.98px) {
  .unav-noticia-CaptionMobile {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
  }
  .unav-noticia-CaptionMobile-author {
    text-align: left !important;
    margin-top: 2px;
  }
  /* MÓVIL: Barra de compartir fija blindada contra dispositivos físicos */
  .unav-shareStickyMobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* APLICAMOS EL GRIS SUAVE SOLICITADO */
    background-color: var(--unav-grey-100) !important;
    border-top: 1px solid var(--unav-grey-300) !important;
    /* PROTECCIÓN FÍSICA: Respetamos la barra de navegación táctil del móvil (Notch/Gestures) */
    padding: var(--unav-spacing-sm) var(--unav-spacing-md) calc(var(--unav-spacing-sm) + env(safe-area-inset-bottom, 0px)) !important;
    /* ELEVACIÓN: Usamos nivel Overlay para sobreescribir cualquier stacking context de Bootstrap */
    z-index: var(--unav-zIndex-overlay) !important;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
    margin: 0 !important;
    /* ACELERACIÓN HARDWARE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  .unav-shareStickyMobile .unav-accordionHeader {
    display: none !important;
  }
  .unav-shareStickyMobile .unav-accordionPanel {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    background-color: transparent !important;
  }
  .unav-shareStickyMobile .unav-accordionGroup,
  .unav-shareStickyMobile .unav-accordionItem {
    border: none;
    width: 100%;
  }
  /* Hacemos que el interior albergue la etiqueta y los iconos a los lados */
  .unav-shareStickyMobile .unav-accordionInner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 !important;
  }
  /* NUEVO: Etiqueta descriptiva para móvil */
  .unav-shareMobileLabel {
    font-family: var(--unav-fontFamilyPrimaryCondensed);
    font-weight: var(--unav-fontWeightBold);
    font-size: var(--unav-fontSize085);
    color: var(--unav-black-800);
    text-transform: uppercase;
    letter-spacing: var(--unav-trackingWide);
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* NUEVO: Contenedor fluido para los botones en caso de desbordamiento */
  .unav-shareMobileIcons {
    display: flex;
    gap: var(--unav-spacing-sm);
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .unav-shareMobileIcons::-webkit-scrollbar {
    display: none;
  }
  /* Modificador móvil: Evita el salto de línea y permite scroll horizontal */
  .unav-shareIconsGroup {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .unav-shareIconsGroup::-webkit-scrollbar {
    display: none;
  }
  /* Damos margen base para que el texto no quede sepultado por la barra flotante */
  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}
/* Configuraciones para escritorio */
@media (min-width: 768px) {
  .unav-noticiaEditorial-title {
    font-size: var(--unav-fontSize300);
  }
  .unav-noticiaEditorial-imageWrapper img {
    max-height: 600px;
  }
  .unav-shareStickyMobile .unav-accordionInner {
    display: inherit;
  }
}
/* 6. UTILITIES / TRUMPS (Mayor especificidad) */
/* ==========================================
   01. UTILIDADES FUNDACIONALES (TYPOGRAPHY)
   Estas clases atómicas mapean los tokens de texto
   para su uso directo en HTML.
   ========================================== */
/* Familias de Fuentes */
.unav-font-primary {
  font-family: var(--unav-fontFamilyPrimary);
}

.unav-font-primary-condensed {
  font-family: var(--unav-fontFamilyPrimaryCondensed);
}

.unav-font-secondary-playfair {
  font-family: var(--unav-fontFamilySecondaryPlayfair);
}

.unav-font-secondary-slab {
  font-family: var(--unav-fontFamilySecondarySlab);
}

.unav-font-secondary-dm {
  font-family: var(--unav-fontFamilySecondaryDm);
}

/* Grosores de Fuente (Weights) */
.unav-weight-thin {
  font-weight: var(--unav-fontWeightThin);
}

.unav-weight-light {
  font-weight: var(--unav-fontWeightLight);
}

.unav-weight-regular {
  font-weight: var(--unav-fontWeightRegular);
}

.unav-weight-medium {
  font-weight: var(--unav-fontWeightMedium);
}

.unav-weight-bold {
  font-weight: var(--unav-fontWeightBold);
}

.unav-weight-black {
  font-weight: var(--unav-fontWeightBlack);
}

/* Escala de Tamaños de Fuente (Sizes) */
.unav-text-075 {
  font-size: var(--unav-fontSize075);
}

.unav-text-085 {
  font-size: var(--unav-fontSize085);
}

.unav-text-100 {
  font-size: var(--unav-fontSize100);
}

.unav-text-1125 {
  font-size: var(--unav-fontSize1125);
} /* Base para UNAV, un poquito más grande que lo habitual (tomar decisión definitiva) */
.unav-text-125 {
  font-size: var(--unav-fontSize125);
}

.unav-text-150 {
  font-size: var(--unav-fontSize150);
}

.unav-text-175 {
  font-size: var(--unav-fontSize175);
}

.unav-text-200 {
  font-size: var(--unav-fontSize200);
}

.unav-text-250 {
  font-size: var(--unav-fontSize250);
}

.unav-text-300 {
  font-size: var(--unav-fontSize300);
}

.unav-text-400 {
  font-size: var(--unav-fontSize400);
}

.unav-text-500 {
  font-size: var(--unav-fontSize500);
}

/* Interlineado (Line Height) */
.unav-lh-none {
  line-height: var(--unav-lineHeightNone);
}

.unav-lh-tight {
  line-height: var(--unav-lineHeightTight);
}

.unav-lh-snug {
  line-height: var(--unav-lineHeightSnug);
}

.unav-lh-normal {
  line-height: var(--unav-lineHeightNormal);
}

.unav-lh-relaxed {
  line-height: var(--unav-lineHeightRelaxed);
}

/* ==========================================
   SISTEMA DE COLOR CORPORATIVO (.unav-bg-)
   ========================================== */
/* --- CLASES UTILITARIAS DE FONDO --- */
/* Rojo Unav */
.unav-bg-rojo-100 {
  background-color: var(--unav-rojo-100);
}

.unav-bg-rojo-200 {
  background-color: var(--unav-rojo-200);
}

.unav-bg-rojo-300 {
  background-color: var(--unav-rojo-300);
}

.unav-bg-rojo-400 {
  background-color: var(--unav-rojo-400);
}

.unav-bg-rojo-500 {
  background-color: var(--unav-rojo-500);
}

.unav-bg-rojo-600 {
  background-color: var(--unav-rojo-600);
}

.unav-bg-rojo-700 {
  background-color: var(--unav-rojo-700);
}

.unav-bg-rojo-800 {
  background-color: var(--unav-rojo-800);
}

.unav-bg-rojo-900 {
  background-color: var(--unav-rojo-900);
}

/* Black */
.unav-bg-black-100 {
  background-color: var(--unav-black-100);
}

.unav-bg-black-200 {
  background-color: var(--unav-black-200);
}

.unav-bg-black-300 {
  background-color: var(--unav-black-300);
}

.unav-bg-black-400 {
  background-color: var(--unav-black-400);
}

.unav-bg-black-500 {
  background-color: var(--unav-black-500);
}

.unav-bg-black-600 {
  background-color: var(--unav-black-600);
}

.unav-bg-black-700 {
  background-color: var(--unav-black-700);
}

.unav-bg-black-800 {
  background-color: var(--unav-black-800);
}

.unav-bg-black-900 {
  background-color: var(--unav-black-900);
}

/* Grey */
.unav-bg-grey-100 {
  background-color: var(--unav-grey-100);
}

.unav-bg-grey-200 {
  background-color: var(--unav-grey-200);
}

.unav-bg-grey-300 {
  background-color: var(--unav-grey-300);
}

.unav-bg-grey-400 {
  background-color: var(--unav-grey-400);
}

.unav-bg-grey-500 {
  background-color: var(--unav-grey-500);
}

.unav-bg-grey-600 {
  background-color: var(--unav-grey-600);
}

.unav-bg-grey-700 {
  background-color: var(--unav-grey-700);
}

.unav-bg-grey-800 {
  background-color: var(--unav-grey-800);
}

.unav-bg-grey-900 {
  background-color: var(--unav-grey-900);
}

/* Moss */
.unav-bg-moss-100 {
  background-color: var(--unav-moss-100);
}

.unav-bg-moss-200 {
  background-color: var(--unav-moss-200);
}

.unav-bg-moss-300 {
  background-color: var(--unav-moss-300);
}

.unav-bg-moss-400 {
  background-color: var(--unav-moss-400);
}

.unav-bg-moss-500 {
  background-color: var(--unav-moss-500);
}

.unav-bg-moss-600 {
  background-color: var(--unav-moss-600);
}

.unav-bg-moss-700 {
  background-color: var(--unav-moss-700);
}

.unav-bg-moss-800 {
  background-color: var(--unav-moss-800);
}

.unav-bg-moss-900 {
  background-color: var(--unav-moss-900);
}

/* Green Light */
.unav-bg-green-light-100 {
  background-color: var(--unav-green-l-100);
}

.unav-bg-green-light-200 {
  background-color: var(--unav-green-l-200);
}

.unav-bg-green-light-300 {
  background-color: var(--unav-green-l-300);
}

.unav-bg-green-light-400 {
  background-color: var(--unav-green-l-400);
}

.unav-bg-green-light-500 {
  background-color: var(--unav-green-l-500);
}

.unav-bg-green-light-600 {
  background-color: var(--unav-green-l-600);
}

.unav-bg-green-light-700 {
  background-color: var(--unav-green-l-700);
}

.unav-bg-green-light-800 {
  background-color: var(--unav-green-l-800);
}

.unav-bg-green-light-900 {
  background-color: var(--unav-green-l-900);
}

/* Green */
.unav-bg-green-100 {
  background-color: var(--unav-green-100);
}

.unav-bg-green-200 {
  background-color: var(--unav-green-200);
}

.unav-bg-green-300 {
  background-color: var(--unav-green-300);
}

.unav-bg-green-400 {
  background-color: var(--unav-green-400);
}

.unav-bg-green-500 {
  background-color: var(--unav-green-500);
}

.unav-bg-green-600 {
  background-color: var(--unav-green-600);
}

.unav-bg-green-700 {
  background-color: var(--unav-green-700);
}

.unav-bg-green-800 {
  background-color: var(--unav-green-800);
}

.unav-bg-green-900 {
  background-color: var(--unav-green-900);
}

/* Teal */
.unav-bg-teal-100 {
  background-color: var(--unav-teal-100);
}

.unav-bg-teal-200 {
  background-color: var(--unav-teal-200);
}

.unav-bg-teal-300 {
  background-color: var(--unav-teal-300);
}

.unav-bg-teal-400 {
  background-color: var(--unav-teal-400);
}

.unav-bg-teal-500 {
  background-color: var(--unav-teal-500);
}

.unav-bg-teal-600 {
  background-color: var(--unav-teal-600);
}

.unav-bg-teal-700 {
  background-color: var(--unav-teal-700);
}

.unav-bg-teal-800 {
  background-color: var(--unav-teal-800);
}

.unav-bg-teal-900 {
  background-color: var(--unav-teal-900);
}

/* Cyan */
.unav-bg-cyan-100 {
  background-color: var(--unav-cyan-100);
}

.unav-bg-cyan-200 {
  background-color: var(--unav-cyan-200);
}

.unav-bg-cyan-300 {
  background-color: var(--unav-cyan-300);
}

.unav-bg-cyan-400 {
  background-color: var(--unav-cyan-400);
}

.unav-bg-cyan-500 {
  background-color: var(--unav-cyan-500);
}

.unav-bg-cyan-600 {
  background-color: var(--unav-cyan-600);
}

.unav-bg-cyan-700 {
  background-color: var(--unav-cyan-700);
}

.unav-bg-cyan-800 {
  background-color: var(--unav-cyan-800);
}

.unav-bg-cyan-900 {
  background-color: var(--unav-cyan-900);
}

/* Blue Light */
.unav-bg-blue-light-100 {
  background-color: var(--unav-blue-l-100);
}

.unav-bg-blue-light-200 {
  background-color: var(--unav-blue-l-200);
}

.unav-bg-blue-light-300 {
  background-color: var(--unav-blue-l-300);
}

.unav-bg-blue-light-400 {
  background-color: var(--unav-blue-l-400);
}

.unav-bg-blue-light-500 {
  background-color: var(--unav-blue-l-500);
}

.unav-bg-blue-light-600 {
  background-color: var(--unav-blue-l-600);
}

.unav-bg-blue-light-700 {
  background-color: var(--unav-blue-l-700);
}

.unav-bg-blue-light-800 {
  background-color: var(--unav-blue-l-800);
}

.unav-bg-blue-light-900 {
  background-color: var(--unav-blue-l-900);
}

/* Blue */
.unav-bg-blue-100 {
  background-color: var(--unav-blue-100);
}

.unav-bg-blue-200 {
  background-color: var(--unav-blue-200);
}

.unav-bg-blue-300 {
  background-color: var(--unav-blue-300);
}

.unav-bg-blue-400 {
  background-color: var(--unav-blue-400);
}

.unav-bg-blue-500 {
  background-color: var(--unav-blue-500);
}

.unav-bg-blue-600 {
  background-color: var(--unav-blue-600);
}

.unav-bg-blue-700 {
  background-color: var(--unav-blue-700);
}

.unav-bg-blue-800 {
  background-color: var(--unav-blue-800);
}

.unav-bg-blue-900 {
  background-color: var(--unav-blue-900);
}

/* Blue Dark */
.unav-bg-blue-dark-100 {
  background-color: var(--unav-b-dark-100);
}

.unav-bg-blue-dark-200 {
  background-color: var(--unav-b-dark-200);
}

.unav-bg-blue-dark-300 {
  background-color: var(--unav-b-dark-300);
}

.unav-bg-blue-dark-400 {
  background-color: var(--unav-b-dark-400);
}

.unav-bg-blue-dark-500 {
  background-color: var(--unav-b-dark-500);
}

.unav-bg-blue-dark-600 {
  background-color: var(--unav-b-dark-600);
}

.unav-bg-blue-dark-700 {
  background-color: var(--unav-b-dark-700);
}

.unav-bg-blue-dark-800 {
  background-color: var(--unav-b-dark-800);
}

.unav-bg-blue-dark-900 {
  background-color: var(--unav-b-dark-900);
}

/* Indigo */
.unav-bg-indigo-100 {
  background-color: var(--unav-indigo-100);
}

.unav-bg-indigo-200 {
  background-color: var(--unav-indigo-200);
}

.unav-bg-indigo-300 {
  background-color: var(--unav-indigo-300);
}

.unav-bg-indigo-400 {
  background-color: var(--unav-indigo-400);
}

.unav-bg-indigo-500 {
  background-color: var(--unav-indigo-500);
}

.unav-bg-indigo-600 {
  background-color: var(--unav-indigo-600);
}

.unav-bg-indigo-700 {
  background-color: var(--unav-indigo-700);
}

.unav-bg-indigo-800 {
  background-color: var(--unav-indigo-800);
}

.unav-bg-indigo-900 {
  background-color: var(--unav-indigo-900);
}

/* Violet */
.unav-bg-violet-100 {
  background-color: var(--unav-violet-100);
}

.unav-bg-violet-200 {
  background-color: var(--unav-violet-200);
}

.unav-bg-violet-300 {
  background-color: var(--unav-violet-300);
}

.unav-bg-violet-400 {
  background-color: var(--unav-violet-400);
}

.unav-bg-violet-500 {
  background-color: var(--unav-violet-500);
}

.unav-bg-violet-600 {
  background-color: var(--unav-violet-600);
}

.unav-bg-violet-700 {
  background-color: var(--unav-violet-700);
}

.unav-bg-violet-800 {
  background-color: var(--unav-violet-800);
}

.unav-bg-violet-900 {
  background-color: var(--unav-violet-900);
}

/* Purple */
.unav-bg-purple-100 {
  background-color: var(--unav-purple-100);
}

.unav-bg-purple-200 {
  background-color: var(--unav-purple-200);
}

.unav-bg-purple-300 {
  background-color: var(--unav-purple-300);
}

.unav-bg-purple-400 {
  background-color: var(--unav-purple-400);
}

.unav-bg-purple-500 {
  background-color: var(--unav-purple-500);
}

.unav-bg-purple-600 {
  background-color: var(--unav-purple-600);
}

.unav-bg-purple-700 {
  background-color: var(--unav-purple-700);
}

.unav-bg-purple-800 {
  background-color: var(--unav-purple-800);
}

.unav-bg-purple-900 {
  background-color: var(--unav-purple-900);
}

/* Fuchsia */
.unav-bg-fuchsia-100 {
  background-color: var(--unav-fuchsia-100);
}

.unav-bg-fuchsia-200 {
  background-color: var(--unav-fuchsia-200);
}

.unav-bg-fuchsia-300 {
  background-color: var(--unav-fuchsia-300);
}

.unav-bg-fuchsia-400 {
  background-color: var(--unav-fuchsia-400);
}

.unav-bg-fuchsia-500 {
  background-color: var(--unav-fuchsia-500);
}

.unav-bg-fuchsia-600 {
  background-color: var(--unav-fuchsia-600);
}

.unav-bg-fuchsia-700 {
  background-color: var(--unav-fuchsia-700);
}

.unav-bg-fuchsia-800 {
  background-color: var(--unav-fuchsia-800);
}

.unav-bg-fuchsia-900 {
  background-color: var(--unav-fuchsia-900);
}

/* Pink */
.unav-bg-pink-100 {
  background-color: var(--unav-pink-100);
}

.unav-bg-pink-200 {
  background-color: var(--unav-pink-200);
}

.unav-bg-pink-300 {
  background-color: var(--unav-pink-300);
}

.unav-bg-pink-400 {
  background-color: var(--unav-pink-400);
}

.unav-bg-pink-500 {
  background-color: var(--unav-pink-500);
}

.unav-bg-pink-600 {
  background-color: var(--unav-pink-600);
}

.unav-bg-pink-700 {
  background-color: var(--unav-pink-700);
}

.unav-bg-pink-800 {
  background-color: var(--unav-pink-800);
}

.unav-bg-pink-900 {
  background-color: var(--unav-pink-900);
}

/* Rose */
.unav-bg-rose-100 {
  background-color: var(--unav-rose-100);
}

.unav-bg-rose-200 {
  background-color: var(--unav-rose-200);
}

.unav-bg-rose-300 {
  background-color: var(--unav-rose-300);
}

.unav-bg-rose-400 {
  background-color: var(--unav-rose-400);
}

.unav-bg-rose-500 {
  background-color: var(--unav-rose-500);
}

.unav-bg-rose-600 {
  background-color: var(--unav-rose-600);
}

.unav-bg-rose-700 {
  background-color: var(--unav-rose-700);
}

.unav-bg-rose-800 {
  background-color: var(--unav-rose-800);
}

.unav-bg-rose-900 {
  background-color: var(--unav-rose-900);
}

/* Orange Dark */
.unav-bg-orange-dark-100 {
  background-color: var(--unav-o-dark-100);
}

.unav-bg-orange-dark-200 {
  background-color: var(--unav-o-dark-200);
}

.unav-bg-orange-dark-300 {
  background-color: var(--unav-o-dark-300);
}

.unav-bg-orange-dark-400 {
  background-color: var(--unav-o-dark-400);
}

.unav-bg-orange-dark-500 {
  background-color: var(--unav-o-dark-500);
}

.unav-bg-orange-dark-600 {
  background-color: var(--unav-o-dark-600);
}

.unav-bg-orange-dark-700 {
  background-color: var(--unav-o-dark-700);
}

.unav-bg-orange-dark-800 {
  background-color: var(--unav-o-dark-800);
}

.unav-bg-orange-dark-900 {
  background-color: var(--unav-o-dark-900);
}

/* Orange */
.unav-bg-orange-100 {
  background-color: var(--unav-orange-100);
}

.unav-bg-orange-200 {
  background-color: var(--unav-orange-200);
}

.unav-bg-orange-300 {
  background-color: var(--unav-orange-300);
}

.unav-bg-orange-400 {
  background-color: var(--unav-orange-400);
}

.unav-bg-orange-500 {
  background-color: var(--unav-orange-500);
}

.unav-bg-orange-600 {
  background-color: var(--unav-orange-600);
}

.unav-bg-orange-700 {
  background-color: var(--unav-orange-700);
}

.unav-bg-orange-800 {
  background-color: var(--unav-orange-800);
}

.unav-bg-orange-900 {
  background-color: var(--unav-orange-900);
}

/* Yellow */
.unav-bg-yellow-100 {
  background-color: var(--unav-yellow-100);
}

.unav-bg-yellow-200 {
  background-color: var(--unav-yellow-200);
}

.unav-bg-yellow-300 {
  background-color: var(--unav-yellow-300);
}

.unav-bg-yellow-400 {
  background-color: var(--unav-yellow-400);
}

.unav-bg-yellow-500 {
  background-color: var(--unav-yellow-500);
}

.unav-bg-yellow-600 {
  background-color: var(--unav-yellow-600);
}

.unav-bg-yellow-700 {
  background-color: var(--unav-yellow-700);
}

.unav-bg-yellow-800 {
  background-color: var(--unav-yellow-800);
}

.unav-bg-yellow-900 {
  background-color: var(--unav-yellow-900);
}

/* ==========================================
   SISTEMA DE MOVIMIENTO UNAV (OOCSS)
   Motor central de físicas, transiciones y utilidades de animación
   ========================================== */
/* ==========================================
   1. OPACIDADES SUTILES AL HOVER
   ========================================== */
.unav-efectoOpacidadSutil {
  transition: opacity var(--unav-transitionBase);
}

.unav-efectoOpacidadSutil:hover {
  opacity: var(--unav-opacityHoverSubtle);
}

.unav-efectoOpacidadIntensa {
  transition: opacity var(--unav-transitionBase);
}

.unav-efectoOpacidadIntensa:hover {
  opacity: var(--unav-opacityHoverIntense);
}

/* ==========================================
   2. PROFUNDIDAD ESPACIAL (PARALLAX)
   ========================================== */
.unav-efectoParallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Fallback de rendimiento para dispositivos móviles (Evita jank y consumo de batería) */
@media (max-width: 768px) {
  .unav-efectoParallax {
    background-attachment: scroll;
  }
}
/* ==========================================
   3. ANIMACIÓN CONTINUA (KEN BURNS)
   ========================================== */
@keyframes unav-slowZoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
.unav-efectoZoomInfinito {
  animation: unav-slowZoomIn var(--unav-durationEpic) ease-in-out infinite alternate;
  will-change: transform; /* Optimización estricta por GPU */
}

/* ==========================================
   4. ELEVACIÓN 3D E INTERACCIÓN (Z-INDEX LIFT)
   ========================================== */
.unav-efectoElevacion {
  transition: transform var(--unav-durationNormal) var(--unav-easingStandard), box-shadow var(--unav-durationNormal) var(--unav-easingStandard);
}

.unav-efectoElevacion:hover {
  transform: translateY(var(--unav-translateHoverElevation));
  box-shadow: var(--unav-cardShadowHover);
}

/* ==========================================
   5. APARICIÓN EN SCROLL (STAGGERED FADE-UP)
   ========================================== */
.unav-efectoEntradaOculto {
  opacity: 0;
  transform: translateY(var(--unav-translateEntranceY));
  transition: opacity var(--unav-durationSlow) var(--unav-easingDecel), transform var(--unav-durationSlow) var(--unav-easingDecel);
  will-change: opacity, transform;
}

/* Clase inyectada vía JS (IntersectionObserver) */
.unav-efectoEntradaVisible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================
   6. MICROINTERACCIONES DE IMAGEN (ZOOM)
   ========================================== */
.unav-efectoZoomImagen {
  overflow: hidden;
}

.unav-efectoZoomImagen img {
  /* Soportamos tanto transform como filter para no pisar el grayscale de otras vistas */
  transition: transform var(--unav-durationSlow) var(--unav-easingDecel), filter var(--unav-durationSlow) var(--unav-easingDecel);
  will-change: transform;
}

/* Soporte de herencia: Si el padre tiene hover, la imagen reacciona */
*:hover > .unav-efectoZoomImagen img,
.unav-efectoZoomImagen:hover img {
  transform: scale(1.05) translateZ(0); /* translateZ fuerza la aceleración GPU en Safari */
}

/* ==========================================
   7. TRANSICIONES DE ESTADO Y GALERÍAS
   ========================================== */
/* --- 7.1. Aparición Básica (Fade In) --- */
@keyframes unav-fadeInKeyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.unav-efectoFadeIn {
  animation: unav-fadeInKeyframes var(--unav-durationNormal) var(--unav-easingStandard) forwards;
}

/* --- 7.2. Transición Cross-Fade (Pixelflakes Style) --- */
/* Estado Base: Oculta, escalada al 96% y apilada por debajo */
.unav-efectoCrossFade {
  opacity: 0;
  transform: scale(0.96);
  visibility: hidden;
  z-index: 1;
  transition: opacity var(--unav-durationNormal) var(--unav-easingStandard), transform var(--unav-durationNormal) var(--unav-easingStandard), visibility var(--unav-durationNormal) var(--unav-easingStandard);
  will-change: transform, opacity;
}

/* Estado Activo: Visible, escala 100% y apilada por encima */
.unav-efectoCrossFade.unav-isActive {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  z-index: 2;
}

/* Estado Saliente: Se desvanece pero MANTIENE su escala original (100%) */
.unav-efectoCrossFade.unav-isOutgoing {
  opacity: 0;
  transform: scale(1);
  visibility: visible;
  z-index: 1;
}

/* ==========================================
   MODIFICADOR: GRID DE EVENTOS HORIZONTAL (MÓVIL)
   ========================================== */
@media (max-width: 767px) {
  /* Piel de comportamiento horizontal para el contenedor row */
  .unav-gridScrollMobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; /* Inercia fluida en iOS */
    scroll-snap-type: x mandatory; /* Físicas de frenado magnético */
    /* Ocultamos la barra de scroll para mantener la limpieza visual */
    scrollbar-width: none;
    /* Padding inferior para que las sombras del hover/elevación no se recorten */
    padding-bottom: var(--unav-spacing-md) !important;
  }
  .unav-gridScrollMobile::-webkit-scrollbar {
    display: none; /* Oculta la barra de scroll en Chrome/Safari/Edge */
  }
  /* Forzado geométrico de los hijos directos (columnas) */
  .unav-gridScrollMobile > [class*=col-] {
    /* Ocupa el 82% del viewport, permitiendo revelar un 18% del siguiente evento */
    flex: 0 0 82% !important;
    width: 82% !important;
    max-width: 82% !important;
    /* Alineación del imán de frenado al inicio de la tarjeta */
    scroll-snap-align: start;
  }
}
/* ==========================================
   COMPONENTE: TOAST (Notificaciones de UI)
   ========================================== */
.unav-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: var(--unav-black-800);
  color: var(--unav-text-inverse);
  padding: var(--unav-spacing-md) var(--unav-spacing-lg);
  border-radius: var(--unav-radius-md);
  z-index: var(--unav-zIndex-modal);
  opacity: 0;
  transition: transform var(--unav-durationNormal) var(--unav-easingStandard), opacity var(--unav-durationNormal) var(--unav-easingStandard);
  font-family: var(--unav-fontFamilyPrimary);
  font-size: var(--unav-fontSize085);
  display: flex;
  align-items: center;
  gap: var(--unav-spacing-sm);
  box-shadow: var(--unav-cardShadowHover);
}

.unav-toast.unav-isActive {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==========================================
   HELPERS Y UTILIDADES DE LABORATORIO
   *** Solo sirven para las páginas HTML de tu documentación y no se van a usar en la web final de la universidad
   ========================================== */
/* Utilidad para lectores de pantalla (Screen Readers) */
.unav-sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ==========================================
   LABORATORIO VISUAL (Layout de Documentación)
   ========================================== */
.unav-techSummary {
  border-left: 4px solid var(--unav-rojo-600);
}

/* Estructura Longitudinal de la Muestra */
.unav-sampleRow {
  background-color: var(--unav-bg-surface);
  border-bottom: 1px solid var(--unav-grey-200);
  /* REFACTOR: Consumo de Tokens de Espaciado (48px vertical, 32px horizontal) */
  padding: var(--unav-sampleRowPaddingY, var(--unav-spacing-2xl)) var(--unav-sampleRowPaddingX, var(--unav-spacing-xl));
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: var(--unav-transitionBase);
}

.unav-sampleRow:hover {
  background-color: var(--unav-grey-100);
  box-shadow: inset 4px 0 0 var(--unav-teal-600); /* Usamos Teal para diferenciarlo de Cabeceras */
}

/* Contenedor Flex para Etiquetas de Metadatos */
.unav-dataContainer {
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  margin-top: var(--unav-spacing-lg);
  display: flex;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) para la separación de etiquetas */
  gap: var(--unav-spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* Separador Semántico de Etiquetas HTML */
.unav-sectionLabel {
  background-color: var(--unav-black-900);
  color: var(--unav-text-inverse);
  /* REFACTOR: Consumo de Tokens de Espaciado (16px vertical, 32px horizontal) */
  padding: var(--unav-sectionLabelPaddingY, var(--unav-spacing-md)) var(--unav-sectionLabelPaddingX, var(--unav-spacing-xl));
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize125);
  text-transform: uppercase;
  letter-spacing: var(--unav-trackingWide);
  /* REFACTOR: Consumo de Tokens de Espaciado gigante (64px) */
  margin-top: var(--unav-spacing-3xl);
  /* REFACTOR: Consumo de Tokens de Forma (Curvo arriba, Recto abajo) */
  border-radius: var(--unav-radius-lg) var(--unav-radius-lg) var(--unav-radius-none) var(--unav-radius-none);
}

/* ==========================================
   COMPONENTE: LABORATORIO DE CABECERAS
   ========================================== */
/* Estilos de la vista de documentación */
.unav-techSummary {
  border-left: 4px solid var(--unav-rojo-600);
}

/* Estructura Longitudinal de la Muestra (OOCSS Layout) */
.unav-sampleRow {
  background-color: var(--unav-bg-surface);
  border-bottom: 1px solid var(--unav-grey-200);
  /* REFACTOR: Consumo de Tokens de Espaciado por defecto (16px vertical, 24px horizontal) */
  padding: var(--unav-sampleRowPaddingY, var(--unav-spacing-md)) var(--unav-sampleRowPaddingX, var(--unav-spacing-lg));
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: var(--unav-transitionBase);
}

.unav-sampleRow:hover {
  background-color: var(--unav-grey-100);
  box-shadow: inset 4px 0 0 var(--unav-rojo-700);
}

/* Reseteo del Elemento Cabecera para previsualización limpia */
.unav-headerElement {
  margin: 0;
  padding: 0;
  line-height: 1.15;
  word-wrap: break-word;
}

/* Contenedor Flex para la inyección de las Etiquetas (.unav-tag) */
.unav-dataContainer {
  /* REFACTOR: Consumo de Tokens de Espaciado (24px) */
  margin-top: var(--unav-spacing-lg);
  display: flex;
  /* REFACTOR: Consumo de Tokens de Espaciado (8px) para la separación de etiquetas */
  gap: var(--unav-spacing-sm);
  flex-wrap: wrap;
  align-items: center;
}

/* Separador Semántico de Niveles HTML */
.unav-sectionLabel {
  background-color: var(--unav-black-900);
  color: var(--unav-text-inverse);
  /* REFACTOR: Consumo de Tokens de Espaciado (8px vertical, 16px horizontal) */
  padding: var(--unav-sectionLabelPaddingY, var(--unav-spacing-sm)) var(--unav-sectionLabelPaddingX, var(--unav-spacing-md));
  font-family: var(--unav-fontFamilyPrimaryCondensed);
  font-weight: var(--unav-fontWeightBold);
  font-size: var(--unav-fontSize125);
  text-transform: uppercase;
  letter-spacing: var(--unav-trackingWide);
  /* REFACTOR: Consumo de Tokens de Espaciado gigantes (64px) */
  margin-top: var(--unav-spacing-3xl);
  /* REFACTOR: Consumo de Tokens de Forma (Curvo arriba, Recto abajo) */
  border-radius: var(--unav-radius-lg) var(--unav-radius-lg) var(--unav-radius-none) var(--unav-radius-none);
}

/* Clases auxiliares para la demo de contenido */
.unav-contentSection {
  padding-top: var(--unav-menuAnclasTopOffset);
  margin-top: calc(var(--unav-menuAnclasTopOffset) * -1);
  margin-bottom: 30vh;
}

.unav-pageFooterBuffer {
  height: 20vh;
}

/*# sourceMappingURL=global.css.map */

lfr-drop-zone {
    display: block !important;
    width: 100% !important;
    min-height: 180px !important;
    min-width: 180px !important;
}

.has-edit-mode-menu > .flipped > div#wrapper {
    height:100vh!important;
}