:root{
  --bg:#EDEEF1; --bg2:#E2E4E9; --panel:#FFFFFF; --ink:#16131B; --muted:#5E5B67; --line:rgba(22,19,27,.14);
  --gold:#A57A10; --gold-soft:rgba(165,122,16,.14); --ok:#2F7A4F;
  --stage:#120F16; --stage-ink:#F5EFE3;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --read:"Newsreader", Georgia, "Times New Roman", serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141118; --bg2:#1C1822; --panel:#221D29; --ink:#F2ECE1; --muted:#A49D95; --line:rgba(242,236,225,.12);
    --gold:#E4B848; --gold-soft:rgba(228,184,72,.14); --ok:#6CC08F;
  }
}
:root[data-theme="dark"]{
  --bg:#141118; --bg2:#1C1822; --panel:#221D29; --ink:#F2ECE1; --muted:#A49D95; --line:rgba(242,236,225,.12);
  --gold:#E4B848; --gold-soft:rgba(228,184,72,.14); --ok:#6CC08F;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; font-variation-settings:"wdth" 100}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:3px}
.wrap{max-width:1320px; margin:0 auto; padding:0 clamp(18px,4vw,48px)}
.condensed{font-stretch:62%; font-variation-settings:"wdth" 62}

/* ---------- NAV ---------- */
nav.top{position:fixed; left:0; right:0; top:0; padding-top:env(safe-area-inset-top,0px); z-index:40; transition:background .3s, border-color .3s; border-bottom:1px solid transparent; color:var(--stage-ink)}
nav.top.solid{background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-color:var(--line); color:var(--ink)}
nav.top .wrap{display:flex; align-items:center; gap:22px; height:62px}
nav.top .mark{font-weight:900; font-size:22px; letter-spacing:-.01em; text-decoration:none; font-variation-settings:"wdth" 62; margin-right:auto}
nav.top .links{display:flex; gap:20px; overflow-x:auto; scrollbar-width:none}
nav.top .links::-webkit-scrollbar{display:none}
nav.top .links a{text-decoration:none; font-size:15px; opacity:.78; white-space:nowrap}
nav.top .links a:hover{opacity:1}
.editbtn{display:none; border:1px solid currentColor; background:transparent; border-radius:999px; padding:6px 14px; font-size:14px; cursor:pointer; white-space:nowrap}
.editbtn.on{background:var(--gold); color:#1a1408; border-color:var(--gold)}
body.can-edit .editbtn{display:inline-block}
@media (max-width:860px){ nav.top .links{display:none} }

/* ---------- HERO ----------
   Foto a TODA PANTALLA y contenido abajo, como siempre. Lo que se mueve es la
   FOTO: un acercamiento la desplaza a la derecha hasta sacar la cara de debajo
   del título. Las tres variables de abajo son las que se tocan; `verify-hero-cara.mjs`
   calcula dónde cae la cara y falla si el texto la pisa. */
.hero{--zoom:1.45; --panx:20.8vw; --pany:2.6vh;
  position:relative; height:100svh; min-height:560px; background:var(--stage); color:var(--stage-ink);
  overflow:hidden; isolation:isolate}
.hero .photo{position:absolute; inset:0; z-index:-2}
.hero .photo img{width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  transform:translate(var(--panx),var(--pany)) scale(var(--zoom)); animation:drift 22s ease-out both}
@keyframes drift{
  from{transform:translate(var(--panx),var(--pany)) scale(calc(var(--zoom) * 1.05))}
  to{transform:translate(var(--panx),var(--pany)) scale(var(--zoom))}
}
.hero .fallback{position:absolute; inset:0; z-index:-3;
  background:
    conic-gradient(from 200deg at 88% -10%, transparent 0deg, rgba(255,226,170,.18) 12deg, rgba(255,226,170,.05) 24deg, transparent 32deg),
    radial-gradient(120% 90% at 70% 10%, #3a2a3c 0%, #1b1520 45%, #0f0c12 100%)}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, var(--stage) 0%, rgba(18,15,22,.9) 26%, rgba(18,15,22,.3) 58%, rgba(18,15,22,.52) 100%),
             linear-gradient(to right, rgba(18,15,22,.72) 0%, rgba(18,15,22,.3) 38%, transparent 60%)}
.hero .inner{position:absolute; left:0; right:0; bottom:0; padding-bottom:clamp(22px,4.5vh,48px)}
.hero h1{margin:0; font-weight:900; text-transform:uppercase; line-height:.8; letter-spacing:-.02em; font-variation-settings:"wdth" 62}
.hero h1 span{display:block; font-size:clamp(52px,9.4vw,150px)}
.hero h1 span:first-child{font-weight:300; font-size:clamp(26px,4.3vw,68px); letter-spacing:.01em; margin-bottom:.05em; font-variation-settings:"wdth" 125}
.hero .lede{max-width:42ch; font-size:clamp(15px,1.25vw,17.5px); color:#E3D9C8; margin:16px 0 0}
.hero .facts{display:flex; flex-wrap:wrap; gap:12px 30px; margin-top:20px}
.hero .facts div{font-size:13px; color:#C8BCA8; max-width:14ch; line-height:1.3}
.hero .facts b{display:block; font-size:clamp(26px,2.7vw,38px); line-height:1; color:#F6E2AE; font-weight:800; font-variation-settings:"wdth" 62; margin-bottom:3px}
.hero .cta{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}
.hero .creditofoto{margin:16px 0 0; font-size:11.5px; color:rgba(245,239,227,.55)}
.hero .creditofoto a{color:rgba(245,239,227,.72)}
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:6px; padding:11px 20px; font-weight:700; font-size:15.5px; text-decoration:none; border:0; cursor:pointer}
.btn.primary{background:#F5EFE3; color:#16131B}
.btn.ghost{background:rgba(245,239,227,.16); color:#F5EFE3; backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(245,239,227,.26)}
@media (max-width:900px){
  /* En vertical la cara ya casi llena el encuadre: el margen para subirla es
     poco, así que lo que adelgaza es el TEXTO —tres cifras menos, un botón
     menos y sin el crédito en línea, que sigue entero en «Créditos de las
     imágenes» al pie—. Con el bloque corto, la cara cabe encima. */
  .hero{--zoom:1.18; --panx:10.5vw; --pany:-8.5vh}
  .hero::after{background:linear-gradient(to top, var(--stage) 0%, rgba(18,15,22,.93) 30%, rgba(18,15,22,.28) 62%, rgba(18,15,22,.45) 100%)}
  .hero .facts div:nth-child(n+3){display:none}
  .hero .cta .btn:nth-child(3){display:none}
  .hero .creditofoto{display:none}
  .hero .lede{font-size:14.5px; max-width:34ch; margin-top:12px}
  .hero .facts{margin-top:14px; gap:10px 24px}
  .hero .cta{margin-top:14px}
}
@media (prefers-reduced-motion: reduce){ .hero .photo img{animation:none} *{scroll-behavior:auto!important} }

/* ---------- IMAGE SLOTS (modo edición) ---------- */
.slot{position:relative}
.slot .up{display:none}
body.editing .slot .up{display:flex; position:absolute; inset:0; z-index:5; align-items:center; justify-content:center; flex-direction:column; gap:8px; background:rgba(18,15,22,.55); color:#fff; border:2px dashed rgba(255,255,255,.6); cursor:pointer; text-align:center; padding:10px; font-size:14px; font-weight:600; border-radius:inherit}
body.editing .slot.drag .up{background:rgba(228,184,72,.55); border-color:#fff}
.slot .up .look{color:#F6E2AE}
.slot .up .rm{font-size:13px; display:block; font-weight:500; text-decoration:underline; background:none; border:0; color:#fff; cursor:pointer; padding:2px}
body.editing .hero .up{inset:auto auto 50% 50%; transform:translate(-50%,-50%); width:min(420px,80%); height:160px; border-radius:12px}
.editbar{display:none; position:fixed; z-index:45; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--gold); color:#1a1408; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.35); max-width:92vw; text-align:center}
body.editing .editbar{display:block}

/* ---------- SECCIONES ---------- */
section.block{padding:clamp(64px,9vw,120px) 0}
section.block + section.block{border-top:1px solid var(--line)}
.head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px 48px; margin-bottom:36px}
.head h2{margin:0; font-weight:900; font-size:clamp(46px,7vw,96px); line-height:.86; letter-spacing:-.015em; font-variation-settings:"wdth" 62; text-transform:uppercase}
.head p{margin:0; color:var(--muted); max-width:52ch}

/* ---------- FILMOGRAFÍA: barra ---------- */
.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.seg{display:inline-flex; background:var(--bg2); border-radius:8px; padding:3px}
.seg button{border:0; background:transparent; padding:8px 14px; border-radius:6px; cursor:pointer; font-weight:600; font-size:15px; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12)}
.chip{background:transparent; border:1px solid var(--line); padding:7px 14px; border-radius:999px; cursor:pointer; font-size:15px}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.search{font:inherit; font-size:15px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 14px; min-width:min(100%,280px); margin-left:auto}
@media (max-width:700px){ .search{margin-left:0; width:100%; min-width:0} }
.status{display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center; margin:6px 0 26px; font-size:15px; color:var(--muted)}
.status strong{color:var(--ink)}
.meter{flex:1 1 200px; max-width:320px; height:6px; background:var(--bg2); border-radius:6px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:var(--ok); transition:width .5s}

/* ---------- PÓSTER (generado o subido) ---------- */
.poster{position:relative; aspect-ratio:2/3; border-radius:6px; overflow:hidden; background:#222; color:#fff}
.poster img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.gen{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:12% 10% 10%}
.gen .gy{font-weight:900; font-size:clamp(40px,5vw,72px); line-height:.8; font-variation-settings:"wdth" 62; opacity:.9}
.gen .gt{font-weight:800; font-size:clamp(17px,1.6vw,22px); line-height:1.02; font-variation-settings:"wdth" 70; text-wrap:balance}
.gen .gd{font-size:11px; opacity:.75; margin-top:6px; font-weight:500}
.seen-tag{position:absolute; top:8px; right:8px; z-index:3; background:var(--ok); color:#fff; font-size:12px; font-weight:700; border-radius:4px; padding:2px 7px}
.oscar-tag{position:absolute; top:8px; left:8px; z-index:3; background:#E4B848; color:#1a1408; font-size:12px; font-weight:700; border-radius:4px; padding:2px 7px}

/* ---------- MOSAICO (filas tipo plataforma) ---------- */
.rowgroup{margin-bottom:38px}
.rowgroup h3{margin:0 0 10px; font-size:22px; font-weight:800; font-variation-settings:"wdth" 80}
.rowgroup h3 span{font-weight:400; color:var(--muted); font-size:16px; margin-left:8px}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(150px,15vw,210px); gap:14px; overflow-x:auto; padding:18px 18px 26px; margin:0 -18px; scroll-padding-left:18px; scroll-snap-type:x proximity; scrollbar-width:thin}
.card{all:unset; box-sizing:border-box; position:relative; display:block; text-decoration:none; cursor:pointer; scroll-snap-align:start; border-radius:6px; transition:transform .28s ease, box-shadow .28s ease; outline-offset:3px}
.card:focus-visible{outline:2px solid var(--gold)}
.card .info{position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; border-radius:6px; opacity:0; transition:opacity .25s; color:#fff;
  background:linear-gradient(to top, rgba(10,8,12,.96) 0%, rgba(10,8,12,.88) 55%, rgba(10,8,12,.25) 100%)}
.card .info b{font-size:17px; line-height:1.1; font-variation-settings:"wdth" 75}
.card .info .m{font-size:12.5px; color:#d6cdbd; margin:6px 0}
.card .info p{font-size:13px; line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; color:#eee}
.card .info .more{margin-top:8px; font-size:12.5px; font-weight:700; color:#F6E2AE}
@media (hover:hover){
  .card:hover{transform:scale(1.07); z-index:5; box-shadow:0 18px 40px rgba(0,0,0,.45)}
  .card:hover .info, .card:focus-visible .info{opacity:1}
}

/* ---------- LISTA ---------- */
.list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.list li{border-bottom:1px solid var(--line)}
.lrow{all:unset; box-sizing:border-box; width:100%; text-decoration:none; cursor:pointer; display:grid; grid-template-columns:64px 72px minmax(0,1fr) auto; gap:4px 22px; align-items:center; padding:14px 4px}
.lrow:focus-visible{outline:2px solid var(--gold)}
.lrow .poster{width:64px; border-radius:4px}
.lrow .poster .gen{padding:10% 8%}
.lrow .poster .gy{font-size:22px} .lrow .poster .gt{font-size:9px} .lrow .poster .gd{display:none}
.lrow .poster .oscar-tag,.lrow .poster .seen-tag{display:none}
.lrow .y{font-size:30px; font-weight:800; font-variation-settings:"wdth" 62; color:var(--gold)}
.lrow .t{font-size:clamp(19px,2vw,24px); font-weight:700; line-height:1.15; font-variation-settings:"wdth" 85}
.lrow .t small{display:block; font-size:14px; font-weight:400; color:var(--muted); margin-top:3px; font-variation-settings:"wdth" 100}
.lrow .r{text-align:right; font-size:14px; color:var(--muted); white-space:nowrap}
.lrow .r b{display:block; font-size:17px; color:var(--ink)}
.badge{display:inline-block; font-size:12px; font-weight:700; border-radius:4px; padding:1px 7px; margin-left:8px; vertical-align:3px; font-variation-settings:"wdth" 100}
.badge.nom{border:1px solid var(--gold); color:var(--gold)}
.badge.win{background:var(--gold); color:var(--bg)}
.badge.seen{background:var(--ok); color:#fff}
@media (max-width:700px){
  .lrow{grid-template-columns:56px minmax(0,1fr); gap:2px 14px}
  .lrow .poster{width:56px; grid-row:span 3}
  .lrow .y{font-size:20px} .lrow .r{text-align:left}
}
.empty{padding:30px 4px; color:var(--muted)}

/* ---------- FICHA (modal) ---------- */
dialog.sheet{border:0; padding:0; width:min(980px,94vw); max-height:92vh; border-radius:12px; background:var(--panel); color:var(--ink); overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.5)}
dialog.sheet::backdrop{background:rgba(10,8,12,.72); backdrop-filter:blur(4px)}
.sheet .grid{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:32px; padding:32px}
.sheet .close{position:sticky; top:12px; float:right; margin:12px 12px 0 0; z-index:6; width:40px; height:40px; border-radius:50%; border:0; background:var(--bg2); cursor:pointer; font-size:22px; line-height:1}
.sheet h3{margin:0; font-size:clamp(34px,4.6vw,54px); font-weight:900; line-height:.92; font-variation-settings:"wdth" 62; text-transform:uppercase}
.sheet .orig{color:var(--muted); margin:8px 0 18px}
.sheet dl,.ficha dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin:0 0 22px}
.sheet dt,.ficha dt{font-size:13px; color:var(--muted)}
.sheet dd,.ficha dd{margin:0; font-weight:700; font-size:17px}
.sheet .syn{font-family:var(--read); font-size:20px; line-height:1.6; margin:0 0 20px; max-width:60ch}
.anecdote{background:var(--gold-soft); border-radius:8px; padding:16px 18px; margin:0 0 14px}
.anecdote b{display:block; margin-bottom:4px}
.anecdote p{margin:0; font-size:15.5px}
.seenbtn{border:1px solid var(--line); background:transparent; border-radius:8px; padding:10px 16px; cursor:pointer; font-weight:700}
.seenbtn[aria-pressed="true"]{background:var(--ok); border-color:var(--ok); color:#fff}
@media (max-width:720px){ .sheet .grid{grid-template-columns:1fr; padding:20px} .sheet .poster{max-width:220px} }

.side{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:36px; margin-top:44px}
.side h3{font-size:24px; margin:0 0 10px; font-weight:800; font-variation-settings:"wdth" 80}
.side ul{list-style:none; padding:0; margin:0}
.side li{padding:10px 0; border-top:1px solid var(--line); font-size:16px}
.side li span{color:var(--muted)}

/* ---------- EN SUS PALABRAS ---------- */
.quotes{columns:3 300px; column-gap:36px}
.q{break-inside:avoid; margin:0 0 34px; padding:20px 22px 18px; background:var(--panel); border-radius:10px; border:1px solid var(--line)}
.q .tag{font-size:13px; color:var(--gold); font-weight:700}
.q h3{font-size:24px; line-height:1.08; margin:4px 0 10px; font-weight:800; font-variation-settings:"wdth" 75}
.q p{margin:0 0 12px; font-family:var(--read); font-size:17.5px; line-height:1.58}
.q .src{font-family:var(--sans); font-size:13.5px; color:var(--muted); margin:0}
.q .src a{color:var(--gold); text-underline-offset:3px}
.note{font-size:14.5px; color:var(--muted); max-width:72ch}

/* ---------- PARA LA MESA ---------- */
.table{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0 36px}
.fact{padding:22px 0; border-top:1px solid var(--line)}
.fact b{display:block; font-size:clamp(46px,5vw,68px); line-height:.9; font-weight:900; color:var(--gold); font-variation-settings:"wdth" 62; margin-bottom:8px}
.fact p{margin:0; font-size:16px}

/* ---------- QUIZ ---------- */
.quiz{background:var(--stage); color:var(--stage-ink); border-radius:14px; padding:clamp(24px,4vw,48px); max-width:860px}
.quiz .qn{font-size:14px; color:#C8BCA8}
.quiz h3{font-size:clamp(26px,3.4vw,38px); line-height:1.08; margin:6px 0 22px; font-weight:800; font-variation-settings:"wdth" 75}
.quiz .opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px}
.quiz .opt{border:1px solid rgba(245,239,227,.25); background:rgba(245,239,227,.06); color:inherit; border-radius:8px; padding:14px 16px; text-align:left; cursor:pointer; font-size:16px}
.quiz .opt:hover{background:rgba(245,239,227,.12)}
.quiz .opt.right{background:#2F7A4F; border-color:#2F7A4F}
.quiz .opt.wrong{background:#8E2B34; border-color:#8E2B34}
.quiz .why{margin:18px 0 0; color:#E3D9C8; min-height:1.5em}
.quiz .nav{margin-top:18px; display:flex; gap:12px; align-items:center}
.quiz .score{font-size:clamp(60px,9vw,110px); font-weight:900; line-height:.9; color:#F6E2AE; font-variation-settings:"wdth" 62}

/* ---------- VIDA ---------- */
.bio{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,.9fr); gap:40px; align-items:start}
.bio .portrait{aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:linear-gradient(160deg,#3a2a3c,#141118)}
.bio .portrait img{width:100%; height:100%; object-fit:cover}
.bio .portrait .ph[hidden]{display:none}
.bio .portrait .ph{position:absolute; inset:0; display:flex; align-items:flex-end; padding:20px; color:#d9cdb8; font-weight:900; font-size:64px; line-height:.85; font-variation-settings:"wdth" 62}
.bio .text p{font-family:var(--read); font-size:19px; line-height:1.68; margin:0 0 18px; max-width:58ch}
.awards{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:24px}
.awards h3{font-size:24px; margin:0 0 14px; font-weight:800}
.awards dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:14px 16px}
.awards dt{font-weight:900; font-size:36px; line-height:.9; color:var(--gold); font-variation-settings:"wdth" 62}
.awards dd{margin:0; font-size:15px; color:var(--muted); align-self:center}
@media (max-width:980px){ .bio{grid-template-columns:1fr 1fr} .bio .text{grid-column:1/-1; order:-1} }
@media (max-width:620px){ .bio{grid-template-columns:1fr} }

/* ---------- PAREJAS ---------- */
.loves{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:30px 28px}
.loves li{display:grid; grid-template-columns:84px 1fr; gap:16px; align-items:center}
.loves .face{width:84px; height:84px; border-radius:50%; overflow:hidden; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:26px; color:var(--muted); font-variation-settings:"wdth" 70}
.loves .face img{width:100%; height:100%; object-fit:cover}
.loves .when{font-size:13px; color:var(--gold); font-weight:700}
.loves .who{display:block; font-size:21px; font-weight:800; line-height:1.15; font-variation-settings:"wdth" 80}
.loves .what{font-size:14.5px; color:var(--muted)}

/* ---------- GALERÍA ---------- */
.gallery{columns:4 240px; column-gap:14px}
.gallery figure{margin:0 0 14px; break-inside:avoid; border-radius:8px; overflow:hidden; position:relative}
.gallery figure img{width:100%}
.gallery .rmg{position:absolute; top:8px; right:8px; display:none; border:0; border-radius:6px; background:rgba(0,0,0,.7); color:#fff; padding:4px 10px; font-size:13px; cursor:pointer}
body.editing .gallery .rmg{display:block}
.addgal{display:none}
body.editing .addgal{display:inline-flex}
#galeria.hidden{display:none}
body.editing #galeria.hidden{display:block}

/* ---------- PRÓXIMAMENTE ---------- */
.next{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center}
.next .title{font-weight:900; font-size:clamp(52px,8vw,120px); line-height:.84; margin:0; text-transform:uppercase; font-variation-settings:"wdth" 62}
.next p{margin:0 0 12px; max-width:56ch}
@media (max-width:760px){ .next{grid-template-columns:1fr} }

footer{padding:40px 0 70px; font-size:14px; color:var(--muted); border-top:1px solid var(--line)}
footer p{max-width:76ch; margin:0 0 8px}
/* ---------- ENTREVISTAS ---------- */
.vids{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:26px 22px}
.vid{all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:stretch; cursor:pointer; border-radius:10px}
.vid:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.vid .shot{display:block; position:relative; aspect-ratio:16/9; width:100%; border-radius:10px; overflow:hidden; background:#15121a}
.vid .shot img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.vid .shot iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vid .play{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:linear-gradient(to top,rgba(10,8,12,.55),rgba(10,8,12,.05) 55%)}
.vid .play i{display:block; width:58px; height:58px; border-radius:50%; background:rgba(16,13,20,.74); backdrop-filter:blur(3px); border:1.5px solid rgba(255,255,255,.75); position:relative}
.vid .play i::after{content:""; position:absolute; top:50%; left:52%; transform:translate(-50%,-50%); border-left:17px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent}
.vid .dur{position:absolute; right:8px; bottom:8px; background:rgba(10,8,12,.86); color:#fff; font-size:12.5px; font-weight:700; border-radius:4px; padding:2px 7px; letter-spacing:.01em}
@media (hover:hover){ .vid:hover .shot img{transform:scale(1.06)} .vid:hover .play i{background:var(--gold); border-color:var(--gold)} .vid:hover .play i::after{border-left-color:#1a1408} }
.vid b{display:block; font-size:17px; line-height:1.25; margin:11px 0 4px; font-variation-settings:"wdth" 82; font-weight:700}
.vid .meta{display:block; font-size:13.5px; color:var(--muted)}
.vid .meta em{font-style:normal; color:var(--gold); font-weight:600}
.vid.playing{cursor:default}
.vid.playing .play, .vid.playing .dur{display:none}

/* ---------- CRÉDITOS ---------- */
.credits{border-top:1px solid var(--line); padding:34px 0 0; margin-top:10px}
.credits h3{font-size:19px; margin:0 0 6px; font-weight:800; font-variation-settings:"wdth" 80}
.credits p{margin:0 0 14px; font-size:14.5px; color:var(--muted); max-width:78ch}
.credits ul{list-style:none; margin:0; padding:0; columns:2 320px; column-gap:34px; font-size:13.5px; color:var(--muted)}
.credits li{break-inside:avoid; padding:4px 0}
.credits a{color:var(--gold); text-underline-offset:3px}

.toast{position:fixed; left:50%; top:80px; transform:translateX(-50%); z-index:60; background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:8px; font-size:14px; opacity:0; transition:opacity .3s; pointer-events:none}
.toast.show{opacity:1}

/* ---------- FICHA AMPLIADA ---------- */
.sheet .izq{display:flex; flex-direction:column; gap:12px}
.tr{position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#15121a; cursor:pointer}
.tr img{width:100%; height:100%; object-fit:cover}
.tr iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.tr .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(to top,rgba(10,8,12,.5),transparent 60%)}
.tr .play i{width:46px; height:46px; border-radius:50%; background:rgba(16,13,20,.74); border:1.5px solid rgba(255,255,255,.75); position:relative}
.tr .play i::after{content:""; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%); border-left:13px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent}
.tr .lb{position:absolute; left:8px; bottom:8px; background:rgba(10,8,12,.86); color:#fff; font-size:12px; font-weight:700; border-radius:4px; padding:2px 8px}
.tr.on .play,.tr.on .lb{display:none}
.verla{display:block; text-align:center; border:1px solid var(--line); border-radius:8px; padding:10px; font-size:14.5px; font-weight:600; text-decoration:none}
.verla:hover{background:var(--bg2)}
.repa{font-size:15px; color:var(--muted); margin:0 0 18px; line-height:1.5}
.repa b{color:var(--ink); font-size:13px; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:3px}
.anecdote.rodaje{background:var(--bg2)}
.anecdote.rodaje a,.anecdote a{color:var(--gold)}
.evs{margin:18px 0 6px}
.evs>b{font-size:13px; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:8px}
.evs ul{list-style:none; margin:0; padding:0}
.evs li{padding:8px 0; border-top:1px solid var(--line)}
.evs li a{display:block; font-weight:700; font-size:16px; color:var(--ink); text-decoration:none; line-height:1.25}
.evs li a:hover{color:var(--gold)}
.evs li span{font-size:13px; color:var(--muted)}
.acciones{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px}
.fichafull{border:1px solid var(--gold); color:var(--gold); border-radius:8px; padding:10px 16px; font-weight:700; text-decoration:none; font-size:15px}
.fichafull:hover{background:var(--gold); color:var(--bg)}

/* ---------- POR DÓNDE EMPEZAR ---------- */
.empezar{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:26px 20px; counter-reset:paso}
.paso{position:relative}
.paso .poster{margin-bottom:12px}
.paso .n{position:absolute; top:-10px; left:-8px; z-index:4; width:38px; height:38px; border-radius:50%; background:var(--gold); color:#1a1408; font-weight:900; font-size:19px; display:flex; align-items:center; justify-content:center; font-variation-settings:"wdth" 70}
.paso b{display:block; font-size:18px; line-height:1.18; font-variation-settings:"wdth" 80}
.paso .yr{font-size:13px; color:var(--gold); font-weight:700}
.paso p{margin:6px 0 0; font-size:14.5px; color:var(--muted); line-height:1.45}
.paso a{all:unset; cursor:pointer; display:block}
.paso a:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ---------- CÓMPLICES ---------- */
.complices{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:30px 28px}
.comp{border-top:2px solid var(--ink); padding-top:14px}
.comp .cn{font-size:clamp(26px,2.6vw,34px); font-weight:900; line-height:1; font-variation-settings:"wdth" 65; text-transform:uppercase; margin:0 0 2px}
.comp .cr{font-size:13.5px; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.comp p{margin:10px 0 12px; font-size:15.5px; color:var(--muted); line-height:1.5}
.comp ul{list-style:none; margin:0; padding:0; font-size:14.5px}
.comp li{padding:5px 0; border-top:1px solid var(--line)}
.comp li a{all:unset; cursor:pointer}
.comp li a:hover{color:var(--gold)}
.comp li span{color:var(--muted)}

/* ---------- LÍNEA DE TIEMPO ---------- */
.linea{list-style:none; margin:0; padding:0; position:relative}
.linea::before{content:""; position:absolute; left:84px; top:8px; bottom:8px; width:2px; background:var(--line)}
.linea li{position:relative; display:grid; grid-template-columns:72px minmax(0,1fr); gap:0 34px; padding:0 0 26px}
.linea .ly{font-weight:900; font-size:24px; color:var(--gold); font-variation-settings:"wdth" 65; text-align:right; line-height:1.2}
.linea li::after{content:""; position:absolute; left:79px; top:9px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:3px solid var(--bg)}
.linea .lt{font-size:16.5px; line-height:1.5}
.linea .lt b{display:block; font-size:18px; font-variation-settings:"wdth" 80; margin-bottom:2px}
@media (max-width:560px){
  /* en una sola columna el punto se comía la primera cifra del año:
     la línea y el punto se van al borde y el año pasa encima del texto */
  .linea::before{left:5px} .linea li::after{left:0; top:7px}
  .linea li{grid-template-columns:minmax(0,1fr); gap:2px; padding-left:28px}
  .linea .ly{text-align:left; font-size:18px}
}

/* ---------- ACTIVISTA ---------- */
.activista{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:44px; align-items:start}
.activista .txt p{font-family:var(--read); font-size:18.5px; line-height:1.66; margin:0 0 16px; max-width:60ch}
.hitos{list-style:none; margin:0; padding:0}
.hitos li{display:grid; grid-template-columns:62px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--line); font-size:15px}
.hitos b{font-weight:900; color:var(--gold); font-variation-settings:"wdth" 65; font-size:19px}
.hitos span{color:var(--muted)}
@media (max-width:820px){ .activista{grid-template-columns:1fr; gap:28px} }

/* ---------- GALERÍA: pie y ampliación ---------- */
.gallery figure figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px; font-size:12.5px; color:#fff; background:linear-gradient(to top,rgba(8,6,10,.9),transparent); opacity:0; transition:opacity .25s}
.gallery figure:hover figcaption{opacity:1}
.gallery button.ampliar{all:unset; display:block; cursor:zoom-in; width:100%}
dialog.lupa{border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh}
dialog.lupa::backdrop{background:rgba(8,6,10,.9)}
dialog.lupa img{max-width:96vw; max-height:88vh; width:auto; height:auto; border-radius:8px}
dialog.lupa p{color:#e9e0d2; font-size:13.5px; margin:10px 2px 0; text-align:center}
dialog.lupa p a{color:var(--gold)}

/* ---------- ÍNDICE ESTÁTICO DE PELÍCULAS ---------- */
.indice{margin-top:44px; border-top:1px solid var(--line); padding-top:26px}
.indice h3{font-size:22px; margin:0 0 6px; font-weight:800; font-variation-settings:"wdth" 80}
.indice>p{margin:0 0 16px; color:var(--muted); max-width:62ch; font-size:15.5px}
.indice ul{list-style:none; margin:0; padding:0; columns:3 240px; column-gap:34px}
.indice li{break-inside:avoid; padding:5px 0; font-size:15.5px}
.indice li a{color:var(--ink); text-decoration:none; font-weight:600}
.indice li a:hover{color:var(--gold); text-decoration:underline; text-underline-offset:3px}
.indice li span{color:var(--muted); font-size:13.5px}

/* el número del paso ocupa la esquina donde iría la etiqueta del Óscar */
.paso .poster .oscar-tag{left:auto; right:8px}


/* ---------- CRONOLOGÍA: tipo de hito ---------- */
.linea .lt .tipo{display:inline-block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  border:1px solid var(--line); border-radius:3px; padding:2px 7px; color:var(--muted); margin-bottom:7px; background:var(--panel)}
.linea li[data-t="premio"] .tipo{color:var(--gold); border-color:var(--gold)}
.linea li[data-t="causa"] .tipo{color:var(--ok); border-color:var(--ok)}
.linea li[data-t="cine"] .tipo{color:#2F5D8E; border-color:rgba(47,93,142,.5)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .linea li[data-t="cine"] .tipo{color:#8FB6E0; border-color:rgba(143,182,224,.5)} }
:root[data-theme="dark"] .linea li[data-t="cine"] .tipo{color:#8FB6E0; border-color:rgba(143,182,224,.5)}

/* ---------- PALMARÉS ---------- */
.marcador{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:34px}
.marcador .marca{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px 20px}
.marcador b{display:block; font-size:clamp(38px,4.8vw,58px); font-weight:900; line-height:.9; color:var(--gold); font-variation-settings:"wdth" 62}
.marcador span{font-size:13.5px; color:var(--muted)}
.marcador i{font-style:normal; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; display:block; margin-top:7px; color:var(--muted)}
.tablaenv{overflow-x:auto}
table.palm{width:100%; border-collapse:collapse; font-size:15.5px; min-width:520px}
table.palm th{text-align:left; font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted);
  font-weight:700; padding:0 14px 12px 0; border-bottom:1px solid var(--line)}
table.palm td{padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top}
table.palm td:first-child{padding-left:0}
table.palm tr.win td{background:var(--gold-soft)}
table.palm .y{font-weight:800; font-variation-settings:"wdth" 70; white-space:nowrap}
table.palm .rs{white-space:nowrap; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
table.palm tr.win .rs{color:var(--gold); font-weight:800}
table.palm .ob{color:var(--muted)}
.notapalm{margin-top:20px; color:var(--muted); font-size:15.5px; max-width:76ch; font-family:var(--read)}

/* ---------- CAUSAS ---------- */
.causas{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; margin-top:40px}
.causa{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:26px 24px}
.causa .cd{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; min-height:14px; font-weight:700}
.causa h3{margin:0 0 10px; font-size:21px; font-weight:800; line-height:1.2; font-variation-settings:"wdth" 78}
.causa p{margin:0; font-family:var(--read); font-size:16.5px; line-height:1.6; color:var(--muted)}

/* ---------- REDES ---------- */
.redes{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px}
.red{display:flex; align-items:center; gap:15px; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:19px 21px; text-decoration:none; transition:border-color .2s, transform .2s}
.red:hover{border-color:var(--gold); transform:translateY(-2px)}
.red .ic{width:40px; height:40px; border-radius:10px; background:var(--bg2); display:grid; place-items:center; flex:0 0 auto}
.red svg{width:20px; height:20px; fill:currentColor}
.red .rt b{display:block; font-size:16.5px; font-weight:800}
.red .rt span{font-size:13.5px; color:var(--muted)}
.red .fl{margin-left:auto; color:var(--muted)}