/* restaurantes-page.css */
/* Exclusivo para Restaurantes e Hamburguerias Hungry Stack */

/* HERO com vídeo */
.rest-hero {
    position: relative;
    min-height: 540px;
    width: 100vw;
    overflow: hidden;
    color: #fff;
  }
  .rest-hero-video {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    object-fit: cover;
    z-index: 1;
  }
  .rest-hero-overlay {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    background: linear-gradient(95deg, #282828bb 65%, #1a2545ee 100%);
    z-index: 2;
  }
  .hero-content {
    position: relative;
    z-index: 3;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
    padding-top: 120px;
  }
  .rest-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #f52b40 65%, #27c26a 100%);
    background-clip: text; -webkit-background-clip: text; color: transparent;
  }
  .rest-hero p {
    font-size: 1.18rem;
    margin-bottom: 26px;
    max-width: 540px;
    color: #fff;
  }
  
  /* Ferramentas */
  .rest-ferramentas {
    background: #181a1b;
    padding: 52px 0 44px 0;
  }
  .ferramentas-grid {
    display: flex; gap: 28px; justify-content: center;
    max-width: 980px; margin: 0 auto; flex-wrap: wrap;
  }
  .ferramenta-card {
    background: var(--bg-card, #292f37);
    border-radius: 18px;
    box-shadow: 0 3px 14px rgba(37,74,245,0.07);
    min-width: 220px; flex: 1; text-align: center; 
    padding: 38px 19px 21px 19px; color: #fff;
  }
  .ferramenta-card i {
    font-size: 2.1rem; margin-bottom: 14px; color: #f52b40;
  }
  .ferramenta-card h3 {
    margin: 0 0 10px 0; color: #27c26a; font-size: 1.08rem; font-weight: 600;
  }
  .ferramenta-card p { font-size: 1.01rem; color: #e8f3ff; }
  
  /* Chega de Pedidos Perdidos */
  .rest-chega-pedidos {
    background: #121317; color: #fff; padding: 60px 0;
  }
  .chega-container {
    display: flex; gap: 50px; align-items: center; max-width: 960px; margin: 0 auto;
    flex-wrap: wrap;
  }
  .chega-texto {
    flex: 1.2;
  }
  .chega-texto h2 { font-size: 1.35rem; margin-bottom: 13px; color: #f52b40;}
  .chega-texto p { font-size: 1.05rem; color: #7fd6fb;}
  .chega-animacao {
    flex: 1.1; display: flex; align-items: center; justify-content: flex-start;
    gap: 19px;
  }
  .chega-entradas {
    display: flex; flex-direction: column; gap: 17px;
  }
  .chega-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; font-size: 1.45rem;
    border-radius: 50%; background: #292f37; color: #fff;
    box-shadow: 0 2px 8px #7fd6fb24;
    position: relative;
    animation: chegaEntradasIn 1.7s ease-in-out;
  }
  @keyframes chegaEntradasIn {
    from { opacity:0; transform: scale(0.5);}
    to { opacity:1; transform: scale(1);}
  }
  .chega-icone.telefone { background: #27c26a;}
  .chega-icone.whatsapp { background: #f52b40;}
  .chega-seta {
    font-size: 2rem; color: #e3bf53; margin: 0 8px;
    animation: chegaSetaMove 2s infinite linear;
  }
  @keyframes chegaSetaMove {
    0% { transform: translateX(0);}
    60% { transform: translateX(24px);}
    100% { transform: translateX(0);}
  }
  .chega-icone.painel.final {
    background: #254af5; color: #fff; font-size: 1.70rem; box-shadow: 0 3px 16px #27c26a50;
    animation: chegaPainelIn 1.6s cubic-bezier(.62,.23,.52,1.17);
  }
  @keyframes chegaPainelIn {
    from { opacity:0; transform: scale(0.7) rotate(-30deg);}
    to { opacity:1; transform: scale(1) rotate(0deg);}
  }
  
  /* Monte o Lanche - Interatividade */
  .rest-monte-lanche {
    background: #181a1b; color: #fff; padding: 68px 0;
  }
  .monte-flex {
    display: flex; gap: 58px; justify-content: center; align-items: flex-start; max-width: 990px; margin: 0 auto; flex-wrap: wrap;
  }
  .monte-visualizacao {
    flex: 1.1;
  }
  .monte-visualizacao h2 { font-size: 1.30rem; margin-bottom: 22px; color: #27c26a;}
  .monte-box {
    position: relative; width: 220px; height: 300px; background: #2e3442; border-radius: 22px;
    margin-top: 10px; box-shadow: 0 7px 37px #27c26a11; overflow: hidden;
    display: flex; justify-content: center; align-items: flex-end;
  }
  .monte-ingrediente {
    position: absolute; left: 50%; transform: translateX(-50%) translateY(-160px) scale(0.7);
    opacity: 0; will-change: transform, opacity;
    transition: opacity 0.45s, transform 0.59s cubic-bezier(.25,1,.44,1.41);
    z-index: 11;
  }
  .monte-ingrediente.montado {
    opacity: 1; transform: translateX(-50%) translateY(0) scale(1.0);
  }
  .monte-ingrediente.pao { z-index: 20;}
  .monte-ingrediente.carne { z-index: 14;}
  .monte-ingrediente.queijo { z-index: 13;}
  .monte-ingrediente.extras { z-index: 15;}
  
  .monte-opcoes {
    flex: 2;
    display: flex; flex-direction: column; gap: 25px;
  }
  .monte-grupo h4 { color: #f52b40; font-size: 1.10rem; margin-bottom: 8px;}
  .monte-btns { display: flex; gap: 13px; }
  .monte-btn {
    background: #292f37; color: #fff; border: none; border-radius: 17px;
    padding: 11px 24px; font-size: 0.96rem; cursor: pointer; box-shadow: 0 2px 7px #254af522;
    transition: background 0.22s, color 0.22s, box-shadow 0.28s, transform 0.32s;
    outline: none;
  }
  .monte-btn.active, .monte-btn:focus {
    background: #27c26a; color: #fff; box-shadow: 0 3px 18px #f52b407a; transform: scale(1.05);
  }
  
  /* Galeria de Fotos */
  .rest-galeria {
    background: #292f37; color: #fff; padding: 67px 0 62px 0;
  }
  .galeria-title { text-align:center; font-size:1.27rem; color:#27c26a; margin-bottom: 35px;}
  .galeria-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; max-width: 1150px; margin: 0 auto;
  }
  .galeria-foto {
    background-size: cover; background-position: center; border-radius: 15px;
    min-height: 160px; box-shadow: 0 2px 15px #f52b4030; position: relative;
    transition: transform 0.29s, box-shadow 0.29s;
  }
  .galeria-foto.wide { grid-column: span 2; min-height: 130px;}
  .galeria-foto.tall { grid-row: span 2; min-height: 320px;}
  .galeria-foto:hover {
    transform: scale(1.06) rotate(-1deg); box-shadow: 0 6px 25px #f52b40 0.18;
  }
  
  /* CTA Final */
  .rest-cta-final {
    background: linear-gradient(90deg, #254af5 65%, #f52b40 100%);
    color: #fff; text-align: center; padding: 55px 0;
  }
  .rest-cta-final h2 { font-size: 2rem; margin-bottom: 18px;}
  .rest-cta-final .btn-primary {
    font-size: 1.03rem; padding: 14px 44px; border-radius: 30px; background: #121317;
    color: #fff; border: none; transition: background 0.2s;
  }
  .rest-cta-final .btn-primary:hover { background: #7fd6fb; color: #0d1117; }
  
  /* Responsividade */
  @media (max-width:1000px){
    .ferramentas-grid, .chega-container, .monte-flex { flex-direction: column; gap: 17px; align-items:center;}
    .galeria-grid { grid-template-columns: repeat(2, 1fr);}
  }
  @media (max-width:700px){
    .rest-hero, .hero-content { min-height:370px; }
    .galeria-title, .hero-content h1, .rest-cta-final h2 { font-size: 1rem; }
    .galeria-grid { grid-template-columns: 1fr; }
  }