/* Ficha de producto (single-product.php). Ver el docblock de esa plantilla
   para las decisiones de alcance: galería nativa de WooCommerce reestilizada,
   botones "Añadir a la cotización"/"Descargar página" deshabilitados a
   propósito, franja de espacio publicitario como relleno sin ACF todavía. */

/* Membrete y grilla de fotos del PDF ("Descargar página"): ocultos en
   pantalla, se muestran vía @media print más abajo — ver single-product.php. */
.producto-print-header,
.producto-galeria-grid-print {
    display: none;
}

.producto-breadcrumbs {
    width: 100%;
    margin: 2rem 0;
    padding-block: 0.5rem;
    background: linear-gradient(90deg, #FFF 0%, #F5F6FA 100%);
}

/* ── Cabecera: marca + título + bajada, todo centrado ────────────────────── */

.producto-cabecera {
    background: var(--color-fondo);
}

.producto-cabecera-inner {
    padding-block: 1.5rem 2.5rem;
    text-align: center;
}

.producto-marca {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.producto-marca img {
    max-height: 2.5rem;
    width: auto;
}

.producto-marca-nombre {
    font-weight: 700;
    font-size: var(--text-title-h6);
    color: var(--color-muted);
}

.producto-titulo {
    max-width: 46rem;
    margin-inline: auto;
    font-size: var(--text-display-h1);
    color: var(--color-ink);
}

/* Apariencia de .producto-categoria-tag (color/borde/hover) unificada con
   .entry-tag y compañía en layout.css, que se carga siempre — ver el
   comentario ahí. Acá solo el layout de la fila, centrada como el resto de
   la cabecera (.producto-cabecera-inner). */
.producto-categorias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-8);
    margin-top: 1rem;
}

.producto-bajada {
    max-width: 50rem;
    margin: 1rem auto 0;
    color: var(--color-muted);
    font-size: var(--text-body-lg);
}

/* ── Galería + botones ────────────────────────────────────────────────────── */

.producto-media {
    padding-block: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* ── Carrusel de imágenes ─────────────────────────────────────────────────
   Propio, no la galería nativa de WooCommerce: el diseño pide la imagen
   central grande con las vecinas asomando a los costados, algo que el
   flexslider de WooCommerce no hace (una imagen a la vez + miniaturas debajo).
   Mismo criterio que el resto del sitio (andexport-core/inc/carrusel.php):
   scroll-snap nativo, sin Swiper — el "peek" sale solo de que la pista tenga
   más aire a los lados (padding-inline) que el ancho de un slide. */

.producto-galeria-seccion {
    background: var(--color-fondo);
    padding-block: 2rem;
    overflow: hidden;
}

.producto-galeria-viewport {
    position: relative;
}

.producto-galeria-track {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    /* --galeria-desborde lo calcula producto.js a partir del ancho real del
       viewport y del slide (mismo criterio que --ax-desborde del motor de
       carruseles del plugin): con un valor fijo, el "asome" de las vecinas
       se ve bien en una sola resolución y raro en el resto. El 15vw de acá
       es solo el respaldo antes de que el script corra. */
    padding-inline: var(--galeria-desborde, 15vw);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    cursor: grab;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.producto-galeria-track::-webkit-scrollbar {
    display: none;
}

.producto-galeria-track.esta-arrastrando {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.producto-galeria-slide {
    flex: 0 0 auto;
    width: 40rem;
    max-width: 80vw;
    scroll-snap-align: center;
    opacity: 0.45;
    transition: opacity 0.25s ease;
}

.producto-galeria-slide.es-activa {
    opacity: 1;
}

.producto-galeria-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-large);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    transform: scale(0.8);
    transition: transform 0.25s ease;
    /* El navegador arrastra la imagen suelta con el mouse por defecto —
       choca con el arrastre propio de la pista (data-galeria-track). */
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.producto-galeria-slide.es-activa img {
    transform: scale(1);
}

/* Producto sin fotos: wc_placeholder_img() se filtra al isotipo de Andexport
   (ver inc/producto-imagen-vacia.php) en vez de la caja gris de WooCommerce,
   pero como es un logo (no una foto real) no debe recortarse a "cover" ni
   verse a opacidad completa, sino chico y atenuado. Fondo blanco (no
   --color-fondo): .producto-galeria-seccion ya es gris, así que un fondo
   gris acá se perdía contra la sección en vez de leerse como una caja. */
.producto-galeria-slide:has(img.woocommerce-placeholder) {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--color-white);
    border-radius: var(--radius-large);
}

.producto-galeria-slide img.woocommerce-placeholder {
    object-fit: contain;
    width: 45%;
    opacity: 0.16;
    background: none;
    border: none;
}

.producto-galeria-flecha {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-ink);
    box-shadow: 0 2px 8px rgba(18, 18, 18, 0.12);
}

.producto-galeria-flecha:hover {
    color: var(--color-brand-red);
    border-color: var(--color-brand-red);
}

.producto-galeria-flecha svg {
    width: 1.25rem;
    height: 1.25rem;
}

.producto-galeria-flecha--prev {
    left: 1rem;
}

.producto-galeria-flecha--next {
    right: 1rem;
}

@media (max-width: 767px) {
    .producto-galeria-track {
        gap: 1rem;
    }

    .producto-galeria-slide {
        width: 86vw;
    }

    .producto-galeria-flecha {
        display: none;
    }
}

/* Tablet (768-1024px): con el 80vw de escritorio el slide casi no deja aire
   a los costados (~70px en un iPad de 768px) y las flechas terminan paradas
   encima de la esquina de la foto en vez de en el "asome" de atrás, como en
   escritorio. Un tope más chico le devuelve el margen. */
@media (min-width: 768px) and (max-width: 1024px) {
    .producto-galeria-slide {
        max-width: 65vw;
    }
}

.producto-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.producto-acciones .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* .btn-whatsapp trae border-radius: var(--radius-pill) global (base.css) —
       acá los 3 botones/link tienen que verse parejos, así que se pisa solo
       en este contenedor. */
    border-radius: var(--radius-btn);
}

.producto-acciones .btn svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.producto-acciones .btn-whatsapp svg {
    width: 1.5rem;
    height: 1.5rem;
}

.producto-acciones .btn-secondary:disabled,
.producto-acciones .btn-secondary[aria-disabled="true"] {
    border-color: var(--color-gray-03);
    color: var(--color-gray-02);
    cursor: not-allowed;
}

/* ── Pestañas ─────────────────────────────────────────────────────────────── */

.producto-tabs {
    background: var(--color-white);
    border-radius: var(--radius-xlarge);
    padding: 2rem;
    margin-block: 1rem 3rem;
}

.producto-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

.producto-tabs-link {
    display: inline-block;
    padding-block: 0.75rem;
    font-weight: 700;
    font-size: var(--text-title-h6);
    color: var(--color-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.producto-tabs-link:hover {
    color: var(--color-ink);
}

.producto-tabs-link.is-activo {
    color: var(--color-ink);
    border-color: var(--color-brand-red);
}

.producto-tabs-panel {
    display: none;
}

.producto-tabs-panel.is-activo {
    display: block;
}

/* Sin JS: se ve solo el primer panel (Descripción), degradado aceptable. */
.producto-tabs:not(.js-listo) .producto-tabs-panel:first-of-type {
    display: block;
}

.producto-tabs-panel :is(h2, h3, h4) {
    color: var(--color-brand-red);
    margin: 2rem 0 0.75rem;
}

.producto-tabs-panel h2 {
    font-size: var(--text-title-h4);
    /* Muchas descripciones traen `style="text-align: justify;"` pegado en el
       propio h2 (viene del editor); !important es la única forma de pisar un
       estilo en línea desde la hoja. */
    text-align: left !important;
}

.producto-tabs-panel h3 {
    font-size: var(--text-title-h5);
}

.producto-tabs-panel h4 {
    font-size: var(--text-title-h6);
}

.producto-tabs-panel :first-child {
    margin-top: 0;
}

/* Mismo valor que .entry-content p del blog (assets/css/entrada.css): sin
   esto los párrafos quedan pegados uno con otro, porque base.css resetea
   `p { margin: 0; }` en todo el sitio. */
.producto-tabs-panel p {
    margin: 0 0 1.25em;
}

.producto-tabs-panel a {
    font-weight: 700;
}

/* base.css resetea `ul, ol { list-style: none }` en todo el sitio (ver
   comentario ahí) — sin esto la descripción del producto pierde los puntos
   (o números) cuando alguien la escribe como lista. Mismo criterio que
   .entry-content del blog (assets/css/entrada.css). Antes solo alcanzaba a
   `ul`: los `ol` de la descripción (62 productos los usan) se quedaban sin
   padding-left, con el número pegado al borde del contenedor. */
#tab-description ul,
#tab-description ol {
    margin: 0 0 1.25em;
    padding-left: 1.25em;
}

/* Viñeta propia (círculo con check) en vez del punto por defecto. El SVG va
   como máscara para poder teñirlo con background-color (un <li> no admite
   stroke="currentColor" dentro de un data URI). */
#tab-description ul {
    padding-left: 0;
}

#tab-description ul li {
    list-style: none;
    position: relative;
    padding-left: 1.75em;
    margin-bottom: 0.5em;
}

#tab-description ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1.1em;
    height: 1.1em;
    background-color: var(--color-brand-red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.1673 8.33357C18.5479 10.2013 18.2767 12.1431 17.3989 13.8351C16.5211 15.527 15.0897 16.8669 13.3436 17.6313C11.5975 18.3957 9.64203 18.5384 7.80342 18.0355C5.96482 17.5327 4.35417 16.4147 3.24007 14.8681C2.12597 13.3214 1.57577 11.4396 1.68123 9.53639C1.78668 7.63318 2.5414 5.82364 3.81955 4.40954C5.09769 2.99545 6.82199 2.06226 8.70489 1.76561C10.5878 1.46897 12.5155 1.82679 14.1665 2.7794'/%3E%3Cpath d='M7.5 9.16732L10 11.6673L18.3333 3.33398'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.1673 8.33357C18.5479 10.2013 18.2767 12.1431 17.3989 13.8351C16.5211 15.527 15.0897 16.8669 13.3436 17.6313C11.5975 18.3957 9.64203 18.5384 7.80342 18.0355C5.96482 17.5327 4.35417 16.4147 3.24007 14.8681C2.12597 13.3214 1.57577 11.4396 1.68123 9.53639C1.78668 7.63318 2.5414 5.82364 3.81955 4.40954C5.09769 2.99545 6.82199 2.06226 8.70489 1.76561C10.5878 1.46897 12.5155 1.82679 14.1665 2.7794'/%3E%3Cpath d='M7.5 9.16732L10 11.6673L18.3333 3.33398'/%3E%3C/svg%3E") center / contain no-repeat;
}

#tab-description ol li {
    list-style: decimal;
    margin-bottom: 0.5em;
}

.producto-tabs-panel img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin-block: 1rem;
}

/* Fotos de "Casos de arriendo" (Descripción): dos fotos por caso, en grilla
   en vez de apiladas a lo ancho completo — la fuente migrada (chiller.cl)
   trae alguna foto de baja resolución que a ancho completo se ve borrosa, y
   apiladas hacen larguísimo el scroll para poca información nueva.
   object-fit + aspect-ratio fijo también nivela fotos de distinta
   orientación (vertical/horizontal) a la misma altura de fila. */
.producto-caso-fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-block: 1.25rem;
}

.producto-caso-fotos img {
    margin: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Objetivo/Resultado de cada caso: antes viñetas sueltas, ahora dos tarjetas
   cortas — más fácil de escanear y coherente con el resto de la ficha
   (mismos tokens de color/radio que .producto-cert-card). */
.producto-caso-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-block: 1.25rem;
}

.producto-caso-stat {
    padding: 0.9rem 1.1rem;
    background: var(--color-bg-muted);
    border-radius: var(--radius-large);
}

.producto-caso-stat-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--text-body-sm);
    font-weight: 700;
    color: var(--color-brand-red);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.producto-caso-stat-valor {
    display: block;
    color: var(--color-ink);
    font-weight: 600;
}

@media (max-width: 480px) {
    /* Bajo 480px una columna ya no deja espacio para que la foto se lea —
       misma lógica que el resto de las grillas de esta ficha, que colapsan
       a una columna recién en el quiebre más chico. */
    .producto-caso-fotos {
        grid-template-columns: 1fr;
    }
}

.producto-tabs-panel .andexport-video iframe {
    width: 100%;
    height: 550px;
    border-radius: var(--radius);
    border: 0;
}

/* Tablas de "Descripción Técnica": vienen migradas del sitio anterior con
   clases de Bootstrap (table, table-striped, table-bordered, table_compare)
   que ya no existen en este tema, más `width`/`align` puestos a mano en cada
   <td>. Sin CSS propio se ven sin bordes ni fondo, solo texto suelto en dos
   columnas. Se pisa todo eso acá. El scroll lateral en mobile lo da el
   div.tabla-scroll que envuelve cada tabla (layout.css); el borde y el radio
   van en ese div porque una tabla con border-collapse no redondea esquinas. */
.producto-tabs-panel .tabla-scroll {
    margin-block: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.producto-tabs-panel table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--text-body);
}

.producto-tabs-panel table tr {
    border-bottom: 1px solid var(--color-border);
}

.producto-tabs-panel table tr:last-child {
    border-bottom: none;
}

.producto-tabs-panel table tr:nth-child(even) {
    background: var(--color-surface-01);
}

.producto-tabs-panel table td {
    padding: var(--space-12) var(--space-16);
    vertical-align: middle;
    width: auto !important;
}

/* La primera celda de cada fila es siempre la etiqueta del atributo — se usa
   :first-child y no `.col_0` porque algunas tablas migradas repiten esa
   misma clase en TODAS las columnas (ej. una comparativa "Modelo | G150CN-3
   | G150CN-6" donde las tres celdas son `class="col_0"`). El resto de las
   celdas no toca su `text-align`: casi todas las tablas migradas ya traen
   `align="center"` propio (a veces en el <td>, a veces en un <p> adentro) y
   forzarlo acá lo pisaba solo en las celdas sin ese <p> — típicamente la
   fila de encabezado — dejándola desalineada respecto al resto de la misma
   tabla, que sí se veía centrada por su <p>. */
.producto-tabs-panel table td:first-child {
    font-weight: 700;
    color: var(--color-ink);
    width: 40% !important;
    text-align: left !important;
}

/* Fila de encabezado de las tablas comparativas (tr.thead: "Modelo", "M-6
   600 Kg.", ...) — el resto de las filas usa tr.table_data, sin distinción
   visual propia más allá del cebrado de arriba. */
.producto-tabs-panel table tr.thead {
    background: var(--color-ink);
}

/* Sin text-align forzado a propósito: no todas las tablas migradas centran
   sus celdas de datos (align="center" no es parejo en las 61), así que
   forzar el encabezado al centro se veía raro sobre una tabla que el resto
   trae a la izquierda. Cada celda respeta su propio align/estilo, igual
   que las filas de datos — así el encabezado siempre calza con el resto de
   su misma tabla. */
.producto-tabs-panel table tr.thead td {
    color: var(--color-white);
    font-weight: 700;
}

/* Certificaciones: tarjetas en grilla. La tarjeta es <a> cuando el
   certificado tiene archivo adjunto y <div> cuando no (nada que abrir). */
.producto-cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.producto-cert-card {
    display: block;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    color: inherit;
    transition: border-color 0.15s ease;
}

a.producto-cert-card:hover {
    border-color: var(--color-brand-red);
}

.producto-cert-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-soft);
    background: var(--color-bg-muted);
    color: var(--color-muted);
}

.producto-cert-icono svg {
    width: 1.1rem;
    height: 1.1rem;
}

.producto-cert-icono--imagen {
    width: 6rem;
    height: 6rem;
    background: none;
}

.producto-cert-icono--imagen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.producto-cert-nombre {
    font-weight: 700;
    color: var(--color-ink);
}

/* .entry-content p (WooCommerce envuelve así el contenido de cada pestaña)
   le mete margin-bottom a todo <p>. Cuando el nombre es lo último de la
   tarjeta (certificado con solo logo, sin emisor ni vigencia) sobra. */
.producto-cert-nombre:last-child {
    margin-bottom: 0;
}

.producto-cert-emisor {
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-size: var(--text-body-sm);
}

.producto-cert-vigencia {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-body-sm);
    color: var(--color-muted);
}

.producto-cert-vigencia span:last-child {
    color: var(--color-ink);
    font-weight: 600;
}

/* Título de respaldo para cuando se imprime/genera el PDF (ver @media print
   más abajo) — en pantalla la pestaña "Certificaciones" de la nav ya cumple
   ese rol, así que acá se mantiene oculto. */
.producto-print-titulo {
    display: none;
}

/* Documentos: lista de filas con título + descripción + descarga. */
.producto-doc-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.producto-doc-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.producto-doc-item:first-child {
    padding-top: 0;
}

.producto-doc-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.producto-doc-titulo {
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-ink);
}

.producto-doc-descripcion {
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-size: var(--text-body-sm);
}

.producto-doc-descarga {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-brand-red);
    font-weight: 600;
    font-size: var(--text-body-sm);
    white-space: nowrap;
}

.producto-doc-descarga:hover {
    text-decoration: underline;
}

.producto-doc-descarga svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* ── Te podría interesar ──────────────────────────────────────────────────── */

.producto-relacionados {
    padding-block: 1rem 3rem;
}

.producto-relacionados-head {
    margin-bottom: 1.5rem;
}

.producto-relacionados-head h2 {
    font-size: var(--text-header-h3);
    color: var(--color-ink);
}

/* Sube la cabecera del carrusel (acá solo lleva flechas, sin pestañas) para
   que quede a la par del título en vez de en su propia fila abajo — mismo
   truco que .ax-carrusel--casos en carrusel.css: .ax-carrusel ya es
   position:relative, así que un top negativo la saca del flujo sin salirse
   del carrusel. -50px y no los -5rem de casos porque acá el título va solo,
   sin texto debajo, así que hay menos alto que recuperar. */
.producto-relacionados .ax-carrusel__cabecera {
    position: absolute;
    right: 0;
    top: -50px;
}

@media (max-width: 1024px) {
    .producto-relacionados .ax-carrusel__cabecera {
        position: relative;
        top: 0;
    }
}

/* Con menos productos que columnas pedidas el motor del carrusel pasa solo a
   "grilla" y la centra (.ax-carrusel--grilla .ax-carrusel__pista y, si el
   propio JS del scroll llega a marcarla, .ax-carrusel__pista--centrada — ver
   carrusel.php y carrusel.css). Acá el título "Te podría interesar" queda a
   la izquierda, así que las tarjetas centradas debajo se leen descuadradas:
   se pegan al borde izquierdo, igual que el título. */
.ax-carrusel--relacionados.ax-carrusel--grilla .ax-carrusel__pista,
.ax-carrusel--relacionados .ax-carrusel__pista--centrada {
    justify-content: flex-start;
}

/* ── Espacio publicitario ─────────────────────────────────────────────────── */

.producto-publicidad {
    padding-block: 1rem 3rem;
}

.producto-publicidad-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.producto-publicidad-slot {
    overflow: hidden;
    border-radius: var(--radius);
}

.producto-publicidad-slot img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Banner cruzado (andexport-core/inc/banner.php) ──────────────────────── */

/* Solo el ritmo vertical de la sección: el banner en sí (.automatizacion-
   tecser-*) usa las mismas clases y el mismo CSS que la página Automatización
   — ver assets/css/banner-tecser.css y single-product.php. */
.producto-banner-cruzado {
    padding-block: 1rem 5rem;
}

@media (max-width: 767px) {
    .producto-titulo {
        font-size: var(--text-header-h2);
    }

    .producto-tabs {
        padding: 1.5rem;
    }

    .producto-tabs-nav {
        gap: 1.25rem;
    }
}

/* ── "Descargar página" (data-producto-descargar en producto.js) ────────────
   window.print() nativo del navegador — acá solo se oculta lo que no es la
   ficha, para que "Guardar como PDF" en ese diálogo produzca solo el
   contenido del producto. Todas las pestañas se muestran a la vez (en
   pantalla solo se ve la activa, ver .producto-tabs-panel más arriba) porque
   en el PDF no hay forma de hacer click para cambiar de pestaña. */
@media print {
    .topbar,
    .site-header,
    .site-header-spacer,
    .sticky-bar,
    .site-footer,
    .floating-buttons,
    .producto-acciones,
    .producto-tabs-nav,
    .ax-cotiz-overlay,
    /* El iframe de video no imprime (lo pinta el navegador aparte, fuera del
       flujo de impresión) — sin esto queda un hueco en blanco donde iría. */
    .andexport-video,
    /* "Te podría interesar" es navegación hacia otros productos, no
       contenido de esta ficha. */
    .producto-relacionados,
    /* Banner cruzado (marca/industria): es publicidad de otra línea, no
       contenido de este producto. */
    .producto-banner-cruzado {
        display: none !important;
    }

    .producto-tabs-panel {
        display: block !important;
    }

    /* Membrete: logo del sitio + dominio, arriba del todo — con el header
       real oculto en el PDF, es lo único que dice de dónde salió la ficha. */
    .producto-print-header {
        display: block;
        margin-bottom: var(--space-16);
        padding-bottom: var(--space-12);
        border-bottom: 1px solid var(--color-border);
    }

    .producto-print-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-16);
    }

    .producto-print-header-logo {
        height: 2rem;
        width: auto;
    }

    .producto-print-header-url {
        font-size: var(--text-body-sm);
        color: var(--color-muted);
    }

    .producto-print-titulo {
        display: block;
    }

    /* El carrusel es interacción de pantalla (scroll horizontal, flechas): en
       la hoja impresa no se puede "hacer scroll", así que en su lugar se
       muestra .producto-galeria-grid-print más abajo, con todas las fotos a
       la vez. */
    .producto-galeria-seccion {
        display: none !important;
    }

    /* Galería en su propia página: separada de la cabecera (de ahí el salto
       antes) y de la Descripción, que ya arranca página aparte más abajo. */
    .producto-galeria-grid-print {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-16);
        break-before: page;
        page-break-before: always;
    }

    .producto-galeria-grid-print-item img {
        display: block;
        width: 100%;
        height: auto;
        border: 1px solid var(--color-border);
    }

    /* Sin fotos: mismo isotipo atenuado que la galería en pantalla, no la
       foto de portada a página completa que da el ancho:100% de arriba. */
    .producto-galeria-grid-print-item img.woocommerce-placeholder {
        width: 40%;
        margin: 20% 30%;
        opacity: 0.25;
        border: none;
    }

    /* Descripción y Certificaciones siempre arrancan en una página nueva del
       PDF — el salto va en el propio título (y no en #tab-description /
       #tab-andexport_certificaciones) porque es lo primero que se pinta de
       cada pestaña. */
    .producto-print-titulo--descripcion,
    .producto-print-titulo--certificaciones {
        break-before: page;
        page-break-before: always;
    }

    /* Certificaciones: en el PDF alcanza con el nombre de cada certificado
       (nombre + emisor + vigencia siguen abajo) — la imagen/ícono no aporta
       y solo agranda el documento. */
    .producto-cert-icono {
        display: none !important;
    }

    /* .container mide 1280px (var(--container-width)) — bastante más ancho
       que la hoja impresa. Sin este tope, el navegador no lo achica: lo
       recorta en el borde derecho de la hoja, así que la cabecera (marca +
       título + bajada) se ve pegada a la izquierda en vez de centrada, aunque
       su texto interno ya use text-align: center. */
    .container {
        max-width: 100%;
    }

}