/* RESTAURANTE SHEKHYNAH
   Desenvolvido por: Makker Digital Solutions
   Autor: Janderson Cordeiro */

/* RESET */

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

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{
    min-height:100vh;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

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

a{
    text-decoration:none;
    color:inherit;
}

ul,
ol{
    list-style:none;
}

button,
input,
textarea,
select{
    font:inherit;
    border:none;
    outline:none;
    background:none;
}

button{
    cursor:pointer;
}

iframe{
    width:100%;
    border:none;
}

/* DESIGN */

:root{

    /* CORES PRINCIPAIS (mantidas conforme identidade da marca) */

    --color-primary:#FF0000;
    --color-primary-dark:#CC0000;

    --color-secondary:#F2EF88;
    --color-accent:#E0CC76;

    --color-white:#FFFFFF;

    --color-light:#F9F9F9;
    --color-light-2:#EFEFEF;

    --color-dark:#101010;
    --color-dark-2:#181818;
    --color-dark-3:#242424;

    --text-dark:#1A1A1A;
    --text-light:#FFFFFF;
    --text-muted:#5C5C5C;

    --border-color:rgba(255,255,255,.08);

    /* SOMBRAS */

    --shadow-sm:
        0 2px 8px rgba(0,0,0,.08);

    --shadow-md:
        0 10px 25px rgba(0,0,0,.12);

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.18);

    --shadow-xl:
        0 30px 80px rgba(0,0,0,.22);

    /* GLASSMORPHISM */

    --glass-bg:
        rgba(255,255,255,.12);

    --glass-border:
        rgba(255,255,255,.18);

    --glass-blur:20px;

    /* BORDER RADIUS */

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:28px;
    --radius-pill:999px;

    /* TRANSIÇÕES */

    --transition-fast:.2s ease;

    --transition-normal:.35s ease;

    --transition-slow:.6s ease;

    /* ESPAÇAMENTOS */

    --section-padding:120px;

    --container-width:1320px;

    /* FONTES */

    --font-title:
        "Cinzel",
        serif;

    --font-text:
        "Poppins",
        sans-serif;

    /* Z-INDEX */

    --z-loader:9999;
    --z-header:900;
    --z-menu:950;
    --z-modal:1000;
    --z-tooltip:1100;

}

/* TEMA CLARO */

body{

    --background:var(--color-white);

    --background-secondary:var(--color-light);

    --card-bg:#FFFFFF;

    --text-color:var(--text-dark);

    --text-secondary:var(--text-muted);

    /* tons dependentes de tema, para manter contraste adequado
       em ambos os modos sem alterar as cores principais */

    --primary-soft:rgba(255,0,0,.07);

    --primary-soft-strong:rgba(255,0,0,.12);

    --header-bg-scrolled:rgba(255,255,255,.86);

    --spinner-track:rgba(0,0,0,.10);

    --card-border:rgba(0,0,0,.06);

    background:var(--background);

    color:var(--text-color);

}

/* TEMA ESCURO */

body[data-theme="dark"]{

    --background:#0F0F0F;

    --background-secondary:#1B1B1B;

    --card-bg:#1D1D1D;

    --text-color:#F5F5F5;

    --text-secondary:#BEBEBE;

    --glass-bg:
        rgba(20,20,20,.65);

    --glass-border:
        rgba(255,255,255,.08);

    --primary-soft:rgba(255,60,60,.14);

    --primary-soft-strong:rgba(255,60,60,.22);

    --header-bg-scrolled:rgba(12,12,12,.88);

    --spinner-track:rgba(255,255,255,.15);

    --card-border:rgba(255,255,255,.08);

}

/* BASE */

body{

    font-family:var(--font-text);

    background:var(--background);

    color:var(--text-color);

    line-height:1.8;

    overflow-x:hidden;

    transition:
        background var(--transition-normal),
        color var(--transition-normal);

}

main{

    overflow:hidden;

}

section{

    padding-block:var(--section-padding);

}

/* Compensa a altura do header fixo ao navegar por âncoras,
   evitando que o topo da seção fique escondido atrás do menu. */
section[id]{

    scroll-margin-top:110px;

}

.container{

    width:min(92%, var(--container-width));

    margin-inline:auto;

}

.section{

    position:relative;

}

.section-header{

    max-width:780px;

    margin:0 auto 70px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 20px;

    margin-bottom:20px;

    border-radius:var(--radius-pill);

    background:var(--primary-soft);

    color:var(--color-primary);

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.85rem;

}

.section-title{

    font-family:var(--font-title);

    font-weight:700;

    letter-spacing:.01em;

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

    line-height:1.25;

    margin-bottom:25px;

}

.section-description{

    color:var(--text-secondary);

    font-size:1.05rem;

}

/* TIPOGRAFIA */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-title);

    font-weight:700;

    color:inherit;

}

p{

    color:var(--text-secondary);

}

strong{

    font-weight:700;

}

span{

    display:inline-block;

}

/* SCROLLBAR */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111111;

}

::-webkit-scrollbar-thumb{

    background:var(--color-primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--color-primary-dark);

}

/* SELEÇÃO DE TEXTO */

::selection{

    background:var(--color-primary);

    color:#FFFFFF;

}

/* UTILITÁRIOS */

.grid{

    display:grid;

}

.flex{

    display:flex;

}

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.glass{

    background:var(--glass-bg);

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    border:1px solid var(--glass-border);

}

.shadow{

    box-shadow:var(--shadow-lg);

}

.rounded{

    border-radius:var(--radius-lg);

}

/* FOCO VISÍVEL (acessibilidade de teclado) */

a:focus-visible,
button:focus-visible{

    outline:2px solid var(--color-primary);

    outline-offset:3px;

}

/* BOTÕES */

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:16px 34px;

    border-radius:var(--radius-pill);

    font-weight:600;

    transition:all var(--transition-normal);

}

.btn-primary{

    background:var(--color-primary);

    color:#FFFFFF;

    box-shadow:var(--shadow-md);

}

.btn-primary:hover{

    background:var(--color-primary-dark);

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}

.btn-secondary{

    border:2px solid var(--color-primary);

    color:var(--color-primary);

}

.btn-secondary:hover{

    background:var(--color-primary);

    color:#FFFFFF;

    transform:translateY(-4px);

}

/* ANIMAÇÕES BASE */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-down{

    animation:fadeDown .8s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}

/* LOADING SCREEN */

#loader{

    position:fixed;
    inset:0;

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

    background:var(--background);

    z-index:var(--z-loader);

    transition:
        opacity .6s ease,
        visibility .6s ease;

}

#loader.hidden{

    opacity:0;
    visibility:hidden;
}

.loader-content{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2rem;

}

.loader-logo{

    font-family:var(--font-title);

    font-size:2rem;

    font-weight:700;

    color:var(--color-primary);

    letter-spacing:.08em;

}

.loader-spinner{

    width:60px;
    height:60px;

    border-radius:50%;

    /* trilha do spinner agora depende do tema, evitando que fique
       invisível sobre fundo branco no modo claro. */
    border:4px solid var(--spinner-track);

    border-top-color:var(--color-primary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* HEADER */

#header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:var(--z-header);

    transition:
        background .35s,
        box-shadow .35s,
        backdrop-filter .35s;

}

#header.scrolled{

    /* usa variável de tema: branco translúcido no claro, preto no escuro,
       assim o texto (que também muda de cor no claro) permanece legível. */
    background:var(--header-bg-scrolled);

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

    border-bottom:1px solid var(--glass-border);

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

/* NAVBAR */

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:90px;

    transition:all var(--transition-normal);

}

#header.scrolled .navbar{

    min-height:75px;

}

/* LOGO */

.logo{

    display:flex;

    flex-direction:column;

    line-height:1;

    user-select:none;

}

.logo span{

    font-size:.95rem;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--color-secondary);

}

.logo strong{

    margin-top:.35rem;

    font-family:var(--font-title);

    font-size:2rem;

    color:#FFFFFF;

    transition:color var(--transition-normal);

}

body[data-theme="light"] #header.scrolled .logo strong{

    color:var(--text-dark);

}

body[data-theme="dark"] .logo strong{

    color:#FFFFFF;

}

/* MENU DESKTOP */

.nav-menu{

    display:flex;

    align-items:center;

    gap:2.5rem;

}

.nav-menu a{

    position:relative;

    font-weight:500;

    color:#FFFFFF;

    transition:color var(--transition-fast);

}

body[data-theme="light"] #header.scrolled .nav-menu a{

    color:var(--text-dark);

}

body[data-theme="dark"] #header.scrolled .nav-menu a{

    color:#FFFFFF;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-10px;

    width:0;
    height:2px;

    background:var(--color-primary);

    transition:all .3s ease;

    transform:translateX(-50%);

}

.nav-menu a:hover,
.nav-menu a.active{

    color:var(--color-primary);

}

.nav-menu a:hover::after,
.nav-menu a.active::after{

    width:100%;

}

/* AÇÕES DA NAVBAR */

.nav-actions{

    display:flex;

    align-items:center;

    gap:1rem;

}

.btn-order{

    display:inline-flex;

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

    padding:14px 28px;

    border-radius:var(--radius-pill);

    background:var(--color-primary);

    color:#FFFFFF;

    font-weight:600;

    transition:all var(--transition-normal);

    box-shadow:var(--shadow-md);

}

.btn-order:hover{

    transform:translateY(-3px);

    background:var(--color-primary-dark);

    box-shadow:var(--shadow-lg);

}

/* BOTÃO DARK MODE */

#theme-toggle,
.theme-toggle{

    width:48px;
    height:48px;

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

    border:none;

    cursor:pointer;

    border-radius:50%;

    color:#FFFFFF;

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

    backdrop-filter:blur(10px);

    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal);

}

body[data-theme="light"] #header.scrolled #theme-toggle{

    color:var(--text-dark);

    background:rgba(0,0,0,.05);

}

#theme-toggle:hover,
.theme-toggle:hover{

    transform:rotate(180deg);

    background:var(--color-primary);

    color:#FFFFFF;

}

/* MENU MOBILE (HAMBÚRGUER) */

.menu-toggle{

    display:none;

    width:50px;
    height:50px;

    border-radius:50%;

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

    font-size:1.2rem;

    color:#FFFFFF;

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

    transition:all var(--transition-normal);

}

body[data-theme="light"] #header.scrolled .menu-toggle{

    color:var(--text-dark);

    background:rgba(0,0,0,.05);

}

.menu-toggle:hover{

    background:var(--color-primary);

    color:#FFFFFF;

}

.mobile-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:320px;

    max-width:90vw;

    height:100vh;

    padding:120px 40px;

    display:flex;

    flex-direction:column;

    gap:2rem;

    background:rgba(15,15,15,.98);

    backdrop-filter:blur(30px);

    transition:right .45s ease;

    z-index:var(--z-menu);

}

.mobile-menu.active{

    right:0;

}

.mobile-menu a{

    font-size:1.15rem;

    color:#FFFFFF;

    transition:all .3s ease;

}

.mobile-menu a:hover{

    color:var(--color-primary);

    transform:translateX(10px);

}

/* OVERLAY DO MENU MOBILE */

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:all .3s ease;

    z-index:890;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

/* HEADER ANIMATIONS */

.navbar,
.logo,
.nav-menu a,
.btn-order,
#theme-toggle,
.menu-toggle{

    transition:
        background var(--transition-normal),
        color var(--transition-normal),
        transform var(--transition-normal),
        box-shadow var(--transition-normal);

}

/* RESPONSIVIDADE BÁSICA DO MENU */

@media (max-width:968px){

    .nav-menu,
    .nav-actions .btn-order{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}

/* HERO */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    isolation:isolate;

}

.hero .container{

    display:flex;

    justify-content:center;

}

/* SLIDER */

.hero-slider{

    position:absolute;

    inset:0;

    z-index:-3;

}

.hero-slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 2.5s ease;

}

.hero-slide.active{

    opacity:1;

}

.hero-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:kenBurns 12s linear forwards;

}

@keyframes kenBurns{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}

/* OVERLAY */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.60) 40%,
            rgba(0,0,0,.78) 100%
        );

    z-index:-2;

}

/* FAIXA ESCURA NA PARTE INFERIOR */

.hero::after{

    content:"";

    position:absolute;

    inset:auto 0 0;

    height:200px;

    background:
        linear-gradient(
            to top,
            var(--background) 0%,
            transparent 100%
        );

    z-index:-1;

}

/* HERO CONTENT */

.hero-content{

    max-width:760px;

    margin-inline:auto;

    text-align:center;

    color:#FFFFFF;

}

.hero-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    margin-bottom:1.5rem;

    padding:.7rem 1.6rem;

    border-radius:999px;

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

    backdrop-filter:blur(20px);

    color:var(--color-secondary);

    font-family:var(--font-title);

    font-weight:600;

    letter-spacing:.22em;

    text-transform:uppercase;

    font-size:.85rem;

}

.hero h1{

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

    line-height:1.1;

    margin-bottom:1.2rem;

}

.hero h1 span{

    color:var(--color-secondary);

}

.hero h2{

    max-width:640px;

    margin-inline:auto;

    margin-bottom:1.5rem;

    font-family:var(--font-text);

    font-size:clamp(1.15rem,2.4vw,1.5rem);

    font-weight:500;

    line-height:1.6;

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

}

.hero-description{

    max-width:560px;

    margin-inline:auto;

    margin-bottom:3rem;

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

    font-size:1rem;

    line-height:1.9;

}

/* BOTÕES */

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1.5rem;

    flex-wrap:wrap;

}

.hero-buttons .btn-primary{

    min-width:240px;

}

.hero-buttons .btn-secondary{

    min-width:240px;

    border-color:#FFFFFF;

    color:#FFFFFF;

}

.hero-buttons .btn-secondary:hover{

    border-color:var(--color-primary);

}

/* SCROLL INDICATOR */

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    align-items:flex-start;

    justify-content:center;

    width:32px;

    height:58px;

    border:2px solid rgba(255,255,255,.6);

    border-radius:30px;

}

.scroll-indicator span{

    width:6px;

    height:12px;

    margin-top:10px;

    border-radius:20px;

    background:#FFFFFF;

    animation:scrollMouse 2s infinite;

}

@keyframes scrollMouse{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    40%{

        opacity:1;

    }

    80%{

        opacity:0;

        transform:translateY(18px);

    }

    100%{

        opacity:0;

        transform:translateY(0);

    }

}

/* HERO MICROINTERAÇÕES */

.hero-content>*{

    animation:fadeUp .9s ease both;

}

.hero-subtitle{

    animation-delay:.15s;

}

.hero h1{

    animation-delay:.30s;

}

.hero h2{

    animation-delay:.45s;

}

.hero-description{

    animation-delay:.60s;

}

.hero-buttons{

    animation-delay:.75s;

}

.scroll-indicator{

    animation:
        fadeUp 1s ease,
        float 3s ease-in-out infinite;

}

/* PARALLAX (PREPARAÇÃO) */

.hero.parallax{

    will-change:background-position;

}

/* SOBRE */

.about{

    background:var(--background);

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-xl);

}

.about-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    transition:transform .8s ease;

}

.about-image:hover img{

    transform:scale(1.08);

}

.about-content h2{

    margin:20px 0;

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

}

.about-content p{

    margin-bottom:20px;

}

.about-box{

    display:flex;

    gap:20px;

    align-items:flex-start;

    padding:25px;

    margin-top:20px;

    border-radius:20px;

    background:var(--card-bg);

    border:1px solid var(--card-border);

    box-shadow:var(--shadow-md);

    transition:all .35s ease;

}

.about-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-xl);

}

.about-box i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--color-primary);

    color:#FFF;

    font-size:1.5rem;

}

.about-box h3{

    margin-bottom:10px;

}

/* FEATURES */

.features{

    background:var(--background-secondary);

}

.features-grid{

    display:grid;

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

    gap:32px;

}

.feature-card{

    position:relative;

    padding:42px;

    border-radius:var(--radius-xl);

    background:var(--card-bg);

    border:1px solid var(--card-border);

    box-shadow:var(--shadow-md);

    overflow:hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-accent)
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary-soft-strong);

    box-shadow:var(--shadow-xl);

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-icon{

    width:80px;

    height:80px;

    margin-bottom:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-accent)
    );

    color:#FFFFFF;

    font-size:2rem;

    box-shadow:var(--shadow-md);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.feature-card:hover .feature-icon{

    transform:
        rotate(8deg)
        scale(1.08);

    box-shadow:var(--shadow-lg);

}

.feature-card h3{

    margin-bottom:18px;

    font-size:1.5rem;

}

.feature-card p{

    line-height:1.9;

    color:var(--text-secondary);

}

/* SERVICES */

.services{

    background:var(--background);

}

/* Agora os cards se ajustam e ficam sempre centralizados, em qualquer quantidade e largura de tela. */

.services-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:28px;

    margin-top:60px;

    max-width:1100px;

    margin-inline:auto;

}

.service-card{

    position:relative;

    flex:1 1 300px;

    max-width:340px;

    padding:42px 30px;

    border-radius:var(--radius-xl);

    background:var(--card-bg);

    border:1px solid var(--card-border);

    text-align:center;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:var(--shadow-md);

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            var(--primary-soft-strong),

            transparent 70%

        );

    opacity:0;

    transition:opacity .35s ease;

}

.service-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-xl);

    border-color:var(--primary-soft-strong);

}

.service-card:hover::before{

    opacity:1;

}

.service-icon{

    width:90px;

    height:90px;

    margin:0 auto 28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-accent)
    );

    color:#FFFFFF;

    font-size:2rem;

    transition:all .35s ease;

}

.service-card:hover .service-icon{

    transform:scale(1.12) rotate(8deg);

}

.service-card h3{

    margin-bottom:18px;

    font-size:1.6rem;

}

.service-card p{

    margin-bottom:30px;

    color:var(--text-secondary);

    line-height:1.9;

}

.service-link{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    color:var(--color-primary);

    font-weight:600;

    transition:gap .3s ease,color .3s ease;

}

.service-link:hover{

    gap:1rem;

}

.services-cta{

    margin-top:70px;

    display:flex;

    justify-content:center;

}

/* GALLERY */

.gallery{

    background:var(--background-secondary);

}

.gallery-grid{

    display:grid;

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

    grid-auto-rows:220px;

    gap:22px;

    margin-top:70px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

    cursor:pointer;

    box-shadow:var(--shadow-lg);

    background:var(--card-bg);

}

.gallery-item.tall{

    grid-row:span 2;

}

.gallery-item.wide{

    grid-column:span 2;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    background:#e9e9e9;

    transition:

        transform .8s ease,

        filter .4s ease;

}

body[data-theme="dark"] .gallery-item img{

    background:#2b2b2b;

}

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            transparent,

            rgba(0,0,0,.75)

        );

    opacity:0;

    transition:opacity .35s ease;

    z-index:1;

}

.gallery-item figcaption{

    position:absolute;

    left:30px;

    bottom:25px;

    z-index:2;

    color:#FFFFFF;

    transform:translateY(25px);

    opacity:0;

    transition:all .35s ease;

}

.gallery-item:hover img{

    transform:scale(1.12);

    filter:brightness(.85);

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item:hover figcaption{

    transform:translateY(0);

    opacity:1;

}

/* TESTIMONIALS */

.testimonials{

    background:var(--background);

}

.google-score{

    max-width:420px;

    margin:0 auto 70px;

    padding:35px;

    display:flex;

    gap:25px;

    align-items:center;

    border-radius:24px;

    background:var(--card-bg);

    border:1px solid var(--card-border);

    box-shadow:var(--shadow-lg);

}

.google-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    font-size:2rem;

}

/* Cor oficial do "G" do Google aplicada ao ícone, para que ele não
   dependa mais da cor de texto do tema. */
.google-icon i{

    color:#EA4335;

}

.google-score h3{

    font-size:2.8rem;

    margin-bottom:10px;

}

.stars{

    color:#FFD43B;

    font-size:1.3rem;

    letter-spacing:4px;

}

.testimonial-slider{

    overflow:hidden;

}

.testimonial-track{

    display:grid;

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

    gap:30px;

}

.testimonial-card{

    padding:35px;

    border-radius:24px;

    background:var(--card-bg);

    border:1px solid var(--card-border);

    box-shadow:var(--shadow-md);

    transition:all .35s ease;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-xl);

}

.testimonial-stars{

    margin-bottom:20px;

    color:#FFD43B;

    font-size:1.1rem;

}

.testimonial-card p{

    margin-bottom:30px;

    line-height:1.9;

    font-style:italic;

}

.testimonial-user strong{

    display:block;

}

.testimonial-user span{

    color:var(--text-secondary);

    font-size:.9rem;

}

/* CONTACT */

.contact{

    background:var(--background-secondary);

}

.contact-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:50px;

    margin-top:70px;

    align-items:stretch;

}

/* CARDS */

.contact-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.contact-card{

    display:flex;

    gap:20px;

    align-items:flex-start;

    padding:28px;

    border-radius:24px;

    background:var(--card-bg);

    border:1px solid var(--card-border);

    box-shadow:var(--shadow-md);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-xl);

}

.contact-icon{

    width:72px;

    height:72px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-accent)
    );

    color:#FFFFFF;

    font-size:1.5rem;

}

.contact-card h3{

    margin-bottom:10px;

}

.contact-card p{

    color:var(--text-secondary);

    line-height:1.8;

}

/* MAPA */

.contact-map{

    overflow:hidden;

    border-radius:28px;

    box-shadow:var(--shadow-xl);

    min-height:100%;

}

.contact-map iframe{

    width:100%;

    height:100%;

    min-height:580px;

    border:0;

}

/* BOTÕES */

.contact-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:70px;

    flex-wrap:wrap;

}

/* FOOTER */

.footer{

    background:#0b0b0b;

    color:#FFFFFF;

    padding-top:90px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

    padding-bottom:60px;

}

.footer-logo{

    font-size:1.8rem;

    margin-bottom:20px;

}

.footer-logo span{

    color:var(--color-accent);

}

.footer-column p{

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

    line-height:1.9;

}

.footer-column h4{

    margin-bottom:25px;

}

.footer-column ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer-column ul li{

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

}

.footer-column a{

    transition:.3s;

}

.footer-column a:hover{

    color:var(--color-primary);

}

.footer-social{

    display:flex;

    gap:18px;

    margin-top:30px;

}

.footer-social a{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    transition:.35s;

}

.footer-social a:hover{

    background:var(--color-primary);

    transform:translateY(-5px);

}

.footer-bottom{

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

    padding:35px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom strong{

    color:var(--color-accent);

}

/* BOTÃO BACK TO TOP */

#back-to-top{

    position:fixed;

    left:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border-radius:50%;

    border:none;

    background:var(--color-primary);

    color:#FFFFFF;

    font-size:1.2rem;

    cursor:pointer;

    box-shadow:var(--shadow-lg);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:all .35s ease;

    z-index:900;

}

#back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#back-to-top:hover{

    transform:translateY(-6px);

    background:var(--color-primary-dark);

}

/* SCROLL REVEAL */

[data-reveal]{

    opacity:0;

    visibility:hidden;

    transition:

        opacity .9s ease,

        transform .9s ease,

        filter .9s ease;

    will-change:transform, opacity;

}

/* Fade Up */

[data-reveal="fade-up"]{

    transform:translateY(60px);

}

/* Fade Down */

[data-reveal="fade-down"]{

    transform:translateY(-60px);

}

/* Fade Left */

[data-reveal="fade-left"]{

    transform:translateX(-60px);

}

/* Fade Right */

[data-reveal="fade-right"]{

    transform:translateX(60px);

}

/* Zoom */

[data-reveal="zoom"]{

    transform:scale(.88);

}

/* Rotate */

[data-reveal="rotate"]{

    transform:rotate(-8deg) scale(.95);

}

/* Blur */

[data-reveal="blur"]{

    filter:blur(12px);

}

/* Estado visível */

.reveal-visible{

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    filter:none !important;

}

/* STATUS DO RESTAURANTE */

#restaurant-status{

    margin-top:16px;

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

}

.status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#999;

    transition:.3s;

}

.status-open{

    color:#2ECC71;

}

.status-open .status-dot{

    background:#2ECC71;

    box-shadow:

        0 0 12px rgba(46,204,113,.6);

}

.status-closed{

    color:#E74C3C;

}

.status-closed .status-dot{

    background:#E74C3C;

    box-shadow:

        0 0 12px rgba(231,76,60,.6);

}

/* LIGHTBOX */

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.94);

    opacity:0;

    visibility:hidden;

    transition:.45s;

    z-index:9999;

}

.lightbox.open{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:88%;

    max-height:82vh;

    border-radius:18px;

    transform:scale(.92);

    transition:.45s;

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

}

.lightbox.open img{

    transform:scale(1);

}

.lightbox button{

    position:absolute;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#FFFFFF;

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

    backdrop-filter:blur(10px);

    transition:.3s;

}

.lightbox button:hover{

    background:var(--color-primary);

}

.lightbox-close{

    top:35px;

    right:35px;

}

.lightbox-prev{

    left:40px;

}

.lightbox-next{

    right:40px;

}

.lightbox-info{

    position:absolute;

    bottom:45px;

    text-align:center;

    color:#FFFFFF;

}

/* BOTÃO FLUTUANTE DO WHATSAPP */

.whatsapp{

    position:fixed;

    bottom:30px;

    right:30px;

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#25D366;

    color:#FFF;

    font-size:30px;

    z-index:999;

    box-shadow:0 15px 35px rgba(0,0,0,.25);

    animation:whatsappPulse 2.5s infinite;

}

@keyframes whatsappPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/* RESPONSIVIDADE */

@media (max-width:1100px){

    .about-grid{

        grid-template-columns:1fr;

    }

    .about-image img{

        height:420px;

    }

    .features-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .contact-map iframe{

        min-height:380px;

    }

}

@media (max-width:900px){

    .gallery-grid{

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

    }

    .gallery-item.wide{

        grid-column:span 2;

    }

    .testimonial-track{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}

@media (max-width:640px){

    :root{

        --section-padding:80px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item.wide,
    .gallery-item.tall{

        grid-column:span 1;

        grid-row:span 1;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .whatsapp{

        right:20px;

        bottom:20px;

        width:56px;

        height:56px;

        font-size:26px;

    }

    #back-to-top{

        left:20px;

        bottom:20px;

    }

}