:root {
  --primary: rgb(47, 73, 209);
  --secondary: rgb(115, 74, 231);
  --background: #ffffff;
  --text: #1a1a1a;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Texto con degradado */
.gradient-text {
  background: linear-gradient(45deg, 
    rgb(47, 73, 209),
    rgb(115, 74, 231)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero con degradado mejorado */
.hero-gradient {
  position: relative;
  background: linear-gradient(135deg,
    rgba(47, 73, 209, 0.95) 0%,
    rgba(115, 74, 231, 0.95) 50%,
    rgba(136, 84, 255, 0.90) 100%
  );
}

.imagen-mujer {
  width: 200px; /* Ajusta el tamaño según tus necesidades */
  height: 200px; /* Asegúrate de que el ancho y alto sean iguales para mantener la forma circular */
  object-fit: cover; /* Esto asegura que la imagen cubra todo el contenedor sin distorsionarse */
}
.contenedor-imagen {
  width: 200px; /* Ajusta el tamaño según tus necesidades */
  height: 200px; /* Asegúrate de que el ancho y alto sean iguales */
  border-radius: 50%; /* Aplica la forma circular */
  overflow: hidden; /* Oculta las partes de la imagen que sobresalgan del contenedor */
  display: flex;
  justify-content: center;
  align-items: center;
}

.contenedor-imagen img {
  width: 100%;
  height: auto;
}


.hero-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right,
    rgba(115, 74, 231, 0.3) 0%,
    transparent 50%
  );
}

/* Tarjetas de servicios con hover mejorado */
.service-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(47, 73, 209, 0.1) 0%,
    rgba(115, 74, 231, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(47, 73, 209, 0.1);
  border-color: rgba(115, 74, 231, 0.3);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover svg {
  transform: scale(1.1);
  color: var(--primary);
}

.service-card svg {
  transition: all 0.3s ease;
}

/* Botones con efectos hover mejorados */
.btn-primary {
  background: linear-gradient(135deg,
    rgb(47, 73, 209) 0%,
    rgb(115, 74, 231) 100%
  );
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgb(115, 74, 231) 0%,
    rgb(47, 73, 209) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(47, 73, 209, 0.2);
}

.btn-outline-white {
  border: 2px solid white;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-outline-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: -1;
}

.btn-outline-white:hover {
  color: var(--primary);
  transform: translateY(-2px);
}

.btn-outline-white:hover::before {
  opacity: 1;
}

/* Animaciones */
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-delay {
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.2s forwards;
}

.animate-fade-in-delay-2 {
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.4s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Formulario con efectos hover */
input, textarea {
  transition: all 0.3s ease;
  border: 2px solid transparent;
  background: #f8f9fa;
}

input:hover, textarea:hover {
  background: #fff;
  border-color: rgba(47, 73, 209, 0.3);
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(47, 73, 209, 0.1);
}

/* Enlaces de navegación */
nav a {
  position: relative;
  transition: color 0.3s ease;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right,
    rgb(47, 73, 209),
    rgb(115, 74, 231)
  );
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

/* Iconos de redes sociales */
.social-icon {
  transition: all 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  color: var(--primary);
}

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 231 48% 48%;
    --primary-foreground: 210 40% 98%;
    --secondary: 259 63% 59%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 231 48% 48%;
    --radius: 0.5rem;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Navbar styles */
.nav-link {
  @apply relative px-4 py-2 rounded-md transition-all duration-300;
}

.nav-link:hover {
  @apply bg-secondary/10;
}

.nav-button {
  @apply transition-all duration-300 hover:bg-secondary/10 hover:text-secondary hover:border-secondary;
}

/* Text gradient */
.gradient-text {
  background: linear-gradient(45deg, hsl(231 48% 48%), hsl(259 63% 59%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hero section */
.hero-gradient {
  background: linear-gradient(135deg, 
    rgba(47, 73, 209, 0.95) 0%,
    rgba(115, 74, 231, 0.95) 50%,
    rgba(136, 84, 255, 0.90) 100%
  );
}

/* Service cards */
.service-card {
  @apply transition-all duration-300 hover:shadow-xl;
  background: white;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(47, 73, 209, 0.1) 0%,
    rgba(115, 74, 231, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card:hover::before {
  opacity: 1;
}

/* Footer gradient */
.footer-gradient {
  background: linear-gradient(to bottom,
    rgba(47, 73, 209, 0.95) 0%,
    rgba(115, 74, 231, 0.95) 100%
  );
}

/* Animations */
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-delay {
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.2s forwards;
}

.animate-fade-in-delay-2 {
  opacity: 0;
  animation: fadeIn 0.6s ease-out 0.4s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form inputs */
input, textarea {
  @apply transition-all duration-300;
}

input:focus, textarea:focus {
  @apply ring-2 ring-primary/20 border-primary;
}
.timeline {
    position: relative;
    padding: 50px 0;
}

.timeline::before {
    content: "";
    position: absolute;
    width: 5px;
    background: linear-gradient(to bottom, #007bff, #8a2be2); /* Azul a violeta */
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para imágenes */
.timeline-item img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.timeline-item img:hover {
    transform: scale(1.1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
.img-testimonio {
    width: 80px; /* Ajustá según el tamaño deseado */
    height: 80px; /* Misma altura y anchura para mantenerlas circulares */
    object-fit: cover; /* Recorta la imagen en lugar de estirarla */
    border-radius: 50%; /* Hace que sean circulares */
    border: 3px solid white; /* Opcional, para que resalten */
}
.ribbon {
            position: absolute;
            top: -10px;
            left: -10px;
            background: linear-gradient(45deg, #ff416c, #ff4b2b);
            color: white;
            padding: 10px 30px;
            transform: rotate(-20deg);
            font-weight: bold;
            border-radius: 5px;
        }
        .plan-card {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            text-align: center;
        }
        .plan-card:hover {
            transform: scale(1.05);
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
        }
        .plan-button {
            transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            margin-top: 1rem;
        }
        .plan-button:hover {
            transform: translateY(-3px);
            filter: brightness(1.1);
        }
        /* Estilos para el menú de hamburguesa */
#menu {
  transition: all 0.3s ease-in-out;
}

#menu-toggle {
  display: none; /* Ocultar el botón en pantallas grandes */
}

@media (max-width: 767px) {
  #menu-toggle {
    display: block; /* Mostrar el botón en pantallas pequeñas */
  }

  #menu {
    display: none; /* Ocultar el menú en pantallas pequeñas */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    border-top: 1px solid #e2e8f0;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  #menu.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
}
/* Estilos para el carrusel */
#testimonial-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Estilos para las estrellas */
.text-yellow-400 {
    color: #fbbf24;
}
/* Efecto de sombra y transición para las tarjetas de testimonio */
.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
/* Efecto hover para las tarjetas */
.plan-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Estilo para los botones de tabs */
.tab-button {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.tab-button:hover {
    transform: translateY(-2px);
}
/* Estilos para el carrusel */
#testimonial-carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Ocultar el scroll horizontal */
.relative {
    overflow: hidden;
}