/* ==========================================================================
   Juventud Republicana — Nocturno
   Reglas del sistema: la fotografía va a canto vivo; las superficies se
   distinguen por escalón de luminosidad, no por sombra; el rojo tiene
   presupuesto. Cero degradados decorativos, cero cristal esmerilado.
   El único degradado del sitio es el velo funcional que garantiza contraste
   sobre una fotografía, y está marcado como tal.
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--mast) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background-color: var(--void);
    color: var(--paper);
    font-family: var(--registro);
    font-size: var(--fs-base);
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* --- Superficies del navegador ------------------------------------------ */
::selection { background: var(--red); color: var(--on-red); }
:root { caret-color: var(--red-ink); accent-color: var(--red); color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: #2C3346 var(--void); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #2C3346; border: 4px solid var(--void); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #3C455D; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   Tipografía
   La energía juvenil viene del salto de escala: cartel enorme contra
   metadato diminuto, sin tamaños intermedios que diluyan el contraste.
   ========================================================================== */
h1, h2, h3 {
    font-family: var(--voz);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin: 0 0 var(--s2);
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: -0.012em; }
h2 { font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: 0; }

p { margin: 0 0 var(--s3); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.intro { font-size: var(--fs-intro); line-height: 1.55; color: var(--paper-2); max-width: 52ch; }

.meta {
    font-family: var(--registro); font-size: var(--fs-meta); font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-3);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
strong, b { font-weight: 700; color: var(--paper); }
a { color: inherit; }

.prose { max-width: var(--measure); color: var(--paper-2); }
.prose h2 { margin-top: var(--s5); color: var(--paper); }
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 0 0 var(--s3); padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem; }
.prose li::before {
    content: ""; position: absolute; left: 0; top: 0.68em;
    width: 9px; height: 2px; background: var(--paper-3); border-radius: 1px;
}
.prose a, a.link {
    color: var(--red-ink); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 0.2em;
    text-decoration-color: rgba(255, 69, 80, 0.4);
    transition: text-decoration-color var(--t-fast), color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
    .prose a:hover, a.link:hover { text-decoration-color: var(--red-ink); color: #FF6E76; }
}
.prose a, .foot a, .rail dd, .crumbs { overflow-wrap: anywhere; }

/* ==========================================================================
   Retícula
   ========================================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.s-turn  { padding-block: clamp(3.25rem, 7vw, var(--s7)) clamp(3.6rem, 7.8vw, 8.8rem); }
.s-cont  { padding-block: clamp(2rem, 4.5vw, var(--s5)) clamp(2.25rem, 5vw, 3.9rem); }
.s-close { padding-block: clamp(3rem, 6vw, var(--s6)) clamp(3.4rem, 6.8vw, 6.2rem); }
.s-cont + .s-cont, .s-turn + .s-turn { padding-top: 0; }
.tint { background: var(--surface); }

.split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s4) var(--s6); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s3); } }
@media (min-width: 861px) {
    /* Solo se queda pegajoso cuando la columna no tiene nada más que sostener. */
    .split > h1, .split > h2 { position: sticky; top: calc(var(--mast) + var(--s3)); margin: 0; }
}

.skip {
    position: absolute; left: var(--s2); top: -100px; z-index: 200;
    background-color: var(--red); color: var(--on-red);
    padding: 0.75rem 1.15rem; font-weight: 700; text-decoration: none; border-radius: var(--r);
    transition: top var(--t-fast);
}
.skip:focus { top: var(--s2); }

/* ==========================================================================
   1. MÁSTIL
   El isotipo oficial viene en blanco: aquí funciona tal como fue diseñado.
   ========================================================================== */
.mast {
    position: sticky; top: 0; z-index: 100;
    height: var(--mast); display: flex; align-items: center;
    background-color: var(--void);
    border-bottom: 1px solid var(--line);
}
.mast__in { display: flex; align-items: center; gap: var(--s4); width: 100%; }

.flag { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: none; min-height: 44px; line-height: 1; }
.flag__mark { width: 34px; height: 34px; flex: none; display: block; }
.flag__type span {
    display: block; font-family: var(--voz); text-transform: uppercase;
    font-weight: 700; font-size: 1.05rem; letter-spacing: 0.07em; color: var(--paper);
}
.flag__type span + span { font-weight: 500; letter-spacing: 0.14em; color: var(--paper-3); font-size: 0.9rem; }

.nav { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.nav a {
    font-family: var(--voz); text-transform: uppercase; font-weight: 600;
    font-size: 1rem; letter-spacing: 0.09em; color: var(--paper-2); text-decoration: none;
    padding-bottom: 3px; border-bottom: 2px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--paper); border-bottom-color: var(--line-firm); } }
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--red); }

.burger {
    display: none; margin-left: auto; width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid var(--line-firm); border-radius: var(--r);
    color: var(--paper); cursor: pointer;
    transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-press);
}
.burger:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .burger:hover { border-color: var(--paper-3); background: var(--surface); } }
.burger svg { width: 20px; height: 20px; }
.burger__x { display: none; }
.burger[aria-expanded="true"] .burger__m { display: none; }
.burger[aria-expanded="true"] .burger__x { display: block; }
@media (max-width: 900px) { .nav, .mast .tlink { display: none; } .burger { display: grid; place-items: center; } }

.mnav {
    position: fixed; inset: var(--mast) 0 0; z-index: 99; background: var(--void);
    padding: var(--s4) var(--gutter) var(--s5); display: grid; align-content: start; overflow-y: auto;
}
.mnav[hidden] { display: none; }
.mnav > a {
    font-family: var(--voz); text-transform: uppercase; font-size: 2.1rem; font-weight: 700;
    letter-spacing: 0.01em; color: var(--paper); text-decoration: none;
    padding: 0.7rem 0; border-bottom: 1px solid var(--line);
}
.mnav > a[aria-current="page"] { color: var(--red-ink); }
.mnav .act { margin-top: var(--s4); font-family: var(--registro); text-transform: none;
             font-size: var(--fs-sm); color: var(--on-red); border-bottom: 0; letter-spacing: 0.01em; }

/* ==========================================================================
   2. ACCIONES
   ========================================================================== */
.act {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 1.7rem; min-height: 50px;
    background-color: var(--red); color: var(--on-red);
    border: 1px solid var(--red); border-radius: var(--r);
    font-family: var(--registro); font-size: var(--fs-sm); font-weight: 700;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), transform var(--t-press);
}
.act:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    .act:hover { background: var(--red-hot); border-color: var(--red-hot); }
}
.act--ghost { background: transparent; color: var(--paper); border-color: var(--line-firm); }
@media (hover: hover) and (pointer: fine) {
    .act--ghost:hover { background: var(--raised); border-color: var(--paper-3); color: var(--paper); }
}
.act--block { display: flex; width: 100%; }
.act[aria-disabled="true"], .act:disabled {
    background: transparent; color: var(--paper-3); border-color: var(--line);
    cursor: not-allowed; pointer-events: none;
}

.tlink {
    display: inline-flex; align-items: center; min-height: 44px;
    font-family: var(--voz); text-transform: uppercase; font-size: 1rem;
    font-weight: 600; letter-spacing: 0.09em; color: var(--paper); text-decoration: none;
    border-bottom: 2px solid var(--red);
    transition: color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) { .tlink:hover { color: var(--red-ink); } }
.tlink--quiet { color: var(--paper-2); border-bottom-color: var(--line-firm); }
@media (hover: hover) and (pointer: fine) { .tlink--quiet:hover { color: var(--paper); border-bottom-color: var(--red); } }

/* ==========================================================================
   3. PORTADA A SANGRE
   La fotografía real ocupa el primer viewport y el titular vive sobre ella.
   El velo es funcional, no decorativo: sin él el texto no alcanzaría AA
   sobre una fotografía. Por eso es el único degradado del sistema.
   ========================================================================== */
.cover { position: relative; min-height: min(88vh, 780px); display: flex; align-items: flex-end; overflow: hidden; }
.cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.cover__veil {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to top, var(--void) 2%, rgba(11,13,19,0.92) 22%, rgba(11,13,19,0.55) 55%, rgba(11,13,19,0.30) 100%),
        linear-gradient(to right, rgba(11,13,19,0.80), rgba(11,13,19,0.15) 62%);
}
.cover__in { position: relative; width: 100%; padding-block: var(--s6) clamp(2.5rem, 6vw, var(--s6)); }

.cartel {
    font-family: var(--voz); font-weight: 800; text-transform: uppercase;
    font-size: var(--fs-cartel); line-height: 0.87; letter-spacing: -0.02em;
    margin: 0; max-width: 15ch; color: #FFFFFF;
}
.cartel em { font-style: normal; color: var(--red-ink); }
.cover .intro { margin-top: var(--s3); color: var(--paper); max-width: 46ch; }
.cover__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }

@media (max-width: 640px) {
    .cover { min-height: min(82vh, 620px); }
    .cover__veil { background: linear-gradient(to top, var(--void) 4%, rgba(11,13,19,0.94) 30%, rgba(11,13,19,0.55) 100%); }
}

/* Encabezado de bloque */
.blockhead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4);
}
.blockhead h2 { margin: 0; }

/* ==========================================================================
   4. ACTIVIDAD DESTACADA
   Una sola por página, así que puede permitirse una composición propia:
   fotografía a un lado, fecha enorme y datos al otro. No es una tarjeta de
   una parrilla; es la pieza principal del bloque.
   ========================================================================== */
.feature {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background-color: var(--surface); border-radius: var(--r); overflow: hidden;
    margin-bottom: var(--s4);
}
.feature__media { position: relative; min-height: 320px; background: var(--raised); }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: clamp(1.75rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; }
.feature__when {
    font-family: var(--voz); font-weight: 800; text-transform: uppercase;
    font-size: clamp(2.6rem, 1.6rem + 3vw, 4.25rem); line-height: 0.9;
    letter-spacing: -0.015em; color: var(--paper); font-variant-numeric: tabular-nums;
    margin: 0 0 var(--s2);
}
.feature__when span { color: var(--red-ink); }
.feature h3 {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.08;
    margin: 0 0 0.6rem; text-transform: uppercase; letter-spacing: -0.005em;
}
.feature h3 a { text-decoration: none; transition: color var(--t-fast); }
@media (hover: hover) and (pointer: fine) { .feature h3 a:hover { color: var(--red-ink); } }
.feature__meta { color: var(--paper-3); font-size: var(--fs-sm); margin: 0 0 var(--s3); }
.feature__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
@media (max-width: 760px) {
    .feature { grid-template-columns: 1fr; }
    .feature__media { min-height: 220px; }
}

/* ==========================================================================
   5. ÍNDICE DE ACTIVIDADES
   Filas sobre filete. La fecha ocupa columna propia y responde entera al
   "cuándo", por eso los metadatos no llevan iconos. El estado se dice con
   palabras: sin pastillas, sin puntos de color, sin latidos.
   ========================================================================== */
.index { border-top: 1px solid var(--line); }

.row {
    position: relative; display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: var(--s3) var(--s4); align-items: center;
    /* El sangrado nunca puede superar el gutter, o la fila se sale del viewport. */
    --sangria: min(var(--s3), var(--gutter));
    padding: var(--s3) var(--sangria);
    margin-inline: calc(var(--sangria) * -1);
    border-bottom: 1px solid var(--line);
    border-radius: var(--r);
    transition: background-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
    .row:hover { background: var(--surface); }
    .row:hover .row__t { color: var(--red-ink); }
}
.row:has(.row__a:active) { background: var(--raised); }
.row:has(.row__a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.when { font-family: var(--voz); line-height: 1; color: var(--paper); margin: 0; }
.when__d { display: block; font-weight: 800; font-size: 2.4rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.when__m { display: block; margin-top: 0.25rem; font-weight: 600; font-size: 0.95rem;
           letter-spacing: 0.15em; text-transform: uppercase; color: var(--paper-3); }
.when__h { display: block; margin-top: 0.3rem; font-family: var(--registro); font-size: var(--fs-meta);
           font-weight: 500; color: var(--paper-3); font-variant-numeric: tabular-nums; }

.row__b { min-width: 0; }
.row__t {
    font-family: var(--voz); font-weight: 700;
    font-size: clamp(1.35rem, 1.15rem + 0.75vw, 1.75rem); line-height: 1.12;
    margin: 0 0 0.3rem; transition: color var(--t-fast);
}
.row__a { color: inherit; text-decoration: none; }
.row__a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.row__m { color: var(--paper-3); font-size: var(--fs-sm); margin: 0; max-width: 48ch; }
.row__s {
    font-family: var(--registro); font-size: var(--fs-meta); font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper-3); white-space: nowrap;
}
.row__s--abierto { color: var(--red-ink); }
.row--off .when__d, .row--off .row__t { color: var(--paper-3); }
.row--off .when__m { color: var(--paper-3); }

@media (max-width: 720px) {
    .row { grid-template-columns: 70px minmax(0, 1fr); gap: var(--s2) var(--s3); align-items: start; }
    .row__s { grid-column: 2; }
    .when__d { font-size: 2rem; }
    .row__m { max-width: none; }
}

.empty { padding: var(--s6) 0; border-bottom: 1px solid var(--line); }
.empty p { color: var(--paper-2); margin-bottom: var(--s3); }

/* Filtros: enlaces sobre filete, no pastillas. */
.filters { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); padding-bottom: var(--s3);
           margin-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.fgroup + .fgroup { margin-left: auto; }
@media (max-width: 820px) { .filters { flex-direction: column; } .fgroup + .fgroup { margin-left: 0; } }
.filt {
    appearance: none; background: none; border: 0; padding: 0.6rem 0 calc(0.6rem + 3px);
    font-family: var(--registro); font-size: var(--fs-sm); font-weight: 600;
    color: var(--paper-3); cursor: pointer; border-bottom: 2px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) { .filt:hover { color: var(--paper); } }
.filt[aria-pressed="true"] { color: var(--paper); border-bottom-color: var(--red); }
.filt__n { color: var(--paper-3); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 0.25rem; }
.count-out { color: var(--paper-3); font-size: var(--fs-sm); margin-bottom: var(--s3); }

/* ==========================================================================
   6. FOTOGRAFÍA
   Canto vivo, sin sombra, sin texto encima salvo en la portada, donde el velo
   garantiza el contraste. El pie va debajo, en registro de metadato.
   ========================================================================== */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; background: var(--surface); border-radius: var(--r); }
.shot figcaption { margin-top: 0.65rem; font-size: var(--fs-meta); color: var(--paper-3); max-width: 56ch; }
.shot--bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.shot--bleed img { aspect-ratio: 16 / 9; object-fit: cover; max-height: 62vh; border-radius: 0; }
.shot--bleed figcaption { width: min(var(--container), 100%); margin-inline: auto; padding-inline: var(--gutter); max-width: none; }
.shot--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
.shot--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.shot--wide { margin-bottom: var(--s4); }
@media (max-width: 640px) { .shot--bleed img { max-height: none; } }

/* ==========================================================================
   7. BLOQUES EDITORIALES
   ========================================================================== */
.defs { margin: 0; border-top: 1px solid var(--line-firm); }
.defs > div { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.defs dt { font-family: var(--voz); font-weight: 700; font-size: 1.45rem; line-height: 1.15;
           text-transform: uppercase; letter-spacing: 0.005em; margin-bottom: 0.4rem; }
.defs dd { margin: 0; color: var(--paper-2); max-width: 54ch; }
.defs dd .tlink { margin-top: var(--s2); }

.places { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line);
          columns: 2; column-gap: var(--s6); }
@media (max-width: 700px) { .places { columns: 1; } }
.places li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.places a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
            padding: 0.9rem 0.6rem; margin-inline: -0.6rem; text-decoration: none; border-radius: var(--r);
            transition: background-color var(--t-fast); }
.places a:active { background: var(--raised); }
@media (hover: hover) and (pointer: fine) {
    .places a:hover { background: var(--surface); }
    .places a:hover .places__n { color: var(--red-ink); }
}
.places__n { font-family: var(--voz); font-weight: 700; font-size: 1.3rem; text-transform: uppercase;
             color: var(--paper); transition: color var(--t-fast); }
.places__h { color: var(--paper-3); font-size: var(--fs-sm); }

.close { border-top: 2px solid var(--red); padding-top: var(--s3); }
.close h2 { max-width: 16ch; }
.close .intro { margin-bottom: var(--s3); }

/* ==========================================================================
   8. DETALLE DE ACTIVIDAD
   ========================================================================== */
.crumbs { font-size: var(--fs-sm); color: var(--paper-3); padding-top: var(--s3); }
.crumbs a { color: var(--paper-2); text-decoration: none; display: inline-block; padding-block: 0.6rem; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--red-ink); } }
.crumbs span { margin-inline: 0.4rem; color: var(--paper-3); opacity: 0.6; }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 280px;
           column-gap: clamp(2rem, 5vw, var(--s6)); align-items: start; }
.article__head { grid-column: 1; grid-row: 1; }
.rail          { grid-column: 2; grid-row: 1 / span 2; }
.article__body { grid-column: 1; grid-row: 2; }
/* La bajada y el primer párrafo del cuerpo se tocaban sin aire. */
.article__head { margin-bottom: var(--s4); }
.article__head h1 { margin: 0 0 var(--s2); max-width: 22ch; }
@media (max-width: 940px) {
    /* Identidad, decisión, lectura: el orden de la fuente es el de móvil. */
    .article { grid-template-columns: 1fr; row-gap: var(--s4); }
    .article__head, .rail, .article__body { grid-column: 1; grid-row: auto; }
}

.rail { position: sticky; top: calc(var(--mast) + var(--s3));
        background-color: var(--surface); border-radius: var(--r); padding: var(--s3); }
@media (max-width: 940px) { .rail { position: static; } }
.rail dl { margin: 0; }
.rail dl > div { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.rail dl > div:first-child { padding-top: 0; }
.rail dl > div:last-child { border-bottom: 0; }
.rail dt { margin-bottom: 0.2rem; }
.rail dd { margin: 0; color: var(--paper); font-size: var(--fs-sm); font-weight: 500; }
.rail__act { margin-top: var(--s3); display: grid; gap: 0.75rem; }
.rail__note { font-size: var(--fs-meta); color: var(--paper-3); }

.people { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); max-width: var(--measure); }
.people li { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.prose .people li { padding-left: 0; margin-bottom: 0; }
.prose .people li::before { content: none; }
.people b { display: block; font-weight: 600; color: var(--paper); }
.people span { color: var(--paper-3); font-size: var(--fs-sm); }

/* ==========================================================================
   9. FORMULARIOS
   Campos sobre filete inferior: una ficha que se rellena, no cajas apiladas.
   ========================================================================== */
.form { display: grid; gap: var(--s4); max-width: 46rem; }
.field { display: grid; gap: 0.4rem; }
.field > label { color: var(--paper-2); }
.req { color: var(--red-ink); margin-left: 0.15rem; }

.input, .select, .textarea {
    width: 100%; font-family: var(--registro); font-size: var(--fs-base); color: var(--paper);
    background: transparent; border: 0; border-bottom: 1px solid var(--line-firm);
    border-radius: 0; padding: 0.65rem 0.1rem; min-height: 48px;
    transition: border-color var(--t-fast);
}
.textarea { min-height: 116px; resize: vertical; line-height: 1.6; }
.select {
    appearance: none; cursor: pointer; padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238D96AC' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.2rem center; background-size: 17px 17px;
}
.select option { background: var(--surface); color: var(--paper); }
/* 6.6:1 sobre el fondo: el marcador de posición también pasa AA. */
.input::placeholder, .textarea::placeholder { color: var(--paper-3); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .input:hover, .select:hover, .textarea:hover { border-bottom-color: var(--paper-3); }
}
.input:focus, .select:focus, .textarea:focus { border-bottom-color: var(--paper); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: 2px solid var(--focus); outline-offset: 2px;
}
[aria-invalid="true"] { border-bottom-color: var(--red-ink) !important; border-bottom-width: 2px !important; }
.help { font-size: var(--fs-meta); color: var(--paper-3); }
.err { font-size: var(--fs-meta); color: var(--red-ink); font-weight: 600; }

.checkline { display: flex; gap: 0.7rem; align-items: flex-start; }
.checkline input[type="checkbox"] {
    appearance: none; flex: none; width: 24px; height: 24px; margin: 0.1rem 0 0;
    background: transparent; border: 1px solid var(--line-firm); border-radius: 4px;
    cursor: pointer; display: grid; place-content: center;
    transition: background-color var(--t-fast), border-color var(--t-fast), transform var(--t-press);
}
.checkline input[type="checkbox"]::before {
    content: ""; width: 13px; height: 13px;
    clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 22%, 86% 8%, 38% 72%);
    background: var(--on-red); transform: scale(0.6); opacity: 0;
    transition: transform var(--t-fast), opacity var(--t-fast);
}
.checkline input[type="checkbox"]:checked { background: var(--red); border-color: var(--red); }
.checkline input[type="checkbox"]:checked::before { transform: scale(1); opacity: 1; }
.checkline input[type="checkbox"]:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .checkline input[type="checkbox"]:hover { border-color: var(--paper-3); } }
.checkline label { font-size: var(--fs-sm); color: var(--paper-2); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }

.note { border-top: 2px solid var(--paper-3); padding-top: var(--s2); max-width: var(--measure); }
.note--err { border-top-color: var(--red); }
.note b { display: block; margin-bottom: 0.15rem; color: var(--paper); }
.note p { font-size: var(--fs-sm); color: var(--paper-2); }
.act[data-busy="true"] { pointer-events: none; opacity: 0.7; }

.pledge { margin: var(--s4) 0 0; border-top: 1px solid var(--line-firm); }
.pledge > div { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.pledge dt { margin-bottom: 0.15rem; }
.pledge dd { margin: 0; color: var(--paper-2); font-size: var(--fs-sm); }
.pledge__more { margin-top: var(--s2); font-size: var(--fs-sm); }
@media (max-width: 860px) { .pledge { margin-top: var(--s3); } }

/* ==========================================================================
   10. PIE
   ========================================================================== */
.foot { background: var(--surface); padding-block: var(--s5) var(--s4); margin-top: var(--s6); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 880px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__blurb { color: var(--paper-3); font-size: var(--fs-sm); margin-top: var(--s2); max-width: 32ch; }
.foot h2 { font-family: var(--registro); font-size: var(--fs-meta); font-weight: 700;
           letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-3); margin: 0 0 var(--s2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; }
.foot li { display: flex; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 0.5rem; }
.foot a { color: var(--paper-2); text-decoration: none; font-size: var(--fs-sm); transition: color var(--t-fast); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--red-ink); } }
.foot__base { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s5);
              padding-top: var(--s3); border-top: 1px solid var(--line);
              color: var(--paper-3); font-size: var(--fs-meta); }
.foot__base p { margin: 0; max-width: none; display: flex; align-items: center; min-height: 40px; }
.foot__base a { display: inline-flex; align-items: center; min-height: 40px; }
.foot__base p:last-child { margin-left: auto; }

/* ==========================================================================
   11. MOVIMIENTO
   Presupuesto: prensado, subrayado, anillo de foco, y una sola entrada de
   autor en la portada. Nada de revelados en scroll ni bucles.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .js .cover__in .container > * { animation: sube 760ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
    @keyframes sube {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: none; }
    }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt4 { margin-top: var(--s4); }
[hidden] { display: none !important; }
.ico { width: 1.05em; height: 1.05em; stroke: currentColor; fill: none; stroke-width: 1.75;
       stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }
@media print {
    .mast, .mnav, .foot, .filters, .skip, .cover__veil { display: none !important; }
    body { background: #fff; color: #000; }
    .row { break-inside: avoid; }
}