/* ShowroomLocations.css — Sección de show rooms: cabecera, video y tarjetas de sedes.
   Nodos 2611:38029 (PC, contenido de 1184), 2611:38331 (tablet, mesa de 768) y 2611:38606 (mobile,
   mesa de 375).
   ESCRITORIO: video a todo el ancho (1184 x 360) y 5 sedes por fila. TABLET: video redondeado y 3
   sedes por fila. MOBILE: video más alto en proporción y 1 sede por fila. Las sedes que sobran bajan
   a otra fila (decisión del usuario). El eyebrow es el estándar del proyecto en los tres rangos
   (los nodos de tablet y mobile traen un círculo celeste, mismo criterio que el resto de los
   widgets).
   EL VIDEO INTERNO LLEVA CONTROLES PROPIOS (decisión del usuario): barra oscura abajo que se oculta
   sola mientras reproduce. Reproduciendo, el video LLENA el recuadro recortando arriba y abajo (sin
   bandas negras); en pantalla completa se ve entero. */

/* --- Sección. --- */
.ShowroomLocations {
    --ShowroomLocations-columns: 5; /* Sedes por fila en escritorio. */
    --ShowroomLocations-ink: #0f0f12; /* Casi negro del diseño. */
    box-sizing: border-box; /* El relleno entra dentro del ancho. */
    width: 100%; /* Ocupa el ancho de la ventana. */
    padding: 64px 48px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: var(--ShowroomLocations-ink); /* Color base del texto. */
}

/* Contenido centrado dentro del techo del sitio. */
.ShowroomLocations-container {
    display: flex; /* Bloques apilados. */
    flex-direction: column; /* En columna. */
    gap: 28px; /* Separación del nodo entre bloques. */
    width: 100%; /* Ocupa el ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado en monitores anchos. */
}

/* --- Cabecera: eyebrow y título a todo el ancho. Sin nota (se quitó por pedido de QA: en mobile,
   a la derecha del título, lo apretaba en una columna angosta). --- */
.ShowroomLocations-header {
    min-width: 0; /* El título envuelve dentro del ancho. */
}

.ShowroomLocations-heading {
    display: flex; /* Eyebrow y título apilados. */
    flex-direction: column; /* En columna. */
    gap: 9px; /* Separación del nodo. */
    flex: 1 1 auto; /* Toma el ancho sobrante. */
    min-width: 0; /* Deja que el título envuelva. */
}

/* --- Eyebrow estándar. --- */
.ShowroomLocations-eyebrow {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    display: flex; /* Cuadrado y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Separación del nodo. */
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35; /* Interlineado del nodo. */
    letter-spacing: 0.5px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.ShowroomLocations-eyebrow-dot {
    flex: 0 0 auto; /* No se comprime. */
    width: 7px; /* Lado del nodo. */
    height: 7px; /* Cuadrado. */
    background-color: currentColor; /* Acompaña a la etiqueta. */
}

/* --- Título: 38px en el piso del rango de escritorio (1200px). --- */
.ShowroomLocations-title {
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
    margin: 0; /* La separación la da el gap. */
    font-size: clamp(30px, 3.1667vw, 38px); /* 38 / 1200 * 100. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.4; /* Interlineado del nodo. */
    color: var(--ShowroomLocations-ink);
}

/* --- Video: fachada con portada y chip. --- */
.ShowroomLocations-media {
    position: relative; /* Ancla de la portada, el botón y el reproductor. */
    width: 100%; /* Ancho completo. */
    aspect-ratio: 1184 / 360; /* Proporción del nodo de escritorio (la misma de tablet). */
    overflow: hidden; /* Recorta la portada. */
    background-color: #e5e7ea; /* Fondo gris de respaldo, igual que IntroVideoText. */
}

.ShowroomLocations-video,
.ShowroomLocations-cover,
.ShowroomLocations-iframe {
    position: absolute; /* Ocupan todo el lienzo. */
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* Anula el max-width:100% que Bootstrap le pone a los medios. */
    border: 0; /* Sin el borde del iframe. */
}

.ShowroomLocations-video,
.ShowroomLocations-cover {
    object-fit: cover; /* Llena el lienzo sin deformarse. */
    object-position: center; /* Centrada. */
}

/* Pantalla completa: el lienzo ocupa la pantalla y el video se ve entero, sin recortes. */
.ShowroomLocations-media.is-fullscreen {
    aspect-ratio: auto; /* Sin la proporción del diseño. */
    border-radius: 0; /* Sin el redondeo de tablet. */
    background-color: #000000; /* Bandas negras, como cualquier reproductor. */
}

    .ShowroomLocations-media.is-fullscreen .ShowroomLocations-video {
        object-fit: contain;
    }

/* Mientras reproduce y la barra se ocultó, también se oculta el puntero. */
.ShowroomLocations-media.is-idle {
    cursor: none;
}

/* --- Controles propios del video interno: barra oscura abajo. --- */
.ShowroomLocations-controls {
    position: absolute; /* Sobre el video. */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; /* Sobre el video y su clic. */
    display: none; /* Solo existe después del play de la fachada. */
    align-items: center; /* Centrados entre sí. */
    gap: 14px; /* Separación entre controles. */
    padding: 40px 20px 14px; /* El alto de arriba deja lugar al degradado. */
    background: linear-gradient(to top, rgba(15, 15, 18, 0.78), rgba(15, 15, 18, 0)); /* Degradado oscuro. */
    color: #ffffff; /* Controles blancos. */
    opacity: 1; /* Visible por defecto. */
    transition: opacity 0.3s ease; /* Fundido al ocultarse. */
}

.ShowroomLocations-media.is-playing .ShowroomLocations-controls {
    display: flex; /* Aparece con el play. */
}

/* Ocultos mientras reproduce sin movimiento; siguen ahí para el teclado. */
.ShowroomLocations-media.is-idle .ShowroomLocations-controls {
    opacity: 0;
}

.ShowroomLocations-control {
    flex: 0 0 auto; /* No se comprimen. */
    display: flex; /* Para centrar el ícono. */
    align-items: center; /* Centrado vertical. */
    justify-content: center; /* Centrado horizontal. */
    width: 36px; /* Área táctil. */
    height: 36px; /* Cuadrada. */
    padding: 0; /* Sin el relleno propio del botón. */
    border: 0; /* Sin el borde propio del botón. */
    border-radius: 50%; /* Círculo para el foco. */
    background: none; /* Sin fondo. */
    color: inherit; /* Blanco de la barra. */
    cursor: pointer; /* Indica que es accionable. */
    transition: transform 0.2s ease-out, background-color 0.2s ease-out; /* Realce. */
}

    /* Realce estándar de botones del proyecto. :active es el que lo hace existir en táctil. */
    .ShowroomLocations-control:hover,
    .ShowroomLocations-control:focus-visible,
    .ShowroomLocations-control:active {
        transform: scale(1.05);
        background-color: rgba(255, 255, 255, 0.14); /* Halo tenue. */
    }

    .ShowroomLocations-control:focus-visible {
        outline: 2px solid #ffffff; /* Anillo de foco sobre el fondo oscuro. */
        outline-offset: 1px;
    }

.ShowroomLocations-icon {
    width: 20px; /* Tamaño del glifo. */
    height: 20px; /* Cuadrado. */
    fill: currentColor; /* Formas rellenas. */
}

.ShowroomLocations-icon-stroke {
    fill: none; /* Los trazos van sin relleno. */
    stroke: currentColor; /* Del color de la barra. */
    stroke-width: 2; /* Grosor del trazo. */
    stroke-linecap: round; /* Extremos redondeados. */
    stroke-linejoin: round; /* Vértices redondeados. */
}

/* Cada botón de dos estados muestra solo el ícono que corresponde. */
.ShowroomLocations-icon--play,
.ShowroomLocations-icon--sound-off,
.ShowroomLocations-icon--collapse {
    display: none;
}

.ShowroomLocations-media.is-paused .ShowroomLocations-icon--play,
.ShowroomLocations-media.is-muted .ShowroomLocations-icon--sound-off,
.ShowroomLocations-media.is-fullscreen .ShowroomLocations-icon--collapse {
    display: block;
}

.ShowroomLocations-media.is-paused .ShowroomLocations-icon--pause,
.ShowroomLocations-media.is-muted .ShowroomLocations-icon--sound-on,
.ShowroomLocations-media.is-fullscreen .ShowroomLocations-icon--expand {
    display: none;
}

.ShowroomLocations-time {
    flex: 0 0 auto; /* No se comprime. */
    font-size: 13px; /* Legible sobre el video. */
    font-weight: 600; /* Semibold. */
    font-variant-numeric: tabular-nums; /* Los dígitos no bailan al avanzar. */
    letter-spacing: 0.3px; /* Apertura leve. */
}

.ShowroomLocations-time-separator {
    margin: 0 4px; /* Aire alrededor de la barra. */
    opacity: 0.6; /* Más tenue que los números. */
}

/* Barra de progreso: 4px visibles con un área táctil de 20px. */
.ShowroomLocations-track {
    position: relative; /* Ancla de la línea. */
    flex: 1 1 auto; /* Toma el ancho sobrante. */
    height: 20px; /* Área táctil. */
    cursor: pointer; /* Indica que es accionable. */
    touch-action: none; /* El arrastre no desplaza la página. */
}

    .ShowroomLocations-track::before {
        content: ""; /* Línea de fondo. */
        position: absolute; /* Centrada en el área. */
        left: 0;
        right: 0;
        top: 50%;
        height: 4px; /* Grosor de la línea. */
        border-radius: 2px; /* Extremos redondeados. */
        background-color: rgba(255, 255, 255, 0.3); /* Blanco tenue. */
        transform: translateY(-50%); /* Centrada. */
    }

    .ShowroomLocations-track:focus-visible {
        outline: 2px solid #ffffff; /* Anillo de foco. */
        outline-offset: 2px;
        border-radius: 4px;
    }

.ShowroomLocations-track-fill {
    position: absolute; /* Sobre la línea de fondo. */
    left: 0;
    top: 50%;
    width: 0; /* Lo actualiza el script. */
    height: 4px; /* Grosor de la línea. */
    border-radius: 2px; /* Extremos redondeados. */
    background-color: #ffffff; /* Progreso blanco. */
    transform: translateY(-50%); /* Centrada. */
}

/* Perilla al final del progreso: crece con el puntero encima o el foco. */
.ShowroomLocations-track-thumb {
    position: absolute; /* Al final del relleno. */
    right: 0;
    top: 50%;
    width: 12px; /* Diámetro. */
    height: 12px; /* Cuadrado. */
    border-radius: 50%; /* Círculo. */
    background-color: #ffffff; /* Blanco. */
    transform: translate(50%, -50%) scale(0.8); /* Centrada sobre el final. */
    transition: transform 0.2s ease-out; /* Realce. */
}

.ShowroomLocations-track:hover .ShowroomLocations-track-thumb,
.ShowroomLocations-track:focus-visible .ShowroomLocations-track-thumb {
    transform: translate(50%, -50%) scale(1.15);
}

/* Botón único que cubre el lienzo: cualquier clic sobre la foto arranca el video. */
.ShowroomLocations-start {
    position: absolute; /* Cubre el lienzo. */
    inset: 0;
    z-index: 1; /* Sobre la portada. */
    margin: 0; /* Sin márgenes del botón. */
    padding: 0; /* Sin relleno del botón. */
    border: none; /* Sin borde del botón. */
    background: none; /* Sin fondo del botón. */
    cursor: pointer; /* Indica que es accionable. */
    appearance: none; /* Reinicia los estilos nativos de <button>. */
}

/* Chip arriba a la izquierda en escritorio, como el nodo. */
.ShowroomLocations-chip {
    position: absolute; /* Sobre la portada. */
    top: 24px; /* Posición del nodo. */
    left: 24px; /* Posición del nodo. */
    display: inline-flex; /* Triángulo y texto en línea. */
    align-items: center; /* Centrados entre sí. */
    gap: 10px; /* Los dos espacios del nodo. */
    padding: 9px 14px; /* Rellenos del nodo. */
    background-color: rgba(255, 255, 255, 0.92); /* Blanco translúcido del nodo. */
    font-size: 11px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    letter-spacing: 1.2px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--ShowroomLocations-ink); /* Negro del nodo. */
    transition: transform 0.2s ease-out; /* Realce estándar. */
}

.ShowroomLocations-chip-icon {
    width: 7px; /* Tamaño del triángulo. */
    height: 8px; /* Proporción del triángulo. */
    fill: currentColor; /* Del color del texto. */
}

    /* Realce estándar de botones del proyecto. */
    .ShowroomLocations-start:hover .ShowroomLocations-chip,
    .ShowroomLocations-start:focus-visible .ShowroomLocations-chip {
        transform: scale(1.05);
    }

    .ShowroomLocations-start:focus-visible {
        outline: none; /* El foco se marca en el chip. */
    }

    .ShowroomLocations-start:focus-visible .ShowroomLocations-chip {
        outline: 2px solid var(--color-cool-neutral-02); /* Anillo de foco. */
        outline-offset: 3px; /* Separado del chip. */
    }

/* --- Sedes: 5 por fila en escritorio; las que sobran bajan a otra fila. --- */
.ShowroomLocations-grid {
    display: grid; /* Grilla. */
    grid-template-columns: repeat(var(--ShowroomLocations-columns), minmax(0, 1fr)); /* Columnas iguales. */
    gap: 16px; /* Separación del nodo. */
    margin: 0; /* Sin margen de la lista. */
    padding: 0; /* Sin sangría de la lista. */
    list-style: none; /* Sin viñetas. */
}

.ShowroomLocations-card {
    display: flex; /* Textos apilados. */
    flex-direction: column; /* En columna. */
    align-items: flex-start; /* Cada texto con su ancho. */
    gap: 8px; /* Separación del nodo. */
    min-width: 0; /* Deja que el texto envuelva. */
    padding: 20px 18px; /* Rellenos del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
    overflow-wrap: anywhere; /* Un correo largo no desborda. */
}

.ShowroomLocations-zone {
    font-size: 10px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    letter-spacing: 1.2px; /* Apertura del nodo. */
    text-transform: uppercase; /* Se lee como etiqueta. */
    color: var(--color-cool-neutral-02); /* #243746 del nodo. */
}

.ShowroomLocations-city {
    margin: 0; /* Sin el margen del encabezado. */
    font-size: 17px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.4; /* Interlineado del nodo. */
    color: var(--ShowroomLocations-ink);
}

.ShowroomLocations-address {
    display: flex; /* Renglones apilados. */
    flex-direction: column; /* En columna. */
    margin: 0; /* Sin el margen de <address>. */
    font-size: 11.5px; /* Tamaño del nodo. */
    font-style: normal; /* <address> viene en cursiva. */
    line-height: 1.4; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.55); /* Gris del nodo. */
}

.ShowroomLocations-phone {
    font-size: 12.5px; /* Tamaño del nodo. */
    font-weight: 700; /* Bold del nodo. */
    line-height: 1.4; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.85); /* Gris oscuro del nodo. */
    text-decoration: none; /* Sin subrayado cuando es enlace. */
}

.ShowroomLocations-email {
    font-size: 11px; /* Tamaño del nodo. */
    line-height: 1.4; /* Interlineado del nodo. */
    color: rgba(15, 15, 18, 0.45); /* Gris del nodo. */
    text-decoration: none; /* Sin subrayado cuando es enlace. */
}

    /* Los cinco estados le ganan al a:hover de Bootstrap: nunca subrayado. */
    a.ShowroomLocations-phone,
    a.ShowroomLocations-phone:link,
    a.ShowroomLocations-phone:visited,
    a.ShowroomLocations-phone:hover,
    a.ShowroomLocations-phone:focus,
    a.ShowroomLocations-phone:active,
    a.ShowroomLocations-email,
    a.ShowroomLocations-email:link,
    a.ShowroomLocations-email:visited,
    a.ShowroomLocations-email:hover,
    a.ShowroomLocations-email:focus,
    a.ShowroomLocations-email:active {
        text-decoration: none; /* Sin subrayado. */
    }

    /* Al apuntar, el enlace se oscurece (sin subrayado). */
    a.ShowroomLocations-phone:hover,
    a.ShowroomLocations-phone:focus-visible,
    a.ShowroomLocations-email:hover,
    a.ShowroomLocations-email:focus-visible {
        color: var(--ShowroomLocations-ink);
    }

    /* Leyenda del enlace: dos renglones como máximo con puntos suspensivos (estándar). */
    .ShowroomLocations-link-text {
        display: -webkit-box; /* Necesario para el recorte por renglones. */
        -webkit-box-orient: vertical; /* Ídem. */
        -webkit-line-clamp: 2; /* Tope de renglones. */
        line-clamp: 2; /* Ídem, versión estándar. */
        min-width: 0; /* Puede achicarse por debajo de su texto. */
        overflow: hidden; /* Recorta lo que no entra. */
        overflow-wrap: anywhere; /* Un correo largo parte en vez de desbordar. */
    }

/* --- Tablet (hasta 1024px): 3 sedes por fila y video redondeado con el chip abajo. --- */
@media (max-width: 1024px) {
    .ShowroomLocations {
        --ShowroomLocations-columns: 3; /* Sedes por fila del nodo. */
        padding: 48px 32px; /* Rellenos del nodo. */
    }

    .ShowroomLocations-container {
        gap: 20px; /* Separación del nodo. */
    }

    .ShowroomLocations-heading {
        gap: 6px; /* Separación del nodo. */
    }

    .ShowroomLocations-eyebrow {
        font-size: 12px; /* Tamaño del nodo de tablet. */
    }

    .ShowroomLocations-title {
        font-size: min(3.3854vw, 26px); /* 26px sobre la mesa de 768. */
        font-weight: 700; /* Bold del nodo de tablet. */
        line-height: 1.25; /* Interlineado de titular. */
    }

    .ShowroomLocations-media {
        border-radius: 8px; /* Redondeo del nodo. */
    }

    /* Chip abajo a la izquierda, en píldora blanca. */
    .ShowroomLocations-chip {
        top: auto; /* Ya no va arriba. */
        bottom: 16px; /* Posición del nodo. */
        left: 16px; /* Posición del nodo. */
        padding: 8px 14px; /* Rellenos del nodo. */
        border-radius: 20px; /* Píldora. */
        background-color: #ffffff; /* Blanco del nodo. */
        font-weight: 600; /* Semibold del nodo. */
        letter-spacing: 0; /* Sin apertura en el nodo. */
    }

    .ShowroomLocations-grid {
        gap: 16px 14px; /* Separación del nodo. */
    }

    .ShowroomLocations-card {
        gap: 6px; /* Separación del nodo. */
        padding: 18px; /* Rellenos del nodo. */
        border-radius: 6px; /* Redondeo del nodo. */
    }

    .ShowroomLocations-zone {
        font-weight: 600; /* Semibold del nodo de tablet. */
        letter-spacing: 0.3px; /* Apertura del nodo. */
        color: #429cde; /* Celeste del nodo de tablet. */
    }

    .ShowroomLocations-city {
        line-height: normal; /* Interlineado del nodo. */
    }

    .ShowroomLocations-address {
        font-size: 12px; /* Tamaño del nodo de tablet. */
        line-height: normal; /* Interlineado del nodo. */
        color: rgba(15, 15, 18, 0.65); /* Gris del nodo de tablet. */
    }

    .ShowroomLocations-phone {
        font-size: 13px; /* Tamaño del nodo de tablet. */
        font-weight: 600; /* Semibold del nodo de tablet. */
        line-height: normal; /* Interlineado del nodo. */
        color: var(--ShowroomLocations-ink); /* Negro del nodo de tablet. */
    }

    .ShowroomLocations-email {
        line-height: normal; /* Interlineado del nodo. */
        color: rgba(15, 15, 18, 0.5); /* Gris del nodo de tablet. */
    }
}

/* --- Mobile (hasta 500px): 1 sede por fila y video más alto en proporción. --- */
@media (max-width: 500px) {
    .ShowroomLocations {
        --ShowroomLocations-columns: 1; /* Una sede por fila. */
        padding: 32px 20px; /* Rellenos del nodo. */
    }

    .ShowroomLocations-title {
        font-size: min(5.3333vw, 20px); /* 20px sobre la mesa de 375. */
    }

    .ShowroomLocations-media {
        aspect-ratio: 335 / 180; /* Proporción del nodo de mobile. */
    }

    /* Barra más compacta: el tiempo total se omite para que la línea tenga espacio. */
    .ShowroomLocations-controls {
        gap: 8px;
        padding: 32px 10px 8px;
    }

    .ShowroomLocations-control {
        width: 32px;
        height: 32px;
    }

    .ShowroomLocations-icon {
        width: 18px;
        height: 18px;
    }

    .ShowroomLocations-time {
        font-size: 12px;
    }

    .ShowroomLocations-time-separator,
    .ShowroomLocations-time [data-showroom-time-total] {
        display: none;
    }
}

/* Movimiento reducido: el chip no se agranda. */
@media (prefers-reduced-motion: reduce) {
    .ShowroomLocations-chip,
    .ShowroomLocations-controls,
    .ShowroomLocations-control,
    .ShowroomLocations-track-thumb {
        transition: none;
    }
}