/* Aplicamos la fuente Inter a todo el cuerpo del documento */
/* styles.css */
body {
  background:
    url('data:image/svg+xml;utf8,<svg width="1920" height="1080" viewBox="0 0 1920 1080" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 800 Q480 900 960 800 T1920 800" stroke="%233b82f6" stroke-width="12" fill="none" stroke-opacity="0.9"/><path d="M0 600 Q480 700 960 600 T1920 600" stroke="%231e40af" stroke-width="10" fill="none" stroke-opacity="0.8"/><path d="M0 400 Q480 500 960 400 T1920 400" stroke="%23006ba6" stroke-width="60" fill="none" stroke-opacity="0.7"/></svg>'),
    linear-gradient(120deg, #f4f8ff 0%, #b6c7e6 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 200% 250%, 200% 250%;
  background-attachment: fixed;
  background-position: 0% 50%, 0% 50%;
  animation: gradientMove 25s ease-in-out infinite;
  position: relative;
  min-height: 100vh;
}

@keyframes gradientMove {
  0%   { background-position: 0% 50%, 0% 50%; }
  50%  { background-position: 100% 50%, 100% 50%; }
  100% { background-position: 0% 50%, 0% 50%; }
}


/* styles.css */
header {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.8);
}

/* Estilo para las animaciones de scroll */
.reveal {
    position: relative;
    transform: translateY(100px);
    opacity: 0;
    transition: 1s all ease;
}
.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

/* Animación para el menú móvil */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /* La transición debe estar en la clase base */
    transition: max-height 0.4s ease-out, opacity 0.3s ease-in-out;
}
.mobile-menu.open {
    max-height: 500px; /* Un valor suficientemente grande */
    opacity: 1;
}

/* En pantallas grandes, el menú siempre es visible */
@media (min-width: 768px) {
    .mobile-menu {
        max-height: none;
        opacity: 1;
        overflow: visible;
    }
}

/*estilos slider*/
.slide .slide-content{
    transition-property: opacity, transform;
}

/* SVG superior */
.bg-abstract-top {
  position: relative;
  overflow: hidden;
}
.bg-abstract-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('data:image/svg+xml;utf8,<svg width="1440" height="180" viewBox="0 0 1440 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,80 C360,0 1080,160 1440,80 L1440,180 L0,180 Z" fill="%239ca3af" opacity="0.18"/><path d="M0,120 C480,40 960,200 1440,120 L1440,180 L0,180 Z" fill="%23d1d5db" opacity="0.22"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.bg-abstract-top > * {
  position: relative;
  z-index: 1;
}

/* SVG medio */
.bg-abstract-middle {
  position: relative;
  overflow: hidden;
}
.bg-abstract-middle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('data:image/svg+xml;utf8,<svg width="1440" height="180" viewBox="0 0 1440 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,90 C360,180 1080,0 1440,90 L1440,180 L0,180 Z" fill="%239ca3af" opacity="0.13"/><path d="M0,140 C480,60 960,200 1440,140 L1440,180 L0,180 Z" fill="%23d1d5db" opacity="0.18"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.bg-abstract-middle > * {
  position: relative;
  z-index: 1;
}

/* SVG inferior */
.bg-abstract-bottom {
  position: relative;
  overflow: hidden;
}
.bg-abstract-bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('data:image/svg+xml;utf8,<svg width="1440" height="180" viewBox="0 0 1440 180" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,160 C360,180 1080,20 1440,160 L1440,180 L0,180 Z" fill="%239ca3af" opacity="0.22"/><path d="M0,180 C480,100 960,180 1440,180 L1440,180 L0,180 Z" fill="%23d1d5db" opacity="0.18"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
.bg-abstract-bottom > * {
  position: relative;
  z-index: 1;
}


/* Subrayado animado para enlaces */
.underline-anim {
  position: relative;
  overflow: hidden;
}
.underline-anim::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: #2563eb;
  transition: width 0.3s;
}
.underline-anim:hover::after,
.underline-anim:focus::after {
  width: 100%;
}

/*buttons*/
/* En tu archivo css/styles.css */

/* Animación de Pulso para WhatsApp (Verde) */
@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(34, 197, 94, 0);
  }
}

/* Animación de Pulso para Teléfono (Azul) */
@keyframes pulse-blue {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(21, 92, 206, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(59, 130, 246, 0);
  }
}

/* Clases para aplicar las animaciones */
.animate-pulse-green {
  animation: pulse-green 2s infinite;
}

.animate-pulse-blue {
  animation: pulse-blue 2s infinite;
}