/* CoreFlow · /soluciones — holográfico minimalista (30-sep-2026).
   Todo se arma: primero el trazo, luego el contenido. Solo transform / opacity / filter / clip-path / stroke. */

:root { --cian: #4FD1E0; --cian-2: rgba(79, 209, 224, .45); --cian-3: rgba(79, 209, 224, .16); }

/* ---------- escenas: cada sección se enciende al llegar ---------- */
[data-holo] { position: relative; }
.escaneo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.escaneo::before { content: ""; position: absolute; inset: 0; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 0, transparent 82%, rgba(79, 209, 224, .07) 94%, rgba(79, 209, 224, .45) 99.5%, rgba(255, 255, 255, .7) 99.8%, transparent 100%); }
.llego > .escaneo::before { animation: escanear 1.5s var(--ola) forwards; }
@keyframes escanear { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateY(100%); } }
[data-holo] > .envoltura { position: relative; z-index: 1; }

/* aparición con separación cromática breve (títulos) */
.holo-t { opacity: 0; }
.llego .holo-t, .holo-t.ya { animation: holo-in .9s var(--ola) forwards; animation-delay: var(--d, 0s); }
@keyframes holo-in {
  0% { opacity: 0; transform: translateY(14px); filter: blur(6px) drop-shadow(-4px 0 rgba(79, 209, 224, .9)) drop-shadow(4px 0 rgba(255, 198, 41, .8)); }
  35% { opacity: 1; filter: blur(0) drop-shadow(-2px 0 rgba(79, 209, 224, .6)) drop-shadow(2px 0 rgba(255, 198, 41, .5)); }
  100% { opacity: 1; transform: none; filter: none; }
}
.sube { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ola), transform .8s var(--ola); transition-delay: var(--d, 0s); }
.llego .sube, .sube.ya { opacity: 1; transform: none; }

/* ================= HERO ================= */
.sol-hero { padding: calc(68px + clamp(34px, 8vh, 96px)) 0 clamp(36px, 7vh, 70px); text-align: center; }
.sol-hero .bajada { position: relative; margin-inline: auto; max-width: 36rem; text-shadow: 0 0 10px var(--fondo), 0 0 22px var(--fondo); }
/* velo oscuro tenue detrás del texto y del flujo: el núcleo de energía no borra palabras */
.sol-hero .bajada::before, .flujo-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 19, 24, .82), rgba(6, 19, 24, .5) 58%, transparent); }
.sol-hero .bajada::before { inset: -40% -10%; }
.flujo-hero::before { inset: -45% -10%; background: radial-gradient(closest-side, rgba(6, 19, 24, .94), rgba(6, 19, 24, .7) 55%, transparent); }
.sol-hero .titular { margin-inline: auto; }
.hero-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-top: 1.8rem; }
.hero-acc .btn { min-height: 52px; }

/* flujo del hero: WhatsApp → Agenda → Caja → Números */
.flujo-hero { position: relative; display: flex; align-items: flex-start; justify-content: center; width: min(100%, 620px); margin: clamp(28px, 5vh, 46px) auto 0; }
.fh-nodo { flex: none; display: grid; justify-items: center; gap: .55rem; width: clamp(62px, 17vw, 96px); }
.fh-nodo b { position: relative; display: grid; place-items: center; width: clamp(48px, 12vw, 60px); aspect-ratio: 1; border-radius: 50%; color: var(--cian);
  background: radial-gradient(circle at 50% 40%, rgba(79, 209, 224, .14), rgba(6, 19, 24, .7) 70%); }
.fh-nodo b svg.aro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.fh-nodo b svg.aro circle { fill: none; stroke: var(--cian-2); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fh-nodo b svg.ic { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fh-nodo em { font-style: normal; font-size: clamp(.72rem, 2.6vw, .86rem); color: var(--txt-2); letter-spacing: .02em; opacity: 0; transform: translateY(6px); }
.fh-nodo:last-child b { color: var(--destello); background: radial-gradient(circle at 50% 40%, rgba(255, 198, 41, .16), rgba(6, 19, 24, .7) 70%); }
.fh-nodo:last-child b svg.aro circle { stroke: rgba(255, 198, 41, .6); }
.fh-con { position: relative; flex: 1 1 0; min-width: 10px; height: 8px; margin-top: calc(clamp(48px, 12vw, 60px) / 2 - 4px); overflow: hidden; }
.fh-con::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--cian-2), rgba(255, 198, 41, .45)); transform: scaleX(0); transform-origin: left; }
.fh-con i { position: absolute; inset: 0; transform: translateX(-100%); opacity: 0; }
.fh-con i::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--destello); box-shadow: 0 0 10px var(--destello), 0 0 2px #fff; }

/* armado del hero (al cargar) */
.hero-arma .fh-nodo b svg.aro circle { animation: trazar .9s var(--ola) forwards; animation-delay: calc(.5s + var(--i) * .22s); }
.hero-arma .fh-nodo b svg.ic { animation: trazar .8s var(--ola) forwards; animation-delay: calc(.8s + var(--i) * .22s); }
.hero-arma .fh-nodo em { animation: aparecer .7s var(--ola) forwards; animation-delay: calc(.95s + var(--i) * .22s); }
.hero-arma .fh-con::before { animation: linea .6s var(--ola) forwards; animation-delay: calc(.75s + var(--i) * .22s); }
.hero-arma .fh-con i { animation: paquete 3.6s linear infinite; animation-delay: calc(2s + var(--i) * 1.2s); }
.hero-arma .fh-nodo b::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 198, 41, .0), 0 0 0 rgba(255, 198, 41, 0); opacity: 0; animation: recibe 3.6s linear infinite; animation-delay: calc(2s + (var(--i) - 1) * 1.2s + 1.05s); }
.hero-arma .fh-nodo:first-child b::after { animation: none; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; transform: none; } }
@keyframes linea { to { transform: scaleX(1); } }
@keyframes paquete { 0% { transform: translateX(-100%); opacity: 0; } 4% { opacity: 1; } 30% { transform: translateX(0); opacity: 1; } 33.3%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes recibe { 0% { opacity: 1; box-shadow: 0 0 0 1px rgba(255, 198, 41, .8), 0 0 22px rgba(255, 198, 41, .55); } 14%, 100% { opacity: 0; box-shadow: 0 0 0 6px rgba(255, 198, 41, 0), 0 0 30px rgba(255, 198, 41, 0); } }

/* ================= QUÉ HAGO: tres nodos, una línea que se dibuja ================= */
.pasos-flujo { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pf-linea { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 0; }
.pf-linea::before, .pf-linea i { content: ""; position: absolute; inset: 0; }
.pf-linea::before { background: var(--linea); }
.pf-linea i { background: linear-gradient(var(--dir, 90deg), var(--cian), var(--destello)); box-shadow: 0 0 12px rgba(79, 209, 224, .5); transform-origin: 0 0; transform: scaleX(var(--p, 0)); }
.pf-linea.vertical i { transform: scaleY(var(--p, 0)); --dir: 180deg; }
.paso { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 14px; }
.paso .nodo { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--fondo); border: 1px solid var(--linea-2);
  font: 400 1.7rem/1 var(--fs); font-style: italic; color: var(--txt-3); transition: color .5s var(--ola), border-color .5s var(--ola), box-shadow .6s var(--ola), transform .6s var(--ola); }
.paso .nodo::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--cian-2); opacity: 0; transform: scale(.7); transition: opacity .6s var(--ola), transform .8s var(--ola); }
.paso .tj { width: 100%; padding: 22px 22px 24px; background: rgba(6, 19, 24, .8); opacity: .38; transform: translateY(10px); filter: saturate(.4);
  transition: opacity .7s var(--ola), transform .7s var(--ola), filter .7s var(--ola), border-color .6s; }
.paso h3 { margin: 0 0 .45rem; font: 600 1.16rem/1.25 var(--ft); letter-spacing: -.01em; text-wrap: balance; }
.paso p { margin: 0; color: var(--txt-2); font-size: .96rem; text-wrap: pretty; }
.paso.on .nodo { color: var(--destello); border-color: rgba(255, 198, 41, .7); box-shadow: 0 0 0 4px rgba(255, 198, 41, .08), 0 0 28px rgba(255, 198, 41, .35); transform: scale(1.04); }
.paso.on .nodo::after { opacity: 1; transform: none; }
.paso.on .tj { opacity: 1; transform: none; filter: none; border-color: rgba(79, 209, 224, .22); }
@media (max-width: 760px) {
  .pasos-flujo { grid-template-columns: 1fr; gap: 18px; }
  .paso { grid-template-columns: 58px minmax(0, 1fr); justify-items: start; align-items: start; text-align: left; gap: 14px; }
  .paso .tj { padding: 18px 18px 20px; }
}

/* ================= SOLUCIONES ================= */
.filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto .9rem; }
.filtro { position: relative; min-height: 44px; padding: 0 1.1rem; border-radius: 99px; border: 1px solid var(--linea-2); background: rgba(6, 19, 24, .6); font-size: .93rem; color: var(--txt-2);
  transition: color .3s var(--ola), background .4s var(--ola), border-color .4s var(--ola), box-shadow .4s var(--ola), transform .3s var(--ola); }
.filtro:hover { color: var(--txt); border-color: var(--cian-2); }
.filtro:active { transform: scale(.96); }
.filtro[aria-pressed="true"] { background: var(--destello); border-color: var(--destello); color: #10170F; font-weight: 600; box-shadow: 0 0 0 4px rgba(255, 198, 41, .12), 0 8px 30px -8px rgba(255, 198, 41, .6); }
.cuenta { margin: 0 0 1.4rem; text-align: center; font-size: .86rem; color: var(--txt-3); letter-spacing: .02em; min-height: 1.4em; }
.cuenta b { color: var(--cian); font-weight: 600; }

/* masonry por columnas: cada tarjeta ocupa las filas de 1px que mide (JS pone --filas); sin huecos dentro ni entre tarjetas */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); grid-auto-rows: 1px; column-gap: 14px; row-gap: 0; align-items: start; }
.sol { position: relative; display: flex; margin-bottom: 14px; grid-row-end: span var(--filas, 420); }
.sol-in { position: relative; flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: 20px 20px 18px; overflow: hidden; isolation: isolate;
  background: rgba(6, 19, 24, .84); border-color: transparent;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ola), scale .6s var(--ola), opacity .6s var(--ola), filter .6s var(--ola), box-shadow .5s var(--ola); }
.sol.fuera .sol-in { opacity: .3; scale: .97; filter: saturate(.25); }
/* en el celular las que no aplican se van: no alargan el scroll */
@media (max-width: 760px) { .sol.fuera { display: none; } }
.sol-in > * { position: relative; z-index: 2; }

/* borde que se dibuja */
.sol-in > svg.trazo { position: absolute; top: .5px; left: .5px; z-index: 1; width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; pointer-events: none; }
.trazo rect { fill: none; stroke: url(#holo-borde); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; opacity: .85; transition: opacity .4s; }
.sol.armada .trazo rect { animation: trazar .95s var(--ola) forwards; animation-delay: calc(var(--i, 0) * 80ms); }
.sol.hecha .trazo rect { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: .5; }
.sol-in::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(79, 209, 224, .06), transparent 40%, rgba(255, 198, 41, .04)); opacity: 0; transition: opacity .8s var(--ola); }
.sol.armada .sol-in::before { opacity: 1; transition-delay: calc(var(--i, 0) * 80ms + .25s); }

/* contenido que entra después del trazo */
.sol-in > .arma { opacity: 0; transform: translateY(10px); }
.sol.armada .sol-in > .arma { animation: aparecer .7s var(--ola) forwards; animation-delay: calc(var(--i, 0) * 80ms + .35s + var(--k, 0) * 70ms); }
.sol.armada .sol-in > h3.arma { animation-name: holo-in; }
.sol.hecha .sol-in > .arma { animation: none; opacity: 1; transform: none; }

/* reflejo especular que sigue al puntero */
.sol-brillo { position: absolute !important; inset: 0; z-index: 3 !important; pointer-events: none; border-radius: inherit; opacity: 0; mix-blend-mode: screen; transition: opacity .45s var(--ola);
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(79, 209, 224, .16), rgba(255, 198, 41, .07) 32%, transparent 62%),
              linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .05) calc(var(--mx, 50%) * .3 + 30%), transparent 62%); }
@media (hover: hover) and (pointer: fine) {
  .sol:not(.fuera) .sol-in:hover { box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .9), 0 0 0 1px rgba(79, 209, 224, .22), 0 18px 60px -30px rgba(79, 209, 224, .45); }
  .sol:not(.fuera) .sol-in:hover .sol-brillo { opacity: 1; }
  .sol:not(.fuera) .sol-in:hover .trazo rect { opacity: 1; }
  .sol-in.inclina { transition: transform .18s ease-out, scale .6s var(--ola), opacity .6s var(--ola), filter .6s var(--ola), box-shadow .5s var(--ola); }
}

.sol-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.sol .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--cian); border: 1px solid rgba(79, 209, 224, .28); background: rgba(79, 209, 224, .06); }
.sol .ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .62rem; border-radius: 99px; font-size: .72rem; letter-spacing: .03em; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chip.verde { color: var(--ok); background: rgba(127, 209, 168, .1); }
.chip.ambar { color: var(--destello); background: rgba(255, 198, 41, .1); }
.chip.azul { color: #8FC8FF; background: rgba(143, 200, 255, .1); }
.sol small.nombre { margin-top: .25rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cian); opacity: .85; }
.sol h3 { margin: 0; font: 600 1.18rem/1.22 var(--ft); letter-spacing: -.015em; text-wrap: balance; }
.sol p.tarjeta { margin: 0; color: var(--txt-2); font-size: .93rem; line-height: 1.45; text-wrap: pretty; }
.deja { display: flex; flex-wrap: wrap; gap: 6px; margin: .3rem 0 0; padding: 0; list-style: none; }
.deja li { display: inline-flex; align-items: center; gap: .38rem; padding: .34rem .62rem .34rem .45rem; border-radius: 10px; font-size: .8rem; line-height: 1.25; color: var(--txt); background: rgba(127, 209, 168, .07); border: 1px solid rgba(127, 209, 168, .18); }
.deja li svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vivo { margin-top: .35rem; padding-top: .75rem; border-top: 1px solid var(--linea); display: grid; gap: .45rem; }
.vivo small { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.vivo .nada { font-size: .84rem; color: var(--txt-3); }
.pildoras { display: flex; flex-wrap: wrap; gap: 6px; }
.pildora { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: 0 .7rem; border-radius: 99px; border: 1px solid var(--linea-2); background: rgba(244, 241, 234, .04); font-size: .8rem; color: var(--txt-2); text-decoration: none; white-space: nowrap;
  transition: color .25s, border-color .25s, background .25s; }
a.pildora::before { content: ""; position: absolute; inset: -6px -2px; }
a.pildora::after { content: "↗"; font-size: .72rem; color: var(--cian); }
a.pildora:hover { color: var(--txt); border-color: var(--cian-2); background: rgba(79, 209, 224, .08); }

/* ================= POR DÓNDE EMPEZAR ================= */
.formas { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.forma { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 26px 24px 24px; background: rgba(6, 19, 24, .86); overflow: hidden; }
.forma.destacada { border-color: rgba(255, 198, 41, .45); box-shadow: 0 0 0 1px rgba(255, 198, 41, .18) inset, 0 30px 80px -40px rgba(255, 198, 41, .4); }
.forma.destacada::before { content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--destello), transparent); }
.forma small { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--destello); }
.forma h3 { margin: 0; font: 600 1.3rem/1.2 var(--ft); letter-spacing: -.015em; text-wrap: balance; }
.forma p { margin: 0; color: var(--txt-2); font-size: .95rem; }
.forma ul { margin: .35rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; font-size: .92rem; color: var(--txt-2); }
.forma li { display: flex; gap: .55rem; align-items: flex-start; }
.forma li svg { flex: none; width: 16px; height: 16px; margin-top: .2rem; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.medidor { margin-top: auto; padding-top: 1.1rem; display: grid; gap: .55rem; }
.medidor .pista { position: relative; height: 6px; border-radius: 99px; overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(244, 241, 234, .1) 0 calc(100% / 14 - 2px), transparent calc(100% / 14 - 2px) calc(100% / 14)); }
.medidor .pista i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cian), var(--destello)); box-shadow: 0 0 14px rgba(255, 198, 41, .5);
  transform-origin: left; transform: scaleX(0); transition: transform 1.3s var(--ola); transition-delay: calc(var(--i, 0) * .15s + .4s); }
.llego .medidor .pista i { transform: scaleX(var(--f)); }
.medidor span { font-size: .9rem; color: var(--txt-2); }
.medidor span b { margin-left: .18em; padding-right: .06em; }
.medidor b { font: 400 1.6rem/1 var(--fs); font-style: italic; color: var(--destello); margin-right: .2rem; font-variant-numeric: tabular-nums; }
.puntos { display: none; }
@media (max-width: 900px) {
  .formas { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0 10px; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); scroll-padding-inline: var(--g); }
  .formas::-webkit-scrollbar { display: none; }
  .forma { flex: 0 0 min(84%, 380px); scroll-snap-align: center; }
  .puntos { display: flex; justify-content: center; gap: 2px; margin-top: .4rem; }
  .puntos button { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; }
  .puntos button::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--linea-2); transition: width .4s var(--ola), background .4s; }
  .puntos button[aria-current="true"]::before { width: 22px; background: var(--destello); }
}

/* ================= COMPARATIVA / AGENDA ================= */
#comparativa-app { width: min(100%, 1000px); margin-inline: auto; }

/* ================= movimiento reducido: estado final directo ================= */
@media (prefers-reduced-motion: reduce) {
  .escaneo { display: none; }
  .holo-t, .sube, .fh-nodo em, .sol-in > .arma { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; transition: none !important; }
  .fh-nodo b svg.aro circle, .fh-nodo b svg.ic, .trazo rect { animation: none !important; stroke-dasharray: none; stroke-dashoffset: 0; }
  .fh-con::before { transform: none; animation: none !important; }
  .fh-con i, .fh-nodo b::after { display: none; }
  .sol-in, .paso .tj, .paso .nodo, .medidor .pista i { transition: none !important; }
  .sol-in { transform: none; }
  .medidor .pista i { transform: scaleX(var(--f)); }
  .paso .tj { opacity: 1; transform: none; filter: none; }
}

/* ---------- 31a: en el celular, poco texto: nombre y título; el resto se abre al tocar ---------- */
.sol-mas { display: none; }
@media (max-width: 760px) {
  .sol-in { cursor: pointer; }
  .sol:not(.abierta) .sol-in > p.tarjeta, .sol:not(.abierta) .sol-in > .deja, .sol:not(.abierta) .sol-in > .vivo { display: none; }
  .sol-mas { position: relative; display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem; min-height: 36px; margin-top: -.1rem; padding: 0; border: 0; background: none; color: var(--destello); font: 600 .86rem/1 var(--ft); }
  .sol-mas::after { content: ""; position: absolute; inset: -6px -10px; } /* área de toque de 48 px */
  .sol-mas svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ola); }
  .sol.abierta .sol-mas svg { transform: rotate(180deg); }
  .sol.abierta .sol-in > p.tarjeta, .sol.abierta .sol-in > .deja, .sol.abierta .sol-in > .vivo { animation: sol-abre .5s var(--ola) both; }
  @keyframes sol-abre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}