/* =========================================================
   GRUPO LAS LETRAS
   ARTÍCULO DEL BLOG
   Diseño editorial
   ========================================================= */


/* =========================================================
   MAIN
========================================================= */

.article-main {

    width: 100%;

    background: var(--color-fondo);
    color: var(--color-texto);

    transition: var(--transicion);

}


/* =========================================================
   ENCABEZADO DEL ARTÍCULO
========================================================= */

.article-header {

    padding: 110px 30px 65px;

    text-align: center;

}


.article-header-inner {

    width: min(
        780px,
        100%
    );

    margin: 0 auto;

}


/* ---------------------------------------------------------
   VOLVER AL BLOG
--------------------------------------------------------- */

.article-back {

    display: inline-block;

    margin-bottom: 38px;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);
    font-size: 0.68rem;
    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.25s ease;

}


.article-back:hover {

    color: var(--color-dorado);

}


/* ---------------------------------------------------------
   CATEGORÍA
--------------------------------------------------------- */

.article-category {

    margin-bottom: 20px;

}


.article-category span {

    display: inline-block;

    color: var(--color-dorado);

    font-family: var(--fuente-texto);

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}


/* =========================================================
   TÍTULO
========================================================= */

.article-title {

    margin: 0;

    color: var(--color-principal);

    font-family: var(--fuente-titulos);

    font-size: clamp(
        2.8rem,
        6vw,
        5.2rem
    );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -0.025em;

}


/* =========================================================
   BAJADA
========================================================= */

.article-intro {

    max-width: 680px;

    margin: 25px auto 0;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.98rem;

    line-height: 1.75;

}


/* =========================================================
   METADATA
========================================================= */

.article-meta {

    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 22px;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.62rem;
    font-weight: 600;

    line-height: 1;

    letter-spacing: 0.07em;

    text-transform: uppercase;

}


.article-meta > span,
.article-meta > time {

    display: inline-flex;

    align-items: center;

    margin: 0;

    line-height: 1;

}


/* =========================================================
   IMAGEN PRINCIPAL
========================================================= */

.article-cover {

    width: min(
        var(--ancho-contenido),
        calc(100% - 60px)
    );

    margin: 0 auto 70px;

}


.article-cover img {

    width: 100%;

    display: block;

    max-height: 620px;

    object-fit: cover;

}


.article-cover figcaption {

    margin-top: 9px;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.62rem;

    line-height: 1.5;

}


/* =========================================================
   CUERPO DEL ARTÍCULO
========================================================= */

.article-body {

    width: min(
        720px,
        calc(100% - 40px)
    );

    margin: 0 auto;

}


/* ---------------------------------------------------------
   PÁRRAFOS
--------------------------------------------------------- */

.article-body p {

    margin: 0 0 1.45em;

    color: var(--color-texto);

    font-family: var(--fuente-texto);

    font-size: 1rem;

    line-height: 1.9;

}


/* ---------------------------------------------------------
   ENTRADILLA
--------------------------------------------------------- */

.article-body .article-lead {

    margin-bottom: 1.8em;

    color: var(--color-principal);

    font-family: var(--fuente-titulos);

    font-size: 1.55rem;

    font-weight: 500;

    line-height: 1.5;

}


/* ---------------------------------------------------------
   SUBTÍTULOS
--------------------------------------------------------- */

.article-body h2 {

    margin:
        55px
        0
        22px;

    color: var(--color-principal);

    font-family: var(--fuente-titulos);

    font-size: 2.15rem;

    font-weight: 500;

    line-height: 1.15;

}


/* ---------------------------------------------------------
   LISTAS
--------------------------------------------------------- */

.article-body ul {

    margin:
        25px
        0
        30px;

    padding-left: 24px;

}


.article-body li {

    margin-bottom: 10px;

    color: var(--color-texto);

    font-family: var(--fuente-texto);

    font-size: 0.95rem;

    line-height: 1.75;

}


/* ---------------------------------------------------------
   ENLACES
--------------------------------------------------------- */

.article-body a {

    color: var(--color-dorado);

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;

    transition:
        color 0.25s ease;

}


.article-body a:hover {

    color: var(--color-dorado-hover);

}


/* =========================================================
   CITAS
========================================================= */

.article-body blockquote {

    margin:
        50px
        0;

    padding:
        5px
        0
        5px
        25px;

    border-left:
        2px
        solid
        var(--color-dorado);

    color: var(--color-principal);

    font-family: var(--fuente-titulos);

    font-size: 1.55rem;

    font-style: italic;

    line-height: 1.5;

}


.article-body blockquote cite {

    display: block;

    margin-top: 15px;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.62rem;

    font-style: normal;

    font-weight: 600;

    letter-spacing: 0.06em;

    text-transform: uppercase;

}


/* =========================================================
   IMÁGENES INTERNAS
========================================================= */

.article-image {

    width: 100%;

    margin:
        50px
        0;

}


.article-image img {

    width: 100%;

    display: block;

}


.article-image figcaption {

    margin-top: 9px;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.62rem;

    line-height: 1.5;

}


/* =========================================================
   INFORMACIÓN COMPLEMENTARIA
========================================================= */

/*
   Este bloque no funciona como una "sidebar" tradicional.
   Es información editorial complementaria que aparece
   después del contenido principal del artículo.
*/

.article-sidebar {

    width: min(
        720px,
        calc(100% - 40px)
    );

    margin:
        70px
        auto
        0;

}


/* ---------------------------------------------------------
   BLOQUES DE INFORMACIÓN
--------------------------------------------------------- */

.article-sidebar-box {

    padding:
        25px
        0;

    border-top:
        1px
        solid
        var(--color-borde);

}


.article-sidebar-box:last-child {

    border-bottom:
        1px
        solid
        var(--color-borde);

}


/* ---------------------------------------------------------
   TÍTULO DEL BLOQUE
--------------------------------------------------------- */

.article-sidebar-label {

    display: block;

    margin-bottom: 14px;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing: 0.13em;

    line-height: 1.3;

    text-transform: uppercase;

}


/* =========================================================
   SOBRE ESTA PUBLICACIÓN
========================================================= */

.article-about p {

    max-width: 650px;

    margin: 0;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.78rem;

    font-weight: 400;

    line-height: 1.75;

}


/* =========================================================
   ETIQUETAS
========================================================= */

.article-tags {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

}


/* ---------------------------------------------------------
   CADA ETIQUETA
--------------------------------------------------------- */

.article-tags a {

    display: inline-flex;

    align-items: center;

    padding:
        7px
        11px;

    border:
        1px
        solid
        var(--color-borde);

    background: transparent;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.58rem;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.02em;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;

}


/* ---------------------------------------------------------
   HOVER DE LAS ETIQUETAS
--------------------------------------------------------- */

.article-tags a:hover {

    border-color:
        var(--color-principal);

    background:
        var(--color-principal);

    color:
        var(--color-blanco);

}


/* =========================================================
   NAVEGACIÓN ENTRE ARTÍCULOS
========================================================= */

.article-navigation {

    width: min(
        var(--ancho-contenido),
        calc(100% - 60px)
    );

    margin:
        70px
        auto
        100px;

}


/* ---------------------------------------------------------
   CONTENEDOR
--------------------------------------------------------- */

.article-navigation-inner {

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: stretch;

    border-top:
        1px
        solid
        var(--color-borde);

    border-bottom:
        1px
        solid
        var(--color-borde);

}


/* ---------------------------------------------------------
   ELEMENTOS DE NAVEGACIÓN
--------------------------------------------------------- */

.article-nav-item {

    min-height: 120px;

    padding:
        25px
        30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-decoration: none;

    transition:
        background-color 0.25s ease;

}


.article-nav-prev {

    align-items: flex-start;

    border-right:
        1px
        solid
        var(--color-borde);

}


.article-nav-next {

    align-items: flex-end;

    border-left:
        1px
        solid
        var(--color-borde);

}


.article-nav-item:hover {

    background:
        var(--color-fondo-secundario);

}


/* ---------------------------------------------------------
   ETIQUETA
--------------------------------------------------------- */

.article-nav-item span {

    margin-bottom: 9px;

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}


/* ---------------------------------------------------------
   TÍTULO
--------------------------------------------------------- */

.article-nav-item strong {

    max-width: 280px;

    color: var(--color-principal);

    font-family: var(--fuente-titulos);

    font-size: 1.25rem;

    font-weight: 500;

    line-height: 1.2;

    transition:
        color 0.25s ease;

}


.article-nav-item:hover strong {

    color:
        var(--color-dorado);

}


/* ---------------------------------------------------------
   VOLVER AL BLOG
--------------------------------------------------------- */

.article-nav-center {

    min-width: 150px;

    padding:
        25px
        35px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--color-texto);

    font-family: var(--fuente-texto);

    font-size: 0.62rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;

}


.article-nav-center:hover {

    background:
        var(--color-principal);

    color:
        var(--color-blanco);

}


/* =========================================================
   ARTÍCULOS RELACIONADOS
========================================================= */

.article-related {

    width: min(
        var(--ancho-contenido),
        calc(100% - 60px)
    );

    margin:
        0
        auto
        100px;

}


/* ---------------------------------------------------------
   ENCABEZADO
--------------------------------------------------------- */

.article-related-heading {

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom:
        1px
        solid
        var(--color-borde);

}


.article-related-heading span {

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.article-related-heading h2 {

    margin:
        7px
        0
        0;

    color: var(--color-principal);

    font-family: var(--fuente-titulos);

    font-size: 2.15rem;

    font-weight: 500;

}


/* ---------------------------------------------------------
   GRID
--------------------------------------------------------- */

.article-related-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}


/* ---------------------------------------------------------
   TARJETA
--------------------------------------------------------- */

.related-card {

    overflow: hidden;

    background:
        var(--color-blanco);

    border:
        1px
        solid
        var(--color-borde);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.related-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        var(--sombra-suave);

}


/* ---------------------------------------------------------
   IMAGEN
--------------------------------------------------------- */

.related-card-image {

    display: block;

    height: 190px;

    overflow: hidden;

}


.related-card-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;

}


.related-card:hover img {

    transform:
        scale(1.03);

}


/* ---------------------------------------------------------
   CONTENIDO
--------------------------------------------------------- */

.related-card-content {

    padding:
        20px;

}


.related-card-content > span {

    color: var(--color-texto-suave);

    font-family: var(--fuente-texto);

    font-size: 0.56rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}


.related-card h3 {

    margin:
        9px
        0
        15px;

    color: var(--color-principal);

    font-family: var(--fuente-titulos);

    font-size: 1.3rem;

    font-weight: 500;

    line-height: 1.2;

}


.related-card-content > a {

    color: var(--color-texto);

    font-family: var(--fuente-texto);

    font-size: 0.58rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-decoration: none;

    transition:
        color 0.25s ease;

}


.related-card-content > a:hover {

    color:
        var(--color-dorado);

}