/* ASM 360 · Signature ASM v2.1 · PEARL CHERRY · hoja única (tokens + componentes + páginas). G1 FINAL, candidato local 30/09/2026. */

/* ========== 1. Fuentes (OFL, locales) ========== */
@font-face{font-family:"Bricolage";src:url("fuentes/BricolageGrotesque-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage";src:url("fuentes/BricolageGrotesque-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fuentes/GeistMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fuentes/GeistMono-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* ========== 2. Tokens ========== */
:root{
  /* ===== color · PEARL CHERRY (elegida 30/09/2026) ===== */
  --c-fondo:#FBFAF9;        /* pearl */
  --c-superficie:#FFFFFF; --c-blanco:#FFFFFF;
  --c-piedra:#F2EFEE;       /* smoke warm: sección alterna */
  --c-marfil:#F8F6F5;       /* pearl tintado: degradados suaves */
  --c-navy:#20243A;         /* navy profundo, solo texto */
  --c-texto-2:#51535F;      /* texto secundario */
  --c-gris-calido:#8A8490;  /* bullets e iconos secundarios (decorativo, sin texto) */
  --c-linea:#E6DFDE; --c-pista:rgba(var(--rgb-tinta),.16);
  --c-acento:#A84D60;       /* cherry desaturado: firma (CTA, líneas Signature, indicadores, bordes activos) */
  --c-acento-texto:#8E3B4D; /* cereza para texto pequeño */
  --c-acento-luz:#F5E3E6;   /* clay pink: solo halos pequeños y superficies secundarias */
  --c-verde:#5A8177;        /* nodo «Equipo» */
  --c-btn-1:#9A4557; --c-btn-2:#913F51; --c-btn-3:#833748; --c-btn-hover:#7A3343;  /* CTA profundo */
  --c-aviso:#FAF2E3; --c-error:#962B2B; --c-exito:#2E6559;
  /* tipografía */
  --f-sans:"Bricolage",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --fs-h1:clamp(38px,4.6vw,62px); --fs-h2:clamp(30px,3.7vw,52px); --fs-h3:clamp(20px,1.7vw,24px);
  --fs-lead:clamp(17px,1.35vw,18.5px); --fs-base:17px; --fs-sm:15px; --fs-xs:13px; --fs-mono:12px;
  /* espaciado */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --seccion:clamp(72px,9vw,128px);
  /* radios */
  --r-p:12px; --r-m:18px; --r-g:28px; --r-xl:36px; --r-pill:999px;
  /* sombras */
  --sh-filo:inset 0 0 0 1px rgba(var(--rgb-tinta),.06);
  --sh-suave:0 1px 1px rgba(var(--rgb-tinta),.04),0 18px 40px -24px rgba(var(--rgb-tinta),.20);
  --sh-capa:0 1px 1px rgba(32,36,58,.05),0 12px 24px -10px rgba(32,36,58,.14),0 44px 72px -28px rgba(80,40,55,.24);
  /* canales rgb */
  --rgb-tinta:32,36,58; --rgb-acento:168,77,96; --rgb-halo:244,233,234; --rgb-piedra:242,239,238; --rgb-verde:90,129,119;
  --rgb-btn-sombra:80,25,40; --rgb-aviso-borde:176,120,0; --rgb-error-borde:150,43,43; --rgb-exito-borde:46,101,89;
  /* superficies y estados */
  --c-business-bg:#FFFCFC; --c-error-bg:#FBEDED; --c-exito-bg:#E8F2EF; --c-escribe:#E8E3E2; --c-input-borde:#8E8F99; --c-nodo-gris:#8F9099;
  --c-punto:#6D6F7A; --c-texto-gris:#5B5D68; --c-logo-pastilla:#0B0C0F;
  --svg-gris-1:#EBE6E5; --svg-gris-2:#D6CDCC; --svg-gris-3:#E0D9D8; --svg-conector-gris:#B6B2B6;
  /* contenedores */
  --ancho:1312px; --m:clamp(16px,4.45vw,64px);
}

/* ========== 3. Base ========== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--c-fondo);color:var(--c-navy);font-family:var(--f-sans);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1{font-size:var(--fs-h1);line-height:1.03;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.038em;font-weight:700;text-wrap:balance}
h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.02em;font-weight:700}
:focus-visible{outline:3px solid var(--c-acento-texto);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.salto{position:absolute;left:var(--s4);top:-60px;z-index:100;background:var(--c-navy);color:#fff;padding:10px 16px;border-radius:var(--r-p);font-weight:700;text-decoration:none}
.salto:focus{top:var(--s4)}
.contenedor{width:min(var(--ancho),100% - 2*var(--m));margin-inline:auto}
.seccion{padding-block:var(--seccion) 0}
.texto-2{color:var(--c-texto-2)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ========== 4. Sistema Signature: anillo, nodo, pista, rótulo ========== */
.rotulo{font-family:var(--f-mono);font-size:var(--fs-mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-navy)}
.nodo{display:inline-block;flex:none;width:12px;height:12px;border-radius:50%;background:var(--c-superficie);box-shadow:inset 0 0 0 2px var(--c-acento)}
.nodo--lleno{background:var(--c-acento);box-shadow:0 0 0 4px var(--c-acento-luz)}
.nodo--navy{background:var(--c-navy);box-shadow:inset 0 0 0 3px var(--c-navy),inset 0 0 0 5px #fff}
.nodo--verde{background:var(--c-verde);box-shadow:0 0 0 4px rgba(var(--rgb-verde),.16)}
.nodo--gris{box-shadow:inset 0 0 0 2px var(--c-nodo-gris)}
.dial{width:40px;height:40px;flex:none}
.dial .pista{fill:none;stroke:var(--c-pista);stroke-width:2}
.dial .arco{fill:none;stroke:var(--c-acento);stroke-width:2;stroke-linecap:round}
.aro{width:24px;height:24px;flex:none}
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:var(--s5)}
.indice{display:flex;margin-bottom:22px}
.nota{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.03em;color:var(--c-texto-2);background:rgba(255,255,255,.9);border-radius:var(--r-pill);padding:6px 12px 6px 10px;box-shadow:var(--sh-filo);white-space:nowrap}
.nota::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-acento)}
.enlace{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;color:var(--c-navy);text-decoration:none}
.enlace::after{content:"";width:22px;height:1.5px;background:var(--c-acento)}
.enlace:hover{text-decoration:underline;text-underline-offset:4px}
.trazo{fill:none;stroke:var(--c-pista);stroke-width:1.5}
.trazo--activo{fill:none;stroke:var(--c-acento);stroke-width:2}
.trazo--verde{fill:none;stroke:var(--c-verde);stroke-width:1.5}

/* pieza real del CRM: imagen 2x mostrada a 1x o menos */
.pieza{position:relative;display:block;overflow:hidden;background:var(--c-superficie);border-radius:var(--r-p);box-shadow:0 0 0 1px rgba(var(--rgb-tinta),.05),var(--sh-capa);flex:none}
.pieza img{width:100%;height:auto}
.pieza--recorte img{max-width:none}

/* ========== 5. Botones ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r-pill);font:700 16.5px/1.1 var(--f-sans);text-decoration:none;white-space:nowrap;border:0;cursor:pointer}
.btn--acento{color:#fff;background:linear-gradient(180deg,var(--c-btn-1) 0%,var(--c-btn-2) 55%,var(--c-btn-3) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(var(--rgb-btn-sombra),.25),0 12px 24px -12px rgba(var(--rgb-acento),.6)}
.btn--acento:hover{filter:brightness(.95)}
.btn--linea{color:var(--c-navy);background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1.5px rgba(var(--rgb-tinta),.2)}
.btn--linea:hover{box-shadow:inset 0 0 0 1.5px var(--c-navy)}
.btn--bloque{width:100%}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ========== 6. Cabecera y menú ========== */
.cabecera{position:sticky;top:0;z-index:50;padding-top:14px}
.barra{width:min(var(--ancho),100% - 2*var(--m));margin-inline:auto;min-height:64px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:10px 10px 10px 12px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.78));backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 1px 0 #fff,var(--sh-filo),0 14px 34px -18px rgba(var(--rgb-tinta),.25)}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.marca__pastilla{width:40px;height:40px;border-radius:50%;background:var(--c-logo-pastilla);display:grid;place-items:center}
.marca__pastilla img{width:26px;height:26px}
.marca__nombre{font-family:var(--f-mono);font-weight:700;font-size:12.5px;letter-spacing:.13em}
.menu{display:flex;align-items:center;gap:2px}
.menu a{padding:9px 13px;border-radius:var(--r-pill);font-size:15px;color:var(--c-texto-2);text-decoration:none}
.menu a:hover{color:var(--c-navy);background:rgba(var(--rgb-tinta),.05)}
.menu a[aria-current="page"]{color:var(--c-navy);font-weight:700;background:var(--c-superficie);box-shadow:var(--sh-filo)}
.cabecera .btn{min-height:44px;padding:0 20px;font-size:15px}
.menu-movil{display:none;position:relative}
.menu-movil>summary{list-style:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:var(--r-pill);font-weight:700;font-size:15px;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(var(--rgb-tinta),.2);background:var(--c-superficie)}
.menu-movil>summary::-webkit-details-marker{display:none}
.menu-movil>summary i{width:16px;height:10px;border-top:2px solid var(--c-navy);border-bottom:2px solid var(--c-navy);position:relative}
.menu-movil>summary i::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid var(--c-navy)}
.menu-movil__panel{position:absolute;right:0;top:calc(100% + 10px);width:min(320px,calc(100vw - 2*var(--m)));background:var(--c-superficie);border-radius:var(--r-m);padding:10px;box-shadow:var(--sh-filo),var(--sh-capa);display:grid;gap:2px}
.menu-movil__panel a{display:block;padding:12px 14px;border-radius:var(--r-p);text-decoration:none;font-size:16px}
.menu-movil__panel a[aria-current="page"]{font-weight:700;background:var(--c-piedra)}
.menu-movil__panel .btn{margin-top:8px;color:#fff}
@media (max-width:1180px){
  .barra>.menu,.barra>.btn--acento{display:none}
  .menu-movil{display:block}
}
@media (max-width:420px){.marca__nombre{font-size:11px;letter-spacing:.1em}}
@media (max-width:359px){.marca__nombre{display:none}}

/* ========== 7. Cabeceras de sección ========== */
.cab{display:grid;grid-template-columns:1fr minmax(0,500px);gap:var(--s8);align-items:end;margin-bottom:var(--s7)}
.cab p{font-size:16.5px;line-height:1.6;color:var(--c-texto-2)}
.cab p b{display:block;color:var(--c-navy);font-size:19px;letter-spacing:-.01em;margin-bottom:10px}
.cab--una{grid-template-columns:minmax(0,1fr)}
@media (max-width:1023px){.cab{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}

/* lienzo: composiciones de escritorio a 1312px; entre 1200 y 1399 se reducen con zoom */
.lienzo{position:relative;width:1312px}
.lienzo>svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
@media (min-width:1200px) and (max-width:1279px){.lienzo--zoom{zoom:.82}}
@media (min-width:1280px) and (max-width:1399px){.lienzo--zoom{zoom:.88}}

/* ========== 8. HOME · Hero ========== */
.hero{position:relative;overflow-x:clip;padding-block:clamp(40px,7vw,96px) var(--s8);background:radial-gradient(900px 620px at 78% 42%,rgba(var(--rgb-halo),.55),rgba(var(--rgb-halo),0) 70%),radial-gradient(700px 500px at 8% 10%,rgba(var(--rgb-piedra),.9),rgba(var(--rgb-piedra),0) 70%)}
.hero__rejilla{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:var(--s8);align-items:center}
.hero .entrada{margin-top:var(--s5);font-size:var(--fs-lead);line-height:1.6;color:var(--c-texto-2);max-width:500px}
.hero .acciones{margin-top:var(--s6)}
.hero-vis{position:relative;width:700px;height:540px;perspective:2400px;justify-self:end}
.hero-vis__grupo{position:absolute;inset:0;transform:rotateY(-8deg) rotateX(3deg);transform-origin:0 50%;transform-style:preserve-3d}
.hero-vis__orbita{position:absolute;left:-340px;top:-340px;width:1380px;height:1380px;overflow:visible;pointer-events:none}
.marco{position:absolute;left:0;top:0;padding:9px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.62));box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(var(--rgb-tinta),.06),0 40px 80px -30px rgba(var(--rgb-tinta),.32),0 80px 120px -60px rgba(var(--rgb-tinta),.25)}
.marco .pieza{box-shadow:none;border-radius:16px}
.flota{position:absolute}
.chip-aria{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:var(--r-pill);background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.8));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(var(--rgb-tinta),.06),var(--sh-capa)}
.chip-aria .aro{width:18px;height:18px}
.chip-aria i{width:30px;height:2px;background:var(--c-acento);border-radius:2px}
.chip-aria .nodo{width:10px;height:10px}
.hero-vis>.chip-aria{position:absolute}
.hero-vis>.nota{position:absolute;right:0;top:448px}
.hero-movil{display:none}
@media (max-width:1399px) and (min-width:1200px){.hero-vis{zoom:.86}}
@media (max-width:1199px){
  .hero__rejilla{grid-template-columns:minmax(0,1fr)}
  .hero-vis{display:none}
  .hero-movil{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);margin-top:var(--s6)}
}
.hero-movil__kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero-movil__piezas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:767px){.hero-movil__piezas{grid-template-columns:minmax(0,1fr)}.hero-movil__tercera{display:none}}
@media (max-width:1199px){
  .pieza--encaja{width:100%!important;height:auto!important;max-width:var(--max-pieza,100%)}
  .pieza--encaja img{width:100%!important;height:auto!important}
  .pieza--corta{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
}
.hero-movil__pie{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}

/* ========== 9. HOME · Producto: un sistema conectado ========== */
.sistema{height:790px}
.sistema .hub{position:absolute;left:0;top:0;width:720px;height:372px}
.hub{display:block;background:var(--c-superficie);border-radius:var(--r-g);padding:32px;box-shadow:var(--sh-filo),var(--sh-suave);text-decoration:none}
.hub h3,.mod h3{display:flex;align-items:center;gap:12px}
.hub h3{font-size:26px}
.hub p{margin-top:10px;font-size:15.5px;color:var(--c-texto-2);max-width:640px}
.sistema .hub .pieza{position:absolute;left:32px;top:156px}
.mod{display:block;text-decoration:none}
.sistema .mod{position:absolute}
.mod h3{font-size:20px}
.mod p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--c-texto-2)}
.mod .pieza{margin-top:18px}
.eva-mod .rotulo{display:inline-flex;align-items:center;gap:8px;color:var(--c-acento-texto)}
.eva-mod__fila{display:flex;gap:22px;margin-top:16px;align-items:flex-start}
.eva-mod__fila p{margin-top:0;font-size:14px}
a.hub:hover h3,a.mod:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.sistema-movil{display:none}
@media (max-width:1199px){
  .sistema{display:none}
  .sistema-movil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6)}
  .sistema-movil .hub{grid-column:1/-1}
  .sistema-movil .hub .pieza{margin-top:var(--s5);max-width:100%}
  .sistema-movil .mod{position:relative;padding-left:26px}
  .sistema-movil .mod::before{content:"";position:absolute;left:5px;top:24px;bottom:-12px;width:1.5px;background:var(--c-pista)}
  .sistema-movil .mod h3 .nodo{position:absolute;left:0;top:6px}
  .sistema-movil .mod .pieza{max-width:100%}
  .sistema-movil .eva-mod{grid-column:1/-1}
}
@media (max-width:767px){
  .sistema-movil{grid-template-columns:minmax(0,1fr)}
  .eva-mod__fila{flex-direction:column}
}

/* ========== 10. HOME · ARIA (bloque protagonista) ========== */
.aria-sec{margin-top:var(--seccion);padding-block:clamp(64px,8vw,112px);background:linear-gradient(180deg,var(--c-marfil),var(--c-fondo))}
.aria-sec h2{font-size:clamp(32px,4.2vw,60px)}
.escena-aria{background:var(--c-superficie);border-radius:32px;padding:44px 48px 52px;box-shadow:var(--sh-filo),var(--sh-capa)}
.rail{position:relative;display:grid;grid-template-columns:repeat(6,1fr);padding-bottom:36px;border-bottom:1px solid var(--c-linea)}
.rail::before{content:"";position:absolute;left:calc(100%/12);right:calc(100%/12);top:19px;height:2px;background:linear-gradient(90deg,var(--c-acento) 0 80%,var(--c-verde) 80% 100%)}
.r-paso{position:relative;display:grid;grid-template-rows:40px auto;justify-items:center;row-gap:10px;text-align:center}
.r-nodo{align-self:center;width:14px;height:14px;border-radius:50%;background:var(--c-superficie);box-shadow:inset 0 0 0 2px var(--c-acento),0 0 0 5px #fff}
.r-paso--aria .r-nodo{width:30px;height:30px;background:var(--c-acento);box-shadow:inset 0 0 0 7px var(--c-acento),inset 0 0 0 9px #fff,0 0 0 6px var(--c-acento-luz),0 0 0 11px #fff}
.r-paso--aria .rotulo{color:var(--c-acento-texto)}
.r-paso--crm .r-nodo{background:var(--c-navy);box-shadow:0 0 0 5px #fff}
.r-paso--equipo .r-nodo{background:var(--c-verde);box-shadow:0 0 0 5px rgba(var(--rgb-verde),.16),0 0 0 8px #fff}
.aria-cuerpo{position:relative;display:grid;grid-template-columns:520px 1fr;gap:56px;margin-top:40px}
.chat{align-self:start;background:var(--c-piedra);border-radius:24px;padding:28px 28px 30px;display:flex;flex-direction:column;gap:20px}
.msg{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.msg--cliente{align-items:flex-end}
.msg .rotulo{display:inline-flex;align-items:center;gap:8px;font-size:11px}
.msg .nodo{width:10px;height:10px}
.burbuja{display:inline-block;max-width:430px;border-radius:4px 18px 18px 18px;padding:12px 16px;font-size:15px;line-height:1.5;background:var(--c-superficie);box-shadow:0 0 0 1px rgba(var(--rgb-tinta),.05),0 10px 20px -14px rgba(var(--rgb-tinta),.35)}
.escribe{display:inline-flex;gap:6px;padding:15px 18px;background:var(--c-escribe);border-radius:18px 4px 18px 18px}
.escribe i{width:7px;height:7px;border-radius:50%;background:var(--c-punto)}
.escribe i:nth-child(2){opacity:.7}.escribe i:nth-child(3){opacity:.45}
.no-hace{margin-top:6px;padding-top:18px;border-top:1px solid rgba(var(--rgb-tinta),.08);font-size:14px;line-height:1.55;color:var(--c-texto-2)}
.aria-crm{position:relative;height:640px}
.aria-crm .rotulo{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px}
.capa-leads{position:absolute;left:0;top:0;width:487px}
.capa-equipo{position:absolute;left:252px;top:346px;width:383px}
.pie-capa{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--c-texto-2);padding-left:18px;border-left:2px solid var(--c-linea)}
.foco{position:absolute;border-radius:10px;box-shadow:0 0 0 2px var(--c-acento),0 0 0 6px rgba(var(--rgb-acento),.14);pointer-events:none}
.aria-crm>.nota{position:absolute;right:0;top:-4px}
.conector{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
@media (max-width:1199px){
  .escena-aria{padding:32px}
  .aria-cuerpo{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .conector{display:none}
  .aria-crm{height:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .capa-leads,.capa-equipo{position:relative;left:auto;top:auto;width:auto;max-width:520px}
  .capa-equipo{justify-self:end;width:100%;max-width:440px}
  .aria-crm>.nota{position:static;justify-self:start}
  .burbuja{max-width:100%}
}
@media (max-width:767px){
  .escena-aria{padding:24px 18px 28px;border-radius:24px}
  .rail{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:14px;padding-bottom:24px}
  .rail::before{left:19px;right:auto;top:20px;bottom:44px;width:2px;height:auto;background:linear-gradient(180deg,var(--c-acento) 0 80%,var(--c-verde) 80% 100%)}
  .r-paso{grid-template-rows:none;grid-template-columns:40px minmax(0,1fr);justify-items:start;align-items:center;column-gap:14px;text-align:left}
  .r-nodo{justify-self:center}
  .chat{padding:20px 16px}
  .capa-leads .pieza,.capa-equipo .pieza{width:100%!important}
  .capa-leads .pieza img,.capa-equipo .pieza img{width:var(--ancho-movil)!important;height:auto}
  .foco{display:none}
}

/* ========== 11. HOME · Qué cambia (antes → ASM 360 → después) ========== */
.fondo-piedra{background:var(--c-piedra);padding-bottom:var(--seccion)}
.cambio{height:520px}
.col-rot{position:absolute;top:0;display:inline-flex;align-items:center;gap:10px}
.col-rot--gris .rotulo{color:var(--c-texto-gris)}
.nucleo{position:absolute;display:grid;place-items:center;border-radius:50%;background:var(--c-superficie);box-shadow:var(--sh-filo),var(--sh-capa)}
.nucleo__dentro{display:grid;justify-items:center;gap:10px}
.nucleo .pieza{box-shadow:0 0 0 1px rgba(var(--rgb-tinta),.06)}
.satelite{position:absolute;display:inline-flex;align-items:center;gap:8px}
.satelite .pieza{border-radius:10px}
.satelite--aria{padding:8px 14px 8px 10px;border-radius:var(--r-pill);background:var(--c-superficie);box-shadow:var(--sh-filo),0 10px 24px -14px rgba(var(--rgb-tinta),.35)}
.despues .pieza{position:absolute}
.frases{display:grid;gap:22px}
.cambio .frases{position:absolute}
.frases li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.5}
.frases svg{width:28px;height:28px}
.cambio-movil{display:none}
@media (max-width:1199px){
  .cambio{display:none}
  .cambio-movil{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .cambio-movil__bloque{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .cambio-movil__antes svg{width:100%;height:auto;max-width:520px}
  .cambio-movil__nucleo{position:relative;justify-self:center;width:320px;height:320px}
  .cambio-movil__despues{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s6);align-items:start}
  .flecha-abajo{justify-self:center;width:2px;height:40px;background:linear-gradient(180deg,var(--c-pista),var(--c-acento))}
}
@media (max-width:599px){.cambio-movil__despues{grid-template-columns:minmax(0,1fr)}.cambio-movil__nucleo{zoom:.92}}
@media (max-width:359px){.cambio-movil__nucleo{zoom:.84}}

/* ========== 12. HOME · Sectores ========== */
.sect-cab{display:grid;grid-template-columns:1fr minmax(0,520px);gap:var(--s8);align-items:end}
.sect-cab p{font-size:16.5px;line-height:1.6;color:var(--c-texto-2)}
.sect-cab .enlace{margin-top:14px}
.sectores-banda{height:400px;margin-top:8px}
.tesela-sect{position:absolute}
.tesela-sect__img{position:absolute;inset:0;overflow:hidden;box-shadow:0 0 0 6px var(--c-fondo),0 0 0 7.5px var(--c-linea),var(--sh-capa)}
.tesela-sect__img img{width:100%;height:100%;object-fit:cover}
.tesela-sect__rot{position:absolute;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sectores-rejilla{display:none}
@media (max-width:1199px){
  .sect-cab{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .sectores-banda{display:none}
  .sectores-rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s5);margin-top:var(--s7)}
  .sectores-rejilla li{display:grid;gap:14px;justify-items:start}
  .sectores-rejilla figure{width:100%;aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;box-shadow:0 0 0 1px rgba(var(--rgb-tinta),.06),var(--sh-suave)}
  .sectores-rejilla figure.circulo{aspect-ratio:1;border-radius:50%;max-width:220px}
  .sectores-rejilla img{width:100%;height:100%;object-fit:cover}
  .sectores-rejilla .rotulo{display:inline-flex;align-items:center;gap:8px}
}
@media (max-width:767px){.sectores-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:359px){.sectores-rejilla .rotulo{font-size:11px;letter-spacing:.08em}}

/* ========== 13. Planes (resumen en Home y tarjetas en Precios) ========== */
.niveles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:stretch}
.nivel{position:relative;background:var(--c-superficie);border-radius:26px;padding:28px 22px 24px;display:flex;flex-direction:column;box-shadow:var(--sh-filo),var(--sh-suave)}
.barra-nivel{display:flex;gap:5px}
.barra-nivel i{flex:1;height:5px;border-radius:3px;background:rgba(var(--rgb-tinta),.10)}
.barra-nivel i.on{background:var(--c-acento)}
.nivel h3{margin-top:22px;font-size:clamp(26px,2.2vw,32px);letter-spacing:-.035em;line-height:1}
.nivel .lema{margin-top:9px;font-family:var(--f-mono);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-acento-texto);min-height:34px}
.cuota{margin-top:8px;font-size:clamp(24px,2vw,27px);font-weight:700;letter-spacing:-.03em;line-height:1.05;min-height:46px;display:flex;flex-direction:column;justify-content:flex-end}
.cuota small{font-size:13px;font-weight:400;letter-spacing:0;color:var(--c-texto-2);margin-bottom:3px}
.nivel .para{margin-top:12px;font-size:14px;line-height:1.5;color:var(--c-texto-2);min-height:63px}
.nivel dl{margin:16px 0 22px;padding-top:14px;border-top:1px solid var(--c-linea);display:grid;gap:10px}
.nivel dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--c-texto-2)}
.nivel dd{font-size:14.5px;font-weight:700;line-height:1.3;margin-top:2px}
.nivel .btn{margin-top:auto;min-height:46px;font-size:15px;white-space:normal;text-align:center}
.nivel--business{padding:38px 26px 28px;margin:-18px -6px;z-index:1;background:linear-gradient(180deg,#fff,var(--c-business-bg));box-shadow:0 0 0 1.5px var(--c-acento),0 1px 1px rgba(var(--rgb-tinta),.05),0 34px 64px -26px rgba(var(--rgb-tinta),.36),0 70px 110px -60px rgba(var(--rgb-acento),.40)}
.nivel--business h3{font-size:clamp(30px,2.6vw,38px)}
.nivel--business .cuota{font-size:clamp(28px,2.4vw,33px)}
.contar{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;align-items:start;margin-top:44px;padding-top:26px;border-top:1px solid var(--c-linea)}
.contar h3,.contar>p{font-weight:700;font-size:16.5px;letter-spacing:0}
.contar ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;font-family:var(--f-mono);font-size:12.5px;line-height:1.55;color:var(--c-texto-2)}
.contar li{display:flex;gap:10px;align-items:flex-start}
.contar li::before{content:"";flex:none;margin-top:4px;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--c-acento)}
.cab-der{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
@media (max-width:1199px){
  .niveles{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .nivel--business{margin:0}
  .contar{grid-template-columns:minmax(0,1fr)}
  .contar ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .niveles{grid-template-columns:minmax(0,1fr)}
  .nivel .lema,.nivel .para,.cuota{min-height:0}
  .contar ul{grid-template-columns:minmax(0,1fr)}
}

/* ========== 14. Cierre ========== */
.cierre{position:relative;margin-top:var(--seccion);min-height:520px;border-radius:var(--r-xl);overflow:hidden;background:radial-gradient(640px 460px at 76% 52%,rgba(var(--rgb-halo),.8),rgba(var(--rgb-halo),0) 70%),linear-gradient(180deg,#fff,var(--c-marfil));box-shadow:inset 0 1px 0 #fff,var(--sh-filo),var(--sh-capa);display:grid;grid-template-columns:minmax(0,600px) 1fr;align-items:center;padding:56px 0 56px 72px}
.cierre__titulo{font-size:clamp(32px,3.6vw,50px);line-height:1.05;letter-spacing:-.038em;font-weight:700;text-wrap:balance}
.cierre .acciones{margin-top:var(--s6)}
.cierre__vis{position:relative;width:600px;height:520px;justify-self:end;margin-right:-24px}
.cierre__vis>svg{position:absolute;inset:0;overflow:visible}
.cierre__vis>*:not(svg){position:absolute}
@media (max-width:1399px) and (min-width:1200px){.cierre__vis{zoom:.86}}
@media (max-width:1199px){
  .cierre{grid-template-columns:minmax(0,1fr);padding:48px 32px 24px}
  .cierre__vis{justify-self:center;margin:8px 0 0;zoom:.8}
}
@media (max-width:599px){.cierre{padding:36px 20px 8px;border-radius:26px}.cierre__vis{zoom:.56}}
@media (max-width:359px){.cierre__vis{zoom:.5}}

/* ========== 15. Pie ========== */
.pie{padding:88px 0 40px}
.pie__arriba{display:grid;grid-template-columns:300px 1fr;gap:var(--s8)}
.sm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.sm-title{font-family:var(--f-mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.sitemap-nav li{margin-bottom:9px;font-size:15px}
.sitemap-nav a{color:var(--c-texto-2);text-decoration:none}
.sitemap-nav a:hover,.pie a:hover{color:var(--c-navy);text-decoration:underline}
.redes{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.redes a{font-size:12.5px;border-radius:var(--r-pill);padding:8px 13px;font-family:var(--f-mono);box-shadow:inset 0 0 0 1px var(--c-linea);color:var(--c-texto-2);text-decoration:none}
.pie__abajo{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:64px;padding-top:26px;border-top:1px solid var(--c-linea);font-size:13px;color:var(--c-texto-2)}
.pie__abajo ul{display:flex;gap:8px 24px;flex-wrap:wrap}
.pie__abajo a{color:var(--c-texto-2);text-decoration:none}
@media (max-width:1023px){.pie__arriba{grid-template-columns:minmax(0,1fr)}.sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.sm-grid{grid-template-columns:minmax(0,1fr)}}

/* ========== 16. Páginas interiores (Precios, Demo, Condiciones) ========== */
.cabecera-pag{padding-block:clamp(40px,6vw,88px) var(--s7);background:radial-gradient(800px 480px at 85% 20%,rgba(var(--rgb-halo),.55),rgba(var(--rgb-halo),0) 70%)}
.cabecera-pag .entrada{margin-top:var(--s5);font-size:var(--fs-lead);line-height:1.6;color:var(--c-texto-2);max-width:760px}
.cabecera-pag .acciones{margin-top:var(--s6)}
.bloque{padding-block:var(--s8) 0}
.bloque--piedra{background:var(--c-piedra);padding-block:var(--s8);margin-top:var(--s8)}
.prosa{max-width:820px}
.lista-claro{display:grid;gap:14px;max-width:880px}
.lista-claro li{position:relative;padding-left:28px;line-height:1.6}
.lista-claro li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--c-acento)}
.tarjeta{background:var(--c-superficie);border-radius:var(--r-g);padding:clamp(22px,3vw,36px);box-shadow:var(--sh-filo),var(--sh-suave)}
.prox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);align-items:start}
.prox .rotulo{color:var(--c-acento-texto)}

/* selector de planes (pestañas; sin JS se ven todas las fichas) */
.selector{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s5)}
.selector a,.selector [role="tab"]{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--c-superficie);box-shadow:inset 0 0 0 1.5px rgba(var(--rgb-tinta),.16);font:700 15px/1 var(--f-sans);color:var(--c-navy);text-decoration:none;cursor:pointer;border:0}
.selector [aria-selected="true"]{background:var(--c-navy);color:#fff;box-shadow:none}
.selector [role="tab"][data-plan="business"]{box-shadow:inset 0 0 0 1.5px var(--c-acento)}
.selector [role="tab"][data-plan="business"][aria-selected="true"]{box-shadow:0 0 0 2px var(--c-acento)}
.fichas{display:grid;gap:var(--s5)}
.ficha{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:var(--s7);background:var(--c-superficie);border-radius:var(--r-g);padding:clamp(22px,3vw,40px);box-shadow:var(--sh-filo),var(--sh-suave)}
.ficha--business{box-shadow:0 0 0 1.5px var(--c-acento),var(--sh-capa)}
.ficha h3{font-size:clamp(28px,2.6vw,36px)}
.ficha .lema{margin-top:8px;font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-acento-texto)}
.ficha .cuota{min-height:0;margin-top:16px}
.ficha__txt{margin-top:16px;color:var(--c-texto-2);font-size:15.5px}
.ficha .btn{margin-top:var(--s5)}
.ficha dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;align-content:start}
.ficha dl div{padding-bottom:12px;border-bottom:1px solid var(--c-linea)}
.ficha dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--c-texto-2)}
.ficha dd{margin-top:4px;font-weight:700;font-size:15px;line-height:1.35}
@media (max-width:1023px){.ficha{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}
@media (max-width:599px){.ficha dl{grid-template-columns:minmax(0,1fr)}}

/* acordeones (details) */
.acordeon{display:grid;gap:12px}
.acordeon details{background:var(--c-superficie);border-radius:var(--r-m);box-shadow:var(--sh-filo),var(--sh-suave)}
.acordeon summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-weight:700;font-size:18px;cursor:pointer;list-style:none;border-radius:var(--r-m)}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--c-navy);border-bottom:2px solid var(--c-navy);transform:rotate(45deg);margin-top:-6px}
.acordeon details[open] summary::after{transform:rotate(-135deg);margin-top:6px}
.acordeon__cuerpo{padding:0 24px 22px}
.comp-fila{padding:16px 0;border-top:1px solid var(--c-linea)}
.comp-fila h3{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:0}
.comp-fila ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.comp-fila li{background:var(--c-fondo);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.35}
.comp-fila li b{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-texto-2);margin-bottom:4px;font-weight:700}
.comp-fila li.es-business{box-shadow:inset 0 0 0 1.5px var(--c-acento);background:var(--c-superficie)}
@media (max-width:1023px){.comp-fila ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:599px){.comp-fila ul{grid-template-columns:repeat(2,minmax(0,1fr))}.acordeon summary{padding:18px}.acordeon__cuerpo{padding:0 18px 18px}}
.faq details p{padding:0 24px 22px;color:var(--c-texto-2)}
@media (max-width:599px){.faq details p{padding:0 18px 18px}}

/* formulario de demo */
.demo-rejilla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px);gap:var(--s8);align-items:start}
.demo-lista{display:grid;gap:14px;margin-top:var(--s4)}
.demo-lista li{position:relative;padding-left:28px}
.demo-lista li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;background:var(--c-acento);box-shadow:0 0 0 4px var(--c-acento-luz)}
.demo-rejilla h2{font-size:clamp(22px,2vw,28px)}
.demo-rejilla p{margin-top:var(--s4)}
.demo-rejilla .para-quien{margin-top:var(--s7)}
.asm-form{display:grid;gap:18px}
.asm-form h2{margin-bottom:0}
.asm-ayuda{margin-top:0!important;color:var(--c-texto-2);font-size:var(--fs-sm)}
.asm-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.asm-field{display:grid;gap:6px}
.asm-field label{font-weight:700;font-size:15px}
.asm-opc{font-weight:400;color:var(--c-texto-2)}
.asm-field input[type="text"],.asm-field input[type="email"],.asm-field input[type="tel"],.asm-field select{width:100%;min-height:50px;padding:0 14px;border-radius:14px;border:1.5px solid var(--c-input-borde);background:var(--c-superficie);font:16px/1.3 var(--f-sans);color:var(--c-navy)}
.asm-field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--c-navy) 50%),linear-gradient(135deg,var(--c-navy) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.asm-field input:focus-visible,.asm-field select:focus-visible{outline:3px solid var(--c-acento-texto);outline-offset:1px;border-color:var(--c-navy)}
.asm-field [aria-invalid="true"]{border-color:var(--c-error);box-shadow:0 0 0 1px var(--c-error)}
.asm-err{color:var(--c-error);font-size:14px;font-weight:700;min-height:0}
.asm-err:empty{display:none}
.asm-check{display:grid!important;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-weight:400!important;font-size:15px!important;line-height:1.5}
.asm-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--c-navy)}
.asm-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.asm-estado:empty{display:none}
.asm-aviso{border-radius:14px;padding:14px 16px;font-size:15px}
.asm-aviso p+p{margin-top:6px}
.asm-aviso--error{background:var(--c-error-bg);color:var(--c-error);box-shadow:inset 0 0 0 1.5px rgba(var(--rgb-error-borde),.35)}
.asm-aviso--success{background:var(--c-exito-bg);color:var(--c-exito);box-shadow:inset 0 0 0 1.5px rgba(var(--rgb-exito-borde),.35)}
.asm-aviso--warning{background:var(--c-aviso);color:var(--c-navy);box-shadow:inset 0 0 0 1.5px rgba(var(--rgb-aviso-borde),.35)}
@media (max-width:1023px){.demo-rejilla{grid-template-columns:minmax(0,1fr)}}
@media (max-width:599px){.asm-fila{grid-template-columns:minmax(0,1fr)}}

/* condiciones */
.indice-cond{columns:2 260px;column-gap:var(--s7);margin-top:var(--s5)}
.indice-cond li{break-inside:avoid;padding:6px 0}
.indice-cond a{color:var(--c-navy);text-underline-offset:3px}
.cond{max-width:880px;padding-top:var(--s7);scroll-margin-top:100px}
.cond h2{font-size:clamp(24px,2.4vw,32px);display:flex;align-items:center;gap:12px;margin-bottom:var(--s4)}
.cond .lista-claro a{color:var(--c-navy);text-underline-offset:3px}
.cta-caja{margin-top:var(--s8);text-align:center}
.cta-caja p{margin-top:12px;color:var(--c-texto-2)}
.cta-caja .acciones{justify-content:center;margin-top:var(--s5)}
.cambio-movil__nucleo{margin-top:24px}
@media (max-width:399px){.btn{white-space:normal;text-align:center;padding:10px 20px;line-height:1.25}}

/* ========== 17. PEARL CHERRY: afinado de color (solo color) ========== */
/* SVG en línea: fill/stroke del HTML pasan a tokens */
svg [fill="#E0512D"]{fill:var(--c-acento)}
svg [stroke="#E0512D"]{stroke:var(--c-acento)}
svg [fill="#13203B"]{fill:var(--c-navy)}
svg [stroke="#13203B"]{stroke:var(--c-navy)}
svg [stroke="#2E8C80"]{stroke:var(--c-verde)}
svg [stroke="rgba(19,32,59,.16)"]{stroke:var(--c-pista)}
svg [stroke="#AEB4BE"]{stroke:var(--svg-conector-gris)}
svg [fill="#E6E3DC"]{fill:var(--svg-gris-1)}
svg [fill="#CFCAC1"]{fill:var(--svg-gris-2)}
svg [fill="#DAD6CE"]{fill:var(--svg-gris-3)}
svg [fill="#fff"]{fill:var(--c-superficie)}
/* CTA: hover y foco */
.btn--acento:hover{filter:none;background:var(--c-btn-hover)}
.btn--linea:hover{box-shadow:inset 0 0 0 1.5px var(--c-acento)}
/* menos cereza en microdetalles: bullets e iconos secundarios en gris cálido / navy */
.lista-claro li::before{box-shadow:inset 0 0 0 2px var(--c-gris-calido)}
.contar li::before{box-shadow:inset 0 0 0 2px var(--c-gris-calido)}
.demo-lista li::before{background:var(--c-navy);box-shadow:0 0 0 4px rgba(var(--rgb-tinta),.08)}
.tesela-sect__rot .nodo,.sectores-rejilla .rotulo .nodo,.cond h2 .nodo{box-shadow:inset 0 0 0 2px var(--c-gris-calido)}
.nodo--lleno{box-shadow:0 0 0 3px var(--c-acento-luz)}
/* clay pink reducido: halos de fondo más neutros */
.hero{background:radial-gradient(900px 620px at 78% 42%,rgba(var(--rgb-halo),.5),rgba(var(--rgb-halo),0) 70%),radial-gradient(700px 500px at 8% 10%,rgba(var(--rgb-piedra),.9),rgba(var(--rgb-piedra),0) 70%)}
/* selección de plan y bordes activos en cereza */
.selector [aria-selected="true"]{background:var(--c-navy);box-shadow:0 0 0 2px var(--c-acento)}
.acordeon details[open]>summary{box-shadow:inset 3px 0 0 var(--c-acento)}
.asm-check input{accent-color:var(--c-acento)}
.asm-field input:focus-visible,.asm-field select:focus-visible{border-color:var(--c-acento)}

/* ========== 18. G3-A · componentes para páginas nuevas (consumen el sistema; no cambian nada anterior) ========== */
.bloque--piedra-suave{background:var(--c-piedra);padding-block:var(--s8);margin-top:var(--s8)}
.pila{display:grid;gap:var(--s5)}
.rejilla-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.rejilla-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
@media (max-width:1023px){.rejilla-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.rejilla-2,.rejilla-3{grid-template-columns:minmax(0,1fr)}}
.tarjeta-mod{background:var(--c-superficie);border-radius:var(--r-g);padding:clamp(22px,2.6vw,32px);box-shadow:var(--sh-filo),var(--sh-suave);scroll-margin-top:110px;display:flex;flex-direction:column;gap:12px}
.tarjeta-mod h3{display:flex;align-items:center;gap:12px}
.tarjeta-mod p{color:var(--c-texto-2);font-size:15.5px;line-height:1.6}
.tarjeta-mod .pieza{margin-top:8px}
.tarjeta-mod--prox{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c-linea)}
.tarjeta-mod--prox .rotulo{color:var(--c-acento-texto);display:inline-flex;align-items:center;gap:8px}
.fila-pieza{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:center;padding-block:var(--s7);border-top:1px solid var(--c-linea);scroll-margin-top:110px}
.fila-pieza:first-child{border-top:0}
.fila-pieza--inv>.fila-pieza__texto{order:2}
.fila-pieza__texto{display:grid;gap:14px}
.fila-pieza__texto h2{font-size:clamp(26px,2.6vw,36px)}
.fila-pieza__texto p{color:var(--c-texto-2);font-size:16.5px;line-height:1.6}
.fila-pieza__vis{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;justify-items:start}
@media (max-width:1023px){.fila-pieza{grid-template-columns:minmax(0,1fr);gap:var(--s5)}.fila-pieza--inv>.fila-pieza__texto{order:0}}
.lista-nodos{display:grid;gap:12px}
.lista-nodos li{position:relative;padding-left:26px;line-height:1.55}
.lista-nodos li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--c-acento)}
/* ARIA protagonista compacto (/asm-360/) */
.aria-bloque{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s7);align-items:center;margin-top:40px}
.aria-bloque .burbuja{max-width:100%}
@media (max-width:1023px){.aria-bloque{grid-template-columns:minmax(0,1fr)}}
/* tabla de webs por plan: filas = planes; en móvil cada fila pasa a ficha */
.tabla-plan{width:100%;border-collapse:separate;border-spacing:0;background:var(--c-superficie);border-radius:var(--r-g);box-shadow:var(--sh-filo),var(--sh-suave);overflow:hidden}
.tabla-plan caption{text-align:left;padding:0 0 var(--s4);color:var(--c-texto-2);font-size:15px;caption-side:bottom;padding-top:var(--s4)}
.tabla-plan th,.tabla-plan td{text-align:left;padding:18px 24px;border-top:1px solid var(--c-linea);vertical-align:top;font-size:15.5px;line-height:1.5}
.tabla-plan thead th{border-top:0;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-texto-2);font-weight:700;background:var(--c-marfil)}
.tabla-plan tbody th{font-weight:700;font-size:17px;white-space:nowrap}
.tabla-plan tr.es-business th,.tabla-plan tr.es-business td{background:var(--c-business-bg)}
.tabla-plan tr.es-business th{box-shadow:inset 3px 0 0 var(--c-acento)}
@media (max-width:767px){
  .tabla-plan,.tabla-plan tbody,.tabla-plan tr,.tabla-plan th,.tabla-plan td{display:block;width:100%}
  .tabla-plan caption{display:block;width:100%;padding:16px 20px;border-top:1px solid var(--c-linea)}
  .tabla-plan thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tabla-plan tr{border-top:1px solid var(--c-linea);padding:6px 0}
  .tabla-plan tr:first-child{border-top:0}
  .tabla-plan th,.tabla-plan td{border-top:0;padding:8px 20px}
  .tabla-plan td::before{content:attr(data-col);display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-texto-2);font-weight:700;margin-bottom:2px}
}
/* comparativa completa: tabla en escritorio (≥1200) y acordeones por debajo */
.comp-completa{display:none}
@media (min-width:1200px){
  .comp-completa{display:block}
  .comp-completa+.acordeon{display:none}
}
.comp-completa table{width:100%;border-collapse:separate;border-spacing:0;background:var(--c-superficie);border-radius:var(--r-g);box-shadow:var(--sh-filo),var(--sh-suave);table-layout:fixed}
.comp-completa th,.comp-completa td{padding:13px 16px;border-top:1px solid var(--c-linea);text-align:left;vertical-align:top;font-size:14.5px;line-height:1.45}
.comp-completa thead th{border-top:0;position:sticky;top:92px;background:var(--c-superficie);z-index:2;font-size:20px;letter-spacing:-.02em;padding-top:22px}
.comp-completa thead th span{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-acento-texto);margin-top:4px}
.comp-completa thead th:first-child{border-radius:var(--r-g) 0 0 0}
.comp-completa tbody th{font-weight:700;color:var(--c-navy);width:22%}
.comp-completa tr.grupo th{background:var(--c-marfil);font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-texto-2)}
.comp-completa .es-business{background:var(--c-business-bg);box-shadow:inset 1.5px 0 0 var(--c-acento),inset -1.5px 0 0 var(--c-acento)}
/* partners: flujo Tú → ASM → Cliente */
.flujo-3{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s6)}
.flujo-3::before{content:"";position:absolute;left:calc(100%/6);right:calc(100%/6);top:19px;height:2px;background:var(--c-acento)}
.flujo-3 li{position:relative;display:grid;justify-items:center;text-align:center;gap:10px}
.flujo-3 .r-nodo{width:14px;height:14px;margin-top:13px;border-radius:50%;background:var(--c-superficie);box-shadow:inset 0 0 0 2px var(--c-acento),0 0 0 5px var(--c-fondo)}
.flujo-3 li:last-child .r-nodo{background:var(--c-navy);box-shadow:0 0 0 5px var(--c-fondo)}
.flujo-3 p{color:var(--c-texto-2);font-size:15px;max-width:260px}
@media (max-width:599px){
  .flujo-3{grid-template-columns:minmax(0,1fr);gap:18px}
  .flujo-3::before{left:19px;right:auto;top:20px;bottom:30px;width:2px;height:auto}
  .flujo-3 li{grid-template-columns:40px minmax(0,1fr);justify-items:start;text-align:left;column-gap:14px}
  .flujo-3 .r-nodo{margin:4px 0 0 13px;grid-row:span 2}
}
.pasos-4{counter-reset:paso;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
@media (max-width:1023px){.pasos-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.pasos-4{grid-template-columns:minmax(0,1fr)}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s5)}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:var(--c-superficie);box-shadow:var(--sh-filo);font-size:14.5px}
.chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-acento)}

/* ========== 19. G3 FINAL · patrones reutilizables de G3-A y G3-B (antes en línea). Solo añade; no cambia nada anterior. ========== */
/* utilidades de espaciado (escala del sistema) */
.u-mt-s4{margin-top:var(--s4)}.u-mt-s5{margin-top:var(--s5)}.u-mt-s6{margin-top:var(--s6)}.u-mt-s7{margin-top:var(--s7)}
.u-m0{margin:0}.u-pt0{padding-top:0}
.titulo-h3{font-size:var(--fs-h3)}
.titulo-bloque{margin-bottom:var(--s6)}
.enlace-texto{color:var(--c-navy);text-underline-offset:3px}
/* texto */
.texto-lead{max-width:820px;font-size:var(--fs-lead);line-height:1.6;color:var(--c-texto-2)}
.texto-nota{margin-top:var(--s4);max-width:820px;font-size:var(--fs-sm);color:var(--c-texto-2)}
.texto-nota--normal{margin-top:20px;font-size:inherit}
.parrafo{margin-top:20px;max-width:820px}
/* rejilla de tarjetas que se adapta sola (sin media queries) */
.rejilla-auto{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.tarjeta__cuerpo{margin-top:10px;color:var(--c-texto-2)}
.tarjeta__titulo{margin-top:10px;font-size:var(--fs-h3)}
.tarjeta__h{margin-top:var(--s2)}
.tarjeta__txt{margin-top:var(--s2);flex:1;color:var(--c-texto-2)}
.tarjeta--col{display:flex;flex-direction:column}
.tarjeta--estrecha{max-width:880px}
.tarjeta--chat{max-width:760px}
.tarjeta__foto{aspect-ratio:4/3;border-radius:var(--r-m);overflow:hidden;margin-bottom:var(--s4)}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.rotulo--paso{margin-bottom:var(--s3)}
.rotulo--acento{display:inline-flex;align-items:center;gap:8px;color:var(--c-acento-texto)}
/* cabecera de página con foto (texto + retrato 3:4) */
.cab-foto{display:flex;flex-wrap:wrap;gap:var(--s7);align-items:center}
.cab-foto__texto{flex:1 1 520px;min-width:0}
.cab-foto__fig{flex:0 1 360px;min-width:0;margin:0}
.cab-foto__marco{border-radius:var(--r-g);overflow:hidden;box-shadow:var(--sh-capa);aspect-ratio:3/4}
.cab-foto__marco img{width:100%;height:100%;object-fit:cover}
/* dos columnas que se apilan solas */
.dos-col{display:flex;flex-wrap:wrap;gap:var(--s7);align-items:flex-start}
.dos-col>*{flex:1 1 400px;min-width:0}
/* escena de chat de ejemplo */
.chat-escena{max-width:720px}
.chat-escena>.nota{margin-bottom:var(--s4)}
.msg--cliente .burbuja{border-radius:18px 4px 18px 18px}
/* captura real del CRM dentro de una figura (el ancho intrínseco de cada captura va en el HTML) */
.pieza-fig{margin-top:var(--s6)}
.pieza-fig>.nota{margin-top:14px}
.pieza--fig{max-width:100%;border-radius:14px}
/* chat ARIA embebido (mismo marcado que la web viva; el JS aria-embed.js no se toca) */
.aria-embed-panel{display:grid;gap:var(--s3)}
.aria-embed-header{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.aria-embed-agent{display:flex;align-items:center;gap:var(--s3)}
.aria-embed-agent em{font-style:normal;font-size:var(--fs-xs);color:var(--c-texto-2);margin-left:6px}
.aria-embed-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--c-navy);color:#fff;font-weight:700}
.aria-messages{min-height:120px;background:var(--c-piedra);border-radius:14px;padding:var(--s3)}
.aria-input-wrap{display:flex;gap:var(--s2)}
.aria-input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:14px;border:1.5px solid var(--c-input-borde);font:16px var(--f-sans);background:var(--c-superficie);color:var(--c-navy)}
.aria-send{min-width:48px;min-height:48px;border:0;border-radius:var(--r-pill);background:var(--c-btn-2);color:#fff;font-size:18px;cursor:pointer}
.aria-reset{min-width:44px;min-height:44px;border:0;border-radius:var(--r-pill);background:var(--c-piedra);color:var(--c-navy);cursor:pointer}
.aria-privacy,.aria-usage-note{font-size:var(--fs-xs);color:var(--c-texto-2)}
.aria-alt{font-size:var(--fs-sm)}
.aria-embed-panel a{color:var(--c-navy)}
/* artículos del blog y guías */
.prosa--articulo h2{font-size:clamp(24px,2.4vw,32px);margin-top:var(--s7)}
.prosa--articulo p,.prosa--articulo .lista-claro{margin-top:var(--s4)}
/* formularios heredados (diagnóstico y guías) sobre los componentes .asm-* */
.asm-form--diag label.asm-field{font-weight:700;font-size:var(--fs-sm)}
.asm-form--diag .asm-fila{margin-bottom:var(--s4)}
.asm-form--diag .asm-check{margin-top:14px}
.asm-form--diag .btn{margin-top:20px}
.asm-form--diag a{color:var(--c-navy)}
/* bloques y cierres */
.bloque--final{padding-bottom:var(--s8)}
.cta-caja--final{margin-bottom:var(--s8)}
.cierre.cierre--simple{min-height:0;grid-template-columns:1fr;padding:clamp(36px,5vw,56px) clamp(20px,5vw,72px)}
.cierre__titulo.cierre__titulo--m{font-size:clamp(28px,3.2vw,44px)}
.cierre__sub{font-size:18px;font-weight:400;letter-spacing:0;margin-top:14px}
.cierre__nota{font-size:var(--fs-sm);font-weight:400;letter-spacing:0;margin-top:18px}
.aria-sec.aria-sec--compacta{margin-top:var(--s7)}
.fila-pieza.fila-pieza--una{grid-template-columns:minmax(0,1fr)}
.no-hace.u-m0{margin:0}
.texto-sm{font-size:var(--fs-sm)}
.u-mt-s2{margin-top:var(--s2)}