:root {
          --bg: #0f1221;
          --ink: #e9ecff;
          --muted: #9aa3c9;
          --accent: #7bd0ff;
          --radius: 16px;
        }

        .facturacion-section {
          background: #d6e9ff;
          color: var(--ink);
          padding: 72px 20px;
        }

        .facturacion-wrap {
          max-width: 1100px;
          margin: auto;
          display: grid;
          gap: 64px;
        }

        .facturacion-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 32px;
          align-items: center;
        }

        .facturacion-row.invert {
          direction: rtl;
        }

        .facturacion-row.invert .facturacion-text {
          direction: ltr;
        }

        .facturacion-img img {
          width: 100%;
        }

        .facturacion-text h2 {
          font: 800 clamp(28px, 5vw, 44px) / 1.05 ui-sans-serif, system-ui;
          margin-bottom: 16px;
          color: #000000;
        }

        .facturacion-text ul {
          list-style: none;
          padding: 0;
          margin: 0;
          display: grid;
          gap: 10px;
          font: 400 16px/1.5 ui-sans-serif;
          color: #000000;
        }

        .facturacion-text li {
          display: flex;
          gap: 8px;
          align-items: flex-start;
          font: 600 clamp(20px, 2.3vw, 16px) / 1.2 ui-sans-serif, system-ui;
        }

        .facturacion-cta {
          text-align: center;
          font: 600 clamp(18px, 3vw, 24px)/1.4 ui-sans-serif;
          color: var(--ink);
          max-width: 70ch;
          margin: auto;
        }

        @media (max-width: 930px) {
          .facturacion-row {
            grid-template-columns: 1fr;
            gap: 20px;
          }

          .facturacion-row.invert {
            direction: ltr;
          }
        }

        :root {
          --bg: #0f1221;
          --panel: #121633;
          --ink: #e9ecff;
          --muted: #9aa3c9;
          --accent: #7bd0ff;
          --accent-2: #ffc0e2;
          --ok: #8bffc7;
          --radius: 18px;
          --shadow: 0 14px 40px rgba(10, 16, 40, .22);
          --media-ratio: 16/10;
          /* controla la relación de aspecto global */
        }

        /* CONTENEDOR */
        .fact-section {
          background: #d6e9ff;
          padding: 80px 20px;
          color: #000;
        }

        .fact-wrap {
          max-width: 1100px;
          margin: auto;
          display: grid;
          gap: 56px;
        }

        /* CABECERA */
        .fact-head {
          display: grid;
          gap: 10px;
          justify-items: center;
          text-align: center
        }

        .fact-kicker {
          font: 700 12px/1 ui-sans-serif, system-ui;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: #1b3d5e
        }

        .fact-title {
          font: 800 clamp(28px, 5vw, 44px)/1.05 ui-sans-serif, system-ui;
          margin: 0
        }

        .fact-sub {
          font: 600 clamp(15px, 2vw, 18px)/1.6 ui-sans-serif, system-ui;
          max-width: 70ch;
          color: #1c1c1c
        }

        /* FILAS SIMÉTRICAS */
        .fact-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          /* columnas idénticas */
          grid-template-areas: "media copy";
          /* orden base */
          gap: 36px;
          align-items: center;
        }

        .fact-row--invert {
          grid-template-areas: "copy media";
        }

        /* invierte solo áreas, mantiene tamaños */
        @media (max-width:940px) {

          .fact-row,
          .fact-row--invert {
            grid-template-columns: 1fr;
            grid-template-areas: "media" "copy";
            /* mismo ancho en móvil */
            gap: 22px;
          }
        }

        /* MEDIA: MISMO TAMAÑO SIEMPRE */
        .fact-media {
          grid-area: media;
          margin: 0;
        }

        .fact-media-frame {
          background: linear-gradient(180deg, #171c42 0%, #0f1431 100%);
          border-radius: var(--radius);
          padding: 14px;
          box-shadow: var(--shadow);
          overflow: hidden;
          aspect-ratio: var(--media-ratio);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .fact-media-frame img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          /* cambia de cover a contain */
          border-radius: calc(var(--radius) - 8px);
        }

        @media (hover:hover) {
          .fact-media-frame:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 48px rgba(10, 16, 40, .28)
          }
        }

        /* COPY */
        .fact-copy {
          grid-area: copy;
          display: grid;
          gap: 16px
        }

        .fact-badges {
          display: flex;
          flex-wrap: wrap;
          gap: 8px
        }

        .badge {
          background: #0f1431;
          color: var(--ink);
          border: 1px solid rgba(255, 255, 255, .12);
          border-radius: 999px;
          padding: 6px 10px;
          font: 700 12px/1 ui-sans-serif, system-ui;
        }

        .badge-soft {
          background: #12214a
        }

        .badge-ok {
          background: #0a291a;
          color: var(--ok);
          border-color: #1b4a33
        }

        .fact-h3 {
          font: 800 clamp(22px, 3.6vw, 32px)/1.1 ui-sans-serif, system-ui;
          margin: 6px 0 0
        }

        .fact-list {
          list-style: none;
          margin: 0;
          padding: 0;
          display: grid;
          gap: 10px;
          font: 600 16px/1.45 ui-sans-serif, system-ui
        }

        .fact-list li {
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: start;
          column-gap: 10px
        }

        .fact-list .ico {
          width: 22px;
          height: 22px;
          flex: none;
          border-radius: 50%;
          background: linear-gradient(180deg, #0a291a, #0e3b25);
          outline: 2px solid #1b4a33;
          position: relative;
        }

        .fact-list .ico::after {
          content: "";
          position: absolute;
          inset: 0;
          background:
            radial-gradient(circle at 50% 50%, var(--ok) 0 2px, transparent 3px),
            conic-gradient(from 315deg at 50% 55%, var(--ok) 0 25%, transparent 0);
          mask: radial-gradient(circle at 50% 50%, #000 0 50%, transparent 52%);
          opacity: .95;
        }

        /* CTA */
        .fact-cta {
          display: grid;
          justify-items: center;
          text-align: center
        }

        .fact-cta p {
          font: 800 clamp(22px, 4vw, 28px)/1.2 ui-sans-serif, system-ui;
          max-width: 70ch;
          margin: 0
        }

        /* REVEAL */
        .reveal {
          opacity: 0;
          transform: translateY(18px);
          transition: opacity .6s ease, transform .6s ease
        }

        .reveal.is-in {
          opacity: 1;
          transform: none
        }

        @media (prefers-reduced-motion:reduce) {
          .reveal {
            transition: none
          }
        }