/* La identidad definitiva de Ventana Celeste, «La luna en el ocular» (29-09-2026).
 *
 * Los colores salen de la página de la identidad: papel, tinta y celeste para leer; el
 * naranja sólo para la acción; y cada color claro con su pareja oscura. Van como tres
 * números para que Tailwind pueda ponerles transparencia (bg-fondo/90).
 *
 * El modo oscuro sigue al equipo de cada persona hasta que se elige otro con el botón de
 * la cabecera (tema.js). No cambia nada de forma ni de lugar: cambian el fondo, las
 * superficies y el texto.
 *
 * Aquí están también las piezas que comparten las páginas (desde el 30-09-2026, cuando se
 * rehízo la maqueta sobre las láminas «El sitio web» y «Modo oscuro» de la identidad): la
 * cabecera y su menú del teléfono, las cabeceras de sección, las tarjetas de las noticias,
 * la lectura de un artículo, la galería, el pie. Cada plantilla guarda en su <style> sólo
 * lo suyo (la portada, el viaje). */

/* Los puntos suspensivos. M PLUS Rounded 1c dibuja «…» a la japonesa, centrado en la
 * altura de la x, y es el que pone el navegador al cortar un extracto (line-clamp): parecía
 * un error de dibujo. «VC Elipsis» tiene sólo ese carácter, dibujado como tres puntos de
 * la misma letra sobre la línea (medidos en Chrome: el punto de 400 y el de 800, con su
 * espacio). Va primero en la familia (tema.js) y no toca ningún otro carácter. */
@font-face {
    font-family: "VC Elipsis";
    font-weight: 100 599;
    unicode-range: U+2026;
    src: url(data:font/woff2;base64,d09GMgABAAAAAAFgAAoAAAAAAtgAAAEYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANAp4gQcBNgIkAwgLBgAEIAVpByYbKwIALgpstzRTqVd8MB/Zm90UpXj4Gmvv757adFQalUQlQitaxUoUC/WGUkQbw3Soh7rtN2opT/2hGYxeEZHBg3isGaDm+QsUlytFnZY7/j3Jg/4eAg8xzJq3BfjkJRkEeNa8eYSJpjvcIiKRSlf+1snpOC4UWeQArTfGZtQVjIZUQUTAYzohY7AbGCgYQ0FBMDbz/4/zX28CQAIFZCxgBVAA5Ja8uh3dlOMrcnCZj67XxPVV/etBSN/guj+c+n4bCATjT5sja/NXyfkHdqYfwvcPMpweHSJLIDhKyRMbNOYg1RS/tIxkQe4kRAVrAoQaPU7KarIoVIWBLlDSMr2lkuMG4hHVH1CjxAYHV4BQbcfnpidh2sk3AA==) format("woff2");
}
@font-face {
    font-family: "VC Elipsis";
    font-weight: 600 900;
    unicode-range: U+2026;
    src: url(data:font/woff2;base64,d09GMgABAAAAAAFcAAoAAAAAAugAAAESAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANAqBBIETATYCJAMICwYABCAFbwcmGz0CQB4JNs5xXVir5MRB8UCtvb69vSBbIMusATUg2kTo+JZVbJ3sdHxr+wsBuL+2v8WtO/5+k+Pp4CEei/MAg5MmHkhAiSRhRC3B9IbtkMNhJbjcGydGsVYWBp7BSKG22aq043+qCqMA1soEEZUpOE/VIvWB2uZMButTAJCAFBGt6ASkgFjKd5bDy9eCgrfPPH/Kz3/9sjbpLvZM12RqsmmmOjwQcGCl4foTJYP/xPgH7pvew+9/PlkS4odfiBIQeI8utGQ5fggkh7/7KwGJVhEkuCvVLYAgHwEk8uSLQponqFTRzRLlWpYmaqf2d47Pds60aKah+wdLJtSasm/HsTM7zky5du7UinFH9q1LwC7iVwAA) format("woff2");
}

:root {
    --fondo: 255 249 240;        /* #FFF9F0 papel */
    --superficie: 255 255 255;   /* tarjetas y campos */
    --superficie2: 242 234 220;  /* #F2EADC paneles */
    --linea: 237 228 214;        /* #EDE4D6 */
    --campo: 122 134 155;        /* #7A869B borde de campo: 3,7:1 sobre el campo blanco y 3,1:1
                                    sobre el panel, lo que pide un control (WCAG 1.4.11) */
    --texto: 21 34 56;           /* #152238 tinta */
    --texto2: 74 85 104;         /* #4A5568 fechas, bajadas, rótulos */
    --enlace: 21 34 56;          /* sobre papel el celeste no se lee: tinta, subrayado celeste */
    --rotulo: 74 85 104;
    --fuerte: 21 34 56;          /* «botón fuerte»: tinta en claro, se invierte a papel */
    --sobre-fuerte: 255 255 255;
    --etiqueta: 228 244 252;     /* #E4F4FC «etiqueta suave» */
    --etiqueta-texto: 21 34 56;
    color-scheme: light;
}

.dark {
    --fondo: 14 24 48;           /* #0E1830, la noche del ocular: nunca negro puro */
    --superficie: 21 34 56;      /* #152238 */
    --superficie2: 27 43 71;     /* #1B2B47 */
    --linea: 42 61 96;           /* #2A3D60 */
    --campo: 93 123 168;         /* #5D7BA8 */
    --texto: 244 239 227;        /* #F4EFE3: de noche encandila menos que el blanco */
    --texto2: 169 184 207;       /* #A9B8CF */
    --enlace: 108 196 238;       /* #6CC4EE */
    --rotulo: 108 196 238;
    --fuerte: 244 239 227;       /* #F4EFE3 */
    --sobre-fuerte: 21 34 56;
    --etiqueta: 29 58 87;        /* #1D3A57, con texto #CDEBFA: 9,4:1 */
    --etiqueta-texto: 205 235 250;
    color-scheme: dark;
}

body {
    background-color: rgb(var(--fondo));
    color: rgb(var(--texto));
}

/* Lo que se enlaza con #ancla no queda debajo de la cabecera fija */
[id] { scroll-margin-top: 6rem; }

/* El foco del teclado, igual en todo el sitio: el anillo celeste */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #6CC4EE;
    outline-offset: 3px;
}

/* Rótulos: ExtraBold, mayúsculas espaciadas */
.rotulo {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--rotulo));
}
.noche .rotulo { color: #6CC4EE; }

/* Titulares: ExtraBold, interletra -2 % */
h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* La acción principal: naranja con texto en tinta, 7,8:1 en los dos modos */
.btn-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    border: 2px solid #FF9F43;
    border-radius: 999px;
    background: #FF9F43;
    color: #152238;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: background-color .2s, border-color .2s;
}
.btn-accion:hover { background: #FF8C2E; border-color: #FF8C2E; }
.btn-accion:focus-visible { outline: 3px solid #6CC4EE; outline-offset: 3px; }

/* La secundaria: contorno celeste, sin relleno. El naranja va una sola vez por pantalla,
   así que donde la página ya tiene su acción naranja, el botón de la cabecera es este. */
.btn-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    border: 2px solid #6CC4EE;
    border-radius: 999px;
    background: transparent;
    color: rgb(var(--texto));
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: background-color .2s;
}
.btn-secundario:hover { background: rgba(108,196,238,0.18); }
.btn-secundario:focus-visible { outline: 3px solid #6CC4EE; outline-offset: 3px; }
.noche .btn-secundario { color: #FFFFFF; }

/* El «botón fuerte» de la identidad: tinta en claro, papel en oscuro. Para seguir leyendo
   sin gastar el naranja */
.btn-fuerte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border-radius: 999px;
    background: rgb(var(--fuerte));
    color: rgb(var(--sobre-fuerte));
    font-size: 0.9375rem;
    font-weight: 800;
    white-space: nowrap;
}

/* Enlaces de texto: tinta sobre papel con el subrayado celeste; celeste de noche */
.enlace {
    color: rgb(var(--enlace));
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: #6CC4EE;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.enlace:hover { text-decoration-thickness: 3px; }
.noche .enlace { color: #6CC4EE; }

/* «Ver todas →»: la flecha se adelanta un poco al pasar */
.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    color: rgb(var(--enlace));
    font-weight: 800;
    font-size: 0.9375rem;
    text-decoration: underline;
    text-decoration-color: #6CC4EE;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.enlace-flecha svg { transition: transform .2s; flex-shrink: 0; }
.enlace-flecha:hover svg { transform: translateX(3px); }
.enlace-flecha.atras:hover svg { transform: translateX(-3px); }

/* La noche: bloques que son cielo en los dos modos, como la portada */
.noche {
    background-color: #152238;
    color: #FFFFFF;
}

/* Estrellas blancas y pocas */
.stars::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.8), transparent 50%),
        radial-gradient(1px 1px at 75% 15%, rgba(255,255,255,0.7), transparent 50%),
        radial-gradient(1px 1px at 60% 75%, rgba(255,255,255,0.7), transparent 50%),
        radial-gradient(1.2px 1.2px at 10% 80%, rgba(255,255,255,0.8), transparent 50%),
        radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.6), transparent 50%);
    pointer-events: none;
}

/* El logo. En claro, el positivo a todo color; en oscuro, el negativo celeste a una
   tinta, con la luna y la estrella caladas: nunca el logo de tinta sobre la noche. Por
   eso en un bloque de noche (el pie) va siempre el negativo, con el nombre en papel. */
.vc-logo { display: inline-flex; align-items: center; gap: 0.5rem; color: rgb(var(--texto)); }
.vc-logo svg { flex-shrink: 0; }
.vc-logo .vc-neg { display: none; }
.dark .vc-logo .vc-pos, .noche .vc-logo .vc-pos { display: none; }
.dark .vc-logo .vc-neg, .noche .vc-logo .vc-neg { display: block; }
.noche .vc-logo { color: #FFF9F0; }
.vc-marca {
    display: inline-flex;
    flex-direction: column;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* El botón de la luna y el sol: en claro ofrece la luna; en oscuro, el sol */
.btn-tema, .btn-menu {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgb(var(--linea));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--texto));
    transition: border-color .2s;
    cursor: pointer;
}
.btn-tema:hover, .btn-menu:hover { border-color: #6CC4EE; }
.btn-tema:focus-visible { outline: 3px solid #6CC4EE; outline-offset: 2px; }
.btn-tema .sol { display: none; }
.dark .btn-tema .sol { display: block; }
.dark .btn-tema .luna { display: none; }

/* ------------------------------------------------------------------ */
/*  La cabecera                                                        */
/* ------------------------------------------------------------------ */
.cabecera { background: rgb(var(--fondo)); border-bottom: 2px solid rgb(var(--linea)); }
.nav-enlace {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.875rem;
    color: rgb(var(--texto));
    font-weight: 500;
    border-radius: 8px;
}
.nav-enlace::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: #6CC4EE;
    transform: scaleX(0);
    transition: transform .2s;
}
.nav-enlace:hover::after, .nav-enlace.activo::after { transform: scaleX(1); }
.nav-enlace.activo { font-weight: 800; }

/* El menú del teléfono: un <details>, así funciona también sin JavaScript. tema.js lo
   cierra al elegir un enlace, con Escape o tocando fuera. */
.menu-movil > summary { list-style: none; }
.menu-movil > summary::-webkit-details-marker { display: none; }
.btn-menu .cerrar, .menu-movil[open] .btn-menu .abrir { display: none; }
.menu-movil[open] .btn-menu .cerrar { display: block; }
.menu-movil[open] .btn-menu { border-color: #6CC4EE; }
.menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    background: rgb(var(--fondo));
    border-bottom: 2px solid rgb(var(--linea));
    padding: 0.5rem 1rem 1.5rem;
}
.menu-panel a.menu-enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    border-bottom: 1px solid rgb(var(--linea));
    font-size: 1.25rem;
    font-weight: 800;
    color: rgb(var(--texto));
    letter-spacing: -0.01em;
}
.menu-panel a.menu-enlace svg { color: #6CC4EE; }
.menu-panel a.menu-enlace.activo { text-decoration: underline; text-decoration-color: #6CC4EE; text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* ------------------------------------------------------------------ */
/*  Secciones                                                          */
/* ------------------------------------------------------------------ */
/* El titular de una sección: el rótulo arriba, el título, la bajada, y a la derecha lo
   que lleva a más */
.seccion-titulo { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.5rem); line-height: 1.1; font-weight: 800; margin-top: 0.5rem; }
.seccion-bajada { color: rgb(var(--texto2)); font-size: 1.0625rem; line-height: 1.55; margin-top: 0.75rem; max-width: 36rem; }

/* La cabecera de una página interior: la noche con el cielo simbólico */
.cabecera-pagina h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); line-height: 1.05; font-weight: 800; color: #FFFFFF; margin-top: 0.5rem; }
.cabecera-pagina p { color: #D5DEEA; font-size: 1.125rem; line-height: 1.55; margin-top: 1rem; max-width: 36rem; }

/* ------------------------------------------------------------------ */
/*  Las tarjetas de las noticias                                       */
/* ------------------------------------------------------------------ */
/* Toda la tarjeta es el enlace (el del título se estira por encima), sin sombras: la
   profundidad la dan las superficies y el borde celeste al pasar. */
.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgb(var(--superficie));
    border: 2px solid rgb(var(--linea));
    border-radius: 22px;
    overflow: hidden;
    transition: border-color .2s, transform .25s;
}
.tarjeta:hover { border-color: #6CC4EE; transform: translateY(-3px); }
.tarjeta:has(.estirado:focus-visible) { outline: 3px solid #6CC4EE; outline-offset: 3px; border-color: #6CC4EE; }
.tarjeta .estirado { color: inherit; }
.tarjeta .estirado:focus-visible { outline: none; }
.tarjeta .estirado::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.tarjeta-titulo { font-weight: 800; color: rgb(var(--texto)); text-wrap: balance; }
/* El interlineado va con dos clases: las de tamaño de Tailwind (text-xl, sm:text-3xl…) traen
   el suyo, se cargan después de esta hoja y con una sola clase lo pisarían (el titular grande
   de noticias/ quedó a 0,9 y las líneas se tocaban) */
.tarjeta .tarjeta-titulo { line-height: 1.22; }
.tarjeta .tarjeta-titulo.grande { line-height: 1.12; }
.tarjeta:hover .tarjeta-titulo { text-decoration: underline; text-decoration-color: #6CC4EE; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tarjeta .extracto { color: rgb(var(--texto2)); line-height: 1.55; }
.tarjeta .leer { margin-top: auto; }

/* La fecha y el tiempo de lectura */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.8125rem; font-weight: 700; color: rgb(var(--texto2)); letter-spacing: 0.02em; }
.meta .punto { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* La portada de una tarjeta. Llena el cuadro si su forma se parece; si es muy vertical
   o muy apaisada (build.py mira el tamaño), se ve entera sobre ella misma desenfocada. */
.portada { position: relative; overflow: hidden; background: rgb(var(--superficie2)); isolation: isolate; }
.portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform .6s ease; }
.tarjeta:hover .portada img.frente { transform: scale(1.04); }
.portada.entera img.fondo { filter: blur(28px) saturate(1.15) brightness(0.9); transform: scale(1.25); }
.portada.entera img.frente { object-fit: contain; z-index: 1; }
/* el artículo es un video: la marca sobre la portada, con la «etiqueta suave» de la lámina
   «Modo oscuro» (celeste pálido y tinta en claro; azul de noche y celeste pálido en oscuro) */
.insignia {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    border-radius: 999px;
    background: rgb(var(--etiqueta));
    color: rgb(var(--etiqueta-texto));
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/*  El artículo: una columna de lectura                                */
/* ------------------------------------------------------------------ */
.columna-lectura { max-width: 42rem; margin-left: auto; margin-right: auto; }
.titulo-articulo { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.25rem); line-height: 1.06; font-weight: 800; color: rgb(var(--texto)); text-wrap: balance; }
.bajada { font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.4375rem); line-height: 1.4; font-weight: 700; color: rgb(var(--texto2)); text-wrap: pretty; }

/* El texto: 18 px, unas 70 letras por línea */
.prosa { font-size: 1.0625rem; line-height: 1.75; color: rgb(var(--texto)); }
@media (min-width: 768px) { .prosa { font-size: 1.125rem; } }
.prosa > * + * { margin-top: 1.25em; }
.prosa h1 { font-size: 1.875rem; font-weight: 800; line-height: 1.15; }
.prosa h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin-top: 2.25em; }
.prosa h3 { font-size: 1.25rem; font-weight: 800; line-height: 1.25; margin-top: 2em; }
.prosa h2 + *, .prosa h3 + * { margin-top: 0.75em; }
.prosa .entrada { font-size: 1.1875em; line-height: 1.6; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul > li { position: relative; padding-left: 1.5em; }
.prosa ul > li::before { content: ""; position: absolute; left: 0.35em; top: 0.72em; width: 7px; height: 7px; border-radius: 50%; background: #6CC4EE; }
.prosa ol { list-style: decimal; padding-left: 1.5em; }
.prosa ol > li::marker { color: #6CC4EE; font-weight: 800; }
.prosa li + li { margin-top: 0.5em; }
.prosa strong { font-weight: 800; }
.prosa a { color: rgb(var(--enlace)); font-weight: 700; text-decoration: underline; text-decoration-color: #6CC4EE; text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.prosa a:hover { text-decoration-thickness: 3px; }
.prosa hr { border: 0; height: 2px; background: rgb(var(--linea)); margin: 2.5em 0; }
.prosa img { border-radius: 16px; }
.prosa code { font-size: 0.9em; background: rgb(var(--superficie2)); padding: 0.1em 0.35em; border-radius: 6px; }
/* Las citas: un bloque de noche con la estrella de cuatro puntas, como en la lámina */
.prosa blockquote {
    position: relative;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 1.5rem 1.5rem 1.5rem 3.75rem;
    border-radius: 22px;
    background: #152238;
    color: #FFFFFF;
    font-size: 1.1875rem;
    line-height: 1.5;
    font-weight: 700;
}
.dark .prosa blockquote { background: rgb(var(--superficie2)); }
.prosa blockquote::before {
    content: "";
    position: absolute;
    left: 1.4rem;
    top: 1.65rem;
    width: 22px;
    height: 22px;
    background: #6CC4EE;
    clip-path: path("M11 0Q12.4 9.6 22 11Q12.4 12.4 11 22Q9.6 12.4 0 11Q9.6 9.6 11 0Z");
}
.prosa blockquote strong { color: #FFFFFF; }

/* La galería: la portada grande y las demás en columna al lado, con el ancho que hace
   que las dos columnas midan lo mismo (build.py lo calcula con el tamaño de cada foto).
   En el teléfono, una tira que se desliza con el dedo. */
.galeria { display: flex; gap: 12px; }
.galeria figure { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: rgb(var(--superficie2)); }
.galeria img { display: block; width: 100%; height: 100%; object-fit: cover; }
.galeria .g-principal { flex-basis: 0; min-width: 0; }
.galeria .g-principal img { position: absolute; inset: 0; }
.galeria .g-columna { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.galeria .g-columna figure { aspect-ratio: var(--a); }
.galeria-sola { display: flex; justify-content: center; }
.galeria-sola figure { margin: 0; overflow: hidden; border-radius: 18px; max-width: 100%; }
.galeria-sola img { display: block; max-width: 100%; max-height: 36rem; width: auto; height: auto; }
@media (max-width: 639px) {
    .galeria { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem; scroll-padding: 0 1rem; }
    .galeria::-webkit-scrollbar { display: none; }
    .galeria .g-columna { display: contents; }
    .galeria figure { flex: 0 0 auto; height: 15rem; aspect-ratio: var(--a); max-width: 85%; scroll-snap-align: start; }
    .galeria .g-principal { flex: 0 0 auto !important; }
    .galeria .g-principal img { position: static; }
    .galeria .g-columna figure { aspect-ratio: var(--a); }
}
.video-articulo { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #0E1830; border: 2px solid rgb(var(--linea)); }
.video-articulo iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Anterior y siguiente, al final de un artículo */
.vecino { position: relative; display: flex; align-items: center; gap: 1rem; padding: 0.875rem; border-radius: 22px; border: 2px solid rgb(var(--linea)); background: rgb(var(--superficie)); transition: border-color .2s; min-height: 100%; }
.vecino:hover { border-color: #6CC4EE; }
.vecino .portada { width: 5.5rem; height: 5.5rem; border-radius: 14px; flex-shrink: 0; }
.vecino .titulo { font-weight: 800; line-height: 1.25; color: rgb(var(--texto)); }
.vecino.siguiente { flex-direction: row-reverse; text-align: right; }
.vecino.siguiente .meta { justify-content: flex-end; }

/* ------------------------------------------------------------------ */
/*  El pie: noche, como en la lámina                                   */
/* ------------------------------------------------------------------ */
.pie { color: #C9D6EA; }
.pie a.pie-enlace { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: #C9D6EA; font-weight: 500; }
.pie a.pie-enlace:hover { color: #FFFFFF; text-decoration: underline; text-decoration-color: #6CC4EE; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pie .pie-linea { border-top: 1px solid rgba(255,255,255,0.14); }

/* Campos: superficie, con el borde para ver dónde se escribe */
.campo {
    width: 100%;
    min-height: 48px;
    background: rgb(var(--superficie));
    border: 2px solid rgb(var(--campo));
    border-radius: 0.75rem;
    color: rgb(var(--texto));
}
.campo:focus { outline: none; border-color: #6CC4EE; box-shadow: 0 0 0 3px rgba(108,196,238,0.35); }
.campo::placeholder { color: rgb(var(--texto2)); opacity: 0.8; }
.etiqueta-campo { display: block; font-size: 0.875rem; font-weight: 700; color: rgb(var(--texto)); margin-bottom: 0.375rem; }

::selection { background: #6CC4EE; color: #152238; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}