/* Las escenas chicas de la portada: el año de respaldo, los tres pasos del plan y
   el globo de clientes. Lo que esta afuera de la media query es el estado FINAL,
   el que ve quien pidio menos movimiento o navega sin JS: todo dibujado y quieto.
   Las animaciones arrancan recien cuando liquido.js pone .escenas-vivas en la
   raiz y .en-vista en la escena; sin eso, una animacion pausada en su primer
   cuadro dejaria los meses vacios para siempre. */

.escena {
  --esc-trazo: var(--accent);
  --esc-suave: light-dark(#9aa7c0, #4a5a78);
  --esc-lleno-a: light-dark(#5063d0, #9fb0ff);
  --esc-lleno-b: light-dark(#2aa39e, #7fe8da);
  --esc-mal: light-dark(#c2493d, #ff9b8a);
  --esc-bien: light-dark(#1f8f6b, #6ee7b7);
  --esc-luz: light-dark(#d99a00, #ffd66b);
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.escena text { font: 500 10px "Instrument Sans", sans-serif; fill: var(--muted); stroke: none; }
.esc-parada-a { stop-color: var(--esc-lleno-a); }
.esc-parada-b { stop-color: var(--esc-lleno-b); }

/* ---- el año que no se pierde ---- */
.respaldo-anio { display: block; width: 100%; max-width: 400px; margin-top: 30px; }
.respaldo-anio .anio-cable { stroke: var(--esc-suave); stroke-width: 1.2; stroke-dasharray: 2 5; }
.respaldo-anio .mes-marco { stroke: var(--esc-suave); stroke-width: 1.2; fill: light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 4%)); }
.respaldo-anio .mes-lleno { fill: url(#esc-lleno); opacity: .85; transform-box: fill-box; transform-origin: 50% 100%; }
.respaldo-anio .mes-letra { text-anchor: middle; }
.respaldo-anio .mes-grieta { stroke: var(--esc-mal); stroke-width: 1.6; opacity: 0; }
.respaldo-anio .anio-gota { fill: light-dark(#4a8fd6, #8fd0ff); opacity: 0; }
.respaldo-anio .anio-salpicon { fill: light-dark(#4a8fd6, #8fd0ff); opacity: 0; }
.respaldo-anio .anio-copia { fill: url(#esc-lleno); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.respaldo-anio .disco-caja { stroke: var(--esc-trazo); stroke-width: 1.6; fill: light-dark(rgb(255 255 255 / 60%), rgb(169 223 255 / 8%)); }
.respaldo-anio .disco-sincro { stroke: var(--esc-trazo); stroke-width: 1.8; transform-origin: 360px 64px; }
.respaldo-anio .disco-luz { fill: var(--esc-bien); }
.respaldo-anio .disco-nombre { text-anchor: middle; }
.respaldo-anio .anio-sello circle { fill: var(--esc-bien); }
.respaldo-anio .anio-sello path { stroke: light-dark(#fff, #0b1a14); stroke-width: 2; }
.respaldo-anio .anio-sello { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---- los pasos del plan ---- */
.portada .pasos li { position: relative; }
.paso-dibujo { position: absolute; top: 18px; right: 0; width: 88px; height: 66px; stroke: var(--esc-trazo); stroke-width: 2; }
.dibujo-llamada .llamada-tubo path { stroke-width: .95; fill: light-dark(rgb(48 70 160 / 8%), rgb(169 223 255 / 10%)); }
.dibujo-llamada .llamada-tubo { transform-origin: 38px 36px; }
.dibujo-llamada .llamada-onda { stroke: var(--esc-lleno-b); opacity: .8; }
.dibujo-lupa .lupa-pantalla { fill: light-dark(rgb(255 255 255 / 55%), rgb(169 223 255 / 6%)); stroke-width: 1.6; }
.dibujo-lupa .lupa-pie { stroke-width: 1.6; }
.dibujo-lupa .lupa-sintoma { stroke: var(--esc-suave); stroke-width: 1.6; }
.dibujo-lupa .lupa-fondo { fill: var(--bg); stroke: none; }
.dibujo-lupa .lupa-disco { stroke: var(--esc-trazo); stroke-width: 1.4; }
.dibujo-lupa .lupa-disco-lleno { fill: var(--esc-mal); stroke: none; }
.dibujo-lupa .lupa-aro { stroke-width: 2.4; fill: light-dark(rgb(255 255 255 / 10%), rgb(169 223 255 / 7%)); }
.dibujo-lupa .lupa-cabo { stroke-width: 4; }
.dibujo-idea .idea-globo { stroke-width: 1.6; fill: light-dark(rgb(255 255 255 / 55%), rgb(169 223 255 / 6%)); }
.dibujo-idea .idea-renglon { stroke: var(--esc-suave); stroke-width: 2.4; transform-box: fill-box; transform-origin: 0 50%; }
.dibujo-idea .idea-foco { stroke-width: 1.6; fill: var(--esc-luz); stroke: var(--esc-luz); }
.dibujo-idea .idea-rosca { stroke-width: 1.8; }
.dibujo-idea .idea-halo { fill: var(--esc-luz); stroke: none; opacity: .18; }
.dibujo-idea .idea-rayos { stroke: var(--esc-luz); stroke-width: 1.8; transform-box: fill-box; transform-origin: 50% 70%; }

/* ---- el globo de clientes ---- */
.portada .con-globo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; align-items: start; }
.portada .con-globo > :not(.globo) { grid-column: 1; }
.globo { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: 100%; }
.esc-globo-a { stop-color: light-dark(rgb(255 255 255 / 85%), rgb(169 223 255 / 16%)); }
.esc-globo-b { stop-color: light-dark(rgb(200 214 240 / 35%), rgb(23 34 55 / 30%)); }
.globo .globo-esfera { fill: url(#esc-globo-luz); stroke: light-dark(rgb(48 70 160 / 35%), rgb(169 223 255 / 30%)); stroke-width: 1.2; }
.globo .globo-red { stroke: var(--esc-suave); stroke-width: .8; stroke-dasharray: 1.5 4; opacity: .8; }
.globo .globo-ruta { stroke: url(#esc-arco); stroke-width: 1.6; stroke-dasharray: 1; }
.globo .globo-viajero { fill: var(--esc-lleno-b); }
.globo .globo-onda { stroke: var(--esc-lleno-b); stroke-width: 1.4; }
.globo .globo-pin { fill: var(--esc-trazo); stroke: var(--bg); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; }
.globo .globo-pin-casa { fill: var(--esc-lleno-b); }
.globo text { font-size: 11px; }

@media (max-width: 760px) {
  .portada .con-globo { display: block; }
  .globo { display: block; width: min(260px, 78%); margin: -6px auto 30px; }
  .paso-dibujo { top: 14px; width: 80px; height: 60px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Pausadas en el primer cuadro hasta que la escena entra; y pausadas otra vez
     cuando sale, asi los lazos no gastan nada fuera de pantalla. */
  .escenas-vivas .escena * { animation-play-state: paused; }
  .escenas-vivas .escena.en-vista * { animation-play-state: running; }

  /* El año: 6,4 s de una sola vez. Los meses se llenan y se copian, una gota
     rompe septiembre, y la copia vuelve desde el disco. */
  .escenas-vivas .respaldo-anio .mes-lleno { animation: mes-llenar 420ms cubic-bezier(.3, 1.3, .5, 1) calc(var(--i) * 170ms) both; }
  @keyframes mes-llenar { from { transform: scaleY(0); } }
  .escenas-vivas .respaldo-anio .mes-victima .mes-lleno { animation: mes-romperse 6.4s linear both; }
  @keyframes mes-romperse {
    0%, 21% { transform: scaleY(0); }
    27.5%, 47% { transform: scaleY(1); opacity: .85; }
    53%, 81% { transform: scaleY(0); opacity: .3; }
    84%, 100% { transform: scaleY(1); opacity: .85; }
  }
  .escenas-vivas .respaldo-anio .mes-victima .mes-marco { animation: marco-romperse 6.4s linear both; }
  @keyframes marco-romperse { 0%, 46% { stroke: var(--esc-suave); } 48%, 81% { stroke: var(--esc-mal); } 84%, 100% { stroke: var(--esc-suave); } }
  .escenas-vivas .respaldo-anio .mes-victima .mes-letra { animation: letra-romperse 6.4s linear both; }
  @keyframes letra-romperse { 0%, 46% { fill: var(--muted); } 48%, 81% { fill: var(--esc-mal); } 84%, 100% { fill: var(--muted); } }
  .escenas-vivas .respaldo-anio .mes-grieta { animation: grieta 6.4s linear both; }
  @keyframes grieta { 0%, 47.5% { opacity: 0; } 49%, 81% { opacity: 1; } 85%, 100% { opacity: 0; } }
  .escenas-vivas .respaldo-anio .anio-gota { animation: gota 6.4s both; }
  @keyframes gota {
    0%, 39% { opacity: 0; transform: translateY(-14px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
    41% { opacity: 1; }
    46.9% { opacity: 1; transform: translateY(33px); }
    47.5%, 100% { opacity: 0; transform: translateY(33px); }
  }
  .escenas-vivas .respaldo-anio .anio-salpicon-a { animation: salpicon-a 6.4s ease-out both; }
  .escenas-vivas .respaldo-anio .anio-salpicon-b { animation: salpicon-b 6.4s ease-out both; }
  @keyframes salpicon-a { 0%, 47% { opacity: 0; transform: none; } 48% { opacity: 1; } 53%, 100% { opacity: 0; transform: translate(-9px, -9px); } }
  @keyframes salpicon-b { 0%, 47% { opacity: 0; transform: none; } 48% { opacity: 1; } 53%, 100% { opacity: 0; transform: translate(8px, -11px); } }
  /* La copia vuelve en arco: tiro parabolico en cinco puntos, como las fotos
     de la seccion de sintomas; con una curva de CSS sola sale en linea recta. */
  .escenas-vivas .respaldo-anio .anio-copia { animation: copia-vuelve 6.4s linear both; }
  @keyframes copia-vuelve {
    0%, 64% { opacity: 0; transform: translate(136px, 8px) scale(.6); }
    65.6% { opacity: 1; transform: translate(136px, 8px) scale(.6); }
    69.5% { transform: translate(102px, -24px) scale(.8); }
    73.4% { transform: translate(68px, -36px) scale(.95); }
    77.3% { transform: translate(34px, -28px) scale(1); }
    81.25% { opacity: 1; transform: none; }
    84%, 100% { opacity: 0; transform: none; }
  }
  .escenas-vivas .respaldo-anio .disco-sincro { animation: sincro 6.4s linear both; }
  @keyframes sincro { 0%, 3% { rotate: 0deg; } 50%, 65.6% { rotate: 1080deg; } 81.25%, 100% { rotate: 720deg; } }
  .escenas-vivas .respaldo-anio .anio-cable { animation: cable 600ms linear 200ms 5, cable 500ms linear 4.2s 2 reverse; }
  @keyframes cable { to { stroke-dashoffset: -14; } }
  .escenas-vivas .respaldo-anio .disco-luz { animation: parpadeo 6.4s steps(1) both; }
  @keyframes parpadeo { 0%, 3%, 8%, 13%, 18%, 23%, 28%, 33%, 38%, 43%, 66%, 71%, 76% { opacity: 1; } 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 68%, 73%, 78% { opacity: .2; } 81%, 100% { opacity: 1; } }
  .escenas-vivas .respaldo-anio .anio-sello { animation: sello 6.4s cubic-bezier(.3, 1.5, .5, 1) both; }
  @keyframes sello { 0%, 85% { opacity: 0; transform: scale(0); } 90%, 100% { opacity: 1; transform: none; } }

  /* El telefono suena: dos tandas de temblor y las ondas salen detras. */
  .escenas-vivas .dibujo-llamada .llamada-tubo { animation: sonar 3.6s ease-in-out infinite; }
  @keyframes sonar {
    0%, 36%, 100% { rotate: 0deg; }
    3%, 11%, 23%, 31% { rotate: -9deg; }
    7%, 15%, 27% { rotate: 9deg; }
    18% { rotate: 0deg; }
  }
  .escenas-vivas .dibujo-llamada .llamada-onda { animation: onda 3.6s ease-out infinite; }
  .escenas-vivas .dibujo-llamada .llamada-onda-2 { animation-delay: .18s; }
  @keyframes onda { 0%, 2% { opacity: 0; } 8%, 30% { opacity: .9; } 40%, 100% { opacity: 0; } }

  /* La explicacion se escribe, se prende la lamparita, y vuelve a empezar. */
  .escenas-vivas .dibujo-idea .idea-renglon { animation: renglon 5s ease-out infinite; }
  .escenas-vivas .dibujo-idea .idea-renglon-2 { animation-name: renglon-2; }
  .escenas-vivas .dibujo-idea .idea-renglon-3 { animation-name: renglon-3; }
  @keyframes renglon { 0% { transform: scaleX(0); } 12%, 90% { transform: none; opacity: 1; } 97%, 100% { transform: none; opacity: 0; } }
  @keyframes renglon-2 { 0%, 12% { transform: scaleX(0); } 24%, 90% { transform: none; opacity: 1; } 97%, 100% { transform: none; opacity: 0; } }
  @keyframes renglon-3 { 0%, 24% { transform: scaleX(0); } 34%, 90% { transform: none; opacity: 1; } 97%, 100% { transform: none; opacity: 0; } }
  .escenas-vivas .dibujo-idea .idea-foco { animation: foco 5s ease-out infinite; }
  @keyframes foco { 0%, 40% { fill: transparent; stroke: var(--esc-trazo); } 46%, 92% { fill: var(--esc-luz); stroke: var(--esc-luz); } 100% { fill: transparent; stroke: var(--esc-trazo); } }
  .escenas-vivas .dibujo-idea .idea-halo { animation: halo 5s ease-out infinite; }
  @keyframes halo { 0%, 40% { opacity: 0; } 48% { opacity: .35; } 60%, 90% { opacity: .18; } 100% { opacity: 0; } }
  .escenas-vivas .dibujo-idea .idea-rayos { animation: rayos 5s cubic-bezier(.3, 1.5, .5, 1) infinite; }
  @keyframes rayos { 0%, 42% { opacity: 0; transform: scale(.5); } 52%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }

  /* El globo: las rutas se trazan al entrar y los pines caen en su lugar. Lo
     que viaja por las rutas es SMIL, porque offset-path sobre elementos de SVG
     no anda en todos los navegadores; liquido.js lo arranca y lo pausa. */
  .escenas-vivas .globo .globo-ruta { animation: ruta 1.1s ease-out .3s both; }
  .escenas-vivas .globo .globo-ruta-2 { animation-delay: .55s; }
  @keyframes ruta { from { stroke-dashoffset: 1; } }
  .escenas-vivas .globo .globo-pin { animation: pin 700ms cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 200ms) both; }
  @keyframes pin { from { opacity: 0; transform: translateY(-14px) scale(.4); } }
  .escenas-vivas .globo .globo-red { animation: red 1.4s ease-out both; }
  @keyframes red { from { opacity: 0; } }
}