/* REL · «Producto con relato» de la home: video ambiente en bucle (5 nov 2026, v3).
   Sin controles ni reproductor: forma parte del ambiente de la pagina.
   La marca que aparece en el montaje se nombra y enlaza a su ficha. */
.rel{position:relative;background:var(--ink);border-top:1px solid var(--line-soft)}
.rel-stage{position:relative;overflow:hidden;height:clamp(440px,52vw,720px);background:var(--ink-deep)}
.rel-stage img,.rel-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rel-stage video{opacity:0;transition:opacity 1.2s ease}
.rel-stage.is-ready video{opacity:1}
/* velo para leer el texto sin tapar la imagen */
.rel-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,12,.55) 0,rgba(14,13,12,0) 22%,rgba(14,13,12,0) 55%,rgba(14,13,12,.78) 100%)}
.rel-tx{position:absolute;z-index:2;left:var(--pad);bottom:clamp(28px,4vw,56px);max-width:min(560px,70%)}
.rel-h{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:1.05;margin:0 0 10px;color:var(--cream);text-wrap:balance}
.rel-p{margin:0;font-size:clamp(14px,1.3vw,16px);line-height:1.55;color:rgba(245,240,230,.82);max-width:42ch}
.rel-now{position:absolute;z-index:2;right:var(--pad);bottom:clamp(28px,4vw,56px)}
.rel-now a{display:none;align-items:center;gap:10px;min-height:44px;font-family:var(--serif);font-size:clamp(16px,1.5vw,19px);color:var(--cream);text-decoration:none}
.rel-now a::after{content:"→";font-family:var(--sans);font-size:14px;color:var(--gold);transition:transform .3s ease}
.rel-now a:hover::after,.rel-now a:focus-visible::after{transform:translateX(4px)}
.rel-now a.is-on{display:inline-flex;animation:relIn .7s ease both}
.rel-now a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:4px}
html:not(.rel-js) .rel-now a:first-child{display:inline-flex}
@keyframes relIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* movil: el video manda; texto y marca debajo, sin superponer */
@media(max-width:759px){
  .rel-stage{height:auto;aspect-ratio:4/5}
  .rel-stage::after{background:linear-gradient(180deg,rgba(14,13,12,0) 60%,rgba(14,13,12,.7) 100%)}
  .rel-tx{left:20px;right:20px;bottom:64px;max-width:none}
  .rel-h{font-size:1.75rem}
  .rel-p{font-size:14px}
  .rel-now{left:20px;right:auto;bottom:14px}
  .rel-now a{font-size:15px;min-height:40px}
}
@media(prefers-reduced-motion:reduce){.rel-stage video{display:none}.rel-now a.is-on{animation:none}}