/* Theme Name: Probikes Theme URI: https://probikes.sbs Description: Tema oficial de la nueva web de Probikes — diseño premium minimal (home_v2 / pdp_v3), integrado con WooCommerce + Contabilium. Portable: esta misma carpeta se copia al hosting. Author: Estudio Iara Version: 1.0 Requires at least: 6.0 Requires PHP: 8.0 Text Domain: probikes */ /* ============================================================ BASE — reset, variables, header, util, footer (compartido) ============================================================ */ :root{ --orange:#EF5A28; --ink:#161616; --char:#1A1A1A; --cream:#F5F2EF; /* 🔴 CUÑA 29-ago-2026 — EL NARANJA DE MARCA, PARA LETRA CHICA. Medido: #EF5A28 sobre blanco da 3,41:1 de contraste. Para un titular grande alcanza (el piso es 3,0), pero para texto normal el piso es 4,5 y no llega — y justo los renglones que van en naranja son los CHICOS: los rótulos de sección de 11-13 px ("LA CASA", "RESPALDO", "CLUB PROBIKES") y los links dentro de un párrafo. Es la ley L3 de Rami puesta en número: si el dato está en cuerpo chico y encima no contrasta, no está. NO se cambia el naranja de la marca: se agrega un segundo tono, el mismo color un punto más oscuro (4,57:1), SOLO para texto chico sobre fondo claro. Los botones, las etiquetas naranjas, los titulares y el logo siguen con el de siempre. Es cómo se aplica bien una marca, no un cambio de marca. El naranja de los BOTONES (blanco sobre naranja, también 3,41:1) queda como está a propósito: eso sí sería un cambio visible y lo decide Iara. */ --orange-txt:#C53D0F; /* pasa 4,5:1 sobre blanco (5,19) Y sobre el crema del sitio (4,65): la primera versión, #D54110, pasaba en blanco y se quedaba en 4,10 sobre el crema, que es justo donde viven la mitad de los rótulos */ /* 🔴 DECISIÓN DE IARA, 3-sep-2026: *"lo del color, tomá la decisión que a vos te parezca mejor, si querés cambiarlo cambialo"*. Elegido **#C53D0F**, y el motivo de por qué ése y no otro: **NO es un naranja nuevo.** Es el mismo que el tema ya usaba para texto desde el 29-ago (`--orange-txt`). O sea que el sitio pasa de DOS naranjas interactivos a UNO: es MENOS ruido, no más — que es literalmente lo que ella pidió. El número: blanco sobre #EF5A28 daba **3,41:1** y el piso legible es 4,5; sobre #C53D0F da **5,19:1**. Eran 70 avisos del control de contraste, todos el mismo color. ⚠️ El naranja de MARCA no se toca: `--orange` sigue igual en todo lo gráfico — la barra de 4 px de arriba, la rayita del rótulo, las bolitas, los bordes, el logo. Solo cambia donde el naranja es un fondo lleno con texto blanco encima, que es donde estaba el problema. Se cambió por regla y no a ojo: los bloques que tienen `background:var(--orange)` Y `color:#fff` en la MISMA declaración. Fueron 26. */ --orange-solido:#C53D0F; /* 🔴 4-sep-2026 — EL HOVER TAMBIEN TIENE QUE PASAR. Hasta hoy el hover de los botones era #d94d1f: blanco encima da **4,17:1** y el piso es 4,5. O sea que el boton era accesible en reposo (#C53D0F, 5,19:1) y dejaba de serlo justo cuando el cliente lo apuntaba. Es la misma zona del defecto que Iara cazo el 20-ago ("las letras se ponen naranjas y queda feo"): ahi se arreglo el color del TEXTO y quedo sin mirar el del FONDO. #B83A0E da 5,75:1 y es un paso mas oscuro que el reposo, que es lo que un hover tiene que ser. */ --orange-hover:#B83A0E; --gray:#6B6B6B; --line:#E7E3DF; --ph:#EFEEEC; } *{margin:0;padding:0;box-sizing:border-box} html,body{background:#fff;color:var(--ink); font-family:var(--f-body,"Helvetica Neue",Arial,sans-serif);-webkit-font-smoothing:antialiased} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .pk-wrap{max-width:1280px;margin:0 auto;padding:0 48px} .pk-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15.5px; padding:15px 28px;border-radius:2px;transition:.2s;cursor:pointer;border:none;font-family:inherit} .pk-btn-primary{background:var(--orange-solido);color:#fff} .pk-btn-primary:hover{background:var(--orange-hover)} .pk-btn-ghost{border:1.6px solid #fff;color:#fff} .pk-btn-dark{border:1.6px solid var(--ink);color:var(--ink)} /* 🔴 CUÑA 27-sep-2026 (T1, auditoría "ojo humano") — "TURNO POR WHATSAPP" PARECÍA TEXTO GRIS. El verde solo existía como `.pg-cta .pk-btn-wa` (paginas.css): afuera de esa caja oscura el botón salía sin fondo ni borde, en gris, y en El Taller era justo el de pedir turno, al lado del naranja grande de Probotito. Vive acá, sin prefijo, para todo botón de WhatsApp CON TEXTO: el verde oscuro de la marca WhatsApp (blanco encima da 7,67:1); el claro #25D366 queda para el ícono redondo, donde es forma y no letra. */ .pk-btn-wa{background:#075E54;color:#fff} .pk-btn-wa:hover{background:#0A7A6D} .pk-btn-wa svg{width:19px;height:19px;flex-shrink:0} .pk-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.2em; text-transform:uppercase;color:var(--orange-txt);font-weight:700} .pk-eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);display:inline-block} /* 🔴 CUÑA 29-ago-2026 (segunda vuelta) — EL ARREGLO DEL NARANJA CHICO SE ROMPIÓ EN LAS FRANJAS OSCURAS. `--orange-txt` (#C53D0F) se hizo para que la letra chica naranja se lea SOBRE BLANCO, y ahí funciona (5,19:1). Pero se aplicó al rótulo `.pk-eyebrow` sin distinguir el fondo, y sobre el negro de la banda del Club da 3,81:1: peor que el naranja original, que sobre ese mismo negro da 5,31:1. O sea que arreglé el contraste en un lado y lo rompí en el otro, que es el mismo error de siempre: mover el defecto en vez de sacarlo. Adentro de las franjas oscuras el token vuelve a ser el naranja de marca. Se corrige el TOKEN en un solo lugar y no cada uso, así el próximo rótulo que se agregue ahí ya nace bien. */ .pk-club-band, .brandsec, .cp-hero, .cp-band, .tier.sworks{ --orange-txt: var(--orange); } /* topbar + util */ .pk-topbar{height:4px;background:var(--orange)} .pk-util{background:var(--char);color:#cfcfcf;font-size:12.5px;letter-spacing:.03em} /* 🔵 15-ago-2026 (Iara): la cinta de arriba va EN MOVIMIENTO. Es la que lleva las cuotas y el envío gratis, o sea la palanca de venta: quieta se lee una vez y desaparece. Se duplica el contenido por JS para que el loop no tenga corte visible. `prefers-reduced-motion` la deja quieta para quien pidió menos animación. */ /* 🔴 CUÑA 15-ago-2026 — la cinta VUELVE A ESTAR QUIETA (Iara: "dale"). Estuvo en movimiento unas horas. El salto que marcó era real (el `gap` de flex hace que la mitad del tren caiga medio espacio corrida y el loop pegue un tirón), pero la conclusión del estudio fue otra: con cuatro mensajes cortos entra todo sin moverse, y algo en movimiento permanente le compite la atención al hero, que es donde está la venta. En celular no entran los cuatro en una línea: se muestran los dos que más pesan (cuotas y envío) y los otros dos se ocultan, en vez de achicar la letra hasta que no se lea. */ .pk-util .pk-wrap{display:flex;justify-content:center;align-items:center;gap:26px; padding:9px 48px;overflow:hidden;white-space:nowrap} .pk-util b{color:#fff;font-weight:600}.pk-util .dot{color:var(--orange)} .pk-promo{display:none;background:var(--orange-solido);color:#fff;text-align:center; font-size:13.5px;font-weight:700;padding:9px 16px} .pk-promo.show{display:block} .pk-promo .z{margin-right:7px}.pk-promo b{font-weight:800} /* header */ .pk-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:40} .pk-nav{display:flex;align-items:center;justify-content:space-between;padding:17px 48px;max-width:1280px;margin:0 auto} .pk-brand{display:flex;align-items:center;gap:12px} .pk-brand .iso{height:34px;width:auto} .pk-brand .wm{height:19px;width:auto} .pk-menu{display:flex;gap:24px;font-weight:600;font-size:15px} .pk-menu > .item{position:relative} .pk-menu > .item > a{padding:22px 0;display:inline-block;border-bottom:2px solid transparent;white-space:nowrap} /* 29-ago: el ítem del menú donde estás parado va en 15 px sobre blanco; con el naranja de marca da 3,41:1 y no se lee bien. La rayita de abajo SÍ se queda con el naranja de marca: ahí no hay texto que leer, es una forma, y el piso de una forma es 3,0. */ .pk-menu > .item.on > a,.pk-menu > .item:hover > a{color:var(--orange-txt);border-color:var(--orange)} .pk-icons{display:flex;gap:21px;align-items:center} .pk-icons svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.7} .pk-icons a{display:flex} .pk-cart{position:relative} .pk-cart .b{position:absolute;top:-7px;right:-9px;background:var(--orange-solido);color:#fff;font-size:11px; font-weight:700;min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-style:normal} /* `display:flex` le gana a `[hidden]`, que es `display:none` de la hoja del navegador: sin esta línea el globito en cero se seguía viendo aunque el PHP lo marque escondido. */ .pk-cart .b[hidden]{display:none} .pk-burger{display:none;width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.8;cursor:pointer;background:none;border:none} /* mega-menu dropdown (sub-categorías reales) */ .pk-mega{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-top:2px solid var(--orange); min-width:230px;padding:14px 0;box-shadow:0 18px 40px rgba(0,0,0,.10);opacity:0;visibility:hidden;transform:translateY(6px); transition:.16s;z-index:50} /* 🔴 CUÑA 2-sep-2026: EL MEGA MENÚ SOLO ABRÍA CON EL MOUSE. Solo estaba `:hover`, y arriba de 1000 px no aparece el botón de hamburguesa. Consecuencia medida: las **29 subcategorías** del menú (Cascos, Cubiertas, Nutrición, Ruedas, Transmisión…) eran inalcanzables con el TECLADO —quien navega con Tab pasa por el título de sección y el desplegable nunca se abre— y con el DEDO en una tablet horizontal, que no tiene hover. Se agrega `:focus-within`: cuando el foco entra en la sección (con Tab), el desplegable se abre igual que con el mouse, y sus links entran en el orden natural de tabulación. Es una línea y no toca nada de lo que ya funciona: el hover sigue siendo el hover. */ .pk-menu > .item:hover .pk-mega, .pk-menu > .item:focus-within .pk-mega{opacity:1;visibility:visible;transform:translateY(0)} .pk-mega a{display:block;padding:8px 22px;font-size:14px;font-weight:500;color:#3a3a3a;white-space:nowrap} .pk-mega a:hover{color:var(--orange);background:var(--cream)} /* search overlay */ /* 🔴 CUÑA 1-sep-2026 — EL BUSCADOR ESTABA ESCONDIDO ATRÁS DE UNA LUPA, en compu y en celular. Está medido: el 35% de los e-commerce esconde el campo de búsqueda por defecto, y en las pruebas de Baymard eso produce "disorientation or severe frustration" — hay gente que toca la lupa esperando que BUSQUE y se queda 40 segundos sin entender. Es además el R3 de Iara: tener que buscar lo que debería estar a la vista. Y sin campo visible, el autocompletado que se construyó el mismo día no lo ve nadie. Ahora el campo está siempre; la lupa quedó, pero lleva el foco al campo (un botón que no hace nada visible es el R1). */ .pk-searchbar{display:block;border-bottom:1px solid var(--line);background:#fff} .pk-searchbar form{max-width:1280px;margin:0 auto;padding:2px 48px 14px;display:flex;gap:12px;align-items:center} /* 🔴 29-ago-2026: el campo no tenía borde, ni fondo, ni radio — se leía como un texto suelto y no como algo donde escribir, y el placeholder largo salía cortado a los 248 px del celular. Ahora tiene caja. El texto sigue grande porque es el buscador, no un campo de formulario. */ .pk-searchbar input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:4px;font-size:20px;font-weight:600;padding:10px 14px;outline:none;font-family:inherit;color:var(--ink)} .pk-searchbar input:focus{border-color:var(--orange)} .pk-searchbar input::placeholder{color:#c2bcb6} .pk-searchbar button{background:var(--orange-solido);color:#fff;border:none;padding:12px 24px;border-radius:2px;font-weight:700;cursor:pointer;font-family:inherit} /* footer */ .pk-footer{background:#0A0A0A;color:#9a9a9a;padding:62px 0 28px} /* 🔴 CUÑA 29-ago-2026 — ZONA SEGURA DEL PIE. Los dos flotantes (Probotito a la izquierda, WhatsApp a la derecha) viven a 22 px del fondo de la VENTANA, así que al final de la página se sientan encima del último renglón y no hay scroll que los corra: el "© 2026 Probikes · Vendemos bicis, cambiamos vidas" quedaba tapado en TODAS las páginas. Se le reserva abajo el alto del flotante y el renglón se lee siempre. */ .pk-footer{padding-bottom:calc(28px + 78px)} .pk-footer .bot{padding-left:78px;padding-right:78px} .pk-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:38px;padding-bottom:44px;border-bottom:1px solid #222} .pk-footer .flock{display:flex;align-items:center;gap:11px;margin-bottom:16px} .pk-footer .flock .i{height:30px}.pk-footer .flock .w{height:17px} .pk-footer .cols p{font-size:14px;line-height:1.6;max-width:280px} .pk-footer h3,.pk-footer h4{color:#fff;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:15px;font-weight:700} .pk-footer ul{list-style:none}.pk-footer li{margin-bottom:10px;font-size:14.5px} .pk-footer li a:hover{color:var(--orange-txt)} .pk-footer .bot{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:13px} .pk-footer .bot .pay{color:#c0c0c0} /* Data Fiscal (F960/D). La imagen es la oficial de ARCA y no se puede alterar: solo se escala. Va en la columna 1 del footer; en la fila de abajo la tapaba el WhatsApp flotante. */ .pk-footer .pk-fiscal-txt{margin-top:14px;font-size:12.5px;line-height:1.6;color:#c0c0c0} .pk-footer .pk-datafiscal{display:inline-flex;line-height:0;margin-top:12px} .pk-footer .pk-datafiscal img{height:62px;width:auto;display:block} /* newsletter (banda sobre el footer, sitewide) */ .pk-nl{background:var(--cream);border-top:1px solid var(--line)} .pk-nl .pk-wrap{display:flex;align-items:center;justify-content:space-between;gap:36px;padding:44px 48px;flex-wrap:wrap} .pk-nl h3,.pk-nl .pk-nl-h{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:12px 0 6px} .pk-nl p{font-size:14.5px;color:#555;max-width:440px;line-height:1.55} /* 🔴 CUÑA 15-ago-2026 — el segundo culpable del scroll horizontal, y el más tramposo porque solo aparecía en una franja angosta (~500 a 660 px): con `flex:1` la base del form es 0, así que en vez de bajar a su propio renglón se dejaba apretar contra el texto de la izquierda… y adentro el input tiene `min-width:180px`, que no achica. Resultado: el input se salía de la página, +100 px a 560. Con la base en 300 px el form BAJA cuando no entra al lado del texto, que es lo que tenía que hacer desde el principio. `min-width` no alcanzaba: en el móvil está pisado en 0 (para el 320). */ .pk-nl form.r{display:flex;gap:10px;align-items:center;flex-wrap:wrap;flex:1 1 300px;min-width:300px;max-width:520px;position:relative} .pk-nl input{flex:1;min-width:180px;border:1px solid var(--line);background:#fff;border-radius:3px; padding:15px 16px;font-size:15px;font-family:inherit;outline:none;color:var(--ink)} .pk-nl input:focus{border-color:var(--orange)} .pk-nl button{background:var(--orange-solido);color:#fff;border:none;border-radius:3px;padding:15px 26px; font-weight:700;font-size:15px;cursor:pointer;font-family:inherit} .pk-nl button:hover{background:var(--orange-hover)} .pk-nl button:disabled{opacity:.6;cursor:default} .pk-nl .nl-msg{flex-basis:100%;font-size:13.5px;font-weight:600;min-height:1px} .pk-nl .nl-msg.ok{color:#1a7f37}.pk-nl .nl-msg.err{color:#c0392b} /* botón WhatsApp flotante (sitewide) */ .pk-wafloat{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%; background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;z-index:80; box-shadow:0 8px 24px rgba(37,211,102,.42);transition:transform .18s,box-shadow .18s} .pk-wafloat svg{width:34px;height:34px} .pk-wafloat:hover{transform:scale(1.07);box-shadow:0 10px 30px rgba(37,211,102,.55);color:#fff} /* ---- Probotito: asistente/chatbot flotante (sitewide, abajo-izquierda) ---- */ .pk-bot{position:fixed;left:22px;bottom:22px;z-index:80} .pk-bot-launch{display:flex;align-items:center;gap:10px;background:var(--orange-solido);color:#fff;border:none; border-radius:40px;padding:11px 20px 11px 12px;cursor:pointer;font-family:inherit;font-weight:800;font-size:15px; box-shadow:0 8px 24px rgba(239,90,40,.42);transition:transform .18s,box-shadow .18s} .pk-bot-launch:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(239,90,40,.55)} /* 🔴 CUÑA 29-ago-2026 — EL FLOTANTE NO PUEDE TAPAR NADA QUE SE TOQUE (R1 de Iara: "un botón que no hace nada"; acá era peor: un botón que SÍ hace algo y no se puede apretar). Medido con `_ux_medir.cjs`: la pastilla de Probotito (143x60, abajo a la izquierda) tapaba el enlace "Conocé el Club →" de la home, la frase de Rami de la banda LA CASA y el © del pie. La pastilla con la palabra "Probotito" existe para que se entienda QUÉ es — así que se queda en la primera pantalla, que es donde el visitante lo ve por primera vez, y a partir del primer scroll se achica al círculo de 56 px, igual que el de WhatsApp. Se gana la presentación y se pierde la mancha. La clase la pone `main.js` al pasar los 120 px. */ .pk-bot-launch .lbl{max-width:120px;overflow:hidden;white-space:nowrap;transition:max-width .22s ease,opacity .18s ease,margin .22s ease} /* 🔴 CUÑA 27-sep-2026 (Iara: "el logo de probotito está tirado hacia la izquierda y no está centrado dentro de su círculo"). Medido por píxeles: -5 px en compu y tablet, en TODO círculo (home al scrollear, ficha, categoría, chat abierto); 0 en celular, donde la etiqueta es display:none. La causa era el `gap:10px` de la pastilla: en el círculo la etiqueta queda en ancho 0 pero sigue siendo un hijo del flex, así que el hueco seguía ahí (34+10 = 44 px centrados en 56 → el robot arrancaba 5 px antes). En el círculo no hay hueco. Candado: `node qa_probotito_widget.cjs --solo logo` (con --romper corre el logo 4 px y caza). */ .pk-bot.mini .pk-bot-launch{padding:0;gap:0;width:56px;height:56px;justify-content:center;border-radius:50%} .pk-bot.mini .pk-bot-launch .lbl{max-width:0;opacity:0;margin:0} .pk-bot.mini .pk-bot-launch .av{width:34px;height:34px;background:transparent} .pk-bot.open .pk-bot-launch{padding:0;gap:0;width:56px;height:56px;justify-content:center;border-radius:50%} .pk-bot.open .pk-bot-launch .lbl{max-width:0;opacity:0;margin:0} .pk-bot-launch .av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0} .pk-bot .av svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.7} .pk-bot-panel{position:absolute;left:0;bottom:calc(100% + 14px);width:360px;max-width:calc(100vw - 44px); display:flex;flex-direction:column;max-height:min(76vh,620px); background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.22); overflow:hidden;opacity:0;visibility:hidden;transform:translateY(10px);transition:.18s;transform-origin:bottom left} .pk-bot.open .pk-bot-panel{opacity:1;visibility:visible;transform:translateY(0)} .pk-bot-head{display:flex;align-items:center;gap:11px;background:var(--char);color:#fff;padding:15px 16px} .pk-bot-head .av{width:40px;height:40px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;flex-shrink:0} .pk-bot-head .who{flex:1;line-height:1.25} .pk-bot-head .who b{font-size:15.5px;font-weight:800;display:block} .pk-bot-head .who span{font-size:12px;color:#9fd6a8} .pk-bot-head .x{background:none;border:none;color:#cfcfcf;font-size:26px;line-height:1;cursor:pointer;padding:0 2px} .pk-bot-head .x:hover{color:#fff} .pk-bot-msgs{padding:18px 16px 12px;display:flex;flex-direction:column;gap:12px;max-height:56vh;min-height:180px;overflow-y:auto;overscroll-behavior:contain} .pk-bot-msgs .msg{max-width:88%;border-radius:14px;padding:12px 15px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word} .pk-bot-msgs .msg.bot{background:var(--cream);color:#333;border-radius:4px 14px 14px 14px;align-self:flex-start} .pk-bot-msgs .msg.user{background:var(--orange-solido);color:#fff;border-radius:14px 14px 4px 14px;align-self:flex-end} .pk-bot-msgs .msg a{color:inherit;text-decoration:underline;font-weight:700} .pk-bot-msgs .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px} /* 🔴 CUÑA 2-sep-2026: el naranja de marca como TEXTO sobre blanco da 3,41:1 y el piso legible es 4,5 — es el cálculo que hizo nacer `--orange-txt` el 29-ago (#C53D0F, 5,19:1). Estas cuatro sugerencias del chat son texto de 13,5 px sobre fondo blanco, o sea el caso exacto. El BORDE sigue con el naranja de siempre (un borde no se lee, se ve) y al pasar el mouse el fondo se pinta de naranja con texto blanco, que es la otra decisión, la que sigue esperando a Iara. */ .pk-bot-msgs .chips button{border:1.4px solid var(--orange);background:none;color:var(--orange-txt);border-radius:40px; padding:8px 15px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s} /* solo con mouse: en el celular el :hover se queda pegado en la sugerencia que quedó bajo el dedo después de "Empezar de nuevo" (visto en la captura del 27-sep) */ @media (hover:hover){.pk-bot-msgs .chips button:hover{background:var(--orange-solido);color:#fff}} /* 27-sep-2026 (I6): las sugerencias ahora son la pregunta entera y nombran lo que la persona miró ("Qué talle de la Sirrus X 3.0 me va?"), no una etiqueta de dos palabras. Van una debajo de la otra y alineadas a la izquierda: una píldora de 40 px de radio partida en dos renglones se deforma. */ .pk-bot-msgs .chips{flex-direction:column;align-items:flex-start} .pk-bot-msgs .chips button{text-align:left;border-radius:16px;line-height:1.35;max-width:100%} /* I11: "Empezar de nuevo", arriba del campo. Sale recién cuando hay una charla que limpiar. */ .pk-bot-tools{display:flex;justify-content:flex-end;padding:0 10px;background:#fff} .pk-bot-tools[hidden]{display:none} .pk-bot-tools button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 6px;border:none;background:none; color:var(--gray);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer} .pk-bot-tools button:hover{color:var(--char);text-decoration:underline} .pk-bot-tools svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pk-bot-msgs .typing{display:inline-flex;gap:4px;align-items:center} .pk-bot-msgs .typing i{width:7px;height:7px;border-radius:50%;background:var(--gray);opacity:.5;animation:pkblink 1s infinite} .pk-bot-msgs .typing i:nth-child(2){animation-delay:.2s}.pk-bot-msgs .typing i:nth-child(3){animation-delay:.4s} @keyframes pkblink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}} @media (prefers-reduced-motion:reduce){.pk-bot-msgs .typing i{animation:none;opacity:.6}} .pk-bot-form input[readonly]{background:var(--cream)} .pk-bot-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:#fff} .pk-bot-form input{flex:1;border:1.4px solid var(--line);border-radius:40px;padding:11px 15px;font-size:14px;font-family:inherit;outline:none;transition:.15s} .pk-bot-form input:focus{border-color:var(--orange)} .pk-bot-form button{flex-shrink:0;width:42px;height:42px;border:none;border-radius:50%;background:var(--orange-solido);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s} .pk-bot-form button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(239,90,40,.4)} .pk-bot-form button:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none} .pk-bot-form button svg{width:20px;height:20px;fill:currentColor} /* El descargo del asistente: tiene que LEERSE, no esconderse. 11.5px sobre crema y no 9px gris sobre blanco — un descargo ilegible no protege a nadie (ver footer.php). */ .pk-bot-legal{margin:0;padding:8px 16px 10px;background:var(--cream);border-top:1px solid var(--line); font-size:11.5px;line-height:1.45;color:#5c5c5c;text-align:center} /* WooCommerce store-notice / misc resets so default styles don't leak */ .woocommerce-store-notice,p.demo_store{display:none!important} @media (max-width:760px){ .pk-wrap{padding:0 20px} /* Celular: los cuatro mensajes no entran en una línea. Quedan los dos que más pesan (cuotas y envío gratis) en vez de achicar la letra hasta que no se lea. */ .pk-util .pk-wrap{gap:16px;padding:8px 14px;font-size:11.5px;flex-wrap:nowrap;justify-content:center} .pk-util .dot{display:none} .pk-util .solo-ancho{display:none} .pk-nav{padding:13px 20px} .pk-brand .iso{height:28px}.pk-brand .wm{height:15px} .pk-icons{gap:16px} .pk-searchbar form{padding:14px 20px} .pk-searchbar input{font-size:16px} .pk-footer{padding:48px 0 24px} .pk-footer .cols{grid-template-columns:1fr 1fr;gap:30px 24px} .pk-footer .cols > div:first-child{grid-column:1 / -1} .pk-footer .bot{flex-direction:column;gap:10px;align-items:flex-start;padding-left:0;padding-right:0} .pk-footer{padding-bottom:calc(24px + 76px)} .pk-nl .pk-wrap{padding:34px 20px;gap:20px} .pk-nl form.r{min-width:0;max-width:none;width:100%} .pk-nl h3,.pk-nl .pk-nl-h{font-size:22px} .pk-wafloat{right:16px;bottom:16px;width:52px;height:52px} .pk-wafloat svg{width:30px;height:30px} .pk-bot{left:16px;bottom:16px} .pk-bot-launch{padding:0;width:52px;height:52px;justify-content:center;border-radius:50%} .pk-bot-launch .lbl{display:none} .pk-bot-launch .av{width:32px;height:32px;background:transparent} /* 🔴 CUÑA 29-ago-2026 — EL CHAT EN EL CELULAR. Medido en 390 px: el panel usaba 300 px y dejaba 74 sin usar; el campo de escribir iba en 14 px (Safari agranda la página sola al tocarlo y no vuelve); y la ✕ para cerrar medía 19×26, muy por debajo de los 44 px del dedo — y es la única forma de salir del chat. */ .pk-bot-panel{width:calc(100vw - 32px);max-width:400px} .pk-bot-form input{font-size:16px} .pk-bot-head .x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;margin-right:-8px} .pk-bot-tools button{min-height:44px} /* el dedo, igual que la ✕ (27-sep-2026, I11) */ /* 🔴 CUÑA 7-sep-2026 — LA REGLA DE LOS 16px NUNCA HABÍA LLEGADO AL CHECKOUT. Estaba puesta para el buscador (.pk-searchbar) y para el chat (.pk-bot-form) desde el 29-ago, y los campos de WooCommerce se quedaron afuera. Medido hoy en 390px con el carrito CARGADO: **23 de 25 campos a 14,5px**, incluidos nombre, apellido, DNI/CUIT y el cupón. Safari de iPhone agranda la página sola al tocar cualquier campo por debajo de 16px, y no vuelve: pasa justo en el paso donde se dejan los datos de una compra de millones, sobre una decisión ya tomada. ⚠️ Y por qué no se había visto: midiendo con el CARRITO VACÍO el checkout redirige a /carrito/, que tiene 2 campos y los dos pasan. Daba "0 campos chicos" y era un falso verde. El checkout solo se puede medir con algo adentro. Va por selector de Woo (no un `input` global) para no tocar los filtros ni el resto del sitio. */ /* Los campos de `.form-row` los arregla la regla del origen (más abajo, buscar la cuña del 7-sep). Esto cubre los que NO son form-row y por eso se escapaban: el login de arriba del checkout, el cupón, y la calculadora de envío del carrito. */ .woocommerce-checkout input[type=text], .woocommerce-checkout input[type=email], .woocommerce-checkout input[type=tel], .woocommerce-checkout input[type=password], .woocommerce-checkout input[type=number], .woocommerce-checkout select, .woocommerce-checkout textarea, .woocommerce-cart input[type=text], .woocommerce-cart input[type=number], .woocommerce-cart select, .woocommerce-account input[type=text], .woocommerce-account input[type=email], .woocommerce-account input[type=password]{font-size:16px} } /* ============ fixes auditoría 9-jul ============ */ /* drawer del menú mobile */ body.pk-noscroll{overflow:hidden} /* 🔴 CUÑA 15-ago-2026 (auditoría independiente) — SCROLL HORIZONTAL EN TODAS LAS PÁGINAS. El header pasaba a burger a los 760 px, pero el menú de escritorio ENTERO (logo + 6 secciones con `white-space:nowrap` + los iconos + 48 px de padding a cada lado) necesita ~960 px. O sea que entre 761 y 959 px se dibujaba un header que no entraba y la página se iba de costado: medido, +180 px a 780, +140 a 820, +60 a 900. Pasaba en LAS SEIS páginas que se probaron, y venía de antes de esta tanda. El corte no va donde queda lindo el número redondo: va donde el contenido DEJA de entrar. Por eso el burger ahora aparece a los 1000 px, y entre 1001 y 1180 el menú se aprieta un poco (menos gap, menos padding) para que quede margen real y no se vuelva a romper si Rami da de alta una categoría más. El barrido de anchos que lo mide vive en `chequear_ancho.cjs`. */ @media (min-width:1001px) and (max-width:1180px){ .pk-nav{padding:17px 26px} .pk-menu{gap:15px;font-size:14px} .pk-icons{gap:16px} } @media (max-width:1000px){ .pk-menu{display:none} .pk-burger{display:block} } @media (max-width:1000px){ .pk-menu.open{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0; background:#fff;padding:84px 26px 26px;gap:2px;z-index:60;overflow-y:auto} .pk-menu.open > .item > a{display:block;padding:15px 0;font-size:18px;border-bottom:1px solid var(--line);width:100%} .pk-menu.open .pk-mega{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none; padding:0 0 8px 14px;min-width:0} .pk-menu.open .pk-mega a{padding:7px 0;font-size:14.5px} .pk-menu.open::before{content:"Menú";position:absolute;top:26px;left:26px;font-size:13px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--gray)} .pk-header .pk-burger{position:relative;z-index:61} /* 🔴 29-ago-2026: con el menú abierto, el único modo de salir era volver a tocar el mismo ícono ☰, que seguía siendo una hamburguesa. Nadie lee una hamburguesa como "cerrar". Se convierte en una ✕, que es lo que todo el mundo ya sabe apretar. (El área táctil de 44 px se la da la regla de arriba, la de `.pk-burger::after`.) */ body.pk-menu-abierto .pk-burger svg line{transition:transform .2s ease,opacity .15s ease;transform-origin:12px 12px} body.pk-menu-abierto .pk-burger svg line:nth-child(1){transform:translateY(5.5px) rotate(45deg)} body.pk-menu-abierto .pk-burger svg line:nth-child(2){opacity:0} body.pk-menu-abierto .pk-burger svg line:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} } /* 🟠 A4 · 14-oct-2026 — EL MENÚ DEL CELU EN ACORDEÓN. Abría con las 7 secciones y todos sus hijos desplegados: 1.771 px de cajón, Nutrición a 1.295 px del tope (una pantalla y media de dedo) y los hijos de 31 px de alto, debajo del piso de 44 del dedo. Ahora se ven las 7 cabeceras; la cabecera lleva a su góndola y la flecha de la derecha (44 px) abre los hijos, que miden 44 px. En la compu nada cambia (el botón no se dibuja). Candado: qa_menu.cjs. */ .pk-acc{display:none} @media (max-width:1000px){ .pk-menu.open > .item{position:relative} .pk-menu.open > .item:has(.pk-acc) > a{padding-right:52px} .pk-menu.open .pk-acc{display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:-10px; width:52px;height:52px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer} .pk-menu.open .pk-acc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round; stroke-linejoin:round;transition:transform .2s ease} .pk-menu.open .pk-acc[aria-expanded="true"] svg{transform:rotate(180deg)} .pk-menu.open .pk-mega{display:none} .pk-menu.open .item.abierto .pk-mega{display:block} .pk-menu.open .pk-mega a{display:flex;align-items:center;min-height:44px;padding:0} } /* M1 (27-sep-2026): el taller arriba y "la casa" al final, SOLO adentro del cajón del celular. En compu el ítem "Taller" ya está a la vista en la barra, y la tienda y los pagos en la cinta. */ .pk-menu-taller,.pk-menu-casa{display:none} @media (max-width:1000px){ .pk-menu.open .pk-menu-taller{display:flex;gap:10px;margin:0 0 16px} .pk-menu.open .pk-menu-taller .pk-btn{flex:1;padding:13px 10px;font-size:15px} .pk-menu.open .pk-menu-casa{display:flex;flex-direction:column;margin-top:10px} .pk-menu.open .pk-menu-casa a{display:block;padding:12px 0;font-size:16px;font-weight:600;color:var(--ink)} .pk-menu.open .pk-menu-casa a span{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--gray)} } /* «Mis compras» (16-oct-2026, Iara: "una pestaña que diga mis compras"): compu = link con texto junto a los íconos; celu = el ícono de la persona lleva a Mis compras y el cajón trae el mismo link primero. */ /* 16-oct, 2ª vuelta: el link con texto al lado empujaba el menú (PROBIKES pegado a Bicicletas, la lupa pegada a Comparar). Ahora el rótulo va DEBAJO del ícono de la persona, chico, como «Cuenta» en Nike/Amazon. */ .pk-icons .pk-cuenta{flex-direction:column;align-items:center;gap:3px} .pk-icons .pk-cuenta-txt{font-size:11px;font-weight:700;line-height:1;color:var(--ink);white-space:nowrap} .pk-icons .pk-cuenta:hover .pk-cuenta-txt{color:var(--orange-txt)} .pk-menu-compras{display:none} @media (max-width:1000px){ .pk-icons .pk-cuenta-txt{display:none} .pk-menu.open .pk-menu-compras{display:block;padding:12px 0 14px;margin:0 0 14px;border-bottom:1px solid var(--line);font-size:17px;font-weight:800;color:var(--ink)} .pk-menu.open .pk-menu-compras span{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--gray)} } /* skin Probikes para las páginas de WooCommerce (carrito / checkout / mi cuenta) */ .woocommerce-page-wrap{max-width:1120px;margin:0 auto;padding:30px 48px 70px;min-height:45vh} .woocommerce-page-wrap h1.pk-wootitle{font-size:34px;font-weight:800;letter-spacing:-.025em;margin:14px 0 26px} .woocommerce button.button,.woocommerce a.button,.woocommerce .button[type=submit], .woocommerce #place_order,.woocommerce input.button{ background:var(--orange-solido)!important;color:#fff!important;border:none!important;border-radius:3px!important; font-weight:700!important;padding:14px 26px!important;font-size:15px!important;font-family:inherit!important;cursor:pointer} .woocommerce a.button.alt:hover,.woocommerce button.button:hover{background:var(--orange-hover)!important} .woocommerce table.shop_table{border:1px solid var(--line)!important;border-radius:6px;border-collapse:separate;font-size:14.5px} .woocommerce table.shop_table th{font-weight:800;color:var(--ink)} /* 🔴 CUÑA 7-sep-2026 — ESTE 14,5px ERA EL QUE HACÍA ZOOMEAR A SAFARI EN EL CHECKOUT. Medido en 390px con el carrito CARGADO: 23 de 25 campos por debajo de 16px (nombre, apellido, DNI/CUIT, cupón). Safari de iPhone agranda la página sola al tocar un campo de menos de 16px y NO vuelve — en el paso donde se dejan los datos de una compra ya decidida. La regla de los 16px existía desde el 29-ago pero solo para el buscador y el chat; los campos de Woo se quedaron afuera y el informe del 29-ago lo dio por cerrado. ⚠️ Se arregla ACÁ, en el origen, y no con un override más abajo: el primer intento fue agregar una regla en el bloque de celular y no tomó, porque ESTA viene después y con la misma especificidad. Pelear especificidad deja dos reglas discutiendo; corregir el origen deja una. ⚠️ Y por qué no se había visto antes: con el carrito VACÍO el checkout redirige a /carrito/, que tiene 2 campos y los dos pasan. Da "0 campos chicos" y es un falso verde. */ .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{ border:1px solid var(--line);border-radius:4px;padding:12px;font-family:inherit;font-size:16px} /* El desplegable de PAÍS no se arregla con la regla de arriba: WooCommerce le pone `.woocommerce form .form-row .country_to_state--single{font-size:inherit}`, que gana por venir de su hoja y con más especificidad. No hace falta pelearla: como dice `inherit`, alcanza con que el padre valga 16. Se le da al wrapper, que es el padre directo del select. (Cómo se encontró: `CSS.getMatchedStylesForNode` por CDP, que dice qué regla gana de verdad; leer el CSS a ojo me tenía buscando un "15px" que no estaba en el tema.) */ .woocommerce form .form-row .woocommerce-input-wrapper{font-size:16px} /* 🔴 CUÑA 29-ago-2026 — LOS AVISOS DE WOOCOMMERCE SEGUÍAN CON SU CARA DE FÁBRICA. Medido: el "Tu carrito está vacío" venía en `rgb(246,245,248)` (un gris frío que no existe en la paleta de Probikes, que es beige tibio) con un ícono en `rgb(30,133,190)` — un AZUL que no existe en la marca — y los desplegables de "¿Ya tenés cuenta?" y del cupón, iguales. En pantalla se veían como rectangulitos azules rotos al costado del texto, justo en el camino de compra. Se visten con el sistema del sitio. El de "lo agregaste al carrito" ya tenía su cuña (abajo) y se respeta. */ .woocommerce .woocommerce-info,.woocommerce .woocommerce-error,.woocommerce .cart-empty{ background:var(--cream);border:1px solid var(--line);border-top:2px solid var(--orange); border-radius:8px;padding:14px 18px;margin:0 0 18px;font-size:14.5px;color:#3a3a3a;line-height:1.5;list-style:none} .woocommerce .woocommerce-error{border-top-color:#c8482a;background:#fdf1ee;border-color:#f0d5cd;color:#8a2f18} .woocommerce .woocommerce-info::before,.woocommerce .woocommerce-error::before,.woocommerce .cart-empty::before{ display:none} /* el ícono azul de la tipografía de WooCommerce */ .woocommerce .woocommerce-info a,.woocommerce .cart-empty a{color:var(--orange);font-weight:700;text-decoration:underline} .woocommerce .cart-empty{font-size:16px;font-weight:600;text-align:center;padding:26px 18px} .woocommerce .return-to-shop{text-align:center;margin-top:14px} /* ── EL AVISO DE "LO AGREGASTE AL CARRITO" ──────────────────────────────────── 🔴 CUÑA 20-ago-2026. Iara, con captura: "El cartel de 'producto agregado al carrito' queda horrible y tapado por el botón 'Ver carrito'." Reproducido e inspeccionado: eran DOS cosas. ① El botón viene de WooCommerce como `display:inline` con `padding:14px 26px`. Un elemento en línea NO agranda su renglón cuando le ponés relleno vertical: el fondo naranja se DERRAMA hacia arriba y hacia abajo y se come el texto de al lado. Por eso el cartel decía "S…e de cadena Muc-Off" con el principio de la frase abajo del botón. ② El recuadro azul alrededor no era un borde nuestro: WooCommerce le pone `tabindex="-1"` al aviso y le da el foco, así que el navegador pintaba su anillo de foco por defecto (azul #005FCC). Sacarlo a secas dejaría a quien navega con teclado sin saber dónde está, así que se reemplaza por un anillo verde propio y solo cuando el foco vino del teclado. El aviso pasa a ser una fila: tilde, texto, y el botón al final, cada uno en su lugar. */ /* Grid y no flex: el texto del aviso es un nodo suelto (no viene envuelto en ningún tag), así que con flex se convertía en un item que se llevaba el renglón entero y el cartel salía en tres pisos. En grid cada uno cae en su celda: tilde | texto | botón. */ .woocommerce .woocommerce-message{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 14px; background:#eef6f0;border:1px solid #cfe6d8;border-top-color:#cfe6d8;color:#22694a; border-radius:8px;padding:14px 16px;margin:0 0 18px;list-style:none;line-height:1.45;font-weight:600} @media (max-width:520px){ .woocommerce .woocommerce-message{grid-template-columns:auto minmax(0,1fr)} .woocommerce .woocommerce-message > a.button{grid-column:2;justify-self:start} } .woocommerce .woocommerce-message::before{ content:"✓";flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#2f7d4f;color:#fff; font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center; position:static;margin:0;padding:0;line-height:1} .woocommerce .woocommerce-message{outline:none} .woocommerce .woocommerce-message:focus-visible{outline:2px solid #2f7d4f;outline-offset:2px} /* el texto se queda con el espacio que sobra y el botón nunca se le encima */ .woocommerce .woocommerce-message > a.button{ justify-self:end; display:inline-flex!important;align-items:center;justify-content:center; background:var(--ink)!important;color:#fff!important;border:none;border-radius:100px; padding:9px 20px!important;font-size:14px!important;font-weight:700;white-space:nowrap} .woocommerce .woocommerce-message > a.button:hover{background:#000!important;color:#fff!important} .woocommerce a{color:var(--ink)} .woocommerce a:hover{color:var(--orange)} /* 🔴 CUÑA 20-ago-2026. Iara: "El hover de 'Agregar al carrito': las letras se ponen naranjas y queda feo." Medido con el inspector: el botón es un , así que le pegaban las dos reglas de arriba —el skin de WooCommerce— que tienen MÁS especificidad que `.pk-btn-primary` (una clase + un elemento contra una clase sola). Resultado: texto negro sobre naranja en reposo (no blanco, como está diseñado) y, en hover, texto naranja #EF5A28 sobre fondo naranja #D94D1F: el botón más importante de la ficha se volvía ilegible justo cuando el cliente lo apuntaba. Un botón no es un link de catálogo: acá se le devuelve su color en los cuatro estados. */ .woocommerce a.pk-btn-primary,.pk-btn.pk-btn-primary, .woocommerce a.pk-btn-primary:hover,.pk-btn.pk-btn-primary:hover, .woocommerce a.pk-btn-primary:focus,.pk-btn.pk-btn-primary:focus, .woocommerce a.pk-btn-primary:active,.pk-btn.pk-btn-primary:active{color:#fff} .woocommerce a.pk-btn-dark,.pk-btn.pk-btn-dark, .woocommerce a.pk-btn-dark:hover,.pk-btn.pk-btn-dark:hover{color:var(--ink)} /* y el hover del oscuro, que hasta hoy no tenía ninguno: se rellena, no se despinta */ .pk-btn.pk-btn-dark:hover,.woocommerce a.pk-btn-dark:hover{background:var(--ink);color:#fff} /* el verde de WhatsApp, igual: el skin de Woo no le pinta la letra (27-sep-2026, T1) */ .woocommerce a.pk-btn-wa,.pk-btn.pk-btn-wa, .woocommerce a.pk-btn-wa:hover,.pk-btn.pk-btn-wa:hover, .woocommerce a.pk-btn-wa:focus,.pk-btn.pk-btn-wa:focus{color:#fff} /* 🔴 CUÑA 15-ago-2026 — el footer se volvía ilegible en las páginas de TIENDA. WooCommerce agrega la clase `.woocommerce` al BODY, así que la regla de arriba pintaba de --ink (#161616) TODOS los links de la página… incluidos los del footer, que vive sobre #0A0A0A: texto casi negro sobre fondo casi negro. Por eso Iara lo vio "todo gris" recién al entrar a una categoría (Equipamiento del ciclista) y no en las páginas comunes: el bug solo existía donde WooCommerce manda. Se reponen los colores propios del footer con más especificidad. */ body.woocommerce .pk-footer a{color:#9a9a9a} body.woocommerce .pk-footer a:hover{color:var(--orange)} body.woocommerce .pk-footer h4{color:#fff} @media (max-width:760px){ .woocommerce-page-wrap{padding:20px 20px 50px} } /* ---- Mi cuenta: menú lateral como menú de verdad (no bullets) ---- */ .woocommerce-account .woocommerce-MyAccount-navigation{width:24%;float:left} .woocommerce-account .woocommerce-MyAccount-content{width:72%;float:right} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0; border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff} .woocommerce-account .woocommerce-MyAccount-navigation li{margin:0} .woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block;padding:13px 18px;font-size:14.5px;font-weight:600;color:var(--ink); border-bottom:1px solid var(--line);border-left:3px solid transparent;transition:background .12s ease,color .12s ease,border-color .12s ease} .woocommerce-account .woocommerce-MyAccount-navigation li:last-child a{border-bottom:none} .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{background:var(--cream);color:var(--orange)} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--cream);color:var(--orange);border-left-color:var(--orange)} @media (max-width:760px){ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none} .woocommerce-account .woocommerce-MyAccount-content{margin-top:22px} } /* ============ 404 — la pantalla de quien ya está perdido (29-ago-2026) ============ */ .pk-404{padding:96px 0 110px} .pk-404 .eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:14px} .pk-404 h1{font-size:clamp(34px,5vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:16px} .pk-404 .bajada{font-size:17px;line-height:1.6;color:var(--gray);max-width:560px;margin-bottom:30px} .pk-404 .bajada a{color:var(--orange-txt);text-decoration:underline;font-weight:600} .pk-404 .b404{display:flex;gap:10px;max-width:560px;margin-bottom:34px} .pk-404 .b404 input{flex:1;min-width:0;border:1px solid var(--line);border-radius:4px;padding:14px 16px;font-family:inherit;font-size:15px;color:var(--ink)} .pk-404 .b404 input:focus{outline:none;border-color:var(--orange)} .pk-404 .b404 button{background:var(--orange-solido);color:#fff;border:none;border-radius:4px;padding:14px 26px;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer} .pk-404 .b404 button:hover{background:#d94d1e} .pk-404 .p404{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:820px;margin-bottom:32px} .pk-404 .p404 a{border:1px solid var(--line);border-radius:4px;padding:16px 18px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:10px} .pk-404 .p404 a span{color:var(--orange-txt)} .pk-404 .p404 a:hover{border-color:var(--ink)} .pk-404 .ayuda404{font-size:15px;color:var(--gray)} .pk-404 .ayuda404 a{color:var(--orange-txt);text-decoration:underline} @media (max-width:900px){ .pk-404{padding:56px 0 70px} .pk-404 .b404{flex-direction:column} .pk-404 .b404 button{width:100%} .pk-404 .p404{grid-template-columns:1fr 1fr} } /* ══════════════════════════════════════════════════════════════════════════════════════════ LOS FLOTANTES EN EL CELULAR — 29-ago-2026 Auditoría móvil (390×844, contexto táctil real). Lo medido: · En TODA ficha de producto, la pastilla de Probotito (x 16-68, y 776-828) se paraba encima del PRECIO de la barra fija de compra: de "$ 5.990.000" se leía "…0.000". · El círculo de WhatsApp (x 322-374) pisaba 52 px del botón "Agregar al carrito" (x 108-374) y GANABA el toque: el dedo en el borde derecho del botón de comprar abría WhatsApp. · Con el menú hamburguesa abierto los dos flotantes quedaban ARRIBA del menú (z-index 80 vs 60) y se comían "Hidratación" entera, "Infladores" y "Computadoras y Sensores". · Sobre el visor de zoom se transparentaban dos círculos apagados encima de la foto. La decisión: en el momento de comprar, la barra manda. WhatsApp flotante se va (la ficha ya tiene su propio "Consultá por WhatsApp" adentro) y Probotito sube arriba de la barra, que es donde no le quita nada a nadie. Con el menú o el zoom abiertos, los dos desaparecen. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* 🔴 29-ago-2026: sube de 760 a 900 para cubrir la franja del medio (tablets), donde la ficha también va a una sola columna y el texto queda pegado a la izquierda: ahí el flotante de la izquierda se para encima del precio y del "¡Última unidad!". */ @media (max-width:900px){ body.single-product .pk-wafloat{display:none} /* 🔴 CUÑA 29-ago-2026, SEGUNDA VUELTA — EL ARREGLO MOVIÓ EL DEFECTO DE LUGAR. Primero Probotito estaba abajo a la izquierda y se paraba sobre el PRECIO de la barra fija de compra. Lo subí 84 px para despejar la barra… y aterrizó sobre el precio DEL CUERPO de la ficha: "$ 1.747.770" se leía "…747.770". El mismo defecto, diez centímetros más arriba. Lo vi sacando una captura del recorrido completo, no midiendo: el medidor lo contaba como roce porque ese precio SÍ se puede correr scrolleando. Tenía razón la captura. La ficha tiene todo el texto pegado a la IZQUIERDA y la derecha vacía, y el flotante de WhatsApp ya no está ahí (la ficha tiene el suyo adentro). Así que Probotito se muda a la derecha, arriba de la barra: despeja la barra, despeja el precio, y sigue estando. */ body.single-product .pk-bot{left:auto;right:16px;bottom:calc(84px + env(safe-area-inset-bottom))} body.single-product .pk-bot-panel{left:auto;right:0;transform-origin:bottom right} } /* 🔴 CUÑA 27-sep-2026 (X5, auditoría "ojo humano") — EN EL CELULAR, PROBOTITO SE COMÍA EL ARRANQUE DE LOS RENGLONES. Todo el texto de la web va pegado a la IZQUIERDA y el círculo vivía en esa esquina: en la primera pantalla tapaba "o volvé al inicio" (404), el precio del primer producto de la góndola y de la búsqueda, "Ver carrito" al agregar un gel, "3 cuotas sin interés"… Medido con `qa_flotantes.cjs --texto` (letras tapadas al llegar, 390×844): 29 antes. Se probaron cuatro lugares con el mismo instrumento antes de tocar nada (despues/E/_x5_cand*.txt): a la derecha, encima del WhatsApp y un poco más chico, es el que menos tapa (los renglones terminan dispares a la derecha y arrancan todos juntos a la izquierda). La HOME queda como estaba: ahí, a la derecha, el círculo caía sobre el "Botón de arrepentimiento" del hero, que la Res. 424/2020 exige destacado; a la izquierda no tapaba nada. En la ficha ya estaba a la derecha (cuña de arriba): se corre al borde. */ @media (max-width:900px){ .pk-bot .pk-bot-launch,.pk-bot.mini .pk-bot-launch,.pk-bot.open .pk-bot-launch{width:46px;height:46px} /* 27-sep-2026 (I5): acá el botón es círculo SIEMPRE, también la pastilla de la home. Entre 761 y 900 px le quedaban el relleno y el hueco de la pastilla: el avatar colgaba 12 px afuera del círculo durante los primeros 4 segundos. El círculo se arma entero, no solo el ancho. */ .pk-bot .pk-bot-launch{padding:0;gap:0;justify-content:center;border-radius:50%} .pk-bot .pk-bot-launch .lbl{display:none} .pk-bot .pk-bot-launch .av{background:transparent} body:not(.home):not(.single-product) .pk-bot{left:auto;right:28px;bottom:92px} body:not(.home):not(.single-product) .pk-bot-panel{left:auto;right:0;transform-origin:bottom right} body.single-product .pk-bot{right:8px} } @media (max-width:760px){ /* y el de WhatsApp un poco más chico y más al borde (48 px, arriba del piso de 44 del dedo): con 52 le comía el final a un renglón de Cuotas y pagos en la primera pantalla. Probotito va centrado encima de él, con 12 px de aire. */ .pk-wafloat{width:48px;height:48px;right:14px;bottom:14px} .pk-wafloat svg{width:28px;height:28px} body:not(.home):not(.single-product) .pk-bot{right:15px;bottom:74px} } /* 🟠 A2 · 14-oct-2026 (plan de especialización; P2 escrito: "ninguno tapa la columna derecha de la góndola ni el precio", Iara lo pidió 6 veces). En la góndola, la categoría y la búsqueda los dos círculos apilados (Probotito a 724 px y WhatsApp a 782) se paraban sobre la columna derecha de tarjetas: medido con elementFromPoint, 4 de 30 posiciones en Bicicletas ("Comparar" y "en 3 cuotas" tapados). Queda UNO solo (Probotito, en la esquina donde estaba WhatsApp) y se va mientras el dedo scrollea: vuelve a los 1,2 s quieto (main.js, A2) SOLO si debajo no hay letra ni botón de una tarjeta (sobre la foto o el blanco, sí), con la misma transparencia del pie, sin moverse de lugar. WhatsApp sigue en el menú y en el pie. Mismo patrón que body.pk-cmp-on (archive.css). Candado: qa_flotantes.cjs --gondola. */ @media (max-width:900px){ body.pk-gondola .pk-wafloat{display:none} body.pk-gondola:not(.home):not(.single-product) .pk-bot{right:16px;bottom:16px} } @media (max-width:760px){ body.pk-gondola:not(.home):not(.single-product) .pk-bot{right:14px;bottom:14px} } @media (max-width:900px){ body.pk-gondola.pk-scrolleando .pk-bot:not(.open), body.pk-gondola.pk-flot-tapa .pk-bot:not(.open){opacity:0;visibility:hidden;pointer-events:none} } body.pk-filtros-abiertos .pk-bot, body.pk-filtros-abiertos .pk-wafloat, body.pk-menu-abierto .pk-bot, body.pk-menu-abierto .pk-wafloat, body.pk-zoom-abierto .pk-bot, body.pk-zoom-abierto .pk-wafloat{display:none} /* 🔴 27-sep-2026 — EL COMPARADOR (re-auditoría del ojo humano, 2.3). Ahí la grilla es de dos columnas a lo ancho y la respuesta corta llena el renglón: con los dos círculos apilados a la derecha, al llegar al resultado WhatsApp se paraba sobre "Lo que resignás frente a la Tarmac SL7 Sport…". Se midieron tres versiones con qa_flotantes.cjs --texto: solo Probotito en su lugar tapa 0 letras al llegar; Probotito bajado a la esquina, o solo WhatsApp, siguen tapando la respuesta. Como en la ficha, el WhatsApp flotante se va: el comparador tiene los suyos adentro ("Coordinar visita por WhatsApp", "Pedinos la comparación por WhatsApp"). La clase del body la pone inc/pk-comparar.php. */ @media (max-width:900px){ body.pk-comparador .pk-wafloat{display:none} } /* ══════════════════════════════════════════════════════════════════════════════════════════ EL DEDO — 29-ago-2026. Área táctil mínima de 44 px (la que usan iOS y Android como piso). Medido en el celular: los cuatro íconos del header 22×22, los links del pie 17 px de alto, los chips de talle 24×24 con 5 px entre uno y otro (29 px de paso contra 44), los puntos del hero 4 px de alto, el "Recordarme" de Mi cuenta 13×13. El ícono se deja del tamaño que está y lo que crece es la zona que recibe el toque: no cambia el diseño, cambia la puntería. ══════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ .pk-icons > a,.pk-burger{position:relative} .pk-icons > a::after,.pk-burger::after{content:"";position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%)} .pk-footer li a,.pk-footer .bot a{display:inline-block;padding:12px 0;line-height:1.1} .pk-footer li{margin-bottom:0} .pk-home .dots i{position:relative} .pk-home .dots i::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)} } /* ══════════════════════════════════════════════════════════════════════════════════════════ iOS NO PUEDE HACER ZOOM SOLO — 29-ago-2026. Safari en iPhone agranda la página al tocar cualquier campo de menos de 16 px y NO vuelve solo: el cliente queda con la web corrida y agrandada, sin haber pedido nada (R2: "no quiero que se mueva lo que no toqué"). Medido: usuario y contraseña 14,5 px, "Recordarme" 13,3 px, el "Ordenar por" de las grillas 13,3 px, y el "Tu email" del Club, que está en el pie de las 17 páginas, 15 px. ══════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ input,select,textarea, .woocommerce input,.woocommerce select,.woocommerce textarea, .pk-nl input,.pk-archive .sortbox select,.pk-archive .price-row input{font-size:16px} } /* aviso de envío a coordinar (29-ago-2026, ver inc/pk-envios.php) */ /* la letra chica de cada opción de envío. Va acá y NO en `pdp.css` porque el carrito y el checkout no cargan la hoja de la ficha: el aviso habría salido sin formato justo en la pantalla donde se decide la compra. Es la misma trampa que el carrito vacío del 2-sep. */ .pk-envio-nota{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;color:var(--gray)} .pk-envio-aviso{background:var(--cream);border-radius:8px;padding:14px 16px;margin:10px 0 4px;font-size:13.5px;line-height:1.55} .pk-envio-aviso b{display:block;font-size:14.5px;margin-bottom:5px;color:var(--ink)} .pk-envio-aviso p{margin:0 0 10px;color:var(--gray)} .pk-envio-aviso a{color:var(--orange-txt);font-weight:700;text-decoration:underline} /* aviso de que hoy no se puede cobrar online (29-ago-2026, ver inc/pk-cobro.php) */ .pk-sin-cobro{background:#fff6f2;border:1px solid #f3d6c8;border-radius:10px;padding:20px 22px;margin:0 0 26px} .pk-sin-cobro b{display:block;font-size:17px;font-weight:800;color:var(--ink);margin-bottom:6px} .pk-sin-cobro p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:#5a534d} .pk-sin-cobro.chico{padding:14px 16px;margin-bottom:18px} .pk-sin-cobro.chico b{font-size:15px} .pk-sin-cobro.chico p{margin:0;font-size:14px} .pk-btn-ancho{display:block;width:100%;text-align:center} /* ── MI CUENTA (29-ago-2026) ──────────────────────────────────────────────────────────────── "¿Olvidaste la contraseña?" estaba pintado en rgb(22,22,22) y sin subrayado: se veía idéntico a un párrafo y nada decía que se pudiera tocar (R1: no parece tocable). Y la caja del formulario venía con el borde gris lila de WooCommerce, no con el del sitio. */ .pk-cuenta-intro{max-width:760px;font-size:15px;line-height:1.6;color:var(--gray);margin:0 0 24px} .pk-cuenta-intro a{color:var(--orange);font-weight:700;text-decoration:underline} /* CL3 (27-sep-2026): llegando desde "Sumate al Club", arriba lo que se lleva y el REGISTRO primero (en el celular estaba debajo del login, fuera de la pantalla). Ver pk_cuenta_desde_club(). */ .pk-cuenta-club{max-width:760px;margin:0 0 24px;padding:16px 18px;background:var(--cream);border-left:3px solid var(--orange); border-radius:8px;scroll-margin-top:170px} .pk-cuenta-club b{display:block;font-size:17px;font-weight:800;color:var(--ink);margin-bottom:4px} .pk-cuenta-club p{margin:0;font-size:15px;line-height:1.55;color:var(--gray)} .pk-desde-club #customer_login{display:flex;flex-direction:column;gap:26px} .pk-desde-club #customer_login .col-2{order:-1} @media (min-width:769px){ .pk-desde-club #customer_login{flex-direction:row;justify-content:space-between} .pk-desde-club #customer_login .col-1,.pk-desde-club #customer_login .col-2{float:none;width:48%} } .woocommerce-form-login .lost_password a,.woocommerce-LostPassword a{ color:var(--orange-txt);font-weight:700;text-decoration:underline} .woocommerce #customer_login .col-1,.woocommerce #customer_login .col-2, .woocommerce form.login,.woocommerce form.register{border-color:var(--line);border-radius:8px} .woocommerce form .form-row label{font-weight:600;font-size:14px;color:#3a3a3a} /* 🔴 2-sep-2026: el asterisco de "campo obligatorio" es el mismo caso — 14 px de naranja sobre blanco, 3,41:1. Y es el que le dice al cliente qué no puede dejar vacío en el checkout. */ .woocommerce form .form-row .required{color:var(--orange-txt);text-decoration:none} /* los flotantes desaparecen cuando el visitante llegó al pie (29-ago-2026, ver main.js). Se van con opacidad y sin moverse: nada salta de lugar (R2). */ .pk-bot,.pk-wafloat{transition:opacity .22s ease,visibility .22s ease,transform .18s,box-shadow .18s} body.pk-flot-abajo .pk-bot,body.pk-flot-abajo .pk-wafloat{opacity:0;visibility:hidden;pointer-events:none} body.pk-flot-abajo .pk-bot.open{opacity:1;visibility:visible;pointer-events:auto} /* el naranja legible para el resto de la letra chica (29-ago-2026, ver el token arriba) */ .pk-menu a[style*="var(--orange)"], .pk-envio-aviso a,.pk-cuenta-intro a,.talles-leyenda a,.pk-404 .ayuda404 a, .pk-footer .bot a,.woocommerce .woocommerce-info a,.woocommerce .cart-empty a, .pk-sin-cobro a:not(.pk-btn){color:var(--orange-txt)} /* ══════════════════════════════════════════════════════════════════════════════════════════ 🔴 CUÑA 29-ago-2026 — EL CARRITO EN EL CELULAR ERA LA TABLA CRUDA DE WOOCOMMERCE. Visto en 390 px: WooCommerce apila la tabla en pares "etiqueta: valor" con el valor pegado a la DERECHA, así que el nombre del producto salía partido y terminaba con la palabra "L" sola en un renglón; la ✕ de borrar quedaba flotando sola en una fila vacía arriba de todo; y no se veía la foto. En la pantalla donde el cliente confirma qué está comprando, eso no puede pasar. Se convierte en lo que usa cualquier tienda: una tarjeta con la foto, el nombre completo a la izquierda, y abajo el precio, la cantidad y el sacar. Nada de esto toca la compu. ══════════════════════════════════════════════════════════════════════════════════════════ */ @media (max-width:768px){ /* 🔴 CUÑA 7-sep-2026 — EL CARRITO SE IBA 14 px A LA DERECHA EN EL CELULAR. Medido con un producto adentro a 390 px: el documento medía **404** contra una ventana de 390, y el culpable era la tabla de Woo (`table.shop_table`, 383 px de ancho arrancando en x=20). Con el carrito vacío no pasa: por eso el candado lo cazaba y a ojo no se veía. Una tabla es `width:auto` por defecto y crece con su contenido; acá la fila es una grilla con borde y `padding:14px 42px`, y esos 56 px se sumaban al ancho en vez de descontarse. Un desborde horizontal en el celular es de las cosas más feas que hay —la página se corre sola al costado— y encima le pega justo al paso donde la persona ya decidió comprar. */ .woocommerce table.shop_table_responsive.cart, .woocommerce table.shop_table_responsive.cart tr, .woocommerce table.shop_table_responsive.cart td{max-width:100%;box-sizing:border-box} .woocommerce table.shop_table_responsive.cart{width:100%;table-layout:fixed} .woocommerce table.shop_table_responsive.cart{border:none!important} .woocommerce table.shop_table_responsive.cart thead{display:none} .woocommerce table.shop_table_responsive.cart tr.cart_item{ display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-areas: "foto nombre" "foto precio" "foto cant"; gap:2px 14px;align-items:start;position:relative; border:1px solid var(--line);border-radius:10px;padding:14px 42px 14px 14px;margin-bottom:14px} .woocommerce table.shop_table_responsive.cart tr.cart_item td{ display:block;border:none!important;padding:0!important;text-align:left!important;background:none} .woocommerce table.shop_table_responsive.cart tr.cart_item td::before{ content:none!important} /* las etiquetas "Producto:", "Precio:"… sobran */ .woocommerce tr.cart_item td.product-thumbnail{grid-area:foto;display:block!important} .woocommerce tr.cart_item td.product-thumbnail img{width:88px;height:88px;object-fit:contain;border-radius:6px} .woocommerce tr.cart_item td.product-name{grid-area:nombre;font-weight:700;line-height:1.35;font-size:15px} .woocommerce tr.cart_item td.product-name a{color:var(--ink)} .woocommerce tr.cart_item td.product-price{grid-area:precio;font-size:15px;font-weight:800;margin-top:4px!important} .woocommerce tr.cart_item td.product-quantity{grid-area:cant;margin-top:8px!important} .woocommerce tr.cart_item td.product-quantity .qty{width:64px;text-align:center} .woocommerce tr.cart_item td.product-subtotal{display:none!important} /* con 1 unidad repite el precio */ .woocommerce tr.cart_item td.product-remove{position:absolute;top:8px;right:8px;width:36px;height:36px} .woocommerce tr.cart_item td.product-remove a.remove{ display:flex;align-items:center;justify-content:center;width:36px;height:36px; border-radius:50%;background:var(--cream);color:#8a847e!important;font-size:20px;line-height:1} .woocommerce tr.cart_item td.product-remove a.remove:hover{background:#f3ded6;color:#c8482a!important} /* los cupones y "actualizar" entran uno abajo del otro, no apretados en una fila */ .woocommerce table.shop_table_responsive.cart td.actions{display:flex!important;flex-direction:column;gap:10px;padding:4px 0 0!important} .woocommerce table.shop_table_responsive.cart td.actions .coupon{display:flex;gap:8px} .woocommerce table.shop_table_responsive.cart td.actions .coupon input{flex:1;min-width:0;width:auto} .woocommerce table.shop_table_responsive.cart td.actions .coupon .button{width:auto;flex:0 0 auto;white-space:nowrap} /* 🔴 7-sep-2026, segunda vuelta del desborde: en 390 alcanzó con acotar la tabla, en **360 no**. Quedaban 6 px, y el culpable era este botón: "Aplicar cupón" mide 145 px con `nowrap` y `flex:0 0 auto`, o sea que no achica nunca, y el campo de al lado tiene un ancho mínimo propio del navegador que `min-width:0` no le saca del todo. Abajo de 400 px los dos van uno arriba del otro: el cupón lo usa poca gente y no vale un desborde en el teléfono más chico. Es el recordatorio de siempre: **arreglar en un ancho no es arreglar.** */ @media (max-width:400px){ .woocommerce table.shop_table_responsive.cart td.actions .coupon{flex-direction:column} .woocommerce table.shop_table_responsive.cart td.actions .coupon input, .woocommerce table.shop_table_responsive.cart td.actions .coupon .button{width:100%;flex:0 0 auto} } .woocommerce table.shop_table_responsive.cart td.actions > .button{width:100%} /* 🔴 29-ago-2026: en el carrito y en el checkout del celular los dos flotantes se paraban encima de los redondelitos para elegir el envío — un control de formulario, en la pantalla donde el cliente está cerrando la compra. Ahí no van: el carrito ya tiene su propio "Preferís terminar la compra por WhatsApp?" arriba de todo, y Probotito está a un toque en cualquier otra página. */ body.woocommerce-cart .pk-bot,body.woocommerce-cart .pk-wafloat, body.woocommerce-checkout .pk-bot,body.woocommerce-checkout .pk-wafloat{display:none} } /* 🔴 29-ago-2026: "Actualizar carrito" arranca deshabilitado (WooCommerce lo prende recién cuando cambiás la cantidad) y se veía como un botón naranja lavado — o sea, como un botón roto. Un control apagado tiene que parecer apagado, no fallado. */ .woocommerce button.button[disabled], .woocommerce button.button:disabled, .woocommerce input.button[disabled]{ background:#fff!important;color:#8a847e!important;border:1px solid var(--line)!important; opacity:1!important;cursor:default} .woocommerce button.button[disabled]:hover{background:#fff!important;color:#8a847e!important} /* ── EL CARRITO EN COMPU (29-ago-2026) ────────────────────────────────────────────────────── La miniatura del producto salía de 28 px: en la pantalla donde el cliente CONFIRMA qué está comprando, la foto es lo que se mira primero. Y el campo del cupón entraba tan angosto que el placeholder salía cortado ("Código de …"). */ .woocommerce table.shop_table td.product-thumbnail img{width:64px;height:64px;object-fit:contain} .woocommerce table.shop_table td.product-thumbnail{width:84px} .woocommerce table.shop_table td.actions .coupon{display:flex;gap:10px;align-items:center} .woocommerce table.shop_table td.actions .coupon input#coupon_code{width:210px;min-width:180px} .woocommerce table.shop_table td.product-remove a.remove{color:#8a847e!important;font-size:22px;text-decoration:none} .woocommerce table.shop_table td.product-remove a.remove:hover{color:#c8482a!important} /* -- AUTOCOMPLETADO (1-sep-2026) -------------------------------------------- Sin scroll interno (Baymard: el scroll dentro del desplegable provoca clics sin querer), las secciones marcadas distinto de las busquedas, y en celular filas de 46px para el dedo. */ .pk-searchbar form{position:relative} .pk-sug{position:absolute;top:100%;left:0;right:0;z-index:60;margin:4px 0 0;padding:6px 0; list-style:none;background:#fff;border:1px solid var(--line);border-top:2px solid var(--orange); border-radius:0 0 6px 6px;box-shadow:0 12px 28px rgba(0,0,0,.13);max-height:none;overflow:visible} .pk-sug li{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px 15px;font-size:14.5px;color:var(--ink);cursor:pointer;line-height:1.25} .pk-sug li .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pk-sug li .tx b{font-weight:700} .pk-sug li .et{flex:none;font-size:11.5px;color:var(--gray);text-transform:uppercase; letter-spacing:.03em;font-weight:600} .pk-sug li.on{background:var(--cream)} .pk-sug-seccion{border-left:3px solid var(--orange);padding-left:12px!important} .pk-sug-seccion .tx{font-weight:600} /* 27-sep-2026 (I8, I9): la intención ("Ropa para el frío") es un lugar a donde ir, como una sección */ .pk-sug-intencion{border-left:3px solid var(--orange);padding-left:12px!important} .pk-sug-intencion .tx{font-weight:600} .pk-sug-correccion .et{color:var(--orange-txt)} @media(max-width:760px){ .pk-sug li{padding:12px 15px;font-size:15px;min-height:46px;box-sizing:border-box} .pk-sug li .et{font-size:11px} } /* -- EL TOTAL ARRIBA DEL CHECKOUT (1-sep-2026) -------------------------------- Va en style.css y no en paginas.css porque esa hoja SOLO se encola en las paginas de contenido (is_page), y el checkout no es una de ellas: el estilo no se hubiera leido nunca. El cliente llenaba 18 campos sin ver cuanto iba a pagar: el total estaba a 2.060px en celular. Son los dos motivos de abandono mas caros que hay medidos (40% y 12%).
nativo: anda sin JavaScript, que es la regla de esta web. */ .pk-total-arriba{border:1.5px solid var(--ink);border-radius:6px;margin:0 0 22px;background:#fff} .pk-total-arriba summary,.pk-total-arriba>.sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px; padding:14px 16px;cursor:pointer;list-style:none;min-height:44px;box-sizing:border-box} /* 27-sep-2026 (🟡 10 de la promo): en el cierre por WhatsApp va fijo, sin pliegue (`.fijo > .sum`) */ .pk-total-arriba>.sum{cursor:default} .pk-total-arriba summary::-webkit-details-marker{display:none} .pk-total-arriba .et{font-size:13.5px;color:var(--gray);flex:1 1 100%;line-height:1.3} .pk-total-arriba .nro{font-family:'Roboto Condensed',system-ui,sans-serif;font-weight:900; font-size:26px;line-height:1.1;color:var(--ink)} .pk-total-arriba .nro .amount{font-size:inherit;font-weight:inherit;color:inherit} .pk-total-arriba .ver{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--orange-txt); text-decoration:underline;text-underline-offset:2px} /* abierto dice "Ocultar el detalle", no "Ver el detalle (cerrar)", que se lee al reves. 27-sep-2026: decía "Cerrar", y en el paso de pagar se leía como "cerrar la compra" (🟡 10 de la promo) */ .pk-total-arriba[open] .ver{font-size:0} .pk-total-arriba[open] .ver::after{content:"Ocultar el detalle";font-size:13.5px;text-decoration:underline; text-underline-offset:2px} .pk-total-arriba .det{padding:0 16px 14px;border-top:1px solid var(--line);margin-top:2px} .pk-total-arriba .fila{display:flex;justify-content:space-between;gap:14px;padding:9px 0; font-size:14px;border-bottom:1px solid var(--line);line-height:1.35} .pk-total-arriba .fila:last-child{border-bottom:0;font-weight:600} .pk-total-arriba .fila span:last-child{white-space:nowrap} /* 29-sep-2026 (B2B): el talle a pedido lo dice debajo de su nombre, en el resumen del cierre */ .pk-total-arriba .fila .pk-fila-pedido{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--gray)} @media(max-width:760px){ .pk-total-arriba .nro{font-size:23px} .pk-total-arriba .ver{flex:0 0 auto} } /* -- CÓMO LO RECIBÍS, en el cierre por WhatsApp (27-sep-2026) ------------------------------------ 🔴 2 de la auditoría de la promo: el envío de $7.500 venía elegido y ahí no se podía cambiar. Cada opción es un botón de un formulario (anda sin JavaScript) con su precio y su línea chica; la elegida se pinta como el talle elegido de la góndola. Valores del sistema, nada propio. */ .pk-envio-elegir{margin:0 0 18px} .pk-envio-elegir fieldset{border:0;padding:0;margin:0;min-width:0} .pk-envio-elegir legend{padding:0;margin-bottom:8px} .pk-envio-ops{display:flex;flex-direction:column;gap:8px} .pk-envio-op{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;width:100%; min-height:44px;padding:12px 14px;box-sizing:border-box;text-align:left;cursor:pointer; border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit} .pk-envio-op .t,.pk-envio-op .m{font-size:15px;font-weight:700;line-height:1.3} .pk-envio-op .m{white-space:nowrap} .pk-envio-op .d{grid-column:1 / -1;font-size:13px;line-height:1.4;color:var(--gray)} .pk-envio-op:hover{border-color:var(--ink)} .pk-envio-op:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(239,90,40,.14)} .pk-envio-op.elegida{border-color:var(--ink);background:var(--ink);color:#fff} .pk-envio-op.elegida .d{color:rgba(255,255,255,.8)} .pk-envio-elegir .ar-h{display:block;margin-top:8px} /* -- EL CÓDIGO POSTAL EN EL CIERRE (29-sep-2026, pk_envio_cp_checkout_html en inc/pk-envios.php) -- Antes de "Cómo lo recibís": con el CP, el interior tiene su precio. Campo y rótulo del formulario del sitio (.ar-f / .ar-l), botón .pk-btn-dark. Anda sin JavaScript. */ .pk-envcp-checkout{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 16px} .pk-envcp-checkout .ar-h{flex:1 0 100%} .pk-envcp-checkout .ar-f{flex:1 1 auto;min-width:0} .pk-envcp-checkout .pk-btn{min-height:46px;padding:0 18px;font-size:14.5px;flex:0 0 auto;background:#fff} /* ═══ G · PLATA Y PRECIO (27-sep-2026, tarde) ═══════════════════════════════════════════════════ .pk-pnuevo — la etiqueta del nuevo precio sugerido de Specialized (pk_precio_nuevo_html(), functions.php; N12). Secundaria y elegante, como pide la guía de repricing: ni naranja, ni sello, ni flecha. La medida del "Precio contado" de la ficha, en tinta. .pk-cf — las cuotas de la ficha a la vista (inc/pk-cuotas-ficha.php; N2): sin desplegable ni pestañas, cada plan "N cuotas de $X" con su precio final. Vive acá y no en pdp.css para que la muestra de /componentes/ y la ficha usen la misma hoja. */ .pk-pnuevo{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; line-height:1.3;color:var(--ink);background:#fff;border:1px solid var(--ink);border-radius:4px;padding:3px 8px;white-space:nowrap} /* 27-sep-2026 (noche, R2 · 🟠 5): el cartel naranja y la tabla estaban juntos entre el precio y las opciones (506 px en compu): el talle y "Agregar al carrito" quedaban fuera de la primera pantalla. .pk-cf-res es el RESUMEN que queda junto al precio, dos renglones sin caja; .pk-cf, la tabla entera, va debajo del botón de compra, con su título y el ancla #pkCuotas (el link del resumen lleva ahí). */ .pk-cf-res{margin-top:12px} .pk-cf-pn{margin:0 0 8px;font-size:14px;font-weight:600;line-height:1.45;color:var(--ink)} .pk-cf-r1{display:flex;align-items:center;gap:7px;margin:0;font-size:16px;line-height:1.3;color:var(--orange-txt)} .pk-cf-r1 .z{font-size:15px;line-height:1;flex:0 0 auto} .pk-cf-r1 b{font-weight:800;letter-spacing:-.01em} .pk-cf-r2{margin:2px 0 0;padding-left:22px;font-size:13px;line-height:1.45;color:var(--gray)} .pk-cf-r2 a{color:#3A3A3A;font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap} .pk-cf-r2 a:hover{color:var(--orange-txt)} /* 🔴 28-sep-2026 (R6 · re-auditoría, 🟡 13): en la compu, las cuotas en UN renglón: "3 cuotas sin interés de $X · o hasta 18 cuotas fijas de $Y" (sin el rayo y sin "Todos los días", que el celular sigue diciendo). Con el envío en un renglón (pdp.css), "Agregar al carrito" entra en la primera pantalla de una MacBook. Desde 1250 px, donde la columna de compra mide 440 px o más y el renglón entra entero (medido: 452 px a 1280, 468 a 1440); más angosto, quedan los dos renglones. */ @media (min-width:1250px){ .pk-pdp .pk-cf-res{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px} .pk-pdp .pk-cf-res .pk-cf-pn{flex:0 0 100%} .pk-pdp .pk-cf-r1{font-size:15px} .pk-pdp .pk-cf-r1 .z,.pk-pdp .pk-cf-r2 .pk-cf-cuando{display:none} .pk-pdp .pk-cf-r2{margin:0;padding-left:0;font-size:12.5px} .pk-pdp .pk-cf-r1 + .pk-cf-r2::before{content:"· "} } .pk-cf{margin-top:26px;scroll-margin-top:calc(var(--pk-hdr-alto,178px) + 16px)} .pk-cf-t{margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--ink)} .pk-cf-f-si .n,.pk-cf-f-si .n b{color:var(--orange-txt)} .pk-cf-tabla{margin-top:10px;border:1px solid var(--line);border-radius:4px;padding:2px 16px 8px;background:#fff} .pk-cf-g{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0 8px; font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray)} .pk-cf-g .q{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .pk-cf-g .d{letter-spacing:.04em} .pk-cf-logo{display:block;width:auto} .pk-cf-visa{height:12px}.pk-cf-mc{height:18px}.pk-cf-mp{height:23px}.pk-cf-bc{height:15px} .pk-cf-f{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px} .pk-cf-f .n{font-weight:600;color:#3a3a3a} .pk-cf-f .n b{font-weight:800;color:var(--ink)} .pk-cf-f .t{font-size:13px;color:var(--gray);white-space:nowrap} .pk-cf-cap{margin:2px 0 4px;font-size:12px;line-height:1.45;color:var(--gray)} .pk-cf-nota{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--gray)} .pk-cf-nota b{font-weight:700;color:var(--ink)} .pk-cf-legal{margin:8px 0 0;padding-top:8px;border-top:1px dashed var(--line);font-size:11.5px;line-height:1.45;color:var(--gray)} /* ══ G2 · N17 (27-sep-2026) — EL CARTEL "SIN STOCK", ARRIBA A LA IZQUIERDA DE LA FOTO ═══════════════ Iara: "quiero que aparezca arriba a la izquierda el 'sin stock' en caso de que no haya ninguna variable disponible del producto". Lo imprime pk_cartel_sin_stock() (functions.php) en la tarjeta y en la ficha. Misma forma que los carteles de la tarjeta (`.freeship`, `.nuevo`) y en GRIS, que es el color con el que la web ya dice "no hay" (blanco sobre --gray = 5,3:1). La foto NO se apaga. */ .pk-sinstock{position:absolute;top:12px;left:12px;z-index:3;background:var(--gray);color:#fff; font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 9px; border-radius:4px;line-height:1;pointer-events:none} /* ══ N20 (27-sep-2026) — EL CARTEL DEL USADO: "Usado · seleccionado Probikes" ═══════════════════════════ Mismo lugar que "Sin stock" (lo imprime pk_cartel_sin_stock() con pk_usado_cartel_html(), inc/pk-usados.php), con clase propia porque .pk-sinstock quiere decir "no hay". CONTORNEADO (blanco, borde y letra --ink, 17:1) para no confundirse con los tres llenos: "Envío gratis" naranja, "Nuevo" negro y "Sin stock" gris. En la tarjeta va en dos renglones (USADO / seleccionado Probikes): en uno no entra en los 167 px de la tarjeta a 390. */ .pk-usado{position:absolute;top:12px;left:12px;z-index:3;max-width:calc(100% - 24px);background:#FFFFFF; color:var(--ink);border:1.5px solid var(--ink);border-radius:4px;padding:5px 9px;font-size:11px; font-weight:600;line-height:1.25;pointer-events:none} .pk-usado b{font-weight:800;letter-spacing:.07em;text-transform:uppercase} .pk-archive .pcard .pk-usado{padding:5px 8px} .pk-archive .pcard .pk-usado .sep{display:none} .pk-archive .pcard .pk-usado .d{display:block;margin-top:1px;white-space:nowrap} .pk-archive .pcard .pk-usado ~ .nuevo{top:auto;bottom:12px} /* Hasta 900 px (la grilla de dos columnas) el cartel de dos renglones termina en y=53 y la bici empieza en y=42 (a 390; 52 a 768): tapaba el asiento (125 px de bici debajo a 390, 22 a 768). La foto de la tarjeta llena el ANCHO y le sobran 39 px de alto, así que 30 px más arriba bajan la bici 15 px SIN achicarla, y la caja no cambia de tamaño (la fila sigue alineada). A 1440 la bici empieza en y=59: no hace falta. */ @media (max-width:900px){ .pk-archive .pcard .ph:has(.pk-usado) > img{padding-top:46px} } /* En la ficha va en un renglón, con su punto. Medido sobre los píxeles de la foto que quedan debajo del cartel: 0 de bici a 768 y a 1440, pero 362 a 390 (la bici ocupa el 90 % del ancho y el asiento cae debajo). En el celular la foto baja lo que mide el cartel, con :has() como .main:has(.noimg). */ .pk-pdp .gallery .main .pk-usado{top:14px;left:14px;font-size:12.5px;padding:7px 11px;max-width:none;white-space:nowrap} @media (max-width:760px){ .pk-pdp .gallery .main .pk-usado{top:10px;left:10px;font-size:11.5px;padding:6px 9px} .pk-pdp .gallery .main:has(.pk-usado) img{padding-top:50px} } /* Solo para el lector de pantalla: el estado de cada talle en palabras (single-product.php). */ .pk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* R6 (28-sep-2026, re-auditoría 🟡 14): un teléfono a la vista no se parte en dos renglones ("+54 11" arriba y "3125-1561" abajo, en el chat). Lo usan pk_tel() y pk_tel_en_texto() (functions.php) y el chat (main.js). Candado: qa_telefonos.cjs. */ .pk-tel{white-space:nowrap} /* 29-sep-2026 (ronda 2 de los dos precios, inc/pk-precios.php → pk_precios_texto('dto_tarjeta')): el chip del descuento en dos renglones ("10% OFF" / "en efectivo o transferencia"; en Specialized "Precio especial", sin %) para las tarjetas que no son de la góndola: relacionados de la ficha y recomendados del carrito. La de la góndola ajusta tamaños en assets/archive.css. */ .pk-dto-t{display:block;line-height:1.3;font-size:12px;color:var(--gray)} .pk-dto-t .pk-dto-c{display:inline-block;font-size:13px;font-weight:800;color:#2f7d4f;background:#eef6f0;border-radius:4px;padding:0 5px;white-space:nowrap} .pk-dto-t > span{display:block;white-space:nowrap} /* 6-oct-2026 (ronda 3): el pie de una tarjeta chica (relacionados de la ficha, recomendados del carrito) debajo del contado: su condición y la lista, "Con tarjeta $X", en dos renglones fijos (pk_precios_texto('pie_tarjeta')) */ .pk-pc2{display:block;line-height:1.3;font-size:12px;color:var(--gray)} .pk-pc2 > span{display:block;white-space:nowrap} .pk-pc2 .t{margin-top:2px} .pk-pc2 b{font-weight:700;color:var(--ink);white-space:nowrap} /* 🔴 9-oct-2026 (RONDA 4, inc/pk-precios.php → pk_precios_texto('dto_tarjeta')). Debajo de la lista, dos renglones fijos en toda tarjeta (góndola, relacionados de la ficha, recomendados del carrito): "Precio especial $X" / su condición ("10% OFF en efectivo o transferencia"; Specialized y Roval sin %). Se mide contra el ANCHO DE LA TARJETA (container query), no de la pantalla: la de la góndola tiene 163 px en un celular de 390, 148 en uno de 360 y ~170 en una compu de 1000 con el filtro al costado, y "10% OFF en efectivo o transferencia" ocupa 191 px a 12 px. En una tarjeta angosta el % sube al renglón del número ("$ X con 10% OFF") y la condición queda sola en el suyo; un renglón largo (la frase de la SL8, un número de 8 cifras) achica la letra en vez de desbordar. Nada se corta ni parte a la mitad: lo mide qa_precios_web.php (H). */ .pk-pe4{display:block;line-height:1.3;font-size:12px;color:var(--gray);container-type:inline-size} .pk-pe4 > span{display:block;white-space:nowrap;font-size:12px} .pk-pe4 .b{margin-top:4px} /* 14-oct-2026 (pedido de Iara): el contado llama la atención: verde de ahorro, número en negrita y un punto más grande */ .pk-pe4{color:#2f7d4f;font-weight:600} .pk-pe4 .a b{font-size:14px;font-weight:800;color:#2f7d4f} .pk-pe4 .pd{font-weight:700;color:#2f7d4f} /* el orden importa: la de 160 va primero para que la de 205 (más específica para la SL8) gane en las dos */ @container (max-width:160px){ .pk-pe4 .a{font-size:11px} .pk-pe4 .a b{font-size:13px} } @container (max-width:205px){ /* ronda 2, fila 11: una sola redacción. Si "10% OFF en efectivo o transferencia" no entra, la condición baja de renglón (dos líneas reservadas en TODA tarjeta angosta, con o sin %, para que midan lo mismo); "Precio especial" se queda */ .pk-pe4 .b{white-space:normal;min-height:2.6em} /* 9-oct: «Nuevo precio sugerido $ 8.500.000» (Tarmac SL8) desbordaba 11 px a 320: la letra sigue el ancho de SU tarjeta */ .pk-pe4-largo .a,.pk-pe4-largo .a b{font-size:min(10.5px,6.1cqw);letter-spacing:-.02em} } /* R1 (9-oct): cartel sobre la foto de la tarjeta: «$ X menos que la 2026» (diferencia de contados vivos, pk_precio_comparacion) */ .pk-cartel-cmp{position:absolute;top:44px;left:12px;z-index:2;max-width:calc(100% - 24px);background:#2F7D4F;color:#fff;font-size:11.5px;font-weight:700;line-height:1.25;padding:5px 9px;border-radius:4px} /* 9-oct (ojo del Director): en la tarjeta del celu (167 px) el cartel partía en dos renglones anchos y tapaba la bici entera. Ahí va compacto: dos renglones cortos ("$ 610.605 menos" / "que la 2026") pegados al de "Envío gratis". */ @media (max-width:600px){ .pk-cartel-cmp{top:36px;font-size:9.5px;line-height:1.2;padding:2px 5px;white-space:nowrap;letter-spacing:-.01em;max-width:calc(100% - 16px)} } /* C1 (9-oct): el botón único de los relacionados de la ficha, el mismo de la góndola (.pk-cta-ver, archive.css) */ .pk-cta-ver-rc{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:10px;padding:11px 12px; border:1.6px solid var(--ink);border-radius:2px;background:#fff;color:var(--ink);font-size:14.5px;font-weight:700;letter-spacing:-.005em; box-sizing:border-box;transition:background .18s,color .18s} .rc:hover .pk-cta-ver-rc{background:var(--ink);color:#fff} /* el "con tarjeta" del renglón de las sin interés de la ficha (inc/pk-cuotas-ficha.php): solo en el celular */ @media (min-width:901px){ .pk-cf-res .pk-cf-tj{display:none} } /* los renglones del carrito (ronda 3, pk_precios_renglon_carrito_html): el contado y debajo su condición y la lista */ .pk-cart-pc small{display:block;font-size:12.5px;font-weight:400;line-height:1.35;color:var(--gray)} .pk-cart-pc small.t{margin-top:2px} .pk-cart-pc small b{font-weight:700;color:var(--ink)} /* 14-oct-2026 · tarjeta en 1 pago o en cuotas, arriba del formulario de Mercado Pago (inc/pk-precios.php, pk_precio_plan_html) */ .pk-plan-tarjeta{margin:14px 0;font-size:14px} .pk-plan-tarjeta .pk-plan-h{margin:0 0 8px;font-weight:700;color:var(--ink)} .pk-plan-op{display:grid;grid-template-columns:20px 1fr;gap:2px 10px;align-items:start;padding:12px 14px;margin:0 0 8px;border:1px solid #E7E3DF;border-radius:8px;background:#fff;cursor:pointer} .pk-plan-op.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .pk-plan-op input{margin:3px 0 0;grid-row:span 2} .pk-plan-t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px} .pk-plan-t b{font-weight:600} .pk-plan-t strong{font-weight:700;white-space:nowrap} .pk-plan-op small{display:block;font-size:12.5px;line-height:1.35;color:var(--gray)} .pk-plan-tarjeta .pk-plan-ayuda{margin:2px 0 0;font-size:12.5px;color:var(--gray)} /* 14-oct-2026 (B9): la fila con el botón de WhatsApp del carrito no lleva rótulo: sin el ":" que Woo pone en el celu */ .pk-contado-wa td::before,.pk-contado-wa td::after{content:none!important;display:none!important} .pk-contado-wa td{text-align:left!important} .pk-contado-wa .pk-btn{margin-top:2px} .woocommerce-cart .pk-contado-wa td{display:block!important;width:auto!important}.pk-contado-wa p{text-align:left}.pk-contado-wa .pk-btn{display:flex;width:100%;justify-content:center;box-sizing:border-box} /* 14-oct-2026: el secundario de Mercado Libre ("Agregar al carrito" debajo de "Comprar ahora"): el mismo color del principal, en clarito y sin borde. --orange-txt pasa 4,6:1 sobre este fondo. */ .pk-btn-suave{background:#FDEEE9;color:var(--orange-txt)} .pk-btn-suave:hover{color:#fff;background:var(--orange-solido)}