/* ============================================================================
   CHAMÁN DIGITAL — SISTEMA DE DISEÑO  ·  HOJA v15
   ----------------------------------------------------------------------------
   CÓMO ESTÁ ORGANIZADO (y dónde tocar cada cosa)

   1 · TOKENS  ........  :root, aquí abajo. Es la única capa que se edita para
                         cambios globales. Cambiar un token cambia toda la app.
   2 · BASE  ..........  reset, tipografía raíz, foco de teclado, .wrap, .screen
   3 · COMPONENTES  ...  agrupados por pantalla, con banderas de sección
                         HOME · GUÍA · RÓTULO · TICKET · CATÁLOGO

   REGLAS DEL SISTEMA
   · El papel NUNCA se pinta. El color va dentro de las piezas: tarjetas,
     botones, badges. Superficie neutra, tipografía casi negra.
   · VERDE = semántico. --select significa seleccionado / activo / aprobado.
     No usarlo como decoración. --wa es exclusivo de WhatsApp.
   · ÁMBAR = marca pequeña. Badges y avisos. Nunca superficies ni degradados.
   · PRIMARIO = --ink (casi negro). Es el botón de acción, no el verde.
   · Radios CONCÉNTRICOS: un hijo dentro de una tarjeta usa el radio del padre
     menos su padding. Por eso la escala --r-xs … --r-pill.

   AL PUBLICAR
   · index.html y estilos.css viajan JUNTOS.
   · Subir el ?v= del <link> en index.html o Cloudflare sirve la hoja vieja.

   PENDIENTE DE MIGRAR (excepciones fuera del sistema, documentadas a propósito)
   · Los font-size siguen declarados por componente; la escala --fs-* ya existe
     pero todavía no los gobierna.
   · Quedan 22 atributos style="" sueltos en index.html.
   ============================================================================ */

    :root{
      /* ── Superficies · gris neutro clarísimo. Ni azul clínico ni ámbar de
         comida rápida: el papel no se pinta, el color va dentro de las piezas. ── */
      --paper:#F1F2F4; --surface:#FFFFFF; --surface-2:#F8F9FB; --line:#E3E5EA;

      /* ── Tinta · casi negro neutro ── */
      --ink:#141519; --ink-soft:#5A5C66; --ink-faint:#8F919B;

      /* ── Superficie oscura · autoridad para barras y hero ── */
      --dark:#141519; --dark-2:#22242C; --on-dark:#FFFFFF; --on-dark-soft:#A9ACB6;

      /* ── Marca ── */
      --blue:#1B4FD8;         /* estructura, enlaces, confianza */
      --amber:#D97706;        /* marca PEQUEÑA: badges y avisos. Nunca superficies. */
      --amber-soft:#FDF1DE;   /* fondo de avisos y badges */
      --amber-line:#F2D9A8;
      --wa:#25D366;           /* RESERVADO: sólo WhatsApp. */
      --select:#10B981;       /* SEMÁNTICO: seleccionado, activo, aprobado. */
      --select-soft:#E7F8F1; --select-line:#9EE7CC;
      --green:#0E9E6E; --green-deep:#0B7F59;
      --gold:var(--amber);    /* alias heredado */
      --grad:linear-gradient(135deg,var(--dark),var(--dark-2));

      /* ── Radios concéntricos. Los valores salen de los que YA usaba el archivo,
         no de una escala inventada: 8 / 12 / 16 / 20 / pastilla. ── */
      --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:20px; --r-pill:999px;

      /* ── Capas. Antes eran números mágicos repartidos por el archivo. ── */
      --z-base:1; --z-raised:2; --z-sticky:20; --z-bar:60; --z-overlay:200;

      /* ── Foco de teclado ── */
      --focus:0 0 0 3px rgba(27,79,216,.32);

      /* ── Espaciado, múltiplos de 4. RESERVADOS: todavía no gobiernan
         los márgenes, que siguen declarados por componente. ── */
      --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;

      /* ── Elevación cálida: las sombras azules delataban el frío ── */
      --shadow:0 18px 44px -20px rgba(40,30,20,.26);
      --shadow-sm:0 8px 22px -12px rgba(40,30,20,.16);
      --shadow-bar:0 14px 34px rgba(40,30,20,.16);

      /* ── Familias. Cambiar de tipografía es cambiar ESTA línea, no 45 reglas.
         Bricolage Grotesque es variable con eje opsz: la forma de la letra se
         ajusta al tamaño, en vez de escalar el mismo dibujo. ── */
      --font-display:'Bricolage Grotesque',system-ui,sans-serif;
      --font-ui:'Inter',system-ui,sans-serif;

      /* ── Tipografía por roles ── */
      --fs-display:clamp(30px,8.2vw,39px);  /* h1 de portada */
      --fs-title:clamp(23px,6.2vw,27px);    /* pregunta de la guía */
      --fs-h:20px; --fs-sh:18px; --fs-lg:17px;
      --fs-body:15px; --fs-sm:13px; --fs-xs:11.5px;
      /* Tracking por tamaño. Un valor fijo para todo está mal en algún lado:
         el texto grande se lee separado y el chico se lee apretado. */
      --tr-display:-.03em; --tr-tight:-.022em; --tr-body:0; --tr-small:.01em;

      /* ── Movimiento ── */
      --e-out:cubic-bezier(.22,1,.36,1);
      --t-fast:.16s; --t:.28s; --t-slow:.45s;
    }

    /* Los montos no deben bailar al cambiar de cifra. */
    .g-pay2-v, .fb-v, .g-total-v, .cat-cart-sum .v, .tk-row .r, .cat-price, .v-big
      { font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1 }
    *{box-sizing:border-box;margin:0;padding:0}
    html{-webkit-text-size-adjust:100%;overflow-x:hidden;
      /* Atmósfera de marca. Va en html, no en body ni en un pseudo-elemento:
         html siempre pinta detrás de todo y no hay z-index que pueda fallar. */
      background:
        radial-gradient(58vw 46vw at 6% -8%,   rgba(27,79,216,.28), transparent 64%),
        radial-gradient(52vw 40vw at 102% 2%,  rgba(217,119,6,.26), transparent 66%),
        radial-gradient(72vw 52vw at 46% 104%, rgba(16,185,129,.24), transparent 64%),
        var(--paper);
      background-attachment:fixed}
    body{font-family:var(--font-ui);font-optical-sizing:auto;color:var(--ink);
      background:transparent;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
    .wrap{max-width:960px;margin:0 auto;padding:0 18px;overflow-x:clip}
    :focus-visible{outline:3px solid rgba(27,79,216,.4);outline-offset:2px;border-radius:var(--r-xs)}

    header.top{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
    header.top .row{max-width:960px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:15px}
    .brand .mark{width:28px;height:28px;border-radius:var(--r-sm);background:var(--ink);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px}
    .brand .mark small{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}

    .screen{display:none;padding:18px 0 60px;overflow-x:clip}
    .screen.active{display:block;animation:fade .4s ease}
    @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

    .eyebrow{font-size:14px;font-weight:600;color:var(--ink-soft);line-height:1.3;letter-spacing:0}
    h1{font-family:var(--font-display);font-weight:800;font-size:var(--fs-display);letter-spacing:var(--tr-display);line-height:1.05;margin-top:4px;text-wrap:balance}
    .lead{font-size:var(--fs-body);color:var(--ink-soft);margin-top:9px;max-width:min(56ch,100%);overflow-wrap:anywhere}

    /* HOME: dos caminos */
    #home h1,#home .lead{text-align:center;margin-left:auto;margin-right:auto}
    #home h1{max-width:20ch}
    #home .lead{max-width:34ch;margin-top:11px;font-size:16.5px}
    .paths{display:grid;grid-template-columns:1fr;gap:11px;margin-top:14px}
    @media(min-width:720px){.paths{grid-template-columns:1fr 1fr}}
    .path{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;
      box-shadow:var(--shadow-sm);color:inherit;overflow:hidden;transition:transform .25s,box-shadow .25s}
    .path:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .path .head{display:flex;align-items:center;gap:13px}
    .path .ic{flex:none;width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;color:#fff}
    .path.guia .ic{background:var(--blue)}
    .path.cat .ic{background:var(--select)}
    .path .ic svg{width:24px;height:24px}
    .path h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);line-height:1.15}
    .path p{font-size:13.5px;color:var(--ink-soft);margin-top:7px}
    .path .g-cta{width:100%;margin-top:14px;padding:13px 20px;font-size:15px}
    .path.cat .g-cta{background:var(--ink)}

    .stub h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h);margin-top:14px}
    .stub p{font-size:14px;color:var(--ink-soft);margin-top:8px;max-width:52ch;margin-left:auto;margin-right:auto}

    .disclaimer{font-size:var(--fs-xs);letter-spacing:var(--tr-small);color:var(--ink-faint);margin-top:14px;line-height:1.5}

    /* ===== GUÍA (flujo conversacional) ===== */
    .g-progress{display:flex;gap:6px;margin:4px 0 22px;opacity:0;transition:opacity .3s}
    .g-progress.show{opacity:1}
    .g-seg{flex:1;height:3px;border-radius:var(--r-pill);background:rgba(20,21,25,.07);overflow:hidden;position:relative}
    .g-seg .fill{position:absolute;inset:0;width:0;background:var(--ink-faint);border-radius:var(--r-pill);transition:width .5s cubic-bezier(.4,0,.2,1)}
    .g-seg.done .fill,.g-seg.active .fill{width:100%}
    .g-seg.active{box-shadow:0 0 0 2px rgba(18,185,129,.18)}
    .g-step{display:none}
    .g-step.active{display:block}
    .g-back{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 0;margin-bottom:10px}
    .g-back:hover{color:var(--blue)}
    .g-q{font-family:var(--font-display);font-weight:800;font-size:var(--fs-title);letter-spacing:var(--tr-tight);line-height:1.12;margin-bottom:6px}
    .g-sub{font-size:var(--fs-body);color:var(--ink-soft);margin-bottom:20px;max-width:52ch}
    .g-opts{display:grid;grid-template-columns:1fr;gap:12px}
    @media(min-width:640px){.g-opts.two{grid-template-columns:1fr 1fr}}
    .g-opt{display:flex;align-items:center;gap:14px;text-align:left;background:var(--surface);border:1.5px solid var(--line);
      border-radius:var(--r);padding:18px;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;
      transition:transform .15s,border-color .15s,box-shadow .15s}
    .g-opt:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
    .g-opt:active{transform:scale(.99)}
    .g-opt .em{font-size:26px;flex:none;line-height:1}
    .g-opt .tx{font-family:var(--font-display);font-weight:600;font-size:15.5px;line-height:1.3}
    .g-hero-intro{text-align:center;padding:14px 0}
    .g-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;border:2px solid #fff;
      border-radius:var(--r);padding:16px 28px;font-family:var(--font-display);font-weight:700;font-size:16px;cursor:pointer;
      box-shadow:0 10px 22px -10px rgba(20,21,25,.46), inset 0 1px 0 rgba(255,255,255,.28);margin-top:18px}
    /* REVERTIR EL FILO DEL BOTÓN: para volver al contorno oscuro exterior,
       antepón un anillo de 1px en rgba(20,21,25,.16) al box-shadow de .g-cta,
       aquí arriba. Se quitó porque endurece una interfaz que ya es
       gris / blanco / negro, y la sombra sola basta para revelar el filo. */
    .g-cta:active{transform:scale(.98)}
    .g-field{margin-top:14px}
    .g-field label{display:block;font-family:var(--font-display);font-weight:600;font-size:13px;margin-bottom:7px}
    .g-field input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;font:inherit;font-size:16px;background:#fff}
    .g-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,21,25,.08)}
    .g-field .err{color:#E23D3D;font-size:12px;margin-top:5px;display:none}
    .g-field.invalid input{border-color:#E23D3D}
    .g-field.invalid .err{display:block}
    .g-loader{text-align:center;padding:56px 0}
    .g-spin{width:46px;height:46px;border:4px solid var(--line);border-top-color:var(--blue);border-radius:50%;margin:0 auto 18px;animation:spin .8s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}
    .g-loadmsg{font-family:var(--font-display);font-weight:600;color:var(--ink-soft)}
    .g-hero-card{background:var(--surface);border:1.5px solid var(--green);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-sm);margin-top:6px}
    .g-hero-card .badge{display:inline-block;font-size:11.5px;font-weight:700;color:var(--green-deep);background:#E9FBF3;border:1px solid #B7EBD5;border-radius:var(--r-pill);padding:4px 11px}
    .g-hero-card .cat{font-size:12.5px;color:var(--ink-faint);font-weight:600}
    .g-hero-card h3{font-family:var(--font-display);font-weight:700;font-size:20px;margin:4px 0}
    .g-hero-card .g-hero-price{margin-top:14px;font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--ink);line-height:1}
    .g-hero-card .g-hero-price span{font-size:14px;color:var(--ink-soft);font-weight:600}
    .g-bullets{list-style:none;margin:12px 0 0;display:flex;flex-direction:column;gap:7px}
    .g-bullets li{display:flex;gap:9px;font-size:14px;color:var(--ink-soft)}
    .g-bullets li::before{content:"✓";color:var(--green);font-weight:800}
    .g-total-input{margin-top:16px}
    .g-total-input label{display:block;font-family:var(--font-display);font-weight:600;font-size:12.5px;margin-bottom:7px;color:var(--ink-soft)}
    .g-total-input input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;font-family:var(--font-display);font-weight:700;font-size:16px}
    .g-powerup{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--paper);border-radius:var(--r);padding:16px;margin-top:16px}
    .g-powerup .pt b{display:block;font-family:var(--font-display);font-weight:600;font-size:14.5px}
    .g-powerup .pt span{font-size:12.5px;color:var(--ink-soft)}
    .switch{flex:none;width:52px;height:30px;border-radius:var(--r-lg);background:#D5DEEC;position:relative;cursor:pointer;border:none;transition:.2s}
    .switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}
    .g-combo-base{background:linear-gradient(135deg,#EAF1FF,#F7FAFF);border:2px solid var(--blue);border-radius:var(--r);padding:20px 20px 22px;box-shadow:0 14px 32px -14px rgba(20,21,25,.39);margin-top:6px}
    .g-combo-base .badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;color:#fff;background:var(--blue);border:none;border-radius:var(--r-pill);padding:5px 13px;box-shadow:0 4px 10px -3px rgba(20,21,25,.42)}
    .g-combo-base h3{font-family:var(--font-display);font-weight:700;font-size:18px;margin-top:2px}
    .g-add-price{font-family:var(--font-display);font-weight:700;color:var(--ink);white-space:nowrap}
    .g-add{display:flex;align-items:stretch;justify-content:space-between;gap:12px;width:100%;text-align:left;background:var(--surface);
      border:1.5px solid var(--line);border-radius:var(--r);padding:15px 16px;margin-bottom:10px;cursor:pointer;font:inherit;color:inherit;
      -webkit-tap-highlight-color:transparent;transition:border-color .15s,box-shadow .15s,background .15s}
    .g-add:hover{border-color:var(--blue)}
    .g-add.on{border-color:var(--select);background:var(--select-soft);box-shadow:0 0 0 1px var(--select) inset}
    .g-add-main{display:flex;flex-direction:column;gap:2px}
    .g-add-main b{font-family:var(--font-display);font-weight:600;font-size:14.5px}
    .g-add-why{font-size:12.5px;color:var(--ink-soft)}
    .g-add-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px}
    .g-add-pill{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:5px 11px;font-size:12px;font-weight:700;white-space:nowrap}
    .g-add-pill.add{background:#EAF1FF;color:var(--blue);border:1px solid #CFE0FF}
    .g-add-pill.quitar{background:#E23D3D;color:#fff}
    .g-add-pill svg{width:13px;height:13px}
    .g-total-k{font-size:13px;color:var(--ink-soft);font-weight:600}
    .g-total-v{font-family:var(--font-display);font-weight:700;font-size:14px;text-align:right}
    .g-total-v b{font-size:16.5px}
    .g-extras{margin-top:14px;background:var(--paper);border-radius:var(--r);padding:14px 16px}
    .g-extras-h{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
    .g-extra-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;padding:5px 0}
    .g-extra-name{flex:1;min-width:0}
    .g-extra-row .r{font-weight:700;white-space:nowrap}
    .g-edit{background:#EAF1FF;border:1px solid #CFE0FF;color:var(--blue);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;border-radius:var(--r-pill);padding:6px 13px;-webkit-tap-highlight-color:transparent}
    .g-edit:active{transform:scale(.97)}
    .g-trash{flex:none;width:30px;height:30px;border-radius:var(--r-sm);border:1px solid #F3C9C9;background:#FDECEC;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);color:#E23D3D;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .g-trash:active{transform:scale(.92)}
    .g-edit-wrap{text-align:center;margin-top:14px}
    .switch[aria-checked="true"]{background:var(--green)}
    .switch[aria-checked="true"]::after{left:25px}
    .g-pays{display:flex;flex-direction:column;gap:10px;margin-top:16px}
    .g-pay2{border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:border-color .18s,box-shadow .18s,background .18s}
    .g-pay2.sel{border-color:var(--select);background:var(--select-soft);box-shadow:0 0 0 1px var(--select) inset}
    .g-pay2-sel{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:none;border:none;padding:14px 16px;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
    .g-pay2-check{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #CFD6E0;display:grid;place-items:center;transition:.18s}
    .g-pay2-check svg{width:14px;height:14px;stroke:#fff;opacity:0;transform:scale(.3);transition:transform .2s,opacity .2s}
    .g-pay2.sel .g-pay2-check{background:var(--green);border-color:var(--green);animation:checkpop .35s ease}
    .g-pay2.sel .g-pay2-check svg{opacity:1;transform:scale(1)}
    @keyframes checkpop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
    .g-pay2-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
    .g-pay2-k{font-size:12px;color:var(--ink-faint);font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .g-pay2-v{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink)}
    .g-pay2-sub{font-size:11px;color:var(--ink-soft)}
    .g-pay2-extra{padding:2px 16px 14px 53px}
    .g-pay2-extra .msi-seg{justify-content:flex-start;flex-wrap:wrap;margin:5px 0 2px}
    .g-pay{border:1px solid var(--line);border-radius:var(--r);padding:14px;text-align:center}
    .g-pay .k{font-size:11.5px;color:var(--ink-faint);font-weight:600}
    .g-pay .v{font-family:var(--font-display);font-weight:800;font-size:20px;margin-top:3px}
    .g-pay .sub{font-size:11px;color:var(--ink-soft);margin-top:2px}
    .g-pay.msi{border-color:#CFE0FF;background:#F5F8FF}
    .g-pay.ret{border-color:var(--select-line);background:var(--select-soft)}
    .g-plan{border:1.5px dashed #CFE0FF;background:#F7FAFF;border-radius:var(--r);padding:16px;margin-top:10px}
    .g-plan-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
    .g-plan-h b{font-family:var(--font-display);font-weight:700;font-size:14.5px}
    .g-plan-x{background:none;border:none;color:var(--ink-faint);font-size:15px;line-height:1;cursor:pointer;padding:2px 4px;-webkit-tap-highlight-color:transparent}
    .g-plan-note{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;line-height:1.4}
    .g-plan-note b{color:var(--ink);font-weight:700}
    .g-plan-lbl{font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px;margin-top:8px}
    .g-plan .msi-seg{margin:5px 0 2px;justify-content:flex-start;flex-wrap:wrap}
    .g-plan-toggle{width:100%;display:flex;flex-direction:column;gap:3px;text-align:left;background:#F7FAFF;border:1.5px dashed #CFE0FF;border-radius:var(--r);padding:14px 16px;margin-top:10px;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .g-plan-toggle .pt-t{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--blue)}
    .g-plan-toggle .pt-s{font-size:12px;color:var(--ink-soft)}
    .g-plan-toggle:active{transform:scale(.99)}
    .g-plan-v{font-family:var(--font-display);font-weight:800;font-size:20px;margin-top:6px}
    .g-plan-v span{font-size:13px;color:var(--ink-soft);font-weight:600}
    .g-plan-dl{width:100%;margin-top:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border:none;border-radius:var(--r-sm);padding:12px;font-family:var(--font-display);font-weight:700;font-size:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .g-plan-dl:active{transform:scale(.98)}
    /* Opt-in de contacto: vive después del precio y nunca bloquea. */
    /* Barra fija de la Guía. El blur es el mismo recurso que ya usa el header. */
    /* Difuminado progresivo tras las barras fijas. El radio CRECE hacia abajo
       (2 → 6 → 14 px) y cada capa lleva su propia máscara de degradado, así el
       contenido se desvanece en vez de cortarse contra un borde. Una sola capa
       de blur uniforme no es un progressive blur. */
    .barscrim{position:fixed;left:0;right:0;bottom:0;height:160px;z-index:58;pointer-events:none;
      opacity:0;transition:opacity var(--t) var(--e-out)}
    .barscrim.show{opacity:1}
    .barscrim>i{position:absolute;inset:0;display:block}
    .barscrim>i:nth-child(1){backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
      -webkit-mask-image:linear-gradient(to top,#000 0 58%,transparent 100%);
              mask-image:linear-gradient(to top,#000 0 58%,transparent 100%)}
    .barscrim>i:nth-child(2){backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
      -webkit-mask-image:linear-gradient(to top,#000 0 36%,transparent 76%);
              mask-image:linear-gradient(to top,#000 0 36%,transparent 76%)}
    .barscrim>i:nth-child(3){backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
      -webkit-mask-image:linear-gradient(to top,#000 0 16%,transparent 52%);
              mask-image:linear-gradient(to top,#000 0 16%,transparent 52%)}
    .barscrim>i:nth-child(4){background:linear-gradient(to top,rgba(241,242,244,.72),rgba(241,242,244,0))}
    @media (prefers-reduced-transparency: reduce){
      .barscrim>i{backdrop-filter:none;-webkit-backdrop-filter:none}
      .barscrim>i:nth-child(4){background:linear-gradient(to top,var(--paper),rgba(241,242,244,0))}
    }

    .g-fixedbar{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));max-width:928px;margin-inline:auto;z-index:var(--z-bar);
      display:none;align-items:center;justify-content:space-between;gap:14px;
      background:rgba(20,21,25,.72);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
      border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.22);border-radius:var(--r);padding:11px 12px 11px 18px;
      box-shadow:0 18px 40px -12px rgba(10,12,18,.55)}
    .g-fixedbar.show{display:flex}
    .g-fixedbar .fb-t{min-width:0}
    .g-fixedbar .fb-k{display:block;font-size:12px;color:var(--on-dark-soft);font-weight:600;line-height:1.25}
    .g-fixedbar .fb-v{display:block;font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--on-dark);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .g-fixedbar .fb-cta{flex:none;border-radius:var(--r-sm);padding:12px 18px;font:inherit;font-weight:700;font-size:14px;
      color:#fff;background:var(--select);cursor:pointer;transition:transform var(--t-fast) var(--e-out);
      border:2px solid #fff;
      box-shadow:0 4px 12px -4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35)}
    .g-fixedbar .fb-cta.wa{background:var(--select);color:#fff}
    .g-fixedbar .fb-cta:active{transform:scale(.97)}
    #guia.has-fixedbar{padding-bottom:110px}
    .cat-view[data-view="checkout"].has-fixedbar{padding-bottom:110px}
    .g-optin{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:18px}
    .g-optin-q{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}
    .g-optin-s{font-size:12.5px;color:var(--ink-soft);margin-top:4px}
    .g-optin .g-field{margin-top:12px}

    /* ===== RÓTULO (meximalismo) ===== */
    .rotulo{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 14px 16px;overflow:clip;text-align:center;max-width:100%}
    .rotulo-script{font-family:'Caveat Brush',cursive;color:#f7d91e;font-size:clamp(1.5rem,7vw,2.1rem);line-height:1;
      transform:rotate(-6deg);margin-bottom:-2px;z-index:var(--z-raised);text-shadow:2px 2px 0 rgba(15,27,45,.85)}
    .rotulo-block{font-family:'Bangers',system-ui,cursive;font-size:clamp(1.9rem,9vw,3.05rem);letter-spacing:1.5px;text-transform:uppercase;line-height:.9;margin:0;max-width:100%;
      color:#ee2b24;-webkit-text-stroke:1.5px #fff;
      text-shadow:1px 1px 0 #1e56c8,2px 2px 0 #1e56c8,3px 3px 0 #1e56c8,4px 4px 0 #1e56c8,5px 5px 0 #1656c2,7px 7px 12px rgba(15,27,45,.4);
      transform:rotate(-2deg) skewX(-3deg)}
    .rotulo-block.alt{-webkit-text-stroke:1.5px #f7d91e;transform:rotate(-2deg) skewX(-3deg) translateY(4px)}
    /* rótulo responsivo vía clamp */

    /* precios: ancla de descuento + selector MSI */
    .g-pay .pay-anchor{margin:5px 0 2px;display:flex;align-items:center;justify-content:center;gap:8px}
    .g-pay .pay-anchor s{color:var(--ink-faint);font-size:13px}
    .g-pay .pay-off{background:#E9FBF3;color:var(--green-deep);border:1px solid #B7EBD5;border-radius:var(--r-pill);padding:2px 8px;font-size:11px;font-weight:800}
    .g-pay .v-unit{font-size:12px;color:var(--ink-soft);font-weight:600}
    .g-pay .msi-badge{display:inline-block;background:var(--amber);color:#2A1B02;border-radius:var(--r-pill);padding:2px 7px;font-size:9px;font-weight:800;vertical-align:middle;margin-left:4px;letter-spacing:.3px}
    .msi-seg{display:flex;gap:6px;justify-content:center;margin:9px 0 7px}
    .msi-seg button{border:1px solid #CFE0FF;background:#fff;color:var(--blue);border-radius:var(--r-pill);padding:5px 13px;font-family:var(--font-display);font-weight:600;font-size:11.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.15s}
    .msi-seg button.on{background:var(--blue);color:#fff;border-color:var(--blue)}

    /* ===== TICKET (cierre performativo) ===== */
    .tk-overlay{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(15,27,45,.66);backdrop-filter:blur(8px);
      display:none;flex-direction:column;align-items:center;padding:24px 16px 40px;overflow-y:auto}
    .tk-overlay.show{display:flex}
    .tk-wrap{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:stretch}
    .tk-stage{position:relative;width:100%;padding-top:40px}
    .tk-machine{position:absolute;top:0;left:0;right:0;height:58px;z-index:var(--z-base);
      background:#2b2b2b;border:2px solid #2c2c2c;border-radius:var(--r);
      box-shadow:0 0 1px 0 #000,0 6px 16px 0 rgba(0,0,0,.45)}
    .tk-slit{position:absolute;left:6%;right:6%;bottom:9px;height:15px;background:#000;border:1px solid #1b1b1b;border-radius:var(--r-pill);
      box-shadow:inset 0 2px 5px rgba(0,0,0,.9)}
    .tk-window{position:relative;z-index:var(--z-raised);overflow:hidden;margin-top:0;padding:0 8px 16px}
    .tk-feed{will-change:transform}
    .tk{position:relative;width:100%;background:#fff;color:#5b6472;border-radius:var(--r-xs) var(--r-xs) 0 0;
      box-shadow:0 8px 24px 0 rgba(0,0,0,.2);
      -webkit-mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 9px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpolygon points='0,0 16,0 8,9' fill='black'/%3E%3C/svg%3E") 0 100%/16px 9px repeat-x;
      mask:linear-gradient(#000 0 0) 0 0/100% calc(100% - 9px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpolygon points='0,0 16,0 8,9' fill='black'/%3E%3C/svg%3E") 0 100%/16px 9px repeat-x}
    .tk::before{content:"";position:absolute;left:0;right:0;top:0;height:70px;pointer-events:none;border-radius:var(--r-xs) var(--r-xs) 0 0;
      background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 12%,rgba(0,0,0,.4) 32%,rgba(0,0,0,.18) 55%,transparent 100%)}
    .tk-head{position:relative;text-align:center;font-family:var(--font-display),sans-serif;font-weight:800;font-size:15px;letter-spacing:1.5px;color:#0F1B2D;padding:16px 14px 4px}
    .tk-body{padding:6px 20px 22px;font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:12.5px;line-height:1.7}
    .tk-sub{text-align:center;color:#98a1ad;font-size:11px}
    .tk-hr{border:0;border-top:1.5px dashed #d5d9e0;margin:9px 0}
    .tk-k{color:#98a1ad}
    .tk-row{display:flex;justify-content:space-between;gap:12px}
    .tk-row .r{text-align:right;white-space:nowrap;color:#2a2f3a;font-weight:600}
    .tk-big{display:flex;justify-content:space-between;gap:12px;font-weight:800;font-size:16px;font-family:var(--font-display),sans-serif;color:#0F1B2D;margin-top:4px}
    .tk-barcode{height:36px;margin:12px 0 5px;opacity:.88;
      background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px,#111 4px 5px,#fff 5px 8px,#111 8px 11px,#fff 11px 13px)}
    .tk-folio{text-align:center;font-size:10.5px;color:#aaa;letter-spacing:2px}
    .tk-row .r.mail{word-break:break-all;font-size:10.5px;line-height:1.35}
    .tk-actions{display:flex;margin-top:20px;width:100%}
    .tk-actions2{display:flex;gap:10px;margin-top:10px;width:100%}
    .tk-btn{flex:1;border:none;border-radius:var(--r-sm);padding:14px;font-family:var(--font-display),sans-serif;font-weight:700;font-size:14.5px;cursor:pointer;
      -webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px}
    .tk-btn.wa{background:#25D366;color:#fff;box-shadow:0 10px 22px -10px rgba(37,211,102,.6)}
    .tk-btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4);font-weight:600;font-size:13px}
    .tk-btn:active{transform:scale(.98)}
    .tk-close{display:block;margin:14px auto 0;background:none;border:none;color:rgba(255,255,255,.85);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline}


    /* ==================== CATÁLOGO (modo e-commerce · clases .cat-*) ==================== */
    /* Hero header */
    .cat-hero{position:relative;overflow:hidden;border-radius:var(--r);padding:26px 22px;margin-top:18px;color:#fff;
      background:linear-gradient(135deg,#141519 0%,#20222C 58%,#2B2740 100%);box-shadow:var(--shadow)}
    .cat-hero::after{content:"";position:absolute;right:-40px;top:-46px;width:230px;height:230px;border-radius:50%;
      background:radial-gradient(circle at 32% 32%,rgba(255,255,255,.24),transparent 70%);pointer-events:none;z-index:0}
    /* Hero LISTO PARA IMAGEN: agrega la clase cat-hero--img y define  --cat-hero-img: url('...')
       El degradado encima es un scrim para que el texto blanco siga legible sobre cualquier foto. */
    .cat-hero--img{background-image:linear-gradient(135deg,rgba(20,21,25,.82),rgba(34,36,44,.72)),var(--cat-hero-img);
      background-size:cover;background-position:center center}
    .cat-hero>*{position:relative;z-index:var(--z-base)}
    .cat-hero .eyebrow{color:rgba(255,255,255,.92)}
    .cat-hero h2{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.12;margin:2px 0 8px;letter-spacing:-.01em;max-width:20ch}
    .cat-hero p{font-size:14px;color:rgba(255,255,255,.92);max-width:46ch}
    .cat-hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
    .cat-hero-tags span{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
      border-radius:var(--r-pill);padding:5px 12px;font-size:12px;font-weight:600}

    /* Sección por categoría (encabezado + grid, SIN slider de pills) */
    .cat-section{margin-top:28px}
    .cat-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}
    .cat-sec-head h3{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.01em}
    .cat-sec-count{font-size:12.5px;color:var(--ink-faint);font-weight:600;white-space:nowrap}
    .cat-grid{display:grid;grid-template-columns:1fr;gap:14px}
    @media(min-width:560px){.cat-grid{grid-template-columns:1fr 1fr}}

    /* Card de servicio (estilo delivery) */
    .cat-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);
      border-radius:var(--r);padding:16px 16px 14px;box-shadow:var(--shadow-sm);
      transition:transform .18s,border-color .18s,box-shadow .18s}
    .cat-card:hover{transform:translateY(-2px);border-color:#CFE0FF;box-shadow:var(--shadow)}
    .cat-card.in-cart{border-color:var(--select);background:var(--select-soft);box-shadow:0 0 0 1px var(--select) inset,var(--shadow-sm)}
    .cat-cat{font-size:11.5px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
    .cat-card h4{font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.2;margin:3px 0 2px}
    .cat-badges{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
    .cat-badge{font-size:10.5px;font-weight:700;border-radius:var(--r-pill);padding:3px 9px}
    .cat-badge.mes{background:#EAF1FF;color:var(--blue);border:1px solid #CFE0FF}
    .cat-badge.medida{background:var(--amber-soft);color:#96570A;border:1px solid var(--amber-line)}
    .cat-badge.unico{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line)}
    .cat-bullets{list-style:none;margin:10px 0 0;display:flex;flex-direction:column;gap:5px;flex:1}
    .cat-bullets li{display:flex;gap:8px;font-size:13px;color:var(--ink-soft);line-height:1.35}
    .cat-bullets li::before{content:"✓";color:var(--green);font-weight:800;flex:none}
    .cat-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px}
    .cat-price{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink);line-height:1.05}
    .cat-price span{font-size:12.5px;color:var(--ink-soft);font-weight:600}
    .cat-price small{display:block;font-family:'Inter';font-size:12px;color:var(--ink-faint);font-weight:600;margin-top:2px}
    /* Botón "+" redondo (agregar) que alterna a "quitar" */
    .cat-add-btn{flex:none;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
      background:var(--green);color:#fff;display:grid;place-items:center;
      box-shadow:0 8px 18px -8px rgba(18,185,129,.7);transition:transform .15s,background .15s;-webkit-tap-highlight-color:transparent}
    .cat-add-btn svg{width:22px;height:22px}
    .cat-add-btn:active{transform:scale(.9)}
    .cat-add-btn.remove{background:#E23D3D;box-shadow:0 8px 18px -8px rgba(226,61,61,.6)}

    /* Entrada de monto: "a tu medida" y top-up de inversión extra (sin flechitas/spinner) */
    .cat-amount{margin-top:12px;background:var(--paper);border-radius:var(--r-sm);padding:12px}
    .cat-amount label{display:block;font-family:var(--font-display);font-weight:600;font-size:12px;color:var(--ink-soft);margin-bottom:6px}
    .cat-amount-in{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 12px}
    .cat-amount-in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,21,25,.08)}
    .cat-amount-in .pfx{color:var(--ink-faint);font-family:var(--font-display);font-weight:800}
    .cat-amount input{border:none;outline:none;font:inherit;font-family:var(--font-display);font-weight:700;font-size:16px;width:100%;padding:11px 0;background:none;color:var(--ink)}
    .cat-amount input::-webkit-outer-spin-button,
    .cat-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
    .cat-amount input[type=number]{-moz-appearance:textfield;appearance:textfield}
    .cat-amount-min{font-size:11px;color:var(--ink-faint);margin-top:5px}
    .cat-amount.extra label{color:var(--blue)}

    /* Barra de carrito (sticky, aparece con items) */
    .cat-cartbar{position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));max-width:928px;margin-inline:auto;z-index:var(--z-bar);display:none;align-items:center;justify-content:space-between;gap:14px;
      background:var(--ink);color:#fff;border-radius:var(--r);padding:12px 12px 12px 18px;box-shadow:0 22px 44px -16px rgba(15,27,45,.55)}
    .cat-view[data-view="browse"].has-cartbar{padding-bottom:104px}
    .cat-cartbar.show{display:flex;animation:cartup .3s ease}
    @keyframes cartup{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
    .cat-cb-info{display:flex;flex-direction:column;gap:1px;min-width:0}
    .cat-cb-count{font-size:11.5px;color:rgba(255,255,255,.72);font-weight:600}
    .cat-cb-total{font-family:var(--font-display);font-weight:700;font-size:15px}
    .cat-cb-total b{font-weight:800}
    .cat-cb-go{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--select);color:#fff;border-radius:var(--r-sm);
      padding:12px 18px;font-family:var(--font-display);font-weight:700;font-size:14.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;border:2px solid #fff;
      box-shadow:0 4px 12px -4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35)}
    .cat-cb-go:active{transform:scale(.98)}

    /* Vistas del catálogo: explorar / checkout */
    .cat-view{display:none}
    .cat-view.active{display:block}
    .cat-back{background:none;border:none;color:var(--ink-soft);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 0;margin-bottom:6px}
    .cat-back:hover{color:var(--blue)}

    /* Checkout: resumen de carrito + pasos */
    .cat-cart-list{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:2px 16px;margin-top:8px;box-shadow:var(--shadow-sm)}
    .cat-cart-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
    .cat-cart-row:last-child{border-bottom:none}
    .cat-cr-name{flex:1;min-width:0}
    .cat-cr-name b{font-family:var(--font-display);font-weight:600;font-size:14.5px;display:block}
    .cat-cr-name span{font-size:12px;color:var(--ink-faint)}
    .cat-cr-price{font-family:var(--font-display);font-weight:700;white-space:nowrap}

    .cat-cart-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:14px 16px;background:var(--paper);border-radius:var(--r)}
    .cat-cart-sum .k{font-size:13px;color:var(--ink-soft);font-weight:600}
    .cat-cart-sum .v{font-family:var(--font-display);font-weight:700;font-size:14px;text-align:right}
    .cat-cart-sum .v b{font-size:16.5px}
    .cat-step-h{font-family:var(--font-display);font-weight:800;font-size:var(--fs-sh);margin:22px 0 4px;letter-spacing:-.01em}
    .cat-step-s{font-size:13.5px;color:var(--ink-soft);margin-bottom:8px}
    .cat-empty{text-align:center;color:var(--ink-faint);font-size:14px;padding:34px 0}


    /* ---- Banners / ofertas (carrusel con dots, listo para imagen) ---- */
    .cat-banners{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:16px;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .cat-banners::-webkit-scrollbar{display:none}
    .cat-banner{scroll-snap-align:start;flex:0 0 100%;min-width:0;position:relative;overflow:hidden;border-radius:var(--r);
      padding:22px;color:#fff;min-height:118px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow-sm);
      background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 100%)}
    .cat-banner.azul{background:linear-gradient(135deg,var(--blue),#4C79E8)}
    .cat-banner.verde{background:linear-gradient(135deg,var(--select),#3FD9A6)}
    .cat-banner.oscuro{background:linear-gradient(120deg,#0F1B2D,#243b57)}
    .cat-banner.img{background-image:linear-gradient(90deg,rgba(15,27,45,.74),rgba(15,27,45,.22)),var(--cat-banner-img);background-size:cover;background-position:center}
    .cat-banner>*{position:relative;z-index:var(--z-base)}
    .cat-banner h3{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.15}
    .cat-banner p{font-size:13px;color:rgba(255,255,255,.92);margin-top:5px;max-width:42ch}
    .cat-banner-cta{align-self:flex-start;margin-top:13px;background:#fff;color:var(--ink);border:none;border-radius:var(--r-pill);
      padding:9px 16px;font-family:var(--font-display);font-weight:700;font-size:13px;text-decoration:none;cursor:pointer}
    .cat-banner-cta:active{transform:scale(.97)}
    .cat-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
    .cat-dot{width:7px;height:7px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:.22s}
    .cat-dot.on{background:var(--blue);width:20px;border-radius:var(--r-pill)}


    /* ========================================================================
       ACCESIBILIDAD DEL SISTEMA
       Tres señales independientes que el sistema operativo ya conoce y que
       hasta ahora ignorábamos por completo. Van al final a propósito: deben
       poder pisar cualquier regla anterior.
       ======================================================================== */

    /* Movimiento reducido no es "sin feedback": es feedback sin desplazamiento.
       Se conservan opacidad y color, que ayudan a entender; se quita lo que
       mueve cosas por la pantalla. */
    @media (prefers-reduced-motion: reduce){
      *,*::before,*::after{
        animation-duration:.01ms !important; animation-iteration-count:1 !important;
        transition-duration:.01ms !important; scroll-behavior:auto !important}
      .g-step,.cat-view{transform:none !important}
    }

    /* Transparencia reducida: el material se vuelve sólido en vez de difuminado. */
    @media (prefers-reduced-transparency: reduce){
      .g-fixedbar{background:var(--dark);backdrop-filter:none;-webkit-backdrop-filter:none}
      header{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
    }

    /* Más contraste: fondos casi sólidos y bordes definidos. */
    @media (prefers-contrast: more){
      :root{--line:#B9BCC4; --ink-soft:#3A3C44; --ink-faint:#5A5C66}
      .g-fixedbar{background:var(--dark);border-color:rgba(255,255,255,.5)}
      .card,.path,.cat-card,.g-pay2{border-width:2px}
    }