/* Hangar 23 — design system herdado do site de referência (tema "r01", ver docs/DESIGN-SYSTEM.md).
   Medidas, cores e fontes copiadas do DOM renderizado da referência. */

:root {
  --vermelho: #ff1a25;
  --vermelho-hover: #ff3336;
  --vermelho-titulo: #e91822;
  --vermelho-escuro: #c4121b;
  --vermelho-fundo: #e91822;   /* vermelho da própria referência (títulos #delivery): branco sobre ele passa no AA (4,55:1) */
  --preto: #000;
  --grafite: #1a1a1a;
  --caixa: #0a0a0a;
  --tracejado: #545454;
  --linha-rodape: #191919;
  --texto: #c9c9c9;
  --cinza: #858383;
  --script: #8a8a8a;
  --branco: #fff;
  --barra-menu: #fbfbfb;
  --largura: 1200px;
  --gutter: 35px;
  --f-corpo: "Open Sans", Arial, sans-serif;
  --f-menu: Roboto, Arial, sans-serif;
  --f-marca: "Crimson Text", Georgia, serif;
  --f-script: Kristi, "Brush Script MT", cursive;
  --f-fina: Montserrat, Arial, sans-serif;
  --t-link: all .2s ease;
  --t-botao: background .3s, border .3s, color .3s, transform .4s;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }  /* âncoras não ficam sob o menu fixo */
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font: 400 16px/1.5 var(--f-corpo);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vermelho); text-decoration: none; transition: var(--t-link); }
a:hover { color: var(--vermelho-hover); }
p { margin: 0 0 1.5em; }
h1, h2, h3, h4, h5, h6 { color: var(--branco); margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.pular-link { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--branco); color: var(--preto); padding: 10px 16px; font-weight: 600; }
.pular-link:focus { top: 12px; color: var(--preto); }

.largura { width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Ícones (SVG inline, herdam a cor) ---------- */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; fill: currentColor; flex: none; }

/* ---------- Barra do topo (#topo) ---------- */
.topo { background: var(--preto); padding: 9px 0; font: 300 12px/1.5 var(--f-menu); color: var(--branco); }
.topo .largura { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.topo-info { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; min-width: 0; }
.topo-info > span { display: inline-flex; align-items: center; gap: 6px; }
.topo-info > span + span { margin-left: 15px; padding-left: 15px; border-left: 1px dashed #505050; }
.topo strong { font-weight: 500; }
.topo a { color: var(--branco); }
.topo a:hover { color: var(--vermelho-hover); }
.topo .ico { font-size: 14px; }
.topo-destaque { color: var(--vermelho); font-weight: 500; text-transform: uppercase; }

/* ---------- Barra do logo + menu (#barMenu) ---------- */
.barra-menu {
  background: var(--barra-menu);
  padding: 10px 0;
  position: relative;
  z-index: 900;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .05);
}
.barra-menu .largura { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: block; line-height: 0; flex: none; }
.logo img { height: 76px; width: auto; transition: height .3s ease-out; }
.menu-principal ul { list-style: none; margin: 0; padding: 0; display: flex; }
.menu-principal a {
  display: block;
  padding: 0 15px;
  line-height: 40px;
  font: 400 14px/40px var(--f-menu);
  text-transform: uppercase;
  color: #000;
}
.menu-principal a:hover, .menu-principal a:focus-visible { color: var(--vermelho); }
.menu-principal a[aria-current="page"] { color: var(--vermelho); font-weight: 700; }
.botao-menu {
  display: none;
  width: 48px; height: 48px;
  border: 0; background: transparent; color: #000;
  padding: 10px; margin-right: -10px;
}
.botao-menu span { display: block; height: 3px; background: currentColor; margin: 6px 0; transition: transform .3s, opacity .3s; }
.botao-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.botao-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.botao-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Menu fixo ao rolar (.f-nav da referência: preto 85%, links brancos) */
.cabecalho-espaco { display: none; }
body.menu-fixo .cabecalho-espaco { display: block; }
body.menu-fixo .barra-menu {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, .85);
  padding: 6px 0;
  animation: desce .3s ease-out;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.menu-fixo .logo img { height: 52px; }
body.menu-fixo .menu-principal a { color: var(--branco); }
body.menu-fixo .menu-principal a:hover, body.menu-fixo .menu-principal a[aria-current="page"] { color: var(--vermelho); }
body.menu-fixo .botao-menu { color: var(--branco); }
@keyframes desce { from { transform: translateY(-100%); } to { transform: none; } }

/* ---------- Botões (Elementor button da referência) ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px;
  padding: 13px 30px;
  background: var(--branco); color: var(--preto);
  border: 1px solid var(--branco);
  font: 600 16px/1.2 var(--f-corpo);
  text-transform: uppercase;
  transition: var(--t-botao);
  cursor: pointer;
  text-align: center;
}
.botao:hover, .botao:focus-visible { background: transparent; color: var(--branco); }
.botao .ico { font-size: 18px; transition: transform .3s; }
.botao:hover .ico-seta { transform: translateX(4px); }
.botao-vermelho-texto { color: var(--vermelho); }
.botao-contorno { background: transparent; color: var(--branco); }
.botao-contorno:hover, .botao-contorno:focus-visible { background: var(--branco); color: var(--preto); }
.botao-vermelho { background: var(--vermelho-fundo); border-color: var(--vermelho-fundo); color: var(--branco); }
.botao-vermelho:hover, .botao-vermelho:focus-visible { background: var(--vermelho-escuro); border-color: var(--vermelho-escuro); color: var(--branco); }
.botao[disabled], .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ---------- Banner (moldura preta de 10px + arte) ---------- */
.banner { padding: 10px; background: var(--preto); }
.banner-arte {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 40px;
  padding: 50px max(var(--gutter), calc((100% - var(--largura)) / 2));
  background:
    radial-gradient(ellipse 55% 85% at 26% 50%, rgba(255, 26, 37, .30), transparent 70%),
    radial-gradient(ellipse 60% 70% at 85% 110%, rgba(255, 26, 37, .14), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #120607 0%, #050505 100%);
}
.banner-arte::after { /* faixas laterais do banner original */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .85);
}
.banner-arte.com-foto { background-size: cover; background-position: center; }
.banner-arte.com-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.8) 60%); }
.banner-logo { position: relative; z-index: 1; justify-self: center; width: min(100%, 400px); filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .7)); }
.banner-texto { position: relative; z-index: 1; color: var(--branco); }
.banner-chamada {
  font: 700 clamp(38px, 6.2vw, 82px)/.92 var(--f-menu);
  text-transform: uppercase;
  letter-spacing: -1px;
  margin: 0;
}
.banner-chamada .script {
  display: block;
  font: 400 clamp(64px, 8.6vw, 118px)/.7 var(--f-script);
  color: var(--vermelho);
  text-transform: none;
  letter-spacing: 0;
  margin: 2px 0 0 clamp(40px, 7vw, 110px);
  text-shadow: 0 4px 18px rgba(0, 0, 0, .6);
}
.banner-sub { font: 500 clamp(15px, 1.6vw, 21px)/1.3 var(--f-menu); letter-spacing: 2px; text-transform: uppercase; margin: 22px 0 28px; color: var(--branco); }
.banner-acoes { display: flex; flex-wrap: wrap; gap: 15px; }
.banner-etiquetas { position: absolute; z-index: 1; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 0 20px; }
.etiqueta { /* etiquetas vermelhas em itálico do banner original */
  font: italic 400 19px/1 var(--f-marca);
  color: var(--branco);
  background: linear-gradient(90deg, rgba(160, 10, 18, .95), rgba(212, 18, 28, .95));
  padding: 6px 20px 7px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
a.etiqueta:hover { color: var(--branco); background: var(--vermelho); }

/* ---------- Faixa vermelha (#reservaHome) ---------- */
.faixa-vermelha { background: var(--vermelho-fundo); padding: 15px 0; color: var(--branco); }
.faixa-vermelha .largura { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.faixa-vermelha h2 { font: 400 35px/1 var(--f-marca); text-transform: uppercase; color: var(--branco); }
.faixa-vermelha p { margin: 5px 0 0; font: 400 16px/1.4 var(--f-menu); color: var(--branco); }
.faixa-vermelha .botao { color: var(--vermelho-fundo); flex: none; }
.faixa-vermelha .botao:hover { color: var(--branco); }

/* ---------- Chamada "Porque de ... a gente entende" (#rodizio) + cards ---------- */
.chamada { padding: 50px 0; text-align: center; }
.chamada-script { font: 400 45px/1 var(--f-script); color: var(--script); display: block; }
.chamada-fina { font: 200 37px/1.05 var(--f-fina); color: var(--vermelho); letter-spacing: 2.5px; text-transform: uppercase; display: block; }
.chamada-marca { font: 400 40px/1.1 var(--f-marca); color: var(--branco); text-transform: uppercase; display: block; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 50px; }
.card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  min-height: 376px; padding: 0 20px 20px; overflow: hidden; text-align: center; color: var(--branco);
  isolation: isolate;
}
.card-fundo { position: absolute; inset: 0; z-index: -2; transition: transform .6s ease; background: radial-gradient(ellipse 80% 55% at 50% 100%, rgba(255, 26, 37, .2), transparent 70%), repeating-linear-gradient(135deg, #121212 0 6px, #0e0e0e 6px 12px); background-size: cover; background-position: center; border: 1px solid #1c1c1c; }
.card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .9)); }
.card:hover .card-fundo, .card:focus-visible .card-fundo { transform: scale(1.06); }
.card-titulo { font: 400 20px/1.3 var(--f-marca); text-transform: uppercase; color: var(--branco); }
.card-sub { font: 400 14px/1.4 var(--f-menu); text-transform: uppercase; color: var(--vermelho); margin-top: 5px; }
.card:hover .card-titulo { color: var(--branco); }
.card-icone { /* desenho enquanto a foto não chega */
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 120px; height: 120px; color: #3a3a3a; transition: color .4s, transform .4s; z-index: -1;
}
.card:hover .card-icone { color: rgba(255, 26, 37, .55); transform: translate(-50%, -55%); }

/* ---------- Seções alternadas texto + grade 3×2 ---------- */
.secao { padding: 50px 0; background: var(--preto); }
.secao-grafite { background: var(--grafite); }
.secao .largura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.secao-invertida .secao-texto { order: -1; }
.secao-texto .secao-rotulo { font: 400 18px/1.3 var(--f-marca); text-transform: uppercase; color: var(--branco); margin: 0 0 10px; }
.secao-titulo { font: 600 30px/1.2 var(--f-menu); color: var(--branco); margin: 0 0 10px; }
.secao-titulo em { font-style: normal; color: var(--vermelho); }
.secao-sub { font: 600 20px/1.2 var(--f-corpo); color: var(--cinza); margin: 0 0 25px; }
.secao-texto p { color: var(--cinza); font-size: 16px; line-height: 24px; }
.secao-texto p strong { color: #a9a6a6; }
.secao-texto .botao { margin-top: 5px; }
.secao-acoes { display: flex; flex-wrap: wrap; gap: 15px; }

.grade { display: grid; grid-template-columns: repeat(3, 175px); gap: 30px; justify-content: start; }
.secao-invertida .grade { justify-content: end; }
.foto { position: relative; aspect-ratio: 1; overflow: hidden; background: #111; margin: 0; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.foto a:hover img { transform: scale(1.06); }
/* Quadro tipográfico no lugar da foto (fotos reais entram por tools/aplicar-fotos.mjs) */
.foto-pendente {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 14px; text-align: center;
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 26, 37, .22), transparent 60%),
    repeating-linear-gradient(135deg, #141414 0 6px, #101010 6px 12px);
  border: 1px solid #1f1f1f;
}
.secao-grafite .foto-pendente { background: radial-gradient(circle at 50% 120%, rgba(255, 26, 37, .2), transparent 60%), repeating-linear-gradient(135deg, #222 0 6px, #1d1d1d 6px 12px); border-color: #2a2a2a; }
.foto-pendente::before { content: ""; width: 26px; height: 2px; background: var(--vermelho); order: 2; }
.foto-pendente span { font: 400 19px/1.15 var(--f-marca); text-transform: uppercase; color: var(--branco); order: 1; }
.foto-pendente small { font: 400 11px/1.3 var(--f-menu); letter-spacing: 1px; text-transform: uppercase; color: #8a8a8a; order: 3; }

/* Passos do pedido na mesa (ocupam o lugar da grade) */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; counter-reset: passo; }
.passo { position: relative; background: #0d0d0d; border: 1px dashed var(--tracejado); padding: 24px 22px 22px; }
.passo::before { counter-increment: passo; content: counter(passo, decimal-leading-zero); display: block; font: 200 44px/1 var(--f-fina); color: var(--vermelho); letter-spacing: 2px; margin-bottom: 12px; }
.passo h4 { font: 400 20px/1.2 var(--f-marca); text-transform: uppercase; color: var(--branco); margin: 0 0 6px; }
.passo p { margin: 0; color: var(--cinza); font-size: 14px; line-height: 21px; }

/* ---------- Barra de contato (#delivery) ---------- */
.barra-contato {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  background: var(--vermelho-fundo); color: var(--branco);
  margin: 0 0 50px;
}
.barra-contato-titulo { padding: 20px 30px; }
.barra-contato-titulo h2 { font: 700 50px/1.05 var(--f-corpo); color: var(--branco); }
.barra-contato-titulo h2 span { font-weight: 300; }
.barra-contato-titulo p { margin: 0; font-size: 16px; text-transform: uppercase; }
.barra-contato-dados {
  position: relative; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 15px 60px; flex-wrap: wrap;
  background: var(--branco); padding: 20px 30px 20px 50px;
  clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%);
}
.barra-contato-dados a, .barra-contato-dados div { display: block; color: #000; font-size: 16px; line-height: 1.35; }
.barra-contato-dados .t { display: block; font: 700 22px/1.2 var(--f-corpo); color: var(--vermelho-titulo); margin-bottom: 2px; }
.barra-contato-dados a:hover .t { color: var(--vermelho); text-decoration: underline; }

/* ---------- Localização ---------- */
.mapa { position: relative; width: 100%; aspect-ratio: 585 / 380; background: #111; border: 1px solid #1f1f1f; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.mapa-carregar { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px; background: repeating-linear-gradient(135deg, #141414 0 6px, #101010 6px 12px); }
.mapa-carregar .ico { font-size: 42px; color: var(--vermelho); }

/* ---------- Rodapé (#widgetfootter) ---------- */
.rodape { background: var(--preto); color: #ccc; padding: 40px 0 0; }
.rodape-info { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-bottom: 30px; border-bottom: 1px dashed var(--linha-rodape); }
.rodape-info .logo img { height: 92px; }
.rodape-menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 34px; justify-content: flex-end; }
.rodape-menu a { color: var(--branco); font-size: 14px; }
.rodape-menu a:hover { color: var(--vermelho); }
.rodape-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; padding: 40px 0; }
.rodape-colunas h3 { display: flex; align-items: center; gap: 6px; font: 700 15px/1.3 var(--f-corpo); color: var(--vermelho); margin: 0 0 18px; }
.rodape-colunas p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: #ccc; }
.rodape-colunas a { color: #ccc; }
.rodape-colunas a:hover { color: var(--vermelho); }
.rodape-colunas .tel { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--branco); }
.copyright { border-top: 1px dashed var(--linha-rodape); padding: 15px 0; font-size: 14px; color: #d0d0d0; }
.copyright .largura { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.copyright p { margin: 0; }
.copyright-redes { display: flex; gap: 6px; }
.copyright-redes a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 20px; color: var(--branco); }
.copyright-redes a:hover { color: var(--vermelho); }

/* ---------- Página interna: título, submenu, rótulo de seção, caixa tracejada ---------- */
.titulo-pagina {
  position: relative; min-height: 270px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 40px var(--gutter);
  background:
    radial-gradient(ellipse 50% 90% at 50% 100%, rgba(255, 26, 37, .28), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #1a0b0c, #050505);
  overflow: hidden;
}
.titulo-pagina.com-foto { background-size: cover; background-position: center; }
.titulo-pagina.com-foto::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.titulo-pagina h1 { position: relative; font: 400 50px/1.05 var(--f-marca); letter-spacing: -1px; text-transform: uppercase; color: var(--branco); }
.titulo-pagina p { position: relative; margin: 10px 0 0; font: 400 15px/1.4 var(--f-menu); letter-spacing: 2px; text-transform: uppercase; color: var(--texto); }

.submenu { border-bottom: 1px solid var(--tracejado); background: var(--preto); }
.submenu ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: center; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.submenu ul::-webkit-scrollbar { display: none; }
.submenu a { display: block; padding: 15px 20px; font-size: 14px; color: var(--texto); text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid transparent; }
.submenu a:hover { color: var(--branco); }
.submenu a.ativo { color: var(--branco); border-bottom-color: var(--vermelho); }

.rotulo-secao { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 40px; isolation: isolate; }
.rotulo-secao::after { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: var(--branco); z-index: -1; }
.rotulo-secao h2 {
  display: inline-block; background: var(--branco); color: var(--preto);
  font: 400 30px/1 var(--f-marca); letter-spacing: 30px; text-transform: uppercase;
  padding: 6px 0 4px 30px;
}
.voltar-topo { background: var(--preto); padding: 0 0 0 12px; margin-top: 12px; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--texto); display: inline-flex; align-items: center; gap: 6px; }
.voltar-topo:hover { color: var(--vermelho); }

.caixa-info { border: 1px dashed var(--tracejado); background: var(--caixa); padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 40px; font-size: 14px; line-height: 21px; }
.caixa-info p { margin: 0 0 15px; }
.caixa-info p:last-child { margin-bottom: 0; }
.caixa-info strong { color: var(--branco); }

/* ---------- Lightbox (equivalente leve ao Tosrus da referência) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, .92); display: none; align-items: center; justify-content: center; padding: 20px; }
.lightbox.aberto { display: flex; }
.lightbox img { max-height: 88vh; width: auto; }
.lightbox button { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 0; background: transparent; color: var(--branco); font-size: 34px; line-height: 1; }

/* ---------- Preloader (LoftLoader da referência: logo enchendo de vermelho) ---------- */
.preloader { position: fixed; inset: 0; z-index: 5000; background: var(--preto); display: flex; align-items: center; justify-content: center; transition: opacity .5s ease, visibility .5s; }
.preloader.saiu { opacity: 0; visibility: hidden; }
.preloader-logo { position: relative; width: 120px; }
.preloader-logo img { width: 100%; }
.preloader-logo .apagado { opacity: .18; filter: grayscale(1); }
.preloader-logo .cheio { position: absolute; inset: 0; animation: enche 1.2s ease-out forwards; }
@keyframes enche { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.sem-js .preloader { display: none; }

/* ---------- Responsivo (breakpoints do tema: 1024 / 768 / 425 / 375) ---------- */
@media (max-width: 1024px) {
  :root { --gutter: 24px; }
  .menu-principal a { padding: 0 10px; font-size: 13px; }
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .secao .largura { align-items: start; }
  .barra-contato-titulo h2 { font-size: 40px; }
  .barra-contato-dados { gap: 15px 30px; }
}
@media (max-width: 900px) {
  .botao-menu { display: block; }
  .menu-principal {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--preto); border-top: 0 solid var(--vermelho);
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
  }
  .menu-principal.aberto { max-height: 80vh; overflow-y: auto; border-top-width: 3px; }
  .menu-principal ul { flex-direction: column; padding: 8px 0 16px; }
  .menu-principal a { color: var(--branco); padding: 0 var(--gutter); font-size: 15px; line-height: 52px; border-bottom: 1px dashed #1c1c1c; }
  .logo img { height: 62px; }
  body.menu-fixo .logo img { height: 46px; }
  .banner-arte { grid-template-columns: 1fr; text-align: center; gap: 22px; padding-top: 34px; padding-bottom: 86px; min-height: 0; }
  .banner-logo { width: min(64vw, 280px); }
  .banner-chamada .script { margin-left: 0; }
  .banner-acoes { justify-content: center; }
  .faixa-vermelha .largura { flex-direction: column; text-align: center; gap: 16px; }
  .cards { grid-template-columns: 1fr; gap: 20px; }
  .card { min-height: 240px; }
  .secao .largura { grid-template-columns: 1fr; gap: 30px; }
  .secao-invertida .secao-texto { order: 0; }
  .secao-texto { text-align: center; }
  .secao-acoes { justify-content: center; }
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .barra-contato { grid-template-columns: 1fr; }
  .barra-contato-titulo { text-align: center; padding: 22px 20px; }
  .barra-contato-dados { clip-path: none; padding: 22px 20px; flex-direction: column; text-align: center; gap: 16px; }
  .rodape-info { flex-direction: column; text-align: center; }
  .rodape-menu ul { justify-content: center; gap: 4px 22px; }
  .rodape-colunas { grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .rodape-colunas h3 { justify-content: center; }
  .caixa-info { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .topo .largura { justify-content: center; }
  .topo-info { justify-content: center; text-align: center; }
  .topo-oculta-celular { display: none !important; }
  .chamada-script { font-size: 38px; }
  .chamada-fina { font-size: 30px; }
  .chamada-marca { font-size: 30px; }
  .secao-titulo { font-size: 26px; }
  .secao-sub { font-size: 17px; }
  .faixa-vermelha h2 { font-size: 30px; }
  .titulo-pagina { min-height: 190px; }
  .titulo-pagina h1 { font-size: 40px; }
  .rotulo-secao h2 { font-size: 24px; letter-spacing: 18px; padding-left: 18px; }
  .rotulo-secao::after { top: 17px; }
  .submenu ul { justify-content: flex-start; }
  .copyright .largura { flex-direction: column; text-align: center; gap: 8px; }
}
@media (max-width: 425px) {
  :root { --gutter: 16px; }
  .banner { padding: 6px; }
  .banner-sub { letter-spacing: 1px; }
  .botao { padding: 13px 22px; font-size: 15px; }
  .banner-acoes .botao { flex: 1 1 100%; }
  .barra-contato-titulo h2 { font-size: 36px; }
  .passos { grid-template-columns: 1fr; gap: 16px; }
  .rotulo-secao h2 { font-size: 21px; letter-spacing: 12px; padding-left: 12px; }
  .voltar-topo { letter-spacing: 2px; }
}
@media (max-width: 375px) {
  .faixa-vermelha h2 { font-size: 26px; }
  .grade { gap: 10px; }
  .foto-pendente span { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .preloader { display: none; }
}

/* Com foto real: some o ícone provisório e a moldura dos quadros */
.card-fundo.com-foto { border: 0; }
.card-fundo.com-foto ~ .card-icone { display: none; }