/* Reglas que antes iban dentro de un <style> en cada página.
 *
 * Están aquí por un motivo: un bloque <style> en línea obliga a permitir
 * 'unsafe-inline' en la CSP, y un fichero no. Moviéndolas, la política puede
 * cerrarse del todo.
 *
 * El ORDEN importa: este fichero se enlaza DESPUÉS del resto de hojas, igual que
 * iba el bloque en línea, para no alterar la cascada. Si se añaden reglas nuevas
 * aquí, comprobar que no pisen lo de search.css o juegos.css. */

/* Botón de libro de prueba del panel de desarrollo (Portadas, Emojis y Citas). */
.test-book-button{display:block;margin:13px auto 0;border:0;background:transparent;color:#72766c;font:500 10px 'DM Mono',monospace;letter-spacing:.4px;cursor:pointer}
.test-book-button:hover{color:#ec7459}

/* Portadas: el rótulo de la cabecera (el dibujo del libro abierto) no usa el fondo
   ni el recorte de marcador del resto de la web. */
.brand-mark.cover-mark{background:transparent;color:var(--coral);clip-path:none}
.brand-mark.cover-mark svg{width:24px;height:24px}

/* Pie de página: enlaces legales, con la tipografía menuda del sitio (DM Mono,
   como .eyebrow y .mini-label) y el mismo gris del resto del pie. */
/* Heredan tipografía y color del pie en el que estén: en la portada de juegos la
   paleta es añil y en el resto cálida, así que fijar un gris aquí hacía que
   desentonaran justo ahí. El hover usa el color de acento de la página. */
.footer-legal{display:flex;gap:16px;align-items:center;margin-left:auto}
.footer-legal a,.footer-legal button{font:inherit;letter-spacing:.8px;color:inherit;opacity:.85;background:transparent;border:0;padding:0;cursor:pointer;text-decoration:none;transition:color .2s,opacity .2s}
.footer-legal a:hover,.footer-legal button:hover{color:var(--coral);opacity:1;text-decoration:underline}
.footer-legal a:focus-visible,.footer-legal button:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* Aviso de consentimiento: se monta desde consent.js, sin HTML en línea.
   Mismo papel, mismo coral y los mismos dos botones que el resto de la web:
   el principal como `.primary-action` (con su barrido de brillo) y el otro como
   `.skip-button`. Sin colores fijos: usa las variables, así que cambia con el tema. */
.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -12px 28px #544c3b0b;padding:18px 28px;display:grid;grid-template-columns:1fr auto;gap:7px 24px;align-items:center}
.consent-banner h2{grid-column:1;font:700 19px/1.1 Fraunces,serif;letter-spacing:-.9px;color:var(--ink);margin:0}
.consent-banner p{grid-column:1;font-size:13px;line-height:1.6;color:color-mix(in srgb,var(--ink) 82%,var(--card));margin:0;max-width:720px}
.consent-actions{grid-column:2;grid-row:1 / span 2;display:flex;gap:9px;flex-wrap:wrap}
.consent-accept{position:relative;overflow:hidden;border:0;border-radius:8px;background:var(--coral);color:var(--sobre-coral,#fff);font:800 13px Manrope,sans-serif;padding:12px 20px;cursor:pointer}
.consent-accept::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-25deg);transition:.6s ease-in-out;pointer-events:none}
.consent-accept:hover{background:color-mix(in srgb,var(--coral) 90%,var(--sobre-coral,#fff))}
.consent-accept:hover::after{left:150%}
.consent-reject{border:1px solid var(--line);border-radius:8px;background:transparent;color:color-mix(in srgb,var(--ink) 82%,var(--card));font:600 13px Manrope,sans-serif;padding:12px 18px;cursor:pointer;transition:background .2s,color .2s}
.consent-reject:hover{background:var(--line);color:var(--ink)}
.consent-banner > a{grid-column:1 / span 2;justify-self:start;font:500 10px/1 'DM Mono',monospace;letter-spacing:1.2px;color:color-mix(in srgb,var(--ink) 70%,var(--card));text-decoration:none;transition:color .2s}
.consent-banner > a:hover{color:var(--coral)}
@media(max-width:620px){.consent-banner{grid-template-columns:1fr;padding:16px 20px}.consent-actions{grid-column:1;grid-row:auto}}
.opt-nota{font-size:12px;color:var(--muted);margin:0 0 10px}

/* optimizacion.html: documento interno. */
.opt-main{max-width:820px;margin:0 auto;padding:34px 22px 70px}
.opt-main h1{font:700 clamp(30px,4.6vw,46px)/1.02 Fraunces,Georgia,serif;letter-spacing:-1.6px;margin:0 0 12px}
.opt-main h2{font:700 24px/1.2 Fraunces,Georgia,serif;margin:46px 0 8px;padding-top:16px;border-top:1px solid var(--line)}
.opt-main h3{font:600 16px/1.3 Manrope,system-ui,sans-serif;margin:22px 0 6px}
.opt-main p,.opt-main li{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 8px}
.opt-main ul{margin:0 0 10px;padding-left:20px}
.opt-main li{margin-bottom:6px}
.opt-main code{font:500 12.5px/1.4 ui-monospace,Consolas,monospace;background:color-mix(in srgb,var(--ink) 7%,var(--card));padding:1px 5px;border-radius:4px;color:var(--ink)}
.opt-flag{display:inline-block;font:600 10px/1 ui-monospace,Consolas,monospace;letter-spacing:1.2px;padding:5px 8px;border-radius:20px;margin-bottom:10px;background:var(--coral);color:var(--sobre-coral,#fff)}
.opt-flag.pending{background:transparent;color:var(--ink);border:1px solid var(--line)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--card);color:var(--ink);padding:10px 14px;z-index:10}
.skip-link:focus{left:8px;top:8px}