/* Campus Cognitionis · demo r8 · capa propia (se carga la última)
   Ilustración: no es código del proyecto.
   Tipografía del Registro (sección 6): Newsreader (titulares, ExtraBold) + Inter (interfaz y texto);
   marca escrita en Baskervville Bold. Logotipo: el dorado de Campus (el isotipo Parabole aún no). */

@font-face { font-family: "Baskervville"; src: url("../fonts/baskervville-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --f-marca: "Baskervville", "Newsreader", Georgia, serif;
  --alto-cabecera: 64px;
  /* --c-oro-logo pasó a tokens.css como --c-oro (CC-08) */
}
html { scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body { font-family: var(--f-interfaz); }
.titular { font-family: var(--f-titular); font-weight: 800; }

/* ---------- W0001 · Cabecera fija ---------- */
.campus-cabecera { position: sticky; top: 0; z-index: 50; }
.campus-cabecera__in { min-height: var(--alto-cabecera); }
.marca { display: inline-flex; align-items: center; gap: 10px; color: var(--c-blanco); text-decoration: none; white-space: nowrap; }
.marca img { width: 38px; height: 38px; border-radius: 50%; }
.marca span { font-family: var(--f-marca); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.01em; }
.campus-acciones { display: flex; align-items: center; gap: 10px; }
.campus-cuenta {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28); color: var(--c-blanco);
  transition: background-color 0.2s ease;
}
.campus-cuenta svg { width: 20px; height: 20px; }
.campus-cuenta:hover, .campus-cuenta:focus-visible { background: rgba(255, 255, 255, 0.26); }

/* Megamenú: se superpone (posición absoluta bajo la cabecera); nunca empuja el contenido */
.campus-menu { flex-wrap: nowrap; }
.campus-menu__item { position: static; }
.submenu > summary { white-space: nowrap; }
.submenu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - var(--alto-cabecera) - 24px); overflow-y: auto;
  overscroll-behavior: contain;
}
.submenu__grupo { margin-bottom: 4px; }

/* ---------- W0103 · Dock flotante (fijo, se despliega al pasar el cursor o al tocar) ---------- */
.dock-flotante {
  position: fixed; z-index: 40; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: grid; justify-items: center;
}
.dock-flotante__pildora {
  width: 120px; height: 34px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(240, 237, 238, 0.16); -webkit-backdrop-filter: blur(var(--desenfoque-base)); backdrop-filter: blur(var(--desenfoque-base));
  box-shadow: var(--sombra-1);
  display: grid; place-items: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.dock-flotante__pildora::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #C9C6D4; }
.dock-flotante__panel {
  position: absolute; bottom: 0; left: 50%;
  display: flex; gap: 14px; padding: 12px 18px;
  border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(240, 237, 238, 0.16); -webkit-backdrop-filter: blur(var(--desenfoque-dock)); backdrop-filter: blur(var(--desenfoque-dock));
  box-shadow: var(--sombra-4);
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px) scale(0.96); transform-origin: 50% 100%;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.3s;
}
.dock-flotante:hover .dock-flotante__panel, .dock-flotante:focus-within .dock-flotante__panel, .dock-flotante[data-abierto] .dock-flotante__panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}
.dock-flotante:hover .dock-flotante__pildora, .dock-flotante:focus-within .dock-flotante__pildora, .dock-flotante[data-abierto] .dock-flotante__pildora { opacity: 0; }
.dock-flotante__app { display: grid; justify-items: center; gap: 6px; width: 72px; color: var(--c-blanco); text-decoration: none; font-size: 0.72rem; text-align: center; }
.dock-flotante__app img { width: 56px; height: 56px; border-radius: 14px; transition: transform 0.2s ease; }
.dock-flotante__app span { padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); white-space: nowrap; transition: background-color 0.2s ease; }
.dock-flotante__app:hover img, .dock-flotante__app:focus-visible img { transform: translateY(-4px) scale(1.08); }
.dock-flotante__app:hover span, .dock-flotante__app:focus-visible span { background: rgba(255, 255, 255, 0.26); }
@media (max-width: 760px) {
  .dock-flotante__panel { gap: 6px; padding: 10px; max-width: calc(100vw - 24px); overflow-x: auto; }
  .dock-flotante__app { width: 60px; }
  .dock-flotante__app img { width: 44px; height: 44px; }
}

/* ---------- Portada: destacado en carrusel con desenfoque al desplazarse ---------- */
.heroe { position: relative; overflow: hidden; background: var(--c-azul) url("../img/fondo-biblioteca.svg") center / cover no-repeat; }
.heroe__fondo { position: absolute; inset: 0; background: inherit; filter: blur(var(--desenfoque-scroll, 0px)); transform: scale(1.04); }
.heroe .carrusel { position: relative; }
.heroe__panel {
  display: grid; place-items: center; align-content: center; gap: 18px;
  min-height: clamp(420px, 62vh, 640px); margin: 48px clamp(16px, 8vw, 120px); padding: clamp(24px, 4vw, 56px);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radio-grande);
  background: rgba(30, 32, 37, 0.62); -webkit-backdrop-filter: blur(var(--desenfoque-barra)); backdrop-filter: blur(var(--desenfoque-barra));
  transition: background-color 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}
.heroe__panel:hover, .heroe__panel:focus-within { background: var(--c-azul); -webkit-backdrop-filter: none; backdrop-filter: none; }
.heroe__logo { width: 64px; height: 64px; border-radius: 50%; }
.heroe__titular { margin: 0; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.02em; }
.heroe__lema { margin: 0; font-family: var(--f-titular); font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.5rem); color: var(--c-texto-suave); }
.heroe__texto { max-width: 70ch; margin: 0; line-height: 1.7; text-align: left; color: var(--c-texto-suave); }
.heroe__texto strong { color: var(--c-blanco); }
.heroe__credito { position: absolute; right: 16px; bottom: 10px; margin: 0; font-size: 0.72rem; color: var(--c-texto-suave); }

/* ---------- Carruseles (r8): pista con ajuste por desplazamiento, alto constante, sin saltos ---------- */
[data-carrusel-r8] { position: relative; }
[data-carrusel-r8] .carrusel__pista {
  display: flex; gap: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  transform: none !important; transition: none !important;
}
[data-carrusel-r8] .carrusel__pista::-webkit-scrollbar { display: none; }
[data-carrusel-r8] .carrusel__diapositiva { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
[data-carrusel-r8] .carrusel__flecha {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(30, 32, 37, 0.6); color: var(--c-blanco); -webkit-backdrop-filter: blur(var(--desenfoque-fino)); backdrop-filter: blur(var(--desenfoque-fino));
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
[data-carrusel-r8] .carrusel__flecha svg { width: 22px; height: 22px; }
[data-carrusel-r8] .carrusel__flecha:hover, [data-carrusel-r8] .carrusel__flecha:focus-visible { background: rgba(255, 255, 255, 0.26); }
[data-carrusel-r8] .carrusel__flecha[disabled] { opacity: 0.3; cursor: default; }
[data-carrusel-r8] .carrusel__flecha--ant { left: 8px; }
[data-carrusel-r8] .carrusel__flecha--sig { right: 8px; }
[data-carrusel-r8] .carrusel__puntos { display: flex; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
[data-carrusel-r8] .carrusel__puntos button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: width 0.25s ease, background-color 0.25s ease; }
[data-carrusel-r8] .carrusel__puntos button[aria-current="true"] { width: 26px; background: var(--c-arena); }
[data-carrusel-r8] .carrusel__contador { position: absolute; right: 16px; top: 12px; z-index: 2; margin: 0; font-size: 0.78rem; color: var(--c-texto-suave); }
.heroe [data-carrusel-r8] .carrusel__puntos { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0; }

/* ---------- Lectura de artículos: menos zoom, columna cómoda ---------- */
.lectura-r8 { padding: clamp(24px, 4vw, 56px) 16px 96px; background: var(--c-azul); }
.lectura-r8__hoja {
  width: min(760px, 100%); margin-inline: auto; padding: clamp(22px, 4vw, 48px);
  border-radius: var(--radio-grande); background: var(--c-fondo); color: #23252A;
}
.lectura-r8__miga { margin: 0 0 18px; font-size: 0.8rem; color: var(--c-azul-suave); }
.lectura-r8__miga a { color: inherit; }
.lectura-r8__cabeza { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 28px; }
.lectura-r8__cabeza img { width: 140px; height: 180px; object-fit: cover; border-radius: 12px; }
.lectura-r8__antetitulo { margin: 0 0 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec-fuerte); }
.lectura-r8__titular { margin: 0; font-family: var(--f-titular); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.12; color: #1E2025; }
.lectura-r8__sub { margin: 10px 0 0; font-size: 0.95rem; color: var(--c-azul-suave); }
.lectura-r8__texto { font-size: 1rem; line-height: 1.75; max-width: 66ch; }
.lectura-r8__texto p { margin: 0 0 1.05em; }
.lectura-r8__texto h2 { margin: 1.8em 0 0.6em; font-family: var(--f-titular); font-weight: 800; font-size: 1.25rem; color: #1E2025; }
.lectura-r8__texto blockquote { margin: 1.4em 0; padding-left: 18px; border-left: 3px solid var(--sec-fuerte); font-family: var(--f-titular); font-style: italic; font-size: 1.1rem; }
.lectura-r8__texto figure { margin: 1.6em 0; }
.lectura-r8__texto figure img { width: 100%; height: auto; border-radius: 10px; }
.lectura-r8__texto figcaption { margin-top: 6px; font-size: 0.8rem; color: var(--c-azul-suave); }
.lectura-r8__autor { display: flex; align-items: center; gap: 14px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--c-azul-linea); }
.lectura-r8__autor img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.lectura-r8__autor strong { display: block; }
.lectura-r8__autor small { color: var(--c-azul-suave); }
.lectura-r8__relleno { margin: 0 0 18px; padding: 8px 12px; border: 1px dashed var(--c-azul-linea); border-radius: 8px; font-size: 0.78rem; color: var(--c-azul-suave); }
.lectura-r8__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
@media (max-width: 640px) {
  .lectura-r8__cabeza { grid-template-columns: 1fr; }
  .lectura-r8__cabeza img { width: 100%; height: 220px; }
}

/* ---------- Lienzo de cuadrícula fina para imágenes que faltan ---------- */
.cuadricula { background: #F0EDEE url("../img/cuadricula.svg") center / 200px repeat; }

/* ---------- Pie ---------- */
.pie-r8 { padding: 48px 0 96px; background: #17191D; color: var(--c-texto-suave); font-size: 0.9rem; }
.pie-r8__in { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; }
.pie-r8 h2 { margin: 0 0 10px; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dorado-texto); }
.pie-r8 ul { margin: 0; padding: 0; list-style: none; }
.pie-r8 a { display: inline-block; padding: 3px 0; color: var(--c-texto-suave); text-decoration: none; }
.pie-r8 a:hover { color: var(--c-blanco); text-decoration: underline; }
.pie-r8__marca p { margin: 12px 0 0; }
@media (max-width: 900px) { .pie-r8__in { grid-template-columns: 1fr 1fr; } }

/* ---------- Colores de categoría cerrados (Registro, sección 5.4) ---------- */
[data-seccion="literaria"] { --sec-fuerte: #8E3B3F; --sec-titulo: #D9A9AB; --sec-portada-a: #6E2C30; --sec-portada-b: #8E3B3F; }
[data-seccion="cientifica"] { --sec-fuerte: #3C6A69; --sec-titulo: #A6C8C7; --sec-portada-a: #2C4F4E; --sec-portada-b: #3C6A69; }
[data-seccion="historiografica"] { --sec-fuerte: #8A6E2E; --sec-titulo: #C9AA61; --sec-portada-a: #6E5822; --sec-portada-b: #C9AA61; }   /* botones: tono oscuro de #C9AA61 para que el texto blanco se lea */
[data-seccion="deportiva"] { --sec-fuerte: #7C7F1E; --sec-titulo: #DDE15A; --sec-portada-a: #5E6016; --sec-portada-b: #DDE15A; }   /* limón #DDE15A solo como acento */
[data-seccion="tonos"] { --sec-fuerte: #514CA6; --sec-titulo: #B4B0E6; --sec-portada-a: #3D3982; --sec-portada-b: #514CA6; }
[data-seccion="nacion"] { --sec-fuerte: #A4553A; --sec-titulo: #E3A58E; --sec-portada-a: #7E412C; --sec-portada-b: #C06B4D; }
[data-seccion="antropologica"] { --sec-fuerte: #4A2E1A; --sec-titulo: #F4EFE4; --sec-portada-a: #4A2E1A; --sec-portada-b: #7A5A3E; }

/* ---------- Piezas auxiliares ---------- */
.lectura-r8__cabeza--solo { grid-template-columns: 1fr; }
.lectura-r8__cabeza > .cuadricula { display: block; width: 140px; height: 180px; border-radius: 12px; }
.lectura-r8__autor .cuadricula { flex: none; width: 48px; height: 48px; border-radius: 50%; }
.pg-tarjeta__lienzo { display: block; width: 100%; aspect-ratio: 4 / 3; }
.pg-revista__foto.cuadricula { aspect-ratio: 4 / 3; border-radius: var(--radio-grande); }
.portada.cuadricula { color: #1E2025; }
.portada.cuadricula .portada__revista, .portada.cuadricula .portada__nombre { color: #1E2025; }
/* El contenido no queda tapado por el dock flotante */
main { padding-bottom: 72px; }
.heroe__titular { font-family: var(--f-titular); font-weight: 800; text-transform: none; letter-spacing: 0; }

/* ---------- Ajustes r8 (2): tarjetas con un solo título; franja del color de la categoría ---------- */
.cartel .portada__nombre { display: none; }                       /* el título va solo abajo */
.cartel { background: var(--sec-fuerte); }
.portada--foto::after { background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--sec-fuerte) 92%, transparent) 100%); }
.cartel__pie { background: var(--sec-fuerte); color: var(--c-blanco); }
.cartel__titulo { color: var(--c-blanco); }
.cartel__meta { color: rgba(255, 255, 255, 0.78); }

/* ---------- Cabecera y fecha: cristal desenfocado también con el menú plegado ---------- */
.campus-cabecera {
  background: rgba(30, 32, 37, 0.62);
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.campus-fecha {
  background: rgba(30, 32, 37, 0.62);
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1); border-top: 0;
}

/* ---------- W0103 · la píldora mide lo mismo que el botón «Ver referencias V3» ---------- */
:root { --ancho-boton-v3: 220px; }
.demo-barra button { width: var(--ancho-boton-v3); text-align: center; }
.dock-flotante__pildora { width: var(--ancho-boton-v3); }

/* ---------- Cristal de la cabecera sin anidar desenfoques ----------
   Un backdrop-filter dentro de otro deja de ver la página: la cabecera dibuja su cristal en una capa propia
   (::before) y así el megamenú y la fecha conservan su propio desenfoque sobre el contenido. */
.campus-cabecera { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: auto; }
.campus-cabecera::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(30, 32, 37, 0.62);
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2);
}
.submenu__panel, .campus-fecha {
  background: rgba(30, 32, 37, 0.72);
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2);
}

/* ---------- Iconos originales de Wix (Archivos del sitio) ---------- */
.portada__icono { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; box-shadow: var(--sombra-1); }
.portada { position: relative; }
.pg-revista__icono, .lectura-r8__icono { width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; vertical-align: middle; }
.pg-campo__icono { width: 44px; height: 44px; border-radius: 50%; }
.titular__icono { width: 1.1em; height: 1.1em; margin-right: 0.35em; border-radius: 50%; vertical-align: -0.15em; }

/* ---------- Ronda 4 · cabecera y megamenú: un mismo cuerpo de cristal ----------
   El cristal de la cabecera (::before) crece hacia abajo hasta cubrir el panel abierto; el panel no tiene
   fondo propio, así que cabecera y desplegable son una sola superficie, sin costura. */
.campus-cabecera::before { bottom: calc(-1 * var(--alto-panel, 0px)); transition: bottom 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), border-radius 0.25s ease; }
.campus-cabecera[data-abierto]::before { border-radius: 0 0 var(--radio-grande) var(--radio-grande); box-shadow: var(--sombra-5); }
.submenu__panel { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; }
.campus-cabecera[data-abierto] .campus-fecha { opacity: 0; pointer-events: none; }
.campus-fecha { transition: opacity 0.2s ease; }

/* ---------- Lectura: hoja con proporción A4 (210 × 297) ---------- */
.lectura-r8__hoja { width: min(960px, 100%); min-height: calc(min(960px, 100vw - 32px) * 1.414); padding: clamp(28px, 6vw, 84px) clamp(22px, 7vw, 96px); }
.lectura-r8__texto { max-width: none; font-size: 1.0625rem; }
.lectura-r8__cabeza { grid-template-columns: 180px minmax(0, 1fr); }
.lectura-r8__cabeza img, .lectura-r8__cabeza > .cuadricula { width: 180px; height: 230px; }

/* ---------- Suscripciones más ancha ---------- */
.pg-cuenta .envoltura { width: min(1480px, 100% - 48px); }
.pg-cuenta__in { grid-template-columns: 240px minmax(0, 1fr); }
.pg-susc { grid-template-columns: minmax(300px, 0.75fr) minmax(0, 2.25fr); }
.pg-tesela { width: 48px; height: 48px; border-radius: 12px; }
.pg-tesela--grande { width: 84px; height: 84px; border-radius: 18px; }
.pg-tesela--mym { width: 110px; height: 110px; border-radius: 22px; }
.pg-otras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pg-otras li { display: grid; justify-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.6); }
.pg-otras img { max-width: 100%; height: 36px; object-fit: contain; }
.pg-otras .boton { padding: 6px 14px; font-size: 0.8rem; }

/* ---------- HeptaClasificación: categorías con isotipo, lema y agrupaciones ---------- */
.hexa__isotipo { width: 120px; height: 120px; margin-bottom: 18px; border-radius: 50%; box-shadow: var(--sombra-3); }
#s-literaria .bloque__cabeza, [id^="s-"][role="tabpanel"] .bloque__cabeza { display: grid; justify-items: start; }

/* ---------- G0004 · Vista previa del escrito ---------- */
.previa { width: min(960px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radio-grande); background: transparent; color: var(--c-blanco); }
.previa::backdrop { background: rgba(14, 15, 18, 0.55); -webkit-backdrop-filter: blur(var(--desenfoque-fino)); backdrop-filter: blur(var(--desenfoque-fino)); }
.previa__caja {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radio-grande);
  background: rgba(30, 32, 37, 0.78); -webkit-backdrop-filter: blur(var(--desenfoque-ventana)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-ventana)) saturate(1.2);
}
.previa__portada { min-height: 360px; background: var(--sec-fuerte) center / cover no-repeat; }
.previa__portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.previa__texto { display: grid; align-content: center; gap: 12px; padding: clamp(22px, 4vw, 44px); }
.previa__antetitulo { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-texto-suave); }
.previa__icono { width: 28px; height: 28px; border-radius: 50%; }
.previa__titulo { margin: 0; font-family: var(--f-titular); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.1; }
.previa__resumen { margin: 0; line-height: 1.7; color: var(--c-texto-suave); }
.previa__autor { margin: 0; font-weight: 600; }
.previa__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.previa__abrir { background: var(--sec-fuerte); color: var(--c-blanco); }
.previa__nota { margin: 6px 0 0; font-size: 0.78rem; color: var(--c-texto-suave); }
.previa .ventana__cerrar { position: absolute; z-index: 2; top: 12px; right: 12px; }
@media (max-width: 760px) { .previa__caja { grid-template-columns: 1fr; } .previa__portada { min-height: 200px; } }


/* ---------- Ronda 5 · toda transparencia lleva desenfoque (en todo el ecosistema) ---------- */
.dock__app span, .campus-destacado__credito, .boletin,
.boletin__campo input, .revista__inicial, .carrusel__flecha, .carrusel__puntos button, .pg-fila, .pg-boton-activada,
.dock-flotante__app span, [data-carrusel-r8] .carrusel__puntos button, .pg-otras li, .cuenta-secundario,
.cuenta-credito, .cuenta-campo input, .cuenta-info, .onboarding__nav, .aether__info, .esc-nueva, .boton--cristal,
.esc-dock .dock__lista, .aviso-item__cerrar, .boton--contorno, .boton--oscuro, .pg-chip, .campus-menu a, .campus-menu__boton,
.submenu summary, .pg-cristal, .pg-panel-claro, .lectura__btn-blanco, .lectura__btn-tinte {
  -webkit-backdrop-filter: blur(var(--desenfoque-base)) saturate(1.15); backdrop-filter: blur(var(--desenfoque-base)) saturate(1.15);
}

/* ---------- W0101 · destacado: más contenido, con efecto al pasar el cursor ---------- */
.heroe__panel {
  max-width: 1040px; min-height: clamp(340px, 52vh, 540px); margin: 40px auto; padding: clamp(28px, 4vw, 56px);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}
.heroe__panel:hover, .heroe__panel:focus-within {
  transform: translateY(-4px); border-color: rgba(232, 218, 178, 0.45);
  background: rgba(30, 32, 37, 0.92); box-shadow: var(--sombra-5);
}

/* ---------- W0501 · isotipo junto al titular de la revista ---------- */
.pg-revista__isotipo { width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; box-shadow: var(--sombra-3); }

/* ---------- W0002 · marca y derechos debajo de las columnas, centrados ---------- */
.pie-r8__in { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pie-r8__marca { order: 99; grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; margin-top: 18px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.pie-r8__marca p { margin: 0; }
@media (max-width: 900px) { .pie-r8__in { grid-template-columns: 1fr 1fr; } }

/* ---------- W0001TI = diseño de L0001TC: pestaña gris que cuelga de la barra ---------- */
.campus-fecha, .fecha-colgante {
  position: absolute; top: 100%; right: max(24px, calc((100% - var(--ancho-max)) / 2)); margin: 0;
  padding: 7px 22px 9px; border: 0; border-radius: 0 0 18px 18px;
  background: var(--c-fecha); color: var(--c-blanco); font-size: 0.8rem; white-space: nowrap;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.fecha-colgante:empty, .campus-fecha:empty { display: none; }
header.cabecera { position: relative; }

/* ---------- L0001TA · la firma de Lentes.io va en el pie, junto a la marca y Privacidad ---------- */
.pie__firma { margin: 0; font-size: 0.78rem; color: var(--c-texto-suave); }

/* ---------- Ronda 6 · W0601IB (hoy L1101IB): solo la portada del folio es grande; el isotipo del antetítulo, pequeño ---------- */
.lectura-r8__cabeza img { width: auto; height: auto; }
.lectura-r8__cabeza > img, .lectura-r8__cabeza > .cuadricula { width: 180px; height: 230px; object-fit: cover; border-radius: 12px; }
.lectura-r8__antetitulo .lectura-r8__icono { display: inline-block; width: 28px; height: 28px; margin: 0 10px 0 0; border-radius: 50%; vertical-align: middle; object-fit: contain; }

/* ---------- Fechas (W0001TI y L0001TC): forma de pestaña y el mismo cristal que su cabecera ---------- */
.campus-fecha, .fecha-colgante {
  background: rgba(30, 32, 37, 0.62); color: var(--c-texto-suave);
  border: 1px solid rgba(255, 255, 255, 0.1); border-top: 0;
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2);
}

/* ---------- W0102BG · «Entrar» centrado ---------- */
.hexa__entrar { display: flex; justify-content: center; margin-top: 18px; }

/* ---------- Autor: nombre enlazado ---------- */
.autor-enlace { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.autor-enlace:hover, .autor-enlace:focus-visible { color: var(--sec-fuerte); }

/* ---------- G0005 · Ficha emergente del autor ---------- */
.ficha-autor { width: min(820px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--radio-grande); background: transparent; color: var(--c-blanco); }
.ficha-autor::backdrop { background: rgba(14, 15, 18, 0.55); -webkit-backdrop-filter: blur(var(--desenfoque-fino)); backdrop-filter: blur(var(--desenfoque-fino)); }
.ficha-autor__caja {
  position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; padding: clamp(20px, 4vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radio-grande);
  background: rgba(30, 32, 37, 0.8); -webkit-backdrop-filter: blur(var(--desenfoque-ventana)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-ventana)) saturate(1.2);
}
.ficha-autor__foto { width: 220px; aspect-ratio: 4 / 5; border-radius: 16px; }
.ficha-autor__texto { display: grid; align-content: start; gap: 10px; }
.ficha-autor__cargo, .ficha-autor__etiqueta { margin: 0; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dorado-texto); }
.ficha-autor__nombre { margin: 0; font-family: var(--f-titular); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.ficha-autor__campos, .perfil__campos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ficha-autor__campos li, .perfil__campos li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: 0.82rem; -webkit-backdrop-filter: blur(var(--desenfoque-fino)); backdrop-filter: blur(var(--desenfoque-fino)); }
.ficha-autor__campos img, .perfil__campos img { width: 24px; height: 24px; border-radius: 50%; }
.ficha-autor__bio { margin: 0; line-height: 1.65; color: var(--c-texto-suave); }
.ficha-autor__folios { margin: 0; padding-left: 1.1em; line-height: 1.7; }
.ficha-autor__folios a { color: var(--c-blanco); }
.ficha-autor__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ficha-autor .ventana__cerrar { position: absolute; top: 12px; right: 12px; }
@media (max-width: 700px) { .ficha-autor__caja { grid-template-columns: 1fr; } .ficha-autor__foto { width: 140px; } }

/* ---------- Página de perfil del autor (Lentes.io) ---------- */
.perfil { padding-block: clamp(40px, 7vw, 96px) 24px; }
.perfil__in {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: center;
  padding: clamp(22px, 4vw, 44px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radio-grande);
  background: rgba(30, 32, 37, 0.66); -webkit-backdrop-filter: blur(var(--desenfoque-ventana)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-ventana)) saturate(1.2); color: var(--c-blanco);
}
.perfil__foto { width: 280px; aspect-ratio: 4 / 5; border-radius: 20px; }
.perfil__texto { display: grid; gap: 12px; }
.perfil__cargo { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-dorado-texto); }
.perfil__nombre { margin: 0; font-family: var(--f-titular); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; }
.perfil__bio { margin: 0; max-width: 70ch; line-height: 1.7; color: var(--c-texto-suave); }
.perfil__vacio { list-style: none; color: var(--c-texto-suave); }
@media (max-width: 760px) { .perfil__in { grid-template-columns: 1fr; } .perfil__foto { width: 180px; } }

/* ---------- Isotipo de «contacto» como imagen de autor (sin fotos todavía) ---------- */
.autor-contacto { aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: contain; box-shadow: var(--sombra-3); }
.ficha-autor__foto.autor-contacto { width: 200px; }
.perfil__foto.autor-contacto { width: 240px; }
.lectura-r8__autor-foto { width: 48px; }

/* ---------- Ronda 7 · W0101CE sin efecto al pasar el cursor ---------- */
.heroe__panel:hover, .heroe__panel:focus-within { transform: none; box-shadow: none; border-color: rgba(255, 255, 255, 0.2); background: rgba(30, 32, 37, 0.62); -webkit-backdrop-filter: blur(var(--desenfoque-barra)); backdrop-filter: blur(var(--desenfoque-barra)); }

/* ---------- W0207 · Revista Folios como en Wix: tira de capturas, cristal central con la tesela, banda del color ---------- */
#carrusel-revistas { position: relative; }
.revista-slide { --banda: var(--sec-titulo); }
.revista-slide[data-seccion="literaria"] { --banda: #8E3B3F; }
.revista-slide[data-seccion="cientifica"] { --banda: #3C6A69; }
.revista-slide[data-seccion="historiografica"] { --banda: #C9AA61; }
.revista-slide[data-seccion="deportiva"] { --banda: #DDE15A; }
.revista-slide[data-seccion="tonos"] { --banda: #514CA6; }
.revista-slide[data-seccion="nacion"] { --banda: #C06B4D; }
.revista-slide[data-seccion="antropologica"] { --banda: #F4EFE4; }
.revista-slide__caja { padding: 0; background: none; border-radius: var(--radio-grande); overflow: hidden; }
.revista-slide__titulo { padding: 0 4px 14px; }
.revista-slide__franja {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: clamp(300px, 34vw, 420px);
  background: #2A2C30; border-bottom: clamp(48px, 5vw, 66px) solid var(--banda);
}
.revista-slide__collage { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: grayscale(1) contrast(1.05); }
.revista-slide__tarjeta {
  position: absolute; inset: 14% 20% 14% 20%; display: grid; place-items: center; align-content: center; gap: 18px;
  border-radius: var(--radio-grande); background: rgba(150, 150, 150, 0.45);
  -webkit-backdrop-filter: blur(var(--desenfoque-ventana)) saturate(0.9); backdrop-filter: blur(var(--desenfoque-ventana)) saturate(0.9);
  box-shadow: var(--sombra-3);
}
.revista-slide__icono { width: clamp(96px, 9vw, 126px); height: auto; border-radius: 22px; box-shadow: var(--sombra-3); }
.revista-slide__entrar { padding: 12px 34px; font-size: 1.05rem; }
#carrusel-revistas .carrusel__puntos { position: absolute; left: 0; right: 0; bottom: clamp(18px, 2vw, 26px); margin: 0; }
#carrusel-revistas .carrusel__puntos button { background: rgba(30, 32, 37, 0.45); }
#carrusel-revistas .carrusel__puntos button[aria-current="true"] { background: var(--c-blanco); }

/* ---------- W0105 · Contacto y suscripción como en Wix, con la tipografía del Registro ---------- */
.contacto {
  padding-block: clamp(48px, 7vw, 96px);
  background:
    radial-gradient(60% 80% at 8% 92%, rgba(28, 39, 38, 0.65), transparent 70%),
    radial-gradient(70% 90% at 0% 0%, rgba(196, 211, 210, 0.45), transparent 60%),
    linear-gradient(120deg, #6E7E7C 0%, #4F605E 45%, #3E4D4B 100%);
  color: var(--c-blanco);
}
.contacto__in { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: center; }
.contacto__titulo { font-family: var(--f-titular); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: 0.01em; padding-bottom: 12px; border-bottom: 0; position: relative; }
.contacto__titulo::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(280px, 80%); height: 4px; border-radius: 2px; background: #2A2C30; }
.contacto__correo { font-family: var(--f-interfaz); font-weight: 600; color: var(--c-blanco); }
.contacto__correo svg path { fill: var(--c-blanco); stroke: #4F605E; }
.boletin {
  padding: clamp(22px, 3vw, 34px); border-radius: 14px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.1); backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.1);
}
.boletin__titulo { font-family: var(--f-titular); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.boletin__sub { font-family: var(--f-interfaz); font-weight: 300; color: rgba(255, 255, 255, 0.85); }
.boletin__campo input {
  width: 100%; padding: 14px 22px; border: 1px solid rgba(232, 218, 178, 0.55); border-radius: 4px;
  background: rgba(255, 255, 255, 0.08); color: var(--c-blanco); font: 500 1.05rem/1.2 var(--f-interfaz);
  -webkit-backdrop-filter: blur(var(--desenfoque-fino)); backdrop-filter: blur(var(--desenfoque-fino));
}
.boletin__campo input::placeholder { color: rgba(232, 218, 178, 0.75); }
.boletin__fila { justify-content: space-between; }
.boletin__acepto { color: rgba(232, 218, 178, 0.9); font-family: var(--f-interfaz); }
.boletin__acepto input { width: 34px; height: 34px; accent-color: #C4B898; }
.boletin__antibots {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  min-width: 260px; padding: 14px 16px; border-radius: 3px; background: #F9F9F9; color: #222; font: 500 0.88rem/1.2 var(--f-interfaz);
  box-shadow: var(--sombra-1);
}
.boletin__casilla { grid-row: 1 / 3; width: 26px; height: 26px; border: 2px solid #C1C1C1; border-radius: 3px; background: #FFF; }
.boletin__antibots small { font-size: 0.72rem; color: #777; }
.boton--beige { background: #C4B898; color: var(--c-blanco); border-radius: 10px; padding: 14px 88px; font-weight: 500; box-shadow: var(--sombra-2); }
@media (max-width: 860px) { .contacto__in { grid-template-columns: 1fr; } }

/* ---------- W0002IA · logotipo del pie centrado en vertical con la marca ---------- */
.pie-r8 .marca { display: inline-flex; align-items: center; gap: 10px; padding: 0; }
.pie-r8 .marca img { display: block; }

/* ---------- W0102TB-01 · titular de la HeptaClasificación en dos filas ---------- */
.titular__frase { display: block; }
#hexa-t .titular__icono { vertical-align: -0.15em; }

/* ---------- W0103 · dock más ancho: cada acceso con su hueco, sin que las etiquetas se monten ---------- */
.dock-flotante__panel { gap: 10px; padding: 14px 22px; }
.dock-flotante__app { width: auto; min-width: 104px; }
.dock-flotante__app img { width: 64px; height: 64px; border-radius: 16px; }
.dock-flotante__app span { padding: 4px 12px; font-size: 0.8rem; }
@media (max-width: 760px) {
  .dock-flotante__panel { gap: 6px; padding: 10px; }
  .dock-flotante__app { min-width: 72px; }
  .dock-flotante__app img { width: 48px; height: 48px; }
  .dock-flotante__app span { padding: 3px 8px; font-size: 0.72rem; }
}

/* ---------- G0004 y G0005 · Hojas emergentes (como la ficha de un libro en Apple Books) ----------
   Banda superior del color de la categoría con la portada, el título, el autor y una tarjeta de acciones;
   debajo, cuerpo claro con el resumen y los estantes «Más de…». Las hojas vecinas asoman a los lados. */
.hoja {
  width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: #1E2025; overflow: hidden;
}
.hoja::backdrop { background: rgba(14, 15, 18, 0.5); -webkit-backdrop-filter: blur(var(--desenfoque-base)); backdrop-filter: blur(var(--desenfoque-base)); }
.hoja[open] { animation: none; }
.hoja__carril {
  position: relative; height: 100%; display: grid; grid-template-columns: 1fr minmax(0, 1180px) 1fr;
  align-items: stretch; padding: 32px 0 0; gap: 28px; overflow: hidden;
}
.hoja__caja {
  grid-column: 2; position: relative; overflow-y: auto; overscroll-behavior: contain;
  border-radius: 34px 34px 0 0; background: #F6F4F2; box-shadow: var(--sombra-5);
  animation: hoja-sube 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hoja__caja--entra-1 { animation: hoja-desde-dcha 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hoja__caja--entra--1 { animation: hoja-desde-izda 0.32s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes hoja-sube { from { transform: translateY(40px); opacity: 0; } }
@keyframes hoja-desde-dcha { from { transform: translateX(60px); opacity: 0.4; } }
@keyframes hoja-desde-izda { from { transform: translateX(-60px); opacity: 0.4; } }

/* Banda del color de la categoría */
.hoja__banda {
  position: relative; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 52px; align-items: start;
  padding: 100px 110px 48px; color: #FFFFFF;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sec-fuerte) 88%, #FFFFFF) 0%, var(--sec-fuerte) 100%);
}
.hoja__cerrar, .hoja__acciones { position: absolute; top: 18px; }
.hoja__cerrar {
  left: 18px; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: #FFFFFF; background: rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(var(--desenfoque-base)); backdrop-filter: blur(var(--desenfoque-base));
}
.hoja__acciones {
  right: 18px; display: flex; gap: 4px; padding: 4px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.18); -webkit-backdrop-filter: blur(var(--desenfoque-base)); backdrop-filter: blur(var(--desenfoque-base));
}
.hoja__acciones > button { width: 52px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: #FFFFFF; cursor: pointer; }
.hoja__cerrar:hover, .hoja__acciones > button:hover { background: rgba(255, 255, 255, 0.18); }
.hoja__cerrar:focus-visible, .hoja__acciones > button:focus-visible, .hoja__flecha:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.hoja__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 3; min-width: 210px; margin: 0; padding: 6px; list-style: none;
  border-radius: 14px; background: rgba(30, 32, 37, 0.88); -webkit-backdrop-filter: blur(var(--desenfoque-barra)); backdrop-filter: blur(var(--desenfoque-barra));
  box-shadow: var(--sombra-3);
}
.hoja__menu[hidden] { display: none; }
.hoja__menu a { display: block; padding: 10px 12px; border-radius: 9px; color: #FFFFFF; text-decoration: none; font-size: 0.92rem; }
.hoja__menu a:hover, .hoja__menu a:focus-visible { background: rgba(255, 255, 255, 0.14); }
.hoja__aviso {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 999px;
  background: rgba(30, 32, 37, 0.85); color: #FFFFFF; font-size: 0.85rem; -webkit-backdrop-filter: blur(var(--desenfoque-base)); backdrop-filter: blur(var(--desenfoque-base));
}
.hoja__aviso[hidden] { display: none; }

/* Portada con forma de libro */
.hoja__portada {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 4px 10px 10px 4px;
  background: color-mix(in srgb, var(--sec-fuerte) 70%, #000000);
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.35), inset 6px 0 0 rgba(255, 255, 255, 0.12);
}
.hoja__portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hoja__portada > img.hoja__portada-icono { inset: auto 22% 18%; width: 56%; height: auto; aspect-ratio: 1; }
.hoja__portada::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, transparent 42%); }
.hoja__portada-rotulo { position: absolute; z-index: 1; top: 16px; left: 18px; right: 18px; display: grid; gap: 4px; }
.hoja__portada-rotulo b { font: 800 1.15rem/1.15 var(--f-titular); }
.hoja__portada-rotulo span { font-size: 0.85rem; font-weight: 600; opacity: 0.9; }
.hoja__portada--autor { aspect-ratio: 1; border-radius: 50%; width: 100%; height: auto; padding: 0; object-fit: cover; }

.hoja__cabeza { display: grid; gap: 12px; align-content: start; min-width: 0; }
.hoja__antetitulo { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.hoja__titulo { margin: 0; font: 800 clamp(1.9rem, 3.4vw, 2.7rem)/1.08 var(--f-titular); color: #FFFFFF; }
.hoja__autor { margin: 0; font-size: 1.15rem; font-weight: 600; }
.hoja__autor a, .hoja__autor .autor-enlace { color: #FFFFFF; text-decoration: none; }
.hoja__autor a::after { content: " ›"; font-size: 1.2em; }
.hoja__autor a:hover { text-decoration: underline; }
.hoja__meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; font-weight: 600; color: color-mix(in srgb, #FFFFFF 82%, var(--sec-fuerte)); }
.hoja__icono { width: 22px; height: 22px; border-radius: 50%; }

/* Tarjetas de cristal dentro de la banda */
.hoja__tarjeta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 12px; padding: 22px 24px;
  border-radius: 18px; background: rgba(255, 255, 255, 0.13); color: #FFFFFF; text-decoration: none;
  -webkit-backdrop-filter: blur(var(--desenfoque-barra)); backdrop-filter: blur(var(--desenfoque-barra));
}
.hoja__tarjeta + .hoja__tarjeta { margin-top: 0; }
.hoja__tarjeta-texto { display: grid; gap: 4px; }
.hoja__tarjeta-texto strong { font-size: 1.2rem; }
.hoja__tarjeta-texto span { opacity: 0.85; }
.hoja__tarjeta-botones { display: grid; gap: 10px; width: min(220px, 40%); }
.hoja__obtener, .hoja__muestra {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; font: 700 1rem/1 var(--f-interfaz); text-decoration: none; cursor: pointer;
}
.hoja__obtener { background: #FFFFFF; color: #1E2025; }
.hoja__muestra { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.hoja__obtener:hover { background: #F0ECE2; }
.hoja__muestra:hover { background: rgba(255, 255, 255, 0.28); }
.hoja__tarjeta--revista { display: grid; gap: 14px; justify-content: stretch; }
.hoja__tarjeta--revista:hover { background: rgba(255, 255, 255, 0.2); }
.hoja__tarjeta-enlace { font: 700 1.3rem/1.2 var(--f-titular); }
.hoja__tarjeta-enlace::after { content: " ›"; }
.hoja__revista { display: flex; align-items: center; gap: 14px; }
.hoja__revista img { width: 44px; height: 44px; border-radius: 10px; }
.hoja__revista > span { display: grid; gap: 2px; }
.hoja__revista small { font-size: 0.85rem; opacity: 0.85; }

/* Cuerpo claro */
.hoja__cuerpo { padding: 40px 110px 80px; }
.hoja__seccion { padding: 28px 0; border-top: 1px solid #DDD8D2; }
.hoja__seccion:first-child { border-top: 0; padding-top: 0; }
.hoja__seccion[hidden] { display: none; }
.hoja__seccion h3 { margin: 0 0 12px; font: 800 1.4rem/1.2 var(--f-titular); color: #1E2025; }
.hoja__seccion h3 a { color: inherit; text-decoration: none; }
.hoja__seccion h3 a::after { content: " ›"; color: #8A8780; }
.hoja__resumen {
  margin: 0; max-width: 1000px; font-size: 1.05rem; line-height: 1.6; color: #6B6862;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.hoja__resumen--entera { display: block; -webkit-line-clamp: unset; }
.hoja__mas { margin-top: 4px; padding: 0; border: 0; background: none; color: #1E2025; font: 700 1rem var(--f-interfaz); cursor: pointer; }
.hoja__resumen--entera + .hoja__mas { display: none; }
.hoja__nota { margin: 14px 0 0; font-size: 0.85rem; color: #8A8780; }
.hoja__estante { display: flex; gap: 22px; margin: 0; padding: 4px 0 8px; list-style: none; overflow-x: auto; }
.hoja__estante a { display: grid; gap: 10px; width: 150px; color: #1E2025; text-decoration: none; }
.hoja__tapa { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px 8px 8px 3px; background: var(--sec-fuerte); box-shadow: var(--sombra-3); }
.hoja__tapa img { width: 100%; height: 100%; object-fit: cover; }
.hoja__tapa-titulo { font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.hoja__estante a:hover .hoja__tapa { transform: translateY(-3px); transition: transform 0.2s ease; }
.hoja__lista { margin: 0; padding-left: 1.1em; line-height: 1.8; }
.hoja__lista a { color: #1E2025; }

/* Hojas vecinas que asoman y flechas */
.hoja__vecina {
  grid-row: 1; align-self: stretch; overflow: hidden; border-radius: 34px 34px 0 0; background: #F6F4F2; cursor: pointer; opacity: 0.9;
  box-shadow: var(--sombra-5);
}
.hoja__vecina[hidden] { visibility: hidden; display: block; }
.hoja__vecina--anterior { grid-column: 1; justify-self: end; width: 120px; border-radius: 34px 34px 0 0; }
.hoja__vecina--siguiente { grid-column: 3; justify-self: start; width: 120px; }
.hoja__vecina-banda { height: 46%; display: grid; place-items: center; padding: 20px; background: var(--sec-fuerte); }
.hoja__vecina-banda img { width: 100%; max-width: 180px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: var(--sombra-3); }
.hoja__vecina--anterior .hoja__vecina-banda { justify-items: end; }
.hoja__vecina--siguiente .hoja__vecina-banda { justify-items: start; }
.hoja__flecha {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 44px; height: 72px; display: grid; place-items: center;
  border: 0; border-radius: 14px; background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer;
}
.hoja__flecha:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }
.hoja__flecha[hidden] { display: none; }
.hoja__flecha--anterior { left: 8px; }
.hoja__flecha--siguiente { right: 8px; }

/* Ficha del autor con la misma hoja */
.ficha-autor.hoja { width: 100vw; }
.ficha-autor .hoja__carril { grid-template-columns: 1fr minmax(0, 980px) 1fr; }
.ficha-autor .hoja__banda { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
.ficha-autor .ficha-autor__campos li { color: #FFFFFF; background: rgba(255, 255, 255, 0.14); }

@media (max-width: 1100px) {
  .hoja__carril { grid-template-columns: 16px minmax(0, 1fr) 16px; gap: 0; padding-top: 20px; }
  .hoja__vecina { display: none; }
  .hoja__banda { padding: 86px 32px 36px; gap: 32px; }
  .hoja__cuerpo { padding: 32px 32px 64px; }
}
@media (max-width: 720px) {
  .hoja__banda, .ficha-autor .hoja__banda { grid-template-columns: 1fr; }
  .hoja__portada { width: min(220px, 60vw); justify-self: center; }
  .hoja__tarjeta { flex-direction: column; align-items: stretch; }
  .hoja__tarjeta-botones { width: 100%; }
  .hoja__flecha { top: auto; bottom: 12px; transform: none; background: rgba(30, 32, 37, 0.6); }
}

/* ---------- L0015 · Bienvenida de Lentes.io ---------- */
.bienvenida-lentes { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 26px; background: #FFFFFF; color: #1E2025; box-shadow: var(--sombra-5); }
.bienvenida-lentes::backdrop { background: rgba(239, 237, 238, 0.55); -webkit-backdrop-filter: blur(var(--desenfoque-ventana)); backdrop-filter: blur(var(--desenfoque-ventana)); }
.bienvenida-lentes__caja { display: grid; padding: 64px clamp(24px, 8vw, 72px) 40px; }
.bienvenida-lentes__icono { justify-self: center; width: 140px; height: 140px; margin-bottom: 72px; border-radius: 32px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); }
.bienvenida-lentes__titulo { margin: 0; font: 700 clamp(1.6rem, 3.4vw, 2rem)/1.2 var(--f-interfaz); letter-spacing: -0.01em; color: #1E2025; }
.bienvenida-lentes__entrada { margin: 4px 0 0; font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.3; color: #86868B; }
.bienvenida-lentes__nota { margin: 26px 0 0; font-size: 0.95rem; color: #86868B; }
.bienvenida-lentes__privacidad { margin-top: 100px; }
.bienvenida-lentes__texto { margin: 30px 0 0; font-size: 0.95rem; line-height: 1.5; font-weight: 500; color: #86868B; }
.bienvenida-lentes__enlace { margin-top: 2px; justify-self: start; color: #1E2025; font-size: 0.95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bienvenida-lentes__empezar {
  justify-self: end; margin-top: 40px; min-height: 64px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(30, 32, 37, 0.88); color: #FFFFFF; font: 500 1.3rem/1 var(--f-interfaz);
  -webkit-backdrop-filter: blur(var(--desenfoque-base)); backdrop-filter: blur(var(--desenfoque-base)); box-shadow: var(--sombra-2);
}
.bienvenida-lentes__empezar:hover { background: #1E2025; }
.bienvenida-lentes__empezar:focus-visible, .bienvenida-lentes__enlace:focus-visible { outline: 2px solid #1E2025; outline-offset: 3px; }
@media (max-width: 600px) { .bienvenida-lentes__icono { margin-bottom: 36px; } .bienvenida-lentes__privacidad { margin-top: 44px; } }

.hoja__tarjeta-botones { min-width: 230px; }

/* ---------- Fondos de página desenfocados (todas las páginas con data-fondo) ----------
   La capa se agranda para que el desenfoque no deje bordes claros en los márgenes de la ventana. */
body[data-fondo]::before { inset: -48px; filter: blur(var(--desenfoque-base)) saturate(1.05); }
/* Con «reducir transparencia» del sistema: sin foto ni desenfoque, el color sólido de la página */
@media (prefers-reduced-transparency: reduce) { body[data-fondo]::before { filter: none; inset: 0; background: #1E2025; } }

/* ---------- G0004 y G0005 · versión intermedia: estructura de la ficha de libro con el estilo original de Campus ----------
   Marco con el degradado de la categoría y panel claro (como W0204CE-02), foto que sobresale arriba a la izquierda,
   título en el color de la categoría, barra de acciones de cristal claro y flechas oscuras redondas a los lados.
   Más pequeña que la hoja anterior: ocupa como mucho 1000 px y el 88 % de la altura. */
.hoja { --ancho-hoja: min(1000px, calc(100vw - 120px)); }
.hoja[open] { display: grid; place-items: center; }   /* cerrada sigue oculta: si no, sus flechas fijas asoman en la página */
.hoja__carril { display: block; width: var(--ancho-hoja); height: auto; max-height: 88dvh; padding: 0; overflow: visible; }
.hoja__vecina { display: none !important; }
.hoja__caja {
  max-height: 88dvh; padding: 64px clamp(16px, 4vw, 48px) 32px; border-radius: var(--radio-grande, 22px);
  background: linear-gradient(120deg, var(--sec-portada-a, #56302B), var(--sec-portada-b, #7A6162));
  box-shadow: var(--sombra-5); scrollbar-width: thin;
}
.hoja__banda {
  margin-top: 26px; padding: 28px clamp(18px, 3vw, 36px) 24px; gap: clamp(18px, 3vw, 36px);
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); border-radius: 14px 14px 0 0;
  background: var(--c-fondo, #EFEDEE); color: var(--c-pizarra, #3C4C4C);
}
.hoja__cuerpo { padding: 8px clamp(18px, 3vw, 36px) 26px; border-radius: 0 0 14px 14px; background: var(--c-fondo, #EFEDEE); }
.hoja__cerrar, .hoja__acciones { top: -78px; }
.hoja__cerrar { left: calc(-1 * clamp(16px, 4vw, 48px) + 12px); width: 44px; height: 44px; background: rgba(30, 32, 37, 0.45); }
.hoja__acciones { right: calc(-1 * clamp(16px, 4vw, 48px) + 12px); background: rgba(30, 32, 37, 0.45); }
.hoja__acciones > button { width: 44px; height: 38px; }
.hoja__aviso { top: -70px; }
.hoja__portada {
  margin: calc(-28px - 26px) 0 0 calc(-1 * clamp(18px, 3vw, 36px)); border-radius: 6px; aspect-ratio: 418 / 533;
  box-shadow: var(--sombra-2);
}
.hoja__portada::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, transparent 38%); }
.hoja__portada-rotulo { color: #FFFFFF; }
.hoja__portada-rotulo b { font-size: 1rem; }
.hoja__titulo { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; color: var(--sec-fuerte); }
.hoja__autor { font-size: 1rem; }
.hoja__autor a, .hoja__autor .autor-enlace { color: var(--sec-fuerte); }
.hoja__meta { font: italic 400 1rem/1.5 var(--f-titular); text-transform: uppercase; color: var(--c-azul, #1E2025); }
.hoja__antetitulo { color: var(--sec-fuerte); opacity: 1; }
.hoja__tarjeta {
  margin-top: 8px; padding: 14px 18px; color: var(--c-azul, #1E2025);
  background: rgba(238, 236, 237, 0.86); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.hoja__tarjeta-texto strong { font-size: 1.05rem; color: var(--sec-fuerte); }
.hoja__tarjeta-texto span { color: var(--c-pizarra, #3C4C4C); }
.hoja__obtener { min-height: 40px; background: var(--sec-fuerte); color: #FFFFFF; font-size: 0.95rem; }
.hoja__obtener:hover { background: color-mix(in srgb, var(--sec-fuerte) 85%, #000000); }
.hoja__muestra { min-height: 40px; background: var(--sec-suave, #DECACA); color: var(--sec-fuerte); font-size: 0.95rem; }
.hoja__muestra:hover { background: color-mix(in srgb, var(--sec-suave, #DECACA) 80%, #FFFFFF); }
.hoja__tarjeta--revista:hover { background: #FFFFFF; }
.hoja__tarjeta-enlace { font-size: 1.1rem; color: var(--sec-fuerte); }
.hoja__seccion { border-top-color: rgba(60, 76, 76, 0.15); padding: 20px 0; }
.hoja__seccion h3 { font-size: 1.2rem; color: var(--c-azul, #1E2025); }
.hoja__resumen { font-size: 1rem; font-weight: 600; color: var(--c-pizarra, #3C4C4C); text-align: justify; hyphens: auto; }
.hoja__estante a { width: 120px; }
.hoja__menu { right: 0; }
.ficha-autor .hoja__carril { width: min(860px, calc(100vw - 120px)); }
.hoja__portada--autor { aspect-ratio: 1; border-radius: 50%; margin: calc(-28px - 26px) 0 0 0; }
.ficha-autor .ficha-autor__campos li { color: var(--c-azul, #1E2025); background: rgba(30, 32, 37, 0.08); }

/* Flechas como en W0204CE-02: círculos oscuros de cristal a los lados del marco */
.hoja__flecha {
  position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(30, 32, 37, 0.6); color: #FFFFFF; -webkit-backdrop-filter: blur(var(--desenfoque-fino)); backdrop-filter: blur(var(--desenfoque-fino));
}
.hoja__flecha svg { width: 20px; height: 20px; }
.hoja__flecha:hover, .hoja__flecha:focus-visible { background: rgba(255, 255, 255, 0.26); }
.hoja__flecha--anterior { left: calc(50% - var(--ancho-hoja) / 2 - 22px); }
.hoja__flecha--siguiente { right: calc(50% - var(--ancho-hoja) / 2 - 22px); }
@media (max-width: 720px) {
  .hoja { --ancho-hoja: calc(100vw - 24px); }
  .hoja__banda { grid-template-columns: 1fr; }
  .hoja__portada { width: min(200px, 55vw); margin-left: 0; }
  .hoja__flecha { top: auto; bottom: 16px; transform: none; }
  .hoja__flecha--anterior { left: 16px; } .hoja__flecha--siguiente { right: 16px; }
}

/* ---------- Lentes.io · interfaz limpia en blanco (por defecto) y modo oscuro con el botón L0004BH ----------
   Wix no tiene imagen de fondo en Lentes.io: se quita en los dos modos. Oscuro = el aspecto anterior con color sólido. */
body[data-fondo="lentes"]::before { background: #1E2025; filter: none; inset: 0; }
html:not([data-tema="oscuro"]):has(body[data-fondo="lentes"]) { background: #FFFFFF; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] { color: #1E2025; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"]::before { background: #FFFFFF; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .zona-oscura { background: #FFFFFF; color: #1E2025; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .bloque + .bloque { border-top-color: #E6E4E5; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .titular__nombre--dorado { color: #8A6D2B; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .titular__nombre--hexa { color: #A34F4C; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .riel__tema .riel__sol,
html[data-tema="oscuro"] body[data-fondo="lentes"] .riel__tema .riel__luna { display: none; }
.riel__tema svg { width: 22px; height: 22px; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .pestanas { background: #F1EFEF; border-color: #E2DFDF; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .pestana { color: #1E2025; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .pestana:hover { background: rgba(30, 32, 37, 0.06); }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] .pestana[aria-selected="true"] { background: #1E2025; color: #FFFFFF; }
html:not([data-tema="oscuro"]) body[data-fondo="lentes"] [role="tabpanel"] .titular__nombre { filter: saturate(1.2) brightness(0.8); }

/* ---------- W0207 · revistas: isotipos de categoría en todas y columnas que no se montan ---------- */
.revista-slide__franja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.revista-slide__collage { min-width: 0; }
.revista-slide__tarjeta .revista-slide__icono { border-radius: 50%; background: rgba(255, 255, 255, 0.12); }

@media (prefers-reduced-transparency: reduce) { html:not([data-tema="oscuro"]) body[data-fondo="lentes"]::before { background: #FFFFFF; } }

/* ---------- W0207 · la tarjeta central va por encima de las dos imágenes ----------
   Las imágenes llevan filtro (escala de grises) y se pintan como capas: sin z-index, la de la derecha tapaba la tarjeta. */
.revista-slide__collage { position: relative; z-index: 0; }
.revista-slide__tarjeta { z-index: 1; }
[data-carrusel-r8] .carrusel__flecha[disabled] { opacity: 1; cursor: pointer; }

/* ---------- W0101 · portada en franja (como la cabecera de Proyecto en Wix) ----------
   Una sola franja ordenada: isotipos de las revistas arriba a la derecha, marca, titular, lema y un cristal
   con el texto y los dos botones. Se mantiene la foto con el desenfoque al desplazarse. */
.heroe--franja { padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); }
.heroe--franja::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 32, 37, 0.82) 0%, rgba(30, 32, 37, 0.55) 60%, rgba(30, 32, 37, 0.7) 100%); pointer-events: none; }
.heroe__franja { position: relative; z-index: 1; display: grid; gap: 14px; }
.heroe__isotipos { justify-self: end; display: flex; gap: clamp(10px, 2vw, 22px); margin: 0 0 clamp(18px, 4vw, 48px); padding: 0; list-style: none; }
.heroe__isotipos a { display: block; border-radius: 50%; transition: transform 0.2s ease; }
.heroe__isotipos a:hover, .heroe__isotipos a:focus-visible { transform: translateY(-3px); }
.heroe__isotipos img { width: clamp(30px, 3vw, 42px); height: auto; border-radius: 50%; }
.heroe__marca { display: flex; align-items: center; gap: 14px; margin: 0; font: 600 clamp(1.4rem, 3vw, 2.6rem)/1.1 var(--f-interfaz); color: #C9D6D2; }
.heroe--franja .heroe__logo { width: clamp(44px, 4.4vw, 64px); height: auto; }
.heroe--franja .heroe__titular { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; color: var(--c-blanco); }
.heroe--franja .heroe__lema { margin-top: 2px; }
.heroe__cristal {
  margin-top: clamp(18px, 3vw, 32px); padding: clamp(22px, 3.4vw, 44px) clamp(22px, 6vw, 120px);
  border-radius: var(--radio-grande); border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(30, 32, 37, 0.5); -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2);
}
.heroe--franja .heroe__texto { max-width: none; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.8; text-align: justify; hyphens: auto; }
.heroe--franja .conoce__botones { justify-content: center; margin-top: 26px; }
@media (max-width: 760px) { .heroe__isotipos { justify-self: center; } .heroe--franja .heroe__texto { text-align: left; } }

/* ---------- Empresa (W0401CI) · «Conoce sobre Campus Cognitionis» ---------- */
.pg-conoce { margin-top: 18px; }
.pg-conoce__titulo { margin: 0 0 12px; font: 700 clamp(1.2rem, 2.2vw, 1.6rem)/1.2 var(--f-interfaz); letter-spacing: 0.12em; text-transform: uppercase; color: #C9D6D2; }
.pg-conoce p { margin: 0; line-height: 1.8; }

/* ---------- W0301 · Onboarding: primer paso «Descubre, investiga, aprende» (de la página /app de Wix) ----------
   Mientras se ve este paso, el panel pasa a cristal oscuro sobre la biblioteca, como en Wix. */
.onboarding__panel:has(.onboarding__paso--descubre:not([hidden])) { background: rgba(30, 32, 37, 0.72); box-shadow: var(--sombra-5); }
.onboarding__app { display: block; width: clamp(110px, 11vw, 144px); height: auto; margin: 6px auto 0; border-radius: 26px; box-shadow: var(--sombra-3); }
.onboarding__descubre { margin: clamp(18px, 3vw, 28px) 0 0; font: 700 clamp(2rem, 4.2vw, 3.2rem)/1.1 var(--f-interfaz); letter-spacing: -0.01em; color: #EAD9A8; }
.onboarding__descubre-texto { max-width: 52ch; margin: 14px auto 0; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.45; color: var(--c-blanco); }
.onboarding__blanco { border: 0; background: #F2F0EE; color: #1E2025; font-weight: 600; }
.onboarding__blanco:hover { background: #FFFFFF; }
.onboarding__paso--descubre :focus-visible { outline-color: #EAD9A8; }

/* ---------- CC-01 · W0001: el menú no se monta sobre la marca (601–1360 px) ----------
   Las seis entradas miden unos 530 px en una línea. Por debajo de ~1360 px no cabían entre la marca y
   «Lentes Studio»: el texto partía en dos líneas y, al estar centrado, el menú se salía por la izquierda.
   Ahora: las entradas no parten, el centrado es «seguro» (nunca desborda por la izquierda) y en esa franja
   la cabecera usa el margen corto y huecos menores; por debajo de 1100 px la marca queda solo en logotipo.
   Si aun así no cabe (601–700 px), el menú se desplaza en horizontal, como ya hacía por debajo de 600 px. */
.campus-menu { justify-content: safe center; }
.campus-menu__item, .campus-menu__item > a, .submenu > summary, .campus-menu__boton { white-space: nowrap; }
@media (min-width: 601px) and (max-width: 1359.98px) {
  .campus-cabecera__in.envoltura { width: min(var(--ancho-max), 100% - 48px); }
  .campus-cabecera__in { gap: 16px; }
  .campus-menu { column-gap: clamp(4px, 1vw, 14px); }
  .campus-menu__item > a, .campus-menu__boton, .submenu > summary { padding-inline: 8px; }
  .campus-estudio { padding: 9px 14px; }
}
@media (min-width: 601px) and (max-width: 1099.98px) {
  .campus-cabecera .marca span {   /* oculto a la vista; el enlace conserva su aria-label */
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 900px) {
  .campus-acciones { display: none; }   /* «Lentes Studio» ya se oculta aquí (campus.css): sin fila vacía */
  .campus-menu { justify-content: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .campus-menu::-webkit-scrollbar { display: none; }
}
@media (min-width: 601px) and (max-width: 900px) { .campus-menu { justify-content: safe flex-end; } }

/* ---------- CC-02 · Contraste AA ----------
   W0105BH «Suscribirse»: se mantiene el beige de Wix (#C4B898) y el texto pasa a #1E2025 (8,3:1; con blanco era 1,97:1).
   L0015: el gris secundario #86868B (3,6:1 sobre blanco) pasa a #6E6E73 (5,1:1). */
.boton--beige { color: var(--c-azul); transition: background-color 0.2s ease; }
.boton--beige:hover, .boton--beige:focus-visible { background: #B9AC8A; }   /* con #1E2025: 7,2:1 */
.bienvenida-lentes__entrada, .bienvenida-lentes__nota, .bienvenida-lentes__texto { color: #6E6E73; }

/* ---------- CC-03 · Tipografía dentro de la regla del Registro (§7) ----------
   Inter solo en Regular, Medium, SemiBold y Bold: los 300 pasan a 400 (boletín, Cuenta y Æther aquí, porque cuenta.css
   y escritorio.css se cargan antes que esta hoja; editorial.earth en earth.css, que se carga después). L0015 titula en Newsreader 800, como el resto de titulares.
   W0101: máximo 2 variaciones en el bloque de titular. «Bienvenidos a Campus Cognitionis.» pasa de Inter 600 a Newsreader 800
   (mismo peso que W0101TE, en su color propio); quedan Newsreader 800 y el lema en Newsreader Italic. */
.boletin__sub, .cuenta-form__sub, .aether__fecha { font-weight: 400; }
.bienvenida-lentes__titulo { font-family: var(--f-titular); font-weight: 800; letter-spacing: 0; }
.heroe__marca { font-family: var(--f-titular); font-weight: 800; }

/* ---------- CC-04 · Revisión en móvil (375 px) ---------- */
/* W0001: cabecera de dos filas más compacta (de 121 a ~97 px); Mensa a página completa descuenta ese alto */
@media (max-width: 600px) {
  .campus-cabecera__in { row-gap: 4px; padding-block: 8px; }
  :root:has(.campus-cabecera) { --alto-cabecera: 97px; }
  .campus-cabecera__in { min-height: 0; }
}
/* Suscripciones (G02): la regla de «más ancha» anulaba la columna única de paginas.css por debajo de 900 px */
@media (max-width: 900px) { .pg-cuenta__in, .pg-susc { grid-template-columns: minmax(0, 1fr); } }
/* Folios (L11): portada encima del titular; con 180 px al lado, el titular quedaba en 88 px y la hoja desbordaba */
@media (max-width: 640px) {
  .lectura-r8__cabeza { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lectura-r8__cabeza > img, .lectura-r8__cabeza > .cuadricula { width: 150px; height: 192px; }
  .lectura-r8__titular { overflow-wrap: break-word; hyphens: auto; }
}
/* M0001 en ventana: el aviso de IA queda por encima del botón V3 (fijo abajo a la derecha, dentro de la ventana) */
dialog.mensa-ai .mensa-ai__pie { padding-bottom: 24px; }
@media (max-width: 759.98px) { dialog.mensa-ai .mensa-ai__pie { padding-bottom: 68px; } }
/* Folios: enlaces y palabras largas sin espacios (p. ej. direcciones web) ya no ensanchan la hoja */
.lectura-r8__texto { overflow-wrap: anywhere; }
/* E0101 Æther: el panel deja libre la esquina del botón V3 para que no tape la «i» (E0101BI) */
@media (max-width: 700px) {
  .aether { padding-bottom: 72px; }
  .aether__panel { min-height: calc(100dvh - 88px); }
}

/* =====================================================================================================
   r9 · W0001 · Barra global al estilo apple.com (Arquitectura_web_r9.md §2)
   Logotipo · Revistas▾ · Biblioteca▾ · Lentes.io · Navega.earth · Escritorio▾ · Medios▾ · Persona.earth · Para▾ ·
   Parabole.me · Soporte · botón «Lentes Studio». Desplegables: el mismo megamenú de un solo cuerpo de cristal
   (details.submenu, js/r8.js), ahora con columnas a la izquierda: la principal con enlaces grandes en Newsreader 800
   y las secundarias en Inter. Por debajo de 900 px el menú pasa a un cajón (popover nativo: sin JavaScript,
   se cierra con Escape o tocando fuera). Sustituye, solo para .campus-cabecera--r9, lo que CC-01 hacía en 601–1360 px.
   ===================================================================================================== */
.campus-cabecera--r9 .campus-cabecera__in { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; }
.campus-cabecera--r9 .campus-cabecera__in.envoltura { width: min(var(--ancho-max), 100% - 48px); }   /* margen corto siempre: las diez entradas caben */
.campus-cabecera--r9 .campus-menu { justify-content: safe center; column-gap: 0; }
.campus-cabecera--r9 .campus-menu__item > a, .campus-cabecera--r9 .submenu > summary {
  padding: 8px clamp(6px, 0.8vw, 11px); font-size: 0.8125rem; letter-spacing: 0.01em; color: var(--c-texto-suave);
}
.campus-cabecera--r9 .campus-menu__item > a:hover, .campus-cabecera--r9 .submenu > summary:hover,
.campus-cabecera--r9 .submenu[open] > summary { color: var(--c-blanco); }
.campus-cabecera--r9 .submenu > summary::after { content: none; }             /* sin flecha, como apple.com */
.campus-cabecera--r9 .campus-estudio { gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 0.8125rem; }
.campus-cabecera--r9 .campus-estudio svg { width: 18px; height: 18px; }
.campus-cajon-boton { display: none; }
.campus-cabecera--r9 .campus-acciones { display: flex; }        /* CC-01 y campus.css la ocultaban a 900 px o menos */
.campus-cabecera--r9 .campus-estudio { display: inline-flex; }

/* Escritorio: el nav es un popover que se muestra siempre en la barra (anula el estilo del navegador) */
@media (min-width: 900px) {
  .campus-cabecera--r9 .campus-nav[popover] {
    display: block; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0;
    border: 0; overflow: visible; background: none; color: inherit;
  }
}
/* 900–1359 px: solo el logotipo; 900–1179 px: «Lentes Studio» solo con su icono (conserva su nombre accesible) */
@media (min-width: 900px) and (max-width: 1359.98px) {
  .campus-cabecera--r9 .marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 1179.98px) {
  .campus-cabecera--r9 .campus-cabecera__in { gap: 12px; }
  .campus-cabecera--r9 .campus-estudio { padding: 9px; }
  .campus-cabecera--r9 .campus-estudio__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Megamenú: columnas alineadas a la izquierda del contenido */
.campus-cabecera--r9 .submenu__panel {
  grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); justify-content: start; gap: 18px 72px;
  padding: 30px max(24px, calc((100% - var(--ancho-max)) / 2)) 40px;
}
.submenu__columna { min-width: 0; }
.submenu__columna > ul { display: grid; gap: 2px; margin: 0; }
.submenu__rotulo { margin: 0 0 10px; font-size: 0.78rem; line-height: 1.3; color: var(--c-texto-suave); }
.campus-cabecera--r9 .submenu__panel a {
  padding: 5px 0; font-size: 0.9rem; letter-spacing: 0; color: var(--c-texto-suave);
  -webkit-backdrop-filter: none; backdrop-filter: none;   /* sin fondo propio: no es un cristal */
}
.campus-cabecera--r9 .submenu__columna--principal a {
  padding: 3px 0; font-family: var(--f-titular); font-weight: 800; font-size: 1.5rem; line-height: 1.25; letter-spacing: 0; color: var(--c-blanco);
}
.campus-cabecera--r9 .submenu__panel a:hover, .campus-cabecera--r9 .submenu__panel a:focus-visible {
  background: none; color: var(--c-blanco); text-decoration: underline; text-underline-offset: 4px;
}

/* ---------- Cajón (por debajo de 900 px) ---------- */
@media (max-width: 899.98px) {
  :root:has(.campus-cabecera--r9) { --alto-cabecera: 64px; }
  .campus-cabecera--r9 .campus-cabecera__in { grid-template-columns: minmax(0, 1fr) auto; min-height: 64px; padding-block: 0; row-gap: 0; }
  .campus-cabecera--r9 .marca { min-width: 0; }
  .campus-cabecera--r9 .marca span { position: static; width: auto; height: auto; overflow: hidden; clip-path: none; text-overflow: ellipsis; }
  .campus-cabecera--r9 .campus-acciones { display: flex; gap: 6px; }
  .campus-cabecera--r9 .campus-estudio { display: inline-flex; }
  .campus-cajon-boton {
    display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0;
    border: 0; border-radius: 12px; background: none; color: var(--c-blanco); cursor: pointer;
  }
  .campus-cajon-boton svg { width: 24px; height: 24px; }
  .campus-cajon-boton__cerrar { display: none; }
  .campus-cabecera--r9:has(.campus-nav:popover-open) .campus-cajon-boton__abrir { display: none; }
  .campus-cabecera--r9:has(.campus-nav:popover-open) .campus-cajon-boton__cerrar { display: inline; }
  .campus-cajon-boton:focus-visible { outline: 2px solid var(--c-arena); outline-offset: 2px; }

  .campus-cabecera--r9 .campus-nav[popover] {
    position: fixed; inset: var(--alto-cabecera) 0 0 0; width: 100%; height: auto; max-width: none; max-height: none; margin: 0;
    padding: 8px 24px 120px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); overflow-y: auto; overscroll-behavior: contain;
    background: rgba(30, 32, 37, 0.9); color: var(--c-blanco);
    -webkit-backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2); backdrop-filter: blur(var(--desenfoque-barra)) saturate(1.2);
  }
  .campus-cabecera--r9 .campus-nav:popover-open { animation: cajon-r9 0.24s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .campus-cabecera--r9 .campus-nav::backdrop { background: transparent; }
  .campus-cabecera--r9 .campus-menu { display: block; max-width: 560px; margin-inline: auto; overflow: visible; }
  .campus-cabecera--r9 .campus-menu__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .campus-cabecera--r9 .campus-menu__item > a, .campus-cabecera--r9 .submenu > summary {
    display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 10px 2px;
    border-radius: 0; background: none; color: var(--c-blanco); white-space: normal;
    font-family: var(--f-titular); font-weight: 800; font-size: 1.5rem; line-height: 1.2; letter-spacing: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .campus-cabecera--r9 .campus-menu__item > a:hover, .campus-cabecera--r9 .submenu > summary:hover,
  .campus-cabecera--r9 .submenu[open] > summary { background: none; text-decoration: underline; text-underline-offset: 6px; }
  .campus-cabecera--r9 .submenu > summary::after {
    content: "›"; font: 400 1.6rem/1 var(--f-interfaz); color: var(--c-texto-suave); opacity: 1; transition: transform 0.2s ease;
  }
  .campus-cabecera--r9 .submenu[open] > summary::after { transform: rotate(90deg); }
  .campus-cabecera--r9 .submenu__panel {
    position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-height: none; overflow: visible;
    padding: 0 0 18px 2px;
  }
  .campus-cabecera--r9 .submenu__columna--principal a, .campus-cabecera--r9 .submenu__panel a {
    padding: 7px 0; font-family: var(--f-interfaz); font-weight: 500; font-size: 1.05rem; line-height: 1.35; white-space: normal;
    color: var(--c-blanco);
  }
  .campus-cabecera--r9 .submenu__rotulo { margin-bottom: 2px; }
  /* El cristal de la barra no crece con el acordeón del cajón (el cajón ya es su propio cristal) */
  .campus-cabecera--r9::before, .campus-cabecera--r9[data-abierto]::before { bottom: 0; border-radius: 0; box-shadow: none; }
  .campus-cabecera--r9[data-abierto] .campus-fecha { opacity: 1; }
  .campus-cabecera--r9:has(.campus-nav:popover-open) .campus-fecha { opacity: 0; }
}
@media (max-width: 599.98px) {
  .campus-cabecera--r9 .campus-estudio { padding: 9px; }
  .campus-cabecera--r9 .campus-estudio__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@keyframes cajon-r9 { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .campus-cabecera--r9 .campus-nav:popover-open { animation: none; }
  .campus-cabecera--r9 .submenu > summary::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .campus-cabecera--r9 .campus-nav[popover] { background: #1E2025; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- r9 · W0002 · Pie como mapa del sitio (§3): cinco columnas; marca, derechos y «Mapa del sitio» centrados debajo ---------- */
.pie-r8--r9 .pie-r8__in { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; }
.pie-r8--r9 h2 { margin-bottom: 12px; }
.pie-r8--r9 li a { padding: 4px 0; font-size: 0.86rem; }
.pie-r8__legal { margin: 0; font-size: 0.82rem; }
@media (max-width: 1023.98px) { .pie-r8--r9 .pie-r8__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pie-r8--r9 .pie-r8__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }