/*
  MANCHA DEL HERO — masa orgánica animada
  ------------------------------------------------------------
  Portado LITERAL desde mancha-hero.css de mochis.app (repo
  mochistudio-web, cerrado 31/08/2026, recalibrado 03/09/2026 y
  08/09/2026). Mismas reglas técnicas, mismos keyframes, mismos
  valores. Ver el archivo original para el historial completo de
  descartes — aquí solo el resultado final.

  CUATRO REGLAS TÉCNICAS — no romper al editar
  ------------------------------------------------------------
  · La forma es un <path> SVG real con `d` interpolado por
    keyframes. NUNCA border-radius.
  · Movimiento y escala van por transform dentro de keyframes.
    NUNCA animar top/left — produce estelas.
  · Los recorridos van en vw/vh, NO en %.
  · El blur es FIJO (35px). Animar filter:blur() ensucia con
    estelas; scale() sí se anima sin coste.
  · UN SOLO transform por declaración: translate() y scale()
    van siempre juntos en la misma línea.

  Color: naranja #FF6B35, IGUAL en día y noche (--color-mancha-rgb,
  tokens.css) — es el único color de la paleta que no se invierte
  entre modos, mismo criterio que el símbolo.

  LÍMITE DURO: el naranja es el acento reservado del CTA
  «Cuéntanos» y del símbolo. El CTA debe seguir siendo lo más
  naranja de la pantalla.
*/

.hero__mancha {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(35px);
  mix-blend-mode: screen;
  will-change: transform;
}

.hero__mancha-forma {
  fill: rgba(var(--color-mancha-rgb), var(--mancha-opacidad));
  transition: fill 0.3s ease;
}

/* 1 — la mayor, arranca alta y cruza hacia el centro-derecha */
.hero__mancha--1 {
  width: 40vw;
  height: 40vw;
  max-width: 600px;
  max-height: 600px;
  top: -12%;
  left: 52vw;
  animation: hero-mancha-recorrido-1 calc(var(--mancha-ciclo) * 1.2) ease-in-out infinite;
}
.hero__mancha--1 .hero__mancha-forma {
  animation: hero-mancha-forma-1 var(--mancha-ciclo-forma) ease-in-out infinite;
}

@keyframes hero-mancha-recorrido-1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(16vw, 9vh) scale(1.14); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes hero-mancha-forma-1 {
  0% {
    d: path("M300,60 C420,50 520,140 530,260 C540,380 450,470 330,480 C210,490 100,410 90,290 C80,170 180,70 300,60 Z");
  }
  50% {
    d: path("M310,70 C440,90 500,190 480,300 C460,410 350,470 240,450 C130,430 60,330 90,220 C120,110 180,50 310,70 Z");
  }
  100% {
    d: path("M300,60 C420,50 520,140 530,260 C540,380 450,470 330,480 C210,490 100,410 90,290 C80,170 180,70 300,60 Z");
  }
}

/* 2 — la menor, más baja y a la derecha; encoge mientras la 1 crece */
.hero__mancha--2 {
  width: 30vw;
  height: 30vw;
  max-width: 440px;
  max-height: 440px;
  top: 30%;
  left: 58vw;
  animation: hero-mancha-recorrido-2 calc(var(--mancha-ciclo) * 1.55) ease-in-out infinite;
}
.hero__mancha--2 .hero__mancha-forma {
  animation: hero-mancha-forma-2 calc(var(--mancha-ciclo-forma) * 1.18) ease-in-out infinite;
}

@keyframes hero-mancha-recorrido-2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-20vw, -7vh) scale(0.88); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes hero-mancha-forma-2 {
  0% {
    d: path("M260,50 C360,60 430,150 420,250 C410,350 320,420 220,410 C120,400 50,310 60,210 C70,110 160,40 260,50 Z");
  }
  50% {
    d: path("M270,60 C380,40 440,130 450,230 C460,330 390,430 280,440 C170,450 80,380 70,270 C60,160 160,80 270,60 Z");
  }
  100% {
    d: path("M260,50 C360,60 430,150 420,250 C410,350 320,420 220,410 C120,400 50,310 60,210 C70,110 160,40 260,50 Z");
  }
}

/*
  MÓVIL — "célula": una mancha que crece y se divide, recorriendo
  todo el hero. Ver mancha-hero.css original (mochistudio-web) para
  el historial completo del ajuste contra el notch — aquí solo el
  resultado final, ya validado en iPhone real.
*/
@media (max-width: 640px) {
  .hero__mancha--1 {
    width: 78vw;
    height: 78vw;
    max-width: none;
    max-height: none;
    top: 34%;
    left: 50vw;
    margin: calc(-78vw / 2) 0 0 calc(-78vw / 2);
    animation: hero-mancha-movil-1 var(--mancha-ciclo-movil) ease-in-out infinite;
  }
  .hero__mancha--1 .hero__mancha-forma {
    animation-duration: calc(var(--mancha-ciclo-forma) * 0.5);
  }

  @keyframes hero-mancha-movil-1 {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(-6vw, -3vh) scale(0.82); }
    42%  { transform: translate(-11vw, 2vh) scale(1.15); }
    58%  { transform: translate(3vw, 9vh) scale(1.7); }
    75%  { transform: translate(9vw, 16vh) scale(2.2); }
    88%  { transform: translate(-3vw, 10vh) scale(1.6); }
    100% { transform: translate(0, 0) scale(1); }
  }

  .hero__mancha--2 {
    display: block;
    width: 78vw;
    height: 78vw;
    max-width: none;
    max-height: none;
    top: 34%;
    left: 50vw;
    margin: calc(-78vw / 2) 0 0 calc(-78vw / 2);
    opacity: 0;
    animation: hero-mancha-movil-2 calc(var(--mancha-ciclo-movil) * 1.35) ease-in-out infinite;
  }
  .hero__mancha--2 .hero__mancha-forma {
    animation-duration: calc(var(--mancha-ciclo-forma) * 0.5 * 1.18);
  }

  @keyframes hero-mancha-movil-2 {
    0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
    30%  { transform: translate(4vw, 7vh) scale(0.65); opacity: 0; }
    48%  { transform: translate(14vw, 18vh) scale(0.85); opacity: 0.55; }
    62%  { transform: translate(23vw, 26vh) scale(1.1); opacity: 0.9; }
    78%  { transform: translate(18vw, 15vh) scale(0.9); opacity: 0.7; }
    92%  { transform: translate(7vw, 5vh) scale(0.6); opacity: 0.2; }
    100% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  }

  .hero__mancha-forma {
    fill: rgba(var(--color-mancha-rgb), var(--mancha-opacidad-movil, var(--mancha-opacidad)));
  }
}

/*
  Accesibilidad: se desactivan tanto el recorrido (en la mancha)
  como el cambio de forma (en el path). La mancha queda quieta, no
  desaparece — sigue siendo fondo válido.
*/
@media (prefers-reduced-motion: reduce) {
  .hero__mancha,
  .hero__mancha-forma {
    animation: none;
  }
}