@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
*{
    margin: 0;
    border: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
    
    
    /* ======== ESTILOS BASE (MOBILE FIRST) ======== */
    body {
    margin: 0;
    background-color:  rgb(24, 15, 15);
    }

    /* HEADER */
    .header{
        padding-top: 10px;
        width: 90%;
        margin-inline: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 1000;
        
    }

    /* Logo */
    .logo {
        display: flex;
        align-items: center;
        font-weight: 900; /* ya no será necesario si solo usas imagen */
        font-size: 20px;  /* lo mismo */
        text-decoration: none;
    }

    .logo img {
        width: 80px;   /* ajusta al tamaño que quieras */
        height: auto; 
    }


    .menu{

        display: none;
        
    }

    @media(min-width:768px){

        .menu{
            display: flex;
            gap: 20px;
        }

    }

    .navegacion{
        display: flex;
        align-items: center;
        padding-left: 0;
        list-style: none;
    
    }

    @media(min-width:768px){

        .navegacion {
            gap: 30px;
        }

    }


    @media (min-width: 992px){

        .navegacion {
            gap: 50px;
        }
    }


    .navegacion a{

        text-decoration: none;
        color: rgb(97, 97, 97);
        font-weight: 400;
        font-size: 15px;
    }




    .navegacion a:hover{
        color: orange;
    }
    .hamburguesa{
        width: 20px;
        

    }
    .hamburguesa {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.hamburguesa img {
  width: 55px;   /* Tamaño fijo que puedes ajustar */
  height: auto;  /* Mantiene la proporción */
  object-fit: contain; /* evita deformaciones */
}



    @media(min-width:768px){

        .hamburguesa{
            display: none;
            
        }

    }

    .hamburguesa:hover{
        cursor: pointer;
    }

    .mensaje {
    text-align: center;   /* centra el texto */
    display: block;       /* ocupa todo el ancho */
    width: 100%;
    margin: 10px 0;       /* espacio arriba y abajo */
    font-size: 1.1rem;
    color: white;  /* color del texto */
    }





    /* MAIN */
    .carta-page {
    padding: 20px;
    text-align: center;
    }

    .titulo-carta {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: white;
    }



    /* BOTONES DE CATEGORÍAS */
    .categorias {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin: 15px 0 30px 0;
    }

    .categorias button {
    padding: 12px;
    border: none;
    background-color: orange;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    }

    .categorias button:hover {
    background-color: white;
    color: orange;
    border: 1px solid orange;
    }

    /* GRID DE PLATOS */
    .platos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    justify-items: center;
    }

    .plato {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 320px;
    text-align: center;
    transition: transform 0.2s;
    }

    .plato:hover {
    transform: scale(1.02);
    }

    .plato img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
    }


    /* ======== MEDIA QUERIES ======== */

    /* Tablet */
    @media (min-width: 600px) {
    .categorias {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .platos {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .plato {
        max-width: 250px;
    }
    }

    /* Pantallas grandes */
    @media (min-width: 1024px) {
    .titulo-carta {
        font-size: 2rem;
    }

    .platos {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .plato {
        max-width: 300px;
    }
    }

@media (max-width: 767px){
  .menu.is-open{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    padding:14px 16px;
    border-radius:12px;
    background:rgba(20,20,20,.92);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 40px rgba(0,0,0,.38);
    backdrop-filter:blur(10px) saturate(1.2);
    -webkit-backdrop-filter:blur(10px) saturate(1.2);
    animation:menuPop .22s ease-out;
    z-index:999;
  }
  @keyframes menuPop{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
}


/* ===== Menú abierto: lista vertical y estilos de items ===== */
@media (max-width: 767px){
  /* que el UL se apile en columna */
  .navegacion{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-left: 0;
  }

  .navegacion li{ list-style: none; }

  /* cada enlace en su propia “fila” bonita */
  .navegacion a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
    color: #f2f2f2;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    border: 1px solid transparent;
    transition: background .2s ease, transform .15s ease, border-color .2s ease, color .2s ease;
  }

  /* separador entre items */
  .navegacion a + a{ margin-top: 6px; }

  /* hover bonito */
  .navegacion a:hover{
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border-color: rgba(255,255,255,.08);
    transform: translateY(-1px);
    color: #fff;
  }

  /* opcional: marca la página actual si usas aria-current="page" */
  .navegacion a[aria-current="page"]{
    color:#FF9A3E;
    border-color: rgba(255,154,62,.25);
    background: linear-gradient(180deg, rgba(255,154,62,.12), rgba(255,154,62,.03));
  }
}

/* ============================
   GRID DE CATEGORÍAS (WOW)
   ============================ */
:root{
  --cat-glow: #ff9a3e;
  --cat-grad: conic-gradient(from 0deg, #ff7a1a, #ffb052, #ffd598, #ff9a3e, #ff7a1a);
}

/* Layout responsive sin carrusel */
.cat-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* móvil: 2 columnas */
  gap: 12px;
  padding: 8px 16px 18px;
  max-width: 900px;
  margin-inline: auto;
}
@media (min-width: 480px){
  .cat-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 800px){
  .cat-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Tarjeta/Tile */
.cat-tile{
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px;                /* área táctil grande */
  padding: 12px 10px;
  border-radius: 16px;
  color: #fff; font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transform: translateY(0) scale(1);
  transition: transform .16s ease, box-shadow .18s ease, background .25s ease, border-color .25s ease, color .25s ease;
  overflow: hidden;
  isolation: isolate;
}
.cat-emoji{ font-size: 1.25rem; }
.cat-label{ white-space: nowrap; }

/* Borde degradado animado */
.cat-tile::before{
  content:"";
  position:absolute; inset:-1px; border-radius:18px; padding:1.2px;
  background: var(--cat-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinGrad 7s linear infinite;
  opacity:.75; pointer-events:none; z-index:-1;
}
@keyframes spinGrad{ to{ transform: rotate(1turn) } }

/* Destello en diagonal */
.cat-tile::after{
  content:"";
  position:absolute; inset:-35%;
  background: linear-gradient(130deg, rgba(255,255,255,.18), transparent 40%);
  transform: translateX(-20%) rotate(10deg);
  opacity:.0; transition: opacity .35s ease, transform .35s ease;
  z-index:-1;
}
.cat-tile:hover::after{ opacity:.25; transform: translateX(0) rotate(10deg); }

/* Interacción */
.cat-tile:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.18);
}
.cat-tile:active{ transform: translateY(0) scale(.99); }

/* Activo */
.cat-tile.is-active{
  background: rgba(255,154,62,.14);
  box-shadow:
    0 18px 44px rgba(255,154,62,.25),
    0 0 0 2px rgba(255,154,62,.22) inset;
}

/* Entrada escalonada */
.cat-tile{ opacity:0; animation: popIn .5s cubic-bezier(.21,1.02,.73,1) forwards; }
.cat-tile:nth-child(1){ animation-delay:.02s }
.cat-tile:nth-child(2){ animation-delay:.06s }
.cat-tile:nth-child(3){ animation-delay:.10s }
.cat-tile:nth-child(4){ animation-delay:.14s }
.cat-tile:nth-child(5){ animation-delay:.18s }
.cat-tile:nth-child(6){ animation-delay:.22s }
.cat-tile:nth-child(7){ animation-delay:.26s }
@keyframes popIn{ from{ opacity:0; transform: translateY(6px) scale(.98) } to{ opacity:1; transform: translateY(0) scale(1) } }

/* Botón volver */
.acciones-carta{ display:flex; justify-content:center; margin: 12px 0 4px; }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px; padding:10px 16px;
  border-radius:12px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color:#fff; font-weight:800;
  transition: background .25s, transform .15s, border-color .25s;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.btn-ghost:hover{ background: rgba(255,255,255,.1); transform: translateY(-1px); }

/* Ahorro de movimiento */
@media (prefers-reduced-motion: reduce){
  .cat-tile{ animation: none; transition: none; }
  .cat-tile::before{ animation: none; }
}






.btn-wsp{
  position:fixed;
  width:60px;
  height:60px;
  line-height: 63px;
  bottom:25px;
  right:25px;
  background:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:35px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index:100;
  transition: all 300ms ease;
}
.btn-wsp:hover{
  background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
  .btn-wsp{
      width:63px;
      height:63px;
      line-height: 66px;
}
}

/* =======================================================
   HEADER UNIFICADO (OPCIONES) — sobrescribe lo anterior
   ======================================================= */
:root{ --accent: orange; }

.header{
  padding-top: 10px;
  width: 90%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1000;
}

.logo{ display:flex; align-items:center; text-decoration:none; }
.logo img{ width:120px; height:auto; display:block; }

/* Oculta nav en móvil, muestra en desktop (aplica a .menu o .menu1) */
.header nav{ display:none; }
@media (min-width:768px){
  .header nav{ display:flex; gap:20px; }
}

.navegacion{
  display:flex; align-items:center; list-style:none; gap:28px; padding-left:0;
}
@media (min-width:992px){ .navegacion{ gap:50px; } }

.navegacion a{
  text-decoration:none;
  color: rgb(97, 97, 97);
  font-weight:400;
  font-size:15px;
  position:relative;
  transition: color .2s ease;
}
.navegacion a:hover{ color: var(--accent); }
.navegacion a[aria-current="page"]{ color: var(--accent); }
.navegacion a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius:999px;
}

/* Hamburguesa */
.hamburguesa{ display:flex; align-items:center; justify-content:center; cursor:pointer; }
.hamburguesa img{ width:55px; height:auto; object-fit:contain; }
@media (min-width:768px){ .hamburguesa{ display:none; } }

/* Dropdown móvil (nav.js añade .is-open) */
@media (max-width:767px){
  .header nav.is-open{
    display:block; position:absolute; top:calc(100% + 10px); left:0; right:0; width:100%;
    padding:14px 16px; border-radius:12px;
    background:rgba(20,20,20,.92);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 40px rgba(0,0,0,.38);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    animation: menuPop .22s ease-out; z-index:999;
  }
  @keyframes menuPop{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }

  .header .navegacion{ flex-direction:column; align-items:stretch; gap:0; }
  .header .navegacion a{
    display:block; padding:12px 14px; color:#f3f4f6; border-radius:10px;
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    border:1px solid transparent;
  }
  .header .navegacion a + a{ margin-top:6px; }

  /* Bloqueo de scroll y dim del fondo cuando está abierto */
  body.no-scroll{ overflow:hidden; }
  body.no-scroll::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:998; pointer-events:none;
  }
}