*{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  
  body{
    font-family:'Poppins', sans-serif;
    background:#111;
    color:#f8f6f2;
  
    /* MEJORA ALINEACIÓN DE NÚMEROS */
    font-variant-numeric: tabular-nums;
  }
  
  .hero{
    height:300px;
    background:
      linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.7)),
      url('https://images.unsplash.com/photo-1513104890138-7c749659a591');
  
    background-size:cover;
    background-position:center;
  
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  
  .overlay h1{
    font-size:3rem;
    font-weight:700;
    letter-spacing:2px;
  }
  
  .overlay p{
    margin-top:10px;
    color:#d6d6d6;
  }
  
  .container{
    width:90%;
    max-width:1100px;
    margin:auto;
    padding:50px 0;
  }
  
  /* =========================
     SECCIONES
  ========================= */
  
  .menu-section{
    position:relative;
  
    width:100%;
    max-width:1100px;
  
    margin:0 auto 35px auto;
    padding:35px;
  
    display:flex;
    flex-direction:column;
  
    background:linear-gradient(145deg,#1c1c1c,#111);
  
    border:1px solid rgba(255,255,255,0.06);
    border-radius:22px;
  
    box-shadow:
      0 10px 30px rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.03);
  
    overflow:hidden;
  
    transition:
      transform .35s ease,
      box-shadow .35s ease;
  }
  
  .menu-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
  
    width:6px;
    height:100%;
  }
  
  .menu-section:hover{
    transform:translateY(-6px);
  
    box-shadow:
      0 14px 40px rgba(0,0,0,0.55),
      0 0 18px rgba(255,140,0,0.15);
  }
  
  .menu-section h2{
    color:#f1efec;
    margin-bottom:25px;
    font-size:1.8rem;
  
    border-bottom:1px solid rgba(255,255,255,.1);
    padding-bottom:10px;
  }
  
  /* =========================
     GRID GENERAL
  ========================= */
  
  .menu-grid{
    display:grid;
  
    grid-template-columns:
      repeat(auto-fit, minmax(280px, 1fr));
  
    gap:25px;
  
    width:100%;
  }
  
  /* =========================
     TARJETAS
  ========================= */
  
  .menu-card{
    position:relative;
  
    width:100%;
    min-height:220px;
  
    padding:24px;
  
    background:#1a1a1a;
  
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.05);
  
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  
    transition:.3s ease;
  }
  
  .menu-card:hover{
    transform:translateY(-5px);
  }
  
  /* =========================
     ITEMS
  ========================= */
  
  .menu-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
  
    gap:12px;
  
    padding:14px 0;
  
    border-bottom:1px dashed rgba(255,255,255,.1);
  }
  
  .menu-item:last-child{
    border:none;
  }
  
  .menu-item span:first-child{
    color:#f1f1f1;
  }
  
  .menu-item span:last-child{
    color:#f8f6f2;
    font-weight:600;
  
    white-space:nowrap;
    text-align:right;
  }
  
  /* =========================
     TABLAS / PRECIOS
  ========================= */
  
  .menu-header{
    display:grid;
  
    grid-template-columns:
      minmax(140px,1fr)
      80px
      80px;
  
    gap:10px;
  
    padding:10px 0;
  
    font-weight:bold;
  
    border-bottom:2px solid #ddd;
    margin-bottom:10px;
  
    color:#f8f2f2;
  }
  
  .menu-item.triple{
    display:grid;
  
    grid-template-columns:
      minmax(140px,1fr)
      80px
      80px;
  
    gap:10px;
  
    align-items:center;
  }
  
  .menu-item-column{
    padding:12px 0;
    border-bottom:1px solid #ddd;
  }
  
  .menu-item-column:last-child{
    border-bottom:none;
  }
  
  .description{
    font-size:14px;
    color:#777;
    margin-top:6px;
  }
  
  /* =========================
     PASTAS
  ========================= */
  
  .pasta-header{
    display:grid;
  
    grid-template-columns:
      minmax(140px,1fr)
      70px
      70px
      70px;
  
    gap:10px;
  }
  
  .pasta-grid{
    display:grid;
  
    grid-template-columns:
      minmax(140px,1fr)
      70px
      70px
      70px;
  
    gap:10px;
  
    align-items:center;
  }
  
  /* ALINEACIÓN PERFECTA PRECIOS */
  
  .menu-item.triple span:not(:first-child),
  .menu-header span:not(:first-child),
  .pasta-grid span:not(:first-child),
  .pasta-header span:not(:first-child){
    text-align:right;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }
  
  /* =========================
     EXTRAS
  ========================= */
  
  .extras-section{
    width:100%;
  
    display:grid;
  
    grid-template-columns:
      repeat(auto-fit,minmax(260px,1fr));
  
    gap:20px;
  
    margin-top:30px;
  }
  
  .extras-card{
    background:linear-gradient(145deg,#1b1b1b,#121212);
  
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
  
    padding:22px;
  
    box-shadow:
      0 10px 25px rgba(0,0,0,.35);
  
    transition:.3s ease;
  }
  
  .extras-card:hover{
    transform:translateY(-4px);
    border-color:rgba(244,184,96,.25);
  }
  
  .extras-card h3{
    color:#f4f2ef;
  
    margin-bottom:18px;
    font-size:1.2rem;
  
    border-bottom:1px solid rgba(255,255,255,.08);
  
    padding-bottom:10px;
  }
  
  .extras-card ul{
    list-style:none;
  }
  
  .extras-card li{
    display:flex;
    justify-content:space-between;
    align-items:center;
  
    gap:10px;
  
    padding:10px 0;
  
    border-bottom:1px dashed rgba(255,255,255,.08);
  
    color:#f1f1f1;
  }
  
  .extras-card li:last-child{
    border-bottom:none;
  }
  
  .extras-card span{
    color:#faf8f5;
    font-weight:600;
  
    white-space:nowrap;
  }
  
  /* =========================
     FOOTER
  ========================= */
  
  footer{
    text-align:center;
    padding:30px;
  
    background:#0c0c0c;
  
    color:#999;
  }
  
  /* =========================
     RESPONSIVE
  ========================= */
  
  @media(max-width:768px){
  
    .overlay h1{
      font-size:2.2rem;
    }
  
    .menu-section{
      width:100%;
      padding:22px;
    }
  
    .menu-section h2{
      font-size:1.5rem;
    }
  
    .menu-grid{
      grid-template-columns:1fr;
      gap:18px;
    }
  
    .menu-card{
      min-height:auto;
    }
  
    .menu-item{
      font-size:.95rem;
    }
  
    /* TABLAS MOBILE */
  
    .menu-header,
    .menu-item.triple{
      grid-template-columns:
        minmax(120px,1fr)
        65px
        65px;
  
      font-size:.9rem;
    }
  
    .pasta-header,
    .pasta-grid{
      grid-template-columns:
        minmax(120px,1fr)
        55px
        55px
        55px;
  
      font-size:.85rem;
    }
  
  }
  
  @media(max-width:600px){
  
    .extras-section{
      grid-template-columns:1fr;
    }
  
    .extras-card{
      padding:18px;
    }
  
    .menu-section{
      padding:18px;
    }
  
    .menu-header,
    .menu-item.triple{
      grid-template-columns:
        minmax(100px,1fr)
        58px
        58px;
  
      gap:6px;
    }
  
    .pasta-header,
    .pasta-grid{
      grid-template-columns:
        minmax(100px,1fr)
        50px
        50px
        50px;
  
      gap:6px;
    }
  
    .menu-item,
    .pasta-grid,
    .menu-item.triple{
      font-size:.82rem;
    }
  
  }