/* PÁGINA /mennuu: venda do site para restaurantes (Mennuu).
   Reaproveita style.css (nav, .svc-hero, .svc-block, .svc-item, .svc-cta, .statement__lines, .pill, rodapé);
   aqui só entra o que é próprio desta página. Movimento em mennuu.js. */

/* texto de apoio embaixo da frase do topo */
.mn-hero { align-content: center; gap: calc(28px + var(--fs-manifesto) * 1.17); }   /* 28px + uma linha do título, entre o preço e a logo */
.mn-hero__sub { font-size: var(--fs-ui); font-weight: 500; color: var(--ink); display: flex; gap: 1.6em; flex-wrap: wrap; justify-content: center; }
.mn-hero__sub a { border: 1px solid var(--line); border-radius: 99px; padding: .75em .95em; line-height: 1; transition: background .2s, color .2s, border-color .2s; }
.mn-hero__sub a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.mn-hero__sub span { align-self: center; opacity: .55; }

/* marca embaixo da frase: logo da Mennuu e, embaixo, "por UPCOM" */
.mn-hero__marca { display: grid; justify-items: center; gap: 12px; color: var(--ink); }
.mn-hero__marca img { display: block; height: 58px; width: auto; }
.mn-hero__marca span { font-size: var(--fs-ui); font-weight: 500; line-height: 1; opacity: .55; }
@media (max-width: 1279px) { .mn-hero__marca img { height: 48px; } }
@media (max-width: 767px) { .mn-hero__marca img { height: 38px; } .mn-hero__marca { gap: 9px; } }

/* VITRINE: janela de navegador presa na tela; o print do site rola dentro dela conforme a página rola */
.mn-show { position: relative; height: 320vh; background: var(--cream); }
.mn-show__pin {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h));
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px;
  padding: var(--pad) var(--pad) calc(var(--pad) * 1.5);
}
.mn-show__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--fs-ui); font-weight: 500; line-height: 1; }
.mn-show__head a:hover { opacity: .5; }
.mn-show__head span { opacity: .55; }
.mn-browser {
  justify-self: center; width: min(1180px, 100%); height: 100%; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: #111; box-shadow: 0 30px 80px rgba(0,0,0,.22);
}
.mn-browser__bar { flex: none; height: 38px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; background: #1c1c1c; }
.mn-browser__dots { display: flex; gap: 7px; }
.mn-browser__dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a3a; }
.mn-browser__url { font-size: 12px; font-weight: 500; text-transform: none; color: #a8a8a8; background: #2a2a2a; border-radius: 99px; padding: .45em 1.4em; line-height: 1; }
.mn-browser__view { flex: 1; min-height: 0; overflow: hidden; }
.mn-browser__view img { display: block; width: 100%; height: auto; will-change: transform; }

/* celulares: moldura simples, o print preenche */
.mn-phone { aspect-ratio: 390 / 844; border: 7px solid #111; border-radius: 34px; overflow: hidden; background: #111; box-shadow: 0 24px 60px rgba(0,0,0,.2); will-change: translate; }
.mn-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* dupla de celulares no lugar da foto do bloco: fica presa enquanto o texto rola, e cada um anda numa velocidade */
.mn-duo { position: sticky; top: calc(var(--nav-h) + var(--pad)); align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); padding: 40px 6% 0; }
.mn-duo .mn-phone:last-child { margin-top: 90px; }
.mn-solo { position: sticky; top: calc(var(--nav-h) + var(--pad)); align-self: start; padding: 0 22%; }

/* botão em pílula dentro de um item (igual ao "Fale conosco" do menu) */
.mn-link { margin-top: 20px; }
.mn-link a { display: inline-block; border: 1px solid var(--ink); border-radius: 99px; padding: .75em .95em; font-size: var(--fs-ui); font-weight: 500; line-height: 1; transition: background .2s, color .2s, border-color .2s; }
.mn-link a:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* frase gigante */
.mn-stmt { padding: var(--stmt-top) var(--pad) calc(var(--copy-pb) * .7); }
/* abertura da página: mesma letra gigante, altura só do texto */
.mn-stmt--top { padding-bottom: var(--stmt-top); }
.mn-stmt--top + .svc-block { padding-top: 56px; }

/* PREÇO: faixa preta (.svc-cta) com os três números */
.mn-price h2 { margin-bottom: 70px; }
.mn-price h2 small { display: block; font-size: var(--fs-lead); letter-spacing: 0; line-height: 1.3; margin-top: 22px; opacity: .6; text-transform: none; font-weight: 500; }
.mn-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pad); }
.mn-fact { border-top: 1px solid rgba(255,255,255,.28); padding-top: 22px; }
.mn-fact b { display: block; font-size: calc(var(--fs-manifesto) * 1.35); font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.mn-fact span { display: block; margin-top: 12px; font-size: var(--fs-lead); line-height: 1.3; font-weight: 500; text-transform: none; opacity: .6; max-width: 14em; }
.mn-price__cta { display: flex; justify-content: center; margin-top: 80px; }

/* PERGUNTAS */
.mn-faq { max-width: 1140px; margin: 0 auto; }
.mn-faq details { border-top: 1px solid var(--line); }
.mn-faq details:last-child { border-bottom: 1px solid var(--line); }
.mn-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px 0; font-size: var(--fs-lead); line-height: 1.3; font-weight: 500; text-transform: none; }
.mn-faq summary::-webkit-details-marker { display: none; }
.mn-faq summary::after { content: "+"; flex: none; font-size: 1.2em; line-height: 1; transition: transform .25s; }
.mn-faq details[open] summary::after { transform: rotate(45deg); }
.mn-faq summary:hover { opacity: .6; }
.mn-faq p { padding: 0 0 28px; font-size: var(--fs-lead); line-height: 1.4; font-weight: 500; text-transform: none; opacity: .6; max-width: 30em; }

/* rodapé: a 2ª linha desta página é um pouco mais comprida que a do site */
.footer__title--mn { font-size: min(calc((100vw - 2 * var(--pad)) / 20), 190px); }

/* itens entram em sequência (o .reveal é do style.css/main.js) */
.svc-item.reveal:nth-of-type(2), .mn-fact.reveal:nth-child(2) { transition-delay: .08s; }
.svc-item.reveal:nth-of-type(3), .mn-fact.reveal:nth-child(3) { transition-delay: .16s; }

@media (max-width: 1279px) {
  .mn-price h2 { margin-bottom: 50px; }
  .mn-duo { padding: 30px 2% 0; }
  .mn-solo { padding: 0 18%; }
}
@media (max-width: 767px) {
  .mn-hero { padding-top: 40px; padding-bottom: 40px; min-height: 0; gap: calc(22px + var(--fs-manifesto) * 1.17); }
  .mn-show { height: 230vh; }
  .mn-show__pin { gap: 14px; grid-template-rows: auto auto; align-content: center; }
  .mn-show__head span { max-width: 14em; line-height: 1.3; }
  .mn-browser { border-radius: 9px; height: auto; }
  .mn-browser__view { flex: none; aspect-ratio: 5 / 6; }   /* janela mais baixa: o print (de desktop) rola bastante dentro dela */
  .mn-faq h2 br { display: none; }
  .mn-browser__bar { height: 30px; padding: 0 10px; }
  .mn-browser__dots i { width: 8px; height: 8px; }
  .mn-browser__url { font-size: 10px; }
  .mn-duo, .mn-solo { position: static; order: -1; }
  .mn-duo { padding: 0 4%; gap: 16px; }
  .mn-duo .mn-phone:last-child { margin-top: 48px; }
  .mn-solo { padding: 0 20%; }
  .mn-phone { border-width: 5px; border-radius: 24px; }
  .mn-facts { grid-template-columns: 1fr; gap: 28px; }
  .mn-price__cta { margin-top: 48px; }
  .mn-faq summary { padding: 20px 0; }
  .footer__title--mn { font-size: 12vw; }
}