/* ============================================================
   TPV LANDING — ESTILOS ESPECÍFICOS
   Archivo: tpv/css/tpv.css
   ============================================================ */

/* CTA navbar: texto completo en escritorio, "Solicitar demo" en móvil */
    .isla-flotante__actions .n3i-cta-short { display: none; }
    @media (max-width: 900px) {
      .isla-flotante__actions .n3i-cta-full { display: none; }
      .isla-flotante__actions .n3i-cta-short { display: inline; }
    }
  


    /* ================================================================
     NAVBAR "Isla Flotante" — barra full-width permanente (forma cuadrada fija)
     Namespaced .isla-flotante__ ; sin dependencias externas
     ================================================================ */

    .isla-flotante__nav {
      position: sticky;
      top: 1rem;
      z-index: 100;
      display: flex;
      align-items: center;
      margin: 1rem auto 0;
      width: calc(100% - 2rem);
      max-width: calc(100% - 2rem);
      padding: .7rem 1.5rem;
      border-radius: 16px;
      background: rgba(11, 17, 33, 0);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, .1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
      white-space: nowrap;
      overflow: visible;
      transition:
        background .4s ease,
        width .55s cubic-bezier(.16, 1, .3, 1),
        max-width .55s cubic-bezier(.16, 1, .3, 1),
        border-radius .55s cubic-bezier(.16, 1, .3, 1),
        padding .55s cubic-bezier(.16, 1, .3, 1);
    }

    /* Atracado (tras scroll) → full-width */
    .isla-flotante__nav.is-docked {
      width: calc(100% - 2rem);
      max-width: calc(100% - 2rem);
      border-radius: 16px;
      padding: .7rem 1.5rem;
    }

    /* Destello que sigue al cursor (orb) — portado de la variante Piel Cromática */
    .isla-flotante__orb {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: radial-gradient(220px circle at 50% 50%, rgba(0, 102, 255, .28), transparent 60%);
      opacity: 0;
      z-index: 0;
      transition: background .15s ease, opacity .25s ease;
    }

    .isla-flotante__nav:hover .isla-flotante__orb {
      opacity: 1;
    }

    /* Tema adaptativo: sobre secciones claras el pill se aclara y texto/logo se oscurecen */
    .isla-flotante__nav.is-on-light {
      background: rgba(255, 255, 255, .82);
      border-color: rgba(15, 23, 42, .12);
      box-shadow: 0 8px 32px rgba(15, 23, 42, .14);
    }

    .isla-flotante__nav.is-on-light .isla-flotante__navlink,
    .isla-flotante__nav.is-on-light .isla-flotante__login {
      color: rgba(11, 17, 33, .88);
    }

    .isla-flotante__nav.is-on-light .isla-flotante__navlink:hover,
    .isla-flotante__nav.is-on-light .isla-flotante__navlink:focus,
    .isla-flotante__nav.is-on-light .isla-flotante__login:hover {
      color: #0b1121;
      background: rgba(11, 17, 33, .06);
    }

    .isla-flotante__nav.is-on-light .isla-flotante__chevron {
      color: rgba(11, 17, 33, .55);
    }

    .isla-flotante__nav.is-on-light .isla-flotante__burger {
      color: rgba(11, 17, 33, .85);
    }


    .isla-flotante__nav.is-on-light .isla-flotante__logo img {
      opacity: 0;
    }

    @media (max-width: 900px) {
      .isla-flotante__orb {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .isla-flotante__orb {
        opacity: 0 !important;
      }
    }

    .isla-flotante__inner {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      width: 100%;
      gap: 0;
    }

    .isla-flotante__logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
      margin-right: 1.25rem;
      /* Nudge óptico: sube el lockup para que "nube3i" quede a la altura del texto de los links */
      transform: translateY(-5.5px);
    }

    /* Logo ampliado. Cabe de sobra: la altura de la barra la fija el botón CTA (~57px). */
    .isla-flotante__logo img {
      display: block;
      height: 48px;
      width: auto;
    }

    .isla-flotante__logo:focus-visible {
      outline: 2px solid #0066ff;
      outline-offset: 4px;
      border-radius: 4px;
    }

    .isla-flotante__links {
      display: flex;
      align-items: center;
      gap: .25rem;
      list-style: none;
      margin: 0;
      padding: 0;
      flex: 1;
    }

    .isla-flotante__links>li {
      position: relative;
    }

    .isla-flotante__navlink {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .5rem .8rem;
      background: none;
      border: none;
      color: rgba(255, 255, 255, .75);
      font-family: Inter, sans-serif;
      font-size: 1.125rem;
      font-weight: 500;
      text-decoration: none;
      border-radius: 8px;
      cursor: pointer;
      white-space: nowrap;
      transition: color .2s, background .2s;
    }

    .isla-flotante__navlink:hover,
    .isla-flotante__navlink:focus {
      color: #fff;
      background: rgba(255, 255, 255, .07);
      outline: none;
    }

    .isla-flotante__navlink:focus-visible {
      outline: 2px solid #0066ff;
      outline-offset: 2px;
    }

    .isla-flotante__chevron {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      opacity: .55;
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s;
    }

    /* Puente invisible para el hueco botón → panel (mantiene el hover) */
    .isla-flotante__hasdrop::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 16px;
    }

    /* ---- DROPDOWN — alineado a la izquierda del botón ---- */
    .isla-flotante__dropdown {
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      transform: translateY(-8px);
      width: 560px;
      max-width: calc(100vw - 2rem);
      background: rgba(11, 17, 33, .96);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 16px;
      padding: .75rem;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .04);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .45rem;
      opacity: 0;
      pointer-events: none;
      z-index: 100;
      transition: opacity .22s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
    }

    .isla-flotante__dropdown::before {
      content: '';
      position: absolute;
      top: -7px;
      left: 40px;
      transform: rotate(45deg);
      width: 13px;
      height: 13px;
      background: rgba(11, 17, 33, .96);
      border-top: 1px solid rgba(255, 255, 255, .08);
      border-left: 1px solid rgba(255, 255, 255, .08);
    }

    /* ABRIR en hover / foco (teclado-táctil) */
    .isla-flotante__hasdrop:hover>.isla-flotante__dropdown,
    .isla-flotante__hasdrop:focus-within>.isla-flotante__dropdown {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .isla-flotante__hasdrop:hover .isla-flotante__chevron,
    .isla-flotante__hasdrop:focus-within .isla-flotante__chevron {
      transform: rotate(180deg);
      opacity: .9;
    }

    .isla-flotante__moditem {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .65rem .75rem;
      border-radius: 10px;
      text-decoration: none;
      transition: background .18s;
    }

    .isla-flotante__moditem:hover {
      background: rgba(255, 255, 255, .055);
    }

    .isla-flotante__moditem:focus-visible {
      outline: 2px solid #0066ff;
      outline-offset: 2px;
      border-radius: 10px;
    }

    .isla-flotante__modbadge {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .isla-flotante__modtext {
      display: flex;
      flex-direction: column;
      gap: .12rem;
    }

    .isla-flotante__modtitle {
      font-family: Montserrat, sans-serif;
      font-size: .82rem;
      font-weight: 700;
    }

    .isla-flotante__moddesc {
      font-family: Inter, sans-serif;
      font-size: .73rem;
      color: rgba(255, 255, 255, .48);
    }

    /* Desplegable de escritorio ampliado. Va scopeado a .isla-flotante__dropdown
       porque el drawer móvil reutiliza .isla-flotante__moditem y necesita su
       escala compacta para caber en la columna estrecha. */
    .isla-flotante__dropdown .isla-flotante__moditem {
      gap: .8rem;
      padding: .75rem .85rem;
    }

    .isla-flotante__dropdown .isla-flotante__modbadge {
      width: 42px;
      height: 42px;
    }

    .isla-flotante__dropdown .isla-flotante__modbadge svg {
      width: 22px;
      height: 22px;
    }

    .isla-flotante__dropdown .isla-flotante__modtitle {
      font-size: .95rem;
    }

    .isla-flotante__dropdown .isla-flotante__moddesc {
      font-size: .8rem;
    }

    .isla-flotante__moditem--full {
      grid-column: span 2;
    }

    .isla-flotante__actions {
      display: flex;
      align-items: center;
      gap: .4rem;
      margin-left: auto;
      flex-shrink: 0;
    }

    .isla-flotante__login {
      display: inline-flex;
      align-items: center;
      font-family: Inter, sans-serif;
      font-size: 1.125rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .62);
      text-decoration: none;
      padding: .5rem .75rem;
      border-radius: 8px;
      white-space: nowrap;
      transition: color .2s, background .2s;
    }

    .isla-flotante__login:hover {
      color: #fff;
      background: rgba(255, 255, 255, .07);
    }

    .isla-flotante__login:focus-visible {
      outline: 2px solid #0066ff;
      outline-offset: 2px;
    }

    /* ---- HAMBURGUESA (móvil) ---- */
    .isla-flotante__burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: .45rem;
      border-radius: 8px;
      color: rgba(255, 255, 255, .8);
      transition: background .2s;
      margin-left: .3rem;
    }

    .isla-flotante__burger:hover {
      background: rgba(255, 255, 255, .08);
    }

    .isla-flotante__burger:focus-visible {
      outline: 2px solid #0066ff;
      outline-offset: 2px;
    }

    .isla-flotante__bar {
      display: block;
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s;
    }

    .isla-flotante__burger[aria-expanded="true"] .isla-flotante__bar:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .isla-flotante__burger[aria-expanded="true"] .isla-flotante__bar:nth-child(2) {
      opacity: 0;
      transform: scaleX(.2);
    }

    .isla-flotante__burger[aria-expanded="true"] .isla-flotante__bar:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* ---- DRAWER móvil — cae debajo del nav ---- */
    .isla-flotante__drawer {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + .5rem);
      background: rgba(11, 17, 33, .97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 18px;
      padding: 1rem .85rem;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-16px);
      transition: opacity .3s ease, transform .38s cubic-bezier(.16, 1, .3, 1);
      z-index: 200;
    }

    .isla-flotante__drawer.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Dos columnas: funcionalidades apiladas | accesos (sesión + precios) */
    .isla-flotante__drawer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: .5rem;
    }

    .isla-flotante__drawer-modules {
      display: grid;
      grid-template-columns: 1fr;
      gap: .15rem;
    }

    .isla-flotante__drawer-modules .isla-flotante__moditem {
      padding: .5rem;
      gap: .55rem;
    }

    .isla-flotante__drawer-modules .isla-flotante__modbadge {
      width: 32px;
      height: 32px;
    }

    .isla-flotante__drawer-modules .isla-flotante__moddesc {
      font-size: .7rem;
    }

    .isla-flotante__drawer-side {
      display: flex;
      flex-direction: column;
      gap: .15rem;
      padding-left: .5rem;
      border-left: 1px solid rgba(255, 255, 255, .07);
    }

    .isla-flotante__drawer-link {
      font-family: Inter, sans-serif;
      font-size: .875rem;
      color: rgba(255, 255, 255, .65);
      text-decoration: none;
      white-space: nowrap;
      padding: .5rem .55rem;
      border-radius: 8px;
      transition: color .2s, background .2s;
    }

    .isla-flotante__drawer-link:hover {
      color: #fff;
      background: rgba(255, 255, 255, .07);
    }

    @media (min-width: 901px) {
      .isla-flotante__drawer {
        display: none;
      }
    }

    /* ================ RESPONSIVE <=900px ================ */
    @media (max-width: 900px) {

      .isla-flotante__links,
      .isla-flotante__login {
        display: none;
      }

      /* En móvil manda el botón CTA (~34px): el logo se queda por debajo
         para no engordar la barra. */
      .isla-flotante__logo img {
        height: 34px;
      }

      .isla-flotante__logo {
        margin-right: .5rem;
      }

      .isla-flotante__burger {
        display: flex;
      }

      /* Isla aprovechada: el padding lateral baja de 1.5rem a .75rem, así el
         logo se pega a la izquierda y la fila (logo + CTA + burger) deja de
         desbordar a 375px. !important porque .is-docked gana en especificidad. */
      .isla-flotante__nav {
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        border-radius: 16px !important;
        padding: .7rem .75rem !important;
      }

      .isla-flotante__nav .btn-primary {
        font-size: .78rem !important;
        padding: .45rem .9rem !important;
      }
    }

    /* ================ REDUCED MOTION ================ */
    @media (prefers-reduced-motion: reduce) {

      .isla-flotante__nav,
      .isla-flotante__dropdown,
      .isla-flotante__chevron,
      .isla-flotante__bar,
      .isla-flotante__drawer,
      .isla-flotante__navlink,
      .isla-flotante__moditem,
      .isla-flotante__login,
      .isla-flotante__burger {
        transition: none !important;
        animation: none !important;
      }

      .isla-flotante__nav {
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        border-radius: 16px !important;
      }
    }
  


      .tpv-redesign-vars {
        /* Identidad Visual TPV */
        --tpv-accent: #0bf597;
        --tpv-accent-glow: rgba(11, 245, 151, 0.4);
        --tpv-error: #ef4444;
        --tpv-error-glow: rgba(239, 68, 68, 0.4);

        /* Fondos Universales */
        --bg-light: #ffffff;
        --bg-dark: #0f172a;

        /* Tipografía */
        --text-dark: #0f172a;
        --text-light: #ffffff;
        --text-muted: #64748b;
        --text-muted-dark: #94a3b8;
        --font-display: 'Montserrat', sans-serif;
        --font-body: 'Inter', sans-serif;

        /* UI TPV Core */
        --neon-line: 0 0 10px var(--tpv-accent-glow), 0 0 20px var(--tpv-accent);
        --radius-lg: 16px;
        --radius-xl: 24px;
      }

      /* Gradient Text para Títulos */
      .text-gradient {
        background: linear-gradient(135deg, #06b6d4 0%, var(--tpv-accent) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
      }

      


        /* COMPARE MOCKUPS - GLOBAL */
        .compare-stack { display: flex; flex-direction: column; gap: 30px; margin-top: 20px; }
        .compare-variant { position: relative; border-radius: 12px; padding: 20px 10px 10px; border: 1px solid transparent; transition: transform 0.3s ease; }
        .compare-variant:hover { transform: translateY(-3px); }
        .compare-variant--dark { background: #0f172a; border-color: rgba(255,255,255,0.05); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
        .compare-variant--light { background: #fff; border-color: #e2e8f0; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .compare-flag { position: absolute; top: -12px; left: 20px; background: var(--tpv-accent); color: var(--bg-dark); font-size: 0.7rem; font-weight: 800; padding: 4px 12px; border-radius: 20px; z-index: 10; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(11,245,151,0.3); }
        .compare-flag small { font-weight: 500; opacity: 0.8; font-size: 0.65rem; }

        /* S6b.A VARIANTS (V2 & V3) */
        .tpv-compliance-v2 { display: flex; align-items: center; justify-content: center; position: relative; height: 280px; }
        .v2-shield { width: 100px; height: 110px; background: rgba(11,245,151,0.1); border: 2px solid var(--tpv-accent); border-radius: 10px 10px 50px 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(11,245,151,0.2); position: relative; z-index: 2; }
        .v2-shield::before { content:''; position: absolute; inset: -15px; border-radius: 50%; border: 1px dashed rgba(11,245,151,0.3); animation: spin 10s linear infinite; }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        .v2-shield-icon { font-size: 2rem; margin-bottom: 5px; }
        .v2-shield-text { font-size: 0.7rem; font-weight: bold; color: var(--tpv-accent); }
        .v2-check { position: absolute; font-size: 0.85rem; font-weight: 600; color: #cbd5e1; display: flex; align-items: center; gap: 6px; }
        .v2-check::before { content: '✓'; color: var(--tpv-accent); }
        .v2-check--1 { top: 20px; left: 20px; }
        .v2-check--2 { top: 20px; right: 20px; }
        .v2-check--3 { bottom: 60px; left: 20px; }
        .v2-check--4 { bottom: 60px; right: 20px; }
        .v2-hash { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: 'Courier New', monospace; font-size: 0.8rem; color: #94a3b8; }

        .tpv-compliance-v3 { display: flex; justify-content: center; padding: 20px; }
        .v3-doc { background: #fff; width: 320px; padding: 25px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); transform: rotate(1deg); position: relative; color: #111; border: 1px solid #e2e8f0; }
        .v3-header { border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 15px; font-weight: bold; }
        .v3-item { display: flex; justify-content: space-between; font-family: 'Courier New', monospace; font-size: 0.9rem; margin-bottom: 5px; }
        .v3-total { border-top: 1px solid #111; margin-top: 10px; padding-top: 10px; font-weight: bold; display: flex; justify-content: space-between; }
        .v3-qr-zone { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 25px; }
        .v3-qr { width: 50px; height: 50px; background: repeating-conic-gradient(#111 0% 25%, #fff 0% 50%) 50% / 10px 10px; border: 2px solid #111; }
        .v3-hash { font-family: 'Courier New', monospace; font-size: 0.7rem; color: #666; max-width: 180px; word-break: break-all; }
        .v3-stamp { position: absolute; bottom: 30px; right: 20px; border: 3px double #10b981; border-radius: 50%; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; color: #10b981; font-weight: 900; font-size: 0.9rem; transform: rotate(-25deg); opacity: 0.8; mix-blend-mode: multiply; }

        /* S6b.C VARIANTS (V2 & V3) */
        .tpv-analytics-v2 { padding: 40px 20px; position: relative; }
        .v2-chart-wrap { height: 180px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px; }
        .v2-area { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(11,245,151,0.3), transparent); clip-path: polygon(0 100%, 0 80%, 25% 60%, 50% 90%, 75% 30%, 100% 50%, 100% 100%); }
        .v2-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; stroke: var(--tpv-accent); stroke-width: 3; fill: none; }
        .v2-x-axis { display: flex; justify-content: space-between; font-size: 0.8rem; color: #64748b; font-family: 'Courier New', monospace; }
        .v2-tooltip { position: absolute; top: 10px; right: 20%; background: rgba(255,255,255,0.1); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: 10px 15px; color: #fff; text-align: center; }
        .v2-tooltip strong { display: block; font-size: 1.2rem; color: var(--tpv-accent); }
        .v2-point { position: absolute; top: 30%; right: 25%; width: 12px; height: 12px; background: #fff; border: 3px solid var(--tpv-accent); border-radius: 50%; box-shadow: 0 0 10px var(--tpv-accent); }
        .v2-kpis { display: flex; justify-content: space-around; margin-top: 30px; font-size: 0.9rem; }
        .v2-kpi { background: rgba(255,255,255,0.05); padding: 8px 15px; border-radius: 20px; color: #cbd5e1; }

        .tpv-analytics-v3 { padding: 30px; }
        .v3-layout { display: flex; gap: 30px; align-items: center; }
        .v3-calendar { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; text-align: center; font-size: 0.75rem; color: #94a3b8; }
        .v3-cell { aspect-ratio: 1; border-radius: 4px; background: rgba(11,245,151,0.1); }
        .v3-cell[data-v="0"] { background: rgba(255,255,255,0.05); }
        .v3-cell[data-v="1"] { background: rgba(11,245,151,0.2); }
        .v3-cell[data-v="2"] { background: rgba(11,245,151,0.5); }
        .v3-cell[data-v="3"] { background: rgba(11,245,151,0.8); }
        .v3-cell[data-v="4"] { background: var(--tpv-accent); box-shadow: 0 0 10px var(--tpv-accent); border: 1px solid #fff; }
        .v3-insights { width: 150px; display: flex; flex-direction: column; gap: 15px; }
        .v3-card { background: rgba(255,255,255,0.05); border-left: 3px solid var(--tpv-accent); padding: 10px; border-radius: 0 8px 8px 0; }
        .v3-card-lbl { font-size: 0.7rem; color: #94a3b8; }
        .v3-card-val { font-size: 0.95rem; color: #fff; font-weight: bold; }

        




        .tpv-register {
          background-color: var(--bg-light);
          background-image: linear-gradient(rgba(11, 245, 151, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 245, 151, 0.14) 1px, transparent 1px);
          background-size: 48px 48px;
          padding: 120px 0;
          position: relative;
          overflow: hidden;
        }

        .tpv-register__container {
          max-width: 1100px;
          margin: 0 auto;
          padding: 0 5vw;
        }

        .tpv-register__header {
          text-align: center;
          margin-bottom: 60px;
        }

        .tpv-register__title {
          font-family: var(--font-display);
          font-size: clamp(2.2rem, 5vw, 3.8rem);
          font-weight: 800;
          color: var(--text-dark);
          margin: 0 0 20px 0;
        }

        .tpv-register__subtitle {
          font-size: 1.25rem;
          color: var(--text-muted);
          max-width: 800px;
          margin: 0 auto;
          line-height: 1.6;
        }

        /* Marco del mockup */
        .tpv-register__screen-wrap {
          max-width: 680px;
          margin: 0 auto;
          padding: 12px;
          background: linear-gradient(145deg, #1e293b, #0f172a);
          border-radius: 20px;
          box-shadow:
            0 40px 80px rgba(0, 0, 0, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        /* Pantalla interna */
        .tpv-register__screen {
          background: #0c1222;
          border-radius: 12px;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.03);
        }

        /* Barra de título */
        .tpv-register__titlebar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14px 20px;
          background: rgba(255, 255, 255, 0.03);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .tpv-register__app-name {
          color: #94a3b8;
          font-size: 0.85rem;
          font-weight: 600;
          letter-spacing: 1px;
          text-transform: uppercase;
        }

        .tpv-register__dots {
          display: flex;
          gap: 6px;
        }

        .tpv-register__dots span {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
        }

        .tpv-register__dots span:nth-child(1) {
          background: #ef4444;
        }

        .tpv-register__dots span:nth-child(2) {
          background: #f59e0b;
        }

        .tpv-register__dots span:nth-child(3) {
          background: #10b981;
        }

        /* Items del ticket */
        .tpv-register__items {
          padding: 10px 0;
        }

        .tpv-register__item {
          display: flex;
          align-items: center;
          padding: 14px 24px;
          color: #e2e8f0;
          font-size: 1rem;
          border-bottom: 1px solid rgba(255, 255, 255, 0.03);
          opacity: 0;
          transform: translateX(40px);
          animation: slideInItem 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes slideInItem {
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        .tpv-register__qty {
          color: var(--tpv-accent);
          font-weight: 700;
          font-family: 'Courier New', monospace;
          min-width: 35px;
          font-size: 0.9rem;
        }

        .tpv-register__name {
          flex: 1;
          color: #cbd5e1;
        }

        .tpv-register__price {
          font-weight: 700;
          font-family: 'Courier New', monospace;
          color: #f8fafc;
          font-size: 1.05rem;
        }

        /* Separador */
        .tpv-register__divider {
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(11, 245, 151, 0.3), transparent);
          margin: 0 24px;
        }

        /* Total */
        .tpv-register__total {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 24px;
          font-size: 1.1rem;
          font-weight: 800;
          color: #f8fafc;
        }

        .tpv-register__total-value {
          font-size: 1.8rem;
          font-family: 'Courier New', monospace;
          color: var(--tpv-accent);
          text-shadow: 0 0 20px var(--tpv-accent-glow);
        }

        /* Badges de confirmación */
        .tpv-register__confirmation {
          display: flex;
          gap: 10px;
          padding: 16px 24px 20px;
          flex-wrap: wrap;
        }

        .tpv-register__badge {
          padding: 6px 14px;
          border-radius: 30px;
          font-size: 0.8rem;
          font-weight: 600;
          opacity: 0;
          animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        .tpv-register__badge--ticket {
          background: rgba(11, 245, 151, 0.1);
          color: var(--tpv-accent);
          border: 1px solid rgba(11, 245, 151, 0.2);
          animation-delay: 3.5s;
        }

        .tpv-register__badge--stock {
          background: rgba(59, 130, 246, 0.1);
          color: #60a5fa;
          border: 1px solid rgba(59, 130, 246, 0.2);
          animation-delay: 3.8s;
        }

        .tpv-register__badge--erp {
          background: rgba(139, 92, 246, 0.1);
          color: #a78bfa;
          border: 1px solid rgba(139, 92, 246, 0.2);
          animation-delay: 4.1s;
        }

        @keyframes badgePop {
          0% {
            opacity: 0;
            transform: scale(0.7);
          }

          100% {
            opacity: 1;
            transform: scale(1);
          }
        }

        /* RESPONSIVE */
        @media (max-width: 600px) {
          .tpv-register__screen-wrap {
            padding: 6px;
            border-radius: 14px;
            margin: 0 -2vw;
          }

          .tpv-register__item {
            padding: 12px 16px;
            font-size: 0.9rem;
          }

          .tpv-register__total-value {
            font-size: 1.4rem;
          }

          .tpv-register__confirmation {
            flex-direction: column;
            gap: 6px;
          }

          .tpv-register__badge {
            text-align: center;
          }
        }
      


        .tpv-compliance {
          background-color: var(--bg-dark);
          color: var(--text-light);
          padding: 120px 0;
          border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .tpv-compliance__header {
          text-align: center;
          margin-bottom: 60px;
        }

        .tpv-compliance__title {
          font-family: var(--font-display);
          font-size: clamp(2.2rem, 5vw, 3.5rem);
          font-weight: 800;
          color: var(--text-light);
          margin-bottom: 20px;
        }

        .tpv-compliance__subtitle {
          font-size: 1.25rem;
          color: var(--text-muted-dark);
          max-width: 800px;
          margin: 0 auto;
          line-height: 1.6;
        }

        
        /* S6b.A VARIANTS */
        .tpv-compliance-v1 { padding: 20px; }
        .v1-pipeline { display: flex; align-items: center; justify-content: space-between; position: relative; margin-bottom: 40px; }
        .v1-node { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 2; width: 60px; }
        .v1-node-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 1px solid rgba(255,255,255,0.1); }
        .v1-node-lbl { font-size: 0.75rem; color: #94a3b8; font-weight: 600; text-align: center; }
        .v1-line-wrap { position: absolute; top: 20px; left: 30px; right: 30px; height: 2px; background: rgba(255,255,255,0.1); z-index: 1; }
        .v1-pulse { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; background: var(--tpv-accent); border-radius: 50%; box-shadow: 0 0 10px var(--tpv-accent); animation: v1pulse 3s linear infinite; }
        @keyframes v1pulse { to { left: 100%; } }
        
        .v1-blocks { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
        .v1-block { background: rgba(11,245,151,0.05); border: 1px solid rgba(11,245,151,0.2); border-radius: 8px; padding: 10px 15px; font-family: 'Courier New', monospace; font-size: 0.8rem; color: var(--tpv-accent); position: relative; }
        .v1-block:not(:last-child)::after { content: '→'; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.3); }
        
        .v1-badges { display: flex; justify-content: center; gap: 20px; }
        .v1-badge { padding: 6px 12px; background: rgba(11,245,151,0.1); border: 1px solid var(--tpv-accent); border-radius: 20px; color: var(--tpv-accent); font-size: 0.8rem; font-weight: bold; }

        
        .tpv-compliance__screen-wrap {
          max-width: 650px;
          margin: 0 auto;
          padding: 10px;
          background: linear-gradient(145deg, #1e293b, #0f172a);
          border-radius: 16px;
          box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .tpv-compliance__screen {
          background: #0c1222;
          border-radius: 10px;
          overflow: hidden;
        }

        .tpv-compliance__titlebar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 20px;
          background: rgba(255, 255, 255, 0.03);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          font-size: 0.8rem;
          font-weight: 600;
          color: #64748b;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .tpv-compliance__dots {
          display: flex;
          gap: 6px;
        }

        .tpv-compliance__dots span {
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }

        .tpv-compliance__dots span:nth-child(1) {
          background: #ef4444;
        }

        .tpv-compliance__dots span:nth-child(2) {
          background: #f59e0b;
        }

        .tpv-compliance__dots span:nth-child(3) {
          background: #10b981;
        }

        .tpv-compliance__body {
          padding: 24px;
        }

        .tpv-compliance__row {
          display: flex;
          justify-content: space-between;
          font-family: 'Courier New', Courier, monospace;
          color: #e2e8f0;
          font-size: 0.9rem;
          padding: 6px 0;
        }

        .tpv-compliance__stamps {
          display: flex;
          gap: 12px;
          margin-top: 16px;
        }

        .tpv-compliance__stamp {
          flex: 1;
          padding: 12px 16px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          gap: 10px;
          font-family: 'Courier New', monospace;
          font-weight: 600;
          font-size: 0.85rem;
          opacity: 0;
        }

        .tpv-compliance__stamp--verifactu {
          background: rgba(11, 245, 151, 0.08);
          color: var(--tpv-accent);
          border: 1px solid rgba(11, 245, 151, 0.2);
        }

        .tpv-compliance__stamp--aeat {
          background: rgba(59, 130, 246, 0.08);
          color: #60a5fa;
          border: 1px solid rgba(59, 130, 246, 0.2);
        }

        .tpv-compliance__stamp.animate {
          animation: stampAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        @keyframes stampAppear {
          0% {
            opacity: 0;
            transform: scale(0.5) rotate(-8deg);
          }

          100% {
            opacity: 1;
            transform: scale(1) rotate(0);
          }
        }

        .tpv-compliance__hash {
          font-family: 'Courier New', monospace;
          font-size: 0.75rem;
          color: #475569;
          padding: 10px 0 0;
          letter-spacing: 1px;
          word-break: break-all;
        }

        .tpv-compliance__cards {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
          margin-top: 50px;
        }

        .tpv-compliance__card {
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding: 24px;
          background: white;
          border-radius: var(--radius-lg);
          border: 1px solid rgba(0, 0, 0, 0.05);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
          transition: all 0.3s ease;
        }

        .tpv-compliance__card:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
          border-color: rgba(11, 245, 151, 0.3);
        }

        .tpv-compliance__card-icon {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: rgba(11, 245, 151, 0.08);
          color: #059669;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .tpv-compliance__card h3 {
          font-size: 1rem;
          font-weight: 700;
          color: var(--text-dark);
          margin-bottom: 0;
        }

        .tpv-compliance__card p {
          font-size: 0.9rem;
          color: var(--text-muted);
          line-height: 1.5;
          margin: 0;
        }

        @media (max-width: 768px) {
          .tpv-compliance__cards {
            grid-template-columns: 1fr;
          }

          .tpv-compliance__stamps {
            flex-direction: column;
          }

          .tpv-compliance__subtitle {
            font-size: 1rem;
            line-height: 1.55;
          }
        }
      


.escalera-conectada__wrap{margin-top:50px;position:relative;box-sizing:border-box;max-width:100%;font-family:var(--font-body,'Inter',sans-serif);}
.escalera-conectada__wrap *{box-sizing:border-box;}
.escalera-conectada__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px;z-index:1;}
.escalera-conectada__card{position:relative;z-index:1;background:rgba(255,255,255,.045);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:26px 24px;max-width:100%;opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .35s ease;display:flex;flex-direction:column;}
.escalera-conectada__card.is-revealed{opacity:1;transform:translateY(0);}
.escalera-conectada__cta{position:relative;margin-top:48px;padding:38px 40px;max-width:640px;margin-left:auto;margin-right:auto;border-radius:22px;text-align:center;opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);overflow:hidden;isolation:isolate;background:radial-gradient(120% 160% at 50% -20%,rgba(11,245,151,.09) 0%,rgba(11,245,151,0) 60%),rgba(255,255,255,.018);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.escalera-conectada__cta::before{content:'';position:absolute;inset:0;padding:1.5px;border-radius:inherit;background:linear-gradient(135deg,rgba(11,245,151,.85),rgba(11,245,151,.15) 35%,rgba(11,245,151,.15) 65%,rgba(11,245,151,.75));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:-1;}
.escalera-conectada__cta.is-revealed{opacity:1;transform:translateY(0);}
.escalera-conectada__cta-badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;margin:0 0 18px;background:rgba(11,245,151,.12);border:1px solid rgba(11,245,151,.35);color:var(--tpv-accent,#0bf597);box-shadow:0 0 0 8px rgba(11,245,151,.06);}
.escalera-conectada__cta-badge svg{width:24px;height:24px;}
.escalera-conectada__cta h3{font-family:var(--font-display,'Montserrat',sans-serif);font-weight:800;font-size:1.5rem;color:var(--text-light,#fff);margin:0 0 10px;}
.escalera-conectada__cta-text{font-family:var(--font-body,'Inter',sans-serif);font-size:1rem;color:var(--text-muted-dark,#94a3b8);margin:0 auto 24px;line-height:1.5;max-width:520px;}
.escalera-conectada__cta-text strong{color:var(--text-light,#fff);font-weight:700;}
#tpv-compliance-cards-cta .btn-primary{animation:ctaBtnPulse 3s ease-in-out infinite;}
.escalera-conectada__cta-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0 0 28px;}
.escalera-conectada__cta-chip{display:inline-flex;align-items:center;gap:6px;font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;font-size:.72rem;letter-spacing:.3px;color:var(--tpv-accent,#0bf597);background:rgba(11,245,151,.08);border:1px solid rgba(11,245,151,.22);border-radius:99px;padding:6px 12px;}
.escalera-conectada__cta-chip svg{width:11px;height:11px;flex:0 0 auto;}
.escalera-conectada__cta .btn-primary{box-shadow:0 8px 26px rgba(11,245,151,.28);}
.escalera-conectada__card:hover,.escalera-conectada__card.is-turn{transform:translateY(-8px);border-color:rgba(11,245,151,.35);}
.escalera-conectada__node{width:44px;height:44px;margin:0 0 14px 0;border-radius:50%;border:2px solid var(--tpv-accent,#0bf597);background:rgba(11,245,151,.10);color:var(--tpv-accent,#0bf597);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .45s ease .1s,transform .45s cubic-bezier(.34,1.56,.64,1) .1s,box-shadow .35s ease;}
.escalera-conectada__card.is-revealed .escalera-conectada__node{opacity:1;transform:scale(1);}
.escalera-conectada__card:hover .escalera-conectada__node,.escalera-conectada__card.is-turn .escalera-conectada__node{box-shadow:0 0 0 6px rgba(11,245,151,.10);}
.escalera-conectada__label{display:block;font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;font-size:10px;letter-spacing:2px;color:var(--tpv-accent,#0bf597);margin-bottom:10px;}
.escalera-conectada__card h3{font-family:var(--font-display,'Montserrat',sans-serif);font-weight:700;font-size:1.05rem;color:var(--text-light,#fff);margin:0 0 8px 0;}
.escalera-conectada__card p{font-family:var(--font-body,'Inter',sans-serif);font-size:.9rem;line-height:1.5;color:var(--text-muted-dark,#94a3b8);margin:0 0 18px 0;}
.bandeja-verifactu__mock{position:relative;box-sizing:border-box;margin-top:auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.04);height:192px;display:flex;flex-direction:column;}
.bv-winbar{height:26px;flex:0 0 26px;background:#f1f5f9;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:5px;padding:0 10px;position:relative;box-sizing:border-box;}
.bv-dot{width:8px;height:8px;border-radius:50%;display:block;flex:0 0 auto;}
.bv-dot--r{background:#ef4444;}
.bv-dot--y{background:#f59e0b;}
.bv-dot--g{background:#10b981;}
.bv-wintitle{position:absolute;left:50%;transform:translateX(-50%);font-family:monospace;font-size:9px;color:#94a3b8;letter-spacing:.02em;}
.bv-winbody{padding:12px 14px;box-sizing:border-box;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.bv-table{display:flex;flex-direction:column;gap:6px;}
.bv-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:6px;background:transparent;border:1px dashed transparent;transition:background .6s ease,border-color .3s ease;font-family:var(--font-body,'Inter',sans-serif);font-size:.72rem;color:#334155;box-sizing:border-box;}
.bv-row.bv-flash{background:rgba(11,245,151,.12);}
.bv-row--denied{border-color:#ef4444;animation:bandeja-verifactu-shake .4s ease;}
.bv-chip{font-family:monospace;font-size:.62rem;padding:2px 7px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;background:#e2e8f0;color:#64748b;white-space:nowrap;}
.bv-chip--sealed{background:rgba(11,245,151,.15);color:#0a9b6c;}
.bv-toast{position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);background:#0f172a;color:#fff;font-size:.64rem;font-weight:600;padding:5px 12px;border-radius:999px;white-space:nowrap;text-align:center;opacity:0;transition:bottom .35s ease,opacity .35s ease;box-sizing:border-box;box-shadow:0 4px 12px rgba(0,0,0,.28);}
.bv-toast--show{bottom:10px;opacity:1;}
@keyframes bandeja-verifactu-shake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-5px);}40%,60%{transform:translateX(5px);}}
.bv-panel{font-family:var(--font-body,'Inter',sans-serif);font-size:.78rem;color:#334155;}
.bv-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.bv-panel__title{font-size:.68rem;color:#94a3b8;font-family:monospace;}
.bv-panel__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.bv-toggle{width:38px;height:20px;border-radius:99px;background:#cbd5e1;position:relative;transition:background .4s ease;display:inline-block;flex:0 0 auto;}
.bv-toggle__ball{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .4s ease;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.bv-toggle--on{background:var(--tpv-accent,#0bf597);}
.bv-toggle--on .bv-toggle__ball{left:20px;}
.bv-checklist{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px;}
.bv-check{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease;color:#334155;}
.bv-check--done{opacity:1;transform:translateY(0);}
.bv-check__box{width:16px;height:16px;border-radius:4px;border:1.5px solid #cbd5e1;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .25s ease,border-color .25s ease;box-sizing:border-box;}
.bv-check--done .bv-check__box{background:var(--tpv-accent,#0bf597);border-color:var(--tpv-accent,#0bf597);}
.bv-check__svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.2;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s ease .05s;}
.bv-check--done .bv-check__svg{stroke-dashoffset:0;}
.bv-chip--signed{opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease;background:rgba(11,245,151,.15);color:#0a9b6c;}
.bv-chip--show{opacity:1;transform:translateY(0);}
.bv-aeat{font-family:var(--font-body,'Inter',sans-serif);font-size:.78rem;color:#334155;}
.bv-aeat__row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.bv-aeat__status{font-size:.68rem;color:#94a3b8;font-family:monospace;}
.bv-progress{height:6px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin-bottom:8px;}
.bv-progress__fill{height:100%;width:0%;background:#94a3b8;border-radius:99px;transition:width 1.6s ease,background-color .4s ease;}
.bv-progress__fill--done{background:var(--tpv-accent,#0bf597);}
.bv-aeat__meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.bv-aeat__pctnum{font-family:monospace;font-size:.72rem;color:#334155;}
.bv-aeat__check{width:20px;height:20px;border-radius:50%;background:var(--tpv-accent,#0bf597);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1);}
.bv-aeat__check--show{opacity:1;transform:scale(1);}
.bv-aeat__check svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.4;}
.bv-aeat__csv{font-size:.68rem;color:#94a3b8;opacity:0;transition:opacity .3s ease;}
.bv-aeat__csv--show{opacity:1;}
@media (max-width:768px){
  /* [S4] El grid de 3 cards se convierte en SLIDER (mismo patrón que los bento) */
  .escalera-conectada__grid{
    display:flex;
    grid-template-columns:none;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:16px;
    margin-top:32px;
    margin-left:-20px;
    margin-right:-20px;
    padding:10px 20px 6px;
  }
  .escalera-conectada__grid::-webkit-scrollbar{ display:none; }
  .escalera-conectada__card{
    scroll-snap-align:center;
    flex:0 0 86%;
    max-width:86%;
    /* En el slider todas las cards se ven: se anula el estado inicial oculto */
    opacity:1;
    transform:none;
  }
  .escalera-conectada__card .escalera-conectada__node{ opacity:1; transform:scale(1); }
  /* El hover táctil no aplica: el realce pasa a la card centrada (.is-focus) */
  .escalera-conectada__card:hover{ transform:none; }
  .escalera-conectada__card.is-focus{
    transform:translateY(-4px);
    border-color:rgba(11,245,151,.35);
    box-shadow:0 20px 44px rgba(11,245,151,.10);
  }
  .escalera-conectada__card.is-focus .escalera-conectada__node{ box-shadow:0 0 0 6px rgba(11,245,151,.10); }
  /* Dots del slider (usa .bento-carousel-dots/.bento-dot compartidos: ocultos en desktop, flex en móvil) */
  .escalera-conectada__dots{ margin-top:6px; }
  #tpv-compliance-cards .bento-dot{ background:rgba(255,255,255,.28); }
  #tpv-compliance-cards .bento-dot.active{ background:#0bf597; }
}
@media (prefers-reduced-motion: reduce){
  .escalera-conectada__card,.escalera-conectada__node,.escalera-conectada__cta,
  .bv-row,.bv-toggle,.bv-toggle__ball,.bv-check,.bv-check__box,.bv-check__svg,.bv-chip--signed,.bv-progress__fill,.bv-aeat__check,.bv-aeat__csv,.bv-toast{
    animation:none!important;transition:none!important;
  }
  .escalera-conectada__card{opacity:1!important;transform:translateY(0)!important;}
  .escalera-conectada__node{opacity:1!important;transform:scale(1)!important;}
  .escalera-conectada__cta{opacity:1!important;transform:translateY(0)!important;}
  #tpv-compliance-cards-cta .btn-primary{animation:none!important;}
}



  /* BASE (desktop): clon FIEL del CSS original, namespaced .cv-bridge__/.cv__ — render idéntico a ≥768px */
  .cv-bridge {
    background-color: #f8fafc;
    color: var(--text-dark);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #e2e8f0;
    background-image: linear-gradient(rgba(11, 245, 151, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 245, 151, 0.14) 1px, transparent 1px);
    background-size: 48px 48px;
  }

  .cv-bridge__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5vw;
    position: relative;
    z-index: 1;
  }

  .cv-bridge__header {
    text-align: center;
    margin-bottom: 80px;
  }

  .cv-bridge__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--text-dark);
  }

  .cv-bridge__subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* ── Dos canales, un número ── */
  .cv {
    display: grid;
    grid-template-columns: 1fr 104px 1fr;
    align-items: center;
    margin-bottom: 48px;
  }

  /* Device shell */
  .cv__device {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 24px rgba(15,23,42,.07), 0 1px 0 rgba(255,255,255,.9) inset;
    transition: box-shadow .25s, transform .25s;
  }
  .cv__device:hover {
    box-shadow: 0 16px 44px rgba(15,23,42,.11);
    transform: translateY(-3px);
  }

  /* TPV terminal bar */
  .cv__dbar--tpv {
    background: #0f172a;
    padding: 11px 18px;
    display: flex; align-items: center; gap: 10px;
  }
  .cv__dbar-pill {
    font: 700 .65rem 'Courier New', monospace;
    color: var(--tpv-accent);
    letter-spacing: .3px;
  }
  .cv__dbar-name {
    font: 500 .65rem 'Courier New', monospace;
    color: rgba(255,255,255,.32);
    margin-left: auto;
  }

  /* Web browser bar */
  .cv__dbar--web {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 11px 18px;
    display: flex; align-items: center; gap: 10px;
  }
  .cv__bdots { display: flex; gap: 5px; }
  .cv__bdots span {
    width: 10px; height: 10px; border-radius: 50%;
  }
  .cv__bdots span:nth-child(1) { background: #fca5a5; }
  .cv__bdots span:nth-child(2) { background: #fde68a; }
  .cv__bdots span:nth-child(3) { background: #6ee7b7; }
  .cv__dbar-url {
    font: .67rem 'Courier New', monospace;
    color: #94a3b8;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 3px 12px;
    margin: 0 auto;
  }

  /* Device body */
  .cv__dbody {
    background: #fff;
    padding: 48px 36px;
    text-align: center;
    position: relative;
  }

  /* Channel label */
  .cv__ch {
    font: 700 .68rem var(--font-body);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 16px;
  }

  /* Event chip — slides down from top on sync */
  .cv__chip {
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: var(--tpv-accent);
    color: #042a16;
    font: 700 .64rem var(--font-body);
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(11,245,151,.4);
  }
  .cv__chip.cv--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ── THE NUMBER ── */
  .cv__num {
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 8.5vw, 5.6rem);
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 10px;
    transform-origin: center;
    display: block;
  }
  @keyframes cv-flash {
    0%   { color: var(--text-dark); }
    35%  { color: #0a8f5b; }
    100% { color: var(--text-dark); }
  }
  .cv__num.cv--flash { animation: cv-flash .75s cubic-bezier(.4,0,.2,1); }

  .cv__num-lbl {
    font-size: .72rem;
    color: var(--text-muted);
    letter-spacing: .3px;
  }

  /* ── Connector ── */
  .cv__conn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 0 2px;
  }
  .cv__cline {
    width: 100%; height: 2px;
    background: rgba(11,245,151,.2);
    border-radius: 1px;
    position: relative;
    transition: background .3s, box-shadow .3s;
  }
  .cv__cline.cv--active {
    background: rgba(11,245,151,.55);
    box-shadow: 0 0 12px rgba(11,245,151,.4);
  }
  /* La segunda línea (subida) solo existe para móvil: invisible en desktop */
  .cv__cline--up { display: none; }

  .cv__dot {
    position: absolute; top: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tpv-accent);
    box-shadow: 0 0 9px rgba(11,245,151,.7);
  }
  .cv__dot--r { animation: cv-r 2.6s ease-in-out infinite; }
  .cv__dot--l { animation: cv-l 2.6s ease-in-out infinite; animation-delay: 1.3s; }
  .cv__dot--burst {
    width: 11px; height: 11px; top: -4.5px;
    background: #fff;
    box-shadow: 0 0 18px rgba(11,245,151,1), 0 0 6px rgba(11,245,151,.5);
    opacity: 0;
    pointer-events: none;
  }
  .cv__dot--burst.cv--burst-r {
    animation: cv-r .62s cubic-bezier(.4,0,.2,1) forwards;
    opacity: 1;
  }
  .cv__dot--burst.cv--burst-l {
    animation: cv-l .62s cubic-bezier(.4,0,.2,1) forwards;
    opacity: 1;
  }
  /* Dot dedicado de la línea de subida (solo existe/anima en móvil) */
  .cv__dot--up { display: none; }

  @keyframes cv-r {
    0%   { left:0;                 opacity:0; }
    8%   { opacity:1; }
    92%  { opacity:1; }
    100% { left:calc(100% - 8px); opacity:0; }
  }
  @keyframes cv-l {
    0%   { left:calc(100% - 8px); opacity:0; }
    8%   { opacity:1; }
    92%  { opacity:1; }
    100% { left:0;                opacity:0; }
  }

  .cv__conn-tag {
    font: 600 .6rem var(--font-body);
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #0a8f5b;
    white-space: nowrap;
  }

  /* ── Stats row ── */
  .cv__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: .88rem;
    color: var(--text-muted);
    margin-bottom: 28px;
  }
  .cv__stats strong {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-dark);
  }
  .cv__stats-zero strong { color: #0a8f5b; }
  .cv__stats-sep { color: #cbd5e1; }

  /* ── Multi-tienda note ── */
  .cv__multi {
    text-align: center;
    font-size: .82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    line-height: 1.55;
  }
  .cv__multi svg { color: #0a8f5b; flex-shrink: 0; }
  .cv__multi strong { color: var(--text-dark); font-weight: 600; }

  /* RESPONSIVE: toda la adaptación aquí dentro */
  @media (max-width: 767px) {
    .cv-bridge { padding: 72px 0; background-image: none; }
    .cv-bridge__header { margin-bottom: 40px; }
    .cv-bridge__title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
    .cv-bridge__subtitle { font-size: 1rem; }

    .cv { grid-template-columns: 1fr; gap: 0; }
    .cv__dbody { padding: 32px 24px; }

    .cv__device { box-shadow: 0 2px 10px rgba(15,23,42,.08); }
    .cv__device:hover { transform: none; box-shadow: 0 2px 10px rgba(15,23,42,.08); }

    /* Doble cordón: una línea baja (Tienda Física → eCommerce), otra sube (eCommerce → Tienda Física) */
    .cv__conn {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "down up" "tag tag";
      column-gap: 22px;
      row-gap: 8px;
      align-items: start;
      justify-items: center;
      max-width: 150px;
      margin: 0 auto;
      padding: 10px 0;
    }
    .cv__cline { width: 2px; height: 56px; margin: 0 auto; }
    .cv__cline--down { grid-area: down; }
    .cv__cline--up   { grid-area: up; display: block; }
    .cv__conn-tag    { grid-area: tag; }

    .cv__dot { top: 0; left: 50%; transform: translate(-50%, 0); }
    /* El dot--l ya no viaja por la línea de bajada: su función pasa a .cv__dot--up en la línea propia */
    .cv__dot--l { display: none; }

    /* Keyframes verticales nuevos: el desktop conserva cv-r / cv-l intactos */
    @keyframes cv-r-v {
      0%   { transform: translate(-50%, 0);    opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { transform: translate(-50%, 48px); opacity: 0; }
    }
    @keyframes cv-up-v {
      0%   { transform: translate(-50%, 48px); opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { transform: translate(-50%, 0);    opacity: 0; }
    }
    .cv__dot--r { animation-name: cv-r-v; }
    .cv__dot--up {
      display: block;
      animation: cv-up-v 2.6s ease-in-out infinite;
      animation-delay: 1.3s;
    }

    .cv__dot--burst.cv--burst-r { animation-name: cv-r-v; }
    .cv__dot--burst.cv--burst-up { animation-name: cv-up-v; }

    /* Pausa de animación fuera de viewport (capa de rendimiento del JS) */
    .cv--paused .cv__dot { animation-play-state: paused; }

    /* Espejo: el canal web deja de gritar el número; el TPV manda */
    .cv__device--web .cv__num { font-size: 2.2rem; letter-spacing: -.5px; }
    .cv__device--web .cv__num::before { content: "= "; color: #0a8f5b; }
    .cv__device--tpv .cv__num { font-size: 3.4rem; letter-spacing: -1.5px; }

    .cv__stats { flex-direction: column; gap: 8px; }
    .cv__stats-sep { display: none; }

    .cv__multi { flex-direction: column; text-align: center; gap: 6px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cv__dot { animation: none; opacity: .5; top: 24px; left: 50%; transform: translate(-50%,0); }
    .cv__chip { transition: none; }
    .cv__num { animation: none !important; }
  }



        /* ===== [S6b.B] COMPARATIVA — 4 SECCIONES COMPLETAS en tema OSCURO ===== */
        .tpv-hardware {
          background-color: var(--bg-dark);
          color: var(--text-light);
          padding: 100px 0;
          border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .tpv-hardware__header { text-align: center; margin-bottom: 50px; }

        .tpv-hardware__title {
          font-family: var(--font-display);
          font-size: clamp(2.2rem, 5vw, 3.5rem);
          font-weight: 800;
          color: var(--text-light);
          margin-bottom: 20px;
        }

        .tpv-hardware__subtitle {
          font-size: 1.25rem;
          color: var(--text-muted-dark);
          max-width: 600px;
          margin: 0 auto;
          line-height: 1.6;
        }

        @keyframes hwPulse { 0% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } }
        @keyframes hwbPulse { 0% { stroke-dashoffset: 238; } 100% { stroke-dashoffset: 0; } }

        /* ===== IDEA A · Constelación neón ===== */
        .hwa-diagram {
          position: relative; width: 100%; max-width: 620px; height: 400px; margin: 0 auto;
        }
        .hwa-diagram::before {
          content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
          background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(11,245,151,0.08) 0%, transparent 70%);
        }
        .hwa-orbital {
          position: absolute; top: 50%; left: 50%; width: 76%; height: 78%;
          transform: translate(-50%, -50%); border-radius: 50%;
          border: 1px dashed rgba(255,255,255,0.07); pointer-events: none; z-index: 2;
        }
        .hwa-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
        .hwa-line-base { stroke-width: 1.5; stroke-dasharray: 5 7; fill: none; }
        .hwa-line-base--printer { stroke: rgba(244,63,94,0.18); }
        .hwa-line-base--scanner { stroke: rgba(139,92,246,0.18); }
        .hwa-line-base--drawer  { stroke: rgba(45,212,191,0.18); }
        .hwa-line-base--browser { stroke: rgba(56,189,248,0.18); }
        .hwa-line-pulse {
          fill: none; stroke-width: 2.5;
          stroke-dasharray: 20 180; stroke-dashoffset: 200;
        }
        .hwa-line-pulse--printer { stroke: rgba(244,63,94,0.9);   filter: drop-shadow(0 0 5px rgba(244,63,94,0.7)); }
        .hwa-line-pulse--scanner { stroke: rgba(139,92,246,0.9);  filter: drop-shadow(0 0 5px rgba(139,92,246,0.7)); }
        .hwa-line-pulse--drawer  { stroke: rgba(45,212,191,0.9);  filter: drop-shadow(0 0 5px rgba(45,212,191,0.7)); }
        .hwa-line-pulse--browser { stroke: rgba(56,189,248,0.9);  filter: drop-shadow(0 0 5px rgba(56,189,248,0.7)); }
        .hwa-diagram.animate .hwa-line-pulse { animation: hwPulse 4s linear infinite; }
        .hwa-line-pulse.d1 { animation-delay: -1s !important; }
        .hwa-line-pulse.d2 { animation-delay: -2s !important; }
        .hwa-line-pulse.d3 { animation-delay: -3s !important; }

        /* Centro */
        .hwa-center {
          position: absolute; top: 50%; left: 50%; opacity: 0;
          width: 114px; height: 114px; border-radius: 26px;
          background: rgba(13,20,40,0.95); border: 2px solid rgba(11,245,151,0.55);
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          z-index: 10; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
          color: #f1f5f9; text-align: center;
        }
        .hwa-diagram.animate .hwa-center {
          animation: hwaBreath 3s ease-in-out 0.05s infinite, hwaCenterIn 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        @keyframes hwaBreath {
          0%, 100% { box-shadow: 0 0 0 6px rgba(11,245,151,0.06), 0 0 40px rgba(11,245,151,0.22); }
          50%       { box-shadow: 0 0 0 10px rgba(11,245,151,0.1), 0 0 65px rgba(11,245,151,0.45); }
        }
        @keyframes hwaCenterIn {
          from { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
          to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
        }
        .hwa-center svg { color: var(--tpv-accent); width: 30px; height: 30px; margin-bottom: 6px; }

        /* Nodos */
        .hwa-node {
          position: absolute; width: 108px; height: 108px; border-radius: 22px;
          background: rgba(13,20,40,0.92); border: 1px solid transparent;
          box-shadow: 0 8px 24px rgba(0,0,0,0.35);
          display: flex; flex-direction: column; align-items: center; justify-content: center;
          gap: 8px; z-index: 5;
          opacity: 0; transform: translateY(18px);
          transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
                      border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .hwa-diagram.animate .hwa-node               { opacity: 1; transform: translateY(0); }
        .hwa-diagram.animate .hwa-node--printer       { transition-delay: 0.15s; }
        .hwa-diagram.animate .hwa-node--scanner       { transition-delay: 0.30s; }
        .hwa-diagram.animate .hwa-node--drawer        { transition-delay: 0.45s; }
        .hwa-diagram.animate .hwa-node--browser       { transition-delay: 0.60s; }
        .hwa-node:hover                               { transform: translateY(-6px); transition-delay: 0s !important; }

        /* Color por dispositivo */
        .hwa-node--printer { top: 1%; left: 6%; border-color: rgba(244,63,94,0.3); }
        .hwa-node--scanner { top: 1%; right: 6%; border-color: rgba(139,92,246,0.3); }
        .hwa-node--drawer  { bottom: 1%; left: 6%; border-color: rgba(45,212,191,0.3); }
        .hwa-node--browser { bottom: 1%; right: 6%; border-color: rgba(56,189,248,0.3); }

        .hwa-node--printer svg { color: rgba(244,63,94,0.85); }
        .hwa-node--scanner svg { color: rgba(139,92,246,0.85); }
        .hwa-node--drawer  svg { color: rgba(45,212,191,0.85); }
        .hwa-node--browser svg { color: rgba(56,189,248,0.85); }
        .hwa-node svg { width: 32px; height: 32px; }

        .hwa-node--printer:hover { border-color: rgba(244,63,94,0.6);  box-shadow: 0 0 28px rgba(244,63,94,0.22); }
        .hwa-node--scanner:hover { border-color: rgba(139,92,246,0.6); box-shadow: 0 0 28px rgba(139,92,246,0.22); }
        .hwa-node--drawer:hover  { border-color: rgba(45,212,191,0.6); box-shadow: 0 0 28px rgba(45,212,191,0.22); }
        .hwa-node--browser:hover { border-color: rgba(56,189,248,0.6); box-shadow: 0 0 28px rgba(56,189,248,0.22); }

        .hwa-node span { font-size: 0.76rem; color: #cbd5e1; font-weight: 600; }

        /* ===== IDEA B · Placa base / PCB ===== */
        .hwb-board { width: 100%; max-width: 660px; height: auto; margin: 0 auto; display: block; }
        .hwb-trace-base { stroke: rgba(11, 245, 151, 0.22); stroke-width: 2.5; fill: none; }
        .hwb-trace-pulse {
          stroke: var(--tpv-accent); stroke-width: 2.5; fill: none;
          stroke-dasharray: 18 220; stroke-dashoffset: 238;
          filter: drop-shadow(0 0 5px var(--tpv-accent));
        }
        .hwb-board.animate .hwb-trace-pulse { animation: hwbPulse 3.5s linear infinite; }
        .hwb-trace-pulse.b1 { animation-delay: 0.9s; }
        .hwb-trace-pulse.b2 { animation-delay: 1.8s; }
        .hwb-trace-pulse.b3 { animation-delay: 2.7s; }
        .hwb-pad { fill: rgba(255, 255, 255, 0.04); stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
        .hwb-chip { fill: rgba(11, 245, 151, 0.08); stroke: rgba(11, 245, 151, 0.5); stroke-width: 1.5; }
        .hwb-label { fill: #cbd5e1; font: 600 13px var(--font-body); }
        .hwb-chip-label { fill: #f1f5f9; font: 700 13px var(--font-display); }
        .hwb-via { fill: var(--tpv-accent); }

        /* ===== IDEA C · Consola plug-and-play ===== */
        .hwc {
          max-width: 580px; margin: 0 auto; border-radius: 14px; overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.08); background: #0b1120;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        }
        .hwc-bar {
          display: flex; align-items: center; gap: 12px; padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.06);
          font: 600 0.72rem var(--font-body); color: #64748b;
        }
        .hwc-bar span:nth-child(2) { flex: 1; }
        .hwc-dots { display: flex; gap: 6px; }
        .hwc-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
        .hwc-body { padding: 22px; font: 500 0.9rem/2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #cbd5e1; }
        .hwc-line { opacity: 0; transform: translateY(6px); }
        .hwc.animate .hwc-line { animation: hwcReveal 0.4s ease forwards; }
        .hwc.animate .hwc-line:nth-child(1) { animation-delay: 0.1s; }
        .hwc.animate .hwc-line:nth-child(2) { animation-delay: 0.5s; }
        .hwc.animate .hwc-line:nth-child(3) { animation-delay: 0.9s; }
        .hwc.animate .hwc-line:nth-child(4) { animation-delay: 1.3s; }
        .hwc.animate .hwc-line:nth-child(5) { animation-delay: 1.7s; }
        .hwc.animate .hwc-line:nth-child(6) { animation-delay: 2.2s; }
        .hwc-cmd { color: #94a3b8; }
        .hwc-ok { color: var(--tpv-accent); font-weight: 700; }
        .hwc-ok svg { width: 1em; height: 1em; vertical-align: -0.15em; }
        .hwc-meta { color: #64748b; }
        .hwc-final { color: #e2e8f0; margin-top: 10px; }
        .hwc-pill {
          display: inline-block; width: 8px; height: 8px; border-radius: 50%;
          background: var(--tpv-accent); box-shadow: 0 0 8px var(--tpv-accent); margin-right: 8px;
        }
        .hwc-cursor { color: var(--tpv-accent); animation: hwcBlink 1s step-end infinite; }
        @keyframes hwcReveal { to { opacity: 1; transform: none; } }
        @keyframes hwcBlink { 50% { opacity: 0; } }

        /* ===== IDEA D · Hub de puertos ===== */
        .hwd { max-width: 580px; margin: 0 auto; }
        .hwd-core {
          display: flex; align-items: center; justify-content: center; gap: 10px;
          width: 210px; margin: 0 auto 24px; padding: 14px; border-radius: 16px;
          background: rgba(11, 245, 151, 0.06); border: 1px solid rgba(11, 245, 151, 0.4);
          box-shadow: 0 0 40px rgba(11, 245, 151, 0.2);
          color: #f1f5f9; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
        }
        .hwd-core svg { width: 24px; height: 24px; color: var(--tpv-accent); }
        .hwd-ports { display: flex; flex-direction: column; gap: 12px; }
        .hwd-port {
          display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px;
          background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
          opacity: 0.35; transform: translateX(-8px); transition: all 0.5s ease;
        }
        .hwd.animate .hwd-port { opacity: 1; transform: none; }
        .hwd.animate .hwd-port:nth-child(1) { transition-delay: 0.1s; }
        .hwd.animate .hwd-port:nth-child(2) { transition-delay: 0.35s; }
        .hwd.animate .hwd-port:nth-child(3) { transition-delay: 0.6s; }
        .hwd.animate .hwd-port:nth-child(4) { transition-delay: 0.85s; }
        .hwd-proto {
          font: 800 0.66rem var(--font-body); letter-spacing: 1px; color: #06281c;
          background: var(--tpv-accent); padding: 6px 9px; border-radius: 6px; min-width: 60px; text-align: center;
        }
        .hwd-name { flex: 1; color: #e2e8f0; font-weight: 600; font-size: 0.92rem; }
        .hwd-name small { display: block; color: #64748b; font-weight: 500; font-size: 0.74rem; }
        .hwd-status { font-size: 0.72rem; color: var(--tpv-accent); font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
        .hwd-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tpv-accent); box-shadow: 0 0 8px var(--tpv-accent); }

        /* ===== Cards inferiores (tema oscuro) ===== */
        .tpv-hardware__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
        .tpv-hardware__card {
          display: flex; flex-direction: column; gap: 16px; padding: 24px;
          background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-lg);
          border: 1px solid rgba(255, 255, 255, 0.08);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); transition: all 0.3s ease;
        }
        .tpv-hardware__card:hover { transform: translateY(-5px); border-color: rgba(11, 245, 151, 0.3); box-shadow: 0 0 24px rgba(11, 245, 151, 0.15); }
        .tpv-hardware__card-icon {
          width: 40px; height: 40px; border-radius: 10px; background: rgba(11, 245, 151, 0.12);
          color: var(--tpv-accent); display: flex; align-items: center; justify-content: center;
        }
        .tpv-hardware__card h3 { font-size: 1rem; font-weight: 700; color: var(--text-light); margin-bottom: 0; }
        .tpv-hardware__card p { font-size: 0.9rem; color: var(--text-muted-dark); line-height: 1.5; margin: 0; }

        @media (max-width: 768px) {
          .hwa-diagram { height: 310px; }
          .hwa-node { width: 86px; height: 86px; border-radius: 18px; }
          .hwa-center { width: 102px; height: 102px; }
          .tpv-hardware__cards { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 600px) {
          .hwa-node { width: 72px; height: 72px; }
          .hwa-node span { font-size: 0.58rem; }
          .tpv-hardware__cards { grid-template-columns: 1fr; }
        }

        @media (prefers-reduced-motion: reduce) {
          .hwa-diagram.animate .hwa-line-pulse,
          .hwb-board.animate .hwb-trace-pulse { animation: none; }
          .hwa-diagram.animate .hwa-center { animation: none; opacity: 1; }
          .hwa-diagram.animate .hwa-node { opacity: 1; transform: none; transition: none; }
          .hwc.animate .hwc-line { animation: none; opacity: 1; transform: none; }
          .hwc-cursor { animation: none; }
          .hwd.animate .hwd-port { transition: none; opacity: 1; transform: none; }
        }
      


  /* Portado de la home (vía crm/index.html): base = home/css/home.css (.home-cta-mid) + overrides del bloque de estilos inline
     de home/index.html, renombrado a .tpv-cta-mid / #tpv-cta-intermedio.
     Imagen PROPIA del TPV: ../home/img/cta_intermedio_tpv.webp (cobro contactless en taller, tercio derecho en sombra
     para la card; misma imagen en móvil anclada a la izquierda para conservar el gesto de pago). */
/* ─── CTA INTERMEDIO (foto a sangre + scrim · texto a la DERECHA) ─── */
.tpv-cta-mid {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 90vh, 1100px);
  padding: 96px 0;
  overflow: hidden;
  /* Fallback de marca mientras no haya foto (o si no carga) */
  background: linear-gradient(120deg, #06112e 0%, #0a2a8c 45%, #0066ff 80%, #00b8d4 120%);
}

.tpv-cta-mid__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 72px);
  text-align: right;
}

.tpv-cta-mid__logo {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 0 1.5rem auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.35));
}

.tpv-cta-mid__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
}

.tpv-cta-mid__title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 1.75rem auto;
  max-width: 16ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.tpv-cta-mid__text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 2.25rem auto;
  max-width: 460px;
}

.tpv-cta-mid__actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.tpv-cta-mid__btn {
  padding: 0.95rem 2rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .25s ease, background-color .25s ease;
}

/* Ver precios (ghost) -> pill con icono etiqueta: pista visual del destino + semi-cristal */
.tpv-cta-mid__btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.tpv-cta-mid__btn--ghost:hover {
  transform: translateY(-3px);
  border-color: #fff;
  background: rgba(255, 255, 255, 0.20);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.30);
}

.tpv-cta-mid__btn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.tpv-cta-mid__btn--ghost:hover .tpv-cta-mid__btn-icon {
  transform: rotate(-12deg) scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .tpv-cta-mid__btn {
    transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  }

  .tpv-cta-mid__btn--ghost:hover {
    transform: none;
  }

  .tpv-cta-mid__btn-icon {
    transition: none;
  }

  .tpv-cta-mid__btn--ghost:hover .tpv-cta-mid__btn-icon {
    transform: none;
  }
}

@media (max-width: 768px) {
  .tpv-cta-mid {
    min-height: 80vh;
    padding: 56px 0;
  }

  .tpv-cta-mid__inner {
    text-align: center;
  }

  .tpv-cta-mid__logo {
    margin: 0 auto 1.5rem;
  }

  .tpv-cta-mid__title {
    max-width: none;
    margin: 0 auto 1.75rem;
  }

  .tpv-cta-mid__text {
    margin: 0 auto 2.25rem;
  }

  .tpv-cta-mid__actions {
    justify-content: center;
  }

  .tpv-cta-mid__btn {
    width: 100%;
    text-align: center;
  }
}

    #tpv-cta-intermedio .tpv-cta-mid__head{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
    #tpv-cta-intermedio .tpv-cta-mid__head .tpv-cta-mid__logo{margin:0}
    #tpv-cta-intermedio .tpv-cta-mid__grad{background-image:linear-gradient(90deg,#0066ff 0%,#00d4ff 25%,#0066ff 50%,#00d4ff 75%,#0066ff 100%);background-size:200% auto;background-repeat:repeat;background-position:0% center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block;padding-bottom:.06em;animation:tpvCtaGradFlow 9s linear infinite}
    @media (prefers-reduced-motion:reduce){ #tpv-cta-intermedio .tpv-cta-mid__grad{animation:none} }
    @media (min-width:769px){
      #tpv-cta-intermedio.tpv-cta-mid{aspect-ratio:1672 / 941;min-height:0;padding:0}
      #tpv-cta-intermedio .tpv-cta-mid__inner{width:min(46%,600px);max-width:none;margin:0 clamp(20px,3.5vw,60px) 40px auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(32px,3vw,52px) clamp(28px,3vw,48px);position:relative;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.35);border-radius:20px;box-shadow:0 20px 56px rgba(0,0,0,.3)}
      #tpv-cta-intermedio .tpv-cta-mid__head{justify-content:center}
      #tpv-cta-intermedio .tpv-cta-mid__title{max-width:20ch;margin:0 auto 1.75rem;text-align:center}
      #tpv-cta-intermedio .tpv-cta-mid__actions{flex-direction:column;align-items:stretch;width:max-content;max-width:100%;margin:0 auto}
      /* Ghost igualado en tamaño al primario: ancho por stretch de la columna, alto por mismo padding/fuente (-1px compensa su borde) */
      #tpv-cta-intermedio .tpv-cta-mid__btn--ghost{padding:calc(1.35rem - 1px) 2rem;font-size:1.2rem;letter-spacing:.03em;border-radius:12px}
      #tpv-cta-intermedio .tpv-cta-mid__head,#tpv-cta-intermedio .tpv-cta-mid__title,#tpv-cta-intermedio .tpv-cta-mid__actions{position:relative;z-index:1}
      #tpv-cta-intermedio .tpv-cta-mid__inner{overflow:hidden}
    }
    @media (max-width:768px){
      #tpv-cta-intermedio .tpv-cta-mid__head{justify-content:center}
      #tpv-cta-intermedio .tpv-cta-mid__inner{width:auto;margin:0 1rem;box-sizing:border-box;background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:2rem 1.5rem;box-shadow:0 12px 40px rgba(0,0,0,.28)}
    }
    @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
      @media (max-width:768px){ #tpv-cta-intermedio .tpv-cta-mid__inner{background:rgba(10,20,45,.74)} }
    }
    /* size 200% + shift 200% = mosaico exacto -> bucle infinito sin salto */
    @keyframes tpvCtaGradFlow {
      from { background-position: 0% center; }
      to { background-position: 200% center; }
    }
  
    /* Boton demo: mismo tratamiento animado que .cta-image-section .btn-primary (styles-shared.css) */
    #tpv-cta-intermedio .btn-primary{background:linear-gradient(135deg,#06f,#00c6ff);box-shadow:0 8px 32px #0066ff73,0 0 0 1px #ffffff1f;padding:1.35rem 3.5rem;font-size:1.2rem;letter-spacing:.03em;border-radius:12px;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;animation:ctaBtnPulse 3s ease-in-out infinite}
    #tpv-cta-intermedio .btn-primary:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 60%);opacity:0;transition:opacity .4s ease}
    #tpv-cta-intermedio .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px #0066ff8c,0 0 0 1px #ffffff2e}
    #tpv-cta-intermedio .btn-primary:hover:before{opacity:1}
    @media (max-width:768px){ #tpv-cta-intermedio .btn-primary{width:100%;white-space:nowrap;padding:1.15rem 1rem;font-size:1rem;letter-spacing:.01em} }
    @media (prefers-reduced-motion:reduce){ #tpv-cta-intermedio .btn-primary{animation:none} }



        .tpv-analytics {
          background-color: var(--bg-dark);
          color: var(--text-light);
          padding: 120px 0;
          border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .tpv-analytics__header {
          text-align: center;
          margin-bottom: 60px;
        }

        .tpv-analytics__title {
          font-family: var(--font-display);
          font-size: clamp(2.2rem, 5vw, 3.5rem);
          font-weight: 800;
          color: var(--text-light);
          margin-bottom: 20px;
        }

        .tpv-analytics__subtitle {
          font-size: 1.25rem;
          color: var(--text-muted-dark);
          max-width: 800px;
          margin: 0 auto;
          line-height: 1.6;
        }

        
        /* S6b.C VARIANTS */
        .tpv-analytics-v1 { padding: 30px; }
        .v1-bento { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; gap: 15px; }
        .v1-tile { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; }
        .v1-tile--area { grid-column: 1; grid-row: 1; height: 160px; }
        .v1-tile--donut { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .v1-tile--rank { grid-column: 1; grid-row: 2; }
        .v1-tile--kpi { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; }
        .v1-tile-title { font-size: 0.8rem; color: #94a3b8; font-weight: 600; margin-bottom: 10px; }
        .v1-bar-chart { position: absolute; bottom: 0; left: 15px; right: 15px; height: 100px; display: flex; align-items: flex-end; gap: 6px; z-index: 1; }
        .v1-donut-wrap { position: relative; width: 80px; height: 80px; }
        .v1-donut-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; color: #fff; background: var(--bg-dark); width: 60px; height: 60px; border-radius: 50%; margin: auto; z-index: 2; }
        .v1-rank-list { display: flex; flex-direction: column; gap: 8px; font-family: 'Courier New', monospace; font-size: 0.85rem; }
        .v1-rank-item { display: flex; align-items: center; justify-content: space-between; }
        .v1-rank-bar { height: 6px; background: var(--tpv-accent); border-radius: 3px; }
        .v1-kpi-val { font-size: 2.2rem; font-family: 'Courier New', monospace; font-weight: bold; color: #fff; letter-spacing: -0.5px; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; }

        /* Animations for Bento Mockups */
        .v1-bar {
          flex: 1;
          height: var(--target-height);
          position: relative;
        }
        .v1-bar-fill {
          position: absolute;
          inset: 0;
          background: var(--tpv-accent);
          opacity: 0.15;
          border-radius: 3px 3px 0 0;
          transform: scaleY(0);
          transform-origin: bottom;
          transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .v1-bar--active .v1-bar-fill {
          opacity: 1;
          box-shadow: 0 0 15px rgba(11, 245, 151, 0.4);
        }
        .v1-tile.visible .v1-bar-fill {
          transform: scaleY(1);
        }
        .v1-bar:nth-child(1) .v1-bar-fill { transition-delay: 0.05s; }
        .v1-bar:nth-child(2) .v1-bar-fill { transition-delay: 0.10s; }
        .v1-bar:nth-child(3) .v1-bar-fill { transition-delay: 0.15s; }
        .v1-bar:nth-child(4) .v1-bar-fill { transition-delay: 0.20s; }
        .v1-bar:nth-child(5) .v1-bar-fill { transition-delay: 0.25s; }
        .v1-bar:nth-child(6) .v1-bar-fill { transition-delay: 0.30s; }
        .v1-bar:nth-child(7) .v1-bar-fill { transition-delay: 0.35s; }
        .v1-bar:nth-child(8) .v1-bar-fill { transition-delay: 0.40s; }
        .v1-bar:nth-child(9) .v1-bar-fill { transition-delay: 0.45s; }
        .v1-bar:nth-child(10) .v1-bar-fill { transition-delay: 0.50s; }
        .v1-bar:nth-child(11) .v1-bar-fill { transition-delay: 0.55s; }
        .v1-bar:nth-child(12) .v1-bar-fill { transition-delay: 0.60s; }

        .v1-tile.visible .v1-bar--active .chart-tooltip {
          opacity: 1 !important;
          transform: translate(-50%, 0) !important;
        }

        .v1-donut-path {
          transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
        }
        .v1-tile.visible .v1-donut-path {
          stroke-dashoffset: 95.5; /* 251.3 * (1 - 0.62) */
        }

        .v1-rank-bar {
          height: 6px;
          background: var(--tpv-accent);
          border-radius: 3px;
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .v1-tile.visible .v1-rank-bar {
          transform: scaleX(1);
        }
        .v1-rank-item:nth-child(1) .v1-rank-bar { transition-delay: 0.4s; }
        .v1-rank-item:nth-child(2) .v1-rank-bar { transition-delay: 0.5s; }
        .v1-rank-item:nth-child(3) .v1-rank-bar { transition-delay: 0.6s; }

        .v1-sparkline-path {
          stroke-dasharray: 150;
          stroke-dashoffset: 150;
          transition: stroke-dashoffset 1.3s cubic-bezier(0.25, 1, 0.5, 1) 1.2s;
        }
        .v1-tile.visible .v1-sparkline-path {
          stroke-dashoffset: 0;
        }
        
        .v1-kpi-val {
          opacity: 0;
          transform: translateY(10px);
          transition: opacity 1s ease 0.3s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
        }
        .v1-tile.visible .v1-kpi-val {
          opacity: 1;
          transform: translateY(0);
        }

        /* KPI tile: currency mark dimmed + smaller than digits (idea 10) */
        .v1-kpi-cur { font-size: 0.62em; color: #94a3b8; margin-right: 1px; vertical-align: 0.12em; font-weight: 600; }
        .v1-kpi-num { color: #fff; }

        /* KPI corner glow — anchors the bottom-right of the bento (idea 9) */
        .v1-tile--kpi > * { position: relative; z-index: 1; }
        .v1-tile--kpi::after {
          content: '';
          position: absolute;
          bottom: -45%;
          right: -30%;
          width: 150px;
          height: 150px;
          background: radial-gradient(circle, var(--tpv-accent-glow) 0%, transparent 70%);
          opacity: 0;
          z-index: 0;
          pointer-events: none;
          transition: opacity 1.1s ease 0.5s;
        }
        .v1-tile--kpi.visible::after { opacity: 0.28; }

        /* Trend pill — pops in after the number lands (idea 2) */
        .v1-kpi-trend {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          margin-top: 6px;
          opacity: 0;
          transform: translateY(6px) scale(0.9);
          transition: opacity 0.4s ease 1.1s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s;
        }
        .v1-tile.visible .v1-kpi-trend { opacity: 1; transform: translateY(0) scale(1); }
        .v1-kpi-pill {
          background: rgba(16, 185, 129, 0.15);
          color: #10b981;
          padding: 2px 6px;
          border-radius: 12px;
          font-size: 0.7rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          gap: 2px;
        }
        .v1-kpi-vs { font-size: 0.65rem; color: #64748b; }

        /* Secondary stat — adds a second fact for density (idea 5) */
        .v1-kpi-sub {
          margin-top: 6px;
          text-align: center;
          font-family: 'Courier New', monospace;
          font-size: 0.72rem;
          color: #64748b;
          letter-spacing: 0.3px;
          white-space: nowrap;
          opacity: 0;
          transform: translateY(6px);
          transition: opacity 0.5s ease 0.85s, transform 0.6s ease 0.85s;
        }
        .v1-tile.visible .v1-kpi-sub { opacity: 1; transform: translateY(0); }
        .v1-kpi-sub b { color: #cbd5e1; font-weight: bold; }

        /* Sparkline wrapper + live endpoint dot (idea 3) */
        .v1-kpi-spark {
          position: relative;
          width: 80%;
          height: 22px;
          margin: 10px auto 0;
        }
        .v1-kpi-spark svg { width: 100%; height: 100%; display: block; overflow: visible; opacity: 0.85; }
        .v1-kpi-spark-dot {
          position: absolute;
          right: 0;
          top: 10%;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: var(--tpv-accent);
          box-shadow: 0 0 8px 1px var(--tpv-accent-glow);
          opacity: 0;
          transform: translate(50%, -50%) scale(0.4);
          transition: opacity 0.4s ease 2.4s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s;
        }
        .v1-tile.visible .v1-kpi-spark-dot {
          opacity: 1;
          transform: translate(50%, -50%) scale(1);
          animation: v1-kpi-dot-pulse 2s ease-in-out 2.8s infinite;
        }
        @keyframes v1-kpi-dot-pulse {
          0%, 100% { box-shadow: 0 0 6px 1px var(--tpv-accent-glow); }
          50% { box-shadow: 0 0 12px 3px var(--tpv-accent-glow); }
        }

        /* Respect reduced-motion: show final state, no movement */
        @media (prefers-reduced-motion: reduce) {
          .v1-kpi-val,
          .v1-kpi-trend,
          .v1-kpi-sub,
          .v1-kpi-spark-dot,
          .v1-sparkline-path { transition: none !important; }
          .v1-kpi-trend, .v1-kpi-sub { opacity: 1; transform: none; }
          .v1-kpi-spark-dot { opacity: 1; transform: translate(50%, -50%); animation: none; }
          .v1-tile--kpi::after { transition: none; }
        }


        
        .tpv-analytics__screen-wrap {
          max-width: 650px;
          margin: 0 auto;
          padding: 10px;
          background: linear-gradient(145deg, #1e293b, #0f172a);
          border-radius: 16px;
          box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .tpv-analytics__screen {
          background: #0c1222;
          border-radius: 10px;
          overflow: hidden;
        }

        .tpv-analytics__titlebar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 20px;
          background: rgba(255, 255, 255, 0.03);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          font-size: 0.8rem;
          font-weight: 600;
          color: #64748b;
          text-transform: uppercase;
          letter-spacing: 1px;
        }

        .tpv-analytics__dots {
          display: flex;
          gap: 6px;
        }

        .tpv-analytics__dots span {
          width: 10px;
          height: 10px;
          border-radius: 50%;
        }

        .tpv-analytics__dots span:nth-child(1) {
          background: #ef4444;
        }

        .tpv-analytics__dots span:nth-child(2) {
          background: #f59e0b;
        }

        .tpv-analytics__dots span:nth-child(3) {
          background: #10b981;
        }

        .tpv-analytics__body {
          padding: 24px;
        }

        /* Gráfico de barras */
        .tpv-analytics__chart {
          height: 180px;
          display: flex;
          align-items: flex-end;
          gap: 16px;
          padding: 0 10px;
          margin-bottom: 24px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .tpv-analytics__bar-group {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
        }

        .tpv-analytics__bar {
          width: 100%;
          border-radius: 6px 6px 0 0;
          background: linear-gradient(180deg, var(--tpv-accent), rgba(11, 245, 151, 0.2));
          height: 4px;
          /* Inicial para animación */
          transition: height 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .tpv-analytics__bar-label {
          font-size: 0.75rem;
          color: #64748b;
          font-weight: 600;
        }

        /* Heatmap */
        .tpv-analytics__heatmap {
          display: grid;
          grid-template-columns: auto repeat(7, 1fr);
          gap: 4px;
          margin-bottom: 20px;
        }

        .tpv-analytics__heat-header {
          font-size: 0.65rem;
          color: #64748b;
          text-align: center;
          font-weight: 600;
        }

        .tpv-analytics__heat-label {
          font-size: 0.65rem;
          color: #64748b;
          display: flex;
          align-items: center;
          padding-right: 8px;
        }

        .tpv-analytics__heat-cell {
          width: 100%;
          aspect-ratio: 1;
          border-radius: 4px;
          background: var(--tpv-accent);
          opacity: 0.05;
          /* Inicial para animación */
          transition: opacity 0.5s ease;
        }

        /* Insights */
        .tpv-analytics__insights {
          display: flex;
          gap: 20px;
          padding-top: 16px;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .tpv-analytics__insight {
          font-size: 0.85rem;
          color: #94a3b8;
          font-family: 'Courier New', monospace;
        }

        .tpv-analytics__insight strong {
          color: #e2e8f0;
        }

        /* KPIs */
        .tpv-analytics__kpis {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
          max-width: 650px;
          margin: 50px auto 0;
        }

        .tpv-analytics__kpi {
          padding: 30px;
          background: white;
          border-radius: var(--radius-lg);
          border: 1px solid rgba(0, 0, 0, 0.05);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03);
          text-align: center;
          transition: all 0.3s ease;
        }

        .tpv-analytics__kpi:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
          border-color: rgba(11, 245, 151, 0.3);
        }

        .tpv-analytics__kpi-value {
          font-size: 2rem;
          font-weight: 800;
          font-family: var(--font-display);
          color: var(--text-dark);
        }

        .tpv-analytics__kpi-label {
          font-size: 0.9rem;
          color: var(--text-muted);
          margin-top: 8px;
        }

        /* Responsive */
        @media (max-width: 600px) {
          .tpv-analytics__chart {
            height: 120px;
            gap: 10px;
          }

          .tpv-analytics__kpis {
            grid-template-columns: 1fr;
          }

          .tpv-analytics__heatmap {
            gap: 2px;
          }

          .tpv-analytics__insights {
            flex-direction: column;
            gap: 8px;
          }
        }
      


        /* ── S6 Shell ── */
        .tpv-console {
          background-color: #eceef1;
          background-image: linear-gradient(rgba(11, 245, 151, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 245, 151, 0.14) 1px, transparent 1px);
          background-size: 48px 48px;
          color: var(--text-dark);
          padding: 120px 0;
          border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
        .tpv-console__container {
          max-width: 1100px;
          margin: 0 auto;
          padding: 0 5vw;
        }
        .tpv-console__header {
          text-align: center;
          margin-bottom: 60px;
        }
        .tpv-console__title {
          font-family: var(--font-display);
          font-size: clamp(2.2rem, 5vw, 3.5rem);
          font-weight: 800;
          color: var(--text-dark);
          margin-bottom: 20px;
        }
        .tpv-console__subtitle {
          font-size: 1.25rem;
          color: var(--text-muted);
          max-width: 800px;
          margin: 0 auto;
          line-height: 1.6;
        }

        /* ── S6 · Secuencia TPV Física ── */
        .s6h-wrap {
          background: #d8dce3;
          border-radius: 16px;
          padding: 52px 32px;
        }
        .s6h-flow {
          display: flex;
          align-items: flex-start;
          justify-content: center;
        }
        .s6h-device {
          flex: 1;
          max-width: 240px;
          opacity: 0;
          transform: translateY(14px);
          transition: opacity 0.55s ease, transform 0.55s ease;
        }
        .s6h-device.lit { opacity: 1; transform: translateY(0); }
        .s6h-step-label {
          text-align: center;
          font-family: var(--font-display);
          font-size: 0.62rem;
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: #6e7a88;
          margin-bottom: 12px;
        }
        .s6h-bezel {
          background: linear-gradient(145deg, #2c3038, #1b1e24);
          border-radius: 18px;
          padding: 12px;
          box-shadow: 0 20px 44px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.07);
        }
        .s6h-screen { background: #f4f6f9; border-radius: 10px; overflow: hidden; min-height: 190px; }
        .s6h-screen-top {
          background: #fff;
          padding: 9px 12px;
          border-bottom: 1px solid #e6e9ed;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .s6h-screen-title { font-family: var(--font-display); font-size: 0.63rem; font-weight: 700; color: #2a2a2a; }
        .s6h-screen-time { font-size: 0.58rem; color: #aaa; font-family: 'Courier New', monospace; }
        .s6h-screen-body { padding: 12px; }
        .s6h-cashier-item {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 7px 8px;
          border-radius: 6px;
          margin-bottom: 4px;
          border: 1px solid transparent;
          transition: all 0.4s ease;
        }
        .s6h-cashier-item.active {
          background: rgba(11,245,151,0.09);
          border-color: rgba(11,245,151,0.3);
        }
        .s6h-c-avatar {
          width: 28px; height: 28px;
          border-radius: 50%;
          background: #e4e7eb;
          color: #777;
          font-size: 0.62rem; font-weight: 700;
          font-family: var(--font-display);
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
          transition: all 0.4s ease;
        }
        .s6h-cashier-item.active .s6h-c-avatar {
          background: linear-gradient(135deg, #0bf597, #06b6d4);
          color: #0f172a;
        }
        .s6h-c-name { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; color: #2a2a2a; }
        .s6h-c-status { font-size: 0.58rem; color: #aaa; margin-left: auto; font-family: 'Courier New', monospace; }
        .s6h-c-status--on { color: #0bf597; }
        .s6h-pin-label {
          font-family: var(--font-display);
          font-size: 0.62rem; font-weight: 600; color: #666;
          letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px;
        }
        .s6h-pin-dots {
          display: flex; gap: 10px; justify-content: center;
          padding: 14px;
          background: #fff;
          border-radius: 8px; border: 1px solid #e6e9ed;
          margin-bottom: 8px;
        }
        .s6h-pin-dot {
          width: 13px; height: 13px; border-radius: 50%;
          border: 2px solid #ccc; background: transparent;
          transition: all 0.3s ease;
        }
        .s6h-pin-dot.filled { border-color: #0bf597; background: #0bf597; box-shadow: 0 0 8px rgba(11,245,151,0.4); }
        .s6h-pin-name { text-align: center; font-size: 0.6rem; color: #aaa; font-family: 'Courier New', monospace; }
        .s6h-total-row {
          display: flex; justify-content: space-between;
          padding: 3px 0; font-size: 0.68rem; color: #666;
          font-family: 'Courier New', monospace;
        }
        .s6h-total-row--big {
          font-size: 0.82rem; font-weight: 700; color: #1a1a1a;
          padding-top: 6px; border-top: 1px solid #e6e9ed; margin-top: 4px;
        }
        .s6h-confirm {
          display: flex; align-items: center; gap: 6px;
          padding: 7px 10px;
          background: rgba(11,245,151,0.09);
          border: 1px solid rgba(11,245,151,0.3);
          border-radius: 6px; margin-top: 10px;
          font-size: 0.65rem; font-weight: 700;
          color: #0a8a58; font-family: var(--font-display);
          opacity: 0; transform: translateY(4px);
          transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .s6h-confirm.show { opacity: 1; transform: translateY(0); }
        .s6h-confirm-icon {
          width: 17px; height: 17px; border-radius: 50%;
          background: #0bf597; color: #0f172a;
          font-size: 0.58rem; font-weight: 900;
          display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .s6h-arrow-wrap {
          display: flex; align-items: center; justify-content: center;
          padding: 0 6px; padding-top: 96px;
          flex-shrink: 0;
          opacity: 0; transition: opacity 0.5s ease;
        }
        .s6h-arrow-wrap.lit { opacity: 1; }
        .s6h-arrow-svg { width: 44px; height: 22px; }
        @media (max-width: 768px) {
          .s6h-flow { flex-direction: column; align-items: center; gap: 16px; }
          .s6h-device { max-width: 100%; width: 100%; }
          .s6h-arrow-wrap { padding-top: 0; transform: rotate(90deg); }
        }
        @media (prefers-reduced-motion: reduce) {
          .s6h-device { opacity: 1; transform: none; }
          .s6h-arrow-wrap { opacity: 1; }
          .s6h-pin-dot { border-color: #0bf597; background: #0bf597; }
          .s6h-confirm { opacity: 1; transform: none; }
        }
      


/* Solo reglas NUEVAS: colapso del bento 2x2 a columna única, scopeadas a #tpv-s7-analytics--cascada-vertical. NADA de CSS base desktop (se hereda por clase). */
/* TOGGLE consolidación (ganadora): en móvil manda la cascada y se oculta el S7 original
   (#tpv-s7-analytics); en escritorio al revés. El diseño desktop queda intacto. */
@media (max-width: 768px) { #tpv-s7-analytics { display: none; } }
@media (min-width: 769px) { #tpv-s7-analytics--cascada-vertical { display: none; } }
@media (max-width: 768px) {
  #tpv-s7-analytics--cascada-vertical { padding: clamp(64px, 14vw, 120px) 0; }
  #tpv-s7-analytics--cascada-vertical .tpv-analytics__header { margin-bottom: clamp(32px, 8vw, 60px); }
  #tpv-s7-analytics--cascada-vertical .tpv-analytics__subtitle { font-size: clamp(1rem, 3.4vw, 1.25rem); }

  #tpv-s7-analytics--cascada-vertical .tpv-analytics-v1 { padding: clamp(14px, 4vw, 30px); }

  /* Colapso 2x2 -> columna única: mismo orden que desktop (área, donut, rank, kpi) leído como cascada */
  #tpv-s7-analytics--cascada-vertical .v1-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: clamp(10px, 3vw, 15px);
  }

  /* FIX CLAVE: .v1-tile--donut y .v1-tile--kpi traen grid-column:2 en la base (L3388/L3390).
     Sin esto el colapso a 1fr falla en silencio (columna fantasma). +especificidad (id+2 clases) gana sin !important. */
  #tpv-s7-analytics--cascada-vertical .v1-bento .v1-tile--area,
  #tpv-s7-analytics--cascada-vertical .v1-bento .v1-tile--donut,
  #tpv-s7-analytics--cascada-vertical .v1-bento .v1-tile--rank,
  #tpv-s7-analytics--cascada-vertical .v1-bento .v1-tile--kpi {
    grid-column: 1;
    grid-row: auto;
  }

  /* Escala tipográfica fluida — todos los clamp TOPAN en el valor desktop actual (sin deriva a >=768px) */
  #tpv-s7-analytics--cascada-vertical .v1-kpi-val { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  #tpv-s7-analytics--cascada-vertical .v1-tile-title { font-size: clamp(0.8rem, 2.4vw, 0.9rem); }
  #tpv-s7-analytics--cascada-vertical .v1-rank-list { font-size: clamp(0.82rem, 2.5vw, 0.9rem); }
  #tpv-s7-analytics--cascada-vertical .v1-donut-text { font-size: clamp(0.9rem, 2.6vw, 1rem); }

  /* Suelos legibles para las micro-etiquetas del KPI (desktop las deja en 0.65-0.72rem, ilegible en pantalla táctil) */
  #tpv-s7-analytics--cascada-vertical .v1-kpi-sub,
  #tpv-s7-analytics--cascada-vertical .v1-kpi-pill,
  #tpv-s7-analytics--cascada-vertical .v1-kpi-vs { font-size: 0.75rem; }

  /* Tile de área: al ganar ancho completo, más aire vertical para que las 12 barras respiren */
  #tpv-s7-analytics--cascada-vertical .v1-tile--area { height: clamp(150px, 42vw, 200px); }

  /* Donut a ancho completo (sin tocar viewBox: el svg escala dentro de un wrapper mayor, el stroke sigue proporcional) */
  #tpv-s7-analytics--cascada-vertical .v1-donut-wrap { width: clamp(80px, 26vw, 100px); height: clamp(80px, 26vw, 100px); }
  #tpv-s7-analytics--cascada-vertical .v1-donut-wrap svg { width: 100%; height: 100%; }

  /* Ranking: permite que el texto se comprima dentro del flex item en vez de desbordar la tile */
  #tpv-s7-analytics--cascada-vertical .v1-rank-item span { min-width: 0; }

  /* --- Transversales de rendimiento (obligatorias) --- */
  #tpv-s7-analytics--cascada-vertical .chart-tooltip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #tpv-s7-analytics--cascada-vertical .v1-bar--active .v1-bar-fill { box-shadow: none; }
  #tpv-s7-analytics--cascada-vertical .v1-tile--kpi::after { display: none; }
  #tpv-s7-analytics--cascada-vertical .v1-tile.visible .v1-kpi-spark-dot { animation: none; }
  /* NOTA: el stagger de .v1-bar-fill (nth-child, L3423-3434) se CONSERVA a propósito: es la coreografía que
     esta variante convierte en cascada vertical (arriba->abajo), muy identitaria de Nube3i. No se colapsa a 0s. */
}

/* Fallback <=480px: pantallas muy estrechas, el ranking necesita elipsis además del min-width:0 */
@media (max-width: 480px) {
  #tpv-s7-analytics--cascada-vertical .v1-tile--area .v1-bar-chart {
    height: clamp(96px, 30vw, 130px) !important; /* !important obligado: el height:100px va inline en el propio elemento */
  }
  #tpv-s7-analytics--cascada-vertical .v1-rank-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}



/* === TICKET SELLADO CLARO — todas las clases prefijadas .ticket-sellado-claro__ === */

.ticket-sellado-claro__section {
  padding: 80px 24px;
  background: #f0f4f8;
  font-family: 'Inter', sans-serif;
}

/* Tarjeta exterior: glass claro on-brand */
.ticket-sellado-claro__card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 32px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Etiqueta de ranura / fuente del papel */
.ticket-sellado-claro__slot {
  width: 200px;
  height: 14px;
  background: linear-gradient(180deg, #c8cdd5 0%, #e2e6ec 100%);
  border-radius: 3px 3px 0 0;
  margin-bottom: 0;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
  flex-shrink: 0;
}

.ticket-sellado-claro__slot::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 160px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent);
}

/* Ticket de papel */
.ticket-sellado-claro__ticket {
  max-width: 360px;
  width: 100%;
  background: #fbfbf7;
  position: relative;
  box-shadow:
    0 4px 18px rgba(15,23,42,0.10),
    0 1px 3px rgba(15,23,42,0.06),
    inset 0 -3px 8px rgba(200,190,160,0.08);
  /* Textura papel termico muy sutil */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.012) 2px,
      rgba(0,0,0,0.012) 4px
    );
  /* Borde zig-zag arriba y abajo usando clip-path */
  clip-path: polygon(
    0% 8px,    6px 0%,  12px 8px, 18px 0%,  24px 8px, 30px 0%,  36px 8px, 42px 0%,
    48px 8px,  54px 0%, 60px 8px, 66px 0%,  72px 8px, 78px 0%,  84px 8px, 90px 0%,
    96px 8px,  102px 0%,108px 8px,114px 0%, 120px 8px,126px 0%, 132px 8px,138px 0%,
    144px 8px, 150px 0%,156px 8px,162px 0%, 168px 8px,174px 0%, 180px 8px,186px 0%,
    192px 8px, 198px 0%,204px 8px,210px 0%, 216px 8px,222px 0%, 228px 8px,234px 0%,
    240px 8px, 246px 0%,252px 8px,258px 0%, 264px 8px,270px 0%, 276px 8px,282px 0%,
    288px 8px, 294px 0%,300px 8px,306px 0%, 312px 8px,318px 0%, 324px 8px,330px 0%,
    336px 8px, 342px 0%,348px 8px,354px 0%, 360px 8px,
    100% 8px,
    100% calc(100% - 8px),
    354px 100%, 348px calc(100% - 8px), 342px 100%, 336px calc(100% - 8px),
    330px 100%, 324px calc(100% - 8px), 318px 100%, 312px calc(100% - 8px),
    306px 100%, 300px calc(100% - 8px), 294px 100%, 288px calc(100% - 8px),
    282px 100%, 276px calc(100% - 8px), 270px 100%, 264px calc(100% - 8px),
    258px 100%, 252px calc(100% - 8px), 246px 100%, 240px calc(100% - 8px),
    234px 100%, 228px calc(100% - 8px), 222px 100%, 216px calc(100% - 8px),
    210px 100%, 204px calc(100% - 8px), 198px 100%, 192px calc(100% - 8px),
    186px 100%, 180px calc(100% - 8px), 174px 100%, 168px calc(100% - 8px),
    162px 100%, 156px calc(100% - 8px), 150px 100%, 144px calc(100% - 8px),
    138px 100%, 132px calc(100% - 8px), 126px 100%, 120px calc(100% - 8px),
    114px 100%, 108px calc(100% - 8px), 102px 100%, 96px calc(100% - 8px),
    90px 100%,  84px calc(100% - 8px),  78px 100%,  72px calc(100% - 8px),
    66px 100%,  60px calc(100% - 8px),  54px 100%,  48px calc(100% - 8px),
    42px 100%,  36px calc(100% - 8px),  30px 100%,  24px calc(100% - 8px),
    18px 100%,  12px calc(100% - 8px),   6px 100%,   0% calc(100% - 8px),
    0% 8px
  );
  overflow: visible;
}

/* Overflow wrapper para el ticket (clip-path corta el overflow) */
.ticket-sellado-claro__ticket-inner {
  padding: 24px 24px 28px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #1a1a1a;
  position: relative;
  overflow: hidden;
}

/* Curl sutil en esquina inferior derecha */
.ticket-sellado-claro__ticket-inner::after {
  content: '';
  position: absolute;
  bottom: 8px; right: 8px;
  width: 28px; height: 28px;
  background: radial-gradient(circle at bottom right, rgba(200,195,175,0.35) 40%, transparent 70%);
  pointer-events: none;
}

/* Lineas del ticket con animacion de reveal */
.ticket-sellado-claro__line {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.25s ease,
    opacity 0.2s ease;
  white-space: pre;
}

/* Estado activo (JS lo pone) */
.ticket-sellado-claro__line.revealed {
  max-height: 2em;
  opacity: 1;
}

/* Separador de guiones */
.ticket-sellado-claro__sep {
  display: block;
  color: #999;
  letter-spacing: 0.5px;
}

/* Linea TOTAL: negrita */
.ticket-sellado-claro__total-line {
  font-weight: 700;
  font-size: 13.5px;
  color: #0f172a;
}

/* Linea diferencia: verde cuando es 0 */
.ticket-sellado-claro__diff-ok {
  color: #0a8a58;
  font-weight: 700;
}

/* Cabecera del ticket */
.ticket-sellado-claro__header-line {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: #0f172a;
}

.ticket-sellado-claro__sub-header {
  text-align: center;
  font-size: 11px;
  color: #6e7a88;
}

/* Avatar iniciales cajero */
.ticket-sellado-claro__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #0bf597);
  color: #0f172a;
  font-size: 8px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}

/* Contenedor del ticket con efecto de salida desde ranura */
.ticket-sellado-claro__ticket-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Altura reservada = ticket impreso del todo. El papel crece dentro de este
     hueco (anclado arriba) sin empujar el contenido de la sección. */
  min-height: 457px;
  position: relative;
  transform: translateY(-32px);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.5s ease;
}

.ticket-sellado-claro__ticket-wrap.print-started {
  transform: translateY(0);
  opacity: 1;
}

/* Indicador pulsante "imprimiendo" */
.ticket-sellado-claro__printing-dot {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  opacity: 1;
  transition: opacity 0.3s;
}

.ticket-sellado-claro__printing-dot.done {
  opacity: 0;
}

.ticket-sellado-claro__printing-dot span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #0a8a58;
  animation: ticket-sellado-claro-dot 1.2s infinite;
}
.ticket-sellado-claro__printing-dot span:nth-child(2) { animation-delay: 0.2s; }
.ticket-sellado-claro__printing-dot span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ticket-sellado-claro-dot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Badge verificacion inline */
.ticket-sellado-claro__pin-badge {
  display: inline-block;
  background: rgba(11, 245, 151, 0.15);
  color: #0a8a58;
  border: 1px solid rgba(11, 245, 151, 0.35);
  border-radius: 3px;
  font-size: 10px;
  padding: 0 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 4px;
}

/* ============================================================
   prefers-reduced-motion: mostrar todo ya impreso, sello listo
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ticket-sellado-claro__ticket-wrap {
    transform: translateY(0) !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .ticket-sellado-claro__line {
    max-height: 2em !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .ticket-sellado-claro__printing-dot {
    display: none !important;
  }
  @keyframes ticket-sellado-claro-dot {}
}

/* Responsive */
@media (max-width: 768px) {
  .ticket-sellado-claro__section {
    padding: 56px 16px;
  }
  .ticket-sellado-claro__card {
    padding: 28px 16px 32px;
    border-radius: 16px;
  }
  .ticket-sellado-claro__ticket {
    max-width: 100%;
    /* Simplifica clip-path en mobile para evitar overflow */
    clip-path: none;
    border-top: 2px dashed #c8c8c0;
    border-bottom: 2px dashed #c8c8c0;
    border-radius: 0;
  }
  .ticket-sellado-claro__ticket-inner {
    padding: 18px 16px 22px;
    font-size: 11.5px;
  }
  .ticket-sellado-claro__ticket-wrap {
    min-height: 428px;
  }
  .ticket-sellado-claro__slot {
    width: 140px;
  }
}



        /* ===== S5 EL PUENTE — Sincronización omnicanal (tema claro) ===== */
        .tpv-bridge {
          background-color: #f8fafc;
          color: var(--text-dark);
          padding: 120px 0;
          position: relative;
          overflow: hidden;
          border-top: 1px solid #e2e8f0;
          background-image: radial-gradient(circle, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
          background-size: 22px 22px;
        }

        .tpv-bridge__container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 5vw;
          position: relative;
          z-index: 1;
        }

        .tpv-bridge__header {
          text-align: center;
          margin-bottom: 80px;
        }

        .tpv-bridge__title {
          font-family: var(--font-display);
          font-size: clamp(2.2rem, 5vw, 3.8rem);
          font-weight: 800;
          margin-bottom: 20px;
          color: var(--text-dark);
        }

        .tpv-bridge__subtitle {
          font-size: 1.25rem;
          color: var(--text-muted);
          max-width: 600px;
          margin: 0 auto;
          line-height: 1.6;
        }

        /* ── Dos canales, un número ── */
        .bv2 {
          display: grid;
          grid-template-columns: 1fr 76px 1fr;
          align-items: center;
          margin-bottom: 48px;
        }

        /* Device shell */
        .bv2__device {
          border-radius: 18px;
          overflow: hidden;
          border: 1px solid #e2e8f0;
          box-shadow: 0 4px 24px rgba(15,23,42,.07), 0 1px 0 rgba(255,255,255,.9) inset;
          transition: box-shadow .25s, transform .25s;
        }
        .bv2__device:hover {
          box-shadow: 0 16px 44px rgba(15,23,42,.11);
          transform: translateY(-3px);
        }

        /* TPV terminal bar */
        .bv2__dbar--tpv {
          background: #0f172a;
          padding: 11px 18px;
          display: flex; align-items: center; gap: 10px;
        }
        .bv2__dbar-pill {
          font: 700 .65rem 'Courier New', monospace;
          color: var(--tpv-accent);
          letter-spacing: .3px;
        }
        .bv2__dbar-name {
          font: 500 .65rem 'Courier New', monospace;
          color: rgba(255,255,255,.32);
          margin-left: auto;
        }

        /* Web browser bar */
        .bv2__dbar--web {
          background: #f1f5f9;
          border-bottom: 1px solid #e2e8f0;
          padding: 11px 18px;
          display: flex; align-items: center; gap: 10px;
        }
        .bv2__bdots { display: flex; gap: 5px; }
        .bv2__bdots span {
          width: 10px; height: 10px; border-radius: 50%;
        }
        .bv2__bdots span:nth-child(1) { background: #fca5a5; }
        .bv2__bdots span:nth-child(2) { background: #fde68a; }
        .bv2__bdots span:nth-child(3) { background: #6ee7b7; }
        .bv2__dbar-url {
          font: .67rem 'Courier New', monospace;
          color: #94a3b8;
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 5px;
          padding: 3px 12px;
          margin: 0 auto;
        }

        /* Device body */
        .bv2__dbody {
          background: #fff;
          padding: 48px 36px;
          text-align: center;
          position: relative;
        }

        /* Channel label */
        .bv2__ch {
          font: 700 .68rem var(--font-body);
          text-transform: uppercase;
          letter-spacing: 2px;
          color: var(--text-muted);
          margin-bottom: 16px;
        }

        /* Event chip — slides down from top on sync */
        .bv2__chip {
          position: absolute;
          top: 16px; left: 50%;
          transform: translateX(-50%) translateY(-6px);
          background: var(--tpv-accent);
          color: #042a16;
          font: 700 .64rem var(--font-body);
          padding: 4px 12px;
          border-radius: 20px;
          white-space: nowrap;
          opacity: 0;
          transition: opacity .22s ease, transform .22s ease;
          pointer-events: none;
          box-shadow: 0 4px 12px rgba(11,245,151,.4);
        }
        .bv2__chip.bv2--show {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }

        /* ── THE NUMBER ── */
        .bv2__num {
          font-family: var(--font-display);
          font-size: clamp(3.8rem, 8.5vw, 5.6rem);
          font-weight: 800;
          color: var(--text-dark);
          line-height: 1;
          letter-spacing: -3px;
          margin-bottom: 10px;
          transform-origin: center;
          display: block;
        }
        @keyframes bv2-flash {
          0%   { color: var(--text-dark); transform: scale(1); }
          35%  { color: #0a8f5b;          transform: scale(1.045); }
          100% { color: var(--text-dark); transform: scale(1); }
        }
        .bv2__num.bv2--flash { animation: bv2-flash .75s cubic-bezier(.4,0,.2,1); }

        .bv2__num-lbl {
          font-size: .72rem;
          color: var(--text-muted);
          letter-spacing: .3px;
        }

        /* ── Connector ── */
        .bv2__conn {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 9px;
          padding: 0 2px;
        }
        .bv2__cline {
          width: 100%; height: 2px;
          background: rgba(11,245,151,.2);
          border-radius: 1px;
          position: relative;
          transition: background .3s, box-shadow .3s;
        }
        .bv2__cline.bv2--active {
          background: rgba(11,245,151,.55);
          box-shadow: 0 0 12px rgba(11,245,151,.4);
        }
        .bv2__dot {
          position: absolute; top: -3px;
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--tpv-accent);
          box-shadow: 0 0 9px rgba(11,245,151,.7);
        }
        .bv2__dot--r { animation: bv2-r 2.6s ease-in-out infinite; }
        .bv2__dot--l { animation: bv2-l 2.6s ease-in-out infinite; animation-delay: 1.3s; }
        .bv2__dot--burst {
          width: 11px; height: 11px; top: -4.5px;
          background: #fff;
          box-shadow: 0 0 18px rgba(11,245,151,1), 0 0 6px rgba(11,245,151,.5);
          opacity: 0;
          pointer-events: none;
        }
        .bv2__dot--burst.bv2--burst-r {
          animation: bv2-r .62s cubic-bezier(.4,0,.2,1) forwards;
          opacity: 1;
        }
        .bv2__dot--burst.bv2--burst-l {
          animation: bv2-l .62s cubic-bezier(.4,0,.2,1) forwards;
          opacity: 1;
        }

        @keyframes bv2-r {
          0%   { left:0;                 opacity:0; }
          8%   { opacity:1; }
          92%  { opacity:1; }
          100% { left:calc(100% - 8px); opacity:0; }
        }
        @keyframes bv2-l {
          0%   { left:calc(100% - 8px); opacity:0; }
          8%   { opacity:1; }
          92%  { opacity:1; }
          100% { left:0;                opacity:0; }
        }

        .bv2__conn-tag {
          font: 600 .6rem var(--font-body);
          letter-spacing: .8px;
          text-transform: uppercase;
          color: #0a8f5b;
          white-space: nowrap;
        }

        /* ── Stats row ── */
        .bv2__stats {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          gap: 16px;
          font-size: .88rem;
          color: var(--text-muted);
          margin-bottom: 28px;
        }
        .bv2__stats strong {
          font-family: var(--font-display);
          font-size: 1.1rem;
          font-weight: 800;
          color: var(--text-dark);
        }
        .bv2__stats-zero strong { color: #0a8f5b; }
        .bv2__stats-sep { color: #cbd5e1; }

        /* ── Multi-tienda note ── */
        .bv2__multi {
          text-align: center;
          font-size: .82rem;
          color: var(--text-muted);
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 7px;
          line-height: 1.55;
        }
        .bv2__multi svg { color: #0a8f5b; flex-shrink: 0; }
        .bv2__multi strong { color: var(--text-dark); font-weight: 600; }

        /* ── Responsive ── */
        @media (max-width: 600px) {
          .bv2 { grid-template-columns: 1fr; gap: 16px; }
          .bv2__conn { flex-direction: row; justify-content: center; padding: 4px 0; }
          .bv2__cline { width: 72px; }
          .bv2__dbody { padding: 40px 24px; }
        }
        @media (prefers-reduced-motion: reduce) {
          .bv2__dot { animation: none; opacity: .5; left: 50%; }
          .bv2__chip { transition: none; }
        }

        /* ── Bridge-t (unused, kept for reference) ── */
        .bridge-t {
          background: #060d1a;
          border: 1px solid rgba(11,245,151,.16);
          border-radius: 16px;
          overflow: hidden;
          box-shadow:
            0 60px 120px rgba(0,0,0,.18),
            0 20px 40px rgba(0,0,0,.1),
            0 0 0 1px rgba(11,245,151,.04);
          margin-bottom: 22px;
        }

        /* Title bar */
        .bridge-t__bar {
          display: flex; align-items: center; gap: 10px;
          padding: 13px 20px;
          background: rgba(255,255,255,.022);
          border-bottom: 1px solid rgba(255,255,255,.05);
        }
        .bridge-t__dots { display:flex; gap:6px; }
        .bridge-t__dots span { width:11px; height:11px; border-radius:50%; }
        .bridge-t__dots span:nth-child(1){ background:#ff5f57; }
        .bridge-t__dots span:nth-child(2){ background:#ffbd2e; }
        .bridge-t__dots span:nth-child(3){ background:#27c93f; }
        .bridge-t__bar-title {
          font: .71rem 'Courier New',monospace;
          color: rgba(255,255,255,.24);
        }
        .bridge-t__live {
          margin-left:auto;
          display:flex; align-items:center; gap:7px;
        }
        .bridge-t__live-dot {
          width:7px; height:7px; border-radius:50%;
          background: var(--tpv-accent);
          box-shadow: 0 0 7px var(--tpv-accent);
          animation: bt-pulse 1.3s ease-in-out infinite;
        }
        @keyframes bt-pulse { 0%,100%{opacity:1} 50%{opacity:.15} }
        .bridge-t__clock {
          font: 700 .7rem 'Courier New',monospace;
          color: var(--tpv-accent);
          letter-spacing:.4px;
          min-width: 58px;
        }

        /* Two panels */
        .bridge-t__panels {
          display: grid;
          grid-template-columns: 1fr 1px 300px;
          min-height: 268px;
        }

        /* ── Log panel ── */
        .bridge-t__log-panel { padding: 18px 20px 14px; }
        .bridge-t__panel-hdr {
          font: 700 .63rem 'Courier New',monospace;
          color: rgba(255,255,255,.2);
          letter-spacing:2px;
          margin-bottom: 12px;
        }
        .bridge-t__log { list-style:none; padding:0; margin:0; }
        .bridge-t__line {
          display: grid;
          grid-template-columns: 66px 54px 1fr 14px;
          gap: 8px;
          align-items: baseline;
          padding: 6px 4px;
          border-bottom: 1px solid rgba(255,255,255,.025);
          font: .8rem 'Courier New',monospace;
          line-height: 1.4;
          opacity: 0;
          transform: translateY(5px);
          transition: opacity .3s ease, transform .3s ease;
        }
        .bridge-t__line.bt-in { opacity:1; transform:translateY(0); }
        .bridge-t__ts { color:rgba(255,255,255,.2); font-size:.68rem; }
        .bridge-t__src {
          font-size:.63rem; font-weight:700; letter-spacing:.4px;
          padding: 2px 6px; border-radius:4px; text-align:center;
        }
        .bridge-t__src--tpv { background:rgba(11,245,151,.12); color:var(--tpv-accent); border:1px solid rgba(11,245,151,.2); }
        .bridge-t__src--web { background:rgba(6,182,212,.12); color:#06b6d4; border:1px solid rgba(6,182,212,.2); }
        .bridge-t__desc { color:rgba(255,255,255,.52); }
        .bridge-t__desc em { font-style:normal; color:rgba(255,255,255,.92); }
        .bridge-t__ok { color:var(--tpv-accent); font-size:.85rem; }

        .bridge-t__cursor-line {
          display:flex; align-items:center; gap:4px;
          padding: 9px 4px 4px;
          font: .77rem 'Courier New',monospace;
          color: rgba(11,245,151,.4);
        }
        .bridge-t__prompt { margin-right:2px; }
        .bridge-t__caret {
          display:inline-block; width:7px; height:13px;
          background: var(--tpv-accent);
          margin-left:1px; vertical-align:-1px;
          animation: bt-blink 1s step-end infinite;
        }
        @keyframes bt-blink { 0%,100%{opacity:1} 50%{opacity:0} }

        /* ── Vertical divider ── */
        .bridge-t__vdiv { background:rgba(255,255,255,.06); }

        /* ── Stats panel ── */
        .bridge-t__stats-panel {
          padding: 18px 20px;
          background: rgba(0,0,0,.18);
          display: flex; flex-direction:column;
        }
        .bridge-t__big-counts { display:flex; gap:16px; margin-bottom:2px; }
        .bridge-t__big-count  { flex:1; }
        .bridge-t__big-num {
          display:block;
          font-family:var(--font-display); font-weight:800; font-size:2.5rem;
          color: var(--tpv-accent); line-height:1; margin-bottom:4px;
        }
        .bridge-t__big-num--web { color:#06b6d4; }
        .bridge-t__big-lbl {
          font:.71rem 'Courier New',monospace;
          color:rgba(255,255,255,.28);
        }
        .bridge-t__sep { height:1px; background:rgba(255,255,255,.06); margin:14px 0; }

        /* Channel list */
        .bridge-t__channels { list-style:none; padding:0; margin:0; }
        .bridge-t__ch {
          display:flex; align-items:center; gap:8px;
          padding: 4px 0;
          font: .76rem 'Courier New',monospace;
        }
        .bridge-t__ch-dot {
          width:7px; height:7px; border-radius:50%; flex-shrink:0;
          background: var(--tpv-accent);
          box-shadow: 0 0 6px rgba(11,245,151,.6);
        }
        .bridge-t__ch-dot--web { background:#06b6d4; box-shadow:0 0 6px rgba(6,182,212,.6); }
        .bridge-t__ch-name { color:rgba(255,255,255,.5); flex:1; }
        .bridge-t__ch-st {
          font-size:.65rem; color:var(--tpv-accent);
          padding:1px 6px; border-radius:4px;
          background:rgba(11,245,151,.08);
        }
        .bridge-t__ch-st--web { color:#06b6d4; background:rgba(6,182,212,.08); }

        /* Zero conflicts */
        .bridge-t__zero {
          margin-top:auto;
          padding: 11px 14px;
          background:rgba(11,245,151,.05);
          border:1px solid rgba(11,245,151,.12);
          border-radius:8px;
          display:flex; align-items:center; gap:10px;
        }
        .bridge-t__zero-num {
          font-family:var(--font-display); font-weight:800; font-size:1.7rem;
          color:#fff; flex-shrink:0; line-height:1;
        }
        .bridge-t__zero-lbl {
          font:.7rem 'Courier New',monospace;
          color:rgba(255,255,255,.38); line-height:1.4;
        }

        /* ── Multi-tienda strip ── */
        .bridge-t__multi {
          display:flex; align-items:center; gap:14px;
          padding: 16px 22px;
          background:rgba(11,245,151,.04);
          border:1px solid rgba(11,245,151,.11);
          border-radius:12px;
        }
        .bridge-t__multi-icon {
          width:36px; height:36px; border-radius:9px; flex-shrink:0;
          background:rgba(11,245,151,.1); color:#0a8f5b;
          display:flex; align-items:center; justify-content:center;
        }
        .bridge-t__multi p { font-size:.85rem; color:var(--text-muted); line-height:1.55; }
        .bridge-t__multi strong { color:var(--text-dark); font-weight:700; }

        /* ── Responsive ── */
        @media (max-width: 700px) {
          .bridge-t__panels { grid-template-columns:1fr; }
          .bridge-t__vdiv   { width:auto; height:1px; }
          .bridge-t__stats-panel { background:none; }
          .bridge-t__line   { grid-template-columns:50px 1fr 14px; }
          .bridge-t__ts     { display:none; }
          .bridge-t__big-num { font-size:2rem; }
          .bridge-t__multi  { flex-direction:column; text-align:center; }
        }

        @media (prefers-reduced-motion: reduce) {
          .bridge-t__caret, .bridge-t__live-dot { animation:none; }
        }

        /* (bridge-t reemplaza los estilos de canal — eliminados) */
        ._unused_tpv-bridge__channel {
          flex: 1;
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: var(--radius-xl);
          padding: 40px;
          text-align: center;
          box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
          transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .tpv-bridge__channel:hover {
          transform: translateY(-8px);
          border-color: rgba(11, 245, 151, 0.5);
          box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
        }

        .tpv-bridge__channel-icon {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background: rgba(11, 245, 151, 0.12);
          color: #0a8f5b;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
        }

        .tpv-bridge__channel:hover .tpv-bridge__channel-icon {
          transform: scale(1.05);
          background: rgba(11, 245, 151, 0.2);
        }

        .tpv-bridge__channel-icon svg {
          width: 28px;
          height: 28px;
        }

        .tpv-bridge__channel h3 {
          font-size: 1.4rem;
          font-weight: 800;
          margin-bottom: 20px;
          color: var(--text-dark);
        }

        .tpv-bridge__channel-stats {
          display: flex;
          gap: 30px;
          justify-content: center;
        }

        .tpv-bridge__stat-value {
          display: block;
          font-size: 2rem;
          font-weight: 800;
          font-family: 'Courier New', monospace;
          color: var(--text-dark);
        }

        .tpv-bridge__stat-value--synced {
          color: #0a8f5b;
        }

        .tpv-bridge__stat-label {
          font-size: 0.85rem;
          color: var(--text-muted);
        }

        /* Puente conector */
        .tpv-bridge__connector {
          width: 120px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          flex-shrink: 0;
        }

        .tpv-bridge__line {
          width: 100%;
          height: 2px;
          background: #e2e8f0;
          position: relative;
        }

        .tpv-bridge__pulse {
          position: absolute;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: var(--tpv-accent);
          box-shadow: 0 0 12px rgba(11, 245, 151, 0.6);
          top: 50%;
          transform: translateY(-50%);
        }

        .tpv-bridge__pulse--right {
          animation: pulseRight 3s ease-in-out infinite;
        }

        .tpv-bridge__pulse--left {
          animation: pulseLeft 3s ease-in-out infinite;
          animation-delay: 1.5s;
        }

        @keyframes pulseRight {
          0% { left: 0; opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 1; }
          100% { left: calc(100% - 12px); opacity: 0; }
        }

        @keyframes pulseLeft {
          0% { left: calc(100% - 12px); opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 1; }
          100% { left: 0; opacity: 0; }
        }

        .tpv-bridge__label {
          font-size: 0.75rem;
          color: #0a8f5b;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-top: 12px;
        }

        /* Card multi-tienda */
        .tpv-bridge__multi-card {
          display: flex;
          align-items: flex-start;
          gap: 24px;
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: var(--radius-xl);
          padding: 30px 40px;
          max-width: 700px;
          margin: 0 auto;
          box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
          transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .tpv-bridge__multi-card:hover {
          border-color: rgba(11, 245, 151, 0.5);
          transform: translateY(-4px);
          box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
        }

        .tpv-bridge__multi-icon {
          width: 48px;
          height: 48px;
          border-radius: 12px;
          background: rgba(11, 245, 151, 0.12);
          color: #0a8f5b;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
        }

        .tpv-bridge__multi-card:hover .tpv-bridge__multi-icon {
          transform: scale(1.05);
          background: rgba(11, 245, 151, 0.2);
        }

        .tpv-bridge__multi-icon svg {
          width: 24px;
          height: 24px;
        }

        .tpv-bridge__multi-card h3 {
          font-size: 1.2rem;
          font-weight: 700;
          margin-bottom: 8px;
          color: var(--text-dark);
        }

        .tpv-bridge__multi-card p {
          font-size: 0.95rem;
          color: var(--text-muted);
          line-height: 1.6;
          margin: 0;
        }

        /* RESPONSIVE: Conector vertical */
        @media (max-width: 767px) {
          .tpv-bridge__connector {
            width: auto;
            height: 80px;
          }

          .tpv-bridge__line {
            width: 2px;
            height: 100%;
          }

          .tpv-bridge__pulse--right {
            animation: pulseDown 3s ease-in-out infinite;
          }

          .tpv-bridge__pulse--left {
            animation: pulseUp 3s ease-in-out infinite;
            animation-delay: 1.5s;
          }

          @keyframes pulseDown {
            0% { top: 0; left: 50%; transform: translate(-50%, 0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: calc(100% - 12px); left: 50%; transform: translate(-50%, 0); opacity: 0; }
          }

          @keyframes pulseUp {
            0% { top: calc(100% - 12px); left: 50%; transform: translate(-50%, 0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 0; left: 50%; transform: translate(-50%, 0); opacity: 0; }
          }

          .tpv-bridge__multi-card {
            flex-direction: column;
            text-align: center;
            align-items: center;
          }
        }

        @media (prefers-reduced-motion: reduce) {
          .tpv-bridge__pulse {
            animation: none !important;
            left: calc(50% - 6px);
            opacity: 0.9;
          }
        }
      


            @media (max-width: 992px) {
              .ecosystem-pipeline {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                padding: 1rem 0 2rem;
                gap: 2.5rem;
              }

              /* Cable de fibra óptica base */
              .ecosystem-pipeline::before {
                content: '';
                position: absolute;
                top: 3rem;
                /* Empieza dentro del primer botón */
                bottom: 3.5rem;
                /* Termina justo dentro del último botón */
                left: 50%;
                transform: translateX(-50%);
                width: 2px;
                background: rgba(255, 255, 255, 0.1);
                z-index: 0;
              }

              /* Pulso de luz animado */
              .ecosystem-pipeline::after {
                content: '';
                position: absolute;
                top: 3rem;
                left: 50%;
                transform: translateX(-50%);
                width: 4px;
                height: 80px;
                background: linear-gradient(180deg, transparent, #ff3355, #3b82f6, #0bf597, #8b5cf6, #06b6d4, transparent);
                border-radius: 4px;
                z-index: 1;
                animation: ctaMidFlow 3s infinite linear;
                filter: drop-shadow(0 0 8px rgba(255, 51, 85, 0.8));
              }

              @keyframes ctaMidFlow {
                0% {
                  top: 3rem;
                  opacity: 0;
                }

                15% {
                  opacity: 1;
                }

                85% {
                  opacity: 1;
                }

                100% {
                  top: calc(100% - 3.5rem - 80px);
                  opacity: 0;
                }

                /* El pulso muere dentro del último botón */
              }

              .module-pill {
                position: relative;
                z-index: 2;
                width: 80%;
                max-width: 280px;
                justify-content: flex-start !important;
                background: rgba(15, 23, 42, 0.85) !important;
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.08) !important;
                color: #ffffff !important;
                padding: 1.2rem 1.5rem !important;
                border-radius: 16px !important;
                box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
                font-weight: 600;
                overflow: hidden;
              }

              .module-pill svg {
                color: var(--pill-color) !important;
                margin-right: 14px !important;
                width: 22px;
                height: 22px;
              }

              /* Borde brillante a la izquierda usando la variable inline */
              .module-pill::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                width: 3px;
                background: var(--pill-color);
                box-shadow: 0 0 15px var(--pill-color);
              }

              .eco-connector {
                display: none !important;
              }
            }
          


    #footer {
      background: #0b1121;
      padding: 64px 24px 32px;
      font-family: 'Inter', sans-serif;
      color: #f8fafc;
      position: relative;
    }

    .bento-cockpit__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-areas: "brand brand erp ecommerce" "brand brand tpv crm" "cms company legal newsletter";
      gap: 16px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .bento-cockpit__tile {
      background: rgba(20, 30, 50, .45);
      border: 1px solid rgba(255, 255, 255, .08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-radius: 24px;
      padding: 28px;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
    }

    .bento-cockpit__tile--brand {
      grid-area: brand;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 280px;
    }

    .bento-cockpit__logo {
      height: 32px;
      width: auto;
      display: block;
      margin-bottom: 20px;
    }

    .bento-cockpit__tagline {
      color: #94a3b8;
      font-size: 14px;
      line-height: 1.65;
      margin: 0 0 28px;
      flex: 1;
    }

    .bento-cockpit__ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .bento-cockpit__btn-primary {
      background: #0066ff;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 11px 24px;
      font-size: 14px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background .2s, transform .2s;
    }

    .bento-cockpit__btn-primary:hover {
      background: #0052cc;
      transform: translateY(-2px);
    }

    .bento-cockpit__btn-secondary {
      background: #fff;
      color: #0b1121;
      border: none;
      border-radius: 10px;
      padding: 11px 24px;
      font-size: 14px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: border-color .2s, background .2s, transform .2s;
    }

    .bento-cockpit__btn-secondary:hover {
      background: #e8eefc;
      transform: translateY(-2px);
    }

    .bento-cockpit__tile--module {
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 130px;
      transition: background .35s, transform .3s;
      cursor: pointer;
    }

    .bento-cockpit__tile--module:hover {
      transform: translateY(-6px);
    }

    .bento-cockpit__tile-light {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: 3px 3px 0 0;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .55s cubic-bezier(.22, .61, .36, 1);
    }

    .bento-cockpit__tile--module.is-lit .bento-cockpit__tile-light {
      transform: scaleX(1);
    }

    .bento-cockpit__tile--erp {
      grid-area: erp;
    }

    .bento-cockpit__tile--ecommerce {
      grid-area: ecommerce;
    }

    .bento-cockpit__tile--tpv {
      grid-area: tpv;
    }

    .bento-cockpit__tile--crm {
      grid-area: crm;
    }

    .bento-cockpit__tile--cms {
      grid-area: cms;
    }

    .bento-cockpit__tile--erp:hover {
      background: radial-gradient(ellipse at 50% 0%, rgba(255, 51, 85, .13) 0%, rgba(20, 30, 50, .45) 70%);
    }

    .bento-cockpit__tile--ecommerce:hover {
      background: radial-gradient(ellipse at 50% 0%, rgba(52, 110, 211, .13) 0%, rgba(20, 30, 50, .45) 70%);
    }

    .bento-cockpit__tile--tpv:hover {
      background: radial-gradient(ellipse at 50% 0%, rgba(16, 185, 129, .13) 0%, rgba(20, 30, 50, .45) 70%);
    }

    .bento-cockpit__tile--crm:hover {
      background: radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, .13) 0%, rgba(20, 30, 50, .45) 70%);
    }

    .bento-cockpit__tile--cms:hover {
      background: radial-gradient(ellipse at 50% 0%, rgba(6, 182, 212, .13) 0%, rgba(20, 30, 50, .45) 70%);
    }

    .bento-cockpit__module-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .bento-cockpit__module-icon {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
    }

    .bento-cockpit__module-name {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: #f8fafc;
    }

    .bento-cockpit__module-desc {
      font-size: 12px;
      color: #94a3b8;
      margin: 0;
      flex: 1;
    }

    .bento-cockpit__tile--module .home-module-link {
      align-self: flex-end;
      margin-top: 10px;
      font-size: .8rem;
    }

    .bento-cockpit__tile--module .home-module-link::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .bento-cockpit__tile--module:hover .home-module-link .link-arrow.anim-shaft .shaft {
      opacity: 1;
      transform: translateX(0);
    }

    .bento-cockpit__tile--module:hover .home-module-link .link-arrow.anim-shaft .head {
      transform: translateX(0);
    }

    .bento-cockpit__module-arrow {
      font-size: 17px;
      color: #94a3b8;
      align-self: flex-end;
      transition: transform .2s, color .2s;
      display: block;
      text-align: right;
      line-height: 1;
    }

    .bento-cockpit__tile--module:hover .bento-cockpit__module-arrow {
      transform: translateX(6px);
      color: #f8fafc;
    }

    .bento-cockpit__tile--company {
      grid-area: company;
    }

    .bento-cockpit__tile--legal {
      grid-area: legal;
    }

    .bento-cockpit__nav-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: .09em;
      text-transform: uppercase;
      color: #94a3b8;
      margin: 0 0 14px;
    }

    .bento-cockpit__nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .bento-cockpit__nav-list a {
      color: #f8fafc;
      text-decoration: none;
      font-size: 13px;
      opacity: .8;
      transition: opacity .2s;
    }

    .bento-cockpit__nav-list a:hover {
      opacity: 1;
    }

    .bento-cockpit__tile--newsletter {
      grid-area: newsletter;
    }

    .bento-cockpit__nl-title {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 14px;
      color: #f8fafc;
      margin: 0 0 6px;
    }

    .bento-cockpit__nl-desc {
      font-size: 12px;
      color: #94a3b8;
      margin: 0 0 16px;
      line-height: 1.5;
    }

    .bento-cockpit__nl-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .bento-cockpit__nl-input {
      background: #141e30;
      border: 1px solid #1e293b;
      border-radius: 10px;
      padding: 10px 14px;
      color: #f8fafc;
      font-size: 13px;
      font-family: 'Inter', sans-serif;
      outline: none;
      transition: border-color .2s;
      width: 100%;
      box-sizing: border-box;
    }

    .bento-cockpit__nl-input::placeholder {
      color: #94a3b8;
    }

    .bento-cockpit__nl-input:focus {
      border-color: #0066ff;
    }

    .bento-cockpit__nl-btn {
      background: linear-gradient(120deg, #06112e, #0a2a8c, #0066ff, #00b8d4);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 10px 16px;
      font-size: 13px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 600;
      cursor: pointer;
      transition: opacity .2s, transform .2s;
    }

    .bento-cockpit__nl-btn:hover {
      opacity: .82;
      transform: translateY(-1px);
    }

    .bento-cockpit__bottom {
      max-width: 1200px;
      margin: 20px auto 0;
      padding-top: 20px;
      border-top: 1px solid #1e293b;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    .bento-cockpit__copy {
      font-size: 12px;
      color: #94a3b8;
      margin: 0;
    }

    .bento-cockpit__copy a {
      color: #94a3b8;
      text-decoration: none;
      transition: color .2s;
    }

    .bento-cockpit__copy a:hover {
      color: #f8fafc;
    }

    .bento-cockpit__socials {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .bento-cockpit__social-link {
      display: flex;
      align-items: center;
      color: #94a3b8;
      text-decoration: none;
      transition: color .2s, transform .2s;
    }

    .bento-cockpit__social-link:hover {
      color: #f8fafc;
      transform: translateY(-2px);
    }

    .bento-cockpit__social-link svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
      display: block;
    }

    @media(max-width:900px) {
      .bento-cockpit__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "brand brand" "erp ecommerce" "tpv crm" "cms company" "legal newsletter";
      }

      .bento-cockpit__tile--brand {
        min-height: 220px;
      }
    }

    @media(max-width:560px) {
      #footer {
        padding: 52px 16px 28px;
      }

      .bento-cockpit__grid {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "erp" "ecommerce" "tpv" "crm" "cms" "company" "legal" "newsletter";
      }

      .bento-cockpit__ctas {
        flex-direction: column;
      }

      .bento-cockpit__btn-primary,
      .bento-cockpit__btn-secondary {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
      }

      .bento-cockpit__bottom {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .bento-cockpit__tile-light {
        transform: scaleX(1) !important;
        transition: none !important;
      }

      .bento-cockpit__tile--module,
      .bento-cockpit__btn-primary,
      .bento-cockpit__btn-secondary,
      .bento-cockpit__nl-btn,
      .bento-cockpit__social-link,
      .bento-cockpit__module-arrow {
        transition: none !important;
      }

      .bento-cockpit__tile--module:hover {
        transform: none !important;
      }

      .bento-cockpit__module-arrow {
        transform: none !important;
      }
    }