/* ============================================================
   DISEÑOS POR TEMA (PRO) — arquitecturas de tarjeta DISTINTAS
   Cada `body.tema-<id>` reestructura la tarjeta de producto (no
   solo color): composición, imagen, precio, botón, hover y títulos.
   Usa las variables del tema (var(--color-*)). Se carga después de
   tienda-base.css y del bloque <style> del tema.
   ============================================================ */

/* Pulido base para todos: transiciones suaves + foco accesible */
.tarjeta-producto { transition: box-shadow .25s ease, transform .25s ease, border-color .2s ease; }
.btn-agregar-carrito { transition: background .2s, color .2s, box-shadow .2s, transform .08s; }
.btn-agregar-carrito:focus-visible,
.tarjeta-producto__nombre a:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }


/* ════════════════════════════════════════════════════════════
   MINIMALISTA — "Galería": sin marco, imagen contenida sobre un
   tono claro, todo centrado y con aire, CTA tipo enlace subrayado.
   ════════════════════════════════════════════════════════════ */
body.tema-minimalista .seccion-titulo { font-weight: 600; letter-spacing: -.01em; }
body.tema-minimalista .seccion-titulo::after { content:""; display:block; width:36px; height:2px; background:var(--color-acento); margin:.55rem auto 0; }
body.tema-minimalista .seccion-header, body.tema-minimalista .seccion-titulo { text-align: center; }
body.tema-minimalista .tarjeta-producto { background: transparent; box-shadow: none; border: none; }
body.tema-minimalista .tarjeta-producto:hover { box-shadow: none; transform: none; }
/* El tile sigue al color del tema en vez de un gris fijo. Sin mix-blend-mode:
   multiplicar destroza las fotos de celular con fondo oscuro que sube un
   ferretero, y no hay forma de detectarlas sin JS. */
body.tema-minimalista .tarjeta-producto__imagen-link {
  aspect-ratio: 1; border-radius: 8px;
  background: color-mix(in srgb, var(--color-texto) 5%, var(--color-fondo));
}
body.tema-minimalista .tarjeta-producto__imagen-link img { object-fit: contain; padding: 12%; }
body.tema-minimalista .tarjeta-producto:hover .tarjeta-producto__imagen-link img { transform: none; }
body.tema-minimalista .tarjeta-producto__info { padding: .9rem .25rem 0; text-align: center; align-items: center; gap: .3rem; }
body.tema-minimalista .tarjeta-producto__nombre { font-weight: 500; font-size: .85rem; }
body.tema-minimalista .tarjeta-producto__precio { font-weight: 600; }
body.tema-minimalista .tarjeta-producto__btns { justify-content: center; margin-top: .4rem; }
body.tema-minimalista .btn-agregar-carrito {
  background: transparent; color: var(--color-primario);
  border: none; border-bottom: 1px solid currentColor; border-radius: 0;
  padding: .15rem 0; font-weight: 500; flex: 0 0 auto;
}
body.tema-minimalista .btn-agregar-carrito:hover { background: transparent; color: var(--color-acento); }


/* ════════════════════════════════════════════════════════════
   CORPORATIVO — "Ficha": imagen + bloque de info con fondo tenue,
   franja de acento y separador. Sensación de catálogo técnico.
   ════════════════════════════════════════════════════════════ */
body.tema-corporativo .header-tienda { border-bottom: 3px solid var(--color-primario); }
body.tema-corporativo .seccion-titulo { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding-left: .7rem; border-left: 4px solid var(--color-primario); }
body.tema-corporativo .tarjeta-producto {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 6px;
}
body.tema-corporativo .tarjeta-producto:hover { transform: translateY(-3px); border-color: var(--color-primario); }
body.tema-corporativo .tarjeta-producto__info {
  background: color-mix(in srgb, var(--color-primario) 4%, var(--color-superficie));
  border-top: 3px solid var(--color-primario);
}
body.tema-corporativo .tarjeta-producto__nombre { font-weight: 600; }
body.tema-corporativo .tarjeta-producto__precio {
  color: var(--color-texto); font-weight: 700; font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  padding-top: .4rem;
}
body.tema-corporativo .btn-agregar-carrito { text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; }


/* ════════════════════════════════════════════════════════════
   ELEGANTE — "Editorial overlay": imagen vertical que llena la
   tarjeta, texto sobre degradado, acentos dorados. Tipo revista.
   ════════════════════════════════════════════════════════════ */
body.tema-elegante .header-tienda { border-bottom: 1px solid var(--color-acento); }
body.tema-elegante .header-nombre { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
body.tema-elegante .seccion-titulo { text-align: center; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
body.tema-elegante .seccion-titulo::after { content:""; display:block; width:56px; height:2px; background:var(--color-acento); margin:.7rem auto 0; }
body.tema-elegante .tarjeta-producto {
  position: relative; border: none; border-radius: 3px; overflow: hidden;
  background: var(--color-primario);
}
body.tema-elegante .tarjeta-producto:hover { transform: none; }
body.tema-elegante .tarjeta-producto__imagen-link { aspect-ratio: 3/4; }
body.tema-elegante .tarjeta-producto__imagen-placeholder { aspect-ratio: auto; height: 100%; }
body.tema-elegante .tarjeta-producto:hover .tarjeta-producto__imagen-link img { transform: scale(1.06); }
body.tema-elegante .tarjeta-producto__info {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%);
  padding: 2.4rem 1rem 1rem; color: #fff; gap: .2rem;
}
body.tema-elegante .tarjeta-producto__nombre, body.tema-elegante .tarjeta-producto__nombre a {
  color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 600;
}
body.tema-elegante .tarjeta-producto__marca { color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; }
body.tema-elegante .tarjeta-producto__precio { color: var(--color-acento); font-weight: 700; }
/* Sobre el degradado hay que recuperar la distincion: en blanco plano,
   "Disponible" y "Agotado" se leian exactamente igual. */
body.tema-elegante .tarjeta-producto__stock.disponible { color: var(--color-acento); }
body.tema-elegante .tarjeta-producto__stock.agotado { color: rgba(255,255,255,.6); }
body.tema-elegante .tarjeta-producto__btns { margin-top: .6rem; }
body.tema-elegante .btn-agregar-carrito {
  background: transparent; color: #fff; border: 1px solid var(--color-acento); border-radius: 0;
  text-transform: uppercase; letter-spacing: .08em; font-size: .68rem;
}
body.tema-elegante .btn-agregar-carrito:hover { background: var(--color-acento); color: #1c1c28; }


/* ════════════════════════════════════════════════════════════
   VIBRANTE — "Pop": tarjeta grande redonda, precio flotante en
   píldora sobre la imagen, botón pastilla a todo el ancho.
   ════════════════════════════════════════════════════════════ */
body.tema-vibrante .header-nombre { font-weight: 800; text-transform: uppercase; }
body.tema-vibrante .seccion-titulo { font-weight: 800; }
body.tema-vibrante .seccion-titulo::after { content:""; display:block; width:60px; height:4px; background:var(--color-acento); margin-top:.5rem; border-radius:999px; }
body.tema-vibrante .tarjeta-producto { position: relative; }
body.tema-vibrante .tarjeta-producto:hover { transform: translateY(-6px) scale(1.01); }
/* La pildora se mueve a la esquina INFERIOR izquierda de la imagen: arriba
   tapaba justo donde suele estar el producto en una foto de catalogo.
   Se ancla al borde SUPERIOR del bloque de info y se sube media altura, asi
   queda a caballo sobre el pie de la imagen sea cual sea su alto (no se puede
   calcular contra la imagen: la pildora no es hija suya). El texto se calcula
   contra el acento, que es un color libre que elige el dueno y puede ser
   oscuro. */
body.tema-vibrante .tarjeta-producto__info { position: relative; padding-top: 1.4rem; }
body.tema-vibrante .tarjeta-producto__precio {
  position: absolute; top: 0; left: 10px; transform: translateY(-50%);
  z-index: 2; margin: 0;
  background: var(--color-acento);
  color: color-mix(in srgb, var(--color-acento) 12%, #111);
  font-weight: 800; font-size: .9rem;
  padding: .2rem .6rem; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.2);
}
body.tema-vibrante .tarjeta-producto__nombre { font-weight: 700; }
body.tema-vibrante .tarjeta-producto__btns { margin-top: auto; }
body.tema-vibrante .btn-agregar-carrito { flex: 1; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
body.tema-vibrante .btn-agregar-carrito:hover { transform: translateY(-1px); }


/* ════════════════════════════════════════════════════════════
   OSCURO PRO — "Glass": tarjeta oscura con imagen enmarcada
   (inset redondeado) y glow al pasar.
   ════════════════════════════════════════════════════════════ */
body.tema-oscuro .header-tienda { border-bottom: 1px solid rgba(255,255,255,.08); }
body.tema-oscuro .seccion-titulo::after { content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--color-primario); margin-top:.55rem; box-shadow:0 0 12px var(--color-primario); }
body.tema-oscuro .tarjeta-producto { border: 1px solid rgba(255,255,255,.08); padding: .5rem; }
body.tema-oscuro .tarjeta-producto__imagen-link { border-radius: 10px; }
body.tema-oscuro .tarjeta-producto__info { padding: .85rem .4rem .4rem; }
body.tema-oscuro .tarjeta-producto:hover {
  transform: translateY(-4px);
  border-color: var(--color-primario);
  box-shadow: 0 0 0 1px var(--color-primario), 0 16px 40px rgba(0,0,0,.65);
}
body.tema-oscuro .btn-agregar-carrito { font-weight: 600; }
body.tema-oscuro .btn-agregar-carrito:hover { box-shadow: 0 0 18px rgba(56,189,248,.55); }


/* ════════════════════════════════════════════════════════════
   TECH NEÓN — "HUD": marco neón, tipografía condensada, precio
   grande en acento, botón outline que se enciende.
   ════════════════════════════════════════════════════════════ */
body.tema-tech .header-tienda { border-bottom: 2px solid var(--color-primario); }
body.tema-tech .header-nombre { text-transform: uppercase; letter-spacing: .08em; }
body.tema-tech .seccion-titulo { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .05em; padding-left: .7rem; border-left: 3px solid var(--color-primario); }
body.tema-tech .tarjeta-producto { border: 1px solid rgba(34,211,238,.25); border-left: 3px solid var(--color-primario); border-radius: 4px; }
body.tema-tech .tarjeta-producto:hover { border-color: var(--color-primario); box-shadow: -4px 0 0 var(--color-acento), 0 10px 30px rgba(0,0,0,.55); }
body.tema-tech .tarjeta-producto__nombre { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: .82rem; }
body.tema-tech .tarjeta-producto__precio {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: var(--color-primario);
}
body.tema-tech .btn-agregar-carrito {
  background: transparent; color: var(--color-primario); border: 1px solid var(--color-primario);
  text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600;
}
body.tema-tech .btn-agregar-carrito:hover { background: var(--color-primario); color: var(--color-texto-inverso); box-shadow: 0 0 16px rgba(34,211,238,.5); }


/* ════════════════════════════════════════════════════════════
   LAYOUTS DE HEADER / NAVEGACIÓN POR TEMA
   Cambia la ESTRUCTURA: dónde van logo, buscador, acciones y menú.
   (Mismo HTML, reordenado con flexbox/order.)
   ════════════════════════════════════════════════════════════ */

/* MINIMALISTA — logo centrado con las acciones (carrito) EN LA MISMA LINEA,
   al extremo derecho; el buscador baja centrado a su propia linea.
   Grid 1fr/auto/1fr: los laterales miden lo mismo, asi que el logo queda
   centrado DE VERDAD; si falta espacio degradan sin desbordar la barra. */
body.tema-minimalista .header-top__inner {
  display: grid;
  /* minmax(0, max-content): la columna del logo puede CEDER si falta espacio
     (el logo se reescala, un nombre largo se corta con elipsis) en vez de
     desbordar la barra o empujar el carrito. */
  grid-template-columns: 1fr minmax(0, max-content) 1fr;
  align-items: center;
  row-gap: .85rem;
  text-align: center;
}
body.tema-minimalista .header-logo, body.tema-minimalista .header-nombre {
  grid-column: 2; grid-row: 1; max-width: 100%; min-width: 0;
}
body.tema-minimalista .header-acciones { grid-column: 3; grid-row: 1; justify-self: end; }
/* Sin fila propia si el buscador esta oculto: la fila 2 solo existe con el. */
body.tema-minimalista .header-buscador { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: 100%; max-width: 460px; }
body.tema-minimalista .nav-cats { justify-content: center; }

/* CORPORATIVO — barra de categorías ARRIBA del todo (dos niveles). */
body.tema-corporativo .header-tienda { display: flex; flex-direction: column; }
body.tema-corporativo .header-nav { order: -1; }

/* ELEGANTE — nombre grande centrado con las acciones (carrito) EN LA MISMA
   LINEA, al extremo derecho; buscador centrado debajo y menú en mayúsculas.
   Mismo grid simetrico que el minimalista (ver nota alli). */
body.tema-elegante .header-top__inner {
  display: grid;
  grid-template-columns: 1fr minmax(0, max-content) 1fr;
  align-items: center;
  row-gap: .6rem;
  text-align: center;
}
body.tema-elegante .header-logo, body.tema-elegante .header-nombre {
  grid-column: 2; grid-row: 1; font-size: 1.4rem; max-width: 100%; min-width: 0;
}
body.tema-elegante .header-acciones { grid-column: 3; grid-row: 1; justify-self: end; }
body.tema-elegante .header-buscador { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: 100%; max-width: 380px; }
body.tema-elegante .nav-cats { justify-content: center; gap: 1.5rem; }
body.tema-elegante .nav-cats__link { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; }

/* VIBRANTE — logo a la izquierda, navegación CENTRADA en pastillas. */
body.tema-vibrante .nav-cats { justify-content: center; gap: .4rem; }
body.tema-vibrante .nav-cats__link { border-radius: 999px; padding: .35rem .9rem; }
body.tema-vibrante .nav-cats__link.activo { background: var(--color-acento); color: #1f2937; }

/* OSCURO PRO — navegación alineada a la DERECHA (asimétrico, sobrio). */
body.tema-oscuro .nav-cats { justify-content: flex-end; }

/* TECH NEÓN — barra de nav ARRIBA tipo terminal, en condensada. */
body.tema-tech .header-tienda { display: flex; flex-direction: column; }
body.tema-tech .header-nav { order: -1; }
body.tema-tech .nav-cats__link { text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-family: 'Oswald', sans-serif; }


/* ════════════════════════════════════════════════════════════
   ELEGANTE — HOME "BOUTIQUE" (plantilla propia tienda/temas/elegante)
   ════════════════════════════════════════════════════════════ */
.bq-hero {
  position: relative; min-height: 74vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; background-size: cover; background-position: center;
}
.bq-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20,18,16,.42), rgba(20,18,16,.62)); }
.bq-hero__inner { position: relative; z-index: 1; max-width: 760px; padding: 2rem 1.25rem; }
.bq-hero__eyebrow { text-transform: uppercase; letter-spacing: .35em; font-size: .72rem; color: var(--color-acento); margin-bottom: 1.1rem; }
.bq-hero__title { font-family: 'Raleway', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.12; margin: 0; }
.bq-hero__rule { width: 64px; height: 2px; background: var(--color-acento); margin: 1.3rem auto; }
.bq-hero__sub { font-size: 1.05rem; opacity: .92; max-width: 520px; margin: 0 auto 1.9rem; }
.bq-hero__cta {
  display: inline-block; border: 1px solid #fff; color: #fff;
  text-transform: uppercase; letter-spacing: .18em; font-size: .74rem;
  padding: .85rem 2.1rem; transition: background .2s, color .2s, border-color .2s;
}
.bq-hero__cta:hover { background: var(--color-acento); border-color: var(--color-acento); color: #1c1c28; }

.bq-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; padding: 1.5rem 1.25rem; border-bottom: 1px solid #ece7df; background: var(--color-fondo); }
.bq-strip__item { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-texto); }
.bq-strip__item b { color: var(--color-acento); }

.bq-section { max-width: 1180px; margin: 0 auto; padding: 3.5rem 1.25rem; }
.bq-section__title { text-align: center; text-transform: uppercase; letter-spacing: .16em; font-weight: 600; font-size: 1.3rem; margin: 0; }
.bq-section__title::after { content: ""; display: block; width: 56px; height: 2px; background: var(--color-acento); margin: .8rem auto 0; }
.bq-section__sub { text-align: center; color: var(--color-texto); opacity: .6; margin: .6rem 0 2.2rem; font-size: .9rem; }

.bq-cats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #ece7df; border-left: 1px solid #ece7df; }
.bq-cat { display: flex; align-items: baseline; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid #ece7df; border-right: 1px solid #ece7df; color: var(--color-texto); transition: background .2s; }
.bq-cat:hover { background: #faf7f2; }
.bq-cat__num { font-family: 'Raleway', sans-serif; color: var(--color-acento); font-size: .85rem; letter-spacing: .1em; min-width: 1.8rem; }
.bq-cat__name { flex: 1; text-transform: uppercase; letter-spacing: .05em; font-size: .88rem; font-weight: 600; }
.bq-cat__count { opacity: .5; font-size: .78rem; }

.bq-products { padding: 0; }

@media (max-width: 640px) {
  .bq-cats { grid-template-columns: 1fr; }
  .bq-strip { gap: 1.2rem; }
}


/* ════════════════════════════════════════════════════════════
   MINIMALISTA — HOME EDITORIAL (sin hero de imagen)
   ════════════════════════════════════════════════════════════ */
.mn-hero { max-width: 760px; margin: 0 auto; padding: 5rem 1.25rem 2.5rem; text-align: center; }
.mn-hero__eyebrow { text-transform: uppercase; letter-spacing: .3em; font-size: .7rem; color: var(--color-primario); opacity: .7; margin-bottom: 1rem; }
.mn-hero__title { font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 0; color: var(--color-texto); }
.mn-hero__sub { font-size: 1.1rem; color: var(--color-texto); opacity: .6; margin: 1.2rem 0 1.8rem; }
.mn-hero__cta { font-size: .95rem; color: var(--color-primario); border-bottom: 1px solid var(--color-primario); padding-bottom: 2px; }
.mn-cats { max-width: 900px; margin: 0 auto; padding: 0 1.25rem 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.6rem; }
.mn-cat { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-texto); opacity: .6; }
.mn-cat:hover { opacity: 1; color: var(--color-primario); }
.mn-products { max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem 5rem; }


/* ════════════════════════════════════════════════════════════
   VIBRANTE — HOME MARKETPLACE (banner + chips + grilla)
   ════════════════════════════════════════════════════════════ */
.vb-hero { background: linear-gradient(120deg, var(--color-primario), var(--color-secundario)); color: #fff; text-align: center; padding: 3.5rem 1.25rem; }
.vb-hero__inner { max-width: 720px; margin: 0 auto; }
.vb-hero__badge { display: inline-block; background: rgba(255,255,255,.2); border-radius: 999px; padding: .25rem .9rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.vb-hero__title { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 800; text-transform: uppercase; margin: 0; line-height: 1.05; }
.vb-hero__sub { font-size: 1.05rem; opacity: .95; margin: .8rem 0 1.5rem; }
.vb-hero__cta { display: inline-block; background: var(--color-acento); color: #1f2937; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .85rem 2rem; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: transform .15s; }
.vb-hero__cta:hover { transform: translateY(-2px); }
.vb-chips-wrap { background: var(--color-fondo); border-bottom: 1px solid #eee; }
.vb-chips { max-width: 1180px; margin: 0 auto; display: flex; gap: .6rem; overflow-x: auto; padding: 1rem 1.25rem; scrollbar-width: none; }
.vb-chips::-webkit-scrollbar { display: none; }
.vb-chip { flex: 0 0 auto; display: flex; align-items: center; gap: .45rem; background: #fff; border: 2px solid #eee; border-radius: 999px; padding: .5rem 1rem; font-size: .82rem; font-weight: 600; color: var(--color-texto); white-space: nowrap; transition: border-color .2s, transform .1s; }
.vb-chip:hover { border-color: var(--color-primario); transform: translateY(-2px); }
.vb-chip__emoji { font-size: 1.05rem; }
.vb-products { max-width: 1180px; margin: 0 auto; padding: 2.2rem 1.25rem 4rem; }
.vb-title { font-size: 1.4rem; font-weight: 800; margin: 0 0 1.4rem; color: var(--color-texto); }


/* ════════════════════════════════════════════════════════════
   OSCURO PRO — HOME PREMIUM DARK (hero spotlight + features + cats)
   ════════════════════════════════════════════════════════════ */
.dk-hero { position: relative; min-height: 62vh; display: flex; align-items: center; background: #0b1322; background-size: cover; background-position: center; color: #fff; }
.dk-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 18% 28%, rgba(56,189,248,.18), transparent 60%), linear-gradient(rgba(8,12,20,.80), rgba(8,12,20,.90)); }
.dk-hero__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 2.5rem 1.25rem; width: 100%; }
.dk-hero__eyebrow { text-transform: uppercase; letter-spacing: .25em; font-size: .72rem; color: var(--color-primario); margin-bottom: 1rem; }
.dk-hero__title { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 700; margin: 0; line-height: 1.08; }
.dk-hero__sub { font-size: 1.05rem; color: #cbd5e1; max-width: 520px; margin: 1rem 0 1.8rem; }
.dk-hero__cta { display: inline-block; background: var(--color-primario); color: #0b1322; font-weight: 700; padding: .85rem 2rem; border-radius: 12px; box-shadow: 0 0 24px rgba(56,189,248,.4); transition: box-shadow .2s; }
.dk-hero__cta:hover { box-shadow: 0 0 34px rgba(56,189,248,.6); }
.dk-features { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.dk-feature { flex: 1; min-width: 180px; background: var(--color-fondo); padding: 1.3rem 1.5rem; }
.dk-feature b { display: block; color: var(--color-primario); font-size: .95rem; }
.dk-feature span { color: #94a3b8; font-size: .82rem; }
.dk-section { max-width: 1180px; margin: 0 auto; padding: 3rem 1.25rem; }
.dk-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 1.4rem; color: var(--color-texto); }
.dk-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.dk-cat { display: flex; align-items: center; gap: .7rem; background: var(--color-texto-inverso); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1rem; color: var(--color-texto); transition: border-color .2s, box-shadow .2s; }
.dk-cat:hover { border-color: var(--color-primario); box-shadow: 0 0 0 1px var(--color-primario); }
.dk-cat__emoji { font-size: 1.4rem; }
.dk-cat__name { flex: 1; font-weight: 600; font-size: .85rem; }
.dk-cat__count { color: #64748b; font-size: .78rem; }


/* ════════════════════════════════════════════════════════════
   TECH NEÓN — HOME DASHBOARD/HUD (status bar + hero partido)
   ════════════════════════════════════════════════════════════ */
.th-statusbar { background: #070b11; border-bottom: 1px solid rgba(34,211,238,.3); color: var(--color-primario); font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; padding: .5rem 1.25rem; text-align: center; }
.th-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primario); box-shadow: 0 0 8px var(--color-primario); vertical-align: middle; margin-right: .35rem; }
.th-sep { opacity: .4; margin: 0 .5rem; }
.th-hero { max-width: 1180px; margin: 0 auto; padding: 3rem 1.25rem; display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; }
.th-eyebrow { font-family: 'Oswald', sans-serif; color: var(--color-acento); letter-spacing: .15em; font-size: .8rem; margin-bottom: .8rem; }
.th-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin: 0; color: var(--color-texto); letter-spacing: .02em; }
.th-sub { color: #9fb0c3; margin: 1rem 0 1.6rem; max-width: 440px; }
.th-cta { display: inline-block; font-family: 'Oswald', sans-serif; letter-spacing: .1em; background: transparent; color: var(--color-primario); border: 1px solid var(--color-primario); padding: .7rem 1.8rem; text-transform: uppercase; transition: background .2s, color .2s, box-shadow .2s; }
.th-cta:hover { background: var(--color-primario); color: var(--color-texto-inverso); box-shadow: 0 0 18px rgba(34,211,238,.5); }
.th-hero__right { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.th-tag { border: 1px solid rgba(34,211,238,.3); border-left: 3px solid var(--color-primario); border-radius: 4px; padding: .7rem .8rem; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; color: var(--color-texto); background: var(--color-texto-inverso); transition: box-shadow .2s; }
.th-tag b { color: var(--color-primario); }
.th-tag:hover { box-shadow: -3px 0 0 var(--color-acento); }
.th-products { max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
.th-secttitle { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--color-texto); margin: 0 0 1.4rem; }
@media (max-width: 760px) { .th-hero { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════
   CORPORATIVO — HOME B2B (banner con buscador + líneas)
   ════════════════════════════════════════════════════════════ */
.cp-hero { background: linear-gradient(120deg, var(--color-primario), var(--color-secundario)); color: #fff; padding: 3.5rem 1.25rem; }
.cp-hero__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.cp-hero__title { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; margin: 0; }
.cp-hero__sub { opacity: .92; margin: .7rem 0 1.6rem; font-size: 1.02rem; }
.cp-hero__search { display: flex; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cp-hero__search input { flex: 1; border: none; padding: .9rem 1.1rem; font-size: .95rem; outline: none; color: #1a202c; }
.cp-hero__search button { border: none; background: var(--color-secundario); color: #fff; padding: 0 1.6rem; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; }
.cp-section { max-width: 1180px; margin: 0 auto; padding: 3rem 1.25rem; }
.cp-section--alt { background: #f4f6f9; max-width: none; }
.cp-section--alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.cp-title { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding-left: .7rem; border-left: 4px solid var(--color-primario); margin: 0 0 1.5rem; }
.cp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.cp-cat { display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 1px solid #e2e6ea; border-top: 3px solid var(--color-primario); border-radius: 6px; padding: 1.1rem; color: var(--color-texto); transition: box-shadow .2s, transform .15s; }
.cp-cat:hover { box-shadow: 0 6px 18px rgba(11,83,148,.12); transform: translateY(-3px); }
.cp-cat__emoji { font-size: 1.6rem; }
.cp-cat__name { font-weight: 600; }
.cp-cat__count { color: #6b7280; font-size: .78rem; }


/* ============================================================
   PRO v2 — TIPOGRAFÍA DE FIRMA + PULIDO PROFESIONAL
   Cada tema PRO fija su tipografía de identidad (independiente de
   la fuente que el usuario tenga guardada) y afina detalles para
   elevar el acabado y marcar diferencia entre temas. Cargado al
   final: gana en la cascada.
   ============================================================ */

/* ── MINIMALISTA · Swiss (Space Grotesk + Inter) ───────────── */
body.tema-minimalista { font-family: 'Inter', sans-serif; letter-spacing: -.005em; }
body.tema-minimalista h1, body.tema-minimalista h2, body.tema-minimalista h3,
body.tema-minimalista .mn-hero__title, body.tema-minimalista .seccion-titulo,
body.tema-minimalista .th-secttitle {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
body.tema-minimalista .header-tienda { border-bottom: 1px solid #ededed; box-shadow: none; }
body.tema-minimalista .mn-hero__title { letter-spacing: -.03em; }
body.tema-minimalista .mn-hero { padding-top: 6rem; }
body.tema-minimalista .nav-cats__link { font-size: .8rem; letter-spacing: .01em; }

/* ── CORPORATIVO · Confianza B2B (Lexend + Source Sans 3) ──── */
body.tema-corporativo { font-family: 'Source Sans 3', sans-serif; }
body.tema-corporativo h1, body.tema-corporativo h2, body.tema-corporativo h3,
body.tema-corporativo .seccion-titulo, body.tema-corporativo .cp-title,
body.tema-corporativo .cp-hero__title {
  font-family: 'Lexend', sans-serif; letter-spacing: -.01em;
}
body.tema-corporativo .cp-hero { background: linear-gradient(120deg, var(--color-primario), var(--color-secundario)); position: relative; }
body.tema-corporativo .cp-hero__title { font-weight: 700; }
body.tema-corporativo .nav-cats__link { font-weight: 600; }

/* ── ELEGANTE · Boutique editorial (Playfair Display + Inter) ─ */
body.tema-elegante { font-family: 'Inter', sans-serif; }
body.tema-elegante .bq-hero__title {
  font-family: 'Playfair Display', serif; font-weight: 600;
  text-transform: none; letter-spacing: .005em;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
}
body.tema-elegante .bq-section__title, body.tema-elegante .seccion-titulo {
  font-family: 'Playfair Display', serif; text-transform: none;
  letter-spacing: .01em; font-weight: 600; font-size: 1.7rem;
}
body.tema-elegante .header-nombre { font-family: 'Playfair Display', serif; text-transform: none; letter-spacing: .02em; font-weight: 600; }
body.tema-elegante .bq-hero__eyebrow { letter-spacing: .38em; }

/* ── VIBRANTE · Marketplace pop (Archivo + Poppins) ────────── */
body.tema-vibrante { font-family: 'Poppins', sans-serif; }
body.tema-vibrante h1, body.tema-vibrante h2, body.tema-vibrante h3,
body.tema-vibrante .vb-hero__title, body.tema-vibrante .vb-title,
body.tema-vibrante .seccion-titulo, body.tema-vibrante .header-nombre {
  font-family: 'Archivo', 'Poppins', sans-serif; font-weight: 800; letter-spacing: -.01em;
}
body.tema-vibrante .vb-hero { background: linear-gradient(120deg, var(--color-primario) 0%, var(--color-secundario) 100%); }
body.tema-vibrante .vb-hero__title { text-transform: uppercase; }

/* ── OSCURO PRO · Premium dark (Sora + Inter) ──────────────── */
body.tema-oscuro { font-family: 'Inter', sans-serif; }
body.tema-oscuro h1, body.tema-oscuro h2, body.tema-oscuro h3,
body.tema-oscuro .dk-hero__title, body.tema-oscuro .dk-title,
body.tema-oscuro .seccion-titulo {
  font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -.01em;
}
body.tema-oscuro .dk-hero__eyebrow { color: var(--color-primario); }
body.tema-oscuro .dk-feature b { color: var(--color-primario); }

/* ── TECH NEÓN · HUD (Oswald + Space Grotesk) ──────────────── */
body.tema-tech { font-family: 'Space Grotesk', sans-serif; }
body.tema-tech .tarjeta-producto__nombre, body.tema-tech .th-tag,
body.tema-tech .nav-cats__link { font-family: 'Space Grotesk', sans-serif; }
body.tema-tech .th-title, body.tema-tech .th-secttitle, body.tema-tech .th-eyebrow,
body.tema-tech .th-cta, body.tema-tech .th-statusbar, body.tema-tech .seccion-titulo,
body.tema-tech .tarjeta-producto__precio {
  font-family: 'Oswald', sans-serif;
}


/* ── Accesibilidad: respeta prefers-reduced-motion ─────────── */
@media (prefers-reduced-motion: reduce) {
  .tarjeta-producto, .btn-agregar-carrito,
  .tarjeta-producto:hover, .vb-hero__cta:hover, .dk-hero__cta:hover,
  .th-cta:hover, .bq-cat:hover, .cp-cat:hover, .vb-chip:hover {
    transition: none !important;
    transform: none !important;
  }
}


/* ════════════════════════════════════════════════════════════
   HOMES DE TEMA — PIEZAS QUE FALTABAN
   Clases que ya usan templates/tienda/temas/<tema>/inicio.html y que
   no tenian estilo: acciones del hero, cabeceras de seccion con
   enlace, CTA secundarios (--fantasma / --alt / --oscuro) y cierres.
   Cada bloque continua el lenguaje visual del tema al que pertenece.
   Va al final: gana en la cascada sobre las reglas de arriba.
   ════════════════════════════════════════════════════════════ */

/* ── ELEGANTE · boutique editorial ─────────────────────────── */
/* Todos los CTA del home elegante pasan a caja flex para que el
   objetivo tactil llegue a 44px sin tocar tipografia ni filete. */
.bq-hero__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.bq-hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; }

/* Secundario del hero: mismo trazo, mas discreto. Vive siempre sobre
   el velo oscuro del ::after del hero, por eso el blanco translucido. */
.bq-hero__cta--fantasma { border-color: rgba(255,255,255,.5); color: rgba(255,255,255,.9); }
.bq-hero__cta--fantasma:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* Version en tinta para fondo claro (pie de seccion, cierre y estado
   vacio): el borde sigue al texto del tema, el hover va al dorado. */
.bq-hero__cta--oscuro { border-color: currentColor; color: var(--color-texto, #26221E); }
.bq-hero__cta--oscuro:hover { background: var(--color-acento, #B08D57); border-color: var(--color-acento, #B08D57); color: #1c1c28; }

.bq-section--productos { padding-top: 2.6rem; }
.bq-section__pie { margin-top: 2.6rem; text-align: center; }
/* Hairline calculado sobre el texto del tema: funciona igual si el
   dueño deja el fondo crema o lo cambia por uno oscuro. */
.bq-section--pasos { border-top: 1px solid color-mix(in srgb, var(--color-texto, #26221E) 12%, transparent); }

.bq-cierre {
  border-top: 1px solid color-mix(in srgb, var(--color-texto, #26221E) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-texto, #26221E) 12%, transparent);
  background: color-mix(in srgb, var(--color-acento, #B08D57) 7%, var(--color-fondo, #FAF7F2));
}
.bq-cierre h2 { font-family: 'Playfair Display', serif; font-weight: 600; letter-spacing: .01em; }


/* ── MINIMALISTA · suizo, aire y filete corto ──────────────── */
.mn-hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 2.2rem; }
/* El CTA minimalista es un enlace subrayado: en vez de engordarlo con
   padding (que despegaria el subrayado del texto) se agranda el area
   de toque con una capa invisible de 44px centrada sobre el. */
.mn-hero__acciones .mn-hero__cta { position: relative; }
.mn-hero__acciones .mn-hero__cta::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
.mn-hero__cta--alt { color: var(--color-texto, #111827); border-bottom-color: currentColor; opacity: .6; }
.mn-hero__cta--alt:hover { opacity: 1; color: var(--color-primario, #111827); }

.mn-section { max-width: 1080px; margin: 0 auto; padding: 3.5rem 1.25rem; }
.mn-section--cats { padding-bottom: 2.6rem; }
/* .mn-cats ya traia su propio padding lateral: aqui sobra y duplicaria
   el margen en movil. */
.mn-section--cats .mn-cats { padding: 0; }
.mn-section--cats .mn-cat { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.mn-section--pasos { border-top: 1px solid color-mix(in srgb, var(--color-texto, #111827) 10%, transparent); }

.mn-section__head { text-align: center; margin-bottom: 2.2rem; }
/* Misma escala que .bq-section__title/__sub para no romper la jerarquia. */
.mn-section__title { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--color-texto, #111827); }
.mn-section__title::after { content: ""; display: block; width: 36px; height: 2px; background: var(--color-acento, #2563EB); margin: .55rem auto 0; }
.mn-section__sub { font-size: .9rem; color: var(--color-texto, #111827); opacity: .6; margin: .55rem 0 0; }

/* Variante en fila (titulo + enlace "ver todo"): el filete se alinea a
   la izquierda con el titulo en vez de quedar centrado. */
.mn-section__head--fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .9rem 1.5rem; text-align: left; }
.mn-section__head--fila .mn-section__title::after { margin-left: 0; margin-right: auto; }
.mn-section__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .82rem; color: var(--color-primario, #111827);
  text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px;
  transition: color .2s;
}
.mn-section__link:hover { color: var(--color-acento, #2563EB); }

.mn-cat__nombre { white-space: nowrap; }
.mn-cat__count { font-size: .7rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }


/* ── OSCURO PRO · premium dark con glow ────────────────────── */
.dk-hero__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.dk-hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem 1rem; }
/* Fantasma: el borde va por box-shadow inset para que mida EXACTAMENTE
   igual que el CTA relleno que tiene al lado. */
.dk-hero__cta--fantasma {
  background: transparent; color: var(--color-primario, #38BDF8);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primario, #38BDF8) 55%, transparent);
}
.dk-hero__cta--fantasma:hover {
  background: color-mix(in srgb, var(--color-primario, #38BDF8) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-primario, #38BDF8),
              0 0 22px color-mix(in srgb, var(--color-primario, #38BDF8) 35%, transparent);
}

.dk-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.2rem; margin-bottom: 1.4rem; }
.dk-section__head .dk-title { margin-bottom: 0; }
.dk-section__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .82rem; font-weight: 600; color: var(--color-primario, #38BDF8);
  transition: text-shadow .2s, color .2s;
}
.dk-section__link:hover { text-shadow: 0 0 12px color-mix(in srgb, var(--color-primario, #38BDF8) 60%, transparent); text-decoration: underline; text-underline-offset: .3em; }

/* Cierre: panel elevado con el mismo spotlight del hero. */
.dk-cierre {
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--color-primario, #38BDF8) 12%, transparent), transparent 62%),
    var(--color-texto-inverso, #1E293B);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}


/* ── TECH NEON · HUD ───────────────────────────────────────── */
/* Columna izquierda del hero partido: filete neon a la izquierda como
   las tarjetas y los tags. min-width:0 evita que un nombre largo
   reviente la grilla y provoque scroll horizontal en movil. */
.th-hero__left {
  min-width: 0; overflow-wrap: break-word;
  padding-left: 1.1rem;
  border-left: 2px solid color-mix(in srgb, var(--color-primario, #22D3EE) 45%, transparent);
}
.th-hero__left .th-cta { display: inline-flex; align-items: center; min-height: 44px; }


/* ── CORPORATIVO · B2B, filete izquierdo y mayusculas ──────── */
.cp-hero__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.6rem; margin-top: 1.1rem; }
/* Mismo enlace se reutiliza fuera del hero (cierre y estado vacio):
   por defecto va en el color primario y solo dentro del degradado
   del hero se pinta en blanco. */
.cp-hero__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .9rem; font-weight: 600; color: var(--color-primario, #1D4ED8);
  transition: background .2s, color .2s;
}
.cp-hero .cp-hero__link { color: #fff; }
.cp-hero__link:hover { text-decoration: underline; text-underline-offset: .3em; }
.cp-hero__link--boton {
  padding: 0 1.4rem;
  background: var(--color-primario, #1D4ED8);
  color: var(--color-texto-inverso, #fff);
  border-radius: var(--radio-borde, 6px);
  text-transform: uppercase; letter-spacing: .04em; font-size: .82rem;
}
.cp-hero__link--boton:hover { background: color-mix(in srgb, var(--color-primario, #1D4ED8) 85%, black); text-decoration: none; }

.cp-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; margin-bottom: 1.5rem; }
/* Dentro de la cabecera el titulo ya no carga el margen inferior. */
.cp-section__head .cp-title { margin-bottom: 0; }
.cp-section__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-primario, #1D4ED8);
  transition: color .2s;
}
.cp-section__link:hover { color: var(--color-secundario, #0F2A4A); text-decoration: underline; text-underline-offset: .3em; }


/* ── Foco visible en los CTA y enlaces de los homes ────────── */
.bq-hero__cta:focus-visible,
.mn-hero__cta:focus-visible, .mn-section__link:focus-visible, .mn-cat:focus-visible,
.dk-hero__cta:focus-visible, .dk-section__link:focus-visible,
.th-hero__left .th-cta:focus-visible,
.cp-hero__link:focus-visible, .cp-section__link:focus-visible {
  outline: 2px solid var(--color-acento, #F39C12);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .bq-hero__cta, .mn-section__link,
  .dk-hero__cta--fantasma, .dk-section__link,
  .cp-hero__link, .cp-section__link { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════
   PROMOCIONES POR TEMA
   El badge base es una pastilla en color acento. Cada tema lo reescribe con su
   propio lenguaje para que la oferta no parezca pegada desde fuera.
   ════════════════════════════════════════════════════════════ */

/* MINIMALISTA — sin pastilla: texto pequeno en la esquina, como una etiqueta
   de galeria. La tarjeta no tiene marco, un badge solido la ensuciaria. */
body.tema-minimalista .tarjeta-producto__oferta {
  background: transparent;
  color: var(--color-acento);
  box-shadow: none;
  padding: 0;
  top: 0.35rem;
  left: 0.35rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
}

/* CORPORATIVO — etiqueta rectangular con el filete del tema: ficha tecnica. */
body.tema-corporativo .tarjeta-producto__oferta {
  border-radius: 0 0 4px 0;
  top: 0; left: 0;
  padding: .25rem .6rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  box-shadow: none;
}

/* ELEGANTE — la info va SOBRE la imagen, asi que el badge se va arriba a la
   derecha para no chocar con el degradado, en dorado sobre negro. */
body.tema-elegante .tarjeta-producto__oferta {
  left: auto; right: .55rem;
  background: rgba(0, 0, 0, .75);
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  border-radius: 0;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* El precio tachado sobre el degradado necesita mas luz que el 55% base. */
body.tema-elegante .tarjeta-producto__precio-antes { color: rgba(255, 255, 255, .6); }

/* VIBRANTE — el precio ya vive en una pildora flotante arriba a la izquierda:
   el badge se va a la derecha y se agranda, que es el tono del tema. */
body.tema-vibrante .tarjeta-producto__oferta {
  left: auto; right: 10px;
  font-size: .8rem;
  font-weight: 800;
  padding: .25rem .7rem;
}

/* OSCURO PRO — glow en vez de sombra, como el resto del tema. */
body.tema-oscuro .tarjeta-producto__oferta {
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-acento) 55%, transparent);
}

/* TECH NEON — chip cuadrado con filete izquierdo y condensada, como .th-tag. */
body.tema-tech .tarjeta-producto__oferta {
  border-radius: 0;
  border-left: 3px solid var(--color-acento);
  background: var(--color-texto-inverso);
  color: var(--color-primario);
  font-family: 'Oswald', sans-serif;
  letter-spacing: .06em;
  box-shadow: none;
}


/* ════════════════════════════════════════════════════════════
   CLASICO — "MOSTRADOR DE BARRIO"
   Unico tema con aside persistente en el home. Nada de hero a sangre: la
   bienvenida es una caja contenida con doble filete, tipo letrero esmaltado.
   ════════════════════════════════════════════════════════════ */

/* --- Tipografia de firma: rotulo pintado sin caer en display --- */
body.tema-clasico { font-family: 'Open Sans', sans-serif; }
body.tema-clasico h1, body.tema-clasico h2, body.tema-clasico h3,
body.tema-clasico .cl-portada__titulo, body.tema-clasico .cl-seccion__titulo,
body.tema-clasico .seccion-titulo { font-family: 'Montserrat', sans-serif; }

/* --- Header: filete de acento y pestanas de archivador en la nav.
   El activo se pinta como una lengueta, no con el subrayado del base ni con
   las pildoras de vibrante ni el borde izquierdo de tech. --- */
body.tema-clasico .header-tienda { border-bottom: 3px solid var(--color-acento, #B07D2B); }
body.tema-clasico .nav-cats__link { border-radius: 4px 4px 0 0; }
body.tema-clasico .nav-cats__link.activo {
  background: var(--color-fondo, #F3F3F1);
  color: var(--color-texto, #1F2933);
}

/* --- Cinta superior --- */
.cl-cinta {
  background: var(--color-secundario, #243447);
  color: var(--color-texto-inverso, #fff);
  font-size: .78rem;
}
.cl-cinta__inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .3rem .6rem; padding-block: .4rem;
}
.cl-cinta__sep { opacity: .45; }

/* --- Portada --- */
.cl-portada-wrap { padding: 1.75rem 0 2.25rem; }
.cl-banda {
  height: 180px; background-size: cover; background-position: center;
  border-radius: var(--radio-borde, 4px) var(--radio-borde, 4px) 0 0;
}
/* Doble filete: el de fuera en el color primario y el interior separado con
   outline-offset. Es lo que da el aire de letrero esmaltado. */
.cl-portada {
  border: 2px solid var(--color-primario, #9E2B25);
  outline: 1px solid var(--color-primario, #9E2B25);
  outline-offset: 4px;
  padding: 2.25rem 1.5rem;
  text-align: center;
  background: color-mix(in srgb, var(--color-fondo, #F3F3F1) 60%, #fff);
}
.cl-banda + .cl-portada { border-top-width: 0; }
.cl-portada__eyebrow {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .18em;
  color: color-mix(in srgb, currentColor 60%, transparent); margin: 0 0 .7rem;
}
.cl-portada__titulo {
  margin: 0; font-weight: 700; letter-spacing: .02em;
  font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.15;
  font-variant-caps: small-caps;
}
.cl-portada__filete {
  display: block; width: 54px; height: 3px; margin: 1rem auto;
  background: var(--color-acento, #B07D2B);
}
.cl-portada__sub {
  max-width: 46ch; margin: 0 auto 1.6rem; font-size: 1rem; line-height: 1.55;
  color: color-mix(in srgb, currentColor 80%, transparent);
}
.cl-portada__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

/* --- Boton rectangular, sin redondear: este tema no es de pildoras --- */
.cl-btn {
  display: inline-block; padding: .7rem 1.6rem; border-radius: 3px;
  background: var(--color-primario, #9E2B25);
  color: var(--color-texto-inverso, #fff);
  border: 2px solid var(--color-primario, #9E2B25);
  font-weight: 600; font-size: .9rem; text-align: center;
  transition: background .18s, color .18s;
}
.cl-btn:hover { background: color-mix(in srgb, var(--color-primario, #9E2B25) 82%, #000); }
.cl-btn--linea { background: transparent; color: var(--color-primario, #9E2B25); }
.cl-btn--linea:hover {
  background: var(--color-primario, #9E2B25); color: var(--color-texto-inverso, #fff);
}
.cl-btn--bloque { display: block; width: 100%; margin-top: 1rem; }
.cl-btn:focus-visible { outline: 2px solid var(--color-acento, #B07D2B); outline-offset: 3px; }

/* --- Cuerpo a dos columnas: EL rasgo estructural del tema --- */
.cl-cuerpo {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding-bottom: 3rem;
}
.cl-lateral { position: sticky; top: 1rem; display: grid; gap: 1.25rem; }

.cl-ficha, .cl-menu {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-top: 3px solid var(--color-primario, #9E2B25);
  padding: 1.1rem;
  background: color-mix(in srgb, var(--color-fondo, #F3F3F1) 50%, #fff);
}
.cl-ficha__titulo {
  margin: 0 0 .8rem; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.cl-ficha__lista { margin: 0; font-size: .86rem; line-height: 1.5; }
.cl-ficha__lista dt {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, currentColor 55%, transparent); margin-top: .7rem;
}
.cl-ficha__lista dt:first-child { margin-top: 0; }
.cl-ficha__lista dd { margin: .1rem 0 0; }
.cl-ficha__lista a { color: var(--color-primario, #9E2B25); }

/* Menu de fonda: los puntos guia son un borde punteado que estira, asi el
   conteo queda alineado a la derecha sin tabular a mano. */
.cl-menu__lista { list-style: none; margin: 0; padding: 0; }
.cl-menu__item + .cl-menu__item { margin-top: .1rem; }
.cl-menu__item a {
  display: flex; align-items: baseline; gap: .4rem;
  padding: .4rem 0; font-size: .88rem;
  color: var(--color-texto, #1F2933);
}
.cl-menu__item a:hover .cl-menu__nombre { color: var(--color-primario, #9E2B25); }
.cl-menu__guia {
  flex: 1; border-bottom: 1px dotted color-mix(in srgb, currentColor 35%, transparent);
  transform: translateY(-.2rem);
}
.cl-menu__conteo { font-size: .78rem; font-weight: 700; color: var(--color-acento, #B07D2B); }

/* --- Secciones del contenido --- */
.cl-principal { display: grid; gap: 2.25rem; min-width: 0; }
.cl-seccion__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  padding-bottom: .5rem;
}
.cl-seccion__titulo {
  margin: 0; font-size: 1.15rem; font-weight: 700;
  font-variant-caps: small-caps; letter-spacing: .04em;
}
.cl-seccion__link {
  font-size: .82rem; font-weight: 600; white-space: nowrap;
  color: var(--color-primario, #9E2B25);
  border-bottom: 1px solid currentColor;
}

.cl-ayuda { border-top: 3px solid var(--color-acento, #B07D2B); }

/* --- TARJETA "ETIQUETA DE ESTANTE" ---
   Sin sombra en reposo y sin zoom de imagen (eso ya lo hacen otros temas): lo
   que cambia al pasar el cursor es el borde. Imagen 4/3 contenida, no 1:1
   recortada, para que la herramienta se vea entera. --- */
body.tema-clasico .tarjeta-producto {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 4px; box-shadow: none; background: #fff;
}
body.tema-clasico .tarjeta-producto:hover {
  transform: translateY(-2px);
  border-color: var(--color-primario, #9E2B25);
  box-shadow: 0 4px 14px rgba(31, 41, 51, .12);
}
body.tema-clasico .tarjeta-producto__imagen-link { aspect-ratio: 4 / 3; background: #fff; }
body.tema-clasico .tarjeta-producto__imagen-link img { object-fit: contain; padding: 8%; }
body.tema-clasico .tarjeta-producto:hover .tarjeta-producto__imagen-link img { transform: none; }
body.tema-clasico .tarjeta-producto__info { padding: .85rem; gap: .3rem; }
/* La marca sube ARRIBA del nombre, como chip: en una etiqueta de estante el
   fabricante es lo primero que busca el maestro. */
body.tema-clasico .tarjeta-producto__marca {
  order: -1;
  align-self: flex-start;
  background: color-mix(in srgb, currentColor 8%, transparent);
  padding: .1rem .45rem; border-radius: 2px;
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700;
}
body.tema-clasico .tarjeta-producto__nombre { font-weight: 600; font-size: .9rem; }
/* El precio en su propio bloque, separado por una linea punteada: es la lectura
   de la etiqueta, no un dato mas del parrafo. */
body.tema-clasico .tarjeta-producto__precio {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-top: .45rem; padding-top: .45rem;
  border-top: 1px dashed color-mix(in srgb, currentColor 28%, transparent);
  font-family: 'Montserrat', sans-serif; font-weight: 700;
}
body.tema-clasico .tarjeta-producto__precio small {
  font-weight: 400; color: color-mix(in srgb, currentColor 60%, transparent);
}
body.tema-clasico .btn-agregar-carrito { flex: 1; border-radius: 3px; font-weight: 600; }
/* Oferta: etiqueta rectangular pegada a la esquina, como un precio rebajado
   a mano sobre la etiqueta del estante. */
body.tema-clasico .tarjeta-producto__oferta {
  top: 0; left: 0; border-radius: 0 0 4px 0;
  font-family: 'Montserrat', sans-serif; box-shadow: none;
}
/* Recomendaciones: mismo lenguaje de ficha con filete superior. */
body.tema-clasico .reco-bloque {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-top: 3px solid var(--color-acento, #B07D2B);
  border-radius: 0;
  background: color-mix(in srgb, var(--color-fondo, #F3F3F1) 55%, #fff);
}
body.tema-clasico .reco-bloque__titulo { font-variant-caps: small-caps; letter-spacing: .04em; }

/* --- Movil: el aside se desmonta y va arriba, compacto --- */
@media (max-width: 900px) {
  .cl-cuerpo { grid-template-columns: 1fr; gap: 1.5rem; }
  .cl-lateral { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cl-lateral { grid-template-columns: 1fr; }
  .cl-portada { padding: 1.6rem 1rem; outline-offset: 3px; }
  .cl-banda { height: 130px; }
  .cl-portada__acciones .cl-btn { flex: 1 1 100%; }
}


/* ════════════════════════════════════════════════════════════
   MODERNO — "ESCAPARATE CONTEMPORANEO"
   Ritmo de bloques distintos en vez de pila de rejillas. Unico tema con hero
   partido sobre fondo claro, pistas horizontales de PRODUCTOS y mosaico bento.
   ════════════════════════════════════════════════════════════ */

body.tema-moderno { font-family: 'Inter', sans-serif; letter-spacing: -.005em; }
body.tema-moderno h1, body.tema-moderno h2, body.tema-moderno h3,
body.tema-moderno .md-hero__titulo, body.tema-moderno .md-seccion__titulo,
body.tema-moderno .seccion-titulo {
  font-family: 'Poppins', 'Inter', sans-serif; letter-spacing: -.02em;
}
/* Header con sombra suave en vez de filete duro: el tema va de superficies. */
body.tema-moderno .header-tienda { box-shadow: 0 1px 3px rgba(15, 23, 42, .10); }
body.tema-moderno .nav-cats__link { border-radius: 8px; font-size: .82rem; }

/* --- HERO PARTIDO 55/45 --- */
.md-hero { padding: 3rem 0 2.5rem; }
.md-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.md-hero__eyebrow {
  margin: 0 0 .8rem; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--color-primario, #2563EB);
}
.md-hero__titulo {
  margin: 0; font-weight: 700; line-height: 1.08;
  font-size: clamp(2rem, 5.5vw, 3.2rem);
}
.md-hero__sub {
  margin: 1rem 0 1.6rem; max-width: 46ch; font-size: 1.05rem; line-height: 1.55;
  color: color-mix(in srgb, currentColor 72%, transparent);
}
/* Buscador en pildora grande: el gesto que el cliente ya conoce del celular. */
.md-buscador {
  display: flex; max-width: 460px; margin-bottom: 1.25rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 999px; overflow: hidden; background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.md-buscador:focus-within {
  border-color: var(--color-primario, #2563EB);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primario, #2563EB) 18%, transparent);
}
.md-buscador input {
  flex: 1; min-width: 0; border: none; outline: none;
  padding: .8rem 1.2rem; font-family: inherit; font-size: .95rem; color: #0f172a;
}
.md-buscador button {
  border: none; cursor: pointer; padding: 0 1.4rem; font-family: inherit;
  font-weight: 600; font-size: .9rem;
  background: var(--color-primario, #2563EB); color: var(--color-texto-inverso, #fff);
}
.md-hero__acciones { display: flex; flex-wrap: wrap; gap: .7rem; }

.md-btn {
  display: inline-block; padding: .75rem 1.6rem; border-radius: 999px;
  background: var(--color-primario, #2563EB); color: var(--color-texto-inverso, #fff);
  border: 1px solid var(--color-primario, #2563EB);
  font-weight: 600; font-size: .9rem; text-align: center;
  transition: transform .15s, box-shadow .18s, background .18s;
}
.md-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .16); }
.md-btn--linea { background: transparent; color: var(--color-primario, #2563EB); }
.md-btn--claro {
  background: var(--color-texto-inverso, #fff); color: var(--color-primario, #2563EB);
  border-color: var(--color-texto-inverso, #fff);
}
.md-btn--fantasma {
  background: transparent; color: var(--color-texto-inverso, #fff);
  border-color: color-mix(in srgb, var(--color-texto-inverso, #fff) 55%, transparent);
}
.md-btn:focus-visible { outline: 2px solid var(--color-acento, #F59E0B); outline-offset: 3px; }

/* Mosaico del hero: la primera foto ocupa las dos filas. */
.md-hero__mosaico {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .75rem;
  aspect-ratio: 1;
}
.md-hero__celda {
  overflow: hidden; border-radius: 14px;
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.md-hero__celda:first-child { grid-row: span 2; }
.md-hero__celda img { width: 100%; height: 100%; object-fit: cover; display: block; }

.md-hero__panel {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 14px; padding: 1.25rem;
  background: color-mix(in srgb, var(--color-primario, #2563EB) 5%, transparent);
}
.md-hero__panel-titulo {
  margin: 0 0 .6rem; font-size: .76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.md-hero__panel-lista { list-style: none; margin: 0; padding: 0; }
.md-hero__panel-lista a {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .5rem 0; font-size: .9rem; font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  color: var(--color-texto, #0f172a);
}
.md-hero__panel-lista a span { color: color-mix(in srgb, currentColor 50%, transparent); }
.md-hero__panel-lista li:last-child a { border-bottom: none; }

/* --- Datos reales en tarjetas planas --- */
.md-tiras { border-block: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.md-tiras__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px; padding-block: 0;
}
.md-tira {
  padding: 1.1rem .25rem; display: grid; gap: .15rem;
  box-shadow: 1px 0 0 color-mix(in srgb, currentColor 12%, transparent);
}
.md-tira:last-child { box-shadow: none; }
.md-tira b {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-primario, #2563EB);
}
.md-tira span { font-size: .88rem; color: color-mix(in srgb, currentColor 78%, transparent); }

/* --- Secciones --- */
.md-seccion { padding: 3rem 0; }
.md-seccion--alt { background: color-mix(in srgb, currentColor 4%, transparent); }
.md-seccion__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.md-seccion__titulo { margin: 0; font-size: clamp(1.25rem, 3.5vw, 1.6rem); font-weight: 700; }
.md-seccion__link {
  font-size: .85rem; font-weight: 600; white-space: nowrap;
  color: var(--color-primario, #2563EB);
}
.md-seccion__link:hover { text-decoration: underline; }

/* --- PISTA HORIZONTAL DE PRODUCTOS ---
   El rasgo que ningun otro tema tiene: los productos se recorren deslizando,
   no en rejilla. En escritorio tambien, para que el ritmo sea el mismo.
   overscroll-behavior-x evita secuestrar el gesto de "atras" del navegador. --- */
.md-pista {
  display: flex; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.md-pista::-webkit-scrollbar { display: none; }
.md-pista__item { flex: 0 0 240px; scroll-snap-align: start; min-width: 0; }

/* --- MOSAICO BENTO DE CATEGORIAS --- */
.md-bento {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: .85rem;
}
.md-bento__celda {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: .15rem; min-height: 128px; padding: 1rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-primario, #2563EB) 8%, transparent);
  color: var(--color-texto, #0f172a);
  transition: transform .18s, box-shadow .18s;
}
.md-bento__celda:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 23, 42, .14); }
.md-bento__celda--grande { grid-column: span 2; grid-row: span 2; min-height: 272px; }
/* El emoji grande y translucido hace de textura de fondo, no de icono. */
.md-bento__emoji {
  position: absolute; top: -.35em; right: -.1em;
  font-size: 4.5rem; line-height: 1; opacity: .16;
  pointer-events: none;
}
.md-bento__celda--grande .md-bento__emoji { font-size: 8rem; }
.md-bento__nombre { font-weight: 700; font-size: .95rem; }
.md-bento__conteo { font-size: .78rem; color: color-mix(in srgb, currentColor 60%, transparent); }

/* --- Cierre a todo el ancho en color primario --- */
.md-cierre {
  background: var(--color-primario, #2563EB);
  color: var(--color-texto-inverso, #fff);
  padding: 2.75rem 0;
}
.md-cierre__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
.md-cierre h2 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 4vw, 1.7rem); }
.md-cierre p { margin: 0; opacity: .9; }
.md-cierre__acciones { display: flex; flex-wrap: wrap; gap: .7rem; }

/* --- TARJETA FLOTANTE SIN MARCO ---
   Ni borde ni fondo: solo la sombra al pasar. Es la unica tarjeta del sistema
   que se apoya en la sombra y no en el marco. --- */
body.tema-moderno .tarjeta-producto {
  border: none; background: transparent; box-shadow: none;
  border-radius: 16px; overflow: hidden;
}
body.tema-moderno .tarjeta-producto:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
}
body.tema-moderno .tarjeta-producto__imagen-link {
  aspect-ratio: 1; border-radius: 16px;
  background: color-mix(in srgb, currentColor 5%, transparent);
}
body.tema-moderno .tarjeta-producto__info { padding: .8rem .25rem 0; gap: .25rem; }
body.tema-moderno .tarjeta-producto__nombre { font-weight: 600; font-size: .9rem; }
body.tema-moderno .tarjeta-producto__marca {
  font-size: .7rem; color: color-mix(in srgb, currentColor 55%, transparent);
}
body.tema-moderno .tarjeta-producto__precio { font-weight: 700; font-size: 1.05rem; }
body.tema-moderno .btn-agregar-carrito {
  flex: 1; border-radius: 999px; font-weight: 600; font-size: .8rem;
}
body.tema-moderno .btn-wa-tarjeta { border-radius: 999px; }
/* Oferta: pildora redonda, coherente con los botones del tema. */
body.tema-moderno .tarjeta-producto__oferta {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
  font-size: .74rem;
}
/* Recomendaciones: tarjeta redondeada sin borde, como el resto del tema. */
body.tema-moderno .reco-bloque {
  border: none; border-radius: 20px;
  background: color-mix(in srgb, var(--color-primario, #2563EB) 6%, transparent);
}

@media (max-width: 900px) {
  .md-hero__inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .md-hero__mosaico { aspect-ratio: 16 / 9; }
  .md-bento__celda--grande { grid-column: span 2; grid-row: auto; min-height: 128px; }
}
@media (max-width: 640px) {
  .md-hero { padding-top: 2rem; }
  .md-pista__item { flex-basis: 68%; }
  .md-bento { grid-template-columns: 1fr 1fr; }
  .md-bento__celda--grande { grid-column: span 2; }
  .md-cierre__inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .md-pista { scroll-behavior: auto; }
  .md-btn:hover, .md-bento__celda:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════
   INDUSTRIAL — "DEPOSITO / LISTA DE PRECIOS"
   Unico tema DENSO: filas de referencias con precio y unidad tabulados, no
   vitrina de fotos. Oscuro MATE, sin glow: el territorio con brillos ya lo
   ocupan los temas oscuro y tech.
   ════════════════════════════════════════════════════════════ */

body.tema-industrial { font-family: 'Roboto', sans-serif; }
body.tema-industrial h1, body.tema-industrial h2, body.tema-industrial h3,
body.tema-industrial .in-cabezal__titulo, body.tema-industrial .in-titulo,
body.tema-industrial .seccion-titulo {
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  text-transform: uppercase; letter-spacing: .04em;
}
/* Header con filete de acento grueso, tipo cinta de seguridad. */
body.tema-industrial .header-tienda { border-bottom: 4px solid var(--color-acento, #F0A500); }
body.tema-industrial .nav-cats__link {
  font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .05em; font-size: .8rem;
}

/* --- Cabezal: fondo plano oscuro con franja diagonal de seguridad --- */
.in-cabezal {
  position: relative; overflow: hidden;
  background: var(--color-secundario, #2B2B2B);
  color: var(--color-texto-inverso, #fff);
  padding: 2.5rem 0;
}
/* Franja diagonal: el rayado amarillo/negro de una bodega. Decorativa. */
.in-cabezal__franja {
  position: absolute; inset: 0 0 auto 0; height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-acento, #F0A500) 0 14px,
    transparent 14px 28px
  );
}
.in-cabezal__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 2rem; align-items: end;
}
.in-cabezal__eyebrow {
  margin: 0 0 .5rem; font-family: 'Roboto Condensed', sans-serif;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--color-acento, #F0A500);
}
.in-cabezal__titulo {
  margin: 0; font-weight: 700; line-height: 1.05;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
}
.in-cabezal__sub {
  margin: .7rem 0 0; max-width: 48ch; font-size: .98rem;
  color: color-mix(in srgb, var(--color-texto-inverso, #fff) 78%, transparent);
}
/* Buscador rectangular: en un deposito se busca referencia, no se navega. */
.in-busca { display: flex; border: 2px solid var(--color-acento, #F0A500); }
.in-busca input {
  flex: 1; min-width: 0; border: none; outline: none;
  padding: .8rem 1rem; font-family: inherit; font-size: .95rem;
  background: #fff; color: #2B2B2B;
}
.in-busca button {
  border: none; cursor: pointer; padding: 0 1.4rem;
  font-family: 'Roboto Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; font-size: .85rem;
  background: var(--color-acento, #F0A500); color: #2B2B2B;
}

/* --- Cifras: solo lo que sale de la base o de la configuracion --- */
.in-cifras {
  background: color-mix(in srgb, currentColor 6%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.in-cifras__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1px;
}
.in-cifra {
  padding: 1rem .25rem; display: grid; gap: .1rem;
  box-shadow: 1px 0 0 color-mix(in srgb, currentColor 14%, transparent);
}
.in-cifra:last-child { box-shadow: none; }
.in-cifra b {
  font-family: 'Roboto Condensed', sans-serif; font-size: 1.6rem; line-height: 1;
  color: var(--color-primario, #D35400);
}
.in-cifra--texto b {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
}
.in-cifra span { font-size: .8rem; color: color-mix(in srgb, currentColor 68%, transparent); }

/* --- Cuerpo y secciones --- */
.in-cuerpo { display: grid; gap: 2.5rem; padding: 2.5rem 0 3rem; }
.in-seccion { min-width: 0; }
.in-seccion__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.in-titulo {
  margin: 0 0 1rem; font-size: 1.1rem; font-weight: 700;
  padding-left: .65rem; border-left: 4px solid var(--color-primario, #D35400);
}
.in-link {
  font-family: 'Roboto Condensed', sans-serif; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-primario, #D35400);
}

.in-btn {
  display: inline-block; padding: .7rem 1.5rem; border-radius: 2px;
  background: var(--color-primario, #D35400); color: var(--color-texto-inverso, #fff);
  border: 2px solid var(--color-primario, #D35400);
  font-family: 'Roboto Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
}
.in-btn--linea { background: transparent; color: var(--color-primario, #D35400); }
.in-btn--linea:hover { background: var(--color-primario, #D35400); color: var(--color-texto-inverso, #fff); }
.in-btn:focus-visible { outline: 2px solid var(--color-acento, #F0A500); outline-offset: 3px; }

/* --- Indice numerado a dos columnas, como tabla de contenido tecnica --- */
.in-indice {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 2.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.in-indice__item { break-inside: avoid; }
.in-indice__item a {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .55rem .25rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  color: var(--color-texto, #1F1F1F);
}
.in-indice__item a:hover { background: color-mix(in srgb, currentColor 5%, transparent); }
.in-indice__num {
  font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: .8rem;
  color: var(--color-acento, #F0A500);
}
.in-indice__nombre { flex: 1; font-size: .9rem; font-weight: 500; }
.in-indice__conteo {
  font-family: 'Roboto Condensed', sans-serif; font-size: .8rem;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-variant-numeric: tabular-nums;
}

.in-cierre { border-top: 4px solid var(--color-acento, #F0A500); }

/* --- FILA DE REFERENCIA ---
   Densidad: miniatura pequena a la izquierda, datos tabulados a la derecha. El
   precio en cifras tabulares para que las columnas se lean verticalmente, que
   es como compara precios un maestro de obra. --- */
.in-lista { gap: 0; border-top: 2px solid color-mix(in srgb, currentColor 20%, transparent); }
body.tema-industrial .productos-lista .tarjeta-producto {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: .6rem .25rem;
}
body.tema-industrial .productos-lista .tarjeta-producto:hover {
  transform: none;
  background: color-mix(in srgb, var(--color-acento, #F0A500) 10%, transparent);
}
body.tema-industrial .productos-lista .tarjeta-producto__imagen-link {
  max-height: 72px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  background: #fff;
}
body.tema-industrial .productos-lista .tarjeta-producto__imagen-link img {
  height: 100%; object-fit: contain; padding: 6%;
}
body.tema-industrial .productos-lista .tarjeta-producto:hover .tarjeta-producto__imagen-link img { transform: none; }
/* La info se tabula: nombre elastico, precio y boton a la derecha. */
body.tema-industrial .productos-lista .tarjeta-producto__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .25rem 1rem;
  padding: 0;
}
body.tema-industrial .productos-lista .tarjeta-producto__nombre {
  grid-column: 1; font-size: .9rem; font-weight: 500;
}
body.tema-industrial .productos-lista .tarjeta-producto__marca {
  grid-column: 1; grid-row: 2;
  font-family: 'Roboto Condensed', sans-serif; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
body.tema-industrial .productos-lista .tarjeta-producto__precio {
  grid-column: 2; grid-row: 1 / span 2;
  margin: 0; text-align: right; white-space: nowrap;
  font-family: 'Roboto Condensed', sans-serif; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primario, #D35400);
}
body.tema-industrial .productos-lista .tarjeta-producto__precio small {
  display: block; font-size: .7rem; font-weight: 400;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
body.tema-industrial .productos-lista .tarjeta-producto__stock {
  grid-column: 1; grid-row: 3; font-size: .72rem;
}
body.tema-industrial .productos-lista .tarjeta-producto__btns {
  grid-column: 3; grid-row: 1 / span 2; margin: 0;
}
body.tema-industrial .btn-agregar-carrito {
  border-radius: 2px; font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700;
}
/* En rejilla (catalogo con layout grid) la tarjeta sigue siendo sobria: marco
   fino, sin sombra, precio condensado. */
body.tema-industrial .tarjeta-producto {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 2px; box-shadow: none;
}
body.tema-industrial .tarjeta-producto:hover {
  border-color: var(--color-primario, #D35400);
  transform: none;
  box-shadow: inset 0 0 0 1px var(--color-primario, #D35400);
}
body.tema-industrial .tarjeta-producto__precio {
  font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 1.15rem;
  font-variant-numeric: tabular-nums; color: var(--color-primario, #D35400);
}
/* Oferta: etiqueta cuadrada con el rayado de seguridad debajo. */
body.tema-industrial .tarjeta-producto__oferta {
  border-radius: 0; top: 0; left: 0;
  font-family: 'Roboto Condensed', sans-serif; font-weight: 700;
  letter-spacing: .04em; box-shadow: none;
  color: #2B2B2B;
}
/* Recomendaciones: cuadro tecnico con filete izquierdo. */
body.tema-industrial .reco-bloque {
  border-radius: 0; border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-left: 4px solid var(--color-acento, #F0A500);
  background: color-mix(in srgb, currentColor 4%, transparent);
}
body.tema-industrial .reco-bloque__titulo {
  font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em;
}

@media (max-width: 860px) {
  .in-cabezal__inner { grid-template-columns: 1fr; align-items: start; }
  .in-indice { columns: 1; }
}
@media (max-width: 640px) {
  /* En movil la fila se comprime: el precio baja bajo el nombre y el boton
     ocupa el ancho, porque tres columnas no caben sin apretar los toques. */
  body.tema-industrial .productos-lista .tarjeta-producto__info {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body.tema-industrial .productos-lista .tarjeta-producto__precio {
    grid-column: 2; grid-row: 1 / span 2; font-size: 1rem;
  }
  body.tema-industrial .productos-lista .tarjeta-producto__btns {
    grid-column: 1 / -1; grid-row: auto; margin-top: .4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.tema-industrial .tarjeta-producto:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════
   NATURAL — "CASA, JARDIN Y TALLER"
   Unico tema que organiza POR TAREA y no por categoria de producto. Formas
   redondas y generosas, mucho aire. Nadie mas usa esquinas organicas
   (border-radius asimetrico) ni agrupacion por intencion.
   ════════════════════════════════════════════════════════════ */

body.tema-natural { font-family: 'Nunito', sans-serif; }
body.tema-natural h1, body.tema-natural h2, body.tema-natural h3,
body.tema-natural .na-titulo, body.tema-natural .na-seccion__titulo,
body.tema-natural .seccion-titulo {
  font-family: 'Raleway', 'Nunito', sans-serif; font-weight: 700; letter-spacing: -.01em;
}
body.tema-natural .header-tienda { box-shadow: 0 2px 12px rgba(60, 74, 51, .10); }
body.tema-natural .nav-cats__link { border-radius: 999px; font-size: .84rem; }

/* --- Bienvenida con esquinas organicas: el rasgo formal del tema --- */
.na-bienvenida {
  position: relative;
  background: color-mix(in srgb, var(--color-primario, #4F6F52) 10%, transparent);
  border-radius: 0 0 48px 12px;
  padding: 3rem 0 3.25rem;
  overflow: hidden;
  text-align: center;
}
/* Si hay banner va como lamina tenue de fondo, nunca a plena opacidad: el texto
   tiene que seguir legible con cualquier foto que suba el ferretero. */
.na-bienvenida__foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .22;
}
.na-bienvenida__inner { position: relative; }
.na-eyebrow {
  margin: 0 0 .7rem; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--color-primario, #4F6F52);
}
.na-titulo {
  margin: 0; line-height: 1.1;
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
}
.na-sub {
  max-width: 48ch; margin: 1rem auto 1.7rem;
  font-size: 1.05rem; line-height: 1.6;
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.na-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

.na-btn {
  display: inline-block; padding: .8rem 1.9rem; border-radius: 999px;
  background: var(--color-primario, #4F6F52); color: var(--color-texto-inverso, #fff);
  border: 2px solid var(--color-primario, #4F6F52);
  font-weight: 700; font-size: .92rem; text-align: center;
  transition: transform .16s, box-shadow .18s;
}
.na-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 74, 51, .18); }
.na-btn--suave {
  background: transparent; color: var(--color-primario, #4F6F52);
}
.na-btn:focus-visible { outline: 2px solid var(--color-acento, #C7873E); outline-offset: 3px; }

/* --- Cinta de datos reales --- */
.na-cinta { padding: .9rem 0; }
.na-cinta__inner {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem;
  font-size: .85rem;
}
.na-cinta__dato {
  padding: .3rem .9rem; border-radius: 999px;
  background: color-mix(in srgb, var(--color-acento, #C7873E) 14%, transparent);
  color: color-mix(in srgb, currentColor 82%, transparent);
}

/* --- Secciones con mucho aire --- */
.na-cuerpo { display: grid; gap: 3.25rem; padding: 2.5rem 0 3.5rem; }
.na-seccion { min-width: 0; }
.na-seccion__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.na-seccion__titulo { margin: 0; font-size: clamp(1.3rem, 3.5vw, 1.7rem); }
.na-link {
  font-size: .86rem; font-weight: 700;
  color: var(--color-primario, #4F6F52);
  border-bottom: 2px solid color-mix(in srgb, var(--color-acento, #C7873E) 60%, transparent);
}

/* --- AGRUPACION POR TAREA: lo que ningun otro tema hace --- */
.na-tareas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.na-tarea {
  padding: 1.35rem;
  border-radius: 24px 8px 24px 8px;   /* esquinas organicas, alternas */
  background: color-mix(in srgb, var(--color-primario, #4F6F52) 7%, transparent);
}
.na-tarea__titulo {
  margin: 0 0 .8rem; font-size: 1rem;
  color: var(--color-primario, #4F6F52);
}
.na-tarea__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.na-tarea__lista a {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 999px;
  font-size: .9rem; color: var(--color-texto, #2F3A2C);
  transition: background .16s;
}
.na-tarea__lista a:hover { background: color-mix(in srgb, #fff 70%, transparent); }
.na-tarea__lista em {
  margin-left: auto; font-style: normal; font-size: .78rem; font-weight: 700;
  color: color-mix(in srgb, currentColor 50%, transparent);
}

.na-cierre { border-radius: 48px 12px 0 0; }

/* --- TARJETA REDONDA Y AIREADA ---
   Fondo blanco con esquinas muy redondeadas y la imagen contenida sobre un
   tono claro: los productos de casa y jardin se ven mejor enteros que
   recortados. Sin marco: separa por color de fondo. --- */
body.tema-natural .tarjeta-producto {
  border: none; border-radius: 22px; overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(60, 74, 51, .08);
}
body.tema-natural .tarjeta-producto:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(60, 74, 51, .16);
}
body.tema-natural .tarjeta-producto__imagen-link {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--color-primario, #4F6F52) 8%, transparent);
}
body.tema-natural .tarjeta-producto__imagen-link img { object-fit: contain; padding: 10%; }
body.tema-natural .tarjeta-producto__info { padding: .9rem 1rem 1rem; gap: .3rem; }
body.tema-natural .tarjeta-producto__nombre { font-weight: 700; font-size: .9rem; }
body.tema-natural .tarjeta-producto__marca {
  font-size: .72rem; color: color-mix(in srgb, currentColor 55%, transparent);
}
body.tema-natural .tarjeta-producto__precio {
  font-weight: 800; font-size: 1.05rem; color: var(--color-primario, #4F6F52);
}
body.tema-natural .btn-agregar-carrito {
  flex: 1; border-radius: 999px; font-weight: 700; font-size: .82rem;
}
body.tema-natural .btn-wa-tarjeta { border-radius: 999px; }
/* Oferta: pildora en acento calido, redonda como todo el tema. */
body.tema-natural .tarjeta-producto__oferta {
  font-weight: 800; box-shadow: 0 3px 10px rgba(60, 74, 51, .18);
}
/* Recomendaciones: caja organica, coherente con los grupos de tarea. */
body.tema-natural .reco-bloque {
  border: none; border-radius: 24px 8px 24px 8px;
  background: color-mix(in srgb, var(--color-primario, #4F6F52) 7%, transparent);
}

@media (max-width: 640px) {
  .na-bienvenida { border-radius: 0 0 32px 8px; padding: 2.25rem 0 2.5rem; }
  .na-cierre { border-radius: 32px 8px 0 0; }
  .na-acciones .na-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .na-btn:hover, body.tema-natural .tarjeta-producto:hover { transform: none; }
}