/* =========================================================
   PORTAFOLIO · ESTUDIO VIRTUAL
   1. Variables  2. Base  3. Fondo  4. Cabecera  5. Escenario
   6. Paneles    7. Portafolio (tarjetas)  8. Libros  9. Cursos
   9b. Blog      10. Pie   10b. Popups     10c. Novedades
   11. Responsivo
   ========================================================= */

/* 1. VARIABLES ------------------------------------------------ */
:root {
  /* Cambia aquí la imagen de fondo */
  --fondo: url("assets/estudio-fondo.jpg");

  --tinta: #e9f6f8;
  --tinta-suave: #a9c4cb;
  --vidrio: rgba(8, 14, 30, 0.58);
  --vidrio-fuerte: rgba(8, 14, 30, 0.88);
  --borde: rgba(75, 224, 232, 0.35);
  --cian: #4be0e8;
  --cian-fuerte: #19b8c4;
  --violeta: #8b5cf6;
  --radio: 14px;

  /* Color de cada sección (en R, G, B para poder usar transparencias).
     Cambia un número y cambian el popup y lo que lo abre (tarjeta o menú). */
  --c-obra:      190, 242, 100;  /* lima */
  --c-libros:    246, 185, 59;   /* ámbar dorado */
  --c-ensayos:   75, 224, 232;   /* cian */
  --c-articulos: 96, 165, 255;   /* azul eléctrico */
  --c-otra:      255, 92, 214;   /* magenta neón */
  --c-acerca:    167, 139, 250;  /* violeta */
  --c-blog:      255, 138, 101;  /* coral */
  --c-contacto:  74, 222, 128;   /* verde neón */
  --c-novedades: 255, 84, 84;    /* rojo (el del bombillo) */
  --c-redes:     45, 212, 191;   /* aguamarina */

  --f-titulo: "Exo 2", system-ui, sans-serif;
  --f-texto: "Manrope", system-ui, sans-serif;

  --alto-cabecera: 64px;
  --alto-pie: 48px;
}

/* 2. BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 12px); }
html.con-popup { overflow: hidden; }   /* evita que la página se mueva detrás del popup */
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta);
  background: #060a16;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. FONDO FIJO ----------------------------------------------- */
/* Se usa un pseudo-fondo "position: fixed" porque
   background-attachment: fixed falla en iOS/Safari móvil. */
.fondo {
  position: fixed; inset: 0; z-index: -2;
  background: var(--fondo) center / cover no-repeat;
}
.fondo::after {            /* velo para mejorar la legibilidad */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,10,22,.55) 0%, rgba(6,10,22,.1) 30%, rgba(6,10,22,.45) 100%);
}

/* 4. CABECERA ------------------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  height: var(--alto-cabecera);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 56px);
  background: rgba(10, 8, 28, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--f-titulo); font-size: 1.125rem; }
.marca__logo { width: 30px; height: 30px; color: var(--cian); flex: none; }
.marca strong { color: var(--cian); font-weight: 600; }
.marca__sub { color: var(--tinta); font-weight: 500; }

.menu { display: flex; gap: clamp(20px, 3vw, 44px); }
.menu a {
  --acento-rgb: 75, 224, 232;
  font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-suave); padding: 6px 2px; border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
/* Cada enlace anticipa el color de lo que abre */
.menu a[href="#acerca"]   { --acento-rgb: var(--c-acerca); }
.menu a.menu__blog        { --acento-rgb: var(--c-blog); }
.menu a[href="#contacto"] { --acento-rgb: var(--c-contacto); }
.menu a.menu__novedades   { --acento-rgb: var(--c-novedades); display: inline-flex; align-items: center; gap: 8px; }
.menu a.menu__blog::after { content: " ↗"; font-size: .8125rem; }   /* sale a otra página */
.menu a:hover, .menu a.activo {
  color: rgb(var(--acento-rgb)); border-color: rgb(var(--acento-rgb));
}

.menu-toggle { display: none; }

/* Bombillo de Novedades: se enciende (script.js) si hay noticias que el visitante no ha visto */
.bombillo {
  flex: none; display: inline-block; position: relative;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd0d0 0 18%, #ff3434 45%, #c80d0d 100%);
  box-shadow: 0 0 6px 2px rgba(255, 52, 52, .8), 0 0 16px 5px rgba(255, 52, 52, .35);
  animation: bombillo 1.8s ease-in-out infinite;
}
.bombillo[hidden] { display: none; }
@keyframes bombillo {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px 2px rgba(255, 52, 52, .85), 0 0 18px 6px rgba(255, 52, 52, .4); }
  50%      { opacity: .6;  box-shadow: 0 0 3px 1px rgba(255, 52, 52, .5),  0 0 8px 2px rgba(255, 52, 52, .15); }
}

/* 5. ESCENARIO ------------------------------------------------ */
.escenario {
  flex: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 32px) clamp(16px, 3vw, 48px);
  display: grid;
  /* izquierda · centro (zona de la pared de libros) · derecha */
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.35fr) minmax(280px, 1fr);
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
  align-content: start;   /* la fila mide lo que su contenido, no la pantalla */
}

/* Columna que apila varios paneles (derecha: Talleres + Blog) */
.columna {
  min-width: 0;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-content: start;
}

/* Las columnas laterales terminan a la misma altura (enmarcan el centro).
   El último panel de la columna derecha (Blog) absorbe la diferencia. */
.panel--izq, .columna { align-self: stretch; }
.columna { grid-template-rows: auto 1fr; }

/* 6. PANELES (vidrio sobre el fondo) -------------------------- */
.panel {
  min-width: 0;
  background: var(--vidrio);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: clamp(16px, 1.8vw, 24px);
  box-shadow: 0 0 0 1px rgba(75,224,232,.05), 0 12px 40px rgba(0,0,0,.45), inset 0 0 40px rgba(75,224,232,.04);
}
.panel--centro { align-self: start; }
/* Descomenta para bajar el panel central y dejar ver la pared de libros:
.panel--centro { margin-top: 18vh; } */

.panel__cab { margin-bottom: 16px; }
.panel__cab--centro { text-align: center; }
.panel__etiqueta {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cian); margin-bottom: 2px;
}
.panel h2 {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.15; letter-spacing: .01em;
  text-shadow: 0 0 18px rgba(75,224,232,.35);
}
.panel__desc { font-size: .875rem; color: var(--tinta-suave); margin-top: 4px; }

/* 7. PORTAFOLIO: tarjetas que abren popups --------------------- */
/* El panel izquierdo se estira a la altura de la fila y las tarjetas se reparten el espacio */
.panel--izq { display: flex; flex-direction: column; }
.temas {
  flex: 1;
  display: grid; gap: 10px;
  grid-auto-rows: minmax(76px, 1fr);
}
.tema {
  --acento-rgb: 75, 224, 232;
  display: flex; align-items: center; gap: 14px; height: 100%;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(var(--acento-rgb), .06);
  border: 1px solid rgba(var(--acento-rgb), .25);
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.tema:hover {
  transform: translateX(4px);
  border-color: rgb(var(--acento-rgb));
  background: rgba(var(--acento-rgb), .12);
  box-shadow: 0 0 26px rgba(var(--acento-rgb), .18);
}
.tema:focus-visible { outline-color: rgb(var(--acento-rgb)); }
.tema__texto { display: grid; gap: 2px; min-width: 0; }
.tema__titulo { font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem; line-height: 1.2; }
.tema__desc { font-size: .8125rem; color: var(--tinta-suave); }
.tema::after {                 /* flecha: indica que se abre */
  content: ""; flex: none; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid rgb(var(--acento-rgb)); border-bottom: 2px solid rgb(var(--acento-rgb));
  transform: rotate(-45deg); transition: transform .2s;
}
.tema:hover::after { transform: translateX(3px) rotate(-45deg); }

/* 8. LIBROS (galería) ----------------------------------------- */
.libros {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 12px; margin: 0 -2px;
  scrollbar-width: thin; scrollbar-color: var(--cian-fuerte) transparent;
}
.libros > li { flex: 0 0 calc((100% - 24px) / 3); min-width: 150px; scroll-snap-align: start; }
.carrusel-ctrl {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px; margin-top: 8px;
}
.carrusel-ctrl__flechas { display: flex; gap: 10px; }
.carrusel-ctrl__obra {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; color: var(--cian);
  background: rgba(75,224,232,.08); border: 1px solid var(--borde);
  transition: background .2s, border-color .2s;
}
.carrusel-ctrl__obra::after { content: "↗"; font-size: .9375rem; }
.carrusel-ctrl__obra:hover { background: rgba(75,224,232,.2); border-color: var(--cian); }
.carrusel-ctrl button {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(75,224,232,.08); border: 1px solid var(--borde); color: var(--cian);
  font-size: 1.125rem; line-height: 1; transition: background .2s, border-color .2s;
}
.carrusel-ctrl button:hover { background: rgba(75,224,232,.2); border-color: var(--cian); }
.libro__enlace {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  padding: 10px; border-radius: 12px;
  background: rgba(75,224,232,.05); border: 1px solid rgba(75,224,232,.2);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.libro__enlace:hover {
  transform: translateY(-4px); border-color: var(--cian);
  box-shadow: 0 10px 30px rgba(75,224,232,.18);
}
.libro__portada {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 2 / 3; font-size: .875rem; border-radius: 6px; padding: 12px; margin-bottom: 6px;
  font-family: var(--f-titulo); font-weight: 700; line-height: 1.2;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6);
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.12);
  overflow: hidden; position: relative;
}
/* La imagen cubre el degradado; si falta, se ve el título de respaldo */
.libro__portada img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.libro__portada--5 { background: linear-gradient(160deg, #b45309, #1e1b4b 85%); }
.libro__portada--1 { background: radial-gradient(circle at 50% 38%, #f6b93b 0 8%, #14606f 40%, #0a1a2e 100%); }
.libro__portada--2 { background: linear-gradient(160deg, #6d28d9, #0f172a 80%); }
.libro__portada--3 { background: linear-gradient(160deg, #0e7490, #1e1b4b 85%); }
.libro__portada--4 { background: linear-gradient(160deg, #be185d, #1e1b4b 85%); }
.libro__titulo { font-weight: 700; font-size: .9375rem; line-height: 1.25; }
.libro__meta { font-size: .75rem; color: var(--tinta-suave); }
.libro__cta {
  margin-top: auto; padding-top: 8px; align-self: flex-start;
  font-size: .8125rem; font-weight: 700; color: var(--cian);
}
.libro__cta::after { content: " →"; transition: margin .2s; }
.libro__enlace:hover .libro__cta::after { margin-left: 4px; }

/* 9. CURSOS (Classroom) --------------------------------------- */
.cursos { display: grid; gap: 10px; }
.curso {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: 12px;
  background: rgba(75,224,232,.05); border: 1px solid rgba(75,224,232,.2);
  transition: transform .2s, border-color .2s, background .2s;
}
.curso:hover { transform: translateX(4px); border-color: var(--cian); background: rgba(75,224,232,.1); }
.curso__icono {
  flex: none; width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; color: #1b1405;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.curso__texto { display: grid; gap: 2px; min-width: 0; }
.curso__titulo { font-weight: 700; font-size: .9375rem; line-height: 1.25; }
.curso__meta { font-size: .8125rem; color: var(--cian); font-weight: 600; }

/* 9b. BLOG ---------------------------------------------------- */
/* Reutiliza la tarjeta .curso; solo cambia el ícono (pluma violeta) */
.curso__icono--blog {
  color: #fff;
  background: linear-gradient(135deg, var(--violeta), #6d28d9);
}
.curso__icono--blog svg { width: 22px; height: 22px; }
.curso--blog .curso__meta::after { content: " →"; }

/* 10. PIE ----------------------------------------------------- */
.pie {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 56px);
  font-size: .8125rem; color: var(--tinta-suave);
  background: rgba(6, 10, 22, .85); border-top: 1px solid var(--borde);
}
.pie__links { display: flex; gap: 20px; }
.pie a:hover { color: var(--cian); }
.pie a[href="#redes"]:hover { color: rgb(var(--c-redes)); }

/* 10b. POPUPS ------------------------------------------------- */
/* Color de acento: lo comparten el popup y la tarjeta del panel que lo abre */
.popup--obra,      .tema--obra      { --acento-rgb: var(--c-obra); }
.popup--libros,    .tema--libros    { --acento-rgb: var(--c-libros); }
.popup--ensayos,   .tema--ensayos   { --acento-rgb: var(--c-ensayos); }
.popup--articulos, .tema--articulos { --acento-rgb: var(--c-articulos); }
.popup--otra,      .tema--otra      { --acento-rgb: var(--c-otra); }
.popup--acerca    { --acento-rgb: var(--c-acerca); }
.popup--contacto  { --acento-rgb: var(--c-contacto); }
.popup--novedades { --acento-rgb: var(--c-novedades); }
.popup--redes     { --acento-rgb: var(--c-redes); }

/* Ícono de cada sección (en los documentos del popup y en la tarjeta del panel) */
.popup--libros,    .tema--libros    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h6a4 4 0 0 1 4 4v11a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 5h-6a4 4 0 0 0-4 4v11a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.popup--ensayos,   .tema--ensayos   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); }
.popup--articulos, .tema--articulos { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h13v16H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M17 8h3v10a2 2 0 0 1-2 2'/%3E%3Cpath d='M8 8h5M8 12h5M8 16h5'/%3E%3C/svg%3E"); }
.popup--otra,      .tema--otra      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E"); }
.popup--obra,      .tema--obra      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3Cpath d='M3 17.5l9 5 9-5' opacity='.6'/%3E%3C/svg%3E"); }
/* Íconos de los canales de contacto */
.doc--correo { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.doc--perfil { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.doc--redes  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }

/* Redes sociales: el popup es aguamarina y cada red conserva su color e ícono.
   Para agregar otra red: copie una línea, cambie el nombre de la clase, el color (R, G, B) y el ícono. */
.red--facebook  { --acento-rgb: 24, 119, 242;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); }
.red--instagram { --acento-rgb: 236, 72, 153;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E"); }
.red--youtube   { --acento-rgb: 255, 64, 64;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='4'/%3E%3Cpath d='M10 9l5 3-5 3z' fill='black'/%3E%3C/svg%3E"); }
.red--wattpad   { --acento-rgb: 255, 128, 0;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l4 12 5-9 5 9 4-12'/%3E%3C/svg%3E"); }
.red--whatsapp  { --acento-rgb: 37, 211, 102;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.7-5A9 9 0 1 1 8 19.3z'/%3E%3Cpath d='M9 8.5c0 3.5 3 6.5 6.5 6.5l1-1.5-2-1-1 1a5 5 0 0 1-3-3l1-1-1-2z'/%3E%3C/svg%3E"); }
/* Perfiles académicos (pestaña 2 del popup de redes) */
.red--researchgate { --acento-rgb: 0, 204, 187;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-5 9a2 2 0 0 0 1.7 3h10.6A2 2 0 0 0 19 18l-5-9V3'/%3E%3Cpath d='M7.5 14h9'/%3E%3C/svg%3E"); }
.red--academia     { --acento-rgb: 180, 196, 214;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2 9 2 12 0v-5'/%3E%3Cpath d='M22 9v5'/%3E%3C/svg%3E"); }
.red--orcid        { --acento-rgb: 166, 206, 57;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 7.5v.01M8 10.5V17'/%3E%3Cpath d='M11.5 7.5V17h1.5a4.75 4.75 0 0 0 0-9.5z'/%3E%3C/svg%3E"); }
.red--cvlac        { --acento-rgb: 251, 191, 36;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10.5' r='2'/%3E%3Cpath d='M6 16.5c.6-1.6 1.7-2.2 3-2.2s2.4.6 3 2.2M14.5 9h3.5M14.5 13h3.5'/%3E%3C/svg%3E"); }

/* Pestañas dentro de un popup (Redes: sociales / académico).
   Cada pestaña lleva su ícono; la activa se ilumina con el color del popup. */
.pestana--sociales  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 13.5l6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E"); }
.pestana--academico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c3 2 9 2 12 0v-5'/%3E%3Cpath d='M22 9v5'/%3E%3C/svg%3E"); }

.popup--redes .popup__cab { border-bottom: 0; padding-bottom: 8px; }
.pestanas {
  flex: none; display: flex; gap: 6px;
  padding: 6px clamp(18px, 3vw, 32px) 0;
  border-bottom: 1px solid rgba(var(--acento-rgb), .25);
}
.pestana {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 14px; margin-bottom: -1px; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 700; letter-spacing: .03em;
  color: var(--tinta-suave); background: transparent;
  border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0;
  transition: color .2s, background .2s, border-color .2s;
}
.pestana::before {
  content: ""; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.pestana:hover { color: rgb(var(--acento-rgb)); background: rgba(var(--acento-rgb), .05); }
.pestana[aria-selected="true"] {
  color: rgb(var(--acento-rgb));
  background: rgba(var(--acento-rgb), .1);
  border-color: rgba(var(--acento-rgb), .45);
  box-shadow: inset 0 3px 0 rgb(var(--acento-rgb)), 0 -6px 20px rgba(var(--acento-rgb), .12);
}
[role="tabpanel"][hidden] { display: none; }
[role="tabpanel"]:not([hidden]) { animation: velo-entra .2s ease; }

.popup {
  width: min(720px, calc(100vw - 32px));
  max-width: none;
  max-height: min(84dvh, 780px);
  padding: 0;
  color: var(--tinta);
  background: rgba(8, 12, 28, .9);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(var(--acento-rgb), .45);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(var(--acento-rgb), .08),
    0 0 70px rgba(var(--acento-rgb), .18),
    0 30px 80px rgba(0, 0, 0, .6),
    inset 0 0 60px rgba(var(--acento-rgb), .05);
  overflow: hidden;
}
.popup:focus, .popup:focus-visible { outline: none; }  /* el foco se marca en los enlaces, no en el panel */
.popup[open] { display: flex; flex-direction: column; animation: popup-entra .3s cubic-bezier(.2, .8, .2, 1); }
.popup::backdrop { background: rgba(3, 5, 14, .62); backdrop-filter: blur(3px); }
.popup[open]::backdrop { animation: velo-entra .3s ease; }

/* SAFARI: aquí va "1 1 auto" y no "1". Con "flex: 1" (que parte de altura 0) Safari
   aplasta el popup hasta dejar solo el borde, porque el popup no tiene alto fijo. */
.popup__marco { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.popup__marco::before {            /* línea de luz superior */
  content: ""; flex: none; height: 3px;
  background: linear-gradient(90deg, transparent, rgb(var(--acento-rgb)), transparent);
  box-shadow: 0 0 18px rgb(var(--acento-rgb));
}

.popup__cab {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 32px) 16px;
  border-bottom: 1px solid rgba(var(--acento-rgb), .18);
}
.popup__etiqueta {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--acento-rgb)); margin-bottom: 2px;
}
.popup__titulo {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem);
  line-height: 1.15; letter-spacing: .01em;
  text-shadow: 0 0 22px rgba(var(--acento-rgb), .45);
}
.popup__desc { font-size: .875rem; color: var(--tinta-suave); margin-top: 4px; }

.popup__cerrar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1; color: rgb(var(--acento-rgb));
  background: rgba(var(--acento-rgb), .08); border: 1px solid rgba(var(--acento-rgb), .4);
  transition: background .2s, border-color .2s, transform .2s;
}
.popup__cerrar:hover { background: rgba(var(--acento-rgb), .2); border-color: rgb(var(--acento-rgb)); transform: rotate(90deg); }
.popup :focus-visible { outline-color: rgb(var(--acento-rgb)); }

.popup__cuerpo {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px clamp(18px, 3vw, 32px) clamp(20px, 3vw, 32px);
  scrollbar-width: thin; scrollbar-color: rgba(var(--acento-rgb), .6) transparent;
}

/* Lista de documentos (título + clic → PDF) */
.docs { display: grid; gap: 8px; }
.doc {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(var(--acento-rgb), .05); border: 1px solid rgba(var(--acento-rgb), .2);
  transition: transform .2s, border-color .2s, background .2s;
}
.doc:hover { transform: translateX(4px); border-color: rgb(var(--acento-rgb)); background: rgba(var(--acento-rgb), .12); }
.doc__ico, .tema__ico {
  flex: none; width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(var(--acento-rgb), .14); border: 1px solid rgba(var(--acento-rgb), .3);
}
.doc__ico::before, .tema__ico::before {
  content: ""; width: 22px; height: 22px; background: rgb(var(--acento-rgb));
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.doc__texto { display: grid; gap: 2px; min-width: 0; }
.doc__titulo { font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.doc__meta { font-size: .8125rem; color: var(--tinta-suave); overflow-wrap: anywhere; }
.doc__tipo {
  margin-left: auto; flex: none;
  padding: 3px 9px; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  color: rgb(var(--acento-rgb)); border: 1px solid rgba(var(--acento-rgb), .45);
}
.doc__tipo::after { content: " ↗"; }

/* Acerca de la obra de JAR */
.texto-obra { display: grid; gap: 12px; font-size: .9375rem; line-height: 1.7; color: var(--tinta-suave); max-width: 62ch; }
.popup__subtitulo {
  margin: 22px 0 10px;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--acento-rgb));
}

/* Conozca a JAR */
/* Flex: si falta la foto, el texto ocupa todo el ancho */
.perfil { display: flex; gap: clamp(18px, 3vw, 32px); align-items: flex-start; }
.perfil__texto { flex: 1; min-width: 0; }
.perfil__foto {
  flex: 0 0 200px;
  margin: 0; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background:
    radial-gradient(circle at 50% 60%, rgba(var(--acento-rgb), .45), transparent 65%),
    linear-gradient(180deg, rgba(var(--acento-rgb), .12), rgba(6, 10, 22, .8));
  border: 1px solid rgba(var(--acento-rgb), .35);
  box-shadow: inset 0 0 40px rgba(var(--acento-rgb), .15);
}
.perfil__foto picture { display: contents; }
.perfil__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;   /* encuadre: cabeza a cintura */
  padding: 14px 10px 0;
  filter: drop-shadow(0 0 14px rgba(75, 224, 232, .45));
}
.perfil__texto { display: grid; gap: 12px; font-size: .9375rem; color: var(--tinta-suave); }
.perfil__nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; color: var(--tinta); }
.perfil__rol { margin-top: -10px; font-size: .8125rem; font-weight: 600; color: rgb(var(--acento-rgb)); }
.perfil__enlaces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.boton {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  font-family: inherit; cursor: pointer;
  font-size: .8125rem; font-weight: 700; color: #120a24;
  background: rgb(var(--acento-rgb)); border: 1px solid rgb(var(--acento-rgb));
  transition: background .2s, color .2s, box-shadow .2s;
}
.boton:hover { box-shadow: 0 0 22px rgba(var(--acento-rgb), .55); }
.boton--sec { color: rgb(var(--acento-rgb)); background: rgba(var(--acento-rgb), .08); border-color: rgba(var(--acento-rgb), .45); }
.boton--sec:hover { background: rgba(var(--acento-rgb), .2); }

/* Vista de introducción (ensayos): reemplaza la lista dentro del mismo popup */
.intro-vista { display: none; }
.popup.presentando .popup__cab, .popup.presentando .popup__cuerpo { display: none; }
.popup.presentando .intro-vista {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;   /* 1 1 auto: ver nota de Safari arriba */
  animation: velo-entra .25s ease;
}
.intro-vista__cuerpo {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 12px; align-content: start;
  padding: clamp(20px, 3.5vw, 36px) clamp(18px, 3.5vw, 40px) clamp(24px, 3.5vw, 40px);
  scrollbar-width: thin; scrollbar-color: rgba(var(--acento-rgb), .6) transparent;
}
.intro-vista__titulo {
  font-family: var(--f-titulo); font-weight: 700;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem); line-height: 1.15;
  text-shadow: 0 0 22px rgba(var(--acento-rgb), .45);
}
.intro-vista__meta { margin-top: -6px; font-size: .8125rem; font-weight: 600; color: rgb(var(--acento-rgb)); }
.intro-vista__texto {
  display: grid; gap: 12px; max-width: 62ch;
  font-size: 1rem; line-height: 1.7; color: var(--tinta);
}
.intro-vista__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* Modo lector: el popup se agranda y muestra el documento.
   PDF: solo en computador. Ensayos HTML: en todas las pantallas. */
.lector { display: none; }
.popup.leyendo {
  width: min(1400px, 95vw);
  height: 92dvh; max-height: 92dvh;
}
.popup.leyendo .popup__cab, .popup.leyendo .popup__cuerpo { display: none; }
.popup.leyendo .lector {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;   /* 1 1 auto: ver nota de Safari arriba */
  animation: velo-entra .25s ease;
}
.lector__barra {
  flex: none; display: flex; align-items: center; gap: 16px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid rgba(var(--acento-rgb), .18);
}
.lector__volver {
  flex: none; height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 700; color: rgb(var(--acento-rgb));
  background: rgba(var(--acento-rgb), .08); border: 1px solid rgba(var(--acento-rgb), .4);
  transition: background .2s, border-color .2s;
}
.lector__volver:hover { background: rgba(var(--acento-rgb), .2); border-color: rgb(var(--acento-rgb)); }
.lector__titulo {
  flex: 1; min-width: 0;
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.0625rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lector__acciones { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lector__btn[hidden] { display: none; }
.lector__btn {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px;
  font-size: .8125rem; font-weight: 700; color: var(--tinta-suave);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: color .2s, border-color .2s;
}
.lector__btn:hover { color: rgb(var(--acento-rgb)); border-color: rgba(var(--acento-rgb), .6); }
.lector__hoja { position: relative; flex: 1 1 auto; min-height: 0; background: rgba(0, 0, 0, .35); }
.lector__cargando {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .875rem; color: var(--tinta-suave);
}
/* El aviso "Cargando" queda detrás; el PDF lo tapa en cuanto se dibuja */
.lector__pdf {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: transparent;
}
.lector--listo .lector__cargando { display: none; }

/* En computador el PDF se lee aquí mismo: la etiqueta pierde la flecha de "sale de la página".
   Los canales de contacto no son PDF y la conservan. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .popup--obra .doc__tipo::after,
  .popup--libros .doc__tipo::after, .popup--ensayos .doc__tipo::after,
  .popup--articulos .doc__tipo::after, .popup--otra .doc__tipo::after { content: none; }
}
.doc--correo .doc__tipo::after { content: none; }
.doc--redes .doc__tipo::after,
.doc--perfil .doc__tipo::after { content: none; }   /* abren un popup, no salen de la página */

/* 10c. NOVEDADES ---------------------------------------------- */
/* Las noticias vienen de novedades.html (las pinta script.js) */
.novedades__aviso { font-size: .9375rem; color: var(--tinta-suave); }
.novedades__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.novedad {
  display: grid; gap: 8px; justify-items: start;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(var(--acento-rgb), .05); border: 1px solid rgba(var(--acento-rgb), .2);
  scroll-margin-top: 12px;
  transition: border-color .3s, box-shadow .3s;
}
.novedad--nueva {
  border-color: rgba(var(--acento-rgb), .55);
  box-shadow: 0 0 26px rgba(var(--acento-rgb), .12), inset 3px 0 0 rgb(var(--acento-rgb));
}
.novedad--destacada { border-color: rgb(var(--acento-rgb)); box-shadow: 0 0 0 2px rgba(var(--acento-rgb), .35), 0 0 30px rgba(var(--acento-rgb), .2); }
.novedad--pasada { background: rgba(255, 255, 255, .025); border-color: rgba(255, 255, 255, .1); }
.novedad--pasada h3 { color: var(--tinta-suave); }

.novedad .novedad__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.novedad__fecha, .novedad__hora {
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--acento-rgb));
}
.novedad__hora { color: var(--tinta); letter-spacing: .06em; }
.novedad__hora::before { content: "·"; margin-right: 10px; color: rgba(var(--acento-rgb), .7); }
.novedad__etiqueta {
  padding: 2px 9px; border-radius: 999px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgb(var(--acento-rgb)); border: 1px solid rgba(var(--acento-rgb), .55);
}
.novedad__etiqueta--nueva { color: #fff; background: rgb(var(--acento-rgb)); border-color: transparent; box-shadow: 0 0 12px rgba(var(--acento-rgb), .55); }
.novedad__etiqueta--hoy { color: #1a0505; background: #ffd166; border-color: transparent; box-shadow: 0 0 12px rgba(255, 209, 102, .5); }
.novedad__etiqueta--pasada { color: var(--tinta-suave); border-color: rgba(255, 255, 255, .2); }

.novedad h3 { font-family: var(--f-titulo); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; color: var(--tinta); }
.novedad p:not(.novedad__cab), .novedad__mas { font-size: .9375rem; line-height: 1.65; color: var(--tinta-suave); max-width: 62ch; }
.novedad__mas { display: grid; gap: 10px; }
.novedad__mas[hidden] { display: none; }
.novedad p a, .novedad__mas a, .novedad__lugar a {
  color: rgb(var(--acento-rgb)); text-decoration: underline; text-underline-offset: 2px;
}

/* Dónde: presencial · virtual */
.novedad__donde { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: .875rem; color: var(--tinta); }
.novedad__modo {
  flex: none; padding: 2px 9px; border-radius: 6px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
}
.novedad__lugar { line-height: 1.5; }

.novedad__ver {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 700; color: rgb(var(--acento-rgb));
}
.novedad__ver::after { content: " ▾"; }
.novedad__ver[aria-expanded="true"]::after { content: " ▴"; }
.novedad__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.novedad__acciones .boton { height: 36px; padding: 0 15px; }
.novedad__acciones .boton:not([href^="#"]):not([download])::after { content: "\00a0↗"; }
.novedad__compartir {
  margin-left: auto; padding: 6px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .75rem; font-weight: 600; color: var(--tinta-suave);
}
.novedad__compartir:hover { color: rgb(var(--acento-rgb)); }

@keyframes popup-entra { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popup-sube  { from { transform: translateY(100%); } to { transform: none; } }
@keyframes velo-entra  { from { opacity: 0; } to { opacity: 1; } }

/* 11. RESPONSIVO ---------------------------------------------- */
/* Pantallas medianas: el panel central pasa arriba a todo el ancho */
@media (max-width: 1100px) {
  .escenario { grid-template-columns: 1fr 1fr; }
  .panel--centro { grid-column: 1 / -1; order: -1; }
  .libros > li { flex-basis: calc((100% - 36px) / 4); }
}

/* Menú en barra hasta 900 px; más angosto, en botón desplegable */
@media (max-width: 900px) {
  .menu-toggle {
    position: relative;
    display: grid; place-items: center; width: 44px; height: 44px;
    background: transparent; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer;
  }
  /* Con el menú cerrado, el bombillo se ve sobre el botón */
  .menu-toggle .bombillo { position: absolute; top: 6px; right: 6px; }
  .menu-toggle[aria-expanded="true"] .bombillo { display: none; }
  .menu-toggle__barras, .menu-toggle__barras::before, .menu-toggle__barras::after {
    content: ""; display: block; width: 18px; height: 2px; background: var(--cian);
    transition: transform .2s, opacity .2s;
  }
  .menu-toggle__barras { position: relative; }
  .menu-toggle__barras::before { position: absolute; top: -6px; }
  .menu-toggle__barras::after { position: absolute; top: 6px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__barras { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__barras::before { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__barras::after { transform: translateY(-6px) rotate(-45deg); }

  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px clamp(16px, 4vw, 56px) 16px;
    background: var(--vidrio-fuerte); border-bottom: 1px solid var(--borde);
    display: none;
  }
  .menu.abierto { display: flex; }
  .menu a, .menu a.menu__novedades {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .menu a::before {     /* punto de color: anticipa el tono de lo que abre */
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: rgb(var(--acento-rgb)); box-shadow: 0 0 10px rgb(var(--acento-rgb));
  }
  .menu a.menu__novedades::before { display: none; }   /* ya tiene su bombillo */
  .menu a.menu__novedades:has(.bombillo[hidden])::before { display: block; }
  .menu a.menu__novedades .bombillo { order: -1; width: 8px; height: 8px; }
}

/* Móvil: una sola columna, popup como hoja inferior */
@media (max-width: 720px) {
  .marca__sub { display: none; }

  .escenario { grid-template-columns: minmax(0, 1fr); }
  .panel--centro { order: 0; }
  .libros > li { flex-basis: 58%; }
  .temas { grid-auto-rows: auto; }
  .pie { flex-direction: column; }

  .popup {
    width: 100%; max-height: 90dvh;
    margin: auto 0 0;               /* pegado abajo */
    border-radius: 20px 20px 0 0; border-bottom: 0;
  }
  .popup[open] { animation: popup-sube .32s cubic-bezier(.2, .8, .2, 1); }
  .perfil { flex-direction: column; align-items: stretch; }
  .perfil__foto { flex: none; width: min(200px, 60%); align-self: center; }
  .doc__tipo { display: none; }
  .pestanas { gap: 4px; padding: 4px 12px 0; }
  .pestana { padding: 0 8px; gap: 8px; font-size: .8125rem; }

  /* Lector en celular: ocupa toda la hoja y la barra se compacta */
  .popup.leyendo { width: 100%; height: 92dvh; max-height: 92dvh; }
  .lector__barra { gap: 8px; padding: 10px 12px; }
  .lector__titulo, .lector__btn--bajar, .lector .largo { display: none; }
  .lector__volver, .lector__btn { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}