/* ===========================
   FONTES
=========================== */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden; 
}

body {
  font-family: "Roboto", sans-serif;
}

/* ===========================
   TIPOGRAFIA
=========================== */
h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  line-height: 78px;
  color: #fff;
}

h2, p, a {
  font-family: "Roboto", sans-serif;
}

h2 {
  color: #074073;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 30px;
}

p {
  color: #373d41;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 23px;
}

a {
  text-decoration: none;
  color: inherit;
  font-size: 1rem;
}

.container {
  width: 100%;
  margin: 0 auto;
}

/* ===========================
   ANIMAÇÕES DE ENTRADA
=========================== */
.js [data-anime] {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
}
.js .fadeInDown {
  transform: translate3d(0, -20px, 0);
}
.js .fadeInUp {
  transform: translate3d(0, 20px, 0);
}
.js .fadeInUp-btn {
  transform: translate3d(0, 80px, 0);
}
.js .fadeInRight {
  transform: translate3d(20px, 0, 0);
}
.js .fadeInLeft {
  transform: translate3d(-20px, 0, 0);
}
.js .anime {
  opacity: 1;
  transform: none;
  transition: opacity 800ms, transform 800ms;
}

/* ===========================
   HEADER
=========================== */
.header {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  background: #fff;
  height: 80px;
  z-index: 1000;
}

.menu {
  display: grid;
  height: 20px;
  column-gap: 20px;
  grid-template-columns: auto auto;
  padding: 42px;
}

.logo {
  width: 140px;
  height: auto;
  margin-top: -22px;
}

.logo img {
  width: 100%;
  height: auto;
}

.links_menu {
  margin-top: -28px;
  text-align: right;
}

.links_menu ul li {
  display: inline-block;
  margin-left: 14px;
  margin-top: 16px;
}

.links_menu ul li a {
  color: #074073;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  line-height: 18px;
}

.links_menu ul li a:hover {
  color: #F26835;
  transition: 250ms;
}

/* Destaque do menu como botão */
.links_menu ul li a.btn-link {
  background-color: #F26835;
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.links_menu ul li a.btn-link:hover {
  background-color: #d9562d;
}

/* ===========================
   HOME INDEX
=========================== */
.home {
  display: grid;
  grid-template-columns: auto;
  background-image: url(/img/bg/bg.webp);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 900px;
}

.pg-inicio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 220px;
  padding-left: 80px;
}

.logo-pulsante {
  max-width: 500px;
  width: 100%;
  height: auto;
}

.title {
  text-align: left;
}

.title h1 {
  color: #074073;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  line-height: 78px;
}

/** SOBRE - BLOCO INSTITUCIONAL **/ 

.sobre {
  display: flex;
  background-color: #074073;
}

.holder-sobre {
  display: flex;
  align-items: center;   
  justify-content: center; 
  column-gap: 10px;
  grid-template-columns: 100%;
  background-color: #fff;
  margin-top: -80px;
  width: 100%;
  height: 638px;
}

.bloco-sobre {
  display: grid;
  column-gap: 20px;
  grid-template-columns: 50% 50%;
}

.bloco-sobre img {
  width: 400px;
  height: auto;
  justify-self: center; 
  align-self: center;   
}

.sobre-txt {
  display: flex;
  flex-direction: column; 
  justify-content: center; 
  align-items: center;    
  text-align: left;      
  height: 100%;
  margin-left: 140px;
  margin-top: -20px;
}

.sobre-txt h2 {
  color: #074073;
  margin-top: 60px;
}

.sobre-txt p {
  margin-top: 30px;
  color: #074073;
}

.sobre-contato {
  margin-top: 30px;
  text-align: right;
}

.sobre-contato p {
  margin-top: 10px;
}


/** FRETE **/
#frete {
  width: 100%;
  height: 600px;
  background-color: #074073;
  display: flex;
  align-items: center;
  justify-content: center;
}

#frete .container {
  width: 100%;
  height: 100%;
  padding: 0 clamp(80px, 10vw, 160px);
}

#frete .bloco-frete {
  display: grid;
  grid-template-columns: 65% 35%; 
  width: 100%;
  height: 100%;
}

#frete .grid-frete {
  display: flex;
  align-items: center;     
  justify-content: center; 
  text-align: center;
  flex-direction: column;
  color: #FFF8ED; 
}

#frete .grid-frete.imagem img {
  max-width: 100%;
  height: auto;
  display: block;
}

#frete .grid-frete.texto {
  align-items: flex-start;   
  justify-content: center;  
  text-align: left;          
}

#frete .grid-frete.texto h1 {
  width: 100%; 
  color: #FFF8ED;
}

#frete .grid-frete.texto h2 {
  width: 100%; 
  color: #FFF8ED;
  margin-top: 20px;
}

#frete .grid-frete.texto p {
  width: 100%; 
  color: #FFF8ED;
  margin-top: 10px;
}


/* ===========================
   CANAL DE TRANSMISSÃO
=========================== */
#canal-transmissao {
  width: 100%;
  height: 600px;
  background-color: #fef8f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

#canal-transmissao .container {
  width: 100%;
  height: 100%;
}

#canal-transmissao .bloco-canal-transmissao {
  display: grid;
  grid-template-columns: 30% 70%;
  height: 100%;
}

#canal-transmissao .grid-canal-transmissao.imagem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#canal-transmissao .grid-canal-transmissao.imagem img {
  max-width: 100%;
  height: auto;
  display: block;
}

#canal-transmissao .grid-canal-transmissao.texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 80px;
}

#canal-transmissao .grid-canal-transmissao.texto h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  line-height: 78px;
  margin-bottom: 20px;
  color: #ff5722;
}

#canal-transmissao .grid-canal-transmissao.texto p {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 30px;
  color: #444;
}

#canal-transmissao .btn-canal-transmissao {
  background-color: #ff5722;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  margin-top: 40px;
}
#canal-transmissao .btn-canal-transmissao:hover {
  background-color: #e64a19;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

/* ===========================
   CENTRAL DE ATENDIMENTO
=========================== */
#atendimento {
  width: 100%;
  height: 600px;
  background-color: #fef8f2;
  display: flex;
  align-items: center;
  justify-content: center;
}
#atendimento .container {
  width: 100%;
  height: 100%;
}
#atendimento .bloco-atendimento {
  display: grid;
  grid-template-columns: 70% 30%;
  height: 100%;
}
#atendimento .grid-atendimento.texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 0 140px;
}
#atendimento .grid-atendimento.texto h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  margin-bottom: 30px;
  color: #074073;
}
#atendimento .btn-atendimento {
  background-color: #074073;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#atendimento .btn-atendimento:hover {
  background-color: #052c52;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
#atendimento .grid-atendimento.imagem {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#atendimento .grid-atendimento.imagem img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ajustes exclusivos para página de contato */
.contato-page #atendimento {
  background-color: #fff;
}
.contato-page #atendimento .grid-atendimento.texto h1 {
  color: #F26835;
}
.contato-page #atendimento .grid-atendimento.texto p {
  text-align: left;
  margin-bottom: 20px;
  color: #373d41;
}
.contato-page #atendimento .btn-atendimento {
  background-color: #F26835;
  color: #fff;
}
.contato-page #atendimento .btn-atendimento:hover {
  background-color: #d9562d;
}

/* ===========================
   PÁGINA INSTITUCIONAL
=========================== */
.institucional-home {
  width: 100%;
  background-color: #fef8f2;
}
.institucional-home .container {
  width: 100%;
  max-width: 100%;
  height: 650px;
  background: url("/img/bg/institucional-bg.webp") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 40px;
  box-sizing: border-box;
}
.title-institucional {
  text-align: center;
  color: #fff;
  max-width: 800px;
}
.title-institucional h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  line-height: 78px;
  margin-bottom: 20px;
  color: #074073;
}
.title-institucional p {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: #074073;
}

/* Sessão Institucional - Sobre */
.institucional-sobre {
  background-color: #074073;
  width: 100%;
  height: 850px;
  display: flex;
  align-items: center;
}
.institucional-sobre .container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.bloco-inst-sobre {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 40px;
  width: 100%;
  align-items: center;
}
.texto-inst-sobre h1.titulo-sobre {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  margin-bottom: 20px;
  color: #fff;
}
.texto-inst-sobre p {
  font-size: 16px;
  line-height: 1.6;
  color: #d4d4d4;
}
.video-inst-sobre iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.video-inst-sobre video{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  object-fit: cover;
  background:#002f5a;
}
@media (min-width: 992px){
  .video-inst-sobre video{ height: 400px; }
}


/* ===========================
   PÁGINA PEDIDO ELETRONICO
=========================== */
.pedidoeletronico-home {
  width: 100%;
  background-color: #fef8f2;
}
.pedidoeletronico-home .container {
  width: 100%;
  max-width: 100%;
  height: 700px;
  background: url("/img/bg/pedido-eletronico-bg.webp") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 40px;
  box-sizing: border-box;
}
.title-pedidoeletronico {
  text-align: center;
  color: #fff;
  max-width: 800px;
}
.title-pedidoeletronico h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  line-height: 78px;
  margin-bottom: 20px;
  color: #074073;
}
.title-pedidoeletronico p {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  line-height: 26px;
  margin-bottom: 30px;
  color: #074073;
}
.btn-pedidoeletronico {
  background-color: #F26835;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px 40px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-pedidoeletronico:hover {
  background-color: #ff5722;
  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.pedidoeletronico-section {
  width: 100%;
  background-color: #074073;
  height: 750px;
  display: flex;
  align-items: center;
}
.pedidoeletronico-section .container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.bloco-pedidoeletronico {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: 40px;
  align-items: center;
  height: 100%;
  color: #fff;
}
.info-pedidoeletronico h2 {
  margin-top: 40px;
  margin-bottom: 20px;
  color: #fff;
}
.info-pedidoeletronico p {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: #fff;
}
.img-pedidoeletronico img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ===========================
   PÁGINA CONTATO
=========================== */
.contato-home {
  width: 100%;
  background-color: #fef8f2;
}
.contato-home .container {
  width: 100%;
  max-width: 100%;
  height: 850px;
  background: url("/img/bg/contato.webp") no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 40px;
  box-sizing: border-box;
}
.title-contato {
  text-align: center;
  color: #fff;
  max-width: 800px;
}
.title-contato h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  line-height: 78px;
  margin-bottom: 20px;
  color: #d9562d;
}

/* ===========================
   FOOTER
=========================== */
.fim {
  width: 100%;
  background-color: #fff;
  padding: 60px 20px;
  text-align: center;
}
.fim > .container > img {
  display: block;
  margin: 0 auto 40px auto;
  max-width: 280px;
  margin-top: 200px;
}
.fim .bloco-fim {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 80px;
  margin-bottom: 40px;
  justify-items: center;
}
.fim .bloco-fim h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #074073;
}
.fim .bloco-fim a {
  display: block;
  margin: 6px 0;
  text-decoration: none;
  font-size: 1rem;
  color: #333;
  transition: color 0.3s ease;
}
.fim .bloco-fim a:hover {
  color: #ff5722;
}
.fim .onde-estamos {
  margin-top: 80px;
  margin-bottom: 40px;
}
.fim .onde-estamos h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #074073;
}
.fim .onde-estamos p {
  font-size: 1rem;
  color: #444;
}
.fim .bloco-img-bg-fim {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: -120px;
}
.fim .bloco-img-bg-fim img {
  height: 220px;
  width: auto;
  display: block;
}
.fim .bloco-img-bg-fim img:first-child {
  justify-self: start;
}
.fim .bloco-img-bg-fim img:last-child {
  justify-self: end;
}

/* Rodapé inferior */
.rodape {
  width: 100%;
  height: 60px;
  background-color: #F26835;
  display: flex;
  align-items: center;
}
.rodape .container {
  width: 100%;
  height: 100%;
}
.rodape-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 100%;
}
.rodape-info .copy {
  justify-self: start;
  margin-left: 200px;
}
.rodape-info .developer {
  justify-self: end;
  margin-right: 200px;
}
.rodape-info p {
  margin: 0;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #fff;
}

/* ===========================
   WHATSAPP FLOAT BUTTON
=========================== */
.whatsapp-fab {
  position: fixed;
  right: 110px;
  bottom: 30px;
  z-index: 1001;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  animation: wa-pulse 2.2s infinite;
}
.whatsapp-fab i {
  font-size: 28px;
  line-height: 1;
}
.whatsapp-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37,211,102,.55);
}
.whatsapp-fab .wa-label {
  position: absolute;
  right: 70px;
  white-space: nowrap;
  background: #1da1f2;
  color: #fff;
  font: bold 12px/1 Helvetica, Arial, sans-serif;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.whatsapp-fab:hover .wa-label {
  opacity: 1;
  transform: translateX(0);
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width: 807px) {
  .whatsapp-fab {
    right: 280px;
    bottom: 30px;
    width: 65px;
    height: 65px;
  }
  .whatsapp-fab i { font-size: 24px; }
  .whatsapp-fab .wa-label { display: none; }
}



/* ===========================
   ANIMAÇÕES
=========================== */
@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Logo animada */
.logo-pulsante {
  max-width: 500px;
  width: 100%;
  height: auto;
  opacity: 0;
  animation: fadeIn 1.2s ease forwards, pulse 2s ease-in-out infinite;
  animation-delay: 0s, 1.2s; 
}

/* Texto animado */
.title h1 {
  color: #074073;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  line-height: 78px;
  opacity: 0;
  animation: fadeIn 1.2s ease forwards;
  animation-delay: 0.2s; 
}

/* RESPONSIVO */

/* ===========================
   NAV MOBILE (hambúrguer)
   - desktop mantém seu layout atual
=========================== */
/* Botão hamburguer - fica oculto no desktop */
.nav-toggle{
  display:none;
  position:relative;
  width:42px; height:42px;
  border:0; background:#F26835; color:#fff;
  border-radius:6px; cursor:pointer;
}
.nav-toggle .bar{
  position:absolute; left:9px; right:9px; height:2px; background:#fff;
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle .bar:nth-child(1){ top:13px; }
.nav-toggle .bar:nth-child(2){ top:20px; }
.nav-toggle .bar:nth-child(3){ top:27px; }
/* anima pra “X” quando aberto */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ top:20px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ top:20px; transform:rotate(-45deg); }



/* ===========================
   BREAKPOINTS
=========================== */


/* ---- Large tablets (<=1200px) ---- */
@media (max-width:1200px){
  .container{ width:92%; }
  .title h1, .title-institucional h1,
  #atendimento .grid-atendimento.texto h1,
  .title-pedidoeletronico h1{ font-size:56px; line-height:68px; }
  .pg-inicio{ margin-top:180px; padding-left:40px; }
}

/* Desktop */
@media (min-width: 1025px){
  .home{
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/img/bg/bg.webp);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    height: auto;
    min-height: clamp(620px, calc(100vh - 80px), 900px); 
    padding: clamp(24px, 5vh, 56px) clamp(80px, 10vw, 160px); 
    box-sizing: border-box;
  }

  .pg-inicio{
    margin-top: 0;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
    justify-content: center;
    padding-left: 0;
  }

  /* logo e título “cedem” em telas de notebook */
  .logo-pulsante{
    max-width: clamp(320px, 32vw, 500px);
    max-height: clamp(220px, 48vh, 420px);
    height: auto;
  }
  .pg-inicio .title h1{
    font-size: clamp(40px, 4vw, 64px);
    line-height: 1.15;
  }

  /* INSTITUCIONAL (mantenha como já estava) */
  .institucional-sobre .container{
    max-width: 1400px;
    width: 100%;
    padding: 0 clamp(24px, 6vw, 80px);
    box-sizing: border-box;
  }
  .bloco-inst-sobre{
    grid-template-columns: minmax(420px, 55%) minmax(380px, 45%);
    gap: clamp(24px, 4vw, 48px);
  }
}

/* notebooks com pouca altura */
@media (min-width:1025px) and (max-height:820px){
  .home{
    padding-top: 80px;                       
    padding-bottom: clamp(16px, 3vh, 40px);     
  }
}



/* ---- Tablets (<=992px) ---- */
@media (max-width:992px){
  /* header vira flex + mostra hambúrguer */
  .menu{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 0; height:auto;
  }
  .logo{ width:132px; margin-top:0; }
  .links_menu{ margin-top:0; text-align:left; }

  .nav-toggle{ display:inline-block; }

  /* Off-canvas dropdown */
  /* deixe o nav com id="primary-nav" (ver HTML abaixo) */
  #primary-nav{
    position:fixed; top:80px; left:0; right:0;
    background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.12);
    display:none; padding:20px 24px; z-index:999;
  }
  body.nav-open #primary-nav{ display:block; }

  #primary-nav ul{ margin:0; padding:0; list-style:none; }
  #primary-nav ul li{ display:block; margin:6px 0; }
  #primary-nav ul li a{
    display:block; padding:12px 10px; font-size:14px; letter-spacing:.08em;
    color:#074073; border-radius:6px;
  }
  #primary-nav ul li a:hover{ background:#f3f6fa; color:#074073; }

  /* botão laranja dentro do menu mobile mantém destaque */
  #primary-nav ul li a.btn-link{
    background:#F26835; color:#fff; text-align:center;
  }

  /* HERO / HOME */
  .home{ height:620px; background-attachment:scroll; }
  .pg-inicio{ margin-top:140px; padding-left:0; gap:16px; }
  .logo-pulsante{ max-width:360px; }
  .title h1{ font-size:48px; line-height:58px; }

  /* SOBRE home */
  .holder-sobre{ height:auto; padding:50px 0; margin-top:-40px; }
  .bloco-sobre{ grid-template-columns:1fr; row-gap:30px; }
  .sobre-txt{ margin-left:0; margin-top:0; align-items:flex-start; }
  .bloco-sobre img{ width:320px; }

  /* FRETE */
  #frete{ height:auto; padding:80px 0; }
  #frete .container{ padding:0; }
  #frete .bloco-frete{ grid-template-columns:1fr; row-gap:30px; margin-top:0; }
  #frete .grid-frete{ text-align:center; }
  #frete .grid-frete.texto{ align-items:center; }
  #frete .grid-frete.texto h1{ font-size:56px; line-height:1.1; }

  /* Canal de Transmissão */
  #canal-transmissao{ height:auto; padding:80px 0; }
  #canal-transmissao .bloco-canal-transmissao{ grid-template-columns:1fr; row-gap:24px; }
  #canal-transmissao .grid-canal-transmissao.texto{ padding:0 12px; align-items:center; text-align:center; }
  #canal-transmissao .grid-canal-transmissao.texto h1{ font-size:52px; line-height:1.1; }

  /* Atendimento */
  #atendimento{ height:auto; padding:80px 0; }
  #atendimento .bloco-atendimento{ grid-template-columns:1fr; row-gap:24px; height: 404px;}
  #atendimento .grid-atendimento.texto{ align-items:center; padding:0 20px; text-align:center; }
  .contato-page #atendimento .grid-atendimento.texto{ text-align:left; align-items:flex-start; }

  /* Institucional – capa */
  .institucional-home .container{ height:520px; padding:24px; }
  .title-institucional{ max-width:640px; }
  .title-institucional h1{ font-size:56px; line-height:66px; }

  /* Institucional – seção Sobre */
  .institucional-sobre{ height:auto; padding:80px 0; }
  .institucional-sobre .container{ align-items:flex-start; }
  .bloco-inst-sobre{ grid-template-columns:1fr; row-gap:28px; }
  .video-inst-sobre iframe{ width:100%; height:min(56vw, 420px); }

  /* Pedido eletrônico – capa */
  .pedidoeletronico-home .container{ height:560px; padding:24px; }
  .title-pedidoeletronico h1{ font-size:56px; line-height:66px; }

  /* Pedido eletrônico – seção */
  .pedidoeletronico-section{ height:auto; padding:80px 0; }
  .pedidoeletronico-section .container{ padding:0 24px; }
  .bloco-pedidoeletronico{ grid-template-columns:1fr; row-gap:24px;}

  /* Footer (bloco de 3 colunas vira 2) */
  .fim .bloco-fim{ grid-template-columns:repeat(2,1fr); }
  .fim > .container > img{ margin-top:120px; }
}

/* ---- iPads / Tablets Médios (769px a 1024px) ---- */
@media (min-width:769px) and (max-width:1024px){

  /* Home */
  .home { 
    width: auto;
    height: 700px;
  }
  .pg-inicio { 
    margin-top: 220px; 
    padding-left: 20px; 
    gap: 20px;
  }
  .title h1 { font-size: 42px; line-height: 52px; }

  /* Sobre */
  .bloco-sobre { grid-template-columns: 1fr 1fr; row-gap: 0; }
  .sobre-txt { margin-left: 40px; margin-top: -20px; }
  .bloco-sobre img { width: 300px; display: block; }

  /* Frete */
  #frete {
    height: auto;                     
    padding: 100px 0 100px 0;          
  }

  #frete .container {
    width: 100%;
    height: auto;
    padding: 0 100px;                  
    margin-top: 0;                   
  }

  #frete .bloco-frete {
    grid-template-columns: 1fr 1fr;
    margin-top: 0; 
    width: 100%;
  }

  #frete .grid-frete {
    justify-content: flex-start; 
    text-align: left;
  }

  #frete .grid-frete.texto h1 { font-size: 36px; }
  #frete .grid-frete.texto h2 { font-size: 20px; margin-top: 10px; }
  #frete .grid-frete.texto p  { font-size: 16px; margin-top: 10px; }

  /* Canal de Transmissão */
  #canal-transmissao .bloco-canal-transmissao { grid-template-columns: 40% 60%; }
  #canal-transmissao .grid-canal-transmissao.texto {
    padding: 0 24px;
    align-items: flex-start;
    text-align: left;
  }
  #canal-transmissao .grid-canal-transmissao.texto h1 {
    font-size: 48px; line-height: 1.1;
  }

  /* Atendimento */
  #atendimento .bloco-atendimento { grid-template-columns: 60% 40%; height: 364px;}
  #atendimento .grid-atendimento.texto { padding: 0 40px; text-align: left; }
  #atendimento .grid-atendimento.texto h1 { font-size: 48px; line-height: 52px;}

  /* Institucional */
  .institucional-home .container { height: 480px; padding: 32px; }
  .title-institucional h1 { font-size: 52px; }

  .texto-inst-sobre h1.titulo-sobre { font-size: 36px; }

  /* Pedido Eletrônico */
  .pedidoeletronico-home .container { height: 520px; padding: 32px; }
  .title-pedidoeletronico h1 { font-size: 52px; }
  .bloco-pedidoeletronico { grid-template-columns: 60% 40%; gap: 24px; padding: 20px;}

    /* Footer */
  .fim .bloco-fim { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .fim > .container > img { margin-top: 100px; max-width: 220px; }

  /* Ajuste imagens do rodapé no tablet */
  .fim .bloco-img-bg-fim img {
    max-width: 200px;
    height: auto;
    opacity: 0.9;
    margin-top: 20px;
  }
  .fim .bloco-img-bg-fim {
    margin-top: 20px;
    align-items: flex-start;
  }

  /* Rodapé inferior - Tablet */
  .rodape .container {
    width: 100%;          
    max-width: 100%;      
    padding: 0 40px;      
  }

  .rodape-info {
    grid-template-columns: 1fr 1fr; 
    justify-content: space-between; 
  }

  .rodape-info .copy {
    justify-self: start;
    margin-left: 0; 
  }

  .rodape-info .developer {
    justify-self: end;
    margin-right: 0; 
  }

    /* Institucional */
  .institucional-home .container { 
    height: 580px;      
    padding: 32px;
  }

  .title-institucional {
    margin-top: 60px;  
  }

  .title-institucional h1 {
    font-size: 52px;
  }

  .title-institucional p {
    margin-top: -26px;  
  }

  /* Ajustes Institucional - Tablet */
  .institucional-sobre {
  height: auto;                 
  padding: 90px 0;              
  }

  .institucional-sobre .container {
  padding: 0 80px;             
  margin-bottom: 60px;
  }

  .bloco-inst-sobre {
  grid-template-columns: 1fr;  
  gap: 32px;                   
  }

  .texto-inst-sobre h1.titulo-sobre {
  font-size: 32px;             
  text-align: left;            
  margin-bottom: 16px;
  }

  .texto-inst-sobre p {
  text-align: left; 
  margin-bottom: 24px;         
  }

  .video-inst-sobre iframe {
  width: 80%;              
  height: 360px;          
  display: block;        
  margin: 0 auto;          
  }

  /* Contato - Tablet */
  .contato-home .container {
    height: 650px;          
    padding: 32px;          
    background-size: cover; 
    background-position: center;
  }

  /* Pedido Eletrônico - Tablet */
  .pedidoeletronico-home .container {
    height: 680px;          
    padding: 32px;         
    background-size: cover; 
    background-position: center;
  }

  .pedidoeletronico-page #atendimento .grid-atendimento.imagem {
    position: relative;
    top: 26px !important;      
  }
}





/* ---- Smartphones (<=768px) ---- */
@media (max-width:768px){
  .title h1,
  .title-institucional h1,
  #atendimento .grid-atendimento.texto h1,
  .title-pedidoeletronico h1{ font-size:38px; line-height:48px; }

  .home{ height:520px; }
  .pg-inicio{ margin-top:120px;}
  .logo-pulsante{ max-width:260px; }

  .bloco-sobre img{ width:68%; }

  #canal-transmissao .grid-canal-transmissao.texto h1{ font-size:40px; }
  #frete .grid-frete.texto h1{ font-size:44px; }


  .texto-inst-sobre p{ font-size:15px; line-height:1.55; }

 
  .fim .bloco-fim{ grid-template-columns:1fr; gap:24px; }
  .fim .bloco-img-bg-fim{ margin-top:-40px; }

  /* Fim Página - Mobile */
  .fim .bloco-img-bg-fim img {
    width: 70%;        
    height: auto;    
    opacity: 0.6;      
    display: block;    
    margin: 0 auto;    
    margin-top: 30px;

  }

  .whatsapp-fab{ right:18px; bottom:18px; width:56px; height:56px; }
  .whatsapp-fab .wa-label{ display:none; }

  .home {
  height: auto;          
  min-height: 520px;    
  padding-bottom: 60px;  
  }

  .pg-inicio {
    flex-direction: column;   
    align-items: center;      
    justify-content: center;  
    text-align: center;       
    margin-top: 100px;      
    padding-left: 0;         
    gap: 24px;               
  }

  .pg-inicio .logo-pulsante {
    margin-top: 60px;   
  }

  .pg-inicio .title {
    width: 100%;            
    text-align: center;    
  }

  .pg-inicio .title h1 {
    text-align: center;     
    margin-bottom: 0;
  }

  .holder-sobre {
    width: 100%;
    margin: 0;            
    border-radius: 0;     
  }


  .sobre .container {
    width: 100%;
    padding: 0;         
  }

  .bloco-sobre {
    margin-top: -40px;
    padding: 20px;
  }

  .bloco-frete {
    padding: 20px;
    margin-bottom: -60px;
  }

  .grid-frete img  {
    width: 100%;
    height: auto;
    display: block;      
    margin: 0 auto;
    padding: 40px;
  }

  /* Canal de Transmissão - Mobile */
  #canal-transmissao .bloco-canal-transmissao {
    position: relative;  
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-top: 40px;
    padding: 10px;
  }

  #canal-transmissao .grid-canal-transmissao.texto {
    order: 1;              
    width: 100%;
    position: relative;
    z-index: 2;           
  }

  #canal-transmissao .grid-canal-transmissao.imagem {
    order: 2;
    width: 100%;
    position: absolute;   
    top: 20px;            
    left: 0;              
    z-index: 1;           
  }

  #canal-transmissao .grid-canal-transmissao.imagem img {
    width: 28%;
    max-width: 240px;
    height: auto;
    opacity: 0.5;         
    margin-top: 250px;
  }

    
    /* Oculta a imagem da section SOBRE no mobile */
  .sobre .bloco-sobre img {
    display: none;
  }

  /* Atendimento - Mobile */
  #atendimento .bloco-atendimento {
    position: relative;       
    display: flex;
    flex-direction: column;   
    align-items: flex-start;  
    text-align: left;
    margin-top: 100px;        
    height: 250px;
  }

  #atendimento .grid-atendimento.texto {
    order: 1;
    width: 100%;
    position: relative;
    z-index: 2;               
  }

  #atendimento .grid-atendimento.imagem {
    order: 2;
    width: 100%;
    position: absolute;       
    top: 20px;                
    left: 0;                  
    z-index: 1;              
  }

  #atendimento .grid-atendimento.imagem img {
    width: 26%;              
    max-width: 240px;
    height: auto;
    opacity: 0.5;             
    margin-top: 170px;      
  }

  .container-mobile {           
    margin-top: -40px;       
  }

  /* Rodapé - Mobile */
  .rodape {
    height: auto; 
    padding: 20px 0; 
  }

  .rodape-info {
    display: flex;
    flex-direction: column; 
    align-items: center;     
    text-align: center;      
    gap: 12px;              
  }

  .rodape-info .copy,
  .rodape-info .developer {
    margin: 0; 
  }

  /* Atendimento - Mobile */

  .bloco-inst-sobre {
    padding: 20px;
    margin-top: -60px;
    margin-bottom: -20px;
  }

  .title-institucional {
    margin-bottom: 30px;
  }

  .title-institucional p {
    margin-top: -10px;
  }

  .texto-inst-sobre {
    margin-bottom: 40px;
  }

  .texto-inst-sobre h1.titulo-sobre {
    font-size: 32px;
  }

  /* ===========================
    Página Contato - Mobile
  =========================== */
  .contato-home .container {
    height: 500px;        
    padding: 40px 20px;   
    background-size: cover;
    background-position: center;
  }

  .contato-page #atendimento {
    position: relative;
    height: auto;             
    padding: 80px 20px;       
  }

  .contato-page #atendimento .bloco-atendimento {
    display: flex;
    flex-direction: column;   
    align-items: flex-start;
    text-align: left;
    position: relative;
    margin-top: -80px;
  }

  .contato-page #atendimento .grid-atendimento.texto {
    order: 1;
    width: 100%;
    position: relative;
    z-index: 2;               
    text-align: center;       
    padding: 0 10px;
  }

  .contato-page #atendimento .grid-atendimento.texto p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
    color: #444;
  }

  .contato-page #atendimento .grid-atendimento.texto h1 {
    font-size: 36px;
    line-height: 44px;
    margin-bottom: 24px;
    color: #F26835;
    margin-top: 40px;

    text-align: center;       
    width: 100%;              
    display: block;          
    justify-content: center;  
  }


  .contato-page #atendimento .btn-atendimento {
    margin: 0 auto;           
    display: inline-block;
  }

  .contato-page #atendimento .grid-atendimento.imagem {
    order: 2;
    position: absolute;       
    top: 0;
    right: -20px;            
    width: auto;              
    z-index: 1;
    text-align: right;        
  }

  .contato-page #atendimento .grid-atendimento.imagem img {
    width: 28%;               
    max-width: 220px;
    height: auto;
    opacity: 0.4;             
    margin-top: 280px;        
  }

  .pedidoeletronico-home .container {
    align-items: flex-start;   
    padding-top: 380px;       
    padding-bottom: 40px;      
    margin-bottom: 160px;
  }

  .title-pedidoeletronico {
    margin-top: 40px;          
  }

  .bloco-pedidoeletronico {
    margin-top: -20px;
    padding: 10px;          
    margin-bottom: -20px;
  }

  .img-pedidoeletronico img {
    display: none;
  }

  /* ===========================
    Atendimento - Pedido Eletrônico
  =========================== */
  .pedidoeletronico-page #atendimento .bloco-atendimento {
    margin-top: 0 !important; 
    margin-bottom: 60px;
  }

  .pedidoeletronico-page #atendimento .grid-atendimento.texto {
    position: relative;
    top: 40px !important;       
  }

  .pedidoeletronico-page #atendimento .grid-atendimento.imagem {
    position: relative;
    top: -120px !important;       
  }

}