/* ═══════════════════════════════════════════
   PELÍCULAS DE BODA — galería + reproductor HLS
   Módulo independiente: lo usan index.html y la
   propuesta que sirve /api/p. No depende de nada
   del sitio (todas las var() llevan respaldo).
   ═══════════════════════════════════════════ */

.wfilms{
  background:var(--ink,#0a0908);
  padding-bottom:var(--sec,90px);
  --f-ink:var(--ink,#0a0908);
  --f-bone:var(--bone,#efe9e0);
  --f-brass:var(--brass,#b99a6b);
  --f-line:rgba(239,233,224,.16);
  --f-ease:cubic-bezier(.22,1,.36,1);
}

/* variante en caja: dentro de una propuesta de cliente */
.wfilms--caja{border-radius:3px;padding:clamp(28px,5vw,42px) 0 clamp(30px,5vw,44px);
  margin:clamp(40px,7vw,64px) 0}
.wfilms--caja .wfilms__head{padding:0 clamp(20px,4vw,32px);margin-bottom:clamp(20px,3vw,28px)}
.wfilms--caja .wfilms__head h2{font-family:var(--display,Georgia,serif);font-weight:400;
  font-size:clamp(1.5rem,5vw,2rem);color:var(--f-bone,#efe9e0);margin-bottom:8px}
.wfilms--caja .wfilms__head p{font-family:var(--serif,Georgia,serif);font-style:italic;
  color:rgba(239,233,224,.6);font-size:1.02rem;max-width:52ch}
.wfilms--caja .wfilms__grid{padding:0 clamp(20px,4vw,32px);
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}

.wfilms__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(14px,1.8vw,22px);
  padding:0 var(--pad,24px);
  max-width:1500px;margin:0 auto;
}

.wf{
  position:relative;display:block;width:100%;padding:0;border:0;
  background:#12100f;border-radius:2px;overflow:hidden;cursor:pointer;
  font-family:inherit;color:var(--f-bone);text-align:left;
  transition:transform .55s var(--f-ease);
}
.wf:hover{transform:translateY(-4px)}
.wf:focus-visible{outline:2px solid var(--f-brass);outline-offset:3px}

.wf__shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:#12100f}
.wf__shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--f-ease),opacity .6s ease;opacity:0}
.wf__shot img.cargada{opacity:1}
.wf:hover .wf__shot img{transform:scale(1.045)}
.wf__shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,9,8,.82) 0%,rgba(10,9,8,.12) 46%,transparent 72%)}

.wf__play{position:absolute;z-index:2;left:50%;top:50%;
  width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  border:1px solid rgba(239,233,224,.5);background:rgba(10,9,8,.3);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:background .45s var(--f-ease),border-color .45s var(--f-ease)}
.wf:hover .wf__play{background:var(--f-brass);border-color:var(--f-brass)}
.wf__play::before{content:'';width:0;height:0;margin-left:4px;
  border-left:13px solid var(--f-bone);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  transition:border-left-color .45s var(--f-ease)}
.wf:hover .wf__play::before{border-left-color:var(--f-ink)}

.wf__pie{position:absolute;z-index:2;left:0;right:0;bottom:0;
  padding:20px 22px;display:flex;align-items:flex-end;gap:12px}
.wf__n{flex:1;min-width:0}
.wf__n b{display:block;font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:clamp(1.08rem,3.2vw,1.32rem);line-height:1.2;letter-spacing:.01em}
.wf__n span{display:block;margin-top:4px;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(239,233,224,.55)}
.wf__dur{flex:0 0 auto;font-size:.66rem;letter-spacing:.14em;
  color:rgba(239,233,224,.72);font-variant-numeric:tabular-nums}

/* ── visor ── */
.visor{position:fixed;inset:0;z-index:9000;display:none;
  align-items:center;justify-content:center;
  background:#060505;padding:clamp(12px,3vw,44px)}
.visor.abierto{display:flex}
.visor__caja{position:relative;width:100%;max-width:1360px}
.visor video{width:100%;max-height:82svh;display:block;background:#000;
  border-radius:2px;outline:none}
.visor__top{display:flex;align-items:baseline;gap:14px;
  margin-bottom:14px;padding-right:52px}
.visor__top b{font-family:var(--serif,Georgia,serif);font-weight:400;
  font-size:clamp(1.1rem,3.6vw,1.5rem);color:var(--f-bone,#efe9e0)}
.visor__top span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(239,233,224,.45)}
.visor__x{position:absolute;top:-6px;right:0;width:44px;height:44px;
  border:0;background:none;cursor:pointer;padding:0}
.visor__x::before,.visor__x::after{content:'';position:absolute;
  left:11px;right:11px;top:21px;height:1px;background:rgba(239,233,224,.7)}
.visor__x::before{transform:rotate(45deg)}
.visor__x::after{transform:rotate(-45deg)}
.visor__x:hover::before,.visor__x:hover::after{background:var(--f-brass,#b99a6b)}
.visor__carga{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(239,233,224,.6);pointer-events:none;display:none}
.visor.cargando .visor__carga{display:block}
body.visor-abierto{overflow:hidden}

@media (max-width:640px){
  .wfilms__grid{grid-template-columns:1fr;gap:12px}
  .wf__pie{padding:16px 17px}
  .wf__play{width:50px;height:50px;margin:-25px 0 0 -25px}
  .visor{padding:0}
  .visor__caja{max-width:none}
  .visor video{max-height:70svh;border-radius:0}
  .visor__top{flex-direction:column;align-items:flex-start;gap:3px;
    padding:16px 58px 14px 18px;margin-bottom:0}
  .visor__top b{font-size:1.15rem;line-height:1.25}
  .visor__x{top:8px;right:8px}
}
@media (prefers-reduced-motion:reduce){
  .wf,.wf__shot img{transition:none}
  .wf:hover{transform:none}
  .wf:hover .wf__shot img{transform:none}
}