* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

:root {
    --fondo: #0B0B0B;
    --texto: #B8B2A8;
    --titulo: #E7DFD3;
    --borde: #5F5F5F;
    --boton: #F1EBDD;

    --frame: 1440px;
    --texto-max: 760px;
}

body {
    margin: 0;

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

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;

    overflow-x: hidden;
}


/* =========================================
   LOGO SUPERIOR
========================================= */

.header {
    width: 100%;
    max-width: var(--frame);

    margin: 0 auto;

    padding-top: 48px;
}

.logo-superior {
    display: block;

    width: 160px;
    height: auto;

    margin-left: 145px;
}


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

.intro {
    width: var(--texto-max);
    max-width: calc(100% - 48px);

    margin: 0 auto;

    text-align: center;
}

.foto-perfil {
    display: block;

    width: 90px;
    height: 90px;

    margin: 5px auto 36px;

    border-radius: 50%;

    object-fit: cover;
}

.intro-texto {
    width: 100%;

    margin: 0 auto;

    font-size: 16px;
    line-height: 27px;
}

h1 {
    margin: 12px 0 28px;

    color: var(--titulo);

    font-family: "Cormorant Garamond", serif;

    font-size: 38px;
    font-weight: 600;
    line-height: 50px;
}


/* =========================================
   TEXTO PRINCIPAL
========================================= */

.contenido {
    position: relative;
    z-index: 5;

    width: var(--texto-max);
    max-width: calc(100% - 48px);

    margin: 0 auto;
}

.contenido p {
    margin: 0 0 25px;

    font-size: 16px;
    line-height: 27px;
}

.contenido strong {
    color: var(--texto);

    font-weight: 600;
}

.contenido p:last-child {
    margin-bottom: 25px;
}


/* =========================================
   ZONA LIMA

   AHORA OCUPA TODO EL ANCHO DE LA PANTALLA
========================================= */

.zona-final {
    position: relative;
    isolation: isolate;

    /*
       Importante:
       ya no está limitada a 1440 px.
    */
    width: 100vw;

    /*
       Esto garantiza que siempre llegue
       de borde a borde del navegador.
    */
    margin-left: calc(50% - 50vw);

    /*
       La hacemos subir para que el mar
       empiece antes de las últimas líneas.
    */
    margin-top: -105px;

    /*
       Altura suficiente para mostrar
       la imagen y todo el contenido.
    */
    min-height: 570px;

    padding-top: 135px;
    padding-bottom: 35px;

    background-image: url("images/lima-fondo.png");

    background-repeat: no-repeat;

    /*
       La imagen recortada llena toda
       la sección sin deformarse.
    */
    background-size: cover;

    /*
       Conservamos más mar y desplazamos
       ligeramente la foto hacia abajo.
    */
    background-position: center 54%;
}


/* =========================================
   DEGRADADO SOBRE LA FOTO
========================================= */

.zona-final::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    background: linear-gradient(
        to bottom,

        #0B0B0B 0%,

        rgba(11, 11, 11, 0.99) 7%,

        rgba(11, 11, 11, 0.95) 18%,

        rgba(11, 11, 11, 0.83) 31%,

        rgba(11, 11, 11, 0.63) 48%,

        rgba(11, 11, 11, 0.41) 66%,

        rgba(11, 11, 11, 0.23) 83%,

        rgba(11, 11, 11, 0.12) 100%
    );
}


/* =========================================
   CONTENIDO DE LA ZONA INFERIOR
========================================= */

.formulario-contenedor {
    width: var(--texto-max);
    max-width: calc(100% - 48px);

    margin: 0 auto;
}


/* =========================================
   EMAIL + BOTÓN
========================================= */

.fila-formulario {
    display: flex;
    align-items: center;

    width: 660px;
    max-width: 100%;

    margin: 0 auto;

    gap: 24px;
}

.fila-formulario input[type="email"] {
    flex: 1;
    min-width: 0;

    height: 52px;

    padding: 0 18px;

    background: rgba(11, 11, 11, 0.93);

    border: 1px solid var(--borde);
    border-radius: 9px;

    color: var(--texto);

    font-family: "Inter", sans-serif;
    font-size: 16px;

    outline: none;
}

.fila-formulario input[type="email"]::placeholder {
    color: var(--borde);

    opacity: 1;
}

.fila-formulario input[type="email"]:focus {
    border-color: var(--texto);
}


/* =========================================
   BOTÓN
========================================= */

.fila-formulario button {
    width: 190px;
    height: 52px;

    flex-shrink: 0;

    border: 0;
    border-radius: 28px;

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

    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 600;

    cursor: pointer;
}


/* =========================================
   CONSENTIMIENTO
========================================= */

.consentimiento {
    display: flex;
    align-items: flex-start;

    width: 100%;

    gap: 9px;

    margin-top: 34px;

    color: #D0CAC0;

    font-size: 15px;
    line-height: 24px;
}

.consentimiento input[type="checkbox"] {
    flex-shrink: 0;

    margin-top: 5px;
}


/* =========================================
   NOTA
========================================= */

.nota {
    width: 100%;

    margin: 28px 0 0;

    color: #D0CAC0;

    font-size: 15px;
    line-height: 24px;
}


/* =========================================
   LOGO FINAL
========================================= */

.logo-inferior {
    display: block;

    width: 155px;
    height: auto;

    margin: 30px auto 0;
}


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

@media (max-width: 1000px) {

    .header {
        padding-left: 40px;
        padding-right: 40px;
    }

    .logo-superior {
        margin-left: 0;
    }

    .zona-final {
        min-height: 560px;

        background-position: center center;
    }
}


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

@media (max-width: 700px) {

    body {
        font-size: 16px;
        line-height: 27px;
    }

    .header {
        padding: 28px 24px 0;
    }

    .logo-superior {
        width: 135px;
        margin-left: 0;
    }

    .intro {
        width: 100%;
        max-width: none;

        padding: 24px 24px 0;
    }

    .foto-perfil {
        width: 78px;
        height: 78px;

        margin-bottom: 32px;
    }

    .intro-texto {
        font-size: 16px;
        line-height: 27px;
    }

    h1 {
        margin: 18px 0 28px;

        font-size: 34px;
        line-height: 44px;
    }

    .contenido {
        width: 100%;
        max-width: none;

        padding: 0 24px;
    }

    .contenido p {
        margin-bottom: 25px;

        font-size: 16px;
        line-height: 27px;
    }

    .zona-final {
        width: 100vw;

        min-height: 700px;

        margin-top: -80px;
        margin-left: calc(50% - 50vw);

        padding: 105px 24px 30px;

        /*
           Pantalla vertical:
           dejamos que la foto recorte
           naturalmente los laterales.
        */
        background-size: cover;

        background-position: center bottom;
    }

    .formulario-contenedor {
        width: 100%;
        max-width: none;
    }

    .fila-formulario {
        width: 100%;

        flex-direction: column;

        gap: 14px;
    }

    .fila-formulario input[type="email"],
    .fila-formulario button {
        width: 100%;
    }

    .consentimiento {
        margin-top: 30px;

        font-size: 14px;
        line-height: 22px;
    }

    .nota {
        margin-top: 28px;

        font-size: 14px;
        line-height: 22px;
    }

    .logo-inferior {
        width: 140px;

        margin-top: 32px;
    }
}