/* =========================================================
       VARIABLES — paleta, tipografía, espaciado, sistema
       ========================================================= */
    :root {
      /* ----- Paleta institucional FIU + GHC ----- */
      --color-navy-deep: #061735;        /* Navy profundo (fondos hero, footer) */
      --color-navy: #081E3F;              /* FIU Blue oficial */
      --color-navy-mid: #0E2E5C;          /* Navy intermedio (transiciones) */
      --color-cyan: #00A9CE;              /* Cyan GHC, heredado del logo */
      --color-cyan-soft: #5BC3D4;         /* Cyan suave para acentos */
      --color-gold: #B6862C;              /* FIU Gold — uso quirúrgico */
      --color-gold-soft: #C9A14A;         /* Gold suave para detalles */

      /* ----- Neutros ----- */
      --color-bone: #FFFFFF;              /* Blanco puro */
      --color-paper: #F5F7FA;             /* Blanco azulado muy claro para alternar secciones */
      --color-graphite: #1F2A37;          /* Texto principal sobre claro */
      --color-graphite-soft: #4A5868;     /* Texto secundario */
      --color-line: rgba(8, 30, 63, 0.12);/* Líneas separadoras */
      --color-line-light: rgba(244, 241, 234, 0.18);

      /* ----- Tipografía -----
         Alineada con FIU Brand Manual (Frank New / Proxima Nova como referencia).
         --font-text: tipografía base humanista moderna (cuerpos, navegación, texto largo).
         --font-display: condensada institucional para títulos y acentos jerárquicos. */
      --font-display: 'Archivo Narrow', 'Inter', Helvetica, Arial, sans-serif;
      --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

      /* Escala tipográfica fluida (clamp) */
      --fs-eyebrow: clamp(0.72rem, 0.65rem + 0.3vw, 0.82rem);
      --fs-body-sm: clamp(0.88rem, 0.82rem + 0.25vw, 0.95rem);
      --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
      --fs-body-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
      --fs-h3: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
      --fs-h2: clamp(1.9rem, 1.5rem + 1.6vw, 2.85rem);
      --fs-h1: clamp(2.4rem, 1.8rem + 2.6vw, 4.2rem);
      --fs-display: clamp(2.8rem, 2rem + 3.6vw, 5.2rem);

      /* ----- Espaciado ----- */
      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 1.5rem;
      --space-lg: 2.5rem;
      --space-xl: 4rem;
      --space-2xl: 6rem;
      --space-3xl: 9rem;

      /* ----- Layout ----- */
      --container-max: 1280px;
      --container-narrow: 1040px;
      --container-pad: clamp(1.25rem, 4vw, 3rem);

      /* ----- Otros ----- */
      --radius: 4px;
      --radius-lg: 12px;
      --shadow-soft: 0 4px 24px rgba(6, 23, 53, 0.08);
      --shadow-deep: 0 12px 48px rgba(6, 23, 53, 0.18);
      --transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* =========================================================
       RESET + BASE
       ========================================================= */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    /* Compensar el header fijo (~76px) cuando navegamos a una ancla.
       Sin esto, la sección destino queda parcialmente tapada. */
    section[id] {
      scroll-margin-top: 84px;
    }

    body {
      font-family: var(--font-text);
      font-size: var(--fs-body);
      line-height: 1.6;
      color: var(--color-graphite);
      background: var(--color-paper);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }

    /* Utility de accesibilidad: contenido visible para lectores de pantalla
       pero oculto visualmente. Usado para H1 semánticos cuando la jerarquía
       visual la dan piezas gráficas (lockups, logos). */
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* =========================================================
       UTILIDADES DE LAYOUT
       ========================================================= */
    .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding-left: var(--container-pad);
      padding-right: var(--container-pad);
    }

    .container--narrow {
      max-width: var(--container-narrow);
    }

    /* =========================================================
       SISTEMA DE TÍTULOS DE SECCIÓN (anti-minimalismo)
       Eyebrow + título + bajada + trazo ancla
       ========================================================= */
    .section-head {
      max-width: 720px;
      margin-bottom: var(--space-xl);
    }

    .section-head__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-family: var(--font-display);
      font-size: var(--fs-eyebrow);
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-cyan);
      margin-bottom: var(--space-md);
    }

    .section-head__eyebrow::before {
      content: "";
      width: 32px;
      height: 1px;
      background: var(--color-cyan);
    }

    .section-head__title {
      font-family: var(--font-text);
      font-size: var(--fs-h2);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: var(--color-navy);
      margin-bottom: var(--space-md);
    }

    /* Acento dentro del título: peso liviano + color cyan (no cursiva editorial) */
    .section-head__title em {
      font-style: normal;
      font-weight: 400;
      color: var(--color-cyan);
    }

    .section-head__lede {
      font-size: var(--fs-body-lg);
      line-height: 1.55;
      color: var(--color-graphite-soft);
      max-width: 620px;
    }

    /* Rule decorativo: micro-versión del acento Gold → Cyan.
       Repite el ADN cromático institucional a escala de detalle. */
    .section-head__rule {
      display: block;
      width: 56px;
      height: 2px;
      background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-cyan) 100%);
      margin-top: var(--space-lg);
    }

    /* Variante sobre fondo navy */
    .section-head--dark .section-head__title { color: var(--color-bone); }
    .section-head--dark .section-head__lede { color: rgba(244, 241, 234, 0.78); }
    .section-head--dark .section-head__eyebrow { color: var(--color-cyan-soft); }
    .section-head--dark .section-head__eyebrow::before { background: var(--color-cyan-soft); }

    /* =========================================================
       HEADER GLOBAL (sticky)
       ========================================================= */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 1rem 0;
      background: rgba(6, 23, 53, 0.85);
      backdrop-filter: saturate(140%) blur(14px);
      -webkit-backdrop-filter: saturate(140%) blur(14px);
      border-bottom: 1px solid rgba(244, 241, 234, 0.08);
      transition: background var(--transition);
    }

    .site-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-lg);
    }

    .site-header__logo {
      /* Logo de la conferencia en versión horizontal compacta */
      display: flex;
      align-items: center;
      height: 44px;
      color: var(--color-bone);
    }

    .site-header__logo img,
    .site-header__logo-img {
      height: 100%;
      width: auto;
    }

    /* Logo del header: PNG con transparencia real, no requiere blend mode. */
    .site-header__logo-img {
      /* (sin filtros) */
    }

    .site-nav {
      display: flex;
      align-items: center;
      gap: var(--space-lg);
    }

    .site-nav__list {
      display: flex;
      gap: 1.75rem;
      list-style: none;
    }

    .site-nav__list a {
      font-size: 0.9rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      color: var(--color-bone);
      opacity: 0.85;
      transition: opacity var(--transition), color var(--transition);
      position: relative;
      padding: 0.25rem 0;
    }

    .site-nav__list a:hover {
      opacity: 1;
      color: var(--color-cyan-soft);
    }

    .site-nav__lang {
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      color: var(--color-bone);
      opacity: 0.7;
    }

    .site-nav__lang strong { color: var(--color-cyan-soft); opacity: 1; font-weight: 600; }
    .site-nav__lang a { color: inherit; text-decoration: none; transition: opacity 160ms ease; }
    .site-nav__lang a:hover { color: var(--color-cyan-soft); opacity: 1; text-decoration: underline; }

    .site-nav__cta {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.65rem 1.25rem;
      background: var(--color-cyan);
      color: var(--color-navy-deep);
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: var(--radius);
      transition: background var(--transition), transform var(--transition);
    }

    .site-nav__cta:hover {
      background: var(--color-cyan-soft);
      transform: translateY(-1px);
    }

    /* Variante secundaria del CTA (Enviar resumen):
       outline cyan sobre navy, mismo tamaño que el primario.
       Mantiene el contraste con el CTA principal (Inscribirse). */
    .site-nav__cta--secondary {
      background: transparent;
      color: var(--color-cyan);
      box-shadow: inset 0 0 0 1px var(--color-cyan);
    }
    .site-nav__cta--secondary:hover {
      background: rgba(0, 169, 206, 0.12);
      color: var(--color-cyan);
    }

    .site-nav__ctas {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
    }

    .site-header__menu-toggle {
      display: none;
      color: var(--color-bone);
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 0;
      cursor: pointer;
      padding: 0;
    }
    .site-header__menu-toggle:hover { color: var(--color-cyan-soft); }

    /* =========================================================
       MOBILE NAV — panel desplegable abajo del header (≤960px)
       En mobile, el orden visual del header es:
       [logo] ........... [ES · EN] [≡]
       El toggle ES/EN queda SIEMPRE visible y pegado al hamburguesa.
       Al tocar ≡, .site-nav recibe .is-open (manejado por
       assets/js/menu.js) y se expande como panel full-width navy
       con: lista de links + CTAs (el ES/EN no se duplica adentro).
       ========================================================= */
    @media (max-width: 960px) {
      .site-nav__list { display: none; }
      .site-nav__ctas { display: none; }
      .site-header__menu-toggle { display: inline-flex; }

      /* ES/EN fijo a la derecha del header, pegado al hamburguesa */
      .site-nav {
        gap: 0.6rem;
      }
      .site-nav__lang {
        display: inline-flex;
        align-items: center;
        order: 1;               /* antes del hamburguesa */
        margin-left: auto;
        font-size: 0.82rem;
        letter-spacing: 0.14em;
        opacity: 0.9;
        padding: 0.25rem 0.1rem;
      }
      .site-header__menu-toggle {
        order: 2;
      }

      .site-nav.is-open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1.2rem;
        padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 1.8rem;
        background: rgba(6, 23, 53, 0.98);
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        border-top: 1px solid rgba(244, 241, 234, 0.08);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
      }

      .site-nav.is-open .site-nav__list {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .site-nav.is-open .site-nav__list li {
        border-bottom: 1px solid rgba(244, 241, 234, 0.08);
      }
      .site-nav.is-open .site-nav__list li:last-child {
        border-bottom: 0;
      }
      .site-nav.is-open .site-nav__list a {
        display: block;
        padding: 0.85rem 0;
        font-family: var(--font-text);
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-bone);
        letter-spacing: 0.01em;
      }
      .site-nav.is-open .site-nav__list a:hover {
        color: var(--color-cyan-soft);
      }

      /* Dentro del panel mobile abierto NO duplicamos el ES/EN:
         queda solo arriba, fijo. Mantenemos el resto del panel intacto. */
      .site-nav.is-open .site-nav__lang {
        margin-left: 0;
      }

      .site-nav.is-open .site-nav__ctas {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 0.2rem;
      }
      .site-nav.is-open .site-nav__cta,
      .site-nav.is-open .site-nav__cta--secondary {
        display: inline-flex;
        justify-content: center;
        text-align: center;
        width: 100%;
      }

      /* Bloquear scroll del body cuando el panel está abierto */
      body.nav-open { overflow: hidden; }
    }

    @media (max-width: 540px) {
      /* En desktop residual la lista CTA puede ocultarse, pero dentro
         del panel mobile abierto se vuelven a mostrar por la regla anterior. */
    }

    @media (max-width: 760px) {
      .site-nav__cta--secondary { display: none; }
      .site-nav.is-open .site-nav__cta--secondary { display: inline-flex; }
    }

    /* =========================================================
       HERO — Patrón C (Split institucional)

       Estructura de 3 zonas verticales:
         1. .hero__topbar    — banda navy con FIU + PAHO (sobre navy pleno, sin transparencia)
         2. .hero__split     — fila principal: panel navy izquierda + slider derecha
         3. dentro de panel: lockup GHC + 10ª edición · simposio · tagline · meta

       Decisiones:
         - Los logos institucionales NO se superponen a la foto. Banda navy plena arriba.
         - El slider de imágenes (Canal, Ciudad, Casco) corre solo en el lado derecho.
         - En mobile el split colapsa: panel navy arriba, slider debajo (no se apila al revés).
       ========================================================= */

    /* ----- Bloque hero ----- */
    .hero--split {
      position: relative;
      background: var(--color-navy);
      color: var(--color-bone);
      isolation: isolate;
      overflow: hidden;
      /* El header del sitio es position:fixed (~76px de alto).
         Damos al hero margen superior equivalente para que la banda
         institucional FIU/PAHO quede visible debajo del header. */
      padding-top: 76px;
    }

    @media (max-width: 720px) {
      .hero--split {
        /* En mobile el header puede ser más alto al colapsar.
           Usamos un valor algo mayor para evitar tapados. */
        padding-top: 64px;
      }
    }

    /* ----- Banda institucional FIU + PAHO -----
       Padding en valores enteros (px) sin vh para evitar coordenadas
       fraccionales que generaban sub-pixel artifacts en la imagen del slider. */
    .hero__topbar {
      background: var(--color-navy);
      padding: 22px 0;
    }

    .hero__topbar-inner {
      max-width: var(--container-max, 1400px);
      margin: 0 auto;
      padding: 0 clamp(1.2rem, 4vw, 2.5rem);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(1rem, 4vw, 3rem);
    }

    /* Variante: FIU/GHC solo (sin PAHO), perfectamente centrado.
       PAHO se reubicó a la grilla de partners. */
    .hero__topbar-inner--single {
      justify-content: center;
    }

    .hero__topbar-fiu img {
      display: block;
      height: 56px;
      width: auto;
    }

    .hero__topbar-paho img {
      display: block;
      height: 48px;
      width: auto;
    }

    /* ----- Split principal -----
       Nota técnica importante: forzamos un layer de composición con
       transform:translateZ(0) en el split. Esto resuelve un sub-pixel
       rendering artifact en DPR=1 (pantallas no-retina) donde el padding
       del topbar generaba coordenadas fraccionales (ej. 106.59px de alto)
       que propagaban al .hero__media (y=182.59 a y=884.59), y Chromium
       rasterizaba la imagen con una franja faltante al pie por redondeo.
       Forzando un nuevo stacking context con GPU layer, el contenido se
       rasteriza con coordenadas enteras y la imagen llega exactamente
       al borde inferior. */
    .hero__split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      align-items: stretch;
      min-height: clamp(560px, 78vh, 820px);
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    /* ----- Panel navy (lado izquierdo) ----- */
    .hero__panel {
      background: var(--color-navy);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(2rem, 6vh, 5rem) clamp(1.5rem, 5vw, 4rem);
    }

    .hero__panel-inner {
      width: 100%;
      max-width: 720px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: clamp(0.7rem, 1.2vh, 1.1rem);
    }

    /* ----- Lockup GHC + 10ª edición ----- */
    .hero__lockup {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.35rem;
    }

    .hero__lockup img {
      display: block;
      width: 100%;
      max-width: 820px;
      height: auto;
    }

    /* ----- Reglas horizontales ----- */
    .hero__rule {
      display: block;
      width: 100%;
      max-width: 360px;
      height: 1px;
      background: rgba(255, 255, 255, 0.18);
    }

    /* ----- Lockup Simposio ----- */
    .hero__symposium {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      font-family: 'Barlow Condensed', var(--font-display);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .hero__symposium-l1 {
      font-size: clamp(1.15rem, 1rem + 1vw, 1.55rem);
      color: #FFFFFF;
    }

    .hero__symposium-l2 {
      font-size: clamp(1.15rem, 1rem + 1vw, 1.55rem);
      display: inline-flex;
      gap: 0.8em;
    }

    .hero__symposium-magenta {
      color: #CA1569;
    }

    .hero__symposium-cyan {
      color: var(--color-cyan);
    }

    /* ----- Tagline ----- */
    .hero__tagline {
      font-family: var(--font-text);
      font-weight: 400;
      font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem);
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.92);
      margin: 0;
      max-width: 32ch;
    }

    .hero__tagline strong {
      display: block;
      font-weight: 600;
      color: #FFFFFF;
      margin-top: 0.25em;
    }

    /* ----- Meta (Fechas + Sede) ----- */
    .hero__meta {
      display: flex;
      flex-direction: column;
      gap: clamp(0.6rem, 1.5vh, 1rem);
      margin-top: 0.4rem;
    }

    .hero__meta-block {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .hero__meta-label {
      font-family: 'Barlow Condensed', var(--font-display);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--color-cyan);
    }

    .hero__meta-value {
      font-family: var(--font-text);
      font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem);
      font-weight: 500;
      color: #FFFFFF;
      letter-spacing: -0.005em;
    }

    /* ----- Bloque editorial: fechas + sede como info primaria -----
       Una sola pieza editorial. Ambas líneas comparten el sistema
       tipográfico de "10th Edition · 2026" que está dentro del logo:
       Barlow Condensed 700, uppercase, letter-spacing 0.22em.
       Diferenciación sólo por tamaño y color (no por peso o familia).
        · Fecha → tamaño mayor, blanco puro (información primaria)
        · Sede → tamaño intermedio, cyan (anclaje cromático con el lockup) */
    .hero__primary-meta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.3rem;
      position: relative;
      padding-left: clamp(0.75rem, 1.3vw, 1.05rem);
      border-left: 1px solid rgba(0, 169, 206, 0.45);
      align-self: stretch;
    }

    .hero__primary-meta-dates {
      font-family: 'Barlow Condensed', var(--font-display);
      font-weight: 700;
      font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
      line-height: 1.15;
      color: #FFFFFF;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin: 0;
    }

    .hero__primary-meta-venue {
      font-family: 'Barlow Condensed', var(--font-display);
      font-weight: 700;
      font-size: clamp(1.05rem, 0.92rem + 0.4vw, 1.25rem);
      line-height: 1.15;
      color: var(--color-cyan-soft);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin: 0;
    }

    /* ----- Bloque de Eventos Especiales -----
       Cada evento se compone como una pieza editorial con DOS niveles:
        · Kicker — nombre genérico (Simposio Internacional / Cumbre Regional)
          en escala chica, white opacity reducida. Es contexto, no título.
        · Anchor — anclaje cromático (DE VACUNAS / SOBRE DENGUE) a mayor
          escala. Es el nombre real del evento en la mente del lector.
       Sistema tipográfico idéntico al de .hero__symposium del index. */
    /* Bloque B (Eventos especiales): claramente separado del bloque A
       (logo+meta) por un margin-top amplio. Internamente, el eyebrow
       queda casi pegado al primer evento — son un único sistema. */
    .hero__programs {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.15rem;
      margin-top: clamp(2.6rem, 5.5vh, 4.2rem);
    }

    /* Eyebrow: categoría editorial discreta, pegada al primer evento. */
    .hero__programs-label {
      color: var(--color-cyan);
      opacity: 0.6;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
    }

    .hero__programs-list {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: clamp(0.7rem, 1.4vh, 1rem);
      align-items: stretch;
    }

    /* Línea vertical sutil y corta: solo aparece junto al título del
       evento, no se extiende a todo el bloque. Reducimos opacidad. */
    .hero__program {
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: clamp(0.7rem, 1.3vw, 1rem);
      align-items: stretch;
    }

    .hero__program::before {
      content: "";
      width: 1px;
      background: rgba(0, 169, 206, 0.28);
      margin: 0.15em 0 0.6em;
    }

    .hero__program-content {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    /* Kicker — nombre genérico. */
    .hero__program-kicker {
      font-family: 'Barlow Condensed', var(--font-display);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      font-size: clamp(1rem, 0.9rem + 0.28vw, 1.18rem);
      color: #FFFFFF;
      opacity: 0.7;
      line-height: 1.1;
    }

    /* Anchor cromático — protagonista interno del bloque. */
    .hero__program-anchor {
      font-family: 'Barlow Condensed', var(--font-display);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-size: clamp(1.55rem, 1.3rem + 0.85vw, 1.9rem);
      line-height: 1.1;
    }

    .hero__program-anchor--magenta { color: #CA1569; }
    .hero__program-anchor--cyan { color: var(--color-cyan); }

    /* Contexto temporal del evento — Inter regular, peso visual bajo. */
    .hero__program-context {
      font-family: var(--font-text);
      font-size: 0.9rem;
      font-weight: 400;
      color: #FFFFFF;
      opacity: 0.6;
      letter-spacing: -0.005em;
      margin-top: 0.1rem;
    }

    /* ----- Slider (lado derecho) -----
       El media del slider DEBE llenar todo el alto del split.

       Nota técnica importante: el padding-top del hero produce coordenadas
       subpixel (fraccionales) en el .hero__media, lo que en algunos viewports
       provocaba un sub-pixel rendering artifact en Chromium donde la imagen
       se rasterizaba con una franja faltante al pie. Se fuerza un layer de
       composición con transform:translateZ(0) para que la rasterización
       use coordenadas enteras a nivel de GPU.

       Adicionalmente: background navy como fallback de seguridad para que
       cualquier resto invisible quede continuo con el panel izquierdo. */
    .hero__media {
      position: relative;
      overflow: hidden;
      align-self: stretch;
      min-height: 360px;
      background: var(--color-navy);
      display: flex;
      /* Layer de composición → rasterización limpia, sin sub-pixel artifacts */
      transform: translateZ(0);
      backface-visibility: hidden;
    }

    .hero__slider {
      flex: 1 1 auto;
      width: 100%;
      min-height: 0;
    }

    .hero__slider .swiper-wrapper {
      height: 100% !important;
    }

    .hero__slider .swiper-slide {
      height: 100% !important;
      background: var(--color-navy);
      overflow: hidden;
      position: relative;
    }

    /* La imagen dentro del slide cubre el slide entero (sin franjas blancas).
       Posición absoluta + 100% en ambas dimensiones garantiza cobertura total
       independiente del cálculo interno de altura que pueda hacer Swiper. */
    .hero__slide img {
      display: block;
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center;
    }

    .hero__slide {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    /* Dots del slider — discretos, abajo a la derecha sobre la foto */
    .hero__slider-dots.swiper-pagination {
      position: absolute;
      right: clamp(1rem, 2.5vw, 2rem);
      bottom: clamp(1rem, 2.5vh, 1.5rem);
      left: auto;
      width: auto;
      display: flex;
      gap: 0.5rem;
      z-index: 4;
    }

    .hero__slider-dots .swiper-pagination-bullet {
      width: 9px;
      height: 9px;
      background: rgba(255, 255, 255, 0.45);
      opacity: 1;
      border-radius: 50%;
      transition: background 220ms ease, transform 220ms ease;
      margin: 0;
    }

    .hero__slider-dots .swiper-pagination-bullet-active {
      background: #FFFFFF;
      transform: scale(1.1);
    }

    /* =========================================================
       HERO — Responsive
       ========================================================= */

    /* Tablet: panel y media de proporciones más equilibradas */
    @media (max-width: 1024px) {
      .hero__panel-inner { max-width: 480px; }
      .hero__lockup img { max-width: 680px; }
    }

    /* Mobile: el split colapsa en una columna vertical.
       Panel arriba, slider debajo. Banda institucional se centra. */
    @media (max-width: 720px) {
      .hero__topbar-inner {
        flex-direction: column;
        gap: 0.9rem;
        align-items: center;
      }
      .hero__topbar-fiu img { height: 36px; }
      .hero__topbar-paho img { height: 28px; }

      .hero__split {
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .hero__panel {
        padding: 2.5rem 1.5rem 2rem;
      }
      .hero__panel-inner {
        max-width: 100%;
        gap: 1rem;
      }
      .hero__lockup img { max-width: 420px; }
      .hero__rule { max-width: 220px; }

      .hero__media {
        order: 2;
        height: 280px;
        min-height: 280px;
      }
    }

    @media (max-width: 420px) {
      .hero__lockup img { max-width: 300px; }
      .hero__media { height: 220px; min-height: 220px; }
    }

    /* =========================================================
       LÍNEA DE TRANSICIÓN GOLD → CYAN
       Acento gráfico inspirado en la paleta FIU (Gold + Cyan).
       NO es un recurso oficial de FIU Brand; es un acento sutil
       construido para esta conferencia con los colores institucionales.
       Si en algún momento FIU Brand habilita un recurso oficial
       equivalente, este acento debería reemplazarse por el oficial.

       Uso muy controlado: una sola aparición a ancho completo
       (transición hero → siguiente sección). No se vuelve patrón.
       ========================================================= */
    .accent-line {
      position: relative;
      height: 1px;
      width: 100%;
      background: linear-gradient(
        90deg,
        rgba(182, 134, 44, 0) 0%,
        var(--color-gold) 18%,
        var(--color-cyan) 82%,
        rgba(0, 169, 206, 0) 100%
      );
      opacity: 0.85;
    }

    /* Variante con halo muy sutil para reforzar presencia sobre fondos navy */
    .accent-line--glow {
      box-shadow:
        0 0 8px rgba(182, 134, 44, 0.25),
        0 0 16px rgba(0, 169, 206, 0.18);
    }

    /* =========================================================
       SECCIONES GENÉRICAS
       ========================================================= */
    .section {
      padding-top: var(--space-3xl);
      padding-bottom: var(--space-3xl);
      position: relative;
    }

    .section--light { background: var(--color-paper); }
    .section--bone { background: var(--color-bone); }
    .section--navy {
      background: var(--color-navy);
      color: var(--color-bone);
    }
    .section--navy-deep {
      background: var(--color-navy-deep);
      color: var(--color-bone);
    }

    /* Línea decorativa superior en algunas secciones */
    .section--ruled::before {
      content: "";
      position: absolute;
      top: 0;
      left: var(--container-pad);
      right: var(--container-pad);
      height: 1px;
      background: var(--color-line);
    }
    .section--navy.section--ruled::before,
    .section--navy-deep.section--ruled::before {
      background: var(--color-line-light);
    }

    /* Placeholder visual genérico */
    .placeholder {
      background:
        repeating-linear-gradient(
          135deg,
          rgba(8, 30, 63, 0.04),
          rgba(8, 30, 63, 0.04) 10px,
          rgba(8, 30, 63, 0.07) 10px,
          rgba(8, 30, 63, 0.07) 20px
        );
      border: 1px dashed rgba(8, 30, 63, 0.22);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(8, 30, 63, 0.5);
      font-size: 0.85rem;
      font-style: italic;
      min-height: 200px;
      padding: var(--space-md);
      text-align: center;
    }

    /* Placeholder específico de LOGOS — más sobrio, sin texto sustituto.
       Se usa donde irá un archivo .png/.svg real (FIU, PAHO, logo principal, etc.).
       Marca el slot, no simula la marca. */
    .logo-slot {
      background: repeating-linear-gradient(
        135deg,
        rgba(244, 241, 234, 0.04),
        rgba(244, 241, 234, 0.04) 8px,
        rgba(244, 241, 234, 0.08) 8px,
        rgba(244, 241, 234, 0.08) 16px
      );
      border: 1px dashed rgba(244, 241, 234, 0.28);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-family: var(--font-display);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(244, 241, 234, 0.55);
    }

    /* Variante en fondo claro */
    .logo-slot--light {
      background: repeating-linear-gradient(
        135deg,
        rgba(8, 30, 63, 0.03),
        rgba(8, 30, 63, 0.03) 8px,
        rgba(8, 30, 63, 0.07) 8px,
        rgba(8, 30, 63, 0.07) 16px
      );
      border-color: rgba(8, 30, 63, 0.22);
      color: rgba(8, 30, 63, 0.5);
    }

    .section--navy .placeholder,
    .section--navy-deep .placeholder {
      background:
        repeating-linear-gradient(
          135deg,
          rgba(244, 241, 234, 0.04),
          rgba(244, 241, 234, 0.04) 10px,
          rgba(244, 241, 234, 0.07) 10px,
          rgba(244, 241, 234, 0.07) 20px
        );
      border-color: rgba(244, 241, 234, 0.22);
      color: rgba(244, 241, 234, 0.55);
    }

    /* =========================================================
       FOOTER (esqueleto)
       ========================================================= */
    .site-footer {
      background: var(--color-navy-deep);
      color: var(--color-bone);
      padding-top: var(--space-2xl);
      padding-bottom: var(--space-lg);
    }

    .site-footer__grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
      gap: var(--space-xl);
      padding-bottom: var(--space-xl);
      border-bottom: 1px solid var(--color-line-light);
    }

    .site-footer__col h4 {
      font-family: var(--font-text);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--color-cyan-soft);
      margin-bottom: var(--space-md);
    }

    .site-footer__col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .site-footer__col a {
      font-size: 0.95rem;
      color: rgba(244, 241, 234, 0.78);
      transition: color var(--transition);
    }

    .site-footer__col a:hover { color: var(--color-cyan-soft); }

    .site-footer__bottom {
      padding-top: var(--space-md);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-md);
      flex-wrap: wrap;
      font-size: 0.78rem;
      color: rgba(244, 241, 234, 0.5);
      letter-spacing: 0.04em;
    }

    @media (max-width: 880px) {
      .site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
      }
    }

    @media (max-width: 520px) {
      .site-footer__grid { grid-template-columns: 1fr; }
    }

    /* =========================================================
       ACCESIBILIDAD
       ========================================================= */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    :focus-visible {
      outline: 2px solid var(--color-cyan);
      outline-offset: 3px;
      border-radius: 2px;
    }

    .skip-link {
      position: absolute;
      top: -40px;
      left: 1rem;
      padding: 0.5rem 1rem;
      background: var(--color-cyan);
      color: var(--color-navy-deep);
      z-index: 1000;
      transition: top var(--transition);
    }
    .skip-link:focus { top: 1rem; }
  
/* =========================================================
   SECCIÓN — Mensaje del Director
   Layout: 2 columnas (foto sticky + mensaje) en desktop,
   1 columna en mobile. Densidad de texto controlada.
   ========================================================= */

.director {
  /* hereda .section .section--light .section--ruled del sistema base */
}

.director__inner {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* --- COLUMNA FOTO + CRÉDITOS --- */
.director__portrait {
  position: sticky;
  top: 7rem;
}

.director__portrait-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-navy);
}

.director__portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Línea decorativa institucional Gold → Cyan al pie del frame.
   Reutiliza el ADN cromático del sitio. */
.director__portrait-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    var(--color-gold) 40%,
    var(--color-cyan) 100%
  );
}

.director__credits {
  margin-top: var(--space-md);
}

.director__name {
  font-family: var(--font-text);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--color-navy);
  margin-bottom: 0.65rem;
}

.director__name-suffix {
  font-weight: 400;
  color: var(--color-navy-mid);
}

.director__role {
  font-family: var(--font-text);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-navy);
  margin-bottom: 0.4rem;
}

.director__affiliation {
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-navy-mid);
}

.director__affiliation span {
  display: block;
}

/* --- COLUMNA MENSAJE --- */
.director__message {
  max-width: 60ch;
}

.director__greeting {
  font-family: var(--font-text);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.director__message p {
  font-family: var(--font-text);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-navy-mid);
  margin-bottom: 1.1em;
}

/* Énfasis institucional: el lema central del mensaje.
   Tipografía ligeramente mayor + acento cromático. */
.director__pullquote {
  font-family: var(--font-text);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  margin: var(--space-lg) 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-cyan);
}

.director__pullquote em {
  font-style: normal;
  color: var(--color-cyan);
  font-weight: 500;
}

/* Acción: leer mensaje completo.
   No es un "CTA primario", es un enlace institucional discreto. */
.director__action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-navy);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--color-gold);
  transition: color 200ms ease, border-color 200ms ease;
}

.director__action:hover {
  color: var(--color-cyan);
  border-bottom-color: var(--color-cyan);
}

.director__action::after {
  content: "→";
  font-family: var(--font-text);
  font-size: 1rem;
  letter-spacing: 0;
  transition: transform 200ms ease;
}

.director__action:hover::after {
  transform: translateX(4px);
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .director__inner {
    grid-template-columns: 1fr;
  }
  .director__portrait {
    position: static;
    max-width: 200px;
  }
  .director__message {
    max-width: 64ch;
  }
}

/* Reset cuando .director__action es <button> en lugar de <a> */
button.director__action {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-gold);
  cursor: pointer;
  font: inherit;
  /* hereda el resto desde .director__action */
}


/* =========================================================
   MODAL — Mensaje completo del Director
   Overlay que cubre toda la pantalla. Se abre desde el botón
   "Leer mensaje completo" de la sección anterior.
   ========================================================= */

.fullmsg {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.fullmsg[hidden] { display: none; }

.fullmsg__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 23, 53, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fullmsg-fade 240ms ease;
}

@keyframes fullmsg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Panel: lateral derecho en desktop, full-width en mobile */
.fullmsg__panel {
  position: relative;
  width: min(640px, 100%);
  height: 100%;
  background: var(--color-paper);
  display: flex;
  flex-direction: column;
  box-shadow: -32px 0 80px rgba(6, 23, 53, 0.35);
  animation: fullmsg-slide 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fullmsg-slide {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.fullmsg__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid rgba(8, 30, 63, 0.08);
  flex-shrink: 0;
}

.fullmsg__eyebrow {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.fullmsg__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(8, 30, 63, 0.18);
  border-radius: 2px;
  color: var(--color-navy);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.fullmsg__close:hover {
  background: var(--color-navy);
  color: var(--color-bone);
  border-color: var(--color-navy);
}

.fullmsg__body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(8, 30, 63, 0.25) transparent;
}

.fullmsg__title {
  font-family: var(--font-text);
  font-size: clamp(1.55rem, 1.3rem + 0.8vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-navy);
  margin-bottom: var(--space-lg);
  position: relative;
  padding-bottom: var(--space-md);
}

.fullmsg__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-cyan));
}

.fullmsg__body p {
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-navy-mid);
  margin-bottom: 1.1em;
}

.fullmsg__body p strong { color: var(--color-navy); font-weight: 600; }
.fullmsg__body p em {
  font-style: italic;
  color: var(--color-navy);
}

.fullmsg__signature {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(8, 30, 63, 0.1);
}

.fullmsg__signoff {
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--color-navy-mid);
  margin-bottom: var(--space-md) !important;
}

.fullmsg__name {
  font-family: var(--font-text);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.2em !important;
}

.fullmsg__role,
.fullmsg__org {
  font-family: var(--font-text);
  font-size: 0.92rem;
  color: var(--color-navy-mid);
  line-height: 1.4;
  margin-bottom: 0.1em !important;
}

/* Estado: cuerpo del documento sin scroll cuando el modal está abierto */
body.fullmsg-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  .fullmsg__panel {
    width: 100%;
    box-shadow: none;
  }
}


/* =========================================================
   SECCIÓN — Ejes de la conferencia (Programa Científico)
   Grid de 11 temas en 3 columnas (responsive). Numeración
   tipográfica en lugar de íconos para mantener tono institucional.
   ========================================================= */

.topics__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--space-xl);
  border-top: 1px solid rgba(8, 30, 63, 0.1);
  border-left: 1px solid rgba(8, 30, 63, 0.1);
}

.topic {
  position: relative;
  background: var(--color-bone);
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  min-height: 200px;
  transition: background 220ms ease;
  border-right: 1px solid rgba(8, 30, 63, 0.1);
  border-bottom: 1px solid rgba(8, 30, 63, 0.1);
}

/* Hover sutil: el fondo se aclara levemente, la línea Gold→Cyan
   inferior aparece como acento. */
.topic:hover {
  background: var(--color-paper);
}

.topic::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-cyan));
  transition: width 280ms ease;
}

.topic:hover::after {
  width: 100%;
}

/* Numeración: tipográfica, no decorativa */
.topic__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-gold-soft);
  line-height: 1;
}

.topic__title {
  font-family: var(--font-text);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin: 0;
  margin-top: auto;
}

/* Eje destacado: tratamiento sutil con acento Gold + flag pequeño.
   No usa cyan para diferenciarse claramente del resto, no recarga
   visualmente el grid. */
.topic--featured {
  background: var(--color-paper);
}

.topic--featured .topic__num {
  color: var(--color-gold);
}

.topic--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-gold);
}

.topic__flag {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: -0.5rem;
}

.topic__flag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-gold);
  border-radius: 50%;
}

/* Acción "Ver agenda preliminar" */
.topics__action-wrap {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.topics__action {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.6rem;
  background: var(--color-navy);
  color: var(--color-bone);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--color-navy);
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.topics__action::after {
  content: "→";
  font-family: var(--font-text);
  font-size: 1rem;
  letter-spacing: 0;
  transition: transform 220ms ease;
}

.topics__action:hover {
  background: var(--color-navy-mid);
  border-color: var(--color-cyan);
}

.topics__action:hover::after {
  transform: translateX(4px);
}

.topics__action-note {
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-navy-mid);
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 960px) {
  .topics__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .topics__grid {
    grid-template-columns: 1fr;
  }
  .topic {
    min-height: 0;
  }
}


/* =========================================================
   SECCIÓN — Partners institucionales
   Dos niveles:
   1. Línea principal: EpiDriver (organizador local) + SeNaCyT
      + Min. Turismo (organismos del Estado panameño).
      Tarjetas grandes, etiqueta de rol arriba, separación clara.
   2. Grid secundario: sociedades e instituciones académicas
      aliadas, orden alfabético, tratamiento neutro uniforme.
   ========================================================= */

/* ---- Partners: sistema de contenedores homogéneo ----
   Dos bloques con la MISMA arquitectura — contenedores idénticos por bloque,
   altura fija, logos centrados por flex y normalizados por object-fit.
   Los logos ya fueron preprocesados para retirar padding sobrante en el
   archivo, de modo que aquí basta con un sistema de cajas para que todos
   ocupen el mismo "área visual".

   1. .sponsor-main  — Fila principal: 4 partners principales, una sola
      fila en desktop (4 columnas iguales), tamaño visual superior.
   2. .sponsor-grid  — Grilla secundaria: 4 columnas en desktop, 2 en mobile,
      contenedores idénticos.

   La sección lleva fondo blanco puro para que los frames sean invisibles. */

.section.partners {
  background: #FFFFFF;
}

:root {
  /* Altura del contenedor (frame). */
  --sponsor-main-frame-h: 120px;     /* Partners principales */
  --sponsor-grid-frame-h: 96px;      /* Grilla secundaria */
  /* Proporción de altura ocupada por el logo. Desacoplado por bloque
     para poder dar más presencia a la grilla secundaria sin afectar
     la jerarquía de la fila principal. */
  --sponsor-main-logo-ratio: 0.78;   /* Fila principal */
  --sponsor-grid-logo-ratio: 0.90;   /* Grilla secundaria (+15% respecto a antes) */
}

.sponsor-main,
.sponsor-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Fila principal: 4 partners en una sola fila en desktop ----
   Sin border-bottom: la separación con la grilla secundaria se da
   exclusivamente por espacio en blanco (margin). */
.sponsor-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  margin-top: var(--space-xl);
  margin-bottom: clamp(2.4rem, 5vh, 3.8rem);
}

/* ---- Fila intermedia: 2 partners centrados, misma jerarquía que la
       fila principal (mismo frame-h) pero limitada a 2 columnas para
       no diluir el peso visual cuando son pocos partners. ---- */
.sponsor-secondary {
  list-style: none;
  margin: 0 auto clamp(2.4rem, 5vh, 3.8rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
  /* Ancho controlado para que dos logos no se separen demasiado
     en pantallas anchas. Equivalente a la mitad de la fila principal. */
  max-width: 60%;
}

/* ---- Fila Sponsors comerciales: 5 logos en una fila en desktop.
       Mismo sistema visual que sponsor-main, distinto grid-template.
       Mismo frame-h para reforzar jerarquía pareja entre los 5. ---- */
.sponsor-row {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.4rem);
}

.sponsor-row--five {
  grid-template-columns: repeat(5, 1fr);
}

.sponsor-row .sponsor-item__frame {
  height: var(--sponsor-main-frame-h);
}

.sponsor-row .sponsor-item__frame img {
  max-height: calc(var(--sponsor-main-frame-h) * var(--sponsor-main-logo-ratio));
}

/* Ajustes individuales para sponsors farma. Los logos tienen
   "densidades" tipográficas y proporciones muy distintas; sin estos
   ajustes, GSK domina (mancha sólida) y Pfizer queda muy chico
   (logo cuadrado). Estos valores parean el peso visual percibido. */

/* GSK: logo muy denso, manchón naranja sólido. Reducir. */
.sponsor-row .sponsor-item img[src*="gsk"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.55);
}

/* Merck: lockup horizontal compacto con isotipo + nombre. */
.sponsor-row .sponsor-item img[src*="merck"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.55);
}

/* Pfizer: logo cuadrado (≈1:1). Permitir más altura para que su
   "área visual" sea comparable a los logos horizontales. */
.sponsor-row .sponsor-item img[src*="pfizer"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.85);
  max-width: 70%;
}

/* Sanofi: logo horizontal muy ancho (≈4:1) con poca altura. Mantener
   ratio nominal. */
.sponsor-row .sponsor-item img[src*="sanofi"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.45);
}

/* Takeda: logo en forma de "óvalo" horizontal denso (≈3:1).
   Reducir levemente para no dominar visualmente. */
.sponsor-row .sponsor-item img[src*="takeda"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.60);
}

/* ---- Grilla secundaria: 4 columnas en desktop ---- */
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.6rem) clamp(1rem, 2vw, 1.8rem);
}

/* ---- Item: contenedor idéntico, sin caja visible ---- */
.sponsor-item {
  display: flex;
  width: 100%;
}

.sponsor-item__frame {
  width: 100%;
  height: var(--sponsor-grid-frame-h);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 220ms ease;
}

.sponsor-main .sponsor-item__frame,
.sponsor-secondary .sponsor-item__frame {
  height: var(--sponsor-main-frame-h);
}

.sponsor-item:hover .sponsor-item__frame {
  transform: translateY(-2px);
}

/* ---- Imágenes: normalización por altura visual ----
   max-height controla la altura visible y NUNCA permite desbordar.
   object-fit: contain mantiene la relación de aspecto sin recortar. */
.sponsor-item__frame img {
  max-height: calc(var(--sponsor-grid-frame-h) * var(--sponsor-grid-logo-ratio));
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: saturate(0.95);
  transition: filter 220ms ease;
}

.sponsor-main .sponsor-item__frame img,
.sponsor-secondary .sponsor-item__frame img {
  max-height: calc(var(--sponsor-main-frame-h) * var(--sponsor-main-logo-ratio));
}

.sponsor-item:hover .sponsor-item__frame img {
  filter: saturate(1);
}

/* ---- Excepciones específicas para logos con forma atípica ----
   - --tall: Baylor (logo vertical denso). Reducido para no dominar.
   - --wide: FIOCRUZ, SLIPE, SLAMVI, SEIP (logos muy horizontales).
             Reducimos altura porque visualmente "pesan" más al ocupar más ancho.
   - --round: API, SLV, SPIP, Soc. Panameña Pediatría, MINSA
             (logos circulares/cuadrados/verticales).
             Permitimos altura completa para que tengan presencia visual
             equivalente a los logos horizontales. */

.sponsor-item--tall .sponsor-item__frame img {
  max-height: calc(var(--sponsor-grid-frame-h) * 1.05);
  max-width: 42%;
}

.sponsor-item--wide .sponsor-item__frame img {
  max-height: calc(var(--sponsor-grid-frame-h) * 0.72);
  max-width: 100%;
}

.sponsor-item--round .sponsor-item__frame img {
  max-height: calc(var(--sponsor-grid-frame-h) * 1.08);
  max-width: 100%;
}

/* ---- Ajustes individuales mínimos para logos con poca "tinta"
   percibida después del +15% general ---- */

/* EpiDriver: muy dominante en la fila principal. Reducción ~20%
   sobre el ratio base de la fila principal. */
.sponsor-main .sponsor-item img[src*="epidriver"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.62);
}

/* MINSA: logo con composición vertical (símbolo grande arriba +
   tipografía abajo). Reducimos para igualar peso visual con los
   logos horizontales de la fila principal y evitar que domine. */
.sponsor-main .sponsor-item img[src*="minsa"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.92);
  max-width: 60%;
}

/* PROMTUR: lockup horizontal compacto, mismo tratamiento que UNICEF
   en la fila intermedia (ratio nominal de la fila principal). */
.sponsor-secondary .sponsor-item img[src*="promtur"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.70);
}

/* UNICEF: la versión utilizada queda visualmente bien con el ratio
   nominal, pero al estar en una fila de 2 logos junto a PROMTUR
   reducimos levemente para no dominar. */
.sponsor-secondary .sponsor-item img[src*="unicef"] {
  max-height: calc(var(--sponsor-main-frame-h) * 0.78);
}

/* ALAPE: aunque no es circular, su "núcleo" tipográfico ocupa poca
   altura y queda visualmente liviano. Pequeño boost. */
.sponsor-grid .sponsor-item img[src*="alape"] {
  max-height: calc(var(--sponsor-grid-frame-h) * 1.02);
}

/* SCP: misma situación que ALAPE pero más marcada por su composición
   vertical (logotipo + isotipo + bajada). */
.sponsor-grid .sponsor-item img[src*="scp"] {
  max-height: calc(var(--sponsor-grid-frame-h) * 1.08);
}

/* SPIP y SEIP llevan ya --round y --wide respectivamente y quedan
   correctos con esos modificadores; no requieren ajuste individual. */

/* ---- Responsive ---- */

/* Tablets: la grilla secundaria pasa a 3 columnas, la principal queda 2x2 */
@media (max-width: 960px) {
  .sponsor-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sponsor-main {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 1.8rem) clamp(1.4rem, 4vw, 2.4rem);
  }
  .sponsor-secondary {
    max-width: 80%;
    gap: clamp(1rem, 3vw, 1.8rem);
  }
  /* Sponsors: en tablet pasan a 3 + 2 (centrado natural por grid). */
  .sponsor-row--five {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 1.8rem) clamp(1.4rem, 4vw, 2.4rem);
  }
}

/* Mobile: 2 columnas en grilla secundaria. Partners principales 2x2
   para no diminuirlos en una columna de 4 muy estrecha. */
@media (max-width: 640px) {
  :root {
    --sponsor-main-frame-h: 92px;
    --sponsor-grid-frame-h: 82px;
  }
  .sponsor-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.4rem;
  }
  .sponsor-secondary {
    max-width: 100%;
    gap: 1rem 1.4rem;
  }
  .sponsor-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem 1rem;
  }
  .sponsor-row--five {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.4rem;
  }
  .sponsor-item--tall .sponsor-item__frame img {
    max-width: 50%;
  }
}

@media (max-width: 420px) {
  :root {
    --sponsor-main-frame-h: 82px;
    --sponsor-grid-frame-h: 74px;
  }
}


/* =========================================================
   SECCIÓN — Comités
   Tres grupos jerárquicos:
   1. Comité Organizador (3 miembros) — tratamiento más prominente.
   2. Comité Ejecutivo (3 miembros) — tratamiento medio.
   3. Comité Científico (9 miembros) — grid compacto alfabético.

   Las fotos se muestran con tratamiento unificador aplicado en
   pre-procesamiento (duotono navy, mismo encuadre, mismo aspect
   ratio). Para los miembros sin foto, hay un placeholder navy
   con silueta abstracta — del mismo sistema visual.
   ========================================================= */

.committee__group {
  margin-top: var(--space-2xl);
}

.committee__group:first-of-type {
  margin-top: var(--space-xl);
}

.committee__group-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.committee__group-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-gold);
  flex-shrink: 0;
}

.committee__group-title {
  font-family: var(--font-text);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin: 0;
  flex-shrink: 0;
}

.committee__group-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(182, 134, 44, 0.5) 0%,
    rgba(0, 169, 206, 0.4) 60%,
    rgba(0, 169, 206, 0) 100%
  );
}

/* ---- Roster: lista de miembros ---- */
/* =========================================================
   COMITÉS — Grilla unificada
   Las tres variantes (organizador, ejecutivo, científico)
   usan EL MISMO ancho de celda que la grilla de Speakers
   (repeat(4, 1fr) en desktop). Cuando hay menos de 4 personas
   por fila, las tarjetas quedan centradas con columnas vacías
   a los lados — el tamaño de cada foto NO depende de cuántas
   personas hay en la fila. ========================================================= */

.committee__roster {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 2vw, 1.6rem);
  justify-content: center;
}

/* Cuando hay 3 miembros (organizador, ejecutivo): se usa una grilla
   de 3 columnas con ancho-de-celda EQUIVALENTE al ancho de una celda
   en la grilla de 4 columnas (mismo tamaño visual de foto). El espacio
   sobrante se reparte automáticamente a izquierda y derecha por
   justify-content: center → quedan visualmente centradas con margen
   simétrico. */
.committee__roster:has(> .member:nth-child(3):last-child) {
  grid-template-columns: repeat(3, calc((100% - 3 * clamp(1.2rem, 2vw, 1.6rem)) / 4));
  justify-content: center;
}

/* Reset de las variantes antiguas: ya no se necesitan
   grid-template-columns distintos por variante. Quedan los
   modificadores solo para tipografía / acentos. */
.committee__roster--lead,
.committee__roster--compact,
.committee__roster:not(.committee__roster--lead):not(.committee__roster--compact) {
  grid-template-columns: repeat(4, 1fr);
}

/* ---- Responsive ----
   Mismo comportamiento que Speakers para garantizar tamaño
   de foto idéntico en todos los breakpoints. */
@media (max-width: 1080px) {
  .committee__roster { grid-template-columns: repeat(3, 1fr); }
  /* En tablet caben las 3 personas perfectas en 3-col, ya no hace falta
     el centrado especial. */
  .committee__roster:has(> .member:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .committee__roster {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  /* Con 3 miembros en 2 columnas: el tercero queda solo en la fila inferior.
     Lo centramos. */
  .committee__roster:has(> .member:nth-child(3):last-child) > .member:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 50%;
  }
}

@media (max-width: 340px) {
  .committee__roster { grid-template-columns: 1fr; gap: 1.5rem; }
  .committee__roster:has(> .member:nth-child(3):last-child) > .member:nth-child(3) {
    max-width: 100%;
  }
}

/* ---- Member: tarjeta individual ---- */
.member {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* .member__photo y .member__photo img: definidos en el sistema unificado
   más arriba en el archivo. Ver "SISTEMA UNIFICADO DE FOTOS DE PERSONAS". */

.member__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.member__name {
  font-family: var(--font-text);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--color-navy);
  margin: 0;
}

.member__role {
  font-family: var(--font-text);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-navy-mid);
  margin: 0;
}

.member__affiliation {
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-navy-mid);
  margin: 0;
}

/* Indicador visual sutil para "pendiente de confirmación":
   los textos placeholder se muestran con opacidad reducida y
   estilo levemente itálico, para señalar que son pendientes
   sin gritar "TODO" en producción. */
.member__role:not(:has(span)),
.member__affiliation:not(:has(span)) {
  /* fallback: aplicado siempre */
}

.member__role[data-pending],
.member__affiliation[data-pending] {
  font-style: italic;
  opacity: 0.7;
}

/* Tratamiento prominente para Comité Organizador */
.member--lead .member__name {
  font-size: 1.2rem;
}

.member--lead .member__role {
  font-size: 0.95rem;
  color: var(--color-navy);
}

/* Tratamiento compacto para Comité Científico */
.member--compact .member__name {
  font-size: 0.95rem;
}

/* =========================================================
   SECCIÓN — Abstracts / Convocatoria
   Estructura editorial: hero CTA + banda de fechas, bloques
   numerados (Áreas, Tipos, Formato, Criterios, e-Pósters, Premios),
   contacto y CTA final. Sigue el lenguaje visual del resto del sitio:
   tipografía Inter + Archivo Narrow, paleta navy/cyan, accent line cyan.
   ========================================================= */

/* ---- Hero CTA + fechas en banda ---- */
.abstracts__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(2rem, 4vh, 3rem) 0 clamp(2.5rem, 5vh, 4rem);
  padding: clamp(1.6rem, 3vh, 2.4rem) clamp(1.5rem, 3vw, 2.4rem);
  background: var(--color-navy);
  color: var(--color-bone);
  align-items: center;
  position: relative;
}

.abstracts__hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--color-cyan);
}

.abstracts__hero-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.abstracts__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  background: var(--color-cyan);
  color: var(--color-navy-deep);
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
}

.abstracts__cta:hover {
  background: var(--color-cyan-soft);
  transform: translateY(-1px);
}

.abstracts__cta--large {
  padding: 1.1rem 2.2rem;
  font-size: 1.05rem;
}

/* Estado disabled: mismo formato visual pero apagado, sin hover, sin cursor.
   Se usa mientras no esté confirmada la URL de la plataforma de envío. */
.abstracts__cta--disabled {
  background: rgba(0, 169, 206, 0.35);
  color: rgba(8, 30, 63, 0.55);
  cursor: not-allowed;
  border: 0;
  font-family: var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.abstracts__cta--disabled:hover {
  background: rgba(0, 169, 206, 0.35);
  transform: none;
}

.abstracts__cta-note {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: rgba(244, 241, 234, 0.7);
}

.abstracts__dates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
}

.abstracts__dates li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.abstracts__date-label {
  font-family: 'Barlow Condensed', var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cyan);
}

.abstracts__date-value {
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-bone);
  line-height: 1.3;
}

/* ---- Bloques numerados ---- */
.abstracts__block {
  margin: clamp(2.2rem, 4vh, 3rem) 0 0;
}

.abstracts__block:first-child {
  margin-top: 0;
}

.abstracts__block-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  color: var(--color-navy);
  margin: 0 0 clamp(1rem, 2vh, 1.4rem);
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(8, 30, 63, 0.12);
}

.abstracts__block-num {
  font-family: 'Barlow Condensed', var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-gold);
}

.abstracts__block > p {
  font-family: var(--font-text);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-graphite);
  margin: 0 0 1rem;
  max-width: 70ch;
}

/* ---- Áreas temáticas (6 ejes, grid 3 cols) ---- */
.abstracts__topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  counter-reset: topic;
}

.abstracts__topics li {
  counter-increment: topic;
  padding: clamp(1.2rem, 2.2vh, 1.6rem) clamp(1.2rem, 2vw, 1.5rem);
  background: var(--color-bone);
  border: 1px solid rgba(8, 30, 63, 0.08);
  position: relative;
}

.abstracts__topics li::before {
  content: counter(topic, decimal-leading-zero);
  display: block;
  font-family: 'Barlow Condensed', var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-cyan);
  margin-bottom: 0.5rem;
}

.abstracts__topics h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}

.abstracts__topics p {
  font-family: var(--font-text);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-graphite);
  margin: 0;
}

/* ---- Tipos de propuestas (3 ítems horizontales) ---- */
.abstracts__types {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

.abstracts__types li {
  padding: clamp(1rem, 2vh, 1.4rem) clamp(1.1rem, 2vw, 1.4rem);
  border-left: 3px solid var(--color-cyan);
}

.abstracts__types h4 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-navy);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.abstracts__types p {
  font-family: var(--font-text);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-graphite);
  margin: 0;
}

/* ---- Split: dos columnas (Formato + Criterios, e-Pósters + Premios) ---- */
.abstracts__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(2.2rem, 4vh, 3rem) 0 0;
}

.abstracts__split .abstracts__block {
  margin: 0;
}

/* ---- Listas con bullet cyan ---- */
.abstracts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.abstracts__list li {
  position: relative;
  padding-left: 1.1rem;
  font-family: var(--font-text);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--color-graphite);
}

.abstracts__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--color-cyan);
  border-radius: 50%;
}

.abstracts__warning {
  margin-top: 1rem !important;
  padding: 0.8rem 1rem;
  background: rgba(202, 21, 105, 0.06);
  border-left: 3px solid #CA1569;
  font-size: 0.88rem !important;
}

/* ---- Premios ---- */
.abstracts__block--prize .abstracts__block-title {
  border-bottom-color: var(--color-gold);
}

.abstracts__prizes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.abstracts__prizes li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 0.9rem 1rem;
  background: rgba(182, 134, 44, 0.06);
  border-left: 3px solid var(--color-gold);
}

.abstracts__prize-rank {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-gold);
  line-height: 1;
}

.abstracts__prizes li > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.abstracts__prizes strong {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-navy);
}

.abstracts__prizes span {
  font-family: var(--font-text);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-graphite);
}

/* ---- Contacto ---- */
.abstracts__contact {
  margin: clamp(2.2rem, 4vh, 3rem) 0 clamp(1.5rem, 3vh, 2rem);
  padding: 1.3rem 1.5rem;
  background: var(--color-bone);
  border: 1px solid rgba(8, 30, 63, 0.08);
}

.abstracts__contact p {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-navy);
}

.abstracts__contact-label {
  display: block;
  font-family: 'Barlow Condensed', var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 0.4rem;
}

.abstracts__contact a {
  color: var(--color-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 169, 206, 0.4);
}

.abstracts__contact a:hover {
  color: var(--color-navy);
  border-bottom-color: currentColor;
}

/* ---- CTA final ---- */
.abstracts__footer-cta {
  margin-top: clamp(2rem, 4vh, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.abstracts__footer-note {
  margin: 0;
  max-width: 60ch;
  font-family: var(--font-text);
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--color-graphite);
  opacity: 0.85;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .abstracts__hero {
    grid-template-columns: 1fr;
  }
  .abstracts__topics { grid-template-columns: repeat(2, 1fr); }
  .abstracts__types { grid-template-columns: 1fr; }
  .abstracts__split { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .abstracts__dates { grid-template-columns: repeat(2, 1fr); }
  .abstracts__topics { grid-template-columns: 1fr; }
}

/* =========================================================
   SECCIÓN — Sede (venue)
   La foto del Sheraton encabeza la sección a ancho completo del
   container. Debajo van el header (eyebrow, título, lede) y luego
   un bloque de datos + mapa en dos columnas.
   ========================================================= */

/* ---- Foto del Sheraton al inicio de la sección ---- */
.venue-banner {
  margin: 0 0 clamp(2rem, 4vh, 3rem);
  aspect-ratio: 1600 / 531;
  overflow: hidden;
  position: relative;
}

.venue-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Regla cyan inferior — consistente con otros bloques visuales del sitio */
.venue-banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--color-cyan);
}

/* ---- Bloque de datos + mapa ---- */
.venue {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(1.6rem, 3vw, 2.5rem);
  margin-top: var(--space-xl);
}

.venue__info {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2vh, 1.6rem);
}

.venue__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem);
  color: var(--color-navy);
  margin: 0;
  line-height: 1.15;
}

.venue__meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.venue__meta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: baseline;
}

.venue__meta-row dt {
  font-family: 'Barlow Condensed', var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin: 0;
}

.venue__meta-row dd {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--color-navy);
  line-height: 1.55;
}

.venue__map {
  border: 1px solid rgba(8, 30, 63, 0.1);
  min-height: 380px;
}

.venue__cta-line {
  margin: 0;
}

.venue__cta {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-cyan);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
}

.venue__cta:hover {
  color: var(--color-navy);
}

@media (max-width: 860px) {
  .venue {
    grid-template-columns: 1fr;
  }
  .venue__meta-row {
    grid-template-columns: 90px 1fr;
    gap: 0.8rem;
  }
}

/* =========================================================
   SECCIÓN — Speakers
   Grilla de tarjetas botón (cuando hay bio) o estáticas (sin bio).
   Reutiliza tokens del sistema. Modal de bio sigue el mismo patrón
   del modal del Mensaje del Director.
   ========================================================= */
/* =========================================================
   SISTEMA UNIFICADO DE FOTOS DE PERSONAS (.person-photo)
   Usado por Speakers (.speaker__photo) y Comités (.member__photo).
   Una sola fuente de verdad para:
   - aspect-ratio 4:5
   - object-fit cover con object-position centrado
   - filete de acento al pie, sin gap entre foto y filete
   - tamaño visual idéntico independientemente de cuántos
     elementos haya por fila (controlado por la grilla,
     no por el contenedor de la foto)
   ========================================================= */

.speaker__photo,
.member__photo {
  position: relative;
  margin: 0 0 0.75rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bone);
  /* Truco anti-gap: borde inferior de 3px que actúa como filete.
     Al ser un border en lugar de ::after absoluto, se elimina
     cualquier gap sub-pixel entre la imagen y la línea. */
  border-bottom: 3px solid var(--color-cyan);
  /* font-size 0 mata el espacio inline que algunos navegadores
     insertan entre el borde inferior del <img> y el border-bottom
     del contenedor por el line-height heredado. */
  font-size: 0;
  line-height: 0;
}

.speaker__photo img,
.member__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
  transition: transform 700ms ease;
}

/* Hover solo en cards interactivas de speakers */
.speaker__card:not(.speaker__card--static):hover .speaker__photo img {
  transform: scale(1.03);
}

/* Variante de filete para Comités: gradiente dorado→cyan
   (mantiene el lenguaje visual original del comité). */
.member__photo {
  border-bottom: 0; /* reset, lo aplica ::after porque es gradient */
}

.member__photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* solape de 1px para eliminar gap sub-pixel */
  height: 4px;  /* 3px visible + 1px de solape */
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    var(--color-gold) 35%,
    var(--color-cyan) 100%
  );
  pointer-events: none;
}

.member--compact .member__photo::after {
  height: 3px; /* 2px visible + 1px solape */
}

/* =========================================================
   SPEAKERS — Resto de estilos (no incluye .speaker__photo
   porque ya está en el sistema unificado arriba).
   ========================================================= */

.speakers { margin-top: 1rem; }

.speakers__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem) clamp(1.2rem, 2vw, 1.6rem);
}

.speaker { display: flex; }

.speaker__card {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: transform 220ms ease;
}

.speaker__card--static { cursor: default; }

.speaker__card:not(.speaker__card--static):hover { transform: translateY(-3px); }

.speaker__card:not(.speaker__card--static):focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 6px;
}

/* Línea de acento removida — manejada por el sistema unificado .person-photo arriba. */

/* Cuerpo de la tarjeta: el bloque crece pero ancla nombre + afiliación
   en posiciones predecibles, manteniendo la grilla alineada aunque los
   textos tengan longitud diferente. */
.speaker__body {
  padding: 0 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}

/* Nombre: protagonista visual. Altura mínima reservada para evitar
   saltos cuando algunas tarjetas tienen nombres de 1 línea y otras 2. */
.speaker__name {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0;
  min-height: calc(1.05rem * 1.2 * 2); /* 2 líneas reservadas */
  display: flex;
  align-items: flex-start;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: manual;
}

.speaker__role {
  font-family: var(--font-text);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-navy);
  margin: 0.1rem 0 0;
}

/* Afiliación: peso visual reducido frente al nombre. */
.speaker__affiliation {
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  color: #4A5570;
  margin: 0.05rem 0 0;
}

.speaker__country {
  font-family: 'Barlow Condensed', var(--font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin: 0.3rem 0 0;
}

.speakers__note {
  margin: clamp(2.5rem, 4vh, 3.5rem) 0 0;
  text-align: center;
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--color-navy);
}

.speakers__cta {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: 600;
  color: var(--color-cyan);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
}

.speakers__cta:hover { color: var(--color-navy); }

/* ---- Responsive ----
   En cada breakpoint mantenemos contenedores homogéneos y aire entre
   tarjetas. La grilla cambia de columnas pero la jerarquía interna
   se conserva. */
@media (max-width: 1080px) {
  .speakers__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .speakers__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  /* Pequeña reducción del tamaño tipográfico para más aire visual. */
  .speaker__name { font-size: 1rem; min-height: calc(1rem * 1.2 * 2); }
  .speaker__role { font-size: 0.8rem; }
  .speaker__affiliation { font-size: 0.78rem; }
  .speaker__country { font-size: 0.72rem; }
}
@media (max-width: 420px) {
  .speakers__grid { gap: 1.3rem 0.85rem; }
  .speaker__name { font-size: 0.95rem; min-height: calc(0.95rem * 1.2 * 2); }
  .speaker__role { font-size: 0.76rem; }
  .speaker__affiliation { font-size: 0.74rem; }
  .speaker__country { font-size: 0.7rem; }
}
/* Mobile pequeños (<360px): si la grilla 2-col compromete legibilidad,
   las tarjetas pasan a 1 columna automáticamente. */
@media (max-width: 340px) {
  .speakers__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---- Modal de bio ---- */
.speaker-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vh, 3rem);
  background: rgba(6, 23, 53, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.speaker-modal[aria-hidden="false"] { display: flex; }

.speaker-modal__dialog {
  position: relative;
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--color-bone);
  padding: clamp(1.8rem, 4vh, 2.8rem) clamp(1.4rem, 4vw, 2.4rem);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(1rem, 3vw, 1.8rem);
}

.speaker-modal__photo {
  aspect-ratio: 4 / 5;
  background: var(--color-navy);
  overflow: hidden;
}
.speaker-modal__photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}

.speaker-modal__body { display: flex; flex-direction: column; }

.speaker-modal__name {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0;
}
.speaker-modal__role {
  font-family: var(--font-text);
  font-size: 0.95rem;
  color: var(--color-navy);
  margin: 0.4rem 0 0;
  line-height: 1.4;
}
.speaker-modal__affiliation {
  font-family: var(--font-text);
  font-size: 0.9rem;
  color: #4A5570;
  margin: 0.15rem 0 0;
  line-height: 1.4;
}
.speaker-modal__country {
  font-family: 'Barlow Condensed', var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin: 0.5rem 0 0;
}
.speaker-modal__divider {
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-cyan);
  margin: 1.1rem 0 0.9rem;
}
.speaker-modal__bio {
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-navy);
  margin: 0;
}
.speaker-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--color-navy);
  color: #FFFFFF;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.speaker-modal__close:hover { background: var(--color-cyan); color: var(--color-navy); }

@media (max-width: 640px) {
  .speaker-modal__dialog {
    grid-template-columns: 1fr;
    padding: 1.6rem 1.2rem 1.8rem;
  }
  .speaker-modal__photo { max-width: 200px; margin: 0 auto; }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .committee__roster--lead,
  .committee__roster:not(.committee__roster--lead):not(.committee__roster--compact) {
    grid-template-columns: repeat(2, 1fr);
  }
  .committee__roster--compact {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .committee__roster--lead,
  .committee__roster:not(.committee__roster--lead):not(.committee__roster--compact) {
    grid-template-columns: repeat(2, 1fr);
  }
  .committee__roster--compact {
    grid-template-columns: repeat(2, 1fr);
  }
  .committee__group-head {
    flex-wrap: wrap;
  }
  .committee__group-rule {
    flex-basis: 100%;
    margin-top: 0.4rem;
  }
}


/* =========================================================
   SECCIÓN — Inscripción / Aranceles
   Hereda .section--navy (fondo navy oscuro). Tabla de tarifas
   en dos columnas: General y Estudiantes, con cuatro tramos
   por fecha cada una. CTA primario al final.
   ========================================================= */

.fees__grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.fees__card {
  background: rgba(244, 241, 234, 0.04);
  border: 1px solid rgba(244, 241, 234, 0.12);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.fees__card-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(244, 241, 234, 0.15);
}

.fees__card-num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-gold-soft);
  flex-shrink: 0;
}

.fees__card-title {
  font-family: var(--font-text);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-bone);
  margin: 0;
}

.fees__tiers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.5vw, 1.1rem);
}

/* Cada tramo: fecha (izq), línea de puntos (centro), monto (der). */
.fee {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}

.fee__when {
  font-family: var(--font-text);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(244, 241, 234, 0.86);
  flex-shrink: 0;
}

.fee__when-sub {
  color: rgba(244, 241, 234, 0.55);
  font-size: 0.85rem;
}

.fee__divider {
  flex: 1;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent,
    transparent 50%,
    rgba(244, 241, 234, 0.22) 50%,
    rgba(244, 241, 234, 0.22)
  );
  background-size: 6px 1px;
  background-repeat: repeat-x;
  align-self: center;
  margin-bottom: 4px;
}

.fee__amount {
  font-family: var(--font-text);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-cyan-soft);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* CTA — Registro */
.fees__action-wrap {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}

.fees__action {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 2.5rem;
  background: var(--color-cyan);
  color: var(--color-navy-deep);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--color-cyan);
  transition: background 200ms ease, transform 220ms ease;
}

.fees__action::after {
  content: "→";
  font-family: var(--font-text);
  font-size: 1rem;
  letter-spacing: 0;
  transition: transform 220ms ease;
}

.fees__action:hover {
  background: var(--color-cyan-soft);
}

.fees__action:hover::after {
  transform: translateX(4px);
}

.fees__action-note {
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(244, 241, 234, 0.55);
  margin: 0;
}

@media (max-width: 760px) {
  .fees__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .fee {
    flex-wrap: wrap;
  }
  .fee__divider {
    display: none;
  }
  .fee__amount {
    margin-left: auto;
  }
}