/* La portada EN MOVIMIENTO, segunda parte: las secciones de abajo del héroe (carril WEB-EN, 13 oct 2026). index.html la
   pide DENTRO del body, justo después del héroe: así el héroe se pinta sin esperarla (el navegador solo detiene lo que
   viene después de ella) y el primer vistazo no espera ~60 KB de reglas que todavía no se ven. Usa los colores, las
   curvas y las animaciones (@keyframes) de portada.css. */

/* =====================================================================================================================
   1b. LO QUE ES: la frase que se pinta palabra por palabra al bajar (sin movimiento, toda en blanco)
   ===================================================================================================================== */
.w-manifiesto { padding-top: clamp(120px, 15vw, 210px); padding-bottom: clamp(120px, 15vw, 210px); }
.w-pinta { margin: 0 auto; max-width: 1080px !important; font-size: clamp(30px, 4.4vw, 62px); font-weight: 750; line-height: 1.13; letter-spacing: -0.035em; color: var(--w-tinta); text-wrap: balance; text-align: center; }
html.w-mov .w-pinta .w-palabra { color: #6d6790; transition: color 0.4s; }
html.w-mov .w-pinta .w-palabra.on { color: var(--w-tinta); }

/* =====================================================================================================================
   ESCENAS FIJAS (data-escena): mientras la recorres se queda fija y avanza por etapas. portada.js pone .w-viva (solo con
   movimiento) y las clases .e1, .e2… según cuánto llevas; cada [data-en="n"] recibe .on desde la etapa n.
   ===================================================================================================================== */
.w-pin { position: relative; }
.w-viva { padding-top: 0; padding-bottom: 0; }
.w-viva > .w-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; display: flex; flex-direction: column; justify-content: center; padding: calc(64px + env(safe-area-inset-top)) var(--w-orilla) 28px; }
.w-historia.w-viva { height: 460vh; }
.w-compu.w-viva { height: 440vh; }
.w-iphone.w-viva { height: 380vh; }
.w-barrita { position: absolute; left: 50%; bottom: 18px; width: min(220px, 40vw); height: 3px; translate: -50% 0; border-radius: 3px; background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden; display: none; }
.w-barrita i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--w-luz); border-radius: inherit; }
.w-viva .w-barrita { display: block; }

/* =====================================================================================================================
   2. ASÍ TRABAJA: el chat que se arma solo
   ===================================================================================================================== */
.w-historia-dentro { width: 100%; max-width: var(--w-ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.w-pasos { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: paso; }
.w-paso { position: relative; padding: 14px 0 14px 46px; counter-increment: paso; transition: opacity 0.45s var(--w-curva); }
.w-paso::before { content: counter(paso); position: absolute; left: 0; top: 13px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: var(--w-dia-2); color: var(--w-dia-texto-2); transition: background-color 0.4s, color 0.4s, transform 0.4s var(--w-rebote); }
.w-paso h3 { margin: 0 0 4px; font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.02em; line-height: 1.25; }
.w-paso p { margin: 0; color: var(--w-dia-texto-2); font-size: 16px; line-height: 1.5; max-width: 460px; }
/* (el paso de ahora en tinta; los demás, apagados pero legibles —contraste AA—) */
.w-viva .w-paso :is(h3, p) { color: var(--w-dia-texto-3); transition: color 0.45s; }
.w-historia.w-viva.e1:not(.e3) .w-paso[data-paso="1"] h3, .w-historia.w-viva.e3:not(.e6) .w-paso[data-paso="2"] h3, .w-historia.w-viva.e6:not(.e8) .w-paso[data-paso="3"] h3, .w-historia.w-viva.e8 .w-paso[data-paso="4"] h3 { color: var(--w-dia-texto); }
.w-historia.w-viva.e1:not(.e3) .w-paso[data-paso="1"] p, .w-historia.w-viva.e3:not(.e6) .w-paso[data-paso="2"] p, .w-historia.w-viva.e6:not(.e8) .w-paso[data-paso="3"] p, .w-historia.w-viva.e8 .w-paso[data-paso="4"] p { color: var(--w-dia-texto-2); }
.w-historia.w-viva.e1:not(.e3) .w-paso[data-paso="1"]::before, .w-historia.w-viva.e3:not(.e6) .w-paso[data-paso="2"]::before, .w-historia.w-viva.e6:not(.e8) .w-paso[data-paso="3"]::before, .w-historia.w-viva.e8 .w-paso[data-paso="4"]::before { background: var(--w-luz); color: #0e0c17; transform: scale(1.12); }

/* La app de muestra (los mismos globos y tarjetas que la app de verdad) */
.w-app { position: relative; width: 100%; border-radius: 34px; background: var(--w-dia-carta); box-shadow: 0 50px 100px -40px rgba(40, 20, 90, 0.35), 0 0 0 1px var(--w-dia-linea); overflow: hidden; display: flex; flex-direction: column; }
.w-viva .w-app { height: min(680px, calc(100svh - 150px)); }
.w-app-cabeza { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--w-dia-linea); }
.w-app-robot.avatar { --t: 42px; }
.w-app-quien { margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.w-app-nombre { font-size: 16px; }
.w-app-estado { position: relative; display: block; height: 1.25em; font-size: 13.5px; color: var(--w-dia-texto-3); font-weight: 600; }
.w-ae { display: none; white-space: nowrap; }
/* (sin movimiento: el estado final) */
.w-ae-8 { display: block; color: var(--w-verde-texto); }
html.w-mov .w-viva .w-ae-8 { display: none; }
html.w-mov .w-viva:not(.e2) .w-ae-0, html.w-mov .w-viva.e2:not(.e3) .w-ae-2, html.w-mov .w-viva.e3:not(.e6) .w-ae-3, html.w-mov .w-viva.e6:not(.e7) .w-ae-6, html.w-mov .w-viva.e7:not(.e8) .w-ae-7, html.w-mov .w-viva.e8 .w-ae-8 { display: block; animation: w-sube 0.35s var(--w-curva) both; }
.w-ae-3, .w-ae-7 { color: var(--w-azul-texto); } .w-ae-6 { color: var(--w-naranja-texto); }
.w-hilo { list-style: none; margin: 0; padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.w-viva .w-hilo { justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px); mask-image: linear-gradient(to bottom, transparent 0, #000 30px); }
html.w-mov .w-viva .w-hilo [data-en]:not(.on) { display: none; }
.w-msj { display: flex; }
.w-msj p { margin: 0; max-width: 82%; padding: 10px 15px; border-radius: 22px; font-size: 15.5px; line-height: 1.42; }
.w-tu { justify-content: flex-end; }
.w-tu p { background: var(--w-yo); color: var(--w-yo-texto); border-bottom-right-radius: 7px; }
.w-el p { background: var(--w-el); color: var(--w-dia-texto); border-bottom-left-radius: 7px; }
.w-hilo .on { animation: w-entra-msj 0.5s var(--w-rebote) both; }
.w-tu.on { transform-origin: right bottom; } .w-el.on { transform-origin: left bottom; }
/* (abajo, donde escribes: como en la app) */
.w-app-escribe { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 6px 6px 6px 14px; border-radius: 99px; background: var(--w-dia-2); color: var(--w-dia-texto-3); font-size: 15px; }
.w-app-mas { font-size: 20px; font-weight: 400; line-height: 1; }
.w-app-campo { flex: 1; }
.w-app-enviar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--w-yo); color: var(--w-yo-texto); }
.w-app-enviar svg { width: 18px; height: 18px; } .w-app-enviar path { stroke-width: 2.4; }
/* La fila de trabajo: azul trabajando → naranja esperándote → verde lista */
.w-fila { --c: var(--w-verde); --cs: var(--w-verde-suave); --ct: var(--w-verde-texto); border-radius: 22px; background: var(--w-dia-carta); box-shadow: 0 0 0 1px var(--w-dia-linea), 0 8px 24px -14px rgba(40, 20, 90, 0.25); padding: 10px 12px; transition: box-shadow 0.4s; }
html.w-mov .w-viva.e3:not(.e6) .w-fila, html.w-mov .w-viva.e7:not(.e8) .w-fila { --c: var(--w-azul); --cs: var(--w-azul-suave); --ct: var(--w-azul-texto); }
html.w-mov .w-viva.e6:not(.e7) .w-fila { --c: var(--w-naranja); --cs: var(--w-naranja-suave); --ct: var(--w-naranja-texto); }
.w-fila-cabeza { display: flex; align-items: center; gap: 11px; }
.w-fila-icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cs); transition: background-color 0.4s; flex: none; }
.w-fila-icono img { width: 30px; height: 30px; }
.w-fila-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.w-fila-texto b { font-size: 15.5px; }
.w-fila-estado { font-size: 13.5px; font-weight: 650; color: var(--ct); transition: color 0.4s; }
.w-fe { display: none; }
.w-fe-3 { display: inline; }
html.w-mov .w-viva .w-fe-3 { display: none; }
html.w-mov .w-viva.e3:not(.e6) .w-fe-1, html.w-mov .w-viva.e6:not(.e7) .w-fe-2, html.w-mov .w-viva.e7:not(.e8) .w-fe-4, html.w-mov .w-viva.e8 .w-fe-3 { display: inline; }
.w-rueda { width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative; background: var(--c); transition: background-color 0.4s; }
.w-rueda::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
html.w-mov .w-viva:not(.e8) .w-rueda { background: none; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--c) 25%, transparent); }
html.w-mov .w-viva:not(.e8) .w-rueda::after { background: conic-gradient(from 0deg, transparent 0 70%, var(--c) 70% 100%); -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%); mask: radial-gradient(closest-side, transparent 72%, #000 74%); border-radius: 50%; }
.w-fila-pasos { list-style: none; margin: 8px 0 2px 51px; padding: 0; display: grid; gap: 4px; }
.w-fp { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--w-dia-texto-2); }
.w-fp svg { width: 16px; height: 16px; color: var(--w-verde); }
.w-fp svg path { stroke-width: 2.6; stroke-dasharray: 20; stroke-dashoffset: 0; }
.w-fp.on svg path { animation: w-traza 0.5s 0.1s var(--w-curva) both; }
html.w-mov .w-viva .w-fila-pasos .w-fp:not(.on) { display: none; }
/* El permiso: «No» y «Permitir» del mismo tamaño */
.w-permiso { border-radius: 24px; background: var(--w-dia-carta); box-shadow: 0 0 0 1px var(--w-dia-linea), 0 18px 40px -20px rgba(40, 20, 90, 0.35); padding: 14px; }
.w-permiso-titulo { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.w-permiso-icono { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--w-naranja-suave); color: var(--w-naranja); flex: none; }
.w-permiso-icono svg { width: 20px; height: 20px; }
.w-permiso-icono rect { fill: none; stroke: currentColor; stroke-width: 2; }
.w-permiso-caja { border-radius: 16px; background: var(--w-dia-2); padding: 10px 12px; display: grid; gap: 6px; }
.w-permiso-linea { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--w-dia-texto-2); }
.w-permiso-linea b { color: var(--w-dia-texto); }
.w-precio { font-size: 17px; }
.w-permiso-nota { margin: 8px 2px 10px; font-size: 13px; color: var(--w-dia-texto-3); }
.w-permiso-botones { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-permiso-botones span { min-height: 44px; display: grid; place-items: center; border-radius: 99px; font-weight: 700; font-size: 15px; transition: transform 0.2s, box-shadow 0.3s, opacity 0.3s; }
.w-b-no { background: var(--w-dia-2); color: var(--w-dia-texto); }
.w-b-si { background: var(--w-azul); color: #fff; }
.w-permiso-hecho { display: none; margin: 10px 2px 0; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--w-verde-texto); }
.w-permiso-hecho svg { width: 16px; height: 16px; }
.w-permiso-hecho path { stroke-width: 2.6; }
html.w-mov .w-viva.e7 .w-b-si { transform: scale(0.95); box-shadow: 0 0 0 6px color-mix(in srgb, var(--w-azul) 25%, transparent); }
html.w-mov .w-viva.e7 .w-b-no { opacity: 0.4; }
html.w-mov .w-viva.e7 .w-permiso-hecho, html:not(.w-mov) .w-permiso-hecho, .w-historia:not(.w-viva) .w-permiso-hecho { display: flex; }
html.w-mov .w-viva.e8 .w-permiso { display: none; }
/* El recibo: lo importante en grande */
.w-recibo { border-radius: 24px; background: var(--w-dia-carta); box-shadow: 0 0 0 1px var(--w-dia-linea), 0 18px 40px -20px rgba(40, 20, 90, 0.35); padding: 16px; }
.w-recibo-cabeza { margin: 0 0 6px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--w-dia-texto-3); font-weight: 600; }
.w-chip-ok { padding: 3px 9px; border-radius: 99px; background: var(--w-verde-suave); color: var(--w-verde-texto); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.w-recibo-grande { margin: 2px 0 2px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.w-recibo-hora { margin: 0 0 12px; font-size: 14px; color: var(--w-dia-texto-2); }
.w-recibo-datos { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 0; border-top: 1px dashed var(--w-dia-linea); border-bottom: 1px dashed var(--w-dia-linea); }
.w-recibo-datos dt { font-size: 12px; color: var(--w-dia-texto-3); font-weight: 600; }
.w-recibo-datos dd { margin: 2px 0 0; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.w-recibo-sigue { margin: 10px 0 0; font-size: 13.5px; color: var(--w-dia-texto-2); }

@media (max-width: 900px) {
  .w-historia-dentro { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .w-historia-texto { text-align: center; }
  .w-app-caja { width: 100%; max-width: 440px; margin: 0 auto; }
  .w-viva .w-historia-texto .w-h2 { font-size: clamp(26px, 7vw, 36px); margin: 8px 0 4px; }
  .w-viva .w-historia-texto .w-etiqueta { display: none; }
  /* (en el celular, fijo: solo el paso de ahora, debajo del título) */
  .w-viva .w-pasos { position: relative; margin: 6px 0 0; display: block; min-height: 3.4em; }
  .w-viva .w-paso { position: absolute; inset: 0 0 auto; padding: 0; opacity: 0 !important; transition: opacity 0.35s; }
  .w-viva .w-paso::before { display: none; }
  .w-viva .w-paso h3 { font-size: 17px; margin: 0; }
  .w-viva .w-paso p { margin: 2px auto 0; font-size: 14.5px; }
  .w-historia.w-viva.e1:not(.e3) .w-paso[data-paso="1"], .w-historia.w-viva.e3:not(.e6) .w-paso[data-paso="2"], .w-historia.w-viva.e6:not(.e8) .w-paso[data-paso="3"], .w-historia.w-viva.e8 .w-paso[data-paso="4"] { opacity: 1 !important; }
  .w-historia.w-viva:not(.e1) .w-paso[data-paso="1"] { opacity: 1 !important; }
  .w-viva .w-app { height: calc(100svh - 64px - 196px); min-height: 360px; }
  .w-viva .w-paso p { display: none; }
}

/* =====================================================================================================================
   3. SU PROPIA COMPUTADORA
   ===================================================================================================================== */
.w-compu-dentro { width: 100%; max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.w-compu .w-cabeza-centro { margin-bottom: 26px; }
.w-viva .w-compu-dentro .w-cabeza-centro .w-entrada { display: none; }
.w-viva .w-compu-dentro .w-h2 { font-size: clamp(26px, 2.8vw, 42px); max-width: 980px; margin-bottom: 0; }
.w-viva .w-compu .w-cabeza-centro, .w-compu.w-viva .w-cabeza-centro { margin-bottom: 18px; }
.w-viva .w-ventana { width: auto; height: min(calc(100svh - 360px), 600px); max-width: 100%; justify-self: center; }
.w-compu-pastilla { position: relative; margin: 0 0 18px; height: 40px; display: grid; place-items: center; }
.w-cp { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 13px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 14.5px; font-weight: 650; white-space: nowrap; opacity: 0; transition: opacity 0.35s, transform 0.35s var(--w-curva); transform: translateY(6px); }
.w-cp-punto { width: 9px; height: 9px; border-radius: 50%; background: #34d27a; box-shadow: 0 0 10px #34d27a; }
.w-cp-punto.naranja { background: #ffa04a; box-shadow: 0 0 10px #ffa04a; }
.w-cp-punto.azul { background: #6aa1ff; box-shadow: 0 0 10px #6aa1ff; }
.w-compu:not(.w-viva) .w-cp-4, html.w-mov .w-viva:not(.e6) .w-cp-1, html.w-mov .w-viva.e6:not(.e7) .w-cp-2, html.w-mov .w-viva.e7:not(.e8) .w-cp-3, html.w-mov .w-viva.e8 .w-cp-4 { opacity: 1; transform: none; }
.w-ventana-caja { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: center; }
.w-ventana {
  --entra: 1;
  position: relative; border-radius: 18px; background: #f6f6f9; color: #15131f; overflow: hidden; aspect-ratio: 16 / 10; max-height: calc(100svh - 300px); width: 100%;
  box-shadow: 0 60px 120px -40px color-mix(in srgb, var(--w-luz) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: perspective(1600px) rotateX(calc((1 - var(--entra)) * 26deg)) translateY(calc((1 - var(--entra)) * 70px)) scale(calc(0.9 + var(--entra) * 0.1)); transform-origin: 50% 100%;
}
.w-viva .w-ventana { --entra: clamp(0, var(--p, 1) * 8, 1); }
.w-ventana-barra { display: flex; align-items: center; gap: 14px; padding: 10px 12px 0; background: #e9e8ef; }
.w-semaforo { display: flex; gap: 6px; }
.w-semaforo i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .w-semaforo i:nth-child(2) { background: #febc2e; } .w-semaforo i:nth-child(3) { background: #28c840; }
.w-pestanas { display: flex; gap: 4px; min-width: 0; }
.w-pestana { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px 10px 0 0; font-size: 12.5px; font-weight: 600; color: #5d5a6c; white-space: nowrap; }
.w-pestana.activa { background: #f6f6f9; color: #15131f; }
.w-pestana-mas { padding: 7px 8px; }
.w-favicon { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #ff7a59, #ff3d7f); }
.w-favicon.cielo { background: linear-gradient(135deg, #48b4ff, #3a5bff); }
.w-direccion { display: flex; align-items: center; gap: 7px; margin: 8px 12px 0; padding: 6px 12px; border-radius: 99px; background: #e9e8ef; font-size: 12.5px; color: #4b485a; }
.w-direccion svg { width: 13px; height: 13px; color: #6a677a; }
.w-direccion rect, .w-entrar-nota rect { fill: none; stroke: currentColor; stroke-width: 2; }
.w-sitio { position: relative; padding: 14px 20px; height: calc(100% - 78px); }
.w-sitio-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.w-sitio-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.w-sitio-logo i { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(from 200deg, #ff3d7f, #ff7a59, #ffc75a, #ff3d7f); }
.w-sitio-menu { display: flex; gap: 8px; } .w-sitio-menu i { width: 34px; height: 8px; border-radius: 4px; background: #dedce6; }
.w-buscador { display: grid; grid-template-columns: 1fr 1fr 0.8fr auto; gap: 8px; align-items: stretch; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 6px 20px -10px rgba(20, 10, 60, 0.25); }
.w-campo { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 6px 10px; border-radius: 10px; background: #f3f2f7; min-width: 0; transition: box-shadow 0.3s; }
.w-campo small { font-size: 10.5px; color: #6b6880; font-weight: 600; }
.w-campo span { font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; }
.w-buscar { display: grid; place-items: center; padding: 0 16px; border-radius: 10px; background: #c8174f; color: #fff; font-weight: 750; font-size: 13px; white-space: nowrap; transition: transform 0.2s; }
.w-teclea { display: inline-block; }
.w-resultados { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.w-res { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 11px 14px; border-radius: 12px; background: #fff; font-size: 13px; box-shadow: 0 1px 0 #e6e4ee; transition: box-shadow 0.35s, transform 0.35s var(--w-rebote); }
.w-res-hora { font-weight: 750; font-variant-numeric: tabular-nums; }
.w-res-tipo { color: #5d5a6c; }
.w-res b { font-size: 15px; }
.w-res-chip { position: absolute; right: 70px; top: 50%; translate: 0 -50%; padding: 3px 8px; border-radius: 99px; background: #e3f7eb; color: #0f7a40; font-size: 11px; font-weight: 750; }
.w-res-mejor { box-shadow: 0 0 0 2px #16a35a; }
.w-entrar { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 22% 18px; background: rgba(246, 246, 249, 0.94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; }
.w-entrar-titulo { margin: 0 0 4px; font-weight: 800; font-size: 16px; text-align: center; }
.w-campo-clave { box-shadow: 0 0 0 2px #6aa1ff; }
.w-entrar-nota { margin: 2px 0 4px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #4b485a; font-weight: 600; }
.w-entrar-nota svg { width: 13px; height: 13px; }
.w-sigue-tu { min-height: 38px; background: #1f5fe6; }
.w-asiento { position: absolute; left: 20px; right: 20px; bottom: 14px; margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #e3f7eb; color: #0f7a40; font-size: 13px; font-weight: 700; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s var(--w-curva); }
.w-asiento svg { width: 16px; height: 16px; } .w-asiento path { stroke-width: 2.6; }
/* Los cursores */
.w-cursor { position: absolute; left: 76%; top: 86%; z-index: 4; display: flex; align-items: flex-start; pointer-events: none; transition: left 0.75s var(--w-curva), top 0.75s var(--w-curva), opacity 0.35s; }
.w-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.w-cursor svg path { fill: #8b5cf6; stroke: #fff; stroke-width: 1.4; }
.w-cursor b { margin: 16px 0 0 -4px; padding: 3px 8px; border-radius: 8px 8px 8px 2px; background: #8b5cf6; color: #fff; font-size: 11.5px; font-weight: 750; }
.w-cursor-tu svg path { fill: #1f5fe6; } .w-cursor-tu b { background: #1f5fe6; }
.w-cursor-tu { opacity: 0; left: 30%; top: 96%; }
.w-cursor.clic svg { animation: w-clic 0.35s ease-out; }
/* (sin movimiento: el último momento —tú le diste el control de regreso y él sigue—, con todo a la vista: la ventana
   crece lo que haga falta y el aviso del asiento va debajo de los resultados) */
.w-compu:not(.w-viva) .w-asiento { opacity: 1; transform: none; position: static; margin-top: 12px; }
.w-compu:not(.w-viva) .w-ventana { aspect-ratio: auto; max-height: none; }
.w-compu:not(.w-viva) .w-sitio { height: auto; padding-bottom: 18px; }
.w-compu:not(.w-viva) .w-cursor-lyron { left: 64%; top: 60%; }
/* Cada momento */
html.w-mov .w-viva .w-teclea { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s steps(7, end); }
html.w-mov .w-viva .w-teclea-3 { transition-timing-function: steps(10, end); }
html.w-mov .w-viva.e2 .w-teclea-1, html.w-mov .w-viva.e3 .w-teclea-2, html.w-mov .w-viva.e7 .w-teclea-3 { clip-path: inset(0 0 0 0); }
html.w-mov .w-viva:not(.e4) .w-resultados { opacity: 0; transform: translateY(10px); }
.w-resultados { transition: opacity 0.45s, transform 0.45s var(--w-curva); }
.w-res:nth-child(2) { transition-delay: 0.06s; } .w-res:nth-child(3) { transition-delay: 0.12s; }
html.w-mov .w-viva:not(.e5) .w-res-chip { opacity: 0; }
html.w-mov .w-viva:not(.e5) .w-res-mejor { box-shadow: 0 1px 0 #e6e4ee; }
html.w-mov .w-viva.e5 .w-res-mejor { transform: scale(1.015); }
.w-res-chip { transition: opacity 0.3s; }
html.w-mov .w-viva.e6:not(.e8) .w-entrar { opacity: 1; visibility: visible; }
html.w-mov .w-viva.e8 .w-asiento { opacity: 1; transform: none; }
html.w-mov .w-viva.e8 .w-resultados { opacity: 0.35; }
html.w-mov .w-viva.e2 .w-campo-a, html.w-mov .w-viva.e3 .w-campo-fecha { box-shadow: 0 0 0 2px #8b5cf6; }
html.w-mov .w-viva.e3 .w-campo-a, html.w-mov .w-viva.e4 .w-campo-fecha { box-shadow: none; }
html.w-mov .w-viva .w-cursor-lyron { left: 80%; top: 92%; }
html.w-mov .w-viva.e2 .w-cursor-lyron { left: 40%; top: 30%; }
html.w-mov .w-viva.e3 .w-cursor-lyron { left: 64%; top: 30%; }
html.w-mov .w-viva.e4 .w-cursor-lyron { left: 86%; top: 30%; }
html.w-mov .w-viva.e5 .w-cursor-lyron { left: 52%; top: 46%; }
html.w-mov .w-viva.e6 .w-cursor-lyron { left: 92%; top: 8%; opacity: 0; }
html.w-mov .w-viva.e7 .w-cursor-tu { opacity: 1; left: 56%; top: 54%; }
html.w-mov .w-viva.e8 .w-cursor-tu { opacity: 0; left: 56%; top: 78%; }
html.w-mov .w-viva.e8 .w-cursor-lyron { opacity: 1; left: 66%; top: 60%; }
/* Los tres momentos a un lado */
.w-compu-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.w-cpaso { padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 2px; transition: background-color 0.4s, box-shadow 0.4s, opacity 0.4s; }
.w-cpaso b { font-size: 16px; }
.w-cpaso span { font-size: 14px; color: var(--w-tinta-2); line-height: 1.4; }
.w-viva .w-cpaso :is(b, span) { color: var(--w-tinta-3); }
.w-viva:not(.e6) .w-cpaso[data-cpaso="1"], .w-viva.e6:not(.e8) .w-cpaso[data-cpaso="2"], .w-viva.e8 .w-cpaso[data-cpaso="3"] { opacity: 1; background: color-mix(in srgb, var(--w-luz) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-luz) 55%, transparent); }
@media (max-width: 900px) {
  .w-ventana-caja { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .w-compu-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .w-cpaso { padding: 10px; }
  .w-cpaso span { display: none; }
  .w-cpaso { padding: 8px 6px; text-align: center; justify-content: center; }
  .w-cpaso b { font-size: 12.5px; line-height: 1.2; }
  .w-ventana { aspect-ratio: 10 / 11; max-height: none; }
  .w-viva .w-ventana { height: calc(100svh - 64px - 250px); aspect-ratio: auto; min-height: 340px; }
  .w-buscador { grid-template-columns: 1fr 1fr; }
  .w-buscar { grid-column: 1 / -1; min-height: 36px; }
  .w-res { grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 12px; }
  .w-res-tipo { grid-column: 1; grid-row: 2; font-size: 12px; }
  .w-res b { grid-row: 1 / 3; grid-column: 2; }
  .w-res-chip { position: static; translate: none; grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
  .w-entrar { padding: 16px 8%; }
  .w-compu:not(.w-viva) .w-cursor { display: none; }
  .w-pestana:not(.activa) { display: none; }
  .w-viva .w-compu-dentro .w-cabeza-centro { margin-bottom: 12px; }
  .w-viva .w-compu-dentro .w-etiqueta { display: none; }
  .w-viva .w-compu-dentro .w-h2 { font-size: clamp(22px, 6vw, 30px); margin: 0; }
  .w-compu-pastilla { margin-bottom: 10px; }
  .w-cp { font-size: 13px; }
  html.w-mov .w-viva.e2 .w-cursor-lyron { left: 62%; top: 30%; }
  html.w-mov .w-viva.e3 .w-cursor-lyron { left: 22%; top: 42%; }
  html.w-mov .w-viva.e4 .w-cursor-lyron { left: 50%; top: 50%; }
  html.w-mov .w-viva.e5 .w-cursor-lyron { left: 50%; top: 62%; }
  html.w-mov .w-viva.e7 .w-cursor-tu { left: 56%; top: 55%; }
}

/* =====================================================================================================================
   4. TUS AGENTES
   ===================================================================================================================== */
.w-familia { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.w-agente { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 14px 18px; border-radius: 28px; background: var(--w-dia-carta); box-shadow: 0 0 0 1px var(--w-dia-linea), 0 24px 50px -30px rgba(40, 20, 90, 0.35); transition: transform 0.4s var(--w-rebote), box-shadow 0.4s; }
.w-agente:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--w-dia-linea), 0 34px 60px -30px rgba(40, 20, 90, 0.45); }
.w-agente-cara { width: 96px; height: 96px; display: grid; place-items: center; }
.w-agente-cara .agente-cara { --t: 92px; }
.w-agente h3 { margin: 10px 0 0; font-size: 20px; letter-spacing: -0.02em; }
.w-agente-rol { margin: 2px 0 12px; font-size: 14px; color: var(--w-dia-texto-3); font-weight: 600; }
.w-agente-estado { margin: auto 0 0; min-height: 3.2em; display: grid; place-items: center; width: 100%; }
.w-ag { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 11px; border-radius: 14px; background: var(--w-dia-2); font-size: 13px; font-weight: 650; line-height: 1.3; color: var(--w-dia-texto-2); transition: opacity 0.45s, transform 0.45s var(--w-curva); }
.w-ag-1, .w-ag-2 { opacity: 0; transform: translateY(8px); }
.w-agente[data-estado="1"] .w-ag-0, .w-agente[data-estado="2"] .w-ag-0, .w-agente[data-estado="2"] .w-ag-1 { opacity: 0; transform: translateY(-8px); }
.w-agente[data-estado="1"] .w-ag-1, .w-agente[data-estado="2"] .w-ag-2 { opacity: 1; transform: none; }
.w-agente[data-estado="2"] .w-ag-2 { background: var(--w-verde-suave); color: var(--w-verde-texto); }
.w-agente[data-estado="1"] .w-ag-1:has(.w-alerta) { background: var(--w-naranja-suave); color: var(--w-naranja-texto); }
.w-puntos { display: inline-flex; gap: 3px; } .w-puntos b { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.w-onda { display: inline-flex; align-items: center; gap: 2px; height: 14px; } .w-onda b { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: center; }
.w-onda b:nth-child(2) { transform: scaleY(0.5); } .w-onda b:nth-child(3) { transform: scaleY(0.8); } .w-onda b:nth-child(4) { transform: scaleY(0.4); }
.w-reloj { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.8px currentColor; position: relative; }
.w-reloj::after { content: ""; position: absolute; left: 6.1px; top: 3px; width: 1.8px; height: 5px; background: currentColor; border-radius: 1px; transform-origin: 50% 100%; }
.w-palomita { width: 15px; height: 15px; border-radius: 50%; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.4l2.4 2.3 5-5.3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.3 8.4l2.4 2.3 5-5.3' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat exclude, linear-gradient(#000 0 0); }
.w-alerta { width: 15px; height: 15px; border-radius: 50%; background: currentColor; position: relative; flex: none; }
.w-alerta::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--w-dia-carta); font-size: 11px; font-weight: 900; font-style: normal; }
.w-zzz { font-style: normal; font-weight: 900; font-size: 13px; }
.w-equipo { margin-top: 26px !important; display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 20px 26px; border-radius: 28px; background: var(--w-dia-carta); box-shadow: 0 0 0 1px var(--w-dia-linea); }
.w-equipo-texto { margin: 0; max-width: 560px; color: var(--w-dia-texto-2); font-size: 16px; line-height: 1.5; }
.w-equipo-texto b { color: var(--w-dia-texto); }
.w-equipo-relevo { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.w-rel { padding: 8px 14px; border-radius: 99px; background: var(--w-dia-2); font-size: 14px; font-weight: 700; color: var(--w-dia-texto); }
.w-flecha { position: relative; width: 34px; height: 2px; border-radius: 2px; background: var(--w-dia-linea); overflow: hidden; }
.w-flecha::after { content: ""; position: absolute; top: -2px; left: 0; width: 8px; height: 6px; border-radius: 3px; background: var(--w-luz); }
@media (max-width: 1100px) { .w-familia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .w-familia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .w-familia .w-agente:last-child { grid-column: 1 / -1; }
  .w-agente { padding: 18px 10px 14px; border-radius: 24px; }
  .w-agente-cara { width: 80px; height: 80px; } .w-agente-cara .agente-cara { --t: 76px; }
  .w-ag { font-size: 12.5px; padding: 6px 9px; }
  .w-equipo { padding: 18px; }
}

/* =====================================================================================================================
   5. EN TU IPHONE
   ===================================================================================================================== */
.w-iphone-dentro { width: 100%; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.w-lista-check { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--w-tinta-2); font-size: 16.5px; font-weight: 550; }
.w-lista-check li { display: flex; align-items: center; gap: 10px; }
.w-lista-check li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--w-luz) 25%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.4l2.8 2.7 5.6-6' fill='none' stroke='%23dac4ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.w-iphone-caja { --entra: 1; position: relative; display: grid; place-items: center; perspective: 1800px; }
.w-viva .w-iphone-caja { --entra: clamp(0, var(--p, 1) * 7, 1); }
.w-iphone-aura { position: absolute; width: min(130%, 100vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--w-luz) 40%, transparent), transparent); opacity: calc(0.4 + var(--entra) * 0.6); }
.w-iphone-marco { position: relative; width: min(330px, 74vw); aspect-ratio: 9 / 19.3; border-radius: 54px; padding: 10px; background: linear-gradient(145deg, #4a4756, #1b1a22 40%, #3a3845 70%, #121118); box-shadow: 0 60px 120px -30px rgba(0, 0, 0, 0.8), inset 0 0 0 1.5px rgba(255, 255, 255, 0.18);
  transform: rotateY(calc((1 - var(--entra)) * -32deg)) rotateX(calc((1 - var(--entra)) * 14deg)) translateY(calc((1 - var(--entra)) * 90px)); transform-style: preserve-3d; }
.w-viva .w-iphone-marco { width: min(330px, 74vw, calc((100svh - 140px) * 9 / 19.3)); }
.w-iphone-pantalla { position: relative; height: 100%; border-radius: 44px; overflow: hidden; color: #fff; display: flex; flex-direction: column; align-items: center; padding: 14px 12px;
  background: radial-gradient(90% 50% at 20% 10%, #6a4bd1 0%, transparent 60%), radial-gradient(80% 60% at 90% 80%, #1f5fe6 0%, transparent 60%), linear-gradient(170deg, #2a1c5c, #0d0b24 70%); }
.w-isla { position: relative; z-index: 2; width: 34%; height: 32px; border-radius: 20px; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; transition: width 0.55s var(--w-rebote), height 0.55s var(--w-rebote), border-radius 0.55s var(--w-rebote); }
.w-isla-ojos { display: flex; gap: 5px; } .w-isla-ojos i { width: 6px; height: 9px; border-radius: 3px; background: #ffe2b8; box-shadow: 0 0 6px #ffb05a; }
.w-isla-tiempo { font-size: 12px; font-weight: 700; color: #4ee08f; font-variant-numeric: tabular-nums; }
.w-isla-grande { position: absolute; inset: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.w-isla-titulo { margin: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.25; }
.w-isla-quien { font-size: 12px; font-weight: 700; color: #ffa04a; }
.w-isla-detalle { margin: 0; font-size: 12.5px; color: #c9c5d8; }
.w-isla-botones, .w-act-botones { margin: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-isla-botones span, .w-act-botones span { display: grid; place-items: center; min-height: 36px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); font-size: 13.5px; font-weight: 700; transition: transform 0.2s, box-shadow 0.3s; }
.w-isla-botones .si, .w-act-botones .si { background: #1f5fe6; }
.w-bloqueo-fecha { margin: 26px 0 0; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.w-bloqueo-hora { margin: 0; font-size: clamp(64px, 8vw, 84px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.w-actividad { margin-top: auto; width: 100%; border-radius: 24px; padding: 12px 14px; background: rgba(30, 24, 60, 0.62); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: transform 0.5s var(--w-rebote), opacity 0.4s; }
.w-actividad-cabeza { display: flex; align-items: center; gap: 10px; }
.w-actividad-cabeza img { width: 40px; height: 40px; }
.w-actividad-cabeza p { margin: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.25; }
.w-act-estado { font-size: 12.5px; font-weight: 700; color: #4ee08f; }
.w-ae1, .w-ae2 { display: none; } .w-ae2 { color: #ffa04a; }
.w-act-pasos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; color: rgba(255, 255, 255, 0.8); }
.w-act-pasos li::before { content: "✓ "; color: #4ee08f; font-weight: 800; }
.w-act-pasos .w-ap3::before { content: "• "; color: #6aa1ff; }
.w-act-permiso { display: none; margin-top: 8px; }
.w-act-permiso p { margin: 0 0 8px; font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.w-act-listo { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #4ee08f; }
.w-act-listo svg { width: 16px; height: 16px; } .w-act-listo path { stroke-width: 2.6; }
.w-bloqueo-abajo { width: 100%; display: flex; justify-content: space-between; padding: 14px 18px 6px; }
.w-bloqueo-abajo i { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
/* (sin movimiento: el final —reservado—) */
.w-iphone:not(.w-viva) .w-act-pasos .w-ap3 { display: none; }
/* Cada momento */
html.w-mov .w-viva .w-act-listo { display: none; }
html.w-mov .w-viva .w-ae3 { display: none; }
html.w-mov .w-viva:not(.e5) .w-ae1, html.w-mov .w-viva.e5:not(.e7) .w-ae2, html.w-mov .w-viva.e7 .w-ae3 { display: inline; }
html.w-mov .w-viva:not(.e2) .w-actividad { opacity: 0; transform: translateY(40px) scale(0.94); }
html.w-mov .w-viva:not(.e3) .w-ap2, html.w-mov .w-viva:not(.e4) .w-ap3 { display: none; }
html.w-mov .w-viva.e5 .w-act-pasos { display: none; }
html.w-mov .w-viva.e5:not(.e7) .w-act-permiso { display: block; }
html.w-mov .w-viva.e7 .w-act-listo { display: flex; }
html.w-mov .w-viva.e5:not(.e7) .w-isla { width: 92%; height: 150px; border-radius: 36px; }
html.w-mov .w-viva.e5:not(.e7) .w-isla-grande { opacity: 1; transition-delay: 0.2s; }
html.w-mov .w-viva.e5:not(.e7) :is(.w-isla-ojos, .w-isla-tiempo) { opacity: 0; }
html.w-mov .w-viva.e6 .w-isla-botones .si { transform: scale(0.94); box-shadow: 0 0 0 6px rgba(31, 95, 230, 0.35); }
.w-isla-ojos, .w-isla-tiempo, .w-isla-listo { transition: opacity 0.2s; }
.w-isla-listo { display: none; width: 18px; height: 18px; color: #4ee08f; } .w-isla-listo svg { width: 18px; height: 18px; } .w-isla-listo path { stroke-width: 2.8; }
.w-iphone:not(.w-viva) .w-isla-tiempo, html.w-mov .w-viva.e7 .w-isla-tiempo { display: none; }
.w-iphone:not(.w-viva) .w-isla-listo, html.w-mov .w-viva.e7 .w-isla-listo { display: block; }
.w-act-toca { margin: 0 !important; font-size: 12px !important; color: #ffa04a !important; font-weight: 700; }
@media (max-width: 900px) {
  .w-iphone-dentro { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 10px; }
  .w-iphone-texto { display: flex; flex-direction: column; align-items: center; }
  .w-lista-check { justify-items: start; }
  .w-viva .w-iphone-texto .w-entrada, .w-viva .w-iphone-texto .w-lista-check { display: none; }
  .w-viva .w-iphone-texto .w-h2 { font-size: clamp(24px, 6.6vw, 34px); margin: 6px 0 6px; }
  .w-viva .w-iphone-marco { width: min(300px, 70vw, calc((100svh - 230px) * 9 / 19.3)); }
  .w-bloqueo-hora { font-size: 60px; }
}

/* =====================================================================================================================
   6. TÚ TIENES EL CONTROL
   ===================================================================================================================== */
.w-control-arriba { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: center; margin-bottom: clamp(40px, 5vw, 64px) !important; }
.w-pausa-demo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.w-pausa-grande { position: relative; width: 168px; height: 168px; border-radius: 50%; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; isolation: isolate;
  background: radial-gradient(circle at 35% 30%, #2b2645, #0e0c17 70%); box-shadow: 0 30px 60px -20px rgba(40, 20, 90, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12); font: inherit; font-size: 13px; font-weight: 700; padding: 0 22px; text-align: center; line-height: 1.25; transition: transform 0.3s var(--w-rebote); }
.w-pausa-grande:hover { transform: scale(1.04); }
.w-pausa-grande:active { transform: scale(0.96); }
.w-pausa-grande svg { width: 40px; height: 40px; }
.w-pausa-grande svg path { stroke-width: 2.4; }
.w-pausa-anillo { position: absolute; inset: -10px; border-radius: 50%; z-index: -1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--w-luz) 50%, transparent); }
.w-pausa-nota { margin: 6px 0 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-dia-texto-2); }
html[data-movimiento="quieto"] .w-pausa-grande { background: radial-gradient(circle at 35% 30%, #4b6bff, #1f3fbf 70%); }
.w-promesas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.w-promesa { padding: 24px 22px 22px; border-radius: 26px; background: var(--w-dia-carta); box-shadow: 0 0 0 1px var(--w-dia-linea); }
.w-promesa h3 { margin: 16px 0 6px; font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }
.w-promesa p { margin: 0; color: var(--w-dia-texto-2); font-size: 15.5px; line-height: 1.5; }
.w-promesa-icono { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: color-mix(in srgb, var(--w-luz) 14%, transparent); color: #6b3fe0; }
:root[data-tema="oscuro"] .w-promesa-icono { color: var(--w-luz-2); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .w-promesa-icono { color: var(--w-luz-2); } }
.w-promesa-icono svg { width: 26px; height: 26px; }
.w-promesa-icono :is(rect, circle) { fill: none; stroke: currentColor; stroke-width: 2; }
.w-promesa-icono path, .w-promesa-icono :is(rect, circle) { stroke-dasharray: 80; stroke-dashoffset: 0; }
.w-arco { transform-origin: 70% 100%; }
@media (max-width: 900px) {
  .w-control-arriba { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .w-control-arriba .w-entrada { margin: 0 auto; }
  .w-promesas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .w-promesas { grid-template-columns: minmax(0, 1fr); } .w-pausa-grande { width: 148px; height: 148px; } }

/* =====================================================================================================================
   7. TU IDIOMA, TU PAÍS
   ===================================================================================================================== */
.w-cinta { margin: 0 calc(-1 * var(--w-orilla)); overflow: hidden; display: grid; gap: 12px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.w-cinta-fila { list-style: none; margin: 0; padding: 0 var(--w-orilla); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
html.w-mov .w-cinta-fila { flex-wrap: nowrap; width: max-content; justify-content: flex-start; }
html:not(.w-mov) .w-cinta-fila .w-clon { display: none; }
.w-cinta-fila li { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px 12px 20px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-size: 16px; font-weight: 600; color: var(--w-tinta); white-space: nowrap; }
.w-cinta-fila small { padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--w-luz) 22%, transparent); color: var(--w-luz-2); font-size: 12px; font-weight: 700; }
.w-formatos { list-style: none; padding: 0; margin-top: clamp(40px, 5vw, 64px) !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.w-formatos li { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.w-formatos small { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-tinta-3); }
.w-formatos span { font-size: 16px; color: var(--w-tinta-2); font-variant-numeric: tabular-nums; }
.w-formatos b { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .w-formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .w-cinta-fila li { font-size: 14.5px; padding: 10px 12px 10px 16px; } .w-formatos b { font-size: 20px; } }

/* =====================================================================================================================
   8. Y MUCHO MÁS (cuadros con su dibujito vivo)
   ===================================================================================================================== */
.w-bento { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.w-caja { padding: 0 0 22px; border-radius: 28px; overflow: hidden; background: var(--w-dia-carta); box-shadow: 0 0 0 1px var(--w-dia-linea); }
.w-caja h3 { margin: 18px 22px 6px; font-size: 19px; letter-spacing: -0.02em; }
.w-caja p { margin: 0 22px; color: var(--w-dia-texto-2); font-size: 15.5px; line-height: 1.5; }
.w-caja-dibujo { position: relative; height: 150px; display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 100%, color-mix(in srgb, var(--w-luz) 16%, transparent), transparent 70%), var(--w-dia-2); overflow: hidden; }
.w-ecualizador { display: flex; align-items: center; gap: 4px; height: 64px; }
.w-ecualizador b { width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(var(--w-luz), #6f9bff); transform: scaleY(var(--s, 0.5)); }
.w-ecualizador b:nth-child(3n) { --s: 0.8; } .w-ecualizador b:nth-child(4n) { --s: 0.35; } .w-ecualizador b:nth-child(5n) { --s: 1; } .w-ecualizador b:nth-child(7n) { --s: 0.6; }
.w-play { position: absolute; right: 18px; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--w-dia-texto); }
.w-play::after { content: ""; position: absolute; left: 15px; top: 12px; border-left: 13px solid var(--w-dia-carta); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.w-caja-rutina .w-caja-dibujo { display: flex; align-items: center; justify-content: center; gap: 0; }
.w-rutina-nodo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--w-dia-carta); box-shadow: 0 8px 20px -10px rgba(40, 20, 90, 0.4); color: var(--w-dia-texto-2); }
.w-rutina-nodo svg { width: 26px; height: 26px; } .w-rutina-nodo circle { fill: none; stroke: currentColor; stroke-width: 2; }
.w-rutina-fin { color: #6b3fe0; }
.w-rutina-linea { position: relative; width: 44px; height: 2px; background: var(--w-dia-linea); overflow: hidden; }
.w-rutina-linea::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 2px; background: var(--w-luz); }
.w-mini-ventana { position: relative; width: 170px; height: 104px; border-radius: 12px; background: var(--w-dia-carta); box-shadow: 0 14px 30px -14px rgba(40, 20, 90, 0.45); padding: 26px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.w-mv-barra { position: absolute; left: 0; right: 0; top: 0; height: 16px; border-radius: 12px 12px 0 0; background: var(--w-dia-2); }
.w-mv-linea { height: 8px; border-radius: 4px; background: var(--w-dia-2); transform-origin: left; }
.w-mv-linea.l1 { width: 80%; background: color-mix(in srgb, var(--w-luz) 40%, transparent); } .w-mv-linea.l2 { width: 60%; } .w-mv-linea.l3 { width: 70%; }
.w-mv-boton { width: 54px; height: 16px; border-radius: 8px; background: var(--w-azul); }
.w-conectores { display: grid; grid-template-columns: repeat(3, 44px); gap: 12px; }
.w-conectores img { width: 44px; height: 44px; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 6px 16px -8px rgba(40, 20, 90, 0.4); }
.w-caja-voz .w-caja-dibujo img { position: relative; width: 64px; height: 64px; z-index: 1; }
.w-ondas { position: absolute; inset: 0; display: grid; place-items: center; }
.w-ondas i { grid-area: 1 / 1; width: 70px; height: 70px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--w-luz) 50%, transparent); opacity: 0; }
.w-grafica { width: 78%; height: auto; }
.w-grafica-linea { fill: none; stroke: var(--w-luz); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 0; }
.w-grafica-punto { fill: var(--w-verde); stroke: var(--w-dia-carta); stroke-width: 3; }
.w-baja { position: absolute; right: 16px; top: 16px; padding: 4px 10px; border-radius: 99px; background: var(--w-verde-suave); color: var(--w-verde-texto); font-weight: 800; font-size: 13px; }
@media (max-width: 1000px) { .w-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .w-bento { grid-template-columns: minmax(0, 1fr); } .w-caja-dibujo { height: 128px; } }

/* =====================================================================================================================
   9. OBTENER LYRON
   ===================================================================================================================== */
.w-opciones { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.w-opcion { --x: 50%; --y: 0%; position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 30px; background: radial-gradient(420px circle at var(--x) var(--y), color-mix(in srgb, var(--w-luz) 16%, transparent), transparent 60%), rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: transform 0.4s var(--w-rebote), box-shadow 0.4s; }
.w-opcion:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w-luz) 45%, transparent); }
.w-opcion-destacada { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--w-luz) 60%, transparent), 0 40px 80px -40px color-mix(in srgb, var(--w-luz) 60%, transparent); }
.w-opcion h3 { margin: 18px 0 8px; font-size: 23px; letter-spacing: -0.025em; }
.w-opcion > p { margin: 0; color: var(--w-tinta-2); font-size: 15.5px; line-height: 1.5; }
.w-opcion > .w-opcion-sello { position: absolute; top: 22px; right: 22px; margin: 0; padding: 4px 11px; border-radius: 99px; background: #e3f7eb; color: #0f7a40; font-size: 12.5px; font-weight: 800; }
.w-opcion-pie { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.w-opcion-pie.botones .principal { min-height: 52px; width: 100%; border-radius: 99px; font-size: 16px; background: #fff; color: #0e0c17; }
.w-opcion-pie.botones .principal:hover { background: #ece8ff; }
.w-opcion-pie.botones .texto { color: var(--w-tinta-2); }
.w-opcion-pie.botones .texto b { color: var(--w-luz-2); }
.w-opcion-pie.botones .proveedor { width: 100%; }
.w-opcion-pie .nota-lista { color: var(--w-tinta-3); margin: 0; font-size: 13.5px; max-width: none; }
.w-opcion-meta { margin: 10px 0 0; font-size: 13.5px; color: var(--w-tinta-3); }
.w-opcion-estado { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--w-tinta-2); }
.w-chip-pronto { padding: 3px 10px; border-radius: 99px; background: #fff1e2; color: #a64e02; font-size: 12.5px; font-weight: 800; }
.w-avisame { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.w-avisame input { min-height: 46px; border-radius: 99px; padding: 0 16px; border: 0; background: rgba(255, 255, 255, 0.09); color: var(--w-tinta); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font: inherit; font-size: 15px; min-width: 0; }
.w-avisame input::placeholder { color: var(--w-tinta-3); }
.w-avisame input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.w-avisame .avisame-listo { grid-column: 1 / -1; font-size: 13.5px; color: #8fe3b4; font-weight: 600; }
.w-avisame .avisame-listo:empty { display: none; }
.w-tf-pasos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.w-tf-pasos li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 12px; align-items: start; font-size: 15px; color: var(--w-tinta-2); line-height: 1.45; }
.w-tf-num { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--w-luz) 26%, transparent); color: #fff; font-weight: 800; font-size: 14px; }
.w-tf-enlace { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 700; text-decoration: none; }
.w-tf-enlace svg, .w-tf-pasos .w-boton svg { width: 16px; height: 16px; }
.w-tf-pasos .w-boton { justify-self: start; margin-top: 4px; }
.w-opcion-dibujo { height: 92px; display: flex; align-items: flex-end; }
.w-dib-mac { position: relative; display: flex; flex-direction: column; align-items: center; }
.w-dib-pantalla { width: 112px; height: 70px; border-radius: 8px 8px 2px 2px; background: #0e0c17; box-shadow: inset 0 0 0 3px #3b3947, 0 0 30px -6px var(--w-luz); display: grid; place-items: center; }
.w-dib-pantalla b { width: 30px; height: 30px; border-radius: 50%; background: url("/i3d/robot-cabeza-g.webp") center / contain no-repeat; }
.w-dib-base { width: 136px; height: 8px; border-radius: 0 0 8px 8px; background: linear-gradient(#cfcdd8, #8f8c9c); }
.w-dib-navegador { width: 128px; height: 84px; border-radius: 10px; background: #f6f6f9; box-shadow: 0 0 30px -6px var(--w-luz); overflow: hidden; display: flex; flex-direction: column; }
.w-dib-barra { display: flex; gap: 4px; padding: 6px 8px; background: #e2e1ea; } .w-dib-barra b { width: 6px; height: 6px; border-radius: 50%; background: #ff5f57; } .w-dib-barra b:nth-child(2) { background: #febc2e; } .w-dib-barra b:nth-child(3) { background: #28c840; }
.w-dib-cara { flex: 1; background: url("/i3d/robot-cabeza-g.webp") center / 46px no-repeat; }
.w-dib-iphone { position: relative; width: 50px; height: 92px; border-radius: 14px; background: #0e0c17; box-shadow: inset 0 0 0 3px #3b3947, 0 0 30px -6px var(--w-luz); display: flex; flex-direction: column; align-items: center; padding-top: 7px; }
.w-dib-isla { width: 18px; height: 6px; border-radius: 4px; background: #000; box-shadow: inset 0 0 0 1px #2c2a36; }
.w-dib-tf { margin-top: 18px; width: 26px; height: 26px; border-radius: 7px; background: radial-gradient(circle at 50% 40%, #fff 0 4px, transparent 5px), linear-gradient(160deg, #31a8ff, #1458e8); }
.w-obtener-nota { text-align: center; margin-top: 30px !important; color: var(--w-tinta-2); font-size: 15.5px; }
.w-obtener-nota a { font-weight: 700; text-decoration: none; }
.w-obtener .letra-chica { color: var(--w-tinta-3); }
@media (max-width: 960px) { .w-opciones { grid-template-columns: minmax(0, 1fr); max-width: 560px !important; } .w-opcion-destacada { order: -1; } }
/* (sin la opción del navegador —<body data-sin-web>—: Mac e iPhone, dos columnas centradas) */
@media (min-width: 961px) { body[data-sin-web] .w-opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; margin-inline: auto; } }

/* =====================================================================================================================
   10–11. PREGUNTAS Y CIERRE
   ===================================================================================================================== */
.w-preguntas .preguntas { max-width: 860px !important; }
.w-preguntas .preguntas details { background: var(--w-dia-carta); box-shadow: 0 0 0 1px var(--w-dia-linea); }
.w-preguntas .preguntas summary, .w-preguntas .preguntas p { color: var(--w-dia-texto); }
.w-preguntas .preguntas p { color: var(--w-dia-texto-2); }
.w-cierre { text-align: center; overflow: hidden; padding-bottom: clamp(110px, 13vw, 180px); display: flex; flex-direction: column; align-items: center; }
.w-cierre .w-h2 { margin-top: 18px; }
.w-cierre .w-entrada { margin: 0 auto 28px; }
.w-cierre-luz { position: absolute; left: 50%; top: 40%; width: min(900px, 140vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--w-luz) 34%, transparent), transparent); pointer-events: none; }
.w-cierre .cierre-robot.avatar { --t: clamp(120px, 12vw, 136px); position: relative; }
.w-cierre > :not(.w-cierre-luz) { position: relative; }
body[data-pantalla="inicio"] .pie { position: relative; z-index: 2; }


/* ---------- Movimiento de las secciones (bajo «no-preference»; «Pausar animaciones» lo apaga: sitio.css) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.w-mov .w-viva:not(.e8) .w-rueda::after { animation: w-gira-rueda 0.9s linear infinite; }
  .w-cursor.clic svg { animation: w-clic 0.35s ease-out; }
  .w-agente .w-puntos b { animation: w-puntitos 1.2s ease-in-out infinite; }
  .w-agente .w-puntos b:nth-child(2) { animation-delay: 0.15s; } .w-agente .w-puntos b:nth-child(3) { animation-delay: 0.3s; }
  .w-agente .w-onda b { animation: w-onda 0.9s ease-in-out infinite alternate; }
  .w-agente .w-onda b:nth-child(2) { animation-delay: -0.3s; } .w-agente .w-onda b:nth-child(3) { animation-delay: -0.6s; } .w-agente .w-onda b:nth-child(4) { animation-delay: -0.45s; }
  .w-agente .w-reloj::after { animation: w-manecilla 4s linear infinite; }
  .w-agente .w-zzz { animation: w-zzz 2.4s ease-in-out infinite; }
  .w-flecha::after { animation: w-viaja 1.8s var(--w-curva) infinite; }
  .w-flecha:nth-of-type(2)::after { animation-delay: 0.9s; }
  .w-pausa-anillo { animation: w-anillo-pausa 2.6s ease-out infinite; }
  html.w-mov .w-cinta-fila { animation: w-cinta 60s linear infinite; }
  html.w-mov .w-cinta-fila.w-al-reves { animation-direction: reverse; animation-duration: 70s; }
  .w-cinta:hover .w-cinta-fila { animation-play-state: paused; }
  .w-ecualizador b { animation: w-ecualiza 1.1s ease-in-out infinite alternate; }
  .w-ecualizador b:nth-child(2n) { animation-delay: -0.35s; } .w-ecualizador b:nth-child(3n) { animation-delay: -0.7s; } .w-ecualizador b:nth-child(5n) { animation-delay: -0.2s; }
  .w-rutina-linea::after { animation: w-viaja 2s var(--w-curva) infinite; }
  .w-rutina-linea:nth-of-type(2)::after { animation-delay: 1s; }
  .w-rutina-fin { animation: w-timbre 2s 1.6s ease-in-out infinite; }
  .w-mv-linea { animation: w-escribe-linea 3.2s var(--w-curva) infinite; }
  .w-mv-linea.l2 { animation-delay: 0.3s; } .w-mv-linea.l3 { animation-delay: 0.6s; }
  .w-conectores img { animation: w-flota 4s ease-in-out infinite; }
  .w-conectores img:nth-child(2n) { animation-delay: -1.3s; } .w-conectores img:nth-child(3n) { animation-delay: -2.6s; }
  .w-ondas i { animation: w-ondea 2.4s ease-out infinite; }
  .w-ondas i:nth-child(2) { animation-delay: 0.8s; } .w-ondas i:nth-child(3) { animation-delay: 1.6s; }
  .w-caja-vigila.w-visto .w-grafica-linea { animation: w-traza-larga 1.6s 0.3s var(--w-curva) both; }
  .w-caja-vigila.w-visto .w-grafica-punto, .w-caja-vigila.w-visto .w-baja { animation: w-aparece 0.5s 1.6s var(--w-rebote) both; }
  .w-promesa.w-visto .w-promesa-icono :is(path, rect, circle) { animation: w-traza-icono 1.1s calc(0.2s + var(--i, 0) * 0.09s) var(--w-curva) both; }
  .w-promesa.w-visto .w-arco { animation: w-candado 0.5s calc(1.2s + var(--i, 0) * 0.09s) var(--w-rebote) both; }
  .w-cierre-luz { animation: w-respira 6s ease-in-out infinite; }
}

/* (la tarjeta del navegador: lo que la hace fácil) */
.w-opcion-lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; color: var(--w-tinta-2); font-size: 15px; }
.w-opcion-lista li { display: flex; align-items: center; gap: 9px; }
.w-opcion-lista li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: rgba(78, 224, 143, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.5 2.4 5-5.3' fill='none' stroke='%234ee08f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }

/* (mientras recorres una escena fija —o ya estás en «Obtener Lyron»—, la barra pegada de abajo se esconde: no tapa lo que
   pasa ni repite lo que ya tienes enfrente) */
html.w-en-escena .barra-pegada, html.w-en-obtener .barra-pegada { opacity: 0; pointer-events: none; transform: translateY(16px); }
.barra-pegada { transition: opacity 0.3s, transform 0.3s var(--w-curva); }