/* =====================================================================
   Observatorio MDF - Estilos
   ---------------------------------------------------------------------
   Identidad Visual MDF (Manual de Identidad Visual CMYK 2026)

   Paleta OFICIAL (no modificar los colores de marca):
     - Azul principal ......... #0071B9   (CMYK 100 / 40 / 0 / 0)
     - Celeste complementario . #64BDE9   (CMYK  65 /  5 / 5 / 0)
     - Blanco ................. #FFFFFF
     - Negro .................. #000000

   Uso por canal: este manual es para PIEZAS IMPRESAS (CMYK). Las piezas
   digitales (RGB) se rigen por el manual RGB/digital, que es un documento
   APARTE y todavía no está incluido en el proyecto.
   Los hex de arriba son la equivalencia RGB de referencia para la web.

   Los tonos NEUTROS que aparecen en el archivo se usan solo para texto
   secundario, bordes y superficies; NO son colores de marca. Siguiendo la
   skill de diseño "impeccable", esos neutros están TINTADOS levemente
   hacia el azul de marca (nunca gris/negro puros) para que la página se
   sienta construida y no armada con valores de sistema.

   ---------------------------------------------------------------------
   Revisión de diseño (skill "impeccable", 2026-10-13)
   ---------------------------------------------------------------------
   Se aplicaron los principios del "craft floor" de impeccable:
     · Escala de espaciado y de radios centralizada (tokens), sin valores
       sueltos: ritmo consistente y predecible.
     · Se eliminaron los "side-stripe borders" (border-left > 1px en
       .observatory y .news-item), que la skill marca como anti-patrón.
     · Medida de lectura acotada a ~74ch (columna de texto cómoda).
     · Jerarquía tipográfica con clamp() fluido y roles claros.
     · Contraste AA: enlaces del footer en blanco (no celeste-sobre-azul,
       que no llegaba a 4.5:1) y hover de enlaces sin perder contraste.
     · Superficies del navegador tematizadas: ::selection, focus visible,
       scroll suave (con guarda de movimiento reducido), subrayados.
     · Movimiento: un único easing exponencial de salida y transiciones
       sutiles de hover/focus (sin rebotes ni efectos dispersos).
     · Objetivos táctiles >= 44px y estados :focus-visible.
     · Profundidad con sombras suaves con offset (nunca halos a 0 offset).
   ===================================================================== */

:root {
    /* --- Colores de marca (NO modificar) --- */
    --mdf-azul: #0071B9;
    --mdf-celeste: #64BDE9;
    --mdf-blanco: #FFFFFF;
    --mdf-negro: #000000;
    /* Tinte del celeste oficial (mismo color con transparencia) para fondos */
    --mdf-celeste-tinte: rgba(100, 189, 233, 0.15);

    /* --- Neutros TINTADOS hacia el azul de marca (no son gris puro) --- */
    --ink-900: #0e1720;      /* casi negro, con tinte azul */
    --ink-800: #1b2733;
    --ink-700: #33424f;      /* texto de cuerpo */
    --ink-600: #4a5a67;      /* texto secundario */
    --ink-500: #66757f;      /* metadatos (>= 4.5:1 sobre blanco) */
    --line-300: #d4dde3;     /* bordes de controles */
    --line-200: #e5ecf0;     /* separadores suaves */
    --surface: #ffffff;      /* superficie base (= blanco de marca) */
    --surface-muted: #f3f7f9;/* fondo de página, tintado */
    --surface-sunken: #eaf1f5;

    /* --- Escala de espaciado (base 4px) --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* --- Radios --- */
    --radius-sm: 8px;        /* controles */
    --radius-md: 12px;       /* tarjetas y paneles */
    --radius-pill: 999px;    /* pastillas pequeñas */

    /* --- Profundidad (offset + blur suave, sin halos) --- */
    --shadow-sm: 0 1px 2px rgba(14, 23, 32, 0.06), 0 1px 3px rgba(14, 23, 32, 0.05);
    --shadow-md: 0 6px 18px rgba(14, 23, 32, 0.10);
    --shadow-lg: 0 18px 44px rgba(14, 23, 32, 0.18);

    /* --- Movimiento (una sola curva: ease-out exponencial) --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 160ms;
    --dur: 240ms;

    /* --- Tipografía --- */
    --measure: 74ch;         /* medida de lectura cómoda */
    --fs-h1: clamp(1.9rem, 1.35rem + 2.6vw, 3.1rem);
    --fs-h2: clamp(1.55rem, 1.25rem + 1.5vw, 2.15rem);
    --fs-h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
    --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);

    color-scheme: light;
}

/* ---------------------------------------------------------------------
   Tipografías oficiales (Manual MDF)
     - Principal ....... Roboto Condensed Bold  -> DISPONIBLE (en uso)
     - Secundarias ..... Roboto Bold / Roboto Regular -> PENDIENTES
     - Énfasis ......... Bigger (BiggerDisplay) -> disponible, uso PUNTUAL.
       Limitación conocida: no trae glifos con acentos, por eso NO se usa
       en títulos/párrafos en español.
   --------------------------------------------------------------------- */

/* Principal: Roboto Condensed Bold (única fuente cargada y en uso). */
@font-face {
    font-family: 'RobotoCondensed-Bold';
    src: url('fonts/Roboto_Condensed-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Énfasis: BiggerDisplay. Reservada para usos puntuales (números, claims
   cortos SIN acentos). No usar para textos largos ni encabezados. */
@font-face {
    font-family: 'BiggerDisplay';
    src: url('fonts/BiggerDisplay.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* PENDIENTE: las tipografías secundarias Roboto Bold/Regular todavía no
   están en `fonts/`. Cuando se agreguen los archivos, descomentar este
   bloque (y sumar 'Roboto' a los font-family correspondientes).

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
*/

/* =====================================================================
   Base
   ===================================================================== */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'RobotoCondensed-Bold', 'Roboto', Arial, sans-serif;
    font-weight: bold;
    line-height: 1.65;
    color: var(--ink-700);          /* neutro tintado - texto de cuerpo */
    background-color: var(--surface-muted); /* neutro tintado - fondo */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: 'RobotoCondensed-Bold', 'Roboto', Arial, sans-serif;
    line-height: 1.15;
    color: var(--ink-900);
}

img, svg {
    max-width: 100%;
}

img {
    height: auto;
}

/* Anclas internas: deja aire arriba para que el título no quede pegado */
:target,
#quienes-somos,
#cud-section,
#cmo-section {
    scroll-margin-top: var(--space-5);
}

/* =====================================================================
   Superficies del navegador + accesibilidad
   ===================================================================== */

::selection {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
}

/* Foco visible: obligatorio para teclado */
:focus {
    outline: 2px solid var(--mdf-azul);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--mdf-azul);
    outline-offset: 2px;
}

/* Sobre fondos azules, el foco azul no contrasta: usar blanco. */
.site-header :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--mdf-blanco);
}

/* Enlace para saltar al contenido (lectores de pantalla / teclado) */
.skip-link {
    position: fixed;
    top: -100%;
    left: var(--space-4);
    z-index: 1100;
    background: var(--mdf-negro);
    color: var(--mdf-blanco);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top var(--dur) var(--ease-out);
}

.skip-link:focus {
    top: var(--space-4);
}

.container {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* =====================================================================
   Header
   ===================================================================== */

.site-header {
    position: relative;
    background: var(--mdf-azul);
    color: var(--mdf-blanco);
    padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(1rem, 2vw, 1.4rem);
    text-align: center;
    border-bottom: 4px solid var(--mdf-celeste);
}

.site-header .logo {
    display: block;
    margin: 0 auto var(--space-2);
    max-height: 54px;
    width: auto;
}

.site-header h1 {
    color: var(--mdf-blanco);
    font-size: var(--fs-h1);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin-bottom: var(--space-3);
}

.site-header p {
    font-size: var(--fs-lead);
    line-height: 1.5;
    max-width: 54ch;
    margin-inline: auto;
    /* Tinte del blanco (mismo tono, no gris) para el texto secundario. */
    color: rgba(255, 255, 255, 0.95);
}

/* Navegación del header */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-1);
    color: var(--mdf-blanco);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: border-color var(--dur) var(--ease-out);
}

/* Se conserva el texto blanco (contraste) y se marca el hover con el
   subrayado celeste de marca, en vez de teñir el texto y perder AA. */
.site-nav a:hover {
    border-bottom-color: var(--mdf-celeste);
}

.site-nav .nav-instagram {
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-pill);
    transition: background var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.site-nav .nav-instagram:hover {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
    border-color: var(--mdf-celeste);
}

/* Acciones del header (varios botones, p. ej. "Volver" + "Instagram") */
.header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

/* ---------------------------------------------------------------------
   Acceso para editar / cerrar sesión (portal de noticias)
   --------------------------------------------------------------------- */

/* Botón de la esquina del header: abre login o cierra sesión. */
.admin-toggle {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    background: var(--mdf-blanco);
    color: var(--mdf-azul);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: bold;
    line-height: 1;
    border: 1px solid var(--mdf-blanco);
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.admin-toggle:hover {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
    border-color: var(--mdf-celeste);
}

.admin-toggle:active {
    transform: translateY(1px);
}

/* Estado logueado: el botón de salir se marca en celeste de marca. */
.admin-toggle.is-admin {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
    border-color: var(--mdf-celeste);
}

.admin-toggle.is-admin:hover {
    background: var(--mdf-blanco);
    color: var(--mdf-negro);
    border-color: var(--mdf-blanco);
}

/* Barra de administración dentro del portal (Agregar / Salir). */
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.admin-actions .btn {
    min-height: 42px;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    background: var(--mdf-celeste-tinte);
    color: var(--mdf-azul);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.75rem;
    font-size: 0.78rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* "Logueado como X" en la barra de administración. */
.admin-session {
    color: var(--ink-700);
    font-size: 0.9rem;
    white-space: nowrap;
}

.admin-session strong {
    color: var(--mdf-azul);
}

/* =====================================================================
   Secciones + títulos
   ===================================================================== */

.about-section,
.info-section {
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    background: var(--surface);
}

.info-section:nth-child(even) {
    background: var(--surface-muted); /* neutro tintado */
}

.about-section h2,
.info-section h2,
.observatory h2 {
    font-size: var(--fs-h2);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--mdf-azul);
    text-align: center;
    text-wrap: balance;
    max-width: var(--measure);
    margin-inline: auto;
}

.about-section h2,
.info-section h2 {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--line-200);
}

/* =====================================================================
   Sección "Quiénes somos" (MDF Salud Tigre)
   ===================================================================== */

.about-section a,
.info-text a,
.portal-intro a {
    color: var(--mdf-azul);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: text-decoration-thickness var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
}

/* Hover: se refuerza el subrayado y un tinte celeste, sin cambiar a un
   color de texto con contraste insuficiente sobre blanco. */
.about-section a:hover,
.info-text a:hover,
.portal-intro a:hover {
    text-decoration-thickness: 2px;
    background-color: var(--mdf-celeste-tinte);
}

/* =====================================================================
   Botones
   ===================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 46px;
    padding: 0.7rem 1.4rem;
    background: var(--mdf-azul);
    color: var(--mdf-blanco);
    font-family: inherit;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}

.btn:hover {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
}

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

/* Botón dentro del header azul: el azul sobre azul no contrasta, se usa
   celeste de marca con texto negro (p. ej. "Volver al Observatorio"). */
.site-header .btn {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
}

.site-header .btn:hover {
    background: var(--mdf-blanco);
    color: var(--mdf-negro);
}

.btn.cancel {
    background: var(--mdf-negro);
    color: var(--mdf-blanco);
}

.btn.cancel:hover {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
}

/* =====================================================================
   Sección "Observatorio" (tarjetas de acceso)
   ===================================================================== */

.observatory {
    background: var(--mdf-celeste-tinte);
    /* Sin border-left (side-stripe). La sección se delimita con reglas
       finas arriba y abajo, no con una franja lateral. */
    border-top: 1px solid var(--line-200);
    border-bottom: 1px solid var(--line-200);
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    margin: var(--space-4) 0;
}

.observatory h2 {
    margin-bottom: var(--space-4);
}

.observatory-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--line-300);
}

.card h3 {
    color: var(--mdf-azul);
    font-size: var(--fs-h3);
    line-height: 1.2;
    margin-bottom: var(--space-3);
    text-wrap: balance;
}

.card p {
    color: var(--ink-600); /* neutro tintado */
    margin-bottom: var(--space-3);
    font-size: 0.96rem;
    line-height: 1.55;
}

.card .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Tarjeta destacada ("Últimas Novedades"): da jerarquía real a la
   acción prioritaria en vez de tres tarjetas idénticas. */
.card.featured {
    background: var(--mdf-azul);
    border-color: var(--mdf-azul);
    color: var(--mdf-blanco);
}

.card.featured h3 {
    color: var(--mdf-blanco);
    font-size: var(--fs-h2);
}

.card.featured p {
    color: rgba(255, 255, 255, 0.92); /* tinte del blanco, no gris */
}

.card.featured .btn {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
}

.card.featured .btn:hover {
    background: var(--mdf-blanco);
    color: var(--mdf-negro);
}

.card.featured .btn:focus-visible {
    outline-color: var(--mdf-negro);
}

/* Lista "Últimas Novedades" dinámica dentro de la tarjeta destacada.
   La completa script.js con las últimas 3 noticias de localStorage. */
.home-latest-news {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    text-align: left;
}

.card.featured .home-latest-news {
    flex: 1 1 100%;
}

.home-latest-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--mdf-blanco);
    text-decoration: none;
    line-height: 1.35;
}

.home-latest-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.home-latest-item:hover .home-latest-title,
.home-latest-item:focus-visible .home-latest-title {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.home-latest-title {
    font-weight: bold;
}

.home-latest-fecha {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.home-latest-empty {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-weight: normal;
}

/* =====================================================================
   Contenido informativo (CUD / CMO)
   ===================================================================== */

.info-content {
    max-width: var(--measure);
    margin-inline: auto;
}

.info-text h3 {
    color: var(--mdf-azul);
    font-size: var(--fs-h3);
    line-height: 1.25;
    margin-top: var(--space-4);      /* más aire arriba que abajo */
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-200);
}

.info-text h3:first-child {
    margin-top: 0;
}

.info-text p {
    margin-bottom: var(--space-3);
    line-height: 1.6;
    text-wrap: pretty;
}

.info-text ul,
.info-text ol {
    margin-bottom: var(--space-3);
    padding-left: 1.4rem;
}

.info-text li {
    margin-bottom: var(--space-2);
}

.info-text li::marker {
    color: var(--mdf-azul);
}

.info-text strong {
    color: var(--mdf-azul);
}

/* =====================================================================
   Acordeones (details/summary) para secciones largas (CUD, CMO, Quiénes somos)
   ===================================================================== */

/* El contenido se muestra/oculta de forma nativa con <details>.
   No usamos max-height fijo porque podría recortar el contenido largo
   (CUD). Así el contenido siempre se ve completo al abrir. */
.details-content {
    overflow: visible;
}

.summary-acordion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: 'RobotoCondensed-Bold', 'Roboto', Arial, sans-serif;
    font-size: var(--fs-h3);
    font-weight: bold;
    color: var(--mdf-azul);
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    border: none;
    background: none;
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
}

.summary-acordion .summary-text {
    flex: 1;
}

.summary-acordion .summary-icon {
    width: 1.2em;
    text-align: right;
    font-size: 0.8em;
    color: var(--mdf-azul);
    transition: transform 0.3s var(--ease-out);
}

/* La flecha rota cuando el <details> está abierto ([open] vive en <details>,
   no en .details-content). */
details[open] > .summary-acordion .summary-icon {
    transform: rotate(180deg);
}

/* Override default browser outline on summary: use our custom focus-visible style instead */
.summary-acordion:focus-visible {
    outline: 2px solid var(--mdf-azul);
    outline-offset: 2px;
}

/* Aire interior del contenido cuando el acordeón está abierto. */
details[open] > .details-content .info-text {
    margin: var(--space-3) 0 0;
}

/* =====================================================================
   Footer
   ===================================================================== */

.site-footer {
    background: var(--mdf-azul);
    color: var(--mdf-blanco);
    text-align: center;
    padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
    font-size: 0.92rem;
    border-top: 4px solid var(--mdf-celeste);
}

.site-footer p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9); /* tinte del blanco */
}

.site-footer .footer-title {
    color: var(--mdf-blanco);
    font-size: 1rem;
    margin-bottom: var(--space-1);
}

.site-footer .footer-links {
    margin: var(--space-2) 0;
    line-height: 1.8;
}

/* Enlaces del footer en blanco: el celeste sobre azul no llega a AA.
   El celeste de marca se usa en el subrayado al pasar el mouse. */
.site-footer a {
    color: var(--mdf-blanco);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, 0.55);
    transition: text-decoration-color var(--dur) var(--ease-out),
                text-decoration-thickness var(--dur) var(--ease-out);
}

.site-footer a:hover {
    text-decoration-color: var(--mdf-celeste);
    text-decoration-thickness: 2px;
}

/* Claim de marca: Roboto Condensed Bold en mayúsculas (BiggerDisplay no trae minúsculas y se volvía ilegible como "H ."). */
.site-footer .footer-claim {
    font-family: 'RobotoCondensed-Bold', 'Roboto', Arial, sans-serif;
    color: var(--mdf-blanco);
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: var(--space-4) 0 var(--space-2);
}

/* =====================================================================
   Portal de noticias - portada de diario profesional
   ===================================================================== */

.news-section {
    padding: clamp(1.5rem, 3vw, 2rem) 0;
    background: var(--surface-muted);
    min-height: auto;
}

.news-section .container {
    max-width: 1200px;
}

/* Layout principal: columna de noticias + lateral "Últimas".
   Antes se apilaba todo centrado; ahora la principal y el lateral van
   uno al costado del otro en escritorio. */
.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-6) var(--space-7);
    align-items: start;
}

.news-main {
    min-width: 0;
}

.news-seccion-titulo {
    font-size: var(--fs-h3);
    color: var(--mdf-azul);
    text-align: left;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--line-200);
}

/* Portada/hero: titular principal con foto */
.news-hero {
    background: var(--mdf-azul);
    color: var(--mdf-blanco);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-5);
    margin-bottom: var(--space-5);
    position: relative;
}

.news-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 113, 185, 0.3), rgba(100, 189, 233, 0.1));
    border-radius: var(--radius-md);
    z-index: 0;
}

.news-hero > * {
    position: relative;
    z-index: 1;
}

/* Foto de portada dentro del hero de news.html */
.news-hero-img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-top: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* `display:block` no debe pisar el atributo [hidden] (sin portada). */
.news-hero-img[hidden] {
    display: none;
}

.news-hero-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.news-fecha {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fecha-dia {
    font-size: 2rem;
    font-weight: bold;
    color: var(--mdf-blanco);
}

.fecha-mes {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fecha-year {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--space-1);
}

.news-titular {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: var(--space-3);
    text-wrap: balance;
}

.news-bajada {
    font-size: 1.05rem;
    opacity: 0.9;
    line-height: 1.5;
    max-width: 60ch;
}

/* Cintillo de categoría */
.news-cintillo {
    display: inline-block;
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-5);
    align-self: start;
}

/* Grilla de secundarias: 1 columna móvil, 2 en tablet, 3 en escritorio */
.news-grid {
    display: grid;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

@media (min-width: 560px) {
    .news-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 860px) {
    .news-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* En pantallas medianas/chicas el lateral pasa debajo de la principal. */
@media (max-width: 960px) {
    .news-layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

.news-item {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
    height: 100%;
}

.news-item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--line-300);
    transform: translateY(-2px);
}

.news-item h3 {
    color: var(--mdf-azul);
    font-size: 1.05rem;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: var(--space-2);
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-item .news-date {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mdf-azul);
    background: var(--mdf-celeste-tinte);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.5rem;
    margin-bottom: var(--space-2);
}

.news-item .news-content {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-600);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
    flex-grow: 1;
}

/* Bajada/excerpt en las tarjetas: siempre visible (excerpt o recorte
   del contenido). Es el elemento que empuja las acciones hacia abajo. */
.news-item .news-excerpt {
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--ink-600);
    margin-bottom: var(--space-3);
    flex-grow: 1;
}

.news-item .news-excerpt-empty {
    color: var(--ink-500);
    font-style: italic;
}

/* Etiqueta de categoría en la tarjeta (antes de la categoría del meta) */
.news-item > .news-categoria {
    align-self: flex-start;
    display: inline-block;
    background: var(--mdf-celeste-tinte);
    color: var(--mdf-azul);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.55rem;
    margin-bottom: var(--space-2);
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Enlace "Leer más": abre la vista detalle (con buen contraste AA) */
.news-item .read-more {
    align-self: flex-start;
    display: inline-block;
    margin-top: var(--space-2);
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--mdf-azul);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--dur) var(--ease-out),
                text-decoration-thickness var(--dur) var(--ease-out);
}

.news-item .read-more:hover {
    color: var(--mdf-negro);
    text-decoration-thickness: 2px;
}

/* La fecha dentro del meta (pastilla azul) */
.news-item .news-meta .news-date {
    display: inline-flex;
    align-self: center;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mdf-azul);
    background: var(--mdf-celeste-tinte);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.5rem;
    margin-bottom: 0;
}

.news-img-preview {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    border: 1px solid var(--line-200);
}

/* Placeholder cuando no hay imagen */
.placeholder-img {
    width: 100%;
    height: 120px;
    background: var(--surface-muted);
    border: 1px dashed var(--line-200);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mdf-azul);
    font-size: 0.8rem;
    margin-bottom: var(--space-3);
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
    font-size: 0.82rem;
    color: var(--mdf-azul);
}

.news-meta .news-autor {
    color: var(--ink-600);
    font-style: italic;
}

.news-meta .news-categoria {
    background: var(--mdf-celeste-tinte);
    color: var(--mdf-azul);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sidebar "Últimas" */
.news-sidebar {
    background: var(--surface);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    height: fit-content;
}

.sidebar-titulo {
    font-size: var(--fs-h3);
    color: var(--mdf-azul);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-200);
}

.sidebar-lista {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sidebar-lista .sidebar-lista-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-200);
    font-size: 0.9rem;
    color: var(--ink-700);
}

.sidebar-lista .sidebar-lista-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.sidebar-lista .sidebar-lista-item strong {
    display: block;
    color: var(--ink-800);
    line-height: 1.35;
    margin-bottom: var(--space-1);
}

.sidebar-lista .sidebar-lista-item .sidebar-img {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-200);
}

.sidebar-lista .sidebar-lista-item .sidebar-fecha {
    font-size: 0.72rem;
    color: var(--mdf-azul);
    white-space: nowrap;
    margin-right: var(--space-2);
}

.sidebar-lista .sidebar-lista-item .sidebar-categoria {
    display: inline-block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mdf-azul);
    background: var(--mdf-celeste-tinte);
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.5rem;
}

/* El item del sidebar es un enlace clicable que abre la vista detalle. */
a.sidebar-lista-item {
    text-decoration: none;
    color: inherit;
    transition: background-color var(--dur) var(--ease-out);
    border-radius: var(--radius-sm);
}

a.sidebar-lista-item:hover {
    background: var(--mdf-celeste-tinte);
}

a.sidebar-lista-item:hover strong {
    color: var(--mdf-azul);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.sidebar-lista .sidebar-lista-item .sidebar-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Botón "Leer la nota completa" del hero en news.html */
.news-hero-readmore {
    margin-top: var(--space-4);
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
    border-color: var(--mdf-celeste);
}

.news-hero-readmore:hover {
    background: var(--mdf-blanco);
    color: var(--mdf-negro);
    border-color: var(--mdf-blanco);
}

/* Al abrir la vista detalle, bloqueamos el scroll del fondo. */
body.modal-open {
    overflow: hidden;
}

/* =====================================================================
   Vista detalle de la noticia (modal de lectura completa)
   ===================================================================== */

.news-detail-overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: clamp(1rem, 4vw, 2.5rem) var(--space-4);
}

.modal.news-detail {
    max-width: 760px;
    width: 100%;
    margin: auto;
    position: relative;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-lg);
}

.news-detail-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-muted);
    color: var(--mdf-azul);
    border: 1px solid var(--line-300);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.news-detail-close:hover {
    background: var(--mdf-azul);
    color: var(--mdf-blanco);
    border-color: var(--mdf-azul);
}

.news-detail-img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-200);
    margin-bottom: var(--space-5);
}

/* Segunda foto intercalada dentro del cuerpo de la nota. */
.news-detail-body-img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-200);
    margin: var(--space-4) 0 var(--space-5);
}

.news-detail .news-detail-categoria {
    margin-bottom: var(--space-3);
}

.news-detail-title {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    line-height: 1.2;
    color: var(--mdf-azul);
    margin-bottom: var(--space-3);
    text-wrap: balance;
}

.news-detail-bajada {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-600);
    margin-bottom: var(--space-3);
}

.news-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--line-200);
    font-size: 0.85rem;
    color: var(--mdf-azul);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.news-detail-meta .news-detail-author {
    color: var(--ink-600);
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}

.news-detail-content {
    max-width: var(--measure);
    color: var(--ink-700);
    font-size: 1.02rem;
}

.news-detail-content p {
    margin-bottom: var(--space-4);
    line-height: 1.7;
    text-wrap: pretty;
}

.news-detail-content .news-detail-empty {
    color: var(--ink-500);
    font-style: italic;
}

/* =====================================================================
   Formularios
   ===================================================================== */

.form-group {
    margin-bottom: var(--space-5);
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: bold;
    color: var(--mdf-azul);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line-300);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ink-800);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease-out);
}

.form-group textarea {
    min-height: 8rem;
    resize: vertical;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
    border-color: var(--mdf-azul);
}

.form-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.error-message {
    /* Color funcional de error (no es color de marca): se mantiene por
       convención de UX para errores, ajustado a >= 4.5:1 sobre blanco. */
    color: #b3261e;
    margin-top: var(--space-3);
    font-size: 0.95rem;
    display: none;
}

/* =====================================================================
   Modal de acceso para editar
   ===================================================================== */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 23, 32, 0.6); /* tinte oscuro, no negro puro */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: 1000;
}

.modal {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: clamp(1.5rem, 4vw, 2rem);
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
}

.modal h2 {
    color: var(--mdf-azul);
    margin-bottom: var(--space-2);
    text-align: center;
}

.modal-subtitle {
    text-align: center;
    color: var(--ink-600); /* neutro tintado */
    font-size: 0.95rem;
    margin-bottom: var(--space-5);
}

/* =====================================================================
   Editor de noticias + acciones (portal)
   ===================================================================== */

/* Panel del formulario: se muestra por JS al entrar en modo edición. */
#news-form-container {
    display: none;
    width: min(760px, calc(100% - 2rem));
    margin: var(--space-6) auto;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--line-200);
    border-top: 4px solid var(--mdf-celeste);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

#news-form-container h3 {
    color: var(--mdf-azul);
    font-size: var(--fs-h2);
    line-height: 1.15;
    text-align: center;
    margin-bottom: var(--space-5);
}

/* Panel "Mi cuenta / Cambiar contraseña" (modo edición). */
.account-panel {
    width: min(760px, calc(100% - 2rem));
    margin: 0 auto var(--space-6);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    background: var(--surface);
    border: 1px solid var(--line-200);
    border-top: 4px solid var(--mdf-azul);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.account-panel h3 {
    color: var(--mdf-azul);
    font-size: var(--fs-h3);
    text-align: center;
    margin-bottom: var(--space-5);
}

.account-message {
    margin: var(--space-3) 0;
    font-size: 0.95rem;
    min-height: 1.2em;
}

.account-message.is-error {
    color: #b3261e;
}

.account-message.is-ok {
    color: var(--mdf-azul);
    font-weight: bold;
}

/* Etiqueta secundaria dentro de un form-group (p. ej. posición de foto). */
.form-group label.label-secondary {
    margin-top: var(--space-4);
}

.help-text {
    font-size: 0.85rem;
    color: var(--ink-600);
    margin-top: var(--space-2);
}

/* Vista previa de imagen del formulario */
.imagen-preview {
    margin-top: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: var(--surface-muted);
    border: 1px dashed var(--line-300);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.imagen-preview .news-img-preview {
    height: 160px;
    margin-bottom: 0;
}

.preview-placeholder {
    color: var(--ink-500);
    font-size: 0.85rem;
}

/* Botón secundario (p. ej. "Subir imagen") */
.btn.btn-secundario {
    background: var(--surface);
    color: var(--mdf-azul);
    border-color: var(--mdf-azul);
}

.btn.btn-secundario:hover {
    background: var(--mdf-azul);
    color: var(--mdf-blanco);
}

/* Acciones por noticia (Editar / Eliminar) y mover disposición */
.news-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.news-actions .btn {
    min-height: 40px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.move-buttons {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.move-buttons button {
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--space-3);
    background: var(--surface);
    color: var(--mdf-azul);
    border: 1px solid var(--line-300);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.move-buttons button:hover {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
    border-color: var(--mdf-celeste);
}

.no-news {
    color: var(--ink-600);
    font-size: 0.95rem;
    padding: var(--space-5) 0;
    text-align: center;
}

/* =====================================================================
   Layout de tarjetas: de rejilla idéntica a jerarquía
   ===================================================================== */

@media (min-width: 760px) {
    .observatory-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .card.featured {
        grid-column: 1 / -1;
    }
}

/* En escritorio la tarjeta destacada pasa a ser una franja horizontal:
   título a la izquierda, texto al centro y acción a la derecha. */
@media (min-width: 900px) {
    .card.featured {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4) var(--space-6);
        padding: clamp(1.5rem, 3vw, 2.25rem);
    }

    .card.featured h3 {
        flex: 0 1 auto;
        max-width: 16ch;
        margin-bottom: 0;
    }

    .card.featured p {
        flex: 1 1 24ch;
        margin-bottom: 0;
    }

    .card.featured .btn {
        flex: 0 0 auto;
        align-self: center;
        margin-top: 0;
    }
}

/* =====================================================================
   Header hero grande + identidad MDF oficial
   - Topbar oscura (como la utilidad de movimientoderechoalfuturo.com.ar)
   - Marca grande centrada con logo XL
   - Nav en barra azul separada
   ===================================================================== */

.topbar {
    background: var(--mdf-negro);
    color: var(--mdf-blanco);
    font-size: 0.82rem;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    flex-wrap: wrap;
}

.topbar-link {
    color: var(--mdf-blanco);
    text-decoration: none;
    opacity: 0.9;
}

.topbar-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    opacity: 1;
}

.topbar-sep {
    opacity: 0.4;
}

.site-header--hero {
    background: var(--mdf-blanco);
    color: var(--ink-900);
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 0;
    border-bottom: none;
}

.site-header--hero h1 {
    color: var(--mdf-azul);
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.site-header--hero p {
    color: var(--ink-700);
}

.hero-grid {
    max-width: 960px;
}

.hero-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo--xl {
    max-height: 190px;
    width: auto;
    max-width: min(420px, 80vw);
    border-radius: 18px;
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-md);
}

.hero-kicker {
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mdf-azul);
    background: var(--mdf-celeste-tinte);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-pill);
    padding: 0.35rem 1rem;
    margin-bottom: var(--space-3);
}

.hero-lead {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    max-width: 58ch;
    margin-top: var(--space-3);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    margin-bottom: var(--space-6);
}

.btn-hero {
    background: var(--mdf-azul);
    color: var(--mdf-blanco);
    padding: 0.9rem 1.8rem;
    font-size: 1.05rem;
}

.btn-ghost {
    background: var(--surface);
    color: var(--mdf-azul);
    border: 1px solid var(--mdf-azul);
}

.btn-ghost:hover {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
    border-color: var(--mdf-celeste);
}

.site-header--hero .btn-hero:hover {
    background: var(--mdf-celeste);
    color: var(--mdf-negro);
}

.site-nav--bar {
    background: var(--mdf-azul);
    border-top: 4px solid var(--mdf-celeste);
    margin-top: 0;
    padding: var(--space-2) 0;
}

.site-nav--bar .nav-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
}

.site-nav--bar a {
    color: var(--mdf-blanco);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid transparent;
}

.site-nav--bar a:hover {
    border-bottom-color: var(--mdf-celeste);
}

.site-header--compact {
    padding-top: clamp(2rem, 4vw, 3rem);
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 768px) {
    .container {
        padding-inline: clamp(1rem, 5vw, 1.5rem);
    }

    .about-section h2,
    .info-section h2,
    .observatory h2 {
        max-width: 100%;
    }
}

.site-header .logo.logo--xl {
    max-height: 190px;
    margin-bottom: var(--space-4);
}

@media (max-width: 560px) {
    .site-header {
        padding: 1.75rem 0 1.5rem;
    }

    .site-header--hero {
        padding: 2rem 0 0;
    }

    .logo--xl,
    .site-header .logo.logo--xl {
        max-height: 130px;
        max-width: 78vw;
    }

    .admin-toggle {
        position: static;
        display: inline-flex;
        margin: 0 auto var(--space-3);
        font-size: 0.8rem;
        padding: 0 var(--space-3);
    }

    .form-actions .btn,
    .header-actions .btn {
        flex: 1 1 auto;
    }
}

/* =====================================================================
   Movimiento reducido (preferencia del usuario)
   ===================================================================== */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .card:hover,
    .news-item:hover {
        transform: none;
    }

    .btn:active {
        transform: none;
    }
}