/* ===== Topbar: cinta animada (marquee) ===== */
.topbar {
  background: var(--ink-900); color: #fff; height: var(--topbar-h); overflow: hidden; position: relative;
}
.marquee-track {
  display: flex; width: max-content; height: 100%; animation: marquee-scroll 14s linear infinite;
}
.marquee-track .marquee-item {
  display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 36px;
  font-weight: 800; font-size: .8rem; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase;
}
.marquee-track .marquee-item .off { color: #ffe14d; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ===== Header (una sola fila: logo | búsqueda | cuenta · carrito · categorías) ===== */
.site-header { background: var(--promo-500); position: sticky; top: 0; z-index: 100; }
.site-header .container { display: flex; align-items: center; gap: 16px; height: var(--header-h); }

.logo-badge { display: flex; align-items: center; flex-shrink: 0; }
.logo-badge .mark {
  width: 42px; height: 42px; border-radius: 999px; background: #fff; color: var(--promo-600); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-weight: 800; font-size: 1.05rem; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
/* variante simple (usada en footer/páginas sin header propio) */
.logo { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--primary-600); letter-spacing: -0.02em; flex-shrink: 0; }
.logo span { color: var(--ink-900); }

.header-search { flex: 1; position: relative; max-width: 640px; }
.header-search form { display: flex; }
.header-search input {
  width: 100%; padding: 11px 46px 11px 16px; border-radius: var(--radius-full); border: none;
  background: #fff; font-size: .92rem; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.04);
}
.header-search input:focus { outline: 2px solid rgba(255,255,255,.7); outline-offset: 1px; }
.header-search button {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 38px; border: none; background: var(--ink-900);
  border-radius: var(--radius-full); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.header-search button:hover { background: var(--ink-800); }

.search-suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover); border: 1px solid var(--neutral-200); overflow: hidden; z-index: 50; display: none;
}
.search-suggestions.is-open { display: block; }
.search-suggestions a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.search-suggestions a:hover { background: var(--neutral-50); }
.search-suggestions img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); background: var(--neutral-100); }
.search-suggestions .price { margin-left: auto; font-weight: 700; color: var(--primary-600); font-size: .85rem; }

/* Grupo compacto a la derecha: cuenta · carrito · categorías — mismo tamaño, alineados */
.header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; }
.header-icon-btn {
  position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--radius-md); color: #fff; border: none; background: none; cursor: pointer;
}
.header-icon-btn:hover { background: rgba(255,255,255,.16); }
.header-icon-btn .count {
  position: absolute; top: -2px; right: -2px; background: var(--ink-900); color: #fff; font-size: .62rem;
  font-weight: 700; min-width: 15px; height: 15px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

@media (max-width: 640px) {
  .header-search { order: 3; flex-basis: 100%; max-width: none; margin-top: 10px; }
  .site-header .container { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
}

/* ===== Franja de promo (fina, una sola frase destacada) ===== */
.promo-strip { background: var(--promo-500); color: #fff; }
.promo-strip .container { display: flex; align-items: center; justify-content: center; padding: 8px 20px; font-size: .78rem; text-align: center; }
.promo-strip strong { font-weight: 800; letter-spacing: .04em; }

/* Menu mobile (drawer) */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 300; display: none;
}
.mobile-drawer.is-open { display: block; }
.mobile-drawer-backdrop { position: absolute; inset: 0; background: rgba(38,44,48,.5); }
.mobile-drawer-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(340px, 86vw); background: #fff; overflow-y: auto;
  padding: 18px; box-shadow: var(--shadow-popover);
}
.mobile-drawer-panel h3 { margin-top: 18px; font-size: .9rem; text-transform: uppercase; color: var(--ink-500); letter-spacing: .04em; }
.mobile-drawer-panel a.mobile-cat-link { display: flex; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--neutral-100); font-weight: 600; }
.mobile-drawer-close { float: right; background: none; border: none; padding: 8px; cursor: pointer; }

/* ===== Footer ===== */
.site-footer { background: var(--ink-900); color: var(--neutral-200); margin-top: 64px; }
.site-footer .container { padding-left: 32px; padding-right: 32px; }
.footer-top { padding: 56px 0 40px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; align-items: start; justify-items: start; }
@media (max-width: 900px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr; gap: 32px; } .footer-brand { grid-column: auto; } }

.footer-col h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 16px; font-family: var(--font-body); font-weight: 700; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: .88rem; opacity: .78; line-height: 1.3; }
.footer-col a:hover { opacity: 1; text-decoration: underline; }

.footer-brand .logo-badge .name { color: #fff; }
.footer-brand p { font-size: .85rem; opacity: .72; margin: 14px 0 20px; max-width: 30ch; line-height: 1.5; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-social a:hover { background: var(--primary-500); }

.footer-newsletter { display: flex; gap: 8px; margin-top: 16px; }
.footer-newsletter input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--radius-md); border: none; font-size: .85rem; }
.footer-newsletter .btn { flex-shrink: 0; }

.footer-payments { padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-payments img {
  max-width: 360px; width: 100%; height: auto;
}

.footer-legal { padding: 22px 0 32px; font-size: .78rem; opacity: .68; display: flex; flex-direction: column; gap: 8px; line-height: 1.6; }

/* Layout general de página */
.page-section { padding-top: 40px; padding-bottom: 40px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.section-heading a { font-weight: 700; color: var(--primary-600); font-size: .9rem; }