/* ==========================================================================
YPF RUTA — Rediseño 2026
Disparador de video + modal (lightbox). Reutilizable en cualquier sección.
Figma: modal 267:29173 · botón de cierre 276:97 (cuadrado blanco 64x64
con una X azul, pegado al vértice superior derecho del video).
Markup del disparador (ver home-hero.css para el layout que lo contiene):
El modal lo inyecta js/newdesign/video-modal.js una sola vez en el ,
así no se repite markup en cada página ni en cada sección.
========================================================================== */
/* --------------------------------------------------------------------------
1. Disparador
-------------------------------------------------------------------------- */
.nd-video {
appearance: none;
-webkit-appearance: none;
aspect-ratio: 16 / 9;
background: var(--nd-black);
border: 0;
border-radius: var(--nd-radius);
cursor: pointer;
display: block;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.nd-video__poster {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
/* Círculo "Play".
Posición por defecto: centrado. En dispositivos con mouse el JS le escribe
--nd-x / --nd-y para que siga al cursor (así está planteado en el Figma de
desktop, donde el círculo no está centrado sino donde está el puntero). */
.nd-video__play {
align-items: center;
background-color: var(--nd-blue);
border-radius: 50%;
color: var(--nd-white);
display: flex;
font-family: var(--nd-font-display);
font-size: 24px;
font-weight: var(--nd-w-regular);
height: 80px;
justify-content: center;
left: var(--nd-x, 50%);
letter-spacing: 0.96px;
line-height: 22px;
pointer-events: none;
position: absolute;
top: var(--nd-y, 50%);
transform: translate(-50%, -50%);
width: 80px;
}
/* Táctil / sin mouse: el círculo queda siempre visible y centrado
(así está en el Figma de mobile, 267:27713). */
/* Con mouse: aparece sólo en hover y sigue al cursor. */
@media (hover: hover) and (pointer: fine) {
.nd-video__play {
opacity: 0;
transform: translate(-50%, -50%) scale(0.6);
transition: opacity 0.25s ease, transform 0.25s ease;
will-change: left, top, transform;
}
.nd-video.is-hovered .nd-video__play {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
/* Foco por teclado */
.nd-video:focus-visible {
outline: 2px solid var(--nd-white);
outline-offset: 4px;
}
.nd-video:focus-visible .nd-video__play {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* --------------------------------------------------------------------------
2. Modal
-------------------------------------------------------------------------- */
.nd-modal {
align-items: center;
background-color: rgba(0, 0, 0, 0.92);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 0;
padding: var(--nd-gutter);
position: fixed;
right: 0;
top: 0;
transition: opacity 0.25s ease, visibility 0.25s ease;
visibility: hidden;
z-index: var(--nd-z-modal);
}
.nd-modal.is-open {
opacity: 1;
visibility: visible;
}
/* El 16:9 lo manda el dialog, no el reproductor: los reproductores lo llenan
en absoluto. Así el video siempre entra completo en pantalla sin importar
el alto del viewport. */
.nd-modal__dialog {
aspect-ratio: 16 / 9;
max-width: 1440px;
position: relative;
width: 100%;
}
@supports (width: min(1px, 2px)) {
.nd-modal__dialog {
max-width: min(1440px, calc((100vh - (var(--nd-gutter) * 2)) * 16 / 9));
}
}
/* En mobile la barra del navegador se muestra y se esconde: 100vh no cambia y
el video terminaba pasándose de alto. dvh sí acompaña. */
@supports (height: 100dvh) {
.nd-modal__dialog {
max-width: min(1440px, calc((100dvh - (var(--nd-gutter) * 2)) * 16 / 9));
}
}
/* El modal muestra un