@font-face {
    font-family: 'novios';
    src: url('../fonts/NanumMyeongjo-Regular.ttf') format('woff2'), url('fonts/NanumMyeongjo-Regular.woff') format('woff');
    font-weight: normal; /* Ajusta según el peso de la fuente */
    font-style: normal; /* Ajusta según el estilo de la fuente */
}


body {
    background-image: url('../imgs/fondoPapel.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
   
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html, body {
  margin:0;
  padding:0;
  width:100%;
  font-size:15px;
}

.form-confirmacion {
    background-color: hsl(20, 20%, 20%, 0.10); /* Blanco con 50% de transparencia */
    font-family: 'novios';
    font-size:20px;
    font-weight:normal;
}


.custom-btn {
    background-color: hsl(20, 20%, 20%, 0.10);
}

    .btn:hover {
        color: white;
    }

.button:active {
    background-color: #0056b3; /* Color al hacer clic */
}

/* Estilo para el mensaje de carga */
#loading {
    display: none; /* Ocultar inicialmente */
    font-weight: bold;
    margin-bottom: 10px;
}
/* Estilo para el spinner */
.spinner {
    display: none;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

#logoBoda {
    width: 250px; /* Ajusta este valor según se vea mejor */
    animation: pulsar 2s ease-in-out infinite;

}
/* Fondo blanco que cubre toda la pantalla */
#loader {
    position: fixed; /* Fijo en pantalla */
    top: 0;
    left: 0;
    width: 100vw; /* Ancho completo */
    height: 100vh; /* Alto completo */
    background-image: url('/imgs/fondoPapel.jpg');
    z-index: 9999; /* Siempre encima */
    display: flex; /* Flex para centrar */
    justify-content: center; /* Centra horizontal */
    align-items: center; /* Centra vertical */
    transition: opacity 1s ease;
    opacity: 1;
}


    #loader.fade-out {
        opacity: 0;
    }


/* Animación suave de latido */
@keyframes pulsar {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.15);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}