/* ============================================= */
/* =      Estilos del Contenido del Artículo     = */
/* ============================================= */

/* Selector para las secciones de contenido (se repite) */
.article-content-section {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4%;
}

.article-content-container {
    width: 80%;
    height: auto;
}

/* Títulos H1 dentro del contenido (ej. "What is Puerto...") */
.article-content-container h1 {
    font-weight: 500;
    font-size: 27px;
    color: #46AD67;
    scroll-margin: 80px; /* Para que el sticky nav no tape el título */
}

.article-content-body {
    width: 100%;
    height: auto;
}

/* Párrafos de texto */
.article-content-body p {
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
    margin-top: 20px;
}


/* ============================================= */
/* =      ESTILOS RESPONSIVE (Contenido)       = */
/* ============================================= */

@media (max-width: 480px) {

    /* Ajuste del contenedor para que ocupe el ancho completo en móviles */
    .article-content-container {
        width: 100%;
        padding: 0 15px;
    }

    /* Reducción de fuente para los títulos H1 en móviles */
    .article-content-container h1 {
        font-size: 20px;
        text-align: left;
    }

    /* Reducción de fuente para los párrafos en móviles */
    .article-content-body p {
        font-size: 16px;
        line-height: 140%;
    }
}