body {
  margin: 0px;
  font-family: 'Montserrat', sans-serif;
}

:root {
  /* Brand Colors */
  --color-blue-ocean: #138ce5;
  --color-black-olive: #060806;
  --color-mustard-yellow: #eba330;
  --color-red-tomato: #710304;

  /* Neutrals */
  --color-white: #ffffff;
  --color-black: #111911;
}

::selection {
  background-color:var(--color-black-olive);
  color:var(--color-white);
}

/*HEADER MENU*/

    .menu-section-div-wrap{
   
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 40px 20px;
    }

    .menu-section-div-hero{
        width: 100%;
      background: var(--menu-section-div-card);
      border: 1px solid var(--menu-section-div-border);
      border-radius: 14px;
      box-shadow: var(--menu-section-div-shadow);
      padding: 56px 300px;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 30px;
      overflow:hidden;
    }

    /* LEFT */
    .menu-section-div-title{
      margin: 0 0 14px 0;
      font-weight: 800;
      letter-spacing: .5px;
      font-size: clamp(34px, 3.2vw, 44px);
    }
    .menu-section-div-title span{
      color: var(--color-blue-ocean);
    }

    .menu-section-div-lead{
      margin: 0;

      line-height: 1.55;
      font-size: 16px;
      color: var(--color-black);
    }

  

    .menu-section-div-cta{
      margin-top: 18px;
      color: var(--color-blue-ocean);
      font-weight: 800;
      font-size: 16px;
    }

    .menu-section-div-features{
      margin-top: 26px;
      display:flex;
      gap: 2px;
      flex-wrap: wrap;
      align-items:flex-start;
    }

    .menu-section-div-feature{
      width: 104px;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      gap: 10px;
    }

    .menu-section-div-icon-box{
      width: 64px;
      height: 64px;
      border-radius: 10px;
      background: var(--color-mustard-yellow);
      display:grid;
      place-items:center;
         transition: 0.2s;
    
    }
     .menu-section-div-icon-box:hover{
        background-color: #e77213;
       
        transition: 0.2s;
        transform: translateY(-6px); /* sobe levemente */
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.12);
     }
    .menu-section-div-icon-box i{
      color:#fff;
      font-size: 28px;
      line-height: 1;
    }

    .menu-section-div-feature small{
      display:block;
      font-size: 11px;
      letter-spacing: .4px;
      font-weight: 800;
      color: #2a2a2a;
      text-transform: uppercase;
    }



    .menu-section-div-polaroid-img{
      width: 120%;
      height: 120%;
      display:block;
      object-fit: cover;
    
    }

    /* RESPONSIVO */
   
/*FIM HEADER MENU*/







/*MENU CARDS*/
  /* page */
    .menu-section{
      box-sizing: border-box;
      }

.menu-wrap.menu-section {
    /* max-width: 980px; */
    width: 100%;
    BACKGROUND: #eaf4fb;
    margin: 0 auto;
    padding: 50px 200px 100px;
}
    /* header */
    .menu-title.menu-section{
      display: inline-flex;
      gap: 10px;
      align-items: baseline;
    
      font-weight: 800;
     
    }
    .menu-title .our.menu-section{
      
      color:var(--color-black-olive);
    }
    .menu-title .menu.menu-section{
  
      color: var(--color-blue-ocean);
    }

    /* list layout */
    .menu-list.menu-section{
      display: flex;
      justify-content: center;
      gap: 18px;
    }

.menu-item.menu-section {
    display: grid;
    width: 300px;

    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0px 5px 10px #dee6ec;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu-item.menu-section:hover {
    transform: translateY(-6px); /* sobe levemente */
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.12);
}

    /* alternating (image on the right) */
    .menu-item.is-alt.menu-section{
      grid-template-columns: 1fr;
        height: fit-content;

    }

    /* image area */
 .menu-media.menu-section {
    position: relative;
    width: 100%;
    height: 260px;
    margin-bottom: -10px;
}
    .menu-media img.menu-section{
    width:100%;
     
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* text area */
    .menu-body.menu-section{
      padding:35px 22px;
      background-color: var(--color-white);
      display: grid;
      gap: 8px;
      align-content: center;
    }

    .menu-name.menu-section{
      font-size: 20px;
      font-weight: 900;
      line-height: 1.05;
      letter-spacing: .4px;
      margin: 0;
    }

    .menu-desc.menu-section{
      margin: 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.35;
    
      position: relative;
  
    }


    /* subtle rounded container feel (like the screenshot cards sit on the light bg) */
    .menu-item.menu-section{
      border-radius: 14px;
    }

    
/*FIM MENU CARDS*/


/*TRADICIONAL MENU SECTION*/

 /* ====== Layout (fiel à imagem) ====== */
      .menu-tradicional-wrap {
        display: grid;
        place-items: center;
        background-color: var(--color-blue-ocean);
        padding: 28px 16px;
      }

      .menu-tradicional-card {

        background: var(--color-white);
        border-radius: 10px;
        box-shadow: var(--menu-tradicional-shadow);
        overflow: hidden;
        display: grid;
        grid-template-columns: 260px 1fr;
        align-items: stretch;
      }

      .menu-tradicional-left {
        background: rgba(0, 0, 0, 0.03);
        display: grid;
        place-items: center;
        padding: 18px;
      }

      .menu-tradicional-thumb {
        width: 100%;
        max-width: 220px;
        border-radius: 2px;
        cursor: zoom-in;
        user-select: none;
        -webkit-user-drag: none;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
        transition: transform 180ms ease, box-shadow 180ms ease;
      }
      .menu-tradicional-thumb:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
      }

      .menu-tradicional-right {
        padding: 26px 28px;
        display: grid;
        gap: 14px;
        align-content: center;
      }

      .menu-tradicional-title {
        margin: 0;
        font-size: 28px;
        letter-spacing: 0.4px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .menu-tradicional-desc {
        margin: 0;
        color: var(--menu-tradicional-muted);
        line-height: 1.45;
        padding-left: 14px;
        border-left: 3px solid var(--menu-tradicional-accent);
        max-width: 560px;
      }

      .menu-tradicional-actions {
        display: flex;
        gap: 18px;
        margin-top: 8px;
        flex-wrap: wrap;
      }

      .menu-tradicional-btn {
        appearance: none;
        border: 0;
        background: var(--color-blue-ocean);
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
        padding: 14px 22px;
       
        cursor: pointer;
         font-family: 'Montserrat', sans-serif;
        transition: 0.2s;
      }
      .menu-tradicional-btn a{
        color: #fff;
        text-decoration: none;
      }
      .menu-tradicional-btn:hover {
        background: var(--color-blue-ocean);
        transform: translateY(-1px);
     
      }
      .menu-tradicional-btn:active {
        transform: translateY(0px);
      }
      .menu-tradicional-btn:focus-visible {
        outline: 3px solid rgba(11, 127, 214, 0.35);
        outline-offset: 3px;
      }

      /* ====== Modal / Overlay (tela cheia + entrada suave) ====== */
      .menu-tradicional-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: grid;
        place-items: center;
        padding: 24px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
      }

      .menu-tradicional-modal::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(2px);
      }

      .menu-tradicional-modal-inner {
        position: relative;
        z-index: 1;
        transform: scale(0.97) translateY(6px);
        opacity: 0;
        transition: transform 220ms ease, opacity 220ms ease;
        max-width: min(92vw, 980px);
        max-height: 88vh;
        display: grid;
        place-items: center;
      }

      .menu-tradicional-modal-img {
        max-width: 100%;
        max-height: 88vh;
        width: auto;
        height: auto;
        border-radius: 6px;
        cursor: zoom-out;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
        user-select: none;
        -webkit-user-drag: none;
      }

      .menu-tradicional-modal.is-open {
        opacity: 1;
        pointer-events: auto;
      }
      .menu-tradicional-modal.is-open .menu-tradicional-modal-inner {
        transform: scale(1) translateY(0);
        opacity: 1;
      }

   
.menu-section-div-title i {
  background-color: #138ce5;
  padding: 5px 10px;
  color: #ffffff;
  border-radius: 50%;

  display: inline-block; /* 👈 IMPORTANTE */
  transition: transform 0.3s ease;  transition: 0.2s;
}

.menu-section-div-title:hover i {
  background-color: #e77213;
  transition: 0.2s;
  transform: rotate(-15deg); /* gira levemente na diagonal */
}

.menu-section-div-right:hover i {
  transform: rotate(-15deg); /* gira levemente na diagonal */
}
/* responsive */
    
      @media (max-width: 1400px) {  .menu-tradicional-card {
        
        
          grid-template-columns: 1fr;
        }
        .menu-section-div-title {
    margin: 0 0 14px 0;
    font-weight: 800;
    letter-spacing: .5px;
    font-size: 20px;
}.menu-section-div-icon-box i {
    color: #fff;
    font-size: 13px;
    line-height: 1;
}.menu-section-div-icon-box {
    width: 43px;
    height: 44px;
  
}.menu-section-div-features {
    margin-top: 26px;
    display: flex;
    gap: 55px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}.menu-section-div-polaroid-img {
    width: 100%;
    height: 100%;
 
}
        .menu-tradicional-left {
          padding: 16px;
        }
        .menu-tradicional-right {
          padding: 18px 18px 22px;
        }
        .menu-tradicional-title {
          font-size: 24px;
        }
        .menu-tradicional-actions {
          gap: 12px;
        }
        .menu-tradicional-btn {
          width: 100%;
          justify-content: center;
          text-align: center;
        }
        .menu-tradicional-thumb,
        .menu-tradicional-btn,
        .menu-tradicional-modal,
        .menu-tradicional-modal-inner {
          transition: none !important;
        }
      .menu-item.menu-section,
      .menu-item.is-alt.menu-section{
        grid-template-columns: 1fr;
        height: fit-content;
        width: 100%;
      }
        .menu-body.menu-section {
        padding: 40px;
    }
      .menu-name.menu-section{
        font-size: 22px;
      }
      .menu-desc.menu-section::before{
        height: 30px;
      }
      .menu-wrap.menu-section {
    /* max-width: 980px; */
    width: 100%;
    BACKGROUND: #eaf4fb;
    margin: 0 auto;
    padding: 20px 40px;
}
   .menu-section-div-hero{
        grid-template-columns: 1fr;
        padding: 34px 22px;
      }

       .menu-section-div-right {
        min-height: fit-content;
    }.menu-list.menu-section {
    display: grid;
    gap: 18px;
}

      .menu-section-div-features{
        gap: 16px;
      }

      .menu-section-div-feature{
        width: 96px;
      }
      .menu-section-div-hero {
    width: 100%;
    background: var(--menu-section-div-card);
    border: 1px solid var(--menu-section-div-border);
    border-radius: 14px;
    box-shadow: var(--menu-section-div-shadow);
    padding: 56px 30px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    overflow: hidden;
}
    }