/* ==========================================================================
   ÑANDE SHOP — Página de inicio
   ========================================================================== */

/* ---------- Banner superior compacto ----------
   Reemplaza al hero de pantalla completa (con partículas/parallax/shimmer)
   que tenía el sitio antes del rediseño tipo marketplace: el objetivo ahora
   es ir directo a categorías/productos, como en la referencia pedida por
   el cliente, conservando un fade-in suave nada más. */

.promo-strip {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.promo-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(43, 38, 32, 0.78) 0%, rgba(43, 38, 32, 0.4) 100%);
  z-index: -1;
}

.promo-strip__content { max-width: 620px; padding: 2.25rem 1.5rem; }

.promo-strip__eyebrow {
  display: inline-block;
  color: var(--madera-clara);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 0.6rem;
}

.promo-strip__content h1 {
  color: var(--color-white);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin-bottom: 0.65rem;
  opacity: 0;
  animation: heroTitleIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.promo-strip__content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  max-width: 520px;
}

.promo-strip__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Franja de confianza ---------- */

.trust-strip {
  background: var(--arena);
  padding: 1.1rem 0;
}

.trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.trust-item__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verde-oliva);
  color: var(--color-white);
  border-radius: 999px;
  animation: pulseGlow 3s ease-in-out infinite;
}

.trust-item:nth-child(2) .trust-item__icon { animation-delay: 0.4s; }
.trust-item:nth-child(3) .trust-item__icon { animation-delay: 0.8s; }
.trust-item:nth-child(4) .trust-item__icon { animation-delay: 1.2s; }

.trust-item strong { display: block; font-size: 0.9rem; }
.trust-item span { font-size: 0.8rem; color: var(--color-text-muted); }

@media (max-width: 860px) {
  .trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Categorías ----------
   Mosaico de imágenes a sangre con el nombre debajo, inspirado en la
   referencia de ecommerce del cliente (antes eran tarjetas grandes con
   ícono redondo). Usa una foto real de un producto representativo de cada
   categoría — no existen fotos de categoría dedicadas en el catálogo. */

.category-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.category-tile {
  background: var(--color-white);
  text-align: center;
  display: block;
}

.category-tile__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.category-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.category-tile:hover .category-tile__media img { transform: scale(1.06); }

.category-tile span {
  display: block;
  padding: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.85rem;
  color: var(--color-text);
}

@media (max-width: 700px) {
  .category-tile span { font-size: 0.72rem; padding: 0.6rem 0.4rem; }
}

/* ---------- Grid de productos ---------- */

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

@media (max-width: 1080px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .products-grid { grid-template-columns: 1fr; } }

.section__cta { text-align: center; margin-top: 2.5rem; }

/* ---------- Banner promocional ---------- */

.promo-banner {
  position: relative;
  background-size: 100%;
  background-position: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  animation: promoZoom 14s ease-in-out infinite alternate;
}

@keyframes promoZoom {
  from { background-size: 100%; }
  to { background-size: 114%; }
}

.promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(43, 38, 32, 0.82) 0%, rgba(43, 38, 32, 0.35) 100%);
  z-index: -1;
}

.promo-banner__inner {
  padding: 4rem 3rem;
  max-width: 460px;
  color: var(--color-white);
}

.promo-banner__inner span {
  color: var(--madera-clara);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
}

.promo-banner__inner h2 { color: var(--color-white); margin: 0.75rem 0 1.5rem; }

@media (max-width: 700px) {
  .promo-banner__inner { padding: 2.5rem 1.5rem; max-width: 100%; }
}

/* ---------- Por qué elegirnos ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  text-align: center;
}

.feature-item__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.1rem;
  border-radius: 999px;
  background: var(--verde-oliva);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
}

.feature-item:hover .feature-item__icon { transform: scale(1.12) rotate(6deg); }

.feature-item h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.feature-item p { color: var(--color-text-muted); font-size: 0.9rem; }

@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Testimonios ---------- */

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--madera-clara);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.testimonial-card__stars {
  color: var(--madera-clara);
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  display: inline-block;
  animation: starGlow 3.2s ease-in-out infinite;
}
.testimonial-card p { font-style: italic; color: var(--color-text); margin-bottom: 1.25rem; }
.testimonial-card__author strong { display: block; font-size: 0.92rem; }
.testimonial-card__author span { font-size: 0.8rem; color: var(--verde-oliva-dark); }

@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ---------- Instagram ---------- */

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.instagram-grid a {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.instagram-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.instagram-grid a:hover img { transform: scale(1.08); }

@media (max-width: 700px) { .instagram-grid { grid-template-columns: repeat(2, 1fr); } }