@import url('./variables.css');

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

html,
body{
    overflow-x:hidden;
}

body{

    background:#050505;

    color:#f7f1e8;

    font-family:
    Georgia,
    "Times New Roman",
    serif;

    line-height:1.7;
}

img{

    width:100%;

    display:block;
}

a{

    text-decoration:none;

    color:inherit;
}

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

.lechazo-page{

    width:100%;

    background:#050505;
}

/* ======================================================
TIPOGRAFÍA
====================================================== */

h1,
h2,
h3{
    font-weight:400;
}

h1{

    font-size:clamp(4rem,10vw,6.3rem);

    line-height:.88;

    letter-spacing:-.075em;
}

h2{

    font-size:clamp(2.6rem,6vw,4.8rem);

    line-height:.92;

    letter-spacing:-.065em;
}

h3{

    font-size:clamp(1.8rem,3vw,2.5rem);

    line-height:.98;

    letter-spacing:-.05em;
}

p{

    font-size:1rem;

    line-height:1.78;
}

/* ======================================================
LAYOUT
====================================================== */

.container{

    width:min(1200px,90%);

    margin:auto;
}

/* ======================================================
HERO
====================================================== */

.hero{

    position:relative;

    min-height:920px;

    max-height:1100px;

    height:100vh;

    display:flex;

    align-items:flex-start;

    overflow:hidden;

    padding-top:170px;

    background-image:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.25) 100%
    ),
    url("../assets/img/horno-lena-tradicional.webp");

    background-size:cover;

    background-position:center 28%;
}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at bottom center,
        rgba(255,120,20,.08),
        transparent 48%
    );
}

.hero-content{

    position:relative;

    z-index:2;

    width:min(1100px,90%);

    margin:auto;
}

.hero-subtitle{

    display:inline-block;

    margin-bottom:1.2rem;

    padding:
    .42rem
    .78rem;

    border:
    1px solid rgba(255,255,255,.08);

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

    backdrop-filter:blur(4px);

    color:
    rgba(255,255,255,.72);

    font-size:.66rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    transition:
    border .3s ease,
    color .3s ease;
}

.hero-subtitle:hover{

    border-color:
    rgba(214,161,93,.26);

    color:#d6a15d;
}

.hero h1{

    max-width:620px;

    color:#f7f1e8;

    text-shadow:
    0 16px 42px rgba(0,0,0,.32);
}

.hero-highlight{

    margin-top:1rem;

    color:#cda56d;

    font-size:
    clamp(2rem,5vw,3rem);

    line-height:.95;

    letter-spacing:-.05em;
}

.hero p{

    max-width:520px;

    margin-top:1.6rem;

    color:
    rgba(255,255,255,.80);
}

/* ======================================================
BUTTONS
====================================================== */

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:2rem;
}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:auto;

    min-width:240px;

    padding:
    1rem
    1.8rem;

    border-radius:6px;

    background:#6E0F1F;

    border:
    1px solid rgba(255,255,255,.04);

    color:#fff;

    font-size:.74rem;

    letter-spacing:.14em;

    text-transform:uppercase;

    transition:
    transform .3s ease,
    background .3s ease,
    border .3s ease;
}

.btn-primary:hover{

    background:#5d0d1a;

    transform:
    translateY(-2px);
}

/* ======================================================
LECHAZO MONUMENTO
====================================================== */

.lechazo-monumento{

    position:relative;

    z-index:10;

    margin-top:-3.5rem;

    padding:
    0
    1rem
    3rem;
}

.lechazo-content{

    position:relative;

    overflow:hidden;

    display:grid;

    grid-template-columns:
    1.1fr
    1fr;

    align-items:stretch;

    max-width:1200px;

    margin:0 auto;

    border-radius:20px;

    background:
    linear-gradient(
        135deg,
        #18110d 0%,
        #120907 100%
    );

    border:
    1px solid rgba(255,255,255,.06);

    box-shadow:
    0 24px 60px rgba(0,0,0,.48);

    backdrop-filter:blur(2px);
}

.lechazo-content::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at right center,
        rgba(255,120,20,.05),
        transparent 42%
    );

    pointer-events:none;
}

.lechazo-text{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
    2rem
    1.8rem;
}

.lechazo-label{

    display:inline-block;

    margin-bottom:.9rem;

    color:#d6a15d;

    font-size:.66rem;

    letter-spacing:.24em;

    text-transform:uppercase;
}

.lechazo-text h2{

    color:#f7f1e8;
}

.lechazo-divider{

    width:72px;

    height:2px;

    margin:
    1.2rem
    0;

    background:
    linear-gradient(
        to right,
        #d6a15d,
        transparent
    );
}

.lechazo-description{

    max-width:360px;

    color:
    rgba(247,241,232,.74);
}

.lechazo-price{

    margin-top:1.4rem;

    color:#f7f1e8;

    font-size:1.7rem;

    letter-spacing:-.04em;
}

.lechazo-price span{

    display:block;

    margin-top:.45rem;

    color:#d6a15d;

    font-size:.95rem;

    letter-spacing:.03em;

    opacity:.92;
}

.lechazo-visual{

    position:relative;

    min-height:520px;
}

.lechazo-image{

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
        to left,
        rgba(0,0,0,.06),
        rgba(0,0,0,.34)
    ),
    url("../assets/img/lechazo-asado-horno-lena.webp");

    background-size:cover;

    background-position:center 38%;
}

/* ======================================================
FIRE SECTION
====================================================== */

.fire-section{

    position:relative;

    min-height:70vh;

    display:flex;

    align-items:center;

    padding:
    6rem
    1.5rem;

    overflow:hidden;

    background-image:
    linear-gradient(
        rgba(0,0,0,.54),
        rgba(0,0,0,.76)
    ),
    url("../assets/img/parrilla-brasa-medieval.webp");

    background-size:cover;

    background-position:center;
}

.fire-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at bottom center,
        rgba(255,120,20,.06),
        transparent 48%
    );
}

.fire-content{

    position:relative;

    z-index:2;

    width:min(1100px,90%);

    margin:auto;
}

.section-tag{

    display:inline-block;

    margin-bottom:1rem;

    color:#d6a15d;

    font-size:.68rem;

    letter-spacing:.22em;

    text-transform:uppercase;
}

.fire-content h2{

    max-width:720px;

    color:#f7f1e8;

    text-shadow:
    0 10px 24px rgba(0,0,0,.24);
}

.fire-content p{

    max-width:520px;

    margin-top:1.4rem;

    color:
    rgba(247,241,232,.76);
}

/* ======================================================
FINAL CTA
====================================================== */

.final-cta{

    position:relative;

    overflow:hidden;

    padding:
    7rem
    1.5rem;

    text-align:center;

    background:
    linear-gradient(
        to bottom,
        #0f0f0f 0%,
        #140b08 100%
    );
}

.final-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at center,
        rgba(255,120,20,.05),
        transparent 48%
    );
}

.final-cta-content{

    position:relative;

    z-index:2;

    max-width:760px;

    margin:auto;
}

.eyebrow{

    display:inline-block;

    margin-bottom:1rem;

    color:#d6a15d;

    font-size:.68rem;

    letter-spacing:.22em;

    text-transform:uppercase;
}

.final-cta h2{

    color:#f7f1e8;
}

.final-cta p{

    max-width:560px;

    margin:
    1.4rem auto
    2rem;

    color:
    rgba(247,241,232,.74);
}

.final-buttons{

    justify-content:center;
}

.final-back{

    margin-top:2.6rem;
}

.back-link{

    color:#d6a15d;

    font-size:.72rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    opacity:.76;

    transition:
    opacity .3s ease;
}

.back-link:hover{

    opacity:1;
}

/* ======================================================
FOOTER
====================================================== */

.footer{

    position:relative;

    overflow:hidden;

    padding:
    4rem
    0;

    background:#090909;

    border-top:
    1px solid rgba(255,255,255,.04);
}

.footer::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:78%;

    height:1px;

    background:
    linear-gradient(
        to right,
        transparent,
        rgba(214,161,93,.12),
        transparent
    );
}

.footer::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at bottom center,
        rgba(120,40,10,.10),
        transparent 65%
    );

    pointer-events:none;
}

.footer-inner{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:2rem;

    width:min(1200px,90%);

    margin:auto;
}

.footer-label{

    display:inline-block;

    margin-bottom:.8rem;

    color:#d6a15d;

    font-size:.66rem;

    letter-spacing:.22em;

    text-transform:uppercase;
}

.footer-brand p{

    max-width:340px;

    color:
    rgba(247,241,232,.56);

    font-size:1rem;

    line-height:1.9;
}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:1rem;
}

.footer-links a{

    color:
    rgba(247,241,232,.82);

    font-size:.9rem;

    transition:
    opacity .3s ease;
}

.footer-links a:hover{

    opacity:.72;
}

/* ======================================================
DESKTOP IMAGE FRAMING
====================================================== */

@media(min-width:981px){

    .lechazo-image{

        background-size:cover;

        background-position:center center;
    }
}

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

@media(max-width:980px){

    .hero{

        min-height:auto;

        max-height:none;

        height:auto;

        padding:
        150px
        0
        90px;
    }

    .buttons{

        flex-direction:column;
    }

    .btn-primary{

        width:100%;

        min-width:auto;
    }

    .lechazo-content{

        grid-template-columns:1fr;
    }

    .lechazo-visual{

        order:-1;

        min-height:280px;
    }

    .footer-inner{

        flex-direction:column;
    }
}

/* ======================================================
MOBILE
====================================================== */

@media(max-width:768px){

    .hero{

        padding-top:40px;
    }

    .hero-content{

        padding-top:20px;
    }

    .lechazo-monumento{

        margin-top:-2rem;
    }

    h1{

        font-size:3rem;

        line-height:.9;
    }
}

@media(max-width:480px){

    .hero{

        padding:
        40px
        0
        70px;

        background-position:62% center;
    }

    h2{

        font-size:3rem;
    }

    .hero-content{

        width:90%;
    }

    .hero p{

        font-size:.98rem;
    }

    .lechazo-text{

        padding:
        1.5rem
        1.3rem
        1.7rem;
    }

    .lechazo-visual{

        min-height:220px;
    }

    .fire-section{

        min-height:72vh;

        padding:
        2rem
        1.4rem;
    }

    .fire-content{

        min-height:calc(78vh - 4rem);

        display:flex;

        flex-direction:column;

        justify-content:space-between;

        text-align:center;
    }

    .section-tag{

        margin-top:.5rem;

        margin-bottom:1rem;
    }

    .fire-content h2{

        margin:0 auto;

        line-height:.92;
    }

    .fire-content p{

        margin:0 auto 1rem;

        max-width:420px;

        line-height:2;
    }

    .final-cta{

        padding:
        5rem
        1.4rem;
    }

    .footer{

        padding:
        3rem
        0;
    }
}

/* ======================================================
HERO TEXT RESPONSIVE
====================================================== */

.hero-text-mobile{
    display:none;
}

@media(max-width:768px){

    .hero-text-desktop{
        display:none;
    }

    .hero-text-mobile{
        display:inline;
    }
}


/* ======================================================
DESKTOP FIRE SECTION - GRADIENT + BRIGHT EMBERS + SPACING
====================================================== */

@media(min-width:981px){

    .fire-section{

        background-image:
        linear-gradient(
            to right,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.72) 20%,
            rgba(0,0,0,.42) 35%,
            rgba(0,0,0,0) 50%
        ),
        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.30)
        ),
        url("../assets/img/parrilla-brasa-medieval.webp");
    }

    .section-tag{
        margin-bottom:1.5rem;
    }

    .fire-content h2{
        margin-bottom:2rem;
        line-height:.98;
    }

    .fire-content p{
        margin-top:0;
        line-height:2;
    }
}


/* ======================================================
MOBILE FIRE SECTION - BRASAS VISIBLES
====================================================== */

@media(max-width:768px){

    .fire-section{

        background-image:
        linear-gradient(
            to top,
            rgba(0,0,0,.85) 0%,
            rgba(0,0,0,.55) 20%,
            rgba(0,0,0,.15) 40%,
            rgba(0,0,0,0) 60%
        ),
        url("../assets/img/parrilla-brasa-medieval-mobile.webp");

        background-size:cover;

        background-position:center 45%;
    }

    .fire-overlay{

        background:
        radial-gradient(
            circle at bottom center,
            rgba(255,120,20,.12),
            transparent 55%
        );
    }
}


/* ======================================================
MOBILE FIRE SECTION - MOVE TITLE BLOCK UP
====================================================== */

@media(max-width:480px){

    .fire-content{

        padding-top:0;

        min-height:calc(72vh - 4rem);
    }

    .section-tag{

        margin-top:-2rem;
        margin-bottom:.25rem;
    }

    .fire-content h2{

        margin-top:0;
        margin-bottom:0;
    }
}


/* ======================================================
MOBILE FIRE SECTION - TITLE TOP / TEXT BOTTOM
====================================================== */

@media(max-width:480px){

    .fire-content{

        min-height:calc(72vh - 4rem);

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        text-align:center;
    }

    .section-tag{

        margin-top:-1rem;
        margin-bottom:.25rem;
    }

    .fire-content h2{

        margin:0 auto;
    }

    .fire-content p{

        margin-top:auto;

        margin-bottom:1rem;

        max-width:420px;

        line-height:2;
    }
}