/* 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; }
/* Más piezas del mosaico (UwAPLcE5), al estilo App Store: cada celda dice una cosa con su propio dibujo, no con un
   icono pequeño. La celda a todo el ancho (`completa`); la cifra grande (`cx-celda-cifra`, encima del título); el glifo
   grande (`cx-glifo`, un dibujo de línea de 72 px); y los logos de pago (`cx-pagos`, los del pie, en blanco, sobre una
   celda oscura). En una sección nube (el global de «Seis razones») las celdas claras van en blanco. */
#main .cx-bento .cx-celda.completa { grid-column: 1 / -1; }
#main .cx-razones .cx-celda:not(.marca):not(.oscura) { background: var(--superficie); }
#main .cx-bento .cx-celda > .cx-celda-cifra { margin: 0 0 var(--space-3); max-width: none; font: 500 72px/1 var(--font-sans); letter-spacing: -.045em; color: var(--azul); }
#main .cx-bento .cx-celda.marca > .cx-celda-cifra { margin-bottom: var(--space-4); font-size: 88px; color: var(--on-hero); }
#main .cx-bento .cx-celda:is(.marca, .oscura) > h3 { color: var(--on-hero); }
#main .cx-bento .cx-glifo { display: block; flex: none; width: 72px; height: 72px; margin: 0 0 var(--space-5); fill: none; stroke: var(--azul); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-bento .cx-celda-pagos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-6); align-items: center; }
#main .cx-bento .cx-celda-pagos > div > .cx-rot { margin: 0 0 var(--space-4); color: rgba(255, 255, 255, .82); }
#main .cx-bento .cx-celda-pagos h3 { margin: 0 0 var(--space-3); font: 500 24px/30px var(--font-sans); color: var(--on-hero); }
#main .cx-bento .cx-celda-pagos p { color: rgba(255, 255, 255, .86); }
#main .cx-pagos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5) var(--space-5); align-items: center; justify-items: start; margin: 0; padding: 0; list-style: none; }
#main .cx-pagos li { margin: 0; }
#main .cx-pagos img { display: block; width: auto; max-width: min(110px, 100%); height: 28px; object-fit: contain; object-position: left center; opacity: .92; }
#main .cx-pagos .cuadrado img { height: 40px; }
@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-pagos { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	#main .cx-bento .cx-celda.marca > .cx-celda-cifra { font-size: 72px; }
	#main .cx-bento .cx-celda.marca > h3.cx-cifra-grande { margin-top: var(--space-5); font-size: 64px !important; line-height: 64px !important; }
}
@media (max-width: 560px) {
	#main .cx-pagos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 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); }
}

/* «Todo incluido» como recibo y como ficha técnica (hKst79zR): sin tarjetas con icono. La sección va en dos columnas:
   el rótulo, el título y una entrada a la izquierda (`cx-incluye-cab`, centrada en alto), y a la derecha un objeto.
   En los planes de hosting, un recibo que sale de una ranura (`cx-recibo-escena`): el papel lleva el borde de abajo
   en dientes (una máscara, y por eso la sombra va en la hoja que lo envuelve), cada línea su valor a la derecha con la
   línea de puntos en medio, el total en $0 y un sello. En los servidores, una ficha técnica tipo etiqueta
   (`cx-ficha-escena`) sobre un fondo de plano. La lista completa de siempre se desenrolla en el mismo papel o la
   misma ficha (`details.cx-incluye-todo`), en una columna. */
#main .fusion-fullwidth.cx-incluye .fusion-layout-column.cx-incluye-cab { align-self: center; }
#main .cx-incluye-entrada { margin: var(--space-4) 0 0; max-width: 32ch; font-size: 18px; line-height: 28px; color: var(--texto-2); }
#main .cx-recibo-escena { display: flex; flex-direction: column; align-items: center; padding: var(--space-7) var(--space-6) var(--space-8); border-radius: var(--radio-tarjeta); background: radial-gradient(circle, var(--linea-control) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--nube); }
#main .cx-recibo-ranura { position: relative; z-index: 2; display: block; width: 100%; max-width: 464px; height: 16px; border-radius: 8px; background: var(--noche); box-shadow: 0 6px 14px rgba(10, 30, 60, .2); }
#main .cx-recibo-hoja { position: relative; z-index: 1; width: calc(100% - 32px); max-width: 432px; margin-top: -8px; filter: drop-shadow(0 14px 20px rgba(10, 30, 60, .14)); }
#main .cx-recibo-papel { padding: var(--space-6) var(--space-5) var(--space-7); background: var(--superficie); -webkit-mask: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) 50% / 20px 100%;
 mask: conic-gradient(from -45deg at bottom, transparent, #000 1deg 89deg, transparent 90deg) 50% / 20px 100%; }
#main .cx-recibo-cab { display: flex; justify-content: space-between; gap: var(--space-3); max-width: none; margin: 0 0 var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px dashed var(--linea-control); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
#main .cx-recibo-lineas { margin: 0; padding: 0; list-style: none; }
#main .cx-recibo-lineas li { display: grid; grid-template-columns: 20px auto minmax(var(--space-4), 1fr) auto; grid-template-areas: "ico nombre puntos valor" ". nota nota nota"; column-gap: var(--space-3); align-items: baseline; margin: 0; padding: var(--space-3) 0; }
#main .cx-recibo-lineas li::after { content: ""; grid-area: puntos; align-self: end; margin-bottom: 6px; border-bottom: 2px dotted var(--linea-control); }
#main .cx-recibo-ico { grid-area: ico; align-self: center; width: 20px; height: 20px; fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-recibo-lineas strong { grid-area: nombre; font: 600 15px/22px var(--font-sans); color: var(--tinta); }
#main .cx-recibo-valor { grid-area: valor; font: 500 12px/22px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--azul); }
#main .cx-recibo-lineas small { grid-area: nota; display: block; margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--texto-2); }
#main .cx-recibo-total { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); max-width: none; margin: var(--space-2) 0 0; padding-top: var(--space-4); border-top: 4px double var(--tinta); }
#main .cx-recibo-total > span { font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
#main .cx-recibo-total > strong { font: 500 48px/1 var(--font-sans); letter-spacing: -.04em; color: var(--tinta); }
#main .cx-recibo-sello { position: absolute; right: 76px; top: 50%; width: 104px; height: 104px; transform: translateY(-50%) rotate(-14deg); fill: none; stroke: var(--azul); stroke-width: 3; opacity: .85; mix-blend-mode: multiply; pointer-events: none; }
#main .cx-recibo-sello text { fill: var(--azul); stroke: none; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; }
#main .cx-recibo-sello .cx-recibo-sello-fino { stroke-width: 1.5; }
#main .cx-recibo-sello .cx-recibo-sello-ok { stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-ficha-escena { display: grid; place-items: center; padding: var(--space-8) var(--space-6); border-radius: var(--radio-tarjeta); background: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px, var(--noche); }
#main .cx-ficha { width: 100%; max-width: 420px; padding: var(--space-4) var(--space-5) var(--space-5); border: 2px solid var(--tinta); background: var(--superficie); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); color: var(--tinta); }
#main .cx-ficha-tit { max-width: none; margin: 0; font: 800 40px/1.05 var(--font-sans); letter-spacing: -.03em; color: var(--tinta); }
#main .cx-ficha-sub { max-width: none; margin: var(--space-1) 0 0; padding-bottom: var(--space-2); border-bottom: 12px solid var(--tinta); font: 600 15px/22px var(--font-sans); color: var(--tinta); }
#main .cx-ficha-filas { margin: 0; border-bottom: 6px solid var(--tinta); }
#main .cx-ficha-filas > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--tinta); }
#main .cx-ficha-filas > div:first-child { border-top: 0; }
#main .cx-ficha-filas dt { margin: 0; font: 700 16px/22px var(--font-sans); color: var(--tinta); }
#main .cx-ficha-filas dd { margin: 0; font: 700 16px/22px var(--font-sans); text-align: right; color: var(--tinta); }
#main .cx-ficha-filas .cx-ficha-nota { grid-column: 1 / -1; margin-top: 2px; font: 400 13px/19px var(--font-sans); text-align: left; color: var(--texto-2); }
#main :is(.cx-recibo-todo, .cx-ficha-todo) { margin: var(--space-5) 0 0; }
#main :is(.cx-recibo-todo, .cx-ficha-todo) summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-4) 0 0; border-top: 1px dashed var(--linea-control); cursor: pointer; list-style: none; font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
#main :is(.cx-recibo-todo, .cx-ficha-todo) summary::-webkit-details-marker { display: none; }
#main :is(.cx-recibo-todo, .cx-ficha-todo) summary::after { content: "+"; font: 400 20px/1 var(--font-sans); }
/* Abierto, «−»: el «+» girado sobresalía 6 px del papel. */
#main :is(.cx-recibo-todo, .cx-ficha-todo)[open] summary::after { content: "−"; }
#main :is(.cx-recibo-todo, .cx-ficha-todo) summary:focus-visible { outline: none; box-shadow: var(--anillo-foco); border-radius: 4px; }
#main :is(.cx-recibo-todo, .cx-ficha-todo) .cx-incluye-grupos { columns: 1; margin-top: var(--space-4); }
#main :is(.cx-recibo-todo, .cx-ficha-todo) .cx-lista li { font-size: 14px; line-height: 21px; }
@media (max-width: 640px) {
	#main .cx-incluye-entrada { font-size: 16px; line-height: 26px; }
	#main .cx-recibo-escena { padding: var(--space-5) var(--space-3) var(--space-6); }
	#main .cx-recibo-hoja { width: calc(100% - 16px); }
	#main .cx-recibo-papel { padding: var(--space-5) var(--space-4) var(--space-6); }
	/* Con la letra del sitio, más ancha que la de respaldo, «Correo corporativo» partía en dos y el sello tocaba
	   «ESTO» (medido en el CMS a 390 px). */
	#main .cx-recibo-lineas li { grid-template-columns: 20px auto minmax(var(--space-2), 1fr) auto; column-gap: var(--space-2); }
	#main .cx-recibo-lineas strong { font-size: 14px; }
	#main .cx-recibo-valor { font-size: 11px; letter-spacing: .02em; }
	#main .cx-recibo-total { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
	#main .cx-recibo-total > span { font-size: 11px; letter-spacing: .02em; }
	#main .cx-recibo-total > strong { font-size: 44px; }
	#main .cx-recibo-sello { top: 78%; right: 0; width: 88px; height: 88px; }
	#main :is(.cx-recibo-todo, .cx-ficha-todo) summary { font-size: 11px; letter-spacing: .03em; }
	#main .cx-ficha-escena { padding: var(--space-6) var(--space-4); }
	#main .cx-ficha-tit { font-size: 32px; }
}

/* «El 50 % es tuyo» (77Tzuj1q), en /afiliados/: sin tarjetas. La primera factura del referido es una barra rayada
   (`cx-comision-barra`) y la parte del afiliado va en azul (`cx-comision-tuyo`): la mitad (`mitad`) en hosting y
   reseller con pago anual, la quinta parte (`quinto`) en cloud. Las cifras en grande, sueltas sobre la página, y los
   otros cuatro datos en una fila de cifras separadas por filetes (`cx-comision-datos`). */
#main .cx-comision { margin: var(--space-7) 0; }
#main .cx-comision-tarifas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-8); align-items: end; }
#main .cx-comision-tarifa { min-width: 0; }
#main .cx-comision-cifra { max-width: none; margin: 0 0 var(--space-4); font: 500 144px/1 var(--font-sans); letter-spacing: -.05em; color: var(--azul); }
#main .cx-comision-tarifa + .cx-comision-tarifa .cx-comision-cifra { font-size: 104px; }
#main .cx-comision-barra { position: relative; display: flex; justify-content: flex-end; align-items: center; height: 56px; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-control); background: repeating-linear-gradient(135deg, var(--nube) 0 10px, var(--superficie) 10px 20px); }
#main .cx-comision-tuyo { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; padding-left: var(--space-4); background: var(--azul); color: var(--on-azul); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; transform-origin: left center; }
#main .cx-comision-barra.mitad .cx-comision-tuyo { width: 50%; }
#main .cx-comision-barra.quinto .cx-comision-tuyo { width: 20%; }
#main .cx-comision-factura { padding-right: var(--space-4); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
#main .cx-comision-que { max-width: 40ch; margin: var(--space-3) 0 0; font-size: 16px; line-height: 24px; color: var(--texto-2); }
#main .cx-comision-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--linea); }
#main .cx-comision-datos > div { padding: 0 var(--space-5); }
#main .cx-comision-datos > div:first-child { padding-left: 0; }
#main .cx-comision-datos > div + div { border-left: 1px solid var(--linea); }
#main .cx-comision-datos dt { margin: 0; font: 500 40px/1.1 var(--font-sans); letter-spacing: -.03em; color: var(--tinta); }
#main .cx-comision-datos dd { margin: var(--space-3) 0 0; font-size: 15px; line-height: 22px; color: var(--texto-2); }
@media (max-width: 860px) {
	#main .cx-comision-tarifas { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
	#main .cx-comision-cifra { font-size: 112px; }
	#main .cx-comision-tarifa + .cx-comision-tarifa .cx-comision-cifra { font-size: 88px; }
	#main .cx-comision-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
	#main .cx-comision-datos > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
	#main .cx-comision-datos { grid-template-columns: minmax(0, 1fr); }
	#main .cx-comision-datos > div { padding-left: 0; border-left: 0; }
	#main .cx-comision-datos > div + div { padding-top: var(--space-5); border-top: 1px solid var(--linea); }
	#main :is(.cx-comision-tuyo, .cx-comision-factura) { font-size: 10px; letter-spacing: .02em; }
}

/* «Con qué cuentas» (P0mZQavL), en /afiliados/: los seis puntos numerados (`cx-afpanel-lista`, un contador) y un panel
   de afiliado de muestra (`cx-afpanel-app`, «Ejemplo», oculto al lector de pantalla porque repite la lista). Cada parte
   del panel lleva su número en un círculo (`data-n`), y al pasar por un punto de la lista se ilumina la suya (`:has`).
   El enlace de ejemplo es el de /afiliados/recursos/; las cifras son cuentas, sin dinero. */
#main .cx-afpanel { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); align-items: center; margin: var(--space-6) 0 0; counter-reset: cx-afpanel; }
#main .cx-afpanel-lista { margin: 0; padding: 0; list-style: none; }
#main .cx-afpanel-lista li { position: relative; margin: 0; padding: var(--space-3) 0 var(--space-3) 44px; counter-increment: cx-afpanel; }
#main .cx-afpanel-lista li::before { content: counter(cx-afpanel); position: absolute; top: var(--space-3); left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); font: 600 13px/1 var(--font-mono); }
#main .cx-afpanel-lista h3 { margin: 0 0 2px; font: 600 17px/24px var(--font-sans); color: var(--tinta); transition: color .2s; }
#main .cx-afpanel-lista li:hover h3 { color: var(--azul); }
#main .cx-afpanel-lista p { max-width: none; margin: 0; font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-afpanel-app { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-afpanel-barra { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--noche); color: var(--on-hero); font: 600 14px/20px var(--font-sans); }
#main .cx-afpanel-ej { padding: 2px var(--space-2); border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radio-capsula); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
#main .cx-afpanel-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-5); background: var(--nube); }
#main .cx-afpanel-cuerpo > div { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); transition: box-shadow .2s; }
#main .cx-afpanel-cuerpo > :is(.cx-afpanel-enlace, .cx-afpanel-stats) { grid-column: 1 / -1; }
#main .cx-afpanel-rot { font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
#main .cx-afpanel-url { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border: 1px solid var(--linea-control); border-radius: var(--radio-control); background: var(--nube); }
#main .cx-afpanel-app code { overflow: hidden; padding: 0; background: none; color: var(--tinta); font: 500 13px/20px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
#main .cx-afpanel-btn { flex: none; padding: var(--space-1) var(--space-3); border-radius: var(--radio-control); background: var(--azul); color: var(--on-azul); font: 600 13px/20px var(--font-sans); }
#main .cx-afpanel-camps { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 13px; line-height: 20px; color: var(--texto-2); }
#main .cx-afpanel-camps code { color: var(--azul); }
#main .cx-afpanel-cifras { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 13px; line-height: 18px; color: var(--texto-2); }
#main .cx-afpanel-cifras b { display: block; font: 500 28px/1.1 var(--font-sans); letter-spacing: -.02em; color: var(--tinta); }
#main .cx-afpanel-graf { display: flex; align-items: flex-end; gap: 6px; height: 48px; margin-top: var(--space-1); }
#main .cx-afpanel-graf i { flex: 1; border-radius: 3px 3px 0 0; background: var(--azul); transform-origin: bottom center; }
#main .cx-afpanel-graf i:nth-child(1) { height: 30%; }
#main .cx-afpanel-graf i:nth-child(2) { height: 45%; }
#main .cx-afpanel-graf i:nth-child(3) { height: 38%; }
#main .cx-afpanel-graf i:nth-child(4) { height: 60%; }
#main .cx-afpanel-graf i:nth-child(5) { height: 52%; }
#main .cx-afpanel-graf i:nth-child(6) { height: 70%; }
#main .cx-afpanel-graf i:nth-child(7) { height: 48%; }
#main .cx-afpanel-graf i:nth-child(8) { height: 82%; }
#main .cx-afpanel-graf i:nth-child(9) { height: 66%; }
#main .cx-afpanel-graf i:nth-child(10) { height: 90%; }
#main .cx-afpanel-graf i:nth-child(11) { height: 74%; }
#main .cx-afpanel-graf i:nth-child(12) { height: 100%; }
#main .cx-afpanel-cupon b { align-self: flex-start; padding: var(--space-1) var(--space-3); border: 2px dashed var(--azul); border-radius: var(--radio-control); color: var(--azul); font: 600 15px/22px var(--font-mono); letter-spacing: .08em; }
#main .cx-afpanel-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
#main .cx-afpanel-chips span { padding: 2px var(--space-2); border-radius: var(--radio-capsula); background: var(--azul-suave); color: var(--azul); font-size: 12px; line-height: 18px; }
#main .cx-afpanel-soporte > span:last-child { font: 600 15px/22px var(--font-sans); color: var(--tinta); }
#main .cx-afpanel-cuerpo > .cx-afpanel-informe { flex-direction: row; justify-content: space-between; align-items: center; padding-right: 44px; font: 600 14px/20px var(--font-sans); color: var(--tinta); }
#main .cx-afpanel-interruptor { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--azul); }
#main .cx-afpanel-interruptor::after { content: ""; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--superficie); }
#main .cx-afpanel-app [data-n]::before { content: attr(data-n); position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 12px/1 var(--font-mono); }
#main .cx-afpanel:has(.cx-afpanel-lista li:nth-child(1):hover) .cx-afpanel-app [data-n="1"],
#main .cx-afpanel:has(.cx-afpanel-lista li:nth-child(2):hover) .cx-afpanel-app [data-n="2"],
#main .cx-afpanel:has(.cx-afpanel-lista li:nth-child(3):hover) .cx-afpanel-app [data-n="3"],
#main .cx-afpanel:has(.cx-afpanel-lista li:nth-child(4):hover) .cx-afpanel-app [data-n="4"],
#main .cx-afpanel:has(.cx-afpanel-lista li:nth-child(5):hover) .cx-afpanel-app [data-n="5"],
#main .cx-afpanel:has(.cx-afpanel-lista li:nth-child(6):hover) .cx-afpanel-app [data-n="6"] { box-shadow: 0 0 0 2px var(--azul), var(--sombra-flotante); }
@media (max-width: 860px) {
	#main .cx-afpanel { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 480px) {
	#main .cx-afpanel-cuerpo { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
	#main .cx-afpanel-barra { padding: var(--space-3) var(--space-4); }
}

/* «Todo listo para compartir» (VGC3n96e), en /afiliados/: los cuatro puntos y, al lado, una mesa (`cx-kit-mesa`) con
   los banners del kit superpuestos, un poco girados y con su sombra, y la plantilla de SMS en una burbuja azul con
   «TU ENLACE» marcado. El giro va en `rotate`, y la entrada anima `translate`: así no lo deshace. En móvil no se
   superponen: el cuadrado y la caja en una fila, la tira debajo, y el vertical no va. */
#main .cx-kit { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); align-items: center; margin: var(--space-6) 0 0; }
#main .cx-kit-lista { margin: 0; padding: 0; list-style: none; }
#main .cx-kit-lista li { margin: 0; padding: var(--space-4) 0; border-top: 1px solid var(--linea); }
#main .cx-kit-lista li:first-child { padding-top: 0; border-top: 0; }
#main .cx-kit-lista h3 { margin: 0 0 var(--space-1); font: 600 17px/24px var(--font-sans); color: var(--tinta); }
#main .cx-kit-lista p { max-width: none; margin: 0; font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-kit-mesa { position: relative; aspect-ratio: 25 / 18; }
#main .cx-kit-b { position: absolute; display: block; height: auto; border-radius: var(--radio-control); box-shadow: var(--sombra-flotante); }
#main .cx-kit-cuadrado { top: 6%; left: 2%; z-index: 1; width: 44%; rotate: -4deg; }
#main .cx-kit-vertical { top: 1%; left: 40%; z-index: 2; width: 21%; rotate: 3deg; }
#main .cx-kit-caja { top: 10%; right: 2%; z-index: 1; width: 37%; rotate: 4deg; }
#main .cx-kit-tira { bottom: 9%; left: 4%; z-index: 3; width: 64%; rotate: -2deg; }
#main .cx-kit-sms { position: absolute; right: 1%; bottom: 0; z-index: 4; width: 46%; max-width: none; margin: 0; padding: var(--space-3) var(--space-4); border-radius: 18px 18px 4px 18px; background: var(--azul); box-shadow: var(--sombra-flotante); color: var(--on-azul); font-size: 15px; line-height: 22px; }
#main .cx-kit-sms-de { display: block; margin-bottom: var(--space-1); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
#main .cx-kit-sms mark { padding: 0 var(--space-1); border-radius: 4px; background: rgba(255, 255, 255, .22); color: var(--on-azul); font: 600 13px/22px var(--font-mono); white-space: nowrap; }
@media (max-width: 860px) {
	#main .cx-kit { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 640px) {
	#main .cx-kit-mesa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: center; aspect-ratio: auto; }
	#main .cx-kit-b { position: static; width: 100%; rotate: none; }
	#main .cx-kit-vertical { display: none; }
	#main :is(.cx-kit-tira, .cx-kit-sms) { grid-column: 1 / -1; }
	#main .cx-kit-sms { position: static; width: auto; }
}

/* «Siempre al aire» de /cloud/ como láminas (fVBWRwVR), al estilo de «Hoy» de la App Store: altas, cada una con su
   fondo y un dibujo grande a sangre (`cx-lamina-arte`) que dice su punto. Las oscuras, sobre tokens que no cambian en
   el modo oscuro (`--noche`, `--hero`); las claras, sobre los que sí. Debajo, el título y el texto de siempre. */
#main .cx-laminas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
#main .cx-lamina { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0 0 var(--space-6); overflow: hidden; border-radius: var(--radio-destacada); }
#main .cx-lamina-arte { position: relative; display: grid; place-items: center; height: 220px; margin: 0 0 var(--space-5); overflow: hidden; }
#main .cx-lamina h3 { margin: 0 var(--space-6) var(--space-2); font: 600 22px/28px var(--font-sans); letter-spacing: -.01em; }
#main .cx-lamina p { max-width: none; margin: 0 var(--space-6); font-size: 15px; line-height: 23px; }
#main .cx-lamina.potente { background: var(--noche); }
#main .cx-lamina.veloz { background: var(--hero); }
#main .cx-lamina.soporte { background: var(--nube); }
#main .cx-lamina.simple { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--linea); }
#main .cx-lamina.copias { background: var(--azul-suave); }
#main .cx-lamina.flexible { background: linear-gradient(160deg, var(--noche), var(--hero)); }
#main .cx-lamina:is(.potente, .veloz, .flexible) :is(h3, p, a) { color: var(--on-hero); }
#main .cx-lamina:is(.potente, .veloz, .flexible) a { text-decoration: underline; }
#main .cx-lamina:is(.soporte, .simple, .copias) h3 { color: var(--tinta); }
#main .cx-lamina:is(.soporte, .simple, .copias) p { color: var(--texto-2); }
/* Más potente: un chasis de blades, cada una con sus dos luces. */
#main .cx-dib-chasis { display: grid; gap: 6px; width: 64%; padding: var(--space-3); border-radius: var(--radio-control); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
#main .cx-dib-chasis i { position: relative; display: block; height: 14px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); }
#main .cx-dib-chasis i::before, #main .cx-dib-chasis i::after { content: ""; position: absolute; top: 4px; width: 6px; height: 6px; border-radius: 50%; }
#main .cx-dib-chasis i::before { right: 10px; background: var(--acierto); }
#main .cx-dib-chasis i::after { right: 22px; background: var(--hero-brillo); }
/* Más veloz: «< 20 ms» en grande, con su estela. */
#main .cx-dib-cifra { position: relative; z-index: 1; color: var(--on-hero); font: 600 88px/1 var(--font-sans); letter-spacing: -.04em; }
#main .cx-dib-cifra small { margin-left: var(--space-1); font-size: 28px; letter-spacing: 0; }
#main .cx-dib-estela i { position: absolute; left: 0; width: 46%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55)); }
#main .cx-dib-estela i:nth-child(1) { top: 34%; }
#main .cx-dib-estela i:nth-child(2) { top: 50%; width: 34%; }
#main .cx-dib-estela i:nth-child(3) { top: 66%; width: 40%; }
/* Soporte: la pregunta y la respuesta, en burbujas. */
#main .cx-lamina.soporte .cx-lamina-arte { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: 0 var(--space-6); }
#main .cx-dib-burbuja { max-width: 82%; padding: var(--space-2) var(--space-4); border-radius: 16px 16px 16px 4px; background: var(--superficie); box-shadow: 0 2px 10px rgba(10, 30, 60, .08); color: var(--tinta); font-size: 14px; line-height: 20px; }
#main .cx-dib-burbuja.tu { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--azul); color: var(--on-azul); }
/* Más simple: el botón de crear un servidor, el cursor que lo pulsa y el servidor nuevo. */
#main .cx-dib-boton { padding: var(--space-3) var(--space-5); border-radius: var(--radio-control); background: var(--azul); box-shadow: var(--sombra-flotante); color: var(--on-azul); font: 600 15px/20px var(--font-sans); }
#main .cx-dib-cursor { position: absolute; top: calc(50% + 12px); left: calc(50% + 76px); width: 24px; height: 24px; fill: var(--tinta); stroke: var(--superficie); stroke-width: 1.5; stroke-linejoin: round; }
#main .cx-dib-nuevo { position: absolute; bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radio-capsula); background: var(--nube); color: var(--texto-2); font: 500 12px/18px var(--font-mono); }
#main .cx-dib-nuevo i { width: 8px; height: 8px; border-radius: 50%; background: var(--acierto); }
/* Backups: tres copias apiladas. */
#main .cx-lamina.copias .cx-lamina-arte { display: block; }
#main .cx-dib-copia { position: absolute; left: 20%; width: 60%; height: 112px; padding: var(--space-2) var(--space-3); border-radius: var(--radio-control); background: var(--superficie); box-shadow: var(--sombra-flotante); color: var(--texto-3); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
/* Las líneas del contenido van en un ::after: con degradados en el fondo, el medidor de contraste no ve el blanco de la copia. */
#main .cx-dib-copia::after { content: ""; position: absolute; top: 44px; left: var(--space-3); width: 62%; height: 20px; background: linear-gradient(var(--linea) 0 0) 0 0 / 100% 6px no-repeat, linear-gradient(var(--linea) 0 0) 0 14px / 70% 6px no-repeat; }
#main .cx-dib-copia:nth-child(1) { top: 16px; z-index: 1; rotate: -5deg; }
#main .cx-dib-copia:nth-child(2) { top: 50px; z-index: 2; rotate: -1deg; }
#main .cx-dib-copia:nth-child(3) { top: 84px; z-index: 3; rotate: 3deg; color: var(--azul-profundo); }
/* Planes flexibles: deslizadores de CPU, RAM y disco. */
#main .cx-lamina.flexible .cx-lamina-arte { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: var(--space-5); padding: 0 var(--space-7); }
#main .cx-dib-deslizador { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
#main .cx-dib-deslizador b { color: var(--on-hero); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
#main .cx-dib-deslizador i { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
#main .cx-dib-deslizador i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--on-hero); }
#main .cx-dib-deslizador i::after { content: ""; position: absolute; top: -6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--on-hero); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
#main .cx-dib-deslizador:nth-child(1) i::before { width: 45%; }
#main .cx-dib-deslizador:nth-child(1) i::after { left: 45%; }
#main .cx-dib-deslizador:nth-child(2) i::before { width: 70%; }
#main .cx-dib-deslizador:nth-child(2) i::after { left: 70%; }
#main .cx-dib-deslizador:nth-child(3) i::before { width: 30%; }
#main .cx-dib-deslizador:nth-child(3) i::after { left: 30%; }
@media (max-width: 1024px) {
	#main .cx-laminas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	#main .cx-laminas { display: flex; gap: var(--space-4); margin-right: calc(var(--space-4) * -1); padding-bottom: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; }
	#main .cx-lamina { flex: 0 0 82%; scroll-snap-align: start; }
	#main .cx-lamina-arte { height: 200px; }
}

/* «Tu hosting ya viene listo» de /hosting/ (g8WKNbqf): cuatro columnas sin tarjeta (`cx-listo`), separadas por
   filetes, cada una con un diagrama vivo encima (`cx-listo-dib`) que sale de su texto: medidores de CPU, RAM y E/S con
   su tope por cuenta; dos rutas hasta tu sitio, la larga apagada y la local encendida; tres pasos marcados; y un
   escudo con sus sellos. Debajo, el título, el texto y el pie de siempre. */
#main .cx-listo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-6) 0 var(--space-5); }
#main .cx-listo-punto { min-width: 0; padding: 0 var(--space-5); }
#main .cx-listo-punto:first-child { padding-left: 0; }
#main .cx-listo-punto + .cx-listo-punto { border-left: 1px solid var(--linea); }
#main .cx-listo-dib { position: relative; display: flex; align-items: flex-end; gap: var(--space-4); height: 140px; margin: 0 0 var(--space-5); }
#main .cx-listo-punto h3 { margin: 0 0 var(--space-2); font: 600 18px/24px var(--font-sans); color: var(--tinta); }
#main .cx-listo-punto p { max-width: none; margin: 0; font-size: 15px; line-height: 23px; color: var(--texto-2); }
#main .cx-listo-punto .cx-listo-pie { margin-top: var(--space-4); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); }
/* Recursos: un medidor por recurso, con lo que usas en azul y el tope de tu cuenta en raya. */
#main .cx-listo-medidor { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
#main .cx-listo-medidor i { position: relative; display: block; width: 34px; height: 104px; overflow: hidden; border: 1px solid var(--linea); border-radius: 8px; background: var(--superficie); }
#main .cx-listo-medidor i::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 55%; background: var(--azul); transform-origin: bottom center; }
#main .cx-listo-medidor i::after { content: ""; position: absolute; top: 14%; right: 0; left: 0; border-top: 2px dashed var(--texto-3); }
#main .cx-listo-medidor:nth-child(2) i::before { height: 72%; }
#main .cx-listo-medidor:nth-child(3) i::before { height: 38%; }
#main .cx-listo-medidor b { color: var(--texto-3); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
/* Velocidad: dos rutas hasta tu sitio; la local, encendida, con un punto que la recorre. */
#main .cx-listo-mapa { display: block; width: 100%; max-width: 240px; height: auto; overflow: visible; }
#main .cx-listo-ruta { fill: none; stroke-linecap: round; }
#main .cx-listo-ruta.larga { stroke: var(--texto-3); stroke-width: 2; stroke-dasharray: 4 6; opacity: .55; }
#main .cx-listo-ruta.local { stroke: var(--azul); stroke-width: 4; }
#main .cx-listo-nodo { fill: var(--superficie); stroke: var(--tinta); stroke-width: 2; }
#main .cx-listo-viaje { fill: var(--azul); stroke: var(--superficie); stroke-width: 2; }
#main .cx-listo-etq { fill: var(--texto-2); font: 500 11px var(--font-mono); letter-spacing: .04em; }
/* Soporte: los tres pasos de su texto, marcados. */
#main .cx-listo-pasos { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
#main .cx-listo-paso { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radio-control); background: var(--superficie); box-shadow: 0 1px 3px rgba(10, 30, 60, .08); color: var(--tinta); font-size: 14px; line-height: 20px; }
#main .cx-listo-paso::before { content: "✓"; display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acierto); color: var(--on-azul); font: 700 12px/1 var(--font-sans); }
/* Blindado: el escudo y sus sellos. */
#main .cx-listo-punto.blindado .cx-listo-dib { align-items: center; }
#main .cx-listo-escudo { flex: none; width: 84px; height: 84px; fill: var(--azul-suave); stroke: var(--azul); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-listo-sellos { display: flex; flex-wrap: wrap; gap: var(--space-2); }
#main .cx-listo-sello { padding: 2px var(--space-2); border: 1px solid var(--linea-control); border-radius: var(--radio-capsula); background: var(--superficie); color: var(--tinta); font: 500 11px/18px var(--font-mono); letter-spacing: .04em; }
@media (max-width: 1024px) {
	#main .cx-listo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
	#main .cx-listo-punto:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 640px) {
	#main .cx-listo { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
	#main .cx-listo-punto, #main .cx-listo-punto + .cx-listo-punto { padding: 0; border-left: 0; }
	#main .cx-listo-punto + .cx-listo-punto { padding-top: var(--space-6); border-top: 1px solid var(--linea); }
	#main .cx-listo-dib { height: auto; }
}

/* «Datacenter en Colombia» de la portada (elLaT8xo), sin tarjetas (`cx-colombia`). A la izquierda, el soporte como pieza
   de arte: las cinco ciudades de su texto puestas en sus coordenadas, unidas en constelación, con su nombre y un pulso,
   y debajo canales y horario. A la derecha, Velocidad, Garantía y Escalable en filas con una cifra grande o una gráfica.
   Va sobre la sección noche y dentro de un [fusion_code], que no hereda su color de texto: lo lleva puesto. */
#main .cx-colombia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; margin: var(--space-6) 0; }
#main .cx-colombia h3 { margin: 0 0 var(--space-2); font: 600 20px/26px var(--font-sans); color: var(--on-hero); }
#main .cx-colombia p { max-width: none; margin: 0; font-size: 15px; line-height: 23px; color: rgba(255, 255, 255, .8); }
#main .cx-colombia-arte { margin: 0 0 var(--space-5); padding: var(--space-5); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radio-tarjeta); background: rgba(255, 255, 255, .04); }
#main .cx-colombia-mapa { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }
#main .cx-colombia-red line { stroke: rgba(255, 255, 255, .24); stroke-width: 1.2; stroke-dasharray: 3 4; }
#main .cx-colombia-punto { fill: var(--hero-brillo); }
#main .cx-colombia-onda { fill: none; stroke: var(--hero-brillo); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
#main .cx-colombia-ciudad text { fill: var(--on-hero); color: var(--on-hero); font: 500 11px var(--font-mono); letter-spacing: .04em; }
#main .cx-colombia .cx-colombia-horario { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0 0; }
#main .cx-colombia-horario span { padding: 2px var(--space-3); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radio-capsula); color: var(--on-hero); font: 500 12px/20px var(--font-mono); }
#main .cx-colombia-filas { display: grid; }
#main .cx-colombia-fila { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-6) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
#main .cx-colombia-fila:first-child { padding-top: 0; border-top: 0; }
#main .cx-colombia-cifra { color: var(--hero-brillo); font: 600 64px/1 var(--font-sans); letter-spacing: -.04em; white-space: nowrap; }
#main .cx-colombia-cifra small { margin-left: var(--space-1); font-size: 22px; letter-spacing: 0; }
#main .cx-colombia-graf { display: block; width: 96px; height: 64px; }
#main .cx-colombia-graf rect { fill: var(--hero-brillo); transform-box: fill-box; transform-origin: bottom center; }
#main .cx-colombia-graf rect:nth-child(1) { opacity: .4; }
#main .cx-colombia-graf rect:nth-child(2) { opacity: .6; }
#main .cx-colombia-graf rect:nth-child(3) { opacity: .8; }
@media (max-width: 860px) {
	#main .cx-colombia { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
	#main .cx-colombia-fila { grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-5); }
	#main .cx-colombia-cifra { font-size: 52px; }
}
@media (max-width: 480px) {
	#main .cx-colombia-fila { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

/* «Planes para cualquier necesidad» de /wordpress/ (gEy9wSHF) como una escalera (`cx-escalera`): los cuatro productos
   van de lo sencillo a lo potente, y cada peldaño sube y se hace de un azul más hondo. El peldaño crece desde el
   fondo de una franja de alto fijo, así que los textos de debajo arrancan todos a la misma altura. Los oscuros, sobre
   tokens estables en el modo oscuro. En móvil, los peldaños son barras que se alargan. */
#main .cx-escalera { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: cx-escalera; }
#main .cx-escalera-paso { display: grid; grid-template-rows: 220px auto; align-content: start; margin: 0; counter-increment: cx-escalera; }
#main .cx-escalera-peldano { position: relative; display: flex; align-items: flex-end; align-self: end; min-height: 64px; padding: var(--space-4) var(--space-5); border-radius: var(--radio-tarjeta) var(--radio-tarjeta) var(--radio-control) var(--radio-control); transform-origin: bottom center; }
#main .cx-escalera-peldano::before { content: counter(cx-escalera, decimal-leading-zero); position: absolute; top: var(--space-3); right: var(--space-4); color: rgba(255, 255, 255, .72); font: 500 12px/16px var(--font-mono); letter-spacing: .06em; }
#main .cx-escalera-paso:nth-child(1) .cx-escalera-peldano::before { color: var(--texto-3); }
#main .cx-escalera-peldano h3 { margin: 0; font: 600 20px/26px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); }
#main .cx-escalera-paso:nth-child(n+2) .cx-escalera-peldano h3 { color: var(--on-hero); }
#main .cx-escalera-paso:nth-child(1) .cx-escalera-peldano { height: 34%; background: var(--azul-suave); }
#main .cx-escalera-paso:nth-child(2) .cx-escalera-peldano { height: 54%; background: var(--hero); }
#main .cx-escalera-paso:nth-child(3) .cx-escalera-peldano { height: 76%; background: linear-gradient(160deg, var(--hero), var(--noche)); }
#main .cx-escalera-paso:nth-child(4) .cx-escalera-peldano { height: 100%; background: var(--noche); }
#main .cx-escalera-paso > p { max-width: none; margin: var(--space-5) 0 0; font-size: 15px; line-height: 23px; color: var(--texto-2); }
#main .cx-escalera-paso > p strong { color: var(--tinta); }
#main .cx-escalera-paso > p.cx-accion { margin-top: var(--space-4); }
@media (max-width: 860px) {
	#main .cx-escalera { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	#main .cx-escalera-paso { grid-template-rows: auto auto; }
	#main .cx-escalera-paso .cx-escalera-peldano { height: auto; min-height: 56px; padding-right: var(--space-8); }
	#main .cx-escalera-paso:nth-child(1) .cx-escalera-peldano { width: 60%; }
	#main .cx-escalera-paso:nth-child(2) .cx-escalera-peldano { width: 73%; }
	#main .cx-escalera-paso:nth-child(3) .cx-escalera-peldano { width: 86%; }
	#main .cx-escalera-paso:nth-child(4) .cx-escalera-peldano { width: 100%; }
	#main .cx-escalera-peldano { transform-origin: left center; }
}

/* Los valores de /conexcol/ (8OX6NvE3) como un manifiesto (`cx-valores`): cada valor, una fila con su número en mono,
   la frase en letra grande y su párrafo al lado, con filetes finos, sobre la sección noche. Va en un [fusion_code],
   que no hereda el color de texto de la sección: lo lleva puesto. */
#main .cx-valores { margin: var(--space-7) 0 0; padding: 0; list-style: none; }
#main .cx-valor { display: grid; grid-template-columns: 72px minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-6); align-items: baseline; margin: 0; padding: var(--space-7) 0; border-top: 1px solid rgba(255, 255, 255, .14); }
#main .cx-valor:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
#main .cx-valor-n { color: var(--hero-brillo); font: 500 14px/20px var(--font-mono); letter-spacing: .08em; }
#main .cx-valores h3 { margin: 0; font: 600 48px/1.05 var(--font-sans); letter-spacing: -.03em; text-wrap: balance; color: var(--on-hero); }
#main .cx-valores p { max-width: none; margin: 0; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .78); }
@media (max-width: 1024px) {
	#main .cx-valores h3 { font-size: 40px; }
}
@media (max-width: 860px) {
	#main .cx-valor { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-6) 0; }
	#main .cx-valores h3 { font-size: 34px; }
}

/* /hosting/windows/ (WH65wu7r). Las ventajas, en las láminas del sistema a cuatro columnas (`cx-laminas cuatro`), con
   una lámina para Plesk: una ventanita de panel (`cx-dib-ventana`). El panel Plesk, en dos columnas (`cx-plesk`): los
   tres puntos numerados y una ventana de muestra con su menú y tres módulos numerados igual, que se iluminan al pasar
   por su punto (`:has`). La ventana repite la lista: va oculta al lector de pantalla. */
#main .cx-laminas.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#main .cx-lamina.plesk { background: var(--azul-suave); }
#main .cx-lamina.plesk h3 { color: var(--tinta); }
#main .cx-lamina.plesk p { color: var(--texto-2); }
#main .cx-dib-ventana { display: flex; flex-direction: column; width: 74%; height: 150px; overflow: hidden; border-radius: var(--radio-control); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-dib-ventana-barra { display: flex; gap: 5px; padding: var(--space-2) var(--space-3); background: var(--noche); }
#main .cx-dib-ventana-barra i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
#main .cx-dib-ventana-cuerpo { display: grid; flex: 1; grid-template-columns: 30% minmax(0, 1fr); }
#main .cx-dib-ventana-menu { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-2); background: var(--nube); }
#main .cx-dib-ventana-menu i { height: 6px; border-radius: 3px; background: var(--linea-control); }
#main .cx-dib-ventana-menu i:first-child { background: var(--azul); }
#main .cx-dib-ventana-tablero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3); }
#main .cx-dib-ventana-tablero i { border: 1px solid var(--linea); border-radius: 6px; background: var(--azul-suave); }
#main .cx-dib-ventana-tablero i:first-child { border-color: transparent; background: var(--azul); }
#main .cx-plesk { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); align-items: center; margin: var(--space-6) 0 0; counter-reset: cx-plesk; }
#main .cx-plesk-lista { margin: 0; padding: 0; list-style: none; }
#main .cx-plesk-lista li { position: relative; margin: 0; padding: var(--space-3) 0 var(--space-3) 44px; counter-increment: cx-plesk; }
#main .cx-plesk-lista li::before { content: counter(cx-plesk); position: absolute; top: var(--space-3); left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul-suave); color: var(--azul); font: 600 13px/1 var(--font-mono); }
#main .cx-plesk-lista h3 { margin: 0 0 2px; font: 600 17px/24px var(--font-sans); color: var(--tinta); transition: color .2s; }
#main .cx-plesk-lista li:hover h3 { color: var(--azul); }
#main .cx-plesk-lista p { max-width: none; margin: 0; font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-plesk-app { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-plesk-barra { display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-4); background: var(--noche); color: var(--on-hero); font: 600 14px/20px var(--font-sans); }
#main .cx-plesk-barra i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
#main .cx-plesk-barra span { margin-left: var(--space-3); }
#main .cx-plesk-cuerpo { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
#main .cx-plesk-menu { margin: 0; padding: var(--space-4) 0; border-right: 1px solid var(--linea); background: var(--nube); list-style: none; }
#main .cx-plesk-menu li { margin: 0; padding: var(--space-2) var(--space-4); color: var(--texto-2); font-size: 13px; line-height: 18px; }
#main .cx-plesk-menu li.activo { background: var(--azul-suave); box-shadow: inset 3px 0 0 var(--azul); color: var(--azul); font-weight: 600; }
#main .cx-plesk-modulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--space-3); padding: var(--space-4); }
#main .cx-plesk-mod { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-4); border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); transition: box-shadow .2s; }
#main .cx-plesk-mod.wp { grid-column: 1 / -1; }
#main .cx-plesk-mod b { padding-right: var(--space-6); color: var(--tinta); font: 600 14px/20px var(--font-sans); }
#main .cx-plesk-mod small { color: var(--texto-3); font-size: 12px; line-height: 16px; }
#main .cx-plesk-mod::before { content: attr(data-n); position: absolute; top: var(--space-2); right: var(--space-2); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 11px/1 var(--font-mono); }
#main .cx-plesk-anillo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--acierto) 0 82%, var(--linea) 0); }
#main .cx-plesk-anillo span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--superficie); color: var(--acierto); font: 700 20px/1 var(--font-sans); }
#main .cx-plesk-sitios { display: flex; flex-direction: column; gap: var(--space-1); }
#main .cx-plesk-sitios span { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: 6px; background: var(--nube); color: var(--tinta); font: 500 12px/20px var(--font-mono); }
#main .cx-plesk-sitios i { color: var(--acierto); font-style: normal; }
#main .cx-plesk-curva { display: block; width: 100%; height: 40px; }
#main .cx-plesk-curva path { fill: none; stroke: var(--azul); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; }
#main .cx-plesk:has(.cx-plesk-lista li:nth-child(1):hover) .cx-plesk-mod[data-n="1"],
#main .cx-plesk:has(.cx-plesk-lista li:nth-child(2):hover) .cx-plesk-mod[data-n="2"],
#main .cx-plesk:has(.cx-plesk-lista li:nth-child(3):hover) .cx-plesk-mod[data-n="3"] { box-shadow: 0 0 0 2px var(--azul), var(--sombra-flotante); }
@media (max-width: 1024px) {
	#main .cx-laminas.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	#main .cx-plesk { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 640px) {
	#main .cx-laminas.cuatro { display: flex; }
	#main .cx-plesk-cuerpo { grid-template-columns: minmax(0, 1fr); }
	#main .cx-plesk-menu { display: none; }
	#main .cx-plesk-modulos { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
}

/* /vps/ (m9Tvahpv). «Qué es un VPS»: una vista despiezada en isométrico (`cx-anatomia`), con placas en SVG pintadas de
   abajo arriba. Cada capa lleva su color, y sus caras laterales se oscurecen con `brightness`. Las etiquetas van con
   guía, y la escala es una placa fantasma punteada. Al lado, los cuatro textos con un cuadrito del color de su capa.
   «Por qué un VPS en Colombia»: un pase de abordar (`cx-pase`), con el cuerpo blanco, el talón azul, la perforación,
   las muescas (una máscara) y el código de barras, un poco inclinado. Los dos dibujos van ocultos al lector de
   pantalla: repiten los textos. */
#main .cx-anatomia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; margin: var(--space-6) 0 0; }
#main .cx-anatomia-pila { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }
#main .cx-anatomia-capa .i { filter: brightness(.82); }
#main .cx-anatomia-capa .d { filter: brightness(.66); }
#main .cx-anatomia-capa.blades :is(.t, .i, .d) { fill: var(--noche); }
#main .cx-anatomia-capa.blades .r { stroke: rgba(255, 255, 255, .3); stroke-width: 2; }
#main .cx-anatomia-capa.disco :is(.t, .i, .d) { fill: var(--hero); }
#main .cx-anatomia-capa.copias :is(.t, .i, .d) { fill: var(--superficie); stroke: var(--linea-control); stroke-width: 1; }
#main .cx-anatomia-capa.maquina :is(.t, .i, .d) { fill: var(--hero-brillo); }
#main .cx-anatomia-capa.escala .fantasma { fill: none; stroke: var(--azul); stroke-width: 1.5; stroke-dasharray: 5 5; }
#main .cx-anatomia-capa.escala .flecha { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-anatomia-capa line:not(.r) { stroke: var(--linea-control); stroke-width: 1.2; stroke-dasharray: 3 3; }
#main .cx-anatomia-capa text { fill: var(--tinta); font: 500 13px var(--font-mono); letter-spacing: .02em; }
#main .cx-anatomia-capa.escala text { fill: var(--azul); }
#main :is(.cx-anatomia-lista, .cx-pase-lista) { margin: 0; padding: 0; list-style: none; }
#main :is(.cx-anatomia-lista, .cx-pase-lista) li { position: relative; margin: 0; padding: var(--space-4) 0; border-top: 1px solid var(--linea); }
#main :is(.cx-anatomia-lista, .cx-pase-lista) li:first-child { padding-top: 0; border-top: 0; }
#main :is(.cx-anatomia-lista, .cx-pase-lista) h3 { margin: 0 0 var(--space-1); font: 600 17px/24px var(--font-sans); color: var(--tinta); }
#main :is(.cx-anatomia-lista, .cx-pase-lista) p { max-width: none; margin: 0; font-size: 15px; line-height: 23px; color: var(--texto-2); }
#main .cx-anatomia-lista li { padding-left: var(--space-6); }
#main .cx-anatomia-lista li::before { content: ""; position: absolute; top: calc(var(--space-4) + 6px); left: 0; width: 12px; height: 12px; border-radius: 3px; }
#main .cx-anatomia-lista li:first-child::before { top: 6px; }
#main .cx-anatomia-lista li.maquina::before { background: var(--hero-brillo); }
#main .cx-anatomia-lista li.disco::before { background: var(--hero); }
#main .cx-anatomia-lista li.copias::before { border: 1px solid var(--linea-control); background: var(--superficie); }
#main .cx-anatomia-lista li.escala::before { border: 1.5px dashed var(--azul); }
#main .cx-pase { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); align-items: center; margin: var(--space-6) 0 0; }
/* Inclinado, sus esquinas salen unos píxeles: el margen les hace sitio dentro de la columna. */
#main .cx-pase-boleto { display: grid; grid-template-columns: minmax(0, 1fr) 150px; margin: var(--space-3) var(--space-4); filter: drop-shadow(0 18px 30px rgba(10, 30, 60, .16)); rotate: -2deg; }
#main .cx-pase-principal { padding: var(--space-5) var(--space-6); border-radius: 16px 0 0 16px; background: var(--superficie); -webkit-mask: radial-gradient(circle at right top, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at right bottom, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
 mask: radial-gradient(circle at right top, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at right bottom, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat; }
#main .cx-pase-talon { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5) var(--space-4); border-left: 2px dashed var(--linea-control); border-radius: 0 16px 16px 0; background: var(--azul); color: var(--on-azul); -webkit-mask: radial-gradient(circle at left top, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at left bottom, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
 mask: radial-gradient(circle at left top, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at left bottom, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat; }
#main .cx-pase-cab { display: flex; justify-content: space-between; gap: var(--space-3); max-width: none; margin: 0 0 var(--space-4); color: var(--texto-3); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
#main .cx-pase-ruta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
#main .cx-pase-ruta p { display: flex; flex-direction: column; max-width: none; margin: 0; }
#main .cx-pase-ruta small { color: var(--texto-3); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
#main .cx-pase-ruta b { color: var(--tinta); font: 600 44px/1.05 var(--font-sans); letter-spacing: -.02em; }
#main .cx-pase-ruta span { color: var(--texto-2); font-size: 13px; line-height: 18px; }
#main .cx-pase-vuelo { display: block; width: 100%; height: 24px; overflow: visible; }
#main .cx-pase-linea { fill: none; stroke: var(--linea-control); stroke-width: 2; stroke-dasharray: 4 6; }
#main .cx-pase-avion { fill: var(--azul); }
#main .cx-pase-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px dashed var(--linea-control); }
#main .cx-pase-datos dt { color: var(--texto-3); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
#main .cx-pase-datos dd { margin: 0; color: var(--tinta); font: 600 15px/22px var(--font-sans); }
#main .cx-pase-talon small { color: var(--on-azul); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
#main .cx-pase-talon b { font: 600 16px/22px var(--font-sans); }
#main .cx-pase-barras { display: block; height: 52px; margin-top: auto; background: repeating-linear-gradient(90deg, var(--on-azul) 0 2px, transparent 2px 4px, var(--on-azul) 4px 5px, transparent 5px 8px, var(--on-azul) 8px 11px, transparent 11px 13px); opacity: .9; }
@media (max-width: 860px) {
	#main :is(.cx-anatomia, .cx-pase) { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	#main .cx-anatomia-pila { max-width: 420px; margin: 0 auto; }
	#main .cx-pase-boleto { rotate: none; margin: 0; }
}
@media (max-width: 480px) {
	#main .cx-pase-boleto { grid-template-columns: minmax(0, 1fr); }
	#main .cx-pase-principal { border-radius: 16px 16px 0 0; -webkit-mask: none; mask: none; }
	#main .cx-pase-talon { border-top: 2px dashed var(--linea-control); border-left: 0; border-radius: 0 0 16px 16px; -webkit-mask: none; mask: none; }
	#main .cx-pase-barras { height: 36px; margin-top: var(--space-2); }
	#main .cx-pase-ruta b { font-size: 34px; }
	#main .cx-anatomia-capa text { font-size: 16px; }
}

/* pyUKHknr. «Recursos dedicados» de /hosting/reseller/ (sección noche) como planos (`cx-planos`): cada recurso es un
   dibujo técnico de línea sobre una cuadrícula de plano, dentro de una frontera punteada con «Tu cuenta», porque cada
   cuenta corre en su propio contenedor. Los trazos llevan `pathLength="1"` y, con movimiento, se dibujan al llegar.
   «Todo esto viene con tu plan» de /correo/ como la bandeja de una caja recién abierta (`cx-caja`): cuatro huecos
   hundidos, cada uno con su objeto, y los cuatro textos debajo, alineados con sus huecos. */
#main .cx-planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0 0; }
#main .cx-planos-dib { position: relative; margin: 0 0 var(--space-5); padding: var(--space-7) var(--space-4) var(--space-4); border: 1.5px dashed rgba(255, 255, 255, .28); border-radius: var(--radio-tarjeta); background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 16px 16px; }
#main .cx-planos-cuenta { position: absolute; top: var(--space-2); left: var(--space-3); color: var(--hero-brillo); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
#main .cx-planos-svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; overflow: visible; }
#main .cx-planos-svg :is(rect, line, circle) { fill: none; stroke: var(--hero-brillo); stroke-width: 1.5; stroke-linecap: round; }
#main .cx-planos-svg .nucleo { fill: rgba(77, 163, 255, .18); }
#main .cx-planos-item h3 { margin: 0 0 var(--space-2); font: 600 20px/26px var(--font-sans); color: var(--on-hero); }
#main .cx-planos-item p { max-width: none; margin: 0; font-size: 15px; line-height: 23px; color: rgba(255, 255, 255, .78); }
#main .cx-caja { margin: var(--space-6) 0 0; }
#main .cx-caja-bandeja { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-5); border-radius: var(--radio-destacada); background: var(--nube); box-shadow: inset 0 0 0 1px var(--linea); }
#main .cx-caja-hueco { display: grid; place-items: center; height: 170px; border-radius: var(--radio-tarjeta); background: var(--superficie); box-shadow: inset 0 3px 10px rgba(10, 30, 60, .12), inset 0 0 0 1px var(--linea); }
#main .cx-caja-dib { width: 84px; height: 84px; fill: none; stroke: var(--azul); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 8px rgba(10, 30, 60, .15)); }
#main .cx-caja-hueco.soporte { position: relative; }
#main .cx-caja-dib .lleno { fill: var(--azul); }
#main .cx-caja-burbuja { position: absolute; top: 28%; right: 22%; display: flex; gap: 4px; padding: var(--space-2) var(--space-3); border-radius: 14px 14px 14px 4px; background: var(--superficie); box-shadow: 0 6px 14px rgba(10, 30, 60, .16); }
#main .cx-caja-burbuja i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); }
#main .cx-caja-dib .cara-arriba { fill: var(--azul-suave); }
#main .cx-caja-dib .cara-izq { fill: var(--superficie); }
#main .cx-caja-dib .cara-der { fill: var(--nube); }
#main .cx-caja-dib .cinta { stroke-width: 5; stroke: var(--hero-brillo); }
#main .cx-caja-hueco.mudanza .cx-caja-dib { width: 100px; height: 100px; }
#main .cx-caja-cuenta { display: flex; flex-direction: column; gap: var(--space-2); width: 66%; padding: var(--space-3); border-radius: var(--radio-control); background: var(--noche); box-shadow: 0 8px 16px rgba(10, 30, 60, .2); }
#main .cx-caja-cuenta b { color: var(--on-hero); font: 600 13px/18px var(--font-sans); }
#main .cx-caja-barra { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-2); }
#main .cx-caja-barra small { color: rgba(255, 255, 255, .78); font: 500 10px/14px var(--font-mono); letter-spacing: .04em; }
#main .cx-caja-barra i { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .18); }
#main .cx-caja-barra i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 62%; border-radius: 3px; background: var(--hero-brillo); }
#main .cx-caja-barra + .cx-caja-barra i::before { width: 44%; }
#main .cx-caja-form { display: flex; flex-direction: column; gap: 6px; width: 66%; padding: var(--space-3); border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); box-shadow: 0 8px 16px rgba(10, 30, 60, .12); }
#main .cx-caja-form i { display: block; height: 10px; border: 1px solid var(--linea-control); border-radius: 4px; }
#main .cx-caja-form i.largo { height: 22px; }
#main .cx-caja-form b { align-self: flex-end; padding: 2px var(--space-3); border-radius: var(--radio-control); background: var(--azul); color: var(--on-azul); font: 600 11px/18px var(--font-sans); }
#main .cx-caja-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 0; padding: 0 var(--space-5); list-style: none; }
#main .cx-caja-lista li { margin: 0; }
#main .cx-caja-lista h3 { margin: 0 0 var(--space-1); font: 600 17px/24px var(--font-sans); color: var(--tinta); }
#main .cx-caja-lista p { max-width: none; margin: 0; font-size: 15px; line-height: 23px; color: var(--texto-2); }
@media (max-width: 860px) {
	#main .cx-planos { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
	#main :is(.cx-caja-bandeja, .cx-caja-lista) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#main .cx-caja-lista { row-gap: var(--space-5); padding: 0; }
}
@media (max-width: 480px) {
	#main .cx-caja-bandeja { gap: var(--space-3); padding: var(--space-3); }
	#main .cx-caja-hueco { height: 128px; }
	#main .cx-caja-dib { width: 64px; height: 64px; }
	#main .cx-caja-lista { grid-template-columns: minmax(0, 1fr); }
}

/* REd7pOdy, /afiliados/. La arquitectura (`cx-arquitectura`): la pila que recibe el referido, como una pirámide de capas
   ancha en la red y más angosta hacia el equipo, cada vez más clara, con el clúster y el cloud en una columna punteada al
   lado. Los seis textos van debajo, y al pasar por uno se ilumina su capa. La órbita (`cx-orbita`): «Tu enlace» en el
   centro, con sus radios hacia los cuatro públicos, y sus textos a los lados, los de la izquierda alineados hacia el
   centro. Los dos dibujos van ocultos al lector de pantalla: repiten los textos. */
#main .cx-arquitectura { margin: var(--space-6) 0 0; }
#main .cx-arquitectura-dib { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: var(--space-3); max-width: 880px; margin: 0 auto var(--space-7); }
#main .cx-arquitectura-pila { display: grid; gap: var(--space-2); }
#main .cx-arquitectura-capa { display: flex; justify-self: center; justify-content: center; align-items: center; min-height: 52px; padding: 0 var(--space-4); border-radius: var(--radio-control); font: 500 13px/18px var(--font-mono); letter-spacing: .04em; text-align: center; transition: box-shadow .2s; }
#main .cx-arquitectura-capa.red { width: 100%; background: var(--noche); color: var(--on-hero); }
#main .cx-arquitectura-capa.hardware { width: 92%; background: linear-gradient(90deg, var(--noche), var(--hero)); color: var(--on-hero); }
#main .cx-arquitectura-capa.stack { width: 84%; background: var(--hero); color: var(--on-hero); }
#main .cx-arquitectura-capa.panel { width: 76%; background: var(--azul-suave); color: var(--tinta); }
#main .cx-arquitectura-capa.equipo { width: 68%; border: 1px solid var(--linea-control); background: var(--superficie); color: var(--tinta); }
#main .cx-arquitectura-lado { display: flex; justify-content: center; align-items: center; border: 1.5px dashed var(--azul); border-radius: var(--radio-control); color: var(--azul); font: 500 13px/18px var(--font-mono); letter-spacing: .04em; writing-mode: vertical-rl; rotate: 180deg; transition: background .2s; }
#main .cx-arquitectura:has(.cx-arquitectura-lista li.red:hover) .cx-arquitectura-capa.red,
#main .cx-arquitectura:has(.cx-arquitectura-lista li.hardware:hover) .cx-arquitectura-capa.hardware,
#main .cx-arquitectura:has(.cx-arquitectura-lista li.equipo:hover) .cx-arquitectura-capa.equipo,
#main .cx-arquitectura:has(.cx-arquitectura-lista li.panel:hover) .cx-arquitectura-capa.panel,
#main .cx-arquitectura:has(.cx-arquitectura-lista li.stack:hover) .cx-arquitectura-capa.stack { box-shadow: 0 0 0 3px var(--hero-brillo); }
#main .cx-arquitectura:has(.cx-arquitectura-lista li.lado:hover) .cx-arquitectura-lado { background: var(--azul-suave); }
#main .cx-arquitectura-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-6); margin: 0; padding: 0; list-style: none; }
#main .cx-arquitectura-lista li { margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--linea); }
#main :is(.cx-arquitectura-lista, .cx-orbita-lista) h3 { margin: 0 0 var(--space-1); font: 600 17px/24px var(--font-sans); color: var(--tinta); }
#main :is(.cx-arquitectura-lista, .cx-orbita-lista) p { max-width: none; margin: 0; font-size: 15px; line-height: 23px; color: var(--texto-2); }
#main .cx-orbita { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px) minmax(0, 1fr); gap: var(--space-6); align-items: center; margin: var(--space-6) 0 0; }
#main .cx-orbita-lista { display: grid; gap: var(--space-7); margin: 0; padding: 0; list-style: none; }
#main .cx-orbita-lista li { margin: 0; }
#main .cx-orbita-lista.izq { text-align: right; }
#main .cx-orbita-dib { display: block; width: 100%; height: auto; overflow: visible; }
#main .cx-orbita-anillo { fill: none; stroke: var(--linea-control); stroke-width: 1.5; stroke-dasharray: 4 6; }
#main .cx-orbita-radio { stroke: var(--azul); stroke-width: 2; stroke-dasharray: 6 8; opacity: .7; }
#main .cx-orbita-nodo { fill: var(--superficie); stroke: var(--azul); stroke-width: 3; }
#main .cx-orbita-centro { fill: var(--azul); }
#main .cx-orbita-tu { fill: var(--on-azul); font: 600 15px var(--font-sans); }
#main .cx-orbita-etq { fill: var(--texto-2); font: 500 12px var(--font-mono); }
@media (max-width: 860px) {
	#main .cx-arquitectura-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#main .cx-orbita { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	#main .cx-orbita-dib { order: -1; max-width: 280px; margin: 0 auto; }
	#main .cx-orbita-lista { gap: var(--space-5); }
	#main .cx-orbita-lista.izq { text-align: left; }
}
@media (max-width: 480px) {
	#main .cx-arquitectura-dib { grid-template-columns: minmax(0, 1fr) 56px; }
	#main .cx-arquitectura-capa { min-height: 44px; padding: 0 var(--space-2); font-size: 11px; line-height: 15px; }
	#main .cx-arquitectura-lado { font-size: 11px; }
	#main .cx-arquitectura-lista { grid-template-columns: minmax(0, 1fr); }
}

/* «El día que importa» de /registrador-acreditado-co/ (U2gW2iLx) como el electrocardiograma de un dominio
   (`cx-sobresalto`): «Mientras todo funciona, la diferencia es invisible. Se vuelve visible en cinco situaciones, y
   ninguna se agenda». Un trazo plano con cinco sobresaltos numerados y, debajo, las cinco con su número. El trazo va
   oculto al lector de pantalla: repite la lista. */
#main .cx-sobresalto { margin: var(--space-6) 0 0; }
#main .cx-sobresalto-trazo { display: block; width: 100%; height: auto; margin: 0 0 var(--space-6); overflow: visible; }
#main .cx-sobresalto-linea { fill: none; stroke: var(--azul); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-sobresalto-calma { fill: var(--texto-3); font: 500 13px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
#main .cx-sobresalto-marca circle { fill: var(--azul); }
#main .cx-sobresalto-marca text { fill: var(--on-azul); font: 600 14px var(--font-mono); }
#main .cx-sobresalto-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: cx-sobresalto; }
#main .cx-sobresalto-lista li { margin: 0; padding-top: var(--space-4); border-top: 2px solid var(--azul); counter-increment: cx-sobresalto; }
#main .cx-sobresalto-lista li::before { content: counter(cx-sobresalto); display: block; margin: 0 0 var(--space-2); color: var(--azul); font: 600 13px/1 var(--font-mono); }
#main .cx-sobresalto-lista h3 { margin: 0 0 var(--space-2); font: 600 16px/22px var(--font-sans); color: var(--tinta); }
#main .cx-sobresalto-lista p { max-width: none; margin: 0; font-size: 14.5px; line-height: 22px; color: var(--texto-2); }
@media (max-width: 1024px) {
	#main .cx-sobresalto-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-6); }
}
@media (max-width: 860px) {
	#main .cx-sobresalto-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	/* A 390 px el trazo se encoge a un tercio: los números y la calma, más grandes en las unidades del dibujo. La calma,
	   así de grande, ya no cabe entre el primer sobresalto y el segundo: baja por debajo de los valles. */
	#main .cx-sobresalto-marca circle { r: 30px; }
	#main .cx-sobresalto-marca text { font-size: 28px; }
	#main .cx-sobresalto-calma { font-size: 30px; transform: translateY(30px); }
}
@media (max-width: 480px) {
	#main .cx-sobresalto-lista { grid-template-columns: minmax(0, 1fr); }
}
/* El frente del servidor (cx-frente, Ce5URlYz). «Lo que viene con el servidor» en /cloud/licencias/cpanel/,
   /cloud/licencias/plesk/ y /vps/windows/: seis bahías con su luz, su número y su rótulo de placa, las orejas del rack
   y el botón de encendido, sobre el fondo oscuro de la sección (por eso sólo tokens que no cambian con el tema). Debajo,
   los seis puntos con su número. En móvil el dibujo se queda con las luces y los números. */
#main .cx-frente { margin: 0; }
#main .cx-frente-chasis { display: block; width: 100%; height: auto; margin: 0 0 var(--space-7); overflow: visible; }
#main .cx-frente-caja { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .26); stroke-width: 2; }
#main .cx-frente-oreja { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 2; }
#main .cx-frente-tornillo { fill: none; stroke: rgba(255, 255, 255, .36); stroke-width: 2; }
#main .cx-frente-bandeja { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
#main .cx-frente-rejilla { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 4; stroke-linecap: round; }
#main .cx-frente-led { fill: var(--hero-brillo); filter: drop-shadow(0 0 5px var(--hero-brillo)); }
#main .cx-frente-num { fill: rgba(255, 255, 255, .6); font: 500 13px var(--font-mono); }
#main .cx-frente-rotulo { fill: var(--on-hero); font: 600 15px var(--font-mono); letter-spacing: .06em; }
#main .cx-frente-encendido circle, #main .cx-frente-encendido path { fill: none; stroke: var(--hero-brillo); stroke-width: 2.5; stroke-linecap: round; }
#main .cx-frente-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); margin: 0; padding: 0; list-style: none; counter-reset: cx-frente; }
#main .cx-frente-lista li { margin: 0; padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, .22); counter-increment: cx-frente; }
#main .cx-frente-lista li::before { content: "0" counter(cx-frente); display: block; margin: 0 0 var(--space-2); padding-left: 16px; background: radial-gradient(circle at 4px 50%, var(--hero-brillo) 4px, transparent 4.5px) no-repeat; color: var(--hero-brillo); font: 600 13px/16px var(--font-mono); }
#main .cx-frente-lista h3 { margin: 0 0 var(--space-2); color: var(--on-hero); font: 600 18px/24px var(--font-sans); }
#main .cx-frente-lista p { max-width: none; margin: 0; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 23px; }
@media (max-width: 860px) {
	#main .cx-frente-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	#main .cx-frente-rotulo, #main .cx-frente-rejilla { display: none; }
	#main .cx-frente-num { font-size: 30px; transform: translateY(40px); }
	#main .cx-frente-led { r: 10px; }
	#main .cx-frente-tornillo { r: 9px; }
}
@media (max-width: 480px) {
	#main .cx-frente-lista { grid-template-columns: minmax(0, 1fr); }
}

/* WHM y cPanel (cx-duo, Ce5URlYz). En /cloud/licencias/cpanel/, «Tu negocio de hosting, en dos paneles»: un WHM, «tu
   vista», con tres cuentas, su paquete y su disco, y a la derecha una pila de cPanel, uno por cliente. Las marcas 1 y 2
   van en WHM y la 3 y la 4 en el cPanel de delante; los puntos, en dos grupos con el contador seguido. */
#main .cx-duo { margin: 0; }
#main .cx-duo-escena { display: grid; grid-template-columns: minmax(0, 6fr) auto minmax(0, 5fr); align-items: center; gap: var(--space-5); margin: 0 0 var(--space-8); }
#main .cx-duo-whm, #main .cx-duo-cpanel { overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-duo-barra { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--noche); color: var(--on-hero); font: 600 15px/20px var(--font-sans); }
#main .cx-duo-cpanel .cx-duo-barra { background: var(--azul); color: var(--on-azul); }
#main .cx-duo-barra em { font: 500 12px/20px var(--font-mono); font-style: normal; color: inherit; opacity: .85; }
#main .cx-duo-cab { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-2); border-bottom: 1px solid var(--linea); color: var(--texto-3); font: 500 12px/22px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
#main .cx-duo-cuentas { margin: 0; padding: 0 var(--space-4) var(--space-2); list-style: none; }
#main .cx-duo-cuentas li { display: grid; grid-template-columns: minmax(0, 1fr) auto 30%; align-items: center; gap: var(--space-4); margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--linea); }
#main .cx-duo-cuentas li:last-child { border-bottom: 0; }
#main .cx-duo-cuentas b { overflow: hidden; color: var(--tinta); font: 600 14px/20px var(--font-mono); text-overflow: ellipsis; }
#main .cx-duo-cuentas span { padding: 2px 10px; border-radius: var(--radio-capsula); background: var(--azul-suave); color: var(--chip-texto); font: 600 12px/18px var(--font-sans); }
#main .cx-duo-cuentas i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--azul) 42%, var(--linea) 0); }
#main .cx-duo-cuentas li:nth-child(2) i { background: linear-gradient(90deg, var(--azul) 71%, var(--linea) 0); }
#main .cx-duo-cuentas li:nth-child(3) i { background: linear-gradient(90deg, var(--azul) 18%, var(--linea) 0); }
#main .cx-duo [data-n]::after { content: attr(data-n); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 12px/1 var(--font-mono); letter-spacing: 0; vertical-align: middle; }
#main .cx-duo-flecha { margin: 0; color: var(--texto-3); font: 500 12px/16px var(--font-mono); text-align: center; white-space: nowrap; }
#main .cx-duo-flecha::after { content: ""; display: block; width: 100%; min-width: 96px; height: 14px; margin-top: var(--space-2); background: linear-gradient(var(--azul), var(--azul)) 0 50% / calc(100% - 12px) 2px no-repeat, conic-gradient(from 225deg at 100% 50%, var(--azul) 90deg, transparent 0) 100% 50% / 12px 14px no-repeat; }
#main .cx-duo-clientes { position: relative; padding: 88px 0 0; }
#main .cx-duo-cpanel { position: relative; z-index: 3; }
#main .cx-duo-cpanel:nth-child(2), #main .cx-duo-cpanel:nth-child(3) { position: absolute; box-shadow: none; }
#main .cx-duo-cpanel:nth-child(2) { inset: 44px 24px 16px; z-index: 2; background: var(--nube); }
#main .cx-duo-cpanel:nth-child(3) { inset: 0 48px 32px; z-index: 1; background: var(--nube); }
#main .cx-duo-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-4); }
#main .cx-duo-apps span { padding: var(--space-3); border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--nube); color: var(--texto); font: 600 13px/22px var(--font-sans); }
#main .cx-duo-textos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); counter-reset: cx-duo; }
#main .cx-duo-rot { margin: 0 0 var(--space-4); color: var(--azul-profundo); font: 600 13px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
#main .cx-duo-lista { margin: 0; padding: 0; list-style: none; }
#main .cx-duo-lista li { position: relative; margin: 0; padding: 0 0 var(--space-5) 40px; counter-increment: cx-duo; }
#main .cx-duo-lista li::before { content: counter(cx-duo); position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 13px/1 var(--font-mono); }
#main .cx-duo-lista h3 { margin: 0 0 var(--space-1); color: var(--tinta); font: 600 17px/26px var(--font-sans); }
#main .cx-duo-lista p { max-width: none; margin: 0; color: var(--texto-2); font-size: 15px; line-height: 23px; }
@media (max-width: 860px) {
	#main .cx-duo-escena { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
	#main .cx-duo-flecha::after { width: 14px; min-width: 0; height: 40px; margin: var(--space-2) auto 0; background: linear-gradient(var(--azul), var(--azul)) 50% 0 / 2px calc(100% - 12px) no-repeat, conic-gradient(from 315deg at 50% 100%, var(--azul) 90deg, transparent 0) 50% 100% / 14px 12px no-repeat; }
}
@media (max-width: 640px) {
	#main .cx-duo-textos { grid-template-columns: minmax(0, 1fr); gap: 0; }
	#main .cx-duo-cpanel:nth-child(2) { inset: 44px 12px 16px; }
	#main .cx-duo-cpanel:nth-child(3) { inset: 0 24px 32px; }
}

/* Menos pestañas (cx-menos, Ce5URlYz). En /cloud/licencias/plesk/, «Menos pestañas abiertas…»: detrás, un navegador con
   ocho pestañas apretadas; delante, uno con una sola, «Plesk», y las ocho como casillas de su tablero. Las cuatro
   marcadas son las de los cuatro puntos. */
#main .cx-menos { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-8); align-items: center; }
#main .cx-menos-escena { position: relative; }
#main .cx-menos-antes { position: absolute; top: 0; left: 0; right: 12%; height: 62%; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--nube); }
#main .cx-menos-pestanas { display: flex; gap: 3px; padding: var(--space-2) var(--space-2) 0; background: var(--linea); }
#main .cx-menos-pestanas span { flex: 1 1 0; min-width: 0; overflow: hidden; padding: 8px 10px; border-radius: 8px 8px 0 0; background: var(--nube); color: var(--texto-2); font: 500 12px/16px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
#main .cx-menos-ahora { position: relative; margin: 64px 0 0 12%; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-menos-ahora .cx-menos-pestanas { background: var(--noche); }
#main .cx-menos-pestanas .cx-menos-una { flex: 0 0 auto; padding: 8px 28px; background: var(--superficie); color: var(--tinta); font-weight: 600; }
#main .cx-menos-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-4); }
#main .cx-menos-tablero span { padding: var(--space-4) var(--space-3); border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--nube); color: var(--texto); font: 600 13px/18px var(--font-sans); }
#main .cx-menos-tablero span[data-n] { border-color: transparent; background: var(--azul-suave); color: var(--chip-texto); }
#main .cx-menos-tablero [data-n]::after { content: attr(data-n); display: grid; place-items: center; width: 22px; height: 22px; margin-top: var(--space-2); border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 12px/1 var(--font-mono); }
#main .cx-menos-lista { margin: 0; padding: 0; list-style: none; counter-reset: cx-menos; }
#main .cx-menos-lista li { position: relative; margin: 0; padding: var(--space-3) 0 var(--space-3) 44px; counter-increment: cx-menos; }
#main .cx-menos-lista li::before { content: counter(cx-menos); position: absolute; top: var(--space-3); left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 13px/1 var(--font-mono); }
#main .cx-menos-lista h3 { margin: 0 0 2px; color: var(--tinta); font: 600 17px/24px var(--font-sans); }
#main .cx-menos-lista p { max-width: none; margin: 0; color: var(--texto-2); font-size: 15px; line-height: 22px; }
@media (max-width: 1024px) {
	#main .cx-menos { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	#main .cx-menos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-6); }
}
@media (max-width: 640px) {
	#main .cx-menos-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#main .cx-menos-ahora { margin: 48px 0 0 8%; }
	#main .cx-menos-antes { right: 6%; }
	#main .cx-menos-lista { grid-template-columns: minmax(0, 1fr); }
}

/* La oficina en remoto (cx-remoto, Ce5URlYz). En /vps/windows/, «Tu oficina en Windows…»: tres puestos conectados por
   un hilo a un escritorio remoto en Colombia, con sus tres aplicaciones, y debajo los tres snapshots. */
#main .cx-remoto-escena { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); grid-template-areas: "equipo ventana" ". fotos"; align-items: center; margin: 0 0 var(--space-8); }
#main .cx-remoto-equipo { position: relative; grid-area: equipo; display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
#main .cx-remoto-equipo li { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
#main .cx-remoto-equipo li::after { content: ""; flex: 1 1 auto; min-width: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--azul) 0 6px, transparent 6px 12px); }
#main .cx-remoto-equipo b { display: grid; flex: 0 0 auto; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--azul-suave); color: var(--chip-texto); font: 600 15px/1 var(--font-sans); }
#main .cx-remoto-equipo span { color: var(--texto); font: 600 14px/20px var(--font-sans); }
#main .cx-remoto-ventana { grid-area: ventana; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-remoto-barra { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--noche); color: var(--on-hero); font: 600 15px/22px var(--font-sans); }
#main .cx-remoto-barra em { font: 500 12px/22px var(--font-mono); font-style: normal; color: inherit; opacity: .85; }
#main .cx-remoto-escritorio { display: flex; flex-direction: column; gap: var(--space-5); min-height: 196px; padding: var(--space-5) var(--space-5) var(--space-3); background: linear-gradient(160deg, var(--azul) 0%, var(--noche) 100%); }
#main .cx-remoto-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
#main .cx-remoto-apps span { position: relative; padding: 30px var(--space-3) var(--space-4); border-radius: var(--radio-control); background: var(--superficie); box-shadow: 0 8px 24px rgba(11, 37, 64, .3); color: var(--texto); font: 600 13px/18px var(--font-sans); }
#main .cx-remoto-apps span::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 18px; border-bottom: 1px solid var(--linea); border-radius: var(--radio-control) var(--radio-control) 0 0; background: var(--nube); }
#main .cx-remoto-tareas { display: block; height: 30px; margin-top: auto; border-radius: var(--radio-control); background: rgba(255, 255, 255, .16); }
#main .cx-remoto-fotos { position: relative; grid-area: fotos; display: flex; gap: var(--space-3); margin-top: var(--space-4); }
#main .cx-remoto-fotos span { flex: 1 1 0; padding: var(--space-2) var(--space-3); border: 1px dashed var(--linea-control); border-radius: var(--radio-control); color: var(--texto-3); font: 500 12px/16px var(--font-mono); text-align: center; }
#main .cx-remoto [data-n]::after { content: attr(data-n); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 12px/1 var(--font-mono); vertical-align: middle; }
#main .cx-remoto-barra [data-n]::after { background: var(--hero-brillo); color: var(--noche); }
#main .cx-remoto-equipo[data-n]::after, #main .cx-remoto-fotos[data-n]::after { position: absolute; top: -11px; left: -11px; margin: 0; }
#main .cx-remoto-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin: 0; padding: 0; list-style: none; counter-reset: cx-remoto; }
#main .cx-remoto-lista li { margin: 0; counter-increment: cx-remoto; }
#main .cx-remoto-lista li::before { content: counter(cx-remoto); display: grid; place-items: center; width: 26px; height: 26px; margin: 0 0 var(--space-3); border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 13px/1 var(--font-mono); }
#main .cx-remoto-lista h3 { margin: 0 0 var(--space-2); color: var(--tinta); font: 600 17px/24px var(--font-sans); }
#main .cx-remoto-lista p { max-width: none; margin: 0; color: var(--texto-2); font-size: 15px; line-height: 23px; }
@media (max-width: 1024px) {
	#main .cx-remoto-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
}
@media (max-width: 860px) {
	#main .cx-remoto-escena { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ventana" "equipo" "fotos"; }
	#main .cx-remoto-equipo { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
	#main .cx-remoto-equipo li { flex-direction: column; gap: var(--space-1); }
	#main .cx-remoto-equipo li::after { display: none; }
}
@media (max-width: 480px) {
	#main .cx-remoto-lista { grid-template-columns: minmax(0, 1fr); }
	#main .cx-remoto-apps { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
	#main .cx-remoto-apps span { padding-top: 24px; }
	#main .cx-remoto-barra { flex-direction: column; gap: 0; }
	#main .cx-remoto-barra span { white-space: nowrap; }
}
/* El manifiesto de tu servidor (cx-manifiesto, pXqLnEj5). En /servidor-de-aplicaciones/, «Por qué correrlas en
   Colombia»: las cinco razones como un archivo de configuración en la consola del sistema, con su número de línea y una
   marca por razón, y al lado los cinco textos numerados con las mismas marcas. En tableta se apilan; en móvil el
   archivo suelta los comentarios que siguen a un valor. */
#main .cx-manifiesto { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--space-8); align-items: center; margin: var(--space-7) 0 0; }
#main .cx-manifiesto-archivo { overflow: hidden; border-radius: var(--radio-tarjeta); background: var(--terminal); box-shadow: var(--sombra-flotante); }
#main .cx-manifiesto-barra { display: flex; align-items: center; gap: 6px; margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--terminal-texto); font: 500 13px/20px var(--font-mono); }
#main .cx-manifiesto-barra i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
#main .cx-manifiesto-barra span { margin-left: var(--space-3); }
#main .cx-manifiesto-lineas { margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) 0; list-style: none; counter-reset: cx-manifiesto-linea; color: var(--terminal-texto); font: 500 14px/30px var(--font-mono); }
#main .cx-manifiesto-lineas li { position: relative; margin: 0; padding-left: 52px; white-space: nowrap; counter-increment: cx-manifiesto-linea; }
#main .cx-manifiesto-lineas li::before { content: counter(cx-manifiesto-linea); position: absolute; left: 0; width: 34px; color: var(--terminal-texto); opacity: .6; text-align: right; }
#main .cx-manifiesto-lineas .cx-manifiesto-sangria { padding-left: calc(52px + 2ch); }
#main .cx-manifiesto-lineas::after { content: ""; display: block; width: 9px; height: 18px; margin: var(--space-1) 0 0 52px; background: var(--terminal-acento); }
#main .cx-manifiesto-clave { color: var(--terminal-acento); }
#main .cx-manifiesto-valor { color: var(--on-hero); }
#main .cx-manifiesto-com { color: var(--terminal-texto); opacity: .66; }
#main .cx-manifiesto-lineas [data-n]::after { content: attr(data-n); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 10px; border-radius: 50%; background: var(--terminal-acento); color: var(--terminal); font: 600 11px/1 var(--font-mono); vertical-align: 1px; }
#main .cx-manifiesto-lista { margin: 0; padding: 0; list-style: none; counter-reset: cx-manifiesto; }
#main .cx-manifiesto-lista li { position: relative; margin: 0; padding: 0 0 var(--space-5) 44px; counter-increment: cx-manifiesto; }
#main .cx-manifiesto-lista li:last-child { padding-bottom: 0; }
#main .cx-manifiesto-lista li::before { content: counter(cx-manifiesto); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: var(--on-azul); font: 600 13px/1 var(--font-mono); }
#main .cx-manifiesto-lista h3 { margin: 0 0 var(--space-1); color: var(--tinta); font: 600 17px/28px var(--font-sans); }
#main .cx-manifiesto-lista p { max-width: none; margin: 0; color: var(--texto-2); font-size: 15px; line-height: 23px; }
@media (max-width: 1100px) {
	#main .cx-manifiesto { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
	#main .cx-manifiesto-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
	#main .cx-manifiesto-lista li { padding-bottom: 0; }
}
@media (max-width: 640px) {
	#main .cx-manifiesto-valor + .cx-manifiesto-com { display: none; }
	#main .cx-manifiesto-lineas { font-size: 12px; line-height: 26px; }
	#main .cx-manifiesto-lineas li { padding-left: 40px; }
	#main .cx-manifiesto-lineas li::before { width: 26px; }
	#main .cx-manifiesto-lineas .cx-manifiesto-sangria { padding-left: calc(40px + 2ch); }
	#main .cx-manifiesto-lineas::after { margin-left: 40px; }
	#main .cx-manifiesto-lista { grid-template-columns: minmax(0, 1fr); }
}

/* El certificado (cx-certificado, pXqLnEj5). En /certificados-ssl/, después del aviso: lo que el aviso dice, dibujado.
   Una hoja con doble filete y su sello, los campos del certificado con el uso marcado y, tachado, lo que ya no trae; al
   lado, las tres fechas del aviso en una línea de tiempo. */
#main .cx-certificado { margin: var(--space-6) 0 var(--space-2); }
#main .cx-certificado-dib { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); align-items: center; }
#main .cx-certificado-hoja { position: relative; padding: var(--space-6) var(--space-6) var(--space-5); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta); background: var(--superficie); box-shadow: var(--sombra-flotante); outline: 1px solid var(--linea); outline-offset: -10px; }
#main .cx-certificado-sello { position: absolute; top: var(--space-5); right: var(--space-5); width: 64px; height: 64px; }
#main .cx-certificado-roseta { fill: var(--azul-suave); stroke: var(--azul); stroke-width: 1.5; stroke-linejoin: round; }
#main .cx-certificado-disco { fill: var(--azul); }
#main .cx-certificado-candado { fill: none; stroke: var(--on-azul); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-certificado-tipo { margin: 0 80px var(--space-5) 0; color: var(--azul-profundo); font: 600 13px/20px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
#main .cx-certificado-campos { margin: 0; }
#main .cx-certificado-campos div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px dashed var(--linea); }
#main .cx-certificado-campos dt { color: var(--texto-3); font: 500 13px/22px var(--font-mono); }
#main .cx-certificado-campos dd { margin: 0; color: var(--tinta); font: 600 15px/22px var(--font-sans); }
#main .cx-certificado-campos .cx-certificado-uso { grid-template-columns: calc(9.5em - var(--space-3) - 2px) minmax(0, 1fr); margin: var(--space-2) 0 0; padding: var(--space-3); border: 2px solid var(--azul); border-radius: var(--radio-control); background: var(--azul-suave); }
#main .cx-certificado-uso dd::after { content: " ✓"; color: var(--azul-profundo); }
#main .cx-certificado-no { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-4) 0 0; color: var(--texto-3); font: 500 13px/20px var(--font-mono); }
#main .cx-certificado-no s { text-decoration-thickness: 1.5px; }
#main .cx-certificado-no s::before { content: "✗ "; display: inline-block; white-space: pre; }
#main .cx-certificado-fechas { position: relative; margin: 0; padding: 0 0 0 var(--space-6); list-style: none; }
#main .cx-certificado-fechas::before { content: ""; position: absolute; top: 10px; bottom: 30px; left: 7px; width: 2px; background: var(--linea); }
#main .cx-certificado-fechas li { position: relative; margin: 0; padding: 0 0 var(--space-5); }
#main .cx-certificado-fechas li:last-child { padding-bottom: 0; }
#main .cx-certificado-fechas li::before { content: ""; position: absolute; top: 4px; left: calc(1px - var(--space-6)); width: 14px; height: 14px; border: 2px solid var(--azul); border-radius: 50%; background: var(--superficie); }
#main .cx-certificado-fechas li:last-child::before { background: var(--azul); }
#main .cx-certificado-fechas b { display: block; color: var(--azul-profundo); font: 600 13px/22px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
#main .cx-certificado-fechas span { display: block; color: var(--texto-2); font-size: 15px; line-height: 23px; }
@media (max-width: 860px) {
	#main .cx-certificado-dib { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 480px) {
	#main .cx-certificado-hoja { padding: var(--space-5) var(--space-4) var(--space-4); }
	#main .cx-certificado-sello { top: var(--space-4); right: var(--space-4); width: 48px; height: 48px; }
	#main .cx-certificado-tipo { margin-right: 60px; }
	#main .cx-certificado-campos div { grid-template-columns: minmax(0, 1fr); gap: 0; }
	#main .cx-certificado-campos .cx-certificado-uso { grid-template-columns: minmax(0, 1fr); }
}

/* 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: 1px solid var(--linea); 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); }
}

/* Siete capas entre tu sitio y los ataques (cx-capas, BabsPTyp). En /hosting/, entre el cPanel y los respaldos:
   - los ataques, en pestañas de `cx-pestanas` (`cx-capas-ataques`), con el recorrido automático;
   - el camino (`cx-capas-camino`, ilustrativo): Internet, las siete capas y tu sitio, en nueve paradas. Hay un paquete
     por ataque (`cx-capas-a-*`, con su capa en `--cx-capa`), y sólo se ve el del ataque elegido, en la pared de la capa
     que lo frena. Esa capa se ilumina y dice «Aquí se frena»;
   - el caso de cada ataque (`cx-capas-caso`): quién lo frena, cómo y el dato medido.
   Sin guion no hay pestañas, ni paquete, ni capa iluminada: los siete casos van uno tras otro. Con guion, los casos
   comparten celda y el oculto ocupa su sitio sin verse, para que el recorrido no mueva lo de abajo. La etiqueta de la
   capa flota bajo ella sin ocupar alto; en tableta y móvil no cabe y se oculta. En móvil el camino es una fila de
   iconos: el nombre de la capa lo dice el caso. /wordpress/ la lleva en una sección nube (B5IccScD): ahí el camino va
   en blanco, para que no se pierda. */
#main .cx-capas { margin: var(--space-6) 0 0; }
#main .cx-capas.cx-pestanas-listo { display: grid; grid-template-columns: minmax(0, 1fr); }
#main .cx-capas.cx-pestanas-listo .cx-capas-caso { grid-area: 3 / 1; }
#main .cx-capas.cx-pestanas-listo .cx-capas-caso[hidden] { display: grid; visibility: hidden; }
#main .cx-capas-ataques { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0 0 var(--space-5); }
#main .cx-capas-ataques [role="tab"] { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border: 1px solid var(--linea-control); border-radius: var(--radio-capsula); background: var(--superficie); font: 500 14px/20px var(--font-sans); white-space: nowrap; color: var(--texto-2); cursor: pointer; transition: border-color .15s, background-color .15s; }
#main .cx-capas-ataques [role="tab"] svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-capas-ataques [role="tab"]:hover { border-color: var(--error-fuerte); }
#main .cx-capas-ataques [role="tab"][aria-selected="true"] { border-color: var(--error-fuerte); background: var(--error-suave); font-weight: 600; color: var(--tinta); box-shadow: inset 0 -2px 0 var(--error-fuerte); }
#main .cx-capas-ataques [role="tab"][aria-selected="true"] svg { color: var(--error-fuerte); }
#main .cx-capas-ataques [role="tab"]:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
#main .cx-capas-camino { position: relative; margin: 0 0 var(--space-5); padding: var(--space-5) var(--space-4) calc(var(--space-4) + 28px); border: 1px solid var(--linea); border-radius: var(--radio-destacada); background: var(--nube); }
#main .cx-sec-nube .cx-capas-camino { background: var(--superficie); }
#main .cx-capas-camino ol { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
#main .cx-capas-camino ol::before { content: ""; position: absolute; top: 21px; left: calc(100% / 18); right: calc(100% / 18); height: 2px; background: repeating-linear-gradient(90deg, var(--linea-control) 0 6px, transparent 6px 12px); }
#main .cx-capas-camino li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 0 2px; text-align: center; }
#main .cx-capas-camino li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 6px; border: 1px solid var(--linea); border-radius: 50%; background: var(--superficie); color: var(--azul); transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
#main .cx-capas-camino svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-capas-camino li b { font: 600 13px/16px var(--font-sans); color: var(--tinta); }
#main .cx-capas-camino li small { font: 500 11px/14px var(--font-mono); color: var(--texto-3); }
#main .cx-capas-c-internet > span { color: var(--texto-2); }
#main .cx-capas-c-sitio > span { border-color: var(--acierto); background: var(--acierto-suave); color: var(--acierto); }
#main .cx-capas-ataque { --cx-capa: 1; position: absolute; z-index: 2; top: calc(var(--space-5) + 15px); left: calc(var(--space-4) + (100% - 2 * var(--space-4)) * (var(--cx-capa) + .5) / 9 - 29px); display: none; width: 14px; height: 14px; border-radius: 50%; background: var(--error-fuerte); box-shadow: 0 0 0 4px var(--error-suave); }
#main .cx-capas-a-claves { --cx-capa: 1; }
#main .cx-capas-a-avalancha { --cx-capa: 2; }
#main .cx-capas-a-inyeccion { --cx-capa: 3; }
#main .cx-capas-a-script { --cx-capa: 4; }
#main .cx-capas-a-archivo { --cx-capa: 5; }
#main .cx-capas-a-vecino { --cx-capa: 6; }
#main .cx-capas-a-borrado { --cx-capa: 7; }
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-claves[aria-selected="true"]) .cx-capas-a-claves,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-avalancha[aria-selected="true"]) .cx-capas-a-avalancha,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-inyeccion[aria-selected="true"]) .cx-capas-a-inyeccion,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-script[aria-selected="true"]) .cx-capas-a-script,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-archivo[aria-selected="true"]) .cx-capas-a-archivo,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-vecino[aria-selected="true"]) .cx-capas-a-vecino,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-borrado[aria-selected="true"]) .cx-capas-a-borrado { display: block; }
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-claves[aria-selected="true"]) .cx-capas-c-firewall > span,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-avalancha[aria-selected="true"]) .cx-capas-c-webshield > span,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-inyeccion[aria-selected="true"]) .cx-capas-c-modsecurity > span,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-script[aria-selected="true"]) .cx-capas-c-proactive > span,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-archivo[aria-selected="true"]) .cx-capas-c-antimalware > span,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-vecino[aria-selected="true"]) .cx-capas-c-cagefs > span,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-borrado[aria-selected="true"]) .cx-capas-c-jetbackup > span { border-color: var(--azul); background: var(--azul); color: var(--on-azul); box-shadow: 0 0 0 6px var(--azul-suave); }
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-claves[aria-selected="true"]) .cx-capas-c-firewall::after,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-avalancha[aria-selected="true"]) .cx-capas-c-webshield::after,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-inyeccion[aria-selected="true"]) .cx-capas-c-modsecurity::after,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-script[aria-selected="true"]) .cx-capas-c-proactive::after,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-archivo[aria-selected="true"]) .cx-capas-c-antimalware::after,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-vecino[aria-selected="true"]) .cx-capas-c-cagefs::after,
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-borrado[aria-selected="true"]) .cx-capas-c-jetbackup::after { content: "Aquí se frena"; position: absolute; top: 100%; left: 0; right: 0; width: max-content; margin: 6px auto 0; padding: 2px 8px; border-radius: var(--radio-capsula); background: var(--azul); font: 600 11px/16px var(--font-sans); white-space: nowrap; color: var(--on-azul); }
#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-borrado[aria-selected="true"]) .cx-capas-c-jetbackup::after { content: "Aquí se recupera"; }
#main .cx-capas-caso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: var(--space-6); align-items: start; padding: var(--space-5) var(--space-6); border: 1px solid var(--linea); border-left: 4px solid var(--azul); border-radius: var(--radio-tarjeta); background: var(--superficie); }
#main .cx-capas:not(.cx-pestanas-listo) .cx-capas-caso + .cx-capas-caso { margin-top: var(--space-3); }
#main .cx-capas-caso h3 { grid-row: span 2; margin: 0; font: 600 24px/30px var(--font-sans); letter-spacing: -.01em; color: var(--tinta); }
#main .cx-capas-caso h3 small { display: block; margin: 0 0 4px; font: 500 12px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
#main .cx-capas-caso p { margin: 0 0 var(--space-3); font-size: 16px; line-height: 24px; color: var(--texto-2); }
#main .cx-capas-caso .cx-capas-dato { justify-self: start; margin: 0; padding: 4px 12px; border-radius: var(--radio-capsula); background: var(--acierto-suave); font: 500 13px/18px var(--font-mono); color: var(--acierto); }
#main .cx-capas-dato::before { content: "✓ "; }
#main .cx-capas figcaption { margin: var(--space-4) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-3); }
@media (max-width: 1024px) {
	#main .cx-capas-caso { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
	#main .cx-capas-caso h3 { grid-row: auto; }
	#main .cx-capas-camino li b { font-size: 12px; line-height: 15px; }
	#main .cx-capas-camino { padding-bottom: var(--space-4); }
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-claves[aria-selected="true"]) .cx-capas-c-firewall::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-avalancha[aria-selected="true"]) .cx-capas-c-webshield::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-inyeccion[aria-selected="true"]) .cx-capas-c-modsecurity::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-script[aria-selected="true"]) .cx-capas-c-proactive::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-archivo[aria-selected="true"]) .cx-capas-c-antimalware::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-vecino[aria-selected="true"]) .cx-capas-c-cagefs::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-borrado[aria-selected="true"]) .cx-capas-c-jetbackup::after { display: none; }
}
@media (max-width: 640px) {
	#main .cx-capas-ataques { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	#main .cx-capas-camino { padding: var(--space-4) var(--space-2); }
	#main .cx-capas-camino ol::before { top: 14px; }
	#main .cx-capas-camino li { padding: 0; }
	#main .cx-capas-camino li > span { width: 30px; height: 30px; margin: 0; }
	#main .cx-capas-camino svg { width: 16px; height: 16px; }
	#main .cx-capas-camino li :is(b, small) { display: none; }
	#main .cx-capas-ataque { top: calc(var(--space-4) + 10px); left: calc(var(--space-2) + (100% - 2 * var(--space-2)) * (var(--cx-capa) + .5) / 9 - 20px); width: 10px; height: 10px; box-shadow: 0 0 0 3px var(--error-suave); }
	#main .cx-capas-caso { padding: var(--space-4); }
	#main .cx-capas-caso h3 { font-size: 20px; line-height: 26px; }
	#main .cx-capas-caso .cx-capas-dato { border-radius: var(--radio-control); }
}

/* Tu web en tres pasos (cx-gen, TAykOGRR). En /creador-de-paginas-web-con-ia/, el asistente del generador con IA de
   Sitejet, dibujado con sus mismos pasos y preguntas:
   - a la izquierda, en noche como el generador real (`cx-gen-asistente`), el riel de pasos (`cx-gen-riel`: pestañas
     verticales de `cx-pestanas`, con recorrido) y la tarjeta de cada paso (`cx-gen-paso`), con su respuesta;
   - a la derecha, la web de ejemplo (`cx-gen-web`), que se arma a cada paso: el nombre (`cx-gen-n`) llega en el 2, los
     textos (`cx-gen-d`) en el 3 y lo último (`cx-gen-f`) en «Tu web». Lo que aún no llega es un esqueleto del mismo
     tamaño (texto transparente sobre nube), así que nada salta. Los pasos hechos llevan palomita.
   Sin guion se ve la web entera y los pasos uno tras otro. Con guion, los pasos comparten celda. */
#main .cx-gen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: stretch; margin: var(--space-6) 0 0; }
#main .cx-gen figcaption { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 20px; color: var(--texto-3); }
#main .cx-gen-asistente { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--space-5); padding: var(--space-5); border-radius: var(--radio-destacada); background: var(--noche); color: var(--on-hero); }
#main .cx-gen:not(.cx-pestanas-listo) .cx-gen-asistente { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
#main .cx-gen-marca { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-6); font: 600 12px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
#main .cx-gen-marca b { padding: 2px 7px; border-radius: 6px; background: var(--hero-brillo); font: 700 13px/16px var(--font-sans); letter-spacing: 0; color: var(--noche); }
#main .cx-gen-riel { position: relative; display: flex; flex-direction: column; gap: var(--space-6); align-self: center; }
#main .cx-gen-riel::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 13px; width: 2px; background: rgba(255, 255, 255, .2); }
#main .cx-gen-riel [role="tab"] { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: transparent; font: 500 14px/20px var(--font-sans); text-align: left; color: rgba(255, 255, 255, .78); cursor: pointer; }
#main .cx-gen-riel [role="tab"] i { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .4); border-radius: 50%; background: var(--noche); font: 700 12px/1 var(--font-sans); font-style: normal; color: rgba(255, 255, 255, .85); }
#main .cx-gen-riel [role="tab"]:hover { color: var(--on-hero); }
#main .cx-gen-riel [role="tab"][aria-selected="true"] { font-weight: 700; color: var(--on-hero); }
#main .cx-gen-riel [role="tab"][aria-selected="true"] i { border-color: var(--hero-brillo); background: var(--hero-brillo); color: var(--noche); box-shadow: 0 0 0 5px rgba(77, 163, 255, .25); }
#main .cx-gen-riel [role="tab"]:focus-visible { outline: 2px solid var(--hero-brillo); outline-offset: 4px; border-radius: 6px; }
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-nombre[aria-selected="true"]) #cx-gen-t-sector i,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-descripcion[aria-selected="true"]) #cx-gen-t-sector i,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-descripcion[aria-selected="true"]) #cx-gen-t-nombre i,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-web[aria-selected="true"]) #cx-gen-t-sector i,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-web[aria-selected="true"]) #cx-gen-t-nombre i,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-web[aria-selected="true"]) #cx-gen-t-descripcion i { border-color: var(--hero-brillo); color: transparent; }
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-nombre[aria-selected="true"]) #cx-gen-t-sector i::after,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-descripcion[aria-selected="true"]) #cx-gen-t-sector i::after,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-descripcion[aria-selected="true"]) #cx-gen-t-nombre i::after,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-web[aria-selected="true"]) #cx-gen-t-sector i::after,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-web[aria-selected="true"]) #cx-gen-t-nombre i::after,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-web[aria-selected="true"]) #cx-gen-t-descripcion i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--hero-brillo); }
#main .cx-gen.cx-pestanas-listo .cx-gen-paso { grid-area: 2 / 2; align-self: center; }
#main .cx-gen.cx-pestanas-listo .cx-gen-paso[hidden] { display: block; visibility: hidden; }
#main .cx-gen-tarjeta { position: relative; margin: 20px 0 0; padding: 34px var(--space-5) var(--space-5); border-radius: var(--radio-tarjeta); background: var(--superficie); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); text-align: center; color: var(--tinta); }
#main .cx-gen-ico { position: absolute; top: -20px; left: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; border-radius: 10px; background: var(--azul); color: var(--on-azul); }
#main .cx-gen svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-gen-ico svg { width: 20px; height: 20px; }
#main .cx-gen-tarjeta h3 { margin: 0 0 var(--space-4); font: 600 17px/24px var(--font-sans); color: var(--tinta); }
#main .cx-gen-campo { margin: 0 0 var(--space-4); padding: 9px 12px; border: 1.5px solid var(--azul); border-radius: var(--radio-control); background: var(--superficie); font: 400 15px/22px var(--font-sans); text-align: left; color: var(--tinta); }
#main .cx-gen-campo span { position: relative; display: block; overflow: hidden; }
#main .cx-gen-listo { margin: 0 0 var(--space-4); font-size: 15px; line-height: 22px; color: var(--texto-2); }
#main .cx-gen-botones { display: flex; gap: var(--space-2); margin: 0; }
#main .cx-gen-botones i { flex: 1 1 0; padding: 8px 12px; border-radius: var(--radio-capsula); background: var(--nube); font: 600 14px/20px var(--font-sans); font-style: normal; color: var(--texto-2); }
#main .cx-gen-botones i:last-child { background: var(--azul); color: var(--on-azul); }
#main .cx-gen-nota { margin: var(--space-4) 0 0; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .82); }
#main .cx-gen-web { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-destacada); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-gen-web-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-gen-web-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--linea-control); opacity: .5; }
#main .cx-gen-web-barra span { margin-left: var(--space-3); padding: 3px 12px; border-radius: var(--radio-capsula); background: var(--superficie); font: 500 12px/18px var(--font-mono); color: var(--texto-3); }
#main .cx-gen-sitio { display: flex; flex: 1 1 auto; flex-direction: column; gap: 14px; padding: 0 0 var(--space-4); }
#main .cx-gen-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 12px var(--space-4); border-bottom: 3px solid var(--ambar); }
#main .cx-gen-nav b { font: 700 16px/22px var(--font-sans); color: var(--tinta); }
#main .cx-gen-nav span { font: 500 12px/18px var(--font-sans); white-space: nowrap; color: var(--texto-2); }
#main .cx-gen-hero { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--space-4); align-items: center; margin: 0 var(--space-4); padding: var(--space-5); border-radius: 12px; background: var(--ambar-suave); }
#main .cx-gen-hero > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#main .cx-gen-titular { margin: 0; font: 700 24px/29px var(--font-sans); letter-spacing: -.015em; color: var(--tinta); }
#main .cx-gen-bajada { margin: 0; font-size: 14px; line-height: 20px; color: var(--texto-2); }
#main .cx-gen-cta { margin: 4px 0 0; padding: 6px 14px; border-radius: var(--radio-capsula); background: var(--tinta); font: 600 13px/18px var(--font-sans); color: var(--fondo); }
#main .cx-gen-foto { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--superficie); color: var(--ambar); }
#main .cx-gen-foto svg { width: 52px; height: 52px; stroke-width: 1.4; }
#main .cx-gen-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 var(--space-4); padding: 0; list-style: none; }
#main .cx-gen-tarjetas li { margin: 0; padding: 12px; border: 1px solid var(--linea); border-top: 3px solid var(--ambar); border-radius: 8px; font: 600 13px/18px var(--font-sans); color: var(--tinta); }
#main .cx-gen-pie { margin: auto var(--space-4) 0; padding: 10px 0 0; border-top: 1px solid var(--linea); font-size: 12px; line-height: 18px; color: var(--texto-3); }
#main .cx-gen-sello { position: absolute; right: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: var(--radio-capsula); background: var(--azul); font: 600 12px/16px var(--font-sans); color: var(--on-azul); box-shadow: 0 8px 20px rgba(0, 112, 201, .3); }
#main .cx-gen-sello svg { width: 14px; height: 14px; }
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-sector[aria-selected="true"]) :is(.cx-gen-n, .cx-gen-d, .cx-gen-f),
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-nombre[aria-selected="true"]) :is(.cx-gen-d, .cx-gen-f),
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-descripcion[aria-selected="true"]) .cx-gen-f { border-color: transparent; border-radius: 6px; background: var(--nube); color: transparent; box-shadow: none; transition-delay: 0s; }
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-sector[aria-selected="true"]) .cx-gen-sello,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-nombre[aria-selected="true"]) .cx-gen-sello,
#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-descripcion[aria-selected="true"]) .cx-gen-sello { opacity: 0; }
@media (max-width: 1024px) {
	#main .cx-gen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	#main .cx-gen-asistente { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
	#main .cx-gen-marca { margin-bottom: var(--space-4); }
	#main .cx-gen-riel { flex-direction: row; justify-content: space-between; gap: 4px; margin: 0 0 var(--space-5); }
	#main .cx-gen-riel::before { top: 13px; bottom: auto; left: 24px; right: 24px; width: auto; height: 2px; }
	#main .cx-gen-riel [role="tab"] { flex: 1 1 0; flex-direction: column; gap: 4px; font-size: 12px; line-height: 16px; text-align: center; }
	#main .cx-gen.cx-pestanas-listo .cx-gen-paso { grid-area: 3 / 1; }
	#main .cx-gen-tarjeta { padding: 30px var(--space-4) var(--space-4); }
	#main .cx-gen-nav span { display: none; }
	#main .cx-gen-hero { grid-template-columns: minmax(0, 1fr) 60px; padding: var(--space-4); }
	#main .cx-gen-titular { font-size: 20px; line-height: 24px; }
	#main .cx-gen-foto { width: 60px; height: 60px; }
	#main .cx-gen-foto svg { width: 34px; height: 34px; }
	#main .cx-gen-tarjetas li { padding: 8px; font-size: 12px; line-height: 16px; }
	#main .cx-gen-pie { padding-right: 140px; }
}

/* Tu WHM, por dentro (cx-whm, u4tcdBMC). En /hosting/reseller/, «Cuenta principal»: un WHM de muestra con su barra
   (noche, como el real), su menú (`cx-whm-menu`, pestañas de `cx-pestanas`, con recorrido) y cuatro vistas que comparten
   celda (el oculto ocupa su sitio sin verse, así que el recorrido no mueve lo de abajo):
   - tus clientes (`cx-whm-cuentas`): dominio, paquete, uso de disco, estado y acciones. La suspendida cambia de color y
     de forma;
   - crear cuenta (`cx-whm-campos`) y su resultado (`cx-whm-hecho`);
   - paquetes (`cx-whm-paquetes`) y límites (`cx-whm-limites`).
   El uso es un `<meter>`: el valor es un dato del marcado, no estilo. Azul, y ámbar si pasa de su `high`. */
#main .cx-whm { margin: var(--space-6) 0 0; overflow: hidden; border: 1px solid var(--linea); border-radius: var(--radio-destacada); background: var(--superficie); box-shadow: var(--sombra-flotante); }
#main .cx-whm.cx-pestanas-listo { display: grid; grid-template-columns: minmax(0, 1fr); }
#main .cx-whm.cx-pestanas-listo .cx-whm-vista { grid-area: 3 / 1; }
#main .cx-whm.cx-pestanas-listo .cx-whm-vista[hidden] { display: block; visibility: hidden; }
#main .cx-whm-barra { display: flex; align-items: center; gap: var(--space-4); margin: 0; padding: 12px var(--space-5); background: var(--noche); color: var(--on-hero); }
#main .cx-whm-barra b { font: 700 18px/24px var(--font-sans); letter-spacing: .02em; color: var(--on-hero); }
#main .cx-whm-barra span { font: 500 13px/18px var(--font-mono); color: rgba(255, 255, 255, .82); }
#main .cx-whm-barra i { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: var(--hero-brillo); font: 700 12px/1 var(--font-sans); font-style: normal; color: var(--noche); }
#main .cx-whm-menu { display: flex; gap: 2px; margin: 0; padding: 0 var(--space-4); overflow-x: auto; border-bottom: 1px solid var(--linea); background: var(--nube); scrollbar-width: none; }
#main .cx-whm-menu [role="tab"] { display: inline-flex; flex: none; align-items: center; gap: 8px; margin: 0; padding: 12px 14px 9px; border: 0; border-bottom: 3px solid transparent; background: transparent; font: 500 14px/20px var(--font-sans); white-space: nowrap; color: var(--texto-2); cursor: pointer; }
#main .cx-whm-menu [role="tab"]:hover { color: var(--tinta); }
#main .cx-whm-menu [role="tab"][aria-selected="true"] { border-bottom-color: var(--azul); font-weight: 600; color: var(--tinta); }
#main .cx-whm-menu [role="tab"]:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
#main .cx-whm svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#main .cx-whm-menu svg { width: 18px; height: 18px; }
#main .cx-whm-vista { padding: var(--space-5); }
#main .cx-whm-nota { margin: var(--space-4) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-3); }
#main .cx-whm meter { display: block; width: 100%; height: 6px; margin: 0; border: 0; border-radius: 3px; background: var(--nube); -webkit-appearance: none; appearance: none; }
#main .cx-whm meter::-webkit-meter-bar { height: 100%; border: 0; border-radius: 3px; background: var(--nube); }
#main .cx-whm meter::-webkit-meter-optimum-value { border-radius: 3px; background: var(--azul); }
#main .cx-whm meter::-webkit-meter-suboptimum-value { border-radius: 3px; background: var(--ambar); }
#main .cx-whm meter::-moz-meter-bar { border-radius: 3px; background: var(--azul); }
#main .cx-whm meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--ambar); }
#main .cx-whm-cuentas, #main .cx-whm-paquetes, #main .cx-whm-limites { margin: 0; padding: 0; list-style: none; }
#main .cx-whm-cuentas { display: grid; gap: 8px; }
#main .cx-whm-cuentas li { display: grid; grid-template-columns: minmax(0, 1.4fr) 90px minmax(0, 1.1fr) 110px auto; gap: var(--space-4); align-items: center; margin: 0; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-control); background: var(--superficie); font-size: 14px; line-height: 20px; color: var(--texto-2); }
#main .cx-whm-dom { overflow: hidden; font: 600 14px/20px var(--font-mono); white-space: nowrap; text-overflow: ellipsis; color: var(--tinta); }
#main .cx-whm-pkg { justify-self: start; padding: 2px 10px; border-radius: var(--radio-capsula); background: var(--azul-suave); font: 500 12px/18px var(--font-sans); color: var(--chip-texto); }
#main .cx-whm-uso { display: grid; gap: 4px; font-size: 12px; line-height: 16px; }
#main .cx-whm-estado { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font: 600 13px/18px var(--font-sans); color: var(--acierto); }
#main .cx-whm-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#main .cx-whm-suspendida { background: var(--nube); }
#main .cx-whm-suspendida .cx-whm-estado { color: var(--aviso); }
#main .cx-whm-suspendida .cx-whm-estado::before { border-radius: 2px; }
#main .cx-whm-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
#main .cx-whm-acciones i { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--linea-control); border-radius: var(--radio-capsula); font: 500 12px/16px var(--font-sans); font-style: normal; white-space: nowrap; color: var(--texto-2); }
#main .cx-whm-acciones i:first-child { border-color: var(--azul); color: var(--azul); }
#main .cx-whm-acciones svg { width: 14px; height: 14px; }
#main .cx-whm-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); max-width: 680px; margin: 0; }
#main .cx-whm-campos div { min-width: 0; margin: 0; }
#main .cx-whm-campos dt { margin: 0 0 4px; font: 500 12px/16px var(--font-sans); color: var(--texto-3); }
#main .cx-whm-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); white-space: nowrap; text-overflow: ellipsis; color: var(--tinta); }
#main .cx-whm-boton { margin: var(--space-4) 0 0; }
#main .cx-whm-boton i { display: inline-block; padding: 8px 18px; border-radius: var(--radio-capsula); background: var(--verde); font: 600 14px/20px var(--font-sans); font-style: normal; color: var(--on-verde); }
#main .cx-whm-hecho { max-width: 680px; margin: var(--space-4) 0 0; padding: 10px 14px; border-radius: var(--radio-control); background: var(--acierto-suave); font: 500 14px/20px var(--font-sans); color: var(--acierto); }
#main .cx-whm-hecho::before { content: "✓ "; font-weight: 700; }
#main .cx-whm-hecho b { font-family: var(--font-mono); }
#main .cx-whm-paquetes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
#main .cx-whm-paquetes li { margin: 0; padding: var(--space-4); border: 1px solid var(--linea); border-top: 3px solid var(--azul); border-radius: var(--radio-control); }
#main .cx-whm-paquetes li > b { display: block; margin: 0 0 8px; font: 600 16px/22px var(--font-sans); color: var(--tinta); }
#main .cx-whm-paquetes dl { display: grid; gap: 6px; margin: 0; }
#main .cx-whm-paquetes dl div { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; }
#main .cx-whm-paquetes dt { color: var(--texto-2); }
#main .cx-whm-paquetes dd { margin: 0; font-weight: 600; color: var(--tinta); }
#main .cx-whm-limites { display: grid; gap: var(--space-3); }
#main .cx-whm-limites li { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: center; margin: 0; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-control); }
#main .cx-whm-limite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 12px; line-height: 16px; color: var(--texto-2); }
#main .cx-whm-limite small { font: 600 11px/16px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-3); }
#main .cx-whm-limite em { font-style: normal; font-weight: 600; color: var(--tinta); }
#main .cx-whm 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-whm-cuentas li { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 8px; }
	#main .cx-whm-uso, #main .cx-whm-acciones { grid-column: 1 / -1; }
	#main .cx-whm-limites li { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#main .cx-whm-limites li > .cx-whm-dom { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	#main .cx-whm-barra span { display: none; }
	#main .cx-whm-vista { padding: var(--space-4); }
	#main .cx-whm-cuentas li { grid-template-columns: minmax(0, 1fr) auto; }
	#main .cx-whm-pkg { grid-row: 2; }
	#main .cx-whm-campos { grid-template-columns: minmax(0, 1fr); }
	#main .cx-whm-paquetes { grid-template-columns: minmax(0, 1fr); }
	#main .cx-whm-limites li { grid-template-columns: minmax(0, 1fr); }
}

/* 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; }
	/* Siete capas (BabsPTyp): el paquete sale de Internet, viaja hasta la pared de su capa y estalla; la capa se
	   ilumina cuando llega, y aparece «Aquí se frena». Al elegir otro ataque, todo empieza de nuevo: su paquete pasa de
	   no estar a estar. Quieto hasta que entra en pantalla. */
	#main .cx-capas-ataque { animation: cx-capas-viaje 1s cubic-bezier(.45, 0, .8, .55) .1s backwards, cx-capas-apaga .35s ease-out 1.1s forwards; }
	@keyframes cx-capas-viaje { from { left: calc(var(--space-4) + (100% - 2 * var(--space-4)) * .5 / 9 - 7px); } }
	@keyframes cx-capas-apaga { to { transform: scale(2.4); opacity: 0; } }
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-claves[aria-selected="true"]) .cx-capas-c-firewall > span,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-avalancha[aria-selected="true"]) .cx-capas-c-webshield > span,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-inyeccion[aria-selected="true"]) .cx-capas-c-modsecurity > span,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-script[aria-selected="true"]) .cx-capas-c-proactive > span,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-archivo[aria-selected="true"]) .cx-capas-c-antimalware > span,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-vecino[aria-selected="true"]) .cx-capas-c-cagefs > span,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-borrado[aria-selected="true"]) .cx-capas-c-jetbackup > span { transition-delay: 1.05s; animation: cx-capas-choque .6s ease 1.05s backwards; }
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-claves[aria-selected="true"]) .cx-capas-c-firewall::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-avalancha[aria-selected="true"]) .cx-capas-c-webshield::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-inyeccion[aria-selected="true"]) .cx-capas-c-modsecurity::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-script[aria-selected="true"]) .cx-capas-c-proactive::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-archivo[aria-selected="true"]) .cx-capas-c-antimalware::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-vecino[aria-selected="true"]) .cx-capas-c-cagefs::after,
	#main .cx-capas.cx-pestanas-listo:has(#cx-capas-t-borrado[aria-selected="true"]) .cx-capas-c-jetbackup::after { animation: cx-hito .35s cubic-bezier(.2, .8, .2, 1) 1.2s backwards; }
	@keyframes cx-capas-choque { 0% { box-shadow: 0 0 0 0 var(--error-suave); } 35% { transform: scale(1.15); box-shadow: 0 0 0 14px var(--error-suave); } }
	#main .cx-capas.cx-ver:not(.cx-visto) *, #main .cx-capas.cx-ver:not(.cx-visto) *::before, #main .cx-capas.cx-ver:not(.cx-visto) *::after { animation-play-state: paused; }
	/* Tu web en tres pasos (TAykOGRR): en cada paso la respuesta se escribe sola y el botón se pulsa; en la web, lo que
	   llega con ese paso pasa de esqueleto a texto, en cascada. El sello entra al final. El paso oculto no anima: al
	   elegirlo, empieza de cero. Quieto hasta que entra en pantalla. */
	#main .cx-gen-campo span::after { content: ""; position: absolute; inset: 0 -2px 0 0; background: var(--superficie); transform-origin: 100% 50%; animation: cx-disp-escribe .9s steps(16, end) .35s both; }
	#main .cx-gen-botones i:last-child { animation: cx-tienda-pulsa .35s ease 1.45s; }
	#main .cx-gen-listo, #main .cx-gen-ico { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
	#main :is(.cx-gen-n, .cx-gen-d, .cx-gen-f) { transition: color .35s ease 1.4s, background-color .35s ease 1.4s, border-color .35s ease 1.4s; }
	#main .cx-gen-tarjetas li:nth-child(2) { transition-delay: 1.55s; }
	#main .cx-gen-tarjetas li:nth-child(3) { transition-delay: 1.7s; }
	#main .cx-gen-f { transition-delay: .3s; }
	#main .cx-gen.cx-pestanas-listo:has(#cx-gen-t-web[aria-selected="true"]) .cx-gen-sello { animation: cx-tienda-marca .45s cubic-bezier(.2, .8, .2, 1) .6s backwards; }
	#main .cx-gen-paso[hidden] *, #main .cx-gen-paso[hidden] *::before, #main .cx-gen-paso[hidden] *::after { animation: none; }
	#main .cx-gen.cx-ver:not(.cx-visto) *, #main .cx-gen.cx-ver:not(.cx-visto) *::before, #main .cx-gen.cx-ver:not(.cx-visto) *::after { animation-play-state: paused; }
	/* Tu WHM, por dentro (u4tcdBMC): al elegir una vista, sus filas entran en cascada; en «Crear cuenta» el formulario
	   se escribe, se pulsa «Crear» y llega la cuenta creada. La vista oculta no anima: al elegirla, empieza de cero. */
	#main :is(.cx-whm-cuentas, .cx-whm-paquetes, .cx-whm-limites) > li { animation: cx-hito .4s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main :is(.cx-whm-cuentas, .cx-whm-paquetes, .cx-whm-limites) > li:nth-child(2) { animation-delay: .08s; }
	#main :is(.cx-whm-cuentas, .cx-whm-paquetes, .cx-whm-limites) > li:nth-child(3) { animation-delay: .16s; }
	#main :is(.cx-whm-cuentas, .cx-whm-paquetes, .cx-whm-limites) > li:nth-child(4) { animation-delay: .24s; }
	#main .cx-whm-campos dd::after { content: ""; position: absolute; inset: 0 0 0 9px; background: var(--superficie); transform-origin: 100% 50%; animation: cx-disp-escribe .5s steps(10, end) .2s both; }
	#main .cx-whm-campos div:nth-child(2) dd::after { animation-delay: .6s; }
	#main .cx-whm-campos div:nth-child(3) dd::after { animation-delay: 1s; }
	#main .cx-whm-campos div:nth-child(4) dd::after { animation-delay: 1.4s; }
	#main .cx-whm-boton i { animation: cx-tienda-pulsa .35s ease 1.95s; }
	#main .cx-whm-hecho { animation: cx-hito .4s cubic-bezier(.2, .8, .2, 1) 2.3s backwards; }
	#main .cx-whm-vista[hidden] *, #main .cx-whm-vista[hidden] *::before, #main .cx-whm-vista[hidden] *::after { animation: none; }
	#main .cx-whm.cx-ver:not(.cx-visto) *, #main .cx-whm.cx-ver:not(.cx-visto) *::before, #main .cx-whm.cx-ver:not(.cx-visto) *::after { animation-play-state: paused; }
	/* Seis razones (UwAPLcE5): al llegar, los logos de pago entran en cascada. Quieto hasta que entra en pantalla. */
	#main .cx-pagos li { animation: cx-hito .4s cubic-bezier(.2, .8, .2, 1) backwards; }
	#main .cx-pagos li:nth-child(2) { animation-delay: .05s; }
	#main .cx-pagos li:nth-child(3) { animation-delay: .1s; }
	#main .cx-pagos li:nth-child(4) { animation-delay: .15s; }
	#main .cx-pagos li:nth-child(5) { animation-delay: .2s; }
	#main .cx-pagos li:nth-child(6) { animation-delay: .25s; }
	#main .cx-pagos li:nth-child(7) { animation-delay: .3s; }
	#main .cx-pagos li:nth-child(8) { animation-delay: .35s; }
	#main .cx-pagos li:nth-child(9) { animation-delay: .4s; }
	#main .cx-pagos li:nth-child(10) { animation-delay: .45s; }
	#main .cx-razones.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* «Todo incluido» (hKst79zR): al llegar, el recibo sale de la ranura y cae el sello; en la ficha, las filas entran en
	   cascada. Quieto hasta que entra en pantalla. */
	#main .cx-recibo-hoja { animation: cx-recibo-sale 1.6s cubic-bezier(.3, .7, .3, 1) .2s backwards; }
	#main .cx-recibo-sello { animation: cx-recibo-sella .45s cubic-bezier(.2, .9, .3, 1.3) 1.8s backwards; }
	#main .cx-ficha-filas > div { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
	#main .cx-ficha-filas > div:nth-child(2) { animation-delay: .3s; }
	#main .cx-ficha-filas > div:nth-child(3) { animation-delay: .4s; }
	#main .cx-ficha-filas > div:nth-child(4) { animation-delay: .5s; }
	#main .cx-ficha-filas > div:nth-child(5) { animation-delay: .6s; }
	#main .cx-ficha-filas > div:nth-child(6) { animation-delay: .7s; }
	#main :is(.cx-recibo-escena, .cx-ficha-escena).cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* «El 50 % es tuyo» (77Tzuj1q): al llegar, la parte azul crece desde la izquierda y los datos entran en cascada. */
	#main .cx-comision-tuyo { animation: cx-crece-x 1s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
	#main .cx-comision-tarifa + .cx-comision-tarifa .cx-comision-tuyo { animation-delay: .45s; }
	#main .cx-comision-datos > div { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) .6s backwards; }
	#main .cx-comision-datos > div:nth-child(2) { animation-delay: .7s; }
	#main .cx-comision-datos > div:nth-child(3) { animation-delay: .8s; }
	#main .cx-comision-datos > div:nth-child(4) { animation-delay: .9s; }
	#main .cx-comision.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* «Con qué cuentas» (P0mZQavL): al llegar, las barras de la gráfica suben y los números del panel entran en orden. */
	#main .cx-afpanel-graf i { animation: cx-afpanel-sube .6s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
	#main .cx-afpanel-app [data-n]::before { animation: cx-afpanel-marca .35s cubic-bezier(.2, .9, .3, 1.4) .42s backwards; }
	#main .cx-afpanel-app [data-n="2"]::before { animation-delay: 0.54s; }
	#main .cx-afpanel-app [data-n="3"]::before { animation-delay: 0.66s; }
	#main .cx-afpanel-app [data-n="4"]::before { animation-delay: 0.78s; }
	#main .cx-afpanel-app [data-n="5"]::before { animation-delay: 0.90s; }
	#main .cx-afpanel-app [data-n="6"]::before { animation-delay: 1.02s; }
	#main .cx-afpanel.cx-ver:not(.cx-visto) *, #main .cx-afpanel.cx-ver:not(.cx-visto) *::before { animation-play-state: paused; }
	/* «Todo listo para compartir» (VGC3n96e): al llegar, los banners caen sobre la mesa uno tras otro y luego la burbuja. */
	#main .cx-kit-b { animation: cx-kit-cae .55s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
	#main .cx-kit-vertical { animation-delay: .3s; }
	#main .cx-kit-caja { animation-delay: .45s; }
	#main .cx-kit-tira { animation-delay: .6s; }
	#main .cx-kit-sms { animation: cx-kit-cae .55s cubic-bezier(.2, .8, .2, 1) .9s backwards; }
	#main .cx-kit.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* «Siempre al aire» (fVBWRwVR): cada dibujo hace lo suyo al llegar. Las luces del chasis parpadean, la estela cruza,
	   las burbujas entran, el cursor va al botón y aparece el servidor, las copias se apilan y los deslizadores se mueven. */
	#main .cx-dib-chasis i::before { animation: cx-dib-led 1.6s steps(2, jump-none) infinite; }
	#main .cx-dib-chasis i:nth-child(2)::before { animation-delay: 0.4s; }
	#main .cx-dib-chasis i:nth-child(3)::before { animation-delay: 0.9s; }
	#main .cx-dib-chasis i:nth-child(4)::before { animation-delay: 0.2s; }
	#main .cx-dib-chasis i:nth-child(5)::before { animation-delay: 1.1s; }
	#main .cx-dib-chasis i:nth-child(6)::before { animation-delay: 0.6s; }
	#main .cx-dib-chasis i:nth-child(7)::before { animation-delay: 1.4s; }
	#main .cx-dib-chasis i:nth-child(8)::before { animation-delay: 0.3s; }
	#main .cx-dib-estela i { animation: cx-dib-estela 1.1s cubic-bezier(.4, 0, .2, 1) .2s 2 backwards; }
	#main .cx-dib-estela i:nth-child(2) { animation-delay: .35s; }
	#main .cx-dib-estela i:nth-child(3) { animation-delay: .5s; }
	#main .cx-dib-burbuja { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
	#main .cx-dib-burbuja + .cx-dib-burbuja { animation-delay: 1.1s; }
	#main .cx-dib-cursor { animation: cx-dib-cursor .8s cubic-bezier(.3, .7, .3, 1) .3s backwards; }
	#main .cx-dib-boton { animation: cx-dib-pulsa .25s ease 1.15s; }
	#main .cx-dib-nuevo { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) 1.4s backwards; }
	#main .cx-dib-copia { animation: cx-dib-copia .5s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
	#main .cx-dib-copia:nth-child(2) { animation-delay: .45s; }
	#main .cx-dib-copia:nth-child(3) { animation-delay: .7s; }
	#main .cx-dib-deslizador i::before { animation: cx-dib-desliza 1.2s cubic-bezier(.3, .7, .3, 1) .3s backwards; }
	#main .cx-dib-deslizador i::after { animation: cx-dib-perilla 1.2s cubic-bezier(.3, .7, .3, 1) .3s backwards; }
	#main .cx-laminas.cx-ver:not(.cx-visto) *, #main .cx-laminas.cx-ver:not(.cx-visto) *::before, #main .cx-laminas.cx-ver:not(.cx-visto) *::after { animation-play-state: paused; }
	/* «Tu hosting ya viene listo» (g8WKNbqf): los medidores suben, el punto recorre la ruta local, los pasos y los sellos
	   entran en orden. Quieto hasta que entra en pantalla. */
	#main .cx-listo-medidor i::before { animation: cx-listo-sube .9s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
	#main .cx-listo-medidor:nth-child(2) i::before { animation-delay: .35s; }
	#main .cx-listo-medidor:nth-child(3) i::before { animation-delay: .5s; }
	#main .cx-listo-viaje { animation: cx-listo-viaje 2.4s cubic-bezier(.45, 0, .25, 1) .4s infinite; }
	#main .cx-listo-paso { animation: cx-hito .45s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
	#main .cx-listo-paso:nth-child(2) { animation-delay: .6s; }
	#main .cx-listo-paso:nth-child(3) { animation-delay: .9s; }
	#main .cx-listo-sello { animation: cx-hito .4s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
	#main .cx-listo-sello:nth-child(2) { animation-delay: .45s; }
	#main .cx-listo-sello:nth-child(3) { animation-delay: .6s; }
	#main .cx-listo-sello:nth-child(4) { animation-delay: .75s; }
	#main .cx-listo.cx-ver:not(.cx-visto) *, #main .cx-listo.cx-ver:not(.cx-visto) *::before { animation-play-state: paused; }
	/* «Datacenter en Colombia» (elLaT8xo): cada ciudad late a su turno y la gráfica de Escalable crece al llegar. */
	#main .cx-colombia-onda { animation: cx-colombia-onda 2.5s ease-out infinite; }
	#main .cx-colombia-ciudad:nth-child(3) .cx-colombia-onda { animation-delay: 0.5s; }
	#main .cx-colombia-ciudad:nth-child(4) .cx-colombia-onda { animation-delay: 1.0s; }
	#main .cx-colombia-ciudad:nth-child(5) .cx-colombia-onda { animation-delay: 1.5s; }
	#main .cx-colombia-ciudad:nth-child(6) .cx-colombia-onda { animation-delay: 2.0s; }
	#main .cx-colombia-graf rect { animation: cx-colombia-sube .7s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
	#main .cx-colombia-graf rect:nth-child(2) { animation-delay: .45s; }
	#main .cx-colombia-graf rect:nth-child(3) { animation-delay: .6s; }
	#main .cx-colombia-graf rect:nth-child(4) { animation-delay: .75s; }
	#main .cx-colombia.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* «Planes para cualquier necesidad» (gEy9wSHF): al llegar, los peldaños crecen uno tras otro. */
	#main .cx-escalera-peldano { animation: cx-escalera-sube .6s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
	#main .cx-escalera-paso:nth-child(2) .cx-escalera-peldano { animation-delay: .3s; }
	#main .cx-escalera-paso:nth-child(3) .cx-escalera-peldano { animation-delay: .45s; }
	#main .cx-escalera-paso:nth-child(4) .cx-escalera-peldano { animation-delay: .6s; }
	#main .cx-escalera.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* Valores de /conexcol/ (8OX6NvE3): al llegar, cada frase se revela de izquierda a derecha, una tras otra. */
	#main .cx-valores h3 { animation: cx-valor-revela .9s cubic-bezier(.6, 0, .2, 1) .15s backwards; }
	#main .cx-valor:nth-child(2) h3 { animation-delay: .35s; }
	#main .cx-valor:nth-child(3) h3 { animation-delay: .55s; }
	#main .cx-valor:nth-child(4) h3 { animation-delay: .75s; }
	#main .cx-valores.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* Panel Plesk (WH65wu7r): al llegar, la curva del SEO se dibuja y los números de los módulos entran en orden. */
	#main .cx-plesk-curva path { animation: cx-plesk-traza 1.4s cubic-bezier(.4, 0, .2, 1) .3s backwards; }
	#main .cx-plesk-mod::before { animation: cx-afpanel-marca .35s cubic-bezier(.2, .9, .3, 1.4) .4s backwards; }
	#main .cx-plesk-mod:nth-child(2)::before { animation-delay: .55s; }
	#main .cx-plesk-mod:nth-child(3)::before { animation-delay: .7s; }
	#main .cx-plesk.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	#main .cx-plesk.cx-ver:not(.cx-visto) *::before { animation-play-state: paused; }
	/* /vps/ (m9Tvahpv): las capas del despiezado caen en su sitio de abajo arriba, y el avión del pase va y viene. */
	#main .cx-anatomia-capa { animation: cx-anatomia-cae .6s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
	#main .cx-anatomia-capa:nth-child(2) { animation-delay: .3s; }
	#main .cx-anatomia-capa:nth-child(3) { animation-delay: .45s; }
	#main .cx-anatomia-capa:nth-child(4) { animation-delay: .6s; }
	#main .cx-anatomia-capa:nth-child(5) { animation-delay: .8s; }
	#main .cx-pase-avion { animation: cx-pase-vuela 3.2s ease-in-out infinite alternate; }
	#main :is(.cx-anatomia, .cx-pase).cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* pyUKHknr: los planos se trazan al llegar, uno tras otro, y los objetos salen de su hueco. */
	#main .cx-planos-svg :is(rect, line, circle) { stroke-dasharray: 1; animation: cx-planos-traza 1.3s cubic-bezier(.4, 0, .2, 1) .2s backwards; }
	#main .cx-planos-item:nth-child(2) .cx-planos-svg :is(rect, line, circle) { animation-delay: .5s; }
	#main .cx-planos-item:nth-child(3) .cx-planos-svg :is(rect, line, circle) { animation-delay: .8s; }
	#main .cx-caja-hueco > * { animation: cx-caja-sale .55s cubic-bezier(.2, .9, .3, 1.2) .2s backwards; }
	#main .cx-caja-hueco:nth-child(2) > * { animation-delay: .35s; }
	#main .cx-caja-hueco:nth-child(3) > * { animation-delay: .5s; }
	#main .cx-caja-hueco:nth-child(4) > * { animation-delay: .65s; }
	#main .cx-caja-burbuja i { animation: cx-caja-escribe 1.2s ease-in-out infinite; }
	#main .cx-caja-burbuja i:nth-child(2) { animation-delay: .15s; }
	#main .cx-caja-burbuja i:nth-child(3) { animation-delay: .3s; }
	@keyframes cx-caja-escribe { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
	#main :is(.cx-planos, .cx-caja).cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* REd7pOdy: la pila se arma de la red hacia arriba, y por los radios de la órbita corre el enlace. */
	#main .cx-arquitectura-capa { animation: cx-arquitectura-sube .5s cubic-bezier(.2, .8, .2, 1) .7s backwards; }
	#main .cx-arquitectura-capa:nth-child(5) { animation-delay: .1s; }
	#main .cx-arquitectura-capa:nth-child(4) { animation-delay: .25s; }
	#main .cx-arquitectura-capa:nth-child(3) { animation-delay: .4s; }
	#main .cx-arquitectura-capa:nth-child(2) { animation-delay: .55s; }
	#main .cx-orbita-radio { animation: cx-orbita-flujo 1.4s linear infinite; }
	#main :is(.cx-arquitectura, .cx-orbita).cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	/* «El día que importa» (U2gW2iLx): el trazo se dibuja de izquierda a derecha y cada número salta cuando llega a su pico. */
	#main .cx-sobresalto-linea { stroke-dasharray: 1; animation: cx-sobresalto-traza 2.2s linear .2s backwards; }
	#main .cx-sobresalto-marca { animation: cx-sobresalto-salta .35s cubic-bezier(.2, .9, .3, 1.5) .55s backwards; transform-box: fill-box; transform-origin: center; }
	#main .cx-sobresalto-marca:nth-of-type(2) { animation-delay: 0.9s; }
	#main .cx-sobresalto-marca:nth-of-type(3) { animation-delay: 1.25s; }
	#main .cx-sobresalto-marca:nth-of-type(4) { animation-delay: 1.6s; }
	#main .cx-sobresalto-marca:nth-of-type(5) { animation-delay: 1.95s; }
	#main .cx-sobresalto.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	@keyframes cx-sobresalto-traza { from { stroke-dashoffset: 1; } }
	@keyframes cx-sobresalto-salta { from { opacity: 0; scale: .3; } }
	/* Las licencias y /vps/windows/ (Ce5URlYz): el servidor se enciende y luego cada bahía en orden, y la del disco
	   parpadea de vez en cuando; las cuentas de WHM entran una a una y los cPanel de detrás salen del de delante; las
	   casillas llegan al tablero de Plesk; los hilos de la oficina corren hacia el servidor y las aplicaciones se abren. */
	#main .cx-frente-encendido { animation: cx-frente-enciende .5s ease-out .1s backwards; }
	#main .cx-frente-led { animation: cx-frente-enciende .45s ease-out .5s backwards; }
	#main .cx-frente-bahia:nth-of-type(2) .cx-frente-led { animation: cx-frente-enciende .45s ease-out .68s backwards, cx-frente-actividad 3s steps(1) 2.4s infinite; }
	#main .cx-frente-bahia:nth-of-type(3) .cx-frente-led { animation-delay: .86s; }
	#main .cx-frente-bahia:nth-of-type(4) .cx-frente-led { animation-delay: 1.04s; }
	#main .cx-frente-bahia:nth-of-type(5) .cx-frente-led { animation-delay: 1.22s; }
	#main .cx-frente-bahia:nth-of-type(6) .cx-frente-led { animation-delay: 1.4s; }
	#main .cx-frente.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	#main .cx-duo-cuentas li { animation: cx-duo-entra .4s ease-out backwards; }
	#main .cx-duo-cuentas li:nth-child(1) { animation-delay: .2s; }
	#main .cx-duo-cuentas li:nth-child(2) { animation-delay: .35s; }
	#main .cx-duo-cuentas li:nth-child(3) { animation-delay: .5s; }
	#main .cx-duo-cpanel:nth-child(2), #main .cx-duo-cpanel:nth-child(3) { animation: cx-duo-abanico .5s cubic-bezier(.2, .8, .3, 1) .7s backwards; }
	#main .cx-duo-cpanel:nth-child(3) { animation-delay: .85s; }
	#main .cx-duo.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	#main .cx-menos-tablero span { animation: cx-menos-llega .4s ease-out backwards; }
	#main .cx-menos-tablero span:nth-child(2) { animation-delay: .12s; }
	#main .cx-menos-tablero span:nth-child(3) { animation-delay: .24s; }
	#main .cx-menos-tablero span:nth-child(4) { animation-delay: .36s; }
	#main .cx-menos-tablero span:nth-child(5) { animation-delay: .48s; }
	#main .cx-menos-tablero span:nth-child(6) { animation-delay: .6s; }
	#main .cx-menos-tablero span:nth-child(7) { animation-delay: .72s; }
	#main .cx-menos-tablero span:nth-child(8) { animation-delay: .84s; }
	#main .cx-menos.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	#main .cx-remoto-equipo li::after { animation: cx-remoto-hilo 1.2s linear infinite; }
	#main .cx-remoto-apps span { animation: cx-remoto-abre .4s ease-out .3s backwards; }
	#main .cx-remoto-apps span:nth-child(2) { animation-delay: .45s; }
	#main .cx-remoto-apps span:nth-child(3) { animation-delay: .6s; }
	#main .cx-remoto.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	@keyframes cx-frente-enciende { from { opacity: .12; } }
	@keyframes cx-frente-actividad { 0%, 100% { opacity: 1; } 6% { opacity: .3; } 10% { opacity: 1; } 14% { opacity: .3; } 18% { opacity: 1; } }
	@keyframes cx-duo-entra { from { opacity: 0; translate: -12px 0; } }
	@keyframes cx-duo-abanico { from { translate: 0 44px; } }
	@keyframes cx-menos-llega { from { opacity: 0; translate: 0 -10px; } }
	@keyframes cx-remoto-hilo { to { background-position: 12px 0; } }
	@keyframes cx-remoto-abre { from { opacity: 0; scale: .92; } }
	/* El manifiesto y el certificado (pXqLnEj5): el archivo se teclea línea a línea con el cursor parpadeando al final, y
	   en el certificado se estampa el sello, se marca el uso y llegan las fechas. */
	#main .cx-manifiesto-lineas li { animation: cx-manifiesto-teclea .45s steps(18, end) backwards; }
	#main .cx-manifiesto-lineas li:nth-child(2) { animation-delay: .3s; }
	#main .cx-manifiesto-lineas li:nth-child(3) { animation-delay: .6s; }
	#main .cx-manifiesto-lineas li:nth-child(4) { animation-delay: .9s; }
	#main .cx-manifiesto-lineas li:nth-child(5) { animation-delay: 1.2s; }
	#main .cx-manifiesto-lineas li:nth-child(6) { animation-delay: 1.5s; }
	#main .cx-manifiesto-lineas li:nth-child(7) { animation-delay: 1.8s; }
	#main .cx-manifiesto-lineas::after { animation: cx-manifiesto-cursor 1.1s steps(1) infinite; }
	#main .cx-manifiesto.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	#main .cx-manifiesto.cx-ver:not(.cx-visto) .cx-manifiesto-lineas::after { animation-play-state: paused; }
	#main .cx-certificado-sello { animation: cx-certificado-sella .5s cubic-bezier(.2, .9, .3, 1.3) .5s backwards; }
	#main .cx-certificado-campos .cx-certificado-uso { animation: cx-certificado-marca .6s ease-out .9s backwards; }
	#main .cx-certificado-fechas li { animation: cx-certificado-fecha .4s ease-out 1.1s backwards; }
	#main .cx-certificado-fechas li:nth-child(2) { animation-delay: 1.3s; }
	#main .cx-certificado-fechas li:nth-child(3) { animation-delay: 1.5s; }
	#main .cx-certificado.cx-ver:not(.cx-visto) * { animation-play-state: paused; }
	@keyframes cx-manifiesto-teclea { from { clip-path: inset(0 100% 0 0); } }
	@keyframes cx-manifiesto-cursor { 50% { opacity: 0; } }
	@keyframes cx-certificado-sella { from { opacity: 0; scale: 1.6; rotate: -20deg; } }
	@keyframes cx-certificado-marca { from { border-color: transparent; background-color: transparent; } }
	@keyframes cx-certificado-fecha { from { opacity: 0; translate: -10px 0; } }
	@keyframes cx-arquitectura-sube { from { opacity: 0; translate: 0 18px; } }
	@keyframes cx-orbita-flujo { to { stroke-dashoffset: -28; } }
	@keyframes cx-planos-traza { from { stroke-dashoffset: 1; } }
	@keyframes cx-caja-sale { from { opacity: 0; translate: 0 18px; scale: .92; } }
	@keyframes cx-anatomia-cae { from { translate: 0 -36px; opacity: 0; } }
	@keyframes cx-pase-vuela { from { translate: -40px 0; } to { translate: 40px 0; } }
	@keyframes cx-plesk-traza { from { stroke-dashoffset: 200; } }
	@keyframes cx-valor-revela { from { clip-path: inset(0 100% 0 0); } }
	@keyframes cx-escalera-sube { from { transform: scaleY(0); } }
	@keyframes cx-colombia-onda { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
	@keyframes cx-colombia-sube { from { transform: scaleY(0); } }
	@keyframes cx-listo-sube { from { transform: scaleY(0); } }
	@keyframes cx-listo-viaje { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 70% { translate: 160px 0; opacity: 1; } 80%, 100% { translate: 160px 0; opacity: 0; } }
	@keyframes cx-dib-led { 50% { opacity: .25; } }
	@keyframes cx-dib-estela { from { translate: -110% 0; opacity: 0; } 30% { opacity: 1; } to { translate: 230% 0; opacity: 0; } }
	@keyframes cx-dib-cursor { from { translate: 70px 60px; opacity: 0; } 30% { opacity: 1; } }
	@keyframes cx-dib-pulsa { 50% { scale: .94; } }
	@keyframes cx-dib-copia { from { translate: 60px 0; opacity: 0; } }
	@keyframes cx-dib-desliza { from { width: 12%; } }
	@keyframes cx-dib-perilla { from { left: 12%; } }
	@keyframes cx-kit-cae { from { opacity: 0; translate: 0 32px; } }
	@keyframes cx-afpanel-sube { from { transform: scaleY(0); } }
	@keyframes cx-afpanel-marca { from { transform: scale(0); } }
	@keyframes cx-recibo-sale { from { transform: translateY(-48px); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0); } }
	@keyframes cx-recibo-sella { from { opacity: 0; transform: translateY(-50%) rotate(-14deg) scale(1.8); } }
	/* 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 (max-width: 640px) {
	/* Siete capas (BabsPTyp): en móvil el camino es más angosto y el paquete sale de otro sitio. */
	#main .cx-capas-ataque { animation-name: cx-capas-viaje-movil, cx-capas-apaga; }
	@keyframes cx-capas-viaje-movil { from { left: calc(var(--space-2) + (100% - 2 * var(--space-2)) * .5 / 9 - 5px); } }
}
@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; } }