/* =========================================================
   ARTÍCULO
   CUADERNOS DE LA COMUNA
   ========================================================= */


/* ---------------------------------------------------------
   SELECCIÓN DE TEXTO
   --------------------------------------------------------- */

::selection {

    background: #6fa96f;
    color: #111;

}


/* ---------------------------------------------------------
   CABECERA
   --------------------------------------------------------- */

.articulo-header {

    max-width: 1200px;

    margin: 0 auto;

    padding: 70px 40px 45px;

    text-align: center;

}


/* Botón volver */

.volver {

    display: inline-block;

    margin-bottom: 55px;

    font-family: "Inter", sans-serif;

    font-size: 0.75rem;

    letter-spacing: 3px;

    text-transform: uppercase;

    text-decoration: none;

    color: #a51616;

    transition: transform 0.3s ease;

}


.volver:hover {

    transform: translateX(-5px);

}


/* Marca */

.articulo-etiqueta {

    margin-bottom: 25px;

    font-family: "Inter", sans-serif;

    font-size: 0.75rem;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #a51616;

}


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

.articulo-header h1 {

    max-width: 1000px;

    margin: 0 auto;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(4rem, 7vw, 7.5rem);

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -2px;

    text-align: center;

    color: #a51616;

}


/* ---------------------------------------------------------
   SUBTÍTULO
   --------------------------------------------------------- */

.articulo-bajada {

    max-width: 850px;

    margin: 45px auto 40px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(1.4rem, 2vw, 2rem);

    font-style: italic;

    font-weight: 400;

    line-height: 1.4;

    text-align: center;

    color: #222;

}


/* ---------------------------------------------------------
   AUTOR Y FECHA
   --------------------------------------------------------- */

.articulo-info {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 35px;

    width: fit-content;

    margin: 0 auto;

    padding: 18px 25px;

    border-top: 1px solid #bdb9b1;

    border-bottom: 1px solid #bdb9b1;

    font-family: "Inter", sans-serif;

    font-size: 0.7rem;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #333;

}


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

.articulo-imagen {

    width: 100%;

    margin: 20px 0 80px;

    overflow: hidden;

}


.articulo-imagen img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

}


/* ---------------------------------------------------------
   CUERPO DEL ARTÍCULO
   --------------------------------------------------------- */

.texto-articulo {

    max-width: 780px;

    margin: 0 auto;

    padding: 0 30px 100px;

}


.texto-articulo p {

    margin: 0 0 30px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 1.35rem;

    line-height: 1.75;

    text-align: justify;

    color: #171717;

}


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

.texto-articulo .entradilla {

    font-size: 1.65rem;

    line-height: 1.6;

    margin-bottom: 45px;

}


/* ---------------------------------------------------------
   SUBTÍTULOS DEL ARTÍCULO
   --------------------------------------------------------- */

.texto-articulo h2 {

    margin: 80px 0 35px;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 3rem;

    font-weight: 500;

    line-height: 1;

    color: #a51616;

}


/* ---------------------------------------------------------
   CITA DESTACADA
   --------------------------------------------------------- */

.texto-articulo blockquote {

    margin: 60px 0;

    padding: 30px 35px;

    border-left: 3px solid #a51616;

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 1.7rem;

    font-style: italic;

    line-height: 1.5;

    color: #333;

}


/* ---------------------------------------------------------
   REFERENCIAS
   --------------------------------------------------------- */

.referencias {

    margin-top: 100px;

    padding-top: 50px;

    border-top: 1px solid #c8c4bc;

}


.referencias h2 {

    margin: 0 0 40px;

    font-size: 2.5rem;

    color: #a51616;

}


.referencias ol {

    padding-left: 25px;

}


.referencias li {

    margin-bottom: 18px;

    font-family: "Inter", sans-serif;

    font-size: 0.8rem;

    line-height: 1.7;

    color: #444;

}


/* ---------------------------------------------------------
   PIE DEL ARTÍCULO
   --------------------------------------------------------- */

.articulo-footer {

    padding: 50px 30px 80px;

    text-align: center;

    border-top: 1px solid #c8c4bc;

}


.articulo-footer a {

    font-family: "Inter", sans-serif;

    font-size: 0.75rem;

    letter-spacing: 3px;

    text-transform: uppercase;

    text-decoration: none;

    color: #a51616;

}


.articulo-footer a:hover {

    text-decoration: underline;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {


    .articulo-header {

        padding: 45px 20px 35px;

    }


    .volver {

        margin-bottom: 35px;

    }


    .articulo-header h1 {

        font-size: clamp(3rem, 12vw, 5rem);

        letter-spacing: -1px;

    }


    .articulo-bajada {

        margin-top: 30px;

        font-size: 1.3rem;

    }


    .articulo-info {

        flex-direction: column;

        gap: 10px;

        padding: 15px 20px;

    }


    .articulo-imagen {

        margin-bottom: 50px;

    }


    .texto-articulo {

        padding: 0 22px 70px;

    }


    .texto-articulo p {

        font-size: 1.2rem;

        line-height: 1.7;

    }


    .texto-articulo .entradilla {

        font-size: 1.4rem;

    }


    .texto-articulo h2 {

        font-size: 2.3rem;

        margin-top: 60px;

    }


    .texto-articulo blockquote {

        font-size: 1.4rem;

        padding: 20px 25px;

    }


}

.nombre-revista {
    color: #9b1c1c;
}