/* ---------------------------------------------------------------------------
   ATRIL — el libro cerrado antes de abrirse.
   Fondo de galería: blanco de papel, una sola sombra, nada que compita.
   --------------------------------------------------------------------------- */

@font-face{font-family:'GaramondFlip';src:url(serif.ttf) format('truetype');font-weight:100 900;font-display:swap;}

:root{
  --tela:#221F1A;        /* la pasta */
  --tela2:#15130F;       /* su sombra interior */
  --foil:#C6A96B;        /* el dorado grabado */
  --galeria:#FBFAF8;     /* el blanco de la sala */
  --galeria2:#EFEDE7;
}

.atril{
  position:fixed;inset:0;z-index:50;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  gap:clamp(2rem,6vw,7rem);padding:clamp(1.5rem,5vw,5rem);
  background:
    radial-gradient(120% 90% at 50% 8%,#FFFFFF 0%,var(--galeria) 42%,var(--galeria2) 100%);
  transition:opacity .85s cubic-bezier(.4,0,.2,1),visibility .85s;
}
.atril[data-abierto="1"]{opacity:0;visibility:hidden;pointer-events:none;}

/* ---- el volumen ---- */
.vitrina{
  display:grid;place-items:center;perspective:2100px;perspective-origin:58% 46%;
  min-height:0;height:100%;
}
.volumen{
  position:relative;transform-style:preserve-3d;cursor:pointer;border:0;padding:0;background:none;
  transform:rotateX(3.5deg) rotateY(-27deg) translateZ(0);
  transition:transform 1.05s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.volumen:hover,.volumen:focus-visible{transform:rotateX(2.5deg) rotateY(-19deg) translateY(-8px);}
.atril[data-saliendo="1"] .volumen{transform:rotateX(0) rotateY(0) scale(1.06);}

/* la tapa */
.tapa{
  position:relative;overflow:hidden;
  background:
    /* trama de lino: hilos de 3 px, lo bastante anchos para no hacer moiré */
    repeating-linear-gradient(90deg,rgba(255,255,255,.020) 0 1px,rgba(0,0,0,.020) 1.5px 3px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,rgba(0,0,0,.018) 1.5px 3px),
    /* la luz que entra por la izquierda */
    linear-gradient(105deg,#312C25 0%,var(--tela) 26%,#1B1814 78%,var(--tela2) 100%);
  border-radius:1px 3px 3px 1px;
  box-shadow:
    inset 0 0 0 1px rgba(198,169,107,.10),
    inset -1px 0 0 rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.05);
}
/* el filete grabado */
.tapa::before{
  content:'';position:absolute;inset:5.6%;border:1px solid rgba(198,169,107,.34);
  border-radius:1px;pointer-events:none;
}
/* el brillo que corre al inclinar */
.tapa::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(107deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 34%,
             rgba(255,255,255,0) 72%,rgba(255,255,255,.05) 100%);
}

.tapa .letras{
  position:absolute;inset:5.6%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:8% 9%;
}
.tapa .t{
  font-family:'GaramondFlip',Georgia,serif;font-weight:400;
  font-size:clamp(1rem,2.25vw,1.78rem);line-height:1.22;letter-spacing:.05em;
  text-transform:uppercase;color:var(--foil);
  text-shadow:0 1px 0 rgba(0,0,0,.75),0 -1px 0 rgba(255,255,255,.10);
}
.tapa .regla{width:34%;height:1px;margin:1.15em 0 1.05em;
  background:linear-gradient(90deg,transparent,rgba(198,169,107,.62),transparent);}
.tapa .s{
  font-family:'JostFlip',sans-serif;font-weight:300;
  font-size:clamp(.44rem,.85vw,.66rem);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(198,169,107,.62);line-height:1.9;text-wrap:balance;max-width:88%;
}
/* En pantalla angosta el grabado necesita margen o parte mal las palabras. */
@media (max-width:620px){
  .tapa .letras{padding:7% 6%;}
  .tapa .s{letter-spacing:.2em;line-height:1.75;}
  .tapa .pie{letter-spacing:.16em;padding:0 6%;}
}
.tapa .pie{
  position:absolute;left:0;right:0;bottom:8%;
  font-family:'JostFlip',sans-serif;font-weight:300;
  font-size:clamp(.4rem,.72vw,.56rem);letter-spacing:.26em;text-transform:uppercase;
  color:rgba(198,169,107,.40);
}

/* el lomo, girado en el espacio */
.lomo{
  position:absolute;top:0;left:0;height:100%;transform-origin:left center;
  background:linear-gradient(90deg,#0F0D0B 0%,#241F1A 42%,#171410 100%);
  box-shadow:inset -2px 0 6px rgba(0,0,0,.6);
  display:grid;place-items:center;overflow:hidden;
}
.lomo span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'GaramondFlip',Georgia,serif;font-size:.52rem;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(198,169,107,.5);white-space:nowrap;
}
/* los nervios del cosido */
.lomo::before,.lomo::after{
  content:'';position:absolute;left:0;right:0;height:1px;background:rgba(198,169,107,.16);
}
.lomo::before{top:16%;} .lomo::after{bottom:16%;}

/* el bloque de hojas visto de canto */
.canto{
  position:absolute;top:1.4%;height:97.2%;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.055) 0 1px,rgba(0,0,0,0) 1px 3px),
    linear-gradient(90deg,#CFC8B9 0%,#F6F3EC 34%,#E4DED1 72%,#B9B2A2 100%);
  box-shadow:inset 0 0 8px rgba(0,0,0,.14);
}

/* la sombra en el suelo */
/* La sombra no se rota: se dibuja plana bajo el volumen, que es como se ve
   una sombra proyectada en una foto de estudio. */
.sombra{
  position:absolute;left:-10%;right:-4%;bottom:-11%;height:13%;
  background:
    radial-gradient(ellipse 42% 42% at 40% 42%,rgba(28,24,19,.34) 0%,transparent 70%),
    radial-gradient(ellipse 56% 52% at 48% 52%,rgba(28,24,19,.20) 0%,transparent 76%);
  filter:blur(16px);pointer-events:none;transform:translateZ(-2px);
}
/* el canto derecho de la tapa: le da peso al volumen */
.tapa{box-shadow:
  inset 0 0 0 1px rgba(198,169,107,.10),
  inset -2px 0 3px rgba(0,0,0,.45),
  inset 2px 0 0 rgba(255,255,255,.045),
  0 1px 0 rgba(255,255,255,.05);}

/* ---- la ficha, al lado ---- */
.ficha{max-width:29rem;}
.ficha .kicker{
  font-family:'JostFlip',sans-serif;font-size:.6rem;font-weight:300;
  letter-spacing:.36em;text-transform:uppercase;color:#9A9184;
}
.ficha h1{
  margin:1.15rem 0 0;font-family:'GaramondFlip',Georgia,serif;font-weight:400;
  font-size:clamp(1.85rem,3.7vw,3.15rem);line-height:1.12;letter-spacing:-.005em;color:#1E1C18;
}
.ficha .sub{
  margin:1.1rem 0 0;font-family:'GaramondFlip',Georgia,serif;font-size:clamp(.95rem,1.35vw,1.13rem);
  line-height:1.62;color:#5C564B;
}
.ficha .datos{
  display:flex;flex-wrap:wrap;gap:1.7rem;margin:2rem 0 0;padding-top:1.4rem;
  border-top:1px solid #E2DED4;
}
.ficha .datos div{display:flex;flex-direction:column;gap:.34rem;}
.ficha .datos dt{font-family:'JostFlip',sans-serif;font-size:.56rem;letter-spacing:.26em;
  text-transform:uppercase;color:#A29A8C;}
.ficha .datos dd{margin:0;font-family:'GaramondFlip',Georgia,serif;font-size:1.02rem;color:#2A2721;}

.abrir{
  display:inline-flex;align-items:center;gap:.85rem;margin-top:2.3rem;
  padding:.95rem 1.9rem;border:1px solid #1E1C18;border-radius:999px;
  font-family:'JostFlip',sans-serif;font-size:.68rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:#1E1C18;background:transparent;
  transition:background .32s ease,color .32s ease,transform .32s ease;
}
.abrir:hover{background:#1E1C18;color:var(--galeria);transform:translateY(-1px);}
.abrir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .32s ease;}
.abrir:hover svg{transform:translateX(3px);}

.atril .nota{
  margin-top:1.5rem;font-family:'JostFlip',sans-serif;font-size:.6rem;
  letter-spacing:.13em;color:#A9A093;
}

/* volver al atril desde el libro */
#b-atril{margin-right:.1rem;}

@media (max-width:1000px){
  .atril{grid-template-columns:1fr;grid-template-rows:1.05fr auto;
         gap:clamp(1.2rem,4vw,2.4rem);padding:clamp(1.2rem,4vw,2.4rem);
         align-content:center;overflow-y:auto;}
  .vitrina{perspective:1500px;}
  .ficha{max-width:none;text-align:center;}
  .ficha .datos{justify-content:center;}
  .volumen{transform:rotateX(2deg) rotateY(-18deg);}
}
@media (max-width:620px){
  .ficha .datos{gap:1.1rem;}
  .abrir{margin-top:1.5rem;padding:.82rem 1.5rem;}
}
@media (prefers-reduced-motion:reduce){
  .volumen,.atril{transition-duration:.01ms!important;}
}

/* con atril, el telón es la misma sala */
body:has(.atril) .telon{background:var(--galeria);}
body:has(.atril) .telon .tt{color:#1E1C18;}
body:has(.atril) .telon .ss{color:#8C8478;}
body:has(.atril) .telon .barrita i{background:var(--foil);}

/* Con atril, la sala de lectura es el mismo blanco de la portada: pasar de una
   a otra no debe sentirse como cambiar de habitación. Un solo blanco. */
body:has(.atril) [data-tema="papel"],
html[data-tema="papel"]:has(.atril){
  --fondo:var(--galeria); --fondo2:#FFFFFF;
  --tinta:#1E1C18; --tinta-baja:#8C8478;
  --acento:#9A7A44;
  --panel:rgba(255,255,255,.88); --borde:rgba(30,28,24,.12);
}