/* ProductDetailHero.css — Primer bloque de la ficha de producto: migas de pan arriba y, debajo,
   galería y, al lado, marca · SKU, título, descripción, color, módulos y botones. Nodos 5959:29727 (PC), 2611:26734 (tablet) y
   2611:26451 + 2611:26460 (mobile). Tipografía base: site.css.

   PC: galería y texto lado a lado (32px). TABLET: lado a lado (24px), textos más chicos y botones
   apilados. MOBILE: galería arriba, texto abajo y botones a todo el ancho.

   SIN DESBORDES: título, descripción, marca, código y colores envuelven; nada usa nowrap. */

/* --- Sección. --- */
/* El widget va en una columna de ANCHO COMPLETO del layout de Sitefinity, que deja 12px a cada lado.
   EL CONTENIDO SE ALINEA CON EL HEADER (MainMenu): el header centra su contenido en
   --container-max-width con 20px de barra + 24px a la izquierda (logo) y 27px a la derecha (sello
   de Legrand). El cálculo se hace contra el ancho de la FILA (100cqw; la fila es el contenedor, ver
   abajo), así da igual si el hero está en una columna de 12 o de 8: restando los 12px del gutter de
   la columna, el relleno es ese mismo margen. Arriba lo dan las migas de pan. */
.ProductDetailHero {
    --pdh-edge: max(20px, (100cqw - var(--container-max-width, 1600px)) / 2); /* Margen del header. */
    width: 100%; /* Ancho de su columna. */
    padding: 0 calc(var(--pdh-edge) + 15px) 32px calc(var(--pdh-edge) + 12px);
    box-sizing: border-box; /* El relleno entra en el ancho. */
    font-family: var(--font-brand); /* Pila de marca. */
    color: #0f0f12; /* Casi negro del nodo. */
}

    .ProductDetailHero *,
    .ProductDetailHero *::before,
    .ProductDetailHero *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .ProductDetailHero :where(h1, p, dl, dd, ul) {
        margin: 0; /* El espaciado lo ponen los contenedores. */
    }

/* --- Migas de pan: "Inicio › Productos › {producto}" (nodo 2611:26723). Un nombre largo baja de
   renglón. --- */
.ProductDetailHero-breadcrumb {
    padding: 16px 0 4px; /* Relleno del nodo. */
}

.ProductDetailHero-breadcrumb-list {
    display: flex;
    flex-wrap: wrap; /* Un nombre largo baja de renglón. */
    align-items: center;
    gap: 4px 6px; /* Separación del nodo. */
    margin: 0;
    padding: 18px 0; /* Relleno del nodo. */
    list-style: none;
    font-size: 11.5px; /* Tamaño del nodo. */
    font-weight: 500; /* Medium del nodo. */
    line-height: 1.3;
}

.ProductDetailHero-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Separación del nodo entre texto y separador. */
    min-width: 0; /* Deja que el texto envuelva. */
}

.ProductDetailHero-breadcrumb-link,
.ProductDetailHero-breadcrumb-link:visited {
    color: rgba(15, 15, 18, 0.45); /* Gris del nodo. */
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .ProductDetailHero-breadcrumb-link:hover,
    .ProductDetailHero-breadcrumb-link:focus-visible {
        color: #0f0f12; /* Se oscurece al apuntarlo. */
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .ProductDetailHero-breadcrumb-link:focus-visible {
        outline: 2px solid #429cde; /* Foco del teclado. */
        outline-offset: 2px;
    }

.ProductDetailHero-breadcrumb-separator {
    color: rgba(15, 15, 18, 0.3); /* Gris claro del nodo. */
}

/* Página en curso: el producto, en negrita. */
.ProductDetailHero-breadcrumb-current {
    font-weight: 700; /* Bold del nodo. */
    color: rgba(15, 15, 18, 0.9); /* Casi negro del nodo. */
    overflow-wrap: anywhere; /* Un nombre largo se corta en vez de desbordar. */
}

/* Ficha y zona lateral. Sin widgets en la zona, la ficha ocupa todo el ancho. */
.ProductDetailHero-layout {
    width: 100%;
}

/* Con zona lateral: la ficha y, a la derecha, la columna (308 / 1184 del nodo de PC = 26%),
   alineadas arriba con la galería. */
.ProductDetailHero--with-sidebar .ProductDetailHero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 26%, 400px);
    align-items: start;
    gap: 28px; /* Aire entre la información y la columna. */
}

/* La ficha: el acomodo de galería y texto se decide por SU ancho, no el de la ventana. */
.ProductDetailHero-main {
    min-width: 0;
    container-type: inline-size;
}

/* Zona lateral: los widgets apilados (tarjeta de asistencia, recursos, ...). */
.ProductDetailHero-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px; /* Separación entre widgets de la columna. */
}

/* Con la zona lateral a la derecha (PC), queda FIJA (sticky) debajo del menú mientras se recorre la
   ficha, igual que la columna vecina del layout (ver abajo). Si no entra en la ventana, se desplaza
   por dentro. En tablet baja debajo de la ficha y deja de ser fija (ver el bloque de tablet). */
.ProductDetailHero--with-sidebar .ProductDetailHero-sidebar {
    position: sticky;
    top: 134px; /* Menú de escritorio (118) + 16 de aire. */
    max-height: calc(100vh - 150px); /* La ventana menos el tope y 16px de aire abajo. */
    overflow-y: auto;
    overscroll-behavior: contain; /* El desplazamiento interno no arrastra la página. */
    scrollbar-width: thin; /* Barra fina, solo si hace falta. */
}

/* Dentro de la zona, la tarjeta de asistencia no lleva el relleno que usa suelta: los márgenes ya
   los pone el hero. */
.ProductDetailHero-sidebar .SupportContactCard,
.ProductDetailHero-sidebar .PopularResources {
    padding: 0;
}

/* --- FILA DE DOS COLUMNAS DEL LAYOUT (hero en una, la columna lateral en otra). La fila es el
   contenedor de medida (100cqw = ancho de la fila), así los dos lados calculan el mismo borde que
   el header. --- */
.row:has(> [class*="col"] > .ProductDetailHero) {
    container-type: inline-size;
}

/* Hero en una columna que no es la última: su lado derecho es interior (lo separa el gutter). */
.row > [class*="col"]:not(:last-child) > .ProductDetailHero {
    padding-right: 0;
}

/* Columna vecina del hero (Support Contact Card, etc.): su borde derecho es el del sello de
   Legrand (margen + 27px) y arranca a la altura de la galería, debajo de las migas de pan (el script
   mide su alto en --pdh-breadcrumb-height; 71px es el de PC). */
@media (min-width: 768px) {
    .row:has(> [class*="col"] > .ProductDetailHero) > [class*="col"]:not(:has(> .ProductDetailHero)) {
        padding-top: var(--pdh-breadcrumb-height, 71px);
        padding-right: calc(max(20px, (100cqw - var(--container-max-width, 1600px)) / 2) + 27px);
    }

    /* COLUMNA FIJA (sticky, pedido del usuario): mientras se recorre la ficha, la columna queda
       pegada debajo del menú fijo (--pdh-sticky-top: su alto + 16px de aire) hasta que termina la
       fila. Arriba lleva el relleno del alto de las migas de pan, por eso el borde de la caja se
       pega ese tanto más arriba y el contenido queda justo en --pdh-sticky-top. align-self la deja
       con su alto (estirada no tendría por dónde desplazarse). Si no entra en la ventana, se
       desplaza por dentro. */
    .row:has(> [class*="col"] > .ProductDetailHero) > [class*="col"]:not(:has(> .ProductDetailHero)) {
        --pdh-sticky-top: 134px; /* Menú de escritorio (118) + 16. */
        position: sticky;
        top: calc(var(--pdh-sticky-top) - var(--pdh-breadcrumb-height, 71px));
        align-self: flex-start;
        max-height: calc(100vh - var(--pdh-sticky-top) + var(--pdh-breadcrumb-height, 71px) - 16px);
        overflow-y: auto;
        overscroll-behavior: contain; /* El desplazamiento interno no arrastra la página. */
        scrollbar-width: thin; /* Barra fina, solo si hace falta. */
    }
}

/* De 1200px para abajo el menú fijo mide 108px. */
@media (min-width: 768px) and (max-width: 1200px) {
    .row:has(> [class*="col"] > .ProductDetailHero) > [class*="col"]:not(:has(> .ProductDetailHero)) {
        --pdh-sticky-top: 124px; /* Menú de tablet/laptop (108) + 16. */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .row:has(> [class*="col"] > .ProductDetailHero) > [class*="col"]:not(:has(> .ProductDetailHero)) {
        padding-right: 32px; /* Mismo margen que el hero en tablet (20 + 12 de gutter). */
    }
}

/* Columnas apiladas (menos de 768px): la columna lateral va debajo con los márgenes del hero. */
@media (max-width: 767px) {
    .row:has(> [class*="col"] > .ProductDetailHero) > [class*="col"]:not(:has(> .ProductDetailHero)) {
        padding-inline: 32px; /* 20 + 12 de gutter, como el hero en tablet. */
    }
}

@media (max-width: 500px) {
    .row:has(> [class*="col"] > .ProductDetailHero) > [class*="col"]:not(:has(> .ProductDetailHero)) {
        padding-inline: 20px; /* 8 + 12 de gutter, como el hero en mobile. */
    }
}

/* Los widgets de esa columna (asistencia, recursos populares): sin relleno propio, solo la
   separación de abajo. */
.row:has(> [class*="col"] > .ProductDetailHero) .SupportContactCard,
.row:has(> [class*="col"] > .ProductDetailHero) .PopularResources {
    padding: 0 0 16px;
}

/* En el editor sin producto, la zona va debajo del aviso con un alto mínimo para soltar widgets. */
.ProductDetailHero-sidebar--edit,
.ProductDetailHero-zone--edit {
    min-height: 120px;
    margin: 16px 12px;
}

/* Nombre de cada zona en el editor (sin producto no hay ficha que las ubique). */
.ProductDetailHero-zone-label {
    margin: 16px 12px 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(15, 15, 18, 0.55);
}

/* Zona de debajo de galería + info, en la misma columna (nodo "MAIN" de PC: la tabla arranca 56px
   debajo de la ficha). Los widgets apilados. */
.ProductDetailHero-zone {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px; /* Separación entre widgets de la zona. */
    margin-top: 56px;
}

    .ProductDetailHero-zone.ProductDetailHero-zone--edit {
        margin: 16px 12px; /* En el editor, como la lateral. */
    }

/* Dentro de la zona, los márgenes los pone el hero: el widget no lleva su relleno de suelto. */
.ProductDetailHero-zone .ProductSpecifications {
    padding: 0;
}

.ProductDetailHero-container {
    display: flex; /* Galería y texto lado a lado. */
    align-items: flex-start; /* Cada columna con su alto. */
    gap: 32px; /* Separación del nodo. */
    width: 100%;
}

/* --- Galería: 429 de 870 del nodo. --- */
.ProductDetailHero-gallery {
    flex: 0 0 49.3%; /* 429 / 870. */
    min-width: 0; /* No empuja la fila. */
    display: flex;
    flex-direction: column;
    gap: 12px; /* Separación del nodo. */
}

.ProductDetailHero-stage {
    position: relative; /* Ancla de la foto y del velo. */
    height: 360px; /* Alto del nodo. */
    overflow: hidden; /* Recorta la foto a las esquinas. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #f8f7f5; /* Gris claro mientras carga. */
}

/* Carrusel: las fotos en fila, cada una del ancho del marco; el script mueve la fila con
   translateX. Al arrastrar, la siguiente va entrando junto a la actual. */
.ProductDetailHero-track {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease; /* Desliz al cambiar de imagen. */
    will-change: transform;
}

.ProductDetailHero-slide {
    position: relative; /* Ancla de la foto. */
    flex: 0 0 100%; /* Una foto por marco. */
    height: 100%;
}

.ProductDetailHero-image {
    position: absolute; /* Llena el marco. */
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none; /* Anula el max-width de Bootstrap. */
    object-fit: cover; /* Llena sin deformar, como el nodo. */
    -webkit-user-drag: none; /* Que el arrastre mueva el carrusel, no "despegue" la foto. */
}

/* Velo de legibilidad del nodo: transparente arriba y oscuro abajo. */
.ProductDetailHero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 15, 18, 0) 0%, rgba(15, 15, 18, 0.06) 55%, rgba(15, 15, 18, 0.55) 100%);
    pointer-events: none; /* No intercepta el clic. */
}

/* Con varias imágenes, la foto grande se arrastra (mouse o dedo) para pasar a la anterior o la
   siguiente. "pan-y" deja el scroll vertical de la página al navegador y el horizontal al script. */
.ProductDetailHero-stage.is-swipeable {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

    /* Mientras se arrastra, la fila sigue al puntero sin retraso. */
    .ProductDetailHero-stage.is-dragging {
        cursor: grabbing;
    }

        .ProductDetailHero-stage.is-dragging .ProductDetailHero-track {
            transition: none;
        }

/* Flechas sobre la foto grande, centradas en vertical: círculo blanco con chevrón oscuro, mismo
   lenguaje que los carruseles del sitio. */
.ProductDetailHero-nav {
    position: absolute; /* Sobre la foto. */
    top: 50%;
    z-index: 2; /* Sobre la foto y el velo. */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%; /* Círculo. */
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 14px rgba(15, 15, 18, 0.16); /* Se despega de fotos claras. */
    color: #0f0f12;
    font-size: 16px;
    cursor: pointer;
    transform: translateY(-50%); /* Centrado vertical real. */
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

    .ProductDetailHero-nav[hidden] {
        display: none;
    }

    .ProductDetailHero-nav:hover {
        background-color: #ffffff;
        transform: translateY(-50%) scale(1.06); /* Realce leve. */
    }

    .ProductDetailHero-nav:focus-visible {
        outline: 2px solid #429cde; /* Celeste del nodo. */
        outline-offset: 2px;
    }

.ProductDetailHero-nav--prev {
    left: 16px;
}

.ProductDetailHero-nav--next {
    right: 16px;
}

.ProductDetailHero-nav-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex: none;
    stroke: currentColor;
    stroke-width: 2.25;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Con mouse, las flechas aparecen al pasar sobre la foto (o con foco de teclado); en touch se
   ven siempre. */
@media (hover: hover) and (pointer: fine) {
    .ProductDetailHero-nav {
        opacity: 0;
    }

    .ProductDetailHero-stage:hover .ProductDetailHero-nav,
    .ProductDetailHero-nav:focus-visible {
        opacity: 1;
    }
}

/* Miniaturas: UNA FILA con scroll horizontal (pedido del usuario). Se ven cuatro, como el nodo; con
   más, se recorren deslizando (dedo, trackpad o barra) y cada una se detiene alineada. */
.ProductDetailHero-thumbs {
    display: flex;
    gap: 10px; /* Separación del nodo. */
    margin: 0;
    padding: 0 0 8px; /* Lugar para la barra de scroll. */
    list-style: none;
    overflow-x: auto; /* Scroll de lado a lado. */
    overflow-y: hidden;
    overscroll-behavior-x: contain; /* El gesto no arrastra la página. */
    scroll-snap-type: x mandatory; /* Cada miniatura se detiene alineada. */
    scroll-behavior: smooth;
    scrollbar-width: thin; /* Barra fina: indica que hay más. */
    scrollbar-color: rgba(15, 15, 18, 0.25) transparent;
}

    .ProductDetailHero-thumbs::-webkit-scrollbar {
        height: 6px; /* Barra fina en WebKit. */
    }

    .ProductDetailHero-thumbs::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: rgba(15, 15, 18, 0.25);
    }

    /* Con más de cuatro, el script la marca para arrastrar con el mouse (en touch ya se desliza). */
    .ProductDetailHero-thumbs.is-draggable {
        cursor: grab;
    }

    /* Mientras se arrastra: sin imán ni suavizado (la fila sigue al mouse) y sin seleccionar texto. */
    .ProductDetailHero-thumbs.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        scroll-behavior: auto;
        user-select: none;
    }

        .ProductDetailHero-thumbs.is-draggable .ProductDetailHero-thumb {
            cursor: inherit;
        }

    /* Cuatro a la vista: el ancho de la fila menos los tres espacios, entre cuatro. */
    .ProductDetailHero-thumbs > li {
        flex: 0 0 calc((100% - 30px) / 4);
        min-width: 0;
        scroll-snap-align: start;
    }

.ProductDetailHero-thumb {
    position: relative; /* Ancla de la foto. */
    display: block;
    width: 100%;
    height: 72px; /* Alto del nodo. */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Recorta la foto. */
    border: 1.5px solid transparent; /* Reserva el borde de la activa. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #f8f7f5; /* Gris claro mientras carga. */
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

    .ProductDetailHero-thumb img {
        -webkit-user-drag: none; /* Que el arrastre mueva la fila, no la foto. */
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover; /* Llena sin deformar. */
    }

    .ProductDetailHero-thumb.is-active {
        border-color: #429cde; /* Celeste del nodo. */
    }

    .ProductDetailHero-thumb:not(.is-active):hover {
        opacity: 0.8; /* Respuesta al puntero. */
    }

    .ProductDetailHero-thumb:focus-visible {
        outline: 2px solid #429cde; /* Foco del teclado. */
        outline-offset: 2px;
    }

/* --- Información. --- */
.ProductDetailHero-info {
    flex: 1 1 0; /* El resto de la fila. */
    min-width: 0; /* Deja que el texto envuelva. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px; /* Separación del nodo. */
}

/* Marca · SKU. */
.ProductDetailHero-meta {
    display: flex;
    flex-wrap: wrap; /* Una marca o un código largo bajan de renglón. */
    align-items: center;
    gap: 2px 10px; /* Separación del nodo. */
    max-width: 100%;
    font-size: 14px; /* Heading/H6 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.35;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ProductDetailHero-brand {
    min-width: 0;
    color: #243746; /* Azul de marca del nodo. */
    overflow-wrap: anywhere;
}

.ProductDetailHero-meta-dot {
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 15, 18, 0.3); /* Gris del nodo. */
}

.ProductDetailHero-code {
    min-width: 0;
    color: rgba(15, 15, 18, 0.45); /* Gris del nodo. */
    overflow-wrap: anywhere;
}

.ProductDetailHero-title {
    max-width: 100%;
    font-size: 36px; /* Heading/H2 del nodo. */
    font-weight: 700; /* Bold. */
    line-height: 1.2;
    color: #0f0f12;
    overflow-wrap: anywhere; /* Una palabra larga se corta en vez de desbordar. */
}

.ProductDetailHero-description {
    max-width: 100%;
    font-size: 16px; /* Body del nodo. */
    line-height: 1.6;
    color: rgba(15, 15, 18, 0.6); /* Gris del nodo. */
    overflow-wrap: anywhere;
    white-space: pre-line; /* Respeta los renglones del editor. */
}

/* Descripción larga (el script pone la clase solo si no cabe): se ven seis líneas y la última se
   desvanece; "Ver más" la despliega con una transición de alto. */
.ProductDetailHero-description-box {
    --pdh-description-lines: 6; /* Líneas visibles recortada. */
    max-width: 100%;
}

.ProductDetailHero-description.is-clamped {
    max-height: calc(1.6em * var(--pdh-description-lines)); /* Alto de línea por líneas visibles. */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); /* Desvanecido. */
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    transition: max-height 0.45s ease;
}

    .ProductDetailHero-description.is-clamped.is-expanded {
        -webkit-mask-image: none;
        mask-image: none;
    }

/* Botón "Ver más / Ver menos": enlace celeste con chevrón que gira al desplegar. */
.ProductDetailHero-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #429cde; /* Celeste de enlaces del sitio. */
    cursor: pointer;
}

    .ProductDetailHero-toggle[hidden] {
        display: none;
    }

    .ProductDetailHero-toggle:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .ProductDetailHero-toggle:focus-visible {
        outline: 2px solid #429cde;
        outline-offset: 2px;
    }

.ProductDetailHero-toggle-icon {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.ProductDetailHero-toggle[aria-expanded="true"] .ProductDetailHero-toggle-icon {
    transform: rotate(180deg); /* Apunta hacia arriba: "Ver menos". */
}

/* Tabla de atributos (Color, Módulos). */
.ProductDetailHero-table {
    width: 100%;
    overflow: visible; /* Deja salir el tooltip de los colores. */
    border-radius: 6px; /* Esquinas del nodo. */
    background-color: #ffffff;
}

.ProductDetailHero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px; /* Aire entre etiqueta y valor. */
    padding: 11px 18px; /* Relleno del nodo. */
    border-bottom: 1px solid rgba(15, 15, 18, 0.07); /* Divisor del nodo. */
    font-size: 13px; /* Label/L2 del nodo. */
    font-weight: 600; /* Semibold. */
    line-height: 1.3;
}

    .ProductDetailHero-row:last-child {
        border-bottom: 0; /* La última sin divisor, como el nodo. */
    }

.ProductDetailHero-label {
    flex: 0 0 auto;
    font-weight: 600;
    color: rgba(15, 15, 18, 0.5); /* Gris del nodo. */
}

.ProductDetailHero-value {
    min-width: 0; /* Deja que el valor envuelva. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 8px;
    color: #0f0f12;
    text-align: right;
    overflow-wrap: anywhere;
}

    .ProductDetailHero-value [hidden] {
        display: none; /* El atributo le gana al display propio. */
    }

/* "+N" de los colores con su tarjeta: ancla de la tarjeta. */
.ProductDetailHero-color-more {
    position: relative;
    display: inline-flex;
}

/* Tarjeta con todos los colores (mismo lenguaje que el menú de descargas): blanca, borde suave y
   sombra, DEBAJO del "+N" para no tapar el título, alineada a la derecha. Cada color es una
   pastilla gris, todas iguales. Con muchos, scroll fino. */
.ProductDetailHero-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: -6px;
    z-index: 20; /* Sobre el contenido vecino. */
    width: max-content;
    min-width: 200px;
    max-width: min(340px, 86vw);
    padding: 14px;
    border: 1px solid rgba(15, 15, 18, 0.08);
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 15, 18, 0.14);
    color: #0f0f12;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    animation: ProductDetailHero-tip-in 0.16s ease-out;
}

    .ProductDetailHero-tooltip[hidden] {
        display: none;
    }

    /* Piquito hacia arriba, apuntando al "+N" (cuadrado girado con el mismo borde). */
    .ProductDetailHero-tooltip::before {
        content: "";
        position: absolute;
        top: -6px;
        right: 14px;
        width: 10px;
        height: 10px;
        border-top: 1px solid rgba(15, 15, 18, 0.08);
        border-left: 1px solid rgba(15, 15, 18, 0.08);
        background-color: #ffffff;
        transform: rotate(45deg);
    }

.ProductDetailHero-tooltip-title {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(15, 15, 18, 0.55);
}

.ProductDetailHero-tooltip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin; /* Barra fina, solo si hace falta. */
    scrollbar-color: rgba(15, 15, 18, 0.2) transparent;
}

    .ProductDetailHero-tooltip-list::-webkit-scrollbar {
        width: 6px;
    }

    .ProductDetailHero-tooltip-list::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: rgba(15, 15, 18, 0.2);
    }

    /* Pastilla de cada color. */
    .ProductDetailHero-tooltip-list > li {
        max-width: 100%;
        padding: 5px 11px;
        border: 1px solid transparent;
        border-radius: 999px;
        background-color: #f2f4f6; /* Gris suave. */
        overflow-wrap: anywhere; /* Un color largo sin espacios envuelve. */
    }

@keyframes ProductDetailHero-tip-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Botón "+N" de los colores. */
.ProductDetailHero-more {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: #429cde; /* Celeste de enlaces del sitio. */
    cursor: pointer;
    white-space: normal;
}

    .ProductDetailHero-more:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .ProductDetailHero-more:focus-visible {
        outline: 2px solid #429cde;
        outline-offset: 2px;
    }

/* --- Botones. --- */
.ProductDetailHero-actions {
    display: flex;
    flex-wrap: wrap; /* Bajan si no entran. */
    align-items: center;
    gap: 12px; /* Separación del nodo. */
    max-width: 100%;
}

.ProductDetailHero-button,
.ProductDetailHero-button:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 100%;
    padding: 13px 22px; /* Relleno del nodo. */
    border-radius: 6px; /* Esquinas del nodo. */
    font-size: 16px; /* Tamaño del nodo. */
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere; /* Un texto largo del editor envuelve. */
    transition: transform 0.2s ease-out;
}

.ProductDetailHero-button--primary,
.ProductDetailHero-button--primary:visited,
.ProductDetailHero-button--primary:hover,
.ProductDetailHero-button--primary:focus-visible {
    background-color: #243746; /* Azul oscuro del nodo. */
    color: #ffffff;
    text-decoration: none;
}

    .ProductDetailHero-button:hover,
    .ProductDetailHero-button:focus-visible {
        transform: scale(1.03); /* Realce estándar de botones. */
    }

/* Botones de descarga (diseño "Descargar ficha"): píldora blanca con contorno gris claro, texto
   oscuro y flecha hacia abajo. */
.ProductDetailHero-button--secondary,
.ProductDetailHero-button--secondary:visited,
.ProductDetailHero-button--secondary:hover,
.ProductDetailHero-button--secondary:focus-visible {
    border: 1.5px solid rgba(15, 15, 18, 0.22); /* Gris claro del diseño. */
    border-radius: 999px; /* Píldora. */
    background-color: #ffffff;
    color: #0f0f12; /* Texto casi negro del diseño. */
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 400;
}

    .ProductDetailHero-button--secondary:hover,
    .ProductDetailHero-button--secondary:focus-visible,
    .ProductDetailHero-download.is-open .ProductDetailHero-button--secondary {
        border-color: rgba(15, 15, 18, 0.45); /* Contorno más presente. */
    }

/* Botón con menú: ancla del menú desplegable. */
.ProductDetailHero-download {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

/* Menú: tarjeta blanca debajo del botón, con sombra suave; entra deslizándose. */
.ProductDetailHero-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20; /* Sobre el contenido de abajo. */
    min-width: 100%;
    width: max-content;
    max-width: min(360px, 90vw);
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(15, 15, 18, 0.08);
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 15, 18, 0.14);
    animation: ProductDetailHero-menu-in 0.18s ease-out;
}

    .ProductDetailHero-menu[hidden] {
        display: none;
    }

    /* Separador entre "Descargar todo" y los enlaces. */
    .ProductDetailHero-menu > li:first-child:has(.ProductDetailHero-menu-item--download) {
        margin-bottom: 4px;
        padding-bottom: 4px;
        border-bottom: 1px solid rgba(15, 15, 18, 0.08);
    }

.ProductDetailHero-menu-item,
.ProductDetailHero-menu-item:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.35;
    color: #0f0f12;
    text-decoration: none;
    overflow-wrap: anywhere; /* Un texto largo del editor envuelve. */
}

    .ProductDetailHero-menu-item:hover,
    .ProductDetailHero-menu-item:focus-visible {
        background-color: #f2f5f8; /* Gris azulado suave. */
        color: #243746;
        text-decoration: none;
    }

    .ProductDetailHero-menu-item:focus-visible {
        outline: 2px solid #429cde;
        outline-offset: -2px;
    }

    .ProductDetailHero-menu-item .ProductDetailHero-arrow {
        color: #429cde; /* Icono celeste. */
    }

.ProductDetailHero-menu-item--download,
.ProductDetailHero-menu-item--download:visited {
    font-weight: 700;
}

/* Mientras se arma el ZIP: el botón muestra "Preparando descarga…" con un indicador que gira en
   lugar de la flecha, y no admite otro clic. */
.ProductDetailHero-button.is-loading {
    cursor: progress;
    pointer-events: none;
}

    .ProductDetailHero-button.is-loading > svg {
        display: none;
    }

    .ProductDetailHero-button.is-loading::after {
        content: "";
        flex: none;
        width: 16px;
        height: 16px;
        border: 2px solid currentColor;
        border-right-color: transparent; /* El hueco que se ve girar. */
        border-radius: 50%;
        animation: ProductDetailHero-spin 0.7s linear infinite;
    }

/* Aviso de error de la descarga. */
.ProductDetailHero-download-error {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #c62828; /* Rojo de error. */
    overflow-wrap: anywhere;
}

    .ProductDetailHero-download-error[hidden] {
        display: none;
    }

@keyframes ProductDetailHero-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes ProductDetailHero-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    .ProductDetailHero-button:focus-visible {
        outline: 2px solid #429cde;
        outline-offset: 3px;
    }

.ProductDetailHero-arrow {
    flex: none;
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- De 1200px para abajo el menú fijo mide 108px: la zona lateral se pega ahí. --- */
@media (max-width: 1200px) {
    .ProductDetailHero--with-sidebar .ProductDetailHero-sidebar {
        top: 124px; /* Menú de tablet/laptop (108) + 16. */
        max-height: calc(100vh - 140px);
    }
}

/* --- Tablet: hasta 1024px. --- */
@media (max-width: 1024px) {
    .ProductDetailHero {
        padding: 0 20px 22px; /* 32px a los lados con el gutter de la columna, como el nodo. */
    }

    /* La columna lateral baja debajo de la ficha, a todo el ancho (nodo de tablet). */
    .ProductDetailHero--with-sidebar .ProductDetailHero-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    /* Abajo de la ficha ya no es fija: va en el flujo, con su alto. */
    .ProductDetailHero--with-sidebar .ProductDetailHero-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .ProductDetailHero-container {
        gap: 24px; /* Separación del nodo de tablet. */
    }

    .ProductDetailHero-zone {
        margin-top: 34px; /* Relleno superior de la sección de tablet. */
    }

    .ProductDetailHero-gallery {
        flex-basis: calc(50% - 12px); /* Mitades iguales, como el nodo. */
    }

    .ProductDetailHero-stage {
        height: 376px; /* Alto del nodo de tablet. */
    }

    .ProductDetailHero-thumb {
        height: 64px; /* Alto del nodo de tablet. */
    }

    .ProductDetailHero-meta {
        font-size: 10px; /* Tamaño del nodo de tablet. */
        letter-spacing: 1.2px;
    }

    .ProductDetailHero-title {
        font-size: clamp(26px, 4.43vw, 34px); /* 34px sobre la mesa de 768. */
        font-weight: 900; /* Black del nodo de tablet. */
        line-height: 1.12;
        letter-spacing: -0.02em;
    }

    .ProductDetailHero-description {
        font-size: 14.5px; /* Tamaño del nodo de tablet. */
        line-height: 1.45;
        letter-spacing: -0.03em;
    }

    .ProductDetailHero-description.is-clamped {
        max-height: calc(1.45em * var(--pdh-description-lines)); /* Alto de línea de tablet. */
    }

    .ProductDetailHero-toggle {
        font-size: 14px;
    }

    .ProductDetailHero-row {
        font-size: 12.5px; /* Tamaño del nodo de tablet. */
    }

    .ProductDetailHero-label {
        font-weight: 400; /* Regular del nodo de tablet. */
    }

    .ProductDetailHero-value {
        font-weight: 700; /* Bold del nodo de tablet. */
    }

    /* Botones apilados, como el nodo. */
    .ProductDetailHero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .ProductDetailHero-button {
        min-height: 52px; /* Alto del nodo de tablet. */
        font-size: 13px;
        font-weight: 700;
    }
}

/* --- Mobile: hasta 500px. Galería arriba y texto abajo. --- */
@media (max-width: 500px) {
    .ProductDetailHero {
        padding: 0 8px 18px; /* 20px a los lados con el gutter de la columna, como el nodo. */
    }

    .ProductDetailHero-breadcrumb {
        padding-top: 14px; /* Relleno del nodo de mobile. */
    }

    .ProductDetailHero-container {
        flex-direction: column;
        gap: 18px;
    }

    .ProductDetailHero-zone {
        margin-top: 28px; /* Relleno superior de la sección de mobile. */
    }

    .ProductDetailHero-gallery {
        flex-basis: auto;
        width: 100%;
    }

    .ProductDetailHero-stage {
        height: 290px; /* Alto del nodo de mobile. */
    }

    .ProductDetailHero-title {
        font-size: clamp(26px, 9.07vw, 34px); /* 34px sobre la mesa de 375, como el nodo. */
    }

    .ProductDetailHero-thumb {
        height: 72px; /* Alto del nodo de mobile. */
    }

    .ProductDetailHero-info {
        width: 100%;
    }

    /* Botones a todo el ancho, como el nodo. */
    .ProductDetailHero-actions {
        width: 100%;
        align-items: stretch;
    }

    .ProductDetailHero-button {
        width: 100%;
    }

    /* El menú ocupa el ancho del botón. */
    .ProductDetailHero-menu {
        width: 100%;
        max-width: none;
    }
}

/* --- Widget angosto (por ejemplo, en una columna de 2/3 en tablet): galería arriba y texto abajo,
   aunque la ventana sea ancha. Depende del espacio del widget, no del layout de la página. --- */
@container (max-width: 600px) {
    .ProductDetailHero-container {
        flex-direction: column;
        gap: 18px;
    }

    .ProductDetailHero-gallery {
        flex-basis: auto;
        width: 100%;
    }

    .ProductDetailHero-info {
        width: 100%;
    }
}

/* Movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
    .ProductDetailHero-thumbs {
        scroll-behavior: auto;
    }

    .ProductDetailHero-thumb,
    .ProductDetailHero-button,
    .ProductDetailHero-nav,
    .ProductDetailHero-track,
    .ProductDetailHero-description.is-clamped,
    .ProductDetailHero-toggle-icon {
        transition: none;
    }

    .ProductDetailHero-menu,
    .ProductDetailHero-tooltip {
        animation: none;
    }

    .ProductDetailHero-button.is-loading::after {
        animation-duration: 2s; /* Más lento, sin desaparecer: sigue indicando que se trabaja. */
    }

    .ProductDetailHero-button:hover,
    .ProductDetailHero-button:focus-visible {
        transform: none;
    }
}