/* Resetear márgenes y rellenos predeterminados del navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que el tamaño de los elementos incluye padding y border */
}

/* Estilo del título principal */
.titulo h1 {
    display: flex;
    justify-content: center; /* Centra el texto horizontalmente */
    align-items: center; /* Centra el texto verticalmente */
    font-style: italic;
    font-size: 2.2em;
}

/* Línea divisoria debajo del título */
.borde-titulo {
    width: 100%;
    height: 2px;
    background-color: black; /* Color negro para la línea */
    margin: 1% 0; /* Espaciado arriba y abajo */
}

/* Contenedor principal con diseño flexible */
.contenido {
    display: flex;
    width: 90%;
    margin: 0 5%; /* Centra el contenido en la página */
    justify-content: space-between; /* Distribuye el contenido entre los elementos */
    height: 65vh; /* Establece una altura relativa para el contenedor */
}

/* Sección principal dentro del contenedor */
.contenido-principal {
    display: flex;
    flex-direction: column; /* Organiza los elementos en columna */
    width: 45%;
    justify-content: space-around; /* Distribuye el contenido verticalmente */
    font-family: Arial, Helvetica, sans-serif; /* Establece la fuente */
}

/* Título de la sección principal */
.contenido-principal h2 {
    font-size: 1.5em;
    font-weight: bold;
}

/* Estilo del primer párrafo en .texto1 */
.texto1 p:first-child {
    font-weight: bold;
    font-style: italic;
    margin-bottom: 2%; /* Espaciado debajo */
}

/* Estilo del primer párrafo en .texto2 */
.texto2 p:first-child {
    font-weight: bold;
    margin-top: 2%; /* Espaciado encima */
}

/* Estilo del tercer párrafo en .texto2 */
.texto2 p:nth-child(3) {
    font-weight: bold;
    margin-top: 2%; /* Espaciado encima */
}

/* Contenedor de los logos dentro del contenido */
.contenido-logo {
    display: flex;
    width: 100%;
}

/* Estilo para el logo principal */
.logo-principal {
    display: flex;
    position: absolute;
    width: 40%; /* Tamaño relativo al contenedor */
    height: 15%;
    justify-content: center;
    align-items: flex-end;
}

/* Imagen dentro del logo principal */
.logo-principal img {
    width: 60px;
    object-fit: contain; /* Mantiene la proporción de la imagen */
}

/* Contenedor para los logos secundarios */
.logo-secundarios {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px; /* Espaciado entre los logos */
}

/* Estilo de los logos secundarios */
.logo-secundarios img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    border-radius: 10px; /* Bordes redondeados en los logos */
}

/* Ocultar el icono de Telegram */
.telegram {
    height: 0; /* Hace invisible el icono de Telegram */
}

/* Ajuste del tamaño del icono de WhatsApp */
.whatsapp {
    height: 11vh;
}

/* Ajuste del tamaño del icono de Twitter */
.twitter {
    height: 20vh;
}

/* Ajuste del tamaño del icono de Instagram */
.instagram {
    height: 11vh;
}

/* Ocultar el icono de Facebook */
.facebook {
    height: 0vh; /* Hace invisible el icono de Facebook */
}

/* Contenedor para el contenido secundario */
.contenido-secundario {
    display: flex;
    flex-direction: column; /* Organiza los elementos en columna */
    width: 45%;
}

/* Estilo de los párrafos dentro de .contenido-secundario */
.contenido-secundario p {
    display: flex;
    justify-content: space-around; /* Distribuye el contenido de los párrafos */
    width: 100%;
    border: 1px solid black; /* Borde alrededor de los párrafos */
}

/* Estilo para el formulario */
.formulario {
    width: 90%;
    margin: 2%;
}

/* Espaciado entre los campos del formulario */
.campo {
    margin-bottom: 15px;
}

/* Estilo de las etiquetas en el formulario */
label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Estilo de los campos de entrada */
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
    width: 100%; /* Hace que los campos ocupen el 100% del contenedor */
    padding: 10px;
    border: 1px solid black;
    border-radius: 2px;
}

/* Permite redimensionar verticalmente el textarea */
textarea {
    resize: vertical;
}

/* Estilo de la caja de verificación */
.checkbox {
    display: flex;
    align-items: center; /* Alinea los elementos dentro de la caja */
}

/* Estilo de la etiqueta dentro de la caja de verificación */
.checkbox label {
    margin-left: 1%;
    font-weight: bold;
}

/* Estilo del botón */
button {
    float: right; /* Desplaza el botón hacia la derecha */
    background-color: #333; /* Fondo oscuro */
    color: white; /* Texto blanco */
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
    width: 40%;
}

/* Estilo del botón al pasar el ratón por encima */
button:hover {
    background-color: orange; /* Cambia el fondo a naranja */
    color: white; /* Mantiene el texto blanco */
}