/* ==========================================================================
   COMPONENTE · Cuerpo del artículo (Blog Detalle · Sección 3)
   Estilos de la zona de contenido del editor nativo (.entry-content).
   Mobile-First. Valores del CSS de Figma.
   ========================================================================== */

.entry-content {
    margin-top: 40px;               /* móvil; 64px en escritorio (Figma) */
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    color: #3D4043;
}

/* Separación base entre bloques (gap 24 de Figma) */
.entry-content > * {
    margin-top: 24px;
    margin-bottom: 0;
}

.entry-content > *:first-child {
    margin-top: 0;
}

/* ---- Párrafos ---- */
.entry-content p {
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.45px;
    color: #3D4043;
}

/* ---- Encabezados de sección ---- */
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 40px;               /* 24 gap + 16 padding de Figma */
    margin-bottom: 0;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.3px;
    color: #27292B;
}

.entry-content h2,
.entry-content h3 {
    font-size: 24px;
}

.entry-content h4 {
    font-size: 20px;
    line-height: 140%;
}

/* ---- Enlaces ---- */
.entry-content a {
    color: #006491;
    text-decoration: underline;
}

/* ---- Listas ---- */
.entry-content ul,
.entry-content ol {
    padding-left: 22px;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.45px;
    color: #3D4043;
}

.entry-content li + li {
    margin-top: 8px;
}

/* ---- Imágenes con pie de foto ---- */
.entry-content figure {
    margin: 40px 0 0;               /* 16 padding + 24 gap de Figma */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.entry-content figure img,
.entry-content img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 22px;
}

.entry-content figcaption {
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: -0.45px;
    color: #6C7981;
}

/* ---- Citas ---- */
.entry-content blockquote {
    margin: 24px 0 0;
    padding: 20px 24px;
    background: #EAF4FA;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.entry-content blockquote p {
    margin: 0;
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: -0.3px;
    color: #27292B;
}

.entry-content blockquote cite,
.entry-content blockquote footer {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 130%;
    color: #27292B;
}

@media (min-width: 992px) {
    .entry-content {
        margin-top: 64px;
    }
}