/* Patricio Rodríguez · tokens derivados de REQUISITOS.md (v0.6: Aleo + Inter, Ximo 2026-09-15). Blanco, #222, #6B6B6B y un solo acento #3F4771 en enlaces. */
/* Aleo (OFL, variable 100–900), elegida por Ximo el 2026-09-15 para los títulos; ficheros oficiales de Google Fonts, latin + latin-ext */
@font-face { font-family: "Aleo"; src: url("../fonts/aleo-normal-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Aleo"; src: url("../fonts/aleo-normal-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Aleo"; src: url("../fonts/aleo-italic-latin.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Aleo"; src: url("../fonts/aleo-italic-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Marca (Ximo, 2026-09-17): pidió Avenir Next Demi Bold, que es de pago; Nunito Sans 700 (OFL, Google Fonts) es la libre más parecida. Solo el peso 700 latino: es para el nombre. */
@font-face { font-family: "Nunito Sans"; src: url("../fonts/nunito-sans-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --color-fondo: #FFFFFF; --color-tinta: #222222; --color-tinta-2: #6B6B6B; --color-acento: #3F4771; --color-linea: #E9E9E9;
  --f-display: "Aleo", "Rockwell", Georgia, serif;
  --f-cuerpo: "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-marca: "Nunito Sans", "Avenir Next", "Avenir", "Inter", Arial, sans-serif;
  --t-caption: 0.8125rem; --t-cuerpo: 1.125rem;
  --t-2: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --t-3: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --t-4: clamp(1.9rem, 1.3rem + 2.4vw, 2.667rem);
  --t-5: clamp(2.3rem, 1.4rem + 3.8vw, 3.556rem);
  --e-1: 4px; --e-2: 8px; --e-3: 16px; --e-4: 24px; --e-5: 40px; --e-6: 64px; --e-7: clamp(64px, 9vw, 104px); --e-8: clamp(96px, 12vw, 168px);
  --margen: clamp(20px, 6vw, 128px);
  --alto-cabecera: 88px;
  --icono-tamano: 20px; --icono-trazo: 1.5;
}
@layer reset, base, layout, components, motion;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, video, picture { max-width: 100%; height: auto; display: block; }
  h1, h2, h3, p, figure, ul, ol, blockquote { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  a { color: inherit; }
  button, input, textarea { font: inherit; color: inherit; }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }
}
@layer base {
  html { color-scheme: light; background: var(--color-fondo); }
  body { background: var(--color-fondo); color: var(--color-tinta); font-family: var(--f-cuerpo); font-size: var(--t-cuerpo); line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: clip; }
  /* El pie sigue al contenido (sin pegarlo al fondo de la pantalla): en pantallas altas un pie «pegajoso» abre un vacío enorme */
  h1, h2 { font-family: var(--f-display); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
  h1 { font-size: var(--t-5); }
  h2 { font-size: var(--t-4); }
  h3 { font-family: var(--f-cuerpo); font-size: var(--t-caption); font-weight: 500; color: var(--color-tinta-2); }
  a { text-decoration: none; }
  /* El cambio de color al pasar el cursor es solo del menú (cliente, 2026-09-19); el resto de enlaces se subraya sin cambiar de color */
  p a, .enlace, .prosa a { color: var(--color-acento); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  :focus-visible { outline: 2px solid var(--color-tinta); outline-offset: 3px; }
  :focus:not(:focus-visible) { outline: 0; }
  /* Nada se pone azul al tocar, seleccionar o arrastrar: sin resaltado de toque, selección neutra, imágenes no seleccionables */
  * { -webkit-tap-highlight-color: transparent; }
  ::selection { background: var(--color-linea); color: inherit; }
  img, picture, video, svg { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
  a img { pointer-events: none; }
  .icono { width: var(--icono-tamano); height: var(--icono-tamano); stroke-width: var(--icono-trazo); color: currentColor; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; }
  .icono.inline { vertical-align: -0.15em; margin-left: 0.2em; width: 0.9em; height: 0.9em; }
  .meta { color: var(--color-tinta-2); font-size: var(--t-caption); line-height: 1.5; }
  .titulo-obra { font-family: var(--f-display); font-style: italic; font-weight: 400; }
  .fr { font-size: 0.72em; line-height: 0; }
  .fr sup { vertical-align: 0.5em; font-size: inherit; }
  .fr sub { vertical-align: -0.15em; font-size: inherit; }
  .saltar { position: absolute; left: -999px; top: 0; background: var(--color-fondo); padding: var(--e-2) var(--e-3); z-index: 10; }
  .saltar:focus { left: var(--margen); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  /* Botones (Bruce, 2026-09-17): cada uno responde levemente al cursor. Iconos: color de acento y un gesto propio (flechas avanzan, pausa y ampliar crecen, cerrar gira). Texto: la línea baja un poco. */
  .menu-movil summary:hover { color: var(--color-acento); }
  .video-control:hover .icono { transform: scale(1.15); }
  .cerrar:hover .icono { transform: rotate(90deg); }
  button:active .icono { transform: scale(0.92); }
  .prosa p, .prosa li { max-width: 65ch; }
  .prosa p + p, .prosa ul + p, .prosa p + ul { margin-top: var(--e-3); }
  .prosa h2 { font-size: var(--t-3); margin: var(--e-5) 0 var(--e-3); }
  .prosa h3 { margin: var(--e-4) 0 var(--e-2); }
  .prosa ul { display: grid; gap: var(--e-1); }
  .prosa blockquote { padding-left: var(--e-4); border-left: 1px solid var(--color-linea); }
  .prosa hr { border: 0; border-top: 1px solid var(--color-linea); margin: var(--e-5) 0; }
}
@layer layout {
  .cabecera { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-4); padding: var(--e-4) var(--margen); min-height: var(--alto-cabecera); position: sticky; top: 0; z-index: 5; background: var(--color-fondo); }
  /* La cabecera acompaña al lector (Bruce, 2026-09-16): fija arriba; al desplazarse aparece un filete fino que la separa del contenido */
  .cabecera.pegada { box-shadow: 0 1px 0 var(--color-linea); }
  /* Marca prominente como en taniacandiani.com (Ximo, 2026-09-17): mayúsculas, negro puro, letra espaciada, geométrica demi bold */
  .marca { font-family: var(--f-marca); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: #000; white-space: nowrap; justify-self: start; }
  .nav { display: flex; gap: clamp(20px, 2.6vw, 40px); justify-self: center; font-size: 0.9375rem; font-weight: 500; }
  .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
  .nav a:hover { color: var(--color-acento); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
  .utiles { display: flex; align-items: center; gap: var(--e-4); justify-self: end; }
  .utiles a { display: inline-flex; align-items: center; }
  /* Iconos de contacto y redes (Bruce, 2026-09-17): al pasar el cursor se rellenan del acento; el trazo interior pasa a blanco para que el sobre y la cámara sigan leyéndose */
  .utiles a.red:hover .icono { fill: var(--color-acento); stroke: #fff; }
  .idiomas { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; }
  .idiomas span { color: var(--color-tinta-2); margin: 0 6px; }
  .idiomas a[aria-current="true"] { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
  .idiomas a.off { color: var(--color-tinta-2); font-weight: 400; }
  .menu-movil { display: none; }
  main { padding: 0 var(--margen); }
  .pie { padding: var(--e-7) var(--margen) var(--e-6); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); color: var(--color-tinta-2); font-size: var(--t-caption); }
  .pie a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .cabecera-seccion { padding: var(--e-5) 0 var(--e-6); display: grid; gap: var(--e-3); }
  .cabecera-seccion .meta { max-width: 65ch; }
  .bloque { padding: 0 0 var(--e-7); display: grid; gap: var(--e-4); max-width: 72ch; }
  .bloque h2 { font-size: var(--t-3); }
  /* Cabecera compacta con menú desplegable hasta 1200 px (2026-10-16): con la marca en Nunito 24 px y seis entradas, la cabecera
     de escritorio necesita ~1185 px en español sin invadir el margen derecho; antes el corte estaba en 900 y entre 901 y 1100 se salía por la derecha (oculto por overflow-x: clip) */
  @media (max-width: 1200px) {
    :root { --alto-cabecera: 72px; }
    .cabecera { grid-template-columns: 1fr auto; padding: var(--e-3) var(--margen); gap: var(--e-3); }
    .marca { font-size: 1.0625rem; letter-spacing: 0.12em; }
    .nav, .utiles { display: none; }
    .menu-movil { display: block; justify-self: end; }
    .menu-movil summary { cursor: pointer; display: inline-flex; padding: var(--e-2); margin: calc(-1 * var(--e-2)); }
    .menu-movil summary .cerrar-menu { display: none; }
    .menu-movil[open] summary .abrir { display: none; }
    .menu-movil[open] summary .cerrar-menu { display: inline-flex; }
    .menu-movil .panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-fondo); padding: var(--e-4) var(--margen) var(--e-6); display: grid; gap: var(--e-3); font-size: var(--t-2); font-weight: 400; border-bottom: 1px solid var(--color-linea); }
    .menu-movil .panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
    .menu-movil .panel a:hover { color: var(--color-acento); }
    .menu-movil .panel .idiomas { font-size: var(--t-caption); margin-top: var(--e-2); }
  }
}
@layer components {
  /* Inicio: la obra como una hoja, sola, con aire. Con vídeo, la cabecera respira igual. */
  .hoja { min-height: calc(100svh - var(--alto-cabecera)); display: grid; align-content: center; justify-items: center; padding: var(--e-4) 0 var(--e-7); }
  .hoja figure { display: inline-grid; justify-items: start; gap: var(--e-3); max-width: 100%; }
  .hoja img { max-height: 76svh; width: auto; max-width: 100%; object-fit: contain; }
  .hoja > a { max-width: 100%; }
  /* Vídeo de cabecera a pantalla completa (Bruce, 2026-09-17): a sangre, todo el alto que queda bajo la cabecera fija */
  .hoja-video { position: relative; isolation: isolate; display: block; min-height: 0; padding: 0; margin: 0 calc(-1 * var(--margen)); height: calc(100svh - var(--alto-cabecera)); }
  .hoja-video video { width: 100%; height: 100%; object-fit: cover; background: var(--color-fondo); }
  /* Rótulo sobre el vídeo (Bruce, 2026-09-17, como taniacandiani.com): titular grande en Aleo y subtítulo en Inter, abajo a la izquierda,
     en blanco; un velo oscuro que sube desde el borde inferior garantiza la lectura sobre cualquier fotograma (función, no adorno) */
  /* Rótulo sobre el vídeo (Bruce, 2026-09-17, como taniacandiani.com). El oscurecido que garantiza la lectura NO es una capa encima
     del vídeo: en el Chrome de Bruce cualquier capa translúcida sobre el vídeo se ignoraba en reposo (plano de hardware) y aparecía solo
     al desplazarse. Va como MÁSCARA del propio vídeo sobre fondo negro: donde la máscara es más transparente asoma el negro. Una máscara
     obliga al navegador a componer el vídeo por la vía normal, así que se ve igual quieto y en movimiento. */
  .hoja-video.con-rotulo { background: #000; }
  .hoja-video.con-rotulo video { -webkit-mask-image: linear-gradient(to top, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0.58) 28%, #000 72%), radial-gradient(ellipse 62% 56% at 8% 100%, rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.5) 45%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0.58) 28%, #000 72%), radial-gradient(ellipse 62% 56% at 8% 100%, rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.5) 45%, #000 100%); mask-composite: intersect; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; }
  .hoja-video .rotulo { position: absolute; inset: 0; z-index: 2; display: grid; align-content: end; gap: var(--e-3); padding: 0 var(--margen) clamp(48px, 9vh, 96px); color: #fff; pointer-events: none; text-shadow: 0 1px 3px rgb(0 0 0 / 0.5), 0 2px 28px rgb(0 0 0 / 0.55); }
  .hoja-video .rotulo > * { pointer-events: auto; }
  .hoja-video .rotulo h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem); font-weight: 400; line-height: 1; letter-spacing: -0.015em; max-width: 12ch; overflow-wrap: normal; text-wrap: balance; }
  .hoja-video .rotulo p { font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem); font-weight: 500; letter-spacing: 0.01em; max-width: 48ch; }
  /* Enlace a la obra disponible bajo el subtítulo (2026-10-16): texto blanco subrayado, sin caja ni flecha; la regla general «p a» lo pondría en acento, ilegible sobre el vídeo */
  .hoja-video .rotulo .rotulo-enlace a { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
  .hoja-video .rotulo .rotulo-enlace a:hover { text-decoration-thickness: 2px; text-underline-offset: 0.42em; }
  .hoja-video.con-rotulo .video-control { color: #fff; background: none; z-index: 3; }
  .video-control { position: absolute; right: var(--margen); bottom: var(--e-4); padding: var(--e-2); color: var(--color-tinta); background: var(--color-fondo); display: inline-flex; }
  .video-control .reproducir { display: none; }
  .video-control[aria-pressed="true"] .pausa { display: none; }
  .video-control[aria-pressed="true"] .reproducir { display: inline-flex; }
  /* Paso lento de obras en la hoja: todas apiladas en la misma celda, solo una visible; fundido de 1,2 s, 7 s por obra; pausable */
  .hoja .pase { display: grid; justify-items: center; align-items: center; max-width: 100%; }
  .hoja .pase > a { grid-area: 1 / 1; max-width: 100%; transition: opacity 1200ms ease-in-out; }
  .hoja .pase > a[aria-hidden="true"] { opacity: 0; pointer-events: none; }
  .hoja-pase { position: relative; }
  .pase-control { bottom: calc(var(--e-7) - var(--e-2)); }
  /* Inicio: la frase del artista junto a su retrato (Bruce, 2026-09-17: «directamente texto e imagen»). Solo texto e imagen. */
  .intro { padding: var(--e-7) 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-6); align-items: center; }
  .intro .cita { margin: 0; max-width: 44ch; }
  .intro .cita p { font-weight: 300; font-size: var(--t-3); line-height: 1.3; letter-spacing: -0.005em; }
  .intro .cita footer { margin-top: var(--e-4); }
  .intro .retrato { display: block; max-width: 480px; justify-self: end; width: 100%; }
  .intro .retrato img { width: 100%; height: auto; }
  .texto-inicio p a { white-space: nowrap; }
  /* Series: carrusel de portadas iguales (4 a la vista, 3 en tableta, 2 en móvil) con flechas y bucle (Bruce, 2026-09-17: «hacer más recta»).
     Sin JS se desplaza con el dedo o el ratón (scroll-snap nativo) y las flechas no aparecen. */
  .series-inicio { padding: 0 0 var(--e-7); display: grid; gap: var(--e-4); }
  .series-inicio h2, .tienda-inicio h2, .texto-inicio h2 { font-size: var(--t-3); }
  .cabecera-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); }
  html:not(.js) .pista-ayuda, html:not(.js) .flecha { display: none; }
  /* Flechas grandes y redondas a los lados de la fila (Bruce, 2026-09-17: «más evidentes»), centradas en la altura de las portadas */
  /* min-width: 0 obligatorio: como hijo de la rejilla, sin él su mínimo automático toma el ancho de las 18 portadas y ensancha la página entera */
  .carrusel-marco { position: relative; min-width: 0; }
  .flecha { position: absolute; top: calc(var(--alto-portada, 60%) / 2); transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-fondo); border: 1px solid var(--color-tinta); color: var(--color-tinta); box-shadow: 0 1px 6px rgb(0 0 0 / 0.08); }
  .flecha .icono { width: 22px; height: 22px; }
  .flecha-prev { left: -24px; } .flecha-next { right: -24px; }
  .flecha:hover { color: var(--color-fondo); background: var(--color-acento); border-color: var(--color-acento); }
  .flecha:active { transform: translateY(-50%) scale(0.94); }
  /* En el extremo, la flecha de ese lado se atenúa: no hay más series (sin bucle, Ximo 2026-09-20) */
  .flecha.apagada { opacity: 0.3; pointer-events: none; }
  .carrusel { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--e-2); scrollbar-width: none; margin: 0 calc(-1 * var(--e-2)); padding: 0 var(--e-2); cursor: grab; }
  .carrusel.arrastrando { scroll-snap-type: none; cursor: grabbing; scroll-behavior: auto; }
  .carrusel.arrastrando a { pointer-events: none; }
  .carrusel:focus-visible { outline-offset: 6px; }
  .carrusel::-webkit-scrollbar { display: none; }
  /* 4 portadas enteras y un asomo de la quinta (--asomo): la señal de que la fila continúa */
  .carrusel { --columnas: 4; --asomo: 56px; }
  .carrusel .pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--columnas) - 1) * var(--e-4) - var(--asomo)) / var(--columnas)); gap: var(--e-4); }
  .carrusel li { scroll-snap-align: start; }
  .carrusel a { display: block; }
  .carrusel figure { display: grid; gap: var(--e-2); }
  .carrusel .portada-serie { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
  .carrusel .portada-serie.entera { object-fit: contain; }
  .carrusel figcaption { display: grid; gap: 2px; }
  .carrusel .titulo-serie { font-family: var(--f-display); font-size: var(--t-2); font-weight: 300; }
  .carrusel a:hover .titulo-serie { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  /* Tienda: obra disponible en mosaico, con el precio (o «a consultar») en el pie de cada obra */
  .tienda-inicio { padding: 0 0 var(--e-7); display: grid; gap: var(--e-4); }
  .tienda-inicio .rejilla { padding-bottom: 0; }
  .tienda-inicio h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
  .texto-inicio { padding: 0 0 var(--e-7); display: grid; gap: var(--e-4); max-width: 72ch; }
  .texto-inicio article { display: grid; gap: var(--e-2); }
  .texto-inicio h3 { font-family: var(--f-display); font-size: var(--t-3); font-weight: 300; color: var(--color-tinta); }
  .contacto-inicio { padding: 0 0 var(--e-7); max-width: 65ch; }
  @media (max-width: 1100px) { .carrusel { --columnas: 3; --asomo: 44px; } }
  @media (max-width: 900px) { .intro { grid-template-columns: 1fr; gap: var(--e-5); padding: var(--e-6) 0; } .intro .retrato { justify-self: start; max-width: 420px; } }
  @media (max-width: 640px) { .carrusel { --columnas: 2; --asomo: 32px; } .carrusel .pista { grid-auto-columns: calc((100% - var(--e-3) - var(--asomo)) / 2); gap: var(--e-3); } .flecha { width: 40px; height: 40px; } .flecha-prev { left: -8px; } .flecha-next { right: -8px; } .pista-ayuda { display: none; } }
  .publicacion { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-6); align-items: end; padding: 0 0 var(--e-7); }
  .publicacion figure { max-width: 420px; }
  .publicacion .texto { display: grid; gap: var(--e-3); }
  .publicacion h2 { font-size: var(--t-3); }
  @media (max-width: 900px) { .publicacion { grid-template-columns: 1fr; gap: var(--e-4); } .hoja { min-height: auto; } .hoja-video { min-height: 0; height: calc(100svh - var(--alto-cabecera)); } .hoja img { max-height: 70svh; } .pase-control { bottom: calc(var(--e-7) + var(--e-2)); } }
  /* Pantallas verticales (móvil en «modo escritorio», tabletas en vertical): la portada no fuerza la altura de la pantalla; la obra manda */
  @media (max-aspect-ratio: 1/1) { .hoja:not(.hoja-video) { min-height: auto; padding-top: var(--e-3); } .hoja img { max-height: none; } }
  @media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 5/4) { .hoja:not(.hoja-video) { min-height: auto; } }

  /* Obra: índice en proporción real, filtros de serie en texto */
  .filtros { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); font-size: 0.9375rem; }
  .filtros a { color: var(--color-tinta-2); }
  .filtros a:hover { color: var(--color-tinta); }
  .filtros a[aria-pressed="true"] { color: var(--color-tinta); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
  .filtros .meta { margin-left: 0.35em; }
  .rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-5); padding-bottom: var(--e-7); align-items: start; }
  .rejilla figure { display: grid; gap: var(--e-2); align-content: start; }
  .rejilla img { width: 100%; height: auto; object-fit: contain; }
  .rejilla a:hover .titulo-obra { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
  .rejilla a[hidden] { display: none; }
  .rejilla .vacio { grid-column: 1 / -1; }
  @media (min-width: 1500px) { .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 1100px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); } }
  @media (max-width: 640px) { .rejilla { grid-template-columns: 1fr; gap: var(--e-6); } }
  /* Índice de obra en mosaico (collage): columnas iguales, cada obra en su proporción y apoyada en la anterior de su columna.
     Con JS cada pieza ocupa tantas filas de 4 px como mide y la colocación densa rellena siempre la columna más corta
     sin alterar el orden de lectura ni el tabulador. Sin JS queda la rejilla de arriba. */
  .mosaico { gap: var(--e-5); }
  html.js .mosaico { grid-auto-rows: 4px; grid-auto-flow: dense; row-gap: 0; }
  html.js .mosaico > a { padding-bottom: var(--e-5); }
  html.js .mosaico > .vacio { grid-row: span 8; }
  @media (max-width: 1100px) { .mosaico { gap: var(--e-4); } html.js .mosaico > a { padding-bottom: var(--e-4); } }
  @media (max-width: 640px) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); } html.js .mosaico > a { padding-bottom: var(--e-4); } }

  /* Ficha de obra: la obra a ≥ 60 % del alto; la ficha al lado, pegajosa */
  .ficha { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--e-6); align-items: start; padding: var(--e-4) 0 var(--e-6); }
  .ficha .imagen { display: grid; justify-items: center; }
  .ficha .imagen img { max-height: 80svh; width: auto; max-width: 100%; }
  .ampliar { display: block; max-width: 100%; width: 100%; cursor: zoom-in; }
  .ficha .imagen .ampliar { width: auto; }
  .detalles .ampliar picture, .detalles .ampliar img { width: 100%; }
  .ficha .pista { display: inline-flex; align-items: center; gap: var(--e-2); margin-top: var(--e-3); justify-self: start; cursor: zoom-in; }
  .ficha .pista:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .ficha .pista .icono { width: 16px; height: 16px; }
  .ficha .imagen:hover .pista .icono { transform: scale(1.15); }
  .ficha .datos { position: sticky; top: calc(var(--alto-cabecera) + var(--e-4)); display: grid; gap: var(--e-3); }
  .ficha .datos h1 { font-size: var(--t-3); font-style: italic; font-weight: 400; }
  .ficha .datos .lineas { display: grid; gap: 2px; }
  .ficha .paginacion { display: flex; flex-wrap: wrap; gap: var(--e-3); padding-top: var(--e-4); font-size: var(--t-caption); }
  .ficha .paginacion a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .paginacion .off { color: var(--color-tinta-2); }
  .venta { display: grid; gap: var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--color-linea); }
  .venta .estado { font-size: 0.9375rem; }
  .venta .aviso { color: var(--color-tinta); }
  .venta form button { color: var(--color-acento); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; font-weight: 500; }
  .venta form button:hover { text-underline-offset: 0.34em; text-decoration-thickness: 1.5px; }
  /* Capa comercial (Ximo de parte de Patricio, 2026-10-16): el precio se lee de un vistazo y la acción es un enlace de texto con el mismo
     peso que «Comprar esta obra». Sin botones de color, sin cajas: tinta, tamaño y subrayado. */
  .venta .estado { font-weight: 500; }
  .venta .precio { font-size: var(--t-2); line-height: 1.3; }
  .venta .accion, .venta form button { font-size: var(--t-cuerpo); }
  .venta .accion { font-weight: 500; }
  .venta .accion:hover { text-underline-offset: 0.34em; text-decoration-thickness: 1.5px; }
  /* Bajo el pie de cada obra marcada «En venta»: su disponibilidad y precio en una segunda línea, en tinta (el pie va en gris) */
  .venta-pie { display: block; color: var(--color-tinta); }
  .detalles { padding: 0 0 var(--e-7); display: grid; gap: var(--e-4); }
  .detalles h2 { font-size: var(--t-caption); font-family: var(--f-cuerpo); font-weight: 500; color: var(--color-tinta-2); }
  .detalles .rejilla { padding-bottom: 0; }
  .obra-texto { padding: 0 0 var(--e-7); }
  @media (max-width: 900px) { .ficha { grid-template-columns: 1fr; gap: var(--e-4); } .ficha .datos { position: static; } .ficha .imagen img { max-height: 70svh; } }
  /* Lupa (Bruce, 2026-09-16): al pasar el ratón por la obra en la ficha, los detalles, la ampliación y la portada se ve el detalle
     a 2,5× en un círculo que sigue al cursor. Es una herramienta de examen, no un efecto: solo con ratón; en táctil queda la ampliación. */
  .lupa { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 1px solid var(--color-tinta); background-color: var(--color-fondo); background-repeat: no-repeat; pointer-events: none; z-index: 4; display: none; }
  .con-lupa { position: relative; }
  .con-lupa.activa .lupa { display: block; }
  .con-lupa.activa img[data-lupa] { cursor: none; }
  .ampliacion { border: 0; padding: var(--e-5) var(--e-5) var(--e-4); width: 100vw; height: 100svh; max-width: none; max-height: none; background: var(--color-fondo); color: var(--color-tinta); display: none; }
  .ampliacion[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--e-3); justify-items: center; }
  .ampliacion .marco-ampliacion { display: grid; justify-items: center; align-items: center; min-height: 0; max-width: 100%; }
  .ampliacion::backdrop { background: var(--color-fondo); }
  /* La ampliación llena la pantalla aunque el original sea pequeño (hoy muchos son de 900 px): si no, «ampliar» no se notaba. La lupa sigue capada a los píxeles reales. */
  .ampliacion img { height: calc(100svh - 120px); width: auto; max-width: 100%; object-fit: contain; cursor: zoom-in; }
  .ampliacion .cerrar { position: absolute; top: var(--e-4); right: var(--margen); padding: var(--e-2); }
  .ampliacion .meta { text-align: center; max-width: 70ch; }
  @media (max-width: 900px) { .ampliacion { padding: var(--e-6) var(--e-4) var(--e-4); } .ampliacion img { max-height: calc(100svh - 160px); } }

  /* Listas: exposiciones, publicaciones, textos */
  .lista-expos { display: grid; gap: var(--e-3); }
  .lista-expos li { display: grid; grid-template-columns: 5.5ch 1fr; gap: var(--e-3); align-items: baseline; }
  .lista-expos .anio { color: var(--color-tinta-2); font-size: var(--t-caption); font-variant-numeric: tabular-nums; }
  .lista-expos .titulo-expo { font-weight: 500; }
  .lista-textos { display: grid; gap: var(--e-5); max-width: 72ch; padding-bottom: var(--e-7); }
  .lista-textos article { display: grid; gap: var(--e-2); }
  .lista-textos h2 { font-size: var(--t-3); }
  .texto-critico { max-width: 68ch; padding-bottom: var(--e-7); }
  .texto-critico .cabecera-seccion { padding-bottom: var(--e-5); }
  .texto-critico .prosa p { font-size: 1.0625rem; }
  .texto-critico .prosa p + p { margin-top: var(--e-4); }
  .texto-critico .seccion { display: block; font-family: var(--f-display); font-size: var(--t-3); font-weight: 300; margin: var(--e-6) 0 var(--e-4); }
  .bloque.cita { border-left: 0; padding-left: 0; max-width: 40ch; }
  .bloque.cita p { font-weight: 300; font-size: var(--t-2); line-height: 1.4; }
  .bloque.cita footer { margin-top: var(--e-2); }
  .bloque.figura { max-width: none; }
  /* Bio: el retrato a toda su columna y con el mismo alto que el bloque de texto (Bruce, 2026-09-17: «aumenta el tamaño y hazlo cuadrar con el texto»);
     la foto se recorta por los lados lo que haga falta (object-fit: cover) y el pie cuelga bajo el borde inferior común */
  .bio-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-6); align-items: stretch; padding: var(--e-5) 0 var(--e-7); }
  .bio-cabecera figure { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); }
  .bio-cabecera figure picture { min-height: 0; display: block; }
  .bio-cabecera figure img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 40%; }
  .bio-cabecera figure figcaption { position: absolute; top: 100%; left: 0; margin-top: var(--e-2); }
  /* Entre 901 y 1100 px las columnas son estrechas y el recorte sería exagerado: el retrato va a su proporción natural */
  @media (max-width: 1100px) { .bio-cabecera { align-items: start; } .bio-cabecera figure img { height: auto; min-height: 0; } .bio-cabecera figure figcaption { position: static; } }
  .bio-cabecera .texto { display: grid; gap: var(--e-3); }
  .indice-pagina a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  /* Exposiciones dentro de Bio: mismo ancho de lectura que el currículum; cada grupo con su h3 y su lista */
  .bloque.expos { max-width: 80ch; }
  .bloque.expos h3 { margin-top: var(--e-2); }
  .bloque.expos .lista-expos + h3 { margin-top: var(--e-4); }
  :target { scroll-margin-top: calc(var(--alto-cabecera) + var(--e-4)); }
  @media (max-width: 900px) { .bio-cabecera { grid-template-columns: 1fr; gap: var(--e-4); } .lista-expos li { grid-template-columns: 1fr; gap: 2px; } }

  /* Formulario de contacto: líneas, no cajas */
  .formulario { display: grid; gap: var(--e-4); max-width: 56ch; padding-bottom: var(--e-7); }
  .formulario .campo { display: grid; gap: var(--e-2); }
  .formulario label { font-size: var(--t-caption); color: var(--color-tinta-2); }
  .formulario input, .formulario textarea { font-size: 1rem; color: var(--color-tinta); background: var(--color-fondo); border: 0; border-bottom: 1px solid var(--color-tinta-2); padding: var(--e-2) 0; border-radius: 0; width: 100%; }
  .formulario input:focus, .formulario textarea:focus { outline: 0; border-bottom-color: var(--color-tinta); }
  .formulario .consent { grid-template-columns: auto 1fr; align-items: start; gap: var(--e-3); }
  .formulario .consent input { width: auto; margin-top: 0.35em; }
  .formulario .consent label { font-size: var(--t-caption); color: var(--color-tinta); }
  .formulario .trampa { position: absolute; left: -9999px; }
  .formulario button[type="submit"] { font-weight: 500; text-decoration: underline; text-underline-offset: 0.18em; color: var(--color-acento); justify-self: start; }
  .formulario button[type="submit"]:hover { text-underline-offset: 0.34em; text-decoration-thickness: 1.5px; }
  .formulario .error { color: var(--color-tinta); font-size: var(--t-caption); }
  .formulario .error-campo { border-bottom-color: var(--color-tinta); }
  .respuesta { max-width: 56ch; padding-bottom: var(--e-7); }
  /* Compra sin pasarela (checkout.php, 2026-10-16): la obra a la izquierda, fija mientras se rellena; los datos a la derecha.
     La obra entera, sin recortar, como en la ficha. Mismo formulario que Contacto: líneas finas, sin cajas. */
  .compra { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-6); align-items: start; padding-bottom: var(--e-7); }
  .compra-obra { display: grid; gap: var(--e-3); justify-items: start; position: sticky; top: calc(var(--alto-cabecera) + var(--e-4)); }
  .compra-obra img { width: auto; max-width: 100%; max-height: 56svh; }
  .compra-obra h2 { font-size: var(--t-3); }
  .compra-obra .lineas { display: grid; gap: 2px; }
  .compra-obra .precio { font-size: var(--t-2); line-height: 1.3; }
  .compra-form { padding-bottom: 0; }
  .compra-form h2 { font-size: var(--t-3); }
  .compra-form .campo .meta { margin-top: calc(-1 * var(--e-1)); }
  @media (max-width: 900px) { .compra { grid-template-columns: 1fr; gap: var(--e-5); } .compra-obra { position: static; } .compra-obra img { max-height: 46svh; } }
}
@layer motion {
  /* Un gesto: la obra entra desde el blanco al cargar; el resto, subrayados y el paso entre páginas del navegador. */
  @media (prefers-reduced-motion: no-preference) {
    a, .filtros a, button, summary, .meta, .titulo-obra, .titulo-serie { transition: color 160ms ease-out; }
    .flecha { transition: color 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out, transform 120ms ease-out, opacity 160ms ease-out; }
    .icono { transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1), fill 160ms ease-out, stroke 160ms ease-out; }
    .venta form button, .venta .accion, .hoja-video .rotulo-enlace a, .formulario button[type="submit"] { transition: color 160ms ease-out, text-underline-offset 180ms ease-out, text-decoration-thickness 180ms ease-out; }
    html.js :is(.hoja, .ficha .imagen, .bio-cabecera) .obra-img { opacity: 0; filter: blur(4px); transition: opacity 600ms ease-out, filter 600ms ease-out; }
    html.js :is(.hoja, .ficha .imagen, .bio-cabecera) .obra-img.cargada { opacity: 1; filter: none; }
    .ampliacion[open] { animation: aparecer 220ms ease-out; }
    @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
    .carrusel { scroll-behavior: smooth; }
    /* El rótulo de la portada entra una sola vez al cargar: sube 12 px y aparece en 900 ms */
    html.js .hoja-video .rotulo > * { animation: subir 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms both; }
    @keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
  }
  @media (prefers-reduced-motion: reduce) { .hoja .pase > a { transition: none; } }
}