/* =====================================================
       PORTADA
    ===================================================== */

    .portada {

        width: 100%;

        min-height: calc(100vh - 105px);

        padding: 30px 5vw 70px;

        display: grid;

        grid-template-columns: 55% 45%;

        align-items: center;

        overflow: hidden;
    }


    /* =====================================================
       COLUMNA IZQUIERDA
    ===================================================== */

    .portada-texto {

        padding-right: 50px;

        position: relative;

        z-index: 2;
    }


    /* -----------------------------------------------------
       PEQUEÑA ETIQUETA SUPERIOR
    ----------------------------------------------------- */

    .portada-etiqueta {

        display: flex;

        align-items: center;

        gap: 14px;

        margin-bottom: 30px;

        font-family: Arial, sans-serif;

        font-size: 0.72rem;

        font-weight: 600;

        letter-spacing: 3px;

        color: #666;

        text-transform: uppercase;
    }


    .portada-etiqueta::before {

        content: "";

        width: 45px;

        height: 1px;

        background: #222;

        display: block;
    }


    /* =====================================================
       TITULO PRINCIPAL
    ===================================================== */

    .portada-titulo {

        margin: 0 0 40px;

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

        font-size:
            clamp(4.2rem, 7.5vw, 8.5rem);

        font-weight: 700;

        line-height: 0.82;

        letter-spacing: -6px;

        color: #111;

        text-transform: uppercase;
    }


    .portada-titulo span {

        display: block;
    }


    .portada-titulo .olvido {

        font-weight: 300;

        letter-spacing: -7px;
    }


    /* =====================================================
       SUBTITULO
    ===================================================== */

    .portada-subtitulo {

        max-width: 620px;

        margin-bottom: 25px;

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

        font-size: 2rem;

        font-weight: 400;

        line-height: 1.2;

        color: #333;
    }


    /* =====================================================
       DESCRIPCION
    ===================================================== */

    .portada-descripcion {

        max-width: 570px;

        margin-bottom: 38px;

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

        font-size: 1rem;

        line-height: 1.75;

        color: #666;
    }


    /* =====================================================
       BOTON
    ===================================================== */

    .portada-boton {

        display: inline-flex;

        align-items: center;

        gap: 25px;

        padding: 8px 8px 8px 25px;

        border: 1px solid #aaa;

        border-radius: 50px;

        color: #111;

        text-decoration: none;

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

        font-size: 0.72rem;

        font-weight: 600;

        letter-spacing: 2px;

        text-transform: uppercase;

        transition:
            background 0.3s ease,
            color 0.3s ease;
    }


    .portada-flecha {

        width: 44px;

        height: 44px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        background: #111;

        color: white;

        font-size: 1.2rem;

        transition:
            transform 0.3s ease;
    }


    .portada-boton:hover {

        background: #111;

        color: white;
    }


    .portada-boton:hover
    .portada-flecha {

        transform: translateX(4px);
    }


    /* =====================================================
       COLUMNA DERECHA / FOTOGRAFIA
    ===================================================== */

    .portada-foto {

        position: relative;

        width: 100%;

        height: 78vh;

        min-height: 550px;

        max-height: 820px;

        overflow: hidden;

        background: #222;
    }


    .portada-foto img {

        width: 100%;

        height: 100%;

        display: block;

        object-fit: cover;

        object-position: center;

        /*
        Si quieres la fotografía en color,
        elimina esta línea.
        */

        filter:
            grayscale(100%)
            contrast(1.08);

        transition:
            transform 1s ease;
    }


    .portada-foto:hover img {

        transform: scale(1.025);
    }


    /* =====================================================
       INFORMACIÓN SOBRE LA FOTOGRAFÍA
    ===================================================== */

    .foto-localizacion {

        position: absolute;

        left: 25px;

        bottom: 25px;

        z-index: 3;

        color: white;

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

        font-size: 0.68rem;

        font-weight: 500;

        letter-spacing: 2px;

        text-transform: uppercase;
    }


    .foto-numero {

        position: absolute;

        right: 25px;

        bottom: 25px;

        z-index: 3;

        color: white;

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

        font-size: 0.68rem;

        letter-spacing: 2px;
    }


    /* =====================================================
       PEQUEÑO GRADIENTE SOBRE LA FOTO
    ===================================================== */

    .portada-foto::after {

        content: "";

        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                to bottom,
                transparent 70%,
                rgba(0,0,0,0.45)
            );

        pointer-events: none;
    }


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

    @media (max-width: 1050px) {

        .portada {

            grid-template-columns: 52% 48%;

            padding-left: 4vw;

            padding-right: 4vw;
        }


        .portada-titulo {

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

            letter-spacing: -5px;
        }


        .portada-titulo .olvido {

            letter-spacing: -5px;
        }


        .portada-texto {

            padding-right: 35px;
        }

    }


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

    @media (max-width: 800px) {

        .portada {

            min-height: auto;

            grid-template-columns: 1fr;

            gap: 50px;

            padding:
                40px 6vw 70px;
        }


        .portada-texto {

            padding-right: 0;

            order: 1;
        }


        .portada-foto {

            order: 2;

            height: 600px;

            min-height: 500px;
        }


        .portada-titulo {

            font-size:
                clamp(4rem, 13vw, 6.5rem);
        }


        .portada-subtitulo {

            font-size: 1.8rem;
        }

    }


    /* =====================================================
       MOVIL PEQUEÑO
    ===================================================== */

    @media (max-width: 500px) {

        .portada {

            padding:
                30px 25px 60px;
        }


        .portada-etiqueta {

            font-size: 0.62rem;

            letter-spacing: 2px;
        }


        .portada-etiqueta::before {

            width: 30px;
        }


        .portada-titulo {

            font-size: 3.8rem;

            letter-spacing: -4px;

            margin-bottom: 30px;
        }


        .portada-titulo .olvido {

            letter-spacing: -4px;
        }


        .portada-subtitulo {

            font-size: 1.55rem;
        }


        .portada-descripcion {

            font-size: 0.95rem;
        }


        .portada-foto {

            height: 450px;

            min-height: 450px;
        }

    }