/* ═══════════════════════════════════════════════════════════
   Demo 04 · En la tienda — Megatienda La Escuadra
   Plano cenital + app «Modo tienda» + panel del gerente.
   Todo con alcance #demo-tienda; prefijo td- (keyframes td-*).
   Estados por escena en .demo-viewport: tdm-sin, tdm-ia, tdm-zoom,
   tdm-mgr; en diseño estrecho tdf-app pone el celular al frente.
   Diseños (container «demo»):
     ≥ 760 px  plano + celular lado a lado (< 980: HUD en dos filas)
     600–759   un panel a la vez; anotaciones a los lados del celular
     < 600     un panel a la vez; plano recortado y girado en vertical
               (leyenda aparte), burbujas bajo el plano, anotaciones bajo el celular
   ═══════════════════════════════════════════════════════════ */

#demo-tienda .td {
    --phw: 298px;                 /* ancho del celular (zoom = phw / 414) */
    --phh: calc(var(--phw) * 868 / 414);
    --side: 330px;
    --gap: 2rem;
    --ann-gap: 3.25rem;
    --td-focus: 0;                /* lo lee el JS: 1 = un panel a la vez */
    --td-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --td-lime: #D4F25A;
    --td-coral: #FF8A7A;
    --td-heat: #F2994A;
    --td-floor: #04170F;
    --td-muted: #A3B8AC;
    position: relative;
    font-family: var(--font-sans);
    color: var(--on-dark);
}
#demo-tienda .td-noanim,
#demo-tienda .td-noanim * { transition: none !important; }

/* ── Escenario ───────────────────────────────────────────── */
#demo-tienda .td-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side);
    column-gap: var(--gap);
    align-items: center;
    min-height: var(--phh);
}
#demo-tienda .td-mapcol {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    transition: opacity 0.6s var(--td-ease), transform 0.8s var(--td-ease), visibility 0s linear 0s;
}
#demo-tienda .td-side {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    display: grid;
    justify-items: center;
    min-height: var(--phh);
    transition: transform 1s var(--td-ease), opacity 0.6s var(--td-ease), visibility 0s linear 0s;
}
#demo-tienda .td-phone,
#demo-tienda .td-mgrp { grid-area: 1 / 1; }
#demo-tienda .td-phone {
    width: var(--phw);
    transition: opacity 0.6s var(--td-ease), transform 0.8s var(--td-ease);
}
/* Escenas «en el pasillo» y «voz»: el celular pasa al centro, el plano se apaga */
#demo-tienda .tdm-zoom .td-side { transform: translateX(calc(var(--side) / 2 - 50cqw)); }
#demo-tienda .tdm-mgr .td-phone { opacity: 0; transform: translateX(48px) scale(0.97); }

/* ── Tarjeta del plano ───────────────────────────────────── */
#demo-tienda .td-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-3xl, 1.65rem);
    border: 1px solid rgb(255 255 255 / 0.1);
    background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.025));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 40px 90px -40px rgb(2 14 10 / 0.9);
    transition: opacity 0.7s var(--td-ease), filter 0.7s var(--td-ease), transform 0.9s var(--td-ease);
}
#demo-tienda .tdm-zoom .td-card { opacity: 0.1; filter: blur(6px) saturate(0.5); transform: scale(0.97); }

/* HUD: modo + contadores */
#demo-tienda .td-hud {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 0 1.35rem;
    min-height: 5.4rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
#demo-tienda .td-hud::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--td-accent, transparent);
    transition: background 0.6s;
}
#demo-tienda .tdm-sin .td-hud { --td-accent: linear-gradient(90deg, var(--td-coral), transparent 70%); }
#demo-tienda .tdm-ia .td-hud { --td-accent: linear-gradient(90deg, var(--td-lime), transparent 70%); }
#demo-tienda .tdm-mgr .td-hud { --td-accent: linear-gradient(90deg, var(--emerald), transparent 70%); }

#demo-tienda .td-mode { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-width: 0; padding: 0.9rem 0; }
#demo-tienda .td-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.8rem 0.42rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--on-dark);
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.14);
    transition: color 0.4s, background-color 0.4s, border-color 0.4s;
}
#demo-tienda .td-badge b { font-weight: 600; }
#demo-tienda .td-badge i { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: currentColor; box-shadow: 0 0 10px currentColor; }
#demo-tienda .td-badge[data-mode="sin"] { color: #FFC2B8; background: rgb(255 138 122 / 0.12); border-color: rgb(255 138 122 / 0.45); }
#demo-tienda .td-badge[data-mode="ia"] { color: var(--td-lime); background: rgb(212 242 90 / 0.1); border-color: rgb(212 242 90 / 0.42); }
#demo-tienda .td-badge[data-mode="mgr"] { color: #7DE3BD; background: rgb(16 185 129 / 0.12); border-color: rgb(16 185 129 / 0.45); }
#demo-tienda .td-modesub { font-size: 0.88rem; line-height: 1.3; color: var(--td-muted); }

#demo-tienda .td-tiles { display: flex; align-self: stretch; }
#demo-tienda .td-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    width: 9.6rem;
    padding: 0.75rem 1rem 0.75rem 1.15rem;
    border-left: 1px solid rgb(255 255 255 / 0.08);
    transition: background-color 0.5s;
}
#demo-tienda .td-tl {
    font-size: 0.66rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--td-muted);
}
#demo-tienda .td-tvrow { display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
#demo-tienda .td-tv {
    display: inline-block;
    transform-origin: left 70%;
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--paper);
    transition: color 0.4s;
}
#demo-tienda .td-tv small { margin-left: 0.15rem; font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--td-muted); }
#demo-tienda .td-was {
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--td-coral);
    opacity: 0;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    transition: opacity 0.5s;
}
#demo-tienda .td-was.td-on { opacity: 0.95; }
#demo-tienda .td-plus {
    align-self: center;
    padding: 0.2rem 0.45rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 700;
    color: var(--forest-950);
    background: var(--emerald);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.4s, transform 0.5s var(--td-ease);
}
#demo-tienda .td-plus.td-on { opacity: 1; transform: none; }
#demo-tienda .td-tiles .td-tile > * { transition: opacity 0.35s, transform 0.45s var(--td-ease); }
#demo-tienda .td-tiles.td-fade .td-tile > * { opacity: 0; transform: translateY(8px); }
#demo-tienda .tdm-sin .td-tile { background: linear-gradient(180deg, rgb(255 138 122 / 0.08), transparent); }
#demo-tienda .tdm-sin .td-tile .td-tv { color: #FFD3CC; }
#demo-tienda .tdm-ia .td-tile { background: linear-gradient(180deg, rgb(212 242 90 / 0.07), transparent); }
#demo-tienda .tdm-ia .td-tile .td-tv { color: #F3FBD2; }
#demo-tienda .tdm-mgr .td-tile { background: linear-gradient(180deg, rgb(16 185 129 / 0.09), transparent); }
#demo-tienda .td-tile.td-bump .td-tv { animation: td-bump 0.5s var(--td-ease); }
@keyframes td-bump { 0% { transform: none; } 35% { transform: scale(1.12); } 100% { transform: none; } }

/* Leyenda de departamentos (solo en el diseño más estrecho) */
#demo-tienda .td-legend { display: none; list-style: none; }

/* ── Plano SVG ───────────────────────────────────────────── */
#demo-tienda .td-mapwrap { position: relative; padding: 0.5rem; }
#demo-tienda .td-mapin { position: relative; }
#demo-tienda .td-map { display: block; width: 100%; height: auto; overflow: visible; }
#demo-tienda .td-map text { font-family: var(--font-sans); }
#demo-tienda .td-wall { fill: none; stroke: rgb(246 244 238 / 0.26); stroke-width: 5; stroke-linecap: round; }

#demo-tienda .td-zone {
    opacity: 0;
    transform: scale(0.97);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.7s var(--td-ease), transform 0.8s var(--td-ease);
}
#demo-tienda .td-zone.td-on { opacity: 1; transform: none; }
#demo-tienda .td-zbg { fill: color-mix(in oklab, var(--c) 8%, transparent); stroke: color-mix(in oklab, var(--c) 34%, transparent); stroke-width: 1.5; }
#demo-tienda .td-gon { fill: color-mix(in oklab, var(--c) 46%, #04170F); stroke: color-mix(in oklab, var(--c) 80%, white); stroke-opacity: 0.3; stroke-width: 1; }
#demo-tienda .td-gline { stroke: rgb(2 12 8 / 0.5); stroke-width: 1.2; }
#demo-tienda .td-plank { fill: color-mix(in oklab, var(--c) 52%, #04170F); }
#demo-tienda .td-plant { fill: color-mix(in oklab, var(--c) 50%, #04170F); stroke: color-mix(in oklab, var(--c) 80%, white); stroke-opacity: 0.3; }
#demo-tienda .td-desk { fill: #8EA197; }
#demo-tienda .td-qdot { fill: #66786F; stroke: #04170F; stroke-width: 2; }

#demo-tienda .td-zlab { opacity: 0; transition: opacity 0.6s var(--td-ease); }
#demo-tienda .td-zlab.td-on { opacity: 1; }
#demo-tienda .td-dlabel {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    paint-order: stroke;
    stroke: #04170F;
    stroke-width: 5px;
    stroke-linejoin: round;
}
#demo-tienda .td-slabel { font-size: 20px; font-weight: 700; letter-spacing: 0.08em; fill: #D5DED9; paint-order: stroke; stroke: #04170F; stroke-width: 5px; }
#demo-tienda .td-slabel.sm { font-size: 19px; font-weight: 500; letter-spacing: 0.01em; fill: var(--td-muted); }
#demo-tienda .td-dl-short { display: none; }
#demo-tienda .td-sign rect { fill: #072A1F; stroke-width: 1.6; }
#demo-tienda .td-sign text { font-size: 20px; font-weight: 600; fill: var(--paper); font-variant-numeric: tabular-nums; }

/* Rutas */
#demo-tienda .td-seg { opacity: 0; transition: opacity 0.5s; }
#demo-tienda .td-seg.td-on { opacity: 1; }
#demo-tienda .td-sin-dots { fill: none; stroke: var(--td-coral); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 12.5; }
#demo-tienda .td-sin-halo { fill: none; stroke: rgb(255 138 122 / 0.16); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
#demo-tienda .td-ia-halo { fill: none; stroke: rgb(212 242 90 / 0.22); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
#demo-tienda .td-ia-line { fill: none; stroke: var(--td-lime); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
#demo-tienda .td-ia-core { fill: none; stroke: #FBFFE8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#demo-tienda .td-l-sin,
#demo-tienda .td-l-ia,
#demo-tienda .td-l-pins,
#demo-tienda .td-l-walk { transition: opacity 0.7s; }
#demo-tienda .tdm-ia .td-l-sin { opacity: 0.12; }
#demo-tienda .tdm-mgr .td-l-sin,
#demo-tienda .tdm-mgr .td-l-ia,
#demo-tienda .tdm-mgr .td-l-pins,
#demo-tienda .tdm-mgr .td-l-walk { opacity: 0; }
#demo-tienda .td-l-zones { transition: opacity 0.8s; }
#demo-tienda .tdm-mgr .td-l-zones { opacity: 0.6; }

/* Pines numerados */
#demo-tienda .td-pin-in { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform 0.55s var(--td-ease); }
#demo-tienda .td-pin.td-on .td-pin-in { transform: scale(var(--pin-s, 1)); }
#demo-tienda .td-pin-c { fill: var(--td-lime); stroke: #04170F; stroke-width: 3; }
#demo-tienda .td-pin-n { font-size: 20px; font-weight: 700; fill: #06231A; }
#demo-tienda .td-pin-ck { fill: none; stroke: #04281C; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
#demo-tienda .td-pin.td-done .td-pin-c { fill: var(--emerald); }
#demo-tienda .td-pin.td-done .td-pin-n { opacity: 0; }
#demo-tienda .td-pin.td-done .td-pin-ck { opacity: 1; }
#demo-tienda .td-pin-plus .td-pin-c { fill: #06231A; stroke: var(--td-lime); stroke-width: 2.5; stroke-dasharray: 4 3; }
#demo-tienda .td-pin-plus .td-pin-n { fill: var(--td-lime); font-size: 22px; }
#demo-tienda .td-pin-plus.td-done .td-pin-c { stroke: var(--emerald); stroke-dasharray: none; fill: #06231A; }
#demo-tienda .td-pin-plus.td-done .td-pin-ck { stroke: var(--emerald); }

/* Caminante */
#demo-tienda .td-walker { opacity: 0; transition: opacity 0.4s; }
#demo-tienda .td-walker.td-on { opacity: 1; }
#demo-tienda .td-walker-s { transform: scale(var(--walk-s, 1)); }
#demo-tienda .td-walker .c { stroke-width: 4; fill: var(--paper); }
#demo-tienda .td-walker .h { opacity: 0.5; transform-box: fill-box; transform-origin: center; animation: td-halo 1.8s var(--td-ease) infinite; }
#demo-tienda .td-walker.sin .c { stroke: #E2574A; }
#demo-tienda .td-walker.sin .h { fill: var(--td-coral); }
#demo-tienda .td-walker.ia .c { stroke: #9DBF1F; }
#demo-tienda .td-walker.ia .h { fill: var(--td-lime); }
@keyframes td-halo { 0% { transform: scale(0.55); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }

/* Salida rápida */
#demo-tienda .td-gate rect { fill: #4F6359; transition: fill 0.5s; }
#demo-tienda .td-gate path { fill: none; stroke: #4F6359; stroke-width: 3; stroke-dasharray: 5 5; transition: stroke 0.5s; }
#demo-tienda .td-gate.td-on rect { fill: var(--td-lime); }
#demo-tienda .td-gate.td-on path { stroke: var(--td-lime); }

/* Mapa de calor */
#demo-tienda .td-l-heat { mix-blend-mode: screen; }
#demo-tienda .td-heat {
    opacity: 0;
    transform: scale(0.4);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 1s var(--td-ease), transform 1.2s var(--td-ease);
}
#demo-tienda .td-heat.td-on { opacity: var(--k, 0.9); transform: none; }

/* ── Capa HTML sobre el plano (burbujas, rótulos) ────────── */
#demo-tienda .td-ov { position: absolute; inset: 0; pointer-events: none; }
#demo-tienda .td-ask { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
#demo-tienda .td-askb {
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: max-content;
    max-width: 17rem;
    opacity: 0;
    transform: translateX(-50%) scale(0.88);
    transition: opacity 0.35s var(--td-ease), transform 0.45s var(--td-ease);
}
#demo-tienda .td-ask.up .td-askb { bottom: 1.05rem; transform-origin: 50% 100%; }
#demo-tienda .td-ask.down .td-askb { top: 1.05rem; transform-origin: 50% 0; }
#demo-tienda .td-ask.td-on .td-askb { opacity: 1; transform: translateX(-50%); }
#demo-tienda .td-ask.td-col .td-askb { opacity: 0; transform: translateX(-50%) scale(0.7); }
#demo-tienda .td-aq,
#demo-tienda .td-ar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem 0.45rem 0.45rem;
    border-radius: 0.95rem;
    box-shadow: 0 16px 34px -16px rgb(2 14 10 / 0.9);
}
#demo-tienda .td-aq { align-self: flex-start; background: var(--paper); color: var(--ink); font-size: 0.9rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; min-height: 2.3rem; }
#demo-tienda .td-ar {
    align-self: flex-end;
    background: var(--esc-tint, #FDF0E6);
    color: var(--esc-700, #9A4A0B);
    font-size: 0.84rem;
    line-height: 1.2;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s, transform 0.45s var(--td-ease);
}
#demo-tienda .td-ask.td-r .td-ar { opacity: 1; transform: none; }
#demo-tienda .td-aq .ic,
#demo-tienda .td-ar .ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 700;
}
#demo-tienda .td-aq .ic { background: var(--bad-500, #C8372D); color: #fff; }
#demo-tienda .td-ar .ic { background: var(--esc-500, #F2994A); }
#demo-tienda .td-ar .ic svg { width: 0.85rem; height: 0.85rem; fill: var(--ink); }
#demo-tienda .td-askm {
    position: absolute;
    left: -0.8rem;
    top: -0.8rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: #C23B2F;
    border: 2px solid var(--td-floor);
    box-shadow: 0 0 0 3px rgb(255 138 122 / 0.3);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.35s, transform 0.5s var(--td-ease);
}
#demo-tienda .td-ask.td-col .td-askm { opacity: 1; transform: none; }
/* Con IA y en el panel del gerente desaparecen las preguntas de «Sin guía» */
#demo-tienda .tdm-ia .td-ask,
#demo-tienda .tdm-mgr .td-ask { opacity: 0; transition: opacity 0.6s; }

#demo-tienda .td-chip {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    padding: 0.4rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(8px);
    transition: opacity 0.4s, transform 0.5s var(--td-ease);
    box-shadow: 0 14px 30px -14px rgb(2 14 10 / 0.9);
}
#demo-tienda .td-chip.td-on { opacity: 1; transform: translate(-50%, -100%); }
#demo-tienda .td-chip.c-bad { background: #3A1612; color: #FFD3CC; border: 1px solid rgb(255 138 122 / 0.7); }
#demo-tienda .td-chip.c-ai { background: #12301F; color: var(--td-lime); border: 1px solid rgb(212 242 90 / 0.7); }
#demo-tienda .td-chip.c-hot { background: rgb(4 23 15 / 0.9); color: #FFE2C7; border: 1px solid rgb(242 153 74 / 0.75); }
#demo-tienda .td-chip .d { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: currentColor; }
#demo-tienda .tdm-mgr .td-chip.c-ai,
#demo-tienda .tdm-mgr .td-chip.c-bad { opacity: 0; }

/* Resultado de «Sin guía» */
#demo-tienda .td-end {
    position: absolute;
    left: 48.6%;
    top: 56%;
    width: 48.6%;
    padding: 1rem 1.15rem 1.05rem;
    border-radius: var(--radius-2xl, 1.35rem);
    background: linear-gradient(180deg, rgb(60 20 16 / 0.92), rgb(36 14 12 / 0.92));
    border: 1px solid rgb(255 138 122 / 0.55);
    box-shadow: 0 30px 70px -24px rgb(2 14 10 / 0.95), 0 0 50px -24px rgb(255 138 122 / 0.6);
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.5s var(--td-ease), transform 0.7s var(--td-ease);
}
#demo-tienda .td-end.td-on { opacity: 1; transform: none; }
#demo-tienda .td-end .k { font-size: 0.68rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--td-coral); }
#demo-tienda .td-end .h { margin-top: 0.55rem; font-size: 1.3rem; line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; color: var(--paper); text-wrap: balance; }
#demo-tienda .td-end .b { margin-top: 0.45rem; font-size: 0.86rem; line-height: 1.4; color: #F3CFC9; }
#demo-tienda .td-end .b b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
#demo-tienda .tdm-ia .td-end,
#demo-tienda .tdm-mgr .td-end { opacity: 0; transform: translateY(14px) scale(0.98); }

/* Leyenda del mapa de calor */
#demo-tienda .td-hleg {
    position: absolute;
    left: 77.2%;
    bottom: 3.8%;
    width: 20.4%;
    padding: 0.7rem 0.8rem 0.65rem;
    border-radius: 1.05rem;
    background: rgb(4 23 15 / 0.9);
    border: 1px solid rgb(242 153 74 / 0.5);
    box-shadow: 0 16px 34px -14px rgb(2 14 10 / 0.9);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--td-ease), transform 0.6s var(--td-ease);
}
#demo-tienda .td-hleg.td-on { opacity: 1; transform: none; }
#demo-tienda .td-hleg b { display: block; font-size: 0.82rem; line-height: 1.15; font-weight: 600; color: #FFE2C7; }
#demo-tienda .td-hleg > span { display: block; margin-top: 0.25rem; font-size: 0.72rem; line-height: 1.3; color: var(--td-muted); }
#demo-tienda .td-hleg i { display: block; margin-top: 0.5rem; height: 0.4rem; border-radius: 9999px; background: linear-gradient(90deg, rgb(246 213 122 / 0.3), #F6D57A 30%, #F2994A 62%, #FF4D3D); }
#demo-tienda .td-hleg em { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--td-muted); }

/* ═══ Celular: app La Escuadra (diseño a 390 × 844, lo escala el motor) ═══ */
#demo-tienda .dv-phone { margin: 0 auto; }
#demo-tienda .td-screen { background: var(--ui-bg-2, #F5F4EF); color: var(--ui-ink, #0E1A14); }
#demo-tienda .dv-status { color: var(--ui-ink, #0E1A14); }
#demo-tienda .dv-status-icons svg.td-batt { width: 25px; }

#demo-tienda .td-scr {
    position: absolute;
    inset: 0;
    padding-top: 54px;
    opacity: 0;
    transform: translateX(44px);
    transition: opacity 0.45s var(--td-ease), transform 0.6s var(--td-ease);
}
#demo-tienda .td-scr.td-past { transform: translateX(-44px); }
#demo-tienda .td-scr.td-cur { opacity: 1; transform: none; }

/* Barra de la app */
#demo-tienda .td-appbar { display: flex; align-items: center; gap: 11px; height: 58px; padding: 0 20px; }
#demo-tienda .td-appbar .esc-logo { gap: 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.03em; }
#demo-tienda .td-appbar .esc-logo-mark { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 6px 14px -6px rgb(224 123 46 / 0.8); }
#demo-tienda .td-appbar .esc-logo-mark svg { width: 21px; height: 21px; }
#demo-tienda .td-store { margin-left: auto; padding: 7px 12px; border-radius: 9999px; font-size: 14px; font-weight: 500; background: var(--paper-3, #E8E4D9); color: #45554C; }

/* Tarjeta de contexto (normal / Modo tienda) */
#demo-tienda .td-ctx { position: relative; height: 110px; margin: 8px 16px 0; }
#demo-tienda .td-ctx-plain,
#demo-tienda .td-ctx-store {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    transition: opacity 0.5s var(--td-ease), transform 0.6s var(--td-ease);
}
#demo-tienda .td-ctx-plain { display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-ctx-plain .ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--esc-tint, #FDF0E6); }
#demo-tienda .td-ctx-plain .ic svg { width: 26px; height: 26px; fill: none; stroke: var(--esc-600, #E07B2E); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#demo-tienda .td-ctx-plain .t1 { font-size: 18px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
#demo-tienda .td-ctx-plain .t2 { margin-top: 3px; font-size: 15px; line-height: 1.25; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-ctx-store {
    overflow: hidden;
    padding: 15px 18px;
    color: var(--paper);
    opacity: 0;
    transform: scale(0.96);
    background: radial-gradient(120% 140% at 100% 0%, rgb(212 242 90 / 0.32) 0%, transparent 55%), linear-gradient(135deg, #0E4A38, #06231A 75%);
    box-shadow: 0 14px 30px -14px rgb(6 35 26 / 0.8);
}
#demo-tienda .td-store-on .td-ctx-plain { opacity: 0; transform: scale(0.96); }
#demo-tienda .td-store-on .td-ctx-store { opacity: 1; transform: none; }
#demo-tienda .td-ctx-store .k { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--td-lime); }
#demo-tienda .td-ctx-store .k i { width: 8px; height: 8px; border-radius: 9999px; background: var(--td-lime); box-shadow: 0 0 10px var(--td-lime); }
#demo-tienda .td-ctx-store .t { margin-top: 10px; font-size: 23px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
#demo-tienda .td-ctx-store .s { margin-top: 6px; font-size: 15px; line-height: 1.2; color: #CFE0D6; font-variant-numeric: tabular-nums; }
#demo-tienda .td-ctx-store .t,
#demo-tienda .td-ctx-store .s { transition: opacity 0.4s; }
#demo-tienda .td-calc { position: absolute; left: 18px; right: 18px; top: 44px; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; opacity: 0; transition: opacity 0.3s; }
#demo-tienda .td-calc .dm-typing { color: var(--td-lime); }
#demo-tienda .td-ctx-store.td-busy .td-calc { opacity: 1; }
#demo-tienda .td-ctx-store.td-busy .t,
#demo-tienda .td-ctx-store.td-busy .s { opacity: 0; }

/* Lista */
#demo-tienda .td-lh { display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px 10px; }
#demo-tienda .td-lht { font-size: 23px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
#demo-tienda .td-lhr { display: grid; justify-items: end; }
#demo-tienda .td-lhc,
#demo-tienda .td-lhr .ord { grid-area: 1 / 1; white-space: nowrap; transition: opacity 0.4s, transform 0.5s var(--td-ease); }
#demo-tienda .td-lhc { font-size: 15px; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-lhr .ord {
    padding: 6px 10px;
    border-radius: 9999px;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ai-ink, #145A43);
    background: var(--ai-tint, #EEF9C8);
    border: 1px solid var(--ai-line, rgb(20 90 67 / 0.18));
    opacity: 0;
    transform: translateY(6px);
}
#demo-tienda .td-routed .td-lhc { opacity: 0; transform: translateY(-6px); }
#demo-tienda .td-routed .td-lhr .ord { opacity: 1; transform: none; }

#demo-tienda .td-items { position: relative; height: 448px; margin: 0 14px; list-style: none; }
#demo-tienda .td-it {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    height: 60px;
    padding: 0 14px 0 13px;
    border-radius: 16px;
    background: var(--ui-bg, #fff);
    box-shadow: 0 1px 0 var(--ui-line, #E7E4DC), 0 6px 16px -10px rgb(6 35 26 / 0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: top 0.8s var(--td-ease), opacity 0.45s var(--td-ease), transform 0.5s var(--td-ease), box-shadow 0.4s, background-color 0.4s;
}
#demo-tienda .td-it.td-on { opacity: 1; transform: none; }
#demo-tienda .td-it.td-hl { box-shadow: 0 0 0 2.5px var(--ai-ink, #145A43), 0 10px 24px -10px rgb(20 90 67 / 0.5); }
#demo-tienda .td-mk {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9999px;
    border: 2.5px solid #D6D2C6;
    transition: background-color 0.35s, border-color 0.35s;
}
#demo-tienda .td-mk .n { font-size: 15px; font-weight: 700; color: var(--td-lime); opacity: 0; transition: opacity 0.3s; }
#demo-tienda .td-mk svg { position: absolute; left: 50%; top: 50%; width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s; }
#demo-tienda .td-itx { flex: 1; min-width: 0; display: grid; }
#demo-tienda .td-itx b { overflow: hidden; font-size: 17px; line-height: 1.22; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; color: var(--ui-ink, #0E1A14); transition: color 0.3s; }
#demo-tienda .td-itx small { grid-area: 2 / 1; font-size: 15px; line-height: 1.3; white-space: nowrap; color: var(--ui-muted, #5B6B62); transition: opacity 0.35s; }
#demo-tienda .td-itx .l { font-weight: 600; color: var(--ai-ink, #145A43); opacity: 0; }
#demo-tienda .td-itx .m { font-weight: 600; color: #A42B22; opacity: 0; }
#demo-tienda .td-routed .td-mk { background: var(--ai-ink, #145A43); border-color: var(--ai-ink, #145A43); }
#demo-tienda .td-routed .td-mk .n { opacity: 1; }
#demo-tienda .td-routed .td-itx .q { opacity: 0; }
#demo-tienda .td-routed .td-itx .l { opacity: 1; }
#demo-tienda .td-it.td-found .td-mk,
#demo-tienda .td-it.td-done .td-mk { background: var(--ok-500, #10B981); border-color: var(--ok-500, #10B981); }
#demo-tienda .td-it.td-found .td-mk .ck,
#demo-tienda .td-it.td-done .td-mk .ck { opacity: 1; }
#demo-tienda .td-it.td-found .td-mk .n,
#demo-tienda .td-it.td-done .td-mk .n { opacity: 0; }
#demo-tienda .td-it.td-found b,
#demo-tienda .td-it.td-done b { color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-it.td-miss { background: var(--bad-tint, #FBEAE8); }
#demo-tienda .td-it.td-miss .td-mk { background: var(--bad-500, #C8372D); border-color: var(--bad-500, #C8372D); }
#demo-tienda .td-it.td-miss .td-mk .x { opacity: 1; }
#demo-tienda .td-it.td-miss .td-itx .q { opacity: 0; }
#demo-tienda .td-it.td-miss .td-itx .m { opacity: 1; }
#demo-tienda .td-it.is-extra .td-mk { background: var(--ui-bg, #fff); border: 2.5px dashed var(--ai-ink, #145A43); }
#demo-tienda .td-it.is-extra .td-mk .n { color: var(--ai-ink, #145A43); font-size: 19px; }
#demo-tienda .td-it.is-extra.td-done .td-mk { background: var(--ok-500, #10B981); border: 2.5px solid var(--ok-500, #10B981); }

/* Botón principal (marca La Escuadra) */
#demo-tienda .td-cta {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 30px;
    display: grid;
    place-items: center;
    height: 62px;
    overflow: hidden;
    border-radius: 18px;
    font-size: 19px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ui-ink, #0E1A14);
    background: var(--esc-500, #F2994A);
    box-shadow: 0 14px 28px -12px rgb(224 123 46 / 0.75);
    transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
#demo-tienda .td-cta > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; transition: opacity 0.35s, transform 0.45s var(--td-ease); }
#demo-tienda .td-cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
#demo-tienda .td-cta .b,
#demo-tienda .td-cta .c { opacity: 0; transform: translateY(16px); }
#demo-tienda .td-cta.td-go .a,
#demo-tienda .td-cta.td-pay .a,
#demo-tienda .td-cta.td-pay .b { opacity: 0; transform: translateY(-16px); }
#demo-tienda .td-cta.td-go .b,
#demo-tienda .td-cta.td-pay .c { opacity: 1; transform: none; }
#demo-tienda .td-cta.td-go { color: var(--paper); background: var(--forest-950); box-shadow: 0 14px 28px -12px rgb(6 35 26 / 0.6); }
#demo-tienda .td-cta.td-go .b { color: var(--td-lime); }
#demo-tienda .td-tapfx::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.6);
    opacity: 0;
    pointer-events: none;
}
#demo-tienda .td-tapfx.td-tap::after { animation: td-tap 0.7s var(--td-ease); }
@keyframes td-tap { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(8); opacity: 0; } }

/* Pantalla: siguiente parada */
#demo-tienda .td-nbar { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 20px; }
#demo-tienda .td-nk { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-ink, #145A43); }
#demo-tienda .td-nk i { width: 8px; height: 8px; border-radius: 9999px; background: var(--ai-ink, #145A43); box-shadow: 0 0 0 4px var(--ai-tint, #EEF9C8); }
#demo-tienda .td-np { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-ink, #0E1A14); }
#demo-tienda .td-prog { display: flex; gap: 6px; padding: 0 20px; }
#demo-tienda .td-prog i { flex: 1; height: 6px; border-radius: 9999px; background: #E2DED3; }
#demo-tienda .td-prog i.on { background: var(--ai-ink, #145A43); }
#demo-tienda .td-nhead { margin: 14px 16px 0; padding: 15px 18px; border-radius: 20px; background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-nkick { font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-nname { margin-top: 9px; font-size: 28px; line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; }
#demo-tienda .td-nsub { margin-top: 6px; font-size: 15px; line-height: 1.25; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-loc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 11px 16px 0; }
#demo-tienda .td-lt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 86px;
    border-radius: 18px;
    color: var(--paper);
    background: var(--forest-950);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.35s, transform 0.5s var(--td-ease);
}
#demo-tienda .td-lt.td-on { opacity: 1; transform: none; }
#demo-tienda .td-lt span { font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #BFD3C7; }
#demo-tienda .td-lt b { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#demo-tienda .td-lt:nth-child(1) { color: var(--forest-950); background: var(--td-lime); }
#demo-tienda .td-lt:nth-child(1) span { color: var(--forest-700); }
#demo-tienda .td-shelf { position: relative; height: 206px; margin: 11px 16px 0; padding: 4px 6px 0 2px; border-radius: 18px; background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-shelf svg { display: block; }
#demo-tienda .td-sh-mod { font-size: 14px; font-weight: 500; fill: var(--ui-muted, #5B6B62); font-family: var(--font-sans); }
#demo-tienda .td-sh-mod.is-b { font-weight: 700; fill: var(--ai-ink, #145A43); }
#demo-tienda .td-sh-lv { font-size: 15px; font-weight: 700; fill: #66756D; font-family: var(--font-sans); }
#demo-tienda .td-sh-lv.is-2 { fill: var(--ai-ink, #145A43); }
#demo-tienda .td-sh-others { transition: opacity 0.5s; }
#demo-tienda .td-shelf.td-hl .td-sh-others { opacity: 0.4; }
#demo-tienda .td-sh-hl { fill: rgb(212 242 90 / 0.3); stroke: var(--ai-ink, #145A43); stroke-width: 3; opacity: 0; transition: opacity 0.4s; }
#demo-tienda .td-shelf.td-hl .td-sh-hl { opacity: 1; animation: td-shl 1.6s ease-in-out 2; }
@keyframes td-shl { 50% { stroke-width: 5; fill: rgb(212 242 90 / 0.5); } }
#demo-tienda .td-sh-alt { fill: rgb(242 153 74 / 0.1); stroke: var(--esc-600, #E07B2E); stroke-width: 2.5; stroke-dasharray: 6 4; opacity: 0; transition: opacity 0.4s; }
#demo-tienda .td-shelf.td-planb .td-sh-alt { opacity: 1; }
#demo-tienda .td-here {
    position: absolute;
    left: 246px;
    top: 122px;
    padding: 5px 10px;
    border-radius: 9999px;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    color: var(--td-lime);
    background: var(--forest-900);
    box-shadow: 0 6px 14px -6px rgb(6 35 26 / 0.9);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s, transform 0.45s var(--td-ease);
}
#demo-tienda .td-shelf.td-hl .td-here { opacity: 1; transform: none; }
#demo-tienda .td-stock {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 54px;
    margin: 11px 16px 0;
    padding: 0 16px;
    border-radius: 16px;
    background: var(--ui-bg, #fff);
    border: 1px solid var(--ui-line, #E7E4DC);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.5s var(--td-ease);
}
#demo-tienda .td-stock .dot { width: 11px; height: 11px; border-radius: 9999px; background: var(--ok-500, #10B981); box-shadow: 0 0 0 4px var(--ok-tint, #E7F8EF); }
#demo-tienda .td-stock b { font-size: 17px; font-weight: 600; color: var(--ok-ink, #0A6B4A); }
#demo-tienda .td-stock .pr { margin-left: auto; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
#demo-tienda .td-alt {
    margin: 9px 16px 0;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--esc-tint, #FDF0E6);
    border: 1.5px dashed var(--esc-600, #E07B2E);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.5s var(--td-ease);
}
#demo-tienda .td-alt .k { font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--esc-700, #9A4A0B); }
#demo-tienda .td-alt .t { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 16px; line-height: 1.25; font-weight: 600; color: #3D1E06; }
#demo-tienda .td-alt .t small { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--esc-700, #9A4A0B); }
#demo-tienda .td-alt .t b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
#demo-tienda .td-stock.td-on,
#demo-tienda .td-alt.td-on { opacity: 1; transform: none; }
#demo-tienda .td-got {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 30px;
    display: grid;
    place-items: center;
    height: 58px;
    border-radius: 18px;
    font-size: 17px;
    font-weight: 600;
    color: var(--paper);
    background: var(--forest-950);
}

/* Pantalla: asistente por voz */
#demo-tienda .td-vbar { display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 18px; background: var(--ui-bg, #fff); border-bottom: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-vav { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--forest-900); }
#demo-tienda .td-vav svg { width: 22px; height: 22px; fill: var(--td-lime); }
#demo-tienda .td-vbar b { display: block; font-size: 17px; line-height: 1.15; font-weight: 600; }
#demo-tienda .td-vbar small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.1; color: var(--ai-ink, #145A43); }
#demo-tienda .td-chat { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 0; }
#demo-tienda .td-msg { max-width: 92%; opacity: 0; transform: translateY(10px); transition: opacity 0.35s, transform 0.45s var(--td-ease); }
#demo-tienda .td-msg.td-on { opacity: 1; transform: none; }
#demo-tienda .td-me { align-self: flex-end; padding: 12px 16px; border-radius: 20px 20px 6px 20px; color: var(--ui-ink, #0E1A14); background: var(--esc-500, #F2994A); }
#demo-tienda .td-me .w { display: flex; align-items: center; gap: 3px; height: 22px; margin-bottom: 6px; }
#demo-tienda .td-me .w i { width: 4px; height: 35%; border-radius: 4px; background: rgb(14 26 20 / 0.7); }
#demo-tienda .td-me .w i:nth-child(3n) { height: 75%; }
#demo-tienda .td-me .w i:nth-child(4n+1) { height: 55%; }
#demo-tienda .td-me .w i:nth-child(5n+2) { height: 95%; }
#demo-tienda .td-me.td-live .w i { animation: td-wave 0.9s ease-in-out infinite; }
#demo-tienda .td-me .w i:nth-child(2n) { animation-delay: -0.3s; }
#demo-tienda .td-me .w i:nth-child(3n) { animation-delay: -0.55s; }
#demo-tienda .td-me .w i:nth-child(5n) { animation-delay: -0.15s; }
@keyframes td-wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
#demo-tienda .td-me p { min-height: 24px; font-size: 18px; line-height: 1.28; font-weight: 600; letter-spacing: -0.01em; }
#demo-tienda .td-bot { align-self: flex-start; padding: 12px 15px; border-radius: 20px 20px 20px 6px; color: var(--ui-ink, #0E1A14); background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-bot p { font-size: 16px; line-height: 1.4; }
#demo-tienda .td-ans .td-typing { display: none; padding: 4px 2px; color: #8F9C94; }
#demo-tienda .td-ans.td-busy .td-typing { display: inline-flex; }
#demo-tienda .td-ans.td-busy p { display: none; }
#demo-tienda .td-prod { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-prod .im { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: var(--ui-bg-2, #F5F4EF); }
#demo-tienda .td-prod .tx { flex: 1; min-width: 0; }
#demo-tienda .td-prod .tx b { display: block; font-size: 16px; line-height: 1.2; font-weight: 600; }
#demo-tienda .td-prod .tx small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.2; font-weight: 500; color: var(--ok-ink, #0A6B4A); }
#demo-tienda .td-prod .pr { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
#demo-tienda .td-sug { align-self: stretch; max-width: none; padding: 14px 16px; border-radius: 20px; background: var(--ai-tint, #EEF9C8); border: 1.5px solid rgb(20 90 67 / 0.3); }
#demo-tienda .td-sug .k { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-ink, #145A43); }
#demo-tienda .td-sug .k svg { width: 14px; height: 14px; fill: var(--ai-ink, #145A43); }
#demo-tienda .td-sug .t { margin-top: 8px; font-size: 19px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ui-ink, #0E1A14); }
#demo-tienda .td-sug .s { margin-top: 5px; font-size: 15px; line-height: 1.3; color: #3E5248; }
#demo-tienda .td-add {
    position: relative;
    display: grid;
    place-items: center;
    height: 46px;
    margin-top: 11px;
    overflow: hidden;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    color: var(--paper);
    background: var(--forest-950);
    transition: background-color 0.35s, color 0.35s;
}
#demo-tienda .td-add > span { grid-area: 1 / 1; transition: opacity 0.3s, transform 0.4s var(--td-ease); }
#demo-tienda .td-add .b { opacity: 0; transform: translateY(12px); }
#demo-tienda .td-add.td-ok { color: #fff; background: var(--ok-ink, #0A6B4A); }
#demo-tienda .td-add.td-ok .a { opacity: 0; transform: translateY(-12px); }
#demo-tienda .td-add.td-ok .b { opacity: 1; transform: none; }
#demo-tienda .td-micw { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#demo-tienda .td-mic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 9999px; background: var(--forest-900); box-shadow: 0 12px 26px -10px rgb(6 35 26 / 0.8); }
#demo-tienda .td-mic svg { width: 27px; height: 27px; fill: none; stroke: var(--td-lime); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
#demo-tienda .td-mic::before { content: ""; position: absolute; inset: -8px; border-radius: 9999px; border: 3px solid var(--forest-700); opacity: 0; }
#demo-tienda .td-micw.td-live .td-mic::before { animation: td-ring 1.4s var(--td-ease) infinite; }
@keyframes td-ring { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
#demo-tienda .td-micl { font-size: 14px; font-weight: 500; color: var(--ui-muted, #5B6B62); }

/* Pantalla: pago sin fila */
#demo-tienda .td-pbar { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 20px; }
#demo-tienda .td-pbar .bk { margin-top: -3px; font-size: 30px; line-height: 1; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-pbar b { font-size: 21px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
#demo-tienda .td-sum { margin: 4px 16px 0; padding: 14px 16px 12px; border-radius: 20px; background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-sum .h { font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-sumlist { margin-top: 8px; list-style: none; }
#demo-tienda .td-sumlist li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--ui-line, #E7E4DC); font-size: 15px; line-height: 1.2; color: #3E5248; }
#demo-tienda .td-sumlist li span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#demo-tienda .td-sumlist li span:last-child { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ui-ink, #0E1A14); }
#demo-tienda .td-sumlist li.x span:first-child::after { content: " · sugerida"; font-weight: 600; color: var(--ai-ink, #145A43); }
#demo-tienda .td-tot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; }
#demo-tienda .td-tot span { font-size: 17px; font-weight: 600; }
#demo-tienda .td-tot b { font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
#demo-tienda .td-iva { margin-top: 4px; text-align: right; font-size: 14px; line-height: 1; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-meth { display: flex; align-items: center; gap: 12px; margin: 10px 16px 0; padding: 12px 16px; border-radius: 16px; background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); font-size: 15px; line-height: 1.2; font-weight: 500; color: #3E5248; }
#demo-tienda .td-meth .cd { position: relative; flex: none; width: 42px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #0E4A38, #06231A); }
#demo-tienda .td-meth .cd::after { content: ""; position: absolute; left: 6px; top: 8px; width: 10px; height: 8px; border-radius: 2px; background: #E8D27C; }
#demo-tienda .td-meth small { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--ai-ink, #145A43); }
#demo-tienda .td-paybtn {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 30px;
    display: grid;
    place-items: center;
    height: 62px;
    overflow: hidden;
    border-radius: 18px;
    font-size: 19px;
    line-height: 1;
    font-weight: 600;
    color: var(--ui-ink, #0E1A14);
    background: var(--esc-500, #F2994A);
    box-shadow: 0 14px 28px -12px rgb(224 123 46 / 0.75);
}
#demo-tienda .td-paybtn > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; transition: opacity 0.3s, transform 0.4s var(--td-ease); }
#demo-tienda .td-paybtn b { font-weight: 700; font-variant-numeric: tabular-nums; }
#demo-tienda .td-paybtn .b { opacity: 0; transform: translateY(14px); }
#demo-tienda .td-paybtn.td-busy .a { opacity: 0; transform: translateY(-14px); }
#demo-tienda .td-paybtn.td-busy .b { opacity: 1; transform: none; }
#demo-tienda .td-spin { width: 21px; height: 21px; border-radius: 9999px; border: 3px solid rgb(14 26 20 / 0.25); border-top-color: var(--ui-ink, #0E1A14); animation: td-spin 0.8s linear infinite; }
@keyframes td-spin { to { transform: rotate(360deg); } }
#demo-tienda .td-okp {
    position: absolute;
    left: 0;
    right: 0;
    top: 54px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px 34px;
    text-align: center;
    background: var(--ui-bg-2, #F5F4EF);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s var(--td-ease), transform 0.6s var(--td-ease);
}
#demo-tienda .td-okp.td-on { opacity: 1; transform: none; }
#demo-tienda .td-okc { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 9999px; background: var(--ok-500, #10B981); box-shadow: 0 0 0 12px var(--ok-tint, #E7F8EF); transform: scale(0.5); transition: transform 0.6s var(--td-ease); }
#demo-tienda .td-okp.td-on .td-okc { transform: none; }
#demo-tienda .td-okc svg { width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#demo-tienda .td-okt { margin-top: 26px; font-size: 30px; line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; }
#demo-tienda .td-okp .am { margin-top: 8px; font-size: 17px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; color: #3E5248; }
#demo-tienda .td-qr { width: 172px; height: 172px; margin-top: 20px; padding: 12px; border-radius: 18px; background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-qr svg { display: block; width: 100%; height: 100%; }
#demo-tienda .td-okp .go { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px 16px; border-radius: 14px; font-size: 16px; line-height: 1.2; font-weight: 600; color: var(--ai-ink, #145A43); background: var(--ai-tint, #EEF9C8); border: 1.5px solid rgb(20 90 67 / 0.3); }
#demo-tienda .td-okp .fe { margin-top: 13px; font-size: 14px; line-height: 1.3; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-trip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 24px; }
#demo-tienda .td-trip span { padding: 10px 4px; border-radius: 14px; font-size: 14px; line-height: 1.2; color: var(--ui-muted, #5B6B62); background: var(--ui-bg, #fff); border: 1px solid var(--ui-line, #E7E4DC); }
#demo-tienda .td-trip b { display: block; margin-bottom: 3px; font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ai-ink, #145A43); }

/* ── Panel del gerente (interfaz clara) ──────────────────── */
#demo-tienda .td-mgrp {
    position: relative;
    align-self: stretch;
    width: 100%;
    max-width: 22rem;
    padding: 1.15rem 1.1rem 1rem;
    overflow: hidden;
    border-radius: var(--radius-card, 1.75rem);
    color: var(--ui-ink, #0E1A14);
    background: var(--ui-bg, #fff);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 50px 100px -40px rgb(2 14 10 / 0.9), 0 0 70px -30px rgb(212 242 90 / 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateX(56px);
    transition: opacity 0.6s var(--td-ease), transform 0.9s var(--td-ease), visibility 0s linear 0.6s;
}
#demo-tienda .tdm-mgr .td-mgrp { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#demo-tienda .td-mk2 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-ink, #145A43); }
#demo-tienda .td-mk2 i { width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: var(--ai-ink, #145A43); box-shadow: 0 0 0 4px var(--ai-tint, #EEF9C8); }
#demo-tienda .td-mt { margin-top: 0.6rem; font-size: 1.25rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; text-wrap: balance; }
#demo-tienda .td-ms { margin-top: 0.35rem; font-size: 0.8rem; line-height: 1.35; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-mrows { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.75rem; list-style: none; }
#demo-tienda .td-mrow {
    padding: 0.45rem 0.7rem 0.5rem;
    border-radius: 0.9rem;
    background: var(--ui-bg-2, #F5F4EF);
    border: 1px solid var(--ui-line, #E7E4DC);
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.4s, transform 0.55s var(--td-ease);
}
#demo-tienda .td-mrow.td-on { opacity: 1; transform: none; }
#demo-tienda .td-mrow .r1 { display: flex; align-items: baseline; gap: 0.5rem; }
#demo-tienda .td-mrow .r1 em { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ui-muted, #5B6B62); }
#demo-tienda .td-mrow .r1 b { flex: 1; overflow: hidden; font-size: 0.86rem; line-height: 1.25; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
#demo-tienda .td-mrow .r1 .n { font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
#demo-tienda .td-mrow .r2 { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.3rem; }
#demo-tienda .td-mrow .bar { flex: 1; height: 0.4rem; overflow: hidden; border-radius: 9999px; background: #E6E2D7; }
#demo-tienda .td-mrow .bar i { display: block; width: var(--w); height: 100%; border-radius: 9999px; background: linear-gradient(90deg, #F2994A, #D2483B); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--td-ease) 0.1s; }
#demo-tienda .td-mrow.td-on .bar i { transform: none; }
#demo-tienda .td-tag { flex: none; padding: 0.22rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; line-height: 1.1; font-weight: 600; white-space: nowrap; }
#demo-tienda .td-tag.sig { color: var(--esc-700, #9A4A0B); background: var(--esc-tint, #FDF0E6); }
#demo-tienda .td-tag.ago { color: #A42B22; background: var(--bad-tint, #FBEAE8); }
#demo-tienda .td-tag.nov { color: #3E5248; background: var(--paper-3, #E8E4D9); }
#demo-tienda .td-mai {
    margin-top: 0.6rem;
    padding: 0.65rem 0.8rem;
    border-radius: 1.05rem;
    background: var(--ai-tint, #EEF9C8);
    border: 1px solid rgb(20 90 67 / 0.25);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s, transform 0.6s var(--td-ease);
}
#demo-tienda .td-mai.td-on { opacity: 1; transform: none; }
#demo-tienda .td-mai .k { display: flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-ink, #145A43); }
#demo-tienda .td-mai .k svg { width: 0.8rem; height: 0.8rem; fill: var(--ai-ink, #145A43); }
#demo-tienda .td-mai .t { margin-top: 0.45rem; font-size: 0.86rem; line-height: 1.4; font-weight: 500; color: var(--ui-ink, #0E1A14); }
#demo-tienda .td-msim { margin-top: 0.6rem; font-size: 0.66rem; line-height: 1; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-muted, #5B6B62); }

/* ── Anotaciones (escenas «en el pasillo» y «voz») ───────── */
#demo-tienda .td-ann {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--td-ease), visibility 0s linear 0.5s;
}
#demo-tienda .td-ann.td-on { opacity: 1; visibility: visible; transition-delay: 0s; }
#demo-tienda .td-a { position: absolute; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--td-ease), transform 0.7s var(--td-ease); }
#demo-tienda .td-a.td-on { opacity: 1; transform: none; }
#demo-tienda .td-al {
    left: 0;
    top: 6%;
    width: min(26rem, calc(50% - var(--phw) / 2 - var(--ann-gap)));
}
#demo-tienda .td-ak { font-size: 0.7rem; line-height: 1.4; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--td-lime); }
#demo-tienda .td-ah { margin-top: 0.7rem; font-size: clamp(1.5rem, 3.2cqw, 2.6rem); line-height: 1.02; font-weight: 600; letter-spacing: -0.045em; color: var(--paper); text-wrap: balance; }
#demo-tienda .td-ab { margin-top: 0.85rem; font-size: 1rem; line-height: 1.5; color: var(--td-muted); text-wrap: balance; }
#demo-tienda .td-ab b { font-weight: 600; color: var(--paper); }
#demo-tienda .td-co {
    --co-w: min(23rem, calc(50% - var(--phw) / 2 - var(--ann-gap)));
    top: calc(var(--phw) * var(--ty) / 414 - 1.6rem);
    width: var(--co-w);
    padding: 1rem 1.15rem 1.05rem;
    border-radius: var(--radius-2xl, 1.35rem);
    background: rgb(255 255 255 / 0.05);
    border: 1px solid rgb(255 255 255 / 0.1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
#demo-tienda .td-co.r { left: calc(50% + var(--phw) / 2 + var(--ann-gap)); }
#demo-tienda .td-co.l { right: calc(50% + var(--phw) / 2 + var(--ann-gap)); }
#demo-tienda .td-coh { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--paper); }
#demo-tienda .td-coh i {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--forest-950);
    background: var(--td-lime);
}
#demo-tienda .td-co.warm .td-coh i { background: var(--esc-500, #F2994A); }
#demo-tienda .td-co.ok .td-coh i { background: var(--emerald); }
#demo-tienda .td-cob { margin-top: 0.45rem; font-size: 0.92rem; line-height: 1.45; color: var(--td-muted); }
#demo-tienda .td-cob b { font-weight: 600; color: var(--paper); }
#demo-tienda .td-ln {
    position: absolute;
    top: 1.6rem;
    width: calc(var(--ann-gap) - 0.35rem);
    height: 0;
    border-top: 1.5px dashed rgb(212 242 90 / 0.6);
    opacity: 0;
    transition: opacity 0.5s var(--td-ease) 0.15s;
}
#demo-tienda .td-ln::after {
    content: "";
    position: absolute;
    top: -5.5px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: var(--td-lime);
    box-shadow: 0 0 0 4px rgb(212 242 90 / 0.22);
}
#demo-tienda .td-co.r .td-ln { right: 100%; }
#demo-tienda .td-co.r .td-ln::after { left: -5px; }
#demo-tienda .td-co.l .td-ln { left: 100%; }
#demo-tienda .td-co.l .td-ln::after { right: -5px; }
#demo-tienda .td-a.td-on .td-ln { opacity: 1; }
#demo-tienda .td-asim {
    position: absolute;
    left: 0;
    bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.66rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--td-muted);
}
#demo-tienda .td-asim i { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: var(--esc-500, #F2994A); }

/* ═══ Plano angosto (< 980 px): HUD en dos filas, rótulos del SVG más grandes ═══ */
@container demo (max-width: 979px) {
    #demo-tienda .td { --side: 298px; --gap: 1rem; --ann-gap: 1.6rem; }
    #demo-tienda .td-hud { flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0; }
    #demo-tienda .td-mode { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; padding: 0.85rem 1rem 0.75rem; }
    #demo-tienda .td-tiles { border-top: 1px solid rgb(255 255 255 / 0.08); }
    #demo-tienda .td-tile { flex: 1; width: auto; padding: 0.7rem 0.85rem; }
    #demo-tienda .td-tile:first-child { border-left: 0; }
    #demo-tienda .td-tv { font-size: 1.6rem; }
    #demo-tienda .td-tvrow { flex-wrap: wrap; gap: 0.15rem 0.45rem; }
    /* El plano se ve a ~0,43×: rótulos a 23–24 u (≥ 10 px reales) y nombre corto */
    #demo-tienda .td-dlabel { font-size: 24px; }
    #demo-tienda .td-dl-long { display: none; }
    #demo-tienda .td-dl-short { display: inline; }
    #demo-tienda .td-sign text { font-size: 24px; }
    #demo-tienda .td-slabel { font-size: 24px; }
    #demo-tienda .td-slabel.sm { font-size: 24px; }
    #demo-tienda .td-pin-n { font-size: 24px; }
    #demo-tienda .td-end { top: auto; bottom: 3.6%; padding: 0.8rem 0.9rem; }
    #demo-tienda .td-end .h { font-size: 1.05rem; }
    #demo-tienda .td-end .b { font-size: 0.8rem; }
    #demo-tienda .td-askb { max-width: 15rem; }
    #demo-tienda .td-aq { font-size: 0.82rem; }
    #demo-tienda .td-ar { font-size: 0.78rem; }
    #demo-tienda .td-hleg { left: 73.6%; width: 24.2%; padding: 0.55rem 0.65rem 0.5rem; }
    #demo-tienda .td-hleg > span { display: none; }
    #demo-tienda .td-hleg em { font-size: 0.64rem; letter-spacing: 0.04em; }
    /* Anotaciones más compactas */
    #demo-tienda .td-al { top: 2%; }
    #demo-tienda .td-ah { font-size: 1.7rem; }
    #demo-tienda .td-ab { font-size: 0.95rem; }
    #demo-tienda .td-co { padding: 0.9rem 1rem 0.95rem; }
    #demo-tienda .td-coh { font-size: 1rem; }
    #demo-tienda .td-cob { font-size: 0.88rem; }
    #demo-tienda .td-asim { display: none; }
}

/* ═══ Un panel a la vez (< 760 px): plano o celular al frente ═══ */
@container demo (max-width: 759px) {
    #demo-tienda .td { --td-focus: 1; --ann-gap: 1.1rem; }
    #demo-tienda .td-stage { grid-template-columns: minmax(0, 1fr); }
    #demo-tienda .td-mapcol,
    #demo-tienda .td-side { grid-column: 1; grid-row: 1; }
    #demo-tienda .td-side { width: 100%; }
    #demo-tienda .tdm-zoom .td-side { transform: none; }
    #demo-tienda .td-side { opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 0.5s var(--td-ease), transform 0.7s var(--td-ease), visibility 0s linear 0.5s; }
    #demo-tienda .tdf-app .td-side,
    #demo-tienda .tdm-zoom .td-side { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    #demo-tienda .tdf-app .td-mapcol,
    #demo-tienda .tdm-zoom .td-mapcol { opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity 0.5s var(--td-ease), transform 0.7s var(--td-ease), visibility 0s linear 0.5s; }
    #demo-tienda .tdm-zoom .td-card { opacity: 1; filter: none; transform: none; }
    #demo-tienda .td-mgrp { max-width: 24rem; align-self: center; }
    /* Anotaciones angostas a los lados del celular */
    #demo-tienda .td-ah { font-size: 1.35rem; }
    #demo-tienda .td-ab { font-size: 0.86rem; }
    #demo-tienda .td-co { padding: 0.75rem 0.8rem 0.8rem; top: calc(var(--phw) * var(--ty) / 414 - 1.35rem); }
    #demo-tienda .td-coh { font-size: 0.9rem; align-items: flex-start; }
    #demo-tienda .td-coh i { width: 1.25rem; height: 1.25rem; font-size: 0.68rem; }
    #demo-tienda .td-cob { font-size: 0.8rem; }
    #demo-tienda .td-ln { top: 1.35rem; }
}

/* ═══ Diseño estrecho (< 600 px): plano en vertical, anotaciones bajo el celular ═══ */
@container demo (max-width: 599px) {
    #demo-tienda .td { --phw: min(298px, 100cqw); --feed: 8.9rem; --annh: 11.4rem; }
    #demo-tienda .td-stage { grid-template-rows: auto auto; row-gap: 0.75rem; align-items: start; }
    #demo-tienda .td-mapcol { grid-row: 1 / 3; align-self: center; }
    #demo-tienda .td-side { grid-row: 1; }
    /* El celular queda centrado y sube para dar sitio a las anotaciones */
    #demo-tienda .td-side { --sy: calc((var(--annh) + 0.75rem) / 2); transform: translateY(calc(var(--sy) + 16px)); }
    #demo-tienda .tdf-app .td-side { transform: translateY(var(--sy)); }
    #demo-tienda .tdm-zoom .td-side { transform: none; }
    #demo-tienda .td-mgrp { max-width: none; }

    /* Plano en vertical: recorte sin el Jardín (x 12–940, y 12–668) girado 90°
       para aprovechar el ancho; nombres de departamento → leyenda HTML */
    #demo-tienda .td-card { border-radius: var(--radius-2xl, 1.35rem); }
    #demo-tienda .td-mapwrap { padding: 0.35rem; transition: padding-bottom 0.6s var(--td-ease); }
    #demo-tienda .tdm-sin .td-mapwrap,
    #demo-tienda .tdm-mgr .td-mapwrap { padding-bottom: calc(var(--feed) + 0.5rem); }
    #demo-tienda .td-mapclip { position: relative; aspect-ratio: 656 / 928; }
    #demo-tienda .td-mapin { position: absolute; inset: 0; }
    #demo-tienda .td-map {
        position: absolute;
        left: 0;
        top: 0;
        width: 188.415%;
        max-width: none;
        transform-origin: 0 0;
        transform: translate(54.045%, -1.765%) rotate(90deg);
        clip-path: inset(1.765% 23.948% 1.765% 0.971%);
    }
    #demo-tienda .td-dlabel,
    #demo-tienda .td-slabel { display: none; }
    #demo-tienda .td-sign-in { transform: rotate(-90deg); }
    #demo-tienda .td-l-walk { --walk-s: 1.25; }
    #demo-tienda .td-pin.td-on .td-pin-in { transform: scale(1.2) rotate(-90deg); }
    #demo-tienda .td-sin-dots { stroke-width: 8; stroke-dasharray: 0.1 14; }
    #demo-tienda .td-ia-line { stroke-width: 8; }
    #demo-tienda .td-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem 0.75rem;
        padding: 0.6rem 0.85rem 0.15rem;
        font-size: 0.7rem;
        line-height: 1.2;
        color: #D5DED9;
    }
    #demo-tienda .td-legend li { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
    #demo-tienda .td-legend i { width: 0.5rem; height: 0.5rem; border-radius: 0.15rem; background: var(--c); }
    #demo-tienda .td-legend span { color: var(--td-muted); font-variant-numeric: tabular-nums; }

    /* Capa HTML: marcas con las coordenadas giradas; burbujas y rótulos debajo del plano */
    #demo-tienda .td-ov { --fl: 0%; --fr: 0%; --ft: calc(100% + 0.6rem); }
    #demo-tienda .td-ask { position: static; }
    #demo-tienda .td-askm {
        left: calc((98.235% - var(--y)) * 1.036585);
        top: calc((var(--x) - 0.971%) * 1.331897);
        margin: -0.7rem 0 0 -0.7rem;
        width: 1.4rem;
        height: 1.4rem;
        font-size: 0.7rem;
    }
    #demo-tienda .td-askb,
    #demo-tienda .td-ask.up .td-askb,
    #demo-tienda .td-ask.down .td-askb { top: var(--ft); bottom: auto; left: var(--fl); right: var(--fr); width: auto; max-width: none; transform: translateY(8px); transform-origin: 50% 0; }
    #demo-tienda .td-ask.td-on .td-askb { transform: none; }
    #demo-tienda .td-ask.td-col .td-askb { transform: translateY(-6px); }
    #demo-tienda .td-aq { font-size: 0.82rem; }
    #demo-tienda .td-ar { font-size: 0.78rem; }
    #demo-tienda .td-chip { left: var(--fl); top: var(--ft); transform: translateY(8px); font-size: 0.75rem; }
    #demo-tienda .td-chip.td-on { transform: none; }
    #demo-tienda .td-chip.c-hot { top: calc(var(--ft) + var(--i) * 2rem); }
    #demo-tienda .td-hleg { left: auto; right: var(--fr); bottom: auto; top: var(--ft); width: 38%; padding: 0.6rem 0.7rem; }
    #demo-tienda .td-hleg > span { display: block; font-size: 0.68rem; }
    #demo-tienda .td-hleg em { font-size: 0.64rem; letter-spacing: 0.02em; }
    #demo-tienda .td-end { left: var(--fl); right: var(--fr); top: var(--ft); bottom: auto; width: auto; padding: 0.75rem 0.85rem; }
    #demo-tienda .td-end .h { font-size: 1rem; }
    #demo-tienda .td-end .b { font-size: 0.78rem; line-height: 1.38; }

    /* HUD compacto */
    #demo-tienda .td-mode { padding: 0.7rem 0.85rem 0.6rem; }
    #demo-tienda .td-modesub { font-size: 0.78rem; }
    #demo-tienda .td-tile { padding: 0.6rem 0.65rem; gap: 0.35rem; }
    #demo-tienda .td-tl { font-size: 0.64rem; letter-spacing: 0.1em; }
    #demo-tienda .td-tv { font-size: 1.35rem; }
    #demo-tienda .td-tv small { font-size: 0.72rem; }
    #demo-tienda .td-was { font-size: 0.68rem; }
    #demo-tienda .td-tl { white-space: normal; line-height: 1.2; }
    #demo-tienda .td-tile { justify-content: flex-start; }

    /* Anotaciones bajo el celular (solo la última muestra su texto) */
    #demo-tienda .td-ann {
        position: relative;
        inset: auto;
        grid-column: 1;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        min-height: var(--annh);
    }
    #demo-tienda .td-al,
    #demo-tienda .td-asim,
    #demo-tienda .td-ln { display: none; }
    #demo-tienda .td-co,
    #demo-tienda .td-co.l,
    #demo-tienda .td-co.r { position: relative; left: auto; right: auto; top: auto; width: auto; padding: 0.6rem 0.75rem; border-radius: 1.05rem; }
    #demo-tienda .td-ann[data-a="shelf"] .td-co.r:not(.warm) { order: -1; }
    #demo-tienda .td-coh { font-size: 0.86rem; align-items: center; }
    #demo-tienda .td-cob { font-size: 0.78rem; margin-top: 0.3rem; }
    #demo-tienda .td-co:not(.td-last) .td-cob { display: none; }
}

/* Movimiento reducido: sin bucles decorativos */
@media (prefers-reduced-motion: reduce) {
    #demo-tienda .td-walker .h,
    #demo-tienda .td-me .w i,
    #demo-tienda .td-mic::before,
    #demo-tienda .td-spin,
    #demo-tienda .td-sh-hl,
    #demo-tienda .dm-typing i { animation: none !important; }
}