/* =========================================
   ESTILOS DEL CUERPO (MAIN CONTENT)
   ========================================= */

/* Contenedor principal que empuja el footer al fondo si hay poco texto */
.main-content {
    padding: 60px 20px;
    max-width: 1400px; /* Alineado con el Header y el Footer */
    margin: 0 auto;
    flex: 1; /* Esto es vital: empuja el footer hacia abajo */
    width: 100%;
}

/* Contenedor interno optimizado para lectura y páginas legales */
.legal-content {
    max-width: 1200px; 
    margin: 0 auto;
    color: var(--text-muted);
    line-height: 1.8;
}

/* =========================================
   JERARQUÍA TIPOGRÁFICA GLOBAL (WP EDITOR)
   ========================================= */

/* Establece la base de lectura para cualquier página o artículo */
.main-content {
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--text-muted); /* Gris claro anti-fatiga visual[cite: 10] */
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Configuración de todos los encabezados */
.main-content h1, 
.main-content h2, 
.main-content h3, 
.main-content h4 {
    color: var(--text-main); /* Blanco brillante para destacar[cite: 10] */
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.8em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* H1: Título principal de la página (Con acento visual) */
.main-content h1 {
    font-size: 2.5rem;
    border-left: 4px solid var(--cyan);
    padding-left: 15px;
    margin-top: 0;
}

/* H2: Subtítulos de secciones */
.main-content h2 {
    font-size: 1.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

/* H3: Sub-secciones menores */
.main-content h3 {
    font-size: 1.3rem;
    color: var(--cyan); /* Acento de color para romper la monotonía */
}

/* Párrafos estándar */
.main-content p {
    margin-bottom: 1.5em;
}

.main-content strong {
    color: var(--text-main);
    font-weight: 700;
}

/* Enlaces dentro del texto de los artículos */
.main-content p a,
.main-content li a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px dashed var(--cyan); /* Subrayado sutil para UX */
    transition: all 0.3s ease;
}

.main-content p a:hover,
.main-content li a:hover {
    color: var(--magenta);
    border-bottom-color: var(--magenta);
}

/* Listas y Viñetas automáticas */
.main-content ul, 
.main-content ol {
    margin-bottom: 1.5em;
    padding-left: 20px;
}

.main-content li {
    margin-bottom: 0.5em;
}

/* Viñetas personalizadas con el color institucional */
.main-content ul li::marker {
    color: var(--magenta); 
}

/* Citas y advertencias automáticas (Blockquote) */
.main-content blockquote {
    border-left: 4px solid var(--orange); /* Naranja de alerta para disclaimers[cite: 10] */
    background-color: #0a0a0c;
    padding: 20px 25px;
    margin: 2em 0;
    font-style: italic;
    color: var(--text-muted);
}
/* =========================================
   DISEÑO DE ARTÍCULOS (SINGLE POST)
   ========================================= */

/* Espaciado superior del artículo */
.single-post-wrapper {
    margin-top: 20px;
}

/* Título Principal del Artículo */
.article-header {
    margin-bottom: 30px;
}

.article-header .entry-title {
    color: var(--text-main);
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 15px;
    margin-top: 0;
    text-transform: uppercase;
    border-left: 5px solid var(--cyan);
    padding-left: 20px;
}

/* Metadatos (Autor y Fecha) */
.article-header .entry-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-family: monospace;
    border-bottom: 1px solid #27272a; /* Mismo color de borde que los paneles */
    padding-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.article-header .entry-meta a {
    color: var(--cyan);
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-header .entry-meta a:hover {
    color: var(--magenta);
}

/* Contenedor de la Imagen Destacada */
.featured-image-wrapper {
    margin-bottom: 40px;
    width: 100%;
}

.featured-image-wrapper .wp-post-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 1px solid #27272a;
    display: block;
    border-radius: 0 !important; /* Cero curvas, diseño estricto */
}

/* Oculta la imagen duplicada si el editor clásico de WP la inyectó dentro del texto */
.entry-content > a > img.wp-post-image {
    display: none; 
}

/* Ajustes Responsive para Móvil (Tablets y Desktop ya lo heredan de legal-content) */
@media (max-width: 768px) {
    .article-header .entry-title {
        font-size: 1.8rem;
        padding-left: 15px;
    }
}