/* =========================================================
   Recomendados · variante «folleto» (?r=folleto)
   Un folleto acordeón (leporello) de papel crema con las seis casas, de pie
   sobre la mesa de noche. recs-folleto.js pone la geometría (--fol-w,
   --fol-h y las transformaciones); aquí van el papel, la tipografía y la luz.
   Todo va bajo html[data-recs="folleto"]: las otras variantes no se ven afectadas.
   ========================================================= */
html[data-recs="folleto"] .fol {
  --fol-m: calc(var(--fol-w, 236px) * .068); /* margen del papel alrededor de la foto */
  position: relative;
}

/* La lámpara: un charco de luz cálida sobre la mesa, centrado en el pie del folleto.
   Solo de noche: se enciende y se apaga con el modo de la página (el JS gradúa .fol__glow) */
html[data-recs="folleto"] .fol__glow {
  position: absolute; left: 50%; top: calc(var(--fol-h, 400px) * .9);
  width: min(112%, 100vw); height: calc(var(--fol-h, 400px) * 1.7);
  translate: -50% -50%;
  pointer-events: none;
}
html[data-recs="folleto"] .fol__glow::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(closest-side, rgba(245, 244, 235, .1), rgba(245, 244, 235, .045) 45%, rgba(245, 244, 235, .012) 75%, rgba(245, 244, 235, 0));
  opacity: 0;
}
html[data-recs="folleto"][data-mode="dark"] .fol__glow::before { opacity: 1; }
html[data-recs="folleto"] .recs .more { margin-top: clamp(28px, 3vw, 44px); }

html[data-recs="folleto"] .fol__scroller { position: relative; }
html[data-recs="folleto"] .fol__track { position: relative; }

/* Sombra de contacto: el JS la coloca y la escala con el ancho abierto.
   Dos capas que se funden con el modo: honda sobre la mesa de noche (::before),
   ligera y cálida, de papel sobre papel, cuando la página es crema (::after) */
html[data-recs="folleto"] .fol__shadow {
  position: absolute; left: 0; top: calc(var(--fol-h) - 16px);
  width: var(--fol-sw); height: 32px;
  transform-origin: 0 50%;
  pointer-events: none;
}
html[data-recs="folleto"] .fol__shadow::before,
html[data-recs="folleto"] .fol__shadow::after { content: ""; position: absolute; inset: 0; }
html[data-recs="folleto"] .fol__shadow::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .85), rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, 0)); opacity: 0; }
html[data-recs="folleto"] .fol__shadow::after { inset: 4px 2% 6px; background: radial-gradient(closest-side, rgba(74, 56, 40, .2), rgba(74, 56, 40, .07) 55%, rgba(74, 56, 40, 0)); }

/* El libro: contexto 3D (la perspectiva la pone el JS en .fol__track); cada hoja se coloca con
   su translate3d + rotateY. Las hojas son planas: un contexto 3D anidado dentro de cada una hace
   que Chrome deje de pintar su parte baja cuando el folleto asoma por arriba de la pantalla */
html[data-recs="folleto"] .fol__book,
html[data-recs="folleto"] .fol__floors {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
html[data-recs="folleto"] .fol__page {
  position: absolute; left: 0; top: 0;
  width: var(--fol-w); height: var(--fol-h);
  transform-origin: 0 0;
}

/* Sombra de cada hoja tumbada en la mesa, a lo largo de su pie (capa propia, debajo del libro:
   el JS la coloca con la misma cadena + rotateX(90deg)) */
html[data-recs="folleto"] .fol__floor {
  position: absolute; left: 0; top: 0;
  width: calc(var(--fol-w) * 1.06); height: calc(var(--fol-w) * .32);
  transform-origin: 0 0;
}
html[data-recs="folleto"] .fol__floor::before,
html[data-recs="folleto"] .fol__floor::after { content: ""; position: absolute; inset: 0; }
html[data-recs="folleto"] .fol__floor::before { background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); opacity: 0; }
html[data-recs="folleto"] .fol__floor::after { background: radial-gradient(closest-side, rgba(74, 56, 40, .22), rgba(74, 56, 40, 0)); }

/* Noche y día: las capas de la mesa se funden con la página (mismo tiempo y curva que el
   cambio de modo); solo opacidad, nada de colores que dependan de --bg/--fg */
html[data-recs="folleto"] :is(.fol__glow, .fol__shadow, .fol__floor)::before,
html[data-recs="folleto"] :is(.fol__shadow, .fol__floor)::after { transition: opacity var(--morph, 1.6s) var(--ease-glide); }
html[data-recs="folleto"][data-mode="dark"] :is(.fol__shadow, .fol__floor)::before { opacity: 1; }
html[data-recs="folleto"][data-mode="dark"] :is(.fol__shadow, .fol__floor)::after { opacity: 0; }
html[data-recs="folleto"].mode-now :is(.fol__glow, .fol__shadow, .fol__floor)::before,
html[data-recs="folleto"].mode-now :is(.fol__shadow, .fol__floor)::after { transition: none; }

/* La hoja de papel */
html[data-recs="folleto"] .fol__sheet {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: var(--fol-m);
  /* Papel: grano muy fino, sin dibujo a la vista */
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .16  0 0 0 0 .1  .12 0 0 0 -.04'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--ink);
  overflow: hidden;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
/* Foco: un filete de imprenta dentro del margen (por fuera lo taparían las hojas vecinas) */
html[data-recs="folleto"] .fol__sheet:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(var(--fol-m) * -.5); }

html[data-recs="folleto"] .fol__photo {
  position: relative; display: block; flex: none;
  aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--paper-2);
}
html[data-recs="folleto"] .fol__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 2.2s var(--ease-out);
}
html[data-recs="folleto"] .fol__page.is-hot .fol__photo img { transform: scale(1.04); }

/* Tipografía de imprenta: número, nombre y precio */
html[data-recs="folleto"] .fol__num {
  display: block; margin-top: calc(var(--fol-m) * 1.2);
  font-family: var(--text); font-size: .62rem; font-weight: 500; line-height: 1;
  letter-spacing: .22em; font-variant-numeric: tabular-nums lining-nums;
  color: var(--gold);
}
html[data-recs="folleto"] .fol__name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: .5em;
  font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dt);
  font-size: calc(clamp(1.05rem, var(--fol-w) * .086, 1.45rem) * var(--ds));
  line-height: 1.1; text-wrap: balance;
  color: var(--ink);
}
html[data-recs="folleto"] .fol__price {
  display: block; margin-top: auto;
  font-family: var(--text); font-size: .7rem; font-weight: 500; line-height: 1;
  letter-spacing: .12em; font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-2);
}

/* Luz: sombra según el ángulo (opacidad desde el JS) y oclusión hacia el valle */
html[data-recs="folleto"] .fol__shade,
html[data-recs="folleto"] .fol__crease { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
html[data-recs="folleto"] .fol__shade { background: linear-gradient(270deg, rgb(40, 26, 18), rgb(30, 18, 13)); }
html[data-recs="folleto"] .is-turned .fol__shade { background: linear-gradient(90deg, rgb(40, 26, 18), rgb(30, 18, 13)); }
html[data-recs="folleto"] .fol__crease { background: linear-gradient(90deg, rgba(30, 18, 13, .42), rgba(30, 18, 13, .12) 30%, rgba(30, 18, 13, 0) 62%); }
html[data-recs="folleto"] .is-turned .fol__crease { background: linear-gradient(270deg, rgba(30, 18, 13, .42), rgba(30, 18, 13, .12) 30%, rgba(30, 18, 13, 0) 62%); }

/* =========================================================
   Móvil y tableta: el mismo folleto, abierto sobre la mesa y visto desde arriba.
   Las hojas van en vertical con los pliegues en horizontal (el JS pone la geometría:
   --fol-w, --fol-h, el alto del escenario y las transformaciones con rotateX)
   ========================================================= */
@media (max-width: 1023px) {
  html[data-recs="folleto"] .fol { --fol-m: clamp(12px, calc(var(--fol-w, 320px) * .05), 18px); }

  /* La lámpara: un charco de luz alargado a lo largo del folleto */
  html[data-recs="folleto"] .fol__glow { top: 50%; width: 100vw; height: calc(100% + 160px); }
  html[data-recs="folleto"] .fol__glow::before {
    background: radial-gradient(50% 50% at 50% 50%, rgba(245, 244, 235, .085), rgba(245, 244, 235, .04) 48%, rgba(245, 244, 235, .012) 76%, rgba(245, 244, 235, 0));
  }
  html[data-recs="folleto"] .fol__shadow { display: none; }

  /* La sombra de cada hoja en la mesa: su huella, difuminada (la de noche honda, la de día cálida) */
  html[data-recs="folleto"] .fol__floor { width: var(--fol-w); height: var(--fol-h); }
  html[data-recs="folleto"] .fol__floor::before { background: none; box-shadow: 0 0 38px rgba(0, 0, 0, .6); }
  html[data-recs="folleto"] .fol__floor::after { background: none; box-shadow: 0 0 30px rgba(74, 56, 40, .16); }

  /* La hoja apaisada: la foto arriba y, debajo, número, nombre y precio como en escritorio */
  html[data-recs="folleto"] .fol__photo { aspect-ratio: 16 / 10; }
  html[data-recs="folleto"] .fol__num { margin-top: calc(var(--fol-m) * .95); }
  html[data-recs="folleto"] .fol__name { flex: none; margin-top: .42em; font-size: calc(1.15rem * var(--ds)); }
  html[data-recs="folleto"] .fol__price { padding-top: 12px; }

  /* Luz: los pliegues van en horizontal; la oclusión, en el borde del valle */
  html[data-recs="folleto"] .fol__shade,
  html[data-recs="folleto"] .is-turned .fol__shade { background: linear-gradient(180deg, rgb(40, 26, 18), rgb(30, 18, 13)); }
  html[data-recs="folleto"] .fol__crease { background: linear-gradient(180deg, rgba(30, 18, 13, .42), rgba(30, 18, 13, .12) 30%, rgba(30, 18, 13, 0) 62%); }
  html[data-recs="folleto"] .is-turned .fol__crease { background: linear-gradient(0deg, rgba(30, 18, 13, .42), rgba(30, 18, 13, .12) 30%, rgba(30, 18, 13, 0) 62%); }
}

/* Tableta: hojas más anchas, con la foto a la izquierda y el texto a la derecha */
@media (min-width: 640px) and (max-width: 1023px) {
  html[data-recs="folleto"] .fol__sheet {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    column-gap: calc(var(--fol-m) * 1.5);
  }
  html[data-recs="folleto"] .fol__photo { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 3 / 2; }
  html[data-recs="folleto"] .fol__num { grid-column: 2; grid-row: 1; margin-top: calc(var(--fol-m) * .4); }
  html[data-recs="folleto"] .fol__name { grid-column: 2; grid-row: 2; font-size: calc(1.4rem * var(--ds)); }
  html[data-recs="folleto"] .fol__price { grid-column: 2; grid-row: 3; align-self: end; margin-bottom: calc(var(--fol-m) * .3); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-recs="folleto"] .fol__photo img { transition: none; }
  html[data-recs="folleto"] .fol__page.is-hot .fol__photo img { transform: none; }
}