:root{
    --rojo:#b62025;
    --verde:#2e6b3f;
    --crema:#f5eddc;
    --texto:#222;
    --blanco:#fff;
    --sombra:0 10px 35px rgba(0,0,0,.18);
    --trans:.35s ease;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    scroll-behavior:smooth;
}
body{
    font-family:'Montserrat',sans-serif;
    color:var(--texto);
    background:#fff;
}
img{
    display:block;
    max-width:100%;
}
a{
    text-decoration:none;
    color:inherit;
}
ul{
    list-style:none;
}
.contenedor{
    width:min(1200px,90%);
    margin:auto;
}
.topbar{
    background:var(--rojo);
    color:#fff;
    font-size:.9rem;
}
.topbar-contenido{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
}
.redes{
    display:flex;
    align-items:center;
    gap:14px;
}
.redes a{
    font-size:1.2rem;
    transition:var(--trans);
}
.redes a:hover{
    transform:translateY(-3px);
}
.topbar p{
    display: flex;
    align-items: center;
    gap: 8px;
}
.topbar p i{
    color:#ff6b6b;
    animation:latido 1.4s infinite;
}
@keyframes latido{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.18);
    }

}
header{
    background:var(--crema);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 15px rgba(0,0,0,.08);
    position:relative;
    overflow: visible;
}
header::before{
    content:"";
    position:absolute;
    top:2px;
    left:50%;
    transform:translateX(-56%);
    width:860px;        
    height:20px;
    background:url("Recursos/LineaFlores.png") repeat-x center;
    background-size:auto 25px;
    pointer-events:none;
}
header::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-25px;     
    width:100%;
    height:26px;       
    background:url("Recursos/onda.svg") no-repeat center bottom;
    background-size:100% auto;
    pointer-events:none;
    z-index:2;
}
.navbar{
    height:85px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    z-index:10;
}
.logo{
    display:flex;
    align-items:center;
    transform:translateX(-100px);
}
.logo img{
    width:90px;
}
.logo img:first-child{
    width:90px;
}
.logo-nombre{
    position:absolute;
    left:85px;
    top:57%;
    transform:translateY(-50%) scale(1.7);
    transform-origin:left center;
}
.menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(12px, 2vw, 40px);
    font-weight:600;
    flex:1;
    min-width:0;
}
.menu li{
    flex-shrink:1;
}
.menu a{
    position:relative;
    transition:.3s;
    white-space:nowrap;
    font-size:clamp(.78rem, 1.05vw, 1rem);
}
.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:3px;
    background:var(--rojo);
    transition:.3s;
}
.menu:has(li:nth-child(7)) a{
    font-size:.90rem;
}
.menu:has(li:nth-child(7)){
    gap:22px;
}
.menu:has(li:nth-child(8)) a{
    font-size:.84rem;
}
.menu:has(li:nth-child(8)){
    gap:16px;
}
.menu:has(li:nth-child(9)) a{
    font-size:.78rem;
}
.menu:has(li:nth-child(9)){
    gap:12px;
}
.menu a:hover::after{
    width:100%;
}
.btn-pedir{
    background:var(--verde);
    color:#fff;
    padding:14px clamp(18px, 2vw, 28px);
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:700;
    transition:var(--trans);
    white-space:nowrap;
    flex-shrink:0;
    font-size:clamp(.78rem, 1vw, 1rem);
}
.btn-pedir:hover{
    transform:translateY(-4px);
    box-shadow:var(--sombra);
}
.menu-movil{
    display:none;
    font-size:2rem;
    cursor:pointer;
}
.hero{
    position: relative;
    height: 600px;
    overflow: hidden;
}
.hero-bg{
    position:absolute;
    inset:0;
    background:url("Fondos/Fondo.png") center center no-repeat;
    background-size:cover;
    background-position:60% center;
    z-index:0;
    transition:background-image .8s ease;
}
.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.28);
    z-index:1;
}
.hero-contenido{
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    align-items: center;
}
.hero-texto{
    color:#fff;
    flex:1;
}
.hero-texto h1{
    font-family:"Bree Serif",serif;
    font-size:5rem;
    line-height:1;
    margin-bottom:20px;
}
.hero-texto span{
    color:#ffd66d;
}
.hero-texto p{
    max-width:500px;
    font-size:1.1rem;
    margin:25px 0 40px;
    line-height:1.8;
}
.hero-botones{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}
.btn-rojo{
    background:var(--rojo);
    color:#fff;
    padding:16px 34px;
    border-radius:50px;
    font-weight:700;
}
.btn-video{
    background:#fff;
    color:#222;
    padding:16px 34px;
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
}
.hero-imagen{
    flex:1;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}
.platillo{
    width:620px;
    animation:flotar 4s ease-in-out infinite;
    filter:drop-shadow(0 35px 35px rgba(0,0,0,.35));
}
.humo{
    position:absolute;
    width:500px;
    top:-20px;
    animation:humo 6s linear infinite;
    opacity:.5;
}
.badge{
    position:absolute;
    top:80px;
    right:110px;
    width:155px;
    height:155px;
    z-index:3;
    opacity:1;
    transition:.5s;
}
.badge.oculto{
    opacity:0;
    pointer-events:none;
}
.badge img{
    width:100%;
    display:block;
    filter:
        brightness(1.08)
        saturate(1.08)
        contrast(1.02);
    opacity:1;
}
.badge-texto{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#ffffff;
    text-shadow:none;
    text-align:center;
}
.badge-texto span{
    font-size:14px;
    font-weight:400;
    margin-bottom:4px;
    color:#fdfdfd;
}
.badge-texto h3{
    font-size:26px;
    font-weight:700;
    line-height:1;
    margin:2px 0;
    color:#ffffff;
}
.badge-texto p{
    color:#f8f8f8;
    font-size:16px;
    margin-top:4px;
}
.slider-dots{
    position:absolute;
    bottom:35px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:3;
}
.slider-dots span{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#fff;
    opacity:.4;
}
.slider-dots .activo{
    opacity:1;
    background:#ffd66d;
}
.detalle{
    display:block;
    width:390px;
    max-width:100%;
    margin:22px 0 26px;
    transform:translateX(25px);
    user-select:none;
    pointer-events:none;
}
.plato-slider{
    position:absolute;
    top:50px;
    left:-450px;
    width:470px;
    opacity:0;
    z-index:2;
    transform:translateX(0) rotate(-720deg);
    transition:
        left 2.8s ease,
        transform 2.8s ease,
        opacity .4s;
}

.plato-slider.mostrar{
    left:60%;
    opacity:1;
    transform:translateX(0) rotate(10deg);
}
.usuario-logueado{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.nombre-usuario{
    display:flex;
    align-items:center;
    gap:7px;
    color:#22264a;
    font-family:'Montserrat',sans-serif;
    font-size:.85rem;
    font-weight:700;
    white-space:nowrap;
}

.nombre-usuario i{
    font-size:1.2rem;
    color:var(--verde);
}

.btn-cerrar-sesion{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#b62025;
    color:#fff;

    border-radius:10px;
    text-decoration:none;

    transition:.3s;
}

.btn-cerrar-sesion i{
    font-size:1.35rem;
}

.btn-cerrar-sesion:hover{
    background:#8f181c;
    transform:translateY(-2px);
}
.btn-cerrar-sesion{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:#b62025;
    color:#fff;

    border-radius:50%;
    text-decoration:none;

    transition:.3s;
}

.btn-cerrar-sesion i{
    font-size:1.4rem;
}

.btn-cerrar-sesion:hover{
    background:#8f181c;
    transform:scale(1.08);
}
@keyframes flotarPlato{
    0%,100%{
        transform:translateY(0) rotate(10deg);
    }
    50%{
        transform:translateY(-10px) rotate(13deg);
    }
}
@keyframes flotar{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-18px);}
}
@keyframes humo{
    0%{transform:translateY(0);opacity:.2;}
    50%{opacity:.5;}
    100%{transform:translateY(-40px);opacity:0;}
}