/* General Styles */
body {
    width: 100%;
    font-size: 1em;
    margin: 0 auto;
    font-family: 'Georgia', serif;
    background-color: #e8e8e8; /* Fondo gris suave para un ambiente tranquilo */
    color: #2c3e50; /* Texto oscuro y elegante */
    line-height: 1.6;
    box-sizing: border-box;
}

.container {
    background-color: #ffffff; /* Fondo blanco */
    padding: 2em;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 0 auto;
}

h1 {
    font-size: 2.5em; /* Tamaño del texto reducido para un enfoque más sutil */
    margin-bottom: 0.5em;
    color: #6f4c3e; /* Color café para el título */
    font-family: 'Merriweather', serif; /* Fuente serif elegante y moderna */
    text-align: center; /* Centrar el título */
    text-transform: uppercase; /* Transformar a mayúsculas */
    letter-spacing: 4px; /* Espaciado entre letras más reducido */
    background: linear-gradient(to right, #e67e22, #d35400); /* Degradado de fondo en tonos anaranjados */
    -webkit-background-clip: text; /* Clip de fondo para texto */
    -webkit-text-fill-color: transparent; /* Color de texto transparente */
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); /* Sombra más sutil */
    padding: 1em; /* Espaciado dentro del título */
    border-bottom: 4px solid #b65c3c; /* Línea inferior más delgada */
    transition: all 0.3s ease; /* Transición suave para efectos */
    position: relative; /* Para efectos de pseudo-elementos */
}

/* Añadir un efecto de hover */
h1:hover {
    transform: scale(1.05); /* Aumentar ligeramente el tamaño al pasar el ratón */
    text-shadow: 6px 6px 10px rgba(0, 0, 0, 0.5); /* Intensificar la sombra al pasar el ratón */
}

/* Añadir un efecto de antes y después para mayor elegancia */
h1::before,
h1::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 8px; /* Altura de la línea */
    background-color: #b65c3c; /* Color de la línea */
    left: 0;
    transition: all 0.3s ease; /* Transición suave para efectos */
    border-radius: 5px; /* Bordes redondeados para un toque más suave */
}

h1::before {
    top: -8px; /* Línea arriba del título */
}

h1::after {
    bottom: -8px; /* Línea abajo del título */
}

h1:hover::before {
    top: -4px; /* Movimiento suave hacia abajo al pasar el ratón */
}

h1:hover::after {
    bottom: -4px; /* Movimiento suave hacia arriba al pasar el ratón */
}

h2 {
    font-family: 'Playfair Display', serif; /* Fuente elegante */
    margin: 0.5em 0;
    font-size: 1.8em; /* Tamaño reducido para que sea más pequeño que h1 */
    font-weight: 600; /* Negrita para énfasis */
    margin-bottom: 1em; /* Separación inferior */
    line-height: 1.4; /* Mejora la legibilidad */
    color: #6f4c3e; /* Color café para que combine con h1 */
    padding: 1em 1.5em; /* Espaciado mejorado */
    border-left: 8px solid #e67e22; /* Azul patriota más ancho, cambiando por un tono que combine */
    background-color: rgba(245, 179, 66, 0.1); /* Fondo más claro que el de h1 */
    text-align: left;
    transition: background-color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones más suaves */
    border-radius: 8px; /* Bordes redondeados para un toque moderno */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada */
    position: relative; /* Para efectos de sombra */
}

h2::before {
    content: ""; /* Elemento decorativo */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.1); /* Efecto de brillo suave */
    border-radius: 8px; /* Coincide con el borde del h2 */
    z-index: 0; /* Detrás del texto */
}

h2:hover {
    background-color: rgba(245, 179, 66, 0.2); /* Cambio de fondo al pasar el ratón */
    transform: translateY(-5px); /* Desplazamiento hacia arriba al pasar el ratón */
    cursor: pointer; /* Indica interactividad */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Aumenta la sombra al pasar el ratón */
    z-index: 1; /* Trae el texto al frente */
}

h2:hover::before {
    background: rgba(255, 255, 255, 0.3); /* Efecto de brillo más intenso al pasar el ratón */
}

h3 {
    font-family: 'Playfair Display', serif; /* Fuente elegante que combine */
    font-size: 1.5em; /* Tamaño adecuado para h3 */
    color: #6f4c3e; /* Color café que combina con h1 y h2 */
    margin: 0.5em 0; /* Espaciado vertical */
    text-align: left; /* Alineación a la izquierda */
    line-height: 1.4; /* Mejora la legibilidad */
    padding: 0.5em; /* Espaciado interno */
    transition: transform 0.3s ease, color 0.3s ease; /* Transiciones suaves */
}

/* Añadir un efecto de hover */
h3:hover {
    transform: scale(1.05); /* Aumentar ligeramente el tamaño al pasar el ratón */
    color: #d35400; /* Cambiar el color al pasar el ratón para un efecto de interacción */
    cursor: pointer; /* Indica que es interactivo */
}

h4 {
    font-family: 'Georgia', serif; /* Tipografía clásica y elegante */
    font-size: 1.8rem; /* Tamaño ligeramente mayor para destacar */
    color: #2c3e50; /* Color gris oscuro para un contraste suave */
    margin: 20px 0; /* Espaciado superior e inferior */
    padding: 10px; /* Espacio interno para un mejor aspecto */
    border-left: 4px solid #2980b9; /* Línea de acento a la izquierda */
    background-color: #ecf0f1; /* Fondo suave para resaltar el texto */
    text-transform: uppercase; /* Texto en mayúsculas para un toque formal */
    letter-spacing: 1px; /* Espaciado entre letras para mayor legibilidad */
    transition: all 0.3s ease; /* Transición suave para efectos futuros */
}

h4:hover {
    color: #2980b9; /* Cambio de color al hacer hover */
    background-color: #bdc3c7; /* Cambio de fondo al hacer hover */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
}

h5 {
    font-family: 'Georgia', serif; /* Elegante tipo de letra */
    font-size: 1.5rem; /* Tamaño de fuente adecuado */
    color: #2c3e50; /* Color oscuro para un contraste suave */
    letter-spacing: 0.5px; /* Espaciado de letras para mayor legibilidad */
    margin: 20px 0; /* Espaciado vertical */
    border-bottom: 2px solid #e67e22; /* Línea inferior sutil */
    padding-bottom: 10px; /* Espacio entre el texto y la línea */
    transition: color 0.3s ease; /* Transición suave en el color */
}

h5:hover {
    color: #e67e22; /* Cambio de color al pasar el cursor */
}

/* Párrafos */
p {
    font-size: 1.2em; 
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 1em;
    color: #2c3e50; /* Color de texto oscuro */
}

/* Listas elegantes */
ul {
    list-style: none; 
    margin: 1.2em 0; 
    padding-left: 2em; 
    max-width:95%;
}

li {
    font-size: 1.2em; /* Aumentar tamaño de fuente */
    margin-bottom: 0.8em; /* Espacio entre elementos */
    position: relative;
    background-color: white; /* Color de fondo suave */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: background-color 0.3s; /* Animación suave al pasar el ratón */
}

li:hover {
    background-color: #f0e68c; /* Color de fondo al pasar el ratón */
}


/* Bloques destacados */
blockquote {
    font-size: 1.2em; 
    font-style: italic;
    color: #555;
    border-left: 5px solid #2980b9;
    padding-left: 1rem;
    margin: 1.5em 0;
}

/* Tablas */
table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff; /* Fondo blanco */
    border: 1px solid #ddd; 
    margin: 2em 0;
}

thead {
    background-color: #2980b9; /* Azul para el encabezado */
    color: black; /* Texto blanco para el encabezado */
    text-align: left;
    font-weight: bold;
}

th, td {
    padding: 0.75em;
    border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
    background-color: #f2f2f2; /* Fondo gris claro para filas pares */
}

tr:hover {
    background-color: #eaeaea; /* Color al pasar el ratón */
}

/* Imágenes */
img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin: 1.5em 0;
}

/* Formularios */
form {
    margin: 1.5em 0;
}

input, select, textarea {
    width: 100%;
    padding: 0.75em;
    margin: 0.5em 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

button {
    padding: 0.75em 1.5em;
    font-size: 1em;
    background-color: #e67e22; /* Color naranja */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #d35400; /* Naranja más oscuro */
}

/* Enlaces */
a {
    color: #2980b9; /* Color azul */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #1f618d; /* Azul más oscuro al pasar el ratón */
}

/* Separadores */
hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 2em 0;
}

.footer {
    width: 100%;
    background-color: #2c3e50; /* Fondo oscuro */
    color: #ecf0f1; /* Texto claro */
    text-align: center;
    padding: 30px 0;
    box-shadow: 0 -4px 10px rgba(44, 62, 80, 0.2);
    border-top: 3px solid #e67e22; /* Línea superior naranja */
    font-size: 1em;
}

/* Responsividad */
@media (max-width: 768px) {
    .container {
        padding: 1.5rem;
    }

    h1 {
        font-size: 2em; 
    }

    h2 {
        font-size: 1.5em; 
    }

    p {
        font-size: 1em; 
    }
    
    li {
        font-size: 1em; 
    }    
    
    h5 {
        font-size: 1.2em; 
    }  
}

/* Estilo principal del artículo */
.articulo {
    display: flex;
    align-items: center;
    background-color: #ffffff; /* Color de fondo blanco */
    border: 1px solid #e0e0e0; /* Borde sutil gris claro */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interior más amplio */
    margin: 15px 0; /* Margen superior e inferior */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
    transition: transform 0.2s ease, box-shadow 0.3s ease; /* Transición suave al interactuar */
}

.articulo:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el cursor */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Sombra más pronunciada al hover */
}

/* Estilo de enlaces dentro del artículo */
.articulo a {
    text-decoration: none; /* Sin subrayado en los enlaces */
    color: #34495e; /* Color de texto oscuro y elegante */
    display: flex; /* Flex para alinear contenido */
    flex-grow: 1; /* Para que el enlace ocupe todo el espacio */
}

/* Estilo de imágenes dentro del artículo */
.articulo img {
    max-width: 120px; /* Ancho máximo de la imagen más pequeño para un look más elegante */
    height: auto; /* Altura automática */
    border-radius: 5px; /* Bordes de imagen redondeados */
    margin-right: 20px; /* Espaciado entre imagen y texto */
    transition: transform 0.2s ease; /* Transición para el efecto de imagen */
}

.articulo img:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el cursor sobre la imagen */
}

/* Estilo del título del artículo */
.articulo h5 {
    font-size: 1.5em; /* Tamaño de fuente para el título más grande */
    margin: 0 0 8px; /* Márgenes para el título */
    color: #2c3e50; /* Color de título oscuro */
    font-weight: bold; /* Negrita para mayor énfasis */
    line-height: 1.2; /* Espaciado entre líneas */
}

/* Estilo del párrafo en el artículo */
.articulo p {
    margin: 0; /* Sin márgenes para el párrafo */
    font-size: 1em; /* Tamaño de fuente para la descripción */
    color: #7f8c8d; /* Color de texto más claro para la descripción */
    line-height: 1.5; /* Espaciado entre líneas */
}

/* Estilo general para la imagen principal del artículo */
.articulo-imagen {
    width:95%;
    max-width:350px;
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 8px; /* Bordes redondeados para un acabado suave */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
    display: block; /* Bloque para centrar la imagen */
    margin: 20px auto; /* Margen superior e inferior, centrado horizontalmente */
    transition: transform 0.3s ease; /* Transición suave para el efecto hover */
}

/* Efecto hover para la imagen */
.articulo-imagen:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el cursor */
}

/* Estilo para el contenedor de la imagen */
.articulo-imagen-container {
    text-align: center; /* Centra la imagen y el texto asociado */
    padding: 5px 10px; /* Espaciado interno para separar del borde */
    background-color: #f9f9f9; /* Color de fondo suave */
    border: 1px solid #e0e0e0; /* Borde sutil */
    border-radius: 8px;
    max-width:95%;/* Bordes redondeados del contenedor */
}

        .key-influences {
            font-weight: bold;
            font-size: 1.2em;
            color: #2c3e50;
        }