/* =========================================================
   COMPRALIA — Hoja de estilos principal
   ========================================================= */

:root {
  --ink: #131921;            /* cabecera / texto fuerte */
  --ink-2: #1c2733;          /* cabecera degradado */
  --body: #3a4552;           /* texto normal */
  --muted: #6c7681;          /* texto secundario */
  --bg: #ffffff;             /* fondo general */
  --card: #ffffff;
  --line: #e8eaed;
  --accent: #c85a1e;         /* acción, sobrio */
  --accent-hover: #a8480f;
  --accent-soft: #fbf1ea;
  --blue: #14568f;           /* enlaces */
  --star: #e5940b;           /* estrellas */
  --ok: #0a7040;             /* stock / éxito */
  --danger: #b12704;         /* precio rebajado */
  --radius: 8px;
  --shadow: none;
  --shadow-hover: 0 4px 16px rgba(19, 25, 33, .08);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }

/* =========================================================
   ANIMACIONES — transiciones de página y micro-interacciones
   ========================================================= */

/* Transición nativa al navegar entre páginas (Chrome/Edge/Safari nuevos) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .22s ease both; }
::view-transition-new(root) { animation: vtIn .30s cubic-bezier(.22,.9,.28,1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* Entrada de la página (fallback para navegadores sin View Transitions) */
body { animation: pageIn .38s cubic-bezier(.22,.9,.28,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
body.leaving { opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }

/* Aparición escalonada de tarjetas y bloques */
.anim-up { opacity: 0; transform: translateY(16px); }
.anim-up.in {
  opacity: 1; transform: none;
  transition: opacity .45s cubic-bezier(.22,.9,.28,1), transform .45s cubic-bezier(.22,.9,.28,1);
}

/* Cambio de pestaña de ofertas */
.rail.swapping { opacity: 0; transform: translateY(8px); }
.rail { transition: opacity .22s ease, transform .22s ease; }

/* Salvaguarda: ningún icono SVG puede desbordarse */
svg { flex-shrink: 0; }
.btn svg, .s-badge svg, .hot-tab svg, .p-add svg, .h-action svg { width: 18px; height: 18px; }
.s-badge svg { width: 12px; height: 12px; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
/* Los listados de producto aprovechan más el ancho */
.container.wide { max-width: 1660px; }

/* Red de seguridad para elementos con reveal */
.reveal[data-split] { opacity: 1; transform: none; }

/* =============== BARRA SUPERIOR =============== */
.topbar {
  background: var(--ink);
  color: #aeb8c6;
  font-size: 12.5px;
  padding: 6px 0;
}
.topbar .container { display: flex; justify-content: space-between; gap: 16px; }
.topbar span strong { color: #fff; font-weight: 600; }
.topbar-links { display: flex; gap: 18px; }
.topbar-links a:hover { color: #fff; }

/* ---------- Cinta de avisos que pasa en bucle ----------
   El truco del bucle sin costura: el contenido va dos veces y la
   animación recorre exactamente la mitad, así que al reiniciar el
   fotograma es idéntico al de salida. Se para al pasar el ratón
   por si alguien quiere leer uno entero. */
.tb-cinta { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.tb-track { display: flex; width: max-content; animation: tb-desliza 34s linear infinite; }
.tb-cinta:hover .tb-track { animation-play-state: paused; }
.tb-item { padding-right: 46px; white-space: nowrap; position: relative; }
.tb-item::after {
  content: ""; position: absolute; right: 21px; top: 50%;
  width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: currentColor; opacity: .45;
}
@keyframes tb-desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============== MENÚ LATERAL DE CATEGORÍAS =============== */
.drawer-bg {
  position: fixed; inset: 0; background: rgba(19,25,33,.5); z-index: 500;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.drawer-bg.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(400px, 88vw);
  background: #fff; box-shadow: 6px 0 30px rgba(0,0,0,.22);
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.22,.9,.28,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer-bg.open .drawer { transform: none; }
.drawer-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.drawer-x svg { width: 20px; height: 20px; }
.drawer-x:hover { background: #f1f3f5; }

.mn-slider { position: relative; width: 100%; height: 100%; overflow: hidden; }
.mn-panel {
  position: absolute; inset: 0; overflow-y: auto; padding: 54px 0 30px;
  background: #fff; transition: transform .28s cubic-bezier(.22,.9,.28,1);
}
.mn-panel.root { padding-top: 58px; transform: none; z-index: 1; }
.mn-slider.level2 .mn-panel.root { transform: translateX(-28%); }
.mn-panel:not(.root) { transform: translateX(100%); z-index: 2; visibility: hidden; }
.mn-panel.active { transform: none; visibility: visible; }

.mn-camp {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 21px; font-weight: 700; color: var(--accent); padding: 4px 22px 14px;
}
.mn-camp:hover { color: var(--accent-hover); }
.mn-camp .mn-arrow { width: 20px; height: 20px; }
.mn-list { border-top: 1px solid var(--line); padding: 8px 0; margin: 0 22px; }
.mn-list.camp { border-top: none; padding-top: 0; margin-top: -6px; }
.mn-list li a {
  display: block; padding: 8px 0; font-size: 14px; color: var(--body);
}
.mn-list li a:hover { color: var(--accent-hover); }
.mn-sub {
  font-size: 19px; font-weight: 700; color: var(--ink);
  padding: 16px 22px 8px; border-top: 1px solid var(--line); margin-top: 8px;
}
.mn-cats { padding-bottom: 8px; }
.mn-cat-row { display: flex; align-items: stretch; }
.mn-cat-row:hover { background: #f5f7f9; }
.mn-cat-link {
  display: flex; align-items: center; gap: 14px; flex: 1;
  padding: 12px 8px 12px 22px; font-size: 15px; color: var(--ink);
}
.mn-cat-link:hover { color: var(--accent-hover); }
.mn-cat-more {
  padding: 0 20px; display: flex; align-items: center; color: var(--muted);
  border-left: 1px solid transparent;
}
.mn-cat-more:hover { color: var(--ink); background: #eef1f4; }
.mn-ico { display: flex; align-items: center; justify-content: center; color: var(--ink); }
.mn-ico svg { width: 22px; height: 22px; }
.mn-arrow { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.mn-foot { border-top: 1px solid var(--line); margin: 10px 22px 0; padding-top: 12px; }
.mn-foot a { display: block; padding: 7px 0; font-size: 13.5px; color: var(--blue); }
.mn-foot a:hover { text-decoration: underline; }

.mn-back {
  display: flex; align-items: center; gap: 8px; padding: 0 22px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.mn-back:hover { color: var(--ink); }
.mn-back svg { width: 16px; height: 16px; }
.mn-title { font-size: 20px; font-weight: 700; color: var(--ink); padding: 0 22px 12px; }
.mn-all {
  display: block; margin: 0 22px 8px; padding: 10px 14px; border-radius: 8px;
  background: #f5f7f9; font-size: 14px; font-weight: 600; color: var(--ink);
}
.mn-all:hover { background: #eaeef2; }
.mn-all.deal { color: var(--danger); }

/* =============== CABECERA =============== */
.header {
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.header-main {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 0;
}
.logo { display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; }
.logo-word {
  font-family: var(--font-display);
  font-weight: 800; font-size: 34px; letter-spacing: -0.8px; color: #fff;
}
.logo-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); display: inline-block; }
.logo-tag { display: block; font-size: 11px; color: #8d99aa; letter-spacing: .4px; margin-top: -5px; }

.search {
  flex: 1; display: flex; max-width: 900px;
  background: #fff; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; transition: border-color .15s;
}
.search:focus-within { border-color: var(--accent); }
.search input {
  flex: 1; border: none; outline: none; padding: 11px 16px;
  font-size: 14.5px; font-family: inherit; color: var(--ink); min-width: 0;
}
.search button {
  background: var(--accent); color: #fff; padding: 0 20px;
  display: flex; align-items: center; transition: background .15s;
}
.search button:hover { background: var(--accent-hover); }
.search button svg { width: 20px !important; height: 20px !important; }

.header-actions { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.h-action {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #dfe5ec; font-size: 11px; padding: 6px 12px; border-radius: 8px;
  position: relative; transition: background .15s;
}
.h-action:hover { background: rgba(255,255,255,.09); }
.h-action svg { width: 22px !important; height: 22px !important; }
.h-action .cart-count.bump { animation: cartBump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes cartBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); background: #fff; color: var(--accent); }
  100% { transform: scale(1); }
}
.h-action .cart-count {
  position: absolute; top: 0; right: 6px;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

/* Navegación de categorías */
.catnav { background: #fff; border-bottom: 1px solid var(--line); position: relative; }
.catnav .container { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.catnav .container > * { flex-shrink: 0; }
/* Aviso visual de que la barra continúa, en lugar de cortar a media palabra */
.catnav:after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 1px; width: 46px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 70%); pointer-events: none;
}
@media (min-width: 1180px) { .catnav:after { display: none; } }
.catnav .container::-webkit-scrollbar { display: none; }
.catnav a, .catnav .all {
  padding: 11px 14px; font-size: 13.5px; font-weight: 500; color: var(--body);
  white-space: nowrap; border-bottom: 2.5px solid transparent; transition: color .15s, border-color .15s;
}
.catnav a:hover, .catnav a.active, .catnav .all:hover { color: var(--accent-hover); border-bottom-color: var(--accent); }
.catnav .all {
  font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; cursor: pointer; background: none; border: none;
  border-bottom: 2.5px solid transparent; padding: 11px 14px; font-size: 13.5px; font-family: inherit;
}
.catnav .all svg { width: 17px !important; height: 17px !important; }
.catnav .allvis { color: var(--blue); font-weight: 500; }
.catnav .allvis:hover { color: var(--accent-hover); }
.mn-visual {
  display: flex; gap: 12px; align-items: flex-start; margin: 12px 22px 4px;
  padding: 14px; border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .2s, background .2s;
}
.mn-visual:hover { border-color: #c9d2dd; background: #fafbfc; }
.mn-visual svg { width: 22px !important; height: 22px !important; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.mn-visual span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mn-visual b { display: block; font-size: 14px; color: var(--ink); }
.catnav a.sell { margin-left: auto; color: var(--blue); font-weight: 600; }

/* =============== BANNER DE TIENDA =============== */
.banner {
  background: linear-gradient(180deg, #1c2733 0%, #22303e 100%);
  color: #fff; border-bottom: 3px solid var(--accent);
}
.banner-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 56px;
  align-items: center; padding-top: 34px; padding-bottom: 34px;
}
.bn-text { max-width: 620px; }
.bn-kicker {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: #f0a06a; margin-bottom: 10px;
}
.bn-text h1 {
  font-size: clamp(22px, 2.4vw, 29px); font-weight: 700; letter-spacing: -.5px;
  line-height: 1.2; margin-bottom: 9px;
}
.bn-text p { font-size: 14px; color: #b3bdc9; max-width: 520px; margin-bottom: 16px; }
.bn-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.bn-deal { display: flex; justify-content: flex-end; }

/* Tarjeta de la oferta del día, compacta dentro del banner */
.bn-deal .deal-card { width: 100%; padding: 14px 16px; box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.bn-deal .deal-img { height: 96px; margin: 2px 0 6px; }
.bn-deal .deal-q { font-size: 46px; }
.bn-deal .deal-price { font-size: 24px; }
.bn-deal .deal-price small { font-size: 14px; }
.bn-deal .deal-name { font-size: 13.5px; }
.bn-deal .cd-cell { font-size: 15px; min-width: 40px; padding: 4px 7px 3px; }
.bn-deal .deal-timer-label, .bn-deal .deal-progress span { font-size: 10.5px; }
.bn-deal .deal-btn { padding: 10px 18px; font-size: 13.5px; margin-top: 10px; }
.bn-deal .deal-rating { margin: 4px 0 6px; }

/* Rejilla de escaparate */
.storefront { margin-top: 22px; position: relative; z-index: 2; padding-bottom: 8px; }
.sf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sf-box {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 20px; display: flex; flex-direction: column; color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.sf-box:hover { border-color: #c3ccd6; box-shadow: var(--shadow-hover); }
.sf-box:hover .sf-more { color: var(--accent-hover); text-decoration: underline; }
.sf-box h2 { font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; margin-bottom: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sfm-item { display: block; }
.sfm-img { height: 108px !important; }
.sfm-img {
  background: #fff; border-radius: 6px; height: 88px;
  display: flex; align-items: center; justify-content: center; padding: 4px; overflow: hidden;
}
.sf-mini img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.sf-box:hover .sf-mini img { transform: scale(1.04); }
.sfm-price { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; margin-top: 5px; }
.sfm-price i { font-style: normal; color: var(--danger); font-weight: 700; }

.sf-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sfc-item { display: block; text-align: center; }
.sfc-img {
  display: flex; align-items: center; justify-content: center; height: 84px;
  background: #fff; border-radius: 6px; padding: 4px; overflow: hidden;
}
.sfc-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sfc-name {
  display: block; font-size: 12px; color: var(--body); margin-top: 6px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sf-tom { display: block; text-align: center; }
.sf-tom img { height: 120px; object-fit: contain; margin: 4px auto 10px; mix-blend-mode: multiply; }
.sft-name { display: block; font-size: 12.5px; color: var(--body); line-height: 1.3; margin-bottom: 6px; }
.sft-prices { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.sft-prices s { font-size: 13px; color: var(--muted); }
.sft-prices b { font-size: 20px; color: var(--ok); font-weight: 700; }
.sft-save { display: block; font-size: 11.5px; color: var(--ok); font-weight: 600; margin-top: 4px; }
.sf-tomlist { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.sf-tomlist a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--body); }
.sf-tomlist a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tomlist a b { color: var(--ok); flex-shrink: 0; }
.sf-tomlist a:hover span { color: var(--accent-hover); }
.sf-tomfoot { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.sf-more { display: block; margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--blue); font-weight: 500; }

/* =============== HERO =============== */
.hero {
  background: linear-gradient(180deg, #1c2733 0%, #233140 100%);
  border-bottom: 3px solid var(--accent);
  color: #fff; overflow: hidden;
}
.hero .container {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px;
  align-items: center; padding-top: 52px; padding-bottom: 56px;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  padding: 5px 13px; border-radius: 100px; font-size: 12.5px; font-weight: 600;
  color: #ffc9a3; margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.12; font-weight: 800; letter-spacing: -1px; margin-bottom: 16px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p.lead { font-size: 16.5px; color: #b9c3d1; max-width: 480px; margin-bottom: 26px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14.5px; border-radius: 8px;
  padding: 13px 26px; transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:active { transform: scale(.96); }
.btn { position: relative; overflow: hidden; }
.p-add:active, .hot-tab:active, .qty button:active { transform: scale(.95); }
.p-add { transition: background .18s, color .18s, transform .12s; }
.hot-tab { transition: background .18s, color .18s, border-color .18s, transform .12s; }
.cd-cell { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.countdown.tick .cd-cell:last-of-type { transform: scale(1.12); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.hero-stats { display: flex; gap: 34px; margin-top: 34px; }
.hero-stat b { display: block; font-size: 22px; font-family: var(--font-display); font-weight: 800; color: #fff; }
.hero-stat span { font-size: 12.5px; color: #94a1b3; }

.hero-visual { position: relative; min-height: 300px; }
.hero-card {
  position: absolute; background: #fff; border-radius: 14px; padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35); width: 200px; color: var(--ink);
}
.hero-card img { height: 130px; object-fit: contain; margin: 0 auto 10px; }
.hero-card .hc-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; height: 33px; overflow: hidden; }
.hero-card .hc-price { font-size: 17px; font-weight: 800; margin-top: 6px; }
.hero-card .hc-tag {
  position: absolute; top: 10px; left: 10px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
}
.hero-card.hc-1 { top: 0; right: 190px; transform: rotate(-4deg); animation: float1 7s ease-in-out infinite; }
.hero-card.hc-2 { top: 60px; right: 0; transform: rotate(3deg); animation: float2 8s ease-in-out infinite; }
@keyframes float1 { 0%,100% { transform: rotate(-4deg) translateY(0);} 50% { transform: rotate(-4deg) translateY(-12px);} }
@keyframes float2 { 0%,100% { transform: rotate(3deg) translateY(0);} 50% { transform: rotate(3deg) translateY(-16px);} }

/* =============== CHOLLO DEL DÍA =============== */
.deal-card {
  background: #fff; color: var(--ink); border-radius: 10px; padding: 20px 22px;
  width: min(370px, 100%); margin-left: auto;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}
.deal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.deal-flag { font-size: 12px; font-weight: 800; letter-spacing: .8px; color: var(--danger); }
.deal-pct {
  background: var(--danger); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: 18px; padding: 4px 12px; border-radius: 8px;
}
.deal-img { display: flex; align-items: center; justify-content: center; height: 170px; margin: 4px 0 10px; position: relative; }
.deal-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.deal-img.teaser img { filter: blur(14px) saturate(.4); opacity: .55; }
.deal-img.done img { filter: grayscale(1); opacity: .35; }
.deal-q {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 64px; font-weight: 800; color: var(--ink);
}
.deal-name { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.3; color: var(--ink); }
a.deal-name:hover { color: var(--accent-hover); }
.deal-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 5px 0 8px; }
.deal-prices { display: flex; align-items: baseline; gap: 10px; }
.deal-price { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--danger); }
.deal-price small { font-size: 16px; }
.deal-old { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.deal-progress { margin: 10px 0 4px; }
.deal-progress .dp-track { height: 8px; background: #f1e3d8; border-radius: 4px; overflow: hidden; }
.deal-progress .dp-fill { height: 100%; background: var(--danger); border-radius: 4px; }
.deal-progress span { font-size: 11.5px; color: var(--danger); font-weight: 700; display: block; margin-top: 5px; }
.deal-timer-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-top: 10px; }
.countdown { display: flex; align-items: center; gap: 6px; margin: 6px 0 4px; font-weight: 800; color: var(--ink); }
.countdown b { font-size: 20px; opacity: .4; }
.cd-cell {
  background: var(--ink); color: #fff; border-radius: 8px; padding: 7px 10px 5px;
  font-family: var(--font-display); font-size: 22px; font-weight: 800; min-width: 52px; text-align: center;
}
.cd-cell i { display: block; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: #93a0b1; }
.countdown.mini { display: inline-flex; gap: 3px; margin: 0; vertical-align: middle; }
.countdown.mini .cd-cell { font-size: 13px; padding: 3px 6px 2px; min-width: 34px; border-radius: 5px; }
.countdown.mini .cd-cell i { font-size: 7px; }
.countdown.mini b { font-size: 13px; }
.deal-btn { width: 100%; margin-top: 12px; }
.p-badge.deal { background: var(--danger); }
.bb-deal {
  background: #fdeaea; border: 1px solid #f5c6c6; color: var(--danger);
  font-size: 12.5px; border-radius: 8px; padding: 9px 12px; margin-bottom: 12px;
}
.bb-deal b { font-weight: 800; }
.bb-deal.flash {
  background: #fdf0ec; border: 1px solid #f0cbbd; color: var(--danger);
  display: flex; flex-direction: column; gap: 7px; padding: 12px 14px;
}
.bb-deal.flash .fl-tag { font-size: 13px; font-weight: 800; letter-spacing: .4px; }
.bb-deal.flash .fl-txt { font-size: 12px; display: flex; align-items: center; gap: 6px; opacity: .95; }
.bb-deal.flash .cd-cell { background: var(--ink); color: #fff; }
.bb-deal.flash .cd-cell i { color: #9aa5b1; }
.bb-deal.flash .countdown b { color: var(--danger); }

/* Marca del evento Flash */
.flash-word { color: #f0873a; font-weight: 800; }

/* =============== OFERTAS DE HOY (banda evento) =============== */
.hot-band {
  background: #1c2733; border: 1px solid #2b3846;
  border-radius: 10px; padding: 24px 26px 18px; color: #fff;
}
.hot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.hot-kicker {
  display: inline-block; background: var(--danger); color: #fff; font-size: 11px;
  font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 5px; margin-bottom: 10px;
}
.hot-band h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.hot-band .hot-head p { color: #b9c3d1; font-size: 13.5px; max-width: 480px; margin-top: 6px; }
.hot-timer { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hot-timer-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #ffb3ab; }
.countdown.light { margin: 0; color: #fff; }
.countdown.light .cd-cell { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); }
.countdown.light .cd-cell i { color: #a6b1c0; }
.countdown.light b { color: #fff; opacity: .5; }
.hot-band .rail { padding-bottom: 8px; }
.hot-band .rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); }
.p-badge.hot { background: var(--danger); }
.p-badge.semana { background: var(--ok); }
.p-badge.tomo { background: #2c62b8; }
.p-card.tomorrow .tp-row { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.tp-col { display: flex; flex-direction: column; }
.tp-col span { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.tp-col b { font-size: 14px; font-weight: 800; color: var(--muted); text-decoration: line-through; }
.tp-col.next b { color: var(--ok); text-decoration: none; font-size: 19px; }
.tp-arrow { color: #c3ccd8; }
.tp-save { font-size: 11.5px; font-weight: 700; color: var(--ok); margin-top: 5px; }
.p-add.tomo { background: #eef3fb; color: #1d4f9e; font-size: 12.5px; }
.p-add.tomo:hover { background: #2c62b8; color: #fff; }
.catnav a.hotlink { color: var(--danger); font-weight: 800; }
.catnav a.hotlink:hover { border-bottom-color: var(--danger); }
.catnav a.tomlink { color: #2c62b8; font-weight: 700; }
.catnav a.tomlink:hover { border-bottom-color: #2c62b8; }

/* Pestañas de categoría dentro de la banda de ofertas */
.hot-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
.hot-tabs::-webkit-scrollbar { display: none; }
.hot-tab {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #dfe5ec; font-size: 13px; font-weight: 600; padding: 8px 14px;
  border-radius: 100px; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.hot-tab:hover { background: rgba(255,255,255,.16); }
.hot-tab.active { background: #fff; color: var(--ink); border-color: #fff; }
.hot-tab .ht-count {
  font-size: 11px; font-weight: 700; opacity: .65; margin-left: 3px;
}
.hot-tab.active .ht-count { color: var(--danger); opacity: 1; }

/* Mañana en oferta */
.tomorrow-band {
  background: #1b2c3d; border: 1px solid #26394d;
  border-radius: 10px; padding: 24px 26px 20px; color: #fff;
}
.tomorrow-band .section-head { margin-bottom: 16px; align-items: flex-start; }
.tomorrow-band h2 { color: #fff; }
/* Texto legible dentro de las bandas oscuras */
.tomorrow-band .section-head h2,
.hot-band .section-head h2,
.hot-band h2 { color: #fff; }
.tomorrow-band .section-head .sub,
.hot-band .section-head .sub { color: #a9b7c9; }
.tomorrow-band .section-head a.more,
.hot-band .section-head a.more { color: #9fc2ec; }
.tomorrow-band .section-head, .hot-band .hot-head { align-items: flex-start; }

.tomorrow-band .sub { color: #a9b7c9; max-width: 520px; }
.tom-kicker {
  display: inline-block; background: #2c62b8; color: #fff; font-size: 11px;
  font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 5px; margin-bottom: 9px;
}
.tom-timer { text-align: right; }
.tom-timer .cd-cell { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); color: #fff; }
.tom-timer .cd-cell i { color: #93a4bb; }
.tom-timer .countdown b { color: #fff; opacity: .45; }
.btn-ghost.dark { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.btn-ghost.dark:hover { background: rgba(255,255,255,.18); }

.t-card {
  background: #fff; border-radius: 12px; padding: 14px; position: relative;
  display: flex; flex-direction: column; color: var(--ink);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.t-flag {
  position: absolute; top: 10px; left: 10px; background: #2c62b8; color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 5px;
}
.t-img { height: 120px; display: flex; align-items: center; justify-content: center; margin: 14px 0 8px; }
.t-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.t-name {
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 35px;
}
a.t-name:hover { color: var(--accent-hover); }
.t-prices { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.t-col { display: flex; flex-direction: column; }
.t-col span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.t-col b { font-size: 15px; font-weight: 800; color: var(--muted); text-decoration: line-through; }
.t-col.next b { color: var(--ok); text-decoration: none; font-size: 18px; }
.t-arrow { color: #c3ccd8; font-size: 16px; }
.t-save { font-size: 11.5px; font-weight: 700; color: var(--ok); margin-top: 7px; }
.rail#rail-tomorrow, .tomorrow-band .rail { grid-auto-columns: 190px; }
.tomorrow-band .rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); }

/* Qué es Mercalia */
.about-wrap {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 36px 40px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start;
}
.about-kicker {
  display: inline-block; background: var(--accent-soft); color: var(--accent-hover);
  font-size: 11.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  padding: 5px 11px; border-radius: 5px; margin-bottom: 12px;
}
.about-intro h2 {
  font-family: var(--font-display); font-size: 27px; font-weight: 800; color: var(--ink);
  letter-spacing: -.7px; line-height: 1.22; margin-bottom: 14px;
}
.about-intro p { font-size: 14.5px; margin-bottom: 12px; max-width: 560px; }
.about-intro p b { color: var(--ink); }
.about-cards { display: flex; flex-direction: column; gap: 12px; }
.ab-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px;
  position: relative; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ab-card:hover { border-color: #cfd6dd; box-shadow: var(--shadow); }
.ab-num {
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  color: var(--accent); letter-spacing: 1px;
}
.ab-card b { display: block; color: var(--ink); font-size: 15.5px; margin: 4px 0 6px; }
.ab-card p { font-size: 13.5px; color: var(--muted); }

/* Tira de marcas */
.brands-strip {
  background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 22px 24px; margin-top: 26px; text-align: center;
}
.brands-strip .bs-label {
  display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--muted); margin-bottom: 12px;
}
.brands-strip .bs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.brands-strip .bs-row span {
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  color: #b8c1cc; letter-spacing: -.3px; transition: color .15s;
}
.brands-strip .bs-row span:hover { color: var(--ink); }

/* =============== FRANJA DE CONFIANZA =============== */
.trustbar { background: #fafbfc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trustbar .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 20px;
}
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.trust-item svg { width: 30px; height: 30px; color: var(--accent-hover); flex-shrink: 0; }
.trust-item b { display: block; color: var(--ink); font-size: 13.5px; }
.trust-item span { color: var(--muted); font-size: 12px; }

/* =============== SECCIONES =============== */
.section { padding: 40px 0 8px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px; gap: 16px;
}
.section-head h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  color: var(--ink); letter-spacing: -.4px;
}
.section-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.section-head a.more { color: var(--blue); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.section-head a.more:hover { text-decoration: underline; }

/* Tiles de categorías */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.cat-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 16px; text-align: center; transition: border-color .18s, box-shadow .18s;
}
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: #d6dde4; }
.cat-tile .ico { transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .2s; }
.cat-tile:hover .ico { background: #eaeef2; }
.cat-tile .ico {
  width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%;
  background: #f4f6f8; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.cat-tile .ico svg { width: 26px; height: 26px; }
.cat-tile b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.cat-tile span { font-size: 12px; color: var(--muted); }

/* =============== TARJETA DE PRODUCTO =============== */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.p-card {
  background: var(--card); border-radius: var(--radius);
  display: flex; flex-direction: column; position: relative;
  transition: box-shadow .2s ease;
}
.p-card:hover { box-shadow: var(--shadow-hover); }
.p-card .p-img {
  background: #fff; padding: 12px; height: 190px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.p-card .p-img img {
  max-height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform .38s cubic-bezier(.22,.9,.28,1);
}
.p-card:hover .p-img img { transform: scale(1.04); }
.p-card .p-name { transition: color .15s; }
.p-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 5px; color: #fff;
  text-transform: uppercase; letter-spacing: .3px;
}
.p-badge.top { background: var(--danger); }
.p-badge.nuevo { background: var(--blue); }
.p-badge.oferta { background: var(--ok); }
.p-body { padding: 4px 12px 16px; display: flex; flex-direction: column; flex: 1; }
.p-brand { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.p-name {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35;
  margin: 3px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 36px;
}
.p-name:hover { color: var(--accent-hover); }
.p-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.stars { display: inline-flex; color: var(--star); }
.stars svg { width: 13px; height: 13px; }
.p-flag {
  display: inline-block; background: var(--danger); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px;
}
.p-flag.week { background: var(--ok); }
/* Filas de altura fija: todas las tarjetas miden lo mismo */
.p-flag-row { min-height: 24px; margin-top: auto; padding-top: 2px; }
.p-price-row { display: flex; align-items: baseline; gap: 7px; }
.p-price { font-size: 21px; font-weight: 700; color: var(--ink); }
.p-price small { font-size: 13px; font-weight: 700; }
.p-old-row { min-height: 17px; font-size: 12px; color: var(--body); margin-top: 1px; }
.p-old-row s { color: var(--body); font-weight: 500; }
.p-save-row { min-height: 16px; font-size: 11.5px; color: var(--danger); font-weight: 600; margin-top: 1px; }
.p-disc { font-size: 12px; font-weight: 700; color: var(--danger); }
.p-meta { font-size: 11.5px; color: var(--ok); font-weight: 600; margin-top: 4px; }
.p-meta.warn { color: #b45309; }
.p-add {
  margin-top: 12px; background: #fff; color: var(--ink); border: 1px solid #d5d9dd;
  font-weight: 500; font-size: 13px; padding: 9px; border-radius: 100px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s, border-color .15s;
}
.p-add:hover { background: #f5d06a; border-color: #dcb44a; }
.p-add svg { width: 16px; height: 16px; }

/* Carrusel horizontal en portada */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 186px; gap: 12px; overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x proximity; }
/* Tarjetas más compactas dentro de los carruseles */
.rail .p-card .p-img { height: 140px; padding: 8px; }
.rail .p-card .p-body { padding: 4px 10px 12px; }
.rail .p-name { font-size: 12.5px; min-height: 34px; }
.rail .p-price { font-size: 18px; }
.rail .p-brand { font-size: 10px; }
.rail .p-rating { margin-bottom: 5px; }
.rail .p-flag { font-size: 10.5px; padding: 2px 7px; margin: 0 0 5px; }
.rail .p-add { font-size: 12px; padding: 7px; margin-top: 9px; }
.rail .p-meta { font-size: 11px; }
.rail .p-old-row { font-size: 11px; min-height: 15px; }
.rail .p-save-row { font-size: 10.5px; min-height: 14px; }
.rail .p-flag-row { min-height: 21px; }
.rail .p-card { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: #c9d2dd; border-radius: 4px; }

/* =============== LOS MÁS VENDIDOS (ranking) =============== */
.rank-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr);
  gap: 18px; overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x proximity;
}
.rank-row::-webkit-scrollbar { height: 8px; }
.rank-row::-webkit-scrollbar-thumb { background: #cdd5de; border-radius: 4px; }
.rank-item { position: relative; scroll-snap-align: start; }
.rk-flag {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; padding: 3px 11px 3px 9px; margin-bottom: 8px;
  clip-path: polygon(0 0, 100% 0, 88% 50%, 100% 100%, 0 100%);
}
.rk-img {
  display: flex; align-items: center; justify-content: center; height: 180px;
  background: #fff; margin-bottom: 10px; overflow: hidden;
}
.rk-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.rk-img:hover img { transform: scale(1.05); }
.rk-name {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13.5px; line-height: 1.4; color: var(--blue); margin-bottom: 5px;
}
.rk-name:hover { color: var(--accent-hover); text-decoration: underline; }
.rk-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.rk-rating .stars svg { width: 14px; height: 14px; }
.rk-rating span { font-size: 12.5px; color: var(--blue); }
.rk-price { font-size: 17px; font-weight: 700; color: var(--danger); }
.rk-old { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.rank-block { margin-top: 26px; }
.rank-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.rank-head h3 { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.rank-head a { font-size: 13.5px; color: var(--blue); }
.rank-head a:hover { text-decoration: underline; color: var(--accent-hover); }

/* Filtros de la sección de ofertas */
.deal-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.deal-tab {
  background: #fff; border: 1px solid #d5d9dd; color: var(--body);
  font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 100px;
  transition: border-color .15s, background .15s, color .15s;
}
.deal-tab:hover { border-color: var(--ink); }
.deal-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.deal-tab span { opacity: .6; font-size: 11.5px; margin-left: 3px; }
.product-grid.swapping { opacity: 0; transform: translateY(8px); }
.product-grid { transition: opacity .2s ease, transform .2s ease; }

/* Banner vendedor */
.seller-banner {
  margin: 44px 0; border-radius: 16px; overflow: hidden;
  background: linear-gradient(120deg, #1d2a3d, #2c405e);
  color: #fff; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center;
}
.seller-banner .sb-text { padding: 38px 42px; }
.seller-banner h3 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-bottom: 10px; }
.seller-banner p { color: #b9c3d1; font-size: 14.5px; max-width: 440px; margin-bottom: 22px; }
.seller-banner .sb-side {
  padding: 30px; display: flex; flex-direction: column; gap: 12px;
}
.sb-point { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #dfe5ec; }
.sb-point svg { width: 18px; height: 18px; color: #7ee2a8; flex-shrink: 0; margin-top: 1px; }

/* =============== PÁGINA CATEGORÍA =============== */
.page-head { background: #fff; border-bottom: 1px solid var(--line); }
.page-head .container { padding-top: 22px; padding-bottom: 18px; }
.breadcrumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.breadcrumbs a:hover { color: var(--blue); text-decoration: underline; }
.page-head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }
.page-head .desc { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* Filas por categoría dentro de las ofertas */
.grp { margin-bottom: 26px; }
.grp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.grp-head h2 { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.grp-head h2 span {
  font-size: 12px; font-weight: 600; color: var(--muted); background: #f1f3f5;
  border-radius: 100px; padding: 2px 9px; margin-left: 4px; vertical-align: 2px;
}
.grp-head a { font-size: 13.5px; color: var(--blue); white-space: nowrap; }
.grp-head a:hover { text-decoration: underline; color: var(--accent-hover); }
.grp .rail { padding-bottom: 10px; }

.view-switch { display: flex; gap: 0; border: 1px solid #d5d9dd; border-radius: 100px; overflow: hidden; }
.view-switch button {
  font-size: 13px; padding: 7px 15px; color: var(--body); background: #fff; transition: background .15s, color .15s;
}
.view-switch button:hover { background: #f2f4f6; }
.view-switch button.active { background: var(--ink); color: #fff; }

.listing-intro { max-width: 900px; margin-top: 10px; }
.li-fold summary {
  cursor: pointer; list-style: none; font-size: 13.5px; color: var(--body);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.li-fold summary::-webkit-details-marker { display: none; }
.li-fold summary b { font-weight: 600; color: var(--body); }
.li-more { color: var(--blue); font-weight: 500; font-size: 13px; white-space: nowrap; }
.li-more:after { content: " ▾"; }
.li-fold[open] .li-more:after { content: " ▴"; }
.li-fold summary:hover .li-more { text-decoration: underline; }
.li-body { padding-top: 10px; animation: faqIn .22s ease both; }
.li-body p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.li-body p b { color: var(--body); }
.li-link { display: inline-block; font-size: 13.5px; color: var(--blue); font-weight: 500; margin-top: 4px; }
.li-link:hover { text-decoration: underline; color: var(--accent-hover); }

.listing-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0 14px; flex-wrap: wrap;
}
.listing-bar .count { font-size: 13.5px; color: var(--muted); }
.listing-bar .count b { color: var(--ink); }
.sort-group { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.sort-group select {
  font-family: inherit; font-size: 13.5px; padding: 8px 12px; border-radius: 7px;
  border: 1px solid #c9d2dd; background: #fff; color: var(--ink); cursor: pointer; outline: none;
}
.sort-group select:focus { border-color: var(--accent); }

/* Botón de Mercalia Flash primero. Apagado por defecto: el listado
   sale mezclado y esto es un atajo, no el estado normal. */
.flash-first {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 100px;
  border: 1px solid #d9c3ab; background: #fff; color: var(--accent);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.flash-first:hover { background: #fdf3e9; border-color: var(--accent); }
.flash-first b { font-weight: 700; opacity: .62; font-size: 12.5px; }
.flash-first.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.flash-first.on b { opacity: .8; }
@media (max-width: 720px) {
  .listing-bar { gap: 10px; padding: 12px 0 10px; }
  .flash-first { order: 3; width: 100%; justify-content: center; padding: 10px 14px; }
  .listing-bar .count { order: 1; }
  .sort-group { order: 2; }
}

.listing-wrap { padding-bottom: 44px; }
.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-state svg { width: 54px; height: 54px; margin: 0 auto 14px; color: #c1cad6; }
.empty-state b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 5px; }

/* =============== PÁGINA DE CATEGORÍAS =============== */
.cats-page { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.cp-card {
  background: var(--card); border-radius: 8px;
  padding: 4px 4px 20px; display: flex; flex-direction: column;
  border-bottom: 1px solid var(--line);
}
.cp-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.cp-ico { display: none; }
.cp-ico svg { width: 22px; height: 22px; }
.cp-head h2 { font-size: 17.5px; font-weight: 700; letter-spacing: -.2px; }
.cp-head h2 a { color: var(--ink); }
.cp-head h2 a:hover { color: var(--accent-hover); text-decoration: underline; }
.cp-head p { font-size: 13px; color: var(--muted); margin-top: 3px; }
.cp-shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.cp-shots a {
  background: #fff; border-radius: 6px; height: 88px;
  display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden;
}
.cp-shots img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s ease; }
.cp-shots a:hover img { transform: scale(1.08); }
.cp-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.cp-meta b { color: var(--ink); }
.cp-meta .cp-of b { color: var(--danger); }
.cp-brands { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.cp-link { margin-top: auto; font-size: 13.5px; color: var(--blue); font-weight: 500; }
.cp-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* =============== FILTROS DE LISTADO =============== */
.listing-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.filters { position: sticky; top: 128px; }
.filters-toggle { display: none; }
.f-nav { margin-bottom: 22px; }
.f-back {
  display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--blue);
  margin-bottom: 8px;
}
.f-back svg { width: 14px; height: 14px; }
.f-back:hover { text-decoration: underline; }
.f-current { font-size: 14px; font-weight: 700; color: var(--ink); padding: 3px 0 8px; }
.f-navlist { border-top: 1px solid var(--line); padding-top: 8px; }
.f-navlist li a {
  display: block; padding: 4px 0; font-size: 13px; color: var(--body);
}
.f-navlist li a:hover { color: var(--accent-hover); text-decoration: underline; }
.f-navlist i { font-style: normal; color: var(--muted); font-size: 11.5px; }
.f-quick { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.f-quick a { display: block; padding: 4px 0; font-size: 13px; color: var(--blue); font-weight: 500; }
.f-quick a:hover { text-decoration: underline; }
.f-cta {
  display: block; background: var(--danger); color: #fff; border-radius: 6px;
  padding: 11px 14px; font-size: 13.5px; font-weight: 600; margin-bottom: 22px; text-align: center;
}
.f-cta:hover { background: #8f1f03; }
.f-group { margin-bottom: 22px; }
.f-group h3 {
  font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 9px;
}
.f-opt { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 13.5px; color: var(--body); }
.f-opt:hover { color: var(--ink); }
.f-opt input { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; }
.f-opt i { font-style: normal; color: var(--muted); font-size: 12px; }
.f-opt .stars svg { width: 13px; height: 13px; }
.f-scroll { max-height: 244px; overflow-y: auto; }
.f-scroll::-webkit-scrollbar { width: 6px; }
.f-scroll::-webkit-scrollbar-thumb { background: #d5d9dd; border-radius: 3px; }
.f-clear {
  font-size: 13px; color: var(--blue); padding: 4px 0;
}
.f-clear:hover { text-decoration: underline; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  background: #f2f4f6; border: 1px solid var(--line); border-radius: 100px;
  padding: 5px 12px; font-size: 12.5px; color: var(--body);
}
.chip:hover { background: #e8ebee; color: var(--ink); }
.chip.clear { background: none; border-color: transparent; color: var(--blue); }
.chip.clear:hover { text-decoration: underline; }

/* =============== PÁGINA DE VENDEDOR =============== */
.sl-head { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.sl-ava {
  width: 66px; height: 66px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 600; flex-shrink: 0;
}
.sl-id { flex: 1; }
.sl-id h1 { font-size: 25px; font-weight: 700; color: var(--ink); letter-spacing: -.4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-sub { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); margin: 6px 0 8px; flex-wrap: wrap; }
.sl-sub b { color: var(--ink); }
.sl-id p { font-size: 13.5px; color: var(--muted); max-width: 620px; }
.sl-actions { flex-shrink: 0; }
.sl-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; margin-top: 22px;
}
.sl-stat { background: #fff; padding: 16px 18px; }
.sl-stat b { display: block; font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.4px; }
.sl-stat span { font-size: 12.5px; color: var(--muted); }
.sl-grid { display: grid; grid-template-columns: 1fr 330px; gap: 32px; align-items: start; }
.sl-side { position: sticky; top: 128px; display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.sl-box { border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.sl-box h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.sl-box .bb-info { margin-top: 0; padding-top: 0; border-top: none; }
.sl-note { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.sl-note.small { font-size: 11.5px; margin: 10px 0 0; }
.sl-box .field { margin-bottom: 12px; }
.sl-box .btn { width: 100%; }
.sl-box textarea { min-height: 90px; }

/* =============== PÁGINA PRODUCTO =============== */
.pd-wrap { padding: 26px 0 50px; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.pd-main { background: #fff; border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.pd-top { display: grid; grid-template-columns: 1fr 1.05fr; gap: 10px; padding: 28px; }
.pd-galeria { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pd-imgbox {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; padding: 30px; min-height: 380px;
}
.pd-imgbox img { max-height: 360px; object-fit: contain; mix-blend-mode: multiply; }
.pd-info { padding: 4px 8px 4px 20px; }
.pd-brand { color: var(--blue); font-size: 13px; font-weight: 600; }
.pd-info h1 { font-family: var(--font-display); font-size: 23px; font-weight: 800; color: var(--ink); line-height: 1.25; letter-spacing: -.4px; margin: 6px 0 10px; }
.pd-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pd-rating .score { color: var(--ink); font-weight: 700; }
.pd-rating a { color: var(--blue); }
.pd-price-block { padding: 16px 0; border-bottom: 1px solid var(--line); }
.pd-flag {
  display: inline-block; background: var(--danger); color: #fff;
  font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 4px; margin-bottom: 10px;
}
.pd-flag.week { background: var(--ok); }

/* Distintivo de Mercalia Flash en la ficha */
.flash-box {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.fb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--danger); color: #fff; border-radius: 4px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
}
.fb-badge svg { width: 13px !important; height: 13px !important; }
.fb-txt { font-size: 13px; color: var(--muted); }
.fb-txt b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Cabecera de oferta en la caja de compra */
.bb-flash { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.bb-flash .fb-badge { font-size: 13px; padding: 6px 12px; }
.bb-flash .fb-txt { display: block; margin-top: 8px; }
.fb-back { color: var(--body); font-weight: 600; }
.bb-flash .fb-info { display: inline-block; margin-top: 9px; }
.fb-badge.week { background: var(--ok); }
.bb-tax { font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }

/* Enlace informativo del Flash */
.fb-info {
  background: none; border: none; padding: 0;
  font-size: 13px; color: var(--blue); font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px;
}
.fb-info:hover { color: var(--accent-hover); }

/* Precio recomendado en la caja de compra */
.bb-was { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.bw-pct { color: var(--danger); font-weight: 700; margin-right: 4px; }
.bb-was s { color: var(--muted); }
.bw-save { display: block; color: var(--danger); font-weight: 600; margin-top: 2px; }

/* Popup de Mercalia Flash */
.modal-flash { width: min(720px, 100%); padding: 0; overflow: hidden auto; }
.modal-flash .modal-x { color: #fff; z-index: 2; top: 14px; right: 16px; }
.modal-flash .modal-x:hover { background: rgba(255,255,255,.14); color: #fff; }
.fm-hero {
  background: linear-gradient(140deg, #1c2733, #2a3a4c); color: #fff;
  padding: 30px 34px 26px; text-align: center;
}
.fm-bolt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--danger); margin-bottom: 12px;
}
.fm-bolt svg { width: 24px !important; height: 24px !important; color: #fff; }
.fm-hero h3 { font-size: 27px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 8px; }
.fm-hero h3 span { color: #f0873a; }
.fm-hero p { font-size: 14.5px; color: #b3bdc9; max-width: 460px; margin: 0 auto; line-height: 1.5; }
.fm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.fm-step { background: #fff; padding: 20px 20px 22px; }
.fs-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-hover); font-size: 12.5px; font-weight: 700; margin-bottom: 8px;
}
.fm-step b { display: block; font-size: 14px; color: var(--ink); line-height: 1.35; margin-bottom: 6px; }
.fm-step span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.fm-example { padding: 20px 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfc; }
.fm-eyebrow {
  display: inline-block; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; margin-bottom: 10px;
}
.fm-ex-row { display: flex; gap: 14px; align-items: center; }
.fm-ex-row img { width: 88px; height: 88px; object-fit: contain; mix-blend-mode: multiply; flex-shrink: 0; }
.fm-ex-row b { display: block; font-size: 15px; color: var(--ink); line-height: 1.3; }
.fm-ex-prices { display: flex; align-items: baseline; gap: 8px; margin: 5px 0 3px; flex-wrap: wrap; }
.fm-ex-prices s { font-size: 13px; color: var(--muted); }
.fm-ex-prices em { font-style: normal; font-size: 22px; font-weight: 700; color: var(--danger); }
.fm-ex-pct { background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.fm-ex-note { font-size: 11.5px; color: var(--muted); }
.modal-flash .fm-list { padding: 22px 34px 6px; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.modal-flash .fm-cta { padding: 8px 34px 28px; }

/* Valores de Mercalia en el hero */
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 48px; align-items: center; }
.values { display: flex; flex-direction: column; gap: 8px; }
.values-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: #8d99aa; margin-bottom: 4px;
}
.value {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 13px 15px; transition: background .18s, border-color .18s, transform .18s;
}
.value:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.24); transform: translateX(3px); }
.value b { display: block; font-size: 14px; color: #fff; margin-bottom: 3px; }
.value span { display: block; font-size: 12.5px; color: #a9b4c2; line-height: 1.45; }
.value em { font-style: normal; font-size: 12px; color: #f0a06a; font-weight: 600; display: inline-block; margin-top: 6px; }

@media (max-width: 1024px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .fm-steps { grid-template-columns: 1fr; }
  .modal-flash .fm-list { grid-template-columns: 1fr; }
  .fm-hero, .fm-example, .modal-flash .fm-list, .modal-flash .fm-cta { padding-left: 20px; padding-right: 20px; }
}

.modal h3 svg { width: 18px !important; height: 18px !important; color: var(--danger); vertical-align: -2px; }
.fm-p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.fm-p b { color: var(--body); }
.fm-list { margin: 4px 0 18px; }
.fm-list li { position: relative; padding-left: 18px; font-size: 13px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }
.fm-list li:before { content: "·"; position: absolute; left: 4px; color: var(--danger); font-weight: 800; }
.fm-list b { color: var(--ink); }
.fm-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.fm-cta .btn { flex: 1; min-width: 150px; }
.pd-price { color: var(--ink); line-height: 1; margin-bottom: 6px; }
.pd-price .pb-int { font-size: 34px; font-weight: 500; letter-spacing: -1px; }
.pd-price .pb-cent, .pd-price .pb-cur { font-size: 17px; font-weight: 500; vertical-align: super; }
.pd-disc-row { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.pd-pct { color: var(--danger); font-weight: 700; margin-right: 4px; }
.pd-disc-row s { color: var(--muted); }
.pd-tax { font-size: 12.5px; color: var(--muted); }
.pd-short { padding: 14px 0; font-size: 14px; color: var(--body); border-bottom: 1px solid var(--line); }
.pd-feats { padding: 14px 0 4px; }
.pd-feats li { display: flex; gap: 9px; font-size: 13.5px; margin-bottom: 8px; }
.pd-feats svg { width: 17px; height: 17px; color: var(--ok); flex-shrink: 0; margin-top: 2px; }

.pd-desc { padding: 6px 28px 30px; }
.pd-desc h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.pd-desc p { font-size: 14.5px; max-width: 780px; line-height: 1.65; }

/* Caja de compra lateral — limpia, estilo e-commerce clásico */
.pd-side { position: sticky; top: 128px; }
.buybox {
  background: #fff; border: 1px solid #d5d9dd; border-radius: 8px;
  box-shadow: none; padding: 18px;
}
.bb-flashline {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--danger); margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.bb-flashline > b { font-weight: 700; }
.bb-flashline span { color: var(--muted); font-size: 12.5px; }
.bb-flashline span b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

.bb-price { color: var(--ink); line-height: 1; margin-bottom: 4px; }
.pb-int { font-size: 30px; font-weight: 500; letter-spacing: -.5px; }
.pb-cent { font-size: 15px; font-weight: 500; vertical-align: super; margin-left: 1px; }
.pb-cur { font-size: 15px; font-weight: 500; vertical-align: super; margin-left: 2px; }
.bb-was { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.bb-was s { color: var(--muted); }
.bb-ship { font-size: 13.5px; color: var(--body); margin: 8px 0 6px; line-height: 1.5; }
.bb-ship b { color: var(--ink); font-weight: 700; }
.bb-ship a { color: var(--blue); }
.bb-ship a:hover { text-decoration: underline; }
.bb-stock { font-size: 17px; color: var(--ok); font-weight: 500; margin-bottom: 12px; }
.bb-stock.low { color: #b45309; font-size: 15px; }
.bb-qty { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13.5px; }
.bb-qty select {
  font-family: inherit; font-size: 13.5px; padding: 6px 10px; border-radius: 7px;
  border: 1px solid #b9c1ca; background: #f6f7f8; color: var(--ink); cursor: pointer; outline: none;
}
.btn-cart, .btn-buy2 {
  width: 100%; border-radius: 100px; padding: 11px; font-size: 14px; font-weight: 500;
  color: var(--ink); margin-bottom: 9px; border: 1px solid transparent;
  transition: background .15s, transform .1s;
}
.btn-cart { background: #f5d06a; border-color: #dcb44a; }
.btn-cart:hover { background: #f0c44f; }
.btn-buy2 { background: #e8a33d; border-color: #cf8d2a; }
.btn-buy2:hover { background: #dd9528; }
.btn-cart:active, .btn-buy2:active { transform: scale(.985); }

.bb-info {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  font-size: 12.5px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.bb-info dt { color: var(--muted); }
.bb-info dd { color: var(--body); }
.bb-info dd a { color: var(--blue); }
.bb-info dd a:hover { text-decoration: underline; }

/* Opiniones */
.reviews { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 26px 28px; margin-top: 24px; }
.reviews h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 16px; }
.rev-summary { display: flex; gap: 30px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.rev-score { text-align: center; }
.rev-score b { font-size: 40px; font-family: var(--font-display); font-weight: 800; color: var(--ink); line-height: 1; }
.rev-score .stars svg { width: 16px; height: 16px; }
.rev-score span { font-size: 12px; color: var(--muted); display: block; margin-top: 4px; }
.rev-bars { flex: 1; min-width: 220px; max-width: 420px; }
.rev-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.rev-bar .track { flex: 1; height: 8px; background: #edf0f4; border-radius: 4px; overflow: hidden; }
.rev-bar .fill { height: 100%; background: var(--star); border-radius: 4px; }
.rev-item { border-top: 1px solid var(--line); padding: 16px 0; }
.rev-item .rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rev-item .rv-ava {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink-2); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.rev-item .rv-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.rev-item .rv-date { font-size: 12px; color: var(--muted); }
.rev-item .rv-verified { font-size: 11.5px; color: var(--ok); font-weight: 600; }
.rev-item p { font-size: 13.5px; margin-top: 4px; max-width: 820px; }

/* =============== CARRITO =============== */
.cart-wrap { padding: 30px 0 60px; }
.cart-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.cart-list { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 10px 24px; }
.cart-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item:last-child { border-bottom: none; }
.cart-item .ci-img { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; height: 100px; display: flex; align-items: center; justify-content: center; }
.cart-item .ci-img img { max-height: 80px; object-fit: contain; mix-blend-mode: multiply; }
.cart-item .ci-name { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.cart-item .ci-seller { font-size: 12px; color: var(--muted); margin: 3px 0 8px; }
.cart-item .ci-actions { display: flex; align-items: center; gap: 14px; }
.cart-item .ci-remove { font-size: 12.5px; color: var(--blue); }
.cart-item .ci-remove:hover { text-decoration: underline; }
.cart-item .ci-price { font-size: 17px; font-weight: 800; color: var(--ink); text-align: right; }
.cart-summary { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 22px; position: sticky; top: 130px; }
.cart-summary h3 { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.cs-row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 9px; }
.cs-row.total { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; font-size: 16px; font-weight: 800; color: var(--ink); }
.cs-row .free { color: var(--ok); font-weight: 700; }
.cart-summary .btn { width: 100%; margin-top: 14px; }
.cs-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; color: var(--muted); margin-top: 12px; }
.cs-secure svg { width: 14px; height: 14px; }

/* =============== VENDER / FORMULARIOS =============== */
.form-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 30px; max-width: 640px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 14px; padding: 11px 13px;
  border: 1px solid #c9d2dd; border-radius: 8px; outline: none; color: var(--ink);
  transition: border-color .15s; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 100px; }
.form-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0 34px; }
.steps.steps-4 { grid-template-columns: repeat(4, 1fr); }
.form-card.wide { max-width: none; }

/* Landing de vendedores */
.sell-hero .container { padding-top: 46px; padding-bottom: 46px; }
.sell-visual { display: flex; align-items: center; justify-content: flex-end; }
.sv-card {
  background: #fff; color: var(--ink); border-radius: 16px; padding: 22px 24px;
  width: min(340px, 100%); box-shadow: 0 22px 55px rgba(0,0,0,.35);
}
.sv-tag {
  display: inline-block; background: var(--danger); color: #fff; font-size: 11px;
  font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px; margin-bottom: 14px;
}
.sv-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.sv-row b { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--ink); }
.sv-row b.ok { color: var(--ok); }
.sv-bar { height: 9px; background: #edf0f4; border-radius: 5px; overflow: hidden; margin: 4px 0 12px; }
.sv-bar i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.sv-foot { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; font-size: 12.5px; color: var(--muted); }

.offers-block {
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
  padding: 34px 38px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 36px; align-items: start;
}
.ob-text h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; line-height: 1.24; margin-bottom: 14px; }
.ob-text p { font-size: 14.5px; margin-bottom: 12px; }
.ob-list { margin-top: 18px; }
.ob-list li { position: relative; padding: 0 0 14px 26px; font-size: 14px; }
.ob-list li:before {
  content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px;
  border-radius: 4px; background: var(--accent-soft); border: 2px solid var(--accent);
}
.ob-list b { color: var(--ink); }
.ob-side { background: #f7f9fb; border-radius: 14px; padding: 22px; }
.ob-metric { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.ob-metric:nth-of-type(3) { border-bottom: none; }
.ob-metric b { display: block; font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--accent-hover); letter-spacing: -1px; }
.ob-metric span { font-size: 13px; color: var(--muted); }
.ob-note { font-size: 11.5px; color: var(--muted); font-style: italic; }

.perks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.perk { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 20px 22px; transition: transform .2s, box-shadow .2s; }
.perk:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.perk b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.perk p { font-size: 13.5px; color: var(--muted); }

.faq-wrap { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 10px 30px 22px; }
.faq { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq:last-child { border-bottom: none; }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:after { content: "+"; font-size: 20px; color: var(--accent); font-weight: 700; transition: transform .2s; }
.faq[open] summary:after { content: "−"; }
.faq summary:hover { color: var(--accent-hover); }
.faq p { font-size: 14px; margin-top: 10px; max-width: 780px; animation: faqIn .25s ease both; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } }
.check.full { grid-column: 1 / -1; }
.step { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 22px; }
.step .n {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff;
  font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.step b { color: var(--ink); font-size: 15px; display: block; margin-bottom: 5px; }
.step p { font-size: 13.5px; color: var(--muted); }

/* Página de ayuda */
.help-grid { display: grid; grid-template-columns: 240px 1fr; gap: 28px; padding: 30px 0 60px; align-items: start; }
.help-nav { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 12px; position: sticky; top: 130px; }
.help-nav a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--body); }
.help-nav a:hover { background: var(--accent-soft); color: var(--accent-hover); }
.help-body { display: flex; flex-direction: column; gap: 18px; }
.help-block { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 24px 28px; scroll-margin-top: 140px; }
.help-block h2 { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.help-block p, .help-block li { font-size: 14px; margin-bottom: 8px; }
.help-block ul { list-style: disc; padding-left: 20px; }

/* =============== SELLO MERCALIA =============== */
.trust-item.seal { color: inherit; transition: transform .2s; }
.trust-item.seal:hover { transform: translateY(-2px); }
.trust-item.seal:hover b { color: var(--accent-hover); }
.trust-item.seal svg { color: var(--accent); }

.seal-box {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 14px;
  background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; padding: 13px 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.seal-box:hover { border-color: #c9d2dd; background: #f5f7f9; }
.seal-mark svg { width: 34px; height: 34px; color: var(--accent); flex-shrink: 0; }
.seal-txt { font-size: 12px; color: var(--muted); line-height: 1.45; }
.seal-txt b { display: block; color: var(--ink); font-size: 13.5px; font-family: var(--font-display); }
.seal-link { color: var(--blue); font-weight: 600; white-space: nowrap; }
.seal-box:hover .seal-link { text-decoration: underline; }

.seal-hero .container { grid-template-columns: 1.1fr .9fr; }
.seal-visual { display: flex; align-items: center; justify-content: center; }
.seal-big { text-align: center; color: #fff; }
.seal-big svg { width: 158px; height: 158px; margin: 0 auto 16px; }
.seal-big b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.seal-big span { font-size: 13.5px; color: #b9c3d1; }

.seal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.seal-card {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 24px;
  transition: transform .2s, box-shadow .2s;
}
.seal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.sc-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 54px;
  border-radius: 14px; background: var(--accent-soft); color: var(--accent-hover);
  font-family: var(--font-display); font-size: 20px; font-weight: 800; padding: 0 10px; margin-bottom: 14px;
}
.seal-card b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 6px; }
.seal-card p { font-size: 13.5px; color: var(--muted); }

.promise {
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
  padding: 34px 38px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: start;
}
.pr-text h2 { font-family: var(--font-display); font-size: 25px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; line-height: 1.26; margin-bottom: 14px; }
.pr-text p { font-size: 14.5px; margin-bottom: 12px; }
.pr-quote {
  background: var(--ink); color: #fff; border-radius: 14px; padding: 24px;
  font-size: 15px; line-height: 1.55; font-style: italic; margin-bottom: 16px;
}
.pr-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-badges span {
  background: #eefaf2; color: var(--ok); border: 1px solid #c8ecd7;
  font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 100px;
}

.about-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.about-hero .container { padding-top: 46px; padding-bottom: 46px; }

/* Página "cómo funciona" */
.story {
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow);
  padding: 34px 38px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; align-items: start;
}
.story-text h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; margin-bottom: 14px; }
.story-text p { font-size: 14.5px; margin-bottom: 13px; }
.ex-card { background: #f7f9fb; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.ex-label {
  display: inline-block; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; padding: 4px 9px; border-radius: 5px; margin-bottom: 12px;
}
.ex-img { display: flex; align-items: center; justify-content: center; height: 130px; margin-bottom: 10px; }
.ex-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ex-name { display: block; font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.35; margin-bottom: 12px; }
a.ex-name:hover { color: var(--accent-hover); }
.ex-rows { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 14px; }
.ex-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); padding: 5px 0; }
.ex-row b { font-weight: 700; color: var(--body); }
.ex-row.hi b { color: var(--danger); font-size: 19px; font-family: var(--font-display); font-weight: 800; }
.ex-row.save { border-top: 1px dashed var(--line); margin-top: 5px; padding-top: 9px; }
.ex-row.save b { color: var(--ok); }
.ex-card .btn { width: 100%; }
.ex-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.way {
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 26px;
  display: flex; flex-direction: column; border-top: 4px solid var(--line);
  transition: transform .2s, box-shadow .2s;
}
.way:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.way.flash { border-top-color: var(--danger); }
.way.manana { border-top-color: #2c62b8; }
.way.normal { border-top-color: var(--ink); }
.way-tag { font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.way.flash .way-tag { color: var(--danger); }
.way.manana .way-tag { color: #2c62b8; }
.way h3 { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--ink); margin: 6px 0 10px; letter-spacing: -.4px; }
.way p { font-size: 13.5px; margin-bottom: 14px; }
.way ul { margin-bottom: 18px; }
.way li { position: relative; padding-left: 20px; font-size: 13px; color: var(--muted); margin-bottom: 7px; }
.way li:before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.way .btn { margin-top: auto; }

.guarantee { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 32px 36px; }
.gu-head { max-width: 700px; margin-bottom: 24px; }
.gu-head h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; margin-bottom: 10px; }
.gu-head p { font-size: 14.5px; }
.gu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.gu-item { position: relative; padding-left: 26px; }
.gu-item:before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; font-size: 15px;
}
.gu-item b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 5px; }
.gu-item p { font-size: 13.5px; color: var(--muted); }

/* =============== SEGUIMIENTO DE PEDIDO =============== */
.track-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
.track-grid .form-card { max-width: none; }
.track-help {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 26px 28px;
}
.track-help h3 { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.track-help p { font-size: 13.5px; margin-bottom: 14px; }
.track-help ul { margin-bottom: 16px; }
.track-help li { font-size: 13.5px; margin-bottom: 7px; }
.track-help li b { color: var(--ink); }
.track-help a[href^="mailto"] { color: var(--blue); }
.btn-ghost.outline { background: #fff; color: var(--ink); border: 1px solid #c9d2dd; }
.btn-ghost.outline:hover { background: #f4f6f9; border-color: var(--accent); color: var(--accent-hover); }

.track-result {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 28px 30px; margin-top: 22px;
}
.tr-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.tr-label { font-size: 12.5px; color: var(--muted); }
.tr-label b { color: var(--ink); font-family: var(--font-display); }
.tr-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ok); margin: 4px 0 3px; }
.tr-head p { font-size: 13px; color: var(--muted); }
.tr-eta { text-align: right; }
.tr-eta span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.tr-eta b { font-size: 15px; color: var(--ink); }

.timeline { padding: 24px 0 10px; position: relative; }
.timeline li { position: relative; padding: 0 0 26px 34px; }
.timeline li:before {
  content: ""; position: absolute; left: 8px; top: 16px; bottom: -6px; width: 2px; background: var(--line);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child:before { display: none; }
.tl-dot {
  position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #cfd8e3;
}
.timeline li.done .tl-dot { background: var(--ok); border-color: var(--ok); }
.timeline li.done:before { background: var(--ok); }
.timeline li.current .tl-dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(200,90,30,.14);
}
.timeline li b { display: block; color: var(--ink); font-size: 14.5px; }
.timeline li span:not(.tl-dot) { font-size: 13px; color: var(--muted); }
.timeline li.current b { color: var(--accent-hover); }

.tr-items { border-top: 1px solid var(--line); padding-top: 18px; }
.tr-items h3 { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.tr-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tr-item:last-child { border-bottom: none; }
.tr-item .ci-img { height: 70px; padding: 8px; }
.tr-item .ci-img img { max-height: 54px; }

/* =============== CUENTA / LOGIN =============== */
.auth-wrap { padding: 40px 0 60px; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.auth-card { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 8px 32px 28px; }
.auth-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 -32px 24px; padding: 0 32px; }
.auth-tab {
  padding: 16px 4px; margin-right: 22px; font-size: 14.5px; font-weight: 700; color: var(--muted);
  border-bottom: 2.5px solid transparent; transition: color .15s, border-color .15s;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active { color: var(--accent-hover); border-bottom-color: var(--accent); }
.auth-form h1 { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }
.auth-sub { font-size: 13.5px; color: var(--muted); margin: 5px 0 18px; }
.auth-form .field { margin-bottom: 14px; }
.auth-form .btn { width: 100%; }
.auth-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--body); cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--accent); }
.auth-link { font-size: 13px; color: var(--blue); }
.auth-link:hover { text-decoration: underline; }
.auth-sep { text-align: center; position: relative; margin: 20px 0 14px; }
.auth-sep:before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.auth-sep span { position: relative; background: #fff; padding: 0 12px; font-size: 12px; color: var(--muted); }
.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.soc {
  border: 1px solid #c9d2dd; border-radius: 8px; padding: 11px; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: #fff; transition: border-color .15s, background .15s;
}
.soc:hover { border-color: var(--ink); background: #f7f9fb; }

.auth-side { padding-top: 12px; }
.auth-side h2 { font-family: var(--font-display); font-size: 25px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; margin-bottom: 18px; }
.auth-perks li { padding: 0 0 16px 26px; position: relative; }
.auth-perks li:before {
  content: ""; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-soft); border: 2px solid var(--accent);
}
.auth-perks b { display: block; color: var(--ink); font-size: 14.5px; }
.auth-perks span { font-size: 13.5px; color: var(--muted); }
.auth-track { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-top: 6px; }
.auth-track b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.auth-track p { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }

/* =============== AVISO DE BAJADA DE PRECIO =============== */
.bb-tomorrow {
  border: 1px solid #c9dcf0; background: #f3f8fd; border-radius: 8px;
  padding: 13px 14px; margin-top: 14px;
}
.bt-head { font-size: 12.5px; font-weight: 700; color: #14568f; margin-bottom: 8px; }
.bt-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); }
.bt-today { color: var(--muted); text-decoration: line-through; font-weight: 500; }
.bt-next { color: var(--ok); font-size: 17px; font-weight: 700; }
.bt-save { font-size: 12px; color: var(--ok); font-weight: 600; margin: 4px 0 10px; }
.bt-btn {
  width: 100%; background: #fff; border: 1px solid #14568f; color: #14568f;
  font-size: 13px; font-weight: 600; padding: 9px; border-radius: 100px;
  transition: background .15s, color .15s;
}
.bt-btn:hover { background: #14568f; color: #fff; }
.pd-tomorrow {
  font-size: 13px; color: var(--body); background: #f3f8fd; border: 1px solid #c9dcf0;
  border-radius: 6px; padding: 8px 11px; margin-top: 10px;
}
.pd-tomorrow b { color: var(--ok); }
.pd-tomorrow a { color: var(--blue); font-weight: 600; }
.pd-tomorrow a:hover { text-decoration: underline; }

.modal-bg {
  position: fixed; inset: 0; background: rgba(19,25,33,.55); z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
.modal-bg.open { opacity: 1; }
.modal {
  background: #fff; border-radius: 12px; padding: 26px 28px; width: min(440px, 100%);
  position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  transform: translateY(12px) scale(.98); transition: transform .22s cubic-bezier(.22,.9,.28,1);
  max-height: 88vh; overflow-y: auto;
}
.modal-bg.open .modal { transform: none; }
.modal h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.modal-x {
  position: absolute; top: 10px; right: 12px; font-size: 26px; line-height: 1;
  color: var(--muted); padding: 4px 8px; border-radius: 6px;
}
.modal-x:hover { background: #f1f3f5; color: var(--ink); }
.am-prod { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 16px; }
.am-prod img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: multiply; flex-shrink: 0; }
.am-prod b { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.am-prices { font-size: 12.5px; color: var(--muted); }
.am-prices b { display: inline; color: var(--ok); font-size: 13.5px; }
.modal .field { margin-bottom: 12px; }
.modal .field .opt { font-weight: 400; color: var(--muted); }
.modal .check { margin-bottom: 14px; align-items: flex-start; }
.modal .check span { font-size: 12.5px; line-height: 1.4; }
.modal .btn { width: 100%; }
.am-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.45; }

/* =============== ASISTENTE (CHATBOT) =============== */
#chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 350; }
.chat-fab {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border-radius: 100px;
  padding: 9px 18px 9px 10px; box-shadow: 0 6px 22px rgba(19,25,33,.28);
  font-size: 14px; font-weight: 500; transition: transform .18s, box-shadow .18s;
}
.chat-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(19,25,33,.34); }
.chat-fab .bot-face { width: 36px !important; height: 36px !important; }
#chat-widget.open .chat-fab { display: none; }

.chat-panel {
  position: absolute; right: 0; bottom: 0; width: min(370px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(19,25,33,.28); display: none; flex-direction: column;
  max-height: min(560px, calc(100vh - 80px)); overflow: hidden;
}
#chat-widget.open .chat-panel { display: flex; animation: chatIn .22s cubic-bezier(.22,.9,.28,1) both; }
@keyframes chatIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.chat-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 14px;
  background: var(--ink); color: #fff; flex-shrink: 0;
}
.chat-ava { width: 38px; height: 38px; flex-shrink: 0; }
.chat-ava .bot-face { width: 38px !important; height: 38px !important; }
.chat-head b { display: block; font-size: 14px; font-weight: 600; }
.chat-head span { font-size: 11.5px; color: #9aa5b1; }
.chat-head > div { flex: 1; }
.chat-x { color: #9aa5b1; font-size: 24px; line-height: 1; padding: 0 4px; }
.chat-x:hover { color: #fff; }

.chat-body { flex: 1; overflow-y: auto; padding: 16px 14px; background: #f7f8fa; }
.msg { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end; }
.msg > div {
  font-size: 13.5px; line-height: 1.5; padding: 10px 13px; border-radius: 14px; max-width: 84%;
}
.msg.bot > div { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--body); }
.msg.bot > div a { color: var(--blue); text-decoration: underline; }
.msg.bot > div b { color: var(--ink); }
.msg.me { justify-content: flex-end; }
.msg.me > div { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.msg-ava { width: 26px; height: 26px; flex-shrink: 0; }
.msg-ava .bot-face { width: 26px !important; height: 26px !important; }
.typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #c3ccd6; animation: dotp 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes dotp { 0%,60%,100% { opacity: .35; } 30% { opacity: 1; transform: translateY(-2px); } }

.chat-quick { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; border-top: 1px solid var(--line); flex-shrink: 0; }
.chat-quick::-webkit-scrollbar { display: none; }
.chat-quick button {
  white-space: nowrap; background: #fff; border: 1px solid #d5d9dd; border-radius: 100px;
  padding: 6px 12px; font-size: 12.5px; color: var(--body); flex-shrink: 0;
}
.chat-quick button:hover { border-color: var(--ink); color: var(--ink); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); flex-shrink: 0; }
.chat-form input {
  flex: 1; border: 1px solid #d5d9dd; border-radius: 100px; padding: 10px 15px;
  font-size: 13.5px; font-family: inherit; outline: none; min-width: 0;
}
.chat-form input:focus { border-color: var(--accent); }
.chat-form button {
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-form button:hover { background: var(--accent-hover); }
.chat-form button svg { width: 18px; height: 18px; }

/* Invitación en la ficha de producto */
.chat-invite {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; background: #fafbfc;
}
.chat-invite b { display: block; font-size: 15px; color: var(--ink); }
.chat-invite span { display: block; font-size: 13px; color: var(--muted); margin: 3px 0 12px; }
.chat-invite .btn { padding: 9px 20px; font-size: 13.5px; }
.ci-bot { flex-shrink: 0; }
.ci-bot .bot-face { width: 74px !important; height: 74px !important; }

@media (max-width: 720px) {
  #chat-widget { right: 14px; bottom: 14px; }
  .chat-fab span { display: none; }
  .chat-fab { padding: 10px; }
  .ci-bot .bot-face { width: 56px !important; height: 56px !important; }
}

/* =============== TOAST =============== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff; padding: 13px 22px; border-radius: 10px;
  font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display: flex; align-items: center; gap: 10px; z-index: 300; opacity: 0;
  transition: transform .25s ease, opacity .25s ease; pointer-events: none; max-width: calc(100vw - 40px);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast svg { width: 18px; height: 18px; color: #7ee2a8; flex-shrink: 0; }

/* =============== NEWSLETTER + FOOTER =============== */
.newsletter { background: #fff; border-top: 1px solid var(--line); margin-top: 34px; }
.newsletter .container {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px 20px; flex-wrap: wrap;
}
.newsletter h3 { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--ink); }
.newsletter p { color: var(--muted); font-size: 13.5px; }
.nl-form { display: flex; gap: 10px; flex: 1; max-width: 440px; min-width: 260px; }
.nl-form input {
  flex: 1; padding: 12px 14px; border: 1px solid #c9d2dd; border-radius: 8px;
  font-family: inherit; font-size: 14px; outline: none; min-width: 0;
}
.nl-form input:focus { border-color: var(--accent); }

.footer { background: var(--ink); color: #9aa6b5; margin-top: 0; }
.footer-main {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px;
  padding: 44px 0 34px;
}
.footer h4 { color: #fff; font-size: 13.5px; font-weight: 700; margin-bottom: 14px; letter-spacing: .3px; }
.footer li { margin-bottom: 9px; font-size: 13px; }
.footer li a:hover { color: #fff; text-decoration: underline; }
.footer .f-brand .logo-word { font-size: 24px; }
.footer .f-brand p { font-size: 13px; margin-top: 10px; max-width: 260px; }
.f-pay { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.f-pay span {
  background: #fff; color: #131a26; border-radius: 5px; font-size: 10.5px; font-weight: 800;
  padding: 5px 9px; letter-spacing: .3px;
}
.footer-empresa {
  border-top: 1px solid rgba(255,255,255,.09); padding-top: 16px;
  font-size: 11.5px; color: #7c8796; line-height: 1.6;
}
.footer-empresa b { color: #aab4c2; font-weight: 700; }
.footer-bottom {
  padding: 12px 0 18px;
  display: flex; justify-content: space-between; gap: 14px; font-size: 12px; flex-wrap: wrap;
}
.footer-bottom a:hover { color: #fff; }

/* =========================================================
   PÁGINAS LEGALES (aviso legal, privacidad, cookies, condiciones)
   Reutilizan .help-grid / .help-nav / .help-block y añaden un
   recuadro con la identidad fiscal de la empresa, repetido en
   cada documento para que quede claro quién opera la tienda.
   ========================================================= */
.legal-empresa {
  background: #fbfcfd; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; margin-bottom: 24px; font-size: 13.5px; line-height: 1.7; color: var(--body);
}
.legal-empresa b { color: var(--ink); }
.help-block h3 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 16px 0 6px; }
.help-block .legal-fecha { font-size: 12px; color: var(--muted); margin-top: 18px; }

/* =============== RESPONSIVE =============== */
@media (max-width: 1024px) {
  .sf-grid { grid-template-columns: repeat(2, 1fr); }
  .banner-inner { grid-template-columns: 1fr; gap: 22px; }
  .bn-deal { justify-content: flex-start; }
  .storefront { margin-top: 16px; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { min-height: 0; margin-top: 26px; }
  .deal-card { margin: 0 auto; }
  .trustbar .container { grid-template-columns: repeat(2, 1fr); }
  .pd-grid { grid-template-columns: 1fr; }
  .buybox { position: static; }
  .pd-top { grid-template-columns: 1fr; }
  .pd-info { padding-left: 0; }
  .footer-main { grid-template-columns: repeat(2, 1fr); }
  .cart-grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .help-grid { grid-template-columns: 1fr; }
  .help-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
  .help-nav a { white-space: nowrap; }
  .seller-banner { grid-template-columns: 1fr; }
  .about-wrap { grid-template-columns: 1fr; gap: 24px; }
  .track-grid { grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr; gap: 26px; }
  .offers-block { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .listing-layout { grid-template-columns: 1fr; gap: 0; }
  .filters { position: static; margin-bottom: 18px; }
  .filters-toggle {
    display: block; width: 100%; border: 1px solid #d5d9dd; border-radius: 8px;
    padding: 11px; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff;
  }
  .filters-body { display: none; padding-top: 18px; }
  .filters.open .filters-body { display: block; }
  .sl-grid { grid-template-columns: 1fr; }
  .sl-side { position: static; }
  .sl-head { flex-wrap: wrap; }
  .steps.steps-4 { grid-template-columns: repeat(2, 1fr); }
  .sell-visual { display: none; }
}

@media (max-width: 720px) {
  .topbar .container { justify-content: center; }
  .topbar .tb-cinta { flex: 1; }
  .topbar-links { display: none; }
  .header-main { flex-wrap: wrap; gap: 12px; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  .h-action span.lbl { display: none; }
  .hero .container { padding-top: 36px; padding-bottom: 38px; }
  .hero-stats { gap: 22px; }
  .trustbar .container { grid-template-columns: 1fr 1fr; padding: 12px 16px; }
  .trust-item span { display: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .p-card .p-img { height: 150px; padding: 12px; }
  .rail { grid-auto-columns: 152px; }
  .steps { grid-template-columns: 1fr; }
  .sf-grid { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 22px; }
  .cart-item { grid-template-columns: 80px 1fr; }
  .cart-item .ci-price { grid-column: 2; text-align: left; }
  .seller-banner .sb-text { padding: 28px 24px; }
  .seller-banner .sb-side { padding: 0 24px 26px; }
  .hot-timer { align-items: flex-start; text-align: left; }
  .hot-band { padding: 20px 16px 14px; }
  .tomorrow-band { padding: 20px 16px 16px; }
  .about-wrap { padding: 22px 18px; }
  .tom-timer { text-align: left; }
  .tomorrow-band .rail { grid-auto-columns: 152px; }
}

/* =========================================================
   MÓVIL — capa final, reescrita para pantallas pequeñas
   ========================================================= */
@media (max-width: 1000px) {
  .container { padding: 0 18px; }
  .container.wide { padding: 0 18px; }

  /* --- Barra superior --- */
  .topbar { font-size: 11.5px; padding: 7px 0; }
  .topbar .container { justify-content: center; text-align: center; }
  .topbar span { display: block; }

  /* --- Cabecera compacta --- */
  .header-main {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 12px; padding: 12px 18px 14px;
  }
  .logo-link { justify-self: start; }
  .logo-word { font-size: 23px; letter-spacing: -.6px; }
  .logo-dot { width: 8px; height: 8px; }
  .logo-tag { display: none; }
  .header-actions { gap: 2px; margin-left: 0; }
  .h-action { padding: 4px 7px; }
  .h-action svg { width: 21px !important; height: 21px !important; }
  .h-action .cart-count { right: 0; top: -2px; }
  .search { grid-column: 1 / -1; order: 3; max-width: none; border-radius: 10px; margin-top: 2px; }
  .search input { padding: 10px 13px; font-size: 15px; }
  .search button { padding: 0 15px; }

  /* --- Navegación de categorías --- */
  .catnav .container { gap: 0; padding: 0 18px; }
  .catnav a, .catnav .all { font-size: 13px; padding: 11px 12px; }
  .catnav .container > *:first-child { padding-left: 0; }
  .catnav .all { gap: 6px; }
  .catnav a.sell { display: none; }
  .catnav:after { width: 30px; }

  /* --- Banner --- */
  .banner-inner { grid-template-columns: 1fr; gap: 22px; padding: 26px 0 28px; }
  .bn-kicker { font-size: 10.5px; margin-bottom: 8px; }
  .bn-text h1 { font-size: 23px; line-height: 1.22; }
  .bn-text p { font-size: 14px; margin-bottom: 16px; }
  .bn-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bn-ctas .btn { padding: 13px 10px; font-size: 13.5px; }
  .bn-deal { justify-content: stretch; }
  .bn-deal .deal-card { width: 100%; }
  .bn-deal .deal-img { height: 130px; }

  /* --- Escaparate --- */
  .storefront { margin-top: 16px; }
  .sf-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sf-box { padding: 14px 12px; border-radius: 10px; }
  .sf-box h2 { font-size: 14.5px; margin-bottom: 10px; }
  .sf-mini { gap: 8px; }
  .sfm-img { height: 70px !important; }
  .sf-cats { gap: 8px; }
  .sfc-img { height: 56px; }
  .sfc-name { font-size: 10.5px; }
  .sf-tom img { height: 92px; }
  .sft-prices b { font-size: 17px; }
  .sf-more { font-size: 12px; padding-top: 10px; }

  /* --- Franja de garantías --- */
  .trustbar .container { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
  .trust-item { gap: 9px; }
  .trust-item svg { width: 22px !important; height: 22px !important; }
  .trust-item b { font-size: 12.5px; }
  .trust-item span { display: block; font-size: 11px; }

  /* --- Secciones --- */
  .section { padding: 26px 0 4px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
  .section-head h2 { font-size: 19px; }
  .section-head .sub { font-size: 12.5px; }
  .section-head a.more { font-size: 13px; }

  /* --- Bandas de ofertas --- */
  .hot-band, .tomorrow-band { padding: 18px 14px 14px; border-radius: 10px; }
  .hot-head { flex-direction: column; gap: 14px; }
  .hot-band h2 { font-size: 21px; }
  .hot-band .hot-head p { font-size: 13px; }
  .hot-timer { align-items: stretch; width: 100%; }
  .hot-timer .btn { width: 100%; }
  .cd-cell { font-size: 18px; min-width: 44px; padding: 5px 8px 4px; }
  .hot-tabs { padding-bottom: 12px; }
  .hot-tab { font-size: 12.5px; padding: 7px 12px; }

  /* --- Carruseles y tarjetas --- */
  .rail { grid-auto-columns: 150px; gap: 10px; }
  .rail .p-card .p-img { height: 116px; }
  .rail .p-name { font-size: 12px; min-height: 32px; }
  .rail .p-price { font-size: 16px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .p-card .p-img { height: 130px; padding: 8px; }
  .p-body { padding: 4px 10px 12px; }
  .p-name { font-size: 12.5px; min-height: 34px; }
  /* Orden en móvil: nombre → precio → ahorro → valoraciones → stock */
  .p-body { display: flex; flex-direction: column; }
  .p-brand { order: 1; }
  .p-name { order: 2; }
  .p-flag-row { order: 3; margin-top: 6px; min-height: 0; }
  .p-price-row { order: 4; margin-top: 4px; }
  .p-old-row { order: 5; }
  .p-save-row { order: 6; }
  .p-rating { order: 7; margin: 6px 0 2px; }
  .p-meta { order: 8; }
  .p-add { order: 9; }
  .p-price { font-size: 19px; }
  .p-add { font-size: 12px; padding: 8px; }
  .rank-row { grid-auto-columns: 142px; gap: 12px; }
  .rk-img { height: 128px; }
  .rk-name { font-size: 12.5px; -webkit-line-clamp: 3; }

  /* --- Ficha de producto --- */
  .pd-wrap { padding: 14px 0 36px; }
  .pd-grid { grid-template-columns: 1fr; gap: 16px; }
  .pd-top { padding: 14px; gap: 16px; }
  .pd-imgbox { min-height: 0; padding: 16px; }
  .pd-imgbox img { max-height: 260px; }
  .pd-info h1 { font-size: 20px; }
  .pd-side { position: static; }
  .buybox { padding: 16px; }
  .pb-int { font-size: 27px; }
  .btn-cart, .btn-buy2 { padding: 13px; font-size: 15px; }
  .pd-desc { padding: 0 16px 22px; }
  .reviews { padding: 18px 16px; }
  .rev-summary { gap: 18px; }
  .chat-invite { flex-direction: column; align-items: flex-start; text-align: left; }

  /* --- Listados --- */
  .listing-layout { grid-template-columns: 1fr; }
  .listing-bar { gap: 10px; }
  .listing-bar .count { font-size: 13px; }
  .sort-group { width: 100%; }
  .sort-group select { flex: 1; }
  .view-switch { width: 100%; }
  .view-switch button { flex: 1; }
  .page-head h1 { font-size: 21px; }
  .page-head .desc { font-size: 13px; }
  .grp-head h2 { font-size: 16px; }

  /* --- Vendedor, categorías, contenido --- */
  .cats-page { grid-template-columns: 1fr; gap: 0; }
  .sl-head { flex-direction: column; gap: 14px; }
  .sl-actions, .sl-actions .btn { width: 100%; }
  .sl-stats { grid-template-columns: 1fr 1fr; }
  .about-wrap, .story, .promise, .offers-block, .guarantee { padding: 22px 16px; border-radius: 10px; }
  .about-intro h2, .story-text h2, .pr-text h2, .ob-text h2, .gu-head h2 { font-size: 21px; }
  .about-ctas .btn { width: 100%; }
  .faq-wrap { padding: 6px 16px 14px; }
  .seller-banner .sb-text { padding: 22px 16px; }
  .form-card { padding: 20px 16px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 20px; padding: 30px 0 24px; }
  .newsletter .container { flex-direction: column; align-items: stretch; gap: 14px; }
  .nl-form { max-width: none; }

  /* --- Chat --- */
  .chat-panel { width: calc(100vw - 24px); max-height: calc(100vh - 90px); }
  .chat-fab .bot-face { width: 30px !important; height: 30px !important; }

  /* --- Ventanas emergentes --- */
  .modal { padding: 20px 18px; border-radius: 12px; }
  .fm-hero h3 { font-size: 22px; }
  .fm-hero p { font-size: 13.5px; }
  .fm-cta { flex-direction: column; }
  .fm-cta .btn { width: 100%; }
}

@media (max-width: 420px) {
  .sf-grid { grid-template-columns: 1fr; }
  .bn-text h1 { font-size: 21px; }
  .rail { grid-auto-columns: 142px; }
  .trustbar .container { grid-template-columns: 1fr; }
  .sl-stats { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
}

/* Accesos de ayuda dentro del menú lateral */
.mn-help { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 22px 8px; }
.mn-help a {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 12px 11px;
  font-size: 12.5px; color: var(--body); line-height: 1.3;
  transition: border-color .15s, background .15s;
}
.mn-help a:hover { border-color: #c9d2dd; background: #fafbfc; color: var(--ink); }
.mn-help svg { width: 20px !important; height: 20px !important; color: var(--accent); }

/* =========================================================
   MÓVIL — margen lateral garantizado
   Varias reglas redefinían el padding con la forma corta y
   anulaban el margen del contenedor. Esto lo asegura.
   ========================================================= */
@media (max-width: 1000px) {
  .container,
  .container.wide,
  .banner-inner,
  .trustbar .container,
  .newsletter .container,
  .footer .container,
  .topbar .container,
  .header-main {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .catnav .container { padding-left: 12px !important; padding-right: 12px !important; }
  /* Los carruseles asoman al borde para que se vea que hay más */
  .rail, .rank-row, .hot-tabs, .chat-quick, .deal-tabs {
    margin-left: -4px; margin-right: -18px; padding-right: 18px;
  }
}

/* =========================================================
   MÓVIL — barra de listado y controles a ancho completo
   ========================================================= */
@media (max-width: 1000px) {
  .listing-bar {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 10px; padding: 14px 0 12px;
  }
  .listing-bar > * { width: 100%; max-width: 100%; }
  .listing-bar .count { order: 1; }
  #view-switch { order: 2; display: flex !important; }
  .view-switch button { flex: 1; padding: 9px 8px; font-size: 12.5px; }
  .sort-group { order: 3; display: flex; align-items: center; gap: 8px; }
  .sort-group label { white-space: nowrap; font-size: 13px; }
  .sort-group select { flex: 1; min-width: 0; }

  .filters { width: 100%; }
  .filters-toggle {
    display: flex !important; align-items: center; justify-content: space-between;
    width: 100%; box-sizing: border-box;
  }
  .filters-toggle:after { content: "▾"; color: var(--muted); }
  .filters.open .filters-toggle:after { content: "▴"; }
  .filters-body { width: 100%; }
  .f-scroll { max-height: 200px; }
  .active-filters { margin-bottom: 12px; }

  /* La rejilla de grupos no debe desbordar */
  .grp { margin-bottom: 22px; }
  .grp-head { flex-wrap: wrap; gap: 6px; }
}

/* =========================================================
   Rejillas: los carruseles no deben estirar la columna
   (sin min-width:0 un grid item crece con su contenido)
   ========================================================= */
.listing-layout > *,
.listing-main,
.pd-grid > *,
.sl-grid > *,
.about-wrap > *,
.story > *,
.promise > *,
.offers-block > *,
.banner-inner > * { min-width: 0; }

.rail, .rank-row, .product-grid, .hot-tabs, .deal-tabs, .active-filters { max-width: 100%; }
.grp, .section, .listing-main, .listing-wrap { min-width: 0; max-width: 100%; }

/* =========================================================
   MÓVIL — ficha de producto: comprar primero
   ========================================================= */
@media (max-width: 1000px) {
  .pd-main { display: flex; flex-direction: column; }
  .pd-top { order: 1; display: flex; flex-direction: column; padding: 14px 14px 0; }
  .pd-side-movil { margin: 14px 0 6px; }
  .pd-side-movil .buybox { border-radius: 10px; }
  .pd-desc { order: 3; }
  .pd-info { padding: 0; }
  /* Dentro del bloque superior: imagen, marca, título, valoración… */
  .pd-imgbox { order: 1; }
  .pd-info { order: 2; }
  .pd-short { padding: 12px 0; }
  .pd-feats { padding: 10px 0 14px; }
  .pd-rating { flex-wrap: wrap; gap: 4px 8px; font-size: 12.5px; padding-bottom: 12px; }
  .pd-rating .stars svg { width: 14px; height: 14px; }
  .buybox { border-radius: 10px; }
  .reviews { order: 4; }
}

/* =========================================================
   BANNER — carrusel de productos Mercalia Flash
   ========================================================= */
.flash-hero {
  background: #fff; border-radius: 12px; padding: 16px 18px 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,.24); color: var(--ink); width: 100%;
}
.fh-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.fh-flag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--danger); color: #fff; border-radius: 4px;
  padding: 5px 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px;
}
.fh-flag svg { width: 13px !important; height: 13px !important; }
.fh-timer { font-size: 12.5px; color: var(--muted); }
.fh-timer b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }

.fh-stage { min-height: 208px; padding: 14px 0 4px; }
.fh-slide { transition: opacity .28s ease, transform .28s ease; }
.fh-slide { display: flex; }
.fh-slide.entrando { opacity: 0; transform: translateY(6px); }
.fh-item { display: block; text-align: center; }
.fh-img { display: flex; align-items: center; justify-content: center; height: 116px; margin-bottom: 12px; }
.fh-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fh-brand {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--muted);
}
.fh-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 3px 0 8px; min-height: 38px;
}
.fh-item:hover .fh-name { color: var(--accent-hover); }
.fh-prices { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fh-prices b { font-size: 24px; font-weight: 700; color: var(--danger); }
.fh-prices s { font-size: 13px; color: var(--muted); }
.fh-prices i {
  font-style: normal; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}
.fh-rating { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.fh-rating .stars svg { width: 12px; height: 12px; }

.fh-dots { display: flex; justify-content: center; gap: 6px; margin: 10px 0 14px; }
.fh-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #d5d9dd; padding: 0;
  transition: background .2s, width .2s;
}
.fh-dot.on { background: var(--danger); width: 18px; border-radius: 4px; }
.fh-btn { width: 100%; font-size: 13.5px; padding: 12px; }

@media (max-width: 1000px) {
  .flash-hero { padding: 14px 16px 16px; }
  .fh-stage { min-height: 196px; }
  .fh-img { height: 104px; }
  .fh-prices b { font-size: 22px; }
}

/* Flechas del carrusel del banner */
.fh-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 14px; }
.fh-nav .fh-dots { margin: 0; }
.fh-arrow {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d5d9dd;
  display: flex; align-items: center; justify-content: center; color: var(--body); background: #fff;
  transition: border-color .15s, background .15s, color .15s; flex-shrink: 0;
}
.fh-arrow:hover { border-color: var(--ink); background: #f5f7f9; color: var(--ink); }
.fh-arrow svg { width: 15px !important; height: 15px !important; }
.fh-stage { touch-action: pan-y; user-select: none; -webkit-user-select: none; }

/* Bloque de garantías en la ficha de producto */
.pd-values { margin: 30px 0 10px; }
.pdv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pdv {
  border: 1px solid var(--line); border-radius: 10px; padding: 20px 18px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pdv:hover { border-color: #c9d2dd; box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.pdv svg { width: 26px !important; height: 26px !important; color: var(--accent); margin-bottom: 10px; }
.pdv b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 5px; }
.pdv span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 1000px) {
  /* Los botones del banner: el principal manda, el otro más discreto */
  .bn-ctas { grid-template-columns: 1fr; gap: 8px; }
  .bn-ctas .btn-primary { font-size: 14px; padding: 13px 12px; }
  .bn-ctas .btn-ghost { font-size: 13px; padding: 10px 12px; }
  .fh-btn { font-size: 12.5px; padding: 11px 10px; }
  .fh-arrow { width: 34px; height: 34px; }
  .pdv-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pdv { padding: 14px 12px; }
  .pdv b { font-size: 13px; }
  .pdv span { font-size: 11.5px; }
  .pd-values { margin: 22px 0 6px; }
}
@media (max-width: 420px) {
  .pdv-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   MÓVIL — escaparate de portada en una columna, más limpio
   ========================================================= */
@media (max-width: 760px) {
  .sf-grid { grid-template-columns: 1fr; gap: 12px; }
  .sf-box { padding: 16px 16px 14px; }
  .sf-box h2 { font-size: 16px; margin-bottom: 12px; }

  /* Miniaturas en fila de cuatro, todas del mismo tamaño */
  .sf-mini { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .sfm-img { height: 78px !important; padding: 2px; }
  .sf-mini img { max-height: 100%; max-width: 100%; }

  /* Categorías en fila de cuatro con el nombre en una línea */
  .sf-cats { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .sfc-img { height: 62px; }
  .sfc-name {
    font-size: 10px; line-height: 1.2; margin-top: 5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal;
  }

  /* La caja de mañana, en horizontal para no ocupar tanto */
  .sf-tom { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; text-align: left; }
  .sf-tom img { height: 88px; margin: 0; }
  .sft-name { font-size: 13px; margin-bottom: 5px; }
  .sft-prices { justify-content: flex-start; }
  .sft-save { text-align: left; }
  .sf-tomfoot { margin-top: 10px; }

  .sf-more { font-size: 13px; padding-top: 12px; white-space: nowrap; }
}

@media (max-width: 400px) {
  .sf-mini, .sf-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .sfm-img { height: 92px !important; }
  .sfc-img { height: 74px; }
  .sfc-name { font-size: 11px; }
}

/* Carrusel del banner: dos productos por pantalla en móvil */
/* Los productos del carrusel siempre van uno al lado del otro */
.fh-slide { display: flex; gap: 12px; align-items: stretch; }
.fh-slide > .fh-item { flex: 1 1 0; min-width: 0; }
.fh-slide.dos .fh-item { border-right: 1px solid var(--line); padding-right: 12px; }
.fh-slide.dos .fh-item:last-child { border-right: none; padding-right: 0; }

@media (max-width: 760px) {
  .flash-hero { padding: 12px 14px 14px; }
  .fh-top { padding-bottom: 10px; }
  .fh-flag { font-size: 10.5px; padding: 4px 8px; }
  .fh-timer { font-size: 11.5px; }
  .fh-stage { min-height: 172px; padding: 12px 0 2px; }
  .fh-img { height: 72px; margin-bottom: 8px; }
  .fh-brand { font-size: 9.5px; }
  .fh-name { font-size: 11.5px; min-height: 30px; margin: 2px 0 6px; -webkit-line-clamp: 2; }
  .fh-prices { gap: 5px; }
  .fh-prices b { font-size: 16px; }
  .fh-prices s { font-size: 11px; }
  .fh-prices i { font-size: 9.5px; padding: 1px 5px; }
  .fh-rating { font-size: 9.5px; margin-top: 4px; }
  .fh-rating .stars svg { width: 10px; height: 10px; }
  .fh-nav { margin: 8px 0 10px; gap: 8px; }
  .fh-dot { width: 6px; height: 6px; }
  .fh-dot.on { width: 14px; }
  .fh-arrow { width: 30px; height: 30px; }
  .fh-btn { padding: 10px; font-size: 12.5px; }
}

/* =========================================================
   MÓVIL — tarjetas de producto compactas
   ========================================================= */
@media (max-width: 760px) {
  /* Fuera las palabras largas: basta el precio tachado y el ahorro */
  .p-old-row .por, .p-save-row .por { display: none; }
  .p-old-row { font-size: 11.5px; min-height: 15px; }
  /* Solo mostrar "Antes" cuando hay precio tachado real */
  .p-old-row:has(s):before { content: "Antes "; color: var(--muted); }
  .p-save-row { font-size: 11px; min-height: 14px; white-space: nowrap; }

  .p-name { font-size: 12px; min-height: 32px; line-height: 1.3; -webkit-line-clamp: 2; }
  .p-brand { font-size: 9.5px; }
  .p-rating { font-size: 11px; gap: 4px; margin: 5px 0 2px; }
  .p-rating .stars svg { width: 11px; height: 11px; }
  .p-meta { font-size: 10.5px; }
  .p-flag { font-size: 10px; padding: 2px 7px; }
  .p-flag-row { min-height: 20px; }
  .p-add {
    font-size: 11.5px; padding: 8px 6px; margin-top: 8px;
    white-space: nowrap; gap: 5px;
  }
  .p-add svg { width: 13px !important; height: 13px !important; }

  /* Carruseles: tarjetas más estrechas, se ve que hay más al lado */
  .rail { grid-auto-columns: 138px; gap: 10px; }
  .rail .p-card .p-img { height: 104px; padding: 6px; }
  .rail .p-body { padding: 4px 8px 10px; }
  .rail .p-price { font-size: 16px; }
  .rail .p-name { font-size: 11.5px; min-height: 30px; }

  /* Parrillas de dos columnas */
  .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .p-card .p-img { height: 118px; }
}

/* =========================================================
   ESCAPARATE — ARMONIZACIÓN FINAL
   Este bloque va el último a propósito: unifica tamaños en
   todos los anchos y anula los ajustes parciales anteriores.
   Las 4 cajas comparten estructura: título, rejilla 2x2 de
   celdas idénticas y enlace abajo.
   ========================================================= */
.sf-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sf-box {
  display: flex !important; flex-direction: column;
  padding: 18px 18px 16px !important; border: 1px solid var(--line); border-radius: 10px;
}
.sf-box h2 {
  font-size: 16px !important; font-weight: 700; margin-bottom: 14px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Todas las celdas de imagen, idénticas */
.sf-mini, .sf-cats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.sfm-img, .sfc-img {
  height: 104px !important; padding: 8px !important;
  display: flex !important; align-items: center; justify-content: center;
  background: #fff; border-radius: 6px; overflow: hidden;
}
.sfm-img img, .sfc-img img {
  max-height: 100% !important; max-width: 100%; height: auto; width: auto;
  object-fit: contain; mix-blend-mode: multiply;
}
.sfc-name {
  display: block; font-size: 12px !important; color: var(--body); margin-top: 6px !important;
  text-align: center; line-height: 1.25;
  white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
}

/* La caja de mañana, misma pauta vertical que las demás */
.sf-tom {
  display: flex !important; flex-direction: column; align-items: center;
  text-align: center !important; grid-template-columns: none !important;
}
.sf-tom img { height: 104px !important; margin: 0 auto 10px !important; }
.sft-name {
  font-size: 12.5px !important; margin-bottom: 6px !important; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 32px;
}
.sft-prices { justify-content: center !important; }
.sft-prices b { font-size: 18px !important; }
.sft-save { text-align: center !important; }

/* Enlace inferior: una línea, pegado abajo en las 4 cajas */
.sf-more {
  margin-top: auto !important; padding-top: 14px !important; font-size: 13px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Anchos intermedios y móvil: 2 cajas por fila, celdas algo menores */
@media (max-width: 1150px) {
  .sf-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
}
@media (max-width: 560px) {
  .sf-box { padding: 13px 12px 12px !important; }
  .sf-box h2 { font-size: 13.5px !important; margin-bottom: 10px !important; }
  .sf-mini, .sf-cats { gap: 8px !important; }
  .sfm-img, .sfc-img { height: 66px !important; padding: 5px !important; }
  .sfc-name { font-size: 10px !important; margin-top: 4px !important; }
  .sf-tom img { height: 66px !important; margin-bottom: 8px !important; }
  .sft-name { font-size: 11px !important; min-height: 28px; }
  .sft-prices b { font-size: 15px !important; }
  .sft-prices s { font-size: 11px; }
  .sft-save { font-size: 10.5px; }
  .sf-more { font-size: 11.5px !important; padding-top: 10px !important; }
}

/* =========================================================
   CARRUSEL DEL BANNER — ARMONIZACIÓN FINAL
   Dos productos SIEMPRE en fila, tarjetas bajas y compactas
   para que el bloque quede apaisado y no crezca hacia abajo.
   ========================================================= */
.fh-slide {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  gap: 14px; align-items: stretch;
}
.fh-slide .fh-item { flex: 1 1 0 !important; min-width: 0; display: block !important; }
.fh-slide.dos .fh-item { border-right: 1px solid var(--line); padding-right: 14px; }
.fh-slide.dos .fh-item:last-child { border-right: none; padding-right: 0; }

.fh-stage { min-height: 0 !important; padding: 12px 0 2px !important; }
.fh-img { height: 92px !important; margin-bottom: 8px !important; }
.fh-brand { font-size: 9.5px !important; letter-spacing: .5px; }
.fh-name {
  font-size: 12.5px !important; line-height: 1.3 !important;
  min-height: 32px !important; margin: 2px 0 6px !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fh-prices { gap: 6px !important; }
.fh-prices b { font-size: 19px !important; }
.fh-prices s { font-size: 11.5px !important; }
.fh-prices i { font-size: 10px !important; padding: 2px 6px !important; }
.fh-rating { font-size: 10px !important; margin-top: 4px !important; }
.fh-rating .stars svg { width: 11px !important; height: 11px !important; }
.fh-nav { margin: 8px 0 12px !important; }
.fh-btn { padding: 11px !important; font-size: 13px !important; }
.flash-hero { padding: 14px 16px 14px !important; }

@media (max-width: 560px) {
  .fh-img { height: 74px !important; }
  .fh-name { font-size: 11.5px !important; min-height: 30px !important; }
  .fh-prices b { font-size: 16px !important; }
  .fh-prices s { font-size: 10.5px !important; }
  .fh-slide { gap: 10px; }
  .fh-slide.dos .fh-item { padding-right: 10px; }
}

/* Las rejillas del escaparate nunca pueden crecer más que la pantalla */
.sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.sf-grid > .sf-box { min-width: 0 !important; max-width: 100%; }
.sf-mini, .sf-cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.sfm-item, .sfc-item, .sf-tom { min-width: 0 !important; max-width: 100%; }
.sft-prices, .sft-save, .sfc-name { max-width: 100%; }
@media (max-width: 1150px) {
  .sf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}

/* =========================================================
   CABECERA STICKY REFORZADA
   ========================================================= */
.header { position: sticky !important; top: 0 !important; z-index: 100; }
.header-menu {
  display: none;
  background: none; border: none; color: #fff; padding: 8px;
  border-radius: 8px; transition: background .15s;
}
.header-menu:hover { background: rgba(255,255,255,.1); }
.header-menu svg { width: 24px !important; height: 24px !important; }

@media (max-width: 860px) {
  /* Barra superior: el aviso arriba y los enlaces debajo */
  .topbar { display: block !important; padding: 7px 0 !important; }
  .topbar .container {
    display: flex !important; flex-direction: column; align-items: center;
    gap: 5px; text-align: center;
  }
  .topbar .tb-item { font-size: 11.5px; }
  .topbar-links {
    display: flex !important; gap: 14px; justify-content: center;
    font-size: 11px; flex-wrap: wrap;
  }

  /* Cabecera móvil: [menú] [logo centrado en el viewport] [acciones]
     Se usa position absolute en el logo para que quede pegado al centro
     de la pantalla, independientemente de lo que ocupen los laterales. */
  /* Rejilla de 3 columnas: los laterales miden lo mismo (1fr),
     así el logo del centro queda centrado de verdad y nada se solapa. */
  .header-main {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: auto auto;
    align-items: center; gap: 0 8px !important;
    padding: 10px 16px 12px !important;
  }
  .header-menu {
    display: flex !important; align-items: center; justify-content: flex-start;
    grid-column: 1; grid-row: 1;
    min-height: 40px; padding-left: 0 !important;
  }
  .logo-link {
    grid-column: 2; grid-row: 1;
    display: flex !important; align-items: center; justify-content: center;
  }
  .logo-link .logo-tag { display: none; }
  .logo-word { font-size: 26px !important; letter-spacing: -.6px !important; }
  .logo-dot { width: 9px !important; height: 9px !important; }

  .header-actions {
    grid-column: 3; grid-row: 1;
    display: flex !important; gap: 2px !important; justify-content: flex-end;
  }
  .h-action { padding: 6px !important; }
  .h-action .lbl { display: none !important; }
  .h-action svg { width: 22px !important; height: 22px !important; }

  .search {
    grid-column: 1 / -1; grid-row: 2;
    max-width: none; margin-top: 10px;
    border-radius: 10px;
  }

  /* Ocultar botón "Menú" duplicado en catnav */
  .catnav .all[id="menu-open"] { display: none !important; }
}

@media (max-width: 420px) {
  .logo-word { font-size: 24px !important; }
  .h-action svg { width: 20px !important; height: 20px !important; }
}

/* =========================================================
   BANNER EN PC — textos más grandes y con más presencia
   (solo pantallas anchas; el móvil mantiene su tamaño)
   ========================================================= */
@media (min-width: 1001px) {
  .banner-inner { padding-top: 44px !important; padding-bottom: 44px !important; }
  .bn-kicker { font-size: 13px !important; letter-spacing: 1px; margin-bottom: 14px !important; }
  .bn-text h1 {
    font-size: clamp(30px, 3.2vw, 42px) !important;
    line-height: 1.14 !important; letter-spacing: -.8px !important;
    margin-bottom: 16px !important;
  }
  .bn-text p { font-size: 17px !important; line-height: 1.55; max-width: 580px !important; margin-bottom: 24px !important; }
  .bn-ctas .btn { font-size: 15.5px !important; padding: 15px 28px !important; }
}

@media (min-width: 1400px) {
  .bn-text h1 { font-size: 45px !important; }
  .bn-text p { font-size: 18px !important; max-width: 620px !important; }
}

/* Logo más grande en móvil */
@media (max-width: 860px) {
  .logo-word { font-size: 32px !important; letter-spacing: -.9px !important; }
  .logo-dot { width: 11px !important; height: 11px !important; }
  .header-main { padding-top: 12px !important; padding-bottom: 12px !important; }
  .header-menu svg { width: 26px !important; height: 26px !important; }
  .h-action svg { width: 24px !important; height: 24px !important; }
}
@media (max-width: 400px) {
  .logo-word { font-size: 29px !important; }
  .logo-dot { width: 10px !important; height: 10px !important; }
  .header-menu svg { width: 24px !important; height: 24px !important; }
  .h-action svg { width: 22px !important; height: 22px !important; }
  .header-main { padding-left: 12px !important; padding-right: 12px !important; }
}

/* =========================================================
   CABECERA PEGAJOSA + BARRA DE AVISOS EN MÓVIL
   Al bajar se recogen el aviso y el buscador: la fila de
   menú + logo + accesos queda siempre visible arriba.
   ========================================================= */
/* La cabecera va FIJA, no pegada: al encogerse cambiaba la altura
   del documento y el contenido daba tirones al bajar. Con position
   fixed y un hueco reservado en el body, nada se mueve. */
@media (max-width: 860px) {
  #site-header {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 200;
    background: var(--ink);
    transform: translateZ(0);          /* capa propia: no repinta la página */
    contain: layout;                   /* no reajusta el resto; sin paint, que recortaría el desplegable del buscador */
  }
  .header { position: static !important; }
  /* Hueco equivalente a la cabecera completa (lo ajusta el JS al cargar) */
  body { padding-top: 198px; }

  /* Aviso: una sola línea, sin enlaces ni reclamo de envío */
  .topbar { display: block !important; padding: 6px 0 !important; overflow: hidden; }
  .topbar .container {
    display: block !important; text-align: center;
    padding-left: 10px !important; padding-right: 10px !important;
  }
  .tb-cinta { width: 100%; }
  .tb-track { animation-duration: 24s; }
  .tb-item { font-size: 11.5px; padding-right: 34px; }
  .tb-item::after { right: 15px; }
  .topbar-links { display: none !important; }

  /* Al bajar se recogen aviso, buscador y categorías: queda una barra
     fina con el menú, el logo y los accesos. Sin transición de altura:
     animar max-height durante el scroll es justo lo que da tirones. */
  html.scrolled .topbar,
  html.scrolled .catnav { display: none !important; }
  .header.compacto .search { display: none !important; }
  .header.compacto .header-main { padding-top: 9px !important; padding-bottom: 9px !important; }
  .header.compacto .logo-word { font-size: 27px !important; }
  .header.compacto .logo-tag { display: none !important; }
  html.scrolled #site-header { box-shadow: 0 4px 16px rgba(0,0,0,.16); }

  /* Los anclajes no quedan tapados por la barra */
  :target, [id] { scroll-margin-top: 76px; }
}

/* =========================================================
   MÓVIL — bloque "Por qué lo hacemos así" (Sello Mercalia)
   Una sola columna: texto, cita y garantías en dos filas.
   ========================================================= */
@media (max-width: 900px) {
  .promise {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 18px !important;
  }
  .pr-text h2 { font-size: 22px !important; line-height: 1.24; }
  .pr-text p { font-size: 15px !important; line-height: 1.62; }
  .pr-quote {
    font-size: 15px !important; line-height: 1.5; padding: 18px 20px !important;
    border-radius: 12px !important; margin-bottom: 14px !important;
    border-left: 4px solid var(--accent);
  }
  .pr-badges {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }
  .pr-badges span {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 42px; padding: 8px 10px !important; border-radius: 10px !important;
    font-size: 12.5px !important; line-height: 1.25;
  }
}
@media (max-width: 420px) {
  .pr-badges { grid-template-columns: 1fr !important; }
  .pr-badges span { justify-content: flex-start; text-align: left; min-height: 0; }
}

/* =========================================================
   LISTADO ORDENADO POR MARCA
   Un bloque por marca, con su nombre y cuántos productos
   tiene, en lugar de una parrilla suelta.
   ========================================================= */
.marca-bloque { margin-bottom: 34px; }
.marca-bloque:last-child { margin-bottom: 8px; }

.marca-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 10px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.marca-head h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 800;
  color: var(--ink); letter-spacing: -.3px; line-height: 1.2;
}
.marca-head h2 span {
  font-family: var(--font); font-size: 13px; font-weight: 500;
  color: var(--muted); letter-spacing: 0; margin-left: 8px;
}
.marca-solo {
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--blue);
  padding: 4px 2px; border-radius: 6px;
}
.marca-solo:hover { text-decoration: underline; }
.marca-solo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 860px) {
  .marca-bloque { margin-bottom: 26px; }
  .marca-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .marca-head h2 { font-size: 18px; }
  .marca-solo { font-size: 13px; padding-left: 0; }
}

/* =========================================================
   FILTRO DE MARCA JUNTO A "ORDENAR POR"
   El contador se queda a la izquierda y los dos desplegables
   viajan juntos a la derecha.
   ========================================================= */
.listing-bar .count { margin-right: auto; }
.brand-group { margin-left: auto; }
.brand-group + .sort-group { margin-left: 0; }
.brand-group select { min-width: 190px; }
.brand-group label,
.sort-group label { color: var(--muted); white-space: nowrap; }

@media (max-width: 860px) {
  .listing-bar .count, .brand-group { margin-right: 0; margin-left: 0; }
  .brand-group { width: 100%; }
  .brand-group select { flex: 1; min-width: 0; }
}

/* =========================================================
   BUSCADOR CON SUGERENCIAS
   Desplegable con foto, nombre, categoría y precio, al estilo
   del de Amazon. Cuelga del formulario de búsqueda.
   ========================================================= */
.search { position: relative; }

.sug {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px;
}
.sug.abierta { display: block; }

.sug-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
.sug-fila:hover, .sug-fila.activa { background: #f1f4f8; }

.sug-img {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 6px;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sug-img img { width: 100%; height: 100%; object-fit: contain; }

.sug-lupa {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 6px; background: #f1f4f8;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.sug-lupa svg { width: 18px; height: 18px; }

.sug-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sug-nombre {
  font-size: 14px; font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sug-nombre b { font-weight: 800; }
.sug-cat { font-size: 12px; color: var(--muted); }

.sug-precio {
  flex: 0 0 auto; text-align: right; font-size: 14.5px; font-weight: 700;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.sug-flash {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 4px;
}

.sug-marca .sug-nombre { font-weight: 700; }
.sug-todos {
  justify-content: center; font-size: 13.5px; color: var(--blue); font-weight: 600;
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px;
}
.sug-vacio { padding: 18px 14px; font-size: 14px; color: var(--muted); text-align: center; }

@media (max-width: 860px) {
  .sug { max-height: 62vh; }
  .sug-img, .sug-lupa { flex-basis: 40px; width: 40px; height: 40px; }
  .sug-nombre { font-size: 13.5px; white-space: normal; }
  .sug-precio { font-size: 14px; }
}

/* El formulario de búsqueda no puede recortar: el desplegable de
   sugerencias se sale de su caja. Se redondean input y botón por
   separado para conservar la pastilla. */
.search { overflow: visible; }
.search input { border-radius: 8px 0 0 8px; }
.search button { border-radius: 0 8px 8px 0; }
@media (max-width: 860px) {
  .search input { border-radius: 10px 0 0 10px; }
  .search button { border-radius: 0 10px 10px 0; }
}

/* =========================================================
   OPINIONES DE CLIENTES — ficha de producto
   ========================================================= */
.rev-aspectos {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; margin: 4px 0 26px; background: #fbfcfd;
}
.rev-aspectos h3 {
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin-bottom: 14px; letter-spacing: -.1px;
}
.ra-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.ra-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.ra-txt { flex: 0 0 auto; color: var(--body); min-width: 132px; }
.ra-track { flex: 1; height: 6px; border-radius: 3px; background: #e9edf2; overflow: hidden; }
.ra-fill { display: block; height: 100%; background: var(--ok); border-radius: 3px; }
.ra-pct { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.rev-lista { display: flex; flex-direction: column; }
.rev-item.oculta { display: none; }

.rv-stars { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
.rv-stars svg { width: 15px; height: 15px; }
.rv-titulo { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.rv-date { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.rv-verified {
  display: inline-block; margin-left: 8px;
  font-size: 12px; font-weight: 600; color: var(--ok);
}
.rv-util {
  font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px;
}

.rev-mas {
  display: block; width: 100%; margin-top: 6px; padding: 12px;
  background: none; border: 1px solid #c9d2dd; border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--blue);
  cursor: pointer; transition: background .15s;
}
.rev-mas:hover { background: #f1f4f8; }

@media (max-width: 860px) {
  .rev-aspectos { padding: 16px; }
  .ra-lista { grid-template-columns: 1fr; gap: 10px; }
  .ra-txt { min-width: 118px; font-size: 13px; }
  .rv-titulo { font-size: 14px; }
}

/* =========================================================
   CALENDARIO MERCALIA FLASH
   ========================================================= */
.fl-bloque { margin: 0 0 46px; }
.fl-hoy {
  background: var(--ink); color: #fff; border-radius: 16px;
  padding: 26px 28px 28px; margin-top: 6px;
}
.fl-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.fl-dia {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.fl-hoy .fl-dia { color: #e79a6a; }
.fl-head h2 {
  font-family: var(--font-display); font-size: 25px; font-weight: 800;
  letter-spacing: -.5px; line-height: 1.2; color: var(--ink);
}
.fl-hoy .fl-head h2 { color: #fff; }
.fl-sub { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 640px; }
.fl-reloj { font-size: 13.5px; color: #b9c2cd; white-space: nowrap; }
.fl-reloj b { color: #fff; font-size: 17px; font-variant-numeric: tabular-nums; }

.fl-vertodo {
  display: inline-block; margin-top: 18px; font-size: 14px; font-weight: 600;
  color: var(--blue); text-decoration: none;
}
.fl-hoy .fl-vertodo { color: #f0c3a5; }
.fl-vertodo:hover { text-decoration: underline; }

/* --- Mañana --- */
.fl-manana { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fl-mcard {
  display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.fl-mcard:hover { border-color: #c9d2dd; box-shadow: var(--shadow-hover); }
.fl-mimg {
  flex: 0 0 58px; width: 58px; height: 58px; border-radius: 8px;
  background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fl-mimg img { width: 100%; height: 100%; object-fit: contain; }
.fl-mtxt { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fl-mnombre {
  font-size: 13.5px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fl-mprecios { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.fl-mprecios s { font-size: 12.5px; color: var(--muted); }
.fl-mprecios b { font-size: 15px; color: var(--danger); }
.fl-mpct {
  font-size: 11px; font-weight: 800; color: #fff; background: var(--ok);
  padding: 2px 6px; border-radius: 4px;
}

/* --- Días pasados --- */
.fl-dia-pasado { margin-bottom: 26px; }
.fl-dia-pasado h3 {
  font-size: 14px; font-weight: 700; color: var(--ink);
  text-transform: capitalize; padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.fl-pasado-lista { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.fl-pcard {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  color: var(--ink); opacity: .78; transition: opacity .15s;
}
.fl-pcard:hover { opacity: 1; }
.fl-pimg {
  height: 92px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 6px; overflow: hidden;
}
.fl-pimg img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(.35); }
.fl-pnombre {
  font-size: 12.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fl-pprecio { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.fl-ppct { font-size: 10.5px; font-weight: 700; color: var(--muted); }

@media (max-width: 1000px) {
  .fl-manana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-pasado-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fl-hoy { padding: 20px 16px 22px; border-radius: 12px; }
  .fl-head { margin-bottom: 16px; }
  .fl-head h2 { font-size: 21px; }
  .fl-manana { grid-template-columns: 1fr; }
  .fl-pasado-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fl-bloque { margin-bottom: 34px; }
}

/* =========================================================
   AVISOS DE MERCALIA FLASH
   ========================================================= */
.btn-aviso {
  width: 100%; margin-top: 10px; padding: 11px 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1px solid #c9d2dd; border-radius: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.btn-aviso:hover { background: #f4f7fa; border-color: #aab6c4; }
.btn-aviso svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn-aviso.puesto { background: #eefaf2; border-color: #c8ecd7; color: var(--ok); }
.btn-aviso u { text-underline-offset: 2px; }

.av-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 34px; align-items: start; margin-top: 8px; }
.av-col h2 {
  font-family: var(--font-display); font-size: 19px; font-weight: 800;
  color: var(--ink); letter-spacing: -.3px; margin-bottom: 8px;
}
.av-h2b { margin-top: 30px; }
.av-sub { font-size: 14px; color: var(--muted); margin-bottom: 18px; max-width: 620px; }

.av-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.av-cat {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
  transition: border-color .15s, background .15s;
}
.av-cat:hover { border-color: #c9d2dd; background: #fbfcfd; }
.av-cat:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.av-cat input { accent-color: var(--accent); flex: 0 0 auto; }
.av-ico { flex: 0 0 auto; color: var(--muted); display: flex; }
.av-ico svg { width: 19px; height: 19px; }
.av-cat span span, .av-cat > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.av-cat b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.av-cat small { font-size: 11.5px; color: var(--muted); }

.av-prods { display: flex; flex-direction: column; gap: 8px; }
.av-prod {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.av-prod img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.av-prod div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.av-prod b { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.av-prod span { font-size: 13px; color: var(--muted); }
.av-quita {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--muted); padding: 4px 8px; border-radius: 6px;
}
.av-quita:hover { background: #f1f4f8; color: var(--danger); }
.av-vacio {
  font-size: 14px; color: var(--muted); background: #fbfcfd;
  border: 1px dashed var(--line); border-radius: 10px; padding: 18px;
}

.av-form-col { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.av-form {
  border: 1px solid var(--line); border-radius: 14px; padding: 22px;
  background: #fff; box-shadow: var(--shadow-hover);
}
.av-form h2 { margin-bottom: 14px; }
.av-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 12px; }
.av-caja {
  border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; background: #fbfcfd;
}
.av-caja h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.av-caja ol { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--body); line-height: 1.7; }

.av-ok { text-align: center; padding: 56px 20px; max-width: 560px; margin: 0 auto; }
.av-ok svg { width: 46px; height: 46px; color: var(--ok); margin-bottom: 14px; }
.av-ok h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.av-ok p { font-size: 15px; color: var(--body); line-height: 1.6; }
.av-ok-btns { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .av-grid { grid-template-columns: 1fr; gap: 26px; }
  .av-form-col { position: static; }
  .av-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .av-cats { grid-template-columns: 1fr; }
  .av-form { padding: 18px; }
}

/* El botón fantasma está pensado para fondos oscuros: sobre el
   blanco de la confirmación necesita borde y color propios. */
.av-ok-btns .btn-ghost {
  background: #fff; border: 1px solid #c9d2dd; color: var(--ink);
}
.av-ok-btns .btn-ghost:hover { background: #f4f7fa; border-color: #aab6c4; }

/* Miniaturas de la ficha: solo aparecen en los productos con más
   de una foto (galería). Clic para cambiar la imagen grande. */
.pd-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-thumb {
  width: 60px; height: 60px; padding: 4px; border-radius: 8px;
  background: #fff; border: 2px solid var(--line); cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: border-color .15s;
}
.pd-thumb:hover { border-color: #c9d2dd; }
.pd-thumb.activa { border-color: var(--accent); }
.pd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }

@media (max-width: 1000px) {
  .pd-galeria { order: 1; }
  .pd-thumb { width: 52px; height: 52px; }
}

/* =========================================================
   PAGO — Stripe Checkout embebido
   ========================================================= */
.pago-wrap { padding: 8px 0 60px; }
.pago-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.pago-form-col {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  padding: 18px; min-height: 420px;
}
.pago-cargando, .pago-error {
  display: flex; align-items: center; justify-content: center;
  min-height: 380px; text-align: center; padding: 30px; color: var(--muted); font-size: 14.5px;
}
.pago-error { color: var(--danger); }

.pago-resumen { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 22px; position: sticky; top: 130px; }
.pago-resumen h3 { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.pr-lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pr-item { display: flex; align-items: center; gap: 10px; }
.pr-item img { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.pr-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-name { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-qty { font-size: 12px; color: var(--muted); }
.pr-price { font-size: 13.5px; font-weight: 700; flex: 0 0 auto; }
.pr-row { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }
.pr-row.total { font-size: 16px; font-weight: 800; color: var(--ink); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.pr-row .free { color: var(--ok); font-weight: 700; }
.pr-secure { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.pr-secure svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.pr-volver { display: block; text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--blue); font-weight: 600; }

@media (max-width: 1000px) {
  .pago-grid { grid-template-columns: 1fr; }
  .pago-resumen { position: static; order: -1; }
}

/* Dos accesos del menú lateral, resaltados: seguir pedido y contacto */
.mn-help a.mn-destacado { border-color: var(--accent); background: var(--accent-soft); }
.mn-help a.mn-destacado:hover { background: #f7e4d5; }
.mn-help a.mn-destacado svg { color: var(--accent-hover); }

/* =========================================================
   FORMULARIOS REALES — contacto y devolución
   ========================================================= */
.form-page { padding: 8px 0 60px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.form-card {
  background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 28px;
}
.form-card .field .opt { font-weight: 400; color: var(--muted); }
.form-card .check { margin: 4px 0 18px; align-items: flex-start; }
.form-card .btn { width: 100%; }
.form-msg { margin-top: 14px; font-size: 13.5px; text-align: center; min-height: 1em; }
.form-msg.ok { color: var(--ok); font-weight: 600; }
.form-msg.error { color: var(--danger); font-weight: 600; }

.form-aside { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 22px; position: sticky; top: 130px; }
.form-aside h3 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.form-aside h3:not(:first-child) { margin-top: 20px; }
.form-aside ul, .form-aside ol { padding-left: 18px; font-size: 13.5px; color: var(--body); line-height: 1.8; }
.form-aside ul { list-style: none; padding-left: 0; }
.form-aside ul li { margin-bottom: 4px; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-aside { position: static; }
  .form-card { padding: 20px; }
}

/* =========================================================
   MÉTODO DE PAGO — tarjeta o contra reembolso
   ========================================================= */
.pago-metodo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pm-opcion {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px;
  transition: border-color .15s, background .15s;
}
.pm-opcion:hover { border-color: #c9d2dd; background: #fbfcfd; }
.pm-opcion:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pm-opcion input { margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }
.pm-opcion span { display: flex; flex-direction: column; gap: 3px; }
.pm-opcion b { font-size: 13.5px; color: var(--ink); }
.pm-opcion small { font-size: 12px; color: var(--muted); line-height: 1.4; }

.cod-form { padding: 4px 2px 2px; }
.cod-form .field { margin-bottom: 12px; }
.cod-form .btn { width: 100%; margin-top: 4px; }
.cod-row2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }

@media (max-width: 600px) {
  .pago-metodo { grid-template-columns: 1fr; }
  .cod-row2 { grid-template-columns: 1fr; }
}

/* Método de pago no disponible (p. ej. contra reembolso por importe) */
.pm-opcion.pm-no-disponible { opacity: .5; cursor: not-allowed; background: #fafbfc; }
.pm-opcion.pm-no-disponible:hover { border-color: var(--line); background: #fafbfc; }
.pm-opcion.pm-no-disponible small { color: var(--danger); }

/* Recordatorio de garantía en el resumen del pago */
.pr-sello {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 14px;
  padding: 12px 13px; border-radius: 10px; background: #eefaf2; border: 1px solid #c8ecd7;
  font-size: 12.5px; line-height: 1.5; color: var(--body); text-decoration: none;
}
.pr-sello:hover { background: #e4f6ec; }
.pr-sello svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ok); margin-top: 1px; }
.pr-sello b { color: var(--ok); }

/* =========================================================
   CHECKOUT EN DOS PASOS — dirección y luego forma de pago
   ========================================================= */
.paso { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 24px; margin-bottom: 16px; }
.paso-tit {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink);
}
.paso-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.paso-bloqueo {
  background: #fbfcfd; border: 1px dashed var(--line); border-radius: 10px;
  padding: 18px; font-size: 13.5px; color: var(--muted); text-align: center;
}
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.paso .field { margin-bottom: 12px; }
.paso .field .opt { font-weight: 400; color: var(--muted); }

.cod-caja { border: 1px solid var(--line); border-radius: 10px; padding: 18px; }
.cod-caja p { font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
.cod-caja .btn { width: 100%; }

/* Datos de envío fijados al elegir forma de pago */
.envio-fijado {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-radius: 10px; background: #f7f9fb; border: 1px solid var(--line);
}
.envio-fijado[hidden] { display: none; }
.ef-texto { font-size: 13.5px; line-height: 1.55; color: var(--body); min-width: 0; overflow-wrap: anywhere; }
.ef-texto b { color: var(--ink); }
.ef-cambiar {
  flex: 0 0 auto; background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--accent); text-decoration: underline;
}
.ef-cambiar:hover { color: var(--accent-hover); }
@media (max-width: 600px) {
  .envio-fijado { flex-direction: column; gap: 6px; }
}

/* «¿Querías decir …@gmail.com?» bajo el correo */
.correo-sug { margin-top: 6px; font-size: 13px; color: var(--danger); line-height: 1.5; }
.sug-correo {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--accent); text-decoration: underline; overflow-wrap: anywhere;
}

/* Fecha de entrega, en la cesta y en el pago */
.cs-entrega, .pr-entrega {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  padding: 10px 12px; border-radius: 8px; background: #eefaf2; border: 1px solid #c8ecd7;
  font-size: 12.5px; line-height: 1.5; color: var(--body);
}
.cs-entrega svg, .pr-entrega svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ok); margin-top: 1px; }
.cs-entrega b, .pr-entrega b { color: var(--ok); }

@media (max-width: 600px) {
  .campo-fila { grid-template-columns: 1fr; gap: 0; }
  .paso { padding: 18px; }
}

/* ==========================================================
   BANNER DE COOKIES (Consent Mode v2)
   Anclado abajo, sin bloquear la página: el visitante puede
   seguir navegando mientras decide. En móvil ocupa el ancho
   completo; en escritorio es una tarjeta a la izquierda.
   ========================================================== */
.ck-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  padding: 12px;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  animation: ckSube .28s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes ckSube { from { opacity: 0; transform: translateY(14px); } }

.ck-card {
  pointer-events: auto;
  width: 100%;
  max-width: 440px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(19, 25, 33, .16);
  padding: 18px 18px 14px;
}

.ck-tit { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 6px; letter-spacing: -.2px; }
.ck-txt { font-size: 13px; line-height: 1.55; color: var(--body); }
.ck-legal { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.ck-legal a { color: var(--blue); text-decoration: none; font-weight: 600; }
.ck-legal a:hover { text-decoration: underline; }

.ck-opciones { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 10px; }
.ck-opciones[hidden] { display: none; }

.ck-op { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.ck-op input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; cursor: pointer; }
.ck-op b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.ck-op small { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 1px; }
.ck-op-fija { cursor: default; opacity: .78; }
.ck-op-fija input { cursor: default; }

.ck-botones { margin-top: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ck-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 9px 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ck-btn-pri { background: var(--accent); color: #fff; margin-left: auto; }
.ck-btn-pri:hover { background: var(--accent-hover); }
.ck-btn-sec { background: var(--bg); color: var(--ink); border-color: var(--line); }
.ck-btn-sec:hover { border-color: var(--muted); }
.ck-btn-lin { background: none; color: var(--muted); padding-left: 2px; padding-right: 2px; }
.ck-btn-lin:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 560px) {
  .ck-wrap { padding: 8px; }
  .ck-card { max-width: none; padding: 16px 15px 13px; border-radius: 13px; }
  .ck-botones { gap: 7px; }
  /* En móvil las dos acciones reales van a la misma altura y
     ocupan lo mismo: rechazar no puede costar más que aceptar. */
  .ck-btn-sec, .ck-btn-pri { flex: 1; text-align: center; margin-left: 0; padding: 11px 10px; }
  .ck-btn-lin { width: 100%; order: 3; text-align: center; padding-top: 4px; }
}

/* ==========================================================
   PÁGINA 404
   Un error que ayuda: adivina qué se buscaba a partir de la
   URL y ofrece resultados, en vez de dejar al visitante en un
   callejón sin salida.
   ========================================================== */
.e4-wrap { padding: 56px 0 72px; text-align: center; }

.e4-cara {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink); margin-bottom: 22px;
}
.e4-num { font-size: 92px; font-weight: 800; letter-spacing: -4px; line-height: 1; }
.e4-caja { width: 78px; height: 78px; color: var(--accent); }
.e4-caja svg { width: 100%; height: 100%; }

.e4-wrap h1 { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -.6px; margin-bottom: 10px; }
.e4-txt { font-size: 15.5px; line-height: 1.7; color: var(--body); max-width: 560px; margin: 0 auto; }

.e4-buscar { display: flex; gap: 8px; max-width: 520px; margin: 26px auto 0; }
.e4-buscar input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px;
  padding: 12px 15px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink);
}
.e4-buscar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.e4-buscar .btn { flex: none; padding: 12px 22px; }

.e4-botones { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.e4-botones .btn { padding: 10px 18px; font-size: 14px; }

.e4-sug { margin-top: 52px; text-align: left; }
.e4-sug h2 {
  font-size: 13px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .7px;
  padding-bottom: 10px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}

.e4-ayuda { margin-top: 40px; font-size: 14px; line-height: 1.75; color: var(--muted); }
.e4-ayuda a { color: var(--blue); font-weight: 600; text-decoration: none; }
.e4-ayuda a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .e4-wrap { padding: 34px 0 52px; }
  .e4-num { font-size: 64px; letter-spacing: -3px; }
  .e4-caja { width: 56px; height: 56px; }
  .e4-wrap h1 { font-size: 23px; }
  .e4-txt { font-size: 14.5px; }
  .e4-buscar { flex-direction: column; }
  .e4-buscar .btn { padding: 12px; }
  .e4-botones .btn { flex: 1 1 auto; }
  .e4-sug { margin-top: 38px; }
}

/* ==========================================================
   PASADA DE AUDITORÍA — septiembre 2026
   Va al final del fichero a propósito: el CSS creció por capas
   y este bloque tiene que ganar a las "armonizaciones finales"
   anteriores. Cada apartado dice qué problema resuelve.
   ========================================================== */

/* ---------- Botón secundario (faltaba y lo usan 404 y ficha) ---------- */
.btn-sec {
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); font-weight: 700;
}
.btn-sec:hover { border-color: var(--accent); color: var(--accent-hover); }

/* ---------- F33 · Foco visible para teclado ----------
   Los botones tenían outline:none y quien navega con teclado no
   sabía dónde estaba. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1200;
  background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 700;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* ---------- F34 · Contraste ----------
   El naranja de marca da 4,25:1 sobre blanco: vale para fondos de
   botón, no para texto pequeño. Se usa uno más oscuro al escribir. */
:root {
  --accent-txt: #b04e16;   /* 5,2:1 sobre blanco */
  --muted-2: #727c88;      /* sustituye a #8a939f, que daba 3,1:1 */
}
/* OJO: aquí NO entran .p-flag ni .p-badge — llevan fondo de color y
   su texto tiene que ser blanco, no gris. */
.fb-back, .p-old, .rk-old,
.legal-fecha, .form-note, .ci-seller { color: var(--muted-2); }

/* Etiquetas sobre fondo de color: siempre en blanco. */
.p-flag, .p-badge, .bw-pct, .fl-badge, .fb-badge {
  color: #fff !important;
}
.p-save, .bw-save, .p-disc { color: var(--accent-txt); }

/* ==========================================================
   F05 · CABECERA MÍNIMA EN PÁGINAS INTERIORES (móvil)
   Sin barra de avisos, sin tira de categorías y con el buscador
   detrás de la lupa: de 195 px a 60 px. El producto sube casi
   una pantalla y media.
   ========================================================== */
.h-buscar { display: none; background: none; border: 0; cursor: pointer; }

@media (max-width: 860px) {
  #site-header.interior .topbar,
  #site-header.interior .catnav { display: none !important; }

  #site-header.interior .search { display: none; }
  #site-header.interior.buscando .search {
    display: flex;
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 8px 12px 10px;
    background: var(--ink); z-index: 60;
  }
  #site-header.interior { position: fixed; }
  #site-header.interior .h-buscar {
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit; padding: 6px;
  }
  #site-header.interior .header-main { padding-top: 8px; padding-bottom: 8px; }
}

/* ==========================================================
   F14 · La foto es lo que decide el clic
   Era de 102 px en una tarjeta de 160. Ahora ocupa el ancho.
   ========================================================== */
@media (max-width: 860px) {
  .p-card .p-img { height: auto !important; aspect-ratio: 1 / 1; padding: 6px !important; }
  .p-card .p-img img { width: 100%; height: 100%; object-fit: contain; }
  .rail .p-card .p-img { height: auto !important; aspect-ratio: 1 / 1; }
}

/* ==========================================================
   F15 · Nada por debajo de 12 px
   Eran 408 textos en portada y 309 en categoría.
   ========================================================== */
@media (max-width: 860px) {
  .p-brand, .fh-brand, .sfc-name, .sft-name,
  .p-flag, .p-badge, .p-meta, .p-old, .rk-old,
  .rv-date, .rv-util, .ci-seller, .bs-label,
  .fh-name, .sf-more { font-size: 12px !important; }

  /* Lo que hay que leer para decidir, un punto más grande */
  .p-brand, .p-old, .p-meta { font-size: 12.5px !important; }
  .p-name, .fh-name, .rk-name { font-size: 14px !important; }
}

/* ==========================================================
   F19 · Nombres truncados que se comen la variante
   "Apple iPad 10ª generación (WiFi, 64…" no sirve para decidir.
   ========================================================== */
.p-name, .rk-name, .fh-name, .cc-name {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

/* ==========================================================
   Guías dentro de la ficha y de la portada
   ----------------------------------------------------------
   Enlaces de catálogo a blog, escritos en el HTML y no pintados
   por JavaScript: son el camino que le faltaba a Google para
   llegar a las guías desde las 651 fichas.
   ========================================================== */
.gf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gf-card {
  display: grid; align-content: start; gap: 5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 16px 14px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gf-card:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.gf-tit { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.gf-desc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.gf-mas { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 4px; }
.gf-todas {
  display: inline-block; margin-top: 14px; font-size: 13.5px;
  font-weight: 600; color: var(--accent); text-decoration: underline;
}
.gf-row-6 { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1100px) { .gf-row-6 { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 860px) {
  .gf-row, .gf-row-6 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .guias-ficha .gf-row { grid-template-columns: 1fr; }
  .gf-card { padding: 13px 14px; border-radius: 12px; }
  .gf-tit { font-size: 14.5px; }
  .gf-desc { font-size: 12.5px; }
  .gf-mas { display: none; }   /* la tarjeta entera ya es el enlace */
  .gf-todas { margin-top: 11px; }
}

/* ---------- Pedido contra reembolso desde la ficha ----------
   El botón va el primero y con el color de la marca: es el que
   convence a quien no se fía. Debajo, la nota en pequeño con lo que
   cuesta y que se puede devolver. */
.btn-cod {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font-weight: 700; font-size: 15px; padding: 13px 14px; border-radius: 100px;
  cursor: pointer; transition: background .15s, transform .12s;
}
.btn-cod:hover { background: #2a2f38; }
.btn-cod:active { transform: scale(.985); }
.btn-cod svg { width: 18px; height: 18px; }
.bb-cod-nota { font-size: 12.5px; color: var(--muted); text-align: center; margin: 6px 0 10px; line-height: 1.45; }

.modal-cod { max-width: 560px; max-height: 92vh; overflow: auto; padding: 22px 22px 18px; }
.modal-cod h3 { margin: 0 32px 4px 0; font-size: 21px; }
.cod-sub { font-size: 14px; color: var(--body); margin: 0 0 14px; line-height: 1.5; }
.cod-resumen { background: var(--bg); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; }
.cr-prod { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cr-prod picture { display: contents; }
.cr-prod img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; flex: none; }
.cr-prod b { display: block; font-size: 13.5px; line-height: 1.3; }
.cr-prod span { color: var(--muted); font-size: 12.5px; }
.cr-row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--body); }
.cr-total { font-weight: 800; color: var(--ink); font-size: 15px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
.cr-fecha { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.modal-cod .form-grid { gap: 10px; }
.modal-cod .field input { font-size: 15px; }   /* 16px evita el zoom en iOS; 15 con viewport basta */
.cod-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 12px 0; line-height: 1.4; }
.cod-check input { margin-top: 2px; }
.cod-enviar { width: 100%; padding: 14px !important; font-size: 15px !important; }
.cod-legal { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.cod-ok { padding: 20px 6px 8px !important; }
@media (max-width: 640px) {
  .modal-cod { max-width: none; width: calc(100vw - 20px); max-height: 94vh; padding: 18px 14px 14px; }
  .modal-cod .form-grid { grid-template-columns: 1fr; }
  .modal-cod .field input { font-size: 16px; }
}

/* Barra fija de contra reembolso en la ficha (solo móvil). Deja
   hueco a la derecha para no tapar la burbuja del chat. */
.cod-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 78px 9px 14px; background: #fff;
  border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.08);
  transform: translateY(110%); transition: transform .22s ease;
}
.cod-sticky.visible { transform: translateY(0); }
html.cod-con-barra body { padding-bottom: 66px; }
.cs-txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.cs-txt b { font-size: 17px; color: var(--ink); }
.cs-txt span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--ink); color: #fff; border: 0; border-radius: 100px;
  font-weight: 700; font-size: 14px; padding: 11px 16px; cursor: pointer;
}
.cs-btn svg { width: 16px; height: 16px; }
@media (min-width: 861px) { .cod-sticky { display: none; } }

/* ---------- Nota de las páginas de aterrizaje ----------
   El aviso de «no somos distribuidor oficial» y el de devoluciones no
   pueden ir en .listing-intro: en móvil hay una regla que la esconde
   (era para un enlace que estorbaba). Esto se lee siempre. */
.landing-nota {
  max-width: 760px; margin-top: 12px; padding: 12px 14px;
  border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
  background: var(--card); font-size: 14px; line-height: 1.55; color: var(--body);
}
.landing-nota p { margin: 0; }
.landing-nota b { color: var(--ink); }
@media (max-width: 860px) {
  .landing-nota { font-size: 13px; padding: 10px 12px; margin-top: 10px; }
}

/* ---------- "Otras categorías" en la página de cada categoría ----------
   Enlaces escritos en el HTML: es lo que une las 18 categorías entre
   sí para el rastreador sin depender del menú, que lo pinta el JS. */
.otras-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.otras-cats a {
  display: inline-block; padding: 8px 14px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 13.5px; font-weight: 600; transition: border-color .15s, background .15s;
}
.otras-cats a i { font-style: normal; color: var(--muted); font-weight: 500; }
.otras-cats a:hover { border-color: var(--accent); background: #fdf3e9; }
@media (max-width: 860px) {
  .otras-cats { gap: 6px; }
  .otras-cats a { font-size: 12.5px; padding: 7px 11px; }
}

/* ==========================================================
   Sello Mercalia en el móvil
   ----------------------------------------------------------
   Medido: 7.502 px, casi nueve pantallas de scroll, con el sello
   dibujado a 158 px y catorce párrafos de más de 140 caracteres.
   Los textos ya se acortaron; aquí se compacta la forma. La idea
   es que se lea de un vistazo: el sello arriba y centrado, las
   seis garantías como fichas de dos en dos (número grande y
   titular, que el detalle ya está en las preguntas de abajo) y
   los pasos numerados en una columna estrecha.
   ========================================================== */
@media (max-width: 720px) {
  /* De los 566 px del bloque, 191 eran aire: 74 de padding del
     contenedor, 26 de margen del sello, 26 bajo la entradilla y 16
     bajo el titular. El texto ocupa 374 y no se toca. */
  .seal-hero { padding-top: 10px !important; padding-bottom: 14px !important; }
  .seal-hero .container { gap: 8px; text-align: center; padding-top: 14px; padding-bottom: 18px; }
  .seal-hero .seal-visual { margin-top: 0 !important; }
  .seal-hero h1 { font-size: 24px !important; line-height: 1.14; margin-bottom: 8px !important; }
  .seal-hero .lead { font-size: 13.5px; line-height: 1.5; margin-bottom: 14px !important; }
  .seal-hero .hero-ctas { flex-direction: column; gap: 8px; margin-top: 2px; }
  .seal-hero .hero-ctas .btn { width: 100%; padding: 11px 16px !important; font-size: 14.5px !important; }

  /* Lo mismo dicho tres veces: el sello dibujado ya pone "Sello
     Mercalia", así que sobra la etiqueta de encima del titular, y su
     "satisfacción garantizada o te devolvemos el dinero" es
     literalmente el titular. Fuera los dos. */
  .seal-hero .hero-kicker { display: none; }
  .seal-big span { display: none; }

  /* El sello, arriba del titular y pequeño */
  .seal-hero .container > div:first-child { order: 2; }
  .seal-visual { order: 1; }
  .seal-big svg { width: 62px; height: 62px; margin-bottom: 5px; }
  .seal-big b { font-size: 13.5px; letter-spacing: 0; }

  /* Las seis garantías, de dos en dos y centradas */
  .seal-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .seal-card { padding: 14px 10px; text-align: center; border-radius: 14px; }
  .seal-card:hover { transform: none; }
  .sc-num { margin: 0 auto 7px; }
  .seal-card b { font-size: 13.5px; line-height: 1.3; margin-bottom: 0; }
  .seal-card p { display: none; }   /* el detalle está en las preguntas */

  /* Pasos: el número al lado del texto, no encima */
  .steps { grid-template-columns: 1fr; gap: 9px; margin: 18px 0 8px; }
  .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px; align-items: start; }
  .step .n { grid-row: span 2; margin: 0; }
  .step b { font-size: 14.5px; margin-bottom: 2px; }
  .step p { font-size: 13px; }

  /* El porqué: más estrecho y sin la cita, que repite el titular */
  .pr-text h2 { font-size: 20px !important; line-height: 1.25; }
  .pr-text p { font-size: 14px; }
  .pr-quote { display: none; }
  .pr-badges { justify-content: center; gap: 6px; }
  .pr-badges span { font-size: 12px; padding: 5px 10px; }
}

/* ==========================================================
   El blanco al final de las tarjetas
   ----------------------------------------------------------
   El .rail es un grid: todas las tarjetas se estiran a la altura
   de la mas alta del carrusel. Medido en movil, la diferencia
   entre la mas alta y la mas corta eran 49 px: 43 del aviso de
   stock, que solo sale en las de pocas unidades, y 6 del nombre
   cuando ocupa dos lineas. .p-flag-row traia un margin-top:auto
   para absorber ese sobrante, pero el bloque de orden en movil
   se lo pisa y el hueco caia DETRAS del boton, que es donde se
   veia. Se ancla el boton al fondo: el sobrante se queda encima
   de el, que es donde nadie lo nota.
   ========================================================== */
@media (max-width: 860px) {
  .p-add { margin-top: auto !important; }
  .p-card .p-body > :last-child { margin-bottom: 0; }
  /* Dos lineas justas de nombre: asi no baila entre tarjetas */
  .p-name { -webkit-line-clamp: 2; line-clamp: 2; min-height: 2.7em; }
}

/* ==========================================================
   F17 / F27 · Precios que se partían en dos líneas
   ========================================================== */
.p-price, .p-old, .bb-price, .ci-price, .cs-row span,
.sft-old, .sft-new, .rk-price, .cc-precio, .bf-precio {
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* Las cuatro cajas de la portada, en una columna: a 375 px se
     cortaban títulos, enlaces y nombres de categoría. */
  .sf-grid { grid-template-columns: 1fr; }
  .sf-box h2 { white-space: normal; }
  .sf-more { white-space: normal; }
}

/* ==========================================================
   F16 / F29 · Controles del carrusel usables con el dedo
   Los puntos medían 6 px y las flechas 30.
   ========================================================== */
.fh-dot {
  width: 12px !important; height: 12px !important;
  border-radius: 999px; position: relative;
}
.fh-dot::after {
  content: ""; position: absolute; inset: -16px;   /* zona táctil de 44 px */
}
.fh-dot.on { width: 26px !important; }
.fh-arrow {
  width: 44px !important; height: 44px !important;
  border-radius: 999px;
}

/* ==========================================================
   F20 · Un solo botón primario, en el color de la marca
   La caja de compra usaba amarillo y naranja de Amazon.
   ========================================================== */
.btn-cart {
  background: var(--accent) !important; color: #fff !important;
  border: 1px solid var(--accent) !important; border-radius: 8px !important;
  font-weight: 700 !important;
}
.btn-cart:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn-buy2 {
  background: var(--bg) !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important;
  font-weight: 700 !important;
}
.btn-buy2:hover { border-color: var(--accent) !important; color: var(--accent-hover) !important; }
.btn-cart:disabled, .btn-buy2:disabled {
  opacity: .55; cursor: not-allowed;
  background: var(--surface-2, #eef0f3) !important; color: var(--muted) !important;
  border-color: var(--line) !important;
}

/* ==========================================================
   V1 · Klarna, visible antes de decidir (no dentro del pago)
   ========================================================== */
.bb-klarna {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 10px 0 4px; padding: 9px 12px;
  background: #ffe0ec; border-radius: 8px;
  font-size: 13.5px; line-height: 1.45; color: #17120f;
}
.kl-logo {
  font-weight: 800; font-size: 12.5px; letter-spacing: -.2px;
  background: #0b051e; color: #ffb3c7; padding: 3px 7px; border-radius: 4px;
}
.p-klarna { font-size: 12px; color: var(--muted-2); margin-top: 2px; }

/* ==========================================================
   F05 / V2 · Barra fija de compra en la ficha
   El botón real queda a 950 px del inicio en móvil.
   ========================================================== */
.bb-fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  display: none; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(19, 25, 33, .1);
  transform: translateY(100%); transition: transform .22s ease;
}
.bb-fija.visible { transform: translateY(0); }
.bf-info { display: flex; flex-direction: column; min-width: 0; }
.bf-precio { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
.bf-antes, .bf-envio { font-size: 12px; color: var(--muted-2); }
.bf-antes s { margin-right: 4px; }
.bf-btn { flex: 1; padding: 13px 16px !important; font-size: 15px !important; }

@media (max-width: 860px) {
  .bb-fija { display: flex; }
  /* Hueco para que la barra no tape el final de la página */
  body[data-page="product"] { padding-bottom: 78px; }
}

/* ==========================================================
   F07 · La burbuja del chat tapaba botones de compra
   ========================================================== */
.chat-fab { transition: transform .22s ease, opacity .22s ease; }
.chat-fab.oculto { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  .chat-fab { transform: scale(.86); transform-origin: bottom right; }
  .chat-fab.oculto { transform: translateY(140%) scale(.86); }
  /* Y sitio libre al final de cada página */
  .newsletter { padding-bottom: 74px; }
}

/* ==========================================================
   F24 · Filtros de categoría en una sola fila
   Eran cuatro filas antes del primer producto.
   ========================================================== */
@media (max-width: 860px) {
  .listing-bar {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; justify-content: space-between;
    gap: 8px; flex-wrap: wrap; padding: 10px 0;
  }
  /* La regla anterior ponía width:100% a cada hijo y los apilaba */
  .listing-bar > * { width: auto !important; max-width: none !important; }
  .listing-bar .count { flex: 1 1 100%; order: 0 !important; font-size: 14px; margin: 0 !important; }
  .listing-bar .sort-group { order: 2 !important; flex: 0 1 auto; }
  .listing-bar .brand-group { order: 1 !important; }
  .listing-bar .sort-group { display: flex; align-items: center; gap: 6px; margin: 0; }
  .listing-bar .sort-group label { display: none; }
  .listing-bar select {
    font-size: 13px; padding: 8px 26px 8px 10px;
    border-radius: 999px; border: 1px solid var(--line); background-color: var(--bg);
    max-width: 42vw; text-overflow: ellipsis;
  }
  .filters-toggle {
    order: 2; margin: 0 !important; width: auto !important;
    padding: 8px 14px !important; border-radius: 999px !important;
    font-size: 13px !important; white-space: nowrap;
  }
  /* El enlace explicativo, fuera: estorba entre el título y los productos */
  .listing-intro { display: none; }
  #listing-desc { font-size: 13.5px; margin-bottom: 4px; }
}

/* ==========================================================
   F23 · Cesta: cantidad tocable, envío gratis y venta cruzada
   ========================================================== */
.qty { display: inline-flex; align-items: center; gap: 0; }
.qty button {
  width: 38px; height: 38px; font-size: 18px; line-height: 1;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  cursor: pointer; border-radius: 8px 0 0 8px;
}
.qty button:last-of-type { border-radius: 0 8px 8px 0; }
.qty button:hover { border-color: var(--accent); color: var(--accent-hover); }
.qty > span {
  min-width: 42px; height: 38px; display: inline-flex;
  align-items: center; justify-content: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ci-remove { min-height: 38px; padding: 0 10px; }

.cs-envio-barra, .cs-envio-ok {
  margin: 12px 0; padding: 11px 13px; border-radius: 9px;
  font-size: 13.5px; line-height: 1.45;
}
.cs-envio-barra { background: var(--accent-soft); color: var(--ink); display: grid; gap: 8px; }
.ceb-track { display: block; height: 6px; background: rgba(19, 25, 33, .1); border-radius: 999px; overflow: hidden; }
.ceb-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .3s; }
.cs-envio-ok { background: #e8f4ec; color: var(--ok); display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cs-envio-ok svg { width: 17px; height: 17px; flex: none; }
.cs-seguir { display: block; text-align: center; margin-top: 10px; font-size: 14px; color: var(--blue); }

.cart-cross { margin-top: 22px; }
.cart-cross h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.cc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px; display: flex; flex-direction: column; gap: 6px; text-align: center;
}
.cc-img { display: block; aspect-ratio: 1 / 1; }
.cc-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cc-name {
  font-size: 12.5px; line-height: 1.3; color: var(--ink); font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.cc-precio { font-size: 14px; font-weight: 800; color: var(--ink); }
.cc-add {
  margin-top: auto; padding: 8px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 12.5px; font-weight: 700;
}
.cc-add:hover { border-color: var(--accent); color: var(--accent-hover); }
@media (max-width: 560px) { .cc-row { grid-template-columns: 1fr 1fr; } .cc-card:nth-child(3) { display: none; } }

/* ==========================================================
   F18 · Checkout limpio
   El formulario primero y el resumen plegado en una línea.
   ========================================================== */
@media (max-width: 860px) {
  .pago-resumen { order: 1 !important; }   /* antes iba el primero */
  body[data-page="pago"] .pago-wrap { padding-top: 6px; }
  body[data-page="pago"] .page-head .desc { display: none; }
}
.footer-min { background: var(--ink); padding: 18px 0; margin-top: 30px; }
.fm-linea {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255, 255, 255, .62); line-height: 1.6;
}
.fm-linea b { color: rgba(255, 255, 255, .9); }
.fm-linea a { color: rgba(255, 255, 255, .78); }
.fm-linea a:hover { color: #fff; }

/* ==========================================================
   F10 / V7 · Confianza real en vez de nombres de marcas
   ========================================================== */
.trust-strip { padding: 20px 0; }
.ts-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ts-item { display: flex; gap: 10px; align-items: flex-start; }
.ts-item svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 1px; }
.ts-item b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 700; }
.ts-item span { display: block; font-size: 12.5px; color: var(--muted-2); line-height: 1.45; }
@media (max-width: 860px) { .ts-row { grid-template-columns: 1fr 1fr; gap: 12px; } }
@media (max-width: 460px) { .ts-row { grid-template-columns: 1fr; } }

.pd-orig { color: var(--ok); font-weight: 600; }

/* ==========================================================
   F06 · Llamada a las ofertas donde estaba la rejilla de 127
   ========================================================== */
.cta-ofertas .co-caja {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: var(--ink); border-radius: 14px; padding: 26px 28px;
}
.cta-ofertas h2 { color: #fff; font-size: 22px; margin-bottom: 4px; }
.cta-ofertas p { color: rgba(255, 255, 255, .72); font-size: 14.5px; margin: 0; }
@media (max-width: 620px) {
  .cta-ofertas .co-caja { flex-direction: column; align-items: stretch; text-align: left; padding: 22px; }
  .cta-ofertas .btn { width: 100%; }
}

/* ==========================================================
   F28 · Ficha: foto más grande y zoom en escritorio
   ========================================================== */
@media (min-width: 861px) {
  .pd-imgbox { min-height: 420px; display: flex; align-items: center; justify-content: center; }
  .pd-imgbox img { max-height: 480px; width: auto; transition: transform .25s ease; cursor: zoom-in; }
  .pd-imgbox:hover img { transform: scale(1.55); }
}

/* ==========================================================
   F01 · Seguimiento real: fechas de cada paso y total
   ========================================================== */
.tl-fecha { display: block; font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.tr-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 15px;
}
.tr-total b { font-size: 18px; font-weight: 800; color: var(--ink); }

/* ==========================================================
   V9 · Opiniones reales, escritas por quien ha comprado
   ========================================================== */
.rev-item.rev-real { border-left: 3px solid var(--ok); padding-left: 14px; }
.rev-real .rv-verified { color: var(--ok); font-weight: 600; }

.op-form { margin-bottom: 18px; }
.op-prod { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.op-foto { width: 62px; height: 62px; object-fit: contain; mix-blend-mode: multiply; flex: none; }
.op-prod b { display: block; font-size: 15.5px; color: var(--ink); line-height: 1.3; }
.op-pedido { display: block; font-size: 12.5px; color: var(--muted-2); margin-top: 3px; }
.op-estrellas { display: flex; flex-direction: column; gap: 2px; }
.op-est { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 5px 0; }
.op-est input { width: 18px; height: 18px; accent-color: var(--accent); }
.op-est span { color: var(--star); font-size: 17px; letter-spacing: 1px; }
.op-gracias {
  display: grid; gap: 4px; padding: 18px; text-align: center;
  background: #e8f4ec; border-radius: 10px;
}
.op-gracias b { color: var(--ok); font-size: 16px; }
.op-gracias span { color: var(--body); font-size: 14px; }
.op-aviso h2 { font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.op-aviso p { margin-bottom: 10px; color: var(--body); }

/* ==========================================================
   F36 · Botones del hero iguales en las tres páginas
   ========================================================== */
@media (max-width: 620px) {
  .hero .btn, .seal-hero .btn, .about-hero .btn { width: 100%; justify-content: center; }
  .hero .hero-cta, .seal-hero .hero-cta { display: grid; gap: 9px; }
}

/* ==========================================================
   V8 · WhatsApp: donde la gente resuelve dudas de verdad
   ========================================================== */
.wa-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 999px;
  background: #25d366; color: #04310f; font-weight: 700; font-size: 14.5px;
  border: 0; cursor: pointer;
}
.wa-btn:hover { background: #1fb857; text-decoration: none; }
.wa-btn svg { width: 19px; height: 19px; }
.wa-nota { font-size: 12.5px; color: var(--muted-2); margin-top: 6px; }

/* ==========================================================
   V5 · Variantes en la misma ficha
   Antes había que volver al listado para comparar 256 y 512 GB.
   ========================================================== */
.bb-variantes { margin: 14px 0 10px; }
.bv-tit {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--muted-2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}
.bv-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bv-op {
  display: grid; gap: 1px; min-width: 92px; padding: 9px 12px;
  border: 1.5px solid var(--line); border-radius: 9px;
  background: var(--bg); text-align: center; transition: border-color .15s;
}
.bv-op b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.bv-op span { font-size: 12.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.bv-op:hover { border-color: var(--accent); text-decoration: none; }
.bv-op.activa { border-color: var(--accent); background: var(--accent-soft); }
.bv-op.agotada { opacity: .5; }
.bv-op.agotada b::after { content: " · agotado"; font-weight: 400; font-size: 11px; }

/* ==========================================================
   F30 · <picture> con WebP responsivo
   El elemento nuevo no debe alterar ninguna maquetación: con
   display:contents desaparece de la caja y el <img> vuelve a ser
   hijo directo de su contenedor, como antes.
   ========================================================== */
picture { display: contents; }

/* ---------- F31 · Botón "ver más" de los listados ---------- */
.ver-mas {
  display: block; width: 100%; max-width: 340px; margin: 22px auto 6px;
  padding: 13px 20px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700;
  transition: border-color .15s, color .15s;
}
.ver-mas:hover { border-color: var(--accent); color: var(--accent-hover); }

/* ---------- V4 · Casilla de consentimiento del checkout ---------- */
.check-linea {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: var(--body);
}
.check-linea input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--accent); cursor: pointer; }


/* ---------- F27 · Ruido en la tarjeta ----------
   "En stock · Envío 24/48 h" es idéntico en todos los productos:
   ocupa dos líneas en móvil y no ayuda a decidir. Se deja solo
   cuando dice algo distinto (pocas unidades o agotado). */
@media (max-width: 860px) {
  /* Se oculta, pero se le reserva el hueco. Con display:none las
     tarjetas que avisan de pocas unidades quedaban 43 px más altas
     que las demás y, como el carrusel es un grid, ESE hueco salía
     en blanco en todas las otras. Reservando una línea fija —nunca
     dos— todas miden igual y el vacío desaparece. */
  .p-card .p-meta {
    min-height: 17px; line-height: 17px; margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .p-card .p-meta:not(.warn):not(.low) { visibility: hidden; }
}


/* ---------- F24 (2) · La barra de filtros, en UNA fila ----------
   El desplegable de marca ya está dentro del panel "Filtrar": en
   móvil sobra tenerlo también suelto, y es lo que empujaba la fila. */
@media (max-width: 860px) {
  .listing-bar .brand-group { display: none !important; }
  .listing-bar .count { flex: 1 1 auto !important; }
  .listing-bar .sort-group select { max-width: 38vw; }
  .listing-bar .filters-toggle { order: 3 !important; }
}

/* ---------- F06 (2) · Las 18 categorías, en un carril ----------
   Ocupaban dos pantallas y media de la portada. En horizontal se
   ven igual de bien y caben en una. */
@media (max-width: 860px) {
  .cat-grid {
    display: flex !important; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px;
  }
  .cat-grid::-webkit-scrollbar { height: 4px; }
  .cat-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
  .cat-grid > * {
    flex: 0 0 132px; scroll-snap-align: start; margin: 0 !important;
  }
}

/* ---------- V9 · Cuántas opiniones son verificadas de verdad ---------- */
.rev-verificadas {
  display: block; margin-top: 4px; font-size: 12.5px;
  color: var(--ok); font-weight: 600;
}

/* ==========================================================
   PIE · Quién vende, con hechos comprobables
   Sustituye a la franja de nombres de marcas en gris. En móvil
   se ve entero: nada de desplegables.
   ========================================================== */
.ft-confianza {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  padding: 20px 0; margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ft-confianza b {
  display: block; font-size: 13.5px; font-weight: 700;
  color: rgba(255, 255, 255, .92); margin-bottom: 2px;
}
.ft-confianza span { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); }
@media (max-width: 860px) { .ft-confianza { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 460px) { .ft-confianza { grid-template-columns: 1fr; gap: 12px; } }

/* ==========================================================
   PORTADA · Franja de garantías, ordenada
   Estaba suelta y desalineada; ahora es una rejilla con el icono
   arriba a la izquierda y el texto pegado a él.
   ========================================================== */
.trustbar .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; align-items: start;
}
.trust-item { align-items: flex-start !important; gap: 11px !important; }
.trust-item svg { width: 24px !important; height: 24px !important; margin-top: 1px; }
.trust-item b { line-height: 1.3; }
.trust-item span { display: block; line-height: 1.45; margin-top: 1px; }

@media (max-width: 860px) {
  .trustbar .container { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .trust-item svg { width: 21px !important; height: 21px !important; }
  .trust-item b { font-size: 13px !important; }
  .trust-item span { font-size: 12px !important; }
}
@media (max-width: 420px) { .trustbar .container { grid-template-columns: 1fr; gap: 12px; } }

/* ==========================================================
   Contacto · El hueco de WhatsApp no debe ocupar sitio vacío
   Sin número configurado dejaba media pantalla en blanco en PC
   y empujaba el formulario a la columna derecha.
   ========================================================== */
.wa-mount:empty { display: none !important; }

/* ==========================================================
   KLARNA · Opción propia, con los tres pagos a la vista
   Antes solo aparecía dentro del formulario de Stripe, escondida
   detrás de Link. Ahora es un método más, al mismo nivel que la
   tarjeta y el contra reembolso, y se ve exactamente qué se paga
   y cuándo ANTES de elegirlo.
   ========================================================== */
.pm-kl-logo {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 11.5px; font-weight: 800; letter-spacing: -.2px;
  background: #ffb3c7; color: #0b051e; padding: 2px 7px; border-radius: 4px;
}
.pm-klarna.pm-no-disponible .pm-kl-logo { background: var(--line); color: var(--muted); }

.kl-plan {
  margin: 14px 0 4px; padding: 16px 18px;
  background: #fff0f5; border: 1px solid #ffd3e0; border-radius: 12px;
}
.kl-plan-tit {
  font-size: 14px; font-weight: 800; color: #17120f; margin-bottom: 12px;
}
.kl-fila {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid rgba(11, 5, 30, .08);
}
.kl-n {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 5, 30, .1); color: #0b051e;
  font-size: 12.5px; font-weight: 800;
}
.kl-fila.ahora .kl-n { background: #0b051e; color: #ffb3c7; }
.kl-cuando { font-size: 14px; color: #17120f; }
.kl-fila.ahora .kl-cuando { font-weight: 700; }
.kl-importe {
  font-size: 15.5px; font-weight: 800; color: #17120f;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kl-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; margin-top: 2px; font-size: 14px; color: #17120f;
}
.kl-total b { font-size: 17px; font-weight: 800; }
.kl-letra {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #5c4a52;
}

@media (max-width: 480px) {
  .kl-plan { padding: 14px; }
  .kl-cuando { font-size: 13.5px; }
}

/* ==========================================================
   LANDING DE CAMPAÑA (/l1) — Mercalia Flash para Google Ads
   Una sola salida (las ofertas), cabecera sin menú, y todo lo
   que promete se calcula de datos reales.
   ========================================================== */
body[data-page="landing"] { background: var(--bg); }

.ld-head { background: var(--ink); color: #fff; }
.ld-head-in { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.ld-head .logo { font-size: 26px; }
.ld-head-r { display: flex; align-items: center; gap: 16px; }
.ld-head-cd { font-size: 13px; color: rgba(255, 255, 255, .72); }
.ld-head-cd b { color: #fff; font-variant-numeric: tabular-nums; }
.ld-head .h-action { position: relative; color: #fff; display: inline-flex; }
.ld-head .cart-count { position: absolute; top: -8px; right: -10px; }

/* ---- Hero ---- */
.ld-hero { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: #fff; padding: 44px 0 40px; }
.ld-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 36px; align-items: center; }
.ld-kicker { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #f2b48a; margin-bottom: 12px; }
.ld-hero h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.08; letter-spacing: -.8px; font-weight: 800; margin: 0 0 16px; text-wrap: balance; }
.ld-pct { color: #f2b48a; white-space: nowrap; }
.ld-sub { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); max-width: 54ch; margin: 0 0 22px; }
.ld-sub b { color: #fff; }

.ld-cd-caja { margin-bottom: 22px; }
.ld-cd-lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f2b48a; margin-bottom: 8px; }
.ld-cd-caja .countdown { justify-content: flex-start; }

.ld-hero-cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ld-btn { padding: 14px 26px !important; font-size: 16px !important; font-weight: 800 !important; }
.ld-hero-nota { font-size: 13px; color: rgba(255, 255, 255, .62); }

/* ---- Tarjeta grande ---- */
.ld-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.ld-card-top { box-shadow: 0 18px 50px rgba(0, 0, 0, .35); border: 0; }
.ld-card-pct { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--danger); color: #fff; font-weight: 800; font-size: 14px; padding: 5px 10px; border-radius: 7px; }
.ld-card-img { display: block; aspect-ratio: 1 / 1; padding: 18px; background: #fff; }
.ld-card-top .ld-card-img { aspect-ratio: 4 / 3; }
.ld-card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ld-card-body { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; }
.ld-card-brand { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.ld-card-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ld-card-top .ld-card-name { font-size: 18px; -webkit-line-clamp: 3; line-clamp: 3; }
.ld-card-precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ld-card-precio b { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -.5px; }
.ld-card-top .ld-card-precio b { font-size: 32px; }
.ld-card-precio s { font-size: 14px; color: var(--muted-2); }
.ld-card-ahorro { font-size: 13px; color: var(--accent-txt); font-weight: 600; }
.ld-card-klarna { font-size: 12.5px; color: var(--body); }
.ld-card-stock { font-size: 12.5px; min-height: 18px; }
.ld-card-stock.pocas { color: var(--accent-txt); font-weight: 700; }
.ld-card-stock.agotado { color: var(--muted-2); font-weight: 700; }
.ld-card-btn { margin-top: 6px; width: 100%; }
.ld-card-btn.ld-añadido { background: var(--ok) !important; border-color: var(--ok) !important; }

/* ---- Confianza ---- */
.ld-trust { background: var(--card); border-bottom: 1px solid var(--line); }
.ld-trust-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 20px 0; }
.ld-t b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.ld-t span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted-2); }

/* ---- Ofertas ---- */
.ld-ofertas { padding: 40px 0 30px; }
.ld-sec-head { margin-bottom: 20px; }
.ld-sec-head h2 { font-size: 26px; letter-spacing: -.4px; color: var(--ink); margin: 0 0 6px; }
.ld-sec-head p { color: var(--muted); font-size: 15px; margin: 0; }
.ld-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ld-mas { text-align: center; margin-top: 26px; }

/* ---- Cómo funciona ---- */
.ld-como { padding: 34px 0 40px; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ld-como h2 { font-size: 22px; color: var(--ink); margin: 0 0 18px; letter-spacing: -.3px; }
.ld-como-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ld-paso { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; }
.ld-paso-n { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-txt); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ld-paso b { font-size: 15px; color: var(--ink); }
.ld-paso span:last-child { font-size: 13.5px; line-height: 1.5; color: var(--body); }

/* ---- Cierre ---- */
.ld-final { background: var(--ink); color: #fff; padding: 36px 0; }
.ld-final-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ld-final h2 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.4px; }
.ld-final p { margin: 0; color: rgba(255, 255, 255, .75); }
.ld-final b { color: #f2b48a; font-variant-numeric: tabular-nums; }

/* ---- Barra fija de cesta ---- */
.ld-cesta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(19, 25, 33, .12);
  font-size: 14px; color: var(--body);
}
.ld-cesta[hidden] { display: none; }
.ld-cesta .btn { padding: 11px 18px; white-space: nowrap; }
body[data-page="landing"] .chat-fab { display: none; }   /* nada que distraiga */

@media (max-width: 900px) {
  .ld-hero-in { grid-template-columns: 1fr; gap: 24px; }
  .ld-trust-in { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ld-grid { grid-template-columns: repeat(2, 1fr); }
  .ld-como-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 640px) {
  .ld-hero { padding: 28px 0 30px; }
  .ld-head-cd { display: none; }
  .ld-hero-cta, .ld-hero-cta .btn { width: 100%; }
  .ld-hero-cta .btn { text-align: center; }
  .ld-card-body { padding: 10px 11px 12px; }
  .ld-card-precio b { font-size: 21px; }
  .ld-card-name { font-size: 13.5px; }
  .ld-card-btn { padding: 11px 8px !important; font-size: 13.5px !important; }
  .ld-grid { gap: 10px; }
  .ld-final-in .btn { width: 100%; text-align: center; }
  .ld-final { padding-bottom: 90px; }   /* hueco para la barra de cesta */
  .ld-trust-in { grid-template-columns: 1fr; }
}

/* Landing: el globo de la cesta asomaba 10 px por el borde derecho
   y hacía scroll horizontal en PC. */
.ld-head .h-action { margin-right: 10px; }
.ld-head-in { overflow: visible; }
.ld-head { overflow: hidden; }

/* ==========================================================
   LANDING /l2 — la que recibe el tráfico de Google Ads
   Registro visual deliberadamente sobrio: fondo claro, sin
   cuenta atrás, sin tachados y sin porcentajes. Lo que se
   revisa es si el negocio es real y si el precio y el envío
   están claros, así que eso es lo que se ve.
   ========================================================== */
body[data-page="landing2"] { background: var(--bg); }

.l2-head { background: var(--card); border-bottom: 1px solid var(--line); }
.l2-head-in { display: flex; align-items: center; gap: 22px; padding: 14px 0; }
.l2-head .logo { font-size: 25px; color: var(--ink); }
.l2-head .logo-word { color: var(--ink); }
.l2-nav { display: flex; gap: 20px; margin-left: auto; }
.l2-nav a { font-size: 14.5px; font-weight: 600; color: var(--body); }
.l2-nav a:hover { color: var(--accent-txt); text-decoration: none; }
.l2-cesta { position: relative; color: var(--ink); display: inline-flex; }
.l2-cesta .cart-count { position: absolute; top: -7px; right: -9px; }

/* ---- Hero ---- */
.l2-hero { padding: 46px 0 44px; background: var(--card); border-bottom: 1px solid var(--line); }
.l2-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 40px; align-items: center; }
.l2-kicker { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-txt); margin-bottom: 12px; }
.l2-hero h1 { font-size: clamp(27px, 3.4vw, 38px); line-height: 1.16; letter-spacing: -.5px; font-weight: 800; color: var(--ink); margin: 0 0 16px; text-wrap: balance; }
.l2-sub { font-size: 16px; line-height: 1.65; color: var(--body); max-width: 58ch; margin: 0 0 20px; }

.l2-puntos { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.l2-puntos li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.l2-puntos li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 15px; height: 9px; border-left: 2.4px solid var(--ok); border-bottom: 2.4px solid var(--ok);
  transform: rotate(-45deg);
}
.l2-puntos b { color: var(--ink); }

.l2-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.l2-btn { padding: 13px 24px !important; font-size: 15.5px !important; font-weight: 700 !important; }

.l2-hero-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.l2-hero-card:hover { text-decoration: none; border-color: var(--accent); }
.l2-hero-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 22px; mix-blend-mode: multiply; }
.l2-hero-cap { display: block; padding: 14px 18px 16px; border-top: 1px solid var(--line); }
.l2-hero-cap b { display: block; font-size: 15px; color: var(--ink); line-height: 1.35; margin-bottom: 3px; }
.l2-hero-cap span { font-size: 14px; color: var(--muted-2); }

/* ---- Datos de la empresa ---- */
.l2-datos { background: var(--bg); border-bottom: 1px solid var(--line); }
.l2-datos-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 22px 0; }
.l2-d b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 3px; }
.l2-d span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.l2-d a { color: var(--blue); }

/* ---- Secciones ---- */
.l2-sec-head { margin-bottom: 22px; max-width: 62ch; }
.l2-sec-head h2 { font-size: 25px; letter-spacing: -.4px; color: var(--ink); margin: 0 0 6px; }
.l2-sec-head p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; }

.l2-cats { padding: 40px 0 10px; }
.l2-cats-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.l2-cat {
  display: grid; gap: 2px; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.l2-cat:hover { border-color: var(--accent); text-decoration: none; }
.l2-cat b { font-size: 13.5px; color: var(--ink); line-height: 1.3; }
.l2-cat span { font-size: 12.5px; color: var(--muted-2); }

.l2-productos { padding: 38px 0 10px; }
.l2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.l2-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.l2-card-img { display: block; aspect-ratio: 1 / 1; padding: 16px; background: #fff; }
.l2-card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.l2-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.l2-card-brand { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.l2-card-name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.l2-card-precio { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; margin-top: 4px; }
.l2-card-envio { font-size: 12.5px; color: var(--ok); font-weight: 600; }
.l2-card-btn { margin-top: auto; padding-top: 9px !important; padding-bottom: 9px !important; font-size: 13.5px !important; text-align: center; }
.l2-mas { text-align: center; margin-top: 26px; }

.l2-como { padding: 40px 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 34px; }
.l2-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.l2-paso-n {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-txt); font-weight: 800; font-size: 15px;
  margin-bottom: 10px;
}
.l2-paso b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 5px; }
.l2-paso p { font-size: 14px; line-height: 1.6; color: var(--body); margin: 0; }

.l2-pago { padding: 40px 0 10px; }
.l2-pago-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.l2-p { padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.l2-p b { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 6px; }
.l2-p span { font-size: 14px; line-height: 1.6; color: var(--body); }

.l2-faq { padding: 40px 0; }
.l2-faq-lista { display: grid; gap: 8px; max-width: 860px; }
.l2-faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 0 18px;
}
.l2-faq summary {
  cursor: pointer; padding: 15px 0; font-size: 15.5px; font-weight: 700; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.l2-faq summary::-webkit-details-marker { display: none; }
.l2-faq summary::after { content: "＋"; font-weight: 400; color: var(--muted); font-size: 18px; flex: none; }
.l2-faq details[open] summary::after { content: "－"; }
.l2-faq details p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.65; color: var(--body); max-width: 68ch; }

.l2-final { background: var(--ink); color: #fff; padding: 34px 0; }
.l2-final-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.l2-final h2 { font-size: 22px; margin: 0 0 5px; letter-spacing: -.3px; }
.l2-final p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 15px; }
.l2-final-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.l2-final .btn-sec { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.l2-final .btn-sec:hover { border-color: #fff; color: #fff; }

.l2-footer { background: var(--ink); padding: 34px 0 26px; border-top: 1px solid rgba(255, 255, 255, .1); }
.l2-foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 24px; }
.l2-foot-cols b { display: block; font-size: 14px; color: #fff; margin-bottom: 10px; }
.l2-foot-cols a, .l2-foot-cols span { display: block; font-size: 13.5px; line-height: 1.9; color: rgba(255, 255, 255, .6); }
.l2-foot-cols a:hover { color: #fff; }
.l2-foot-legal { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; line-height: 1.7; color: rgba(255, 255, 255, .5); }
.l2-foot-legal b { color: rgba(255, 255, 255, .8); }
.l2-foot-legal a { color: rgba(255, 255, 255, .7); }

body[data-page="landing2"] .chat-fab,
body[data-page="landings"] .chat-fab { display: none; }

@media (max-width: 1000px) { .l2-cats-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .l2-hero-in { grid-template-columns: 1fr; gap: 26px; }
  .l2-datos-in { grid-template-columns: 1fr; gap: 14px; }
  .l2-grid { grid-template-columns: repeat(2, 1fr); }
  .l2-pasos, .l2-pago-row { grid-template-columns: 1fr; gap: 16px; }
  .l2-foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .l2-head-in { flex-wrap: wrap; gap: 10px 16px; }
  .l2-nav { order: 3; width: 100%; margin-left: 0; gap: 16px; overflow-x: auto; padding-bottom: 2px; }
  .l2-nav a { white-space: nowrap; font-size: 13.5px; }
  .l2-cesta { margin-left: auto; }
  .l2-hero { padding: 30px 0 32px; }
  .l2-cats-row { grid-template-columns: 1fr 1fr; }
  .l2-hero-cta .btn, .l2-final-cta .btn { flex: 1; text-align: center; }
  .l2-foot-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================
   /l0 — índice interno de landings
   ========================================================== */
body[data-page="landings"] { background: var(--bg); }
.l0-wrap { padding: 40px 0 70px; }
.l0-head { margin-bottom: 30px; max-width: 70ch; }
.l0-head .logo { font-size: 26px; color: var(--ink); margin-bottom: 16px; display: inline-block; }
.l0-head .logo-word { color: var(--ink); }
.l0-head h1 { font-size: 30px; letter-spacing: -.5px; color: var(--ink); margin: 0 0 8px; }
.l0-head p { font-size: 15px; line-height: 1.65; color: var(--body); margin: 0; }

.l0-lista { display: grid; gap: 14px; margin-bottom: 34px; }
.l0-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.l0-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.l0-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 700; background: var(--ink); color: #fff; padding: 3px 9px; border-radius: 5px; }
.l0-card-head h2 { font-size: 19px; margin: 0; color: var(--ink); letter-spacing: -.3px; }
.l0-riesgo { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-left: auto; }
.l0-riesgo-bajo { background: #e4f2ea; color: #1f6b41; }
.l0-riesgo-alto { background: #fbeae7; color: #a3261b; }
.l0-titular { font-size: 15px; color: var(--body); font-style: italic; margin: 0 0 12px; }
.l0-datos { display: grid; grid-template-columns: 92px 1fr; gap: 5px 14px; margin: 0 0 14px; }
.l0-datos dt { font-size: 13px; font-weight: 700; color: var(--muted-2); }
.l0-datos dd { margin: 0; font-size: 14px; line-height: 1.55; color: var(--body); }

.l0-copiar { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
.l0-copiar code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.l0-copiar .btn { flex: none; padding: 9px 16px; font-size: 13.5px; }
.l0-acciones { display: flex; gap: 8px; }
.l0-acciones .btn { padding: 9px 18px; font-size: 14px; }

.l0-nota { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 14px; }
.l0-nota h2 { font-size: 18px; color: var(--ink); margin: 0 0 10px; letter-spacing: -.2px; }
.l0-nota p { font-size: 14.5px; line-height: 1.65; color: var(--body); margin: 0 0 12px; }
.l0-nota p:last-child { margin-bottom: 0; }
.l0-small { font-size: 13.5px !important; color: var(--muted-2) !important; }

.l0-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.l0-tabla th, .l0-tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.l0-tabla th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); background: var(--bg); }
.l0-tabla tr:last-child td { border-bottom: 0; }

.l0-aviso { border-color: #f2d4ce; background: #fdf6f4; }
.l0-aviso ul { margin: 0; padding-left: 20px; }
.l0-aviso li { font-size: 14.5px; line-height: 1.65; color: var(--body); margin-bottom: 9px; }
.l0-aviso li:last-child { margin-bottom: 0; }
.l0-pie { font-size: 13.5px; color: var(--muted-2); margin-top: 18px; }

@media (max-width: 640px) {
  .l0-datos { grid-template-columns: 1fr; gap: 2px; }
  .l0-datos dt { margin-top: 8px; }
  .l0-copiar { flex-direction: column; }
  .l0-riesgo { margin-left: 0; }
  .l0-tabla { display: block; overflow-x: auto; }
}

/* ---------- Landings: fuera el hueco de la cabecera fija ----------
   La regla móvil `body { padding-top: 198px }` reserva sitio para la
   cabecera fija de la tienda. Las landings tienen la suya propia y
   no fija, así que ese hueco quedaba en blanco arriba del todo. */
@media (max-width: 860px) {
  body[data-page="landing"],
  body[data-page="landing2"],
  body[data-page="landings"] { padding-top: 0 !important; }
}

/* ---------- /l2 · Qué es Mercalia Flash ---------- */
.l2-flash { padding: 40px 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.l2-flash-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 34px; align-items: start; }
.l2-flash-txt h2 { font-size: 25px; letter-spacing: -.4px; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
.l2-flash-txt p { font-size: 15px; line-height: 1.65; color: var(--body); margin: 0 0 12px; max-width: 62ch; }
.l2-flash-nota {
  padding: 12px 15px; background: var(--bg); border-left: 3px solid var(--ok);
  border-radius: 0 8px 8px 0; font-size: 14.5px !important;
}
.l2-flash-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.l2-flash-lista { display: grid; gap: 8px; align-content: start; }
.l2-fl-tit {
  font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 2px;
}
.l2-fl {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center;
  padding: 11px 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
.l2-fl:hover { border-color: var(--accent); text-decoration: none; }
.l2-fl-img { display: block; }
.l2-fl-img img { width: 54px; height: 54px; object-fit: contain; mix-blend-mode: multiply; }
.l2-fl-txt b { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.35; margin-bottom: 3px; }
.l2-fl-precio { display: block; font-size: 12.5px; color: var(--muted-2); }
.l2-fl-precio b { display: inline; font-size: 14px; color: var(--ink); }

.l2-card-ver { display: block; text-align: center; font-size: 12.5px; color: var(--blue); margin-top: 7px; }
body[data-page="landing2"] .ld-cesta { display: flex; }
body[data-page="landing2"] .ld-cesta[hidden] { display: none; }

@media (max-width: 900px) { .l2-flash-in { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 640px) {
  .l2-flash-cta .btn { flex: 1; text-align: center; }
  .l2-footer { padding-bottom: 90px; }   /* hueco para la barra de cesta */
}

/* ---------- /l0 · La URL larga no debe estirar la tarjeta ----------
   El <code> va en una sola línea; sin min-width:0 empuja al flex
   padre y la tarjeta acababa midiendo 697 px en un móvil de 400. */
.l0-card, .l0-nota { min-width: 0; max-width: 100%; overflow: hidden; }
.l0-copiar { min-width: 0; }
.l0-copiar code { min-width: 0; max-width: 100%; }
.l0-datos dd, .l0-titular { min-width: 0; overflow-wrap: anywhere; }
.l0-card-head h2 { min-width: 0; }
@media (max-width: 640px) {
  .l0-card-head { gap: 8px; }
  .l0-card-head h2 { font-size: 17px; flex: 1 1 100%; order: 3; }
  .l0-riesgo { order: 2; }
}

/* ==========================================================
   BANNER DE PAGO A PLAZOS (portada)
   Rosa de Klarna sobre el navy de la marca. Es información de
   una forma de pago: sin cuenta atrás y sin porcentajes.
   ========================================================== */
.kl-banner { padding: 34px 0; background: linear-gradient(135deg, #ffe0ec 0%, #ffd3e0 55%, #ffc8da 100%); }
.kl-banner-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 34px; align-items: center; }

.kl-banner-logo {
  display: inline-block; margin-bottom: 12px;
  background: #0b051e; color: #ffb3c7;
  font-size: 15px; font-weight: 800; letter-spacing: -.3px;
  padding: 5px 13px; border-radius: 6px;
}
.kl-banner h2 {
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.18; letter-spacing: -.6px;
  color: #17120f; margin: 0 0 10px; font-weight: 700; text-wrap: balance;
}
.kl-banner h2 b { font-weight: 800; }
.kl-banner p { font-size: 15.5px; line-height: 1.6; color: #4a3840; margin: 0 0 20px; max-width: 52ch; }

.kl-banner-pasos { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.kl-paso { display: grid; justify-items: center; gap: 1px; text-align: center; }
.kl-paso > span {
  width: 30px; height: 30px; border-radius: 50%;
  background: #0b051e; color: #ffb3c7;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 800; margin-bottom: 5px;
}
.kl-paso b { font-size: 14px; color: #17120f; white-space: nowrap; }
.kl-paso small { font-size: 12px; color: #6b5560; }
.kl-linea { flex: 1; max-width: 60px; height: 2px; background: rgba(11, 5, 30, .18); border-radius: 2px; margin-bottom: 22px; }

.kl-banner-btn { background: #0b051e !important; border-color: #0b051e !important; padding: 13px 26px !important; font-size: 15.5px !important; }
.kl-banner-btn:hover { background: #241a3d !important; border-color: #241a3d !important; }
.kl-banner-legal { display: block; margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: #6b5560; max-width: 58ch; }

/* Las tres tarjetas de la derecha: el importe repartido */
.kl-tarjetas { display: grid; gap: 10px; }
.kl-t {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  background: #fff; border-radius: 12px; padding: 15px 18px;
  box-shadow: 0 4px 16px rgba(11, 5, 30, .1);
}
.kl-t span { font-size: 13px; font-weight: 600; color: #6b5560; }
.kl-t-fecha { display: none; }
.kl-t b { font-size: 21px; font-weight: 800; color: #17120f; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.kl-t1 { margin-right: 0; }
.kl-t2 { margin-right: 22px; }
.kl-t3 { margin-right: 44px; opacity: .82; }

@media (max-width: 900px) {
  .kl-banner-in { grid-template-columns: 1fr; gap: 24px; }
  .kl-t2, .kl-t3 { margin-right: 0; }
}
/* En el movil este bloque ocupaba la pantalla entera y cortaba la
   navegacion en seco: quien llegaba aqui no sabia que debajo seguia
   habiendo tienda. Ahora cabe en un tercio de pantalla. Se quita la
   segunda frase, el bloque de pasos se funde con las tarjetas (las
   fechas se leen dentro de cada una) y las tres se ponen en fila. */
@media (max-width: 720px) {
  .kl-banner { padding: 16px 0 18px; }

  /* El texto deja de ser una caja para que sus hijos se ordenen junto
     a las tarjetas: los importes tienen que verse ANTES del boton, no
     despues de la letra pequena. */
  .kl-banner-in { display: flex; flex-direction: column; gap: 10px; }
  .kl-banner-txt { display: contents; }
  .kl-banner-logo { order: 1; align-self: flex-start; margin-bottom: 0; font-size: 11.5px; padding: 2px 8px; }
  .kl-banner h2 { order: 2; font-size: 22px; line-height: 1.15; margin: 0; }
  .kl-banner-arte { order: 3; }
  .kl-banner-btn { order: 4; }
  .kl-banner-legal { order: 5; }

  /* Fuera lo que ya se lee en las tarjetas: el titular se queda en una
     linea y el parrafo sobra entero, porque las tres tarjetas dicen
     cuanto y cuando con mas claridad que la frase. */
  .kl-mas { display: none; }
  .kl-banner p { display: none; }

  /* Los pasos se cuentan ya dentro de las tarjetas */
  .kl-banner-pasos { display: none; }

  /* Las tres tarjetas, en fila y en el orden de lectura: primero el
     importe, que es lo que convence, y debajo cuando se paga. */
  .kl-tarjetas { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .kl-t {
    flex-direction: column-reverse; align-items: flex-start; justify-content: flex-start;
    gap: 1px; padding: 9px 10px; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(11, 5, 30, .09);
  }
  .kl-t b { font-size: 16px; }
  .kl-t span { font-size: 10.5px; line-height: 1.25; }
  .kl-t-fecha { display: block; font-style: normal; font-weight: 700; color: #17120f; }
  .kl-t3 { opacity: 1; }

  .kl-banner-btn { width: 100%; text-align: center; padding: 11px 18px !important; font-size: 14.5px !important; }
  .kl-banner-legal { margin-top: 0; font-size: 10.5px; line-height: 1.4; }
}

/* Klarna, entre las formas de pago del pie: con su rosa, para que
   se lea como una forma de pago mas y no como un adorno. */
.f-pay-klarna {
  background: #ffb3c7 !important; color: #0b051e !important;
  border-color: #ffb3c7 !important; font-weight: 800 !important;
}

/* ---------- Pago a plazos en el pie ---------- */
.ft-klarna {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px; margin-top: 22px;
  background: rgba(255, 179, 199, .1); border: 1px solid rgba(255, 179, 199, .28);
  border-radius: 11px;
}
.ftk-logo {
  flex: none; background: #ffb3c7; color: #0b051e;
  font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 5px;
}
.ftk-txt b { display: block; font-size: 14.5px; color: #fff; }
.ftk-txt small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); line-height: 1.5; margin-top: 1px; }
@media (max-width: 560px) { .ft-klarna { align-items: flex-start; } }

/* ---------- Ofertas en texto (portada) ----------
   Las rejillas de la portada las pinta el JavaScript, así que los
   asistentes de IA (ChatGPT, Perplexity…) no veían ni un precio. Esta
   lista va escrita en el HTML: la leen ellos y sirve a quien navega
   con el JavaScript desactivado. */

.ofertas-texto h2 { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.ofertas-texto > .container > p { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.of-lista { list-style: none; margin: 0 0 14px; padding: 0; columns: 2; column-gap: 28px; }
.of-lista li { break-inside: avoid; padding: 6px 0; font-size: 13.5px; line-height: 1.5; border-bottom: 1px solid var(--line); }
.of-lista a { color: var(--ink); text-decoration: none; font-weight: 600; }
.of-lista a:hover { color: var(--accent); text-decoration: underline; }
.of-lista b { color: var(--accent); }
.of-lista span { color: var(--muted); font-size: 12.5px; }
@media (max-width: 720px) { .of-lista { columns: 1; } }

/* ---------- Portada en móvil: productos antes que texto ----------
   El 62 % de las visitas entra por la portada y en el móvil el primer
   producto quedaba a tres pantallas de scroll: la mayoría se iba sin
   ver nada. El carril de ofertas va justo bajo la cabecera y el bloque
   de texto se acorta. En ordenador no cambia nada. */
.top-ofertas { display: none; }
@media (max-width: 720px) {
  .top-ofertas { display: block; background: var(--card); padding: 12px 0 2px; border-bottom: 1px solid var(--line); }
  .to-cab { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .to-cab b { font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--ink); white-space: nowrap; }
  .to-reloj { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .to-cab a { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
  #rail-top { grid-auto-columns: 158px; gap: 10px; padding-bottom: 12px; }
  #rail-top .p-card .p-img { height: 118px; }

  /* El texto de bienvenida ya no es lo primero: se queda en lo esencial */
  .banner .banner-inner { padding-top: 18px; padding-bottom: 20px; gap: 16px; }
  .banner .bn-text p, .banner .bn-ctas .btn-ghost { display: none; }
  .banner .bn-ctas { grid-template-columns: 1fr; }
}

/* ---------- Aviso de cookies compacto en móvil ----------
   Tapaba media pantalla al entrar. Ahora es una barra baja; «Rechazar»
   y «Aceptar todas» siguen igual de grandes, como pide la ley. */
@media (max-width: 560px) {
  .ck-wrap { padding: 0; }
  .ck-card { border-radius: 14px 14px 0 0; border-width: 1px 0 0; padding: 11px 14px 9px; box-shadow: 0 -6px 24px rgba(19, 25, 33, .14); }
  .ck-tit { display: none; }
  .ck-txt { font-size: 12.5px; line-height: 1.45; }
  .ck-legal { margin-top: 3px; font-size: 12px; }
  .ck-botones { margin-top: 9px; gap: 7px; }
  .ck-btn-sec, .ck-btn-pri { padding: 10px 8px; }
  .ck-btn-lin { padding-top: 1px; font-size: 12px; }
}
/* Botón pequeño «¿Cómo van estas ofertas?», antes de los productos */
.to-info {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 0 8px;
  padding: 5px 11px 5px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid #f3c9ad; background: #fff6f0; color: var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2;
}
.to-info svg { width: 13px; height: 13px; flex: none; }
.to-info:hover { border-color: var(--accent); }