/* Notas al margen · Cía. Los Libros
   La sección funciona como el margen de una página: una línea roja al costado
   y notas escritas al margen que acompañan a las obras. */

:root {
  --celeste: #8dd7f7;
  --celeste-claro: #d6f0fc;
  --rojo: #ed1c24;
  --rojo-texto: #c3121a;
  --papel: #f7f4ee;
  --tinta: #14242d;
  --tinta-suave: #5a6870;
  --sala: #101418;
  --sala-tinta: #ece7dd;

  --curva: cubic-bezier(.22, .9, .24, 1);
  --rebote: cubic-bezier(.3, 1.4, .45, 1);
  --titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lectura: Georgia, "Times New Roman", serif;
  --ancho: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --lados: max(var(--gutter), calc((100% - var(--ancho)) / 2));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.6 var(--texto);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }

.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -100px; z-index: 20; padding: .6rem 1rem; border-radius: 6px; background: var(--rojo); color: #fff; font-weight: 600; }
.saltar:focus { top: 1rem; }

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

.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(14px, 2vw, 22px)) var(--lados);
  background: var(--celeste);
  color: var(--tinta);
}
.volver { color: var(--tinta); font: 500 1.05rem/1 var(--titulo); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.volver:hover { color: var(--rojo-texto); }
.cabecera-nombre { display: inline-flex; align-items: flex-end; gap: .6rem; color: var(--rojo); font: 700 1.6rem/.9 var(--titulo); text-transform: uppercase; text-decoration: none; }
.cabecera-nombre span { transform: skewY(-6.5deg); transform-origin: 0 100%; }
.marca { display: block; width: 60px; height: auto; overflow: visible; color: var(--rojo); }
.marca path { fill: currentColor; fill-rule: evenodd; }

/* ------------------------------------------------------------ Portada de la sección */

.portada {
  position: relative;
  padding: clamp(40px, 8vw, 96px) var(--lados) clamp(32px, 5vw, 64px);
  background: var(--celeste);
  overflow: hidden;
}
/* La trama de puntos del fondo, hecha con CSS */
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--rojo) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
  opacity: .16;
  pointer-events: none;
}
.portada > * { position: relative; z-index: 1; }

.portada h1 {
  max-width: 14ch;
  margin: 0;
  color: var(--rojo);
  font: 700 clamp(3.2rem, 11vw, 8rem)/.85 var(--titulo);
  text-transform: uppercase;
  transform: skewY(-6.5deg);
  transform-origin: 0 100%;
}
.portada-texto { max-width: 46ch; margin: clamp(24px, 4vw, 40px) 0 0; font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.portada-texto b { color: var(--rojo-texto); }

/* ------------------------------------------------------------ El margen (recurso de la sección) */

.margen {
  position: relative;
  padding-left: clamp(18px, 4vw, 56px);
  border-left: 3px solid var(--rojo);
}
.nota-margen {
  display: block;
  margin: .6rem 0;
  color: var(--rojo-texto);
  font: 400 .95rem/1.4 var(--lectura);
  font-style: italic;
}

/* ------------------------------------------------------------ Secciones */

.bloque { padding: clamp(48px, 7vw, 88px) var(--lados); }
.bloque--oscuro { background: var(--sala); color: var(--sala-tinta); }

.bloque-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1rem;
  margin: 0 0 clamp(20px, 3vw, 36px);
  font: 700 clamp(1.8rem, 4vw, 2.6rem)/1 var(--titulo);
  text-transform: uppercase;
}
.bloque-titulo small { color: var(--tinta-suave); font: 400 1rem/1.4 var(--texto); text-transform: none; }
.bloque--oscuro .bloque-titulo small { color: #9aa7ae; }

/* ------------------------------------------------------------ Salas */

.salas { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 3vw, 32px); margin: 0; padding: 0; }

.sala { display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 32px -24px rgba(0, 0, 0, .5); transition: transform .45s var(--curva), box-shadow .45s var(--curva); }
.sala:hover { transform: translateY(-6px); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 26px 40px -24px rgba(0, 0, 0, .55); }

/* Cada sala se identifica con una trama distinta, hecha solo con CSS */
.sala-trama { position: relative; aspect-ratio: 4 / 3; background: var(--fondo, var(--celeste)); }
.sala-trama::after { content: ""; position: absolute; inset: 0; }
.trama--puntos::after { background-image: radial-gradient(var(--tinta-trama) 2px, transparent 2.2px); background-size: 16px 16px; }
.trama--rayas::after { background: repeating-linear-gradient(115deg, var(--tinta-trama) 0 6px, transparent 6px 22px); }
.trama--anillos::after { background: repeating-radial-gradient(circle at 30% 60%, var(--tinta-trama) 0 2px, transparent 2px 18px); }
.trama--grilla::after { background-image: linear-gradient(var(--tinta-trama) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--tinta-trama) 1.5px, transparent 1.5px); background-size: 26px 26px; }

.sala-etiqueta {
  position: absolute;
  left: 0;
  bottom: 1rem;
  z-index: 1;
  padding: .3rem .8rem .3rem clamp(14px, 3vw, 22px);
  background: var(--rojo);
  color: #fff;
  font: 600 .8rem/1.4 var(--texto);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sala-cuerpo { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2.5vw, 26px); }
.sala h3 { margin: 0; font: 700 1.6rem/1.05 var(--titulo); text-transform: uppercase; }
.sala h3 a { color: inherit; text-decoration: none; }
.sala h3 a:hover { color: var(--rojo-texto); }
.sala-dato { margin: .35rem 0 0; color: var(--tinta-suave); font-size: .9rem; }
.sala p.sala-resumen { margin: .8rem 0 0; }
.sala-pie { margin-top: auto; padding-top: 1.2rem; }

.entrar {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border: 2px solid var(--rojo);
  border-radius: 8px;
  background: var(--rojo);
  color: #fff;
  font: 600 1.05rem/1 var(--titulo);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.entrar:hover { background: transparent; color: var(--rojo-texto); }
.entrar--espera { border-color: #c9c2b4; background: transparent; color: var(--tinta-suave); cursor: default; }

/* ------------------------------------------------------------ Convocatoria */

.convocatoria { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 4vw, 48px); align-items: start; }
.convocatoria h2 { margin: 0 0 1rem; color: var(--celeste); font: 700 clamp(1.8rem, 4vw, 2.6rem)/1 var(--titulo); text-transform: uppercase; }
.convocatoria p { max-width: 52ch; }
.convocatoria ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.convocatoria li { margin: .35rem 0; }
.escribir { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; padding: .8rem 1.3rem; border-radius: 8px; background: var(--celeste); color: var(--sala); font: 600 1.1rem/1 var(--titulo); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.escribir:hover { background: #fff; }

/* ------------------------------------------------------------ Pie */

.pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding: clamp(24px, 3vw, 36px) var(--lados) calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--celeste); font-size: .9rem; }
.pie a, .pie span { display: inline-flex; align-items: center; gap: .5rem; color: var(--tinta); text-decoration: none; }
.pie a:hover { color: var(--rojo-texto); }

/* ------------------------------------------------------------ Sala a oscuras (sala.html) */

body.sala-abierta { background: var(--sala); color: var(--sala-tinta); }
.sala-abierta .cabecera { background: transparent; color: var(--sala-tinta); border-bottom: 1px solid rgba(236, 231, 221, .15); }
.sala-abierta .volver { color: var(--sala-tinta); }
.sala-abierta .volver:hover { color: var(--celeste); }
.sala-abierta .cabecera-nombre { color: var(--celeste); }
.sala-abierta .marca { color: var(--celeste); }

.sala-encabezado { padding: clamp(28px, 5vw, 56px) var(--lados) 0; }
.sala-encabezado h1 { margin: 0; color: var(--celeste); font: 700 clamp(2.4rem, 7vw, 4.5rem)/.9 var(--titulo); text-transform: uppercase; transform: skewY(-6.5deg); transform-origin: 0 100%; }
.sala-encabezado .nota-margen { color: var(--celeste); }
.sala-encabezado .margen { border-color: var(--celeste); }
.sala-ficha { max-width: 60ch; margin: 1.5rem 0 0; color: #b9c3c9; }

.piezas { list-style: none; margin: 0; padding: clamp(32px, 5vw, 64px) var(--lados) clamp(48px, 8vw, 96px); display: grid; gap: clamp(56px, 9vw, 120px); }

.pieza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(20px, 3vw, 40px); align-items: start; scroll-margin-top: 80px; }
.pieza-marco { position: relative; aspect-ratio: 4 / 3; background: #07090b; border: 1px solid rgba(236, 231, 221, .15); overflow: hidden; }
.pieza-marco svg, .pieza-marco canvas { display: block; width: 100%; height: 100%; }
.pieza-lado { position: sticky; top: 24px; }
.pieza h2 { margin: 0; color: var(--sala-tinta); font: 700 1.8rem/1 var(--titulo); text-transform: uppercase; }
.pieza-datos { margin: .4rem 0 1rem; color: #9aa7ae; font-size: .9rem; }
.pieza .margen { border-color: var(--rojo); }
.pieza .nota-margen { color: #f2a7a4; }
.pieza-acciones { margin-top: 1.2rem; }
.pieza-boton { padding: .55rem 1rem; border: 1.5px solid rgba(236, 231, 221, .4); border-radius: 8px; background: transparent; color: var(--sala-tinta); font: 500 1rem/1 var(--titulo); letter-spacing: .05em; text-transform: uppercase; }
.pieza-boton:hover { border-color: var(--celeste); color: var(--celeste); }

.poema { display: grid; place-content: center; height: 100%; padding: clamp(20px, 4vw, 48px); font: 400 clamp(1.1rem, 2.4vw, 1.8rem)/1.5 var(--lectura); color: var(--celeste); text-align: center; }
.poema span { display: block; opacity: 0; animation: aparecer .8s var(--curva) forwards; }
.poema span:nth-child(2) { animation-delay: .35s; }
.poema span:nth-child(3) { animation-delay: .7s; }
.poema span:nth-child(4) { animation-delay: 1.05s; color: var(--rojo); }
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.aviso-muestra { margin: 0; padding: .6rem var(--lados); background: var(--rojo); color: #fff; font-size: .88rem; font-weight: 500; }

@media (max-width: 820px) {
  .pieza { grid-template-columns: 1fr; }
  .pieza-lado { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}