/* GENERADO por sitio/design/sistema/exportar-tema.py. No se edita a mano. */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url("/wp-content/themes/avada-child/fuentes/mona-sans-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/wp-content/themes/avada-child/fuentes/geist-mono-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "CX Iconos Solid"; font-style: normal; font-weight: 900; font-display: block; src: url("data:font/woff2;base64,d09GMgABAAAAAAh4AAwAAAAAD9QAAAgnAUuF4wAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGYACBVBEICpZwkUYBNgIkA2ALMgAEIAWCFAcgGyUMUZSLVUX288A2pjZ8IECMTMoyLsqB8RXMzzM5W1CkH3Br/0bd2IChN1o5rssouOyNXRicKLMa7U170yasCIz+v4FfEUc0vPua0oAnHDjna/gAQvrV//+/c2mBHT4PLCfkrEv/UXI5orRjaDsEdVMEQs+YdoTtAMDN6BlLr/9NFaxkO6xn1bK/VwAQACpAJoEgMfD+snzpyAHyMgCqOP03JsuXl5C34JjNUzEGuJX8VKGekJy8ABTYQAYgt0MBmxcNjCfkmiKcLBNiWWy6SLUScspPrZNoqHJ1Ovntc9I599yVL3668NOLP735c+HPs3491RP0jN9b5Dwmwn9ExB/ED8THxFPiPnGLOEPMJiYS3cQIooFI14zSVGqGqD9W78cnAALYhPSEUqKNkXkRVQnSk2myBTBedpqpBAQpIERkGVVqIGbFgAIQXTIzatJZU4yoFlNp+qpQ1GjUrkPZqCIMKZRKUlKQpKyPkVTIrDLiDENls8KgRVG33KrRxpqfirr9HJnmE/TOAIK8gAlR/g0xApwDF3VR8Q0+KoQ5dodooulDu0iK3nY0xUkdPG5hnIE9qYzUizfYg6KOZrDPUD9HjvEJrKgGnA/DhACC8AEO+kDm3X5YyoqpvEBSMc6o4nkDMwKxShDHRT+AWzzmpR/FVMLxJv4EjiM75AKMk24LNwnbFiuJlLLu4DVR41W9E2FpP0lRvoCBYYKMnyOH+CpoYPes7du52A8whKlFf6MahknU7kNckuvgsxptz5PfESNcWIjynwhHuWPiCZ5GeBeoswDA4TjwHUT2EHCfYoLZuT2VCepanr9R2BqwMDuSp04fjbiOlWaYrOKcGhMdCM9nj7LsBy4NuK0nomcUw3zAZftPskgwn0d4AybcRvTewXGRYYK4uA2Akg4IYyDSLPaGojfMW/BtnBFzY9HSh5HRIQq78Eb3NijdfQ9vpbi+2G4+Dt9J4+GwEKXvM/jZ8Gg8UvIo6kbwrYNE5sdxMcicarvmJHMWyoPXC4OplyLAhftJogj/Rn9+lY6LkewjW7wKHCtuI9t9mLDdwEgRARK8bFxRRnUdSab9viyJOpjiPKyiBhEFNIO0RwLlPuTxPr2ToMWTysgsqKOhsQihwNktwdnuAqbdT3ez+Yxocx/PaD6WHhZf518TXuGcR9NaTmRSBdxWhekYt+blbPAY2e47ODWnbdIVDJAuZ2C7gb0UxptqSFTwcX4xyPNE0m0RrPkqRVQmAoCh62KXWrxWRd0ZAZIaBqE0n84RDExwvxgm1NK3BoInLlheQ/iIeII/LhzlWPKnzEN6bsirud0eTLug2jlv3klcz1l9RYt5/lJMqK2VNILkFJ/GO5Zt0uVfem+8x7gp4Xd0aRmGlH8kZEgMvXcpv1YXnEIPH/LoPWWszjt16g8/eHVsmaUvJZnVgyEzH82/EjwYszpmWswahYuJg5hLsUZEvM3Bd/IKFbKE9UVyecLXd7shLyNBpihar17478tvJzzrqKmRe+QDsJAIGz4gb5AhuwtExmp7e/tiS91e3Vxt3TZkm7UampbUhdvgQu8l/60lgbR9Pbl2N2ye1NHh8bz9dpdy4wtKZVcs9hwlTthOFJQBcEG6zo1lDfICb8Vn6O4lgG5rRUdS3kT55w4HHPlyUb9Fo16ejPXZa01rgK1XXtq4EavQhITVWK7+1KhCPEaJcHAJGMBP0q6Cbw8nxoYIIhRbYGBLU6fm/n4LP97Zdezc267cqdOTwL5hQ+RDMrHSPx9qP3NtDJtV5jA2fVYwypwQ+mf0dh8F7L/W/rQN+02Lr6TKSoroPnZt5qYzvWPryGnLB2njEizlFhe5QnQ9attqJa79Ddtmv29WtpVOdE1c9YSmuLNYWW7bIE1y8r4j93oubVmyZ5KmK76ptVbXma/umtQaa5iwa4PNtmGGbZjtX7s1fgY3jMsCqYsH+bfUdPG7FskqYJ+aF9oY+0LsXuI3hvLONJLdG6IC3wzNrj2v4cvmOWycDUzvXh1YkVNcW1s8bUhb25Dc4prdcmnpiBGlWTWZZUv6pnnTekNqnOaNiWdyJ2pUr2Zm3/XiH2BxP6DvKDeqXstI5+H7a3L5yw2RGOIj68mX2dpOUN5p/YiIiXxI3KmS3GnQNEr2WPY0rdxTAl8+HGeaoh/ozv/jD7ZQQoCSHgP1U0zjXImTrHJ38oMHiBqVJmlrqMSKOeuRsWkOArXkXtV1VEoTtX1sirwkna4QRp/91Q4ZB2754Szu39vsVfrHRbYM/B8/O+m7Ku93k+Cx4J2bjzhr1RlznW9hob1+59+9Wn5MSppTYP13fGak7yP4IC6kTlA7yMRVBQz5nuNvUMcLznzVrAgX4o6qVEnkDTKvCHLSVKoijuSVvUmqJrvsNryYTNU+6sbcVePHv+9ddWP1qpa2Vd7161aDf0/YP+9ktP+EAQmOgnr5QI/sLL261jlj9q057ebeMYWAIPC+dSs+GenwI6OIIb+hSgkAALw7Z4EAAPD577tje/59rTjkMQCgIBkBv3wY6lw92pA29u9TolFioBIHEJwGSMiShQBQCvYo23/sTzhIdfQ0gh1l0xjzf+zpRg0uSnO1oRxwCHi50h8s62ktWQuyHITV2hwJjePhsrrnUjC7qsxU08wzw3iscWaxSeOWzqbSVFNK0hJeY83UyGQmOQppZeKGjBlmGcum6c4QUVsNmaLRuYkwSY5AZjG48Dvc0KZGPac2qRTy5RAr0y7Ya0YjojP7wXhhvDEbC7FmC7AR6DdKG6mZfuSX63mHSQAAAAA=") format("woff2"); unicode-range: U+20, U+F002, U+F005, U+F00C, U+F015, U+F023, U+F03D, U+F044, U+F04B, U+F05A, U+F095, U+F0A0, U+F0A1, U+F0AC, U+F0B1, U+F0C2, U+F0E7, U+F1B2, U+F1B3, U+F1CD, U+F1D8, U+F233, U+F274, U+F4AD; }
@font-face { font-family: "CX Iconos Marcas"; font-style: normal; font-weight: 400; font-display: block; src: url("data:font/woff2;base64,d09GMgABAAAAAAXkAAwAAAAACcQAAAWWAUuF4wAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGYAB0EQgKjAyJOgE2AiQDLAsYAAQgBYIYByAbiQcoHoXpFrs1TTL+yTfr/8dN/76EWlLHq7R4RYSaOZ3YOUs2TzYHKj5zgX1xBUF2+0EOWaYJF0YaUBCV8BP0/3NN3qwCJFJ9Ine3/IukvcNRNFXQcDzQ5tmssSnao4DmswbimVtzDrdAEOmysUCGr4gergwQANgCAAAABggQEIABB32LtoAFAMpF7QCQ0bi/gdiq4hhY4NDWU7jTWoH6kT4YXTNfExCPoBQAAgBAMWg3AEjsHCwIeKhDzOFA43M4woHz4wobjPnop46f+n4O+WX6YLOZH2nvMRTlsNChx0FmP2M/bme07SHfAgTdjcxmSWQSCAKnGGAOgJcC5FzOiwAHAB/ZFoA3cfSROVpYC4M41mJv3JonFEc6OgUJcUdJB7sfMGofYcscQDh9kGza67pLBiMcIJhL7sZiHVBqgwCow3KdYOw8eY5gBOpjTSZEz/dHILKCQDRJoj0E8wyAABKIyKwrmleRiAATe5A+wOyj2hB9o9rP8QinKYnoCZLVj+kBOi5Qr3oDginXk2wB88Tl8teEZ24gtFt+AdGu11+nGRD9kmT9z/pORu1V7iMJnDzCHKAPsvupNgLR4+N7COYQAIGTQE5cJNnzh6dg+L0WA+U2GbbrVRjBRJzxGDe6INpz4qByrymSZMN372+sKH+HfU29Yoz0a/YqfYW5RJkoHWOgR9iyMUo0+yp1F6O4Y/Qep113Jl7N2MvKb7+uHJmYoWmvp8cF4wrDnjMMQzAMc2oXb5dINzpJUUBR1NQYf0yu332aZUmWZc/uFe7teA3UK4LJLq04gWgTyVayJmQqfsG8AsqfX1rBP1+h5+tFun28XTGGPYYUhg4g2neEZEsA/zDS83QUyB87L9cLR0iar28hgEA6MvKO03w+EMw+ALKirLTlC37Xjt1fSruMKwxGgmBku0S6SQBKPCbXvyZJVrnXdWQGbZ7hXeQ1wqYDpv1fKr1yF8SWyNw8lzcWcwo2OUtf/mhCopetL34qEfFj/W0a34uMrohWlfhbQEif60djiIy0QIXKM/6Uq69XQGRiZuLo+ie1YWbGztuOghtpX46MKUbHnyXtnu2Scs9Em/kheIAQ70PuScaUbvF/Qtu/UjxsO+GBErcJV3Zmlg+Hp1dmBszaZ01KM6e32Ni/iPxLjtVSP0S5fdk4GP2zq63vY9+ADyM+OsV7+W4DtE7fukV+Zpl2yXDdNifekjwnry6prs63Wo22vyvxvtW52QvkQ8NJthJWH9B1y7o4x/wOjnfr7ASNpajqQPIYr/TgjUV9saloUyEcDWnUaE6OkiUJF7nZu3OCHwRmwf+CmnBiBeH3YAfX51bM3dAku7mscPUFdGN2xewNjcbPTRnlLFBZKAXOUcor32hXevHVGKYSeK3UfnMlKSy0Up+8Q8aV5/4tLFsaTXXtSro2mpjv4al9EVdL07W1NYbcvt5cyDplo709ueGPIpxT0pxa9o8wOiRvVVLUdnqlzTfvXBxfnB4O/V0sb7O2xm1U1iBvUZec+G/ZXB4Oe5IertWC4Od82PphUV1RelxyUqRjyNYtBSq3Dfy4KrjwW304F+B81vhLhlPfjF1WpT+Zjnu4a8/qq+JiHR3ilt4zDZWxOuiAdL05qz/Z/vjwfw0Ocb9Z22AAAPDugqUbAAA+/306APO1DEbXAMAasFn5Rq4fsCQAACxoS5JILA9dA5WJzpnsXcQgCuQRAhI6WcgPuSNfISeuBWjgCRwbANgAYIgQSGwQYWAPh3I57qIswc0FSDFg0GJaXTp0mkdCpYWaRLoB/XZwsoXaDAv0DbwAEsXQQjytedqcg5poQSfxoF90i0a8V4CFzxOgkX4kSmTJHTgF0vFgAWBPUcmGrBgEYDjr8sKhRXXDi0M6zNfLQWcyJFNsOHRZ5neIAQA=") format("woff2"); unicode-range: U+20, U+F081, U+F082, U+F08C, U+F099, U+F0E1, U+F167, U+F16D, U+F232, U+F39E, U+F431; }
/* GENERADO por generar-css.py desde tokens.json. No se edita a mano. */
:root {
  --fondo: #ffffff;
  --nube: #f4f7fc;
  --superficie: #ffffff;
  --linea: #e1e6eb;
  --linea-control: #8894a1;
  --tinta: #0b0f14;
  --texto: #1a1f26;
  --texto-2: #4a5560;
  --texto-3: #5f6b76;
  --azul: #0070c9;
  --on-azul: #ffffff;
  --azul-profundo: #005aa3;
  --azul-suave: #eef5fc;
  --chip-texto: #0b2540;
  --hero: #0070c9;
  --on-hero: #ffffff;
  --noche: #0b2540;
  --verde: #2a8500;
  --on-verde: #ffffff;
  --ambar: #b36b00;
  --ambar-suave: #fbf1dc;
  --acierto: #00785a;
  --acierto-suave: #e1f3ec;
  --aviso: #8a6100;
  --aviso-suave: #fbf1dc;
  --error: #e02735;
  --error-fuerte: #be2026;
  --error-suave: #fff1f2;
  --terminal: #0a1320;
  --terminal-texto: #dde6ee;
  --terminal-acento: #5aabf5;
  --hero-brillo: #4da3ff;
  --foco: #0b2540;
  --sombra-flotante: 0 16px 48px rgba(11, 37, 64, 0.12);
  --anillo-foco: 0 0 0 2px #ffffff, 0 0 0 4px #0b2540;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 120px;
  --contenedor: 1280px;
  --medida-lectura: 688px;
  --margen-movil: 20px;
  --margen-escritorio: 40px;
  --radio-sm: 6px;
  --radio-control: 10px;
  --radio-tarjeta: 16px;
  --radio-destacada: 24px;
  --radio-bloque: 32px;
  --radio-capsula: 999px;
  --font-sans: "Mona Sans", Rubik, Arial, Helvetica, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root.cx-auto:not([data-tema="claro"]) {
    color-scheme: dark;
    --fondo: #0b1622;
    --nube: #0f1c2a;
    --superficie: #132435;
    --linea: #233a50;
    --linea-control: #5f7489;
    --tinta: #f3f7fb;
    --texto: #dde6ee;
    --texto-2: #b3c1ce;
    --texto-3: #97a8b8;
    --azul: #5aabf5;
    --on-azul: #0b1622;
    --azul-profundo: #8cc6fa;
    --azul-suave: #12304d;
    --chip-texto: #d3e8fd;
    --verde: #62c43d;
    --on-verde: #0b1622;
    --ambar: #f0b13c;
    --ambar-suave: #3a2a0b;
    --acierto: #3fc8c0;
    --acierto-suave: #0e3226;
    --aviso: #e7b84a;
    --aviso-suave: #3a2a0b;
    --error: #ff7a82;
    --error-fuerte: #ff7a82;
    --error-suave: #3d1418;
    --terminal: #050b14;
    --foco: #ffffff;
    --sombra-flotante: 0 16px 48px rgba(0, 0, 0, 0.5);
    --anillo-foco: 0 0 0 2px #0b1622, 0 0 0 4px #ffffff;
  }
}
[data-tema="oscuro"], .cx-oscuro {
  color-scheme: dark;
  --fondo: #0b1622;
  --nube: #0f1c2a;
  --superficie: #132435;
  --linea: #233a50;
  --linea-control: #5f7489;
  --tinta: #f3f7fb;
  --texto: #dde6ee;
  --texto-2: #b3c1ce;
  --texto-3: #97a8b8;
  --azul: #5aabf5;
  --on-azul: #0b1622;
  --azul-profundo: #8cc6fa;
  --azul-suave: #12304d;
  --chip-texto: #d3e8fd;
  --verde: #62c43d;
  --on-verde: #0b1622;
  --ambar: #f0b13c;
  --ambar-suave: #3a2a0b;
  --acierto: #3fc8c0;
  --acierto-suave: #0e3226;
  --aviso: #e7b84a;
  --aviso-suave: #3a2a0b;
  --error: #ff7a82;
  --error-fuerte: #ff7a82;
  --error-suave: #3d1418;
  --terminal: #050b14;
  --foco: #ffffff;
  --sombra-flotante: 0 16px 48px rgba(0, 0, 0, 0.5);
  --anillo-foco: 0 0 0 2px #0b1622, 0 0 0 4px #ffffff;
}

/* Sistema de diseño Conexcol v2: componentes (tarjetas BC6jGeqo, 08Y80vRB). Todo color, radio y espacio sale
   de las variables de sistema.css, generado de tokens.json. Clases cx-. Misma hoja que el artefacto. */
.cx-ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.125em; }
.cx-mono { font-family: var(--font-mono); }

/* Botón: cápsula, peso 500, frase normal. `compra` = verde, sólo para contratar. */
.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radio-capsula); border: 1px solid transparent; font: 500 15px/20px var(--font-sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; white-space: nowrap; }
.cx-btn:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.cx-btn:active { transform: scale(.98); }
.cx-btn-sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; line-height: 18px; }
.cx-btn-compra { background: var(--verde); color: var(--on-verde); }
.cx-btn-compra:hover { filter: brightness(.93); }
.cx-btn-principal { background: var(--azul); color: var(--on-azul); }
.cx-btn-principal:hover { background: var(--azul-profundo); }
.cx-btn-tinta { background: var(--tinta); color: var(--fondo); }
.cx-btn-tinta:hover { opacity: .88; }
.cx-btn-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linea); }
.cx-btn-secundario:hover { border-color: var(--linea-control); }
.cx-btn-suave { background: var(--azul-suave); color: var(--azul-profundo); }
.cx-btn-suave:hover { background: var(--azul); color: var(--on-azul); }
/* Sin lavado de fondo: el blanco del 8 % dejaba el texto de 15 px en 4,43:1 sobre el hero (xaLvs4TU). */
.cx-btn-contorno-claro { background: transparent; color: var(--on-hero); border-color: rgba(255,255,255,.55); }
.cx-btn-contorno-claro:hover { background: var(--on-hero); color: var(--hero); }
.cx-btn-claro { background: var(--on-hero); color: var(--hero); }
.cx-btn-claro:hover { opacity: .92; }
.cx-btn-enlace { min-height: auto; padding: 0; background: none; color: var(--azul); border: 0; border-radius: 0; }
.cx-btn-enlace:hover { color: var(--azul-profundo); }
.cx-btn .cx-ico { transition: transform .15s; }
.cx-btn:hover .cx-ico.flecha { transform: translateX(2px); }

/* Iconos de Font Awesome (KZTxzKRt). Avada servía 151 KB de fuentes (fa-solid-900, fa-brands-400) para una docena de
   iconos. El tema hijo sirve un recorte con los glifos que usa el sitio («CX Iconos», caras en exportar-tema.py) y los
   iconos lo piden primero; si falta un glifo, el navegador cae en la fuente completa de Avada y sólo entonces la baja.
   `body` gana a `.fa`/`.fas`/`.fab` de Avada y pierde con sus reglas de nombres viejos (`.fa.fa-x`), que se quedan como
   estaban salvo las de las marcas que usa el sitio, nombradas aquí. */
body :is(.fa, .fas) { font-family: "CX Iconos Solid", "Font Awesome 5 Free"; }
body :is(.fab, .fa.fa-twitter, .fa.fa-twitter-square, .fa.fa-facebook-f, .fa.fa-facebook-square, .fa.fa-instagram, .fa.fa-youtube, .fa.fa-youtube-square, .fa.fa-linkedin, .fa.fa-linkedin-in, .fa.fa-whatsapp) { font-family: "CX Iconos Marcas", "Font Awesome 5 Brands"; }

/* Chip, insignia */
.cx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radio-capsula); background: var(--azul-suave); color: var(--chip-texto); font: 500 13px/18px var(--font-sans); }
.cx-chip-neutro { background: transparent; color: var(--texto-2); box-shadow: inset 0 0 0 1px var(--linea); }
.cx-chip-mono { font-family: var(--font-mono); font-size: 12px; }
.cx-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cx-ins { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--radio-capsula); font: 500 13px/18px var(--font-sans); }
.cx-ins-acierto { background: var(--acierto-suave); color: var(--acierto); }
.cx-ins-aviso { background: var(--aviso-suave); color: var(--aviso); }
.cx-ins-error { background: var(--error-suave); color: var(--error-fuerte); }
.cx-ins-info { background: var(--azul-suave); color: var(--azul-profundo); }
.cx-ins-promo { background: var(--ambar-suave); color: var(--aviso); }

/* Rótulo técnico (mono) y titulares */
.cx-rot { margin: 0 0 var(--space-3); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
.cx-rot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 2px; background: currentColor; vertical-align: 1px; }

/* Navegación: fija, translúcida */
.cx-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--margen-escritorio); height: 64px; background: color-mix(in srgb, var(--fondo) 78%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--linea); }
.cx-nav-logo { height: 30px; display: block; }
.cx-nav-logo.oscuro { display: none; }
[data-theme="dark"] .cx-nav-logo.claro, [data-tema="oscuro"] .cx-nav-logo.claro, .cx-oscuro .cx-nav-logo.claro { display: none; }
[data-theme="dark"] .cx-nav-logo.oscuro, [data-tema="oscuro"] .cx-nav-logo.oscuro, .cx-oscuro .cx-nav-logo.oscuro { display: block; }
@media (prefers-color-scheme: dark) { :root.cx-auto:not([data-tema="claro"]) .cx-nav-logo.claro { display: none; } :root.cx-auto:not([data-tema="claro"]) .cx-nav-logo.oscuro { display: block; } }
.cx-nav-links { display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none; flex: 1; }
.cx-nav-links a { color: var(--texto-2); text-decoration: none; font: 500 14px/20px var(--font-sans); white-space: nowrap; }
.cx-nav-links a:hover { color: var(--tinta); }
.cx-nav-acc { display: flex; gap: var(--space-2); align-items: center; }
@media (max-width: 1024px) { .cx-nav-links { display: none; } .cx-nav { padding: 0 var(--margen-movil); justify-content: space-between; } }

/* El circuito de la marca, como variable: lo usan el Hero y las pieles de página (IEwzpDJu). */
:root { --textura-circuito: url("data:image/svg+xml,%3Csvg width=%22304%22 height=%22304%22 viewBox=%220 0 304 304%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2a5 5 0 1 0-2 0V82h64v-2h-62V21.9zm16 16a5 5 0 1 0-2 0V66h48v-2h-46V37.9zm-128 96a5 5 0 1 0-2 0V210h16v10.1a5 5 0 1 0 2 0V208h-16v-74.1zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9a5 5 0 1 0-2 0V144H53.9a5 5 0 1 0 0 2H98v-44.1zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9a5 5 0 1 0-2 0V64H80v64H69.9a5 5 0 1 0 0 2H82V66h32V37.9zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9a5 5 0 1 0-2 0V162h16v30h-16v66h48v46h2v-48h-48v-62h16v-34h-16v-10.1zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66.0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.172l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.513L175.586 80H224V21.9a5 5 0 1 1 2 0V82h-49.586L146 112.414V188.1zm16 32a5 5 0 1 1-2 0v-99.513L184.586 96H300.1a5.004 5.004.0 0 1 3.9-3.9v2.07a3.004 3.004.0 0 0 0 5.66v2.07a5.004 5.004.0 0 1-3.9-3.9H185.414L162 121.414V220.1zm-144-64a5 5 0 1 1-2 0v-3.513l48-48V48h32V0h2v50H66v55.413l-48 48v2.687zM50 53.9a5 5 0 1 0-2 0v42.686l-48 48V210h28.1a5 5 0 1 0 0-2H2v-62.586l48-48V53.9zm-16 16a5 5 0 1 0-2 0v18.686l-32 32v2.828l34-34V69.9zM12.1 32a5 5 0 1 1 0 2H9.414L0 43.414v-2.828L8.586 32H12.1zm265.8 18a5 5 0 1 1 0-2h18.686L304 40.586v2.828L297.414 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.413l16-16v2.827l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.586L40.586 194H21.9a5 5 0 1 1 0-2h19.513L66 216.586V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.598L56.598 162H37.9a5 5 0 1 1 0-2h19.502L98 200.598V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.586L48.586 178H21.9a5 5 0 1 1 0-2h27.513L82 208.586V258H53.9zM97 1e2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM34 39.793V0h-2v40.586L8.586 64H0v2h9.413L34 41.414v-1.62zM2 300.1V258h14v46h2v-48H0v46.17A3.004 3.004.0 0 1 3.83 304H5.9a5.004 5.004.0 0 0-3.9-3.9zM34 241v63h-2v-62H0v-2h34v1zM17 18h1V0h-2v16H0v2h17zm273-2V0h-2v18h16v-2h-14zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.002 5.002.0 0 1 6 97a5.002 5.002.0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32a5 5 0 0 0-9.8.0h2.07a3.004 3.004.0 0 1 5.66.0h2.07zM5.9.0A5.002 5.002.0 0 1 0 5.9V3.83A3 3 0 0 0 3.83.0H5.9zm294.2.0a5 5 0 0 0 3.9 5.9V3.83A3.004 3.004.0 0 1 302.17.0h-2.07zm3.9 300.1a5.004 5.004.0 0 0-3.9 3.9h2.07a3.016 3.016.0 0 1 1.83-1.83v-2.07z%22 fill=%22%23ffffff%22 fill-opacity=%22.08%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E"); }
/* Hero v2: el azul como bloque metido en el margen, radio `radio-bloque` */
.cx-hero { position: relative; overflow: hidden; isolation: isolate; margin: var(--space-4); border-radius: var(--radio-bloque); background: var(--hero); color: var(--on-hero); padding: var(--space-9) var(--margen-escritorio) var(--space-8); }
.cx-hero::after { content: ""; position: absolute; z-index: -1; width: 70%; height: 140%; right: -20%; top: -60%; background: radial-gradient(closest-side, var(--hero-brillo), transparent); opacity: .35; pointer-events: none; }
:root { --cx-pulsos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='1.2'%3E%3Cpath d='M1000 90H820V160H600'/%3E%3Cpath d='M1000 240H900V200H700V262H520'/%3E%3Cpath d='M1000 380H760V320H560'/%3E%3Cpath d='M640 0V118H760'/%3E%3Cpath d='M880 500V420H980'/%3E%3Cpath d='M1000 455H860V470H700'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.55'%3E%3Crect x='597' y='157' width='6' height='6' rx='1'/%3E%3Crect x='517' y='259' width='6' height='6' rx='1'/%3E%3Crect x='557' y='317' width='6' height='6' rx='1'/%3E%3Crect x='757' y='115' width='6' height='6' rx='1'/%3E%3Crect x='977' y='417' width='6' height='6' rx='1'/%3E%3Crect x='697' y='467' width='6' height='6' rx='1'/%3E%3C/g%3E%3Cg%3E%3Ccircle r='9' fill='%23fff' fill-opacity='.18'/%3E%3Ccircle r='2.6' fill='%23fff'/%3E%3CanimateMotion dur='4.8s' begin='0s' repeatCount='indefinite' path='M1000 90H820V160H600'/%3E%3Canimate attributeName='opacity' values='0;1;1;0' keyTimes='0;.12;.86;1' dur='4.8s' begin='0s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Ccircle r='9' fill='%23fff' fill-opacity='.18'/%3E%3Ccircle r='2.6' fill='%23fff'/%3E%3CanimateMotion dur='6.2s' begin='-1.6s' repeatCount='indefinite' path='M1000 240H900V200H700V262H520'/%3E%3Canimate attributeName='opacity' values='0;1;1;0' keyTimes='0;.12;.86;1' dur='6.2s' begin='-1.6s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Ccircle r='9' fill='%23fff' fill-opacity='.18'/%3E%3Ccircle r='2.6' fill='%23fff'/%3E%3CanimateMotion dur='5.4s' begin='-3.1s' repeatCount='indefinite' path='M1000 380H760V320H560'/%3E%3Canimate attributeName='opacity' values='0;1;1;0' keyTimes='0;.12;.86;1' dur='5.4s' begin='-3.1s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Ccircle r='9' fill='%23fff' fill-opacity='.18'/%3E%3Ccircle r='2.6' fill='%23fff'/%3E%3CanimateMotion dur='3.6s' begin='-0.8s' repeatCount='indefinite' path='M640 0V118H760'/%3E%3Canimate attributeName='opacity' values='0;1;1;0' keyTimes='0;.12;.86;1' dur='3.6s' begin='-0.8s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Ccircle r='9' fill='%23fff' fill-opacity='.18'/%3E%3Ccircle r='2.6' fill='%23fff'/%3E%3CanimateMotion dur='6.2s' begin='-4.4s' repeatCount='indefinite' path='M1000 240H900V200H700V262H520'/%3E%3Canimate attributeName='opacity' values='0;1;1;0' keyTimes='0;.12;.86;1' dur='6.2s' begin='-4.4s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3Ccircle r='9' fill='%23fff' fill-opacity='.18'/%3E%3Ccircle r='2.6' fill='%23fff'/%3E%3CanimateMotion dur='5.0s' begin='-2.2s' repeatCount='indefinite' path='M1000 455H860V470H700'/%3E%3Canimate attributeName='opacity' values='0;1;1;0' keyTimes='0;.12;.86;1' dur='5.0s' begin='-2.2s' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E"); }
.cx-hero.textura::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: var(--textura-circuito); background-size: 304px; opacity: .07; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.cx-hero .cx-rot { color: var(--on-hero); }
.cx-hero h1 { margin: 0; max-width: 16ch; font: 500 56px/58px var(--font-sans); letter-spacing: -.035em; text-wrap: balance; }
.cx-hero-ent { margin: var(--space-5) 0 0; max-width: 46ch; font-size: 20px; line-height: 30px; letter-spacing: -.005em; opacity: .92; }
.cx-hero-acc { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cx-hero-prueba { margin: var(--space-6) 0 0; font: 500 13px/18px var(--font-mono); opacity: .85; }
.cx-hero.abierto { margin: 0; border-radius: 0; background: var(--fondo); color: var(--tinta); }
.cx-hero.abierto::after { display: none; }
.cx-hero.abierto .cx-rot { color: var(--azul); }
.cx-hero.abierto .cx-hero-ent { color: var(--texto-2); opacity: 1; }
.cx-hero.abierto .cx-hero-prueba { color: var(--texto-3); opacity: 1; }
@media (max-width: 640px) { .cx-hero { margin: var(--space-2); border-radius: var(--radio-destacada); padding: var(--space-8) var(--margen-movil) var(--space-7); } .cx-hero h1 { font-size: 36px; line-height: 40px; } .cx-hero-ent { font-size: 18px; line-height: 27px; } }

/* Hero en Avada (Z4cyTBTe, ADR 0024). Un contenedor de Avada con la clase `cx-hero` (y `textura`,
   el circuito) es el Hero de arriba, en cualquier página. El contenido sólo pone la clase y sus
   elementos —título h1, texto `cx-hero-ent`, botones del catálogo con `clase="cx-btn cx-btn-claro"`
   o `cx-btn-contorno-claro`, el buscador de dominios, texto `cx-hero-prueba`— y el aspecto sale de
   aquí: ni <style> en la página ni colores, tamaños o márgenes puestos a mano en los elementos.
   Avada pinta el contenedor con --awb-* en línea, que sólo !important redefine. El bloque se mete en
   el margen: el contenedor de ancho completo sobresale --hundredp_padding y se le devuelve. */
#main .fusion-fullwidth.cx-hero {
	--awb-background-color: var(--hero) !important;
	background-color: var(--hero) !important;
	--awb-padding-top: var(--space-8) !important;
	--awb-padding-bottom: var(--space-8) !important;
	margin: var(--space-4) calc(var(--space-4) - var(--hundredp_padding, 30px)) 0 !important;
	padding-left: calc(var(--hundredp_padding, 30px) - var(--space-4)) !important;
	padding-right: calc(var(--hundredp_padding, 30px) - var(--space-4)) !important;
	border-radius: var(--radio-bloque);
	overflow: hidden !important;
	color: var(--on-hero);
}
#main .fusion-fullwidth.cx-hero > :is(.awb-background-mask, .awb-background-pattern) { display: none; }
/* Avada suma 20 px bajo cada columna: el ritmo lo ponen los márgenes de abajo. */
#main .fusion-fullwidth.cx-hero .fusion-layout-column { margin-bottom: 0 !important; }
/* La entradilla puede traer el subtítulo y su párrafo (páginas de planes, YNy3v2az): el segundo se separa del primero. */
#main .fusion-fullwidth.cx-hero .cx-hero-ent p + p { margin-top: var(--space-3); }
/* Un enlace en la entradilla, en el blanco del hero y subrayado: en azul no se veía (clúster y windows, YNy3v2az). */
#main .fusion-fullwidth.cx-hero .cx-hero-ent a { color: var(--on-hero); text-decoration: underline; text-underline-offset: 3px; }
/* El circuito que David aprobó en la portada (IEwzpDJu): a .07 no se veía. */
#main .fusion-fullwidth.cx-hero.textura::before { opacity: .5; }
/* El hero del índice del blog (2hCO1Bdn) lo imprime el tema hijo fuera de #main: la misma textura que los de Avada. */
.cx-hero.textura.cx-blog-cabecera::before { opacity: .5; }
/* Avada pinta los h1 con su color global, que gana al del hero: el título iba en tinta sobre el azul (medido a 1440). Y el
   texto, alineado con la columna de contenido del sitio (1170 px), como en los heroes de Avada. */
.cx-hero.cx-blog-cabecera h1 { max-width: 22ch; color: var(--on-hero); }
@media (min-width: 1025px) { .cx-hero.cx-blog-cabecera { padding-left: max(var(--margen-escritorio), calc((100% - var(--site_width, 1170px)) / 2)); padding-right: max(var(--margen-escritorio), calc((100% - var(--site_width, 1170px)) / 2)); } }
/* Nada de opacidad sobre texto: el blanco a .85 sobre el azul se queda en 4,1:1. */
#main .fusion-fullwidth.cx-hero .fusion-title { margin: 0 !important; --awb-text-color: var(--on-hero); }
#main .fusion-fullwidth.cx-hero :is(p, li, span, del, label) { color: var(--on-hero); }
#main .fusion-fullwidth.cx-hero h1 { max-width: none; }
#main .fusion-fullwidth.cx-hero .cx-hero-ent { margin: var(--space-5) 0 0; opacity: 1; }
#main .fusion-fullwidth.cx-hero .cx-hero-ent p { margin: 0; max-width: 46ch; text-wrap: pretty; font-size: var(--awb-typography3-font-size); line-height: var(--awb-typography3-line-height); letter-spacing: var(--awb-typography3-letter-spacing); font-weight: var(--awb-typography3-font-weight); }
/* Acciones: la oferta breve encima de cada botón. En el hero el precio va en el botón. */
#main .fusion-fullwidth.cx-hero .fusion-builder-row-inner { margin-top: var(--space-6); }
#main .fusion-fullwidth.cx-hero :is(.cxl-hb-offer__precio, .cxl-hb-offer__detalles) { display: none; }
#main .fusion-fullwidth.cx-hero .cxl-hb-offer { margin: 0 0 var(--space-3); font-size: 14px; line-height: 20px; }
#main .fusion-fullwidth.cx-hero .cxl-hb-offer__plazo { font-size: 13px; }
#main .fusion-fullwidth.cx-hero .cxl-hb-offer__badge { padding: 2px 10px; border-radius: var(--radio-capsula); background: var(--on-hero); color: var(--hero) !important; font: 500 12px/18px var(--font-sans); }
#main .fusion-fullwidth.cx-hero .cx-btn { min-height: 48px; align-self: flex-start; white-space: nowrap; }
#main .fusion-fullwidth.cx-hero form.domain { margin-top: var(--space-5); }
#main .fusion-fullwidth.cx-hero form.domain input.domain { height: 52px; border-radius: var(--radio-capsula) !important; padding-left: var(--space-5) !important; box-shadow: 0 1px 2px rgba(11, 37, 64, .06); }
#main .fusion-fullwidth.cx-hero .cx-hero-prueba { margin: var(--space-5) 0 0; opacity: 1; }
#main .fusion-fullwidth.cx-hero .cx-hero-prueba p { margin: 0; font: 500 13px/20px var(--font-mono); }
#main .fusion-fullwidth.cx-hero .cx-hero-prueba a { color: var(--on-hero); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
	#main .fusion-fullwidth.cx-hero { margin-top: var(--space-2) !important; margin-left: calc(var(--space-2) - var(--hundredp_padding, 30px)) !important; margin-right: calc(var(--space-2) - var(--hundredp_padding, 30px)) !important; padding-left: calc(var(--hundredp_padding, 30px) - var(--space-2)) !important; padding-right: calc(var(--hundredp_padding, 30px) - var(--space-2)) !important; border-radius: var(--radio-destacada); --awb-padding-top: var(--space-6) !important; --awb-padding-bottom: var(--space-6) !important; }
	#main .fusion-fullwidth.cx-hero h1 { font-size: 36px !important; line-height: 40px !important; }
	#main .fusion-fullwidth.cx-hero .cx-btn { align-self: stretch; width: 100%; white-space: normal; text-align: center; padding: 12px var(--space-4); }
	#main .fusion-fullwidth.cx-hero .fusion-builder-row-inner .fusion-layout-column + .fusion-layout-column { margin-top: var(--space-5); }
}

/* Franja de llamada en Avada (B6xtYNmR, ADR 0024). Un contenedor de Avada con la clase `cx-franja` (y
   `noche` para la variante oscura) es la franja de llamada del sistema en cualquier página: bloque de
   marca metido en el margen, título, entradilla (`cx-ent`) y botón de Avada en cápsula `claro`. El
   contenido no pone colores: título, texto y botón leen las variables de Avada que la franja redefine
   (--awb-text-color y --button_*), que Avada escribe en línea y sólo !important sobrescribe. */
#main .fusion-fullwidth.cx-franja {
	--awb-background-color: var(--hero) !important;
	background-color: var(--hero) !important;
	--awb-padding-top: var(--space-8) !important;
	--awb-padding-bottom: var(--space-8) !important;
	margin: var(--space-8) calc(var(--space-4) - var(--hundredp_padding, 30px)) var(--space-4) !important;
	padding-left: calc(var(--hundredp_padding, 30px) - var(--space-4)) !important;
	padding-right: calc(var(--hundredp_padding, 30px) - var(--space-4)) !important;
	border-radius: var(--radio-bloque);
	overflow: hidden !important;
	isolation: isolate;
	background-attachment: scroll !important;
	background-image: radial-gradient(closest-side at 10% 110%, color-mix(in srgb, var(--hero-brillo) 45%, transparent), transparent) !important;
	color: var(--on-hero);
}
#main .fusion-fullwidth.cx-franja.noche { --awb-background-color: var(--noche) !important; background-color: var(--noche) !important; }
#main .fusion-fullwidth.cx-franja > :is(.fullwidth-faded, .awb-background-mask, .awb-background-pattern) { display: none; }
#main .fusion-fullwidth.cx-franja :is(.fusion-title, .fusion-text) { --awb-text-color: var(--on-hero); }
#main .fusion-fullwidth.cx-franja .fusion-title h2 { max-width: 18ch; }
/* Un título escrito como <h2> dentro de un texto (no como título de Avada) lo pinta el color global del h2: en la
   franja, en on-hero también (lo vio la sesión SEO en /wordpress/, XCphI9le). */
#main .fusion-fullwidth.cx-franja .fusion-text :is(h1, h2, h3) { color: var(--on-hero); }
/* Los enlaces del texto, en on-hero y subrayados: con el color de enlace global salían azul sobre azul (1,00:1, lo midió
   la sesión SEO en las copias de la fase 4, xaLvs4TU). Un botón del catálogo dentro de un texto tiene su propia cápsula. */
#main .fusion-fullwidth.cx-franja .fusion-text a:not(.cx-btn, .fusion-button) { color: var(--on-hero); text-decoration: underline; text-underline-offset: 3px; }
#main .fusion-fullwidth.cx-franja .fusion-button { --button_gradient_top_color: var(--on-hero) !important; --button_gradient_bottom_color: var(--on-hero) !important; --button_gradient_top_color_hover: var(--on-hero) !important; --button_gradient_bottom_color_hover: var(--on-hero) !important; --button_accent_color: var(--hero) !important; --button_accent_hover_color: var(--hero) !important; --button_border_color: transparent !important; --button_border_hover_color: transparent !important; }
#main .fusion-fullwidth.cx-franja .fusion-button:hover { opacity: .92; }
/* La acción, abajo a la derecha, como en el componente. */
#main .fusion-fullwidth.cx-franja .fusion-layout-column:has(.fusion-button) .fusion-column-wrapper { align-items: flex-end; text-align: right; }
@media (max-width: 640px) {
	#main .fusion-fullwidth.cx-franja { margin: var(--space-7) calc(var(--space-2) - var(--hundredp_padding, 30px)) var(--space-2) !important; padding-left: calc(var(--hundredp_padding, 30px) - var(--space-2)) !important; padding-right: calc(var(--hundredp_padding, 30px) - var(--space-2)) !important; --awb-padding-top: var(--space-7) !important; --awb-padding-bottom: var(--space-7) !important; border-radius: var(--radio-destacada); }
	/* La columna de la acción se apila bajo el texto: el botón sigue su eje, no se va a la derecha (ki7yp8gg). */
	#main .fusion-fullwidth.cx-franja .fusion-layout-column:has(.fusion-button) .fusion-column-wrapper { align-items: flex-start; text-align: left; }
}

/* Sección en Avada (xaLvs4TU, fase 4 mRgxBykY). Un contenedor de Avada con la clase `cx-sec` (y `cx-sec-nube` para el
   fondo nube) es la sección del sistema: el ritmo vertical (space-9, space-8 en móvil) y el fondo salen de aquí, no de
   los parámetros de cada contenedor. Avada escribe --awb-padding-* y --awb-background-color en línea y sólo !important
   las sobrescribe; en móvil tampoco pinta con la variable, así que el fondo va también explícito. Los lados son de Avada. */
#main .fusion-fullwidth.cx-sec {
	--awb-padding-top: var(--space-9) !important;
	--awb-padding-bottom: var(--space-9) !important;
	--awb-background-color: var(--fondo) !important;
	background-color: var(--fondo) !important;
}
#main .fusion-fullwidth.cx-sec.cx-sec-nube { --awb-background-color: var(--nube) !important; background-color: var(--nube) !important; }
@media (max-width: 640px) {
	#main .fusion-fullwidth.cx-sec { --awb-padding-top: var(--space-8) !important; --awb-padding-bottom: var(--space-8) !important; }
}

/* Tira de datos clave en Avada (FP5vR72I, fase 4). Un contenedor de Avada con la clase `cx-datos` es la tira que va bajo
   el hero con los datos clave en una línea («2 vCPU · 3 GB · 60 GB SSD desde … · Activación inmediata»): nube, compacta
   y centrada, con las cifras en negrita en tinta. No es `cx-tira`, que es la tira de tecnologías. El :is() pesa como
   `.cx-sec.cx-datos`, así que gana a la sección (también en móvil) aunque el contenido lleve las dos clases. */
#main .fusion-fullwidth:is(.cx-datos, .cx-sec.cx-datos) {
	--awb-padding-top: var(--space-5) !important;
	--awb-padding-bottom: var(--space-5) !important;
	--awb-background-color: var(--nube) !important;
	background-color: var(--nube) !important;
}
#main .fusion-fullwidth.cx-datos .fusion-layout-column { margin-bottom: 0 !important; }
#main .fusion-fullwidth.cx-datos .fusion-text { text-align: center; }
#main .fusion-fullwidth.cx-datos .fusion-text p { margin: 0; font-size: 15px; line-height: 24px; color: var(--texto-2); text-wrap: balance; }
#main .fusion-fullwidth.cx-datos .fusion-text :is(b, strong) { font-weight: 600; color: var(--tinta); }

/* Tarjeta en Avada (xaLvs4TU). Una columna de Avada con la clase `cx-tar` (y `cx-tar-destacada` la recomendada) es la
   tarjeta del sistema: la caja va en la envoltura de la columna, el título es un título de Avada (h3 o h4) y el texto un
   texto de Avada. La página no pone fondo, borde, radio ni relleno. La regla estática `.cx-tar` también alcanza a la
   columna, que aquí deja de ser caja para no dibujar una dentro de otra, y vuelve a la dirección de fila de Avada: en
   columna, la envoltura no se encoge para caber con su margen de separación y las tarjetas se pegan. */
#main .fusion-layout-column.cx-tar { align-self: stretch !important; flex-direction: row; padding: 0; background: none; border: 0; border-radius: 0; gap: 0; }
#main .fusion-layout-column.cx-tar > .fusion-column-wrapper { flex: 1 1 auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: var(--space-5) !important; box-shadow: none; }
#main .fusion-layout-column.cx-tar.cx-tar-destacada > .fusion-column-wrapper { border-color: transparent; box-shadow: 0 0 0 2px var(--azul); }
#main .cx-tar .fusion-title { margin: 0 0 var(--space-3) !important; --awb-text-color: var(--tinta); }
/* Con `.fusion-layout-column` y `.fusion-title-heading`, para pesar más que el tema hijo (`.fusion-body #wrapper .fusion-title
   h3:not(…)`, font-size: 1em): un título h3 salía a los 24 px que Avada da a ese nivel (bZ26IzuU). El tamaño y el alto de
   línea, con !important: Avada escribe `line-height:1.25` en línea, y por debajo de 1100 px su tipografía adaptable pone
   el tamaño con !important según el nivel (`.fusion-responsive-typography-calculated`). */
#main .fusion-layout-column.cx-tar .fusion-title :is(h3, h4).fusion-title-heading { margin: 0; font: 600 18px/24px var(--font-sans); font-size: 18px !important; line-height: 24px !important; letter-spacing: -.01em; text-transform: none; }

/* Icono de tarjeta en Avada (bZ26IzuU). Un `<span class="cx-tar-ico">` con un SVG de trazo (viewBox de 20, color
   `currentColor`), en un [fusion_code] al principio de la columna: Avada no tiene elemento para un SVG en línea. */
#main .cx-tar .cx-tar-ico { margin: 0 0 var(--space-4); flex: none; }
#main .cx-tar .cx-tar-ico svg { width: 20px; height: 20px; display: block; }
/* Apiladas, cuatro tarjetas con el icono sobre el título alargan la página sin decir nada más: en móvil el icono va a
   la izquierda del título y el texto, debajo, ocupa todo el ancho. */
@media (max-width: 640px) {
	#main .fusion-layout-column.cx-tar > .fusion-column-wrapper:has(> .cx-tar-ico) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; align-content: start; }
	#main .fusion-layout-column.cx-tar > .fusion-column-wrapper:has(> .cx-tar-ico) > .cx-tar-ico { margin: 0; }
	#main .fusion-layout-column.cx-tar > .fusion-column-wrapper:has(> .cx-tar-ico) > .fusion-title { margin: 0 !important; }
	#main .fusion-layout-column.cx-tar > .fusion-column-wrapper:has(> .cx-tar-ico) > :not(.cx-tar-ico, .fusion-title) { grid-column: 1 / -1; }
}
/* El título de una sección y su texto (y68m7Tq7). En escritorio Avada deja el título con margen 0 y la entradilla quedaba
   pegada al h2 (0 px medidos en /registrador-acreditado-co/; en móvil son 20). Lo mismo un acordeón o un vídeo que siguen al
   título. Como en el bloque noche: 12 px. */
@media (min-width: 641px) {
	#main .fusion-fullwidth:is(.cx-sec, .cx-franja) .fusion-title:has(> h2):has(+ :is(.fusion-text, .accordian, .fusion-video)) { margin-bottom: var(--space-3) !important; }
}
/* Una cabecera que acaba en entradilla, seguida de tarjetas: 32 px, no los 20 del margen de columna de Avada, que las
   pegaban al texto (ywdQhE2W, /cloud/). Como la rejilla y la tira bajo su entradilla. */
#main .fusion-fullwidth.cx-sec .fusion-layout-column:has(> .fusion-column-wrapper > .fusion-text.cx-ent:last-child):has(+ .fusion-layout-column.cx-tar) { margin-bottom: var(--space-6); }
/* Un título que abre otro grupo de tarjetas dentro de la sección («Horarios de atención» tras los canales, /contacto/,
   LXZv0ZDY) iba a 28 px de la fila de encima: 48. */
#main .fusion-fullwidth.cx-sec .fusion-layout-column.cx-tar + .fusion-layout-column:not(.cx-tar):has(> .fusion-column-wrapper > .fusion-title:first-child) { margin-top: var(--space-7); }
/* Una tarjeta con imagen arriba y botón abajo (yXPsycCp, /wordpress/): la imagen ocupa el ancho de la tarjeta, con radio
   y aire hasta el título (iba pegada); el botón, en su propio texto de Avada, va al pie, para que los de una fila queden
   alineados aunque los textos midan distinto. El envoltorio de la columna ya es flex en columna. */
#main .fusion-layout-column.cx-tar .fusion-imageframe { display: block; margin: 0 0 var(--space-4); border-radius: var(--radio-control); overflow: hidden; }
#main .fusion-layout-column.cx-tar .fusion-imageframe img { display: block; width: 100%; height: auto; }
/* Una lista `cx-lista` en el texto de la tarjeta (0dkYhIaT, /cloud/licencias/), separada de lo de antes y de lo de después. */
#main .fusion-layout-column.cx-tar .fusion-text .cx-lista { margin: var(--space-4) 0; }
#main .fusion-layout-column.cx-tar > .fusion-column-wrapper > .fusion-text:last-child:has(> p.cx-accion:only-child) { margin-top: auto; }
/* Más planes (yXPsycCp): bajo una tabla de planes, «¿No encontraste el que necesitabas?» es una fila con la frase y un
   botón al resto, no otra franja azul. */
#main .fusion-fullwidth.cx-mas { --awb-padding-top: var(--space-5) !important; --awb-padding-bottom: var(--space-7) !important; }
#main .fusion-fullwidth.cx-mas p.cx-accion { align-items: center; margin: 0; }
#main .fusion-fullwidth.cx-mas p.cx-accion > span { font-size: 17px; line-height: 26px; color: var(--texto-2); }
/* Chips bajo una entradilla y pie de tarjeta (qcFnlzWd, /hosting/): la fila de chips sin las viñetas ni márgenes de Avada;
   el pie, el último texto de la columna, al fondo de la tarjeta, tras un filete y en letra técnica. */
#main .fusion-text.cx-ent + .cx-chips { margin: var(--space-5) 0 0; padding: 0; list-style: none; }
#main .fusion-text.cx-ent + .cx-chips li { margin: 0; }
#main .fusion-layout-column.cx-tar > .fusion-column-wrapper > .fusion-text.cx-tar-pie:last-child { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--linea); }
#main .fusion-layout-column.cx-tar .fusion-text.cx-tar-pie p { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .02em; color: var(--texto-3); }
/* Tabla de planes (cxl-planes, d45umSPh): las tablas con pestañas de hosting, reseller y clúster. Su estilo iba en un <style>
   dentro de cada página, cinco veces; aquí, con tokens. La cabecera, en letra técnica sobre nube en toda la fila (la azul
   maciza acababa antes de la columna del botón y la dejaba en blanco), el plan en tinta y fijo al desplazar, filetes en
   `linea`. Los botones de compra no se tocan: ya van en verde. */
#main .cxl-planes { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--space-3); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); }
#main .cxl-planes table { border-collapse: collapse; width: 100%; min-width: 1100px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--tinta); font-variant-numeric: tabular-nums; }
#main .cxl-planes caption { text-align: left; padding: 10px 14px; font-weight: 700; color: var(--tinta); }
#main .cxl-planes :is(th, td) { padding: 9px 10px; border: 0; border-bottom: 1px solid var(--linea); text-align: center; white-space: nowrap; vertical-align: middle; }
#main .cxl-planes thead :is(th, td) { position: sticky; top: 0; background: var(--nube); color: var(--texto-3); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
#main .cxl-planes tbody th { position: sticky; left: 0; text-align: left; background: var(--superficie); color: var(--tinta); font-weight: 600; }
#main .cxl-planes tbody tr:last-child :is(th, td) { border-bottom: 0; }
#main .cxl-planes .cxl-planes__promo { color: var(--acierto); }
#main .cxl-planes .cxl-hb-precio--revision { display: inline-block; padding: 2px 6px; border-radius: var(--radio-sm); background: var(--aviso-suave); color: var(--aviso); font-weight: 700; white-space: normal; }
/* La tabla comparativa de /cloud/ (.ct-tabla, NaLCirs6), con la misma cabecera: salía azul (#005aa3, del plugin de catálogo)
   con el texto en gris oscuro (texto-2, del tema hijo), casi ilegible. Y el bloque de oferta de las tarjetas de planes (.ccx)
   sin margen: así lo dejaba un reset que la tabla filtraba a toda la página; acotado el reset, el aviso «−30 %» saltaba de
   línea en dos de las cuatro tarjetas. */
#main .ct .ct-tabla thead :is(th, td) { position: sticky; top: 0; background: var(--nube); color: var(--texto-3); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
#main .ccx .cxl-hb-offer { margin: 0; }
/* Los demás y Conexcol (qiCk1QNo, /wordpress/): en una tarjeta, «los demás» en una lista con un aspa tenue, sin las viñetas de
   Avada, y Conexcol aparte, tras un filete. Sustituye a unas barras de progreso que no medían nada. */
#main .cx-tar ul.cx-no { margin: var(--space-4) 0; padding: 0; list-style: none; }
#main .cx-tar ul.cx-no li { position: relative; margin: 0 0 var(--space-2); padding-left: var(--space-5); font-size: 15px; line-height: 24px; color: var(--texto-2); }
#main .cx-tar ul.cx-no li::before { content: "×"; position: absolute; left: 0; color: var(--texto-3); }
#main .cx-tar p.cx-si { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--linea); font-weight: 600; color: var(--tinta); }

/* La rejilla técnica, como variable: dos familias de líneas de 1 px, cada 48 (bZ26IzuU). */
:root { --textura-rejilla: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); }

/* Sección noche en Avada (bZ26IzuU, dirección visual PxqHqN8v). Un contenedor de Avada con `cx-sec cx-sec-noche` es la
   sección de infraestructura: un bloque azul noche metido en el margen, como el hero y la franja, con la rejilla técnica
   y un resplandor. Lo de dentro toma de aquí sus colores: títulos, textos y enlaces en on-hero, tarjetas `cx-tar` de
   filete translúcidas, rótulo e icono en el brillo y botón de Avada en cápsula clara. Nada de opacidad sobre texto: el
   secundario es una mezcla sólida de on-hero y noche. */
#main .fusion-fullwidth.cx-sec.cx-sec-noche {
	--awb-background-color: var(--noche) !important;
	background-color: var(--noche) !important;
	--awb-padding-top: var(--space-8) !important;
	--awb-padding-bottom: var(--space-8) !important;
	margin: var(--space-8) calc(var(--space-4) - var(--hundredp_padding, 30px)) 0 !important;
	padding-left: calc(var(--hundredp_padding, 30px) - var(--space-4)) !important;
	padding-right: calc(var(--hundredp_padding, 30px) - var(--space-4)) !important;
	border-radius: var(--radio-bloque);
	overflow: hidden !important;
	isolation: isolate;
	background-attachment: scroll !important;
	background-image: var(--textura-rejilla), radial-gradient(55% 70% at 88% 0%, color-mix(in srgb, var(--hero-brillo) 30%, transparent), transparent 70%) !important;
	background-size: 48px 48px, 48px 48px, 100% 100% !important;
	background-position: -1px -1px, -1px -1px, 0 0 !important;
	background-repeat: repeat, repeat, no-repeat !important;
	color: var(--on-hero);
}
#main .fusion-fullwidth.cx-sec.cx-sec-noche > :is(.fullwidth-faded, .awb-background-mask, .awb-background-pattern) { display: none; }
#main .fusion-fullwidth.cx-sec.cx-sec-noche :is(.fusion-title, .fusion-text) { --awb-text-color: var(--on-hero); }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .fusion-text :is(h1, h2, h3, h4) { color: var(--on-hero); }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .fusion-text a:not(.cx-btn, .fusion-button) { color: var(--on-hero); text-decoration: underline; text-underline-offset: 3px; }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .cx-rot { color: var(--hero-brillo); }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .fusion-layout-column.cx-tar > .fusion-column-wrapper { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.16); }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .cx-tar .fusion-title { --awb-text-color: var(--on-hero); }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .cx-tar .fusion-text p:not(.cx-rot) { color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
/* El último párrafo no deja aire debajo: ya lo pone el relleno de la tarjeta (eran 44 px abajo contra 24 arriba). */
#main .fusion-fullwidth.cx-sec.cx-sec-noche .cx-tar .fusion-text:last-child p:last-child { margin-bottom: 0; }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .cx-tar-ico { background: color-mix(in srgb, var(--hero-brillo) 16%, transparent); color: var(--hero-brillo); }
/* El bloque es una pieza cerrada: 32 px entre la cabecera, la fila de tarjetas y el pie; nada bajo la última columna. */
#main .fusion-fullwidth.cx-sec.cx-sec-noche > .fusion-builder-row > .fusion-layout-column { margin-bottom: var(--space-6) !important; }
#main .fusion-fullwidth.cx-sec.cx-sec-noche > .fusion-builder-row > .fusion-layout-column:last-child { margin-bottom: 0 !important; }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .fusion-text p:has(> a.cx-btn) { margin: var(--space-5) 0 0; }
/* El ritmo de la cabecera, sin depender de una piel (Pys2dhWU): el título se separa de lo que sigue, y el instrumento,
   de la entradilla que lo presenta. Sólo tras una entradilla: tras un texto con su propio margen, el hueco se doblaba. */
#main .fusion-fullwidth.cx-sec.cx-sec-noche .fusion-title:has(> h2) { margin: 0 0 var(--space-3) !important; }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .fusion-text.cx-ent + .cx-ping { margin-top: var(--space-6); }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .fusion-button { --button_gradient_top_color: var(--on-hero) !important; --button_gradient_bottom_color: var(--on-hero) !important; --button_gradient_top_color_hover: var(--on-hero) !important; --button_gradient_bottom_color_hover: var(--on-hero) !important; --button_accent_color: var(--azul) !important; --button_accent_hover_color: var(--azul) !important; --button_border_color: transparent !important; --button_border_hover_color: transparent !important; }
#main .fusion-fullwidth.cx-sec.cx-sec-noche .fusion-button:hover { filter: brightness(.94); }
@media (max-width: 640px) {
	#main .fusion-fullwidth.cx-sec.cx-sec-noche { margin: var(--space-7) calc(var(--space-2) - var(--hundredp_padding, 30px)) 0 !important; padding-left: calc(var(--hundredp_padding, 30px) - var(--space-2)) !important; padding-right: calc(var(--hundredp_padding, 30px) - var(--space-2)) !important; --awb-padding-top: var(--space-7) !important; --awb-padding-bottom: var(--space-7) !important; border-radius: var(--radio-destacada); }
	/* Apiladas, las tarjetas van a 16 px una de otra. */
	#main .fusion-fullwidth.cx-sec.cx-sec-noche > .fusion-builder-row > .fusion-layout-column.cx-tar { margin-bottom: var(--space-4) !important; }
	#main .fusion-fullwidth.cx-sec.cx-sec-noche > .fusion-builder-row > .fusion-layout-column.cx-tar:has(+ :not(.cx-tar)) { margin-bottom: var(--space-6) !important; }
}

/* Pie de página (v43kxtub). El área de widgets de Avada es un bloque noche liso en todo el sitio: lleva la rejilla técnica
   y el resplandor de la sección noche, y un filete de luz en el borde de arriba. Con movimiento, una luz lo recorre de
   izquierda a derecha (más abajo). El color de fondo sigue siendo el de las opciones de Avada. */
.fusion-footer .fusion-footer-widget-area { position: relative; isolation: isolate; overflow: hidden; background-image: var(--textura-rejilla), radial-gradient(50% 60% at 88% 0%, color-mix(in srgb, var(--hero-brillo) 22%, transparent), transparent 70%); background-size: 48px 48px, 48px 48px, 100% 100%; background-position: -1px -1px, -1px -1px, 0 0; background-repeat: repeat, repeat, no-repeat; }
.fusion-footer .fusion-footer-widget-area::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hero-brillo) 55%, transparent) 50%, transparent); pointer-events: none; }

/* Cifras de prueba en Avada (ACx0W34A, dirección visual PxqHqN8v). Un contador de Avada (fusion_counters_box) con la
   clase `cx-cifras`: cada cifra en una tarjeta de filete, con el número en el estilo `cifra`, la unidad («%», «+») en
   azul y la frase en `descripcion`. Avada las flota con columnas de Bootstrap y un clearfix; aquí van en rejilla. */
#main .fusion-counters-box.cx-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
#main .fusion-counters-box.cx-cifras::before, #main .fusion-counters-box.cx-cifras::after { display: none; }
#main .fusion-counters-box.cx-cifras .fusion-counter-box { width: auto !important; float: none; padding: 0; margin: 0; }
#main .fusion-counters-box.cx-cifras .counter-box-container { height: 100%; box-sizing: border-box; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); padding: var(--space-5); text-align: left; }
/* Cifras proporcionales: las tabulares de Mona Sans llevan el 1 con base, y aquí el número se exhibe, no se alinea. */
#main .fusion-counters-box.cx-cifras .content-box-counter { font: 500 48px/48px var(--font-sans); letter-spacing: -.03em; color: var(--tinta); }
#main .fusion-counters-box.cx-cifras .content-box-counter :is(.display-counter, .unit) { font: inherit; letter-spacing: inherit; color: inherit; }
#main .fusion-counters-box.cx-cifras .content-box-counter .unit { color: var(--azul); }
#main .fusion-counters-box.cx-cifras .counter-box-content { margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--linea); font: 400 15px/24px var(--font-sans); color: var(--texto-2); text-align: left; }
@media (max-width: 800px) {
	#main .fusion-counters-box.cx-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	#main .fusion-counters-box.cx-cifras .counter-box-container { padding: var(--space-4); }
	#main .fusion-counters-box.cx-cifras .content-box-counter { font-size: 36px; line-height: 40px; }
}

/* Tira de prensa en Avada (ACx0W34A). Un contenedor de Avada con `cx-prensa` es la tira «Conexcol en los medios», bajo el
   hero: un rótulo, una frase (`cx-ent`) y los logos en fila (`cx-prensa-logos`, en un [fusion_code]), en gris, que
   recuperan su color al pasar. Sin título grande: es una prueba, no una sección. */
#main .fusion-fullwidth.cx-prensa { --awb-padding-top: var(--space-7) !important; --awb-padding-bottom: 0px !important; --awb-background-color: var(--fondo) !important; background-color: var(--fondo) !important; }
#main .fusion-fullwidth.cx-prensa .fusion-layout-column { margin-bottom: 0 !important; }
#main .cx-prensa-logos { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-5); margin: var(--space-5) 0 0; }
#main .cx-prensa-logo { display: block; flex: 0 1 auto; min-width: 0; filter: grayscale(1) contrast(1.3); transition: filter .2s ease; }
/* El tamaño de cada logo viene del marcado (`width` y `height` en la imagen), no de aquí: un nombre largo y fino y un sello
   cuadrado no pesan lo mismo a igual alto, y esa medida es de cada logo. Esta regla sólo deja que se encoja. No le pongas
   un ancho, ni `auto`: ganaría al atributo, y un SVG sin ancho dentro de un flex se queda en 0. */
#main .cx-prensa-logo img { display: block; max-width: 100%; height: auto; mix-blend-mode: multiply; }
#main .cx-prensa-logo:hover, #main .cx-prensa-logo:focus-visible { filter: none; }
#main .cx-prensa-logo:focus-visible { outline: none; border-radius: var(--radio-sm); box-shadow: var(--anillo-foco); }
/* Entre el móvil y el escritorio los nueve no caben en una fila sin quedar ilegibles: fluyen a la izquierda. */
@media (max-width: 1024px) {
	#main .cx-prensa-logos { flex-wrap: wrap; justify-content: flex-start; gap: var(--space-5) var(--space-6); }
}
@media (max-width: 640px) {
	#main .cx-prensa-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: start; gap: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
	#main .cx-prensa-logo { transition: none; }
}

/* Entradilla en Avada (yt8Pc4Zx, ADR 0024). Un texto de Avada con la clase `cx-ent`, bajo un h1 o una
   cabecera de sección, es el estilo `entradilla` de tokens.json, que en Avada es el juego de letra 3:
   la página no le pone tamaño. Guarda el color que el texto trae de Avada (--awb-text-color, blanco en
   una franja oscura) y se centra si el texto está centrado en Avada (--awb-content-alignment). */
#main .cx-ent p { margin: 0; max-width: 56ch; font-size: var(--awb-typography3-font-size); line-height: var(--awb-typography3-line-height); letter-spacing: var(--awb-typography3-letter-spacing); font-weight: var(--awb-typography3-font-weight); color: var(--awb-text-color, var(--texto-2)); text-wrap: pretty; }
#main .cx-ent p + p { margin-top: var(--space-3); }
#main .cx-ent[style*="--awb-content-alignment:center"] p { margin-inline: auto; }
@media (max-width: 640px) { #main .cx-ent p { font-size: 18px; line-height: 27px; } }

/* Tarjeta de plan en Avada (ormB0nH2, ADR 0024). Una columna de Avada con la clase `cx-plan` (y `destacado` la
   recomendada) es la tarjeta de precio del sistema (cx-precio v2), en cualquier página. Su texto lleva el rótulo
   (`cx-plan-eti`), el nombre en h3, para quién es (`cx-plan-para`), la oferta del catálogo, las especificaciones
   (`cx-plan-specs`) y lo incluido (`cx-plan-incluye`); después, el botón del catálogo `cx-btn cx-btn-compra`.
   La página no pone fondo, borde, radio, relleno, colores ni tamaños. */
/* Todas las tarjetas de la fila a la misma altura, con el botón al pie, aunque la fila alinee arriba. */
#main .fusion-layout-column.cx-plan { align-self: stretch !important; }
#main .fusion-layout-column.cx-plan > .fusion-column-wrapper { flex: 1 1 auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-destacada); padding: var(--space-6) var(--space-5) !important; justify-content: flex-start !important; align-items: stretch !important; text-align: left; }
#main .fusion-layout-column.cx-plan.destacado > .fusion-column-wrapper { box-shadow: 0 0 0 2px var(--azul); border-color: transparent; }
#main .cx-plan .fusion-text { margin: 0 0 var(--space-6); text-align: left; }
#main .cx-plan .fusion-text :where(p, h3, div) { margin: 0; text-align: left; }
#main .cx-plan .fusion-text > * + * { margin-top: var(--space-3); }
#main .cx-plan .cx-plan-eti { font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
#main .cx-plan .fusion-text h3 { font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; text-transform: none; color: var(--tinta); }
#main .cx-plan .cx-plan-para { font-size: 15px; line-height: 22px; color: var(--texto-2); }
/* La oferta del catálogo con la escala `precio`: la cifra en tinta, lo demás en texto-3. */
#main .cx-plan .cxl-hb-card__offer { margin-top: var(--space-4); }
#main .cx-plan .cxl-hb-offer { margin: 0; color: var(--texto-3); }
#main .cx-plan .cxl-hb-offer__precio { margin: var(--space-2) 0 var(--space-1) !important; }
/* La cifra se ajusta al ancho de la tarjeta (cuatro por fila en /hosting/): «$230.020 /mes» en una línea. */
#main .fusion-layout-column.cx-plan > .fusion-column-wrapper .fusion-text { container-type: inline-size; }
#main .cx-plan .cxl-hb-offer__precio strong { font: 500 clamp(28px, 15cqi, 44px)/1.1 var(--font-sans); letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
#main .cx-plan .cxl-hb-offer__badge { padding: 2px 10px; border-radius: var(--radio-capsula); background: var(--acierto-suave); color: var(--acierto); font: 500 12px/18px var(--font-sans); }
#main .cx-plan .cxl-hb-offer__detalles summary { color: var(--azul); }
#main .cx-plan .cx-plan-specs { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--linea); font: 500 14px/22px var(--font-mono); color: var(--tinta); }
#main .cx-plan .cx-plan-incluye { font-size: 13px; line-height: 20px; color: var(--texto-2); }
#main .cx-plan .cx-plan-incluye strong { font-weight: 600; color: var(--tinta); }
/* Una tarjeta de línea de producto (MdSY6Jqr) lleva arriba una lámina y abajo un botón del sistema que no es el de compra
   del catálogo: «Ver planes». Va en un [fusion_code], hijo directo de la caja, para quedar al pie como el otro. */
#main .cx-plan > .fusion-column-wrapper > .cx-lam { margin: 0 0 var(--space-5); }
#main .cx-plan > .fusion-column-wrapper > a.cx-btn { margin-top: auto; width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px var(--space-4); white-space: normal; text-wrap: balance; text-align: center; }
#main .cx-plan .cx-lista { margin: var(--space-4) 0 0; padding: 0; }
#main .cx-plan .cx-lista li { margin: 0; }
#main .cx-plan a.cx-btn[data-cxl-cta] { margin-top: auto; width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px var(--space-4); white-space: normal; text-wrap: balance; text-align: center; }
/* La portada (psyFc0RX): la recomendada lleva su rótulo sobre el borde, a la altura del anillo, y no dentro de la
   tarjeta, donde descuadraba la fila (con el nombre de la línea al lado, en tableta saltaba de línea). Se coloca contra el
   texto de la tarjeta, que es su bloque contenedor: sube el relleno de la tarjeta y medio rótulo. Lo incluido puede llevar
   un subtítulo (`cx-plan-sub`), con la letra del rótulo, y la tarjeta una nota tras el botón (`cx-plan-nota`). */
#main .cx-plan .fusion-text:has(.cx-plan-reco) { position: relative; }
#main .cx-plan .cx-plan-reco { position: absolute; top: calc(-1 * var(--space-6) - 12px); left: 0; padding: 4px 10px; border-radius: var(--radio-capsula); background: var(--azul); color: var(--on-azul); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
#main .cx-plan .cx-plan-sub { margin-top: var(--space-4); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
#main .cx-plan .cx-plan-sub + .cx-plan-incluye { margin-top: var(--space-2); }
#main .cx-plan > .fusion-column-wrapper > .fusion-text.cx-plan-nota { margin: var(--space-3) 0 0; }
#main .cx-plan .cx-plan-nota p { font-size: 12px; line-height: 17px; color: var(--texto-3); }
/* Prueba de compras (XVZ08D1m): la franja «Compras verificadas» bajo el hero de la portada (ETStd4PN). Su
   script sólo lee y escribe los data-cxsp-* y el atributo hidden; el aspecto sale de aquí, alineado al borde del
   contenido como el resto de la página: rótulo técnico, cifra, nota y enlace. */
.cx-prueba[hidden] { display: none !important; }
.cx-prueba { margin: var(--space-5) 0 0; }
#main .cx-prueba :where(p) { margin: 0; }
.cx-prueba-in { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); max-width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-5); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); }
.cx-prueba-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); min-width: 0; }
.cx-prueba-rot { font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
.cx-prueba-tit { font: 500 16px/24px var(--font-sans); color: var(--tinta); }
.cx-prueba-nota { font: 400 13px/18px var(--font-sans); color: var(--texto-3); }
.cx-prueba-cta { font: 500 14px/20px var(--font-sans); color: var(--azul); text-decoration: none; white-space: nowrap; }
.cx-prueba-cta:hover { color: var(--azul-profundo); text-decoration: underline; text-underline-offset: 3px; }
.cx-prueba-cta:focus-visible { outline: none; border-radius: var(--radio-sm); box-shadow: var(--anillo-foco); }

/* Tarjetas de plan en HTML, al estándar de la tarjeta del sistema (kSJ4jwVg). Las landings y el plugin pintan sus
   tarjetas con HTML propio (catálogo y combos del plugin y /vps/: .cxa-precio; migración: .cxm .plan; planes VPS:
   .ccx .card; SSL: .cxa-ssl-cert). Sin tocar su HTML, se ven como cx-plan: la caja con superficie, borde linea y
   radio destacada; la destacada con anillo azul; la insignia como rótulo en Geist Mono azul dentro de la tarjeta; el
   título a 18/600 en tinta. En SSL, sólo el botón de compra («Contratar», cxa-btn--azul) pasa a compra: el fantasma
   «Ver los nueve» quedaba verde con texto azul (1,49:1). #main gana al <style> de cada landing, que va después. Cuando la fase 4 las rehaga con
   Avada y cx-plan, esto sobra. */
#main .cxa-precio { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-destacada); box-shadow: none; padding: var(--space-6) var(--space-5); }
#main .cxa-precio.cxa-precio--dest { border-color: transparent; box-shadow: 0 0 0 2px var(--azul); }
#main .cxa-precio .cxa-precio__eti { position: static; display: inline-block; align-self: flex-start; width: auto; transform: none; margin: 0 0 var(--space-3); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
#main .cxa-precio h3 { font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; text-transform: none; text-align: left; color: var(--tinta); }
#main .cxa-precio .cxa-precio__para { font-size: 15px; line-height: 22px; color: var(--texto-2); }
/* Las especificaciones de estas tarjetas son frases («1 TB/mes · IPv4 colombiana»): en Mona Sans, que en mono se parten. */
#main .cxa-precio .cxa-precio__specs { font: 400 14px/22px var(--font-sans); color: var(--tinta); }
/* La cifra de la oferta, ajustada al ancho de la tarjeta, como en cx-plan: «$162.809 /mes» en una línea. */
#main :is(.cxa-precio, .cxm .plan, .ccx .card) { container-type: inline-size; }
#main :is(.cxa-precio, .cxm .plan, .ccx .card) .cxl-hb-offer__precio strong { font: 500 clamp(28px, 15cqi, 44px)/1.1 var(--font-sans); letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
#main .cxm .plan { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-destacada); box-shadow: none; }
#main .cxm .plan.pop { border-color: transparent; box-shadow: 0 0 0 2px var(--azul); }
#main .cxm .plan .tag { position: static; display: inline-block; align-self: flex-start; width: auto; transform: none; margin: 0 0 var(--space-3); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
#main .cxm .plan h3 { font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; text-transform: none; text-align: left; color: var(--tinta); }
#main .ccx .card { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-destacada); box-shadow: none; }
#main .ccx .card.destacada { border-color: transparent; box-shadow: 0 0 0 2px var(--azul); }
#main .ccx .card .badge { position: static; display: inline-block; align-self: flex-start; width: auto; transform: none; margin: 0 0 var(--space-3); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); margin: var(--space-5) var(--space-5) 0; }
#main .ccx .card .specs-row .v { font: 500 14px/20px var(--font-mono); color: var(--tinta); }
#main .ccx .card .specs-row .l { font: 500 11px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
#main .ccx .card .feats-title { font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
#main .ccx .card :is(.ico, .hi) { color: var(--tinta); }
#main .cxa-ssl-cert { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-destacada); box-shadow: none; }
#main .cxa-ssl-cert.cxa-ssl-cert--dest { border-color: transparent; box-shadow: 0 0 0 2px var(--azul); }
#main .cxa-ssl-cert .cxa-ssl-eti { position: static; display: inline-block; align-self: flex-start; width: auto; transform: none; margin: 0 0 var(--space-3); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
#main .cxa-ssl-cert h4 { font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; text-transform: none; text-align: left; color: var(--tinta); }
#main .cxa-ssl-cert .cxa-ssl-cert__precio { font: 500 28px/32px var(--font-sans); letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
#main .cxa-ssl-cert a.cxa-btn.cxa-btn--azul { background: var(--verde); border: 1px solid transparent; border-radius: var(--radio-capsula); color: var(--on-verde); font: 500 15px/20px var(--font-sans); min-height: 48px; padding: 12px 20px; }
#main .cxa-ssl-cert a.cxa-btn.cxa-btn--azul:hover { background: var(--verde); color: var(--on-verde); filter: brightness(.93); }

/* Botón del catálogo HostBill que pide una clase del sistema: la lleva. El verde de compra del plugin
   deja fuera los `cx-btn` (6t5QSuz4); `#main a…` sólo tiene que ganarle a los enlaces de Avada. */
#main a.cx-btn[data-cxl-cta] { border-radius: var(--radio-capsula); text-decoration: none; line-height: 20px; font-weight: 500; }
#main a.cx-btn[data-cxl-cta]:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
#main a.cx-btn-claro[data-cxl-cta] { background: var(--on-hero); border: 1px solid transparent; color: var(--hero); }
#main a.cx-btn-claro[data-cxl-cta]:hover { color: var(--hero); opacity: .92; }
#main a.cx-btn-contorno-claro[data-cxl-cta] { background: transparent; border: 1px solid rgba(255,255,255,.55); color: var(--on-hero); }
#main a.cx-btn-contorno-claro[data-cxl-cta]:hover { background: var(--on-hero); border-color: var(--on-hero); color: var(--hero); }
#main a.cx-btn-compra[data-cxl-cta] { background: var(--verde); border: 1px solid transparent; color: var(--on-verde); }
#main a.cx-btn-compra[data-cxl-cta]:hover { color: var(--on-verde); filter: brightness(.93); }

/* Sección y cabecera (titular a dos tonos) */
.cx-sec { padding: var(--space-9) var(--margen-escritorio); background: var(--fondo); }
.cx-sec > * { max-width: var(--contenedor); margin-left: auto; margin-right: auto; }
.cx-sec-nube { background: var(--nube); }
.cx-sec-noche { background: var(--noche); color: var(--on-hero); }
@media (max-width: 640px) { .cx-sec { padding: var(--space-8) var(--margen-movil); } }
.cx-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-7); margin-bottom: var(--space-7); }
.cx-cab h2 { margin: 0; max-width: 22ch; font: 500 40px/44px var(--font-sans); letter-spacing: -.03em; color: var(--tinta); text-wrap: balance; }
.cx-cab h2 span { color: var(--texto-3); }
.cx-cab p { margin: var(--space-4) 0 0; max-width: 56ch; font-size: 17px; line-height: 27px; color: var(--texto-2); }
.cx-sec-noche .cx-cab h2, .cx-sec-noche .cx-cab p { color: var(--on-hero); }
.cx-sec-noche .cx-cab h2 span { color: rgba(255,255,255,.62); }
@media (max-width: 640px) { .cx-cab h2 { font-size: 28px; line-height: 32px; } }

/* Tarjeta: borde fino, sin sombra */
.cx-tar { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); color: inherit; text-decoration: none; min-width: 0; transition: border-color .15s; }
a.cx-tar:hover { border-color: var(--linea-control); }
a.cx-tar:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.cx-tar h4 { margin: 0; font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); }
.cx-tar p { margin: 0; font-size: 15px; line-height: 24px; color: var(--texto-2); overflow-wrap: anywhere; }
.cx-tar-ico { width: 40px; height: 40px; border-radius: var(--radio-control); background: var(--azul-suave); color: var(--azul); display: grid; place-items: center; font-size: 20px; }
.cx-tar-pie { margin-top: auto; }
.cx-rejilla { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
/* En el contenido de Avada (LRU0ywXr): la rejilla se separa de la entradilla que la presenta, y los títulos y párrafos
   de sus tarjetas no heredan los márgenes de Avada. */
#main .fusion-text.cx-ent + .cx-rejilla { margin-top: var(--space-6); }
#main .cx-rejilla > a.cx-tar :is(h4, p) { margin: 0; }
/* En móvil, como las columnas de Avada con icono: el icono a la izquierda del título y el texto, debajo, a todo el
   ancho; con el icono en su propia fila, seis tarjetas apiladas alargaban la página 600 px (LRU0ywXr). */
@media (max-width: 640px) {
	#main .cx-rejilla > a.cx-tar:has(> .cx-tar-ico) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; }
	#main .cx-rejilla > a.cx-tar:has(> .cx-tar-ico) > .cx-tar-ico { margin: 0; }
	#main .cx-rejilla > a.cx-tar:has(> .cx-tar-ico) > :not(.cx-tar-ico, h4) { grid-column: 1 / -1; }
}

/* Bento: celdas de tamaños distintos, `radio-destacada` */
.cx-bento { display: grid; gap: var(--space-4); grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); }
.cx-celda { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radio-destacada); background: var(--nube); border: 1px solid var(--linea); grid-column: span 2; min-width: 0; }
.cx-celda.ancha { grid-column: span 4; }
.cx-celda.alta { grid-row: span 2; }
.cx-celda.marca { background: var(--hero); color: var(--on-hero); border-color: transparent; }
.cx-celda.oscura { background: var(--noche); color: var(--on-hero); border-color: transparent; }
.cx-celda h3 { margin: 0; font: 500 24px/30px var(--font-sans); letter-spacing: -.015em; color: inherit; }
.cx-celda:not(.marca):not(.oscura) h3 { color: var(--tinta); }
.cx-celda p { margin: 0; max-width: 40ch; font-size: 15px; line-height: 23px; color: var(--texto-2); }
/* Sin opacidad sobre el texto: a 0,86 el blanco sobre `hero` bajaba de 4,5:1 (HN1K9vsG). */
.cx-celda.marca p, .cx-celda.oscura p { color: inherit; }
.cx-celda > .cx-ico { font-size: 28px; color: var(--azul); margin-bottom: auto; }
.cx-celda.marca > .cx-ico, .cx-celda.oscura > .cx-ico { color: var(--on-hero); }
.cx-celda .cx-cifra-grande { font: 500 64px/1 var(--font-sans); letter-spacing: -.04em; margin-bottom: auto; }
@media (max-width: 860px) { .cx-bento { grid-template-columns: 1fr; } .cx-celda, .cx-celda.ancha { grid-column: auto; } .cx-celda.alta { grid-row: auto; } }

/* Fila destacada: titular a la izquierda, texto o visual a la derecha */
.cx-fila-d { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); padding: var(--space-7) 0; border-top: 1px solid var(--linea); align-items: start; }
.cx-fila-d h3 { margin: 0; font: 500 28px/34px var(--font-sans); letter-spacing: -.02em; color: var(--tinta); }
.cx-fila-d p { margin: 0 0 var(--space-4); font-size: 17px; line-height: 27px; color: var(--texto-2); }
@media (max-width: 860px) { .cx-fila-d { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Tira de tecnologías: nombres reales en mono, sin logotipos inventados */
.cx-tira { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-7); padding: var(--space-6) 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cx-tira-t { font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.cx-tira ul { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); margin: 0; padding: 0; list-style: none; }
.cx-tira li { font: 500 17px/24px var(--font-sans); letter-spacing: -.01em; color: var(--texto-2); }
/* En el contenido de Avada (Scgpccjg): la tira se separa de la entradilla que la presenta; un nombre que enlaza a su
   ficha se lee como los demás, con un subrayado tenue que dice que es enlace (en el azul de Avada, la fila parecía un
   menú); y el texto que la sigue (`cx-tira-pie`) va en letra de nota y con medida, no a todo el ancho. */
#main .fusion-text.cx-ent + .cx-tira { margin-top: var(--space-6); }
#main .cx-tira li a { color: inherit; text-decoration: underline; text-decoration-color: var(--linea-control); text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
#main .cx-tira li a:hover { color: var(--azul); text-decoration-color: currentColor; }
#main .fusion-text.cx-tira-pie { max-width: 72ch; margin-top: var(--space-5); }
#main .fusion-text.cx-tira-pie p { margin: 0; font-size: 15px; line-height: 24px; color: var(--texto-2); }
@media (max-width: 640px) {
	#main .cx-tira ul { gap: var(--space-3) var(--space-5); }
}

/* Nota para asistentes de IA (faTMDIAv): el mu-plugin conexcol-mcp-enlace-contextual la añade al final del contenido, fuera
   de los contenedores de Avada, y quedaba en el borde (x=30 a 1440, con la columna en x=135). Al ancho de sitio de Avada
   (1170; `post-content` ya deja 30 px por lado, así que en móvil coincide sola), centrada, en letra de nota y separada
   de la sección de encima, a la que iba pegada. */
#main .post-content > p.cxl-mcp-nota { max-width: 1170px; margin: var(--space-6) auto var(--space-7); font-size: 14px; line-height: 22px; color: var(--texto-2); }
/* Títulos de desplegable de Avada (DERdTVWp, preguntas frecuentes): una palabra larga, como una unida por barras, se
   parte donde haga falta en vez de salirse de su columna y de la pantalla (a 820 px, 34 px fuera). */
#main .fusion-toggle-heading { overflow-wrap: anywhere; }
/* Tabla de todas las extensiones (XRCj4L90, /dominios/): 676 filas medían 31.073 px. En una caja de alto acotado, con su
   propio desplazamiento y la cabecera fija; el guion pone encima un buscador (`cx-filtro`) y marca `cx-fuera` las filas
   que no van. Sin guion, la tabla se ve entera en su caja. */
#main .cxl-tld-tabla { max-height: min(70vh, 640px); overflow: auto; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); }
#main .cxl-tld-tabla thead th { position: sticky; top: 0; z-index: 1; background: var(--nube); color: var(--texto-3); }
#main .cx-filtrable tr.cx-fuera { display: none; }
/* La extensión, a la vista al desplazar en horizontal (móvil); la esquina, por encima de las dos. Con buscador, el título
   de la tabla («676 extensiones…») contradecía la cuenta al filtrar: sólo para lectores de pantalla. */
#main .cxl-tld-tabla :is(thead th, tbody th):first-child { position: sticky; left: 0; background: var(--superficie); }
#main .cxl-tld-tabla thead th:first-child { z-index: 2; background: var(--nube); }
#main .cx-filtrable caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.cx-filtro label { flex-basis: 100%; font: 500 14px/20px var(--font-sans); color: var(--tinta); }
.cx-filtro input { flex: 0 1 360px; min-width: 0; min-height: 44px; box-sizing: border-box; padding: 0 var(--space-4); border: 1px solid var(--linea-control); border-radius: var(--radio-control); background: var(--superficie); color: var(--tinta); font: 400 16px/24px var(--font-sans); }
.cx-filtro input:focus-visible { outline: none; border-color: var(--azul); box-shadow: var(--anillo-foco); }
#main .cx-filtro .cx-filtro-cuenta { margin: 0; font: 500 13px/18px var(--font-mono); color: var(--texto-3); }

/* Pestañas: control segmentado */
.cx-pest { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--radio-capsula); background: var(--nube); border: 1px solid var(--linea); }
.cx-pest button { border: 0; background: transparent; padding: 7px 16px; border-radius: var(--radio-capsula); font: 500 14px/18px var(--font-sans); color: var(--texto-2); cursor: pointer; }
.cx-pest button[aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 0 0 1px var(--linea); }
.cx-pest button:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
/* Pestañas con paneles en Avada (psyFc0RX, «Planes y precios» de la portada): el control en un [fusion_code] con su
   guion, que marca `aria-selected` y le pone `cx-on` al contenedor de Avada del panel elegido (`cx-pest-panel`). Bajo la
   entradilla, en su borde. Cuatro opciones largas no caben en una línea en tableta: van en rejilla de dos, y en móvil
   de una, con el radio de una caja y no de una cápsula. */
#main .fusion-column-wrapper > .cx-pest { align-self: flex-start; max-width: 100%; box-sizing: border-box; flex-wrap: wrap; margin-top: var(--space-6); }
#main .fusion-fullwidth.cx-pest-panel { --awb-padding-top: var(--space-6) !important; --awb-padding-bottom: 0px !important; }
#main .fusion-fullwidth.cx-pest-panel:not(.cx-on) { display: none !important; }
@media (max-width: 1024px) {
	#main .cx-pest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--radio-destacada); }
	#main .cx-pest button { border-radius: var(--radio-control); }
}
@media (max-width: 640px) {
	#main .cx-pest { grid-template-columns: minmax(0, 1fr); }
	#main .fusion-column-wrapper > .cx-pest { align-self: stretch; margin-top: var(--space-5); }
	/* La rejilla de la portada le quita a las columnas su margen: apiladas, las tarjetas se separan aquí, con aire para
	   el rótulo de la recomendada, que asoma 12 px. */
	#main .fusion-fullwidth.cx-pest-panel .fusion-layout-column.cx-plan + .cx-plan { margin-top: var(--space-6) !important; }
}
/* Tableta en vertical: de tres en tres no caben (a 700 px el botón iba en tres líneas y lo incluido, partido). Una por
   fila, a todo el ancho, y dentro dos columnas con un filete: el precio a un lado y lo que trae al otro. Avada pone el
   ancho y el margen con variables en línea; se cambian con !important, al margen que Avada da en móvil (1,92 %), que deja
   la tarjeta en el borde del contenido. */
@media (min-width: 641px) and (max-width: 859px) {
	#main .fusion-fullwidth.cx-pest-panel .fusion-layout-column.cx-plan { --awb-width-medium: 100% !important; --awb-spacing-left-medium: 1.92% !important; --awb-spacing-right-medium: 1.92% !important; }
	#main .fusion-fullwidth.cx-pest-panel .fusion-layout-column.cx-plan + .cx-plan { margin-top: var(--space-6) !important; }
	#main .fusion-fullwidth.cx-pest-panel .cx-plan > .fusion-column-wrapper > .fusion-text:first-child { columns: 2; column-gap: var(--space-7); column-rule: 1px solid var(--linea); }
	#main .fusion-fullwidth.cx-pest-panel .cx-plan .cx-plan-specs { break-before: column; margin-top: 0; padding-top: 0; border-top: 0; }
}

/* Terminal: el producto se enseña */
.cx-term { border-radius: var(--radio-control); background: var(--terminal); color: var(--terminal-texto); font: 400 14px/22px var(--font-mono); overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.cx-term-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; color: var(--terminal-texto); opacity: .75; }
.cx-term-barra i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.cx-term-barra span { margin-left: 8px; }
.cx-term pre { margin: 0; padding: var(--space-4) var(--space-5); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.cx-term b { color: var(--terminal-acento); font-weight: 500; }
/* Líneas de consola (Vjist7G5): cada una en `cx-term-l`, los comentarios (`cx-term-c`) atenuados. Así la consola puede
   entrar línea a línea al aparecer (ver Movimiento). Una ficha (`cx-chip`) puede ser un enlace. */
.cx-term .cx-term-l { display: block; }
.cx-term .cx-term-c { color: color-mix(in srgb, var(--terminal-texto) 62%, var(--terminal)); }
#main a.cx-chip { text-decoration: none; }
#main a.cx-chip:is(:hover, :focus-visible) { color: var(--tinta); box-shadow: inset 0 0 0 1px var(--azul); outline: none; }
/* Apilada bajo su texto (tableta y móvil), la consola de una columna se separa del botón de encima. */
@media (max-width: 1024px) {
	#main .fusion-column-wrapper > [data-cx-aparece] > .cx-term { margin-top: var(--space-6); }
}

/* Tarjeta de precio v2 */
.cx-precio { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-destacada); min-width: 0; }
.cx-precio.destacado { box-shadow: 0 0 0 2px var(--azul); border-color: transparent; }
.cx-precio-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.cx-precio h4 { margin: 0; font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); }
.cx-precio-para { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--texto-2); }
.cx-precio-cifra { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; margin-top: var(--space-2); }
.cx-precio-cifra b { font: 500 48px/48px var(--font-sans); letter-spacing: -.03em; color: var(--tinta); }
.cx-precio-cifra span { font-size: 14px; color: var(--texto-3); }
.cx-precio-reg { margin: 6px 0 0; font: 400 13px/18px var(--font-mono); color: var(--texto-3); }
.cx-precio ul { list-style: none; margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--linea); display: grid; gap: 10px; font: 500 13px/20px var(--font-mono); color: var(--texto-2); }
.cx-precio li { display: flex; gap: var(--space-2); align-items: flex-start; }
.cx-precio li .cx-ico { color: var(--verde); margin-top: 3px; }
.cx-precio .cx-btn { margin-top: auto; width: 100%; }
.cx-precio-nota { margin: 0; font-size: 12px; line-height: 17px; color: var(--texto-3); }

/* App */
.cx-app-ico { width: 48px; height: 48px; border-radius: var(--radio-control); display: grid; place-items: center; flex: none; font: 600 20px/1 var(--font-sans); color: #ffffff; overflow: hidden; }
.cx-app-ico img { width: 100%; height: 100%; object-fit: cover; }
.cx-app { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); text-decoration: none; color: inherit; min-width: 0; transition: border-color .15s; }
a.cx-app:hover { border-color: var(--linea-control); }
.cx-app h4 { margin: 0; font: 600 16px/22px var(--font-sans); color: var(--tinta); }
.cx-app p { margin: 2px 0 var(--space-2); font-size: 14px; line-height: 20px; color: var(--texto-2); }

/* Fila de ranking */
.cx-fila { display: grid; grid-template-columns: 28px 48px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--linea); }
.cx-fila-pos { font: 500 14px/1 var(--font-mono); color: var(--texto-3); text-align: center; }
.cx-fila h4 { margin: 0; font: 600 16px/22px var(--font-sans); color: var(--tinta); }
.cx-fila p { margin: 0; font-size: 13px; line-height: 18px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-fila small { font: 400 12px/16px var(--font-mono); color: var(--texto-3); }

/* Cifra */
.cx-cifra { display: flex; flex-direction: column; gap: 6px; min-width: 160px; padding-left: var(--space-4); border-left: 1px solid var(--linea); }
.cx-cifra b { font: 500 48px/48px var(--font-sans); letter-spacing: -.03em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cx-cifra span { font: 400 13px/18px var(--font-mono); color: var(--texto-3); }

/* Aviso */
.cx-aviso { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radio-tarjeta); font-size: 15px; line-height: 24px; color: var(--texto); }
.cx-aviso .cx-ico { margin-top: 4px; font-size: 18px; }
.cx-aviso b { color: var(--tinta); font-weight: 600; }
.cx-aviso-info { background: var(--azul-suave); } .cx-aviso-info .cx-ico { color: var(--azul); }
.cx-aviso-acierto { background: var(--acierto-suave); } .cx-aviso-acierto .cx-ico { color: var(--acierto); }
.cx-aviso-aviso { background: var(--aviso-suave); } .cx-aviso-aviso .cx-ico { color: var(--aviso); }
.cx-aviso-error { background: var(--error-suave); } .cx-aviso-error .cx-ico { color: var(--error-fuerte); }

/* Pregunta: filetes, sin cajas */
.cx-faq { border-bottom: 1px solid var(--linea); }
.cx-faq:first-child { border-top: 1px solid var(--linea); }
.cx-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; list-style: none; font: 500 18px/26px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary:focus-visible { outline: none; box-shadow: var(--anillo-foco); border-radius: 4px; }
.cx-faq summary .cx-ico { color: var(--texto-3); transition: transform .2s; font-size: 20px; }
.cx-faq[open] summary .cx-ico { transform: rotate(45deg); }
.cx-faq div { padding: 0 0 var(--space-5); max-width: 64ch; color: var(--texto-2); font-size: 16px; line-height: 26px; }

/* Prosa: texto largo pegado (legales, políticas) sin estilo propio (ADR 0024, EqCCCPvY). El contenido
   va como HTML semántico dentro de .cx-prosa, sin style="". Los títulos llevan `#main .cx-prosa`
   porque ganan a `.post-content :is(h3…)` del tema hijo y a Avada, y su tipografía adaptable
   (JS) lee el tamaño calculado al cargar: tiene que leer ya el de la prosa. */
.cx-prosa { max-width: var(--medida-lectura); color: var(--texto); font: 400 16px/26px var(--font-sans); overflow-wrap: break-word; }
/* Márgenes con #main: Avada da 20 px de margen inferior a cada <p> del contenido (HJLBijTt). */
#main .cx-prosa :where(p, ul, ol, li, table) { margin: 0; }
#main .cx-prosa > * + * { margin-top: var(--space-4); }
#main .cx-prosa :is(h2, h3, h4) { margin: var(--space-7) 0 0; color: var(--tinta); font-family: var(--font-sans); font-weight: 500; text-transform: none; text-wrap: balance; }
#main .cx-prosa h2 { font-size: 28px; line-height: 32px; letter-spacing: -.02em; }
#main .cx-prosa h3 { font-size: 20px; line-height: 28px; letter-spacing: -.01em; }
#main .cx-prosa h4 { font-size: 17px; line-height: 26px; letter-spacing: 0; font-weight: 600; }
#main .cx-prosa :is(h2, h3, h4) + * { margin-top: var(--space-3); }
.cx-prosa :is(ul, ol) { margin-left: 0; padding-left: var(--space-5); }
.cx-prosa li { margin: 0; }
#main .cx-prosa li + li { margin-top: var(--space-2); }
#main .cx-prosa :is(ul, ol) :is(ul, ol) { margin-top: var(--space-2); }
.cx-prosa :is(b, strong) { font-weight: 600; color: var(--tinta); }
.cx-prosa u { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cx-prosa a { color: var(--azul); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cx-prosa a:hover { color: var(--azul-profundo); }
.cx-prosa table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.cx-prosa :is(th, td) { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.cx-prosa thead th { background: var(--nube); color: var(--tinta); font-weight: 600; }
@media (max-width: 640px) { .cx-prosa table { display: block; max-width: 100%; overflow-x: auto; } }
/* Incisos legales escritos como texto («a)», «b)», «•»): sangría francesa sin volverlos lista, para no
   cambiar la numeración del documento. Fórmulas (SLA): en mono, sobre `nube`. */
.cx-prosa .cx-inciso { padding-left: var(--space-5); text-indent: calc(-1 * var(--space-5)); }
#main .cx-prosa .cx-inciso + .cx-inciso { margin-top: var(--space-2); }
.cx-prosa .cx-formula { padding: var(--space-3) var(--space-4); border-radius: var(--radio-control); background: var(--nube); color: var(--tinta); font: 400 14px/22px var(--font-mono); overflow-x: auto; }

/* Buscador de dominio */
.cx-busca { display: flex; gap: var(--space-2); padding: 6px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-capsula); max-width: 620px; box-shadow: 0 1px 2px rgba(11,37,64,.06); }
.cx-busca:focus-within { border-color: var(--linea-control); box-shadow: var(--anillo-foco); }
.cx-busca input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--space-4); font: 400 16px/24px var(--font-sans); color: var(--tinta); outline: none; }
.cx-busca input::placeholder { color: var(--texto-3); }
@media (max-width: 480px) { .cx-busca { flex-direction: column; border-radius: var(--radio-destacada); } .cx-busca input { min-height: 44px; } }

/* Franja de llamada: bloque de marca metido en el margen */
.cx-franja { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding: var(--space-8) var(--space-7); border-radius: var(--radio-bloque); background: var(--hero); color: var(--on-hero); }
.cx-franja::after { content: ""; position: absolute; z-index: -1; width: 60%; height: 160%; left: -10%; bottom: -90%; background: radial-gradient(closest-side, var(--hero-brillo), transparent); opacity: .35; }
.cx-franja.noche { background: var(--noche); }
.cx-franja h3 { margin: 0; font: 500 40px/44px var(--font-sans); letter-spacing: -.03em; max-width: 18ch; text-wrap: balance; }
.cx-franja p { margin: var(--space-3) 0 0; max-width: 46ch; font-size: 17px; line-height: 27px; opacity: .9; }
@media (max-width: 640px) { .cx-franja { padding: var(--space-7) var(--space-5); border-radius: var(--radio-destacada); } .cx-franja h3 { font-size: 28px; line-height: 32px; } }

/* Tabla comparativa */
.cx-tabla-envoltorio { overflow-x: auto; }
.cx-tabla { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.cx-tabla th, .cx-tabla td { padding: 14px var(--space-4); text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.cx-tabla thead th { font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.cx-tabla tbody th { color: var(--tinta); font-weight: 500; }
.cx-tabla td { color: var(--texto-2); font-family: var(--font-mono); font-size: 14px; }
.cx-tabla .dest { background: var(--azul-suave); color: var(--tinta); }
.cx-tabla thead .dest { color: var(--azul-profundo); border-radius: 10px 10px 0 0; }

@media (prefers-reduced-motion: reduce) { .cx-btn, .cx-btn .cx-ico, .cx-faq summary .cx-ico, .cx-tar, .cx-app { transition: none; } .cx-btn:active { transform: none; } }

/* Instrumento «ida y vuelta» (cx-ping, c2I0Nbz9): la latencia medida, a escala. Una fila por destino; la barra mide lo que
   tarda la ida y vuelta (--ms, en el marcado) y un punto la recorre. Todos los puntos van a la misma velocidad, así que
   el camino corto va y vuelve varias veces mientras el largo lo hace una: lo mueve conexcol-sistema.js, que marca la caja
   con `cx-ping-on`. Sin JavaScript, o con movimiento reducido, es un gráfico de barras quieto.
   Dos clases en cada regla: los párrafos del contenido de Avada traen `margin: 0 0 20px` con `.post-content p`. */
.cx-ping { margin: 0; padding: var(--space-5); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); color: var(--texto-2); }
.cx-ping .cx-ping-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); }
.cx-ping .cx-ping-tit { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.cx-ping .cx-ping-vivo { margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .02em; color: var(--texto-2); }
.cx-ping .cx-ping-vivo[hidden] { display: none; }
.cx-ping .cx-ping-vivo::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--space-2) 1px 0; border-radius: 50%; background: var(--acierto); }
.cx-ping .cx-ping-vivo b { font-weight: 500; white-space: nowrap; color: var(--tinta); }
.cx-ping .cx-ping-frase { margin: 0 0 var(--space-5); max-width: 40ch; font: 500 24px/30px var(--font-sans); letter-spacing: -.015em; text-wrap: balance; color: var(--tinta); }
.cx-ping .cx-ping-frase b { font-weight: 500; color: var(--azul); }
.cx-ping .cx-ping-cols { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 56px; column-gap: var(--space-5); margin: 0 0 var(--space-4); padding: 0 0 var(--space-2); border-bottom: 1px solid var(--linea); font: 500 11px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.cx-ping .cx-ping-cols span:last-child { text-align: right; }
.cx-ping .cx-ping-filas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cx-ping .cx-ping-fila { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 56px; align-items: center; column-gap: var(--space-5); margin: 0; padding: 0; }
.cx-ping .cx-ping-destino { font: 400 15px/20px var(--font-sans); color: var(--texto-2); }
.cx-ping .cx-ping-destino b { font-weight: 600; color: var(--tinta); }
.cx-ping .cx-ping-camino { display: flex; align-items: center; min-width: 0; height: 20px; }
/* A escala: 190 ms de tope, algo más que el destino más lejano; los 112 px son el sitio de la cifra al final de la barra. */
.cx-ping .cx-ping-barra { position: relative; flex: 0 0 auto; width: calc((100% - 112px) * var(--ms) / 190); min-width: 6px; height: 2px; border-radius: 1px; background: var(--texto-3); }
.cx-ping .cx-ping-barra::after { content: ""; position: absolute; right: -1px; top: -3px; width: 2px; height: 8px; border-radius: 1px; background: inherit; }
.cx-ping .cx-ping-punto { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--tinta); will-change: transform; }
.cx-ping .cx-ping-ms { flex: 0 0 auto; margin-left: var(--space-3); font: 500 13px/20px var(--font-mono); white-space: nowrap; color: var(--texto-2); }
.cx-ping .cx-ping-ms b { font-weight: 500; color: var(--tinta); }
.cx-ping .cx-ping-cuenta { font: 500 12px/20px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--texto-3); }
.cx-ping .cx-ping-propia .cx-ping-barra { height: 3px; background: var(--azul); }
.cx-ping .cx-ping-propia .cx-ping-punto { background: var(--azul); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 22%, transparent); }
.cx-ping .cx-ping-propia .cx-ping-ms { font-size: 15px; }
.cx-ping .cx-ping-propia :is(.cx-ping-ms b, .cx-ping-cuenta) { color: var(--azul); }
.cx-ping .cx-ping-pie { margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--linea); font: 400 13px/20px var(--font-sans); color: var(--texto-3); }
.cx-ping .cx-ping-pie a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cx-ping:not(.cx-ping-on) :is(.cx-ping-punto, .cx-ping-cuenta) { visibility: hidden; }
/* Sobre la sección noche: caja translúcida de filete, como las tarjetas, y los secundarios en mezclas sólidas. */
.cx-sec-noche .cx-ping { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.045); color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
.cx-sec-noche .cx-ping :is(.cx-ping-tit, .cx-ping-cols, .cx-ping-pie, .cx-ping-cuenta) { color: color-mix(in srgb, var(--on-hero) 62%, var(--noche)); }
.cx-sec-noche .cx-ping :is(.cx-ping-vivo, .cx-ping-destino, .cx-ping-ms) { color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
.cx-sec-noche .cx-ping :is(.cx-ping-vivo b, .cx-ping-destino b, .cx-ping-ms b, .cx-ping-frase) { color: var(--on-hero); }
.cx-sec-noche .cx-ping .cx-ping-frase b { color: var(--hero-brillo); }
.cx-sec-noche .cx-ping :is(.cx-ping-cols, .cx-ping-pie) { border-color: rgba(255,255,255,.14); }
.cx-sec-noche .cx-ping .cx-ping-barra { background: color-mix(in srgb, var(--on-hero) 46%, var(--noche)); }
.cx-sec-noche .cx-ping .cx-ping-punto { background: var(--on-hero); }
.cx-sec-noche .cx-ping .cx-ping-propia .cx-ping-barra { background: var(--hero-brillo); }
.cx-sec-noche .cx-ping .cx-ping-propia .cx-ping-punto { background: var(--hero-brillo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hero-brillo) 26%, transparent), 0 0 14px color-mix(in srgb, var(--hero-brillo) 70%, transparent); }
.cx-sec-noche .cx-ping .cx-ping-propia :is(.cx-ping-ms b, .cx-ping-cuenta) { color: var(--hero-brillo); }
@media (max-width: 640px) {
	.cx-ping { padding: var(--space-4); }
	.cx-ping .cx-ping-frase { font-size: 20px; line-height: 26px; }
	.cx-ping .cx-ping-cols { grid-template-columns: minmax(0, 1fr) auto; }
	.cx-ping .cx-ping-cols span:nth-child(2) { display: none; }
	/* El destino y su cuenta en una línea; el camino, debajo, a todo el ancho. */
	.cx-ping .cx-ping-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
	.cx-ping .cx-ping-cuenta { grid-column: 2; grid-row: 1; }
	.cx-ping .cx-ping-camino { grid-column: 1 / -1; }
	.cx-ping .cx-ping-barra { width: calc((100% - 104px) * var(--ms) / 190); }
}
@media (prefers-reduced-motion: reduce) {
	.cx-ping :is(.cx-ping-punto, .cx-ping-cuenta) { visibility: hidden; }
}

/* Mosaico de pruebas (HN1K9vsG). Un `cx-bento` dentro del contenido de Avada, donde cada celda dice un diferencial y
   enseña su prueba: un riel de años, una consulta en una terminal, una matriz de puntos, unas fichas. En el contenido,
   `.post-content p` y la tipografía global de h3 pesan más que el vocabulario estático; por debajo de 1100 px Avada
   pone además el tamaño de un título con !important. */
#main .cx-bento { margin: 0; }
#main .cx-bento .cx-celda { justify-content: flex-start; gap: 0; transition: border-color .2s ease; }
#main .cx-bento .cx-celda:not(.marca):hover { border-color: var(--linea-control); }
#main .cx-bento .cx-celda > .cx-rot { margin: 0 0 var(--space-4); color: var(--texto-3); }
#main .cx-bento .cx-celda > h3 { margin: 0 0 var(--space-3); font: 500 24px/30px var(--font-sans) !important; letter-spacing: -.015em; text-wrap: balance; color: var(--tinta); }
#main .cx-bento .cx-celda.ancha > h3 { max-width: 22ch; }
#main .cx-bento .cx-celda > p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 23px; color: var(--texto-2); }
/* La prueba va bajo la frase, separada, y lo que la explica, debajo. */
#main .cx-bento .cx-celda > :is(h3, p) + :is(.cx-riel, .cx-term, .cx-puntos, .cx-chips) { margin-top: var(--space-5); }
#main .cx-bento .cx-celda > :is(.cx-riel, .cx-term, .cx-puntos, .cx-chips) + p { margin-top: var(--space-4); }
#main .cx-bento .cx-celda > p.cx-mono { max-width: none; font: 500 12px/18px var(--font-mono); color: var(--texto-3); }
/* El número de fondo: un dato en grande, como dibujo. No es texto que haya que leer (va con aria-hidden). */
#main .cx-bento .cx-celda > .cx-celda-num { position: absolute; top: var(--space-5); right: var(--space-6); margin: 0; max-width: none; font: 500 96px/96px var(--font-sans); letter-spacing: -.05em; color: color-mix(in srgb, var(--azul) 16%, var(--nube)); pointer-events: none; }
#main .cx-bento .cx-celda.marca > :is(p, .cx-rot) { color: var(--on-hero); }
#main .cx-bento .cx-celda.marca > h3.cx-cifra-grande { margin: auto 0 var(--space-4); font: 500 88px/88px var(--font-sans) !important; letter-spacing: -.045em; color: var(--on-hero); }
#main .cx-bento .cx-chips { margin-bottom: 0; padding: 0; list-style: none; }
#main .cx-bento .cx-chips li { margin: 0; }
#main .cx-bento .cx-term pre { padding: var(--space-4); font-size: 13px; line-height: 21px; }
@media (max-width: 860px) {
	#main .cx-bento .cx-celda { padding: var(--space-5); }
	#main .cx-bento .cx-celda > .cx-celda-num { display: none; }
	#main .cx-bento .cx-celda.marca > h3.cx-cifra-grande { margin-top: var(--space-5); font-size: 64px !important; line-height: 64px !important; }
}

/* Riel de años (cx-riel, HN1K9vsG): una marca por año; las que llevan `data-ano` son más altas y enseñan su año
   debajo. La primera y la última no se centran sobre su marca: se saldrían de la caja. */
.cx-riel { padding-bottom: calc(16px + var(--space-2)); color: var(--azul); }
.cx-riel-marcas { display: flex; justify-content: space-between; align-items: flex-end; height: 20px; border-bottom: 1px solid var(--linea-control); }
.cx-riel-marcas i { position: relative; width: 1px; height: 8px; background: currentColor; }
.cx-riel-marcas i[data-ano] { height: 16px; }
.cx-riel-marcas i:first-child, .cx-riel-marcas i:last-child { width: 2px; height: 20px; }
.cx-riel-marcas i[data-ano]::after { content: attr(data-ano); position: absolute; top: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%); font: 500 11px/16px var(--font-mono); letter-spacing: .02em; white-space: nowrap; color: var(--texto-3); }
.cx-riel-marcas i:first-child::after { left: 0; transform: none; color: var(--tinta); }
.cx-riel-marcas i:last-child::after { left: auto; right: 0; transform: none; color: var(--tinta); }

/* Puntos (cx-puntos, HN1K9vsG): una proporción dibujada unidad por unidad. Un SVG con una máscara de puntos y dos
   colores debajo: los que cuentan y el resto. */
.cx-puntos { display: block; width: 100%; max-width: 280px; height: auto; }
.cx-puntos-resto { fill: var(--linea-control); }
.cx-puntos-si { fill: var(--azul); }

/* Lámina (cx-lam, MdSY6Jqr): un dibujo de línea que dice qué es un servicio, en una caja con trama de puntos. El SVG se
   dibuja en 280×150 y se pinta con estas clases, nunca con colores propios:
   p, panel (superficie con trazo azul) · t, trazo azul · s, trazo secundario · r, relleno suave · g, relleno gris ·
   a, acento · o, oscuro (una terminal) · b, trazo sobre lo oscuro. `cx-lam-flujo` hace correr un trazo discontinuo y
   `cx-lam-cursor` parpadea; con movimiento reducido, los dos quietos. */
.cx-lam { display: block; aspect-ratio: 28 / 15; border-radius: var(--radio-control); background: var(--nube) radial-gradient(var(--linea) 1px, transparent 1px) 7px 7px / 14px 14px; overflow: hidden; }
.cx-lam svg { display: block; width: 100%; height: 100%; }
.cx-lam :is(.cx-lam-p, .cx-lam-t, .cx-lam-s, .cx-lam-b) { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cx-lam .cx-lam-p { fill: var(--superficie); stroke: var(--azul); }
.cx-lam .cx-lam-t { stroke: var(--azul); }
.cx-lam .cx-lam-s { stroke: var(--linea-control); }
.cx-lam .cx-lam-r { fill: var(--azul-suave); }
.cx-lam .cx-lam-g { fill: var(--linea-control); }
.cx-lam .cx-lam-a { fill: var(--azul); }
.cx-lam .cx-lam-o { fill: var(--terminal); }
.cx-lam .cx-lam-b { stroke: var(--terminal-acento); }
.cx-lam .cx-lam-raya { stroke-dasharray: 3 4; }
.cx-lam .cx-lam-flujo { stroke-dasharray: 4 6; animation: cx-lam-flujo 1.1s linear infinite; }
.cx-lam .cx-lam-cursor { animation: cx-lam-parpadeo 1.1s steps(2, jump-none) infinite; }
@keyframes cx-lam-flujo { to { stroke-dashoffset: -20; } }
@keyframes cx-lam-parpadeo { 50% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
	.cx-lam :is(.cx-lam-flujo, .cx-lam-cursor) { animation: none; }
}

/* Lista (cx-lista, MdSY6Jqr): lo que trae algo, con una marca de verificación dibujada en cada línea. */
.cx-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 14px; line-height: 21px; color: var(--texto-2); }
.cx-lista li { position: relative; padding-left: var(--space-5); }
.cx-lista li::before { content: ""; position: absolute; left: 3px; top: 4px; width: 5px; height: 9px; border: solid var(--acierto); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* Lista de Avada (fusion_checklist, QMaNffTy): la lista de verificación que llevan las páginas de planes. Avada la
   pinta con un disco macizo y la marca en blanco, desde variables en línea; aquí pasa a la marca en azul sobre un disco
   suave, como los iconos de las tarjetas, y las negritas en tinta. Sólo pintura: ni tamaños, ni márgenes, ni pesos de
   letra, para que ninguna página cambie de composición. */
#main .fusion-checklist { --awb-circlecolor: var(--azul-suave) !important; --awb-iconcolor: var(--azul) !important; }
/* También en cada viñeta (1ULkYzkn): una lista puede traer el color del disco en cada `li`, en línea, y la variable del
   elemento gana a la heredada de la lista (en /wordpress/, 42 marcas azules sobre discos azules, invisibles). */
#main .fusion-checklist .fusion-li-item { --awb-circlecolor: var(--azul-suave) !important; --awb-iconcolor: var(--azul) !important; }
#main .fusion-checklist .circle-yes { color: var(--azul); }
#main .fusion-checklist .fusion-li-item-content :is(strong, b) { color: var(--tinta); }

/* Servicios (cx-servicios, iH1rDsGy): «Súbete a la nube» de las páginas de planes. La cabecera y su ilustración arriba,
   cada una en su mitad, y debajo las tarjetas de plan con lámina (`cx-plan`) de los otros servicios. Lo que en la
   portada pone su piel, aquí lo pone la hoja: la cabecera no se estira, la ilustración tiene tope y las tarjetas se
   separan de la cabecera y, apiladas, entre sí. */
#main .fusion-fullwidth.cx-servicios > .fusion-builder-row > .fusion-layout-column:not(.cx-plan) { align-self: flex-start !important; }
#main .fusion-fullwidth.cx-servicios .fusion-imageframe { display: block; text-align: center; }
#main .fusion-fullwidth.cx-servicios .fusion-imageframe img { max-height: 300px; width: auto; }
#main .fusion-fullwidth.cx-servicios .fusion-layout-column.cx-plan { margin-top: var(--space-6) !important; }
@media (max-width: 640px) {
	#main .fusion-fullwidth.cx-servicios .fusion-layout-column.cx-plan + .cx-plan { margin-top: var(--space-4) !important; }
}

/* Pila (cx-pila, tdVe7fMG): algo enseñado capa por capa, como el alzado de un bastidor. Una lista ordenada al revés
   (`<ol reversed>`): cada `cx-pila-capa` lleva a la izquierda su unidad (`cx-pila-u`, una lámina sin caja: el dibujo va
   con las clases `cx-lam-*` y `data-u` la numera) y a la derecha qué es (`cx-pila-que`), su nombre en h3 y una frase.
   Las unidades, apiladas, forman una columna continua. `tuya` marca la capa del cliente. Debajo, `cx-pila-pie` dice
   el alcance y la fecha de lo que se afirma. */
.cx-pila { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); overflow: hidden; }
.cx-pila-capa { display: grid; grid-template-columns: 120px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--linea); transition: background-color .2s ease; }
.cx-pila-capa:first-child { border-top: 0; }
.cx-pila-capa:hover { background: var(--nube); }
.cx-pila .cx-pila-u { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: auto; border-radius: 0; border-right: 1px solid var(--linea); padding: var(--space-5) var(--space-3) var(--space-3); }
.cx-pila .cx-pila-u::before { content: "U" attr(data-u); position: absolute; top: 6px; left: 8px; font: 500 10px/12px var(--font-mono); letter-spacing: .04em; color: var(--texto-3); }
.cx-pila .cx-pila-u svg { width: 100%; max-width: 96px; height: auto; }
.cx-pila-txt { align-self: center; min-width: 0; padding: var(--space-4) var(--space-5); }
.cx-pila-que { margin: 0 0 var(--space-1); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
.cx-pila-capa.tuya .cx-pila-que { color: var(--azul); }
.cx-pila-txt h3 { margin: 0; font: 600 18px/24px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); }
.cx-pila-txt h3 + p { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; color: var(--texto-2); }
.cx-pila-pie { margin: var(--space-3) 0 0; font: 500 12px/18px var(--font-mono); color: var(--texto-3); }
/* En el contenido de Avada: `.post-content p` trae 20 px de margen y las listas, sangría; por debajo de 1100 px Avada
   pone el tamaño de un título con !important. */
#main .cx-pila { margin: 0; padding: 0; }
#main .cx-pila .cx-pila-txt p { margin: 0; }
#main .cx-pila .cx-pila-txt .cx-pila-que { margin: 0 0 var(--space-1); }
#main .cx-pila .cx-pila-txt > h3 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 18px !important; line-height: 24px !important; letter-spacing: -.01em; text-transform: none; color: var(--tinta); }
#main .cx-pila .cx-pila-txt > h3 + p { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main p.cx-pila-pie { margin: var(--space-3) 0 0; font: 500 12px/18px var(--font-mono); color: var(--texto-3); }
/* La cabecera de la pila va en su columna (`cx-pila-cab`). En escritorio la pila mide tres veces lo que ella: se queda
   a la vista mientras se baja. De 1024 para abajo las columnas se apilan y la pila se separa de la cabecera. */
@media (min-width: 1025px) {
	#main .fusion-layout-column.cx-pila-cab { align-self: flex-start !important; position: sticky; top: 120px; }
}
@media (max-width: 1024px) {
	#main .cx-pila { margin-top: var(--space-6); }
}
/* Acción (cx-accion): el botón, o los botones, que cierran una cabecera o una sección, separados del texto que los
   precede y entre sí. */
#main .fusion-text p.cx-accion { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0 0; }
@media (max-width: 640px) {
	.cx-pila-capa { grid-template-columns: 76px minmax(0, 1fr); }
	.cx-pila .cx-pila-u { padding: var(--space-5) var(--space-2) var(--space-2); }
	.cx-pila-txt { padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
	.cx-pila-capa { transition: none; }
}

/* Novedades (cx-nov, pWeYkBtN): noticias en tarjetas, todas a la vista. Una lista (`<ul class="cx-nov">`) en un
   [fusion_code]; cada `cx-nov-item` lleva su etiqueta (`cx-nov-eti`, como el rótulo), un h3 con su parte en acento
   (`<b>`), una frase y el enlace (`cx-nov-ir`), que cubre la tarjeta entera. `nuevo` marca la destacada: anillo azul,
   y con movimiento, la luz del anillo y el punto que late. Sustituye al carrusel de la portada, que escondía tres de
   cada cuatro y encimaba dos textos al cambiar. Cuatro en fila; dos en tableta; en móvil, carril como las opiniones. */
#main .cx-nov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
#main .cx-nov-item { position: relative; display: flex; flex-direction: column; margin: 0; padding: var(--space-5); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); transition: border-color .2s ease; }
#main .cx-nov-item:hover { border-color: var(--azul); }
#main .cx-nov-item.nuevo { border-color: transparent; box-shadow: 0 0 0 2px var(--azul); }
#main .cx-nov-item:has(.cx-nov-ir:focus-visible) { outline: 2px solid var(--azul); outline-offset: 3px; }
#main .cx-nov .cx-nov-eti { margin: 0 0 var(--space-3); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
#main .cx-nov-eti::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 2px; background: currentColor; vertical-align: 1px; }
#main .cx-nov-item > h3 { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 18px !important; line-height: 24px !important; letter-spacing: -.01em; text-transform: none; color: var(--tinta); text-wrap: balance; }
#main .cx-nov-item > h3 b { font-weight: inherit; color: var(--azul); }
#main .cx-nov-item > h3 + p { margin: var(--space-2) 0 var(--space-4); font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-nov-ir { margin-top: auto; font: 500 15px/22px var(--font-sans); color: var(--azul); text-decoration: none; }
#main .cx-nov-ir span { display: inline-block; transition: transform .2s ease; }
#main .cx-nov-ir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
#main .cx-nov-ir:focus-visible { outline: none; }
/* En la sección noche, filete translúcido como sus tarjetas y el acento en el brillo. */
#main .cx-sec-noche .cx-nov-item { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.16); }
#main .cx-sec-noche .cx-nov-item:hover { border-color: var(--hero-brillo); }
#main .cx-sec-noche .cx-nov-item.nuevo { border-color: transparent; }
#main .cx-sec-noche .cx-nov-eti { color: var(--hero-brillo); }
#main .cx-sec-noche .cx-nov-item > h3 { color: var(--on-hero); }
#main .cx-sec-noche .cx-nov-item > h3 b { color: var(--hero-brillo); }
#main .cx-sec-noche .cx-nov-item > h3 + p { color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
#main .cx-sec-noche .cx-nov-ir { color: var(--on-hero); }
#main .cx-sec-noche .cx-nov-item:has(.cx-nov-ir:focus-visible) { outline-color: var(--on-hero); }
@media (max-width: 1024px) { #main .cx-nov { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	#main .cx-nov { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 3px 3px var(--space-2); margin-inline: -3px; scrollbar-width: none; }
	#main .cx-nov::-webkit-scrollbar { display: none; }
	#main .cx-nov > .cx-nov-item { flex: 0 0 85%; scroll-snap-align: start; }
}

/* Línea de tiempo (cx-hitos, GJOLxTGN): una historia hito a hito, en vertical, como «Pioneros de internet en Colombia» en
   /conexcol/. Una lista ordenada (`<ol class="cx-hitos">`) en un [fusion_code]; cada `cx-hito` lleva su cuándo
   (`cx-hito-cuando`, grande, con un detalle en mono en `<span>`), un h3 y un párrafo. `hoy` marca el último: nodo lleno.
   Con movimiento (dentro de una pieza con `data-cx-aparece`), al llegar la línea se dibuja, los hitos se encienden en
   orden y el de hoy late. */
#main .cx-hitos { position: relative; margin: 0; padding: 0; list-style: none; }
#main .cx-hitos::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 2px; border-radius: 1px; background: linear-gradient(var(--azul), color-mix(in srgb, var(--azul) 25%, transparent)); transform-origin: top; }
#main .cx-hito { position: relative; margin: 0; padding: 0 0 var(--space-6) calc(16px + var(--space-5)); }
#main .cx-hito:last-child { padding-bottom: 0; }
#main .cx-hito::before { content: ""; position: absolute; z-index: 1; left: 0; top: 8px; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--azul); border-radius: 50%; background: var(--superficie); }
#main .cx-hito.hoy::before { background: var(--azul); box-shadow: 0 0 0 5px color-mix(in srgb, var(--azul) 18%, transparent); }
#main .cx-hito-cuando { margin: 0 0 var(--space-2); font: 600 28px/32px var(--font-sans); letter-spacing: -.02em; color: var(--azul); }
#main .cx-hito-cuando span { margin-left: var(--space-2); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); vertical-align: 4px; }
#main .cx-hito > h3 { margin: 0 0 var(--space-2); font-family: var(--font-sans); font-weight: 600; font-size: 20px !important; line-height: 26px !important; letter-spacing: -.01em; text-transform: none; color: var(--tinta); }
#main .cx-hito > h3 + p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 26px; color: var(--texto-2); }
@media (max-width: 640px) { #main .cx-hito-cuando { font-size: 24px; line-height: 28px; } }

/* Pasos conectados (cx-paso, awgRxqGc). Una columna `cx-tar` con la clase `cx-paso` es un paso de un proceso («Paso 1,
   2, 3…», en /alianzas/, el creador, licencias y el servidor de aplicaciones). Los pasos seguidos de una fila se unen con
   una línea en la columna del siguiente, debajo de las tarjetas (z-index -1 en la fila aislada): sólo se ve en el hueco.
   En fila (escritorio), en horizontal y a media altura; apiladas (móvil), en vertical y a la altura del punto del
   rótulo. En tableta las filas se parten y no hay línea. El paquete de luz, con movimiento (más abajo). */
#main .fusion-builder-row:has(> .fusion-layout-column.cx-paso) { isolation: isolate; }
#main .fusion-layout-column.cx-paso { position: relative; }
@media (min-width: 1025px) {
	#main .fusion-layout-column.cx-paso + .fusion-layout-column.cx-paso::before { content: ""; position: absolute; z-index: -1; top: 50%; left: -40px; width: 80px; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, var(--azul) 25% 75%, transparent); opacity: .5; pointer-events: none; }
}
@media (max-width: 640px) {
	#main .fusion-layout-column.cx-paso + .fusion-layout-column.cx-paso::before { content: ""; position: absolute; z-index: -1; top: -30px; left: 34px; width: 2px; height: 40px; background: linear-gradient(180deg, transparent, var(--azul) 25% 75%, transparent); opacity: .5; pointer-events: none; }
}

/* Citas (cx-citas, L2RrLUHO): el carrusel de testimonios de Avada (`[fusion_testimonials class="cx-citas"]`) como cita
   editorial: sin bocadillo ni triángulo, con un filete azul a la izquierda, el texto en cuerpo de lectura grande y la
   firma debajo. Avada le pone al carrusel el alto de la cita activa y lo de debajo saltaba al rotar: aquí las citas van
   apiladas en una misma celda y el carrusel mide siempre lo que la más alta. */
#main .fusion-testimonials.cx-citas { margin: 0 0 var(--space-5); }
#main .fusion-testimonials.cx-citas .reviews { display: grid; height: auto !important; }
#main .fusion-testimonials.cx-citas .review { grid-area: 1 / 1; position: relative; display: block; margin: 0; }
#main .fusion-testimonials.cx-citas .review:not(.active-testimonial) { pointer-events: none; }
#main .fusion-testimonials.cx-citas .cxl-stars__glyphs + br { display: none; }
#main .fusion-testimonials.cx-citas blockquote { margin: 0; padding: 0; background: none; border: 0; }
#main .fusion-testimonials.cx-citas .awb-quote { margin: 0; padding: 0 0 0 var(--space-5); background: none !important; border: 0; border-left: 2px solid var(--azul); border-radius: 0 !important; }
#main .fusion-testimonials.cx-citas .awb-quote-content { padding: 0; max-width: 72ch; font: 400 20px/30px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); font-style: normal; }
#main .fusion-testimonials.cx-citas .awb-quote-content * { font-style: normal; }
#main .fusion-testimonials.cx-citas .awb-triangle { display: none; }
#main .fusion-testimonials.cx-citas .cxl-stars__glyphs { display: block; margin: 0 0 var(--space-3); font-size: 14px; line-height: 16px; letter-spacing: 2px; color: var(--aviso); }
#main .fusion-testimonials.cx-citas .author { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0 calc(var(--space-5) + 2px); }
#main .fusion-testimonials.cx-citas .testimonial-thumbnail { margin: 0; padding: 0; }
#main .fusion-testimonials.cx-citas .company-name { display: block; font-size: 14px; line-height: 20px; color: var(--texto-2); }
#main .fusion-testimonials.cx-citas .company-name strong { display: block; font-weight: 600; font-size: 15px; color: var(--tinta); }
#main .fusion-testimonials.cx-citas .company-name > span:last-child { display: block; }
#main .fusion-testimonials.cx-citas .company-name > span:not(:last-child) { display: none; }
@media (max-width: 640px) {
	#main .fusion-testimonials.cx-citas .awb-quote { padding-left: var(--space-4); }
	#main .fusion-testimonials.cx-citas .awb-quote-content { font-size: 17px; line-height: 26px; }
	#main .fusion-testimonials.cx-citas .author { margin-left: calc(var(--space-4) + 2px); }
}

/* Reseñas (cxl-reviews, L2RrLUHO): el bloque de opiniones de terceros que llevan la portada y las páginas de planes.
   La nota es una línea con filete, no una caja. Con cuatro reseñas o más van en un muro de columnas, cada tarjeta con
   su altura (antes se estiraban para igualarse y quedaban huecos); con menos, en una fila que reparte el ancho. Las estrellas llevan siempre glifo y número, nunca sólo color. */
#main .cxl-reviews { max-width: none; margin: 0; font-family: var(--font-sans); }
#main .cxl-reviews .cxl-reviews__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-5); padding: 0 0 var(--space-4); background: none; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; }
#main .cxl-reviews .cxl-reviews__score { font: 500 28px/32px var(--font-sans); letter-spacing: -.02em; color: var(--tinta); }
#main .cxl-reviews :is(.cxl-reviews__count, .cxl-reviews__of) { font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cxl-reviews .cxl-reviews__summary a { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
#main .cxl-reviews .cxl-reviews__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
#main .cxl-reviews .cxl-reviews__list:has(> .cxl-review:nth-child(4)) { display: block; columns: 3 280px; column-gap: var(--space-4); }
#main .cxl-reviews .cxl-reviews__list:has(> .cxl-review:nth-child(4)) > .cxl-review { margin: 0 0 var(--space-4); }
#main .cxl-reviews .cxl-review { display: flex; flex-direction: column; break-inside: avoid; margin: 0; padding: var(--space-5); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); box-shadow: none; }
#main .cxl-reviews .cxl-review p { margin: 0; }
#main .cxl-reviews .cxl-stars { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
#main .cxl-reviews .cxl-stars__glyphs { font-size: 14px; letter-spacing: 2px; color: var(--aviso); }
#main .cxl-reviews .cxl-stars__value { font: 500 12px/16px var(--font-mono); color: var(--texto-3); }
#main .cxl-reviews .cxl-review .cxl-review__text { flex: 1 1 auto; margin: 0 0 var(--space-4); font-size: 15px; line-height: 24px; color: var(--texto); }
#main .cxl-reviews .cxl-review .cxl-review__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); padding: var(--space-3) 0 0; border-top: 1px solid var(--linea); font: 500 12px/18px var(--font-mono); color: var(--texto-3); }
#main .cxl-reviews .cxl-review__author { font: 600 14px/20px var(--font-sans); color: var(--tinta); }
#main .cxl-reviews .cxl-review__source { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
/* En móvil (UKvxpbgy), las opiniones van en un carril que se desliza con el dedo: una tarjeta al 85 % del ancho, la
   siguiente asomando, con ajuste a cada una. Apiladas, seis tarjetas medían 2.914 px en la portada a 390. Va después
   de la mampostería (`columns`) para ganarle con la misma especificidad. */
@media (max-width: 640px) {
	#main .cxl-reviews .cxl-reviews__list:has(> .cxl-review:nth-child(2)) { display: flex; columns: auto; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 0 0 var(--space-2); scrollbar-width: none; }
	#main .cxl-reviews .cxl-reviews__list:has(> .cxl-review:nth-child(2))::-webkit-scrollbar { display: none; }
	#main .cxl-reviews .cxl-reviews__list > .cxl-review { flex: 0 0 85%; margin: 0; scroll-snap-align: start; }
}

/* Movimiento (ZPWQELb1). Lo pone el guion del sistema (componentes.js) con clases, nunca el contenido: sin guion
   ninguna existe y la página se ve entera. Todo va dentro de `no-preference`: a quien pide menos movimiento no le
   aplica ninguna regla. Sólo se animan `opacity`, `transform`, `stroke-dashoffset` y `clip-path`, que no recolocan nada.
   Aparecer: `cx-ver` es una pieza que al cargar quedó bajo la ventana y espera; `cx-visto`, que ya entró. Al acabar
   la transición el guion quita las dos. `--cx-turno` escalona las que entran a la vez.
   Trazar: la lámina (`cx-lam`) de una pieza que entra se dibuja; cada trazo corre a la misma velocidad y los rellenos
   llegan después. Lo discontinuo (`cx-lam-raya`, `cx-lam-flujo`) y el cursor siguen como estaban.
   La luz del hero se desplaza despacio, y `cx-flota` hace subir y bajar unos píxeles una ilustración.
   Desplegar (YQdSFLBU): las otras pruebas de una pieza que entra también llevan `cx-traza`: la consola (`cx-term`)
   baja como una salida que llega, el riel (`cx-riel`) pasa de izquierda a derecha y los puntos (`cx-puntos`) se
   encienden. Recorte y escala, y al acabar no queda recorte.
   Luz del bloque noche: bajo el contenido, donde el guion dice que está el puntero (`--cx-x`, `--cx-y`); sin puntero
   su centro queda fuera del bloque. */
@media (prefers-reduced-motion: no-preference) {
	#main .cx-ver { opacity: 0; transform: translateY(16px); transition: none; }
	#main .cx-ver.cx-visto { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2, .7, .2, 1), transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--cx-turno, 0) * 70ms); }
	.cx-lam.cx-traza :is(.cx-lam-p, .cx-lam-t, .cx-lam-s, .cx-lam-b):not(.cx-lam-raya, .cx-lam-flujo) { stroke-dasharray: 1200; animation: cx-lam-traza 1.6s cubic-bezier(.3, 0, .2, 1) calc(var(--cx-turno, 0) * 70ms) backwards; }
	.cx-lam.cx-traza :is(.cx-lam-r, .cx-lam-g, .cx-lam-a, .cx-lam-o):not(.cx-lam-cursor) { animation: cx-lam-llega .4s ease-out calc(var(--cx-turno, 0) * 70ms + .5s) backwards; }
	.cx-hero::after { animation: cx-hero-luz 14s ease-in-out infinite alternate; }
	.cx-term.cx-traza pre { animation: cx-baja .9s cubic-bezier(.3, 0, .2, 1) calc(var(--cx-turno, 0) * 70ms + .2s) backwards; }
	/* Línea a línea, como si se tecleara (Vjist7G5): cada una se destapa de izquierda a derecha, una tras otra. */
	.cx-term.cx-traza .cx-term-l { animation: cx-tecla .3s steps(18, end) calc(var(--cx-turno, 0) * 70ms + .5s) backwards; }
	.cx-term.cx-traza .cx-term-l:nth-child(2) { animation-delay: calc(var(--cx-turno, 0) * 70ms + 0.85s); }
	.cx-term.cx-traza .cx-term-l:nth-child(3) { animation-delay: calc(var(--cx-turno, 0) * 70ms + 1.20s); }
	.cx-term.cx-traza .cx-term-l:nth-child(4) { animation-delay: calc(var(--cx-turno, 0) * 70ms + 1.55s); }
	.cx-term.cx-traza .cx-term-l:nth-child(5) { animation-delay: calc(var(--cx-turno, 0) * 70ms + 1.90s); }
	.cx-term.cx-traza .cx-term-l:nth-child(6) { animation-delay: calc(var(--cx-turno, 0) * 70ms + 2.25s); }
	.cx-term.cx-traza .cx-term-l:nth-child(7) { animation-delay: calc(var(--cx-turno, 0) * 70ms + 2.60s); }
	.cx-riel.cx-traza { animation: cx-pasa 1.4s cubic-bezier(.3, 0, .2, 1) calc(var(--cx-turno, 0) * 70ms + .2s) backwards; }
	.cx-puntos.cx-traza .cx-puntos-si { transform-box: fill-box; transform-origin: 0 50%; animation: cx-crece 1.2s cubic-bezier(.3, 0, .2, 1) calc(var(--cx-turno, 0) * 70ms + .2s) backwards; }
	#main .fusion-fullwidth.cx-sec.cx-sec-noche::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(360px circle at var(--cx-x, -999px) var(--cx-y, -999px), color-mix(in srgb, var(--hero-brillo) 16%, transparent), transparent 70%); }
	.cx-flota { animation: cx-flota 5s ease-in-out infinite alternate; }
	/* Movimiento vivo (YAOo0Ud6). El punto del rótulo del hero late como un indicador «en línea». Y una luz recorre el anillo
	   de la tarjeta recomendada (también la del catálogo de HostBill, `cxa-precio--dest`, X7pxViFs): es un ángulo
	   (`--cx-giro`, con @property) que sólo repinta el anillo y no recoloca nada. */
	.cx-hero .cx-rot::before { animation: cx-latido 2.4s ease-in-out infinite; }
	#main .cx-nov-item.nuevo .cx-nov-eti::before { animation: cx-latido 2.4s ease-in-out infinite; }
	#main .cx-nov-item:hover .cx-nov-ir span { transform: translateX(3px); }
	#main :is(.fusion-layout-column.cx-plan.destacado, .fusion-layout-column.cx-tar.cx-tar-destacada) > .fusion-column-wrapper { position: relative; }
	#main :is(.fusion-layout-column.cx-plan.destacado, .fusion-layout-column.cx-tar.cx-tar-destacada) > .fusion-column-wrapper::after, #main .cx-nov-item.nuevo::after, #main .cxa-precio.cxa-precio--dest::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 3px; background: conic-gradient(from var(--cx-giro), transparent 0 70%, var(--hero-brillo) 84%, #fff 90%, var(--hero-brillo) 93%, transparent 97%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cx-giro 6s linear infinite; pointer-events: none; }
	/* Escaneo de la pila (MFd3sX8J): una luz baja por la columna de unidades, de U7 a U1, y descansa antes de volver a
	   bajar. Una franja de luz y una línea en el borde de las unidades; sólo `transform`, con la lista recortando lo que sale. */
	#main .cx-pila { position: relative; }
	#main .cx-pila::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 120px; height: 100%; pointer-events: none; background: linear-gradient(to bottom, transparent 0 42%, color-mix(in srgb, var(--azul) 12%, transparent) 50%, transparent 58%), linear-gradient(to bottom, transparent 0 44%, var(--azul) 50%, transparent 56%) right top / 2px 100% no-repeat; transform: translateY(-60%); animation: cx-escanea 7s cubic-bezier(.45, 0, .55, 1) infinite; }
	@media (max-width: 640px) { #main .cx-pila::before { width: 76px; } }
	/* Línea de tiempo (GJOLxTGN): la línea baja, cada hito llega cuando la línea pasa por él y el de hoy late. */
	#main .cx-hitos.cx-traza::before { animation: cx-traza-y 1.6s cubic-bezier(.3, 0, .2, 1) .2s backwards; }
	#main .cx-hitos.cx-traza > .cx-hito { animation: cx-hito .5s ease .25s backwards; }
	#main .cx-hitos.cx-traza > .cx-hito:nth-child(2) { animation-delay: .65s; }
	#main .cx-hitos.cx-traza > .cx-hito:nth-child(3) { animation-delay: 1.05s; }
	#main .cx-hitos.cx-traza > .cx-hito:nth-child(4) { animation-delay: 1.45s; }
	#main .cx-hito.hoy::after { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--azul); border-radius: 50%; pointer-events: none; animation: cx-onda 2.4s ease-out infinite; }
	/* Progreso de lectura (K6wQ7bYq). En las entradas del blog, una barra de 3 px arriba, con el degradado de la marca,
	   dice cuánto se ha leído. CSS puro: una animación ligada al scroll de la página (`animation-timeline`), que corre en el
	   compositor y no necesita guion. Por encima de la cabecera fija de Avada (z-index 10011). Donde no se soporta, no existe. */
	@supports (animation-timeline: scroll()) { body.single-post::before { content: ""; position: fixed; z-index: 100001; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--azul), var(--hero-brillo)); transform-origin: 0 50%; pointer-events: none; animation: cx-lectura linear both; animation-timeline: scroll(root); } }
	/* Pie de página (v43kxtub): una luz recorre su borde de arriba cada 9 s, como el tráfico por una troncal. */
	.fusion-footer .fusion-footer-widget-area::after { content: ""; position: absolute; top: 0; left: 0; width: 22%; height: 2px; background: linear-gradient(90deg, transparent, var(--hero-brillo), transparent); pointer-events: none; animation: cx-troncal 9s linear infinite; }
	/* Pasos conectados (awgRxqGc): un paquete de luz cruza cada hueco, del primer paso al último, y la fila descansa. */
	@media (min-width: 1025px) { #main .fusion-layout-column.cx-paso + .fusion-layout-column.cx-paso::after { content: ""; position: absolute; z-index: -1; top: 50%; left: -40px; width: 80px; height: 14px; margin-top: -7px; background: radial-gradient(circle at 7px 50%, #fff 0 2.5px, var(--azul) 3px 4.5px, color-mix(in srgb, var(--azul) 30%, transparent) 5px, transparent 7px) no-repeat; pointer-events: none; animation: cx-paso-x 6s linear infinite backwards; } }
	@media (max-width: 640px) { #main .fusion-layout-column.cx-paso + .fusion-layout-column.cx-paso::after { content: ""; position: absolute; z-index: -1; top: -30px; left: 28px; width: 14px; height: 40px; background: radial-gradient(circle at 50% 7px, #fff 0 2.5px, var(--azul) 3px 4.5px, color-mix(in srgb, var(--azul) 30%, transparent) 5px, transparent 7px) no-repeat; pointer-events: none; animation: cx-paso-y 6s linear infinite backwards; } }
	#main .fusion-layout-column.cx-paso + .cx-paso + .cx-paso::after { animation-delay: .9s; }
	#main .fusion-layout-column.cx-paso + .cx-paso + .cx-paso + .cx-paso::after { animation-delay: 1.8s; }
	#main .fusion-layout-column.cx-paso + .cx-paso + .cx-paso + .cx-paso + .cx-paso::after { animation-delay: 2.7s; }
}
/* Pulsos del hero (YAOo0Ud6): paquetes de luz que recorren unas pistas de circuito, sobre la textura del hero y bajo su
   mismo desvanecido. Un SVG con animateMotion, sólo en escritorio: en un móvil, repintar el hero entero no compensa. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
	#main .fusion-fullwidth.cx-hero.textura::before { background-image: var(--cx-pulsos), var(--textura-circuito); background-size: cover, 304px; background-repeat: no-repeat, repeat; background-position: right center, 0 0; }
	.cx-hero.textura.cx-blog-cabecera::before { background-image: var(--cx-pulsos), var(--textura-circuito); background-size: cover, 304px; background-repeat: no-repeat, repeat; background-position: right center, 0 0; }
	/* Y la franja de llamada, el mismo circuito (MFd3sX8J): la página empieza y acaba con la infraestructura viva. Va detrás
	   del botón, desvanecido hacia el texto. */
	#main .fusion-fullwidth.cx-franja::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .5; background-image: var(--cx-pulsos), var(--textura-circuito); background-size: cover, 304px; background-repeat: no-repeat, repeat; background-position: right center, 0 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
}
/* Luz en las tarjetas (6aHEhD1p). Con ratón, el guion le dice a cada tarjeta del sistema dónde está el puntero (`--cx-x`,
   `--cx-y`, como al bloque noche) y la hoja pone ahí un resplandor tenue en el relleno y un filete de luz en el borde,
   por su `::before` recortado a 1 px. Sin puntero, el centro queda fuera y no se ve nada. En la sección noche, con el
   brillo. Sólo con movimiento permitido y puntero fino: en táctil no se escucha. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	#main :is(.fusion-layout-column.cx-tar, .fusion-layout-column.cx-plan) > .fusion-column-wrapper, #main .cx-nov-item { position: relative; background-image: radial-gradient(320px circle at var(--cx-x, -999px) var(--cx-y, -999px), color-mix(in srgb, var(--azul) 7%, transparent), transparent 70%); }
	#main :is(.fusion-layout-column.cx-tar, .fusion-layout-column.cx-plan) > .fusion-column-wrapper::before, #main .cx-nov-item::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: radial-gradient(220px circle at var(--cx-x, -999px) var(--cx-y, -999px), var(--azul), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
	#main .fusion-fullwidth.cx-sec.cx-sec-noche :is(.fusion-layout-column.cx-tar > .fusion-column-wrapper, .cx-nov-item) { background-image: radial-gradient(320px circle at var(--cx-x, -999px) var(--cx-y, -999px), color-mix(in srgb, var(--hero-brillo) 14%, transparent), transparent 70%); }
	#main .fusion-fullwidth.cx-sec.cx-sec-noche :is(.fusion-layout-column.cx-tar > .fusion-column-wrapper, .cx-nov-item)::before { background: radial-gradient(220px circle at var(--cx-x, -999px) var(--cx-y, -999px), var(--hero-brillo), transparent 70%); }
	/* Brillo en la compra (guKLlUlu): al entrar el puntero, un brillo cruza el botón verde una vez, bajo el texto. */
	.cx-btn-compra { position: relative; overflow: hidden; isolation: isolate; }
	.cx-btn-compra::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent); transform: translateX(-120%); pointer-events: none; }
	.cx-btn-compra:hover::after { animation: cx-brillo .7s ease-out; }
}
@keyframes cx-lam-traza { from { stroke-dashoffset: 1200; } }
@keyframes cx-lam-llega { from { opacity: 0; } }
@keyframes cx-hero-luz { to { transform: translate3d(-10%, 14%, 0) scale(1.15); } }
@keyframes cx-flota { to { transform: translateY(-10px); } }
@keyframes cx-baja { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes cx-pasa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes cx-crece { from { transform: scaleX(0); } }
@keyframes cx-latido { 50% { opacity: .35; } }
@keyframes cx-giro { to { --cx-giro: 360deg; } }
@keyframes cx-traza-y { from { transform: scaleY(0); } }
@keyframes cx-hito { from { opacity: 0; transform: translateY(8px); } }
@keyframes cx-onda { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes cx-paso-x { 0% { transform: translateX(-14px); } 15%, 100% { transform: translateX(80px); } }
@keyframes cx-paso-y { 0% { transform: translateY(-14px); } 15%, 100% { transform: translateY(40px); } }
@keyframes cx-troncal { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
@keyframes cx-lectura { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cx-brillo { from { transform: translateX(-120%); } to { transform: translateX(280%); } }
@keyframes cx-escanea { 0% { transform: translateY(-60%); } 60%, 100% { transform: translateY(60%); } }
@property --cx-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes cx-tecla { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
/* Impresa, la página sale entera aunque no se haya recorrido. */
@media print { #main .cx-ver { opacity: 1; transform: none; } }