/* =================================================================
   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);
}

: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);
}

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

: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);
}

: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;
}

: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;
  }
}