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

   Texto a un lado y video al otro. Nodos de Figma: 4257:84257 (PC), 4257:84404 y 4257:84412
   (tablet), 4257:84548 y 4257:84556 (mobile).

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

   En PC son dos mitades iguales con un alto mínimo de 600px; en tablet y mobile se apilan (texto
   arriba, video abajo) y el video toma la proporción de su nodo. Todo el texto es opcional y la
   columna de texto se centra verticalmente, así que lo que falta no deja huecos.

   Breakpoints del @media propio: mobile hasta 500px, tablet hasta 1024px, laptop hasta 1200px
   (hereda desktop), desktop de 1201px en adelante sin @media.
   ============================================================ */

.IntroVideoText {
    --IntroVideoText-play-size: 104px; /* Diámetro del círculo de play. */
    width: 100%;
    box-sizing: border-box;
    padding: 30px 0; /* Aire arriba y abajo para que no quede pegado a los widgets vecinos. */
    background-color: #ffffff;
}

.IntroVideoText-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: var(--container-max-width);
    min-height: 600px;
    margin-inline: auto;
}

/* ------------------------------------------------------------
   Columna de texto
   ------------------------------------------------------------ */
.IntroVideoText-text {
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centrada: lo que no se emite no deja huecos. */
    padding: 64px 60px 64px 72px;
    background-color: #ffffff;
}

.IntroVideoText-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Cada pieza lleva el espacio que el diseño deja DESPUÉS de ella; la última no deja ninguno. */
.IntroVideoText-body > :last-child {
    margin-bottom: 0;
}

.IntroVideoText-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #243746;
    max-width: 100%; /* Con el máximo de caracteres no se sale de la columna. */
    overflow-wrap: anywhere; /* Una palabra larga baja de renglón en vez de desbordar. */
}

    /* El texto de la etiqueta puede encogerse por debajo de su ancho natural (si no, flex no lo corta). */
    .IntroVideoText-eyebrow > span:last-child {
        min-width: 0;
    }

.IntroVideoText-eyebrow-dot {
    width: 8px;
    height: 8px;
    background-color: #243746;
    flex-shrink: 0;
}

.IntroVideoText-title {
    margin: 0 0 18px;
    max-width: 100%;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #0f0f12;
    overflow-wrap: break-word;
}

/* Franja decorativa. El color lo elige el editor en la paleta del CMS. */
.IntroVideoText-bar {
    width: 84px;
    height: 5px;
    margin: 0 0 20px;
    flex-shrink: 0;
    background-color: var(--IntroVideoText-bar-color);
}

.IntroVideoText-description {
    margin: 0 0 28px;
    max-width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(15, 15, 18, 0.6);
    overflow-wrap: break-word;
}

.IntroVideoText-button {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Separación estándar entre etiqueta y flecha. */
    margin: 0;
    padding: 15px 26px;
    border-radius: 6px;
    background-color: #243746;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #ffffff;
    text-decoration: none;
    max-width: 100%; /* Un texto largo baja de renglón en vez de salirse de la columna. */
    overflow-wrap: anywhere; /* Ídem con una palabra larga. */
    transform: scale(1);
    transition: transform 0.2s ease-in-out, gap 0.2s ease-in-out; /* gap anima la flecha. */
}

    /* Bootstrap trae "a:hover { text-decoration: underline }", que le gana a una sola clase. :active
       cubre el toque en tablet y mobile. */
    .IntroVideoText-button:hover,
    .IntroVideoText-button:focus-visible,
    .IntroVideoText-button:active {
        gap: 10px; /* Separación estándar en hover y foco. */
        transform: scale(1.05);
        color: #ffffff;
        text-decoration: none;
    }

/* Flecha estándar de LegalLinksSection. */
.IntroVideoText-button-arrow {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Línea fija de abajo. Sin texto arriba queda sola. */
.IntroVideoText-divider {
    width: 100%;
    height: 1px;
    background-color: #e0e0e3;
}

/* Con piezas arriba, la línea se separa de la última con 30px. */
.IntroVideoText-body + .IntroVideoText-divider {
    margin-top: 30px;
}

/* ------------------------------------------------------------
   Lienzo del video
   ------------------------------------------------------------ */
.IntroVideoText-media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background-color: #e5e7ea; /* Fondo gris del diseño, también de respaldo mientras el video carga. */
}

.IntroVideoText-video,
.IntroVideoText-thumbnail,
.IntroVideoText-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* Anula el max-width:100% que Bootstrap le pone a los medios. */
    border: 0;
}

.IntroVideoText-video,
.IntroVideoText-thumbnail {
    object-fit: cover;
    object-position: center;
}

/* El video no recibe clics en reposo: los recibe el botón de play que lo cubre. */
.IntroVideoText-video {
    pointer-events: none;
}

/* Botón único que cubre el lienzo y centra el círculo de play. */
.IntroVideoText-start {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    appearance: none; /* Reinicia los estilos nativos de <button>. */
}

.IntroVideoText-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--IntroVideoText-play-size);
    height: var(--IntroVideoText-play-size);
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 12px 38px 0 rgba(128, 31, 0, 0.3);
    transition: transform 0.2s ease-in-out;
}

/* Aro exterior del diseño de PC: 148px de diámetro alrededor del círculo de 104. */
.IntroVideoText-play::before {
    content: "";
    position: absolute;
    inset: -22px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    pointer-events: none;
}

.IntroVideoText-play-icon {
    width: 8px;
    height: 9px;
    margin-left: 2px; /* Corrige el centrado óptico de un triángulo dentro de un círculo. */
    fill: #243746;
}

    .IntroVideoText-start:hover .IntroVideoText-play,
    .IntroVideoText-start:focus-visible .IntroVideoText-play {
        transform: scale(1.05);
    }

    .IntroVideoText-start:focus-visible {
        outline: none;
    }

    .IntroVideoText-start:focus-visible .IntroVideoText-play {
        outline: 2px solid #243746;
        outline-offset: 4px;
    }

/* ------------------------------------------------------------
   Control de sonido: círculo a la izquierda del play, solo en reposo.
   ------------------------------------------------------------ */
.IntroVideoText-sound {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: calc(50% + var(--IntroVideoText-play-size) / 2 + 40px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.18);
    color: #243746;
    cursor: pointer;
    appearance: none;
    transition: scale 0.2s ease-in-out;
}

    .IntroVideoText-sound:hover,
    .IntroVideoText-sound:focus-visible {
        scale: 1.05;
    }

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

.IntroVideoText-sound-icon {
    width: 22px;
    height: 22px;
    display: block;
}

/* Con sonido se ve el parlante con ondas; silenciado, el tachado. */
.IntroVideoText-sound-icon--off {
    display: none;
}

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

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

/* ------------------------------------------------------------
   Barra de progreso (opcional): 00:00 ——— duración.
   ------------------------------------------------------------ */
.IntroVideoText-progress {
    position: absolute;
    z-index: 2;
    left: 48px;
    right: 48px;
    bottom: 54px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.IntroVideoText-time {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan al avanzar. */
    white-space: nowrap;
}

/* Riel. El alto de 3px es el del diseño; el área de clic es más alta (::before) para poder acertarle. */
.IntroVideoText-track {
    position: relative;
    flex: 1 1 0;
    min-width: 1px;
    height: 3px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
}

    .IntroVideoText-track::before {
        content: "";
        position: absolute;
        inset: -9px 0;
    }

.IntroVideoText-track-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background-color: #ffffff;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Reproduciendo (video interno): se va el play y el sonido; el clic para pausar lo resuelve el
   mismo <video>, que pasa a recibir clics solo si el editor habilitó la pausa.
   ------------------------------------------------------------ */
.IntroVideoText-media.is-playing .IntroVideoText-start,
.IntroVideoText-media.is-playing .IntroVideoText-sound {
    display: none;
}

.IntroVideoText-media[data-intro-pausable="true"].is-playing .IntroVideoText-video {
    pointer-events: auto;
    cursor: pointer;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .IntroVideoText {
        --IntroVideoText-play-size: 80px;
    }

    .IntroVideoText-inner {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .IntroVideoText-text {
        justify-content: flex-start;
        padding: 48px 32px;
    }

    /* Mismo espacio entre piezas en todo el bloque, como en el nodo de tablet. */
    .IntroVideoText-eyebrow,
    .IntroVideoText-title,
    .IntroVideoText-bar,
    .IntroVideoText-description {
        margin-bottom: 18px;
    }

    .IntroVideoText-eyebrow-dot {
        width: 7px;
        height: 7px;
    }

    .IntroVideoText-title {
        font-weight: 900; /* Archivo Black del diseño de tablet y mobile. */
        line-height: normal;
    }

    /* Lienzo con la proporción del nodo de tablet (768 x 271). */
    .IntroVideoText-media {
        aspect-ratio: 768 / 271;
        background-color: #e5e5e8;
    }

    /* Sin el aro exterior: el diseño de tablet y mobile no lo trae. */
    .IntroVideoText-play {
        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.18);
    }

    .IntroVideoText-play::before {
        display: none;
    }

    .IntroVideoText-play-icon {
        width: 17px;
        height: 18px;
    }

    .IntroVideoText-sound {
        width: 44px;
        height: 44px;
        right: calc(50% + var(--IntroVideoText-play-size) / 2 + 24px);
    }

    .IntroVideoText-progress {
        left: 24px;
        right: 24px;
        bottom: 20px;
    }
}

@media (max-width: 500px) {
    .IntroVideoText {
        --IntroVideoText-play-size: 64px;
    }

    .IntroVideoText-text {
        padding: 36px 20px;
    }

    .IntroVideoText-eyebrow,
    .IntroVideoText-title,
    .IntroVideoText-bar,
    .IntroVideoText-description {
        margin-bottom: 16px;
    }

    .IntroVideoText-title {
        font-size: 26px;
    }

    /* Lienzo con la proporción del nodo de mobile (375 x 214). */
    .IntroVideoText-media {
        aspect-ratio: 375 / 214;
    }

    .IntroVideoText-play {
        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.18);
    }

    .IntroVideoText-play-icon {
        width: 14px;
        height: 15px;
    }

    .IntroVideoText-sound {
        width: 40px;
        height: 40px;
        right: calc(50% + var(--IntroVideoText-play-size) / 2 + 16px);
    }

    .IntroVideoText-sound-icon {
        width: 20px;
        height: 20px;
    }

    .IntroVideoText-progress {
        left: 16px;
        right: 16px;
        bottom: 12px;
        gap: 8px;
    }
}

/* Movimiento reducido: el botón no se agranda ni la flecha avanza. */
@media (prefers-reduced-motion: reduce) {
    .IntroVideoText-button,
    .IntroVideoText-play,
    .IntroVideoText-sound {
        transition: none;
    }

    .IntroVideoText-button:hover,
    .IntroVideoText-button:focus-visible,
    .IntroVideoText-button:active {
        gap: 6px;
        transform: none;
    }

    .IntroVideoText-start:hover .IntroVideoText-play,
    .IntroVideoText-start:focus-visible .IntroVideoText-play,
    .IntroVideoText-sound:hover,
    .IntroVideoText-sound:focus-visible {
        transform: none;
        scale: 1;
    }
}

/* 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. */

/* ------------------------------------------------------------
   Imagen en lugar del video (tipo de media "Image"): llena el lienzo sin deformarse.
   ------------------------------------------------------------ */
.IntroVideoText-image {
    position: absolute; /* Llena el lienzo, como el video. */
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Llena sin deformar. */
}

/* Nota chica bajo una rayita celeste (solo acomodo "Career"). */
.IntroVideoText-footnote-bar {
    display: block;
    width: 48px; /* Ancho del nodo. */
    height: 3px; /* Alto del nodo. */
    margin: 0 0 16px; /* Separación del nodo con la nota. */
    border-radius: 2px; /* Puntas del nodo. */
    background-color: #429cde; /* Celeste del nodo. */
}

.IntroVideoText-footnote {
    margin: 0; /* Último elemento: sin espacio después. */
    max-width: 100%; /* No desborda. */
    font-size: 13px; /* Tamaño del nodo. */
    line-height: 25px; /* Interlineado del nodo. */
    color: #222a30; /* Color del nodo. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

/* ------------------------------------------------------------
   Acomodo "Career" (nodo "Carrera · estilo valor-2": 4031:90888 PC, 4031:91065 tablet y
   4031:91242 mobile). Texto (504) y media (570 × 460) con 56 de separación, botón celeste, sin
   línea gris abajo y con la nota opcional bajo la rayita.
   ------------------------------------------------------------ */
.IntroVideoText--career {
    padding: 0; /* El relleno lo pone el contenedor. */
}

    .IntroVideoText--career .IntroVideoText-inner {
        grid-template-columns: minmax(0, 504fr) minmax(0, 570fr); /* Proporción del nodo. */
        align-items: center; /* Texto centrado en vertical con la media. */
        gap: 56px; /* Separación del nodo. */
        min-height: 0; /* Sin el alto mínimo del acomodo de siempre. */
        max-width: 1280px; /* Ancho del nodo de PC. */
        padding: 72px 80px; /* Relleno del nodo. */
    }

    .IntroVideoText--career .IntroVideoText-text {
        padding: 0; /* El relleno lo pone el contenedor. */
    }

    .IntroVideoText--career .IntroVideoText-divider {
        display: none; /* El nodo no lleva la línea gris de abajo. */
    }

    .IntroVideoText--career .IntroVideoText-eyebrow,
    .IntroVideoText--career .IntroVideoText-title,
    .IntroVideoText--career .IntroVideoText-bar,
    .IntroVideoText--career .IntroVideoText-description {
        margin-bottom: 16px; /* Separación del nodo. */
    }

    .IntroVideoText--career .IntroVideoText-eyebrow-dot {
        width: 7px; /* Tamaño del nodo. */
        height: 7px; /* Ídem. */
    }

    .IntroVideoText--career .IntroVideoText-title {
        font-size: 28px; /* Tamaño del nodo. */
        font-weight: 700; /* Bold del nodo. */
        line-height: 36px; /* Interlineado del nodo. */
        color: #1b2d3a; /* Azul noche del nodo. */
        overflow-wrap: anywhere; /* Una palabra larga no desborda. */
    }

    .IntroVideoText--career .IntroVideoText-description {
        line-height: 26px; /* Interlineado del nodo. */
        color: rgba(34, 42, 48, 0.75); /* Gris del nodo. */
        overflow-wrap: anywhere; /* Una palabra larga no desborda. */
    }

    .IntroVideoText--career .IntroVideoText-button {
        max-width: 100%; /* Un texto largo baja de renglón en vez de desbordar. */
        margin-bottom: 16px; /* Separación del nodo con la rayita. */
        padding: 15px 28px; /* Relleno del nodo. */
        background-color: #429cde; /* Celeste del nodo. */
        font-size: 13.5px; /* Tamaño del nodo. */
        font-weight: 700; /* Bold del nodo. */
        line-height: 1.3; /* Interlineado si baja de renglón. */
        overflow-wrap: anywhere; /* No desborda. */
    }

        .IntroVideoText--career .IntroVideoText-button:last-child {
            margin-bottom: 0; /* Sin nota, el botón es lo último. */
        }

    .IntroVideoText--career .IntroVideoText-media {
        aspect-ratio: 570 / 460; /* Proporción del nodo de PC. */
        background-color: #f2f2f2; /* Respaldo mientras carga. */
    }

@media (max-width: 1024px) {

    /* Tablet (nodo 4031:91065): texto arriba y media abajo, a todo el ancho. */
    .IntroVideoText--career .IntroVideoText-inner {
        grid-template-columns: minmax(0, 1fr); /* Una columna. */
        align-items: start; /* Arriba. */
        gap: 40px; /* Separación del nodo. */
        padding: 64px 32px; /* Relleno del nodo. */
    }

    .IntroVideoText--career .IntroVideoText-title {
        font-weight: 700; /* El nodo de tablet sigue en Bold (no Black como el acomodo de siempre). */
        line-height: 36px; /* Interlineado del nodo. */
    }

    .IntroVideoText--career .IntroVideoText-media {
        aspect-ratio: 704 / 360; /* Proporción del nodo de tablet. */
    }
}

@media (max-width: 500px) {

    /* Mobile (nodo 4031:91242): botón a todo el ancho. */
    .IntroVideoText--career .IntroVideoText-inner {
        gap: 32px; /* Separación del nodo. */
        padding: 48px 20px; /* Relleno del nodo. */
    }

    .IntroVideoText--career .IntroVideoText-title {
        font-size: 24px; /* Tamaño del nodo. */
        line-height: 1.25; /* Interlineado. */
    }

    .IntroVideoText--career .IntroVideoText-button {
        align-self: stretch; /* A todo el ancho. */
        justify-content: center; /* Texto centrado. */
        text-align: center; /* Ídem si baja de renglón. */
    }

    .IntroVideoText--career .IntroVideoText-media {
        aspect-ratio: 335 / 220; /* Proporción del nodo de mobile. */
    }
}