/* Estilo para el cuerpo de la página */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
    overflow-x: hidden; /* Evitar scroll horizontal */
    display: flex;
    justify-content: center; /* Centramos el contenido horizontalmente */
    align-items: center; /* Centramos el contenido verticalmente */
    min-height: 100vh; /* Altura mínima de la pantalla */
}

/* Contenedor de la imagen */
.contenedor-imagen {
    position: relative;
    width: 80%; /* Ancho adaptable para ajustarse a diferentes pantallas */
    max-width: 600px; /* Ancho máximo para asegurar que la imagen no sea demasiado grande */
    margin: 0 auto;  /* Centramos la imagen en el contenedor */
    text-align: center;
}

/* Imagen principal */
.contenedor-imagen img {
    width: 100%;
    height: auto; /* Ajuste de altura automático para evitar cortes */
    object-fit: contain;
}

/* Enlace invisible para la portada (parte superior de la imagen) */
.enlace-portada {
    position: absolute;
    top: 2%; /* Baja un poco el enlace desde la parte superior */
    left: 20%; /* Ajustar la posición para centrarlo */
    width: 60%; /* Reducir el ancho para hacerlo más estrecho */
    height: 13%; /* Ajustar la altura del área de clic */
    background: transparent; /* Invisible */
    z-index: 10;
}

/* Contenedor para los enlaces en la parte inferior */
.enlaces-inferiores {
    position: absolute;  /* Mantener la posición absoluta dentro del contenedor */
    bottom: -66px;  /* Ajustar el valor para colocar los enlaces en la parte inferior */
    left: 50%;
    transform: translateX(-50%); /* Centrar horizontalmente */
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-around;
    margin-bottom: 150px; /* Dejar un espacio debajo de los enlaces */
}

/* Estilo de los enlaces en la parte inferior */
.enlaces-inferiores a {
    display: inline-block;
    width: 15%; /* Reducir el ancho para mantenerlos en una sola línea */
    max-width: 80px; /* Limitar el ancho máximo */
    height: auto; /* Ajustar la altura automáticamente */
    padding: 10px; /* Espaciado interno */
    text-align: center;
    text-decoration: none;
    background-color: rgba(139, 0, 0, 0.3); /* Leve color translúcido para facilitar la visualización durante pruebas */
    color: #8B0000;
    font-family: Georgia, serif;
    font-size: 0.9em; /* Reducir tamaño de fuente */
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 10px;
    box-shadow: none;
    transition: color 0.3s ease;
}

/* Efecto hover para los enlaces inferiores */
.enlaces-inferiores a:hover {
    color: #FF2400; /* Cambiar el color al pasar el ratón */
}

/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 768px) {
    .contenedor-imagen {
        width: 90%; /* Más ancho en pantallas pequeñas */
    }

    .enlaces-inferiores a {
        width: 18%; /* Ajustar el ancho para pantallas más pequeñas */
        font-size: 0.8em; /* Reducir tamaño de fuente */
    }
}

@media (max-width: 480px) {
    .contenedor-imagen {
        width: 95%; /* Ocupa casi todo el ancho en móviles */
    }

    .enlaces-inferiores {
        flex-direction: row; /* Mantener en fila horizontal en móviles */
        justify-content: space-around; /* Ajustar espacio entre enlaces */
    }

    .enlaces-inferiores a {
        width: 22%; /* Ancho reducido para asegurar espacio suficiente */
        font-size: 0.7em; /* Reducir tamaño de fuente */
    }
}

/* Ocultar texto accesible para SEO */
.contenido-seo {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; /* Evita el quiebre de línea */
    border: 0;
    font-size: 0.8em; /* Reducir tamaño de fuente del texto oculto */
}