/* ===== PRODUCTO SHOW STYLES ===== */

/* Ritmo del sistema: 5rem de franja y 3.5rem en teléfono, igual que las
   secciones de Inicio y Nosotros. Arriba va menos porque el breadcrumb
   ya separa del navbar.
   (Este archivo es desktop-first —usa max-width—, así que la base es el
   valor de escritorio y el teléfono lo corrige más abajo.) */
.ps-section {
    padding: 2.5rem 0 5rem;
}

/* ---- Galería ---- */
.ps-galeria {
    position: sticky;
    /* Se pega debajo del navbar, que ahora también viaja con el scroll */
    top: calc(var(--g-nav-h) + 1.5rem);
}

.ps-carousel {
    border-radius: 3px;
    overflow: hidden;
    background: var(--g-vidrio);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.ps-carousel .carousel-inner {
    aspect-ratio: 4 / 3;
}

.ps-carousel .carousel-item {
    height: 100%;
}

.ps-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
}

.ps-galeria-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(40, 116, 82, 0.25);
}

.ps-galeria-placeholder svg {
    width: 3.5rem;
    height: 3.5rem;
}

.ps-carousel-prev,
.ps-carousel-next {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    transition: background 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
}

.ps-carousel:hover .ps-carousel-prev,
.ps-carousel:hover .ps-carousel-next {
    opacity: 1;
}

.ps-carousel-prev:hover,
.ps-carousel-next:hover {
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.ps-carousel-prev { left: 0.65rem; }
.ps-carousel-next { right: 0.65rem; }

.ps-carousel-prev svg,
.ps-carousel-next svg {
    width: 1rem;
    height: 1rem;
    color: var(--external-secondary);
}

.ps-carousel-prev .carousel-control-prev-icon,
.ps-carousel-next .carousel-control-next-icon {
    display: none;
}

.ps-ampliar-btn {
    position: absolute;
    bottom: 0.65rem;
    right: 0.65rem;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    z-index: 5;
    opacity: 0;
}

.ps-carousel:hover .ps-ampliar-btn {
    opacity: 1;
}

/* Controles flotantes sobre la foto: el hover los vuelve opacos, que
   es el mismo escalón —de translúcido a sólido— en los tres. */
.ps-ampliar-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.ps-ampliar-btn svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--external-secondary);
}

.ps-galeria-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.ps-galeria-thumbs::-webkit-scrollbar {
    display: none;
}

.ps-thumb {
    width: 58px;
    height: 58px;
    min-width: 58px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    background: var(--g-vidrio);
    transition: border-color 0.18s ease, opacity 0.18s ease;
    opacity: 0.5;
    flex-shrink: 0;
}

.ps-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-thumb:hover { opacity: 0.8; }

.ps-thumb.active {
    border-color: var(--external-primary);
    opacity: 1;
}

/* ---- Información ---- */

/* Categoría: eyebrow minimalista en lugar de chip */
.ps-categoria-eyebrow {
    font-family: var(--font-display);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--external-primary);
    text-decoration: none;
    margin-bottom: 0.65rem;
    transition: opacity 0.18s ease;
}

.ps-categoria-eyebrow::before {
    content: '';
    flex: 0 0 auto;
    width: 26px;
    height: 7px;
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.ps-categoria-eyebrow:hover {
    opacity: 0.7;
    color: var(--external-primary);
}

.ps-titulo {
    font-family: var(--font-display);
    font-size: var(--fs-title);
    font-weight: 800;
    color: var(--external-secondary);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 0.85rem;
}

.ps-descripcion {
    font-size: var(--fs-body);
    color: var(--external-secondary-soft);
    line-height: 1.75;
    margin-bottom: 1.75rem;
}

/* ---- Selector de variantes: pills modernas y pequeñas ---- */
.ps-variantes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ps-variante-label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--external-secondary-soft);
    margin-bottom: 0.45rem;
}

.ps-variante-opciones {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ps-variante-seleccion {
    font-weight: 500;
    color: var(--external-secondary-soft);
    letter-spacing: 0;
    text-transform: none;
    font-size: var(--fs-label);
}

.ps-opcion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    background: transparent;
    color: var(--external-secondary);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
    line-height: 1.4;
    font-family: inherit;
}

.ps-opcion:hover:not(.active) {
    border-color: var(--external-secondary);
    color: var(--external-secondary);
}

.ps-opcion.active {
    background: var(--external-secondary);
    border-color: var(--external-secondary);
    color: #ffffff;
    cursor: default;
}

/* ---- Callout personalización (inline, bajo variantes) ---- */
.ps-personalizar {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: rgba(40, 116, 82, 0.045);
    border: 1px solid rgba(40, 116, 82, 0.15);
    border-radius: 3px;
    margin-bottom: 1.75rem;
}

.ps-personalizar-icono {
    display: inline-flex;
    align-items: center;
    color: var(--external-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

.ps-personalizar-icono svg {
    width: 1rem;
    height: 1rem;
}

.ps-personalizar-texto {
    font-size: var(--fs-small);
    color: var(--external-secondary);
    line-height: 1.6;
}

.ps-personalizar-texto strong {
    display: block;
    color: var(--external-secondary);
    margin-bottom: 0.15rem;
    font-size: var(--fs-small);
}

.ps-personalizar-link {
    color: var(--external-primary);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ps-personalizar-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Medidas en metros ----
   Se muestran sólo cuando la unidad del producto las pide (alto, ancho o
   alto × ancho). El rótulo repite el patrón de .ps-variante-label para que
   lea como un grupo más del selector. */
.ps-medidas {
    margin-bottom: 0.85rem;
}

.ps-medidas-label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--external-secondary-soft);
    margin-bottom: 0.45rem;
}

.ps-medidas-campos {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ps-medida {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8.5rem;
    flex: 1 1 8.5rem;
}

.ps-medida-label {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--external-secondary-soft);
}

/* Misma altura y borde que .ps-cantidad para que la columna quede pareja. */
.ps-medida-input {
    min-height: 46px;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(40, 116, 82, 0.38);
    border-radius: 3px;
    background: var(--external-white);
    color: var(--external-secondary);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: 600;
    width: 100%;
}

.ps-medida-input:focus {
    outline: none;
    border-color: var(--external-primary);
    box-shadow: 0 0 0 3px var(--g-hover-verde);
}

.ps-medida-input.is-invalid {
    border-color: #c0392b;
}

.ps-medidas-total {
    margin-top: 0.3rem;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--external-primary);
}

/* Mientras no haya resultado no ocupa nada: el renglón vacío era la mayor
   parte del hueco entre las medidas y el botón. */
.ps-medidas-total:empty {
    display: none;
}

.ps-medidas-error {
    margin-top: 0.4rem;
    font-size: var(--fs-small);
    color: #c0392b;
}

/* ---- CTAs ---- */
.ps-acciones {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

/* Mismas medidas que .g-btn: 46px de alto, Archivo 700 a --fs-small y
   borde de 1px. Antes eran 0.83rem/600 en la fuente del cuerpo, así que
   "Agregar al carrito" no se leía como los botones de Inicio. */
.btn-ps-primary,
.btn-ps-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 46px;
    padding: 0.6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease;
}

/* Se hunden al pulsar, como todos los botones del sistema */
.btn-ps-primary:active,
.btn-ps-secondary:active {
    transform: translateY(1px);
}

.btn-ps-primary svg,
.btn-ps-secondary svg {
    width: 1rem;
    height: 1rem;
}

.btn-ps-primary {
    background-color: var(--external-primary);
    color: var(--external-white);
}

.btn-ps-primary:hover {
    background-color: var(--external-primary-dark);
    color: var(--external-white);
}

.btn-ps-secondary {
    background-color: transparent;
    color: var(--external-primary);
    border-color: rgba(40, 116, 82, 0.38);
}

.btn-ps-secondary:hover {
    background-color: var(--g-hover-verde);
    color: var(--external-primary-dark);
    border-color: var(--external-primary);
}

/* Stepper de unidades */
/* Los 46px lo dejan a la misma altura que el botón que tiene al lado:
   antes el stepper era más bajo y la fila quedaba despareja. */
.ps-cantidad {
    display: inline-flex;
    align-items: stretch;
    min-height: 46px;
    border: 1px solid rgba(40, 116, 82, 0.38);
    border-radius: 3px;
    overflow: hidden;
    background: var(--external-white);
}

.ps-cantidad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    border: none;
    background: transparent;
    color: var(--external-primary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ps-cantidad-btn:hover:not(:disabled) {
    background: var(--g-hover-verde);
}

.ps-cantidad-btn:disabled {
    color: var(--external-secondary-soft);
    opacity: 0.55;
    cursor: not-allowed;
}

.ps-cantidad-btn svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ps-cantidad-input {
    width: 2.6rem;
    border: none;
    border-inline: 1.5px solid rgba(40, 116, 82, 0.16);
    text-align: center;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--external-secondary);
    background: transparent;
}

.ps-cantidad-input:focus {
    outline: none;
}

/* ---- Confianza ---- */
.ps-confianza {
    display: flex;
    align-items: center;
    gap: 0.65rem 1.25rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.ps-confianza-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--external-secondary-soft);
}

.ps-confianza-item svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--external-primary-soft);
    flex-shrink: 0;
}

/* ---- Encabezados de sección ---- */
/* Mismo rótulo que Inicio y Nosotros: Archivo, --fs-label y 0.2em de
   letra. El terminal es la cota del sistema (.g-eyebrow), no una barra
   maciza: la cota es la firma de la marca y el catálogo la estaba
   dibujando de otra manera. */
.ps-seccion-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--external-primary);
    margin-bottom: 0.5rem;
}

.ps-seccion-eyebrow::before {
    content: '';
    flex: 0 0 auto;
    width: 26px;
    height: 7px;
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
}

.ps-seccion-titulo {
    font-family: var(--font-display);
    font-size: var(--fs-title-sm);
    font-weight: 800;
    color: var(--external-secondary);
    letter-spacing: -0.02em;
    margin-bottom: 0;
}

/* ---- Descripción técnica ---- */
.ps-tecnica-section {
    padding: 5rem 0;
    background-color: var(--g-vidrio);
}

/* Dos columnas desde lg: texto a la izquierda, planos a la derecha.
   align-items:start evita que la columna corta se estire para igualar
   a la larga. Debajo de lg se apilan, texto primero. */
.ps-tecnica-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* min-width:0 para que una palabra larga no estire la celda del grid. */
.ps-tecnica-texto-col {
    min-width: 0;
}

.ps-tecnica-texto {
    font-size: var(--fs-body);
    color: var(--external-secondary);
    line-height: 1.85;
    margin: 1.25rem 0 0;
    white-space: pre-line;
}


.ps-tecnica-texto-wrap.is-clamped {
    max-height: var(--tecnica-alto, 22rem);
    overflow: hidden;
    position: relative;
}

.ps-tecnica-texto-wrap.is-clamped.is-desbordado::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(246, 248, 249, 0), var(--g-vidrio));
}

/* Arranca oculto: el JS lo muestra sólo si el texto realmente desborda. */
.ps-tecnica-vermas {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--external-primary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.ps-tecnica-vermas.is-visible {
    display: inline-flex;
}

.ps-tecnica-vermas:hover {
    color: var(--external-primary-dark);
}

.ps-tecnica-vermas:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: 3px;
}

.ps-tecnica-vermas svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.ps-tecnica-vermas[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ---- Grilla de imágenes técnicas ----
   Dos tamaños, no más: uno solo va grande y de dos en adelante es una
   cuadrícula pareja de dos columnas. Antes el primer plano se agrandaba
   con cualquier cantidad impar (3 → uno grande y dos chicos), y eso
   jerarquizaba una imagen que no tiene por qué ser más importante que
   las otras: son todas el mismo tipo de plano. */
.ps-tecnica-galeria {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

/* Un solo plano ocupa toda la columna, al lado del texto */
.ps-tecnica-galeria--unica {
    grid-template-columns: minmax(0, 1fr);
}

/* Y se muestra a su proporción real: el 4/3 de la cuadrícula existe para
   que las fichas midan todas igual, y con una sola no hay a qué
   emparejarse — el marco fijo sólo agregaría franjas vacías arriba y
   abajo de un plano vertical. El tope evita que un plano muy alto empuje
   el texto de al lado más de lo que se lee de una. */
.ps-tecnica-galeria--unica .ps-tecnica-img {
    aspect-ratio: auto;
    max-height: 32rem;
}

.ps-tecnica-figura {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    background: var(--external-white);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: 3px solid var(--external-primary);
    border-radius: 3px;
    overflow: hidden;
    cursor: zoom-in;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ps-tecnica-figura:hover {
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.ps-tecnica-figura:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: 3px;
}

/* contain, no cover: un plano o una tabla de medidas se vuelve ilegible
   si se recorta, así que entra entero sobre el fondo blanco. */
.ps-tecnica-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--external-white);
}

/* Pista de que la imagen se amplía. En touch no hay hover, así que
   arranca visible y sólo se esconde donde el hover existe de verdad. */
.ps-tecnica-zoom {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--external-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease;
}

.ps-tecnica-zoom svg {
    width: 0.95rem;
    height: 0.95rem;
}

@media (hover: hover) {
    .ps-tecnica-zoom {
        opacity: 0;
    }

    .ps-tecnica-figura:hover .ps-tecnica-zoom,
    .ps-tecnica-figura:focus-visible .ps-tecnica-zoom {
        opacity: 1;
    }
}

@media (min-width: 992px) {
    .ps-tecnica-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 3rem;
    }
}

/* ---- Banner personalización (sección completa) ----
   Cierre de la página. Toma el mismo recurso con el que Inicio abre el
   catálogo y con el que cierra el hero: fondo vidrio y una banda verde
   de 5px arriba. Antes era un verde pálido propio (#edf5f1) que no
   existía en ninguna otra vista. */
.ps-banner-personalizar {
    padding: 5rem 0;
    background-color: var(--g-vidrio);
    border-top: 5px solid var(--external-primary);
}

.ps-banner-personalizar-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.ps-banner-personalizar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(40, 116, 82, 0.09);
    border: 1px solid rgba(40, 116, 82, 0.18);
    color: var(--external-primary);
    flex-shrink: 0;
}

.ps-banner-personalizar-icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

.ps-banner-personalizar-content {
    flex: 1;
    min-width: 200px;
}

.ps-banner-personalizar-titulo {
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    font-weight: 700;
    color: var(--external-secondary);
    margin-bottom: 0.3rem;
}

.ps-banner-personalizar-desc {
    font-size: var(--fs-small);
    color: var(--external-secondary-soft);
    line-height: 1.65;
    margin: 0;
}

.ps-banner-personalizar-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.35rem;
    background: transparent;
    border: 1.5px solid rgba(40, 116, 82, 0.4);
    border-radius: 3px;
    color: var(--external-primary);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ps-banner-personalizar-cta:hover {
    background: var(--g-hover-verde);
    border-color: var(--external-primary);
    color: var(--external-primary-dark);
}

.ps-banner-personalizar-cta svg {
    width: 0.9rem;
    height: 0.9rem;
    transition: transform 0.2s ease;
}

.ps-banner-personalizar-cta:hover svg {
    transform: translateX(3px);
}

/* ---- Lightbox ---- */
.ps-lightbox {
    padding: 0;
    border: none;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    /* pinch-zoom y nada más: el arrastre con un dedo deja de desplazar
       —sin esto, deslizar por el fondo, al costado de la imagen, scrolleaba
       la página de atrás—, pero se conserva el pellizco para agrandar, que
       en un plano técnico es justo lo que se necesita.

       El bloqueo por JS (body overflow) no alcanza solo: en iOS, cuando el
       gesto arranca sobre un elemento que no scrollea, Safari igual mueve
       el documento. Esto lo resuelve antes, en el navegador.

       El swipe para cambiar de imagen no se ve afectado: se resuelve con
       touchstart/touchend, no con el gesto nativo de desplazamiento. */
    touch-action: pinch-zoom;
    overscroll-behavior: contain;
}

.ps-lightbox::backdrop {
    background: rgba(10, 18, 13, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ps-lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    position: relative;
    gap: 1rem;
}

/* Mismo fondo oscuro que las flechas, y por el mismo motivo: sobre un plano
   blanco ampliado, el vidrio claro se perdía. */
.ps-lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    width: 38px;
    height: 38px;
    background: rgba(15, 20, 15, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease;
    z-index: 10;
    color: white;
}

.ps-lightbox-close:hover {
    background: rgba(15, 20, 15, 0.85);
}

.ps-lightbox-close svg {
    width: 1.1rem;
    height: 1.1rem;
}

.ps-lightbox-img-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(100vh - 120px);
    overflow: hidden;
}

.ps-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 20, 15, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.18s ease;
    z-index: 10;
}

.ps-lightbox-nav:hover {
    background: rgba(15, 20, 15, 0.85);
}

.ps-lightbox-nav:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.ps-lightbox-nav svg {
    width: 1.2rem;
    height: 1.2rem;
}

.ps-lightbox-nav--prev { left: 1rem; }
.ps-lightbox-nav--next { right: 1rem; }

/* Fila de controles debajo de la imagen: flecha, miniaturas, flecha.
   En escritorio las flechas son fixed, o sea que salen del flujo y esta fila
   termina siendo sólo las miniaturas, igual que antes. */
.ps-lightbox-controles {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 100%;
    min-width: 0;
}

/* En teléfono las flechas bajan a la fila de controles en vez de flotar
   sobre la imagen. Entran en el alto que ya ocupaban las miniaturas (50px),
   así que la imagen no pierde ni un píxel y deja de quedar tapada.
   El swipe sigue siendo el gesto principal; las flechas son la pista de que
   hay más de una imagen. */
@media (max-width: 575.98px) {
    .ps-lightbox-nav {
        position: static;
        transform: none;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
    }

    .ps-lightbox-nav svg {
        width: 1.05rem;
        height: 1.05rem;
    }
}

.ps-lightbox-img-wrap img {
    max-width: min(90vw, 1100px);
    max-height: calc(100vh - 130px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
    animation: ps-lb-in 0.22s ease both;
    transition: opacity 0.14s ease;
}

@keyframes ps-lb-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.ps-lightbox-thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Es lo único que cede ancho en la fila de controles: las flechas
       conservan su tamaño y las miniaturas se desplazan de costado. */
    min-width: 0;
    /* Y la única excepción al touch-action: none del lightbox: acá el dedo
       sí tiene que poder correr el riel, aunque sólo en horizontal. */
    touch-action: pan-x;
}

.ps-lightbox-thumbs::-webkit-scrollbar { display: none; }

.ps-lightbox-thumb {
    width: 50px;
    height: 50px;
    min-width: 50px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    transition: border-color 0.18s ease, opacity 0.18s ease;
    opacity: 0.5;
    flex-shrink: 0;
}

.ps-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-lightbox-thumb:hover { opacity: 0.8; }
.ps-lightbox-thumb.active {
    border-color: var(--external-primary-soft);
    opacity: 1;
}

/* ---- Relacionados ---- */
.ps-relacionados-section {
    padding: 5rem 0;
}

.ps-relacionados-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.ps-relacionados-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--external-primary);
    font-size: var(--fs-small);
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.ps-relacionados-link:hover {
    gap: 0.7rem;
    color: var(--external-primary-dark);
}

.ps-relacionados-link svg {
    width: 0.9rem;
    height: 0.9rem;
}

.ps-mini-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 3px;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ps-mini-card:hover {
    border-color: rgba(40, 116, 82, 0.28);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.ps-mini-imagen {
    width: 60px;
    height: 60px;
    border-radius: 3px;
    overflow: hidden;
    background: linear-gradient(135deg, #edf5f1 0%, #d4e8df 100%);
    flex-shrink: 0;
}

.ps-mini-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ps-mini-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(40, 116, 82, 0.3);
}

.ps-mini-placeholder svg { width: 1.4rem; height: 1.4rem; }

.ps-mini-body { flex: 1; min-width: 0; }

.ps-mini-nombre {
    display: -webkit-box;
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--external-secondary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ps-mini-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(63, 63, 63, 0.28);
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.ps-mini-arrow svg { width: 0.95rem; height: 0.95rem; }

.ps-mini-card:hover .ps-mini-arrow {
    color: var(--external-primary);
    transform: translateX(3px);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .ps-galeria { position: static; }

    .ps-carousel-prev,
    .ps-carousel-next,
    .ps-ampliar-btn {
        opacity: 1;
    }

    .ps-banner-personalizar-inner {
        gap: 1.25rem;
    }
}

@media (max-width: 767.98px) {
    /* El escalón de teléfono del ritmo: 3.5rem por franja */
    .ps-section { padding: 2rem 0 3.5rem; }

    .ps-tecnica-section,
    .ps-relacionados-section,
    .ps-banner-personalizar { padding: 3.5rem 0; }

    .ps-tecnica-layout { gap: 2rem; }

    .ps-thumb { width: 50px; height: 50px; min-width: 50px; }
}

@media (max-width: 575.98px) {
    .ps-acciones { flex-direction: column; }

    .ps-cantidad { align-self: center; }

    .btn-ps-primary,
    .btn-ps-secondary { width: 100%; }

    .ps-banner-personalizar-cta {
        width: 100%;
        justify-content: center;
    }
}