/**
 * ==========================================================================
 * BLOG - ESTILOS ESPECÍFICOS (blog.css)
 * ==========================================================================
 * Contiene exclusivamente los estilos de la sección del Blog.
 * Los estilos de Header, Footer y variables se importan de global.css.
 * ==========================================================================
 */

/* ==========================================================================
 * MEJORAS DE ACCESIBILIDAD (WCAG 2.2 AA)
 * ========================================================================== */
/* Indicador de foco exclusivo para navegación por teclado */
:focus-visible {
    outline: 3px solid var(--color-verde-acento, #28CC43) !important;
    outline-offset: 4px !important;
    border-radius: inherit; /* Respeta los bordes redondeados del botón */
}

[data-theme="light"] :focus-visible {
    outline: 3px solid #000957 !important;
}

/* ==========================================================================
 * 1. ESTILOS BASE (Escritorio y compartidos)
 * ========================================================================== */

/* Contenedor principal de la página */
.page-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 55vh; /* Mantiene la caja centrada verticalmente sin empujar el footer */
    padding: 60px 20px;
}

/* Caja central de contenido (Efecto Glassmorphism / Futurista) */
.content-box {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.05); /* Fondo semitransparente oscuro */
    padding: 50px;
    border-radius: 12px;
    border: 1px solid rgba(40, 204, 67, 0.3); /* Borde sutil verde neón */
    max-width: 700px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Sombra suave para dar profundidad */
}

/* Título principal de la sección */
.content-box h1 {
    font-size: 2.5rem;
    color: var(--color-verde-acento);
    margin-bottom: 20px;
}

/* Párrafo descriptivo */
.content-box p {
    font-size: 1.1rem;
    color: var(--color-texto-claro); /* Uso de variable global */
    margin-bottom: 15px;
}

/* Botón de acción (Ej: "Volver al Inicio" o "Leer más") */
.btn-return {
    display: inline-block;
    margin-top: 30px;
    background-color: transparent;
    border: 2px solid var(--color-verde-acento);
    padding: 10px 30px;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
}

/* Efecto Hover del botón */
.btn-return:hover {
    background-color: var(--color-verde-acento);
    color: var(--color-blanco);
    box-shadow: 0 4px 15px rgba(40, 204, 67, 0.4); /* Resplandor (glow) tecnológico */
}

/* ==========================================================================
 * 2. DISEÑO RESPONSIVO (Solo Móviles y Tablets pequeñas)
 * ========================================================================== */
@media (max-width: 768px) {

    /* Reducimos el padding exterior para dar más espacio al contenido en móviles */
    .page-section {
        padding: 40px 15px;
    }

    /* Reducimos el padding interno de la caja */
    .content-box {
        padding: 30px 20px;
    }

    /* Ajustamos el tamaño del título para evitar cortes de palabra */
    .content-box h1 {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    /* Reducimos sutilmente el texto */
    .content-box p {
        font-size: 1rem;
    }
}