/* =========================================================
   BODEGA MANYOSA
========================================================= */

body.bodega-page{

    background:#0f0907;
    color:#f5eee7;

    font-family:
    "Cormorant Garamond",
    serif;

    overflow-x:hidden;
}

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

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

a{
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

button{
    font-family:inherit;
}

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

.bodega-hero{

    position:relative;

    min-height:920px;

    max-height:1100px;

    display:flex;
    align-items:center;

    padding:
    0 7vw 140px;

    overflow:hidden;

    background-image:
    linear-gradient(
        90deg,
        rgba(0,0,0,0.62) 0%,
        rgba(0,0,0,0.34) 42%,
        rgba(0,0,0,0.02) 100%
    ),
    linear-gradient(
        180deg,
        rgba(0,0,0,0.02) 0%,
        rgba(0,0,0,0.42) 100%
    ),
    url("../assets/img/BODEGA/Bodega-Medieval---Vinos-en-una-fortaleza-medieval.webp");

    background-size:cover;

    background-position:center 30%;

    isolation:isolate;
}

.bodega-hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at right center,
        rgba(255,120,20,0.08),
        transparent 48%
    );

    z-index:1;
}

.bodega-hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:220px;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,0),
        #0f0907
    );

    z-index:2;
}

/* =========================================================
   BACK BUTTON
========================================================= */

.bodega-back-home{

    position:absolute;

    top:42px;
    left:7vw;

    z-index:5;

    color:#f0d7b7;

    font-size:0.78rem;
    font-weight:600;

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

    transition:0.3s ease;
}

.bodega-back-home:hover{

    opacity:0.72;
}

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

.bodega-hero-content{

    position:relative;
    z-index:5;

    max-width:650px;

    padding-top:80px;
}

.hero-mini{

    display:block;

    margin-bottom:24px;

    color:#d8ab6a;

    font-size:0.85rem;
    font-weight:600;

    letter-spacing:0.28em;
    text-transform:uppercase;
}

.bodega-hero h1{

    font-size:clamp(5.8rem,10vw,9rem);

    line-height:0.84;
    font-weight:500;

    color:#fffaf4;

    max-width:520px;

    margin-bottom:38px;
}

/* =========================================================
   DIVIDERS
========================================================= */

.hero-divider,
.featured-divider,
.esencias-divider{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:96px;

    height:16px;
}

.hero-divider::before,
.featured-divider::before,
.esencias-divider::before{

    content:"";

    width:96px;

    height:1px;

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

.hero-divider::after,
.featured-divider::after,
.esencias-divider::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%);

    width:10px;
    height:10px;

    border-radius:50%;

    border:
        2px solid #c48b54;
}

/* HERO */

.hero-divider{

    margin-bottom:38px;
}

.hero-divider::after{

    background:#0f0907;
}

/* FEATURED */

.featured-divider{

    margin-bottom:24px;
}

.featured-divider::after{

    background:#130905;
}

/* ESENCIAS */

.esencias-divider{

    margin:
        18px auto 0;
}

.esencias-divider::after{

    background:#120907;
}

.hero-description{

    max-width:420px;

    color:#cfa36c;

    font-size:2rem;
    line-height:1.12;
    font-weight:400;
}

/* =========================================================
   ESENCIAS
========================================================= */

.bodega-esencias{

    position:relative;

    z-index:20;

    margin-top:-120px;

    padding:
    0 7vw 60px;
}

.esencias-box{

    max-width:1220px;

    margin-left:auto;
    margin-right:auto;

    background:
    linear-gradient(
        180deg,
        rgba(18,9,7,0.68),
        rgba(10,5,4,0.76)
    );

    border:1px solid rgba(212,174,119,0.16);

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(5px);

    box-shadow:
    0 15px 40px rgba(0,0,0,0.22);
}

.esencias-title{

    text-align:center;

    padding-top:30px;
}

.esencias-title span{

    color:#d7ad74;

    font-size:0.82rem;
    font-weight:600;

    letter-spacing:0.24em;
    text-transform:uppercase;
}

.esencias-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.esencia-item{

    position:relative;

    padding:50px 34px;

    text-align:center;
}

.esencia-item:not(:last-child)::after{

    content:"";

    position:absolute;

    top:28px;
    right:0;

    width:1px;
    height:calc(100% - 56px);

    background:
    rgba(212,174,119,0.08);
}

.esencia-icon{

    margin-bottom:24px;
}

.esencia-icon svg{

    width:36px;
    height:36px;

    stroke:#d4ae77;
    stroke-width:1.5;
}

.esencia-item p{

    color:#eadccd;

    font-size:1.08rem;
    line-height:1.5;
}

/* =========================================================
   FEATURED WINE
========================================================= */

.featured-wine{

    padding:
    24px 7vw 70px;

    background:
    #0f0907;
}

.featured-content{

    max-width:1120px;

    margin:0 auto;

    display:flex;
    align-items:stretch;

    background:
    linear-gradient(
        180deg,
        #1b0d07 0%,
        #130905 100%
    );

    border-radius:30px;

    overflow:hidden;

    border:
    1px solid rgba(212,174,119,0.16);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.42);
}

.featured-text{

    width:40%;

    padding:
    64px 54px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.featured-label{

    display:inline-block;

    margin-bottom:18px;

    color:#d7ad74;

    font-size:0.72rem;
    font-weight:600;

    letter-spacing:0.24em;
    text-transform:uppercase;
}

.featured-text h2{

    font-size:clamp(2.8rem,4vw,4.2rem);

    line-height:0.92;
    font-weight:500;

    color:#fffaf4;

    margin-bottom:24px;
}

.featured-text p{

    max-width:320px;

    color:#dcc5a7;

    font-size:1.12rem;
    line-height:1.42;

    margin-bottom:28px;
}

.featured-price{

    color:#cfa36c;

    font-size:2.1rem;
    font-weight:500;

    letter-spacing:0.02em;

    line-height:1;

    margin-top:6px;
}

.featured-image{

    width:60%;

    min-height:520px;

    background-image:
    linear-gradient(
        180deg,
        rgba(0,0,0,0.06) 0%,
        rgba(0,0,0,0.34) 100%
    ),
    url("../assets/img/BODEGA/abadia-mantrus--fuego--idilico.webp");

    background-size:cover;

    background-position:center center;

    position:relative;
}

/* =========================================================
   CATEGORÍAS VINO
========================================================= */

.bodega-categorias{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:12px;

    padding:
    0 7vw 70px;
}

.vino-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    min-height:500px;

    display:flex;
    flex-direction:column;

    background:#110605;

    border:
    1px solid rgba(212,174,119,0.16);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(212,174,119,0.03);
}

.tintos-card::before,
.blancos-card::before,
.cavas-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:180px;

    background-size:cover;
    background-position:center;

    opacity:0.82;

    z-index:0;
}

.tintos-card::before{

    background-image:
    url("../assets/img/BODEGA/Tintos---Vinos-tintos-con-carácter-en-una-fortaleza-medieval.webp");
}

.blancos-card::before{

    background-image:
    url("../assets/img/BODEGA/Blancos - Vinos blancos frescos en una fortaleza medieval.webp");

    background-position:center 35%;
}

.cavas-card::before{

    background-image:
    url("../assets/img/BODEGA/Cavas-y-rosados---Espumosos-y-rosados-en-una-fortaleza-medieval.webp");
}

.vino-card-overlay{

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:180px;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.16) 35%,
        rgba(17,6,5,0.78) 100%
    );

    z-index:1;
}

.vino-card-top,
.vino-list,
.vino-more{

    position:relative;
    z-index:2;
}

.vino-card-top{

    padding:
    28px 34px 0;
}

.vino-card-title{

    display:flex;
    align-items:center;

    gap:14px;
}

.vino-card-title svg{

    width:24px;
    height:24px;

    stroke:#d7ad74;
    stroke-width:1.7;
}

.vino-card-title h3{

    color:#fff7f0;

    font-size:3rem;

    line-height:0.92;

    letter-spacing:-0.02em;

    font-weight:500;
}

.vino-list{

    display:flex;
    flex-direction:column;

    gap:34px;

    padding:
    60px 34px 0;
}

.vino-item{

    display:flex;
    justify-content:space-between;
    gap:18px;
}

.vino-info h4{

    color:#f4ede7;

    font-size:1.48rem;
    font-weight:500;

    line-height:1.12;

    margin-bottom:6px;
}

.vino-info span{

    color:#c69557;

    font-size:1rem;
}

.vino-item strong{

    color:#d8a158;

    font-size:1.22rem;

    white-space:nowrap;
}

.vino-extra{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
    max-height .4s ease,
    opacity .3s ease;
}

.expanded-card.active .vino-extra{

    max-height:220px;

    opacity:1;

    margin-top:10px;
}

.toggle-vinos{

    margin-top:auto;

    padding:
    34px;

    background:none;
    border:none;

    cursor:pointer;

    text-align:left;
}

.vino-more{

    color:#cfa36c;

    font-size:0.9rem;
    font-weight:700;

    letter-spacing:0.16em;
    text-transform:uppercase;
}

/* =========================================================
   VINO CASA
========================================================= */

.vino-casa-banner{

    position:relative;

    margin:
    0 7vw 26px;

    min-height:250px;

    border-radius:24px;

    overflow:hidden;

    display:flex;
    align-items:center;

    border:
    1px solid rgba(212,174,119,0.16);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.34);

    background-image:
    linear-gradient(
        90deg,
        rgba(14,7,5,0.68) 0%,
        rgba(14,7,5,0.42) 34%,
        rgba(14,7,5,0.06) 100%
    ),
    url("../assets/img/BODEGA/Vino-de-la-casa---El-vino-para-compartir-en-una-fortaleza-medieval.webp");

    background-size:cover;

    background-position:center center;
}

.vino-casa-content{

    position:relative;
    z-index:2;

    max-width:420px;

    padding:
    48px 54px;
}

.vino-casa-content span{

    display:inline-block;

    margin-bottom:14px;

    color:#d7ad74;

    font-size:0.72rem;
    font-weight:600;

    letter-spacing:0.24em;
    text-transform:uppercase;
}

.vino-casa-content h2{

    color:#fff7f0;

    font-size:clamp(2.2rem,4vw,3.8rem);

    line-height:0.95;
    font-weight:500;

    margin-bottom:18px;
}

.vino-casa-content p{

    color:#dcc5a7;

    font-size:1.15rem;

    line-height:1.45;

    max-width:320px;

    margin-bottom:24px;
}

.vino-casa-price{

    color:#d7a05d;

    font-size:2rem;
    font-weight:500;
}

/* =========================================================
   EXPERIENCIAS
========================================================= */

.vino-experiencias{

    position:relative;

    margin:
    0 7vw 34px;

    min-height:140px;

    border-radius:24px;

    overflow:hidden;

    display:flex;
    align-items:center;

    border:
    1px solid rgba(212,174,119,0.16);

    background-image:
    linear-gradient(
        180deg,
        rgba(8,4,3,0.08) 0%,
        rgba(8,4,3,0.38) 58%,
        rgba(8,4,3,0.78) 100%
    ),
    url("../assets/img/BODEGA/Experiencias-del-vino---Catas-y-experiencias-en-una-fortaleza-medieval.webp");

    background-size:cover;

    background-position:center center;
}

.vino-experiencias-content{

    position:relative;
    z-index:2;

    padding:
    30px 40px;
}

.vino-experiencias-content span{

    display:inline-block;

    margin-bottom:12px;

    color:#d7ad74;

    font-size:0.68rem;
    font-weight:600;

    letter-spacing:0.24em;
    text-transform:uppercase;
}

.vino-experiencias-content h2{

    color:#fff7f0;

    font-size:clamp(2rem,4vw,3.2rem);

    line-height:0.9;
    font-weight:500;
}

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

.bodega-final-cta{

    padding:
    46px 7vw 70px;
}

.bodega-final-content{

    max-width:1120px;

    margin:0 auto;

    text-align:center;

    padding:
    72px 40px;

    border-radius:26px;

    background:
    linear-gradient(
        180deg,
        #2a0808 0%,
        #170707 100%
    );

    border:
    1px solid rgba(212,174,119,0.16);
}

.bodega-final-content span{

    display:block;

    margin-bottom:18px;

    color:#d7ad74;

    font-size:0.85rem;
    font-weight:600;

    letter-spacing:0.24em;
    text-transform:uppercase;
}

.bodega-final-content h2{

    color:#fff7f0;

    font-size:3.4rem;

    line-height:0.95;
    font-weight:500;

    margin-bottom:20px;
}

.bodega-final-content p{

    max-width:540px;

    margin:
    0 auto 34px;

    color:#dcc5a7;

    font-size:1.2rem;

    line-height:1.5;
}

.final-btn{

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

    min-width:220px;

    padding:
    16px 34px;

    border-radius:6px;

    background:#8d1024;

    color:#fff;

    font-size:0.86rem;
    font-weight:700;

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

    transition:0.3s ease;
}

.final-btn:hover{

    opacity:0.84;
}

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

@media(max-width:1100px){

    .bodega-categorias{

        grid-template-columns:1fr;
    }
}

@media(max-width:980px){

    .esencias-grid{

        grid-template-columns:1fr 1fr;
    }

    .featured-content{

        flex-direction:column;
    }

    .featured-text{

        width:100%;

        order:2;

        padding:
        48px 34px 54px;
    }

    .featured-image{

        width:100%;

        order:1;

        min-height:400px;

        background-position:
        center 58%;
    }
}

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

@media(max-width:640px){

    .bodega-hero{

        min-height:72vh;

        max-height:none;

        align-items:flex-start;

        padding:
        130px 24px 70px;

        background-position:
        92% 22%;
    }

    .bodega-back-home{

        left:24px;
        top:28px;
    }

    .bodega-hero-content{

        padding-top:0;

        max-width:220px;
    }

    .bodega-hero h1{

        font-size:3.9rem;

        line-height:0.88;

        margin-bottom:30px;
    }

    .hero-description{

        max-width:220px;

        font-size:1.18rem;

        line-height:1.32;
    }

    .bodega-esencias{

        margin-top:-95px;

        padding:
        0 24px 20px;
    }

    .esencias-grid{

        grid-template-columns:
        repeat(4,1fr);
    }

    .esencia-item{

        padding:20px 10px;
    }

    .featured-wine{

        padding:
        14px 24px 54px;
    }

    .featured-content{

        border-radius:24px;
    }

    .featured-image{

        min-height:220px;
    }

    .featured-text{

        padding:
        28px 24px 34px;
    }

    .bodega-categorias{

        grid-template-columns:1fr;

        gap:14px;

        padding:
        0 24px 60px;
    }

    .vino-card{

        min-height:auto;
    }

    .vino-card-top{

        padding:
        24px 22px 0;
    }

    .vino-card-title h3{

        font-size:2.8rem;
    }

    .vino-card-title svg{

        width:20px;
        height:20px;
    }

    .vino-list{

        padding:
        54px 22px 0;

        gap:24px;
    }

    .vino-info h4{

        font-size:1.45rem;

        line-height:1.15;
    }

    .vino-info span{

        font-size:1.05rem;
    }

    .vino-item strong{

        font-size:1.18rem;
    }

    .vino-list{

        gap:30px;
    }

    .toggle-vinos{

        padding:24px 22px;
    }

    .vino-casa-banner{

        margin:
        0 24px 18px;

        min-height:220px;
    }

    .vino-casa-content{

        padding:
        28px 24px;
    }

    .vino-experiencias{

        margin:
        0 24px 18px;

        min-height:150px;
    }

    .vino-experiencias-content{

        padding:
        24px;
    }

    .bodega-final-cta{

        padding:
        24px 24px 60px;
    }

    .bodega-final-content{

        padding:
        54px 24px;
    }

    .bodega-final-content h2{

        font-size:2.2rem;
    }

    .final-btn{

        min-width:100%;
    }

    .esencia-item p{

        font-size:0.95rem;
        line-height:1.35;
    }

    .footer-brand p{

        font-size:1rem;
        line-height:1.6;
    }

    .footer-links a{

        font-size:1rem;
    }

    .vino-card,
    .featured-content,
    .vino-casa-banner,
    .vino-experiencias,
    .bodega-final-content,
    .esencias-box{

        border:
        1px solid rgba(212,174,119,0.18);
    }
}