/* ==========================================
   RESET / BASE
========================================== */

* {
    box-sizing: border-box;
}


:root {

    --font-display:
        "Cormorant Garamond",
        "Palatino Linotype",
        Palatino,
        "Book Antiqua",
        Georgia,
        serif;

    --crema: #eee8df;
    --rojo: #c9535e;
    --rosa: #d9b5ad;

    --negro: #020202;
}


html {

    scroll-behavior: smooth;

    background: var(--negro);
}


body {

    margin: 0;

    color: var(--crema);

    font-family:
        "Palatino Linotype",
        Palatino,
        "Book Antiqua",
        Georgia,
        serif;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    -webkit-tap-highlight-color: transparent;
}



/* ==========================================
   FONDO
========================================== */

.fondo {

    position: fixed;

    inset: 0;

    z-index: -3;

    pointer-events: none;


    background:

        radial-gradient(
            circle at 50% 16%,
            #16090b 0%,
            #0c0708 30%,
            #050404 57%,
            #020202 100%
        );
}



/* ==========================================
   RESPLANDOR
========================================== */

.polvo {

    position: fixed;

    top: 0;
    left: 0;


    width: 280px;
    height: 280px;


    margin-left: -140px;
    margin-top: -140px;


    border-radius: 50%;


    background:

        radial-gradient(
            circle,
            rgba(201,83,94,.16),
            rgba(201,83,94,.05) 45%,
            transparent 72%
        );


    pointer-events: none;

    z-index: 2;


    opacity: 0;


    transition:
        opacity .8s ease;


    will-change: transform;
}


.polvo.activo {

    opacity: 1;
}



/* ==========================================
   GRANO
========================================== */

body::after {

    content: "";

    position: fixed;

    inset: 0;


    pointer-events: none;

    z-index: 100;


    opacity: .045;


    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}



/* ==========================================
   CABECERA
========================================== */

.cabecera {

    position: fixed;

    top:
        calc(
            18px +
            env(safe-area-inset-top, 0px)
        );

    left: 50%;


    transform:
        translateX(-50%);


    z-index: 50;


    display: flex;

    align-items: baseline;

    gap: .65rem;


    font-family:
        var(--font-display);


    font-size:
        clamp(
            .92rem,
            1.3vw,
            1.08rem
        );


    font-style: italic;

    letter-spacing: .055em;


    white-space: nowrap;


    color:
        rgba(
            238,
            232,
            223,
            .42
        );
}


.marca {

    color:
        rgba(
            238,
            232,
            223,
            .64
        );


    text-decoration: none;


    transition:
        color .4s ease,
        text-shadow .4s ease;
}


.marca span {

    color: var(--rojo);
}


.marca:hover {

    color:
        rgba(
            255,
            248,
            239,
            .96
        );


    text-shadow:
        0 0 18px
        rgba(
            201,
            83,
            94,
            .18
        );
}


.separador {

    opacity: .34;
}


.seccion-actual {

    opacity: .68;
}



/* ==========================================
   INTRO
========================================== */

.intro {

    position: relative;


    min-height: 64svh;


    display: flex;

    align-items: center;

    justify-content: center;


    padding:

        calc(
            7vh +
            env(
                safe-area-inset-top,
                0px
            )
        )

        6vw

        8vh;


    text-align: center;
}


.intro-interior {

    width:
        min(
            90vw,
            720px
        );
}


.ceja {

    margin:
        0 0 1rem;


    font-size: .68rem;

    letter-spacing: .34em;

    text-transform: uppercase;


    opacity: .3;
}


.intro h1 {

    margin: 0;


    font-family:
        var(--font-display);


    font-size:
        clamp(
            4.4rem,
            12vw,
            8rem
        );


    font-weight: 500;

    font-style: italic;


    line-height: .9;

    letter-spacing: -.025em;
}


.linea {

    width: 62px;

    height: 1px;


    margin:
        1.8rem auto 1.55rem;


    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(
                201,
                83,
                94,
                .9
            ),

            transparent
        );
}


.bajada {

    width:
        min(
            88vw,
            520px
        );


    margin: 0 auto;


    font-family:
        var(--font-display);


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


    font-style: italic;

    line-height: 1.45;


    color:
        rgba(
            238,
            232,
            223,
            .52
        );
}



/* ==========================================
   INDICADOR
========================================== */

.continuar {

    position: absolute;


    bottom: 3.5vh;

    left: 50%;


    transform:
        translateX(-50%);
}


.continuar span {

    display: block;


    width: 1px;

    height: 42px;


    background:

        linear-gradient(
            transparent,
            rgba(
                255,
                255,
                255,
                .42
            ),
            transparent
        );


    animation:
        pulsoLinea
        2.8s
        ease-in-out
        infinite;
}



/* ==========================================
   ARCHIVO
========================================== */

.archivo {

    padding:

        8vh
        5vw
        16vh;
}


.estantes {

    width:
        min(
            1380px,
            100%
        );


    margin:
        0 auto;
}



/* ==========================================
   UN ESTANTE
========================================== */

.estante {

    position: relative;


    margin-bottom:
        clamp(
            10rem,
            18vh,
            16rem
        );


    padding:

        0
        3vw
        2.4rem;
}



/* línea del estante */

.estante::after {

    content: "";


    position: absolute;


    left: 1%;

    right: 1%;

    bottom: 0;


    height: 1px;


    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(
                238,
                232,
                223,
                .14
            )
            12%,

            rgba(
                238,
                232,
                223,
                .1
            )
            88%,

            transparent
        );


    box-shadow:

        0 8px 26px
        rgba(
            0,
            0,
            0,
            .5
        );
}



/* contenido del estante */

.estante-contenido {

    min-height: 290px;


    display: flex;

    align-items: flex-end;

    justify-content: center;


    gap:
        clamp(
            1.6rem,
            4vw,
            4.5rem
        );
}



/* ==========================================
   OBRA
========================================== */

.obra {

    --ancho-obra: 165px;


    position: relative;


    flex:
        0 0
        var(--ancho-obra);


    width:
        var(--ancho-obra);


    text-decoration: none;

    color: inherit;


    opacity: 0;


    transform:
        translateY(22px);


    transition:

        opacity
        1s
        ease,

        transform
        1.15s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.obra.visible {

    opacity: 1;

    transform:
        translateY(0);
}



/* tamaños */

.obra--pequena {

    --ancho-obra: 125px;
}


.obra--normal {

    --ancho-obra: 165px;
}


.obra--grande {

    --ancho-obra: 215px;
}



/* ==========================================
   CONTENEDOR DE IMAGEN
========================================== */

.obra-imagen {

    position: relative;


    width: 100%;


    overflow: hidden;


    background:
        rgba(
            255,
            255,
            255,
            .018
        );


    box-shadow:

        0 0 0 1px
        rgba(
            255,
            255,
            255,
            .02
        ),

        0 18px 42px
        rgba(
            0,
            0,
            0,
            .42
        );


    transition:

        transform .75s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        box-shadow
        .75s
        ease;
}



/* capa burdeos */

.obra-imagen::after {

    content: "";


    position: absolute;

    inset: 0;


    z-index: 2;


    pointer-events: none;


    background:

        rgba(
            62,
            15,
            20,
            .14
        );


    mix-blend-mode:
        multiply;


    transition:
        opacity
        .7s
        ease;
}



/* ==========================================
   FORMATOS
========================================== */

.formato--vertical
.obra-imagen {

    aspect-ratio:
        3 / 4;
}


.formato--alto
.obra-imagen {

    aspect-ratio:
        2 / 3;
}


.formato--cuadrado
.obra-imagen {

    aspect-ratio:
        1 / 1;
}


.formato--ancho
.obra-imagen {

    aspect-ratio:
        16 / 10;
}



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

.obra img {

    display: block;


    width: 100%;

    height: 100%;


    object-position:
        center;


    filter:

        saturate(.55)

        contrast(1.08)

        brightness(.68);


    transition:

        filter
        .75s
        ease,

        transform
        .9s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}



/* portadas / libros */

.modo--contain img {

    object-fit: contain;
}



/* fotogramas / fotografía */

.modo--cover img {

    object-fit: cover;
}



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

.obra.sin-imagen
.obra-imagen {

    min-height: 210px;


    background:

        linear-gradient(
            145deg,

            rgba(
                255,
                255,
                255,
                .018
            ),

            rgba(
                201,
                83,
                94,
                .025
            )
        );
}


.obra.sin-imagen img {

    display: none;
}



/* ==========================================
   TEXTO DE OBRA
========================================== */

.obra-info {

    margin-top:
        .85rem;
}


.obra-titulo {

    margin: 0;


    font-family:
        var(--font-display);


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


    font-weight: 500;

    font-style: italic;


    line-height: 1.04;


    color:

        rgba(
            238,
            232,
            223,
            .78
        );


    transition:

        color
        .45s
        ease,

        text-shadow
        .45s
        ease;
}


.obra-meta {

    margin:
        .38rem
        0
        0;


    font-size:
        clamp(
            .63rem,
            .8vw,
            .74rem
        );


    line-height: 1.35;


    letter-spacing:
        .065em;


    color:

        rgba(
            238,
            232,
            223,
            .29
        );


    transition:
        color
        .45s
        ease;
}



/* ==========================================
   HOVER
========================================== */

@media
(hover: hover)
and
(pointer: fine) {


    .obra:hover
    .obra-imagen {

        transform:
            translateY(-6px);


        box-shadow:

            0 0 0 1px
            rgba(
                201,
                83,
                94,
                .09
            ),

            0 22px 52px
            rgba(
                0,
                0,
                0,
                .58
            ),

            0 0 34px
            rgba(
                201,
                83,
                94,
                .07
            );
    }


    .obra:hover
    .obra-imagen::after {

        opacity: .28;
    }


    .obra:hover img {

        filter:

            saturate(.9)

            contrast(1.04)

            brightness(.88);


        transform:
            scale(1.012);
    }


    .obra:hover
    .obra-titulo {

        color:

            rgba(
                255,
                248,
                239,
                .98
            );


        text-shadow:

            0 0 18px
            rgba(
                201,
                83,
                94,
                .15
            );
    }


    .obra:hover
    .obra-meta {

        color:

            rgba(
                238,
                232,
                223,
                .48
            );
    }

}



/* ==========================================
   IRREGULARIDAD DEL ESTANTE
========================================== */

.estante
.obra:nth-child(2n) {

    margin-bottom:
        12px;
}


.estante
.obra:nth-child(3n) {

    margin-bottom:
        27px;
}


.estante
.obra:nth-child(5n) {

    margin-bottom:
        8px;
}



/* ==========================================
   REVELADO
========================================== */

.revelar {

    opacity: 0;


    transform:
        translateY(24px);


    transition:

        opacity
        1.15s
        ease,

        transform
        1.35s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );
}


.revelar.visible {

    opacity: 1;


    transform:
        translateY(0);
}



/* ==========================================
   CIERRE
========================================== */

.cierre {

    min-height: 52svh;


    display: flex;

    align-items: center;

    justify-content: center;


    padding:
        10vh
        5vw;
}


.volver {

    font-family:
        var(--font-display);


    font-size:

        clamp(
            2.5rem,
            8vw,
            4.5rem
        );


    font-style: italic;


    color:

        rgba(
            238,
            232,
            223,
            .6
        );


    text-decoration: none;


    transition:

        color
        .5s
        ease,

        text-shadow
        .5s
        ease;
}


.volver span {

    color:
        var(--rojo);
}


.volver:hover {

    color:

        rgba(
            255,
            248,
            239,
            .9
        );


    text-shadow:

        0 0 26px
        rgba(
            201,
            83,
            94,
            .14
        );
}



/* ==========================================
   ANIMACIÓN
========================================== */

@keyframes pulsoLinea {

    0%,
    100% {

        opacity: .15;

        transform:
            scaleY(.72);
    }


    50% {

        opacity: .7;

        transform:
            scaleY(1);
    }

}



/* ==========================================
   TABLET
========================================== */

@media
(max-width: 900px) {


    .archivo {

        padding-left:
            4vw;

        padding-right:
            4vw;
    }


    .estante {

        padding-left:
            4vw;

        padding-right:
            4vw;
    }


    .estante-contenido {

        justify-content:
            flex-start;


        overflow-x:
            auto;


        overflow-y:
            visible;


        padding:

            20px
            3vw
            12px;


        scrollbar-width:
            none;
    }


    .estante-contenido::-webkit-scrollbar {

        display: none;
    }


    .obra--pequena {

        --ancho-obra:
            118px;
    }


    .obra--normal {

        --ancho-obra:
            150px;
    }


    .obra--grande {

        --ancho-obra:
            190px;
    }

}



/* ==========================================
   CELULAR
========================================== */

@media
(max-width: 620px) {


    .intro {

        min-height:
            58svh;
    }


    .intro h1 {

        font-size:

            clamp(
                4rem,
                23vw,
                6.2rem
            );
    }


    .archivo {

        padding-top:
            4vh;
    }


    .estante {

        margin-bottom:
            8rem;


        padding-bottom:
            1.8rem;
    }


    .estante-contenido {

        gap:
            2rem;


        min-height:
            250px;
    }


    .obra--pequena {

        --ancho-obra:
            105px;
    }


    .obra--normal {

        --ancho-obra:
            135px;
    }


    .obra--grande {

        --ancho-obra:
            165px;
    }


    .obra-titulo {

        font-size:
            1.08rem;
    }


    .obra-meta {

        font-size:
            .64rem;
    }

}



/* ==========================================
   REDUCIR MOVIMIENTO
========================================== */

@media
(prefers-reduced-motion: reduce) {


    *,
    *::before,
    *::after {

        animation:
            none !important;


        transition-duration:
            .01ms !important;
    }


    .obra,
    .revelar {

        opacity:
            1 !important;


        transform:
            none !important;
    }

}