/* ============================================================
   VerticalVideoBanner.css — Estilos propios del widget VerticalVideoBanner
   Bticino Mx · Sitefinity Renderer
   ============================================================

   Widget GENERAL: Hero de video institucional, reutilizable en cualquier vertiente -- se identificó
   por primera vez en Corporativo (nodo "HERO · video institucional", 1535:30265 PC, 1535:29830
   tablet, 1535:30038 mobile del Figma).

   NO se declara font-family: la resuelve site.css reasignando --bs-body-font-family en :root.

   A diferencia de VerticalHeroBanner, todo el contenido (botón de play, etiqueta con duración,
   bajada) va SIEMPRE centrado -- horizontal y vertical -- dentro de toda la sección, sin anclarse a
   un borde. Los tres rangos comparten ese mismo acomodo; lo único que cambia es el alto de la
   sección y el ancho máximo de la bajada.

   Breakpoints propios: mobile hasta 500px, tablet hasta 1024px, laptop hasta 1200px (hereda
   desktop), desktop de 1201px en adelante.
   ============================================================ */

.VerticalVideoBanner {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* 474/1280 = 37.03vw. El techo evita una sección absurda en un monitor ultrawide. */
    min-height: clamp(474px, 37.03vw, 640px);
    background-color: #0f0f12; /* Color de respaldo mientras el video carga. */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.VerticalVideoBanner-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* Anula el max-width:100% que Bootstrap le pone a los medios. */
    object-fit: cover;
    object-position: center;
    pointer-events: none; /* El clic lo resuelve el botón del reproductor, no el video. */
}

/* Velo parejo de legibilidad -- a diferencia de VerticalHeroBanner, acá es un solo tono plano, sin
   degradado, porque el contenido está centrado y no pegado a un borde. */
.VerticalVideoBanner-scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 15, 18, 0.42);
    pointer-events: none;
    /* Se apaga al reproducir -- ver el bloque is-playing. */
    transition: opacity 0.3s ease-in-out;
}

/* Línea de acento decorativa, esquina inferior izquierda. Verde de Corporativo -- no es el naranja
   de marca que usan los demás Hero, es propio de esta vertiente. */
.VerticalVideoBanner-accent-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 384px;
    max-width: 30%;
    height: 3px;
    background-color: #6fa83c;
    pointer-events: none;
}

/* Franja de fondo de la etiqueta vertical, del ancho del nodo "etiqueta vertical" (46px), a todo el
   alto de la sección. Se ve siempre; el texto rotado adentro es lo opcional. */
.VerticalVideoBanner-side-label-strip {
    position: absolute;
    inset: 0 0 0 auto;
    width: 46px;
    background-color: rgba(15, 15, 18, 0.3);
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

/* Caja de posicionamiento del texto rotado -- mismo criterio que VerticalHeroBanner-side-label-wrap:
   ancla desde abajo para no heredar un desborde del nodo en pantallas más anchas que la mesa de
   trabajo. */
.VerticalVideoBanner-side-label-wrap {
    position: absolute;
    left: 98.67%; /* 1263px / 1280px. */
    bottom: 4%;
    width: 1.02%; /* 13px / 1280px. */
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.VerticalVideoBanner-side-label {
    margin: 0;
    transform: rotate(-90deg);
    font-size: 11px;
    font-weight: 700; /* Acumin Pro Bold del diseño. */
    letter-spacing: 0.44px;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Envoltorio del reproductor: el botón de play y el de sonido.
   ------------------------------------------------------------ */

/* Ocupa todo el ancho de la sección a propósito: así su 50% coincide con el centro del círculo de
   play, que es la referencia con la que se cuelga el botón de sonido. */
.VerticalVideoBanner-player-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* ------------------------------------------------------------
   Reproductor: botón único, clickeable, que agrupa el play, la etiqueta y la bajada.
   ------------------------------------------------------------ */
.VerticalVideoBanner-player {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: min(620px, calc(100% - 96px)); /* 620px del nodo, sin tocar la franja lateral. */
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    /* Reinicia los estilos nativos de <button> para que se vea como el diseño, no como un control
       del navegador. */
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: center;
}

.VerticalVideoBanner-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.3);
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    /* El glifo ▶ no queda ópticamente centrado en un círculo -- se corrige corriéndolo 3px. */
    padding-left: 6px;
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

    .VerticalVideoBanner-player:hover .VerticalVideoBanner-play,
    .VerticalVideoBanner-player:focus-visible .VerticalVideoBanner-play {
        transform: scale(1.05);
        background-color: rgba(255, 255, 255, 0.24);
    }

    .VerticalVideoBanner-player:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 4px;
    }

.VerticalVideoBanner-label {
    margin: 0;
    font-size: 11px;
    font-weight: 700; /* Archivo Bold del diseño. */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

.VerticalVideoBanner-caption {
    margin: 0;
    font-size: 15px;
    font-weight: 400; /* Archivo Regular del diseño. */
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------
   Control de sonido: círculo secundario a la izquierda del play.
   ------------------------------------------------------------ */

/* Se cuelga en ABSOLUTO y no como ítem de una fila flex para que el círculo de play no se corra:
   en una fila, el grupo se centraría y el play quedaría desplazado respecto del diseño.
   right: 46px de radio del play + 24px de separación. top: (92 - 56) / 2, para centrarlo contra el
   círculo grande. Comparte borde, velo, sombra y hover con el play; solo cambia el diámetro. */
.VerticalVideoBanner-sound {
    position: absolute;
    /* POR ENCIMA DEL BOTÓN DE PLAY: la caja de ese botón la estira la bajada -- llega a 620px de
       ancho -- y CUBRE por completo el lugar donde va este círculo. Con z-index: 1 en el player y
       automático acá, el clic lo intercepta el play y en vez de silenciar, reproduce. */
    z-index: 2;
    top: 18px;
    right: calc(50% + 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.3);
    color: #ffffff;
    cursor: pointer;
    appearance: none; /* Saca los estilos nativos de <button>. */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

    .VerticalVideoBanner-sound:hover,
    .VerticalVideoBanner-sound:focus-visible {
        transform: scale(1.05);
        background-color: rgba(255, 255, 255, 0.24);
    }

    .VerticalVideoBanner-sound:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 4px;
    }

.VerticalVideoBanner-sound-icon {
    width: 24px;
    height: 24px;
    display: block;
}

/* Con sonido se ve el parlante con ondas; silenciado, el tachado. Los dos íconos viven siempre en
   el marcado y solo se alterna cuál se pinta. */
.VerticalVideoBanner-sound-icon--off {
    display: none;
}

.VerticalVideoBanner.is-muted .VerticalVideoBanner-sound-icon--on {
    display: none;
}

.VerticalVideoBanner.is-muted .VerticalVideoBanner-sound-icon--off {
    display: block;
}

/* ------------------------------------------------------------
   Reproduciendo: el envoltorio se oculta entero -- play, sonido, etiqueta y bajada -- y el clic para pausar lo
   resuelve el mismo <video>, que reaparece como control clickeable (ver VerticalVideoBanner.js).
   ------------------------------------------------------------ */
.VerticalVideoBanner.is-playing .VerticalVideoBanner-player-wrap {
    display: none;
}

.VerticalVideoBanner.is-playing .VerticalVideoBanner-video {
    pointer-events: auto;
    cursor: pointer;
}

/* Velo y franja lateral -- con su texto rotado -- se apagan mientras reproduce: el video se ve
   nítido y sin capas encima. Con opacity y NO display: none, para poder animar el desvanecido;
   ninguna de las tres recibe clics, así que apagadas no tapan nada. Vuelven solas al pausar. */
.VerticalVideoBanner.is-playing .VerticalVideoBanner-scrim,
.VerticalVideoBanner.is-playing .VerticalVideoBanner-side-label-strip,
.VerticalVideoBanner.is-playing .VerticalVideoBanner-side-label-wrap {
    opacity: 0;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------
   El reproductor (botón, etiqueta, bajada) es IDÉNTICO en los tres rangos -- ni tamaños ni acomodo
   cambian. Solo cambia el alto de la sección y el ancho máximo de la bajada, y la etiqueta lateral
   rotada se oculta bajo 1024px, igual que en VerticalHeroBanner.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .VerticalVideoBanner-side-label-wrap {
        display: none;
    }

    /* 403/768 = 52.47vw. */
    .VerticalVideoBanner {
        min-height: clamp(380px, 52.47vw, 460px);
    }
}

@media (max-width: 500px) {
    /* 403/375 = 107.47vw. */
    .VerticalVideoBanner {
        min-height: clamp(380px, 107.47vw, 460px);
    }

    .VerticalVideoBanner-player {
        max-width: min(335px, calc(100% - 96px));
    }
}

/* El marcador de posición que este widget muestra en el editor cuando no tiene contenido NO se
   estiliza acá: usa las clases WidgetPlaceholder de site.css, comunes a todos los widgets. */