@font-face {
    font-family: elnath;
    src: url('../font/ELNATH.ttf') format('truetype');
}

@font-face {
    font-family: robotoRegular;
    src: url('../font/RobotoMonoVariable.ttf') format('truetype');
}

@font-face {
    font-family: robotoItalic;
    src: url('../font/RobotoMonoItalic.ttf') format('truetype');
}

.fuenteModerna {
    font-family: elnath, sans-serif;
}

.fuenteAntigua {
    font-family: robotoRegular, sans-serif;
}

body {
    color: white;
    position: relative;
    background-color: #000;
    background-size: cover;
    background-repeat: no-repeat;
    /*opacity: 0.8; /* Ajusta el valor para controlar la opacidad */
}

.boton {
    background-color: #ff8800; /* Color de fondo naranja */
    color: white; /* Color de texto en el botón */
    border: 2px solid #ff8800;
    transition: all ease-in-out 0.3s;
    font-weight: 500;
    margin-left: 8px;
    margin-top: 2px;
    line-height: 1;
    font-size: 13px; 
    padding: 7px 22px; /* Espaciado interno del botón */
    border-radius: 50px; /* Bordes redondeados */
    
}

.boton2 {
    background-color: #000; /* Color de fondo negro */
    color: white; /* Color de texto en el botón */
    border: 2px solid #ff8800;
    transition: all ease-in-out 0.3s;
    font-weight: 500;
    margin-left: 8px;
    margin-top: 40px;
    line-height: 1;
    font-size: 13px; 
    padding: 7px 22px; /* Espaciado interno del botón */
    border-radius: 50px; /* Bordes redondeados */

}

.boton3 {
    background-color: #4d5270; /* Color de fondo negro */
    color: white; /* Color de texto en el botón */
    transition: all ease-in-out 0.2s;
    font-weight: 500;
    font-size: 16px; 
    padding: 13px 42px; /* Espaciado interno del botón */
    border-radius: 50px; /* Bordes redondeados */
    width: 300px;
}

.naranja {
    color: #ff8800;
}

.texto-bold {
    font-weight: bold;
}

.texto-gigante {
    font-size: 100px;
    margin-top: 160px;
}

.margen-mayor {
    margin-top: 150px;
}

.margen-dev {
    margin-top: 300px;
}

.margen-menor {
    margin-top: 60px;
}

.imagen-limitada {
    max-width: 255px;
    max-height: 191.25px;
}

.subtitulo {
    color: #9195A2;
}

.linea-horizontal {
    border-top: 5px solid #ff8800; /* 5px de ancho y color naranja */
    width: 60px; /* Ancho de la línea */
    margin: 20px auto; /* Margen para centrar la línea horizontal */
}

.linea-horizontal-fina {
    border-top: 2px solid #00FFFF; /* 600px de ancho y color turquesa */
    width: 1050px; /* Ancho de la línea */
    margin: 20px auto; /* Margen para centrar la línea horizontal */
}

.linea-horizontal-blanca {
    border-top: 1px solid #fff; /* 5px de ancho y color naranja */
    width: 60%; /* Ancho de la línea */
    margin: 20px auto 0; /* Margen para centrar la línea horizontal */
}

.linea-naranja-footer {
    border-top: 2px solid #ff8800; /* 5px de ancho y color naranja */
    width: 95%; /* Ancho de la línea */
}

.linea-gris-footer {
    border-top: 1px solid #4d5270; /* 5px de ancho y color naranja */
    width: 95%; /* Ancho de la línea */
    margin: 10px 0;
}



/* Sección FAQ */
.pregunta {
    /*position: relative;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

.pregunta-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pregunta-texto {
    flex: 1;
}

.acercandoIcono {
    margin-right: 16em;
}

.parrafo {
    margin-top: 20px;
    color: #ff8800;
    margin-left: 260px;
}

.texto-donweb {
    background-color: #ff8800;
    font-weight: 600;
    font-size: 24px;
}

.texto-dalto {
    font-size: 32px;
    
    font-style: italic;
    font-weight: 700;
    letter-spacing: -1px;
    margin-left: 10px;   
}

/* Ocultando los div mientras no actúe JS */
.contenido {
    display: none;
    width: 100%;
    padding: 20px;
    /*background-color: #f0f0f0;*/
}

/* Pintando de color el botón de Timeline seleccionado */
.boton-seleccionado {
    background-color: #ff8800;
    color: white;
}

/* Seteo de la imagen redonda del Timeline */
.imagen-redonda {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Hace que la imagen sea redonda */
    overflow: hidden; /* Oculta cualquier parte de la imagen fuera del círculo */
}

/* Alineando elementos del Timeline */
.margen-izq-timeline {
    margin-left: 120px;
}

/* Para poner fuentes itálicas */
.italica {
    font-style: italic;
}

/* ESTILOS FORMULARIO */

.formulario {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

.formulario .form-group,
.formulario .form-control,
.formulario select {
    margin: 10px;
    color: #f0f0f0; /* Color del texto "Selecciona tu país" del Select */
    border-radius: 0; /* Bordes cuadrados de los campos del formulario */
}

.formulario input,
.formulario select {
    background-color: #424242;
}

.formulario input::placeholder {
    color: #b0b0b0;
}

.form-control#paisSelect.selected {
    color: #000; /* Cambia el color según tu preferencia */
}

/* Efecto zoom a imágenes */
.imagen-zoom {
    transition: transform 0.3s ease;
}
  
.imagen-zoom:hover {
    transform: scale(1.03);
}

/* Sección hoteles */

/* Color a estrellas de hoteles  */
.stars {
    color: #ffc31d;
}

/* Ubicación de imagenes de los 3 hoteles */
.custom-centered-col {
    width: 30%;
    margin: 8px;
    text-align: start;
}

/* Presonalización de textos bajo los hoteles */
.texto-fondo {
    background-color: white;
    padding: 10px;
    border-radius: 50;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.texto-fondo h3 a {
    color: black;
    text-decoration: none;
}

.texto-fondo p {
    color: black;
}

.texto-fondo {
    color: black;
}

.circulo {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: none;
}
  
.volver-arriba {
    color: white;
    text-decoration: none;
    font-size: 18px;
    background-color: #ff8800;
    border-radius: 50%;
    width: 40px; /* Ancho igual a la altura para crear un círculo perfecto */
    height: 40px; /* Ajusta el valor según tu preferencia */
    line-height: 40px; /* Centra el icono verticalmente en el círculo */
    text-align: center; /* Centra el icono horizontalmente en el círculo */
    display: block;
}

footer {
    background-color: #000;
    color: white;
    padding: 20px 0;
 }
  
.footer-contenido {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
 }
  
.full-ancho {
    grid-column: span 4;
    margin-top: 80px;
    text-align: center;
 }
  
.fuente-footer {
    font-size: 14px;
}

/* Estilo para los puntos de las listas */
.footer-contenido ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  .footer-contenido ul li::before {
    content: ">";
    color: #ff8800;
    margin-right: 10px;
  }