/* ================================================================
   ALMACEN-FIGMA — Fiel al Figma original (layout-almacen-figma)
   Fuente: estilos figma/almacen/src/app/App.tsx
   ================================================================ */

/* ── Step 1: Fuentes + paleta base ───────────────────────────────────────── */
body.layout-almacen-figma {
  --af-bg: var(--color-fondo, #F4EFE4); --af-fg: #1A2E1A; --af-card: #FDFAF3;
  --af-primary: var(--color-primario, #1B4332); --af-primary-fg: #F4EFE4;
  --af-secondary: #A8D455; --af-secondary-fg: #1A2E1A;
  --af-muted: #E6DFD0; --af-muted-fg: #6B7C6B;
  --af-accent: var(--color-acento, #D94F2B); --af-accent-fg: #FFFFFF;
  --af-border: rgba(27,67,50,0.15);
  --af-font-display: 'Playfair Display', Georgia, serif;
  --af-font-body: 'DM Sans', system-ui, sans-serif;
  background: var(--af-bg); color: var(--af-fg); font-family: var(--af-font-body);
}
body.layout-almacen-figma h1, body.layout-almacen-figma h2, body.layout-almacen-figma h3,
body.layout-almacen-figma .product p { font-family: var(--af-font-display); }

/* ── Step 2: Barra utilidad + navbar ─────────────────────────────────────── */
body.layout-almacen-figma #banner-envio { background: var(--af-primary); color: var(--af-primary-fg); }
body.layout-almacen-figma header, body.layout-almacen-figma #category-buttons {
  background: var(--af-card); border-bottom: 1px solid var(--af-border);
}
body.layout-almacen-figma header { position: sticky; top: 0; z-index: 40; }
body.layout-almacen-figma .header-logo-text strong { font-family: var(--af-font-display); font-weight: 900; color: var(--af-primary); }
body.layout-almacen-figma .header-logo-text span { color: var(--af-muted-fg); }
body.layout-almacen-figma .nav-link-btn, body.layout-almacen-figma .quick-pill, body.layout-almacen-figma .dropdown-btn { color: var(--af-fg) !important; }
body.layout-almacen-figma #category-buttons a:hover, body.layout-almacen-figma .nav-link-btn:hover, body.layout-almacen-figma .quick-pill:hover { color: var(--af-primary) !important; }
body.layout-almacen-figma .header-search { background: var(--af-muted) !important; border-color: var(--af-border) !important; }
body.layout-almacen-figma .header-search input { color: var(--af-fg) !important; }
body.layout-almacen-figma .header-search input::placeholder { color: var(--af-muted-fg) !important; }
body.layout-almacen-figma .header-search-icon { color: var(--af-muted-fg) !important; }
body.layout-almacen-figma .header-cart-btn, body.layout-almacen-figma .header-fav-btn {
  background: var(--af-primary); color: var(--af-primary-fg); border-radius: .8rem;
}

/* ── Step 3: Hero split — nuevo markup ───────────────────────────────────── */
body.layout-almacen-figma .hero-section { display: none !important; }
body.layout-almacen-figma .hero-section--af {
  display: block; background: var(--af-primary); color: var(--af-primary-fg);
  padding: 3rem 1rem 5rem; position: relative; overflow: hidden;
}
body.layout-almacen-figma .hero-af-grid {
  max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: 1fr;
  gap: 2.5rem; align-items: center;
}
@media (min-width: 1024px) { body.layout-almacen-figma .hero-af-grid { grid-template-columns: 1fr 1fr; } }
body.layout-almacen-figma .hero-af-badge {
  display: inline-block; background: rgba(244,239,228,0.15); border-radius: 999px;
  padding: .4rem 1rem; font-size: .85rem; margin-bottom: 1rem;
}
body.layout-almacen-figma .hero-af-text h1 { font-size: clamp(2.5rem,5vw,4rem); font-weight: 900; line-height: 1.1; margin: 0 0 1rem; }
body.layout-almacen-figma .hero-af-text p { color: rgba(244,239,228,0.7); max-width: 30rem; line-height: 1.6; }
body.layout-almacen-figma .hero-af-accent { color: var(--af-secondary); }
body.layout-almacen-figma .hero-af-cta { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
body.layout-almacen-figma .hero-af-btn-primary {
  background: var(--af-secondary); color: var(--af-secondary-fg); border-radius: 999px;
  padding: .9rem 1.8rem; font-weight: 600; text-decoration: none;
}
body.layout-almacen-figma .hero-af-btn-secondary {
  border: 1px solid var(--af-primary-fg); color: var(--af-primary-fg); border-radius: 999px;
  padding: .9rem 1.8rem; text-decoration: none;
}
body.layout-almacen-figma .hero-af-stats { display: flex; gap: 2rem; margin-top: 1.5rem; }
body.layout-almacen-figma .hero-af-stats strong { display: block; font-family: var(--af-font-display); font-size: 1.5rem; color: var(--af-secondary); }
body.layout-almacen-figma .hero-af-stats span { font-size: .8rem; opacity: .8; }
body.layout-almacen-figma .hero-af-img-wrap { position: relative; }
body.layout-almacen-figma .hero-af-img {
  width: 100%; border-radius: 2.5rem; display: block; object-fit: cover;
  aspect-ratio: 4/3; background: var(--af-muted);
}
body.layout-almacen-figma .hero-af-float {
  position: absolute; background: var(--af-card); color: var(--af-fg); border-radius: 1rem;
  padding: .8rem 1rem; box-shadow: 0 10px 30px rgba(0,0,0,.15); font-size: .8rem;
}
body.layout-almacen-figma .hero-af-float strong { display: block; font-family: var(--af-font-display); }
body.layout-almacen-figma .hero-af-float-1 { top: -1rem; left: -1rem; }
body.layout-almacen-figma .hero-af-float-2 { bottom: -1rem; right: -1rem; }
@media (max-width: 640px) {
  body.layout-almacen-figma .hero-af-float { display: none; }
}

/* ── Step 4: Categorías + perks strip ────────────────────────────────────── */
body.layout-almacen-figma #categoria-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
body.layout-almacen-figma #categoria-cards > .cat-visual-card { flex: 0 1 22%; max-width: none; }
@media (min-width: 768px) { body.layout-almacen-figma #categoria-cards > .cat-visual-card { flex-basis: 11%; } }
body.layout-almacen-figma .cat-visual-card {
  border-radius: 1rem; background: var(--af-card); border: 1px solid var(--af-border);
  text-align: center; padding: 1rem .5rem; transition: background .15s, color .15s;
}
body.layout-almacen-figma .cat-visual-card:hover { background: var(--af-primary); color: var(--af-primary-fg); }
body.layout-almacen-figma .cat-visual-count { color: var(--af-muted-fg); }
body.layout-almacen-figma .cat-visual-card:hover .cat-visual-count { color: rgba(244,239,228,0.6); }
body.layout-almacen-figma .strip-info {
  background: rgba(168,212,85,0.2); border-top: 1px solid var(--af-border);
  border-bottom: 1px solid var(--af-border); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-content: stretch;
}
body.layout-almacen-figma .strip-sep { display: none; }
body.layout-almacen-figma .strip-item { max-width: none; min-width: 0; flex: none; justify-content: center; border-right: 1px solid var(--af-border); }
body.layout-almacen-figma .strip-item:last-child { border-right: none; }

/* ── Step 5: Oferta del día — nuevo bloque ───────────────────────────────── */
body.layout-almacen-figma .af-oferta-dia {
  display: block; max-width: 80rem; margin: 3rem auto; background: var(--af-primary);
  color: var(--af-primary-fg); border-radius: 1.5rem; overflow: hidden;
}
body.layout-almacen-figma .af-od-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { body.layout-almacen-figma .af-od-grid { grid-template-columns: 1fr 1fr; } }
body.layout-almacen-figma .af-od-text { padding: 2.5rem; }
body.layout-almacen-figma .af-od-badge { background: var(--af-accent); border-radius: 999px; padding: .3rem .9rem; font-size: .8rem; display: inline-block; margin-bottom: 1rem; }
body.layout-almacen-figma .af-od-text h2 { font-size: clamp(1.8rem,4vw,2.5rem); margin: 0 0 .75rem; }
body.layout-almacen-figma .af-od-text > p { color: rgba(244,239,228,0.6); margin-bottom: 1.5rem; }
body.layout-almacen-figma .af-od-countdown { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
body.layout-almacen-figma .af-od-countdown > span { color: rgba(244,239,228,0.5); font-size: .8rem; }
body.layout-almacen-figma .af-od-boxes { display: flex; gap: .5rem; }
body.layout-almacen-figma .af-od-boxes div { background: rgba(255,255,255,.12); border-radius: .5rem; padding: .5rem .8rem; text-align: center; font-family: var(--af-font-display); font-size: 1.2rem; min-width: 3.2rem; }
body.layout-almacen-figma .af-od-boxes small { display: block; font-size: .6rem; opacity: .7; }
body.layout-almacen-figma .af-od-cta {
  background: var(--af-secondary); color: var(--af-secondary-fg); border: none; border-radius: 999px;
  padding: .9rem 1.8rem; font-weight: 600; cursor: pointer; font-size: 1rem;
}
body.layout-almacen-figma .af-od-img-wrap { position: relative; min-height: 220px; }
body.layout-almacen-figma .af-od-img { width: 100%; height: 100%; object-fit: cover; background: var(--af-muted); display: block; }
body.layout-almacen-figma .af-od-pct {
  position: absolute; top: 1rem; right: 1rem; background: var(--af-accent); color: #fff;
  border-radius: 999px; width: 3.5rem; height: 3.5rem; display: flex; align-items: center;
  justify-content: center; font-weight: 900; font-family: var(--af-font-display);
}

/* ── Step 6: Grid de productos ────────────────────────────────────────────── */
body.layout-almacen-figma .product-grid { gap: 1rem; }
body.layout-almacen-figma .product {
  border-radius: 1rem; background: var(--af-card); border: 1px solid var(--af-border);
  padding-bottom: .75rem;
}
body.layout-almacen-figma .prod-img-wrap { border-radius: 1rem 1rem 0 0; aspect-ratio: 1/1; margin-bottom: 0; }
body.layout-almacen-figma .product h3 { padding: 0 .75rem; }
body.layout-almacen-figma .product p { color: var(--af-primary) !important; font-weight: 900; padding: 0 .75rem; }
body.layout-almacen-figma .product > button:not(.quantity-controls button) {
  border-radius: 999px; background: var(--af-primary); color: var(--af-primary-fg);
}

/* ── Step 7: Newsletter + footer ─────────────────────────────────────────── */
body.layout-almacen-figma #footer-newsletter { border: 1px solid var(--af-border); border-radius: 1.5rem; background: var(--af-card); }
body.layout-almacen-figma .footer-rico { background: var(--af-primary); color: var(--af-primary-fg); }
body.layout-almacen-figma .footer-rico a { color: var(--af-primary-fg); opacity: .8; }
body.layout-almacen-figma .footer-rico a:hover { opacity: 1; }