/* ==========================================================================
   Tarjeta catálogo USADOS — traducción exacta del CSS de la beta (index.html)
   Prefijo .pu- para no colisionar con WoodMart. Solo afecta a productos
   usados (el markup lo emite content-product.php únicamente para cat 22).
   ========================================================================== */

:root {
    /* ======================================================================
       Paleta traída de www.pompeyousados.cl (:root de index.html / ficha.html,
       13-08-2026). Estos son los valores de la referencia, no aproximaciones:

           --navy #001ff3   --navy-2 #0016b8   --orange #fc450d
           --orange-d #d93a0a   --green #67bc2e   --bg #fafafa
           --ink #0c0c0c   --ink-2 #7a8499   --line #e3e8f0

       Antes acá vivían versiones oscurecidas del naranja y del verde para
       cumplir contraste AA sobre blanco. Se reemplazan por los de la
       referencia porque la paridad visual es el objetivo, pero el problema de
       contraste sigue siendo real y está medido abajo: no desapareció, quedó
       aceptado a propósito.
       ====================================================================== */
    --pu-navy: #001ff3;
    --pu-navy-2: #0016b8;
    --pu-orange: #fc450d;
    --pu-orange-d: #d93a0a;
    --pu-green: #67bc2e;
    --pu-bg: #fafafa;
    --pu-ink: #0c0c0c;
    /* El gris de la referencia (anotado arriba, en el bloque de la paleta) da
       3,76:1 sobre blanco: falla AA. A diferencia del naranja y del verde, este
       NO es un color de marca —es el gris de texto secundario— así que se
       oscurece lo mínimo para cumplir sin que se note el cambio. Medido:
       5,18:1 sobre blanco, 4,96 sobre el lienzo --pu-bg y 4,57 sobre el relleno
       de los chips, que es el fondo más claro donde este color escribe texto.

       Importa porque este token pinta casi todo el texto de la tarjeta (marca,
       versión, specs, sucursal, "Precio lista") y el cuerpo entero de la
       descripción larga de la ficha. */
    --pu-ink-2: #656d81;
    --pu-line: #e3e8f0;
    --pu-card: #fff;
    --pu-radius: 14px;
    --pu-shadow: 0 1px 3px rgba(16, 30, 70, .08), 0 8px 24px rgba(16, 30, 70, .06);

    /* ----------------------------------------------------------------------
       Los mismos colores, para cuando son TEXTO CHICO sobre fondo claro.

       Medido sobre blanco: el naranja #fc450d da 3,49:1 y el verde #67bc2e da
       2,39:1. AA pide 4,5:1 en texto normal y 3:1 en texto grande, así que el
       verde no pasa ni como texto grande. Afecta a "Valor cuota", la línea de
       precio lista rebajado y el "hace N días" — que son datos, no adornos.

       Hasta la auditoría del 14-08-2026 apuntaban al color de la referencia y
       el problema quedaba anotado pero no resuelto. Ahora usan los valores
       oscurecidos: son datos de plata —cuota, precio rebajado— y "Valor cuota"
       a 2,39:1 era, en la práctica, un número que no se podía leer.

       Los RELLENOS (badges, botones) siguen con el naranja y el verde de la
       referencia: acá solo cambia el color cuando el token escribe TEXTO sobre
       fondo claro. Para volver a la paridad exacta, apuntar estas dos líneas de
       vuelta a var(--pu-green) y var(--pu-orange).
       ---------------------------------------------------------------------- */
    --pu-green-txt: #097a3f;   /* 5,43:1 sobre blanco (el verde de marca da 2,39) */
    --pu-orange-txt: #c23e00;  /* 5,27:1 sobre blanco (el naranja de marca da 3,49) */

    /* Variante clara del naranja para cuando va SOBRE fondo oscuro (--pu-navy),
       donde el naranja de marca queda por debajo del mínimo legible. */
    --pu-orange-on-dark: #ff8c5a;

    /* El naranja cuando es RELLENO con texto blanco encima (sellos, botón de
       tasación, CTA del hero, columna ganadora del comparador). El naranja de
       marca da 3,50:1 contra blanco y esos textos van de 10,5 a 14px, así que
       ninguno alcanza. --pu-orange-d, que ya existía como color de hover, da
       4,61:1 y es el mismo tono un punto más profundo.

       Los rellenos naranjas SIN texto encima (la marca inclinada del título de
       sección, el "+" de los acordeones, el borde de la miniatura activa) se
       quedan con --pu-orange: ahí no hay nada que leer. */
    --pu-orange-fill: var(--pu-orange-d);

    /* Fondos suaves derivados, no están en la referencia como token pero sus
       valores sí se usan ahí. */
    --pu-orange-soft: #ffeee7;
    --pu-soft: #eef1f7;
    --pu-soft-2: #e5e8ef;
    /* Tinta del glifo de los botones de cerrar. Valor de la referencia
       (.close-x usa #5a6478 sobre #eef1f6): da 5,9:1 sobre el círculo claro,
       mientras --pu-ink-2 ahí daría 3,1:1. */
    --pu-close-ink: #5a6478;

    /* Ícono de cámara (contorno, trazo 1.5, mismo dibujo que el resto del set)
       para el hueco de la foto rota. Va como data URI de máscara: sin color
       propio adentro, lo pinta quien lo use. */
    --pu-ico-camara: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2.19a1.5 1.5 0 0 0 1.24-.66l.83-1.24A1.5 1.5 0 0 1 10 4.5h4a1.5 1.5 0 0 1 1.24.6l.83 1.24A1.5 1.5 0 0 0 17.31 7h2.19A1.5 1.5 0 0 1 21 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5z"/><circle cx="12" cy="13" r="3.5"/></svg>');

    /* Medidas de layout (ver los bloques que las usan más abajo). */
    --pu-utility-h: 70px;
    --pu-linea-precio-h: 22px;
}


/* ---------- Columnas ----------
   WoodMart inyecta su CSS de grilla desde su propio content-product.php;
   como lo reemplazamos, definimos el ancho aquí (breakpoints de la beta:
   1 col móvil, 2 cols ≥576px, 3 cols ≥1025px).

   El gutter ya NO se delega al tema. Quien lo ponía era
   `html body .wd-spacing-30 .product-grid-item` (padding 20px +
   margin-bottom 40px), o sea que dependía de que el contenedor conservara la
   clase `wd-spacing-30`. Cualquier grilla que se re-renderice sin esa clase
   —filtrado, buscador, paginación— quedaba con gutter 0: las tarjetas se
   tocan de lado y la fila cae al margin-bottom de acá. Se fija el mismo valor
   que ya se ve en pantalla (40px en los dos ejes), así que cuando la clase del
   tema sí está no hay doble espacio: gana la del tema con el mismo número. */
.wd-products-holder > .pu-card,
.products > .pu-card {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    margin-bottom: 40px;
    display: flex;
}
@media (min-width: 576px)  { .wd-products-holder > .pu-card { width: 50%; } }
@media (min-width: 1025px) { .wd-products-holder > .pu-card { width: 33.3333%; } }

/* Alturas iguales por fila: WoodMart trae align-items:start → cada tarjeta
   con su alto y los botones quedan desalineados. Stretch solo si hay usados. */
.wd-products-holder:has(> .pu-card) { align-items: stretch !important; }

/* ---------- Card ----------
   .pu-card (article) = celda de la grilla (lleva el gutter de WoodMart)
   .pu-card-box (div interno) = la tarjeta visual de la beta */
.pu-card-box {
    background: var(--pu-card);
    border-radius: var(--pu-radius);
    box-shadow: var(--pu-shadow);
    /* overflow visible: los tooltips de badges deben poder salir de la caja;
       el recorte redondeado lo hace .pu-ph con su propio border-radius */
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 1;
    transition: transform .15s, box-shadow .15s;
    position: relative;
}
.pu-card-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16,30,70,.1), 0 16px 36px rgba(16,30,70,.12);
}

/* Heatmap Clarity: la gente toca título/specs/precio esperando navegar → TODA la tarjeta navega */
.pu-card-link { position: absolute; inset: 0; z-index: 1; }
.pu-card .pu-actions { position: relative; z-index: 2; }
.pu-card.is-reserved .pu-ph img { filter: grayscale(.55) brightness(.92); }

/* ---------- Imagen (skeleton + aspect ratio fijo = sin CLS) ---------- */
.pu-ph {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #e9edf4 linear-gradient(100deg, #e9edf4 40%, #f5f7fb 50%, #e9edf4 60%);
    background-size: 200% 100%;
    animation: pu-shimmer 1.3s infinite;
    border-radius: var(--pu-radius) var(--pu-radius) 0 0; /* la caja ya no recorta */
}
@keyframes pu-shimmer { to { background-position: -200% 0; } }

/* ==========================================================================
   Accesibilidad de interacción (F5 del rediseño de la ficha)
   ========================================================================== */

/* Foco visible en TODO lo que se puede accionar. Antes había 3 reglas de :focus
   sueltas y una sola de :focus-visible en todo el CSS propio del sitio, así que
   navegar con teclado era prácticamente a ciegas.
   Se usa :focus-visible y no :focus para no dibujar el anillo cuando el control
   se activa con el mouse — que es la razón por la que suele terminar borrado. */
.pu-btn-detail:focus-visible,
.pu-btn-wsp:focus-visible,
.pu-share:focus-visible,
.pu-modal-enviar:focus-visible,
.pu-modal-x:focus-visible,
.pu-card-link:focus-visible,
.pu-bdg:focus-visible,
button.pu-btn360:focus-visible,
.pu-thumbs img:focus-visible,
.pu-equip-full summary:focus-visible,
.pu-desc-det > summary:focus-visible,
.pu-faq-det > summary:focus-visible,
.pu-retoma-btn:focus-visible,
.pu-hero-cta:focus-visible,
.pu-btile:focus-visible,
.pu-ver-mas:focus-visible,
.pu-sim-controls input[type=range]:focus-visible {
    outline: 3px solid var(--pu-navy);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sobre fondo oscuro el anillo azul se pierde: ahí va en blanco. */
.pu-retoma-btn:focus-visible,
.pu-hero-cta:focus-visible {
    outline-color: #fff;
}

/* Respeto de prefers-reduced-motion.
   Importa más de lo que parece acá: el shimmer del esqueleto de imagen corre
   con iteración INFINITA en cada tarjeta (8 a la vez en el listado), así que
   para alguien que pidió menos movimiento es una animación permanente en
   pantalla. También se neutralizan el hover que desplaza la tarjeta y las
   transiciones, dejando los cambios de estado instantáneos pero visibles. */
@media (prefers-reduced-motion: reduce) {
    .pu-ph {
        animation: none;
        background: #e9edf4;
    }
    .pu-card-box,
    .pu-card-box:hover {
        transition: none;
        transform: none;
    }
    .pu-bdg::after,
    .pu-btn-detail,
    .pu-btn-wsp,
    .pu-share,
    .pu-btile,
    .pu-ver-mas {
        transition: none;
    }
}
.pu-ph img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--pu-radius) var(--pu-radius) 0 0; }

/* Foto rota (keys S3 muertas del incidente MediaCloud) — detiene el shimmer
   infinito y muestra un ícono neutro en vez del broken-image del navegador */
.pu-ph.pu-img-rota { animation: none; background: #eef1f7; display: flex; align-items: center; justify-content: center; }
/* Ícono de cámara en SVG, no el emoji 📷 que estaba antes: el resto del sitio
   dibuja con SVG inline y el emoji lo renderiza cada sistema con su propio arte
   (Apple lo pinta a color, Windows en otro estilo), así que el hueco de la foto
   rota se veía distinto en cada equipo. Va como máscara para que herede el
   color del texto y no traiga hexadecimales propios. */
.pu-ph.pu-img-rota::after {
    content: '';
    width: 34px;
    height: 34px;
    opacity: .3;
    background-color: var(--pu-ink-2);
    -webkit-mask: var(--pu-ico-camara) center / contain no-repeat;
    mask: var(--pu-ico-camara) center / contain no-repeat;
}

/* ---------- Badges ---------- */
.pu-badges {
    position: absolute; top: 10px; left: 10px; right: 10px;
    display: flex; flex-wrap: wrap; gap: 5px; z-index: 2;
}
.pu-bdg {
    position: relative;
    font-size: 11px; font-weight: 800; letter-spacing: .6px;
    padding: 4px 9px; border-radius: 6px;
    color: #fff; text-transform: uppercase; cursor: help;
}
.pu-bdg::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 7px); left: 0;
    background: var(--pu-navy); color: #fff;
    padding: 8px 11px; border-radius: 9px;
    font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
    width: max-content; max-width: 230px; line-height: 1.45;
    box-shadow: 0 6px 20px rgba(10,20,50,.3);
    z-index: 20; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.pu-bdg:hover::after, .pu-bdg:focus::after { opacity: 1; }
/* Badges desde el 2º: tooltip anclado a la derecha para que no se desborde de la tarjeta */
.pu-bdg:nth-child(n+2)::after { left: auto; right: 0; }
.pu-bdg.op { background: var(--pu-orange-fill); }
.pu-bdg.rs { background: #3a4256; }
.pu-bdg.ks { background: var(--pu-navy); }
.pu-bdg.ud { background: #fff; color: var(--pu-navy); border: 1px solid var(--pu-navy); }
.pu-bdg.pk { background: var(--pu-green); }
.pu-bdg.ni { background: #7c3aed; }
.pu-bdg.td { background: #3dc7da; }

/* ---------- Contenido ---------- */
.pu-card-c { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.pu-brand { font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--pu-ink-2); }
.pu-model { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.2px; color: var(--pu-ink); }
.pu-version { font-size: 13px; color: var(--pu-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pu-f-spec { line-height: 1.45; } /* WoodMart impone lh 20px absoluta: el chip quedaba en 52px vs los 45 de la referencia */
.pu-spec { font-size: 12px; font-weight: 600; color: var(--pu-ink-2); background: #eef1f7; padding: 3.5px 9px; border-radius: 6px; }
.pu-loc { font-size: 12px; color: var(--pu-ink-2); display: flex; align-items: center; gap: 4px; }

/* ---------- Precios ---------- */
.pu-price-row { margin-top: auto; padding-top: 8px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.pu-price small { display: block; font-size: 11px; color: var(--pu-ink-2); font-weight: 600; margin-bottom: 1px; }
.pu-price b { font-size: 20px; letter-spacing: -.3px; color: var(--pu-ink); }
.pu-pct { display: inline-block; margin-left: 6px; background: var(--pu-orange-fill); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; vertical-align: 1px; }
.pu-lista-line { display: block; font-size: 12px; color: var(--pu-ink-2); font-weight: 600; margin-top: 2px; }
.pu-lista-line del { color: var(--pu-ink-2); } /* era #9aa3b6 = 2,53:1, falla AA */
.pu-lista-line em { font-style: normal; font-weight: 800; color: var(--pu-orange-txt); }
.pu-lista-line.muted { color: var(--pu-ink-2); font-weight: 500; } /* era #9aa3b6 = 2,53:1, falla AA */
/* "Valor cuota" es el dato que más se compara entre autos y salía a 11px en el
   verde de marca (2,39:1): chico Y sin contraste a la vez. El color lo arregla
   --pu-green-txt en el bloque de tokens; acá se sube el cuerpo a 12px, que es la
   medida del resto de las líneas del bloque de precio. Los rótulos de 11px
   ("Desde · con financiamiento") se quedan como en la referencia: son etiquetas,
   no cifras. */
/* `small.` no es adorno: en la tarjeta esta línea es un <small> dentro de
   .pu-price, y `.pu-price small { font-size: 11px }` (0,1,1) le gana a una clase
   sola (0,1,0). Calificando por etiqueta queda (0,1,1) y gana por orden. */
.pu-cuota,
small.pu-cuota { color: var(--pu-green-txt) !important; font-weight: 700 !important; font-size: 12px; }

/* ---------- Acciones ---------- */
.pu-actions { display: flex; gap: 8px; margin-top: 11px; }
.pu-btn-detail {
    flex: 1; text-align: center;
    background: var(--pu-navy); color: #fff !important;
    font-weight: 700; font-size: 14px;
    padding: 11px; border-radius: 10px; text-decoration: none;
}
.pu-btn-detail:active { background: var(--pu-navy-2); }
.pu-btn-wsp {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
    background: #e8f8ee; color: var(--pu-green);
    display: flex; align-items: center; justify-content: center;
}
.pu-btn-wsp:active { background: #d4f2e0; }

/* ==========================================================================
   Neutralizar decoración WoodMart dentro de la tarjeta usados
   (hover shadows dobles, títulos con estilos del tema, etc.)
   ========================================================================== */
.pu-card .wd-entities-title,
.pu-card .custom-brand,
.pu-card .custom-fee-value { display: none; }

/* ==========================================================================
   Paquete 1 — Buscador en tiempo real
   ========================================================================== */
.pu-search {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid var(--pu-line); border-radius: 11px;
    padding: 9px 12px; margin-bottom: 10px; max-width: 420px;
    color: var(--pu-ink-2);
}
.pu-search:focus-within { border-color: var(--pu-navy); }
.pu-search svg { flex-shrink: 0; }
#pu-q { flex: 1; border: 0; outline: none; font-size: 14px; color: var(--pu-ink); background: transparent; }
.pu-q-clear { background: none; border: 0; color: var(--pu-ink-2); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.pu-search-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: #e8edf8; color: var(--pu-navy); font-size: 13px; font-weight: 700;
    padding: 6px 8px 6px 12px; border-radius: 99px; margin-bottom: 10px;
}
.pu-search-pill a { color: var(--pu-navy); text-decoration: none; font-weight: 800; padding: 0 4px; }
.pu-empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; color: var(--pu-ink-2); font-size: 14px; line-height: 1.7; }
.pu-empty a { color: var(--pu-orange-txt); font-weight: 700; text-decoration: none; }
.pu-empty h3 { color: var(--pu-ink); margin: 0 0 6px; font-size: 18px; }
.pu-empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.pu-empty-wsp { display: inline-flex; align-items: center; gap: 7px; background: var(--pu-green); color: #fff !important; font-weight: 800; padding: 12px 20px; border-radius: 11px; text-decoration: none; }
.pu-empty-reset { background: #fff; border: 1.5px solid var(--pu-line); color: var(--pu-navy) !important; font-weight: 700; padding: 12px 20px; border-radius: 11px; text-decoration: none; }

/* Paquete 3 — Cards especiales (garantía, retoma) */
.pu-card-especial .pu-card-box {
    justify-content: center; padding: 22px 18px; min-height: 280px; text-align: left;
    position: relative; overflow: hidden;
}
.pu-garantia { background: linear-gradient(150deg, var(--pu-navy), #0016b8); color: #fff; }
.pu-marca-agua { position: absolute; right: -34px; top: -20px; height: 150%; opacity: .09; pointer-events: none; }
.pu-sello { height: 64px; width: auto; align-self: flex-start; margin-bottom: 12px; filter: drop-shadow(0 3px 10px rgba(0,0,0,.3)); position: relative; }
.pu-garantia-t { font-size: 18px; font-weight: 800; line-height: 1.25; margin-bottom: 10px; position: relative; }
.pu-garantia-b { font-size: 13px; color: #d9e0ff; line-height: 1.6; position: relative; }

.pu-retoma { background: var(--pu-navy); color: #fff; }
.pu-retoma-ico { margin-bottom: 12px; color: var(--pu-orange-on-dark); font-size: 26px; font-weight: 800; } /* va sobre --pu-navy: 6,26:1 (con --pu-orange daba 2,73) */
.pu-retoma-t { font-size: 19px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.pu-retoma-b { font-size: 13px; color: #c9d4ec; margin-bottom: 16px; line-height: 1.5; }
.pu-retoma-btn { background: var(--pu-orange-fill); color: #fff !important; font-weight: 800; font-size: 14px; padding: 13px; border-radius: 11px; text-align: center; width: 100%; text-decoration: none; }

/* Paquete 3 — Tile "+N más" */
.pu-btile-mas { border-style: dashed; }
.pu-btile-mas b { color: var(--pu-orange-txt); }

/* ==========================================================================
   Paquete 6 — Hero de oportunidades + value bar (traducción de index.html → .hero)
   ========================================================================== */
.pu-hero {
    background: linear-gradient(115deg, var(--pu-navy) 0%, var(--pu-navy-2) 100%);
    color: #fff; border-radius: var(--pu-radius); overflow: hidden; position: relative;
    margin-bottom: 18px;
}
.pu-hero-p { position: absolute; right: -30px; top: 50%; transform: translateY(-46%) rotate(-8deg); height: 230%; opacity: .08; pointer-events: none; }
.pu-hero-in { position: relative; z-index: 1; padding: 22px 20px 0; }
.pu-hero-track { position: relative; min-height: 132px; }
.pu-hero-slide {
    display: none; align-items: center; gap: 16px; color: #fff; text-decoration: none;
}
.pu-hero-slide.activa { display: flex; animation: puHeroFade .4s ease; }
@keyframes puHeroFade { from { opacity: 0 } to { opacity: 1 } }
.pu-hero-kicker { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #ff9d7e; margin-bottom: 5px; }
.pu-hero-h { font-size: clamp(19px, 3.6vw, 28px); font-weight: 800; line-height: 1.12; letter-spacing: -.4px; }
.pu-hero-h i { font-style: normal; font-weight: 800; }
.pu-hero-slide p { font-size: 14px; color: #d9e0ff; margin-top: 7px; }
.pu-hero-slide p del { opacity: .7; }
.pu-hero-pct { background: var(--pu-orange-fill); color: #fff; font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 99px; margin-left: 4px; }
.pu-hero-cta { display: inline-block; margin-top: 11px; background: var(--pu-orange-fill); color: #fff; font-weight: 800; font-size: 13px; padding: 9px 17px; border-radius: 99px; }
.pu-hero-slide:hover .pu-hero-cta { background: var(--pu-orange-d); }
.pu-hero-foto { height: 110px; width: 148px; object-fit: cover; border-radius: 14px; margin-left: auto; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.pu-hero-dots { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px 0; position: relative; z-index: 1; }
/* !important: el reset global de botones de WoodMart trae su propio
   min-height/padding que le gana en especificidad a una clase sola
   (mismo problema visto con .pu-btn360 — ver galeria.php). */
.pu-hero-dots button {
    width: 7px !important; height: 7px !important; min-height: 0 !important;
    border-radius: 99px; background: rgba(255,255,255,.35);
    padding: 0 !important; border: 0; cursor: pointer; transition: all .2s;
}
.pu-hero-dots button.on { background: #fff; width: 19px !important; }
@media (max-width: 700px) { .pu-hero-foto { display: none; } }

.pu-value {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
    background: rgba(255,255,255,.08); padding: 12px 16px; position: relative; z-index: 1;
    font-size: 12px; font-weight: 700; color: #fff;
}
.pu-value-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ==========================================================================
   C1 — Chips de intención (scroll horizontal, estilo beta)
   ========================================================================== */
.pu-chips {
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 4px 0 10px; margin-bottom: 2px;
}
.pu-chips::-webkit-scrollbar { display: none; }
.pu-chip {
    flex-shrink: 0; padding: 8px 15px; border-radius: 99px;
    background: #fff; border: 1.5px solid var(--pu-line);
    font-size: 14px; font-weight: 600; color: var(--pu-ink-2);
    text-decoration: none; transition: all .15s; white-space: nowrap;
}
.pu-chip:active { transform: scale(.96); }
.pu-chip:hover { border-color: var(--pu-navy); color: var(--pu-navy); }
.pu-chip.on { background: var(--pu-navy); border-color: var(--pu-navy); color: #fff; }
.pu-chip .cnt { opacity: .55; font-weight: 500; margin-left: 5px; font-size: 12px; }

/* ==========================================================================
   C2 — Tiles de marca (estilo beta)
   ========================================================================== */
.pu-brands {
    display: flex; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 0 0 14px;
}
.pu-brands::-webkit-scrollbar { display: none; }
.pu-btile {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; min-width: 80px; padding: 10px 14px;
    background: #fff; border: 1.5px solid var(--pu-line); border-radius: 12px;
    text-decoration: none; transition: all .15s;
}
.pu-btile .pu-blogo { height: 32px; width: auto; max-width: 70px; object-fit: contain; }
.pu-btile b { font-size: 12px; letter-spacing: 0; color: var(--pu-ink); font-weight: 800; }
.pu-btile .cnt { font-size: 11px; color: var(--pu-ink-2); font-weight: 600; } /* era #9aa3b6 = 2,53:1 */
.pu-btile:hover { border-color: var(--pu-navy); }
.pu-btile.on { border-color: var(--pu-navy); background: var(--pu-navy); }
.pu-btile.on .pu-blogo { filter: brightness(0) invert(1); }
.pu-btile.on b, .pu-btile.on .cnt { color: #fff; }

/* ==========================================================================
   C5 — "Ver más" (oculta paginación numérica, botón estilo beta)
   ========================================================================== */
.woocommerce-pagination.pu-oculta { display: none !important; }
.pu-ver-mas {
    display: block; margin: 8px auto 24px;
    background: #fff; border: 1.5px solid var(--pu-line);
    font-weight: 700; font-size: 14px; color: var(--pu-navy);
    padding: 13px 34px; border-radius: 12px; cursor: pointer;
    transition: all .15s;
}
.pu-ver-mas:hover { border-color: var(--pu-navy); }

/* ==========================================================================
   BLOQUE D — Ficha de usado
   ========================================================================== */

/* Marca + specs bajo el título */
.pu-f-brand { font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--pu-ink-2); margin-bottom: 4px; }
.pu-f-specs { margin: 8px 0; }

/* D2 — Bloque de precios */
/* Caja de precio con borde, no con relleno gris: ahora que el resumen es una
   tarjeta blanca, un relleno gris encima se veia turbio. La referencia usa
   justamente borde (.price-box). */
.pu-f-precios { margin: 8px 0 12px; padding: 14px; border: 1.5px solid var(--pu-line); border-radius: 12px; }
.pu-f-label { display: block; font-size: 12px; color: var(--pu-ink-2); font-weight: 600; letter-spacing: 0; }
.pu-f-price { font-size: 30px; font-weight: 800; letter-spacing: -.5px; color: var(--pu-ink); line-height: 1.2; }
.pu-f-cuota { color: var(--pu-green-txt); font-weight: 700; font-size: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--pu-line); }

/* Paquete 4 — Freshness (los badges pasaron a la galería, ver Paquete 5) */
.pu-freshness { display: flex; gap: 14px; margin: 10px 0 2px; font-size: 12px; color: var(--pu-ink-2); }
.pu-freshness b { color: var(--pu-green-txt); }

/* Aire del encabezado del summary.

   WoodMart le pone margin-bottom: 20px a TODOS los hijos del summary
   (.summary-inner.set-mb-l > *) con más especificidad que una clase sola, así
   que los márgenes de arriba no llegaban a aplicarse: entre la fila de marca y
   el título quedaban 20px y otros 20 entre "Publicado..." y los chips. La
   referencia lleva la marca pegada al título (~4px) y 12px antes de los chips.
   Se repite la ruta completa para ganar especificidad sin !important. */
.pu-ficha .summary-inner > .pu-f-brand-row { margin-bottom: 4px; }
.pu-ficha .summary-inner > .pu-freshness { margin: 10px 0 2px; }

/* ==========================================================================
   Paquete 5 — Galería swipe + visor 360° (traducción exacta de ficha.html)
   ========================================================================== */
.pu-gal { background: var(--pu-card); border-radius: var(--pu-radius); box-shadow: var(--pu-shadow); overflow: hidden; }
.pu-gal-main { position: relative; aspect-ratio: 4/3; background: #e9edf4; }
.pu-gal-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pu-gal-track::-webkit-scrollbar { display: none; }
.pu-gal-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; scroll-snap-align: center; }
.pu-gal-count { position: absolute; bottom: 10px; right: 10px; background: rgba(10,20,50,.75); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; display: flex; align-items: center; gap: 5px; pointer-events: none; }
/* right: 96px reserva el ancho del boton 360 (77px + 10 de margen + aire): sin
   eso el contenedor de badges llegaba hasta el borde derecho y el ultimo badge
   se metia DEBAJO del boton, quedando cortado. Con el ancho limitado, flex-wrap
   los baja a una segunda linea. */
.pu-gal-badges { position: absolute; top: 10px; left: 10px; right: 96px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 2; }

/* Visor 360° (reutiliza las fotos reales del producto como cuadros de giro) */
/* !important en position: WoodMart resetea `button{position:relative}`
   (efecto ripple) con la misma especificidad que una clase — sin esto el
   botón 360° cae al flujo normal en vez de flotar sobre la imagen. */
button.pu-btn360 { position: absolute !important; min-height: 44px; top: 10px; right: 10px; z-index: 3; background: #fff; color: var(--pu-navy); font-size: 12px; font-weight: 800; letter-spacing: .5px; padding: 8px 13px; border-radius: 99px; box-shadow: 0 3px 12px rgba(10,20,50,.25); align-items: center; gap: 6px; }
button.pu-btn360.on { background: var(--pu-orange-fill) !important; color: #fff; }
.pu-v360 { position: absolute; inset: 0; background: #e9edf4; display: none; align-items: center; justify-content: center; cursor: grab; touch-action: pan-y; user-select: none; z-index: 2; }
.pu-v360.activo { display: flex; }
.pu-v360.arrastrando { cursor: grabbing; }
.pu-v360 img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pu-v360-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(10,20,50,.75); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 99px; display: flex; align-items: center; gap: 7px; pointer-events: none; }

.pu-thumbs { display: flex; gap: 6px; padding: 10px; overflow-x: auto; scrollbar-width: none; }
.pu-thumbs::-webkit-scrollbar { display: none; }
.pu-thumbs img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; opacity: .55; cursor: pointer; border: 2px solid transparent; }
.pu-thumbs img.on { opacity: 1; border-color: var(--pu-orange); }

/* Reservado */
.pu-f-reservado { background: #3a4256; color: #fff; padding: 12px 15px; border-radius: 11px; font-size: 14px; line-height: 1.5; margin-bottom: 12px; }

/* D7 — Compartir */
/* Compartir: píldora suave junto a la marca, como en la referencia.
   Antes era un rectángulo con borde duro, texto en mayúsculas (se lo imponía el
   tema a todos los <button>) y una flecha "↗" de abrir-en-otra-pestaña, que es
   justo lo que este botón no hace. */
.pu-f-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pu-share {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    background: var(--pu-soft);
    border: 0;
    color: var(--pu-navy);
    font-weight: 700;
    font-size: 13px;
    text-transform: none;   /* el tema pone uppercase en todos los <button> */
    letter-spacing: 0;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.pu-share:hover { background: var(--pu-soft-2); }

.pu-share svg { flex: 0 0 auto; }

/* D3 — Simulador */
/* Secciones de la ficha como tarjetas elevadas sobre el fondo gris de la
   pagina, que es lo que le da a la referencia su lectura de "pagina disenada":
   ahi cada bloque es un .sec con card + radius + shadow. Antes el simulador
   tenia borde y sin sombra, y equipamiento y FAQ no tenian nada: sobre una
   pagina blanca eran invisibles, tres bloques de texto sueltos. */
.pu-sim,
.pu-equip,
.pu-desc,
.pu-faq {
    max-width: 760px;
    margin: 0 auto 16px;
    padding: 18px;
    background: var(--pu-card);
    border-radius: var(--pu-radius);
    box-shadow: var(--pu-shadow);
}
/* Titulo de seccion con la marca naranja inclinada de la referencia
   (.sec h2::before). La italica no es un capricho: es el registro tipografico
   del sistema, el mismo que usa .pu-model en las tarjetas del listado. */
/* Los títulos de sección son <h2> desde la auditoría del 14-08-2026 (antes eran
   <h3> y la ficha saltaba de h1 a h3). Se listan las dos etiquetas para que el
   bloque siga funcionando si alguna sección todavía emite h3. */
.pu-sim :is(h2, h3),
.pu-equip > :is(h2, h3),
.pu-desc-t,
.pu-faq :is(h2, h3) {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.2px;
    margin: 0 0 12px;
    color: var(--pu-ink);
}
.pu-sim :is(h2, h3)::before,
.pu-equip > :is(h2, h3)::before,
.pu-desc-t::before,
.pu-faq :is(h2, h3)::before {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 12px;
    margin-right: 8px;
    background: var(--pu-orange);
    border-radius: 2px 7px 2px 7px;
    transform: skew(-14deg);
}
.pu-sim-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 700px) { .pu-sim-grid { grid-template-columns: 1.4fr 1fr; } }
.pu-sim-controls label { display: block; font-size: 13px; font-weight: 700; color: var(--pu-ink); margin: 10px 0 4px; }
/* Sliders del simulador. accent-color daba el color correcto pero dejaba el
   control en los 16px de alto nativos, muy por debajo del mínimo táctil: en
   mobile había que acertarle a una línea de 16px para mover el pie o el plazo.
   Se rehace con apariencia propia para poder subir el alto a 44px y el pulgar a
   24px, manteniendo la pista fina para que se vea igual. */
.pu-sim-controls input[type=range] {
    width: 100%;
    height: 44px;
    margin: 0;
    background: transparent;
    /* Naranja, como la referencia (.sim input[type=range] usa accent-color:
       var(--orange)). accent-color queda igual por si algún navegador ignora la
       apariencia propia. */
    accent-color: var(--pu-orange);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
/* El tramo recorrido va en naranja como en la referencia. El porcentaje lo
   escribe el JS del simulador en --pu-sim-fill cada vez que se mueve el
   control: con apariencia propia el navegador ya no pinta solo la parte
   izquierda. */
.pu-sim-controls input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(to right,
        var(--pu-orange) var(--pu-sim-fill, 0%),
        var(--pu-line) var(--pu-sim-fill, 0%));
}
.pu-sim-controls input[type=range]::-moz-range-track {
    height: 6px;
    border-radius: 99px;
    background: linear-gradient(to right,
        var(--pu-orange) var(--pu-sim-fill, 0%),
        var(--pu-line) var(--pu-sim-fill, 0%));
}
.pu-sim-controls input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; height: 24px; margin-top: -9px;
    border: 2px solid var(--pu-card); border-radius: 50%;
    background: var(--pu-orange);
    box-shadow: 0 1px 4px rgba(10,20,50,.3);
}
.pu-sim-controls input[type=range]::-moz-range-thumb {
    width: 24px; height: 24px;
    border: 2px solid var(--pu-card); border-radius: 50%;
    background: var(--pu-orange);
    box-shadow: 0 1px 4px rgba(10,20,50,.3);
}
.pu-sim-detalle { font-size: 13px; color: var(--pu-ink-2); margin-top: 10px; line-height: 1.6; }
.pu-sim-out { background: #f7f9fc; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.pu-sim-out small { font-size: 12px; color: var(--pu-ink-2); font-weight: 600; }
.pu-sim-cuota { font-size: 27px; font-weight: 800; color: var(--pu-green-txt); margin: 2px 0 6px; }
.pu-sim-nota { line-height: 1.5; }

/* D4 — Equipamiento */
.pu-equip-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pu-equip-item { font-size: 13px; font-weight: 600; color: var(--pu-ink); background: #eef1f7; padding: 7px 13px; border-radius: 9px; }
/* Cada grupo (Equipamiento / Seguridad / Accesorios) es una fila colapsable
   CERRADA por defecto, con el mismo lenguaje visual del FAQ: fila completa con
   borde inferior y el "+" naranja a la derecha. Antes el summary era texto azul
   suelto sin ninguna señal de que se podía abrir. */
.pu-equip-full { border-bottom: 1px solid var(--pu-line); }
.pu-equip-full summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px; /* era 32px de alto: bajo el minimo tactil */
    padding: 10px 0;
    list-style: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--pu-ink);
}
.pu-equip-full summary::-webkit-details-marker { display: none; }
.pu-equip-full .pu-equip-cat-n { color: var(--pu-ink-2); font-weight: 600; margin-right: auto; }
/* Decorativo: el estado abierto/cerrado lo comunica el propio <details>. */
.pu-equip-full summary::after { content: "+"; flex: 0 0 auto; font-size: 20px; font-weight: 400; line-height: 1; color: var(--pu-orange); }
.pu-equip-full[open] summary::after { content: "–"; }
.pu-equip-full h4 { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--pu-ink-2); margin: 14px 0 6px; }
.pu-equip-full ul { columns: 2; gap: 24px; margin: 0; padding-left: 18px; }
.pu-equip-full li { font-size: 13px; color: var(--pu-ink-2); line-height: 1.7; }
@media (max-width: 600px) { .pu-equip-full ul { columns: 1; } }

/* "Sobre este auto" — la descripción LARGA, colapsada.

   El texto completo queda en el DOM (alimenta SEO/GEO: buscadores y modelos lo
   leen aunque el <details> esté cerrado), pero al visitante se le muestra
   plegado: abierto empujaba el FAQ miles de px hacia abajo. El summary imita
   el h3 de sección (marca naranja + itálica) con el "+" del lenguaje de los
   acordeones. */
.pu-desc-det summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}
.pu-desc-det summary::-webkit-details-marker { display: none; }
.pu-desc-det summary::after { content: "+"; flex: 0 0 auto; font-size: 20px; font-weight: 400; line-height: 1; color: var(--pu-orange); }
.pu-desc-det[open] summary::after { content: "–"; }
.pu-desc-t { margin: 0; }
.pu-desc-txt { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--pu-ink-2); }
.pu-desc-txt p { margin: 0 0 10px; }
.pu-desc-txt p:last-child { margin-bottom: 0; }
.pu-desc-txt ul, .pu-desc-txt ol { margin: 0 0 10px; padding-left: 18px; }
.pu-desc-txt li { margin-bottom: 4px; }
.pu-desc-txt strong { color: var(--pu-ink); font-weight: 700; }
/* Los subtítulos del texto largo. Las descripciones que vienen del CRM traen
   <h2>/<h3> y sin esto heredaban el tamaño de título del tema (28px dentro de
   una tarjeta de 14px). El h2 es el nombre del auto, que el <h1> de la ficha ya
   dice: se baja a la escala del bloque en vez de repetir un titular. */
.pu-desc-txt h2,
.pu-desc-txt h3,
.pu-desc-txt h4 {
    margin: 16px 0 6px;
    color: var(--pu-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
}
.pu-desc-txt > :first-child { margin-top: 0; }
/* El nombre del auto que abre el texto: un punto más grande que los subtítulos.
   Las descripciones del CRM lo traen como <h2> y la generada como <h3> (bajó de
   nivel en la auditoría del 14-08-2026, para no competir con el <h1>). */
.pu-desc-txt > :is(h2, h3):first-child { font-size: 15px; }

/* Preguntas frecuentes: la sección completa también viene colapsada, con el
   mismo summary que "Sobre este auto". Las respuestas quedan en el DOM aunque
   el acordeón esté cerrado. */
.pu-faq-det summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
}
.pu-faq-det summary::-webkit-details-marker { display: none; }
.pu-faq-det summary::after { content: "+"; flex: 0 0 auto; font-size: 20px; font-weight: 400; line-height: 1; color: var(--pu-orange); }
.pu-faq-det[open] summary::after { content: "–"; }
.pu-faq-det summary :is(h2, h3) { margin: 0; }
.pu-faq-body { margin-top: 4px; }

/* Dos columnas 50/50 en escritorio (pedido del usuario, 14-08-2026).
   Izquierda: simulador, equipamiento y preguntas frecuentes. Derecha: la
   descripción larga. En móvil es una sola columna y la descripción queda al
   final, cerrada.

   El reparto cambió en la auditoría del 14-08-2026 y vale la pena dejar por qué,
   porque las dos versiones anteriores fallaban por lados opuestos:

   - Con el FAQ a lo ancho abajo y la descripción CERRADA, la columna derecha
     medía 80px contra 864 de la izquierda: 704px de página en blanco.
   - Al abrir la descripción se invertía —la derecha pasaba a ~970 y el hueco
     quedaba a la izquierda— porque a la izquierda solo había dos bloques.

   Con el FAQ adentro del reparto las dos columnas quedan parejas (izquierda
   ~864, derecha ~970 con la descripción abierta), y el JS de la ficha abre la
   descripción a partir de este mismo breakpoint. Si se mueve el 1100 de acá hay
   que mover el de ficha-usados.js. */
@media (min-width: 1100px) {
    .pu-secs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 1192px;
        margin: 0 auto;
        align-items: start;
        /* Las medidas NO son arbitrarias: son las de la fila de arriba. La
           galería ocupa 124-705 y la tarjeta del resumen 735-1316, o sea dos
           columnas de 581 separadas por 30 (el gutter de las columnas Bootstrap
           del tema). Con max-width 1192 y sin padding propio, estas dos columnas
           caen exactamente sobre esas: antes iban con padding 16 y gap 16, así
           que los cuadros de abajo quedaban 16px hacia adentro por cada lado y
           el borde derecho de "Sobre este auto" no llegaba al de la franja de
           confianza que tiene encima. */
        gap: 0 30px;
        padding: 0;
    }
    .pu-secs .pu-sim,
    .pu-secs .pu-equip {
        grid-column: 1;
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }

    /* Las preguntas frecuentes vuelven a la fila final de ancho completo
       (pedido del 14-08-2026): son el bloque que se consulta "por si acaso",
       no parte de la lectura principal, y a ancho completo cierran la página
       como una franja en vez de competir con el simulador por la columna. Su
       propio CSS las pone en dos columnas de texto para que las líneas no
       queden de 1.100px. */
    .pu-secs .pu-faq {
        grid-column: 1 / -1;
        margin: 0 0 16px;
        max-width: none;
    }
    /* Sin sticky: acompañando el scroll se sentía "parallax"; la tarjeta se
       queda en su lugar y solo crece al abrirla (pedido del usuario).
       Toma su alto natural —no se estira— porque los bloques de la izquierda
       son tres y pueden ser dos si al auto le falta alguno: forzar el alto acá
       inventaría una fila vacía justo en ese caso. */
    .pu-secs .pu-desc {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 16px;
        max-width: none;
    }
}

/* E3 — 404 de producto no publicado */
.pu-404-producto { max-width: 900px; margin: 40px auto 60px; padding: 0 20px; text-align: center; }
.pu-404-producto h1 { font-size: 26px; font-weight: 800; color: var(--pu-ink); margin-bottom: 8px; }
.pu-404-producto > p { font-size: 14px; color: var(--pu-ink-2); margin-bottom: 18px; }
.pu-404-producto h2 { font-size: 19px; font-weight: 800; color: var(--pu-ink); margin: 36px 0 16px; text-align: left; }
.pu-404-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 520px) { .pu-404-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .pu-404-grid { grid-template-columns: repeat(3, 1fr); } }
.pu-404-producto .pu-empty-reset { display: inline-block; margin-top: 28px; }

/* D1 — CTA sticky mobile */
.pu-sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
    background: #fff; box-shadow: 0 -6px 24px rgba(10,20,50,.14);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 10px;
}
.pu-sticky-cta .p { line-height: 1.1; margin-right: 2px; flex: 1; }
.pu-sticky-cta .p b { font-size: 17px; display: block; color: var(--pu-ink); }
.pu-sticky-cta .p small { font-size: 11px; color: var(--pu-green-txt); font-weight: 700; }
.pu-sticky-cta .pu-btn-detail { flex: 0 0 auto; padding: 12px 22px; }
@media (min-width: 900px) { .pu-sticky-cta { display: none; } }

/* E1 — CTAs de la ficha */
.pu-f-ctas { display: flex; gap: 8px; margin: 14px 0; }
.pu-f-ctas .pu-btn-detail { flex: 1; border: 0; cursor: pointer; font-size: 15px; padding: 14px; }
.pu-f-ctas .pu-btn-wsp { width: 50px; height: 50px; }

/* E1 — Modal de cotización */
.pu-modal-ov {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(10, 16, 40, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
/* La clase por sí sola gana por orden de cascada al `[hidden]` del UA
   stylesheet (misma especificidad, la regla de autor llega después):
   sin esto el modal queda visible por defecto en cada carga de la ficha. */
.pu-modal-ov[hidden] { display: none; }
.pu-modal {
    background: #fff; border-radius: 16px; width: 100%; max-width: 420px;
    padding: 24px 22px; position: relative;
    box-shadow: 0 24px 60px rgba(10, 20, 50, .35);
    max-height: 90vh; overflow-y: auto;
}
/* Botón de cerrar: círculo suave, como la referencia (.close-x de ficha.html:
   30x30, border-radius 50%, fondo #eef1f6, glifo #5a6478, 14px). Antes era una
   "×" de 26px suelta sobre el fondo del modal, sin caja ni área de toque.

   Acá va a 34px en vez de 30: el mínimo táctil recomendado es 44 y 30 quedaba
   corto; 34 con el padding del contenedor llega a un blanco cómodo sin verse
   pesado. */
/* `button.` no es adorno: WoodMart estiliza TODOS los botones del sitio con
   `:is(.btn, .button, button, [type="submit"], [type="button"]) { background:
   var(--btn-bgcolor, #F3F3F3); border-radius: ... }`. `:is()` toma la
   especificidad de su argumento más específico —una clase— así que empata con
   `.pu-modal-x` (0,1,0) y, como base.min.css carga después, ganaba: el cerrar
   salía como un cuadrado gris #F3F3F3. Calificando por etiqueta queda (0,1,1) y
   gana sin !important. Es el mismo motivo por el que el botón Compartir salía en
   mayúsculas. */
button.pu-modal-x,
button.puv2-dialog-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    /* min-height explícito: el tema le pone uno a todos los botones y estiraba
       el círculo a 42px de alto, o sea lo dejaba ovalado. */
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pu-soft);
    color: var(--pu-close-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

button.pu-modal-x:hover,
button.puv2-dialog-close:hover {
    background: var(--pu-soft-2);
    color: var(--pu-ink);
}
.pu-modal h3 { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--pu-ink); }
.pu-modal-sub { font-size: 13px; color: var(--pu-ink-2); margin: 0 0 8px; line-height: 1.5; }
.pu-modal-auto { font-size: 13px; color: var(--pu-ink); background: #f7f9fc; padding: 8px 12px; border-radius: 9px; margin: 0 0 12px; }
.pu-modal label { display: block; font-size: 13px; font-weight: 700; color: var(--pu-ink); margin: 10px 0 0; }
.pu-modal input[type=text], .pu-modal input[type=tel] {
    width: 100%; margin-top: 4px; border: 1.5px solid var(--pu-line); border-radius: 10px;
    padding: 11px 12px; font-size: 14px; outline: none;
}
.pu-modal input:focus { border-color: var(--pu-navy); }
.pu-modal-retoma-t { font-weight: 600 !important; font-size: 13px !important; display: flex !important; align-items: center; gap: 7px; margin-top: 12px !important; }
.pu-modal-error { background: #fdecec; color: #c0392b; font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 9px; margin-top: 10px; }
.pu-modal-enviar { width: 100%; margin-top: 14px; border: 0; cursor: pointer; font-size: 15px; padding: 14px; }
.pu-modal-enviar:disabled { opacity: .6; cursor: wait; }
.pu-modal-wsp { display: block; text-align: center; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--pu-green-txt); text-decoration: none; }
.pu-modal-ok { text-align: center; padding: 18px 4px; }
.pu-modal-ok-ico {
    width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
    background: #e8f8ee; color: var(--pu-green); font-size: 28px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.pu-modal-ok p { font-size: 14px; color: var(--pu-ink-2); line-height: 1.6; }

/* ==========================================================================
   Campañas (pompeyo-usados/campanas.php)

   Una sola hoja de estilos para todas las superficies de campaña: banner sobre
   el listado, franja en la tarjeta y en la ficha, y línea de regalo en el modal.
   Una campaña nueva no necesita CSS nuevo — hereda de acá y, si quiere un color
   propio, se acota con la clase .pu-campana-<id> que ya emite el PHP.
   ========================================================================== */

.pu-campana-wrap { margin-bottom: 14px; }

.pu-campana-banner {
    display: block;
    border-radius: var(--pu-radius);
    overflow: hidden;
    box-shadow: var(--pu-shadow);
}

.pu-campana-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* El banner de campaña va COMPLETO, en todos los tamaños.
 *
 * Hasta el 16-08-2026 en escritorio se recortaba a una franja centrada
 * (`height: clamp(120px, 11vw, 150px)` + `object-fit: cover`) para acercar el
 * primer auto: con banner, buscador, hero y vitrina apilados, la primera
 * tarjeta quedaba a 1.300 px de scroll. El recorte se apoyaba en que "el
 * mensaje vive en la banda central".
 *
 * No se sostiene: la pieza la diseña la agencia con su propia composición
 * —titular, bajada, la marca de agua del cerro— y cortarla arriba y abajo se
 * come parte de eso. Es una decisión de quien hace el arte, no del CSS.
 * Instrucción de Pedro, 16-08-2026: el banner tiene que verse completo.
 *
 * El costo es real y queda dicho: la pieza es 4,3:1, así que en escritorio
 * ocupa ~280 px en vez de 150 y el primer auto baja otros ~130 px. Si eso
 * vuelve a molestar, la salida NO es recortar por CSS sino pedir una versión
 * del arte más apaisada para escritorio. */
.pu-campana-banner img {
    height: auto;
    object-fit: fill;
}

/* La franja hereda el naranja de campaña del sistema. Sobre fondo claro se usa
   --pu-orange (5,27:1 sobre blanco, ya verificado en el bloque de tokens). */
.pu-campana-franja {
    margin: 8px 0 0;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--pu-orange-soft);
    color: var(--pu-orange-txt);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.pu-campana-franja b { font-weight: 800; }

.pu-campana-ficha {
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 14px;
}

.pu-modal-regalo {
    margin: 6px 0 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--pu-orange-soft);
    color: var(--pu-orange-txt);
    font-size: 13px;
    font-weight: 600;
}

/* Slide de campaña en el hero: no trae foto de producto, así que el texto puede
   ocupar todo el ancho en vez de dejar el hueco de la imagen. */
.pu-hero-campana .pu-hero-txt { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .pu-campana-banner { box-shadow: none; }
}

/* ==========================================================================
   Paridad de arranque de página (referencia: pompeyousados.cl)

   En la referencia el contenido arranca pegado al header (~8px). Acá arrancaba
   a 70px, que en móvil se comen media pantalla antes del primer auto.

   Esos 70px NO venían del tema ni de este repo: salen del CSS del Customizer,
   que vive en la base de datos (wp_posts, post_type=custom_css) y por lo tanto
   es invisible para quien lee el código. La regla es:

       .usados-cat-gap-70 .main-page-wrapper { padding-top: 70px !important; }

   y convive con otra, .no-overlap-usados, que pone el header en position
   relative y cancela el padding. O sea: primero se anuló el espacio y después
   se volvió a agregar por otro lado.

   Se sobrescribe desde acá —y no editando el Customizer— para que el valor
   quede versionado y revisable. Lleva !important porque compite contra otro
   !important, y `body` para ganar por especificidad sin depender del orden de
   carga de las hojas. Si algún día ese CSS se muda al repo, esta regla y la
   del Customizer tienen que reconciliarse: ver wordpress/COBERTURA.md.
   ========================================================================== */
body.term-usados .main-page-wrapper {
    padding-top: 10px !important;
}

/* ==========================================================================
   Paridad de lienzo y de letra (auditoría 14-08-2026)

   1. FONDO: la referencia pinta la página en --bg #fafafa y por eso sus
      tarjetas y cards "flotan"; sobre blanco puro las mismas sombras se leen
      planas. Se pinta el body de /usados y de la ficha con el token.

   2. TIPOGRAFÍA: ver el bloque de abajo.
   ========================================================================== */

/* ==========================================================================
   La letra de /usados es la del sitio (revisión 14-08-2026)

   Hasta acá /usados usaba un stack propio: la referencia DECLARA "Proxima Nova"
   pero no la carga (cero @font-face), así que en la práctica renderizaba el
   stack del sistema, y eso era lo que se replicaba. Resultado: tres tipografías
   conviviendo en la misma página —Poppins en el header y el footer, sistema en
   el contenido de usados, Open Sans en el hero— y ninguna era la del sitio.

   Se mide el home de pompeyo.cl: 15 títulos, TODOS en Open Sans, CERO con
   text-transform uppercase y CERO en cursiva. La jerarquía la arma con pesos
   (200 para los display grandes, 800 para los nombres, 400/600 para el cuerpo)
   y sin letter-spacing. Las mayúsculas que se ven ahí están ESCRITAS en el
   contenido, no impuestas por CSS: son decisión editorial y se pueden cambiar
   desde el admin.

   Así que /usados adopta Open Sans, que además ya viene cargada en estas
   páginas (pesos 400/600/700; la 800 la trae el tema a pedido). El header y el
   footer siguen en Poppins porque son compartidos con el resto de pompeyo.cl y
   no son nuestros. Los componentes que se montan en wp_footer (barra sticky,
   modal, bandeja del comparador) van listados aparte porque no viven dentro
   del wrapper.

   Ojo: esto se aparta a propósito de la paridad con la beta. La instrucción
   nueva —traer el estilo del resto del sitio— gana sobre la paridad SOLO en
   tipografía; color, medidas y composición siguen atados a la referencia.
   ========================================================================== */
:root {
    --pu-font: "Open Sans", Arial, Helvetica, sans-serif;
}

body.term-usados,
body.pu-ficha {
    background-color: var(--pu-bg);
}

/* No basta con pintar el body: WoodMart pinta .main-page-wrapper en blanco por
   encima, y en la ficha .product-tabs-wrapper trae su propio gris #f8f8f8. El
   resultado era una franja blanca detrás de la galería y el resumen que cortaba
   contra el gris de las secciones (la lista de confianza quedaba "flotando"
   sobre ese borde). Se transparentan ambos para que el lienzo sea UN solo
   #fafafa de punta a punta, como la referencia. */
body.term-usados .main-page-wrapper,
body.pu-ficha .main-page-wrapper,
/* html+body: el tema lo pinta con "html body .single-product-content
   .product-tabs-wrapper" y hay que ganarle por especificidad, no con
   !important. */
html body.pu-ficha .single-product-content .product-tabs-wrapper {
    background-color: var(--pu-bg);
}

body.term-usados .main-page-wrapper,
body.pu-ficha .main-page-wrapper,
.pu-sticky-cta,
.pu-modal,
.puv2-tray,
.puv2-compare-dialog {
    font-family: var(--pu-font);
}

/* El tema fija Poppins por elemento (títulos, botones, entradas) con reglas
   propias que le ganan a la herencia: acá se los devuelve al stack del
   contenido. */
body.term-usados .main-page-wrapper :is(h1, h2, h3, h4, .wd-entities-title, button, input, select, textarea, a),
body.pu-ficha .main-page-wrapper :is(h1, h2, h3, h4, .wd-entities-title, button, input, select, textarea, a) {
    font-family: inherit;
}

/* ==========================================================================
   Descuadre entre tarjetas vecinas

   El contenido de cada tarjeta mide distinto —una versión larga, specs que
   saltan a dos filas, una sucursal de dos líneas— y como cada bloque fluía
   detrás del anterior, el precio y los botones terminaban a distinta altura en
   cada columna. En la referencia todo queda alineado.

   La tarjeta pasa a ser una columna flex y el bloque de precio se empuja al
   fondo con margin-top:auto. Así el aire sobrante queda ANTES del precio, en
   vez de repartirse, y precio, comparar y "Ver detalle" quedan a la misma
   altura sin importar cuánto texto traiga cada auto.
   ========================================================================== */
.pu-card-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* width + min-width:0 no son decorativos: sin ellos la fila de specs en
       nowrap (más abajo) empuja el ancho de la tarjeta cuando los chips no
       caben, y las tarjetas de una misma fila terminan midiendo 261, 288, 308…
       Como la foto es 4:3, cada ancho distinto da un alto de foto distinto y
       vuelve el descuadre por otro lado. */
    width: 100%;
    min-width: 0;
}

.pu-card-c {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.pu-price-row {
    margin-top: auto;
}

/* La sucursal ya viene con el nombre corto del contrato, pero un nombre nuevo
   y largo no debe volver a descuadrar la fila: se acota a una línea. */
.pu-loc {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pu-loc,
.pu-version {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Las specs envuelven a dos filas cuando no caben, igual que la referencia
   (`.specs{flex-wrap:wrap}` en index.html).
   
   Estuvieron un rato en `nowrap` con scroll horizontal para que la tarjeta no
   creciera, pero eso cortaba el último chip a mitad de palabra ("Benc…") y
   además empujaba el ancho de la tarjeta. Lo que mantiene alineadas las
   tarjetas no es esto, es el bloque de precio anclado al fondo: aunque las
   specs ocupen una fila más, los botones quedan a la misma altura.

   NO se reserva el alto de la segunda fila: la grilla ya iguala las alturas de
   cada fila de tarjetas, así que reservar no alineaba nada y le sumaba ~27px de
   alto a TODAS las tarjetas, incluidas las que no envuelven. Se probó y quedó
   peor (672px contra 639). */
.pu-specs {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    min-width: 0;
}

/* Interlineado de la tarjeta.

   La referencia lo fija en el body (`line-height:1.45`) y el tema acá aplica el
   suyo, más suelto: cada línea salía ~3px más alta y eso, multiplicado por
   marca + versión + specs + sucursal + precio, era buena parte de por qué la
   tarjeta se veía más pesada que la de la referencia. */
.pu-card-box {
    line-height: 1.45;
}

.pu-card-c {
    gap: 7px;
}

/* "Ver detalle" con la medida de la referencia (13.5px, padding 11px). A 15px y
   padding 14 no le alcanzaba el ancho junto a "Comparar" y el texto se partía
   en dos líneas, estirando la fila de acciones a 62px. */
.pu-actions {
    align-items: center;
}

.pu-actions .pu-btn-detail {
    font-size: 14px;
    padding: 11px;
    min-height: 44px;
}

/* "Comparar" en la fila de acciones, con el mismo aspecto que la referencia
   (index.html → .btn-cmp): borde suave, fondo blanco, texto compacto y ancho
   propio, al lado del "Ver detalle" que se estira.

   Antes vivía en una fila aparte (.puv2-utility) junto a "Simular cuota", que le
   costaba ~54px de alto a cada tarjeta. Ya no existe esa fila: comparar entró
   acá y el simulador se dispara desde la línea de cuota. */
.pu-actions .puv2-compare {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--pu-line);
    border-radius: 10px;
    background: var(--pu-card);
    color: var(--pu-ink-2);
    padding: 0 11px;
    min-height: 44px;
    font-size: 12px;
    font-weight: 800;
    /* El tema pone uppercase en TODOS los <button> del sitio; la referencia dice
       "+ Comparar", no "+ COMPARAR". Mismo caso que el botón Compartir. */
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.pu-actions .puv2-compare:hover {
    border-color: var(--pu-navy);
    color: var(--pu-navy);
}

.pu-actions .puv2-compare[aria-pressed="true"] {
    border-color: var(--pu-navy);
    color: var(--pu-navy);
}

/* La línea de cuota es el disparador del simulador: se insinúa con el subrayado
   punteado, sin convertirse en un botón más que compita con "Ver detalle". */
.pu-cuota.puv2-simulate {
    cursor: pointer;
    text-decoration: underline dotted currentColor;
    text-underline-offset: 3px;
}

/* Últimos milímetros del descuadre: "Precio lista" y "Valor cuota" son
   opcionales —hay autos sin rebaja y autos sin cuota calculable— y su ausencia
   dejaba el número grande del precio hasta 26px más abajo que en la tarjeta
   vecina.

   Se reserva la línea que falta. El hueco se agrega ARRIBA del bloque (::before)
   a propósito: como todo el bloque va anclado al fondo, ese espacio lo absorbe
   el aire que ya existía y no aparece un vacío entre el precio y los botones. */
:root {
    /* Alto real de cada línea opcional del bloque de precio, medido en el lab
       (20px de línea + su margen). Si cambia el tipo de letra o el margen de
       .pu-lista-line / .pu-cuota, hay que actualizar esto: es la reserva que
       mantiene los precios alineados entre tarjetas vecinas. */
    --pu-linea-precio-h: 22px;
}

@supports selector(:has(*)) {
    .pu-price-row:not(:has(.pu-cuota))::before,
    .pu-price:not(:has(.pu-lista-line))::before {
        content: "";
        display: block;
        height: var(--pu-linea-precio-h);
    }
}

/* ==========================================================================
   Ancho y alto de la tarjeta, contra la referencia

   Medido a 1280px: en www.pompeyousados.cl la tarjeta mide 313x615 (3 columnas,
   gap 14px). Acá medía 261x647 — más angosta y más alta.

   El ancho se lo comía el sidebar de filtros, que ocupa 25% (col-lg-3): la
   referencia no tiene sidebar, sus filtros viven detrás de un botón. No se
   elimina el sidebar —los filtros se usan— pero se acota a 220px, que es lo que
   necesita, y el resto va a la grilla: la tarjeta pasa a ~305px, casi lo mismo
   que la referencia.

   El alto se baja apretando los espacios propios de la tarjeta a los valores de
   la referencia (padding 13/15/15 en vez de 15/16/16) y la fila de utilidades,
   que la referencia no tiene y por lo tanto es alto que solo pagamos nosotros.
   ========================================================================== */
/* La especificidad no es capricho. El ancho de las dos columnas lo fija
   style.css del tema hijo (líneas 1376-1383) con:

       @media (min-width: 1025px) {
         html body.woocommerce.archive .sidebar-container.col-lg-3 { flex: 0 0 26% }
         html body.woocommerce.archive .shop-content-area.col-lg-9 { flex: 0 0 74% }
       }

   que es (0,4,2) — exactamente la misma especificidad que una versión de esto
   sin `.col-lg-3`, y como style.css carga después, ganaba por orden. Con la
   clase de columna incluida queda (0,5,2) y gana por especificidad, sin
   !important. Mismo breakpoint 1025px para no dejar una franja donde valga una
   regla y no la otra.

   Ojo: ese style.css NO está en wordpress/deploy-manifest.json — es otro lugar
   donde vive estilo de /usados fuera de este repo. Anotado en COBERTURA.md. */
@media (min-width: 1025px) {
    /* Densidad de la referencia (auditoría 14-08-2026): su panel de filtros
       mide 264px SÓLIDOS y sus tarjetas 313px. La columna Bootstrap lleva 15px
       de padding por lado, así que 294 de caja = 264 de panel; y el contenedor
       se ensancha lo justo para que las tres tarjetas salgan de 313 (antes
       279). El min() evita que a viewports medianos quede pegado a los bordes. */
    body.term-usados .main-page-wrapper > .container {
        max-width: min(1354px, calc(100% - 40px));
    }

    html body.term-usados.woocommerce.archive .sidebar-container.col-lg-3 {
        flex: 0 0 294px;
        max-width: 294px;
    }

    html body.term-usados.woocommerce.archive .shop-content-area.col-lg-9 {
        flex: 1 1 0;
        max-width: none;
        width: auto;
        /* `min-width: 0` es el que evita que la fila se parta en dos.
         *
         * Un ítem flex arranca con `min-width: auto`, o sea NO puede encogerse
         * por debajo del ancho mínimo de su contenido. Y la fila del tema es
         * `flex-wrap: wrap`. Medido acá el 16-08-2026: el mínimo de esta columna
         * es 1060px y el espacio disponible al lado del panel de filtros es…
         * 1060px. Exactamente el filo. Cualquier cosa que sume un pixel —un auto
         * más en "Sigue mirando", una barra de scroll, el zoom del navegador al
         * 90%— hace que no quepa, la columna salta a la línea siguiente y queda
         * el panel arriba solo, con un vacío de 440px al lado, y la grilla abajo
         * a todo el ancho. Es el hueco que reportó Pedro.
         *
         * Con `min-width: 0` la columna puede encogerse y la fila nunca se
         * parte: el contenido de adentro se adapta, que es lo que corresponde.
         * No se toca el `flex-wrap` del tema, que es el que apila bien en
         * móvil. */
        min-width: 0;
    }
}

.pu-card-c {
    padding: 13px 15px 15px;
    gap: 6px;
}



/* ==========================================================================
   Comparador: paridad con la vista de la referencia

   En www.pompeyousados.cl el mejor valor de cada fila se resalta en VERDE y cada
   columna cierra con sus dos acciones ("Me quedo con este" naranja + WhatsApp
   con borde). Acá el resaltado era azul y las acciones eran dos botones globales
   al pie del diálogo, que obligaban a hablar de "la primera ficha".
   ========================================================================== */
.puv2-col-cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0 4px;
}

.puv2-col-primary,
.puv2-col-wsp {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.puv2-col-primary {
    background: var(--pu-orange-fill);
    color: var(--pu-card);
}

.puv2-col-primary:hover {
    background: var(--pu-orange-d);
    color: var(--pu-card);
}

.puv2-col-wsp {
    border: 1.5px solid var(--pu-navy);
    color: var(--pu-navy);
}

.puv2-col-wsp:hover {
    background: var(--pu-navy);
    color: var(--pu-card);
}

/* Etiqueta de la celda de acciones: existe para los lectores de pantalla, no
   para verse (la referencia deja esa celda vacía). */
.puv2-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Enlace al simulador desde la línea de cuota (referencia: ficha.html, botón
   "Simula tu cuota ↓" al lado del valor). Va como enlace de texto para no
   competir con "Cotizar ahora", que es el CTA real de la ficha. */
.pu-f-sim-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 8px;
    color: var(--pu-navy);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.pu-f-sim-link svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.pu-f-sim-link:hover {
    color: var(--pu-navy-2);
}

/* "Categoría: Usados" es metadata de WooCommerce que la referencia no muestra:
   en una ficha de auto usado dentro de /usados, decir que la categoría es
   "Usados" no le informa nada a nadie. */
.pu-ficha .product_meta,
.pu-ficha .posted_in {
    display: none;
}

/* El atributo `hidden` tiene que ganar dentro del modal.

   `hidden` equivale a `display:none` solo si nada lo sobrescribe, y acá
   `.pu-modal label { display:block }` lo estaba pisando: el campo "Patente de tu
   auto" se mostraba SIEMPRE, aunque la casilla "Tengo un auto en parte de pago"
   estuviera sin marcar. El visitante veía un campo que no había pedido y el
   modal quedaba más largo de lo necesario.

   Se acota a lo que se oculta por atributo dentro del modal, que además cubre el
   panel de éxito y el de error. */
.pu-modal [hidden],
.pu-modal-ov[hidden] {
    display: none;
}

/* ==========================================================================
   Pestañas de WooCommerce en la ficha de usado

   La referencia no tiene sección de descripción, y acá esa pestaña no aporta:
   en esta unidad el panel entero dice "C3 AIRCROSS $15.580.000" —el título y el
   precio que ya están arriba— y en otras repite todo el equipamiento como texto
   (más de 2.500px), que es justo lo que el bloque de Equipamiento presenta
   ordenado unas líneas más arriba.

   Se oculta la UI de pestañas, no el contenido: sigue en el DOM, así que los
   buscadores lo leen igual. Si algún día las descripciones traen texto propio
   (no autogenerado), esta regla es lo primero que hay que revisar.
   ========================================================================== */
.pu-ficha .woocommerce-tabs {
    display: none;
}

/* Filas de equipamiento del comparador: ✓ verde cuando el auto lo trae, guion
   tenue cuando no. Igual que la referencia, que usa el mismo verde del sistema
   para los ✓ y deja el "—" apenas visible para que la vista se lea de un
   golpe: donde hay verde, hay equipamiento. */
.puv2-si {
    color: var(--pu-green-txt);
    font-weight: 800;
}

.puv2-no {
    color: var(--pu-ink-2);
}

/* ==========================================================================
   Buscador protagonista

   Va debajo del banner de campaña y arriba del hero, a ancho completo. Antes
   vivía dentro de la columna de contenido, a 840px de ancho y a más de 1.000px
   del inicio de la página: los mapas de calor muestran que buscar es lo que más
   usa la gente, así que estaba enterrado justo lo más usado.

   El campo crece a 56px (48 en móvil) y el bloque se apoya sobre tarjeta blanca
   con sombra del sistema, para que se lea como la acción principal de la página
   y no como un widget más de la barra lateral.
   ========================================================================== */
.pu-buscador-destacado {
    margin-bottom: 14px;
}

.pu-buscador-destacado .pompeyo-vehicle-search {
    /* El bloque trae `width: min(100%, 880px)` de su propio CSS, pensado para
       cuando vivía dentro de la columna de contenido. Acá tiene todo el ancho
       del contenedor y lo usa: a 880px centrado quedaba flotando, más angosto
       que el banner y que el hero, que es lo contrario de darle protagonismo. */
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--pu-card);
    border-radius: var(--pu-radius);
    box-shadow: var(--pu-shadow);
    padding: 18px 20px;
}

.pu-buscador-destacado .pompeyo-vehicle-search__input {
    height: 56px;
    font-size: 16px;
}

/* El título del bloque, un punto más grande: es el rótulo de la acción
   principal de la página, no el de un widget lateral. */
.pu-buscador-destacado .pompeyo-vehicle-search__heading h2,
.pu-buscador-destacado .pompeyo-vehicle-search__title {
    font-size: 20px;
}

.pu-buscador-destacado .pompeyo-vehicle-search__form {
    max-width: none;
}

@media (max-width: 767px) {
    .pu-buscador-destacado .pompeyo-vehicle-search {
        padding: 14px;
    }

    .pu-buscador-destacado .pompeyo-vehicle-search__input {
        height: 48px;
        font-size: 16px;   /* 16px o menos hace que iOS haga zoom al enfocar */
    }
}

/* El "volver" de la ficha, apagado en usados (auditoría 14-08-2026).

   El markup real es `<a href="/productos/" class="custom-back-btn"></a>`: un
   enlace VACÍO de 40x24. Sin texto ni aria-label no tiene nombre accesible —un
   lector de pantalla anuncia "enlace" y nada más— y además apunta a /productos/,
   que es el catálogo de NUEVOS: desde la ficha de un usado, "volver" llevaba a
   otra sección del sitio.

   Agrandarlo a 44x44 hubiera arreglado lo táctil y dejado los otros dos
   problemas en pie. Se apaga acá y la navegación hacia atrás queda en las migas,
   que sí dicen "Usados" y sí llevan al listado correcto. Vive en el style.css
   del tema hijo, que no está en este manifiesto de despliegue: cuando ese
   archivo entre al repo, lo correcto es arreglar el enlace en su origen y
   borrar esta regla.
   ========================================================================== */
.pu-ficha .custom-back-btn {
    display: none;
}

/* ==========================================================================
   Área táctil de los filtros del listado (auditoría 14-08-2026)

   El plugin de filtros (WPF) arma cada opción como
   `li > label.wpfLiLabel > span.wpfCheckbox > input + label`. La casilla dibujada
   mide 13x13, pero el blanco real es el label que envuelve toda la fila: 100x33.
   O sea no era tan grave como parecía a primera vista, pero 33 sigue estando
   bajo el mínimo de 44 y son 64 filas en la barra lateral — filtrar desde el
   teléfono pide más puntería de la que debería.

   Se sube el alto de la fila, no el de la casilla: el dibujo del filtro no
   cambia, solo el blanco. Acotado a /usados para no tocar los filtros de otras
   categorías del sitio.
   ========================================================================== */
.term-usados .wpfFilterWrapper label.wpfLiLabel {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* ==========================================================================
   Texto SEO del pie del listado, oculto por ahora (pedido del 13-08).

   Son ~2.000 caracteres de descripción de la categoría que WooCommerce imprime
   después de la paginación. Se oculta la presentación, NO el contenido: sigue en
   el DOM, así que los buscadores lo siguen leyendo. Si algún día se decide
   sacarlo de verdad, hay que quitar la descripción del término en WordPress, no
   ampliar esta regla.
   ========================================================================== */
.term-usados .wd-term-desc {
    display: none;
}

/* ==========================================================================
   El WhatsApp flotante en el listado: sin burbuja, y SIN moverlo de lugar

   El widget (plugin Join.chat) vive fijo abajo a la derecha con dos piezas: el
   botón de 60px y una burbuja de 270px con "¿Necesitas Ayuda o mas información?".
   La burbuja tapa contenido en móvil y la referencia no la tiene: se apaga.
   El BOTÓN se queda: WhatsApp es un canal de leads y sacarlo es decisión
   comercial, no de maquetación.

   Ojo con dos cosas antes de "mejorar" esto:
   - La ficha NO se toca desde acá: ahí el widget entero está oculto a propósito
     (ver ficha-usados-v1.css, `body.pu-ficha .joinchat`) porque tapaba el botón
     "Cotizar"; WhatsApp vive en la barra sticky de la ficha.
   - NO subir el botón con `bottom`: la bandeja del comparador (.puv2-tray) está
     a bottom: 84px justamente para dejar libre el hueco del botón (24 + 60 =
     84). Subirlo lo mete adentro de la bandeja — ya pasó.
   ========================================================================== */
.term-usados .joinchat__tooltip {
    display: none !important;
}