/* ============================================================
   CMS LANDING — ESTILOS ESPECÍFICOS
   Archivo: cms/css/cms.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;
      }
    }
  
  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: none !important; }
  }



      :root {
        --cms-bento-gap: 24px;
        --cms-bento-radius: 24px;
        --font-display: Montserrat, sans-serif;
      }

      /* --- S3: La Agencia Invisible --- */
      :root {
        --agency-glass-bg: rgba(255, 255, 255, 0.7);
        --agency-glass-border: rgba(255, 255, 255, 0.6);
        --agency-color-copy: #3b82f6;
        --agency-color-design: #8b5cf6;
        --agency-color-dev: #10b981;
        --agency-color-seo: #06b6d4;
      }

      .cms-agency {
        position: relative;
        padding: 120px 0;
        text-align: center;
        overflow: hidden;
      }

      .cms-agency__badge {
        display: inline-block;
        background: rgba(6, 182, 212, 0.08);
        border: 1px solid rgba(6, 182, 212, 0.2);
        color: #06b6d4;
        padding: 8px 16px;
        border-radius: 30px;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 24px;
      }

      .cms-agency__title {
        font-family: var(--font-display);
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 60px;
        color: #0f172a;
      }

      .title-span {
        background: linear-gradient(to right, #06b6d4 0%, #22d3ee 25%, #a5f3fc 50%, #22d3ee 75%, #06b6d4 100%);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: inline-block;
        animation: titleShine 6s linear infinite;
      }

      @keyframes titleShine {
        to {
          background-position: 200% center;
        }
      }

      .cms-agency__orchestrator {
        position: relative;
        max-width: 1100px;
        margin: 0 auto;
        height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cms-agency__node {
        position: absolute;
        width: 130px;
        height: 130px;
        border-radius: 24px;
        background: var(--agency-glass-bg);
        border: 1px solid var(--agency-glass-border);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        z-index: 2;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        transform: translateY(20px);
      }

      .cms-agency__node.is-ready {
        opacity: 1;
        transform: translateY(0);
      }

      .cms-agency__node.is-active {
        transform: translateY(-10px) scale(1.05);
        background: #ffffff;
      }

      .cms-agency__node svg {
        width: 44px;
        height: 44px;
        stroke-width: 1.5;
        transition: stroke 0.3s;
        stroke: #94a3b8;
      }

      .cms-agency__node span {
        font-size: 0.95rem;
        font-weight: 600;
        color: #475569;
      }

      .cms-agency__node--copy {
        top: 10%;
        left: 5%;
      }

      .cms-agency__node--copy.is-active {
        box-shadow: 0 20px 50px rgba(59, 130, 246, 0.25);
        border-color: var(--agency-color-copy);
      }

      .cms-agency__node--copy.is-active svg {
        stroke: var(--agency-color-copy);
      }

      .cms-agency__node--design {
        top: 10%;
        right: 5%;
      }

      .cms-agency__node--design.is-active {
        box-shadow: 0 20px 50px rgba(139, 92, 246, 0.25);
        border-color: var(--agency-color-design);
      }

      .cms-agency__node--design.is-active svg {
        stroke: var(--agency-color-design);
      }

      .cms-agency__node--dev {
        bottom: 10%;
        left: 5%;
      }

      .cms-agency__node--dev.is-active {
        box-shadow: 0 20px 50px rgba(16, 185, 129, 0.25);
        border-color: var(--agency-color-dev);
      }

      .cms-agency__node--dev.is-active svg {
        stroke: var(--agency-color-dev);
      }

      .cms-agency__node--seo {
        bottom: 10%;
        right: 5%;
      }

      .cms-agency__node--seo.is-active {
        box-shadow: 0 20px 50px rgba(6, 182, 212, 0.25);
        border-color: var(--agency-color-seo);
      }

      .cms-agency__node--seo.is-active svg {
        stroke: var(--agency-color-seo);
      }

      .cms-agency__canvas {
        width: 480px;
        height: 360px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
        z-index: 2;
        position: relative;
        overflow: hidden;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        opacity: 0;
        transform: scale(0.95);
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .cms-agency__canvas.is-visible {
        opacity: 1;
        transform: scale(1);
      }

      .cms-agency__wire-hero {
        height: 100px;
        border-radius: 12px;
        background: #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cms-agency__wire-text {
        width: 40%;
        height: 14px;
        background: #e2e8f0;
        border-radius: 7px;
      }

      .cms-agency__wire-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        flex: 1;
      }

      .cms-agency__wire-box {
        background: #f8fafc;
        border-radius: 12px;
        border: 2px dashed #cbd5e1;
      }

      .cms-agency__wire-hero,
      .cms-agency__wire-text,
      .cms-agency__wire-box,
      .cms-agency__canvas {
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .cms-agency__canvas.step-copy .cms-agency__wire-text {
        background: var(--agency-color-copy);
        width: 70%;
      }

      .cms-agency__canvas.step-design .cms-agency__wire-hero {
        background: rgba(139, 92, 246, 0.1);
        border: 2px solid rgba(139, 92, 246, 0.3);
      }

      .cms-agency__canvas.step-dev .cms-agency__wire-box {
        background: rgba(16, 185, 129, 0.1);
        border-style: solid;
        border-color: rgba(16, 185, 129, 0.4);
      }

      .cms-agency__canvas.step-seo {
        box-shadow: 0 30px 80px rgba(6, 182, 212, 0.2);
        border-color: rgba(6, 182, 212, 0.5);
      }

      .cms-agency__canvas.step-seo::after {
        content: '✔ Optimizada';
        position: absolute;
        top: 12px;
        right: 16px;
        background: var(--agency-color-seo);
        color: white;
        font-size: 0.7rem;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: bold;
        opacity: 0;
        animation: agencyFadeIn 0.5s forwards;
      }

      @keyframes agencyFadeIn {
        to {
          opacity: 1;
        }
      }

      .cms-agency__nodes {
        position: static;
      }

      @media (max-width: 992px) {
        .cms-agency__orchestrator {
          height: auto;
          flex-direction: column;
          gap: 32px;
          padding: 24px 0;
        }

        .cms-agency__nodes {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          justify-content: center;
        }

        .cms-agency__node {
          position: relative;
          top: auto !important;
          bottom: auto !important;
          left: auto !important;
          right: auto !important;
          width: auto;
          height: 70px;
          flex-direction: row;
          padding: 0 24px;
          border-radius: 35px;
          gap: 12px;
        }

        .cms-agency__canvas {
          width: 100%;
          max-width: 480px;
        }
      }

      /* --- S4: Bento Grid Premium Light --- */
      .cms-bento {
        padding: 120px 0;
        position: relative;
        overflow: hidden;
        background-color: #f8fafc;
      }

      .cms-bento__grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(150px, auto);
        gap: var(--cms-bento-gap);
        position: relative;
        z-index: 2;
      }

      .cms-bento__card {
        -webkit-tap-highlight-color: transparent;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: var(--cms-bento-radius);
        padding: 40px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
      }

      @media (hover: hover) and (pointer: fine) {
        html:not(.is-touch) .cms-bento__card:hover {
          transform: translateY(-8px);
          border-color: rgba(6, 182, 212, 0.2);
          box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
        }
      }

      .cms-bento__card--main {
        grid-column: span 12;
        grid-row: span 3;
      }

      @media (min-width: 992px) {
        .cms-bento__card--main {
          grid-column: span 8;
          grid-row: span 4;
        }
      }

      .cms-bento__card--seo {
        grid-column: span 12;
        grid-row: span 2;
        align-items: center;
        justify-content: center;
      }

      @media (min-width: 992px) {
        .cms-bento__card--seo {
          grid-column: span 4;
          grid-row: span 2;
        }
      }

      .cms-bento__card--responsive {
        grid-column: span 12;
        grid-row: span 2;
        align-items: center;
        justify-content: center;
      }

      @media (min-width: 992px) {
        .cms-bento__card--responsive {
          grid-column: span 4;
          grid-row: span 2;
        }
      }

      .cms-bento__title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 12px;
        z-index: 2;
      }

      .cms-bento__desc {
        color: #64748b;
        font-size: 1rem;
        margin-bottom: 32px;
        z-index: 2;
        max-width: 80%;
        line-height: 1.6;
      }

      /* Celda 1: IA Editor */
      /* --- Celda 1: Animación Oscura AI Mockup --- */
      .cms-bento__dark-mockup {
        flex: 1;
        background: rgba(15, 23, 42, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        z-index: 2;
      }

      .cms-bento__dm-header {
        background: rgba(255, 255, 255, 0.03);
        padding: 0.75rem 1rem;
        display: flex;
        gap: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .cms-bento__dm-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #334155;
      }

      .cms-bento__dm-dot:nth-child(1) {
        background: #ef4444;
      }

      .cms-bento__dm-dot:nth-child(2) {
        background: #eab308;
      }

      .cms-bento__dm-dot:nth-child(3) {
        background: #22c55e;
      }

      .cms-bento__dm-body {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        flex-grow: 1;
      }

      .cms-bento__dm-hero {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
      }

      .cms-bento__dm-line {
        height: 12px;
        border-radius: 6px;
        background: rgba(59, 130, 246, 0.3);
        opacity: 0;
      }

      .cms-bento__dm-line.short {
        width: 40%;
        animation: dmAppear1 6s infinite;
      }

      .cms-bento__dm-line.long {
        width: 80%;
        animation: dmAppear2 6s infinite;
      }

      .cms-bento__dm-btn {
        height: 24px;
        width: 100px;
        border-radius: 12px;
        background: rgba(59, 130, 246, 0.8);
        margin-top: 0.5rem;
        opacity: 0;
        animation: dmAppearBtn 6s infinite;
      }

      .cms-bento__dm-grid {
        display: flex;
        gap: 1rem;
        flex-grow: 1;
      }

      .cms-bento__dm-card {
        flex: 1;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        min-height: 60px;
        opacity: 0;
      }

      .cms-bento__dm-card:nth-child(1) {
        animation: dmAppearCard1 6s infinite;
      }

      .cms-bento__dm-card:nth-child(2) {
        animation: dmAppearCard2 6s infinite;
      }

      .cms-bento__dm-card:nth-child(3) {
        animation: dmAppearCard3 6s infinite;
      }

      .cms-bento__dm-wand {
        position: absolute;
        width: 24px;
        height: 24px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, rgba(59, 130, 246, 0) 70%);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        animation: dmWandMove 6s infinite;
        z-index: 10;
        filter: blur(2px);
        box-shadow: 0 0 15px #3b82f6, 0 0 30px #3b82f6;
        margin-left: -12px;
        margin-top: -12px;
      }

      @keyframes dmAppear1 {

        0%,
        10% {
          opacity: 0;
          transform: translateY(10px);
        }

        15%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        95%,
        100% {
          opacity: 0;
          transform: translateY(-5px);
        }
      }

      @keyframes dmAppear2 {

        0%,
        15% {
          opacity: 0;
          transform: translateY(10px);
        }

        20%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        95%,
        100% {
          opacity: 0;
          transform: translateY(-5px);
        }
      }

      @keyframes dmAppearBtn {

        0%,
        20% {
          opacity: 0;
          transform: scale(0.9);
        }

        25%,
        85% {
          opacity: 1;
          transform: scale(1);
        }

        95%,
        100% {
          opacity: 0;
          transform: scale(1.1);
        }
      }

      @keyframes dmAppearCard1 {

        0%,
        30% {
          opacity: 0;
          transform: translateY(10px);
        }

        35%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        95%,
        100% {
          opacity: 0;
        }
      }

      @keyframes dmAppearCard2 {

        0%,
        35% {
          opacity: 0;
          transform: translateY(10px);
        }

        40%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        95%,
        100% {
          opacity: 0;
        }
      }

      @keyframes dmAppearCard3 {

        0%,
        40% {
          opacity: 0;
          transform: translateY(10px);
        }

        45%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        95%,
        100% {
          opacity: 0;
        }
      }

      @keyframes dmWandMove {
        0% {
          opacity: 0;
          top: 30%;
          left: 10%;
        }

        5% {
          opacity: 1;
          top: 30%;
          left: 20%;
        }

        12% {
          top: 30%;
          left: 70%;
        }

        18% {
          top: 40%;
          left: 80%;
        }

        25% {
          top: 50%;
          left: 50%;
        }

        32% {
          top: 70%;
          left: 20%;
        }

        38% {
          top: 70%;
          left: 50%;
        }

        45% {
          top: 70%;
          left: 80%;
        }

        55%,
        85% {
          opacity: 0;
          top: 70%;
          left: 80%;
        }

        100% {
          opacity: 0;
        }
      }

      /* --- S4: Studio Fusion --- */
      .cms-bento__studio {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        min-height: 480px;
        --studio-accent: #6366f1;
      }

      .cms-bento__studio-frame {
        width: 580px;
        height: 340px;
        background: rgba(15, 23, 42, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        animation: studioDeviceResize 12s infinite;
      }

      @media (max-width: 480px) {
        .cms-bento__studio {
          transform: scale(0.85);
        }
      }

      .cms-bento__studio-header {
        background: rgba(255, 255, 255, 0.04);
        padding: 0.7rem 0.9rem;
        display: flex;
        align-items: center;
        gap: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .cms-bento__studio-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #334155;
        flex: none;
      }

      .cms-bento__studio-dot:nth-child(1) { background: #ef4444; }
      .cms-bento__studio-dot:nth-child(2) { background: #eab308; }
      .cms-bento__studio-dot:nth-child(3) { background: #22c55e; }

      .cms-bento__studio-url {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        max-width: 70%;
        padding: 3px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.06);
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.55);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .cms-bento__studio-url i { font-size: 12px; color: #22c55e; }

      .cms-bento__studio-body {
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        flex-grow: 1;
      }

      .cms-bento__studio-hero {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        align-items: stretch;
      }

      /* .short = chip de marca ; .long = titular (conservan studioAppear1/2) */
      .cms-bento__studio-line {
        opacity: 0;
      }

      .cms-bento__studio-line.short {
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        gap: 7px;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.82);
        animation: studioAppear1 12s infinite;
      }

      .cms-bento__studio-line.short i {
        font-size: 16px;
        color: var(--studio-accent);
      }

      .cms-bento__studio-line.long {
        font-family: 'Montserrat', sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.2;
        color: #f1f5f9;
        text-align: center;
        animation: studioAppear2 12s infinite;
      }

      .cms-bento__studio-poster {
        height: 68px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--studio-accent) 0%, rgba(15, 23, 42, 0.55) 100%);
        border: 1px solid rgba(255, 255, 255, 0.08);
        opacity: 0;
        animation: studioAppearPoster 12s infinite;
      }

      .cms-bento__studio-poster i {
        font-size: 34px;
        color: rgba(255, 255, 255, 0.92);
        filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
      }

      .cms-bento__studio-btn {
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        padding: 0 16px;
        border-radius: 999px;
        background: var(--studio-accent);
        color: #fff;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 600;
        margin-top: 0.15rem;
        opacity: 0;
        animation: studioAppearBtn 12s infinite;
      }

      .cms-bento__studio-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
        flex-grow: 1;
        animation: studioGridReflow 12s infinite step-end;
      }

      .cms-bento__studio-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 8px;
        padding: 8px 10px;
        min-height: 48px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        opacity: 0;
      }

      .cms-bento__studio-card i {
        font-size: 18px;
        color: var(--studio-accent);
      }

      .cms-bento__studio-card-label {
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1;
      }

      .cms-bento__studio-card-meta {
        font-family: 'Inter', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
      }

      .cms-bento__studio-card:nth-child(1) { animation: studioAppearCard1 12s infinite; }
      .cms-bento__studio-card:nth-child(2) { animation: studioAppearCard2 12s infinite; }
      .cms-bento__studio-card:nth-child(3) { animation: studioAppearCard3 12s infinite; }

      .cms-bento__studio-wand {
        position: absolute;
        width: 24px;
        height: 24px;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.8) 0%, rgba(59, 130, 246, 0) 70%);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        animation: studioWandMove 12s infinite;
        z-index: 10;
        filter: blur(2px);
        box-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6;
        margin-left: -12px;
        margin-top: -12px;
      }

      @media (prefers-reduced-motion: reduce) {

        .cms-bento__studio-frame,
        .cms-bento__studio-line.short,
        .cms-bento__studio-line.long,
        .cms-bento__studio-poster,
        .cms-bento__studio-btn,
        .cms-bento__studio-grid,
        .cms-bento__studio-card,
        .cms-bento__studio-wand {
          animation: none !important;
          opacity: 1 !important;
        }

        .cms-bento__studio-grid {
          grid-template-columns: repeat(3, 1fr) !important;
        }

        .cms-bento__studio-wand {
          display: none !important;
        }
      }

      @keyframes studioDeviceResize {

        0%,
        55% {
          width: 580px;
          height: 340px;
          border-radius: 12px;
        }

        68%,
        85% {
          width: 200px;
          height: 400px;
          border-radius: 24px;
        }

        95%,
        100% {
          width: 580px;
          height: 340px;
          border-radius: 12px;
        }
      }

      @keyframes studioGridReflow {

        0%,
        61% {
          grid-template-columns: repeat(3, 1fr);
        }

        62%,
        90% {
          grid-template-columns: 1fr;
        }

        91%,
        100% {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      @keyframes studioAppear1 {

        0%,
        10% {
          opacity: 0;
          transform: translateY(10px);
        }

        15%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        90%,
        100% {
          opacity: 0;
          transform: translateY(-5px);
        }
      }

      @keyframes studioAppear2 {

        0%,
        15% {
          opacity: 0;
          transform: translateY(10px);
        }

        20%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        90%,
        100% {
          opacity: 0;
          transform: translateY(-5px);
        }
      }

      @keyframes studioAppearPoster {

        0%,
        12% {
          opacity: 0;
          transform: translateY(10px);
        }

        17%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        90%,
        100% {
          opacity: 0;
          transform: translateY(-5px);
        }
      }

      @keyframes studioAppearBtn {

        0%,
        20% {
          opacity: 0;
          transform: scale(0.9);
        }

        25%,
        85% {
          opacity: 1;
          transform: scale(1);
        }

        90%,
        100% {
          opacity: 0;
          transform: scale(1.1);
        }
      }

      @keyframes studioAppearCard1 {

        0%,
        25% {
          opacity: 0;
          transform: translateY(10px);
        }

        30%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        90%,
        100% {
          opacity: 0;
        }
      }

      @keyframes studioAppearCard2 {

        0%,
        30% {
          opacity: 0;
          transform: translateY(10px);
        }

        35%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        90%,
        100% {
          opacity: 0;
        }
      }

      @keyframes studioAppearCard3 {

        0%,
        35% {
          opacity: 0;
          transform: translateY(10px);
        }

        40%,
        85% {
          opacity: 1;
          transform: translateY(0);
        }

        90%,
        100% {
          opacity: 0;
        }
      }

      @keyframes studioWandMove {

        0%,
        5% {
          opacity: 0;
          top: 10%;
          left: 20%;
        }

        10% {
          opacity: 1;
          top: 20%;
          left: 40%;
        }

        15% {
          top: 30%;
          left: 80%;
        }

        20% {
          top: 40%;
          left: 50%;
        }

        25% {
          top: 70%;
          left: 10%;
        }

        30% {
          top: 70%;
          left: 50%;
        }

        35% {
          top: 70%;
          left: 80%;
        }

        40%,
        45% {
          opacity: 1;
          top: 80%;
          left: 90%;
        }

        46%,
        100% {
          opacity: 0;
          top: 80%;
          left: 90%;
        }
      }

      /* Celda 3: Responsive */
      .cms-bento__device-wrapper {
        width: 180px;
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
      }

      .cms-bento__device {
        width: 180px;
        height: 120px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        position: relative;
        transition: all 1s cubic-bezier(0.68, -0.55, 0.26, 1.55);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cms-bento__device::before {
        content: 'Desktop';
        color: #94a3b8;
        font-weight: 600;
        transition: all 1s ease;
      }

      .cms-bento__device.is-mobile {
        width: 70px;
        height: 140px;
        border-radius: 16px;
      }

      .cms-bento__device.is-mobile::before {
        content: 'Mobile';
        font-size: 0.8rem;
        transform: rotate(-90deg);
      }

      /* --- S4.5: Premium Split Power --- */
      .cms-power {
        padding: 120px 0;
        position: relative;
      }

      .cms-power__wrapper {
        display: flex;
        flex-direction: column;
        gap: 40px;
        background: #ffffff;
        border-radius: 32px;
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.05);
        overflow: hidden;
      }

      @media (min-width: 992px) {
        .cms-power__wrapper {
          flex-direction: row;
        }
      }

      .cms-power__col {
        flex: 1;
        padding: 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .cms-power__col--dark {
        background: #0f172a;
        color: white;
      }

      .cms-power__col-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 16px;
      }

      .cms-power__col-desc {
        color: #64748b;
        margin-bottom: 40px;
        line-height: 1.6;
      }

      .cms-power__col--dark .cms-power__col-desc {
        color: #94a3b8;
      }

      .cms-power__code {
        background: #020617;
        border-radius: 12px;
        padding: 24px;
        font-family: monospace;
        color: #94a3b8;
        font-size: 0.9rem;
        line-height: 1.7;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .cms-code-k {
        color: #c678dd;
      }

      /* Keyword */
      .cms-code-f {
        color: #61afef;
      }

      /* Function */
      .cms-code-s {
        color: #98c379;
      }

      /* String */

      .cms-power__ui {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 32px;
      }

      .cms-power__ui-field {
        margin-bottom: 20px;
      }

      .cms-power__ui-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #475569;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .cms-power__ui-input {
        width: 100%;
        height: 48px;
        background: white;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 0 16px;
        font-weight: 500;
        color: #0f172a;
        outline: none;
        transition: border-color 0.2s;
      }

      .cms-power__ui-input:focus {
        border-color: #3b82f6;
      }

      .cms-power__ui-btn {
        background: var(--primary-color);
        color: white;
        border: none;
        height: 48px;
        border-radius: 24px;
        padding: 0 32px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .cms-power__ui-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
      }

      /* Security card lock animation */
      .security-badge-mock {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
      }

      .security-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #10b981;
        font-size: 1.4rem;
      }

      .security-status {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .security-status span {
        font-size: 0.75rem;
        color: #64748b;
      }

      .security-status strong {
        font-size: 0.9rem;
        color: #10b981;
      }
    
  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: none !important; }
  }



.pweb-cascada__stage{ max-width:621px; margin:40px auto 0; display:flex; flex-direction:column; gap:26px; align-items:center; position:relative; }
.pweb-cascada__pill{ width:100%; max-width:560px; box-sizing:border-box; border-radius:40px; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(6,182,212,.25); box-shadow:0 10px 30px rgba(2,132,199,.10); padding:14px 22px; display:flex; align-items:center; gap:10px; transition:box-shadow .2s ease; position:relative; z-index:2; }
.pweb-cascada__pill.is-enter{ box-shadow:0 10px 30px rgba(2,132,199,.10), 0 0 0 4px rgba(34,211,238,.35), 0 0 26px rgba(34,211,238,.55); }
.pweb-cascada__spark-icon{ flex:0 0 auto; width:20px; height:20px; color:#06b6d4; }
.pweb-cascada__spark-icon svg{ width:100%; height:100%; display:block; }
.pweb-cascada__typed{ flex:1 1 auto; min-width:0; font-family:'Inter',sans-serif; font-size:1rem; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:clip; display:flex; }
.pweb-cascada__ch{ display:inline-block; white-space:pre; transform:translate(0,0) scale(1); opacity:1; transition:transform .55s cubic-bezier(.5,0,.3,1), opacity .5s ease; }
.pweb-cascada__stage.go .pweb-cascada__ch{ transform:translate(var(--tx,0px), var(--ty,60px)) scale(.4); opacity:0; transition-delay:calc(var(--i, 0) * 30ms); }
.pweb-cascada__caret{ flex:0 0 auto; width:2px; height:1.1em; background:#06b6d4; border-radius:2px; animation:pwebCascadaBlink 1s step-end infinite; }
.pweb-cascada__stage.go .pweb-cascada__caret{ opacity:0; }
@keyframes pwebCascadaBlink{ 0%, 49%{ opacity:1; } 50%, 100%{ opacity:0; } }
.pweb-cascada__sparkfield{ position:absolute; left:0; right:0; top:0; height:100%; pointer-events:none; z-index:1; }
.pweb-cascada__spark{ position:absolute; top:40px; width:5px; height:5px; border-radius:50%; background:#22d3ee; box-shadow:0 0 8px rgba(34,211,238,.9); opacity:0; transform:translate(0,0) scale(1); transition:transform .7s cubic-bezier(.4,0,.2,1), opacity .7s ease; }
.pweb-cascada__stage.go .pweb-cascada__spark{ opacity:1; transition-delay:calc(var(--sd,0) * 1ms); }
.pweb-cascada__stage.go .pweb-cascada__spark.land{ transform:translate(var(--stx,0px), var(--sty,220px)) scale(.3); opacity:0; }
/* fallback pill */
@media (prefers-reduced-motion: reduce){
  .pweb-cascada__ch,.pweb-cascada__caret,.pweb-cascada__spark{ transition:none !important; animation:none !important; }
  .pweb-cascada__caret{ opacity:0; } .pweb-cascada__spark{ opacity:0; } .pweb-cascada__ch{ opacity:1; transform:none; }
}

/* ===== Mockup Cascada (letterless) ===== */
.pweb-cascada__mock{
  width:100%;
  max-width:621px;
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(6,182,212,.22);
  box-shadow:0 24px 60px rgba(2,132,199,.14), 0 2px 8px rgba(2,132,199,.06);
  opacity:0;
  transform:scale(.96);
  transition:opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1);
  position:relative;
  z-index:2;
}
.pweb-cascada__stage.go .pweb-cascada__mock{
  opacity:1;
  transform:scale(1);
  transition-delay:.3s;
}

.pweb-cascada__browserbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:rgba(255,255,255,.65);
  border-bottom:1px solid rgba(6,182,212,.15);
}
.pweb-cascada__dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex:0 0 auto;
  opacity:.85;
}
.pweb-cascada__dot--r{ background:#fb7185; }
.pweb-cascada__dot--y{ background:#fbbf24; }
.pweb-cascada__dot--g{ background:#34d399; }
.pweb-cascada__urlpill{
  flex:1 1 auto;
  height:16px;
  margin-left:8px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(6,182,212,.18);
  max-width:260px;
  display:flex;
  align-items:center;
  padding-left:8px;
  box-sizing:border-box;
}
.pweb-cascada__urlpill svg{ opacity:.5; flex:0 0 auto; }

.pweb-cascada__body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Bloques genéricos: arrancan como wireframe punteado, caen y encajan */
.pweb-cascada__block{
  position:relative;
  opacity:0;
  transform:translateY(16px) scale(.97);
  border:1.5px dashed rgba(6,182,212,.5);
  border-radius:16px;
  transition:opacity 1.15s cubic-bezier(.16,1,.3,1),
             transform 1.15s cubic-bezier(.16,1,.3,1),
             border-color 1s ease,
             border-style 0s linear .55s;
  box-sizing:border-box;
}
.pweb-cascada__stage.go .pweb-cascada__block{
  opacity:1;
  transform:none;
  border-style:solid;
  border-color:rgba(6,182,212,.15);
}

/* Hero */
.pweb-cascada__block--hero{
  height:112px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  background:linear-gradient(135deg,#06b6d4,#22d3ee 55%,#a5f3fc);
}
.pweb-cascada__stage.go .pweb-cascada__block--hero{ transition-delay:1.3s, 1.3s, 1.3s, 2.45s; }

.pweb-cascada__bar{
  display:block;
  height:10px;
  border-radius:20px;
  background:rgba(255,255,255,.85);
}
.pweb-cascada__bar--title{ width:58%; height:13px; }
.pweb-cascada__bar--sub{ width:38%; opacity:.7; }
.pweb-cascada__pillbtn{
  display:block;
  width:74px;
  height:20px;
  margin-top:4px;
  border-radius:20px;
  background:#ffffff;
}
.pweb-cascada__hero-actions{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.pweb-cascada__hero-actions .pweb-cascada__pillbtn{ margin-top:0; }
.pweb-cascada__iconbtn{
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(255,255,255,.32);
  border:1px solid rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pweb-cascada__hero-avatars{ position:absolute; top:14px; right:16px; display:flex; }
.pweb-cascada__avatar{
  width:16px;
  height:16px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffffff,#a5f3fc);
  border:1.5px solid rgba(8,145,178,.4);
  margin-left:-6px;
}
.pweb-cascada__avatar:first-child{ margin-left:0; }
.pweb-cascada__hero-dots{
  position:absolute;
  bottom:12px;
  right:16px;
  display:grid;
  grid-template-columns:repeat(3, 4px);
  gap:4px;
}
.pweb-cascada__hero-dots span{ width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.55); }

/* Cards */
.pweb-cascada__block--cards{
  display:flex;
  gap:14px;
  padding:16px;
  border:1.5px dashed rgba(6,182,212,.5);
}
.pweb-cascada__stage.go .pweb-cascada__block--cards{ transition-delay:2.5s, 2.5s, 2.5s, 3.05s; }

.pweb-cascada__card{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:16px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(6,182,212,.15);
}
.pweb-cascada__icon{
  width:26px;
  height:26px;
  border-radius:8px;
  background:linear-gradient(135deg,#06b6d4,#a5f3fc);
}
.pweb-cascada__card-badge{
  position:absolute;
  top:10px;
  right:10px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:linear-gradient(135deg,#22d3ee,#06b6d4);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(6,182,212,.35);
}
.pweb-cascada__card-meter{ display:flex; align-items:flex-end; gap:3px; height:14px; }
.pweb-cascada__card-meter span{ width:4px; border-radius:2px; background:rgba(6,182,212,.3); }
.pweb-cascada__card-meter span:nth-child(1){ height:45%; }
.pweb-cascada__card-meter span:nth-child(2){ height:75%; background:rgba(6,182,212,.5); }
.pweb-cascada__card-meter span:nth-child(3){ height:100%; background:linear-gradient(180deg,#22d3ee,#06b6d4); }

/* Image band */
.pweb-cascada__block--image{
  height:88px;
  background:linear-gradient(120deg,#a5f3fc,#22d3ee 50%,#06b6d4);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pweb-cascada__stage.go .pweb-cascada__block--image{ transition-delay:4.6s, 4.6s, 4.6s, 5.75s; }
.pweb-cascada__image-glyph{ opacity:.9; }
.pweb-cascada__image-badge{
  position:absolute;
  top:12px;
  left:12px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.5);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== Magia: varita de luz + destellos ===== */
.pweb-cascada__magicfx{ position:absolute; inset:0; z-index:6; pointer-events:none; overflow:visible; }

.pweb-cascada__wand{
  position:absolute; width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, #a5f3fc 35%, #22d3ee 70%, transparent 100%);
  box-shadow:0 0 10px 3px rgba(34,211,238,.9), 0 0 22px 8px rgba(6,182,212,.5), 0 0 40px 14px rgba(34,211,238,.22);
  left:-6%; top:10%; opacity:0; transform:scale(.5);
}
.pweb-cascada__stage.go .pweb-cascada__wand{
  animation:pwebCascadaWandFly 5.7s cubic-bezier(.45,.05,.55,.95) .3s forwards;
}
@keyframes pwebCascadaWandFly{
  0%{ left:-6%; top:10%; opacity:0; transform:scale(.5); }
  8%{ opacity:1; }
  18%{ left:28%; top:18%; transform:scale(1); }
  30%{ left:28%; top:18%; transform:scale(1); }
  39%{ left:72%; top:50%; transform:scale(1); }
  48%{ left:72%; top:50%; transform:scale(1); }
  54%{ left:28%; top:50%; transform:scale(1); }
  64%{ left:28%; top:50%; transform:scale(1); }
  75%{ left:52%; top:78%; transform:scale(1); }
  89%{ left:90%; top:86%; transform:scale(1.35); opacity:1; }
  100%{ left:94%; top:88%; transform:scale(.15); opacity:0; }
}

/* Impacto: cada bloque reacciona justo cuando la varita lo toca, uno por uno */
.pweb-cascada__block::after{
  content:''; position:absolute; inset:-8px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 0 rgba(34,211,238,0); opacity:0;
}
.pweb-cascada__stage.go .pweb-cascada__block--hero::after{ animation:pwebCascadaImpact .7s ease 1.3s forwards; }
.pweb-cascada__stage.go .pweb-cascada__block--image::after{ animation:pwebCascadaImpact .7s ease 4.6s forwards; }
/* Las 2 tarjetas reaccionan una a una: primero la derecha, luego la izquierda */
.pweb-cascada__card{ position:relative; opacity:0; transform:translateY(10px) scale(.96); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.pweb-cascada__stage.go .pweb-cascada__card{ opacity:1; transform:none; }
.pweb-cascada__stage.go .pweb-cascada__card:nth-child(2){ transition-delay:2.5s; }
.pweb-cascada__stage.go .pweb-cascada__card:nth-child(1){ transition-delay:3.4s; }
.pweb-cascada__card::after{ content:''; position:absolute; inset:-6px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 rgba(34,211,238,0); opacity:0; }
.pweb-cascada__stage.go .pweb-cascada__card:nth-child(2)::after{ animation:pwebCascadaImpact .7s ease 2.5s forwards; }
.pweb-cascada__stage.go .pweb-cascada__card:nth-child(1)::after{ animation:pwebCascadaImpact .7s ease 3.4s forwards; }
@keyframes pwebCascadaImpact{
  0%{ box-shadow:0 0 0 0 rgba(34,211,238,.55); opacity:1; }
  100%{ box-shadow:0 0 26px 10px rgba(34,211,238,0); opacity:0; }
}

.pweb-cascada__twinkle{
  position:absolute; width:14px; height:14px;
  clip-path:polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
  background:radial-gradient(circle, #ffffff 0%, #a5f3fc 40%, #22d3ee 100%);
  box-shadow:0 0 10px rgba(34,211,238,.8);
  opacity:0; transform:scale(0) rotate(0deg);
}
.pweb-cascada__stage.go .pweb-cascada__twinkle{
  animation-name:pwebCascadaTwinkle; animation-duration:.9s; animation-timing-function:ease; animation-fill-mode:forwards;
}
@keyframes pwebCascadaTwinkle{
  0%{ opacity:0; transform:scale(0) rotate(0deg); }
  40%{ opacity:1; transform:scale(1) rotate(20deg); }
  100%{ opacity:0; transform:scale(.2) rotate(35deg); }
}

.pweb-cascada__dust{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#22d3ee; box-shadow:0 0 6px rgba(34,211,238,.8); opacity:0;
}
.pweb-cascada__stage.go .pweb-cascada__dust{
  animation-name:pwebCascadaDust; animation-duration:3.2s; animation-timing-function:ease-out; animation-fill-mode:forwards;
}
@keyframes pwebCascadaDust{
  0%{ opacity:0; transform:translateY(0); }
  15%{ opacity:.7; }
  70%{ opacity:.35; }
  100%{ opacity:0; transform:translateY(-44px); }
}

.pweb-cascada__sheen{
  position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), rgba(34,211,238,.35), transparent);
  transform:skewX(-18deg); opacity:0;
}
.pweb-cascada__stage.go .pweb-cascada__sheen{
  animation:pwebCascadaSheen 1.3s ease 6s forwards;
}
@keyframes pwebCascadaSheen{
  0%{ left:-60%; opacity:0; }
  15%{ opacity:.9; }
  60%{ opacity:.5; }
  100%{ left:130%; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .pweb-cascada__mock{ transition:none !important; opacity:1; transform:none; }
  .pweb-cascada__block{ transition:none !important; opacity:1; transform:none; border-style:solid; border-color:rgba(6,182,212,.15); }
  .pweb-cascada__block::after{ animation:none !important; opacity:0 !important; }
  .pweb-cascada__card{ transition:none !important; opacity:1 !important; transform:none !important; }
  .pweb-cascada__card::after{ animation:none !important; opacity:0 !important; }
  .pweb-cascada__magicfx{ display:none !important; }
}

@media (max-width:480px){
  .pweb-cascada__block--hero{ height:100px; padding:16px; }
  .pweb-cascada__block--cards{ gap:10px; padding:12px; }
  .pweb-cascada__card{ padding:12px 10px; }
}



      .cms-pipeline {
        background-color: var(--bg-dark);
        color: white;
        padding: 120px 0;
        position: relative;
        overflow: hidden;
        /* Texture noise */
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      }

      .cms-pipeline__header {
        text-align: center;
        margin-bottom: 80px;
      }

      .cms-pipeline__title {
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 5vw, 3.8rem);
        font-weight: 800;
        letter-spacing: -1.5px;
        margin-bottom: 20px;
      }

      .cms-pipeline__title span {
        background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .cms-pipeline__subtitle {
        font-size: 1.2rem;
        color: #94a3b8;
        max-width: 600px;
        margin: 0 auto;
      }

      .cms-pipeline__track {
        display: flex;
        align-items: stretch;
        justify-content: center;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
      }

      .cms-pipeline__node {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 20px;
        padding: 30px 20px;
        text-align: center;
        position: relative;
        z-index: 2;
        transition: background 0.3s ease, filter 0.3s ease;
      }

      .cms-pipeline__node:hover {
        background: rgba(30, 41, 59, 0.75);
        filter: brightness(1.14);
      }

      .cms-pipeline__node:hover .cms-pipeline__icon {
        transform: scale(1.08);
      }

      .cms-pipeline__node--copy {
        --nc-rgb: 59, 130, 246;
        border-color: rgba(59, 130, 246, 0.3);
      }

      .cms-pipeline__node--copy:hover {
        border-color: #3b82f6;
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
      }

      .cms-pipeline__node--design {
        --nc-rgb: 168, 85, 247;
        border-color: rgba(168, 85, 247, 0.3);
      }

      .cms-pipeline__node--design:hover {
        border-color: #a855f7;
        box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
      }

      .cms-pipeline__node--dev {
        --nc-rgb: 16, 185, 129;
        border-color: rgba(16, 185, 129, 0.3);
      }

      .cms-pipeline__node--dev:hover {
        border-color: #10b981;
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.2);
      }

      .cms-pipeline__node--seo {
        --nc-rgb: 6, 182, 212;
        border-color: rgba(6, 182, 212, 0.3);
      }

      .cms-pipeline__node--seo:hover {
        border-color: #06b6d4;
        box-shadow: 0 0 30px rgba(6, 182, 212, 0.2);
      }

      .cms-pipeline__icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        transition: transform 0.3s ease;
      }

      .cms-pipeline__node--copy .cms-pipeline__icon {
        background: rgba(59, 130, 246, 0.1);
        color: #60a5fa;
      }

      .cms-pipeline__node--design .cms-pipeline__icon {
        background: rgba(168, 85, 247, 0.1);
        color: #c084fc;
      }

      .cms-pipeline__node--dev .cms-pipeline__icon {
        background: rgba(16, 185, 129, 0.1);
        color: #34d399;
      }

      .cms-pipeline__node--seo .cms-pipeline__icon {
        background: rgba(6, 182, 212, 0.1);
        color: #22d3ee;
      }

      .cms-pipeline__icon svg {
        width: 24px;
        height: 24px;
      }

      .cms-pipeline__node h3 {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .cms-pipeline__node p {
        font-size: 0.85rem;
        color: #94a3b8;
        line-height: 1.5;
        margin: 0;
        flex: 1;
      }

      /* Conectores */
      .cms-pipeline__connector {
        flex: 0.5;
        align-self: center;
        height: 2px;
        background: rgba(255, 255, 255, 0.1);
        position: relative;
        z-index: 1;
      }

      /* Relevo: cada tarjeta se enciende y pasa el orbe a la siguiente.
         Ciclo de 8s -> nodo i activo [2i, 2i+2], orbe i viaja [2i+1, 2i+2]. */
      .cms-pipeline__node {
        animation: cmsNodeRelay 8s ease-in-out infinite;
      }

      .cms-pipeline__node:nth-of-type(3) {
        animation-delay: 2s;
      }

      .cms-pipeline__node:nth-of-type(5) {
        animation-delay: 4s;
      }

      .cms-pipeline__node:nth-of-type(7) {
        animation-delay: 6s;
      }

      /* Ciclo 8s (1s = 12.5%). La tarjeta enciende al aterrizar el orbe (0%),
         aguanta hasta que este vuelve a salir (12.5%) y se apaga durante su
         vuelo, quedando a oscuras justo cuando la siguiente se enciende (25%). */
      @keyframes cmsNodeRelay {

        0%,
        25%,
        100% {
          transform: translateY(0);
          border-color: rgba(var(--nc-rgb), 0.3);
          box-shadow: 0 0 0 rgba(var(--nc-rgb), 0);
        }

        3%,
        15% {
          transform: translateY(-5px);
          border-color: rgb(var(--nc-rgb));
          box-shadow: 0 0 30px rgba(var(--nc-rgb), 0.2);
        }
      }

      .cms-pipeline__pulse {
        position: absolute;
        top: -2px;
        left: 0;
        width: 30px;
        height: 6px;
        border-radius: 3px;
        opacity: 0;
        transform: translateX(-50%);
        background: linear-gradient(90deg, transparent, rgb(var(--orb-from)), transparent);
        box-shadow: 0 0 10px rgba(var(--orb-from), 0.7);
        animation: cmsOrbRelay 8s linear infinite;
        animation-delay: 1s;
      }

      .cms-pipeline__connector:nth-of-type(2) {
        --orb-from: 59, 130, 246;
        --orb-to: 168, 85, 247;
      }

      .cms-pipeline__connector:nth-of-type(4) {
        --orb-from: 168, 85, 247;
        --orb-to: 16, 185, 129;
      }

      .cms-pipeline__connector:nth-of-type(6) {
        --orb-from: 16, 185, 129;
        --orb-to: 6, 182, 212;
      }

      .cms-pipeline__connector:nth-of-type(4) .cms-pipeline__pulse {
        animation-delay: 3s;
      }

      .cms-pipeline__connector:nth-of-type(6) .cms-pipeline__pulse {
        animation-delay: 5s;
      }

      @keyframes cmsOrbRelay {

        /* nace fundido dentro de la tarjeta de origen */
        0% {
          left: 0;
          opacity: 0;
          background: linear-gradient(90deg, transparent, rgb(var(--orb-from)), transparent);
          box-shadow: 0 0 10px rgba(var(--orb-from), 0);
        }

        1.5% {
          opacity: 0.55;
          box-shadow: 0 0 10px rgba(var(--orb-from), 0.4);
        }

        3.5% {
          opacity: 1;
          box-shadow: 0 0 10px rgba(var(--orb-from), 0.7);
        }

        /* conserva el color de origen hasta bien pasada la mitad */
        7.5% {
          opacity: 1;
          background: linear-gradient(90deg, transparent, rgb(var(--orb-from)), transparent);
          box-shadow: 0 0 10px rgba(var(--orb-from), 0.7);
        }

        /* vira ya cerca del destino */
        10.5% {
          opacity: 1;
          background: linear-gradient(90deg, transparent, rgb(var(--orb-to)), transparent);
          box-shadow: 0 0 10px rgba(var(--orb-to), 0.7);
        }

        11% {
          opacity: 0.55;
          box-shadow: 0 0 10px rgba(var(--orb-to), 0.4);
        }

        /* muere fundido dentro de la tarjeta de destino */
        12.5% {
          left: 100%;
          opacity: 0;
          background: linear-gradient(90deg, transparent, rgb(var(--orb-to)), transparent);
          box-shadow: 0 0 10px rgba(var(--orb-to), 0);
        }

        100% {
          left: 100%;
          opacity: 0;
        }
      }

      /* Responsive */
      @media (max-width: 900px) {
        .cms-pipeline__track {
          flex-direction: column;
          align-items: center;
        }

        .cms-pipeline__node {
          width: 100%;
          max-width: 400px;
        }

        .cms-pipeline__connector {
          width: 2px;
          height: 40px;
          flex: none;
        }

        .cms-pipeline__pulse {
          width: 6px;
          height: 20px;
          top: 0;
          left: -2px;
          border-radius: 3px;
          transform: none;
          background: linear-gradient(180deg, transparent, rgb(var(--orb-from)), transparent);
          box-shadow: 0 0 10px rgba(var(--orb-from), 0.7);
          animation: cmsPulseV 8s linear infinite;
          animation-delay: 1s;
        }

        .cms-pipeline__connector:nth-of-type(4) .cms-pipeline__pulse {
          animation-delay: 3s;
        }

        .cms-pipeline__connector:nth-of-type(6) .cms-pipeline__pulse {
          animation-delay: 5s;
        }

        @keyframes cmsPulseV {
          0% {
            top: 0;
            opacity: 0;
            background: linear-gradient(180deg, transparent, rgb(var(--orb-from)), transparent);
            box-shadow: 0 0 10px rgba(var(--orb-from), 0);
          }

          1.5% {
            opacity: 0.55;
            box-shadow: 0 0 10px rgba(var(--orb-from), 0.4);
          }

          3.5% {
            opacity: 1;
            box-shadow: 0 0 10px rgba(var(--orb-from), 0.7);
          }

          7.5% {
            opacity: 1;
            background: linear-gradient(180deg, transparent, rgb(var(--orb-from)), transparent);
            box-shadow: 0 0 10px rgba(var(--orb-from), 0.7);
          }

          10.5% {
            opacity: 1;
            background: linear-gradient(180deg, transparent, rgb(var(--orb-to)), transparent);
            box-shadow: 0 0 10px rgba(var(--orb-to), 0.7);
          }

          11% {
            opacity: 0.55;
            box-shadow: 0 0 10px rgba(var(--orb-to), 0.4);
          }

          12.5% {
            top: 100%;
            opacity: 0;
            background: linear-gradient(180deg, transparent, rgb(var(--orb-to)), transparent);
            box-shadow: 0 0 10px rgba(var(--orb-to), 0);
          }

          100% {
            top: 100%;
            opacity: 0;
          }
        }
      }

    
  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: none !important; }
  }



  /* ============================================================
     S6 · Opción B — Conmutador de Sectores Verificados
     Namespace: .s6b-conmutador__   |   Acento: cian #06b6d4
     ============================================================ */

  .s6b-conmutador {
    position: relative;
    padding: clamp(72px, 10vw, 120px) 0;
    background:
      radial-gradient(120% 80% at 50% -10%, rgba(6, 182, 212, 0.07), transparent 60%),
      linear-gradient(180deg, #ffffff 0%, #f4fbfd 100%);
    color: #0f172a;
    overflow: hidden;
    isolation: isolate;
  }

  /* Trama técnica sutil de fondo (grid azul-cian apenas perceptible) */
  .s6b-conmutador__grid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(110% 90% at 50% 0%, #000 35%, transparent 78%);
    mask-image: radial-gradient(110% 90% at 50% 0%, #000 35%, transparent 78%);
  }

  .s6b-conmutador__inner {
    position: relative;
    z-index: 2;
  }

  /* ── Cabecera ── */
  .s6b-conmutador__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto clamp(40px, 5vw, 56px);
  }

  .s6b-conmutador__title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    color: #0f172a;
  }

  .s6b-conmutador__subtitle {
    font-size: clamp(1.02rem, 2vw, 1.18rem);
    line-height: 1.6;
    color: #64748b;
    margin: 0;
  }

  /* ── Pestañas de sector (role=tablist) ── */
  .s6b-conmutador__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto clamp(34px, 4vw, 48px);
    max-width: 760px;
  }

  .s6b-conmutador__tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    appearance: none;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    color: #475569;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    padding: 11px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease,
      background .25s ease, box-shadow .25s ease, transform .25s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }

  .s6b-conmutador__tab i {
    font-size: 1.15rem;
    color: #94a3b8;
    transition: color .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
  }

  .s6b-conmutador__tab:hover {
    color: #0f172a;
    border-color: rgba(6, 182, 212, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.12);
  }

  .s6b-conmutador__tab:hover i { color: #06b6d4; }

  .s6b-conmutador__tab:focus-visible {
    outline: none;
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.28);
  }

  .s6b-conmutador__tab[aria-selected="true"] {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 10px 26px rgba(6, 182, 212, 0.35);
    transform: translateY(-1px);
  }

  .s6b-conmutador__tab[aria-selected="true"] i {
    color: #ffffff;
    transform: scale(1.12) rotate(-6deg);
  }

  /* ── Marco / consola del comparador ── */
  .s6b-conmutador__stage {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
  }

  /* Solo escritorio: reduce el tamaño visual del comparador un 5% */
  @media (min-width: 561px) {
    .s6b-conmutador__stage {
      transform: scale(0.95);
      transform-origin: top center;
    }
  }

  .s6b-conmutador__console {
    position: relative;
    max-width: 1084px;
    margin: 0 auto;
    border-radius: 22px;
    padding: clamp(15px, 2.3vw, 23px);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 251, 253, 0.92));
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
      0 40px 90px -30px rgba(8, 47, 73, 0.28),
      0 2px 0 rgba(255, 255, 255, 0.8) inset;
  }

  /* Borde-gradiente cian que enmarca la consola */
  .s6b-conmutador__console::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(6, 182, 212, 0.55), transparent 38%,
        transparent 62%, rgba(6, 182, 212, 0.3));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  /* Barra superior estilo navegador */
  .s6b-conmutador__chrome {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 8px 14px;
  }

  .s6b-conmutador__dots {
    display: flex;
    gap: 7px;
    flex: none;
  }

  .s6b-conmutador__dots span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #e2e8f0;
  }

  .s6b-conmutador__dots span:nth-child(1) { background: #f87171; }
  .s6b-conmutador__dots span:nth-child(2) { background: #fbbf24; }
  .s6b-conmutador__dots span:nth-child(3) { background: #34d399; }

  .s6b-conmutador__urlbar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .s6b-conmutador__urlbar i { color: #06b6d4; font-size: 0.95rem; flex: none; }
  .s6b-conmutador__url-host { color: #0f172a; font-weight: 600; }
  .s6b-conmutador__url-path { color: #94a3b8; }

  /* ── Comparador antes/después ── */
  .s6b-conmutador__compare {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f9;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) inset;
  }

  @media (max-width: 560px) {
    .s6b-conmutador__compare { aspect-ratio: 4 / 5; }
    /* En móvil el <input type="range"> nativo se saca de la jugada táctil (un tap en
       cualquier punto de la caja saltaba el valor de golpe) -> el arrastre se reimplementa
       a mano en JS, restringido a tocar el grip o a un slide horizontal confirmado. */
    #cms-s6-conmutador .s6b-conmutador__range { pointer-events: none; touch-action: pan-y; }
  }

  .s6b-conmutador__pane {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* El "después" va debajo: z-index bajo para que sus hijos (nk-nav z:10 etc.) no tapen al panel anterior */
  .s6b-conmutador__pane--after {
    z-index: 1;
  }

  /* El "antes" se recorta por la derecha según el mango */
  .s6b-conmutador__pane--before {
    z-index: 2;
    width: var(--s6b-pos, 50%);
    border-right: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 2px 0 14px rgba(8, 47, 73, 0.18);
  }

  /* Contenido a tamaño completo dentro del panel recortado */
  .s6b-conmutador__screen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .s6b-conmutador__pane--before .s6b-conmutador__screen {
    width: max(100%, var(--s6b-stage-w, 1040px));
  }

  /* Etiquetas Antes / Con Nube3i */
  .s6b-conmutador__tag {
    position: absolute;
    top: 14px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity .3s ease;
  }

  .s6b-conmutador__tag i { font-size: 0.9rem; }

  .s6b-conmutador__tag--before {
    left: 14px;
    background: rgba(100, 116, 139, 0.85);
    color: #f8fafc;
  }

  .s6b-conmutador__tag--after {
    right: 14px;
    background: rgba(6, 182, 212, 0.92);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.4);
  }

  /* Fila de pills en flujo normal entre la urlbar y .compare (no absoluta encima del
     recuadro), en todos los breakpoints. La copia absoluta de dentro de .compare queda
     oculta siempre. */
  .s6b-conmutador__tags-mobile {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0;
  }
  .s6b-conmutador__tags-mobile .s6b-conmutador__tag {
    position: static;
  }
  .s6b-conmutador__compare > .s6b-conmutador__tag {
    display: none;
  }

  /* Mango deslizante */
  .s6b-conmutador__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--s6b-pos, 50%);
    z-index: 5;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: none;
  }

  .s6b-conmutador__grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.85),
      0 10px 26px rgba(6, 182, 212, 0.5),
      0 0 30px rgba(6, 182, 212, 0.4);
    transition: transform .2s ease, box-shadow .2s ease;
  }

  .s6b-conmutador__grip i { font-size: 1.2rem; line-height: 1; }

  /* Glow del mango durante el barrido de reconstrucción */
  .s6b-conmutador__compare.is-rebuilding .s6b-conmutador__grip {
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.9),
      0 0 22px rgba(6, 182, 212, 0.9),
      0 0 54px rgba(6, 182, 212, 0.6);
  }

  /* Estela vertical que "escanea" mientras se reconstruye */
  .s6b-conmutador__scanline {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--s6b-pos, 50%);
    z-index: 4;
    width: 60px;
    margin-left: -30px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg,
        transparent, rgba(6, 182, 212, 0.32), transparent);
    transition: opacity .25s ease;
  }

  .s6b-conmutador__compare.is-rebuilding .s6b-conmutador__scanline { opacity: 1; }

  /* Input range invisible que controla todo (accesibilidad nativa) */
  .s6b-conmutador__range {
    position: absolute;
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }

  .s6b-conmutador__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 46px;
    height: 46px;
    cursor: ew-resize;
  }

  .s6b-conmutador__range::-moz-range-thumb {
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    cursor: ew-resize;
  }

  .s6b-conmutador__range:focus-visible {
    outline: none;
  }

  .s6b-conmutador__compare:focus-within .s6b-conmutador__grip {
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, 0.9),
      0 0 0 8px rgba(6, 182, 212, 0.45),
      0 10px 26px rgba(6, 182, 212, 0.5);
  }

  /* El fundido al cambiar de sector lo hace cada preview por separado (clases `is-off` /
     `is-loading` sobre los hijos del panel), no la pantalla entera. */

  /* ============================================================
     MOCKUPS — escenas reutilizables (antes/después por sector)
     Construidas con divs (sin imágenes externas).
     ============================================================ */

  /* --- Lienzo base "después" (limpio, cian) --- */
  .s6b-mk {
    position: absolute;
    inset: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body, "Inter", sans-serif);
  }

  .s6b-mk__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.2% 4.5%;
    border-bottom: 1px solid #eef2f6;
    flex: none;
  }

  .s6b-mk__brand {
    display: flex;
    align-items: center;
    gap: 2.2%;
    font-family: var(--font-display);
    font-weight: 800;
    color: #0f172a;
    font-size: clamp(0.7rem, 1.7vw, 1.05rem);
    letter-spacing: -0.01em;
  }

  .s6b-mk__brand .s6b-mk__logo {
    width: clamp(16px, 3vw, 26px);
    height: clamp(16px, 3vw, 26px);
    border-radius: 7px;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: none;
  }

  .s6b-mk__brand .s6b-mk__logo i { font-size: clamp(0.7rem, 1.6vw, 1rem); }

  .s6b-mk__nav {
    display: flex;
    gap: 4%;
  }

  .s6b-mk__nav span {
    width: clamp(26px, 5vw, 46px);
    height: clamp(5px, 1vw, 8px);
    border-radius: 4px;
    background: #e2e8f0;
  }

  .s6b-mk__nav span:last-child {
    background: #06b6d4;
    width: clamp(34px, 6vw, 58px);
  }

  .s6b-mk__body {
    flex: 1;
    display: flex;
    gap: 4%;
    padding: 4.5%;
    min-height: 0;
  }

  .s6b-mk__col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }

  .s6b-mk__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-size: clamp(0.5rem, 1.2vw, 0.72rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    padding: 4px 9px;
    border-radius: 999px;
    margin-bottom: 5%;
  }

  .s6b-mk__h {
    height: clamp(9px, 2.4vw, 20px);
    border-radius: 6px;
    background: #0f172a;
    margin-bottom: 3.5%;
  }

  .s6b-mk__h--w70 { width: 70%; }
  .s6b-mk__h--w85 { width: 85%; }

  .s6b-mk__line {
    height: clamp(5px, 1.2vw, 9px);
    border-radius: 4px;
    background: #cbd5e1;
    margin-bottom: 3%;
  }

  .s6b-mk__line--w100 { width: 100%; }
  .s6b-mk__line--w90 { width: 90%; }
  .s6b-mk__line--w60 { width: 60%; }

  .s6b-mk__cta {
    margin-top: 4%;
    display: flex;
    gap: 3%;
  }

  .s6b-mk__btn {
    height: clamp(16px, 3.4vw, 30px);
    border-radius: 7px;
    flex: none;
  }

  .s6b-mk__btn--primary {
    width: clamp(70px, 16vw, 130px);
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    box-shadow: 0 6px 16px rgba(6, 182, 212, 0.35);
  }

  .s6b-mk__btn--ghost {
    width: clamp(54px, 12vw, 96px);
    background: #fff;
    border: 1px solid #cbd5e1;
  }

  /* Panel lateral / card destacada del "después" */
  .s6b-mk__panel {
    flex: 1;
    border-radius: 14px;
    background: linear-gradient(160deg, #ecfeff 0%, #f0f9ff 100%);
    border: 1px solid rgba(6, 182, 212, 0.18);
    padding: 4.5%;
    display: flex;
    flex-direction: column;
    gap: 8%;
    min-width: 0;
  }

  .s6b-mk__panel-head {
    display: flex;
    align-items: center;
    gap: 4%;
  }

  .s6b-mk__panel-ic {
    width: clamp(22px, 4.6vw, 38px);
    height: clamp(22px, 4.6vw, 38px);
    border-radius: 9px;
    background: #fff;
    border: 1px solid rgba(6, 182, 212, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06b6d4;
    flex: none;
  }

  .s6b-mk__panel-ic i { font-size: clamp(0.8rem, 2vw, 1.2rem); }

  .s6b-mk__panel-titles { flex: 1; min-width: 0; }

  .s6b-mk__panel-titles b {
    display: block;
    height: clamp(6px, 1.5vw, 11px);
    width: 70%;
    background: #0f172a;
    border-radius: 4px;
    margin-bottom: 18%;
  }

  .s6b-mk__panel-titles em {
    display: block;
    height: clamp(4px, 1vw, 7px);
    width: 45%;
    background: #94a3b8;
    border-radius: 3px;
  }

  /* Filas tipo "slot de reserva / pedido / producto" */
  .s6b-mk__rows {
    display: flex;
    flex-direction: column;
    gap: 6%;
    flex: 1;
  }

  .s6b-mk__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4%;
    background: #ffffff;
    border: 1px solid rgba(6, 182, 212, 0.14);
    border-radius: 9px;
    padding: 3.4% 4%;
  }

  .s6b-mk__row-l {
    flex: 1;
    height: clamp(5px, 1.1vw, 8px);
    border-radius: 4px;
    background: #e2e8f0;
    max-width: 55%;
  }

  .s6b-mk__pill {
    flex: none;
    font-size: clamp(0.42rem, 1vw, 0.62rem);
    font-weight: 700;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.12);
    border-radius: 999px;
    padding: 3px 8px;
    letter-spacing: 0.02em;
  }

  .s6b-mk__pill--ok {
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
  }

  /* --- Lienzo "antes": web sobria y anticuada PLAUSIBLE --- */
  .s6b-old {
    position: absolute;
    inset: 0;
    background: #eef0f1;
    display: flex;
    flex-direction: column;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: #2b2b2b;
  }

  .s6b-old__bar {
    flex: none;
    padding: 2.6% 3.5%;
    background: linear-gradient(180deg, #4a5a6a, #3a4856);
    color: #e8edf1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #2c3742;
  }

  .s6b-old__bar b {
    font-size: clamp(0.62rem, 1.6vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  }

  .s6b-old__bar small {
    font-size: clamp(0.42rem, 1vw, 0.64rem);
    color: #b9c4ce;
  }

  .s6b-old__menu {
    flex: none;
    display: flex;
    gap: 1px;
    background: #c3cad0;
    border-bottom: 1px solid #aab3bb;
  }

  .s6b-old__menu span {
    font-size: clamp(0.42rem, 1vw, 0.66rem);
    color: #2f3a45;
    padding: 1.6% 2.6%;
    background: #dde2e6;
    border-right: 1px solid #c3cad0;
    white-space: nowrap;
  }

  .s6b-old__menu span:first-child {
    color: #14418a;
    text-decoration: underline;
    background: #d3dae0;
  }

  .s6b-old__body {
    flex: 1;
    display: flex;
    gap: 3%;
    padding: 3.5%;
    min-height: 0;
  }

  .s6b-old__main { flex: 1.6; min-width: 0; }
  .s6b-old__side {
    flex: 1;
    background: #e3e7ea;
    border: 1px solid #cfd6db;
    padding: 3%;
    min-width: 0;
  }

  .s6b-old__title {
    font-size: clamp(0.68rem, 1.9vw, 1.18rem);
    font-weight: 700;
    color: #1b3b6b;
    margin: 0 0 2.5%;
    line-height: 1.15;
  }

  .s6b-old__hr {
    height: 2px;
    background: #b9c0c6;
    border-bottom: 1px solid #fff;
    margin: 2% 0 3.5%;
  }

  .s6b-old__txt {
    height: clamp(4px, 1vw, 7px);
    background: #c4ccd2;
    border-radius: 1px;
    margin-bottom: 2.6%;
  }

  .s6b-old__txt--w100 { width: 100%; }
  .s6b-old__txt--w95 { width: 95%; }
  .s6b-old__txt--w80 { width: 80%; }

  /* "Listado de teléfonos" / "carta PDF" — bloques crudos anticuados */
  .s6b-old__list {
    margin-top: 3%;
    border: 1px solid #c4ccd2;
    background: #f4f6f7;
  }

  .s6b-old__list-row {
    display: flex;
    align-items: center;
    gap: 3%;
    padding: 1.8% 2.4%;
    border-bottom: 1px solid #d6dce0;
    font-size: clamp(0.42rem, 1vw, 0.64rem);
    color: #3a4754;
  }

  .s6b-old__list-row:last-child { border-bottom: 0; }
  .s6b-old__list-row i { color: #6b7783; font-size: clamp(0.6rem, 1.3vw, 0.9rem); }
  .s6b-old__list-row span:first-of-type { color: #14418a; text-decoration: underline; }
  .s6b-old__list-row .s6b-old__dots {
    flex: 1;
    height: clamp(3px, 0.8vw, 6px);
    background: #d3dade;
    border-radius: 1px;
  }

  .s6b-old__side b {
    display: block;
    font-size: clamp(0.46rem, 1.1vw, 0.7rem);
    color: #3a4754;
    margin-bottom: 4%;
  }

  .s6b-old__side .s6b-old__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
      repeating-linear-gradient(45deg, #d7dde1 0 8px, #ccd3d8 8px 16px);
    border: 1px solid #bcc4ca;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a949d;
    margin-bottom: 6%;
  }

  .s6b-old__side .s6b-old__img i { font-size: clamp(0.9rem, 2.4vw, 1.6rem); }

  .s6b-old__badge {
    display: inline-block;
    font-size: clamp(0.42rem, 1vw, 0.62rem);
    color: #7a5b00;
    background: #fff6d6;
    border: 1px solid #e6d289;
    padding: 2px 7px;
    border-radius: 2px;
  }

  /* Indicadores de progreso (qué sector está activo) bajo las pestañas */
  .s6b-conmutador__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .s6b-conmutador__screen { transition: none !important; }
    .s6b-conmutador__scanline { display: none !important; }
    .s6b-conmutador__compare.is-rebuilding .s6b-conmutador__grip { box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.85),
        0 10px 26px rgba(6, 182, 212, 0.5); }
    .s6b-conmutador__tab i { transition: none !important; }
  }

  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: none !important; }
  }



  /* Previews de los sectores: <img> pantallazo WebP (o clon de <template> para los mockups) */
  #cms-s6-conmutador .s6b-frame{ position:absolute; top:0; left:0; border:0; transform-origin:top left; background:#fff; pointer-events:none; }
  /* La <img> se captura al aspecto EXACTO de la caja (16:10 / 4:5) -> rellena sin distorsion */
  #cms-s6-conmutador img.s6b-frame{ width:100%; height:100%; object-fit:fill; }
  /* Todas las previews de un panel (webs reales + mockups sinteticos) conviven APILADAS y
     se alternan con opacidad, nunca con display:none. Motivo: un iframe en display:none no
     genera layout, asi que sus fuentes y sus imagenes de fondo no llegan a cargarse; al
     mostrarlo se veia el layout crudo, luego el FOUT y luego el diseno final. Manteniendolas
     apiladas y solo transparentes, el navegador ya las tiene medidas y pintadas. */
  #cms-s6-conmutador .s6b-conmutador__screen > .old-mockup,
  #cms-s6-conmutador .s6b-conmutador__screen > .nk-mockup{ position:absolute; top:0; left:0; }
  #cms-s6-conmutador .s6b-conmutador__screen > *{ opacity:1; transition:opacity .32s ease; }
  /* `is-loading` = <img> aun sin cargar (se revela en su evento `load`).
     `is-off`     = preview cacheada que ahora mismo no toca mostrar.
     En ambos casos invisible, pero sigue en el flujo -> sin recarga ni reflujo al volver. */
  #cms-s6-conmutador .s6b-conmutador__screen > .is-loading,
  #cms-s6-conmutador .s6b-conmutador__screen > .is-off{ opacity:0; pointer-events:none; }
  #cms-s6-conmutador .s6b-conmutador__pane--after  .s6b-conmutador__screen{ background:#0f172a; }
  #cms-s6-conmutador .s6b-conmutador__pane--before .s6b-conmutador__screen{ background:#e2e8f0; }
  /* Pie del mockup sintetico ANTES (sector Distribucion): sin el no queda contenido
     suficiente para llenar la caja alta del movil (4:5) y se ve mucho hueco vacio debajo
     de la tabla de productos. */
  .old-footer { background: #e0ddd0; border-top: 0.2cqw solid #999; padding: 1cqw 0; text-align: center; font-family: Arial, sans-serif; }
  .old-footer-links { font-size: 1cqw; margin-bottom: 0.5cqw; }
  .old-footer-links a { color: #00c; text-decoration: underline; margin: 0 0.4cqw; }
  .old-footer-addr { font-size: 0.9cqw; color: #555; }
  /* Placeholder "foto de flota/local", mismo patron que usan las paginas ANTES reales
     (Ferreteria: "Nuestra flota:", Casa Marina: "foto_comedor.jpg") -> aporta contenido
     de verdad al mockup sintetico, no solo relleno visual. */
  .old-photo { width: 100%; height: 20cqw; min-height: 140px; border: 2px inset #999;
    background: repeating-linear-gradient(45deg,#d7d7d7 0 8px,#cfcfcf 8px 16px);
    display: flex; align-items: center; justify-content: center; color: #888;
    font-family: Arial, sans-serif; font-size: 1cqw; margin-top: 1cqw; text-align: center; }
  /* Panel DESPUES sintetico (Distribucion/Comercio, .nk-mockup): esta markup vive en el
     DOM principal (no en un iframe), asi que SI hereda el viewport real -> a diferencia
     de los paneles ANTES (iframe con escala JS), aqui basta una media query normal.
     Sin esto el .nk-nav (logo+enlaces+telefono+CTA en una sola fila) se amontonaba
     ilegible en movil, porque .nk-links/.nk-nav-right no tienen tratamiento responsive. */
  @media (max-width: 560px) {
    /* el span del telefono lleva style="display:flex" inline -> hace falta !important */
    #cms-s6-conmutador .nk-nav-right span { display: none !important; }
    /* Contenido del navbar (logo/enlaces/CTA) mas grande, SOLO en movil */
    #cms-s6-conmutador .nk-nav { padding: 3cqw 4cqw; }
    #cms-s6-conmutador .nk-logo { font-size: 2.8cqw; gap: 1.2cqw; white-space: nowrap; }
    #cms-s6-conmutador .nk-logo-icon { padding: 0.9cqw; border-radius: 0.9cqw; }
    #cms-s6-conmutador .nk-nav .nk-btn { font-size: 2.1cqw; padding: 1.2cqw 2.2cqw; }
    /* Patron movil: logo+nombre (1 linea) + boton CTA + icono de menu desplegable
       (decorativo, no funcional) EN VEZ de los enlaces en fila -> quitaba legibilidad
       amontonados; el icono "oculta" el resto de secciones como haria un menu real. */
    #cms-s6-conmutador .nk-links { display: none; }
    #cms-s6-conmutador .nk-nav-right::after {
      content: "";
      display: block;
      width: 4.2cqw;
      height: 3cqw;
      margin-left: 2cqw;
      background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
      background-size: 100% 12%;
      background-repeat: no-repeat;
      background-position: top, center, bottom;
      color: inherit;
      opacity: 0.9;
      flex: none;
    }
    /* .nk-body va en fila (texto + imagen lado a lado) siempre -> en movil queda muy
       apretado y con la tarjeta minusculizada, se ve "vacio". Solo en movil: columna,
       texto arriba (ya es el primero en el DOM) e imagen abajo, mas pequena. */
    #cms-s6-conmutador .nk-body { flex-direction: column; align-items: stretch; }
    /* la parte de arriba (texto) agrandada hasta ocupar ~mitad de la caja. OJO: el alto
       total (nav+links+texto+imagen) tiene que caber en la caja (~389px en el movil de
       referencia 311x389) o la imagen se corta por el overflow:hidden del panel -> se
       ajustaron tamanos/margenes para que sume ~100% sin desbordar. */
    /* min-height mas bajo (antes 44%) -> el bloque de texto no empuja tanto la imagen
       hacia abajo: la imagen empieza mas arriba y crece (sigue ligada al fondo via
       flex:1 en .nk-right). */
    #cms-s6-conmutador .nk-left { flex: none; min-height: 30%; justify-content: center; }
    #cms-s6-conmutador .nk-eyebrow { font-size: 2.3cqw; padding: 0.7cqw 2cqw; margin-bottom: 1.8cqw; }
    #cms-s6-conmutador .nk-h1 { font-size: 6.6cqw; margin-bottom: 1.8cqw; }
    #cms-s6-conmutador .nk-p { font-size: 2.5cqw; max-width: 100%; margin-bottom: 2.2cqw; }
    #cms-s6-conmutador .nk-btn { font-size: 2.3cqw; padding: 1.2cqw 2.3cqw; }
    #cms-s6-conmutador .nk-actions { margin-bottom: 2.2cqw; }
    #cms-s6-conmutador .nk-features { font-size: 2cqw; gap: 2.4cqw; }
    #cms-s6-conmutador .nk-features i { font-size: 2.3cqw; }
    #cms-s6-conmutador .nk-stats { gap: 4cqw; padding-top: 0.8cqw; }
    #cms-s6-conmutador .nk-stat-num { font-size: 3cqw; }
    #cms-s6-conmutador .nk-stat-label { font-size: 1.5cqw; }
    /* flex:1 (antes "none") -> el texto de .nk-left no llena su min-height, dejando
       hueco vacio debajo de la tarjeta; con flex:1 la imagen CRECE para ocupar el resto
       de la caja. OJO: el cardImg de Comercio ("_responsive.jpg") es HORIZONTAL
       (1280x720, 16:9) -> .nk-card debe mantener aspect-ratio horizontal (4/3), NUNCA
       height:100% (eso la estira vertical y el cover recorta una tira estrecha del
       centro de la foto, pareciendo una imagen en vertical). Se ensancha el ancho
       (antes 78%/260px) para que, a ese aspecto horizontal, la tarjeta siga siendo
       grande y aproveche el alto libre. */
    #cms-s6-conmutador .nk-right { flex: 1; width: 80%; max-width: 270px; height: auto; margin: 2.5cqw auto 0; min-height: 0; }
    #cms-s6-conmutador .nk-card { width: 100%; aspect-ratio: 4/3; height: auto; }
  }



      .s4c.cms-bento { background-color: var(--clr-bg-body); contain: layout paint; }
      .s4c-aurora {
        position:absolute; inset:-20%; z-index:0; pointer-events:none;
        filter:blur(60px); will-change:transform;
        background:
          radial-gradient(50% 50% at 20% 30%, rgba(6,182,212,.26), transparent 85%),
          radial-gradient(45% 45% at 80% 20%, rgba(139,92,246,.19), transparent 85%),
          radial-gradient(55% 55% at 60% 90%, rgba(16,185,129,.17), transparent 85%);
        animation:s4cAuroraDrift 18s ease-in-out infinite alternate;
      }
      @keyframes s4cAuroraDrift {
        from { transform:translate3d(-4%,-2%,0) scale(1); }
        to   { transform:translate3d(4%,3%,0) scale(1.08); }
      }
      .s4c .cms-bento__card {
        background: rgba(11,17,33,.15);
        border: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 15px 35px rgba(0,0,0,.3);
        position: relative;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        isolation: isolate;
        will-change: transform;
      }
      /* Borde-gradiente que capta la luz de la aurora */
      .s4c .cms-bento__card::before {
        content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
        background:linear-gradient(135deg,rgba(6,182,212,.55),transparent 40%,transparent 60%,rgba(139,92,246,.4));
        -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:0;
      }
      /* Hover: solo cambia la card, el canvas de fondo no se toca. Solo en dispositivos con hover real (no táctil, evita que quede "pegado" al tocar en móvil) */
      @media (hover: hover) and (pointer: fine) {
        html:not(.is-touch) .s4c .cms-bento__card:hover {
          transform: translateY(-8px);
          background: rgba(11,17,33,.28);
          box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(6,182,212,.15);
        }
        html:not(.is-touch) .s4c .cms-bento__card:hover::before {
          background:linear-gradient(135deg,rgba(6,182,212,.85),rgba(6,182,212,.2) 40%,rgba(139,92,246,.3) 60%,rgba(139,92,246,.75));
        }
      }
      .s4c .cms-bento__title      { color:var(--clr-text-main); position:relative; z-index:1; }
      .s4c .cms-bento__desc       { color:var(--clr-text-muted); position:relative; z-index:1; }
      /* ── Rejilla 3 tarjetas: override de spans base ── */
      @media (min-width: 992px) {
        .s4c .cms-bento__card--main       { grid-column: span 7; grid-row: span 4; }
        .s4c .cms-bento__card--seo        { grid-column: span 5; grid-row: span 2; align-items: center; }
        .s4c .cms-bento__card--responsive { grid-column: span 5; grid-row: span 2; align-items: center; }
      }

      /* ── Mockup central mejorado ── */
      .s4c .cms-bento__studio { position: relative; z-index: 1; }
      .s4c .cms-bento__studio-wand {
        width: 28px; height: 28px;
        background: radial-gradient(circle, rgba(59,130,246,1) 0%, rgba(59,130,246,0) 70%);
        box-shadow: 0 0 20px #3b82f6, 0 0 50px #3b82f6, 0 0 80px rgba(59,130,246,.35);
      }
      .s4c .cms-bento__studio-line { background: transparent; }
      .s4c .cms-bento__studio-btn  { background: var(--studio-accent); }
      .s4c .cms-bento__studio-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }

      /* ── SEO: escalada de posiciones (mini leaderboard de la búsqueda local) ── */
      #cms-s6-bento .cms-bento__card--seo {
        align-items: stretch;
        justify-content: flex-start;
        text-align: left;
      }
      #cms-s6-bento .s4c-seo-sublabel {
        text-align: left; margin-bottom: 0;
        font-family: inherit; font-size: .82rem; font-weight: 800;
        letter-spacing: .5px; text-transform: uppercase;
        background: linear-gradient(to right, #06b6d4 0%, #22d3ee 30%, #a5f3fc 50%, #22d3ee 70%, #06b6d4 100%);
        background-size: 200% auto;
        -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        animation: titleShine 6s linear infinite;
        filter: drop-shadow(0 0 10px rgba(6,182,212,.35));
      }
      #cms-s6-bento .s4c-seo-sublabel-row {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-bottom: .5rem; position: relative; z-index: 1;
      }
      #cms-s6-bento .s4c-seo-engines {
        display: flex; align-items: center; flex-shrink: 0;
      }
      #cms-s6-bento .s4c-seo-engine {
        width: 38px; height: 38px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: #fff;
        border: 2px solid #0b1121;
        box-shadow: 0 3px 10px rgba(0,0,0,.4);
        margin-left: -12px;
        padding: 8px;
      }
      #cms-s6-bento .s4c-seo-engine svg { width: 100%; height: 100%; display: block; }
      #cms-s6-bento .s4c-seo-engine:first-child { margin-left: 0; }
      #cms-s6-bento .s4c-seo-engine--bing    { z-index: 1; }
      #cms-s6-bento .s4c-seo-engine--chatgpt { z-index: 2; }
      #cms-s6-bento .s4c-seo-engine--google  { z-index: 3; }
      /* PC: agranda el contenido del sublabel+iconos; el hueco extra se descuenta del margen superior
         del leaderboard (era 14px) para que la card no crezca de alto. */
      @media (min-width: 992px) {
        #cms-s6-bento .s4c-seo-sublabel { font-size: 1rem; }
        #cms-s6-bento .s4c-seo-engine { width: 42px; height: 42px; padding: 9px; margin-left: -14px; }
        #cms-s6-bento .escalada-ranking__board { margin-top: 8px; }
      }
      @media (max-width: 400px) {
        #cms-s6-bento .s4c-seo-sublabel { font-size: .72rem; }
        #cms-s6-bento .s4c-seo-engine { width: 32px; height: 32px; margin-left: -10px; padding: 7px; }
      }

      .escalada-ranking__board {
        position: relative; z-index: 1;
        width: 100%; height: 224px;
        --row-h: 56px;
        margin: 14px 0 18px;
      }
      .escalada-ranking__row {
        position: absolute; left: 0; right: 0; top: 0;
        height: 52px;
        display: grid; grid-template-columns: 26px 28px minmax(0, 1fr) auto;
        align-items: center; gap: 10px; padding: 0 12px;
        border-radius: 12px;
        background: rgba(255,255,255,.04);
        border: 1px solid rgba(255,255,255,.07);
        transform: translateY(calc(var(--i) * var(--row-h)));
        transition: transform .7s cubic-bezier(.16,1,.3,1);
      }
      .escalada-ranking__row--you { background: rgba(6,182,212,.08); }
      /* Borde-gradiente, mismo truco de máscara que usan las cards */
      .escalada-ranking__row--you::before {
        content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
        background: linear-gradient(135deg,#06b6d4,#8b5cf6);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
      }
      .escalada-ranking__row--you.is-glow { animation: escaladaRankingPulse .8s ease-out; }
      @keyframes escaladaRankingPulse {
        0%   { box-shadow: 0 0 0 0 rgba(6,182,212,.45); }
        100% { box-shadow: 0 0 0 12px rgba(6,182,212,0); }
      }
      .escalada-ranking__pos {
        font-size: 1rem; font-weight: 800; text-align: center;
        font-variant-numeric: tabular-nums; color: var(--clr-text-muted);
      }
      .escalada-ranking__fav {
        width: 24px; height: 24px; border-radius: 8px;
        display: grid; place-items: center;
        font-size: .72rem; font-weight: 800;
        background: rgba(148,163,184,.18); color: var(--clr-text-main);
      }
      .escalada-ranking__row--you .escalada-ranking__fav { background: rgba(6,182,212,.2); color: #06b6d4; }
      .escalada-ranking__name {
        font-size: .85rem; font-weight: 600; color: var(--clr-text-main);
        display: flex; flex-direction: column; line-height: 1.25;
        min-width: 0;
      }
      .escalada-ranking__name,
      .escalada-ranking__dom { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
      .escalada-ranking__dom { font-size: .7rem; font-weight: 500; color: var(--clr-text-muted); }
      .escalada-ranking__up {
        color: #06b6d4; font-size: 1.1rem; line-height: 1;
        opacity: 0; transition: opacity .3s ease;
      }
      @media (max-width: 768px) {
        #cms-s6-bento .escalada-ranking__board { --row-h: 48px; height: 192px; }
        #cms-s6-bento .escalada-ranking__row   { height: 44px; }
      }
      @media (max-width: 400px) {
        #cms-s6-bento .escalada-ranking__dom { display: none; }
      }
      .s4c-seo-sublabel {
        font-family: monospace; font-size: .68rem; letter-spacing: 1px;
        text-transform: uppercase; color: rgba(6,182,212,.65);
        margin-top: 6px; position: relative; z-index: 1; text-align: center;
      }

      /* ── Seguridad animada ── */
      .s4c-shield-wrap {
        width: 72px; height: 72px; border-radius: 50%;
        background: rgba(16,185,129,.07); border: 2px solid rgba(16,185,129,.2);
        display: flex; align-items: center; justify-content: center;
        font-size: 2.2rem; color: #10b981;
        position: relative; z-index: 1; margin-bottom: 16px;
        transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
      }
      .s4c-shield-wrap::before,
      .s4c-shield-wrap::after {
        content: ''; position: absolute; inset: -2px; border-radius: 50%;
        border: 1.5px solid rgba(16,185,129,.35);
        animation: s4cShieldRipple 3s ease-in-out infinite;
        pointer-events: none;
      }
      .s4c-shield-wrap::after {
        animation-delay: .6s;
        border-color: rgba(16,185,129,.2);
      }
      @keyframes s4cShieldRipple {
        0%, 100% { transform: scale(1); opacity: .7; }
        65%       { transform: scale(1.6); opacity: 0; }
      }
      @media (hover: hover) and (pointer: fine) {
        html:not(.is-touch) .s4c .cms-bento__card--responsive:hover .s4c-shield-wrap {
          transform: scale(1.1);
          background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.55);
          box-shadow: 0 0 30px rgba(16,185,129,.3);
        }
      }
      .s4c-ssl-row {
        display: flex; align-items: center; gap: 8px;
        margin-top: auto; position: relative; z-index: 1;
      }
      .s4c-ssl-dot {
        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
        background: #10b981; box-shadow: 0 0 8px #10b981;
        animation: s4cDotPulse 1.8s ease-in-out infinite;
      }
      @keyframes s4cDotPulse {
        0%,100% { opacity:1; }
        50%      { opacity:.3; }
      }
      .s4c-ssl-text { font-size: .85rem; font-weight: 600; color: #10b981; }

      /* ── Micro-interacciones hover ── */
      @media (hover: hover) and (pointer: fine) {
        html:not(.is-touch) .s4c .cms-bento__card--main:hover .cms-bento__studio-wand {
          box-shadow: 0 0 30px #3b82f6, 0 0 70px #3b82f6, 0 0 120px rgba(59,130,246,.4);
        }
      }

      /* ── Reduced motion / mobile ── */
      @media (prefers-reduced-motion: reduce) {
        .s4c-aurora { animation: none; }
        .escalada-ranking__row { transition: none !important; }
        .escalada-ranking__row--you.is-glow { animation: none !important; }
        .s4c-shield-wrap::before, .s4c-shield-wrap::after { animation: none; }
        .s4c-ssl-dot { animation: none; }
      }
      @media (max-width: 768px) { .s4c-aurora { filter: blur(20px); } }
    
  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: none !important; }
  }



/* Solo reglas NUEVAS. Nada de CSS base desktop (se hereda por clase). */
@media (max-width: 900px) {
  /* 1) El frame deja de ser dispositivo de ancho fijo (580px) y pasa a fluido,
     PERO conservando la animación responsive adaptada a móvil (studioDeviceResizeMobile):
     escritorio 100% -> móvil ~200px centrado (cabe en 325px, sin recorte) -> vuelve. */
  #cms-s6-bento .cms-bento__studio-frame {
    width: 100%;
    max-width: 100%;
    animation: studioDeviceResizeMobile 12s infinite;
  }

  /* 2) Elimina el hueco muerto (min-height:480) y anula el scale(0.85) heredado de <=480.
     El alto queda CLAVADO al de la fase inicial (340px): el frame se centra dentro y,
     en la fase telefono (490px), studioDeviceResizeMobile lo escala a 340/490 = .694
     para que quepa. Asi su resize nunca empuja el alto de .cms-bento__card--main. */
  #cms-s6-bento .cms-bento__studio {
    min-height: 0;
    transform: none;
    flex: none;
    height: 340px;
  }

  #cms-s6-bento .cms-bento__studio-frame {
    flex: none;
    transform-origin: center center;
  }

  /* 3) Recupera ancho útil de las cards (~263px -> ~325px a 375px de viewport) */
  #cms-s6-bento .cms-bento__card {
    padding: 24px;
  }

  /* Escala tipográfica fluida de la card principal (aporte Compás Tipográfico).
     Tope = valor desktop actual -> cero deriva a >=900px, intacto a >=992px.
     !important obligatorio para batir el style inline (2.2rem / 1.15rem) del h3/p. */
  #cms-s6-bento .cms-bento__card--main .cms-bento__title {
    font-size: clamp(1.4rem, 5vw, 2.2rem) !important;
  }
  #cms-s6-bento .cms-bento__card--main .cms-bento__desc {
    font-size: clamp(1rem, 3.1vw, 1.15rem) !important;
    margin-bottom: clamp(20px, 4vw, 40px) !important;
    max-width: 100% !important;
  }

  /* ---- Capa transversal de rendimiento (obligatoria), scopeada a este id ---- */
  /* Aurora: retira la capa GPU entera (blur 60px + drift s4cAuroraDrift) en móvil */
  #cms-s6-bento .s4c-aurora { display: none; }

  /* Canvas neural: se oculta por CSS; el JS de abajo (Vigía de Batería) retira
     además el nodo del DOM para cortar de raíz el requestAnimationFrame de neural-bg.js */
  #cms-s6-bento .neural-canvas-bg { display: none; }

  /* Congelar decorativos del mockup: réplica exacta de los bloques
     prefers-reduced-motion ya presentes en el CSS original (líneas ~594-614 y ~1048-1052),
     así no hay doble animación y móvil+reduced-motion no entra en conflicto. */
  /* Animación responsive REACTIVADA en móvil: los reveals internos y el reflow
     del grid vuelven a correr (ya NO se congelan). Solo se oculta el wand por
     rendimiento; prefers-reduced-motion sigue ganando (su regla base usa !important). */
  #cms-s6-bento .cms-bento__studio-wand {
    display: none !important;
  }
  #cms-s6-bento .s4c-shield-wrap::before,
  #cms-s6-bento .s4c-shield-wrap::after {
    animation: none;
  }
  #cms-s6-bento .s4c-ssl-dot {
    animation: none;
  }
}

@media (max-width: 480px) {
  /* El contenido interno ya es fluido (líneas %, grid reflow) y refluye solo al 100%;
     aquí solo se le da algo más de aire al reducirse el frame. */
  #cms-s6-bento .cms-bento__studio-body {
    padding: 1rem;
    gap: 1rem;
  }

  /* Ajuste fino <=480 (capa transversal): recupera aún más ancho útil de la card
     y homogeneiza el título (!important imprescindible para vencer el style inline
     font-size:2.2rem del h3; en la card principal queda superado en especificidad
     por el clamp de arriba, que a este ancho ya converge en un valor equivalente). */
  #cms-s6-bento .cms-bento__card {
    padding: 20px;
  }
  #cms-s6-bento .cms-bento__title {
    font-size: 1.5rem !important;
  }
}

@keyframes studioDeviceResizeMobile {
  0%, 55%   { width: 100%;  height: 340px; border-radius: 12px; transform: scale(1); }
  68%, 85%  { width: 200px; height: 490px; border-radius: 24px; transform: scale(.694); }
  95%, 100% { width: 100%;  height: 340px; border-radius: 12px; transform: scale(1); }
}
    


      /* S6 Opcion D - Modo dual: Piloto automático (nosotros) + Volante (tú) */
      .cms-evolution-timeline {
        position: relative;
        padding: 100px 0;
        overflow: hidden;
      }

      .cms-dual {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--cms-bento-gap);
        max-width: 1100px;
        margin: 0 auto;
        align-items: stretch;
      }

      @media (min-width: 992px) {
        .cms-dual {
          grid-template-columns: 1.35fr 1fr;
        }
      }

      .cms-dual__panel {
        border-radius: var(--cms-bento-radius);
        padding: 48px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .cms-dual.is-visible .cms-dual__panel {
        opacity: 1;
        transform: translateY(0);
      }

      .cms-dual.is-visible .cms-dual__manual {
        transition-delay: 0.15s;
      }

      /* --- Panel principal: nosotros (peso visual) --- */
      .cms-dual__auto {
        background:
          radial-gradient(120% 120% at 0% 0%, rgba(6, 182, 212, 0.12), transparent 55%),
          rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(6, 182, 212, 0.25);
        box-shadow: 0 30px 60px -20px rgba(6, 182, 212, 0.35);
      }

      .cms-dual__switch {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        align-self: flex-start;
        background: rgba(6, 182, 212, 0.1);
        border: 1px solid rgba(6, 182, 212, 0.2);
        padding: 8px 16px 8px 10px;
        border-radius: 30px;
        margin-bottom: 28px;
      }

      .cms-dual__switch-track {
        width: 40px;
        height: 22px;
        border-radius: 11px;
        background: #06b6d4;
        position: relative;
        flex: none;
        box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15);
      }

      .cms-dual__switch-knob {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
      }

      .cms-dual__switch-label {
        font-size: 0.9rem;
        font-weight: 700;
        color: #0e7490;
        letter-spacing: 0.2px;
      }

      .cms-dual__title {
        font-family: var(--font-display);
        font-size: 1.9rem;
        font-weight: 800;
        color: #0f172a;
        line-height: 1.2;
        margin-bottom: 16px;
      }

      .cms-dual__text {
        font-size: 1.05rem;
        color: #64748b;
        line-height: 1.65;
        margin-bottom: 28px;
      }

      .cms-dual__feats {
        list-style: none;
        padding: 0;
        margin: 0 0 28px;
        display: grid;
        gap: 14px;
      }

      .cms-dual__feats li {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 1.02rem;
        font-weight: 600;
        color: #334155;
      }

      .cms-dual__feats i {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        background: rgba(6, 182, 212, 0.1);
        color: #06b6d4;
      }

      .cms-dual__live {
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.9rem;
        color: #64748b;
        padding-top: 20px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
      }

      .cms-dual__live-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #10b981;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
        animation: cmsDualPulse 2.4s infinite;
      }

      @keyframes cmsDualPulse {
        0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
        70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
        100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
      }

      /* --- Panel secundario: tú (editor fácil) --- */
      .cms-dual__manual {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
      }

      .cms-dual__eyebrow {
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: #94a3b8;
        margin-bottom: 12px;
      }

      .cms-dual__manual .cms-dual__title {
        font-size: 1.5rem;
      }

      .cms-dual__manual .cms-dual__text {
        margin-bottom: 24px;
      }

      /* Editor mock */
      .cms-editor {
        background: #0f172a;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.5);
        margin-bottom: 24px;
        position: relative;
      }

      .cms-editor__bar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 12px 16px;
        background: rgba(255, 255, 255, 0.04);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .cms-editor__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #334155;
      }

      .cms-editor__dot:nth-child(1) { background: #ef4444; }
      .cms-editor__dot:nth-child(2) { background: #eab308; }
      .cms-editor__dot:nth-child(3) { background: #22c55e; }

      .cms-editor__url {
        margin-left: 10px;
        font-size: 0.78rem;
        color: #64748b;
        font-family: monospace;
      }

      .cms-editor__canvas {
        padding: 28px 24px 32px;
        position: relative;
      }

      .cms-editor__card {
        background: #fff;
        border-radius: 12px;
        padding: 18px;
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .cms-editor__thumb {
        width: 52px;
        height: 52px;
        border-radius: 10px;
        flex: none;
        background: linear-gradient(135deg, #67e8f9, #06b6d4);
      }

      .cms-editor__info {
        flex: 1;
        min-width: 0;
      }

      .cms-editor__name {
        font-size: 0.95rem;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 6px;
      }

      .cms-editor__price {
        display: inline-flex;
        align-items: center;
        font-size: 1.05rem;
        font-weight: 800;
        color: #06b6d4;
        padding: 4px 8px;
        border-radius: 8px;
        position: relative;
        animation: cmsEditFocus 7s infinite;
      }

      .cms-editor__price-old {
        position: absolute;
        left: 8px;
        animation: cmsEditOld 7s infinite;
      }

      .cms-editor__price-new {
        opacity: 0;
        animation: cmsEditNew 7s infinite;
      }

      .cms-editor__caret {
        display: inline-block;
        width: 2px;
        height: 1.05rem;
        background: #06b6d4;
        margin-left: 2px;
        opacity: 0;
        animation: cmsEditCaret 7s infinite;
      }

      .cms-editor__toolbar {
        position: absolute;
        top: 8px;
        right: 18px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: #1e293b;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 6px 8px;
        opacity: 0;
        transform: translateY(6px);
        animation: cmsEditToolbar 7s infinite;
      }

      .cms-editor__toolbar i {
        color: #94a3b8;
        font-size: 0.95rem;
        padding: 2px;
      }

      .cms-editor__publish {
        background: #06b6d4;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 6px;
        margin-left: 4px;
      }

      .cms-editor__cursor {
        position: absolute;
        width: 22px;
        height: 22px;
        top: 0;
        left: 0;
        color: #fff;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
        animation: cmsEditCursor 7s infinite;
        z-index: 5;
        pointer-events: none;
      }

      .cms-editor__toast {
        position: absolute;
        bottom: 14px;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: #10b981;
        color: #fff;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 20px;
        opacity: 0;
        animation: cmsEditToast 7s infinite;
        white-space: nowrap;
      }

      @keyframes cmsEditCursor {
        0%   { top: 90%; left: 80%; opacity: 0; }
        8%   { opacity: 1; }
        22%  { top: 46%; left: 30%; opacity: 1; }
        50%  { top: 46%; left: 30%; opacity: 1; }
        62%  { top: 18%; left: 76%; opacity: 1; }
        72%  { top: 18%; left: 76%; opacity: 0; }
        100% { top: 90%; left: 80%; opacity: 0; }
      }

      @keyframes cmsEditFocus {
        0%, 20%   { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); background: transparent; }
        26%, 64%  { box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.5); background: rgba(6, 182, 212, 0.08); }
        72%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); background: transparent; }
      }

      @keyframes cmsEditCaret {
        0%, 24%  { opacity: 0; }
        26%, 48% { opacity: 1; }
        50%      { opacity: 0; }
        52%, 60% { opacity: 1; }
        62%, 100% { opacity: 0; }
      }

      @keyframes cmsEditOld {
        0%, 40%  { opacity: 1; }
        46%, 100% { opacity: 0; }
      }

      @keyframes cmsEditNew {
        0%, 44%  { opacity: 0; }
        50%, 100% { opacity: 1; }
      }

      @keyframes cmsEditToolbar {
        0%, 22%   { opacity: 0; transform: translateY(6px); }
        30%, 66%  { opacity: 1; transform: translateY(0); }
        74%, 100% { opacity: 0; transform: translateY(6px); }
      }

      @keyframes cmsEditToast {
        0%, 64%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
        70%, 86%  { opacity: 1; transform: translateX(-50%) translateY(0); }
        94%, 100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
      }

      .cms-dual__hint {
        font-size: 1rem;
        color: #475569;
        line-height: 1.6;
        margin: 0;
      }

      .cms-dual__hint strong {
        color: #0f172a;
      }

      @media (prefers-reduced-motion: reduce) {
        .cms-dual__panel { opacity: 1 !important; transform: none !important; }

        .cms-editor__cursor,
        .cms-editor__caret,
        .cms-editor__toast { display: none !important; }

        .cms-editor__price,
        .cms-editor__toolbar,
        .cms-editor__price-new { animation: none !important; opacity: 1 !important; transform: none !important; }

        .cms-editor__price-old { display: none !important; }
        .cms-dual__live-dot { animation: none !important; }
      }

      @media (max-width: 600px) {
        .cms-dual__panel {
          padding: 32px 24px;
        }
      }
    
  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: none !important; }
  }



  /* ===== CTA INTERMEDIO — foto a sangre + tarjeta glass a la DERECHA (patron CRM/TPV) ===== */
  .cms-cta-mid{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:clamp(560px,86vh,900px);padding:96px 0;background:linear-gradient(120deg,#06112e 0%,#0a2a8c 45%,#0066ff 80%,#00b8d4 120%);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}

  /* scrim suave para asentar la tarjeta sobre la pared */
  .cms-cta-mid__bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(6,17,46,0) 44%,rgba(6,17,46,.32) 100%)}

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

  .cms-cta-mid__head{display:flex;align-items:center;justify-content:center;margin:0 0 1rem}
  .cms-cta-mid__logo{height:38px;width:auto;display:block;margin:0;opacity:.95;filter:drop-shadow(0 2px 12px rgba(0,0,0,.4))}

  .cms-cta-mid__title{font-family:'Montserrat',sans-serif;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 1.9rem;max-width:18ch;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.4)}
  .cms-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:ctaGradFlow 9s linear infinite}

  .cms-cta-mid__actions{display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap}
  .cms-cta-mid__btn{padding:.95rem 2rem;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;transition:transform .28s cubic-bezier(.22,.61,.36,1),border-color .25s ease,background-color .25s ease}
  .cms-cta-mid__btn--ghost{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;color:#fff;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .cms-cta-mid__btn--ghost:hover{transform:translateY(-3px);border-color:#fff;background:rgba(255,255,255,.20);box-shadow:0 16px 34px rgba(0,0,0,.30)}
  .cms-cta-mid__btn-icon{width:18px;height:18px;flex:0 0 auto;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
  .cms-cta-mid__btn--ghost:hover .cms-cta-mid__btn-icon{transform:rotate(-12deg) scale(1.12)}

  /* boton primario compartido, con pulso */
  #cta-intermedio .btn-primary{background:linear-gradient(135deg,#06f,#00c6ff);box-shadow:0 8px 32px #0066ff73,0 0 0 1px #ffffff1f;padding:1.15rem 2.6rem;font-size:1.05rem;letter-spacing:.02em;border-radius:12px;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;animation:ctaBtnPulse 3s ease-in-out infinite}
  #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}
  #cta-intermedio .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px #0066ff8c,0 0 0 1px #ffffff2e}
  #cta-intermedio .btn-primary:hover:before{opacity:1}

  /* escritorio: tarjeta glass navy anclada a la DERECHA, sobre la pared vacia */
  @media (min-width:769px){
    #cta-intermedio.cms-cta-mid{aspect-ratio:1672 / 941;min-height:0;padding:0}
    #cta-intermedio .cms-cta-mid__inner{width:min(50%,510px);aspect-ratio:1/1;max-width:none;margin:0 clamp(48px,6vw,140px) 24px auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:clamp(34px,3vw,54px) clamp(28px,3vw,48px);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 24px 60px rgba(0,0,0,.4);overflow:hidden}
    #cta-intermedio .cms-cta-mid__title{max-width:20ch;margin:0 auto 1.9rem}
    #cta-intermedio .cms-cta-mid__actions{flex-direction:column;align-items:stretch;width:max-content;max-width:100%;margin:0 auto}
    #cta-intermedio .cms-cta-mid__btn--ghost{padding:calc(1.35rem - 1px) 2rem;font-size:1.15rem;letter-spacing:.03em;border-radius:12px}
    #cta-intermedio .btn-primary{padding:1.35rem 2.6rem;font-size:1.15rem;letter-spacing:.03em}
  }
  
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    #cta-intermedio .cms-cta-mid__inner{background:rgba(8,18,44,.9)}
  }
  @media (prefers-reduced-motion:reduce){
    .cms-cta-mid__grad{animation:none}
    #cta-intermedio .btn-primary{animation:none}
    .cms-cta-mid__btn{transition:border-color .2s ease,background-color .2s ease}
    .cms-cta-mid__btn--ghost:hover{transform:none}
    .cms-cta-mid__btn-icon,.cms-cta-mid__btn--ghost:hover .cms-cta-mid__btn-icon{transition:none;transform:none}
  }

  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: none !important; }
  }



          @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;
            }
          }
        
  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: 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;
      }
    }
  
  /* --- NEW MOCKUP CSS ENGINES --- */
  .s6b-conmutador__screen { container-type: size; background: #0f172a; }
  
  .old-mockup {
    width: 100%; height: 100%;
    background: repeating-linear-gradient(45deg, var(--om-bg1), var(--om-bg1) 10px, var(--om-bg2) 10px, var(--om-bg2) 20px);
    display: flex; justify-content: center; align-items: center;
    font-family: "Times New Roman", Times, serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
  }
  .old-mockup * { box-sizing: border-box; }
  .old-window {
    width: 100%; height: 100%; background: var(--om-win-bg, #e0ddd0);
    border: 0.3cqw solid #333; box-shadow: 1cqw 1cqw 0px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
  }
  .old-header {
    background: var(--om-hdr-bg); color: var(--om-hdr-fg); text-align: center;
    padding: 1.5cqw; border-bottom: 0.4cqw solid #000;
  }
  .old-header h1 { font-size: 3cqw; margin: 0; text-transform: uppercase; letter-spacing: 0.2cqw; text-shadow: 0.2cqw 0.2cqw 0 #000; }
  .old-header p { font-size: 1.2cqw; margin: 0.5cqw 0 0; }
  .old-marquee {
    background: #000; color: #0f0; font-family: monospace; font-size: 1.2cqw;
    padding: 0.5cqw; text-align: center; border-bottom: 0.2cqw solid #fff;
  }
  .old-body { display: flex; flex: 1; background: #f4f3ea; }
  .old-sidebar {
    width: 25%; background: #e0ddd0; border-right: 0.2cqw solid #999; padding: 1cqw;
  }
  .old-menu-title { text-align: center; font-size: 1cqw; margin-bottom: 1cqw; font-weight: bold; border-bottom: 0.1cqw solid #999; padding-bottom: 0.5cqw;}
  .old-menu-btn {
    background: linear-gradient(to bottom, #fff, #ccc); border: 0.1cqw solid #999;
    padding: 0.5cqw; margin-bottom: 0.5cqw; text-align: center; font-size: 1.1cqw; font-weight: bold; color: #333;
  }
  .old-visitors {
    background: #000; border: 0.2cqw solid #999; margin-top: 2cqw; padding: 0.5cqw; text-align: center;
  }
  .old-visitors-title { color: #fff; font-size: 0.9cqw; margin-bottom: 0.2cqw;}
  .old-visitors-count { color: #0f0; font-family: monospace; font-size: 1.8cqw; letter-spacing: 0.2cqw; }
  .old-main { flex: 1; padding: 2cqw; display: flex; flex-direction: column; align-items: center; }
  .old-title { color: var(--om-hdr-bg); text-decoration: underline; font-size: 2cqw; margin: 0 0 1cqw; text-align: center; font-weight: bold; }
  .old-text { font-size: 1.1cqw; line-height: 1.4; margin-bottom: 1cqw; text-align: center; }
  .old-alert { border: 0.2cqw dashed red; padding: 0.5cqw; text-align: center; color: red; font-weight: bold; font-size: 1.1cqw; margin-bottom: 1.5cqw; width: 100%; background: #fff;}
  .old-table { width: 100%; border-collapse: collapse; margin-bottom: 2cqw; }
  .old-table th { background: var(--om-hdr-bg); color: #fff; padding: 0.6cqw; text-align: left; font-size: 1cqw; border: 0.1cqw solid #999; }
  .old-table td { background: #fff; padding: 0.6cqw; font-size: 1cqw; border: 0.1cqw solid #999; color: #333;}
  .old-alert-top { background: #fff; color: red; font-weight: bold; text-align: center; padding: 0.5cqw; border-bottom: 0.2cqw solid #999; font-size: 1.2cqw; }

  .nk-mockup {
    width: 100%; height: 100%;
    background: var(--nk-bg); color: var(--nk-fg);
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    overflow: hidden; position: relative; font-size: 1.5cqw;
    display: flex; flex-direction: column;
  }
  .nk-mockup * { box-sizing: border-box; }
  .nk-nav { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 4cqw; z-index: 10; }
  .nk-logo { font-size: 1.5cqw; font-weight: 800; display: flex; align-items: center; gap: 0.8cqw; }
  .nk-logo-icon { color: var(--nk-primary); background: var(--nk-primary-light); padding: 0.6cqw; border-radius: 0.6cqw; display: flex; }
  .nk-links { display: flex; gap: 2cqw; font-size: 1.1cqw; font-weight: 600; opacity: 0.8; }
  .nk-nav-right { display: flex; align-items: center; gap: 1.5cqw; font-size: 1.1cqw; font-weight: 600; }
  .nk-btn {
    background: var(--nk-primary); color: var(--nk-btn-fg, #fff);
    padding: 0.8cqw 1.6cqw; border-radius: 0.5cqw;
    font-weight: 600; font-size: 1.1cqw; display: inline-flex; align-items: center; gap: 0.5cqw;
  }
  .nk-body { display: flex; flex: 1; padding: 0 4cqw 4cqw; gap: 4cqw; align-items: center; z-index: 5; }
  .nk-left { flex: 1.1; display: flex; flex-direction: column; align-items: flex-start; }
  .nk-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5cqw;
    padding: 0.4cqw 1cqw; border-radius: 2cqw; border: 0.1cqw solid var(--nk-primary-light);
    background: var(--nk-primary-light); color: var(--nk-primary);
    font-size: 0.85cqw; font-weight: 700; letter-spacing: 0.1cqw; margin-bottom: 1.5cqw; text-transform: uppercase;
  }
  .nk-h1 { font-size: 5cqw; font-weight: 800; line-height: 1.05; margin: 0 0 1.5cqw; letter-spacing: -0.1cqw; color: inherit; }
  .nk-h1 span { color: var(--nk-primary); }
  .nk-p { font-size: 1.4cqw; line-height: 1.5; opacity: 0.7; margin: 0 0 2.5cqw; max-width: 90%; }
  .nk-actions { display: flex; gap: 1cqw; margin-bottom: 2.5cqw; }
  .nk-features { display: flex; gap: 2cqw; font-size: 1cqw; font-weight: 600; opacity: 0.8; }
  .nk-features i { color: var(--nk-primary); font-size: 1.2cqw;}
  
  .nk-stats { display: flex; gap: 3cqw; border-top: 0.1cqw solid rgba(255,255,255,0.1); padding-top: 1.5cqw; width: 100%;}
  .nk-stat { display: flex; flex-direction: column; gap: 0.2cqw; }
  .nk-stat-num { font-size: 2cqw; font-weight: 800; }
  .nk-stat-label { font-size: 0.8cqw; font-weight: 600; opacity: 0.5; letter-spacing: 0.1cqw; }

  .nk-right { flex: 0.9; position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
  .nk-card {
    width: 85%; aspect-ratio: 4/5;
    background: repeating-linear-gradient(45deg, var(--nk-card-bg1), var(--nk-card-bg1) 2cqw, var(--nk-card-bg2) 2cqw, var(--nk-card-bg2) 4cqw);
    border-radius: 2cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,0.15);
    position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; transform: var(--nk-card-transform, none); border: var(--nk-card-border, none);
  }
  .nk-card-topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 1cqw; display: flex; gap: 0.5cqw; align-items: center; justify-content: center; border-bottom: 0.1cqw solid rgba(0,0,0,0.05); }
  .nk-card-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #cbd5e1; position: absolute;}
  .nk-card-url { font-size: 0.8cqw; font-weight: 500; opacity: 0.5; }
  .nk-card-icon { font-size: 4cqw; color: var(--nk-primary); margin-bottom: 1cqw; }
  .nk-card-title { font-size: 1.6cqw; font-weight: 700; margin: 0 0 0.5cqw; color: var(--nk-fg);}
  .nk-card-sub { font-size: 0.9cqw; opacity: 0.5; font-family: monospace; }
  .nk-badge-tr {
    position: absolute; top: 2cqw; right: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.8cqw 1.2cqw; border-radius: 1cqw; font-weight: 800; font-size: 1.6cqw; line-height: 1.2;
  }
  .nk-badge-tl {
    position: absolute; top: 2cqw; left: 2cqw; background: var(--nk-fg); color: var(--nk-bg);
    padding: 0.4cqw 1cqw; border-radius: 1cqw; font-size: 0.9cqw; font-weight: 700;
  }
  .nk-floating {
    position: absolute; background: var(--nk-bg); color: var(--nk-fg);
    padding: 1cqw 1.5cqw; border-radius: 1cqw; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,0.12);
    display: flex; align-items: center; gap: 1cqw;
  }
  .nk-floating--bl { bottom: -1cqw; left: -3cqw; }
  .nk-floating--br { bottom: -1cqw; right: -2cqw; padding: 1.5cqw 2cqw; }
  .nk-floating--tr { top: 6cqw; right: -3cqw; background: var(--nk-fg); color: var(--nk-bg); }
  
  .nk-floating-icon {
    background: var(--nk-primary-light); color: var(--nk-primary);
    width: 2.5cqw; height: 2.5cqw; border-radius: 0.5cqw; display: flex; justify-content: center; align-items: center; font-size: 1.2cqw;
  }
  .nk-floating-text { text-align: left; }
  .nk-floating-text strong { display: block; font-size: 1.1cqw; font-weight: 700; }
  .nk-floating-text span { font-size: 0.8cqw; opacity: 0.6; }
  
  /* Corner accents for ferreteria */
  .nk-corner { position: absolute; width: 2cqw; height: 2cqw; border: 0.2cqw solid var(--nk-primary); }
  .nk-corner-tr { top: 2cqw; right: 2cqw; border-left: none; border-bottom: none; }
  .nk-corner-bl { bottom: 2cqw; left: 2cqw; border-right: none; border-top: none; }
  .nk-corner-br { bottom: 2cqw; right: 2cqw; border-left: none; border-top: none; }

  .nk-footer {
    padding: 1cqw 4cqw; border-top: 0.1cqw solid rgba(128,128,128,0.2);
    display: flex; gap: 3cqw; align-items: center; justify-content: center; font-size: 1cqw; font-weight: 600; opacity: 0.6; background: rgba(255,255,255,0.3);
  }
  .nk-footer-dark { background: rgba(0,0,0,0.2); }
  
  @media (prefers-reduced-motion: reduce) {
    .nk-card { transform: none !important; }
  }

/* T08: icono SVG inline dentro del <i> (sustituye al glifo del webfont Tabler).
   display:block quita el hueco de descendente que un <svg> inline reserva por
   defecto (a diferencia de un glifo de texto), evitando que la altura de fila
   crezca en las decenas de sitios donde hay iconos + texto en flex/inline-flex. */
.ti-icon { display: block; }