/* ==========================================================================
   styles.css — VI Congreso Internacional Multidisciplinario HUMANIDAD 2026
   Paleta institucional académica · WCAG 2.1 AA · Mobile-First
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES (paleta + espaciado + tipografía)
   -------------------------------------------------------------------------- */
:root {
  /* ── Esquema de color institucional: sólo modo claro (desactiva auto-dark en móviles) ── */
  color-scheme: only light;
  supported-color-schemes: light;

  /* ── Paleta institucional (contraste validado AA) ── */
  --color-primary:         #1B3A5C;  /* 8.59:1 vs #FFF */
  --color-primary-light:   #2E5A8A;  /* 5.82:1 vs #FFF */
  --color-primary-dark:    #122B44;
  --color-secondary:       #007B83;  /* 4.54:1 vs #FFF */
  --color-secondary-light: #00A0A8;
  --color-accent:          #D4A843;
  --color-accent-dark:     #8F6A12;  /* 4.95:1 vs #FFF (AA texto normal) */
  --color-success:         #28A745;
  --color-danger:          #DC3545;

  /* ── Paleta oficial del documento 'Bases de Participación' ── */
  --color-bases-navy:        #0B2545;  /* Azul marino institucional títulos */
  --color-bases-navy-light:  #183B68;
  --color-bases-cyan:        #38BDF8;  /* Cian / Océanos */
  --color-bases-mint:        #34D399;  /* Menta claro */
  --color-bases-green:       #10B981;  /* Verde vida / Sostenibilidad */
  --color-bases-amber:       #F59E0B;  /* Ámbar dorado */
  --color-bases-orange:      #EA580C;  /* Naranja cálido institucional */
  --color-bases-pink:        #EC4899;  /* Rosa magenta */
  --color-bases-purple:      #8B5CF6;  /* Violeta degradado 2026 */
  --color-bases-red:         #B91C1C;  /* Rojo rubí fechas oficiales */
  --bg-world-map-light:      url("../img/world-map-light.svg");
  --bg-world-map-dark:       url("../img/world-map-dark.svg");

  /* ── Fondos ── */
  --color-bg-white:   #FFFFFF;
  --color-bg-light:   #F4F6F9;
  --color-bg-dark:    #0E1F33;

  /* ── Texto ── */
  --color-text:       #212529;  /* 12.63:1 vs #FFF */
  --color-text-muted: #5A6570;  /* 5.33:1 vs #FFF (AA) */
  --color-text-light: #FFFFFF;
  --color-border:     #DEE2E6;

  /* ── Focus visible (WCAG 2.4.7) ── */
  --color-focus:      #0D6EFD;
  --focus-ring:       0 0 0 3px rgba(13, 110, 253, .35);

  /* ── Espaciado fluido ── */
  --space-xs:  .25rem;
  --space-sm:  .5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  3rem;
  --space-xxl: 5rem;

  /* ── Tipografía fluida ── */
  --fs-h1:    clamp(2rem, 5vw, 3.5rem);
  --fs-h2:    clamp(1.6rem, 3.5vw, 2.5rem);
  --fs-h3:    clamp(1.2rem, 2.5vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, 2vw, 1.25rem);
  --fs-body:  1rem;

  /* ── Layout ── */
  --navbar-height:   80px;
  --section-pad-y:   clamp(3rem, 6vw, 5rem);
  --radius-sm:  .375rem;
  --radius-md:  .75rem;
  --radius-lg:  1rem;

  /* ── Transiciones ── */
  --transition: .2s ease;

  /* ── Sobre Bootstrap 5.3 ── */
  --bs-primary:       var(--color-primary);
  --bs-primary-rgb:   27, 58, 92;
  --bs-secondary:     var(--color-secondary);
  --bs-secondary-rgb: 0, 123, 131;
  --bs-link-color:    var(--color-secondary);
  --bs-link-hover-color: var(--color-secondary-light);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: only light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + 1rem);
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. FOCUS VISIBLE — WCAG 2.4.7
   -------------------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   4. SKIP LINK — WCAG 2.4.1
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: top var(--transition);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   5. NAVBAR STICKY
   -------------------------------------------------------------------------- */
.header-sticky {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--color-bg-white);
  box-shadow: 0 1px 0 var(--color-border);
  transition: box-shadow var(--transition);
}

.header-sticky.is-scrolled {
  box-shadow: 0 4px 18px rgba(0, 0, 0, .10);
}

.header-sticky .navbar {
  min-height: var(--navbar-height);
  padding: var(--space-xs) 0;
}

/* Brand */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primary);
  text-decoration: none;
  line-height: 1.15;
  padding: .35rem 0;
}

.navbar-brand .brand-logo-img {
  height: 73px;
  width: auto;
  max-width: 260px;
  display: block;
  object-fit: contain;
  transition: transform var(--transition);
}

.navbar-brand:hover .brand-logo-img,
.navbar-brand:focus-visible .brand-logo-img {
  transform: scale(1.02);
}

.navbar-brand .brand-icon {
  flex-shrink: 0;
}

.navbar-brand .brand-text {
  display: flex;
  flex-direction: column;
}

.navbar-brand .brand-text small {
  font-weight: 500;
  font-size: .72rem;
  color: var(--color-text-muted);
}

.navbar-brand:hover,
.navbar-brand:focus-visible {
  color: var(--color-primary-light);
}

/* Enlaces */
.navbar-nav .nav-link {
  position: relative;
  font-weight: 500;
  font-size: .93rem;
  color: var(--color-text) !important;
  padding: .5rem .7rem !important;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible {
  color: var(--color-primary) !important;
  background: rgba(27, 58, 92, .06);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
  color: var(--color-primary) !important;
  font-weight: 600;
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: .7rem;
  right: .7rem;
  height: 2px;
  background: var(--color-secondary);
  border-radius: 2px;
}

/* CTA botón */
.navbar .btn-cta-nav {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  font-weight: 600;
  font-size: .92rem;
  color: #fff;
  background: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 50rem;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition);
}

.navbar .btn-cta-nav:hover,
.navbar .btn-cta-nav:focus-visible {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: #fff;
  transform: translateY(-1px);
}

/* Selector de idioma */
.lang-switcher .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 50rem;
}

.lang-switcher .dropdown-toggle:hover,
.lang-switcher .dropdown-toggle:focus-visible {
  background: #e9edf2;
  color: var(--color-primary);
}

.lang-switcher .dropdown-menu {
  min-width: 8.5rem;
  padding: .35rem;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}

.lang-switcher .dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .8rem;
  font-size: .9rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: background-color .15s ease, color .15s ease;
}

.lang-switcher .dropdown-item:hover,
.lang-switcher .dropdown-item:focus-visible {
  background: #e9edf2;
  color: var(--color-primary);
}

.lang-switcher .dropdown-item.active,
.lang-switcher .dropdown-item[aria-current="true"] {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.lang-switcher .dropdown-item .lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.lang-switcher .dropdown-item .lang-flag-svg {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  display: block;
}

.lang-switcher .dropdown-item.active .lang-flag-svg {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
}

.lang-switcher .dropdown-item .lang-name {
  font-weight: 500;
}

.lang-switcher .dropdown-item.active .lang-name {
  font-weight: 600;
}

/* Hamburger */
.navbar-toggler {
  padding: .4rem .6rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.navbar-toggler:focus-visible {
  box-shadow: var(--focus-ring);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231B3A5C' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, var(--color-primary-light) 100%);
  color: #fff;
}

/* Carrusel y diapositivas */
.hero-section .carousel,
.hero-section .carousel-inner {
  position: relative;
  width: 100%;
}

.hero-section .carousel-item {
  position: relative;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}

/* Si se utiliza elemento <img> nativo en .hero-slide-media, desactivar background-image duplicado */
.hero-section .carousel-item:has(.hero-slide-img) {
  background-image: none !important;
}

/* Contenedor de la imagen del slide */
.hero-slide-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.hero-slide-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: 2560 / 735;
}

/* Contenedor del contenido (textos y botones) */
.hero-slide-content {
  position: relative;
  width: 100%;
  z-index: 2;
}

/* Slide backgrounds fallback para navegadores o temas */
.hero-slide-1 {
  background-image: url("../img/slides/slide_1.jpg");
  background-position: center top;
}
.hero-slide-2 {
  background-image: url("../img/slides/slide_2.jpg");
  background-position: center top;
}
.hero-slide-3 {
  background-image: url("../img/slides/slide_3.jpg");
  background-position: center top;
}

.hero-section .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(14,31,51,.75) 0%, rgba(27,58,92,.55) 55%, rgba(46,90,138,.45) 100%);
}

/* ── Pantallas grandes y de escritorio (≥ 992px) ── */
@media (min-width: 992px) {
  .hero-section .carousel,
  .hero-section .carousel-inner,
  .hero-section .carousel-item {
    aspect-ratio: 2560 / 735;
    min-height: clamp(380px, 28.71vw, 560px);
    max-height: 580px;
    height: auto;
  }

  .hero-slide-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .hero-slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  .hero-slide-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
  }

  .hero-slide-content .container {
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(1rem, 2vw, 2.2rem);
  }

  .hero-caption {
    pointer-events: auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: min(530px, 44vw);
    min-height: auto;
    padding: clamp(0.75rem, 1.2vw, 1.15rem) clamp(0.9rem, 1.5vw, 1.35rem);
    margin: 0;
  }
}

/* ── Móviles y Tablets (< 992px) ── */
@media (max-width: 991.98px) {
  .hero-section .carousel,
  .hero-section .carousel-inner,
  .hero-section .carousel-item {
    min-height: auto;
    height: auto;
    aspect-ratio: auto;
  }

  .hero-slide-media {
    position: relative;
    width: 100%;
    z-index: 1;
    background: transparent;
  }

  .hero-slide-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 2560 / 735;
  }

  .hero-slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    pointer-events: auto;
    padding: var(--space-xs) 0 var(--space-md);
  }

  .hero-caption {
    max-width: 100%;
    min-height: auto;
    padding: 1.15rem 1rem;
    margin: 0;
  }

  /* Controles de anterior / siguiente centrados sobre el banner en móviles */
  .hero-section .carousel-control-prev,
  .hero-section .carousel-control-next {
    top: clamp(24px, 14vw, 85px);
    bottom: auto;
    transform: translateY(-50%);
    height: 40px;
    width: 40px;
  }

  .hero-section .carousel-control-prev-icon,
  .hero-section .carousel-control-next-icon {
    width: 1.85rem;
    height: 1.85rem;
  }
}

.hero-caption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all var(--transition);
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: clamp(.78rem, 1.1vw, .9rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.hero-title {
  font-size: clamp(1.35rem, 2.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--space-xs);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.hero-title .title-highlight {
  display: block;
  font-size: .48em;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}

.hero-slogan {
  font-size: clamp(.84rem, 1.1vw, 1.05rem);
  font-weight: 400;
  max-width: 600px;
  margin-bottom: var(--space-sm);
  color: rgba(255, 255, 255, .92);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: clamp(.78rem, 1vw, .88rem);
}

.hero-meta-item .meta-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  font-size: .85rem;
}

.hero-meta-item strong {
  display: block;
  font-weight: 600;
  line-height: 1.2;
}

.hero-meta-item span {
  font-size: .8rem;
  color: rgba(255, 255, 255, .75);
}

.hero-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-xs);
}

.hero-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.25rem;
  font-weight: 600;
  font-size: clamp(.82rem, 1vw, .94rem);
  border-radius: 50rem;
  transition: transform var(--transition), box-shadow var(--transition);
}

.hero-actions .btn:hover,
.hero-actions .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

.hero-actions .btn-outline-light {
  border-width: 2px;
}

.hero-actions .btn-hero-blue {
  background: linear-gradient(135deg, #1a73e8, #0d47a1) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 5px 18px rgba(26, 115, 232, .4);
}

.hero-actions .btn-hero-blue:hover,
.hero-actions .btn-hero-blue:focus-visible {
  background: linear-gradient(135deg, #2a83f8, #1557c0) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: #ffffff !important;
  box-shadow: 0 9px 26px rgba(26, 115, 232, .6);
}

/* Indicadores carousel accesibles */
.hero-section .carousel-indicators {
  position: relative;
  margin-top: var(--space-md);
  z-index: 5;
}

.hero-section .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
}

.hero-section .carousel-indicators .active {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Controles carousel */
.hero-section .carousel-control-prev,
.hero-section .carousel-control-next {
  /* z-index 3: por encima de .hero-caption (z-index 1) para que los
     iconos se vean por encima del texto.
     pointer-events none: la franja transparente (15% del carril) NO debe
     robar los clics de los CTA del hero ("Ver Programa", "Inscribirse
     Ahora", "Ver Memorias"), que quedan debajo en el orden de apilado. */
  z-index: 3;
  opacity: 1;
  pointer-events: none;
}

.hero-section .carousel-control-prev:hover,
.hero-section .carousel-control-next:hover,
.hero-section .carousel-control-prev:focus-visible,
.hero-section .carousel-control-next:focus-visible {
  opacity: 1;
}

.hero-section .carousel-control-prev-icon,
.hero-section .carousel-control-next-icon {
  width: 2.2rem;
  height: 2.2rem;
  background-color: rgba(255, 255, 255, .18);
  background-size: 55%;
  border-radius: 50%;
  backdrop-filter: blur(4px);
  /* el clic se reactiva SÓLO sobre el icono (el resto pasa al contenido) */
  pointer-events: auto;
}

/* Botón pausa/reanudar carrusel — WCAG 2.2.2 */
.carousel-pause-btn {
  position: absolute;
  /* Inferior izquierda: la derecha queda ocupada por el FAB de WhatsApp
     (position: fixed, z-index 1040) y por el CTA "Inscribirse Ahora",
     que llegan hasta el padding inferior (3rem) de .hero-caption. */
  left: 16px;
  bottom: 16px;
  right: auto;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: rgba(14, 31, 51, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--transition), transform var(--transition);
}

.carousel-pause-btn:hover,
.carousel-pause-btn:focus-visible {
  background: rgba(14, 31, 51, .85);
  transform: scale(1.06);
}

/* ==========================================================================
   6.1 VARIANTES DE TEMA DEL HERO (Inspiradas en 'Bases de Participación')
   ========================================================================== */

/* ── Degrade de 2026 oficial (Naranja -> Magenta -> Violeta) ── */
.hero-section .title-highlight,
.hero-section .hero-year-gradient {
  background: linear-gradient(90deg, #F59E0B 0%, #EC4899 50%, #8B5CF6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ══════════════════════════════════════════════════════════════════════════
   OPCIÓN 1: LUMINOSA OFICIAL (Fondo claro acuarela + mapa mundi institucional)
   ══════════════════════════════════════════════════════════════════════════ */
.hero-section.hero-theme-light,
.hero-section[data-hero-theme="light"] {
  background-color: #FCFDFD;
  background-image: 
    radial-gradient(circle at 18% 35%, rgba(56, 189, 248, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 45% 62%, rgba(52, 211, 153, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 76% 36%, rgba(245, 158, 11, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 92% 70%, rgba(236, 72, 153, 0.16) 0%, transparent 40%),
    var(--bg-world-map-light);
  background-size: cover, cover, cover, cover, 960px auto;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-bases-navy);
}

.hero-section.hero-theme-light .carousel-item,
.hero-section[data-hero-theme="light"] .carousel-item {
  background-color: transparent;
  /* Las fotos se definen en .hero-slide-1/2/3; no se sobreescribe aquí */
}

.hero-section.hero-theme-light .carousel-item::before,
.hero-section[data-hero-theme="light"] .carousel-item::before {
  /* Overlay suave: deja ver la foto pero garantiza contraste del texto blanco */
  background: linear-gradient(160deg, rgba(14,31,51,.55) 0%, rgba(27,58,92,.40) 55%, rgba(46,90,138,.30) 100%);
  display: block;
}

.hero-section.hero-theme-light .hero-title,
.hero-section[data-hero-theme="light"] .hero-title {
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.hero-section.hero-theme-light .hero-kicker,
.hero-section[data-hero-theme="light"] .hero-kicker {
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: .35rem .95rem;
  border-radius: 50rem;
  box-shadow: none;
}

.hero-section.hero-theme-light .hero-slogan,
.hero-section[data-hero-theme="light"] .hero-slogan {
  color: rgba(255, 255, 255, 0.92);
}

.hero-section.hero-theme-light .hero-meta-item,
.hero-section[data-hero-theme="light"] .hero-meta-item {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(11, 37, 69, 0.12);
  padding: .45rem .85rem;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 6px rgba(11, 37, 69, 0.03);
}

.hero-section.hero-theme-light .hero-meta-item strong,
.hero-section[data-hero-theme="light"] .hero-meta-item strong {
  color: var(--color-bases-navy);
}

.hero-section.hero-theme-light .hero-meta-item span,
.hero-section[data-hero-theme="light"] .hero-meta-item span {
  color: #4A5568;
}

.hero-section.hero-theme-light .hero-meta-item .meta-icon,
.hero-section[data-hero-theme="light"] .hero-meta-item .meta-icon {
  background: rgba(11, 37, 69, 0.06);
  border-color: rgba(11, 37, 69, 0.15);
  color: var(--color-bases-navy);
}

.hero-section.hero-theme-light .hero-actions .btn-warning,
.hero-section[data-hero-theme="light"] .hero-actions .btn-warning {
  background-color: var(--color-bases-orange);
  border-color: var(--color-bases-orange);
  color: #FFFFFF;
}

.hero-section.hero-theme-light .hero-actions .btn-warning:hover,
.hero-section[data-hero-theme="light"] .hero-actions .btn-warning:hover {
  background-color: #C2410C;
  border-color: #C2410C;
}

.hero-section.hero-theme-light .hero-actions .btn-outline-light,
.hero-section[data-hero-theme="light"] .hero-actions .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.75);
  color: #FFFFFF;
}

.hero-section.hero-theme-light .hero-actions .btn-outline-light:hover,
.hero-section[data-hero-theme="light"] .hero-actions .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

@media (min-width: 992px) {
  .hero-section.hero-theme-light .hero-caption,
  .hero-section[data-hero-theme="light"] .hero-caption {
    max-width: min(530px, 44vw);
    padding: clamp(0.75rem, 1.2vw, 1.15rem) clamp(0.9rem, 1.5vw, 1.35rem);
    margin: 0;
  }
}

@media (max-width: 991.98px) {
  .hero-section.hero-theme-light .hero-caption,
  .hero-section[data-hero-theme="light"] .hero-caption {
    max-width: 100%;
    margin: 0.5rem 0 1rem;
    padding: 1.15rem 1rem;
  }
}

/* Tema Light: flechas en azul marino con fondo blanco suave — sin filter:invert
   Bootstrap usa SVGs blancos en background-image; se sobreescriben con versiones
   azul marino (#0B2545) para fondos claros. */
.hero-section.hero-theme-light .carousel-control-prev-icon,
.hero-section[data-hero-theme="light"] .carousel-control-prev-icon {
  background-color: rgba(255, 255, 255, 0.82);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B2545'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
  border: 1px solid rgba(11, 37, 69, 0.18);
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.10);
}
.hero-section.hero-theme-light .carousel-control-next-icon,
.hero-section[data-hero-theme="light"] .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.82);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B2545'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  border: 1px solid rgba(11, 37, 69, 0.18);
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.10);
}

.hero-section.hero-theme-light .carousel-indicators [data-bs-target],
.hero-section[data-hero-theme="light"] .carousel-indicators [data-bs-target] {
  border-color: var(--color-bases-navy);
}

.hero-section.hero-theme-light .carousel-indicators .active,
.hero-section[data-hero-theme="light"] .carousel-indicators .active {
  background: var(--color-bases-orange);
  border-color: var(--color-bases-orange);
}

.hero-section.hero-theme-light .carousel-pause-btn,
.hero-section[data-hero-theme="light"] .carousel-pause-btn {
  background: rgba(11, 37, 69, 0.12);
  color: var(--color-bases-navy);
  border-color: rgba(11, 37, 69, 0.25);
}

.hero-section.hero-theme-light .video-wrapper,
.hero-section[data-hero-theme="light"] .video-wrapper {
  box-shadow: 0 14px 34px rgba(11, 37, 69, 0.12);
  border: 1px solid rgba(11, 37, 69, 0.12);
}

/* ══════════════════════════════════════════════════════════════════════════
   OPCIÓN 2: AURORA MESH GLOW (Dark espacial con destellos de las bases)
   ══════════════════════════════════════════════════════════════════════════ */
.hero-section.hero-theme-dark,
.hero-section[data-hero-theme="dark"] {
  background-color: #0B192C;
  color: #FFFFFF;
}

.hero-section.hero-theme-dark .carousel-item,
.hero-section[data-hero-theme="dark"] .carousel-item {
  background-color: #0B192C; /* fallback mientras carga la foto */
  /* Las fotos se definen en .hero-slide-1/2/3; no se sobreescribe aquí */
  background-repeat: no-repeat;
}

.hero-section.hero-theme-dark .carousel-item::before,
.hero-section[data-hero-theme="dark"] .carousel-item::before {
  background: linear-gradient(180deg, rgba(11, 25, 44, 0.45) 0%, rgba(11, 25, 44, 0.72) 100%);
}

.hero-section.hero-theme-dark .hero-actions .btn-warning,
.hero-section[data-hero-theme="dark"] .hero-actions .btn-warning {
  background-color: var(--color-bases-amber);
  border-color: var(--color-bases-amber);
  color: #0B192C;
}

.hero-section.hero-theme-dark .hero-actions .btn-warning:hover,
.hero-section[data-hero-theme="dark"] .hero-actions .btn-warning:hover {
  background-color: #D97706;
  border-color: #D97706;
}

@media (min-width: 992px) {
  .hero-section.hero-theme-dark .hero-caption,
  .hero-section[data-hero-theme="dark"] .hero-caption {
    max-width: min(530px, 44vw);
    padding: clamp(0.75rem, 1.2vw, 1.15rem) clamp(0.9rem, 1.5vw, 1.35rem);
    margin: 0;
  }
}

@media (max-width: 991.98px) {
  .hero-section.hero-theme-dark .hero-caption,
  .hero-section[data-hero-theme="dark"] .hero-caption {
    max-width: 100%;
    margin: 0.5rem 0 1rem;
    padding: 1.15rem 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   OPCIÓN 3: CUADRANTES TEMÁTICOS POR SLIDE (1 color protagónico por diapositiva)
   ══════════════════════════════════════════════════════════════════════════ */
.hero-section.hero-theme-sequence,
.hero-section[data-hero-theme="sequence"] {
  background-color: #0B192C;
  color: #FFFFFF;
}

.hero-section.hero-theme-sequence .hero-slide-1,
.hero-section[data-hero-theme="sequence"] .hero-slide-1 {
  background-color: #0B2545;
  background-image: url("../img/slides/slide_1.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}

.hero-section.hero-theme-sequence .hero-slide-2,
.hero-section[data-hero-theme="sequence"] .hero-slide-2 {
  background-color: #064E3B;
  background-image: url("../img/slides/slide_2.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}

.hero-section.hero-theme-sequence .hero-slide-3,
.hero-section[data-hero-theme="sequence"] .hero-slide-3 {
  background-color: #31135E;
  background-image: url("../img/slides/slide_3.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}

.hero-section.hero-theme-sequence .carousel-item::before,
.hero-section[data-hero-theme="sequence"] .carousel-item::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.58) 100%);
}

.hero-section.hero-theme-sequence .hero-actions .btn-warning,
.hero-section[data-hero-theme="sequence"] .hero-actions .btn-warning {
  background-color: var(--color-bases-amber);
  border-color: var(--color-bases-amber);
  color: #0B192C;
}

@media (min-width: 992px) {
  .hero-section.hero-theme-sequence .hero-caption,
  .hero-section[data-hero-theme="sequence"] .hero-caption {
    max-width: min(530px, 44vw);
    padding: clamp(0.75rem, 1.2vw, 1.15rem) clamp(0.9rem, 1.5vw, 1.35rem);
    margin: 0;
  }
}

@media (max-width: 991.98px) {
  .hero-section.hero-theme-sequence .hero-caption,
  .hero-section[data-hero-theme="sequence"] .hero-caption {
    max-width: 100%;
    margin: 0.5rem 0 1rem;
    padding: 1.15rem 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   OPCIÓN 4: GLASSMORPHISM HÍBRIDO (Fondo bases + panel flotante esmerilado)
   ══════════════════════════════════════════════════════════════════════════ */
.hero-section.hero-theme-glass,
.hero-section[data-hero-theme="glass"] {
  background-color: #F8FAFC;
  background-image: 
    radial-gradient(circle at 18% 35%, rgba(56, 189, 248, 0.26) 0%, transparent 45%),
    radial-gradient(circle at 45% 62%, rgba(52, 211, 153, 0.22) 0%, transparent 42%),
    radial-gradient(circle at 76% 36%, rgba(245, 158, 11, 0.24) 0%, transparent 45%),
    radial-gradient(circle at 92% 70%, rgba(236, 72, 153, 0.20) 0%, transparent 40%),
    var(--bg-world-map-light);
  background-size: cover, cover, cover, cover, 960px auto;
  background-position: center;
  color: var(--color-bases-navy);
}

.hero-section.hero-theme-glass .carousel-item,
.hero-section[data-hero-theme="glass"] .carousel-item {
  background-color: transparent;
  /* Las fotos se definen en .hero-slide-1/2/3; no se sobreescribe aquí */
}

.hero-section.hero-theme-glass .carousel-item::before,
.hero-section[data-hero-theme="glass"] .carousel-item::before {
  display: none;
}

.hero-section.hero-theme-glass .hero-caption,
.hero-section[data-hero-theme="glass"] .hero-caption {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(11, 37, 69, 0.08);
}

@media (min-width: 992px) {
  .hero-section.hero-theme-glass .hero-caption,
  .hero-section[data-hero-theme="glass"] .hero-caption {
    max-width: min(530px, 44vw);
    padding: clamp(0.75rem, 1.2vw, 1.15rem) clamp(0.9rem, 1.5vw, 1.35rem);
    margin: 0;
  }
}

@media (max-width: 991.98px) {
  .hero-section.hero-theme-glass .hero-caption,
  .hero-section[data-hero-theme="glass"] .hero-caption {
    max-width: 100%;
    margin: 0.5rem 0 1rem;
    padding: 1.15rem 1rem;
  }
}

.hero-section.hero-theme-glass .hero-title,
.hero-section[data-hero-theme="glass"] .hero-title {
  color: var(--color-bases-navy);
  text-shadow: none;
}

.hero-section.hero-theme-glass .hero-kicker,
.hero-section[data-hero-theme="glass"] .hero-kicker {
  color: var(--color-bases-navy);
  background: rgba(11, 37, 69, 0.06);
  border: 1px solid rgba(11, 37, 69, 0.12);
  padding: .35rem .95rem;
  border-radius: 50rem;
}

.hero-section.hero-theme-glass .hero-slogan,
.hero-section[data-hero-theme="glass"] .hero-slogan {
  color: #334155;
}

.hero-section.hero-theme-glass .hero-meta-item,
.hero-section[data-hero-theme="glass"] .hero-meta-item {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(11, 37, 69, 0.12);
  padding: .45rem .85rem;
  border-radius: var(--radius-md);
}

.hero-section.hero-theme-glass .hero-meta-item strong,
.hero-section[data-hero-theme="glass"] .hero-meta-item strong {
  color: var(--color-bases-navy);
}

.hero-section.hero-theme-glass .hero-meta-item span,
.hero-section[data-hero-theme="glass"] .hero-meta-item span {
  color: #4A5568;
}

.hero-section.hero-theme-glass .hero-meta-item .meta-icon,
.hero-section[data-hero-theme="glass"] .hero-meta-item .meta-icon {
  background: rgba(11, 37, 69, 0.06);
  border-color: rgba(11, 37, 69, 0.15);
  color: var(--color-bases-navy);
}

.hero-section.hero-theme-glass .hero-actions .btn-warning,
.hero-section[data-hero-theme="glass"] .hero-actions .btn-warning {
  background-color: var(--color-bases-orange);
  border-color: var(--color-bases-orange);
  color: #FFFFFF;
}

.hero-section.hero-theme-glass .hero-actions .btn-outline-light,
.hero-section[data-hero-theme="glass"] .hero-actions .btn-outline-light {
  border-color: var(--color-bases-navy);
  color: var(--color-bases-navy);
}

.hero-section.hero-theme-glass .hero-actions .btn-outline-light:hover,
.hero-section[data-hero-theme="glass"] .hero-actions .btn-outline-light:hover {
  background-color: var(--color-bases-navy);
  color: #FFFFFF;
}

/* Tema Glass: misma corrección — flechas azul marino sobre fondo glassmorphism blanco */
.hero-section.hero-theme-glass .carousel-control-prev-icon,
.hero-section[data-hero-theme="glass"] .carousel-control-prev-icon {
  background-color: rgba(255, 255, 255, 0.82);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B2545'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
  border: 1px solid rgba(11, 37, 69, 0.18);
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.10);
}
.hero-section.hero-theme-glass .carousel-control-next-icon,
.hero-section[data-hero-theme="glass"] .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.82);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230B2545'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  border: 1px solid rgba(11, 37, 69, 0.18);
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.10);
}

.hero-section.hero-theme-glass .carousel-indicators [data-bs-target],
.hero-section[data-hero-theme="glass"] .carousel-indicators [data-bs-target] {
  border-color: var(--color-bases-navy);
}

.hero-section.hero-theme-glass .carousel-indicators .active,
.hero-section[data-hero-theme="glass"] .carousel-indicators .active {
  background: var(--color-bases-orange);
  border-color: var(--color-bases-orange);
}

.hero-section.hero-theme-glass .carousel-pause-btn,
.hero-section[data-hero-theme="glass"] .carousel-pause-btn {
  background: rgba(11, 37, 69, 0.12);
  color: var(--color-bases-navy);
  border-color: rgba(11, 37, 69, 0.25);
}


/* --------------------------------------------------------------------------
   7. VIDEO WRAPPER (YouTube lazy-load)
   -------------------------------------------------------------------------- */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Placeholder de carga */
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: linear-gradient(135deg, var(--color-bg-dark), var(--color-primary));
  color: #fff;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: center;
  padding: var(--space-md);
}

.video-placeholder:hover,
.video-placeholder:focus-visible {
  background: linear-gradient(135deg, #0a1726, var(--color-primary-light));
}

.video-placeholder .play-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, .15);
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  font-size: 1.7rem;
  transition: transform var(--transition), background var(--transition);
}

.video-placeholder:hover .play-icon,
.video-placeholder:focus-visible .play-icon {
  transform: scale(1.08);
  background: rgba(255, 255, 255, .25);
}

.video-placeholder .video-label {
  font-weight: 600;
  font-size: .95rem;
}

.video-placeholder .video-sub {
  font-size: .82rem;
  color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------------------------
   8. SECCIONES GENÉRICAS
   -------------------------------------------------------------------------- */
.section-padding {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}

.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-xl);
}

.section-header .section-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
}

.section-header h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.section-header p {
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
}

.bg-light-custom {
  background: var(--color-bg-light);
}

/* --------------------------------------------------------------------------
   9. PROPÓSITO — tarjetas de objetivos y banner de sede
   -------------------------------------------------------------------------- */
.sede-banner-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .09);
  border: 1px solid var(--color-border);
  background: var(--color-bg-white);
  transition: transform var(--transition), box-shadow var(--transition);
}

.sede-banner-wrapper:hover {
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
}

.sede-banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.purpose-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.purpose-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.purpose-card:hover,
.purpose-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(27, 58, 92, .10);
  border-color: var(--color-primary-light);
}

.purpose-card .card-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  border-radius: 50%;
  font-size: 1.5rem;
}

.purpose-card h3 {
  font-size: var(--fs-h3);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.purpose-card p {
  font-size: .95rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. ALIADOS — slider infinito de logos
   -------------------------------------------------------------------------- */

/* Fondo y contención del desbordamiento del slider */
#aliados {
  background-color: #f8f9fa;
  overflow: hidden;
}

/* Keyframe: desplaza el track completo (200px × 8 slides) */
@keyframes logos-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-200px * 8)); }
}

/* Contenedor principal del slider de logos */
.logos-slider {
  height: 150px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Degradados en los bordes */
.logos-slider::before,
.logos-slider::after {
  content: "";
  height: 100%;
  position: absolute;
  width: 15%;
  z-index: 2;
  pointer-events: none;
}

.logos-slider::before {
  left: 0;
  top: 0;
  background: linear-gradient(to left, rgba(248,249,250,0), #f8f9fa);
}

.logos-slider::after {
  right: 0;
  top: 0;
  background: linear-gradient(to right, rgba(248,249,250,0), #f8f9fa);
}

/* Track animado */
.logo-track {
  animation: logos-scroll 30s linear infinite;
  display: flex;
  width: calc(200px * 16); /* 8 logos × 2 (original + duplicados) */
}

/* Pausa al pasar el mouse */
.logos-slider:hover .logo-track {
  animation-play-state: paused;
}

/* Logo individual */
.logo-slide {
  height: 150px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  flex-shrink: 0;
}

/* Imágenes de logos */
.logo-slide img {
  max-height: 120px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* --------------------------------------------------------------------------
   11. INSCRIPCIÓN — tarjetas reemplazo de imágenes JPG
   -------------------------------------------------------------------------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.card-inscripcion {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.card-inscripcion:hover,
.card-inscripcion:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(27, 58, 92, .13);
  border-color: var(--color-primary-light);
}

.card-inscripcion .card-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 1.8rem;
}

.card-inscripcion h3 {
  font-size: var(--fs-h3);
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.card-inscripcion p {
  flex-grow: 1;
  font-size: .95rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.card-inscripcion .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .7rem 1.2rem;
  font-weight: 600;
  border-radius: 50rem;
}

/* --------------------------------------------------------------------------
   12. PROGRAMA — filtros
   -------------------------------------------------------------------------- */
.filtros-form {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}

.filtros-form .form-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--color-primary);
  margin-bottom: .35rem;
}

.filtros-form .form-control,
.filtros-form .form-select {
  border-radius: var(--radius-md);
  border-color: var(--color-border);
  padding: .6rem .9rem;
  font-size: .95rem;
}

.filtros-form .form-control:focus,
.filtros-form .form-select:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 .2rem rgba(0, 123, 131, .18);
}

.filtros-form .form-text {
  font-size: .8rem;
  color: var(--color-text-muted);
}

.filtros-form .btn-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--color-primary);
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--transition), color var(--transition);
}

.filtros-form .btn-clear:hover,
.filtros-form .btn-clear:focus-visible {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Contador */
.contador-resultados {
  text-align: center;
  font-size: .9rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.contador-resultados span {
  font-weight: 700;
  color: var(--color-primary);
}

/* Mensaje vacío */
.empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--color-bg-light);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}

.empty-state i,
.empty-state svg {
  font-size: 2.5rem;
  color: var(--color-secondary);
  margin-bottom: var(--space-sm);
}

.empty-state p {
  margin-bottom: var(--space-md);
  font-size: 1rem;
}

/* Loading */
.loading-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text-muted);
}

.loading-state .spinner-border {
  color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   13. GRID DE PONENCIAS
   -------------------------------------------------------------------------- */
.ponencias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.ponencia-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.ponencia-card:hover,
.ponencia-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(27, 58, 92, .11);
  border-color: var(--color-primary-light);
}

.ponencia-card .card-topbar {
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.ponencia-card .card-body-custom {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--space-lg);
}

.ponencia-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: var(--space-sm);
}

.badge-tipo {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  border-radius: 50rem;
  background: var(--color-primary);
  color: #fff;
}

.badge-tipo[data-tipo="magistral"] { background: var(--color-accent-dark); }
.badge-tipo[data-tipo="oral"]      { background: var(--color-primary); }
.badge-tipo[data-tipo="poster"]    { background: var(--color-secondary); }

.badge-area {
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .65rem;
  border-radius: 50rem;
  background: var(--color-bg-light);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.ponencia-card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.ponencia-autores {
  font-size: .88rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.ponencia-resumen {
  font-size: .88rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ponencia-keywords {
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.ponencia-keywords span {
  color: var(--color-secondary);
  font-weight: 600;
}

.ponencia-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.ponencia-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.ponencia-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: auto;
}

.ponencia-actions .btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: var(--radius-md);
}

/* Detalle (colapsable) */
.ponencia-detalle {
  font-size: .88rem;
  color: var(--color-text);
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  border-left: 3px solid var(--color-secondary);
}

/* --------------------------------------------------------------------------
   14. MEMORIAS — grid de ediciones anteriores
   -------------------------------------------------------------------------- */
.memorias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.memoria-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.memoria-card:hover,
.memoria-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(27, 58, 92, .14);
  border-color: var(--color-primary-light);
}

.memoria-card .memoria-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
}

.memoria-card .memoria-year .year {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.memoria-card .memoria-year .edition-badge {
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .6rem;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50rem;
}

.memoria-card .memoria-img-link {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}

.memoria-card .memoria-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease;
}

.memoria-card:hover .memoria-img,
.memoria-card:focus-within .memoria-img {
  transform: scale(1.05);
}

.memoria-card .memoria-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--space-md);
}

.memoria-card .memoria-actions {
  display: flex;
  margin-top: auto;
}

.memoria-card .memoria-actions .btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  font-weight: 700;
  font-size: .95rem;
  border-radius: var(--radius-md);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.memoria-card .memoria-actions .btn:hover,
.memoria-card .memoria-actions .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(27, 58, 92, .25);
}

/* Feedback copiado */
.btn-copied {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   16. CONTACTO
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}

.contact-item:hover,
.contact-item:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(27, 58, 92, .09);
}

.contact-item .contact-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 1.2rem;
}

.contact-item h3 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: .2rem;
}

.contact-item p,
.contact-item a {
  font-size: .92rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
  text-decoration: none;
}

.contact-item a:hover,
.contact-item a:focus-visible {
  color: var(--color-secondary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--color-bg-dark);
  color: rgba(255, 255, 255, .88);
}

.footer-main {
  padding-top: var(--section-pad-y);
  padding-bottom: var(--space-xl);
}

.footer h2,
.footer h3 {
  font-size: .95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.footer p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .72);
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer ul li {
  margin-bottom: .5rem;
}

.footer ul a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  transition: color var(--transition), transform var(--transition);
}

.footer ul a:hover,
.footer ul a:focus-visible {
  color: var(--color-accent);
  transform: translateX(3px);
}

.footer .footer-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: var(--space-md);
}

.footer .footer-logo .footer-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .25));
}

.footer .footer-logo strong {
  font-size: 1.1rem;
  color: #fff;
}

.footer .footer-logo small {
  display: block;
  font-size: .75rem;
  color: rgba(255, 255, 255, .60);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: var(--space-md) 0;
}

.footer-bottom p {
  font-size: .82rem;
  color: rgba(255, 255, 255, .60);
  margin-bottom: .35rem;
}

.footer-bottom a {
  color: var(--color-accent);
  text-decoration: none;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  text-decoration: underline;
}

/* QR */
.qr-container {
  text-align: center;
  padding: var(--space-lg);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
}

.qr-container h4 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.qr-container p {
  font-size: .8rem;
  color: rgba(255, 255, 255, .65);
  margin-bottom: var(--space-md);
}

.qr-canvas-wrapper {
  display: inline-block;
  padding: var(--space-sm);
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.qr-canvas-wrapper canvas,
.qr-canvas-wrapper img {
  display: block;
  width: 140px !important;
  height: 140px !important;
}

.btn-qr-download {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 50rem;
  cursor: pointer;
  transition: background var(--transition);
}

.btn-qr-download:hover,
.btn-qr-download:focus-visible {
  background: rgba(255, 255, 255, .24);
}

/* --------------------------------------------------------------------------
   18. WHATSAPP FLOTANTE
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 14px 20px;
  background: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  border-radius: 50rem;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
  transition: transform var(--transition), box-shadow var(--transition);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 28px rgba(37, 211, 102, .55);
  color: #fff;
}

.whatsapp-float svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.whatsapp-float .wa-text {
  display: none;
}

@media (min-width: 768px) {
  .whatsapp-float .wa-text {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   18b. BOTÓN "IR ARRIBA"
   -------------------------------------------------------------------------- */
.btn-volver-arriba {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1040;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  cursor: pointer;
  /* Oculto de forma segura hasta hacer scroll */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  box-shadow: 0 6px 18px rgba(27, 58, 92, .35);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition), background var(--transition);
}

.btn-volver-arriba.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-volver-arriba:hover,
.btn-volver-arriba:focus-visible {
  background: var(--color-secondary);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 123, 131, .40);
}

.btn-volver-arriba:active {
  transform: translateY(0);
}

.btn-volver-arriba svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 575.98px) {
  .btn-volver-arriba {
    bottom: 16px;
    left: 16px;
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   19. UTILIDADES / A11Y
   -------------------------------------------------------------------------- */

/* Visually hidden (reemplaza .sr-only antiguo) */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-to target recibe foco sin outline extra */
#main-content:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE — breakpoints
   -------------------------------------------------------------------------- */

/* ≤575.98px — móviles pequeños */
@media (max-width: 575.98px) {
  .navbar-brand .brand-logo-img {
    height: 48px;
    max-width: 200px;
  }

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


  .hero-meta {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .hero-actions .btn {
    flex: 1;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
  }

  .whatsapp-float {
    bottom: 16px;
    right: 16px;
    padding: 12px;
    border-radius: 50%;
  }

  .whatsapp-float .wa-text {
    display: none !important;
  }
}

/* 576–767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .ponencias-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 768–991.98px — tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar-nav {
    gap: .15rem;
  }

  .navbar-nav .nav-link {
    font-size: .88rem;
    padding: .45rem .55rem !important;
  }
}

/* ≥992px — desktop: navbar expandido */
@media (min-width: 992px) {
  .navbar-collapse {
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   21. PREFERS-REDUCED-MOTION — WCAG 2.3.3
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* El slider de logos necesita animación para funcionar —
     se pausa en vez de eliminarse para mantener el layout */
  .logo-track {
    animation-duration: 40s !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }

  /* El carrusel de Bootstrap necesita que su transición emita transitionend
     para no quedarse bloqueado en estado _isSliding */
  .hero-section .carousel-item {
    transition-duration: .6s !important;
  }
}

/* --------------------------------------------------------------------------
   22. PREFERS-CONTRAST — soporte adicional
   -------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000;
    --color-text-muted: #000;
  }

  .ponencia-card,
  .memoria-card,
  .card-inscripcion,
  .purpose-card {
    border-width: 2px;
  }
}

/* --------------------------------------------------------------------------
   22. GLOBE WIDGET — Visitantes en Vivo (footer)
   -------------------------------------------------------------------------- */

/* Columna contenedora */
#globe-col {
  padding-top: var(--space-sm);
}

/* Contenedor principal del widget */
.globe-widget {
  isolation: isolate;
  position: relative;
  width: 280px;
  max-width: 100%;
  height: 360px;
  border-radius: .75rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(14, 31, 51, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s ease;
}
.globe-widget:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, .65);
}

/* ── Cabecera ── */
.globe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(14, 31, 51, .6);
  z-index: 1;
  flex-shrink: 0;
}
.globe-title {
  font-size: .8rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.globe-subtitle {
  font-size: .7rem;
  color: rgba(255, 255, 255, .5);
  margin: .1rem 0 0;
}

/* Indicador verde animado */
.globe-live-dot {
  position: relative;
  display: inline-flex;
  width: .75rem;
  height: .75rem;
  flex-shrink: 0;
}
.globe-live-dot__ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #10b981;
  opacity: .75;
  animation: globe-ping 1.2s cubic-bezier(0, 0, .2, 1) infinite;
}
.globe-live-dot__core {
  position: relative;
  display: inline-flex;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: #10b981;
}
@keyframes globe-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ── Área del canvas ── */
.globe-canvas-area {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  background: linear-gradient(to bottom, transparent, rgba(14, 31, 51, .25));
}
.globe-canvas-area:active { cursor: grabbing; }
.globe-canvas {
  outline: none;
  touch-action: none;
  will-change: transform;
  display: block;
}

/* ── Skeleton loader ── */
.globe-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #122B44 25%, #1B3A5C 50%, #122B44 75%);
  background-size: 200% 100%;
  animation: globe-shimmer 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes globe-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Tooltip ── */
.globe-tooltip {
  position: absolute;
  display: none;
  z-index: 50;
  min-width: 150px;
  border-radius: .375rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(14, 31, 51, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: .625rem .75rem;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
  pointer-events: none;
  animation: globe-fadeIn .2s ease-in-out forwards;
}
@keyframes globe-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.globe-tooltip__inner    { display: flex; flex-direction: column; gap: .25rem; }
.globe-tooltip__location { display: flex; align-items: center; gap: .5rem; }
.globe-tooltip__flag     { font-size: 1.25rem; line-height: 1; }
.globe-tooltip__names    { display: flex; flex-direction: column; }
.globe-tooltip__city     { font-size: .7rem; font-weight: 700; line-height: 1.1; }
.globe-tooltip__country  { font-size: .625rem; opacity: .7; }
.globe-tooltip__divider  { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: .25rem 0; }
.globe-tooltip__meta     { display: flex; justify-content: space-between; align-items: center; }
.globe-tooltip__time,
.globe-tooltip__coords   { font-size: .625rem; opacity: .6; }
.globe-tooltip__coords   { font-family: monospace; }

/* ── Pie del widget ── */
.globe-footer {
  padding: .5rem .75rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(14, 31, 51, .7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.globe-status {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .625rem;
  color: rgba(255, 255, 255, .5);
}
.globe-status__dot {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  transition: background .3s;
}
.globe-status[data-connected="false"] .globe-status__dot { background: #ef4444; }
.globe-link {
  font-size: .625rem;
  color: var(--color-accent);
  text-decoration: none;
  opacity: .8;
  transition: opacity .2s;
}
.globe-link:hover,
.globe-link:focus-visible { opacity: 1; text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .globe-widget { width: 260px; height: 320px; }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .globe-live-dot__ping,
  .globe-skeleton { animation: none; }
}

/* --------------------------------------------------------------------------
   23. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .header-sticky,
  .whatsapp-float,
  .hero-admin-bar,
  .qr-container,
  .globe-widget,
  .hero-section .carousel-indicators,
  .hero-section .carousel-control-prev,
  .hero-section .carousel-control-next,
  .filtros-form .btn-clear {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .ponencias-grid,
  .memorias-grid,
  .cards-grid {
    grid-template-columns: 1fr;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #555;
  }
}

/* ==========================================================================
   24. PANEL ADMINISTRADOR: SELECTOR DE TEMA HERO (Bases de Participación)
   ========================================================================== */
.hero-admin-bar {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1045;
  font-family: inherit;
}

.hero-admin-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--color-bases-navy);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 8px 24px rgba(11, 37, 69, .35);
  padding: .5rem 1rem;
  border-radius: 50rem;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.hero-admin-pill-btn:hover {
  transform: translateY(-2px);
  background: var(--color-bases-navy-light);
  box-shadow: 0 10px 28px rgba(11, 37, 69, .45);
}

.hero-admin-panel {
  display: none;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  border-radius: var(--radius-lg);
  width: 320px;
  max-width: calc(100vw - 40px);
  padding: 1.25rem;
  margin-bottom: .6rem;
  color: var(--color-text);
  animation: heroAdminSlideUp .22s ease-out;
}

.hero-admin-panel.is-open {
  display: block;
}

@keyframes heroAdminSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--color-border);
}

.hero-admin-header h4 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-bases-navy);
  display: flex;
  align-items: center;
  gap: .4rem;
}

.hero-admin-header .btn-close-sm {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: .2rem .4rem;
  line-height: 1;
}

.hero-admin-options {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-bottom: .85rem;
}

.hero-admin-opt-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
  color: var(--color-text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.hero-admin-opt-btn:hover {
  background: rgba(27, 58, 92, .08);
  border-color: var(--color-primary-light);
}

.hero-admin-opt-btn.is-active {
  background: var(--color-bases-navy);
  color: #FFFFFF;
  border-color: var(--color-bases-navy);
}

.hero-admin-opt-btn .opt-badge {
  font-size: .68rem;
  padding: .15rem .45rem;
  border-radius: 50rem;
  background: rgba(255, 255, 255, .25);
  font-weight: 700;
}

.hero-admin-opt-btn:not(.is-active) .opt-badge {
  background: rgba(0, 0, 0, .07);
  color: var(--color-text-muted);
}

.hero-admin-actions {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.hero-admin-save-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--color-success);
  color: #FFFFFF;
  border: none;
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}

.hero-admin-save-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}

.hero-admin-save-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.hero-admin-status {
  font-size: .75rem;
  text-align: center;
  min-height: 1.25rem;
  font-weight: 600;
  transition: opacity .2s ease;
}

.hero-admin-status.status-success {
  color: var(--color-success);
}

.hero-admin-status.status-error {
  color: var(--color-danger);
}

/* ==========================================================================
   PROGRAMA: BANNER ELEGANTE "PRÓXIMAMENTE" Y CUENTA REGRESIVA
   Visible previo a la fecha de apertura (30 de noviembre de 2026)
   ========================================================================== */
.programa-proximamente {
  position: relative;
  max-width: 820px;
  margin: 2.5rem auto 0;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
  background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1px solid rgba(27, 58, 92, 0.12);
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(11, 37, 69, 0.08), 0 2px 8px rgba(11, 37, 69, 0.04);
  overflow: hidden;
}

.programa-proximamente::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
}

.prox-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(27, 58, 92, 0.08) 0%, rgba(212, 168, 67, 0.16) 100%);
  color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(27, 58, 92, 0.08);
}

.prox-icon {
  font-size: 2.3rem;
  color: var(--color-primary);
}

.prox-headline {
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.prox-date {
  font-size: clamp(1.75rem, 3.8vw, 2.5rem);
  font-weight: 800;
  color: var(--color-bases-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.prox-desc {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.prox-countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 1.8vw, 1.25rem);
  flex-wrap: wrap;
  margin-top: 1rem;
}

.prox-unit {
  background: #FFFFFF;
  border: 1px solid rgba(27, 58, 92, 0.12);
  border-radius: 16px;
  min-width: clamp(75px, 18vw, 105px);
  padding: clamp(0.75rem, 1.8vw, 1.15rem) clamp(0.5rem, 1.2vw, 0.85rem);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.prox-unit:hover {
  transform: translateY(-3px);
  border-color: var(--color-secondary);
  box-shadow: 0 8px 22px rgba(0, 123, 131, 0.12);
}

.prox-num {
  display: block;
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.prox-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
}

@media (max-width: 575.98px) {
  .prox-unit {
    min-width: 68px;
    padding: 0.65rem 0.4rem;
  }
}