/* Resetear márgenes y rellenos predeterminados del navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Línea decorativa debajo del título */
.borde-titulo {
    width: 100%;
    height: 2px;
    background-color: black;
    margin: 1% 0;
}

/* Contenedor principal del contenido */
.contenido {
    display: flex;
    width: 90%;
    margin: 0 5%; /* Centrar contenido */
}

/* Imagen dentro del contenido */
.contenido img {
    display: flex;
    align-content: flex-end;
    width: 50%;
}

/* Contenedor de texto con distribución en columna */
.contenido-texto {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-around;
    margin: 2%;
}

/* Estilo para subtítulos dentro del contenido */
.contenido-texto h2 {
    font-size: 1em;
}

/* Estilo para el logotipo y su contenedor */
.logo1 {
    width: 25%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 1.3em;
    font-weight: bold;
}

/* Color distintivo para una parte del logotipo */
.logo1 span {
    color: orange;
}

/* Imagen dentro del contenido de texto */
.contenido-texto img {
    width: 20%;
    display: flex;
}

/* Texto con estilo en cursiva y negrita */
.text1 {
    font-style: italic;
    font-weight: bold;
}

/* Contenedor de iconos de redes sociales */
.contenedor-social {
    display: flex;
    align-items: center; /* Centra los iconos verticalmente */
}

/* Estilos para los enlaces de redes sociales */
.enlace-social {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Tamaño del icono */
    height: 40px;
    margin: 0 0.5%; /* Espacio entre los iconos */
    color: #333; /* Color del icono */
    text-decoration: none; /* Elimina el subrayado del enlace */
}

/* Estilos para imágenes dentro de los enlaces sociales */
.enlace-social img {
    width: 24px;
    height: 24px;
    font-size: 24px; /* Ajusta el tamaño del icono */
}

/* Cambio de color al pasar el cursor sobre los iconos sociales */
.enlace-social:hover {
    color: #007bff; /* Cambia el color al pasar el ratón */
}