/* ==========================================================================
   1. VARIABLES GLOBALES Y CONFIGURACIÓN BASE
   ========================================================================== */
:root {
  --violeta: #663399; /* Color de marca */
  --violeta-claro: #9b59b6;
  --dark: #2c3e50;
  --light-bg: #f8f9fa;
}

/* MODIFICACIÓN: Bloqueo de ancho para evitar desbordamientos en móviles */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

body {
  font-family: "Open Sans", sans-serif;
  color: var(--dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Raleway", sans-serif;
}

/* ==========================================================================
   2. NAVBAR Y CARGA DINÁMICA (Optimización Móvil)
   ========================================================================== */

/* MODIFICACIÓN: Añadido width y overflow para control de dimensiones */
#navbar-placeholder {
  min-height: 70px;
  display: block;
  background-color: #fff;
  position: relative;
  z-index: 1040;
  width: 100%;
  overflow: hidden;
}

@media (min-width: 992px) {
  #navbar-placeholder {
    min-height: 80px;
  }
}

/* Forzar que la Navbar de Bootstrap siempre gane en prioridad de capa */
.navbar.fixed-top {
  z-index: 2000 !important;
}

/* Ajuste del menú desplegable */
.dropdown-menu .dropdown-item {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.2;
  font-size: 0.95rem;
}

/* Estilo del item activo en el menú desplegable */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #662dac !important;
  color: #ffffff !important;
  font-weight: bold;
}

.dropdown-item:hover {
  background-color: #f3e5f5;
  color: #4a148c;
}

/* Animación fluida para el colapso en móviles */
.navbar-collapse {
  transition: height 0.3s ease;
}

/* ==========================================================================
   3. HERO SECTION (PORTADA)
   ========================================================================== */
.hero-section {
  height: 90vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Efecto Parallax en PC */
  width: 100%; /* MODIFICACIÓN: Asegura el ancho total */
}

/* FIX CRÍTICO PARA MÓVILES: 
   El efecto 'fixed' suele mover el menú al final en iPhone/Android */
@media (max-width: 768px) {
  .hero-section {
    background-attachment: scroll !important;
    height: auto;
    min-height: 80vh;
    padding: 100px 0;
    overflow: hidden; /* MODIFICACIÓN: Corta elementos que sobresalgan */
  }
}

/* ==========================================================================
   4. COMPONENTES (Botones, Tarjetas, Utilidades)
   ========================================================================== */

/* Utilidades */
.text-violet {
  color: var(--violeta) !important;
}
.bg-violet {
  background-color: var(--violeta) !important;
}
.ls-2 {
  letter-spacing: 2px;
}

/* Botones */
.btn-violet {
  background-color: var(--violeta);
  color: #fff;
  border: 2px solid var(--violeta);
  transition: all 0.3s ease;
}
.btn-violet:hover {
  background-color: transparent;
  color: var(--violeta);
}

.btn-outline-violet {
  color: var(--violeta);
  border: 2px solid var(--violeta);
  font-weight: 600;
  transition: all 0.3s ease;
}
.btn-outline-violet:hover {
  background-color: var(--violeta);
  color: #fff;
}

/* Tarjetas de Servicios */
.service-card {
  border: none;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(102, 51, 153, 0.2);
}

.icon-circle {
  width: 70px;
  height: 70px;
  background: #f3e5f5;
  color: var(--violeta);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.service-card:hover .icon-circle {
  background: var(--violeta);
  color: #fff;
  transform: scale(1.1);
}

/* Pestañas (Tabs) */
.nav-pills .nav-link {
  color: #555;
  background-color: #fff;
  border: 1px solid #ddd;
  font-weight: 600;
}
.nav-pills .nav-link.active {
  background-color: var(--violeta);
  color: #fff;
  border-color: var(--violeta);
}

/* ==========================================================================
   5. CARRUSEL TESTIMONIOS Y OTROS
   ========================================================================== */

/* Área de flechas */
#carouselTestimonios .carousel-control-prev,
#carouselTestimonios .carousel-control-next {
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  opacity: 1;
}

#carouselTestimonios .carousel-control-prev {
  left: 0;
}
#carouselTestimonios .carousel-control-next {
  right: 0;
}

#carouselTestimonios i.fas.fa-chevron-left,
#carouselTestimonios i.fas.fa-chevron-right {
  color: var(--violeta);
  font-size: 2rem;
}

.testimonial-content {
  padding: 0 60px;
}

/* Flecha Volver Arriba */
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  background: var(--violeta);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  transition: all 0.4s;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/* Ajustes finales para móvil */
@media (max-width: 768px) {
  .testimonial-content {
    padding: 0 30px;
  }
  #carouselTestimonios .carousel-control-prev,
  #carouselTestimonios .carousel-control-next {
    width: 30px;
  }
}

/* Giro del logo */
.spin-horizontal {
  animation: giroSecuencial 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes giroSecuencial {
  0% {
    transform: rotateY(0deg);
  }
  25% {
    transform: rotateY(180deg);
  }
  50% {
    transform: rotateY(180deg); /* Pausa */
  }
  75% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg); /* Pausa */
  }
}