:root{
    --wine: #2B0B0E;
    --wine-deep: #2B0B0E;
    --vinyl-black: #150607;
    --vinyl-groove: #241012;
    --orange: #FF8C00;
    --orange-bright: #FFA500;
    --terracotta: #C1440E;
    --cream: #F3E3C3;
    --cream-dim: #d8c3a0;
    --ink: #150607;
    --radius-pill: 999px;
    --font-display: 'Fredoka', sans-serif;
    --font-body: 'Manrope', sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    margin:0;
    background:var(--wine);
    color:var(--cream);
    font-family:var(--font-body);
    min-height:100vh;
    overflow-x:hidden;
  }

  ::selection{ background:var(--orange); color:var(--ink); }

  a, button{ font-family:inherit; }

  /* ---------- Layout ---------- */
  .page{
    position:relative;
    display:flex;
    min-height:100vh;
    width:100%;
  }

  .panel-left{
    flex:1 1 56%;
    position:relative;
    z-index:3;
    padding: 2.4rem clamp(1.5rem, 5vw, 5rem) 3rem;
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  .panel-right{
    flex:1 1 44%;
    position:relative;
    background:
      radial-gradient(circle at 70% 50%, rgba(255,140,0,0.08), transparent 60%),
      var(--wine-deep);
    min-height:100vh;
    overflow:hidden;
  }

  /* ---------- Logo ---------- */
.brand{
    position:relative;
    display:flex;
    align-items:center;
    width:260px;
    height:170px;
    margin-bottom:1rem;
    cursor:pointer;
    overflow:visible;
}

.brand:hover{
    opacity:.85;
}

.brand:focus-visible{
    outline:2px solid var(--orange-bright);
    outline-offset:4px;
}

.brand-sun-img{
    position:absolute;
    width:220px;
    height:220px;
    max-width:none;
    left:0;
    top:50%;
    transform:translateY(-50%);
    object-fit:contain;
    z-index:10;
}
  /* ---------- Content area ---------- */
  .content-area{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width:640px;
    animation: fadeIn .5s ease;
  }
  @keyframes fadeIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .tag{
    display:inline-block;
    font-family:var(--font-display);
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.03em;
    color:var(--orange-bright);
    margin-bottom:.9rem;
  }

  h1.hero-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.1rem, 4.6vw, 3.4rem);
    line-height:1.06;
    margin:0 0 1.1rem;
    color:var(--cream);
    max-width:14ch;
  }

  .hero-sub{
    font-size:1.05rem;
    line-height:1.6;
    color:var(--cream-dim);
    max-width:52ch;
    margin:0 0 1.8rem;
  }

  .cta{
    align-self:flex-start;
    background:var(--orange);
    color:var(--ink);
    border:none;
    font-family:var(--font-display);
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.02em;
    padding: .95rem 1.8rem;
    border-radius: var(--radius-pill);
    cursor:pointer;
    box-shadow: 0 8px 24px rgba(255,140,0,0.25);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .cta:hover{ background:var(--orange-bright); transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,140,0,0.35); }
  .cta:focus-visible{ outline:3px solid var(--cream); outline-offset:3px; }

  /* ---------- Section titles ---------- */
  .section-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(1.8rem, 3.4vw, 2.5rem);
    margin:0 0 1rem;
    color:var(--cream);
  }
  .section-body p{
    font-size:1.02rem;
    line-height:1.75;
    color:var(--cream-dim);
    max-width:58ch;
  }

  /* ---------- Cardápio ---------- */
  .menu-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-bottom:1.4rem;
  }
  .menu-tab{
    background:transparent;
    border:1.5px solid rgba(243,227,195,0.25);
    color:var(--cream-dim);
    padding:.5rem 1.05rem;
    border-radius:var(--radius-pill);
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    transition: all .2s ease;
    white-space:nowrap;
  }
  .menu-tab:hover{ border-color:var(--orange-bright); color:var(--cream); }
  .menu-tab.active{
    background:var(--orange);
    border-color:var(--orange);
    color:var(--ink);
  }
  .menu-tab:focus-visible{ outline:2px solid var(--orange-bright); outline-offset:2px; }

  .menu-list{
    list-style:none;
    margin:0;
    padding:0;
    max-height: 46vh;
    overflow-y:auto;
    padding-right:.5rem;
  }
  .menu-list::-webkit-scrollbar{ width:6px; }
  .menu-list::-webkit-scrollbar-thumb{ background:rgba(255,140,0,0.4); border-radius:4px; }

  .menu-item{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
    padding: .85rem 0;
    border-bottom:1px dashed rgba(243,227,195,0.15);
  }
  .menu-item:last-child{ border-bottom:none; }
  .menu-item-name{
    font-family:var(--font-display);
    font-weight:600;
    font-size:1.02rem;
    color:var(--cream);
  }
  .menu-item-desc{
    font-size:.88rem;
    color:var(--cream-dim);
    flex:1;
    text-align:right;
  }

  /* ---------- Fotos ---------- */
 .photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 520px;
}
  .photo-card{
    aspect-ratio:1/1;
    border-radius:14px;
    background:
      repeating-radial-gradient(circle at 30% 30%, rgba(255,140,0,0.14) 0 2px, transparent 2px 10px),
      linear-gradient(160deg, var(--vinyl-groove), var(--wine-deep));
    border:1px solid rgba(255,140,0,0.2);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    color:var(--cream-dim);
    font-size:.82rem;
    font-weight:600;
    text-align:center;
    padding:1rem;
  }
  .photo-card svg{ width:34px; height:34px; color:var(--orange-bright); }

  /* ---------- Contatos / Reservas / Endereço ---------- */
  .info-list{
    list-style:none;
    padding:0;
    margin:0 0 1.5rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
  .info-list li{
    display:flex;
    align-items:center;
    gap:.8rem;
    font-size:1rem;
    color:var(--cream);
  }
  .info-list svg{ width:22px; height:22px; color:var(--orange-bright); flex-shrink:0; }
  .info-list a{ color:var(--cream); text-decoration:none; border-bottom:1px solid rgba(255,140,0,0.4); }
  .info-list a:hover{ color:var(--orange-bright); }

  .hours-table{
    border-collapse:collapse;
    margin-top:.5rem;
  }
  .hours-table td{
    padding:.35rem 1.2rem .35rem 0;
    font-size:.92rem;
    color:var(--cream-dim);
  }
  .hours-table td:first-child{ color:var(--cream); font-weight:600; }

  form.reserva-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    max-width:480px;
  }
  form.reserva-form .full{ grid-column:1/-1; }
  form.reserva-form label{
    display:flex;
    flex-direction:column;
    gap:.4rem;
    font-size:.82rem;
    color:var(--cream-dim);
    font-weight:600;
  }
  form.reserva-form input{
    background:rgba(243,227,195,0.06);
    border:1.5px solid rgba(243,227,195,0.2);
    border-radius:10px;
    padding:.7rem .8rem;
    color:var(--cream);
    font-size:.95rem;
    font-family:inherit;
  }
  form.reserva-form input:focus{
    outline:none;
    border-color:var(--orange-bright);
    background:rgba(243,227,195,0.1);
  }
  form.reserva-form button{
    grid-column:1/-1;
    justify-self:start;
    margin-top:.3rem;
  }
  .reserva-confirm{
    margin-top:1rem;
    font-size:.9rem;
    color:var(--orange-bright);
    font-weight:600;
    display:none;
  }
  .reserva-confirm.show{ display:block; }

  /* ---------- Vinyl ---------- */
  .vinyl-wrap{
    position:absolute;
    top:50%;
    right:-18%;
    transform:translateY(-50%);
    width:min(95vh, 100vw);
    aspect-ratio:1/1;
  }

  .vinyl{
    width:100%;
    height:100%;
    border-radius:50%;
    position:relative;
    cursor:pointer;
    background:
      repeating-radial-gradient(circle at 50% 50%,
        var(--vinyl-groove) 0px, var(--vinyl-groove) 1px,
        var(--vinyl-black) 1px, var(--vinyl-black) 6px);
    box-shadow:
      0 0 0 2px rgba(255,140,0,0.15),
      0 30px 80px rgba(0,0,0,0.55),
      inset 0 0 60px rgba(0,0,0,0.6);
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
    transform: rotate(0deg);
  }
  .vinyl::before{
    /* outer sheen */
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background: conic-gradient(from 200deg, rgba(255,255,255,0.05), transparent 30%, transparent 70%, rgba(255,255,255,0.04));
    pointer-events:none;
  }

  .vinyl-label{
    position:absolute;
    top:50%; left:50%;
    width:40%;
    aspect-ratio:1/1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background: var(--vinyl-black);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 0 0 3px rgba(255,140,0,0.5), 0 0 0 6px var(--vinyl-black), 0 6px 20px rgba(0,0,0,0.5);
    cursor:pointer;
    z-index:2;
    transition: box-shadow .2s ease;
  }
  .vinyl-label:hover{ box-shadow: 0 0 0 3px var(--orange-bright), 0 0 0 6px var(--vinyl-black), 0 6px 20px rgba(0,0,0,0.5); }
  .vinyl-label:focus-visible{ outline:2px solid var(--cream); outline-offset:3px; }
  .vinyl-label-img,
  .vinyl-sun-img{ width:105%; height:105%; object-fit:contain; border-radius:50%; }
  .vinyl-spindle{
    position:absolute;
    top:50%; left:50%;
    width:10px; height:10px;
    background:var(--vinyl-black);
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 2px rgba(243,227,195,0.4);
  }

  /* ---------- Vinyl controls (pill buttons on left arc) ---------- */
  .vinyl-controls{
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .vinyl-btn{
    position:absolute;
    top:50%; left:50%;
    transform: translate(-50%,-50%);
    pointer-events:auto;
    display:flex;
    align-items:center;
    gap:.5rem;
    background: rgba(21,6,7,0.85);
    backdrop-filter: blur(4px);
    border:1.5px solid rgba(255,140,0,0.35);
    color:var(--cream-dim);
    padding:.6rem 1.1rem;
    border-radius:var(--radius-pill);
    font-size:.82rem;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    opacity:.55;
    transition: opacity .25s ease, border-color .25s ease, color .25s ease, background .25s ease;
  }
  .vinyl-btn svg{ width:16px; height:16px; flex-shrink:0; }
  .vinyl-btn:hover{ opacity:.85; }
  .vinyl-btn.active{
    opacity:1;
    background: var(--orange);
    border-color:var(--orange);
    color:var(--ink);
  }
  .vinyl-btn:focus-visible{ outline:2px solid var(--cream); outline-offset:2px; opacity:1; }

  /* ---------- Footer credit line (subtle) ---------- */
  .foot-note{
    margin-top:2rem;
    font-size:.78rem;
    color:rgba(243,227,195,0.35);
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 940px){
    .page{ flex-direction:column; }

    /* Faixa do disco: disco a direita (30% da largura) e menu em arco a esquerda dele */
    .panel-right{
      order:1;
      flex:0 0 auto;
      width:100%;
      height:auto;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      padding:4.2rem 5vw 4.2rem 0;
      overflow:hidden;
      background:
        radial-gradient(circle at 80% 50%, rgba(255,140,0,0.10), transparent 65%),
        var(--wine-deep);
    }

    .vinyl-wrap{
      position:relative;
      top:auto; right:auto; bottom:auto; left:auto;
      transform:none;
      width:30vw;
      height:30vw;
      min-width:110px;
      min-height:110px;
      margin:0;
      flex:0 0 auto;
    }
    .vinyl{ width:100%; height:100%; display:block; }

    /* Menu do disco: coluna a esquerda do disco, formando um arco */
    .vinyl-controls{
      display:flex !important;
      flex-direction:column;
      justify-content:space-between;
      align-items:flex-end;
      position:absolute;
      top:-48%; bottom:-48%;
      right:100%;
      left:auto;
      inset-inline-start:auto;
      pointer-events:none;
    }
    .vinyl-btn{
      position:static !important;
      left:auto !important; top:auto !important;
      transform:none !important;
      pointer-events:auto;
      padding:.38rem .7rem;
      font-size:.7rem;
      gap:.35rem;
      opacity:.8;
    }
    .vinyl-btn svg{ width:13px; height:13px; }
    .vinyl-btn.active{ opacity:1; }

    /* efeito de arco: itens do meio mais afastados do disco */
    .vinyl-controls .vinyl-btn:nth-child(1),
    .vinyl-controls .vinyl-btn:nth-child(6){ margin-right:3vw !important; }
    .vinyl-controls .vinyl-btn:nth-child(2),
    .vinyl-controls .vinyl-btn:nth-child(5){ margin-right:8vw !important; }
    .vinyl-controls .vinyl-btn:nth-child(3),
    .vinyl-controls .vinyl-btn:nth-child(4){ margin-right:11vw !important; }

    /* menu em pilulas separado nao e mais necessario */
    .mobile-nav{ display:none !important; }

    .panel-left{ order:2; padding:1.5rem 1.4rem 2.5rem; }
    .content-area{ order:3; }
    .brand{ order:0; }
  }

  @media (max-width: 480px){
    .brand{ width:200px; height:140px; }
    .brand-sun-img{ width:170px; height:170px; }
  }
  @media (min-width: 941px){
    .mobile-nav{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .vinyl, .cta, .content-area{ transition:none !important; animation:none !important; }
  }

 .title-about {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
margin: 0 0 -0.5rem;
  object-fit: contain;
}

.title-menu {
  display: block;
  width: 80%;
  max-width: 350px;
  height: auto;
  margin: 0 0 -0.5rem;
  object-fit: contain;
}

.title-photos {
  width: 100%;
  max-width: 250px;
}

.title-contact {
  width: 100%;
  max-width: 280px;
}

.title-reserve {
  width: 100%;
  max-width: 280px;
}

.title-adress {
  width: 100%;
  max-width: 300px;
}

.restaurant-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}