/* ================================================================
   SERTIC NETWORKS — Animaciones dinámicas
   Solo animaciones y transiciones, sin modificar el diseño base
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   SCROLL SUAVE
────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ──────────────────────────────────────────────────────────────
   KEYFRAMES
────────────────────────────────────────────────────────────── */

/* Entrada desde abajo */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrada desde la izquierda */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Entrada desde la derecha */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Zoom suave */
@keyframes zoomIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Línea que se expande */
@keyframes lineGrow {
  from { width: 0; }
  to   { width: 50px; }
}

/* Barrido de brillo en botones */
@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 160%; }
}

/* Levitación suave */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* Pulso de escala */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

/* Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   HEADER — transición suave
────────────────────────────────────────────────────────────── */
#masthead,
.site-header,
.ast-primary-header-bar {
  transition: box-shadow .3s ease, background .3s ease;
}

/* ──────────────────────────────────────────────────────────────
   LOGO — suave al hover
────────────────────────────────────────────────────────────── */
.custom-logo-link img,
.ast-default-logo {
  transition: opacity .3s ease, transform .3s ease;
}
.custom-logo-link:hover img,
.custom-logo-link:hover .ast-default-logo {
  opacity: .85;
  transform: scale(1.04);
}

/* ──────────────────────────────────────────────────────────────
   MENÚ DE NAVEGACIÓN — subrayado animado
────────────────────────────────────────────────────────────── */
.main-header-menu .menu-item > a,
.ast-nav-menu > .menu-item > a {
  position: relative;
  transition: opacity .25s ease;
}

.main-header-menu .menu-item > a::after,
.ast-nav-menu > .menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: currentColor;
  opacity: .6;
  border-radius: 2px;
  transition: width .3s ease;
}

.main-header-menu .menu-item > a:hover::after,
.ast-nav-menu > .menu-item > a:hover::after,
.main-header-menu .current-menu-item > a::after,
.ast-nav-menu > .current-menu-item > a::after {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   HERO — entrada del título y subtítulo
────────────────────────────────────────────────────────────── */
.elementor-section:first-of-type h1.elementor-heading-title,
.elementor-top-section:first-of-type h1.elementor-heading-title {
  animation: fadeInUp .9s ease both;
}

.elementor-section:first-of-type h2.elementor-heading-title,
.elementor-top-section:first-of-type h2.elementor-heading-title {
  animation: fadeInUp .9s .1s ease both;
}

.elementor-section:first-of-type .elementor-widget-text-editor,
.elementor-top-section:first-of-type .elementor-widget-text-editor {
  animation: fadeInUp .9s .25s ease both;
}

.elementor-section:first-of-type .elementor-widget-button,
.elementor-top-section:first-of-type .elementor-widget-button {
  animation: fadeInUp .9s .4s ease both;
}

/* ──────────────────────────────────────────────────────────────
   BOTONES — shimmer + lift al hover
────────────────────────────────────────────────────────────── */
.elementor-button,
.elementor-widget-button .elementor-button,
.wp-block-button__link,
a.ast-button,
input[type="submit"],
.wpcf7-submit {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}

/* Brillo que barre el botón */
.elementor-button::after,
.elementor-widget-button .elementor-button::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -100%;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: shimmer 3.5s ease infinite;
}

.elementor-button:hover,
.elementor-widget-button .elementor-button:hover,
.wpcf7-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
}

/* ──────────────────────────────────────────────────────────────
   TARJETAS DE SERVICIOS — lift + transición
────────────────────────────────────────────────────────────── */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  transition: transform .35s ease, box-shadow .35s ease;
}
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* Icono — levitación suave en hover de la card */
.elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon,
.elementor-widget-icon-box:hover .elementor-icon-box-icon i {
  animation: float 2.5s ease-in-out infinite;
}

.elementor-icon-box-icon .elementor-icon,
.elementor-icon-box-icon i {
  transition: transform .35s ease;
}

/* Entrada escalonada de las cards */
.elementor-column:nth-child(1) .elementor-widget-icon-box { animation: fadeInUp .6s .05s ease both; }
.elementor-column:nth-child(2) .elementor-widget-icon-box { animation: fadeInUp .6s .15s ease both; }
.elementor-column:nth-child(3) .elementor-widget-icon-box { animation: fadeInUp .6s .25s ease both; }
.elementor-column:nth-child(4) .elementor-widget-icon-box { animation: fadeInUp .6s .35s ease both; }
.elementor-column:nth-child(5) .elementor-widget-icon-box { animation: fadeInUp .6s .45s ease both; }
.elementor-column:nth-child(6) .elementor-widget-icon-box { animation: fadeInUp .6s .55s ease both; }

/* ──────────────────────────────────────────────────────────────
   IMÁGENES — zoom suave al hover
────────────────────────────────────────────────────────────── */
.elementor-widget-image img {
  transition: transform .4s ease, opacity .4s ease;
}
.elementor-widget-image:hover img {
  transform: scale(1.04);
  opacity: .9;
}

/* Logos de clientes — opacidad al hover */
.elementor-top-section:nth-child(2) .elementor-widget-image img {
  transition: opacity .3s ease, transform .3s ease;
  opacity: .65;
}
.elementor-top-section:nth-child(2) .elementor-widget-image:hover img {
  opacity: 1;
  transform: scale(1.07);
}

/* ──────────────────────────────────────────────────────────────
   TESTIMONIOS — lift al hover
────────────────────────────────────────────────────────────── */
.elementor-widget-testimonial .elementor-testimonial-wrapper,
.elementor-testimonial-wrapper {
  transition: transform .35s ease, box-shadow .35s ease;
}
.elementor-widget-testimonial:hover .elementor-testimonial-wrapper {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0,0,0,.15);
}

/* ──────────────────────────────────────────────────────────────
   FAQ / ACORDEÓN — transición fluida
────────────────────────────────────────────────────────────── */
.elementor-accordion .elementor-accordion-item,
.elementor-toggle .elementor-toggle-item {
  transition: box-shadow .3s ease;
}
.elementor-accordion .elementor-accordion-item:hover,
.elementor-toggle .elementor-toggle-item:hover {
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
}

/* ──────────────────────────────────────────────────────────────
   TÍTULOS DE SECCIÓN — entrada al cargar
────────────────────────────────────────────────────────────── */
.elementor-widget-heading h2.elementor-heading-title {
  animation: fadeInUp .7s ease both;
}
.elementor-widget-heading h3.elementor-heading-title {
  animation: fadeInUp .7s .1s ease both;
}

/* ──────────────────────────────────────────────────────────────
   ICONOS SOCIALES — rebote al hover
────────────────────────────────────────────────────────────── */
.elementor-widget-social-icons .elementor-social-icon,
.elementor-social-icons-wrapper a {
  transition: transform .3s ease, opacity .3s ease;
}
.elementor-widget-social-icons .elementor-social-icon:hover {
  transform: translateY(-5px) scale(1.1);
  opacity: .85;
}

/* ──────────────────────────────────────────────────────────────
   ENLACES GENERALES
────────────────────────────────────────────────────────────── */
a {
  transition: opacity .25s ease, color .25s ease;
}

/* ──────────────────────────────────────────────────────────────
   FORMULARIOS — transición de foco
────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
.wpcf7-form-control:not(.wpcf7-submit) {
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* ──────────────────────────────────────────────────────────────
   WIDGETS GENERALES — entrada escalonada por sección
────────────────────────────────────────────────────────────── */
.elementor-top-section .elementor-widget {
  animation: fadeInUp .55s ease both;
}
.elementor-top-section .elementor-column:nth-child(1) .elementor-widget { animation-delay: .05s; }
.elementor-top-section .elementor-column:nth-child(2) .elementor-widget { animation-delay: .12s; }
.elementor-top-section .elementor-column:nth-child(3) .elementor-widget { animation-delay: .19s; }