/* ============================================================
   Enamódate — Revista / Flipbook
   ============================================================ */

body.revista-page{background:var(--neutral-900)}

/* Cabecera sobre fondo oscuro */
body.revista-page .site-header{position:relative;background:var(--neutral-900);padding:18px 0}
body.revista-page .header-mark img,
body.revista-page .header-word img{filter:brightness(0) invert(1)}
body.revista-page .header-nav a{color:rgba(255,255,255,.82)}
body.revista-page .header-nav a:hover{color:#fff}
body.revista-page .nav-burger span{background:#fff}
body.revista-page .header-nav.open{background:var(--neutral-800)}
body.revista-page .rail{display:none}

/* ---------- Encabezado de la revista ---------- */
.revista-intro{background:var(--neutral-900);color:#fff;text-align:center;padding:6px 20px 26px}
.revista-intro .ribbon{background:var(--enamo-crimson-bright)}
.revista-intro .ribbon::after{border-top-color:var(--enamo-crimson-deep);border-left-color:var(--enamo-crimson-deep)}
.revista-intro h1{
  font:400 clamp(22px,3.4vw,34px)/1.2 var(--font-display);
  letter-spacing:.14em;text-transform:uppercase;margin:16px 0 8px;
}
.revista-intro p{
  font:400 13.5px/1.7 var(--font-ui);color:rgba(255,255,255,.62);
  max-width:620px;margin:0 auto;
}

/* ---------- Lector ---------- */
.fb{
  --fb-pw:420px;         /* ancho de página, lo calcula el JS */
  --fb-ph:594px;         /* alto de página */
  --fb-dur:950ms;
  position:relative;
  background:var(--neutral-900);
  padding:10px 0 0;
  user-select:none;
  touch-action:pan-y;
}
.fb.is-full{padding-top:0}

.fb-stage{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(380px,64vh,760px);
  padding:0 60px;
  perspective:4200px;
  perspective-origin:50% 46%;
  overflow:hidden;
}
.fb.is-full .fb-stage{min-height:calc(100vh - 108px)}

.fb-zoomer{
  /* La perspectiva vive aquí, en el padre directo del libro: así alcanza
     a las hojas a través del preserve-3d de .fb-book. */
  perspective:4200px;
  perspective-origin:50% 46%;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  transform-origin:center center;
  will-change:transform;
}
.fb.is-zoom .fb-zoomer{cursor:grab}
.fb.is-zoom.is-drag .fb-zoomer{cursor:grabbing;transition:none}

.fb-book{
  position:relative;
  width:calc(var(--fb-pw) * 2);
  height:var(--fb-ph);
  transform-style:preserve-3d;
  transition:transform var(--fb-dur) cubic-bezier(.3,.06,.24,1);
}
/* La portada y la contraportada se ven solas: el libro se descentra
   para que la hoja visible quede en el medio del escenario. */
.fb-book.at-start{transform:translateX(calc(var(--fb-pw) / -2))}
.fb-book.at-end{transform:translateX(calc(var(--fb-pw) / 2))}

/* ---------- Canto del bloque de hojas ----------
   El grosor del taco de páginas que asoma por los lados. Su ancho lo fija el
   JS según cuántas hojas quedan a cada lado: al principio todo el grosor está
   a la derecha y al final pasa a la izquierda, como en un libro de verdad. */
.fb-depth{
  position:absolute;top:1.6%;bottom:1.6%;
  width:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.40),rgba(0,0,0,0) 10%,rgba(0,0,0,0) 90%,rgba(0,0,0,.40)),
    repeating-linear-gradient(to right,#f7f7f5 0 1px,#c9c9c3 1px 2px);
  transition:width .35s cubic-bezier(.3,.06,.24,1);
}
.fb-depth-right{
  left:100%;
  border-radius:0 3px 3px 0;
  box-shadow:inset -2px 0 4px rgba(0,0,0,.30);
}
.fb-depth-left{
  right:100%;
  border-radius:3px 0 0 3px;
  box-shadow:inset 2px 0 4px rgba(0,0,0,.30);
}

/* ---------- Sombra que proyecta la hoja al pasar ----------
   La hoja levantada tapa la luz y oscurece la página de debajo. La sombra
   cruza de un lado al otro según la hoja pasa por encima: el JS mueve
   opacidad y anchura, ambas propiedades baratas de animar. */
.fb-cast{
  position:absolute;top:0;bottom:0;width:50%;
  opacity:0;pointer-events:none;
  transform:translateZ(.3px) scaleX(0);
}
.fb-cast-r{
  left:50%;transform-origin:left center;
  background:linear-gradient(to right,rgba(0,0,0,.55),rgba(0,0,0,.12) 55%,rgba(0,0,0,0));
}
.fb-cast-l{
  right:50%;transform-origin:right center;
  background:linear-gradient(to left,rgba(0,0,0,.55),rgba(0,0,0,.12) 55%,rgba(0,0,0,0));
}
/* En móvil solo hay una página: la sombra la barre entera desde el lomo. */
.fb.mode-single .fb-cast-r{left:0;width:100%}
.fb.mode-single .fb-cast-l{display:none}

/* Sombra del libro cerrado/abierto */
.fb-book::before{
  content:"";position:absolute;left:4%;right:4%;bottom:-18px;height:24px;
  background:rgba(0,0,0,.55);
  filter:blur(14px);
  z-index:0;
}

/* ---------- Hojas ---------- */
.fb-sheet{
  position:absolute;top:0;left:50%;
  width:var(--fb-pw);height:var(--fb-ph);
  transform-style:preserve-3d;
  transform-origin:left center;
}
.fb-sheet.flipped{transform:rotateY(-180deg)}

/* El giro se hace con animación (no con transición) para poder sincronizar
   el sombreado de las dos caras con el movimiento de la hoja. */
.fb-sheet.turning-fwd,
.fb-sheet.turning-bwd{
  animation:fb-turn var(--fb-dur) both;
  will-change:transform;
}
.fb-sheet.turning-bwd{animation-direction:reverse}

/* La hoja no gira como una tabla rígida: arranca despacio, toma vuelo y se
   posa. El translateZ la separa un poco del lomo, como el papel al arquearse. */
@keyframes fb-turn{
  0%{
    transform:translateZ(0) rotateY(0deg);
    box-shadow:0 0 0 rgba(0,0,0,0);
    animation-timing-function:cubic-bezier(.45,.05,.75,.35);
  }
  50%{
    transform:translateZ(30px) rotateY(-90deg);
    box-shadow:0 16px 42px rgba(0,0,0,.45);
    animation-timing-function:cubic-bezier(.25,.7,.35,1);
  }
  100%{
    transform:translateZ(0) rotateY(-180deg);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
}

/* ---------- Hoja que se dobla (curvatura real) ----------
   Durante el giro la hoja se sustituye por una tira de franjas verticales.
   Cada franja se coloca sobre un arco, así el papel se arquea en vez de
   girar como una tabla. El JS actualiza su posición en cada fotograma. */
.fb-curl{
  position:absolute;top:0;left:50%;
  width:var(--fb-pw);height:var(--fb-ph);
  transform-style:preserve-3d;
  /* Un pelo hacia el espectador para que nunca compita con la hoja plana
     que tiene debajo al arrancar y al terminar el giro. */
  transform:translateZ(.6px);
  pointer-events:none;
}
.fb.mode-single .fb-curl{left:0}
.fb-strip{
  position:absolute;top:0;left:0;height:100%;
  transform-style:preserve-3d;
  transform-origin:left center;
}
.fb-sf,.fb-sb{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background-repeat:no-repeat;
  background-color:var(--neutral-100);
}
.fb-sb{transform:rotateY(180deg)}
.fb-ss{position:absolute;inset:0;background:#000;opacity:0}
/* Sombra de lomo de la franja: continúa la que lleva la hoja en reposo */
.fb-sg{position:absolute;inset:0;background:#000;opacity:0}

/* Sombra y brillo que recorren la hoja mientras gira */
.fb-shade,.fb-gloss{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;
}
.fb-face.front .fb-shade{background:linear-gradient(to right,rgba(0,0,0,.72),rgba(0,0,0,.22) 55%,rgba(0,0,0,.42))}
.fb-face.back  .fb-shade{background:linear-gradient(to left, rgba(0,0,0,.72),rgba(0,0,0,.22) 55%,rgba(0,0,0,.42))}
.fb-gloss{background:linear-gradient(102deg,rgba(255,255,255,0) 32%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 68%)}

.fb-sheet.turning-fwd .fb-face.front .fb-shade,
.fb-sheet.turning-bwd .fb-face.front .fb-shade{animation:fb-shade-front var(--fb-dur) both}
.fb-sheet.turning-fwd .fb-face.back  .fb-shade,
.fb-sheet.turning-bwd .fb-face.back  .fb-shade{animation:fb-shade-back var(--fb-dur) both}
.fb-sheet.turning-fwd .fb-face.front .fb-gloss,
.fb-sheet.turning-bwd .fb-face.front .fb-gloss{animation:fb-gloss var(--fb-dur) both}
.fb-sheet.turning-bwd .fb-shade,
.fb-sheet.turning-bwd .fb-gloss{animation-direction:reverse}

@keyframes fb-shade-front{
  0%{opacity:0}
  50%{opacity:.40}
  100%{opacity:.55}
}
@keyframes fb-shade-back{
  0%{opacity:.58}
  50%{opacity:.44}
  100%{opacity:0}
}
@keyframes fb-gloss{
  0%{opacity:0;transform:translateX(-38%)}
  38%{opacity:.30}
  100%{opacity:0;transform:translateX(42%)}
}

/* Saltos en seco (barra de páginas / miniaturas) */
.fb.no-anim .fb-sheet,
.fb.no-anim .fb-book{transition:none !important;animation:none !important}

.fb-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:var(--neutral-100);
  overflow:hidden;
}
.fb-face.back{transform:rotateY(180deg)}
.fb-face img{
  width:100%;height:100%;object-fit:cover;display:block;
  background:var(--neutral-100);
}

/* Profundidad del lomo: una sombra suave hacia el centro del libro */
.fb-face::after{
  content:"";position:absolute;top:0;bottom:0;width:38px;pointer-events:none;
}
.fb-face.front::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.20),rgba(0,0,0,0))}
.fb-face.back::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.20),rgba(0,0,0,0))}


/* ---------- Modo una sola página (móvil) ---------- */
.fb.mode-single .fb-book{width:var(--fb-pw)}
.fb.mode-single .fb-book.at-start,
.fb.mode-single .fb-book.at-end{transform:none}
.fb.mode-single .fb-sheet{left:0}
.fb.mode-single .fb-face.back{background:var(--neutral-200)}
.fb.mode-single .fb-face::after{display:none}
/* La hoja ya girada desaparece justo al terminar el giro */
.fb.mode-single .fb-sheet.flipped{opacity:0;transition:opacity 0s var(--fb-dur)}
.fb.mode-single.no-anim .fb-sheet.flipped{transition:none}

/* ---------- Flechas ---------- */
.fb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);
  border:0;border-radius:0;
  color:#fff;
  transition:background .22s,opacity .22s;
}
.fb-nav:hover{background:var(--enamo-crimson)}
.fb-nav[disabled]{opacity:.18;pointer-events:none}
.fb-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75}
.fb-prev{left:8px}
.fb-next{right:8px}

/* ---------- Barra inferior ---------- */
.fb-bar{
  position:relative;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:16px 20px 20px;
  background:var(--neutral-900);
}
.fb-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.10);
  border:0;border-radius:0;color:#fff;
  font:600 11px/1 var(--font-ui);letter-spacing:var(--ls-label);text-transform:uppercase;
  padding:11px 14px;
  transition:background .22s,color .22s;
}
.fb-btn:hover{background:rgba(255,255,255,.2)}
.fb-btn.on{background:var(--enamo-crimson)}
.fb-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75}
/* Botón destacado de la barra: lleva a las prendas de la web */
.fb-btn-cta{background:var(--enamo-crimson)}
.fb-btn-cta:hover{background:var(--enamo-crimson-bright)}

.fb-count{
  font:600 11px/1 var(--font-ui);letter-spacing:var(--ls-label);
  color:rgba(255,255,255,.72);
  min-width:74px;text-align:center;
}
.fb-count b{color:#fff;font-weight:700}

.fb-range{
  -webkit-appearance:none;appearance:none;
  width:min(280px,40vw);height:2px;
  background:rgba(255,255,255,.22);
  outline:0;margin:0 4px;
}
.fb-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:13px;height:13px;background:var(--enamo-crimson);border:0;border-radius:0;cursor:pointer;
}
.fb-range::-moz-range-thumb{
  width:13px;height:13px;background:var(--enamo-crimson);border:0;border-radius:0;cursor:pointer;
}

/* ---------- Miniaturas ---------- */
.fb-thumbs{
  position:relative;z-index:20;
  display:none;
  background:var(--neutral-800);
  padding:18px 20px 22px;
}
.fb-thumbs.open{display:block}
.fb-thumbs-grid{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:thin;
}
.fb-thumb{
  flex:0 0 auto;background:none;border:0;padding:0;
  width:74px;
  opacity:.55;transition:opacity .22s,box-shadow .22s;
}
.fb-thumb:hover{opacity:1}
.fb-thumb.on{opacity:1;box-shadow:0 0 0 2px var(--enamo-crimson)}
.fb-thumb img{width:100%;height:auto;display:block}
.fb-thumb span{
  display:block;text-align:center;color:rgba(255,255,255,.65);
  font:600 9.5px/1.8 var(--font-ui);letter-spacing:.1em;
}

/* ---------- Pantalla completa propia ----------
   Respaldo para cuando el navegador no concede la suya (iPhone, páginas
   embebidas): el lector ocupa toda la ventana sin salir de la página. */
.fb.is-full-css{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--neutral-900);
  padding:0;
}
.fb.is-full-css .fb-stage{min-height:0;flex:0 0 auto}
body.fb-sin-scroll{overflow:hidden}

/* ---------- Pantalla completa ---------- */
.fb:fullscreen{background:var(--neutral-900);padding:0;display:flex;flex-direction:column;justify-content:center}
.fb:fullscreen .fb-stage{flex:1;min-height:0}
.fb:-webkit-full-screen{background:var(--neutral-900)}

/* ---------- Pie bajo la revista ---------- */
.revista-pie{background:var(--neutral-900);color:rgba(255,255,255,.6);text-align:center;padding:0 20px 70px}
.revista-pie p{font:400 12.5px/1.8 var(--font-ui);max-width:640px;margin:0 auto}
.revista-pie a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}

@media (max-width:900px){
  /* Con el pliego doble el alto lo manda el ancho de pantalla: si se deja el
     mínimo de escritorio queda un hueco enorme bajo la revista. */
  .fb-stage{padding:0 44px;min-height:0}
  .fb-nav{width:38px;height:38px}
  .fb-bar{gap:8px;padding:14px 12px 18px}
  .fb-btn span{display:none}
  .fb-btn{padding:11px}
  .fb-btn-cta span{display:inline}
  .revista-intro{padding-bottom:18px}
}
@media (max-width:560px){
  /* Con el pliego doble el ancho es oro: se recorta el margen lateral y las
     flechas pasan a montarse sobre las páginas. */
  .fb-stage{padding:0 4px}
  .fb-prev{left:0}
  .fb-next{right:0}
  .fb-nav{width:32px;height:32px;background:rgba(18,18,18,.55)}
  .fb-range{width:44vw}
}

/* Teléfono en horizontal: es donde mejor luce el pliego, así que el
   encabezado se encoge para dejarle a la revista toda la altura. */
@media (orientation:landscape) and (max-height:540px){
  body.revista-page .site-header{padding:6px 0}
  .header-word img{height:18px}
  .header-mark img{width:26px}
  /* Toda la altura para la revista: el encabezado y el pie sobran aquí. */
  .revista-intro,
  .revista-pie{display:none}
  .fb{padding-top:4px}
}


@media (prefers-reduced-motion:reduce){
  .fb-sheet,.fb-book,.fb-zoomer{transition-duration:1ms !important}
}