/* Modeka — bloques cinematográficos traídos de la presentación creativa.
 * Mismo sistema visual que el resto de la web (Anton + Archivo + rojo
 * Modeka); solo cambia el material que muestran.
 * El material de estas secciones está generado con IA a partir de fotografía
 * real de catálogo, y así se rotula en el pie de la web. */

/* ---------- banda de cine: móvil + titular ---------- */
.phband{position:relative;min-height:96svh;display:grid;align-items:center;overflow:hidden;
  border-top:1px solid var(--line)}
.phband__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.2) brightness(.42) saturate(.95);z-index:-2;transform:scale(1.05)}
.phband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.55) 48%,rgba(10,10,11,.8) 100%)}
.phband__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(34px,4.6vw,76px);align-items:center;width:100%;max-width:var(--wrap);
  margin:0 auto;padding:clamp(70px,9vw,120px) var(--pad)}
.phband__t h2{font-size:clamp(36px,6.4vw,104px);margin:16px 0 0}
.phband__t h2 em{font-style:normal;color:var(--red)}
.phband__t p{color:var(--bone-dim);max-width:46ch;margin-top:22px;font-size:1.04rem;line-height:1.7}
.phband__fx{display:inline-block;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;background:var(--red);color:#fff;padding:7px 13px;border-radius:4px}
.phband__go{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-family:"Space Mono",monospace;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);
  border:1px solid var(--line-strong);border-radius:30px;padding:10px 18px;transition:.3s var(--ease)}
.phband__go:hover{background:var(--red);border-color:var(--red);color:#fff}
.phone{justify-self:center;position:relative;width:clamp(210px,23vw,290px);aspect-ratio:9/19.2;
  border-radius:13%/6.2%;padding:9px;background:linear-gradient(160deg,#22222a,#0a0a0c);
  border:1px solid #33333c;box-shadow:0 50px 100px -40px rgba(0,0,0,.95)}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);z-index:4;width:34%;height:15px;
  background:#0a0a0c;border-radius:0 0 12px 12px}
.phone video,.phone img{width:100%;height:100%;object-fit:cover;border-radius:10%/5%;background:#000;display:block}
.phone::after{content:"";position:absolute;inset:9px;border-radius:10%/5%;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.13),rgba(255,255,255,0) 28%,rgba(255,255,255,0) 76%,rgba(255,255,255,.06))}
@media (max-width:920px){
  .phband__in{grid-template-columns:1fr;gap:34px}
  .phone{width:min(66vw,250px)}
}

/* ---------- coverflow de móviles ---------- */
.cov{border-top:1px solid var(--line);background:var(--ink-2);padding:clamp(60px,9vw,120px) 0;overflow:hidden}
.cov__head{padding:0 var(--pad);max-width:var(--wrap);margin:0 auto clamp(24px,3vw,40px);text-align:center}
.cov__head h2{font-size:clamp(34px,5.4vw,84px);margin-top:16px}
.cov__head p{color:var(--bone-dim);max-width:52ch;margin:18px auto 0;line-height:1.7}
.cov__deck{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(6px,1.4vw,22px);max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.cov__stage{position:relative;height:min(70vh,620px);perspective:1100px;perspective-origin:50% 46%;transform-style:preserve-3d;
  cursor:grab;touch-action:pan-y}
.cov__stage:focus-visible{outline:2px solid var(--red);outline-offset:8px;border-radius:18px}
.cov__arrow{width:clamp(40px,4vw,52px);height:clamp(40px,4vw,52px);border-radius:50%;
  background:rgba(243,239,230,.05);border:1px solid var(--line);color:var(--bone);
  font-size:1.3rem;line-height:1;display:grid;place-items:center;
  transition:background .3s var(--ease),border-color .3s,transform .3s var(--ease)}
.cov__arrow:hover{background:var(--red);border-color:var(--red);transform:scale(1.08)}
.cov__dots{display:flex;justify-content:center;gap:8px;margin-top:clamp(14px,2vh,24px)}
.cov__dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;
  background:rgba(243,239,230,.24);transition:background .3s,width .35s var(--ease)}
.cov__dots button.on{background:var(--red);width:24px}
@media (max-width:640px){.cov__arrow{display:none}}
.cov__stage.grab{cursor:grabbing}
.pcard{position:absolute;left:50%;top:50%;width:clamp(180px,19vw,252px);aspect-ratio:9/19.2;
  transform-origin:center;will-change:transform,opacity;backface-visibility:hidden}
.pcard .fr{position:relative;width:100%;height:100%;border-radius:13%/6.2%;padding:8px;
  background:linear-gradient(160deg,#22222a,#0a0a0c);border:1px solid #33333c;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.92)}
.pcard.center .fr{border-color:rgba(200,16,46,.55);box-shadow:0 55px 110px -30px rgba(200,16,46,.38)}
.pcard .screen{position:relative;width:100%;height:100%;border-radius:10%/5%;overflow:hidden;background:#0b0b0e}
.pcard .pv{position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease)}
.pcard .pv.on{opacity:1}
.pcard .pv img{width:100%;height:100%;object-fit:cover}
.pcard .pv.p{background:radial-gradient(120% 80% at 50% 16%,#1e1e26,#0a0a0e);display:grid;place-items:center}
.pcard .pv.p img{object-fit:contain;padding:13%}
.pcard .plab{position:absolute;left:12px;bottom:12px;z-index:5;font-family:"Space Mono",monospace;
  font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:rgba(8,8,10,.6);backdrop-filter:blur(6px);padding:5px 9px;border-radius:999px}
.cov__meta{text-align:center;margin-top:clamp(18px,3vh,34px)}
.cov__name{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(26px,4.4vw,56px);line-height:1}
.cov__line{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-ink);margin-top:7px}
.cov__tog{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-top:18px}
.cov__tog button{background:transparent;color:var(--muted);border:0;padding:10px 20px;
  font-family:"Space Mono",monospace;font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;transition:.3s}
.cov__tog button.on{background:var(--red);color:#fff}
.cov__hint{display:inline-block;margin-top:14px;font-family:"Space Mono",monospace;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- lookbook de iconos ---------- */
.lb{border-top:1px solid var(--line)}
.lb__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4.4vw,68px);align-items:center;margin-top:clamp(26px,4vw,46px);
  max-width:var(--wrap);margin-inline:auto}
.lb__stage{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:#0e0e12;
  border:1px solid var(--line)}
.lbseq{position:absolute;inset:0;opacity:0;clip-path:inset(0 0 0 100%);
  transition:clip-path .75s var(--ease),opacity .5s}
.lbseq.on{opacity:1;clip-path:inset(0 0 0 0)}
.lbseq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.lbseq img.fon{opacity:1;animation:lbkb 5.2s ease-out both}
@keyframes lbkb{from{transform:scale(1.1)}to{transform:scale(1.01)}}
.lbfx{position:absolute;top:16px;right:16px;z-index:4;font-family:"Space Mono",monospace;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--red);
  padding:8px 13px;border-radius:5px;opacity:0;transform:translateY(-6px);transition:.45s var(--ease)}
.lbseq.on .lbfx.show{opacity:1;transform:none}
.lb__list{list-style:none;border-top:1px solid var(--line)}
.lb__list li{padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;opacity:.45;
  transition:opacity .35s var(--ease),padding-left .35s var(--ease)}
.lb__list li.on{opacity:1;padding-left:14px}
.lb__list .row{display:flex;gap:16px;align-items:baseline}
.lb__list .num{font-family:"Space Mono",monospace;color:var(--red-ink);font-size:.72rem;min-width:26px}
.lb__list h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(19px,2.5vw,34px);line-height:1.1}
.lb__list p{color:var(--bone-dim);font-size:.92rem;line-height:1.6;max-height:0;overflow:hidden;opacity:0;
  padding-left:42px;transition:max-height .45s var(--ease),opacity .35s,margin-top .3s}
.lb__list li.on p{max-height:120px;opacity:1;margin-top:8px}
@media (max-width:920px){.lb__grid{grid-template-columns:1fr}.lb__list p{padding-left:0}}

/* ---------- 360 y suit-up ---------- */
/* Los dos bloques se componen como una pieza centrada. Antes la columna
   de texto era un 1fr de 900 px para 350 px de párrafo, así que la figura
   quedaba pegada al borde derecho con medio viewport de vacío delante. */
.spin__wrap{display:grid;grid-template-columns:minmax(300px,46ch) minmax(0,auto);
  gap:clamp(34px,5.5vw,88px);align-items:center;justify-content:center;
  margin-top:clamp(26px,4vw,46px)}
.spin__wrap h2{font-size:clamp(34px,5vw,78px);margin-top:16px}
.spin__wrap h2 em{font-style:normal;color:var(--red)}
.spin__wrap p{color:var(--bone-dim);max-width:44ch;margin-top:18px;line-height:1.7}
.spin__stage{position:relative;width:clamp(230px,29vw,340px);aspect-ratio:716/1284;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;background:radial-gradient(120% 80% at 50% 14%,#17171d,#0a0a0e);
  cursor:grab;touch-action:none;user-select:none;box-shadow:0 50px 110px -50px #000}
.spin__stage.grab{cursor:grabbing}
.spin__stage img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.spin__ring{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;display:flex;gap:8px;
  align-items:center;font-family:"Space Mono",monospace;font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);background:rgba(8,8,10,.62);border:1px solid var(--line);padding:7px 13px;border-radius:999px;
  pointer-events:none;transition:opacity .4s}
.spin__ring svg{width:14px;height:14px}
.spin__stage.touched .spin__ring{opacity:0}
.spin__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(243,239,230,.14);z-index:3}
.spin__bar i{display:block;height:100%;width:0;background:var(--red)}
@media (max-width:900px){.spin__wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  .spin__wrap p{margin-inline:auto}}

/* ---------- panel de anuncios ---------- */
.ads__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(20px,3vw,40px);align-items:start;
  margin-top:clamp(26px,4vw,46px)}
.adfeat{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#000;
  aspect-ratio:9/16;max-height:78vh;margin:0 auto;width:100%}
.adfeat video{width:100%;height:100%;object-fit:contain;background:#000;position:relative;z-index:2}
.adfeat .blur{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(38px) brightness(.5);z-index:1}
.adfeat__cap{position:absolute;left:18px;top:18px;z-index:3;pointer-events:none}
.adfeat__cap span{font-family:"Space Mono",monospace;font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red-ink)}
.adfeat__cap h3{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(20px,2.6vw,34px);
  text-shadow:0 2px 14px rgba(0,0,0,.8)}
.adthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.adthumb{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0d0d11;
  color:var(--bone);padding:0;cursor:pointer;transition:border-color .3s,transform .3s var(--ease)}
.adthumb img{width:100%;aspect-ratio:9/13;object-fit:cover;filter:brightness(.68);transition:filter .3s}
.adthumb b{position:absolute;left:8px;right:8px;bottom:7px;font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:.76rem;line-height:1.05;text-align:left;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.adthumb:hover,.adthumb.on{border-color:var(--red);transform:translateY(-3px)}
.adthumb:hover img,.adthumb.on img{filter:none}
.ads__note{margin-top:18px;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);line-height:1.7}
@media (max-width:920px){.ads__grid{grid-template-columns:1fr}.adfeat{max-width:420px}}

/* ---------- escena a sangre con vídeo ---------- */
.vscene{position:relative;min-height:96svh;display:grid;place-items:end start;overflow:hidden;
  border-top:1px solid var(--line)}
.vscene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.vscene::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.1) 40%,rgba(10,10,11,.92) 100%)}
.vscene__in{padding:0 var(--pad) clamp(70px,10vh,120px);max-width:1400px}
.vscene h2{font-size:clamp(40px,7.4vw,124px);margin-top:16px}
.vscene h2 em{font-style:normal;color:var(--red)}
.vscene p{color:var(--bone-dim);max-width:44ch;margin-top:20px}
.vscene h2,.vscene p,.vscene .idx{text-shadow:0 2px 18px rgba(10,10,11,.85)}

@media (prefers-reduced-motion:reduce){
  .lbseq img.fon{animation:none}
  .phband__bg{transform:none}
}

/* ---------- featured (horizontal pin) ---------- */
.feat{position:relative;background:var(--ink-2);border-top:1px solid var(--line)}
.feat__pin{height:100svh;display:flex;align-items:center;overflow:hidden}
.feat__track{display:flex;gap:30px;padding:0 var(--pad);will-change:transform}
.feat__intro{flex:0 0 min(78vw,440px);display:flex;flex-direction:column;justify-content:center;padding-right:20px}
.feat__intro h2{font-size:clamp(40px,5vw,82px);margin:18px 0}
.feat__intro p{color:var(--bone-dim);max-width:34ch}
.prod{flex:0 0 min(82vw,360px);background:var(--ink);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .4s,transform .5s var(--ease)}
.prod:hover{border-color:var(--red);transform:translateY(-6px)}
.prod__img{aspect-ratio:4/5;overflow:hidden;background:#fff}
.prod__img img{width:100%;height:100%;object-fit:cover;filter:saturate(.96);transition:transform 1s var(--ease)}
.prod:hover .prod__img img{transform:scale(1.06)}
.prod__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px}
.prod__line{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red-ink)}
.prod__name{font-family:"Anton",sans-serif;font-size:1.55rem;text-transform:uppercase;letter-spacing:.01em}
.prod__desc{color:var(--bone-dim);font-size:.88rem}
.prod__foot{margin-top:10px;display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.feat__hint{position:absolute;bottom:26px;left:var(--pad);font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
/* Sin barra no se sabe cuánto queda de la tira ni que hay más a la derecha */
.feat__bar{position:absolute;bottom:26px;right:var(--pad);width:min(240px,26vw);height:2px;
  background:rgba(243,239,230,.14);overflow:hidden}
.feat__bar i{display:block;height:100%;width:0;background:var(--red);transform-origin:left}
@media (max-width:900px){.feat__bar{display:none}}
@media (max-width:900px){
  .feat__pin{height:auto;padding:70px 0}
  .feat__track{flex-direction:column}
  .feat__intro,.prod{flex:1 1 auto;width:100%}
  .feat__hint{display:none}
}