/* KatuFood Restaurantes | o que so' este site tem. Carrega DEPOIS do site.css,
   que e' o MESMO arquivo do site do delivery (katufood.com.br): cores, fonte,
   botoes, vidro, manchas, passos, recursos, planos e perguntas vem de la'.

   A diferenca de cara e' a hero de "salao a noite": fundo verde escuro, o
   Katu garcom na frente e o mapa de mesas ao vivo. Quem cai aqui sabe de
   cara que este e' o produto do salao, e nao o do delivery.

   Luz sobre o verde escuro e' sempre VERDE clara: ambar ou laranja por cima
   do verde vira oliva (visto nas manchas do delivery em 19/09/2026). */

/* -------------------------------------------------------------- marca */
.marca { display: flex; align-items: center; gap: 12px; position: relative; text-decoration: none; }
.marca-clara { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity .35s, height .3s var(--mola), transform .3s var(--mola); }
.marca-escura { transition: opacity .35s, height .3s var(--mola), transform .3s var(--mola); }
.marca-produto {
  font-weight: 600; font-size: 1rem; line-height: 1.1; color: var(--btn-b);
  padding-left: 12px; border-left: 2px solid var(--linha); transition: color .35s, border-color .35s;
}

/* -------------------------------------------------------------- topo sobre a hero escura */
/* A hero sobe para baixo do topo; enquanto ela esta' ali atras, o topo e' um
   vidro escuro com letra clara. Passou da hero, volta o topo creme do site.
   So' com JS: sem ele a classe .fora-hero nunca muda e o topo fica o claro. */
.js .restaurantes .topo:not(.fora-hero) {
  background: rgba(4, 38, 15, .28); border-color: transparent; box-shadow: none;
}
.js .restaurantes .topo.rolou:not(.fora-hero) { background: rgba(4, 38, 15, .78); }
.js .restaurantes .topo:not(.fora-hero) .marca-escura { opacity: 0; }
.js .restaurantes .topo:not(.fora-hero) .marca-clara { opacity: 1; }
.js .restaurantes .topo:not(.fora-hero) .marca-produto { color: var(--ambar); border-color: rgba(255, 255, 255, .22); }
.js .restaurantes .topo:not(.fora-hero) .link-entrar,
.js .restaurantes .topo:not(.fora-hero) .abrir-menu { color: #fff; }
.js .restaurantes .topo:not(.fora-hero) .link-entrar:hover { color: var(--ambar); }
@media (min-width: 901px) {
  /* no celular o menu abre num cartao branco: la' a letra continua escura */
  .js .restaurantes .topo:not(.fora-hero) .menu a { color: #fff; }
  .js .restaurantes .topo:not(.fora-hero) .menu a::after { background: var(--ambar); }
}
.menu .menu-outro { color: var(--btn-b); font-weight: 600; }
.js .restaurantes .topo:not(.fora-hero) .menu .menu-outro { color: var(--ambar); }

/* -------------------------------------------------------------- hero noturna */
.hero-noite {
  /* passa por baixo do topo (que e' sticky): o verde vai ate' o alto da tela */
  margin-top: calc(-1 * var(--topo-h));
  padding-top: calc(var(--topo-h) + clamp(28px, 5vw, 64px));
  background: radial-gradient(120% 110% at 12% 0%, #0E5A2E 0%, var(--verde-escuro) 46%, var(--verde-noite) 100%);
  color: #E4F2E8;
}
.hero-noite h1 { color: #fff; }
/* o grifo laranja fechado do delivery some no verde escuro (contraste 2,7):
   aqui ele vai do ambar ao laranja vivo (4,2 a 5,7) */
.hero-noite .grifo { background-image: linear-gradient(90deg, var(--ambar), var(--laranja)); }
.hero-noite .sub { color: #BFD8C8; }
.hero-noite .fatos { color: #D5E9DC; }
.hero-noite .fatos svg { color: #6EE7A0; }

/* no celular o logo mora aqui (claro, por causa do fundo) ate' a hero passar */
.hero-logo { display: none; }

.palco-rest { position: relative; min-height: 540px; }
.palco-rest .aro {
  position: absolute; width: 440px; right: -30px; bottom: 0;
  background: radial-gradient(circle at 50% 48%, rgba(52, 199, 116, .50), rgba(20, 146, 74, .20) 46%, transparent 70%);
  box-shadow: none;
}
/* medido em 1280 px: com 360 px a bandeja invadia o mapa e o chapeu tapava
   a coluna da direita; com 320 px o Katu cabe inteiro embaixo dele */
.palco-rest .katu-hero {
  position: absolute; right: 0; bottom: 24px; z-index: 3; width: min(320px, 62%);
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, .38));
}
.palco-rest .notif { z-index: 4; }
.palco-rest .n1 { top: auto; left: 0; bottom: 6%; }
/* acima do chapeu, numa linha so' (com 216 px de largura quebrava em 4); a
   ponta esquerda passa um pouco por cima do mapa, como notificacao que chega */
.palco-rest .n2 { top: 9%; right: 0; white-space: nowrap; }

/* -------------------------------------------------------------- mapa de mesas ao vivo */
.mapa {
  /* -24 px: entra no vao entre as colunas e abre lugar para o cartao do delivery */
  position: absolute; top: 3%; left: -24px; z-index: 2; width: 316px; padding: 14px;
  border-radius: 22px; background: rgba(255, 255, 255, .88); border: 1px solid rgba(255, 255, 255, .95);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .30);
  opacity: 0; transform: translateY(16px) scale(.94);
  animation: brotar .8s .45s var(--mola) forwards;
}
.mapa-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .8rem; }
.mapa-titulo { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--verde-escuro); }
.mapa-titulo svg { color: var(--btn-b); }
.mapa-status { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); white-space: nowrap; }
.mapa-status i { width: 8px; height: 8px; border-radius: 50%; background: #22A45D; animation: pulsar 1.8s infinite; }
@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 rgba(34, 164, 93, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(34, 164, 93, 0); }
}
.mapa-mesas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mesa {
  padding: 8px 9px; border-radius: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden;
  background: var(--verde-claro); border: 1.5px solid transparent;
  transition: border-color .4s, box-shadow .4s, transform .4s var(--mola);
}
.mesa b { display: block; font-size: .76rem; color: var(--verde-escuro); }
.mesa .v { display: block; font-size: .8rem; font-weight: 700; color: var(--verde); font-variant-numeric: tabular-nums; }
.mesa small { display: block; font-size: .68rem; color: var(--texto-2); }
.mesa.ocupada { background: var(--laranja-claro); }
.mesa.ocupada .v { color: #9A3412; }   /* o laranja do botao, no creme, dava 4,3 */
.mesa.agora { border-color: var(--laranja); box-shadow: 0 0 0 4px rgba(251, 133, 0, .18); transform: translateY(-2px); }

/* o que acabou de acontecer no salao: uma linha por vez, subindo */
.mapa-feed { list-style: none; position: relative; height: 34px; margin: 12px 0 0; padding: 0; border-top: 1px dashed var(--linha); overflow: hidden; }
.mapa-feed li {
  position: absolute; left: 2px; right: 2px; top: 11px; display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600; color: var(--verde-escuro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s var(--mola);
}
/* a nova so' entra depois que a velha saiu: juntas, as duas frases se
   embaralhavam no meio da troca */
.mapa-feed li.ativo { opacity: 1; transform: none; transition-delay: .22s; }
.mapa-feed li.saiu { opacity: 0; transform: translateY(-14px); transition-duration: .22s; }
.mapa-feed svg { flex: none; color: var(--btn-b); }

/* -------------------------------------------------------------- faixa */
/* ambar: logo abaixo de uma hero escura, a faixa verde do delivery sumiria nela */
.restaurantes .faixa { background: var(--ambar); color: var(--verde-noite); }
.restaurantes .faixa span { font-weight: 600; }
.restaurantes .faixa svg { color: var(--verde); }

/* -------------------------------------------------------------- calculadora dos dois sistemas */
.calc-dois { padding: clamp(24px, 3vw, 36px); }
.calc-dois h3 { font-size: 1.3rem; }

/* -------------------------------------------------------------- o sistema por dentro */
/* abas no alto, a tela escolhida embaixo: texto de um lado, tela na moldura
   do outro. Sem JS as abas somem e as cinco telas ficam empilhadas. */
.tour-abas { display: none; }
.js .tour-abas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto clamp(28px, 4vw, 44px); }
.tour-aba {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px;
  border: 1px solid var(--linha); background: #fff; color: var(--texto); font-weight: 600; font-size: .95rem;
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s var(--mola);
}
.tour-aba svg { color: var(--btn-b); transition: color .25s; }
.tour-aba:hover { border-color: #E2D2BA; transform: translateY(-1px); }
.tour-aba[aria-selected="true"] { background: var(--verde); border-color: var(--verde); color: #fff; box-shadow: 0 8px 20px rgba(11, 94, 44, .25); }
.tour-aba[aria-selected="true"] svg { color: var(--ambar); }

.tour-painel { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.tour-painel + .tour-painel { margin-top: 72px; }
.js .tour-painel + .tour-painel { margin-top: 0; }
.js .tour-painel:not(.ativo) { display: none; }
.js .tour-painel.ativo:not([data-revela]) { animation: tour-entra .5s var(--mola); }
@keyframes tour-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tour-painel-cel { grid-template-columns: 1fr 1fr; }

.tour-texto h3 { font-size: clamp(1.4rem, 2.3vw, 1.8rem); }
.tour-texto ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.tour-texto li { display: flex; gap: 10px; color: var(--texto-2); }
.tour-texto li svg { flex: none; margin-top: 3px; color: var(--verde-2); }
.link-demo { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-weight: 600; text-decoration: none; }
.link-demo:hover svg { transform: translateX(3px); }
.link-demo svg { transition: transform .25s var(--mola); }

/* moldura de navegador */
.tela { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--linha); box-shadow: var(--sombra-g); }
.tela-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F7F0E6; border-bottom: 1px solid var(--linha); }
.tela-barra i { width: 10px; height: 10px; border-radius: 50%; background: #E4D6C2; flex: none; }
.tela-barra span {
  flex: 1; max-width: 340px; margin-left: 10px; padding: 4px 12px; border-radius: 8px;
  background: #fff; color: var(--texto-2); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tela img { width: 100%; height: auto; }
.tela-escura { border-color: #2A322C; }
.tela-escura .tela-barra { background: #1B211D; border-color: #2A322C; }
.tela-escura .tela-barra i { background: #3A443D; }
.tela-escura .tela-barra span { background: #262E28; color: #9FB0A5; }

/* moldura de celular */
.tela-cel { justify-self: center; width: min(300px, 100%); margin: 0; padding: 10px; border-radius: 46px; background: #141B16; box-shadow: var(--sombra-g), inset 0 0 0 2px #2C3830; }
.tela-cel img { width: 100%; height: auto; border-radius: 36px; }

/* -------------------------------------------------------------- para quem */
.segmentos.segmentos-4 { grid-template-columns: repeat(4, 1fr); }

/* -------------------------------------------------------------- plano unico */
/* Um plano so': em vez de um cartao estreito sozinho no meio, uma vitrine
   larga, com o preco de um lado e tudo o que vem incluso do outro. */
.plano.plano-unico {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 12px 48px; align-items: center;
  max-width: 1000px; margin: 0 auto; padding: clamp(28px, 4vw, 44px);
}
.plano-unico:hover { transform: none; }
.plano-unico .plano-katu { top: -66px; right: 28px; width: 104px; }
.plano-lado { display: flex; flex-direction: column; }
.plano-lado .btn { margin-top: 22px; }
.plano-inclui { padding-left: 44px; border-left: 1px dashed var(--linha); }
.plano-inclui h4 { font-size: .95rem; color: var(--verde); margin-bottom: 14px; }
.plano-unico ul { grid-template-columns: 1fr 1fr; gap: 12px 22px; margin: 0; }
/* com dois planos ou mais, volta o cartao em coluna do delivery: a lista
   ocupa o meio e o botao desce para o pe' do cartao */
.plano:not(.plano-unico) .plano-inclui { flex: 1; }
.nota-planos a { font-weight: 600; }

/* -------------------------------------------------------------- rodape */
.rodape-produto { display: block; margin-top: 8px; color: var(--ambar); font-weight: 600; font-size: .95rem; }

/* -------------------------------------------------------------- telas medias */
/* abaixo de 1200 px o cartao do delivery tampava o valor da mesa 3; ali o
   recado do delivery fica so' no rodape do mapa */
@media (max-width: 1199px) {
  .palco-rest .n2 { display: none; }
}
@media (max-width: 1180px) {
  .menu a { padding: 8px 9px; }
}
@media (max-width: 1080px) {
  .marca-produto { font-size: .9rem; padding-left: 10px; }
  .palco-rest .katu-hero { width: min(290px, 58%); }
  .mapa { width: 290px; }
}

/* -------------------------------------------------------------- celular */
@media (max-width: 900px) {
  .hero-logo { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; width: auto; }
  .hero-logo img { width: min(150px, 42vw); height: auto; }
  .hero-logo span {
    font-weight: 600; font-size: 1rem; color: var(--ambar);
    padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, .22);
  }
  .marca-produto { display: none; }   /* no topo do celular nao cabe; a hero ja' diz */

  .palco-rest { min-height: 400px; margin-top: 18px; }
  .mapa { width: min(260px, 74%); top: 0; left: 0; padding: 12px; }
  .mapa-mesas { grid-template-columns: repeat(2, 1fr); }
  .mesa:nth-child(n+5) { display: none; }   /* 4 mesas bastam para entender */
  .palco-rest .aro { width: 260px; right: -40px; bottom: 6px; }
  .palco-rest .katu-hero { width: min(200px, 54%); right: 0; bottom: 8px; }
  .palco-rest .n1 { left: 0; bottom: 0; }   /* mais alto, encostava no braco do Katu */
  .palco-rest .n2 { display: none; }

  .segmentos.segmentos-4 { grid-template-columns: none; }

  /* abas numa fileira que rola com o dedo; a tela vem depois do texto */
  .js .tour-abas { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -20px; padding: 4px 20px 10px; scrollbar-width: none; }
  .js .tour-abas::-webkit-scrollbar { display: none; }
  .tour-painel, .tour-painel-cel { grid-template-columns: 1fr; }
  .tela-cel { width: min(280px, 82%); }

  .plano.plano-unico { grid-template-columns: 1fr; }
  .plano-inclui { padding: 22px 0 0; border-left: 0; border-top: 1px dashed var(--linha); }
}
@media (max-width: 600px) {
  .plano-unico ul { grid-template-columns: 1fr; }
  .plano-unico .plano-katu { top: -54px; right: 14px; width: 86px; }
}

@media (prefers-reduced-motion: reduce) {
  .mapa { opacity: 1; transform: none; }
}