/* =========================================================
Solved Design System — GATE DE VÍDEO
Un vídeo cerrado, su formulario al lado, y el vídeo abierto en el mismo sitio
donde estaba cerrado. Va en las dos landings de caso —/casos-de-exito/carnavi/
y /casos-de-exito/panificadora-alcala/— y cada una tiene EL SUYO: un vídeo,
un formulario, una landing. Aquí abajo, .vcase es la tarjeta con la que el
índice manda a cada una.
UN GATE POR PÁGINA, Y NO DOS EN LA MISMA
El formulario de HubSpot avisa de que se ha enviado con un postMessage que no
dice de qué formulario viene. Con un solo gate por página no hay ambigüedad
posible; con dos, el primero en escuchar abriría los dos vídeos. Si algún día
hacen falta dos en una página, esto hay que resolverlo antes.
LA REGLA DEL COMPONENTE
Lo que se enseña cerrado tiene que ser VERDAD. El póster es un fotograma real
del vídeo —con su rótulo de nombre y cargo, que ya viene grabado—, la
duración es la de verdad y la descripción cuenta lo que se oye, no lo que
convendría. Un candado sobre un fotograma inventado, o una duración a ojo, es
lo que convierte una landing en un anzuelo.
NO ES UN MURO DE PAGO, Y NO SE PUEDE VENDER COMO TAL
Esto es un sitio estático: el `src` del vídeo es una URL pública y quien mire
el marcado la encuentra. El gate filtra al visitante normal, no al que quiere
saltárselo, y por eso el vídeo no lleva nada que no se pueda enseñar. Lo que
sí hace bien: el vídeo NO se descarga hasta que se abre —el `src` vive en
`data-src`—, así que la página pesa lo que pesa el póster.
LA LANDING ES UNA PANTALLA
Hero con el gate dentro y, debajo, sólo los enlaces a otras páginas. Nada de
secciones intermedias: cada una es una salida más entre el visitante y el
formulario, que es lo único que esta página tiene que conseguir.
ABIERTO UNA VEZ, ABIERTO SIEMPRE
Al abrirse se guarda una marca en localStorage, una por caso. Volver a pedir
el correo a quien ya lo dejó no da un lead nuevo, sólo da sensación de peaje.
Requiere ds/tokens.css. Script: ds/gate.js.
========================================================= */
.gate{
display:flex;
flex-direction:column;
gap:var(--s-5, 28px);
}
/* EL GATE VA DENTRO DE LA HERO, y ese es todo el diseño de la landing: título,
descripción y foto del vídeo a la izquierda, petición a la derecha, y debajo
de la hero sólo los enlaces a otras páginas. Una pantalla y ya.
A la izquierda porque el shader lava hacia ese lado y es donde el texto se
lee —la regla está escrita en ds/hero.css—; la caja blanca del formulario
aguanta el color saturado de la derecha, que un párrafo en gris no aguanta.
Abierto, el formulario desaparece y el vídeo se queda con las dos columnas
— ver el bloque de estado de más abajo. */
.gate--hero{
display:grid;
grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
gap:var(--s-5, 28px);
align-items:center;
width:100%;
}
.gate__intro{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:20px;
max-width:640px;
}
/* ---------- El marco ---------- */
/* `minmax(0,1fr)` y no `1fr` por lo mismo que en .photo-band: una pista
automática se dimensiona por el contenido y el vídeo la estira. */
.gate__frame,
.vcase__frame{
position:relative;
display:grid;
grid-template-rows:minmax(0, 1fr);
aspect-ratio:16/9;
border-radius:var(--ds-radius-card, 12px);
overflow:hidden;
background:var(--ds-surface-steel);
border:1px solid var(--ds-border);
box-shadow:var(--ds-elev-1);
}
/* Cerrado se ve el ![]()
y abierto el