/* Variables de color */
:root {
    --pay-blue: #00457C; /* Azul oscuro */
    --pal-blue: #0079C1; /* Azul claro */
    --black: #000000; /* Negro */
    --white: #FFFFFF; /* Blanco */
    --yellow: #FFC107; /* Amarillo */
}

/* Estilos generales del body */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--black);
    background-color: var(--white);
    padding-top: 56px; /* Espacio para la barra de navegación */
    min-height: 100vh; /* Asegura que el body ocupe al menos el 100% de la altura de la ventana */
    position: relative; /* Necesario para el overlay */
}

/* Gradiente de fondo para el body */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(90deg, rgb(32,41,67) 0%, transparent 59%),
        repeating-linear-gradient(45deg, rgba(168, 168, 168, 0.1) 0px, rgba(168, 168, 168, 0.1) 1px, transparent 1px, transparent 13px),
        repeating-linear-gradient(135deg, rgba(168, 168, 168, 0.1) 0px, rgba(168, 168, 168, 0.1) 1px, transparent 1px, transparent 13px),
        linear-gradient(90deg, rgb(32,41,67), rgb(32,41,67));
    background-size: cover; /* Ajusta el gradiente para cubrir toda la página */
    background-position: center; /* Centra el gradiente */
    z-index: -1; /* Coloca el fondo detrás de todo el contenido */
}

/* Estilos para la sección principal */
.brochure-section {
    background-color: var(--white); /* Fondo blanco para la sección */
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px auto 10px; /* Margen superior de 20px, inferior de 10px, centrado horizontalmente */
    max-width: 900px;
    position: relative; /* Asegura que la sección esté por encima del fondo */
    z-index: 1; /* Coloca la sección por encima del fondo */
}

/* Estilos para la imagen dentro de la sección */
.brochure-section img {
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Estilos para el título de la sección */
.brochure-section h2 {
    color: var(--pay-blue);
    font-weight: bold;
    margin-bottom: 20px;
}

/* Estilos para los párrafos dentro de la sección */
.brochure-section p {
    font-size: 1.1em;
    line-height: 1.6;
}

/* Estilos para el botón "Volver" */
.btn-leer-mas {
    background-color: var(--yellow); /* Fondo amarillo */
    color: var(--black); /* Texto negro */
    padding: 12px 30px; /* Más padding para un aspecto rectangular */
    border: none; /* Sin borde */
    border-radius: 25px; /* Bordes redondeados */
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    font-size: 0.8em; /* Tamaño de fuente */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /* Texto en mayúsculas */
    transition: all 0.3s ease; /* Transición suave para todos los efectos */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    position: relative; /* Necesario para el efecto ::after */
    overflow: hidden; /* Oculta el desbordamiento del efecto ::after */
    z-index: 1; /* Asegura que el texto esté por encima del efecto */
}

/* Efecto hover para el botón "Volver" */
.btn-leer-mas:hover {
    color: var(--white); /* Texto negro al hacer hover */
}

/* Efecto del botón cuatro */
.btn-leer-mas::after {
    content: "";
    width: 1px;
    height: 1px;
    background: none;
    position: absolute;
    z-index: -1; /* Coloca el efecto detrás del texto */
    top: 50%;
    left: 50%;
    transition: .3s ease-in-out all;
    border-radius: 100px;
    transform-origin: center;
}

.btn-leer-mas:hover::after {
    transform: scale(400);
    background: var(--pal-blue); /* Color azul claro de la paleta */
}

/* Estilos para la sección de detalles */
.details {
    margin-top: 30px;
}

/* Estilos para el título de la sección de detalles */
.details h3 {
    color: var(--pay-blue);
    font-weight: bold;
    margin-bottom: 20px;
}

/* Estilos para la lista dentro de la sección de detalles */
.details ul {
    list-style-type: disc;
    padding-left: 20px;
}

/* Estilos para los elementos de la lista */
.details ul li {
    margin-bottom: 10px;
}

/* Footer fijo en la parte inferior */
footer {
    background-color: var(--pay-blue);
    color: var(--white);
    text-align: center;
    padding: 10px 0;
    position: fixed; /* Footer fijo en la parte inferior */
    width: 100%;
    bottom: 0;
    z-index: 1000; /* Asegura que el footer esté por encima de otros elementos */
}

/* Estilos para los párrafos dentro del footer */
footer p {
    margin: 0;
}

/* Estilos para los enlaces dentro del footer */
footer a {
    color: var(--yellow);
    text-decoration: none;
}

/* Efecto hover para los enlaces dentro del footer */
footer a:hover {
    text-decoration: underline;
}

/* Ajuste para el contenido principal */
main {
    margin-bottom: 100px; /* Espacio para el footer fijo */
}