/* ============================================================
   ENCUENTRO REGIONAL 2026 — CSS DEFINITIVO (fiel al PDF)
   Análisis visual pixel a pixel desde el PDF original
============================================================ */
 
/* ── VARIABLES ─────────────────────────────────────────── */
:root {
    --navy-darkest: #020f44;   /* color principal marca — navbar, fondo secciones */
    --navy-dark:    #020f44;   /* fondo hero / intro */
    --navy:         #071242;   /* secciones oscuras */
    --navy-mid:     #0d1a55;   /* capas medias */
    --teal:         #00b8a0;   /* verde agua principal */
    --teal-light:   #00d4ba;   /* teal claro */
    --teal-grad:    linear-gradient(135deg, #00b8a0, #00d4ba);
    --purple:       #6b3fa0;   /* morado principal (headline tematicas, botón) */
    --purple-pill:  #5c35a0;   /* píldora fecha izq */
    --purple-light: #8855cc;
    --purple-mid:   #4a3080;   /* píldora hora */
    --white:        #ffffff;
    --off-white:    #f5f7fa;
    --gray-light:   #eff1f5;   /* fondo filas ejes temáticos */
    --text-dark:    #1a2340;
    --text-muted:   #8899aa;
    --text-muted2:  #6b7fa0;
 
    --font-display: 'Barlow Condensed', 'Oswald', sans-serif;
    --font-body:    'Lato', sans-serif;
    --container:    1200px;
}
 
/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
    line-height: 1.5;
}
img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 2rem; }
 
/* ── ANIMATE-IN ────────────────────────────────────────── */
.animate-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
.animate-in.visible { opacity: 1; transform: translateY(0); }
 
/* ══════════════════════════════════════════════════════════
   1. NAVBAR
   Fondo azul marino sólido (#0a1530), texto blanco, centrado.
   Al scroll: más oscuro + sombra.
══════════════════════════════════════════════════════════ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
}
 
.nav-bar {
    background: #020f44;
    transition: background .35s, box-shadow .35s;
}
.site-header.scrolled .nav-bar {
    background: #010b35;
    box-shadow: 0 2px 24px rgba(0,0,0,.6);
}
 
.nav-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2rem;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
 
.nav-logo { display: none; } /* Solo mobile */
 
.nav-links {
    display: flex;
    align-items: center;
    gap: 4rem;
}
 
.nav-links a {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    transition: color .2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--teal); }
 
/* Esconder el botón "Regístrate" del nav en desktop */
.nav-links li.nav-register { display: none; }
 
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .5rem;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}
.nav-toggle span {
    display: block;
    width: 26px; height: 2.5px;
    background: var(--white);
    border-radius: 2px;
    transition: transform .3s, opacity .3s;
}
 
/* ══════════════════════════════════════════════════════════
   2. HERO
   Foto de fondo, gradiente oscuro abajo-izquierda.
   Texto centrado-izquierda en la parte inferior.
   Formas orgánicas azul marino en la esquina inferior izquierda.
   ENCUENTRO en blanco. 20/26 en blanco (no teal).
   Arco teal decorativo detrás de AUPRIDES/ACIET.
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   HERO — Stack de 3 imágenes
   Capa 0 (z:0): hero-san-salvador.jpg  — fondo estático con parallax suave
   Capa 1 (z:1): waves-azules1.png       — formas orgánicas (PNG transparente)
   Capa 2 (z:2): texto-principal-elipses.png — texto SVG exportado (PNG/SVG)
   Capa 3 (z:3): gradiente CSS adicional para legibilidad del texto
   Color base navbar + fondo bottom: #020f44
══════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    max-height: 1080px;        /* evita que se estire demasiado en pantallas 4K */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: #020f44;       /* color de fondo fallback / base section */
}
 
/* ── CAPA 0: Foto de ciudad — parallax al scroll ──────── */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* La imagen ocupa todo el contenedor */
    background-image: url('../images/hero-san-salvador.jpg');
    background-size: cover;
    background-position: center 30%;
    /* parallax: fija el fondo mientras se scrollea */
    background-attachment: fixed;
    /* Fallback color si la imagen no carga */
    background-color: #020f44;
    /* Escalar ligeramente para dar margen al parallax sin bordes vacíos */
    transform: scale(1.06);
    transform-origin: center center;
    will-change: transform;
}
 
/* ── CAPA 1: Gradiente oscuro CSS para legibilidad del texto ──
   Inicia transparente en la parte superior, se vuelve
   totalmente #020f44 antes de llegar al texto.
   Empieza a oscurecer alrededor del 35% y llega a sólido ~75%.
   Esto garantiza que el blanco del texto no se pierda.
──────────────────────────────────────────────────────── */
.hero-gradient {
    position: absolute;
    /* El gradiente arranca al 45% del alto desde arriba */
    top: 45%;
    left: 0;
    right: 0;
    /* Llega hasta el fondo */
    bottom: -1px;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        transparent              0%,      /* ← techo del gradiente: transparente */
        rgba(2, 15, 68, 0.20)   20%,
        rgba(2, 15, 68, 0.60)   45%,
        rgba(2, 15, 68, 0.88)   68%,
        #020f44                 85%,
        #020f44                100%
    );
    pointer-events: none;
}
 
/* ── CAPA 2: waves-azules1.png — anclada al fondo ────────
   Cubre la parte inferior del hero sobre la foto/gradiente.
   Debe tener fondo transparente y las formas en #020f44 / azul marino.
──────────────────────────────────────────────────────── */
.hero-waves-img {
    position: absolute;
    bottom: -1px;              /* -1px para eliminar posible gap de subpixel */
    left: 0;
    width: 100%;
    z-index: 2;
    pointer-events: none;
    /* La imagen mantiene su aspect-ratio pero se escala al ancho */
    display: block;
}
.hero-waves-img img {
    display: block;
    width: 100%;
    height: auto;
    /* En pantallas muy altas evitar que la wave sea gigante */
    max-height: 55vh;
    object-fit: fill;          /* fill: estira horizontalmente sin recortar */
}
 
/* ── CAPA 3: texto-principal-elipses.png — centrado con márgenes ──
   El texto exportado como imagen/SVG.
   Se centra horizontalmente, con márgenes laterales mínimos.
   Siempre queda 50px por encima del borde inferior de las waves.
──────────────────────────────────────────────────────── */
.hero-text-img {
    position: absolute;
    /* Posicionar desde el fondo hacia arriba, por encima de las waves */
    bottom: calc(var(--hero-waves-height, 15%) - 20px);
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 clamp(1rem, 5vw, 4rem);   /* márgenes laterales responsivos */
    pointer-events: none;
}
.hero-text-img img,
.hero-text-img svg {
    display: block;
    width: 100%;
    max-width: 1220px;          /* nunca más grande que este máximo */
    height: auto;
}
 
/* ── FALLBACK: texto HTML cuando no hay imagen ────────── */
.hero-text-fallback {
    position: absolute;
    bottom: calc(var(--hero-waves-height, 28%) + 30px);
    left: 0; right: 0;
    z-index: 4;
    padding: 0 clamp(1.5rem, 6vw, 5rem);
    text-align: center;
    pointer-events: none;
}
.hero-text-fallback.hidden { display: none; }
 
/* ── Ajuste parallax en móvil ─────────────────────────── */
/* background-attachment: fixed no funciona bien en iOS — desactivar */
@media (hover: none) and (pointer: coarse) {
    .hero-bg {
        background-attachment: scroll;
        transform: none;
    }
}
/* ══════════════════════════════════════════════════════════
   PILL "Articulando Calidad" — Flotante entre hero e intro
   • Vive dentro de .hero con position:absolute + bottom:0
   • transform:translateY(50%) → exactamente a mitad del corte
   • El .intro-section tiene padding-top para no solapar contenido
   • z-index:10 → por encima de waves y gradiente del hero
══════════════════════════════════════════════════════════ */
.hero-tagline-pill {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 100;        /* encima de TODO */
    white-space: nowrap;
 
    /* Pill: fondo semitransparente con borde sutil */
    background: rgba(2, 15, 68, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50px;
    padding: 1.75rem 2.2rem;
 
    /* Texto */
    font-family: var(--font-body);
    font-size: clamp(1.95rem, 1.8vw, 1.2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
    letter-spacing: .01em;
}
 
/* El intro-section necesita padding-top = mitad de la pill
   para que el contenido no quede tapado por la pill flotante */
.intro-section {
    padding-top: 3rem;
}
 
/* ══════════════════════════════════════════════════════════
   3. INTRO / FECHA — Sección SVG
   ─ Fondo: #020f44
   ─ Pills de fecha: SVG inline responsivo
   ─ Botón REGÍSRATE: a mitad entre sección oscura y blanca
     (translate -50% hacia arriba sobre la ola de separación)
══════════════════════════════════════════════════════════ */
.intro-section {
    background: #020f44;
    padding-bottom: 0;
    text-align: center;
    position: relative;
    overflow: visible;
    /* z-index no necesario — pill usa wrapper externo */
}
 
/* ── Tagline ──────────────────────────────────────────── */
.intro-tagline { margin-bottom: 3rem; }
 
.tagline-light {
    font-size: clamp(0.97rem, 2vw, 2.3rem);
    font-weight: 400;
    color: rgba(255,255,255,.9);
    line-height: 1.6;
}
.tagline-bold {
    font-size: clamp(1rem, 3.2vw, 3rem);
    font-weight: 800;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.1;
    margin: .15rem 0;
}
 
/* ── SVG de pills de fecha — responsive ───────────────── */
.date-svg-wrap {
    width: 100%;
    max-width: 1300px;       /* ajusta al ancho real de tu PNG si es necesario */
    margin: 0 auto 2.5rem;
    /* padding: 0 clamp(1rem, 4vw, 3rem); */
}
.date-svg-wrap svg,
.date-svg-wrap img {
    width: 100%;
    height: auto;
    display: block;
}
 
/* ── Descripción ──────────────────────────────────────── */
.intro-description {
    max-width: 100%;
    margin: 0 auto 0;
    font-size: 18pt;
    color: rgba(255,255,255,.8);
    line-height: 1.75;
    padding: 0 1.5rem;
}
.intro-description strong { color: var(--white); }
 
/* ── Separador ola + botón flotante ───────────────────────
   La ola SVG separa intro (oscuro) de temáticas (blanco).
   El botón se posiciona exactamente sobre el corte, mitad
   en cada sección, usando margin-top negativo.
─────────────────────────────────────────────────────────*/
.intro-bottom {
    position: relative;
    margin-top: 3rem;
    /* El botón necesita salir del flujo normal hacia abajo */
}
 
.intro-wave-svg {
    display: block;
    width: 100%;
    line-height: 0;
}
.intro-wave-svg svg {
    width: 100%;
    display: block;
}
 
/* ── Botón REGÍSRATE — flotante a mitad de la ola ─────── */
.cta-float-wrap {
    position: absolute;
    /* El centro del botón queda en la línea de corte de la ola */
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    z-index: 10;
    pointer-events: none;   /* el <a> interior sí recibe clicks */
}
 
.btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    background: var(--purple);
    color: var(--white);
    font-size: 25pt;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 1rem 3.2rem;
    border-radius: 50px;
    transition: background .25s, transform .2s, box-shadow .25s;
    box-shadow: 0 8px 32px rgba(107,63,160,.5);
    pointer-events: all;
    white-space: nowrap;
}
.btn-register:hover {
    background: var(--purple-light);
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(107,63,160,.55);
}
.btn-arrow { width: 17px; height: 17px; flex-shrink: 0; }
.btn-register--sm {
    font-size: .76rem;
    padding: .6rem 1.6rem;
    border-radius: 50px;
}
/* ══════════════════════════════════════════════════════════
   4. EJES TEMÁTICOS
   Fondo BLANCO.
   Hay formas orgánicas azul marino a la izquierda (de la ola superior).
   Headline izquierdo: "Un espacio para" en gris oscuro,
     "CONECTAR VISIÓN, COOPERACIÓN Y" en MORADO,
     "TRANSFORMACIÓN EDUCATIVA" en TEAL.
   Separador vertical morado entre las dos columnas.
   Filas de ejes: fondo gris muy claro, sin badge de color.
   Título del eje (CALIDAD, etc.) en TEAL. Items con bullet negro.
   Ola de salida: formas orgánicas azul marino en la parte inferior derecha.
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   SECCIÓN TEMÁTICAS
   • Fondo blanco
   • wave-izquierda.png — esquina superior izquierda (PNG transp.)
   • wave-derecha.png   — esquina inferior derecha  (PNG transp.)
   • Grid 2 col: claim izquierdo | divisor morado | ejes derecho
   • Claim: "Un espacio para" gris, headline morado + teal
   • Ejes: filas gris claro, título teal, bullets negro
══════════════════════════════════════════════════════════ */
.tematicas-section {
    background: #ffffff;
    padding: 5rem 0 5rem;
    position: relative;
    overflow: hidden;      /* recorta las waves en los bordes */
}
 
/* ── Wave izquierda — esquina superior izquierda ───────── */
.tematicas-wave-left {
    position: absolute;
    top: -3px;
    left: 0;
    width: clamp(180px, 28vw, 1000px);
    pointer-events: none;
    z-index: 0;
    line-height: 0;
}
.tematicas-wave-left img {
    width: 100%;
    height: auto;
    display: block;
}
 
/* ── Wave derecha — esquina inferior derecha ───────────── */
.tematicas-wave-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(180px, 28vw, 1000px);
    pointer-events: none;
    z-index: 0;
    line-height: 0;
}
.tematicas-wave-right img {
    width: 100%;
    height: auto;
    display: block;
}
 
/* ── Grid principal — encima de las waves ──────────────── */
.tematicas-grid {
    display: grid;
    grid-template-columns: 1fr 2px 1.6fr;
    gap: 0 2rem;
    align-items: center;
    position: relative;
    z-index: 1;
    right: 15%;
}
 
/* ── Columna izquierda: claim ──────────────────────────── */
.tematicas-claim {
    text-align: right;
    padding-right: 1rem;
    width: 102%;
}
 
.claim-pre {
    font-size: 35pt;
    font-weight: 400;
    color: #000000;
    margin-bottom: .4rem;
}
 
.claim-headline {
    font-family: var(--font-display);
    font-size: 51pt;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: .02em;
}
.claim-headline .line-purple { color: #6e37a6; display: block; }
.claim-headline .line-teal   { color: #159bba; display: block; }
 
/* ── Separador vertical morado ─────────────────────────── */
.tematicas-divider {
    width: 2px;
    background: #6b3fa0;
    align-self: stretch;
    min-height: 280px;
}
 
/* ── Columna derecha: ejes temáticos ───────────────────── */
.tematicas-axes {
    padding-left: 1rem;
}
 
.axes-label {
    font-family: var(--font-display);
    font-size: 13pt;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 1rem;
    display: block;
}
 
/* Cada fila de eje */
.axis-row {
    display: grid;
    grid-template-columns: 250px 1fr;
    background: #f0f2f5;
    margin-bottom: .45rem;
    border-radius: 3px;
    overflow: hidden;
}
 
.axis-title-col {
    padding: .95rem .8rem;
    width: 298px;
    word-break: break-word;
    display: flex;
    align-items: center;
}
 
.axis-title {
    font-family: var(--font-display);
    font-size: 26pt;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #159bba;
    white-space: normal;
    line-height: 1.2;
}
 
.axis-items-col {
    padding: .95rem 1rem;
    border-left: 1px solid rgba(0,0,0,.07);
}
 
.axis-items {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    list-style: none;
    margin: 0; padding: 0;
    width: 265px;
}
.axis-items li {
    font-size: 15pt;
    color: #1a2340;
    padding-left: 1rem;
    position: relative;
    line-height: 1.45;
}
.axis-items li::before {
    content: '•';
    position: absolute;
    left: .15rem;
    color: #1a2340;
    font-size: .75rem;
    top: .05em;
}
 
/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
    .tematicas-grid {
        grid-template-columns: 1fr 2px 2.2fr;
        gap: 0 2rem;
        align-items: center;
        right: 0;
    }

    .axis-items li {
    font-size: 15pt;
    color: #1a2340;
    padding-left: 1rem;
    position: relative;
    line-height: 1.45;
}

    .claim-pre {
    font-size: 20pt;
    font-weight: 400;
    color: #000000;
    margin-bottom: .4rem;
}
    .tematicas-claim { text-align: center; padding-right: 0; }
    .tematicas-divider {
        width: 50%;
        height: 2px;
        min-height: unset;
        margin: 0 auto;
        align-self: auto;
    }
    .tematicas-axes { padding-left: 1rem;
    min-width: 0; }
    .tematicas-wave-left,
    .tematicas-wave-right { width: clamp(210px, 20vw, 200px); }
}
 
@media (max-width: 600px) {
    .axis-row { grid-template-columns: 130px 1fr; }
    .axis-title { font-size: 14pt; }
    .claim-headline { font-size: clamp(1.7rem, 7vw, 2.8rem); }
    .claim-pre {
    font-size: 20pt;
    font-weight: 400;
    color: #000000;
    margin-bottom: .4rem;
}

.axis-title-col {
    padding: .95rem 0.2rem;
    width: 298px;
    word-break: break-word;
    display: flex;
    align-items: center;
}

.axis-items li {
    font-size: 10pt;
    color: #1a2340;
    padding-left: 1rem;
    position: relative;
    line-height: 1.45;
}
}
 
/* Ola de transición tematicas → panelistas
   Son formas blob azul marino, NO una ola simple.
   Aparece en la esquina inferior derecha y se expande al centro. */
.tematicas-wave-bottom {
    margin-top: 0;
    line-height: 0;
    position: relative;
    height: 200px;
    overflow: hidden;
}
.tematicas-wave-bottom svg {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: block;
}
 

/* ══════════════════════════════════════════════════════════
   5. PANELISTAS
   Fondo: azul marino oscuro.
   Header: "NUESTROS" pequeño arriba, "PANELISTAS" grande en blanco,
           arco teal semicircular arriba del texto,
           arco teal a la derecha del texto,
           subtítulo en teal claro.
   Avatares: ÓVALOS (aspect-ratio 1/1.1), borde blanco, sin borde de color.
   Texto: título académico en blanco tenue, nombre en blanco bold, cargo en gris.
══════════════════════════════════════════════════════════ */
.panelistas-section {
    background: #020f44;
    padding: 3rem 0 5rem;
    position: relative;
    overflow: hidden;
}
 
/* ── Header: TituloPanelistas.png ─────────────────────── */
.panelistas-header {
    text-align: center;
    margin-bottom: 4rem;
}
 
.panelistas-titulo-img {
    display: block;
    width: 100%;
    max-width: 900px;      /* ajusta según el ancho real del PNG */
    height: auto;
    margin: -20px auto;
}
 
/* ── Grid 6 columnas desktop ──────────────────────────── */
.panelistas-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 3rem 1.5rem;
    align-items: start;
}
 
/* ── Cada card ────────────────────────────────────────── */
.panelist-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: .9rem;
}
 
/* ── Avatar oval — manejo de PNGs con espacios variables ──
   PROBLEMA: Illustrator exporta con bounding box distinto
   para cada panelista (algunos anchos, otros altos, otros
   cuadrados con margen).
   SOLUCIÓN:
   · Contenedor fijo oval (width × height distintos).
   · La <img> se expande al 140% con object-fit:cover para
     compensar el espacio transparente y centrar la cara.
   · object-position: top center prioriza la cara/cabeza.
──────────────────────────────────────────────────────── */
.panelist-avatar {
    /* Tamaño del óvalo — fijo y consistente para todos */
    width:  clamp(100px, 13vw, 148px);
    height: clamp(112px, 14.6vw, 166px);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: transform .3s, border-color .3s;
}
 
.panelist-card:hover .panelist-avatar {
    transform: scale(1.04);
    border-color: #00b8a0;
}
 
.panelist-avatar img {
    /* Ocupa más del 100% para compensar el espacio
       transparente variable de cada PNG de Illustrator */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 
    /* Ancho y alto al 100% del contenedor como base */
    width: 100%;
    height: 100%;
 
    /* cover recorta el exceso; top center prioriza la cara */
    object-fit: cover;
    object-position: top center;
}
 
/* ── Placeholder cuando no hay imagen aún ─────────────── */
.panelist-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d1e40, #1a3060);
    color: #00b8a0;
    font-family: 'Novecento Wide', 'Barlow Condensed', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .05em;
}
 
/* ── Info del panelista ───────────────────────────────── */
.panelist-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    width: 100%;
}
 
/* Título académico: MSTRA. / DR. / DRA. / ING. / MSTRO. */
.panelist-academic-title {
    font-family: 'Novecento Wide', 'Barlow Condensed', sans-serif;
    font-size: 12pt;
    font-weight: 700;
    color: #159bba;
    text-transform: uppercase;
    letter-spacing: .12em;
    line-height: 1.3;
    display: block;
}
 
/* Nombre completo */
.panelist-name {
    font-family: 'Novecento Wide', 'Barlow Condensed', sans-serif;
    font-size: 12pt;
    font-weight: 700;
    text-transform: uppercase;
    color: #159bba;
    letter-spacing: .06em;
    line-height: 1.2;
    display: block;
}
 
/* Cargo / institución */
.panelist-role {
    font-family: 'Lato', sans-serif;
    font-size: 9pt;
    font-weight: 400;
    color: white;
    line-height: 1.4;
    display: block;
    text-transform: uppercase;
    letter-spacing: .04em;
}
 
/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
    .panelistas-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem 1.2rem;
    }
}
 
@media (max-width: 768px) {
    .panelistas-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1rem;
    }
    .panelistas-titulo-img { max-width: 90%; }
}
 
@media (max-width: 500px) {
    .panelistas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem .8rem;
    }
}
 
/* ══════════════════════════════════════════════════════════
   6. ORGANIZADORES
   Fondo BLANCO.
   Olas azul marino en la esquina superior izquierda.
   Texto centrado en gris oscuro.
   Logos reales centrados.
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
   SECCIÓN ORGANIZADORES
   Layout fiel al Figma:
   · Fondo blanco
   · Wave izquierda arriba  (WaveFinal.png)
   · Wave derecha abajo     (WaveFinalFondo.png)
   · Claim centrado
   · Dos filas: label izq | logos centrados
══════════════════════════════════════════════════════════ */
.org-section {
    background: #ffffff;
    padding: 0 0 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
 
/* ── Waves — reutiliza clases de tematicas ─────────────── */
/* .tematicas-wave-left y .tematicas-wave-right ya definidos */
 
/* ── Claim ─────────────────────────────────────────────── */
.org-claim {
    color: #1a2340;
    font-family: var(--font-body);
    font-size: 35pt;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}
.org-claim strong { font-weight: 700; display: block; }
 
/* ── Contenedor de filas de logos ──────────────────────── */
.org-logos-wrap {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}
 
/* ── Cada fila: label | logos ──────────────────────────── */
.org-row {
    display: grid;
    grid-template-columns: 110px 1fr;   /* label fijo | logos flexibles */
    align-items: center;
    gap: 0 5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e8eef4;
}
.org-row:last-child { border-bottom: none; }
 
/* Label izquierdo */
.org-label {
    font-family: 'Novecento Wide', 'Barlow Condensed', sans-serif;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #aab0c0;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
}
 
/* Logos centrados a la derecha del label */
.logos-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* alineados desde la izquierda del área de logos */
    flex-wrap: wrap;
    gap: 1rem 3rem;
}
 
/* ── Imágenes de logos ─────────────────────────────────── */
.logo-item img {
    display: block;
    max-height: 150px;
    width: auto;
    object-fit: contain;
}
.logo-item--ally img {
    max-height: 100px;
}
 
/* ── Placeholders hasta tener los logos reales ─────────── */
.logo-placeholder {
    display: block;
    font-family: 'Novecento Wide', 'Barlow Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    color: #1a2340;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .5;
}
.logo-placeholder--sm { font-size: 1rem; }
 
/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
    .org-row {
        grid-template-columns: 1fr;
        gap: .8rem 0;
        padding: 1.2rem 0;
        text-align: center;
    }

    .org-claim {
    color: #1a2340;
    font-family: var(--font-body);
    font-size: 26pt;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2.2rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}
    .org-label { text-align: center; white-space: normal; }
    .logos-row { justify-content: center; gap: 1rem 2rem; }
    .logo-item img { max-height: 60px; }
    .logo-item--ally img { max-height: 40px; }
}
 
/* ── FOOTER ────────────────────────────────────────────── */
.site-footer {
    background: #010b35;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(0,184,160,.12);
}
.site-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-copy { font-size: .78rem; color: var(--text-muted); letter-spacing: .04em; }
.footer-cta  { margin-left: auto; }
 
/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
 
/* Tablet landscape */
@media (max-width: 1024px) {
    .panelistas-grid { grid-template-columns: repeat(4, 1fr); }
    .tematicas-grid { grid-template-columns: 1fr 16px 1.1fr; right: 0; }
}
 
/* Tablet portrait */
@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-logo   { display: flex; align-items: baseline; gap: .3rem; font-family: var(--font-display); color: var(--white); }
    .nav-logo-enc { font-size: .9rem; font-weight: 700; }
    .nav-logo-year { font-size: 1.1rem; font-weight: 900; color: var(--teal); }
 
    .nav-inner { justify-content: space-between; }
 
    .nav-links {
        display: none;
        position: absolute;
        top: 56px; left: 0; right: 0;
        background: rgba(6,13,31,.97);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .5rem 0;
        border-bottom: 1px solid rgba(0,184,160,.2);
    }
    .nav-links.open { display: flex; }
    .nav-links li { border-bottom: 1px solid rgba(255,255,255,.05); }
    .nav-links li.nav-register { display: block; }
    .nav-links a { display: block; padding: .85rem 1.5rem; font-size: .85rem; }
 
    /* Hero image stack responsive */
    .hero-waves-img img { max-height: 45vw; }
    .hero-text-img { bottom: calc(var(--hero-waves-height, 22%) - 10px); padding: 0 4vw; }
    .hero-text-img img { max-width: 100%; }
 
    .date-bar { gap: 1rem; }
    .date-block { min-width: 140px; padding: .8rem 1.2rem; }
    .date-block--day { min-width: 200px; }
 
    .tematicas-grid {
        grid-template-columns: 1fr;
        right: 0;
        gap: 2rem 0;
    }
    .tematicas-claim { text-align: center; padding-right: 0; }
    .tematicas-divider { width: 60%; height: 2px; margin: .5rem auto; align-self: auto; }
    .tematicas-axes { padding-left: 0; }
 
    .panelistas-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem .8rem; }
 
    .logos-row { gap: 1.5rem 2rem; }
    .org-row { flex-direction: column; align-items: flex-start; gap: .8rem; }
}
 
/* Phone landscape */
@media (max-width: 600px) {
    .panelistas-grid { grid-template-columns: repeat(2, 1fr); }
    .date-bar { flex-direction: column; align-items: center; gap: .8rem; }
    .date-block--day { flex-direction: column; min-width: 220px; }
    /* Hero en teléfono vertical */
    .hero { min-height: 480px; }
    .hero-waves-img img { max-height: 50vw; }
    .hero-text-img { padding: 0 3vw; bottom: calc(var(--hero-waves-height, 18%) - 5px); }
}
 
/* Phone portrait */
@media (max-width: 420px) {
    .panelistas-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem .5rem; }
    .btn-register { font-size: .85rem; padding: 1rem 2.2rem; letter-spacing: .12em; }
    .site-footer .container { flex-direction: column; align-items: center; text-align: center; }
    .footer-cta { margin-left: 0; }
}
 
/* Dark mode override — forzar fondos correctos */
@media (prefers-color-scheme: dark) {
    .tematicas-section, .org-section { background: var(--white) !important; }
    .intro-section, .panelistas-section { background: var(--navy-dark) !important; }
}