/* CSS Ajustado - Sin scroll horizontal */
 html,
 body {
     overflow-x: hidden;
     max-width: 100%;
 }

 .hero-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     /* CAMBIO: era 100vw */
     height: 100%;
     object-fit: cover;
     z-index: -1;
 }

 .overlay {
     background: rgba(0, 0, 20, 0.7);
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 .hero-section {
     position: relative;
     min-height: 100vh;
     overflow: hidden;
     width: 100%;
     /* CAMBIO: era 100vw */
     /* ELIMINADO: margin-left: calc(-50vw + 50%); */
 }

 .zodiac-icon {
     transition: transform 0.3s;
 }

 .zodiac-icon:hover {
     transform: scale(1.1);
 }

 .gradient-text {
     background: linear-gradient(45deg, #ffd700, #ff6b6b);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 /* AGREGADO: Responsive para móviles */
 @media (max-width: 576px) {
     .d-flex.gap-3 {
         flex-direction: column;
         gap: 1rem !important;
     }
 }

 /* AGREGAR AL CSS PARA ARREGLAR LOS ERRORES: */

 /* FIX 1: Margen superior para que no se tape con header */
 #estudios-astrologicos {
     padding-top: 100px;
     /* Ajusta según altura de tu header */
 }

 /* FIX 2: Corregir fondo blanco con texto blanco */
 .bg-gradient {
     background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%) !important;
 }

 /* FIX 3: Cambiar amarillos por colores astrológicos */
 .text-warning {
     color: #b794f6 !important;
     /* Púrpura místico */
 }

 .bg-warning {
     background: linear-gradient(135deg, #805ad5, #9f7aea) !important;
     color: white !important;
 }

 .border-warning {
     border-color: #805ad5 !important;
 }

 .btn-warning {
     background: linear-gradient(45deg, #805ad5, #9f7aea) !important;
     border: none !important;
     color: white !important;
 }

 .alert-warning {
     background: rgba(128, 90, 213, 0.1) !important;
     border-color: #805ad5 !important;
     color: #553c9a !important;
 }

 /* Iconos con colores astrológicos */
 .bi {
     /* color: #805ad5 !important; */
 }

 /* Colores alternativos para variedad */
 .text-primary {
     color: #4299e1 !important;
     /* Azul cósmico */
 }

 .text-info {
     color: #38b2ac !important;
     /* Verde agua lunar */
 }

 .text-success {
     color: #68d391 !important;
     /* Verde tierra */
 }

 .text-danger {
     color: #fc8181 !important;
     /* Rosa Venus */
 }

 /* Efectos hover para redes sociales */
 footer .rounded-circle:hover {
     transform: translateY(-2px);
     background: rgba(128, 90, 213, 0.4) !important;
 }

 footer .rounded-circle:hover i {
     color: white !important;
 }

 /* Efecto hover para enlaces */
 footer a:hover {
     opacity: 1 !important;
     color: #805ad5 !important;
 }