/* Archivo armado por armar.mjs: no se edita a mano. Source Sans 3 e Inter locales (SIL Open Font License, fuentes/OFL-*). */
@font-face{font-family:"Source Sans 3";src:url("/fuentes/SourceSans3-Light.woff2?v=4") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/fuentes/SourceSans3-Regular.woff2?v=4") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("/fuentes/SourceSans3-Bold.woff2?v=4") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fuentes/Inter-Light.woff2?v=4") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fuentes/Inter-Regular.woff2?v=4") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fuentes/Inter-SemiBold.woff2?v=4") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fuentes/Inter-Bold.woff2?v=4") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fuentes/Inter-BoldItalic.woff2?v=4") format("woff2");font-weight:700;font-style:italic;font-display:swap}
/* Base de estilos de las páginas de Ascendia para GHL. Todo cuelga de .asx (prefijo propio), para no chocar con GHL.
Color y tipografía: Guía de Uso de Ascendia aprobada (18 sep 2026), páginas 5 y 6. Nada de Funsys.
Tipografía en web (Carlos, 11 oct 2026, Funsys\identidad-visual-funsys-y-ascendia.md, sección 0): titulares en
Source Sans 3 Light y textos en Inter Light, en lugar de Calibri Light y Helvetica Neue. Gratuitas (SIL OFL).
Los @font-face no van aquí: los escribe cada armado con _comun\fuentes.mjs, con la ruta que le toca. */
.asx{
--asx-azul-claro:#0095f3; --asx-azul-fuerte:#0057f4; --asx-negro:#000710; --asx-gris:#a0a2a6;
--asx-amarillo:#ffcf00; --asx-naranja:#ffa500; --asx-marino:#141e2d;
--asx-degradado:linear-gradient(90deg,#0095f3,#0057f4);
/* Derivados nuestros (propuesta, no están en la guía): fondo suave y bordes, sacados del marino */
--asx-suave:#f3f5f8; --asx-borde:#e1e5ec; --asx-texto:#141e2d; --asx-texto-2:#465063; --asx-claro-2:#c3c6cb;
--asx-titulo:"Source Sans 3",Arial,sans-serif;
--asx-cuerpo:"Inter",Arial,sans-serif;
--asx-curva:cubic-bezier(.16,1,.3,1);
font-family:var(--asx-cuerpo); font-weight:300; font-size:18px; line-height:1.6; color:var(--asx-texto);
background:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
.asx *,.asx *::before,.asx *::after{box-sizing:border-box}
/* Reinicio con :where() para que no le gane a las clases de abajo */
.asx :where(h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset,legend){margin:0;padding:0}
.asx :where(ul,ol){list-style:none}
.asx :where(fieldset){border:0;min-width:0}
.asx strong,.asx b{font-weight:700}
.asx a:not([class]){color:var(--asx-azul-fuerte)}
.asx img,.asx svg{display:block;max-width:100%}
.asx :focus-visible{outline:3px solid var(--asx-azul-claro);outline-offset:3px;border-radius:6px}
/* ---- Retícula: contenedor de 1200 px y 12 columnas ---- */
.asx-in{width:100%;max-width:1264px;margin:0 auto;padding:0 32px;position:relative}
.asx-g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;row-gap:40px}
.asx-c4{grid-column:span 4}.asx-c5{grid-column:span 5}.asx-c6{grid-column:span 6}.asx-c7{grid-column:span 7}.asx-c8{grid-column:span 8}
.asx-alinear{align-self:center}
.asx-sec{padding:112px 0}
.asx-suave{background:var(--asx-suave)}
.asx-oscura{background:var(--asx-marino);color:#fff}
.asx-cabeza{max-width:760px;margin-bottom:56px}
/* ---- Tipografía ---- */
.asx-h1{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(40px,4.6vw,66px);line-height:1.04;letter-spacing:-.015em;color:#fff}
.asx-h2{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(34px,3.4vw,50px);line-height:1.08;letter-spacing:-.01em;color:var(--asx-texto)}
/* El call out de los titulares (Carlos, 30 sep 2026): una o dos palabras en Inter Bold Italic (antes Helvetica Neue), el resto en
Source Sans 3 (antes Calibri). Se quitó la barra corta azul que iba bajo cada titular: "ni barra azul debajo, ni gris, ni isotipo pegado".
Las palabras las marca nucleo.js (titulares()). */
.asx-callout{font-family:var(--asx-cuerpo);font-weight:700;font-style:italic;font-size:.9em;letter-spacing:-.02em}
/* Sin la barra se conserva el mismo aire bajo el titular (22 px + 6 px), para no mover nada del resto de la página. */
.asx-h1::after,.asx-h2::after{content:"";display:block;height:6px;margin-top:22px}
.asx-h2-claro{color:#fff}
.asx-h2-grande{font-size:clamp(38px,4.4vw,62px)}
.asx-h3{font-family:var(--asx-titulo);font-weight:400;font-size:26px;line-height:1.2;color:var(--asx-texto)}
.asx-sub{font-size:21px;line-height:1.55;color:var(--asx-claro-2);margin-top:28px;max-width:600px}
.asx-lead{font-size:22px;line-height:1.55;color:var(--asx-texto)}
.asx-claro{color:var(--asx-claro-2)}
.asx-texto-2{color:var(--asx-texto-2)}
/* Marcadores pendientes: amarillo complementario de la guía, para que salten y no se confundan con la marca */
.asx-pend{display:inline-block;background:var(--asx-amarillo);color:var(--asx-negro);font-weight:700;font-size:.82em;letter-spacing:.02em;padding:1px 8px;border-radius:4px;line-height:1.5;vertical-align:baseline}
/* ---- Íconos ---- */
.asx-ico{width:1em;height:1em;flex:none}
.asx-caja-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:#e8f3fe;color:var(--asx-azul-fuerte);font-size:30px;flex:none}
.asx-caja-osc{background:rgba(0,149,243,.14);color:var(--asx-azul-claro)}
.asx-ico-grande{font-size:44px}
/* ---- Botones ---- */
.asx-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.asx-boton{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 34px;border:0;border-radius:10px;
background:var(--asx-degradado);background-size:140% 100%;background-position:0 0;color:#fff;font-family:var(--asx-cuerpo);font-weight:700;font-size:19px;line-height:1.2;
text-decoration:none;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,87,244,.65);transition:background-position .4s var(--asx-curva),transform .4s var(--asx-curva),box-shadow .4s var(--asx-curva)}
.asx-boton .asx-ico{font-size:20px}
.asx-boton-sec{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border:2px solid var(--asx-azul-fuerte);border-radius:10px;background:transparent;
color:var(--asx-azul-fuerte);font-weight:700;font-size:18px;text-decoration:none;transition:background-color .3s,color .3s}
@media (hover:hover){
.asx-boton:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,87,244,.8)}
.asx-boton-sec:hover{background:var(--asx-azul-fuerte);color:#fff}
}
/* ---- Cabecera: banda oscura, logo a la izquierda y tagline a la derecha (guía, página 2) ---- */
.asx-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:30px;padding-bottom:30px}
.asx-logo{display:block;width:210px}
.asx-logo svg{width:100%;height:auto}
.asx-tagline{font-family:var(--asx-titulo);font-weight:300;font-size:18px;color:var(--asx-gris);letter-spacing:.01em}
/* ---- Hero ---- */
.asx-hero{position:relative;background:var(--asx-marino);color:#fff;overflow:hidden}
.asx-hero-g{position:relative;z-index:1;padding-top:64px;padding-bottom:88px;min-height:560px;align-items:center}
.asx-hero-txt{grid-column:1 / span 8}
.asx-hero-txt .asx-h1{max-width:720px}
.asx-hero-vis{position:absolute;z-index:0;top:0;bottom:76px;right:0;width:44%;pointer-events:none;overflow:hidden}
/* El isotipo ampliado y recortado por el borde derecho (guía, páginas 1 y 2) */
.asx-hero-vis .asx-iso{position:absolute;right:-14%;top:52%;height:90%;width:auto;transform:translateY(-50%)}
.asx-hero-corto .asx-hero-g{min-height:0;padding-bottom:96px}
.asx-hero-corto .asx-hero-vis{width:34%}
.asx-hero-corto .asx-hero-vis .asx-iso{height:128%;right:-18%}
.asx-datos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:44px;font-size:17px;color:var(--asx-claro-2)}
.asx-datos li{display:flex;align-items:center;gap:10px}
.asx-datos .asx-ico{font-size:22px;color:var(--asx-azul-claro)}
.asx-fumexpo{flex:0 0 100%;margin-bottom:2px}
.asx-fumexpo span,.asx-fumexpo-g{display:block;height:28px;width:112px;background:url("data:,") no-repeat left center/contain}
.asx-fumexpo-g{height:34px;width:136px;margin-bottom:28px}
/* Barra de confianza, al pie del hero */
.asx-confianza-banda{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12);background:rgba(0,7,16,.35)}
.asx-confianza{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 32px;padding:26px 0;font-size:18px;color:#fff}
.asx-confianza li{display:flex;align-items:center;gap:12px}
.asx-confianza .asx-ico{font-size:24px;color:var(--asx-azul-claro)}
/* ---- Tarjetas ---- */
.asx-tarjeta{background:#fff;border:1px solid var(--asx-borde);border-radius:16px;padding:36px;box-shadow:0 1px 2px rgba(20,30,45,.05),0 12px 32px -18px rgba(20,30,45,.22)}
.asx-tarjeta-osc{background:var(--asx-marino);border-color:var(--asx-marino);color:#fff}
/* El problema */
.asx-tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.asx-dolor{position:relative;display:flex;flex-direction:column;gap:18px}
.asx-dolor .asx-num{position:absolute;top:34px;right:36px;font-family:var(--asx-titulo);font-weight:300;font-size:40px;line-height:1;color:#c9d6ea}
.asx-dolor-t{font-family:var(--asx-titulo);font-weight:400;font-size:27px;line-height:1.2;color:var(--asx-texto);margin-top:10px}
.asx-dolor p:not(.asx-dolor-t){color:var(--asx-texto-2)}
/* Los cuatro servicios */
.asx-cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.asx-servicio{display:flex;flex-direction:column;gap:18px;padding:32px 28px;border-top:4px solid transparent;
border-image:linear-gradient(90deg,#0095f3,#0057f4) 1 0 0 0;border-radius:0 0 16px 16px}
.asx-servicio p{color:var(--asx-texto-2)}
.asx-linea{display:flex;align-items:center;gap:14px;margin-top:40px;font-size:21px;color:var(--asx-texto)}
.asx-linea .asx-ico{font-size:26px;color:var(--asx-azul-fuerte)}
/* Por qué Ascendia (banda oscura con el isotipo tenue recortado) */
.asx-porque{position:relative;overflow:hidden}
.asx-porque>.asx-marca-agua{position:absolute;right:-6%;top:50%;height:130%;width:auto;transform:translateY(-50%);pointer-events:none}
.asx-porque .asx-in{z-index:1}
.asx-razones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
.asx-razon{display:flex;flex-direction:column;gap:18px;font-size:20px;color:var(--asx-claro-2)}
.asx-razon strong{color:#fff}
.asx-pasos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:64px;position:relative}
.asx-pasos::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:linear-gradient(90deg,#0095f3,#0057f4);opacity:.55}
.asx-paso{position:relative;display:flex;flex-direction:column;gap:22px;font-size:22px;color:#fff}
.asx-paso-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--asx-marino);border:2px solid var(--asx-azul-claro);font-weight:700;font-size:16px;color:#fff}
/* Qué vas a ver en el stand */
.asx-lista{display:flex;flex-direction:column;gap:18px;margin-top:40px}
.asx-lista li{display:flex;gap:14px;align-items:flex-start;font-size:20px}
.asx-lista .asx-ico{font-size:24px;color:var(--asx-azul-fuerte);margin-top:3px}
.asx-sec>.asx-in>.asx-g12>.asx-c7>.asx-lead{margin-top:36px}
.asx-lugar{padding:40px}
.asx-renglones{display:flex;flex-direction:column;gap:24px}
.asx-renglones>div{display:grid;grid-template-columns:32px 1fr;column-gap:12px;row-gap:2px}
.asx-renglones .asx-ico{grid-row:span 2;font-size:26px;color:var(--asx-azul-claro);margin-top:2px}
.asx-renglones dt{font-weight:700;color:#fff;font-size:18px}
.asx-renglones dd{color:var(--asx-claro-2);font-size:19px}
.asx-renglones-claro>div{grid-template-columns:1fr}
.asx-renglones-claro dt{color:var(--asx-texto)}
.asx-renglones-claro dd{color:var(--asx-texto-2);font-size:21px}
/* ---- La alianza: dos mitades del mismo problema ---- */
.asx-mitades{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:16px}
.asx-mitad{display:flex;flex-direction:column;gap:14px;padding:32px 28px;border-radius:16px;background:#fff;border:1px solid var(--asx-borde);color:var(--asx-texto-2)}
.asx-mitad-a{background:var(--asx-marino);border-color:var(--asx-marino);color:var(--asx-claro-2)}
.asx-mitad-nom{font-family:var(--asx-titulo);font-weight:400;font-size:30px;line-height:1.1;color:var(--asx-texto)}
.asx-mitad-a .asx-mitad-nom{color:#fff}
/* Los logos reales de las dos marcas, planos (Carlos, 29 y 30 sep 2026). La imagen de Funsys la pone el armado de la landing del stand. */
.asx-mitad-logo{display:block;width:min(100%,184px);height:auto;background:no-repeat left center/contain}
.asx-mitad-logo-f{aspect-ratio:497.61/128.86}
.asx-mitad-logo-a{aspect-ratio:610/188;width:min(100%,172px)}
.asx-mas{align-self:center;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--asx-borde);color:var(--asx-azul-fuerte);font-size:22px}
@media (max-width:640px){.asx-mitades{grid-template-columns:1fr}.asx-mas{justify-self:center}}
/* ---- Preguntas frecuentes ---- */
.asx-faq{border-top:1px solid var(--asx-borde)}
.asx-preg{border-bottom:1px solid var(--asx-borde)}
.asx-preg summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:76px;padding:18px 0;cursor:pointer;list-style:none;
font-family:var(--asx-titulo);font-weight:400;font-size:24px;line-height:1.25;color:var(--asx-texto)}
.asx-preg summary::-webkit-details-marker{display:none}
.asx-preg-ico{font-size:26px;color:var(--asx-azul-fuerte);transition:transform .35s var(--asx-curva)}
.asx-preg[open] .asx-preg-ico{transform:rotate(45deg)}
.asx-preg p{padding:0 48px 26px 0;font-size:19px;color:var(--asx-texto-2)}
/* ---- Cierre ---- */
.asx-cierre{position:relative;overflow:hidden;background:var(--asx-marino);color:#fff;padding:120px 0}
.asx-cierre>.asx-marca-agua{position:absolute;right:-4%;top:50%;height:150%;width:auto;transform:translateY(-50%);pointer-events:none}
.asx-cierre .asx-in{z-index:1}
.asx-cierre .asx-h2{max-width:760px}
/* ---- Pie ---- */
.asx-pie{background:var(--asx-negro);color:var(--asx-gris);padding:44px 0}
.asx-pie .asx-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.asx-pie .asx-logo{width:170px}
/* Tarjetas de las páginas de después */
.asx-donde{display:flex;flex-direction:column;align-items:flex-start;gap:20px;height:100%}
.asx-donde .asx-cta,.asx-donde .asx-nota{margin-top:4px}
.asx-mientras{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:36px 40px}
.asx-mientras .asx-cta{margin-top:0}
@media (max-width:900px){.asx-mientras{grid-template-columns:1fr;gap:18px}}
/* ---- Huecos visibles (calendario, video) ---- */
.asx-cal-hueco{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:340px;border:2px dashed #b9c6da;border-radius:16px;background:#fff;color:var(--asx-azul-fuerte);font-size:18px;text-align:center;padding:32px}
.asx-nota{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:17px;color:var(--asx-texto-2)}
.asx-nota.asx-solo-prueba{display:block}
.asx-nota .asx-ico{font-size:22px;color:var(--asx-azul-fuerte)}
/* ---- Aviso del modo de prueba ---- */
.asx-aviso{margin-top:40px;padding:24px 28px;border-radius:12px;background:#fff8d6;border:1px solid #f1d46b;font-size:17px;color:var(--asx-negro)}
.asx-aviso dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 18px;margin-top:12px;font-size:17px}
.asx-aviso dt{font-weight:700}
/* ---- Responsive ---- */
@media (max-width:1100px){
.asx-cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}
.asx-hero-vis{width:40%;opacity:.55}
}
@media (max-width:900px){
.asx{font-size:17px}
.asx-sec{padding:80px 0}
.asx-g12{grid-template-columns:1fr;row-gap:36px}
.asx-c4,.asx-c5,.asx-c6,.asx-c7,.asx-c8,.asx-hero-txt{grid-column:1 / -1}
.asx-tres{grid-template-columns:1fr;gap:20px}
.asx-razones{grid-template-columns:1fr;gap:28px}
.asx-pasos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
.asx-pasos::before{display:none}
.asx-cabeza{margin-bottom:40px}
.asx-hero-vis{opacity:.22}
}
@media (max-width:640px){
.asx-in{padding:0 22px}
.asx-sec{padding:72px 0}
.asx-top{padding-top:22px;padding-bottom:22px}
.asx-logo{width:164px}
.asx-tagline{display:none}
.asx-hero-g{padding-top:24px;padding-bottom:64px;min-height:0}
/* En móvil el isotipo queda tenue detrás, recortado arriba a la derecha, sin huecos */
.asx-hero-vis{width:70%;opacity:.2;top:-4%;bottom:auto;height:420px}
.asx-hero-vis .asx-iso{height:100%;right:-30%;top:0;transform:none}
.asx-hero-corto .asx-hero-vis{width:70%}
.asx-sub{font-size:19px;margin-top:22px}
.asx-lead{font-size:20px}
.asx-datos{gap:12px 20px;font-size:16px;margin-top:36px}
.asx-porque>.asx-marca-agua,.asx-cierre>.asx-marca-agua{opacity:.4}
.asx-confianza{flex-direction:column;gap:14px;font-size:17px}
.asx-cuatro{grid-template-columns:1fr;gap:18px}
.asx-tarjeta{padding:28px 24px}
.asx-dolor .asx-num{top:26px;right:24px}
.asx-pasos{grid-template-columns:1fr;gap:26px}
.asx-paso{flex-direction:row;align-items:center;font-size:20px}
.asx-paso .asx-caja-ico{display:none}
.asx-boton{width:100%;padding:0 22px}
.asx-preg summary{font-size:21px}
.asx-preg p{padding-right:0;font-size:17px}
.asx-cierre{padding:88px 0}
.asx-linea{font-size:19px;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
.asx *{transition:none !important;animation:none !important}
}
.asx-aviso dd{overflow-wrap:anywhere;min-width:0}
/* Formulario de Ascendia: tarjeta con sombra para separarla del fondo (Carlos, 00-LEEME.md punto 9).
Arranca con una sola pregunta; al contestar aparece el formulario ideal (sí) o el alterno (no), con CSS (:has). */
.asx-registro{padding:96px 0 104px}
.asx-form{position:relative;max-width:920px;margin:0 auto;background:#fff;border-radius:20px;padding:52px 56px;
box-shadow:0 2px 4px rgba(20,30,45,.06),0 34px 70px -24px rgba(20,30,45,.42),0 0 0 1px rgba(20,30,45,.05)}
.asx-form::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:20px 20px 0 0;background:var(--asx-degradado)}
.asx-form .asx-pregunta legend{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(30px,3vw,42px);line-height:1.12;color:var(--asx-texto);margin-bottom:30px}
.asx-opciones{display:flex;flex-wrap:wrap;gap:12px}
/* Cada opción es un botón completo, sin circulito ni palomita (Carlos, 29 sep 2026; VERIFICACION-VISUAL.md).
El input real se queda oculto de forma accesible: envía, valida y se recorre con Tab. Al picarle, todo el botón
cambia de color y se aprieta (solo transform, box-shadow y color). */
.asx-opcion{position:relative;display:flex;align-items:stretch;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.asx-opcion input,.asx-consent input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.asx-opcion span{display:flex;align-items:center;min-height:52px;width:100%;padding:12px 20px;border:1.5px solid #cfd6e2;border-radius:10px;background:#fff;
font-size:18px;line-height:1.35;color:var(--asx-texto);box-shadow:0 1px 2px rgba(20,30,45,.08),0 3px 0 #dfe4ec;
transition:transform .14s ease,box-shadow .18s ease,background-color .18s,border-color .18s,color .18s}
.asx-opcion:active span{transform:translateY(2px) scale(.985);box-shadow:inset 0 2px 6px rgba(20,30,45,.18)}
.asx-opcion input:checked+span{border-color:var(--asx-azul-fuerte);background:var(--asx-azul-fuerte);color:#fff;
transform:translateY(2px);box-shadow:inset 0 3px 8px rgba(0,7,16,.35);animation:asx-apretar .26s ease}
.asx-opcion input:checked+span .asx-pend{color:#fff}
.asx-opcion input:focus-visible+span{outline:3px solid var(--asx-azul-claro);outline-offset:3px}
@keyframes asx-apretar{0%{transform:translateY(0) scale(1)}45%{transform:translateY(3px) scale(.965)}100%{transform:translateY(2px) scale(1)}}
@media (hover:hover){.asx-opcion:hover input:not(:checked)+span{border-color:var(--asx-azul-claro);background:#f3f8ff}}
@media (prefers-reduced-motion:reduce){.asx-opcion span,.asx-consent span{transition:none;animation:none!important}}
.asx-opciones-grandes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.asx-opciones-grandes .asx-opcion span{min-height:72px;font-size:20px;font-weight:700;padding:16px 24px}
.asx-radios-lista .asx-opciones{flex-direction:column}
/* Lo que va después de la pregunta: escondido hasta contestar */
.asx-resto{display:none;margin-top:40px;padding-top:40px;border-top:1px solid var(--asx-borde)}
.asx-form:has(input[name="asiste_fumexpo"]:checked) .asx-resto{display:block}
.asx-form .asx-solo-si,.asx-form .asx-solo-no,.asx-form .asx-campo[data-solo-si]{display:none}
.asx-form:has(input[name="asiste_fumexpo"][value="si"]:checked) .asx-solo-si{display:block}
.asx-form:has(input[name="asiste_fumexpo"][value="si"]:checked) .asx-campo[data-solo-si]{display:flex}
.asx-form:has(input[name="asiste_fumexpo"][value="no"]:checked) .asx-solo-no{display:block}
.asx-form:has(input[name="asiste_fumexpo"][value="si"]:checked) button.asx-solo-si,
.asx-form:has(input[name="asiste_fumexpo"][value="no"]:checked) button.asx-solo-no{display:inline-flex}
.asx-rama-txt{margin-bottom:32px}
.asx-rama-txt p{margin-top:10px;color:var(--asx-texto-2)}
.asx-campos{display:grid;grid-template-columns:1fr 1fr;gap:24px 24px}
.asx-campo{display:flex;flex-direction:column;gap:8px}
.asx-ancho,[data-solo-si].asx-ancho{grid-column:1 / -1}
.asx-campo>label,.asx-campo legend{font-weight:700;font-size:17px;color:var(--asx-texto);margin-bottom:2px}
.asx-radios legend{margin-bottom:12px}
.asx-campo input:not([type=radio]):not([type=checkbox]),.asx-campo select{width:100%;min-height:56px;padding:0 16px;border:1.5px solid #cfd6e2;border-radius:10px;background:#fff;
font-family:var(--asx-cuerpo);font-weight:400;font-size:18px;color:var(--asx-texto);appearance:none;-webkit-appearance:none;transition:border-color .2s,box-shadow .2s}
.asx-campo select{background-image:linear-gradient(45deg,transparent 50%,#465063 50%),linear-gradient(135deg,#465063 50%,transparent 50%);
background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.asx-campo input:focus,.asx-campo select:focus{outline:none;border-color:var(--asx-azul-fuerte);box-shadow:0 0 0 3px rgba(0,149,243,.25)}
.asx-invalido input:not([type=radio]):not([type=checkbox]),.asx-invalido select,.asx-invalido .asx-opcion span{border-color:#c62828}
.asx-error{font-size:16px;font-weight:700;color:#b3261e}
/* El consentimiento también es un botón completo que se aprieta */
.asx-consent{position:relative;display:block;margin-top:32px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.asx-consent span{display:block;padding:14px 20px;border:1.5px solid #cfd6e2;border-radius:10px;background:#fff;font-size:17px;line-height:1.45;color:var(--asx-texto-2);
box-shadow:0 1px 2px rgba(20,30,45,.08),0 3px 0 #dfe4ec;transition:transform .14s ease,box-shadow .18s ease,background-color .18s,border-color .18s,color .18s}
.asx-consent:active span{transform:translateY(2px) scale(.99);box-shadow:inset 0 2px 6px rgba(20,30,45,.18)}
.asx-consent input:checked+span{border-color:var(--asx-azul-fuerte);background:var(--asx-azul-fuerte);color:#fff;transform:translateY(2px);box-shadow:inset 0 3px 8px rgba(0,7,16,.35);animation:asx-apretar .26s ease}
.asx-consent input:checked+span a{color:#fff}
.asx-consent input:focus-visible+span{outline:3px solid var(--asx-azul-claro);outline-offset:3px}
@media (hover:hover){.asx-consent:hover input:not(:checked)+span{border-color:var(--asx-azul-claro);background:#f3f8ff}}
.asx-consent.asx-invalido span{border-color:#c62828;color:#b3261e}
.asx-form .asx-cta{margin-top:32px}
.asx-form button.asx-solo-si,.asx-form button.asx-solo-no{display:none}
@media (max-width:640px){
.asx-registro{padding:56px 0 64px}
.asx-form{padding:36px 22px;border-radius:16px}
.asx-opciones-grandes{grid-template-columns:1fr}
.asx-campos{grid-template-columns:1fr;gap:20px}
}
/* Movimiento y estructura de los formularios de una pregunta por pantalla (comun/pasos.js). Sin marca: los colores y
las letras los pone cada herramienta. Solo se anima transform y opacity. Con "reducir movimiento", nada se mueve. */
.hi { --hi-curva: cubic-bezier(.16, 1, .3, 1); position: relative; }
.hi [hidden] { display: none !important; }
/* Sin scripts: todas las preguntas juntas y un botón de enviar normal; la pantalla final no aplica */
.hi:not(.hi-js) .hi-nav, .hi:not(.hi-js) [data-hi-final], .hi:not(.hi-js) .hi-barra, .hi:not(.hi-js) .hi-cabeza,
.hi:not(.hi-js) .hi-tecla { display: none !important; }
.hi:not(.hi-js) .hi-paso + .hi-paso { margin-top: 48px; }
.hi.hi-js .hi-sinjs { display: none; }
.hi-sinjs { margin-top: 40px; }
/* Barra de avance */
.hi-barra { height: 6px; border-radius: 3px; overflow: hidden; }
.hi-barra > span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .6s var(--hi-curva); }
/* Cada pantalla ocupa lo mismo de alto, para que los botones no brinquen de lugar */
.hi-js .hi-paso { display: flex; flex-direction: column; min-height: 380px; }
.hi-js .hi-paso > .hi-nav { margin-top: auto; padding-top: 36px; }
.hi-js .hi-resultado { min-height: 0; }
.hi-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
/* En las pantallas de opción múltiple elegir ya avanza: el botón Continuar sobra y se esconde; queda Atrás
(Carlos, 9 oct 2026: "solo en las que se necesite el botón se ponga"). Sin JavaScript sigue visible. */
.hi-js .hi-paso[data-hi-auto] > .hi-nav [data-hi-sig] { display: none; }
/* Lista desplegable propia (pasos.js, función lista): tamaño de lectura normal, buscador, la elegida marcada. */
.hi .hi-desp { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; padding: 8px; border: 1px solid rgba(20, 30, 45, .12); border-radius: 14px; background: #fff; box-shadow: 0 18px 48px rgba(10, 20, 40, .18); font-size: 17px; line-height: 1.3; text-align: left; }
.hi.hi-js .hi-desp input.hi-desp-buscar { display: block; width: 100% !important; box-sizing: border-box; height: auto !important; margin: 0 0 6px !important; padding: 12px 14px !important; border: 1.5px solid rgba(20, 30, 45, .15) !important; border-radius: 10px !important; background: #f5f7fa !important; font: inherit !important; font-size: 16px !important; color: #141e2d !important; }
.hi.hi-js .hi-desp input.hi-desp-buscar:focus { outline: none !important; border-color: var(--hi-acento, #0057f4) !important; background: #fff !important; }
.hi .hi-desp-ul { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; outline: none; overscroll-behavior: contain; }
.hi .hi-desp .hi-desp-ul li { position: relative; margin: 0; padding: 11px 40px 11px 14px !important; border-radius: 9px; color: #141e2d; cursor: pointer; }
.hi .hi-desp-ul li.hi-desp-activo { background: rgba(0, 87, 244, .08); }
.hi .hi-desp-ul li[aria-selected="true"] { font-weight: 700; }
.hi .hi-desp-ul li[aria-selected="true"]::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 12px; margin-top: -8px; border: solid var(--hi-acento, #0057f4); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.hi .hi-desp-ul li.hi-desp-nada { color: #6b7280; cursor: default; }
/* Entrada y salida de una pantalla */
.hi-js .hi-paso { transition: opacity .45s var(--hi-curva), transform .6s var(--hi-curva); }
.hi-js .hi-paso.hi-entra { opacity: 0; transform: translate3d(0, 28px, 0); transition: none; }
.hi-js[data-hi-dir="atras"] .hi-paso.hi-entra { transform: translate3d(0, -28px, 0); }
.hi-js .hi-paso.hi-sale { opacity: 0; transform: translate3d(0, -18px, 0); transition: opacity .2s ease, transform .2s ease; }
.hi-js[data-hi-dir="atras"] .hi-paso.hi-sale { transform: translate3d(0, 18px, 0); }
/* Las opciones entran una tras otra */
.hi-js .hi-paso .hi-opciones > label { transition: opacity .4s var(--hi-curva), transform .55s var(--hi-curva);
transition-delay: calc(var(--hi-i, 0) * 50ms + 90ms); }
.hi-js .hi-paso.hi-entra .hi-opciones > label { opacity: 0; transform: translate3d(0, 16px, 0); transition: none; }
/* Al elegir, las demás opciones se apagan un instante antes de pasar a la siguiente */
.hi-js .hi-paso.hi-elegido .hi-opciones > label:not(:has(input:checked)) { opacity: .35; transition-delay: 0s; transition-duration: .2s; }
/* ---- Pantalla completa: en la página solo la portada; al abrir, una pregunta sola ocupa toda la pantalla ---- */
.hi-portada, .hi-cerrar { display: none; }
.hi-js[data-hi-pantalla]:not(.hi-pantalla) > :not(.hi-portada) { display: none !important; }
.hi-js[data-hi-pantalla]:not(.hi-pantalla) > .hi-portada { display: block; }
.hi-portada-b { margin-top: 32px; }
html.hi-bloqueo, html.hi-bloqueo body { overflow: hidden !important; }
.hi.hi-pantalla { position: fixed !important; inset: 0 !important; z-index: 2147483000; width: auto !important; max-width: none !important; margin: 0 !important;
border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; overflow-y: auto; overscroll-behavior: contain;
-webkit-overflow-scrolling: touch; background: var(--hi-fondo, #fff); animation: hi-abrir .45s var(--hi-curva); }
@keyframes hi-abrir { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
.hi.hi-pantalla::before { display: none !important; }
.hi-pantalla .hi-barra { position: fixed; top: 0; left: 0; right: 0; z-index: 4; height: 5px; margin: 0 !important; border-radius: 0; }
.hi-pantalla .hi-barra > span { border-radius: 0; }
.hi-pantalla .hi-cabeza { position: sticky; top: 0; z-index: 3; margin: 0 !important; padding: 22px 76px 14px 24px; min-height: 0; background: var(--hi-fondo, #fff); }
.hi-pantalla .hi-retomar { max-width: 820px; margin: 0 auto !important; padding: 0 24px; }
.hi.hi-pantalla .hi-paso { width: 100%; max-width: 820px; margin: 0 auto; padding: 24px 24px 48px; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); justify-content: center; }
.hi.hi-pantalla .hi-paso > .hi-nav { margin-top: 0; padding-top: 44px; }
.hi.hi-pantalla .hi-resultado, .hi.hi-pantalla .hi-descarga { justify-content: flex-start; padding-top: 32px; min-height: 0; }
.hi-pantalla .hi-sinjs { display: none; }
.hi-pantalla .hi-cerrar { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 12px; right: 14px; z-index: 5; width: 46px; height: 46px;
border: 0; border-radius: 50%; background: rgba(20, 30, 45, .06); color: var(--hi-texto, #141e2d); cursor: pointer; transition: background-color .2s; }
.hi-cerrar::before { content: ""; width: 20px; height: 20px; background: currentColor;
-webkit-mask: var(--hi-equis) center / contain no-repeat; mask: var(--hi-equis) center / contain no-repeat; }
@media (hover: hover) { .hi-pantalla .hi-cerrar:hover { background: rgba(20, 30, 45, .12); } }
.hi-pantalla .hi-cerrar:focus-visible { outline: 3px solid var(--hi-acento, #0057f4); outline-offset: 2px; }
/* La X: "x" de Phosphor Regular */
.hi { --hi-equis: url("data:image/svg+xml;utf8,"); }
@media (max-width: 640px) {
.hi-pantalla .hi-cabeza { padding: 18px 70px 10px 20px; }
.hi.hi-pantalla .hi-paso { padding: 5vh 20px 0; justify-content: flex-start; min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px); }
.hi.hi-pantalla .hi-paso > .hi-nav { position: sticky; bottom: 0; margin-top: auto; padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--hi-fondo, #fff) 24%); }
.hi.hi-pantalla .hi-resultado, .hi.hi-pantalla .hi-descarga { padding-bottom: 40px; }
}
/* ---- Respuesta escrita: la pregunta es el título y se contesta en grande sobre una línea, sin casilla de formulario ---- */
.hi.hi-js .hi-campo-grande { max-width: 680px !important; width: 100%; gap: 0; }
.hi.hi-js .hi-campo-grande input, .hi.hi-js .hi-campo-grande select { width: 100%; min-height: 0 !important; height: auto !important; padding: 6px 0 12px !important;
border: 0 !important; border-bottom: 2px solid #c9d3e3 !important; border-radius: 0 !important; background-color: transparent !important; box-shadow: none !important;
font-family: var(--hi-fuente-num, inherit) !important; font-weight: 300 !important; font-size: clamp(26px, 3.4vw, 38px) !important; line-height: 1.25 !important;
color: var(--hi-texto, #141e2d) !important; transition: border-color .25s; }
.hi.hi-js .hi-campo-grande select { padding-right: 44px !important; background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50% !important; }
.hi.hi-js .hi-campo-grande input:focus, .hi.hi-js .hi-campo-grande select:focus { outline: none !important; border-bottom-color: var(--hi-acento, #0057f4) !important; }
.hi.hi-js .hi-campo-grande input::placeholder { color: #b9c3d3; opacity: 1; }
.hi.hi-js [data-hi-invalido].hi-campo-grande input, .hi.hi-js [data-hi-invalido].hi-campo-grande select { border-bottom-color: #c62828 !important; }
.hi.hi-js .hi-campo-grande .hi-opcional { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--hi-texto-2, #465063); }
/* ---- Deslizador de las preguntas de número (pasos.js, deslizador()). El color lo pone cada marca con --hi-acento
y la letra del número con --hi-fuente-num. ---- */
.hi .hi-num-oculto { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important;
border: 0 !important; opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.hi .hi-campo-numero { max-width: 640px !important; width: 100%; }
.hi-desliza { width: 100%; max-width: 640px; user-select: none; -webkit-user-select: none; }
.hi-desliza-num { display: flex; align-items: baseline; gap: 14px; min-height: 1em; font-family: var(--hi-fuente-num, inherit); font-weight: 300;
font-size: clamp(84px, 13vw, 132px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #b9c3d3; transition: color .3s; }
.hi-desliza-cifra { display: inline-block; transform-origin: left 80%; }
.hi-desliza-mas { font-size: .26em; font-weight: 700; letter-spacing: 0; opacity: 0; transform: translateX(-8px); transition: opacity .25s, transform .35s var(--hi-curva); }
.hi-desliza-tope .hi-desliza-mas { opacity: 1; transform: none; }
.hi-desliza-tocado .hi-desliza-num { color: var(--hi-num, var(--hi-acento, #0057f4)); }
.hi-desliza-unidad { margin: 6px 0 26px; font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--hi-texto-2, #465063); }
.hi-desliza-fila { display: flex; align-items: center; gap: 14px; }
.hi-desliza-btn { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #cfd6e2; background: #fff; color: var(--hi-texto, #141e2d);
font: 400 28px/1 Arial, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 2px;
transition: transform .15s ease, border-color .2s, background-color .2s; -webkit-tap-highlight-color: transparent; }
.hi-desliza-btn:active { transform: scale(.9); }
@media (hover: hover) { .hi-desliza-btn:hover { border-color: var(--hi-acento, #0057f4); } }
.hi-desliza-rango { flex: 1 1 auto; min-width: 0; height: 52px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
/* Los campos de texto de los sitios le ponen marco, alto y relleno a todo input: aquí se quitan */
.hi .hi-desliza .hi-desliza-rango { border: 0 !important; border-radius: 0 !important; min-height: 0 !important; padding: 0 !important; box-shadow: none !important;
background: transparent !important; width: auto !important; font-size: inherit !important; }
.hi-desliza-rango:focus { outline: none; }
.hi-desliza-rango:focus-visible { outline: 3px solid var(--hi-acento, #0057f4); outline-offset: 4px; border-radius: 8px; }
.hi-desliza-rango::-webkit-slider-runnable-track { height: 12px; border-radius: 6px;
background: linear-gradient(90deg, var(--hi-acento, #0057f4) var(--hi-lleno, 0%), #e1e6ee var(--hi-lleno, 0%)); }
.hi-desliza-rango::-moz-range-track { height: 12px; border-radius: 6px; background: #e1e6ee; }
.hi-desliza-rango::-moz-range-progress { height: 12px; border-radius: 6px; background: var(--hi-acento, #0057f4); }
.hi-desliza-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; margin-top: -13px; border-radius: 50%; background: #fff;
border: 3px solid var(--hi-acento, #0057f4); box-shadow: 0 6px 16px -4px rgba(20, 30, 45, .45); transition: transform .2s var(--hi-curva); }
.hi-desliza-rango::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--hi-acento, #0057f4); box-shadow: 0 6px 16px -4px rgba(20, 30, 45, .45); }
.hi-desliza-rango:active::-webkit-slider-thumb { transform: scale(1.18); }
.hi-desliza:not(.hi-desliza-tocado) .hi-desliza-rango::-webkit-slider-runnable-track { background: #e1e6ee; }
.hi-desliza:not(.hi-desliza-tocado) .hi-desliza-rango::-webkit-slider-thumb { animation: hi-llama 1.6s ease-in-out .6s 2; }
@keyframes hi-llama { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(10px); } 60% { transform: translateX(-4px); } }
.hi-desliza-extremos { display: flex; justify-content: space-between; margin: 6px 66px 0; font-size: 14px; color: var(--hi-texto-2, #465063); }
[data-hi-invalido] .hi-desliza-rango::-webkit-slider-thumb { border-color: #c62828; }
@media (max-width: 640px) {
.hi-desliza-fila { gap: 8px; }
.hi-desliza-btn { width: 44px; height: 44px; font-size: 24px; }
.hi-desliza-extremos { margin: 6px 52px 0; }
.hi-desliza-unidad { margin-bottom: 20px; }
}
/* El consentimiento lleva su casilla con palomita a la vista (Carlos, 9 oct 2026: "este con checkmark", en todos).
La palomita es el "check" de Phosphor Regular, la misma copia local de los íconos de las dos marcas. */
.hi { --hi-palomita: url("data:image/svg+xml;utf8,"); }
.hi .asx-consent > span { position: relative; padding-left: 56px; }
.hi .asx-consent > span::before, .hi .fsx-consent::before { content: ""; position: absolute; width: 24px; height: 24px; border-radius: 6px; border: 2px solid #b9c3d3; background: #fff; transition: border-color .2s; }
.hi .asx-consent > span::after, .hi .fsx-consent::after { content: ""; position: absolute; width: 18px; height: 18px;
-webkit-mask: var(--hi-palomita) center / contain no-repeat; mask: var(--hi-palomita) center / contain no-repeat;
transform: scale(0); transition: transform .3s var(--hi-curva); }
.hi .asx-consent > span::before { left: 18px; top: 14px; }
.hi .asx-consent > span::after { left: 23px; top: 19px; background: var(--asx-azul-fuerte, #0057f4); }
.hi .asx-consent input:checked + span::before { border-color: #fff; }
.hi .asx-consent input:checked + span::after { transform: scale(1); }
.hi .fsx-consent { padding-left: 58px; }
.hi .fsx-consent::before { left: 18px; top: 16px; }
.hi .fsx-consent::after { left: 23px; top: 21px; background: var(--fsx-m, #0f1e3f); }
.hi .fsx-consent:has(input:checked)::before { border-color: #fff; }
.hi .fsx-consent:has(input:checked)::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
.hi *, .hi *::before, .hi *::after, .hi.hi-js .hi-paso { transition: none !important; animation: none !important; }
.hi-js .hi-paso.hi-entra, .hi-js .hi-paso.hi-entra .hi-opciones > label { opacity: 1; transform: none; }
}
@media (max-width: 640px) {
.hi-js .hi-paso { min-height: 0; }
/* La caja del modo de prueba: el dato abajo de su nombre */
.hi .hi-prueba dl { grid-template-columns: 1fr !important; gap: 0 !important; }
.hi .hi-prueba dd { margin: 0 0 8px; overflow-wrap: anywhere; }
}
/* Test de Ascendia: la marca, encima de base.css y formulario.css de Ascendia
(B:\Impacto\N8N\CLAUDE CODE\Funsys\embudos\04-pruebas-visuales-ghl\ascendia\_comun\) y de comun/pasos.css.
Colores, letras y curva: las variables de .asx (guía de uso de Ascendia, 18 sep 2026). */
.hi-asx { --hi-curva: var(--asx-curva); --hi-acento: var(--asx-azul-fuerte); --hi-fuente-num: var(--asx-titulo); --hi-texto: var(--asx-texto); --hi-texto-2: var(--asx-texto-2); }
.hi-asx.asx-form::before { display: none; }
/* Portada en la página (lo único que se ve hasta picar el botón) */
.hi-asx .hi-portada-et { font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--asx-azul-fuerte); margin-bottom: 12px; }
.hi-asx .hi-portada-t { font-family: var(--asx-titulo); font-weight: 300; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; letter-spacing: -.01em; color: var(--asx-texto); text-wrap: balance; }
.hi-asx .hi-portada-x { margin-top: 16px; font-size: 20px; line-height: 1.5; color: var(--asx-texto-2); max-width: 640px; }
.hi-asx .hi-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 26px; margin-bottom: 14px; }
.hi-asx .hi-cuenta { font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--asx-azul-fuerte); }
.hi-asx .hi-barra { background: #e4e9f1; margin-bottom: 40px; }
.hi-asx .hi-barra > span { background: var(--asx-degradado); }
.hi-asx .hi-retomar { margin: -24px 0 28px; font-size: 16px; color: var(--asx-texto-2); }
/* Los puntos de los indicadores: se llenan con cada uno que conoce. Solo durante el test. */
.hi-asx .hi-puntos { display: none; gap: 8px; }
.hi-asx[data-hi-grupo="test"] .hi-puntos { display: flex; }
.hi-asx .hi-puntos span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #c9d3e3; transition: background-color .3s, border-color .3s, transform .4s var(--asx-curva); }
.hi-asx .hi-puntos span[data-estado="si"] { background: var(--asx-azul-fuerte); border-color: var(--asx-azul-fuerte); transform: scale(1.15); }
.hi-asx .hi-puntos span[data-estado="no"] { background: #c9d3e3; border-color: #c9d3e3; }
/* La pregunta */
.hi-asx .hi-campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.hi-asx .hi-q { display: block; font-family: var(--asx-titulo); font-weight: 300; font-size: clamp(30px, 3vw, 42px); line-height: 1.12; letter-spacing: -.01em;
color: var(--asx-texto); margin-bottom: 32px; padding: 0; outline: none; text-wrap: balance; }
.hi-asx .hi-q label { font: inherit; color: inherit; }
.hi-asx .hi-q:focus-visible { outline: 3px solid var(--asx-azul-claro); outline-offset: 6px; }
/* Opciones grandes, una por renglón cuando son muchas o largas */
.hi-asx .hi-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hi-asx .hi-opciones-lista { grid-template-columns: 1fr; gap: 12px; }
.hi-asx .hi-opciones .asx-opcion span.hi-opcion-t { display: inline; min-height: 0; width: auto; padding: 0; border: 0; background: none; box-shadow: none; font-size: inherit; color: inherit; transition: none; animation: none; transform: none !important; }
/* El HUECO de la cifra, en línea con el texto (el estilo de .asx-opcion span lo volvía caja) */
.hi-asx .hi-opciones .asx-opcion span.asx-pend { display: inline-block; width: auto; min-height: 0; padding: 1px 8px; margin: 0 2px; border: 0; border-radius: 4px;
background: var(--asx-amarillo); color: var(--asx-negro); box-shadow: none; font-size: .78em; line-height: 1.5; transform: none !important; animation: none; }
.hi-asx .hi-opciones .asx-opcion > span { min-height: 66px; gap: 16px; font-size: 20px; padding: 14px 22px; }
.hi-asx .hi-tecla { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 7px;
border: 1.5px solid #cfd6e2; font-family: var(--asx-cuerpo); font-size: 14px; font-weight: 700; color: var(--asx-texto-2); line-height: 1; }
.hi-asx .asx-opcion input:checked + span .hi-tecla { border-color: rgba(255,255,255,.5); color: #fff; }
@media (hover: none) { .hi-asx .hi-tecla { display: none; } }
/* Campos de texto */
.hi-asx .hi-campo-grande { max-width: 560px; }
.hi-asx .hi-campo-numero { max-width: 260px; }
.hi-asx .hi-campo-numero input { min-height: 72px !important; font-family: var(--asx-titulo) !important; font-weight: 300 !important; font-size: 36px !important; }
.hi-asx .hi-ayuda { font-size: 16px; color: var(--asx-texto-2); }
.hi-asx .hi-opcional { font-weight: 300; color: var(--asx-texto-2); }
.hi-asx [data-hi-invalido] input:not([type=radio]):not([type=checkbox]), .hi-asx [data-hi-invalido] select,
.hi-asx [data-hi-invalido] .asx-opcion > span, .hi-asx [data-hi-invalido] .asx-consent > span { border-color: #c62828; }
.hi-asx .hi-campo .asx-error { margin-top: 12px; }
.hi-asx .asx-consent { margin-top: 28px; }
/* Botones */
.hi-asx .hi-nav .asx-boton .asx-ico, .hi-asx .hi-nav .asx-boton-sec .asx-ico { font-size: 20px; }
.hi-asx .hi-atras { min-height: 52px; }
/* ---- Resultado ---- */
.hi-asx .hi-etiqueta { font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--asx-azul-fuerte); margin-bottom: 12px; }
.hi-asx .hi-medidor-t { margin-bottom: 22px; }
.hi-asx .hi-segmentos { display: flex; gap: 8px; margin-bottom: 20px; }
.hi-asx .hi-segmentos span { flex: 1 1 0; height: 12px; border-radius: 6px; background: #e4e9f1; position: relative; overflow: hidden; }
.hi-asx .hi-segmentos span::after { content: ""; position: absolute; inset: 0; background: var(--asx-degradado); transform: scaleX(0); transform-origin: left center;
transition: transform .5s var(--asx-curva); transition-delay: calc(var(--hi-i, 0) * 160ms + 420ms); }
.hi-asx .hi-terminado .hi-segmentos span.hi-lleno::after, .hi-asx.hi-terminado .hi-segmentos span.hi-lleno::after { transform: scaleX(1); }
.hi-asx .hi-lectura { font-size: 22px; line-height: 1.45; color: var(--asx-texto); }
.hi-asx .hi-lista { margin-top: 36px; border-top: 1px solid var(--asx-borde); }
.hi-asx .hi-lista li { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--asx-borde); font-size: 18px; }
.hi-asx .hi-lista-ico { font-size: 26px; display: flex; }
.hi-asx .hi-lista-ico .asx-ico { display: none; }
.hi-asx .hi-lista li[data-estado="si"] .hi-i-si { display: block; color: var(--asx-azul-fuerte); }
.hi-asx .hi-lista li[data-estado="no"] .hi-i-no { display: block; color: var(--asx-gris); }
.hi-asx .hi-lista li[data-estado="nose"] .hi-i-nose { display: block; color: var(--asx-gris); }
.hi-asx .hi-lista-estado { font-size: 16px; color: var(--asx-texto-2); text-align: right; }
.hi-asx .hi-lista li[data-estado="si"] .hi-lista-estado { color: var(--asx-azul-fuerte); font-weight: 700; }
.hi-asx .hi-recos, .hi-asx .hi-sigue { margin-top: 48px; }
.hi-asx .hi-recos .asx-h3, .hi-asx .hi-sigue .asx-h3 { margin-bottom: 20px; }
.hi-asx .hi-recos-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.hi-asx .hi-reco { display: flex; flex-direction: column; gap: 16px; padding: 30px; border-top: 4px solid transparent; border-image: linear-gradient(90deg, #0095f3, #0057f4) 1 0 0 0; border-radius: 0 0 16px 16px; }
.hi-asx .hi-reco-nom { font-family: var(--asx-titulo); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--asx-texto); }
.hi-asx .hi-reco dl { display: grid; gap: 4px; }
.hi-asx .hi-reco dt { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--asx-azul-fuerte); margin-top: 10px; }
.hi-asx .hi-reco dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--asx-texto-2); }
.hi-asx .hi-reco-liga { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: var(--asx-azul-fuerte); text-decoration: none; }
.hi-asx .hi-sigue ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; }
.hi-asx .hi-sigue li { display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 1.45; }
.hi-asx .hi-sigue-n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--asx-azul-claro); font-weight: 700; font-size: 16px; color: var(--asx-azul-fuerte); }
.hi-asx .hi-expo { margin-top: 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 32px 36px; border-radius: 16px; background: var(--asx-marino); color: #fff; }
.hi-asx .hi-expo-t { display: flex; align-items: center; gap: 12px; font-family: var(--asx-titulo); font-weight: 400; font-size: 26px; line-height: 1.2; }
.hi-asx .hi-expo-t .asx-ico { font-size: 28px; color: var(--asx-azul-claro); }
.hi-asx .hi-expo-x { margin-top: 8px; font-size: 18px; color: var(--asx-claro-2); }
.hi-asx .hi-despues { margin-top: 40px; font-size: 20px; }
.hi-asx .hi-prueba { margin-top: 40px; }
/* Entrada escalonada del resultado */
.hi-asx .hi-resultado > * { transition: opacity .5s var(--asx-curva), transform .6s var(--asx-curva); }
.hi-asx .hi-resultado > :nth-child(2) { transition-delay: .05s; }
.hi-asx .hi-resultado > :nth-child(3) { transition-delay: .25s; }
.hi-asx .hi-resultado > :nth-child(4) { transition-delay: .4s; }
.hi-asx .hi-resultado > :nth-child(n+5) { transition-delay: .55s; }
.hi-asx .hi-resultado.hi-entra > * { opacity: 0; transform: translate3d(0, 20px, 0); transition: none; }
@media (max-width: 900px) {
.hi-asx .hi-sigue ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hi-asx .hi-expo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.hi-asx .hi-q { font-size: 28px; margin-bottom: 24px; }
.hi-asx .hi-barra { margin-bottom: 28px; }
.hi-asx .hi-opciones { grid-template-columns: 1fr; gap: 10px; }
.hi-asx .hi-opciones .asx-opcion > span { min-height: 58px; font-size: 18px; padding: 12px 18px; }
.hi-asx .hi-nav { gap: 12px; }
.hi-asx .hi-nav .asx-boton, .hi-asx .hi-nav .asx-boton-sec { width: auto; flex: 1 1 0; min-width: 0; padding: 0 14px; justify-content: center; }
.hi-asx .hi-nav > span:empty { display: none; }
.hi-asx .hi-lista li { grid-template-columns: 28px 1fr; font-size: 17px; }
.hi-asx .hi-lista-estado { grid-column: 2; text-align: left; font-size: 15px; margin-top: -8px; }
.hi-asx .hi-sigue ol { grid-template-columns: 1fr; gap: 16px; }
.hi-asx .hi-sigue li { flex-direction: row; align-items: center; }
.hi-asx .hi-sigue-n { flex: none; }
.hi-asx .hi-reco { padding: 24px 22px; }
.hi-asx .hi-expo { padding: 26px 22px; }
.hi-asx .hi-expo .asx-boton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.hi-asx .hi-segmentos span::after { transition: none !important; }
.hi-asx .hi-resultado.hi-entra > * { opacity: 1; transform: none; }
}
/* Medidor de potencial (Carlos, 9 oct 2026): el isotipo de Ascendia con sombra, que se llena de abajo hacia arriba.
La sombra va en la caja de afuera; la forma, en la de adentro (un filtro dentro de la máscara se recortaría). */
.hi-asx .hi-potencial { display: flex; align-items: center; gap: 18px; margin: -16px 0 28px; padding: 14px 18px; border-radius: 14px; background: #f3f7ff; }
.hi-asx .hi-potencial[hidden] { display: none; }
.hi-asx .hi-pot-iso { flex: none; width: 46px; height: 62px; filter: drop-shadow(0 6px 10px rgba(0, 87, 244, .35)); }
.hi-asx .hi-pot-mask { position: relative; width: 100%; height: 100%; overflow: hidden;
-webkit-mask: var(--hi-iso) no-repeat center / contain; mask: var(--hi-iso) no-repeat center / contain; }
.hi-asx .hi-pot-base { position: absolute; inset: 0; background: rgba(0, 87, 244, .16); }
.hi-asx .hi-pot-lleno { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, var(--asx-azul-fuerte), var(--asx-azul-claro)); transition: height .6s var(--asx-curva); }
.hi-asx .hi-pot-et { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--asx-texto-2); }
.hi-asx .hi-pot-num { margin-top: 2px; line-height: 1; }
.hi-asx .hi-pot-num b { font-family: var(--asx-titulo); font-weight: 300; font-size: 30px; color: var(--asx-azul-fuerte); font-variant-numeric: tabular-nums; }
.hi-asx .hi-pot-num span { margin-left: 4px; font-size: 15px; color: var(--asx-texto-2); }
.hi-asx .hi-pot-lectura { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--asx-texto); min-height: 1.2em; }
.hi-asx .hi-pot-correo { margin-top: 16px; font-size: 18px; font-weight: 700; color: var(--asx-azul-fuerte); }
/* En pantalla completa y con espacio, el medidor se queda a la derecha, grande, a media altura. */
@media (min-width: 1280px) {
.hi-asx.hi-pantalla .hi-potencial { position: fixed; right: clamp(32px, 5vw, 96px); top: 50%; transform: translateY(-50%); z-index: 5;
flex-direction: column; width: 220px; margin: 0; padding: 0; background: transparent; text-align: center; }
.hi-asx.hi-pantalla .hi-pot-iso { width: 132px; height: 176px; filter: drop-shadow(0 18px 28px rgba(0, 87, 244, .35)); }
.hi-asx.hi-pantalla .hi-pot-num { margin-top: 6px; }
.hi-asx.hi-pantalla .hi-pot-num b { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) { .hi-asx .hi-pot-lleno { transition: none; } }
/* Resultado corto (Carlos, 9 oct 2026): el potencial en grande con el isotipo lleno, los huecos y la demo. El resto va por correo. */
.hi-asx .hi-r-hero { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: clamp(24px, 5vw, 64px); }
.hi-asx .hi-r-hero .hi-r-titulo { margin-top: 6px; }
.hi-asx .hi-r-num { margin-top: 14px; line-height: .9; }
.hi-asx .hi-r-num b { font-family: var(--asx-titulo); font-weight: 300; font-size: clamp(72px, 11vw, 128px); letter-spacing: -.03em; color: var(--asx-azul-fuerte); font-variant-numeric: tabular-nums; }
.hi-asx .hi-r-num span { margin-left: 8px; font-size: clamp(20px, 2.4vw, 28px); color: var(--asx-texto-2); }
.hi-asx .hi-r-pot-lectura { margin-top: 14px; font-size: 22px; font-weight: 700; color: var(--asx-texto); min-height: 1.2em; }
.hi-asx .hi-r-hero .hi-pot-correo { margin-top: 10px; font-weight: 600; font-size: 18px; }
.hi-asx .hi-r-iso { width: clamp(120px, 16vw, 190px); height: clamp(160px, 21vw, 254px); filter: drop-shadow(0 22px 34px rgba(0, 87, 244, .38)); }
.hi-asx .hi-r-iso .hi-pot-lleno { transition: height 1.1s var(--asx-curva); }
.hi-asx .hi-huecos { margin-top: 44px; }
.hi-asx .hi-huecos-t { font-family: var(--asx-titulo); font-size: 22px; font-weight: 700; color: var(--asx-texto); }
.hi-asx .hi-huecos .hi-lista { margin-top: 14px; }
.hi-asx .hi-huecos .hi-lista[hidden] { display: none; }
.hi-asx .hi-huecos-nada { margin-top: 12px; font-size: 18px; color: var(--asx-texto-2); }
.hi-asx .hi-huecos ~ .hi-expo { margin-top: 40px; }
.hi-asx .hi-recos .hi-huecos-t, .hi-asx .hi-sigue .hi-huecos-t { margin-bottom: 20px; }
.hi-asx .hi-recos .hi-reco { padding: 22px 0 0; }
@media (max-width: 640px) {
.hi-asx .hi-r-hero { gap: 18px; }
.hi-asx .hi-r-iso { width: 84px; height: 112px; align-self: start; margin-top: 40px; }
.hi-asx .hi-r-pot-lectura { font-size: 19px; }
}
/* Formularios de registro de los sitios (comun\registro.mjs): lo que no traen pasos.css, test.css ni registro.css
de la infografía. Va después de ellos. Sirve a los dos sitios (hi-asx y hi-fsx). */
.hi-registro .hi-fin { min-height: 0; }
.hi-registro .hi-campos, .hi-registro .asx-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.hi-registro .asx-ancho, .hi-registro .fsx-ancho { grid-column: 1 / -1; }
.hi-registro .fsx-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.hi-registro .hi-agenda-x { margin: -8px 0 24px; font-size: 18px; line-height: 1.5; }
.hi-asx.hi-registro .hi-agenda-x { color: var(--asx-texto-2); }
.hi-fsx.hi-registro .hi-agenda-x { color: var(--fsx-texto2); }
/* La agenda de GoHighLevel: el alto lo ajusta su form_embed.js; este es el mínimo mientras carga. */
.hi-registro .hi-agenda-marco { margin: 0 -8px; }
.hi-registro .hi-agenda-marco iframe { display: block; width: 100%; min-height: 720px; border: 0; }
.hi-registro .hi-agenda-abrir { margin-top: 16px; font-size: 16px; }
.hi-registro .hi-agenda-abrir a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.hi-asx.hi-registro .hi-agenda-abrir a { color: var(--asx-azul-fuerte); }
.hi-fsx.hi-registro .hi-agenda-abrir a { color: var(--fsx-p); }
.hi-registro .hi-agenda-abrir svg { width: 18px; height: 18px; }
.hi-registro .hi-despues { margin-top: 8px; font-size: 20px; line-height: 1.5; }
.hi-registro .hi-prueba { margin-top: 32px; }
/* Descargas y mensajes de la pantalla final */
.hi-registro .hi-fin-x { margin: -8px 0 28px; font-size: 18px; line-height: 1.5; }
.hi-registro .hi-fin-botones { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
@media (max-width: 640px) {
.hi-registro .hi-campos, .hi-registro .asx-campos, .hi-registro .fsx-campos { grid-template-columns: 1fr; }
.hi-registro .hi-agenda-marco { margin: 0 -12px; }
.hi-registro .hi-agenda-marco iframe { min-height: 1000px; }
}
/* Lo que el sitio agrega a los estilos de la landing del stand de Ascendia (_comun\base.css y formulario.css).
Mismos colores, tipografías y componentes de la guía; aquí solo van el menú, las cabeceras de página interior,
el pie y los bloques que la landing no tiene. Nada de Funsys. */
html,body{margin:0;padding:0;background:#fff}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.asx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* ---- Menú: banda marina fija arriba ---- */
.asx-nav{position:sticky;top:0;z-index:50;background:var(--asx-marino);border-bottom:1px solid rgba(255,255,255,.08)}
.asx-nav .asx-in{display:flex;align-items:center;gap:28px;min-height:84px}
.asx-nav .asx-logo{width:176px;flex:none}
.asx-nav .asx-logo a{display:block}
/* El logo va como imagen: se escala por su ancho, nunca por los 188 px de su atributo height */
.asx-logo img{display:block;width:100%;height:auto}
.asx-menu{display:flex;align-items:center;gap:6px;margin-left:auto}
.asx-menu a:not(.asx-boton){display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;color:var(--asx-claro-2);font-size:17px;font-weight:400;text-decoration:none;transition:color .2s,background-color .2s}
.asx-menu a[aria-current="page"]{color:#fff;font-weight:700}
@media (hover:hover){.asx-menu a:not(.asx-boton):hover{color:#fff;background:rgba(255,255,255,.06)}}
.asx-menu .asx-boton{min-height:48px;padding:0 22px;font-size:17px;margin-left:10px;box-shadow:none}
.asx-abrir{display:none;margin-left:auto;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:transparent;color:#fff;font-size:26px;cursor:pointer}
.asx-abrir .asx-cerrar{display:none}
.asx-nav[data-abierto] .asx-abrir .asx-abre{display:none}
.asx-nav[data-abierto] .asx-abrir .asx-cerrar{display:block}
/* ---- Cabecera de las páginas interiores: banda marina con el isotipo recortado ---- */
.asx-cab{position:relative;background:var(--asx-marino);color:#fff;overflow:hidden}
.asx-cab .asx-in{position:relative;z-index:1;padding-top:88px;padding-bottom:96px}
.asx-cab .asx-h1{max-width:820px}
.asx-cab .asx-hero-vis{bottom:0;width:34%}
.asx-cab .asx-hero-vis .asx-iso{height:128%;right:-16%}
.asx-volver{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:18px;color:var(--asx-claro-2);font-size:17px;text-decoration:none}
.asx-volver .asx-ico{transform:rotate(180deg)}
@media (hover:hover){.asx-volver:hover{color:#fff}}
/* Hero de Inicio: el isotipo completo y centrado en su espacio, no recortado contra la orilla (Carlos, 9 oct 2026).
En teléfono se queda como estaba: tenue detrás del texto. */
@media (min-width:901px){
.asx-hero > .asx-hero-vis .asx-iso{right:auto;left:50%;height:78%;transform:translate(-50%,-50%)}
/* El isotipo vive dentro del ancho del contenido, no pegado a la orilla de la pantalla: en monitores anchos
se quedaba hasta la derecha y recortado (Carlos, 9 oct 2026, encabezados de las páginas interiores).
1264px es el ancho de .asx-in y 32px su margen. */
.asx-hero > .asx-hero-vis{right:max(0px,calc((100% - 1264px) / 2 + 32px));width:min(44%,560px)}
.asx-cab .asx-hero-vis{top:0;bottom:0;right:max(0px,calc((100% - 1264px) / 2 + 32px));width:min(34%,380px)}
.asx-cab .asx-hero-vis .asx-iso{right:auto;left:50%;top:50%;height:74%;transform:translate(-50%,-50%)}
}
/* El hero de Inicio lleva dos botones: el secundario va en claro sobre el marino */
.asx-boton-claro{border-color:#fff;color:#fff}
@media (hover:hover){.asx-boton-claro:hover{background:#fff;color:var(--asx-marino)}}
/* ---- Tarjetas de servicio con liga ---- */
.asx-servicio .asx-liga{margin-top:auto}
.asx-liga{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;font-size:18px;color:var(--asx-azul-fuerte);text-decoration:none}
.asx-liga .asx-ico{font-size:20px;transition:transform .3s var(--asx-curva)}
@media (hover:hover){.asx-liga:hover .asx-ico{transform:translateX(4px)}}
.asx-servicio-para{font-size:17px;color:var(--asx-texto-2)}
.asx-servicio-nom{font-size:16px;font-weight:700;letter-spacing:.02em;color:var(--asx-azul-fuerte)}
.asx-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
/* ---- Páginas de servicio ---- */
.asx-bloque-t{font-family:var(--asx-titulo);font-weight:400;font-size:30px;line-height:1.15;color:var(--asx-texto);margin-bottom:22px}
.asx-incluye{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
.asx-incluye li{display:flex;gap:14px;align-items:flex-start;font-size:20px}
.asx-incluye .asx-ico{font-size:24px;color:var(--asx-azul-fuerte);margin-top:3px}
.asx-cita{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(26px,2.6vw,34px);line-height:1.25;color:var(--asx-texto)}
.asx-cita-nota{margin-top:18px;color:var(--asx-texto-2)}
.asx-resultado{display:flex;gap:20px;align-items:flex-start}
.asx-resultado p{font-size:22px;line-height:1.5}
.asx-oscura .asx-pasos{margin-top:48px}
/* ---- Caso destacado y casos ---- */
.asx-metricas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.asx-metrica{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:14px;background:var(--asx-suave);border:1px solid var(--asx-borde)}
.asx-metrica dt{font-size:17px;font-weight:700;color:var(--asx-texto-2)}
.asx-metrica dd{font-family:var(--asx-titulo);font-weight:300;font-size:30px;color:var(--asx-texto)}
.asx-caso-cab{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.asx-caso-partes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.asx-caso-parte{padding:28px;border-radius:14px;border:2px dashed #b9c6da;background:#fff;min-height:150px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.asx-caso-parte h3{font-family:var(--asx-titulo);font-weight:400;font-size:24px;color:var(--asx-texto)}
/* ---- Ecosistema ---- */
.asx-eco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.asx-eco-marca{display:flex;flex-direction:column;gap:14px}
/* Logos grandes y con el mismo peso visual: cada uno a la altura que le corresponde por su proporción */
.asx-eco-logo{display:flex;align-items:center;height:96px;margin-bottom:14px}
.asx-eco-logo svg,.asx-eco-logo img{height:80px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.asx-eco-fun .asx-eco-logo img{height:66px}
.asx-eco-rol{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--asx-azul-fuerte);padding-top:18px;border-top:1px solid var(--asx-borde)}
.asx-tarjeta-osc .asx-eco-rol{color:var(--asx-azul-claro);border-top-color:rgba(255,255,255,.14)}
.asx-eco-txt{font-family:var(--asx-titulo);font-weight:400;font-size:21px;line-height:1.4;color:var(--asx-texto)}
.asx-tarjeta-osc .asx-eco-txt{color:#fff}
@media (max-width:640px){.asx-eco-txt{font-size:18px}.asx-eco-logo{height:84px}.asx-eco-logo img{height:68px}.asx-eco-fun .asx-eco-logo img{height:56px}}
.asx-eco-marca .asx-cta{margin-top:auto;padding-top:8px}
.asx-mensaje{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(28px,3vw,42px);line-height:1.2;color:#fff;max-width:900px}
.asx-ventajas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:56px}
.asx-ventajas li{display:flex;flex-direction:column;gap:16px;font-size:20px;color:var(--asx-claro-2)}
/* ---- Recursos ---- */
.asx-guia{display:flex;gap:24px;align-items:flex-start}
.asx-guia .asx-h3{margin-bottom:14px}
.asx-blog{display:flex;flex-direction:column;border-top:1px solid var(--asx-borde)}
.asx-blog li{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--asx-borde);font-family:var(--asx-titulo);font-weight:400;font-size:23px;line-height:1.3;color:var(--asx-texto)}
.asx-blog .asx-ico{font-size:24px;color:var(--asx-azul-fuerte);margin-top:4px}
.asx-blog-pie{margin-top:24px}
.asx-renglones-claro dt{font-size:17px}
/* ---- Nosotros ---- */
.asx-persona{display:flex;flex-direction:column;gap:18px}
.asx-foto{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border:2px dashed #b9c6da;border-radius:14px;background:var(--asx-suave);color:var(--asx-azul-fuerte);font-size:17px;gap:12px}
.asx-foto .asx-ico{font-size:40px}
.asx-persona-nom{font-family:var(--asx-titulo);font-weight:400;font-size:28px;color:var(--asx-texto)}
.asx-persona-rol{color:var(--asx-texto-2);margin-top:-10px}
/* ---- Formularios del sitio (sin la pregunta inicial de la landing del stand) ---- */
.asx-form-sitio{max-width:none}
.asx-form-t{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(30px,3vw,40px);line-height:1.12;color:var(--asx-texto);margin-bottom:28px}
.asx-campo textarea{width:100%;min-height:140px;padding:14px 16px;border:1.5px solid #cfd6e2;border-radius:10px;background:#fff;font-family:var(--asx-cuerpo);font-weight:400;font-size:18px;color:var(--asx-texto);resize:vertical}
.asx-campo textarea:focus{outline:none;border-color:var(--asx-azul-fuerte);box-shadow:0 0 0 3px rgba(0,149,243,.25)}
.asx-guias-elegir .asx-opciones{flex-direction:column}
.asx-form-g{align-items:start}
.asx-form-lado{position:sticky;top:120px}
.asx-cierre .asx-form{max-width:none;color:var(--asx-texto)}
.asx-cierre .asx-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ---- Registro por pasos (estrategia de captura de FUMEXPO, 9 oct 2026) ---- */
.asx-form.hi-registro{max-width:none}
/* Cierre de cada página: la pregunta y los pasos a la izquierda, el registro a la derecha */
.asx-cierre-g{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.asx-cierre-txt{position:sticky;top:120px}
.asx-cierre-txt .asx-lead{margin-top:24px}
/* Los cuatro pasos de la demo, numerados */
.asx-demo-pasos{list-style:none;display:grid;gap:14px;margin-top:32px;counter-reset:none}
.asx-demo-pasos li{display:flex;align-items:center;gap:16px;font-size:18px;line-height:1.4}
.asx-demo-pasos li span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:2px solid var(--asx-azul-claro);font-weight:700;font-size:16px;color:var(--asx-azul-fuerte)}
.asx-cierre .asx-demo-pasos li{color:#fff}
.asx-cierre .asx-demo-pasos li span{color:#fff}
/* Pantalla final de guías, webinar y contacto */
.asx-guia-pend{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;border:1.5px dashed #b9c6da;border-radius:12px;font-weight:700;color:var(--asx-texto)}
.asx-fin-demo{margin-top:32px;padding-top:28px;border-top:1px solid var(--asx-borde);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.asx-fin-demo p{font-family:var(--asx-titulo);font-size:24px;line-height:1.25;color:var(--asx-texto)}
/* ---- El test en Inicio: el texto y una vista previa de la primera pregunta ---- */
.asx-test-ini-g{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:center}
.asx-test-et{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--asx-azul-fuerte);margin-bottom:16px}
.asx-test-et-claro{color:var(--asx-azul-claro)}
.asx-test-ini-txt .asx-lead{margin-top:20px}
.asx-test-ini-txt .asx-cta{align-items:center}
.asx-test-nota{font-size:16px;color:var(--asx-texto-2)}
.asx-test-vista{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:20px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,30,45,.35),0 0 0 1px var(--asx-borde);color:var(--asx-texto);text-decoration:none;transform:rotate(1.5deg);transition:transform .5s var(--asx-curva)}
.asx-test-vista:hover{transform:rotate(0) translateY(-4px)}
.asx-test-vista-cab{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700;color:var(--asx-azul-fuerte)}
.asx-test-puntos{display:flex;gap:7px}
.asx-test-puntos i{width:11px;height:11px;border-radius:50%;border:2px solid #c9d3e3}
.asx-test-puntos i:nth-child(-n+2){background:var(--asx-azul-fuerte);border-color:var(--asx-azul-fuerte)}
.asx-test-vista-q{font-family:var(--asx-titulo);font-weight:300;font-size:28px;line-height:1.15;margin:10px 0 8px}
.asx-test-vista-op{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1.5px solid #cfd6e2;border-radius:12px;font-size:17px}
.asx-test-vista-op b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;border:1.5px solid #cfd6e2;font-size:14px;color:var(--asx-texto-2)}
.asx-test-vista-op:nth-of-type(5){background:var(--asx-degradado);border-color:transparent;color:#fff}
.asx-test-vista-op:nth-of-type(5) b{border-color:rgba(255,255,255,.5);color:#fff}
/* La página del test: el formulario a todo el ancho del contenido, sin perderse en pantallas grandes */
.asx-test-caja{max-width:1040px}
/* ---- Calendario y video pendientes ---- */
.asx-cal-hueco .asx-ico-grande{font-size:48px}
/* ---- Botón flotante de WhatsApp (AW, p. 13) ---- */
.asx-wa{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 22px 0 18px;border-radius:999px;
background:#fff;color:var(--asx-marino);font-weight:700;font-size:17px;text-decoration:none;box-shadow:0 12px 30px -10px rgba(0,7,16,.45),0 0 0 1px rgba(20,30,45,.08)}
.asx-wa .asx-ico{font-size:28px;color:var(--asx-azul-fuerte)}
.asx-wa .asx-pend{font-size:12px}
/* ---- Pie ---- */
.asx-pie{padding:56px 0 64px}
.asx-pie .asx-in{align-items:flex-start}
.asx-pie-marca{display:flex;flex-direction:column;gap:14px}
.asx-pie-lema{font-family:var(--asx-titulo);font-weight:300;font-size:18px;color:var(--asx-gris)}
.asx-pie-ligas{display:flex;flex-wrap:wrap;gap:4px 8px;max-width:640px;justify-content:flex-end}
.asx .asx-pie-ligas a,.asx-pie-ligas span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;color:var(--asx-claro-2);font-size:16px;text-decoration:none}
@media (hover:hover){.asx .asx-pie-ligas a:hover{color:#fff}}
/* ---- Aviso de privacidad ---- */
.asx-legal{max-width:820px}
.asx-legal h2{font-family:var(--asx-titulo);font-weight:400;font-size:30px;color:var(--asx-texto);margin:48px 0 16px}
.asx-legal p,.asx-legal li{font-size:18px;color:var(--asx-texto-2);margin-bottom:12px}
.asx-legal ul{list-style:disc;padding-left:24px}
.asx-legal-borrador{display:flex;gap:12px;align-items:flex-start;padding:20px 24px;border-radius:12px;background:#fff8d6;border:1px solid #f1d46b;color:var(--asx-negro)!important}
.asx-legal-borrador .asx-ico{font-size:24px;margin-top:2px}
/* ---- FUMEXPO: tira arriba del menú y sección en Inicio (se quitan solas después de la expo) ---- */
.asx-expo-tira{background:var(--asx-degradado);color:#fff}
.asx-expo-tira .asx-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 18px;min-height:48px;padding-top:6px;padding-bottom:6px;text-align:center}
.asx-expo-tira p{font-size:16px;font-weight:400}
.asx .asx-expo-tira a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:3px}
/* Sección FUMEXPO de Inicio como pase de acceso (Carlos, 9 oct 2026: "esta está horrible").
Banda marina lisa (el isotipo de fondo solo va en el hero, Carlos, 9 oct 2026); a la izquierda el titular y el botón, a la derecha un pase con el stand gigante
y los dos días del piso abajo de la perforación. */
.asx-expo{position:relative;overflow:hidden}
.asx-expo-g{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:72px;align-items:center}
.asx-expo-txt .asx-lead{margin-top:8px}
.asx-expo .asx-cta{margin-top:36px;align-items:center}
.asx-pase{position:relative;border-radius:24px;background:#fff;color:var(--asx-texto);box-shadow:0 30px 70px -30px rgba(0,0,0,.7);transform:rotate(-2deg)}
.asx-pase-arriba{display:grid;grid-template-columns:1fr auto;grid-template-areas:"evento stand" "cat stand";gap:18px 24px;padding:34px 36px 30px;border-radius:24px 24px 0 0;background:var(--asx-degradado);color:#fff}
.asx-pase-evento{grid-area:evento;display:grid;gap:2px;font-weight:700;font-size:20px;line-height:1.3}
.asx-pase-evento span{font-weight:400;font-size:17px;color:rgba(255,255,255,.85)}
.asx-pase-stand{grid-area:stand;display:grid;justify-items:end;align-content:start}
.asx-pase-stand span{font-size:17px;color:rgba(255,255,255,.85)}
.asx-pase-stand b{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(88px,9vw,132px);line-height:.85;letter-spacing:-.03em}
.asx-pase-cat{grid-area:cat;align-self:end;display:grid;gap:2px;font-size:17px;line-height:1.4}
.asx-pase-cat span{color:rgba(255,255,255,.85)}
.asx-pase-abajo{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:26px 36px 32px;border-top:2px dashed var(--asx-borde)}
.asx-pase-abajo::before,.asx-pase-abajo::after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--asx-marino)}
.asx-pase-abajo::before{left:-14px}.asx-pase-abajo::after{right:-14px}
.asx-pase-abajo div + div{padding-left:24px;border-left:1px solid var(--asx-borde)}
.asx-pase-abajo dt{font-weight:700;font-size:17px;color:var(--asx-texto)}
.asx-pase-abajo dd{margin:4px 0 0;font-family:var(--asx-titulo);font-weight:400;font-size:26px;line-height:1.2;color:var(--asx-azul-fuerte)}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
.asx-pase{transition:transform .6s var(--asx-curva)}
.asx-pase:hover{transform:rotate(0) translateY(-4px)}
}
/* ---- Fotos del banco aprobado ---- */
.asx-foto-img{margin-top:32px;border-radius:16px;overflow:hidden;background:var(--asx-suave)}
.asx-foto-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* Consentimiento con casilla visible (Carlos, 9 oct 2026: "este necesita un checkbox"). Las opciones de los formularios
siguen como botones completos; solo la aceptación del aviso lleva su casilla. */
.asx-consent span{position:relative;padding-left:58px}
.asx-consent span::before{content:"";position:absolute;left:18px;top:50%;width:24px;height:24px;margin-top:-12px;border:2px solid #9aa9c1;border-radius:6px;background:#fff;transition:border-color .2s,background-color .2s}
.asx-consent span::after{content:"";position:absolute;left:26px;top:50%;width:8px;height:14px;margin-top:-10px;border:solid var(--asx-azul-fuerte);border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .2s var(--asx-curva)}
.asx-consent input:checked+span::before{border-color:#fff;background:#fff}
.asx-consent input:checked+span::after{transform:rotate(45deg) scale(1)}
.asx-consent.asx-invalido span::before{border-color:#c62828}
/* Los formularios por pasos (.hi) traen su propia casilla en el estilo común: fijaba top:14px y, sumado al margin-top de
arriba, la casilla se montaba en el borde (Carlos, 9 oct 2026: "los checkbox se ven mal"). Aquí manda una sola. */
.hi .asx-consent > span::before{left:18px;top:50%;margin-top:-12px}
.hi .asx-consent > span::after{-webkit-mask:none;mask:none;left:26px;top:50%;width:8px;height:14px;margin-top:-10px;background:none;border-radius:0;border:solid var(--asx-azul-fuerte);border-width:0 3px 3px 0;transform:rotate(45deg) scale(0)}
.hi .asx-consent input:checked + span::before{border-color:#fff;background:#fff}
.hi .asx-consent input:checked + span::after{transform:rotate(45deg) scale(1)}
/* "¿Te suena?" (Carlos, 9 oct 2026: "súper básica... algo más elaborado que tres tarjetas").
Los tres dolores como mensajes que podría escribir un director de funeraria, escalonados a la derecha del título,
con una línea de conversación que los une. Entran al hacer scroll solo donde el navegador lo soporta y sin
"reducir movimiento"; si no, se ven quietos y completos. */
.asx-suena{overflow:hidden}
.asx-suena-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;align-items:start}
.asx-suena-titulo{position:sticky;top:120px}
.asx-suena-titulo .asx-h2{font-size:clamp(48px,5.4vw,84px)}
/* Sin línea ni puntos: Carlos, 9 oct 2026, "no tiene sentido la línea con la separación". */
.asx-suena-lista{position:relative;display:grid;gap:28px}
.asx-suena-msj{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;column-gap:22px;max-width:640px;padding:26px 30px;border-radius:22px 22px 22px 6px;background:var(--asx-suave);border:1px solid var(--asx-borde);box-shadow:0 18px 40px -26px rgba(20,30,45,.35)}
.asx-suena-lista li:nth-child(2) .asx-suena-msj{margin-left:96px}
.asx-suena-lista li:nth-child(3) .asx-suena-msj{margin-left:192px}
.asx-suena-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--asx-degradado);color:#fff;font-size:28px}
.asx-suena-msj p{font-family:var(--asx-titulo);font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.25;color:var(--asx-texto)}
.asx-suena-num{align-self:start;font-family:var(--asx-titulo);font-weight:300;font-size:18px;color:#9aa9c1}
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.asx-suena-msj{animation:asx-suena-entra linear both;animation-timeline:view();animation-range:entry 10% cover 35%}
}
}
@keyframes asx-suena-entra{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:900px){
.asx-suena-g{grid-template-columns:1fr;row-gap:36px}
.asx-suena-titulo{position:static}
.asx-suena-lista li:nth-child(n) .asx-suena-msj{margin-left:0}
}
@media (max-width:640px){
.asx-suena-lista{gap:18px}
.asx-suena-msj{grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:20px 20px}
.asx-suena-ico{width:44px;height:44px;font-size:22px}
.asx-suena-num{display:none}
.asx-suena-msj p{font-size:20px}
}
/* "No somos una agencia de marketing" (Carlos, 9 oct 2026: la foto quedaba forzada debajo del título y la sección se veía básica).
Escritorio: foto alta a la izquierda; a la derecha el título y los cuatro puntos como lista numerada con filete.
Teléfono: título, foto y lista, en ese orden. */
.asx-porque-g{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"foto titulo" "foto lista";column-gap:72px;align-items:start}
.asx-porque-titulo{grid-area:titulo;align-self:end}
.asx-porque-foto{grid-area:foto;position:relative}
.asx-porque-foto::after{content:"";position:absolute;inset:auto -14px -14px auto;width:42%;height:42%;border-right:2px solid var(--asx-azul-claro);border-bottom:2px solid var(--asx-azul-claro);border-bottom-right-radius:22px;opacity:.6;pointer-events:none}
.asx-foto-porque{margin-top:0;border-radius:20px}
.asx-foto-porque img{aspect-ratio:4/5;object-position:50% 40%}
.asx-porque-lista{grid-area:lista;margin-top:8px;border-bottom:1px solid rgba(255,255,255,.12);counter-reset:none}
.asx-porque-lista li{display:grid;grid-template-columns:44px 56px minmax(0,1fr);align-items:center;column-gap:20px;padding:26px 0;border-top:1px solid rgba(255,255,255,.12);font-size:20px;line-height:1.5;color:var(--asx-claro-2)}
.asx-porque-lista strong{color:#fff}
.asx-porque-num{font-family:var(--asx-titulo);font-weight:300;font-size:30px;line-height:1;color:var(--asx-azul-claro)}
@media (max-width:900px){
.asx-porque-g{grid-template-columns:1fr;grid-template-areas:"titulo" "foto" "lista";row-gap:8px}
.asx-porque-foto{margin-bottom:28px}
.asx-porque-foto::after{inset:auto -8px -8px auto}
.asx-foto-porque img{aspect-ratio:4/3}
}
@media (max-width:640px){
.asx-porque-lista li{grid-template-columns:36px 48px minmax(0,1fr);column-gap:14px;font-size:18px}
.asx-porque-lista .asx-caja-ico{width:48px;height:48px;font-size:26px}
.asx-porque-num{font-size:24px}
}
/* ---- Contacto y pie: datos del banner ---- */
.asx-dato{font-size:20px;line-height:1.5;color:var(--asx-texto);word-break:break-word}
a.asx-dato{display:inline-flex;align-items:center;min-height:44px;color:var(--asx-azul-fuerte);font-weight:700}
.asx-pie-datos{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.asx-pie-datos li,.asx .asx-pie-datos a{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding-top:10px;color:var(--asx-claro-2);font-size:16px;line-height:1.5;text-decoration:none}
.asx-pie-datos .asx-ico{font-size:20px;color:var(--asx-azul-claro);margin-top:2px;flex:none}
@media (hover:hover){.asx .asx-pie-datos a:hover{color:#fff}}
/* ---- Responsive ---- */
/* Con "Test gratuito" el menú lleva seis ligas: ninguna se parte en dos renglones */
.asx-menu a{white-space:nowrap}
@media (max-width:1100px){
.asx-menu a:not(.asx-boton){padding:0 8px;font-size:15px}
.asx-menu .asx-boton{padding:0 18px;font-size:16px;margin-left:6px}
.asx-eco{grid-template-columns:1fr}
}
@media (max-width:980px){
.asx-abrir{display:inline-flex}
.asx-menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:12px 22px 24px;background:var(--asx-marino);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 24px 40px -20px rgba(0,7,16,.6)}
.asx-nav[data-abierto] .asx-menu{display:flex}
.asx-menu a:not(.asx-boton){min-height:52px;font-size:19px;padding:0 8px}
.asx-menu .asx-boton{margin:12px 0 0}
/* Sin JavaScript el menú se queda abierto debajo del logo: todo se puede leer y picar */
.asx-sin-js .asx-abrir{display:none}
.asx-sin-js .asx-menu{display:flex;position:static;box-shadow:none;border:0;padding:0 0 18px}
.asx-sin-js .asx-nav .asx-in{flex-wrap:wrap}
}
@media (max-width:900px){
.asx-dos,.asx-incluye,.asx-metricas,.asx-caso-partes,.asx-ventajas{grid-template-columns:1fr}
.asx-expo-g{grid-template-columns:1fr;row-gap:48px}
.asx-pase{transform:none;max-width:520px}
.asx-form-lado{position:static}
.asx-cab .asx-in{padding-top:56px;padding-bottom:64px}
}
@media (max-width:640px){
.asx-nav .asx-in{min-height:72px}
.asx-nav .asx-logo{width:148px}
.asx-cab .asx-hero-vis{width:70%;opacity:.2}
.asx-cierre .asx-campos{grid-template-columns:1fr}
.asx-bloque-t{font-size:26px}
.asx-blog li{font-size:20px}
.asx-guia{flex-direction:column}
.asx-pie .asx-in{flex-direction:column}
.asx-pie-ligas{justify-content:flex-start;margin-left:-10px}
.asx-wa{right:16px;bottom:16px;padding:0 18px 0 14px}
.asx-wa .asx-wa-txt{display:none}
.asx-pase-arriba{padding:26px 24px 24px;gap:14px 16px}
.asx-pase-abajo{padding:22px 24px 26px}
.asx-pase-abajo div + div{padding-left:16px}
.asx-pase-abajo dd{font-size:22px}
.asx-incluye li,.asx-resultado p{font-size:19px}
}
/* Registro por pasos y test en Inicio, en tableta y teléfono */
@media (max-width:900px){.asx-cierre-g,.asx-test-ini-g{grid-template-columns:1fr;gap:40px}.asx-cierre-txt{position:static}.asx-test-vista{transform:none}}
@media (max-width:640px){.asx-test-vista{padding:24px 20px}.asx-test-vista-q{font-size:24px}.asx-demo-pasos li{font-size:17px}}
/* Entradas suaves con desenfoque (Carlos, 9 oct 2026). Las clases las pone comun\entradas.js y las quita al terminar. */
.ent-js .ent{opacity:0;filter:blur(10px);transform:translateY(18px);transition:opacity .8s ease,filter .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.ent-js .ent.ent-dentro{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){.ent-js .ent{opacity:1;filter:none;transform:none;transition:none}}
/* Corte curvo arriba de las secciones que cambian de color (Carlos, 9 oct 2026). La franja la pone comun\entradas.js
con el color de la sección de arriba. Cada corte trae su propia forma y se mueve con el scroll (Carlos, 9 oct 2026:
"las quiero dinámicas"); la forma la dibuja el script en un svg, aquí solo va el tamaño. */
.corte{position:absolute;left:0;right:0;top:-1px;height:clamp(40px,6vw,96px);pointer-events:none;z-index:0}
.corte svg{display:block;width:100%;height:100%}
/* ---- Rediseño sin tarjetas genéricas (Carlos, 9 oct 2026: "las tarjetas de ai slop... en casi todo") ----------------
Solo la paleta y las tipografías de la marca: marino, los dos azules, blanco; títulos en la tipografía de títulos. */
/* Los cuatro servicios: renglones grandes; todo el renglón lleva a su página. */
.asx-mods{list-style:none;margin:0;padding:0;border-top:2px solid var(--asx-texto)}
.asx-mods li{position:relative;display:grid;grid-template-columns:56px minmax(220px,5fr) 5fr 52px;gap:28px;align-items:center;padding:clamp(26px,3vw,38px) 0;border-bottom:1px solid rgba(20,30,45,.12)}
.asx-mod-num{font-size:14px;font-weight:700;color:var(--asx-azul-fuerte);font-variant-numeric:tabular-nums}
.asx-mod-nom h3{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(28px,2.6vw,40px);line-height:1.08;color:var(--asx-texto)}
.asx-mod-nom p{margin-top:8px;font-size:17px;color:var(--asx-texto-2)}
.asx-mod-para{font-size:17px;line-height:1.5;color:var(--asx-texto-2);max-width:44ch}
.asx-mod-liga{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--asx-azul-fuerte);color:var(--asx-azul-fuerte);transition:background-color .2s,color .2s,transform .2s}
.asx-mod-liga::after{content:"";position:absolute;inset:0}
.asx-mod-liga svg{width:20px;height:20px}
.asx-mod-liga:focus-visible{outline:3px solid var(--asx-azul-claro);outline-offset:3px}
@media (hover:hover){.asx-mods li:hover .asx-mod-liga{background:var(--asx-azul-fuerte);color:#fff;transform:translateX(4px)}}
/* Página de servicio: cómo se cobra y resultados como ficha en renglones. */
.asx-ficha-r{display:grid;grid-template-columns:4fr 8fr;gap:clamp(24px,5vw,80px);align-items:start;padding:clamp(28px,3.5vw,44px) 0;border-bottom:1px solid rgba(20,30,45,.12)}
.asx-ficha-r:first-child{border-top:2px solid var(--asx-texto)}
.asx-ficha-t{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(26px,2.2vw,34px);line-height:1.1;color:var(--asx-texto)}
.asx-ficha-x{font-size:clamp(19px,1.5vw,23px);line-height:1.45;color:var(--asx-texto);max-width:46ch}
.asx-ficha-dato{font-family:var(--asx-titulo);font-weight:300;font-size:clamp(26px,2.4vw,38px);line-height:1.15;color:var(--asx-azul-fuerte)}
/* Contacto: los datos como lista con líneas, sin tarjetas. */
.asx-contacto-l{margin:0;border-top:2px solid var(--asx-texto)}
.asx-contacto-l>div{padding:26px 0;border-bottom:1px solid rgba(20,30,45,.12)}
.asx-contacto-l dt{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--asx-azul-fuerte)}
.asx-contacto-l dd{margin:10px 0 0;font-family:var(--asx-titulo);font-weight:300;font-size:clamp(24px,2vw,30px);line-height:1.2;color:var(--asx-texto)}
.asx-contacto-l dd a{color:inherit;text-decoration:none;background:linear-gradient(var(--asx-azul-fuerte),var(--asx-azul-fuerte)) left bottom/100% 2px no-repeat;padding-bottom:2px}
.asx-contacto-l dd.asx-contacto-dir{font-size:clamp(19px,1.5vw,22px);line-height:1.4}
/* Ecosistema: las tres empresas en renglones con su logo, mismo lenguaje que los servicios. Ascendia lleva la barra azul. */
.asx-eco2{list-style:none;margin:0;padding:0;border-top:2px solid var(--asx-texto)}
.asx-eco2 li{position:relative;display:grid;grid-template-columns:56px 260px 1fr 52px;gap:32px;align-items:center;padding:clamp(28px,3.2vw,42px) 0;border-bottom:1px solid rgba(20,30,45,.12)}
.asx-eco2-asc::before{content:"";position:absolute;left:-24px;top:clamp(28px,3.2vw,42px);bottom:clamp(28px,3.2vw,42px);width:4px;border-radius:2px;background:linear-gradient(var(--asx-azul-claro),var(--asx-azul-fuerte))}
.asx-eco2-n{font-size:14px;font-weight:700;color:var(--asx-azul-fuerte);font-variant-numeric:tabular-nums}
.asx-eco2-logo img{display:block;height:64px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.asx-eco2-fun .asx-eco2-logo img{height:52px}
.asx-eco2-rol{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--asx-azul-fuerte)}
.asx-eco2-txt{margin-top:10px;font-family:var(--asx-titulo);font-weight:300;font-size:clamp(20px,1.7vw,25px);line-height:1.35;color:var(--asx-texto);max-width:46ch}
.asx-eco2-liga{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--asx-azul-fuerte);color:var(--asx-azul-fuerte);transition:background-color .2s,color .2s}
.asx-eco2-liga svg{width:20px;height:20px}
@media (hover:hover){.asx-eco2-liga:hover{background:var(--asx-azul-fuerte);color:#fff}}
@media (max-width:900px){
.asx-eco2 li{grid-template-columns:36px 1fr 52px;row-gap:14px}
.asx-eco2 li>div:not(.asx-eco2-logo){grid-column:2/4}
.asx-eco2-asc::before{left:-14px}
.asx-eco2-logo img{height:52px}
}
/* Nosotros: el equipo sin cajas, nombre grande con línea arriba. */
.asx-persona{background:transparent;border:0;border-top:2px solid var(--asx-texto);border-radius:0;box-shadow:none;padding:24px 0 0}
@media (max-width:900px){
.asx-mods li{grid-template-columns:36px 1fr 52px;row-gap:10px}
.asx-mod-para{grid-column:2/3;grid-row:2}
.asx-mod-liga{grid-column:3;grid-row:1}
.asx-ficha-r{grid-template-columns:1fr}
}
/* Encabezado solo para lectores de pantalla y buscadores: ordena h1, h2, h3 en Servicios sin cambiar lo que se ve (SEO técnico, 9 oct 2026). */
.asx .asx-oculto{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}