/* ==========================================================================
   INTERMUN — Sistema de diseño
   Base neutra (blanco / gris / negro) con los acentos del Instituto Lux:
   amarillo como acento principal y rojo como acento puntual.
   Los colores de comité (spec 11.4) se aplican con --accent por tarjeta.
   ========================================================================== */

:root {
    /* Neutros (spec 11.3) */
    --bg-light: #EAEAEA;
    --bg-white: #FFFFFF;
    --bg-soft: #F5F5F5;
    --bg-dark: #3D3D3D;
    --bg-black: #141414;
    --text: #1A1A1A;
    --text-muted: #6B6B6B;
    --text-inverse: #FFFFFF;
    --text-inverse-muted: #B4B4B4;
    --border: #D4D4D4;
    --border-dark: #333333;

    /* Acentos del Instituto Lux (extraídos del escudo oficial) */
    --lux-yellow: #F0CC3C;
    --lux-yellow-dark: #D4AF25;
    --lux-yellow-soft: #FDF6DC;
    --lux-red: #E42430;
    --lux-red-dark: #B81C26;
    --lux-gray: #6C6C6C;

    /* Acento por comité: se sobrescribe con style="--accent: #xxx" */
    --accent: var(--lux-yellow);

    /* Tipografía */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Lora', Georgia, serif;

    /* Escala tipográfica fluida */
    --fs-hero: clamp(2.5rem, 6vw, 4.5rem);
    --fs-h1: clamp(2rem, 4vw, 3rem);
    --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
    --fs-h3: 1.3rem;
    --fs-lead: clamp(1.05rem, 2vw, 1.3rem);
    --fs-small: 0.875rem;

    /* Ritmo y superficies */
    --space-section: clamp(3rem, 8vw, 6rem);
    --radius: 10px;
    --radius-sm: 6px;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
    --maxw: 1200px;
    --maxw-text: 760px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--bg-white);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Ninguna pieza suelta debe provocar scroll lateral en celular */
    overflow-x: hidden;
}

/* Ninguna imagen desborda su contenedor */
img,
svg,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

/* Palabras largas (correos, URLs) no rompen el ancho en pantallas chicas */
p,
h1, h2, h3, h4,
address,
.logo-strip__text {
    overflow-wrap: break-word;
}

/* En celular los campos de formulario nunca bajan de 16px:
   iOS hace zoom automático al enfocar un campo más pequeño. */
input,
select,
textarea,
button {
    font-family: inherit;
    font-size: max(1rem, 16px);
}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    margin: 0 0 1rem;
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
    margin: 0 0 1.15rem;
}

a {
    color: var(--text);
    text-decoration-color: var(--lux-yellow);
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-color: var(--lux-red);
}

strong {
    font-weight: 600;
}

.lead {
    font-size: var(--fs-lead);
    color: var(--text-muted);
    max-width: var(--maxw-text);
}

/* Antetítulo: etiqueta corta en mayúsculas sobre un título */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 3px;
    background: var(--lux-yellow);
    flex: none;
}

.eyebrow--inverse {
    color: var(--lux-yellow);
}

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

/* Título con subrayado de acento */
.title-rule::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    background: var(--lux-yellow);
    margin-top: 1rem;
}

.title-rule--center::after {
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Estructura
   -------------------------------------------------------------------------- */

main {
    display: block;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2rem);
}

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

.section {
    padding-block: var(--space-section);
}

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

.section--dark {
    background-color: var(--bg-black);
    color: var(--text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--text-inverse);
}

.section--dark .lead,
.section--dark p {
    color: var(--text-inverse-muted);
}

.section-head {
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head--center {
    text-align: center;
}

.section-head--center .lead {
    margin-inline: auto;
}

.section-head--center .eyebrow {
    justify-content: center;
}

/* Accesibilidad: salto al contenido */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--lux-yellow);
    color: var(--text);
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    z-index: 200;
}

.skip-link:focus {
    left: 0;
}

:focus-visible {
    outline: 3px solid var(--lux-yellow);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Encabezado y navegación
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border);
    /* Franja con los colores del Lux */
    box-shadow: inset 0 4px 0 0 var(--lux-yellow);
}

.site-header__inner {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 0.9rem clamp(1.25rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--text);
}

.brand__mark {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--bg-black);
    color: var(--lux-yellow);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: var(--radius-sm);
}

.brand__name {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}

.brand__tag {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    flex-wrap: wrap;
}

.nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    flex-wrap: wrap;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    /* 44px de alto: area tactil minima en celular */
    min-height: 44px;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.nav__link:hover,
.nav__link:focus-visible {
    color: var(--text);
    border-bottom-color: var(--lux-yellow);
}

.nav__link[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--lux-red);
}

/* Botones de sesión: siempre en una fila, incluso en celular, para que el
   encabezado no crezca a lo alto cuando hay sesión iniciada. */
.nav__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nav__actions form {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.btn:hover {
    transform: translateY(-1px);
}

/* Amarillo Lux con texto negro: alto contraste, es el llamado principal */
.btn--primary {
    background-color: var(--lux-yellow);
    color: var(--text);
    border-color: var(--lux-yellow);
}

.btn--primary:hover {
    background-color: var(--lux-yellow-dark);
    border-color: var(--lux-yellow-dark);
}

.btn--dark {
    background-color: var(--bg-black);
    color: var(--text-inverse);
    border-color: var(--bg-black);
}

.btn--dark:hover {
    background-color: var(--bg-dark);
    border-color: var(--bg-dark);
}

.btn--outline {
    background-color: transparent;
    color: var(--text);
    border-color: var(--text);
}

.btn--outline:hover {
    background-color: var(--text);
    color: var(--text-inverse);
}

.btn--outline-light {
    background-color: transparent;
    color: var(--text-inverse);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn--outline-light:hover {
    background-color: var(--text-inverse);
    color: var(--text);
    border-color: var(--text-inverse);
}

.btn--lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn--block {
    width: 100%;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* --------------------------------------------------------------------------
   Portada (hero)
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: min(88vh, 780px);
    display: flex;
    align-items: center;
    background-color: var(--bg-black);
    color: var(--text-inverse);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

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

/* Velo oscuro para que el texto siempre sea legible sobre la foto */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: clamp(4rem, 10vw, 7rem);
}

.hero__content {
    max-width: 820px;
}

.hero__title {
    font-size: var(--fs-hero);
    color: var(--text-inverse);
    margin-bottom: 1.25rem;
}

.hero__title em {
    font-style: normal;
    color: var(--lux-yellow);
}

.hero__subtitle {
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.9);
    max-width: 620px;
    margin-bottom: 2rem;
}

/* Datos clave del evento bajo el título */
.hero__facts {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 5vw, 3.5rem);
}

.hero__fact-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lux-yellow);
    margin-bottom: 0.25rem;
}

.hero__fact-value {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--text-inverse);
}

/* --------------------------------------------------------------------------
   Marcadores de posición para imágenes aún no disponibles
   -------------------------------------------------------------------------- */

.placeholder {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1.5rem;
    color: var(--text-muted);
    background-color: var(--bg-light);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.035) 0 12px,
        transparent 12px 24px
    );
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}

.placeholder__icon {
    font-size: 1.75rem;
    line-height: 1;
    opacity: 0.5;
}

.placeholder__label {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.placeholder__hint {
    font-size: 0.8rem;
    max-width: 32ch;
}

/* Variante a pantalla completa, para el fondo de la portada */
.placeholder--hero {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    background-color: var(--bg-dark);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0 16px,
        transparent 16px 32px
    );
    color: rgba(255, 255, 255, 0.55);
    align-content: center;
}

.placeholder--ratio {
    aspect-ratio: 16 / 10;
}

.placeholder--wide {
    aspect-ratio: 21 / 9;
}

.placeholder--square {
    aspect-ratio: 1 / 1;
}

/* --------------------------------------------------------------------------
   Rejillas y tarjetas
   -------------------------------------------------------------------------- */

.grid {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.card {
    background-color: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    box-shadow: var(--shadow);
}

.card > :last-child {
    margin-bottom: 0;
}

.card--flush {
    padding: 0;
    overflow: hidden;
}

.card--flush .card__body {
    padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Barra superior con el color del comité (o el amarillo por defecto) */
.card--accent {
    border-top: 4px solid var(--accent);
}

.card--interactive {
    transition: transform 0.18s, box-shadow 0.18s;
}

.card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card__media {
    aspect-ratio: 16 / 10;
    background-color: var(--bg-light);
}

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

.card__title {
    margin-bottom: 0.5rem;
}

.card__meta {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

/* Emblema del comité dentro de la tarjeta */
.card__emblem {
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin-inline: auto;
    display: block;
    margin-bottom: 1rem;
}

/* Acento por comité (spec 11.4). El emblema de cada agencia define el color;
   se aplica poniendo data-agency="AG" en la tarjeta, sin tocar los modelos.
   TODO: hex aproximados, faltan los exactos de cada archivo de emblema. */
[data-agency="AG"]        { --accent: #1A3A6B; }
[data-agency="SECURITY"]  { --accent: #475569; }
[data-agency="EMERGENCY"] { --accent: #8B1E2D; }
[data-agency="CIJ"]       { --accent: #C65A3A; }
[data-agency="INTERPOL"]  { --accent: #1A3A6B; }
[data-agency="ECOSOC"]    { --accent: #2F855A; }
[data-agency="WHO"]       { --accent: #5BA4CB; }
[data-agency="UNICEF"]    { --accent: #1CABE2; }
[data-agency="UNWOMEN"]   { --accent: #E06B2C; }
[data-agency="HUMANRIGHTS"] { --accent: #6B3FA0; }
[data-agency="UNHCR"]     { --accent: #0072BC; }
[data-agency="UNODC"]     { --accent: #A41E34; }
[data-agency="HISTORICO"] { --accent: #6C6C6C; }

/* Etiqueta de idioma del comité */
.lang-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-muted);
}

.lang-tag::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent);
}

/* Contenido reservado a delegados confirmados (mesas y protocolos) */
.locked {
    position: relative;
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    text-align: center;
    padding: clamp(1.75rem, 5vw, 2.5rem);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-soft);
}

.locked__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--bg-black);
    color: var(--lux-yellow);
    font-size: 1.4rem;
}

.locked__title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

.locked__text {
    color: var(--text-muted);
    max-width: 46ch;
    margin: 0;
}

/* Estado vacío: aún no hay registros cargados en el panel */
.empty-state {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: clamp(2.5rem, 7vw, 4rem);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-soft);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Distintivos y estados
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background-color: var(--bg-light);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.badge--yellow {
    background-color: var(--lux-yellow-soft);
    border-color: var(--lux-yellow);
    color: #6B5300;
}

.badge--red {
    background-color: #FDECEE;
    border-color: var(--lux-red);
    color: var(--lux-red-dark);
}

.badge--dark {
    background-color: var(--bg-black);
    border-color: var(--bg-black);
    color: var(--lux-yellow);
}

/* --------------------------------------------------------------------------
   Franja de logos (colegios y patrocinadores)
   -------------------------------------------------------------------------- */

.logo-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.logo-strip__item {
    display: grid;
    place-items: center;
    height: 84px;
    min-width: 150px;
    padding: 0.75rem 1rem;
    background-color: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* Sin esto un logo alto se sale de la tarjeta y pisa las de abajo */
    overflow: hidden;
}

/* Tope de altura en píxeles, no en porcentaje: dentro de un contenedor
   centrado el 100% se resuelve como "auto" y el logo desborda la tarjeta. */
.logo-strip__item img {
    max-height: 56px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Nombre en texto mientras no exista el archivo del logo */
.logo-strip__text {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.25;
}

.logo-strip--inverse .logo-strip__item {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Los logos suelen ser oscuros: sobre fondo negro no se leen.
   Las tarjetas que llevan imagen van en blanco. */
.logo-strip--inverse .logo-strip__item:has(img) {
    background-color: var(--bg-white);
    border-color: transparent;
}

.logo-strip--inverse .logo-strip__text {
    color: rgba(255, 255, 255, 0.75);
}

/* Patrocinadores: escalonados por nivel de aporte */
.sponsor-tier {
    margin-bottom: 2.5rem;
}

.sponsor-tier__label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.sponsor-tier__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border);
}

.sponsor-tier--principal .logo-strip__item { height: 120px; min-width: 220px; }
.sponsor-tier--principal .logo-strip__item img { max-height: 88px; }
.sponsor-tier--secundario .logo-strip__item { height: 90px; min-width: 165px; }
.sponsor-tier--secundario .logo-strip__item img { max-height: 62px; }

/* --------------------------------------------------------------------------
   Bloque dividido (texto + imagen)
   -------------------------------------------------------------------------- */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.split--reverse > :first-child {
    order: 2;
}

.split__media img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: block;
}

/* --------------------------------------------------------------------------
   Cifras destacadas
   -------------------------------------------------------------------------- */

.stat {
    text-align: center;
}

.stat__value {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

.section--dark .stat__value {
    color: var(--lux-yellow);
}

.stat__label {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.section--dark .stat__label {
    color: var(--text-inverse-muted);
}

/* --------------------------------------------------------------------------
   Cronología del evento
   -------------------------------------------------------------------------- */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--border);
}

.timeline__item {
    position: relative;
    padding: 0 0 2rem 2rem;
}

.timeline__item::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--bg-white);
    border: 3px solid var(--lux-yellow);
}

.timeline__item--highlight::before {
    background-color: var(--lux-red);
    border-color: var(--lux-red);
}

.timeline__date {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Rojo oscuro: el rojo puro no alcanza contraste AA sobre fondos claros */
    color: var(--lux-red-dark);
    margin-bottom: 0.2rem;
}

.timeline__title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.timeline__text {
    color: var(--text-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Sede y mapa
   -------------------------------------------------------------------------- */

.venue {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 0;
    background-color: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.venue__body {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.venue__address {
    font-style: normal;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.venue__map {
    min-height: 320px;
    position: relative;
    background-color: var(--bg-light);
}

.venue__map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--bg-white);
}

.table {
    width: 100%;
    border-collapse: collapse;
    /* Cabe completa en un celular de 360px; si una tabla tiene mas columnas,
       .table-wrap la desplaza dentro de si misma, nunca la pagina entera. */
    min-width: 300px;
}

.table th,
.table td {
    padding: 0.9rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.table thead th {
    background-color: var(--bg-black);
    color: var(--text-inverse);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover {
    background-color: var(--lux-yellow-soft);
}

.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */

.notice {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    border-left: 4px solid var(--lux-yellow);
    background-color: var(--lux-yellow-soft);
}

.notice--red {
    border-left-color: var(--lux-red);
    background-color: #FDECEE;
}

.notice__icon {
    font-size: 1.25rem;
    line-height: 1.4;
}

.notice > div > :last-child {
    margin-bottom: 0;
}

/* Listas con viñeta de acento */
.list-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.list-checks li {
    position: relative;
    padding-left: 1.9rem;
}

.list-checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 10px;
    height: 10px;
    background-color: var(--lux-yellow);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Preguntas frecuentes
   -------------------------------------------------------------------------- */

.faq {
    display: grid;
    gap: 0.85rem;
}

.faq__item {
    background-color: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.4rem;
}

.faq__item[open] {
    border-color: var(--lux-yellow);
}

.faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    font-size: 1.05rem;
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--lux-red);
    line-height: 1;
}

.faq__item[open] .faq__question::after {
    content: "–";
}

.faq__answer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

.faq__answer > :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Llamado a la acción
   -------------------------------------------------------------------------- */

.cta {
    background-color: var(--bg-black);
    color: var(--text-inverse);
    border-radius: var(--radius);
    padding: clamp(2rem, 6vw, 3.5rem);
    text-align: center;
    border-top: 5px solid var(--lux-yellow);
}

.cta h2 {
    color: var(--text-inverse);
}

.cta p {
    color: var(--text-inverse-muted);
    max-width: 60ch;
    margin-inline: auto;
}

.cta .btn-row {
    justify-content: center;
    margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.site-footer {
    background-color: var(--bg-black);
    color: var(--text-inverse-muted);
    padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
    border-top: 5px solid var(--lux-yellow);
}

.site-footer h3,
.site-footer h4 {
    color: var(--text-inverse);
}

.site-footer h4 {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: clamp(2rem, 5vw, 3rem);
    margin-bottom: 3rem;
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.site-footer__list a,
.site-footer a {
    color: var(--text-inverse-muted);
    text-decoration: none;
}

.site-footer__list a:hover,
.site-footer a:hover {
    color: var(--lux-yellow);
    text-decoration: underline;
}

.site-footer__social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.site-footer__social a {
    display: grid;
    place-items: center;
    /* Area tactil minima en celular */
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-inverse);
}

.site-footer__social a:hover {
    background-color: var(--lux-yellow);
    border-color: var(--lux-yellow);
    color: var(--text);
    text-decoration: none;
}

.site-footer__bottom {
    border-top: 1px solid var(--border-dark);
    padding-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-small);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */

/* Un campo por fila: en celular nunca se ponen dos juntos */
.form-grid {
    display: grid;
    gap: 1.25rem;
}

.field label,
.form-field > label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea,
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    /* 16px reales: por debajo, iOS hace zoom al enfocar el campo */
    font-size: max(1rem, 16px);
    line-height: 1.4;
    color: var(--text);
    background-color: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    /* Altura cómoda para el pulgar */
    min-height: 48px;
}

.field textarea,
.form-field textarea {
    min-height: 88px;
    resize: vertical;
}

/* Las casillas no son campos de texto: sin esto salen de 48 px de alto y
   ocupando todo el ancho. */
.field input[type="checkbox"],
.field input[type="radio"],
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: auto;
    min-height: auto;
    /* 20px: cómodo de tocar sin deformar la fila */
    height: 20px;
    inline-size: 20px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--lux-yellow);
}

/* La etiqueta va al lado de la casilla, no encima */
.field:has(input[type="checkbox"]),
.form-field:has(input[type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

.field:has(input[type="checkbox"]) label,
.form-field:has(input[type="checkbox"]) label {
    margin-bottom: 0;
    /* Área táctil cómoda al tocar el texto */
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--lux-yellow);
    outline: 2px solid var(--lux-yellow);
    outline-offset: 0;
}

.field .helptext,
.form-field .helptext {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.field .errorlist,
.form-field .errorlist,
.errorlist {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    color: var(--lux-red-dark);
    font-size: 0.9rem;
    font-weight: 500;
}

.field--error input,
.field--error select,
.field--error textarea {
    border-color: var(--lux-red);
}

.field--optional > label::after {
    content: " (opcional)";
    font-weight: 400;
    color: var(--text-muted);
}

/* Agrupación temática dentro de un formulario largo */
.fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 2.5rem;
}

.fieldset__legend {
    display: block;
    width: 100%;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0 0 0.75rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--lux-yellow);
}

.fieldset__hint {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: -1rem 0 1.5rem;
}

/* Pasos del proceso de inscripción */
.steps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2rem;
    padding: 0;
}

.steps__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background-color: var(--bg-light);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.steps__item--done {
    background-color: var(--lux-yellow-soft);
    color: #6B5300;
}

.steps__item--current {
    background-color: var(--bg-black);
    color: var(--lux-yellow);
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-small { font-size: var(--fs-small); }
.text-body { color: var(--text); }
.mi-auto { margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.stack > * + * { margin-top: 1.25rem; }

.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;
}

/* --------------------------------------------------------------------------
   Ajustes responsivos y preferencias del usuario
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
    /* En celular el encabezado deja de ser fijo: con la navegación en varias
       filas se comía más de un tercio de la pantalla. */
    .site-header {
        position: static;
    }

    /* Compacto: el encabezado no debe pasar del 20 % de la pantalla */
    .site-header__inner {
        justify-content: center;
        text-align: center;
        gap: 0.5rem;
        padding-block: 0.5rem;
    }

    .brand__mark {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .brand__name {
        font-size: 1.15rem;
    }

    .brand__tag {
        font-size: 0.62rem;
    }

    .nav__actions .btn {
        padding-block: 0.55rem;
        font-size: 0.95rem;
    }

    .nav,
    .nav__list {
        justify-content: center;
        gap: 0.4rem 1.1rem;
    }

    /* Orden en celular: marca, enlaces y al final el botón de inscripción */
    .nav {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav__list {
        width: 100%;
    }

    .nav__link {
        min-height: 40px;
    }

    .hero {
        min-height: auto;
    }

    .hero__facts {
        gap: 1.25rem;
    }

    /* Los botones ocupan todo el ancho: más fáciles de tocar */
    .btn-row .btn {
        flex: 1 1 100%;
    }

    /* Menos los del encabezado, que van juntos en una sola fila */
    .nav__actions .btn {
        flex: 0 1 auto;
        padding-inline: 1rem;
    }

    .split--reverse > :first-child {
        order: 0;
    }

    .venue__map {
        min-height: 260px;
    }
}

@media (max-width: 420px) {
    .logo-strip__item {
        min-width: 130px;
        height: 74px;
    }

    .logo-strip__item img {
        max-height: 48px;
    }

    .sponsor-tier--principal .logo-strip__item {
        min-width: 180px;
        height: 100px;
    }

    .sponsor-tier--secundario .logo-strip__item {
        min-width: 140px;
        height: 80px;
    }

    .table th,
    .table td {
        padding: 0.75rem 0.85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .site-header,
    .site-footer,
    .btn,
    .hero__media {
        display: none !important;
    }
}