/**
 * Revista digital «Five Years» — page-magazine.php
 *
 * Todo cuelga de .mag y va en px: el tema define html { font-size: 62.5% }.
 * Paleta de la revista y del aniversario: teal #1c484b, crema #f4efe6,
 * coral #e2551f, menta #52caa4. Tipografía de la revista: Inter (texto) y
 * Newsreader (titulares), alojadas en el tema (la CSP bloquea Google Fonts).
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}
@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/stories/newsreader-var-latin.woff2") format("woff2");
}
@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/stories/newsreader-italic-var-latin.woff2") format("woff2");
}

.mag {
    --ink: #1c484b;
    --ink-deep: #0f2e30;
    --cream: #f4efe6;
    --paper: #fbf8f2;
    --coral: #e2551f;
    --mint: #52caa4;
    --gold: #e0b44c;
    --muted: #5a6b6a;
    --line: rgba(28, 72, 75, .14);
    --stage-1: #24595b;
    --stage-2: #133b3d;
    --stage-3: #0b2527;
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);

    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    font-feature-settings: "cv05" 1, "cv08" 1;
    -webkit-font-smoothing: antialiased;
}

:where(.mag) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.mag) :where(h1, h2, p, ol, li, figure) { margin: 0; padding: 0; }
:where(.mag) :where(ol) { list-style: none; }
:where(.mag) :where(a) { color: inherit; text-decoration: none; }
:where(.mag) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.mag) :where(img) { display: block; max-width: 100%; height: auto; }
.mag :focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.mag [hidden] { display: none !important; }
.mag .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mag-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .mag-wrap { padding-inline: 40px; } }

.mag-ico { flex-shrink: 0; }

/* ---------- Cabecera ---------- */

.mag-head { padding: 40px 0 44px; text-align: center; }
.mag-head__inner { display: flex; flex-direction: column; align-items: center; }

.mag-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-bottom: 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--muted);
    transition: color .2s var(--ease);
}
.mag-back:hover { color: var(--coral); }
.mag-back .mag-ico { width: 16px; height: 16px; }

.mag-kicker {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--coral);
}

.mag-title {
    margin-top: 14px;
    font-family: var(--serif);
    font-size: clamp(48px, 8vw, 104px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .26em;
    text-transform: uppercase;
    /* El tracking abre un hueco tras la última letra: se compensa. */
    margin-right: -.26em;
    color: var(--ink-deep);
}

.mag-sub {
    margin-top: 18px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(18px, 2vw, 22px);
    color: var(--ink);
}

.mag-intro {
    max-width: 60ch;
    margin-top: 16px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--muted);
}

.mag-head__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.mag-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 22px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.mag-btn:hover { transform: translateY(-1px); }
.mag-btn--solid { background: var(--ink); color: #fff; box-shadow: 0 8px 20px -10px rgba(15, 46, 48, .6); }
.mag-btn--solid:hover { background: var(--ink-deep); }
.mag-btn--ghost { border-color: rgba(28, 72, 75, .35); color: var(--ink); background: rgba(255, 255, 255, .5); }
.mag-btn--ghost:hover { border-color: var(--ink); background: #fff; }
.mag-btn__meta { font-size: 12px; font-weight: 500; color: var(--muted); }

/* ---------- Sala de lectura ---------- */

.mag-reader {
    position: relative;
    /* Contexto propio: nada del libro puede quedar por encima del menú del sitio. */
    isolation: isolate;
    z-index: 0;
    /* Sin barra de desplazamiento horizontal por la hoja que sale del libro. */
    overflow-x: clip;
    background:
        radial-gradient(ellipse 70% 60% at 50% 38%, var(--stage-1) 0%, var(--stage-2) 55%, var(--stage-3) 100%);
    color: #fff;
    scroll-margin-top: 70px;
}

.mag-stage {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(460px, calc(100svh - 150px), 1040px);
    padding: 34px 92px 54px;
    /* La hoja que se pasa nunca invade la cabecera ni la barra inferior
       (recorte arriba y abajo), pero a los lados puede llegar hasta el borde
       de la pantalla: en móvil la hoja gira hacia la izquierda del libro. */
    clip-path: inset(0 -100vw);
}

/* Sin filter: un filtro en el contenedor aplana el 3D y deforma el giro de
   las hojas. La sombra sobre la mesa va en cada página. */
.mag-book {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Antes de montar el libro (o sin JS) solo se ve la portada. */
.mag-book:not(.is-ready) { display: grid; place-items: center; }
.mag-book:not(.is-ready) .mag-page:not(.is-cover) { display: none; }
.mag-book:not(.is-ready) .mag-page.is-cover { height: 100%; aspect-ratio: 595 / 794; max-width: 100%; }

/* Libro cerrado (portada o contraportada en doble página): StPageFlip lo
   dibuja en una mitad; se centra y, al abrirse, se desliza a su sitio. */
.mag-book .stf__block { transition: transform .7s var(--ease); }
/* --mag-shift = media página (lo calcula magazine.js con el tamaño real). */
.mag.is-front .mag-book .stf__block { transform: translateX(calc(var(--mag-shift, 0px) * -1)); }
.mag.is-back .mag-book .stf__block { transform: translateX(var(--mag-shift, 0px)); }

.mag-page { overflow: hidden; background: var(--paper); box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .55), 0 4px 10px -4px rgba(0, 0, 0, .25); }
.mag-page img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* Lomo: sombra suave hacia el pliegue y brillo sutil en el borde exterior. */
.mag-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mag-page.--left::after  { background: linear-gradient(to left, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .05) 3.5%, transparent 9%, transparent 97%, rgba(255, 255, 255, .08) 100%); }
.mag-page.--right::after { background: linear-gradient(to right, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .05) 3.5%, transparent 9%, transparent 97%, rgba(255, 255, 255, .08) 100%); }

.mag-turn {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-top: -27px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.mag-turn .mag-ico { width: 24px; height: 24px; }
.mag-turn--prev { left: 24px; }
.mag-turn--next { right: 24px; }
.mag-turn:hover:not(:disabled) { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); transform: scale(1.06); }
.mag-turn:disabled { opacity: .25; cursor: default; }

.mag-hint {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    font-size: 12.5px;
    letter-spacing: .02em;
    white-space: nowrap;
    color: rgba(255, 255, 255, .62);
    transition: opacity .6s var(--ease);
}
.mag-hint.is-gone { opacity: 0; }
.mag-hint__touch { display: none; }
@media (hover: none), (max-width: 899px) {
    .mag-hint__desk { display: none; }
    .mag-hint__touch { display: inline; }
}

/* ---------- Barra inferior ---------- */

.mag-bar { background: var(--stage-3); border-top: 1px solid rgba(255, 255, 255, .08); }
.mag-bar__inner { display: flex; align-items: center; gap: 8px; min-height: 68px; }

.mag-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
    font-weight: 550;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}
.mag-tool:hover, .mag-tool[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: #fff; }
.mag-tool--label { padding: 0 14px; }

.mag-scrub { flex: 1; display: flex; align-items: center; gap: 16px; min-width: 0; padding: 0 8px; }
.mag-count {
    flex-shrink: 0;
    min-width: 150px;
    font-size: 13px;
    font-weight: 550;
    font-feature-settings: "tnum" 1;
    text-align: right;
    color: rgba(255, 255, 255, .75);
}

.mag-range {
    flex: 1;
    min-width: 0;
    height: 24px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    --fill: 0%;
}
.mag-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--mint) 0 var(--fill), rgba(255, 255, 255, .18) var(--fill) 100%);
}
.mag-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.mag-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--mint); }
.mag-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: 3px solid var(--stage-3);
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 0 1px var(--mint);
}
.mag-range::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid var(--stage-3); border-radius: 50%; background: var(--mint); }

/* Índice desplegable */
.mag-toc { padding: 8px 0 26px; border-top: 1px solid rgba(255, 255, 255, .08); }
.mag-toc__list { display: grid; gap: 2px 32px; padding-top: 10px; }
@media (min-width: 900px) { .mag-toc__list { grid-template-columns: 1fr 1fr; } }
.mag-toc a {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 14px 12px;
    border-radius: 10px;
    transition: background-color .2s var(--ease);
}
.mag-toc a:hover { background: rgba(255, 255, 255, .07); }
.mag-toc__n { font-family: var(--serif); font-size: 22px; color: color-mix(in srgb, var(--ch) 55%, #fff); }
.mag-toc__t { font-size: 14px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.mag-toc__t small { display: block; margin-top: 2px; font-family: var(--serif); font-size: 15px; font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .62); }
.mag-toc__p { font-size: 12.5px; font-feature-settings: "tnum" 1; color: rgba(255, 255, 255, .55); }

.mag-noscript { padding: 18px 20px 28px; text-align: center; color: rgba(255, 255, 255, .8); }
.mag-noscript a { color: var(--mint); text-decoration: underline; }

/* Pantalla completa: el libro ocupa todo el alto disponible. */
.mag-reader:fullscreen { display: flex; flex-direction: column; overflow: auto; }
.mag-reader:fullscreen .mag-stage { flex: 1; height: auto; min-height: 0; }

/* ---------- Capítulos ---------- */

.mag-chapters { padding: 72px 0 88px; background: var(--paper); }
.mag-chapters .mag-kicker { text-align: center; }
.mag-h2 {
    margin-top: 10px;
    font-family: var(--serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
    color: var(--ink-deep);
}
.mag-h2 em { font-style: italic; color: var(--coral); }

/* Siete capítulos en filas centradas (4 + 3 en escritorio, 3 + 3 + 1 en
   tablet, 2 + 2 + 2 + 1 en móvil): la fila incompleta queda en el medio y no
   deja un hueco a un lado. */
.mag-cards {
    --cols: 4;
    --gap-x: 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px var(--gap-x);
    max-width: 1080px;
    margin: 48px auto 0;
}
.mag-cards > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols)); min-width: 0; }
@media (max-width: 899px) { .mag-cards { --cols: 3; --gap-x: 22px; } }
@media (max-width: 599px) { .mag-cards { --cols: 2; --gap-x: 16px; gap: 30px var(--gap-x); } }
.mag-card { display: block; }
.mag-card img {
    width: 100%;
    aspect-ratio: 595 / 794;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 46, 48, .08), 0 14px 28px -18px rgba(15, 46, 48, .55);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mag-card:hover img { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(15, 46, 48, .1), 0 24px 40px -18px rgba(15, 46, 48, .6); }
.mag-card__body { display: block; padding-top: 16px; }
.mag-card__n { display: block; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; font-feature-settings: "tnum" 1; color: var(--ch); }
.mag-card__t { display: block; margin-top: 6px; font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--ink-deep); }
.mag-card__s { display: block; margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.4; color: var(--muted); }

/* ---------- Zoom ---------- */

.mag-zoom {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow: auto;
    background: rgba(8, 24, 25, .96);
    overscroll-behavior: contain;
}
.mag-zoom__pages { display: flex; justify-content: center; gap: 0; width: max-content; min-width: 100%; padding: 72px 24px 48px; }
.mag-zoom__pages img { width: min(1100px, 92vw); max-width: none; height: auto; background: var(--paper); box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.mag-zoom__pages.is-spread img { width: min(820px, 46vw); }
.mag-zoom__close {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.mag-zoom__close:hover { background: rgba(255, 255, 255, .24); }

/* ---------- Móvil ---------- */

@media (max-width: 899px) {
    .mag-head { padding: 28px 0 32px; }
    .mag-stage { height: clamp(420px, calc(100svh - 130px), 900px); padding: 18px 14px 46px; }
    .mag-turn { top: auto; bottom: 6px; width: 40px; height: 40px; margin-top: 0; }
    .mag-turn--prev { left: 12px; }
    .mag-turn--next { right: 12px; }
    .mag-turn .mag-ico { width: 20px; height: 20px; }
    .mag-hint { bottom: 16px; font-size: 11.5px; white-space: normal; width: calc(100% - 120px); text-align: center; }
    .mag-tool--label span { display: none; }
    /* La barra de páginas va en su propia fila, encima de las herramientas. */
    .mag-bar__inner { flex-wrap: wrap; justify-content: space-between; gap: 2px; padding-top: 10px; padding-bottom: 6px; }
    .mag-scrub { order: -1; flex: 1 1 100%; gap: 12px; padding: 0 6px; }
    .mag-count { min-width: 0; font-size: 12.5px; }
    .mag-zoom__pages.is-spread img, .mag-zoom__pages img { width: 160vw; }
}

@media (prefers-reduced-motion: reduce) {
    .mag-card img, .mag-btn, .mag-turn, .mag-book .stf__block { transition: none; }
}