/* =====================================================================
   RECLAMOBOX — Fondos animados (Hero + cajas de planes)
   Pega este bloque dentro de un <style> NUEVO, al FINAL del <head>
   (después de tus otros <style>) para que sobrescriba lo anterior.
   Requiere además 1 línea de HTML dentro de <section class="hero">.
   ===================================================================== */

/* ---------- 1) HERO: fondo animado ---------- */
.hero .hero-bg{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  /* mismo degradado del hero, que "respira" lentamente */
  background:linear-gradient(135deg,#001f4d 0%,#0056B3 60%,#0077cc 100%);
  background-size:160% 160%;
  animation:rb-shift 22s ease-in-out infinite;
}
.hero::before{ display:none; }              /* el brillo naranja ahora es una esfera animada */
.hero .hero-inner{ position:relative; z-index:1; }

/* esferas flotantes */
.hero-bg i{
  position:absolute; border-radius:50%; will-change:transform;
  background:radial-gradient(circle,rgba(130,175,255,.38),rgba(110,150,240,.06) 68%);
}
.hero-bg i:nth-child(1){ width:260px; height:260px; left:-60px;  top:55%;    animation:rb-f1 22s ease-in-out infinite; }
.hero-bg i:nth-child(2){ width:380px; height:380px; right:-90px; top:5%;     animation:rb-f2 30s ease-in-out infinite; }
.hero-bg i:nth-child(3){ width:170px; height:170px; left:42%;    top:12%;    animation:rb-f3 19s ease-in-out infinite; }
.hero-bg i:nth-child(4){ width:300px; height:300px; right:14%;   bottom:-90px; animation:rb-f4 27s ease-in-out infinite; }
.hero-bg i:nth-child(5){ width:120px; height:120px; left:12%;    top:10%;    animation:rb-f2 17s ease-in-out infinite reverse; }
.hero-bg i:nth-child(6){ /* esfera naranja de marca */
  width:320px; height:320px; right:-6%; top:-18%;
  background:radial-gradient(circle,rgba(255,161,13,.30),rgba(255,161,13,.04) 68%);
  animation:rb-f3 24s ease-in-out infinite reverse;
}

/* malla de puntos que se desplaza y late */
.hero-bg u{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background:radial-gradient(rgba(130,175,255,.55) 1px,transparent 1.5px) 0 0/12px 12px;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent);
          mask-image:linear-gradient(0deg,#000,transparent);
  animation:rb-mesh 14s linear infinite, rb-pulse 6s ease-in-out infinite;
}

@keyframes rb-shift{0%,100%{background-position:0% 0%}50%{background-position:100% 100%}}
@keyframes rb-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(120px,-90px)}}
@keyframes rb-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-140px,110px)}}
@keyframes rb-f3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,70px) scale(1.25)}}
@keyframes rb-f4{0%,100%{transform:translate(0,0)}50%{transform:translate(-110px,-80px)}}
@keyframes rb-mesh{to{background-position:48px 24px}}
@keyframes rb-pulse{0%,100%{opacity:.55}50%{opacity:1}}

@media (max-width:768px){
  .hero-bg i:nth-child(2){ width:240px; height:240px; }
  .hero-bg i:nth-child(4){ width:200px; height:200px; }
  .hero-bg i:nth-child(6){ width:200px; height:200px; }
}

/* ---------- 2) CAJAS DE PLANES: fondo animado ---------- */
.precio-card{
  isolation:isolate;                         /* mantiene las capas animadas DENTRO de la caja */
  background:linear-gradient(135deg,
    rgba(255,255,255,.80), rgba(232,241,251,.70),
    rgba(255,244,224,.78), rgba(255,255,255,.80));
  background-size:300% 300%;
  animation:rb-card-shift 11s ease-in-out infinite;
}
/* esferas de color que derivan por dentro de la caja */
.precio-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(0,119,204,.30), transparent 150px),
    radial-gradient(circle at 82% 68%, rgba(255,161,13,.32), transparent 170px),
    radial-gradient(circle at 50% 100%, rgba(0,86,179,.22), transparent 130px);
  background-size:220% 220%;
  animation:rb-card-drift 13s ease-in-out infinite alternate;
}
/* destello de luz que cruza la caja cada pocos segundos */
.precio-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%);
  background-size:260% 100%; background-position:220% 0;
  animation:rb-card-sweep 7s ease-in-out infinite;
}
/* cada caja anima desfasada para que no se muevan igual */
.precio-card:nth-child(2),.precio-card:nth-child(2)::before,.precio-card:nth-child(2)::after{animation-delay:-3s}
.precio-card:nth-child(3),.precio-card:nth-child(3)::before,.precio-card:nth-child(3)::after{animation-delay:-6s}
.precio-card:nth-child(4),.precio-card:nth-child(4)::before,.precio-card:nth-child(4)::after{animation-delay:-9s}

@keyframes rb-card-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes rb-card-drift{0%{background-position:0% 0%}100%{background-position:100% 100%}}
@keyframes rb-card-sweep{0%,55%{background-position:220% 0}100%{background-position:-120% 0}}

/* ---------- Accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion:reduce){
  .hero .hero-bg,.hero-bg i,.hero-bg u,
  .precio-card,.precio-card::before,.precio-card::after{ animation:none !important; }
}