/* ==========================================================
   Datsool — CX Neural V2 (oct 2026)
   Se carga al final, después de atlas.css.
   Paleta: marfil de fondo, marino para texto y profundidad,
   turquesa = actividad de la red, azul datos = secundario,
   coral = prioridades (poco y a propósito).
   ========================================================== */
:root {
  --ds-deep-navy: #172A35;
  --ds-warm-ivory: #F2F0E9;
  --ds-neural-teal: #55B8A5;
  --ds-teal-texto: #2A7466;   /* turquesa con contraste suficiente para texto sobre marfil */
  --ds-data-blue: #A6B8C7;
  --ds-signal-coral: #D99A78;
  --ds-coral-texto: #9A5634;
  --ds-surface: #FFFFFF;
  --ds-border: #D9D7D0;
  --ds-muted: #56656C;
  --ds-azul: #2C6AA0;        /* azul Datsool: acentos de texto y enlaces */
  --ds-azul-suave: #9DB7CF;
}
body.claro { --texto: var(--ds-deep-navy); --gris: var(--ds-muted); --tinta: var(--ds-deep-navy); }
::selection { background: var(--ds-neural-teal); color: var(--ds-deep-navy); }

/* Logo: mismas barras, tono turquesa */
.logo img { filter: hue-rotate(-52deg) saturate(.75) brightness(1.1); }

/* ---------- Botones: marino sólido; turquesa solo como señal ---------- */
.claro .btn-verde, .claro .btn-azul, .claro .btn-morado,
.claro .productos-3 .producto-emp .btn-morado { background: var(--ds-deep-navy); color: var(--ds-warm-ivory); border: 1px solid var(--ds-deep-navy); }
.claro .btn-verde:hover, .claro .btn-azul:hover, .claro .btn-morado:hover,
.claro .productos-3 .producto-emp .btn-morado:hover { background: #223D4B; color: #fff; }
.claro .nav .btn-verde, .claro .nav .btn-verde:hover { color: var(--ds-warm-ivory); }
.claro .btn-verde::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-neural-teal); box-shadow: 0 0 0 3px rgba(85,184,165,.25); flex: none; }
.claro .nav .btn-verde::after { display: none; }
.claro .btn-plata { background: var(--ds-warm-ivory); color: var(--ds-deep-navy); }
.claro .btn-texto, .claro .hero-ruta a { color: var(--ds-azul); }
.claro .marca-producto .barras i { background: var(--ds-azul); }
.claro .marca-producto .barras i:last-child { background: var(--ds-neural-teal); }
.claro h1 em, .claro h2 em { color: var(--ds-azul); }

/* Prioridades en coral */
.claro .leyenda .l-prioridad::before, .claro .radar .punto-bajo { background: var(--ds-signal-coral); fill: var(--ds-signal-coral); }
.claro .cc-tabla .m-prioridad { background: #F3DED1; color: var(--ds-coral-texto); }
.claro .cc-tabla .m-fuerte { background: #D5ECE6; color: #1F5C51; }

/* Cinta de marcas: marino con texto marfil (ya no lima) */
.claro .cinta { background: var(--ds-deep-navy); color: var(--ds-warm-ivory); }
.claro .cinta-titulo, .claro .cinta-nota { color: var(--ds-data-blue); }
.claro .cinta-titulo b { color: var(--ds-neural-teal); }
.claro .cinta-lista li::after { color: var(--ds-neural-teal); }

/* Tarjeta Pro: marino profundo */
.claro .productos-3 .producto-pro { background: var(--ds-deep-navy); border-color: var(--ds-deep-navy); }
.claro .productos-3 .producto-pro .lista-check li::before { color: var(--ds-neural-teal); }
.claro .productos-3 .producto-pro > p:not(.gancho):not(.marca-producto):not(.precio-producto):not(.etapa-servicio) { color: #C3CFD6; }

/* Radar en turquesa */
.claro .radar .area { fill: rgba(85,184,165,.18); stroke: var(--ds-neural-teal); }
.claro .radar .punto, .claro .radar .punto-alto { fill: var(--ds-teal-texto); }
.claro .leyenda .l-fuerte::before { background: var(--ds-neural-teal); }
.claro .radar-muestra .marcador { color: var(--ds-teal-texto); }

/* ==========================================================
   Portada: red persistente detrás del contenido
   ========================================================== */
.con-red main { position: relative; isolation: isolate; }
.con-red main > section { position: relative; z-index: 1; }
.con-red .hero, .con-red .seccion, .con-red .seccion-carbon, .con-red .empresas { background: transparent; }
.con-red .portal-hero, .con-red .cabecera-empresas, .con-red .cabecera-pagina {
  background: radial-gradient(40% 70% at 95% 10%, rgba(166,184,199,.24), transparent 70%), radial-gradient(35% 60% at 70% 100%, rgba(217,154,120,.12), transparent 70%); }
.con-red .subnav { z-index: 40; }
.portada-neural .hero::before { background:
    linear-gradient(rgba(23,42,53,.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(23,42,53,.035) 1px, transparent 1px) 0 0 / 64px 64px; }
.portada-neural .seccion, .portada-neural .seccion-carbon { border-top: 1px solid var(--ds-border); border-bottom: 0; }

.red-cx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rc-svg { display: block; }

/* Hilo: base en azul claro; lo recorrido en turquesa con brillo y partículas */
.rc-hilo-base { fill: none; stroke: var(--ds-azul-suave); stroke-width: 2; stroke-dasharray: 4 7; opacity: .75; }
.rc-hilo-brillo { fill: none; stroke: var(--ds-neural-teal); stroke-width: 12; stroke-linecap: round; opacity: .16; }
.rc-hilo { fill: none; stroke: var(--ds-neural-teal); stroke-width: 3.5; stroke-linecap: round; }
.rc-mascara-trazo { fill: none; stroke: #fff; stroke-width: 14; }
.rc-flujo { fill: none; stroke: #F4FFFC; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 34; animation: rc-flujo 1.4s linear infinite; }
@keyframes rc-flujo { to { stroke-dashoffset: -36; } }
.rc-punta { fill: var(--ds-warm-ivory); stroke: var(--ds-neural-teal); stroke-width: 3.5; filter: drop-shadow(0 0 8px rgba(85,184,165,.9)); }
.rc-punta.oculta { opacity: 0; }

/* Neuronas del ciclo: núcleo, ondas que se expanden y ramas que brotan */
.rc-parada .rc-nucleo { fill: var(--ds-warm-ivory); stroke: var(--ds-azul-suave); stroke-width: 2.5; transition: fill .5s, stroke .5s; }
.rc-parada.rc-on .rc-nucleo { fill: var(--ds-deep-navy); stroke: var(--ds-neural-teal); stroke-width: 3.5; }
.rc-parada.rc-prioridad.rc-on .rc-nucleo { stroke: var(--ds-signal-coral); }
.rc-halo { fill: rgba(85,184,165,.2); opacity: 0; transition: opacity .6s; }
.rc-parada.rc-on .rc-halo, .rc-red.activa .rc-halo { opacity: 1; }
.rc-prioridad .rc-halo { fill: rgba(217,154,120,.24); }
.rc-onda, .rc-estallido { fill: none; stroke: var(--ds-neural-teal); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rc-prioridad .rc-onda, .rc-prioridad .rc-estallido { stroke: var(--ds-signal-coral); }
.rc-parada.rc-on .rc-onda { animation: rc-onda 3.2s ease-out infinite; }
.rc-parada.rc-on .rc-onda-2 { animation-delay: 1.6s; }
.rc-red.activa .rc-onda { animation: rc-onda 4s ease-out infinite; }
.rc-red.activa .rc-nodo:nth-child(odd) .rc-onda { animation-delay: 2s; }
@keyframes rc-onda { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(5.5); } }
.rc-parada.rc-recien .rc-estallido { animation: rc-estallido 1.3s cubic-bezier(.2,.7,.3,1) 1; }
@keyframes rc-estallido { 0% { opacity: .9; stroke-width: 4; transform: scale(1); } 100% { opacity: 0; stroke-width: 1; transform: scale(13); } }
.rc-parada.rc-recien .rc-nucleo { animation: rc-latido-fuerte .9s ease-out 1; transform-box: fill-box; transform-origin: center; }
@keyframes rc-latido-fuerte { 0% { transform: scale(1); } 35% { transform: scale(1.9); } 100% { transform: scale(1); } }
.rc-rama { fill: none; stroke: var(--ds-azul-suave); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; transition: stroke-dashoffset .9s cubic-bezier(.3,.7,.3,1), stroke .6s; }
.rc-rama-2 { stroke-width: 1.1; }
.rc-parada.rc-on .rc-rama { stroke-dashoffset: 0; stroke: var(--ds-neural-teal); }
.rc-parada.rc-prioridad.rc-on .rc-rama { stroke: #E0B49A; }
.rc-brote { fill: var(--ds-neural-teal); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .5s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.rc-prioridad .rc-brote { fill: var(--ds-signal-coral); }
.rc-parada.rc-on .rc-brote { opacity: 1; transform: scale(1); }
.rc-etiqueta { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; fill: var(--ds-muted); opacity: .45; transition: opacity .5s, fill .5s; }
.rc-parada.rc-on .rc-etiqueta { opacity: 1; fill: var(--ds-azul); }
.rc-parada.rc-prioridad.rc-on .rc-etiqueta { fill: var(--ds-coral-texto); }

/* Redes del inicio y del cierre */
.rc-red .rc-arista { fill: none; stroke: var(--ds-azul-suave); stroke-width: 1.6; opacity: .65; transition: stroke .6s, opacity .6s; }
.rc-red.activa .rc-arista { stroke: var(--ds-neural-teal); opacity: .9; }
.rc-red.activa .rc-arista.rc-prioridad { stroke: var(--ds-signal-coral); }
.rc-red .rc-nucleo { fill: var(--ds-azul-suave); stroke: var(--ds-warm-ivory); stroke-width: 2; transition: fill .6s, stroke .6s; }
.rc-red.activa .rc-nucleo { fill: var(--ds-deep-navy); stroke: var(--ds-neural-teal); stroke-width: 3; }
.rc-red.activa .rc-prioridad .rc-nucleo { stroke: var(--ds-signal-coral); }
.rc-chispa { fill: var(--ds-neural-teal); opacity: 0; transition: opacity .6s; }
.rc-chispa.rc-prioridad { fill: var(--ds-signal-coral); }
.rc-red.activa .rc-chispa { opacity: 1; }
.rc-titulo { font: 600 14px var(--display); fill: var(--ds-deep-navy); letter-spacing: -.01em; opacity: .55; transition: opacity .6s; }
.rc-red.activa .rc-titulo { opacity: 1; }

/* Contenido legible encima de la red */
.portada-neural .hero-texto { max-width: 560px; }
.portada-neural .hero-red h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.portada-neural .hero-cifras { background: rgba(255,255,255,.92); }
.portada-neural .hero-cifras li:nth-child(1)::before { background: radial-gradient(circle, var(--ds-neural-teal) 0 3px, transparent 4px); }
.portada-neural .hero-cifras li:nth-child(2)::before, .portada-neural .hero-cifras li:nth-child(3)::before { background: radial-gradient(circle, var(--ds-azul) 0 3px, transparent 4px); }
.portada-neural .hero-cifras li:nth-child(4)::before { background: radial-gradient(circle, var(--ds-signal-coral) 0 3px, transparent 4px); }

/* ---------- ClienteCheck: un solo bloque en azul profundo ---------- */
.portada-neural #clientecheck { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 0; }
.portada-neural .como-funciona {
  background: radial-gradient(70% 90% at 100% 0%, rgba(85,184,165,.22), transparent 60%), linear-gradient(135deg, var(--ds-deep-navy), #1D4566 70%, #23557C);
  color: var(--ds-warm-ivory); border-radius: 14px; padding: clamp(1.6rem, 4.5vw, 3.6rem);
  box-shadow: 0 30px 60px -40px rgba(23,42,53,.6);
}
.portada-neural .como-funciona h2 { color: #fff; }
.portada-neural .como-funciona .cabecera-seccion p:not(.marca-producto) { color: #C8D6E0; }
.portada-neural .como-funciona .marca-producto { color: #A9BDCB !important; }
.portada-neural .como-funciona .areas-cc li { background: rgba(255,255,255,.06); border-color: rgba(166,184,199,.35); color: #E3EBF0; }
.portada-neural .como-funciona .pasos li { border-top-color: rgba(166,184,199,.25); }
.portada-neural .como-funciona .pasos li::before { color: var(--ds-neural-teal); }
.portada-neural .como-funciona .pasos h3 { color: #fff; }
.portada-neural .como-funciona .pasos p { color: #C8D6E0; }
.portada-neural .como-funciona .btn-verde { background: var(--ds-neural-teal); border-color: var(--ds-neural-teal); color: var(--ds-deep-navy); }
.portada-neural .como-funciona .btn-verde:hover { background: #7CCDBE; color: var(--ds-deep-navy); }
.portada-neural .como-funciona .btn-verde::after { background: var(--ds-deep-navy); box-shadow: none; }
.portada-neural .como-funciona .cabecera-seccion { margin-bottom: 2rem; }

#precios .cabecera-seccion { max-width: 720px; }

/* ---------- Método ---------- */
.metodo .cabecera-seccion { max-width: 760px; }
.ciclo { font: .78rem var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ds-muted) !important; margin-top: 1.2rem; }
.ciclo span { color: var(--ds-neural-teal); margin: 0 .25rem; }
.pista { position: relative; height: 18px; margin: 0 0 1.2rem; display: grid; grid-template-columns: repeat(4, 1fr); }
.pista::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--ds-data-blue); }
.pista i { position: relative; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--ds-deep-navy); box-shadow: 0 0 0 4px var(--ds-warm-ivory), 0 0 0 5px var(--ds-neural-teal); }
.pista i:nth-child(3) { box-shadow: 0 0 0 4px var(--ds-warm-ivory), 0 0 0 5px var(--ds-signal-coral); }
.pista b { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ds-neural-teal); box-shadow: 0 0 12px var(--ds-neural-teal); animation: pista 6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes pista { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.metodo-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.metodo-pasos span { display: block; font: .75rem var(--mono); letter-spacing: .17em; color: var(--ds-teal-texto); margin-bottom: .8rem; }
.metodo-pasos .paso-prioridad span { color: var(--ds-coral-texto); }
.metodo-pasos h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0 0 .5rem; }
.metodo-pasos p { color: var(--ds-muted); margin: 0; max-width: 24ch; }
@media (max-width: 880px) {
  .pista { display: none; }
  .metodo-pasos { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--ds-data-blue); margin-left: .4rem; }
  .metodo-pasos li { position: relative; padding: 0 0 1.8rem 1.6rem; }
  .metodo-pasos li::before { content: ""; position: absolute; left: -6px; top: .1rem; width: 11px; height: 11px; border-radius: 50%; background: var(--ds-deep-navy); box-shadow: 0 0 0 3px var(--ds-warm-ivory), 0 0 0 4px var(--ds-neural-teal); }
  .metodo-pasos .paso-prioridad::before { box-shadow: 0 0 0 3px var(--ds-warm-ivory), 0 0 0 4px var(--ds-signal-coral); }
}

/* ---------- Servicios ---------- */
.claro .productos-3 .producto-cc { border-color: #9FD3C8; background: linear-gradient(180deg, #E4F2EE, #fff 45%); }
.claro .productos-3 .producto-emp { background: #E2E9EF; border-color: #E2E9EF; }
.claro .productos-3 .producto-cc .precio-producto { color: var(--ds-teal-texto); }
.claro .etiqueta-inicio { background: var(--ds-neural-teal); color: var(--ds-deep-navy); }

/* Objetos que la red toca: se iluminan al conectarse */
.con-red section .producto, .con-red section .como-funciona, .con-red section [class] { transition: box-shadow .6s ease; }
.con-red section .rc-on:not(i):not(li):not(ol) { box-shadow: 0 0 0 1px rgba(85,184,165,.6), 0 18px 50px -18px rgba(85,184,165,.55); }
.con-red section .producto-pro.rc-on, .con-red section .como-funciona.rc-on { box-shadow: 0 0 0 1px rgba(85,184,165,.75), 0 24px 60px -20px rgba(85,184,165,.6); }
/* Micelio: hifas que envuelven secciones y cajas */
.rc-flujo { opacity: 0; transition: opacity .6s; }
.rc-lleno .rc-flujo { opacity: 1; }
.rc-hilo-base { opacity: .32; }
.rc-hilo-fino { stroke-width: 2.2; }
.rc-hilo-fino ~ .rc-flujo, .rc-tramo .rc-hilo-fino + .rc-flujo { stroke-width: 1.8; }
.rc-hifa-base { fill: none; stroke: var(--ds-azul-suave); stroke-width: 1; stroke-dasharray: 2 6; opacity: .3; }
.rc-hifa { fill: none; stroke: var(--ds-neural-teal); stroke-width: 1.2; stroke-linecap: round; opacity: .5; }
.rc-pelo { fill: none; stroke: var(--ds-neural-teal); stroke-width: 1; stroke-linecap: round; opacity: .55; }
.rc-espora { fill: var(--ds-neural-teal); opacity: 0; transition: opacity .6s .3s; }
.rc-lleno .rc-espora { opacity: .8; }
.rc-nudo .rc-nucleo { fill: var(--ds-warm-ivory); }
@media (max-width: 880px) { .rc-hilo-brillo { stroke-width: 8; } .rc-hilo { stroke-width: 2.6; } .rc-hilo-fino { stroke-width: 1.8; } }

/* ---------- Radar dentro del bloque azul: sin caja, como parte de la red ---------- */
.portada-neural .como-funciona .radar-muestra { background: radial-gradient(closest-side, rgba(85,184,165,.16), transparent 75%); border: 0; box-shadow: none; padding: 1rem 0 0; }
.portada-neural .como-funciona .radar-muestra::before { color: #A9BDCB; left: 0; top: 0; }
.portada-neural .como-funciona .radar-muestra .marcador { color: #fff; }
.portada-neural .como-funciona .radar-muestra .marcador small { color: #A9BDCB; }
.portada-neural .como-funciona .radar .rejilla, .portada-neural .como-funciona .radar .eje { stroke: rgba(166,184,199,.28); }
.portada-neural .como-funciona .radar .area { fill: rgba(85,184,165,.28); stroke: var(--ds-neural-teal); stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(85,184,165,.55)); }
.portada-neural .como-funciona .radar .punto, .portada-neural .como-funciona .radar .punto-alto { fill: var(--ds-neural-teal); stroke: #1D4566; stroke-width: 3; }
.portada-neural .como-funciona .radar .punto-bajo { fill: var(--ds-signal-coral); stroke: #1D4566; stroke-width: 3; }
.portada-neural .como-funciona .radar .etiqueta { fill: #DCE6EC; }
.portada-neural .como-funciona .leyenda, .portada-neural .como-funciona .radar-muestra figcaption { color: #C8D6E0; }

/* ---------- Quiénes somos y cierre ---------- */
.portada-neural .seccion-nosotros h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 16ch; }
.portada-neural .nosotros > div { max-width: 720px; }
.portada-neural .llamado { min-height: 560px; display: flex; align-items: center; }
.portada-neural .llamado .contenedor { display: block; }
.portada-neural .llamado .contenedor > div { max-width: 560px; }
.portada-neural .llamado h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); max-width: 14ch; margin-bottom: 1rem; }
.portada-neural .llamado p { font-size: 1.2rem; color: var(--ds-muted); }
.portada-neural .llamado .acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ---------- Celular ---------- */
@media (max-width: 880px) {
  .portada-neural .hero-red { padding-bottom: 2.5rem; }
  .portada-neural .hero-red { gap: 2rem; }
  .portada-neural .hero-texto { padding-right: 14px; }
  .portada-neural .como-funciona { border-radius: 10px; }
  .portada-neural .llamado { min-height: 0; padding-top: 220px; }
  .portada-neural .llamado .contenedor > div { padding-right: 14px; }
}

/* ==========================================================
   Artículos: el dibujo de la red se funde con la tarjeta
   ========================================================== */
.claro .arte { background: radial-gradient(90% 80% at 75% 25%, #DCE8F3, #EEF3F6 55%, rgba(242,240,233,0) 100%); }
.claro .arte .c-polvo circle { fill: var(--ds-azul); opacity: .18; }
.claro .arte .c-linea { opacity: .85; stroke-width: 1.6; }

/* Tarjetas y destacado: la red sigue el contorno de la tarjeta y vive solo en
   el espacio libre (assets/js/constelacion.js, contorno()); nunca toca el texto */
.claro .lectura-arte { position: relative; overflow: hidden; padding: 1.4rem; justify-content: flex-end; min-height: 330px; isolation: isolate; }
.claro .lectura-arte > span, .claro .lectura-arte > strong { padding: 0; position: relative; }
.claro .destacado { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: minmax(0, 1fr); min-height: 340px; padding: clamp(1.4rem, 4vw, 2.6rem); background: #fff; }
.claro .destacado > div:first-child { max-width: 560px; position: relative; z-index: 1; }
.claro .lectura-arte .arte, .claro .destacado .arte { position: absolute; inset: 0; z-index: 0; margin: 0; border-radius: 0; aspect-ratio: auto; order: 0;
  background: radial-gradient(70% 55% at 70% 18%, rgba(166,184,199,.22), transparent 70%); }
.claro .destacado .arte { background: radial-gradient(45% 80% at 80% 50%, rgba(166,184,199,.24), transparent 75%); }
.c-contorno { display: block; }
.c-contorno .c-borde { fill: none; stroke: var(--ds-azul-suave); stroke-width: 1.4; opacity: .7; stroke-linecap: round; }
.c-contorno .c-borde-pulso { fill: none; stroke: var(--ds-neural-teal); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 10 90; animation: c-recorre 7s linear infinite; }
.c-contorno .c-linea-z { fill: none; stroke: var(--ds-azul-suave); stroke-width: 1.3; opacity: .8; }
.c-contorno .c-sinapsis { stroke: var(--ds-neural-teal); opacity: .65; stroke-dasharray: 3 4; }
.c-contorno .c-ancla { fill: var(--ds-warm-ivory); stroke: var(--ds-neural-teal); stroke-width: 1.6; }
.c-contorno .c-halo-z { opacity: .16; }
.c-contorno .c-nucleo-z { transform-box: fill-box; transform-origin: center; animation: c-late 4.5s ease-in-out infinite; }
.lectura-arte:hover .c-borde, .destacado:hover .c-borde { stroke: var(--ds-neural-teal); opacity: 1; }
.lectura-arte:hover .c-borde-pulso, .destacado:hover .c-borde-pulso { animation-duration: 2.6s; }
@keyframes c-recorre { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes c-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (max-width: 880px) {
  .claro .destacado { min-height: 0; padding-top: 190px; }
}

/* Cabecera de la biblioteca y artículo: sin caja, fundido con la página */
.claro .arte-cabecera, .claro .arte-articulo { background: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.claro .arte-articulo { background: radial-gradient(closest-side, #DCE8F3, transparent); }
.claro .relacionado .arte { background: #E3ECF4; }

@media (prefers-reduced-motion: reduce) {
  .rc-red.activa .rc-halo, .rc-onda, .rc-flujo, .c-borde-pulso, .c-nucleo-z { animation: none !important; }
  .pista b { display: none; }
}

/* ClienteCheck: la barra de progreso acompaña mientras bajas */
.cc-seguimiento {
  position: sticky; top: 72px; z-index: 30;
  margin: 1.4rem -1rem 0; padding: .7rem 1rem .55rem;
  background: rgba(242, 240, 233, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(23, 42, 53, .08);
}
.cc-seguimiento .cc-progreso { margin: 0 0 .45rem; height: 5px; border-radius: 99px; background: rgba(23, 42, 53, .1); }
.cc-seguimiento .cc-progreso span { border-radius: 99px; background: linear-gradient(90deg, #55B8A5, #2C6AA0); }
.cc-seguimiento .cc-contador { margin: 0; }
@media (max-width: 880px) { .cc-seguimiento { top: 62px; } }

/* ==========================================================
   Portada (oct 2026): orden qué hacemos → ClienteCheck → planes → método → nosotros.
   En pantallas de escritorio el tamaño también depende de la ALTURA de la
   ventana (vh), para que en una laptop de 15" cada sección quepa completa.
   ========================================================== */
.productos-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .productos-2 { grid-template-columns: 1fr; } }
.claro .productos-3 .producto-emp > p:not(.gancho):not(.marca-producto):not(.precio-producto):not(.nota-precio) { color: var(--ds-muted); }

/* ClienteCheck: texto y radar arriba, los tres pasos en una fila abajo */
.portada-neural .cc-bloque { grid-template-columns: 1.15fr .85fr; align-items: center; row-gap: 0; }
.portada-neural .cc-bloque .cabecera-seccion { margin-bottom: 0; }
.portada-neural .cc-bloque .areas-cc { margin-bottom: 1.4rem; }
.portada-neural .cc-bloque .cierre-seccion { margin: 0; }
.portada-neural .cc-bloque .radar-muestra svg { max-height: 300px; }
.portada-neural .cc-pasos { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 1.6rem; }
.portada-neural .cc-pasos li { padding-top: 1rem; }
.portada-neural .cc-pasos li::before { margin-bottom: .5rem; display: block; }
.portada-neural .cc-pasos h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.portada-neural .cc-pasos p { font-size: .95rem; line-height: 1.5; margin: 0; }
@media (max-width: 980px) {
  .portada-neural .cc-bloque { grid-template-columns: 1fr; }
  .portada-neural .cc-pasos { grid-template-columns: 1fr; gap: .8rem; }
  .portada-neural .cc-bloque .radar-muestra { margin-top: 1.4rem; }
}

/* Lo que nos hace distintos */
.distintos { list-style: none; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: clamp(1.4rem, 3.5vh, 2rem) 0 0; border-top: 1px solid var(--ds-border); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.distintos h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
.distintos h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-neural-teal); box-shadow: 0 0 0 3px rgba(85,184,165,.25); margin-right: .6rem; vertical-align: middle; }
.distintos p { margin: 0; color: var(--ds-muted); font-size: .98rem; }
@media (max-width: 880px) { .distintos { grid-template-columns: 1fr; gap: 1.2rem; } }

/* Quiénes somos: un solo bloque oscuro (antes dos secciones) */
.portada-neural .raices { min-height: 0; align-items: center; padding: clamp(3.5rem, 11vh, 6rem) 0; }
.nosotros-mx { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.nosotros-mx .marca-producto { color: #A9BDCB; }
.nosotros-mx .marca-producto .barras i { background: var(--ds-data-blue); }
.nosotros-mx .marca-producto .barras i:last-child { background: var(--ds-neural-teal); }
.portada-neural .raices h2 { font-size: clamp(2.2rem, min(5vw, 9vh), 4rem); margin-bottom: 1.2rem; }
.portada-neural .raices p:not(.marca-producto) { font-size: 1.08rem; color: #D4DEE4; max-width: 60ch; }
.nosotros-mx .datos { flex-direction: column; gap: 1.4rem; margin: 0; }
.nosotros-mx .datos div:nth-child(3) { border-color: var(--ds-signal-coral); }
@media (max-width: 880px) { .nosotros-mx { grid-template-columns: 1fr; } }

/* Cierre: invitación a conversar */
.llamado-extra { font-size: 1rem !important; margin-top: 1.4rem; }
.llamado-extra a { color: var(--ds-azul); }
.claro .hero-ruta { font: .75rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ds-muted); }

/* Escritorio: escala por altura de pantalla */
@media (min-width: 881px) {
  .portada-neural .seccion { padding: clamp(3rem, 10vh, 6.5rem) 0; }
  .portada-neural .cabecera-seccion { margin-bottom: clamp(1.6rem, 4.5vh, 3rem); }
  .portada-neural h2 { font-size: clamp(2rem, min(3.8vw, 6.8vh), 3.1rem); }
  .portada-neural .cabecera-seccion p { font-size: clamp(1rem, 2.4vh, 1.2rem); }
  .portada-neural .hero-red { min-height: calc(100vh - 73px); justify-content: center; padding-top: clamp(2rem, 6vh, 5rem); padding-bottom: clamp(2rem, 6vh, 4rem); }
  .portada-neural .hero-red h1 { font-size: clamp(2.5rem, min(4.8vw, 9vh), 4.4rem); }
  .portada-neural .hero .bajada { font-size: clamp(1.05rem, 2.6vh, 1.28rem); }
  .portada-neural #clientecheck { padding: clamp(2rem, 7vh, 5rem) 0; }
  .portada-neural .como-funciona { padding: clamp(1.6rem, 5vh, 3.2rem) clamp(1.8rem, 4vw, 3.4rem); }
  .portada-neural .cc-bloque .radar-muestra svg { max-height: min(290px, 31vh); }
  .portada-neural .cc-bloque .areas-cc { margin-bottom: clamp(.8rem, 2.4vh, 1.4rem); }
  .portada-neural .cc-pasos { margin-top: clamp(.8rem, 2.4vh, 1.6rem); }
  .portada-neural .niveles-precio li { padding: clamp(.4rem, 1.2vh, .7rem) 0; }
  .portada-neural .productos-3 .producto { padding: clamp(1.4rem, 4vh, 2.2rem) clamp(1.6rem, 3vw, 2.4rem); }
  .portada-neural .producto h3 { font-size: clamp(1.5rem, min(2.4vw, 4.4vh), 1.9rem); }
  .portada-neural .producto .gancho { font-size: clamp(1.05rem, 2.5vh, 1.2rem); }
  .portada-neural .precio-producto { margin: clamp(.6rem, 2vh, 1.2rem) 0 clamp(.6rem, 1.8vh, 1rem); }
  .portada-neural .lista-check { margin-bottom: clamp(1rem, 3vh, 1.8rem); }
  .portada-neural .lanzamiento { margin-top: clamp(1.2rem, 3vh, 2rem); padding: 1.2rem clamp(1.4rem, 3vw, 2.2rem); }
  .portada-neural .metodo-pasos h3 { font-size: clamp(1.3rem, min(2vw, 3.6vh), 1.7rem); }
  .portada-neural .llamado { min-height: min(560px, calc(100vh - 73px)); }
  .portada-neural .llamado h2 { font-size: clamp(2.3rem, min(4.6vw, 8vh), 4rem); }
}

/* Al bajar con la rueda, la página se acomoda al inicio del contenido de cada
   sección (solo si queda cerca: "proximity" ayuda, no obliga) */
@media (min-width: 881px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  html:has(.portada-neural) { scroll-snap-type: y proximity; scroll-padding-top: 96px; }
  .portada-neural main > .hero, .portada-neural #clientecheck .como-funciona, .portada-neural #precios .cabecera-seccion,
  .portada-neural #metodo .cabecera-seccion, .portada-neural main > .raices, .portada-neural main > .llamado { scroll-snap-align: start; }
  .portada-neural main > .hero { scroll-margin-top: 200px; }
  .portada-neural main > .raices, .portada-neural main > .llamado { scroll-margin-top: -24px; }
}
/* Aire extra antes de los planes: así la red les da su propio recuadro y su nudo */
.portada-neural #precios { padding-top: clamp(5.5rem, 13vh, 7.5rem); }

/* Pantallas bajas (laptops de 13" a 15" con escala de Windows al 125–150 %):
   todo el sitio se reduce un poco, porque casi todo se mide en rem */
@media (min-width: 881px) and (max-height: 800px) {
  html { font-size: clamp(13.5px, calc(1.6vh + 4px), 16px); }
}
@media (min-width: 881px) {
  .portada-neural #precios .cabecera-seccion { margin-bottom: clamp(1.1rem, 3.4vh, 2.6rem); }
  .portada-neural #precios .cabecera-seccion .marca-producto { margin-bottom: clamp(.5rem, 1.6vh, 1.2rem); }
  .portada-neural #precios h2 { margin-bottom: clamp(.3rem, 1vh, .8rem); }
  .portada-neural .productos-3 .producto .marca-producto { margin-bottom: clamp(.3rem, 1vh, .8rem); }
  .portada-neural .productos-3 .producto h3 { margin-bottom: clamp(.4rem, 1.2vh, .8rem); }
  .portada-neural .productos-3 .producto .gancho { margin-bottom: clamp(.4rem, 1.2vh, .8rem); }
  .portada-neural .productos-3 .producto { padding-top: clamp(1.1rem, 3.4vh, 2.2rem); padding-bottom: clamp(1.1rem, 3.4vh, 2.2rem); }
  .portada-neural .nota-precio { margin-bottom: clamp(.8rem, 2.2vh, 1.6rem); }
}
@media (max-width: 880px) { .portada-neural .hero-texto .marca-producto { max-width: calc(100% - 96px); } }

/* ClienteCheck v2 (27 oct): sin etiquetas de áreas (ya están en el radar),
   pasos en la columna de texto, radar más grande y legible, fondo más oscuro */
.portada-neural .como-funciona {
  background: radial-gradient(60% 80% at 100% 0%, rgba(85,184,165,.12), transparent 60%),
              linear-gradient(135deg, #0F1E27 0%, var(--ds-deep-navy) 45%, #1A3448 80%, #1E3D55 100%);
}
.portada-neural .cc-bloque { grid-template-columns: 1fr 1fr; align-items: center; }
.portada-neural .cc-bloque .cabecera-seccion > p:not(.marca-producto):not(.cierre-seccion) { margin-bottom: 0; }
.portada-neural .cc-pasos { grid-column: auto; grid-template-columns: 1fr; gap: 0; margin: clamp(1rem, 3vh, 1.6rem) 0 clamp(1.1rem, 3vh, 1.6rem); }
.portada-neural .cc-pasos li { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .6rem; padding: clamp(.55rem, 1.5vh, .8rem) 0; }
.portada-neural .cc-pasos li::before { grid-row: span 2; margin: .2rem 0 0; }
.portada-neural .cc-pasos h3 { margin: 0 0 .1rem; }
.portada-neural .cc-bloque .radar-muestra { padding-top: 1.6rem; }
.portada-neural .cc-bloque .radar-muestra svg { width: 100%; max-height: none; }
.portada-neural .cc-bloque .radar .etiqueta { font: 600 15.5px var(--cuerpo); letter-spacing: 0; fill: #E8EFF3; }
.portada-neural .cc-bloque .radar-muestra .marcador { font-size: 2.6rem; }
.portada-neural .cc-bloque .leyenda { font-size: .9rem; }
@media (min-width: 881px) {
  .portada-neural .cc-bloque .radar-muestra svg { max-height: min(430px, 56vh); }
}
@media (max-width: 980px) { .portada-neural .cc-bloque { grid-template-columns: 1fr; } }
.portada-neural #precios, .portada-neural #metodo { padding-top: max(110px, 13vh); }
@media (max-width: 880px) { .portada-neural #precios, .portada-neural #metodo { padding-top: 90px; } }
@media (min-width: 881px) {
  .portada-neural .cc-bloque { grid-template-columns: 1.05fr .95fr; }
  .portada-neural .cc-pasos h3 { font-size: 1rem; }
  .portada-neural .cc-pasos p { font-size: .92rem; }
  .portada-neural .cc-bloque .radar-muestra svg { max-height: min(420px, 46vh); }
}

/* Quiénes somos al final: la historia a la izquierda y el origen, discreto, a la derecha */
.portada-neural .raices h2 { font-size: clamp(2rem, min(3.8vw, 6.8vh), 3.1rem); max-width: 18ch; }
.origen { border-left: 1px solid rgba(166,184,199,.25); padding-left: clamp(1.4rem, 3vw, 2.4rem); }
.origen .origen-titulo { font: .72rem var(--mono) !important; letter-spacing: .16em; text-transform: uppercase; color: #A9BDCB !important; margin: 0 0 1.2rem; }
.origen .datos strong { font-size: 1.15rem; }
.origen .datos span { font-size: .88rem; }
.nosotros-mx .datos div:nth-child(2) { border-color: var(--ds-signal-coral); }
@media (max-width: 880px) { .origen { border-left: 0; border-top: 1px solid rgba(166,184,199,.25); padding: 1.4rem 0 0; } }
/* El cierre ya no es lo último: menos alto */
@media (min-width: 881px) { .portada-neural .llamado { min-height: min(500px, calc(100vh - 73px)); } }