/* =========================================================
   PÁGINA: NUESTRO CAFÉ
   Napo & Lola
   ========================================================= */


/* =========================================================
   BLOQUES GENERALES
   ========================================================= */

.cafe-bloque {
    position: relative;
    padding-block: clamp(65px, 8vw, 100px);
	padding-bottom: clamp(55px, 7vw, 90px);
    background: var(--marfil);
    color: var(--cafe);
}


/* =========================================================
   HERO
   NO TOCAR
   ========================================================= */

.cafe-hero {
    position: relative;
    min-height: calc(100vh - 92px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--cafe);
    background-image: url("../images/cafe/hero_cafe.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cafe-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(81, 56, 44, 0.62),
            rgba(81, 56, 44, 0.24)
        );
    z-index: 1;
}

.cafe-hero__content {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 40px), 800px);
    margin-inline: auto;
    text-align: center;
    color: var(--marfil);
}

.cafe-hero__eyebrow {
    margin-bottom: 16px;
    font-family: var(--fuente-texto);
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.cafe-hero__title {
    margin-bottom: 24px;
    font-family: var(--fuente-titulos);
    font-size: clamp(48px, 7vw, 82px);
    font-weight: 500;
    line-height: 1.05;
}

.cafe-hero__description {
    max-width: 620px;
    margin-inline: auto;
    font-family: var(--fuente-texto);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
}



/* ==========================
INTRODUCCIÓN — NUESTRO CAFÉ
============================ */

.cafe-intro {
background: var(--marfil);
color: var(--cafe);
}

.cafe-intro__header {
min-height: min(620px, 72vh);


padding-top: clamp(80px, 10vw, 130px);
padding-bottom: clamp(80px, 10vw, 130px);

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

text-align: center;


}

.cafe-intro__eyebrow {
margin-bottom: 16px;


font-family: var(--fuente-texto);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.24em;
text-transform: uppercase;

color: var(--verde-olivo);


}

.cafe-intro__title {
font-family: var(--fuente-titulos);
font-size: clamp(48px, 7vw, 82px);
font-weight: 500;
line-height: 1;
}

.cafe-intro__floritura {
width: clamp(130px, 17vw, 210px);
height: 34px;


margin: 25px auto 23px;


}

.cafe-intro__text {
max-width: 620px;


font-size: clamp(14px, 1.35vw, 16px);
line-height: 1.9;
font-weight: 300;


}



/* =========================================================
   TÍTULOS Y TEXTOS GENERALES
   ========================================================= */

.cafe-bloque__numero {
    margin-bottom: 12px;
    font-family: var(--fuente-texto);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--beige);
}

.cafe-bloque__eyebrow {
    margin-bottom: 17px;
    font-family: var(--fuente-texto);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--verde-olivo);
}

.cafe-bloque__title {
    max-width: 620px;
    margin-bottom: 30px;
    font-family: var(--fuente-titulos);
    font-size: clamp(38px, 4.5vw, 60px);
    font-weight: 500;
    line-height: 1.08;
}

.cafe-bloque__copy {
    max-width: 560px;
}

.cafe-bloque__copy p {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.95;
    font-weight: 300;
}

.cafe-bloque__copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   CABECERA DE SECCIONES
   ========================================================= */

.cafe-seccion__header {
    max-width: 700px;
    margin-bottom: 70px;
}

.cafe-seccion__header .cafe-bloque__title {
    margin-bottom: 24px;
}

.cafe-seccion__intro {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.95;
    font-weight: 300;
}


/* =========================================================
   ESPACIOS PARA FOTOGRAFÍAS
   ========================================================= */

.cafe-media {
    position: relative;
    overflow: hidden;
}

.cafe-media__placeholder {
    width: 100%;
    height: 100%;
    min-height: 420px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(152, 159, 117, 0.18),
            rgba(218, 201, 169, 0.28)
        );

    border: 1px solid rgba(81, 56, 44, 0.10);

    color: rgba(81, 56, 44, 0.52);

    font-family: var(--fuente-texto);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.cafe-media figcaption {
    margin-top: 12px;
    font-family: var(--fuente-texto);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: rgba(81, 56, 44, 0.62);
}


/* =========================================================
   01 — EL ORIGEN
   ========================================================= */

.cafe-origen__grid {
    display: grid;
    grid-template-columns: 61.8% 38.2%;
    align-items: stretch;
    gap: 0;

    width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
}

.cafe-origen__imagen {
    position: relative;
    height: 820px;
    min-height: 0;
    margin: 0;

    overflow: hidden;

    -webkit-mask-image:
        linear-gradient(
            to right,
            #000 0%,
            #000 55%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            #000 0%,
            #000 55%,
            transparent 100%
        );
}



.cafe-origen__imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.cafe-origen__texto {
    max-width: none;
    align-self: center;
    padding: 40px 0 40px clamp(35px, 5vw, 70px);
}

.cafe-origen {
	padding-top: 35px;
    padding-bottom: clamp(55px, 7vw, 90px);
}


/* =========================================================
   02 — NUESTRO CAFÉ / VARIEDADES
   ========================================================= */

.cafe-variedades {
    padding-top: clamp(55px, 7vw, 90px);
}

.cafe-variedades__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: clamp(25px, 3vw, 45px);
}

.cafe-variedad {
    min-width: 0;
}


/* ---------------------------------------------------------
   Imagen de cada variedad
   --------------------------------------------------------- */

.cafe-variedad__imagen {
    position: relative;
    aspect-ratio: 1 / 1.08;
    margin-bottom: 28px;
    overflow: hidden;
}

.cafe-variedad__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cafe-variedad__imagen .cafe-media__placeholder {
    min-height: 0;
}


/* ---------------------------------------------------------
   Capa hover de la variedad
   --------------------------------------------------------- */

.cafe-variedad__overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 35px;

    background: rgba(81, 56, 44, 0.48);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity var(--transicion),
        visibility var(--transicion),
        transform var(--transicion);
}

.cafe-variedad__overlay p {
    max-width: 360px;

    margin: 0;

    color: var(--marfil);

    font-family: var(--fuente-texto);
    font-size: 13px;
    font-weight: 300;
    line-height: 1.85;

    text-align: center;
}

.cafe-variedad__imagen:hover .cafe-variedad__overlay {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ---------------------------------------------------------
   Información de la variedad
   --------------------------------------------------------- */

.cafe-variedad__contenido h3 {
    margin-bottom: 15px;
    font-family: var(--fuente-titulos);
    font-size: 25px;
    font-weight: 500;
}

.cafe-variedad__descripcion {
    min-height: 60px;
    font-size: 14px;
    line-height: 1.85;
    font-weight: 300;
}

.cafe-variedad__dato {
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid rgba(81, 56, 44, 0.12);
    font-family: var(--fuente-titulos);
    font-size: 13px;
    font-style: italic;
}


/* =========================================================
   DIVISORES
   ========================================================= */

.cafe-divider {
    height: 70px;
    margin-top: clamp(35px, 5vw, 65px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cafe-divider span {
    display: block;
    width: min(100%, 860px);
    height: 3px;

    background:
        rgba(81, 56, 44, 0.28);

    -webkit-mask-image:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0) 100%
        );

    mask-image:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0) 100%
        );
}


/* =========================================================
   03 — EL PROCESO
   "Del fruto a la taza"
   ========================================================= */

/*
   La sección se organiza en DOS FILAS:

   FILA 1:
   Cosecha | Procesamiento | Secado | Trillado

   FILA 2:
   Tueste | Molienda | Empaque

   La segunda fila queda centrada.
*/


.cafe-proceso__filas {
    width: 100%;
    margin-top: 35px;
}

.cafe-proceso__fila {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(25px, 3vw, 45px);
    width: 100%;
}

.cafe-proceso__fila--segunda {
    margin-top: 70px;
}

.cafe-proceso__paso {
    flex: 0 1 270px;
    width: 270px;
    min-width: 0;
    text-align: center;
}

.cafe-proceso__paso > span {
    display: block;
    margin-bottom: 18px;

    font-family: var(--fuente-texto);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.18em;
    color: var(--beige);
}


/* ---------------------------------------------------------
   Imagen de cada etapa
   --------------------------------------------------------- */

.cafe-proceso__imagen {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.08;
    margin-bottom: 28px;
    overflow: hidden;
}

.cafe-proceso__imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cafe-proceso__imagen .cafe-media__placeholder {
    min-height: 0;
}


/* ---------------------------------------------------------
   Hover de cada etapa
   La capa permanece dentro de la fotografía
   y entra desde el borde derecho.
   --------------------------------------------------------- */

.cafe-proceso__overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(81, 56, 44, 0.48);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);

    opacity: 0;
    visibility: hidden;

    transform: translateX(100%);

    pointer-events: none;

    transition:
        transform 0.45s ease,
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.cafe-proceso__overlay p {
    max-width: 320px;
    margin: 0;

    color: var(--marfil);

    font-family: var(--fuente-texto);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.8;

    text-align: center;
}

.cafe-proceso__imagen:hover .cafe-proceso__overlay {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


/* ---------------------------------------------------------
   Nombre de cada etapa
   --------------------------------------------------------- */

.cafe-proceso__paso h3 {
    margin-bottom: 0;

    font-family: var(--fuente-titulos);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
}

.cafe-proceso {
    padding-bottom: clamp(55px, 7vw, 90px);
}


/* =========================================================
   05 — LA EXPERIENCIA
   ========================================================= */

.cafe-disfrutar {
    background: var(--marfil);
    padding-top: clamp(65px, 8vw, 100px);
    padding-bottom: clamp(55px, 7vw, 90px);
}

.cafe-disfrutar__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(30px, 5vw, 70px);
}

.cafe-disfrutar__imagen {
    aspect-ratio: 1.25 / 1;

    margin-bottom: 28px;
}

.cafe-disfrutar__imagen .cafe-media__placeholder {
    min-height: 0;
}

.cafe-disfrutar__contenido h3 {
    margin-bottom: 15px;

    font-family: var(--fuente-titulos);
    font-size: 27px;
    font-weight: 500;
}

.cafe-disfrutar__contenido p {
    max-width: 500px;

    font-size: 14px;
    line-height: 1.85;
    font-weight: 300;
}


/* =========================================================
   06 — NAPO & LOLA
   "Un café para compartir"
   ========================================================= */

.cafe-compartir {
    padding-top: clamp(55px, 7vw, 90px);
    padding-bottom: clamp(110px, 14vw, 180px);

    text-align: center;
}

.cafe-compartir__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cafe-compartir__title {
    max-width: 850px;

    margin-bottom: 32px;

    font-family: var(--fuente-momentos);

    font-size:
        clamp(48px, 6.5vw, 82px);

    font-weight: 400;
    font-style: italic;

    line-height: 1.05;
}

.cafe-compartir__copy {
    max-width: 620px;

    margin-bottom: 55px;
}

.cafe-compartir__copy p {
    margin-bottom: 18px;

    font-size: 15px;
    line-height: 1.95;
    font-weight: 300;
}

.cafe-compartir__copy p:last-child {
    margin-bottom: 0;
}

.cafe-compartir__imagen {
    width: min(100%, 850px);
}

.cafe-compartir__imagen .cafe-media__placeholder {
    min-height: 480px;
}


/* =========================================================
   BOTÓN — VOLVER AL INICIO
   ========================================================= */

.cafe-volver {
    padding:
        0
        0
        clamp(90px, 11vw, 145px);

    text-align: center;
}

.cafe-volver__button {
    display: inline-flex;

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

    min-height: 46px;

    padding: 0 28px;

    border-radius: var(--radio-suave);

    background-color: var(--verde-olivo);

    color: var(--marfil);

    font-family: var(--fuente-texto);
    font-size: 12px;
    font-weight: 300;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    transition:
        background-color var(--transicion),
        transform var(--transicion);
}

.cafe-volver__button:hover {
    background-color: var(--cafe);

    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    /* -----------------------------------------------------
       01 — ORIGEN
       ----------------------------------------------------- */

    .cafe-origen__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .cafe-origen__texto {
        max-width: 680px;
    }

    .cafe-origen__imagen {
        width: min(100%, 680px);

        min-height: 500px;

        justify-self: center;
    }


    /* -----------------------------------------------------
       02 — VARIEDADES
       ----------------------------------------------------- */

    .cafe-variedades__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------------------
       03 — PROCESO
       ----------------------------------------------------- */

  .cafe-proceso__fila {
        gap: 25px;
        flex-wrap: wrap;
    }

    .cafe-proceso__fila--segunda {
        width: 75%;
        margin-inline: auto;
        margin-top: 60px;
    }

    .cafe-proceso__paso {
        flex: 1 1 180px;
        width: 180px;
        max-width: 220px;
    }

    .cafe-proceso__overlay {
        padding: 24px;
    }

    .cafe-proceso__overlay p {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       05 — EXPERIENCIA
       ----------------------------------------------------- */

    .cafe-disfrutar__grid {
        gap: 40px;
    }
}


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

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .cafe-hero {
        min-height: calc(100vh - 78px);
    }

    .cafe-hero__content {
        width:
            min(
                calc(100% - 30px),
                600px
            );
    }

    .cafe-hero__eyebrow {
        font-size: 11px;
        letter-spacing: 0.18em;
    }

    .cafe-hero__title {
        font-size:
            clamp(42px, 12vw, 58px);

        margin-bottom: 20px;
    }

    .cafe-hero__description {
        font-size: 14px;
        line-height: 1.7;
    }


    /* -----------------------------------------------------
       BLOQUES GENERALES
       ----------------------------------------------------- */

    .cafe-bloque {
        padding-block: 55px;
    }


    /* -----------------------------------------------------
       TÍTULOS
       ----------------------------------------------------- */

    .cafe-bloque__title {
        font-size:
            clamp(36px, 10vw, 52px);

        margin-bottom: 24px;
    }

    .cafe-bloque__copy p,
    .cafe-seccion__intro,
    .cafe-disfrutar__contenido p,
    .cafe-compartir__copy p {
        font-size: 14px;
        line-height: 1.85;
    }


    /* -----------------------------------------------------
       MEDIA
       ----------------------------------------------------- */

    .cafe-media__placeholder {
        min-height: 390px;
    }

    .cafe-origen__imagen {
        min-height: 430px;
    }


    /* -----------------------------------------------------
       02 — VARIEDADES
       ----------------------------------------------------- */

    .cafe-variedades__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .cafe-variedad__imagen {
        aspect-ratio: 1 / 1;
    }


    /* -----------------------------------------------------
       CABECERAS
       ----------------------------------------------------- */

    .cafe-seccion__header {
        margin-bottom: 50px;
    }


    /* =====================================================
       03 — PROCESO EN MÓVIL
       ===================================================== */

    .cafe-proceso__filas {
        margin-top: 20px;
    }

    .cafe-proceso__fila {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .cafe-proceso__fila--segunda {
        width: 100%;
        margin-top: 55px;
    }

    .cafe-proceso__paso {
        width: min(100%, 420px);
        max-width: 420px;
        flex: none;
        margin-bottom: 45px;
    }

    .cafe-proceso__paso:last-child {
        margin-bottom: 0;
    }

    .cafe-proceso__imagen {
        aspect-ratio: 1 / 1;
        margin-bottom: 20px;
    }

    .cafe-proceso__paso > span {
        margin-bottom: 14px;
    }

    .cafe-proceso__paso h3 {
        font-size: 22px;
    }

    .cafe-proceso__overlay {
        padding: 25px;
        background: rgba(81, 56, 44, 0.52);
        transform: translateX(100%);
    }

    .cafe-proceso__imagen:hover .cafe-proceso__overlay {
        transform: translateX(0);
    }

    .cafe-proceso__overlay p {
        font-size: 12px;
        line-height: 1.8;
    }


    /* -----------------------------------------------------
       05 — EXPERIENCIA
       ----------------------------------------------------- */

    .cafe-disfrutar__grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .cafe-disfrutar__imagen {
        aspect-ratio: 1.15 / 1;
    }


    /* -----------------------------------------------------
       06 — COMPARTIR
       ----------------------------------------------------- */

    .cafe-compartir {
        padding-block: 90px;
    }

    .cafe-compartir__title {
        font-size:
            clamp(42px, 12vw, 58px);
    }

    .cafe-compartir__imagen
    .cafe-media__placeholder {
        min-height: 390px;
    }


    /* -----------------------------------------------------
       DIVISORES
       ----------------------------------------------------- */

    .cafe-divider {
        height: 55px;

        margin-top: 30px;
    }


    /* -----------------------------------------------------
       BOTÓN
       ----------------------------------------------------- */

    .cafe-volver {
        padding-bottom: 90px;
    }

    .cafe-volver__button {
        min-height: 44px;

        padding-inline: 22px;
    }
}