.btn-primary {
   background: #203864 !important;
   border-color: #203864 !important;
}
.btn-primary:hover {
   background: #3c93e8 !important;
   border-color: #3c93e8 !important;
}
.btn-outline-primary {
   color: #fff !important;
   border-color: #fff !important;
}
.select2-container--default .select2-selection--single {
   background-color: #fff;
   border: 1px solid #aaa;
   border-radius: 0px !important;
   padding: 10px !important;
   height: 47px !important;
}
.fixed-area {
   position: fixed;
   bottom: 30px;
   right: 30px;
   z-index: 1030;  /* Mayor que el navbar de Bootstrap */
}
.whatsapp {
   border-color: #25D366 !important;
   background: #25D366 !important;
   transition: all 0.3s ease;
}
.whatsapp:hover {
   border-color: #25D366 !important;
   background: #20ba59 !important;
   transform: scale(1.05);
}
/* Animación de pulso */
@keyframes pulse {
   0% {
       box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
   }
   70% {
       box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
   }
   100% {
       box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
   }
}
.whatsapp {
   animation: pulse 2s infinite;
}
@media screen and (min-width: 1280px) and (max-width: 1440px) and (max-height: 700px) {
 .titulo-secundario {
   font-size: 4em;
   position: relative;
   top: 65px;
   font-family: 'Sacramento', cursive;
   font-weight: 400;
   font-style: normal;
   display: block;
 }
 .titulo-principal {
   font-size: 1.5em;
   padding-top: 19px;
   font-weight: bold;
 }
 .content-html {
   padding-top: 31px !important;
 }
  .content-html h1 {
   font-size: 3em;
   padding-top: 19px;
   font-weight: bold;
 }
}
.ratio.ratio-4x5 {
 aspect-ratio: 4 / 5;
}
.object-fit-contain {
 object-fit: contain !important;
 object-position: center !important;
}
.hero .video-overlay {
   background: rgba(0, 0, 0, 0.3) !important;
}
/* CSS para video de YouTube en hero */
.youtube-video-bg {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   z-index: -1 !important;
   pointer-events: none !important;
   overflow: hidden !important;
}
.youtube-video-bg iframe {
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   width: 100vw !important;
   height: 56.25vw !important; /* Ratio 16:9 */
   min-height: 100vh !important;
   min-width: 177.77vh !important; /* Para cubrir toda la pantalla */
   transform: translate(-50%, -50%) !important;
   border: 0 !important;
}
/* Asegurar compatibilidad con tu hero existente */
.hero {
   overflow: hidden !important;
   position: relative !important;
}
/* Contenido siempre visible por encima del video */
.hero .container {
   position: relative !important;
   z-index: 2 !important;
}
/* Responsive para móviles - CORREGIDO PARA QUE FUNCIONE EL VIDEO */
@media (max-width: 768px) {
   .youtube-video-bg iframe {
       position: absolute !important;
       top: 50% !important;
       left: 50% !important;
       width: 177.78vh !important; /* Ancho basado en altura para mantener aspecto 16:9 */
       height: 100vh !important;
       min-height: 100vh !important;
       min-width: 100vw !important;
       transform: translate(-50%, -50%) !important;
       object-fit: cover !important;
   }
   
   /* Asegurar que el hero tenga altura completa en móvil */
   .hero {
       min-height: 100vh !important;
   }
   
   /* Ajustar el contenido para móvil */
   .hero .container {
       padding-top: 20px !important;
       padding-bottom: 20px !important;
   }
}
/* Para usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
   .youtube-video-bg {
       display: none !important;
   }
   
   .hero.youtube-hero {
       background-image: url('../images/hero-fallback.jpg') !important;
       background-size: cover !important;
       background-position: center !important;
   }
}