/* ==================================================================
   Manual Práctico de Extranjería · web pública (www.manualextranjeria.com)
   Tema por defecto "noche", el de la cubierta del Manual: azul
   noche texturizado, oro ámbar y la banda de siluetas caminantes.
   Tema claro "papel" con tinta azul y oro. Letra Spectral, una
   serifa humanista como la de la cubierta, alojada en la propia web.
   ================================================================== */
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/spectral-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/spectral-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/spectral-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/spectral-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/spectral-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/spectral-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/spectral-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/spectral-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-style: italic; font-display: swap; font-weight: 400; src: url('../fonts/spectral-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Spectral'; font-style: italic; font-display: swap; font-weight: 400; src: url('../fonts/spectral-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Tema "noche" (por defecto, el de la cubierta del Manual) y tema "papel" (claro). */
:root {
  color-scheme: light;
  --papel: #F5F1E8; --papel-2: #ECE6DA; --papel-3: #E1D8C7; --blanco: #FFFDF8;
  --tinta: #0F1A2C; --tinta-2: #3B4658; --tinta-3: #6B7486; --linea: #D9D1C1; --linea-suave: #E7E0D2;
  --acento: #13223B; --acento-2: #1D3254; --acento-tinta: #F6EFE2; --acento-suave: #E1E6EE;
  --rojo: #C3202A; --rojo-2: #A3171F; --rojo-suave: #F6DEDB;
  --oro: #A36A15; --oro-2: #E19A2F; --oro-suave: #F3E6CC; --oro-cubierta: #E19A2F;
  --noche: #0C1628; --noche-2: #111F36; --noche-3: #182A47; --marfil: #F3EBDD; --neutro: #8FA0BC;
  --verde: #2F6B4F;
  --cab: rgba(245, 241, 232, 0.86);
  --sombra: 0 1px 2px rgba(15, 26, 44, 0.06), 0 18px 40px -24px rgba(15, 26, 44, 0.35);
  --display: 'Spectral', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'PingFang SC', 'Microsoft YaHei', Georgia, serif;
  --texto: 'Spectral', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', Georgia, serif;
  --radio: 14px;
  --ancho: 76rem;
  --textura: url('../img/textura-noche.webp');
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.22 0 0 0 0 0.3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root[data-tema='auto'] {
    color-scheme: dark;
    --papel: #0C1628; --papel-2: #111F36; --papel-3: #182A47; --blanco: #12213A;
    --tinta: #F3EBDD; --tinta-2: #C5CCDA; --tinta-3: #8FA0BC; --linea: #233658; --linea-suave: #1A2B47;
    --acento: #E19A2F; --acento-2: #F0B455; --acento-tinta: #0C1628; --acento-suave: #2D2616;
    --rojo: #E0464C; --rojo-2: #EC6267; --rojo-suave: #3A1A22; --oro: #E19A2F; --oro-2: #F0B455; --oro-suave: #2D2616;
    --cab: rgba(12, 22, 40, 0.86); --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.85);
    --grano: var(--textura);
  }
}
:root[data-tema='oscuro'] {
  color-scheme: dark;
  --papel: #0C1628; --papel-2: #111F36; --papel-3: #182A47; --blanco: #12213A;
  --tinta: #F3EBDD; --tinta-2: #C5CCDA; --tinta-3: #8FA0BC; --linea: #233658; --linea-suave: #1A2B47;
  --acento: #E19A2F; --acento-2: #F0B455; --acento-tinta: #0C1628; --acento-suave: #2D2616;
  --rojo: #E0464C; --rojo-2: #EC6267; --rojo-suave: #3A1A22; --oro: #E19A2F; --oro-2: #F0B455; --oro-suave: #2D2616;
  --cab: rgba(12, 22, 40, 0.86); --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -24px rgba(0, 0, 0, 0.85);
  --grano: var(--textura);
}

/* ------------------------------ base ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--papel); background-image: var(--grano); color: var(--tinta);
  font-family: var(--texto); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.lang-zh { line-height: 1.85; }
img { max-width: 100%; display: block; }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.1; margin: 0 0 0.5em; letter-spacing: 0; }
body.lang-zh h1, body.lang-zh h2, body.lang-zh h3 { line-height: 1.3; letter-spacing: 0.02em; font-weight: 700; }
p { margin: 0 0 1em; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(185, 138, 46, 0.32); }
.oculto-visual { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--rojo); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 700; }
.saltar:focus-visible { left: 0; }
main { display: block; outline: none; }
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.contenedor.estrecho { width: min(100% - 2.5rem, 50rem); }
.seccion { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }

.antetitulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: 0 0 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--oro); }
.antetitulo span + span::before { content: ''; display: inline-block; width: 22px; height: 1px; margin-right: 14px; vertical-align: middle; background: currentColor; opacity: 0.6; }
.antetitulo::before { content: ''; width: 34px; height: 1px; background: currentColor; }
body.lang-zh .antetitulo { letter-spacing: 0.3em; }
.antetitulo.claro { color: var(--oro-2); }
.titulo-seccion { font-size: clamp(2rem, 4.2vw, 3.3rem); color: var(--tinta); max-width: 20ch; }
.sub-seccion { font-size: 1.12rem; color: var(--tinta-2); max-width: 44rem; }
.cabeza-seccion { margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }

/* sello rojo (印章) */
.sello {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 6px;
  background: var(--rojo); color: #FBEFD8; font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif; font-weight: 700;
  font-size: 17px; line-height: 1; writing-mode: vertical-rl; letter-spacing: 0.06em; transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), 0 6px 18px -8px rgba(179, 18, 27, 0.7);
}
.sello.grande { width: 92px; height: 92px; font-size: 34px; border-radius: 10px; }

/* ----------------------------- botones ---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.25s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
.btn-rojo { background: var(--acento); color: var(--acento-tinta); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--acento) 70%, transparent); }
.btn-rojo:hover { background: var(--acento-2); }
.btn-oro { background: linear-gradient(120deg, #E7C477, #C9973C); color: #1E1306; box-shadow: 0 14px 30px -14px rgba(201, 151, 60, 0.8); }
.btn-oro:hover { filter: brightness(1.06); }
.btn-linea { background: transparent; color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 35%, transparent); }
.btn-linea:hover { border-color: var(--tinta); background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.btn-linea.claro { color: var(--marfil); border-color: rgba(242, 234, 216, 0.4); }
.btn-linea.claro:hover { border-color: var(--marfil); background: rgba(242, 234, 216, 0.06); }
.btn-texto { background: none; color: var(--tinta-2); padding: 0 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.btn-texto:hover { color: var(--acento); transform: none; }
.btn-peq { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn.ancho { width: 100%; }
.btn[aria-busy='true'] { opacity: 0.7; pointer-events: none; }

/* ----------------------------- cabecera --------------------------- */
.cab { position: sticky; top: 0; z-index: 100; transition: background 0.3s, box-shadow 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.cab.fijada, body:not(.inicio) .cab { background: var(--cab); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--linea-suave); }
.cab-in { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.marca { display: inline-flex; align-items: center; gap: 12px; color: var(--tinta); text-decoration: none; flex: none; }
.marca img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(179, 18, 27, 0.18)); }
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca-txt b { font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', var(--display); font-size: 19px; letter-spacing: 0.16em; font-weight: 500; }
.marca-txt small { font-family: var(--display); font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--tinta-3); margin-top: 3px; font-weight: 600; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.nav ul a { display: block; padding: 8px 12px; border-radius: 999px; color: var(--tinta-2); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color 0.2s, background 0.2s; }
.nav ul a:hover, .nav ul a[aria-current='page'] { color: var(--tinta); background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.nav-extra { display: flex; align-items: center; gap: 10px; }
.idiomas { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--linea); }
.idiomas a { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--tinta-3); text-decoration: none; }
.idiomas a[aria-current='true'] { background: var(--tinta); color: var(--papel); }
.tema-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--linea); background: transparent; color: var(--tinta-2); cursor: pointer; }
.tema-btn:hover { color: var(--tinta); border-color: var(--tinta-3); }
.tema-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tema-btn .i-luna { display: none; }
:root[data-tema='oscuro'] .tema-btn .i-sol { display: none; }
:root[data-tema='oscuro'] .tema-btn .i-luna { display: block; }
@media (prefers-color-scheme: dark) { :root[data-tema='auto'] .tema-btn .i-sol { display: none; } :root[data-tema='auto'] .tema-btn .i-luna { display: block; } }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; cursor: pointer; place-items: center; }
.menu-lineas, .menu-lineas::before, .menu-lineas::after { display: block; width: 18px; height: 2px; background: var(--tinta); border-radius: 2px; transition: transform 0.25s, background 0.25s; position: relative; }
.menu-lineas::before, .menu-lineas::after { content: ''; position: absolute; left: 0; }
.menu-lineas::before { top: -6px; } .menu-lineas::after { top: 6px; }
.menu-btn[aria-expanded='true'] .menu-lineas { background: transparent; }
.menu-btn[aria-expanded='true'] .menu-lineas::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded='true'] .menu-lineas::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------ héroe ----------------------------- */
.heroe { position: relative; min-height: min(100vh, 940px); display: flex; align-items: center; margin-top: -77px; padding: 120px 0 clamp(150px, 17vw, 250px); overflow: hidden; color: var(--marfil);
  background: radial-gradient(900px 520px at 78% 30%, rgba(40, 64, 104, 0.55), transparent 62%), var(--textura) 0 0 / 512px, linear-gradient(180deg, #0C1628 0%, #101E34 55%, #0F1A2C 100%); }
.heroe-fondo { position: absolute; inset: 0; pointer-events: none; }
.heroe-sol { position: absolute; right: -6vw; top: 50%; width: min(62vw, 760px); aspect-ratio: 1; transform: translateY(-52%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(225, 154, 47, 0.16), rgba(225, 154, 47, 0.05) 55%, transparent 70%); }
.heroe-globo { position: absolute; right: -2vw; top: 50%; width: min(54vw, 660px); height: min(54vw, 660px); transform: translateY(-52%); color: #E19A2F; opacity: 0.16; animation: girar-lento 120s linear infinite; }
.heroe-banda { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 17vw, 250px); background: url('../img/siluetas-banda.webp') center bottom / auto 100% repeat-x; opacity: 0.92; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%); }
.heroe-vertical { display: none; position: absolute; left: max(10px, calc((100vw - var(--ancho)) / 2 - 90px)); top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif; font-size: clamp(60px, 9vw, 130px); font-weight: 700; letter-spacing: 0.12em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--oro) 40%, transparent); opacity: 0.55; }
.heroe-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.heroe-titulo { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1.04; margin: 0 0 28px; color: var(--marfil); letter-spacing: -0.012em; font-weight: 400; }
.heroe-titulo span { display: block; }
.heroe-titulo em { display: block; font-style: normal; font-weight: 500; color: var(--oro-cubierta); }
body.lang-zh .heroe-titulo { font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: 1.2; letter-spacing: 0.04em; font-weight: 700; }
body.lang-zh .heroe-titulo em { font-style: normal; }
.heroe-lema { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: #C5CCDA; max-width: 34rem; margin-bottom: 34px; }
.heroe-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }
.heroe-datos { display: flex; flex-wrap: wrap; gap: 0; margin: 0; border-top: 1px solid rgba(225, 154, 47, 0.3); padding-top: 20px; max-width: 34rem; }
.heroe-datos div { flex: 1 1 0; min-width: 120px; padding-right: 18px; }
.heroe-datos div + div { border-left: 1px solid rgba(225, 154, 47, 0.3); padding-left: 18px; }
.heroe-datos dt { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #8FA0BC; font-weight: 700; }
.heroe-datos dd { margin: 4px 0 0; font-family: var(--display); font-size: 21px; font-weight: 500; color: #F0B455; letter-spacing: 0; }
.heroe-libro { position: relative; display: grid; place-items: center; perspective: 1600px; }
.libro3d { position: relative; width: min(340px, 72vw); aspect-ratio: 0.708; transform-style: preserve-3d; transform: rotateY(-26deg) rotateX(6deg); transition: transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.libro3d-tapa { position: absolute; inset: 0; transform: translateZ(18px); border-radius: 3px 8px 8px 3px; box-shadow: 30px 40px 70px -30px rgba(6, 10, 20, 0.7); }
.libro3d-tapa .cubierta { height: 100%; }
.libro3d-lomo { position: absolute; top: 0; bottom: 0; left: 0; width: 36px; transform-origin: left center; transform: rotateY(-90deg) translateX(-18px) translateZ(0); background: #0C1628 center / 100% 100% no-repeat; border-radius: 3px 0 0 3px; box-shadow: inset -6px 0 10px -6px rgba(0, 0, 0, 0.6); }
.libro3d-lomo span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-size: 13px; letter-spacing: 0.14em; color: #D9A94E; white-space: nowrap; overflow: hidden; max-height: 92%; }
.libro3d-hojas { position: absolute; top: 6px; bottom: 6px; right: 0; width: 34px; transform-origin: right center; transform: rotateY(90deg) translateX(17px); background: repeating-linear-gradient(90deg, #F4EEE2 0 2px, #E3D9C7 2px 3px); }
.libro3d::after { content: ''; position: absolute; left: 8%; right: -6%; bottom: -9%; height: 10%; background: radial-gradient(closest-side, rgba(10, 14, 24, 0.35), transparent); transform: translateZ(-40px) rotateX(90deg); filter: blur(6px); }
.heroe-etiqueta { position: absolute; left: 0; bottom: 4%; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(12, 22, 40, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8); border: 1px solid rgba(225, 154, 47, 0.35); font-size: 13px; color: #C5CCDA; }
.heroe-etiqueta .sello { width: 36px; height: 36px; font-size: 13px; }
.heroe-etiqueta b { display: block; color: #F0B455; font-size: 14px; }
.heroe-bajar { position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(243, 235, 221, 0.35); color: #F3EBDD; background: rgba(12, 22, 40, 0.4); animation: flotar 2.6s ease-in-out infinite; }
.heroe-bajar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ------------------------------ cinta ----------------------------- */
.cinta { background: var(--noche); color: var(--oro-2); overflow: hidden; border-block: 1px solid rgba(217, 169, 78, 0.25); }
:root[data-tema='oscuro'] .cinta { background: #0A111D; }
.cinta-pista { display: flex; width: max-content; gap: 28px; padding: 16px 0; animation: desfilar 46s linear infinite; font-family: var(--display); font-size: 19px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.cinta-pista [lang^='zh'] { font-style: normal; letter-spacing: 0.2em; font-size: 19px; color: var(--marfil); }
.cinta-pista i { font-style: normal; color: #E19A2F; font-size: 12px; align-self: center; }

/* ---------------------------- editorial --------------------------- */
.ed-rejilla { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ed-cabeza { position: sticky; top: 110px; }
.ed-cabeza .sello { margin-top: 26px; }
.capitular { font-size: 1.22rem; color: var(--tinta); }
.capitular::first-letter { float: left; font-family: var(--display); font-size: 4.6em; line-height: 0.82; padding: 6px 12px 0 0; color: var(--oro); font-weight: 400; }
body.lang-zh .capitular::first-letter { font-size: 3.2em; line-height: 1; }
.ed-texto p { color: var(--tinta-2); }
.ed-texto .capitular { color: var(--tinta); }
.principios { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea); }
.principios li { display: flex; gap: 16px; padding: 22px 18px 22px 0; border-bottom: 1px solid var(--linea); }
.principios li:nth-child(odd) { border-right: 1px solid var(--linea); }
.principios li:nth-child(even) { padding-left: 22px; }
.principios b { font-family: var(--display); font-size: 28px; line-height: 1; color: var(--oro); font-weight: 500; }
.principios strong { display: block; font-family: var(--display); font-size: 19px; font-weight: 500; margin-bottom: 4px; color: var(--tinta); letter-spacing: 0; }
.principios span { font-size: 15px; color: var(--tinta-2); line-height: 1.55; }

/* ------------------------- sección oscura ------------------------- */
.oscura { background: var(--textura) 0 0 / 512px, linear-gradient(180deg, #0C1628, #101E34); color: var(--marfil); overflow: hidden; }
.oscura::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 500px at 85% 0%, rgba(40, 64, 104, 0.55), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(225, 154, 47, 0.08), transparent 60%); pointer-events: none; }
:root[data-tema='oscuro'] .oscura { background: #0A111D; }
.oscura .contenedor { position: relative; z-index: 1; }
.destacada-siluetas { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 12vw, 170px); background: url('../img/siluetas-banda.webp') center bottom / auto 100% repeat-x; opacity: 0.35; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
.destacada-siluetas svg { width: 100%; height: 100%; }
.obra-rejilla { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.obra-cubierta { max-width: 380px; width: 100%; justify-self: center; }
.obra-ediciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.edicion { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid rgba(217, 169, 78, 0.28); border-radius: 12px; font-size: 13px; color: var(--neutro); }
.ed-idioma { font-family: var(--display); font-size: 18px; color: var(--oro-2); font-weight: 600; margin-bottom: 4px; }
.obra-titulo { font-size: clamp(2.2rem, 4.4vw, 3.6rem); color: #F0B455; letter-spacing: -0.012em; }
.obra-titulo small { display: block; font-size: 0.46em; font-style: normal; font-weight: 600; color: var(--marfil); margin-top: 12px; letter-spacing: 0; }
body.lang-zh .obra-titulo small { font-style: normal; letter-spacing: 0.2em; }
.obra-lema { font-size: 1.12rem; color: #C9D2E2; max-width: 40rem; }
.obra-autores { display: flex; flex-direction: column; gap: 2px; margin: 26px 0; }
.obra-autores span { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--neutro); font-weight: 700; }
.obra-autores b { font-family: var(--display); font-size: 21px; font-weight: 500; color: var(--marfil); letter-spacing: 0; }
.indice-obra { border-block: 1px solid rgba(217, 169, 78, 0.25); margin-bottom: 30px; }
.indice-obra summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: 21px; font-weight: 500; color: var(--oro-2); }
.indice-obra summary::-webkit-details-marker { display: none; }
.indice-obra summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.25s; }
.indice-obra[open] summary svg { transform: rotate(180deg); }
.indice-obra ol { list-style: none; margin: 0 0 12px; padding: 0; columns: 2; column-gap: 34px; }
.indice-obra li { display: flex; gap: 12px; padding: 7px 0; break-inside: avoid; font-size: 15px; color: #D5DCE8; line-height: 1.45; }
.indice-obra li b { font-family: var(--display); color: var(--oro-2); font-size: 18px; min-width: 22px; }
.anexos { font-size: 14px; color: var(--neutro); }
.obra-acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.citas { position: relative; margin-top: clamp(3.5rem, 7vw, 5.5rem); padding: clamp(2rem, 4vw, 3rem) 0 30px; text-align: center; border-top: 1px solid rgba(217, 169, 78, 0.2); min-height: 260px; }
.cita { position: absolute; inset: clamp(2rem, 4vw, 3rem) 0 auto; margin: 0 auto; max-width: 52rem; opacity: 0; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s; pointer-events: none; }
.cita.activa { opacity: 1; transform: none; position: relative; inset: auto; pointer-events: auto; }
.cita blockquote { margin: 0 0 22px; font-family: var(--display); font-size: clamp(1.4rem, 2.7vw, 2.1rem); font-weight: 500; letter-spacing: 0; line-height: 1.25; color: var(--marfil); }
.cita blockquote::before { content: '“'; display: block; font-size: 2.6em; line-height: 0.6; color: #E19A2F; font-style: normal; }
body.lang-zh .cita blockquote { font-style: normal; letter-spacing: 0.04em; line-height: 1.6; }
.cita figcaption b { display: block; font-family: var(--display); font-size: 20px; color: var(--oro-2); }
.cita figcaption span { font-size: 14px; color: var(--neutro); }
.citas-puntos { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.citas-puntos button { width: 34px; height: 4px; border-radius: 4px; border: 0; background: rgba(242, 234, 216, 0.22); cursor: pointer; padding: 0; transition: background 0.3s, width 0.3s; }
.citas-puntos button[aria-selected='true'] { background: var(--oro-2); width: 54px; }

/* ----------------------------- catálogo --------------------------- */
.estante-obras { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); }
.obra-tarjeta { display: flex; flex-direction: column; gap: 16px; }
.obra-enlace { position: relative; display: block; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.obra-enlace .cubierta { box-shadow: 0 22px 40px -26px rgba(26, 22, 17, 0.6), inset 4px 0 6px -3px rgba(0, 0, 0, 0.35); transition: box-shadow 0.35s; }
.obra-enlace:hover { transform: translateY(-8px) rotate(-1deg); }
.obra-enlace:hover .cubierta { box-shadow: 0 34px 50px -26px rgba(26, 22, 17, 0.7), inset 4px 0 6px -3px rgba(0, 0, 0, 0.35); }
.cinta-obra { position: absolute; top: 14px; right: -6px; z-index: 5; padding: 5px 12px; background: var(--rojo); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 3px 0 0 3px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5); }
.cinta-obra::after { content: ''; position: absolute; right: 0; bottom: -6px; border-left: 6px solid #6A0910; border-bottom: 6px solid transparent; }
.cinta-obra.proxima { background: var(--oro); color: #1E1306; }
.cinta-obra.proxima::after { border-left-color: #7A5A16; }
.obra-info h3 { font-size: 22px; margin: 0 0 4px; line-height: 1.15; }
.obra-info h3 a { color: var(--tinta); text-decoration: none; }
.obra-info h3 a:hover { color: var(--oro); }
.obra-autor { font-size: 14px; color: var(--tinta-3); margin: 0 0 8px; }
.obra-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.obra-meta span { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--papel-2); color: var(--tinta-2); }
.obra-meta .gratis { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); }
:root[data-tema='oscuro'] .obra-meta .gratis { color: #7FD1A6; }
.obra-meta .cuenta-atras { background: var(--oro-suave); color: var(--oro); }
.proxima-vacia .cubierta { aspect-ratio: 0.708; }

/* ---------------------------- biblioteca -------------------------- */
.biblioteca { background: linear-gradient(180deg, transparent, var(--papel-2) 30%, var(--papel-2) 70%, transparent); }
.bib-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.rasgos { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.rasgos li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--tinta-2); }
.rasgos svg { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--blanco); border: 1px solid var(--linea); fill: none; stroke: var(--oro); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bib-maqueta { position: relative; min-height: 400px; }
.pantalla { position: relative; border-radius: 16px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); overflow: hidden; transform: rotate(-1.5deg); }
.pantalla-barra { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--linea-suave); font-size: 12px; color: var(--tinta-3); font-weight: 600; }
.pantalla-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--papel-3); }
.pantalla-barra i:first-child { background: #E2726B; } .pantalla-barra i:nth-child(2) { background: #E7C477; } .pantalla-barra i:nth-child(3) { background: #8CC59F; }
.pantalla-barra span { margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pantalla-cuerpo { display: grid; grid-template-columns: 120px 1fr; min-height: 330px; }
.pantalla-indice { padding: 18px 14px; border-right: 1px solid var(--linea-suave); display: flex; flex-direction: column; gap: 12px; }
.pantalla-indice b { height: 8px; border-radius: 4px; background: var(--papel-3); }
.pantalla-indice b:nth-child(even) { width: 70%; margin-left: 12px; }
.pantalla-indice b.activo { background: var(--oro-2); opacity: 0.9; }
.pantalla-pagina { position: relative; margin: 22px auto; width: 72%; padding: 26px 24px; background: #FFFDF8; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; gap: 11px; border-radius: 3px; }
:root[data-tema='oscuro'] .pantalla-pagina { background: #F7F2E8; }
.linea { display: block; height: 7px; border-radius: 3px; background: #D7CDBB; }
.linea.l100 { width: 100%; } .linea.l95 { width: 95%; } .linea.l90 { width: 90%; } .linea.l85 { width: 85%; } .linea.l80 { width: 80%; } .linea.l70 { width: 70%; } .linea.l60 { width: 60%; }
.linea.marca-amarilla { box-shadow: 0 0 0 4px rgba(255, 214, 82, 0.55); background: #C9B98E; }
.linea.marca-verde { box-shadow: 0 0 0 4px rgba(120, 210, 140, 0.5); }
.linea.subrayado { position: relative; }
.linea.subrayado::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--oro-2); }
.pantalla-pagina .hueco { height: 8px; }
.nota-flotante { position: absolute; right: -46px; top: 52px; padding: 8px 12px; border-radius: 10px; background: #FFE9A8; color: #5A4300; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); transform: rotate(3deg); white-space: nowrap; }
.movil { position: absolute; right: -10px; bottom: -36px; width: 150px; aspect-ratio: 0.5; border-radius: 22px; background: var(--noche); padding: 12px 9px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.7); transform: rotate(5deg); }
.movil-pagina { height: 100%; border-radius: 12px; background: #FFFDF8; padding: 16px 12px; display: flex; flex-direction: column; gap: 9px; }
.movil-pagina .linea { height: 5px; }

.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 0.8fr); gap: 22px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px 30px; border-radius: 20px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.plan.destacado { background: var(--noche); color: var(--marfil); border-color: rgba(217, 169, 78, 0.4); }
.plan-sello { position: absolute; top: -13px; left: 30px; padding: 5px 14px; border-radius: 999px; background: linear-gradient(120deg, #E7C477, #C9973C); color: #1E1306; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.plan-tipo { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--oro); margin: 0 0 8px; }
.plan.destacado .plan-tipo { color: var(--oro-2); }
.plan-precio { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.plan-precio b { font-family: var(--display); font-size: 46px; line-height: 1; font-weight: 500; }
.plan-precio small { font-size: 14px; color: var(--tinta-3); }
.plan.destacado .plan-precio small { color: var(--neutro); }
.plan-desc { font-size: 15px; color: var(--tinta-2); }
.plan.destacado .plan-desc { color: #C9D2E2; }
.plan ul { list-style: none; padding: 0; margin: 10px 0 20px; display: grid; gap: 10px; flex: 1; }
.plan li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.45; }
.plan li::before { content: ''; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--verde) 16%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6B4F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.plan.destacado li::before { background-color: rgba(217, 169, 78, 0.18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EBC57A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); }
.plan li.no { color: var(--tinta-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.plan li.no::before { background: var(--papel-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A8F7E' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 10px no-repeat; }
.plan-alta { font-size: 13.5px; color: var(--tinta-3); }
.plan.destacado .plan-alta { color: var(--neutro); }
.plan-aviso { display: flex; flex-direction: column; gap: 14px; padding: 30px 26px; border-radius: 20px; border: 1px dashed color-mix(in srgb, var(--oro) 60%, transparent); background: var(--oro-suave); }
.plan-aviso svg { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--blanco); fill: none; stroke: var(--oro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan-aviso b { font-family: var(--display); font-size: 23px; font-weight: 500; display: block; margin-bottom: 6px; }
.plan-aviso p { font-size: 15px; color: var(--tinta-2); margin: 0; }

/* ---------------------------- comunidad --------------------------- */
.com-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.com-tarjetas { position: relative; min-height: 420px; }
.post-maqueta { position: absolute; width: min(360px, 88%); padding: 20px 22px; border-radius: 18px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); font-size: 15px; }
.post-maqueta.p1 { left: 0; top: 0; transform: rotate(-2deg); }
.post-maqueta.p2 { right: 0; top: 160px; transform: rotate(2deg); }
.post-maqueta.p3 { left: 8%; bottom: 0; transform: rotate(-1deg); }
.pm-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.pm-cab small { display: block; color: var(--tinta-3); font-size: 13px; }
.pm-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--noche); color: var(--oro-2); font-weight: 700; font-size: 14px; }
.pm-av.rojo { background: var(--rojo); color: #FFF3DD; } .pm-av.oro { background: linear-gradient(120deg, #E7C477, #C9973C); color: #1E1306; }
.post-maqueta blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--oro-2); font-family: var(--display); font-size: 19px; font-style: normal; line-height: 1.35; }
.pm-pie { display: flex; gap: 16px; font-size: 13px; color: var(--tinta-3); font-weight: 700; }
.pm-estrellas { color: var(--oro); letter-spacing: 3px; margin: 0 0 4px; }

/* ------------------------------ autores --------------------------- */
.autores-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.autor { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 24px; padding: 30px; border-radius: 20px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.monograma { grid-row: span 2; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; position: relative; background: var(--noche); color: var(--oro-2); font-family: var(--display); font-size: 42px; font-weight: 500; box-shadow: inset 0 0 0 3px rgba(217, 169, 78, 0.45); }
.monograma span { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; background: var(--rojo); color: #FBEFD8; font-size: 18px; font-family: 'Noto Serif SC', 'Songti SC', serif; transform: rotate(-6deg); }
.monograma.rojo { background: var(--rojo); color: #FFF3DD; box-shadow: inset 0 0 0 3px rgba(255, 243, 221, 0.35); }
.monograma.rojo span { background: var(--noche); color: var(--oro-2); }
.autor h3 { font-size: 26px; margin: 4px 0 6px; }
.autor h3 span { display: block; font-size: 17px; color: var(--oro); letter-spacing: 0.2em; margin-top: 2px; }
.autor p { color: var(--tinta-2); font-size: 15.5px; margin: 0; }
.colaboradores { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linea); }
.colaboradores h3 { font-size: 13px; font-family: var(--texto); letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-3); font-weight: 600; }
.colaboradores ul { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 10px 34px; }
.colaboradores li { font-family: var(--display); font-size: 23px; font-weight: 500; }
.colaboradores p { color: var(--tinta-3); font-size: 15px; }

/* ----------------------------- contacto --------------------------- */
.contacto { background: var(--papel-2); }
.con-rejilla { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.con-datos { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--linea); }
.con-datos li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.con-datos span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.con-datos a, .con-datos b { font-weight: 600; color: var(--tinta); text-align: right; }
.con-form { padding: clamp(24px, 4vw, 38px); border-radius: 22px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }

/* --------------------------- formularios -------------------------- */
.campo { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; min-width: 0; }
.campo > span:first-child { font-size: 13.5px; font-weight: 700; color: var(--tinta-2); }
.campo i { font-style: normal; font-weight: 400; color: var(--tinta-3); }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--papel);
  color: var(--tinta); font: inherit; font-size: 16px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.campo textarea { resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--oro); background: var(--blanco); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oro) 18%, transparent); }
.fila-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.fila-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.fila-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
.con-boton { position: relative; display: block; }
.con-boton input { padding-right: 50px; }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--tinta-3); cursor: pointer; display: grid; place-items: center; }
.ver-clave svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ver-clave[aria-pressed='true'] { color: var(--acento); }
.casilla { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 18px; font-size: 14.5px; color: var(--tinta-2); cursor: pointer; line-height: 1.5; }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acento); flex: none; }
.aviso-form { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 20px; border-radius: 12px; background: var(--papel-2); font-size: 15px; font-weight: 600; }
.aviso-form svg { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-form.ok { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); }
:root[data-tema='oscuro'] .aviso-form.ok { color: #7FD1A6; }
.aviso-form.error { background: var(--rojo-suave); color: var(--rojo); }
.nota-form { font-size: 13.5px; color: var(--tinta-3); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------- acceso y alta -------------------------- */
body.acceso .cab { background: var(--cab); border-bottom-color: var(--linea-suave); }
.acceso-escena { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 77px); }
.acceso-arte { position: relative; overflow: hidden; background: var(--textura) 0 0 / 512px, linear-gradient(180deg, #0C1628, #0F1A2C); color: var(--marfil); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; padding: 60px 40px 140px; }
.acceso-arte::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 400px at 70% 10%, rgba(40, 64, 104, 0.6), transparent 60%); }
.arte-globo { position: absolute; width: 640px; height: 640px; right: -180px; top: -160px; color: #D9A94E; opacity: 0.18; animation: girar-lento 140s linear infinite; }
.arte-libro { position: relative; width: min(300px, 60%); transform: rotate(-4deg); box-shadow: 30px 40px 70px -30px rgba(0, 0, 0, 0.8); }
.arte-cita { position: relative; z-index: 1; max-width: 26rem; text-align: center; font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--marfil); margin: 0; }
body.lang-zh .arte-cita { font-style: normal; font-size: 22px; letter-spacing: 0.06em; }
.arte-banda { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: url('../img/siluetas-banda.webp') center bottom / auto 100% repeat-x; opacity: 0.85; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.acceso-panel { display: grid; place-items: center; padding: 60px 24px; }
.acceso-form { width: min(100%, 440px); }
.acceso-form .sello { margin-bottom: 18px; }
.acceso-form h1 { font-size: clamp(2.2rem, 4vw, 3rem); }
.acceso-ayuda { font-size: 13.5px; color: var(--tinta-3); margin-top: 16px; }
.acceso-alta { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acceso-alta > span { grid-column: 1 / -1; font-size: 14px; color: var(--tinta-2); font-weight: 600; }
.acceso-alta a { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.acceso-alta a:hover { border-color: var(--oro); transform: translateY(-2px); background: var(--blanco); }
.acceso-alta b { font-family: var(--display); font-size: 19px; font-weight: 500; }
.acceso-alta small { font-size: 12.5px; color: var(--tinta-3); }

.registro-escena { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.registro-cab { text-align: center; margin-bottom: 36px; }
.registro-cab .sello { margin-bottom: 16px; }
.registro-cab .antetitulo { justify-content: center; }
.registro-cab .antetitulo::before { display: none; }
.registro-cab .titulo-seccion, .registro-cab .sub-seccion { margin-inline: auto; }
.tipos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 900px; margin: 0 auto 34px; }
.tipo { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 26px; border-radius: 18px; border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta-2); text-decoration: none; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; font-size: 15px; line-height: 1.5; }
.tipo:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.tipo b { font-family: var(--display); font-size: 26px; font-weight: 500; color: var(--tinta); }
.tipo-precio { align-self: flex-start; padding: 3px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); }
.tipo.destacado .tipo-precio { background: var(--oro-suave); color: var(--oro); }
.tipo.activo { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.tipo.activo::after { content: ''; position: absolute; top: 18px; right: 18px; width: 26px; height: 26px; border-radius: 50%; background: var(--oro-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1628' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.registro-form { max-width: 900px; margin: 0 auto; padding: clamp(24px, 4vw, 42px); border-radius: 24px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.grupo { border: 0; padding: 0; margin: 0 0 26px; }
.grupo legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 16px; font-family: var(--display); font-size: 24px; font-weight: 500; color: var(--tinta); }
.grupo legend span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--noche); color: var(--oro-2); font-family: var(--texto); font-size: 14px; font-weight: 700; }
.planes-radio { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.plan-radio { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; border: 1.5px solid var(--linea); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; background: var(--papel); }
.plan-radio input { position: absolute; opacity: 0; }
.plan-radio:has(input:checked) { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); background: var(--blanco); }
.plan-radio:has(input:focus-visible) { outline: 2px solid var(--oro); outline-offset: 2px; }
.pr-nombre { font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--oro); }
.pr-precio { font-family: var(--display); font-size: 34px; font-weight: 500; line-height: 1.1; color: var(--tinta); }
.pr-meses { font-size: 13.5px; color: var(--tinta-3); }
.plan-radio.destacado::after { content: '★'; position: absolute; top: 14px; right: 16px; color: var(--oro); }
.aviso-pago { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--oro-suave); font-size: 14.5px; color: var(--tinta-2); }
.aviso-pago svg { width: 26px; height: 26px; fill: none; stroke: var(--oro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.aviso-pago p { margin: 0; }
.casilla.acepta a { font-weight: 700; }
.registro-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.registro-hecho { max-width: 620px; margin: 0 auto; text-align: center; padding: 34px; border-radius: 22px; background: var(--blanco); border: 1px solid var(--linea); }
.usuario-grande code { display: inline-block; font-size: 24px; padding: 10px 22px; border-radius: 12px; background: var(--oro-suave); color: var(--tinta); font-weight: 700; }

/* ---------------------- ficha pública de obra --------------------- */
.migas { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 30px; font-size: 14px; font-weight: 700; color: var(--tinta-2); text-decoration: none; }
.migas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.migas:hover { color: var(--oro); }
.fo-rejilla { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.fo-cubierta { position: sticky; top: 110px; max-width: 360px; }
.fo-valoracion { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--tinta-3); }
.fo-valoracion b { font-size: 18px; color: var(--tinta); }
.estrellas { --v: 0; position: relative; display: inline-block; font-size: 18px; letter-spacing: 3px; line-height: 1; }
.estrellas::before { content: '★★★★★'; background: linear-gradient(90deg, var(--oro) calc(var(--v) / 5 * 100%), var(--linea) calc(var(--v) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fo-titulo { font-size: clamp(2.4rem, 5vw, 4rem); }
.fo-titulo small { display: block; font-size: 0.48em; font-style: normal; font-weight: 600; color: var(--oro); margin-top: 10px; }
.fo-autor { font-family: var(--display); font-size: 24px; color: var(--tinta-2); }
.fo-desc { color: var(--tinta-2); font-size: 1.06rem; margin: 22px 0; }
.fo-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 34px; }
.fo-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--linea); }
.fo-datos div { padding: 14px 0; border-bottom: 1px solid var(--linea); }
.fo-datos dt { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.fo-datos dd { margin: 4px 0 0; font-weight: 600; }
.fo-otra a { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px 18px; border-radius: 14px; background: var(--papel-2); color: var(--tinta); text-decoration: none; font-size: 15px; }
.fo-otra svg { width: 20px; height: 20px; fill: none; stroke: var(--oro); stroke-width: 1.6; }
.fo-lanzamiento { margin: 22px 0; padding: 22px 24px; border-radius: 18px; background: var(--noche); color: var(--marfil); }
.fo-lanzamiento p { display: flex; flex-direction: column; margin: 0 0 14px; }
.fo-lanzamiento span { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro-2); font-weight: 700; }
.fo-lanzamiento b { font-family: var(--display); font-size: 24px; font-weight: 500; }
.cuenta-grande { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cuenta-grande div { text-align: center; padding: 12px 6px; border-radius: 12px; background: rgba(242, 234, 216, 0.06); border: 1px solid rgba(217, 169, 78, 0.25); }
.cuenta-grande b { display: block; font-family: var(--display); font-size: 34px; line-height: 1; color: var(--oro-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.cuenta-grande small { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neutro); }
.fo-indice { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(22px, 4vw, 36px); border-radius: 22px; background: var(--blanco); border: 1px solid var(--linea); }
.fo-indice-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.fo-indice-cab h2 { font-size: 32px; margin: 0; }
.fo-indice-cab p { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; font-size: 13px; color: var(--tinta-3); }
.leyenda::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.leyenda.libre::before { background: var(--verde); } .leyenda.cerrado::before { background: var(--oro); }
.fo-indice ol { list-style: none; padding: 0; margin: 0; }
.fo-indice li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea-suave); font-size: 15.5px; }
.fo-indice li.n0 { font-weight: 700; font-size: 16px; padding-top: 14px; }
.fo-indice li.n1 { padding-left: 22px; } .fo-indice li.n2 { padding-left: 44px; font-size: 14.5px; } .fo-indice li.n3 { padding-left: 66px; font-size: 14px; }
.fo-indice i { flex: 1; border-bottom: 1px dotted var(--linea); transform: translateY(-4px); }
.fo-indice b { font-variant-numeric: tabular-nums; color: var(--tinta-3); font-weight: 600; }
.ind-marca { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); transform: translateY(-1px); }
.fo-indice li.libre .ind-marca { background: var(--verde); }
.fo-indice li.parcial .ind-marca { background: linear-gradient(90deg, var(--verde) 50%, var(--oro) 50%); }
.ind-t { min-width: 0; }

/* ------------------------------ legal ----------------------------- */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.legal-nav a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.legal-nav a[aria-current='page'] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.legal-texto h2 { font-size: 26px; margin-top: 34px; }
.legal-texto p { color: var(--tinta-2); }
.vacia { text-align: center; }
.vacia .titulo-seccion { margin: 24px auto; }

/* ------------------------------- pie ------------------------------ */
.pie { background: var(--noche); color: #C9D2E2; padding: clamp(3.5rem, 7vw, 5rem) 0 0; position: relative; }
:root[data-tema='oscuro'] .pie { background: #0A111D; }
.pie-in { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 46px; }
.pie-marca img { width: 72px; height: 72px; object-fit: contain; margin-bottom: 14px; }
.pie-nombre { display: flex; flex-direction: column; margin: 0 0 10px; }
.pie-nombre b { font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif; font-size: 26px; letter-spacing: 0.14em; color: var(--marfil); }
.pie-nombre span { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--oro-2); font-weight: 700; }
.pie-lema { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: 0; color: #9AA9C2; max-width: 22rem; }
body.lang-zh .pie-lema { font-style: normal; }
.pie-col { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.pie-col h2 { font-family: var(--texto); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro-2); margin: 0 0 8px; font-weight: 600; }
.pie-col a { color: #C9D2E2; text-decoration: none; }
.pie-col a:hover { color: #fff; text-decoration: underline; }
.pie-legal { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 20px 0 28px; border-top: 1px solid rgba(217, 169, 78, 0.18); font-size: 13px; color: #8392AD; }
.pie-legal a { color: #8392AD; text-decoration: none; }
.pie-legal a:hover { color: #fff; }


/* Cabecera sobre el héroe (siempre oscuro, como la cubierta) */
.inicio .cab:not(.fijada) .marca-txt b { color: #F3EBDD; }
.inicio .cab:not(.fijada) .marca-txt small { color: #8FA0BC; }
.inicio .cab:not(.fijada) .menu-btn { border-color: rgba(243, 235, 221, 0.3); }
.inicio .cab:not(.fijada) .menu-lineas, .inicio .cab:not(.fijada) .menu-lineas::before, .inicio .cab:not(.fijada) .menu-lineas::after { background: #F3EBDD; }
.inicio .cab:not(.fijada) .menu-btn[aria-expanded='true'] .menu-lineas { background: transparent; }
@media (min-width: 1101px) {
  .inicio .cab:not(.fijada) .nav ul a { color: #C5CCDA; }
  .inicio .cab:not(.fijada) .nav ul a:hover, .inicio .cab:not(.fijada) .nav ul a[aria-current='page'] { color: #F3EBDD; background: rgba(243, 235, 221, 0.08); }
  .inicio .cab:not(.fijada) .idiomas { border-color: rgba(243, 235, 221, 0.25); }
  .inicio .cab:not(.fijada) .idiomas a { color: #8FA0BC; }
  .inicio .cab:not(.fijada) .idiomas a[aria-current='true'] { background: #F3EBDD; color: #0C1628; }
  .inicio .cab:not(.fijada) .tema-btn { border-color: rgba(243, 235, 221, 0.25); color: #C5CCDA; }
  .inicio .cab:not(.fijada) .btn-linea { color: #F3EBDD; border-color: rgba(243, 235, 221, 0.4); }
  .inicio .cab:not(.fijada) .btn-rojo { background: #E19A2F; color: #0C1628; }
}
.heroe .antetitulo { color: #E19A2F; }
.heroe .btn-rojo { background: linear-gradient(120deg, #F0B455, #E19A2F); color: #0C1628; box-shadow: 0 14px 30px -14px rgba(225, 154, 47, 0.75); }
.heroe .btn-rojo:hover { filter: brightness(1.06); }
.heroe .btn-linea { color: #F3EBDD; border-color: rgba(243, 235, 221, 0.4); }
.heroe .btn-linea:hover { border-color: #F3EBDD; background: rgba(243, 235, 221, 0.06); }
.cubierta.real { background: #0C1628; }
.antetitulo, .plan-tipo, .pr-nombre, .tipo-precio, .cinta-obra, .plan-sello { font-family: var(--display); }
.btn { font-family: var(--display); font-weight: 600; letter-spacing: 0.01em; }
.plan-precio b, .pr-precio, .cuenta-grande b, .monograma { font-family: var(--display); font-weight: 500; letter-spacing: 0; }
.colaboradores li { font-size: 20px; font-weight: 500; }
.autor h3 span { font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; letter-spacing: 0.24em; font-size: 15px; }
.fo-autor { font-size: 20px; font-weight: 500; letter-spacing: 0; }
.post-maqueta blockquote { font-size: 17px; font-weight: 600; letter-spacing: 0; }

/* Citas en cursiva, como en la imprenta (en chino, redonda). */
.cita blockquote, .arte-cita, .post-maqueta blockquote { font-style: italic; font-weight: 400; letter-spacing: 0; }
body.lang-zh .cita blockquote, body.lang-zh .arte-cita, body.lang-zh .post-maqueta blockquote { font-style: normal; font-weight: 500; }

@media (min-width: 1560px) { .heroe-vertical { display: block; } }

/* --------------------------- animaciones -------------------------- */
.js .revelar { opacity: 0; transform: translateY(24px); transition: opacity 0.9s cubic-bezier(.2, .8, .2, 1), transform 0.9s cubic-bezier(.2, .8, .2, 1); }
.js .revelar.visto { opacity: 1; transform: none; }
@keyframes girar-lento { to { transform: translateY(-52%) rotate(360deg); } }
.arte-globo { animation-name: girar-solo; }
@keyframes girar-solo { to { transform: rotate(360deg); } }
@keyframes desfilar { to { transform: translateX(-50%); } }
@keyframes flotar { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ------------------------------ móvil ----------------------------- */
@media (max-width: 1100px) {
  .menu-btn { display: grid; }
  .nav { position: fixed; inset: 76px 0 auto; max-height: calc(100vh - 76px); overflow: auto; flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 20px 30px; background: var(--papel); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra); transform: translateY(-120%); visibility: hidden; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), visibility 0s 0.35s; }
  .nav.abierta { transform: none; visibility: visible; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
  .nav ul { flex-direction: column; }
  .nav ul a { padding: 12px 14px; font-size: 17px; }
  .nav-extra { flex-wrap: wrap; }
}
@media (max-width: 1100px) {
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-aviso { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .pie-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .heroe { min-height: auto; padding-top: 110px; }
  .heroe-in, .ed-rejilla, .obra-rejilla, .bib-rejilla, .com-rejilla, .con-rejilla, .fo-rejilla, .acceso-escena { grid-template-columns: minmax(0, 1fr); }
  .heroe-libro { order: -1; margin-bottom: 10px; }
  .libro3d { width: min(250px, 60vw); }
  .heroe-etiqueta { left: 50%; transform: translateX(-120%); }
  .heroe-vertical { display: none; }
  .heroe-globo { right: -30vw; width: 110vw; height: 110vw; opacity: 0.2; }
  .ed-cabeza, .fo-cubierta { position: static; }
  .fo-cubierta { max-width: 280px; margin: 0 auto; }
  .indice-obra ol { columns: 1; }
  .com-tarjetas { min-height: 460px; }
  .acceso-arte { min-height: 380px; padding: 40px 24px 110px; }
  .arte-libro { width: 170px; }
  .arte-cita { font-size: 21px; }
  .bib-maqueta { margin-bottom: 40px; }
  .fila-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cab-in { min-height: 68px; }
  .marca-txt b { font-size: 17px; }
  .nav { inset: 68px 0 auto; }
  .heroe { margin-top: -69px; }
  .heroe-datos div { min-width: 0; padding-right: 10px; }
  .heroe-datos div + div { padding-left: 10px; }
  .heroe-datos dd { font-size: 18px; }
  .heroe-etiqueta { display: none; }
  .heroe { padding: 92px 0 160px; }
  .libro3d { width: min(176px, 46vw); }
  .heroe-globo { opacity: 0.12; top: 62%; }
  .heroe-sol { opacity: 0.6; top: 30%; }
  .heroe-titulo { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .heroe-bajar { display: none; }
  .principios { grid-template-columns: 1fr; }
  .principios li:nth-child(odd) { border-right: 0; }
  .principios li:nth-child(even) { padding-left: 0; }
  .obra-ediciones, .planes, .autores-rejilla, .tipos, .fila-2, .fila-3, .fila-4, .acceso-alta { grid-template-columns: minmax(0, 1fr); }
  .plan-aviso { flex-direction: column; align-items: flex-start; }
  .autor { grid-template-columns: 1fr; text-align: left; }
  .monograma { grid-row: auto; margin-bottom: 16px; width: 80px; height: 80px; font-size: 34px; }
  .estante-obras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .obra-info h3 { font-size: 18px; }
  .pantalla-cuerpo { grid-template-columns: 70px 1fr; }
  .nota-flotante { right: -8px; }
  .movil { width: 110px; right: 0; bottom: -50px; }
  .post-maqueta { width: 92%; }
  .post-maqueta.p2 { top: 170px; }
  .pie-in { grid-template-columns: 1fr; gap: 28px; }
  .cuenta-grande b { font-size: 26px; }
  .con-datos li { flex-direction: column; gap: 2px; }
  .con-datos a, .con-datos b { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .revelar { opacity: 1; transform: none; }
}

/* ==================================================================
   Manual Práctico de Extranjería · piezas de la web del libro
   Marca (cubierta en miniatura), actualización permanente, novedades
   2026, capítulos, preguntas frecuentes, páginas de cada capítulo,
   llamada a la acción en el móvil y aviso de cookies.
   ================================================================== */
/* cabecera más ancha que el contenido: cabe el nombre completo del Manual */
.cab-in { width: min(100% - 2.5rem, 84rem); }
.nav { gap: 26px; }
.nav ul { gap: 0; }
.nav ul a, .idiomas a { white-space: nowrap; }
.nav ul a { padding: 8px 11px; }
/* marca de la cabecera: la cubierta en miniatura */
.marca-libro { display: block; width: 34px; height: 48px; flex: none; border-radius: 2px 4px 4px 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(225, 154, 47, 0.45), 0 6px 14px -6px rgba(6, 10, 20, 0.6); transform: rotate(-3deg); transition: transform 0.3s; }
.marca:hover .marca-libro { transform: rotate(0deg) translateY(-2px); }
.marca-libro img { width: 100%; height: 100%; object-fit: cover; filter: none; }
.marca-txt b { font-family: var(--display); font-size: 19px; letter-spacing: 0; font-weight: 500; white-space: nowrap; }
body.lang-zh .marca-txt b { font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', var(--display); letter-spacing: 0.1em; font-weight: 700; font-size: 18px; }
.marca-txt small { letter-spacing: 0.22em; font-size: 10px; }

/* héroe */
.heroe-titulo span { display: block; }
.heroe-titulo small { display: block; margin-top: 18px; font-size: 0.32em; line-height: 1.3; font-weight: 400; font-style: italic; color: var(--marfil); letter-spacing: 0; }
body.lang-zh .heroe-titulo small { font-style: normal; letter-spacing: 0.16em; font-size: 0.34em; }
.heroe-titulo span:nth-child(2) { color: var(--oro-cubierta); }
.heroe-datos dd small { font-size: 0.62em; color: #C5CCDA; margin-left: 4px; }
.heroe-actualizado { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -18px 0 30px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(47, 107, 79, 0.18); border: 1px solid rgba(127, 209, 166, 0.35); color: #C5CCDA; font-size: 14px; }
.heroe-actualizado b { color: #A8E6C4; font-weight: 600; }
.heroe-etiqueta span b + * { display: block; }
.heroe-etiqueta > span:last-child { max-width: 240px; line-height: 1.35; }
.pulso { position: relative; display: inline-block; width: 10px; height: 10px; flex: none; border-radius: 50%; background: #3FB57A; box-shadow: 0 0 0 0 rgba(63, 181, 122, 0.6); animation: pulso 2.2s infinite; vertical-align: middle; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(63, 181, 122, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(63, 181, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 181, 122, 0); } }

/* el libro */
.obra-extra { font-size: 15px; color: var(--neutro); margin-top: -4px; }
a.edicion { text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
a.edicion:hover { border-color: var(--oro-2); background: rgba(225, 154, 47, 0.06); transform: translateY(-2px); }
.indice-obra li a { color: #D5DCE8; text-decoration: none; }
.indice-obra li a:hover { color: #F0B455; text-decoration: underline; }

/* actualización permanente */
.actualizacion { background: var(--papel-2); padding-block: clamp(3.5rem, 7vw, 6rem); }
.act-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.act-cabeza .titulo-seccion { max-width: 18ch; }
.act-sello { display: flex; align-items: flex-start; gap: 14px; margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.act-sello .pulso { margin-top: 7px; }
.act-sello b { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--tinta); }
.act-sello span { font-size: 14.5px; color: var(--tinta-2); }
.act-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.act-pasos li { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.act-pasos li > b { font-family: var(--display); font-size: 28px; line-height: 1; color: var(--oro); font-weight: 500; min-width: 38px; }
.act-pasos strong { display: block; font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--tinta); margin-bottom: 2px; }
.act-pasos span { font-size: 15.5px; color: var(--tinta-2); line-height: 1.55; }

/* novedades 2026 */
.nov-destacada { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px 28px; margin-bottom: 28px; padding: 26px 30px; border-radius: 20px; text-decoration: none; color: var(--marfil);
  background: radial-gradient(600px 300px at 90% 0%, rgba(225, 154, 47, 0.18), transparent 60%), var(--textura) 0 0 / 512px, linear-gradient(120deg, #0C1628, #182A47); box-shadow: var(--sombra); border: 1px solid rgba(225, 154, 47, 0.35); transition: transform 0.25s, box-shadow 0.25s; }
.nov-destacada:hover { transform: translateY(-3px); }
.nov-sello { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(120deg, #F0B455, #C9973C); color: #1E1306; font-family: var(--display); font-weight: 600; font-size: 15px; text-align: center; line-height: 1.1; padding: 10px; }
.nov-cuerpo b { display: block; font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; color: #F0B455; line-height: 1.15; margin-bottom: 6px; }
body.lang-zh .nov-cuerpo b { font-weight: 700; }
.nov-cuerpo span { font-size: 15.5px; color: #C9D2E2; line-height: 1.6; }
.nov-ir { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--display); font-weight: 600; color: #F0B455; }
.nov-ir svg, .cap-ir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.nov-destacada:hover .nov-ir svg, .cap-enlace:hover .cap-ir svg { transform: translateX(4px); }
.nov-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.nov { display: flex; flex-direction: column; padding: 22px 22px 20px; border-radius: 18px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.nov-n { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--oro); font-weight: 500; margin-bottom: 12px; }
.nov h3 { font-size: 20px; margin: 0 0 8px; line-height: 1.2; }
.nov p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.55; flex: 1; }
.nov a { font-size: 13px; font-weight: 700; color: var(--oro); text-decoration: none; letter-spacing: 0.02em; }
.nov a:hover { text-decoration: underline; }

/* capítulos */
.capitulos { background: var(--papel-2); }
.capitulos.hub { background: transparent; }
.cap-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.cap-tarjeta { display: flex; }
/* En escritorio, 4 columnas: los capítulos 7 y 8 (arraigo y regularización, los más buscados) ocupan dos y las filas quedan completas. */
@media (min-width: 1101px) { .cap-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cap-tarjeta.resaltada { grid-column: span 2; } }
.cap-enlace { position: relative; display: flex; flex-direction: column; width: 100%; padding: 24px 24px 20px; border-radius: 18px; background: var(--blanco); border: 1px solid var(--linea); color: var(--tinta); text-decoration: none; box-shadow: var(--sombra); transition: transform 0.25s, border-color 0.25s; }
.cap-enlace:hover { transform: translateY(-4px); border-color: var(--oro); }
.cap-tarjeta.resaltada .cap-enlace { border-color: color-mix(in srgb, var(--oro) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 14%, transparent), var(--sombra); }
.cap-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cap-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--noche); color: var(--oro-2); font-family: var(--display); font-size: 18px; font-weight: 600; flex: none; }
.cap-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--oro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cap-gratis { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde); }
:root[data-tema='oscuro'] .cap-gratis { color: #7FD1A6; }
.cap-enlace h2, .cap-enlace h3 { font-size: 22px; margin: 0 0 8px; line-height: 1.2; }
.cap-enlace p { font-size: 14.5px; color: var(--tinta-2); line-height: 1.55; margin: 0 0 16px; flex: 1; }
.cap-claves { display: none; }
@media (min-width: 1101px) {
  .cap-tarjeta.resaltada .cap-enlace p { flex: none; }
  .cap-claves { display: grid; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
  .cap-claves li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
  .cap-claves li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--oro); }
}
.cap-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--linea-suave); font-size: 13px; color: var(--tinta-3); }
.cap-ir { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--oro); }
.anexos-lista { margin-top: 34px; padding: clamp(22px, 4vw, 32px); border-radius: 20px; border: 1px dashed color-mix(in srgb, var(--oro) 55%, transparent); }
.anexos-lista h3 { font-size: 13px; font-family: var(--texto); letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro); font-weight: 700; margin-bottom: 14px; }
.anexos-lista ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.anexos-lista li { display: flex; flex-direction: column; font-size: 14px; color: var(--tinta-2); line-height: 1.5; }
.anexos-lista li b { font-family: var(--display); font-size: 16.5px; font-weight: 600; color: var(--tinta); }

/* colaboradores con su estudio */
.colaboradores ul.estudios { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px 30px; }
.colaboradores ul.estudios li { display: flex; flex-direction: column; font-family: var(--texto); font-size: 14.5px; color: var(--tinta-2); line-height: 1.45; }
.colaboradores ul.estudios li b { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--tinta); }

/* preguntas frecuentes */
.faq-rejilla { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq-rejilla .cabeza-seccion { position: sticky; top: 110px; }
.faq-lista { border-top: 1px solid var(--linea); }
.faq { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--tinta); line-height: 1.35; }
body.lang-zh .faq summary { font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--oro); stroke-width: 1.8; transition: transform 0.25s; }
.faq[open] summary svg { transform: rotate(180deg); }
.faq-resp { padding: 0 0 18px; }
.faq-resp p { color: var(--tinta-2); margin: 0 0 8px; font-size: 16px; }
.faq-resp a { font-size: 14px; font-weight: 700; color: var(--oro); text-decoration: none; }
.faq-resp a:hover { text-decoration: underline; }

/* pie */
.pie-in { width: min(100% - 2.5rem, 84rem); grid-template-columns: 1.7fr 0.9fr 1.15fr 0.9fr 1.15fr; gap: 34px; }
.pie-legal { width: min(100% - 2.5rem, 84rem); }
.pie-marca { display: flex; gap: 18px; align-items: flex-start; }
.pie-libro { flex: none; width: 84px; transform: rotate(-3deg); }
.pie-nombre b { font-family: var(--display); font-size: 22px; letter-spacing: 0; line-height: 1.15; }
.pie-nombre b[lang] { font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif; letter-spacing: 0.08em; }
.pie-nombre span { letter-spacing: 0.06em; text-transform: none; font-size: 13px; margin-top: 4px; font-style: italic; font-family: var(--display); font-weight: 500; }
.pie-lema { font-size: 15px; font-weight: 500; }
.pie-autores { font-size: 13.5px; color: #9AA9C2; margin: 0 0 8px; }
.pie-act { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #A8E6C4; margin: 0; line-height: 1.45; }
.pie-act .pulso { margin-top: 3px; width: 9px; height: 9px; }
.pie-temas a { font-size: 14px; }
.pie-cookies { background: none; border: 0; padding: 0; font: inherit; color: #8392AD; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pie-cookies:hover { color: #fff; }

/* migas */
.migas-ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font-size: 13.5px; font-weight: 600; color: var(--tinta-3); }
.migas-ruta a { color: var(--tinta-2); text-decoration: none; }
.migas-ruta a:hover { color: var(--oro); text-decoration: underline; }
.migas-ruta.claro, .migas-ruta.claro a { color: #9AA9C2; }
.migas-ruta.claro a:hover { color: #F0B455; }
.migas-ruta [aria-current] { color: inherit; }

/* página de un capítulo */
.cap-heroe { position: relative; overflow: hidden; color: var(--marfil); padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(5.5rem, 10vw, 8rem);
  background: radial-gradient(900px 520px at 85% 20%, rgba(40, 64, 104, 0.55), transparent 62%), var(--textura) 0 0 / 512px, linear-gradient(180deg, #0C1628 0%, #101E34 100%); }
.cap-heroe .heroe-globo { right: -12vw; width: min(50vw, 600px); height: min(50vw, 600px); }
.cap-heroe .heroe-banda { height: clamp(90px, 10vw, 150px); opacity: 0.6; }
.cap-heroe-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.cap-titulo { font-size: clamp(2.2rem, 4.6vw, 3.8rem); color: #F0B455; line-height: 1.08; margin-bottom: 22px; max-width: 22ch; }
body.lang-zh .cap-titulo { line-height: 1.3; }
.cap-entrada { font-size: clamp(1.08rem, 1.6vw, 1.22rem); color: var(--marfil); max-width: 42rem; }
.cap-intro { color: #C9D2E2; max-width: 42rem; }
.cap-heroe .heroe-acciones { margin: 28px 0 0; }
.cap-heroe .btn-rojo { background: linear-gradient(120deg, #F0B455, #E19A2F); color: #0C1628; }
.cap-heroe .btn-linea { color: #F3EBDD; border-color: rgba(243, 235, 221, 0.4); }
.cap-ficha { padding: 22px; border-radius: 20px; background: rgba(12, 22, 40, 0.6); border: 1px solid rgba(225, 154, 47, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cap-ficha-libro { display: block; width: 150px; margin: -6px auto 18px; transform: rotate(-3deg); transition: transform 0.3s; }
.cap-ficha-libro:hover { transform: rotate(0); }
.cap-ficha dl { margin: 0; display: grid; gap: 0; }
.cap-ficha dl div { padding: 10px 0; border-top: 1px solid rgba(225, 154, 47, 0.18); }
.cap-ficha dt { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #8FA0BC; font-weight: 700; }
.cap-ficha dd { margin: 2px 0 0; font-weight: 600; color: var(--marfil); display: flex; align-items: center; gap: 8px; font-size: 15px; }
.chip-gratis { color: #A8E6C4; }
.aviso-cap { display: flex; gap: 14px; align-items: flex-start; margin: -2.4rem 0 0; position: relative; z-index: 2; padding: 18px 22px; border-radius: 16px; background: var(--oro-suave); border: 1px solid color-mix(in srgb, var(--oro) 50%, transparent); box-shadow: var(--sombra); }
.aviso-cap svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--oro); stroke-width: 1.8; stroke-linecap: round; margin-top: 2px; }
.aviso-cap p { margin: 0; color: var(--tinta-2); font-size: 15.5px; }
.aviso-cap b { color: var(--tinta); }
.cap-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-block: clamp(3rem, 6vw, 4.5rem); }
.cap-bloque { margin-bottom: clamp(2.6rem, 5vw, 3.6rem); }
.cap-bloque > h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 20px; }
.claves { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.claves li { position: relative; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 14px 18px 14px 46px; border-radius: 14px; background: var(--blanco); border: 1px solid var(--linea); font-size: 16px; line-height: 1.55; }
.claves li::before { content: ''; position: absolute; left: 16px; top: 17px; width: 19px; height: 19px; border-radius: 50%; background: color-mix(in srgb, var(--oro) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C38422' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.claves small, .apartados small { flex: none; font-size: 12px; color: var(--tinta-3); white-space: nowrap; font-weight: 600; }
.tipos-arraigo { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tipo-a { padding: 20px; border-radius: 16px; background: var(--blanco); border: 1px solid var(--linea); border-top: 3px solid var(--oro); }
.tipo-a h3 { font-size: 19px; margin-bottom: 6px; }
.tipo-a p { font-size: 14.5px; color: var(--tinta-2); margin: 0; line-height: 1.55; }
.vias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.via { position: relative; padding: 24px; border-radius: 18px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.via-n { position: absolute; top: -14px; left: 22px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--noche); color: var(--oro-2); font-family: var(--display); font-weight: 600; }
.via h3 { font-size: 20px; margin: 6px 0 10px; line-height: 1.25; }
.via-quien { font-size: 14.5px; color: var(--tinta-2); }
.via ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; color: var(--tinta-2); line-height: 1.5; }
.fechas { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid color-mix(in srgb, var(--oro) 45%, transparent); display: grid; gap: 14px; }
.fechas li { position: relative; display: flex; flex-direction: column; }
.fechas li::before { content: ''; position: absolute; left: -29px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px var(--papel); }
.fechas b { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--tinta); }
.fechas span { font-size: 14.5px; color: var(--tinta-2); }
.apartados { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.apartados li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.ap-num { font-family: var(--display); font-size: 24px; color: var(--oro); font-weight: 500; line-height: 1.2; }
.apartados h3 { font-size: 20px; margin: 0 0 6px; line-height: 1.25; }
.apartados p { color: var(--tinta-2); font-size: 15.5px; margin: 0 0 6px; }
.ap-autor { font-weight: 700; color: var(--tinta) !important; font-size: 14px !important; }
.cap-cita { margin: 0 0 clamp(2.6rem, 5vw, 3.6rem); padding: 26px 30px; border-radius: 20px; background: var(--noche); color: var(--marfil); }
.cap-cita blockquote { margin: 0 0 10px; font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-style: italic; line-height: 1.3; }
body.lang-zh .cap-cita blockquote { font-style: normal; line-height: 1.6; }
.cap-cita blockquote::before { content: '“'; display: block; font-size: 2.4em; line-height: 0.6; color: #E19A2F; font-style: normal; }
.cap-cita figcaption { font-size: 13px; color: #8FA0BC; letter-spacing: 0.06em; }
.cap-aviso-legal { font-size: 13.5px; color: var(--tinta-3); padding: 16px 18px; border-radius: 12px; background: var(--papel-2); }
.cap-lateral { position: sticky; top: 100px; display: grid; gap: 20px; }
.cap-cta { padding: 24px; border-radius: 20px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.cap-cta h2 { font-size: 24px; margin-bottom: 8px; }
.cap-cta p { font-size: 14.5px; color: var(--tinta-2); }
.cap-cta .btn + .btn { margin-top: 8px; white-space: normal; text-align: center; font-size: 13.5px; }
.cap-otros { padding: 20px 22px; border-radius: 20px; border: 1px solid var(--linea); }
.cap-otros h2 { font-size: 13px; font-family: var(--texto); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; margin-bottom: 10px; }
.cap-otros ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cap-otros a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--tinta-2); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.cap-otros a b { font-family: var(--display); color: var(--oro); min-width: 18px; }
.cap-otros a:hover { background: var(--papel-2); color: var(--tinta); }
.cap-otros li[aria-current] a { background: var(--papel-2); color: var(--tinta); font-weight: 700; }
.cap-paso { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.paso { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--linea); text-decoration: none; color: var(--tinta); transition: border-color 0.2s, transform 0.2s; }
.paso:hover { border-color: var(--oro); transform: translateY(-2px); }
.paso small { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700; }
.paso b { font-family: var(--display); font-size: 20px; font-weight: 500; }
.paso.sig { text-align: right; grid-column: 2; }

/* llamada a la acción fija en el móvil */
.cta-movil { display: none; }
@media (max-width: 760px) {
  .cta-movil { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; transform: translateY(160%); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
  .cta-movil.visible { transform: none; }
  .cta-movil .btn { box-shadow: 0 14px 34px -10px rgba(6, 10, 20, 0.7); }
  body:has(.cta-movil.visible) .pie { padding-bottom: 76px; }
}

/* aviso de cookies (solo si hay medición configurada) */
.aviso-cookies { position: fixed; left: 16px; bottom: 16px; z-index: 200; width: min(460px, calc(100% - 32px)); padding: 20px 22px; border-radius: 18px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--linea); box-shadow: 0 30px 60px -20px rgba(6, 10, 20, 0.55); }
.aviso-cookies[hidden] { display: none; }
.aviso-cookies b { font-family: var(--display); font-size: 19px; font-weight: 600; }
.aviso-cookies p { font-size: 14px; color: var(--tinta-2); margin: 6px 0 14px; line-height: 1.5; }
.ac-botones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .pie-in { grid-template-columns: 1fr 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
  .nov-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .cap-lateral { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .act-rejilla, .faq-rejilla, .cap-heroe-in { grid-template-columns: minmax(0, 1fr); }
  .faq-rejilla .cabeza-seccion { position: static; }
  .nov-destacada { grid-template-columns: minmax(0, 1fr); }
  .nov-sello { width: 70px; height: 70px; font-size: 13px; }
  .cap-ficha { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; }
  .cap-ficha-libro { width: 110px; margin: 0; }
  .vias { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 640px) {
  .marca-txt b { font-size: 15.5px; }
  body.lang-zh .marca-txt b { font-size: 15.5px; letter-spacing: 0.04em; }
  .marca-txt small { font-size: 9px; letter-spacing: 0.16em; }
  .marca-libro { width: 28px; height: 40px; }
  .heroe-actualizado { margin-top: -12px; font-size: 13px; }
  .heroe-titulo small { font-size: 0.42em; }
  .pie-in { grid-template-columns: 1fr 1fr; }
  .pie-marca { flex-direction: row; }
  .pie-libro { width: 64px; }
  .nov-rejilla, .anexos-lista ul, .cap-lateral, .cap-paso { grid-template-columns: minmax(0, 1fr); }
  .paso.sig { grid-column: auto; }
  .claves li { flex-direction: column; gap: 4px; }
  .apartados li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .cap-ficha { grid-template-columns: 84px minmax(0, 1fr); padding: 16px; }
  .cap-ficha-libro { width: 84px; }
}
@media (max-width: 400px) {
  .marca-txt small { display: none; }
  .pie-in { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* novedades: tarjetas que se deslizan en horizontal */
  .nov-rejilla { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-inline: -1.25rem; padding: 4px 1.25rem 18px; scrollbar-width: thin; }
  .nov { flex: 0 0 82%; scroll-snap-align: start; }
  .heroe-datos dd { white-space: nowrap; }
  .heroe-actualizado { border-radius: 14px; }
}

/* Tres recuadros: lector visitante, lector suscriptor y libro impreso */
.planes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan.fisico { background: linear-gradient(180deg, var(--blanco), var(--blanco)) padding-box, linear-gradient(140deg, color-mix(in srgb, var(--oro) 70%, transparent), var(--linea)) border-box; border: 1px solid transparent; }
.plan.fisico .plan-alta a { color: var(--oro); font-weight: 700; text-decoration: none; }
.plan.fisico .plan-alta a:hover { text-decoration: underline; }
.plan.fisico .btn svg { width: 16px; height: 16px; }
@media (max-width: 1100px) { .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan.fisico { grid-column: 1 / -1; } }
@media (max-width: 640px) { .planes { grid-template-columns: minmax(0, 1fr); } }
.plan ul { align-content: start; }

/* credenciales: los tres prólogos y los reconocimientos de la obra */
.credenciales .cabeza-seccion { text-align: center; }
.credenciales .antetitulo { justify-content: center; }
.credenciales .antetitulo::before { display: none; }
.credenciales .titulo-seccion { margin-inline: auto; max-width: 22ch; }
.prologos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.prologo { position: relative; display: flex; flex-direction: column; margin: 0; padding: 34px 30px 28px; border-radius: 20px; background: var(--blanco); border: 1px solid var(--linea); box-shadow: var(--sombra); }
.prologo::before { content: '“'; position: absolute; top: 14px; right: 24px; font-family: var(--display); font-size: 96px; line-height: 1; color: color-mix(in srgb, var(--oro) 35%, transparent); }
.prologo-n { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--oro); margin-bottom: 18px; }
.prologo blockquote { margin: 0 0 24px; flex: 1; font-family: var(--display); font-size: 1.32rem; font-style: italic; line-height: 1.4; color: var(--tinta); }
body.lang-zh .prologo blockquote { font-style: normal; font-weight: 500; line-height: 1.7; font-size: 1.15rem; }
.prologo figcaption { padding-top: 18px; border-top: 1px solid var(--linea); }
.prologo figcaption b { display: block; font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--tinta); }
.prologo figcaption span { font-size: 14px; color: var(--tinta-3); line-height: 1.45; }
.avales { list-style: none; margin: clamp(2.2rem, 5vw, 3.4rem) 0 0; padding: clamp(22px, 3vw, 30px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; border-radius: 22px; border: 1px solid var(--linea); background: color-mix(in srgb, var(--blanco) 55%, transparent); }
.avales li { display: flex; flex-direction: column; gap: 12px; }
.avales svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--oro-suave); fill: none; stroke: var(--oro); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.avales b { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--tinta); line-height: 1.25; margin-bottom: 4px; }
.avales span { font-size: 14px; color: var(--tinta-2); line-height: 1.55; }
@media (max-width: 1100px) { .avales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .prologos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .avales { grid-template-columns: minmax(0, 1fr); } .prologo { padding: 28px 22px 22px; } }