/* ==========================================================================
   Juventud Republicana - Boletín
   Regla del sistema: elevación cero. En toda la hoja no hay un solo
   box-shadow, ni un degradado, ni backdrop-filter. La separación se consigue
   con filete de 1px y con espacio.
   ========================================================================== */

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

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

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

/* --- Superficies del navegador ----------------------------------------- */
::selection { background: var(--ink); color: var(--paper); }
:root { caret-color: var(--red); accent-color: var(--red); color-scheme: light; }

* { scrollbar-width: thin; scrollbar-color: var(--rule-firm) var(--paper); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--rule-firm); border: 4px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

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

/* ==========================================================================
   3. TIPOGRAFÍA
   Cuatro voces, no seis tamaños. La jerarquía cambia de registro (familia,
   peso, caja, color de tinta), no solo de cuerpo.
   ========================================================================== */
h1, h2, h3 {
    font-family: var(--voz);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.005em;
    margin: 0 0 var(--s2);
    text-wrap: balance;
    /* Caja alta y baja. El titular en versales a gran cuerpo es grito,
       no jerarquía, y queda prohibido en este sistema. */
    text-transform: none;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0; }

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

/* Entradilla: Manrope a cuerpo mayor y tinta rebajada. Cambia el registro
   respecto del titular condensado, y por eso se lee como otro nivel. */
.intro {
    font-size: var(--fs-intro);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 52ch;
}

/* Registro de metadato: el único uso de versalitas del sistema, reservado a
   etiquetas de dato (columnas, términos de definición). Nunca sobre un titular. */
.meta {
    font-family: var(--registro);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
}

strong, b { font-weight: 700; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

a { color: inherit; }

/* Enlace de texto: el subrayado nace tenue y se afirma al pasar. Es uno de
   los tres gestos de movimiento que se permite el sitio. */
.prose a, a.link {
    color: var(--red);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(189, 18, 24, 0.35);
    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); color: var(--red-deep); }
}

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s5); }
.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.35rem; margin-bottom: 0.5rem; }
.prose .people li { padding-left: 0; margin-bottom: 0; }
.prose .people li::before { content: none; }
.prose li::before {
    content: ""; position: absolute; left: 0; top: 0.72em;
    width: 8px; height: 1px; background: var(--ink-3);
}

/* ==========================================================================
   4. RETÍCULA Y SECCIONES
   Doce columnas reales. La medida cambia según la página; nada se alinea
   por defecto al mismo borde.
   ========================================================================== */
.container {
    width: 100%; max-width: var(--container);
    margin-inline: auto; padding-inline: var(--gutter);
}

/* La respiración es desigual a propósito: aire grande antes de un giro de
   tema, aire corto dentro de una continuación. */
.s-turn  { padding-block: clamp(3rem, 6.5vw, 6.5rem); }
.s-cont  { padding-block: clamp(2rem, 4.5vw, var(--s5)); }
.s-close { padding-block: clamp(3rem, 6vw, var(--s6)); }
.tint    { background: var(--paper-2); }
/* Dos bloques que continúan el mismo hilo no suman sus dos aires. */
.hero + .s-cont, .s-cont + .s-cont { padding-top: 0; }

.skip {
    position: absolute; left: var(--s2); top: -100px; z-index: 200;
    background: var(--ink); color: var(--paper);
    padding: 0.7rem 1.1rem; font-weight: 700; text-decoration: none;
    transition: top var(--t-fast);
}
.skip:focus { top: var(--s2); }

/* El filete estructural. Separa bloques mayores sin dibujar una caja. */
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ==========================================================================
   1. CABECERA
   Un mástil de boletín: la marca es tipografía, no un logotipo inventado
   dentro de un cuadro. Sin cristal, sin desenfoque, sin sombra.
   ========================================================================== */
.mast {
    position: sticky; top: 0; z-index: 100;
    height: var(--masthead);
    display: flex; align-items: center;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}
.mast__in { display: flex; align-items: center; gap: var(--s4); width: 100%; }

/* Marca puramente tipográfica. Al llegar el isotipo oficial se antepone aquí. */
.flag { text-decoration: none; flex: none; display: inline-block; line-height: 1; }
.flag span {
    display: block;
    font-family: var(--voz); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    font-size: 1.02rem; color: var(--ink);
}
.flag span + span { font-weight: 500; letter-spacing: 0.135em; color: var(--ink-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(--ink-2); text-decoration: none;
    padding-bottom: 2px; border-bottom: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--ink); border-bottom-color: var(--ink); } }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* El filete rojo de 2px del ancho de la retícula. Aparece UNA vez por
   página, justo bajo el mástil. Es la única marca decorativa del sistema. */
.banderin { height: 2px; background: var(--red); border: 0; margin: 0; }

.burger {
    display: none; margin-left: auto;
    width: 42px; height: 42px; padding: 0;
    background: transparent; border: 1px solid var(--rule-firm);
    border-radius: var(--r); color: var(--ink); cursor: pointer;
    transition: border-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(--ink); } }
.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(--masthead) 0 0; z-index: 99;
    background: var(--paper);
    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); font-size: 2rem; font-weight: 700;
    color: var(--ink); text-decoration: none;
    padding: 0.65rem 0; border-bottom: 1px solid var(--rule);
}
.mnav a[aria-current="page"] { color: var(--red); }
.mnav .act { margin-top: var(--s4); }

/* ==========================================================================
   5. ACCIONES
   Dos formas y una sola sólida. El rojo tiene presupuesto: como máximo una
   acción sólida por pantalla.
   ========================================================================== */
.act {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.78rem 1.6rem; min-height: 48px;
    background: 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;
    letter-spacing: 0.01em; 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-deep); border-color: var(--red-deep); }
}

.act--block { display: flex; width: 100%; }
.act[aria-disabled="true"], .act:disabled {
    background: transparent; color: var(--ink-3); border-color: var(--rule);
    cursor: not-allowed; pointer-events: none;
}

/* Enlace con filete: la forma por defecto de una acción secundaria. */
.tlink {
    display: inline-block;
    font-family: var(--voz); text-transform: uppercase;
    font-size: 1rem; font-weight: 600; letter-spacing: 0.09em;
    color: var(--ink); text-decoration: none;
    padding-bottom: 2px; border-bottom: 1px solid var(--ink);
    transition: color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
    .tlink:hover { color: var(--red); border-bottom-color: var(--red); }
}
.tlink--quiet { color: var(--ink-2); border-bottom-color: var(--rule-firm); }

/* ==========================================================================
   2. PORTADA
   Una declaración, no un panel. El primer viewport lo ocupa la frase y nada
   más; el índice de actividades viene debajo, no al lado.
   ========================================================================== */
.lede {
    font-family: var(--voz); font-weight: 700;
    font-size: var(--fs-lede);
    line-height: 0.94;
    letter-spacing: -0.015em;
    margin: 0;
    max-width: 14ch;          /* medida corta: la frase cae en tres líneas */
}
/* La continuación cambia de peso y de tinta, y se ensancha. La jerarquía la
   marca el cambio de registro, no un tamaño distinto. */
.lede-2 {
    font-family: var(--voz); font-weight: 400;
    font-size: clamp(1.6rem, 0.95rem + 2.3vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--ink-2);
    margin: var(--s3) 0 0;
    max-width: 22ch;
}
.hero { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.hero__foot {
    margin-top: clamp(2.5rem, 5vw, var(--s5));
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s4);
    align-items: end;
}
.hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
@media (max-width: 860px) {
    .hero__foot { grid-template-columns: 1fr; align-items: start; }
}

/* Encabezado de bloque: titular y, a la derecha, el enlace al índice
   completo. Sin etiqueta superior y sin filete decorativo. */
.blockhead {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s3); flex-wrap: wrap;
    margin-bottom: var(--s3);
}
.blockhead h2 { margin: 0; }

/* ==========================================================================
   6. ÍNDICE DE ACTIVIDADES
   Lo que antes era una parrilla de tarjetas es ahora un índice: filas sobre
   filete, sin fondo, sin radio, sin sombra. La fecha ocupa una columna real
   de la retícula y el estado se dice con palabras.
   ========================================================================== */
.index { border-top: 1px solid var(--rule); }

.row {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: var(--s3) var(--s4);
    align-items: start;
    padding: var(--s3) 0.85rem;
    margin-inline: -0.85rem;
    border-bottom: 1px solid var(--rule);
    transition: background-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
    .row:hover { background: var(--paper-2); }
    .row:hover .row__t { text-decoration-color: var(--ink); }
}
.row:has(.row__a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.row:has(.row__a:active) { background: var(--paper-2); }

/* Columna de fecha. Numeral, mes y hora: la columna responde a "cuándo"
   por completo, y por eso las filas de metadatos no llevan iconos. */
.when { font-family: var(--voz); line-height: 1; color: var(--ink); }
.when__d { display: block; font-weight: 700; font-size: 2.15rem; font-variant-numeric: tabular-nums; }
.when__m {
    display: block; margin-top: 0.22rem;
    font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-2);
}
.when__h {
    display: block; margin-top: 0.3rem;
    font-family: var(--registro); font-size: var(--fs-meta); font-weight: 500;
    color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

.row__b { min-width: 0; }
.row__t {
    font-family: var(--voz); font-weight: 700;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
    line-height: 1.14; margin: 0 0 0.3rem;
}
.row__a {
    color: inherit; text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 0.18em;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--t-fast);
}
.row__a::after { content: ""; position: absolute; inset: 0; }
.row__m { color: var(--ink-3); font-size: var(--fs-sm); margin: 0; max-width: 48ch; }

/* El estado se dice, no se etiqueta. Sin pastilla, sin punto, sin latido. */
.row__s {
    font-family: var(--registro); font-size: var(--fs-meta); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-3); white-space: nowrap; padding-top: 0.5rem;
}
.row__s--abierto { color: var(--red); }
/* Una fila cerrada baja la tinta. No necesita una segunda señal. */
.row--off .when__d, .row--off .row__t { color: var(--ink-3); }
.row--off .when__m { color: var(--ink-3); }

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

/* La primera actividad se distingue por posición y tamaño, no por recuadro. */
.row--lead { padding-block: var(--s4); }
.row--lead .when__d { font-size: 3.4rem; }
.row--lead .row__t { font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.15rem); }
.row--lead .row__m { font-size: var(--fs-base); color: var(--ink-2); }
@media (max-width: 720px) { .row--lead .when__d { font-size: 2.5rem; } }

/* Vacío: dice qué pasó y cómo salir. Sin borde punteado. */
.empty { padding: var(--s6) 0; border-bottom: 1px solid var(--rule); }
.empty p { color: var(--ink-2); margin-bottom: var(--s3); }

/* ==========================================================================
   Filtros de la agenda
   Enlaces sobre filete, no pastillas. El activo se marca con tinta llena.
   ========================================================================== */
.filters {
    display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4);
    padding-bottom: var(--s3); margin-bottom: var(--s4);
    border-bottom: 1px solid var(--rule);
}
.fgroup { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); }
.fgroup + .fgroup { margin-left: auto; }
.fgroup__k { flex: none; }
@media (max-width: 820px) { .fgroup + .fgroup { margin-left: 0; } .filters { flex-direction: column; } }

.filt {
    appearance: none; background: none; border: 0; padding: 0 0 3px;
    font-family: var(--registro); font-size: var(--fs-sm); font-weight: 600;
    color: var(--ink-3); cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: color var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) { .filt:hover { color: var(--ink); } }
.filt[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.filt__n { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: 0.25rem; }
.count-out { color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--s3); }

/* ==========================================================================
   Detalle de actividad
   Un artículo con raíl al margen. La ficha de datos es una lista de
   definición sobre filetes, sin fondo ni borde de caja.
   ========================================================================== */
.crumbs { font-size: var(--fs-sm); color: var(--ink-3); padding-top: var(--s3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--red); } }
.crumbs span { margin-inline: 0.4rem; color: var(--rule-firm); }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(2rem, 5vw, var(--s6)); align-items: start; }
@media (max-width: 940px) { .article { grid-template-columns: 1fr; } }

.article__head { margin-bottom: var(--s4); }
.article__head h1 { margin: 0.2rem 0 var(--s2); max-width: 20ch; }
.article__when {
    font-family: var(--voz); font-weight: 600;
    font-size: 1.15rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-2);
}

.rail { position: sticky; top: calc(var(--masthead) + var(--s3)); }
@media (max-width: 940px) { .rail { position: static; } }
.rail dl { margin: 0; border-top: 1px solid var(--ink); }
.rail dl > div { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.rail dt { margin-bottom: 0.2rem; }
.rail dd { margin: 0; color: var(--ink); 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(--ink-3); }

/* Expositores: lista sobre filetes, no fichas. */
.people { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); max-width: var(--measure); }
.people li { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.people b { display: block; font-weight: 600; }
.people span { color: var(--ink-3); font-size: var(--fs-sm); }

/* ==========================================================================
   Índice de regiones
   ========================================================================== */
.places { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); columns: 2; column-gap: var(--s6); }
@media (max-width: 700px) { .places { columns: 1; } }
.places li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.places a {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
    padding: 0.85rem 0.5rem; margin-inline: -0.5rem;
    text-decoration: none;
    transition: background-color var(--t-fast);
}
.places a:active { background: var(--paper-2); }
@media (hover: hover) and (pointer: fine) {
    .places a:hover { background: var(--paper-2); }
    .places a:hover .places__n { color: var(--red); }
}
.places__n { font-family: var(--voz); font-weight: 600; font-size: 1.25rem; color: var(--ink); transition: color var(--t-fast); }
.places__h { color: var(--ink-3); font-size: var(--fs-sm); }

/* ==========================================================================
   7. PIE
   Colofón: filete de tinta arriba, tipografía pequeña, sin cajas ni iconos
   dentro de recuadros.
   ========================================================================== */
/* El filete del colofón se alinea a la retícula, igual que el banderín: en el
   sistema los filetes siguen la columna, nunca sangran a pantalla completa.
   El aire lo pone la sección anterior, así que aquí no hay margen superior. */
.foot { padding-block: 0 var(--s4); }
.foot > .container { border-top: 2px solid var(--ink); padding-top: var(--s5); }
.foot__grid {
    display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, 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(--ink-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: 600;
           letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot a { color: var(--ink-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); } }
.foot__base {
    display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
    margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule);
    color: var(--ink-3); font-size: var(--fs-meta);
}
.foot__base p { margin: 0; max-width: none; }

/* ==========================================================================
   Bloque a dos columnas asimétricas
   El titular vive en la columna estrecha; el contenido sustantivo, en la
   ancha. No es un titular con explicación flotante al margen: la columna
   derecha carga el peso de la sección.
   ========================================================================== */
.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); } }
.split > h2 { margin: 0; }
/* El titular de sección viaja con su contenido en lugar de dejar un vacío
   de varios cientos de píxeles en la columna estrecha. */
@media (min-width: 861px) {
    .split > h1, .split > h2 { position: sticky; top: calc(var(--masthead) + var(--s3)); }
}

/* Definiciones sobre filete: sustituye a la retícula de tres tarjetas. */
.defs { margin: 0; border-top: 1px solid var(--ink); }
.defs > div { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.defs dt {
    font-family: var(--voz); font-weight: 700; font-size: 1.35rem;
    line-height: 1.15; margin-bottom: 0.35rem;
}
.defs dd { margin: 0; color: var(--ink-2); max-width: 54ch; }
.defs dd .tlink { margin-top: var(--s2); }

/* Cierre: un filete de tinta y una sola acción. Sin banda de color. */
.close { border-top: 2px solid var(--ink); padding-top: var(--s3); }
.close h2 { max-width: 16ch; }
.close .intro { margin-bottom: var(--s3); }

/* ==========================================================================
   Formularios
   Etiqueta arriba, ayuda opcional, error debajo. Nunca marcador como
   etiqueta. Campos sobre filete inferior, como una ficha que se rellena.
   ========================================================================== */
.form { display: grid; gap: var(--s4); max-width: 46rem; }
.field { display: grid; gap: 0.4rem; }
.field > label { color: var(--ink-2); }
.req { color: var(--red); margin-left: 0.15rem; }

.input, .select, .textarea {
    width: 100%;
    font-family: var(--registro); font-size: var(--fs-base); color: var(--ink);
    background: transparent;
    border: 0; border-bottom: 1px solid var(--rule-firm);
    border-radius: 0;
    padding: 0.6rem 0.1rem;
    min-height: 46px;
    transition: border-color var(--t-fast);
}
.textarea { min-height: 112px; 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='%23626D87' 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;
}
/* 4.6:1 sobre papel: el marcador también pasa AA. */
.input::placeholder, .textarea::placeholder { color: #6A7590; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .input:hover, .select:hover, .textarea:hover { border-bottom-color: var(--ink-3); }
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-bottom-color: var(--ink); box-shadow: none;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
[aria-invalid="true"] { border-bottom-color: var(--red) !important; border-bottom-width: 2px !important; }

.help { font-size: var(--fs-meta); color: var(--ink-3); }
.err { font-size: var(--fs-meta); color: var(--red-deep); font-weight: 600; }

.checkline { display: flex; gap: 0.7rem; align-items: flex-start; }
.checkline input[type="checkbox"] {
    appearance: none; flex: none;
    width: 20px; height: 20px; margin: 0.15rem 0 0;
    background: transparent; border: 1px solid var(--rule-firm); border-radius: var(--r);
    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: 11px; height: 11px;
    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; }
@media (hover: hover) and (pointer: fine) {
    .checkline input[type="checkbox"]:hover { border-color: var(--ink-3); }
}
.checkline input[type="checkbox"]:active { transform: scale(0.92); }
.checkline label { font-size: var(--fs-sm); color: var(--ink-2); }

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

/* Avisos: filete de tinta arriba, sin recuadro de color ni borde lateral. */
.note { border-top: 2px solid var(--ink); padding-top: var(--s2); max-width: var(--measure); }
.note--err { border-top-color: var(--red); }
.note b { display: block; margin-bottom: 0.15rem; }
.note p { font-size: var(--fs-sm); color: var(--ink-2); }

/* Estado de envío */
.act[data-busy="true"] { pointer-events: none; opacity: 0.7; }

/* ==========================================================================
   Movimiento
   Presupuesto total del sitio: el prensado de un control, el subrayado de un
   enlace y el anillo de foco. No hay revelados en scroll ni bucles.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.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, .banderin { display: none !important; }
    body { background: #fff; }
    .row { break-inside: avoid; }
}