/* Cía. Los Libros · Home
   El logo son tres libros apilados (CÍA. / LOS / LIBROS): cada libro es una puerta. */

:root {
  --escenario: #171a1c;
  --tinta: #f2efe9;
  --tinta-suave: #a3abb0;
  --papel: #f4f1ea;

  /* Pares de color de las variantes del logo */
  --celeste: #8dd7f7;
  --rojo: #ed1c24;
  --rojo-texto: #d0121a;   /* rojo apenas más oscuro para textos: mejor contraste */
  --bordo: #75344c;
  --amarillo: #fff100;
  --gris: #42515a;
  --gris-claro: #dfe4e7;

  --curva: cubic-bezier(.22, .9, .24, 1);
  --rebote: cubic-bezier(.3, 1.4, .45, 1);
  --inclinacion: -13deg;   /* la misma pendiente de las letras del logo */

  --fuente-titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --fuente: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) clamp(16px, 4vw, 48px) env(safe-area-inset-bottom, 0px);
  background: var(--escenario);
  color: var(--tinta);
  font: 400 1rem/1.5 var(--fuente);
  -webkit-font-smoothing: antialiased;
}

.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

svg path { fill: currentColor; fill-rule: evenodd; }

/* ------------------------------------------------------------ Barra */

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-block: clamp(14px, 2.4vw, 28px);
}

.barra-logo { display: block; width: clamp(38px, 4vw, 50px); color: var(--tinta); }
.barra-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.barra-logo .tier { transition: transform .4s var(--curva); }
.barra-logo:hover [data-tier="t1"] { transform: translateX(-4px); }
.barra-logo:hover [data-tier="t3"] { transform: translateX(4px); }

.barra-nav { display: flex; flex-wrap: wrap; gap: .25rem clamp(.9rem, 2.2vw, 2rem); }

.barra-nav button {
  position: relative;
  padding: .55rem 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font: 500 1.15rem/1 var(--fuente-titulo);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.barra-nav button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .25rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--curva);
}
.barra-nav button:hover::after,
.barra-nav button:focus-visible::after { transform: scaleX(1); }
.barra-nav button:focus-visible { outline: none; }

/* ------------------------------------------------------------ Puertas */

main {
  flex: 1;
  display: grid;
  place-items: center;
  padding-block: clamp(8px, 2vw, 24px);
}

.puertas {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 1240px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
}

.puertas li { display: flex; }

.puerta {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  aspect-ratio: 1 / 1.06;
  padding: clamp(20px, 2.6vw, 36px);
  border-radius: 6px;
  color: var(--txt);
  text-decoration: none;
  transition: transform .5s var(--curva);
}
.puerta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--fondo);
  transition: box-shadow .5s var(--curva);
}
.puerta:focus-visible { outline: 3px solid var(--tinta); outline-offset: 5px; }

.puerta--notas     { --fondo: var(--celeste); --marca: var(--rojo);       --titulo: var(--rojo-texto); --txt: #14242d; }
.puerta--booktique { --fondo: var(--bordo);   --marca: var(--amarillo);   --titulo: var(--amarillo);   --txt: #fff6c7; }
.puerta--editorial { --fondo: var(--gris);    --marca: var(--gris-claro); --titulo: var(--gris-claro); --txt: var(--gris-claro); }

.puerta-marca {
  display: block;
  width: calc(var(--w) / 150 * 70%);
  height: auto;
  overflow: visible;
  color: var(--marca);
  transform-origin: 0 0;
}
.puerta-marca .l { transform-box: fill-box; transform-origin: 50% 100%; }

.puerta-texto { display: flex; flex-direction: column; gap: .6rem; max-width: 34ch; }

.puerta-titulo {
  color: var(--titulo);
  font: 700 clamp(1.9rem, 3.3vw, 2.9rem)/.95 var(--fuente-titulo);
  letter-spacing: .01em;
  text-transform: uppercase;
  transform: skewY(calc(var(--inclinacion) / 2));
  transform-origin: 0 100%;
}

.puerta-bajada { font-size: .98rem; line-height: 1.45; }

.puerta-flecha {
  position: absolute;
  top: clamp(16px, 2.2vw, 30px);
  right: clamp(18px, 2.4vw, 32px);
  font: 500 1.8rem/1 var(--fuente-titulo);
  transition: transform .45s var(--curva);
}

@media (hover: hover) {
  .puerta:hover { transform: translateY(-6px); }
  .puerta:hover::before { box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .75); }
  .puerta:hover .puerta-flecha { transform: translateX(6px); }
  /* Las letras se paran sobre el libro, una tras otra */
  .puerta:hover .l { animation: salto .6s var(--curva) calc(var(--i) * 65ms) both; }
}

@keyframes salto {
  0%, 100% { transform: none; }
  35% { transform: translateY(-24%) rotate(-5deg); }
  65% { transform: translateY(4%); }
}

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

.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-block: clamp(16px, 2.4vw, 28px);
  color: var(--tinta-suave);
  font-size: .9rem;
}
.pie a, .pie span { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.pie a:hover, .pie a:focus-visible { color: var(--tinta); }

/* ------------------------------------------------------------ Entrada animada */

.intro { display: none; }

.intro-activa body { overflow: hidden; }

.intro-activa .intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--escenario);
  cursor: pointer;
}

.intro-logo {
  width: min(58vw, calc(56vh * 150 / 188), 380px);
  height: auto;
  overflow: visible;
  color: var(--tinta);
}

/* Los libros caen y se apilan de abajo hacia arriba */
.intro-logo .tier {
  transform-box: fill-box;
  transform-origin: 0 100%;
  animation: apilar .75s var(--rebote) var(--base) both;
}
.intro-logo [data-tier="t3"] { --base: .15s; }
.intro-logo [data-tier="t2"] { --base: .45s; }
.intro-logo [data-tier="t1"] { --base: .75s; }

/* Y las letras se levantan como en un libro desplegable */
.intro-logo .l {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: desplegar .5s var(--rebote) calc(var(--base) + .45s + var(--i) * 60ms) both;
}

.intro.fin .tier, .intro.fin .l { animation: none; }

@keyframes apilar {
  from { transform: translateY(-140%) rotate(-9deg); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes desplegar {
  from { transform: scaleY(0); }
  to   { transform: none; }
}

.intro-saltar {
  position: absolute;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  text-align: center;
  color: var(--tinta-suave);
  font: 500 .85rem/1 var(--fuente-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: aparecer .6s ease 1.2s both;
}

/* Mientras dura la entrada, el resto espera */
.intro-activa .barra,
.intro-activa .pie,
.intro-activa .puerta-texto,
.intro-activa .puerta-flecha,
.intro-activa .puerta-marca { opacity: 0; }
.intro-activa .puerta::before { clip-path: inset(50% round 6px); }

/* Salida: cada libro vuela a su puerta (lo mueve home.js) y las puertas se abren */
.intro-vuelo .puerta::before {
  animation: abrir .85s var(--curva) calc(.3s + var(--n) * 90ms) both;
}
.intro-vuelo .puerta-texto,
.intro-vuelo .puerta-flecha {
  animation: aparecer .6s var(--curva) calc(.8s + var(--n) * 90ms) both;
}
.intro-vuelo .barra,
.intro-vuelo .pie { animation: aparecer .7s var(--curva) 1.05s both; }

@keyframes abrir {
  from { clip-path: inset(50% round 6px); }
  to   { clip-path: inset(0 round 6px); }
}
@keyframes aparecer {
  from { opacity: 0; transform: translateY(10px); }
}

/* Telón: al entrar a una sección, su color cubre la pantalla */
.telon {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
}
.telon.cerrando {
  clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%));
  transition: clip-path .55s cubic-bezier(.7, 0, .3, 1);
}

/* ------------------------------------------------------------ Paneles */

.hoja {
  width: min(720px, calc(100% - 32px));
  max-height: min(86vh, 900px);
  margin: auto;
  padding: clamp(24px, 4.5vw, 52px);
  border: 0;
  border-radius: 8px;
  background: var(--papel);
  color: #1d2124;
  overflow: auto;
  overscroll-behavior: contain;
}
.hoja::backdrop { background: rgba(10, 12, 13, .74); backdrop-filter: blur(3px); }
.hoja[open] { animation: hoja-entra .45s var(--curva); }

@keyframes hoja-entra { from { opacity: 0; transform: translateY(28px); } }

.hoja-cerrar {
  position: sticky;
  top: 0;
  float: right;
  width: 44px;
  height: 44px;
  margin: -12px -12px 0 12px;
  border: 0;
  border-radius: 50%;
  background: var(--papel);
  color: #1d2124;
  font: 400 2rem/1 var(--fuente);
  cursor: pointer;
}
.hoja-cerrar:hover, .hoja-cerrar:focus-visible { background: #e4dfd4; }

.hoja h2 {
  margin: .5rem 0 1.25rem;
  color: var(--bordo);
  font: 700 clamp(2.3rem, 6vw, 3.6rem)/.95 var(--fuente-titulo);
  text-transform: uppercase;
  transform: skewY(calc(var(--inclinacion) / 2));
  transform-origin: 0 100%;
}
.hoja h3 {
  margin: 2rem 0 .4rem;
  color: var(--gris);
  font: 700 1.35rem/1.15 var(--fuente-titulo);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hoja p { margin: .65rem 0; max-width: 62ch; }
.hoja-nota { color: #6b7277; font-size: .88rem; font-style: italic; }

.no-es { list-style: none; margin: 1rem 0 0; padding: 0; }
.no-es li { margin: .7rem 0; padding-left: 1rem; border-left: 4px solid var(--rojo); }
.no-es b { color: var(--rojo-texto); font-family: var(--fuente-titulo); font-size: 1.15em; letter-spacing: .03em; }

.hoja .cierre {
  margin-top: 2.25rem;
  color: var(--bordo);
  font: 700 1.7rem/1.1 var(--fuente-titulo);
  text-transform: uppercase;
}

/* ------------------------------------------------------------ Pantallas angostas */

@media (max-width: 820px) {
  .puertas { grid-template-columns: 1fr; }
  .puerta { aspect-ratio: auto; min-height: 0; gap: 1.25rem; }
  .puerta-marca { width: calc(var(--w) / 150 * 58%); }
}

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