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

/* ── 1. Paleta + tipografías ─────────────────────────────────────── */
body.layout-alimentos-figma {
  --al-primary: #E30613; --al-primary-fg: #FFFFFF;
  --al-secondary: #FFD100; --al-secondary-fg: #111111;
  --al-accent: #FF6A00;
  --al-bg: #F5F5F5; --al-fg: #111111; --al-card: #FFFFFF;
  --al-muted: #EEEEEE; --al-muted-fg: #666666; --al-border: #E0E0E0;
  --al-font-display: 'Barlow Condensed', system-ui, sans-serif;
  --al-font-body: 'Barlow', system-ui, sans-serif;
  background: var(--al-bg); color: var(--al-fg); font-family: var(--al-font-body);
}
body.layout-alimentos-figma h1, body.layout-alimentos-figma h2, body.layout-alimentos-figma h3,
body.layout-alimentos-figma .precio { font-family: var(--al-font-display); font-weight: 900; text-transform: uppercase; }

/* Reordena los bloques nuevos (insertados al final del body, junto al
   marcador FIGMA-ALIMENTOS-FIGMA-INSERT) para que aparezcan en su
   posición visual correcta sin duplicar carrito/checkout ni tocar
   app/web/tienda.py. Los elementos position:fixed (#cfg-loading,
   #back-to-top, #mobile-bottom-nav, .whatsapp-float) no participan del
   flujo y no necesitan order. */
body.layout-alimentos-figma { display: flex; flex-direction: column; }
body.layout-alimentos-figma > header { order: 1; }
body.layout-alimentos-figma > #banner-envio { order: 2; }
body.layout-alimentos-figma > .hero-section--al { order: 3; }
body.layout-alimentos-figma > .al-deals { order: 5; }
body.layout-alimentos-figma > .al-countdown { order: 6; }
body.layout-alimentos-figma > main { order: 7; }
body.layout-alimentos-figma > .al-tarjeta { order: 8; }
body.layout-alimentos-figma > #status-div,
body.layout-alimentos-figma > .btn-contacto-tienda,
body.layout-alimentos-figma > .vistos-section { order: 9; }
body.layout-alimentos-figma > .quienes-somos { order: 10; }
body.layout-alimentos-figma > footer { order: 11; }

/* ── 2. Navbar roja + category nav ───────────────────────────────── */
body.layout-alimentos-figma #banner-envio { background: var(--al-fg); color: #fff; }
body.layout-alimentos-figma header { background: var(--al-primary); color: var(--al-primary-fg); }
body.layout-alimentos-figma .header-cart-btn { background-color: var(--al-secondary); color: var(--al-secondary-fg); }
body.layout-alimentos-figma #category-buttons { background: #B30510; color: #fff; }
body.layout-alimentos-figma #category-buttons a:hover, body.layout-alimentos-figma #category-buttons .active { text-decoration: underline; text-decoration-color: var(--al-secondary); text-underline-offset: 4px; }

/* ── 3. Hero carousel ─────────────────────────────────────────────── */
body.layout-alimentos-figma .hero-section { display: none !important; }
body.layout-alimentos-figma .hero-section--al { position: relative; overflow: hidden; }
body.layout-alimentos-figma .al-hero-slide { display: grid; grid-template-columns: 1fr; align-items: center; gap: 1.5rem; padding: 3rem 1.5rem 4rem; color: #fff; min-height: 22rem; transition: background-color .4s ease; }
@media (min-width: 1024px) { body.layout-alimentos-figma .al-hero-slide { grid-template-columns: 1fr 1fr; padding: 3.5rem 3rem 4.5rem; } }
body.layout-alimentos-figma .al-hero-text span { display: inline-block; background: var(--al-secondary); color: var(--al-secondary-fg); font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: .35rem .8rem; border-radius: .3rem; margin-bottom: 1rem; }
body.layout-alimentos-figma .al-hero-text h1 { font-size: clamp(3rem,7vw,5.5rem); line-height: .9; margin: .5rem 0; white-space: pre-line; }
body.layout-alimentos-figma .al-hero-text p { font-family: var(--al-font-body); text-transform: none; font-weight: 400; max-width: 26rem; opacity: .8; margin: 0 0 1.5rem; }
body.layout-alimentos-figma .al-hero-text a { display: inline-block; background: #fff; color: var(--al-fg); padding: .9rem 1.8rem; text-decoration: none; font-family: var(--al-font-display); font-weight: 900; text-transform: uppercase; border-radius: .75rem; }
body.layout-alimentos-figma .al-hero-text a:hover { background: var(--al-secondary); color: var(--al-secondary-fg); }
body.layout-alimentos-figma .al-hero-img { border-radius: 1rem; width: 100%; aspect-ratio: 7/5; object-fit: cover; background: rgba(255,255,255,.15); display: block; }
body.layout-alimentos-figma .al-hero-prev, body.layout-alimentos-figma .al-hero-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.9); border: none; border-radius: 999px; width: 2.5rem; height: 2.5rem; font-size: 1.2rem; cursor: pointer; z-index: 2; }
body.layout-alimentos-figma .al-hero-prev { left: 1rem; } body.layout-alimentos-figma .al-hero-next { right: 1rem; }
body.layout-alimentos-figma .al-hero-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: .4rem; z-index: 2; }
body.layout-alimentos-figma .al-hero-dots span { width: .5rem; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; display: block; }
body.layout-alimentos-figma .al-hero-dots span.active { width: 1.5rem; background: #fff; }

/* ── 4. Deal banners + countdown de ofertas ──────────────────────── */
body.layout-alimentos-figma .al-deals { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 80rem; margin: 2rem auto; padding: 0 1.5rem; }
@media (min-width: 768px) { body.layout-alimentos-figma .al-deals { grid-template-columns: repeat(3,1fr); } }
body.layout-alimentos-figma .al-deal { border-radius: 1rem; padding: 1.2rem; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,.08); }
body.layout-alimentos-figma .al-countdown { display: flex; align-items: center; gap: 1rem; justify-content: center; background: var(--al-fg); color: #fff; padding: 1rem; flex-wrap: wrap; font-family: var(--al-font-display); font-weight: 900; text-transform: uppercase; }
body.layout-alimentos-figma .al-countdown-boxes { display: flex; gap: .5rem; }
body.layout-alimentos-figma .al-countdown-boxes div { background: rgba(255,255,255,.12); border-radius: .5rem; padding: .4rem .7rem; text-align: center; }
body.layout-alimentos-figma .al-countdown-boxes small { display: block; font-size: .6rem; opacity: .7; text-transform: none; font-weight: 400; font-family: var(--al-font-body); }

/* ── 5. Grid de productos + tarjeta de fidelidad + services strip ── */
body.layout-alimentos-figma .product { border-radius: .75rem; border: 1px solid var(--al-border); background: var(--al-card); }
body.layout-alimentos-figma .product h3 + p { color: var(--al-primary); font-family: var(--al-font-display); font-weight: 900; }
body.layout-alimentos-figma .strip-info { display: grid; grid-template-columns: repeat(2,1fr); background: #fff; border-top: 1px solid var(--al-border); border-bottom: 1px solid var(--al-border); }
@media (min-width: 768px) { body.layout-alimentos-figma .strip-info { grid-template-columns: repeat(4,1fr); } }
body.layout-alimentos-figma .strip-sep { display: none; }
body.layout-alimentos-figma .strip-item { max-width: none; min-width: 0; justify-content: center; text-align: center; border-right: 1px solid var(--al-border); }
body.layout-alimentos-figma .strip-item:nth-child(2n) { border-right: none; }
@media (min-width: 768px) { body.layout-alimentos-figma .strip-item:nth-child(2n) { border-right: 1px solid var(--al-border); } body.layout-alimentos-figma .strip-item:last-child { border-right: none; } }
body.layout-alimentos-figma .strip-icon { color: var(--al-primary); }

body.layout-alimentos-figma .al-tarjeta { background: var(--al-secondary); color: var(--al-secondary-fg); padding: 3rem 1.5rem; text-align: center; }
body.layout-alimentos-figma .al-tarjeta > div { max-width: 40rem; margin: 0 auto; }
body.layout-alimentos-figma .al-tarjeta span { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .7; margin-bottom: .3rem; }
body.layout-alimentos-figma .al-tarjeta h2 { font-size: clamp(2rem,4vw,3rem); margin: 0 0 1rem; }
body.layout-alimentos-figma .al-tarjeta p { font-family: var(--al-font-body); font-weight: 400; text-transform: none; opacity: .85; }
body.layout-alimentos-figma .al-tarjeta a { display: inline-block; margin-top: 1rem; background: var(--al-fg); color: #fff; padding: .9rem 2rem; border-radius: .75rem; text-decoration: none; font-family: var(--al-font-display); font-weight: 900; text-transform: uppercase; }
body.layout-alimentos-figma .al-tarjeta a:hover { background: var(--al-primary); }

/* ── 6. Footer (sin newsletter — este Figma no la usa) ───────────── */
body.layout-alimentos-figma #footer-newsletter { display: none; }
body.layout-alimentos-figma .footer-rico { background: var(--al-fg); color: #fff; }
body.layout-alimentos-figma .footer-rico a { color: rgba(255,255,255,.6); }
body.layout-alimentos-figma .footer-rico a:hover { color: var(--al-secondary); }