/* 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 900 Q480 1000 960 900 T1920 900" stroke="%23A50034" stroke-width="18" fill="none" stroke-opacity="0.25"/><path d="M0 700 Q480 800 960 700 T1920 700" stroke="%23F8E6EC" stroke-width="14" fill="none" stroke-opacity="0.18"/><ellipse cx="960" cy="400" rx="900" ry="120" fill="%23A50034" fill-opacity="0.08"/><ellipse cx="960" cy="600" rx="700" ry="90" fill="%23F8E6EC" fill-opacity="0.12"/></svg>'),
    linear-gradient(120deg, #f3e6ea 0%, #be6d87 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: #eb2592;
  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(246, 59, 215, 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;
}

/* ============================================= */
/* ====== ESTILOS POP-UP DE ACLARACIÓN (V2) ====== */
/* ============================================= */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 55, 100, 0.7); /* Azul oscuro del sitio con transparencia */
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.popup-overlay.visible {
    display: flex;
    opacity: 1;
}

.popup-content {
    background-color: #ffffff;
    padding: 2rem 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    text-align: center;
    position: relative;
    border-top: 4px solid #e2233a; /* Rojo de la marca */
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.popup-overlay.visible .popup-content {
    transform: scale(1);
}

.popup-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1b3764; /* Azul oscuro del sitio */
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.popup-icon {
    color: #f59e0b; /* Color de advertencia amarillo/naranja */
}

.popup-text {
    font-size: 1.05rem;
    color: #374151; /* Gris oscuro para texto */
    line-height: 1.6;
    margin-bottom: 2rem;
}

.popup-close-x {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #9ca3af;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.popup-close-x:hover {
    color: #1f2937;
}

.btn-popup-close {
    background-color: #e2233a; /* Rojo de la marca */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-popup-close:hover {
    background-color: #b71c2b; /* Rojo más oscuro para hover */
    transform: translateY(-2px);
}

/* Clase para bloquear el scroll del body */
body.popup-active-no-scroll {
    overflow: hidden;
}