/* tokens.css */
/* =========================================================
   Tokens — extraídos do site em produção (Framer), @1440 e @390.
   Fonte única de verdade: nenhum valor de cor ou tipografia
   deve ser escrito à mão fora deste arquivo.
   ========================================================= */

:root {
  /* --- Cores (medidas no CSS publicado) --- */
  --hg-vermelho:    #DE2222;  /* marca, títulos, botão primário */
  --hg-creme:       #FFF4E0;  /* fundo padrão do site */
  --hg-creme-2:     #F8F0E2;  /* fundo alternativo de seção */
  --hg-marrom:      #5F2C1C;  /* texto corrido e botão secundário */
  --hg-preto:       #000000;
  --hg-branco:      #FFFFFF;

  /* --- Tipografia --- */
  --hg-display: "Ayr Blufy", Impact, sans-serif;      /* títulos e botões */
  --hg-texto:   "Omnes SemiCond", "Arial Narrow", sans-serif;

  /* Escala fluida: os extremos são os valores reais medidos
     no site (390px → 1440px). */
  --hg-fs-h1:      clamp(2.813rem, 1.44rem + 5.62vw, 5rem);    /* 45 → 80 */
  --hg-fs-h2:      clamp(1.875rem, 0.31rem + 6.41vw, 4.375rem);/* 30 → 70 */
  --hg-fs-h2-alt:  clamp(1.875rem, 1.09rem + 3.21vw, 3.125rem);/* 30 → 50 */
  --hg-fs-corpo:   clamp(0.75rem, 0.32rem + 1.73vw, 1.125rem); /* 12 → 18 */
  --hg-fs-botao:   1.125rem;   /* 18px no desktop e no celular (original @375 também) */

  --hg-lh-display: 1.1;   /* 80/80 no h1, 77/70 nos h2 */
  --hg-lh-corpo:   1.35;  /* 24.3/18 */
  --hg-lh-botao:   1.2;   /* 21.6/18 */

  /* --- Layout --- */
  --hg-container:  1167px;   /* largura dominante medida no site */
  --hg-gutter:     clamp(1rem, 0.5rem + 2vw, 2rem);
  --hg-radius:     8px;
  --hg-radius-lg:  24px;

  /* --- Ritmo vertical --- */
  --hg-secao-y:    clamp(3rem, 1.5rem + 6vw, 7.5rem);
  --hg-gap:        clamp(1rem, 0.6rem + 1.6vw, 2rem);

  /* --- Movimento --- */
  --hg-ease:       cubic-bezier(0.44, 0, 0.56, 1);
  --hg-dur:        0.5s;
}

/* --- Fontes self-hosted (licença Omnes adquirida) --- */
@font-face {
  font-family: "Ayr Blufy";
  src: url("https://hungaralanches.com.br/wp-content/themes/hungara/assets/fonts/ayr-blufy-black.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Omnes SemiCond";
  src: url("https://hungaralanches.com.br/wp-content/themes/hungara/assets/fonts/omnes-semicond-semibold.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@media (prefers-reduced-motion: reduce) {
  :root { --hg-dur: 0.01ms; }
}

/* base.css */
/* =========================================================
   Base — reset enxuto e elementos globais.
   Todo valor vem de tokens.css.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Os elementos com appear entram deslocados 150px; sem isto eles criam
     rolagem horizontal no celular até a animação disparar. */
  overflow-x: clip;
  background: var(--hg-creme);
  color: var(--hg-marrom);
  font-family: var(--hg-texto);
  font-size: var(--hg-fs-corpo);
  line-height: var(--hg-lh-corpo);
  -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

/* O recorte precisa estar num ancestral abaixo do body: só assim o
   deslocamento inicial dos appears (150px) deixa de alargar a viewport
   no celular. */
#conteudo, .hg-rodape { overflow-x: clip; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--hg-display);
  font-weight: 400;
  line-height: var(--hg-lh-display);
  text-transform: uppercase;
}

h1 { font-size: var(--hg-fs-h1); color: var(--hg-vermelho); }
h2 { font-size: var(--hg-fs-h2); color: var(--hg-vermelho); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* --- Layout --- */
.hg-container {
  width: min(100% - (var(--hg-gutter) * 2), var(--hg-container));
  margin-inline: auto;
}

.hg-secao { padding-block: var(--hg-secao-y); }
.hg-secao--vermelha { background: var(--hg-vermelho); color: var(--hg-creme); }
.hg-secao--vermelha h2 { color: var(--hg-creme); }
.hg-secao--creme-2 { background: var(--hg-creme-2); }

/* --- Botões --- */
.hg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* O gap separa ícone e rótulo. O rótulo vai sempre num <span> único:
     solto, cada trecho de texto vira um flex item e o gap abre buracos
     no meio da palavra (ex.: "i FOOD"). */
  gap: 0.5em;
  /* Medido no original: caixa de 48px, padding lateral de 21px.
     Os 8px acima compensam o descendente alto da Ayr Blufy: sem eles o
     line box centraliza, mas as maiúsculas sobem ~3px. Aferido por pixel
     contra o original (15px acima / 14px abaixo dos glifos). */
  min-height: 48px;
  padding: 8px 21px 0;
  border: 0;
  border-radius: var(--hg-radius);
  font-family: var(--hg-display);
  font-size: var(--hg-fs-botao);
  line-height: var(--hg-lh-botao);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--hg-dur) var(--hg-ease), filter var(--hg-dur) var(--hg-ease);
}
.hg-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.hg-btn:focus-visible { outline: 3px solid var(--hg-marrom); outline-offset: 3px; }

/* Nomes de marca não entram na caixa alta do botão (iFood, 99Food). */
.hg-marca { text-transform: none; }

.hg-btn--primario  { background: var(--hg-vermelho); color: var(--hg-creme); }
.hg-btn--secundario{ background: var(--hg-marrom);   color: var(--hg-creme); }
.hg-btn--claro     { background: var(--hg-creme);    color: var(--hg-vermelho); }

/* --- Acessibilidade --- */
.hg-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hg-pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 0.75em 1em; background: var(--hg-vermelho); color: var(--hg-creme);
}
.hg-pular-para-conteudo:focus { left: 0; }


@media (prefers-reduced-motion: reduce) {
  .hg-btn:hover { transform: none; }
}

/* revelar.css */
/* =========================================================
   Appear (revelação ao entrar na viewport), copiado do Framer.
   Todos entram de opacidade 0 e 150px de deslocamento, disparam com
   50% do elemento visível e usam molas (spring), não ease. As curvas
   abaixo são as três molas do site amostradas em 40 pontos, no mesmo
   modelo (razão de amortecimento = 1 - bounce, frequência resolvida
   para assentar na duração):
     a) 0,4s bounce 0,2  — padrão
     b) 0,6s bounce 0,1  — foto da história
     c) 0,5s bounce 0    — botão do delivery, com 0,3s de atraso
   ========================================================= */
:root {
  --hg-mola-a: linear(0.0000, 0.0235, 0.0830, 0.1647, 0.2582, 0.3557, 0.4517, 0.5423, 0.6252, 0.6991, 0.7636, 0.8186, 0.8647, 0.9025, 0.9330, 0.9571, 0.9756, 0.9895, 0.9996, 1.0065, 1.0111, 1.0137, 1.0149, 1.0151, 1.0146, 1.0136, 1.0123, 1.0108, 1.0093, 1.0079, 1.0066, 1.0053, 1.0043, 1.0033, 1.0025, 1.0019, 1.0013, 1.0009, 1.0006, 1.0000);
  --hg-mola-b: linear(0.0000, 0.0208, 0.0730, 0.1444, 0.2260, 0.3114, 0.3960, 0.4767, 0.5516, 0.6198, 0.6807, 0.7343, 0.7809, 0.8210, 0.8550, 0.8837, 0.9076, 0.9274, 0.9436, 0.9567, 0.9673, 0.9757, 0.9824, 0.9876, 0.9915, 0.9946, 0.9968, 0.9985, 0.9997, 1.0005, 1.0010, 1.0013, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0012, 1.0011, 1.0000);
  --hg-mola-c: linear(0.0000, 0.0272, 0.0924, 0.1773, 0.2696, 0.3619, 0.4495, 0.5299, 0.6019, 0.6652, 0.7201, 0.7673, 0.8073, 0.8411, 0.8694, 0.8930, 0.9126, 0.9288, 0.9421, 0.9530, 0.9620, 0.9693, 0.9752, 0.9800, 0.9839, 0.9871, 0.9896, 0.9917, 0.9933, 0.9947, 0.9957, 0.9966, 0.9973, 0.9978, 0.9983, 0.9986, 0.9989, 0.9991, 0.9993, 1.0000);
}

.hg-revelar {
  opacity: 0;
  transform: translateY(150px);
  transition: opacity 0.4s var(--hg-mola-a), transform 0.4s var(--hg-mola-a);
  will-change: opacity, transform;
}
.hg-revelar--direita  { transform: translateX(150px); }
.hg-revelar--esquerda { transform: translateX(-150px); }
.hg-revelar--baixo    { transform: translateY(150px); }
.hg-revelar--fade     { transform: none; }

.hg-revelar--mola-b { transition-duration: 0.6s; transition-timing-function: var(--hg-mola-b); }
.hg-revelar--mola-c { transition-duration: 0.5s; transition-timing-function: var(--hg-mola-c); transition-delay: 0.3s; }

.hg-revelar.is-visivel { opacity: 1; transform: none; }

/* Navegadores sem linear(): a mola vira uma saída suave. */
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --hg-mola-a: cubic-bezier(0.22, 1, 0.36, 1); --hg-mola-b: cubic-bezier(0.22, 1, 0.36, 1); --hg-mola-c: cubic-bezier(0.22, 1, 0.36, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .hg-revelar,
  .hg-revelar.is-visivel { opacity: 1; transform: none; transition: none; }
}

/* cabecalho.css */
/* =========================================================
   Cabeçalho e menu — medidas do original @1440.
   ========================================================= */

.hg-cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hg-creme);
}

.hg-cabecalho__interno {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vw, 35px);              /* nav começa em x=249 */
  min-height: 130px;
  padding-top: clamp(1rem, 3.4vw, 49px);      /* logo em y=49 no original */
  padding-inline: clamp(1rem, 3.5vw, 50px);   /* logo em x=50 */
}

.hg-cabecalho__logo img { width: clamp(120px, 11.4vw, 164px); height: auto; }

/* Grade 2x2, como no original: duas colunas, duas linhas. */
.hg-cabecalho__nav .hg-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  /* Colunas em x=249 e x=446; linhas em y=67 e y=122. */
  column-gap: clamp(1rem, 3.1vw, 45px);
  row-gap: 1.9rem;
  margin: 18px 0 0;         /* o `margin: 0` anterior zerava o deslocamento */
  padding: 0;
  list-style: none;
}

.hg-cabecalho__nav a {
  font-family: var(--hg-texto);
  font-size: 1.125rem;         /* 18px, como no site */
  line-height: 1.2;
  color: var(--hg-vermelho);
  transition: opacity var(--hg-dur) var(--hg-ease);
}
.hg-cabecalho__nav a:hover { opacity: 0.7; }
.hg-cabecalho__nav a:focus-visible { outline: 2px solid var(--hg-marrom); outline-offset: 4px; }

/* Botão de menu: 54x47, marrom, radius 10 */
.hg-cabecalho__toggle {
  margin-left: auto;
  margin-top: 6px;          /* y=55 no original */
  width: 54px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--hg-marrom);
  cursor: pointer;
}
.hg-cabecalho__barras,
.hg-cabecalho__barras::before,
.hg-cabecalho__barras::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--hg-creme);
  transition: transform var(--hg-dur) var(--hg-ease), opacity var(--hg-dur) var(--hg-ease);
}
.hg-cabecalho__barras { position: relative; }
.hg-cabecalho__barras::before,
.hg-cabecalho__barras::after { content: ""; position: absolute; left: 0; }
.hg-cabecalho__barras::before { top: -7px; }
.hg-cabecalho__barras::after  { top: 7px; }

[aria-expanded="true"] .hg-cabecalho__barras { background: transparent; }
[aria-expanded="true"] .hg-cabecalho__barras::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .hg-cabecalho__barras::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Menu mobile --- */
.hg-menu-mobile {
  position: fixed;
  inset: 130px 0 0;
  z-index: 49;
  padding: var(--hg-gutter);
  background: var(--hg-creme);
  overflow-y: auto;
}
.hg-menu-mobile__lista {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 1.25rem;
}
.hg-menu-mobile__lista a {
  font-family: var(--hg-display);
  font-size: clamp(1.75rem, 1rem + 3vw, 2.5rem);
  text-transform: uppercase;
  color: var(--hg-vermelho);
}

/* Abaixo de 900px o nav horizontal sai e fica só o botão.
   Original @375: logo horizontal 189x37 centralizado em y=21; o botão
   são duas linhas vermelhas de 30x3 (y=34,5 e 42,5) encostadas a 24px
   da direita, sem caixa; e o cabeçalho rola junto com a página. */
@media (max-width: 899px) {
  .hg-cabecalho { position: static; }
  .hg-cabecalho__interno {
    position: relative;
    min-height: 79px;
    align-items: flex-start;
    padding: 21px 24px 0;
  }
  .hg-cabecalho__nav { display: none; }

  .hg-cabecalho__logo {
    position: absolute;
    top: 21px;
    left: 50%;
    transform: translateX(-50%);
  }
  .hg-cabecalho__logo img { width: 189px; }

  .hg-cabecalho__toggle {
    width: 54px;
    height: 45px;
    margin: -3px -12px 0 auto;
    background: none;
  }
  .hg-cabecalho__barras { width: 30px; height: 3px; background: transparent; }
  .hg-cabecalho__barras::before,
  .hg-cabecalho__barras::after { width: 30px; height: 3px; background: var(--hg-vermelho); }
  .hg-cabecalho__barras::before { top: -4px; }
  .hg-cabecalho__barras::after  { top: 4px; }
  [aria-expanded="true"] .hg-cabecalho__barras::before { transform: translateY(4px) rotate(45deg); }
  [aria-expanded="true"] .hg-cabecalho__barras::after  { transform: translateY(-4px) rotate(-45deg); }

  .hg-menu-mobile { position: absolute; top: 79px; bottom: auto; min-height: calc(100vh - 79px); }
}

/* Acima disso, o botão continua existindo (é assim no original),
   mas o menu completo já está visível. */
@media (min-width: 900px) {
  .hg-menu-mobile { inset: 130px 0 0; }
}

/* --- Cardápio: só o logo, 372x136 centralizado em y=93; no celular,
   o logo horizontal de 253x50 em y=72. --- */
.hg-cabecalho--compacto {
  position: static;
  display: grid;
  place-items: center;
  padding-top: clamp(2.5rem, 6.45vw, 93px);
  background: var(--hg-creme);
}
.hg-cabecalho--compacto .hg-cabecalho__logo img { width: clamp(220px, 25.8vw, 372px); height: auto; }

/* --- Landings: no desktop só o logo (208px em y=111), sem menu; no
   celular o cabeçalho normal, mas sem grudar no topo. --- */
.hg-cabecalho--lp { position: static; }
@media (min-width: 900px) {
  .hg-cabecalho--lp .hg-cabecalho__interno { justify-content: center; min-height: 0; padding: clamp(2.5rem, 7.7vw, 111px) 0 0; }
  .hg-cabecalho--lp .hg-cabecalho__nav,
  .hg-cabecalho--lp .hg-cabecalho__toggle { display: none; }
  .hg-cabecalho--lp .hg-cabecalho__logo img { width: clamp(150px, 14.4vw, 208px); }
}
@media (max-width: 899px) {
  /* Landings @375: logo vertical 130x48 em y=40; linhas do menu em y=48 e 56. */
  .hg-cabecalho--lp .hg-cabecalho__interno { min-height: 88px; }
  .hg-cabecalho--lp .hg-cabecalho__logo { top: 40px; }
  .hg-cabecalho--lp .hg-cabecalho__logo img { width: 130px; }
  .hg-cabecalho--lp .hg-cabecalho__toggle { margin-top: 10px; }
  .hg-cabecalho--lp + .hg-menu-mobile, .hg-cabecalho--lp .hg-menu-mobile { top: 88px; }
  /* Trabalhe conosco: o menu fica no alto (y=27) e o logo desce para y=69. */
  .hg-lp-trabalhe-conosco .hg-cabecalho--lp .hg-cabecalho__interno { min-height: 117px; }
  .hg-lp-trabalhe-conosco .hg-cabecalho--lp .hg-cabecalho__logo { top: 69px; }
  .hg-lp-trabalhe-conosco .hg-cabecalho--lp .hg-cabecalho__toggle { margin-top: -11px; }
  .hg-lp-trabalhe-conosco .hg-cabecalho__barras::before,
  .hg-lp-trabalhe-conosco .hg-cabecalho__barras::after { background: var(--hg-marrom); }

  .hg-cabecalho--compacto { padding-top: 72px; }
  .hg-cabecalho--compacto .hg-cabecalho__logo { position: static; transform: none; }
  .hg-cabecalho--compacto .hg-cabecalho__logo img { width: 253px; }
}

/* hero.css */
/* =========================================================
   Topo da home.

   Medidas do original @1440x900:
     carrossel  x=891  y=46   584x679 (sangra à direita)
     logo       x=50   y=49   164x60
     h1         x=122  y=230  459x240
     apoio      x=121  y=485  451x49  (18/24.3 → 2 linhas)
     botões     x=121  y=562  h=48, radius 8, padding-inline 21
   Gaps verticais: h1→apoio 15px, apoio→botões 28px.

   O cabeçalho não é uma faixa na home: ele ocupa só a coluna
   esquerda, e o carrossel sobe até o topo da página ao lado dele.
   ========================================================= */

.hg-hero {
  /* Divisão do topo. O original usa 61.875% (carrossel em x=891 @1440);
     aqui o carrossel avança em direção ao centro de propósito, para dar
     mais presença à foto. Ajuste fino: estes três valores. */
  --hg-hero-coluna: 58%;
  --hg-hero-slide: 43vw;
  --hg-hero-slide-altura: 48vw;

  display: grid;
  /* O piso de 620px impede que a coluna do texto encolha a ponto de
     quebrar os dois botões em linhas separadas (acontecia em 1024). */
  grid-template-columns: minmax(min(100%, 620px), var(--hg-hero-coluna)) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.hg-hero__texto {
  align-self: start;
  padding-left: max(1rem, 8.5vw);            /* 8.5vw = 122px em 1440 */
}

.hg-hero__titulo {
  max-width: 470px;                 /* medido: o h1 ocupa 459px em 3 linhas */
  display: grid;
  gap: 0;
  line-height: 1;                   /* medido: 80px de fonte, 80px de linha */
  margin-bottom: 15px;              /* medido: 485 - 470 */
}
.hg-hero__titulo > span { display: block; }

/* O "do" é o SVG original (elipse marrom + letras), 61x62 para um H1 de 80px. */
.hg-hero__titulo .hg-hero__linha-do {
  display: flex;
  align-items: center;
  gap: 0.18em;
}
.hg-hero__titulo .hg-hero__do {
  flex: none;
  width: 0.7625em;                  /* 61/80 */
  height: auto;
  align-self: center;
  /* No original o badge acompanha a altura das maiúsculas, não o line box:
     fica 18px acima do centro num H1 de 80px. */
  position: relative;
  top: -0.225em;
}

/* A Ayr Blufy tem swashes (`swsh`): o M ganha a entrada curva e a perna
   que desce sob o U. O design aplica só nesse M — `ss01` dá a entrada
   mas não a perna, e na palavra toda decoraria todas as letras. */
.hg-swash { font-feature-settings: "swsh" 1; }

.hg-hero__apoio {
  max-width: 451px;                 /* medido: é o que dá as 2 linhas */
  margin-bottom: 28px;              /* medido: 562 - 534 */
}

.hg-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;                        /* medido: 385 - (121 + 254) */
}

/* --- Carrossel --- */
.hg-hero__carrossel {
  /* Sem teto: acima de 1440 o slide acompanha a tela, senão o carrossel
     encolhe visualmente. */
  --slide-w: max(240px, var(--hg-hero-slide));
  overflow: hidden;
  mask-image: linear-gradient(to right, #000 85%, transparent);
}

.hg-carrossel__trilho {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  animation: hg-desliza 60s linear infinite;
}
.hg-hero__carrossel:hover .hg-carrossel__trilho { animation-play-state: paused; }

.hg-carrossel__item {
  flex: 0 0 var(--slide-w);
  border-radius: var(--hg-radius-lg);
  overflow: hidden;
}
.hg-carrossel__item img {
  width: 100%;
  /* A altura é quase constante no original (679px em 1440, 703px em 1920);
     quem cresce com a tela é a largura. Com aspect-ratio fixo, alargar
     jogava a altura para 907px e o slide tomava a tela inteira. */
  height: clamp(300px, var(--hg-hero-slide-altura), 740px);
  object-fit: cover;
}

@keyframes hg-desliza {
  from { transform: translateX(0); }
  /* Metade da trilha = uma volta completa da lista original. */
  to   { transform: translateX(calc(-50% - 5px)); }
}

/* =========================================================
   Desktop: cabeçalho sobre a coluna esquerda, carrossel no topo.
   ========================================================= */
@media (min-width: 900px) {
  body.home .hg-cabecalho {
    position: absolute;
    inset: 0 0 auto 0;
    background: transparent;
    pointer-events: none;           /* o carrossel atrás continua clicável */
  }
  body.home .hg-cabecalho a,
  body.home .hg-cabecalho button { pointer-events: auto; }

  .hg-hero {
    padding-top: clamp(1.5rem, 3.2vw, 46px);        /* topo do carrossel */
    padding-bottom: clamp(2rem, 1rem + 4vw, 6rem);
  }

  /* Empurra o texto para y=230, abaixo do cabeçalho sobreposto. */
  /* 46 (padding do hero) + 184 = h1 em y=230, como no original. */
  .hg-hero__texto { padding-top: clamp(5rem, 12.8vw, 184px); }

  .hg-hero__carrossel { align-self: start; }
}

/* =========================================================
   Telas muito largas: o conjunto para de crescer e centraliza,
   como o original faz. Sem isso o hero estica indefinidamente.
   Os valores são os de 1800px congelados (as colunas já são
   proporcionais ao container, então acompanham sozinhas).
   ========================================================= */
@media (min-width: 1800px) {
  .hg-hero {
    max-width: 1800px;
    margin-inline: auto;
  }
  .hg-hero__texto { padding-left: 153px; }      /* 8.5% de 1800 */
  .hg-hero { --hg-hero-slide: 774px; }          /* 43% de 1800 */
}

/* =========================================================
   Mobile: cabeçalho volta a ser faixa e o hero empilha.
   ========================================================= */
@media (max-width: 899px) {
  /* No original o mobile inverte a ordem (carrossel antes do título),
     centraliza tudo e usa slides quase quadrados (312x299). */
  .hg-hero {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 3vw, 2.5rem);
    padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    text-align: center;
  }

  .hg-hero__carrossel {
    order: -1;                      /* vem antes do texto */
    --slide-w: min(83vw, 312px);
    width: var(--slide-w);          /* o original mostra um slide por vez */
    margin-inline: auto;
    border-radius: 24px;
    mask-image: none;
  }
  .hg-carrossel__item img { height: auto; aspect-ratio: 312 / 299; }

  .hg-hero__texto {
    padding-inline: 32px;           /* botões de 312px em tela de 375 */
  }

  .hg-hero__titulo {
    max-width: none;
    justify-items: center;
  }
  .hg-hero__titulo .hg-hero__linha-do { justify-content: center; }

  /* Original @375: carrossel 101–400, h1 em 433, apoio em 584, botões
     em 648 e 706, título da seção seguinte em 800. */
  .hg-hero { gap: 32px; padding-bottom: 22px; }
  .hg-hero__titulo { margin-bottom: 0; }
  .hg-hero__apoio { max-width: 46ch; margin: 16px auto 32px; }

  .hg-hero__acoes { flex-direction: column; }
  .hg-hero__acoes .hg-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-carrossel__trilho { animation: none; }
  .hg-hero__carrossel { overflow-x: auto; mask-image: none; }
}

/* categorias.css */
/* =========================================================
   Vitrine de categorias.
   Medidas do original @1440: card 312x327, gap 33px,
   faixa de 62px com raio inferior de 25px, rótulo 18px.
   ========================================================= */

.hg-categorias {
  background: var(--hg-creme);
  /* Original: título 60px após o fim do hero, cards 100px depois dele,
     e 89px de respiro no fim da faixa. */
  padding-block: clamp(1.5rem, 4.2vw, 60px) clamp(2rem, 6.2vw, 89px);
  overflow: hidden;
}

.hg-categorias__titulo {
  margin: 0 auto clamp(2rem, 6.9vw, 100px);   /* 100px até os cards */
  max-width: min(90%, 900px);
  font-size: var(--hg-fs-h2-alt);                    /* 50px em 1440 */
  line-height: 1;
  color: var(--hg-marrom);
  text-align: center;
}

.hg-categorias__trilho-area { overflow: hidden; }

.hg-categorias__trilho {
  display: flex;
  gap: 33px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  animation: hg-categorias-desliza 70s linear infinite;
}
.hg-categorias__trilho-area:hover .hg-categorias__trilho { animation-play-state: paused; }

@keyframes hg-categorias-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 16.5px)); }
}

.hg-categoria {
  flex: 0 0 clamp(210px, 21.7vw, 312px);
}

.hg-categoria__link {
  position: relative;
  display: block;
  height: clamp(230px, 22.7vw, 327px);
  transition: transform var(--hg-dur) var(--hg-ease);
}
.hg-categoria__link:hover { transform: translateY(-6px); }
.hg-categoria__link:focus-visible { outline: 3px solid var(--hg-vermelho); outline-offset: 4px; }

/* A foto ocupa o card inteiro, ancorada embaixo, e transborda para cima
   quando é mais alta (é o que "Italianos Junior" faz no original).
   A faixa fica NA FRENTE dela — por isso o rótulo continua legível
   mesmo com a foto cobrindo toda a altura do card. */
.hg-categoria__foto {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hg-categoria__foto img {
  width: 100%;
  height: auto;
}

.hg-categoria__rotulo {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: clamp(48px, 4.3vw, 62px);
  padding: 8px 12px 0;                 /* o 8px acima compensa a fonte */
  border-radius: 0 0 25px 25px;
  background: var(--hg-vermelho);
  color: var(--hg-creme);
  font-family: var(--hg-display);
  font-size: clamp(0.875rem, 0.6rem + 0.9vw, 1.125rem);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* Original @375: título em y=800, cards de 312x327 a partir de x=32
   (vão de 33px) começando 59px abaixo do título, faixa de 62px e fim da
   seção 27px depois. */
@media (max-width: 899px) {
  .hg-categorias { padding-bottom: 27px; }
  .hg-categorias__titulo { max-width: 330px; margin-bottom: 58px; }
  .hg-categorias__trilho-area { padding-left: 32px; }
  .hg-categoria { flex-basis: 312px; }
  .hg-categoria__link { height: 327px; }
  .hg-categoria__rotulo { min-height: 62px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-categorias__trilho { animation: none; }
  .hg-categorias__trilho-area { overflow-x: auto; }
  .hg-categoria__link:hover { transform: none; }
}

/* lojas.css */
/* =========================================================
   Nossas lojas — medidas do original @1440.
   ========================================================= */

.hg-lojas {
  background: var(--hg-creme);
  /* Original: seção em y=1437, título em 1467 (30px) e fim em 1969,
     23px depois do botão. */
  padding-block: clamp(1.25rem, 0.5rem + 1.5vw, 1.875rem) clamp(1.25rem, 0.6rem + 1vw, 1.44rem);
  text-align: center;
}

.hg-lojas__titulo {
  margin: 0 auto clamp(1.25rem, 0.5rem + 1.6vw, 2.125rem);   /* 34px até os cards */
  max-width: 960px;                                          /* força as 2 linhas do original */
  font-size: var(--hg-fs-h2);                     /* 70px em 1440 */
  line-height: 1.1;
}

.hg-lojas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  margin: 0 0 clamp(2rem, 0.6rem + 7.6vw, 10.2rem);  /* 163px até o botão */
  padding: 0;
  list-style: none;
  text-align: left;
}

.hg-loja__nome {
  margin-bottom: 0.9em;              /* 25px entre nome e endereço */
  font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);   /* 28px em 1440 */
  line-height: 1;
  color: var(--hg-marrom);
}

.hg-loja__endereco,
.hg-loja__horario {
  margin: 0 0 0.35em;
  color: var(--hg-marrom);
}

.hg-loja__endereco a { text-decoration: underline; text-underline-offset: 3px; }
.hg-loja__endereco a:hover { color: var(--hg-vermelho); }

.hg-loja__horario {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.hg-loja__relogio { flex: none; }

.hg-lojas__acao { margin: 0; }

/* --- Página com todas as lojas --- */
.hg-lojas--arquivo { text-align: left; }
.hg-lojas--arquivo .hg-lojas__titulo { text-align: center; }

.hg-lojas__cidade {
  margin-bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  font-size: var(--hg-fs-h2-alt);
  color: var(--hg-marrom);
}

.hg-lojas--arquivo .hg-lojas__lista {
  margin-bottom: clamp(2.5rem, 1rem + 4vw, 4rem);
}

.hg-loja__aviso {
  margin: 0.5em 0 0;
  font-family: var(--hg-display);
  text-transform: uppercase;
  color: var(--hg-vermelho);
}
.hg-loja__pedido { margin: 0.75em 0 0; }

/* Desktop: três colunas, como no original. */
@media (min-width: 900px) {
  .hg-lojas:not(.hg-lojas--arquivo) .hg-loja:nth-child(n+4) { display: none; }
}

/* Original @375: título 30/33 em y=57 da seção; seis lojas em duas
   colunas de 145px (x=21 e x=194), linhas a cada 203px; nome 20/20,
   endereço e horário 14/19; botão 325x48 e 32px de respiro no fim. */
@media (max-width: 899px) {
  .hg-lojas { padding-block: 57px 32px; }
  .hg-lojas__titulo { margin-bottom: 47px; font-size: 30px; }
  .hg-lojas__lista {
    grid-template-columns: repeat(2, 145px);
    grid-auto-rows: 175px;
    gap: 28px;
    justify-content: center;
    padding-right: 15px;               /* a grade do original fica 7px à esquerda */
    margin-bottom: 15px;
  }
  .hg-loja__nome { margin-bottom: 23px; font-size: 20px; }
  .hg-loja__endereco, .hg-loja__horario { margin: 0; font-size: 14px; line-height: 19px; }
  .hg-loja__horario { gap: 4px; }
  .hg-loja__relogio { width: 13px; height: 13px; }
  .hg-lojas__acao .hg-btn { width: 325px; max-width: 100%; padding-inline: 12px; white-space: nowrap; }
}

/* --- Página de uma loja (não existe no original) --- */
.hg-loja-pagina { padding-block: clamp(2.5rem, 5vw, 72px); text-align: left; }
.hg-loja-pagina .hg-lojas__titulo { text-align: center; }
.hg-loja-pagina__marca { margin: 0 0 8px; font-family: var(--hg-display); text-align: center; text-transform: uppercase; color: var(--hg-marrom); }
.hg-loja-pagina__grade { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; gap: clamp(1.5rem, 4vw, 56px); margin-top: clamp(1.5rem, 3vw, 40px); }
.hg-loja-pagina__dados .hg-loja__nome { margin: 0 0 8px; }
.hg-loja-pagina__dados .hg-loja__nome:not(:first-child) { margin-top: 28px; }
.hg-loja-pagina__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.hg-loja-pagina__zap { box-shadow: inset 0 0 0 2px var(--hg-vermelho); }
.hg-loja-pagina__mapa iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--hg-radius-lg); background: var(--hg-creme-2); }
.hg-loja-pagina__outras { margin-top: clamp(3rem, 6vw, 80px); text-align: center; }
.hg-loja-pagina__lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.hg-loja-pagina__lista a { font-family: var(--hg-display); text-transform: uppercase; color: var(--hg-marrom); }
.hg-loja-pagina__lista a:hover { color: var(--hg-vermelho); }
.hg-loja__nome a:hover { color: var(--hg-vermelho); }

@media (max-width: 899px) {
  .hg-loja-pagina__grade { grid-template-columns: 1fr; }
  .hg-loja-pagina__acoes .hg-btn { flex: 1 1 100%; }
}

/* delivery.css */
/* =========================================================
   Delivery — faixa vermelha com a foto sangrando à esquerda.
   ========================================================= */

.hg-delivery {
  position: relative;
  background: var(--hg-vermelho);
  color: var(--hg-creme);
  overflow: hidden;
}

.hg-delivery__interno {
  display: grid;
  /* Original: foto de 949px (66% da tela) começando em x=75, texto a
     partir de x=977 — as duas se sobrepõem um pouco. */
  /* A coluna da esquerda é só reserva de espaço: a foto é posicionada
     de forma absoluta para poder sangrar. Medido por pixel: o texto
     começa em x=828 e o título ("QUE TAL HUNGARA") mede 496px. */
  grid-template-columns: minmax(0, 57.5%) minmax(0, 42.5%);
  align-items: center;
  gap: 0;
  /* Altura travada: no original a foto é cortada pela borda de baixo. */
  height: clamp(360px, 40.2vw, 579px);
  padding-right: 0;
}

/* A foto transborda a faixa e sangra à esquerda, como no original. */
.hg-delivery__foto {
  /* Original @1440: elemento de 949x569 em x=75, y=73, cortado 63px pela
     borda de baixo. O PNG tem 118px (de 2048) de vermelho embutido à
     esquerda, por isso o papel aparece a partir de x≈130. */
  position: absolute;
  left: 5.2vw;
  top: 0.6vw;                        /* o PNG tem ~65px de vermelho acima do papel */
  width: 65.9vw;
  pointer-events: none;
}
.hg-delivery__foto img {
  width: 100%;
  height: auto;
}

.hg-delivery__texto {
  /* A foto é absoluta e não ocupa célula: sem isto o texto cai na coluna 1.
     O PNG do saco tem fundo vermelho opaco até x≈1194, então o texto
     precisa ficar acima dele na pilha. */
  grid-column: 2;
  position: relative;
  z-index: 1;
  max-width: 510px;                  /* texto vai até x≈1338 */
  /* No original o bloco começa 130px abaixo do topo da faixa. */
  align-self: start;
  margin-top: clamp(1.5rem, 9vw, 130px);
  padding-left: 0;
}

.hg-delivery__marcas {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 0.3rem + 1vw, 1.1rem);
  margin-bottom: clamp(1rem, 0.5rem + 2vw, 2rem);
}
/* Alturas medidas no original: Hungara 25px, iFood 27px, 99Food 48px. */
.hg-delivery__marca { width: auto; height: clamp(18px, 1.75vw, 25px); }
.hg-delivery__marca--99 { height: clamp(34px, 3.3vw, 48px); }
.hg-delivery__risco {
  width: 1px;
  height: clamp(18px, 1.8vw, 26px);
  background: currentColor;
  opacity: 0.5;
}

.hg-delivery__titulo {
  margin-bottom: clamp(0.75rem, 0.4rem + 1.1vw, 0.94rem);
  max-width: 560px;                  /* o título ocupa 537px no original */
  font-size: var(--hg-fs-h2-alt);     /* 50px em 1440 */
  line-height: 1;
  color: var(--hg-creme);
}

/* No original o botão fica 22px à direita do alinhamento do texto. */
.hg-delivery__texto .hg-btn { margin-left: clamp(0px, 1.5vw, 22px); }

.hg-delivery__apoio {
  max-width: 506px;                  /* medido no original */
  margin-bottom: clamp(1.5rem, 0.6rem + 2.9vw, 3.94rem);  /* 63px até o botão */
}

/* Original @375: faixa de 629px; marcas 56px abaixo do topo, depois o
   texto de apoio (14/19), o título (30/30), o botão e, por último, a
   foto do celular (360x301 em x=8), cortada 9px pela borda de baixo. */
@media (max-width: 899px) {
  .hg-delivery__interno {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 56px 32px 0;
  }
  .hg-delivery__texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: none;
    margin: 0;
  }
  .hg-delivery__marcas { order: 1; gap: 17px; margin-bottom: 14px; }
  .hg-delivery__apoio  { order: 2; max-width: 311px; margin-bottom: 20px; font-size: 14px; line-height: 19px; }
  .hg-delivery__titulo { order: 3; max-width: 311px; margin-bottom: 19px; font-size: 30px; }
  .hg-delivery__texto .hg-btn { order: 4; width: 100%; margin-left: 0; }
  .hg-delivery__marca { height: 25px; }
  .hg-delivery__marca--99 { height: 48px; }
  .hg-delivery__risco { height: 26px; }
  .hg-delivery__texto { order: 1; }
  .hg-delivery__foto {
    order: 2;
    position: static;
    width: 360px;
    max-width: none;
    margin: 15px 0 -9px -24px;
  }
}

/* historia.css */
/* =========================================================
   História — texto à esquerda, foto sangrando à direita.
   Original @1440: faixa creme de 423px, texto com 464px.
   ========================================================= */

.hg-historia {
  position: relative;
  background: var(--hg-creme);
  overflow: hidden;
}

.hg-historia__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  height: clamp(300px, 29.4vw, 423px);     /* travada: a foto transborda */
  padding-left: clamp(1rem, 9.65vw, 139px);   /* texto em x=139 */
}

.hg-historia__texto {
  align-self: start;
  max-width: 464px;                  /* medido no original */
  padding-top: clamp(2rem, 8.3vw, 120px);
}

/* No original a marca sob o texto é pequena: ~46px de largura, 20px abaixo. */
.hg-historia__marca {
  width: clamp(56px, 5.3vw, 76px);
  height: auto;
  margin-top: clamp(0.75rem, 1.4vw, 20px);
}

/* Geometria do original @1440. A DOM reporta a caixa envolvente do
   elemento já girado (880x642 em x=832/y=-75); desfazendo a rotação de
   -12deg, o elemento real tem ~796x488 (proporção natural do PNG, sem
   esticar) centrado em (1272, 246): caixa em x=874, y=2. A arte do PNG
   é inclinada de propósito e o rotate(-12deg) a deixa reta. O wrapper
   entra com a animação de aparecer (desliza 150px da direita). */
.hg-historia__foto {
  position: absolute;
  left: 48.5vw;                      /* caixa 792x486 em (705,2), calibrada pelo rótulo do original */
  top: 0.11vw;
  width: 55vw;
  pointer-events: none;
}
.hg-historia__foto img {
  width: 100%;
  height: auto;
  max-width: none;
  transform: rotate(-12deg);
}

/* Original @375 (faixa de 468px): marca 76x25 a 48px do topo, texto
   14/19 logo abaixo e o pão de 393x241 (girado -12deg) por último,
   centrado em x=213 e cortado pela borda de baixo. */
@media (max-width: 899px) {
  .hg-historia__interno { display: block; height: auto; padding: 48px 31px 0; }
  .hg-historia__texto { display: flex; flex-direction: column; max-width: none; padding-top: 0; }
  .hg-historia__marca { order: -1; width: 76px; margin: 0 0 21px; }
  .hg-historia__texto p { margin: 0; font-size: 14px; line-height: 19px; }
  .hg-historia__foto { position: relative; left: auto; top: auto; width: 393px; max-width: none; margin: 11px 0 -10px -14px; }
}

/* metricas.css */
/* =========================================================
   Expansão (faixa marrom) e as métricas da marca.
   Original @1440: faixa de 803px; título 50/50 creme; métricas
   Ayr Blufy 50 vermelhas em grade 2x2; foto de 589x803 à direita.
   ========================================================= */

.hg-expansao {
  position: relative;
  background: var(--hg-marrom);
  color: var(--hg-creme);
  overflow: hidden;
}

.hg-expansao__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  /* Travada em 803px: no original a foto é cortada pela borda de baixo. */
  height: clamp(560px, 55.8vw, 803px);
  padding-left: clamp(1rem, 9.5vw, 137px);   /* texto em x=137 */
}

.hg-expansao__texto { padding-top: clamp(2rem, 7.5vw, 108px); }   /* título em y=3079 */

.hg-expansao__titulo {
  max-width: 600px;                  /* 593px no original */
  margin-bottom: clamp(1rem, 0.5rem + 1.9vw, 2.625rem);   /* 42px */
  font-size: var(--hg-fs-h2-alt);    /* 50px em 1440 */
  line-height: 1;
  color: var(--hg-creme);
}

.hg-expansao__apoio {
  max-width: 600px;
  margin-bottom: clamp(1rem, 0.5rem + 2.4vw, 3.5rem);     /* 56px até as métricas */
}

/* Medido no original: o elemento da foto tem 589x803 (a altura toda da
   faixa), alinhado ao topo, em x=739 — o homem visível vai até x=1328.
   Antes eu o colocava encostado à direita e 150px abaixo. */
.hg-expansao__foto {
  position: absolute;
  left: 51.3vw;
  top: 0;
  width: 40.9vw;
  pointer-events: none;
}
.hg-expansao__foto img {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}

/* --- Métricas --- */
.hg-metricas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.25rem, 0.6rem + 3.9vw, 3.9rem) clamp(1.5rem, 0.6rem + 3vw, 3.5rem);
}
.hg-metricas--grade { grid-template-columns: repeat(2, minmax(0, max-content)); }
.hg-metricas--linha { grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); }

.hg-metrica { display: grid; gap: 0.25rem; }

/* O botão vive numa célula da grade das métricas. */
.hg-metricas__acao { align-self: center; }
.hg-metricas__acao .hg-btn { white-space: nowrap; }

.hg-metrica__valor {
  font-family: var(--hg-display);
  font-size: var(--hg-fs-h2-alt);    /* 50px em 1440 */
  line-height: 1;
  color: var(--hg-vermelho);
}
.hg-metrica__texto {
  max-width: 15ch;                   /* 'Italianos vendidos diariamente' em 2 linhas */
  font-size: clamp(1rem, 0.7rem + 1vw, 1.5rem);   /* 24px em 1440 */
  line-height: 1.05;
}

/* Original @375 (faixa de 924px): título 27/27 a 70px do topo, texto
   14/19, métricas em duas colunas (x=33 e x=198) com valor 24px e
   rótulo 18/18, linhas a cada 95px; botão de 312px; foto 328x343 em
   x=24 encostada na base. Tudo alinhado à esquerda. */
@media (max-width: 899px) {
  .hg-expansao__interno { display: block; height: auto; padding: 70px 0 0; }
  .hg-expansao__texto { padding: 0 32px 0 33px; }
  .hg-expansao__titulo { max-width: 315px; margin-bottom: 29px; font-size: 27px; }
  .hg-expansao__apoio { max-width: 312px; margin-bottom: 30px; font-size: 14px; line-height: 19px; }
  .hg-metricas--grade { grid-template-columns: 165px minmax(0, 1fr); gap: 34px 0; }
  .hg-metrica { gap: 1px; justify-items: start; align-content: start; }   /* sem isso o li esticado abre espaço entre valor e rótulo */
  .hg-metrica__valor { font-size: 24px; }
  .hg-metrica__texto { max-width: 160px; font-size: 18px; line-height: 18px; }
  .hg-metrica:first-child .hg-metrica__texto { max-width: 100px; }   /* "Lojas em / operação", como no original */
  .hg-metricas__acao { grid-column: 1 / -1; }
  .hg-metricas__acao .hg-btn { width: 100%; }
  .hg-expansao__foto { position: static; width: 328px; margin: 40px 0 0 24px; }
  .hg-expansao__foto img { display: block; }
}

/* franqueado.css */
/* =========================================================
   Seja franqueado — faixa vermelha, foto sangrando à esquerda,
   título e métricas à direita.
   Original @1440: faixa de 705px; título em x=611; foto 1278x614
   a partir de x=0; métricas em linha; botão claro.
   ========================================================= */

.hg-franqueado {
  position: relative;
  background: var(--hg-vermelho);
  color: var(--hg-creme);
  overflow: hidden;
}

.hg-franqueado__interno {
  position: relative;
  min-height: clamp(480px, 49vw, 705px);
  padding: clamp(2.5rem, 9.3vw, 134px) clamp(1rem, 8.5vw, 122px) clamp(2rem, 1rem + 4vw, 4rem);
}

/* A foto ocupa a base da faixa, sangrando pela esquerda. */
.hg-franqueado__foto {
  position: absolute;
  left: 0;
  /* No original a foto passa 150px além da borda de baixo. */
  bottom: clamp(-150px, -10.4vw, -1rem);
  width: clamp(560px, 88.8vw, 1278px);
  pointer-events: none;
}
.hg-franqueado__foto img { width: 100%; height: auto; display: block; }

.hg-franqueado__titulo,
.hg-franqueado__apoio,
.hg-franqueado .hg-metricas,
.hg-franqueado__acao {
  position: relative;
  z-index: 1;
  margin-left: auto;
  max-width: 600px;                  /* 592px no original */
}

.hg-franqueado__titulo {
  margin-bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  font-size: var(--hg-fs-h2-alt);
  line-height: 1;
  color: var(--hg-creme);
}

/* Sobre o vermelho as métricas ficam em creme, não vermelhas. */
.hg-franqueado .hg-metrica__valor { color: var(--hg-creme); }

.hg-franqueado .hg-metricas { margin-bottom: clamp(0.75rem, 0.4rem + 0.9vw, 1rem); }

.hg-franqueado__apoio { margin-bottom: clamp(1.5rem, 1rem + 4.6vw, 6.6rem); }

.hg-franqueado__acao { margin-bottom: 0; }

/* Original @375 (faixa de 835px): título 30/30 a 63px do topo, texto
   14/19, métricas em duas colunas (+45 e +15.000; +40 embaixo), botão
   creme de 312px e a foto de 608x447 (x=-92) subindo 16px por trás do
   botão e cortada 130px pela borda de baixo. */
@media (max-width: 899px) {
  .hg-franqueado__interno { display: flex; flex-direction: column; min-height: 0; padding: 63px 31px 0 32px; }
  .hg-franqueado__titulo,
  .hg-franqueado__apoio,
  .hg-franqueado .hg-metricas,
  .hg-franqueado__acao { margin-left: 0; max-width: 312px; }
  .hg-franqueado__titulo { margin-bottom: 20px; font-size: 30px; }
  .hg-franqueado__apoio { margin-bottom: 34px; font-size: 14px; line-height: 19px; }
  .hg-franqueado .hg-metricas { grid-template-columns: 166px minmax(0, 1fr); gap: 30px 0; margin-bottom: 34px; }
  .hg-franqueado .hg-metrica:nth-child(2) { order: 1; }    /* +40 vai para a 2ª linha */
  .hg-franqueado__acao .hg-btn { width: 100%; }
  .hg-franqueado__foto { order: 5; position: relative; width: 608px; max-width: none; margin: -16px 0 -130px -124px; }
}

/* insta.css */
/* =========================================================
   Vitrine do Instagram — carrossel de posts largos.
   Original @1440: faixa creme de 712px, cards de 1167x580.
   ========================================================= */

.hg-insta {
  background: var(--hg-creme);
  padding-block: clamp(2rem, 4.6vw, 66px);   /* seção de 712 com cards de 580 */
  overflow: hidden;
}

.hg-insta__area { overflow: hidden; }

.hg-insta__trilho {
  --vao: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
  display: flex;
  gap: var(--vao);
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
  animation: hg-insta-desliza 90s linear infinite;
}
.hg-insta__area:hover .hg-insta__trilho { animation-play-state: paused; }

@keyframes hg-insta-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--vao) / 2)); }
}

.hg-insta__item {
  flex: 0 0 clamp(280px, 81vw, 1167px);
  border-radius: var(--hg-radius-lg);
  overflow: hidden;
}
.hg-insta__item img {
  width: 100%;
  height: clamp(180px, 40.3vw, 580px);
  object-fit: cover;
  transition: transform var(--hg-dur) var(--hg-ease);
}
.hg-insta__item a:hover img { transform: scale(1.02); }

/* O botão "Clique e visite-nos" só existe nos cards verticais do celular. */
.hg-insta__visite { display: none; }

/* Original @375 (faixa de 572px): cards verticais de 249x442, raio 16,
   vão de 10px, o primeiro em x=62; botão creme de 214x48 (texto 16px)
   a 18px da esquerda e 339px do topo do card. */
@media (max-width: 899px) {
  .hg-insta { padding-block: 70px 60px; }
  .hg-insta__area { padding-left: 62px; }
  .hg-insta__trilho { --vao: 10px; }
  .hg-insta__item { position: relative; flex-basis: 249px; border-radius: 16px; }
  .hg-insta__item img { height: 442px; }
  .hg-insta__visite {
    display: inline-flex;
    position: absolute;
    left: 18px;
    top: 339px;
    width: 214px;
    padding-inline: 8px;
    font-size: 16px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hg-insta__trilho { animation: none; }
  .hg-insta__area { overflow-x: auto; }
}

/* rodape.css */
/* =========================================================
   Rodapé — geometria do original @1440 (faixa marrom de 362px).
   Acima de 900px cada bloco fica ancorado onde está no Framer;
   abaixo, empilha.
   ========================================================= */

.hg-rodape {
  background: var(--hg-marrom);
  color: var(--hg-creme);
}

.hg-rodape__interno {
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  min-height: clamp(280px, 25.1vw, 362px);
}

/* --- Slogan: 44px, 3 linhas de 44; no original há 18px extras só entre
   a 1ª e a 2ª linha (um <br> numa fonte maior), total 150px --- */
.hg-rodape__slogan {
  position: absolute;
  left: clamp(1rem, 4.3vw, 62px);
  top: clamp(1.75rem, 6.25vw, 90px);
  margin: 0;
  display: grid;
  gap: 0;
  font-family: var(--hg-display);
  font-size: clamp(1.75rem, 3.05vw, 2.745rem);   /* 43,92px em 1440 */
  line-height: 1;
  text-transform: uppercase;
}
.hg-rodape__slogan span { display: block; }
.hg-rodape__slogan > span:first-child { margin-bottom: 8px; }   /* 1ª linha em y=90, as outras a partir de 142 */
.hg-rodape__slogan .hg-swash { display: inline; }

/* --- Copyright: Omnes 10,5px em y=295 --- */
.hg-rodape__copy {
  position: absolute;
  left: clamp(1rem, 4.3vw, 62px);
  bottom: clamp(1.5rem, 3.7vw, 53px);
  margin: 0;
  font-size: 0.66rem;                              /* 10,54px */
  line-height: 1.35;
}

/* --- Links: Ayr Blufy 15,8px, caixa alta, 4 linhas por coluna --- */
.hg-rodape__nav {
  position: absolute;
  left: clamp(14rem, 30.1vw, 434px);
  top: clamp(1.5rem, 4.8vw, 69px);
}
.hg-rodape__lista {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: clamp(3rem, 6.25vw, 90px);           /* colunas em x=434 e x=710 */
  row-gap: 14.7px;                                 /* passo de 46,7px com o item de 32 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.hg-rodape__lista a {
  display: block;
  padding: 8px 0;                                  /* item de 32px */
  font-family: var(--hg-display);
  font-size: 0.99rem;                              /* 15,81px */
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--hg-dur) var(--hg-ease);
}
.hg-rodape__lista a:hover { color: var(--hg-vermelho); }

/* --- Voltar ao topo: 47x48 vermelho, raio 8, canto direito --- */
.hg-rodape__topo {
  position: absolute;
  right: clamp(1rem, 3.75vw, 54px);
  top: clamp(2rem, 5.4vw, 78px);
  display: grid;
  place-items: center;
  width: 47px;
  height: 48px;
  border-radius: 8px;
  background: var(--hg-vermelho);
  color: var(--hg-creme);
  transition: transform var(--hg-dur) var(--hg-ease);
}
.hg-rodape__topo:hover { transform: translateY(-3px); }
.hg-rodape__topo:focus-visible { outline: 3px solid var(--hg-creme); outline-offset: 3px; }

/* --- Botões na base, encostados à direita (fim em x=1386, y=271) --- */
.hg-rodape__acoes {
  position: absolute;
  right: clamp(1rem, 3.75vw, 54px);
  bottom: clamp(1.5rem, 3vw, 43px);
  display: flex;
  gap: 17px;
}
.hg-rodape__acoes .hg-btn--claro { padding-inline: 19px; }   /* 245px de largura */
.hg-rodape__insta {
  padding-inline: 31px 30px;                       /* ícone em +31, texto em +59 */
  gap: 9px;
  font-size: 1rem;                                 /* 16px, menor que o botão padrão */
}
.hg-rodape__insta svg { flex: none; }

.hg-rodape__marca { display: none; }

/* Original @375 (faixa de 826px): slogan 32/32 em 3 linhas a 70px do
   topo; links a cada 46px a partir de +183; botões de 289px empilhados
   (+469 e +527); "topo" centralizado em +613; marca vermelha 100x31 em
   +711; copyright em +752 e 60px de respiro. */
@media (max-width: 899px) {
  .hg-rodape__interno {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 70px var(--hg-gutter) 60px;
    text-align: center;
  }
  .hg-rodape__slogan, .hg-rodape__copy, .hg-rodape__nav,
  .hg-rodape__topo, .hg-rodape__acoes { position: static; }
  .hg-rodape__slogan {
    display: block;
    max-width: 284px;
    font-size: 32px;
    line-height: 32px;
  }
  .hg-rodape__slogan span,
  .hg-rodape__slogan > span:first-child { display: inline; margin: 0; }
  .hg-rodape__slogan .hg-swash { font-feature-settings: normal; }   /* no celular o M é o comum */
  .hg-rodape__slogan { order: 1; }
  .hg-rodape__nav { order: 2; margin-top: 17px; }
  .hg-rodape__acoes { order: 3; }
  .hg-rodape__topo { order: 4; }
  .hg-rodape__marca { order: 5; }
  .hg-rodape__copy { order: 6; }
  .hg-rodape__lista { grid-auto-flow: row; grid-template-rows: none; justify-items: center; }
  .hg-rodape__acoes { flex-direction: column; gap: 10px; width: 289px; margin-top: 24px; }
  .hg-rodape__acoes .hg-btn { width: 100%; padding-inline: 16px; white-space: nowrap; }
  .hg-rodape__topo { margin-top: 38px; }
  .hg-rodape__marca { display: block; width: 100px; height: auto; margin-top: 50px; }
  .hg-rodape__copy { margin-top: 10px; }
}