/* =================================================================
   STELLARIA — Design tokens
   Estos valores son el default del theme "minimalist" (el default del
   Catalog Engine, ver "Sistema de temas" más abajo). app.js los
   sobreescribe por tenant vía tenant.branding usando
   document.documentElement.style.setProperty SOLO cuando el tenant trae
   ese valor explícitamente — ver applyBranding() en app.js. Jerarquía:
   theme defaults (aquí y en cada bloque [data-theme]) → branding del
   tenant (inline, siempre gana) → lo que finalmente leen los componentes.
   Ningún componente nuevo debe usar colores fijos si puede usar un token.
================================================================== */
:root {
  --color-primary: #71806a;
  --color-secondary: #9dae95;
  --color-background: #f7f5f0;
  --color-surface: #ffffff;
  --color-text: #171716;
  --color-text-muted: #77746d;
  --color-border: #dedcd5;

  --color-primary-contrast: #ffffff;

  --font-heading: "DM Serif Display", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --shadow-sm: none;
  --shadow-md: 0 20px 40px -20px rgba(15, 32, 25, 0.18);

  /* Tokens de superficies "glass" — sin efecto por default; los temas
     glassmorphism y liquidglass los redefinen (ver más abajo). */
  --glass-blur: 0px;
  --glass-bg: var(--color-surface);
  --glass-border: var(--color-border);

  --max-width: 1440px;
  --transition: 180ms ease;
}

/* =================================================================
   Base
================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

body.no-scroll {
  overflow: hidden;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------
   Estado de carga (#appLoading) — neutro, marca Stellaria, nunca
   datos de tenant. Ver "CAMBIO 1" en app.js: gatea la visibilidad de
   TODO el sitio hasta que el tenant correcto esté completamente
   resuelto, así nunca hay flash de contenido genérico ni incorrecto.
------------------------------------------------------------------ */
body.is-loading .site-header,
body.is-loading .hero,
body.is-loading .category-nav,
body.is-loading .catalog,
body.is-loading .site-footer {
  display: none;
}

.app-loading {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #10171a;
  color: #f6f8f7;
  text-align: center;
  padding: 24px;
}

.app-loading[hidden] {
  display: none;
}

.app-loading__mark {
  display: flex;
  gap: 7px;
}

.app-loading__mark span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3e9b79;
  animation: app-loading-pulse 1.1s ease-in-out infinite;
}

.app-loading__mark span:nth-child(2) {
  animation-delay: 0.15s;
}

.app-loading__mark span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes app-loading-pulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

.app-loading__text {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(246, 248, 247, 0.72);
}

.app-loading--error .app-loading__mark {
  display: none;
}

.app-loading--error .app-loading__text {
  color: #f6f8f7;
  max-width: 34ch;
}

.app-loading__retry {
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .app-loading__mark span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------------------------------------------
   Botones (reutilizados en welcome overlay, hero, etc.)
------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn-primary:hover {
  transform: translateY(-1px);
}

/* =================================================================
   Welcome overlay
================================================================== */
.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--color-background);
  opacity: 1;
  transition: opacity 320ms ease;
}

.welcome-overlay[hidden] {
  display: none;
}

.welcome-overlay.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.welcome-card {
  max-width: 420px;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.welcome-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
}

.welcome-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 6vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
}

.welcome-tagline {
  margin: 10px 0 26px;
  color: var(--color-text-muted);
  max-width: 40ch;
}

/* =================================================================
   Header
================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.site-header__logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.site-header__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.search-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.search-toggle:hover {
  border-color: var(--color-primary);
}

.search-toggle[aria-expanded="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.search-bar {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 14px;
}

.search-bar input {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}

.search-bar input:focus {
  border-color: var(--color-primary);
}

/* =================================================================
   Hero
================================================================== */
.hero {
  position: relative;
  min-height: 55vh;
  min-height: 55svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Sin heroImageUrl: color sólido, sin degradado. */
  background: var(--color-primary);
}

@media (min-width: 700px) {
  .hero {
    min-height: 68vh;
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* El overlay oscuro (para legibilidad del texto) solo aplica cuando SÍ
   hay una imagen de fondo real — app.js agrega esta clase en ese caso. */
.hero__media.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.55) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px 44px;
  color: #fff;
}

.hero__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
}

.hero__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  line-height: 1.06;
  max-width: 16ch;
}

.hero__tagline {
  margin: 14px 0 26px;
  max-width: 46ch;
  font-size: 1.05rem;
  opacity: 0.92;
}

.hero__cta {
  background: #fff;
  color: var(--color-primary);
}

/* =================================================================
   Category nav
================================================================== */
.category-nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 20px 18px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-left: 20px;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-chip {
  flex: none;
  padding: 8px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.88rem;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.category-chip:hover {
  border-color: var(--color-primary);
}

.category-chip[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* =================================================================
   Catalog / product grid
================================================================== */
.catalog {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 72px;
  min-height: 30vh;
}

.state-message,
.empty-message {
  color: var(--color-text-muted);
  padding: 48px 0;
}

.product-grid {
  display: grid;
  /* Mobile y tablet: 2 columnas (comportamiento actual, se conserva). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (min-width: 900px) {
  .product-grid {
    /* Desktop pequeño: 3 columnas. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .product-grid {
    /* Desktop: 4 columnas (se mantiene también en pantallas grandes). */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.product-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.product-card__image {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-background));
  position: relative;
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Placeholder elegante cuando no hay imagen o la imagen falla al cargar */
.product-card__placeholder,
.detail-image__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--color-primary) 14%, var(--color-background)) 0%,
    color-mix(in srgb, var(--color-secondary) 16%, var(--color-background)) 100%
  );
}

.product-card__placeholder svg,
.detail-image__placeholder svg {
  width: 34%;
  height: 34%;
  color: color-mix(in srgb, var(--color-primary) 55%, var(--color-text-muted));
  opacity: 0.55;
}

.badge-unavailable {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.product-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.product-card__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 500;
}

.product-card__description {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__footer {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.product-card__price {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1rem;
}

/* =================================================================
   Footer
================================================================== */
.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 44px 20px 28px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--color-border);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 28px;
}

@media (min-width: 620px) {
  .site-footer__grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

.site-footer__business {
  margin: 0 0 6px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 500;
}

.site-footer__tagline {
  margin: 0 0 16px;
  max-width: 42ch;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social:empty {
  display: none;
}

.site-footer__social a {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: border-color var(--transition), color var(--transition);
}

.site-footer__social a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.site-footer__social svg {
  width: 16px;
  height: 16px;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer__contact-item svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--color-primary);
}

a.site-footer__contact-item:hover {
  color: var(--color-text);
}

.site-footer__bottom {
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.site-footer__powered {
  margin: 0;
  font-size: 0.8rem;
}

.site-footer__brand {
  color: var(--color-primary);
  font-weight: 600;
}

/* -----------------------------------------------------------------
   Botón flotante de WhatsApp / contacto
------------------------------------------------------------------ */
.whatsapp-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  width: 54px;
  height: 54px;
  border-radius: 50% !important; 
  background-color: #25d366 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important; 
  box-shadow: var(--shadow-md);
  transition: transform var(--transition);
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.whatsapp-button:hover {
  transform: scale(1.06);
}

.whatsapp-button[hidden] {
  display: none !important;
}

.whatsapp-button svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
  flex-shrink: 0 !important;
  fill: currentColor !important;
  margin: 0 auto !important;
}

@media (max-width: 479px) {
  .whatsapp-button {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
  }
  .whatsapp-button svg {
    width: 28px !important;
    height: 28px !important;
  }
}


/* =================================================================
   Product detail modal
================================================================== */
.detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(36, 31, 26, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.detail-overlay[hidden] {
  display: none;
}

@media (min-width: 620px) {
  .detail-overlay {
    align-items: center;
    padding: 24px;
  }
}

.detail-dialog {
  background: var(--color-surface);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
}

@media (min-width: 620px) {
  .detail-dialog {
    border-radius: var(--radius-lg);
  }
}

.detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.detail-image {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-background));
  overflow: hidden;
}

.detail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* -----------------------------------------------------------------
   Carrusel de fotos (solo aparece cuando el producto tiene 2+ fotos)
------------------------------------------------------------------ */
.detail-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.detail-carousel__track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 260ms ease;
}

.detail-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.detail-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.detail-carousel__arrow--prev {
  left: 10px;
}

.detail-carousel__arrow--next {
  right: 10px;
  transform: translateY(-50%) scaleX(-1);
}

.detail-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.detail-carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.55);
  transition: background var(--transition), transform var(--transition);
}

.detail-carousel__dot[aria-current="true"] {
  background: #fff;
  transform: scale(1.3);
}

.detail-carousel__counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .detail-carousel__track {
    transition: none;
  }
}

.detail-body {
  padding: 24px 22px 26px;
}

.detail-category {
  margin: 0 0 4px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.detail-name {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
}

.detail-description {
  margin: 0 0 20px;
  color: var(--color-text-muted);
}

.detail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-price {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
}

.detail-availability {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.detail-availability[data-unavailable="true"] {
  color: var(--color-secondary);
  font-weight: 600;
}

/* =================================================================
   Responsive polish
================================================================== */
@media (max-width: 479px) {
  .hero__content {
    padding: 32px 18px 36px;
  }
}

/* =================================================================
   SISTEMA DE TEMAS — Catalog Engine
   =================================================================
   Cada bloque de abajo es UN theme completo y autocontenido: tokens +
   tratamiento de cada componente (hero, header, chips, cards, botones,
   modal, footer). El motor (HTML/JS) es el mismo para los 4 — nunca
   piensa en tenantId, solo en [data-theme="..."], que app.js fija según
   tenant.theme (con "minimalist" como default si el tenant no lo trae).

   Agregar un theme nuevo = agregar aquí un bloque
   :root[data-theme="nombre"] { ...tokens... } + sus reglas de
   componente, y sumar el nombre a VALID_THEMES en app.js. No requiere
   tocar el motor, el HTML ni el backend.

   Los defaults en :root (arriba en este archivo) SON el theme
   "minimalist" — por eso no hay un bloque [data-theme="minimalist"]
   de tokens aparte; sí tiene aquí sus reglas de componente puntuales
   donde vale la pena remarcar el carácter del theme (botones, chips).
================================================================== */

/* -----------------------------------------------------------------
   1) MINIMALIST (default)
   Limpio, editorial, premium — tipografía serif cuidada, radios casi
   rectos, casi sin sombra salvo un lift sutil al hover, mucho
   whitespace. Inspirado en Stellaria/Minimalista.
------------------------------------------------------------------ */
:root[data-theme="minimalist"] .btn {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  border-radius: var(--radius-sm);
}

:root[data-theme="minimalist"] .btn-primary {
  background: var(--color-text);
  color: var(--color-background);
}

:root[data-theme="minimalist"] .btn-primary:hover {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
  transform: none;
}

:root[data-theme="minimalist"] .category-chip {
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}

:root[data-theme="minimalist"] .hero {
  background: var(--color-primary);
}

/* -----------------------------------------------------------------
   2) GLASSMORPHISM
   Superficies translúcidas sobre un fondo oscuro, profundidad, blur,
   iluminación suave. Inspirado en Stellaria/Glassmorphismo. La página
   entera vive sobre --color-background (navy) porque body ya usa ese
   token — por eso basta con volver "glass" las superficies (header,
   cards, chips, modal, footer) para que floten sobre ese fondo.
------------------------------------------------------------------ */
:root[data-theme="glassmorphism"] {
  --color-primary: #6f9db8;
  --color-secondary: #42657d;
  --color-background: #07111f;
  --color-surface: #0d1b2a;
  --color-text: #f4f7f8;
  --color-text-muted: rgba(244, 247, 248, 0.68);
  --color-border: rgba(255, 255, 255, 0.26);

  --font-heading: "DM Serif Display", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;

  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, 0.35);

  --glass-blur: 16px;
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.26);
}

/* 1.1 — Precio con contraste garantizado sobre el fondo oscuro de Glassmorphism.
   No se puede "arreglar" el default de --color-primary aquí arriba porque el
   branding del tenant lo fija inline (siempre gana sobre cualquier regla de
   hoja de estilos sin !important) y puede traer un color oscuro arbitrario
   (ej. AutoStellar: #1F2A36). Un color-mix hacia blanco se veía gris/apagado
   con tonos oscuros poco saturados como ese — en vez de intentar "rescatar"
   un color de marca impredecible, se usa --color-primary-contrast (blanco:
   el mismo token que ya usan los chips/botones activos para texto sobre
   superficies de color), que es el que de verdad destaca sobre el vidrio
   oscuro sin importar qué primaryColor traiga el tenant. */
:root[data-theme="glassmorphism"] .product-card__price,
:root[data-theme="glassmorphism"] .detail-price {
  color: var(--color-primary-contrast);
}

:root[data-theme="glassmorphism"] .site-header,
:root[data-theme="glassmorphism"] .search-bar input,
:root[data-theme="glassmorphism"] .category-chip,
:root[data-theme="glassmorphism"] .product-card,
:root[data-theme="glassmorphism"] .badge-unavailable,
:root[data-theme="glassmorphism"] .detail-dialog,
:root[data-theme="glassmorphism"] .welcome-card,
:root[data-theme="glassmorphism"] .app-loading {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
}

/* Categoría activa: el selector de arriba también alcanza a .category-chip
   y, al tener la misma especificidad que la regla base
   .category-chip[aria-pressed="true"] (2 selectores cada una), gana por
   aparecer después en el archivo — dejando el chip "seleccionado" en el
   mismo vidrio translúcido que uno sin seleccionar, sin ningún contraste
   entre ambos estados. Mismo arreglo que ya se aplicó en Liquid Glass:
   relleno sólido con mayor especificidad (3 selectores) para el estado
   activo, apagando el blur heredado para que se lea como "seleccionado"
   de verdad y no como una variante más del vidrio normal. */
:root[data-theme="glassmorphism"] .category-chip[aria-pressed="true"] {
  background: var(--color-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

:root[data-theme="glassmorphism"] .app-loading {
  background: var(--color-background);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 1.3 — Badge "No disponible": el selector compartido de arriba también
   alcanza a .badge-unavailable y lo deja en vidrio CLARO (--glass-bg es
   blanco al 12%) con texto --color-text (casi blanco) → se lava casi por
   completo. En vez de un rojo arbitrario que rompería la identidad del
   tema, se usa una superficie de vidrio OSCURA (mismo recurso que ya se
   usó para las flechas del carrusel) — mantiene blur + legibilidad fuerte
   sin introducir un color ajeno al sistema. */
:root[data-theme="glassmorphism"] .badge-unavailable {
  background: color-mix(in srgb, var(--color-background) 82%, transparent);
  border: 1px solid var(--glass-border);
  color: var(--color-text);
}

:root[data-theme="glassmorphism"] .hero {
  background: radial-gradient(
    circle at 25% 15%,
    color-mix(in srgb, var(--color-primary) 32%, var(--color-background)) 0%,
    var(--color-background) 62%
  );
}

:root[data-theme="glassmorphism"] .detail-close {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  color: var(--color-text);
}

/* 1.2 — Flechas del carrusel: el botón circular base es blanco fijo con
   ícono var(--color-text), que en Glassmorphism también es casi blanco
   (#f4f7f8) → la flecha prácticamente desaparece. Se reemplaza por una
   superficie de vidrio OSCURA (en vez de blanca) para que el ícono claro
   quede en primer plano, manteniendo blur + borde sutil = sigue siendo
   Glassmorphism, solo con la polaridad de contraste correcta. */
:root[data-theme="glassmorphism"] .detail-carousel__arrow {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  color: var(--color-text);
}

:root[data-theme="glassmorphism"] .detail-carousel__arrow:hover,
:root[data-theme="glassmorphism"] .detail-carousel__arrow:focus-visible {
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
}

:root[data-theme="glassmorphism"] .whatsapp-button {
  box-shadow: var(--shadow-md);
}

/* -----------------------------------------------------------------
   3) LIQUID GLASS
   Distinto de Glassmorphism a propósito: fondo claro y aireado, glass
   más opaco/lechoso (48% blanco vs 12%), radios mucho más grandes
   ("blobs" orgánicos en vez de esquinas de vidrio), tipografía serif
   editorial en vez de sans. Inspirado en Stellaria/LiquidGlass.
------------------------------------------------------------------ */
:root[data-theme="liquidglass"] {
  --color-primary: #5c8a82;
  --color-secondary: #afc7c5;
  --color-background: #f3f5f1;
  --color-surface: #ffffff;
  --color-text: #17201c;
  --color-text-muted: #68716b;
  --color-border: rgba(23, 32, 28, 0.08);

  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: Optima, "Segoe UI", Georgia, serif;

  --radius-sm: 20px;
  --radius-md: 32px;
  --radius-lg: 40px;

  --shadow-sm: 0 8px 20px rgba(30, 45, 38, 0.08);
  --shadow-md: 0 12px 36px rgba(30, 45, 38, 0.1);

  --glass-blur: 20px;
  --glass-bg: rgba(255, 255, 255, 0.48);
  --glass-border: rgba(255, 255, 255, 0.72);
}

:root[data-theme="liquidglass"] .site-header,
:root[data-theme="liquidglass"] .search-bar input,
:root[data-theme="liquidglass"] .category-chip,
:root[data-theme="liquidglass"] .product-card,
:root[data-theme="liquidglass"] .badge-unavailable,
:root[data-theme="liquidglass"] .detail-dialog,
:root[data-theme="liquidglass"] .welcome-card,
:root[data-theme="liquidglass"] .app-loading {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  border-color: var(--glass-border);
  border-radius: var(--radius-lg);
}

:root[data-theme="liquidglass"] .app-loading {
  background: #10171a;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
}

:root[data-theme="liquidglass"] .product-card__image {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* 3 — Categoría seleccionada ilegible: el selector compartido de arriba
   (misma especificidad que la regla base .category-chip[aria-pressed="true"]
   de la sección "Category nav") gana por aparecer después en el archivo,
   dejando el chip activo en vidrio blanco translúcido con texto blanco →
   desaparece. Se restaura el relleno sólido para el estado activo
   —distinto a propósito del vidrio translúcido del estado normal, para
   que se sienta intencional— con mayor especificidad (3 selectores en vez
   de 2) para que gane sin depender del orden en el archivo. */
:root[data-theme="liquidglass"] .category-chip[aria-pressed="true"] {
  background: var(--color-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}


:root[data-theme="liquidglass"] .hero {
  background:
    radial-gradient(circle at 18% 25%, color-mix(in srgb, var(--color-secondary) 55%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 82% 75%, color-mix(in srgb, var(--color-primary) 35%, transparent) 0%, transparent 55%),
    var(--color-background);
}

:root[data-theme="liquidglass"] .hero__title,
:root[data-theme="liquidglass"] .hero__tagline {
  color: var(--color-text);
}

:root[data-theme="liquidglass"] .hero__media.has-image::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(23, 32, 28, 0.35) 100%);
}

:root[data-theme="liquidglass"] .hero__cta,
:root[data-theme="liquidglass"] .btn {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  border-radius: 999px;
}

:root[data-theme="liquidglass"] .btn-primary {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  color: var(--color-text);
}

/* -----------------------------------------------------------------
   4) BRUTALISM
   Alto contraste, bordes gruesos, sombra dura sin blur (offset puro),
   tipografía display muy pesada, cero curvas. Inspirado en
   Stellaria/Brutalismo. Sigue siendo usable: jerarquía clara, buen
   contraste, nada se sacrifica por el efecto gráfico.
------------------------------------------------------------------ */
:root[data-theme="brutalism"] {
  --color-primary: #000000;
  --color-secondary: #242424;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-text: #000000;
  --color-text-muted: #4a4a4a;
  --color-border: #000000;

  --font-heading: "Archivo Black", "Space Grotesk", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 4px 4px 0 var(--color-text);
  --shadow-md: 8px 8px 0 var(--color-text);

  --glass-blur: 0px;
  --glass-bg: var(--color-surface);
  --glass-border: var(--color-text);
}

:root[data-theme="brutalism"] .site-header {
  border-bottom: 3px solid var(--color-text);
}

:root[data-theme="brutalism"] .hero {
  background: var(--color-primary);
  border-bottom: 4px solid var(--color-text);
}

:root[data-theme="brutalism"] .hero__title {
  letter-spacing: -0.01em;
}

:root[data-theme="brutalism"] .btn {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 3px solid var(--color-text);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

:root[data-theme="brutalism"] .btn-primary {
  box-shadow: var(--shadow-md);
}

:root[data-theme="brutalism"] .btn-primary:hover {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--color-text);
}

:root[data-theme="brutalism"] .hero__cta {
  background: var(--color-background);
  color: var(--color-text);
}

:root[data-theme="brutalism"] .category-chip {
  border: 2px solid var(--color-text);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

:root[data-theme="brutalism"] .category-chip[aria-pressed="true"] {
  background: var(--color-text);
  border-color: var(--color-text);
}

:root[data-theme="brutalism"] .product-card {
  border: 3px solid var(--color-text);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

:root[data-theme="brutalism"] .product-card:hover {
  border-color: var(--color-text);
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--color-text);
}

:root[data-theme="brutalism"] .product-card:not(:hover) {
  box-shadow: var(--shadow-sm);
}

:root[data-theme="brutalism"] .detail-dialog,
:root[data-theme="brutalism"] .welcome-card .btn,
:root[data-theme="brutalism"] .app-loading__retry {
  border: 3px solid var(--color-text);
}

:root[data-theme="brutalism"] .badge-unavailable {
  border: 2px solid var(--color-text);
  border-radius: 0;
}

/* =================================================================
   Motion & accessibility
================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
  .welcome-overlay {
    transition: none;
  }
}