/* ---------------------------- Slim promo banner ---------------------------- */
.promo-banner { position: relative; border-radius: var(--radius-md); overflow: hidden; margin-block: var(--space-4); aspect-ratio: 21/6; }
.promo-banner img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .promo-banner { aspect-ratio: 4/3; } }

/* ---------------------------- Category strip (horizontal scroll) ---------------------------- */
.category-strip-wrap { padding-block: var(--space-5); }
.category-strip-wrap h2 { font-size: 1.3rem; margin-bottom: var(--space-4); }
.category-strip {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
  scrollbar-width: thin;
}
.category-strip::-webkit-scrollbar { height: 6px; }
.category-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.category-strip-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 132px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.6em;
}
.category-strip-item .thumb {
  width: 108px; height: 108px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-100);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.category-strip-item:hover .thumb { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.category-strip-item img { width: 100%; height: 100%; object-fit: cover; }
.category-strip-item span { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-700); }
.category-strip-item.is-soon { opacity: 0.5; }
.category-strip-item.is-soon .thumb { background: var(--paper-200); }

.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------------------------- Story split (about.html) ---------------------------- */
.story-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); align-items: center; }
.story-media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1; background: var(--coral-100); }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.story-copy p + p { margin-top: var(--space-4); }
@media (max-width: 860px) { .story-split { grid-template-columns: 1fr; } }

/* ---------------------------- CTA band (about.html) ---------------------------- */
.cta-band {
  background: var(--coral-050);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--space-3); }

/* ---------------------------- Product section (heading + "ver todo") ---------------------------- */
.product-section { padding-block: var(--space-6); border-top: 1px solid var(--border); }
.product-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.product-section-head h2 { font-size: 1.4rem; display: flex; align-items: center; gap: 0.5em; }
.product-section-head h2 svg { width: 20px; height: 20px; stroke: var(--coral-600); }
.product-section-head a { font-size: 0.86rem; font-weight: 700; color: var(--teal-700); white-space: nowrap; }
.product-section-head a:hover { color: var(--teal-900); }