/* ============================================================
   RG Expertos en Salud y Seguridad Laboral
   Capa de movimiento y color — se carga DESPUES de estilos.css

   Todo con los colores de marca y sin imagenes: solo gradientes,
   transformaciones y transiciones CSS.

   Nota para la conversion a Elementor: los fondos animados van como
   CSS personalizado del container correspondiente; las apariciones al
   hacer scroll se reemplazan por "Efectos de movimiento > Animacion de
   entrada" nativos de Elementor y se descarta assets/js/efectos.js.
   ============================================================ */

/* ---------- fondos oscuros con deriva lenta ---------- */

.hero,
.hero-interior,
.fondo-oscuro,
.pie,
.cta-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero > *,
.hero-interior > *,
.fondo-oscuro > *,
.pie > *,
.cta-final > * {
  position: relative;
  z-index: 2;
}

.hero::before,
.hero-interior::before,
.fondo-oscuro::before,
.pie::before,
.cta-final::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -25%;
  right: -25%;
  bottom: -25%;
  z-index: 0;
  background:
    radial-gradient(540px 400px at 16% 20%, rgba(45, 117, 182, 0.42), transparent 62%),
    radial-gradient(660px 460px at 84% 76%, rgba(40, 93, 151, 0.50), transparent 60%),
    radial-gradient(420px 320px at 60% 8%, rgba(233, 162, 39, 0.14), transparent 66%);
  animation: deriva-fondo 26s ease-in-out infinite alternate;
}

/* trama diagonal muy tenue sobre el gradiente */
.hero::after,
.hero-interior::after,
.fondo-oscuro::after,
.cta-final::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 1px,
    transparent 11px
  );
}

@keyframes deriva-fondo {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2.2%, 0) scale(1.07); }
  100% { transform: translate3d(-2.2%, 2.5%, 0) scale(1.03); }
}

/* la fotografia del hero queda por encima de la trama */
.hero-imagen { z-index: 3; }

/* ---------- fondos claros: tinte suave en vez de plano ---------- */

.fondo-claro,
.fondo-gris {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fondo-claro > *,
.fondo-gris > * { position: relative; z-index: 2; }

.fondo-claro::before,
.fondo-gris::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -15%;
  right: -15%;
  bottom: -30%;
  z-index: 0;
  background:
    radial-gradient(600px 420px at 12% 8%, rgba(45, 117, 182, 0.10), transparent 60%),
    radial-gradient(520px 400px at 88% 92%, rgba(233, 162, 39, 0.09), transparent 62%);
  animation: deriva-fondo 32s ease-in-out infinite alternate-reverse;
}

/* ---------- entrada del hero ---------- */

.hero-texto > * { animation: entrada-hero 0.75s cubic-bezier(0.22, 0.7, 0.3, 1) both; }
.hero-texto > *:nth-child(1) { animation-delay: 0.05s; }
.hero-texto > *:nth-child(2) { animation-delay: 0.14s; }
.hero-texto > *:nth-child(3) { animation-delay: 0.23s; }
.hero-texto > *:nth-child(4) { animation-delay: 0.32s; }
.hero-texto > *:nth-child(5) { animation-delay: 0.41s; }

.hero-sello { animation: entrada-hero 0.8s 0.5s cubic-bezier(0.22, 0.7, 0.3, 1) both; }

@keyframes entrada-hero {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- cabecera reactiva al scroll ---------- */

.cabecera { transition: box-shadow 0.25s ease; }
.cabecera.desplazada { box-shadow: 0 8px 26px rgba(15, 31, 56, 0.14); }
.cabecera .cabecera-interior { transition: padding 0.25s ease; }
.cabecera.desplazada .cabecera-interior { padding-top: 9px; padding-bottom: 9px; }
.cabecera .logo-rg img { transition: height 0.25s ease; }
.cabecera.desplazada .logo-rg img { height: 64px; }

/* ---------- navegacion con subrayado que crece ---------- */

.navegacion a {
  position: relative;
  border-bottom: 0;
  padding-bottom: 9px;
  transition: color 0.2s ease;
}

.navegacion a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--ambar);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.navegacion a:hover { border-bottom: 0; }
.navegacion a:hover::after,
.navegacion a.activo::after { transform: scaleX(1); }

/* ---------- botones ---------- */

.boton {
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
}

.boton:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 31, 56, 0.22); }
.boton:active { transform: translateY(0); box-shadow: none; }

/* ---------- cajas de icono: color rotativo + realce ---------- */

.caja-icono {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.3, 1),
              box-shadow 0.28s ease, border-color 0.28s ease;
}

.caja-icono::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--azul-500), var(--ambar));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.caja-icono:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-media);
  border-color: var(--azul-300);
}

.caja-icono:hover::after { transform: scaleX(1); }

.caja-icono .simbolo {
  transition: background 0.28s ease, color 0.28s ease,
              transform 0.35s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.caja-icono:hover .simbolo { transform: rotate(-5deg) scale(1.08); }

/* cada tarjeta toma un color distinto de la paleta */
.caja-icono:nth-child(4n + 1) .simbolo { background: #E2EDF8; color: var(--azul-600); }
.caja-icono:nth-child(4n + 2) .simbolo { background: #FCF0DA; color: #A9740A; }
.caja-icono:nth-child(4n + 3) .simbolo { background: #DFF2EC; color: #10745B; }
.caja-icono:nth-child(4n + 4) .simbolo { background: #E0E5F1; color: var(--azul-700); }

.caja-icono:nth-child(4n + 1):hover .simbolo { background: var(--azul-600); color: var(--blanco); }
.caja-icono:nth-child(4n + 2):hover .simbolo { background: var(--ambar); color: var(--azul-900); }
.caja-icono:nth-child(4n + 3):hover .simbolo { background: #10745B; color: var(--blanco); }
.caja-icono:nth-child(4n + 4):hover .simbolo { background: var(--azul-700); color: var(--blanco); }

/* sobre fondo oscuro se mantiene el ambar de marca */
.fondo-oscuro .caja-icono .simbolo { background: rgba(233, 162, 39, 0.16); color: var(--ambar); }
.fondo-oscuro .caja-icono:hover { border-color: rgba(233, 162, 39, 0.45); }
.fondo-oscuro .caja-icono:hover .simbolo { background: var(--ambar); color: var(--azul-900); }

/* cajas de icono que son enlaces (indice de servicios) */
a.caja-icono { color: inherit; }
a.caja-icono h4 { transition: color 0.2s ease; }
a.caja-icono:hover h4 { color: var(--azul-600); }

/* ---------- tarjetas de servicio ---------- */

.tarjeta-servicio { position: relative; }
.tarjeta-servicio h3 { transition: color 0.25s ease; }

.tarjeta-servicio .tarjeta-imagen {
  transition: transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1);
  transform-origin: center;
}

.tarjeta-servicio:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
.tarjeta-servicio:hover .tarjeta-imagen { transform: scale(1.07); }
.tarjeta-servicio:hover h3 { color: var(--azul-600); }

.enlace-flecha {
  display: inline-block;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.enlace-flecha:hover { transform: translateX(5px); }

/* ---------- pasos del proceso ---------- */

.paso {
  transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.3, 1),
              box-shadow 0.28s ease, border-top-color 0.28s ease;
}

.paso:hover { transform: translateY(-5px); box-shadow: var(--sombra-media); border-top-color: var(--ambar); }
.paso .numero { transition: color 0.25s ease; }
.paso:hover .numero { color: var(--ambar-oscuro); }

/* ---------- acuerdos gubernativos ---------- */

.acuerdo {
  transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.3, 1),
              background 0.28s ease, border-color 0.28s ease;
}

.acuerdo:hover {
  transform: translateY(-5px);
  background: rgba(233, 162, 39, 0.12);
  border-color: rgba(233, 162, 39, 0.5);
}

/* ---------- cifras ---------- */

.cifra { position: relative; transition: background 0.28s ease; }

.cifra::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ambar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.cifra:hover { background: var(--azul-050); }
.cifra:hover::before { transform: scaleX(1); }
.cifra strong { transition: color 0.25s ease; }
.cifra:hover strong { color: var(--azul-500); }

/* ---------- muro de logos ---------- */

.celda-logo {
  transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.3, 1),
              box-shadow 0.28s ease, border-color 0.28s ease;
}

.celda-logo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-media);
  border-color: var(--azul-300);
}

.celda-logo img { transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; }
.celda-logo:hover img { transform: scale(1.06); }

/* ---------- galeria ---------- */

.galeria img { transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1), box-shadow 0.35s ease; }

.galeria img:hover {
  transform: scale(1.05);
  box-shadow: var(--sombra-alta);
  position: relative;
  z-index: 3;
}

/* ---------- imagenes de los bloques de servicio ---------- */

.servicio-media img { transition: transform 0.5s cubic-bezier(0.22, 0.7, 0.3, 1), box-shadow 0.35s ease; }
.servicio-media img:hover { transform: translateY(-5px) scale(1.015); box-shadow: var(--sombra-alta); }

/* ---------- regla ambar que crece al aparecer ---------- */

.regla-ambar { transition: width 0.7s cubic-bezier(0.22, 0.7, 0.3, 1) 0.15s; }
.anim .regla-ambar { width: 0; }
.anim.visible .regla-ambar { width: 56px; }

/* ---------- formulario ---------- */

.campo input,
.campo select,
.campo textarea { transition: border-color 0.2s ease, box-shadow 0.2s ease; }

/* ---------- boton flotante de WhatsApp ---------- */

.wa-flotante {
  transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.3, 1),
              background 0.2s ease, box-shadow 0.25s ease;
}

.wa-flotante::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: pulso-wa 2.6s ease-out infinite;
  pointer-events: none;
}

.wa-flotante:hover { transform: translateY(-3px) scale(1.03); }

@keyframes pulso-wa {
  0%   { opacity: 0.7; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.22); }
  100% { opacity: 0; transform: scale(1.22); }
}

/* ---------- aparicion al hacer scroll ----------
   La clase .anim la agrega efectos.js: si el JS no corre, nada queda oculto. */

.anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.7, 0.3, 1),
              transform 0.65s cubic-bezier(0.22, 0.7, 0.3, 1);
}

.anim.visible { opacity: 1; transform: none; }

/* ---------- accesibilidad: respetar el ajuste del sistema ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-interior::before,
  .fondo-oscuro::before,
  .pie::before,
  .cta-final::before,
  .fondo-claro::before,
  .fondo-gris::before { animation: none; }

  .wa-flotante::before { display: none; }

  .hero-texto > *,
  .hero-sello { animation: none; opacity: 1; transform: none; }

  .anim { opacity: 1; transform: none; transition: none; }
  .anim .regla-ambar { width: 56px; }

  .boton:hover,
  .caja-icono:hover,
  .tarjeta-servicio:hover,
  .paso:hover,
  .acuerdo:hover,
  .celda-logo:hover,
  .galeria img:hover,
  .servicio-media img:hover,
  .wa-flotante:hover { transform: none; }
}

/* ---------- movil: menos carga visual ---------- */

@media (max-width: 767px) {
  .hero::after,
  .hero-interior::after,
  .fondo-oscuro::after,
  .cta-final::after { background-image: none; }

  .anim { transform: translateY(14px); }
  .cabecera.desplazada .logo-rg img { height: 50px; }
}