/* ============ Franja superior ============ */
.promo-strip { background: var(--red); color: #fff; font-size: 0.82rem; font-weight: 600; }
.promo-strip__inner { display: flex; justify-content: center; gap: 8px 28px; flex-wrap: wrap; padding-block: 8px; text-align: center; }
.promo-strip strong { font-weight: 800; color: var(--yellow); }
.promo-strip { position: relative; overflow: hidden; transition: max-height 0.4s var(--ease), opacity 0.3s; }
.promo-strip.is-closing { max-height: 0 !important; opacity: 0; }
.promo-strip__inner { padding-inline: 48px; } /* deja lugar a la cruz sin pisar el texto */
.promo-strip__close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  background: transparent; color: #fff; border: 0; border-radius: 50%; opacity: 0.85;
  transition: background-color 0.15s, opacity 0.15s;
}
.promo-strip__close:hover { background: rgba(255, 255, 255, 0.2); opacity: 1; }
.promo-strip__close:focus-visible { outline-color: #fff; }

/* ============ Header ============ */
/* El contenedor no genera caja propia: así el header "pegajoso" se mueve dentro de todo el body */
#site-header { display: contents; }
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.header__main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 24px; padding-block: 12px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand__iso { width: 42px; height: 42px; border-radius: 4px; }
.brand__name {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.55rem; letter-spacing: -0.03em; color: var(--red); line-height: 1;
}

.search { position: relative; grid-column: 1 / -1; grid-row: 2; }
.search__field { position: relative; }
.search__input {
  width: 100%; min-height: 46px; padding: 0 52px 0 16px;
  background: var(--bg-soft); border: 1.5px solid transparent; border-radius: var(--radius);
}
.search__input:focus { outline: none; background: #fff; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.search__btn {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 42px;
  display: grid; place-items: center; border: 0; border-radius: 4px; background: var(--ink); color: #fff;
}
.search__btn:hover { background: var(--red); }
.search__suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; max-height: min(70vh, 480px); overflow-y: auto;
  color: var(--ink); /* no hereda el color de la píldora (blanco sobre fondo oscuro) */
}
.suggest__item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; }
.suggest__item:hover, .suggest__item[aria-selected='true'] { background: var(--bg-soft); }
.suggest__img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 4px; }
.suggest__name { font-size: 0.92rem; font-weight: 500; line-height: 1.3; }
.suggest__price { font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
.suggest__all { display: block; padding: 12px 14px; text-align: center; font-weight: 700; font-size: 0.88rem; border-top: 1px solid var(--line); }
.suggest__empty { padding: 16px; color: var(--muted); text-align: center; font-size: 0.92rem; }

.header__actions { display: flex; align-items: center; gap: 8px; grid-column: 3; grid-row: 1; }
.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px;
  background: var(--yellow); border: 0; border-radius: var(--radius); font-weight: 700;
}
.cart-btn:hover { background: #f0dd00; }
.cart-btn__count {
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--red); color: #fff; border-radius: 999px; font-size: 0.78rem; font-weight: 800;
}
.cart-btn__count[data-empty='true'] { background: var(--ink); }
.cart-btn__label { display: none; }
.cart-btn.bump { animation: bump 0.35s var(--ease); }
@keyframes bump { 40% { transform: scale(1.1); } }

.nav { border-top: 1px solid var(--line); }
.nav__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 4px; }
.nav__list::-webkit-scrollbar { display: none; }
.nav__link {
  flex: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 0 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.03em; text-transform: uppercase;
  position: relative;
}
.nav__link::after {
  content: ''; position: absolute; left: 9px; right: 9px; bottom: 0; height: 3px;
  background: var(--red); border-radius: 3px 3px 0 0;
  transform: scaleX(0); transform-origin: left center; transition: transform 0.32s var(--ease);
}
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link--sale { color: var(--red); }

@media (min-width: 900px) {
  .header__main { grid-template-columns: auto minmax(0, 1fr) auto; padding-block: 14px; }
  .search { grid-column: 2; grid-row: 1; max-width: 640px; justify-self: center; width: 100%; }
  .cart-btn__label { display: inline; }
}

/* ============ Footer ============ */
.site-footer { background: var(--ink); color: #d9d9d2; margin-top: 0; }
.footer__top { display: grid; gap: 36px; padding-block: 56px; }
.footer__brand .brand__name { color: var(--yellow); }
.footer__tagline { margin-top: 14px; max-width: 34ch; color: #b5b5ac; }
.footer__col h3 { font-family: var(--font-display); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
.footer__col li + li { margin-top: 8px; }
.footer__col a { color: #d9d9d2; }
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { border-top: 1px solid #2c2c28; padding-block: 18px; font-size: 0.82rem; color: #8d8d85; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (min-width: 800px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ============ Migas de pan ============ */
.breadcrumb { padding-block: 16px; font-size: 0.84rem; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0; list-style: none; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: #b9b9b0; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 600; }

/* ============ WhatsApp flotante ============ */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 54px; height: 54px;
  display: grid; place-items: center; background: #25d366; color: #fff; border-radius: 50%;
  box-shadow: var(--shadow); transition: transform 0.15s var(--ease);
}
.wa-float:hover { transform: scale(1.06); }

/* ============ Hamburguesa + menú desplegable ============ */
.burger {
  display: none; place-items: center; width: 46px; height: 46px; padding: 0;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--radius);
}
.burger:active { transform: scale(0.95); }

.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.28s; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 90vw);
  display: flex; flex-direction: column; gap: 16px; padding: 14px 18px 20px; overflow-y: auto;
  background: #fff; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.2);
  transform: translateX(100%); transition: transform 0.3s var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__head .brand__iso { width: 36px; height: 36px; }
.drawer__head .brand__name { font-size: 1.35rem; }
.drawer__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--bg-soft); border-radius: 50%; }
.drawer .search { grid-column: auto; grid-row: auto; max-width: none; }
.drawer__sale {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  background: var(--yellow); border-radius: var(--radius-lg);
  font-family: var(--font-display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em;
}
.drawer__cat { border-bottom: 1px solid var(--line); }
.drawer__cat summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em;
}
.drawer__cat summary::-webkit-details-marker { display: none; }
.drawer__cat summary::after {
  content: ''; flex: none; width: 16px; height: 16px; margin-left: auto; color: var(--red);
  background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat;
  transition: background-size 0.3s var(--ease), transform 0.35s var(--ease);
}
.drawer__cat.is-open summary::after { background-size: 100% 2.5px, 2.5px 0%; transform: rotate(180deg); }
.drawer__cat.is-open summary { color: var(--red); }
.drawer__cat summary { transition: color 0.25s; }
.drawer__cat-body { overflow: hidden; }
.drawer__cat ul { padding-bottom: 10px; }
.drawer__cat li a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 4px 11px 12px; color: var(--ink-2); border-radius: 6px; }
.drawer__cat li a:active, .drawer__cat li a:hover { background: var(--bg-soft); color: var(--ink); }
.drawer__count { font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; color: var(--muted); }
.drawer__foot { margin-top: auto; display: grid; gap: 12px; padding-top: 8px; }
.drawer__link { text-align: center; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ============ Celular: header flotante ============ */
@media (max-width: 899px) {
  .promo-strip { display: none; }
  .site-header {
    top: 10px; margin: 10px 10px 0; border: 1px solid var(--line); border-radius: 18px;
    background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 6px 24px rgba(17, 17, 17, 0.14);
  }
  .header__main { grid-template-columns: 1fr auto; column-gap: 6px; padding-block: 8px; padding-inline: 12px; }
  .brand__iso { width: 38px; height: 38px; }
  .brand__name { font-size: 1.4rem; }
  .search--desktop, .nav { display: none; }
  .burger { display: grid; }
  .cart-btn { padding: 0 9px; gap: 6px; }
  /* con pin + carrito + menú hay que ahorrar lugar para que entre el nombre completo del logo */
  .header__actions { gap: 6px; grid-column: 2; } /* en celular la grilla tiene 2 columnas (logo | acciones) */
  .header__actions .pin-btn, .header__actions .burger { width: 40px; height: 44px; }
  .brand { gap: 8px; }
  .brand__name { font-size: 1.3rem; max-width: none; }
}

/* ============ Intro con el logo (sólo celular, una vez por sesión) ============ */
.splash { display: none; }
@media (max-width: 899px) {
  .splash {
    position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 18px;
    background: var(--yellow);
    animation: splash-out 0.5s 2.1s ease forwards;
  }
  .no-splash .splash { display: none; }
  .splash__iso { width: 112px; height: 112px; border-radius: 22px; animation: splash-pop 0.9s var(--ease) both; box-shadow: 0 12px 40px rgba(226, 6, 19, 0.35); }
  .splash__name {
    font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 2.6rem; letter-spacing: -0.03em; color: var(--red);
    animation: splash-rise 0.7s 0.5s var(--ease) both;
  }
  .splash__tag { font-weight: 600; font-size: 0.95rem; color: var(--ink); animation: splash-rise 0.7s 0.8s var(--ease) both; }
  .splash__bar { width: 120px; height: 4px; border-radius: 4px; background: rgba(17, 17, 17, 0.15); overflow: hidden; }
  .splash__bar::after { content: ''; display: block; height: 100%; background: var(--red); transform-origin: left; animation: splash-load 1.9s 0.1s ease-in-out both; }
}
@keyframes splash-pop { 0% { transform: scale(0.3) rotate(-14deg); opacity: 0; } 60% { transform: scale(1.1) rotate(3deg); opacity: 1; } 100% { transform: none; } }
@keyframes splash-rise { from { transform: translateY(14px); opacity: 0; } }
@keyframes splash-load { from { transform: scaleX(0); } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash { display: none !important; } }

/* =====================================================================
   Escritorio: la barra se convierte en una píldora flotante al scrollear
   y pasa de blanca a amarilla al dejar atrás la portada (data-tone).
   ===================================================================== */
.site-header {
  --pill-bg: #fff; --pill-fg: var(--ink); --pill-brand: var(--red);
  --pill-field: var(--bg-soft); --pill-field-fg: var(--ink); --pill-field-ph: var(--muted);
  --pill-btn: var(--yellow); --pill-btn-fg: var(--ink);
  --pill-burger: transparent; --pill-burger-fg: var(--red); --pill-border: var(--line);
}
/* sobre la portada: píldora blanca */
.site-header.is-floating[data-tone='white'] {
  --pill-bg: #fff; --pill-fg: var(--ink); --pill-brand: var(--red);
  --pill-field: var(--bg-soft); --pill-field-fg: var(--ink); --pill-field-ph: var(--muted);
  --pill-btn: var(--ink); --pill-btn-fg: #fff; --pill-burger: transparent; --pill-burger-fg: var(--red); --pill-border: transparent;
}
/* una vez pasada la portada: píldora amarilla */
.site-header.is-floating[data-tone='yellow'] {
  --pill-bg: var(--yellow); --pill-fg: var(--ink); --pill-brand: var(--red);
  --pill-field: rgba(17, 17, 17, 0.08); --pill-field-fg: var(--ink); --pill-field-ph: var(--ink-2);
  --pill-btn: var(--ink); --pill-btn-fg: #fff; --pill-burger: transparent; --pill-burger-fg: var(--red); --pill-border: transparent;
}

.site-header .brand__name { color: var(--pill-brand); display: inline-block; max-width: 240px; padding-right: 3px; overflow: hidden; white-space: nowrap; transition: color 0.35s, max-width 0.45s var(--ease), opacity 0.3s; }
.site-header .search__input { background: var(--pill-field); color: var(--pill-field-fg); transition: background-color 0.35s, color 0.35s, border-color 0.2s, box-shadow 0.3s; }
.site-header .search__input::placeholder { color: var(--pill-field-ph); opacity: 1; }
.site-header .search__input { text-overflow: ellipsis; }
.site-header .search__input:focus { background: #fff; color: var(--ink); }
.site-header .search__input:focus::placeholder { color: var(--muted); }
.site-header .cart-btn { background: var(--pill-btn); color: var(--pill-btn-fg); transition: background-color 0.35s, color 0.35s, transform 0.2s; }
.site-header .cart-btn:hover { filter: brightness(0.95); }
.site-header .burger { background: var(--pill-burger); color: var(--pill-burger-fg); transition: color 0.35s, transform 0.2s; }
.site-header .burger:hover { transform: scale(1.12); }

@media (min-width: 900px) {
  /* La caja del header conserva su altura: al flotar, el contenido de abajo no salta */
  .site-header { height: var(--hdr-h, auto); background: none; border: 0; pointer-events: none; }
  .header__shell {
    pointer-events: auto; position: relative; top: 0; width: 100%; margin: 0 auto;
    background: var(--pill-bg); color: var(--pill-fg);
    border-bottom: 1px solid var(--pill-border); border-radius: 0; box-shadow: 0 0 0 rgba(17, 17, 17, 0);
    transition: width 0.55s var(--ease), top 0.55s var(--ease), border-radius 0.55s var(--ease),
      box-shadow 0.45s, background-color 0.35s, color 0.35s;
  }
  .nav { overflow: hidden; max-height: 64px; transition: max-height 0.45s var(--ease), opacity 0.25s, border-color 0.3s; }
  .search--desktop { transition: max-width 0.5s var(--ease); }
  .search--desktop .search__suggest { transform-origin: top center; animation: suggest-in 0.22s var(--ease); }

  .site-header.is-floating .header__shell {
    width: min(1120px, calc(100% - 48px)); top: 14px; border-radius: 999px;
    box-shadow: 0 14px 44px rgba(17, 17, 17, 0.28);
  }
  .site-header.is-floating .nav { max-height: 0; opacity: 0; border-color: transparent; pointer-events: none; }
  .site-header.is-floating .header__main { padding-block: 5px; }
  .site-header.is-floating .header__main.container { max-width: none; padding-inline: 14px 10px; }
  .site-header.is-floating .brand__iso { width: 34px; height: 34px; }
  .site-header.is-floating .brand__name { font-size: 1.3rem; }
  .site-header.is-floating .search__input { min-height: 38px; font-size: 0.92rem; }
  .site-header.is-floating .search__btn { top: 3px; bottom: 3px; width: 34px; }
  .site-header.is-floating .search__input { padding-right: 44px; }
  .site-header.is-floating .cart-btn { min-height: 38px; padding: 0 12px; font-size: 0.92rem; }
  .site-header.is-floating .cart-btn__count { min-width: 20px; height: 20px; font-size: 0.72rem; }
  .site-header.is-floating .burger { width: 40px; height: 38px; }

  /* buscador compacto en la píldora; al enfocarlo se abre y el nombre de la marca le cede lugar */
  .site-header.is-floating .search--desktop { max-width: 300px; }
  .site-header.is-floating .search--desktop:focus-within { max-width: 640px; }
  .site-header.is-floating:has(.search--desktop:focus-within) .brand__name { max-width: 0; opacity: 0; }
  .site-header.is-floating .search--desktop:focus-within .search__input { box-shadow: 0 0 0 4px var(--red); border-color: var(--ink); }

  .site-header.is-floating .burger { display: grid; animation: burger-in 0.45s 0.15s var(--ease) both; }
  .site-header.is-floating .burger svg { width: 28px; height: 28px; }
}
@keyframes burger-in { from { opacity: 0; transform: scale(0.4) rotate(-90deg); } }
@keyframes suggest-in { from { opacity: 0; transform: translateY(-6px) scaleY(0.96); } }

/* ============ Transición "pintada" entre páginas ============ */
.paint-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 300; pointer-events: none; }
/* la página nueva llega tapada de amarillo hasta que el script toma el control (evita el parpadeo) */
html.paint-cover::after { content: ''; position: fixed; inset: 0; z-index: 299; background: var(--yellow); }

/* =====================================================================
   Secciones internas (catálogo, producto, carrito): la barra estática es amarilla.
   La home conserva la barra blanca porque su portada ya es amarilla.
   ===================================================================== */
.bar-yellow .site-header {
  --pill-bg: var(--yellow); --pill-fg: var(--ink); --pill-brand: var(--red);
  --pill-field: rgba(17, 17, 17, 0.08); --pill-field-fg: var(--ink); --pill-field-ph: var(--ink-2);
  --pill-btn: var(--ink); --pill-btn-fg: #fff; --pill-burger: transparent; --pill-burger-fg: var(--red);
  --pill-border: rgba(17, 17, 17, 0.14);
}
.bar-yellow .nav { border-top-color: rgba(17, 17, 17, 0.14); }
.bar-yellow .site-header .search__input:focus { box-shadow: 0 0 0 3px var(--red); border-color: var(--ink); }
@media (max-width: 899px) {
  .bar-yellow .site-header { background: rgba(255, 236, 0, 0.96); border-color: rgba(17, 17, 17, 0.14); }
}

.drawer__plain { display: flex; align-items: center; gap: 10px; padding: 12px 4px; font-weight: 700; border-bottom: 1px solid var(--line); }
.drawer__plain svg { color: var(--red); }
.drawer__plain:hover { color: var(--red); }