/* ===== v5: portada de pantalla completa (video-recuerdo + humo) ===== */
#cover{max-width:none;width:100%;margin:0;padding:0;display:block;position:relative;overflow:hidden;text-align:center;min-height:max(100svh,680px)}

/* fondo */
.cover-bg{position:absolute;inset:0;z-index:0;background:#0A0A0B var(--poster) center/cover no-repeat}
.cover-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.cb-side{display:none}
@media(min-width:760px){
  .cb-side{display:block;position:absolute;inset:-60px;background:var(--poster) center/cover no-repeat;filter:blur(42px) brightness(.42) saturate(1.2)}
  .cover-bg video{left:50%;right:auto;width:min(100%,calc(max(100svh,680px)*.5625));transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
}
/* luz y legibilidad: título arriba, nombre y 30 abajo; las caras del video quedan limpias en medio */
.cb-grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.88) 0,rgba(10,10,11,.5) 15%,rgba(10,10,11,.08) 32%,rgba(10,10,11,0) 44%,rgba(10,10,11,.3) 58%,rgba(10,10,11,.74) 78%,rgba(10,10,11,.94) 94%,#0A0A0B 100%),
  radial-gradient(ellipse at 50% 38%,transparent 38%,rgba(0,0,0,.5) 100%)}
.cover-bg .grain-l{position:absolute;inset:0;z-index:2;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
.cover-bg .light-leak{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 8% 4%,rgba(255,190,110,.42),transparent 44%),radial-gradient(circle at 98% 62%,rgba(255,150,80,.2),transparent 40%);animation:leak 8s ease-in-out infinite alternate}

/* humo que recorre TODA la sección y se disuelve en "Desliza" */
#cover .smoke{position:absolute;inset:-6% -24% 0 -24%;z-index:3;mix-blend-mode:normal;filter:none;pointer-events:none;will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 99%);mask-image:linear-gradient(to bottom,#000 70%,transparent 99%)}
#cover .smoke.s-a{background:var(--smoke) 4% 4%/74% no-repeat,var(--smoke) 96% 30%/62% no-repeat;opacity:.34;animation:cvA 28s ease-in-out infinite alternate}
#cover .smoke.s-b{background:var(--smoke) 90% 46%/78% no-repeat,var(--smoke) 6% 58%/66% no-repeat;opacity:.3;animation:cvB 22s ease-in-out infinite alternate}
#cover .smoke.s-c{background:var(--smoke) 30% 100%/92% no-repeat,var(--smoke) 100% 88%/70% no-repeat,var(--smoke) 0 84%/70% no-repeat;opacity:.5;animation:cvC 18s ease-in-out infinite alternate}
@keyframes cvA{from{transform:translate3d(-4%,2%,0) scale(1) rotate(-1.5deg)}to{transform:translate3d(5%,-3%,0) scale(1.12) rotate(2deg)}}
@keyframes cvB{from{transform:translate3d(5%,3%,0) scale(1.06)}to{transform:translate3d(-6%,-4%,0) scale(1.16) rotate(-2deg)}}
@keyframes cvC{from{transform:translate3d(-5%,6%,0) scale(1.04)}to{transform:translate3d(6%,-2%,0) scale(1.18) rotate(1.5deg)}}
.cover-bg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:110px;z-index:4;background:linear-gradient(transparent,#0A0A0B 92%);pointer-events:none}

/* contenido */
.cover-in{position:relative;z-index:5;min-height:max(100svh,680px);max-width:560px;margin:0 auto;padding:max(30px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between}
.cover-top{padding-top:26px}
.cover-top .eyebrow{text-shadow:0 2px 14px #000,0 0 3px #000}
.cover-title{font:italic 400 clamp(30px,8.4vw,46px)/1.15 var(--f-serif);color:#fff6e2;text-shadow:0 3px 22px #000,0 0 4px rgba(0,0,0,.8);letter-spacing:.03em;margin-top:6px}
.cover-bot{display:flex;flex-direction:column;align-items:center;padding-bottom:6px}
.hero3d{width:min(100%,470px);aspect-ratio:1.08/1;margin:0 auto -4px;position:relative;z-index:2}
.cover-unit{margin-top:-12px;text-shadow:0 2px 12px #000}
.cover-from{margin-top:6px;text-shadow:0 2px 16px #000}
.cover-date{text-shadow:0 2px 12px #000}
.rot{min-height:0;margin:6px 0 0;font-size:clamp(17px,4.2vw,22px);text-shadow:0 2px 12px #000;color:#e9e2d0}
.scroll-hint{margin-top:12px;color:#d9d2c0;text-shadow:0 2px 10px #000}
.scroll-hint::after{height:30px;margin-top:8px}
html.rm .cover-bg .grain-l,html.rm .cover-bg .light-leak,html.rm #cover .smoke{animation:none!important}
@media(prefers-reduced-motion:reduce){.cover-bg .grain-l,.cover-bg .light-leak,#cover .smoke{animation:none!important}}

/* ---- ajuste de composición: caras del video libres arriba; nombre y 30 compactos abajo ---- */
#cover,.cover-in{min-height:max(100svh,700px)}
.cover-bg video{top:-11%;left:0;right:auto;bottom:auto;width:100%;height:111%;inset:auto;top:-11%;left:0}
@media(min-width:760px){.cover-bg video{left:50%;width:min(100%,calc(max(100svh,700px)*.5625));transform:translateX(-50%)}}
.hero3d{width:min(100%,470px,calc(40svh*1.2));aspect-ratio:1.2/1;margin:0 auto -2px}
.has-video .rot{display:none}
.cover-in{padding-bottom:max(16px,env(safe-area-inset-bottom))}
.scroll-hint{margin-top:8px}
/* humo: más fino en móvil y proporcional en escritorio (no neblina) */
#cover .smoke.s-a{opacity:.3}#cover .smoke.s-b{opacity:.24}#cover .smoke.s-c{opacity:.44}
@media(min-width:760px){
  #cover .smoke{inset:-4% 0 0 0}
  #cover .smoke.s-a{background:var(--smoke) 34% 6%/min(70%,620px) no-repeat,var(--smoke) 70% 34%/min(58%,520px) no-repeat;opacity:.2}
  #cover .smoke.s-b{background:var(--smoke) 66% 50%/min(66%,560px) no-repeat,var(--smoke) 32% 58%/min(56%,500px) no-repeat;opacity:.16}
  #cover .smoke.s-c{background:var(--smoke) 50% 100%/min(84%,760px) no-repeat,var(--smoke) 88% 90%/min(54%,480px) no-repeat,var(--smoke) 12% 88%/min(54%,480px) no-repeat;opacity:.36}
  .cb-side{filter:blur(46px) brightness(.34) saturate(1.1)}
}
