/* ===================================== */
/* head */
/* ===================================== */
.head {
    background: linear-gradient(135deg, #ffffff 0%, #cfd4de 100%);
}

.imagenheader {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------- -----------*/
 /* efecto para que la imagen sea mas grande */
 /* -------------------------------------------- */
 .imagenheader {
    opacity: 0;
    transform: translateY(50px); /* Ajusta el valor según la necesidad */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Ajusta el tiempo y tipo de transición */
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

.imagenheader:hover {
    transform: scale(1.1); /* Ajusta el valor según la necesidad */
}



/* ---------------------------------- */
/* efecto para que la imagen 3D */
/* ---------------------------------- */
.imagenheader {
    transition: transform 0.6s ease-out; /* Transición suave para transformaciones */
    transform: perspective(900px) rotateY(-15deg) rotateX(5deg); /* Ajusta los valores según prefieras */
}

.imagenheader:hover {
    transform: perspective(1000px) rotateY(-20deg) rotateX(5deg) scale(1.05); /* Efecto adicional al pasar el cursor */
}



/* maquina de escribir */
.texto-head {
    display: inline-block;
    border-right: 2px solid #121212;
    white-space: nowrap;
    overflow: hidden;
    font-family: "Merriweather Sans", sans-serif;
    font-size: 3.2em;
    color: #121212;
    max-width: 100%; /* Asegura que el texto no se desborde en pantallas pequeñas */
    text-align: center; /* Centra el texto */
}

.cursor {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin-left: 2px;
    animation: blink 0.7s infinite step-end;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    from, to { background-color: transparent; }
    50% { background-color: #121212; }
}


/* Reglas responsivas utilizando clases de Bootstrap */
@media (max-width: 576px) {
    .texto-head {
        font-size: 1.5em; /* Ajusta el tamaño del texto en pantallas pequeñas */
    }
}

@media (max-width: 400px) {
    .texto-head {
        font-size: 1.2em; /* Ajusta el tamaño del texto en pantallas muy pequeñas */
    }
} 

/* botao */
.custom-btn {
    font-family: "Merriweather Sans", sans-serif;
    text-decoration: none;
    background-color: #287dfb !important; /* Cambia el color de fondo del botón */
    color: #ffffff !important; /* Cambia el color del texto */
    border: none !important; /* Elimina el borde */
    border-radius: 1.5rem !important; /* Ajusta el radio de borde */
    padding: 10px 20px !important; /* Ajusta el relleno interno del botón */
    font-size: 1.25rem !important; /* Ajusta el tamaño de la fuente */
    transition: background-color 0.3s, transform 0.3s !important; /* Transición suave */
}

.custom-btn:hover {
    background-color: #00c8fa !important; /* Cambia el color de fondo al pasar el ratón */
    transform: translateY(-3px) !important; /* Efecto de flotación */
}





/* ===================================== */
/* body efecto gradiente*/
/* ===================================== */ 
/* navbar barra de navegacion */

.logo {
    border-radius: 50%;
}

.navbar {
    background: linear-gradient(135deg, #0d6efd 0%, #00c8fa 100%);
}


.nav-link {
    color: rgb(255, 255, 255)!important;
    transition: color 0.3s !important;
}

.nav-link:hover {
    color: #b3e5fc !important; /* Celeste claro */
}

/* ===================================== */
/* body efecto gradiente*/
/* ===================================== */ 





/* ====================================== */
/* presentacion texto*/
/* ===================================== */
.presentacion {
    font-weight: bold;
    font-size: 60px;
    font-family: "Merriweather Sans", sans-serif;
    color: #080808;
    }
  
    .paragrafo {
        font-family: "Inter", sans-serif;
        font-size: 35px;
        color: #737272;
    }

    .highlight-blue {
        background-color: #c8efff; /* Tono azul suave */
        padding: 3px 3px; /* Más espaciado superior e inferior */
        border-radius: 12px;
    }
    

/* Para dispositivos móviles muy pequeños */

@media (max-width: 576px) {
  .presentacion {
      font-size: 50px; /* Tamaño de fuente para pantallas muy pequeñas */
  }
}


/* ====================================== */
/* presentación efectos del texto 1 y imagen */
/* ====================================== */
.slide-from-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1.2s ease;
}
.slide-from-right {
    opacity: 0;
    transform: translateX(100%);
    transition: all 1.2s ease;
}
.slide-in-from-left {
    opacity: 1;
    transform: translateX(0);
}
.slide-in-from-right {
    opacity: 1;
    transform: translateX(0);
}

/* imagen y texto 2 */
.animate-from-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1.2s ease;
}
.animate-from-right {
    opacity: 0;
    transform: translateX(100%);
    transition: all 1.2s ease;
}
.animate-in-from-left {
    opacity: 1;
    transform: translateX(0);
}
.animate-in-from-right {
    opacity: 1;
    transform: translateX(0);
}



/* ====================================== */
/* acordeon conosca un poco mas */
/* ====================================== */
.acordeon-fundo {
    background-color: #0a76d57d;
    padding: 50px 0;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    
}

.custom-accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.accordion-button:hover {
    background-color: #e2e6ea;
    transform: scale(1.02);
}

.accordion-button:focus {
    box-shadow: none;
}




@media (max-width: 768px) {
    .accordion-button {
        font-size: 0.9em;
        padding: 0.4rem 0.8rem;
    }

    .accordion-body {
        font-size: 0.8em;
        padding: 0.8rem;
    }
}

.pergunta {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 20px;
}

.resposta {
    font-family: "Merriweather Sans", sans-serif;
    font-size: 18px;
}



/* class texto conosca un poco mas */

/* ====================================== */
/* fim acordeon conosca un poco mas */
/* ====================================== */
 
  





/* ====================================== */
/* seccion funcionalidades*/
/* ====================================== */
.titulo-plan {
    font-weight: bold;
    font-size: 25px;
    font-family: "Merriweather Sans", sans-serif;
   color:#000000;
    
}


.titulo-tarjeta {
    color: #737272;
    font-family: "Merriweather Sans", sans-serif;
    font-size: 18px;

}

.titulo-funcionalidade {
    font-weight: bold;
    font-size: 48px;
    font-family: "Merriweather Sans", sans-serif;
   color:#000000;
}



.icon-green {
    color: #37ca7b;
}


.icon-blue {
    color: #37ca7b;
}

/* efeeito desta seccion */
.slide-from-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1.2s ease;
}
.slide-in-from-left {
    opacity: 1;
    transform: translateX(0);
}


/* ====================================== */
/* fin seccion funcionalidades */
/* ====================================== */






/* ====================================== */
/* efecto marcador */
/* ====================================== */
.highlight {
    background-color: #ffffb3; /* Color amarillo suave */
    padding: 3px 5px; /* Más espaciado superior e inferior */
    border-radius: 10px; /* Bordes ligeramente redondeados */
}


/* ====================================== */
/* fin efecto marcador */
/* ====================================== */





/* ====================================== */
/* formulario */
/* ====================================== */

.custom-input {
    border: 1px solid #0a76d57d !important;
    border-radius: 1rem !important;
    padding: 0.5rem !important;
    transition: transform 0.3s, border-color 0.3s !important;
}

.custom-input:focus {
    transform: translateY(-5px) !important;
    border-color: #007bff !important;
    outline: none !important;
}

.texto-formulario {
    font-weight: bold;
    font-size: 48px;
    font-family: "Merriweather Sans", sans-serif;
    color: #000000;  
}

button.btn-primary {
    border-radius: 1rem;
    transition: transform 0.3s, background-color 0.3s;
}

button.btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-5px);
}


.custom-input {
    border: 1px solid #0a76d57d !important;
    border-radius: 1rem !important;
    padding: 0.5rem !important;
    transition: transform 0.3s, border-color 0.3s !important;
}

.custom-input:focus {
    transform: translateY(-5px) !important;
    border-color: #007bff !important;
    outline: none !important;
}

.texto-formulario {
    font-weight: bold;
    font-size: 48px;
    font-family: "Merriweather Sans", sans-serif;
    color: #000000;  
}

button.btn-primary {
    border-radius: 1rem;
    transition: transform 0.3s, background-color 0.3s;
}

button.btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-5px);
}

/* efecto form */
.rotate-and-appear {
    opacity: 0;
    transform: rotate(-180deg);
    transition: all 1.2s ease;
}
.rotate-in {
    opacity: 1;
    transform: rotate(0);
}

/* ====================================== */
/* fim formulario */
/* ====================================== */




/* ====================================== */
/* footer */
/* ====================================== */

/* botao footer */


.text-footer {
    font-family: "ABeeZee", serif;
    font-size: px;
    color: #ffffff;
}

.icone {
    color: #00c8fa;
}

.insta {
    color: #ffd427;
    font-size: 30px;
    padding-left: 15px;
}

/* colores */
   .background     {
background: linear-gradient(135deg, #0d6efd 0%, #00c8fa 100%);
 background: linear-gradient(to right, rgb(255, 255, 255), rgb(45, 105, 255)); /* Gradiente de transición entre blanco y azul */
}
 .btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white !important;
   
}

.btn-primary:hover {
    background-color: #278cff; /* Un tono más oscuro al pasar el mouse */
    border-color: #278cff;
}

.btn-success {
    background-color: #01b94e; /* Verde moderado */
    border-color: #4dc47d;
    color: white !important;
}
.badge.bg-success {
    background-color: #1cde97 !important;
    color: white !important;
}
.badge.bg-danger {
    background-color: #ff6575 !important;
    color: white !important;
}
.btn-success:hover {
    background-color: #37ca7b; /* Verde más claro */
    border-color: #0cd365;
}
/* Botón Peligro */
.btn-danger {
    background-color: #ff3044; /* Rojo */
    border-color: #ff424b;
    color: white !important;
}

.btn-danger:hover {
    background-color: #e10202; /* Rojo más claro */
    border-color: #ff5261;
}