/* ================================================================
   MODACO-FIGMA — Fiel al Figma original (layout-modaco-figma)
   Fuente: estilos figma/Estilo para venta de indumentaria/src/app/App.tsx
   Cero radius, sin sombras, tipografía monospace en labels/precios.
   ================================================================ */

/* ── Step 1: Paleta base + tokens ──────────────────────────────────────── */
body.layout-modaco-figma {
  --mc-bg: var(--color-fondo, #FFFFFF); --mc-fg: var(--color-primario, #0A0A0A); --mc-secondary: #F4F4F4;
  --mc-muted-fg: #737373; --mc-accent: var(--color-acento, #E8000D); --mc-accent-fg: #FFFFFF;
  --mc-border: #E5E5E5;
  --mc-font-serif: 'Libre Baskerville', Georgia, serif;
  --mc-font-sans: 'DM Sans', system-ui, sans-serif;
  --mc-font-mono: 'DM Mono', monospace;
  background: var(--mc-bg); color: var(--mc-fg); font-family: var(--mc-font-sans);
}
body.layout-modaco-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-modaco-figma #back-to-top,
body.layout-modaco-figma .whatsapp-float {
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}
body.layout-modaco-figma h1, body.layout-modaco-figma h2, body.layout-modaco-figma h3 { font-family: var(--mc-font-serif); }
body.layout-modaco-figma .product p, body.layout-modaco-figma #banner-envio,
body.layout-modaco-figma .prod-etiqueta, body.layout-modaco-figma .prod-off-badge, body.layout-modaco-figma .prod-precio-anterior,
body.layout-modaco-figma .quick-pill, body.layout-modaco-figma .nav-link-btn,
body.layout-modaco-figma .product > button:not(.quantity-controls button), body.layout-modaco-figma .quantity-controls,
body.layout-modaco-figma .footer-col-title, body.layout-modaco-figma #footer-texto, body.layout-modaco-figma .footer-item-icon,
body.layout-modaco-figma .mc-grid-header span, body.layout-modaco-figma .mc-hero-text span, body.layout-modaco-figma .mc-hero-cta a,
body.layout-modaco-figma .mc-hero-badge, body.layout-modaco-figma .mc-promo-overlay span, body.layout-modaco-figma .mc-promo-overlay a,
body.layout-modaco-figma .mc-testimonials > span, body.layout-modaco-figma .mc-testi-grid span:last-child {
  font-family: var(--mc-font-mono);
}

/* ── Step 2: Announcement bar + navbar ─────────────────────────────────── */
body.layout-modaco-figma #banner-envio {
  background: var(--mc-fg); color: #fff; text-align: center;
  text-transform: uppercase; font-size: .7rem; letter-spacing: .2em; padding: .6rem 1rem;
}
body.layout-modaco-figma .banner-envio strong { color: #fff; }
body.layout-modaco-figma header { border-bottom: 1px solid var(--mc-border); box-shadow: none; }
body.layout-modaco-figma .header-logo-text strong { font-family: var(--mc-font-serif); font-weight: 700; letter-spacing: -.03em; }
body.layout-modaco-figma .header-search { border: 1px solid var(--mc-border); background: var(--mc-bg); }
body.layout-modaco-figma .header-search input { font-family: var(--mc-font-sans); }
body.layout-modaco-figma .nav-link-btn { text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; }
body.layout-modaco-figma .quick-pill {
  border: 1px solid var(--mc-border); background: var(--mc-bg); color: var(--mc-muted-fg);
  text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; padding: .45rem 1rem;
}
body.layout-modaco-figma .quick-pill:hover, body.layout-modaco-figma .quick-pill.active {
  background: var(--mc-fg); color: #fff; border-color: var(--mc-fg);
}

/* ── Step 3: Hero split fijo (texto negro / imagen) ────────────────────── */
body.layout-modaco-figma .hero-section { display: none !important; }
body.layout-modaco-figma .hero-section--mc { display: block !important; border-bottom: 1px solid var(--mc-border); }
body.layout-modaco-figma .mc-hero-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { body.layout-modaco-figma .mc-hero-grid { grid-template-columns: 1fr 480px; } }
body.layout-modaco-figma .mc-hero-text { background: var(--mc-fg); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 3rem 2.5rem; min-height: 420px; }
@media (min-width: 1024px) { body.layout-modaco-figma .mc-hero-text { padding: 4rem 3rem; min-height: 580px; } }
body.layout-modaco-figma .mc-hero-text > span { text-transform: uppercase; letter-spacing: .3em; font-size: .7rem; opacity: .6; margin-bottom: 1.5rem; display: block; }
body.layout-modaco-figma .mc-hero-text h1 { font-size: clamp(2.5rem,7vw,4.5rem); line-height: .95; margin: 0 0 1.5rem; letter-spacing: -.03em; }
body.layout-modaco-figma .mc-hero-text em { color: var(--mc-accent); font-style: normal; }
body.layout-modaco-figma .mc-hero-text p { font-family: var(--mc-font-sans); font-weight: 300; opacity: .7; max-width: 22rem; line-height: 1.6; }
body.layout-modaco-figma .mc-hero-cta { display: flex; gap: 1.5rem; margin-top: 2.5rem; align-items: center; flex-wrap: wrap; }
body.layout-modaco-figma .mc-hero-cta a:first-child { background: #fff; color: var(--mc-fg); padding: 1rem 2rem; text-decoration: none; text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; font-weight: 600; }
body.layout-modaco-figma .mc-hero-cta a:first-child:hover { background: var(--mc-accent); color: #fff; }
body.layout-modaco-figma .mc-hero-cta a:last-child { color: #fff; text-decoration: underline; font-size: .75rem; opacity: .85; }
body.layout-modaco-figma .mc-hero-img-wrap { position: relative; min-height: 260px; }
body.layout-modaco-figma .mc-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--mc-secondary); display: block; }
body.layout-modaco-figma .mc-hero-badge {
  position: absolute; bottom: 1rem; right: 1rem; background: var(--mc-accent); color: #fff;
  text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; padding: .4rem .8rem; font-weight: 700;
}

/* ── Step 4: Categorías reales (grilla emoji / carrusel con foto) + tabs ── */
body.layout-modaco-figma #categorias-visuales,
body.layout-modaco-figma #cat-carousel-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
body.layout-modaco-figma .seccion-titulo { font-family: var(--mc-font-serif); border-bottom: 1px solid var(--mc-border); padding-bottom: .8rem; }

body.layout-modaco-figma .categoria-cards-grid { gap: 4px; }
body.layout-modaco-figma .cat-visual-card:first-child { grid-column: span 2; }
body.layout-modaco-figma .cat-visual-card { border: 1px solid var(--mc-border); background: var(--mc-secondary); }
body.layout-modaco-figma .cat-visual-card:hover { border-color: var(--mc-fg); box-shadow: none; }

body.layout-modaco-figma .cat-carousel-card { border-radius: 0; }
body.layout-modaco-figma .cat-carousel-card-overlay { background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.1) 55%, transparent); }
body.layout-modaco-figma .cat-carousel-card-label { font-family: var(--mc-font-serif); font-size: 1.4rem; text-transform: none; letter-spacing: 0; }

/* Encabezado de la grilla de productos ("Selección editorial / Destacados") + tabs de filtro */
body.layout-modaco-figma .mc-grid-header {
  max-width: 80rem; margin: 3rem auto 2rem; padding: 0 1rem 1.5rem;
  border-bottom: 1px solid var(--mc-border);
  display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; align-items: flex-start;
}
@media (min-width: 640px) { body.layout-modaco-figma .mc-grid-header { flex-direction: row; align-items: flex-end; } }
body.layout-modaco-figma .mc-grid-header > div:first-child span { text-transform: uppercase; letter-spacing: .3em; font-size: .7rem; color: var(--mc-muted-fg); display: block; margin-bottom: .3rem; }
body.layout-modaco-figma .mc-grid-header h2 { font-size: clamp(1.7rem,3vw,2.4rem); margin: 0; letter-spacing: -.02em; }

/* ── Step 5: Grid de productos + promo Sale + testimonials ─────────────── */
body.layout-modaco-figma .product-grid { gap: 1.25rem 1.25rem; row-gap: 2.5rem; }
body.layout-modaco-figma .product { padding-bottom: 0; }
body.layout-modaco-figma .prod-img-wrap { aspect-ratio: 3/4; background: var(--mc-secondary); position: relative; }
body.layout-modaco-figma .prod-fav-btn { border-radius: 0 !important; background: rgba(255,255,255,.85); }
body.layout-modaco-figma .prod-etiqueta, body.layout-modaco-figma .prod-off-badge {
  text-transform: uppercase; letter-spacing: .1em; font-size: .62rem; font-weight: 700;
  background: var(--mc-fg); color: #fff; padding: .2rem .5rem;
}
body.layout-modaco-figma .prod-off-badge { background: var(--mc-accent); }
body.layout-modaco-figma .product h3 { font-family: var(--mc-font-sans); font-weight: 500; text-transform: none; color: var(--mc-fg) !important; }
body.layout-modaco-figma .product p { color: var(--mc-fg) !important; letter-spacing: 0; }
body.layout-modaco-figma .prod-precio-anterior { color: var(--mc-muted-fg) !important; text-decoration: line-through; margin-left: .4rem; font-size: .8em; }
body.layout-modaco-figma .product > button:not(.quantity-controls button) {
  background: var(--mc-fg); color: #fff; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
  width: 100%; margin: 0; padding: .85rem .8rem;
}
body.layout-modaco-figma .product > button:not(.quantity-controls button):hover {
  background: var(--mc-accent); filter: none; transform: none; box-shadow: none !important;
}
body.layout-modaco-figma .quantity-controls { background: var(--mc-fg); margin: 0; width: 100%; }
body.layout-modaco-figma .quantity-controls button { color: #fff; }
body.layout-modaco-figma .quantity-controls span { color: #fff; }

body.layout-modaco-figma .mc-promo {
  position: relative; height: 320px; margin: 3rem 0;
  background: var(--mc-fg); color: #fff; overflow: hidden;
}
@media (min-width: 1024px) { body.layout-modaco-figma .mc-promo { height: 440px; } }
body.layout-modaco-figma .mc-promo::before {
  content: 'SALE'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mc-font-serif); font-size: 22vw; color: rgba(255,255,255,.05); pointer-events: none; white-space: nowrap;
}
body.layout-modaco-figma .mc-promo-overlay { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; }
body.layout-modaco-figma .mc-promo-overlay span:first-child { text-transform: uppercase; letter-spacing: .4em; font-size: .7rem; opacity: .6; margin-bottom: 1rem; }
body.layout-modaco-figma .mc-promo-overlay h2 { font-size: clamp(2.5rem,7vw,5rem); line-height: .95; margin: 0 0 1.5rem; letter-spacing: -.03em; }
body.layout-modaco-figma .mc-promo-overlay em { color: var(--mc-accent); font-style: normal; }
body.layout-modaco-figma .mc-promo-overlay a {
  background: #fff; color: var(--mc-fg); padding: .9rem 2.2rem; text-decoration: none;
  text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; font-weight: 700;
}
body.layout-modaco-figma .mc-promo-overlay a:hover { background: var(--mc-accent); color: #fff; }

body.layout-modaco-figma .mc-testimonials { max-width: 80rem; margin: 0 auto 4rem; padding: 0 1rem; text-align: center; }
body.layout-modaco-figma .mc-testimonials > span { display: block; text-transform: uppercase; letter-spacing: .3em; font-size: .7rem; color: var(--mc-muted-fg); border-top: 1px solid var(--mc-border); border-bottom: 1px solid var(--mc-border); padding: 2.5rem 0 2.5rem; margin-bottom: 2.5rem; }
body.layout-modaco-figma .mc-testi-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { body.layout-modaco-figma .mc-testi-grid { grid-template-columns: repeat(3,1fr); } }
body.layout-modaco-figma .mc-testi-grid > div { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
body.layout-modaco-figma .mc-stars { color: var(--mc-accent); letter-spacing: .1em; }
body.layout-modaco-figma .mc-testi-grid p { font-family: var(--mc-font-serif); font-style: italic; font-size: .95rem; line-height: 1.6; color: var(--mc-fg); opacity: .85; }
body.layout-modaco-figma .mc-testi-grid span:last-child { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--mc-muted-fg); }

/* ── Step 6: Newsletter banda negra + footer + carrito ──────────────────── */
body.layout-modaco-figma #footer-newsletter { background: var(--mc-fg); color: #fff; border: none; }
body.layout-modaco-figma #footer-newsletter h4, body.layout-modaco-figma #footer-newsletter p { color: #fff; }
body.layout-modaco-figma #footer-newsletter .fn-text h4 { font-family: var(--mc-font-serif); }
body.layout-modaco-figma #footer-newsletter .fn-text p { opacity: .6; font-family: var(--mc-font-sans); font-weight: 300; }
body.layout-modaco-figma #newsletter-email { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; }
body.layout-modaco-figma #newsletter-email::placeholder { color: rgba(255,255,255,.4); }
body.layout-modaco-figma #footer-newsletter button[type="submit"] {
  background: var(--mc-accent); color: #fff; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700;
}
body.layout-modaco-figma .footer-rico { background: var(--mc-secondary); color: var(--mc-fg); border-top: 1px solid var(--mc-border); }
body.layout-modaco-figma .footer-rico a { color: var(--mc-muted-fg); }
body.layout-modaco-figma .footer-rico a:hover { color: var(--mc-fg); }
body.layout-modaco-figma .footer-col-title { letter-spacing: .15em; font-size: .68rem; }

body.layout-modaco-figma #cart { font-family: var(--mc-font-sans); }
body.layout-modaco-figma .cart-header-title { font-family: var(--mc-font-serif); }
body.layout-modaco-figma .stepper-circle { border-radius: 0 !important; }
body.layout-modaco-figma .btn-confirmar-pedido, body.layout-modaco-figma .btn-step-next, body.layout-modaco-figma .btn-step-back {
  font-family: var(--mc-font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
}
body.layout-modaco-figma .metodo-opcion.active { background: var(--mc-fg); border-color: var(--mc-fg); color: #fff; }

@media (max-width: 640px) {
  body.layout-modaco-figma .mc-hero-text { padding: 2.5rem 1.5rem; min-height: auto; }
  body.layout-modaco-figma .mc-hero-img-wrap { min-height: 320px; }
}