/* ═══════════════════════════════════════════
   AGUASENS — Animación "Cómo funciona"
   SVG + CSS, sin librerías.

   Una sola línea de tiempo de 20 s partida en dos mitades que se comparan:

     SIN AGUASENS   0 – 50 %   el campo sin nada instalado
       acto 1   0 – 25 %   se corta el agua
       acto 2  25 – 50 %   pasan el día y la noche y nadie se entera
     CORTE         50 – 60 %   se superpone el logo y aparece el sistema
     CON AGUASENS  60 – 100 %
       acto 3  60 – 80 %   el nodo detecta y avisa (LoRa → gateway → nube → celular)
       acto 4  80 – 100 %  el productor va derecho al problema

   Todos los elementos animados comparten duration: 20s / infinite y reservan
   su momento con porcentajes, así nunca se desfasan entre sí.
   Al 100 % todo vuelve al estado del 0 % para que el loop cierre sin salto.
   ═══════════════════════════════════════════ */

/* ─── CONTENEDOR ─── */
.cf-anim {
  max-width: 880px;
  margin: 0 auto 48px;
  background: #fff;
  border: .5px solid var(--gris-claro);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 24px 24px 20px;
}

.cf-anim__escena {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.cf-anim__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── CARTEL DE FASE: sin / con ─── */
.cf-anim__fase {
  position: absolute;
  top: 3.5%;
  left: 2.5%;
  pointer-events: none;
}
.cf-anim__fase span {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-family: var(--font-condensed);
  font-size: clamp(12px, 1.9vw, 17px);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35em .85em;
  border-radius: 999px;
  border: 1.5px solid;
}
.cf-anim__fase-sin {
  background: #fdecec; border-color: #e0aeae; color: #9b4040;
  animation: cf-fase-sin 20s linear infinite;
}
.cf-anim__fase-con {
  background: var(--verde-pale); border-color: #9cc4e8; color: var(--verde-oscuro);
  opacity: 0;
  animation: cf-fase-con 20s linear infinite;
}

/* ─── CORTE CON EL LOGO ─── */
.cf-anim__corte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5%;
  background: rgba(248, 250, 252, .93);
  pointer-events: none;
  opacity: 0;
  animation: cf-corte 20s linear infinite;
}
.cf-anim__corte img {
  width: min(46%, 320px);
  height: auto;
}
.cf-anim__corte b {
  font-family: var(--font-condensed);
  font-size: clamp(13px, 2.1vw, 19px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--verde-medio);
}

/* ─── RÓTULOS DE LOS ACTOS ─── */
.cf-anim__pasos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}

.cf-anim__paso {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-condensed);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.25;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius);
  border: 1px solid;
  opacity: .38;
}
/* el color no se anima: cada rotulo lleva fijo el de su mitad */
.cf-anim__paso:nth-child(1),
.cf-anim__paso:nth-child(2) { color: #9b4040; background: #fdecec; border-color: #eecccc; }
.cf-anim__paso:nth-child(3),
.cf-anim__paso:nth-child(4) { color: var(--verde-oscuro); background: var(--verde-pale); border-color: #b8d5ef; }

.cf-anim__punto {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* ─── CIERRE ─── */
.cf-anim__cierre {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--gris-claro);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris);
  text-align: center;
}
.cf-anim__cierre strong { color: var(--verde-oscuro); font-weight: 700; }
.cf-anim__cierre a {
  color: var(--verde-vivo);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cf-anim__cierre a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   PALETA DE LA ESCENA
   ═══════════════════════════════════════════ */
.cf-loma       { fill: #cfdcc2; }
.cf-suelo      { fill: #bccdad; }
.cf-sol        { fill: #f2c14e; }
.cf-luna       { fill: #fdfbef; }
.cf-noche      { fill: var(--verde-oscuro); opacity: 0; }

.cf-estructura { fill: #fff; stroke: #93a3b8; stroke-width: 2.5; }
.cf-cuba       { fill: none; stroke: #93a3b8; stroke-width: 2.5; }
.cf-cuba-fondo { fill: #eaf1f8; }
.cf-poste      { stroke: #93a3b8; stroke-width: 6; stroke-linecap: round; }
.cf-agua       { fill: var(--verde-claro); }

.cf-equipo      { fill: #fff; stroke: #93a3b8; stroke-width: 2.5; }
.cf-equipo-det  { fill: #cfdbe8; }
.cf-antena-punta{ fill: var(--verde-oscuro); }
.cf-antena      { stroke: var(--verde-oscuro); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.cf-led         { fill: var(--verde-natural-claro); opacity: 0; }

.cf-onda       { stroke: var(--verde-vivo); stroke-width: 3.5; stroke-linecap: round; fill: none; opacity: 0; }
.cf-gw-glow    { fill: var(--verde-vivo); opacity: 0; }
.cf-nube       { fill: #fbfdff; }
.cf-enlace     { stroke: var(--verde-vivo); stroke-width: 3; stroke-linecap: round; fill: none;
                 stroke-dasharray: 7 9; opacity: 0; }

.cf-cel-marco    { fill: var(--verde-oscuro); }
.cf-cel-pantalla { fill: #fff; }
.cf-cel-fila     { fill: #e4eaf1; }
.cf-alerta-caja  { fill: #fdecec; stroke: #d95c5c; stroke-width: 2; }
.cf-alerta-icono { fill: #d95c5c; }
.cf-alerta-linea { fill: #e39b9b; }
.cf-ok-caja      { fill: #e9f4ea; stroke: var(--verde-natural); stroke-width: 2; }
.cf-ok-tilde     { stroke: var(--verde-natural); stroke-width: 4; stroke-linecap: round;
                   stroke-linejoin: round; fill: none; }

.cf-check-circulo { fill: var(--verde-natural); }
.cf-check-tilde   { stroke: #fff; stroke-width: 4.5; stroke-linecap: round;
                    stroke-linejoin: round; fill: none; }

/* lo que todavía no está instalado, y lo que aún no pasó */
.cf-sistema, .cf-alerta, .cf-ok, .cf-check, .cf-camioneta { opacity: 0; }

/* ═══════════════════════════════════════════
   ANIMACIONES
   ═══════════════════════════════════════════ */
.cf-agua {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: cf-agua-nivel 20s linear infinite;
}
.cf-astros     { transform-origin: 450px 620px; animation: cf-astros-giro 20s linear infinite; }
.cf-noche      { animation: cf-noche 20s linear infinite; }
.cf-sistema    { animation: cf-sistema 20s linear infinite; }
.cf-led        { animation: cf-led 20s linear infinite; }
.cf-onda       { transform-box: fill-box; transform-origin: left center; }
.cf-onda--a    { animation: cf-onda-a 20s linear infinite; }
.cf-onda--b    { animation: cf-onda-b 20s linear infinite; }
.cf-onda--c    { animation: cf-onda-c 20s linear infinite; }
.cf-gw-glow    { transform-box: fill-box; transform-origin: center;
                 animation: cf-gw-glow 20s linear infinite; }
.cf-enlace--subida { animation: cf-subida 20s linear infinite; }
.cf-enlace--bajada { animation: cf-bajada 20s linear infinite; }
.cf-alerta     { animation: cf-alerta 20s linear infinite; }
.cf-camioneta  { animation: cf-camioneta 20s linear infinite; }
.cf-check      { animation: cf-check 20s linear infinite; }
.cf-ok         { animation: cf-ok 20s linear infinite; }

.cf-anim__paso:nth-child(1) { animation: cf-paso-1 20s linear infinite; }
.cf-anim__paso:nth-child(2) { animation: cf-paso-2 20s linear infinite; }
.cf-anim__paso:nth-child(3) { animation: cf-paso-3 20s linear infinite; }
.cf-anim__paso:nth-child(4) { animation: cf-paso-4 20s linear infinite; }

/* ─── EL AGUA: baja en el acto 1, vuelve en el acto 4 ─── */
@keyframes cf-agua-nivel {
  0%, 4%     { transform: scaleY(1); }
  20%        { transform: scaleY(.05); }
  86%        { transform: scaleY(.05); }
  96%, 100%  { transform: scaleY(1); }
}

/* ─── SIN AGUASENS: pasan el día y la noche ─── */
@keyframes cf-astros-giro {
  0%, 25%    { transform: rotate(0deg); }
  50%, 100%  { transform: rotate(360deg); }
}
@keyframes cf-noche {
  0%, 28%    { opacity: 0; }
  34%, 44%   { opacity: .5; }
  50%, 100%  { opacity: 0; }
}
@keyframes cf-fase-sin {
  0%, 47%    { opacity: 1; }
  50%, 97%   { opacity: 0; }
  100%       { opacity: 1; }
}

/* ─── EL CORTE: el logo, y detrás aparece el sistema instalado ─── */
@keyframes cf-corte {
  0%, 49%    { opacity: 0; }
  52%, 58%   { opacity: 1; }
  62%, 100%  { opacity: 0; }
}
@keyframes cf-sistema {
  0%, 55%    { opacity: 0; }
  61%, 96%   { opacity: 1; }
  100%       { opacity: 0; }
}
@keyframes cf-fase-con {
  0%, 57%    { opacity: 0; }
  61%, 97%   { opacity: 1; }
  100%       { opacity: 0; }
}

/* ─── CON AGUASENS: detecta y transmite ─── */
@keyframes cf-led {
  0%, 57%    { opacity: 0; }
  61%        { opacity: .25; }
  63%        { opacity: 1; }
  64%        { opacity: .25; }
  66%        { opacity: 1; }
  68%, 96%   { opacity: 1; }
  100%       { opacity: 0; }
}
@keyframes cf-onda-a {
  0%, 61%    { opacity: 0; transform: scale(.35); }
  63%        { opacity: .95; transform: scale(.7); }
  68%        { opacity: 0; transform: scale(1.5); }
  100%       { opacity: 0; transform: scale(.35); }
}
@keyframes cf-onda-b {
  0%, 63%    { opacity: 0; transform: scale(.35); }
  65%        { opacity: .95; transform: scale(.7); }
  70%        { opacity: 0; transform: scale(1.5); }
  100%       { opacity: 0; transform: scale(.35); }
}
@keyframes cf-onda-c {
  0%, 65%    { opacity: 0; transform: scale(.35); }
  67%        { opacity: .95; transform: scale(.7); }
  72%        { opacity: 0; transform: scale(1.5); }
  100%       { opacity: 0; transform: scale(.35); }
}
@keyframes cf-gw-glow {
  0%, 67%    { opacity: 0; transform: scale(.7); }
  70%        { opacity: .55; transform: scale(1); }
  75%, 100%  { opacity: 0; transform: scale(1.3); }
}
@keyframes cf-subida {
  0%, 69%    { opacity: 0; stroke-dashoffset: 96; }
  71%        { opacity: 1; }
  75%        { opacity: 1; stroke-dashoffset: 0; }
  78%, 100%  { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes cf-bajada {
  0%, 74%    { opacity: 0; stroke-dashoffset: 96; }
  76%        { opacity: 1; }
  79%        { opacity: 1; stroke-dashoffset: 0; }
  82%, 100%  { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes cf-alerta {
  0%, 78%    { opacity: 0; transform: translateY(12px); }
  81%        { opacity: 1; transform: translateY(0); }
  92%        { opacity: 1; transform: translateY(0); }
  94%, 100%  { opacity: 0; transform: translateY(0); }
}

/* ─── CON AGUASENS: vas derecho al problema ─── */
@keyframes cf-camioneta {
  0%, 82%    { opacity: 0; transform: translateX(900px); }
  84%        { opacity: 1; transform: translateX(890px); }
  93%, 97%   { opacity: 1; transform: translateX(130px); }
  100%       { opacity: 0; transform: translateX(130px); }
}
@keyframes cf-ok {
  0%, 93%    { opacity: 0; }
  95%, 97%   { opacity: 1; }
  100%       { opacity: 0; }
}
@keyframes cf-check {
  0%, 93%    { opacity: 0; }
  95%, 97%   { opacity: 1; }
  100%       { opacity: 0; }
}

/* ─── RÓTULOS: solo opacidad, para que corran en el mismo hilo que el SVG ─── */
@keyframes cf-paso-1 {
  0%, 23%    { opacity: 1; }
  26%, 97%   { opacity: .38; }
  100%       { opacity: 1; }
}
@keyframes cf-paso-2 {
  0%, 23%    { opacity: .38; }
  26%, 48%   { opacity: 1; }
  51%, 100%  { opacity: .38; }
}
@keyframes cf-paso-3 {
  0%, 58%    { opacity: .38; }
  61%, 78%   { opacity: 1; }
  81%, 100%  { opacity: .38; }
}
@keyframes cf-paso-4 {
  0%, 78%    { opacity: .38; }
  81%, 97%   { opacity: 1; }
  100%       { opacity: .38; }
}

/* ═══════════════════════════════════════════
   REPRODUCCIÓN: sólo corre cuando está a la vista
   (la clase .playing la pone el IntersectionObserver de js/main.js)
   ═══════════════════════════════════════════ */
.cf-anim__svg *,
.cf-anim__paso,
.cf-anim__fase span,
.cf-anim__corte { animation-play-state: paused; }

.cf-anim.playing .cf-anim__svg *,
.cf-anim.playing .cf-anim__paso,
.cf-anim.playing .cf-anim__fase span,
.cf-anim.playing .cf-anim__corte { animation-play-state: running; }

/* Un instante con animation:none destruye todas las animaciones a la vez; al
   sacar la clase se recrean con el mismo arranque. js/main.js lo usa cada vez
   que la escena vuelve a entrar en pantalla, para que nunca queden corridas. */
.cf-anim.reiniciar .cf-anim__svg *,
.cf-anim.reiniciar .cf-anim__paso,
.cf-anim.reiniciar .cf-anim__fase span,
.cf-anim.reiniciar .cf-anim__corte { animation: none !important; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 640px) {
  .cf-anim { padding: 14px 14px 16px; margin-bottom: 36px; }
  .cf-anim__pasos { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .cf-anim__paso { font-size: 14px; padding: 7px 8px; }
  .cf-anim__cierre { font-size: 14px; text-align: left; }
  .cf-anim__corte img { width: 62%; }
}

/* ═══════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   Queda quieta en el momento de la alerta, ya con el sistema instalado,
   que es el cuadro que cuenta la historia entera.
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cf-anim__svg *,
  .cf-anim__paso,
  .cf-anim__fase span,
  .cf-anim__corte { animation: none !important; }

  .cf-agua    { transform: scaleY(.05); }
  .cf-sistema { opacity: 1; }
  .cf-led     { opacity: 1; }
  .cf-onda    { opacity: .9; }
  .cf-enlace  { opacity: 1; stroke-dashoffset: 0; }
  .cf-alerta  { opacity: 1; }
  .cf-noche, .cf-camioneta, .cf-ok, .cf-check, .cf-gw-glow { opacity: 0; }

  .cf-anim__corte    { opacity: 0; }
  .cf-anim__fase-sin { opacity: 0; }
  .cf-anim__fase-con { opacity: 1; }

  .cf-anim__paso { opacity: 1; }
}