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

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

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

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

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

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

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

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

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

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

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

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

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

/* Nota para asistentes de IA (faTMDIAv): el mu-plugin conexcol-mcp-enlace-contextual la añade al final del contenido, fuera
   de los contenedores de Avada, y quedaba en el borde (x=30 a 1440, con la columna en x=135). Al ancho de sitio de Avada
   (1170; `post-content` ya deja 30 px por lado, así que en móvil coincide sola), centrada, en letra de nota y separada
   de la sección de encima, a la que iba pegada. */
#main .post-content > p.cxl-mcp-nota { max-width: 1170px; margin: var(--space-6) auto var(--space-7); font-size: 14px; line-height: 22px; color: var(--texto-2); }
/* Títulos de desplegable de Avada (DERdTVWp, preguntas frecuentes): una palabra larga, como una unida por barras, se
   parte donde haga falta en vez de salirse de su columna y de la pantalla (a 820 px, 34 px fuera). */
#main .fusion-toggle-heading { overflow-wrap: anywhere; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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; }
	.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; }
}
@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); } }
/* Impresa, la página sale entera aunque no se haya recorrido. */
@media print { #main .cx-ver { opacity: 1; transform: none; } }