/* ==========================================================
   SUPERSTICIÓN · Pitch — versión cinematográfica
   Pantalla de cine: negro cálido, fotografía panorámica (2,39:1),
   letterbox, grano y viñeta. Los estampados a bloque y el batik
   quedan como ornamento fino en oro; las cuatro tradiciones
   conservan su color como luz.
   Movimiento "premium": entradas largas (1–1,6 s, curva suave),
   salidas cortas, sin rebote.
   ========================================================== */

@font-face{font-family:"Cormorant";src:url("fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("fonts/cormorant-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Outfit";src:url("fonts/outfit.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --night:#0C0706; --umber:#150D0A; --ox:#210E0C;
  --gold:#D6B67E; --sand:#CDAE80; --clay:#C4694A; --sun:#E9C46A;
  --cream:#F3E8D2; --mute:rgba(243,232,210,.74); --line:rgba(214,182,126,.3);
  /* las cuatro tradiciones, en versión luminosa para fondo oscuro */
  --c1:#7F9BE6; --c2:#5FB0BE; --c3:#E5793B; --c4:#D4504A;

  /* escala fluida: 1 rem sigue a la pantalla; --zoom la multiplica */
  --base:clamp(14px,min(1.12vw,2vh),30px);
  --zoom:1;
  --bar:clamp(14px,3.2svh,34px);   /* barras de letterbox */
  --lead:0ms;                       /* retraso extra durante la apertura */

  --display:"Cormorant","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;

  --cin:cubic-bezier(.16,1,.3,1);   /* entradas: desacelera largo */
  --out:cubic-bezier(.4,0,1,1);     /* salidas: acelera */
  --std:cubic-bezier(.4,0,.2,1);    /* en pantalla */

  --px:0; --py:0;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:calc(var(--base) * var(--zoom));scroll-snap-type:y proximity;scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--night)}
body{margin:0;background:var(--night);color:var(--cream);font:300 1.12rem/1.62 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--night)}
:focus-visible{outline:.14rem solid var(--gold);outline-offset:.3rem}

/* ---------- capas de cine (fijas, sobre todo) ---------- */
.film{position:fixed;pointer-events:none}
.vig{inset:0;z-index:89;background:radial-gradient(125% 95% at 50% 50%,#0000 52%,rgba(0,0,0,.62))}
.grain{inset:-60%;z-index:90;opacity:.085;mix-blend-mode:overlay;animation:grain 1.1s steps(6) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
/* luz de proyector que sigue al cursor */
.spot{inset:0;z-index:88;mix-blend-mode:screen;opacity:var(--spot,0);transition:opacity 1.2s var(--std);
  background:radial-gradient(calc(var(--base) * 26) circle at var(--sx,50%) var(--sy,40%),rgba(255,204,140,.13),#0000 62%)}
/* barras de letterbox; al abrir, se retiran como un telón */
.cine{left:0;right:0;z-index:95;height:var(--bar);background:#000;transition:height 2.4s var(--cin)}
.cine--t{top:0}
.cine--b{bottom:0}
.js:not(.open) .cine{height:51svh}

/* ---------- interfaz fija (no escala con el zoom) ---------- */
.ui{font-size:var(--base)}
.prog{position:fixed;left:0;right:0;bottom:var(--bar);height:2px;z-index:96;transform-origin:left;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--c1) 0 25%,var(--c2) 25% 50%,var(--c3) 50% 75%,var(--c4) 75%);opacity:.9}
.zoom{position:fixed;right:1.1em;bottom:calc(var(--bar) + .9em);z-index:100;display:flex;align-items:center;gap:.1em;padding:.2em;background:rgba(12,7,6,.72);border:1px solid var(--line);border-radius:3em;color:var(--cream);-webkit-backdrop-filter:blur(.7em);backdrop-filter:blur(.7em)}
.zoom button{all:unset;box-sizing:border-box;cursor:pointer;min-width:2.1em;height:2.1em;display:grid;place-items:center;border-radius:3em;font:300 1.1em/1 var(--text);transition:background .2s var(--std),transform .15s var(--std),color .2s var(--std)}
.zoom button:hover{background:rgba(214,182,126,.18);color:var(--gold)}
.zoom button:active{transform:scale(.92)}
.zoom button:focus-visible{outline:1px solid var(--gold);outline-offset:.1em}
.zoom button:disabled{opacity:.3;cursor:default;background:none;color:inherit}
.zoom .val{min-width:3.6em;font-size:.84em;font-weight:300;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* ---------- secciones ---------- */
.deck{container:deck / inline-size}
.sec{--page:var(--night);--glow:rgba(214,182,126,.09);position:relative;isolation:isolate;min-height:100svh;display:grid;align-content:center;padding:6rem 6.5rem;background:var(--page);overflow:hidden;scroll-snap-align:start}
.sec--umber{--page:var(--umber)}
.sec--ox{--page:var(--ox)}
/* luz ambiente que deriva despacio detrás del contenido */
.sec::before{content:"";position:absolute;inset:-25%;z-index:-2;pointer-events:none;
  background:radial-gradient(38% 46% at 16% 24%,var(--glow),#0000 72%),radial-gradient(34% 44% at 86% 78%,var(--glow2,rgba(0,0,0,0)),#0000 72%);animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(4%,3%,0) scale(1.08)}}
.wrap{position:relative;z-index:2;opacity:var(--wo,1);transform:translate3d(0,var(--wy,0px),0);width:100%;max-width:calc(80rem * max(1, 1 / var(--zoom)));margin-inline:auto}

/* fotografía de fondo, tenue, con paralaje del cursor y movimiento lento */
.bgph{position:absolute;inset:-5rem -3rem;z-index:-1;pointer-events:none;opacity:var(--ph,.2);translate:0 var(--par,0px);
  transform:translate3d(calc(var(--px) * -1rem),calc(var(--py) * -.7rem),0);transition:transform 1.6s var(--cin);
  -webkit-mask:radial-gradient(ellipse 80% 80% at var(--mx,60%) 50%,#000 10%,#0000 78%);mask:radial-gradient(ellipse 80% 80% at var(--mx,60%) 50%,#000 10%,#0000 78%)}
.bgph img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.08);animation:kb 36s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.16) translate(-1.5%,1%)}}

.h2{font:300 4.7rem/1.02 var(--display);letter-spacing:-.008em;text-wrap:balance;font-feature-settings:"kern","liga","lnum"}
.lede{font-size:1.28rem;line-height:1.6;max-width:30rem;color:var(--mute)}
.it{font-family:var(--display);font-style:italic;font-weight:400;color:var(--gold);letter-spacing:.01em}

/* ornamento: línea – rombo – línea (se dibuja desde el centro) */
.orn{display:flex;align-items:center;justify-content:center;gap:1.1rem;width:min(24rem,64%);color:var(--gold)}
.orn::before,.orn::after{content:"";flex:1;height:1px}
.orn::before{background:linear-gradient(90deg,#0000,currentColor);transform-origin:100% 50%}
.orn::after{background:linear-gradient(270deg,#0000,currentColor);transform-origin:0 50%}
.orn i{width:.55rem;height:.55rem;border:1px solid currentColor;transform:rotate(45deg)}
.js .orn::before,.js .orn::after{transform:scaleX(0);transition:transform .4s var(--out)}
.js .orn i{opacity:0;transform:rotate(45deg) scale(0);transition:opacity .3s var(--out),transform .3s var(--out)}
.js .orn.in::before,.js .orn.in::after{transform:none;transition:transform 1.8s var(--cin) calc(var(--lead) + var(--d,0ms) + 250ms)}
.js .orn.in i{opacity:1;transform:rotate(45deg);transition:opacity .9s var(--cin) calc(var(--lead) + var(--d,0ms)),transform 1.2s var(--cin) calc(var(--lead) + var(--d,0ms))}

/* botón: marco fino y barrido de color */
.btn{position:relative;display:inline-flex;align-items:center;gap:.9rem;padding:.95rem 2.1rem;border:1px solid var(--gold);color:var(--cream);font:300 1.02rem/1.2 var(--text);letter-spacing:.14em;text-decoration:none;overflow:hidden;isolation:isolate;will-change:transform;transition:color .5s var(--cin),transform .5s var(--cin)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);transform:scaleY(0);transform-origin:50% 100%;transition:transform .6s var(--cin)}
.btn i{width:.42rem;height:.42rem;border:1px solid currentColor;transform:rotate(45deg);transition:transform .6s var(--cin)}
.btn:hover{color:var(--night)}
.btn:hover::before{transform:none}
.btn:hover i{transform:rotate(225deg) scale(1.25);background:currentColor}
.btn:active{transform:scale(.97)}

/* friso de estampado a bloque en oro, muy fino */
.blk{position:relative;overflow:hidden}
.blk::before{content:"";position:absolute;inset:0;background:var(--fg,var(--gold));-webkit-mask:var(--m);mask:var(--m)}
.p-dots{--m:radial-gradient(circle,#000 0 26%,#0000 29%) 0 0/1rem 1rem,radial-gradient(circle,#000 0 26%,#0000 29%) .5rem .5rem/1rem 1rem}
.p-chev{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M3 23 20 7l17 16' fill='none' stroke='black' stroke-width='3.4'/%3E%3C/svg%3E") 0 0/1.6rem 1.1rem}
.p-zig{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 15 10 5l10 10L30 5l10 10' fill='none' stroke='black' stroke-width='2.8'/%3E%3C/svg%3E") 0 0/1.5rem .75rem}
.p-arrow{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M8 4 22 15 8 26' fill='none' stroke='black' stroke-width='3.4'/%3E%3C/svg%3E") 0 50%/1.3rem 1.3rem repeat-x}
.p-vbar{--m:repeating-linear-gradient(90deg,#000 0 .18rem,#0000 .18rem .55rem)}
.p-hbar{--m:repeating-linear-gradient(180deg,#000 0 .16rem,#0000 .16rem .5rem)}
/* ---------- revelado: entra y sale de vista ---------- */
.js [data-r="fade"]{opacity:0;transform:translateY(1.5rem);filter:blur(.35rem);transition:opacity .5s var(--out),transform .5s var(--out),filter .5s var(--out)}
.js [data-r="fade"].in{opacity:1;transform:none;filter:none;transition:opacity 1.5s var(--cin) calc(var(--lead) + var(--d,0ms)),transform 1.7s var(--cin) calc(var(--lead) + var(--d,0ms)),filter 1.3s var(--cin) calc(var(--lead) + var(--d,0ms))}
/* marcos y fotos: se abren como una pantalla, la imagen se asienta */
.js [data-r="open"]{clip-path:inset(0 50% 0 50%);transition:clip-path .6s var(--out)}
.js [data-r="open"].in{clip-path:inset(0 0 0 0);transition:clip-path 1.7s var(--cin) calc(var(--lead) + var(--d,0ms))}
.js [data-r="print"]{clip-path:inset(100% 0 0 0);transition:clip-path .6s var(--out)}
.js [data-r="print"].in{clip-path:inset(0 0 0 0);transition:clip-path 1.6s var(--cin) calc(var(--lead) + var(--d,0ms))}
.zi{scale:var(--rs,1);transform:scale(var(--hs,1))}
.js [data-r="open"] .zi,.js [data-r="print"] .zi{--rs:1.22;transition:scale .6s var(--out),transform 1.8s var(--cin),filter 1s var(--std)}
.js [data-r="open"].in .zi,.js [data-r="print"].in .zi{--rs:1;transition:scale 2.4s var(--cin) calc(var(--lead) + var(--d,0ms)),transform 1.8s var(--cin),filter 1s var(--std)}
.js [data-r="draw"] path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--out)}
.js [data-r="draw"].in path{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--cin) calc(var(--lead) + var(--i,0) * 200ms)}
/* titulares: aparecen letra por letra (fundido largo, desfase corto) */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.js [data-split] .c{opacity:0;transform:translateY(.22em);transition:opacity .4s var(--out),transform .4s var(--out)}
.js [data-split].in .c{opacity:1;transform:none;transition:opacity 1.9s cubic-bezier(.5,1,.89,1) calc(var(--lead) + var(--d,0ms) + var(--ci) * 24ms),transform 2.1s var(--cin) calc(var(--lead) + var(--d,0ms) + var(--ci) * 24ms)}

/* ---------- portada: fotograma panorámico + título ---------- */
.sec.cover{padding:0;align-content:center;text-align:center;--ts:min(8.6rem,8.3cqw)}
.cover__frame{position:relative;isolation:isolate;width:100%;height:min(calc(100cqw / 2.39),49svh);overflow:hidden;background:#000}
.cover__frame .bgph{inset:-2rem;opacity:1;-webkit-mask:none;mask:none}
.cover__frame img{filter:saturate(.9) contrast(1.06);animation:kb 40s ease-in-out infinite alternate}
.cover__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,7,6,.45),#0000 22%,#0000 48%,rgba(12,7,6,.82) 82%,var(--night) 100%),radial-gradient(90% 120% at 50% 50%,#0000 55%,rgba(12,7,6,.55))}
.cover__in{position:relative;z-index:2;margin-top:calc(var(--ts) * -.62);display:grid;justify-items:center;gap:1.3rem;padding:0 2rem}
.titulo{font:400 var(--ts)/.95 var(--display);letter-spacing:.13em;padding-left:.13em;white-space:nowrap;user-select:none;color:var(--cream);text-shadow:0 .08em .5em rgba(0,0,0,.55)}
.ch{display:inline-block}
.js .titulo .ch{opacity:0;transform:translateY(40%);filter:blur(.12em);transition:opacity .5s var(--out),transform .5s var(--out),filter .5s var(--out)}
.js .titulo.in .ch{opacity:1;transform:none;filter:none;transition:opacity 1.8s var(--cin) calc(var(--lead) + var(--i) * 85ms),transform 2s var(--cin) calc(var(--lead) + var(--i) * 85ms),filter 1.6s var(--cin) calc(var(--lead) + var(--i) * 85ms)}
.chi{display:inline-block;transform:translateY(calc(var(--k,0) * -.05em)) scale(calc(1 + var(--k,0) * .06));color:color-mix(in srgb,var(--c,var(--gold)) calc(var(--k,0) * 100%),var(--cream));text-shadow:0 0 calc(var(--k,0) * .55em) color-mix(in srgb,var(--c,var(--gold)) calc(var(--k,0) * 80%),transparent);transition:transform .7s var(--cin),color .5s var(--std),text-shadow .5s var(--std)}
.cover__quote{font:italic 400 2.15rem/1.25 var(--display);max-width:34rem;text-wrap:balance;color:var(--cream)}
.cover__by{display:flex;align-items:center;gap:1rem;font:300 .98rem/1.2 var(--text);letter-spacing:.16em;color:var(--mute)}
.cover__by img{height:3rem;width:auto}
.cover__go{margin-top:.5rem}

/* ---------- sinopsis ---------- */
.sin{display:grid;grid-template-columns:1.2fr 1fr;gap:6.5rem;align-items:center}
.sin .h2{margin-bottom:2.2rem}
.sin__t p{font-size:1.16rem;max-width:36rem;color:var(--mute)}
.sin__t p+p{margin-top:1.1rem}
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stat{position:relative;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:12.5rem}
.stat__i{position:absolute;inset:0;display:grid;align-content:end;padding:1.3rem 1.5rem 1.2rem;overflow:hidden;transition:background .7s var(--std)}
.stat__i::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--sc,var(--gold));transform:scaleX(.18);transform-origin:left;transition:transform 1s var(--cin)}
.stat__i::after{content:"";position:absolute;inset:auto -20% -60% -20%;height:90%;background:radial-gradient(50% 60% at 50% 100%,color-mix(in srgb,var(--sc,var(--gold)) 45%,transparent),#0000 70%);opacity:0;transition:opacity .9s var(--std)}
.stat:hover .stat__i::before{transform:none}
.stat:hover .stat__i::after{opacity:1}
.stat b{position:relative;z-index:1;font:300 6.6rem/.85 var(--display);font-variant-numeric:lining-nums tabular-nums;color:var(--cream);transition:transform .9s var(--cin),color .5s var(--std)}
.stat:hover b{transform:translateY(-.3rem);color:color-mix(in srgb,var(--sc,var(--gold)) 55%,var(--cream))}
.stat span{position:relative;z-index:1;font:italic 400 1.5rem/1.2 var(--display);color:var(--gold);margin-top:.5rem}

/* ---------- teaser: la sala ---------- */
.tea{display:grid;grid-template-columns:.72fr 1.6fr;gap:4.5rem;align-items:center}
.tea__t{display:grid;gap:1.5rem;justify-items:start}
.tea__scr{position:relative}
.tea__scr::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(229,121,59,.2),#0000 70%);animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.55;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.frame{border:1px solid var(--line);background:#000}
.player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.player iframe,.player__poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.player__poster{all:unset;box-sizing:border-box;position:absolute;inset:0;cursor:pointer;overflow:hidden}
.player__poster img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.78)}
.player__poster::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 50% 50%,#0000 45%,rgba(0,0,0,.55))}
.player__poster:hover img,.player__poster:focus-visible img{--hs:1.06;filter:saturate(1.05) brightness(.95)}
.player__btn{position:absolute;z-index:2;left:50%;top:50%;width:5.6rem;height:5.6rem;margin:-2.8rem 0 0 -2.8rem;display:grid;place-items:center;border-radius:50%;border:1px solid var(--gold);color:var(--gold);background:rgba(12,7,6,.35);-webkit-backdrop-filter:blur(.4rem);backdrop-filter:blur(.4rem);transition:transform .8s var(--cin),background .5s var(--std),color .5s var(--std)}
.player__btn::before{content:"";position:absolute;inset:-.1rem;border-radius:50%;border:1px solid var(--gold);animation:ring 3.2s var(--cin) infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.player__btn svg{width:1.9rem;height:1.9rem;margin-left:.25rem}
.player__poster:hover .player__btn,.player__poster:focus-visible .player__btn{transform:scale(1.12);background:var(--gold);color:var(--night)}
.yt{color:var(--cream);font:300 .98rem/1.2 var(--text);letter-spacing:.1em;text-decoration:none;background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:.4rem;transition:background-size .6s var(--cin),color .3s var(--std)}
.yt:hover{background-size:0 1px;background-position:100% 100%;color:var(--gold)}
.reel{position:relative;z-index:2;margin:4rem -6.5rem -1rem;overflow:hidden;padding:1rem 0;
  -webkit-mask:linear-gradient(90deg,#0000,#000 9%,#000 91%,#0000);mask:linear-gradient(90deg,#0000,#000 9%,#000 91%,#0000)}
.reel__track{display:flex;width:max-content;animation:reel 120s linear infinite}
.reel:hover .reel__track{animation-play-state:paused}
.reel__set{display:flex;gap:.9rem;padding-right:.9rem}
.reel__f{width:17rem;aspect-ratio:2.39/1;flex:none;overflow:hidden;background:#000;transition:transform .9s var(--cin)}
.reel__f img{width:100%;height:100%;object-fit:cover;filter:grayscale(.75) brightness(.7) contrast(1.05);transition:filter .9s var(--std),transform 1.6s var(--cin)}
.reel__f:hover{transform:scale(1.07);z-index:2}
.reel__f:hover img{filter:none;transform:scale(1.08)}
@keyframes reel{to{transform:translateX(-50%)}}

/* ---------- voces: cuatro paneles, uno se abre ---------- */
.voces__h{display:flex;justify-content:space-between;align-items:end;gap:4rem}
.voces__h .lede{max-width:24rem}
.voces{display:flex;gap:.8rem;height:min(35rem,62svh);margin-top:2.8rem}
.voz{--vc:var(--c1);position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#000;outline-offset:-.25rem;transition:flex-grow 1.2s var(--cin)}
.voz--c2{--vc:var(--c2)}.voz--c3{--vc:var(--c3)}.voz--c4{--vc:var(--c4)}
.voces:hover .voz:hover,.voz:focus-visible,.voz:focus-within{flex-grow:1.55}
.voz__in{position:absolute;inset:0}
.voz__ph{position:absolute;inset:0;overflow:hidden}
.voz__ph img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 25%);filter:grayscale(1) contrast(1.05) brightness(.72)}
.voz__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,rgba(8,4,3,.9) 88%),linear-gradient(0deg,color-mix(in srgb,var(--vc) 42%,transparent),#0000 55%);mix-blend-mode:normal;transition:opacity .9s var(--std)}
.voz:hover .voz__ph img,.voz:focus-within .voz__ph img{filter:grayscale(0) contrast(1.05) brightness(.95);--hs:1.07}
.voz::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:2px;background:var(--vc);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--cin)}
.voz:hover::before,.voz:focus-within::before{transform:none}
.voz__b{position:absolute;z-index:2;left:0;bottom:0;width:min(100%,18.5rem);display:grid;gap:.55rem;padding:1.4rem 1.5rem 1.7rem;justify-items:start}
.voz__b .it{font-size:1.15rem;color:color-mix(in srgb,var(--vc) 55%,var(--cream))}
.voz__b h3{font:400 2.6rem/1 var(--display);letter-spacing:-.005em}
.voz__b p{font-size:.98rem;line-height:1.5;color:var(--mute)}

/* ---------- encuentro ---------- */
.enc{display:grid;grid-template-columns:1.15fr 1fr;gap:5rem;align-items:center}
.enc__l{display:grid;gap:2.2rem}
.enc .lede{max-width:33rem;margin-top:1.4rem}
.hilos{position:relative;display:grid;grid-template-columns:max-content 1fr auto;column-gap:1.2rem;height:19rem}
.hilos__n{display:grid;grid-template-rows:repeat(4,1fr)}
.hilo{display:flex;align-items:center;gap:1rem;font:400 1.55rem/1.1 var(--display);cursor:default;transition:opacity .5s var(--std),transform .8s var(--cin)}
.hilo i{width:.8rem;height:.8rem;background:var(--c);transform:rotate(45deg);flex:none;box-shadow:0 0 .9rem var(--c);transition:transform .8s var(--cin)}
.hilo small{display:block;font:300 .88rem/1.3 var(--text);letter-spacing:.06em;color:var(--mute);margin-top:.15rem}
.hilos svg{width:100%;height:100%;overflow:visible}
.nodo{display:flex;align-items:center;gap:1rem;padding-right:.4rem}
.nodo i{width:1.2rem;height:1.2rem;border:1px solid var(--gold);transform:rotate(45deg);flex:none;position:relative}
.nodo i::after{content:"";position:absolute;inset:.22rem;background:var(--gold)}
.nodo b{font:300 3.2rem/1 var(--display);letter-spacing:.02em}
.hilos path{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 .35rem var(--c));transition:opacity .5s var(--std),stroke-width .5s var(--std)}
.hilos[data-hi] .hilo:not(.on){opacity:.32}
.hilos[data-hi] path:not(.on){opacity:.15}
.hilos .hilo.on{transform:translateX(.6rem)}
.hilos .hilo.on i{transform:rotate(225deg) scale(1.3)}
.hilos path.on{stroke-width:4}
.enc__r{display:grid;gap:1.2rem;justify-items:start}
.enc__ph{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#000;border:1px solid var(--line)}
.enc__ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.05)}
.enc__ph:hover img{--hs:1.06;filter:saturate(1.1) contrast(1.05)}
.enc__ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0000 55%,rgba(12,7,6,.55)),radial-gradient(90% 90% at 50% 50%,#0000 60%,rgba(12,7,6,.45))}
.enc__r h3{font:400 3rem/1 var(--display)}
.enc__r p{max-width:26rem;color:var(--mute)}

/* ---------- visión (batik) ---------- */
.vis{padding-left:0;padding-right:6.5rem}
.vis__band{position:absolute;z-index:0;inset:0 auto 0 0;width:22rem;background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.12))}
.vis__band::before{content:"";position:absolute;left:.55rem;top:0;bottom:0;width:1rem;background:radial-gradient(circle,var(--gold) 0 36%,#0000 42%) 0 0/1rem 1rem repeat-y;opacity:.55;z-index:2}
.vis__band::after{content:"";position:absolute;left:2rem;top:0;bottom:0;width:1px;background:var(--gold);opacity:.55;z-index:2}
.batik{position:absolute;inset:0 0 0 2.4rem;width:calc(100% - 2.4rem);height:100%}
.batik .lat{fill:none;stroke:var(--sand);stroke-width:.7;opacity:.16}
.batik .dot{fill:var(--sand);opacity:.35}
.batik use{opacity:.34}
.batik .fl{transform:rotate(calc(var(--k,0) * 55deg)) scale(calc(1 + var(--k,0) * .55));transition:transform .7s var(--cin)}
.batik .sw{animation:sway 11s ease-in-out infinite alternate;animation-delay:calc(var(--n,0) * -1.1s)}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.vis__c{margin-left:27rem;width:calc(100% - 27rem);max-width:50rem;display:grid;gap:2rem}
.vis__p{display:grid;gap:1.1rem;font-size:1.14rem;max-width:42rem;color:var(--mute)}
.vis__q{display:flex;align-items:center;gap:2.2rem;margin-top:.9rem;padding-top:1.9rem;border-top:1px solid var(--line)}
.diamond{flex:none;width:10rem;aspect-ratio:1;background:var(--gold);padding:1px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform 1.2s var(--cin)}
.diamond img{width:100%;height:100%;object-fit:cover;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);filter:grayscale(.4) contrast(1.05)}
.vis__q:hover .diamond{transform:rotate(10deg) scale(1.07)}
.vis__q blockquote{font:italic 400 2.2rem/1.2 var(--display);text-wrap:balance;color:var(--cream)}
.vis__q figcaption{margin-top:.9rem;font:300 .92rem/1.2 var(--text);letter-spacing:.14em;color:var(--gold)}
.vis__q figcaption b{font-weight:400;color:var(--cream)}

/* ---------- equipo ---------- */
.eq__h{display:flex;justify-content:space-between;align-items:end;margin-bottom:3.2rem}
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;align-items:stretch}
.badge{--bc:var(--c4);perspective:75rem;display:flex;flex-direction:column}
.badge--c3{--bc:var(--c3)}.badge--c2{--bc:var(--c2)}.badge--c1{--bc:var(--c1)}
.badge__c{position:relative;flex:1;padding:1rem 1rem 1.4rem;background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--line);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--cin),border-color .6s var(--std),background .6s var(--std);will-change:transform}
.badge__c::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--bc);transform:scaleX(.25);transform-origin:left;transition:transform 1s var(--cin)}
.badge__c::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,226,170,.28),#0000 55%);opacity:var(--go,0);transition:opacity .6s var(--std)}
.badge__c:hover{border-color:color-mix(in srgb,var(--bc) 60%,transparent)}
.badge__c:hover::before{transform:none}
.badge__ph{aspect-ratio:1;overflow:hidden;background:#000}
.badge__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.05) brightness(.85);transition:filter 1s var(--std),transform 1.6s var(--cin)}
.badge__c:hover .badge__ph img{filter:none;transform:scale(1.07)}
.badge .it{display:block;margin-top:1.1rem;font-size:1.12rem;color:color-mix(in srgb,var(--bc) 60%,var(--cream))}
.badge h3{font:400 2.2rem/1.02 var(--display);margin-top:.3rem}
.badge p{font-size:.95rem;line-height:1.5;margin-top:.7rem;color:var(--mute)}

/* ---------- presupuesto ---------- */
.fin__g{display:grid;grid-template-columns:.85fr 1.4fr;gap:5rem;align-items:center}
.fin .h2{margin-bottom:2.4rem}
.total small{display:block;font:italic 400 1.35rem/1.2 var(--display);color:var(--gold);margin-bottom:.4rem}
.total p{display:flex;align-items:baseline;gap:.7rem;font:300 8.6rem/.9 var(--display);color:var(--cream);font-variant-numeric:lining-nums tabular-nums}
.total p i{font:300 1.1rem/1 var(--text);font-style:normal;letter-spacing:.14em;color:var(--mute)}
.strips{display:grid;gap:2.4rem}
.strip h3{font:italic 400 1.35rem/1.3 var(--display);color:var(--gold);margin-bottom:.8rem}
.strip__b{display:flex;gap:.3rem;height:3.6rem}
.seg{position:relative;flex:var(--f) 1 0;min-width:0;transform-origin:left;transition:opacity .5s var(--std),transform .9s var(--cin),filter .5s var(--std)}
.js .strip__b.draw .seg{transform:scaleX(0);transition:transform .5s var(--out)}
.js .strip__b.draw.in .seg{transform:none;transition:transform 1.8s var(--cin) calc(var(--lead) + var(--i) * 140ms),opacity .5s var(--std),filter .5s var(--std)}
.seg::before{opacity:.15}
.seg{background:color-mix(in srgb,var(--bg) 80%,var(--umber))}
.seg--ok{--bg:var(--gold);--fg:#000}
.seg--no{background:repeating-linear-gradient(135deg,#0000 0 .45rem,rgba(243,232,210,.18) .45rem .55rem);box-shadow:inset 0 0 0 1px rgba(243,232,210,.45)}
.cap{display:flex;gap:.3rem;margin-top:.7rem;font-size:.96rem;line-height:1.4;color:var(--mute)}
.cap > div{flex:var(--f) 1 0;min-width:0}
.cap b{font-weight:400;color:var(--cream)}
.cap--ok b{color:var(--gold)}
.fin[data-hi] .seg:not(.on){opacity:.28;filter:saturate(.5)}
.fin[data-hi] .leg li:not(.on){opacity:.4}
.leg{display:grid;margin-top:.3rem}
.leg li{display:grid;grid-template-columns:1.2rem 1fr auto auto;align-items:center;gap:1rem;padding:.62rem .2rem;border-top:1px solid rgba(243,232,210,.14);font:300 1.08rem/1.2 var(--text);cursor:default;transition:opacity .5s var(--std),padding .7s var(--cin),color .4s var(--std)}
.leg li:hover,.leg li.on{padding-left:.8rem;color:var(--gold)}
.leg i{width:.75rem;height:.75rem;transform:rotate(45deg);background:var(--bg)}
.leg .pc{width:3rem;text-align:right;font-variant-numeric:tabular-nums;color:var(--mute)}
.leg .vl{width:7.5rem;text-align:right;font-weight:400;font-variant-numeric:tabular-nums}
.fin__n{margin-top:1rem;font-size:.9rem;color:var(--mute);opacity:.8}
.f-teal{--bg:var(--c2);--fg:#000}
.f-sand{--bg:var(--gold);--fg:#000}
.f-orange{--bg:var(--c3);--fg:#000}
.f-sun{--bg:var(--sun);--fg:#000}
.f-cream{--bg:var(--cream);--fg:#000}

/* ---------- cierre ---------- */
.close{text-align:center;--ts:min(8.6rem,8.3cqw);--glow:rgba(229,121,59,.14)}
.close__in{display:grid;justify-items:center;gap:1.5rem}
.close__k{font:italic 400 1.9rem/1.2 var(--display);color:var(--gold)}
.close__s{font-size:1.2rem;max-width:34rem;text-wrap:balance;color:var(--mute)}
.contact{display:grid;gap:.2rem;font-size:1.1rem;color:var(--mute)}
.contact b{font:400 2rem/1.2 var(--display);color:var(--cream)}
.contact a{text-decoration:none;letter-spacing:.1em;background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:.3rem;transition:background-size .6s var(--cin),color .3s var(--std);width:fit-content;margin-inline:auto}
.contact a:hover{background-size:0 1px;background-position:100% 100%;color:var(--gold)}
.close__f{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;justify-content:center;align-items:center;font-size:.9rem;letter-spacing:.08em;color:var(--mute);margin-top:.8rem}
.close__f img{height:2.6rem;width:auto}

/* ---------- contenedor medio y estrecho (también con el zoom) ---------- */
@container deck (max-width:72rem){
  .sec{padding:5.5rem 3rem}
  .reel{margin-inline:-3rem}
  .h2{font-size:3.8rem}
  .crew{grid-template-columns:repeat(2,1fr)}
  .voces{display:grid;grid-template-columns:repeat(2,1fr);height:auto}
  .voz{aspect-ratio:4/5}
  .voces:hover .voz:hover,.voz:focus-within{flex-grow:1}
  .vis__band{width:14rem}
  .vis__c{margin-left:17rem;width:calc(100% - 17rem)}
  .tea{grid-template-columns:1fr;gap:2.6rem}
  .sin,.enc,.fin__g{gap:3.2rem}
}
@container deck (max-width:52rem){
  .sec{padding:5rem 1.6rem}
  .reel{margin-inline:-1.6rem}
  .cover{--ts:min(8.6rem,9.2cqw)}
  .cover__frame{height:46svh}
  .titulo{letter-spacing:.08em;padding-left:.08em}
  .cover__quote{font-size:1.75rem}
  .h2{font-size:3.1rem}
  .sin,.enc,.fin__g{grid-template-columns:1fr}
  .voces__h,.eq__h{display:grid;gap:1rem}
  .voces{grid-template-columns:1fr}
  .voz{aspect-ratio:4/4.4}
  .crew{grid-template-columns:1fr}
  .badge{max-width:22rem}
  .stat{min-height:9.5rem}
  .stat b{font-size:5rem}
  .vis__band{width:5rem}
  .vis{padding-right:1.6rem}
  .vis__c{margin-left:5.4rem;width:calc(100% - 5.4rem)}
  .vis__q{display:grid}
  .vis__q blockquote{font-size:1.8rem}
  .total p{font-size:6rem}
  .hilos{height:17rem}
  .nodo b{font-size:2rem}
  .hilo{font-size:1.25rem}
  .player__btn{width:4.4rem;height:4.4rem;margin:-2.2rem 0 0 -2.2rem}
}
@media (hover:none){
  .voz__b p{display:block}
}
@media (max-width:700px){
  .zoom{right:.6em}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .js:not(.open) .cine{height:var(--bar)}
  .js [data-r],.js [data-split] .c,.js .titulo .ch,.js [data-r="draw"] path,.js .strip__b.draw .seg,.js .orn::before,.js .orn::after,.js .orn i,.js .sidx *{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;stroke-dashoffset:0!important;transition:none!important}
  .js .orn i{transform:rotate(45deg)!important}
  .zi{--rs:1!important}
}


/* ==========================================================
   Estilo "sleep-well": entrada, cromo mínimo, índice por sección,
   menú a pantalla completa, scroll con inercia, cursor propio
   ========================================================== */
.js:not(.open){overflow:hidden}
.js.smooth{scroll-snap-type:none;scroll-behavior:auto}
.emb{display:block;width:100%;height:auto;color:var(--gold);overflow:visible}
.emb-d{transform-box:fill-box;transform-origin:center;transition:transform 1.4s var(--cin)}
.emb:hover .emb-d,.logo:hover .emb-d{transform:rotate(90deg) scale(1.1)}

/* entrada */
.loader{position:fixed;inset:0;z-index:140;display:grid;place-items:center;background:var(--night);transition:opacity 1.4s var(--std) .5s,visibility 0s 1.9s}
.loader.gone{opacity:0;visibility:hidden;pointer-events:none}
.loader__b{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:1.5rem;font-size:var(--base);color:var(--cream);padding:2em}
.loader__b span{font:italic 400 1.9em/1 var(--display);letter-spacing:.04em;transition:letter-spacing 1s var(--cin),color .4s var(--std)}
.loader__b:hover span{letter-spacing:.2em;color:var(--gold)}
.loader__b:focus-visible{outline:1px solid var(--gold);outline-offset:.4em}
.loader.gone .loader__b{transform:scale(1.15);opacity:0;transition:transform 1.4s var(--cin),opacity .7s var(--std)}
@keyframes float{from{transform:translateY(-.35em)}to{transform:translateY(.35em)}}

/* cromo fijo: logo, índice, capítulos */
.chrome{position:fixed;left:0;right:0;top:0;z-index:130;pointer-events:none}
.logo{position:absolute;left:50%;top:calc(var(--bar) + .7em);width:2.5em;margin-left:-1.25em;pointer-events:auto;transition:transform .9s var(--cin)}
.logo:hover{transform:translateY(.2em) scale(1.08)}
.idx{all:unset;box-sizing:border-box;position:absolute;right:1.5em;top:calc(var(--bar) + .9em);pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:.8em;color:var(--cream);font:300 .86em/1 var(--text);letter-spacing:.16em}
.idx:focus-visible{outline:1px solid var(--gold);outline-offset:.3em}
.idx span{transition:color .4s var(--std)}
.idx .dq{position:relative;display:grid;grid-template-columns:repeat(2,.32em);gap:.32em;place-content:center;width:2.9em;height:2.9em;border:1px solid var(--gold);border-radius:50%;transition:background .6s var(--cin),gap .7s var(--cin),transform .8s var(--cin)}
.idx .dq b{width:.32em;height:.32em;border-radius:50%;background:var(--gold);transition:background .4s var(--std)}
.idx:hover .dq{background:var(--gold);gap:.55em;transform:rotate(90deg)}
.idx:hover .dq b{background:var(--night)}
.idx:hover span{color:var(--gold)}
.chap{position:fixed;left:1.6em;bottom:calc(var(--bar) + .95em);z-index:100;display:flex;align-items:center;gap:1.1em;font-size:var(--base)}
.chap__t{display:inline-flex;align-items:baseline;gap:.6em;font:italic 400 1.25em/1 var(--display);color:var(--cream);min-width:9em;text-shadow:0 0 .8em rgba(0,0,0,.6)}
.chap__t b{font:300 .62em/1 var(--text);font-style:normal;letter-spacing:.14em;color:var(--gold)}
.chap__t.sw{animation:swap .9s var(--cin)}
@keyframes swap{from{opacity:0;transform:translateY(.7em)}to{opacity:1;transform:none}}
.chap__d{display:flex;align-items:center;gap:.45em}
.chap__d a{position:relative;display:block;width:.42em;height:.42em;border-radius:1em;background:rgba(243,232,210,.35);transition:width .9s var(--cin),background .4s var(--std),transform .5s var(--cin)}
.chap__d a::after{content:"";position:absolute;inset:-.7em -.2em}
.chap__d a:hover{background:var(--gold);transform:scale(1.5)}
.chap__d a[aria-current="true"]{width:1.9em;background:var(--gold)}

/* índice de sección: círculo numerado + etiqueta + friso */
.sidx{position:absolute;z-index:3;left:var(--padx,6.5rem);right:var(--padx,6.5rem);top:calc(var(--bar) + 1.1rem);display:flex;align-items:center;gap:1.1rem;color:var(--gold);pointer-events:none}
.sidx__c{position:relative;flex:none;width:2.7rem;height:2.7rem;display:grid;place-items:center;font:300 1.05rem/1 var(--display);font-variant-numeric:lining-nums}
.sidx__c svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1;transform:rotate(-90deg)}
.sidx__l{display:flex;align-items:center;gap:.7rem;font:300 .88rem/1 var(--text);letter-spacing:.14em;color:var(--mute)}
.sidx__l i{width:.32rem;height:.32rem;border-radius:50%;background:var(--gold)}
.sidx__f{flex:1;max-width:min(24rem,calc(50cqw - 9rem - var(--padx,6.5rem)));height:.7rem;opacity:.34;-webkit-mask-image:linear-gradient(90deg,#000,#0000);mask-image:linear-gradient(90deg,#000,#0000)}
.js .sidx__c circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--out)}
.js .sidx__c b,.js .sidx__l{font-weight:inherit;opacity:0;transform:translateY(.45rem);transition:opacity .4s var(--out),transform .4s var(--out)}
.js .sidx__f{clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--out)}
.js .sidx.in .sidx__c circle{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--cin) calc(var(--lead) + 100ms)}
.js .sidx.in .sidx__c b{opacity:1;transform:none;transition:opacity 1.4s var(--cin) calc(var(--lead) + 700ms),transform 1.6s var(--cin) calc(var(--lead) + 700ms)}
.js .sidx.in .sidx__l{opacity:1;transform:none;transition:opacity 1.4s var(--cin) calc(var(--lead) + 900ms),transform 1.6s var(--cin) calc(var(--lead) + 900ms)}
.js .sidx.in .sidx__f{clip-path:inset(0 0 0 0);transition:clip-path 2.6s var(--cin) calc(var(--lead) + 500ms)}
.vis .sidx{left:27rem}
.sec:not(.cover):not(.close){padding-top:7.4rem}

/* menú a pantalla completa */
.menu{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:1fr minmax(0,26em);gap:4em;align-items:center;padding:6.5em 7em 4em;font-size:var(--base);background:var(--night);color:var(--cream);visibility:hidden;clip-path:circle(0 at var(--bx,92%) var(--by,6%));transition:clip-path 1.2s cubic-bezier(.87,0,.13,1),visibility 0s 1.2s}
.menu.open{visibility:visible;clip-path:circle(160% at var(--bx,92%) var(--by,6%));transition:clip-path 1.5s cubic-bezier(.87,0,.13,1),visibility 0s}
.menu::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 20% 30%,rgba(214,182,126,.09),#0000 70%),radial-gradient(50% 60% at 90% 90%,rgba(229,121,59,.08),#0000 70%)}
.menu__n{position:relative;display:grid;gap:.1em}
.m-i{display:flex;align-items:baseline;gap:1.2em;text-decoration:none;color:var(--cream);overflow:hidden;padding:.04em 0;transition:opacity .5s var(--std),color .4s var(--std)}
.m-i b{font:300 .85em/1 var(--text);letter-spacing:.14em;color:var(--gold);min-width:2em;font-variant-numeric:tabular-nums;transform:translateY(110%);transition:transform .9s var(--cin)}
.m-i span{display:block;font:300 min(4.2em,7.6svh)/1.08 var(--display);transform:translateY(110%);transition:transform 1s var(--cin),translate .8s var(--cin)}
.menu.open .m-i b,.menu.open .m-i span{transform:none;transition-delay:calc(.45s + var(--i) * 55ms)}
.menu__n:hover .m-i{opacity:.3}
.menu__n .m-i:hover,.menu__n .m-i:focus-visible{opacity:1;color:var(--gold)}
.m-i:hover span,.m-i:focus-visible span{translate:1rem 0;transition-delay:0s}
.m-i[aria-current="true"] span{font-style:italic}
.menu__pv{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);background:#000;opacity:0;transform:translateY(2em);transition:opacity .8s var(--std),transform 1.4s var(--cin)}
.menu.open .menu__pv{opacity:1;transform:none;transition-delay:.7s}
.menu__pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.18;filter:saturate(.85) brightness(.8);transition:opacity .9s var(--std),scale 2.2s var(--cin)}
.menu__pv img.on{opacity:1;scale:1}
.menu__pv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 60%,rgba(12,7,6,.7))}

/* cursor propio */
.cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;opacity:0;font:300 .78em/1 var(--text);letter-spacing:.12em;color:var(--night);transition:width .7s var(--cin),height .7s var(--cin),margin .7s var(--cin),background .4s var(--std),opacity .5s var(--std),border-color .4s var(--std)}
.cursor.on{opacity:1}
.cursor.link{width:4.4em;height:4.4em;margin:-2.2em 0 0 -2.2em;background:rgba(214,182,126,.12)}
.cursor.lab{width:7em;height:7em;margin:-3.5em 0 0 -3.5em;background:var(--gold);border-color:var(--gold)}
.cursor span{opacity:0;transition:opacity .4s var(--std)}
.cursor.lab span{opacity:1;transition-delay:.15s}
.cursor.down{transform:scale(.85)}
@media (hover:none){.cursor{display:none}}

@container deck (max-width:72rem){
  .sec{--padx:3rem}
  .vis .sidx{left:17rem}
}
@container deck (max-width:52rem){
  .sec{--padx:1.6rem}
  .vis .sidx{left:5.4rem}
  .sidx__f{display:none}
}
@media (max-width:700px){
  .chap__t{min-width:0}
  .chap__d{display:none}
  .idx span{display:none}
  .menu{grid-template-columns:1fr;padding:6em 2em 3em}
  .menu__pv{display:none}
  .m-i span{font-size:min(3.2em,6.6svh)}
}


/* ==========================================================
   Cintas de película entre diapositivas
   ========================================================== */
html{scrollbar-gutter:stable}
html.lock{overflow:hidden}
.deck{overflow-x:clip}
.fs{--fw:10.15rem;--fh:6.8rem;--fb:1.5rem;position:relative;z-index:6;height:calc(var(--fh) + var(--fb) * 2 + 4.2rem);background:linear-gradient(180deg,var(--a,var(--night)),var(--b,var(--night)));pointer-events:none}
.fs__rot{position:absolute;left:-7%;right:-7%;top:50%;height:calc(var(--fh) + var(--fb) * 2);margin-top:calc((var(--fh) + var(--fb) * 2) / -2);pointer-events:auto;
  transform:rotate(calc(var(--rot) + var(--py,0) * .5deg));transition:transform 1.2s var(--cin);filter:drop-shadow(0 1.1rem 1.4rem rgba(0,0,0,.55))}
.fs__r{position:absolute;inset:0}
.fs__s{position:absolute;inset:0;overflow:hidden;background:#080403;
  box-shadow:inset 0 0 0 1px rgba(214,182,126,.14),inset 0 .12rem 0 rgba(255,255,255,.07),inset 0 -.12rem 0 rgba(255,255,255,.04)}
.fs__t{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;width:max-content;padding-inline:1.2rem;
  counter-reset:f var(--c0,1);transform:translate3d(var(--tx,-8rem),0,0);translate:calc(var(--px,0) * var(--dir,1) * -2.4rem) 0;transition:translate 1.3s var(--cin)}
/* perforaciones: se mueven con la película */
.fs__t::before,.fs__t::after{content:"";position:absolute;left:0;right:0;height:var(--fb);background:rgba(243,232,210,.8);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Crect x='6.8' y='2.3' width='12.4' height='9.4' rx='2.4'/%3E%3C/svg%3E") 0 50%/1.8rem .9rem repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14'%3E%3Crect x='6.8' y='2.3' width='12.4' height='9.4' rx='2.4'/%3E%3C/svg%3E") 0 50%/1.8rem .9rem repeat-x;
  opacity:.82}
.fs__t::before{top:-.12rem}
.fs__t::after{bottom:-.12rem}
.fr{counter-increment:f;position:relative;flex:none;width:var(--fw);height:var(--fh);margin-right:.8rem;transition:transform .9s var(--cin)}
.fr::before,.fr::after{position:absolute;left:.1rem;font:400 .58rem/1 var(--text);letter-spacing:.16em;color:rgba(233,196,106,.78);white-space:nowrap;pointer-events:none}
.fr::before{content:counter(f,decimal-leading-zero) "  \25B8";top:calc(var(--fb) * -.5 - .15rem)}
.fr::after{content:counter(f) "A";bottom:calc(var(--fb) * -.5 - .15rem)}
.fr:nth-child(3n)::after{content:"SUPERSTICIÓN  \25B8  " counter(f) "A"}
.sp{position:absolute;inset:0;display:block;background:#000 center/cover no-repeat;overflow:hidden;
  filter:sepia(.3) saturate(.84) contrast(1.06) brightness(.78);transition:filter .8s var(--std),transform 1.4s var(--cin)}
.fr:hover{transform:translateY(-.3rem) scale(1.07);z-index:3}
.fr:hover .sp{filter:none}
.fr:hover + .fr,.fr:has(+ .fr:hover){transform:translateY(-.12rem) scale(1.02)}
.fs__t:hover .fr:not(:hover) .sp{filter:sepia(.35) saturate(.7) contrast(1.04) brightness(.5)}
/* luz de proyector que sigue al cursor dentro de la cinta */
.fs__s::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--lo,0);transition:opacity .7s var(--std);
  background:radial-gradient(16rem 11rem at var(--lx,50%) 50%,rgba(255,214,150,.22),#0000 72%),linear-gradient(180deg,rgba(255,255,255,.06),#0000 22%,#0000 78%,rgba(255,255,255,.04))}
.s01{background-image:url(assets/strip/s01.jpg)}
.s02{background-image:url(assets/strip/s02.jpg)}
.s03{background-image:url(assets/strip/s03.jpg)}
.s04{background-image:url(assets/strip/s04.jpg)}
.s05{background-image:url(assets/strip/s05.jpg)}
.s06{background-image:url(assets/strip/s06.jpg)}
.s07{background-image:url(assets/strip/s07.jpg)}
.s08{background-image:url(assets/strip/s08.jpg)}
.s09{background-image:url(assets/strip/s09.jpg)}
.s10{background-image:url(assets/strip/s10.jpg)}
.s11{background-image:url(assets/strip/s11.jpg)}
.s12{background-image:url(assets/strip/s12.jpg)}
.s13{background-image:url(assets/strip/s13.jpg)}
.s14{background-image:url(assets/strip/s14.jpg)}
.s15{background-image:url(assets/strip/s15.jpg)}
.s16{background-image:url(assets/strip/s16.jpg)}
.s17{background-image:url(assets/strip/s17.jpg)}
.s18{background-image:url(assets/strip/s18.jpg)}
.s19{background-image:url(assets/strip/s19.jpg)}
.s20{background-image:url(assets/strip/s20.jpg)}
.s21{background-image:url(assets/strip/s21.jpg)}
.s22{background-image:url(assets/strip/s22.jpg)}

/* ==========================================================
   Inclinación 3D con brillo (póster, fotos del tratamiento y de la nota)
   ========================================================== */
[data-tilt]{position:relative;transform:perspective(72rem) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1s var(--cin);will-change:transform}
[data-tilt]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,226,170,.3),#0000 58%);opacity:var(--go,0);transition:opacity .6s var(--std)}

/* ==========================================================
   Póster (work in progress)
   ========================================================== */
.pst__g{display:grid;grid-template-columns:auto minmax(0,26rem);gap:7rem;align-items:center;justify-content:center}
.pst__p{padding:.7rem;background:#EDE3CC;box-shadow:0 2.6rem 5.5rem rgba(0,0,0,.65),0 0 0 1px rgba(214,182,126,.3)}
.pst__p img{height:min(40rem,64svh);width:auto;max-width:100%;filter:contrast(1.02)}
.pst__p::after{mix-blend-mode:soft-light}
.pst__t{display:grid;gap:1.7rem;justify-items:start}
.pst__tag{display:inline-flex;align-items:center;gap:.9rem;font:italic 400 1.6rem/1 var(--display);color:var(--gold)}
.pst__tag i{width:.55rem;height:.55rem;border-radius:50%;background:var(--c3);box-shadow:0 0 .9rem var(--c3);animation:wip 2.4s ease-in-out infinite}
@keyframes wip{50%{opacity:.35;transform:scale(.7)}}
.pst .lede{max-width:25rem}

/* ==========================================================
   Tratamiento: páginas de revista (imagen + texto en un solo diseño)
   ========================================================== */
/* collage de fotos */
/* páginas largas: titular, fila de fotos y texto a dos columnas */

/* ==========================================================
   Botón y ventana de la nota de dirección
   ========================================================== */
.note-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:1.1rem;margin-top:1.4rem;color:var(--cream)}
.note-btn:focus-visible{outline:.14rem solid var(--gold);outline-offset:.5rem}
.note-btn__i{flex:none;width:3.1rem;height:3.1rem;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);transition:background .6s var(--cin),color .4s var(--std),transform .9s var(--cin)}
.note-btn__i svg{width:1.45rem;height:1.45rem}
.note-btn__t{position:relative;padding-bottom:.4rem;font:italic 400 1.4rem/1 var(--display);transition:letter-spacing 1s var(--cin),color .4s var(--std)}
.note-btn__t::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(.26);transform-origin:left;transition:transform 1.1s var(--cin)}
.note-btn:hover .note-btn__i,.note-btn:focus-visible .note-btn__i{background:var(--gold);color:var(--night);transform:rotate(-8deg) scale(1.07)}
.note-btn:hover .note-btn__t,.note-btn:focus-visible .note-btn__t{color:var(--gold);letter-spacing:.035em}
.note-btn:hover .note-btn__t::after,.note-btn:focus-visible .note-btn__t::after{transform:none}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-aspect-ratio:1/1){
  .cover__frame{height:min(calc(100cqw / 1.4),50svh)}
}
@container deck (max-width:72rem){
  .fs{--fw:9.1rem;--fh:6.1rem}
  .pst__g{gap:4rem}
}
@container deck (max-width:52rem){
  .fs{--fw:8.1rem;--fh:5.4rem;--fb:1.35rem}
  .pst__g{grid-template-columns:1fr;justify-items:center;gap:2.6rem}
  .pst__p img{height:min(34rem,58svh)}
  .pst__t{justify-items:center;text-align:center}
  .note-btn__t{font-size:1.25rem}
}
@media (hover:none){
  .fs__t{translate:none}
  .fr:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .fs__rot,.fs__t,[data-tilt]{transition:none!important}
  .pst__tag i{animation:none!important}
}

/* degradado inferior: el texto no choca con los controles fijos en las diapositivas largas */
.cine--b::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:7rem;pointer-events:none;background:linear-gradient(0deg,rgba(8,4,3,.78),rgba(8,4,3,.3) 55%,#0000)}

/* dirección: texto de la sinopsis + nota, todo visible en una pantalla */
.vis__c{gap:1.5rem}
.vis__p{gap:.85rem;font-size:1.08rem;line-height:1.6}
.vis__q{gap:1.8rem;margin-top:.2rem;padding-top:1.4rem}
.vis__q blockquote{font-size:1.9rem}
.vis__q .note-btn{margin-top:1.1rem}
/* dirección: composición más ancha para que quepa en una sola pantalla */
.vis__c{max-width:57rem;width:calc(100% - 27rem)}
.vis .h2{font-size:3.9rem}
.vis__p{display:block;columns:2;column-gap:2.8rem;max-width:none;font-size:1.04rem}
.vis__p p{break-inside:avoid;margin:0 0 .85rem}
@container deck (max-width:72rem){
  .vis__c{width:calc(100% - 17rem);max-width:none}
  .vis .h2{font-size:3.5rem}
  .vis__p{columns:1}
}
@container deck (max-width:52rem){
  .vis__c{width:calc(100% - 5.4rem)}
  .vis .h2{font-size:3rem}
}
@container deck (max-width:52rem){
  .cover__frame{height:58svh}
  .sec.cover{align-content:start}
}


/* ==========================================================
   SIN COSTURAS: el fondo es continuo, las cintas lo atraviesan
   ========================================================== */
body{background:var(--bgc,#0C0706)}
.sec{background:transparent;overflow-x:clip;overflow-y:visible}
.sec.cover{overflow:hidden}
/* las luces y fotos de fondo se desvanecen antes de su borde: no queda línea entre diapositivas */
.sec::before{-webkit-mask-image:linear-gradient(180deg,#0000,#000 24%,#000 76%,#0000);mask-image:linear-gradient(180deg,#0000,#000 24%,#000 76%,#0000)}
.bgph{-webkit-mask:radial-gradient(ellipse 80% 80% at var(--mx,60%) 50%,#000 10%,#0000 78%),linear-gradient(180deg,#0000,#000 26%,#000 74%,#0000);-webkit-mask-composite:source-in;
  mask:radial-gradient(ellipse 80% 80% at var(--mx,60%) 50%,#000 10%,#0000 78%),linear-gradient(180deg,#0000,#000 26%,#000 74%,#0000);mask-composite:intersect}
.sec.cover .bgph,.cover__frame .bgph{-webkit-mask:none;mask:none}

/* cintas: sin fondo propio, sin filetes; flotan sobre la unión de dos diapositivas */
.fs{background:none;height:calc(var(--fh) + var(--fb) * 2);margin-block:-3.4rem}
.fs__s{box-shadow:none}
.fs__rot{filter:drop-shadow(0 1.2rem 1.6rem rgba(0,0,0,.45))}
.fs__r{will-change:transform,opacity}

/* ==========================================================
   GSAP: lo que anima el scroll queda en su estado final por CSS
   ========================================================== */
.js [data-r].g{opacity:1;transform:none;filter:none;clip-path:none;transition:none}
.js [data-r].g .zi{--rs:1;transition:none}
.js [data-split].g .c{opacity:1;transform:none;transition:none}
.js [data-split].g .w{overflow:clip;padding:.16em 0 .2em;margin:-.16em 0 -.2em;vertical-align:top}
.js.gs .sec:not(.cover) .wrap{opacity:1;transform:none}

/* ==========================================================
   Diapositiva-resumen del tratamiento
   ========================================================== */
.trat{align-content:center}
.trat__w{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:5rem;align-items:center}
.trat__t{display:grid;gap:1.35rem;align-content:center}
.trat .h2{font-size:3.9rem;max-width:34rem}
.trat__p{display:grid;gap:.9rem;max-width:36rem}
.trat__p p{font-size:1.05rem;line-height:1.66;color:var(--mute)}
.trat__p em{font-style:italic;font-weight:500;font-family:var(--display);font-size:1.12em;letter-spacing:.02em}
.trat__e{max-width:32rem;padding-left:1.3rem;border-left:2px solid var(--c3);font:italic 400 1.7rem/1.24 var(--display);color:var(--cream);text-wrap:balance}
.trat .note-btn{margin-top:.4rem}
.trat__c{position:relative;height:min(34rem,calc(100svh - 14rem));min-height:24rem}
.tc{position:absolute;margin:0}
.tc__i{position:relative;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 1.6rem 3rem rgba(0,0,0,.5)}
.tc__i img{width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.05) brightness(.88);transition:filter 1s var(--std)}
.tc__t:hover img{filter:none}
.tc--a{left:0;top:3rem;width:44%;z-index:2}.tc--a .tc__i{aspect-ratio:4/5.3}
.tc--b{right:0;top:0;width:60%;z-index:1}.tc--b .tc__i{aspect-ratio:16/10}
.tc--c{right:5%;bottom:0;width:38%;z-index:3}.tc--c .tc__i{aspect-ratio:4/5}

/* ==========================================================
   LIBROS (tratamiento y nota de dirección)
   Fotolibro: páginas dobles, fotos a sangre, imágenes que entran
   entre los párrafos y citas que se montan sobre ellas.
   ========================================================== */
.bk{--paper:#EEE6D3;--paper2:#E8DDC3;--ink:#1d1411;--ink2:#4a3a30;--acc:#8a5d34;--rule:rgba(21,13,10,.2);--gut:rgba(70,45,20,.2);
  position:fixed;inset:0;z-index:125;display:grid;place-items:center;visibility:hidden;transition:visibility 0s 1.3s}
.bk--dark{--paper:#150D0A;--paper2:#1C110D;--ink:#F3E8D2;--ink2:rgba(243,232,210,.78);--acc:#D6B67E;--rule:rgba(214,182,126,.3);--gut:rgba(0,0,0,.55)}
.bk.open{visibility:visible;transition:visibility 0s}
.bk__bd{position:absolute;inset:0;background:rgba(8,4,3,.84);-webkit-backdrop-filter:blur(.45rem);backdrop-filter:blur(.45rem);opacity:0;transition:opacity .9s var(--std)}
.bk.open .bk__bd{opacity:1}
.bk__w{position:relative;width:min(95vw,96rem);height:min(94svh,74rem);clip-path:circle(0 at var(--bx,50%) var(--by,50%));transition:clip-path 1s cubic-bezier(.87,0,.13,1);box-shadow:0 3rem 8rem rgba(0,0,0,.7)}
.bk.open .bk__w{clip-path:circle(150% at var(--bx,50%) var(--by,50%));transition-duration:1.4s}
.bk__s{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);scrollbar-width:thin;scrollbar-color:var(--acc) var(--paper);outline:none}
.bk__pg{position:absolute;z-index:6;left:0;top:0;width:100%;height:3px;background:var(--acc);transform:scaleX(var(--bp,0));transform-origin:left;pointer-events:none}
.bk__x{all:unset;box-sizing:border-box;position:absolute;z-index:7;top:1.1rem;right:1.4rem;width:2.9rem;height:2.9rem;display:grid;place-items:center;border-radius:50%;cursor:pointer;color:#F3E8D2;background:#150D0A;box-shadow:0 0 0 1px rgba(214,182,126,.5);transition:transform .8s var(--cin),background .4s var(--std)}
.bk--dark .bk__x{background:#D6B67E;color:#150D0A;box-shadow:none}
.bk__x svg{width:1.3rem;height:1.3rem}
.bk__x:hover{transform:rotate(90deg) scale(1.08);background:var(--acc);color:#fff}
.bk__x:focus-visible{outline:.14rem solid var(--acc);outline-offset:.25rem}

/* doble página: dos hojas y un pliegue con sombra */
.spx{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:50rem;isolation:isolate;background:var(--paper)}
.spx::after{content:"";position:absolute;z-index:4;top:0;bottom:0;left:calc(50% - 2.8rem);width:5.6rem;pointer-events:none;background:linear-gradient(90deg,#0000,var(--gut) 48%,rgba(255,255,255,.12) 50%,var(--gut) 52%,#0000)}
.spx+.spx{box-shadow:inset 0 1px 0 var(--rule)}
.pgx{position:relative;display:flow-root;padding:3.7rem 4rem 5rem;min-width:0}
.pgx--b{background:var(--paper2)}
.pgx--ph{padding:0;min-height:30rem;overflow:hidden}
.folio{position:absolute;bottom:1.7rem;font:400 .8rem/1 var(--text);letter-spacing:.2em;color:var(--ink2);opacity:.8}
.pgx:nth-child(odd) .folio{left:4rem}.pgx:nth-child(even) .folio{right:4rem}
.pgx--ph .folio{color:#fff;text-shadow:0 0 .6rem rgba(0,0,0,.6)}

/* doble página con una sola fotografía */
.spx--full{grid-template-columns:1fr;min-height:46rem;align-items:end;color:#F3E8D2;background:#0C0706}
.spx--full::after{display:none}
.spx--full .fg{position:absolute;inset:0;margin:0}
.spx--full::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(8,4,3,.86),rgba(8,4,3,.2) 55%,rgba(8,4,3,.1))}
.over{position:relative;z-index:2;padding:4.4rem 5.4rem;max-width:56rem}
.over__k{font:italic 400 1.5rem/1.1 var(--display);color:#E9C46A;margin-bottom:.7rem}
.over__c{font:400 2.5rem/1.14 var(--display);letter-spacing:-.005em;text-wrap:balance}
.over .pq--over+.over__c{margin-top:1.4rem;font:400 .85rem/1 var(--text);letter-spacing:.22em;color:rgba(243,232,210,.8)}

/* figuras */
.fg{position:relative;margin:0}
.fg__i{position:relative;overflow:hidden;background:#150D0A;aspect-ratio:var(--ar,4/5);box-shadow:0 1.1rem 2.4rem rgba(0,0,0,.25)}
.fg__i img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;filter:saturate(.9) contrast(1.04) brightness(.97);transition:filter 1s var(--std)}
.fg__t:hover img{filter:none}
.fg figcaption{margin-top:.6rem;font:italic 400 .98rem/1.3 var(--display);color:var(--ink2)}
.fg--fr,.fg--fl{width:47%;margin-block:.45rem 1.3rem}
.fg--fr{float:right;margin-left:2rem;margin-right:-4rem}
.fg--fl{float:left;margin-right:2rem;margin-left:-4rem}
.fg--w{width:calc(100% + 8rem);margin:1.8rem -4rem}
.fg--top{width:calc(100% + 8rem);margin:-3.7rem -4rem 2rem}
.fg--top .fg__i,.fg--w .fg__i{box-shadow:none}
.fg--fill,.fg--full{position:absolute;inset:0;width:100%;margin:0}
.fg--fill .fg__i,.fg--full .fg__i{height:100%;aspect-ratio:auto;box-shadow:none}
.fg--fill .fg__t,.fg--full .fg__t{height:100%}
.pgx--ph .fg--fill{height:100%}

/* tipografía del libro */
.by{display:flex;align-items:center;gap:.8rem;font:400 .8rem/1 var(--text);letter-spacing:.3em;color:var(--acc)}
.by i{width:.42rem;height:.42rem;border:1px solid var(--acc);transform:rotate(45deg)}
.cv{margin:2.2rem 0 0;font:500 5.6rem/.94 var(--display);letter-spacing:-.014em;text-wrap:balance}
.cv--s{font-size:4.6rem;margin:.6rem 0 1.6rem}
.cv__s{margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--rule);font:italic 400 1.45rem/1.2 var(--display);color:var(--acc);max-width:24rem}
.cv__l{margin-top:2.2rem;max-width:26rem;font:italic 400 1.55rem/1.4 var(--display);color:var(--ink2)}
.cv__d{margin-top:2.6rem}
.cv__r{width:11rem;aspect-ratio:1;padding:.5rem;border:1px solid var(--rule);border-radius:50%}
.cv__ri{width:100%;height:100%;border-radius:50%;overflow:hidden}
.cv__ri img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) contrast(1.05)}
.pgx--cv{display:flex;flex-direction:column;justify-content:center;padding-block:4.4rem}
.pgx--div{justify-content:center}
.hd-w{display:grid;gap:.5rem;margin-bottom:1.5rem}
.hd-w::before{content:"";width:3rem;height:2px;background:var(--acc);margin-bottom:.8rem}
.kk{font:italic 400 1.45rem/1.1 var(--display);color:var(--acc)}
.hd{font:500 4.2rem/.96 var(--display);letter-spacing:-.012em;text-wrap:balance}
.pgx__b p{font:400 1.04rem/1.78 var(--text);color:var(--ink);hyphens:auto}
.bk--dark .pgx__b p{font-weight:300;color:var(--ink2)}
.pgx__b p+p{margin-top:1.1rem}
.pgx__b .fg+p,.pgx__b .hd-w+p{margin-top:0}
.pgx__b p.dc::first-letter{font:600 5.4rem/.78 var(--display);float:left;margin:.3rem .65rem 0 -.1rem;color:var(--acc)}
.pgx__b p.it-p{font:italic 400 1.5rem/1.45 var(--display);color:var(--acc)}
.pq{font:italic 400 2.5rem/1.14 var(--display);color:var(--acc);text-wrap:balance;margin:1.9rem 0;padding-top:1.1rem;border-top:1px solid var(--rule)}
.pq--lap{position:relative;z-index:2;margin:2.4rem 0 0}
.pq--ov{position:absolute;z-index:3;left:2.4rem;right:2.4rem;bottom:3.6rem;margin:0;padding:1.5rem 1.8rem 1.6rem;background:rgba(12,7,6,.82);border:1px solid rgba(214,182,126,.35);color:#F3E8D2;font-size:2.15rem;-webkit-backdrop-filter:blur(.3rem);backdrop-filter:blur(.3rem)}
.pq--over{color:#F3E8D2;border:0;padding:0;margin:0;font-size:3.1rem;line-height:1.1}
.sig{margin-top:2rem;font:italic 400 2.3rem/1 var(--display);color:var(--acc)}
.sig small{display:block;margin-top:.6rem;font:400 .8rem/1 var(--text);font-style:normal;letter-spacing:.22em;color:var(--ink2)}

/* mosaico de fotos */
.mos{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:9.6rem;gap:.7rem;margin-block:1.4rem}
.mos__c .fg,.mos__c .fg__t,.mos__c .fg__i{height:100%}
.mos__c .fg__i{aspect-ratio:auto}
.mos__c0{grid-column:1/4;grid-row:span 3}.mos__c1{grid-column:4/7;grid-row:span 2}.mos__c2{grid-column:4/7;grid-row:span 2}.mos__c3{grid-column:1/4;grid-row:span 2}
.pgx--mos{display:flex;align-items:center;padding:2.4rem}
.pgx--mos .mos{width:100%;grid-auto-rows:8.6rem;margin:0}
.bk:not(.bk--dark) .mos{grid-template-columns:repeat(3,1fr);grid-auto-rows:11rem}
.bk:not(.bk--dark) .mos__c0{grid-column:1/3;grid-row:span 2}.bk:not(.bk--dark) .mos__c1{grid-column:3;grid-row:span 1}.bk:not(.bk--dark) .mos__c2{grid-column:3;grid-row:span 1}

/* ---------- libros en pantallas angostas ---------- */
@media (max-width:1000px){
  .bk__w{width:100vw;height:100svh}
  .spx{grid-template-columns:1fr;min-height:0}
  .spx::after{display:none}
  .pgx{padding:2.6rem 1.7rem 4rem}
  .pgx--ph{min-height:30rem}
  .fg--fr,.fg--fl{float:none;width:100%;margin:1.5rem 0}
  .fg--w,.fg--top{width:calc(100% + 3.4rem);margin-inline:-1.7rem}
  .fg--top{margin-top:-2.6rem}
  .fg--w{margin-block:1.5rem}
  .cv{font-size:3.6rem}.cv--s{font-size:3.2rem}.hd{font-size:3.1rem}.pq{font-size:1.9rem}
  .over{padding:2.6rem 1.7rem}.over__c{font-size:1.9rem}.pq--over{font-size:2rem}
  .spx--full{min-height:34rem}
  .pq--ov{left:1rem;right:1rem;bottom:1.2rem;font-size:1.5rem;padding:1rem 1.1rem}
  .folio{display:none}
  .pgx--mos{padding:1.7rem}
  .bk__x{top:.8rem;right:.8rem}
  .pgx--cv{padding-block:3rem}
  .pgx--cv + .pgx--ph{min-height:24rem}
}
@media (max-width:1000px){.pgx--b{background:var(--paper)}.spx .pgx+.pgx{box-shadow:inset 0 1px 0 var(--rule)}}

/* ---------- resumen del tratamiento en pantallas angostas ---------- */
@container deck (max-width:62rem){
  .trat__w{grid-template-columns:1fr;gap:3rem}
  .trat__c{height:30rem}
  .trat .h2{font-size:3.2rem}
}
@media (prefers-reduced-motion:reduce){
  .bk__w{transition:none!important}
}

/* aire para la cinta: ni tapa el índice de la diapositiva siguiente ni el texto de la anterior */
.fs{margin-block:-3rem -.4rem}
.sec:not(.cover):not(.close){padding-top:8.2rem;padding-bottom:7rem}
.sidx{top:calc(var(--bar) + 3.2rem)}

/* páginas de texto sin foto a sangre arriba: el contenido se centra y no queda un hueco al pie */
.pgx--t:not(:has(> .pgx__b > .fg--top)){display:flex;flex-direction:column;justify-content:center}
.vis__band{-webkit-mask-image:linear-gradient(180deg,#0000,#000 16%,#000 84%,#0000);mask-image:linear-gradient(180deg,#0000,#000 16%,#000 84%,#0000)}
/* las luces que desbordan cada diapositiva no deben alargar el documento */
.deck{overflow:clip}

/* legibilidad: las cintas pasan por detrás del texto, nunca encima */
.fs{z-index:1}
.sec:not(.cover):not(.close){padding-bottom:8rem}

/* sinopsis con el texto largo: cabe sin invadir la cinta */
.sin__t p{font-size:1.04rem;line-height:1.62;max-width:38rem}
.sin__t p+p{margin-top:.85rem}
.sin__t .h2{font-size:clamp(2.6rem,4.2vw,4.2rem);margin-bottom:1.6rem}