/* ═══════════════════════════════════════════════════════
   CUSTOM CURSOR — Desktop only
   ═══════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {

    /* body.mde y no `*` a secas: el puntero se apaga solo en las paginas que
       llevan #cursor-dot y #cursor-ring para sustituirlo. /bio comparte esta
       hoja por el aviso de cookies pero tiene diseno propio y no los lleva,
       asi que ahi el `cursor: none` global dejaba la tarjeta sin puntero
       ninguno. */
    body.mde * {
        cursor: none !important;
    }

    /* El margen negativo centra la caja sobre su punto de anclaje, así el JS
       traslada a las coordenadas exactas del ratón (sin restar la mitad del
       tamaño) y el `scale` del hover crece desde el centro real.

       La posición va en la propiedad `translate`, NO en `transform`. El
       navegador compone la matriz en este orden: translate, rotate, scale y
       `transform` al final. Con la posición dentro de `transform` quedaba
       scale(s)·translate(x,y) — la escala multiplicaba las coordenadas y al
       pasar por un enlace el cursor salía disparado (x2.25 el punto, x1.5 el
       anillo). Con `translate` la escala crece desde el centro y no toca la
       posición. */
    #cursor-dot,
    #cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        translate: -100px -100px;
        will-change: translate, scale;

        /* El hover escala; antes animaba width/height/margin, que son
           propiedades de maquetación: cada paso de esos 150 ms forzaba un
           reflow mientras el cursor se estaba moviendo. */
        transition: scale .15s var(--ease, ease-out), opacity .15s ease-out;
    }

    /* --accent viene de mde.css y cambia con el tema; el color fijo es el de
       las páginas que aún no cargan ese sistema. El `mix-blend-mode: screen`
       que había aquí es lo que dejaba el puntero invisible en tema claro:
       cualquier color en modo screen sobre blanco da blanco. */
    #cursor-dot {
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        background: var(--accent, #38bdf8);
        z-index: 999999;
    }

    #cursor-ring {
        width: 32px;
        height: 32px;
        margin: -16px 0 0 -16px;
        border: 1.5px solid var(--accent, #38bdf8);
        z-index: 999998;
    }

    #cursor-dot.hover  { scale: 2.25; opacity: .6; }
    #cursor-ring.hover { scale: 1.5;  opacity: .35; }
}

@media (hover: none) or (pointer: coarse) {
    #cursor-dot,
    #cursor-ring {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSENTIMIENTO DE COOKIES
   ═══════════════════════════════════════════════════════════════════════
   Mismo lenguaje que el resto del sitio: filete de 1 px, un acento, mono
   sólo en el cintillo. Los valores van como var(--token, respaldo): las cuatro
   páginas cargan ya mde.css y siguen el tema; el respaldo oscuro sólo entra si
   alguna vez se sirve este aviso sin la hoja del sistema.

   Ya no es un modal a pantalla completa. El RGPD prohíbe los muros de
   cookies, y bloquear la página entera para exigir una decisión se le
   parece demasiado. Es un panel anclado abajo: se puede leer el sitio
   mientras se decide, y ninguna cookie no esencial se escribe hasta que
   haya respuesta.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens propios del aviso ──────────────────────────────────────────
   El fondo leia --surface directamente del sistema de la pagina, y eso solo
   funciona donde ese nombre significa lo mismo. En /bio --surface es un velo
   translucido del 4,5% pensado para ir ENCIMA del fondo, no una superficie
   opaca: el aviso salia transparente y el texto de la tarjeta se leia a
   traves. Ahora el aviso trae sus propios valores solidos y solo los cede
   al sistema en las paginas que lo tienen.

   --mdf-offset lo levanta del borde inferior donde ya vive algo fijo: en la
   tarjeta hay un dock con los botones de guardar y compartir. */
body.mde {
    --mdf-surface: var(--surface);
    --mdf-surface-2: var(--surface-2);
}

.mdf-bar {
    position: fixed;
    z-index: 99998;
    left: 0;
    right: 0;
    bottom: var(--mdf-offset, 0px);
    padding: clamp(.75rem, 2vw, 1.25rem);
    display: flex;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
    transition: opacity .32s cubic-bezier(.16, .84, .44, 1),
                transform .32s cubic-bezier(.16, .84, .44, 1);
}

.mdf-bar.is-open {
    opacity: 1;
    transform: none;
}

.mdf-bar[hidden] { display: none; }

/* El anillo de foco se dibuja aqui, sobre la caja con forma y con holgura
   para que no se pegue al filete. En .mdf-bar no puede ir: ese contenedor
   va de borde a borde del viewport y el anillo salia como una raya. */
.mdf-bar__card:focus-visible {
    outline: 2px solid var(--accent, #7d97fb);
    outline-offset: 3px;
}

.mdf-bar__card {
    pointer-events: auto;
    width: 100%;
    max-width: 60rem;
    display: grid;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1.125rem, 2.5vw, 1.5rem);
    border: 1px solid var(--line-2, #2b3548);
    border-radius: var(--r-lg, 1rem);
    background: var(--mdf-surface, #121826);
    box-shadow: var(--shadow-3, 0 24px 56px -20px rgba(0, 0, 0, .8));
    font-family: var(--font-body, inherit);
}

@media (min-width: 60rem) {
    .mdf-bar__card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

.mdf-bar__eyebrow {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent, #7d97fb);
}

.mdf-bar__eyebrow svg { width: .875rem; height: .875rem; flex-shrink: 0; }

.mdf-bar__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ink-2, #a3aec0);
    max-width: 68ch;
    text-wrap: pretty;
}

.mdf-bar__text a {
    color: var(--accent, #7d97fb);
    text-underline-offset: 3px;
}

.mdf-bar__text a:hover { color: var(--accent-hover, #9ab0ff); }

/* Aviso de Global Privacy Control */
.mdf-gpc {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .75rem 0 0;
    padding-top: .75rem;
    border-top: 1px solid var(--line, #1e2636);
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ink-3, #727e94);
}

.mdf-gpc svg {
    width: .9375rem;
    height: .9375rem;
    flex-shrink: 0;
    margin-top: .1875rem;
    color: var(--accent, #7d97fb);
}

/* ── Acciones ─────────────────────────────────────────────────────────
   Aceptar y rechazar comparten forma, tamaño y peso. El RGPD exige que
   rechazar cueste lo mismo que aceptar; antes rechazar era texto sin
   borde al lado de un botón sólido. */

.mdf-actions {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 30rem) {
    .mdf-actions {
        grid-template-columns: repeat(3, auto);
        align-items: center;
    }
}

.mdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    /* 44 px de alto: objetivo táctil completo */
    min-height: 2.75rem;
    padding: .625rem 1.25rem;
    border-radius: var(--r-sm, .5rem);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.mdf-btn:focus-visible {
    outline: 2px solid var(--accent, #7d97fb);
    outline-offset: 2px;
}

.mdf-btn--accept {
    background: var(--accent, #7d97fb);
    border-color: var(--accent, #7d97fb);
    color: var(--accent-ink, #060a13);
}

.mdf-btn--accept:hover {
    background: var(--accent-hover, #9ab0ff);
    border-color: var(--accent-hover, #9ab0ff);
}

.mdf-btn--reject {
    background: transparent;
    border-color: var(--line-2, #2b3548);
    color: var(--ink, #eef2f8);
}

.mdf-btn--reject:hover {
    background: var(--mdf-surface-2, #171e2e);
    border-color: var(--ink-3, #727e94);
}

/* Terciario de verdad: personalizar no es una de las dos respuestas. */
.mdf-btn--more {
    background: transparent;
    border-color: transparent;
    color: var(--ink-2, #a3aec0);
    text-decoration: underline;
    text-underline-offset: 3px;
    grid-column: 1 / -1;
}

@media (min-width: 30rem) {
    .mdf-btn--more { grid-column: auto; }
}

.mdf-btn--more:hover { color: var(--ink, #eef2f8); }

/* ── Panel de preferencias ────────────────────────────────────────────
   <dialog> nativo: la trampa de foco, el cierre con Esc y el fondo inerte
   los pone el navegador. Hacerlo a mano es como se cuelan los modales que
   atrapan el teclado. */

.mdf-prefs {
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(42rem, calc(100dvh - 2rem));
    padding: 0;
    border: 1px solid var(--line-2, #2b3548);
    border-radius: var(--r-lg, 1rem);
    background: var(--mdf-surface, #121826);
    color: var(--ink, #eef2f8);
    font-family: var(--font-body, inherit);
    box-shadow: var(--shadow-3, 0 24px 56px -20px rgba(0, 0, 0, .8));
    overflow: hidden;
}

.mdf-prefs::backdrop { background: rgba(10, 14, 23, .62); }

:root[data-theme="light"] .mdf-prefs::backdrop { background: rgba(15, 23, 42, .32); }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .mdf-prefs::backdrop { background: rgba(15, 23, 42, .32); }
}

.mdf-prefs__inner {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.mdf-prefs__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--line, #1e2636);
}

.mdf-prefs__title {
    margin: 0;
    font-family: var(--font-display, 'Inter Tight', 'Inter', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink, #eef2f8);
}

.mdf-prefs__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: -.25rem -.25rem 0 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm, .5rem);
    background: transparent;
    color: var(--ink-3, #727e94);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}

.mdf-prefs__close svg { width: 1rem; height: 1rem; }
.mdf-prefs__close:hover { color: var(--ink, #eef2f8); border-color: var(--line-2, #2b3548); }
.mdf-prefs__close:focus-visible { outline: 2px solid var(--accent, #7d97fb); outline-offset: 2px; }

.mdf-prefs__body {
    padding: 0 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mdf-group {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 0;
    border-bottom: 1px solid var(--line, #1e2636);
}

.mdf-group:last-child { border-bottom: 0; }

.mdf-group__label {
    margin: 0 0 .25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ink, #eef2f8);
}

.mdf-group__desc {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--ink-3, #727e94);
}

.mdf-group__tools {
    margin: .5rem 0 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-3, #727e94);
}

/* ── Interruptor ────────────────────────────────────────────────────── */

.mdf-switch { flex-shrink: 0; margin-top: .125rem; }

.mdf-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mdf-switch__track {
    display: block;
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--line-2, #2b3548);
    background: var(--mdf-surface-2, #171e2e);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.mdf-switch__track::after {
    content: "";
    position: absolute;
    top: 50%;
    left: .1875rem;
    width: 1rem;
    height: 1rem;
    margin-top: -.5rem;
    border-radius: 999px;
    background: var(--ink-3, #727e94);
    transition: translate .2s cubic-bezier(.16, .84, .44, 1), background-color .2s ease;
}

.mdf-switch input:checked + .mdf-switch__track {
    background: var(--accent, #7d97fb);
    border-color: var(--accent, #7d97fb);
}

.mdf-switch input:checked + .mdf-switch__track::after {
    translate: 1.1875rem 0;
    background: var(--accent-ink, #060a13);
}

.mdf-switch input:focus-visible + .mdf-switch__track {
    outline: 2px solid var(--accent, #7d97fb);
    outline-offset: 2px;
}

.mdf-switch input:disabled + .mdf-switch__track {
    opacity: .55;
    cursor: not-allowed;
}

.mdf-prefs__foot {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
    padding: 1.125rem 1.25rem;
    border-top: 1px solid var(--line, #1e2636);
    background: var(--bg-alt, #0d121d);
}

.mdf-prefs__note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--ink-3, #727e94);
}

@media (prefers-reduced-motion: reduce) {
    .mdf-bar,
    .mdf-btn,
    .mdf-switch__track,
    .mdf-switch__track::after { transition: none; }
}

/* Reapertura desde el pie. Es un <button> y no un <a> porque abre un diálogo,
   no navega; hereda tipografía y color del pie donde vive, así funciona igual
   en las cuatro páginas del sitio. */
.mdf-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mdf-link:hover { color: var(--accent, #7d97fb); }

.mdf-link:focus-visible {
    outline: 2px solid var(--accent, #7d97fb);
    outline-offset: 2px;
    border-radius: 2px;
}