/* Plantilla Sabor (18-oct-2026): verde albahaca de marco y un color propio por producto
   (tomate, mango, menta, mora, cielo). Bricolage Grotesque gruesa + Hanken Grotesk. */
:root {
  /* Colores de la paleta (tema DaisyUI jc-*): marco = principal; cada producto toma uno de 5 tonos */
  --sb-base: var(--color-primary, #1e5e3a);
  --sb-base-ink: var(--color-primary-content, #f4fbf3);
  --sb-ink: var(--color-base-content, #1c1a17);
  --sb-paper: var(--color-base-100, #ffffff);
  --sb-soft: var(--color-base-200, #f3f6f1);
  --sb-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sb-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root body { background: var(--sb-paper); color: var(--sb-ink); font-family: var(--sb-body); }
.sb-c1 { --sb-c: var(--color-secondary); --sb-cc: var(--color-secondary-content); }
.sb-c2 { --sb-c: var(--color-accent); --sb-cc: var(--color-accent-content); }
.sb-c3 { --sb-c: var(--color-success); --sb-cc: var(--color-success-content); }
.sb-c4 { --sb-c: var(--color-warning); --sb-cc: var(--color-warning-content); }
.sb-c5 { --sb-c: var(--color-info); --sb-cc: var(--color-info-content); }

/* Cabecera */
.sb-head { position: sticky; top: 0; z-index: 30; background: var(--sb-base); color: var(--sb-base-ink); }
.sb-head-row { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px 6px; }
.sb-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .12); border-radius: 50%; color: inherit; font-size: 1.3rem; cursor: pointer; flex: none; }
.sb-brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.sb-logo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--sb-paper); flex: none; }
.sb-name { font: 800 clamp(1.15rem, 3.6vw, 1.6rem)/1 var(--sb-display); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-wa { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--color-secondary); color: var(--color-secondary-content); font: 800 0.9rem var(--sb-display); text-decoration: none; }
.sb-search { max-width: 1200px; margin: 0 auto; padding: 6px 16px 14px; position: relative; }
.sb-search i { position: absolute; left: 32px; top: 50%; transform: translateY(-62%); color: color-mix(in srgb, var(--sb-ink) 60%, var(--sb-paper)); }
.sb-search input { width: 100%; border: 0; border-radius: 999px; padding: 13px 18px 13px 44px; background: var(--sb-paper); color: var(--sb-ink); font: 600 1rem var(--sb-body); outline: none; }
.sb-search input:focus { box-shadow: 0 0 0 3px var(--color-secondary); }

.sb { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Portada: nombre enorme + stickers */
.sb-hero { display: grid; gap: 22px; align-items: center; padding: 26px 0 10px; }
@media (min-width: 900px) { .sb-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 44px 0 20px; } }
.sb-hero-text { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.sb-hero-name { font: 800 clamp(2.6rem, 11vw, 5.6rem)/0.92 var(--sb-display); letter-spacing: -0.045em; overflow-wrap: anywhere; text-wrap: balance; }
.sb-hero-sub { max-width: 38ch; font-size: 1.05rem; line-height: 1.45; color: color-mix(in srgb, var(--sb-ink) 75%, var(--sb-paper)); }
.sb-stickers { position: relative; height: 270px; }
@media (min-width: 900px) { .sb-stickers { height: 380px; } }
.sb-sticker { position: absolute; display: block; width: 58%; aspect-ratio: 1; border-radius: 28px; padding: 10px; background: var(--sb-c); }
.sb-sticker img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }
.sb-stickers-1 .sb-sticker { left: 18%; top: 4%; transform: rotate(-4deg); }
.sb-stickers-2 .sb-sticker:nth-child(1), .sb-stickers-3 .sb-sticker:nth-child(1) { left: 0; top: 6%; transform: rotate(-7deg); z-index: 2; }
.sb-stickers-2 .sb-sticker:nth-child(2), .sb-stickers-3 .sb-sticker:nth-child(2) { right: 0; top: 0; width: 50%; transform: rotate(6deg); }
.sb-stickers-3 .sb-sticker:nth-child(3) { right: 12%; bottom: 0; width: 42%; transform: rotate(-3deg); z-index: 3; }

/* Categorías en píldoras de colores */
.sb-cats { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0 4px; scrollbar-width: none; }
.sb-cats::-webkit-scrollbar { display: none; }
.sb-cats a, .sb-cats button { flex: none; padding: 9px 16px; border-radius: 999px; background: var(--sb-c, var(--sb-soft)); color: var(--sb-cc, var(--sb-ink)); font: 700 0.92rem var(--sb-display); text-decoration: none; border: 0; cursor: pointer; }

/* Grilla */
.sb-grid-wrap { padding: 26px 0 44px; scroll-margin-top: 130px; }
.sb-grid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sb-grid-head h1 { font: 800 clamp(1.5rem, 4vw, 2.2rem)/1.05 var(--sb-display); letter-spacing: -0.03em; text-wrap: balance; }
.sb-grid-head a { color: var(--sb-base); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1080px) { .sb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sb-card { position: relative; min-width: 0; display: grid; align-content: start; border-radius: 26px; padding: 8px; background: var(--sb-c); color: var(--sb-cc); }
.sb-card-img { display: block; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .35); }
.sb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-fav { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sb-paper); color: var(--sb-ink); display: grid; place-items: center; cursor: pointer; }
.sb-fav[aria-pressed="true"] { color: var(--color-error); }
.sb-card-body { display: grid; gap: 10px; padding: 10px 6px 6px; min-width: 0; }
.sb-card-name { color: inherit; text-decoration: none; font: 700 1rem/1.2 var(--sb-display); letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-price { padding: 6px 11px; border-radius: 999px; background: var(--sb-paper); color: var(--sb-ink); font: 800 0.95rem var(--sb-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-plus { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--sb-ink); color: var(--sb-paper); font-size: 1.15rem; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .15s; }
.sb-plus.is-added { background: var(--sb-base); }
@media (prefers-reduced-motion: no-preference) { .sb-plus:active { transform: scale(.9); } }

.sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--sb-ink); color: var(--sb-paper); font: 800 0.98rem var(--sb-display); text-decoration: none; border: 0; }
.sb-btn.ghost { background: var(--sb-soft); color: var(--sb-ink); }
.sb-btn-light { background: var(--color-secondary); color: var(--color-secondary-content); }
.sb-pages { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 34px; color: color-mix(in srgb, var(--sb-ink) 65%, var(--sb-paper)); font-size: 0.88rem; flex-wrap: wrap; }
.sb-empty { padding: 60px 0; display: grid; justify-items: center; gap: 14px; text-align: center; color: color-mix(in srgb, var(--sb-ink) 65%, var(--sb-paper)); }

/* Pie */
.sb-foot { margin-top: 30px; background: var(--sb-base); color: var(--sb-base-ink); }
.sb-foot-in { max-width: 1200px; margin: 0 auto; padding: 42px 16px 30px; display: grid; gap: 18px; justify-items: start; }
.sb-foot-title { font: 800 clamp(2rem, 7vw, 3.6rem)/0.95 var(--sb-display); letter-spacing: -0.04em; }
.sb-foot-row { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.sb-foot-row a, .sb-foot-row span { color: inherit; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.sb-foot-small { opacity: .7; font-size: 0.8rem; }

.sb a:focus-visible, .sb button:focus-visible, .sb-head a:focus-visible, .sb-head button:focus-visible { outline: 3px solid var(--sb-ink); outline-offset: 2px; }
.sb-head a:focus-visible, .sb-head button:focus-visible { outline-color: var(--color-secondary); }

/* Ficha de producto y páginas internas: títulos con la letra de la plantilla */
:root body main h1, :root body main h2, .jc-ad-t { font-family: var(--sb-display); }