@keyframes move { 100% { transform: translate3d(0, 0, 1px) rotate(360deg); } }

.background { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: #f7f6f6; overflow: hidden; }
.background span { width: 31vmin; height: 31vmin; border-radius: 31vmin; backface-visibility: hidden; position: absolute; animation: move 32s linear infinite; }

@media (max-width: 768px) { .background span { width: 20vmin; height: 20vmin; animation-duration: 60s; } }
@media (max-width: 480px) { .background span { width: 15vmin; height: 15vmin; animation-duration: 80s; } }

.paso1 { margin-top: 70px; }
@media (max-width: 768px) { .paso1 { margin-top: 100px; } }
@media (max-width: 480px) { .paso1 { margin-top: 120px; } }

.paso2 { padding: 15px; }
.step-title, .form-group { margin-bottom: 20px; }
.step-title { color: #e51d20; font-size: 24px; text-align: center; }

@media (max-width: 768px) {
    .container.paso2 .row { margin-top: 100px; flex-direction: column; align-items: center; }
    .container.paso2 .col-4 { width: 100%; margin-bottom: 15px; }
    .container.paso2 .col-4:first-child, .container.paso2 .col-4:last-child { display: none; }
    .step-title { font-size: 20px; margin-bottom: 15px; margin-top: 100px; }
}

.paso3 { padding: 20px; }
.paso3 h1 { font-size: 24px; color: #e51d20; text-align: center; margin-bottom: 20px; }
.paso3 .row { margin-left: 0; margin-right: 0; }
.paso3 .col-4 { padding-left: 0; padding-right: 0; }
.paso3 .btn { width: 100%; }
.paso3 .form-control { margin-bottom: 15px; }
.paso3 #comentariosCarousel { margin-top: 20px; }
.paso3 .text-container h5 { font-size: 14px; text-align: center; }

@media (max-width: 767px) {
    .paso3 h1 { font-size: 20px; margin-bottom: 15px; margin-top: 100px; }
    .paso3 .col-4 { width: 100%; }
    .paso3 .btn, .paso3 .form-control { font-size: 16px; }
    .paso3 #comentariosCarousel { margin-top: 15px; }
    .paso3 .text-container h5 { font-size: 12px; }
}

.background span:nth-child(0) { color: #ababab; top: 81%; left: 99%; animation-duration: 139s; animation-delay: -21s; transform-origin: -12vw 5vh; box-shadow: 62vmin 0 8.365810180621809vmin currentColor; }

#ModalFormComentarios { z-index: 1050 !important; }
.modal-backdrop { z-index: 1040 !important; }
.modal-dialog { z-index: 1060 !important; }
.modal { top: 100px; }

.buskobtn { background-color: #E61610; height: 200px; font-size: 1.8rem; }
.buskobtn-normal { background-color: #E61610; }
a { pointer-events: auto; z-index: 10; }

.is-invalid { border-color: #dc3545; }
.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }
.invalid-feedback { color: #dc3545; }

#AyudanosCrecer { padding: 10px; }
#AyudanosCrecer h2 { font-size: 24px; text-align: center; color: black; white-space: nowrap; margin: 0; }

@media (max-width: 767px) {
    #AyudanosCrecer { padding: 5px; }
    #AyudanosCrecer h2 { font-size: 18px; }
}
@media (max-width: 575px) { #AyudanosCrecer h2 { font-size: 16px; } }

.paso5 { padding: 20px; }
.paso5 h1 { width: 100%; text-align: center; color: #e51d20; font-size: 24px; margin-bottom: 20px; }
.paso5 h5 { width: 100%; text-align: center; color: #444444; font-size: 18px; margin-top: 20px; }
.paso5 .btn { width: 100%; font-size: 16px; }
.paso5 .row { margin-left: 0; margin-right: 0; }
.paso5 .col-3, .paso5 .col-6 { padding-left: 0; padding-right: 0; }
.paso5 .table { width: 100%; margin-top: 20px; }

@media (max-width: 767px) {
    .paso5 h1 { font-size: 20px; margin-bottom: 15px; margin-top: 100px; }
    .paso5 h5 { font-size: 16px; margin-top: 15px; }
    .paso5 .btn { font-size: 14px; }
    .paso5 .col-3, .paso5 .col-6 { width: 100%; }
    .paso5 .form-control { font-size: 16px; }
    .paso5 .row.mt-5 { margin-top: 20px; }
}

.paso6 { padding: 20px; }
.paso6 .card { margin-top: 20px; }
.paso6 .card-body { background-color: white; padding: 20px; }
.paso6 .card-title { text-align: center; font-size: 2rem; color: #e51d20; margin-top: 20px; }
.paso6 p { color: gray; text-align: center; font-weight: 700; margin-top: 15px; }

@media (min-width: 768px) {
    .paso6 .col-4 { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }
}

@media (max-width: 767px) {
    .paso6 .col-4, .paso6 .col-3 { width: 100%; padding-left: 0; padding-right: 0; }
    .paso6 .card { margin-top: 15px; }
    .paso6 .card-title { font-size: 1.5rem; margin-top: 10px; }
    .paso6 p { font-size: 1rem; }
    .paso6 .row.mt-4 h2 { font-size: 1.2rem; }
}

/* Estilos para .paso4 */
.paso4 { padding: 20px; }
.paso4 h1 { width: 100%; text-align: center; color: #e51d20; font-size: 24px; margin-top: 20px; margin-bottom: 20px; }
.paso4 .row { margin-left: 0; margin-right: 0; }
.paso4 .col-12 { padding-left: 0; padding-right: 0; }
.paso4 .btn { width: 100%; }
.paso4 .form-control { margin-bottom: 15px; }
.paso4 #objetosPerdidosTable { width: 100%; margin-top: 20px; }
.paso4 h2 { width: 100%; text-align: center; color: #444444; font-size: 18px; margin-top: 30px; }

@media (max-width: 767px) {
    .paso4 h1 { font-size: 20px; margin-bottom: 15px; margin-top: 100px; }
    .paso4 .col-md-8 { width: 100%; }
    .paso4 .btn, .paso4 .form-control { font-size: 16px; }
    .paso4 h2 { font-size: 16px; }
    .paso4 .table-responsive { overflow-x: auto; }
}

@media (max-width: 575px) {
    .paso4 h1 { font-size: 18px; }
    .paso4 h2 { font-size: 14px; }
    .paso4 .btn, .paso4 .form-control { font-size: 14px; }
}

/* Estilos para el footer */
.footer {
    padding: 20px 0;
    background: none !important;
}

.footer-bottom {
    text-align: center;
}

.footer p {
    margin-bottom: 10px;
    font-size: 14px;
}

.social-links {
    margin-bottom: 10px;
}

.social-links a {
    display: inline-block;
    margin: 0 5px;
    color: #333;
    font-size: 20px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #E61610;
}

.footer .nav-link {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer .nav-link:hover {
    color: #E61610;
}

@media (max-width: 767px) {
    .footer {
        padding: 15px 0;
    }

    .footer p {
        font-size: 12px;
    }

    .social-links a {
        font-size: 18px;
    }

    .footer .nav-link {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 10px 0;
    }

    .footer p {
        font-size: 11px;
    }

    .social-links a {
        font-size: 16px;
        margin: 0 3px;
    }

    .footer .nav-link {
        font-size: 11px;
    }
}



.social-links {
    margin-top: 10px; /* Espaciado superior */
}
.social-links a {
    margin: 0 15px; /* Espaciado entre los iconos */
    color: #E61610; /* Color de los iconos */
    text-decoration: none; /* Sin subrayado */
    font-size: 24px; /* Tamaño del icono ajustado */
}
.social-links a:hover {
    color: #007bff; /* Color de hover */
}

.custom-whatsapp-btn {
    color: white !important; /* Cambia el color del texto */
    border: 2px solid white !important; /* Establece el borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px 20px; /* Ajuste de padding para el tamaño del botón */
    transition: background-color 0.3s ease, color 0.3s ease; /* Efecto al pasar el ratón */
    color: white
}

.custom-whatsapp-btn:hover {
    background-color: white !important; /* Fondo blanco al pasar el mouse */
    color: #000 !important; /* Texto negro al pasar el mouse */
}

.custom-whatsapp-btn:active {
    background-color: #f0f0f0 !important; /* Fondo al hacer clic */
    color: #333 !important; /* Texto gris oscuro al hacer clic */
}
