/* ============================================================
   Portada de Kaiva Studio - hoja de estilo
   ------------------------------------------------------------
   Esto vivia dentro de un <style> en index.html: 109 KB que el
   navegador se volvia a descargar en cada visita, sin cachear y
   bloqueando el parseo del HTML. Aqui se descarga una vez y se
   reutiliza.

   Es una mudanza, no un rediseno: las reglas estan en el mismo
   orden que tenian dentro del HTML, asi que la cascada no cambia.
   Primero el bloque que estaba en el <head>; al final, el bloque
   suelto que estaba dentro de <section class="statement">, que en
   el documento venia despues.

   Lo unico que se quedo inline en index.html son las dos reglas
   @font-face de Inter e Inter Tight: son cuatro lineas, apuntan a
   las fuentes con ruta relativa a la pagina y estan emparejadas
   con los <link rel="preload"> de arriba. Traerlas aqui obligaria
   a reescribir esas rutas (esta hoja vive en /assets/, no en la
   raiz) con el riesgo de que el preload dejara de casar con la
   peticion real de la fuente, que es justo la que manda en el LCP
   del titular del hero.

   Esta hoja es SOLO de la portada. Las paginas internas usan
   assets/pagina.css, que es otro archivo y no se toca.
   ============================================================ */


    /* ================= TOKENS ================= */
    :root {
      --bg: #ffffff;
      --paper: #ffffff;
      --surface: #ffffff;
      --ink: #0f172a;
      --ink-soft: #475569;
      --ink-faint: #94a3b8;
      --line: rgba(15, 23, 42, 0.05);
      --line-strong: rgba(15, 23, 42, 0.12);
      --violet: #8242f5;
      --violet-ink: #6a2fe0;
      --violet-soft: rgba(130, 66, 245, 0.06);
      --violet-2: #a679ff;
      --green: #10b981;
      --green-soft: rgba(16, 185, 129, 0.08);
      --amber: #f59e0b;
      --red: #ef4444;
      --red-soft: rgba(239, 68, 68, 0.08);
      --dark: #0b0b0e;
      --dark-2: #141419;
      --dark-line: rgba(255, 255, 255, .09);
      --sans: 'Inter', system-ui, -apple-system, sans-serif;
      --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
      --maxw: 1380px;
      --pad: clamp(1.25rem, 4vw, 3.75rem);
      --r-lg: 24px;
      --r-md: 16px;
      --r-btn: 99px;
      --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
      --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
      --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.03);
      --shadow-md: 0 12px 36px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.02);
      --shadow-lg: 0 28px 64px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.03);
    }

    /* Transiciones nativas entre páginas (index <-> /monitor) del mismo origen */
    @view-transition {
      navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: .38s;
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .logo, .kv-brand-fixed {
      view-transition-name: kv-logo;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 88px;
      -webkit-text-size-adjust: 100%;
      /* Permite animar de 0 a `auto`, que es lo que necesita el acordeón de
         preguntas para desplegarse suave. */
      interpolate-size: allow-keywords;
    }

    body {
      background: #ffffff;
      font-family: var(--sans);
      color: var(--ink);
      font-size: 15px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    ::selection {
      background: var(--violet);
      color: #fff;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    /* Floating Animations */
    @keyframes floaty {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-8px) rotate(1.5deg);
      }
    }

    @keyframes floaty-reverse {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-6px) rotate(-1.2deg);
      }
    }

    @keyframes floaty-slow {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-10px) rotate(2deg);
      }
    }

    .float-robot {
      animation: floaty 6s ease-in-out infinite;
    }

    .float-robot-slow {
      animation: floaty-slow 9s ease-in-out infinite;
    }

    /* ================= TYPE ================= */
    .h1 {
      font-family: var(--display);
      font-size: clamp(2.4rem, 4.8vw, 3.6rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1.08;
      text-wrap: balance;
    }

    .h2 {
      font-family: var(--display);
      font-size: clamp(1.9rem, 3.8vw, 2.8rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      text-wrap: balance;
    }

    .h3 {
      font-family: var(--display);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.015em;
      line-height: 1.35;
    }

    .dot {
      color: var(--violet);
    }

    .lead {
      font-size: clamp(1.05rem, 1.3vw, 1.18rem);
      color: var(--ink-soft);
      line-height: 1.62;
    }

    /* ================= LAYOUT ================= */
    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding-inline: var(--pad);
    }

    .section {
      padding-block: clamp(5.5rem, 9vw, 10rem);
    }

    .sec-head {
      max-width: 86ch;
      margin-bottom: clamp(2.6rem, 5vw, 4rem);
    }

    .sec-head h2 {
      margin-bottom: 1.1rem;
    }

    .sec-head .desc {
      font-size: clamp(1rem, 1.25vw, 1.15rem);
      color: var(--ink-soft);
      line-height: 1.6;
    }

    /* ================= BOTONES ================= */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 14.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      padding: 0.8rem 1.6rem;
      border-radius: var(--r-btn);
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: all 0.3s var(--ease);
      white-space: nowrap;
    }

    .btn .arr {
      transition: transform 0.3s var(--ease);
    }

    .btn:hover .arr {
      transform: translateX(4px);
    }

    /* feedback táctil al presionar, como en apps nativas */
    .btn:active {
      transform: scale(.96);
      transition: transform .12s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* El CTA del nav. Se queda negro siempre: en hover solo levanta, nunca
       cambia de color ni se vuelve violeta. */
    .btn-dark {
      background: var(--ink);
      color: #fff;
      font-weight: 700;
    }

    .btn-dark:hover {
      background: var(--ink);
      transform: translateY(-2px);
      box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.45);
    }

    .btn-violet {
      background: var(--violet);
      color: #fff;
      box-shadow: 0 10px 24px -8px rgba(130, 66, 245, 0.35);
    }

    .btn-violet:hover {
      background: var(--violet-ink);
      transform: translateY(-2px);
      box-shadow: 0 14px 28px -8px rgba(130, 66, 245, 0.45);
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line-strong);
    }

    .btn-ghost:hover {
      border-color: var(--ink);
      background: rgba(15, 23, 42, 0.02);
      transform: translateY(-2px);
    }

    .btn-light {
      background: #fff;
      color: var(--ink);
      border: 1.5px solid rgba(15, 23, 42, 0.08);
      box-shadow: var(--shadow-sm);
    }

    .btn-light:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: rgba(15, 23, 42, 0.15);
    }

    /* ================= NAV ================= */
    .nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 200;
      transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
      border-bottom: 1px solid transparent;
    }

    .nav.scrolled {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(20px) saturate(1.5);
      -webkit-backdrop-filter: blur(20px) saturate(1.5);
      border-bottom-color: var(--line);
      box-shadow: var(--shadow-sm);
    }

    .nav-in {
      /* A ancho completo: el logo arranca cerca del borde izquierdo y el CTA
         termina cerca del derecho, en vez de quedar encajonados al centro. */
      max-width: none;
      margin: 0;
      padding: 0.85rem clamp(1.25rem, 3vw, 3.25rem);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
      position: relative;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      font-weight: 800;
      font-size: 19px;
      letter-spacing: -0.02em;
      font-family: var(--display);
      color: var(--ink);
    }

    .logo img {
      height: 44px;
      width: auto;
      max-height: 48px;
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }

    .logo .wm {
      display: inline-flex;
      align-items: baseline;
      white-space: nowrap;
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 2.2rem;
    }

    .nav-links {
      display: flex;
      gap: 2.2rem;
      align-items: center;
    }

    .nav-links .lnk {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-soft);
      transition: color 0.2s;
    }

    .nav-links .lnk:hover {
      color: var(--ink);
    }

    .nav-toggle {
      display: none;
      width: 40px;
      height: 40px;
      border: 1.5px solid var(--line-strong);
      background: var(--surface);
      border-radius: 12px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      color: var(--ink);
      transition: all 0.2s;
    }

    .nav-toggle:hover {
      background: #f8fafc;
    }

    .nav-toggle svg {
      width: 20px;
      height: 20px;
    }

    @media(max-width:880px) {
      .nav-toggle {
        display: inline-flex
      }

      .nav-right {
        gap: .8rem
      }

      .nav-links {
        position: absolute;
        top: calc(100% + 8px);
        right: var(--pad);
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: .8rem;
        min-width: 210px;
        box-shadow: 0 24px 50px -20px rgba(24, 20, 50, .25);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .25s, transform .25s
      }

      .nav-links.open {
        opacity: 1;
        transform: none;
        pointer-events: auto
      }

      .nav-links .lnk {
        padding: .6rem .7rem;
        border-radius: 10px
      }

      .nav-links .lnk:hover {
        background: var(--paper)
      }

      .nav-links .btn {
        justify-content: center;
        margin-top: .3rem
      }
    }

    /* ================= HERO ================= */
    .hero {
      /* Ocupa el alto de la pantalla para que la sección siguiente no asome.
         svh evita el salto por la barra del navegador en móvil. El padding
         superior deja sitio al nav fijo. */
      /* Ya no fuerzo 100svh: con la vitrina debajo de la copia, el alto lo
         marca el contenido. Antes el hero era media pantalla de texto y el
         100svh evitaba que asomara la sección siguiente; ahora sobra alto. */
      padding: clamp(7rem, 11vw, 9.5rem) 0 clamp(3rem, 5vw, 5rem);
      position: relative;
      background: #ffffff;
      /* La rejilla se sale por los lados si no se recorta: el hero ocupa el
         ancho completo y los resplandores nacen fuera del área visible. */
      overflow: hidden;
    }

    /* ---- fondo del hero: rejilla técnica y resplandor -------------------
       El hero era blanco liso y las capturas de los clientes flotaban en el
       vacío. Esta capa les pone suelo: una rejilla de papel milimetrado —que
       es el lenguaje visual de "aquí se construye"— y dos resplandores
       violeta entrando por los bordes para que el centro quede limpio y las
       tabletas sigan siendo lo más brillante de la pantalla.

       Va en un ::before y no en el background del .hero porque hace falta
       enmascararla: sin el desvanecido, la rejilla choca con el titular
       arriba y corta en seco abajo. Con la máscara nace y muere sola.

       Todo son gradientes CSS, ni una imagen: pesa cero, escala a cualquier
       pantalla sin pixelarse y no añade una petición al cargar la portada,
       que es la página que más importa que abra rápido. */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;

      background-image:
        /* resplandor izquierdo, a la altura de la vitrina */
        radial-gradient(42rem 32rem at -8% 58%, rgba(130, 66, 245, .13), transparent 68%),
        /* resplandor derecho, un poco más rosado y más alto para que los dos
           no se lean como simétricos */
        radial-gradient(38rem 30rem at 106% 44%, rgba(168, 85, 247, .12), transparent 66%),
        /* halo frío bajo las tabletas: las despega del fondo */
        radial-gradient(46rem 22rem at 50% 78%, rgba(99, 102, 241, .07), transparent 70%);
    }

    /* ---- el suelo en perspectiva ----------------------------------------
       La primera versión puso la rejilla plana, de frente, y quedaba como
       papel milimetrado pegado a la pared: no daba ninguna sensación de
       espacio. Lo que hace falta es que esté ACOSTADA — un plano que se
       aleja — para que las tabletas se lean apoyadas dentro de un lugar y
       no flotando sobre un patrón.

       Se consigue con perspectiva de verdad (rotateX sobre un plano), no
       dibujando líneas inclinadas a mano: así las verticales convergen
       solas hacia el punto de fuga y el espaciado se comprime con la
       distancia, que es lo que el ojo reconoce como profundidad.

       El elemento es mucho más ancho que el hero (300%) porque al inclinarse
       los bordes se abren: si midiera lo mismo, el suelo terminaría en dos
       diagonales visibles a los lados en vez de salirse de cuadro. */
    .hero::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -2%;
      width: 300%;
      /* Llega hasta poco debajo del titular. Las tabletas ocupan del 32% al
         70% del alto del hero, así que el suelo tiene que empezar POR ENCIMA
         de eso para quedar detrás de ellas y no como una franja a sus pies. */
      height: 84%;
      z-index: 0;
      pointer-events: none;

      /* Menos inclinación y más distancia de fuga que la primera versión: a
         74° y 38rem el plano se comprimía tan rápido que a la altura de las
         tabletas ya era casi una línea. Así se ve superficie detrás de ellas,
         que es de donde viene la sensación de profundidad. */
      transform: translateX(-50%) perspective(52rem) rotateX(68deg);
      /* El origen abajo hace que el punto de fuga quede arriba del plano,
         que es como se ve un suelo desde la altura de los ojos. */
      transform-origin: 50% 100%;

      background-image:
        repeating-linear-gradient(to right,
          rgba(130, 66, 245, .16) 0 1px, transparent 1px var(--rejilla, 54px)),
        repeating-linear-gradient(to bottom,
          rgba(130, 66, 245, .16) 0 1px, transparent 1px var(--rejilla, 54px));

      /* El desvanecido de arriba solo tapa la línea del horizonte, donde el
         plano se comprime y las rejillas se apelmazan. Antes llegaba al 26%
         y con eso borraba toda la zona que queda detrás de las tabletas —
         que es justo donde el suelo tiene que verse. Ahora entra en el
         primer 9%. */
      -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 5%, #000 9%, #000 100%),
        linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image:
        linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .5) 5%, #000 9%, #000 100%),
        linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
      mask-composite: intersect;
    }

    /* En pantallas chicas el suelo se aplana y se aprieta: con la
       inclinación de escritorio, en 375px de ancho solo se ven tres líneas
       gigantes y deja de leerse como espacio. */
    @media (max-width: 640px) {
      .hero::after {
        --rejilla: 34px;
        height: 52%;
        transform: translateX(-50%) perspective(26rem) rotateX(70deg);
      }
    }

    /* El suelo es atmósfera, no información: quien pide menos movimiento o
       navega con contraste alto no gana nada con él y sí puede molestarle. */
    @media (prefers-contrast: more) {
      .hero::after {
        display: none;
      }
    }

    /* La vitrina tiene que quedar POR ENCIMA de la capa decorativa. Sin esto
       las tabletas quedan enterradas bajo el resplandor. */
    .showcase {
      z-index: 1;
    }

    .hero-grid {
      width: 100%;
      position: relative;
      z-index: 1;
    }

    /* Columna única y centrada: la vitrina necesita todo el ancho debajo, así
       que la copia ya no compite por la mitad de la pantalla. */
    .hero-centered {
      max-width: 60rem;
      margin: 0 auto;
      text-align: center;
    }

    .hero-eyebrow {
      margin: 0 0 0.9rem;
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--violet);
    }

    .hero-title {
      /* El aire hasta la vitrina lo pone .showcase; aquí sobra. */
      margin-bottom: 0;
    }

    .hero-tail {
      margin-top: clamp(2rem, 4vw, 3rem);
    }

    .hero-sub {
      font-size: clamp(1rem, 1.25vw, 1.15rem);
      color: var(--ink-soft);
      line-height: 1.6;
      max-width: 56ch;
      margin: 0 auto 2.2rem;
    }

    .hero-ctas {
      display: flex;
      gap: 0.8rem;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }

    .hero-note {
      margin-top: 1.5rem;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .hero-note svg {
      color: var(--green);
      flex-shrink: 0;
    }

    /* animation text splits */
    .split .w {
      display: inline-block;
      opacity: 0;
      transform: translateY(0.35em);
      will-change: transform, opacity;
    }

    .split.lit .w {
      animation: wordUp 0.55s var(--ease-reveal) forwards;
      animation-delay: calc(var(--i) * 0.032s);
    }

    /* el punto final (.dot) no se separa en palabras, pero debe permanecer
       oculto hasta que el resto del titular termine de aparecer */
    .split .dot {
      display: inline-block;
      opacity: 0;
      transform: translateY(0.35em);
      will-change: transform, opacity;
    }

    .split.lit .dot {
      animation: wordUp 0.55s var(--ease-reveal) forwards;
      animation-delay: .4s;
    }

    @keyframes wordUp {
      to {
        opacity: 1;
        transform: none;
      }
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      filter: blur(5px);
      transition: opacity 0.75s var(--ease-reveal), transform 0.75s var(--ease-reveal), filter 0.6s var(--ease-reveal);
      transition-delay: var(--d, 0s);
      will-change: transform, opacity, filter;
    }

    .reveal.in {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }

    .hero-copy {
      min-width: 0;
    }

    /* ================= VITRINA DE TRABAJO =================
       Tres capturas de sitios en vivo, cada una dentro de un marco de tablet.
       Las reglas del diseño, por si alguien vuelve a tocarlo:
       · La captura NUNCA se recorta. Nada de aspect-ratio ni de object-fit
         sobre la imagen: el marco toma el alto que ella pida. Son páginas web
         completas y cortarlas es esconder el trabajo.
       · Nada de rotaciones. Las tres van derechas; la del centro es la grande
         y las de los lados quedan detrás, algo más pequeñas y tapadas en parte.
       · El reparto de posiciones lo hace el JS con .is-center/.is-left/
         .is-right y va rotando solo. El CSS solo describe cada posición.
       Vive fuera de .wrap y a todo el ancho: las tarjetas de los lados salen
       del ancho de maquetación. El clip (no hidden) impide el scroll
       horizontal sin encerrar las sombras verticales. */
    .showcase {
      /* Ancho de la tableta del centro. Todo lo demás se mide contra esto. */
      --pad-w: clamp(280px, 46vw, 680px);
      --bezel: clamp(9px, 1vw, 15px);
      /* Proporción de las capturas: las tres van a 1440×738. Si cambia, hay
         que cambiarla aquí también o el escenario reserva un alto que no es. */
      --sc-ar: 1.951;
      position: relative;
      margin-top: clamp(2rem, 4vw, 3.25rem);
      padding-inline: var(--pad);
      overflow-x: clip;
    }

    .sc-stage {
      list-style: none;
      position: relative;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0;
      /* Las tarjetas van absolutas, así que el alto hay que declararlo: el de
         la captura más el marco y el pie de foto. */
      height: calc(var(--pad-w) / var(--sc-ar) + var(--bezel) * 2 + 3.4rem);
    }

    .sc-item {
      --tx: 0px;
      --s: 1;
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--pad-w);
      transform: translate(calc(-50% + var(--tx)), -50%) scale(var(--s));
      transition: transform .8s var(--ease), opacity .55s var(--ease);
      will-change: transform, opacity;
    }

    .sc-item.is-center {
      z-index: 3;
    }

    .sc-item.is-left {
      --tx: calc(var(--pad-w) * -0.62);
      --s: .74;
      z-index: 2;
    }

    .sc-item.is-right {
      --tx: calc(var(--pad-w) * 0.62);
      --s: .74;
      z-index: 2;
    }

    /* Reserva por si algún día la baraja pasa de tres: lo que no cabe en las
       tres posiciones se guarda detrás del centro en vez de amontonarse. */
    .sc-item.is-hidden {
      --s: .6;
      opacity: 0;
      z-index: 1;
      pointer-events: none;
    }

    /* El marco. El bisel es padding, no un borde: así el hueco de la pantalla
       se adapta solo a lo que mida la captura. */
    .pad {
      display: block;
      position: relative;
      padding: var(--bezel);
      border-radius: calc(var(--bezel) * 2.2);
      background: linear-gradient(158deg, #343943 0%, #171a21 46%, #262a33 100%);
      box-shadow:
        0 0 0 1px rgba(9, 13, 22, .5),
        0 1px 0 rgba(255, 255, 255, .16) inset,
        0 38px 70px -30px rgba(9, 13, 22, .5),
        0 10px 24px -14px rgba(9, 13, 22, .3);
      text-decoration: none;
      color: inherit;
      transition: transform .45s var(--ease), box-shadow .45s var(--ease);
    }

    .pad-screen {
      display: block;
      border-radius: calc(var(--bezel) * 1.1);
      overflow: hidden;
      background: #fff;
    }

    /* Sin recorte: ancho al 100 % y alto libre. */
    .pad-screen img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* La camarita, centrada en el bisel de arriba. Puro detalle. */
    .pad-cam {
      position: absolute;
      top: calc(var(--bezel) / 2);
      left: 50%;
      transform: translate(-50%, -50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #0a0c11;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .09);
    }

    /* El pie va fuera de la tableta, no encima de la captura: tapar la web con
       una etiqueta es justo lo contrario de enseñarla. Solo se lee el de la
       tarjeta del centro; los de los lados sobran y ensucian. */
    .sc-caption {
      margin: .95rem 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .5rem;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
      opacity: 0;
      transition: opacity .45s var(--ease);
    }

    .sc-item.is-center .sc-caption {
      opacity: 1;
    }

    .sc-caption span {
      font-weight: 500;
      color: var(--ink-soft);
    }

    .sc-caption span::before {
      content: '·';
      margin-right: .5rem;
    }

    .sc-item.is-center .pad:hover {
      transform: translateY(-8px);
      box-shadow:
        0 0 0 1px rgba(9, 13, 22, .5),
        0 1px 0 rgba(255, 255, 255, .16) inset,
        0 48px 80px -30px rgba(9, 13, 22, .55),
        0 12px 28px -14px rgba(9, 13, 22, .32);
    }

    /* Las de los lados no se abren de un clic: el JS las trae al centro. El
       cursor lo tiene que anunciar. */
    .sc-item:not(.is-center) .pad {
      cursor: pointer;
    }

    /* Botoncitos para saltar a una tarjeta sin esperar el turno. */
    .sc-dots {
      display: flex;
      justify-content: center;
      gap: .45rem;
      margin-top: clamp(1rem, 2vw, 1.5rem);
    }

    .sc-dot {
      width: 7px;
      height: 7px;
      padding: 0;
      border: 0;
      border-radius: 99px;
      background: rgba(15, 23, 42, .18);
      cursor: pointer;
      transition: background .3s var(--ease), width .3s var(--ease);
    }

    .sc-dot.on {
      width: 22px;
      background: var(--violet);
    }

    .tl.r {
      background: #ff5f57;
    }

    .tl.y {
      background: #febc2e;
    }

    .tl.g {
      background: #28c840;
    }

    /* ================= CARDS ================= */
    .cards-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.2rem;
    }

    .card {
      background: var(--surface);
      border: 1px solid rgba(15, 23, 42, 0.04);
      border-radius: var(--r-md);
      padding: 2.1rem 1.8rem;
      transition: all 0.3s var(--ease);
      box-shadow: var(--shadow-sm);
    }

    .card:hover {
      transform: translateY(-6px);
      border-color: rgba(15, 23, 42, 0.08);
      box-shadow: var(--shadow-lg);
    }

    .card-ic {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--violet-soft);
      color: var(--violet);
      display: grid;
      place-items: center;
      margin-bottom: 1.4rem;
    }

    .card h3 {
      margin-bottom: 0.6rem;
      font-family: var(--display);
      font-weight: 700;
    }

    .card p {
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.55;
    }

    /* ================= SERVICIOS (tarjetas ricas 2x2) ================= */
    .svc-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.4rem;
    }

    .svc-card {
      display: grid;
      grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
      gap: 1.6rem;
      align-items: center;
      background: var(--surface);
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: var(--r-lg);
      padding: 2rem;
      box-shadow: var(--shadow-sm);
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
    }

    .svc-card:hover {
      transform: translateY(-4px);
      border-color: rgba(15, 23, 42, 0.1);
      box-shadow: var(--shadow-md);
    }

    /* --- Modo acordeón: la tarjeta activa crece, las demás se reducen ---
       Técnica: el contenido expandido vive en una capa de ANCHO FIJO,
       superpuesta (position:absolute) y recortada por overflow:hidden.
       Así el texto nunca se re-acomoda (reflow) mientras la tarjeta cambia
       de tamaño — solo se revela más o menos de una capa que ya está
       totalmente maquetada. Eso es lo que hace que se sienta fluido. */
    .svc-grid.acc {
      display: flex;
      align-items: stretch;
      gap: 1.2rem;
    }

    .svc-grid.acc .svc-card {
      position: relative;
      overflow: hidden;
      flex: 1 1 0%;
      height: 420px;
      cursor: pointer;
      padding: 0;
      display: block;
      transition: flex-grow .55s var(--ease-reveal), border-color .25s ease, background .25s ease;
      /* Aísla el repintado a la tarjeta: el navegador no tiene que revisar el
         resto de la página en cada fotograma del cambio de tamaño. */
      contain: paint;
    }

    .svc-grid.acc .svc-card:hover {
      transform: none;
    }

    .svc-grid.acc .svc-card.active {
      flex-grow: 6;
      cursor: default;
    }

    .svc-grid.acc .svc-card:not(.active) {
      flex-grow: 1;
    }

    .svc-grid.acc .svc-card:not(.active):hover {
      border-color: rgba(130, 66, 245, .28);
      background: var(--violet-soft);
    }

    /* capa colapsada: ícono + título centrados, siempre montada */
    .svc-grid.acc .svc-collapsed {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: .5rem;
      padding: 1.5rem 1rem;
      opacity: 1;
      /* Sale rápido para dejarle el sitio al panel; entra con calma al volver
         a cerrarse, que es cuando se nota. */
      transition: opacity .18s ease;
    }

    .svc-grid.acc .svc-collapsed h3 {
      font-size: .92rem;
      margin: 0;
    }

    .svc-grid.acc .svc-card.active .svc-collapsed {
      opacity: 0;
      pointer-events: none;
    }

    /* capa expandida: ancho fijo (el del estado activo), nunca cambia */
    .svc-grid.acc .svc-expanded {
      position: absolute;
      top: 0;
      left: 0;
      width: var(--svc-expanded-w, 760px);
      height: 100%;
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
      align-items: center;
      gap: 1.6rem;
      padding: 2rem;
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
    }

    .svc-grid.acc .svc-card.active .svc-expanded {
      opacity: 1;
      /* Antes esperaba .22s con el panel ya casi abierto: quedaba un hueco en
         blanco a mitad de camino. Ahora entra mientras la tarjeta crece. */
      transition: opacity .3s ease .1s;
      pointer-events: auto;
    }

    @media (max-width: 1080px) {
      .svc-grid.acc {
        flex-direction: column;
      }

      .svc-grid.acc .svc-card {
        height: auto;
        max-height: 84px;
        transition: max-height .5s var(--ease-reveal);
      }

      /* El JS escribe el alto real como estilo en línea y pisa este valor.
         El 1400px queda solo de respaldo por si el script no corriera. */
      .svc-grid.acc .svc-card.active {
        flex-grow: 0;
        max-height: 1400px;
      }

      .svc-grid.acc .svc-collapsed {
        position: static;
        flex-direction: row;
        justify-content: flex-start;
        gap: .8rem;
        height: 84px;
      }

      .svc-grid.acc .svc-card.active .svc-collapsed {
        display: none;
      }

      /* Siempre montado y recortado por el max-height de la tarjeta. Antes
         alternaba display, que no se puede animar: el contenido aparecía de
         golpe. Así entra con un fundido acompañando la apertura. */
      .svc-grid.acc .svc-expanded {
        position: static;
        width: auto;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        padding: 1.5rem;
        opacity: 0;
        transition: opacity .25s ease;
        pointer-events: none;
      }

      .svc-grid.acc .svc-card.active .svc-expanded {
        opacity: 1;
        transition: opacity .38s ease .1s;
        pointer-events: auto;
      }

      .svc-grid.acc .svc-card.active .svc-vis {
        order: -1;
        aspect-ratio: 16 / 10;
      }
    }

    .svc-body {
      min-width: 0;
    }

    .svc-ic {
      width: 40px;
      height: 40px;
      border-radius: 11px;
      background: var(--violet-soft);
      color: var(--violet);
      display: grid;
      place-items: center;
      margin-bottom: 1.1rem;
    }

    .svc-card h3 {
      font-family: var(--display);
      font-weight: 700;
      font-size: 1.12rem;
      letter-spacing: -.01em;
      margin-bottom: .55rem;
      color: var(--ink);
    }

    .svc-card > .svc-body > p {
      font-size: 13.5px;
      line-height: 1.6;
      color: var(--ink-soft);
      margin-bottom: 1.1rem;
    }

    .svc-list {
      list-style: none;
      margin: 0 0 1.4rem;
      padding: 0;
      display: grid;
      gap: .5rem;
    }

    .svc-list li {
      display: flex;
      align-items: flex-start;
      gap: .55rem;
      font-size: 13px;
      line-height: 1.45;
      color: var(--ink);
    }

    .svc-list svg {
      flex: none;
      margin-top: 1px;
      color: var(--violet);
    }

    .svc-btn {
      display: inline-flex;
      align-items: center;
      padding: .6rem 1.2rem;
      border-radius: 99px;
      background: var(--violet-soft);
      color: var(--violet);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
      border: 1px solid rgba(130, 66, 245, .16);
      transition: background .25s var(--ease), color .25s var(--ease);
    }

    .svc-btn:hover {
      background: var(--violet);
      color: #fff;
    }

    .svc-btn:active {
      transform: scale(.95);
      transition: transform .12s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* --- Lienzo del mockup --- */
    .svc-vis {
      position: relative;
      min-width: 0;
      aspect-ratio: 4 / 3;
      border-radius: var(--r-md);
      background: linear-gradient(160deg, #f7f6fb, #eef0f7);
      overflow: hidden;
      display: grid;
      place-items: center;
      padding: 1rem;
      font-size: 10px;
    }

    .svc-vis * {
      box-sizing: border-box;
    }

    /* Mockup 1: una página web completa.
       Antes el navegador tenía alto automático y quedaba una tira estrecha con
       mucho aire arriba y abajo; ahora llena la caja como el mockup de
       visibilidad en IA. */
    .mk-browser {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 9px;
      background: #fff;
      box-shadow: 0 10px 26px rgba(15, 23, 42, .13);
      overflow: hidden;
    }

    /* barra de navegación del sitio */
    .mk-topnav {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 10px;
      border-bottom: 1px solid rgba(15, 23, 42, .05);
    }

    .mk-topnav b {
      font-family: var(--display);
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-right: auto;
    }

    .mk-topnav i {
      display: block;
      width: 13px;
      height: 3px;
      border-radius: 2px;
      background: #e3e6ee;
    }

    .mk-topnav u {
      display: block;
      width: 22px;
      height: 8px;
      border-radius: 99px;
      background: var(--violet);
      margin-left: 3px;
    }

    /* franja de tarjetas de abajo, para que se lea como página con secciones */
    .mk-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
      padding: 0 12px 12px;
      background: #fafbfd;
    }

    .mk-cards div {
      background: #fff;
      border: 1px solid rgba(15, 23, 42, .06);
      border-radius: 5px;
      padding: 5px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .mk-cards span {
      display: block;
      height: 3px;
      border-radius: 2px;
      background: #e6e9f2;
    }

    .mk-cards span:first-child {
      width: 60%;
      background: rgba(130, 66, 245, .32);
    }

    .mk-cards span:last-child {
      width: 80%;
    }

    .mk-bar {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 8px;
      background: #fff;
      border-bottom: 1px solid rgba(15, 23, 42, .07);
    }

    .mk-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #d8dbe3;
    }

    .mk-nav {
      margin-left: auto;
      display: flex;
      gap: 6px;
    }

    .mk-nav i {
      display: block;
      width: 16px;
      height: 3px;
      border-radius: 2px;
      background: #e3e6ee;
    }

    /* Claro, no negro: era el único mockup oscuro de las cuatro tarjetas y
       rompía con el resto. */
    .mk-hero {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #fff;
      padding: 16px 12px 14px;
      color: var(--ink);
    }

    /* Plano y en gris, como los rellenos de las otras tres tarjetas. Tenía un
       degradado violeta con dos círculos y desentonaba: las demás son paneles
       blancos, líneas finas y un solo acento sólido. */
    .mk-hero-img {
      flex: 1;
      min-height: 30px;
      margin-top: 11px;
      border-radius: 6px;
      background: #eef1f5;
    }

    .mk-hero b {
      display: block;
      font-family: var(--display);
      font-size: 12px;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: -.02em;
    }

    .mk-hero b em {
      font-style: normal;
      color: var(--violet);
    }

    /* Con clase y no `\.mk-hero span`: ese selector se comía al botón y al
       bloque de imagen, que también son spans, y los dejaba en barritas
       grises de 3px. */
    .mk-hero .ln {
      display: block;
      margin-top: 6px;
      width: 78%;
      height: 3px;
      border-radius: 2px;
      background: rgba(15, 23, 42, .12);
    }

    .mk-hero .ln + .ln {
      width: 58%;
      margin-top: 4px;
    }

    /* align-self porque es hijo de un flex en columna: sin eso el botón se
       estiraba a todo el ancho de la caja. */
    .mk-cta {
      align-self: flex-start;
      margin-top: 10px;
      padding: 5px 11px;
      border-radius: 99px;
      background: var(--violet);
      color: #fff;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .01em;
    }

    /* Ahora sí con forma de teléfono: proporción alta, esquinas muy
       redondeadas, marco oscuro y muesca arriba. Antes era un rectángulo más
       ancho que alto y no se leía como un celular. */
    .mk-phone {
      position: absolute;
      right: 6%;
      bottom: 5%;
      width: 21%;
      aspect-ratio: 9 / 17.5;
      border-radius: 13px;
      background: #0f172a;
      border: 0;
      padding: 3px;
      box-shadow: 0 14px 30px rgba(15, 23, 42, .28);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* la muesca */
    .mk-phone::before {
      content: '';
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 34%;
      height: 4px;
      border-radius: 99px;
      background: #0f172a;
      z-index: 2;
    }

    .mk-phone-top {
      background: #fff;
      padding: 7px 6px 4px;
      border-radius: 10px 10px 0 0;
      font-size: 5.5px;
      font-weight: 800;
      color: var(--ink-faint);
      text-align: center;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .mk-phone-body {
      flex: 1;
      padding: 6px 6px 8px;
      background: #fbfaff;
      border-radius: 0 0 10px 10px;
      color: var(--ink);
      display: flex;
      flex-direction: column;
    }

    .mk-phone-body b {
      display: block;
      font-family: var(--display);
      font-size: 7.5px;
      line-height: 1.2;
      letter-spacing: -.02em;
    }

    .mk-phone-body i {
      display: block;
      flex: 1;
      margin-top: 5px;
      min-height: 14px;
      border-radius: 5px;
      background: #eef1f5;
    }

    /* Mockup 2: branding */
    .mk-brand {
      display: grid;
      grid-template-columns: 1.55fr 1fr;
      grid-template-rows: 1.15fr 1fr;
      gap: 7px;
      width: 100%;
      height: 100%;
    }

    .mk-tile {
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .09);
      overflow: hidden;
      display: grid;
      place-items: center;
      padding: 6px;
    }

    .mk-logo {
      background: #17251d;
      color: #fff;
      letter-spacing: .22em;
      font-weight: 700;
      font-size: 9px;
      gap: 6px;
      grid-auto-flow: row;
    }

    .mk-logo svg {
      opacity: .95;
    }

    .mk-swatches {
      display: grid;
      grid-template-rows: repeat(4, 1fr);
      gap: 4px;
      padding: 5px;
      background: transparent;
      box-shadow: none;
      /* .mk-tile centra su contenido, y con eso los chips vacíos se quedaban
         en 0x0 y no se veía la paleta. */
      place-items: stretch;
    }

    .mk-swatches i {
      display: block;
      border-radius: 5px;
      box-shadow: 0 3px 9px rgba(15, 23, 42, .08);
    }

    .mk-type {
      display: block;
      padding: 7px 8px;
      text-align: left;
    }

    .mk-type b {
      display: block;
      font-family: var(--display);
      font-size: 17px;
      line-height: 1;
      color: var(--ink);
    }

    .mk-type u {
      display: block;
      text-decoration: none;
      font-size: 7px;
      font-weight: 700;
      color: var(--ink);
      margin-top: 3px;
    }

    .mk-type s {
      display: block;
      text-decoration: none;
      font-size: 5.5px;
      color: var(--ink-faint, #94a3b8);
      margin-top: 2px;
      letter-spacing: .04em;
    }

    /* ---- identidad de Thallo ---- */
    .mk-thallo .mk-logo {
      background: #3f4d26;
      color: #fff;
    }

    .mk-thallo .mk-type b {
      color: #2b3418;
    }

    .mk-thallo .mk-type u {
      color: #3f4d26;
    }

    /* La tarjeta de visita: blanco con el patrón de flores en gris casi blanco,
       que es el fondo real de Thallo. Nada de crema — su paleta es blanco,
       verde y un gris muy claro. */
    .mk-card-marca {
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'%3E%3Cg fill='%23eeeeee'%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z'/%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z' transform='rotate(72 10.5 10.5)'/%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z' transform='rotate(144 10.5 10.5)'/%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z' transform='rotate(216 10.5 10.5)'/%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z' transform='rotate(288 10.5 10.5)'/%3E%3Cg transform='translate(21 21)'%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z'/%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z' transform='rotate(72 10.5 10.5)'/%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z' transform='rotate(144 10.5 10.5)'/%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z' transform='rotate(216 10.5 10.5)'/%3E%3Cpath d='M10.5 1.9c1.6 0 2.7 1.2 2.7 2.8 0 1.5-.8 2.8-2.7 4.7-1.9-1.9-2.7-3.2-2.7-4.7 0-1.6 1.1-2.8 2.7-2.8z' transform='rotate(288 10.5 10.5)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
        #fff;
      color: #3f4d26;
      gap: 4px;
      grid-auto-flow: row;
    }

    .mk-card-marca span {
      font-size: 6px;
      letter-spacing: .16em;
      font-weight: 700;
      text-transform: uppercase;
      color: #2b3418;
    }

    /* La paleta pierde el crema y gana el gris casi blanco de la marca. */
    .mk-thallo .mk-swatches i:nth-child(3) {
      background: #c9cec2 !important;
    }

    /* Blanco puro, no roto: es el cuarto color de la marca. Lleva borde
       porque sobre la tarjeta blanca si no, no se ve. */
    .mk-thallo .mk-swatches i:nth-child(4) {
      background: #ffffff !important;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, .09), 0 3px 9px rgba(15, 23, 42, .06);
    }

    /* Mockup 3: dashboard */
    .mk-dash {
      display: grid;
      grid-template-columns: 26% 1fr;
      width: 100%;
      height: 100%;
      border-radius: 9px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 26px rgba(15, 23, 42, .13);
    }

    .mk-side {
      background: #12121a;
      padding: 8px 7px;
      display: grid;
      align-content: start;
      gap: 5px;
    }

    .mk-side b {
      font-size: 6.5px;
      color: #fff;
      font-weight: 800;
      margin-bottom: 3px;
    }

    .mk-side i {
      display: block;
      height: 4px;
      border-radius: 2px;
      background: rgba(255, 255, 255, .16);
    }

    .mk-side i.on {
      background: var(--violet);
    }

    /* ---- panel de CS Travel Group ---- */
    .mk-cst .mk-side {
      background: #1b2150;
    }

    .mk-cst .mk-side b {
      display: flex;
      align-items: center;
      gap: 4px;
      letter-spacing: .06em;
      color: #cddaf2;
    }

    .mk-cst .mk-side b svg {
      flex-shrink: 0;
      color: #7ba0d9;
    }

    .mk-cst .mk-side i.on {
      background: #7ba0d9;
    }

    .mk-cst .mk-kpi s {
      color: #2f5aa8;
    }

    .mk-main {
      padding: 8px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 6px;
      min-height: 0;
    }

    .mk-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }

    .mk-kpi {
      border: 1px solid rgba(15, 23, 42, .07);
      border-radius: 5px;
      padding: 4px 5px;
    }

    .mk-kpi u {
      display: block;
      text-decoration: none;
      font-size: 5px;
      color: var(--ink-faint, #94a3b8);
    }

    .mk-kpi b {
      display: block;
      font-size: 8px;
      color: var(--ink);
      font-weight: 800;
      margin-top: 1px;
    }

    .mk-kpi s {
      display: block;
      text-decoration: none;
      font-size: 5px;
      color: #10b981;
      font-weight: 700;
    }

    .mk-chart {
      border: 1px solid rgba(15, 23, 42, .07);
      border-radius: 5px;
      padding: 5px;
      min-height: 0;
      display: grid;
    }

    .mk-chart svg {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 34px;
    }

    /* ---- gráfica de barras (panel de CS Travel) ---- */
    .mk-chart-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 5px;
    }

    .mk-chart-top u {
      text-decoration: none;
      font-size: 6px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    .mk-chart-top s {
      text-decoration: none;
      font-size: 6px;
      font-weight: 700;
      color: #3f63b5;
    }

    .mk-bars {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      min-height: 0;
    }

    .mk-bars i {
      flex: 1;
      height: var(--h, 40%);
      min-height: 2px;
      border-radius: 2px 2px 1px 1px;
      background: #d7e0f2;
    }

    .mk-bars i.on {
      background: #3f63b5;
    }

    .mk-cst .mk-chart {
      grid-template-rows: auto 1fr;
    }

    /* Mockup 4: IA & SEO */
    .mk-ai {
      display: grid;
      gap: 7px;
      width: 100%;
      height: 100%;
      grid-template-rows: 1.25fr 1fr;
    }

    .mk-panel {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 6px 16px rgba(15, 23, 42, .09);
      padding: 8px 9px;
      display: grid;
      align-content: start;
      gap: 4px;
    }

    .mk-panel > u {
      display: block;
      text-decoration: none;
      font-size: 6px;
      color: var(--ink-faint, #94a3b8);
      font-weight: 600;
    }

    .mk-gpt {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .mk-gpt-av {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #10a37f;
      flex: none;
      display: grid;
      place-items: center;
      color: #fff;
    }

    .mk-gpt b {
      display: block;
      font-size: 7.5px;
      color: var(--ink);
      font-weight: 800;
    }

    .mk-gpt s {
      display: block;
      text-decoration: none;
      font-size: 5.5px;
      line-height: 1.35;
      color: var(--ink-soft);
      margin-top: 1px;
    }

    .mk-pill {
      justify-self: start;
      padding: 2px 6px;
      border-radius: 99px;
      background: rgba(16, 185, 129, .12);
      color: #0f9d76;
      font-size: 5.5px;
      font-weight: 800;
    }

    .mk-ai-row {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 7px;
      min-height: 0;
    }

    .mk-spark svg {
      display: block;
      width: 100%;
      height: 22px;
    }

    .mk-big {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .mk-big b {
      font-size: 13px;
      font-weight: 800;
      color: var(--ink);
      font-family: var(--display);
    }

    .mk-big s {
      text-decoration: none;
      font-size: 5.5px;
      font-weight: 800;
      color: #10b981;
    }

    .mk-ring {
      place-items: center;
      justify-items: center;
      text-align: center;
    }

    .mk-ring svg {
      width: 34px;
      height: 34px;
      transform: rotate(-90deg);
    }

    .mk-ring-lbl {
      font-size: 5.5px;
      color: var(--ink-faint, #94a3b8);
      margin-top: 2px;
    }

    @media (max-width: 1080px) {
      .svc-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .svc-card {
        grid-template-columns: 1fr;
        padding: 1.5rem;
        gap: 1.3rem;
      }

      .svc-vis {
        order: -1;
        aspect-ratio: 16 / 10;
      }
    }

    /* ================= STATEMENT / INTERACTIVE TAGS ================= */
    .statement {
      position: relative;
      padding-block: clamp(5.5rem, 9vw, 10rem);
      overflow: hidden;
      background: #ffffff;
      border-block: 1px solid var(--line);
    }

    /* Curvy SVG connector lines in background */
    .statement-svg-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .statement-svg-bg path {
      stroke: rgba(130, 66, 245, 0.1);
      stroke-dasharray: 4, 4;
      fill: none;
      stroke-width: 1.5;
    }

    .statement-content {
      position: relative;
      z-index: 10;
      max-width: 1180px;
      margin: 0 auto;
      text-align: center;
    }

    .statement .big {
      font-family: var(--display);
      font-size: clamp(1.5rem, 2.5vw, 2.2rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.3;
      margin-bottom: 2.2rem;
    }

    .statement .big .w {
      color: #cbd5e1;
      transition: color 0.45s ease;
    }

    .statement .big .w.lit {
      color: var(--ink);
    }

    .statement .big .w.ac.lit {
      color: var(--violet);
    }

    /* Interactive Floating 3D Badges Group */
    .floating-tags-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.2rem;
      margin-bottom: 2.8rem;
    }

    /* Floating 3D Bubble styling (Image 3 inspired) */
    .tag-bubble {
      font-size: 14.5px;
      font-weight: 700;
      padding: 0.65rem 1.4rem;
      border-radius: 30px;
      box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.05),
        inset 0 -3px 0 rgba(0, 0, 0, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
      cursor: default;
      transition: all 0.3s var(--ease);
      position: relative;
      animation: floaty 5s ease-in-out infinite;
    }

    .tag-bubble:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow:
        0 12px 28px rgba(130, 66, 245, 0.12),
        inset 0 -3px 0 rgba(0, 0, 0, 0.08),
        inset 0 2px 0 rgba(255, 255, 255, 0.3);
    }

    /* Todas las etiquetas comparten el violeta de marca; solo cambia el desfase
       para que no floten al unísono. */
    .tag-bubble.tb-yellow,
    .tag-bubble.tb-orange,
    .tag-bubble.tb-coral,
    .tag-bubble.tb-pink,
    .tag-bubble.tb-blue,
    .tag-bubble.tb-sky {
      background: rgba(130, 66, 245, 0.08);
      color: var(--violet-ink);
      border: 1px solid rgba(130, 66, 245, 0.15);
    }

    .tag-bubble.tb-yellow { animation-delay: 0.2s; }
    .tag-bubble.tb-orange { animation-delay: 0.9s; }
    .tag-bubble.tb-coral  { animation-delay: 1.4s; }
    .tag-bubble.tb-pink   { animation-delay: 0.5s; }
    .tag-bubble.tb-blue   { animation-delay: 1.8s; }
    .tag-bubble.tb-sky    { animation-delay: 1.1s; }

    .ai-logos-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.8rem;
      width: 100%;
      margin-top: 1.5rem;
    }

    .ai-logos-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--ink-faint);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .ai-logos-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(1.5rem, 4vw, 3rem);
      flex-wrap: wrap;
      margin-bottom: 2.2rem;
    }

    .ai-logo-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-soft);
      transition: all 0.2s;
    }

    .ai-logo-item svg {
      opacity: 0.55;
      transition: all 0.25s;
    }

    .ai-logo-item:hover {
      color: var(--ink);
      transform: translateY(-1px);
    }

    .ai-logo-item:hover svg {
      opacity: 1;
      transform: scale(1.08);
    }

    /* ================= SITUACIÓN ================= */
    /* ================= PUNTO DE PARTIDA =================
       Dos columnas: a la izquierda el recorrido seleccionable, a la derecha el
       panel que cambia según la elección, con los mockups flotando al borde.
       Bajo 1140px los mockups se retiran; en móvil pasa a acordeón y el panel
       cae debajo de la opción activa. */
    /* La columna de opciones va más angosta que antes (era 45fr): así la
       flecha queda más cerca del texto y la explicación gana ancho. */
    .sit-wrap {
      display: grid;
      grid-template-columns: 40fr 60fr;
      gap: clamp(2rem, 4vw, 4rem);
      align-items: start;
      position: relative;
    }

    /* ---- columna izquierda: el recorrido ---- */
    .sit-list {
      display: flex;
      flex-direction: column;
      /* Tope de ancho para que la flecha no se vaya al borde: con
         justify-content:space-between quedaba a más de 120px del título. */
      max-width: 420px;
    }

    .sit-row {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      text-align: left;
      background: none;
      border: 0;
      border-top: 1px solid var(--line-strong);
      /* Recogido a propósito (era clamp(1.4rem, 2.2vw, 1.9rem)): la lista
         ocupa menos alto y la explicación de al lado respira más. */
      padding: clamp(.95rem, 1.5vw, 1.3rem) 0;
      cursor: pointer;
      font-family: inherit;
      transition: padding-left .4s var(--ease);
    }

    .sit-row:last-child {
      border-bottom: 1px solid var(--line-strong);
    }

    /* Indicador vertical del activo. Va en ::before para animar su altura
       sin empujar el contenido de la fila. */
    .sit-row::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 3px;
      height: 0;
      border-radius: 3px;
      background: var(--violet);
      transform: translateY(-50%);
      transition: height .4s var(--ease);
    }

    .sit-row.on {
      padding-left: 1.6rem;
    }

    .sit-row.on::before {
      height: calc(100% - 2.6rem);
    }

    .sit-row-body {
      display: flex;
      flex-direction: column;
      gap: .25rem;
      min-width: 0;
    }

    .sit-row-n {
      font-family: var(--display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--ink-faint);
      transition: color .4s var(--ease);
    }

    .sit-row.on .sit-row-n {
      color: var(--violet);
    }

    .sit-row-title {
      font-family: var(--display);
      font-size: clamp(1.3rem, 2.4vw, 1.85rem);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -.025em;
      color: var(--ink-faint);
      text-wrap: balance;
      transition: color .4s var(--ease);
    }

    .sit-row-title em {
      font-style: normal;
      color: inherit;
      transition: color .4s var(--ease);
    }

    .sit-row.on .sit-row-title {
      color: var(--ink);
    }

    .sit-row.on .sit-row-title em {
      color: var(--violet);
    }

    .sit-row-desc {
      font-size: 14.5px;
      line-height: 1.55;
      color: var(--ink-faint);
      max-width: 34ch;
      transition: color .4s var(--ease);
    }

    .sit-row.on .sit-row-desc {
      color: var(--ink-soft);
    }

    .sit-row-arrow {
      flex-shrink: 0;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1.5px solid var(--line-strong);
      color: var(--ink-faint);
      background: var(--surface);
      transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
    }

    .sit-row:hover .sit-row-arrow {
      transform: scale(1.08);
      border-color: var(--violet);
      color: var(--violet);
    }

    .sit-row.on .sit-row-arrow {
      background: var(--violet);
      border-color: var(--violet);
      color: #fff;
      box-shadow: 0 10px 26px rgba(130, 66, 245, .38);
    }

    /* ---- columna derecha ---- */
    .sit-detail {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: clamp(1.5rem, 3vw, 3rem);
      align-items: center;
    }

    .sit-panel {
      min-width: 0;
      max-width: 46ch;
    }

    .sit-panel .lbl {
      display: block;
      font-size: 11.5px;
      font-weight: 750;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--violet);
      margin-bottom: .7rem;
    }

    .sit-panel h3 {
      font-family: var(--display);
      font-size: clamp(1.35rem, 2.2vw, 1.75rem);
      font-weight: 800;
      line-height: 1.22;
      letter-spacing: -.025em;
      text-wrap: balance;
      margin-bottom: .9rem;
    }

    .sit-panel h3 em {
      font-style: normal;
      color: var(--violet);
    }

    .sit-panel p {
      font-size: 15px;
      line-height: 1.7;
      color: var(--ink-soft);
      margin-bottom: 1.5rem;
    }

    .sit-panel ul {
      list-style: none;
      display: grid;
      gap: .7rem;
      margin-bottom: 1.9rem;
    }

    .sit-panel li {
      display: flex;
      align-items: flex-start;
      gap: .65rem;
      font-size: 14.5px;
      line-height: 1.5;
      color: var(--ink-soft);
    }

    .sit-panel li svg {
      flex-shrink: 0;
      margin-top: .18em;
      color: var(--violet);
    }

    .sit-panel .btn {
      background: linear-gradient(135deg, #8242f5, #6a2fe0);
      color: #fff;
      border: 0;
      box-shadow: 0 10px 26px rgba(130, 66, 245, .3);
    }

    .sit-panel .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 34px rgba(130, 66, 245, .4);
    }

    .sit-panel .micro {
      display: block;
      margin-top: .9rem;
      font-size: 12.5px;
      color: var(--ink-faint);
    }

    /* El contenido se renueva con un fundido corto que además desplaza. */
    .fade-swap {
      animation: sitSwap .4s var(--ease) both;
    }

    @keyframes sitSwap {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    /* ---- mockups flotantes ---- */
    /* El escenario mide exactamente lo que medía .sit-mocks, para que la
       ilustración de «estoy empezando» siga viéndose igual que antes. Las otras
       dos situaciones tienen su propia escena y se cruzan con un fundido. */
    .jr-stage {
      position: relative;
      width: clamp(200px, 21vw, 290px);
      height: 330px;
      flex-shrink: 0;
    }

    .jr-scene {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity .45s var(--ease);
      pointer-events: none;
    }

    .jr-scene.on {
      opacity: 1;
    }

    /* Las piezas entran escalonadas. Los mockups viejos quedan fuera: ya tienen
       su propia animación de flotar y las dos transformaciones se pelearían. */
    .jr-scene>*:not(.sit-mock) {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .4s var(--ease), transform .4s var(--ease);
    }

    .jr-scene.on>*:not(.sit-mock) {
      opacity: 1;
      transform: none;
    }

    .jr-scene.on> :nth-child(1) {
      transition-delay: .08s;
    }

    .jr-scene.on> :nth-child(2) {
      transition-delay: .16s;
    }

    .jr-scene.on> :nth-child(3) {
      transition-delay: .24s;
    }

    .jr-card {
      position: absolute;
      background: #fff;
      border: 1px solid var(--line-strong);
      border-radius: 14px;
      box-shadow: 0 20px 48px rgba(15, 23, 42, .12), 0 3px 10px rgba(15, 23, 42, .04);
      overflow: hidden;
    }

    .jr-chrome {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 7px 9px;
      border-bottom: 1px solid var(--line);
      background: #fcfcfd;
    }

    .jr-chrome i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--line-strong);
    }

    .jr-chrome span {
      margin-left: 5px;
      font-size: 8px;
      font-weight: 600;
      color: var(--ink-faint);
    }

    .jr-lbl {
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }

    /* ===== escena 2 · transformar ===== */
    .jr2-antes,
    .jr2-despues {
      width: 82%;
    }

    .jr2-antes {
      top: 0;
      left: 0;
      filter: saturate(.12);
    }

    .jr2-despues {
      bottom: 0;
      right: 0;
      z-index: 2;
    }

    .jr2-body {
      padding: 10px 11px 11px;
    }

    .jr2-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .jr2-score {
      font-family: var(--display);
      font-size: 25px;
      font-weight: 800;
      letter-spacing: -.04em;
      line-height: 1;
    }

    .jr2-antes .jr2-score {
      color: var(--red);
    }

    .jr2-despues .jr2-score {
      color: var(--green);
    }

    .jr2-bars {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .jr2-bar {
      display: grid;
      grid-template-columns: 46px 1fr;
      align-items: center;
      gap: 7px;
      font-size: 8.5px;
      font-weight: 600;
      color: var(--ink-faint);
    }

    .jr2-bar em {
      display: block;
      height: 4px;
      border-radius: 2px;
      background: #eef1f5;
      position: relative;
      overflow: hidden;
    }

    .jr2-bar em::after {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: var(--v, 30%);
      border-radius: 2px;
      background: #cbd5e1;
    }

    .jr2-despues .jr2-bar em::after {
      background: linear-gradient(90deg, var(--violet), var(--violet-2));
    }

    .jr2-delta {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      background: var(--ink);
      color: #fff;
      border-radius: 99px;
      padding: 6px 13px;
      font-family: var(--display);
      font-size: 12.5px;
      font-weight: 800;
      letter-spacing: -.02em;
      box-shadow: 0 14px 30px -10px rgba(15, 23, 42, .45);
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .jr-scene.on .jr2-delta {
      transition-delay: .3s;
      transform: translate(-50%, -50%);
    }

    .jr-scene:not(.on) .jr2-delta {
      transform: translate(-50%, calc(-50% + 12px));
    }

    /* ===== escena 3 · escalar ===== */
    .jr3-chart {
      top: 0;
      left: 0;
      width: 92%;
      padding: 12px 13px 8px;
    }

    .jr3-chart-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 8px;
    }

    .jr3-big {
      font-family: var(--display);
      font-size: 21px;
      font-weight: 800;
      letter-spacing: -.035em;
      line-height: 1;
      color: var(--ink);
    }

    .jr3-up {
      font-size: 9px;
      font-weight: 700;
      color: var(--green);
      background: var(--green-soft);
      border-radius: 99px;
      padding: 3px 7px;
    }

    .jr3-svg {
      display: block;
      width: 100%;
      height: 46px;
    }

    .jr3-line {
      fill: none;
      stroke: var(--violet);
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 260;
      stroke-dashoffset: 260;
    }

    .jr-scene.on .jr3-line {
      animation: jrDraw 1.1s var(--ease) .3s forwards;
    }

    @keyframes jrDraw {
      to {
        stroke-dashoffset: 0;
      }
    }

    .jr3-stats {
      bottom: 0;
      left: 0;
      width: 62%;
      padding: 10px 12px;
    }

    .jr3-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 0;
      font-size: 9px;
      font-weight: 600;
      color: var(--ink-soft);
    }

    .jr3-row+.jr3-row {
      border-top: 1px solid var(--line);
    }

    .jr3-row b {
      font-family: var(--display);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--ink);
    }

    /* Va en la franja del medio, entre la gráfica y la tabla de abajo. Antes
       estaba anclada abajo y se montaba encima de la tabla. */
    .jr3-ai {
      top: 130px;
      right: -12px;
      width: 46%;
      padding: 9px 11px;
    }

    .jr3-cite {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
      font-size: 9.5px;
      font-weight: 600;
      color: var(--ink);
    }

    .jr3-cite svg {
      color: var(--green);
      flex-shrink: 0;
    }

    .sit-mock {
      position: absolute;
      border-radius: 18px;
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, .7);
      box-shadow: 0 24px 60px rgba(15, 23, 42, .13), 0 4px 14px rgba(15, 23, 42, .05);
      overflow: hidden;
    }

    .sit-mock-desk {
      top: 20px;
      left: 0;
      width: 100%;
      animation: sitFloat 7s ease-in-out infinite;
    }

    .sit-mock-mob {
      bottom: 0;
      right: -16px;
      width: 46%;
      animation: sitFloat 8s ease-in-out .9s infinite reverse;
    }

    @keyframes sitFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-11px);
      }
    }

    .sit-mock-top {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 9px 11px;
      border-bottom: 1px solid rgba(15, 23, 42, .06);
    }

    .sit-mock-top i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(15, 23, 42, .14);
      display: block;
    }

    .sit-mock-url {
      margin-left: 6px;
      height: 9px;
      flex: 1;
      border-radius: 99px;
      background: rgba(15, 23, 42, .06);
      /* Antes iba vacía: era la única escena de las tres sin una sola palabra. */
      display: flex;
      align-items: center;
      padding: 0 6px;
      font-size: 5.5px;
      font-weight: 600;
      color: var(--ink-faint);
      letter-spacing: .02em;
    }

    .sit-mock-h {
      font-family: var(--display);
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.15;
      color: var(--ink);
    }

    .sit-mock-h span {
      color: var(--violet);
    }

    .sit-mock-h-sm {
      font-size: 8px;
    }

    .sit-mock-body {
      padding: 13px;
      display: grid;
      gap: 7px;
    }

    .sit-mock-line {
      height: 7px;
      border-radius: 4px;
      background: rgba(15, 23, 42, .09);
    }

    .sit-mock-line.w70 {
      width: 70%;
    }

    .sit-mock-line.w45 {
      width: 45%;
    }

    .sit-mock-line.acc {
      background: rgba(130, 66, 245, .32);
      width: 55%;
    }

    .sit-mock-block {
      height: 52px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(130, 66, 245, .13), rgba(166, 121, 255, .05));
      margin-top: 3px;
    }

    .sit-mock-pill {
      height: 19px;
      width: 60px;
      border-radius: 99px;
      background: var(--violet);
      margin-top: 5px;
      display: grid;
      place-items: center;
      font-size: 6.5px;
      font-weight: 700;
      color: #fff;
      letter-spacing: .01em;
    }

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

      .sit-mock-desk,
      .sit-mock-mob {
        animation: none;
      }

      .fade-swap {
        animation-duration: .01ms;
      }
    }

    /* Bajo 1140px la ilustración estorba más de lo que aporta. */
    @media (max-width: 1140px) {
      .sit-detail {
        grid-template-columns: minmax(0, 1fr);
      }

      .jr-stage {
        display: none;
      }

      .sit-panel {
        max-width: none;
      }
    }

    /* ================= HERRAMIENTA DEMO (CLEAR THEME) ================= */
    .tool {
      background: var(--bg);
      padding-block: clamp(3.5rem, 6vw, 6rem);
      position: relative;
      border-block: 1px solid var(--line);
    }

    .tool-perks {
      display: flex;
      gap: 1.6rem;
      flex-wrap: wrap;
      margin-top: 1.5rem;
    }

    .perk {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-soft);
    }

    .perk svg {
      color: var(--violet);
      flex-shrink: 0;
    }

    /* Clear dashboard container */
    .app {
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }

    .app-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.95rem 1.5rem;
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
      background: #ffffff;
    }

    .app-bar .addr {
      margin-left: 0.7rem;
      flex: 1;
      min-width: 0;
      max-width: 320px;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      background: #f1f5f9;
      border: 1px solid rgba(15, 23, 42, 0.03);
      border-radius: 8px;
      padding: 0.45rem 0.8rem;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--ink-soft);
      overflow: hidden;
      white-space: nowrap;
    }

    .app-bar .addr .verified {
      margin-left: auto;
      color: var(--green);
      background: var(--green-soft);
      display: flex;
      align-items: center;
      gap: 0.25rem;
      font-size: 11px;
      font-weight: 700;
      padding: 0.15rem 0.45rem;
      border-radius: 6px;
    }

    .app-run {
      margin-left: auto;
      background: var(--violet);
      color: #fff;
      border: none;
      border-radius: 99px;
      font-size: 13px;
      font-weight: 600;
      padding: 0.55rem 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(130, 66, 245, 0.2);
    }

    .app-run:hover {
      background: var(--violet-ink);
      transform: translateY(-1px);
    }

    .app-run:active {
      transform: scale(.95);
      transition: transform .12s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .app-grid {
      display: grid;
      grid-template-columns: 210px 1fr;
      min-height: 360px;
    }

    .side {
      min-width: 0;
      border-right: 1px solid rgba(15, 23, 42, 0.06);
      padding: 1.4rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      background: #ffffff;
    }

    .side-brand {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.4rem 0.6rem 1.3rem;
      font-weight: 800;
      font-size: 15px;
      font-family: var(--display);
      color: var(--ink);
    }

    .side-brand img {
      width: 22px;
      height: 22px;
    }

    .side-item {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.6rem 0.7rem;
      border-radius: 9px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink-soft);
      transition: all 0.2s;
    }

    .side-item svg {
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      color: var(--ink-faint);
    }

    .side-item.active {
      background: var(--violet-soft);
      color: var(--violet);
    }

    .side-item.locked {
      color: var(--ink-faint);
      opacity: 0.8;
    }

    .side-item .lock {
      margin-left: auto;
      color: var(--ink-faint);
    }

    .side-pro {
      margin-top: auto;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 13px;
      padding: 1rem;
    }

    .side-pro .t {
      font-size: 12.5px;
      font-weight: 700;
      margin-bottom: 0.3rem;
    }

    .side-pro .d {
      font-size: 11px;
      color: var(--ink-soft);
      line-height: 1.45;
      margin-bottom: 0.7rem;
    }

    .side-pro .b {
      display: inline-flex;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--violet);
    }

    .panel {
      min-width: 0;
      padding: 1.25rem;
      display: grid;
      gap: 1rem;
      background: #ffffff;
    }

    .panel-row {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 1rem;
    }

    .pcard {
      min-width: 0;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.05);
      border-radius: 16px;
      padding: 1.05rem;
      box-shadow: var(--shadow-sm);
    }

    .pcard .ph {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .pcard .ph .lbl {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--ink-soft);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .pcard .ph .info {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid var(--line-strong);
      color: var(--ink-faint);
      font-size: 10px;
      display: grid;
      place-items: center;
    }

    /* gauges consistentes */
    .gauges {
      display: grid;
      grid-template-columns: 1.15fr 1fr 1fr;
      gap: 0.8rem;
      align-items: stretch;
    }

    .g-cell {
      background: #fafafb;
      border: 1px solid rgba(15, 23, 42, 0.04);
      border-radius: 13px;
      padding: 1.1rem 0.8rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
    }

    .g-cell.lead-cell {
      background: var(--violet-soft);
      border-color: rgba(130, 66, 245, 0.12);
    }

    .marc {
      position: relative;
      width: 100%;
      max-width: 90px;
      margin: 0 auto;
    }

    .marc svg {
      width: 100%;
      display: block;
    }

    .marc .track {
      fill: none;
      stroke: #e2e8f0;
      stroke-linecap: round;
    }

    .marc .fill {
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 100 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset 1.5s var(--ease);
    }

    .marc .mnum {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-weight: 800;
      font-family: var(--display);
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .g-cell .mnum {
      font-size: 18px;
    }

    .g-cell.lead-cell .mnum {
      font-size: 24px;
    }

    .g-cell.lead-cell .mnum i {
      font-size: 12px;
      color: var(--ink-soft);
      font-style: normal;
      font-weight: 600;
    }

    .g-cell .pn {
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink);
      margin-top: 0.5rem;
    }

    .g-cell .pd {
      font-size: 10.5px;
      color: var(--ink-soft);
      margin-top: 0.15rem;
      line-height: 1.3;
    }

    .g-cell .st {
      margin-top: 0.5rem;
      display: inline-flex;
      font-size: 10.5px;
      font-weight: 700;
      color: #d97706;
      background: rgba(245, 158, 11, 0.08);
      border: 1px solid rgba(245, 158, 11, 0.16);
      padding: 0.2rem 0.55rem;
      border-radius: 6px;
      text-transform: uppercase;
    }

    .bench {
      text-align: center;
      font-size: 12px;
      color: var(--ink-soft);
      margin-top: 0.6rem;
      border-top: 1px solid rgba(15, 23, 42, 0.04);
      padding-top: 0.5rem;
    }

    .bench b {
      color: var(--ink);
    }

    .finds {
      display: flex;
      flex-direction: column;
    }

    .find {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.7rem 0;
      border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    }

    .find:last-child {
      border-bottom: none;
    }

    .find .fi {
      width: 30px;
      height: 30px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .find .ft {
      flex: 1;
      min-width: 0;
    }

    .find .ft .a {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }

    .find .ft .b {
      font-size: 11.5px;
      color: var(--ink-soft);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .find .sev {
      font-size: 11px;
      font-weight: 700;
      padding: 0.18rem 0.5rem;
      border-radius: 6px;
      text-transform: uppercase;
    }

    .sev-crit {
      background: var(--red-soft);
      color: var(--red);
      border: 1px solid rgba(239, 68, 68, 0.12);
    }

    .sev-high {
      background: rgba(245, 158, 11, 0.08);
      color: var(--amber);
      border: 1px solid rgba(245, 158, 11, 0.12);
    }

    .fi-crit {
      background: var(--red-soft);
      color: var(--red);
    }

    .fi-high {
      background: rgba(245, 158, 11, 0.06);
      color: var(--amber);
    }

    .tool-cta {
      text-align: center;
      margin-top: clamp(2.4rem, 4vw, 3.4rem);
    }

    .tool-cta .note {
      margin-top: 1rem;
      font-size: 13px;
      color: var(--ink-soft);
    }

    /* ================= PASOS ================= */
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: clamp(1.5rem, 3vw, 2.6rem);
    }

    .step {
      padding-top: 1.5rem;
      border-top: 2px solid rgba(15, 23, 42, 0.06);
      position: relative;
    }

    .step::after {
      content: '';
      position: absolute;
      top: -4px;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--violet);
    }

    .step .n {
      font-size: 13px;
      font-weight: 800;
      color: var(--violet);
      margin-bottom: 0.8rem;
      font-family: var(--display);
    }

    .step h3 {
      font-family: var(--display);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 0.55rem;
    }

    .step p {
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.55;
    }

    /* ================= PLANES ================= */
    .plans {
      display: grid;
      /* El del centro, un pelo más ancho además de más alto. */
      grid-template-columns: 1fr 1.07fr 1fr;
      gap: 1.2rem;
      align-items: stretch;
      max-width: 1100px;
      margin: 18px auto 0;
    }

    .plan {
      background: var(--surface);
      border: 1px solid rgba(15, 23, 42, 0.05);
      border-radius: var(--r-md);
      padding: 2.2rem 1.8rem;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all 0.3s var(--ease);
      box-shadow: var(--shadow-sm);
    }

    .plan:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    /* Negro puro, no el azul pizarra de --ink: sobre blanco ese tono tira a
       azuloso y era justo lo que no gustaba. Y sobresale un poco por arriba y
       por abajo para que el del centro pese más. */
    .plan.feat {
      background: #0b0b0e;
      color: #fff;
      border-color: #0b0b0e;
      margin-block: -18px;
      padding-block: calc(2.2rem + 18px);
      box-shadow: 0 34px 70px -26px rgba(11, 11, 14, 0.45);
    }

    .plan .badge {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      font-size: 10.5px;
      font-weight: 800;
      color: #fff;
      background: var(--violet);
      padding: 0.3rem 0.65rem;
      border-radius: 7px;
      letter-spacing: 0.02em;
    }

    .plan.feat .badge {
      top: calc(1.5rem + 18px);
    }

    /* Título de verdad, no una versalita gris: en la referencia «Start» y
       «Growth» son titulares. */
    .plan .pname {
      font-family: var(--display);
      font-size: 21px;
      font-weight: 750;
      letter-spacing: -0.025em;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }

    .plan.feat .pname {
      color: #fff;
    }

    /* El pie: botón a todo el ancho y una línea pequeña debajo, como en la
       referencia. */
    .pfoot {
      margin-top: auto;
    }

    .pmicro {
      display: block;
      text-align: center;
      margin-top: .75rem;
      font-size: 11.5px;
      color: var(--ink-faint);
    }

    .plan.feat .pmicro {
      color: rgba(255, 255, 255, .45);
    }

    .plan .price {
      font-family: var(--display);
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    .plan .psub {
      font-size: 13px;
      color: var(--ink-soft);
      margin: 0.5rem 0 1.4rem;
      line-height: 1.4;
    }

    .plan.feat .psub {
      color: rgba(255, 255, 255, 0.6);
    }

    .plan ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      flex: 1;
      border-top: 1px solid rgba(15, 23, 42, 0.07);
      padding-top: 1.5rem;
      margin-bottom: 2rem;
    }

    .plan.feat ul {
      border-top-color: rgba(255, 255, 255, 0.12);
    }

    .plan li {
      font-size: 13.5px;
      color: var(--ink-soft);
      display: flex;
      gap: 0.6rem;
      line-height: 1.45;
    }

    .plan.feat li {
      color: rgba(255, 255, 255, 0.8);
    }

    /* Violeta y no verde: la referencia usa un solo color de acento y aquí el
       verde era un tercer color que no aportaba nada. */
    .plan li svg {
      flex-shrink: 0;
      color: var(--violet);
      margin-top: 2px;
    }

    .plan.feat li svg {
      color: var(--violet-2);
    }

    .plan .pbtn {
      /* Es un <a>: sin display:block el width:100% no hace nada y el botón
         quedaba del ancho del texto en vez de ocupar la tarjeta. */
      display: block;
      width: 100%;
      padding: 0.9rem;
      border-radius: var(--r-btn);
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      border: 1.5px solid var(--line-strong);
      background: transparent;
      color: var(--ink);
      transition: all 0.2s;
      cursor: pointer;
    }

    .plan .pbtn:hover {
      border-color: var(--ink);
      background: rgba(15, 23, 42, 0.02);
    }

    .plan.feat .pbtn {
      background: #fff;
      color: var(--ink);
      border-color: #fff;
    }

    /* Los dos planes blancos "salen" de detrás del negro, como si el del
       centro repartiera cartas: arrancan encogidos, girados y montados sobre
       el negro, y al aparecer se enderezan casi del todo — queda solo un
       giro muy leve, como una carta recién puesta sobre la mesa. Solo tiene
       sentido con las tres columnas en fila, así que va detrás de ese
       min-width; en 2 o 1 columna el negro ya no está al centro y estas
       tarjetas vuelven al fade-up de siempre. */
    @media (min-width: 1081px) {
      .plan.feat {
        z-index: 1;
      }

      .plans .plan:first-child.reveal {
        transform: translateX(42%) scale(.88) rotate(-9deg);
        z-index: 0;
      }

      .plans .plan:last-child.reveal {
        transform: translateX(-42%) scale(.88) rotate(9deg);
        z-index: 0;
      }

      .plans .plan:first-child.reveal.in {
        transform: rotate(-2.2deg);
      }

      .plans .plan:last-child.reveal.in {
        transform: rotate(2.2deg);
      }

      /* El hover de siempre (levantar la tarjeta) se suma al giro en vez de
         reemplazarlo, si no el gesto de "carta sobre la mesa" desaparecía en
         cuanto alguien pasaba el mouse por encima. */
      .plans .plan:first-child.reveal.in:hover {
        transform: rotate(-2.2deg) translateY(-6px);
      }

      .plans .plan:last-child.reveal.in:hover {
        transform: rotate(2.2deg) translateY(-6px);
      }
    }

    /* ===== Panel Pro (producto) ===== */
    .plans-soft {
      margin-top: 1.2rem;
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
    }

    .plan-pro {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
      gap: clamp(1.6rem, 4vw, 3rem);
      align-items: center;
      background: var(--surface);
      border: 1px solid var(--line-strong);
      border-radius: var(--r-lg);
      padding: clamp(1.6rem, 3.5vw, 2.4rem);
      box-shadow: var(--shadow-sm);
      position: relative;
    }

    .plan-pro-soon {
      display: inline-block;
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--violet);
      background: var(--violet-soft);
      border: 1px solid rgba(130, 66, 245, .18);
      padding: .28rem .65rem;
      border-radius: 6px;
      margin-bottom: .9rem;
    }

    .plan-pro h3 {
      font-family: var(--display);
      font-size: clamp(1.35rem, 2.6vw, 1.7rem);
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-bottom: .55rem;
    }

    .plan-pro-desc {
      font-size: 13.5px;
      line-height: 1.6;
      color: var(--ink-soft);
      margin-bottom: 1.3rem;
    }

    .plan-pro-price {
      display: flex;
      align-items: baseline;
      gap: .4rem;
      margin-bottom: 1.3rem;
    }

    .plan-pro-price b {
      font-family: var(--display);
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1;
      color: var(--ink);
    }

    .plan-pro-price span {
      font-size: 13px;
      color: var(--ink-soft);
      font-weight: 600;
    }

    .plan-pro-btn {
      display: inline-block;
      appearance: none;
      -webkit-appearance: none;
      font-family: inherit;
      padding: .8rem 1.6rem;
      border-radius: var(--r-btn);
      background: var(--violet);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      border: 0;
      outline: 0;
      cursor: pointer;
      transition: background .2s var(--ease), transform .2s var(--ease);
    }

    .plan-pro-btn:hover {
      background: var(--violet-hover);
      transform: translateY(-1px);
    }

    .plan-pro-btn:active,
    .plan-pro-btn:focus,
    .plan-pro-btn:focus-visible {
      background: var(--violet-hover);
      color: #fff;
      outline: 0;
    }

    .plan-pro-micro {
      display: block;
      font-size: 11.5px;
      color: var(--ink-faint);
      margin-top: .7rem;
    }

    /* Comparativa gratis vs pago */
    .cmp {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .9rem;
    }

    .cmp-col {
      border: 1px solid var(--line-strong);
      border-radius: var(--r-md);
      padding: 1.1rem 1.2rem;
      background: var(--paper);
    }

    .cmp-col.paid {
      border-color: rgba(130, 66, 245, .3);
      background: var(--violet-soft);
    }

    .cmp-col > b {
      display: block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: .2rem;
    }

    .cmp-col.paid > b {
      color: var(--violet);
    }

    .cmp-col > i {
      display: block;
      font-style: normal;
      font-size: 12.5px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: .8rem;
    }

    .cmp-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin: 0;
      padding: 0;
    }

    .cmp-col li {
      display: flex;
      gap: .5rem;
      font-size: 12.5px;
      line-height: 1.45;
      color: var(--ink-soft);
    }

    .cmp-col li svg {
      flex-shrink: 0;
      margin-top: 2px;
      color: var(--green);
    }

    .cmp-col.paid li svg {
      color: var(--violet);
    }

    @media (max-width: 900px) {
      .plan-pro {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 560px) {
      .cmp {
        grid-template-columns: 1fr;
      }
    }

    .plan.feat .pbtn:hover {
      background: var(--violet);
      color: #fff;
      border-color: var(--violet);
      box-shadow: 0 8px 20px rgba(130, 66, 245, 0.35);
    }

    /* ================= CTA FINAL ================= */
    .final {
      padding-block: clamp(5.5rem, 10vw, 9rem);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .final .lead {
      max-width: 52ch;
      margin: 1.5rem auto 2.4rem;
    }

    .final-robots {
      display: flex;
      justify-content: center;
      gap: clamp(1rem, 5vw, 4rem);
      align-items: flex-end;
      margin-top: clamp(3rem, 6vw, 5rem);
      position: relative;
      z-index: 1;
    }

    .final-robots img {
      width: min(28vw, 220px);
      filter: drop-shadow(0 24px 44px rgba(15, 23, 42, 0.15));
    }

    .final-robots img:first-child {
      animation: floaty 7s ease-in-out infinite;
    }

    .final-robots img:last-child {
      animation: floaty-reverse 8s ease-in-out 1s infinite;
    }

    /* ================= CONTACTO & FORMULARIO ================= */
    .contact-section {
      padding-block: clamp(5rem, 9vw, 8.5rem);
      position: relative;
      background: #ffffff;
      border-top: 1px solid var(--line);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: clamp(2rem, 5vw, 4rem);
      align-items: start;
      margin-top: 2.5rem;
    }

    .contact-form-card {
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: var(--r-lg);
      padding: clamp(1.8rem, 4vw, 2.8rem);
      box-shadow: var(--shadow-md);
      position: relative;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 1.2rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
    }

    .form-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }

    /* Casilla de autorización de datos. Va deliberadamente sobria y sin negrita:
       es un requisito legal, no una llamada a la acción, y compitiendo con el
       botón violeta solo restaría envíos. Pero tampoco se esconde — el texto
       queda legible y el enlace a la política, visible. */
    .form-consent {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      margin: 0.2rem 0 1.1rem;
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--ink-soft);
      cursor: pointer;
    }

    .form-consent input {
      flex: none;
      width: 1.05rem;
      height: 1.05rem;
      margin-top: 0.12rem;
      accent-color: var(--violet);
      cursor: pointer;
    }

    .form-consent input:focus-visible {
      outline: 2px solid var(--violet);
      outline-offset: 2px;
    }

    .form-consent a {
      color: var(--violet-ink);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .form-input, .form-select, .form-textarea {
      width: 100%;
      background: #f8fafc;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      padding: 0.8rem 1rem;
      font-family: inherit;
      font-size: 14.5px;
      color: var(--ink);
      outline: none;
      transition: all 0.25s ease;
    }

    .form-input:focus, .form-select:focus, .form-textarea:focus {
      background: #ffffff;
      border-color: var(--violet);
      box-shadow: 0 0 0 4px rgba(130, 66, 245, 0.1);
    }

    .form-textarea {
      resize: vertical;
      min-height: 110px;
    }

    .contact-info-card {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    .info-box {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-radius: 16px;
      padding: 1.2rem;
      transition: all 0.25s ease;
      box-shadow: var(--shadow-sm);
    }

    .info-box:hover {
      border-color: rgba(130, 66, 245, 0.25);
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
    }

    .info-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--violet-soft);
      color: var(--violet);
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }

    .info-detail h4 {
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 0.2rem;
    }

    .info-detail p {
      font-size: 13.5px;
      color: var(--ink-soft);
      line-height: 1.45;
    }

    .contact-robots {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      margin-top: 1rem;
      padding: 1.2rem;
      background: rgba(130, 66, 245, 0.03);
      border: 1px solid rgba(130, 66, 245, 0.08);
      border-radius: 16px;
    }

    .contact-robots img {
      width: 65px;
      height: 65px;
      object-fit: contain;
      filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.1));
    }

    .contact-success-msg {
      display: none;
      background: rgba(16, 185, 129, 0.08);
      border: 1px solid rgba(16, 185, 129, 0.2);
      color: #065f46;
      padding: 1rem 1.2rem;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 1.2rem;
      align-items: center;
      gap: 0.6rem;
    }

    .contact-error-msg {
      display: none;
      background: rgba(220, 38, 38, 0.06);
      border: 1px solid rgba(220, 38, 38, 0.22);
      color: #991b1b;
      padding: 1rem 1.2rem;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 1.2rem;
      align-items: center;
      gap: 0.6rem;
      line-height: 1.5;
    }

    .contact-error-msg a {
      color: #991b1b;
      text-decoration: underline;
    }

    /* Trampa antispam: invisible para personas, tentadora para bots. */
    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    #contactForm button[type="submit"][disabled] {
      opacity: .65;
      cursor: progress;
    }

    /* ================= FAQ =================
       Acordeón nativo con <details>: sin JavaScript, accesible con teclado y
       —lo importante— el texto vive siempre en el DOM, así que Google y los
       modelos de IA lo leen aunque esté cerrado. */
    .faq-list {
      max-width: 900px;
      margin: 0 auto;
      border-top: 1px solid var(--line-strong);
    }

    .faq-item {
      border-bottom: 1px solid var(--line-strong);
    }

    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.5rem 0;
      cursor: pointer;
      list-style: none;
      transition: color .2s ease;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary:hover {
      color: var(--violet);
    }

    .faq-item summary h3 {
      font-family: var(--display);
      font-size: clamp(1rem, 1.5vw, 1.15rem);
      font-weight: 700;
      line-height: 1.45;
      margin: 0;
      text-wrap: balance;
    }

    .faq-icon {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1.5px solid var(--line-strong);
      display: grid;
      place-items: center;
      transition: transform .3s ease, background .2s ease, border-color .2s ease;
    }

    .faq-item summary:hover .faq-icon {
      border-color: var(--violet);
      background: var(--violet-soft);
    }

    .faq-item.abierta .faq-icon {
      transform: rotate(45deg);
      border-color: var(--violet);
      background: var(--violet-soft);
      color: var(--violet);
    }

    /* Despliegue suave del acordeón.
       No se puede animar el <details> tal cual: el navegador esconde su
       contenido y ni ::details-content ni animar el alto desde JS lo sueltan.
       Así que el JS deja el <details> abierto para siempre —el navegador ya no
       esconde nada— y el que abre y cierra es este contenedor, con la clase
       .abierta. Sin JS el contenido queda visible, que es preferible a que
       quede inaccesible. */
    .faq-slide {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .42s var(--ease);
    }

    .faq-item.abierta .faq-slide {
      grid-template-rows: 1fr;
    }

    .faq-slide>.faq-answer {
      overflow: hidden;
      min-height: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-slide {
        transition: none;
      }
    }

    .faq-answer {
      padding: 0;
      max-width: 72ch;
      font-size: 15.5px;
      line-height: 1.75;
      color: var(--ink-soft);
    }

    .faq-answer p+p {
      margin-top: .85rem;
    }

    /* El aire de abajo, dentro del contenido: así el alto puede llegar a cero. */
    .faq-answer> :last-child {
      margin-bottom: 1.6rem;
    }

    .faq-answer strong {
      color: var(--ink);
      font-weight: 650;
    }

    .faq-answer a {
      color: var(--violet);
      font-weight: 650;
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-icon {
        transition: none;
      }
    }

    /* ================= FOOTER ================= */
    .footer {
      /* El fondo vive en ::before para poder revelarlo de abajo hacia arriba
         sin deformar el radio superior. */
      background: transparent;
      padding-top: clamp(3.25rem, 5vw, 4.5rem);
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }

    .footer::before {
      content: '';
      position: absolute;
      /* Se desborda a los lados a propósito: el arco es mucho mayor que la
         pantalla, así que solo se ve su tramo central. El overflow del footer
         recorta el resto. */
      inset: 0 -12%;
      z-index: -1;
      background: var(--dark);
      clip-path: inset(100% 0 0 0 round var(--foot-r) var(--foot-r) 0 0);
      transition: clip-path 1s var(--ease);
    }

    .footer {
      /* Arco muy grande: combinado con el desborde lateral del ::before, solo
         entra en pantalla la mitad superior de la curva. */
      --foot-r: clamp(110px, 18vw, 340px);
    }

    .footer.lifted::before {
      clip-path: inset(0 0 0 0 round var(--foot-r) var(--foot-r) 0 0);
    }

    .foot-top {
      display: grid;
      grid-template-columns: 1fr repeat(4, minmax(0, 1fr));
      gap: clamp(2rem, 4vw, 3.5rem);
      align-items: start;
      /* Sin hueco: la marca sube hasta rozar el texto. No se superpone
         porque ambos son blancos y el texto dejaría de leerse. */
      padding-bottom: 0;
      position: relative;
      z-index: 1;
    }

    .foot-copy {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.55);
      letter-spacing: -0.01em;
    }

    .foot-col h4 {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: -0.01em;
      margin-bottom: 1.4rem;
    }

    .foot-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .foot-col a {
      font-size: 14.5px;
      color: rgba(255, 255, 255, 0.62);
      letter-spacing: -0.01em;
      transition: opacity 0.25s var(--ease), color 0.25s var(--ease);
    }

    .foot-col a:hover {
      color: #ffffff;
    }

    .foot-social a {
      display: inline-flex;
      align-items: center;
      gap: 0.7rem;
    }

    .foot-social svg {
      flex-shrink: 0;
      opacity: 0.85;
    }

    /* Marca gigante: arte provisto, nunca texto ni CSS. Se ancla al borde
       inferior y el overflow del footer la recorta, como en la referencia. */
    .foot-brand {
      display: flex;
      justify-content: center;
      line-height: 0;
      /* recorta la base para compensar el ancho completo y que el footer no
         termine tan abajo */
      margin-bottom: -5.5%;
    }

    .foot-brand img {
      /* de borde a borde del viewport */
      width: 100%;
      height: auto;
      display: block;
      opacity: 0;
      transform: translateY(70px);
      transition: opacity 0.9s var(--ease) 0.25s, transform 1.1s var(--ease) 0.25s;
    }

    .footer.lifted .foot-brand img {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .footer::before { clip-path: none; transition: none; }
      .foot-brand img { opacity: 1; transform: none; transition: none; }
    }

    @media (max-width:1080px) {
      .foot-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 2rem;
      }

      .foot-copy {
        grid-column: 1 / -1;
      }
    }

    @media (max-width:560px) {
      .foot-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.2rem 1.5rem;
      }
    }

    /* ================= RESPONSIVE ================= */
    @media (max-width:1080px) {
      .cards-4 {
        grid-template-columns: repeat(2, 1fr)
      }

      .plans {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 0
      }

      /* Fuera de las tres columnas el destacado ya no está en el centro, así
         que sobresalir solo lo descuadra. */
      .plan.feat {
        margin-block: 0;
        padding-block: 2.2rem
      }

      .plan.feat .badge {
        top: 1.5rem
      }

      .steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2.5rem
      }

      .app-grid {
        grid-template-columns: 1fr
      }

      .side {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        align-items: center
      }

      .side-brand {
        width: 100%;
        padding-bottom: .6rem
      }

      .side-pro {
        display: none
      }

      .panel-row {
        grid-template-columns: 1fr
      }
    }

    @media (max-width:880px) {
      /* El carrusel de tres no funciona en pantalla estrecha: las de los lados
         quedarían fuera. Pasa a ser una tira que se arrastra con el dedo, cada
         tableta entera y con su pie. El JS deja de rotar por su cuenta. */
      .sc-stage {
        height: auto;
        display: flex;
        align-items: center;
        gap: .9rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-inline: var(--pad);
        margin-inline: calc(var(--pad) * -1);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .sc-stage::-webkit-scrollbar {
        display: none;
      }

      .showcase {
        --pad-w: min(78vw, 360px);
      }

      /* Se nombran también las clases de posición: si alguien estrecha la
         ventana con el carrusel a medio girar, las tarjetas ya vienen con
         .is-left/.is-right puestas y sin esto se quedarían encogidas. */
      .sc-item,
      .sc-item.is-center,
      .sc-item.is-left,
      .sc-item.is-right,
      .sc-item.is-hidden {
        position: static;
        flex: 0 0 var(--pad-w);
        transform: none;
        opacity: 1;
        pointer-events: auto;
        scroll-snap-align: center;
      }

      .sc-item .sc-caption,
      .sc-item.is-center .sc-caption {
        opacity: 1;
      }

      .sc-dots {
        display: none;
      }

      .sit-wrap {
        grid-template-columns: 1fr;
      }

      .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem
      }
    }

    @media (max-width:560px) {
      .cards-4 {
        grid-template-columns: 1fr
      }

      .plans {
        grid-template-columns: 1fr
      }

      .steps {
        grid-template-columns: 1fr
      }

      .gauges {
        grid-template-columns: 1fr;
        gap: .7rem
      }

      .app-run {
        display: none
      }

      .final-robots img {
        width: 38vw
      }

      .form-row {
        grid-template-columns: 1fr
      }
    }

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

      *,
      *::before,
      *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important
      }

      .split .w,
      .split .dot {
        opacity: 1;
        transform: none
      }

      .reveal {
        opacity: 1;
        transform: none;
        filter: none
      }

      /* La inclinación del abanico es composición, no animación: si la quito
         aquí las cuatro tarjetas se apilan planas y se tapan entre ellas. Lo
         que sí se desactiva es la transición, y de eso ya se encarga la regla
         general de arriba. */

      .statement .big .w {
        color: var(--ink)
      }
      
      .float-robot,
      .float-robot-slow,
      .tag-bubble,
      .stmt-orbit,
      .stmt-chip {
        animation: none;
      }
    }

    /* ================= FAQ CHATBOT WIDGET ================= */
    .faq-chatbot-fab {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9999;
      width: 72px;
      height: 72px;
      border-radius: 0;
      background: none;
      box-shadow: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      padding: 0;
    }

    .faq-chatbot-fab:hover {
      transform: scale(1.12) translateY(-3px);
      box-shadow: none;
    }

    .faq-chatbot-fab img {
      width: 64px;
      height: 64px;
      object-fit: contain;
      filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
    }

    .faq-chatbot-badge {
      position: absolute;
      top: -2px;
      right: -2px;
      background: #ef4444;
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      padding: 0.15rem 0.45rem;
      border-radius: 99px;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    }

    .faq-chat-window {
      position: fixed;
      bottom: 96px;
      right: 24px;
      z-index: 9999;
      width: 380px;
      max-width: calc(100vw - 32px);
      height: 530px;
      max-height: calc(100vh - 120px);
      background: #ffffff;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 20px;
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px) scale(0.95);
      transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .faq-chat-window.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .faq-chat-header {
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
      color: #ffffff;
      padding: 0.9rem 1.1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .faq-chat-avatar {
      position: relative;
      width: 38px;
      height: 38px;
      flex-shrink: 0;
    }

    .faq-chat-avatar img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .faq-chat-status-dot {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 9px;
      height: 9px;
      background: #10b981;
      border: 2px solid #0f172a;
      border-radius: 50%;
    }

    .faq-chat-title-box h4 {
      font-size: 14px;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
    }

    .faq-chat-title-box p {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.65);
      margin: 0;
    }

    .faq-chat-close {
      margin-left: auto;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.7);
      font-size: 20px;
      cursor: pointer;
      padding: 0.2rem;
      border-radius: 6px;
      transition: color 0.2s;
      line-height: 1;
    }

    .faq-chat-close:hover {
      color: #ffffff;
      background: rgba(255, 255, 255, 0.15);
    }

    .faq-chat-body {
      flex: 1;
      padding: 1rem;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      background: #f8fafc;
    }

    .faq-msg {
      display: flex;
      gap: 0.55rem;
      max-width: 88%;
    }

    .faq-msg.bot {
      align-self: flex-start;
    }

    .faq-msg.user {
      align-self: flex-end;
      flex-direction: row-reverse;
    }

    .faq-msg-bubble {
      padding: 0.75rem 0.95rem;
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.45;
      white-space: pre-line;
    }

    .faq-msg.bot .faq-msg-bubble {
      background: #ffffff;
      color: var(--ink);
      border: 1px solid rgba(15, 23, 42, 0.06);
      border-top-left-radius: 4px;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    }

    .faq-msg.user .faq-msg-bubble {
      background: var(--violet);
      color: #ffffff;
      border-top-right-radius: 4px;
    }

    .faq-chips-container {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-top: 0.4rem;
    }

    .faq-chip {
      background: #ffffff;
      border: 1px solid rgba(130, 66, 245, 0.25);
      color: var(--violet);
      padding: 0.55rem 0.85rem;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: var(--shadow-sm);
    }

    .faq-chip:hover {
      background: var(--violet);
      color: #ffffff;
      border-color: var(--violet);
      transform: translateX(3px);
    }

    .faq-chat-footer {
      padding: 0.75rem 1rem;
      background: #ffffff;
      border-top: 1px solid rgba(15, 23, 42, 0.06);
      display: flex;
      gap: 0.5rem;
    }

    .faq-chat-input {
      flex: 1;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 99px;
      padding: 0.55rem 0.9rem;
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s;
      font-family: inherit;
    }

    .faq-chat-input:focus {
      border-color: var(--violet);
    }

    .faq-chat-send {
      background: var(--violet);
      color: #ffffff;
      border: none;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .faq-chat-send:hover {
      background: var(--violet-hover);
    }

/* ===== Bloque que estaba suelto dentro de <section class="statement"> ===== */
      .stmt-wrap{position:relative;max-width:1360px;margin:0 auto;padding:5rem 1.5rem;text-align:center}
      .stmt-title{font-family:'Inter Tight','Inter',system-ui,sans-serif;font-size:clamp(1.7rem,4.2vw,3.3rem);line-height:1.22;font-weight:800;margin:0 0 2.6rem}
      /* Sin subrayado: el énfasis lo hace el color. */
      .stmt-title .vi{position:relative;display:inline-block;color:#8242f5}
      .stmt-body{max-width:640px;margin:2.6rem auto 0;font-size:1.05rem;line-height:1.75;color:var(--ink-soft)}
      .stmt-body .hi{color:#8242f5;font-weight:600}
      .stmt-caption{margin:3rem 0 1.2rem;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-faint)}
      .stmt-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem}
      .stmt-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px 14px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.05);white-space:nowrap}
      .stmt-pill svg{flex-shrink:0}
      .stmt-row-dot{color:var(--ink-faint);font-size:13px}

      /* ---- composición flotante alrededor del texto ----
         Decorativa, no informativa: las tarjetas están para dar atmósfera, no
         para comunicar datos. Etiquetas cortísimas, nunca más de tres líneas y
         cero cifras — antes había posiciones de Google, reseñas y métricas que
         además prometían cosas que no podemos sostener.
         Todo en CSS y SVG: ninguna imagen, cero peticiones de red.
         Viven en tres franjas libres: encima del titular, al lado del párrafo y
         debajo de los chips. Al lado del titular NO caben: esa línea mide
         1130px y solo deja 115px por lado. Por eso la sección crece de alto en
         pantallas grandes. */
      /* --fuera es el aire que sobra a los lados del bloque de texto (1360px).
         Solo las tarjetas con texto lo usan para separarse del centro; los
         cuadraditos de iconos se quedan donde están. La sección ya recorta lo
         que se salga, así que no puede provocar scroll horizontal. */
      .stmt-fx{
        position:absolute;inset:0;pointer-events:none;z-index:0;
        --fuera:clamp(0px, calc((100vw - 1400px) / 2), 100px)
      }
      .stmt-wrap>.stmt-title,
      .stmt-wrap>.stmt-body,
      .stmt-wrap>.stmt-caption,
      .stmt-wrap>.stmt-row{position:relative;z-index:1}

      .stmt-slot{position:absolute}

      /* Sin backdrop-filter y con fondo opaco a propósito: el cristal
         esmerilado obliga al navegador a rasterizar la tarjeta en una capa
         aparte y luego rotarla, y el texto salía borroso. Sobre fondo blanco
         el desenfoque no se veía de todos modos. `will-change` hace que la
         capa se rasterice a la resolución real de la pantalla. */
      .stmt-card{
        background:#fff;
        border:1px solid rgba(15,23,42,.07);
        box-shadow:0 22px 46px -18px rgba(15,23,42,.18),
                   0 3px 10px rgba(15,23,42,.045);
        border-radius:20px;padding:18px 20px;text-align:left;
        will-change:transform;
        animation:stmtFloat 8s ease-in-out infinite
      }

      /* La inclinación va dentro del keyframe: aparte, el transform del flotar
         la pisaría. */
      @keyframes stmtFloat{
        0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
        50%{transform:translateY(-10px) rotate(var(--rot,0deg))}
      }

      /* ---- colocación (medidas del bloque de 1360px) ----
         Cada pieza guarda 16px sobre el texto: 10 que sube el flotar y 6 que
         crece la caja al inclinarse. */
      /* Ángulos suaves a propósito: cuanto más inclinada, más se nota el
         remuestreo del texto. Con 1,6–2,2° la letra se ve nítida y la
         inclinación se sigue leyendo. */
      .stmt-s1{left:calc(6px - var(--fuera));top:26px;width:228px;--rot:-2deg}      /* Search    */
      .stmt-s2{right:calc(6px - var(--fuera));top:32px;width:214px;--rot:1.8deg}    /* Assistant */
      /* Estas dos van más afuera que el resto. A partir de 1400px ya están
         casi pegadas al borde de la ventana, así que el aire extra se gana
         estrechándolas: el borde de dentro se aleja unos 30px del texto. */
      .stmt-s3{left:calc(0px - var(--fuera));top:366px;width:188px;--rot:1.6deg}    /* Projects  */
      .stmt-s4{right:calc(0px - var(--fuera));top:370px;width:188px;--rot:-2deg}    /* Creative  */
      .stmt-s5{left:calc(40px - var(--fuera));top:628px;width:222px;--rot:2.2deg}   /* Ideas     */
      .stmt-s6{right:calc(34px - var(--fuera));top:620px;width:218px;--rot:-1.6deg} /* Connected */

      .stmt-s1 .stmt-card{animation-duration:7.4s}
      .stmt-s2 .stmt-card{animation-duration:8.6s;animation-delay:-2.1s}
      .stmt-s3 .stmt-card{animation-duration:7.8s;animation-delay:-4.2s}
      .stmt-s4 .stmt-card{animation-duration:9.2s;animation-delay:-1.2s}
      .stmt-s5 .stmt-card{animation-duration:8.2s;animation-delay:-3.4s}
      .stmt-s6 .stmt-card{animation-duration:9.4s;animation-delay:-5.6s}

      /* ---- iconos sueltos, en cuadraditos blancos ---- */
      .stmt-mini{
        position:absolute;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
        background:rgba(255,255,255,.86);
        -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,.9);
        box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
                   0 14px 28px -12px rgba(15,23,42,.2),
                   0 2px 6px rgba(15,23,42,.045);
        color:#94a3b8;animation:stmtFloat 7s ease-in-out infinite
      }
      .stmt-mini.acc{color:#8242f5}

      .stmt-m1{left:268px;top:150px;--rot:-5deg;animation-delay:-1.5s}
      .stmt-m2{right:306px;top:132px;--rot:4.5deg;animation-delay:-3.8s}
      .stmt-m3{left:250px;top:452px;--rot:3.8deg;animation-delay:-5.2s}
      .stmt-m4{right:300px;top:470px;--rot:-4.2deg;animation-delay:-2.4s}
      .stmt-m5{left:392px;top:702px;--rot:4.6deg;animation-delay:-6.1s}
      .stmt-m6{right:384px;top:690px;--rot:-3.4deg;animation-delay:-0.8s}
      /* Estos dos van en la franja de debajo de los chips, en el hueco que
         dejan las tarjetas de abajo. Ni a los lados de los chips (ahí solo hay
         259px y ya los ocupan otras piezas) ni encima de ellos. */
      .stmt-m7{left:320px;top:630px;--rot:-2.8deg;animation-delay:-4.6s}
      .stmt-m8{right:340px;top:626px;--rot:5deg;animation-delay:-2.9s}

      /* destello de IA, arriba al centro */
      .stmt-spark-ai{left:50%;top:120px;margin-left:-27px;width:54px}
      .stmt-spark-ai .stmt-orb{
        width:54px;height:54px;border-radius:18px;display:grid;place-items:center;
        background:linear-gradient(140deg,#fff,#f6f2ff);
        border:1px solid rgba(255,255,255,.9);
        box-shadow:0 0 0 9px rgba(130,66,245,.05),
                   0 18px 36px -14px rgba(130,66,245,.4),
                   0 2px 8px rgba(15,23,42,.05);
        color:#8242f5;animation:stmtFloat 6.4s ease-in-out infinite
      }

      /* ---- contenido ----
         El título va en tamaño normal y oscuro, como en la referencia. Antes
         era una versalita gris de 10px y se leía como etiqueta de dashboard,
         no como el nombre de una tarjeta. */
      .stmt-head{display:flex;align-items:center;gap:8px;font-family:'Inter Tight','Inter',sans-serif;
        font-size:13.5px;font-weight:750;letter-spacing:-.015em;color:var(--ink);margin-bottom:12px}
      .stmt-head svg{flex-shrink:0;color:#94a3b8}
      .stmt-line{font-size:12.5px;font-weight:550;color:var(--ink-soft);line-height:1.5}
      .stmt-line.soft{color:var(--ink-faint);font-weight:500}
      .stmt-ok{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650;
        color:#059669;margin-top:6px}
      .stmt-ok svg{flex-shrink:0}
      .stmt-list{display:flex;flex-direction:column;gap:6px}
      .stmt-item{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:550;color:var(--ink-soft)}
      .stmt-item i{width:6px;height:6px;border-radius:50%;background:#8242f5;flex-shrink:0;opacity:.5}
      .stmt-item:nth-child(2) i{opacity:.35}
      .stmt-item:nth-child(3) i{opacity:.2}
      .stmt-item.f1 i{background:#F24E1E;opacity:1}
      .stmt-item.f2 i{background:#4353FF;opacity:1}
      .stmt-item.f3 i{background:#0f172a;opacity:1}

      /* ---- por anchos ----
         Solo con 1400px o más cabe la composición entera: es el ancho al que la
         franja de encima del titular y la de debajo de los chips dan de sí. */
      @media(min-width:1400px){
        .stmt-wrap{padding-block:13rem}
      }

      /* Entre 1221 y 1399 solo caben cuatro: la franja de encima del titular se
         queda sin alto para el destello y la de abajo se come los chips. */
      @media(max-width:1399px){
        /* Mismo alto de bloque que en pantalla grande: con 12rem la tarjeta de
           la derecha quedaba a 3px de la fila de chips. */
        .stmt-wrap{padding-block:13rem}
        .stmt-s5,.stmt-s6,.stmt-mini,.stmt-spark-ai{display:none}
        .stmt-s1{left:6px;top:20px;width:200px}
        .stmt-s2{right:6px;top:26px;width:190px}
        .stmt-s3{left:6px;top:368px;width:184px}
        .stmt-s4{right:6px;top:368px;width:184px}
      }

      /* Más abajo ya no cabe nada sin comerse el texto. */
      @media(max-width:1220px){
        .stmt-wrap{padding-block:5rem}
        .stmt-fx{display:none}
      }

      @media(prefers-reduced-motion:reduce){
        .stmt-card,.stmt-mini,.stmt-spark-ai .stmt-orb{animation:none;transform:rotate(var(--rot,0deg))}
      }

      @media(max-width:640px){
        .stmt-row-dot{display:none}
      }
