/* =========================================================
   style.css — Espacio Home
   Paleta de marca real (cliente, 28/08/2026). Todo está
   centralizado en :root, así que para tocar un color se
   cambia en un solo lugar y se actualiza todo el sitio.
   ========================================================= */

:root {
  --color-fondo: #F4F0E4;
  --color-fondo-alt: #D7D0AC;
  --color-texto: #513F31;
  --color-texto-suave: #625528;
  --color-borde: #D7D0AC;
  --color-acento: #625528;
  --color-whatsapp: #25d366;    /* verde WhatsApp, este sí queda fijo */
  --color-descuento: #c0503e;

  /* Tipografía de marca: Gilroy. Todavía no tenemos los archivos de esa
     fuente (.woff2/.ttf con licencia web) — Gilroy no está en Google Fonts,
     así que mientras tanto usamos "Poppins" (Google Fonts, gratis) como
     reemplazo: es la geométrica más parecida a Gilroy que hay gratis
     (formas y proporciones muy similares). Cuando lleguen los archivos de
     Gilroy, se agrega un @font-face acá arriba y se cambia "Poppins" por
     "Gilroy" en las dos variables de abajo — el resto del sitio no se toca. */
  --fuente-titulos: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-texto: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radio-borde: 8px;
  --ancho-maximo: 1180px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  background: var(--color-fondo);
  line-height: 1.5;
}

a { color: inherit; }

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

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header / navegación ---------- */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo-texto {
  display: inline-flex;
  text-decoration: none;
  color: var(--color-texto);
}

.logo-img {
  height: 48px;
  width: auto;
}

nav.nav-principal ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

nav.nav-principal a {
  text-decoration: none;
  font-size: 0.95rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}

nav.nav-principal a:hover,
nav.nav-principal a.activo {
  border-bottom-color: var(--color-acento);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ---------- Menú desplegable de Catálogo (mega-menu) ---------- */
/* Panel de ancho completo, anclado al header entero (no al link), así
   nunca se corta contra el borde de la ventana. Se muestra mientras el
   mouse está sobre el link "Catálogo" O sobre el panel mismo (para poder
   bajar el mouse y hacer click en una subcategoría sin que se cierre). */

.mega-menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--color-borde);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  z-index: 30;
}

.site-header:has(.nav-catalogo:hover) .mega-menu-panel,
.site-header:has(.nav-catalogo:focus-within) .mega-menu-panel,
.site-header:has(.mega-menu-panel:hover) .mega-menu-panel {
  display: block;
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 28px 20px;
}

.mega-menu-col h4 { margin: 0 0 10px; font-size: 0.95rem; }

.mega-menu-col .ver-todo {
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 600;
}

.mega-menu-col .ver-todo:hover { color: var(--color-acento); }

.mega-menu-col ul { list-style: none; margin: 0; padding: 0; }
.mega-menu-col li { margin-bottom: 7px; }

.mega-menu-col a {
  text-decoration: none;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.mega-menu-col a:hover { color: var(--color-acento); text-decoration: underline; }

@media (max-width: 900px) {
  /* Debajo de este ancho el mega-menu no entra prolijo; en mobile el nav
     ya se colapsa en el menú hamburguesa y "Catálogo" lleva directo a la
     página, donde los filtros de categoría/subcategoría siguen andando. */
  .mega-menu-panel { display: none !important; }
}

@media (max-width: 720px) {
  nav.nav-principal {
    display: none;
    width: 100%;
  }
  nav.nav-principal.abierto { display: block; }
  nav.nav-principal ul {
    flex-direction: column;
    gap: 0;
    padding-bottom: 12px;
  }
  nav.nav-principal a { display: block; padding: 10px 0; }
  .site-header .contenedor { flex-wrap: wrap; }
  .nav-toggle { display: block; }
}

/* ---------- Botón WhatsApp (genérico, usado en cards y CTAs) ---------- */

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-whatsapp);
  color: #fff;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.btn-whatsapp:hover { filter: brightness(0.95); }

/* Botón flotante anclado (inyectado por whatsapp.js en todas las páginas) */

.whatsapp-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

.whatsapp-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Botones genéricos ---------- */

.btn-primario {
  display: inline-block;
  background: var(--color-acento);
  color: #fff;
  text-decoration: none;
  padding: 12px 26px;
  border-radius: var(--radio-borde);
  font-weight: 600;
}

/* ---------- Hero carrusel (Inicio) ---------- */
/* Solo fotos, sin texto encima (así lo pidió Agustín) — el llamado a la
   acción vive en "Explorá por categoría" de más abajo. El contenido lo
   arma js/carousel.js; acá solo el layout visual. */

.hero-carrusel {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: var(--color-fondo-alt);
}

.hero-carrusel-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-carrusel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hero-carrusel-slide.activo { opacity: 1; }

.hero-carrusel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-carrusel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.hero-carrusel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.4);
  padding: 0;
  cursor: pointer;
}

.hero-carrusel-dot.activo { background: #fff; }

@media (max-width: 720px) {
  .hero-carrusel { height: 240px; }
}

/* ---------- Grillas genéricas (destacados / categorías) ---------- */

.grilla-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  padding: 50px 0;
}

.categoria-card {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  padding: 16px;
  text-align: center;
  text-decoration: none;
  color: var(--color-texto);
}

.categoria-card h3 {
  font-family: var(--fuente-titulos);
  margin: 14px 0 4px;
}

/* Producto destacado dentro de cada card: foto + nombre del producto
   marcado "Destacado" en el Excel para esa categoría (o el primero
   cargado, si ninguno está marcado — ver js/destacados.js). */

.categoria-destacado-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radio-borde);
  background: var(--color-fondo-alt);
}

.categoria-destacado-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.categoria-destacado-nombre {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Catálogo ---------- */

.catalogo-header { padding: 30px 0 10px; }

.catalogo-header h1 {
  font-family: var(--fuente-titulos);
  margin-bottom: 4px;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  margin: 0 0 14px;
}

.nota-provisoria {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  background: var(--color-fondo-alt);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  padding: 10px 14px;
  margin: 10px 0 20px;
}

#filtros-categoria {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

#filtros-subcategoria {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-borde);
}

.filtro-btn {
  padding: 8px 16px;
  border: 1px solid var(--color-borde);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: var(--fuente-texto);
}

.filtro-btn.activo {
  background: var(--color-texto);
  color: #fff;
  border-color: var(--color-texto);
}

.filtro-btn-sub {
  font-size: 0.8rem;
  padding: 6px 14px;
  background: var(--color-fondo-alt);
  border-color: transparent;
  color: var(--color-texto);
}

.filtro-btn-sub.activo {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #fff;
}

.contador-productos {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  margin: 0 0 18px;
}

#grilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  padding-bottom: 60px;
}

.producto-card {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.producto-imagen { position: relative; aspect-ratio: 1 / 1; }

.producto-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--color-descuento);
  color: #fff;
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 4px;
}

.badge-sin-stock { left: auto; right: 8px; background: #777; }

.producto-info { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.producto-info h3 { font-size: 0.95rem; margin: 0 0 6px; }
.producto-desc { font-size: 0.8rem; color: var(--color-texto-suave); flex: 1; }
.producto-precio { margin: 10px 0; }
.precio, .precio-promo { font-weight: bold; }
.precio-original {
  text-decoration: line-through;
  color: #999;
  margin-right: 6px;
  font-size: 0.85rem;
}

.sin-resultados { grid-column: 1 / -1; color: var(--color-texto-suave); }

/* ---------- Nosotros / Contacto ---------- */

.pagina-info { padding: 50px 0; max-width: 720px; margin: 0 auto; }
.pagina-info h1 { font-family: var(--fuente-titulos); }

.datos-contacto { padding: 50px 0; }
.datos-contacto h1 { font-family: var(--fuente-titulos); }

.mapa-embed {
  border: 0;
  width: 100%;
  height: 360px;
  border-radius: var(--radio-borde);
  margin-top: 30px;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-fondo-alt);
  border-top: 1px solid var(--color-borde);
  padding: 30px 0;
  margin-top: 40px;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.site-footer .contenedor {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.redes-sociales { display: flex; gap: 10px; }

.redes-sociales a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.redes-sociales a:hover {
  background: var(--color-fondo);
  transform: translateY(-2px);
}

.redes-sociales img {
  width: 18px;
  height: 18px;
  display: block;
}