@font-face {
font-family: 'DesirePRO';
src: url(DesirePro.otf);
}

/* Fuente secundaria: Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
background: black;
font-family: 'Roboto', sans-serif; /* Fuente general */
color: white;
opacity: 0; /* Empezamos con el cuerpo invisible */
animation: fadeIn 2s ease-in-out forwards; /* Animación de aparición gradual */
}

/* Estilos para logo a la izquierda */
.logo {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: auto;
padding: 0;
margin: 0;
box-sizing: border-box;
}

.left-image {
width: 100px; 
/* Ancho fijo de la imagen */
height: auto; 
/* Ajusta la altura automáticamente */
object-fit: contain; 
/* Asegura que la imagen no se distorsione */
margin: 0; /* Elimina cualquier margen */
}

/* Estilos menú de idiomas */
.language-menu {
display: flex;
gap: 10px; 
/* Espaciado entre las opciones del menú */
justify-content:flex-end;
width:100%;
margin-right: 20px; 
/* Margen opcional para separar del borde derecho */
}

.language-menu a {
text-decoration: none;
color: #eac5a3; 
font-size: 1em;
font-weight: bold;
margin-right: 10px;
}

/* Animación para el desvanecimiento de la página */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* Aplicar DesirePRO solo al h1 */
h1 {
font-family: 'DesirePRO', serif !important;
}

div, p, h2, h3, h4, span {
color: inherit;
}

h1, h2, h3, h4 {
font-family: 'Roboto', sans-serif;
}

.social-icon i.fab, .social-icon i.fas {
font-style: normal;
font-family: 'FontAwesome';
font-size: 1em;
color: white;
}

.social-icon a {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-color: white;
}

.d-flex {
flex-wrap: wrap;
}

.row.align-items-center.texto-imagen {
flex-wrap: wrap-reverse;
width: 100%;
padding: 10px;
}

.form-container {
max-width: 500px;
margin: 0 auto;
background-color: transparent;
}

.form-container .form-label,
.form-container .form-control {
font-family: inherit;
font-size: inherit;
color: inherit;
}

.form-container .form-control {
background-color: transparent;
border-color: #ff4d4d;
box-shadow: 0 0 5px rgba(255, 77, 77, 0.5);
}

.form-container .form-control:focus {
border-color: #ff1a1a;
box-shadow: 0 0 5px rgba(255, 26, 26, 0.75);
}

.iframe-button, .form-container .btn-submit {
display: inline-block;
padding: 10px 20px;
background-color: #ff4d4d;
color: white;
text-align: center;
border-radius: 5px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: unset!important;
border: none!important;
}

.iframe-button:hover, .form-container .btn-submit:hover {
background-color: #d63e3e;
transform: scale(1.05);
}

/* Estilo para la animación de los botones y otros elementos */
.iframe-button, .form-container .btn-submit {
opacity: 0;
animation: fadeIn 2s ease-in-out forwards;
animation-delay: 1s; /* Retraso para los botones */
}

.custom-list {
list-style-type: none;
padding: 0;
}

.custom-list li {
text-align: center;
position: relative;
padding-left: 25px;
}

.custom-list li::before {
content: '\2605';
position: absolute;
left: 0;
top: 0;
font-size: 1.5em;
color: #FFD700;
}

.star {
color: #FFD700;
font-size: 1.2em;
margin: 0 8px;
}

.social-icon {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid white;
border-radius: 50%;
text-decoration: none;
color: white;
font-size: 1.5em;
transition: all 0.3s ease;
}

.social-icon:hover {
background-color: #343a40;
border-color: #ff4d4d;
}

.social-icon i {
font-size: 1.5em;
}

.social-icon span {
visibility: hidden;
}

.d-flex {
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

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

.social-icon:hover {
transform: scale(1.1);
}