/* ================================================================
   MODA2-FIGMA — Fiel al Figma original (layout-moda2-figma)
   Fuente: estilos figma/Estilo indumentaria 2/src/app/App.tsx
   ================================================================ */

/* ── Paleta + tipografías ──────────────────────────────────────────────── */
body.layout-moda2-figma {
  --m2-bg: var(--color-fondo, #FFFFFF); --m2-fg: #0D0D0D; --m2-card: #FFFFFF;
  --m2-primary: var(--color-primario, #0D0D0D); --m2-primary-fg: #FFFFFF;
  --m2-secondary: #F5F3EF; --m2-secondary-fg: #0D0D0D;
  --m2-muted: #EEECEA; --m2-muted-fg: #908C87;
  --m2-accent: var(--color-acento, #C0392B); --m2-accent-fg: #FFFFFF;
  --m2-border: rgba(13,13,13,0.09);
  --m2-font-display: 'Playfair Display', Georgia, serif;
  --m2-font-body: 'Outfit', system-ui, sans-serif;
  background: var(--m2-bg); color: var(--m2-fg); font-family: var(--m2-font-body);
}
body.layout-moda2-figma h1, body.layout-moda2-figma h2, body.layout-moda2-figma h3 {
  font-family: var(--m2-font-display); font-style: italic; font-weight: 900;
}
/* Diseño chato, sin sombras — coherente con la estética editorial del Figma fuente */
body.layout-moda2-figma * { border-radius: 0 !important; box-shadow: none !important; }
/* Excepción: botones flotantes circulares (whatsapp / volver arriba) — se ven mejor redondos que cuadrados */
body.layout-moda2-figma #back-to-top,
body.layout-moda2-figma .whatsapp-float {
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* ── Announcement bar + navbar ─────────────────────────────────────────── */
body.layout-moda2-figma #banner-envio {
  background: var(--m2-primary); color: var(--m2-primary-fg);
  text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; text-align: center;
}
body.layout-moda2-figma .header-logo-text strong {
  font-family: var(--m2-font-display); font-style: italic; font-weight: 700;
}
body.layout-moda2-figma #category-buttons {
  background: var(--m2-bg); border-bottom: 1px solid var(--m2-border);
}
body.layout-moda2-figma .nav-link-btn, body.layout-moda2-figma .quick-pill, body.layout-moda2-figma .dropdown-btn { color: var(--m2-fg) !important; }
body.layout-moda2-figma #category-buttons a:hover, body.layout-moda2-figma .nav-link-btn:hover, body.layout-moda2-figma .quick-pill:hover { color: var(--m2-accent) !important; }

/* ── Hero split 2 fotos + ticker marquee ───────────────────────────────── */
body.layout-moda2-figma .hero-section { display: none !important; }
body.layout-moda2-figma .hero-section--m2 { display: block !important; min-height: 80vh; }
body.layout-moda2-figma .m2-hero-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); min-height: 80vh; max-height: 80vh; overflow: hidden; }
@media (min-width: 1024px) { body.layout-moda2-figma .m2-hero-grid { grid-template-columns: 1fr 1fr; } }
body.layout-moda2-figma .m2-hero-text { background: var(--m2-secondary); display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem; min-height: 0; overflow: hidden; }
body.layout-moda2-figma .m2-hero-kicker { display: block; text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; margin-bottom: 1rem; color: var(--m2-muted-fg); }
body.layout-moda2-figma .m2-hero-text h1 { font-size: clamp(3.5rem,8vw,7rem); line-height: .95; margin: 0 0 1rem; }
body.layout-moda2-figma .m2-hero-text > p { color: var(--m2-muted-fg); max-width: 22rem; margin: 0 0 2.5rem; font-size: .9rem; line-height: 1.6; }
body.layout-moda2-figma .m2-hero-cta { display: flex; gap: 1.5rem; margin: 0 0 2.5rem; align-items: center; }
body.layout-moda2-figma .m2-hero-cta a:first-child { background: var(--m2-primary); color: var(--m2-primary-fg); padding: 1rem 2rem; text-decoration: none; text-transform: uppercase; font-size: .8rem; letter-spacing: .1em; }
body.layout-moda2-figma .m2-hero-cta a:last-child { text-decoration: underline; color: var(--m2-fg); font-size: .85rem; }
body.layout-moda2-figma .m2-hero-stats { display: flex; gap: 2rem; border-top: 1px solid var(--m2-border); padding-top: 1.5rem; }
body.layout-moda2-figma .m2-hero-stats strong { display: block; font-family: var(--m2-font-display); font-style: italic; font-size: 1.4rem; }
body.layout-moda2-figma .m2-hero-stats span { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--m2-muted-fg); }
body.layout-moda2-figma .m2-hero-imgs { display: grid; grid-template-rows: minmax(0,1fr) minmax(0,1fr); gap: 4px; min-height: 0; height: 100%; overflow: hidden; }
body.layout-moda2-figma .m2-hero-img-1, body.layout-moda2-figma .m2-hero-img-2 { width: 100%; height: 100%; min-height: 0; object-fit: cover; background: var(--m2-muted); display: block; }
body.layout-moda2-figma .m2-hero-img-2-wrap { position: relative; background: var(--m2-fg); min-height: 0; overflow: hidden; }
body.layout-moda2-figma .m2-hero-img-2-wrap span { position: absolute; bottom: 1rem; left: 1rem; background: var(--m2-bg); color: var(--m2-fg); padding: .4rem .8rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
body.layout-moda2-figma .m2-ticker { display: block !important; border-top: 1px solid var(--m2-border); border-bottom: 1px solid var(--m2-border); background: var(--m2-secondary); overflow: hidden; white-space: nowrap; padding: .6rem 0; }
body.layout-moda2-figma .m2-ticker-track { display: flex; gap: 3rem; width: max-content; animation: m2-marquee 18s linear infinite; }
body.layout-moda2-figma .m2-ticker-text { text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; color: var(--m2-muted-fg); padding-right: 3rem; }
@keyframes m2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Tabs de categoría (filtro real — ver products.js) ─────────────────── */

/* ── Grid de productos ──────────────────────────────────────────────────── */
body.layout-moda2-figma #product-list { max-width: 80rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
body.layout-moda2-figma .product-grid { gap: 1.5rem; }
body.layout-moda2-figma .product { border: none; background: transparent; position: relative; }
body.layout-moda2-figma .prod-img-wrap { aspect-ratio: 3/4; position: relative; overflow: hidden; background: var(--m2-secondary); }
body.layout-moda2-figma .product > button:not(.quantity-controls button) {
  position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(100%);
  transition: transform .25s; text-align: center; background: var(--m2-primary); color: var(--m2-primary-fg);
  text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; padding: .9rem 0; border: none;
}
body.layout-moda2-figma .product:hover > button:not(.quantity-controls button) { transform: translateY(0); }
body.layout-moda2-figma .product h3 { font-family: var(--m2-font-body); font-style: normal; font-weight: 500; font-size: .9rem; margin: .75rem 0 .25rem; }
body.layout-moda2-figma .product h3 + p { font-family: var(--m2-font-body); font-weight: 600; }

/* ── Editorial picks + promo full-bleed ────────────────────────────────── */
body.layout-moda2-figma .m2-editorial { display: grid !important; grid-template-columns: 1fr; gap: 1rem; max-width: 80rem; margin: 3rem auto; padding: 0 1.5rem; }
@media (min-width: 640px) { body.layout-moda2-figma .m2-editorial { grid-template-columns: 1fr 1fr; } }
body.layout-moda2-figma .m2-editorial-card { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; text-decoration: none; color: #fff; background: var(--m2-secondary); }
body.layout-moda2-figma .m2-editorial-card img { width: 100%; height: 100%; object-fit: cover; background: var(--m2-muted); }
body.layout-moda2-figma .m2-editorial-card div { position: absolute; inset: 0; background: rgba(0,0,0,.45); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; }
body.layout-moda2-figma .m2-editorial-card div > span:first-child { text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; opacity: .8; margin-bottom: .4rem; }
body.layout-moda2-figma .m2-editorial-card h3 { font-size: clamp(1.6rem,3vw,2.2rem); margin: 0 0 .75rem; }
body.layout-moda2-figma .m2-editorial-card div > span:last-child { align-self: flex-start; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; background: #fff; color: var(--m2-fg); padding: .5rem 1rem; }
body.layout-moda2-figma .m2-promo-full { display: block !important; position: relative; background: var(--m2-primary); color: #fff; text-align: center; padding: 5rem 1rem; overflow: hidden; }
body.layout-moda2-figma .m2-promo-bg-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30vw; font-family: var(--m2-font-display); font-style: italic; font-weight: 900; opacity: .04; pointer-events: none; color: #fff; }
body.layout-moda2-figma .m2-promo-full > span:first-of-type { display: block; text-transform: uppercase; letter-spacing: .25em; font-size: .75rem; color: rgba(255,255,255,.5); margin-bottom: 1.5rem; position: relative; }
body.layout-moda2-figma .m2-promo-full h2 { font-size: clamp(2.5rem,6vw,4.5rem); position: relative; margin: 0 0 1.5rem; color: #fff; }
body.layout-moda2-figma .m2-promo-full p { color: rgba(255,255,255,.6); font-size: .9rem; max-width: 30rem; margin: 0 auto 2.5rem; line-height: 1.6; position: relative; }
body.layout-moda2-figma .m2-promo-full a { display: inline-block; background: #fff; color: var(--m2-fg); padding: 1rem 2.5rem; text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; position: relative; }

/* ── Trust strip + newsletter + footer ─────────────────────────────────── */
body.layout-moda2-figma .strip-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-content: stretch; border-top: 1px solid var(--m2-border); border-bottom: 1px solid var(--m2-border); }
body.layout-moda2-figma .strip-sep { display: none; }
body.layout-moda2-figma .strip-item { max-width: none; min-width: 0; flex: none; justify-content: center; border-left: 1px solid var(--m2-border); border-right: none; padding: 1.5rem 1rem; }
body.layout-moda2-figma .strip-item:first-child { border-left: none; }
body.layout-moda2-figma #footer-newsletter input, body.layout-moda2-figma #footer-newsletter button { border-radius: 0 !important; }
body.layout-moda2-figma .footer-rico { background: var(--m2-primary); color: #fff; }
body.layout-moda2-figma .footer-rico a { color: rgba(255,255,255,.6); }
body.layout-moda2-figma .footer-rico a:hover { color: #fff; }