/* Tienda Mancuernas Monterrey: lima + negro + concreto. Kanit (títulos), Oswald (etiquetas), Rubik (texto) */
:root {
  --lima: #8cfb3a;
  --lima-osc: #6fd61f;
  --negro: #0b0b0b;
  --tinta: #161616;
  --concreto: #e9e8e4;
  --concreto-2: #d8d6d0;
  --gris-txt: #5f5f5c;
  --blanco: #fff;
  --rojo: #e5372c;
  --radio: 18px;
  --ancho: 1180px;
  --f-titulo: 'Kanit', system-ui, sans-serif;
  --f-etiqueta: 'Oswald', system-ui, sans-serif;
  --f-texto: 'Rubik', system-ui, sans-serif;
  --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--concreto); color: var(--tinta); font: 16px/1.55 var(--f-texto); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 800; line-height: 1; margin: 0; text-transform: uppercase; }
.kicker { font: 600 13px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .14em; color: var(--gris-txt); margin: 0 0 12px; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 17px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .04em; padding: 16px 26px; border-radius: 999px; transition: transform .15s, background .15s; }
.btn:active { transform: scale(.97); }
.btn-lima { background: var(--lima); color: var(--negro); }
.btn-lima:hover { background: #a2ff5c; }
.btn-negro { background: var(--negro); color: var(--blanco); }
.btn-borde { background: transparent; border: 2px solid currentColor; }
.btn-ancho { width: 100%; }
.btn-flecha { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.btn:hover .btn-flecha { transform: translateX(4px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- barra superior ---------- */
.barra { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 24px;
  padding: 0 max(16px, calc((100vw - var(--ancho)) / 2)); background: rgba(11,11,11,.94); backdrop-filter: blur(8px); color: var(--blanco); }
.barra-logo img { height: 30px; width: auto; display: block; }
.barra-nav { display: none; gap: 26px; margin-left: auto; font: 500 15px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .06em; }
.barra-nav a { text-decoration: none; opacity: .8; }
.barra-nav a:hover { opacity: 1; color: var(--lima); }
.btn-carrito { position: relative; margin-left: auto; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--lima); cursor: pointer; display: grid; place-items: center; }
.btn-carrito svg { width: 24px; height: 24px; fill: none; stroke: var(--negro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-carrito svg circle { fill: var(--negro); stroke: none; }
.carrito-n { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--blanco); color: var(--negro); font: 700 13px/22px var(--f-texto); }
.carrito-n.brinca { animation: brinca .35s; }
@keyframes brinca { 50% { transform: scale(1.35); } }
.barra-nav a[aria-current="page"] { opacity: 1; color: var(--lima); }
.btn-menu { margin-left: auto; width: 46px; height: 46px; border: 1.5px solid #3a3a3a; border-radius: 12px; background: none; cursor: pointer; display: grid; place-items: center; }
.btn-menu[aria-expanded="true"] { border-color: var(--lima); }
.btn-menu[aria-expanded="true"] svg path { d: path("M6 6l12 12M18 6 6 18"); }
.btn-menu svg { width: 26px; height: 26px; fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linecap: round; }
.btn-menu + .btn-carrito { margin-left: 4px; }
/* menú desplegable en celular */
@media (max-width: 899px) {
  .barra-nav.abierta { display: flex; flex-direction: column; gap: 0; position: absolute; top: 64px; left: 0; right: 0; background: var(--negro);
    padding: 6px 16px 18px; border-top: 1px solid #222; box-shadow: 0 16px 30px rgba(0,0,0,.35); }
  .barra-nav.abierta a { padding: 16px 4px; font-size: 20px; border-bottom: 1px solid #1e1e1e; opacity: 1; }
}
@media (min-width: 900px) { .barra-nav { display: flex; } .btn-menu { display: none; } .btn-carrito, .btn-menu + .btn-carrito { margin-left: 8px; } }

/* ---------- portada ---------- */
.hero { background: var(--negro); color: var(--blanco); display: grid; gap: 0; overflow: hidden; }
.hero-txt { padding: 40px 20px 40px; position: relative; z-index: 1; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 8px 14px; border: 1px solid #333; border-radius: 999px;
  font: 600 13px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .12em; color: #d9d9d9; }
.hero-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lima); }
.hero h1 { font-style: italic; font-weight: 900; font-size: clamp(36px, 8.6vw, 66px); letter-spacing: -.005em; line-height: .98; max-width: 620px; }
.hero h1 span { color: var(--lima); }
.hero-sub { font-size: 18px; color: #d4d4d4; max-width: 520px; margin: 22px 0 10px; }
.hero-sub2 { font-size: 15px; color: #9a9a9a; max-width: 500px; margin: 0 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.hero-desde { font: 500 16px/1.2 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .05em; color: #bdbdbd; }
.hero-desde b { display: block; font: italic 900 34px/1 var(--f-titulo); color: var(--blanco); letter-spacing: 0; }
/* foto con corte diagonal: arriba en celular, a la izquierda en compu */
.hero-foto { position: relative; aspect-ratio: 1; margin-top: -28px; clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); height: min(calc(100vh - 64px), 760px); min-height: 560px; }
  .hero-txt { align-self: center; padding: 56px calc(6vw + 12px) 56px max(32px, calc((100vw - var(--ancho)) / 2)); }
  .hero-foto { aspect-ratio: auto; min-height: 0; margin: 0 0 0 -9vw; clip-path: polygon(9vw 0, 100% 0, 100% 100%, 0 100%); }
}

/* ---------- franja lima con rayas diagonales ---------- */
.franja { color: var(--negro); }
.franja ul { list-style: none; margin: 0 auto; padding: 16px 16px 0; max-width: calc(var(--ancho) + 32px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* dos tarjetas separadas: se lee como dos promesas distintas */
.franja li { display: flex; align-items: center; gap: 12px; padding: 16px 14px; border-radius: var(--radio);
  background: var(--lima) repeating-linear-gradient(-55deg, transparent 0 22px, rgba(255,255,255,.28) 22px 30px); }
.franja-ico { flex: none; width: 46px; height: 41px; clip-path: var(--hex); background: var(--negro); display: grid; place-items: center; }
.franja-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--lima); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.franja b { display: block; font: italic 900 16px/1.05 var(--f-titulo); text-transform: uppercase; }
.franja li div span { display: block; font-size: 13px; line-height: 1.25; margin-top: 3px; }
@media (min-width: 700px) {
  .franja ul { padding: 24px 16px 0; gap: 18px; }
  .franja li { justify-content: center; gap: 16px; padding: 26px 24px; }
  .franja-ico { width: 64px; height: 57px; }
  .franja-ico svg { width: 30px; height: 30px; }
  .franja b { font-size: 26px; }
  .franja li div span { font-size: 16px; }
}

/* ---------- secciones ---------- */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 64px 16px; }
.seccion-cab { margin-bottom: 28px; }
.seccion-cab h2 { font-size: clamp(40px, 9vw, 72px); font-style: italic; font-weight: 900; }
.seccion-sub { color: var(--gris-txt); max-width: 560px; margin: 12px 0 0; }
.cargando { color: var(--gris-txt); }

/* rejilla de productos */
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .rejilla { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

.prod { background: var(--blanco); border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s; }
.prod:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.prod-img { aspect-ratio: 1; background: var(--negro); position: relative; overflow: hidden; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* tarjeta tipográfica cuando el producto aún no tiene foto */
.prod-tipo { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--blanco);
  background: radial-gradient(circle at 50% 42%, #2a2a2a 0, var(--negro) 70%); }
.prod-tipo::before { content: ''; position: absolute; left: 50%; top: 46%; width: 72%; aspect-ratio: 1.12; transform: translate(-50%, -50%); clip-path: var(--hex); background: #1d1d1d; }
.prod-tipo b { position: relative; font: italic 900 clamp(56px, 15vw, 96px)/.85 var(--f-titulo); color: var(--lima); }
.prod-tipo span { position: relative; font: 600 15px/1 var(--f-etiqueta); letter-spacing: .2em; text-transform: uppercase; margin-top: 8px; }
.prod-etq { position: absolute; left: 10px; top: 10px; background: var(--lima); color: var(--negro); font: 600 11px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .08em; padding: 6px 9px; border-radius: 999px; }
.prod-info { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prod-nombre { font: 600 15px/1.2 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .03em; }
.prod-desc { font-size: 13px; color: var(--gris-txt); line-height: 1.35; }
.prod-precio { font: italic 900 26px/1 var(--f-titulo); margin-top: auto; padding-top: 10px; }
.prod-precio small { font: 500 12px var(--f-etiqueta); color: var(--gris-txt); text-transform: uppercase; letter-spacing: .06em; font-style: normal; margin-left: 4px; }
.prod-agregar { margin-top: 10px; border: 0; border-radius: 999px; background: var(--lima); color: var(--negro); padding: 12px; cursor: pointer;
  font: 600 14px/1.1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .04em; transition: background .15s; }
@media (max-width: 699px) { .prod-agregar { font-size: 12.5px; padding: 11px 6px; letter-spacing: .02em; } }
.prod-agregar:hover { background: #a2ff5c; }
.prod-agregar.ok { background: var(--negro); color: var(--lima); }

/* ---------- set completo ---------- */
.set { background: var(--negro); color: var(--blanco); display: grid; }
.set-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; object-position: 50% 45%; }
.set-txt { padding: 40px 20px 48px; }
.set-txt .kicker { color: var(--lima); }
.set-txt h2 { font-size: clamp(42px, 10vw, 76px); font-style: italic; font-weight: 900; }
.set-txt h2 span { color: var(--lima); }
.set-pesos { display: flex; flex-wrap: wrap; gap: 5px; margin: 22px 0; padding: 0; }
.set-fila { display: contents; list-style: none; margin: 0; padding: 0; }
.set-pesos li { width: 44px; height: 40px; font-size: 16px !important; clip-path: var(--hex); background: #222; display: grid; place-content: center; font: italic 900 20px/1 var(--f-titulo); color: var(--lima); }
.set-pesos li small { display: block; font: 500 9px/1 var(--f-etiqueta); color: #aaa; text-align: center; letter-spacing: .1em; }
.set-precio { font: italic 900 52px/1 var(--f-titulo); margin: 6px 0 22px; }
.set-precio small { font: 500 15px var(--f-etiqueta); color: #aaa; font-style: normal; text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; }
@media (min-width: 900px) {
  .set { grid-template-columns: 1fr 1fr; }
  .set-foto img { aspect-ratio: auto; max-height: 640px; }
  .set-pesos { gap: 8px; }
  .set-pesos li { width: 58px; height: 52px; font-size: 20px !important; }
  .set-txt { align-self: center; padding: 60px max(32px, calc((100vw - var(--ancho)) / 2)) 60px 56px; }
}

/* ---------- por qué concreto ---------- */
.porque { display: grid; background: var(--blanco); }
.porque-foto { padding: 16px 16px 0; }
.porque-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; object-position: 60% 60%; border-radius: var(--radio); }
.porque-txt { padding: 48px 20px 56px; }
.porque-txt h2 { font-size: clamp(38px, 9vw, 66px); font-style: italic; font-weight: 900; line-height: 1.12; }
.porque-txt h2 span { background: linear-gradient(transparent 15%, var(--lima) 15% 85%, transparent 85%); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.beneficios { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 22px; }
.beneficios li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.beneficios i { width: 52px; height: 46px; clip-path: var(--hex); background: var(--negro); display: grid; place-items: center; }
.beneficios i svg { width: 24px; height: 24px; fill: none; stroke: var(--lima); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* subtítulo: la frase, grande y con barra lima */
.porque-sub { margin: 22px 0 0; padding: 4px 0 4px 16px; border-left: 5px solid var(--lima);
  font: italic 800 clamp(22px, 4.6vw, 30px)/1.2 var(--f-titulo); color: var(--tinta); max-width: 560px; }
.porque-razones { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 18px; max-width: 560px; }
.porque-razones li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
/* íconos dibujados: trazo negro (.t), relleno lima (.v), blanco (.w) o negro (.n); .b = brillo blanco; .g = palomita gruesa */
.porque-razones i { width: 52px; height: 52px; display: block; }
.porque-razones i svg { width: 52px; height: 52px; overflow: visible; }
.porque-razones .t { fill: none; stroke: var(--negro); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.porque-razones .t.v { fill: var(--lima); }
.porque-razones .t.w { fill: var(--blanco); }
.porque-razones .t.n { fill: var(--negro); }
.porque-razones .t.g { stroke-width: 3.4; }
.porque-razones .b { fill: none; stroke: var(--blanco); stroke-width: 2; stroke-linecap: round; opacity: .9; }
.porque-razones p { margin: 0; color: var(--gris-txt); font-size: 17px; line-height: 1.6; }
.porque-razones b { color: var(--tinta); font-weight: 700; }
.porque-frase { margin: 18px 0 0; padding-left: 14px; border-left: 3px solid var(--lima); color: var(--gris-txt); font-style: italic; }
.beneficios b { font: 600 18px/1.2 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .03em; }
.beneficios p { margin: 4px 0 0; color: var(--gris-txt); }
@media (min-width: 900px) {
  .porque { grid-template-columns: 1fr 1fr; }
  .porque-foto { padding: 48px 0 48px max(32px, calc((100vw - var(--ancho)) / 2)); }
  .porque-foto img { aspect-ratio: auto; min-height: 520px; }
  .porque-txt { align-self: center; padding: 60px max(32px, calc((100vw - var(--ancho)) / 2)) 60px 56px; }
}

.centro { text-align: center; margin-top: 32px; }

/* ---------- categorías (banners lima) ---------- */
.cats { padding-bottom: clamp(64px, 9vw, 112px); }
.cats-rejilla { display: grid; gap: 14px; }
.cat { position: relative; display: block; min-height: 170px; border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--negro);
  background: var(--lima); transition: transform .2s, box-shadow .2s; }
.cat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.14); }
.cat-txt { position: relative; z-index: 1; padding: 22px 22px; max-width: 58%; }
.cat h3 { font: italic 900 clamp(27px, 7.4vw, 46px)/.95 var(--f-titulo); text-transform: uppercase; }
.cat-ver { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 500 16px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .03em; }
.cat-ver i { font-style: normal; transition: transform .2s; }
.cat:hover .cat-ver i { transform: translateX(5px); }
.cat img, .cat-dibujo { position: absolute; right: 4%; bottom: 8%; height: 84%; width: auto; max-width: 46%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.cat-dibujo { height: 64%; bottom: 16%; }
.cat.pronto { pointer-events: none; }
.cat.pronto .cat-ver { display: none; }
.cat.pronto .cat-txt::after { content: 'Muy pronto'; display: inline-block; margin-top: 14px; background: var(--negro); color: var(--lima);
  font: 600 13px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .1em; padding: 8px 12px; border-radius: 999px; }
.cat.pronto .cat-dibujo, .cat.pronto img, .cat.pronto .cat-3d { opacity: .55; }
/* banners en 3D (categorias3d.js): el lienzo ocupa la mitad derecha; la imagen de respaldo se oculta */
.cat-3d { position: absolute; top: 4%; right: 2%; width: 48%; height: 96%; display: block; }
@media (max-width: 699px) { .cat-3d { width: 50%; } }
.cat.con-3d > img, .cat.con-3d > .cat-dibujo { display: none; }
@media (min-width: 700px) { .cats-rejilla { grid-template-columns: 1fr 1fr; gap: 18px; } .cat { min-height: 220px; } .cat-txt { padding: 28px; } }

/* ---------- envíos y pago (propuesta B elegida por Paola, 2026-11-07) ----------
   Tres caminos agrupados por zona: el bloque de color (lima = Monterrey, negro = resto de México)
   es el FONDO del grupo y cubre por detrás sus tarjetas. Lo que no aplica sale gris y tachado. */
.env { display: grid; gap: 14px; }
.env svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.env-grupo { display: grid; grid-template-rows: auto; align-content: start; gap: 10px; border-radius: calc(var(--radio) + 6px); padding: 10px; }
.env-mty { background: var(--lima); }
.env-mx { background: var(--negro); color: var(--blanco); }
.env-mx .env-banda svg { color: var(--lima); }
.env-banda { display: flex; align-items: center; gap: 12px; padding: 10px 10px 6px; }
.env-banda svg { width: 30px; height: 30px; flex: none; }
.env-banda b { font: italic 900 clamp(24px, 6vw, 40px)/.95 var(--f-titulo); text-transform: uppercase; }
.env-cards { display: grid; gap: 10px; align-items: start; }
/* Monterrey: debajo de las tarjetas, sobre el verde, qué municipios cubre */
.env-nota { margin: 4px 8px 6px; font: 500 13.5px/1.5 var(--f-texto); color: rgba(11,11,11,.5); }
.env-nota b { color: rgba(11,11,11,.62); }
.env-nota-mx { color: rgba(255,255,255,.55); }
.env-card { background: var(--blanco); color: var(--tinta); border-radius: var(--radio); padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; }
.env-cab { display: flex; align-items: center; gap: 12px; }
.env-hex { width: 54px; height: 48px; flex: none; clip-path: var(--hex); background: var(--negro); color: var(--lima); display: grid; place-items: center; }
.env-hex svg { width: 26px; height: 26px; }
.env-cab h3 { font: 600 20px/1 var(--f-etiqueta); letter-spacing: .04em; }
.env-tiempo { margin: 0; font: italic 900 clamp(40px, 10vw, 56px)/.9 var(--f-titulo); text-transform: uppercase; }
.env-tiempo small { display: block; font: 500 14px/1.3 var(--f-texto); font-style: normal; text-transform: none; color: var(--gris-txt); margin-top: 8px; }
.env-foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; }
.env-foto-hueco { display: grid; place-items: center; background: var(--concreto); border: 2px dashed var(--concreto-2); color: var(--gris-txt);
  font: 600 12px/1.2 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 8px; }
.env-pagos { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-top: 1px solid var(--concreto-2); padding: 14px 0 0; }
.env-pagos li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font: 600 12px/1.1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .04em; }
.env-pagos .ic { width: 46px; height: 46px; border-radius: 50%; background: var(--lima); display: grid; place-items: center; position: relative; }
.env-pagos .ic svg { width: 26px; height: 26px; }
.env-pagos li.no { color: #b0b0ac; }
.env-pagos li.no .ic { background: var(--concreto); color: #b0b0ac; }
.env-pagos li.no .ic::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; border-top: 2.5px solid #b0b0ac; transform: rotate(-45deg); }
.env-pie { margin: 8px 0 0; font: 400 13px/1.35 var(--f-texto); color: var(--gris-txt); }
.env-pie b { color: var(--tinta); font-weight: 500; }
.env-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.env-chips span { padding: 7px 12px; border-radius: 999px; border: 2px solid var(--negro); font: 600 13px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .05em; }
@media (min-width: 860px) {
  .env { grid-template-columns: 2fr 1fr; align-items: stretch; }
  .env-grupo { padding: 12px; }
  .env-mty .env-cards { grid-template-columns: 1fr 1fr; }
  .env-card { padding: 26px 22px; }
  .env-banda b { font-size: clamp(22px, 2.6vw, 34px); white-space: nowrap; }
}

/* ---------- ubicación ---------- */
.ubicacion { display: grid; background: var(--negro); color: var(--blanco); margin-top: 0; }
.ubicacion-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; aspect-ratio: 4/3; }
.ubicacion-txt { padding: 44px 20px 52px; }
.ubicacion .kicker { color: var(--lima); }
.ubicacion h2 { font-size: clamp(36px, 8vw, 60px); font-style: italic; font-weight: 900; }
.ubicacion-txt > p { color: #c9c9c9; max-width: 480px; margin: 14px 0 0; }
.datos { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 16px; }
.datos li { display: flex; gap: 14px; align-items: center; }
.datos svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--lima); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.datos b { display: block; font: 600 17px/1.2 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .03em; }
.datos span { color: #b5b5b5; font-size: 15px; }
.ubicacion-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ubicacion .btn-borde { color: var(--blanco); }
@media (min-width: 900px) {
  .ubicacion { grid-template-columns: 1fr 1fr; }
  .ubicacion-foto img { aspect-ratio: auto; max-height: 620px; }
  .ubicacion-txt { align-self: center; padding: 60px max(32px, calc((100vw - var(--ancho)) / 2)) 60px 56px; }
}

/* ---------- página de la tienda ---------- */
/* ---------- banner de /tienda/ (lima con franjas; con foto si se agrega .tienda-banner-foto) ---------- */
.tienda-banner { --mitad-filtros: 37px; position: relative; overflow: hidden; display: grid; place-items: center; text-align: center; min-height: 150px; padding: 34px 16px calc(38px + var(--mitad-filtros));
  background: var(--lima) repeating-linear-gradient(-55deg, transparent 0 22px, rgba(255,255,255,.28) 22px 30px); color: var(--negro); }
.tienda-banner-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tienda-banner:has(.tienda-banner-foto)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.65)); z-index: 1; }
.tienda-banner:has(.tienda-banner-foto) { color: var(--blanco); }
.tienda-banner-txt { position: relative; z-index: 2; max-width: 720px; }
.tienda-banner .kicker { color: inherit; opacity: .75; }
.tienda-banner h1 { font-size: clamp(30px, 8.4vw, 84px); font-style: italic; font-weight: 900; line-height: 1; white-space: nowrap; }
.tienda-banner-txt > p:not(.kicker) { margin: 14px auto 0; font-weight: 500; max-width: 520px; }
@media (min-width: 800px) { .tienda-banner { min-height: calc(180px + var(--mitad-filtros)); } }

/* ---------- barra de filtros (pegada abajo del menú) ---------- */
/* el banner lima termina a la mitad de la barra: la barra sube media altura (--mitad-filtros) y no lleva fondo propio */
.filtros-barra { position: sticky; top: 64px; z-index: 20; padding: 12px 16px; margin-top: -37px; }
.filtros-caja { max-width: var(--ancho); margin: 0 auto; background: var(--blanco); border-radius: 999px; padding: 6px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.filtros-etq { flex: none; padding: 0 6px 0 14px; font: 600 11px/1.1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .08em; color: var(--gris-txt); }
.filtros { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; margin: 0; padding: 0; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button { flex: none; border: 0; background: none; border-radius: 999px; padding: 11px 16px; cursor: pointer; color: var(--gris-txt);
  font: 600 14px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .06em; transition: background .15s, color .15s; }
.filtros button:hover { color: var(--negro); background: var(--concreto); }
.filtros button.activo { background: var(--negro); color: var(--lima); }
/* LB / KG: cambia solo el título de mancuernas y barras (tienda.js, enKg) */
.unidades { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--concreto); }
.unidades span { font: 600 11px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .08em; color: var(--gris-txt); padding: 0 6px 0 8px; }
.unidades button { border: 0; background: none; border-radius: 999px; padding: 8px 12px; cursor: pointer; font: 600 13px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .06em; color: var(--gris-txt); }
.unidades button.activo { background: var(--lima); color: var(--negro); }
.prod-alt { color: #a3a3a0; font-weight: 500; margin-left: 4px; white-space: nowrap; }
@media (max-width: 699px) {
  .filtros-barra { padding: 10px 12px; margin-top: -50px; }
  .tienda-banner { --mitad-filtros: 50px; }
  .filtros-caja { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; padding: 12px; border-radius: var(--radio); }
  .filtro-campo .filtros-etq { display: block; margin-bottom: 7px; padding: 0; }
  .solo-compu { display: none !important; }
  .unidades { margin: 0 auto 2px; }
}
.grupo { padding-top: 36px; padding-bottom: 24px; }
.grupo .seccion-cab h2 { font-size: clamp(30px, 7vw, 46px); }
/* en la tienda, el subtítulo del grupo va justo después del título, en el mismo renglón */
.grupo .seccion-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.grupo .seccion-cab .seccion-sub { margin: 0; }

/* ---------- garantía ---------- */
.garantia { background: var(--lima) repeating-linear-gradient(-55deg, transparent 0 22px, rgba(255,255,255,.28) 22px 30px); color: var(--negro);
  display: grid; gap: 20px; align-items: center; padding: 48px max(20px, calc((100vw - var(--ancho)) / 2)); }
.garantia-hex { width: 128px; height: 114px; clip-path: var(--hex); background: var(--negro); color: var(--lima); display: grid; place-content: center; text-align: center;
  font: italic 900 60px/.8 var(--f-titulo); }
.garantia-hex small { display: block; font: 600 13px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .14em; color: var(--blanco); margin-top: 6px; }
.garantia h2 { font-size: clamp(34px, 8vw, 56px); font-style: italic; font-weight: 900; }
.garantia p { max-width: 720px; margin: 12px 0 0; }
.garantia { justify-items: center; text-align: center; }
.garantia p { margin-left: auto; margin-right: auto; }
@media (min-width: 800px) { .garantia { grid-template-columns: auto minmax(0, 720px); justify-content: center; justify-items: start; text-align: left; gap: 40px; } .garantia p { margin-left: 0; } .garantia-hex { width: 170px; height: 152px; font-size: 80px; } }

/* ---------- preguntas ---------- */
.faq details { background: var(--blanco); border-radius: 14px; margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative; font: 600 17px/1.3 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 900 26px/1 var(--f-titulo); color: var(--lima-osc); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0; padding: 0 20px 20px; color: var(--gris-txt); }

/* ---------- pie ---------- */
.pie { background: var(--negro); color: #cfcfcf; padding: 48px max(20px, calc((100vw - var(--ancho)) / 2)) 110px; margin-top: 64px; }
.pie-logo { height: 34px; width: auto; margin-bottom: 28px; }
.pie-cols { display: grid; gap: 22px; }
.pie b { font: 600 14px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .12em; color: var(--lima); }
.pie p { margin: 8px 0 0; }
.pie a { color: var(--blanco); }
.pie-legal { margin-top: 36px !important; font-size: 13px; color: #777; }
@media (min-width: 800px) { .pie-cols { grid-template-columns: repeat(3, 1fr); } }

/* ---------- WhatsApp flotante ---------- */
.wa-flota { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.wa-flota svg { width: 32px; height: 32px; fill: #fff; }

/* ---------- panel del carrito y pedido ---------- */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(460px, 100vw); background: var(--concreto); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s ease; }
.panel.abierto { transform: none; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--negro); color: var(--blanco); }
.panel-cab h2 { font-size: 26px; font-style: italic; font-weight: 900; }
.panel-cerrar { border: 0; background: none; color: var(--blanco); font-size: 22px; cursor: pointer; width: 40px; height: 40px; }
.panel-cuerpo { flex: 1; overflow-y: auto; padding: 16px; }
.panel-pie { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--blanco); border-top: 1px solid var(--concreto-2); }
.panel-vacio { text-align: center; padding: 48px 12px; color: var(--gris-txt); }
.panel-vacio b { display: block; font: italic 900 30px/1 var(--f-titulo); color: var(--tinta); text-transform: uppercase; margin-bottom: 10px; }

.linea { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: var(--blanco); border-radius: 14px; padding: 10px; margin-bottom: 10px; }
.linea-img { width: 64px; height: 64px; border-radius: 10px; background: var(--negro); color: var(--lima); display: grid; place-content: center; overflow: hidden;
  font: italic 900 22px/1 var(--f-titulo); }
.linea-img img { width: 100%; height: 100%; object-fit: cover; }
.linea-nombre { font: 600 14px/1.2 var(--f-etiqueta); text-transform: uppercase; }
.linea-precio { font-size: 13px; color: var(--gris-txt); }
.linea-der { text-align: right; }
.linea-importe { font: italic 900 18px/1 var(--f-titulo); }
.cant { display: inline-flex; align-items: center; margin-top: 8px; background: var(--concreto); border-radius: 999px; }
.cant button { border: 0; background: none; width: 30px; height: 30px; cursor: pointer; font-size: 18px; }
.cant span { min-width: 22px; text-align: center; font-weight: 700; }

.totales { margin-bottom: 12px; font-size: 15px; }
.totales div { display: flex; justify-content: space-between; padding: 3px 0; }
.totales .total { font: italic 900 24px/1.2 var(--f-titulo); text-transform: uppercase; padding-top: 6px; }
.totales .nota { color: var(--gris-txt); font-size: 13px; }

/* formulario del pedido */
.paso-etq { font: 600 13px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .12em; color: var(--gris-txt); margin: 22px 0 10px; }
.paso-etq:first-child { margin-top: 4px; }
.campo { display: block; margin-bottom: 10px; }
.campo span { display: block; font-size: 13px; color: var(--gris-txt); margin-bottom: 4px; }
.campo input, .campo textarea, .campo select { width: 100%; padding: 13px 14px; border-radius: 12px; border: 2px solid transparent; background: var(--blanco); font-size: 16px; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 0; border-color: var(--negro); }
.campo.error input, .campo.error textarea { border-color: var(--rojo); }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opciones { display: grid; gap: 8px; }
.opcion { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; background: var(--blanco); border-radius: 14px; padding: 14px; cursor: pointer; border: 2px solid transparent; }
.opcion:has(input:checked) { border-color: var(--negro); }
.opcion.apagada { opacity: .45; cursor: not-allowed; }
.opcion input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--negro); }
.opcion b { display: block; font: 600 16px/1.2 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .02em; }
.opcion small { display: block; color: var(--gris-txt); font-size: 13px; line-height: 1.35; margin-top: 3px; }
.caja-mp { margin-top: 10px; border: 2px dashed var(--concreto-2); border-radius: 14px; padding: 18px; text-align: center; color: var(--gris-txt); font-size: 14px; background: var(--blanco); }
.casilla { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--gris-txt); margin: 16px 0 4px; }
.casilla input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--negro); flex: none; }
.error-txt { color: var(--rojo); font-size: 14px; margin: 0 0 10px; }

.listo { text-align: center; padding: 28px 8px; }
.listo-hex { width: 96px; height: 86px; margin: 0 auto 18px; clip-path: var(--hex); background: var(--lima); display: grid; place-content: center; font: 900 40px/1 var(--f-titulo); }
.listo h3 { font-size: 34px; font-style: italic; font-weight: 900; }
.listo .folio { display: inline-block; margin: 14px 0; background: var(--negro); color: var(--lima); font: 600 18px/1 var(--f-etiqueta); letter-spacing: .1em; padding: 10px 16px; border-radius: 10px; }
.listo p { color: var(--gris-txt); }

/* aviso flotante */
.aviso { position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); opacity: 0; z-index: 60; background: var(--negro); color: var(--blanco);
  padding: 12px 18px; border-radius: 999px; font: 500 15px/1.2 var(--f-texto); transition: .25s; pointer-events: none; white-space: nowrap; }
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }
.aviso b { color: var(--lima); }

body.sin-scroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

.pronto-txt { text-align: center; color: var(--gris-txt); padding-top: 24px; }
.pronto-txt b { display: block; font: italic 900 26px/1.1 var(--f-titulo); color: var(--tinta); text-transform: uppercase; margin-bottom: 8px; }

@media (max-width: 699px) { .cat img { height: 74%; max-width: 40%; bottom: 6%; } }

/* ---------- carrusel (hero) ---------- */
/* no ocupa toda la pantalla: alineado al contenido, con espacio a los lados y esquinas redondeadas */
.carrusel { position: relative; max-width: var(--ancho); margin: 16px 16px 0; border-radius: var(--radio); overflow: hidden; background: var(--negro); isolation: isolate; }
@media (min-width: 1212px) { .carrusel { margin: 24px auto 0; } }
.carrusel-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.carrusel-pista::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; display: block; aspect-ratio: 4 / 5; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 700px) { .slide { aspect-ratio: 1920 / 720; } }
.carrusel-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(11,11,11,.55); display: none; place-items: center; transition: background .15s; }
.carrusel-flecha:hover { background: var(--lima); }
.carrusel-flecha svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carrusel-flecha:hover svg { stroke: var(--negro); }
.carrusel-flecha.ant { left: 14px; } .carrusel-flecha.sig { right: 14px; }
@media (min-width: 900px) { .carrusel-flecha { display: grid; } }
.carrusel-puntos { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.carrusel-puntos button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: rgba(255,255,255,.55); cursor: pointer; transition: width .25s, background .25s; }
.carrusel-puntos button.activo { width: 28px; background: var(--lima); }

/* ---------- calidad a precios de fabricante + mancuerna 3D ---------- */
.calidad { max-width: var(--ancho); margin: 0 auto; padding: 104px 16px 104px; display: grid; gap: 8px; align-items: center; }
.calidad h1 { font-style: italic; font-weight: 900; font-size: clamp(38px, 9vw, 68px); line-height: 1.12; }
.calidad h1 span { background: linear-gradient(transparent 15%, var(--lima) 15% 85%, transparent 85%); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.calidad-sub { font-size: 18px; color: var(--gris-txt); max-width: 460px; margin: 18px 0 0; }

.m3d { position: relative; }
.m3d-escena { position: relative; height: 300px; }
.m3d-escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m3d-lineas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.m3d-lineas path.linea { fill: none; stroke: var(--lima-osc); stroke-width: 2; stroke-linecap: round; }
.m3d-lineas .flecha { fill: none; stroke: var(--lima-osc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m3d-lineas .punto { fill: var(--lima); stroke: var(--negro); stroke-width: 2; }
.m3d-lineas .punto-n { font: 700 12px var(--f-texto); fill: var(--negro); text-anchor: middle; dominant-baseline: central; }
.m3d-lineas .ancla { fill: var(--negro); }
/* ventajas: en celular, lista 2×2 abajo con número; en compu, flotando alrededor de la mancuerna */
.caracteristicas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.caracteristicas li { display: flex; gap: 10px; align-items: flex-start; }
.caracteristicas i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
.caracteristicas svg { width: 40px; height: 40px; }
.caracteristicas svg .n { fill: var(--negro); }
.caracteristicas svg .l { fill: none; stroke: var(--lima); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.caracteristicas b { display: flex; align-items: center; gap: 6px; font: 600 15px/1.15 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .03em; }
.caracteristicas b em { font: 700 11px/18px var(--f-texto); font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--lima); text-align: center; flex: none; }
.caracteristicas span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--gris-txt); }
.m3d.sin-3d .m3d-escena { display: none; }
.m3d.sin-3d .caracteristicas b em { display: none; }
@media (min-width: 1000px) {
  .calidad { grid-template-columns: .8fr 1.5fr; gap: 24px; padding: 140px 32px 140px; }
  .m3d-escena { height: 470px; }
  .m3d:not(.sin-3d) .caracteristicas { position: absolute; inset: 0; display: block; pointer-events: none; }
  .m3d:not(.sin-3d) .caracteristicas li { position: absolute; width: 205px; }
  .m3d:not(.sin-3d) .caracteristicas b em { display: none; }
  .c-ti { left: 0; top: 2%; } .c-bi { left: 0; bottom: 4%; }
  .c-td { right: 0; top: 2%; } .c-bd { right: 0; bottom: 4%; }
  .m3d:not(.sin-3d) .c-ti, .m3d:not(.sin-3d) .c-bi { flex-direction: row-reverse; text-align: right; }
  .m3d:not(.sin-3d) .c-ti b, .m3d:not(.sin-3d) .c-bi b { justify-content: flex-end; }
}

/* ---------- tarjetas: foto y nombre llevan a la ficha ---------- */
a.prod-img { display: block; }
a.prod-nombre { text-decoration: none; color: inherit; }
a.prod-nombre:hover { text-decoration: underline; text-decoration-color: var(--lima-osc); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- ficha de producto (/tienda/producto/?p=SKU) ---------- */
.ficha { max-width: var(--ancho); margin: 0 auto; padding: 18px 16px 72px; }
.ficha-miga { display: flex; gap: 8px; margin-bottom: 16px; font: 500 13px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .08em; color: var(--gris-txt); }
.ficha-miga a { color: inherit; text-decoration: none; }
.ficha-miga a:hover { color: var(--negro); }
.ficha-grid { display: grid; gap: 24px; }
.galeria { min-width: 0; }
.galeria-marco { position: relative; }
.galeria-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 4 / 5; border-radius: var(--radio); background: #fffcf8; }
.galeria-pista::-webkit-scrollbar { display: none; }
.galeria-foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; position: relative; }
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; }
.galeria-foto.cuadrada img { object-fit: contain; }
.galeria-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(11,11,11,.7); display: grid; place-items: center; transition: background .15s; }
.galeria-flecha:hover { background: var(--negro); }
.galeria-flecha svg { width: 22px; height: 22px; fill: none; stroke: var(--lima); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.galeria-flecha.ant { left: 12px; }
.galeria-flecha.sig { right: 12px; }
.galeria-minis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 10px; }
.galeria-minis button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #fffcf8; opacity: .6; transition: opacity .15s, border-color .15s; }
.galeria-minis button:hover { opacity: 1; }
.galeria-minis button.activo { border-color: var(--negro); opacity: 1; }
.galeria-minis img { width: 100%; height: 100%; object-fit: cover; }
.ficha-nombre { font: italic 900 clamp(34px, 8vw, 56px)/.95 var(--f-titulo); text-transform: uppercase; }
.ficha-nombre .prod-alt { font-size: .5em; vertical-align: middle; }
.ficha-detalle { margin: 10px 0 0; color: var(--gris-txt); }
.ficha-precio { margin-top: 18px; font: italic 900 44px/1 var(--f-titulo); }
.ficha-precio small { font: 500 14px var(--f-etiqueta); font-style: normal; color: var(--gris-txt); text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; }
.ficha-bloque { margin-top: 24px; }
/* peso (lista) y Libras/Kilos en el mismo renglón */
.ficha-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.ficha-peso { display: inline-flex; align-items: center; gap: 10px; }
.ficha-peso span { font: 600 12px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .1em; color: var(--gris-txt); }
.ficha-peso select { appearance: none; -webkit-appearance: none; cursor: pointer; border: 2px solid var(--negro); border-radius: 999px; background: var(--blanco)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  padding: 10px 38px 10px 16px; font: 600 15px/1 var(--f-etiqueta); letter-spacing: .04em; color: var(--negro); }
.ficha-peso select:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.ficha-info .ficha-opciones .unidades { margin-top: 0; }
/* ficha (2026-11-07): peso y unidad en dos columnas parejas, etiqueta arriba de cada control */
.ficha-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-top: 22px; padding: 14px; background: var(--blanco); border-radius: var(--radio); }
.ficha-campo { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.ficha-campo .ficha-etq { margin: 0; font: 600 11.5px/1.1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .1em; color: var(--gris-txt); }
.ficha-peso select { width: 100%; height: 44px; }
.ficha-info .ficha-unidades { display: flex; width: 100%; height: 44px; margin: 0; background: var(--concreto); }
.ficha-unidades button { flex: 1; }
.ficha-opciones > .ficha-campo:only-child { grid-column: 1 / -1; }
/* descripción con emojis */
.ficha-desc { margin-top: 26px; padding: 20px; background: var(--blanco); border-radius: var(--radio); }
.ficha-desc h2 { font: italic 900 24px/1 var(--f-titulo); text-transform: uppercase; }
.ficha-desc > p { margin: 12px 0 0; font-size: 15px; }
.ficha-desc ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.ficha-desc li { display: flex; gap: 12px; align-items: flex-start; }
.ficha-desc i { flex: none; width: 26px; font-style: normal; font-size: 20px; line-height: 1.2; text-align: center; }
.ficha-desc li b { display: block; font: 700 15px/1.3 var(--f-texto); color: var(--tinta); }
.ficha-desc li span { font-size: 14px; color: var(--gris-txt); line-height: 1.4; }
.ficha-etq { margin: 0 0 10px; font: 600 12px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .1em; color: var(--gris-txt); }
.ficha-pesos { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-pesos a { min-width: 64px; text-align: center; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--concreto-2); background: var(--blanco); text-decoration: none;
  font: 600 15px/1 var(--f-etiqueta); letter-spacing: .04em; transition: border-color .15s; }
.ficha-pesos a:hover { border-color: var(--negro); }
.ficha-pesos a.activo { background: var(--negro); border-color: var(--negro); color: var(--lima); }
.ficha-info .unidades { margin-top: 14px; background: var(--blanco); }
.ficha-agregar { margin-top: 26px; }
.ficha-wa { display: block; margin-top: 18px; text-align: center; font-size: 14px; color: var(--gris-txt); }
.ficha-puntos { list-style: none; padding: 0; margin: 28px 0 0; border-top: 1px solid var(--concreto-2); }
.ficha-puntos li { padding: 14px 0; border-bottom: 1px solid var(--concreto-2); }
.ficha-puntos b { display: block; font: 600 15px/1.2 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .04em; }
.ficha-puntos span { font-size: 14px; color: var(--gris-txt); }
.ficha-nada { text-align: center; padding: 60px 0; display: grid; gap: 20px; justify-items: center; }
.ficha-nada h1 { font-size: clamp(30px, 7vw, 48px); font-style: italic; }
@media (min-width: 900px) {
  .ficha { padding-top: 28px; }
  .ficha-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .ficha-info { position: sticky; top: 92px; }
}
@media (max-width: 699px) { .galeria-flecha { display: none; } .galeria-minis { gap: 6px; } }

/* ---------- ficha: "Quizá te interese" (4 productos de otra categoría) ---------- */
.relacionados { margin-top: 64px; }
.relacionados h2 { font: italic 900 clamp(28px, 6vw, 44px)/1 var(--f-titulo); text-transform: uppercase; margin-bottom: 20px; }
.relacionados-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 899px) {
  .relacionados-fila { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin: 0 -16px; padding: 0 16px 8px; scroll-padding: 0 16px; }
  .relacionados-fila::-webkit-scrollbar { display: none; }
  .relacionados-fila .prod { scroll-snap-align: start; }
}
@media (min-width: 600px) and (max-width: 899px) { .relacionados-fila { grid-auto-columns: 38%; } }

/* ---------- páginas legales (/aviso-de-privacidad/, /terminos/) ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 16px 24px; }
.legal h1 { font-size: clamp(34px, 8vw, 56px); font-style: italic; font-weight: 900; }
.legal-fecha { color: var(--gris-txt); font-size: 14px; margin: 10px 0 28px; }
.legal h2 { font: 700 19px/1.3 var(--f-texto); text-transform: none; margin: 30px 0 10px; }
.legal p, .legal li { color: #333; font-size: 16px; line-height: 1.65; }
.legal ul { padding-left: 22px; margin: 8px 0; }
.legal li { margin: 4px 0; }
.legal a { color: var(--negro); text-decoration-color: var(--lima-osc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.legal mark.pendiente { background: #ffe066; padding: 0 4px; border-radius: 4px; }
.pie-links { margin-top: 28px !important; font-size: 14px; }
.pie-links a { color: #cfcfcf; }
.nota-legal { font-size: 12.5px; color: var(--gris-txt); margin: 10px 0 0; line-height: 1.4; }
.nota-legal a { color: inherit; }

/* ---------- ajustes de CELULAR (2026-11-07) ---------- */
@media (max-width: 699px) {
  /* títulos, antetítulos y subtítulos de cada sección, centrados */
  .seccion-cab, .seccion-cab .seccion-sub, .set-txt, .porque-txt > .kicker, .porque-txt > h2, .ubicacion-txt > .kicker, .ubicacion-txt > h2, .ubicacion-txt > p,
  .calidad-txt { text-align: center; }
  .seccion-cab .seccion-sub, .calidad-sub, .ubicacion-txt > p { margin-left: auto; margin-right: auto; }
  /* set: pesos en pirámide (2 · 3 · 3), hexágonos más grandes */
  .set-pesos { flex-direction: column; align-items: center; gap: 6px; }
  .set-fila { display: flex; gap: 8px; }
  .set-pesos li { width: 62px; height: 55px; font-size: 21px !important; }
  /* franja de garantía/envíos: dos columnas, centradas, con el ícono arriba del título */
  .franja ul { grid-template-columns: 1fr 1fr; gap: 10px; }
  .franja li { flex-direction: column; justify-content: center; text-align: center; gap: 10px; padding: 18px 10px; }
  .franja b { font-size: 16px; }
  .franja li div span { font-size: 13px; }
  .grupo .seccion-cab { justify-content: center; }
  /* categorías: menos gris antes de la sección siguiente */
  .cats { padding-bottom: 28px; }
  /* envíos: más verde entre "A tu puerta" y "En el taller" */
  .env-mty .env-cards { gap: 20px; }
}

/* filtros de la tienda (2026-11-07): lista desplegable de categorías + Libras/Kilos */
.filtro-campo { display: flex; flex-direction: column; min-width: 0; }
.filtro-campo select { appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; height: 44px; border: 2px solid var(--negro); border-radius: 999px;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  padding: 0 38px 0 16px; font: 600 15px/1 var(--f-etiqueta); text-transform: uppercase; letter-spacing: .04em; color: var(--negro); }
.filtro-campo select:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.filtros-unidades { display: flex; width: 100%; height: 44px; }
.filtros-unidades button { flex: 1; }
.solo-cel { display: none; }
@media (max-width: 699px) { .solo-cel { display: flex; } }