/* ============================================================
   PDP (single-product) — scoped bajo .pk-pdp
   Diseño aprobado pdp_v3 (financiación + specs criollas + pestañas)
   ============================================================ */
.pk-pdp .pk-wrap{max-width:1320px;padding:0 46px}
.pk-pdp .crumb{font-size:13.5px;color:var(--gray);padding:22px 0 6px}
.pk-pdp .crumb a:hover{color:var(--orange)}.pk-pdp .crumb .sep{margin:0 8px;color:#c9c4bf}

/* 🔴 CUÑA 20-ago-2026 · `align-items:stretch` era el culpable del salto que reportó Iara:
   "al desplegar 'hasta 18 cuotas fijas', la foto de la bici se corre para abajo. No quiero que se
   mueva lo de la izquierda. Si interactuás con el menú de la derecha, estás interactuando con el
   menú de la derecha, no pasa nada más que eso."
   Con `stretch` las dos columnas del grid comparten alto: al abrir el panel de cuotas la columna
   derecha crecía y la izquierda —que tenía `flex:1 1 auto`— crecía con ella. Medido en 1440x900:
   la caja de la foto pasaba de 520 px a 923 px de alto. Con `start` cada columna vive su vida.
   🔴 CUÑA 27-sep-2026 (segunda pasada del I4) — 60/40, COMO SPECIALIZED. Con la foto pegada, una
   bici (foto apaisada) todavía dejaba ~400 px de blanco debajo a 1440: la columna de la foto medía
   el 55 % y la bici es más ancha que alta, así que su alto lo manda el ANCHO de la columna. Ahora
   la foto se lleva el 60 % y la compra el 40 %, con un piso de 360 px para la compra: es lo que mide
   esa columna en el celular, donde ya entran sin romperse los talles, las cuotas a la vista y los
   botones. Entre 901 y 1100 px el piso manda y la foto cede. Medido en NOTAS_B.md. */
.pk-pdp .pmain{display:grid;grid-template-columns:minmax(0,3fr) minmax(360px,2fr);gap:58px;padding:14px 0 72px;align-items:start}
/* 🔴 CUÑA 29-ago-2026 — LA FRANJA DEL MEDIO (761-900 px: tablets y ventanas chicas de notebook).
   Ahí la ficha seguía en dos columnas y quedaba muy apretada: la foto de la bici bajaba a ~270 px
   —más chica que las miniaturas de la góndola— justo en la pantalla donde el cliente decide.
   El corte a una sola columna estaba en 760 y sube a 900: la foto ocupa el ancho y la información
   va debajo, que es como se lee mejor en cualquier pantalla angosta.
   (Memoria: "barrer la franja del medio", los anchos que nadie prueba.) */
@media (max-width:900px){
  .pk-pdp .pmain{grid-template-columns:1fr;gap:34px}
}

/* La galería: miniaturas en una COLUMNA a la izquierda (como Specialized y Mercado Libre) para
   que la foto grande y las miniaturas entren juntas en una pantalla de notebook. El alto se ata
   al viewport (`min(...)`) y no a un número fijo: en una pantalla baja se achica sola en vez de
   empujar las miniaturas abajo del pliegue. */
.pk-pdp .gallery{display:grid;grid-template-columns:1fr;align-items:start}
.pk-pdp .gallery.con-thumbs{grid-template-columns:84px minmax(0,1fr);gap:14px}
/* 🔴 CUÑA 3-sep-2026 — LA FOTO OCUPABA EL 40 % DE SU PROPIA CAJA.
   Iara: *"falta de coherencia en el diseño"*. Medido en 4 fichas, a 390 y a 1440:
     bici (foto apaisada 1.67:1) → **40 % en celular, 43 % en compu**
     casco / piñón / calza (1:1)  → 62 % y 77 %
   O sea que en la pantalla donde se decide una compra de millones, más de la mitad del bloque más
   importante era aire — y encima el aire cambiaba de tamaño según la forma de la foto, así que dos
   fichas seguidas no se parecían entre sí. Eso es exactamente la incoherencia.

   La causa eran dos cosas juntas: un ALTO FIJO (340 px en celular, 558 en compu) contra fotos de
   proporción variable, y un `padding` de 34 px que en 350 px de ancho se come 68.
   Ahora el alto lo manda la foto (`height:auto` + un techo por viewport) y el margen interno baja.
   Las fotos de un mismo producto salen de la misma sesión y comparten proporción, así que la caja
   no salta al pasar de foto en foto. */
.pk-pdp .gallery .main{grid-column:-1;grid-row:1;height:auto;min-height:0;border-radius:5px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;position:relative}
.pk-pdp .gallery .main img{width:100%;height:auto;max-height:62vh;object-fit:contain;padding:18px;transition:transform .12s ease-out;will-change:transform}
/* el "Foto en camino" necesita alto propio: sin foto no hay nada que le dé altura a la caja */
.pk-pdp .gallery .main:has(.noimg){min-height:300px}
.pk-pdp .gallery .main .noimg{color:#8a847e;font-size:15px;font-weight:600}

/* Zoom (Iara: "se tiene que poder hacer zoom como Mercado Libre"). En escritorio la lupa sigue al
   mouse sobre la foto; el botón y el clic abren la foto original a pantalla completa, que es la
   única forma honesta de mostrar detalle: agrandar el 'large' de 1024 px solo pixela. */
.pk-pdp .gallery .main.zoomable{cursor:zoom-in}
.pk-pdp .gallery .main.zooming img{transition:none}
.pk-pdp .gallery .zoombtn{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:100px;padding:8px 14px;
  font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:zoom-in;box-shadow:0 2px 10px rgba(0,0,0,.07);opacity:0;transition:opacity .18s}
.pk-pdp .gallery .main:hover .zoombtn,.pk-pdp .gallery .zoombtn:focus-visible{opacity:1}
.pk-pdp .gallery .zoombtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ══ PASAR DE FOTO EN FOTO (3-sep-2026) ═══════════════════════════════════════════════════
   Iara: *"no se puede pasar se foto en foto"*. Las flechas y el contador van SOBRE la foto grande,
   que es donde está mirando la persona, y no abajo con las miniaturas.
   En táctil se ven siempre: en un celular no hay hover, así que un control que aparece al pasar el
   mouse no existe. En compu aparecen al acercarse a la foto, para no ensuciar la imagen.
   44x44 px es el mínimo que se toca con el pulgar sin errarle. */
.pk-pdp .gallery .g-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;padding:0 0 3px;color:var(--ink);
  background:rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:opacity .14s ease,background .14s ease}
.pk-pdp .gallery .g-prev{left:8px}
.pk-pdp .gallery .g-next{right:8px}
.pk-pdp .gallery .g-nav:hover{background:#fff}
.pk-pdp .gallery .g-nav:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* el contador: abajo a la IZQUIERDA, porque abajo a la derecha ya vive el botón "Ampliar" */
.pk-pdp .gallery .g-cuenta{position:absolute;left:12px;bottom:12px;z-index:3;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  background:rgba(255,255,255,.9);border-radius:999px;padding:4px 10px;
  font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .pk-pdp .gallery .g-nav{opacity:0}
  .pk-pdp .gallery .main:hover .g-nav,.pk-pdp .gallery .g-nav:focus-visible{opacity:1}
}
/* 🔴 CUÑA 27-sep-2026 (I3) — LA FLECHA ES SU FRANJA ENTERA Y NUNCA AMPLÍA. Iara: *"cuando querés
   cambiar de foto con la flecha se te hace el zoom y es re incómodo cambiar de imagen"*. Además de
   apagar la lupa encima de la flecha (main.js), el blanco que se toca crece: el círculo sigue
   midiendo 44 px, pero el botón atrapa la franja lateral entera de la foto (un `::before` alto que
   la caja recorta). Errarle por unos píxeles al círculo cambia de foto igual, en vez de ampliar.
   "Ampliar" queda por encima de la franja y el contador deja pasar el toque.
   `touch-action:manipulation`: en el iPhone, dos toques seguidos en la flecha no amplían la página. */
.pk-pdp .gallery .g-nav{touch-action:manipulation}
.pk-pdp .gallery .g-nav::before{content:"";position:absolute;top:-2000px;bottom:-2000px;left:-12px;right:-12px}
.pk-pdp .gallery .zoombtn{z-index:4}
.pk-pdp .gallery .g-cuenta{pointer-events:none}
/* 🔴 CUÑA 7-sep-2026 — EL MISMO GESTO QUE LAS MOSTRABA LAS APAGABA. Acá había una regla que
   escondía `.g-nav` y `.g-cuenta` con `.zooming` ("mientras la lupa acerca, las flechas
   estorban"). Pero main.js pone `.zooming` en el mouseenter — el MISMO hover con el que la media
   query de arriba las revela — así que en compu las flechas y el contador no aparecían nunca:
   medido en la Rockhopper (6 fotos) a 1440, opacity 0 con el mouse encima. La lupa y las flechas
   conviven sobre la foto acercada, como en Mercado Libre; si algún día estorban de verdad, lo que
   hay que tocar es CUÁNDO se pone `.zooming` (main.js), no volver a apagarlas acá. */

/* 🔴 CUÑA 3-sep-2026, segunda vuelta. Al dejar que el alto de la foto lo mande la foto, la columna
   de miniaturas quedó MÁS ALTA que la foto: medido en la Rockhopper a 1440, la foto 332 px y las
   miniaturas 560 — sobresalían 228 px por debajo, con la fila de la galería estirada al alto de la
   columna. Un arreglo que produce el mismo defecto que venía a arreglar.
   La columna se saca del cálculo del alto (`position:absolute`) y scrollea adentro de la foto: así
   la fila mide lo que mide la foto, la columna nunca sobresale, y se sigue viendo sin scrollear la
   página, que es lo que pidió Iara el 20-ago. */
.pk-pdp .gallery.con-thumbs{position:relative}
/* 🔴 CUÑA 27-sep-2026 (I4) — LA FOTO ACOMPAÑA. Iara: *"queda muy vacío abajo de la foto de la
   bicicleta, queda todo en blanco y no me gusta que quede toda la información volcada sobre el lado
   derecho (…) o sino la foto de la bici acompaña mientras scrolleás hacia abajo"*. Medido en la
   Rockhopper Comp: la columna de la foto llegaba a mostrar 722 px de blanco a 1440×900 (la pantalla
   útil entera) y 622 px a 1280×800, mientras la columna de compra seguía. La vara (27-sep, con
   Playwright): Canyon deja pegada la columna de la imagen; Trek y Specialized pegan la de compra; los
   tres mandan lo largo a todo el ancho cuando termina la compra (acá, `.pk-secs`).
   El `top` es el alto REAL del encabezado (148 a 178 px según el ancho; lo pone main.js en
   --pk-hdr-alto) más un respiro. Solo en compu: el celular ya tiene su foto pegada (más abajo).
   `sticky` también es posicionado, así que la columna de miniaturas (absolute) sigue anclada acá.
   Candado: qa_ficha_forma.cjs (la foto se ve mientras se ve la compra). */
@media (min-width:901px) and (min-height:560px){
  .pk-pdp .gallery,.pk-pdp .gallery.con-thumbs{position:sticky;top:calc(var(--pk-hdr-alto,178px) + 16px)}
}
.pk-pdp .thumbs{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:10px;margin:0;
  position:absolute;left:0;top:0;bottom:0;width:84px;overflow-y:auto;scrollbar-width:thin}
/* 20-ago-2026, Iara: "Las miniaturas de abajo tienen fondo blanco/gris y queda muy extraño."
   Era `background:var(--ph)` (#EFEEEC): la miniatura pintaba un rectángulo gris detrás de una
   foto de fondo blanco, así que cada miniatura se veía como una foto pegada sobre otra cosa. */
.pk-pdp .thumbs .t{height:78px;flex:0 0 auto;border-radius:4px;overflow:hidden;background:#fff;border:2px solid var(--line);cursor:pointer;padding:0}
.pk-pdp .thumbs .t.on{border-color:var(--orange)}
.pk-pdp .thumbs .t img{width:100%;height:100%;object-fit:contain;padding:8px}
/* 🔴 CUÑA 27-sep-2026 (segunda pasada del I4) — EN COMPU, LAS MINIATURAS VAN EN UNA FILA DEBAJO DE
   LA FOTO, como specialized.com. Con la columna de 84 px a la izquierda, la bici (apaisada) perdía
   98 px de ancho y por eso de alto, y la columna, recortada al alto de la foto desde el 3-sep,
   mostraba 3,5 de las 5 miniaturas de la Rockhopper (la quinta, con scroll adentro). Con la fila
   abajo la foto usa todo el ancho de su columna y la fila llena parte del blanco que quedaba debajo
   de la foto pegada. La regla de Iara del 20-ago sigue: la fila entera se ve SIN SCROLLEAR a 1440×900
   y a 1280×800 (si hay más fotos de las que entran, la fila se corre de costado, no baja un renglón).
   Candado: qa_ficha_forma.cjs. En el celular las miniaturas siguen escondidas (se desliza). */
@media (min-width:901px){
  .pk-pdp .gallery.con-thumbs{grid-template-columns:minmax(0,1fr);gap:12px}
  .pk-pdp .gallery.con-thumbs .main{grid-column:1;grid-row:1}
  .pk-pdp .gallery.con-thumbs .thumbs{position:static;grid-column:1;grid-row:2;flex-direction:row;width:auto;
    overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
  .pk-pdp .gallery.con-thumbs .thumbs .t{width:78px}
  .pk-pdp .gallery.con-thumbs .thumbs > :first-child{margin-left:auto}
  .pk-pdp .gallery.con-thumbs .thumbs > :last-child{margin-right:auto}
  /* y la foto deja lugar para la fila: medido, la Tarmac SL8 (foto más alta que la Rockhopper)
     terminaba la fila en 817 px de una pantalla de 800. El techo sale del encabezado real
     (--pk-hdr-alto) + ~200 px (miga, fila de miniaturas y aire). Solo con miniaturas: la foto única
     sigue con su 62vh. */
  .pk-pdp .gallery.con-thumbs .main img{max-height:min(62vh, calc(100vh - var(--pk-hdr-alto,178px) - 200px))}
/* 9-oct: la foto 16:9 hizo la galería ~45 px más alta y en una notebook de 720 px de alto (escritorio de 1280×720) su borde de abajo
   pisaba 46 % del botón de Probotito (fijo, abajo a la izquierda; qa_flotantes lo cuenta por rectángulo). Los botones no se mueven: en
   pantallas bajas las miniaturas son más chatas y el hueco más chico, y la galería termina arriba del botón. */
@media (min-width:901px) and (max-height:760px){
  .pk-pdp .gallery.con-thumbs{gap:8px}
  .pk-pdp .gallery.con-thumbs .thumbs .t{height:58px}
}
}
/* 🔴 CUÑA 27-sep-2026 (N19, lo que vio J) — EL MARCO NO SE ESTIRA AL PASAR DE FOTO. La placa
   nutricional es alta (Pre Work: la tabla entera) y el marco medía lo que medía la foto que estaba a
   la vista: en el celular pasaba de 350 a 457 px al llegar a la placa, y como la galería está pegada,
   de golpe tapaba más pantalla. Ahora el marco toma la proporción de la PRIMERA foto (la del producto:
   la placa va siempre al final, pk_info_nutricional_galeria) y cada foto entra adentro entera, sin
   estirarlo. En compu, además, la fila de miniaturas no se mueve al cambiar de foto. Los techos de
   alto son los mismos de antes (62vh, el de la fila de miniaturas y 58vh en el celular). La clase la
   pone single-product.php solo si conoce las medidas de la foto; si no, queda como antes. */
/* `grid-column:-2 / -1` = la última columna EXPLÍCITA. El `-1` de la regla base manda la foto a una
   columna implícita que mide lo que mide su contenido: con la foto adentro del flujo andaba de
   casualidad; con la foto absoluta, esa columna medía 0 y el marco desaparecía (medido: 0 px en la
   Recovery, que tiene una sola foto). */
.pk-pdp .gallery .main.pk-marco{grid-column:-2 / -1;justify-self:center;width:100%;aspect-ratio:var(--pk-foto-ar);max-height:62vh}
.pk-pdp .gallery .main.pk-marco img{position:absolute;inset:0;width:100%;height:100%;max-height:none;padding:10px}
/* el relleno baja (18 → 10 px, y 10 → 5 en el celular) porque ahora el marco YA tiene la proporción de
   la foto: con el relleno de antes la bici salía un 4 % más chica (Rockhopper en el celular, marco de
   206 → 197 px). Así la foto mide lo mismo que antes y el marco queda quieto. */
@media (min-width:901px){
  .pk-pdp .gallery.con-thumbs .main.pk-marco{max-height:min(62vh, calc(100vh - var(--pk-hdr-alto,178px) - 200px))}
}
@media (max-width:760px){
  .pk-pdp .gallery .main.pk-marco{max-height:58vh}
  .pk-pdp .gallery .main.pk-marco img{padding:5px}
}

.pk-pdp .pinfo{padding-top:4px}
.pk-pdp .pinfo h1{font-size:40px;font-weight:800;letter-spacing:-.028em;line-height:1.05;margin:0 0 8px}
.pk-pdp .rate{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--gray);margin-bottom:22px}
.pk-pdp .star1{color:var(--ink);font-size:15px}
.pk-pdp .rnum{font-weight:700;color:var(--ink)}
.pk-pdp .plead{font-size:15.5px;line-height:1.55;color:#3a3a3a;margin:0 0 24px;max-width:94%}

.pk-pdp .price-wrap{margin:4px 0 18px}   /* 27-sep (noche, R2 · 🟠 5): 22 → 18, ver .cta-stack */
.pk-pdp .price-line{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.pk-pdp .price{font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pk-pdp .ctag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#2f7d4f;background:#eef6f0;border:1px solid #d7e9dd;border-radius:3px;padding:3px 8px}
/* 27-sep-2026 (limpieza pedida por G): acá vivía el CSS del viejo desplegable de cuotas ("Hasta 18
   cuotas fijas ▾", .finbtn/.finpanel/.fintabs/.fptable/.today-si). Las cuotas ahora van a la vista
   (pk_cuotas_ficha_html(), inc/pk-cuotas-ficha.php, estilos .pk-cf en style.css). Queda .finnote:
   la nota chica gris que usan las secciones de abajo y la tabla nutricional. */
.pk-pdp .finnote{font-size:12.5px;color:var(--gray);line-height:1.5;margin-top:13px}
.pk-pdp .finnote b{color:var(--ink);font-weight:700}

.pk-pdp .stock{display:inline-block;margin-top:10px;font-size:13.5px;color:var(--gray);font-weight:600}
.pk-pdp .stock .pt{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3a9d5d;margin-right:7px;vertical-align:middle}
.pk-pdp .stock.urgent{color:#c8371b;font-weight:800;background:#fdeee9;border:1px solid #f6cabb;border-radius:5px;padding:7px 12px;margin-top:12px}
.pk-pdp .stock.urgent .pt{background:#e0451f}
.pk-pdp .stock72{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-top:12px}
.pk-pdp .pk-estado-alto{display:flex;gap:12px;align-items:flex-start;border:1px solid;padding:13px 15px}   /* la copia invisible: las medidas de .stock72 (9-oct) */
.pk-pdp .stock72 .ic72,.pk-pdp .pk-estado-alto .ic72{width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pk-pdp .stock72 .ic72 svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.7}
.pk-pdp .stock72 .t72 b,.pk-pdp .pk-estado-alto .t72 b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pk-pdp .stock72 .t72 b .h{color:var(--orange)}
.pk-pdp .stock72 .t72 p,.pk-pdp .pk-estado-alto .t72 p{font-size:12.5px;color:var(--gray);line-height:1.48;margin-top:3px}
/* sin stock y sin dato B2B positivo: producto visible pero SIN promesa de plazo */
.pk-pdp .stock-consultar{background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin-top:12px}
.pk-pdp .stock-consultar b,.pk-pdp .pk-alto-txt b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pk-pdp .stock-consultar p,.pk-pdp .pk-alto-txt p{font-size:12.5px;color:var(--gray);line-height:1.48;margin-top:3px}
/* 5-oct-2026 (ojo humano, 🟡 7): "Escribinos" es el WhatsApp (en la compu no había nada que tocar ahí) */
.pk-pdp .stock-consultar .pk-wa-escribinos{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* cartel de envío gratis — solo bicis (decisión Rami 30-jul-2026) */
.pk-pdp .freeship-pdp{display:flex;gap:11px;align-items:center;background:#fdeee9;border:1px solid #f6cabb;border-radius:9px;padding:11px 14px;margin-top:12px}
.pk-pdp .freeship-pdp svg{width:22px;height:22px;stroke:var(--orange);fill:none;stroke-width:1.7;flex:0 0 auto}
.pk-pdp .freeship-pdp span{font-size:12.5px;color:var(--gray);line-height:1.4}
.pk-pdp .freeship-pdp a{color:var(--orange-txt);font-weight:700;text-decoration:underline;white-space:nowrap;margin-left:4px}
.pk-pdp .freeship-pdp span b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px}
/* 27-sep-2026 (noche, R2 · 🟠 5): el cartel pasa a UN renglón ("Envío gratis a todo el país · Cuánto
   tarda"). Junto con las cuotas abajo del botón, en una bici "Agregar al carrito" entra en la primera
   pantalla de 1440×900 (candado: qa_ficha_forma.cjs, "compra a la vista"). */
.pk-pdp .freeship-pdp{padding-top:8px;padding-bottom:8px}
.pk-pdp .freeship-pdp span b{display:inline;margin:0 2px 0 0}

/* ── EL ENVÍO CON EL CÓDIGO POSTAL (29-sep-2026 · pk_envio_ficha_html, inc/pk-envios.php) ─────────
   Es el mismo renglón de .freeship-pdp, ahora en todos los productos que se compran: cerrado dice
   "Envío gratis a todo el país · Cuándo te llega" (bici) o "Envío · Calculalo con tu código postal";
   es un <details> (anda sin JavaScript) que se abre en el lugar con el campo. La respuesta reemplaza
   el renglón y deja los tiempos abajo. Valores del sistema: --ink, --gray, --line, --orange(-txt),
   radio 4px del campo, .pk-btn-dark para el botón. */
.pk-pdp .pk-envcp{align-items:flex-start}
.pk-pdp .pk-envcp > svg{margin-top:1px}
.pk-pdp .pk-envcp-c{flex:1 1 auto;min-width:0}
.pk-pdp .pk-envcp summary{list-style:none;cursor:pointer;font-size:12.5px;line-height:1.4;color:var(--gray)}
.pk-pdp .pk-envcp summary::-webkit-details-marker{display:none}
.pk-pdp .freeship-pdp .pk-envcp-tit{display:inline;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:0 6px 0 0}
.pk-pdp .freeship-pdp .pk-envcp-abrir{font-size:12.5px;color:var(--orange-txt);font-weight:700;text-decoration:underline;white-space:nowrap}
.pk-pdp .pk-envcp-form{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.pk-pdp .pk-envcp-campo{flex:1 1 auto;min-width:0;display:block}
.pk-pdp .freeship-pdp .pk-envcp-campo span{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.pk-pdp .pk-envcp-campo input{width:100%;height:44px;padding:0 12px;box-sizing:border-box;border:1.5px solid var(--line);border-radius:4px;
  font-size:16px;font-family:inherit;color:var(--ink);background:#fff}
.pk-pdp .pk-envcp-campo input:focus{outline:none;border-color:var(--orange)}
.pk-pdp .pk-envcp-ok{height:44px;padding:0 18px;font-size:14.5px;flex:0 0 auto;background:#fff}
.pk-pdp .pk-envcp-res{margin-top:3px}
.pk-pdp .freeship-pdp .pk-envcp-d{display:block;font-size:12.5px;color:var(--gray);line-height:1.45}
.pk-pdp .freeship-pdp a.pk-envcp-wa{display:inline-block;margin:4px 0 0}

.pk-pdp .opt{margin-bottom:20px}
.pk-pdp .opt .lab{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
/* 27-sep-2026 (G2, N5/N6): `> span` y no `span`. La guía de talles es un <dialog> que se dibuja
   ADENTRO de `.lab` ("Talle [Guía de talles]"), y este gris le pintaba TODOS sus spans: el talle que
   la guía te recomienda salía gris sobre negro (3,5:1) y los talles que tenemos, igual de grises que
   los que no. El único destino de esta regla es el nombre del color elegido, hijo directo de `.lab`. */
.pk-pdp .opt .lab > span{color:var(--gray);font-weight:600;text-transform:none;letter-spacing:0;margin-left:6px}
/* selector de COLOR (productos que se venden por color) — mismo lenguaje que los talles,
   pero con el nombre escrito: los códigos de color de Specialized no se traducen (no inventamos). */
.pk-pdp .colors{display:flex;gap:9px;flex-wrap:wrap}
.pk-pdp .colors b,.pk-pdp .colors a.cl{height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;text-decoration:none;color:var(--ink)}
.pk-pdp .colors b.on{border-color:var(--ink);background:var(--ink);color:#fff}
.pk-pdp .colors a.cl:hover{border-color:var(--ink)}
/* 🔴 26-ago-2026 · mismo defecto que en los talles: #c2bcb6 sobre #f6f4f2 da 1,71:1 de
   contraste (el mínimo legible es 4,5). Los colores agotados de la Rockhopper — "Pistacho" y
   "Nebulosa" — no se podían leer: en vez de decir "este color no está", parecían un error de
   la página. #6e6e6e da 4,65:1 y sigue leyéndose como secundario. */
/* 1-sep: el COLOR sin stock va gris igual que el talle. Si en la misma ficha uno va gris y el otro
   tachado, la ficha habla con dos idiomas para decir lo mismo. */
.pk-pdp .colors a.cl.off{color:#6e6e6e;background:#f4f2f0;border-color:#e7e3df}
/* combinación sin talle cargado: no ofrecemos un botón que WooCommerce va a rechazar */

/* ══════════════════════════════════════════════════════════════════════════════════════
   🔴 2-sep-2026 · EL COLOR SE ELIGE VIENDO, NO LEYENDO.
   Iara: *"que los colores de las bicis se puedan elegir visualmente, no leyendo el color
   porque queda horrible"*. Medido antes: 43 de 43 opciones en 12 fichas eran texto.
   El comentario de arriba decía "con el nombre escrito: los códigos de color de Specialized
   no se traducen (no inventamos)" — y eso sigue siendo cierto: NO se traduce el nombre del
   colorway. Lo que cambia es que además se DIBUJA, y el nombre no se pierde (va en `title`
   y en `aria-label`, y el elegido se sigue escribiendo arriba en `.lab span`).
   Respaldo (Baymard, vía la notebook `ux-conversion-web`, 2-sep): el desplegable esconde las
   opciones y obliga a interactuar para ver cuáles hay; elegir viendo es la práctica recomendada.
   ══════════════════════════════════════════════════════════════════════════════════════ */
/* 🔴 3-sep-2026 · CÍRCULOS, como en la grilla. Acá eran cuadrados, y el comentario de agosto lo
   justificaba así: *"la bolita de color y la miniatura son cuadradas y del mismo tamaño: si una
   fuera redonda y la otra cuadrada, la ficha hablaría con dos idiomas"*. Ese motivo desapareció
   el día que se prohibió la miniatura. Lo que quedaba era una ficha con cuadrados y una grilla con
   círculos: dos idiomas igual, y del lado equivocado. Iara pidió *"el círculo"*, en las dos. */
.pk-pdp .colors .sw{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
/* 🔴 3-sep-2026: se fue `.sw-foto` (la miniatura del producto adentro de la bolita), que Iara
   prohibió. Queda `.sw-especial`, que es la bolita de los colorways que no son un color plano
   (transparente, arcoíris, camuflado): sigue siendo un CÍRCULO pintado, no una foto. */
.pk-pdp .colors b.sw-color,.pk-pdp .colors a.sw-color,
.pk-pdp .colors b.sw-especial,.pk-pdp .colors a.sw-especial,
.pk-pdp .colors b.sw-medido,.pk-pdp .colors a.sw-medido{width:46px;height:46px;padding:3px;border-radius:50%}
/* el borde interior blanco despega el swatch del borde del control: sin esto un color oscuro se
   funde con el marco del elegido y no se ve cuál está seleccionado */
.pk-pdp .colors .sw-color .sw,.pk-pdp .colors .sw-especial .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.pk-pdp .colors b.sw-color.on,.pk-pdp .colors b.sw-especial.on,.pk-pdp .colors b.sw-medido.on{background:#fff;border-color:var(--ink);border-width:2.5px;padding:2.5px}
.pk-pdp .colors a.sw-color:hover,.pk-pdp .colors a.sw-especial:hover,.pk-pdp .colors a.sw-medido:hover{border-color:var(--ink)}
/* sin stock: el swatch se apaga pero SIGUE VISIBLE. Se tacha, no se esconde — es la misma regla
   que ya rige los talles ("tachar y no esconder"), y por el mismo motivo: esconder una opción hace
   que la persona no sepa que existe y la busque en otro lado. */
/* 🔴 29-sep-2026 (Iara: "aparece raro en gris algunas cosas"): con opacity .42 sobre el aro beige, la Tarmac SL7
   Sport NEGRA sin stock se veía como una bolita GRIS, o sea otro color. Es el R8 al revés ("que el color que aparece
   chiquitito sea literalmente el código de color"). El color va entero; lo que dice "no hay" es la raya y el aro.
   Candado: qa_tanda_29sep.cjs (la bolita sin stock pinta su color real). */
.pk-pdp .colors a.sw-color.off .sw,.pk-pdp .colors a.sw-especial.off .sw,.pk-pdp .colors a.sw-medido.off .sw{opacity:1}
.pk-pdp .colors a.sw-color.off,.pk-pdp .colors a.sw-especial.off{position:relative;background:#f4f2f0;border-color:#e7e3df}
.pk-pdp .colors a.sw-color.off::after,.pk-pdp .colors a.sw-especial.off::after{content:"";position:absolute;
  left:5px;right:5px;top:50%;height:2px;background:var(--gray);outline:1px solid #fff;transform:rotate(-45deg)}
/* una sola opción: es información, no un control. Sin hover ni cursor de link — un control que no
   hace nada es el rechazo R1 de Iara ("un botón que no hace nada"). */
.pk-pdp .colors.una-sola b{cursor:default}
/* el elegido SIN STOCK: se apaga un poco pero NO se tacha — tacharlo lo haría parecer no
   seleccionable, y es justamente el que está seleccionado. El aviso que se lee está arriba. */
.pk-pdp .colors b.agotado .sw{opacity:1}   /* 29-sep: el color real también en el elegido sin stock */
.pk-pdp .lab .agotado-txt{font-style:normal;font-weight:700;color:#6e6e6e}
.pk-pdp .opt-falta{background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:13px 15px}
.pk-pdp .opt-falta b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pk-pdp .opt-falta p{font-size:12.5px;color:var(--gray);line-height:1.48;margin-top:3px}

.pk-pdp .sizes{display:flex;gap:9px;flex-wrap:wrap}
.pk-pdp .sizes b{min-width:52px;height:46px;padding:0 8px;border:1.5px solid var(--line);border-radius:3px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;cursor:pointer}
.pk-pdp .sizes b.on{border-color:var(--ink);background:var(--ink);color:#fff}
.pk-pdp .sizes b.off{color:#6e6e6e;background:#f4f2f0;border-color:#e7e3df}
.pk-pdp .sizes b:not(.on):not(.off):hover{border-color:var(--ink)}
.pk-pdp .swatches{display:flex;gap:10px}
.pk-pdp .swatches i{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer}
.pk-pdp .swatches i.on{box-shadow:0 0 0 2px var(--orange)}

/* 27-sep-2026 (noche, R2 · 🟠 5): 30 → 22 px arriba del botón (y 22 → 18 abajo del precio). Con las
   cuotas enteras debajo del botón, ese aire era lo que dejaba "Agregar al carrito" de una bici justo en
   el borde de la primera pantalla de 1440×900. */
.pk-pdp .cta-stack{display:flex;flex-direction:column;gap:11px;margin:22px 0 0}
.pk-pdp .ctaw{width:100%}
.pk-pdp .wa-link{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--gray);margin:10px 0 0}
.pk-pdp .wa-link svg{width:18px;height:18px;color:#25D366}

.pk-pdp .trust{display:flex;align-items:flex-start;gap:30px;border-top:1px solid var(--line);margin-top:34px;padding-top:22px;flex-wrap:wrap}
.pk-pdp .trust .m{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:180px}
.pk-pdp .trust .m svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.6;flex:0 0 auto;margin-top:1px}
.pk-pdp .trust .m span{font-size:12.5px;color:var(--gray);line-height:1.35}
.pk-pdp .trust .m span b{display:block;font-size:13.5px;color:var(--ink);font-weight:700;margin-bottom:2px}

.pk-pdp .helpers{display:flex;align-items:center;gap:26px;margin-top:22px;flex-wrap:wrap}
.pk-pdp .lnk{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer}
.pk-pdp .lnk svg{width:19px;height:19px;stroke:var(--orange);fill:none;stroke-width:1.8;flex:0 0 auto}
.pk-pdp .lnk .go{color:var(--orange);font-weight:800}

/* ══ LO LARGO, A TODO EL ANCHO (27-sep-2026 · N1 + I4) ═══════════════════════════════════════
   Eran pestañas y, adentro de "Especificaciones", un desplegable por grupo: 7 en una bici, 4 o 5
   en un jersey o unas DMT, con grupos de un solo dato. Iara: *"quiero que sea un solo menú
   desplegable, no tantos"* (y el 2-sep: *"las especificaciones van en un desplegable"*).
   Ahora son secciones a todo el ancho, una debajo de la otra, como la ficha de Specialized:
   Especificaciones es UN `<details>` con los grupos como subtítulos (el nombre a la izquierda, los
   datos a la derecha, en compu); Descripción y Geometría, uno cada una; las reseñas, a la vista.
   La flecha la dibujamos nosotros para que gire: el triángulo del sistema no se anima y en cada
   navegador es distinto. Va a la derecha, que es donde la busca el pulgar. */
.pk-pdp .pk-secs{border-top:1px solid var(--line)}
.pk-pdp .pk-sec{border-bottom:1px solid var(--line)}
.pk-pdp .pk-sec-t{display:flex;align-items:center;gap:12px;margin:0;padding:26px 0;
  font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.pk-pdp details.pk-sec > summary{cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.pk-pdp details.pk-sec > summary::-webkit-details-marker{display:none}
.pk-pdp details.pk-sec > summary::after{content:"";width:10px;height:10px;flex:0 0 auto;margin-left:auto;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg);margin-top:-5px;transition:transform .18s ease;opacity:.6}
.pk-pdp details.pk-sec[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.pk-pdp details.pk-sec > summary:hover::after{opacity:1}
/* el foco tiene que verse: al summary se llega con el teclado */
.pk-pdp details.pk-sec > summary:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.pk-pdp .pk-sec-body{padding:0 0 48px}
.pk-pdp .pk-sec-nota{margin-top:24px}
.pk-pdp .pk-sec-nota a{color:var(--orange-txt);text-decoration:underline}
.pk-pdp .pk-desc{max-width:820px;font-size:16px;line-height:1.65;color:#3A3A3A}
.pk-pdp .pk-nutri{max-width:640px;margin-bottom:8px}
.pk-pdp .pk-nutri-porcion{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 6px}
.pk-pdp .pk-nutri .finnote{margin-top:10px}
.pk-pdp .geo-scroll{overflow-x:auto}
@media (max-width:760px){
  .pk-pdp .pk-sec-t{font-size:20px;padding:22px 0}
  .pk-pdp .pk-sec-body{padding-bottom:34px}
}

/* los grupos de la ficha técnica: subtítulos, ya no desplegables */
.pk-pdp .sgroup{display:grid;grid-template-columns:230px 1fr;gap:44px;padding:34px 0;border-top:1px solid var(--line)}
.pk-pdp .sgroup:first-child{border-top:none;padding-top:4px}
.pk-pdp .gname{font-size:21px;font-weight:800;letter-spacing:-.015em}
.pk-pdp h3.gname{margin:0;line-height:1.25}
/* cuántos datos trae la ficha: va en el título del desplegable */
.pk-pdp .gcount{font-size:12.5px;font-weight:700;color:var(--gray);background:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:1px 8px;letter-spacing:0}
/* 🔴 CUÑA 29-ago-2026 — LA FICHA EN DOS COLUMNAS. Era una sola columna angosta: en 1440 px la
   mitad derecha de la pantalla quedaba vacía debajo del título "Especificaciones" (hueco de ~600 px
   de ancho por 500 de alto). Iara rechaza el espacio muerto y encima obligaba a scrollear el doble
   en las bicis con ficha larga. Con `auto-fill` sirve igual a la ficha de 5 renglones que a la de 40. */
.pk-pdp .gitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px 40px}
.pk-pdp .gi .gl{font-size:15px;font-weight:800;margin-bottom:5px;letter-spacing:-.005em}
.pk-pdp .gi .gv{font-size:15px;color:var(--gray);line-height:1.5}
.pk-pdp .compare-btn{margin-top:40px;gap:10px;display:inline-flex}
.pk-pdp .compare-btn svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.8}

.pk-pdp .descblocks{max-width:880px;columns:2;column-gap:54px}
.pk-pdp .descblocks .db{margin-bottom:24px;break-inside:avoid}
.pk-pdp .descblocks h4{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.005em;margin-bottom:6px;display:flex;align-items:center;gap:11px}
.pk-pdp .descblocks h4::before{content:"";width:16px;height:2px;background:var(--orange);flex:0 0 auto}
.pk-pdp .descblocks p{font-size:15.5px;line-height:1.6;color:#555;margin:0}

.pk-pdp .geotable{width:100%;border-collapse:collapse;max-width:900px}
.pk-pdp .geotable th,.pk-pdp .geotable td{text-align:right;padding:13px 12px;font-size:15px;border-bottom:1px solid var(--line)}
.pk-pdp .geotable thead th{font-weight:800;color:var(--ink);border-bottom:2px solid var(--ink)}
.pk-pdp .geotable td:first-child,.pk-pdp .geotable th:first-child{text-align:left;color:var(--gray);font-weight:600}

.pk-pdp .rvsubt{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.pk-pdp .rvhead{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.pk-pdp .rvhead .big{font-size:42px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pk-pdp .rvhead .stars{color:var(--orange);font-size:18px;letter-spacing:2px}
.pk-pdp .rvhead .src{font-size:14.5px;color:var(--gray)}
.pk-pdp .rvhead .src b{color:var(--ink)}
.pk-pdp .rvgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px;max-width:1000px}
.pk-pdp .rvc{border:1px solid var(--line);border-radius:6px;padding:20px 22px}
.pk-pdp .rvc .st{color:var(--orange);font-size:13px;letter-spacing:2px}
.pk-pdp .rvc .tx{font-size:14.5px;line-height:1.55;color:#3a3a3a;margin:9px 0 13px}
.pk-pdp .rvc .au{font-size:13px;color:var(--gray);font-weight:700;display:flex;align-items:center;gap:7px}
.pk-pdp .rvsection2{border-top:1px solid var(--line);margin-top:40px;padding-top:34px}
/* 🔴 CUÑA 27-sep-2026 (I2) — LA MISMA TARJETA PARA TODAS. Iara: *"no quiero que haya variaciones
   entre dónde están donde dice 'vía Specialized' o 'ver original' porque no queda estético"*.
   Medido: en una misma fila la línea de la fuente bailaba 68 px (Rockhopper Expert), 158 y 225
   (Allez E5 Sport) y 429 (Epic WC Expert): cada tarjeta medía lo que medía su texto y "Ver
   original" estaba en unas sí y en otras no. Ahora todas tienen la misma estructura y el mismo
   alto: estrellas, el texto en una caja de CINCO renglones (lo que no entra, "Leer más", main.js),
   la fila de acciones siempre presente aunque esté vacía, y el pie (nombre · fuente) abajo de una
   línea. `align-items:start`: abrir una tarjeta no estira a las vecinas (eso sería mover algo que
   ella no tocó, R2). Candado: qa_ficha_forma.cjs, en compu y en celu. */
.pk-pdp .pk-sec-rv .rvgrid{max-width:none;align-items:start}
.pk-pdp .rvc{display:flex;flex-direction:column;border-radius:8px}
.pk-pdp .rvc .rvtx{margin:9px 0 0}
.pk-pdp .rvc .tx{margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;min-height:calc(1.55em * 5)}
.pk-pdp .rvc.abierta .tx:not([hidden]){display:block;-webkit-line-clamp:unset}
.pk-pdp .rvc .rvacc{display:flex;align-items:center;gap:14px;min-height:30px;margin:8px 0 10px}
.pk-pdp .rvc .rvmas{background:none;border:0;padding:4px 0;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pk-pdp .rvc .rvmas:hover{color:var(--orange-txt)}
.pk-pdp .rvc .rvacc .rvorig{margin:0 0 0 auto;padding:4px 0}
.pk-pdp .rvc .au{border-top:1px solid var(--line);padding-top:12px}
.pk-pdp .rvc .au .src{margin-left:auto;color:var(--gray);font-weight:500;font-size:12px}

/* relacionados */
.pk-pdp .rel{padding:74px 0;background:var(--cream)}
.pk-pdp .rel h2{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-bottom:32px}
.pk-pdp .relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px}
.pk-pdp .rc{display:flex;flex-direction:column}
.pk-pdp .rc .ph{height:248px;background:#fff;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* 14-oct-2026: el producto lo agranda main.js con la foto en absoluto (fotos chicas, R11) */
.pk-pdp .rc .ph{position:relative}
.pk-pdp .rc .ph img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .35s ease}
/* mismo hueco "sin foto" que la tarjeta de la góndola (archive.css): ícono + "Foto en camino" */
.pk-pdp .rc .ph .noimg{color:#8a847e;font-size:13px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:8px}
.pk-pdp .rc .ph .noimg svg{width:30px;height:30px;stroke:#c9c3bd;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.pk-pdp .rc:hover .ph img{transform:scale(1.05)}
.pk-pdp .rc .b{padding:14px 2px 0}
.pk-pdp .rc .nm{font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
.pk-pdp .rc .ver{font-size:13.5px;color:var(--gray);margin:3px 0 9px}
.pk-pdp .rc .price{font-size:18px;font-weight:800;letter-spacing:-.01em}
/* 🔴 27-sep-2026 (I2, la clase: toda fila de tarjetas de la ficha) — EL PRECIO DE LOS RELACIONADOS
   A LA MISMA ALTURA. Medido en celular: el nombre ocupa de 1 a 4 renglones y el renglón gris a veces
   está vacío, así que el precio saltaba 21 px entre tarjetas vecinas (Rockhopper Comp y Expert). Va
   la regla de la tarjeta de la grilla (archive.css, 3-sep): el pie se clava abajo y el hueco queda
   arriba de él, donde no se ve; ningún nombre se corta. Candado: qa_ficha_forma.cjs. */
.pk-pdp .rc .b{flex:1;display:flex;flex-direction:column}
.pk-pdp .rc .price{margin-top:auto}
/* el pie (etiqueta de la SL8, si la hay, y el precio) es lo que se clava abajo: el precio es su
   último renglón, así que queda a la misma altura con o sin etiqueta (N12, 27-sep) */
.pk-pdp .rc .pie{margin-top:auto}
.pk-pdp .rc .pnuevo-fila{margin:0 0 6px}

/* ------------------------------------------------------------------
   LA CAMPANITA "Avisame cuando vuelva" (inc/pk-avisos.php).
   Va pegada al cartel de "no está en la tienda": es la única acción
   posible en esa ficha, así que tiene peso de botón, no de nota al pie.
   ------------------------------------------------------------------ */
.pk-aviso{margin-top:10px}
/* el display:block de los labels le gana al atributo hidden del navegador y dejaba el campo
   de WhatsApp a la vista sin tildar nada (visto en la captura del 8-ago) */
.pk-aviso [hidden]{display:none !important}
.pk-aviso .pk-aviso-abrir{display:flex;gap:12px;align-items:center;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--orange);border-radius:9px;padding:12px 15px;transition:background .15s}
.pk-aviso .pk-aviso-abrir:hover{background:#fdeee9}
.pk-aviso .pk-campana{width:38px;height:38px;border-radius:50%;background:#fdeee9;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pk-aviso .pk-campana svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pk-aviso .pk-aviso-tx b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pk-aviso .pk-aviso-tx small{display:block;font-size:12.5px;color:var(--gray);line-height:1.45;margin-top:2px}
.pk-aviso.abierto .pk-aviso-abrir{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;background:#fdeee9}
.pk-aviso .pk-aviso-form{border:1.5px solid var(--orange);border-top:none;border-radius:0 0 9px 9px;padding:4px 15px 14px;background:#fff}
.pk-aviso .pk-aviso-sub{font-size:13px;color:var(--gray);line-height:1.5;margin:8px 0 8px}
.pk-aviso .pk-aviso-variante{font-size:13px;color:var(--ink);line-height:1.5;margin:0 0 12px}
.pk-aviso .pk-aviso-campo{display:block;margin-bottom:10px}
.pk-aviso .pk-aviso-campo span{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.pk-aviso .pk-aviso-campo input{width:100%;height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:4px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
.pk-aviso .pk-aviso-campo input:focus{outline:none;border-color:var(--orange)}
.pk-aviso .pk-aviso-wa{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--ink);margin-bottom:12px;cursor:pointer}
.pk-aviso .pk-aviso-wa input{width:17px;height:17px;accent-color:var(--orange);cursor:pointer}
/* el Club: es un regalo, no un requisito, así que se ve como un beneficio y no como letra chica */
.pk-aviso .pk-aviso-club{display:flex;gap:9px;align-items:flex-start;background:#fdeee9;border:1px solid #f6cabb;
  border-radius:7px;padding:10px 12px;margin-bottom:12px;cursor:pointer}
.pk-aviso .pk-aviso-club input{width:17px;height:17px;accent-color:var(--orange);cursor:pointer;flex:0 0 auto;margin-top:1px}
.pk-aviso .pk-aviso-club span{font-size:12px;color:var(--gray);line-height:1.45}
.pk-aviso .pk-aviso-club span b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px}
.pk-aviso .pk-aviso-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pk-aviso .pk-aviso-enviar{width:100%}
.pk-aviso .pk-aviso-legal{font-size:11.5px;color:var(--gray);line-height:1.45;margin-top:9px}
.pk-aviso .pk-aviso-msg{font-size:13.5px;line-height:1.5;margin-top:10px}
.pk-aviso .pk-aviso-msg:empty{display:none}
.pk-aviso .pk-aviso-msg.bien{color:#00753a;font-weight:700}
.pk-aviso .pk-aviso-msg.mal{color:#c1362f;font-weight:600}

@media (max-width:760px){
  .pk-pdp .pk-wrap{padding:0 20px}
  /* ══ LA FOTO SE QUEDA MIENTRAS ELEGÍS EL COLOR (3-sep-2026) ══════════════════════════════
     Iara, probando desde el celular: *"es muy tosco el tema de cambiar de color y ver la imagen
     mientras. Creo que se pueden hacer las dos cosas a la vez"*.
     Medido en la Rockhopper a 390x844: la foto termina en y=417 y las bolitas de color empiezan en
     y=961. **544 px de distancia**, con una pantalla de 844: cuando llegás a elegir el color, la
     foto ya se fue para arriba. Tocás una bolita y no ves lo que cambia — que es exactamente lo que
     la bolita promete.
     La vara: la ficha de Specialized en celular tiene su galería con `position:sticky` (medido el
     3-sep: `galleryWrapper`, 257 px de alto, sticky). La foto queda fija arriba y la columna de
     compra pasa por debajo.
     Para que `sticky` funcione, `.pmain` deja de ser grid en celular: en una grilla de una columna
     el elemento se pega dentro de su propia celda, que mide lo mismo que él, y no se pega a nada.
     `top` = el alto del encabezado, que también es sticky (125 px medidos). */
  .pk-pdp .pmain{display:block;padding:8px 0 48px}
  /* 🔴 CUÑA 7-sep-2026 — LA FOTO PEGADA SE COMÍA EL TAP. Con la galería en sticky y z-index 4,
     la columna de compra scrolleaba POR DEBAJO de la foto: en la franja fija 125-483 px el
     elementFromPoint devolvía la IMG, así que "Agregar al carrito" o "Guía de talles" scrolleados
     al centro de la pantalla no se podían tocar (medido en el soporte Magene y el casco Align a
     390x844 — le pasa a todo producto de foto cuadrada, o sea a casi todos los accesorios).
     La vara es la misma ficha móvil de Specialized que trajo el sticky: la foto queda pegada y la
     columna de info pasa POR ENCIMA, opaca — la foto se ve mientras está descubierta y deja de
     robar toques apenas el contenido la tapa. El fondo va explícito porque sin él la columna es
     transparente y el z-index solo taparía los toques sin taparse la foto. */
  .pk-pdp .pmain > .pinfo{margin-top:22px;position:relative;z-index:5;background:#fff}
  /* con un encabezado fijo (125) y la foto fija (214), cualquier salto a un ancla cae DEBAJO de
     los dos. `scroll-margin-top` es lo que hace que "ir al color" deje el color a la vista. */
  .pk-pdp .pinfo > *{scroll-margin-top:72px}  /* 14-oct: sin la foto pegada, solo el encabezado (55) y aire */
  /* 🔴 se nombra TAMBIÉN `.con-thumbs` porque esa regla (dos clases) le gana por especificidad a
     `.pk-pdp .gallery` y dejaba la galería en `relative`: el sticky no tomaba y la foto se seguía
     yendo. Es la misma trampa que la grilla de `/envios/` hoy mismo. */
  /* 🔴 14-oct-2026 · VETO DE IARA (13-oct, F12 🔴): la foto pegada asomaba detrás del texto al bajar (Allez a 300 px de
     scroll: una tira de 56 px de sillín y manubrio entre la cabecera y "Specialized · Modelo 2025"). Lo de arriba (3-sep,
     "que se vea el color al elegir") quedó vetado después: manda ella. La galería ya NO es sticky en el celu: se va con la
     página, sin sombra. Lo que el sticky cuidaba sigue cumplido sin moverla: al llegar, la foto entera y las bolitas de
     color entran en la misma pantalla (Rockhopper: foto 89-389, colores 615-651 de 844), así que tocar un color se ve en
     la foto; y la ficha no scrollea sola al elegir (R2, qa_ficha_quieta). Candado: qa_ficha_forma.cjs (B1, celu). */
  .pk-pdp .gallery,
  .pk-pdp .gallery.con-thumbs{position:relative;z-index:4;background:#fff;padding-bottom:8px}
  /* el visor a pantalla completa vive en el body, así que no lo tapa; pero el chat y el WhatsApp
     sí quedarían por encima de la foto fija: ya están en z-index 80, y esto en 4. */
  /* en celular la columna no entra: las miniaturas vuelven abajo, en fila y con scroll lateral */
  .pk-pdp .gallery.con-thumbs{grid-template-columns:1fr;gap:10px}
  .pk-pdp .gallery .main{min-height:0;height:auto;grid-column:1;grid-row:1}
  /* en el celular el margen interno baja a 10: cada píxel de aire es un píxel menos de producto */
  .pk-pdp .gallery .main img{padding:10px;max-height:58vh}
  /* 🔴 3-sep-2026 · EN CELULAR NO VA LA TIRA DE MINIATURAS. Con la galería fija, la tira sumaba
     ~100 px al bloque pegado y la fila de colores quedaba CORTADA por debajo de la foto: se veía
     la mitad de las bolitas y no se leía el nombre del color.
     No se pierde nada: la foto grande ya tiene flechas, contador ("1 / 5") y se pasa deslizando,
     que es el gesto natural del celular. Es lo que hace Specialized en su ficha móvil, donde la
     galería es un carrusel deslizable sin tira. En compu la tira sigue, que es donde sirve. */
  .pk-pdp .thumbs{display:none}
  .pk-pdp .thumbs .t{height:74px;width:74px}
  .pk-pdp .gallery .zoombtn{opacity:1}
  /* en el celular la foto mide 340 px de alto: las flechas se acercan al borde para no taparla */
  /* 🔴 27-sep-2026 (noche, R2 · auditoría 1, 🟡 15): igual tapaban. Los círculos blancos de 44 px a 5 px
     del borde caían sobre las ruedas en las 25 bicis con galería (medido: hasta 839 px² de producto
     debajo de una flecha). El círculo que se VE baja a 30 px y va pegado al borde; lo que se TOCA sigue
     siendo la franja lateral de 44 px o más (el ::before de arriba, recortado por la caja), así que el
     pulgar no pierde nada. Y en una bici va a la altura del aire que tiene la foto: el 32 % de arriba,
     sobre las ruedas y no contra ellas (en el medio, 5 de 25 bicis de foto justa seguían tapadas; al
     32 %, ninguna). En lo que no es bici el aire está a los costados y la flecha queda en el medio
     (medido en 37 productos: al 32 % tapaba más). Candado: qa_ficha_forma.cjs (I3 flecha, celular). */
  .pk-pdp .gallery .g-nav{width:30px;height:30px;font-size:19px;padding:0 0 2px;background:rgba(255,255,255,.82)}
  .pk-pdp .gallery .g-nav::before{left:-14px;right:-14px}
  .pk-pdp .gallery .g-prev{left:1px}
  .pk-pdp .gallery .g-next{right:1px}
  .pk-pdp .gallery.es-bici .g-nav{top:32%}
  .pk-pdp .pinfo h1{font-size:29px}
  .pk-pdp .plead{max-width:100%}
  .pk-pdp .price{font-size:32px}
  .pk-pdp .trust{flex-direction:column;gap:13px}
  .pk-pdp .helpers{flex-direction:column;align-items:flex-start;gap:14px}
  .pk-pdp .sgroup{grid-template-columns:1fr;gap:16px;padding:26px 0}
  .pk-pdp .gitems{grid-template-columns:1fr;gap:18px}
  .pk-pdp .descblocks{columns:1;max-width:100%}
  .pk-pdp .geotable{display:block;overflow-x:auto;white-space:nowrap}
  /* 27-sep (J, N19): la tabla nutricional heredaba el "no partir renglones" de la de geometría y en
     390 px se cortaba ("320 kcal (1339"). Esta sí se parte: tiene 2 columnas, no 8. */
  .pk-pdp .pk-nutri .geotable{display:table;white-space:normal}
  .pk-pdp .rvgrid{grid-template-columns:1fr;gap:14px}
  .pk-pdp .rel{padding:52px 0}
  .pk-pdp .relgrid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .pk-pdp .rc .ph{height:150px}
}

/* fixes auditoría 9-jul */
/* 🔴 CUÑA 1-sep-2026 — "LOS TALLES SE VEN CHIQUITOS Y RAROS" (Iara, probando desde el celular).
   El selector decía `a.sz`, y el talle que no tenemos cargado se rinde como <span class="sz nohay">.
   O sea que **nunca recibía la caja**: se quedaba del ancho de su texto. Medido en la ficha del
   Jersey Pavé: "XS" 26px, "XXL" 35px y el resto 52px, en la misma fila. Eso es lo raro que se ve.
   Es el MISMO defecto que ya estaba anotado quince líneas más abajo para el tachado (el <span> no
   matchea `a.`) y que ahí se arregló solo para el color. La caja va en `.sz`, sin el `a.`. */
.pk-pdp .sizes .sz{min-width:52px;height:46px;padding:0 8px;border:1.5px solid var(--line);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;box-sizing:border-box}
.pk-pdp .sizes a.sz:hover{border-color:var(--ink)}
/* 🔴 26-ago-2026 · DOS DEFECTOS EN LA MISMA LÍNEA, los dos medidos.
   (a) El selector era `a.sz.off`, y el talle que NO trabajamos se rinde como <span> (bien: no
       lleva a ningún lado). O sea que el tachado — que el comentario de abajo daba por puesto,
       "va tachado como el agotado" — NUNCA se le aplicó. El pedido de Iara es literal: "mostrar
       TODOS los talles posibles y TACHAR los que no hay".
   (b) El gris era ilegible. Medido sobre la ficha de la Rockhopper Comp 29: #9b9b9b sobre blanco
       da 2,78:1 de contraste, y #c2bcb6 sobre #f6f4f2 da ~1,5:1. El mínimo para texto es 4,5:1.
       Un talle que no se puede LEER no informa que no está: parece un error de la página.
       #6e6e6e da 5,1:1 sobre blanco y sigue leyéndose como secundario. */
/* 🔴 CUÑA 1-sep-2026 — SIN STOCK YA NO VA TACHADO, VA GRIS. Iara, textual:
   *"no quiero que los talles se vean tachados, cuando no hay stock de un talle quiero que se vea
   gris"*. **Deroga el pedido del 18-ago** ("mostrar todos y tachar los que no hay"), que sigue
   valiendo en la mitad que importa: los talles se muestran TODOS igual, lo que cambia es cómo se
   marca el que no está. El gris se queda en #6e6e6e porque está medido (5,1:1 sobre blanco): un
   gris más claro no se lee, y un talle que no se puede leer parece un error de la página. */
.pk-pdp .sizes .sz.off{color:#6e6e6e;background:#f4f2f0;border-color:#e7e3df}
/* El aviso "lo agregaste al carrito" se estila en style.css, en un solo lugar, porque aparece en
   la ficha, en la grilla y en el carrito. Acá quedaba una segunda definición que además ponía el
   link en naranja y con margen izquierdo: dos verdades para la misma caja. (20-ago-2026) */
.pk-pdp .woocommerce-info{background:#eef6f0;border:1px solid #d7e9dd;color:#2f7d4f;
  border-radius:6px;padding:12px 16px;font-size:14px;margin-bottom:16px;list-style:none}
.pk-stickybar{display:none}
@media (max-width:760px){
  .pk-pdp .relgrid{grid-template-columns:repeat(2,minmax(0,1fr))} /* fix desborde horizontal */
  .pk-pdp .rel{margin:0 -20px!important}
  .pk-stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
    border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    gap:14px;align-items:center;box-shadow:0 -6px 18px rgba(0,0,0,.07)}
  .pk-stickybar .sbp{display:flex;flex-direction:column;line-height:1.15}
  .pk-stickybar .sbp b{font-size:17px;letter-spacing:-.01em}
  .pk-stickybar .sbp span{font-size:11px;color:var(--gray)}
  .pk-stickybar .pk-btn{flex:1;padding:13px 10px;font-size:14.5px}
  body.single-product{padding-bottom:74px} /* que la sticky no tape el footer */
  /* 27-sep-2026 (N12): la etiqueta de la SL8 en la barra, en chico y arriba del precio; la barra
     crece un renglón, así que el pie de la página se corre lo mismo para que no quede tapado */
  .pk-stickybar .sbp .pk-pnuevo{align-self:flex-start;font-size:9.5px;padding:1px 6px;margin-bottom:3px;color:var(--ink)}
  body.single-product:has(.pk-stickybar .pk-pnuevo){padding-bottom:94px}
}

/* ═══ GUÍA DE TALLES (inc/pk-guias-talles.php) · 17-ago-2026 ═══════════════════
   Antes el link "Guía de talles" era un WhatsApp. Ahora abre las tablas oficiales de
   Specialized. Va con <dialog> nativo: trae el foco atrapado, el Esc y el fondo modal
   sin una línea de JavaScript, que es justo lo que uno implementa mal a mano. */
.pk-pdp .opt .lab .pk-guia-abrir{display:inline-flex;align-items:center;gap:5px;margin-left:8px;
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none;
  color:var(--orange-txt);text-decoration:underline;text-underline-offset:3px}
.pk-pdp .opt .lab .pk-guia-abrir svg{width:15px;height:15px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round}
.pk-pdp .opt .lab .pk-guia-abrir:hover{color:var(--ink)}
.pk-pdp .opt .lab .pk-guia-abrir:hover svg{stroke:var(--ink)}

/* El <dialog> vive adentro de `.lab`, que tiene text-transform:uppercase y letter-spacing para
   el rótulo "TALLE". Sin este reset la guía entera salía EN MAYÚSCULAS y espaciada — se veía en
   el render, no en el código. Un modal hereda el CSS de donde está escrito, no de donde se ve. */
dialog.pk-guia,dialog.pk-guia *{text-transform:none;letter-spacing:normal;font-weight:400}
dialog.pk-guia b,dialog.pk-guia th,dialog.pk-guia h2,dialog.pk-guia h3,dialog.pk-guia .pk-guia-eyebrow,
dialog.pk-guia .pk-guia-wa,dialog.pk-guia .pk-guia-abrir{font-weight:700}
dialog.pk-guia .pk-guia-eyebrow,dialog.pk-guia .pk-guia-tabla h3,dialog.pk-guia thead th{text-transform:uppercase;letter-spacing:.06em}
dialog.pk-guia h2,dialog.pk-guia .pk-guia-sello b{font-weight:800}
/* `margin:auto` explícito: sin él, con max-height puesto, el diálogo se pega arriba a la
   izquierda en vez de centrarse. Se ve en el render, no en el código. */
dialog.pk-guia{border:0;padding:0;margin:auto;max-width:760px;width:calc(100% - 32px);max-height:88vh;
  border-radius:6px;background:#fff;color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.28)}
dialog.pk-guia::backdrop{background:rgba(20,18,16,.55)}
.pk-guia-box{display:flex;flex-direction:column;max-height:88vh}
.pk-guia-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.pk-guia-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:3px}
.pk-guia-head h2{font-size:22px;font-weight:800;letter-spacing:-.015em;margin:0;line-height:1.15}
.pk-guia-x{background:none;border:0;font-size:30px;line-height:1;color:#9a948d;cursor:pointer;padding:0 2px}
.pk-guia-x:hover{color:var(--ink)}
.pk-guia-body{padding:18px 24px 24px;overflow-y:auto}

/* El sello. Fondo oscuro porque el logo de Specialized que tenemos es BLANCO sobre
   transparente (cert-specialized.png): sobre fondo claro no se vería nada. */
.pk-guia-sello{display:flex;align-items:center;gap:14px;background:var(--ink);color:#fff;
  border-radius:5px;padding:12px 16px;margin-bottom:16px}
.pk-guia-spz{height:15px;width:auto;flex:0 0 auto;opacity:.95}
.pk-guia-sello span{font-size:12px;line-height:1.4;color:#d8d4cf}
.pk-guia-sello b{display:block;color:#fff;font-size:13px;margin-bottom:1px}

.pk-guia-medir{font-size:13.5px;line-height:1.55;color:#3c3a37;margin:0 0 14px}
.pk-guia-medir b{color:var(--ink)}
.pk-guia-ojo{font-size:12.5px;line-height:1.5;background:#fdf4f2;border-left:3px solid #e08a70;
  border-radius:0 4px 4px 0;padding:9px 13px;margin:0 0 14px;color:#5a4a45}

.pk-guia-tabla{margin-bottom:20px}
.pk-guia-tabla h3{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gray);margin:0 0 7px}
/* la tabla de calzado tiene 5 columnas y en el celular no entra: scrollea ELLA, no la página */
.pk-guia-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pk-guia-tabla table{border-collapse:collapse;width:100%;font-size:13px;min-width:min(100%,420px)}
.pk-guia-tabla th,.pk-guia-tabla td{padding:8px 12px 8px 0;text-align:left;white-space:nowrap;
  border-bottom:1px solid #f0ece7}
.pk-guia-tabla thead th{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gray);border-bottom:1.5px solid var(--line)}
.pk-guia-tabla tbody th[scope=row]{font-weight:800;color:var(--ink)}
.pk-guia-tabla tbody tr:nth-child(odd){background:#faf9f7}
.pk-guia-tabla td{color:#3c3a37}

.pk-guia-nota{font-size:12.5px;line-height:1.5;color:var(--gray);margin:0 0 16px}
.pk-guia-pie{border-top:1px solid var(--line);padding-top:14px}
.pk-guia-wa{display:inline-block;font-size:13.5px;font-weight:700;color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.pk-guia-wa:hover{color:var(--ink)}
.pk-guia-fuente{display:block;font-size:11px;color:#a8a29b;margin-top:8px;line-height:1.4}

@media (max-width:640px){
  dialog.pk-guia{width:calc(100% - 20px);max-height:92vh}
  .pk-guia-head{padding:16px 18px 13px}
  .pk-guia-head h2{font-size:19px}
  .pk-guia-body{padding:15px 18px 20px}
  .pk-guia-sello{gap:11px;padding:11px 13px}
}

/* 17-ago-2026 · el talle único se DICE (siete fichas vendían un talle sin nombrarlo) */
.pk-pdp .opt-soloGuia .sizes{margin-top:8px;display:flex;align-items:center;gap:10px}
/* el talle único de un producto que hoy no se puede comprar: NO va tachado (el talle no es el
   problema, el stock sí), va apagado. 29-ago-2026. */
.pk-pdp .sizes b.on.agotado{background:#f4f2f0;border-color:#e7e3df;color:#6e6e6e;text-decoration:none}
.pk-pdp .talle-unico-nota{font-size:12.5px;color:var(--gray)}

/* Talle de la escala que NO trabajamos en este modelo (19-ago-2026). Va tachado como el
   agotado pero sin link ni promesa de pedido: punteado y sin hover. */
/* "ese talle no lo tenemos cargado": el gris más apagado de los tres, y no se toca (1-sep: sin
   tachado ni borde punteado, como pidió Iara). */
.pk-pdp .sz.nohay{color:#8f8983;background:#faf9f8;border-color:#efece8;cursor:default;pointer-events:none}


/* ============================================================
   EL VISOR DE FOTOS (20-ago-2026)
   Iara: "No se puede hacer zoom en la foto. Eso está malísimo. Se tiene que poder hacer zoom
   como Mercado Libre." Vive fuera de .pk-pdp porque el visor se cuelga del <body>.
   ============================================================ */
.pk-visor{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(20,19,18,.93);backdrop-filter:blur(2px);overscroll-behavior:contain}
.pk-visor.on{display:flex}
.pk-visor .v-lienzo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pk-visor img{max-width:92vw;max-height:88vh;object-fit:contain;user-select:none;-webkit-user-drag:none;
  transition:transform .08s linear;cursor:zoom-in;background:#fff;border-radius:4px}
.pk-visor .v-x{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:19px;cursor:pointer;line-height:1}
.pk-visor .v-x:hover{background:rgba(255,255,255,.26)}
.pk-visor .v-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:0;background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer;padding-bottom:4px}
.pk-visor .v-nav:hover{background:rgba(255,255,255,.26)}
.pk-visor .v-nav[hidden]{display:none}
.pk-visor .v-prev{left:20px}.pk-visor .v-next{right:20px}
.pk-visor .v-pie{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:rgba(255,255,255,.66);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;pointer-events:none}
@media (max-width:760px){
  .pk-visor .v-nav{width:42px;height:42px;font-size:24px}
  .pk-visor .v-prev{left:8px}.pk-visor .v-next{right:8px}
  .pk-visor .v-pie{font-size:11.5px;padding:0 20px}
  /* 14-oct-2026 (Iara, tercera vez: "las fotos me siguen apareciendo chicas"): en el celu el visor es BLANCO a pantalla
     completa, como Nike o Canyon, y abre con el producto ampliado (main.js, encuadrar). La foto deja de ser una franja
     blanca sobre negro; los controles pasan a oscuros sobre un círculo claro para leerse encima de la foto. */
  .pk-visor{background:#fff;backdrop-filter:none}
  .pk-visor img{transition:transform .2s ease-out}
  .pk-visor.v-tocando img{transition:none}
  .pk-visor .v-x{top:calc(10px + env(safe-area-inset-top,0px));right:10px;width:46px;height:46px;font-size:20px;
    background:rgba(255,255,255,.92);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.09)}
  .pk-visor .v-x,.pk-visor .v-nav{z-index:2}   /* la foto transformada se pintaba ENCIMA de la flecha de la izquierda */
  .pk-visor .v-nav{background:rgba(255,255,255,.88);color:var(--ink);border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.09)}
  .pk-visor .v-pie{bottom:calc(16px + env(safe-area-inset-bottom,0px));color:var(--gray)}
}

/* "Ver original" de las reseñas traducidas (20-ago-2026) */
.pk-pdp .rvc .tx[hidden]{display:none}
.pk-pdp .rvc .rvorig{background:none;border:0;padding:0;margin-top:8px;font:inherit;font-size:12.5px;
  font-weight:700;color:var(--gray);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pk-pdp .rvc .rvorig:hover{color:var(--orange)}


/* ============================================================
   GUÍA DE TALLES · el selector de ALTURA (20-ago-2026)
   Iara: "Lo primero y más visual tiene que ser la medida del ciclista, su altura en centímetros.
   Las especificaciones del cuadro van aparte y después."
   ============================================================ */
.pk-guia-altura{margin:4px 0 22px}
.pk-guia-altura h3{font-size:19px;font-weight:800;letter-spacing:-.015em;margin:0 0 14px}
.pk-alt-fila{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pk-alt-rango{flex:1 1 260px;appearance:none;height:6px;border-radius:6px;background:var(--line);outline:none}
.pk-alt-rango::-webkit-slider-thumb{appearance:none;width:26px;height:26px;border-radius:50%;background:var(--orange);
  border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.28);cursor:grab}
.pk-alt-rango::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--orange-solido);
  border:3px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.28);cursor:grab;border-color:#fff}
.pk-alt-num{display:inline-flex;align-items:baseline;gap:5px;border:1.5px solid var(--line);border-radius:6px;padding:8px 12px}
.pk-alt-num input{width:64px;border:0;outline:none;font:inherit;font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  -moz-appearance:textfield}
.pk-alt-num input::-webkit-outer-spin-button,.pk-alt-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pk-alt-num span{font-size:14px;font-weight:700;color:var(--gray)}
.pk-alt-resultado{margin:16px 0 4px;font-size:17px;line-height:1.5;font-weight:600}
.pk-alt-resultado b{font-weight:800}
.pk-alt-resultado .talle{display:inline-block;background:var(--ink);color:#fff;border-radius:4px;padding:2px 10px;font-weight:800;margin:0 2px}
.pk-alt-resultado .aviso{display:block;font-size:14px;font-weight:600;color:var(--gray);margin-top:6px}

/* las barras: una por talle, la que corresponde a la altura elegida se enciende */
.pk-alt-barras{display:flex;flex-direction:column;gap:6px;margin:16px 0 10px}
.pk-alt-b{display:flex;align-items:baseline;gap:12px;padding:9px 13px;border:1.5px solid var(--line);border-radius:6px;
  transition:.16s;flex-wrap:wrap}
.pk-alt-b .t{font-weight:800;font-size:15px;min-width:42px}
.pk-alt-b .r{font-size:14px;color:var(--gray);font-weight:600}
.pk-alt-b .n{font-size:12.5px;color:#a9a39d;font-weight:600;margin-left:auto}
.pk-alt-b.on{border-color:var(--orange);background:#fff6f2}
.pk-alt-b.on .t{color:var(--orange)}
/* el talle que existe pero hoy no tenemos: se muestra igual y se dice, no se esconde */
/* 🔴 26-ago-2026, EN DOS PASOS, y el primero se quedó corto (lo cazó una revisión independiente).
   La opacidad .55 sobre #6b6b6b termina en un #adadad efectivo = 2,23:1. Se subió a .8 con un
   comentario que decía "≈3,9:1" — **mal medido: son 3,52:1**, y sigue abajo del mínimo de 4,5.
   Medido de nuevo, sobre blanco: .55→2,23 · .8→3,52 · .9→4,30 · .95→4,78 · 1→5,33.
   Va sin opacidad. Lo que dice "este talle no está" es el TACHADO, que se ve solo; apagar el
   texto además de tacharlo no agrega información y sí saca legibilidad. */
.pk-alt-b.nohay{opacity:1}
.pk-alt-b.nohay .t{color:#6e6e6e}   /* 1-sep: gris, no tachado (mismo criterio que los talles) */
.pk-alt-b.on.nohay{opacity:1;border-color:#d8d2cb;background:#faf8f6}
/* 27-sep-2026 (G2, N5: "parece que están todos los talles en stock"). El que NO tenemos queda plano
   (gris, sin borde) y el que tenemos lleva su borde y la palabra del léxico, "Disponible", en el verde
   de "ok / en stock" del sistema (#2F7D4F, 5,0:1). Se lee sin tener que comparar dos grises. */
.pk-alt-b.nohay{background:var(--ph);border-color:var(--ph)}
.pk-alt-b .disp{margin-left:auto;font-size:12.5px;font-weight:700;color:#2F7D4F}

/* la geometría, ahora abajo y plegada */
.pk-guia-geo{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.pk-guia-geo summary{cursor:pointer;font-weight:700;font-size:14.5px;color:var(--gray);list-style:none}
.pk-guia-geo summary::-webkit-details-marker{display:none}
.pk-guia-geo summary:before{content:"▸ ";color:var(--orange)}
.pk-guia-geo[open] summary:before{content:"▾ "}
.pk-guia-geo summary:hover{color:var(--ink)}
.pk-guia-geo .pk-guia-scroll{margin-top:12px}

/* el ancla de los selectores: sin margen, el encabezado fijo tapa la etiqueta "TALLE" justo
   cuando el visitante vuelve de elegir uno (29-ago-2026) */
#pkOpciones{scroll-margin-top:150px}

/* la aclaración de "Comprar ahora": más chica y en la misma línea, para que no crezca el botón */
.pk-pdp .cta-stack .pk-btn small{font-weight:600;opacity:.72;font-size:.82em;margin-left:4px}

/* el talle que existe en OTRO color: tachado (acá no está) pero claramente tocable (29-ago-2026) */
/* el gris tenía 3,7:1 de contraste y el mínimo legible es 4,5 (lo cazó qa_interacciones el 29-ago).
   Un talle tachado igual hay que poder LEERLO: es el que el cliente está buscando. */
/* "en este color no está, pero lo tenemos en otro": también gris, y también sin tachar ni puntear
   (1-sep). Se distingue del anterior porque SE PUEDE TOCAR: el hover lo pasa a naranja. */
.pk-pdp .sizes .sz.otro{color:#6e6e6e;background:#f4f2f0;border-color:#e7e3df;cursor:pointer}
.pk-pdp .sizes .sz.otro:hover{color:var(--orange-txt);border-color:var(--orange);background:#fff}
.pk-pdp .talles-leyenda{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--gray);display:flex;flex-direction:column;gap:3px}
.pk-pdp .talles-leyenda b{color:#3a3a3a;font-weight:700}
.pk-pdp .talles-leyenda a{color:var(--orange-txt);text-decoration:underline}

/* 🔴 CUÑA 29-ago-2026 — la barra fija de compra también se corre al llegar al pie. Cazado por el
   propio candado después de arreglar los flotantes: al final de una ficha en el celular, la barra
   se paraba encima del campo "Tu email" del Club y no había scroll para sacarla de ahí. Abajo de
   todo nadie está comprando; el botón vuelve apenas sube. Misma clase que usan los flotantes
   (la pone el observador de main.js), así que las tres cosas se van juntas y por el mismo motivo. */
body.pk-flot-abajo .pk-stickybar{opacity:0;visibility:hidden;pointer-events:none}
.pk-stickybar{transition:opacity .22s ease,visibility .22s ease}

/* 🔴 29-ago-2026: con Probotito mudado a la derecha en la ficha del celular, la etiqueta
   "PRECIO CONTADO" quedaba cortada por el círculo ("PRECIO CONTAD▮"). El renglón del precio deja
   libre el ancho del flotante: si no entra, la etiqueta baja sola a la línea de abajo. */
@media (max-width:760px){
  body.single-product .price-line{padding-right:76px;flex-wrap:wrap;row-gap:8px}
}

/* 🔴 29-ago-2026: en la franja del medio (761-900 px) la ficha va a una columna y los botones de
   compra ocupan el ancho entero, así que llegan hasta abajo del círculo de Probotito. Es solo la
   esquina —se toca igual en cualquier otro lado— pero es EL botón de comprar y no vale la pena
   dejarlo a discusión: los botones se cortan antes del flotante. */
@media (min-width:761px) and (max-width:900px){
  .pk-pdp .cta-stack{padding-right:76px}
}

/* ── LAS CREDENCIALES CON SU LOGO, EN LA FICHA (decisión de Iara, 3-sep-2026) ──────────────
   Motivo completo en la cuña de `template-parts/single-product.php`. Resumen: la ley L1 de Rami
   dice que la credencial se RECONOCE, y la ficha la prometía con texto y tres dibujos a mano.
   Va sobre #121212 porque los dos SVG son BLANCOS sobre transparente: sobre el fondo claro de la
   ficha, sin ese fondo, no se verían. Es el mismo negro que usa la banda de marcas de la home.
   Compacta y del ancho de la columna: NO es la franja de logos que Iara vetó el 15-ago. */
.pk-pdp .trust-cred{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding:13px 16px;border-radius:4px;background:#121212}
.pk-pdp .trust-cred img{display:block;height:auto;flex:0 0 auto}
.pk-pdp .trust-cred img[alt^="Shimano"]{width:104px}
.pk-pdp .trust-cred img[alt="SRAM"]{width:88px}
.pk-pdp .trust-cred .sep{width:1px;height:20px;background:rgba(255,255,255,.34);flex:0 0 auto}
.pk-pdp .trust-cred .txt{font-size:12px;line-height:1.4;color:rgba(255,255,255,.82);flex:1 1 190px;min-width:0}
.pk-pdp .trust-cred .txt b{color:#fff;font-weight:600}
@media (max-width:760px){
  /* en celular la tira se apila: los dos logos arriba y la línea abajo, para que ninguno se achique */
  .pk-pdp .trust-cred{gap:11px;padding:12px 14px}
  .pk-pdp .trust-cred .txt{flex-basis:100%}
}

/* ── LA CANTIDAD, AL LADO DE AGREGAR (NU4 del ojo humano, 27-sep-2026) ───────────────────────
   Solo en lo que no es una bici. Es el input number del carrito de WooCommerce con un − y un + de
   44 px (el mínimo para el pulgar). Viene con `hidden` del servidor y lo prende pdp-variantes.js:
   sin JavaScript el botón es un link que agrega de a uno. */
.pk-pdp .pk-cant{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pk-pdp .pk-cant[hidden]{display:flex;visibility:hidden}   /* 9-oct: el lugar queda reservado, el botón no se corre */
.pk-pdp .pk-cant-lugar{height:44px;flex:0 0 auto}
.pk-pdp .pk-cant-lbl{font-size:14px;font-weight:600;color:var(--ink)}
.pk-pdp .pk-cant-ctl{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#FFFFFF}
.pk-pdp .pk-cant-ctl button{width:44px;height:44px;border:0;background:none;padding:0;font-size:20px;line-height:1;color:var(--ink);cursor:pointer}
.pk-pdp .pk-cant-ctl button:disabled{color:var(--line);cursor:default}
.pk-pdp .pk-cant-ctl input{width:52px;height:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;
  padding:0;text-align:center;font:inherit;font-size:16px;font-weight:600;color:var(--ink);-moz-appearance:textfield;appearance:textfield}
.pk-pdp .pk-cant-ctl input::-webkit-outer-spin-button,.pk-pdp .pk-cant-ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── LO QUE AGREGASTE (NU2, 27-sep-2026): el dialog.pk-guia de siempre, más angosto ────────── */
dialog.pk-guia.pk-agregado{max-width:460px}
.pk-agregado-msg{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.pk-agregado-acc{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pk-agregado-acc .pk-btn{flex:1 1 170px;justify-content:center;text-align:center}
.pk-agregado-acc [hidden]{display:none}
/* el mismo aviso sin JavaScript, en la ficha: "Seguir comprando" al lado de "Ver carrito" */
.pk-pdp .woocommerce-message .pk-seguir{margin-left:12px;font-weight:600;text-decoration:underline}

/* ── LOS TALLES, DOS ESTADOS (F3 y R1 del ojo humano, 27-sep-2026) ──────────────────────────
   GRIS = no se puede comprar ahora (`.off`, y `.nohay` que ya se veía igual por especificidad).
   BLANCO CON UN PUNTITO del color donde sí está = en este color no, en ese sí (`.otro`). Antes el
   `.otro` era un tercer gris casi igual y la leyenda pedía distinguirlos a ojo. Sin tachar nada
   (Iara, 1-sep). El puntito lleva el color de la bolita de ese color (pk_swatch_de_opcion) y un
   borde apenas marcado para que el blanco o el gris claro no desaparezcan sobre el chip. */
.pk-pdp .sizes .sz.otro{position:relative;color:var(--ink);background:#FFFFFF;border-color:var(--line)}
.pk-pdp .sizes .sz.otro:hover{color:var(--ink);background:#FFFFFF;border-color:var(--ink)}
.pk-pdp .pt-otro{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--orange);border:1px solid rgba(0,0,0,.28);box-sizing:border-box}
.pk-pdp .sizes .sz.otro .pt-otro{position:absolute;top:5px;right:5px}
.pk-pdp .talles-leyenda .pt-otro{vertical-align:-1px;margin-right:3px}

/* ══ G2 · N5 (27-sep-2026) — EL TALLE SIN STOCK TIENE QUE VERSE A SIMPLE VISTA ═════════════════════
   Iara: "cuando no hay talles de ninguna bicicleta no se nota y parece que están todos los talles en
   stock y confunde". Medido en la Rockhopper Sport 29 y la Tarmac SL8 Expert a 390 px: el disponible
   y el agotado tenían el MISMO borde (#e7e3df) y el MISMO peso (700); los separaba un fondo #f4f2f0
   contra #fff (1,10:1). Sin tachar (Iara, 1-sep: "que se vea gris"), la diferencia pasa a ser de FORMA:
     · con stock: blanco, borde negro, letra negra. Se ve como un botón, porque lo es.
     · sin stock: plano y gris, sin borde, letra gris de peso normal (--gray sobre --ph = 4,6:1).
     · no lo tenemos en este modelo: gris claro con borde punteado.
     · en otro color: blanco con el puntito (no cambia).
   El estado, en palabras, va en el aria-label de cada chip y en el resumen `.pk-sr` (single-product). */
.pk-pdp .sizes a.sz:not(.off):not(.otro){border-color:var(--ink);color:var(--ink)}
.pk-pdp .sizes .sz.off,.pk-pdp .sizes b.off,.pk-pdp .sizes b.on.agotado{background:var(--ph);border-color:var(--ph);color:var(--gray);font-weight:500}
/* (29-sep-2026: el "no lo tenemos cargado" ya no es caja punteada: ver el bloque "EL ESTADO DEL TALLE SE DICE EN EL CHIP", al final) */
.pk-pdp .sizes a.sz.off:hover{border-color:var(--gray)}
/* ══ R5 (28-sep-2026) — A PEDIDO NO ES "EN LA TIENDA" ═══════════════════════════════════════════════════════
   El 54 de la Allez E5 Comp y el L de la Rockhopper Expert 29 (se piden a Specialized, 0 en el local) salían con el
   mismo borde negro que el talle del local. El borde negro queda para lo que te llevás hoy; el a pedido se compra
   igual (letra negra, es un link) con el borde claro y un relojito arriba a la derecha, donde el `.otro` lleva el
   puntito. El estado sale de pk_talle_estado(); lo vigila qa_talle_estado.cjs. */
.pk-pdp .sizes a.sz.pedido:not(.off):not(.otro){position:relative;border-color:var(--line);color:var(--ink);background:#fff}
.pk-pdp .sizes a.sz.pedido:not(.off):not(.otro):hover{border-color:var(--ink)}
.pk-pdp .pk-ic-pedido{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.pk-pdp .sizes .sz.pedido .pk-ic-pedido{position:absolute;top:4px;right:4px}
.pk-pdp .talles-leyenda .pk-ic-pedido{margin-right:3px;color:var(--ink)}
/* N17: el cartel "Sin stock" (style.css) un poco más grande sobre la foto grande de la ficha */
.pk-pdp .gallery .main .pk-sinstock{top:14px;left:14px;font-size:12.5px;padding:7px 11px}
.pk-pdp .opt-falta .pk-otro-color{color:var(--orange-txt);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ── SABORES Y DISEÑOS CON NOMBRE (NU3 del ojo humano, 27-sep-2026) ──────────────────────────
   El chip de texto de siempre (`.colors a.cl`, el de "Triberry") con una bolita chica adelante:
   el nombre se lee sin tocar y las dos naranjas del Energy dejan de ser iguales. Los colores de
   las bicis y la ropa siguen siendo solo el círculo (regla de Iara del 3-sep). */
.pk-pdp .colors.con-nombre b,.pk-pdp .colors.con-nombre a.cl{gap:8px;padding:0 13px 0 10px;font-weight:600}
.pk-pdp .colors .sw-punto{display:block;flex:none;width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.pk-pdp .colors b.on .sw-punto{border-color:rgba(255,255,255,.6)}
.pk-pdp .colors a.cl.off .sw-punto{opacity:1}   /* 29-sep: el color real, igual que las bolitas */
.pk-pdp .lab .cafeina-txt{font-style:normal;font-weight:600;color:var(--gray)}

/* ── COMPARAR, EN LA PRIMERA PANTALLA (C14 del ojo humano, 27-sep-2026) ───────────────────── */
/* 28-sep (R6): "Modelo 2026" y el link, juntos en .pk-subrow. En el celular quedan como antes (uno abajo
   del otro, 8 px entre los dos y 14 debajo); en la compu, en un renglón (bloque de abajo, 🟡 13). */
.pk-pdp .pk-subrow{margin:0 0 14px}
.pk-pdp .psub{font-size:14.5px;color:var(--gray);margin:0;font-weight:500}
.pk-pdp .pk-comparar-link{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 0;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pk-pdp .psub + .pk-comparar-link{margin-top:8px}
.pk-pdp .pk-comparar-link svg{width:16px;height:16px;fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pk-pdp .pk-comparar-link:hover{color:var(--orange-txt)}

/* 27-sep (a11y del gate): el h2 que va adentro del summary del desplegable único se ve igual que
   antes (hereda el tamaño y el peso del summary). */
.pk-pdp .pk-sec-t .pk-sec-h{display:inline;font:inherit;margin:0;padding:0;letter-spacing:inherit;color:inherit;text-transform:inherit}

/* 🔴 CUÑA 28-sep-2026 (R6 · re-auditoría, 🟡 13) — EN LA COMPU, "AGREGAR AL CARRITO" EN LA PRIMERA
   PANTALLA DE UNA MACBOOK. La de Iara (1440×900) deja unos 790 px útiles con la barra y las pestañas
   (su R3: "desde mi MacBook tengo que bajar y ahí seleccionar"). Medido antes, a 1440×790 y a 1280×800:
   el botón terminaba abajo de la pantalla en las 22 bicis que lo tienen (804 a 951 px). Lo que se
   achica, solo en la compu (el celular queda como estaba): el envío pasa a ser UN renglón sin caja; las
   cuotas, UN renglón (style.css, .pk-cf-res); "Modelo 2026" y "Comparar con otra bici" en un renglón;
   y el aire de arriba y entre bloques. Sin desplegables (Iara no los quiere en las cuotas).
   Candado: qa_ficha_forma.cjs ("compra a la vista" a 1440×790 en todas las bicis, con control negativo). */
@media (min-width:901px){
  .pk-pdp .crumb{padding-top:8px}
  .pk-pdp .pmain{padding-top:8px}
  .pk-pdp .pinfo h1{margin-bottom:6px}
  .pk-pdp .pk-subrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:12px}
  .pk-pdp .pk-subrow .psub,.pk-pdp .pk-subrow .pk-comparar-link{margin:0}
  .pk-pdp .stock,.pk-pdp .stock.urgent{margin-top:8px}
  .pk-pdp .freeship-pdp{background:none;border:0;border-radius:0;padding:0;margin-top:8px;gap:8px}
  .pk-pdp .freeship-pdp svg{width:19px;height:19px}
  .pk-pdp .pk-cf-res{margin-top:8px}
  .pk-pdp .pk-cf-pn{margin-bottom:5px}
  .pk-pdp .price-wrap{margin-bottom:12px}
  .pk-pdp .opt{margin-bottom:12px}
  .pk-pdp .opt .lab{margin-bottom:7px}
  .pk-pdp .cta-stack{margin-top:14px}
  /* la leyenda de los talles sigue AL LADO de los chips y dice lo mismo; en la compu corre como un
     párrafo (una frase detrás de la otra) en vez de una frase por renglón: 81 → 50 px en la Rockhopper
     Expert, que muestra las tres */
  .pk-pdp .talles-leyenda{display:block;margin-top:6px;font-size:12px;line-height:1.4}
  /* "Pedí y recibila en 72 hs" (el talle elegido se pide): el mismo texto, con menos relleno */
  .pk-pdp .stock72,.pk-pdp .pk-estado-alto{padding:9px 12px;gap:10px;margin-top:10px}
  .pk-pdp .stock72 .ic72,.pk-pdp .pk-estado-alto .ic72{width:30px;height:30px}
  .pk-pdp .stock72 .ic72 svg{width:17px;height:17px}
  .pk-pdp .stock72 .t72 p,.pk-pdp .pk-estado-alto .t72 p{font-size:12px;line-height:1.4;margin-top:2px}
}

/* ══ 29-sep-2026 · UN PRECIO Y EL CHIP DEL DESCUENTO (ronda 2 de los dos precios, inc/pk-precios.php) ═════════
   Iara: "no pondría los dos precios en la página. simplemente pondría el precio con tarjeta y pondría '10% off en
   transferencia o efectivo'". El chip va en el renglón del precio, donde iba "Precio contado": en la compu al lado
   del número (el alto de antes, así "Agregar al carrito" sigue en la primera pantalla de 1440×790: C5b de
   qa_ficha_forma.cjs); en el celular baja solo (flex-wrap). Specialized y Roval dicen "Precio especial…", sin %.
   Los relacionados (.rc) usan el chip de dos renglones de la tarjeta (.pk-dto-t, style.css). */
.pk-pdp .pk-dto{display:inline-block;font-size:13px;font-weight:700;line-height:1.35;color:#2f7d4f;background:#eef6f0;border:1px solid #d7e9dd;border-radius:4px;padding:3px 8px}
.pk-pdp .pk-dto b{font-weight:800}
/* 🔴 9-oct-2026 (RONDA 4): el precio especial con su número, en dos renglones también en el celular ("Precio especial $X" /
   "10% OFF en efectivo o transferencia"); en la compu ya va en columna al lado de la lista (abajo, min-width:901px).
   Debajo, la R1: la comparación verificada con otra bici (pk_precio_comparacion), con los dos números en negro. */
.pk-pdp .pk-dto4 > b,.pk-pdp .pk-dto4 > span{display:block}
.pk-pdp .pk-pcomp{margin:8px 0 0;font-size:14px;line-height:1.45;font-weight:600;color:#2F7D4F;white-space:nowrap}
.pk-pdp .pk-pcomp b{font-weight:800;color:#2F7D4F;white-space:nowrap}
.pk-pdp .pk-pcomp a{color:#2F7D4F;font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* 6-oct-2026 (ronda 3): debajo del contado y su chip, "El mismo precio que en el local." y la lista ("Con tarjeta, $X.").
   Dos frases que no se cortan por la mitad: en la compu van en un renglón, en el celular una debajo de la otra. */
.pk-pdp .pk-pc-sub{margin:8px 0 0;font-size:14.5px;line-height:1.45;color:var(--gray)}
.pk-pdp .pk-pc-sub > span{white-space:nowrap}
.pk-pdp .pk-pc-sub b{font-weight:700;color:var(--ink)}
@media (min-width:901px){
  .pk-pdp .pk-price1{flex-wrap:nowrap;align-items:center}
  .pk-pdp .pk-price1 .pk-dto{display:inline-flex;flex-direction:column;flex:0 0 auto;padding:4px 9px;line-height:1.25}
  .pk-pdp .pk-price1 .pk-dto b{font-size:14px}
  .pk-pdp .pk-price1 .pk-dto span{font-size:12px;font-weight:600;white-space:nowrap}
  /* 6-oct-2026 (ronda 3): el renglón de "El mismo precio que en el local. Con tarjeta, $X." no puede bajar "Agregar al
     carrito" de la primera pantalla de 1440×790 (C5b de qa_ficha_forma.cjs: la Sirrus X 3.0 y la Chisel quedaban a 806 px).
     Se lo pega al número y se le saca el aire de abajo al bloque del precio, que ahora termina en ese renglón. */
  .pk-pdp .pk-price1 .price{line-height:1.05}
  .pk-pdp .pk-pc-sub{margin-top:2px;font-size:14px;line-height:1.25}
  .pk-pdp .price-wrap:has(.pk-pc-sub){margin-bottom:10px}
  .pk-pdp .price-wrap:has(.pk-pc-sub) .stock,.pk-pdp .price-wrap:has(.pk-pc-sub) .freeship-pdp,.pk-pdp .price-wrap:has(.pk-pc-sub) .pk-cf-res{margin-top:6px}
  .pk-pdp .pinfo:has(.pk-pc-sub) .pk-subrow{margin-bottom:9px}
}
.pk-pdp .rc .pc{margin-top:2px}

/* ══ 29-sep-2026 — EL ESTADO DEL TALLE SE DICE EN EL CHIP (Iara: "aparece raro en gris algunas cosas… el cuadrado
   gris de los talles") ══════════════════════════════════════════════════════════════════════════════════════════
   Antes: cinco apariencias (borde negro, borde claro con relojito, borde claro con puntito, gris lleno, caja punteada)
   y una leyenda de hasta tres renglones para descifrarlas. La caja punteada del talle que no tenemos cargado parecía un
   casillero roto (la Rockhopper Comp 29 mostraba 4 de 6). Las fichas que más venden (medido el 29-sep: Canyon, Nike,
   specialized.com/ar) no usan bordes punteados, y lo que no es "comprar ya" lo DICEN: Canyon el plazo de entrega por
   talle y un sobre en el agotado; Specialized la entrega en palabras. Acá, una palabra debajo de cada talle
   (data-lbl, single-product.php), y dos familias que se separan a simple vista:
     · se compra → caja blanca, letra negra: "en tienda" (borde negro) · "en 72 hs" (borde claro + relojito) ·
       "otro color" (borde claro + puntito del color donde está)
     · hoy no → "sin stock" (plano y gris) · "consultar" (sin caja: el talle en gris y el link al WhatsApp)
   El texto del chip sigue siendo solo el talle: la palabra es un ::after (no entra en textContent). Candados:
   qa_talles_g2.cjs y qa_talle_estado.cjs (F5: cada chip dice su estado en palabras). */
.pk-pdp .sizes .sz[data-lbl],.pk-pdp .sizes b[data-lbl]{flex-direction:column;height:56px;min-width:58px;padding:0 6px;
  gap:2px;line-height:1.1}
.pk-pdp .sizes .sz[data-lbl]::after,.pk-pdp .sizes b[data-lbl]::after{content:attr(data-lbl);display:block;font-size:10.5px;
  font-weight:600;line-height:1.2;white-space:nowrap;color:var(--gray)}
.pk-pdp .sizes a.sz[data-lbl]:not(.off):not(.otro):not(.pedido)::after{color:#2F7D4F}
.pk-pdp .sizes .sz.pedido[data-lbl]::after,.pk-pdp .sizes .sz.otro[data-lbl]::after{color:var(--ink)}
.pk-pdp .sizes b.on[data-lbl]::after{color:#FFFFFF}
.pk-pdp .sizes b.on[data-lbl=""]::after{display:none}
.pk-pdp .sizes .sz.off.nohay{background:transparent;border-style:solid;border-color:transparent;color:var(--gray);font-weight:500}
/* "consultar" en gris y con un subrayado apenas marcado: en una zapatilla con 11 talles sin cargar, en naranja era una
   pared de links que se llevaba la mirada; lo que tiene que saltar es lo que se compra */
.pk-pdp .sizes .sz.off.nohay::after{color:var(--gray);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.pk-pdp .sizes a.sz.off.nohay:hover::after{color:var(--orange-txt);text-decoration-color:currentColor}
.pk-pdp .sizes a.sz.off.nohay:hover{border-color:var(--line)}
/* en el celular entra la escala entera de una bici (6 talles) en una fila de 358 px: menos aire, no menos letra */
@media (max-width:480px){
  .pk-pdp .opt .sizes{gap:6px}
  .pk-pdp .sizes .sz[data-lbl],.pk-pdp .sizes b[data-lbl]{min-width:52px;padding:0 4px}
  .pk-pdp .sizes .sz.off.nohay{padding:0 1px;min-width:0}
  .pk-pdp .sizes .sz[data-lbl]::after,.pk-pdp .sizes b[data-lbl]::after{font-size:10px}
}
/* el talle único agotado va gris: la palabra en gris, no en blanco */
.pk-pdp .sizes b.on.agotado[data-lbl]::after{color:var(--gray)}

/* ══ 9-oct-2026 — LA FICHA QUIETA (T1/T2/T3 de Iara: "no terminamos de tener ninguna cosa fija" · "se suben los botones")
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   El renglón de estado (`.pk-estado`, single-product.php) va entre los talles y los botones y mide SIEMPRE lo mismo:
   en una ficha con variantes es una grilla de una celda donde se apilan el estado de verdad y una copia invisible del
   bloque más alto, el de 72 hs (`.pk-estado-alto`: las mismas reglas que `.stock72`, con su texto en data- dibujado por
   ::before, que no es texto de la página). El alto lo pone la copia, a cualquier ancho; el estado se centra adentro.
   Candado: qa_ficha_quieta.cjs. */
.pk-pdp .pk-estado{margin-top:12px}
.pk-pdp .pk-estado > *{margin-top:0}
.pk-pdp .pk-estado.fijo{display:grid}
.pk-pdp .pk-estado.fijo > *{grid-area:1/1;margin-top:0}
.pk-pdp .pk-estado-alto{visibility:hidden;pointer-events:none}
.pk-pdp .pk-estado-alto b::before,.pk-pdp .pk-estado-alto p::before{content:attr(data-t)}
.pk-pdp .pk-estado.fijo > .stock{align-self:center;justify-self:start}
.pk-pdp .pk-estado .stock-consultar{display:flex;flex-direction:column;justify-content:center}
.pk-pdp .pk-estado .pk-otro-color{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pk-pdp .pk-estado + .cta-stack{margin-top:14px}
/* 14-oct-2026 (ojo humano final, F12 "nada de huecos blancos"): la reserva es la de ESTE producto (pk_ficha_reserva).
   Las copias invisibles: .pk-alto-p (lo que se compra: el bloque de 72 hs o el renglón de una línea) y .pk-alto-n (el
   "sin stock" y el talle sin cargar más largos). El lugar de la cantidad (--pk-cant-h + el gap de la pila) está debajo
   en lo que se compra y no en lo que no: ahí lo suma el estado (.cant-suma) y en lo que se compra el "sin stock" se lo
   descuenta (.cant-abajo, margen negativo: la grilla mide la caja con su margen). El botón, en el mismo lugar. */
.pk-pdp{--pk-cant-h:46px;--pk-cta-gap:11px}
.pk-pdp .cta-stack{gap:var(--pk-cta-gap)}
.pk-pdp .pk-cant,.pk-pdp .pk-cant-lugar{height:var(--pk-cant-h)}
.pk-pdp .pk-estado.cant-suma > .pk-alto-p{margin-bottom:calc(var(--pk-cant-h) + var(--pk-cta-gap))}
.pk-pdp .pk-estado.cant-abajo > .pk-alto-n{margin-bottom:calc(-1 * (var(--pk-cant-h) + var(--pk-cta-gap)))}
.pk-pdp .pk-estado-alto.pk-alto-txt,.pk-pdp .pk-estado-alto.pk-alto-linea{display:block}
.pk-pdp .pk-alto-linea{font-size:13.5px;font-weight:600}
.pk-pdp .pk-alto-linea::before{content:attr(data-t)}
/* los dos lugares de la pila: el principal (comprar o la salida) y el secundario (comprar ahora o el aviso) */
.pk-pdp .cta-stack .pk-btn-wa svg{width:18px;height:18px}
.pk-pdp .cta-stack .pk-cta-2 .pk-aviso{margin-top:0}
.pk-pdp .cta-stack + .freeship-pdp{margin-top:14px}
/* F2: las garantías y los logos, en una franja a todo el ancho debajo de la foto y la compra */
.pk-pdp .trust.trust-franja{margin-top:28px;padding-top:22px}
/* 14-oct-2026 (F28/B7): la promo de la charla quedó debajo de los beneficios, a todo el ancho de la ficha: en la compu medía
   1.228 px, una franja rosada con un botón de 1.182 px. Va del ancho de una tarjeta, alineada a la izquierda como el resto. */
.pk-pdp .pk-ficha-promos{max-width:620px;margin-bottom:22px}
/* F2: la tabla de cuotas, en su desplegable (el título ya lo dice el summary) */
.pk-pdp .pk-sec-cuotas .pk-cf{margin-top:0}
.pk-pdp .pk-sec-cuotas .pk-cf-t{display:none}
/* el talle ELEGIDO que no se compra (gris, "sin stock") se distingue de los otros grises por el borde negro: con la
   regla de tres caras (9-oct) hay más chips grises y el elegido no se encontraba */
.pk-pdp .sizes b.on.agotado{border-color:var(--ink)}

/* ══ 9-oct-2026 — F1: LA FOTO LLENA EL MARCO (Iara: "en la vista previa aparecen más chiquitas de lo que deberían") ══
   El agrandado lo hace main.js (ajustarFoto: busca el producto en la foto y cierra el blanco de alrededor). Acá, lo que
   no se mueve: en una bici el marco es SIEMPRE 16:9 (antes tomaba la proporción de la primera foto del color y la Sport
   ahumado medía 208 px de alto en el celular contra 197 de las otras: la ficha se corría al cambiar de color), y en el
   celular la foto va de borde a borde (la columna tiene 20 px de aire a cada lado). */
.pk-pdp .gallery.es-bici .main.pk-marco{aspect-ratio:16/9}
@media (max-width:760px){
  .pk-pdp .gallery{margin-inline:-20px}
  .pk-pdp .gallery .main{border-radius:0}
}

/* ══ 9-oct-2026 — RONDA 2 del ojo humano (filas 5, 6, 7) ══════════════════════════════════════════════════════════════
   5: el número grande es el de la lista; "con tarjeta" va chico en el mismo renglón (no cambia el alto del bloque).
   6: la barra fija del celu se esconde mientras los botones de la ficha están a la vista (pdp-variantes.js), así nunca hay
      dos "Consultá por WhatsApp" iguales en pantalla. 7: en el celu la foto ampliada va de borde a borde. */
.pk-pdp .price small.pk-con{font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--gray);margin-left:4px;white-space:nowrap}
@media (min-width:901px){
  /* en la compu el chip verde ocupa 198 de los 468 px de la columna: el número y su "con tarjeta" tienen que entrar en el resto
     sin partirse (medido: 259 px). Un punto menos de tamaño al número y sin dejar que el renglón crezca (C5b) */
  .pk-pdp .pk-price1{gap:9px}
  .pk-pdp .pk-price1 .price{font-size:35px;white-space:nowrap;flex:0 1 auto}
}
.pk-stickybar .sbp b small.pk-con{font-size:11px;font-weight:600;letter-spacing:0;color:var(--gray);margin-left:3px}
@media (max-width:760px){
  body.pk-botones-a-la-vista .pk-stickybar{display:none}
  .pk-visor img{max-width:none;width:100vw;height:auto;max-height:none;border-radius:0}
  .pk-visor .v-lienzo{touch-action:none}
}

/* Ronda 2, fila 12 (ojo humano, compu). "También te puede interesar": el renglón del precio especial usa la clase `.b` y la regla
   de la columna de la tarjeta (`.rc .b`: flex:1 y 14 px de aire arriba) lo agarraba también a él, y abría un hueco entre
   "Precio especial $ X" y su condición. Acá la etiqueta, su número y su condición quedan pegados. La franja de Shimano y
   SRAM ocupa todo el ancho de la columna y va centrada (era una caja angosta pegada a la izquierda). */
.pk-pdp .rc .pk-pe4 .b{flex:none;display:block;padding:0;margin-top:4px}
.pk-pdp .rc .pk-pe4{margin-top:3px}
.pk-pdp .trust.trust-franja .trust-cred{flex:1 1 100%;justify-content:center;margin:6px 0 22px}
.pk-pdp .trust.trust-franja .trust-cred .txt{flex:0 1 auto}

/* ══ 13-oct-2026 — FICHA MINIMALISTA, 2da vez (Iara, desde el celu: "las fotos muy chiquitas y hay mucha, mucha, mucha
   información abajo"). La vara nueva NO es cuánto llena el producto su marco (el 9-oct dio 93 %) sino cuánto de la
   PANTALLA ocupa la foto: la bici medía 390×219 = 26 % de 844 y arrancaba en y=211. Referentes en 390×844: Zara 66 %,
   Rapha 58 %, Nike ~55 %, Canyon 43 %, Specialized 26 %. Antes/después: outputs/probikes/web_minimalista_2026-10-13/. ══ */
.pk-pdp .pk-rotulo{font-size:13px;font-weight:600;color:var(--gray);margin:0 0 6px;line-height:1.35}
.pk-pdp .pk-rotulo .psub{display:inline;font:inherit;color:inherit;margin:0}
.pk-pdp .pk-rt-link{display:inline-flex;align-items:center;gap:4px;margin:0 0 4px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pk-pdp .pk-rt-link .st{color:var(--orange);text-decoration:none}
/* precio: sin cajas. El especial, en verde y sin chip; las cuotas, en tinta (sin rojo ni rayo) */
.pk-pdp .pk-dto,.pk-pdp .pk-price1 .pk-dto{background:none;border:0;border-radius:0;padding:0;color:#2F7D4F}
.pk-pdp .ctag{background:none;border:0;border-radius:0;padding:0;text-transform:none;letter-spacing:0;font-size:14px}
/* color y talle: "Color: Blanco duna" en un renglón; "Talle" y "Guía de talles" en el mismo renglón */
.pk-pdp .opt .lab{display:flex;align-items:baseline;flex-wrap:wrap;font-size:14px;letter-spacing:0;text-transform:none;margin-bottom:8px}
.pk-pdp .opt .lab > span{color:var(--ink);font-weight:400;margin-left:5px}
.pk-pdp .opt .lab .pk-guia-abrir{margin-left:auto}
.pk-pdp .colors b.sw-color,.pk-pdp .colors a.sw-color,.pk-pdp .colors b.sw-especial,.pk-pdp .colors a.sw-especial,
.pk-pdp .colors b.sw-medido,.pk-pdp .colors a.sw-medido{width:36px;height:36px;padding:3px}
.pk-pdp .sizes b,.pk-pdp .sizes .sz{min-width:46px;height:44px}
/* el estado del talle: texto, sin cajita (la copia invisible que fija el alto mide lo mismo) */
.pk-pdp .stock.urgent{background:none;border:0;border-radius:0;padding:0;font-size:13px;font-weight:700;color:var(--orange-txt)}
.pk-pdp .stock72,.pk-pdp .stock-consultar{background:none;border:0;border-radius:0;padding:0}
.pk-pdp .pk-estado-alto{border:0;padding:0}
/* beneficios: UNA lista, ícono + una línea cada uno, sin fondo ni bajadas */
.pk-pdp .freeship-pdp{background:none;border:0;border-radius:0;padding:0;gap:10px}
.pk-pdp .freeship-pdp svg{width:20px;height:20px}
.pk-pdp .freeship-pdp .pk-envcp-tit{font-size:14px;font-weight:600}
.pk-pdp .trust .m{align-items:center}
.pk-pdp .trust .m span{font-size:0;line-height:1.35}
.pk-pdp .trust .m span b{display:inline;font-size:14px;font-weight:600;margin:0}
.pk-pdp .trust .m svg{width:20px;height:20px;margin-top:0}
.pk-pdp a.pk-sec-link{display:block;text-decoration:none;color:var(--ink)}
.pk-pdp a.pk-sec-link .pk-sec-t::after{content:"";width:9px;height:9px;flex:0 0 auto;margin-left:auto;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);opacity:.6}
.pk-pdp #pkResenas{scroll-margin-top:calc(var(--pk-hdr-alto,54px) + 8px)}
@media (max-width:760px){
  /* la ficha del celu: sin la barra de búsqueda de abajo del header (la lupa la abre, main.js) ni las migas (su JSON-LD queda) */
  body.single-product .pk-searchbar{display:none}
  body.single-product.pk-busca-abierta .pk-searchbar{display:block}
  .pk-pdp .crumb{display:none}
  .pk-pdp .pmain{padding:0}
  .pk-pdp .gallery,.pk-pdp .gallery.con-thumbs{top:auto}  /* 14-oct: la galería ya no es sticky en el celu (veto de Iara, F12) */
  /* la foto, de borde a borde: bici 13:10 (4:3 daba 292 px = 34,7 %), el resto 1:1 y 4:5 si la foto es vertical */
  .pk-pdp .gallery.es-bici .main.pk-marco{aspect-ratio:13/10}
  .pk-pdp .gallery:not(.es-bici) .main.pk-marco{aspect-ratio:1/1}
  .pk-pdp .gallery.pk-vertical:not(.es-bici) .main.pk-marco{aspect-ratio:4/5}
  .pk-pdp .pmain > .pinfo{margin-top:14px}
  /* 14-oct: un ancla cae debajo del encabezado y nada más (la foto ya no queda pegada encima) */
  .pk-pdp .pinfo > *,.pk-pdp .gallery.es-bici ~ .pinfo > *{scroll-margin-top:calc(var(--pk-hdr-alto,54px) + 18px)}
  .pk-pdp .pinfo h1{font-size:24px;margin-bottom:4px}
  .pk-pdp .price{font-size:30px}
  .pk-pdp .pk-price1{display:block}
  .pk-pdp .pk-price1 .pk-dto{display:block;margin-top:2px;font-size:14px;font-weight:600;line-height:1.35}
  .pk-pdp .pk-price1 .pk-dto b{display:block;font-size:15px;font-weight:700}
  /* 13-oct (Director): la condición iba pegada y cortaba "transferencia" sola abajo; va entera en su renglón */
  .pk-pdp .pk-price1 .pk-dto span{display:block;font-size:14px;font-weight:500}
  .pk-pdp .pk-cf-res{margin-top:2px}
  .pk-pdp .opt{margin-bottom:14px}
  .pk-pdp .trust.trust-franja{margin-top:10px;padding-top:0;border-top:0;gap:10px}
  .pk-pdp .trust.trust-franja .trust-cred{flex-wrap:nowrap;gap:10px;padding:10px 12px;margin:6px 0 18px}
  .pk-pdp .trust.trust-franja .trust-cred img[alt^="Shimano"]{width:76px}
  .pk-pdp .trust.trust-franja .trust-cred img[alt="SRAM"]{width:60px}
  .pk-pdp .trust.trust-franja .trust-cred .txt{flex:1 1 auto;font-size:11.5px;line-height:1.35}
  .pk-pdp .pk-sec-t{font-size:16px;padding:16px 0}
}
/* 13-oct-2026 (Director): en el celu el botón de Probotito se esconde mientras el bloque de color, talle y botones pasa por su
   esquina (pdp-variantes.js, observarBot); vuelve apenas pasa. Tapaba el talle XXL y "Guía de talles" al llegar. */
@media (max-width:760px){
  #pkBot .pk-bot-launch{transition:opacity .2s ease,visibility .2s ease}
  body.single-product.pk-bot-sobre-compra #pkBot:not(.open) .pk-bot-launch{opacity:0;visibility:hidden;pointer-events:none}
}
/* 13-oct-2026 (ojo humano, 🔴): la foto pegada del celu ahora es de borde a borde y el panel blanco que la tapa al bajar era
   40 px más angosto: la foto y sus flechas asomaban por los costados como un recuadro roto. El panel también va de borde a borde.
   Y "Guía de talles" medía 97×15 px: el área de toque llega a 44 px de alto sin mover nada. */
@media (max-width:760px){
  .pk-pdp .pmain > .pinfo{margin-inline:-20px;padding-inline:20px}
  .pk-pdp .pk-guia-abrir{position:relative}
  .pk-pdp .pk-guia-abrir::after{content:"";position:absolute;inset:-14px -8px}
}
/* 13-oct-2026 (ojo humano): sin la sombra de la foto pegada (quedaba como una raya al final de la compra, porque ahora el
   panel pasa POR ENCIMA de la foto) y el aviso del renglón fijo de estado arriba, pegado a los talles, en vez de flotando
   en el medio de su lugar reservado (el alto reservado no cambia: R2, qa_ficha_quieta). */
@media (max-width:760px){
  .pk-pdp .gallery,.pk-pdp .gallery.con-thumbs{box-shadow:none}
  .pk-pdp .pk-estado.fijo{align-items:start;align-content:start}
}
/* 14-oct-2026 (Iara: "no se ve bien el tema de las 3 cuotas sin interés"): el 13-oct las cuotas pasaron a tinta, 14 px y
   sin el rayo, el renglón más apagado del precio. Vuelven a su estilo de style.css (.pk-cf-r1: naranja, 16 px, 800; el ⚡ salió el 19-oct). */
.pk-pdp .pk-price1 + .pk-cf-res,.pk-pdp .pk-cf-res{margin-top:8px}

/* 14-oct-2026 (G21): las cuotas en la tarjeta de los relacionados, con la medida de la góndola (archive.css .chip-si y
   .pcard .price small.pk-con): el mismo chip verde y el mismo "en 3 cuotas" chico al lado de la lista. */
.pk-pdp .rc .price small.pk-con{font-size:11px;margin-left:3px}
.pk-pdp .rc .rc-si{margin-top:6px}
.pk-pdp .rc .chip-si{display:inline-block;font-size:12.5px;font-weight:700;color:#2f7d4f;background:#eef6f0;border:1px solid #d7e9dd;border-radius:3px;padding:3px 9px}

/* ══ 16-oct-2026 — EL CONTADO, ALEVOSO (Iara, con captura de la ficha del Nutremax: "el descuento en efectivo tiene que
   aparecer mucho más. Alevoso, más lindo, que se note mucho más (…) el verde me gusta, pero debería estar más grande.
   Tendría que estar distinto"). Causa: el 13-oct ("precio: sin cajas", arriba) lo dejó en texto verde de 14-15 px al
   lado de una lista de 48: el dato estaba, pero no pesaba. Minimalista no es sacar el peso del dato que vende.
   Ahora: la lista arriba (ronda 4 de Iara, no cambia) y DEBAJO, una tarjeta verde LLENA (la clarita el lector frío la leyó
   "pálida y prolija, no alevosa"): el contado en blanco casi del tamaño de la lista, el % en una pastilla blanca y la
   condición entera abajo. Blanco sobre #2A7346 = 5,9:1. Mismo texto y misma clase que leen los candados. ══ */
.pk-pdp .price-line.pk-price1{display:block}
/* 19-oct-2026 (Iara: "el recuadro verde de la oferta por transferencia me parece demasiado voluminoso (…) no queda aesthetic y
   minimalista. dejaría solo las letras verdes (…) fijate como lo hace Mercado Libre"). Sin caja: como ML pone el "10% OFF" y
   el "Mismo precio en cuotas", texto verde pegado al precio. El peso lo da el número (verde, negrita, la mitad de la lista),
   no el fondo: así no vuelve el "pálido" del 13-oct. Mismo HTML y mismas clases que leen los candados. */
.pk-pdp .price-wrap .pk-price1 .pk-dto.pk-dto4{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:0;
  margin:6px 0 2px;padding:0;background:none;border:0;border-radius:0;color:#2F7D4F;line-height:1.25}
.pk-pdp .price-wrap .pk-price1 .pk-dto.pk-dto4 > b{display:inline;font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.01em;color:#2F7D4F;white-space:nowrap}
.pk-pdp .price-wrap .pk-price1 .pk-dto.pk-dto4 > i.pk-dto-pct{display:inline;font-style:normal;font-size:15px;font-weight:700;line-height:1.2;
  color:#2F7D4F;background:none;border-radius:0;padding:0;white-space:nowrap}
.pk-pdp .price-wrap .pk-price1 .pk-dto.pk-dto4 > span{display:block;flex-basis:100%;font-size:14px;font-weight:500;line-height:1.3;color:#2F7D4F;white-space:normal}
/* La tarjeta suma ~75 px y a 1440×790 (la MacBook de Iara, C5b de qa_ficha_forma: "Agregar al carrito" sin scrollear en TODAS
   las bicis) el botón quedaba a 7 px del borde: se le devuelve el alto en la ficha de la compu, sin sacar nada que se lea.
   La barra de búsqueda sigue a la vista (cuña del 1-sep, style.css), más baja; la tarjeta, un poco más compacta. Al lado de
   la lista no entra: la columna mide 468 px a 1440 y lista + tarjeta de una bici piden ~550. */
@media (min-width:761px){
  body.single-product .pk-searchbar form{padding-top:7px;padding-bottom:7px}
  body.single-product .pk-searchbar input{font-size:16px;padding:7px 12px}
  body.single-product .pk-searchbar button{padding:9px 20px}
  .pk-pdp .crumb{padding-top:6px}
  .pk-pdp .price-wrap{margin-bottom:8px}
  .pk-pdp .price-wrap .pk-cf-res{margin-top:6px}
  .pk-pdp .pinfo .opt{margin-bottom:8px}
  .pk-pdp .pk-estado.fijo{margin-top:8px}
  .pk-pdp .cta-stack{margin-top:10px}
}
@media (max-width:760px){
  .pk-pdp .price-wrap .pk-price1 .pk-dto.pk-dto4 > b{font-size:22px}
}
/* 16-oct-2026: las estrellas viven en el renglón de la marca (template-parts/single-product.php): mismo tamaño que el rótulo */
.pk-pdp .pk-rotulo .pk-rt-link{display:inline;margin:0;font-size:inherit}
.pk-pdp .pk-rotulo .pk-rt-sep{color:var(--gray)}