/* ==========================================================
   HEADER ANIMADO v2 (más movido) · More Disseny Studio
   La imagen base no se toca: los objetos que se mueven
   van en capas encima. Las "tapas" son trocitos fijos de la
   laptop y el móvil para que la ventana y la carpeta
   sigan quedando por detrás.
   ========================================================== */

.hero-anim {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;            /* misma proporción que la imagen (2250 × 1125) */
  overflow: hidden;
  background: #f3d6ec url("base.jpg") center / 100% 100% no-repeat;
}

.hero-anim__capa {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* --- Posiciones exactas sobre la imagen base (en %) --- */
.hero-anim__ventana     { left: 39.111%; top: 13.333%; width: 15.556%; }
.hero-anim__cursor      { left: 39.111%; top: 34.222%; width: 6.444%;  }
.hero-anim__tapa-laptop { left: 45.333%; top: 21.333%; width: 9.778%;  }
.hero-anim__carpeta     { left: 86.667%; top: 15.111%; width: 10.667%; }
.hero-anim__tapa-movil  { left: 86.667%; top: 26.667%; width: 7.556%;  }
.hero-anim__burbuja     { left: 30.978%; top: 68.978%; width: 10.489%; }
.hero-anim__rosa        { left: 38.978%; top: 52%;     width: 9.022%;  }
.hero-anim__amarillo    { left: 91.289%; top: 64.089%; width: 7.644%;  }

/* Las tapas no se mueven nunca */
.hero-anim__tapa-laptop,
.hero-anim__tapa-movil { will-change: auto; }

/* --- Ventana: flota --- */
.hero-anim__ventana {
  animation: ventana-flota 5.6s ease-in-out infinite;
}
@keyframes ventana-flota {
  0%, 100% { transform: translate(0, 0)      rotate(0deg); }
  50%      { transform: translate(-0.6%, -3%) rotate(-1deg); }
}

/* --- Cursor: flota y hace "clic" --- */
.hero-anim__cursor {
  transform-origin: 30% 20%;
  animation: cursor-clic 4.8s ease-in-out infinite;
}
@keyframes cursor-clic {
  0%, 100% { transform: translate(0, 0)        scale(1); }
  35%      { transform: translate(-10%, -12%)  scale(1); }
  60%      { transform: translate(6%, 4%)      scale(1); }
  66%      { transform: translate(6%, 4%)      scale(.86); }
  72%      { transform: translate(6%, 4%)      scale(1); }
}

/* --- Carpeta: flota y se inclina --- */
.hero-anim__carpeta {
  transform-origin: 14% 74%;
  animation: carpeta-flota 6.2s ease-in-out -2s infinite;
}
@keyframes carpeta-flota {
  0%, 100% { transform: translate(0, 0)     rotate(0deg); }
  50%      { transform: translate(0.4%, -1.5%) rotate(-5deg); }
}

/* --- Burbuja: rebota --- */
.hero-anim__burbuja {
  transform-origin: 50% 96%;
  animation: burbuja-rebota 2.6s infinite,
             burbuja-reflejo 9s ease-in-out infinite;
}
@keyframes burbuja-rebota {
  0%   { transform: translateY(0)    scale(1.07, .92); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  10%  { transform: translateY(-6%)  scale(.97, 1.04); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  48%  { transform: translateY(-36%) scale(1, 1);      animation-timing-function: cubic-bezier(.6, 0, .85, .4); }
  90%  { transform: translateY(0)    scale(.98, 1.02); animation-timing-function: ease-out; }
  100% { transform: translateY(0)    scale(1.07, .92); }
}
@keyframes burbuja-reflejo {
  0%, 100% { filter: hue-rotate(0deg)   saturate(1); }
  50%      { filter: hue-rotate(-18deg) saturate(1.12); }
}
.hero-anim__sombra-burbuja {
  position: absolute;
  left: 32.667%; top: 87.6%;
  width: 7.1%; height: 2.2%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 40, 110, .28), rgba(150, 40, 110, 0));
  pointer-events: none;
  animation: sombra-burbuja 2.6s infinite;
}
@keyframes sombra-burbuja {
  0%   { transform: scale(1.1);  opacity: 1;   animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  48%  { transform: scale(.65);  opacity: .35; animation-timing-function: cubic-bezier(.6, 0, .85, .4); }
  90%  { transform: scale(1);    opacity: .95; }
  100% { transform: scale(1.1);  opacity: 1; }
}

/* --- Bichito rosa: saltito con aplastado --- */
.hero-anim__rosa {
  transform-origin: 50% 92%;
  animation: rosa-salta 4.2s cubic-bezier(.45, 0, .35, 1) infinite;
}
@keyframes rosa-salta {
  0%, 56%, 100% { transform: translateY(0)    scale(1, 1)        rotate(0); }
  62%           { transform: translateY(0)    scale(1.05, 0.93)  rotate(0); }
  72%           { transform: translateY(-11%) scale(0.97, 1.04)  rotate(-3deg); }
  80%           { transform: translateY(-13%) scale(1, 1)        rotate(2deg); }
  89%           { transform: translateY(0)    scale(1.04, 0.95)  rotate(0); }
  94%           { transform: translateY(0)    scale(0.99, 1.01)  rotate(0); }
}
.hero-anim__sombra {
  position: absolute;
  left: 39.6%; top: 67.4%;
  width: 7.6%; height: 2.6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 20, 70, .38), rgba(120, 20, 70, 0));
  pointer-events: none;
  animation: sombra-salta 4.2s cubic-bezier(.45, 0, .35, 1) infinite;
}
@keyframes sombra-salta {
  0%, 56%, 100% { transform: scale(1);    opacity: 1; }
  62%           { transform: scale(1.06); opacity: 1; }
  72%           { transform: scale(.78);  opacity: .55; }
  80%           { transform: scale(.74);  opacity: .5; }
  89%           { transform: scale(1.05); opacity: 1; }
}

/* --- Bichito amarillo: parado como el rosa, salta a destiempo y mira --- */
.hero-anim__amarillo {
  transform-origin: 50% 92%;
  animation: amarillo-salta 4.2s cubic-bezier(.45, 0, .35, 1) -2.1s infinite;
}
@keyframes amarillo-salta {
  0%, 50%, 100% { transform: translateY(0)    scale(1, 1)        rotate(0); }
  20%           { transform: translateY(0)    scale(1, 1)        rotate(4deg); }
  34%           { transform: translateY(0)    scale(1, 1)        rotate(0); }
  56%           { transform: translateY(0)    scale(1.05, 0.93)  rotate(0); }
  66%           { transform: translateY(-10%) scale(0.97, 1.04)  rotate(3deg); }
  74%           { transform: translateY(-12%) scale(1, 1)        rotate(-2deg); }
  84%           { transform: translateY(0)    scale(1.04, 0.95)  rotate(0); }
  90%           { transform: translateY(0)    scale(0.99, 1.01)  rotate(0); }
}
.hero-anim__sombra-amarilla {
  position: absolute;
  left: 91.756%; top: 76.089%;
  width: 6.667%; height: 2.4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 60, 90, .34), rgba(110, 60, 90, 0));
  pointer-events: none;
  animation: sombra-amarilla 4.2s cubic-bezier(.45, 0, .35, 1) -2.1s infinite;
}
@keyframes sombra-amarilla {
  0%, 50%, 100% { transform: scale(1);    opacity: 1; }
  56%           { transform: scale(1.06); opacity: 1; }
  66%           { transform: scale(.78);  opacity: .55; }
  74%           { transform: scale(.74);  opacity: .5; }
  84%           { transform: scale(1.05); opacity: 1; }
}

/* Si el sistema tiene activado "reducir movimiento", queda quieto */
@media (prefers-reduced-motion: reduce) {
  .hero-anim__capa,
  .hero-anim__sombra,
  .hero-anim__sombra-burbuja,
  .hero-anim__sombra-amarilla { animation: none; }
}

/* ── Integración en el home: el header animado es solo el FONDO ── */
.hero-anim-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-anim-bg .hero-anim {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

/* Móvil: la animación se muestra completa arriba y el texto debajo */
@media (max-width: 768px) {
  #hero { padding: 84px 0 60px; display: flex; flex-direction: column; }
  #hero .hero-anim-bg { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 2 / 1; order: -1; margin-bottom: 28px; }
  #hero .hero-sub { color: var(--blanco); }
  #hero .hero-ctas .btn-outline-w { color: var(--blanco); border-color: rgba(255,255,255,.55); background: transparent; }
  #hero .hero-anim-bg .hero-anim { position: relative; top: auto; left: auto; transform: none; width: 100% !important; }
}