/* VARIABLES DEFINIDAS */
:root { 
    --ColorFondo: #F3F4F6; /* Fondo claro y neutro */
    --ColorPrincipal: #FB0F1D; /* Rojo chino */
    --ColorSecundario: #FF5733; /* Naranja vibrante */
    --ColorTerciario: #FFD700; /* Dorado brillante */
    --ColorBotones: #28A745; /* Verde */
    --ColorPequenosDetalles: #007BFF; /* Azul brillante */
}

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

body {
    font-family: 'Open Sans', Arial, sans-serif;
    color: #000;
    line-height: 1.6;
    background-color: var(--ColorFondo);
}

/* CABECERA */
header {
    color: #fff;
    max-width: 1080px;
    margin-right: auto;  /* Centra el elemento horizontalmente */
    margin-left: auto;   /* Centra el elemento horizontalmente */ 
}

header a {
    color: #fff;
}

.titulo-logo {
    max-width: 1080px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    color: black;
}

.titulo-logo-text {
    width: 75%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.titulo-logo img {
    width: 30%;
    height: auto;
    margin-right: 50px;
}

    .logoCabecera {
        box-shadow: none; /* Para eliminar cualquier sombra de la caja */
    }
    
    .logoSinSombra{
        box-shadow: none; /* Para eliminar cualquier sombra de la caja */
    }

.titulo-logo h1 {
    margin: 0;
    font-size: 40px;
    margin-left: 50px;
    text-align: left;
    font-family: 'Georgia', serif;
    font-family: 'Noto Serif SC', serif;
}

.titulo-logo h2 {
    margin: 0;
    font-size: 30px;
    text-align: right;
    margin-right: 50px;
    margin-bottom: 20px;
    font-family: 'Georgia', serif;
    font-family: 'Noto Serif SC', serif;
    color: var(--ColorPrincipal);
}

/* MENU NAVEGACION */
nav ul {
    background: var(--ColorPrincipal);
    background: black;
    list-style: none;
    margin: 0;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    font-family: 'Noto Sans SC', sans-serif;
}

nav li {
    margin-top: 20px;
    margin-bottom: 10px;
    font-family: 'Noto Sans SC', sans-serif;
}

nav a {
    text-decoration: none;
    color: #fff;
    padding-left: 20px;
    font-size: 16px;
}

nav a:hover {
    text-decoration: underline; /* Añade subrayado al pasar el ratón por encima */
    text-underline-offset: 3px; /* Ajusta el margen entre el texto y el subrayado */
    text-decoration-thickness: 2px; /* Ajusta el grosor del subrayado */
    color: var(--ColorSecundario);
}

/* Media query para pantallas pequeñas */
@media (max-width: 800px) {
    .titulo-logo {
        flex-direction: column;
        align-items: flex-start;
    }

    .titulo-logo img {
        width: 50%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .titulo-logo h1 {
        font-size: 40px;
        margin-left: 0;
        text-align: center;
    }

    .titulo-logo h2 {
        font-size: 20px;
        text-align: center;
        margin-right: 0;
    }

    nav ul {
        flex-direction: column;
        justify-content: center;
    }

    nav li {
        margin-right: 0;
    }
}

/* CONTENIDO PAGINA */
main {
    text-align: center;
    margin-top: 10px;
    max-width: 1000px;
    margin-right: auto;  /* Centra el elemento horizontalmente */
    margin-left: auto;   /* Centra el elemento horizontalmente */
}

section {
    margin-top: 20px;
    background: #fff;
    border-radius: 18px;
}

.secciones {    
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: justify;
    direction: ltr;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.secciones h2,
.secciones h3,
.secciones p {   
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    direction: ltr;
    font-size: 18px;
}

.descripcion {
    display: inline;
    font-size: inherit;
    direction: ltr;
    font-size: 18px;
}

.descripcionEspecialNosotros {
    font-size: inherit;
    direction: ltr;
    font-size: 18px;
    padding-left: 40px !important;
    padding-right: 40px !important;
}

.hX-inline {
    display: inline;
    font-size: inherit;
    direction: ltr;
    font-size: 18px;
}

.titulillo {    
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 26px !important; /* Tamaño de fuente forzado */
}

.tituloTuneado {
    color: #555;
    text-shadow: 2px 2px 8px rgba(120, 120, 120, 0.5);
}

.secciones blockquote {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: right;
    direction: ltr;
}

img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cajaVariasImgHorizontal {
    display: flex;
    gap: 20px;
    justify-content: center; /* Centrar horizontalmente */
    width: 100%;
    box-sizing: border-box;
}

.imagenEnDescripcionGeneralUna {
    border-radius: 5px;
    width: calc(70% - 80px); /* Ajusta el ancho para encajar en el contenedor flex incluyendo el espacio */
    height: auto;
}

.imagenEnDescripcionGeneralDos {
    border-radius: 5px;
    width: calc(45% - 10px); /* Ajusta el ancho para encajar en el contenedor flex incluyendo el espacio */
    height: auto;
    margin-right: 30px;
}

.imagenEnDescripcionGeneralTres {
    border-radius: 5px;
    width: calc(33.33% - 13.33px); /* Ajusta el ancho para encajar en el contenedor flex incluyendo el espacio */
    height: auto;
}

.imagenEnDescripcionGeneralCuatro {
    border-radius: 5px;
    width: calc(25% - 15px); /* Ajusta el ancho para encajar en el contenedor flex incluyendo el espacio */
    height: auto;
}

.contenedor-nosotros {
    display: flex; /* Activa flexbox para el contenedor */
    justify-content: space-between; /* Distribuye el espacio entre los elementos internos */
    align-items: center; /* Alinea verticalmente los elementos internos */
    padding: 10px; /* Añade espacio alrededor del contenedor */
    align-items: stretch; /* Ajusta la altura de los dos contenedores por igual */
}

.nosotros-contenedor {
    width: 48%; /* Ajusta el ancho para que ambos divs quepan en línea */
    text-align: center; /* Centra el texto dentro de cada div interno */
    padding: 20px; /* Añade espacio dentro de cada div interno */
}

.nosotros-Img {
    width: 300px; /* Establece el ancho de las imágenes */
    height: auto; /* Mantiene la proporción de las imágenes */
    max-width: 100%; /* Asegura que la imagen no sobrepase el ancho del contenedor */
    border-radius: 100%;
}

/* Media query para pantallas pequeñas */
@media (max-width: 600px) {
    .contenedor-nosotros {
        flex-direction: column; /* Cambia la disposición a vertical */
    }
    .nosotros-contenedor {
        width: auto; /* Permite que cada div interno ocupe el ancho completo del contenedor */
        margin-bottom: 10px; /* Añade espacio entre los divs cuando están en columna */
    }
    .nosotros-Img {
        width: 100%; /* Asegura que la imagen no sobrepase el ancho del contenedor */
    }

    .secciones {
        padding: 20px; /* Reduce el padding para pantallas más pequeñas */
        font-size: 16px; /* Reduce el tamaño de la fuente para pantallas más pequeñas */
    }

    .cajaVariasImgHorizontal {
        flex-direction: column; /* Cambia la disposición a vertical */
        gap: 10px; /* Reduce el espacio entre las imágenes */
    }

    .imagenEnDescripcionGeneralUna,
    .imagenEnDescripcionGeneralDos,
    .imagenEnDescripcionGeneralTres,
    .imagenEnDescripcionGeneralCuatro {
        width: 100%; /* Asegura que las imágenes no sobrepasen el ancho del contenedor */
        margin: 0 auto; /* Centra las imágenes */
    }
}

/* EL PIE DE LA PAGINA */
footer {
    background-color: black; /* Color de fondo del footer */
    color: white; /* Color del texto */
    text-align: center; /* Centra el contenido */
    padding: 20px 0; /* Añade relleno arriba y abajo */
    margin-top: 20px;
}

footer ul {
    list-style: none; /* Quita los estilos de lista */
    padding: 0; /* Quita el relleno */
    margin: 10px 0 0; /* Añade un margen arriba */
}

footer li {
    display: inline; /* Muestra los elementos de la lista en línea */
    margin: 0 10px; /* Añade margen a los lados de cada elemento */
}

footer a {
    color: var(--ColorTerciario); /* Color de los enlaces */
    text-decoration: none; /* Quita el subrayado de los enlaces */
}

footer a:hover {
    text-decoration: underline; /* Añade subrayado al pasar el ratón por encima */
}