/* 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); }
/* XU78VCvu: también la lámina en cabeza de una tarjeta `cx-tar` («Elige tu plan» de /wordpress/). */
#main .cx-tar > .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; z-index: 1; 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%; }
/* Vídeo en una sección del sistema (iXLd5Ttr): el radio de las láminas y aire antes de su pie. */
#main .fusion-fullwidth.cx-sec .fusion-video { border-radius: var(--radio-control); overflow: hidden; }
#main .fusion-fullwidth.cx-sec .fusion-video + .fusion-text { margin-top: var(--space-3); }
.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; }
}

/* Tarjeta de estado (cx-estado, v6VtJihd). En el hero de la portada, en lugar de la ilustración 3D: una tarjeta de
   cristal sobre el azul que dice la propuesta con datos de FACTS. «tu-sitio.co · en línea» con su punto, la latencia
   grande (16,9 ms desde Bogotá), dos barras (`cx-estado-barra`; `propia` es la de Conexcol) y los datos del datacenter
   en fichas. Va con `aria-hidden`: repite lo que la página dice más abajo. Con movimiento, las barras crecen al cargar
   y el punto late. Desde 91CxN5cb también en los heroes de /contacto/ (horario de soporte), /afiliados/ (comisión) y
   /wordpress/ (latencia), con el texto a la izquierda aunque la columna de Avada centre. La barra es un
   `<meter min="0" max="100" value>` (ePBSZXnW): el ancho es un dato del marcado y no estilo, así que también cabe en
   una landing, que no admite `style`. Una fila sin <meter> es un dato sin barra. */
.cx-estado { position: relative; width: 100%; max-width: 380px; margin-left: auto; padding: var(--space-5); text-align: left; border-radius: var(--radio-destacada); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); box-shadow: 0 30px 60px -24px rgba(5,22,40,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--on-hero); }
.cx-estado-cab { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--on-hero); }
.cx-estado-cab i { width: 8px; height: 8px; border-radius: 50%; background: var(--on-hero); box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.cx-estado-ms { margin: 0; font: 600 64px/60px var(--font-sans); letter-spacing: -.04em; color: var(--on-hero); }
.cx-estado-ms small { margin-left: 6px; font-size: 22px; font-weight: 500; letter-spacing: 0; }
.cx-estado-sub { margin: var(--space-2) 0 var(--space-5); font-size: 14px; line-height: 20px; color: color-mix(in srgb, var(--on-hero) 86%, var(--hero)); }
.cx-estado-barras { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); }
.cx-estado-barra { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-3); margin: 0; font: 500 12px/16px var(--font-mono); color: var(--on-hero); }
.cx-estado-barra meter { grid-column: 1 / -1; display: block; width: 100%; height: 6px; margin: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.16); -webkit-appearance: none; appearance: none; transform-origin: left center; }
.cx-estado-barra meter::-webkit-meter-inner-element { display: block; height: 100%; }
.cx-estado-barra meter::-webkit-meter-bar { height: 100%; border: 0; border-radius: 3px; background: transparent; }
.cx-estado-barra meter::-webkit-meter-optimum-value { border-radius: 3px; background: rgba(255,255,255,.5); }
.cx-estado-barra meter::-moz-meter-bar { border-radius: 3px; background: rgba(255,255,255,.5); }
.cx-estado-barra.propia meter::-webkit-meter-optimum-value { background: var(--on-hero); box-shadow: 0 0 12px rgba(255,255,255,.6); }
.cx-estado-barra.propia meter::-moz-meter-bar { background: var(--on-hero); box-shadow: 0 0 12px rgba(255,255,255,.6); }
.cx-estado-datos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; }
.cx-estado-datos li { margin: 0; padding: 4px 10px; border-radius: var(--radio-capsula); background: rgba(255,255,255,.12); font: 500 12px/16px var(--font-mono); color: var(--on-hero); }

/* Selector «¿Qué quieres lanzar hoy?» (cx-lanza, 3unUedjh). En el hero de la portada, en lugar de la tarjeta de estado:
   David pidió que el hero le hable a quien quiere montar su negocio, no al técnico. Ocho opciones (`cx-lanza-rej`), cada
   una un enlace con su icono de línea, su nombre en `strong` y una frase en `small`. Sin precios: el botón del hero ya
   lo lleva. En escritorio, una tarjeta de cristal con dos columnas; en móvil y tableta, una fila que se desliza con el
   dedo, sólo con el nombre. Con movimiento, las opciones entran en cascada, los iconos se dibujan y, con ratón, la
   opción se levanta. */
.cx-lanza { position: relative; width: 100%; max-width: 440px; margin-left: auto; padding: var(--space-5); border-radius: var(--radio-destacada); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); box-shadow: 0 30px 60px -24px rgba(5,22,40,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--on-hero); text-align: left; }
.cx-lanza-cab { margin: 0 0 var(--space-3); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--on-hero); }
#main .cx-lanza-rej { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
#main .cx-lanza-rej li { margin: 0; padding: 0; }
#main .cx-lanza-rej a { display: flex; gap: 10px; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: var(--radio-control); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--on-hero); text-decoration: none; }
#main .cx-lanza-rej a:focus-visible { outline: 2px solid var(--on-hero); outline-offset: 2px; }
#main .cx-lanza-rej svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-lanza-rej strong { display: block; font: 600 14px/18px var(--font-sans); color: var(--on-hero); }
#main .cx-lanza-rej small { display: block; margin-top: 2px; font: 400 12px/16px var(--font-sans); color: color-mix(in srgb, var(--on-hero) 86%, var(--hero)); }
@media (max-width: 1024px) {
	.cx-lanza { max-width: none; margin: var(--space-4) 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	#main .cx-lanza-rej { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 2px 2px var(--space-2); margin-inline: -2px; scrollbar-width: none; }
	#main .cx-lanza-rej::-webkit-scrollbar { display: none; }
	#main .cx-lanza-rej li { flex: 0 0 auto; scroll-snap-align: start; }
	#main .cx-lanza-rej a { align-items: center; padding: 9px 14px; border-radius: var(--radio-capsula); white-space: nowrap; }
	#main .cx-lanza-rej svg { margin-top: 0; }
	#main .cx-lanza-rej small { display: none; }
}

/* Mosaico «Todo incluido» (vCijZXkZ). Las listas de 15 a 30 viñetas de las páginas de producto pasan a seis tarjetas
   `cx-tar` destacadas, cada una con su icono de línea en caja (`cx-icono`), y la lista completa, con su texto de
   siempre, en un `details.cx-faq` (`cx-incluye-todo`) con sus grupos (`cx-incluye-grupo`). El icono se dibuja cuando su
   tarjeta entra en pantalla: el guion le pone `cx-traza`. */
#main .cx-icono { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 0 var(--space-4); border-radius: var(--radio-control); background: var(--azul-suave); color: var(--azul); }
#main .cx-icono svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-incluye-todo { margin-top: var(--space-6); }
/* `.cx-faq div` limita el ancho y da relleno a sus div: aquí la lista ocupa todo el ancho. */
#main .cx-incluye-todo .cx-incluye-grupos { max-width: none; padding: 0; }
#main .cx-incluye-todo .cx-incluye-grupo { max-width: none; padding: 0; break-inside: avoid; margin: 0 0 var(--space-5); }
#main .cx-incluye-todo .cx-incluye-grupo h4 { margin: 0 0 var(--space-2); font: 600 16px/22px var(--font-sans); color: var(--tinta); }
#main .cx-incluye-todo .cx-lista { margin: 0; }
#main .cx-incluye-todo .cx-incluye-nota { margin: 0; font-size: 14px; line-height: 20px; color: var(--texto-2); }
@media (max-width: 640px) {
	#main .fusion-fullwidth.cx-incluye .fusion-layout-column.cx-tar > .fusion-column-wrapper { padding: var(--space-4); }
	#main .fusion-fullwidth.cx-incluye .cx-tar .fusion-text { display: none; }
	#main .fusion-fullwidth.cx-incluye .cx-tar .cx-icono { width: 40px; height: 40px; margin-bottom: var(--space-3); }
	#main .fusion-fullwidth.cx-incluye .cx-tar h4 { font-size: 15px; line-height: 20px; }
}
@media (min-width: 1025px) {
	#main .cx-incluye-todo .cx-incluye-grupos { columns: 2; column-gap: var(--space-7); }
}

/* Asistente «¿Qué servidor necesitas?» (cx-elige, t6PfQjbw). En /cloud/, antes de la rejilla de planes: dos preguntas en
   fichas (`cx-elige-ops`, radios de verdad: se navegan con el teclado y se leen como grupo) y, al lado, el plan
   recomendado (`cx-elige-res`, la tarjeta del catálogo de HostBill). El guion de la sección le pone `cx-on` al resultado
   que toca; sin guion se ve el de las respuestas marcadas por defecto. La ficha elegida lleva borde, fondo y una marca
   de verificación, no sólo color. */
#main .cx-elige-form { display: grid; gap: var(--space-5); }
#main .cx-elige-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#main .cx-elige-form legend { margin: 0 0 var(--space-3); padding: 0; font: 600 16px/22px var(--font-sans); color: var(--tinta); }
#main .cx-elige-ops { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#main .cx-elige-ops label { position: relative; margin: 0; cursor: pointer; }
#main .cx-elige-ops input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
#main .cx-elige-ops span { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: var(--radio-capsula); border: 1px solid var(--linea-control); background: var(--superficie); font: 500 15px/20px var(--font-sans); color: var(--tinta); }
#main .cx-elige-ops input:checked + span { border-color: var(--azul); background: var(--azul-suave); color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
#main .cx-elige-ops input:checked + span::before { content: "✓"; font-weight: 600; }
#main .cx-elige-ops input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
#main .cx-elige-res:not(.cx-on) { display: none; }
/* La rejilla del catálogo reserva tres columnas; con un solo plan, la tarjeta ocupa su columna. */
#main .cx-elige-res .cxl-hb-catalog .cxa-precios { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin: 0; }
#main .cx-elige-por { margin: 0 0 var(--space-3); font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--azul); }
#main .cx-elige-nota { margin: var(--space-3) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-2); }

/* Puntos de restauración (cx-resp, vaSvROUZ). En /hosting/, «Tu información está respaldada»: los puntos de POL-SEC-004
   para servidores cPanel en una línea de tiempo sobre panel oscuro (`<figure class="cx-resp">`). La lista (`cx-resp-linea`)
   va de ahora hacia atrás: las diarias (tres puntos), la semanal y la mensual. Cada punto es un `<i>`; el de ahora va
   lleno. Debajo, lo que guarda cada punto (`cx-resp-guarda`, con iconos de línea) y, al pie, cómo se restaura. En móvil, la línea va en vertical. */
#main .cx-resp { margin: 0; padding: var(--space-6); border-radius: var(--radio-destacada); background: var(--terminal); color: var(--terminal-texto); box-shadow: var(--sombra-flotante); }
#main .cx-resp-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); margin: 0; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: #97a8b8; }
#main .cx-resp-cab b { font-weight: 500; color: var(--terminal-acento); }
#main .cx-resp-linea { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0; padding: 0; list-style: none; }
/* El riel, y la luz que lo recorre de ahora al último mes (sólo con movimiento; sin él, el riel ya va iluminado). */
#main .cx-resp-linea::before, #main .cx-resp-linea::after { content: ""; position: absolute; top: 7px; left: 8px; right: calc((100% - 3 * var(--space-4)) / 4 - 8px); height: 2px; border-radius: 1px; }
#main .cx-resp-linea::before { background: #233a50; }
#main .cx-resp-linea::after { background: linear-gradient(90deg, var(--terminal-acento), rgba(90, 171, 245, .35)); transform-origin: 0 0; }
#main .cx-resp-linea li { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 32px 0 0; }
#main .cx-resp-linea i { position: absolute; top: 0; left: 0; z-index: 1; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--terminal-acento); border-radius: 50%; background: var(--terminal); }
#main .cx-resp-linea i:nth-of-type(2) { left: 22px; }
#main .cx-resp-linea i:nth-of-type(3) { left: 44px; }
#main .cx-resp-linea .cx-resp-hoy i { background: var(--terminal-acento); box-shadow: 0 0 0 4px rgba(90, 171, 245, .2); }
#main .cx-resp-linea b { font: 600 16px/22px var(--font-sans); color: #fff; overflow-wrap: normal; word-break: normal; }
#main .cx-resp-linea span { font-size: 13px; line-height: 18px; color: #b3c1ce; }
#main .cx-resp-guarda { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
#main .cx-resp-guarda li { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; padding: 6px 12px 6px 8px; border: 1px solid #233a50; border-radius: var(--radio-capsula); font-size: 14px; line-height: 20px; color: var(--terminal-texto); }
#main .cx-resp-guarda svg { width: 18px; height: 18px; fill: none; stroke: var(--terminal-acento); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-resp-pie { margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid #233a50; font-size: 15px; line-height: 22px; color: var(--terminal-texto); }
#main .cx-resp-pie a { color: var(--terminal-acento); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
	#main .cx-resp { padding: var(--space-5); }
	#main .cx-resp-linea { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	#main .cx-resp-linea::before, #main .cx-resp-linea::after { top: 8px; bottom: 36px; left: 7px; right: auto; width: 2px; height: auto; }
	#main .cx-resp-linea::after { background: linear-gradient(180deg, var(--terminal-acento), rgba(90, 171, 245, .35)); }
	#main .cx-resp-linea li { padding: 0 0 0 32px; }
	#main .cx-resp-linea i:nth-of-type(2), #main .cx-resp-linea i:nth-of-type(3) { left: 0; top: 0; opacity: 0; }
}

/* Banda de aplicaciones (cx-banda, vaSvROUZ). En /hosting/, «Cientos de web apps gratuitas»: tres filas
   (`ul.cx-banda-fila`) de fichas que enlazan a su ficha del catálogo. Cada ficha lleva el logotipo en blanco sobre el color de marca
   (`--cx-marca`, oscurecido si hace falta para que el glifo pase de 3:1; sin logotipo, la inicial) o, si el logotipo trae
   sus propios colores, sobre baldosa blanca (`cx-banda-orig`), con el nombre y para qué sirve. También en /hosting/reseller/
   (4NegQe2C). Los logotipos van una sola vez, como
   `<symbol>` en un sprite (`cx-banda-sprite`), y cada ficha los usa con `<use>`. Cada fila lleva su lista dos
   veces: la copia (`<li aria-hidden="true">`, enlaces fuera del tabulador) sólo se ve con movimiento, para dar la vuelta
   sin salto. Sin movimiento, las fichas se acomodan en filas y el botón de pausa no aparece. */
#main .cx-banda { position: relative; margin: var(--space-6) 0 0; }
#main .cx-banda-pista { display: grid; gap: var(--space-3); }
#main .cx-banda-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); }
#main .cx-banda-pausa { display: none; }
#main .cx-banda-fila { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
#main .cx-banda-fila > [aria-hidden="true"] { display: none; }
#main .cx-banda-fila li { margin: 0; }
#main .cx-banda-fila a { display: grid; grid-template-columns: 40px auto; column-gap: var(--space-3); align-items: center; padding: 8px 18px 8px 8px; border: 1px solid var(--linea); border-radius: 14px; background: var(--superficie); color: var(--tinta); text-decoration: none; white-space: nowrap; }
#main .cx-banda-fila a:hover { border-color: var(--linea-control); }
#main .cx-banda-fila a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
#main .cx-banda-fila i { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--cx-marca, var(--azul)); color: #fff; font: 700 17px/1 var(--font-sans); font-style: normal; }
#main .cx-banda-fila i svg { width: 24px; height: 24px; fill: currentColor; }
#main .cx-banda-fila i.cx-banda-orig { background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
#main .cx-banda-fila i.cx-banda-orig svg { width: 30px; height: 30px; }
#main .cx-banda-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#main .cx-banda-fila b { font: 600 15px/20px var(--font-sans); }
#main .cx-banda-fila span { font: 500 12px/16px var(--font-mono); color: var(--texto-3); }

/* Buzón (cx-buzon, QuvjWVrG). En /correo/, «Tu correo ya viene incluido»: una ventana de cuentas de correo
   (`<figure class="cx-buzon">`) con las del ejemplo (`ventas@`, `facturacion@`…), cada una con su inicial y su precio
   ($0), una de otra marca (`cx-buzon-otra`: los dominios también son ilimitados) y la fila para crear otra
   (`cx-buzon-nueva`, con borde punteado). Con movimiento, las cuentas entran una tras otra al llegar. */
#main .cx-buzon { margin: 0; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-destacada); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-buzon-barra { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px var(--space-5); border-bottom: 1px solid var(--linea); background: var(--nube); font: 500 12px/16px var(--font-mono); letter-spacing: .02em; color: var(--texto-3); }
#main .cx-buzon-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--linea); }
#main .cx-buzon-barra span { margin-left: var(--space-2); }
#main .cx-buzon-lista { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-5); list-style: none; }
#main .cx-buzon-lista li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin: 0; padding: 10px 14px 10px 10px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); }
#main .cx-buzon-lista i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 700 14px/1 var(--font-sans); font-style: normal; }
#main .cx-buzon-lista li:nth-child(2) i { background: var(--acierto); }
#main .cx-buzon-lista li:nth-child(3) i { background: var(--noche); }
#main .cx-buzon-lista b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 15px/20px var(--font-mono); color: var(--tinta); }
#main .cx-buzon-lista span { padding: 2px 10px; border-radius: var(--radio-capsula); background: var(--acierto-suave); font: 600 13px/18px var(--font-sans); color: var(--acierto); }
#main .cx-buzon-lista .cx-buzon-otra { background: var(--nube); }
#main .cx-buzon-lista .cx-buzon-otra i { background: var(--ambar); }
#main .cx-buzon-lista .cx-buzon-nueva { border-style: dashed; border-color: var(--azul); background: var(--azul-suave); }
#main .cx-buzon-lista .cx-buzon-nueva i { background: var(--superficie); color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); font-size: 18px; }
#main .cx-buzon-lista .cx-buzon-nueva b { font-family: var(--font-sans); font-weight: 600; color: var(--azul); }
#main .cx-buzon-lista .cx-buzon-nueva span { background: var(--superficie); color: var(--azul); }
#main .cx-buzon figcaption { margin: 0; padding: 0 var(--space-5) var(--space-5); font-size: 14px; line-height: 20px; color: var(--texto-2); }
@media (max-width: 640px) {
	#main .cx-buzon-lista { padding: var(--space-4); }
	#main .cx-buzon-lista b { font-size: 13px; }
	#main .cx-buzon figcaption { padding: 0 var(--space-4) var(--space-4); }
}

/* El viaje del correo firmado (cx-firma, QuvjWVrG). En /correo/, sobre el bloque noche: de tu servidor en Colombia
   a la bandeja de entrada (`ol.cx-firma-ruta`, cinco etapas), pasando los tres controles que hacen los proveedores de
   correo (`cx-firma-paso`: SPF, DKIM y DMARC, cada uno con lo que comprueba). Cada control lleva su palomita, no sólo
   color. Con movimiento, un sobre (`cx-firma-sobre`) recorre el carril y cada control se marca cuando pasa; en móvil
   la ruta va en columna y el sobre no viaja. */
#main .cx-firma { position: relative; margin: var(--space-6) 0 0; padding: var(--space-6); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radio-destacada); background: rgba(255, 255, 255, .045); color: var(--on-hero); }
#main .cx-firma-ruta { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
#main .cx-firma-ruta::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--hero-brillo), rgba(77, 163, 255, .25)); }
#main .cx-firma-ruta li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; text-align: center; }
#main .cx-firma-ruta li > b { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 var(--space-2); border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; background: var(--noche); font: 600 14px/1 var(--font-mono); letter-spacing: .02em; color: #fff; }
#main .cx-firma-ruta li > b svg { width: 26px; height: 26px; fill: none; stroke: var(--hero-brillo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-firma-ruta strong { font: 600 15px/20px var(--font-sans); color: #fff; }
#main .cx-firma-ruta span { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .78); }
#main .cx-firma-paso b::after { content: "✓"; position: absolute; right: -8px; top: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--acierto); font: 700 12px/1 var(--font-sans); color: #fff; box-shadow: 0 0 0 3px var(--noche); }
#main .cx-firma-llega b { border-color: var(--hero-brillo); box-shadow: 0 0 0 4px rgba(77, 163, 255, .18); }
#main .cx-firma-sobre { display: none; }
#main .cx-firma figcaption { margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .86); }
#main .cx-firma figcaption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
	#main .cx-firma { padding: var(--space-5); }
	#main .cx-firma-ruta { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	#main .cx-firma-ruta::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--hero-brillo), rgba(77, 163, 255, .25)); }
	#main .cx-firma-ruta li { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-4); align-items: center; text-align: left; }
	#main .cx-firma-ruta li > b { grid-row: span 2; margin: 0; }
	#main .cx-firma-ruta strong { align-self: end; }
	#main .cx-firma-ruta span { align-self: start; }
}

/* Lo que hace el correo (cx-correo, mnFWyUO7). En /correo/, «Todo lo que hace tu correo»: seis escenas en rejilla
   (`ul.cx-correo-escenas`). Cada una lleva su viñeta (`cx-correo-vista`, decorativa), su título y una línea:
   reenviadores, respuestas automáticas, filtros, antispam y antivirus, listas de correo, y calendario y contactos. Las
   seis están medidas en los siete servidores (inventario de RGvaPkdW). Quieta, cada viñeta ya cuenta su escena: los
   sobres en su destino, la burbuja de respuesta, el boletín en su fila, el ✕ en el filtro. Con movimiento corre en
   bucle al entrar en pantalla. Lo que pasa y lo que se frena se marca con ✓ y ✕, no sólo con color. Las posiciones
   van en `cqw` (la viñeta es un contenedor), así que la escena es la misma a cualquier ancho. */
#main .cx-correo { margin: var(--space-6) 0 0; }
#main .cx-correo-escenas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
#main .cx-correo-esc { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-4) var(--space-4) var(--space-5); border: 1px solid var(--linea); border-radius: var(--radio-destacada); background: var(--superficie); }
#main .cx-correo-esc h3 { margin: var(--space-3) 0 0; font: 600 18px/24px var(--font-sans); color: var(--tinta); }
#main .cx-correo-esc > p { margin: 0; font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-correo-vista { position: relative; height: 140px; overflow: hidden; border-radius: var(--radio-control); background: var(--nube); container-type: inline-size; }
#main .cx-correo-vista *, #main .cx-correo-vista *::after { box-sizing: border-box; }
#main .cx-correo-vista p { margin: 0; }
#main .cx-correo-vista :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
#main .cx-correo-chip { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--linea); border-radius: var(--radio-capsula); background: var(--superficie); font: 500 12px/16px var(--font-mono); color: var(--tinta); white-space: nowrap; }
#main .cx-correo-chip i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 700 11px/1 var(--font-sans); font-style: normal; }
#main .cx-correo-origen { left: 8px; top: 50%; transform: translateY(-50%); }
#main .cx-correo-arriba { right: 8px; top: 16px; }
#main .cx-correo-abajo { right: 8px; bottom: 16px; }
#main .cx-correo-arriba i, #main .cx-correo-abajo i { background: var(--acierto); }
#main .cx-correo-hilos { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--linea-control); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
#main .cx-correo-hilos path { vector-effect: non-scaling-stroke; }
#main .cx-correo-sobre { position: absolute; z-index: 2; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; }
#main .cx-correo-sobre svg { display: block; width: 22px; height: 22px; fill: var(--superficie); stroke: var(--azul); stroke-width: 1.6; stroke-linejoin: round; }
#main .cx-correo-s2 { opacity: 1; transform: translate(calc(100cqw - 112px), 20px); }
#main .cx-correo-s3 { opacity: 1; transform: translate(calc(100cqw - 112px), 98px); }
#main .cx-correo-burbuja { position: absolute; padding: 8px 12px; font: 400 13px/18px var(--font-sans); }
#main .cx-correo-entra { left: 10px; top: 12px; max-width: 64%; border: 1px solid var(--linea); border-radius: 14px 14px 14px 4px; background: var(--superficie); color: var(--tinta); }
#main .cx-correo-sale { right: 10px; bottom: 12px; max-width: 76%; border-radius: 14px 14px 4px 14px; background: var(--azul); color: var(--on-azul); }
#main .cx-correo-sale b { display: block; margin: 0 0 2px; font: 600 11px/14px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
#main .cx-correo-bandeja { position: absolute; left: 10px; top: 14px; display: grid; gap: 6px; width: 58%; }
#main .cx-correo-bandeja li { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); font: 500 12px/16px var(--font-sans); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#main .cx-correo-bandeja .cx-correo-boletin { border-style: dashed; border-color: var(--azul); background: var(--azul-suave); color: var(--azul); }
#main .cx-correo-carpeta { position: absolute; right: 12px; top: 50%; display: grid; justify-items: center; gap: 4px; transform: translateY(-50%); font: 500 12px/16px var(--font-mono); color: var(--azul); }
#main .cx-correo-carpeta svg { width: 40px; height: 40px; fill: var(--azul-suave); stroke: var(--azul); stroke-width: 1.4; stroke-linejoin: round; }
#main .cx-correo-capa { position: absolute; top: 8px; bottom: 10px; display: flex; justify-content: center; width: 0; font: 600 10px/12px var(--font-mono); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: var(--azul); }
#main .cx-correo-capa::after { content: ""; position: absolute; top: 20px; bottom: 0; left: -1px; border-left: 2px dashed var(--azul); }
#main .cx-correo-c1 { left: 28%; }
#main .cx-correo-c2 { left: 52%; }
#main .cx-correo-c3 { left: 76%; }
#main .cx-correo-bueno { opacity: 1; transform: translate(calc(100cqw - 56px), 46px); }
#main .cx-correo-malo { opacity: 1; transform: translate(calc(52cqw - 36px), 92px); }
#main .cx-correo-malo svg { stroke: var(--texto-3); }
#main .cx-correo-marca { position: absolute; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 11px/1 var(--font-sans); color: #fff; }
#main .cx-correo-si { right: 8px; top: 47px; background: var(--acierto); }
#main .cx-correo-no { left: calc(52% - 10px); top: 93px; background: var(--error-fuerte); }
#main .cx-correo-miembros { position: absolute; right: 14px; top: 50%; display: grid; gap: 3px; transform: translateY(-50%); }
#main .cx-correo-miembros li { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 700 11px/1 var(--font-sans); }
#main .cx-correo-celular, #main .cx-correo-portatil { position: absolute; top: 14px; border: 2px solid var(--tinta); background: var(--superficie); }
#main .cx-correo-celular { left: 8%; width: 76px; height: 114px; padding: 22px 5px 6px; border-radius: 14px; }
#main .cx-correo-portatil { right: 7%; width: 40%; height: 82px; padding: 14px 8px 8px; border-radius: 8px 8px 2px 2px; }
#main .cx-correo-portatil::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -12px; height: 8px; border-radius: 0 0 6px 6px; background: var(--tinta); }
#main :is(.cx-correo-celular, .cx-correo-portatil) { font: 500 11px/14px var(--font-sans); color: var(--tinta); }
#main .cx-correo-evento { display: block; padding: 4px 6px; border-left: 3px solid var(--azul); border-radius: 4px; background: var(--azul-suave); }
#main .cx-correo-evento b { display: block; font: 600 11px/14px var(--font-mono); color: var(--azul); }
#main .cx-correo-celular { overflow: hidden; }
#main .cx-correo-sincro { position: absolute; left: calc(30.5% + 24px); top: 52px; width: 28px; height: 28px; }
#main .cx-correo-sincro svg { width: 28px; height: 28px; fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1024px) {
	#main .cx-correo-escenas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	#main .cx-correo-escenas { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* Pestañas (cx-pestanas, YBmXAKdi). Una caja `cx-pestanas` con su lista (`cx-pestanas-lista`, role=tablist, con el
   aspecto de `cx-pest`) y un panel por pestaña. El guion (componentes.js) elige y oculta; sin él la lista no se ve y
   los paneles van uno tras otro, completos. */
#main .cx-pestanas:not(.cx-pestanas-listo) .cx-pestanas-lista { display: none; }
#main .cx-pestanas [role="tabpanel"][hidden] { display: none; }

/* Tu correo en tu dispositivo (cx-disp, YBmXAKdi). En /correo/, bajo «Tu correo, listo en cuatro pasos». Hay una
   pestaña por dispositivo, y cada panel lleva:
   - el aparato (`cx-disp-aparato`): un celular en iPhone y Android, una ventana en Outlook y Thunderbird. Dentro van la
     ruta de menús y los datos de la cuenta en un `dl` real;
   - al lado, los tres pasos y el enlace al artículo.
   El servidor es el de la cuenta (`cpanelN-co…`, con la N resaltada), porque en `mail.tudominio.com` el certificado
   que llega es el del servidor (xYY4z1S8). Con movimiento, al elegir un dispositivo los campos se escriben uno tras
   otro. */
#main .cx-disp { margin: var(--space-7) 0 0; }
#main .cx-disp-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: center; }
#main .cx-disp-panel + .cx-disp-panel { margin-top: var(--space-7); }
#main .cx-disp-aparato { position: relative; box-sizing: border-box; justify-self: center; width: 100%; border: 2px solid var(--tinta); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-disp-movil .cx-disp-aparato { max-width: 300px; padding: 44px 16px 26px; border-radius: 36px; }
#main .cx-disp-movil .cx-disp-aparato::before { content: ""; position: absolute; top: 14px; left: 50%; width: 72px; height: 8px; margin-left: -36px; border-radius: 8px; background: var(--tinta); }
#main .cx-disp-escritorio .cx-disp-aparato { max-width: 540px; padding: 50px 22px 24px; border-radius: 12px; }
#main .cx-disp-escritorio .cx-disp-aparato::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 32px; border-bottom: 1px solid var(--linea); border-radius: 10px 10px 0 0; background: radial-gradient(circle at 18px 16px, var(--linea-control) 4px, transparent 5px), radial-gradient(circle at 34px 16px, var(--linea-control) 4px, transparent 5px), radial-gradient(circle at 50px 16px, var(--linea-control) 4px, transparent 5px), var(--nube); }
#main .cx-disp-ruta { margin: 0 0 var(--space-4); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--linea); font: 500 12px/18px var(--font-mono); color: var(--texto-3); }
#main .cx-disp-campos { display: grid; gap: var(--space-3); margin: 0; }
#main .cx-disp .cx-pestanas-lista { margin: 0 0 var(--space-6); }
#main .cx-disp-escritorio .cx-disp-campos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--space-4); }
#main .cx-disp-campos div { min-width: 0; margin: 0; }
#main .cx-disp-campos dt { margin: 0 0 4px; font: 500 12px/16px var(--font-sans); color: var(--texto-3); }
#main .cx-disp-campos dd { position: relative; margin: 0; padding: 8px 10px; overflow: hidden; border: 1px solid var(--linea-control); border-radius: 8px; background: var(--superficie); font: 500 14px/20px var(--font-mono); color: var(--tinta); white-space: nowrap; text-overflow: ellipsis; }
#main .cx-disp-campos dd b { padding: 0 1px; border-radius: 4px; background: var(--azul-suave); font-weight: 700; color: var(--azul); }
#main .cx-disp-texto h3 { margin: 0 0 var(--space-4); font: 600 22px/28px var(--font-sans); color: var(--tinta); }
#main .cx-disp-texto ol { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; counter-reset: cx-disp; }
#main .cx-disp-texto li { position: relative; margin: 0; padding-left: 40px; font-size: 16px; line-height: 24px; color: var(--texto-2); counter-increment: cx-disp; }
#main .cx-disp-texto li::before { content: counter(cx-disp); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul-suave); font: 700 14px/1 var(--font-sans); color: var(--azul); }
#main .cx-disp-texto p { margin: 0; }
#main .cx-disp-texto a { font-weight: 600; }
#main .cx-disp figcaption { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-disp figcaption b { color: var(--azul); }
@media (max-width: 1024px) {
	#main .cx-disp-panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 640px) {
	#main .cx-disp-escritorio .cx-disp-campos { grid-template-columns: minmax(0, 1fr); }
	#main .cx-disp-movil .cx-disp-aparato { max-width: 280px; }
	#main .cx-disp .cx-pestanas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tu cPanel, por dentro (cx-panel, 4OPd0zT8). En /hosting/, sobre el bloque noche: una ventana clara con su barra
   (`cx-panel-barra`: el nombre, el buscador y el avatar, decorativos) y el cuerpo (`cx-panel-cuerpo`):
   - a la izquierda, los grupos (`cx-panel-grupos`), pestañas verticales de `cx-pestanas` con su icono;
   - a la derecha, el grupo elegido: la ruta, el nombre, lo que haces con él y sus herramientas en rejilla
     (`cx-panel-herr`), cada una con su icono en caja.
   La elegida lleva una barra azul, no sólo color. Sin guion no hay lista y los grupos van completos, uno tras otro.
   En tableta los grupos son una fila que se desliza; en móvil, dos herramientas por fila. */
#main .cx-panel { margin: var(--space-6) 0 0; overflow: hidden; border-radius: var(--radio-destacada); background: var(--superficie); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); color: var(--tinta); }
#main .cx-panel-barra { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 12px var(--space-5); border-bottom: 1px solid var(--linea); background: var(--nube); }
#main .cx-panel-barra b { font: 700 18px/24px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); }
#main .cx-panel-barra span { flex: 1 1 auto; max-width: 420px; margin: 0 auto; padding: 7px 14px; border: 1px solid var(--linea); border-radius: var(--radio-capsula); background: var(--superficie); font: 400 13px/18px var(--font-sans); color: var(--texto-3); }
#main .cx-panel-barra i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--azul); font: 700 12px/1 var(--font-sans); font-style: normal; color: var(--on-azul); }
#main .cx-panel-cuerpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 440px; }
#main .cx-panel:not(.cx-pestanas-listo) .cx-panel-cuerpo { grid-template-columns: minmax(0, 1fr); }
#main .cx-panel-grupos { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--space-3); border-right: 1px solid var(--linea); background: var(--nube); }
#main .cx-panel-grupos [role="tab"] { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: var(--radio-control); background: transparent; font: 500 15px/20px var(--font-sans); text-align: left; color: var(--texto-2); cursor: pointer; }
#main .cx-panel-grupos [role="tab"] svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-panel-grupos [role="tab"]:hover { background: var(--superficie); color: var(--tinta); }
#main .cx-panel-grupos [role="tab"][aria-selected="true"] { background: var(--superficie); box-shadow: inset 3px 0 0 var(--azul), 0 1px 2px rgba(11, 37, 64, .08); font-weight: 600; color: var(--azul); }
#main .cx-panel-grupos [role="tab"]:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
#main .cx-panel-grupo { padding: var(--space-5) var(--space-6) var(--space-6); }
#main .cx-panel-grupo + .cx-panel-grupo { border-top: 1px solid var(--linea); }
#main .cx-panel-ruta { margin: 0 0 var(--space-2); font: 500 12px/16px var(--font-mono); color: var(--texto-3); }
#main .cx-panel-grupo h3 { margin: 0 0 var(--space-2); font: 600 24px/30px var(--font-sans); color: var(--tinta); }
#main .cx-panel-linea { max-width: 62ch; margin: 0 0 var(--space-5); font-size: 16px; line-height: 24px; color: var(--texto-2); }
#main .cx-panel-linea a { font-weight: 600; }
#main .cx-panel-herr { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
#main .cx-panel-herr li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin: 0; padding: 14px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); font: 500 14px/19px var(--font-sans); color: var(--tinta); }
#main .cx-panel-herr li svg { box-sizing: border-box; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--azul-suave); fill: none; stroke: var(--azul); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-panel figcaption { margin: 0; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--linea); background: var(--nube); font-size: 13px; line-height: 18px; color: var(--texto-3); }
@media (max-width: 1024px) {
	#main .cx-panel-cuerpo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	#main .cx-panel-grupos { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--linea); scrollbar-width: none; }
	#main .cx-panel-grupos [role="tab"] { flex: 0 0 auto; width: auto; white-space: nowrap; }
	#main .cx-panel-grupos [role="tab"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--azul), 0 1px 2px rgba(11, 37, 64, .08); }
}
@media (max-width: 640px) {
	#main .cx-panel-barra span { display: none; }
	#main .cx-panel-barra i { margin-left: auto; }
	#main .cx-panel-grupo { padding: var(--space-4); }
	#main .cx-panel-herr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
	#main .cx-panel-herr li { flex-direction: row; align-items: center; gap: 10px; padding: 10px; font-size: 13px; line-height: 17px; }
	#main .cx-panel-herr li svg { flex: 0 0 auto; width: 32px; height: 32px; padding: 7px; border-radius: 8px; }
}

/* Tu sitio sin código (cx-cons, wrkEP1dt). En /hosting/, «Constructor de sitios web»: tres pestañas grandes
   (`cx-cons-modos`, de `cx-pestanas`), una por herramienta, y en cada panel (`cx-cons-modo`) el texto y su ventana:
   - Arrastra y suelta (SitePad): el editor (`cx-cons-editor`), con el panel de bloques (`cx-cons-paleta`, una casilla
     por bloque) y la página (`cx-cons-lienzo`). El bloque sin marcar no está en la página;
   - Con IA (Sitejet): el generador (`cx-cons-generador`). El tipo de negocio elegido decide qué datos se ven
     (`cx-cons-d-*`) y qué sitio sale (`cx-cons-s-*`);
   - En unos clics (Softaculous): el instalador (`cx-cons-instalador`). La app elegida es la que se instala
     (`cx-cons-i-*`).
   Los controles son de verdad, ocultos pero enfocables; la hoja los lee con `:has()`. Sin `:has()` se ve lo que viene
   marcado. El recorrido pasa solo de pestaña y lo de abajo no debe saltar: con el guion, los tres paneles van en la
   misma celda y el oculto no se ve pero ocupa su sitio, así que la caja mide lo que el más alto. En escritorio, además,
   las tres ventanas miden lo mismo. */
#main .cx-cons { margin: var(--space-6) 0 0; }
#main .cx-cons.cx-pestanas-listo { display: grid; grid-template-columns: minmax(0, 1fr); }
#main .cx-cons.cx-pestanas-listo .cx-cons-modo { grid-area: 2 / 1; }
#main .cx-cons.cx-pestanas-listo .cx-cons-modo[hidden] { display: grid; visibility: hidden; }
#main .cx-cons-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-6); }
#main .cx-cons-modos [role="tab"] { display: flex; align-items: center; gap: var(--space-3); min-width: 0; margin: 0; padding: 14px 18px; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); text-align: left; color: var(--texto-2); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
#main .cx-cons-modos [role="tab"] svg { flex: none; box-sizing: border-box; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--azul-suave); fill: none; stroke: var(--azul); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: background-color .15s; }
#main .cx-cons-modos [role="tab"] span { min-width: 0; }
#main .cx-cons-modos [role="tab"] b { display: block; font: 600 17px/22px var(--font-sans); color: var(--tinta); }
#main .cx-cons-modos [role="tab"] small { display: block; font: 500 13px/18px var(--font-mono); color: var(--texto-3); }
#main .cx-cons-modos [role="tab"]:hover { border-color: var(--linea-control); }
#main .cx-cons-modos [role="tab"][aria-selected="true"] { border-color: var(--azul); box-shadow: inset 0 -3px 0 var(--azul), var(--sombra-flotante); }
#main .cx-cons-modos [role="tab"][aria-selected="true"] svg { background: var(--azul); stroke: var(--on-azul); }
#main .cx-cons-modos [role="tab"]:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
#main .cx-cons-modo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); align-items: center; align-content: center; }
#main .cx-cons:not(.cx-pestanas-listo) .cx-cons-modo + .cx-cons-modo { margin-top: var(--space-7); }
#main .cx-cons-texto h3 { margin: 0 0 var(--space-3); font: 600 26px/32px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); }
#main .cx-cons-texto p { margin: 0 0 var(--space-4); font-size: 17px; line-height: 26px; color: var(--texto-2); }
#main .cx-cons-texto p:last-child { margin: 0; }
#main .cx-cons-texto a { font-weight: 600; }
#main .cx-cons-texto .cx-cons-pista { display: flex; align-items: center; gap: 10px; font: 500 15px/22px var(--font-sans); color: var(--azul); }
#main .cx-cons-pista::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); box-shadow: 0 0 0 4px var(--azul-suave); }
#main .cx-cons-ventana { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-destacada); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-cons-barra { display: flex; align-items: center; gap: 6px; margin: 0; padding: 11px var(--space-4); border-bottom: 1px solid var(--linea); background: var(--nube); }
#main .cx-cons-barra > i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--linea-control); opacity: .5; }
#main .cx-cons-barra span { min-width: 0; margin-left: var(--space-3); overflow: hidden; font: 500 13px/18px var(--font-mono); white-space: nowrap; text-overflow: ellipsis; color: var(--texto-3); }
#main .cx-cons-barra b { margin-left: auto; padding: 0 12px; border-radius: var(--radio-capsula); background: var(--verde); font: 600 12px/18px var(--font-sans); color: var(--on-verde); }
#main .cx-cons fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#main .cx-cons legend { float: left; width: 100%; margin: 0 0 var(--space-2); padding: 0; font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
#main .cx-cons label { position: relative; display: block; margin: 0; cursor: pointer; }
#main .cx-cons legend + label { clear: left; }
#main .cx-cons input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
#main .cx-cons label:has(:focus-visible) > span { outline: 2px solid var(--azul); outline-offset: 2px; }
#main .cx-cons-ventana svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* El editor: los bloques a la izquierda, la página a la derecha. */
#main .cx-cons-editor { display: grid; grid-template-columns: 172px minmax(0, 1fr); height: 420px; }
#main .cx-cons .cx-cons-paleta { padding: var(--space-4) var(--space-3); border-right: 1px solid var(--linea); background: var(--nube); }
#main .cx-cons-paleta label + label { margin-top: 6px; }
#main .cx-cons-paleta span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--linea-control); border-radius: var(--radio-control); background: var(--superficie); font: 500 14px/18px var(--font-sans); color: var(--texto-2); transition: background-color .15s, border-color .15s; }
#main .cx-cons-paleta span::after { content: "+"; margin-left: auto; font: 700 15px/1 var(--font-sans); color: var(--azul); }
#main .cx-cons-paleta svg { flex: none; width: 18px; height: 18px; }
#main .cx-cons-paleta label:hover span { border-color: var(--azul); }
#main .cx-cons-paleta :checked + span { border-style: solid; border-color: var(--azul); background: var(--azul-suave); color: var(--chip-texto); }
#main .cx-cons-paleta :checked + span::after { content: "✓"; }
#main .cx-cons-lienzo { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: var(--space-4); overflow: hidden; }
#main .cx-cons-b { position: relative; flex: none; margin: 0; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie); font: 400 12px/16px var(--font-sans); color: var(--texto-2); }
#main .cx-cons-b > b { display: block; margin: 0 0 6px; font: 600 13px/18px var(--font-sans); color: var(--tinta); }
#main .cx-cons-b ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
#main .cx-cons-b li { margin: 0; }
#main .cx-cons-b-portada { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px; border: 0; background: var(--hero); color: var(--on-hero); }
#main .cx-cons-b-portada > b { margin: 0; font: 700 20px/24px var(--font-sans); letter-spacing: -.01em; color: var(--on-hero); }
#main .cx-cons-b-portada i, #main .cx-cons-b-formulario i { margin-top: 6px; padding: 4px 12px; border-radius: var(--radio-capsula); background: var(--on-hero); font: 600 12px/16px var(--font-sans); font-style: normal; color: var(--hero); }
#main .cx-cons-b-servicios ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#main .cx-cons-b-servicios li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: var(--nube); }
#main .cx-cons-b-servicios li i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
#main .cx-cons-b-galeria ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#main .cx-cons-b-galeria li { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--azul-suave); color: var(--azul); }
#main .cx-cons-b-galeria li:nth-child(2) { background: var(--ambar-suave); color: var(--ambar); }
#main .cx-cons-b-galeria li:nth-child(3) { background: var(--acierto-suave); color: var(--acierto); }
#main .cx-cons-b-galeria li:nth-child(4) { background: var(--error-suave); color: var(--error-fuerte); }
#main .cx-cons-b-galeria svg { width: 34%; height: auto; }
#main .cx-cons-b-opiniones { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
#main .cx-cons-b-opiniones > b { flex: 1 0 100%; }
#main .cx-cons-b-opiniones span { font-style: italic; color: var(--texto); }
#main .cx-cons-b-opiniones i { font-style: normal; letter-spacing: 1px; color: var(--ambar); }
#main .cx-cons-b-formulario { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#main .cx-cons-b-formulario > b { flex: 1 0 100%; margin: 0; }
#main .cx-cons-b-formulario span { flex: 1 1 30%; height: 22px; border: 1px solid var(--linea-control); border-radius: 6px; }
#main .cx-cons-b-formulario i { margin: 0; background: var(--azul); color: var(--on-azul); }
#main .cx-cons-b-mapa { display: flex; align-items: center; justify-content: space-between; min-height: 64px; background: repeating-linear-gradient(0deg, transparent 0 15px, var(--linea) 15px 16px), repeating-linear-gradient(90deg, var(--nube) 0 23px, var(--linea) 23px 24px); }
#main .cx-cons-b-mapa > b { margin: 0; padding: 2px 8px; border-radius: 6px; background: var(--superficie); }
#main .cx-cons-b-mapa svg { width: 30px; height: 30px; margin-right: 18%; fill: var(--error-suave); stroke: var(--error-fuerte); }
#main .cx-cons-editor:has(input[value="portada"]:not(:checked)) .cx-cons-b-portada,
#main .cx-cons-editor:has(input[value="servicios"]:not(:checked)) .cx-cons-b-servicios,
#main .cx-cons-editor:has(input[value="galeria"]:not(:checked)) .cx-cons-b-galeria,
#main .cx-cons-editor:has(input[value="opiniones"]:not(:checked)) .cx-cons-b-opiniones,
#main .cx-cons-editor:has(input[value="formulario"]:not(:checked)) .cx-cons-b-formulario,
#main .cx-cons-editor:has(input[value="mapa"]:not(:checked)) .cx-cons-b-mapa { display: none; }
/* El generador: lo que se le cuenta a la izquierda, el sitio que sale a la derecha. Cada negocio con su color. */
#main .cx-cons-generador { display: grid; grid-template-columns: 250px minmax(0, 1fr); height: 420px; }
#main .cx-cons-form { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-4); border-right: 1px solid var(--linea); background: var(--nube); }
#main .cx-cons-sectores label { display: inline-block; margin: 0 4px 6px 0; }
#main .cx-cons-sectores span { display: block; padding: 5px 12px; border: 1px solid var(--linea-control); border-radius: var(--radio-capsula); background: var(--superficie); font: 500 13px/18px var(--font-sans); color: var(--texto-2); }
#main .cx-cons-sectores label:hover span { border-color: var(--azul); }
#main .cx-cons-sectores :checked + span { border-color: var(--azul); background: var(--azul); color: var(--on-azul); }
#main .cx-cons-sectores :checked + span::before { content: "✓ "; }
#main .cx-cons-dato { display: none; gap: 10px; margin: 0; }
#main .cx-cons-d-restaurante { display: grid; }
#main .cx-cons-dato div { margin: 0; }
#main .cx-cons-dato dt { margin: 0 0 4px; font: 500 12px/16px var(--font-sans); color: var(--texto-3); }
#main .cx-cons-dato dd { position: relative; margin: 0; padding: 7px 10px; overflow: hidden; border: 1px solid var(--linea-control); border-radius: 8px; background: var(--superficie); font: 500 14px/20px var(--font-sans); color: var(--tinta); }
#main .cx-cons-generar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 10px; border-radius: var(--radio-capsula); background: var(--azul); font: 600 14px/20px var(--font-sans); color: var(--on-azul); }
#main .cx-cons-generar svg { width: 18px; height: 18px; }
#main .cx-cons-vista { min-width: 0; padding: var(--space-4); }
#main .cx-cons-sitio { --cx-negocio: var(--azul); --cx-negocio-suave: var(--azul-suave); position: relative; display: none; flex-direction: column; gap: 10px; height: 100%; overflow: hidden; border: 1px solid var(--linea); border-radius: 12px; }
#main .cx-cons-s-restaurante { --cx-negocio: var(--ambar); --cx-negocio-suave: var(--ambar-suave); display: flex; }
#main .cx-cons-s-belleza { --cx-negocio: var(--error-fuerte); --cx-negocio-suave: var(--error-suave); }
#main .cx-cons-s-salud { --cx-negocio: var(--acierto); --cx-negocio-suave: var(--acierto-suave); }
#main .cx-cons-sitio-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 14px; border-bottom: 3px solid var(--cx-negocio); }
#main .cx-cons-sitio-nav b { font: 700 15px/20px var(--font-sans); color: var(--tinta); }
#main .cx-cons-sitio-nav span { font: 500 12px/16px var(--font-sans); white-space: nowrap; color: var(--texto-2); }
#main .cx-cons-sitio-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 14px; padding: 22px 20px; border-radius: 10px; background: var(--cx-negocio-suave); }
#main .cx-cons-sitio-hero b { font: 700 24px/29px var(--font-sans); letter-spacing: -.015em; color: var(--tinta); }
#main .cx-cons-sitio-hero span { font-size: 14px; line-height: 20px; color: var(--texto-2); }
#main .cx-cons-sitio-hero i { margin-top: 8px; padding: 6px 14px; border-radius: var(--radio-capsula); background: var(--tinta); font: 600 13px/18px var(--font-sans); font-style: normal; color: var(--fondo); }
#main .cx-cons-sitio ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 14px; padding: 0; list-style: none; }
#main .cx-cons-sitio li { margin: 0; padding: 10px 12px; border: 1px solid var(--linea); border-top: 3px solid var(--cx-negocio); border-radius: 8px; font: 600 13px/18px var(--font-sans); color: var(--tinta); }
#main .cx-cons-sitio-fotos { flex: 1 1 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; min-height: 0; margin: 0 14px 14px; }
#main .cx-cons-sitio-fotos i { border-radius: 8px; background: linear-gradient(160deg, var(--cx-negocio-suave) 40%, var(--nube)); }
#main .cx-cons-generador:has(input[value="belleza"]:checked) .cx-cons-d-belleza,
#main .cx-cons-generador:has(input[value="salud"]:checked) .cx-cons-d-salud,
#main .cx-cons-generador:has(input[value="tienda"]:checked) .cx-cons-d-tienda { display: grid; }
#main .cx-cons-generador:has(input[value="belleza"]:checked) .cx-cons-s-belleza,
#main .cx-cons-generador:has(input[value="salud"]:checked) .cx-cons-s-salud,
#main .cx-cons-generador:has(input[value="tienda"]:checked) .cx-cons-s-tienda { display: flex; }
#main .cx-cons-generador:has(.cx-cons-sectores :checked:not([value="restaurante"])) :is(.cx-cons-d-restaurante, .cx-cons-s-restaurante) { display: none; }
/* El instalador: las aplicaciones a la izquierda y, a la derecha, la elegida instalándose. */
#main .cx-cons-instalador { display: grid; grid-template-columns: 220px minmax(0, 1fr); height: 420px; }
#main .cx-cons .cx-cons-apps { padding: var(--space-4) var(--space-3); border-right: 1px solid var(--linea); background: var(--nube); }
#main .cx-cons-apps label + label { margin-top: 6px; }
#main .cx-cons-apps span { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radio-control); }
#main .cx-cons-apps i { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--azul-suave); font: 700 16px/1 var(--font-sans); font-style: normal; color: var(--azul); }
#main .cx-cons-apps label:nth-child(3) i { background: var(--acierto-suave); color: var(--acierto); }
#main .cx-cons-apps label:nth-child(4) i { background: var(--error-suave); color: var(--error-fuerte); }
#main .cx-cons-apps label:nth-child(5) i { background: var(--ambar-suave); color: var(--ambar); }
#main .cx-cons-apps b { font: 600 14px/18px var(--font-sans); color: var(--tinta); }
#main .cx-cons-apps small { font: 400 12px/16px var(--font-sans); color: var(--texto-3); }
#main .cx-cons-apps label:hover span { background: var(--superficie); }
#main .cx-cons-apps :checked + span { border-color: var(--azul); background: var(--superficie); box-shadow: inset 3px 0 0 var(--azul), 0 1px 2px rgba(11, 37, 64, .08); }
#main .cx-cons-inst { display: flex; align-items: center; justify-content: center; min-width: 0; padding: var(--space-5); }
#main .cx-cons-i { display: none; width: 100%; max-width: 400px; }
#main .cx-cons-i-wordpress { display: block; }
#main .cx-cons-i-tit { margin: 0 0 var(--space-3); font-size: 16px; line-height: 24px; color: var(--texto-2); }
#main .cx-cons-i-tit b { color: var(--tinta); }
#main .cx-cons-i-tit span { font: 500 14px/24px var(--font-mono); color: var(--tinta); }
#main .cx-cons-progreso { height: 8px; margin: 0 0 var(--space-4); overflow: hidden; border-radius: var(--radio-capsula); background: var(--nube); }
#main .cx-cons-progreso i { display: block; height: 100%; background: var(--verde); transform-origin: 0 50%; }
#main .cx-cons-i ul { margin: 0; padding: 0; list-style: none; }
#main .cx-cons-i li { position: relative; margin: 0 0 10px; padding-left: 30px; font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-cons-i li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--acierto-suave); font: 700 12px/1 var(--font-sans); color: var(--acierto); }
#main .cx-cons-listo { margin: var(--space-4) 0 0; padding: 12px 16px; border-radius: var(--radio-control); background: var(--acierto-suave); font: 600 15px/22px var(--font-sans); color: var(--acierto); }
#main .cx-cons-instalador:has(input[value="joomla"]:checked) .cx-cons-i-joomla,
#main .cx-cons-instalador:has(input[value="prestashop"]:checked) .cx-cons-i-prestashop,
#main .cx-cons-instalador:has(input[value="moodle"]:checked) .cx-cons-i-moodle { display: block; }
#main .cx-cons-instalador:has(.cx-cons-apps :checked:not([value="wordpress"])) .cx-cons-i-wordpress { display: none; }
#main .cx-cons figcaption { margin: var(--space-5) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-3); }
@media (max-width: 1024px) {
	#main .cx-cons-modo { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-content: start; }
}
@media (max-width: 640px) {
	#main .cx-cons-modos { gap: var(--space-2); margin-bottom: var(--space-5); }
	#main .cx-cons-modos [role="tab"] { flex-direction: column; gap: 6px; padding: 12px 6px; text-align: center; }
	#main .cx-cons-modos [role="tab"] svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; }
	#main .cx-cons-modos [role="tab"] b { font-size: 14px; line-height: 18px; }
	#main .cx-cons-modos [role="tab"] small { display: none; }
	#main .cx-cons-texto h3 { font-size: 22px; line-height: 28px; }
	#main .cx-cons-texto p { font-size: 16px; line-height: 24px; }
	#main .cx-cons-editor, #main .cx-cons-generador, #main .cx-cons-instalador { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
	#main .cx-cons-editor { height: 520px; }
	#main .cx-cons-generador, #main .cx-cons-instalador { height: auto; }
	#main .cx-cons .cx-cons-paleta, #main .cx-cons .cx-cons-apps { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-3); border-right: 0; border-bottom: 1px solid var(--linea); }
	#main .cx-cons-paleta label + label, #main .cx-cons-apps label + label { margin-top: 0; }
	#main .cx-cons-paleta span { padding: 6px 8px; font-size: 13px; }
	#main .cx-cons-paleta span::after { margin-left: 2px; }
	#main .cx-cons-paleta svg { display: none; }
	#main .cx-cons-lienzo { padding: var(--space-3); }
	#main .cx-cons-form { gap: var(--space-3); padding: var(--space-3); border-right: 0; border-bottom: 1px solid var(--linea); }
	#main .cx-cons-generar, #main .cx-cons-sitio-fotos { display: none; }
	#main .cx-cons-sitio ul { margin-bottom: 14px; }
	#main .cx-cons-sectores label { margin: 0 2px 4px 0; }
	#main .cx-cons-sectores span { padding: 5px 10px; }
	#main .cx-cons-vista { padding: var(--space-3); }
	#main .cx-cons-sitio-nav span { display: none; }
	#main .cx-cons-sitio-hero { padding: 16px; }
	#main .cx-cons-sitio-hero b { font-size: 20px; line-height: 24px; }
	#main .cx-cons-apps label { flex: 1 1 40%; }
	#main .cx-cons-apps span { grid-template-columns: 28px minmax(0, 1fr); padding: 6px 8px; }
	#main .cx-cons-apps i { grid-row: auto; width: 28px; height: 28px; font-size: 14px; border-radius: 7px; }
	#main .cx-cons-apps small { display: none; }
	#main .cx-cons-inst { align-items: flex-start; padding: var(--space-4); }
}

/* Escaparate de tienda (cx-tienda, oMFuXeoj). En /tienda-online-colombia/: la ventana de una tienda (`cx-tienda-ventana`,
   con su candado en la barra) con tres productos (`cx-tienda-productos`, el dibujo es un icono sobre su color, no una foto)
   y, al lado, la caja (`cx-tienda-pago`): total, medios de pago y el botón. El producto agregado y el medio elegido
   llevan `cx-tienda-si` (borde y palomita). Encima, el aviso de pedido nuevo (`cx-tienda-aviso`). Es ilustrativo: los
   precios son de ejemplo, no del catálogo. En tableta la caja va debajo; en móvil, los productos más pequeños. */
#main .cx-tienda { position: relative; margin: var(--space-6) 0; padding-top: var(--space-5); }
#main .cx-tienda-ventana { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-destacada); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-tienda-barra { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px var(--space-5); border-bottom: 1px solid var(--linea); background: var(--nube); }
#main .cx-tienda-barra > i { width: 9px; height: 9px; border-radius: 50%; background: var(--linea); }
#main .cx-tienda-barra span { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-3); padding: 4px 12px; border-radius: var(--radio-capsula); background: var(--superficie); font: 500 13px/18px var(--font-mono); color: var(--texto-2); }
#main .cx-tienda-barra svg { width: 14px; height: 14px; fill: none; stroke: var(--acierto); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-tienda-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); padding: var(--space-5); }
#main .cx-tienda-productos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
#main .cx-tienda-productos li { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--space-3); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); }
#main .cx-tienda-productos .cx-tienda-si { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
#main .cx-tienda-productos .cx-tienda-si::after { content: "✓"; position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--azul); font: 700 13px/1 var(--font-sans); color: var(--on-azul); box-shadow: 0 0 0 3px var(--superficie); }
#main .cx-tienda-foto { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 0 0 var(--space-3); border-radius: var(--radio-control); background: var(--azul-suave); color: var(--azul); }
#main .cx-tienda-foto.cx-tienda-cafe { background: var(--ambar-suave); color: var(--ambar); }
#main .cx-tienda-foto.cx-tienda-sombrero { background: var(--acierto-suave); color: var(--acierto); }
#main .cx-tienda-foto svg { width: 46%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-tienda-productos b { font: 600 15px/20px var(--font-sans); color: var(--tinta); }
#main .cx-tienda-productos li > span:last-child { font: 500 14px/20px var(--font-mono); color: var(--texto-2); }
#main .cx-tienda-pago { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radio-tarjeta); background: var(--nube); }
#main .cx-tienda-total { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-size: 14px; color: var(--texto-2); }
#main .cx-tienda-total b { font: 600 26px/30px var(--font-sans); letter-spacing: -.02em; color: var(--tinta); }
#main .cx-tienda-medios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
#main .cx-tienda-medios li { margin: 0; padding: 8px 10px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); font: 600 14px/18px var(--font-sans); text-align: center; color: var(--tinta); }
#main .cx-tienda-medios .cx-tienda-si { border-color: var(--azul); background: var(--azul-suave); color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
#main .cx-tienda-medios .cx-tienda-si::before { content: "✓ "; }
#main .cx-tienda-pagar { margin: 0; padding: 12px; border-radius: var(--radio-capsula); background: var(--verde); font: 600 15px/20px var(--font-sans); text-align: center; color: var(--on-verde); }
#main .cx-tienda-aviso { position: absolute; top: 0; right: var(--space-6); z-index: 2; display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: 12px 18px; border-radius: var(--radio-tarjeta); background: var(--noche); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .86); box-shadow: var(--sombra-flotante); }
#main .cx-tienda-aviso::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(98, 196, 61, .25); }
#main .cx-tienda-aviso b { color: #fff; }
#main .cx-tienda figcaption { margin: var(--space-4) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-3); }
@media (max-width: 1024px) {
	#main .cx-tienda-cuerpo { grid-template-columns: minmax(0, 1fr); }
	#main .cx-tienda-medios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	/* En móvil el aviso va encima de la ventana, sin taparle la barra. */
	#main .cx-tienda { padding-top: 0; }
	#main .cx-tienda-aviso { position: relative; right: auto; margin: 0 0 var(--space-3); }
	#main .cx-tienda-cuerpo { padding: var(--space-3); gap: var(--space-3); }
	#main .cx-tienda-productos { gap: var(--space-2); }
	#main .cx-tienda-productos li { padding: var(--space-2); }
	#main .cx-tienda-productos b { font-size: 12px; line-height: 16px; }
	#main .cx-tienda-productos li > span:last-child { font-size: 11px; }
	#main .cx-tienda-medios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mudanza (cx-mudanza, uCoPGFOd). En las páginas de migración, «Migración gratis y asistida»: a un lado tu proveedor de
   hoy (`cx-mudanza-lado`) y al otro Conexcol (`cx-mudanza-nuevo`). En medio, lo que se copia (`ul.cx-mudanza-carga`), cada
   cosa con su icono, su barra (`cx-mudanza-barra`, llena) y una palomita al terminar. Debajo, el cambio de DNS cuando tú
   digas (`cx-mudanza-dns`). En móvil, todo en columna. */
#main .cx-mudanza { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; align-items: center; gap: var(--space-5) var(--space-6); margin: var(--space-6) 0; padding: var(--space-6); border: 1px solid var(--linea); border-radius: var(--radio-destacada); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-mudanza-lado { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-5) var(--space-4); border: 1px dashed var(--linea-control); border-radius: var(--radio-tarjeta); text-align: center; }
#main .cx-mudanza-lado svg { width: 34px; height: 34px; margin: 0 0 var(--space-2); fill: none; stroke: var(--texto-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-mudanza-lado b { font: 600 15px/20px var(--font-sans); color: var(--tinta); }
#main .cx-mudanza-lado span { font: 500 12px/16px var(--font-mono); color: var(--texto-3); }
#main .cx-mudanza-nuevo { border: 1px solid var(--azul); background: var(--azul-suave); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 10%, transparent); }
#main .cx-mudanza-nuevo svg { stroke: var(--azul); }
#main .cx-mudanza-nuevo span { color: var(--azul); }
#main .cx-mudanza-carga { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
#main .cx-mudanza-carga li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px var(--space-3); margin: 0; padding-right: 32px; }
#main .cx-mudanza-carga li::after { content: "✓"; position: absolute; right: 0; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--acierto); font: 700 12px/1 var(--font-sans); color: #fff; }
#main .cx-mudanza-carga svg { width: 22px; height: 22px; fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-mudanza-carga b { font: 600 15px/20px var(--font-sans); color: var(--tinta); }
#main .cx-mudanza-barra { grid-column: 1 / -1; display: block; height: 8px; overflow: hidden; border-radius: var(--radio-capsula); background: var(--nube); }
#main .cx-mudanza-barra i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--azul), var(--hero-brillo)); transform-origin: left center; }
#main .cx-mudanza-dns { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--linea); font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-mudanza-dns span { padding: 2px 10px; border-radius: var(--radio-capsula); background: var(--noche); font: 600 12px/18px var(--font-mono); letter-spacing: .04em; color: #fff; }
#main .cx-mudanza-dns b { display: inline-flex; align-items: center; gap: 6px; color: var(--acierto); }
#main .cx-mudanza-dns b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#main .cx-mudanza figcaption { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 20px; text-align: center; color: var(--texto-3); }
@media (max-width: 640px) {
	#main .cx-mudanza { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
	#main .cx-mudanza-lado { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: var(--space-2); padding: var(--space-3); }
	#main .cx-mudanza-lado svg { width: 24px; height: 24px; margin: 0; }
}

/* Consola del VPS (cx-ssh, 4o5OcZjP). En /vps/, «Del clic al SSH» termina en la consola del sistema (`cx-term`) dentro de
   este marco: centrada, con la medida de una terminal. Se escribe sola al llegar, como toda `cx-term` en una pieza que
   aparece (`cx-traza`). */
#main .cx-ssh { max-width: 760px; margin: var(--space-6) auto 0; }
#main .cx-ssh .cx-term { border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-flotante), 0 0 0 1px rgba(255, 255, 255, .06); }
#main .cx-ssh .cx-term pre { font-size: 14px; line-height: 24px; }
/* La barra es un <p>: sin el margen que Avada da a los párrafos. */
#main .cx-ssh .cx-term-barra { margin: 0; }

/* Agentes de IA (cx-agentes, WQ0k3fqz). «Tu agente de IA, en tu propio servidor» en la portada, en un bloque noche. A la
   izquierda, las pestañas por agente (`cx-ag-tabs`, el mismo patrón accesible que `cx-pest`: botones con `role="tab"`
   y `aria-selected`, con su guion en el mismo [fusion_code]), los tres pasos y los canales. A la derecha, la demo
   (`cx-ag-demo`) con un panel por agente (`cx-ag-panel`; sólo se ve el que lleva `cx-on`): un chat que hace la tarea
   (OpenClaw), una terminal que aprende una habilidad (Hermes) o un flujo de nodos (n8n). La ventana guarda su alto
   para que cambiar de agente no mueva la página. Con movimiento, la demo se escribe paso a paso y espera a que la
   sección entre en pantalla. */
#main .cx-ag-tabs { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); }
#main .cx-ag-tabs [role="tab"] { display: block; width: 100%; padding: 14px 16px; border-radius: var(--radio-control); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--on-hero); text-align: left; cursor: pointer; font: inherit; }
#main .cx-ag-tabs [role="tab"] b { display: block; font: 600 16px/22px var(--font-sans); color: var(--on-hero); }
#main .cx-ag-tabs [role="tab"] span { display: block; margin-top: 2px; font: 400 14px/20px var(--font-sans); color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
#main .cx-ag-tabs [aria-selected="true"] { background: rgba(255,255,255,.1); border-color: var(--hero-brillo); box-shadow: inset 3px 0 0 var(--hero-brillo); }
#main .cx-ag-tabs [role="tab"]:focus-visible { outline: 2px solid var(--on-hero); outline-offset: 2px; }
#main .cx-ag-pasos { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: cx-ag; }
#main .cx-ag-pasos li { display: flex; gap: 10px; align-items: center; margin: 0; padding: 0; font: 400 15px/22px var(--font-sans); color: var(--on-hero); counter-increment: cx-ag; }
#main .cx-ag-pasos li::before { content: counter(cx-ag); flex: 0 0 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); font: 500 12px/22px var(--font-mono); text-align: center; color: var(--on-hero); }
#main .cx-ag-canales { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 var(--space-5); font: 400 14px/20px var(--font-sans); color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
#main .cx-ag-canales span { padding: 3px 10px; border-radius: var(--radio-capsula); background: rgba(255,255,255,.08); font: 500 12px/18px var(--font-mono); color: var(--on-hero); }
#main .cx-ag-panel:not(.cx-on) { display: none; }
#main .cx-ag-ventana { display: flex; flex-direction: column; min-height: 360px; box-sizing: border-box; border-radius: var(--radio-destacada); border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); overflow: hidden; }
#main .cx-ag-barra { display: flex; gap: 6px; align-items: center; margin: 0; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); font: 500 12px/16px var(--font-mono); color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
#main .cx-ag-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.22); }
#main .cx-ag-barra span { margin-left: 8px; }
#main .cx-ag-chat { display: flex; flex-direction: column; gap: 10px; padding: var(--space-5); }
#main .cx-ag-msg { max-width: 82%; margin: 0; padding: 10px 14px; border-radius: 16px; font: 400 15px/22px var(--font-sans); color: var(--on-hero); }
#main .cx-ag-msg.cx-ag-tu { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--azul); }
#main .cx-ag-msg.cx-ag-el { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(255,255,255,.1); }
#main .cx-ag-paso { align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: var(--radio-capsula); border: 1px solid rgba(255,255,255,.14); font: 500 12px/18px var(--font-mono); color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
#main .cx-ag-paso b { color: var(--hero-brillo); }
#main .cx-ag-term { padding: var(--space-5); font: 400 14px/24px var(--font-mono); color: var(--on-hero); }
#main .cx-ag-linea { margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#main .cx-ag-linea b { color: var(--hero-brillo); }
#main .cx-ag-linea.cx-ag-gris { color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
#main .cx-ag-cursor { display: inline-block; width: 8px; height: 16px; margin-left: 6px; vertical-align: -3px; background: var(--on-hero); }
#main .cx-ag-flujo-svg { display: block; width: 100%; height: auto; padding: var(--space-5) var(--space-4) 0; box-sizing: border-box; }
#main .cx-ag-nodo rect { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.3); stroke-width: 1.2; }
#main .cx-ag-nodo.cx-ag-ia rect { fill: color-mix(in srgb, var(--hero-brillo) 22%, transparent); stroke: var(--hero-brillo); }
#main .cx-ag-nodo text { fill: var(--on-hero); font: 500 12px var(--font-sans); }
#main .cx-ag-flujo { fill: none; stroke: var(--hero-brillo); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 6; }
#main .cx-ag-pie { margin: auto 0 0; padding: var(--space-4) var(--space-5) var(--space-5); font: 400 14px/20px var(--font-sans); color: color-mix(in srgb, var(--on-hero) 78%, var(--noche)); }
@media (min-width: 1025px) {
	#main .cx-ag-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-2); }
	#main .cx-ag-tabs { margin: 0; }
}
@media (max-width: 640px) {
	#main .cx-ag-ventana { min-height: 320px; }
	#main .cx-ag-msg { max-width: 92%; font-size: 14px; line-height: 20px; }
	#main .cx-ag-term { font-size: 12px; line-height: 22px; }
}

/* 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. El anillo no lleva z-index: lo que deba
	   quedar encima, como la etiqueta «Recomendado» que pisa el borde, lleva `z-index: 1` (gzS2V7S2). */
	.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; }
	/* Tarjeta de estado (v6VtJihd): las barras crecen al cargar, la de Conexcol primero, y el punto «en línea» late. */
	.cx-estado-barra meter { animation: cx-crece-x 1.2s cubic-bezier(.3, 0, .2, 1) .4s backwards; }
	.cx-estado-barra + .cx-estado-barra meter { animation-delay: .8s; }
	/* Mosaico «Todo incluido» (vCijZXkZ): el icono de cada tarjeta se dibuja cuando la tarjeta entra en pantalla. */
	#main .cx-icono.cx-traza svg :is(path, rect, circle) { stroke-dasharray: 80; animation: cx-lanza-traza 1s cubic-bezier(.3, 0, .2, 1) calc(var(--cx-turno, 0) * 70ms + .25s) backwards; }
	/* Asistente «¿Qué servidor necesitas?» (t6PfQjbw): al cambiar la respuesta, el plan recomendado entra. */
	#main .cx-elige-res.cx-on { animation: cx-hito .4s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-elige-ops span { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
	/* Puntos de restauración (vaSvROUZ): al llegar, una luz recorre el riel de ahora al último mes y cada punto se
	   enciende cuando le llega; el de ahora late. Quieta hasta que el panel entra en pantalla. */
	#main .cx-resp-linea::after { animation: cx-resp-luz 2.4s cubic-bezier(.45, 0, .25, 1) .3s backwards; }
	#main .cx-resp-linea li { animation: cx-hito .5s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-resp-linea li:nth-child(2) { animation-delay: .7s; }
	#main .cx-resp-linea li:nth-child(3) { animation-delay: 1.5s; }
	#main .cx-resp-linea li:nth-child(4) { animation-delay: 2.2s; }
	#main .cx-resp-linea .cx-resp-hoy i { animation: cx-resp-late 2.4s ease-in-out 3s infinite; }
	#main .cx-resp.cx-ver:not(.cx-visto) .cx-resp-linea::after, #main .cx-resp.cx-ver:not(.cx-visto) .cx-resp-linea :is(li, i) { animation-play-state: paused; }
	@keyframes cx-resp-luz { from { transform: scale(0); } }
	@keyframes cx-resp-late { 50% { box-shadow: 0 0 0 9px rgba(90, 171, 245, 0); } }
	/* Banda de aplicaciones (vaSvROUZ): la copia de cada fila entra en juego y las filas se desplazan, las pares en sentido
	   contrario y la de en medio más despacio. Se detiene al pasar el ratón, con el foco dentro y con su botón de pausa. */
	#main .cx-banda-pista { display: grid; gap: var(--space-3); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
	#main .cx-banda-fila > [aria-hidden="true"] { display: block; }
	/* Margen en cada ficha, no hueco entre ellas: así la mitad de la fila mide justo una lista y la vuelta no salta. */
	#main .cx-banda-fila { flex-wrap: nowrap; width: max-content; gap: 0; animation: cx-banda 70s linear infinite; }
	#main .cx-banda-fila li { margin-right: var(--space-3); }
	#main .cx-banda-fila:nth-child(2n) { animation-direction: reverse; animation-duration: 85s; }
	#main :is(.cx-banda:hover, .cx-banda:focus-within, .cx-banda:has(.cx-banda-pausa input:checked)) .cx-banda-fila { animation-play-state: paused; }
	#main .cx-banda-pausa { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--linea-control); border-radius: var(--radio-capsula); background: var(--superficie); font: 500 13px/18px var(--font-sans); color: var(--tinta); cursor: pointer; }
	#main .cx-banda-pausa input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
	#main .cx-banda-pausa:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
	#main .cx-banda-pausa:has(input:checked) .cx-banda-p, #main .cx-banda-pausa:not(:has(input:checked)) .cx-banda-r { display: none; }
	@keyframes cx-banda { to { transform: translateX(-50%); } }
	/* Buzón y viaje del correo firmado (QuvjWVrG): las cuentas entran una tras otra y la de crear late; el sobre recorre
	   el carril (sólo en escritorio, por el ancho de la ruta) y cada control se marca cuando pasa. Quietos hasta que la
	   pieza entra en pantalla. */
	#main .cx-buzon-lista li { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-buzon-lista li:nth-child(2) { animation-delay: .25s; }
	#main .cx-buzon-lista li:nth-child(3) { animation-delay: .5s; }
	#main .cx-buzon-lista li:nth-child(4) { animation-delay: .75s; }
	#main .cx-buzon-lista li:nth-child(5) { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) 1s backwards, cx-buzon-late 2.4s ease-in-out 2s infinite; }
	@keyframes cx-buzon-late { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--azul) 14%, transparent); } }
	@media (min-width: 641px) {
		#main .cx-firma-sobre { position: absolute; top: calc(var(--space-6) + 16px); left: calc(var(--space-6) + 10% - 12px); right: calc(var(--space-6) + 10% - 12px); display: block; height: 24px; pointer-events: none; container-type: inline-size; }
		#main .cx-firma-sobre svg { width: 24px; height: 24px; fill: var(--on-hero); stroke: var(--noche); stroke-width: 1.4; }
		#main .cx-firma-sobre { animation: cx-firma-viaje 6s cubic-bezier(.45, 0, .55, 1) .4s infinite both; }
	}
	#main .cx-firma-sobre svg { animation: inherit; animation-name: cx-firma-avanza; }
	@keyframes cx-firma-viaje { 0%, 4% { opacity: 0; } 8%, 70% { opacity: 1; } 78%, 100% { opacity: 0; } }
	@keyframes cx-firma-avanza { 0%, 6% { transform: translateX(0); } 72%, 100% { transform: translateX(calc(100cqw - 24px)); } }
	#main .cx-firma-paso b::after { animation: cx-firma-pasa 6s ease .4s infinite both; }
	#main .cx-firma-paso:nth-child(2) b::after { animation-delay: 1.4s; }
	#main .cx-firma-paso:nth-child(3) b::after { animation-delay: 2.3s; }
	#main .cx-firma-paso:nth-child(4) b::after { animation-delay: 3.2s; }
	@keyframes cx-firma-pasa { 0%, 6% { transform: scale(0); } 12%, 82% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
	#main :is(.cx-buzon, .cx-firma).cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* Lo que hace el correo (mnFWyUO7): cada escena corre en bucle de 7 s, escalonadas para que no se muevan todas a la
	   vez. Sólo transform, opacidad y sombra. Quietas hasta que la pieza entra en pantalla. */
	#main .cx-correo-s1 { animation: cx-correo-r1 7s cubic-bezier(.45, 0, .55, 1) .3s infinite both; }
	#main .cx-correo-s2 { animation: cx-correo-r2 7s cubic-bezier(.45, 0, .55, 1) .3s infinite both; }
	#main .cx-correo-s3 { animation: cx-correo-r3 7s cubic-bezier(.45, 0, .55, 1) .3s infinite both; }
	#main :is(.cx-correo-arriba, .cx-correo-abajo) { animation: cx-correo-recibe 7s ease .3s infinite both; }
	@keyframes cx-correo-r1 { 0% { opacity: 0; transform: translate(calc(50cqw - 44px), 59px); } 6% { opacity: 1; } 30% { opacity: 1; transform: translate(calc(50cqw - 11px), 59px); } 34%, 100% { opacity: 0; transform: translate(calc(50cqw - 11px), 59px); } }
	@keyframes cx-correo-r2 { 0%, 30% { opacity: 0; transform: translate(calc(50cqw - 11px), 59px); } 34% { opacity: 1; } 60%, 84% { opacity: 1; transform: translate(calc(100cqw - 112px), 20px); } 92%, 100% { opacity: 0; transform: translate(calc(100cqw - 112px), 20px); } }
	@keyframes cx-correo-r3 { 0%, 30% { opacity: 0; transform: translate(calc(50cqw - 11px), 59px); } 34% { opacity: 1; } 60%, 84% { opacity: 1; transform: translate(calc(100cqw - 112px), 98px); } 92%, 100% { opacity: 0; transform: translate(calc(100cqw - 112px), 98px); } }
	@keyframes cx-correo-recibe { 0%, 58% { box-shadow: none; } 64% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--acierto) 24%, transparent); } 76%, 100% { box-shadow: none; } }
	#main .cx-correo-entra { animation: cx-correo-entra 7s cubic-bezier(.2, .8, .2, 1) .8s infinite both; }
	#main .cx-correo-sale { transform-origin: 100% 100%; animation: cx-correo-sale 7s cubic-bezier(.2, .8, .2, 1) .8s infinite both; }
	@keyframes cx-correo-entra { 0% { opacity: 0; transform: translateX(-16px); } 8%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
	@keyframes cx-correo-sale { 0%, 30% { opacity: 0; transform: scale(.85); } 38%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
	#main .cx-correo-boletin { animation: cx-correo-archiva 7s cubic-bezier(.45, 0, .55, 1) 1.3s infinite both; }
	#main .cx-correo-carpeta svg { animation: cx-correo-cae 7s ease 1.3s infinite both; }
	#main .cx-correo-bandeja li:nth-child(3) { animation: cx-correo-sube 7s cubic-bezier(.45, 0, .55, 1) 1.3s infinite both; }
	@keyframes cx-correo-archiva { 0%, 22% { opacity: 1; transform: none; } 50% { opacity: 0; transform: translateX(48cqw) scale(.4); } 52%, 82% { opacity: 0; transform: none; } 92%, 100% { opacity: 1; transform: none; } }
	@keyframes cx-correo-sube { 0%, 44% { transform: none; } 54%, 82% { transform: translateY(-38px); } 90%, 100% { transform: none; } }
	@keyframes cx-correo-cae { 0%, 46% { transform: none; } 54% { transform: scale(1.15); } 62%, 100% { transform: none; } }
	#main .cx-correo-bueno { animation: cx-correo-pasa 7s cubic-bezier(.45, 0, .55, 1) 1.8s infinite both; }
	#main .cx-correo-malo { animation: cx-correo-frena 7s cubic-bezier(.45, 0, .55, 1) 1.8s infinite both; }
	#main .cx-correo-si { animation: cx-correo-marca-si 7s ease 1.8s infinite both; }
	#main .cx-correo-no { animation: cx-correo-marca-no 7s ease 1.8s infinite both; }
	@keyframes cx-correo-pasa { 0% { opacity: 0; transform: translate(2cqw, 46px); } 6% { opacity: 1; } 50%, 84% { opacity: 1; transform: translate(calc(100cqw - 56px), 46px); } 92%, 100% { opacity: 0; transform: translate(calc(100cqw - 56px), 46px); } }
	@keyframes cx-correo-frena { 0% { opacity: 0; transform: translate(2cqw, 92px); } 6% { opacity: 1; } 34% { opacity: 1; transform: translate(calc(52cqw - 36px), 92px); } 40% { opacity: 1; transform: translate(calc(52cqw - 36px), 92px) rotate(-12deg); } 52%, 100% { opacity: 0; transform: translate(calc(52cqw - 36px), 120px) rotate(-12deg); } }
	@keyframes cx-correo-marca-si { 0%, 48% { transform: scale(0); } 54%, 86% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
	@keyframes cx-correo-marca-no { 0%, 32% { transform: scale(0); } 38%, 86% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
	#main .cx-correo-lista .cx-correo-sobre { animation: cx-correo-reparte 7s cubic-bezier(.45, 0, .55, 1) 2.3s infinite both; }
	#main .cx-correo-lista .cx-correo-m1 { --cx-y: 9px; }
	#main .cx-correo-lista .cx-correo-m2 { --cx-y: 34px; animation-delay: 2.45s; }
	#main .cx-correo-lista .cx-correo-m3 { --cx-y: 59px; animation-delay: 2.6s; }
	#main .cx-correo-lista .cx-correo-m4 { --cx-y: 84px; animation-delay: 2.75s; }
	#main .cx-correo-lista .cx-correo-m5 { --cx-y: 109px; animation-delay: 2.9s; }
	@keyframes cx-correo-reparte { 0% { opacity: 0; transform: translate(106px, 59px); } 6% { opacity: 1; } 40%, 70% { opacity: 1; transform: translate(calc(100cqw - 66px), var(--cx-y)); } 78%, 100% { opacity: 0; transform: translate(calc(100cqw - 66px), var(--cx-y)); } }
	#main .cx-correo-miembros li { animation: cx-correo-llega 7s ease 2.3s infinite both; }
	#main .cx-correo-miembros li:nth-child(2) { animation-delay: 2.45s; }
	#main .cx-correo-miembros li:nth-child(3) { animation-delay: 2.6s; }
	#main .cx-correo-miembros li:nth-child(4) { animation-delay: 2.75s; }
	#main .cx-correo-miembros li:nth-child(5) { animation-delay: 2.9s; }
	@keyframes cx-correo-llega { 0%, 38% { box-shadow: none; } 44% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 24%, transparent); } 56%, 100% { box-shadow: none; } }
	#main .cx-correo-celular .cx-correo-evento { animation: cx-correo-agenda 7s cubic-bezier(.2, .8, .2, 1) 2.8s infinite both; }
	#main .cx-correo-portatil .cx-correo-evento { animation: cx-correo-agenda-2 7s cubic-bezier(.2, .8, .2, 1) 2.8s infinite both; }
	#main .cx-correo-sincro svg { animation: cx-correo-gira 7s cubic-bezier(.45, 0, .55, 1) 2.8s infinite both; }
	@keyframes cx-correo-agenda { 0% { opacity: 0; transform: scale(.8); } 8%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
	@keyframes cx-correo-agenda-2 { 0%, 40% { opacity: 0; transform: scale(.8); } 48%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
	@keyframes cx-correo-gira { 0%, 14% { transform: none; } 40%, 100% { transform: rotate(360deg); } }
	#main .cx-correo.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* Tu correo en tu dispositivo (YBmXAKdi): al elegir un dispositivo, cada campo se escribe tras el anterior (una tapa
	   que se recoge a saltos, de izquierda a derecha). Quieto hasta que la pieza entra en pantalla. */
	#main .cx-disp-campos dd::after { content: ""; position: absolute; inset: 1px 1px 1px 10px; background: var(--superficie); transform-origin: 100% 50%; animation: cx-disp-escribe .7s steps(14, end) .2s both; }
	#main .cx-disp-campos div:nth-child(2) dd::after { animation-delay: .55s; }
	#main .cx-disp-campos div:nth-child(3) dd::after { animation-delay: .9s; }
	#main .cx-disp-campos div:nth-child(4) dd::after { animation-delay: 1.25s; }
	#main .cx-disp-campos div:nth-child(5) dd::after { animation-delay: 1.6s; }
	#main .cx-disp-campos div:nth-child(6) dd::after { animation-delay: 1.95s; }
	@keyframes cx-disp-escribe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
	#main .cx-disp.cx-ver:not(.cx-visto) *, #main .cx-disp.cx-ver:not(.cx-visto) *::after { animation-play-state: paused; }
	/* Tu cPanel, por dentro (4OPd0zT8): al elegir un grupo, sus herramientas entran en cascada. */
	#main .cx-panel-herr li { animation: cx-hito .4s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-panel-herr li:nth-child(2) { animation-delay: .04s; }
	#main .cx-panel-herr li:nth-child(3) { animation-delay: .08s; }
	#main .cx-panel-herr li:nth-child(4) { animation-delay: .12s; }
	#main .cx-panel-herr li:nth-child(5) { animation-delay: .16s; }
	#main .cx-panel-herr li:nth-child(6) { animation-delay: .2s; }
	#main .cx-panel-herr li:nth-child(7) { animation-delay: .24s; }
	#main .cx-panel-herr li:nth-child(8) { animation-delay: .28s; }
	#main .cx-panel-herr li:nth-child(9) { animation-delay: .32s; }
	#main .cx-panel.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* Tu sitio sin código (wrkEP1dt). Arrastra: los bloques caen uno tras otro, como arrastrados, con su puntero; el que
	   se agrega cae al momento. Con IA: se escriben el nombre y los detalles, se pulsa «Generar» y el sitio sale de su
	   esqueleto. En unos clics: la barra avanza y los pasos se marcan. Cada negocio o app que aparece empieza de nuevo,
	   porque pasa de no estar a estar. El panel oculto ocupa su sitio sin verse, así que no anima nada: al elegirlo, su
	   animación empieza de cero. Quieto hasta que entra en pantalla. */
	#main .cx-cons-b { animation: cx-cons-suelta .55s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-cons-b-portada { animation-delay: .25s; }
	#main .cx-cons-b-servicios { animation-delay: .8s; }
	#main .cx-cons-b-galeria { animation-delay: 1.35s; }
	#main .cx-cons-b::after { content: ""; position: absolute; top: 45%; left: 32%; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 7-6.2 1.8L10 18z' fill='%230b0f14' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat; opacity: 0; pointer-events: none; animation: cx-cons-puntero .55s ease-out backwards; animation-delay: inherit; }
	@keyframes cx-cons-suelta { from { transform: translate(-56px, -12px) rotate(-3deg) scale(.94); opacity: 0; box-shadow: 0 18px 40px rgba(11, 37, 64, .25); } 70% { opacity: 1; } }
	@keyframes cx-cons-puntero { from { transform: translate(-56px, -12px); opacity: 1; } 80% { opacity: 1; } to { opacity: 0; } }
	#main .cx-cons-dato dd::after { content: ""; position: absolute; inset: 0 0 0 9px; background: var(--superficie); transform-origin: 100% 50%; animation: cx-disp-escribe .6s steps(12, end) .15s both; }
	#main .cx-cons-dato div + div dd::after { animation-duration: .9s; animation-delay: .7s; }
	#main .cx-cons-generar { animation: cx-tienda-pulsa .35s ease 1.6s; }
	#main .cx-cons-sitio::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, var(--nube) 35%, var(--superficie) 50%, var(--nube) 65%) 0 0 / 300% 100%; pointer-events: none; animation: cx-cons-genera 2s ease-in both; }
	#main .cx-cons-sitio > * { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-cons-sitio > :nth-child(1) { animation-delay: 1.9s; }
	#main .cx-cons-sitio > :nth-child(2) { animation-delay: 2.05s; }
	#main .cx-cons-sitio > :nth-child(3) { animation-delay: 2.2s; }
	#main .cx-cons-sitio > :nth-child(4) { animation-delay: 2.35s; }
	@keyframes cx-cons-genera { from { background-position: 100% 0; } 90% { opacity: 1; background-position: 0 0; } to { opacity: 0; background-position: 0 0; } }
	#main .cx-cons-progreso i { animation: cx-cons-carga 1.6s cubic-bezier(.4, 0, .2, 1) .2s backwards; }
	#main .cx-cons-i li { animation: cx-hito .35s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-cons-i li:nth-child(1) { animation-delay: .6s; }
	#main .cx-cons-i li:nth-child(2) { animation-delay: 1.1s; }
	#main .cx-cons-i li:nth-child(3) { animation-delay: 1.6s; }
	#main .cx-cons-listo { animation: cx-tienda-marca .4s cubic-bezier(.2, .8, .2, 1) 1.95s backwards; }
	@keyframes cx-cons-carga { from { transform: scaleX(0); } }
	#main .cx-cons-pista::before { animation: cx-latido 2.4s ease-in-out infinite; }
	#main .cx-cons.cx-ver:not(.cx-visto) *, #main .cx-cons.cx-ver:not(.cx-visto) *::before, #main .cx-cons.cx-ver:not(.cx-visto) *::after { animation-play-state: paused; }
	#main .cx-cons-modo[hidden] *, #main .cx-cons-modo[hidden] *::before, #main .cx-cons-modo[hidden] *::after { animation: none; }
	/* Escaparate de tienda (oMFuXeoj): al llegar, los productos entran, uno se agrega al carrito, se elige el medio de
	   pago, se pulsa «Pagar» y entra el aviso de pedido nuevo, que luego late. Quieto hasta que entra en pantalla. */
	#main .cx-tienda-productos li { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-tienda-productos li:nth-child(2) { animation-delay: .15s; }
	#main .cx-tienda-productos li:nth-child(3) { animation-delay: .3s; }
	#main .cx-tienda-productos .cx-tienda-si::after, #main .cx-tienda-medios .cx-tienda-si { animation: cx-tienda-marca .35s cubic-bezier(.2, .8, .2, 1) .9s backwards; }
	#main .cx-tienda-medios .cx-tienda-si { animation-delay: 1.5s; }
	#main .cx-tienda-pagar { animation: cx-tienda-pulsa .3s ease 2.1s; }
	#main .cx-tienda-aviso { animation: cx-tienda-aviso .5s cubic-bezier(.2, .8, .2, 1) 2.5s backwards; }
	#main .cx-tienda-aviso::before { animation: cx-latido 2.4s ease-in-out 3s infinite; }
	#main .cx-tienda.cx-ver:not(.cx-visto) *, #main .cx-tienda.cx-ver:not(.cx-visto) *::after { animation-play-state: paused; }
	@keyframes cx-tienda-marca { from { transform: scale(.4); opacity: 0; } }
	@keyframes cx-tienda-pulsa { 50% { transform: scale(.96); filter: brightness(1.1); } }
	@keyframes cx-tienda-aviso { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
	/* Mudanza (uCoPGFOd): al llegar, cada barra se llena tras la anterior y se marca su palomita; luego se ilumina el destino
	   y entra el DNS. Quieta hasta que entra en pantalla. */
	#main .cx-mudanza-barra i { animation: cx-crece-x 1s cubic-bezier(.45, 0, .25, 1) .3s backwards; }
	#main .cx-mudanza-carga li:nth-child(2) .cx-mudanza-barra i { animation-delay: .9s; }
	#main .cx-mudanza-carga li:nth-child(3) .cx-mudanza-barra i { animation-delay: 1.5s; }
	#main .cx-mudanza-carga li::after { animation: cx-mudanza-listo .3s cubic-bezier(.2, .8, .2, 1) 1.3s backwards; }
	#main .cx-mudanza-carga li:nth-child(2)::after { animation-delay: 1.9s; }
	#main .cx-mudanza-carga li:nth-child(3)::after { animation-delay: 2.5s; }
	#main .cx-mudanza-nuevo { animation: cx-mudanza-llega .6s ease 2.7s backwards; }
	#main .cx-mudanza-dns { animation: cx-hito .5s cubic-bezier(.2, .8, .2, 1) 3s backwards; }
	#main .cx-mudanza-dns b::before { animation: cx-latido 2.4s ease-in-out 3.5s infinite; }
	#main .cx-mudanza.cx-ver:not(.cx-visto) *, #main .cx-mudanza.cx-ver:not(.cx-visto) *::after { animation-play-state: paused; }
	@keyframes cx-mudanza-listo { from { transform: scale(.3); opacity: 0; } }
	@keyframes cx-mudanza-llega { from { box-shadow: none; background: var(--superficie); border-color: var(--linea-control); } }
	/* Agentes de IA (WQ0k3fqz): la demo se escribe paso a paso; si la sección espera bajo la ventana (`cx-ver`), en pausa. */
	#main .cx-ag-panel.cx-on :is(.cx-ag-msg, .cx-ag-paso) { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
	#main .cx-ag-panel.cx-on :is(.cx-ag-msg, .cx-ag-paso):nth-child(2) { animation-delay: 0.9s; }
	#main .cx-ag-panel.cx-on :is(.cx-ag-msg, .cx-ag-paso):nth-child(3) { animation-delay: 1.5s; }
	#main .cx-ag-panel.cx-on :is(.cx-ag-msg, .cx-ag-paso):nth-child(4) { animation-delay: 2.1s; }
	#main .cx-ag-panel.cx-on :is(.cx-ag-msg, .cx-ag-paso):nth-child(5) { animation-delay: 2.9s; }
	#main .cx-ag-panel.cx-on .cx-ag-linea { animation: cx-tecla .7s steps(28, end) .2s backwards; }
	#main .cx-ag-panel.cx-on .cx-ag-linea:nth-child(2) { animation-delay: 1.0s; }
	#main .cx-ag-panel.cx-on .cx-ag-linea:nth-child(3) { animation-delay: 1.8s; }
	#main .cx-ag-panel.cx-on .cx-ag-linea:nth-child(4) { animation-delay: 2.5s; }
	#main .cx-ag-panel.cx-on .cx-ag-linea:nth-child(5) { animation-delay: 3.2s; }
	#main .cx-ag-panel.cx-on .cx-ag-linea:nth-child(6) { animation-delay: 3.9s; }
	#main .cx-ag-panel.cx-on .cx-ag-nodo { animation: cx-hito .5s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
	#main .cx-ag-panel.cx-on .cx-ag-nodo:nth-of-type(2) { animation-delay: 0.6s; }
	#main .cx-ag-panel.cx-on .cx-ag-nodo:nth-of-type(3) { animation-delay: 1.1s; }
	#main .cx-ag-panel.cx-on .cx-ag-nodo:nth-of-type(4) { animation-delay: 1.5s; }
	#main .cx-ag-flujo { stroke-dasharray: 4 6; animation: cx-lam-flujo 1.1s linear infinite; }
	#main .cx-ag-cursor { animation: cx-lam-parpadeo 1.1s steps(2, jump-none) infinite; }
	#main .cx-ag-tabs [role="tab"] { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
	#main .cx-ag-demo.cx-ver:not(.cx-visto) :is(.cx-ag-msg, .cx-ag-paso, .cx-ag-linea, .cx-ag-nodo) { animation-play-state: paused; }
	/* Selector «¿Qué quieres lanzar hoy?» (3unUedjh): las opciones entran en cascada y sus iconos se dibujan. */
	#main .cx-lanza-rej li { animation: cx-hito .5s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
	#main .cx-lanza-rej li:nth-child(2) { animation-delay: 0.26s; }
	#main .cx-lanza-rej li:nth-child(3) { animation-delay: 0.32s; }
	#main .cx-lanza-rej li:nth-child(4) { animation-delay: 0.38s; }
	#main .cx-lanza-rej li:nth-child(5) { animation-delay: 0.44s; }
	#main .cx-lanza-rej li:nth-child(6) { animation-delay: 0.50s; }
	#main .cx-lanza-rej li:nth-child(7) { animation-delay: 0.56s; }
	#main .cx-lanza-rej li:nth-child(8) { animation-delay: 0.62s; }
	#main .cx-lanza-rej svg :is(path, rect, circle) { stroke-dasharray: 80; animation: cx-lanza-traza 1.1s cubic-bezier(.3, 0, .2, 1) .45s backwards; }
	#main .cx-lanza-rej a { transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
	.cx-estado-cab i { animation: cx-latido 2.4s ease-in-out infinite; }
	#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 .cx-lanza-rej a:hover { transform: translateY(-2px); background-color: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
	#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-crece-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cx-lanza-traza { from { stroke-dashoffset: 80; } }
@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; } }