/* =====================================================
   FICHA DE OBRA
===================================================== */

.obra-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px 100px;
}


/* =====================================================
   VOLVER
===================================================== */

.volver-literatura {
    display: inline-block;

    margin-bottom: 55px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    text-decoration: none;
    color: #777;

    transition: color .2s ease;
}

.volver-literatura:hover {
    color: #111;
}


/* =====================================================
   CABECERA DE LA OBRA
===================================================== */

.obra-header {
    max-width: 800px;
    margin-bottom: 65px;
}


.obra-tipo {
    margin-bottom: 20px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .62rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #888;
}


.obra-header h1 {
    margin: 0 0 15px;

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

    font-size:
        clamp(3.5rem, 7vw, 6rem);

    font-weight: 400;
    line-height: .9;

    color: #111;
}


.obra-autor {
    margin-top: 15px;

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

    font-size: 1.4rem;
    line-height: 1.3;

    color: #555;
}


.obra-anio {
    margin-top: 8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: #999;
}


/* =====================================================
   CONTENIDO
===================================================== */

.obra-contenido {
    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(280px, .6fr);

    gap: 70px;

    align-items: start;
}


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

.obra-imagen {
    width: 100%;
    margin: 0;

    overflow: hidden;

    background: #eee;
}


.obra-imagen img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 750px;

    object-fit: cover;
}


/* =====================================================
   DETALLES
===================================================== */

.obra-detalles {
    padding-top: 5px;
}


.obra-dato {
    padding: 0 0 25px;
    margin-bottom: 25px;

    border-bottom: 1px solid #ddd;
}


.obra-dato-titulo {
    margin-bottom: 10px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .6rem;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #999;
}


.obra-dato-contenido {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 1.25rem;
    line-height: 1.4;

    color: #222;
}


/* =====================================================
   TRADUCTORES
===================================================== */

.traductores-lista {
    margin: 0;
    padding: 0;

    list-style: none;
}


.traductores-lista li {
    margin-bottom: 5px;

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

    font-size: 1.2rem;
    line-height: 1.4;

    color: #222;
}


/* =====================================================
   ENLACE EDITORIAL
===================================================== */

.obra-enlace {
    margin-top: 35px;
}


.boton-editorial {
    display: inline-flex;

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

    gap: 25px;

    padding: 13px 0;

    border-bottom: 1px solid #111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    text-decoration: none;

    color: #111;

    transition:
        gap .25s ease,
        border-color .25s ease;
}


.boton-editorial .flecha {
    font-family: Georgia, serif;
    font-size: 1.2rem;
}


.boton-editorial:hover {
    gap: 35px;
}


/* =====================================================
   RESPONSIVE — TABLET
===================================================== */

@media (max-width: 900px) {

    .obra-page {
        padding:
            50px 30px 80px;
    }


    .obra-contenido {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .obra-detalles {
        max-width: 700px;
    }

}


/* =====================================================
   RESPONSIVE — MÓVIL
===================================================== */

@media (max-width: 600px) {

    .obra-page {
        padding:
            40px 25px 70px;
    }


    .volver-literatura {
        margin-bottom: 40px;
    }


    .obra-header {
        margin-bottom: 45px;
    }


    .obra-header h1 {
        font-size: 3.2rem;
    }


    .obra-autor {
        font-size: 1.2rem;
    }


    .obra-contenido {
        gap: 40px;
    }


    .obra-imagen img {
        max-height: none;
    }


    .obra-dato-contenido,
    .traductores-lista li {
        font-size: 1.15rem;
    }

}


/* =====================================================
   MÓVIL PEQUEÑO
===================================================== */

@media (max-width: 450px) {

    .obra-page {
        padding-left: 20px;
        padding-right: 20px;
    }


    .obra-header h1 {
        font-size: 2.8rem;
    }

}