:root {
  --negro:   #0D1A0D;
  --verde:   #1A3F20;
  --verde2:  #2C6E35;
  --tierra:  #8A3E1E;
  --ocre:    #C9933A;
  --crema:   #F0E6CE;
  --crema2:  #F7F2E6;
  --blanco:  #FDFAF4;
  --gris:    #3D4A3D;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-serif:   'Playfair Display', serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--blanco);
  color: var(--negro);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* Utilidades globales */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  padding: 80px 40px;
}

.section-tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--tierra);
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  color: var(--negro);
}

.section-title span { color: var(--verde2); }

/* Botones globales */
.btn-primary {
  display: inline-block;
  background: var(--ocre);
  color: var(--negro);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.btn-primary:hover { background: var(--crema); transform: translateY(-1px); }

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--crema);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: 1.5px solid rgba(240,230,206,.3);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--crema); background: rgba(240,230,206,.05); }

.btn-verde {
  display: inline-block;
  background: var(--verde);
  color: var(--crema);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  cursor: pointer;
  transition: background .15s;
}
.btn-verde:hover { background: var(--negro); }

/* Ticker animación */
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Fade up reveal */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── RESPONSIVE ─── */

/* Tablet */
@media (max-width: 1024px) {
  .section { padding: 60px 24px; }

  /* Hero */
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-right { display: none !important; }
  .hero-left { padding: 60px 32px !important; }

  /* Cat grid */
  .cat-grid-6 { grid-template-columns: repeat(3, 1fr) !important; }

  /* Products */
  .prod-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Blog */
  .blog-grid-3 { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* Promo band */
  .promo-grid { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Cart */
  .cart-grid { grid-template-columns: 1fr !important; }
  .cart-sticky { position: static !important; }
}

/* Mobile */
@media (max-width: 768px) {
  .section { padding: 48px 20px; }

  /* Nav */
  .nav-links-desktop { display: none !important; }
  .nav-mobile-open { display: flex !important; }
  .nav-container { padding: 0 20px !important; height: 60px !important; }
  .search-desktop { display: none !important; }

  /* Hero */
  .hero-title { font-size: 56px !important; }
  .hero-left { padding: 48px 20px !important; }
  .hero-stats { gap: 24px !important; }

  /* Cat grid */
  .cat-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Products */
  .prod-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Filters */
  .filters-row { flex-direction: column !important; align-items: flex-start !important; }

  /* Blog */
  .blog-featured { grid-template-columns: 1fr !important; }

  /* Cart */
  .cart-form-grid { grid-template-columns: 1fr !important; }
  .cart-main-grid { grid-template-columns: 1fr !important; padding: 24px 20px 60px !important; }
  .cart-sticky { position: static !important; margin-top: 24px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column !important; gap: 8px !important; text-align: center; }

  /* Product page */
  .product-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Testimonios */
  .testimonios-grid { grid-template-columns: 1fr !important; }

  /* Promo */
  .promo-grid { grid-template-columns: 1fr !important; padding: 48px 20px !important; }

  /* Topbar */
  .topbar-full { display: none !important; }
  .topbar-mobile { display: flex !important; }
}

/* Extra small */
@media (max-width: 480px) {
  .prod-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .cat-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .hero-title { font-size: 44px !important; }
  .hero-ctas { flex-direction: column !important; }
  .hero-ctas a, .hero-ctas button { text-align: center; }
}


/* Rejilla de productos: las líneas negras entre tarjetas.
   -------------------------------------------------------------------------
   Antes se dibujaban con el fondo del contenedor: el contenedor iba en negro
   y la separación de 2px entre tarjetas lo dejaba ver. Funciona mientras la
   rejilla esté llena, pero cuando la última fila queda incompleta —una
   búsqueda con uno o dos resultados— no hay tarjeta que tape ese fondo y el
   hueco sale como un bloque negro.

   Ahora la línea la pone cada tarjeta con su propio contorno. El contorno se
   dibuja por fuera de la tarjeta, así que los de dos tarjetas vecinas se
   encuentran en la separación de 2px y se ven como una sola línea: queda
   igual que antes. La diferencia es que donde no hay tarjeta no hay nada que
   pintar, y el hueco se ve del color de la página.

   Se aplica agregando la clase "rejilla" al contenedor. Los !important son
   necesarios porque el fondo y el borde vienen en estilos en línea. */
.rejilla {
  background: transparent !important;
  border: none !important;
}
.rejilla > * {
  outline: 2px solid var(--negro);
}


/* Rejilla de productos: dos columnas en celular. Una sola deja tarjetas
   gigantes y obliga a un scroll eterno para ver cuatro productos. */
.rejillaProd {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
  .rejillaProd { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}


/* En la ficha de producto la barra de compra reemplaza a la de navegación:
   apiladas ocupan un tercio de la pantalla del celular. */
body.conBarraCompra .barraMov { display: none !important; }