@font-face {
  font-family: 'Yeah';
  src: url('../fonts/yeah-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cnossus';
  src: url('../fonts/cnossus.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: 'Yeah', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
}

.site-header {
  width: 100%;
  height: 80px;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  transition: background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* depois de scrollar pra além do hero, fica vermelho */
.site-header.is-scrolled {
  background-color: #EF381A;
  box-shadow: 0 4px 18px -8px rgba(0, 0, 0, 0.45);
}

/* quando o menu lateral abre, mantém vermelho pra contraste com o hambúrguer cream */
body.menu-open .site-header {
  background-color: #EF381A;
}

.header-container {
  width: 100%;
  height: 100%;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-left: 0;
  position: relative;
  width: 140px;
}

.logo-header {
  width: 100%;
  height: 35px;          /* 140px * (71.6/289.88) — aspect ratio do viewBox */
  display: block;
  transition:
    filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.logo-header svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .logo-link { width: 110px; }
  .logo-header { height: 27px; }
}

.logo-link:hover .logo-header {
  filter: brightness(120%) sepia(20%) saturate(110%) contrast(95%);
  transform: scale(1.03);
}

/* Tagline aparece ABAIXO do logo no hover — branca, levemente menor que o logo */
.logo-tagline {
  position: absolute;
  top: 125%;
  left: 50%;
  margin-top: 0;
  width: 88%;
  font-family: 'Yeah', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -6px);
  pointer-events: none;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo-link:hover .logo-tagline,
.logo-link:focus-visible .logo-tagline {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* esconde tagline em mobile (espaço apertado) */
@media (max-width: 768px) {
  .logo-tagline {
    display: none;
  }
}

/* HAMBURGER */
.menu-button {
  --bar-width: 30px;
  --bar-height: 5px;
  --bar-gap: 8px;

  width: var(--bar-width);
  height: calc((var(--bar-height) * 2) + var(--bar-gap));
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0;
  display: block;
  z-index: 1001;
}

.menu-button span {
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: #F4E3AE;
  display: block;
  position: absolute;
  left: 0;
  transition: transform 0.35s ease, top 0.35s ease;
  transform-origin: center;
}

.menu-button span:first-child {
  top: 0;
}

.menu-button span:last-child {
  top: calc(var(--bar-height) + var(--bar-gap));
}

.menu-button:hover span:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.menu-button:hover span:last-child {
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
}

.menu-button.is-active span:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.menu-button.is-active span:last-child {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* BLUR DESKTOP */
.menu-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* escuro semi-transparente */
  z-index: 998; /* atrás do menu, à frente do conteúdo */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* MENU */
.site-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(440px, 28%, 540px); /* não quebra em notebooks 1366x768 */
  height: 100vh;
  background-color: #EF381A;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

body.menu-open .site-menu {
  transform: translateX(0);
}

body.menu-open .menu-blur {
  opacity: 1;
  visibility: visible;
}

body.menu-open {
  overflow: hidden;
}

.menu-content {
  width: 100%;
  height: calc(100% - 64px);
  padding: 160px 60px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.menu-links a {
  font-family: var(--font-primary);
  font-size: 35px;
  line-height: 0.95;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.menu-links a:hover {
  transform: translateX(8px);
  opacity: 0.75;
}

.menu-footer {
  text-align: center;
  color: #ffffff;
}

.follow-title {
  font-family: var(--font-primary);
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-bottom: 22px;
}

.social-links img {
  width: 42px;
  height: 42px;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-links a:hover img {
  transform: translateY(-4px) scale(1.06);
  opacity: 0.75;
}

.copyright {
  font-family: Arial, sans-serif;
  font-size: 9px;
  line-height: 1.2;
}

.menu-strip {
  width: 100%;
  height: 64px;
  background-image: url('../img/elements/faixa.png');
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 center;
  animation: stripLoop 18s linear infinite;
}

@keyframes stripLoop {
  from { background-position: 0 center; }
  to   { background-position: -400px center; }
}

/* MOBILE */
@media (max-width: 768px) {
  .site-header {
    height: 100px;
  }

  .header-container {
    padding: 0 47px;
  }

  /* .logo-header herda width: 100% do desktop, dimensionado pelo .logo-link mobile */

  .menu-button {
    --bar-width: 45px;
    --bar-height: 7px;
    --bar-gap: 13px;
  }

  .menu-blur {
    display: none;
  }

  .site-menu {
    width: 100%;
    height: 100vh;
  }

  .menu-content {
    height: calc(100% - 64px);
    padding: clamp(110px, 22vh, 180px) 47px 24px;
    align-items: center;
    overflow-y: auto;
  }

  .menu-links {
    align-items: center;
    text-align: center;
    gap: 26px;
  }

  .menu-links a {
    font-size: 40px;
    text-align: center;
  }

  .menu-links a:hover {
    transform: scale(1.04);
  }

  .menu-footer {
    margin-top: 48px; /* respiro entre CONTATO e SIGA-NOS */
  }

  .social-links img {
    width: 54px;
    height: 54px;
  }

  .copyright {
    font-size: 9px;
  }
}

.hero-slider {
  width: 100%;
  margin-top: 0;                /* header é fixed e transparente — sobrepõe */
  background-color: #1a0707;    /* combina com o fundo escuro dos banners */
  position: relative;
}

.hero-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.hero-track {
  display: flex;
  width: 100%;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  cursor: grab;
}

.hero-slider:active .hero-track {
  cursor: grabbing;
}

.hero-slide {
  width: 100%;
  min-width: 100%;
  flex-shrink: 0;
  display: block;
  touch-action: pan-y;
}

.hero-slide,
.hero-slide img {
  user-select: none;
  -webkit-user-drag: none;
}

.hero-slide picture,
.hero-slide img {
  width: 100%;
  display: block;
}

.hero-slide img {
  height: auto;
  pointer-events: none;
}

/* ---------- BANNER EM LAYERS (parallax no hover) ---------- */
.hero-slide--layered {
  position: relative;
  width: 100%;
  aspect-ratio: 3840 / 1080;
  overflow: hidden;
  background: #1a0707;
}
@media (max-width: 768px) {
  .hero-slide--layered {
    aspect-ratio: 1080 / 1514;
  }
}

.hero-slide--layered .hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-slide--layered .hero-layer img,
.hero-slide--layered .hero-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-slide--layered .hero-layer--front { z-index: 2; }

.hero-slide--layered .hero-layer--bg     { z-index: 1; }
.hero-slide--layered .hero-layer--chef   {
  z-index: 2;
  transform: translate3d(0, 0, 0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero-slide--layered .hero-layer--hotdog {
  z-index: 3;
  transform: translate3d(0, 0, 0);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* IMAGEM UNICA MOBILE (substitui os 3 layers em <= 768px) */
.hero-mobile-img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 4;
}
@media (max-width: 768px) {
  .hero-mobile-img { display: block; }
  .hero-slide--layered .hero-layer,
  .hero-copy > *:not(.hero-cta-cardapio),
  .hero-disclaimer {
    display: none;
  }
  /* hero-copy continua existindo so pra carregar a CTA centralizada */
  .hero-copy {
    inset: auto 0 8% 0;
    top: auto;
    left: 0;
    right: 0;
    max-width: none;
    align-items: center;
    z-index: 5;
  }
}
/* defensivo: garante chef/fundo/hotdog visiveis em desktop */
@media (min-width: 769px) {
  .hero-mobile-img { display: none !important; }
  .hero-slide--layered .hero-layer { display: block !important; }
  .hero-slide--layered .hero-layer img { display: block !important; }
}

/* ---------- TEXTOS + SELO sobre o banner 1 ---------- */
.hero-copy {
  position: absolute;
  z-index: 5;
  left: 18.23%;                    /* 700/3840 — safe zone proporcional ao banner */
  top: clamp(110px, 17%, 180px);   /* sempre abaixo do header */
  max-width: 30%;
  color: #F4E3AE;
  text-align: left;
  font-family: 'Yeah', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* o bloco em si nao captura cliques, mas a CTA dentro precisa */
.hero-copy > *:not(.hero-cta-cardapio) { pointer-events: none; }
.hero-cta-cardapio { pointer-events: auto; }
.hero-copy__title {
  font-family: 'Cnossus', 'Yeah', sans-serif;
  font-size: clamp(34px, 4vw, 72px);
  line-height: 0.92;
  margin: 0 0 0;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* primeira linha "A verdade nao se discute." menor pra caber em UMA linha */
.hero-copy__title > span:first-child {
  font-size: 0.36em;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-bottom: -0.05em; /* puxa "SE MORDE!" pra cima */
}
.hero-copy__title--accent {
  color: #FFFFFF;
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.hero-copy__sub {
  font-family: 'Cnossus', 'Yeah', sans-serif;
  font-size: clamp(20px, 2vw, 34px);
  margin: -0.1em 0 18px;     /* margem-top negativa cola no "SE MORDE!" */
  font-weight: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #F4E3AE;
}
.hero-copy__feats {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FFFFFF;
}
.hero-copy__feats li {
  position: relative;
  padding-left: 30px;
  display: flex;
  align-items: center;
  min-height: 22px;
}
.hero-copy__feats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  background-image: url('../../imgs/icons/pig_icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
}
.hero-copy__disclaimer {
  font-size: clamp(8px, 0.7vw, 11px);
  opacity: 0.78;
  margin: 0;
  letter-spacing: 0.02em;
  max-width: 95%;
}

/* DISCLAIMER no rodapé do banner (apenas desktop) — dentro da safe zone */
.hero-disclaimer {
  position: absolute;
  z-index: 5;
  right: 18.23%;
  bottom: 4%;
  width: auto;
  max-width: none;
  margin: 0;
  text-align: right;
  font-family: 'Yeah', sans-serif;
  font-size: clamp(8px, 0.65vw, 12px);
  color: #F4E3AE;
  opacity: 0.78;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 768px) {
  .hero-disclaimer { display: none; }
}

.hero-slide--layered img.hero-seal {
  position: absolute;
  z-index: 5;
  right: 4%;                  /* fora da safe zone — colado no canto */
  top: 6%;                    /* sempre no topo, como pedido no QA */
  bottom: auto;
  width: 9vw;
  max-width: 150px;
  min-width: 100px;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.35));
  transform-origin: center;
  animation: heroSealHeartbeat 1.4s ease-in-out infinite;
}
/* batida de coração — leve giro pra direita preservado em todos os keyframes */
@keyframes heroSealHeartbeat {
  0%   { transform: rotate(9deg) scale(1); }
  14%  { transform: rotate(9deg) scale(1.10); }
  28%  { transform: rotate(9deg) scale(1); }
  42%  { transform: rotate(9deg) scale(1.08); }
  70%  { transform: rotate(9deg) scale(1); }
  100% { transform: rotate(9deg) scale(1); }
}

/* mobile: textos no RODAPÉ do banner (igual ao prototipo XD) */
@media (max-width: 768px) {
  .hero-copy {
    top: auto;
    bottom: 6%;
    left: 4%;
    right: 4%;
    max-width: none;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .hero-copy__title {
    align-items: center;
    font-size: clamp(28px, 8vw, 44px);
    line-height: 1;
    letter-spacing: 0;
    gap: 3px;
    margin-bottom: 10px;
  }
  .hero-copy__title > span:first-child {
    font-size: 0.45em; /* primeira linha bem menor que "SE MORDE!" */
    white-space: normal; /* permite quebra em mobile se precisar */
  }
  /* "SE MORDE!" 100% branco solido no mobile - sem outline pra ficar legivel */
  .hero-copy__title--accent {
    color: #FFFFFF;
    -webkit-text-stroke: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  }
  .hero-copy__sub {
    font-size: clamp(15px, 4.2vw, 20px);
    margin-bottom: 14px;
  }
  .hero-copy__feats {
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 12px;
  }
  .hero-copy__feats li {
    padding-left: 28px;
    min-height: 20px;
  }
  .hero-copy__feats li::before {
    width: 20px;
    height: 20px;
  }
  .hero-copy__disclaimer {
    font-size: 9px;
    text-align: center;
    max-width: 94%;
    margin: 0 auto;
  }
  /* selo escondido no mobile (texto ocupa o rodapé do banner agora) */
  .hero-slide--layered img.hero-seal {
    display: none;
  }
}

/* BOLINHAS FORA DO BANNER */
.hero-dots {
  width: 100%;
  padding: 24px 0 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  background-color: #F9F1D7;
}

/* CTA cream pill — fora do banner (logo abaixo das bolinhas) */
.hero-cta-cardapio {
  align-self: flex-start;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 36px;
  background: linear-gradient(180deg, #F9F0D5 0%, #F4E3AE 100%);
  color: #92402D;
  font-family: 'Yeah', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #92402D;
  border-radius: 999px;
  box-shadow: 0 12px 26px -14px rgba(146, 64, 45, 0.45);
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.4s,
    color 0.4s,
    box-shadow 0.4s;
  position: relative;
  z-index: 2;
}

.hero-cta-cardapio { width: fit-content; }

/* variante alt - usada em banners 2/3 onde a CTA fica posicionada
   absoluta dentro do slide (nao tem .hero-copy nesses banners) */
.hero-cta-cardapio--alt {
  position: absolute;
  left: 18.23%;
  bottom: 12%;
  z-index: 5;
  margin: 0;
}

/* sub-titulo na banner 2 (Grande Granja) e similar — caps grande branco */
.hero-banner-sub {
  position: absolute;
  z-index: 5;
  left: 18.23%;
  bottom: 30%;
  margin: 0;
  max-width: 38%;
  font-family: 'Cnossus', 'Yeah', sans-serif;
  font-size: clamp(20px, 2vw, 36px);
  line-height: 1;
  font-weight: normal;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  pointer-events: none;
}
@media (max-width: 768px) {
  .hero-banner-sub { display: none; }
}
@media (max-width: 768px) {
  .hero-cta-cardapio--alt {
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
  }
}

.hero-cta-cardapio svg {
  width: 22px;
  height: 22px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-cta-cardapio:hover {
  background: #EF381A;
  color: #F9F0D5;
  border-color: #EF381A;
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -14px rgba(239, 56, 26, 0.55);
}

.hero-cta-cardapio:hover svg {
  transform: translateX(6px);
}

@media (max-width: 768px) {
  .hero-cta-cardapio {
    font-size: 16px;
    padding: 10px 22px;
    align-self: center; /* centralizado no mobile, dentro do .hero-copy */
    margin-top: 8px;
  }
  .hero-cta-cardapio svg { width: 16px; height: 16px; }
}

.hero-dot {
  width: 25px;
  height: 25px;
  border: none;
  border-radius: 999px;
  background-color: #92402D;
  cursor: pointer;
  transition:
    width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.4s ease;
}

/* ATIVO */
.hero-dot.is-active {
  width: 50px;
  background-color: #EF381A;
  pointer-events: none;   /* 🚫 não clicável */
  cursor: default;        /* remove cursor de botão */
}

/* HOVER (apenas nos NÃO ativos) */
.hero-dot:not(.is-active):hover {
  width: 50px;
  background-color: #92402D;
}

/* MOBILE */
@media (max-width: 768px) {
  .hero-slider {
    margin-top: 0; /* header é fixed transparente, banner vai full-bleed pro topo */
  }

  .hero-dots {
    padding: 18px 0 24px;
    gap: 13px;
  }

  .hero-dot {
    width: 20px;
    height: 20px;
  }

  .hero-dot.is-active {
    width: 40px;
  }

  .hero-dot:not(.is-active):hover {
    width: 40px;
  }
}

/* PRELOADER */
.preloader {
  position: fixed;
  inset: 0;
  background-color: #EF381A;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader.is-hidden {
  transform: translateY(-100%);
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preloader-logo {
  width: 240px;
  max-width: 72vw;
  margin-bottom: 24px;
}
/* versao GIF dispensa entrada animada (o GIF ja anima sozinho) */
.preloader-logo--gif {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes preloaderLogoIn {
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes preloaderLogoFloat {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.03) translateY(-3px); }
}

/* SLOGAN PALAVRA-POR-PALAVRA */
.preloader-slogan {
  margin: 24px 0 0;
  font-family: 'Yeah', sans-serif;
  font-size: 20px;
  color: #F4E3AE;
  letter-spacing: 0.05em;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.preloader-slogan span {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  animation: preloaderWord 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.preloader-slogan span:nth-child(1) { animation-delay: 0.35s; }
.preloader-slogan span:nth-child(2) { animation-delay: 0.85s; }
.preloader-slogan span:nth-child(3) { animation-delay: 1.35s; }
@keyframes preloaderWord {
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .preloader-slogan { font-size: 17px; gap: 8px; }
}

/* LOADER COM SVG */
.sausage-loader {
  position: relative;
  width: 200px;
  max-width: 70vw;
}

.sausage-svg {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

/* preenchimento dentro da salsicha */
.sausage-fill {
  position: absolute;
  left: 9.5%;
  top: 24%;
  height: 50%;
  width: 0%;
  max-width: 80%;
  background-color: #F4E3AE;
  border-radius: 999px;
  z-index: 1;
  transition: width 0.18s linear;
}

/* MOBILE */
@media (max-width: 768px) {
  .preloader-logo {
    width: 160px;
    max-width: 66vw;
    margin-bottom: 24px;
  }

  .sausage-loader {
    width: 200px;
    max-width: 76vw;
  }
}

.menu-section {
  background-color: #F9F0D5;
  padding: 15px clamp(20px, 8vw, 200px);
}

.menu-categories {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px; /* controla o espaçamento */
  flex-wrap: nowwrap; /* evita estourar */
}

.menu-category {
  background: none;
  border: none;
  cursor: pointer;
  color: #92402D;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transition: color 0.35s ease, transform 0.35s ease;
}

.menu-category img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(24%) sepia(34%) saturate(1061%) hue-rotate(332deg) brightness(93%) contrast(88%);
  transition: filter 0.35s ease, transform 0.35s ease;
}

.menu-category span {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1;
  text-transform: uppercase;
}

.menu-category:hover {
  color: #50281F;
}

.menu-category:hover img {
  transform: translateY(-3px);
  filter: brightness(0) saturate(100%) invert(13%) sepia(24%) saturate(1162%) hue-rotate(334deg) brightness(93%) contrast(92%);
}

.menu-category.is-active {
  color: #EF381A;
  pointer-events: none;
}

.menu-category.is-active img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(97%) saturate(2861%) hue-rotate(352deg) brightness(101%) contrast(94%);
}

/* Container dos cards no desktop */
.menu-products {
  max-width: 1320px;      /* mais largo pra cards respirarem */
  padding-top: 20px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card {
  min-height: 420px;
  padding: 44px 36px 38px;
  background: linear-gradient(to top, #F4E3AE 0%, #F9F0D5 100%);
  display: none;
  text-align: center;
  position: relative;
  overflow: visible; /* garante que o conteúdo suba sem sumir */
  transition: box-shadow 0.35s ease, border-radius 0.35s ease;
}

.product-card .card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  height: 100%; /* preenche o card pra empurrar a CTA pro rodape */
}
/* empurra o botao SAIBA MAIS pra base do card (alinhamento uniforme) */
.product-card .card-inner > .card-more-btn {
  margin-top: auto;
}

.product-card {
  /* permite que o hot-dog "salte" pra fora do card sem ser cortado */
  overflow: visible;
  /* card NÃO muda no hover — sem border, sem shadow, sem lift */
}

/* SOMENTE o hot-dog reage ao hover do card (igual ao protótipo XD) */
.product-card img {
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center 60%;
  position: relative;
  z-index: 2;
}

.product-card:hover img {
  transform: scale(1.12) translateY(-18px) rotate(-3deg);
  filter: drop-shadow(0 22px 18px rgba(146, 64, 45, 0.42));
}

/* card inteiro clicavel — cursor pointer + SAIBA MAIS muda no hover */
.product-card { cursor: pointer; }
.product-card:hover .card-more-btn {
  background: #92402D;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(239, 56, 26, 0.55);
}

/* botão SAIBA MAIS injetado pelo JS */
.card-more-btn {
  margin-top: 24px;
  padding: 11px 32px;
  background: #EF381A;
  color: #F9F0D5;
  font-family: var(--font-primary);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s,
    box-shadow 0.35s;
}
.card-more-btn:hover {
  background: #92402D;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(239, 56, 26, 0.55);
}
.card-more-btn:active {
  transform: translateY(0);
}

/* MODAL DETALHE DO PRODUTO */
.product-modal {
  position: fixed; inset: 0;
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.product-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0s;
}
.product-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(20, 8, 6, 0.86);
}
.product-modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: hidden;
  background: linear-gradient(to top, #F4E3AE 0%, #F9F0D5 100%);
  border-radius: 24px;
  padding: 56px 36px 0;
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(40, 16, 12, 0.6);
  transform: scale(0.94) translateY(20px);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-modal-strip {
  margin: 32px -36px 0;
  width: calc(100% + 72px);
  height: 38px;
  background-image: url('../img/elements/faixa.png');
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 center;
  animation: stripLoop 18s linear infinite;
}
@media (max-width: 768px) {
  .product-modal-strip { margin: 24px -24px 0; width: calc(100% + 48px); height: 30px; }
}
.product-modal.is-open .product-modal-card {
  transform: scale(1) translateY(0);
}
.product-modal-close {
  position: absolute; top: 14px; right: 18px;
  width: 40px; height: 40px;
  border: 0;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  color: #EF381A;
  cursor: pointer;
  transition: transform 0.25s, color 0.25s;
}
.product-modal-close:hover {
  transform: rotate(90deg) scale(1.05);
  color: #92402D;
}
.product-modal-image {
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 18px;
  display: block;
}
.product-modal-title {
  font-family: 'Yeah', sans-serif;
  font-size: 32px;
  line-height: 1.05;
  color: #92402D;
  text-transform: uppercase;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.product-modal-description {
  font-family: 'Yeah', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: #50281F;
  margin-bottom: 28px;
}
.product-modal-cta {
  display: inline-block;
  padding: 14px 38px;
  background: #EF381A;
  color: #F9F0D5;
  font-family: 'Yeah', sans-serif;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.35s, background-color 0.35s, box-shadow 0.35s;
}
.product-modal-cta:hover {
  background: #92402D;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px rgba(239, 56, 26, 0.6);
}

body.modal-open {
  overflow: hidden;
}
/* esconde o botão flutuante "Peça agora" quando o modal está aberto
   pra não cobrir o CTA "Peça o seu agora!" dentro do popup */
body.modal-open .floating-menu-container {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

@media (max-width: 768px) {
  .product-modal { padding: 16px; }
  .product-modal-card { padding: 52px 24px 0; border-radius: 20px; }
  .product-modal-title { font-size: 26px; }
  .product-modal-description { font-size: 14.5px; }
  .product-modal-cta { font-size: 18px; padding: 12px 28px; }
}


.product-card.is-visible {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-card h3 {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 15px;
  color: #92402D;
  text-align: left;
  margin-bottom: 28px;
  font-family: unset !important;
}

.product-card h3 .card-number {
  font-family: 'Cnossus' !important;
  font-size: 45px;
  line-height: 1;
  color: #92402D;
}

.product-card h3 .card-title {
  font-family: 'Yeah', sans-serif !important;
  font-size: 30px;
  line-height: 1;
  color: #92402D;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 0;
}

.product-card img {
  width: auto;
  height: 140px;      /* controla o tamanho visual */
  max-width: 100%;      /* controla o tamanho visual */
  object-fit: contain;
  display: block;
  margin: 0 auto 24px;
}

.order-button {
  width: fit-content;
  margin: 70px auto 0;
  padding: 18px 46px;
  background-color: #EF381A;
  color: #F9F0D5;
  font-family: var(--font-primary);
  font-size: 38px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  border-radius: 999px;
  transition: transform 0.35s ease, background-color 0.35s ease;
}

.order-button:hover {
  transform: translateY(-3px);
  background-color: #92402D;
}

/* MOBILE */
@media (max-width: 768px) {
  .menu-section {
    padding: 0px 16px;
    overflow-x: hidden;
  }

  .menu-categories {
    justify-content: center;
    align-items: center;
    overflow: visible;
    flex-wrap: wrap;
    gap: 28px;
    padding: 10px 0 20px;
  }

  .menu-category {
    overflow: visible;
  }

  .menu-category img {
    width: 28px;
    height: 28px;
  }

  .menu-category span {
    font-size: 16px;
  }

  .menu-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .product-card {
    min-height: 200px;
    padding: 22px 14px 24px;
    position: relative;
    overflow: visible;       /* permite hot-dog "saltar" no hover */
    transition: box-shadow 0.35s ease, border-radius 0.35s ease;
    min-width: 0; /* permite encolher abaixo do conteudo intrinseco */
  }

  .product-card .card-inner {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    min-width: 0;
  }

  .product-card h3 {
    font-size: 22px;
    word-wrap: break-word;
  }

  .card-more-btn {
    padding: 9px 18px;
    font-size: 13px;
    margin-top: 16px;
  }

  .product-card img {
    width: auto;               /* largura automática */
    max-width: 100%;           /* não ultrapassa o card */
    height: 60px;             /* altura fixa */
    object-fit: contain;       /* mantém proporção, não corta */
    display: block;
    margin: 0 auto 24px;       /* centraliza e espaça do resto do conteúdo */
    transition: transform 0.35s ease; /* caso queira hover na imagem depois */
  }

  .product-card p {
    font-size: 14px;
  }

  .order-button {
    margin-top: 52px;
    font-size: 34px;
  }
}

/* CONTAINER FIXO */
.floating-menu-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
}

/* BOTÃO PEÇA AGORA */
.floating-menu-button {
  background-color: #EF381A;
  color: #F9F0D5;
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  font-size: 20px;
  font-family: var(--font-primary);
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.floating-menu-button:hover {
  transform: scale(1.1);
}

/* BARRA RETA EXPANDÍVEL */
.floating-menu-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background-color: #EF381A;
  transition: height 0.4s ease;
  z-index: 998;
}

/* MENU INTERNO - agora centralizado com largura mínima */
.floating-menu-inner {
  display: flex;
  justify-content: center; /* centraliza os itens */
  align-items: center;
  gap: 32px;               /* distância fixa entre os ícones */
  height: 100%;
  max-width: 480px;        /* largura máxima do grupo de ícones */
  margin: 0 auto;
  padding: 0 20px;
}

/* ITENS */
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #F4E3AE;           /* cor inicial */
  font-family: var(--font-primary);
  text-decoration: none;
  font-size: 14px;
  transition: transform 0.3s ease, color 0.3s ease; /* animação suave */
}

.menu-item img {
fill: #F4E3AE;                 /* muda a cor do texto */
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* HOVER nos itens */
.menu-item:hover {
  color: #92402D;                  /* muda a cor do texto */
  transform: translateY(-4px) scale(1.05); /* sobe e aumenta levemente */
}

.menu-item:hover img {
  fill: #92402D                /* muda a cor do texto */
  transform: translateY(-4px) scale(1.05); /* aplica também na imagem */
}

/* BOTÃO X - maior e na mesma posição do botão */
.floating-menu-close {
  position: absolute;
  top: -12px;   /* ajusta para ficar centralizado sobre a barra expandida */
  right: 0;     /* mesma posição horizontal do botão PEÇA AGORA */
  width: 80px;
  height: 80px;
  background-color: #EF381A;
  border: none;
  border-radius: 50%;
  font-size: 36px;
  color: #F9F0D5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* CLASSE ATIVA - barra abre */
.floating-menu-container.active .floating-menu-bar {
  height: 120px; /* maior para cobrir o botão */
}

/* MOBILE — close button sem fundo (pra não cobrir o icone "Retirada")
   + bar com padding lateral pros 4 ícones respirarem */
@media (max-width: 768px) {
  .floating-menu-close {
    top: 4px;
    right: 4px;
    width: 48px;
    height: 48px;
    background-color: transparent;
    box-shadow: none;
    font-size: 32px;
    z-index: 2;
  }
  .floating-menu-inner {
    gap: 16px;
    padding: 0 56px 0 12px; /* deixa espaço pro X à direita */
  }
  .floating-menu-container.active .floating-menu-bar {
    height: 108px;
  }
  .menu-item { font-size: 12px; }
  .menu-item img { width: 28px; height: 28px; }
}

/* Animação de pulsar */
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(1.05);
  }
}

/* Aplica ao botão PEÇA AGORA */
.floating-menu-button {
  animation: heartbeat 1.2s infinite ease-in-out;
  transform-origin: center;
}

/* Esconde botão PEÇA AGORA quando o menu superior abre */
.menu-open .floating-menu-button {
  display: none;
}

/* cursor padrão */
body {
  cursor: url('../img/cursor/cursor_point.png'), auto;
}

/* cursor para todos elementos clicáveis */
a,
button,
input[type="button"],
input[type="submit"],
.menu-category,
.floating-menu-button,
.floating-menu-close,
.product-card .order-button {
  cursor: url('../img/cursor/cursor_hand.png'), pointer;
}

/* opcional: força também em hover */
a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.menu-category:hover,
.floating-menu-button:hover,
.floating-menu-close:hover,
.product-card .order-button:hover {
  cursor: url('../img/cursor/cursor_hand.png'), pointer;
}

/* BANNER DE COOKIES */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(239, 56, 26, 0.9); /* fundo semi-transparente */
  color: #F9F0D5;
  font-family: var(--font-primary);
  display: flex;
  flex-direction: row;      /* default desktop */
  justify-content: center;  /* centraliza conteúdo horizontalmente */
  align-items: center;
  padding: 16px 24px;
  gap: 24px;                /* espaço entre texto e botão */
  z-index: 9999;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

/* Texto do banner */
.cookie-banner p {
  margin: 0;
  text-align: center;
  line-height: 1.4;
  max-width: 600px; /* evita que o texto fique muito largo */
}

/* Banner visível */
.cookie-banner.show {
  transform: translateY(0);
}

.cookie-banner button:hover {
  background-color: #e6d9b0;
}

/* Botão Aceitar cookies */
.cookie-banner button#accept-cookies {
  background-color: #F9F0D5;
  color: #EF381A;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-primary);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cookie-banner button#accept-cookies:hover {
  background-color: #e6d9b0; /* cor ao passar o mouse */
  transform: scale(1.05);    /* leve aumento ao hover */
}

/* MOBILE */
@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;   /* texto acima do botão */
    gap: 12px;                /* espaço entre texto e botão */
    padding: 12px 16px;
  }

  .cookie-banner p {
    text-align: center;
    font-size: 14px;
  }

  /* Botão menor e centralizado */
  .cookie-banner button#accept-cookies {
    width: auto;              /* largura automática */
    min-width: 120px;         /* largura mínima confortável */
    padding: 8px 20px;        /* mantém bom padding interno */
    text-align: center;
    margin: 0 auto;           /* centraliza horizontalmente */
    display: block;
  }
}

/* Container dos botões */
.cookie-buttons {
  display: flex;
  gap: 12px; /* espaço entre os botões */
  flex-wrap: wrap; /* garante que no mobile fiquem empilhados se necessário */
  justify-content: center;
}

/* Botão Aceitar */
.cookie-banner button#accept-cookies {
  background-color: #F9F0D5;
  color: #EF381A;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-primary);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.cookie-banner button#accept-cookies:hover {
  background-color: #e6d9b0;
  transform: scale(1.05);
}

/* Botão Recusar */
.cookie-banner button#decline-cookies {
  background-color: transparent;
  color: #F9F0D5;
  border: 2px solid #F9F0D5;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-primary);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.cookie-banner button#decline-cookies:hover {
  background-color: #F9F0D5;
  color: #EF381A;
  transform: scale(1.05);
}

/* MOBILE - botões lado a lado */
@media (max-width: 768px) {
  .cookie-buttons {
    flex-direction: row; /* mantém os botões na horizontal */
    gap: 12px;           /* espaço entre eles */
    justify-content: center; /* centraliza na tela */
  }

  .cookie-banner button#accept-cookies,
  .cookie-banner button#decline-cookies {
    width: auto;         /* largura automática */
    min-width: 100px;    /* largura mínima confortável */
    margin: 0;           /* sem margem extra */
  }
}


/* CONTATO */
.contact-section {
  position: relative;
  background-color: #E89E29; /* fundo principal amarelo */
  padding: 60px 47px 50px;
  overflow: hidden;
}

.contact-waves {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 0;
}
/* swap das SVGs (especificidade maior pra nao ser sobrescrita) */
.contact-waves.contact-waves--desktop { display: block; }
.contact-waves.contact-waves--mobile  { display: none; }

@media (max-width: 768px) {
  .contact-waves.contact-waves--desktop { display: none; }
  .contact-waves.contact-waves--mobile  { display: block; }
  .contact-waves {
    height: 60px; /* ondas com picos largos pra nao espremer */
  }
}

.contact-content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  color: #fff; /* títulos e subtítulo brancos */
}

.contact-content h2 {
  font-family: 'Cnossus';
  font-size: 48px;
  margin-top: 40px; /* aumenta o espaço entre a onda e o título */
  margin-bottom: 16px;
    line-height: 1.1; /* ou 1.0 se quiser mais compacto */
}

.contact-content p {
  font-family: var(--font-primary); /* Yeah */
  font-size: 20px;
  margin-bottom: 40px;
}

/* FORMULÁRIO — regras unificadas */
.form-group {
  position: relative;
  margin-bottom: 10px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 14px 46px 14px 16px;          /* espaço à direita pro ícone */
  font-family: var(--font-primary);
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  outline: none;
  background-color: #FFFFFF;
  color: #50281F;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
  padding-right: 46px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #92402D;
  box-shadow: 0 0 0 3px rgba(146, 64, 45, 0.15);
}

.form-group input.valid,
.form-group select.valid,
.form-group textarea.valid {
  border-color: #33BEAD;
}

.form-group input.invalid,
.form-group select.invalid,
.form-group textarea.invalid {
  border-color: #EF381A;
}

/* ÍCONES DE FEEDBACK (correct.png / incorrect.png) */
.feedback-icon {
  position: absolute;
  top: 16px;             /* alinha com o padding-top do input (14 + ~2 px) */
  right: 14px;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* mostra ícone quando o campo tem .valid ou .invalid */
.form-group input.valid ~ .feedback-icon,
.form-group select.valid ~ .feedback-icon,
.form-group textarea.valid ~ .feedback-icon {
  background-image: url('../img/icons/correct.png');
  opacity: 1;
  transform: scale(1);
}
.form-group input.invalid ~ .feedback-icon,
.form-group select.invalid ~ .feedback-icon,
.form-group textarea.invalid ~ .feedback-icon {
  background-image: url('../img/icons/incorrect.png');
  opacity: 1;
  transform: scale(1);
}

/* posição diferente quando o campo é textarea (top fica colado com a linha 1) */
.form-group textarea ~ .feedback-icon {
  top: 16px;
}

/* TOAST popup centralizado no topo da tela (form submit) */
.form-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 9999;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: 'Yeah', sans-serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  box-shadow: 0 14px 28px -10px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.5s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: 90vw;
  text-align: center;
}
.form-toast.is-error    { background: #EF381A; }
.form-toast.is-success  { background: #33BEAD; }
.form-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Mensagens de erro — agora INLINE dentro do campo, à esquerda do icone */
.form-group .error-message {
  display: none;
  position: absolute;
  right: 50px;                  /* deixa ~34px pro feedback-icon à direita */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  color: #FFFFFF;
  background: #EF381A;
  font-size: 11.5px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 3px;
  text-align: right;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  max-width: calc(100% - 80px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-group input.invalid ~ .error-message,
.form-group select.invalid ~ .error-message {
  display: block;
}
/* textarea: erro continua aparecendo embaixo (input tem multiplas linhas) */
.form-group textarea ~ .error-message {
  position: static;
  transform: none;
  display: none;
  margin-top: 6px;
  max-width: none;
  white-space: normal;
  text-align: left;
}
.form-group textarea.invalid ~ .error-message {
  display: inline-block;
}

/* select com seta custom (cobrindo o nativo na direita) */
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2392402D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 50px center;   /* à esquerda do ícone de feedback */
  background-size: 12px;
}

/* Check Contato */

.checkbox-group {
  display: flex;
  flex-direction: column; /* empilha os labels verticalmente */
  gap: 12px; /* espaço entre cada checkbox */
  font-family: var(--font-primary); /* Yeah */
}

.checkbox-group label {
  display: flex;       /* coloca checkbox e texto na mesma linha */
  align-items: center; /* alinha verticalmente o checkbox com o texto */
  gap: 8px;            /* espaço entre checkbox e texto */
}

.checkbox-group label a {
  color: #FFFFFF;        /* cor branca */
  text-decoration: underline; /* opcional: mantém o underline */
}

.checkbox-group label a:hover {
  color: #F9F0D5;        /* pode colocar um hover sutil, opcional */
}

@media (max-width: 768px) {
  .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
  }

  .checkbox-group label {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
  }

  .checkbox-group label input {
    flex: 0 0 auto;
    margin-top: 3px;
  }

  .checkbox-group label span {
    flex: 1;
    display: block;
    text-align: left;
    line-height: 1.35;
  }
}

/* Botão Form */
.submit-btn {
  background-color: #EF381A;  /* fundo igual ao botão "Peça agora" */
  color: #F9F0D5;             /* texto claro */
  border: none;
  border-radius: 6px;
  padding: 14px 36px;         /* aumenta a largura visual do botão */
  font-family: var(--font-primary); /* Yeah */
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;  /* deixa o texto em caixa alta */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #92402D;  /* hover igual ao botão "Peça agora" */
}

@media (max-width: 768px) {
  .submit-btn {
    margin-top: 24px; /* ajuste fino aqui */
  }
}

/* RODApÉ */
.site-footer {
  background-color: #92402D;
  color: #F9F0D5;
  padding: 70px 47px 32px;
}

.footer-container {
  max-width: 1260px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
}

.footer-logo {
  width: 150px;
  margin-bottom: 24px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-column h3 {
  font-family: var(--font-primary);
  font-size: 28px;
  margin-bottom: 18px;
  color: #F4E3AE;
  text-transform: uppercase;
}

.footer-column p,
.footer-column a {
  font-family: var(--font-primary);
  font-size: 20px;
  line-height: 1.3;
  color: #FFF;
  text-decoration: none;
}

.footer-column a {
  margin-bottom: 10px;
  transition: color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  position: relative;
}

.footer-column a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: rgba(249, 240, 213, 0.4);
  transition: background-color 0.3s ease;
}

.footer-column a:hover::after {
  background-color: #F4E3AE;
  color: #F4E3AE;
  transform: translateX(4px);
}

.footer-brand p {
  margin-bottom: 10px;
}
/* primeiro <p> (slogan) com bem mais respiro pra nao colar na descricao */
.footer-brand p:first-of-type {
  margin-bottom: 40px;
  font-style: italic;
  letter-spacing: 0.03em;
}

.footer-bottom {
  margin-top: 64px;
  text-align: center;
}

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin-bottom: 22px;
}

.footer-social img {
  width: 34px;
  height: 34px;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-social a:hover img {
  transform: translateY(-4px) scale(1.06);
  opacity: 0.75;
}

.footer-bottom p {
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.3px;
}

/* MOBILE */
@media (max-width: 768px) {
  .site-footer {
    padding: 56px 47px 28px;
  }

  .footer-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .footer-column {
    align-items: flex-start;
    text-align: left;
  }

  .footer-logo {
    width: 120px;
  }

  .footer-column h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .footer-column p,
  .footer-column a {
    font-size: 15px;
  }

  .footer-bottom {
    margin-top: 48px;
  }

  .footer-social img {
    width: 42px;
    height: 42px;
  }

  .footer-bottom p {
    font-size: 10px;
  }
}

/* FAIXA ANIMADA FOOTER
 */
 .footer-marquee {
   width: 100%;
   height: 60px;
   background-image: url("../img/elements/faixa.png");
   background-repeat: repeat-x;
   background-size: auto 60px;
   background-position: 0 0;
   animation: footerMarqueeLoop 8s linear infinite;
 }

 @keyframes footerMarqueeLoop {
   from {
     background-position-x: 0;
   }

   to {
     background-position-x: -500px;
   }
 }

 @media (max-width: 768px) {
   .footer-marquee {
     height: 45px;
     background-size: auto 45px;
   }
 }

/* PIN LOCALIAÇÃO */
.footer-location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  text-decoration: none;
}

.footer-location span {
  color: #FFFFFF;
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.3;
}

.location-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* hover elegante */
.footer-location:hover .location-icon {
  transform: translateY(-2px);
}

.footer-location:hover span {
  color: #F4E3AE;
}