/* Home OK Dock — layout de secciones (solo front page okdock).
 * Tokens en okdock-skin.css. Tarjetas: card.css + escala compacta scoped aquí. */
.okd-home{background:var(--okd-ground);padding-bottom:30px}
/* Los wrappers de Woodmart pintan la página de blanco y se asoman a los costados
   del contenido (área boxed): en la home todo el lienzo va en gris ground. */
.wd-page-wrapper.website-wrapper,
.wd-page-content.main-page-wrapper{background:var(--okd-ground) !important}
.okd-wrap{max-width:1280px;margin-inline:auto;padding-inline:20px}
.okd-home section{padding-block:14px}
.okd-panel{background:#fff;border-radius:18px;padding:16px;box-shadow:0 1px 2px rgba(10,26,55,.05),0 10px 30px rgba(10,26,55,.07)}
.okd-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.okd-sec-head h2{font-size:17px;font-weight:700;margin:0}
.okd-sec-head .okd-sub{color:#51617A;font-size:12px;margin-top:2px}
.okd-sec-head a.okd-more{color:var(--okd-blue);font-weight:600;font-size:12.5px}

/* Botones */
.okd-btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-weight:600;
	border-radius:9px;padding:9px 15px;font-size:13px;text-decoration:none;transition:transform .12s ease}
.okd-btn--yellow{background:var(--okd-yellow);color:var(--okd-on-yellow) !important;border:1px solid var(--okd-yellow-border)}
.okd-btn--yellow:hover{background:var(--okd-yellow-hover);transform:translateY(-1px)}
.okd-btn--blue{background:var(--okd-blue);color:#fff !important}
.okd-btn--blue:hover{background:var(--okd-blue-dark)}
.okd-btn--ghost{background:#fff;color:#0E1726 !important;border:1.5px solid #E1E9F5}
.okd-btn--ghost:hover{border-color:var(--okd-blue);color:var(--okd-blue) !important}
/* La MISMA clase en un <button>. Woodmart pinta cualquier boton con
   :is(.btn,.button,button,[type=submit],[type=button]) — especificidad 0-1-0, igual que
   .okd-btn, y gana por orden de carga: fondo gris (--btn-bgcolor,#f3f3f3) y MAYUSCULAS.
   Como el color de .okd-btn si lleva !important, el resultado era texto blanco sobre
   gris claro: un boton que parece deshabilitado. Con un <a> no ocurre (ese selector no
   lo alcanza), por eso solo se notaba en el formulario. Se repite aqui con un punto mas
   de especificidad (0-1-1) para que la clase valga igual en botones. */
button.okd-btn,input.okd-btn{text-transform:none;min-height:0;line-height:1.2;font-family:inherit;
	border-radius:9px;padding:9px 15px;font-size:13px;box-shadow:none}
button.okd-btn--yellow,input.okd-btn--yellow{background-color:var(--okd-yellow);border:1px solid var(--okd-yellow-border)}
button.okd-btn--yellow:hover,input.okd-btn--yellow:hover{background-color:var(--okd-yellow-hover)}
button.okd-btn--blue,input.okd-btn--blue{background-color:var(--okd-blue);border:0}
button.okd-btn--blue:hover,input.okd-btn--blue:hover{background-color:var(--okd-blue-dark)}
button.okd-btn--ghost,input.okd-btn--ghost{background-color:#fff;border:1.5px solid #E1E9F5}
button.okd-btn--ghost:hover,input.okd-btn--ghost:hover{border-color:var(--okd-blue)}

/* Hero compacto (~174px) */
.okd-hero{padding-top:20px}
.okd-hero__panel{border-radius:26px;padding:11px;position:relative;overflow:hidden;
	background:linear-gradient(120deg,#0a3f92 0%,var(--okd-blue) 34%,#0aa3e6 72%,var(--okd-cyan) 100%);
	background-size:180% 180%;animation:okdflow 18s ease-in-out infinite}
@keyframes okdflow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.okd-hero__card{background:#fff;border-radius:18px;padding:22px 32px;
	display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;min-height:174px}
.okd-hero__kicker{display:inline-block;background:#F4F7FC;color:var(--okd-blue);font-weight:600;
	font-size:11px;letter-spacing:.04em;padding:5px 11px;border-radius:999px;border:1px solid #E1E9F5}
.okd-hero__copy h1{font-size:clamp(22px,2.2vw,32px);line-height:1.08;margin:10px 0 8px;font-weight:700;letter-spacing:-.02em;color:#0E1726}
.okd-hero__copy h1 em{font-style:normal;color:var(--okd-blue)}
.okd-hero__copy p{color:#51617A;font-size:14px;margin:0 0 14px;max-width:48ch}
.okd-hero__cta{display:flex;gap:12px;flex-wrap:wrap}
/* Hero B2B: la linea de prueba bajo los botones (factura, credito, ejecutivo, envio) */
.okd-hero__prueba{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:14px 0 0;padding:0}
.okd-hero__prueba li{font-size:12.5px;color:#51617A;display:flex;align-items:center;gap:6px}
.okd-hero__prueba li::before{content:'';width:14px;height:14px;border-radius:50%;flex:none;
	background:var(--okd-blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4.5 4.5L19 7'/></svg>") center/9px no-repeat}

/* Franja de marcas: capsula baja bajo el hero. Los logos van en gris y cobran
   color al pasar el cursor, para que no le peleen al hero el punto focal. */
.okd-marcas__row{background:#fff;border-radius:18px;padding:14px 22px;display:flex;align-items:center;gap:22px;
	box-shadow:0 1px 2px rgba(10,26,55,.05),0 10px 30px rgba(10,26,55,.07)}
.okd-marcas__h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#51617A;flex:none;max-width:9ch;line-height:1.25}
.okd-marcas__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex:1;min-width:0;overflow:hidden}
.okd-marcas__list li{flex:none;height:30px;display:flex;align-items:center}
.okd-marcas__list a{display:flex;align-items:center;height:100%}
.okd-marcas__list img{height:22px;max-width:80px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .18s,opacity .18s}
.okd-marcas__list li:hover img{filter:none;opacity:1}
.okd-marcas__more{flex:none;color:var(--okd-blue);font-weight:600;font-size:12.5px;text-decoration:none;white-space:nowrap}

/* La seccion unica de ofertas: el contador del dia vive en su cabecera */
.okd-ofertas__sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.okd-ofertas__count{font-weight:700;color:var(--okd-red);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.okd-promo-slot{background:linear-gradient(135deg,#F4F7FC,#fff);border:1px solid #E1E9F5;
	border-radius:14px;padding:14px 18px;text-align:center}
.okd-promo-slot__tag{display:inline-block;background:var(--okd-blue);color:#fff;font-weight:600;
	font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:8px}
.okd-promo-slot h3{margin:0 0 2px;font-size:18px;font-weight:700;color:#0E1726}
.okd-promo-slot__sub{color:#51617A;font-size:12.5px;margin:0 0 8px}
.okd-promo-slot__price{font-size:25px;font-weight:700;color:var(--okd-blue)}

/* Slot del hero con una oferta al azar. El cuadro exterior NO cambia: sigue
   siendo .okd-promo-slot (borde, radio 14, degradado, padding 14/18). Aqui solo
   se reparte el interior para que la foto tome el alto completo. */
.okd-promo-slot--auto{display:grid;grid-template-columns:132px 1fr;gap:16px;align-items:center;
	text-decoration:none;color:inherit;min-height:150px;transition:border-color .18s,box-shadow .18s}
.okd-promo-slot--auto:hover{border-color:var(--okd-blue);box-shadow:0 6px 18px rgba(6,108,255,.13)}
.okd-promo-slot--auto:focus-visible{outline:2px solid var(--okd-blue);outline-offset:2px}
.okd-promo-slot__foto{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
/* Las fotos del catalogo traen fondo BLANCO OPACO: el 96% son JPEG, que no admite
   transparencia, y los PNG del ranking tambien son opacos (medido con el canal
   alfa, no supuesto). multiply vuelve invisible ese blanco sobre el degradado del
   cuadro y el producto queda como recortado. De 60 fotos del ranking, NINGUNA
   tiene fondo de color: por eso es seguro. Si algun dia entra una con fondo
   oscuro se vera oscurecida, no rota. */
.okd-promo-slot__foto img{max-width:100%;max-height:100%;width:auto;height:auto;
	object-fit:contain;display:block;mix-blend-mode:multiply}
.okd-promo-slot__off{position:absolute;top:0;left:0;background:var(--okd-red);color:#fff;
	font-weight:700;font-size:11px;padding:3px 7px;border-radius:6px}
.okd-promo-slot__txt{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.okd-promo-slot--auto .okd-promo-slot__tag{margin:0}
.okd-promo-slot__nombre{font-size:12.5px;line-height:1.3;font-weight:600;color:#0E1726;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.okd-promo-slot__precios{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.okd-promo-slot--auto .okd-promo-slot__price{font-size:24px;line-height:1}
.okd-promo-slot__antes{font-size:12.5px;color:#8494AB;text-decoration:line-through}
.okd-promo-slot__cta{display:inline-flex;background:var(--okd-blue);color:#fff;font-size:12px;
	font-weight:600;padding:8px 15px;border-radius:8px;line-height:1;margin-top:1px}
/* Explicito a proposito: en este sitio [hidden] pierde contra el display de autor,
   y sin esto un producto sin descuento pintaria "-0%" y un precio anterior vacio. */
.okd-promo-slot__off[hidden],.okd-promo-slot__antes[hidden]{display:none}

/* "Recomendado para ti" — banner de primera visita. Ocupa el mismo hueco que el
   carrusel de recomendados y con un alto parecido al de dos tarjetas, para que la
   fila que comparte con "Lo mas vendido" no cambie de altura segun quien mire. */
.okd-reco-ban{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
	min-height:284px;padding:26px 28px;border-radius:14px;text-decoration:none;gap:8px;
	background-image:linear-gradient(135deg,var(--okd-blue),var(--okd-cyan));
	background-size:cover;background-position:center;transition:transform .18s ease}
.okd-reco-ban:hover{transform:translateY(-2px)}
.okd-reco-ban:focus-visible{outline:3px solid var(--okd-navy);outline-offset:2px}
.okd-reco-ban__t{font-family:Poppins,Inter,sans-serif;font-size:24px;font-weight:700;
	line-height:1.12;color:#fff;letter-spacing:-.01em;text-wrap:balance}
.okd-reco-ban__s{font-size:13.5px;color:rgba(255,255,255,.92);max-width:34ch;line-height:1.4}
.okd-reco-ban__cta{margin-top:8px;display:inline-flex;background:var(--okd-yellow);
	color:var(--okd-on-yellow);font-weight:600;font-size:13px;padding:10px 18px;border-radius:9px;line-height:1}
/* Explicito: en este sitio [hidden] pierde contra el display de autor, y sin esto
   el banner y el carrusel se pintarian los DOS a la vez. */
.okd-reco-ban[hidden],.okd-reco .okd-carousel[hidden],.okd-reco .okd-sec-head[hidden]{display:none}

/* Escala compacta de la tarjeta (−40%, scoped a la home) */
.okd-home .compu-card{padding:8px;border-radius:10px}
.okd-home .compu-card__badge{font-size:10px;padding:2px 7px}
.okd-home .compu-card__badge--rank{padding:4px 9px}
.okd-home .compu-card__fav{width:24px;height:24px;top:6px;right:6px}
.okd-home .compu-card__brand{height:18px;margin:6px 0 4px}
.okd-home .compu-card__brandlogo img{max-height:16px}
.okd-home .compu-card__brandlogo span{font-size:10px}
.okd-home .compu-card__sku{font-size:9px}
/* Título a 3 líneas completas: con 2 la tercera quedaba "mocha" en títulos largos
   (11.5px × 1.35 × 3 ≈ 47px). La tarjeta crece ~16px, pedido del usuario.
   Con --trim en el selector: la regla trim de card.css (clamp 2) empata 0-2-0 y
   ganaba por orden de carga — aquí 0-3-0 gana siempre. */
.okd-home .compu-card__title{font-size:11.5px;min-height:47px;margin-bottom:6px}
.okd-home .compu-card--trim .compu-card__title{-webkit-line-clamp:3;min-height:47px}
.okd-home .compu-card__pricetop{font-size:9.5px}
.okd-home .compu-card__price{font-size:15px}
.okd-home .compu-card__list{font-size:10.5px;margin-left:6px}
.okd-home .compu-card__save{font-size:10px}
.okd-home .compu-card__kueski{font-size:9.5px}
.okd-home .compu-card__foot{gap:6px;padding-top:7px}
.okd-home .compu-card__cta{font-size:10.5px;padding:6px 8px}
.okd-home .compu-card__compare a{font-size:10.5px;padding:6px 9px}

/* Grids de tarjetas */
.okd-cards{display:grid;gap:10px}
.okd-cards--3{grid-template-columns:repeat(3,1fr)}
.okd-cards--4{grid-template-columns:repeat(4,1fr)}

@media (prefers-reduced-motion:reduce){.okd-hero__panel{animation:none}}

/* Propuestas de valor (medidas de la maqueta v3: icono 40px + flecha sup-der) */
.okd-vp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.okd-vp{position:relative;border-radius:16px;padding:22px 20px 20px;color:#fff;min-height:168px;
	display:flex;flex-direction:column;justify-content:space-between;
	box-shadow:0 1px 2px rgba(10,26,55,.05),0 10px 30px rgba(10,26,55,.07);
	transition:transform .14s ease}
.okd-vp:hover{transform:translateY(-3px)}
a.okd-vp{text-decoration:none;color:#fff}
.okd-vp--1{background:linear-gradient(140deg,var(--okd-blue),var(--okd-cyan))}
.okd-vp--2{background:linear-gradient(140deg,#0b5bd6,var(--okd-purple))}
.okd-vp--3{background:linear-gradient(140deg,#00a7e0,#0a5fd0)}
.okd-vp--4{background:linear-gradient(140deg,var(--okd-purple),#5b45ff)}
.okd-vp__ico{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.18);
	display:grid;place-items:center;flex:0 0 auto}
.okd-vp__ico svg{width:22px;height:22px}
.okd-vp__arrow{position:absolute;top:22px;right:20px;opacity:.55}
.okd-vp__arrow svg{width:18px;height:18px}
.okd-vp h3{margin:14px 0 4px;font-size:17px;font-weight:700;line-height:1.15;color:#fff}
.okd-vp p{margin:0;font-size:13px;opacity:.92;line-height:1.35;color:#fff}

/* Banda de login (maqueta: icono 34px + texto 17px con small 13px y link azul) */
.okd-signin{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.okd-signin__txt{display:flex;gap:14px;align-items:flex-start;flex:1 1 320px}
.okd-signin__txt svg{width:34px;height:34px;color:#0E1726;flex:0 0 auto;margin-top:2px}
.okd-signin p{margin:0;font-size:17px;font-weight:600;line-height:1.4;color:#0E1726}
.okd-signin small{color:#51617A;font-size:13px;font-weight:400}
.okd-signin small a{color:var(--okd-blue);font-weight:600;text-decoration:none}
.okd-signin__acts{display:flex;gap:12px;flex-wrap:wrap}
/* Banner HP Financial Services: foto a la izquierda con degradado al azul marino
   del texto; en angosto la foto va arriba y el degradado baja. */
.okd-hpfs{display:grid;grid-template-columns:1.1fr 1fr;background:#0E1726;border-radius:16px;overflow:hidden;color:#fff;
	text-decoration:none;min-height:260px}
.okd-hpfs:hover{color:#fff}
.okd-hpfs__img{position:relative;min-height:220px}
.okd-hpfs__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.okd-hpfs__img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,23,38,0) 55%,#0E1726 100%)}
.okd-hpfs__txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:30px 36px 30px 22px}
.okd-hpfs__kicker{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#FFD400}
.okd-hpfs h2{font-family:Poppins,Inter,sans-serif;font-size:24px;line-height:1.2;margin:0;letter-spacing:-.01em;text-wrap:balance;color:#fff}
.okd-hpfs p{margin:0;font-size:14.5px;line-height:1.5;color:#C9D4E5;max-width:46ch}
.okd-hpfs .okd-btn{margin-top:6px}
@media (max-width:860px){
	.okd-hpfs{grid-template-columns:1fr}
	.okd-hpfs__img{min-height:190px}
	.okd-hpfs__img::after{background:linear-gradient(180deg,rgba(14,23,38,0) 55%,#0E1726 100%)}
	.okd-hpfs__txt{padding:6px 22px 26px}
}
/* Variante de empresa: el detalle va en su propia linea debajo del titular */
.okd-signin--b2b{background:linear-gradient(90deg,#fff 0,#F4F7FC 100%)}
.okd-signin--b2b small{display:block;margin-top:4px}

/* Recomendado + Lo más vendido */
.okd-reco-split{display:grid;grid-template-columns:1fr 1.6fr;gap:12px;align-items:stretch}
/* Anti grid-blowout, la misma defensa que ya tienen .okd-split y .okd-dod. Hizo
   falta desde que "Recomendado para ti" es un carrusel: su ancho INTRINSECO (4
   tarjetas en fila) desbordaba la columna 1fr y le comia el espacio al 1.6fr de
   al lado. Medido: el reparto pasaba de 38/62 a 79/21 y las tarjetas de 215px a
   461px. El grid no avisa de nada, solo reparte mal.
   OJO al reproducirlo: hacen falta las tarjetas REALES en el carrusel Y los 9
   circulos de "Lo mas vendido"; con cualquiera de los dos lados vacio el
   desbordamiento no se dispara y todo parece correcto. */
.okd-reco-split>*{min-width:0}
.okd-cards--2{grid-template-columns:1fr 1fr}
.okd-bs{display:grid;grid-template-columns:200px 1fr;background:#fff;border-radius:18px;overflow:hidden;
	box-shadow:0 1px 2px rgba(10,26,55,.05),0 10px 30px rgba(10,26,55,.07)}
.okd-bs__panel{background:linear-gradient(160deg,var(--okd-purple-deep),var(--okd-purple));color:#fff;padding:20px 18px;
	position:relative;overflow:hidden}
.okd-bs__panel h2{font-size:24px;margin:0 0 8px;font-weight:700;line-height:1.1;color:#fff}
.okd-bs__panel p{margin:0;font-size:14px;opacity:.85;line-height:1.4;color:#fff}
/* Doodles de la maqueta: figuras delineadas al 14% en la esquina inferior izquierda. */
.okd-bs__doodle{position:absolute;bottom:-30px;left:-20px;width:190px;opacity:.14;pointer-events:none}
.okd-bs__doodle svg{width:100%;height:auto}
/* 3x3: círculos grandes (9 categorías curadas). */
/* Lo mas vendido: carrusel de productos (2 a la vista) junto al panel morado.
   Las tarjetas son las mismas trim del resto de la home. */
.okd-bs__car{padding:14px 14px 12px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.okd-bs__car .okd-carousel{min-width:0}
.okd-bs__link{display:inline-block;margin-top:14px;color:#fff;font-weight:600;font-size:13px;
	text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.5)}
.okd-bs__link:hover{color:var(--okd-yellow);text-decoration-color:var(--okd-yellow)}

/* ── Reseñas de Google ── */
.okd-gr-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.okd-gr-score{display:flex;align-items:center;gap:10px}
.okd-gr-score b{font-size:20px;font-weight:700;color:#0E1726}
.okd-gr-rating{font-size:16px;font-weight:700;color:#0E1726}
.okd-star{font-style:normal;color:#E1E9F5;font-size:17px;line-height:1}
.okd-star--on{color:#FBBC04}
.okd-gr-meta{display:flex;align-items:center;gap:8px;flex:1}
.okd-gr-meta a{color:#51617A;font-size:13px;text-decoration:underline}
.okd-gr-meta a:hover{color:var(--okd-blue)}
.okd-gr-cards{align-items:stretch}
.okd-gr-card{background:#fff;border:1px solid #E1E9F5;border-radius:12px;padding:16px;
	display:flex;flex-direction:column;gap:10px}
.okd-gr-card__top{display:flex;align-items:center;gap:10px}
.okd-gr-avatar{width:38px;height:38px;border-radius:50%;background:var(--okd-blue);color:#fff;
	font-weight:700;font-size:16px;display:grid;place-items:center;flex:none}
.okd-gr-card__who b{display:block;font-size:13.5px;color:#0E1726}
.okd-gr-card__who small{color:#51617A;font-size:11.5px}
.okd-gr-card p{margin:0;font-size:13px;line-height:1.5;color:#2b2b2b;flex:1}
.okd-gr-card__foot{display:flex;align-items:center;justify-content:space-between}

/* Categorías */
/* Compra por categoria: 12 familias con los iconos del menu. Mismo circulo que
   "Lo mas vendido" (gris claro, trazo gris); al pasar, azul de marca y trazo blanco. */
.okd-fam-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px 6px}
.okd-fam{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 6px 10px;
	border-radius:12px;text-decoration:none;color:inherit;transition:background .15s}
.okd-fam:hover{background:#F4F7FC}
.okd-fam__circ{width:72px;height:72px;border-radius:50%;background:#EEF3FB;display:grid;place-items:center;
	margin-bottom:9px;transition:background .15s}
.okd-fam__circ svg{width:34px;height:34px;stroke:#51617A;fill:none;transition:stroke .15s}
.okd-fam:hover .okd-fam__circ{background:var(--okd-blue)}
.okd-fam:hover .okd-fam__circ svg{stroke:#fff}
.okd-fam__lbl{font-size:13px;font-weight:600;line-height:1.25;color:#0E1726;text-wrap:balance;max-width:14ch}
.okd-fam__n{font-size:11px;color:#8494AB;margin-top:3px;font-variant-numeric:tabular-nums}

/* Pills (botones de filtrado en vivo — reset anti :is(button) de Woodmart) */
.okd-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.okd-pills .okd-pill{appearance:none;border:1px solid #E1E9F5;background:#fff;color:#0E1726;
	border-radius:999px;font-size:11.5px;font-weight:600;padding:6px 13px;cursor:pointer;
	font-family:inherit;text-transform:none;letter-spacing:normal;min-height:0;
	line-height:1.3;box-shadow:none;text-decoration:none}
.okd-pills .okd-pill:hover{border-color:var(--okd-blue);color:var(--okd-blue);background:#fff}
.okd-pills .okd-pill.is-on{border:2px solid var(--okd-blue);color:var(--okd-blue);padding:5px 12px}
.okd-hot-empty{color:#51617A;font-size:13px;padding:18px 8px;margin:0}

/* Oferta del día */
.okd-dod{display:grid;grid-template-columns:185px 1fr;gap:12px;align-items:stretch}
.okd-dod>*{min-width:0} /* anti grid-blowout: el carrusel no infla la columna */
.okd-dod__renew{margin:0;font-size:10.5px;line-height:1.4;opacity:.85;color:#fff}
.okd-dod__panel{border:5px solid var(--okd-yellow);border-radius:18px;padding:18px 14px;color:#fff;
	text-align:center;background:linear-gradient(160deg,#00b3c8,#0a3f92);
	display:flex;flex-direction:column;justify-content:center;gap:12px}
.okd-dod__panel h2{margin:0;font-size:19px;line-height:1.05;font-weight:700;color:var(--okd-yellow);text-transform:uppercase}
.okd-dod__panel h2 small{display:block;color:#fff;font-size:12.5px;font-weight:600}
.okd-count{display:flex;justify-content:center;gap:7px;font-variant-numeric:tabular-nums}
.okd-count span b{display:block;font-size:17.5px;font-weight:700;line-height:1;color:#fff}
.okd-count span small{font-size:9px;opacity:.85;color:#fff}
.okd-count i{font-style:normal;font-size:15px;font-weight:700;color:#fff}
.okd-dod .okd-btn{align-self:center}

/* Banner morado + Sigue comprando */
.okd-split{display:grid;grid-template-columns:1.05fr 1.35fr;gap:12px;align-items:stretch}
.okd-promo-banner{border-radius:18px;padding:24px 22px;color:#fff;position:relative;overflow:hidden;
	background:linear-gradient(125deg,#5b45ff 0%,var(--okd-purple) 55%,var(--okd-blue) 130%);
	display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:200px}
.okd-promo-banner h2{font-size:clamp(20px,1.8vw,26px);margin:0;font-weight:700;line-height:1.1;color:#fff}
.okd-promo-banner p{margin:0 0 10px;opacity:.9;font-size:13.5px;color:#fff}
.okd-promo-banner .okd-btn{align-self:flex-start}
/* Pill en la esquina derecha del encabezado (sec-head es flex space-between). */
.okd-recent-pill{display:inline-flex;border:1.5px solid var(--okd-blue);color:var(--okd-blue);
	font-weight:600;font-size:11.5px;border-radius:999px;padding:5px 12px;margin:0;flex:none}
/* ── Carrusel genérico (Sigue comprando 3-up, Ofertas del momento 4-up) ──
   .okd-car-scroll pisa el grid de .okd-cards (misma especificidad, definido después).
   min-width:0 en los items del split: sin él, el ancho intrínseco del carrusel
   infla la columna del panel y aplasta el banner (grid blowout). */
.okd-split>*{min-width:0}
.okd-carousel{position:relative;min-width:0;max-width:100%}
.okd-car-scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
	scroll-behavior:smooth;scrollbar-width:none;gap:10px;max-width:100%}
.okd-car-scroll::-webkit-scrollbar{display:none}
.okd-car-scroll>*{scroll-snap-align:start;min-width:0}
/* Ancho de tarjeta coherente entre secciones: mismo tamaño visual, cambia cuántas
   caben por vista según el ancho del contenedor (panel angosto=3, panel full=4). */
.okd-car-scroll--3>*{flex:0 0 calc((100% - 20px)/3)}
.okd-car-scroll--2>*{flex:0 0 calc((100% - 10px)/2)}
.okd-car-scroll--4>*{flex:0 0 calc((100% - 30px)/4)}
.okd-carousel .okd-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
	width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;
	line-height:1;border-radius:50%;background:#fff;color:var(--okd-blue);
	border:1px solid #E1E9F5;box-shadow:0 4px 14px rgba(10,26,55,.18);cursor:pointer;
	display:grid;place-items:center;padding:0}
.okd-carousel .okd-car-btn:hover{border-color:var(--okd-blue)}
.okd-carousel .okd-car-btn[hidden]{display:none}
.okd-carousel .okd-car-btn svg{width:18px;height:18px}
.okd-carousel .okd-car-btn--prev{left:-14px}
.okd-carousel .okd-car-btn--next{right:-14px}
.okd-carousel .okd-car-btn:disabled{opacity:.35;cursor:default;border-color:#E1E9F5}
@media (max-width:620px){.okd-car-scroll>*{flex:0 0 calc((100% - 10px)/2)}} /* movil: 2 por vista en todos los carruseles */
/* [hidden] de la hoja UA pierde contra el display de autor de arriba: reafirmarlo. */
.okd-recent-pill[hidden]{display:none}

/* Responsive — UN solo bloque por breakpoint (reglas movidas de sus secciones, sin cambios) */
@media (max-width:1080px){
	.okd-marcas__row{flex-wrap:wrap;gap:12px 18px}
	.okd-marcas__list{order:3;flex:1 1 100%;justify-content:flex-start;gap:22px;overflow-x:auto;scrollbar-width:none}
	.okd-hero__card{grid-template-columns:1fr;padding:20px}
	.okd-cards--4{grid-template-columns:repeat(2,1fr)}
	.okd-vp-grid{grid-template-columns:repeat(2,1fr)}
	.okd-reco-split{grid-template-columns:1fr}
	.okd-bs{grid-template-columns:1fr}
	.okd-fam-grid{grid-template-columns:repeat(4,1fr)}
	.okd-dod{grid-template-columns:1fr}
	.okd-split{grid-template-columns:1fr}
}
@media (max-width:620px){
	.okd-cards--3,.okd-cards--4{grid-template-columns:1fr 1fr}
	.okd-reco-ban{min-height:200px;padding:20px}
	.okd-reco-ban__t{font-size:20px}
	.okd-promo-slot--auto{grid-template-columns:104px 1fr;gap:12px}
	.okd-vp-grid{grid-template-columns:1fr 1fr}
	.okd-fam-grid{grid-template-columns:repeat(3,1fr)}
	.okd-fam__circ{width:60px;height:60px}
	.okd-fam__n{display:none}
}