/* ==========================================================================
   SoftPay Colombia — CSS só da home (paises/co/public/index.html)
   --------------------------------------------------------------------------
   O resto vem do sistema.css do Brasil (copiado a cada build). Aqui ficam:
   1. o hero com a PRÉVIA do sistema real (prefixo demo-): uma réplica leve das
      telas do SoftPay em modo Colômbia — caixa, inventário, fiados e ganância —
      com os tokens medidos nas capturas de 25/10/2026
      (C:\Users\USER\softpay-co-telas\DESIGN-REAL.md: Poppins, #2B96DE,
      #F6F8F9, #FEFFFF, raio 12px nos cartões e 8px nos botões, ícones lucide);
   2. as seções novas da home da Colômbia (prefixo co-).
   Celular primeiro. O aparelho é um celular abaixo de 75rem e um computador
   a partir de 75rem (1200px), como o app real troca de layout.
   ========================================================================== */

/* ------------------------------------------------- 0. FONTE DO APLICATIVO */
@font-face { font-family: 'Poppins'; src: url('/assets/home/poppins-400-v1.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/home/poppins-500-v1.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/home/poppins-600-v1.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/assets/home/poppins-700-v1.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }

.demo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------ 1. HERO */
.hero.hero--demo {
    display: block;
    min-height: 0;
    padding: calc(var(--nav-h) + 1.75rem) 0 var(--sp-7);
    background: var(--noite);
}
.co-hero__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: center;
}
.co-hero__texto { max-width: 36rem; }
.co-hero__titulo {
    margin: 0 0 1rem;
    font-family: var(--display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(3.4rem, 1.6rem + 7.4vw, 5rem);
    line-height: 0.9; letter-spacing: -0.0036em;
    color: var(--branco);
}
.co-hero__titulo span { display: block; text-wrap: balance; }
.co-hero__marca { color: var(--acento); }
.co-hero__lead {
    margin: 0 0 1.5rem; max-width: 34rem;
    font-size: clamp(1.0625rem, 0.98rem + 0.36vw, 1.25rem); line-height: 1.4;
    color: rgba(255, 255, 255, 0.76);
    text-wrap: pretty;
}
.co-hero__cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 56px; padding: 0 24px; border-radius: 20px;
    font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--branco);
    text-decoration: none; text-align: center; text-shadow: 0 1px 0 rgba(3, 10, 18, 0.25);
    background-color: #1570C3;
    background-image: linear-gradient(110deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 60%),
                      linear-gradient(180deg, #1A7FD2 0%, #1570C3 50%, #0D63B0 100%);
    background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 28px -14px rgba(3, 10, 18, 0.8);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.co-hero__cta:active { transform: scale(0.98); }
.co-hero__cta:focus-visible { outline: 3px solid var(--branco); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .co-hero__cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 18px 32px -14px rgba(3, 10, 18, 0.9); }
}
@media (max-width: 47.99rem) {
    .co-hero__cta { width: 100%; }
}
@media (min-width: 62rem) {
    .hero.hero--demo { min-height: 100svh; display: flex; align-items: center; padding-bottom: var(--sp-6); }
    .co-hero__grade { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--sp-7); }
    .co-hero__titulo { font-size: clamp(4.25rem, 1.4rem + 4.6vw, 5.75rem); }
}
@media (min-width: 75rem) {
    .co-hero__grade { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--sp-6); }
    /* a coluna do texto para de crescer junto com o shell (78rem): o título também */
    .co-hero__titulo { font-size: clamp(4.25rem, 0.6rem + 4.9vw, 4.8rem); }
}
/* uma entrada só, curta, no texto do hero */
@media (prefers-reduced-motion: no-preference) {
    .co-hero__texto > * { animation: hero-entra 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .co-hero__texto > :nth-child(2) { animation-delay: 0.1s; }
    .co-hero__texto > :nth-child(3) { animation-delay: 0.2s; }
    .co-hero__cta { animation: hero-entra 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both, hero-luz 5s ease-in-out 1.6s infinite; }
}

/* --------------------------------------------- 2. A PRÉVIA: moldura e abas */
.demo {
    width: 100%; max-width: 25rem; margin-inline: auto;
    min-width: 0;
}
@media (min-width: 75rem) { .demo { max-width: none; } }

.demo-abas {
    display: flex; gap: 4px; width: fit-content; max-width: 100%;
    margin: 0 auto 0.875rem; padding: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-pill);
}
.demo-aba {
    min-height: 40px; padding: 0 clamp(10px, 2.6vw, 18px);
    border: 0; border-radius: var(--r-pill);
    background: transparent; color: rgba(255, 255, 255, 0.82);
    font: 600 clamp(0.8125rem, 0.76rem + 0.3vw, 0.9375rem)/1 var(--fonte);
    white-space: nowrap; cursor: pointer;
    transition: background-color 0.16s linear, color 0.16s linear;
}
.demo-aba[aria-selected="true"] { background: var(--branco); color: var(--noite); }
.demo-aba:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .demo-aba:not([aria-selected="true"]):hover { color: var(--branco); background: rgba(255, 255, 255, 0.08); }
}
/* sem JavaScript a prévia é só a tela do caixa: abas e ações não aparecem */
.demo:not([data-listo]) .demo-abas,
.demo:not([data-listo]) .demo-guia { display: none; }

.demo-aparato {
    position: relative;
    padding: 7px;
    background: linear-gradient(180deg, #1F3346 0%, #0E1D2B 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 2.4rem;
    box-shadow: 0 2px 0 rgba(255, 255, 255, 0.08) inset, 0 44px 90px -30px rgba(0, 0, 0, 0.85);
}
.demo-pie { margin-top: 0.875rem; text-align: center; }
.demo-selo {
    display: inline-flex; align-items: center; gap: 0.375rem;
    margin: 0; padding: 0.25rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-pill);
    font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.78);
}
.demo-selo .di { width: 14px; height: 14px; color: var(--acento); }
.demo-guia {
    margin: 0.625rem auto 0; max-width: 26rem;
    font-size: var(--t-sm); line-height: 1.45; color: rgba(255, 255, 255, 0.72);
    text-wrap: balance;
}
.demo-pie__acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 0.625rem 0 0; }
.demo-pie__acciones[hidden] { display: none; }
.demo-pie__btn {
    min-height: 40px; padding: 0 1rem; border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--branco);
    font: 600 var(--t-sm)/1 var(--fonte); cursor: pointer;
}
.demo-pie__btn--fuerte { background: var(--branco); color: var(--noite); border-color: var(--branco); }
.demo-pie__btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* --------------------------------------------- 3. O APLICATIVO: tokens e base */
.demo-app {
    --d-azul: #2B96DE;
    --d-azul-escuro: #1D7BB9;
    --d-azul-claro: #E8F4FB;
    --d-azul-carrito: #E1EFF5;
    --d-sobre-azul: #FAFFFF;
    --d-fondo: #F6F8F9;
    --d-tarjeta: #FEFFFF;
    --d-tinta: #000000;
    --d-gris: #666666;
    --d-suave: #EDF0F2;
    --d-borde: #D9E0E3;
    --d-rojo: #DC2828;
    --d-verde: #21C45D;
    --d-ganancia: #059669;
    --d-cambio: #16A34A;
    --d-ambar: #F59F0A;
    --d-ambar-tinta: #B45309;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr) 64px;
    grid-template-areas: "cab" "pantalla" "nav";
    height: clamp(540px, 76svh, 680px);
    overflow: hidden;
    isolation: isolate;
    border-radius: 1.9rem;
    background: var(--d-fondo);
    color: var(--d-tinta);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px; line-height: 1.45;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.demo-app *, .demo-app *::before, .demo-app *::after { box-sizing: border-box; }
.demo-app p, .co-mini p { margin: 0; }
.demo-app button { cursor: pointer; }
.demo-app :where(button):focus-visible,
.demo-app :where(input):focus-visible,
.demo-app :where(summary):focus-visible {
    outline: 2px solid var(--d-azul); outline-offset: 2px; border-radius: 8px;
}
/* busca, "Monto recibido" e "Valor" do abono: o anel é o da moldura do campo
   (:focus-within), como no app; sem isto o input ganhava um segundo contorno
   deslocado por dentro (a regra acima, 0,2,0, vencia o outline: 0 de 0,1,1) */
.demo-campo input:focus-visible,
.demo-monto input:focus-visible { outline: none; }
.di {
    display: inline-block; flex: 0 0 auto;
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: middle;
}
.demo-azul { color: var(--d-azul); }
.demo-rojo { color: var(--d-rojo); }
.demo-verde { color: var(--d-cambio); }
.demo-app [hidden] { display: none !important; }

/* botões do app (ui/button.tsx) */
.demo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 0 16px;
    border: 1px solid transparent; border-radius: 8px;
    font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap;
    transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.demo-btn:active { transform: scale(0.98); }
.demo-btn--primario {
    background: var(--d-azul); color: var(--d-sobre-azul);
    box-shadow: 0 1px 2px rgba(43, 150, 222, 0.2);
}
.demo-btn--primario:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.demo-btn--linea { background: var(--d-fondo); border-color: var(--d-borde); color: var(--d-tinta); }
.demo-btn--fantasma { background: transparent; color: var(--d-gris); }
.demo-btn--enorme { width: 100%; min-height: 50px; font-size: 16px; font-weight: 700; letter-spacing: 0.01em; }
.demo-btn--enorme .di { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
    .demo-btn--primario:not(:disabled):hover { box-shadow: 0 4px 10px -2px rgba(43, 150, 222, 0.35); }
    .demo-btn--linea:hover { background: var(--d-suave); }
}
.demo-icono-btn {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px;
    border: 1px solid var(--d-borde); border-radius: 8px;
    background: var(--d-tarjeta); color: var(--d-tinta);
}
.demo-icono-btn .di { width: 18px; height: 18px; }
.demo-icono-btn--azul { background: var(--d-azul); border-color: var(--d-azul); color: var(--d-sobre-azul); }
.demo-icono-btn--plano { border-color: transparent; background: transparent; }
.demo-cerrar {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; margin: -6px -8px -6px auto;
    border: 0; border-radius: 8px; background: transparent; color: var(--d-gris);
}
.demo-cerrar .di { width: 18px; height: 18px; }

.demo-campo {
    position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
    height: 44px; padding: 0 12px; gap: 8px;
    border: 1px solid var(--d-borde); border-radius: 8px;
    background: var(--d-tarjeta); color: var(--d-gris);
}
.demo-campo .di { width: 18px; height: 18px; }
.demo-campo input {
    flex: 1 1 0; width: 0; min-width: 0; height: 100%;
    border: 0; background: transparent; outline: 0;
    font-family: inherit; font-size: 16px; color: var(--d-tinta);
}
.demo-campo input::placeholder { color: #8A8F94; }
.demo-campo:focus-within { border-color: var(--d-azul); box-shadow: 0 0 0 1px var(--d-azul); }
.demo-campo input::-webkit-search-cancel-button { -webkit-appearance: none; }

.demo-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 9999px;
    background: var(--d-suave); color: var(--d-tinta);
    font-size: 11px; font-weight: 500; line-height: 1.6; white-space: nowrap;
}
.demo-chip--ambar { background: rgba(245, 158, 11, 0.15); color: var(--d-ambar-tinta); }
.demo-chip--ambar::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--d-ambar); }
.demo-chip-azul {
    padding: 1px 10px; border-radius: 9999px;
    background: var(--d-azul); color: var(--d-sobre-azul);
    font-size: 12px; font-weight: 600; line-height: 1.7; white-space: nowrap;
}
.demo-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.demo-punto--ambar { background: var(--d-ambar); }
.demo-punto--rojo { background: var(--d-rojo); }
.demo-punto--verde { background: var(--d-verde); }
.demo-punto--gris { background: #CFCFCF; }
.demo-punto--azul { background: var(--d-azul); }
.demo-punto--azul60 { background: rgba(43, 150, 222, 0.6); }
.demo-punto--azul30 { background: rgba(43, 150, 222, 0.3); }

/* --------------------------------------------- 4. CROMO: cabeçalho, barras */
.demo-cabecera {
    grid-area: cab;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    background: var(--d-tarjeta);
    border-bottom: 1px solid var(--d-borde);
}
.demo-cabecera__logo { width: auto; height: 28px; }
.demo-cabecera__tienda,
.demo-lateral__tienda {
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--d-azul); color: var(--d-sobre-azul);
    font-size: 15px; font-weight: 600;
}
.demo-barra-nav {
    grid-area: nav;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: 4px;
    background: var(--d-tarjeta);
    border-top: 1px solid var(--d-borde);
}
.demo-barra-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: transparent; color: #595959;
    font-size: 10px; font-weight: 500;
}
.demo-barra-nav__item .di { width: 20px; height: 20px; }
.demo-barra-nav__item[aria-current="true"] { color: var(--d-azul); }
.demo-lateral { display: none; }

.demo-pantalla {
    grid-area: pantalla;
    position: relative; min-height: 0; min-width: 0;
    overflow: hidden;
    outline: 0;
}
.demo-vista {
    height: 100%;
    overflow-y: auto; overflow-x: hidden;
    padding: 14px 14px 18px;
    scrollbar-width: thin;
}
@media (prefers-reduced-motion: no-preference) {
    .demo-vista, .demo-v { animation: demo-entra 0.18s ease-out both; }
}
@keyframes demo-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------- 5. VENDER (o caixa) */
.demo-v {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "caja" "busca" "grilla" "barra";
    height: 100%; min-height: 0;
}
.demo-v__caja {
    grid-area: caja;
    display: flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 12px;
    background: var(--d-tarjeta);
    border-bottom: 1px solid var(--d-borde);
}
.demo-sello-abierta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 9999px;
    background: var(--d-verde); color: #FFFFFF;
    font-size: 12px; font-weight: 600; line-height: 1.6;
}
.demo-sello-abierta .di { width: 12px; height: 12px; stroke-width: 2.4; }
.demo-v__num, .demo-v__op, .demo-v__botones { display: none; }
.demo-v__iconos { display: flex; gap: 6px; margin-left: auto; }
.demo-v__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; }
.demo-v__ico .di { width: 20px; height: 20px; }
.demo-v__ico--rojo { background: rgba(220, 40, 40, 0.1); color: var(--d-rojo); }
.demo-v__ico--rojo .di { width: 18px; height: 18px; }

.demo-v__busca {
    grid-area: busca;
    display: flex; gap: 8px;
    padding: 12px 12px 10px;
}
.demo-v__categorias { display: none; }
.demo-grilla {
    grid-area: grilla;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
    align-content: start;
    padding: 0 12px 12px;
    overflow-y: auto; overflow-x: hidden; min-height: 0;
    scrollbar-width: thin;
}
/* a célula (e não o botão) é o item da grade: o Chrome mede mal a altura
   intrínseca de <button> e a linha da grade ficava menor que o cartão */
.demo-celda { display: flex; min-width: 0; }
.demo-celda[hidden] { display: none; }
.demo-prod {
    position: relative;
    display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
    min-height: 90px; padding: 10px;
    border: 1px solid var(--d-borde); border-radius: 12px;
    background: var(--d-tarjeta);
    text-align: left;
    transition: transform 0.12s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.demo-prod:active { transform: scale(0.98); }
.demo-prod__nombre {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    flex: 0 0 auto; overflow: hidden; height: 40px;
    font-size: 14px; font-weight: 500; line-height: 20px; color: var(--d-tinta);
}
.demo-prod.is-en-carrito .demo-prod__nombre { padding-right: 26px; }
.demo-prod__pie {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px;
    margin-top: auto; padding-top: 8px;
}
.demo-prod__precio {
    font-size: 16px; font-weight: 700; line-height: 1; color: var(--d-azul);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.demo-prod__stock,
.demo-sello-stock {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 6px; border-radius: 9999px;
    background: var(--d-suave); color: var(--d-tinta);
    font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.demo-prod__stock .di, .demo-sello-stock .di { width: 12px; height: 12px; }
.demo-prod.is-bajo .demo-prod__stock { background: rgba(245, 158, 11, 0.15); color: var(--d-ambar-tinta); }
.demo-prod.is-agotado { opacity: 0.6; cursor: not-allowed; }
.demo-prod.is-agotado .demo-prod__precio, .demo-prod.is-agotado .demo-prod__nombre { color: var(--d-gris); }
.demo-prod.is-agotado .demo-prod__stock { background: var(--d-rojo); color: #FFFFFF; }
.demo-prod.is-en-carrito { border-color: rgba(43, 150, 222, 0.5); background: var(--d-azul-carrito); }
.demo-prod__cuenta {
    position: absolute; top: 6px; right: 6px; z-index: 1;
    display: none; place-items: center;
    min-width: 24px; height: 24px; padding: 0 6px;
    border-radius: 9999px;
    background: var(--d-azul); color: var(--d-sobre-azul);
    font-size: 12px; font-weight: 700; line-height: 1;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--d-azul-carrito);
}
.demo-prod.is-en-carrito .demo-prod__cuenta { display: grid; }
.demo-prod.is-pulso .demo-prod__cuenta { animation: demo-pulso 0.22s ease-out; }
@keyframes demo-pulso { from { transform: scale(0.5); } to { transform: scale(1); } }
@media (hover: hover) and (pointer: fine) {
    .demo-prod:not(.is-agotado):hover { border-color: var(--d-azul); }
}
.demo-prod:focus-visible { outline: 2px solid var(--d-azul); outline-offset: -2px; border-color: var(--d-azul); }

.demo-v__barra {
    grid-area: barra;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    background: var(--d-tarjeta);
    border-top: 1px solid var(--d-borde);
}
.demo-v__barra.is-vacia { display: none; }
.demo-v__resumen {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
    padding: 2px 0; border: 0; background: transparent; text-align: left;
}
.demo-v__resumen > .di { width: 22px; height: 22px; color: var(--d-azul); }
.demo-v__cuentas { display: grid; line-height: 1.15; min-width: 0; }
.demo-v__articulos { font-size: 12px; color: var(--d-gris); }
.demo-v__total { font-size: 18px; font-weight: 700; color: var(--d-azul); font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-v__finalizar { min-height: 44px; padding: 0 20px; font-size: 16px; font-weight: 700; }
.demo-carrito { display: none; }

/* ------------------------------------- 6. CAPA: folha, diálogos e fichas */
.demo-capa {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    padding: 12px;
    background: rgba(0, 0, 0, 0.6);
}
.demo-capa.is-hoja { align-items: stretch; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
    .demo-capa { animation: demo-fundo 0.16s ease-out both; }
    .demo-capa > .demo-dlg { animation: demo-sube 0.2s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .demo-capa > .demo-hoja { animation: demo-lateral 0.22s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes demo-fundo { from { background: rgba(0, 0, 0, 0); } }
@keyframes demo-sube { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes demo-lateral { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.demo-dlg {
    display: flex; flex-direction: column;
    width: 100%; max-width: 440px; max-height: 100%;
    background: var(--d-fondo);
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.demo-dlg__cab { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 48px 6px; text-align: center; }
.demo-dlg__cab .demo-cerrar { position: absolute; top: 8px; right: 8px; margin: 0; }
.demo-dlg__titulo { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.demo-dlg__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; }
.demo-dlg__pie {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--d-borde);
    background: var(--d-fondo);
}
.demo-dlg__pie--uno { grid-template-columns: 1fr; }
.demo-dlg__pie .demo-btn { min-height: 46px; }

/* folha do carrinho (celular) */
.demo-hoja {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: var(--d-fondo);
}
.demo-hoja__cab {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px; background: var(--d-tarjeta);
    border-bottom: 1px solid var(--d-borde);
}
.demo-hoja__cab > .di { width: 20px; height: 20px; }
.demo-hoja__titulo { font-size: 18px; font-weight: 600; }
.demo-hoja__lineas { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
.demo-fila-hoja {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
    min-height: 56px; padding: 6px 10px;
    border-radius: 8px; background: rgba(237, 240, 242, 0.6);
}
.demo-fila-hoja__info { display: grid; min-width: 0; }
.demo-fila-hoja__nombre { font-size: 14px; font-weight: 500; line-height: 1.3; }
.demo-fila-hoja__unit { font-size: 11px; color: var(--d-gris); }
.demo-fila-hoja__ctrl { display: flex; align-items: center; gap: 6px; }
.demo-fila-hoja__q { min-width: 16px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-fila-hoja__valor { font-size: 13px; font-weight: 700; color: var(--d-azul); white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-paso {
    display: grid; place-items: center;
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--d-borde); border-radius: 8px;
    background: var(--d-tarjeta); color: var(--d-tinta);
}
.demo-paso--g { width: 40px; height: 40px; }
.demo-paso--g .di { width: 18px; height: 18px; }
.demo-paso.is-lixo { color: var(--d-rojo); }
.demo-hoja__pie {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
    padding: 12px 16px 16px; background: var(--d-tarjeta);
    border-top: 1px solid var(--d-borde);
}
.demo-hoja__totales { display: grid; line-height: 1.1; }
.demo-hoja__tl { font-size: 12px; color: var(--d-gris); }
.demo-hoja__total { font-size: 22px; font-weight: 700; color: var(--d-azul); font-variant-numeric: tabular-nums; }
.demo-hoja__fin { min-height: 46px; padding: 0 22px; font-size: 16px; font-weight: 700; }

/* finalizar venda */
.demo-pago__resumen { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 2px 0 12px; }
.demo-pago__resumen > span:first-child { font-size: 14px; color: var(--d-gris); }
.demo-pago__total { font-size: 24px; font-weight: 700; color: var(--d-azul); font-variant-numeric: tabular-nums; }
.demo-formas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.demo-forma {
    display: flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 12px;
    border: 2px solid var(--d-borde); border-radius: 6px;
    background: var(--d-fondo); color: var(--d-tinta);
    font-size: 14px; font-weight: 600; text-align: left;
}
.demo-forma .di { width: 20px; height: 20px; }
.demo-forma[aria-checked="true"] { background: var(--d-azul); border-color: var(--d-azul); color: #FFFFFF; box-shadow: 0 1px 3px rgba(43, 150, 222, 0.35); }
.demo-formas--abono { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-formas--abono .demo-forma { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 4px; font-size: 12px; text-align: center; }
.demo-formas--abono .demo-forma .di { width: 18px; height: 18px; }
.demo-etq { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 500; }
.demo-efectivo {
    display: grid; gap: 8px;
    padding: 12px; border: 2px solid rgba(34, 197, 94, 0.5); border-radius: 8px;
    background: rgba(34, 197, 94, 0.05);
}
.demo-efectivo.is-falta { border-color: rgba(245, 158, 11, 0.6); background: rgba(245, 158, 11, 0.06); }
.demo-efectivo .demo-etq { margin: 0; }
.demo-efectivo__fila { display: flex; align-items: center; gap: 8px; }
.demo-monto {
    display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
    height: 48px; padding: 0 12px;
    border: 1px solid var(--d-borde); border-radius: 8px; background: var(--d-fondo);
}
.demo-monto--ancho { width: 100%; margin-bottom: 12px; }
.demo-monto:focus-within { border-color: var(--d-azul); box-shadow: 0 0 0 1px var(--d-azul); }
.demo-monto__cop { color: var(--d-gris); font-size: 16px; }
.demo-monto input {
    flex: 1 1 0; width: 0; min-width: 0; height: 100%; padding: 0 0 0 2px;
    border: 0; outline: 0; background: transparent;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 18px; color: var(--d-tinta);
}
.demo-input {
    width: 100%; height: 44px; padding: 0 12px; margin-bottom: 12px;
    border: 1px solid var(--d-borde); border-radius: 8px; background: var(--d-fondo);
    font-family: inherit; font-size: 16px; color: var(--d-tinta);
}
.demo-input:focus { outline: 0; border-color: var(--d-azul); box-shadow: 0 0 0 1px var(--d-azul); }
.demo-cambio {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-radius: 8px; background: #C3EBD4;
}
.demo-cambio span { color: var(--d-gris); }
.demo-cambio b { font-size: 24px; font-weight: 700; color: var(--d-cambio); font-variant-numeric: tabular-nums; }
.demo-falta { display: block; font-size: 13px; font-weight: 600; color: var(--d-ambar-tinta); }
.demo-fiado__clientes { display: grid; gap: 6px; margin-bottom: 10px; }
.demo-cliente-op {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    min-height: 48px; padding: 6px 10px;
    border: 2px solid var(--d-borde); border-radius: 8px;
    background: var(--d-tarjeta); text-align: left;
}
.demo-cliente-op[aria-checked="true"] { border-color: var(--d-azul); background: var(--d-azul-claro); }
.demo-cliente-op__nombre { font-weight: 500; }
.demo-cliente-op__saldo { font-size: 13px; font-weight: 600; color: var(--d-rojo); font-variant-numeric: tabular-nums; }
.demo-fiado__cupo {
    display: grid; gap: 4px; padding: 10px 12px;
    border-radius: 8px; background: var(--d-suave); font-size: 13px;
}
.demo-fiado__cupo p { display: flex; justify-content: space-between; gap: 8px; }
.demo-fiado__cupo b { font-variant-numeric: tabular-nums; }
.demo-pago__ok .demo-pago__conf { display: grid; line-height: 1.15; text-align: left; }
.demo-pago__ok { justify-content: center; font-weight: 700; }

/* comprovante */
.demo-recibo__titulo { display: flex; align-items: center; gap: 8px; }
.demo-recibo__titulo .di { width: 18px; height: 18px; color: var(--d-azul); }
.demo-recibo__sub { margin: -2px 0 10px; font-size: 12px; color: var(--d-gris); }
.demo-papel {
    padding: 12px;
    border: 1px solid var(--d-borde); border-radius: 8px;
    background: #FFFFFF; color: #000000;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 12px; line-height: 1.5;
}
.demo-papel hr { margin: 7px 0; border: 0; border-top: 1px dashed #000000; }
.demo-papel__tienda { font-size: 14px; font-weight: 700; text-align: center; }
.demo-papel__centro { text-align: center; }
.demo-papel__tit { font-size: 14px; font-weight: 700; text-align: center; letter-spacing: 0.02em; }
.demo-papel__item + .demo-papel__item { margin-top: 6px; padding-top: 6px; border-top: 1px dotted #9AA0A6; }
.demo-papel__nom { font-weight: 700; }
.demo-papel__fila { display: flex; justify-content: space-between; gap: 8px; }
.demo-papel__total { font-size: 16px; font-weight: 700; text-align: right; }
.demo-papel__aviso { font-size: 11px; font-weight: 700; text-align: center; letter-spacing: 0.03em; }
.demo-papel__pie { font-size: 10px; text-align: center; color: #333333; }
.demo-papel__gracias { margin-top: 8px !important; text-align: center; }
.demo-recibo__imp { display: grid; gap: 6px; margin-top: 12px; }
.demo-recibo__imptit { font-size: 12px; font-weight: 600; color: var(--d-gris); }
.demo-recibo__impbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-recibo__impbtns .demo-btn { min-height: 38px; font-size: 13px; }

/* ficha do produto */
.demo-ficha__cab { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 10px; }
.demo-ficha__img {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 52px; height: 52px; border-radius: 12px;
    background: var(--d-azul-claro); color: var(--d-azul);
}
.demo-ficha__img .di { width: 24px; height: 24px; }
.demo-ficha__titulos { display: grid; gap: 6px; min-width: 0; flex: 1 1 auto; }
.demo-ficha__titulos .demo-dlg__titulo { font-size: 18px; }
.demo-ficha__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-ficha .demo-cerrar { margin-top: -2px; }
.demo-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.demo-kpi {
    display: grid; gap: 2px; align-content: start;
    padding: 10px 12px; border: 1px solid var(--d-borde); border-radius: 12px; background: var(--d-tarjeta);
}
.demo-kpi--precio { border-color: rgba(43, 150, 222, 0.2); background: #EBF3F7; }
.demo-kpi--precio b { color: var(--d-azul); }
.demo-kpi--ancho { grid-column: 1 / -1; }
.demo-kpi b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-kpi__etq { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--d-gris); }
.demo-kpi__min { font-size: 11px; color: var(--d-gris); }
.demo-queda { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--d-borde); border-radius: 12px; background: var(--d-tarjeta); }
.demo-queda__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.demo-queda__nums { white-space: nowrap; }
.demo-queda__valor { font-size: 17px; font-weight: 700; color: var(--d-ganancia); font-variant-numeric: tabular-nums; }
.demo-queda__pct { margin-left: 6px; font-size: 12px; color: var(--d-gris); }
.demo-queda__nota { font-size: 12px; color: var(--d-gris); }

/* abas internas das telas (sem ação na prévia) */
.demo-subabas {
    display: flex; gap: 4px; padding: 4px; margin-bottom: 12px;
    border-radius: 6px; background: var(--d-suave);
    overflow: hidden; white-space: nowrap;
    font-size: 14px; font-weight: 500; color: var(--d-gris);
}
.demo-subabas > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 4px; flex: 0 0 auto; }
.demo-subabas > span .di { width: 15px; height: 15px; }
.demo-subabas .is-activa { background: var(--d-fondo); color: var(--d-tinta); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.demo-subabas i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--d-gris); }
.demo-subabas__valor { padding: 0 6px; border-radius: 4px; background: var(--d-azul-claro); color: var(--d-azul) !important; }
.demo-subabas--dos > span { flex: 1 1 0; justify-content: center; }

/* ------------------------------------------- 7. LISTAS (inventário, fiados) */
.demo-lista {
    border: 1px solid rgba(217, 224, 227, 0.8); border-radius: 12px;
    background: var(--d-tarjeta); overflow: hidden;
}
.demo-lista__cab {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 8px 16px; background: rgba(237, 240, 242, 0.3);
    border-bottom: 1px solid var(--d-borde);
    font-size: 12px; color: var(--d-gris);
}
.demo-lista__cab--fuerte { padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--d-tinta); background: var(--d-tarjeta); }
.demo-inv__cab { display: none; }
.demo-inv__busca { display: flex; gap: 8px; margin-bottom: 12px; }
.demo-fila-inv {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 28px; align-items: center; gap: 10px;
    width: 100%; padding: 8px 4px 8px 12px;
    border: 0; border-bottom: 1px solid var(--d-borde);
    background: transparent; text-align: left;
}
.demo-fila-inv:last-child { border-bottom: 0; }
.demo-fila-inv__img {
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--d-borde); border-radius: 6px;
    background: rgba(237, 240, 242, 0.3); color: #8A8F94;
}
.demo-fila-inv__img .di { width: 18px; height: 18px; }
.demo-fila-inv__info { display: grid; gap: 2px; min-width: 0; }
.demo-fila-inv__nombre { font-size: 14px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-fila-inv__sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.demo-fila-inv__nombre { white-space: normal; }
.demo-fila-inv__cat { font-size: 12px; color: var(--d-gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.demo-sello-stock.is-bajo { background: var(--d-rojo); color: #FFFFFF; }
.demo-fila-inv__costo, .demo-fila-inv__precio--pc { display: none; }
.demo-fila-inv__precio { margin-left: auto; padding-left: 6px; font-size: 14px; font-weight: 600; color: var(--d-azul); white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-fila-inv__mas { display: grid; place-items: center; color: var(--d-tinta); }
.demo-fila-inv__mas .di { width: 18px; height: 18px; }
.demo-fila-inv.is-cambio { animation: demo-cambio 1.6s ease-out; }
@keyframes demo-cambio { 0%, 30% { background: rgba(43, 150, 222, 0.14); } 100% { background: transparent; } }
@media (hover: hover) and (pointer: fine) {
    .demo-fila-inv:hover, .demo-fila-cli:hover { background: rgba(237, 240, 242, 0.5); }
}

/* fiados */
.demo-resumen {
    display: grid; gap: 2px;
    padding: 16px; margin-bottom: 12px;
    border: 1px solid rgba(217, 224, 227, 0.8); border-radius: 12px; background: var(--d-tarjeta);
}
.demo-resumen__etq { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--d-gris); }
.demo-resumen__heroi { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--d-rojo); font-variant-numeric: tabular-nums; }
.demo-resumen__sub { font-size: 12px; color: var(--d-gris); }
.demo-resumen__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 10px; }
.demo-resumen__grid p { display: grid; }
.demo-resumen__k { font-size: 12px; color: var(--d-gris); }
.demo-resumen__grid b { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-resumen__barra { display: block; height: 10px; margin-top: 12px; border-radius: 9999px; background: var(--d-suave); overflow: hidden; }
.demo-resumen__barra i { display: block; height: 100%; width: 100%; background: var(--d-ambar); border-radius: inherit; }
.demo-resumen__barra--cli { background: var(--d-rojo); }
.demo-resumen__barra--cli i { background: var(--d-verde); border-radius: 0; }
.demo-resumen__leyenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px !important; font-size: 12px; color: var(--d-gris); }
.demo-fila-cli {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px;
    width: 100%; padding: 10px 16px;
    border: 0; border-bottom: 1px solid var(--d-borde);
    background: transparent; text-align: left;
}
.demo-fila-cli:last-child { border-bottom: 0; }
.demo-avatar-cli {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(220, 40, 40, 0.1); color: var(--d-rojo);
    font-size: 12px; font-weight: 600;
}
.demo-avatar-cli--g { width: 48px; height: 48px; font-size: 15px; }
.is-al-dia .demo-avatar-cli, .demo-avatar-cli.is-al-dia { background: rgba(33, 196, 93, 0.12); color: var(--d-cambio); }
.demo-fila-cli__info { display: grid; min-width: 0; }
.demo-fila-cli__nombre { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-fila-cli__sub { font-size: 12px; color: var(--d-gris); min-height: 1em; }
.demo-fila-cli__saldo { font-size: 14px; font-weight: 600; color: var(--d-rojo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-al-dia .demo-fila-cli__saldo { color: #333333; }
.demo-fila-cli__flecha { width: 16px; height: 16px; color: #8A8F94; }
.demo-fila-cli.is-cambio { animation: demo-cambio 1.6s ease-out; }

/* ficha do cliente */
.demo-cli__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.demo-cli__cab .demo-icono-btn { width: 36px; height: 36px; margin-left: -8px; }
.demo-cli__titulos { display: grid; min-width: 0; }
.demo-cli__nombre { font-size: 18px; font-weight: 600; line-height: 1.25; }
.demo-cli__barrio { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--d-gris); }
.demo-cli__barrio .di { width: 13px; height: 13px; }
.demo-resumen--cli .demo-resumen__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-resumen--cli .demo-resumen__grid b { font-size: 14px; }
.demo-cli__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.demo-cli__acciones .demo-btn { min-height: 44px; padding: 0 8px; font-weight: 600; }
.demo-cli__acciones .di { width: 18px; height: 18px; }
.demo-mov {
    display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--d-borde);
}
.demo-mov:last-child { border-bottom: 0; }
.demo-mov__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(220, 40, 40, 0.1); color: var(--d-rojo); }
.demo-mov__ico .di { width: 16px; height: 16px; }
.demo-mov.is-abono .demo-mov__ico { background: rgba(33, 196, 93, 0.12); color: var(--d-cambio); }
.demo-mov__info { display: grid; gap: 1px; min-width: 0; }
.demo-mov__desc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.3; }
.demo-mov__fecha { font-size: 11px; color: var(--d-gris); }
.demo-mov__valor { font-size: 13px; font-weight: 600; color: var(--d-rojo); white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-mov.is-abono .demo-mov__valor { color: var(--d-cambio); }
.demo-abono__debe { margin-bottom: 12px !important; font-size: 14px; color: var(--d-gris); }

/* --------------------------------------------- 8. GANÂNCIA (o Início) */
.demo-gan__top { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.demo-gan__top .demo-icono-btn { width: 40px; height: 40px; }
.demo-periodo {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 12px;
    border: 1px solid var(--d-borde); border-radius: 8px; background: var(--d-tarjeta);
    font-size: 13px; color: var(--d-gris);
}
.demo-periodo b { color: var(--d-tinta); font-weight: 600; }
.demo-gan__tarjetas { display: grid; gap: 12px; margin-bottom: 12px; }
.demo-tarjeta {
    display: grid; gap: 2px; align-content: start;
    padding: 16px; border: 1px solid rgba(217, 224, 227, 0.8); border-radius: 12px; background: var(--d-tarjeta);
}
.demo-tarjeta--azul { border: 0; background: linear-gradient(135deg, #2B96DE 0%, #1D7BB9 100%); color: #FFFFFF; }
.demo-tarjeta__etq { font-size: 14px; color: #555555; }
.demo-tarjeta--azul .demo-tarjeta__etq, .demo-tarjeta--azul .demo-tarjeta__sub { color: rgba(255, 255, 255, 0.86); }
.demo-tarjeta__valor { font-size: 24px; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.demo-tarjeta__sub { font-size: 13px; color: var(--d-gris); }
.demo-tarjeta__sub b { color: var(--d-tinta); font-weight: 600; }
.demo-tarjeta__rent { margin-top: 10px !important; font-size: 12px; color: var(--d-gris); }
.demo-tarjeta__rent b { color: var(--d-tinta); font-weight: 600; }
.demo-barra-gan, .demo-barra-formas { display: flex; gap: 2px; height: 6px; margin-top: 6px; border-radius: 9999px; overflow: hidden; }
.demo-barra-gan i { display: block; height: 100%; background: var(--d-azul); flex: 1 1 auto; }
.demo-barra-gan i:first-child { background: #CFCFCF; flex: 0 0 auto; }
.demo-barra-formas i { display: block; height: 100%; flex: 0 0 auto; }
.demo-barra-formas i:nth-child(1) { background: var(--d-azul); }
.demo-barra-formas i:nth-child(2) { background: rgba(43, 150, 222, 0.6); }
.demo-barra-formas i:nth-child(3) { background: rgba(43, 150, 222, 0.3); }
.demo-tarjeta__leyenda { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px !important; font-size: 12px; color: var(--d-gris); }
.demo-tarjeta__leyenda b { color: var(--d-tinta); font-weight: 600; }
.demo-ventas__cols { display: none; }
.demo-tarjeta--cant { display: none; }
.demo-venta { border-bottom: 1px solid var(--d-borde); }
.demo-venta:last-child { border-bottom: 0; }
.demo-venta > summary {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 10px 16px; cursor: pointer; list-style: none;
}
.demo-venta > summary::-webkit-details-marker { display: none; }
.demo-venta__izq { display: grid; min-width: 0; }
.demo-venta__tit { font-size: 14px; font-weight: 500; }
.demo-venta__sub { font-size: 12px; color: var(--d-gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-venta__der { display: grid; justify-items: end; line-height: 1.3; }
.demo-venta__total { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.demo-venta__costo { font-size: 11px; color: var(--d-gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-venta__gan { font-size: 12px; font-weight: 600; color: var(--d-cambio); white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-venta__det { display: grid; gap: 6px; padding: 0 16px 12px; }
.demo-venta__item { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #333333; }
.demo-venta__item-v { display: inline-flex; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-venta__item-g { color: var(--d-cambio); font-weight: 600; }
.demo-venta.is-nueva > summary { animation: demo-cambio 2.2s ease-out; }

/* ------------------------------------------------ 9. O COMPUTADOR (≥ 75rem) */
@media (min-width: 75rem) {
    .demo-aparato {
        padding: 10px 10px 12px;
        border-radius: 1rem;
    }
    /* o pé do monitor */
    .demo-aparato::after {
        content: ""; position: absolute; left: 50%; bottom: -22px; translate: -50% 0;
        width: 26%; height: 22px;
        background: linear-gradient(180deg, #16283A 0%, #0A1622 100%);
        border: 1px solid rgba(255, 255, 255, 0.1); border-top: 0;
        border-radius: 0 0 0.6rem 0.6rem;
    }
    .demo-pie { margin-top: 2rem; }
    .demo-app {
        grid-template-rows: minmax(0, 1fr);
        grid-template-columns: 60px minmax(0, 1fr);
        grid-template-areas: "lateral pantalla";
        height: clamp(430px, calc(100svh - 300px), 540px);
        border-radius: 0.45rem;
        font-size: 13px;
    }
    .demo-cabecera, .demo-barra-nav { display: none; }
    .demo-lateral {
        grid-area: lateral;
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        padding: 10px 0 8px; overflow: hidden;
        background: var(--d-tarjeta);
        border-right: 1px solid var(--d-borde);
    }
    .demo-lateral__logo { flex: 0 0 auto; width: 30px; height: 30px; margin-bottom: 6px; }
    .demo-lateral__tienda { flex: 0 0 auto; width: 32px; height: 32px; margin-bottom: 8px; border-radius: 8px; font-size: 14px; }
    .demo-lateral__item {
        display: grid; place-items: center; flex: 0 0 auto;
        width: 40px; height: 36px; border: 0; border-radius: 8px;
        background: transparent; color: #5C6166;
    }
    .demo-lateral__item .di { width: 18px; height: 18px; stroke-width: 1.8; }
    .demo-lateral__item[aria-current="true"] { background: var(--d-azul-claro); color: var(--d-azul); }
    .demo-lateral__item--quieto { cursor: default; opacity: 0.8; }
    .demo-lateral__item--aviso { position: relative; }
    .demo-lateral__item--aviso::after { content: ""; position: absolute; top: 6px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--d-ambar); }
    .demo-lateral__sep { flex: 0 0 auto; width: 24px; height: 1px; margin: 4px 0; background: var(--d-borde); }
    .demo-lateral__pie { display: grid; gap: 2px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--d-borde); }
    @media (hover: hover) and (pointer: fine) {
        button.demo-lateral__item:hover { background: var(--d-suave); color: var(--d-tinta); }
    }

    .demo-v {
        grid-template-columns: minmax(0, 1fr) clamp(270px, 37%, 320px);
        grid-template-rows: 48px auto minmax(0, 1fr);
        grid-template-areas: "caja caja" "busca carrito" "grilla carrito";
    }
    .demo-v__caja { height: 48px; padding: 0 12px; gap: 12px; }
    .demo-v__num { display: inline-flex; align-items: center; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #444444; }
    .demo-v__num .di { width: 13px; height: 13px; }
    .demo-v__op { display: none; }
    .demo-v__iconos { display: none; }
    .demo-v__botones { display: flex; gap: 6px; margin-left: auto; }
    .demo-mini-btn {
        display: inline-flex; align-items: center; gap: 5px;
        height: 30px; padding: 0 10px;
        border: 1px solid var(--d-borde); border-radius: 8px; background: var(--d-fondo);
        font-size: 13px; font-weight: 500;
    }
    .demo-mini-btn .di { width: 14px; height: 14px; }
    .demo-mini-btn--rojo { background: #F0A8A8; border-color: #F0A8A8; color: #FFFFFF; }
    .demo-v__busca { padding: 12px; gap: 8px; }
    .demo-v__busca .demo-campo { height: 42px; }
    .demo-v__etiqueta { display: none; }
    .demo-v__busca .demo-icono-btn { width: 42px; height: 42px; }
    .demo-grilla { padding: 0 12px 12px; gap: 10px; }
    .demo-v__barra { display: none !important; }

    .demo-carrito {
        grid-area: carrito;
        display: flex; flex-direction: column; min-height: 0;
        background: var(--d-tarjeta);
        border-left: 1px solid var(--d-borde);
    }
    .demo-carrito__acciones {
        display: grid; grid-template-columns: 26px repeat(4, minmax(0, 1fr)); align-items: center;
        height: 48px; padding: 0 6px;
        background: rgba(237, 240, 242, 0.5);
        border-bottom: 1px solid var(--d-borde);
    }
    .demo-carrito__accion {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        height: 44px; padding: 0; border: 0; border-radius: 6px;
        background: transparent; color: #444444;
        font-size: 10.5px; font-weight: 500; white-space: nowrap;
    }
    .demo-carrito__accion .di { width: 15px; height: 15px; }
    .demo-carrito__accion--rojo { color: var(--d-rojo); }
    .demo-carrito__accion--plegar .di { width: 16px; height: 16px; color: var(--d-tinta); }
    button.demo-carrito__accion:disabled { opacity: 0.45; cursor: default; }
    .demo-carrito__lineas {
        flex: 1 1 auto; min-height: 0; overflow-y: auto;
        display: grid; gap: 8px; align-content: start;
        padding: 10px;
        scrollbar-width: thin;
    }
    .demo-carrito__estatico { display: grid; gap: 8px; }
    .demo-linea {
        display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 6px; align-items: start;
        padding: 8px 10px;
        border: 1px solid var(--d-borde); border-radius: 12px; background: var(--d-tarjeta);
    }
    .demo-linea__n {
        display: grid; place-items: center; width: 24px; height: 24px;
        border-radius: 8px; background: var(--d-azul-claro); color: var(--d-azul);
        font-size: 11px; font-weight: 600;
    }
    .demo-linea__info { display: grid; min-width: 0; line-height: 1.25; }
    .demo-linea__nombre { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .demo-linea__unit { font-size: 11px; color: var(--d-gris); }
    .demo-linea__valor { font-size: 13px; font-weight: 700; color: var(--d-azul); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .demo-linea__ctrl {
        grid-column: 1 / -1;
        display: flex; align-items: center; gap: 6px;
        padding-top: 6px; border-top: 1px solid var(--d-suave);
    }
    .demo-linea__q {
        display: grid; place-items: center; min-width: 40px; height: 28px;
        border: 1px solid var(--d-borde); border-radius: 8px;
        font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
    }
    .demo-linea__extra { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; color: var(--d-tinta); }
    .demo-linea__quitar { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--d-rojo); }
    .demo-carrito__vacio { display: grid; justify-items: center; gap: 4px; padding: 36px 16px; text-align: center; color: var(--d-gris); }
    .demo-carrito__vacio .di { width: 34px; height: 34px; margin-bottom: 6px; color: #B7BDC2; }
    .demo-carrito__vacio p:first-of-type { font-weight: 600; color: #333333; }
    .demo-carrito__vacio-ayuda { font-size: 12px; }
    .demo-carrito__pie { display: grid; gap: 8px; padding: 10px; border-top: 1px solid var(--d-borde); }
    .demo-carrito__sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--d-gris); }
    .demo-carrito__sub .di { width: 14px; height: 14px; }
    .demo-carrito__subv { margin-left: auto; color: var(--d-tinta); font-variant-numeric: tabular-nums; }
    .demo-carrito__total {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 10px; border-radius: 8px; background: rgba(237, 240, 242, 0.45);
    }
    .demo-carrito__total .di { width: 16px; height: 16px; }
    .demo-carrito__total b { font-size: 15px; font-weight: 700; }
    .demo-carrito__total span { margin-left: auto; font-size: 22px; font-weight: 700; color: var(--d-azul); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .demo-carrito .demo-btn--enorme { min-height: 46px; font-size: 14px; }

    .demo-capa { padding: 18px; }
    .demo-capa.is-hoja { padding: 18px; align-items: center; }
    .demo-dlg { max-width: 460px; }
    .demo-formas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .demo-formas .demo-forma { justify-content: center; padding: 0 6px; font-size: 13px; }
    .demo-formas--abono { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .demo-recibo { max-width: 400px; }

    .demo-vista { padding: 16px 18px 20px; }
    .demo-inv__cab { display: grid; grid-template-columns: minmax(0, 1fr) 96px 110px 28px; padding-left: 64px; }
    .demo-inv__cab span:nth-child(2), .demo-inv__cab span:nth-child(3) { text-align: right; }
    .demo-fila-inv { grid-template-columns: 40px minmax(0, 1fr) 96px 110px 28px; }
    .demo-fila-inv__costo { display: block; font-size: 13px; color: #444444; text-align: right; font-variant-numeric: tabular-nums; }
    .demo-fila-inv__sub .demo-fila-inv__precio { display: none; }
    .demo-fila-inv__precio--pc { display: block; text-align: right; }
    .demo-tarjeta--cant { display: grid; }
    .demo-dlg__cab { justify-content: flex-start; padding: 14px 48px 6px 16px; text-align: left; }
    .demo-app .demo-resumen { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
    .demo-app .demo-resumen > :not(.demo-resumen__grid) { grid-column: 1; }
    .demo-app .demo-resumen__grid { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(3, auto); margin-top: 0; align-self: center; text-align: right; }
    .demo-app .demo-resumen__barra, .demo-app .demo-resumen__leyenda { grid-column: 1 / -1 !important; }
    .demo-app .demo-resumen--cli .demo-resumen__grid { grid-template-columns: repeat(3, auto); }
    .demo-cli__acciones { max-width: 420px; }
    .demo-gan__tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .demo-tarjeta { padding: 14px; }
    .demo-tarjeta__valor { font-size: 21px; }
    .demo-venta > summary { grid-template-columns: minmax(0, 1fr) auto; }
    .demo-venta__der { grid-template-columns: 104px 104px 104px; align-items: baseline; text-align: right; }
    .demo-venta__pref { display: none; }
    .demo-venta__costo { font-size: 13px; order: 0; }
    .demo-venta__gan { font-size: 13px; }
    .demo-venta__total, .demo-venta__costo, .demo-venta__gan { justify-self: end; }
    .demo-ventas__cols { display: grid; grid-template-columns: 104px 104px 104px; text-align: right; font-size: 12px; font-weight: 500; color: var(--d-gris); }
    .demo-lista__cab--fuerte { align-items: center; }
}

/* ------------------------------------------- 10. RÉPLICAS DENTRO DA PÁGINA
   Para o que não tem captura limpa em espanhol (fiados e clientes ainda têm
   texto em português no app), a mesma tela redesenhada com o espanhol que o
   app vai mostrar. É ilustração: role="img" e conteúdo aria-hidden. */
.co-mini {
    --d-azul: #2B96DE; --d-fondo: #F6F8F9; --d-tarjeta: #FEFFFF; --d-tinta: #000000;
    --d-gris: #666666; --d-suave: #EDF0F2; --d-borde: #D9E0E3; --d-rojo: #DC2828;
    --d-verde: #21C45D; --d-cambio: #16A34A; --d-ambar: #F59F0A;
    display: block;
    padding: 12px;
    border-radius: 14px;
    background: var(--d-fondo);
    color: var(--d-tinta);
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 13px; line-height: 1.45; text-align: left;
}
.co-mini__app { display: grid; gap: 10px; }
.co-mini .demo-resumen { margin: 0; padding: 12px 14px; }
.co-mini .demo-resumen__heroi { font-size: 24px; }
.co-mini .demo-fila-cli { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 8px 12px; cursor: default; }
.co-mini .demo-avatar-cli { width: 32px; height: 32px; font-size: 11px; }
.co-mini .co-mini__cli { grid-template-columns: minmax(0, 1fr) auto; }
.co-mini__chip {
    display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9999px;
    border: 1px solid #9BC9EC; color: #1D7BB9; background: #EEF6FC;
    font-size: 10px; font-style: normal; font-weight: 600; line-height: 1.5; vertical-align: 1px;
}
.co-mini__chip--vip { border-color: #F3C77A; color: #B45309; background: #FFF6E5; }
.co-mini__total { color: var(--d-tinta) !important; }
.co-mini--grande { padding: 16px; }
.co-mini--grande .demo-resumen__heroi { font-size: 28px; }

/* --------------------------------------- 11. PRÉVIA DAS PÍLULAS: a captura */
.previa__item .co-captura {
    display: block; width: 100%; height: auto; max-height: 15rem;
    margin: 0.25rem 0 0.875rem;
    border: 1px solid var(--linha); border-radius: var(--r-sm);
    background: #F6F8F9;
    object-fit: cover; object-position: 50% 0;
}
.previa__item .co-captura.co-mini { max-height: none; overflow: hidden; }
/* o que importa nas capturas cortadas fica embaixo (o troco, o ovo acabando);
   na do caixa e na da ganancia do dia, em cima (os contadores do carrinho, a ganancia) */
.previa__item img.co-captura { object-position: 50% 100%; }
.previa__item img.co-captura[src*="pantalla-caja"],
.previa__item img.co-captura[src*="pantalla-ganancia-dia"] { object-position: 50% 0; }
/* a captura vai na janela que abre no toque; o cartão que abre ao passar o mouse
   leva o ícone da pílula, como no Brasil. Com a captura dentro, o cartão chegava a
   453 px e, em 1366 x 768, não cabia nem acima nem abaixo da pílula: cobria a
   pílula e o menu fixo. */
.previa__item .previa__icone.co-icone-flutua { display: none; }
.previa-flutua .previa__item .previa__icone.co-icone-flutua { display: block; }
.previa-flutua .co-captura { display: none; }

/* -------------------------------------------- 12. SEÇÕES DA HOME (co-) */
/* o que o caderno não diz */
.co-resuelve { display: grid; gap: var(--sp-3); }
.co-enemigo {
    display: grid; align-content: start; gap: var(--sp-2);
    padding: var(--sp-5);
    border-top: 3px solid var(--noite);
    background: var(--nevoa);
    border-radius: 0 0 var(--r-md) var(--r-md);
}
.co-enemigo p { margin: 0; color: var(--tinta-2); font-size: var(--t-md); }
.co-enemigo__nombre {
    margin: 0;
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: calc(var(--t-lg) * var(--display-k)); line-height: 0.95; color: var(--noite);
}
.co-enemigo .co-enemigo__salida { margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--linha-forte); color: var(--azul); font-weight: 600; font-size: var(--t-sm); }
@media (min-width: 48rem) {
    .co-resuelve { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
}
.co-cifras {
    display: grid; gap: 0;
    margin-top: var(--sp-7);
    border-top: 1px solid var(--linha);
}
.co-cifra {
    display: grid; gap: var(--sp-2);
    margin: 0; padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--linha);
}
@media (min-width: 40rem) {
    .co-cifra { grid-template-columns: 7.25rem minmax(0, 1fr); align-items: baseline; gap: var(--sp-4); }
}
.co-cifra__valor {
    margin: 0;
    font-family: var(--display); font-weight: 800;
    font-size: calc(var(--t-xl) * var(--display-k) * 1.15); line-height: 0.95; color: var(--azul);
    font-variant-numeric: tabular-nums;
}
.co-cifra__texto { margin: 0 0 var(--sp-2); font-size: var(--t-md); color: var(--tinta); max-width: 52ch; }
.co-cifra__fuente { margin: 0; font-size: var(--t-xs); color: var(--tinta-3); }
.co-cifra__fuente a { color: var(--tinta-2); }
@media (min-width: 60rem) {
    .co-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); border-top: 0; }
    .co-cifra { border-top: 1px solid var(--linha); border-bottom: 0; }
}

/* o momento usa uma tela de verdade, bem apagada atrás do texto: é textura,
   não leitura (o véu do Brasil, feito para foto, deixava os números à mostra) */
.co-momento__foto { object-position: 50% 0; filter: blur(2px) saturate(0.7); transform: scale(1.03); }
.momento:has(.co-momento__foto)::after {
    background: linear-gradient(0deg, rgba(6, 18, 31, 0.97) 0%, rgba(6, 18, 31, 0.88) 50%, rgba(6, 18, 31, 0.76) 100%);
}

/* painéis do "sistema por dentro" com capturas do app */
.painel__figura.co-figura {
    display: grid; place-items: center;
    padding: clamp(0.75rem, 2.4vw, 1.5rem);
    background: linear-gradient(160deg, #E8F3FB 0%, #F6F8F9 70%);
}
.painel__figura.co-figura img {
    width: 100%; max-width: 30rem; height: auto;
    aspect-ratio: auto; object-fit: contain;
    border: 1px solid var(--linha); border-radius: var(--r-sm);
    box-shadow: 0 18px 40px -22px rgba(6, 18, 31, 0.35);
    background: #F6F8F9;
}
.painel__figura.co-figura--mini .co-mini { width: 100%; max-width: 30rem; box-shadow: 0 18px 40px -22px rgba(6, 18, 31, 0.35); border: 1px solid var(--linha); }
.painel__figura.co-figura--icono img { width: min(14rem, 60%); border: 0; box-shadow: none; background: transparent; }

/* como funciona: uma sequência de verdade, então numerada */
.co-pasos {
    list-style: none; margin: 0 auto; padding: 0;
    display: grid; gap: var(--sp-5);
    max-width: 64rem;
    counter-reset: paso;
}
.co-paso { position: relative; display: grid; gap: var(--sp-2); padding-left: 4.25rem; }
.co-paso p { margin: 0; color: var(--tinta-2); }
.co-paso__n {
    position: absolute; left: 0; top: -0.2rem;
    display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--noite); color: var(--acento);
    font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1;
}
.co-paso__titulo {
    margin: 0;
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: calc(var(--t-lg) * var(--display-k)); line-height: 0.95;
}
@media (min-width: 56rem) {
    .co-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
    .co-paso { padding-left: 0; padding-top: 4.25rem; }
    .co-paso__n { top: 0; }
    .co-paso:not(:last-child)::after {
        content: ""; position: absolute; top: 1.5rem; left: 3.75rem; right: calc(var(--sp-6) * -1 + 0.75rem);
        height: 2px; background: repeating-linear-gradient(90deg, var(--linha-forte) 0 8px, transparent 8px 14px);
    }
}

/* para quem: os segmentos da Colômbia, sem foto (não há loja colombiana para fotografar) */
.co-segmentos {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-md);
    overflow: hidden;
}
.co-segmento {
    display: grid; align-content: start; gap: var(--sp-2);
    height: 100%; padding: var(--sp-5);
    background: var(--noite); color: var(--branco); text-decoration: none;
    transition: background-color 0.2s ease;
}
.co-segmento__nombre {
    font-family: var(--display); font-weight: 800; text-transform: uppercase;
    font-size: calc(var(--t-lg) * var(--display-k) * 1.1); line-height: 0.95; color: var(--branco);
    text-wrap: balance;
}
.co-segmento__texto { font-size: var(--t-sm); color: rgba(255, 255, 255, 0.74); }
.co-segmento__ir { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--t-sm); font-weight: 600; color: var(--acento); }
.co-segmento__ir svg { transition: transform 0.2s var(--mola); }
.co-segmento:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
    .co-segmento:hover { background: var(--noite-2); }
    .co-segmento:hover .co-segmento__ir svg { transform: translateX(4px); }
}
@media (min-width: 40rem) { .co-segmentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .co-segmentos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* sem factura: a frase de um lado, a regra do outro */
.co-honesto { display: grid; gap: var(--sp-6); align-items: start; }
.co-honesto__texto .display--secao { margin-bottom: var(--sp-4); }
.co-honesto__texto .grande { color: var(--tinta); }
.co-honesto__caja {
    padding: var(--sp-5);
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--r-md);
}
.co-honesto__caja p { font-size: var(--t-sm); color: var(--tinta-2); }
.co-honesto__titulo { margin: 0 0 var(--sp-2); font-size: var(--t-lg); font-weight: 700; }
.co-honesto__lista { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.co-honesto__lista li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: start; font-size: var(--t-sm); line-height: 1.45; }
.co-honesto__lista svg { margin-top: 0.2rem; color: var(--azul); }
.co-honesto__simple { padding: var(--sp-3); border-radius: var(--r-sm); background: #FFF6E5; color: #7A3E06 !important; font-weight: 600; }
.co-honesto__nota { margin: 0; font-size: var(--t-xs) !important; color: var(--tinta-3) !important; }
@media (min-width: 60rem) {
    .co-honesto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-7); }
}

/* preços: dois planos, o recomendado à direita e maior */
.planos.co-planos { grid-template-columns: minmax(0, 1fr); max-width: 54rem; margin-inline: auto; }
@media (min-width: 48rem) {
    .planos.co-planos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
}
.co-planos__nota { text-align: center; max-width: 46rem; margin: var(--sp-5) auto 0; }
/* "Actualizado el ..." = o dateModified da home (o build mantém o <time data-actualizado>) */
.co-planos__actualizado { text-align: center; margin: var(--sp-2) auto 0; }
/* no Brasil a descrição dos planos laterais some no celular; aqui ela traz o preço anual */
.co-planos .plano:not(.plano--destaque) .plano__desc { display: block; }

@media (prefers-reduced-motion: reduce) {
    .demo-prod, .demo-btn, .demo-aba { transition: none; }
    .demo-prod.is-pulso .demo-prod__cuenta { animation: none; }
    .demo-fila-inv.is-cambio, .demo-fila-cli.is-cambio, .demo-venta.is-nueva > summary { animation: none; }
}