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

/* ── 1. Fuentes + paleta ────────────────────────────────────────── */
body.layout-mayorista-figma {
  --my-bg: var(--color-fondo, #FAFAF7); --my-fg: #18180F; --my-card: #FFFFFF;
  --my-primary: var(--color-primario, #1B4D2E); --my-primary-fg: #FAFAF7;
  --my-secondary: #F2EDE3; --my-secondary-fg: #18180F;
  --my-muted: #E8E3D8; --my-muted-fg: #6B6554;
  --my-accent: var(--color-acento, #B97A20); --my-accent-fg: #FAFAF7;
  --my-border: rgba(24,24,15,0.12);
  --my-font-serif: 'Libre Baskerville', Georgia, serif;
  --my-font-sans: 'DM Sans', system-ui, sans-serif;
  --my-font-mono: 'DM Mono', monospace;
  background: var(--my-bg); color: var(--my-fg); font-family: var(--my-font-sans);
}
body.layout-mayorista-figma h1, body.layout-mayorista-figma h2, body.layout-mayorista-figma h3 { font-family: var(--my-font-serif); }
body.layout-mayorista-figma .my-eyebrow, body.layout-mayorista-figma .product > p:not(.prod-desc-card), body.layout-mayorista-figma .strip-info span { font-family: var(--my-font-mono); }

/* ── 2. Topbar + navbar ─────────────────────────────────────────── */
body.layout-mayorista-figma .my-topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--my-primary); color: var(--my-primary-fg);
  font-size: .75rem; padding: .4rem 1.5rem; font-family: var(--my-font-mono);
}
body.layout-mayorista-figma .my-topbar-right { display: flex; gap: .8rem; }
body.layout-mayorista-figma header { background: var(--my-card); border-bottom: 1px solid var(--my-border); }
body.layout-mayorista-figma .header-logo-text strong { font-family: var(--my-font-serif); font-weight: 700; color: var(--my-fg) !important; }
body.layout-mayorista-figma .header-logo-text span { color: var(--my-muted-fg) !important; }
body.layout-mayorista-figma .header-search { background: var(--my-secondary) !important; border-color: var(--my-border) !important; }
body.layout-mayorista-figma .header-search input { color: var(--my-fg) !important; }
body.layout-mayorista-figma .header-search input::placeholder { color: var(--my-muted-fg) !important; }
body.layout-mayorista-figma .header-search-icon { color: var(--my-muted-fg) !important; }
body.layout-mayorista-figma .header-cart-btn { background-color: var(--my-primary) !important; color: var(--my-primary-fg) !important; }
body.layout-mayorista-figma #category-buttons { background: var(--my-card); border-bottom: 1px solid var(--my-border); }
body.layout-mayorista-figma .nav-link-btn, body.layout-mayorista-figma .quick-pill, body.layout-mayorista-figma .dropdown-btn { color: var(--my-fg) !important; }
body.layout-mayorista-figma #category-buttons a:hover, body.layout-mayorista-figma .nav-link-btn:hover, body.layout-mayorista-figma .quick-pill:hover { color: var(--my-primary) !important; }

/* ── 3. Hero split + stats bar ──────────────────────────────────── */
body.layout-mayorista-figma .hero-section { display: none !important; }
body.layout-mayorista-figma .hero-section--my {
  display: block; position: relative; overflow: hidden;
  background: var(--my-primary) center/cover no-repeat;
  padding: 4rem 1.5rem;
}
body.layout-mayorista-figma .hero-section--my::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--my-primary) 45%, rgba(27,77,46,.78) 100%);
}
body.layout-mayorista-figma .my-hero-grid {
  position: relative; z-index: 1;
  max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 1024px) { body.layout-mayorista-figma .my-hero-grid { grid-template-columns: 1.2fr 1fr; } }
body.layout-mayorista-figma .my-hero-badge {
  display: inline-block; background: rgba(255,255,255,.12); color: var(--my-primary-fg);
  border-radius: 999px; padding: .3rem 1rem; font-size: .8rem; margin-bottom: 1rem;
  font-family: var(--my-font-mono); text-transform: uppercase; letter-spacing: .05em;
}
body.layout-mayorista-figma .my-hero-text h1 { color: var(--my-primary-fg); font-size: clamp(2.2rem,4.5vw,3.5rem); line-height: 1.15; margin: 0 0 1.25rem; }
body.layout-mayorista-figma .my-hero-text em { color: var(--my-accent); font-style: normal; }
body.layout-mayorista-figma .my-hero-text p { color: rgba(250,250,247,.75); font-size: 1.05rem; line-height: 1.6; max-width: 32rem; margin: 0 0 2rem; }
body.layout-mayorista-figma .my-hero-cta { display: flex; gap: 1rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
body.layout-mayorista-figma .my-hero-cta a:first-child { background: var(--my-accent); color: var(--my-accent-fg); padding: .9rem 1.8rem; border-radius: .5rem; text-decoration: none; font-weight: 600; }
body.layout-mayorista-figma .my-hero-cta a:last-child { border: 1px solid rgba(255,255,255,.4); color: #fff; padding: .9rem 1.8rem; border-radius: .5rem; text-decoration: none; }
body.layout-mayorista-figma .my-hero-social { font-size: .85rem; color: var(--my-accent); }
body.layout-mayorista-figma .my-hero-stats { display: none; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (min-width: 1024px) { body.layout-mayorista-figma .my-hero-stats { display: grid; } }
body.layout-mayorista-figma .my-hero-stats > div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: .75rem; padding: 1.2rem; }
body.layout-mayorista-figma .my-hero-stats strong { display: block; color: var(--my-accent); font-family: var(--my-font-serif); font-size: 1.6rem; margin-bottom: .25rem; }
body.layout-mayorista-figma .my-hero-stats span { color: rgba(250,250,247,.75); font-size: .75rem; line-height: 1.3; }

/* La statsbar reemplaza al strip-info genérico (evita franja duplicada) */
body.layout-mayorista-figma .strip-info { display: none !important; }
body.layout-mayorista-figma .my-statsbar { display: grid; grid-template-columns: repeat(2,1fr); background: var(--my-secondary); border-top: 1px solid var(--my-border); border-bottom: 1px solid var(--my-border); }
@media (min-width: 768px) { body.layout-mayorista-figma .my-statsbar { grid-template-columns: repeat(4,1fr); } }
body.layout-mayorista-figma .my-statsbar > div { border-left: 1px solid var(--my-border); padding: 1.2rem 1.5rem; }
body.layout-mayorista-figma .my-statsbar > div:first-child,
body.layout-mayorista-figma .my-statsbar > div:nth-child(2) { border-left: none; }
@media (min-width: 768px) { body.layout-mayorista-figma .my-statsbar > div:nth-child(2) { border-left: 1px solid var(--my-border); } }
body.layout-mayorista-figma .my-statsbar span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--my-muted-fg); margin-bottom: .2rem; }
body.layout-mayorista-figma .my-statsbar strong { font-family: var(--my-font-mono); font-weight: 500; font-size: .9rem; }

/* ── 4. Categorías + productos ──────────────────────────────────── */
body.layout-mayorista-figma #categoria-cards, body.layout-mayorista-figma .categoria-cards-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}
body.layout-mayorista-figma #categoria-cards > .cat-visual-card,
body.layout-mayorista-figma .categoria-cards-grid > .cat-visual-card { flex: 0 1 45%; max-width: none; }
@media (min-width: 640px) {
  body.layout-mayorista-figma #categoria-cards > .cat-visual-card,
  body.layout-mayorista-figma .categoria-cards-grid > .cat-visual-card { flex-basis: 30%; }
}
body.layout-mayorista-figma .cat-visual-card {
  background: var(--my-card); border: 1px solid var(--my-border); border-radius: .75rem;
  padding: 1.5rem; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
body.layout-mayorista-figma .cat-visual-card:hover { border-color: var(--my-primary); box-shadow: 0 6px 18px rgba(24,24,15,.08); }
body.layout-mayorista-figma .cat-visual-emoji { font-size: 1.8rem; margin-bottom: .5rem; }
body.layout-mayorista-figma .cat-visual-nombre { font-family: var(--my-font-serif); font-weight: 700; margin-bottom: .25rem; }
body.layout-mayorista-figma .cat-visual-count { font-size: .75rem; color: var(--my-muted-fg); background: var(--my-muted); display: inline-block; padding: .15rem .5rem; border-radius: .35rem; font-family: var(--my-font-mono); }

body.layout-mayorista-figma .product { border: 1px solid var(--my-border); border-radius: .75rem; background: var(--my-card); overflow: hidden; }
body.layout-mayorista-figma .prod-img-wrap { border-radius: .75rem .75rem 0 0; }
body.layout-mayorista-figma .product h3 { font-family: var(--my-font-serif); font-size: .95rem; }
body.layout-mayorista-figma .product > p:not(.prod-desc-card) { color: var(--my-primary); font-weight: 600; }
body.layout-mayorista-figma .product > button { width: 100%; background: var(--my-primary); color: var(--my-primary-fg); border-radius: .5rem; border: none; font-family: var(--my-font-sans); font-weight: 600; }
body.layout-mayorista-figma .product > button:hover { background: #143d24; }
body.layout-mayorista-figma .product .quantity-controls button { background: var(--my-primary); color: var(--my-primary-fg); border: none; }

/* ── 5. Por qué elegirnos + Planes mayoristas ───────────────────── */
body.layout-mayorista-figma .my-whyus { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 80rem; margin: 4rem auto; padding: 0 1.5rem; }
@media (min-width: 1024px) { body.layout-mayorista-figma .my-whyus { grid-template-columns: 1fr 1fr; } }
body.layout-mayorista-figma .my-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--my-accent); display: block; margin-bottom: .5rem; }
body.layout-mayorista-figma .my-whyus-text h2 { font-size: clamp(1.6rem,3vw,2.4rem); margin: 0 0 1.5rem; }
body.layout-mayorista-figma .my-whyus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
body.layout-mayorista-figma .my-whyus-grid strong { display: block; font-family: var(--my-font-sans); font-weight: 700; font-size: .92rem; margin-bottom: .35rem; }
body.layout-mayorista-figma .my-whyus-grid p { font-size: .85rem; color: var(--my-muted-fg); line-height: 1.5; margin: 0; }
body.layout-mayorista-figma .my-whyus-img-wrap { position: relative; aspect-ratio: 4/3; border-radius: 1rem; overflow: hidden; background: var(--my-muted); }
body.layout-mayorista-figma .my-whyus-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

body.layout-mayorista-figma .my-planes { background: var(--my-primary); color: var(--my-primary-fg); text-align: center; padding: 4rem 1.5rem; }
body.layout-mayorista-figma .my-planes .my-eyebrow { color: var(--my-accent); }
body.layout-mayorista-figma .my-planes h2 { font-size: clamp(1.6rem,3vw,2.4rem); margin: 0; }
body.layout-mayorista-figma .my-planes-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 80rem; margin: 2.5rem auto 0; text-align: left; }
@media (min-width: 1024px) { body.layout-mayorista-figma .my-planes-grid { grid-template-columns: repeat(3,1fr); } }
body.layout-mayorista-figma .my-plan { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; padding: 2rem; position: relative; color: var(--my-primary-fg); }
body.layout-mayorista-figma .my-plan-destacado { background: var(--my-accent); border-color: var(--my-accent); color: var(--my-accent-fg); transform: scale(1.03); }
body.layout-mayorista-figma .my-plan-badge { position: absolute; top: -.75rem; right: 1.5rem; background: var(--my-primary); color: #fff; border-radius: 999px; padding: .2rem .8rem; font-size: .7rem; font-family: var(--my-font-mono); text-transform: uppercase; letter-spacing: .05em; }
body.layout-mayorista-figma .my-plan h3 { font-size: 1.35rem; margin: 0 0 .2rem; }
body.layout-mayorista-figma .my-plan > span { display: block; font-size: .75rem; opacity: .75; margin-bottom: 1rem; }
body.layout-mayorista-figma .my-plan > strong { display: block; font-family: var(--my-font-mono); font-size: 1rem; margin-bottom: 1.25rem; }
body.layout-mayorista-figma .my-plan ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
body.layout-mayorista-figma .my-plan li { font-size: .88rem; }
body.layout-mayorista-figma .my-plan li::before { content: "✓ "; font-weight: 700; }
body.layout-mayorista-figma .my-plan-destacado li::before { color: var(--my-fg); }
body.layout-mayorista-figma .my-plan a { display: block; text-align: center; background: rgba(255,255,255,.15); color: var(--my-primary-fg); padding: .8rem; border-radius: .5rem; text-decoration: none; font-weight: 600; font-size: .88rem; }
body.layout-mayorista-figma .my-plan-destacado a { background: var(--my-primary); color: #fff; }

/* ── 6. Cómo funciona + CTA cotización + footer ─────────────────── */
body.layout-mayorista-figma .my-pasos { max-width: 80rem; margin: 4rem auto; padding: 0 1.5rem; text-align: center; }
body.layout-mayorista-figma .my-pasos-head { margin-bottom: 3rem; }
body.layout-mayorista-figma .my-pasos-head h2 { font-size: clamp(1.6rem,3vw,2.4rem); margin: 0; }
body.layout-mayorista-figma .my-pasos-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { body.layout-mayorista-figma .my-pasos-grid { grid-template-columns: repeat(3,1fr); } }
body.layout-mayorista-figma .my-paso-n {
  width: 4rem; height: 4rem; margin: 0 auto 1.2rem; border-radius: 1rem;
  background: rgba(27,77,46,.08); border: 2px solid rgba(27,77,46,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--my-font-mono); font-weight: 700; font-size: 1.2rem; color: var(--my-primary);
}
body.layout-mayorista-figma .my-paso h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
body.layout-mayorista-figma .my-paso p { color: var(--my-muted-fg); font-size: .88rem; line-height: 1.5; max-width: 20rem; margin: 0 auto; }

body.layout-mayorista-figma .my-cta-cotizacion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; background: rgba(185,122,32,0.1); padding: 2rem 1.5rem; }
body.layout-mayorista-figma .my-cta-cotizacion strong { font-family: var(--my-font-serif); font-size: 1.15rem; display: block; margin-bottom: .25rem; }
body.layout-mayorista-figma .my-cta-cotizacion p { margin: 0; color: var(--my-muted-fg); font-size: .9rem; }
body.layout-mayorista-figma .my-cta-cotizacion > div:last-child { display: flex; gap: .75rem; flex-shrink: 0; flex-wrap: wrap; }
body.layout-mayorista-figma .my-cta-cotizacion a:first-child { background: var(--my-primary); color: var(--my-primary-fg); padding: .8rem 1.5rem; border-radius: .5rem; text-decoration: none; font-weight: 600; font-size: .9rem; }
body.layout-mayorista-figma .my-cta-cotizacion a:last-child { border: 1px solid var(--my-border); color: var(--my-fg); padding: .8rem 1.5rem; border-radius: .5rem; text-decoration: none; font-size: .9rem; }

body.layout-mayorista-figma .footer-rico { background: var(--my-primary); color: #fff; }
body.layout-mayorista-figma .footer-rico a { color: rgba(255,255,255,.7); }
body.layout-mayorista-figma .footer-rico a:hover { color: #fff; }
body.layout-mayorista-figma #footer-newsletter { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }