/* ═══════════════════════════════════════════════════════════════════════════
   mascotas.css — hoja única del sitio «Guía Mascotas» · rediseño 2026
   ---------------------------------------------------------------------------
   CSS nativo, sin frameworks, sin dependencias y sin compilación.
   · Los colores de marca salen de la PALETA DEL PANEL (--plt-1 … --plt-12, que
     inyecta componente/templates/base.html desde webs.plt): cambiar la paleta
     en el panel repinta el sitio entero.
   · Todo lo demás lo gobierna el SISTEMA DE DISEÑO de §2: colores semánticos,
     espaciado, radios, sombras, tipografía y transiciones. Ninguna regla de
     más abajo inventa un valor: todos salen de esos tokens.
   · Dos temas completos: claro (por defecto) y oscuro. El oscuro se activa con
     la preferencia del sistema o a mano con el selector de §8. El tema lo
     decide SIEMPRE el atributo data-tema del <html>, que fija public/js/tema.js
     (y, antes del primer pintado, un script en línea en base.html: así no hay
     destello de tema equivocado al cargar).

   ÍNDICE
     §1  Puente con el panel          §11 Listados, migas y paginación
     §2  Fuentes y tokens (diseño)    §12 Artículo
     §3  Reset y base                 §13 Ficha de datos y FAQ
     §4  Layout y espaciado           §14 Anuncios y consentimiento
     §5  Tipografía                   §15 Formularios
     §6  Botones y chips              §16 Avisos, buscador y 404
     §7  Superficies                  §17 Temas (claro / oscuro)
     §8  Cabecera y navegación        §18 Movimiento y accesibilidad
     §9  Portadas y hero              §19 Galería ampliada
     §10 Tarjetas y rejillas          §20 Pie de página e impresión
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §1 Puente con el panel ────────────────────────────────────────────────
   El panel escribe la paleta como «R,G,B» (--plt-N) y pinta con las clases
   bgc-N / cl-N / brc-N. Esas clases se conservan aquí para que la paleta, el
   <body> y lo que emite el panel sigan funcionando igual.
   El panel NO expone variables con nombre propio: reparte los doce colores con
   esas clases. Por eso el puente es solo las clases; los nombres con sentido
   los pone el sistema de diseño de §2 (--c-*), que es el que se usa en todo el
   archivo. Así no hay dos juegos de tokens en paralelo. */

.bgc-1 { background-color: rgb(var(--plt-1)); }   .cl-1 { color: rgb(var(--plt-1)); }
.bgc-2 { background-color: rgb(var(--plt-2)); }   .cl-2 { color: rgb(var(--plt-2)); }
.bgc-3 { background-color: rgb(var(--plt-3)); }   .cl-3 { color: rgb(var(--plt-3)); }
.bgc-4 { background-color: rgb(var(--plt-4)); }   .cl-4 { color: rgb(var(--plt-4)); }
.bgc-5 { background-color: rgb(var(--plt-5)); }   .cl-5 { color: rgb(var(--plt-5)); }
.bgc-6 { background-color: rgb(var(--plt-6)); }   .cl-6 { color: rgb(var(--plt-6)); }
.bgc-7 { background-color: rgb(var(--plt-7)); }   .cl-7 { color: rgb(var(--plt-7)); }
.bgc-8 { background-color: rgb(var(--plt-8)); }   .cl-8 { color: rgb(var(--plt-8)); }
.bgc-9 { background-color: rgb(var(--plt-9)); }   .cl-9 { color: rgb(var(--plt-9)); }
.bgc-10 { background-color: rgb(var(--plt-10)); } .cl-10 { color: rgb(var(--plt-10)); }
.bgc-11 { background-color: rgb(var(--plt-11)); } .cl-11 { color: rgb(var(--plt-11)); }
.bgc-12 { background-color: rgb(var(--plt-12)); } .cl-12 { color: rgb(var(--plt-12)); }

.cl-white { color: rgb(var(--plt-9)); }
.cl-black { color: rgb(var(--plt-10)); }

.brc-1 { border-color: rgb(var(--plt-1)); }   .brc-11 { border-color: rgb(var(--plt-11)); }
.brc-2 { border-color: rgb(var(--plt-2)); }   .brc-12 { border-color: rgb(var(--plt-12)); }

.bga-0i1 { background-color: rgba(var(--plt-2), .10); }
.bga-0i4 { background-color: rgba(var(--plt-2), .40); }
.bga-0i8 { background-color: rgba(var(--plt-2), .80); }

.ff-1 { font-family: var(--fuente); }
.ff-2 { font-family: Georgia, "Times New Roman", serif; }
.ff-3 { font-family: var(--fuente-mono); }

/* ── §2 Sistema de diseño ───────────────────────────────────────────────── */
/* §2.0 La fuente del sitio, servida desde AQUÍ (public/font/) y no desde un
   CDN: mismo dominio, ninguna petición a un tercero, ninguna cookie ajena y
   nada que pueda caerse fuera de casa. Va antes de los tokens porque ES el
   token: --fuente apunta a esta.

   · Inter — TODO el sitio: interfaz (cuerpo, botones, formularios, etiquetas,
     metadatos) y titulación (títulos, entradillas, navegación, marca y cuerpo
     del artículo). Grotesca neutra y muy legible a cualquier tamaño. Antes la
     titulación iba en Source Serif 4 (serif editorial); se retiró para dejar el
     sitio en una sola familia: la jerarquía la marcan el tamaño, el color y el
     aire, no el contraste de la letra. (Rasmus Andersson · SIL OFL 1.1)

   El archivo es WOFF2 VARIABLE (cubre todos los pesos de la escala, del 400 al
   700 y los intermedios como el 550 de los enlaces) y trae solo el subconjunto
   latino, que es todo lo que necesita el español: ñ, á-ü, «», —, …, •, € viven
   ahí. Un carácter que no esté en el archivo (una flecha →, un emoji) cae solo
   en la familia siguiente de la pila, que sigue declarada en los tokens: no hay
   que hacer nada para eso.

   El archivo no trae cursiva: el sitio no la usa (ni <em> ni <blockquote> en
   los contenidos). Si algún día se añade una cita, se baja el woff2 «italic» de
   Inter y se declara su @font-face; sin él el navegador inclinaría la letra a
   mano.

   El nombre del archivo lleva la versión de origen (v20) a propósito: el
   .htaccess de la raíz cachea los woff2 un año con «immutable», así que al
   actualizar la fuente hay que CAMBIAR EL NOMBRE además de la URL del
   @font-face; si no, quien ya entró seguirá viendo la vieja durante un año. */
@font-face {
    font-family: "Inter";
    src: url("../font/inter-v20-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* — Escala de espaciado (base 4px) — */
    --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;  --e-5: 24px;
    --e-6: 32px;  --e-7: 48px;  --e-8: 64px;  --e-9: 96px;

    /* — Radios — */
    --radio-xs: 7px;  --radio-s: 10px;  --radio: 14px;  --radio-l: 20px;
    --radio-xl: 28px; --radio-pastilla: 999px;

    /* — Anchos — */
    --ancho:         1180px;
    --ancho-texto:   62ch;   /* medida cómoda de lectura para el artículo */
    --ancho-angosto: 760px;
    --header-alto:   68px;

    /* — Tipografía —
       Una sola familia, autoalojada (§2.0): Inter, para TODO.

       · --fuente (SANS → Inter): el cuerpo, la interfaz y el texto corrido
         —botones, formularios, etiquetas y metadatos—.
       · --fuente-titulo: la de títulos, entradillas, navegación y marca. Hoy
         apunta a la misma Inter; se mantiene como token propio porque es el
         punto por el que se cambiaría SOLO la titulación sin tocar el cuerpo.

       Detrás de cada una va la pila del sistema, que NO es adorno: hasta que
       llega el woff2 —o si el navegador es viejo y no lo entiende— el texto se
       compone con ella (Segoe UI en Windows, SF/Helvetica en Mac, Roboto y Noto
       en Android). Con el preload de base.html y el woff2 ya en caché, el primer
       pintado sale con la buena casi siempre; si no, se nota un cambio de
       familia, no un salto de maqueta: las pilas son de métrica parecida y el
       intercambio ocurre con la línea ya formada. */
    --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
              "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulo: var(--fuente);
    --fuente-ui: var(--fuente);
    --fuente-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Escala tipográfica fluida */
    --t-hero:   clamp(2.2rem, 1.28rem + 3.7vw, 3.8rem);
    --t-h2:     clamp(1.6rem, 1.15rem + 1.7vw, 2.4rem);
    --t-h3:     1.18rem;
    --t-cuerpo: clamp(1.02rem, .98rem + .3vw, 1.22rem);
    --t-menudo: .845rem;

    /* — Pesos —
       La escala va FINA a propósito: es un sitio editorial y la jerarquía la
       tienen que marcar el tamaño, el color y el aire, no la masa de la letra.
       Inter es una fuente variable: cualquier valor intermedio es real (no hay
       saltos ni negrita sintética).

         --peso-ligero   texto corrido y descripciones
         --peso-base     interfaz: botones, enlaces, campos
         --peso-medio    etiquetas pequeñas, énfasis suave, datos
         --peso-fuerte   SOLO microtexto en versalitas (< 12 px), que a 400 se
                         deshilacha; nunca en titulares. */
    --peso-ligero: 380;
    --peso-base:   450;
    --peso-medio:  520;
    --peso-fuerte: 600;

    /* Los títulos van ligeros a propósito (430 / 400): a tamaño grande el peso
       no es lo que sostiene la jerarquía —la sostienen el tamaño, el color y el
       aire—, y una versal fina se lee más limpia que una engordada a mano. Si
       algún día piden más presencia, se sube AQUÍ: Inter es variable, así que
       500 o 550 son pesos reales, sin negrita sintética. */
    --peso-titulo: 430;
    --peso-hero:   400;
    /* Un titular fino pide menos apretado o las letras se tocan. */
    --tracking-titulo: -.008em;
    --tracking-hero:   -.016em;

    /* — Movimiento — */
    --transicion: .26s cubic-bezier(.22, .61, .36, 1);
    --transicion-lenta: .5s cubic-bezier(.22, .61, .36, 1);

    /* — Acento por sección (cada familia lo sobreescribe, §9) — */
    --seccion: var(--c-acento);
    --seccion-rgb: var(--c-acento-rgb);
    --seccion-suave: rgba(var(--seccion-rgb), .11);
}

/* ── §3 Reset y base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* La barra de desplazamiento y los controles nativos siguen al tema. */
    color-scheme: light;
	font-family:Arial;
}
html[data-tema="oscuro"] { color-scheme: dark; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }

ul, ol { list-style: none; }

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

img { height: auto; border-style: none; }

a { color: inherit; text-decoration: none; }

/* Los controles no heredan de .mc-body, así que aquí se declara en qué fuente
   van. Hoy --fuente-ui y --fuente son la misma familia, de modo que la regla no
   se nota; se queda porque es el punto por el que se cambiaría el día que la
   interfaz y el texto corrido quieran familias distintas. */
button, input, select, textarea { font: inherit; font-family: var(--fuente-ui); color: inherit; }

button { background: none; border: 0; cursor: pointer; }

svg { fill: currentColor; }

/* El estilo del sitio lo lleva .mc-body (lo pone el panel: webs.body). Las
   reglas viven aquí y no en body para no chocar con otras plantillas del kit. */
.mc-body {
    margin: 0;
    min-height: 100vh;
    background: var(--c-fondo);
    color: var(--c-texto);
    font-family: var(--fuente);
    font-size: 17px;
    line-height: 1.66;
    letter-spacing: -.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── §4 Layout y espaciado ──────────────────────────────────────────────── */
.mc-wrap {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 clamp(16px, 3.2vw, 28px);
}

.mc-seccion { padding: clamp(48px, 7vw, 88px) 0; }
.mc-seccion--ajustada { padding: clamp(28px, 4vw, 44px) 0 var(--e-3); }

/* Banda de superficie: separa secciones contiguas sin llenar la página de
   tarjetas. Si la sección anterior ya es una banda, la línea no se duplica. */
.mc-seccion--velo {
    background: var(--c-superficie-2);
    border-top: 1px solid var(--c-borde);
    border-bottom: 1px solid var(--c-borde);
}
.mc-seccion--velo + .mc-seccion--velo { border-top: 0; }

.mc-rejilla-2 {
    display: grid;
    gap: clamp(20px, 2.6vw, 30px);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.mc-pila-2 > * + * { margin-top: var(--e-3); }
.mc-pila-3 > * + * { margin-top: var(--e-4); }
.mc-max-texto { max-width: var(--ancho-texto); }
.mc-centrado { text-align: center; }

.mc-oculto-visual {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mc-flex { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.mc-flex--entre { justify-content: space-between; }

/* Separador suave reutilizable */
.section-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(to right, transparent, var(--c-borde), transparent);
}

/* ── §5 Tipografía ──────────────────────────────────────────────────────── */
/* La etiqueta en versalitas es interfaz, no titulación: sans, para que a 12 px
   siga siendo nítida. */
.mc-etiqueta {
    display: inline-block;
    font-family: var(--fuente-ui);
    font-size: .745rem;
    font-weight: var(--peso-fuerte);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--seccion);
}

.mc-titulo-xl {
    font-family: var(--fuente-titulo);
    font-size: var(--t-hero);
    line-height: 1.1;
    font-weight: var(--peso-hero);
    letter-spacing: var(--tracking-hero);
    color: var(--c-texto);
    text-wrap: balance;
}

.mc-titulo {
    font-family: var(--fuente-titulo);
    font-size: var(--t-h2);
    line-height: 1.18;
    font-weight: var(--peso-titulo);
    letter-spacing: var(--tracking-titulo);
    color: var(--c-texto);
    text-wrap: balance;
}

.mc-titulo-s {
    font-family: var(--fuente-titulo);
    font-size: var(--t-h3);
    font-weight: var(--peso-base);
    letter-spacing: -.004em;
    line-height: 1.34;
    color: var(--c-texto);
}

/* Entradilla: el párrafo que sigue a un título. Comparte familia con el cuerpo
   del artículo, pero va algo mayor y en peso ligero, como el arranque de una
   crónica; se limita la medida para que la lectura no se estire en pantallas
   anchas. */
.mc-entradilla {
    font-family: var(--fuente-titulo);
    font-weight: var(--peso-ligero);
    font-size: var(--t-cuerpo);
    line-height: 1.64;
    color: var(--c-texto-2);
    max-width: 64ch;
}

.mc-texto-2 { color: var(--c-texto-2); }
.mc-texto-3 { color: var(--c-texto-3); font-size: .92rem; }

.mc-enlace, .mc-articulo-body a:not(.mc-btn) {
    color: var(--c-acento);
    font-weight: var(--peso-base);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transicion);
}
.mc-enlace:hover, .mc-articulo-body a:not(.mc-btn):hover { text-decoration-thickness: 2px; }

/* ── §6 Botones y chips ─────────────────────────────────────────────────── */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 13px 24px;
    border-radius: var(--radio-pastilla);
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-size: .95rem;
    font-weight: var(--peso-medio);
    letter-spacing: -.01em;
    line-height: 1.2;
    border: 1px solid transparent;
    box-shadow: 0 10px 24px -14px rgba(var(--c-acento-rgb), .95);
    transition: transform var(--transicion), box-shadow var(--transicion),
                background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.mc-btn:hover {
    transform: translateY(-2px);
    background: var(--c-acento-fuerte);
    box-shadow: 0 18px 32px -16px rgba(var(--c-acento-rgb), 1);
}
.mc-btn:active { transform: translateY(0); }

.mc-btn--fantasma {
    background: transparent;
    color: var(--c-texto);
    border-color: var(--c-borde-fuerte);
    box-shadow: none;
}
.mc-btn--fantasma:hover {
    background: var(--c-superficie);
    border-color: var(--c-acento);
    color: var(--c-acento);
    box-shadow: none;
}

/* Botón de sección: toma el acento de la familia (--seccion) */
.mc-btn--seccion { background: var(--seccion); box-shadow: 0 10px 24px -14px rgba(var(--seccion-rgb), .95); }
.mc-btn--seccion:hover { background: var(--seccion); box-shadow: 0 18px 32px -16px rgba(var(--seccion-rgb), 1); }

/* Botón de cristal: para fondos con foto (el hero), donde un relleno plano
   taparía lo que hay detrás. Va con un velo blanco muy suave y el borde claro,
   y aclara al pasar. */
.mc-btn--vidrio {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: rgba(255, 255, 255, .46);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.mc-btn--vidrio:hover {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .62);
    color: #fff;
    box-shadow: none;
}

.mc-btn__flecha { transition: transform var(--transicion); }
.mc-btn:hover .mc-btn__flecha { transform: translateX(3px); }

.mc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radio-pastilla);
    background: var(--seccion-suave);
    color: var(--seccion);
    font-size: .795rem;
    font-weight: var(--peso-fuerte);
    letter-spacing: .012em;
    line-height: 1.4;
}
.mc-chip--neutro { background: rgba(var(--c-neutro-rgb), .16); color: var(--c-texto-2); }
.mc-chip--borde {
    background: transparent;
    border: 1px solid var(--c-borde-fuerte);
    color: var(--c-texto-2);
    transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.mc-chip--borde:hover { border-color: var(--c-acento); color: var(--c-acento); background: var(--c-superficie); }

/* La etiqueta en versalitas también puede ir dentro de un chip */
.mc-etiqueta.mc-chip { letter-spacing: .12em; }

/* ── §7 Superficies ─────────────────────────────────────────────────────── */
/* Un panel es una superficie con borde. NO se usa para todo: solo para agrupar
   contenido que de verdad forma un bloque (ficha, buscador, aviso). */
.mc-panel {
    background: var(--c-superficie);
    border: 1px solid var(--c-borde);
    border-radius: var(--radio-l);
    padding: clamp(20px, 2.4vw, 26px);
    box-shadow: var(--sombra-1);
}
/* Panel con acento: el color de la sección entra por el fondo, no por un
   filete en el borde. Se usa en los bloques de «Cómo trabajamos» de la
   portada y en los temas de cada portada de sección. */
.mc-panel--acento {
    background: linear-gradient(150deg, var(--seccion-suave), transparent 62%), var(--c-superficie);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.mc-panel--acento:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-2);
    border-color: rgba(var(--seccion-rgb), .38);
}

/* Cierre de sección (CTA final, «¿te ha servido?) */
.mc-cierre {
    margin-top: var(--e-6);
    padding: clamp(22px, 3vw, 32px);
    border-radius: var(--radio-l);
    border: 1px solid var(--c-borde);
    background: linear-gradient(140deg, rgba(var(--c-acento-rgb), .10), transparent 62%), var(--c-superficie);
}
.mc-cierre h2 { margin-bottom: var(--e-2); }

/* ── §8 Cabecera y navegación ───────────────────────────────────────────── */
.mc-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--c-cabecera-velo);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--c-borde);
}
/* Sin difuminado, un velo translúcido deja el texto ilegible: superficie opaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mc-header { background: var(--c-superficie); }
}

.mc-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: var(--header-alto);
}

/* Marca: huella dibujada en SVG (sin fuentes de iconos) + nombre */
.mc-marca { display: inline-flex; align-items: center; gap: 11px; }
.mc-marca__icono {
    width: 34px;
    height: 34px;
    color: var(--c-acento);
    flex: 0 0 auto;
    transition: transform var(--transicion);
}
.mc-marca:hover .mc-marca__icono { transform: rotate(-6deg) scale(1.05); }
.mc-marca__texto { display: flex; flex-direction: column; line-height: 1.14; }
.mc-marca__nombre {
    font-family: var(--fuente-titulo);
    font-size: 1.22rem;
    font-weight: var(--peso-titulo);
    letter-spacing: -.012em;
    color: var(--c-texto);
}
/* El lema en versalitas es interfaz: sans, pequeño y muy espaciado */
.mc-marca__lema {
    font-family: var(--fuente-ui);
    font-size: .665rem;
    font-weight: var(--peso-medio);
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--c-texto-3);
}

/* Navegación.
   El menú llegaba del panel en MAYÚSCULAS, que es lo que rompía la página:
   una fila de versales en negrita pesa más que el propio titular. Aquí se
   corrige por CSS, sin tocar los datos ni el panel:
     · el texto se pasa a caja baja (y solo la inicial en mayúscula),
     · baja a peso 450 y sube de tamaño: elegancia en vez de fuerza,
     · el subrayado de acento aparece solo al pasar o en la página actual. */
.mc-nav { display: flex; align-items: center; gap: 4px; }
.mc-nav a {
    position: relative;
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radio-s);
    font-family: var(--fuente-titulo);
    font-size: 1.05rem;
    font-weight: var(--peso-base);
    letter-spacing: .001em;
    text-transform: lowercase;
    color: var(--c-texto-2);
    text-transform: capitalize;
    color: var(--c-texto-2);
    transition: color var(--transicion), background var(--transicion);
}
.mc-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--c-acento);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicion);
}
.mc-nav a:hover { color: var(--c-texto); background: var(--c-superficie-2); }
.mc-nav a:hover::after { transform: scaleX(1); }
.mc-nav a[aria-current="page"] { color: var(--c-acento); font-weight: var(--peso-medio); }
.mc-nav a[aria-current="page"]::after { transform: scaleX(1); }
.mc-nav .mc-nav__destacado { color: var(--c-acento); font-weight: var(--peso-medio); }

.mc-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radio-s);
    border: 1px solid var(--c-borde-fuerte);
    align-items: center;
    justify-content: center;
    color: var(--c-texto);
    transition: border-color var(--transicion), color var(--transicion);
}
.mc-menu-btn:hover { border-color: var(--c-acento); color: var(--c-acento); }
.mc-menu-btn svg { width: 20px; height: 20px; }

/* ── Selector de tema (claro / oscuro) ──────────────────────────────────── */
.mc-tema {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: 8px 14px;
    border-radius: var(--radio-pastilla);
    border: 1px solid var(--c-borde-fuerte);
    background: var(--c-superficie);
    color: var(--c-texto-2);
    font-size: .875rem;
    font-weight: var(--peso-base);
    transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.mc-tema:hover { border-color: var(--c-acento); color: var(--c-acento); }
.mc-tema__icono { width: 17px; height: 17px; flex: 0 0 auto; }
.mc-tema__texto { white-space: nowrap; }
/* El icono que se ve es el del tema que se va a ACTIVAR (sol cuando estamos en
   oscuro, luna cuando estamos en claro). Sin atributo (primer pintado) manda
   la luna, que es el tema claro por defecto. */
.mc-tema__icono--sol  { display: none; }
.mc-tema__icono--luna { display: block; }
html[data-tema="oscuro"] .mc-tema__icono--sol  { display: block; }
html[data-tema="oscuro"] .mc-tema__icono--luna { display: none; }

/* En la cabecera solo cabe el icono (el texto sobra) */
.mc-cabecera-tema .mc-tema__texto { display: none; }
.mc-cabecera-tema .mc-tema { padding: 9px; }

/* ── §9 Portadas y hero ─────────────────────────────────────────────────── */
/* Portada de sección: dos manchas suaves del color de la familia */
.mc-portada {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 6vw, 76px) 0 clamp(38px, 5vw, 60px);
    border-bottom: 1px solid var(--c-borde);
    background:
        radial-gradient(880px 340px at 10% -25%, rgba(var(--seccion-rgb), .17), transparent 68%),
        radial-gradient(680px 300px at 94% -5%, rgba(var(--seccion-rgb), .10), transparent 62%),
        var(--c-fondo);
}

.mc-portada__rejilla {
    display: grid;
    gap: clamp(28px, 4vw, 48px);
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
}
.mc-portada__texto > * + * { margin-top: var(--e-4); }

.mc-portada__cifras {
    display: flex;
    gap: clamp(20px, 3vw, 34px);
    flex-wrap: wrap;
    margin-top: var(--e-5);
    padding-top: var(--e-5);
    border-top: 1px solid var(--c-borde);
}
.mc-portada__cifra { display: flex; flex-direction: column; gap: 1px; }
.mc-portada__cifra b {
    font-family: var(--fuente-titulo);
    font-size: 1.62rem;
    font-weight: var(--peso-titulo);
    letter-spacing: -.015em;
    color: var(--seccion);
    font-variant-numeric: tabular-nums;
}
.mc-portada__cifra span {
    font-family: var(--fuente-ui);
    font-size: .735rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-texto-3);
}

/* Marco de la fotografía protagonista */
.mc-portada__arte {
    position: relative;
    border-radius: var(--radio-xl);
    overflow: hidden;
    box-shadow: var(--sombra-3);
    aspect-ratio: 4 / 3;
    background: var(--seccion-suave);
    border: 1px solid var(--c-borde);
}
.mc-portada__arte img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transicion-lenta);
}
.mc-portada:hover .mc-portada__arte img { transform: scale(1.018); }

/* Hero de la portada (bloque `es/hero`): una FOTO a sangre, su velo y tres
   diapositivas que se turnan solas. El carrusel no es una librería: lo pone el
   widget «Banner» de public/js/widgets.js, que se enciende por atributo —el id
   del bloque empieza por Banner y el data-jx dice cómo entra y cómo sale cada
   diapositiva—.

   Sobre una foto manda la foto: por eso aquí el texto va en blanco y los
   colores son los cuatro tokens --c-hero-* de abajo (los del tema están pensados
   para fondos lisos, y un verde profundo no se lee sobre una foto). Las
   diapositivas comparten celda de rejilla y todas menos la primera nacen
   ocultas: si el JavaScript no llega a arrancar, se lee el mensaje. */
.mc-hero {
    --c-hero-texto:   #ffffff;
    --c-hero-suave:   rgba(255, 255, 255, .82);
    --c-hero-cristal: rgba(14, 18, 14, .46);
    --c-hero-borde:   rgba(255, 255, 255, .26);

    position: relative;
    display: grid;
    isolation: isolate;            /* su propio espacio de apilado */
    overflow: hidden;
    min-height: clamp(520px, 76vh, 740px);
    background: #0e120e;           /* lo que se ve mientras llega la foto */
    color: var(--c-hero-texto);
}

/* La foto de fondo: manda el marco (el alto lo pone el hero), no la foto */
.mc-hero__fondo { position: absolute; inset: 0; z-index: -2; }
.mc-hero__fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 46% 40%;      /* el perro y el gato, algo a la derecha */
    animation: mc-hero-zoom 26s cubic-bezier(.22, .61, .36, 1) infinite alternate;
}

/* El velo: oscurece la izquierda —por donde entra la mirada y va el texto— y el
   borde de abajo, y deja la foto viva en la esquina alta derecha. La mancha de
   acento es la del hero de sección, con más cuerpo. */
.mc-hero__velo {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(96deg, rgba(11, 14, 11, .93) 0%, rgba(11, 14, 11, .74) 36%,
                        rgba(11, 14, 11, .26) 68%, rgba(11, 14, 11, .04) 100%),
        linear-gradient(0deg, rgba(11, 14, 11, .58) 0%, rgba(11, 14, 11, .12) 40%, transparent 62%),
        radial-gradient(120% 90% at 8% 0%, rgba(var(--c-acento-rgb), .26), transparent 58%);
}
/* Cada diapositiva centra su contenido y todas van en la MISMA celda. El
   min-width:0 es imprescindible: con el ancho automático de la casilla, la
   diapositiva de contenido más ancho (las listas y las cifras) estiraría la
   casilla y el texto se saldría por la derecha, fuera del hero. */
.mc-hero__diapositiva {
    grid-area: 1 / 1;
    z-index: 1;
    min-width: 0;
    display: grid;
    align-items: center;
    padding: clamp(56px, 9vh, 104px) 0 clamp(84px, 12vh, 116px);
}
.mc-hero__diapositiva:first-of-type { z-index: 2; }
/* Todas menos la primera nacen tapadas: el motor les pone el opacity en línea al
   entrar (y el del efecto al salir), así que aquí solo se cubre el primer
   pintado. */
.mc-hero__diapositiva + .mc-hero__diapositiva { opacity: 0; }
/* Las dos columnas del hero también pueden encogerse: sin esto, el ancho mínimo
   de lo que llevan dentro decide el de la rejilla. */
.mc-hero .mc-portada__rejilla > * { min-width: 0; }

/* Sobre la foto: texto blanco */
.mc-hero .mc-etiqueta { color: var(--c-hero-suave); }
.mc-hero .mc-titulo-xl, .mc-hero .mc-titulo { color: var(--c-hero-texto); }
.mc-hero .mc-titulo-xl { max-width: 18ch; }
.mc-hero .mc-titulo { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); max-width: 22ch; }
.mc-hero .mc-entradilla { color: var(--c-hero-suave); max-width: 52ch; }
/* La palabra destacada va en blanco con el subrayado del tamaño de un marcador
   (--c-arena): el acento del tema no se lee sobre una foto oscura. */
.mc-hero .mc-realce {
    color: var(--c-hero-texto);
    box-shadow: inset 0 -.16em 0 rgba(var(--c-arena-rgb), .85);
}

/* Columna derecha de las diapositivas: el panel para elegir animal (con las
   fotos), el retrato de la adopción y las fichas de dato que flotan al lado. */
.mc-hero__lado { display: grid; gap: var(--e-4); align-content: center; }

/* Caja de cristal sobre la foto: el mismo fondo, borde y desenfoque para el
   panel de animales y para las fichas de dato. */
.mc-hero__cristal {
    border: 1px solid var(--c-hero-borde);
    border-radius: var(--radio-l);
    background: var(--c-hero-cristal);
    box-shadow: var(--sombra-3);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
}

/* El panel de «elige tu animal»: cuatro fotos —perro, gato, loro y pez— en un
   montón, como una baraja abierta en abanico, con el nombre en cada foto y los
   dos enlaces que no caben en foto en la línea de abajo.
   Están montadas a propósito: la foto de debajo se puede TRAER AL FRENTE. Al
   pasar el ratón por encima (o al llegar con el tabulador) la tarjeta se
   endereza, sale del montón y queda la primera. */
.mc-hero__animales { padding: var(--e-5); }
.mc-hero__rotulo {
    font-family: var(--fuente-ui);
    font-size: .745rem;
    font-weight: var(--peso-fuerte);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--c-hero-suave);
}
/* El montón: un hueco reservado del alto de una tarjeta con su giro (20/9) y
   sitio relativo, que es contra quien se colocan las cuatro tarjetas. Lleva
   tope de ancho porque en el portátil y la tableta el panel es ancho y, sin él,
   el montón se estiraría con la pantalla. */
.mc-hero__animales ul {
    position: relative;
    aspect-ratio: 20 / 9;
    max-width: 520px;
    margin: var(--e-3) 0 0;
    padding: 0;
    list-style: none;
}
/* Solo las tarjetas de la lista: con el selector ancho, el enlace del pie
   («Exóticos», «Blog») heredaba el aspect-ratio y se estiraba a lo alto.
   Cada tarjeta se coloca encima de la anterior y todas giran un poco hacia
   fuera, en abanico: la última (el pez) queda entera y las demás asoman por la
   izquierda con su nombre a la vista. */
.mc-hero__animales ul a {
    --giro: 0deg;                /* el giro de su sitio en el abanico */
    --salto: 0px;                /* lo que baja respecto al borde del montón */
    --zoom: 1;                   /* el tamaño, que crece al traerla al frente */
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--c-hero-borde);
    border-radius: var(--radio-s);
    box-shadow: 0 20px 36px -20px rgba(0, 0, 0, .85);
    transform: rotate(var(--giro)) translateY(var(--salto)) scale(var(--zoom));
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.mc-hero__animales li:nth-child(1) a { left: 0;    --giro: -3.4deg; --salto: 8px;  z-index: 1; }
.mc-hero__animales li:nth-child(2) a { left: 15%;  --giro: -1.2deg; --salto: 3px;  z-index: 2; }
.mc-hero__animales li:nth-child(3) a { left: 30%;  --giro:  1.2deg; --salto: 5px;  z-index: 3; }
.mc-hero__animales li:nth-child(4) a { left: 45%;  --giro:  3.4deg; --salto: 10px; z-index: 4; }
/* La tarjeta que se está mirando: se endereza, sube y se pone la primera */
.mc-hero__animales ul a:hover,
.mc-hero__animales ul a:focus-visible {
    --giro: 0deg;
    --salto: -12px;
    --zoom: 1.04;
    z-index: 9;
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 34px 56px -22px rgba(0, 0, 0, .9);
}
.mc-hero__animales ul img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transicion-lenta);
}
.mc-hero__animales ul a:hover img,
.mc-hero__animales ul a:focus-visible img { transform: scale(1.06); }
/* El nombre va sobre la foto, con un degradado que lo separa de la imagen. Va
   ajustado (y sin mucha sangría) porque de cada tarjeta tapada solo se ve una
   franja por la izquierda: así el nombre entra entero en esa franja. */
.mc-hero__animales ul b {
    position: absolute;
    inset: auto 0 0 0;
    padding: 24px 8px 7px;
    font-family: var(--fuente-titulo);
    font-size: .95rem;
    font-weight: var(--peso-titulo);
    color: var(--c-hero-texto);
    background: linear-gradient(to top, rgba(8, 10, 8, .88), rgba(8, 10, 8, .3) 55%, transparent);
}
.mc-hero__animales-pie {
    margin-top: var(--e-3);
    font-size: .8rem;
    color: var(--c-hero-suave);
}
.mc-hero__animales-pie a {
    color: var(--c-hero-texto);
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    transition: border-color var(--transicion);
}
.mc-hero__animales-pie a + a { margin-left: var(--e-2); }
.mc-hero__animales-pie a:hover { border-bottom-color: #fff; }

/* Las listas de guías de las diapositivas 2 y 3: el título y su explicación, con
   un filete a la izquierda que se enciende al pasar por encima. */
.mc-hero__enlaces { display: grid; gap: 2px; margin-top: var(--e-4); }
.mc-hero__enlaces a {
    display: block;
    padding: 9px 14px;
    border-left: 2px solid rgba(255, 255, 255, .3);
    border-radius: 0 var(--radio-s) var(--radio-s) 0;
    transition: background var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.mc-hero__enlaces b {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 1.06rem;
    font-weight: var(--peso-titulo);
    color: var(--c-hero-texto);
}
.mc-hero__enlaces span { font-size: .83rem; color: var(--c-hero-suave); }
.mc-hero__enlaces a:hover {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    transform: translateX(3px);
}

/* El retrato de la diapositiva de adopción: la foto con su pie encima */
.mc-hero__retrato {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--c-hero-borde);
    border-radius: var(--radio-l);
    box-shadow: var(--sombra-3);
}
.mc-hero__retrato img { width: 100%; height: 100%; object-fit: cover; }
.mc-hero__retrato figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 36px 16px 12px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--c-hero-suave);
    background: linear-gradient(to top, rgba(8, 10, 8, .92), rgba(8, 10, 8, .35) 55%, transparent);
}

/* Ficha de dato: cristal, con la cifra en grande. Sirve en la diapositiva de la
   adopción (el gasto y el tiempo) y en la lista de cifras de la última. */
.mc-hero__fichas, .mc-hero__cifras {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-3);
}
.mc-hero__dato { padding: var(--e-4) var(--e-5); border-radius: var(--radio); }
.mc-hero__dato b {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 1.72rem;
    font-weight: var(--peso-titulo);
    line-height: 1.12;
    letter-spacing: -.02em;
    color: var(--c-hero-texto);
    font-variant-numeric: tabular-nums;
}
.mc-hero__dato span { font-size: .85rem; color: var(--c-hero-suave); }

/* Mandos del carrusel: los pone el widget al arrancar (un nav con los dos
   botones y una barra por diapositiva). Lo que se ve siempre son las BARRAS
   —una por diapositiva; la de la que se está viendo la enciende el motor con un
   opacity en línea, y aquí solo se le da la forma apagada—. Las FLECHAS de
   anterior y siguiente NO se ven: salen al pasar el ratón por los mandos (o al
   llegar con el tabulador), que ahí es donde está el mando que se pulsa. Y
   salen en blanco traslúcido: un mando oscuro sobre una foto oscura no se ve. */
.mc-hero > nav {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: clamp(14px, 2.6vh, 26px);
    transform: translateX(-50%);   /* la franja se encoge al grupo de mandos */
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    /* Aquí sí pincha el ratón (es la zona de los mandos) y es lo que saca las
       flechas. La franja es un grupo estrecho centrado abajo: no estorba al
       texto ni a los botones del hero, que van mucho más arriba. */
    pointer-events: auto;
}
/* Las flechas nacen escondidas y sin recibir clics: mientras no se ven no son un
   blanco. Al ratón le basta entrar en la franja de mandos para sacarlas, así que
   el clic sobre una flecha es un clic sobre algo que ya está saliendo; el clic
   sobre una barra no hace nada (el widget solo escucha las flechas). */
.mc-hero > nav > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;                 /* 46 px: el mínimo cómodo para el dedo */
    height: 46px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    opacity: 0;
    transform: translateY(9px) scale(.78);
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: opacity var(--transicion), transform var(--transicion),
                background var(--transicion), border-color var(--transicion),
                box-shadow var(--transicion);
}
/* El ratón sobre los mandos —o el tabulador en cualquiera de ellos— las saca */
.mc-hero > nav:hover > button,
.mc-hero > nav:focus-within > button {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
/* Ya a la vista, el ratón la enciende (y el icono crece un poco) */
.mc-hero > nav > button:hover {
    background: rgba(255, 255, 255, .38);
    border-color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .46);
}
.mc-hero > nav > button svg { width: 22px; height: 22px; transition: transform var(--transicion); }
.mc-hero > nav > button:hover svg { transform: scale(1.18); }
/* La barra: 30×4 px, con un halo invisible alrededor. Sirve para dos cosas: que
   el mando se toque cómodo con el dedo y que el ratón no se escape por el hueco
   al ir de la barra a la flecha (las flechas desaparecerían al soltar la barra). */
.mc-hero > nav i {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 4px;
    border-radius: 3px;
    background: #fff;
    opacity: .42;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .38);
    cursor: pointer;
}
.mc-hero > nav i::before { content: ""; position: absolute; inset: -14px -5px; }
.mc-hero > nav i:hover {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .2), 0 1px 6px rgba(0, 0, 0, .38);
}

/* Movimiento del hero: la foto se acerca muy despacio, el texto entra por
   tandas y las fichas de dato flotan. Con «reduce el movimiento» no se ve nada
   de esto y las tres diapositivas se leen seguidas (§18). */
@keyframes mc-hero-zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@keyframes mc-hero-flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}
@keyframes mc-hero-entra {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.mc-hero__diapositiva .mc-etiqueta,
.mc-hero__diapositiva .mc-titulo-xl,
.mc-hero__diapositiva .mc-titulo,
.mc-hero__diapositiva .mc-entradilla,
.mc-hero__diapositiva .mc-flex,
.mc-hero__lado,
.mc-hero__cifras { animation: mc-hero-entra .85s cubic-bezier(.22, .61, .36, 1) both; }
.mc-hero__diapositiva .mc-titulo-xl,
.mc-hero__diapositiva .mc-titulo { animation-delay: .08s; }
.mc-hero__diapositiva .mc-entradilla { animation-delay: .16s; }
.mc-hero__enlaces { animation: mc-hero-entra .85s cubic-bezier(.22, .61, .36, 1) both; animation-delay: .2s; }
.mc-hero__diapositiva .mc-flex { animation-delay: .24s; }
.mc-hero__lado, .mc-hero__cifras { animation-delay: .28s; }

.mc-hero__dato { animation: mc-hero-flota 7s ease-in-out infinite; }
.mc-hero__fichas .mc-hero__dato + .mc-hero__dato { animation-delay: 1.4s; }
.mc-hero__cifras .mc-hero__dato:nth-child(2) { animation-delay: 1.1s; }
.mc-hero__cifras .mc-hero__dato:nth-child(3) { animation-delay: 2.2s; }
.mc-hero__cifras .mc-hero__dato:nth-child(4) { animation-delay: 3.3s; }
.mc-hero__cifras .mc-hero__dato:nth-child(5) { animation-delay: 4.4s; }
.mc-hero__cifras .mc-hero__dato:nth-child(6) { animation-delay: 5.5s; }

/* Colores por familia: cada portada sobreescribe su acento.
   En claro son tonos profundos (contraste sobre fondo claro); en oscuro se
   aclaran, porque el tono profundo no contrasta sobre negro (§17). */
.mc-familia-perros   { --seccion: #a35a12; --seccion-rgb: 163, 90, 18; }
.mc-familia-gatos    { --seccion: #6b4bc4; --seccion-rgb: 107, 75, 196; }
.mc-familia-aves     { --seccion: #0f6b96; --seccion-rgb: 15, 107, 150; }
.mc-familia-peces    { --seccion: #2b5bb5; --seccion-rgb: 43, 91, 181; }
.mc-familia-exoticos { --seccion: #3f7a3a; --seccion-rgb: 63, 122, 58; }
.mc-familia-blog     { --seccion: #a8465a; --seccion-rgb: 168, 70, 90; }

/* ── §10 Tarjetas y rejillas ────────────────────────────────────────────── */
.mc-rejilla-tarjetas {
    display: grid;
    gap: clamp(20px, 2.4vw, 28px);
    grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
}
.mc-rejilla-tarjetas--destacada { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.mc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-superficie);
    border: 1px solid var(--c-borde);
    border-radius: var(--radio-l);
    overflow: hidden;
    box-shadow: var(--sombra-1);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.mc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2);
    border-color: rgba(var(--c-acento-rgb), .38);
}

.mc-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--seccion-suave), rgba(var(--c-neutro-rgb), .14));
}
.mc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transicion-lenta);
}
.mc-card:hover .mc-card__media img { transform: scale(1.045); }
.mc-card__media--cuadrada { aspect-ratio: 1 / 1; }

.mc-card__etiqueta {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 5px 12px;
    border-radius: var(--radio-pastilla);
    background: var(--c-velo);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: .715rem;
    font-weight: var(--peso-fuerte);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--seccion);
    box-shadow: var(--sombra-1);
}

.mc-card__cuerpo {
    padding: var(--e-5) var(--e-5) var(--e-2);
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    flex: 1;
}
.mc-card__titulo {
    font-family: var(--fuente-titulo);
    font-size: 1.14rem;
    font-weight: var(--peso-titulo);
    letter-spacing: -.012em;
    line-height: 1.34;
    color: var(--c-texto);
    transition: color var(--transicion);
}
.mc-card:hover .mc-card__titulo { color: var(--c-acento); }
.mc-card__resumen { font-size: var(--t-menudo); color: var(--c-texto-2); line-height: 1.58; }

.mc-card__pie {
    margin-top: auto;
    padding: var(--e-3) var(--e-5) var(--e-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    font-size: .845rem;
    color: var(--c-texto-3);
}
.mc-card__mas {
    color: var(--c-acento);
    font-weight: var(--peso-base);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mc-card__mas svg { width: 14px; height: 14px; transition: transform var(--transicion); }
.mc-card:hover .mc-card__mas svg { transform: translateX(3px); }

/* Tarjeta de tema (sin foto): se sostiene con el color de la familia, aplicado
   en mancha desde el centro (un degradado lineal desde la esquina izquierda se
   lee como una franja de color pegada al borde). */
.mc-card--tema {
    background: radial-gradient(120% 90% at 50% 0%, var(--seccion-suave), transparent 70%), var(--c-superficie);
}
.mc-card--tema .mc-card__cuerpo { padding-top: var(--e-6); }
.mc-card--tema .mc-card__pie { padding-top: 0; }

/* Mosaico de fotos (collage)
   -------------------------------------------------------------------------
   Rejilla de celdas GEMELAS: todas miden lo mismo y cada foto ocupa una o
   cuatro (la pieza «grande», 2×2). Así el mosaico queda cuadrado y equilibrado
   sin recortar nada a mano —las fotos se recortan con object-fit, igual que en
   las tarjetas— por muy alta o baja que sea la foto original.
   Cuenta de celdas con 4 columnas: una grande (4 celdas) + 8 normales = 12, o
   sea tres filas exactas y ni un hueco. Con otro número de fotos se cambia el
   ancho (mc-collage--3) para que el mosaico vuelva a cerrarse. */
.mc-collage {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(104px, 12.4vw, 174px);
    gap: clamp(10px, 1.4vw, 16px);
    margin-top: clamp(26px, 3.4vw, 42px);
}
.mc-collage--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mc-collage__pieza {
    position: relative;
    overflow: hidden;
    border-radius: var(--radio);
    border: 1px solid var(--c-borde);
    background: var(--seccion-suave);
}
.mc-collage__pieza--grande { grid-column: span 2; grid-row: span 2; }
.mc-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--transicion-lenta);
}
.mc-collage__pieza:hover img { transform: scale(1.04); }

/* Manifiesto de adopción del inicio (cuidado y compañía)
   -------------------------------------------------------------------------
   Ocupa el ancho de la sección: el titular y el lema van a línea completa —en
   letra grande, el lema por debajo del hero en la escala, que aquí no compite
   con nada— y el texto corto se queda abajo, con los dos accesos a su derecha.
   El collage cierra la sección de lado a lado. Es la única sección de la
   portada sin tarjetas: se lee como un texto y no como una rejilla más. */
.mc-adopcion__titulo { margin-top: var(--e-3); }
/* La palabra que lleva el mensaje se marca solo con COLOR: el titular del sitio
   va fino a propósito y engordarlo le quitaría el aire editorial. */
.mc-adopcion__clave { color: var(--c-acento); }
.mc-adopcion__lema {
    margin-top: var(--e-4);
    font-family: var(--fuente-titulo);
    font-size: clamp(1.34rem, 1.02rem + 1.3vw, 2rem);
    font-weight: var(--peso-ligero);
    letter-spacing: -.014em;
    line-height: 1.3;
    color: var(--c-texto);
    text-wrap: balance;
}
/* Texto a la izquierda y accesos a la derecha, alineados por la base: así la
   sección se llena de lado a lado sin estirar la línea de lectura (la
   entradilla conserva su medida cómoda y el hueco lo ocupan los botones). */
.mc-adopcion__pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--e-4) var(--e-7);
    align-items: end;
    margin-top: var(--e-5);
}
.mc-adopcion__pie .mc-flex { justify-content: flex-end; }

/* ── §11 Listados, migas, paginación y buscador ─────────────────────────── */
.mc-migas { display: flex; flex-wrap: wrap; gap: 7px; font-size: .855rem; color: var(--c-texto-3); }
.mc-migas a { transition: color var(--transicion); }
.mc-migas a:hover { color: var(--c-acento); }
.mc-migas span[aria-current] { color: var(--c-texto-2); }

.mc-listado__cabecera { padding: clamp(30px, 4vw, 44px) 0 clamp(20px, 2.6vw, 28px); }
.mc-listado__cabecera h1 { margin: var(--e-3) 0 var(--e-3); }

.mc-paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--e-2);
    margin-top: var(--e-7);
    flex-wrap: wrap;
}
.mc-paginacion a, .mc-paginacion span {
    min-width: 42px;
    padding: 10px 14px;
    text-align: center;
    border-radius: var(--radio-s);
    border: 1px solid var(--c-borde);
    background: var(--c-superficie);
    font-size: .915rem;
    color: var(--c-texto-2);
    transition: border-color var(--transicion), color var(--transicion), background var(--transicion);
}
.mc-paginacion a:hover { border-color: var(--c-acento); color: var(--c-acento); }
.mc-paginacion .mc-paginacion__actual {
    background: var(--c-acento);
    border-color: var(--c-acento);
    color: var(--c-sobre-acento);
    font-weight: var(--peso-base);
}

.mc-buscador { display: flex; gap: var(--e-2); max-width: 560px; margin: 0 auto; }
.mc-buscador input {
    flex: 1;
    min-width: 0;
    padding: 13px 18px;
    border-radius: var(--radio-pastilla);
    border: 1px solid var(--c-borde-fuerte);
    background: var(--c-superficie);
    color: var(--c-texto);
    font-size: .96rem;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.mc-buscador input:focus {
    outline: none;
    border-color: var(--c-acento);
    box-shadow: 0 0 0 4px rgba(var(--c-acento-rgb), .15);
}

/* ── §12 Artículo ───────────────────────────────────────────────────────── */
.mc-articulo {
    display: grid;
    gap: clamp(30px, 4vw, 48px);
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    padding: var(--e-6) 0 var(--e-8);
}
.mc-articulo__principal { min-width: 0; }

.mc-cabecera-articulo > * + * { margin-top: var(--e-4); }
.mc-cabecera-articulo__meta {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    flex-wrap: wrap;
    font-size: .855rem;
    color: var(--c-texto-3);
}
.mc-cabecera-articulo__imagen {
    border-radius: var(--radio-l);
    overflow: hidden;
    border: 1px solid var(--c-borde);
    box-shadow: var(--sombra-2);
    aspect-ratio: 16 / 9;
    background: var(--seccion-suave);
}
.mc-cabecera-articulo__imagen img { width: 100%; height: 100%; object-fit: cover; }

/* Cuerpo del artículo: un punto por encima del texto base (1.075rem) y con más
   interlineado, que es lo que pide un bloque largo de lectura. */
.mc-articulo-body { font-family: var(--fuente-titulo); font-size: 1.075rem; line-height: 1.78; color: var(--c-texto-2); }
.mc-articulo-body > * + * { margin-top: var(--e-5); }
/* Encabezados del artículo: la jerarquía la marcan el tamaño, el peso y el
   espacio de arriba, sin filetes ni sangrados laterales. */
.mc-articulo-body h2 {
    font-family: var(--fuente-titulo);
    font-size: clamp(1.34rem, 1.13rem + .9vw, 1.78rem);
    line-height: 1.26;
    font-weight: var(--peso-titulo);
    letter-spacing: var(--tracking-titulo);
    color: var(--c-texto);
    margin-top: var(--e-8);
}
.mc-articulo-body h3 {
    font-weight: var(--peso-medio);
    font-size: 1.18rem;
    letter-spacing: -.012em;
    color: var(--c-texto);
    margin-top: var(--e-6);
}
/* Lo que sigue a un encabezado no necesita el margen grande de bloque */
.mc-articulo-body h2 + *, .mc-articulo-body h3 + * { margin-top: var(--e-3); }
.mc-articulo-body strong { color: var(--c-texto); font-weight: var(--peso-medio); }

.mc-articulo-body ul, .mc-articulo-body ol { padding-left: 4px; display: grid; gap: var(--e-3); }
.mc-articulo-body li { position: relative; padding-left: 26px; }
.mc-articulo-body li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--seccion);
}

.mc-articulo-body figure { margin: var(--e-6) 0; }
.mc-articulo-body figure img {
    width: 100%;
    border-radius: var(--radio-l);
    border: 1px solid var(--c-borde);
}
.mc-articulo-body figcaption {
    margin-top: var(--e-3);
    font-size: .855rem;
    color: var(--c-texto-3);
    text-align: center;
}

/* Cita: se distingue por el aire, el tamaño y la cursiva, sin filete al costado.
   Ojo: el archivo de Inter no trae cursiva (§2.0), así que hoy el navegador la
   inclina a mano; si entra una cita de verdad, toca bajar el woff2 «italic». */
.mc-articulo-body blockquote {
    max-width: 54ch;
    margin-inline: auto;
    padding: var(--e-6) var(--e-2);
    text-align: center;
    font-family: var(--fuente-titulo);
    font-size: 1.18rem;
    font-style: italic;
    line-height: 1.62;
    color: var(--c-texto);
}
.mc-articulo-body blockquote > * + * { margin-top: var(--e-3); }
.mc-articulo-body blockquote footer,
.mc-articulo-body blockquote cite {
    font-size: .855rem;
    font-style: normal;
    color: var(--c-texto-3);
}

/* Tablas: encabezado teñido, filas alternas y desplazamiento en móvil */
.mc-articulo-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    border: 1px solid var(--c-borde);
    border-radius: var(--radio);
    overflow: hidden;
}
.mc-articulo-body thead { background: rgba(var(--c-acento-rgb), .08); }
.mc-articulo-body th, .mc-articulo-body td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--c-borde);
    text-align: left;
}
.mc-articulo-body th { color: var(--c-texto); font-weight: var(--peso-medio); }
.mc-articulo-body tbody tr:nth-child(even) { background: var(--c-superficie-2); }
.mc-articulo-body tbody tr:last-child td { border-bottom: 0; }

.mc-articulo__pie {
    margin-top: var(--e-6);
    padding-top: var(--e-5);
    border-top: 1px solid var(--c-borde);
    display: grid;
    gap: var(--e-5);
    grid-template-columns: 1fr 1fr;
}
.mc-etiquetas { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Barra lateral pegajosa */
.mc-aside { position: sticky; top: calc(var(--header-alto) + 18px); display: grid; gap: var(--e-5); }
.mc-relacionados { display: grid; gap: var(--e-3); }
.mc-relacionados a {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--c-borde);
    border-radius: var(--radio);
    background: var(--c-superficie);
    transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.mc-relacionados a:hover {
    border-color: var(--c-acento);
    transform: translateX(3px);
    box-shadow: var(--sombra-1);
}
.mc-relacionados strong {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 1.03rem;
    font-weight: var(--peso-titulo);
    letter-spacing: -.01em;
    line-height: 1.36;
}

/* Fotografía y vídeo dentro del texto del artículo
   ------------------------------------------------------------------------
   Los HTML vienen de es/_foto.html y es/_video.html. Se maquetan aquí y no en
   el cuerpo del artículo para no mezclarlos con las imágenes sueltas de un
   artículo antiguo (que siguen tomando .mc-articulo-body figure img). */
.mc-foto { margin: var(--e-6) 0; }
.mc-foto img {
    width: 100%;
    border-radius: var(--radio-l);
    border: 1px solid var(--c-borde);
    background: var(--seccion-suave);
}
.mc-foto figcaption {
    margin-top: var(--e-3);
    font-size: .855rem;
    color: var(--c-texto-3);
    text-align: center;
    line-height: 1.55;
}
/* En pantallas anchas, una foto «medio» comparte línea con el texto */
@media (min-width: 900px) {
    .mc-foto--medio { max-width: 62%; margin-left: auto; margin-right: auto; }
}

/* Vídeo: marco 16:9 que reserva el hueco (el <iframe> no salta al cargar) */
.mc-video { margin: var(--e-6) 0; }
.mc-video__marco {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radio-l);
    overflow: hidden;
    border: 1px solid var(--c-borde);
    background: var(--c-superficie-2);
    box-shadow: var(--sombra-1);
}
.mc-video__marco iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.mc-video__pie {
    margin-top: var(--e-3);
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: .855rem;
    color: var(--c-texto-3);
    line-height: 1.55;
}
.mc-video__titulo { font-size: .95rem; font-weight: var(--peso-medio); color: var(--c-texto); }
.mc-video__fuente a { text-decoration: underline; }
.mc-video__fuente a:hover { color: var(--c-acento); }
.mc-video__nota { color: var(--c-texto-3); }

/* Vídeos del tema: en vez de incrustar un vídeo concreto (que caduca), una
   llamada sobria a buscarlo en YouTube. Se usa cuando no hay un id verificado:
   un marco negro roto se nota mucho más que no tener vídeo. */
.mc-video-buscar { margin: var(--e-6) 0; }
.mc-video-buscar__rotulo {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: var(--e-3);
    font-family: var(--fuente-ui);
    font-size: .745rem;
    font-weight: var(--peso-fuerte);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-texto-3);
}
.mc-video-buscar__rotulo svg { width: 15px; height: 15px; flex: 0 0 auto; }

.mc-video-buscar__enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-5);
    border: 1px solid var(--c-borde);
    border-radius: var(--radio-l);
    background: var(--c-superficie);
    transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.mc-video-buscar__enlace:hover {
    border-color: var(--c-acento);
    transform: translateY(-2px);
    box-shadow: var(--sombra-1);
}
.mc-video-buscar__texto { display: flex; flex-direction: column; gap: 3px; }
.mc-video-buscar__texto b {
    font-family: var(--fuente-titulo);
    font-size: 1.06rem;
    font-weight: var(--peso-titulo);
    letter-spacing: -.004em;
    color: var(--c-texto);
}
.mc-video-buscar__nota { font-size: .875rem; color: var(--c-texto-3); line-height: 1.5; }
.mc-video-buscar__flecha {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--c-acento);
    transition: transform var(--transicion);
}
.mc-video-buscar__enlace:hover .mc-video-buscar__flecha { transform: translateX(3px); }

/* ── §13 Ficha de datos y preguntas frecuentes ──────────────────────────── */
.mc-ficha {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    padding: var(--e-5);
    border: 1px solid var(--c-borde);
    border-radius: var(--radio-l);
    background: linear-gradient(150deg, var(--seccion-suave), transparent 70%), var(--c-superficie);
    box-shadow: var(--sombra-1);
}
.mc-ficha__titulo {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .755rem;
    font-weight: var(--peso-fuerte);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--seccion);
}
.mc-ficha__titulo svg { width: 17px; height: 17px; }
.mc-ficha__dato { display: flex; flex-direction: column; gap: 3px; }
.mc-ficha__dato span {
    font-size: .755rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-texto-3);
}
.mc-ficha__dato b {
    font-family: var(--fuente-titulo);
    font-size: 1.08rem;
    font-weight: var(--peso-titulo);
    color: var(--c-texto);
}

/* Acordeón sin JavaScript: <details>/<summary> */
.mc-faq { display: grid; gap: var(--e-3); }
.mc-faq details {
    border: 1px solid var(--c-borde);
    border-radius: var(--radio);
    background: var(--c-superficie);
    padding: 4px 18px;
    transition: border-color var(--transicion);
}
.mc-faq details[open] { border-color: rgba(var(--seccion-rgb), .45); }
.mc-faq details:hover { border-color: rgba(var(--seccion-rgb), .38); }
.mc-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: 15px 0;
    font-family: var(--fuente-titulo);
    font-size: 1.1rem;
    font-weight: var(--peso-medio);
    letter-spacing: -.008em;
    color: var(--c-texto);
}
.mc-faq summary::-webkit-details-marker { display: none; }
/* Aspa: gira de «∨» (cerrado) a «∧» (abierto) */
.mc-faq summary::after {
    content: "";
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--seccion);
    border-bottom: 2px solid var(--seccion);
    transform: rotate(45deg);
    transition: transform var(--transicion);
    flex: 0 0 auto;
    margin-right: 3px;
}
.mc-faq details[open] summary::after { transform: rotate(-135deg); }
.mc-faq details p { padding: 0 0 16px; color: var(--c-texto-2); }

/* ── §14 Anuncios y consentimiento ──────────────────────────────────────── */
.mc-anuncio { margin: var(--e-6) 0; text-align: center; }
.mc-anuncio__rotulo {
    display: block;
    font-size: .665rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--c-texto-3);
    margin-bottom: 7px;
}
.mc-anuncio ins {
    display: block;
    width: 100%;
    min-height: 90px;
    background: rgba(var(--c-neutro-rgb), .07);
    border-radius: var(--radio-s);
}
.mc-anuncio--lateral ins { min-height: 250px; }
.mc-anuncio--franja { margin: var(--e-6) 0 0; }

.mc-consent {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 90;
    width: min(940px, calc(100% - 28px));
    display: flex;
    align-items: center;
    gap: var(--e-4);
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-radius: var(--radio-l);
    border: 1px solid var(--c-borde);
    background: var(--c-cabecera-velo);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: var(--sombra-3);
    font-size: .92rem;
    color: var(--c-texto-2);
}
.mc-consent[hidden] { display: none; }
.mc-consent__acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.mc-consent a { text-decoration: underline; }

/* ── §15 Formularios ────────────────────────────────────────────────────── */
.mc-form { display: grid; gap: var(--e-4); grid-template-columns: 1fr 1fr; }
.mc-campo { display: flex; flex-direction: column; gap: 7px; }
.mc-campo--ancho { grid-column: 1 / -1; }
.mc-campo label { font-size: .875rem; font-weight: var(--peso-medio); color: var(--c-texto); }
.mc-campo input, .mc-campo textarea, .mc-campo select {
    width: 100%;
    padding: 13px 16px;
    border-radius: var(--radio);
    border: 1px solid var(--c-borde-fuerte);
    background: var(--c-fondo);
    color: var(--c-texto);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.mc-campo input::placeholder, .mc-campo textarea::placeholder { color: var(--c-texto-3); }
.mc-campo textarea { min-height: 148px; resize: vertical; }
.mc-campo input:focus, .mc-campo textarea:focus, .mc-campo select:focus {
    outline: none;
    border-color: var(--c-acento);
    box-shadow: 0 0 0 4px rgba(var(--c-acento-rgb), .15);
}
.mc-campo__error { font-size: .855rem; color: var(--c-coral); }
.mc-form__acciones { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.mc-nota { font-size: .84rem; color: var(--c-texto-3); }

/* ── §16 Avisos, buscador y 404 ─────────────────────────────────────────── */
.mc-aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: 15px 18px;
    border-radius: var(--radio);
    border: 1px solid var(--c-borde);
    background: var(--c-superficie);
    font-size: .95rem;
}
.mc-aviso--ok {
    border-color: rgba(var(--c-ok-rgb), .42);
    background: rgba(var(--c-ok-rgb), .09);
    color: var(--c-ok);
}
.mc-aviso--error {
    border-color: rgba(var(--c-coral-rgb), .45);
    background: rgba(var(--c-coral-rgb), .09);
    color: var(--c-coral);
}
.mc-aviso svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 2px; }

.mc-resultados { display: grid; gap: var(--e-4); }
.mc-resultado {
    padding: 18px 20px;
    border: 1px solid var(--c-borde);
    border-radius: var(--radio);
    background: var(--c-superficie);
    transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.mc-resultado:hover { border-color: var(--c-acento); transform: translateY(-2px); box-shadow: var(--sombra-1); }
.mc-resultado__ruta { font-size: .795rem; color: var(--c-texto-3); word-break: break-all; }

.mc-404 { padding: clamp(60px, 10vw, 110px) 0; text-align: center; }
.mc-404__codigo {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: var(--peso-ligero);
    letter-spacing: -.055em;
    line-height: 1;
    color: rgba(var(--c-acento-rgb), .22);
}

/* ── §17 Temas ────────────────────────────────────────────────────────────
   El tema ES LA PALETA DEL PANEL. Los doce colores llegan como «R,G,B» en
   --plt-1 … --plt-12 (los inyecta base.html desde webs.plt) y aquí toman
   nombre con sentido: cambiar la paleta repinta el sitio entero, y no hay ni
   un color de marca escrito a mano más abajo. Los roles son los del panel, y
   cada token de este apartado sale de uno:

     1 primario     2 primario oscuro   3 primario claro   4 fondo
     5 acento       6 acento 2          7 superficie       8 texto suave
     9 blanco      10 negro            11 borde claro     12 borde oscuro

   El CLARO usa la paleta tal cual: los fondos son sus claros (4, 7, 9 y 11)
   y los textos sus oscuros (2, 12 y 3). El OSCURO es la MISMA paleta mirada
   del revés: el fondo sale del primario oscuro (2) y las superficies son
   velos del claro (7), con el texto también del claro (7). La marca —1, 5 y
   6— no cambia de un tema a otro: el modo cambia la luz, no el color.

   El modo se declara dos veces: el selector manual (html[data-tema="oscuro"],
   que escribe public/js/tema.js) y la preferencia del sistema. Son el MISMO
   juego de valores: si se cambia uno hay que cambiar el otro. El atributo
   data-tema="claro" siempre gana sobre la preferencia del sistema (de ahí los
   :not). */
:root {
    /* Fondos y superficies: la escalera de claros de la paleta */
    --c-fondo:         rgb(var(--plt-4));     /* 4 · fondo de página      */
    --c-fondo-alt:     rgb(var(--plt-11));    /* 11 · banda alterna       */
    --c-superficie:    rgb(var(--plt-9));     /* 9 · tarjetas y hojas     */
    --c-superficie-2:  rgb(var(--plt-7));     /* 7 · superficie alterna   */
    --c-superficie-3:  rgb(var(--plt-11));    /* 11 · superficie marcada  */
    --c-velo:          rgba(var(--plt-9), .86);
    --c-cabecera-velo: rgba(var(--plt-4), .80);

    /* Texto: del más fuerte al más suave */
    --c-texto:   rgb(var(--plt-2));           /* 2 · primario oscuro      */
    --c-texto-2: rgb(var(--plt-12));          /* 12 · borde oscuro        */
    --c-texto-3: rgb(var(--plt-3));           /* 3 · primario claro       */

    /* Líneas */
    --c-borde:        rgb(var(--plt-11));     /* 11 · borde claro         */
    --c-borde-fuerte: rgb(var(--plt-8));      /* 8 · texto suave          */

    /* Marca */
    --c-acento:        rgb(var(--plt-1));     /* 1 · primario             */
    --c-acento-rgb:    var(--plt-1);
    --c-acento-fuerte: rgb(var(--plt-2));     /* 2 · primario oscuro      */
    --c-sobre-acento:  rgb(var(--plt-9));     /* 9 · blanco, encima       */
    --c-arena:         rgb(var(--plt-5));     /* 5 · acento cálido        */
    --c-arena-rgb:     var(--plt-5);
    --c-coral:         rgb(var(--plt-6));     /* 6 · acento vivo          */
    --c-coral-rgb:     var(--plt-6);
    --c-neutro-rgb:    var(--plt-8);          /* 8 · velos neutros        */

    /* Semánticos: el éxito es verde en cualquier paleta (no es de marca) */
    --c-ok:     #2f6b3d;
    --c-ok-rgb: 47, 107, 61;

    /* Sombras: el tono oscuro de la paleta, nunca negro puro */
    --sombra-1: 0 1px 2px rgba(var(--plt-2), .06), 0 1px 3px rgba(var(--plt-2), .05);
    --sombra-2: 0 12px 30px -14px rgba(var(--plt-2), .22), 0 2px 6px rgba(var(--plt-2), .06);
    --sombra-3: 0 30px 64px -30px rgba(var(--plt-2), .36);
}

/* Tema oscuro elegido a mano: la misma paleta, del revés.
   El fondo es el primario oscuro (2); las superficies, velos del claro (7) y
   el texto, ese mismo claro (7). La marca (1, 5 y 6) y el blanco de encima
   (9) se heredan de :root sin tocar: son la paleta, y la paleta no cambia de
   tema. */
html[data-tema="oscuro"] {
    --c-fondo:         rgb(var(--plt-2));     /* 2 · primario oscuro      */
    --c-fondo-alt:     rgba(var(--plt-7), .04);
    --c-superficie:    rgba(var(--plt-7), .06);
    --c-superficie-2:  rgba(var(--plt-7), .09);
    --c-superficie-3:  rgba(var(--plt-7), .13);
    --c-velo:          rgba(var(--plt-2), .86);
    --c-cabecera-velo: rgba(var(--plt-2), .80);

    --c-texto:   rgb(var(--plt-7));           /* 7 · superficie = el claro */
    --c-texto-2: rgba(var(--plt-7), .76);
    --c-texto-3: rgba(var(--plt-7), .54);

    --c-borde:        rgba(var(--plt-7), .12);
    --c-borde-fuerte: rgba(var(--plt-7), .20);

    /* El hover de la marca no puede oscurecerse como en claro (el primario
       oscuro se confundiría con el fondo): se queda en el primario y el
       botón ya se levanta y refuerza su sombra. */
    --c-acento-fuerte: rgb(var(--plt-1));

    --c-ok:     #86d29a;
    --c-ok-rgb: 134, 210, 154;

    --sombra-1: 0 1px 2px rgba(0, 0, 0, .45);
    --sombra-2: 0 14px 34px -16px rgba(0, 0, 0, .68), 0 2px 6px rgba(0, 0, 0, .35);
    --sombra-3: 0 32px 72px -32px rgba(0, 0, 0, .80);
}

/* Preferencia del sistema, solo si no se ha elegido tema a mano.
   Mismo juego de valores que el bloque de arriba, con la indentación del
   media: si se cambia uno hay que cambiar el otro. */
@media (prefers-color-scheme: dark) {
    html:not([data-tema="claro"]) {
        --c-fondo:         rgb(var(--plt-2));     /* 2 · primario oscuro  */
        --c-fondo-alt:     rgba(var(--plt-7), .04);
        --c-superficie:    rgba(var(--plt-7), .06);
        --c-superficie-2:  rgba(var(--plt-7), .09);
        --c-superficie-3:  rgba(var(--plt-7), .13);
        --c-velo:          rgba(var(--plt-2), .86);
        --c-cabecera-velo: rgba(var(--plt-2), .80);

        --c-texto:   rgb(var(--plt-7));           /* 7 · el claro         */
        --c-texto-2: rgba(var(--plt-7), .76);
        --c-texto-3: rgba(var(--plt-7), .54);

        --c-borde:        rgba(var(--plt-7), .12);
        --c-borde-fuerte: rgba(var(--plt-7), .20);

        --c-acento-fuerte: rgb(var(--plt-1));

        --c-ok:     #86d29a;
        --c-ok-rgb: 134, 210, 154;

        --sombra-1: 0 1px 2px rgba(0, 0, 0, .45);
        --sombra-2: 0 14px 34px -16px rgba(0, 0, 0, .68), 0 2px 6px rgba(0, 0, 0, .35);
        --sombra-3: 0 32px 72px -32px rgba(0, 0, 0, .80);
    }
}

/* Los acentos de familia se aclaran sobre fondo oscuro: el tono profundo del
   tema claro no contrasta sobre casi negro. */
html[data-tema="oscuro"] .mc-familia-perros   { --seccion: #e2a466; --seccion-rgb: 226, 164, 102; }
html[data-tema="oscuro"] .mc-familia-gatos    { --seccion: #b9a1f0; --seccion-rgb: 185, 161, 240; }
html[data-tema="oscuro"] .mc-familia-aves     { --seccion: #7cc2e4; --seccion-rgb: 124, 194, 228; }
html[data-tema="oscuro"] .mc-familia-peces    { --seccion: #8fb2f2; --seccion-rgb: 143, 178, 242; }
html[data-tema="oscuro"] .mc-familia-exoticos { --seccion: #94ce8c; --seccion-rgb: 148, 206, 140; }
html[data-tema="oscuro"] .mc-familia-blog     { --seccion: #eb9aa8; --seccion-rgb: 235, 154, 168; }

@media (prefers-color-scheme: dark) {
    html:not([data-tema="claro"]) .mc-familia-perros   { --seccion: #e2a466; --seccion-rgb: 226, 164, 102; }
    html:not([data-tema="claro"]) .mc-familia-gatos    { --seccion: #b9a1f0; --seccion-rgb: 185, 161, 240; }
    html:not([data-tema="claro"]) .mc-familia-aves     { --seccion: #7cc2e4; --seccion-rgb: 124, 194, 228; }
    html:not([data-tema="claro"]) .mc-familia-peces    { --seccion: #8fb2f2; --seccion-rgb: 143, 178, 242; }
    html:not([data-tema="claro"]) .mc-familia-exoticos { --seccion: #94ce8c; --seccion-rgb: 148, 206, 140; }
    html:not([data-tema="claro"]) .mc-familia-blog     { --seccion: #eb9aa8; --seccion-rgb: 235, 154, 168; }
}

/* En oscuro las fotos muy luminosas deslumbran sobre el fondo: se rebaja un
   poco el brillo. No se altera el color ni la saturación de las imágenes. */
html[data-tema="oscuro"] .mc-portada__arte img,
html[data-tema="oscuro"] .mc-card__media img,
html[data-tema="oscuro"] .mc-cabecera-articulo__imagen img,
html[data-tema="oscuro"] .mc-articulo-body figure img { filter: brightness(.93) contrast(1.02); }

@media (prefers-color-scheme: dark) {
    html:not([data-tema="claro"]) .mc-portada__arte img,
    html:not([data-tema="claro"]) .mc-card__media img,
    html:not([data-tema="claro"]) .mc-cabecera-articulo__imagen img,
    html:not([data-tema="claro"]) .mc-articulo-body figure img { filter: brightness(.93) contrast(1.02); }
}

/* ── §18 Movimiento y accesibilidad ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .mc-card:hover, .mc-panel--acento:hover, .mc-resultado:hover { transform: none; }
    .mc-card:hover .mc-card__media img, .mc-portada:hover .mc-portada__arte img,
    .mc-collage__pieza:hover img { transform: none; }
    .mc-card__media img, .mc-portada__arte img { filter: none; }

    /* El hero, sin movimiento: la foto quieta, las fichas en su sitio y las tres
       diapositivas seguidas (una debajo de la otra), que sin turno no hay nada
       que turnar. Los mandos del carrusel sobran. */
    .mc-hero__diapositiva {
        grid-area: auto !important;
        transform: none !important;
        opacity: 1 !important;
        padding-block: clamp(44px, 8vh, 84px);
    }
    .mc-hero > nav { display: none; }
}

/* Foco visible y consistente en todo lo interactivo (navegación por teclado) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(var(--c-acento-rgb), .55);
    outline-offset: 2px;
    border-radius: var(--radio-xs);
}

/* ── Adaptación ─────────────────────────────────────────────────────────── */
/* Portátil: el artículo pierde la barra lateral pegajosa */
@media (max-width: 1040px) {
    .mc-articulo { grid-template-columns: minmax(0, 1fr); }
    .mc-aside { position: static; }
    .mc-portada__rejilla { grid-template-columns: 1fr; }
    .mc-portada__arte { aspect-ratio: 16 / 9; }
    /* El mosaico de fotos aprieta la fila para que no se coma la pantalla */
    .mc-collage { grid-auto-rows: clamp(96px, 14vw, 150px); }
    .mc-hero .mc-titulo-xl { max-width: 24ch; }
    /* La columna de la derecha baja debajo del texto (la rejilla ya es de una
       sola columna): la foto de la adopción y las cifras se quedan; las fichas
       de gasto y tiempo, que se leen en el texto de al lado, no. Aquí la columna
       se topa y se centra: en una sola columna el panel sería anchísimo y el
       montón de fotos se estiraría con él. */
    .mc-hero__fichas { display: none; }
    .mc-hero__lado { max-width: 560px; margin-inline: auto; }
    .mc-hero__retrato { max-width: 520px; margin-inline: auto; aspect-ratio: 16 / 9; }
    .mc-footer__rejilla { grid-template-columns: 1fr 1fr; }
    .mc-footer__marca { grid-column: 1 / -1; }
}

/* Tableta: el menú se pliega en un desplegable */
@media (max-width: 900px) {
    :root { --header-alto: 62px; }
    .mc-menu-btn { display: inline-flex; }
    .mc-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px 18px 20px;
        background: var(--c-superficie);
        border-bottom: 1px solid var(--c-borde);
        box-shadow: var(--sombra-2);
        display: none;
    }
    #menu-wrap.open .mc-nav { display: flex; }
    /* En el desplegable los enlaces se comportan como una lista: más grandes y
       sin subrayado (el acento de la página actual va en el fondo). */
    .mc-nav a { padding: 13px 12px; border-radius: var(--radio-s); font-size: 1.12rem; font-weight: var(--peso-base); }
    .mc-nav a::after { display: none; }
    .mc-nav a[aria-current="page"] { background: var(--seccion-suave); }
    .mc-cabecera-tema { margin-left: 0; }
    /* El texto y los accesos del mensaje de adopción, uno debajo del otro: en una
       sola columna los botones pegados al borde derecho quedan sueltos. */
    .mc-adopcion__pie { grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
    .mc-adopcion__pie .mc-flex { justify-content: flex-start; }
}

/* Móvil */
@media (max-width: 640px) {
    .mc-body { font-size: 16.5px; }
    .mc-rejilla-tarjetas, .mc-rejilla-tarjetas--destacada { grid-template-columns: 1fr; }
    /* El mosaico de fotos pasa a dos columnas: la pieza grande ocupa las dos y
       manda, y el resto se reparte en filas parejas. */
    .mc-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: clamp(84px, 26vw, 116px);
    }
    .mc-form { grid-template-columns: 1fr; }
    .mc-articulo__pie { grid-template-columns: 1fr; }
    .mc-footer__rejilla { grid-template-columns: 1fr; }
    .mc-portada__cifras { gap: var(--e-4); }
    .mc-consent { flex-direction: column; align-items: stretch; text-align: center; }
    .mc-anuncio ins { min-height: 250px; }
    .mc-marca__lema { display: none; }
    .mc-hero .mc-titulo-xl { max-width: none; }
    /* En el móvil el hero se acorta, las fotos de animal se achican y las
       fichas de dato aprietan su cifra. */
    .mc-hero { min-height: clamp(440px, 64vh, 560px); }
    .mc-hero__diapositiva { padding: 40px 0 76px; }
    .mc-hero__animales { padding: var(--e-4); }
    /* En el móvil no hay ratón: el montón se deshace y las cuatro fotos vuelven
       a la rejilla, todas a la vista y todas tocables. Los selectores llevan el
       mismo :nth-child(n) que las tarjetas del montón para poder ganarles por
       orden (si no, mandarían ellas, que son más específicas). */
    .mc-hero__animales ul {
        aspect-ratio: auto;
        max-width: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--e-2);
    }
    .mc-hero__animales li:nth-child(n) a {
        position: relative;
        left: auto;
        width: auto;
        z-index: auto;
        --giro: 0deg;
        --salto: 0px;
        --zoom: 1;
        transform: none;
        box-shadow: none;
    }
    .mc-hero__animales ul b { padding: 20px 9px 7px; font-size: .92rem; }
    .mc-hero__dato { padding: var(--e-3) var(--e-4); }
    .mc-hero__dato b { font-size: 1.45rem; }
    .mc-hero__enlaces a { padding: 8px 10px; }
    /* Las tablas anchas se desplazan en lugar de romper la página */
    .mc-articulo-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Por debajo de 400px la marca y los controles compiten: se aprieta el hueco */
@media (max-width: 400px) {
    .mc-header__bar { gap: var(--e-2); }
    .mc-marca__nombre { font-size: 1rem; }
    .mc-header .mc-tema { padding: 7px; }
}

/* ── §19 Galería ampliada ─────────────────────────────────────────────────
   El HTML NO está en la plantilla: lo crea public/js/widgets.js (clase
   «Galeria») al arrancar y lo cuelga del final del <body>. Por eso TODO su
   estilo tiene que vivir aquí: sin el «fixed» el visor aparece suelto al final
   de la página, con los tres iconos y el contador a la vista. */
.galeria-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;            /* por encima del header (60) y del aviso de cookies (90) */
    display: none;           /* cerrado: ni se ve ni ocupa sitio */
    align-items: center;
    justify-content: center;
    padding: 76px 84px;      /* deja libres las esquinas de los botones */
    background: rgba(10, 12, 9, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.galeria-overlay.abierta { display: flex; }

.galeria-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radio);
    box-shadow: var(--sombra-3);
    will-change: transform, opacity;   /* el widget desliza la foto con translateX */
}

/* La foto que abre el visor: la de los artículos y la del mosaico del inicio */
.galeria-img { cursor: zoom-in; }
/* ...y también se abre con el teclado (tabulador + Intro): marca el foco. */
.galeria-img:focus-visible {
    outline: 3px solid rgba(var(--c-acento-rgb), .55);
    outline-offset: 3px;
    border-radius: var(--radio-xs);
}
.mc-cabecera-articulo__imagen img.galeria-img,
.mc-articulo-body figure img.galeria-img {
    transition: transform var(--transicion), filter var(--transicion);
}
.mc-cabecera-articulo__imagen img.galeria-img:hover,
.mc-articulo-body figure img.galeria-img:hover { transform: scale(1.02); filter: brightness(1.04); }

/* Botones del visor: círculo translúcido, legible sobre cualquier foto */
.galeria-overlay button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radio-pastilla);
    background: rgba(255, 255, 255, .13);
    color: #fff;
    cursor: pointer;
    transition: background var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.galeria-overlay button svg { width: 22px; height: 22px; }
.galeria-overlay button:hover { background: rgba(var(--c-acento-rgb), .92); border-color: transparent; }
.galeria-overlay button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.galeria-cerrar { top: 16px; right: 16px; }
.galeria-before { left: 16px; top: 50%; transform: translateY(-50%); }
.galeria-after  { right: 16px; top: 50%; transform: translateY(-50%); }
.galeria-before:hover { transform: translateY(-50%) scale(1.08); }
.galeria-after:hover  { transform: translateY(-50%) scale(1.08); }

.galeria-contador {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: var(--radio-pastilla);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* Aparición suave del velo (el deslizamiento de la foto lo hace el widget) */
@media (prefers-reduced-motion: no-preference) {
    .galeria-overlay.abierta { animation: galeria-velo .2s ease-out; }
}
@keyframes galeria-velo { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 640px) {
    .galeria-overlay { padding: 68px 14px; }
    .galeria-overlay button { width: 42px; height: 42px; }
    .galeria-overlay button svg { width: 20px; height: 20px; }
    .galeria-cerrar { top: 12px; right: 12px; }
    .galeria-before { left: 6px; }
    .galeria-after  { right: 6px; }
    .galeria-contador { bottom: 14px; }
}

/* ── §20 Pie de página e impresión ──────────────────────────────────────── */
.mc-footer {
    background: var(--c-superficie);
    border-top: 1px solid var(--c-borde);
    padding: clamp(44px, 5vw, 64px) 0 26px;
}
.mc-footer__rejilla { display: grid; gap: clamp(26px, 3.5vw, 40px); grid-template-columns: 1.5fr 1fr 1fr; }
.mc-footer__titulo {
    font-size: .755rem;
    font-weight: var(--peso-fuerte);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--c-texto-3);
    margin-bottom: var(--e-4);
}
.mc-footer__enlaces { display: grid; gap: 10px; }
.mc-footer__enlaces a {
    display: inline-block;
    color: var(--c-texto-2);
    font-size: .94rem;
    transition: color var(--transicion), transform var(--transicion);
}
.mc-footer__enlaces a:hover { color: var(--c-acento); transform: translateX(3px); }
.mc-footer__nota { font-size: .92rem; color: var(--c-texto-2); max-width: 44ch; }
.mc-footer__nota a { text-decoration: underline; }
.mc-footer__base {
    margin-top: var(--e-6);
    padding-top: var(--e-5);
    border-top: 1px solid var(--c-borde);
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    flex-wrap: wrap;
    font-size: var(--t-menudo);
    color: var(--c-texto-3);
}
.mc-footer__base a { transition: color var(--transicion); }
.mc-footer__base a:hover { color: var(--c-acento); }

/* Publicidad: banda del pie con el botón «Quiero anunciar mi empresa aquí».
   El aviso («gracias por tu interés…») aparece aquí mismo, sin recargar: lo
   pinta el widget data-jx="anuncio" (public/js/widgets.js). La función de
   anunciarse todavía no está implementada, así que el botón solo registra el
   interés (POST /componente/anuncio). */
.mc-footer__anuncio {
    margin-top: var(--e-6);
    padding: var(--e-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4) var(--e-5);
    flex-wrap: wrap;
    border: 1px solid var(--c-borde);
    border-radius: var(--radio-l);
    background: var(--c-superficie-2);
}
.mc-footer__anuncio .mc-footer__titulo { margin-bottom: var(--e-2); }
.mc-footer__anuncio-accion { display: grid; gap: var(--e-3); justify-items: start; }
.mc-btn--anuncio[disabled] { opacity: .72; cursor: default; transform: none; }
.mc-btn--anuncio[disabled]:hover { transform: none; }
.mc-footer__aviso { font-size: .92rem; font-weight: var(--peso-medio); color: var(--c-acento); }

@media (max-width: 640px) {
    .mc-footer__anuncio-accion { justify-items: stretch; width: 100%; }
}


@media print {
    .mc-header, .mc-footer, .mc-anuncio, .mc-consent, .mc-aside,
    .mc-paginacion, .galeria-overlay { display: none !important; }
    .mc-body { background: #fff; color: #000; }
    /* El hero en papel: sin fotos ni velo (y el texto en negro, que sobre el
       papel el blanco desaparecería), con las tres diapositivas seguidas y los
       enlaces y las cifras como texto. */
    .mc-hero { min-height: 0; background: #fff; color: #000; }
    .mc-hero *, .mc-hero *::before, .mc-hero *::after {
        animation: none !important;
        transition: none !important;
    }
    .mc-hero__fondo, .mc-hero__velo, .mc-hero > nav,
    .mc-hero__retrato, .mc-hero__animales img { display: none; }
    .mc-hero .mc-etiqueta, .mc-hero .mc-titulo-xl, .mc-hero .mc-titulo,
    .mc-hero .mc-entradilla, .mc-hero__dato b, .mc-hero__dato span,
    .mc-hero__enlaces b, .mc-hero__enlaces span, .mc-hero__rotulo,
    .mc-hero__animales-pie, .mc-hero__animales b { color: #000; }
    .mc-hero__diapositiva {
        grid-area: auto; opacity: 1 !important; transform: none !important;
    }
    /* El montón se deshace en papel: sin fotos (que no se imprimen), cada
       tarjeta queda en su nombre, uno por línea, y el nombre —que en pantalla va
       sobre la foto— aquí es texto. */
    .mc-hero__animales ul { display: block; aspect-ratio: auto; max-width: none; }
    .mc-hero__animales li:nth-child(n) a {
        position: relative;
        left: auto;
        width: auto;
        --giro: 0deg;
        --salto: 0px;
        --zoom: 1;
        aspect-ratio: auto;
        transform: none;
        border: 0;
        box-shadow: none;
    }
    .mc-hero__animales b { position: static; padding: 0; background: none; }
    .mc-hero__animales-pie a { color: #000; border-color: #ccc; }
    .mc-hero__dato, .mc-hero__cristal, .mc-hero__animales, .mc-hero__enlaces a {
        border-color: #ccc; background: #fff; box-shadow: none;
        -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .mc-articulo { grid-template-columns: 1fr; padding: 0; }
    .mc-card, .mc-panel { box-shadow: none; border-color: #ccc; }
}