/* ==================================
   ARCHIVO: static/css/custom.css
   (Versión Final y Corregida)
   ================================== */

/* --- Estilos para la SECCIÓN HERO --- */
/* static/css/custom.css (NUEVOS ESTILOS PARA KEN BURNS) */

/* --- 1. Keyframes para las animaciones --- */
@keyframes kenburns-in-left {
  from {
    transform: scale(1.2) translate(10%, 5%);
    opacity: 0;
  }
  to {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}

@keyframes kenburns-out-left {
  from {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  to {
    transform: scale(1.2) translate(-10%, -5%);
    opacity: 0;
  }
}

@keyframes kenburns-in-right {
  from {
    transform: scale(1.2) translate(-10%, -5%);
    opacity: 0;
  }
  to {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}

@keyframes kenburns-out-right {
  from {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  to {
    transform: scale(1.2) translate(10%, 5%);
    opacity: 0;
  }
}


/* --- 2. Estilo del Contenedor Principal --- */
.hero-form-section {
    position: relative; /* Clave para posicionar las imágenes de fondo */
    height: 85vh; /* Dale una altura, ej: 85% de la altura de la ventana */
    color: white;
    overflow: hidden; /* Oculta las partes de la imagen que se salen al hacer zoom/pan */
}

/* --- 3. Estilo de las capas de imagen --- */
.hero-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0; /* Por defecto están ocultas */
}

/* --- 4. Clases de animación y visibilidad (controladas por JS) --- */
.hero-bg-slide.active-in-left {
    animation: kenburns-in-left 8s ease-out forwards;
}

.hero-bg-slide.active-out-left {
    animation: kenburns-out-left 8s ease-out forwards;
}

.hero-bg-slide.active-in-right {
    animation: kenburns-in-right 8s ease-out forwards;
}

.hero-bg-slide.active-out-right {
    animation: kenburns-out-right 8s ease-out forwards;
}


/* --- 5. Contenedor del contenido (formulario, texto, etc.) --- */
.hero-content-overlay {
    position: relative; /* Para que se ponga por encima de las imágenes */
    z-index: 2; /* Asegura que está delante */
    height: 100%;
    display: flex; /* Para centrar el contenido verticalmente */
    align-items: center;
}

/* --- 6. Estilo de la tarjeta (el que ya tenías) --- */
.hero-form-section .card {
    background-color: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- 7. Estilo del título (el que ya tenías) --- */
.hero-form-section .text-white h1 {
    font-size: 3.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}
/* ================================================= */
/* ESTILO PARA MEJORAR LEGIBILIDAD EN TARJETA HERO  */
/* ================================================= */

/* Estilo para el párrafo de texto */
.hero-card-paragraph {
    color: white !important; /* Forzamos el color a blanco */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9); /* Sombra de texto muy definida para máxima legibilidad */
}

/* Estilo para el texto dentro del botón y el teléfono */
.hero-card .btn, .hero-card .h4 {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Una sombra más sutil para textos sobre fondos de color */
}
/* ================================================= */
/* ESTILOS RESPONSIVE PARA LA VERSIÓN MÓVIL         */
/* ================================================= */

/* Por defecto, el botón flotante está oculto en pantallas grandes */
.mobile-cta-button {
  display: none;
}

/* Esta regla se aplica solo a pantallas con un ancho MÁXIMO de 991.98px 
   (el punto de ruptura de Bootstrap para tablets y móviles) */
@media (max-width: 991.98px) {
  
  /* 1. Ocultamos la columna del formulario en la página de inicio */
  .hero-form-section .col-lg-5 {
    display: none;
  }

  /* 2. Mostramos y damos estilo a nuestro nuevo botón flotante */
  .mobile-cta-button {
    display: inline-block; /* Hacemos que sea visible */
    position: fixed;       /* Lo fija en la pantalla para que no se mueva con el scroll */
    bottom: 20px;          /* 20px de distancia desde abajo */
    right: 20px;           /* 20px de distancia desde la derecha */
    z-index: 1030;         /* Se asegura de que esté por encima de otros elementos */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Una sombra pronunciada para que destaque */
    border-radius: 50px;   /* Para hacerlo más redondeado y amigable */
  }
}