/* CoreFlow · inicio v3.1a — hero, dolores, camino del cliente, casos, pruébalo, capacidades, cómo trabajamos, Perú, Eros, agenda.
   Ritmo: todo lo nuevo late con el mismo pulso de 1,6 s (o sus mitades/cuartos/octavos) y la curva --ola. */
:root { --pulso: 1.6s; }
section { position: relative; }
.h2c { text-align: center; margin-bottom: clamp(26px, 5vh, 48px); }
.h2c .bajada { margin-inline: auto; }
.bloque { padding: clamp(70px, 13vh, 140px) 0; }

/* ---------- viaje entre secciones: entras a cada una como a otra escena ---------- */
/* Cada pieza de la sección entra por separado (sin mover la sección entera: nada se tuerce ni se descentra). */
[data-escena] > .envoltura > * { transition: opacity .8s var(--ola), transform .9s var(--ola), filter .8s var(--ola); }
[data-escena] > .envoltura > *:nth-child(2) { transition-delay: calc(var(--pulso) / 8); }
[data-escena] > .envoltura > *:nth-child(3) { transition-delay: calc(var(--pulso) / 4); }
[data-escena]:not(.llego) > .envoltura > * { opacity: 0; transform: translateY(36px) scale(.985); filter: blur(8px); }
@media (prefers-reduced-motion: reduce) { [data-escena] > .envoltura > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } }

/* escaneo que pasa una sola vez al llegar a cada escena (el elemento lo pone inicio.js) */
.escena-scan { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.escena-scan::before { content: ""; position: absolute; inset: 0; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 0 84%, rgba(79, 209, 224, .05) 94%, rgba(79, 209, 224, .32) 99.4%, rgba(210, 250, 255, .55) 99.8%, transparent 100%); }
.llego > .escena-scan::before { animation: escena-scan 1.6s var(--ola) .1s forwards; }
@keyframes escena-scan { 0% { opacity: 0; transform: translateY(-100%); } 10% { opacity: 1; } 85% { opacity: .8; } 100% { opacity: 0; transform: translateY(100%); } }
/* bajo cada título se dibuja una línea fina cian → dorado */
.h2c::after { content: ""; display: block; width: min(180px, 46%); height: 1px; margin: clamp(14px, 2.4vh, 20px) auto 0; background: linear-gradient(90deg, transparent, #4FD1E0 25%, var(--destello) 75%, transparent); box-shadow: 0 0 10px rgba(79, 209, 224, .45); transform: scaleX(0); transition: transform 1.1s var(--ola) .45s; }
.llego .h2c::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .escena-scan { display: none; } .h2c::after { transform: none; transition: none; } }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding-top: calc(68px + clamp(22px, 6vh, 80px)); text-align: center; }
.hero .bajada { margin-inline: auto; }
.hero .acciones { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin-top: 2rem; }
.hero .acciones .nota { margin: 0; }
.orbe-hero { min-height: clamp(200px, 30vh, 380px); margin-top: .5rem; }
.hero .envoltura { position: relative; z-index: 1; }

/* ---------- dónde se te va la venta ---------- */
.fuga { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 5vw, 90px); align-items: center; }
/* la línea que une el dolor elegido con su respuesta: se dibuja y la recorre un pulso */
.fuga-enlace { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fuga-enlace path { fill: none; stroke-linecap: round; }
.fuga-enlace .fe-base { stroke: url(#fe-grad); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .85; }
.fuga-enlace .fe-luz { stroke: #FFE9A8; stroke-width: 2.2; stroke-dasharray: .07 2; stroke-dashoffset: .07; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 198, 41, .9)); }
.fuga-enlace circle { fill: var(--destello); opacity: 0; filter: drop-shadow(0 0 6px var(--destello)); transform-box: fill-box; transform-origin: center; }
.fuga-enlace.traza .fe-base { animation: fe-dibuja .6s var(--ola) forwards; }
.fuga-enlace.traza .fe-luz { animation: fe-corre .9s var(--ola) .45s both; }
.fuga-enlace.traza circle { animation: fe-llega .5s var(--ola) .9s both; }
.fuga-enlace.fijo .fe-base { stroke-dashoffset: 0; }
.fuga-enlace.fijo circle { opacity: 1; }
@keyframes fe-dibuja { to { stroke-dashoffset: 0; } }
@keyframes fe-corre { 0% { opacity: 1; stroke-dashoffset: .07; } 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -1; } }
@keyframes fe-llega { from { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
.dolores { display: grid; gap: 10px; }
.dolor { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1px solid var(--linea); background: rgba(6, 19, 24, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-align: left; font-size: clamp(1rem, 1.5vw, 1.12rem); font-weight: 500; color: var(--txt-2); transition: all .4s var(--ola); }
.dolor span.x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--linea-2); color: var(--txt-3); font-size: .9rem; transition: all .4s var(--ola); }
.dolor:hover { color: var(--txt); border-color: var(--linea-2); }
.dolor[aria-selected="true"] { color: var(--txt); border-color: rgba(255, 198, 41, .55); background: rgba(255, 198, 41, .07); }
.dolor[aria-selected="true"] span.x { border-style: solid; border-color: var(--destello); background: var(--destello); color: #10170F; }
.solucion { position: relative; overflow: hidden; min-height: 300px; padding: clamp(22px, 3.4vw, 36px); background: rgba(6, 19, 24, .82); }
.solucion .sol-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 0 80%, rgba(79, 209, 224, .08) 93%, rgba(79, 209, 224, .45) 99.3%, rgba(210, 250, 255, .7) 99.7%, transparent 100%); animation: escena-scan .8s var(--ola) both; }
.solucion .sol-acento { position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #4FD1E0, var(--destello)); box-shadow: 0 0 12px rgba(255, 198, 41, .5); }
.solucion small { display: block; margin-bottom: .8rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--destello); }
.solucion h3 { margin: 0 0 .7rem; font: 600 clamp(1.5rem, 2.8vw, 2.1rem)/1.1 var(--ft); letter-spacing: -.025em; }
.solucion p { margin: 0 0 1.4rem; color: var(--txt-2); }
.en { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--txt-3); }
.en::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
/* la respuesta se arma pieza por pieza, con una leve separación cromática al aparecer */
.cambia > * { animation: croma .6s var(--ola) backwards; }
.cambia > :nth-child(2) { animation-delay: .1s; }
.cambia > :nth-child(3) { animation-delay: .2s; }
.cambia > :nth-child(4) { animation-delay: .32s; }
@keyframes croma {
  0% { opacity: 0; transform: translateY(8px); filter: blur(4px) drop-shadow(-3px 0 rgba(79, 209, 224, .9)) drop-shadow(3px 0 rgba(242, 166, 157, .8)); }
  45% { opacity: 1; filter: blur(0) drop-shadow(-1px 0 rgba(79, 209, 224, .5)) drop-shadow(1px 0 rgba(242, 166, 157, .4)); }
  100% { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 0 0 rgba(79, 209, 224, 0)) drop-shadow(0 0 0 rgba(242, 166, 157, 0)); }
}
@media (prefers-reduced-motion: reduce) { .cambia > * { animation: none; } .solucion .sol-scan { display: none; } .fuga-enlace path, .fuga-enlace circle { animation: none !important; } .fuga-enlace .fe-base { stroke-dashoffset: 0; } .fuga-enlace circle { opacity: 1; } }
@media (max-width: 820px) { .fuga { grid-template-columns: 1fr; } .solucion { min-height: 0; } .fuga-enlace { display: none; } }

/* CASOS y COMPARATIVA viven en casos.css y comparativa.css (v30a). */

/* ---------- cómo trabajo: tres estaciones y una línea que las une y se dibuja con el scroll ---------- */
.estaciones { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); max-width: 1040px; margin: 0 auto; }
.est-linea { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; }
.est-linea::before, .est-linea i { content: ""; position: absolute; inset: 0; }
.est-linea::before { background: var(--linea-2); }
.est-linea i { background: linear-gradient(var(--dir, 90deg), #4FD1E0, var(--destello)); box-shadow: 0 0 12px rgba(79, 209, 224, .55); transform-origin: 0 0; transform: scaleX(var(--p, 0)); }
.est-linea.vertical i { --dir: 180deg; transform: scaleY(var(--p, 0)); }
.estacion { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; justify-items: center; align-content: start; gap: 18px; text-align: center; } /* 1fr: las tres tarjetas del mismo alto */
.estacion .nodo { order: -1; position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255, 198, 41, .45); background: var(--fondo); transition: background .5s var(--ola), border-color .5s var(--ola), box-shadow .6s var(--ola), transform .6s var(--ola); }
.estacion .nodo::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(79, 209, 224, .5); opacity: 0; transform: scale(.5); transition: opacity .6s var(--ola), transform .8s var(--ola); }
.estacion.on .nodo { background: var(--destello); border-color: var(--destello); transform: scale(1.1); box-shadow: 0 0 0 5px rgba(255, 198, 41, .12), 0 0 24px var(--destello); }
.estacion.on .nodo::after { opacity: 1; transform: none; }
.estacion .cuerpo { width: 100%; padding: 22px 22px 24px; background: rgba(6, 19, 24, .8); opacity: .4; filter: saturate(.4); transition: opacity .7s var(--ola), filter .7s var(--ola), border-color .6s var(--ola); }
.estacion.on .cuerpo { opacity: 1; filter: none; border-color: rgba(79, 209, 224, .24); }
.estacion .n { display: block; margin-bottom: .45rem; font: 500 .78rem/1 var(--ft); letter-spacing: .16em; color: var(--destello); }
.estacion h3 { margin: 0 0 .35rem; font: 600 1.2rem/1.22 var(--ft); letter-spacing: -.015em; text-wrap: balance; }
.estacion p { margin: 0; color: var(--txt-2); font-size: .96rem; text-wrap: pretty; }
@media (max-width: 760px) {
  .estaciones { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .estacion { grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: none; justify-items: start; align-items: start; gap: 12px; text-align: left; }
  .estacion .nodo { order: 0; grid-column: 1; grid-row: 1; justify-self: center; margin-top: 22px; }
  .estacion .cuerpo { grid-column: 2; grid-row: 1; padding: 18px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { .estacion .cuerpo, .estacion .nodo, .estacion .nodo::after { transition: none; } .estacion .cuerpo { opacity: 1; filter: none; } }

/* ---------- Eros ---------- */
/* dos columnas iguales: el eje de la página cae en el hueco entre la foto y el texto (el núcleo no tapa letras) */
.eros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: center; max-width: 1040px; margin: 0 auto; }
.eros figure { width: 100%; margin: 0; position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; background: #EDEDED; }
.eros-txt { position: relative; isolation: isolate; justify-self: start; width: 100%; max-width: 380px; } /* mismo ancho que la foto: el grupo queda simétrico */
.eros-txt::before { content: ""; position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(6, 19, 24, .78), rgba(6, 19, 24, .45) 60%, transparent); }
.eros-txt .kicker, .eros-txt .titular-2, .eros-txt .bajada { text-shadow: 0 0 10px var(--fondo), 0 0 22px var(--fondo); }
/* marco holográfico de la foto: esquinas que se trazan y un escaneo que pasa una vez */
.eros-marco { position: relative; justify-self: end; width: min(100%, 380px); }
.eros-marco .esq { position: absolute; z-index: 2; width: 18px; height: 18px; border: 0 solid var(--destello); opacity: 0; transform: scale(1.8); transition: opacity .6s var(--ola) .5s, transform .7s var(--ola) .5s; pointer-events: none; }
.eros-marco .esq-1 { top: -7px; left: -7px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 9px; }
.eros-marco .esq-2 { top: -7px; right: -7px; border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 9px; }
.eros-marco .esq-3 { bottom: -7px; left: -7px; border-bottom-width: 1.5px; border-left-width: 1.5px; border-bottom-left-radius: 9px; }
.eros-marco .esq-4 { bottom: -7px; right: -7px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 9px; }
.llego .eros-marco .esq { opacity: .8; transform: none; }
.eros-marco .foto-scan { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 26px; pointer-events: none; }
.eros-marco .foto-scan::before { content: ""; position: absolute; inset: 0; opacity: 0; transform: translateY(-100%); background: linear-gradient(180deg, transparent 0 78%, rgba(79, 209, 224, .12) 93%, rgba(79, 209, 224, .55) 99.3%, rgba(225, 250, 255, .8) 99.7%, transparent 100%); mix-blend-mode: screen; }
.llego .eros-marco .foto-scan::before { animation: escena-scan 1.3s var(--ola) .5s forwards; }
@media (prefers-reduced-motion: reduce) { .eros-marco .esq { opacity: .8; transform: none; transition: none; } .eros-marco .foto-scan { display: none; } }
.eros figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.eros figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(6, 19, 24, .55)); }
.eros blockquote { margin: 1.4rem 0 0; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--fs); font-style: italic; color: var(--destello); }
@media (max-width: 760px) {
  .eros { grid-template-columns: 1fr; gap: 34px; justify-items: center; text-align: center; }
  .eros-marco { justify-self: center; width: min(100%, 300px); margin-inline: auto; }
  .eros-txt { justify-self: center; max-width: 31rem; margin-inline: auto; }
  .eros-txt .bajada { margin-inline: auto; }
  .eros-txt .kicker { justify-content: center; }
}

/* ---------- agenda ---------- */
#agenda-inicio { position: relative; background: rgba(6, 19, 24, .86); }
/* borde superior que se enciende y esquinas de visor al llegar */
#agenda-inicio::before { content: ""; position: absolute; left: 22px; right: 22px; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, #4FD1E0 30%, var(--destello) 70%, transparent); box-shadow: 0 0 12px rgba(255, 198, 41, .4); transform: scaleX(0); transition: transform 1.1s var(--ola) .5s; }
.llego #agenda-inicio::before { transform: scaleX(1); }
#agenda-inicio::after { content: ""; position: absolute; inset: -7px; pointer-events: none; border-radius: 28px; opacity: 0; transform: scale(1.03); transition: opacity .7s var(--ola) .7s, transform .8s var(--ola) .7s;
  --e: rgba(79, 209, 224, .6);
  background:
    linear-gradient(var(--e), var(--e)) 0 0 / 18px 1.5px, linear-gradient(var(--e), var(--e)) 0 0 / 1.5px 18px,
    linear-gradient(var(--e), var(--e)) 100% 0 / 18px 1.5px, linear-gradient(var(--e), var(--e)) 100% 0 / 1.5px 18px,
    linear-gradient(var(--e), var(--e)) 0 100% / 18px 1.5px, linear-gradient(var(--e), var(--e)) 0 100% / 1.5px 18px,
    linear-gradient(var(--e), var(--e)) 100% 100% / 18px 1.5px, linear-gradient(var(--e), var(--e)) 100% 100% / 1.5px 18px;
  background-repeat: no-repeat; }
.llego #agenda-inicio::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { #agenda-inicio::before, #agenda-inicio::after { transition: none; transform: none; } #agenda-inicio::after { opacity: 1; } }
.bloque-agenda { padding-bottom: clamp(40px, 8vh, 80px); }

/* ---------- contacto siempre a mano en el celular ---------- */
.contacto-fijo { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: none; grid-template-columns: 1fr auto; gap: 8px; padding: 6px; border-radius: 99px; background: rgba(6, 19, 24, .82); border: 1px solid var(--linea-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); transform: translateY(140%); transition: transform .6s var(--ola); }
.contacto-fijo .btn { min-height: 48px; }
.contacto-fijo .wsp { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(127, 209, 168, .14); color: var(--ok); }
.contacto-fijo.ver { transform: none; }
@media (max-width: 760px) { .contacto-fijo { display: grid; } .pie { padding-bottom: 96px; } }

/* ---------- áreas de toque de 44 px (header y agenda) ---------- */
.barra .btn { min-height: 44px; }
.agenda-pie .enlace, .elegido button { position: relative; }
.agenda-pie .enlace::after, .elegido button::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }
.agenda-pie { padding-block: 10px; }
.consiente { min-height: 44px; padding-block: 4px; }
.consiente input { width: 20px; height: 20px; margin: 0; }


/* ================= v3.1a ================= */

/* ---------- vidrio líquido (liquido.css): tonos que aseguran la lectura sobre la energía ---------- */
.solucion.liquido { background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(6, 19, 24, .74) 42%, rgba(6, 19, 24, .84)); border-radius: var(--radio); }
.dolor.liquido:not([aria-selected="true"]) { background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(6, 19, 24, .52) 60%); }
.dolor.liquido[aria-selected="true"] { background: linear-gradient(160deg, rgba(255, 230, 160, .16), rgba(255, 198, 41, .06) 60%); }
.estacion .cuerpo.liquido { background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(6, 19, 24, .62) 50%, rgba(6, 19, 24, .74)); }
.btn-vidrio.liquido { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 1px var(--linea-2) inset; }

/* ---------- menú: «Pruébalo» también en el celular ---------- */
.nav-prueba { position: relative; }
.nav-prueba::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }

/* ---------- lo que podemos construir: tarjetas holográficas que se arman ---------- */
.caps { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.4vw, 16px); max-width: 1140px; }
.cap { position: relative; overflow: hidden; flex: 1 1 190px; max-width: 224px; display: grid; justify-items: center; align-content: start; gap: 16px; padding: 28px 16px 24px; text-align: center; border-radius: 20px;
  border: 1px solid rgba(79, 209, 224, .2); background: linear-gradient(180deg, rgba(79, 209, 224, .08), rgba(6, 19, 24, .74) 58%);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: border-color .4s var(--ola), box-shadow .4s var(--ola), translate .4s var(--ola); }
/* rejilla de holograma y borde superior que se enciende */
.cap::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(180deg, rgba(79, 209, 224, .06) 0 1px, transparent 1px 4px); -webkit-mask: linear-gradient(180deg, #000, transparent 70%); mask: linear-gradient(180deg, #000, transparent 70%); }
.cap::after { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #4FD1E0 30%, var(--destello) 70%, transparent); box-shadow: 0 0 10px rgba(79, 209, 224, .6); transform: scaleX(0); }
.cap-scan { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cap-scan::before { content: ""; position: absolute; inset: 0; opacity: 0; transform: translateY(-100%); background: linear-gradient(180deg, transparent 0 78%, rgba(79, 209, 224, .12) 93%, rgba(79, 209, 224, .5) 99.3%, rgba(225, 250, 255, .75) 99.7%, transparent 100%); }
.cap-ic { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(79, 209, 224, .35); background: radial-gradient(circle, rgba(79, 209, 224, .14), transparent 70%); transition: border-color .4s var(--ola); }
.cap-ic svg { width: 28px; height: 28px; fill: none; stroke: #7FE3EE; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(79, 209, 224, .7)); transition: stroke .4s var(--ola); }
.cap-ic svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cap h3 { position: relative; margin: 0; font: 600 1.02rem/1.28 var(--ft); letter-spacing: -.01em; text-wrap: balance; }
/* el armado: tarjeta → borde → escaneo → ícono que se dibuja, una tras otra al pulso */
.llego .cap { animation: cap-arma calc(var(--pulso) / 2) var(--ola) calc(var(--i) * var(--pulso) / 8 + var(--pulso) / 4) both; }
.llego .cap::after { animation: cap-borde calc(var(--pulso) / 2) var(--ola) calc(var(--i) * var(--pulso) / 8 + var(--pulso) / 2) both; }
.llego .cap-scan::before { animation: escena-scan var(--pulso) var(--ola) calc(var(--i) * var(--pulso) / 8 + var(--pulso) / 2) forwards; }
.llego .cap-ic svg path { animation: cap-traza calc(var(--pulso) / 2) var(--ola) calc(var(--i) * var(--pulso) / 8 + var(--pulso) * .75) forwards; }
/* ya armadas, se encienden una por pulso, en orden: el ritmo de la página */
.llego .cap-ic { animation: cap-late calc(var(--pulso) * 5) var(--ola) calc(var(--i) * var(--pulso) + var(--pulso) * 2) infinite; }
@keyframes cap-arma { from { opacity: 0; transform: translateY(24px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cap-borde { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cap-traza { to { stroke-dashoffset: 0; } }
@keyframes cap-late { 0%, 20%, 100% { box-shadow: 0 0 0 0 rgba(79, 209, 224, 0); border-color: rgba(79, 209, 224, .35); } 6% { box-shadow: 0 0 0 6px rgba(79, 209, 224, .1), 0 0 28px rgba(79, 209, 224, .55); border-color: rgba(127, 227, 238, .9); } }
.cap:hover { translate: 0 -4px; border-color: rgba(255, 198, 41, .45); box-shadow: 0 18px 50px -24px rgba(255, 198, 41, .45); }
.cap:hover .cap-ic svg { stroke: var(--destello); }
.caps-cierre { display: grid; justify-items: center; gap: 1.2rem; margin-top: clamp(28px, 5vh, 48px); text-align: center; }
.caps-cierre p { margin: 0; font: 600 clamp(1.3rem, 2.8vw, 1.9rem)/1.15 var(--ft); letter-spacing: -.02em; text-wrap: balance; }
@media (max-width: 600px) {
  .caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cap { max-width: none; grid-template-columns: 52px minmax(0, 1fr); justify-items: start; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
  .cap-ic { width: 52px; height: 52px; }
  .cap-ic svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .cap, .llego .cap { opacity: 1; animation: none; }
  .cap::after { transform: none; animation: none !important; }
  .cap-scan { display: none; }
  .cap-ic svg path { stroke-dashoffset: 0; animation: none !important; }
  .llego .cap-ic { animation: none; }
}

/* ---------- Perú también está en el juego ---------- */
#peru .pe-texto .bajada { max-width: 30rem; }
@media (max-width: 860px) { #peru .pe-texto .bajada { margin-inline: auto; } #peru .pe-texto .kicker { justify-content: center; } }

/* ================= v3.1b ================= */

/* ---------- menú compacto del celular: Trabajos, Soluciones, Comunidad y WhatsApp ---------- */
.menu-movil { display: none; position: relative; }
.menu-movil summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linea-2); background: rgba(6, 19, 24, .5); color: var(--txt); cursor: pointer; list-style: none; transition: border-color .3s var(--ola), background .3s var(--ola); }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil summary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-movil[open] summary { border-color: var(--destello); background: rgba(255, 198, 41, .1); }
/* fixed: la barra ocupa todo el ancho arriba, así el panel queda pegado al borde derecho de la pantalla */
.menu-panel { position: fixed; top: 70px; right: 16px; width: min(260px, calc(100vw - 32px)); display: grid; gap: 2px; padding: 8px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(6, 19, 24, .9) 45%, rgba(6, 19, 24, .94)); animation: croma .5s var(--ola) both; }
.barra nav .menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; color: var(--txt); font-size: 1rem; }
.barra nav .menu-panel a:hover, .barra nav .menu-panel a:focus-visible { background: rgba(255, 255, 255, .06); }
.barra nav .menu-panel .menu-wsp { margin-top: 4px; color: var(--ok); border-top: 1px solid var(--linea); border-radius: 0 0 14px 14px; }
@media (max-width: 760px) { .menu-movil { display: block; } .barra nav { gap: .7rem; } }
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }

/* ================= v32a: ronda 1 de la auditoría ================= */

/* menú del celular: fondo casi opaco (el titular del hero ya no se lee a través); el vidrio queda en el borde.
   Gana a .liquido, que se carga después y le ponía un fondo casi transparente. */
.barra .menu-panel.liquido, html.liquido-real .barra .menu-panel.liquido {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(6, 19, 24, .95) 38%, rgba(6, 19, 24, .97));
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
}

/* Eros: la foto de estudio (fondo blanco) se integra al sistema oscuro con un viñeteado teal en multiplicar:
   el rostro queda natural y el fondo claro se vuelve el mismo mar del resto de la página */
.eros figure { background: #0B2A31; }
.eros figure img { filter: saturate(.86) contrast(1.06); }
.eros figure::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(64% 52% at 50% 33%, #E4F2F4 0 32%, #86BAC2 58%, #24585F 82%, #0C2C33 100%); }

/* agenda: el riel de días termina antes de la flecha (el último día ya no queda debajo de ella) */
@media not all and (pointer: coarse) { .dias:has(.dias-flecha) .dias-pista { margin-right: 40px; } }

/* celular: menos aire entre secciones (el recorrido era de ~14 pantallas) */
@media (max-width: 760px) { .bloque { padding: clamp(48px, 7vh, 72px) 0; } .bloque-agenda { padding-bottom: 40px; } }
/* chispa en reposo, en el celular: más chica y en el margen derecho, abajo (sobre la barra de contacto),
   dentro de los 16 px del borde: ya no se monta sobre el borde de las tarjetas */
@media (max-width: 767px) {
  .chispa-reposo { width: 20px !important; height: 20px !important; top: auto !important; bottom: calc(96px + env(safe-area-inset-bottom)) !important; right: -2px !important; margin-top: 0 !important; }
}