/* Vídeos de la web: película de marca, resultados en movimiento y formación en salón */
.clip video,.video-marca video,.salon .foto video{display:block;width:100%;height:100%;object-fit:cover}

/* Quiénes somos */
.marca .caja{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,7vw,96px);align-items:center}
.marca .lista-fina{list-style:none;margin-top:calc(4*var(--u));border-top:1px solid var(--linea)}
.marca .lista-fina li{padding:calc(2*var(--u)) 0;border-bottom:1px solid var(--linea);display:flex;gap:calc(2*var(--u));font-size:16px}
.marca .lista-fina li::before{content:"";flex:0 0 8px;height:8px;margin-top:9px;background:var(--oro);transform:rotate(45deg)}
.marca .acciones{margin-top:calc(4*var(--u))}
.marca .btn-oscuro{background:var(--cacao);color:#fff}
.video-marca{position:relative!important;top:auto!important;max-width:420px;width:100%;justify-self:center}

/* Resultados en movimiento */
.movimiento{margin-top:calc(8*var(--u))}
.cabeza-mov{display:flex;justify-content:space-between;align-items:flex-end;gap:calc(3*var(--u));flex-wrap:wrap}
.cabeza-mov h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,38px);margin-top:var(--u)}
.cabeza-mov p{color:#BFAFA2;font-size:15px;max-width:380px}
.tira-mov{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(2*var(--u));margin-top:calc(4*var(--u))}
.clip{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;background:#1d1717;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.clip .chapa{top:14px;left:14px}
.clip::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,transparent,rgba(30,22,22,.35));pointer-events:none}
/* versión clara (página de producto sobre fondo crema) */
.claro .cabeza-mov p{color:var(--gris)}

/* Formación en salón */
.salon .foto{aspect-ratio:4/5;position:relative;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)}
.salon .foto video{position:absolute;left:0;right:0;top:-8%;height:116%;width:100%}

@media (max-width:900px){
  .marca .caja{grid-template-columns:1fr}
  .video-marca{max-width:360px}
  .tira-mov{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--u);margin-right:calc(-1*var(--lado));padding-right:var(--lado)}
  .clip{scroll-snap-align:start}
}