/* Muito Food! — site institucional
   Valores medidos do site original (WordPress/Elementor, set/2026).
   Pontos de quebra: tablet <= 1024px · celular <= 767px. */

@font-face { font-family: "Wooow"; font-style: normal; font-weight: bold; font-display: auto; src: url(../fonts/wooow-heavy.woff) format("woff"); }
@font-face { font-family: "Wooow"; font-style: normal; font-weight: normal; font-display: auto; src: url(../fonts/wooow-light.woff) format("woff"); }

:root {
  --laranja: #FF4E08;
  --navy: #0B1421;
  --claro: #EDEDED;
  --verde: #4FC32B;
  --verde-escuro: #1A5408;
  --caixa: 1140px;
}
@media (max-width: 1024px) { :root { --caixa: 1024px; } }
@media (max-width: 767px)  { :root { --caixa: 767px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem; font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
p { margin: 0 0 .9rem; }
ul { margin: 0; padding-left: 40px; }
figure { margin: 0; }
img { border: none; height: auto; max-width: 100%; }
a { color: #c36; text-decoration: none; background-color: transparent; }
strong { font-weight: bolder; }
.leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- estrutura: seção > caixa > coluna ---------- */
.secao { position: relative; display: flex; flex-direction: column; }
.caixa {
  position: relative; display: flex; width: 100%; max-width: var(--caixa);
  margin: 0 auto; height: 100%; flex: 1 1 auto;
}
.caixa > *, .coluna > * { min-width: 0; flex: 0 1 auto; max-width: 100%; }
.coluna { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 10px; width: 100%; }
.coluna > * { width: auto; }   /* largura pelo esticamento da coluna, como no original */

/* ---------- blocos ---------- */
.titulo { margin: 0; padding: 0; line-height: 1; font-family: "Wooow", sans-serif; font-weight: 700; }
.texto { text-align: start; }
.img { text-align: center; }
.img img { display: inline-block; vertical-align: middle; }

.botao { text-align: start; }
.btn {
  display: inline-block; padding: 12px 24px; border: 3px solid var(--laranja); border-radius: 30px;
  background-color: transparent; color: var(--navy); fill: var(--navy);
  font-family: "Roboto", sans-serif; font-size: 15px; font-weight: 500; line-height: 1;
  text-align: center; transition: all .3s;
}
.btn:hover, .btn:focus { background-color: var(--laranja); color: var(--claro); }
.btn-claro { color: var(--claro); }
.btn-whatsapp { border-color: var(--verde); }
.btn-whatsapp:hover, .btn-whatsapp:focus { background-color: var(--verde); color: var(--verde-escuro); }

/* vídeo de fundo: transparente até começar a tocar, entra em 1s */
.video-fundo { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; direction: ltr; transition: opacity 1s; }
.video-fundo.carregando { opacity: 0; }
.video-fundo video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; max-width: none; }
.video-fundo::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ---------- 1. topo ---------- */
.hero { background-color: #000; min-height: 700px; padding: 0 10px; }
.hero .video-fundo::before { background-color: #000; opacity: .7; }
.hero .caixa { flex-direction: row; padding: 10px 0; }
.hero-texto { flex: 0 0 auto; }
.hero-logo { padding: 50px 0 0; text-align: start; }
.hero-logo img { width: 40%; }
.hero-titulo { padding: 100px 0 0; font-size: 45px; color: var(--laranja); }
.hero-lead {
  padding: 0 50px 0 0; font-family: "Raleway", sans-serif; font-size: 19px; font-weight: 700; line-height: 21px;
  text-shadow: 0 0 10px rgba(0,0,0,.3); color: var(--claro);
}
.hero-sub { margin: -30px 0 0; padding: 0 11px 0 0; font-family: "Raleway", sans-serif; font-weight: 400; line-height: 17px; color: var(--claro); }

/* ---------- 2. somos ---------- */
.somos { background-color: var(--claro); }
.somos .caixa { flex-direction: row; align-items: center; padding: 220px 0 115px; }
.somos-titulo { width: auto; }
.somos-titulo { margin: 0 0 25px; padding: 30px 0 0; font-size: 60px; color: var(--navy); }
.somos-texto {
  width: 48%; max-width: 48%; font-family: "Roboto", sans-serif; font-size: 36px; font-weight: 400;
  line-height: 45px; letter-spacing: 0; color: var(--navy);
}

/* ---------- 3. para quem é ---------- */
.para-quem { background-color: var(--claro); }
.para-quem .caixa { flex-direction: row; padding: 70px 0 140px; }
.para-quem-foto { flex: 0 0 auto; }
.para-quem-texto { justify-content: center; }
.para-quem-titulo { margin: 0 0 25px; padding: 30px 20px 0 0; font-size: 60px; color: var(--navy); }
.para-quem-lista { padding: 0 50px 0 0; font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 400; line-height: 18px; word-spacing: 0; color: var(--navy); }
.para-quem-selo { padding: 0 27px 0 0; text-align: end; }
.para-quem-selo img { width: 33%; }

/* ---------- 4. divisor ---------- */
.divisor { min-height: 250px; padding: 0 10px; background-image: url(../img/bg2.png); background-position: center center; background-repeat: no-repeat; }
.divisor::before { content: ""; position: absolute; inset: 0; background-color: var(--claro); opacity: .5; }
.divisor .caixa { flex-direction: column; gap: 20px; padding: 10px 0; }
.forma { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; direction: ltr; }
.forma svg { display: block; position: relative; left: 50%; width: calc(100% + 1.3px); transform: translateX(-50%); }
.forma-topo { top: -1px; }
.forma-topo svg { height: 80px; transform: translateX(-50%) rotateY(180deg); }
.forma-topo path { fill: var(--claro); }
.forma-base { bottom: -1px; transform: rotate(180deg); }
.forma-base path { fill: var(--navy); }
@media (min-width: 1025px) { .divisor { background-attachment: fixed; } }

/* ---------- 5. manifesto ---------- */
.manifesto { background-color: var(--navy); }
.manifesto .caixa { flex-direction: column; padding: 130px 0 10px; }
.manifesto-titulo { margin: 0 0 25px; text-align: center; font-size: 46px; color: var(--claro); }
.manifesto-texto {
  padding: 0 60px; text-align: justify; font-family: "Wooow", sans-serif; font-size: 40px; font-weight: normal;
  line-height: 49px; letter-spacing: 0; color: var(--laranja);
}
.manifesto-simbolo { margin: -54px 0 0; padding: 0 436px 0 0; text-align: end; }
.manifesto-simbolo img { width: 4%; }

/* ---------- 6. como servimos ---------- */
.servimos { background-color: var(--navy); }
.servimos .caixa { flex-direction: column; gap: 20px; padding: 220px 0 0; }
.servimos-titulo { margin: 0 0 25px; padding: 30px 20px 0 0; text-align: center; font-size: 60px; color: var(--claro); }
.servimos-linha { background-color: var(--navy); }
.servimos-linha .caixa { flex-direction: row; justify-content: space-around; }
.servimos-linha-1 .caixa { padding: 10px 0 0; }
.servimos-linha-2 .caixa { padding: 10px 0 220px; }
.cartao { text-align: center; }
.cartao figure { display: inline-block; width: 40%; margin: 0 0 15px; }
.cartao img { display: block; width: 100%; border-radius: 14px; transition-duration: .3s; }
.cartao h3 {
  margin: .5rem 0 0; font-family: "Wooow", sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--claro);
}
.cartao:hover h3 { color: var(--laranja); }
.cartao p { margin: 0; font-family: "Roboto", sans-serif; font-size: 18px; font-weight: 400; line-height: 17px; color: var(--claro); }

/* ---------- 7. faixa de vídeo ---------- */
.faixa-video { min-height: 500px; padding: 0 10px; }
.faixa-video .caixa { flex-direction: column; gap: 20px; padding: 10px 0; }

/* ---------- 8. depoimentos ---------- */
.depoimentos { background-color: var(--claro); }
.depoimentos .caixa { flex-direction: row; padding: 60px 0; }
.depoimentos-titulo { flex: 0 0 auto; justify-content: center; }
.depoimentos-videos { justify-content: center; }
.depoimentos-m { padding: 0 60px 0 0; }
.depoimentos-m img { width: 38%; }
.depoimentos .titulo { margin: 0 0 25px; padding: 0 50px 0 0; text-align: center; font-size: 46px; color: var(--navy); }
.video { position: relative; aspect-ratio: 1.77777; overflow: hidden; cursor: pointer; text-align: center; }
.video img { display: block; width: 100%; aspect-ratio: 1.77777; object-fit: cover; object-position: center center; }
.play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.play svg { width: 100px; height: 100px; fill: #fff; opacity: .8; filter: drop-shadow(1px 0 6px rgba(0,0,0,.3)); transition: all .5s; }

/* ---------- 9. galeria ---------- */
.galeria { background-color: var(--claro); min-height: 514px; }
.galeria .caixa { flex-direction: column; gap: 20px; padding: 80px 0 0; }
.galeria-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 80%; max-width: 80%; align-self: center; }
.galeria-grade > * { width: auto; }
.galeria-grade a { position: relative; display: block; overflow: hidden; }
.galeria-grade .foto { width: 100%; padding-bottom: 66.6667%; background-position: center center; background-size: cover; transition: filter .8s, transform .8s; }
.galeria-grade span { position: absolute; inset: 0; background-color: rgba(0,0,0,0); transition: background-color .8s; }
.galeria-grade a:hover span, .galeria-grade a:focus span { background-color: rgba(0,0,0,.5); }
/* mesma regra da galeria original: colunas mudam com largura estritamente menor que 1024/767 */
@media (max-width: 1023.98px) { .galeria-grade { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 766.98px)  { .galeria-grade { grid-template-columns: repeat(1, 1fr); } }

/* ---------- 10. por que escolher ---------- */
.por-que { background-color: var(--claro); }
.por-que .caixa { flex-direction: column; padding: 40px 0 65px; }
.por-que .titulo { margin: 0 0 25px; text-align: center; font-size: 46px; color: var(--navy); }
.por-que-lista { padding: 0 0 0 84px; font-family: "Roboto", sans-serif; font-size: 30px; font-weight: 400; line-height: 45px; letter-spacing: 0; color: var(--navy); }
.por-que .botao { padding: 25px 0 0; text-align: center; }

/* ---------- 11. rodapé ---------- */
.rodape { background-color: var(--navy); min-height: 275px; padding: 0 10px; }
.rodape .caixa { flex-direction: row; align-items: flex-end; padding: 10px 0; }
.rodape-endereco .texto { font-family: "Roboto", sans-serif; font-size: 13px; font-weight: 400; line-height: 22px; letter-spacing: 0; color: var(--claro); }
.social { display: flex; align-self: flex-end; width: auto; font-size: 25px; line-height: 1; }
.social a {
  display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em;
  border-radius: 10%; background-color: var(--navy); fill: var(--laranja); transition: all .3s;
}
.social a:hover { opacity: .9; }
.social svg { display: block; width: 1em; height: 1em; }
.rodape-logo { text-align: end; }
.rodape-logo img { width: 14%; }

/* ---------- colunas lado a lado (>= 768px) ---------- */
@media (min-width: 768px) {
  .hero-texto, .hero-vazio, .para-quem-texto, .depoimentos-videos { width: 50%; }
  .para-quem-foto { width: 43.468%; }
  .servimos-linha .coluna { width: 25%; }
  .depoimentos-titulo { width: 44.971%; }
  .rodape-endereco { width: 33.3333%; }
  .rodape-marca { width: 66.6666%; }
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) and (min-width: 768px) { .hero-texto { width: 478.4px; } }
@media (max-width: 1024px) {
  .somos-texto { font-size: 20px; line-height: 1.6em; }
  .depoimentos .titulo { font-size: 38px; }
  .por-que-lista { font-size: 26px; }
}

/* ---------- celular ---------- */
@media (max-width: 767px) {
  .caixa, .coluna { flex-wrap: wrap; }   /* como o original: todo container quebra linha no celular */
  .hero .caixa { align-items: center; }
  .hero .video-fundo::before { opacity: .6; }
  .hero-texto { padding: 0; align-self: center; }
  .hero-vazio { min-height: 0; margin: 0; padding: 0; }
  .hero-logo { padding: 0; text-align: center; }
  .hero-logo img { width: 60%; }
  .hero-titulo { padding: 50px 20px 0; font-size: 38px; }
  .hero-lead { padding: 0 10px; text-align: center; font-size: 19px; }
  .hero-sub { padding: 0 10px; text-align: center; font-size: 16px; }
  .botao { text-align: center; }

  .somos .caixa { flex-direction: column; padding: 110px 0 0; }
  .somos-titulo { width: 100%; }
  .somos-titulo { padding: 0 20px; font-size: 38px; }
  .somos-texto { margin: 0; padding: 0 20px; width: 100%; max-width: 100%; font-size: 16px; line-height: 1.3em; }

  .para-quem { padding: 0 1px; }
  .para-quem .caixa { padding: 70px 0 110px; }
  .para-quem-titulo { padding: 0 20px; font-size: 38px; }
  .para-quem-lista { padding: 0 10px 0 0; font-size: 16px; }

  .divisor { min-height: 131px; }

  .manifesto-titulo { padding: 0 20px; text-align: start; font-size: 38px; }
  .manifesto-texto { padding: 0 20px; font-size: 31px; line-height: 1.2em; }
  .manifesto-simbolo { display: none; }

  .servimos .caixa { padding: 110px 0 0; }
  .servimos-titulo { padding: 0 20px; text-align: center; font-size: 31px; }
  .servimos-linha-2 .caixa { padding: 10px 0 110px; }
  .cartao { padding: 0 20px; }
  .cartao figure { width: 30%; margin-bottom: 15px; }
  .cartao h3 { font-size: 18px; }
  .cartao p { font-size: 16px; }

  .depoimentos-m { width: auto; margin: 0 32px 0 0; padding: 0; text-align: center; }
  .depoimentos-m img { width: 81%; }
  .depoimentos .titulo { padding: 0 20px; align-self: center; font-size: 35px; }

  .por-que .titulo { font-size: 38px; }
  .por-que-lista { margin: 0; padding: 0 20px; font-size: 16px; line-height: 1.3em; }

  .rodape-endereco .texto { margin: 0; padding: 0 20px; font-size: 16px; line-height: 1.3em; }
  .social { align-self: center; font-size: 35px; }
  .rodape-logo { text-align: center; }
  .rodape-logo img { width: 26%; }
}

/* ---------- animações de entrada ---------- */
.js [data-anim] { visibility: hidden; }
.js [data-anim].entrou { visibility: visible; animation-duration: 2s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
.fadeIn { animation-name: fadeIn; }
.fadeInUp { animation-name: fadeInUp; }

/* ---------- janela sobre a página (fotos e depoimentos) ---------- */
.janela { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; }
.janela img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.janela .janela-video { width: min(92vw, calc(88vh * 16 / 9)); aspect-ratio: 16 / 9; }
.janela iframe { width: 100%; height: 100%; border: 0; }
.janela button { position: absolute; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; padding: 16px; opacity: .8; }
.janela button:hover { opacity: 1; }
.janela .fechar { top: 8px; right: 8px; }
.janela .anterior { left: 8px; }
.janela .proxima { right: 8px; }