/* ============================================================================
   TIENDA SIMPLE de Manolito (/catalogo) — hoja propia, sin dependencias.
   Rojo Manolito sobre claro. Todo toque ≥ 44 px, texto ≥ 15 px, contraste AA.
   El único verde es el del botón de WhatsApp (la acción final del embudo).
   ============================================================================ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-var.woff2") format("woff2");
}
:root {
  --t-rojo: #c8102e;
  --t-rojo-dk: #a50d26;
  --t-rojo-sv: #fdeef0;
  --t-wa: #0f8a43;
  --t-wa-dk: #0b6e35;
  --t-tinta: #16181d;
  --t-tinta-2: #4f5663;
  --t-fondo: #f5f5f2;
  --t-card: #fff;
  --t-linea: #e6e6e1;
  --t-ok: #127a40;
  --t-ambar: #fff6dc;
  --t-ambar-tx: #6d4c00;
  --t-sombra: 0 1px 2px rgba(20, 20, 20, .06), 0 4px 14px rgba(20, 20, 20, .06);
  --t-r: 16px;
  --t-max: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body.t {
  margin: 0;
  font: 400 16px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--t-tinta);
  background: var(--t-fondo);
  -webkit-tap-highlight-color: transparent;
}
body.t-hoja-on { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.t-skip { position: absolute; left: -999px; top: 8px; z-index: 99; background: #fff; padding: 10px 14px; border-radius: 10px; }
.t-skip:focus { left: 8px; }

/* ---------- encabezado (fijo): marca + pasos + buscador ---------- */
.t-top {
  position: sticky; top: 0; z-index: 30;
  background: var(--t-top-bg, var(--t-rojo));
  color: #fff;
  padding: 10px 16px 12px;
  transition: background .4s;
  padding-top: calc(10px + env(safe-area-inset-top));
  box-shadow: 0 2px 10px rgba(120, 0, 20, .18);
}
.t-top-in, .t-buscar { max-width: var(--t-max); margin: 0 auto; }
.t-top-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.t-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; }
.t-brand-logo { width: 44px; height: 44px; border-radius: 50%; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.t-brand .t-brand-tx { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* §C-1459b · el toro es un botón (abre la cuenta): sin la cara de botón del navegador. */
button.t-brand { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.t-brand .t-brand-toro { position: relative; flex: none; display: block; }
.t-brand .t-brand-yo {
  position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--t-card); color: var(--t-rojo); display: grid; place-items: center; box-shadow: var(--t-sombra);
}
.t-brand-yo svg { width: 13px; height: 13px; fill: currentColor; }
.t-brand b { font-size: 18px; font-weight: 800; letter-spacing: -.2px; }
.t-brand small { font-size: 13px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.t-pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex: none; }
.t-pasos li {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700;
  padding: 5px 9px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85);
}
.t-pasos li span {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, .25); font-size: 12px;
}
.t-pasos li.on { background: #fff; color: var(--t-rojo); }
.t-pasos li.on span { background: var(--t-rojo); color: #fff; }
.t-pasos li.ok span { background: #fff; color: var(--t-rojo); }
@media (max-width: 420px) {
  .t-pasos li { padding: 5px; }
  .t-pasos li:not(.on) { font-size: 0; gap: 0; }
}

.t-buscar { margin-top: 10px; }
.t-buscar-in {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 14px; padding: 0 6px 0 14px; height: 50px;
}
.t-buscar-in svg { width: 22px; height: 22px; fill: none; stroke: var(--t-tinta-2); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.t-buscar-in input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: inherit; font-size: 16px; font-weight: 500; color: var(--t-tinta); height: 100%;
}
.t-buscar-in input::placeholder { color: #7a808b; }
.t-buscar-in input::-webkit-search-cancel-button { display: none; }
.t-q-x { border: 0; background: #f0f0ec; border-radius: 10px; width: 40px; height: 40px; font-size: 16px; color: var(--t-tinta-2); }

/* ---------- contenido ---------- */
.t-main { max-width: var(--t-max); margin: 0 auto; padding: 14px 16px 24px; }
body.t-con-barra .t-main { padding-bottom: 110px; }

/* banner del Plan Manolito */
.t-hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; border: 0; text-align: left; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 85% 30%, #ff4f6a 0, rgba(255, 79, 106, 0) 45%), linear-gradient(135deg, var(--t-rojo) 0%, #7d0a1c 100%);
  border-radius: 20px; padding: 18px 12px 18px 20px; margin-bottom: 14px; min-height: 150px;
  box-shadow: 0 10px 24px rgba(140, 0, 20, .25);
}
.t-hero::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
.t-hero-tx { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.t-hero-tx small { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #ffd9df; }
.t-hero-tx b { font-size: 25px; line-height: 1.08; font-weight: 900; letter-spacing: -.5px; }
.t-hero-tx span { font-size: 14px; color: #ffe3e7; }
.t-hero-tx em {
  font-style: normal; align-self: flex-start; margin-top: 8px; background: #fff; color: var(--t-rojo);
  font-weight: 800; font-size: 14px; padding: 8px 14px; border-radius: 999px;
}
.t-hero img { width: 112px; height: 112px; flex: none; position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }

/* los 3 pasos: una tira compacta */
.t-como {
  list-style: none; margin: 0 0 16px; padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  background: var(--t-card); border-radius: 16px; box-shadow: var(--t-sombra);
}
.t-como li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; line-height: 1.15; color: var(--t-tinta); }
.t-como li b {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--t-rojo-sv); color: var(--t-rojo); font-size: 15px; font-weight: 900;
}

.t-repetir {
  box-shadow: var(--t-sombra);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--t-ambar); color: var(--t-ambar-tx); border-radius: var(--t-r);
  padding: 14px 14px 14px 16px; margin-bottom: 18px;
}
.t-repetir div { display: flex; flex-direction: column; min-width: 0; }
.t-repetir b { font-size: 16px; }
.t-repetir span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-repetir button {
  flex: none; border: 0; border-radius: 12px; min-height: 44px; padding: 0 14px;
  background: var(--t-tinta); color: #fff; font-weight: 700; font-size: 15px;
}

.t-bloque { margin-bottom: 22px; }
.t-bloque-h { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 10px; }
.t-bloque-h h2, .t-lista-h h2 { font-size: 20px; font-weight: 800; letter-spacing: -.2px; }

/* categorías: dos filas que se deslizan de costado */
.t-cats {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 82px; gap: 10px 8px;
  overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none;
}
.t-cats::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .t-cats { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); overflow: visible; margin: 0; padding: 0; } }
.t-cat {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--t-tinta);
  text-align: center; scroll-snap-align: start;
}
.t-cat-ic {
  width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 34px;
  background: var(--t-card); box-shadow: var(--t-sombra);
}
.t-cat:active .t-cat-ic { transform: scale(.94); }
.t-cat-ic img { width: 54px; height: 54px; object-fit: contain; }
.t-cat-n { font-size: 12px; font-weight: 700; line-height: 1.15; overflow-wrap: break-word; max-width: 82px; }

/* carriles horizontales */
.t-bloque-h small { font-size: 13px; color: var(--t-tinta-2); font-weight: 600; }
.t-vertodo { font-size: 14px; font-weight: 800; color: var(--t-rojo); text-decoration: none; padding: 6px 0; }
.t-riel {
  display: grid; grid-auto-flow: column; grid-auto-columns: 158px; gap: 10px;
  overflow-x: auto; margin: 0 -16px; padding: 2px 16px 10px; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none;
}
.t-riel::-webkit-scrollbar { display: none; }
.t-riel > * { scroll-snap-align: start; }
@media (min-width: 900px) { .t-riel { grid-auto-columns: 190px; } }
.t-riel-mas {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  border-radius: var(--t-r); background: var(--t-rojo-sv); color: var(--t-rojo); text-decoration: none; padding: 12px;
}
.t-riel-mas b { font-size: 18px; font-weight: 900; }
.t-riel-mas span { font-size: 14px; font-weight: 700; }

/* ---------- grilla de productos ---------- */
.t-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .t-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .t-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1080px) { .t-grid { grid-template-columns: repeat(5, 1fr); } }
.t-card {
  display: flex; flex-direction: column;
  background: var(--t-card); border-radius: var(--t-r); box-shadow: var(--t-sombra);
  padding: 10px; min-width: 0;
}
.t-ph {
  aspect-ratio: 1 / 1; border-radius: 12px; background: #fff;
  border: 1px solid #f0f0ec;
  display: grid; place-items: center; overflow: hidden; margin-bottom: 8px;
}
.t-ph img { width: 100%; height: 100%; object-fit: contain; }
.t-ph-em { font-size: 44px; }
.t-n {
  font-size: 15px; font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5em;
}
.t-pr { font-size: 19px; font-weight: 800; margin-top: 4px; letter-spacing: -.2px; }
.t-pr small, .t-l-tx small { font-size: 14px; font-weight: 600; color: var(--t-tinta-2); }
.t-nota { font-size: 13px; color: var(--t-tinta-2); margin-top: 2px; }
.t-plan {
  align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--t-ok);
  background: #e8f6ee; border-radius: 8px; padding: 3px 8px;
}
/* combo */
.t-combo-ph {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; margin-bottom: 8px; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%), var(--cc, var(--t-rojo));
}
.t-combo-ph span { font-size: 64px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.t-combo-ph em {
  position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 12px; font-weight: 800;
  background: #fff; color: var(--t-tinta); border-radius: 999px; padding: 4px 9px;
}
.t-combo-inc { font-size: 13px; color: var(--t-tinta-2); line-height: 1.25; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-l-inc { font-size: 13px; }
.t-act { margin-top: auto; padding-top: 10px; }

.t-add {
  width: 100%; min-height: 46px; border: 0; border-radius: 12px;
  background: var(--t-rojo-sv); color: var(--t-rojo); font-weight: 800; font-size: 16px;
}
.t-add:active { background: var(--t-rojo); color: #fff; }
.t-step {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--t-rojo); border-radius: 12px; min-height: 46px; color: #fff;
}
.t-step button {
  border: 0; background: none; color: #fff; width: 46px; height: 46px;
  font-size: 24px; font-weight: 700; line-height: 1;
}
.t-step output { font-weight: 800; font-size: 16px; text-align: center; flex: 1; }

/* ---------- vista de lista ---------- */
.t-lista-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.t-volver {
  flex: none; border: 0; background: var(--t-card); box-shadow: var(--t-sombra);
  border-radius: 12px; min-height: 44px; padding: 0 14px; font-weight: 700; font-size: 15px;
}
.t-chips {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 6px;
  scrollbar-width: none;
}
.t-chips::-webkit-scrollbar { display: none; }
.t-chip {
  flex: none; display: flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 999px; background: var(--t-card); border: 1px solid var(--t-linea);
  color: var(--t-tinta); text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap;
}
.t-chip.on { background: var(--t-tinta); border-color: var(--t-tinta); color: #fff; }
.t-mas { height: 1px; }
.t-vacio { background: var(--t-card); border-radius: var(--t-r); padding: 20px; display: grid; gap: 14px; font-size: 16px; }

/* ---------- pie ---------- */
.t-pie { max-width: var(--t-max); margin: 0 auto; padding: 8px 16px 40px; color: var(--t-tinta-2); font-size: 14px; }
body.t-con-barra .t-pie { padding-bottom: 120px; }
.t-pie h2 { font-size: 16px; color: var(--t-tinta); margin-bottom: 10px; }
.t-pie ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .t-pie ul { grid-template-columns: repeat(2, 1fr); } }
.t-pie li { background: var(--t-card); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.t-pie li b { color: var(--t-tinta); font-size: 15px; }
.t-pie-links { display: flex; gap: 16px; margin-top: 4px; }
.t-pie a { color: var(--t-rojo-dk); font-weight: 700; }
.t-seo { font-size: 14px; }
.t-noscript { background: var(--t-card); padding: 16px; border-radius: 12px; }

/* ---------- barra del pedido ---------- */
.t-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(245, 245, 242, 0), var(--t-fondo) 30%);
}
.t-barra-b {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto;
  min-height: 60px; padding: 0 18px 0 12px; border: 0; border-radius: 16px;
  background: var(--t-rojo); color: #fff; box-shadow: 0 6px 20px rgba(140, 0, 20, .32);
}
.t-barra-n {
  display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px;
  background: #fff; color: var(--t-rojo); font-weight: 800; font-size: 17px;
}
.t-barra-tx { flex: 1; text-align: left; font-weight: 800; font-size: 18px; }
.t-barra-tot { font-weight: 800; font-size: 18px; }
.t-barra.t-bump .t-barra-b { animation: tBump .32s ease; }
@keyframes tBump { 40% { transform: scale(1.03); } }

/* ---------- hoja del pedido ---------- */
.t-hoja-bd { position: fixed; inset: 0; z-index: 40; background: rgba(10, 10, 10, .45); }
.t-hoja {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; top: 0;
  background: var(--t-fondo); display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
@media (min-width: 760px) {
  .t-hoja { left: auto; width: 460px; box-shadow: -10px 0 30px rgba(0, 0, 0, .18); }
}
.t-hoja-h {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--t-card); border-bottom: 1px solid var(--t-linea);
}
.t-hoja-h > div { flex: 1; min-width: 0; }
.t-hoja-h small { display: block; font-size: 13px; font-weight: 700; color: var(--t-rojo); text-transform: uppercase; letter-spacing: .4px; }
.t-hoja-h h2 { font-size: 20px; font-weight: 800; letter-spacing: -.2px; }
.t-hoja-atras, .t-hoja-x {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #f0f0ec;
  font-size: 22px; font-weight: 700; line-height: 1;
}
.t-hoja-x { font-size: 17px; }
/* §C-1496 · las tres barras también adentro de cada apartado del menú */
.t-hoja-menu {
  flex: none; width: 44px; height: 44px; border: 2px solid var(--t-rojo); border-radius: 12px; background: #fff;
  display: grid; place-items: center; padding: 0;
}
.t-hoja-menu .t-menu-barras i { width: 20px; }
.t-hoja-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 24px; }
.t-hoja-pie {
  background: var(--t-card); border-top: 1px solid var(--t-linea);
  padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.t-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t-lineas li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--t-card); border-radius: 14px; padding: 12px;
}
.t-l-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-l-tx b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.t-l-tx span { font-size: 14px; color: var(--t-tinta-2); }
.t-l-der { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.t-l-der .t-act { padding: 0; width: 128px; }
.t-l-der .t-step { min-height: 40px; }
.t-l-der .t-step button { width: 40px; height: 40px; font-size: 22px; }
.t-l-tot { font-size: 16px; }
.t-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 2px 6px; font-size: 18px; font-weight: 700;
}
.t-total b { font-size: 24px; font-weight: 800; }
.t-ayuda { font-size: 14px; color: var(--t-tinta-2); margin: 0 2px 8px; }
.t-link {
  border: 0; background: none; padding: 10px 2px; min-height: 44px;
  color: var(--t-rojo-dk); font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 3px;
}

.t-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 0 18px; border: 0; border-radius: 14px;
  font-size: 18px; font-weight: 800; text-decoration: none; text-align: center;
}
.t-btn svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.t-btn-pri { background: var(--t-rojo); color: #fff; justify-content: space-between; }
.t-btn-pri span { font-weight: 800; }
.t-btn-wa { background: var(--t-wa); color: #fff; }
.t-btn-wa:active { background: var(--t-wa-dk); }
.t-btn-sec { background: var(--t-card); color: var(--t-tinta); border: 2px solid var(--t-linea); }
.t-btn[disabled] { opacity: .45; cursor: not-allowed; }
.t-pie-ayuda { text-align: center; font-size: 14px; color: var(--t-tinta-2); margin-top: 8px; }

/* formulario */
.t-campo { display: block; border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.t-campo > span, .t-campo legend { display: block; font-size: 16px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.t-campo input {
  width: 100%; height: 52px; border: 2px solid var(--t-linea); border-radius: 12px;
  padding: 0 14px; font-family: inherit; font-size: 16px; font-weight: 500; background: #fff; color: var(--t-tinta);
}
.t-campo input:focus { border-color: var(--t-tinta); outline: 0; }
.t-campo.t-err input { border-color: var(--t-rojo); }
.t-err-tx { display: block; font-style: normal; color: var(--t-rojo-dk); font-size: 14px; font-weight: 600; margin-top: 6px; }
.t-opc2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t-opc, .t-local {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 2px solid var(--t-linea); border-radius: 14px; background: #fff; padding: 12px 14px; min-height: 56px;
}
.t-opc-ic { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.t-opc b, .t-local b { font-size: 16px; }
.t-opc small, .t-local span { font-size: 14px; color: var(--t-tinta-2); }
.t-opc.on, .t-local.on { border-color: var(--t-rojo); background: var(--t-rojo-sv); box-shadow: inset 0 0 0 1px var(--t-rojo); }
.t-opc.on::after, .t-local.on::after {
  content: "✓"; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--t-rojo); color: #fff; font-size: 14px; font-weight: 800;
}
.t-opc[disabled] { opacity: .5; }
.t-locales { display: grid; gap: 8px; }
.t-local { width: 100%; }
.t-local em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--t-ambar-tx); }
.t-info, .t-alerta {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px;
}
.t-info { background: #fff; border: 1px solid var(--t-linea); }
.t-alerta { background: var(--t-ambar); color: var(--t-ambar-tx); display: block; }
.t-hoja-pie .t-alerta { margin-bottom: 10px; }
.t-alerta .t-link { color: var(--t-ambar-tx); padding: 4px 0; min-height: 0; font-size: 15px; }
.t-resumen { display: flex; justify-content: space-between; font-size: 16px; color: var(--t-tinta-2); padding: 4px 2px; }
.t-resumen b { color: var(--t-tinta); }

/* listo */
.t-listo { display: grid; gap: 14px; text-align: center; padding: 16px 4px; font-size: 16px; }
.t-listo-ic {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 4px;
  display: grid; place-items: center; background: var(--t-wa); color: #fff; font-size: 38px; font-weight: 800;
}
.t-listo-big { font-size: 20px; font-weight: 700; }
.t-listo b { white-space: nowrap; }
/* §C-1492 · "Para la próxima": separado del pedido, más chico, para no competir con «Enviar» */
.t-listo-mas { display: grid; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(127,127,127,.25); }
.t-listo-mas p { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; opacity: .7; }

/* toast */
.t-toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 20px);
  background: var(--t-tinta); color: #fff; padding: 12px 16px; border-radius: 12px;
  font-size: 15px; font-weight: 600; max-width: calc(100% - 32px); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.t-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Plan en el pedido */
.t-plan-tip { font-size: 14px; background: #e8f6ee; color: #0d5c31; border-radius: 12px; padding: 10px 12px; margin: 0 0 8px; }
.t-plan-box { background: #fff; border: 2px solid #cfe9da; border-radius: 16px; padding: 12px 14px 4px; }
.t-plan-box legend { float: left; width: 100%; }
.t-plan-box legend small { font-size: 13px; font-weight: 600; color: var(--t-tinta-2); margin-left: 4px; }
.t-plan-box .t-campo { margin-bottom: 12px; }
.t-chips2 { display: flex; flex-wrap: wrap; gap: 8px; clear: both; margin-bottom: 10px; }
.t-chipo {
  min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--t-linea); background: #fff;
  font-size: 15px; font-weight: 700;
}
.t-chipo.on { border-color: var(--t-ok); background: #e8f6ee; color: #0d5c31; }
.t-resumen-plan s { color: var(--t-tinta-2); }
.t-plan-hoja { display: grid; gap: 16px; font-size: 16px; }
.t-plan-lead { font-size: 18px; }
.t-plan-pcts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-plan-pcts li { background: #fff; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; box-shadow: var(--t-sombra); }
.t-plan-pcts b { font-size: 30px; font-weight: 900; color: var(--t-ok); line-height: 1; }
.t-plan-pcts span { font-size: 14px; color: var(--t-tinta-2); margin-top: 4px; }
.t-plan-como { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.t-btn-centro { justify-content: center; }

/* ---------- fotos y video reales del local ---------- */
.t-video {
  position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 14px;
  aspect-ratio: 3 / 2; background: #2a1014; box-shadow: 0 10px 24px rgba(20, 0, 5, .22);
}
.t-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.t-video-tx {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px; color: #fff;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .72));
}
.t-video-tx b { font-size: 22px; line-height: 1.12; font-weight: 900; letter-spacing: -.3px; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
.t-video-tx span { font-size: 14px; font-weight: 600; color: #f1f1f1; }
.t-video-vivo {
  align-self: flex-start; background: rgba(15, 138, 67, .92); color: #fff !important;
  font-size: 12px !important; font-weight: 800 !important; padding: 4px 10px; border-radius: 999px;
}
@media (min-width: 760px) { .t-video { aspect-ratio: 16 / 7; } }

.t-hero-foto {
  width: 104px !important; height: 130px !important; object-fit: cover; border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, .85); transform: rotate(3deg); filter: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

.t-galeria { grid-auto-columns: 150px; }
.t-foto {
  position: relative; display: block; border-radius: var(--t-r); overflow: hidden; aspect-ratio: 4 / 5;
  text-decoration: none; box-shadow: var(--t-sombra); background: #ddd;
}
.t-foto img { width: 100%; height: 100%; object-fit: cover; display: block; background-size: cover; }
.t-foto span {
  position: absolute; inset: auto 0 0 0; padding: 30px 10px 10px; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.2;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .75));
}

.t-lista-foto {
  position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 7; margin-bottom: 12px; background: #ddd;
}
.t-lista-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-lista-foto span {
  position: absolute; inset: auto 0 0 0; padding: 30px 16px 12px; color: #fff; font-size: 22px; font-weight: 900;
  display: flex; flex-direction: column; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
}
.t-lista-foto small { font-size: 13px; font-weight: 600; opacity: .9; }
@media (min-width: 760px) { .t-lista-foto { aspect-ratio: 16 / 5; } }

.t-pie-foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }

/* ════════ EL MOMENTO DEL DÍA: la estética cambia con la hora ════════
   Siempre rojo Manolito de base; cambia el tono del encabezado, el fondo y el acento. */
:root[data-momento="madrugada"] { --t-top-bg: linear-gradient(120deg, #2a0f4a 0%, #6b0c2c 70%, #a50d26 100%); --t-fondo: #efeef5; --t-acento: #6b4bd8; }
:root[data-momento="manana"]    { --t-top-bg: linear-gradient(120deg, #c8102e 0%, #e2531e 100%); --t-fondo: #faf5ee; --t-acento: #b45309; }
:root[data-momento="mediodia"]  { --t-top-bg: linear-gradient(120deg, #c8102e 0%, #e9761a 100%); --t-fondo: #fbf7ef; --t-acento: #c2410c; }
:root[data-momento="tarde"]     { --t-top-bg: linear-gradient(120deg, #b30f2b 0%, #c8102e 55%, #d9762b 100%); --t-fondo: #f4f6ee; --t-acento: #4d7c0f; }
:root[data-momento="noche"]     { --t-top-bg: linear-gradient(120deg, #3a0714 0%, #8f0b22 60%, #c8102e 100%); --t-fondo: #f3f1f3; --t-acento: #9f1239; }
:root[data-momento="previa"]    { --t-top-bg: linear-gradient(120deg, #3b0a5e 0%, #8a0c4c 55%, #c8102e 100%); --t-fondo: #f2eff6; --t-acento: #7e22ce; }
:root[data-fecha="halloween"]   { --t-top-bg: linear-gradient(120deg, #1c1917 0%, #9a3412 55%, #ea580c 100%); --t-acento: #c2410c; }
:root[data-fecha="fiestas"]     { --t-top-bg: linear-gradient(120deg, #14532d 0%, #9f1239 60%, #c8102e 100%); --t-acento: #15803d; }
.t-video-vivo { background: var(--t-acento, rgba(15, 138, 67, .92)) !important; }
.t-momento .t-bloque-h h2 { color: var(--t-acento, var(--t-tinta)); }

/* kits */
.t-kits { grid-auto-columns: 230px; }
.t-kit {
  display: flex; flex-direction: column; gap: 4px; text-align: left; border: 0; padding: 10px;
  background: var(--t-card); border-radius: var(--t-r); box-shadow: var(--t-sombra); color: var(--t-tinta);
}
.t-kit-ph {
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #f3f2ee; margin-bottom: 4px;
}
.t-kit-ph > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-kit-mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 100%; height: 100%; gap: 2px; background: #fff; }
.t-kit-mosaico img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; }
.t-kit-mosaico i { display: grid; place-items: center; font-style: normal; font-size: 28px; }
.t-kit-ph em {
  position: absolute; left: 8px; bottom: 8px; font-style: normal; font-size: 26px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}
.t-kit b { font-size: 16px; font-weight: 800; line-height: 1.2; }
.t-kit small { font-size: 13px; color: var(--t-tinta-2); line-height: 1.25; min-height: 2.5em; }
.t-kit-pie { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--t-tinta-2); margin-top: 2px; }
.t-kit-pie strong { font-size: 18px; color: var(--t-tinta); font-weight: 900; }
.t-kit-cta {
  margin-top: 6px; text-align: center; font-weight: 800; font-size: 15px; color: #fff; background: var(--t-acento, var(--t-rojo));
  border-radius: 12px; padding: 11px 0;
}
.t-lineas li.t-off { opacity: .5; }
.t-l-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; flex: none; }
.t-lineas li { gap: 10px; }
.t-step-sm { min-height: 40px; min-width: 116px; }
.t-step-sm button { width: 40px !important; height: 40px !important; font-size: 22px !important; }

/* armador: la vidriera, justo después de la barra (§C-1500). De noche y con luz cálida, como la pantalla del
   armador; las fotos son de lo que se arma de verdad. */
.t-armar {
  position: relative; border-radius: 22px; padding: 16px 14px 14px; color: #f5f1ea; overflow: hidden;
  background: radial-gradient(110% 70% at 50% 18%, #3a2c22 0%, rgba(58, 44, 34, 0) 62%), linear-gradient(180deg, #1f2029, #121319);
  box-shadow: 0 14px 34px rgba(18, 19, 25, .28);
}
.t-armar-h { margin: 0 4px 12px; }
.t-armar-h small { display: block; font-size: 12.5px; font-weight: 700; color: #f2b544; letter-spacing: .2px; }
.t-armar-h h2 { margin: 2px 0 0; font: 500 26px/1.1 "Fraunces", Georgia, serif; letter-spacing: -.3px; color: #f5f1ea; }
.t-armar-h em { font-style: italic; font-weight: 600; color: #f2b544; }
.t-armar-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 720px) { .t-armar-tiles { grid-template-columns: repeat(4, 1fr); } }
.t-armar-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; border: 0; color: inherit; font: inherit; cursor: pointer;
  background: rgba(255, 255, 255, .06); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); padding: 10px 6px 12px;
  transition: transform .15s, background .2s;
}
.t-armar-tile:active { transform: scale(.97); background: rgba(255, 255, 255, .1); }
.t-armar-tile[hidden] { display: none; }
.t-armar-tile img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: contain; display: block; margin-bottom: 4px;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
  background: radial-gradient(closest-side, rgba(255, 196, 120, .22), transparent 75%);
}
.t-armar-tile b { font-size: 15px; font-weight: 800; color: #fff; }
.t-armar-tile small { font-size: 12px; color: #b9b5ae; line-height: 1.2; }
.t-armar-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 50px; margin-top: 12px; border: 0;
  border-radius: 999px; background: linear-gradient(180deg, #e3263f, #b80f2b); color: #fff; font: inherit; font-size: 16px; font-weight: 800;
  box-shadow: 0 10px 24px rgba(227, 38, 63, .35), inset 0 1px 0 rgba(255, 255, 255, .25); cursor: pointer;
}
.t-armar-cta span { font-size: 22px; line-height: 1; margin-top: -2px; }
.t-armar-grande { grid-template-columns: 1fr; }
.t-armar-grande .t-armar-tile {
  display: grid; grid-template-columns: 60px 1fr; column-gap: 14px; row-gap: 2px; align-items: center; text-align: left; padding: 16px;
}
.t-armar-grande .t-armar-tile span { font-size: 48px; grid-row: 1 / 3; }
.t-armar-grande .t-armar-tile b { align-self: end; }
.t-armar-grande .t-armar-tile small { align-self: start; }
.t-armar-grande .t-armar-tile b { font-size: 18px; display: block; }
.t-armar-grande .t-armar-tile small { font-size: 14px; }
.t-arm-lista { margin-bottom: 8px; }
.t-arm-lista li { padding: 8px 12px; }
.t-chipo small { font-weight: 600; color: var(--t-tinta-2); font-size: 13px; }

/* el botón flotante del armador: con nombre (un círculo con un emoji no decía qué hacía) y la foto de uno armado */
.t-fab-armar {
  position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 34;
  height: 56px; border-radius: 999px; border: 2.5px solid #fff; padding: 0 18px 0 6px;
  background: var(--t-top-bg, var(--t-rojo)); color: #fff; box-shadow: 0 8px 22px rgba(120, 0, 20, .35);
  display: flex; align-items: center; gap: 9px; line-height: 1; cursor: pointer;
}
.t-fab-armar img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #fff; flex: none; }
.t-fab-armar small { font-size: 15px; font-weight: 800; white-space: nowrap; }
body.t-con-barra .t-fab-armar { bottom: calc(92px + env(safe-area-inset-bottom)); }
body.t-hoja-on .t-fab-armar { display: none; }

/* ════════ A UN TOQUE DE EMPEZAR: círculos de categorías + lo más pedido ahora ════════ */
.t-arriba { margin-bottom: 12px; }
.t-circulos { grid-template-rows: auto; grid-auto-columns: 74px; gap: 8px; padding-top: 4px; }
@media (min-width: 900px) {
  .t-circulos { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; }
}
.t-circulos .t-cat-ic { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--t-card); box-shadow: 0 2px 10px rgba(20, 20, 20, .1); }
.t-circulos .t-cat-ic img { width: 46px; height: 46px; }
.t-circulos .t-cat-n { font-size: 11.5px; max-width: 74px; }
/* el primer círculo: Armá el tuyo (§C-1500), con la foto de uno armado, el borde rojo y un "3D" */
.t-cat-armar { position: relative; border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }
.t-cat-armar[hidden] { display: none; }
.t-circulos .t-cat-armar .t-cat-ic { overflow: hidden; border: 2.5px solid var(--t-rojo); background: #fff; animation: t-latido 2.4s ease-out 1s 3; }
.t-circulos .t-cat-armar .t-cat-ic img { width: 100%; height: 100%; object-fit: cover; }
.t-cat-armar .t-cat-n { color: var(--t-rojo); font-weight: 800; }
.t-cat-armar::after {
  content: "3D"; position: absolute; top: -2px; right: 2px; padding: 2px 5px; border-radius: 8px;
  background: #f2b544; color: #1d1607; font: 900 10px/1.1 "Inter", system-ui, sans-serif; box-shadow: 0 0 0 2px #fff;
}
@keyframes t-latido { 0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(200, 16, 46, 0); } }
@media (prefers-reduced-motion: reduce) { .t-circulos .t-cat-armar .t-cat-ic { animation: none; } }

.t-ya-bloque .t-bloque-h { margin-top: 0; }
.t-ya { grid-auto-columns: 124px; gap: 8px; }
.t-mini { background: var(--t-card); border-radius: 14px; box-shadow: var(--t-sombra); padding: 8px; display: flex; flex-direction: column; min-width: 0; }
.t-mini-ph { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background: #fff; display: grid; place-items: center; margin-bottom: 6px; }
.t-mini-ph img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.t-mini-act { position: absolute; right: -2px; bottom: -4px; }
.t-mas1 {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; background: var(--t-rojo); color: #fff;
  font-size: 26px; font-weight: 700; line-height: 1; box-shadow: 0 4px 12px rgba(140, 0, 20, .35); padding: 0;
}
.t-mas1:active { transform: scale(.92); }
.t-mini-step {
  display: flex; align-items: center; background: var(--t-rojo); color: #fff; border-radius: 999px; border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(140, 0, 20, .35); height: 44px;
}
.t-mini-step button { border: 0; background: none; color: #fff; width: 30px; height: 38px; font-size: 22px; font-weight: 700; padding: 0; }
.t-mini-step output { min-width: 22px; text-align: center; font-weight: 800; font-size: 14px; white-space: nowrap; }
.t-mini-n { font-size: 13px; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.t-mini-pr { font-size: 15px; font-weight: 800; margin-top: 2px; }
.t-mini-pr small { font-size: 12px; }

/* ════════ EVENTOS del barrio y del calendario + clima ════════ */
:root[data-fecha="futbol"] { --t-top-bg: linear-gradient(120deg, #14532d 0%, #166534 45%, #c8102e 100%); --t-acento: #15803d; }
:root[data-fecha="finde"]  { --t-top-bg: linear-gradient(120deg, #0369a1 0%, #c8102e 100%); --t-acento: #0369a1; }
:root[data-fecha="clases"] { --t-top-bg: linear-gradient(120deg, #1d4ed8 0%, #c8102e 100%); --t-acento: #1d4ed8; }
:root[data-fecha="calor"]  { --t-top-bg: linear-gradient(120deg, #ea580c 0%, #f59e0b 45%, #c8102e 100%); --t-fondo: #fff8ef; --t-acento: #c2410c; }
:root[data-fecha="lluvia"] { --t-top-bg: linear-gradient(120deg, #334155 0%, #475569 50%, #c8102e 100%); --t-fondo: #f1f4f7; --t-acento: #334155; }
.t-evento {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px;
  padding: 12px 12px 12px 16px; border-radius: 16px; color: #fff;
  background: var(--t-top-bg, var(--t-rojo)); box-shadow: 0 6px 18px rgba(20, 0, 5, .18);
}
.t-evento-tx { display: flex; flex-direction: column; min-width: 0; }
.t-evento-tx b { font-size: 17px; font-weight: 900; line-height: 1.2; }
.t-evento-tx span { font-size: 13px; opacity: .95; }
.t-evento-b {
  flex: none; border: 0; border-radius: 999px; background: #fff; color: var(--t-acento, var(--t-rojo));
  font-weight: 800; font-size: 14px; min-height: 40px; padding: 0 14px;
}

/* ════════ §C-1429 · LA BARRA: las bebidas, fijas y arriba de todo ════════
   Un panel oscuro con ámbar de birra, distinto del resto del inicio a propósito: es lo
   primero que se tiene que ver después de las categorías, a cualquier hora. Las tarjetas
   adentro siguen siendo las mismas (blancas): agregar es igual que en el resto. */
.t-beb {
  margin: 0 -16px 22px; padding: 14px 16px 12px;
  background: radial-gradient(120% 80% at 0% 0%, #3b2508 0%, #1a1006 55%, #120c06 100%);
  color: #fff7e6;
}
@media (min-width: 760px) { .t-beb { margin: 0 0 24px; border-radius: 20px; padding: 16px 18px 14px; } }
.t-beb-head {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 320px;
  border-radius: 16px; overflow: hidden; text-decoration: none; color: #fff; background: #2a1a08;
}
.t-beb-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; }
.t-beb-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 2, .05) 0%, rgba(10, 6, 2, .55) 45%, rgba(10, 6, 2, .92) 100%); }
.t-beb-head-tx { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.t-beb-head-tx small { font-size: 13px; font-weight: 800; color: #fbbf24; }
.t-beb-head-tx b { font-size: 27px; font-weight: 900; line-height: 1.05; letter-spacing: -.4px; }
.t-beb-head-tx span { font-size: 14px; color: #fde9c4; }
.t-beb-head-tx em {
  align-self: flex-start; margin-top: 8px; font-style: normal; font-weight: 800; font-size: 14px;
  background: #f59e0b; color: #1a1006; border-radius: 999px; padding: 7px 13px;
}
.t-beb-atajos { display: flex; gap: 8px; overflow-x: auto; margin: 12px -16px 2px; padding: 0 16px; scrollbar-width: none; }
.t-beb-atajos::-webkit-scrollbar { display: none; }
.t-beb-atajos a {
  flex: none; text-decoration: none; color: #1a1006; background: #fde68a;
  font-weight: 800; font-size: 14px; border-radius: 999px; padding: 10px 14px;
}
.t-beb-sec { margin-top: 14px; }
/* ⚠️ El panel es oscuro y su texto claro se HEREDA: las tarjetas (blancas) vuelven a la tinta
   de siempre, si no el nombre y el precio salen crema sobre blanco. */
.t-beb .t-card, .t-beb .t-mini { color: var(--t-tinta); }
.t-beb .t-bloque-h { flex-direction: column; align-items: flex-start; gap: 0; }
.t-beb .t-bloque-h h2 { color: #fff; font-size: 19px; }
.t-beb .t-bloque-h small { color: #fcd34d; }
.t-beb .t-riel-mas { background: rgba(253, 230, 138, .14); color: #fde68a; }
.t-beb .t-kit-cta { background: #f59e0b; color: #1a1006; }
/* combo de dos botellas: una fila, no un 2×2 con la mitad en blanco */
.t-kit-mosaico:has(> :nth-child(2):last-child) { grid-template-rows: 1fr; }
.t-six {
  margin-top: 8px; width: 100%; min-height: 42px; border: 0; border-radius: 12px;
  background: #fde68a; color: #6d4c00; font-weight: 800; font-size: 14px;
}
.t-six:active { background: #f59e0b; color: #1a1006; }
/* La leyenda de la Ley 24.788 (art. 6 inc. e): "en letra y lugar visible". */
.t-ley { margin: 10px 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--t-tinta-2); text-align: center; }
.t-beb .t-ley { margin: 14px 0 0; color: #fcd34d; }
.t-pie-ley { margin-top: 0; }

/* la sugerencia de la barra: "¿le sumás la Coca?" */
.t-sugi {
  position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 10px; border-radius: 16px; background: #1a1006; color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(16px); transition: opacity .2s, transform .2s;
}
body.t-con-barra .t-sugi { bottom: calc(84px + env(safe-area-inset-bottom)); }
.t-sugi.on { opacity: 1; transform: none; }
.t-sugi > img, .t-sugi > .t-ph-em {
  width: 48px; height: 48px; flex: none; object-fit: contain; background: #fff; border-radius: 10px;
  display: grid; place-items: center; font-size: 28px;
}
.t-sugi-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.t-sugi-tx small { font-size: 12px; font-weight: 800; color: #fbbf24; }
.t-sugi-tx b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sugi-tx span { font-size: 14px; font-weight: 800; }
.t-sugi-si {
  flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px;
  background: #f59e0b; color: #1a1006; font-weight: 900; font-size: 15px;
}
.t-sugi-x { flex: none; width: 36px; height: 44px; border: 0; background: none; color: #fff; font-size: 18px; padding: 0; }
body.t-sugi-on .t-toast { bottom: 170px; }
body.t-sugi-on .t-fab-armar, body.t-hoja-on .t-sugi { display: none; }
@media (prefers-reduced-motion: reduce) { .t-sugi { transition: none; } }

/* §C-1459b · MI CUENTA (la hoja que abre el toro) */
.t-cta-num { display: flex; flex-direction: column; background: var(--t-card); border: 1px solid var(--t-linea); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; }
.t-cta-num span { font-size: 13px; font-weight: 700; color: var(--t-tinta-2); text-transform: uppercase; letter-spacing: .4px; }
.t-cta-num b { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.t-cta-num small { font-size: 13px; color: var(--t-tinta-2); }
.t-cta-ok { margin-bottom: 14px; }
.t-cta-desc { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--t-linea); }
.t-cta-desc h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.t-cta-req { font-size: 15px; margin: 0 0 10px; color: var(--t-rojo); }
.t-cta-desc .t-plan-pcts { margin-bottom: 10px; }
.t-cta-acc { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.t-cta-omitir { display: block; margin: 8px auto 0; }

/* §C-1464 · registro y aceptación en la cuenta */
.t-cta-tilde { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; font-size: 15px; line-height: 1.35; }
.t-cta-tilde input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--t-rojo); }
.t-cta-tilde a, .t-cta-legal a { color: var(--t-tinta); font-weight: 700; }
/* §C-1510 · "Mostrar la clave": chico, pegado a los campos de clave. */
.t-cta-ver { display: flex; gap: 8px; align-items: center; margin: -4px 0 12px; font-size: 14px; color: var(--t-tinta-2); }
.t-cta-ver input { width: 18px; height: 18px; accent-color: var(--t-rojo); }
.t-cta-nuevo { display: grid; gap: 4px; margin: 6px 0 14px; padding: 14px; border: 1px solid var(--t-linea); border-radius: 14px; background: var(--t-card); }
.t-cta-nuevo span { font-size: 14px; color: var(--t-tinta-2); margin-bottom: 8px; }
.t-cta-legal { font-size: 13px; color: var(--t-tinta-2); margin-top: 18px; line-height: 1.6; }
.t-cta-mkt { margin-top: 16px; }
.t-cta-peligro { color: var(--t-rojo); }
.t-cta-borrar { margin-top: 14px; }
/* §C-1464 · pie legal de la tienda */
.t-pie-legal { display: grid; gap: 8px; margin: 18px 0 10px; }
.t-pie-boton { display: block; text-align: center; padding: 12px; border: 2px solid var(--t-tinta); border-radius: 12px; color: var(--t-tinta); font-weight: 800; text-decoration: none; letter-spacing: .3px; }
.t-pie-docs { line-height: 1.8; }
.t-pie-docs a, .t-pie-quien a { color: var(--t-tinta); }
.t-pie-quien { margin: 6px 0; }
.t-pie-aaip, .t-legal-aaip { font-size: 12px; color: var(--t-tinta-2); line-height: 1.45; }
/* §C-1464 · las páginas legales (/catalogo/legal/…) */
.t-legal-main { max-width: 760px; margin: 0 auto; padding: 12px 16px 48px; }
.t-legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.t-legal-nav a { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--t-linea); background: var(--t-card); color: var(--t-tinta); text-decoration: none; font-size: 14px; font-weight: 700; }
.t-legal-nav a.on { background: var(--t-tinta); color: var(--t-card); border-color: var(--t-tinta); }
.t-legal-doc { background: var(--t-card); border-radius: 16px; padding: 18px 18px 22px; box-shadow: var(--t-sombra); line-height: 1.55; font-size: 15px; overflow-wrap: anywhere; }
.t-legal-doc h1 { font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.t-legal-doc h2 { font-size: 17px; font-weight: 800; margin: 20px 0 6px; }
.t-legal-doc ul { padding-left: 20px; margin: 0 0 8px; }
.t-legal-doc li { margin-bottom: 6px; }
.t-legal-doc a { color: var(--t-rojo); font-weight: 700; }
.t-legal-ver { font-size: 13px; color: var(--t-tinta-2); margin: 0 0 12px; }
.t-legal-lead { font-size: 16px; }
.t-legal-tabla { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 12px; }
.t-legal-tabla th, .t-legal-tabla td { text-align: left; vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--t-linea); }
.t-legal-form { margin-top: 14px; }
.t-legal-form textarea { width: 100%; border: 2px solid var(--t-linea); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; }
.t-legal-ok { margin-top: 14px; }
.t-legal-cod { font-size: 20px; letter-spacing: 1px; }
.t-legal-quien { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--t-linea); font-size: 14px; }
.t-cta-aviso { display: block; margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
.t-cta-aviso a, .t-cta-desc a { color: var(--t-tinta); font-weight: 700; }
.t-cta-descarga { color: var(--t-tinta); font-weight: 700; }

/* §C-1485 · el QR de la caja: el estado del aviso (esperando · ya te cargó · venció) */
.t-caja { display: grid; gap: 6px; justify-items: center; text-align: center; margin: 4px 0 14px; padding: 18px 14px;
          border: 1px solid var(--t-linea); border-radius: 14px; background: var(--t-card); }
.t-caja b { font-size: 18px; }
.t-caja span { font-size: 15px; color: var(--t-tinta-2); }
.t-caja small { font-size: 13px; color: var(--t-tinta-2); }
/* ⚠️ `.t-caja span` (0,1,1) le gana a `.t-caja-ico` (0,1,0): sin subirle la especificidad el ícono sale a 15px. */
.t-caja .t-caja-ico { font-size: 44px; line-height: 1; }
.t-caja-ok { border: 2px solid var(--t-ok); }
.t-caja-ok b { color: var(--t-ok); }

/* §C-1486 · el aviso del Plan arriba del perfil: falta completar (ámbar) o ya lo tiene (verde) */
.t-cta-plan { margin-bottom: 12px; }
.t-cta-plan-ok { border: 2px solid var(--t-ok); }

/* §C-1492 · el envío y el retiro, arriba de todo: una línea, sin competir con el evento ni el cumple */
.t-entrega { margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; opacity: .85; text-align: center; }
.t-entrega[hidden] { display: none; }

/* ═══════════ §C-1494 · EL MENÚ LATERAL (blanco, detalles rojos, texto negro) ═══════════
   ⚠️ El panel es BLANCO OPACO sobre un fondo oscurecido: así no se mezcla con el momento del
   día (los degradés de .t-top) ni con las fotos de la góndola. Mide SIEMPRE la pantalla
   (100dvh, con 100vh de respaldo) y sólo la lista del medio se desplaza. */
body.t-menu-on { overflow: hidden; }
.t-menu-btn {
  position: fixed; left: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 34;
  width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--t-rojo); padding: 0;
  background: #fff; color: var(--t-rojo); box-shadow: 0 8px 22px rgba(120, 0, 20, .28);
  display: grid; place-items: center;
}
body.t-con-barra .t-menu-btn { bottom: calc(92px + env(safe-area-inset-bottom)); }
.t-menu-barras { display: grid; gap: 5px; }
.t-menu-barras i { display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--t-rojo); }
.t-menu-punto { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--t-rojo); border: 2px solid #fff; }
.t-menu-bd { position: fixed; inset: 0; z-index: 50; background: rgba(10, 10, 10, .5); }
.t-menu {
  position: fixed; z-index: 51; top: 0; left: 0; bottom: 0;
  width: min(86vw, 340px); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: #fff; color: #16181d; box-shadow: 10px 0 30px rgba(0, 0, 0, .25);
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.t-menu-x {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px;
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #16181d; font-size: 20px;
}
.t-menu-cab { flex: none; display: grid; justify-items: center; gap: 6px; padding: 26px 18px 14px; text-align: center; }
.t-menu-foto { position: relative; border: 0; background: transparent; padding: 0; }
.t-menu-cam {
  position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; background: var(--t-rojo); color: #fff; border: 2px solid #fff;
}
.t-ava { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--t-rojo-sv); color: var(--t-rojo); font-weight: 900; }
.t-ava img { width: 100%; height: 100%; object-fit: cover; }
.t-ava-xl { width: 88px; height: 88px; font-size: 30px; border: 3px solid var(--t-rojo); }
.t-ava-xxl { width: 180px; height: 180px; font-size: 54px; border: 4px solid var(--t-rojo); }
.t-menu-nom { font-size: 19px; }
.t-menu-mail { font-size: 13px; color: #6b6f78; margin-top: -4px; overflow-wrap: anywhere; }
.t-menu-pts { font-size: 15px; font-weight: 700; color: #16181d; }
.t-menu-pts small { font-weight: 600; color: var(--t-tinta-2); }
.t-menu-datos { border: 0; background: transparent; color: var(--t-rojo); font-weight: 800; font-size: 15px; padding: 6px 10px; }
.t-menu-linea { flex: none; height: 3px; margin: 0 16px; border-radius: 2px; background: var(--t-rojo); }
.t-menu-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 0 16px; }
.t-menu-it {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 18px;
  border: 0; border-bottom: 1px solid #f0f0ee; background: #fff; color: #16181d; font-size: 17px; font-weight: 700; text-align: left;
}
.t-menu-it:active { background: var(--t-rojo-sv); }
.t-menu-ic { width: 28px; text-align: center; font-size: 20px; }
.t-menu-tx { flex: 1; }
.t-menu-fl { color: var(--t-rojo); font-size: 22px; font-weight: 900; }
.t-menu-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--t-rojo); color: #fff; font-size: 13px; font-weight: 800; display: inline-grid; place-items: center; }
.t-menu-pie { display: grid; justify-items: start; gap: 4px; padding: 18px; }
.t-menu-chico { border: 0; background: transparent; padding: 6px 0; color: #16181d; font-size: 14px; text-decoration: underline; }
.t-menu-conf { display: grid; gap: 8px; width: 100%; padding: 12px; border: 2px solid var(--t-rojo); border-radius: 12px; }
.t-menu-conf span { font-size: 14px; color: var(--t-tinta-2); }
.t-menu-conf > div { display: flex; gap: 10px; align-items: center; }
.t-menu-conf .t-btn { min-height: 44px; padding: 0 14px; justify-content: center; }
.t-btn-peligro { background: var(--t-rojo-dk); color: #fff; justify-content: center; }

/* las secciones del menú (en la hoja) */
.t-perfil-foto { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.t-perfil-foto .t-btn { width: auto; min-height: 44px; padding: 0 16px; }
.t-plan-inactivo { border: 2px solid var(--t-rojo); }
.t-plan-obtener { border: 0; padding: 0; background: transparent; color: var(--t-rojo); font: inherit; font-weight: 900; text-decoration: underline; }
.t-compra { display: grid; gap: 8px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--t-linea); border-radius: 14px; background: var(--t-card); }
.t-compra-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.t-compra-h b { font-size: 20px; }
.t-compra-h span { font-size: 14px; color: var(--t-tinta-2); }
.t-compra-pts { font-size: 14px; font-weight: 800; color: var(--t-ok); }
.t-compra-acc { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.t-compra-acc .t-btn { width: auto; min-height: 44px; padding: 0 16px; justify-content: center; }
.t-compra .t-compra-calif { justify-self: start; }
.t-compra .t-btn.t-compra-calif { width: auto; min-height: 44px; padding: 0 16px; }
.t-calif { display: grid; gap: 8px; }
.t-calif textarea { width: 100%; padding: 10px; border: 2px solid var(--t-linea); border-radius: 10px; font: inherit; }
.t-estrellas { display: flex; gap: 6px; }
.t-estrella { width: 44px; height: 44px; border: 0; background: transparent; font-size: 32px; line-height: 1; color: #d6d6d0; padding: 0; }
.t-estrella.on { color: #f5a400; }
.t-suc { display: grid; gap: 6px; margin: 0 0 14px; padding: 14px; border: 1px solid var(--t-linea); border-radius: 14px; background: var(--t-card); }
.t-suc b { font-size: 18px; }
.t-suc span { font-size: 15px; color: var(--t-tinta-2); }
.t-suc small { font-size: 14px; font-weight: 700; color: var(--t-ok); }
.t-suc-mapa { width: 100%; height: 170px; border: 0; border-radius: 10px; background: var(--t-rojo-sv); }
.t-nov {
  display: grid; gap: 4px; width: 100%; margin: 0 0 10px; padding: 14px; text-align: left;
  border: 1px solid var(--t-linea); border-radius: 14px; background: var(--t-card); color: var(--t-tinta); font: inherit;
}
/* sombreada mientras no la abrió */
.t-nov.nueva { background: var(--t-rojo-sv); border-color: var(--t-rojo); }
.t-nov-h { display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.t-nov-h b { font-size: 16px; }
.t-nov-h small { flex: none; font-size: 13px; color: var(--t-tinta-2); }
.t-nov-1 { font-size: 15px; color: var(--t-tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-nov-cuerpo { font-size: 15px; white-space: pre-wrap; }
.t-fperfil { display: grid; place-items: center; margin: 4px 0 12px; }   /* §C-1503 · era `.t-foto`, que ya es la tarjeta de foto del catálogo (4:5, gris, con degradé abajo): por eso el círculo salía corrido y con fondo */
.t-foto-video { width: min(80vw, 320px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--t-rojo); transform: scaleX(-1); background: #000; }

/* ═══════════ §C-1497 · la campanita y el sobre de arriba, contacto, el chat, la encuesta y ajustes ═══════════ */
.t-top-ics { display: flex; gap: 6px; flex: none; margin-left: auto; }
.t-top-ic {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.t-top-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-top-badge {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: #fff; color: var(--t-rojo); font-size: 12px; font-weight: 900; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.t-top-badge[hidden] { display: none; }
@media (max-width: 420px) { .t-top-ic { width: 36px; height: 36px; } .t-top-ic svg { width: 20px; height: 20px; } .t-top-ics { gap: 4px; } }
/* En los celulares más angostos (360 px) los pasos quedan sólo con su número, también el de ahora:
   con la campanita y el sobre no entraba la palabra y se comía el nombre de la marca. */
@media (max-width: 380px) { .t-pasos li.on { font-size: 0; gap: 0; } .t-pasos li.on span { font-size: 12px; } .t-top-in { gap: 6px; } }

.t-cont-on { color: #15803d; font-weight: 700; }
.t-cont-off { color: var(--t-tinta-2); }

.t-chat-cab { padding: 10px 12px; margin: 0 0 10px; border-radius: 12px; background: var(--t-rojo-sv); color: var(--t-tinta); font-size: 15px; }
.t-chat-msgs { display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.t-chat-vacio { text-align: center; margin: 30px 0; }
.t-chat-m { max-width: 82%; padding: 8px 12px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.t-chat-m b { font-size: 13px; color: var(--t-rojo); }
.t-chat-m span { font-size: 16px; white-space: pre-wrap; }
.t-chat-m small { align-self: flex-end; font-size: 12px; opacity: .7; }
.t-chat-yo { align-self: flex-end; background: var(--t-rojo); color: #fff; border-bottom-right-radius: 4px; }
.t-chat-local { align-self: flex-start; background: var(--t-card); border: 1px solid var(--t-linea); border-bottom-left-radius: 4px; }
.t-chat-escribir { display: flex; gap: 8px; }
.t-chat-escribir input { flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid var(--t-linea); border-radius: 12px; font-size: 16px; background: #fff; color: var(--t-tinta); }
.t-chat-escribir .t-btn { flex: none; width: auto; padding: 0 16px; }
.t-chat-fin { display: block; margin: 8px auto 0; }

.t-enc h3 { font-size: 19px; margin: 4px 0 12px; }
.t-enc-q { font-weight: 800; margin: 14px 0 8px; }
.t-enc-fila { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.t-enc-n {
  min-height: 48px; border-radius: 12px; border: 2px solid var(--t-rojo); background: #fff; color: var(--t-rojo);
  font-size: 19px; font-weight: 900; cursor: pointer;
}
.t-enc-n.on { background: var(--t-rojo); color: #fff; }
.t-enc-ref { display: flex; justify-content: space-between; font-size: 12px; color: var(--t-tinta-2); margin-top: 4px; }
.t-enc .t-campo { margin-top: 16px; }
.t-enc textarea { width: 100%; padding: 10px; border: 1px solid var(--t-linea); border-radius: 12px; font: inherit; font-size: 16px; }
/* La pantalla verde del final (pedido textual: "que al clickear se ponga la pantalla en verde"). */
.t-gracias {
  min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center;
  margin: -14px -16px 0; padding: 30px 20px; background: #16a34a; color: #fff;
}
.t-gracias span { font-size: 64px; line-height: 1; }
.t-gracias b { font-size: 24px; }
.t-sobre-acc { font-size: 14px; font-weight: 800; color: var(--t-rojo); }
.t-sola-h { font-size: 18px; margin: 0 0 12px; }

.t-ajustes h3 { font-size: 18px; margin: 0 0 8px; }
.t-sw-fila {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 4px; border: 0;
  border-bottom: 1px solid var(--t-linea); background: transparent; color: inherit; text-align: left; cursor: pointer; font: inherit;
}
.t-sw-tx { flex: 1; display: grid; gap: 2px; }
.t-sw-tx small { color: var(--t-tinta-2); font-size: 14px; }
.t-sw { flex: none; width: 50px; height: 30px; border-radius: 15px; background: #c9cbd0; position: relative; transition: background .15s; }
.t-sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.t-sw.on { background: var(--t-rojo); }
.t-sw.on i { transform: translateX(20px); }
.t-ajustes .t-ayuda, .t-ajustes .t-btn { margin-top: 14px; }

/* ═══════════ §C-1503 · la barra de arriba en todos lados, sucursales con foto y el comprobante ═══════════ */
/* Con una hoja abierta la barra (toro, Manolito, locales abiertos, campanita, sobre) queda ENCIMA y la hoja
   arranca debajo. El buscador y los pasos se esconden: adentro de una hoja no se usan. */
body.t-hoja-on .t-top { z-index: 42; }
body.t-hoja-on .t-buscar, body.t-hoja-on .t-pasos { display: none; }
.t-hoja, .t-hoja-bd { top: var(--t-top-h, 0px); }
.t-hoja { padding-top: 0; }

.t-suc-foto { width: calc(100% + 28px); max-width: none; margin: -14px -14px 4px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px 14px 0 0; display: block; }
.t-suc-h { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.t-suc-h b { font-size: 17px; }
.t-suc-estado { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.t-suc-estado.on { background: #dcfce7; color: #15803d; }
.t-suc-estado.off { background: #eceef1; color: var(--t-tinta-2); }
.t-suc-cerrada .t-suc-foto { filter: grayscale(.6); opacity: .85; }
.t-suc-semana { color: var(--t-tinta-2); font-size: 13px; }

.t-tk { background: #fff; border: 1px solid var(--t-linea); border-radius: 14px; padding: 14px; }
.t-tk-cab { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--t-linea); }
.t-tk-cab img { border-radius: 50%; }
.t-tk-cab div { display: grid; gap: 2px; }
.t-tk-cab small { color: var(--t-tinta-2); font-size: 13px; }
.t-tk-items { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.t-tk-items li, .t-tk-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.t-tk-items li span { min-width: 0; overflow-wrap: anywhere; }
.t-tk-fila { padding: 4px 0; }
.t-tk-desc b { color: #15803d; }
.t-tk-total { border-top: 1px dashed var(--t-linea); margin-top: 6px; padding-top: 10px; font-size: 18px; }

/* §C-1503 · el ajuste de la foto de perfil: un cuadrado con la foto adentro y un círculo encima. */
.t-ajuste { position: relative; width: min(80vw, 320px); aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #111;
  touch-action: none; cursor: grab; user-select: none; }
.t-ajuste img { position: absolute; max-width: none; pointer-events: none; }
.t-ajuste-mascara { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); border: 3px solid #fff; pointer-events: none; }
.t-ajuste-zoom { display: flex; align-items: center; gap: 10px; margin: 6px auto 4px; max-width: 320px; font-weight: 700; }
.t-ajuste-zoom input { flex: 1; accent-color: var(--t-rojo); }

.t-falta { margin: 6px 0 12px; padding-left: 22px; font-size: 17px; font-weight: 700; }

/* §C-1507 · en el celular los pasos 1-2-3 se van de la barra (la apretaban); la barra del carrito
   ya dice cuánto llevás y el pedido se arma en la hoja. */
@media (max-width: 430px) { .t-pasos { display: none; } }
.t-suc-gmaps { align-self: flex-start; font-size: 14px; }

/* §C-1507 · EL GLOBITO DEL CHAT: flota a la derecha (arriba del "Armá el tuyo") mientras hay una
   conversación abierta; con un mensaje sin leer late y aparece el aviso de arriba. */
.t-chat-globo {
  position: fixed; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 34;
  width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--t-rojo); padding: 0;
  background: #fff; font-size: 26px; line-height: 1; box-shadow: 0 8px 22px rgba(120, 0, 20, .28);
  display: grid; place-items: center; cursor: pointer;
}
.t-chat-globo[hidden] { display: none; }
body.t-con-barra .t-chat-globo { bottom: calc(160px + env(safe-area-inset-bottom)); }
body.t-hoja-on .t-chat-globo, body.t-menu-on .t-chat-globo { display: none; }
.t-chat-globo-n {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px;
  background: var(--t-rojo); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff;
}
.t-chat-globo-n[hidden] { display: none; }
.t-chat-globo.nuevo { animation: t-globo-late 1.4s ease-in-out infinite; }
@keyframes t-globo-late { 50% { transform: scale(1.1); } }
.t-chat-noti {
  position: fixed; left: 12px; right: 12px; top: calc(var(--t-top-h, 64px) + 8px); z-index: 45;
  max-width: 520px; margin: 0 auto; display: flex; align-items: stretch;
  background: #fff; border-radius: 14px; border-left: 5px solid var(--t-rojo);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25); animation: t-noti-baja .25s ease-out;
}
.t-chat-noti[hidden] { display: none; }
@keyframes t-noti-baja { from { transform: translateY(-16px); opacity: 0; } }
.t-chat-noti-b { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; padding: 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.t-chat-noti-ic { font-size: 24px; flex: none; }
.t-chat-noti-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t-chat-noti-tx b { font-size: 15px; color: var(--t-tinta, #111); }
.t-chat-noti-tx span { font-size: 14px; color: var(--t-tinta-2, #444); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-chat-noti-x { flex: none; width: 44px; border: 0; background: none; font-size: 16px; color: var(--t-tinta-2, #444); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .t-chat-globo.nuevo, .t-chat-noti { animation: none; } }

/* §C-1507 · LA CAMPANITA Y EL SOBRE EN UN GLOBO que cuelga de la barra de arriba (no un apartado). */
.t-pop-bd { position: fixed; inset: 0; z-index: 43; background: rgba(10, 10, 10, .18); }
.t-pop-bd[hidden], .t-pop[hidden] { display: none; }
.t-pop {
  position: fixed; z-index: 44; right: 10px; top: calc(var(--t-top-h, 64px) + 10px);
  width: min(380px, calc(100vw - 20px)); max-height: min(70vh, calc(100dvh - var(--t-top-h, 64px) - 30px));
  display: flex; flex-direction: column; background: #fff; border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28); animation: t-noti-baja .18s ease-out;
}
.t-pop-flecha { position: absolute; top: -8px; right: var(--t-pop-flecha, 24px); width: 16px; height: 16px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.t-pop-lista { position: relative; overflow-y: auto; padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.t-pop-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 0 6px; background: #fff; }
.t-pop-h b { font-size: 17px; color: var(--t-tinta); }
.t-pop-x { width: 40px; height: 40px; border: 0; background: none; font-size: 16px; color: var(--t-tinta-2); cursor: pointer; }
.t-pop-vacio { margin: 8px 0 12px; }
.t-pop-pie { border-top: 1px solid #eee; padding: 6px 12px 10px; display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .t-pop { animation: none; } }

/* §C-1507 · MIS PEDIDOS: cada pedido con su estado, el seguimiento y "Pedí de nuevo". */
.t-ped { display: flex; flex-direction: column; gap: 4px; padding: 14px; margin-bottom: 10px; border-radius: 14px; background: #fff; border: 1px solid #ececec; }
.t-ped > span { font-size: 14px; color: var(--t-tinta-2); }
.t-ped-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t-ped-h b { font-size: 16px; color: var(--t-tinta); }
.t-ped-est { flex: none; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #eef4ff; color: #1d4ed8; }
.t-ped-est.on { background: #e8f7ee; color: #157a3c; }
.t-ped-est.off { background: #f3f3f3; color: #777; }
.t-rep-no { opacity: .55; }

/* §C-1507 · EL CARTEL QUE PIDE EL PERMISO DE NOTIFICACIONES (abajo, arriba de la barra del pedido). */
.t-pedir-avisos {
  position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45;
  max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center;
  padding: 14px; border-radius: 16px; background: #fff; border-top: 4px solid var(--t-rojo);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28); animation: t-noti-baja .25s ease-out;
}
body.t-con-barra .t-pedir-avisos { bottom: calc(92px + env(safe-area-inset-bottom)); }
.t-pedir-avisos-ic { font-size: 30px; }
.t-pedir-avisos-tx { display: flex; flex-direction: column; gap: 3px; }
.t-pedir-avisos-tx b { font-size: 16px; color: var(--t-tinta); }
.t-pedir-avisos-tx span { font-size: 14px; color: var(--t-tinta-2); }
.t-pedir-avisos-acc { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.t-pedir-avisos-acc .t-btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .t-pedir-avisos { animation: none; } }

/* §C-1507 · "Cerrar sesión" del menú: lo único que queda abajo, más chico y gris (pedido del dueño). */
.t-menu-chico.t-menu-salir { font-size: 12px; color: #8a8f98; }

/* §C-1512 · LA BURBUJA DE REPORTES (sólo cuentas de prueba). Oscura y chica a propósito: es una
   herramienta de prueba, no le puede robar la vista al catálogo.
   §C-1513 · ⚠️ VA EN TODAS LAS PANTALLAS (reporte #80 de Erik: "solo aparece en el catálogo. Debe
   aparecer siempre, en absolutamente todas las pantallas"). Antes se escondía con la hoja y el menú
   abiertos, o sea justo en el carrito, la cuenta, el Plan y el chat: lo que más hay que probar.
   Por eso va pegada al borde IZQUIERDO a media altura, y no abajo: abajo están el pie de la hoja
   (Continuar / Enviar), "Armá el tuyo" y la barra del pedido, y arriba la barra con la campanita.
   Y por encima de todo (el armador es z 90): si no, en esas pantallas queda tapada.
   Es una PESTAÑA de 30 px pegada al borde y no un círculo de 44: medido en el navegador, el círculo
   se comía el comienzo de las filas del menú ("Mis mensajes") y de los links del Plan. El área de
   toque sigue siendo de 44 de alto. */
.t-bug-burbuja {
  position: fixed; left: 0; top: 58%; top: 58dvh; z-index: 95;
  width: 30px; height: 44px; border-radius: 0 22px 22px 0; border: 2px solid #fbbf24; border-left: 0; padding: 0 2px 0 0;
  background: #1f2937; font-size: 16px; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  display: grid; place-items: center; cursor: pointer; opacity: .92;
}
.t-bug-burbuja[hidden] { display: none; }
body.t-bug-on .t-bug-burbuja { display: none; }
body.t-bug-on { overflow: hidden; }
.t-bug { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.t-bug[hidden] { display: none; }
.t-bug-bd { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(10, 10, 10, .5); cursor: default; }
.t-bug-caja {
  position: relative; width: 100%; max-width: 520px; max-height: 92dvh; overflow: auto;
  background: #fff; border-radius: 18px 18px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
}
@media (min-width: 560px) { .t-bug { align-items: center; } .t-bug-caja { border-radius: 18px; } }
.t-bug-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t-bug-cab b { font-size: 18px; }
.t-bug-x { width: 44px; height: 44px; border: 0; background: none; font-size: 18px; color: var(--t-tinta-2, #444); cursor: pointer; }
.t-bug-ayuda { margin: 0; font-size: 14px; color: var(--t-tinta-2, #444); }
.t-bug-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.t-bug-cat { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid #e5e7eb; background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.t-bug-cat.on { border-color: var(--t-rojo); background: #fff1f2; color: var(--t-rojo); }
.t-bug-msg { width: 100%; box-sizing: border-box; min-height: 110px; padding: 10px 12px; border: 2px solid #e5e7eb; border-radius: 12px; font: inherit; font-size: 16px; resize: vertical; }
.t-bug-msg:focus { outline: none; border-color: var(--t-rojo); }
.t-bug-foto { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: #f6f6f6; min-height: 44px; }
.t-bug-foto img { width: 64px; height: 96px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid #ddd; flex: none; }
.t-bug-foto span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; }
.t-bug-err { padding: 10px 12px; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 14px; }
.t-bug-err[hidden] { display: none; }
/* §C-1512b · "Estás en…": lo que la burbuja leyó de la pantalla, para que Erik vea que es lo que estaba mirando. */
.t-bug-donde { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; }
.t-bug-donde > span:first-child { font-size: 20px; flex: none; }
.t-bug-donde > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.t-bug-donde small { font-size: 12px; color: #92400e; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.t-bug-donde b { font-size: 15px; color: var(--t-tinta, #111); overflow-wrap: anywhere; }

/* §C-1516 · "Ahorraste con el Plan" (reportes #81/#82 de Erik): el número grande, de dónde sale abajo. */
.t-ahorro { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1.5px solid #6ee7b7; }
.t-ahorro .t-ahorro-ico { font-size: 34px; flex: none; }   /* ⚠️ con la clase del padre: `.t-ahorro span` le ganaba y salía en 14px */
.t-ahorro > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-ahorro small { font-size: 13px; font-weight: 800; color: #047857; text-transform: uppercase; letter-spacing: .04em; }
.t-ahorro b { font-size: 30px; line-height: 1.1; color: #065f46; font-variant-numeric: tabular-nums; }
.t-ahorro > div > span { font-size: 14px; color: #065f46; }
.t-ahorro .t-ahorro-12 { color: #047857; opacity: .85; }
.t-ahorro-cero, .t-ahorro-cargando { background: #f6f6f6; border-color: #e5e7eb; }
.t-ahorro-cero b, .t-ahorro-cargando b { font-size: 22px; color: var(--t-tinta, #111); }
.t-ahorro-cero small, .t-ahorro-cero > div > span, .t-ahorro-cargando small, .t-ahorro-cargando > div > span { color: var(--t-tinta-2, #444); }

/* §C-1516 · buscar en Mis compras (reporte #84 de Erik): un casillero de producto y dos fechas. */
.t-bc { display: grid; gap: 8px; margin: 0 0 14px; }
.t-bc-q { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 14px; border: 2px solid var(--t-linea, #e5e7eb);
  border-radius: 12px; font: inherit; font-size: 16px; background: var(--t-card, #fff); }
.t-bc-q:focus, .t-bc-fechas input:focus { outline: none; border-color: var(--t-rojo); }
.t-bc-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.t-bc-fechas label { display: grid; gap: 2px; font-size: 13px; font-weight: 700; color: var(--t-tinta-2, #444); }
.t-bc-fechas input { min-height: 44px; min-width: 0; padding: 6px 10px; border: 2px solid var(--t-linea, #e5e7eb); border-radius: 10px;
  font: inherit; font-size: 16px; background: var(--t-card, #fff); }
.t-bc-limpiar { justify-self: start; }
.t-bc-n { margin: 0 0 8px; }
.t-compra-prods { margin: 0; font-size: 14px; color: var(--t-tinta-2, #444); overflow-wrap: anywhere; }
.t-compra-prods mark { background: #fef08a; color: inherit; border-radius: 3px; padding: 0 2px; }
.t-compra-prods span { opacity: .75; }

/* §C-1516 · Ajustes (reporte #87 de Erik): secciones, el aviso que no se apaga, probar y la cuenta. */
.t-ajustes + .t-ajustes { margin-top: 26px; }
.t-ajustes .t-aj-intro { margin: 0 0 4px; }
.t-sw-fijo { cursor: default; }
.t-sw-siempre { flex: none; font-size: 13px; font-weight: 800; color: #047857; background: #d1fae5; padding: 5px 10px; border-radius: 999px; }
.t-ajustes .t-aj-probar { display: block; margin-top: 10px; }
.t-aj-chk { flex: none; width: 26px; height: 26px; accent-color: var(--t-rojo); }
.t-aj-link {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 4px;
  border: 0; border-bottom: 1px solid var(--t-linea); background: transparent; color: inherit; font: inherit; font-size: 16px;
  text-align: left; text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.t-aj-link i { font-style: normal; font-size: 22px; color: var(--t-tinta-2, #444); }
.t-aj-peligro { color: #b91c1c; }

/* §C-1516 · CONTACTO = hablar (reporte #83 de Erik). Filas compactas con quien atiende, sin fotos ni mapa.
   ⚠️ El modificador es `.t-cont-atiende` y NO `.t-cont-on`: ése ya existe (verde y negrita, "los avisos
   llegan a este celular") y le pintaba la tarjeta entera. */
.t-cont-intro { display: grid; gap: 6px; margin: 0 0 14px; padding: 14px; border-radius: 14px; background: #fff7ed; border: 1px solid #fed7aa; font-size: 14px; }
.t-cont-intro > b { font-size: 17px; }
.t-cont {
  display: grid; grid-template-columns: 52px 1fr; gap: 6px 12px; align-items: center; margin: 0 0 12px; padding: 14px;
  border: 1px solid var(--t-linea); border-radius: 16px; background: var(--t-card);
}
.t-cont-av {
  position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #f3f4f6; font-size: 22px; font-weight: 800; color: var(--t-tinta-2, #444);
}
.t-cont-atiende .t-cont-av { background: var(--t-rojo); color: #fff; }
.t-cont-av i { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.t-cont-tx { display: grid; gap: 2px; min-width: 0; }
.t-cont-tx > b { font-size: 17px; }
.t-cont-tx > span { font-size: 14px; color: var(--t-tinta, #111); }
.t-cont-tx > small { font-size: 13px; color: var(--t-tinta-2, #444); }
.t-cont-acc { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.t-cont-acc .t-btn { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
.t-suc-intro { margin: 0 0 12px; }
.t-suc .t-suc-chat { justify-self: start; font-size: 15px; }

/* ════════════════════════════════════════════════════════════════════════════
   §C-1551 · LA SUCURSAL FAVORITA Y LO QUE SALE DEL PERFIL EN EL CARRITO (2026-11-05).
   "Debe decir subrayado en color azul «Cambiar sucursal»" (y «Seleccionar sucursal»).
   ════════════════════════════════════════════════════════════════════════════ */
:root { --t-azul: #1a5fd0; }
.t-link-azul {
  border: 0; background: none; padding: 10px 2px; min-height: 44px; cursor: pointer;
  color: var(--t-azul); font-weight: 700; font-size: 16px; text-decoration: underline; text-underline-offset: 3px;
}
.t-local-sel {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 6px;
  border: 2px solid var(--t-ok); border-radius: 14px; background: var(--t-card);
}
.t-local-sel b { font-size: 17px; }
.t-local-sel span { display: block; color: var(--t-tinta-2); font-size: 14px; }
.t-local-sel em { display: block; font-style: normal; color: var(--t-ambar-tx); font-size: 13px; }
.t-fav-chip { font-size: 13px; color: var(--t-ok); font-weight: 700; }
.t-perfil-pedido { padding: 10px 0 4px; font-size: 16px; }
.t-plan-ok { padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--t-fondo); color: var(--t-ok); font-size: 15px; }
.t-fav-top { padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--t-card); box-shadow: var(--t-sombra); font-size: 16px; }
.t-fav-top.t-fav-no { color: var(--t-tinta-2); font-size: 15px; }
.t-fav {
  border: 1px solid var(--t-linea); background: var(--t-card); color: var(--t-tinta-2);
  border-radius: 999px; padding: 6px 12px; min-height: 36px; font-size: 14px; font-weight: 700; cursor: pointer; margin: 6px 0;
}
.t-fav.on { border-color: var(--t-ok); color: var(--t-ok); }