/* Machiavelli's · capa cinematográfica
   Todo el material es propio: cinco piezas rodadas para el negocio, recortadas
   a bucles sin costura. Nada de stock.

   Reglas de la casa:
   · el cartel (poster) se ve primero y el video entra encima con un fundido,
     así nunca hay un rectángulo negro esperando
   · ningún video se descarga hasta que su sección está cerca
   · nada se reproduce fuera de pantalla ni con la pestaña oculta
   · con datos ahorrados, 2g o "reducir movimiento" el sitio se queda en fotos */

/* ---------- soporte de video: cartel + video encima ------------------ */
.cine{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.cine > img.cartel,
.cine > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cine > video{opacity:0;transition:opacity .9s var(--ease);will-change:opacity}
.cine > video.listo{opacity:1}
.cine.mudo > video{display:none}

/* grano de película: una sola textura, animada por pasos, barata de pintar */
.grano::after{content:"";position:absolute;inset:-150%;pointer-events:none;z-index:3;
  opacity:.22;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
  animation:granear 1.05s steps(6) infinite}
@keyframes granear{
  0%{transform:translate(0,0)}      17%{transform:translate(-3%,-2%)}
  34%{transform:translate(2%,-3%)}  50%{transform:translate(-2%,3%)}
  67%{transform:translate(3%,2%)}   84%{transform:translate(-3%,1%)}
  100%{transform:translate(0,0)}}

/* viñeta: cierra los bordes y sostiene el texto encima */
.vineta::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 38%, transparent 42%, rgba(18,14,12,.46) 100%),
    linear-gradient(to top, rgba(18,14,12,.72) 0%, rgba(18,14,12,.20) 34%, transparent 62%)}

/* La portada es comida muy clara: yema, salsa, plato blanco. Medido en
   producción, el titular en papel sobre ese fotograma daba 1.22:1 de
   contraste, cuando el mínimo legible para texto grande es 3:1. Era ilegible.
   Se corrige en dos capas, no en una:
     · un grado de color sobre el propio video, que además le da el aire de
       película en vez de foto de catálogo
     · un velo pesado en la mitad inferior, que es donde cae el texto
   El velo va de .88 abajo a transparente arriba, así el plato sigue
   leyéndose en la parte alta del encuadre.                                */
.hero .cine > img.cartel,
.hero .cine > video{filter:brightness(.60) contrast(1.10) saturate(1.08)}
.hero .cine.vineta::before{
  background:
    radial-gradient(130% 90% at 50% 30%, transparent 30%, rgba(14,11,10,.55) 100%),
    linear-gradient(to top,
      rgba(14,11,10,.88) 0%, rgba(14,11,10,.80) 22%,
      rgba(14,11,10,.60) 45%, rgba(14,11,10,.30) 68%, rgba(14,11,10,.10) 100%)}

/* ---------- portada ---------------------------------------------------- */
.hero{position:relative}
.hero .cine{position:absolute;inset:0;z-index:-2}
/* el encuadre se aleja despacio al bajar: lo mueve JS con --p (0 a 1) */
.hero .cine > img.cartel,
.hero .cine > video{transform:scale(calc(1 + var(--p,0) * .07)) translate3d(0,calc(var(--p,0) * 22px),0);
  transform-origin:50% 42%}
@media(prefers-reduced-motion:reduce){
  .hero .cine > img.cartel,.hero .cine > video{transform:none}
  .grano::after{animation:none;opacity:.12}
}

/* sonido: un botón discreto, sólo si el héroe termina con audio algún día */
.hero .cta{position:relative;z-index:4}

/* flecha de "sigue bajando" */
.bajar{position:absolute;left:50%;bottom:22px;z-index:4;transform:translateX(-50%);
  width:26px;height:40px;border:1.5px solid rgba(251,248,243,.5);border-radius:14px;
  display:grid;place-items:start center;padding-top:7px}
.bajar i{width:3px;height:7px;border-radius:2px;background:rgba(251,248,243,.9);
  animation:gotear 1.9s var(--ease) infinite}
@keyframes gotear{0%{transform:translateY(0);opacity:0}
  30%{opacity:1}70%{transform:translateY(13px);opacity:1}100%{transform:translateY(16px);opacity:0}}
@media(max-width:700px){.bajar{display:none}}

/* Velo ligero para las bandas. La viñeta de la portada no sirve aquí: una
   cinta 16:7 es tan baja que el degradado inferior de .vineta le cubre casi
   toda la altura y la deja negra. Se vio en la primera versión: la banda de
   la yema parecía una caja vacía. Aquí sólo se oscurece el tercio de abajo,
   que es donde va el texto, y el plato se ve entero.                      */
.velo::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,
    rgba(14,11,10,.86) 0%, rgba(14,11,10,.66) 18%,
    rgba(14,11,10,.28) 40%, transparent 62%)}
/* en las cintas verticales de la pareja el texto va más abajo, cabe menos velo */
.dupla .velo::before{background:linear-gradient(to top,
    rgba(14,11,10,.88) 0%, rgba(14,11,10,.58) 16%,
    rgba(14,11,10,.18) 34%, transparent 52%)}

/* ---------- banda ancha de video dentro del flujo ---------------------- */
.cinta{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/7;
  background:var(--ink);box-shadow:var(--shadow)}
@media(max-width:700px){.cinta{aspect-ratio:4/3;border-radius:18px}}
.cinta .cine{position:absolute;inset:0}
.cinta .pie{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:clamp(18px,3vw,32px);
  color:var(--paper);display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.cinta .pie h3{font-family:'Intensa';font-weight:700;font-size:clamp(22px,3.4vw,38px);
  line-height:1;color:var(--paper);text-wrap:balance;max-width:16ch}
.cinta .pie p{color:rgba(251,248,243,.82);font-size:14.5px;margin-top:8px;max-width:34ch}
.cinta .pie .eyebrow{color:var(--woodsoft)}

/* dos cintas en pareja */
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dupla .cinta{aspect-ratio:4/5}
@media(max-width:820px){.dupla{grid-template-columns:1fr}.dupla .cinta{aspect-ratio:4/3}}

/* ---------- el carrete: las piezas completas, con sonido --------------- */
/* Se adapta al número de piezas: hoy son tres, si mañana son cinco no hay que
   tocar nada. Las tarjetas no pasan de 240px para que no se vuelvan torres. */
.carrete{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,240px));
  gap:14px;justify-content:start}
@media(max-width:900px){.carrete{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
@media(max-width:560px){.carrete{grid-auto-flow:column;grid-auto-columns:64%;
  grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;scrollbar-width:none}
  .carrete::-webkit-scrollbar{display:none}
  .carrete > button{scroll-snap-align:center}}
.carrete > button{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;
  background:var(--ink);display:block;width:100%;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.carrete > button img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .45s var(--ease);filter:saturate(.92)}
.carrete > button:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(46,39,35,.6)}
.carrete > button:hover img{transform:scale(1.06);filter:saturate(1.05)}
.carrete > button:focus-visible{outline:2px solid var(--wood);outline-offset:3px}
.carrete .etq{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px;
  text-align:left;color:var(--paper);font-size:13px;font-weight:500;line-height:1.25;
  background:linear-gradient(to top,rgba(18,14,12,.85),transparent)}
.carrete .dur{position:absolute;top:9px;right:9px;z-index:2;font-family:'Ringside';
  font-size:10.5px;letter-spacing:.08em;color:var(--paper);
  background:rgba(18,14,12,.55);backdrop-filter:blur(6px);padding:3px 7px;border-radius:99px}
.carrete .play{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.carrete .play span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(251,248,243,.92);color:var(--ink);font-size:15px;padding-left:3px;
  transition:transform .45s var(--ease)}
.carrete > button:hover .play span{transform:scale(1.12)}

/* visor a pantalla completa */
.visor{position:fixed;inset:0;z-index:300;background:rgba(14,11,10,.94);
  backdrop-filter:blur(14px);display:grid;place-items:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.visor.abierto{opacity:1;pointer-events:auto}
.visor video{max-width:min(94vw,440px);max-height:88vh;width:100%;border-radius:18px;
  background:#000;display:block;box-shadow:0 30px 80px -30px #000}
.visor .cerrar{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;
  width:42px;height:42px;border-radius:50%;background:rgba(251,248,243,.14);
  color:var(--paper);font-size:20px;display:grid;place-items:center;
  backdrop-filter:blur(8px);transition:background .25s}
.visor .cerrar:hover{background:rgba(251,248,243,.26)}
.visor .nav{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  left:0;right:0;display:flex;gap:7px;justify-content:center}
.visor .nav i{width:24px;height:3px;border-radius:2px;background:rgba(251,248,243,.3);
  cursor:pointer;transition:background .25s,width .25s var(--ease)}
.visor .nav i.on{background:var(--paper);width:38px}

/* ---------- respeto por los datos y el movimiento ---------------------- */
/* Si el sitio decide no usar video, .sin-video queda en <html> y las secciones
   que sólo existían para el video se ocultan en vez de quedar vacías. */
html.sin-video .solo-video{display:none}