/* COTA · hero con libro 3D que pasa páginas (HTML + CSS 3D + JS vanilla). Solo se animan transform y opacity. */
.hl {
  --gutter: clamp(16px, 3.4vw, 48px);
  /* una página: el libro abierto ocupa el resto de la fila (sin el texto de 460 px ni el gap de 64 px), tope 640 px */
  --pw: clamp(240px, calc((100vw - 2 * var(--gutter) - 460px - 64px + 36px) / 2), 640px);
  --ph: calc(var(--pw) / 1.414);               /* alto: láminas A3 apaisadas */
  --lino: #D6D1C5;
  --horizonte: 56%;
  position: relative; background: #B0634A; color: #F8F2E8;
  font-family: var(--cota-fuente, 'Montserrat', system-ui, sans-serif);
}
.hl *, .hl *::before, .hl *::after { box-sizing: border-box; }
.hl__riel { position: relative; height: 180vh; height: 180svh; }
.hl__escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ---------- un solo fondo continuo: pared terracota con textura + sombra de ventana, y la piedra donde apoya el libro ---------- */
.hl__fondo { position: absolute; inset: 0; pointer-events: none; }
.hl__pared {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 80% 18%, rgba(255, 228, 205, .20), transparent 70%),
    radial-gradient(ellipse 45% 55% at 8% 70%, rgba(70, 24, 10, .26), transparent 70%),
    repeating-radial-gradient(circle at 23% 37%, rgba(255, 255, 255, .018) 0 2px, rgba(0, 0, 0, .02) 2px 5px),
    #B0634A;
}
.hl__mesa {
  position: absolute; left: 0; right: 0; bottom: 0; top: var(--horizonte);
  background:
    radial-gradient(circle, rgba(110, 96, 78, .30) 0 1px, transparent 1.6px) 0 0 / 23px 19px,
    radial-gradient(circle, rgba(255, 255, 255, .45) 0 1px, transparent 1.6px) 9px 7px / 31px 27px,
    linear-gradient(180deg, #CFC9BB 0%, #D6D1C5 30%, #DAD5C9 100%);
  box-shadow: 0 -24px 40px -10px rgba(60, 22, 8, .38);
}
.hl__mesa::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, .35); }
.hl__ventana {
  position: absolute; inset: -10% -10%;
  background:
    linear-gradient(112deg, transparent 0 24%, rgba(55, 18, 6, .20) 29%, rgba(55, 18, 6, .20) 36%, transparent 41% 58%, rgba(55, 18, 6, .17) 63%, rgba(55, 18, 6, .17) 69%, transparent 74%),
    linear-gradient(112deg, transparent 0 44%, rgba(55, 18, 6, .10) 47%, transparent 52%);
}

/* ---------- grilla: texto (máx. 460 px) | gap ≥ 64 px | libro. Pared arriba, piedra abajo ---------- */
.hl__in {
  position: relative; z-index: 2; height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 64px;
  grid-template-rows: var(--horizonte) 1fr;
  grid-template-areas: "txt libro" "compra libro";
}
.hl__txt { grid-area: txt; align-self: end; padding-bottom: clamp(18px, 3.4svh, 36px); max-width: 460px; }
.hl__compra { grid-area: compra; align-self: start; padding-top: clamp(16px, 3svh, 34px); max-width: 460px; color: #20201E; }
.hl__libro { grid-area: libro; align-self: center; justify-self: center; margin-top: 15svh; margin-right: calc(var(--gutter) * -.7); }
.hl__pie { grid-area: compra; align-self: end; padding-bottom: clamp(14px, 3svh, 30px); font-size: 12px; letter-spacing: .08em; color: #55524b; max-width: 460px; }

.hl__e { opacity: 0; animation: hl-in 1.1s var(--ease, cubic-bezier(.22, 1, .36, 1)) forwards; animation-delay: calc(.2s + var(--i, 0) * .18s); }
@keyframes hl-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.hl__etq { font-size: 12px; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: #F8F2E8; margin-bottom: clamp(10px, 2svh, 20px); }
.hl h1 { font-weight: 300; font-size: clamp(2rem, min(3.4vw, 6.4svh), 3.3rem); line-height: 1.06; letter-spacing: -.02em; color: #FBF6EE; }
.hl__baj { margin-top: clamp(10px, 2svh, 20px); font-size: clamp(.95rem, min(1.4vw, 2.6svh), 1.12rem); line-height: 1.5; color: #F3EBDF; max-width: 38ch; }
.hl .sellos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(10px, 2.2svh, 20px); }
.hl .sellos span { border: 1px solid rgba(248, 242, 232, .65); padding: 5px 11px; font-size: 12px; font-weight: 500; letter-spacing: .08em; border-radius: 999px; white-space: nowrap; }
.hl__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.hl__precio s { font-size: 1.05rem; color: #6b675f; text-decoration-thickness: 1px; }
.hl__precio b { font-weight: 300; font-size: clamp(1.9rem, 3.1vw, 2.7rem); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #20201E; }
.hl__acc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 30px; margin-top: clamp(10px, 2svh, 18px); }
.hl .btn { background: #20201E; color: #EDE9E1; }
@media (hover: hover) { .hl .btn:hover { background: #3b3a37; } }
.hl__link { display: inline-flex; align-items: center; min-height: 44px; font: 500 12px/1 var(--cota-fuente, sans-serif); letter-spacing: .25em; text-transform: uppercase; color: #20201E; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.hl .pagos { color: var(--tinta-suave, #4a4943); margin-top: clamp(8px, 1.6svh, 14px); }
.hl .pagos__chip { color: #20201E; border-color: #20201E; background: rgba(255, 255, 255, .45); }
.hl .rating { margin-top: 6px; }

/* ---------- el libro ---------- */
.lb { perspective: 1700px; perspective-origin: 50% 30%; }
.lb__vista { position: relative; width: calc(var(--pw) * 2 + 40px); height: calc(var(--ph) + 80px); display: flex; align-items: center; justify-content: center; }
.lb__libro {
  position: relative; width: calc(var(--pw) * 2); height: var(--ph); transform-style: preserve-3d;
  transform: translateX(calc(var(--pw) * -.5)) rotateX(24deg) rotateZ(-2deg); will-change: transform;
}
.lb__hoja { position: absolute; left: 50%; top: 0; width: var(--pw); height: var(--ph); transform-origin: 0 50%; transform-style: preserve-3d; will-change: transform; }
.lb__hoja--0 { width: calc(var(--pw) + 8px); height: calc(var(--ph) + 14px); top: -7px; }
.lb__cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #EDE9E1; }
.lb__b { transform: rotateY(180deg); }
.lb__cara img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__cara i { position: absolute; inset: 0; pointer-events: none; display: block; }
.lb__hoja--0 .lb__b { background: var(--lino); }
.lb__hoja--0 .lb__b::after { content: ''; position: absolute; inset: 7px 8px 7px 0; background: #E8E2D5; }
.lb__f .lb__g { background: linear-gradient(90deg, rgba(20, 12, 6, .30), rgba(20, 12, 6, 0) 9%); }
.lb__b .lb__g { background: linear-gradient(270deg, rgba(20, 12, 6, .30), rgba(20, 12, 6, 0) 9%); }
.lb__f .lb__v { background: linear-gradient(90deg, rgba(40, 25, 15, 0) 25%, rgba(40, 25, 15, .5) 100%); opacity: 0; }
.lb__b .lb__v { background: linear-gradient(270deg, rgba(40, 25, 15, 0) 25%, rgba(40, 25, 15, .5) 100%); opacity: 0; }
.lb__br { right: auto !important; width: 42%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); opacity: 0; transform: translateX(-100%); }
.lb__f .lb__p { background: linear-gradient(90deg, rgba(20, 12, 8, .6), rgba(20, 12, 8, 0) 80%); opacity: 0; }
.lb__b .lb__p { background: linear-gradient(270deg, rgba(20, 12, 8, .6), rgba(20, 12, 8, 0) 80%); opacity: 0; }

.lb__tapa-tr { position: absolute; left: 50%; top: -7px; width: calc(var(--pw) + 8px); height: calc(var(--ph) + 14px); transform: translateZ(-16px); background:
  repeating-linear-gradient(0deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 3px), var(--lino); border-radius: 0 3px 3px 0; box-shadow: 0 0 0 1px rgba(60, 50, 40, .25); }
.lb__bloque { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.lb__bloque i { position: absolute; top: 0; width: calc(var(--pw) - 3px); height: var(--ph); background: #F3EEE4; border-bottom: 1px solid #cfc7b8; border-right: 1px solid #d9d2c4; transform: translateZ(calc(var(--n) * -1.9px)); opacity: 0; }
.lb__bloque--d i { left: 50%; }
.lb__bloque--i i { left: calc(50% - var(--pw) + 3px); border-right: 0; border-left: 1px solid #d9d2c4; }
.lb__sombra { position: absolute; top: 6%; height: 96%; width: calc(var(--pw) * 1.12); transform: translateZ(-17px) translate(14px, 18px); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(25, 10, 4, .55), rgba(25, 10, 4, 0) 72%); pointer-events: none; }
.lb__sombra--d { left: 50%; }
.lb__sombra--i { left: calc(50% - var(--pw) * 1.12); opacity: 0; }

/* ---------- sin movimiento: libro abierto estático en la planta a color ---------- */
.hl.is-estatico .hl__riel { height: auto; }
.hl.is-estatico .hl__escena { position: relative; height: auto; min-height: 100svh; }
.hl.is-estatico .hl__in { height: auto; min-height: 100svh; }
@media (prefers-reduced-motion: reduce) {
  .hl__riel { height: auto; } .hl__escena { position: relative; height: auto; min-height: 100svh; }
  .hl__in { height: auto; min-height: 100svh; }
  .hl__e { animation: none; opacity: 1; }
}

/* ---------- menos de 1024 px: una página (la derecha), texto arriba, precio y botón abajo del libro ---------- */
@media (max-width: 1023px) {
  .hl { --pw: min(calc(100vw - 2 * var(--gutter)), 540px); --gutter: clamp(16px, 4vw, 48px); }
  .hl__riel { height: auto; }
  .hl__escena { position: relative; height: auto; overflow: hidden; min-height: 0; }
  .hl__fondo { display: none; }
  .hl__in { display: block; height: auto; min-height: 0; max-width: none; padding: 0; }
  .hl__txt { padding: 34px var(--gutter) 22px; background: linear-gradient(180deg, #8E4B36, #A55944); position: relative; z-index: 2; max-width: none; }
  .hl h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .hl__baj { margin-top: 14px; font-size: 1rem; }
  .hl .sellos { margin-top: 16px; }
  .hl__etq { margin-bottom: 14px; }
  .hl__libro { margin: 0; padding: 14px var(--gutter) 0; background: #D6D1C5; position: relative; z-index: 1; box-shadow: 0 -14px 30px -14px rgba(40, 14, 4, .6); overflow: hidden; }
  .lb { perspective: 1200px; perspective-origin: 0% 50%; display: flex; justify-content: center; }
  .lb__vista { width: var(--pw); height: calc(var(--ph) + 28px); overflow: hidden; align-items: center; justify-content: flex-start; contain: paint; isolation: isolate; transform: translateZ(0); }
  .lb__libro { transform: translateX(calc(var(--pw) * -1)) rotateX(0deg) rotateZ(0deg); flex: 0 0 auto; margin-left: 0; }
  .lb__sombra--i, .lb__bloque--i { display: none; }
  .hl__pie { padding: 12px var(--gutter) 8px; background: #D6D1C5; position: relative; z-index: 1; text-align: center; max-width: none; color: #3d3c37; }
  .hl__compra { padding: 4px var(--gutter) 30px; background: #D6D1C5; position: relative; z-index: 1; max-width: none; }
  .hl__precio { margin-top: 6px; }
  .hl__acc { margin-top: 12px; }
  .hl .btn { width: 100%; }
  .hl__link { margin: 0 auto; }
}