/* 26 · segunda sección: frase centrada, lo que Gu hace sobre líneas en perspectiva
 * y tres principios en cuadrícula de líneas finas con muestras de luz morada y grano. */
.s2 { border-top: 0; padding-top: 40px; position: relative; }
.s2::before { content: ""; position: absolute; inset: -120px 0 auto; height: 680px; background: radial-gradient(55% 55% at 50% 42%, var(--k7f77dd-1), transparent 72%); -webkit-mask: linear-gradient(transparent, #000 32%); mask: linear-gradient(transparent, #000 32%); pointer-events: none; }
.s2-h { margin: 0 auto; max-width: 24ch; text-align: center; font-size: clamp(30px, 3.6vw, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; color: var(--fg); text-wrap: balance; }
/* palabras sobre el piso en perspectiva */
.s2-campo { position: relative; margin: 56px auto 0; max-width: 980px; padding: 26px 0 40px; }
.s2-lineas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask: radial-gradient(60% 90% at 50% 40%, #000 45%, transparent 100%); mask: radial-gradient(60% 90% at 50% 40%, #000 45%, transparent 100%); }
.s2-lineas path { fill: none; stroke: var(--kffffff-07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.s2-l { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 6px; max-width: 860px; margin-inline: auto; }
.s2-l li { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; color: var(--k7d818a); padding: 2px 10px; transition: color .3s; }
.s2-l li::before { content: "·"; color: var(--k474a52); margin-right: 4px; }
.s2-l li:hover { color: var(--fg); }
.s2-l li.dest { color: var(--fg); font-weight: 600; }
.s2-campo:not(.on) .s2-l li { opacity: 0; transform: translateY(8px); }
.s2-campo.on .s2-l li { transition: opacity .5s, transform .5s, color .3s; transition-delay: calc(var(--i) * 45ms); }
/* tres principios en cuadrícula de líneas finas */
.s2-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; margin-top: 64px; border-top: 1px solid var(--line); }
.s2-c { position: relative; padding: 28px 0 8px; }
.s2-c + .s2-c::before { content: ""; position: absolute; left: -28px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.s2-c h3 { margin: 26px 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.s2-c p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 34ch; }
.s2-v { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--k0d0b1f); isolation: isolate; }
.s2-v::before { content: ""; position: absolute; inset: -25%; filter: blur(26px); z-index: -1; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.s2-v1::before { background: radial-gradient(circle at 34% 62%, var(--k8b3dff) 0, transparent 34%), radial-gradient(circle at 68% 38%, var(--k5a8dff) 0, transparent 30%), radial-gradient(circle at 55% 75%, var(--k26208f) 0, transparent 45%); }
.s2-v2::before { background: conic-gradient(from 210deg at 58% 56%, var(--k0d0b1f), var(--k26208f), var(--k8b3dff), var(--k5a8dff), var(--ka35bff), var(--k0d0b1f) 80%); }
.s2-v3::before { background: linear-gradient(118deg, var(--k0d0b1f) 22%, var(--k6c5cff) 44%, var(--ka35bff) 52%, var(--k5a8dff) 60%, var(--k0d0b1f) 82%); }
.s2-c:hover .s2-v::before { transform: scale(1.08) rotate(4deg); }
/* luz que sigue al mouse y grano */
.s2-v::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9; mix-blend-mode: soft-light;
  background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), var(--kffffff-5), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .s2-campo:not(.on) .s2-l li { opacity: 1; transform: none; } .s2-v::before { transition: none; } }
@media (max-width: 900px) {
  .s2-l li { font-size: 14px; padding: 2px 6px; }
  .s2-g { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .s2-c { padding: 28px 0; border-top: 1px solid var(--line); } .s2-c + .s2-c::before { display: none; }
}
/* Procesos dentro de las muestras (20 oct 2026): sin ellos los tres cuadros eran solo luz y se leían vacíos. Cada uno
   es un bucle corto de Gu trabajando —lee un mensaje, recorre sus acciones, revive a un lead frío— que corre solo
   mientras está en pantalla (s2-procesos.js). Sin tarjetas, como el resto de la página: palabras que se encienden en
   lila (el mensaje de Mariana), líneas vivas (el reparto) y el reloj grande (el video). */
.s2-m { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 14px 18px; color: var(--fg); }
.s2-m p { margin: 0; max-width: none; color: var(--fg); } /* `.s2-c p` es el texto gris de abajo */
.s2-av { display: inline-block; width: 20px; height: 20px; flex: none; border-radius: 50%; vertical-align: -5px; margin-right: 7px; box-shadow: 0 0 0 1px var(--line2);
  background: url("/nueva-landing/shared/assets/gu/gu26-busto.png") 50% 24% / 165% no-repeat, var(--k0d0b1f); }
.s2-burb { padding: 6px 10px; border-radius: 11px; font-size: 12px; line-height: 1.35; max-width: 88%; background: color-mix(in oklch, var(--bg) 74%, transparent); box-shadow: 0 0 0 1px var(--line2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.s2-burb.gu { background: var(--brand); color: #fff; box-shadow: none; }
.s2-tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 600; background: color-mix(in oklch, var(--bg) 70%, transparent); }
.s2-tag.ok { color: var(--ok); } .s2-tag.ama { color: var(--warn); }
.s2-in { animation: s2-in .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes s2-in { from { opacity: 0; transform: translateY(8px); } }

/* 1 · lee: el mensaje del cliente entra palabra por palabra y Gu marca en lila lo que entendió, con su etiqueta */
.s2-m .p1-msg { max-width: 290px; text-align: center; font-family: var(--disp); font-weight: 800; font-size: 19px; letter-spacing: -.02em; line-height: 1.95; min-height: 3.9em; }
.p1-msg .w { opacity: 0; transition: opacity .2s, color .35s; color: color-mix(in oklch, var(--fg) 55%, transparent); }
.p1-msg .w.on { opacity: 1; }
.p1-msg .d { position: relative; white-space: nowrap; }
.p1-msg .d.lee { color: var(--fg); background: linear-gradient(transparent 62%, rgb(var(--t1) / .55) 62%); border-radius: 2px; }
.p1-msg .d::after { content: attr(data-l); position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: -7px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--fg); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.p1-msg .d.lee::after { opacity: .7; }
.s2-m .p1-res { min-height: 22px; font-size: 12.5px; font-weight: 600; opacity: 0; transition: opacity .35s; }
.s2-m .p1-res.on { opacity: 1; }

/* 2 · agente: los cuatro pasos sobre una línea; Gu se desliza de uno a otro, la luz avanza detrás de él y abajo
   cambia lo que está haciendo. (Antes era una equis con Gu al centro y se leía rara.) */
.p2-via { position: relative; width: 100%; height: 86px; }
.p2-lin { position: absolute; left: 12%; right: 12%; top: 50px; height: 1px; background: var(--line2); }
.p2-luz { position: absolute; left: 0; top: -.5px; height: 2px; width: var(--w, 0%); border-radius: 2px; background: var(--brand-l); box-shadow: 0 0 8px var(--brand-l); transition: width .7s cubic-bezier(.65, 0, .35, 1); }
.p2 .gu { position: absolute; top: 0; left: var(--gx, 12%); width: 38px; height: 38px; transform: translateX(-50%); border-radius: 50%; box-shadow: 0 0 0 1px var(--line2), 0 0 22px var(--k7f77dd-8);
  background: url("/nueva-landing/shared/assets/gu/gu26-busto.png") 50% 24% / 160% no-repeat, var(--k0d0b1f); transition: left .7s cubic-bezier(.65, 0, .35, 1); }
.p2 .v { position: absolute; left: var(--x); top: 46px; transform: translateX(-50%); padding-top: 16px; font-size: 12px; font-weight: 600; white-space: nowrap; color: color-mix(in oklch, var(--fg) 50%, transparent); transition: color .3s; }
.p2 .v::before { content: ""; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--k0d0b1f); box-shadow: 0 0 0 1px var(--line2); transition: background .3s, box-shadow .3s; }
.p2 .v.act, .p2 .v.hecho { color: var(--fg); }
.p2 .v.act::before, .p2 .v.hecho::before { background: var(--brand-l); box-shadow: 0 0 10px var(--brand-l); }
.s2-m .p2-st { min-height: 1.4em; font-size: 12.5px; font-weight: 500; text-align: center; opacity: .9; }

/* 3 · frío: el reloj, la conversación y los días que pasan */
.s2-m.p3 { gap: 9px; justify-content: flex-start; padding-top: 16px; }
.s2-m .p3-reloj { display: flex; align-items: baseline; gap: 4px; font-family: var(--disp); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.p3-reloj .h { font-size: 38px; font-variant-numeric: tabular-nums; transition: color .3s; }
.p3-reloj .ap { font-style: normal; font-size: 17px; color: var(--brand-l); letter-spacing: -.02em; }
.p3-reloj .dia { margin-left: 10px; align-self: center; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 2px 8px; border-radius: 99px; background: color-mix(in oklch, var(--bg) 70%, transparent); }
.p3-reloj.corre .h, .p3-reloj .dia.ama { color: var(--warn); }
.p3-log { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 6px; transition: opacity .35s; }
.p3-log.sale { opacity: 0; }
.p3-log .s2-burb { align-self: flex-start; } .p3-log .s2-burb.gu { align-self: flex-end; } .p3-log .s2-tag { align-self: center; }
@media (prefers-reduced-motion: reduce) { .p2 .gu, .p2-luz { transition: none; } .s2-in { animation: none; } }
@media (max-width: 900px) { .s2-m .p1-msg { font-size: 18px; } }