:root{

    --gas-green:#2f3f2f;
    --gas-green-dark:#1d281d;

    --gas-cream:#f7f2e9;
    --gas-gold:#b99a5f;
    --gas-violet:#7b4f8f;

    --gas-text:#4d443b;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--gas-cream);

font-family:'Montserrat',sans-serif;

color:var(--gas-text);

overflow-x:hidden;

}



/*==============================

CONTENEDOR

==============================*/

.gas-container{

width:min(1200px,92%);

margin:auto;

}



/*==============================

HERO

==============================*/

.gas-hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:180px 0;

background:

linear-gradient(

rgba(18,28,20,.70),

rgba(18,28,20,.76)

),

url("/img/gastronomia/comedor.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

color:#fff;

}

.gas-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at center,

rgba(255,255,255,.05),

transparent 65%);

}

.gas-hero .gas-container{

position:relative;

z-index:2;

max-width:850px;

}

.gas-ankh{

font-size:70px;

color:#d8c188;

margin-bottom:25px;

}

.gas-hero span{

display:inline-block;

text-transform:uppercase;

letter-spacing:5px;

font-size:.8rem;

font-weight:700;

color:#d8c188;

margin-bottom:25px;

}

.gas-hero h1{

font-family:'Cormorant Garamond',serif;

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

font-weight:600;

margin-bottom:25px;

}

.gas-hero p{

font-size:1.1rem;

line-height:2;

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

max-width:760px;

margin:auto;

}



/*==============================

BOTONES

==============================*/

.gas-buttons{

margin-top:50px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.gas-btn-primary{

background:var(--gas-violet);

color:#fff;

padding:16px 40px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.gas-btn-primary:hover{

background:#67407b;

transform:translateY(-3px);

color:#fff;

}

.gas-btn-secondary{

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

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

backdrop-filter:blur(15px);

color:#fff;

padding:16px 40px;

border-radius:50px;

text-decoration:none;

transition:.35s;

}

.gas-btn-secondary:hover{

background:#fff;

color:#2f3f2f;

}



/*==============================

ESENCIA

==============================*/

.gas-esencia{

padding:140px 0;

}

.gas-esencia-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:80px;

align-items:center;

}

.gas-text span{

display:block;

text-transform:uppercase;

letter-spacing:5px;

color:var(--gas-violet);

font-size:.8rem;

font-weight:700;

margin-bottom:18px;

}

.gas-text h2{

font-family:'Cormorant Garamond',serif;

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

line-height:1;

margin-bottom:35px;

color:var(--gas-green);

}

.gas-text p{

font-size:1.08rem;

line-height:2;

margin-bottom:24px;

}

.gas-symbol-box{

background:#fff;

padding:60px;

border-radius:30px;

box-shadow:0 25px 70px rgba(0,0,0,.10);

text-align:center;

}

.gas-symbol{

font-size:90px;

color:var(--gas-gold);

margin-bottom:20px;

}

.gas-symbol-box p{

font-family:'Cormorant Garamond',serif;

font-size:34px;

line-height:1.3;

color:var(--gas-green);

}
/*==========================================
GALERÍA
==========================================*/

.gas-gallery{

    padding:140px 0;

    background:#fdfaf5;

}

.gas-title{

    text-align:center;

    margin-bottom:70px;

}

.gas-title span{

    display:block;

    text-transform:uppercase;

    letter-spacing:5px;

    color:var(--gas-violet);

    font-size:.8rem;

    font-weight:700;

    margin-bottom:18px;

}

.gas-title h2{

    font-family:'Cormorant Garamond',serif;

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

    line-height:1.05;

    color:var(--gas-green);

    margin-bottom:25px;

}

.gas-title p{

    max-width:720px;

    margin:auto;

    line-height:2;

    color:#6b6258;

}

.gas-gallery-grid{

    display:grid;

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

    gap:28px;

}

.gas-gallery-grid img{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:28px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    transition:.45s;

}

.gas-gallery-grid img:hover{

    transform:scale(1.03);

}



/*==========================================

MENÚ

==========================================*/

.gas-menu{

    padding:150px 0;

    background:#efe6d6;

}

.gas-menu-grid{

    display:grid;

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

    gap:40px;

    margin-top:80px;

}

.gas-menu-card{

    position:relative;

    background:#fffdf9;

    border-radius:30px;

    padding:45px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}

.gas-menu-card::before{

    content:"☥";

    position:absolute;

    right:-20px;

    top:-30px;

    font-size:180px;

    color:rgba(185,154,95,.06);

    font-family:serif;

}

.gas-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#f4ecde;

    color:var(--gas-gold);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:25px;

}

.gas-menu-card h3{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    color:var(--gas-green);

    margin-bottom:35px;

}

.gas-menu-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.gas-menu-card li{

    padding:18px 0;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.gas-menu-card li:last-child{

    border-bottom:none;

}

.gas-menu-card strong{

    display:block;

    font-size:20px;

    color:#2f3f2f;

    margin-bottom:8px;

}

.gas-menu-card span{

    display:block;

    color:#6d665d;

    line-height:1.8;

    font-size:15px;

}



/*==========================================

COCINA CONSCIENTE

==========================================*/

.gas-conscious{

    padding:140px 0;

    background:

    linear-gradient(

    rgba(31,43,32,.90),

    rgba(31,43,32,.92)

    ),

    url("/img/gastronomia/fuego.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.gas-conscious-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#fff;

}

.gas-ankh-large{

    font-size:100px;

    color:#d7bf8d;

    margin-bottom:30px;

}

.gas-conscious h2{

    font-family:'Cormorant Garamond',serif;

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

    margin-bottom:35px;

}

.gas-conscious p{

    font-size:1.1rem;

    line-height:2.1;

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

}



/*==========================================

CTA

==========================================*/

.gas-cta{

    position:relative;

    padding:160px 0;

    background:

    linear-gradient(

    rgba(18,28,20,.82),

    rgba(18,28,20,.82)

    ),

    url("/img/gastronomia/comedor-noche.jpg");

    background-size:cover;

    background-position:center;

    text-align:center;

    color:#fff;

}

.gas-cta .gas-container{

    position:relative;

    z-index:2;

    max-width:850px;

}

.gas-cta span{

    display:block;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#d8c188;

    font-size:.8rem;

    margin-bottom:20px;

}

.gas-cta h2{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,6vw,5.5rem);

    line-height:1;

    margin-bottom:30px;

}

.gas-cta p{

    line-height:2;

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

    margin-bottom:45px;

}
/*====================================================

RESPONSIVE TABLET

====================================================*/

@media(max-width:1100px){

    .gas-esencia-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .gas-gallery-grid{

        grid-template-columns:1fr 1fr;

    }

    .gas-menu-grid{

        grid-template-columns:1fr;

    }

}



/*====================================================

RESPONSIVE MÓVIL

====================================================*/

@media(max-width:768px){

    .gas-hero{

        min-height:90vh;

        background-attachment:scroll;

        padding:150px 0 90px;

    }

    .gas-hero h1{

        font-size:3.5rem;

    }

    .gas-hero p{

        font-size:1rem;

        line-height:1.8;

    }

    .gas-buttons{

        flex-direction:column;

        align-items:center;

    }

    .gas-btn-primary,

    .gas-btn-secondary{

        width:100%;

        max-width:320px;

        justify-content:center;

    }

    .gas-gallery-grid{

        grid-template-columns:1fr;

    }

    .gas-gallery-grid img{

        height:280px;

    }

    .gas-menu-card{

        padding:35px;

    }

    .gas-conscious{

        background-attachment:scroll;

    }

    .gas-conscious h2{

        font-size:2.7rem;

    }

    .gas-conscious p{

        font-size:1rem;

    }

    .gas-cta{

        padding:100px 0;

    }

}



/*====================================================

TELÉFONOS PEQUEÑOS

====================================================*/

@media(max-width:480px){

    .gas-container{

        width:92%;

    }

    .gas-hero h1{

        font-size:3rem;

    }

    .gas-title h2{

        font-size:2.5rem;

    }

    .gas-menu-card h3{

        font-size:2rem;

    }

    .gas-menu-card{

        border-radius:22px;

    }

    .gas-gallery-grid img{

        border-radius:22px;

        height:240px;

    }

}



/*====================================================

SCROLL BAR

====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f5efe4;

}

::-webkit-scrollbar-thumb{

    background:var(--gas-gold);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gas-violet);

}



/*====================================================

SELECCIÓN

====================================================*/

::selection{

    background:var(--gas-violet);

    color:#fff;

}



/*====================================================

ANIMACIONES

====================================================*/

.gas-hidden{

    opacity:0;

    transform:translateY(50px);

    transition:all .9s cubic-bezier(.22,.61,.36,1);

}

.gas-visible{

    opacity:1;

    transform:translateY(0);

}



/*====================================================

HOVER CARTA

====================================================*/

.gas-menu-card{

    transition:

    transform .35s,

    box-shadow .35s;

}

.gas-menu-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 80px rgba(0,0,0,.16);

}

.gas-menu-card:hover .gas-icon{

    transform:rotate(360deg);

}

.gas-icon{

    transition:.6s;

}



/*====================================================

HOVER GALERÍA

====================================================*/

.gas-gallery-grid img{

    transition:

    transform .45s,

    box-shadow .45s,

    filter .45s;

}

.gas-gallery-grid img:hover{

    transform:scale(1.04);

    box-shadow:0 35px 80px rgba(0,0,0,.18);

    filter:saturate(110%);

}



/*====================================================

ANKH FLOTANTE

====================================================*/

.gas-ankh,

.gas-symbol,

.gas-ankh-large{

    animation:ankhFloat 6s ease-in-out infinite;

}

@keyframes ankhFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}



/*====================================================

TÍTULOS

====================================================*/

.gas-title h2,

.gas-text h2,

.gas-conscious h2,

.gas-cta h2{

    text-wrap:balance;

}



/*====================================================

DEGRADADO SUAVE ENTRE SECCIONES

====================================================*/

.gas-gallery,

.gas-menu,

.gas-conscious,

.gas-cta{

    position:relative;

}

.gas-gallery::before,

.gas-menu::before,

.gas-conscious::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:80px;

    background:linear-gradient(to bottom,

        rgba(255,255,255,.35),

        transparent);

    pointer-events:none;

}



/*====================================================

UTILIDADES

====================================================*/

.text-gold{

    color:var(--gas-gold);

}

.text-violet{

    color:var(--gas-violet);

}

.bg-cream{

    background:var(--gas-cream);

}

.shadow-soft{

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}
/*======================================================

LIBRO 3D

======================================================*/

.gas-book-wrap{

    perspective:2200px;

    margin-top:80px;

}

.gas-book{

    position:relative;

    width:1100px;

    max-width:100%;

    height:720px;

    margin:auto;

    transform-style:preserve-3d;

}



/*====================

TAPA

====================*/

.gas-book-cover{

    position:absolute;

    inset:0;

    border-radius:16px;

    overflow:hidden;

    cursor:pointer;

    z-index:50;

    transform-origin:left;

    transition:transform 1.3s cubic-bezier(.22,.61,.36,1);

    background:

    linear-gradient(

        135deg,

        #4b3020,

        #6c4329,

        #4b3020

    );

    box-shadow:

    0 40px 80px rgba(0,0,0,.35);

}



/* textura cuero */

.gas-book-cover::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.20;

    background:

url("https://www.transparenttextures.com/patterns/leather.png");

}



.gas-book-cover.open{

    transform:rotateY(-170deg);

}



/*====================

TEXTO PORTADA

====================*/

.gas-cover-text{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:white;

    text-align:center;

    padding:60px;

}

.gas-cover-logo{

    width:150px;

    margin-bottom:35px;

    filter:drop-shadow(0 10px 25px rgba(0,0,0,.4));

}

.gas-cover-symbol{

    font-size:70px;

    color:#d9c08a;

    margin-bottom:20px;

}

.gas-cover-text span{

    letter-spacing:6px;

    text-transform:uppercase;

    font-size:.85rem;

    margin-bottom:20px;

}

.gas-cover-text h3{

    font-family:'Cormorant Garamond',serif;

    font-size:64px;

    margin-bottom:10px;

}

.gas-cover-text p{

    font-size:22px;

    opacity:.9;

}

.gas-cover-text small{

    margin-top:80px;

    opacity:.7;

    animation:pulseBook 2s infinite;

}



/*====================

INTERIOR

====================*/

.gas-book-inside{

    position:absolute;

    inset:0;

    background:#f9f4ea;

    border-radius:16px;

    overflow:hidden;

    box-shadow:

    0 35px 90px rgba(0,0,0,.18);

}



/*====================

DOBLE PAGINA

====================*/

.gas-book-spread{

    position:absolute;

    inset:0;

    display:none;

    grid-template-columns:1fr 1fr;

}



.gas-book-spread.active{

    display:grid;

}



/*====================

PAGINAS

====================*/

.gas-book-page{

    position:relative;

    padding:70px;

    overflow:hidden;

}



.gas-page-left{

    border-right:1px solid rgba(0,0,0,.08);

}



.gas-page-right{

    border-left:1px solid rgba(0,0,0,.08);

}



/*====================

MARCA DE AGUA

====================*/

.gas-watermark{

    position:absolute;

    top:50%;

    left:50%;

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

    font-size:280px;

    color:rgba(185,154,95,.05);

    pointer-events:none;

}



/*====================

TITULOS

====================*/

.gas-page-kicker{

    display:block;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#7b4f8f;

    margin-bottom:15px;

    font-size:.8rem;

}



.gas-book-page h3{

    font-family:'Cormorant Garamond',serif;

    font-size:44px;

    margin-bottom:35px;

    color:#2f3f2f;

}



/*====================

ITEMS

====================*/

.gas-book-item{

    margin-bottom:35px;

}

.gas-book-item strong{

    display:block;

    font-size:22px;

    margin-bottom:8px;

}

.gas-book-item p{

    color:#6d665d;

    line-height:1.8;

}



/*====================

NOTA

====================*/

.gas-book-note{

    margin-top:60px;

    font-style:italic;

    color:#7d6c5f;

}



/*====================

ULTIMA PAGINA

====================*/

.gas-page-full{

    grid-column:span 2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-align:center;

}



.gas-page-full h2{

    font-family:'Cormorant Garamond',serif;

    font-size:64px;

    margin:40px 0;

}



.gas-book-quote{

    margin-top:60px;

    font-size:30px;

    font-family:'Cormorant Garamond',serif;

    color:#7b4f8f;

}



/*====================

BOTONES

====================*/

.gas-book-controls{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}



.gas-book-btn{

    border:none;

    background:#2f3f2f;

    color:white;

    padding:14px 28px;

    border-radius:50px;

    transition:.35s;

}



.gas-book-btn:hover{

    background:#7b4f8f;

}



/*====================

ANIMACION

====================*/

@keyframes pulseBook{

    0%{opacity:.4;}

    50%{opacity:1;}

    100%{opacity:.4;}

}
/*==================================================
LIBRO RESPONSIVE CELULAR
==================================================*/

@media (max-width:900px){

    .gas-book{

        width:100%;
        height:auto;

    }

    .gas-book-inside{

        position:relative;

        min-height:auto;

    }

    .gas-book-spread{

        position:relative;

        display:none;

        grid-template-columns:1fr;

    }

    .gas-book-spread.active{

        display:grid;

    }

    .gas-page-left{

        display:block;

        border:none;

    }

    .gas-page-right{

        display:none;

    }

    .gas-page-full{

        grid-column:1;

    }

    .gas-book-page{

        padding:40px 28px;

        min-height:auto;

    }

    .gas-watermark{

        font-size:180px;

    }

    .gas-book-page h3{

        font-size:46px;

    }

    .gas-book-item strong{

        font-size:24px;

    }

    .gas-book-item p{

        font-size:17px;

        line-height:1.7;

    }

}