@import url('../global.css');

.parallax {
    /* The image used */
    background-image: url("/assets/fondos/asesor_f3.jpg");
  
    /* Set a specific height */
    min-height: 50vh;
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: 30px;
    
    box-shadow: 10px 6px 5px rgba(0, 0, 0, 0.71);
}

.transparente{
    background-color: transparent;
    border-width: 0px;
}

.Typewriter__wrapper{
    color: var(---color_primario_1);
    font-family: 'Tecbit', sans-serif;
}

.image_sec_1{
    width: 100%; /* Asegura que la imagen se adapte al ancho de la columna */
    height: auto; /* Mantiene la proporción */
    margin: 0; /* Elimina márgenes innecesarios */
    padding: 0; /* Asegura que no haya espacios internos */ 
    margin-left: 40px;
       

}

.row {
    margin: 0;
    padding: 0;
}

.col-12, .col-lg-6 {
    margin: 0;
    padding: 0;
}


.image_sec_2{
    
    position: relative;
    left: 4.3rem;
    width: 1200px;
}
.Seccion_1 {/*
    background-image: url('../../assets/asesorias/celeste3.jpg');
    background-image: url('https://img.freepik.com/vector-gratis/fondo-acuarela_87374-74.jpg?t=st=1741272015~exp=1741275615~hmac=757540bbbe10cc64b6797601899261c1cf167a69ac1c58b4e9ccfade47a6b40e&w=1480');
    
    */
    background-image: url('../../assets/asesorias/acuarelafondo.jpg');

    background-size: cover; /* Ajusta la imagen para que cubra toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}


.sobreado{
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #034493);
}

.background-cad-asesorias{
    background: rgba(0, 0, 0, 0.064);

}

.texto-card-asesorias {
    color: rgb(0, 0, 0);
        padding: 15px 20px; /* Espaciado para mejorar legibilidad */
    border-radius: 10px; /* Bordes redondeados modernos */
    display: inline-block; 
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem; /* Ajusta según el diseño */
    font-weight: 600; /* Negrita moderada */
}


.chip_info{
    
    box-shadow: 0px 0px 10px rgba(9, 152, 255, 0.71);


}
.chip_info h3{
    color: rgb(0, 0, 0);
}

.btn-contenedor{
    margin-left: 100px;
}

.btn-contenedor .btn{
    background: linear-gradient(to right, #47a0ff, #00ddfa);
    color: white;
}

.otro{
    margin-left: 80px;
    box-shadow: 0px 0px 10px rgb(105, 192, 255);
    background-color: #ffffffcf;
}
@media (max-width: 980px) {
    .otro{
        margin-left: 0px;
    }
    .btn-contenedor{
        margin-left: 0px;
    }
}



.remarcado-card-asesorias {
    color: white;
    font-size: 30px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra gris suave */
}



/* 1. El container principal se muestra (fade-in) */
.Seccion_1 {
    opacity: 0;
    animation: fadeInContainer 0.5s forwards;
    animation-delay: 0.2s; /* Se puede ajustar según convenga */
  }
  
  @keyframes fadeInContainer {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  
  /* 2. La imagen entra deslizando desde la izquierda */
  .image_sec_1 {
    opacity: 0;
    transform: translateX(-100%);
    animation: slideInImage 1s forwards;
    animation-delay: 0.8s; /* Aparece después del container */
  }
  
  @keyframes slideInImage {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  /* 3. El overlay (background-cad-asesorias) aparece bajando desde arriba */
  .background-cad-asesorias {
    opacity: 0;
    transform: translateY(-100%);
    animation: slideDownOverlay 1s forwards;
    animation-delay: 1.8s; /* Aparece tras la imagen */
  }
  
  @keyframes slideDownOverlay {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 4. El texto (texto-card-asesorias) aparece, con énfasis en el span remarcado-card-asesorias */
  .texto-card-asesorias {
    opacity: 0;
    animation: fadeInText 1s forwards;
    animation-delay: 2.8s;
  }
  
  @keyframes fadeInText {
    to {
      opacity: 1;
    }
  }
  
  /* Animación de énfasis para el span dentro del texto */
  .remarcado-card-asesorias {
    display: inline-block; /* Para que se pueda transformar */
    animation: emphasizeText 1s forwards;
    animation-delay: 2.8s;
  }
  
  @keyframes emphasizeText {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
  }
  
  /* 5. Finalmente, las tarjetas y botones aparecen uno a uno */
  .card.transparente,
  .btn-contenedor .btn {
    opacity: 0;
    animation: fadeInElements 0.5s forwards;
  }
  
  /* Por ejemplo, las tarjetas se muestran a los 3.8s */
  .card.transparente {
    animation-delay: 3.8s;
  }
  
  /* Si hay dos botones, se pueden escalonar con nth-child */
  .btn-contenedor .btn:nth-child(1) {
    animation-delay: 4.3s;
  }
  
  .btn-contenedor .btn:nth-child(2) {
    animation-delay: 4.8s;
  }
  
  @keyframes fadeInElements {
    to { opacity: 1; }
  }
  

  /* Estado inicial: oculto y desplazado hacia abajo */
.chip_info, .otro {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  /* Estado visible: opacidad al 100% y sin desplazamiento */
  .chip_info.visible, .otro.visible {
    opacity: 1;
    transform: translateY(0);
  }

  
@media (min-width: 980px) and (max-width:992px){
    .image_sec_1{
        display: none;
    }
}


@media (min-width:992px){
    .OcultarEnChicasDos{
        display: none;
    }
}