/* =============================================================
   KOBU · Tienda Mobile — hoja de estilos propia (no depende de
   catalogo.css). Mobile-first, pensada 360–430px.
   ============================================================= */
:root{
  --kobu-blue: oklch(0.68 0.16 232);
  --kobu-blue-2: oklch(0.55 0.17 235);
  --kobu-blue-soft: oklch(0.96 0.025 232);
  --kobu-pink: oklch(0.74 0.16 18);
  --kobu-pink-2: oklch(0.56 0.18 18);
  --kobu-pink-soft: oklch(0.97 0.025 18);
  --kobu-gray-soft: oklch(0.95 0.003 250);
  --kobu-gray: oklch(0.55 0.005 250);
  --ink: oklch(0.18 0.012 250);
  --ink-2: oklch(0.32 0.010 250);
  --ink-3: oklch(0.50 0.008 250);
  --rule: oklch(0.9 0.008 250);
  --gain: oklch(0.52 0.13 155);
  --gain-soft: oklch(0.96 0.03 155);
  --flag-hot: oklch(0.62 0.19 40);
  --flag-mundial: oklch(0.80 0.14 90);
  --wa-bubble: oklch(0.96 0.04 140);
  --serif: "Lora", "Times New Roman", serif;
  --sans: "Nunito Sans", system-ui, sans-serif;
}
*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  background: oklch(0.93 0.006 250);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
}
body.t-noscroll{ overflow: hidden; }
#root{
  max-width: 430px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  padding-bottom: 24px;
}
body.cart-active #root{ padding-bottom: 92px; } /* espacio para la barra fija */
img{ max-width: 100%; display: block; }
h1, h2, h3{ margin: 0; font-family: var(--serif); }
p{ margin: 0; }
button{ font-family: inherit; }

/* ============================================================
   PRIMITIVAS
   ============================================================ */
.t-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}
.t-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-radius: 14px;
  border: none;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}
.t-btn:active{ transform: scale(0.98); }
.t-btn--primary{ background: var(--kobu-blue-2); color: #fff; }
.t-btn--ghost{ background: transparent; color: var(--kobu-blue-2); border: 1.5px solid var(--kobu-blue-2); }
.t-btn--wsp{ background: #25d366; color: #fff; }

/* botón "Agregar" — cart.js hookea .cta-add por clase, el resto es visual */
.cta-add{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  border: none;
  background: var(--kobu-blue-2);
  color: #fff;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease;
}
.cta-add:active{ transform: scale(0.98); }
.cta-add--small{ min-height: 48px; font-size: 14.5px; }
.cta-add--done{ background: var(--gain) !important; }

/* badges de tela/feature */
/* flags (sistema único) */
.t-flag{ display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.t-flag--hot{ background: var(--flag-hot); color: #fff; }
.t-flag--limited{ background: var(--kobu-pink-2); color: #fff; }
.t-flag--save{ background: var(--gain); color: #fff; }
.t-flag--gift{ background: var(--kobu-blue-soft); color: var(--kobu-blue-2); }
.t-flag--mundial{ background: var(--flag-mundial); color: oklch(0.32 0.06 90); }
.t-flag--lg{ font-size: 13px; padding: 5px 10px; }

.t-badges{ display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.t-badge{
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--kobu-gray-soft);
  color: var(--ink-2);
}

/* línea de ganancia — el corazón de la conversión */
.t-gain{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gain);
  background: var(--gain-soft);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0;
}
.t-gain strong{ font-weight: 800; }

/* acordeones (details/summary nativos) */
.t-acc{ margin: 10px 0; border-top: 1px solid var(--rule); padding-top: 10px; }
.t-acc summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kobu-blue-2);
  min-height: 32px;
}
.t-acc summary::-webkit-details-marker{ display: none; }
.t-acc summary::after{
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.t-acc[open] summary::after{ transform: rotate(225deg); }
.t-acc__body{ padding-top: 8px; }

/* chips de medida seleccionables */
.t-sizes{ display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.t-sizes--scroll{ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.t-sizes--scroll .t-size{ flex-shrink: 0; }
.t-size{
  appearance: none;
  border: 1.5px solid var(--rule);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-family: var(--sans);
}
.t-size__label{ font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.t-size__price{ font-size: 14.5px; font-weight: 800; color: var(--ink); }
.t-size.is-active{ border-color: var(--kobu-blue-2); background: var(--kobu-blue-soft); }
.t-size.is-active .t-size__label{ color: var(--kobu-blue-2); }

/* cards genéricas */
.t-card{
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 2px 12px -6px rgb(0 0 0 / .08);
  padding: 16px;
  margin: 0 16px 16px;
}
.t-photo{ border-radius: 14px; aspect-ratio: 16/10; overflow: hidden; background: var(--kobu-gray-soft); position: relative; }
.t-photo img{ width: 100%; height: 100%; object-fit: cover; }
.t-photo--contain img{ object-fit: contain; }
.t-photo__flag{
  position: absolute; top: 10px; left: 10px;
  background: var(--kobu-blue-2); color: #fff;
  font-size: 12px; font-weight: 800;
  padding: 6px 11px; border-radius: 999px;
  z-index: 2;
}
.t-photo__flag--gold{ background: oklch(0.62 0.14 75); }

/* encabezado de sección */
.t-sechead{ padding: 28px 20px 8px; }
.t-sechead__eyebrow{
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--kobu-blue-2);
  margin-bottom: 6px;
}
.t-sechead__title{ font-size: 28px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.t-sechead__title em{ font-style: italic; color: var(--kobu-blue-2); }
.t-sechead__lede{ font-size: 15.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.45; }

.t-section{ padding-bottom: 8px; }
.t-section--tint{ background: var(--kobu-blue-soft); padding-top: 4px; padding-bottom: 20px; }
.t-section--pink{ background: var(--kobu-pink-soft); padding-top: 4px; padding-bottom: 20px; }

/* ============================================================
   HERO
   ============================================================ */
.t-hero{ position: relative; padding: 40px 20px 28px; overflow: hidden; }
.t-hero__bg{ position: absolute; inset: 0; z-index: 0; }
.t-hero__bg img{ width: 100%; height: 100%; object-fit: cover; }
.t-hero__bg::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.7) 100%);
}
.t-hero__content{ position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.t-hero__eyebrow{ font-size: 12.5px; font-weight: 800; letter-spacing: .09em; color: var(--kobu-blue-2); }
.t-hero__logo{ width: 110px; }
.t-hero__title{ font-size: 32px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.t-hero__sub{ font-size: 16px; color: var(--ink-2); line-height: 1.5; max-width: 340px; }
.t-hero__chips{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.t-hero__ctas{ display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }

/* ============================================================
   TABS (sticky + scrollspy)
   ============================================================ */
.t-tabs{
  position: sticky; top: 0; z-index: 400;
  display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  background: var(--kobu-blue-soft);
  border-bottom: 1px solid var(--kobu-blue);
  padding: 10px 16px;
}
.t-tabs::-webkit-scrollbar{ display: none; }
.t-tab{
  flex-shrink: 0; border: 1.5px solid var(--rule); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 0 16px; min-height: 36px;
  font-family: var(--sans); font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.t-tab.is-active{ background: var(--kobu-blue-2); border-color: var(--kobu-blue-2); color: #fff; }

/* banda "repetí tu pedido" */
.t-reorder{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 16px 0; padding: 12px 14px;
  background: var(--kobu-blue-soft); border: 1px solid var(--kobu-blue); border-radius: 14px;
}
.t-reorder__text{ display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--ink-2); }
.t-reorder__text strong{ font-size: 15px; color: var(--ink); }
.t-reorder__btn{ min-height: 44px; padding: 0 20px; flex-shrink: 0; border-radius: 12px; }

/* ============================================================
   COMBOS
   ============================================================ */
.t-combo__eyebrow{ display: block; font-size: 12px; font-weight: 800; color: var(--kobu-blue-2); margin-bottom: 4px; }
.t-combo__title{ font-size: 24px; font-weight: 600; margin-bottom: 4px; }
.t-combo__sub{ font-size: 14.5px; color: var(--ink-3); margin-bottom: 10px; }
.t-combo__whatin{ font-size: 15px; font-weight: 700; color: var(--ink-2); margin: 10px 0; }
.t-combo__items{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.t-combo__items li{ display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; border-bottom: 1px dashed var(--rule); padding: 6px 0; }
.t-combo__items li:last-child{ border-bottom: none; }
.t-combo__qty{ font-weight: 800; color: var(--kobu-blue-2); flex-shrink: 0; }
.t-combo__iname{ flex: 1; color: var(--ink-2); }
.t-combo__iprice{ font-weight: 700; color: var(--ink); flex-shrink: 0; }
.t-combo__gift{ font-size: 13px; }
.t-combo__price-block{ background: var(--kobu-blue-soft); border-radius: 14px; padding: 14px; margin: 12px 0 8px; text-align: center; }
.t-combo__strike{ font-size: 14px; color: var(--ink-3); text-decoration: line-through; }
.t-combo__price{ font-size: 30px; font-weight: 800; color: var(--ink); margin: 2px 0 8px; display: inline-block; background: #fff; border: 1.5px solid var(--rule); padding: 6px 18px; border-radius: 12px; }
.t-combo__save{ display: inline-flex; align-items: center; gap: 6px; background: var(--gain); color: #fff; font-weight: 800; font-size: 15px; padding: 6px 14px; border-radius: 999px; }
.t-combo__incl{ font-size: 13px; color: var(--ink-2); margin-top: 8px; }

/* ============================================================
   SPOTLIGHT (Cama Regulable)
   ============================================================ */
.t-spot{ border-color: var(--kobu-blue-2); border-width: 2px; }
.t-spot__ribbon{
  display: inline-block; margin-bottom: 10px;
}
.t-spot__thumbs{ display: flex; gap: 8px; margin-top: 8px; }
.t-spot__thumb{ width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--rule); padding: 0; cursor: pointer; background: none; }
.t-spot__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.t-spot__title{ font-size: 26px; font-weight: 600; margin-top: 14px; }
.t-spot__premium{ font-size: 11px; font-weight: 800; color: var(--kobu-blue-2); background: var(--kobu-blue-soft); padding: 3px 8px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.t-spot__desc{ font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: 8px; }
.t-banner{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding: 12px 14px; border-radius: 14px;
  background: oklch(0.97 0.03 75); border: 1px solid oklch(0.85 0.06 75);
  font-size: 13.5px; font-weight: 700; color: oklch(0.4 0.08 75);
  cursor: pointer; text-align: left;
}

/* ============================================================
   PRODUCTOS (títulos usados en spotlight y sheet)
   ============================================================ */
.t-product__name{ font-size: 22px; font-weight: 600; margin-top: 12px; }
.t-product__desc{ font-size: 14.5px; color: var(--ink-2); line-height: 1.5; margin-top: 6px; }
.t-product__note{ font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.t-subhead{ font-size: 19px; font-weight: 600; font-family: var(--serif); margin: 14px 16px 10px; }

/* ============================================================
   FILAS COMPACTAS (catálogo tipo app de pedidos)
   ============================================================ */
.t-rows{
  margin: 0 16px 8px; background: #fff; border: 1px solid var(--rule);
  border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px -6px rgb(0 0 0 / .08);
}
.t-row{ display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--rule); cursor: pointer; align-items: center; }
.t-row:last-child{ border-bottom: none; }
.t-row:active{ background: var(--kobu-gray-soft); }
.t-row__body{ flex: 1; min-width: 0; }
.t-row__flags{ margin-bottom: 5px; display: flex; flex-wrap: wrap; gap: 6px; }
.t-row__name{ font-family: var(--serif); font-size: 17px; font-weight: 600; }
.t-row__desc{ font-size: 13px; color: var(--ink-3); line-height: 1.35; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-row__priceline{ display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.t-row__price{ font-size: 15.5px; font-weight: 800; color: var(--ink); background: var(--kobu-blue-soft); padding: 3px 9px; border-radius: 8px; }
.t-row__gain{ font-size: 12.5px; font-weight: 700; color: var(--gain); }
.t-row__media{ display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; width: 96px; }
.t-row__photo{ width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--kobu-gray-soft); }
.t-row__photo img{ width: 100%; height: 100%; object-fit: cover; }
.t-row__photo--contain img{ object-fit: contain; }
.t-row__ctl{ width: 100%; display: flex; justify-content: center; }
.t-row__add{ min-width: 96px; height: 38px; border-radius: 999px; border: 1.5px solid var(--kobu-blue-2); background: #fff; color: var(--kobu-blue-2); font-size: 20px; font-weight: 800; cursor: pointer; line-height: 1; }
.t-row__add:active{ background: var(--kobu-blue-soft); }
.t-row__stepper{ display: flex; align-items: center; min-width: 96px; height: 38px; border-radius: 999px; background: var(--kobu-blue-2); color: #fff; overflow: hidden; }
.t-row__stepper button{ width: 34px; height: 38px; border: none; background: none; color: #fff; font-size: 18px; font-weight: 800; cursor: pointer; }
.t-row__stepper span{ flex: 1; text-align: center; font-size: 14px; font-weight: 800; }

/* ============================================================
   FICHA DE PRODUCTO (bottom-sheet)
   ============================================================ */
.t-psheet-overlay{
  position: fixed; inset: 0; background: rgba(20,20,25,.45); z-index: 650;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.t-psheet-overlay.is-open{ opacity: 1; pointer-events: auto; }
.t-psheet{
  width: 100%; max-width: 430px; background: #fff;
  border-radius: 20px 20px 0 0; max-height: 92vh; overflow-y: auto;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .22s ease; position: relative;
}
.t-psheet-overlay.is-open .t-psheet{ transform: translateY(0); }
.t-psheet__close{ position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 999px; border: none; background: rgba(255,255,255,.92); font-size: 17px; cursor: pointer; z-index: 3; box-shadow: 0 1px 8px rgb(0 0 0 / .18); }
.t-psheet__flags{ margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.t-psheet__name{ font-size: 24px; font-weight: 600; font-family: var(--serif); margin-top: 6px; }
.t-psheet__desc{ font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: 8px; }
.t-psheet__price{ font-size: 26px; font-weight: 800; margin: 12px 0 0; display: inline-block; background: var(--kobu-blue-soft); padding: 6px 16px; border-radius: 12px; }
.t-psheet__buy{ display: flex; gap: 10px; align-items: stretch; margin-top: 16px; position: sticky; bottom: 0; background: #fff; padding-top: 10px; }
.t-psheet__buy .t-sheet-add{ flex: 1; }
.t-qty{ display: flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 14px; overflow: hidden; flex-shrink: 0; }
.t-qty button{ width: 44px; height: 52px; border: none; background: var(--kobu-gray-soft); font-size: 20px; font-weight: 800; cursor: pointer; color: var(--ink); }
.t-qty span{ min-width: 34px; text-align: center; font-weight: 800; font-size: 16px; }

/* ============================================================
   BUZOS
   ============================================================ */
.t-buzo__ribbon{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: var(--kobu-pink-2); color: #fff;
  font-size: 11.5px; font-weight: 800; padding: 6px 10px; border-radius: 999px;
}
.t-curve{ background: var(--kobu-pink-soft); border-radius: 14px; padding: 14px; margin: 12px 0; }
.t-curve__eyebrow{ font-size: 12.5px; font-weight: 800; color: var(--kobu-pink-2); }
.t-curve__row{ display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.t-curve__price{ font-size: 26px; font-weight: 800; color: var(--ink); display: inline-block; background: #fff; border: 1.5px solid var(--rule); padding: 4px 12px; border-radius: 10px; }
.t-curve__strike{ font-size: 13.5px; color: var(--ink-3); text-decoration: line-through; }
.t-unit-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.t-unit-cell{ text-align: center; background: var(--kobu-gray-soft); border-radius: 10px; padding: 8px 4px; }
.t-unit-cell__l{ display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.t-unit-cell__v{ display: block; font-size: 14px; font-weight: 800; }

/* ============================================================
   ACCESORIOS
   ============================================================ */
.t-acc-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 16px 16px; }
.t-acc-card{ background: #fff; border: 1px solid var(--rule); border-radius: 16px; padding: 12px; }
.t-acc-card .t-photo{ aspect-ratio: 1/1; margin-bottom: 8px; }
.t-acc-card__name{ font-size: 16px; font-weight: 600; font-family: var(--serif); }
.t-acc-card__desc{ font-size: 12.5px; color: var(--ink-2); margin: 4px 0 8px; line-height: 1.4; }
.t-acc-card__price{ font-size: 18px; font-weight: 800; margin-bottom: 6px; }

/* ============================================================
   CONDICIONES
   ============================================================ */
.t-terms{ margin: 0 16px; }
.t-terms__row{ display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.t-terms__num{ font-family: var(--sans); font-weight: 800; color: var(--kobu-blue-2); flex-shrink: 0; width: 22px; }
.t-terms__text{ color: var(--ink-2); line-height: 1.4; }
.t-terms__text strong{ color: var(--ink); }
.t-closing{ padding: 20px 16px 8px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.t-closing__links{ display: flex; flex-direction: column; gap: 8px; text-align: center; }
.t-closing__links a{ color: var(--kobu-blue-2); font-size: 14px; font-weight: 700; text-decoration: none; }
.t-footer-mini{ text-align: center; font-size: 12.5px; color: var(--ink-3); padding: 18px 16px 24px; }

/* ============================================================
   QUIÉNES SOMOS — confianza
   ============================================================ */
.t-about-strip{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 16px 16px; }
.t-about-ph{ border-radius: 12px; overflow: hidden; aspect-ratio: 1/1; background: var(--kobu-gray-soft); }
.t-about-ph img{ width: 100%; height: 100%; object-fit: cover; }
.t-ig-card__head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.t-ig-card__title{ font-family: var(--serif); font-size: 18px; font-weight: 600; }
.t-ig-card__head a{ color: var(--kobu-pink-2); font-weight: 800; text-decoration: none; font-size: 14px; }
.t-ig-shot{ display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); }
.t-ig-shot img{ width: 100%; display: block; }
.t-ig-card__foot{ font-size: 13px; color: var(--ink-2); text-align: center; margin-top: 10px; }
.t-ig-card__foot strong{ color: var(--ink); font-weight: 800; }
.t-review-btn{ background: #fff; border: 1.5px solid var(--rule); color: var(--ink); }
.t-closing__note{ text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: -4px; }

/* ============================================================
   BARRA INFERIOR FIJA
   ============================================================ */
#t-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  max-width: 430px; margin: 0 auto;
  background: var(--kobu-blue-soft); border-top: 1px solid var(--kobu-blue);
  box-shadow: 0 -6px 20px -10px rgb(0 0 0 / .18);
  display: flex; align-items: stretch; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  min-height: 64px;
  transform: translateY(130%);
  transition: transform .25s ease;
}
#t-bar.has-items{ transform: translateY(0); }
#t-bar.is-pulse{ animation: t-pulse .5s ease; }
#t-bar.is-celebrate{ animation: t-celebrate .9s ease; }
@keyframes t-pulse{ 0%{ transform: translateY(0) scale(1); } 40%{ transform: translateY(0) scale(1.03); } 100%{ transform: translateY(0) scale(1); } }
@keyframes t-celebrate{ 0%{ transform: translateY(0) scale(1); } 30%{ transform: translateY(0) scale(1.04); } 60%{ transform: translateY(0) scale(1); } 80%{ transform: translateY(0) scale(1.02); } 100%{ transform: translateY(0) scale(1); } }
.t-bar__btn{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; flex: 1; min-height: 48px; border-radius: 12px; border: none;
  background: var(--kobu-gray-soft); color: var(--ink-2); font-size: 12px; font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.t-bar__wsp{ background: #25d366; color: #fff; flex: 0 0 76px; }
.t-bar__cart{ background: var(--kobu-blue-2); color: #fff; flex: 1.4; font-size: 14px; }
.t-bar__summary{ flex: 1.6; display: flex; flex-direction: column; justify-content: center; padding: 2px 8px; min-width: 0; cursor: pointer; }
.t-bar__count{ font-size: 13.5px; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-bar__progress{ height: 4px; background: var(--kobu-gray-soft); border-radius: 999px; margin: 5px 0 3px; overflow: hidden; }
.t-bar__progress-fill{ height: 100%; background: var(--kobu-blue-2); border-radius: 999px; transition: width .25s ease; }
.t-bar__progress.is-complete .t-bar__progress-fill{ background: var(--gain); }
.t-bar__progress-label{ font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-bar__progress-label.is-complete{ color: var(--gain); font-weight: 700; }

/* ============================================================
   FRANJA "TE ATIENDE" (Quiénes somos)
   ============================================================ */
.t-atiende{ display: flex; align-items: center; gap: 12px; margin: 0 16px 16px; padding: 12px 14px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; }
.t-atiende__txt{ font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.t-atiende__txt strong{ color: var(--ink); font-size: 15px; }
.t-atiende__txt span{ font-size: 12.5px; color: var(--ink-3); }
#t-bar.has-items .t-bar__wsp{ display: none; }
#t-bar:not(.has-items) .t-bar__summary,
#t-bar:not(.has-items) .t-bar__cart{ display: none; }

/* ============================================================
   SHEET DE SECCIONES
   ============================================================ */
.t-sheet-overlay{
  position: fixed; inset: 0; background: rgba(20,20,25,.42); z-index: 600;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.t-sheet-overlay.is-open{ opacity: 1; pointer-events: auto; }
.t-sheet{
  width: 100%; max-width: 430px; background: #fff;
  border-radius: 20px 20px 0 0; padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .2s ease;
}
.t-sheet-overlay.is-open .t-sheet{ transform: translateY(0); }
.t-sheet__handle{ width: 40px; height: 4px; background: var(--rule); border-radius: 999px; margin: 4px auto 10px; }
.t-sheet__row{
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 56px; padding: 0 10px; border: none; background: none;
  font-size: 16px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.t-sheet__row:last-child{ border-bottom: none; }
.t-sheet__row-sub{ font-size: 12.5px; font-weight: 500; color: var(--ink-3); }

/* ============================================================
   PANEL DEL CARRITO (cart.js) — reestilo para la tienda
   ============================================================ */
#kobu-cart-fab{ display: none !important; }
#kobu-cart-backdrop{ position: fixed; inset: 0; z-index: 1001; background: rgba(20,16,10,.45); }
#kobu-cart-panel{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002;
  width: auto; max-width: none; max-height: 78vh; overflow-y: auto;
  background: #fff; border-radius: 20px 20px 0 0; border: none;
  box-shadow: 0 -18px 50px -12px rgba(0,0,0,.35);
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
}
.kcart__head{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; margin-bottom: 10px; }
.kcart__head h3{ margin: 0; font-family: var(--serif); font-size: 19px; font-weight: 600; }
.kcart__close{ border: none; background: none; font-size: 22px; padding: 10px; cursor: pointer; color: var(--ink-2); }
.kcart__list{ list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; }
.kcart__row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.kcart__info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kcart__name{ font-size: 15px; font-weight: 700; color: var(--ink); }
.kcart__meta{ display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.kcart__size{ color: var(--kobu-blue-2); font-weight: 700; }
.kcart__controls{ display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.kcart__stepper{ display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--rule); border-radius: 12px; padding: 4px; }
.kcart__stepper button{ width: 44px; height: 44px; border-radius: 9px; border: none; background: var(--kobu-gray-soft); font-size: 20px; font-weight: 800; cursor: pointer; color: var(--ink); }
.kcart__qty{ font-weight: 800; min-width: 22px; text-align: center; }
.kcart__subtotal{ font-family: var(--serif); font-weight: 700; font-size: 15px; }
.kcart__empty{ font-size: 14px; color: var(--ink-2); padding: 24px 4px; text-align: center; line-height: 1.5; }
.kcart__minprogress{ display: flex; flex-direction: column; gap: 5px; margin: 2px 0 12px; }
.kcart__minprogress-bar{ width: 100%; height: 6px; background: var(--kobu-gray-soft); border-radius: 999px; overflow: hidden; }
.kcart__minprogress-fill{ height: 100%; background: var(--kobu-blue-2); border-radius: 999px; transition: width .25s ease; }
.kcart__minprogress-label{ font-size: 12.5px; color: var(--ink-2); }
.kcart__minprogress.is-complete .kcart__minprogress-fill{ background: var(--gain); }
.kcart__minprogress.is-complete .kcart__minprogress-label{ color: var(--gain); font-weight: 700; }
.kcart__total{ display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; margin-bottom: 12px; border-top: 1.5px solid var(--ink); }
.kcart__total-label{ font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.kcart__total-val{ font-family: var(--serif); font-weight: 800; font-size: 20px; }
.kcart__send{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; border-radius: 14px; background: #25d366; color: #fff;
  font-weight: 800; font-size: 15.5px; text-decoration: none;
}
.kcart__note{ margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.4; }

/* El panel nativo de cart.js queda oculto: la tienda usa su propio carrito */
#kobu-cart-panel, #kobu-cart-backdrop, #kobu-cart-fab{ display: none !important; }

/* ============================================================
   CARRITO PROPIO (tienda-cart.js) — comprobante
   ============================================================ */
.t-cart-overlay{
  position: fixed; inset: 0; background: rgba(20,20,25,.45); z-index: 700;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.t-cart-overlay.is-open{ opacity: 1; pointer-events: auto; }
.t-cart{
  width: 100%; max-width: 430px; background: #fff;
  border-radius: 20px 20px 0 0; max-height: 90vh; overflow-y: auto;
  transform: translateY(100%); transition: transform .22s ease;
}
.t-cart-overlay.is-open .t-cart{ transform: translateY(0); }
.t-cart__inner{ padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
.t-cart__head{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--ink); padding-bottom: 10px; margin-bottom: 10px; }
.t-cart__head h3{ font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0; }
.t-cart__close{ border: none; background: none; font-size: 20px; padding: 8px; cursor: pointer; color: var(--ink-2); }
.t-cart__list{ list-style: none; margin: 0 0 12px; padding: 0; }
.t-cart__row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.t-cart__info{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-cart__name{ font-size: 15px; font-weight: 700; color: var(--ink); }
.t-cart__size{ font-size: 12.5px; color: var(--kobu-blue-2); font-weight: 700; }
.t-cart__right{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.t-cart__stepper{ display: inline-flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 10px; overflow: hidden; }
.t-cart__stepper button{ width: 40px; height: 40px; border: none; background: var(--kobu-gray-soft); font-size: 18px; font-weight: 800; cursor: pointer; color: var(--ink); }
.t-cart__stepper span{ min-width: 28px; text-align: center; font-weight: 800; }
.t-cart__sub{ font-family: var(--serif); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; }
.t-cart__empty{ font-size: 14.5px; color: var(--ink-2); padding: 28px 4px; text-align: center; line-height: 1.6; }
.t-cart__prog{ display: flex; flex-direction: column; gap: 5px; margin: 4px 0 12px; }
.t-cart__prog-bar{ width: 100%; height: 6px; background: var(--kobu-gray-soft); border-radius: 999px; overflow: hidden; }
.t-cart__prog-fill{ height: 100%; background: var(--kobu-blue-2); border-radius: 999px; transition: width .25s ease; }
.t-cart__prog.is-complete .t-cart__prog-fill{ background: var(--gain); }
.t-cart__prog-label{ font-size: 12.5px; color: var(--ink-2); }
.t-cart__prog.is-complete .t-cart__prog-label{ color: var(--gain); font-weight: 700; }
.t-cart__upsell{ display: flex; align-items: center; gap: 10px; background: var(--gain-soft); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.t-cart__upsell p{ font-size: 13.5px; color: var(--ink-2); line-height: 1.4; flex: 1; margin: 0; }
.t-cart__upsell strong{ color: var(--gain); }
.t-cart__upsell-btn{ flex-shrink: 0; min-height: 44px; padding: 0 14px; border-radius: 12px; border: none; background: var(--gain); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
.t-cart__total{ display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; margin-bottom: 12px; border-top: 1.5px solid var(--ink); }
.t-cart__total-label{ font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.t-cart__total-val{ font-family: var(--serif); font-weight: 800; font-size: 22px; }
.t-cart__preview{ margin: 0 0 4px; }
.t-cart__preview summary{ color: var(--kobu-blue-2); }
.t-wa-preview{ background: var(--wa-bubble); border-radius: 12px; padding: 12px; font-family: var(--sans); font-size: 13px; white-space: pre-wrap; margin: 8px 0 0; line-height: 1.45; color: var(--ink-2); }
.t-cart__send{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 14px; background: #25d366; color: #fff; font-weight: 800; font-size: 15.5px; text-decoration: none; margin-top: 12px; }
.t-chip--blue{ background: var(--kobu-blue-soft); border-color: var(--kobu-blue); color: var(--kobu-blue-2); }
.t-chip--green{ background: var(--gain-soft); border-color: var(--gain); color: var(--gain); }
.t-cart__ship{ font-size: 12.5px; color: var(--kobu-blue-2); background: var(--kobu-blue-soft); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-weight: 700; }
.t-cart__ship.is-complete{ color: var(--gain); background: var(--gain-soft); }
.t-cart__note{ margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); text-align: center; line-height: 1.4; }