/* Base compartilhada das prévias. Cada modelo define suas variáveis. */

:root {
	/* Cores do logotipo */
	--av-vermelho: #d7262b;
	--av-vermelho-escuro: #a8161b;
	--av-azul: #2457f5;
	--av-azul-escuro: #1a3fb8;
	--av-grafite: #3d3e44;
	--av-cinza: #8d8e94;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--fundo);
	color: var(--texto);
	font-family: var(--fonte-texto);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--av-azul); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.caixa { width: min(1200px, 100% - 32px); margin-inline: auto; }
@media (min-width: 720px) { .caixa { width: min(1200px, 100% - 64px); } }

/* Aparecer ao rolar */
.surge { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.surge.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.surge { opacity: 1; transform: none; transition: none; }
	* { animation: none !important; }
}

/* Fotos que ainda não existem: arte de "palco" com legenda */
.ph {
	position: relative;
	background:
		radial-gradient(60% 80% at 20% 0%, rgba(36, 87, 245, .55), transparent 60%),
		radial-gradient(50% 70% at 80% 0%, rgba(215, 38, 43, .5), transparent 60%),
		radial-gradient(120% 60% at 50% 110%, rgba(255, 255, 255, .12), transparent 60%),
		linear-gradient(180deg, #0c0d12, #1b1d26);
	overflow: hidden;
}
.ph::before {
	/* fachos de luz */
	content: "";
	position: absolute; inset: 0;
	background:
		conic-gradient(from 160deg at 25% -10%, transparent 0 10deg, rgba(255,255,255,.10) 12deg, transparent 18deg 30deg, rgba(255,255,255,.07) 32deg, transparent 38deg),
		conic-gradient(from 170deg at 75% -10%, transparent 0 8deg, rgba(255,255,255,.08) 10deg, transparent 16deg 26deg, rgba(255,255,255,.10) 28deg, transparent 34deg);
}
.ph::after {
	/* plateia */
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
	background: radial-gradient(14px 18px at 10px 18px, #07080b 98%, transparent) 0 0 / 22px 26px repeat-x,
		radial-gradient(14px 18px at 10px 18px, #07080b 98%, transparent) 11px 10px / 22px 26px repeat-x,
		linear-gradient(transparent 40%, #07080b 40%);
}
.ph > .ph-legenda {
	position: absolute; z-index: 1; right: 12px; top: 12px;
	font: 600 11px/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
	color: #fff; background: rgba(0,0,0,.55); border: 1px dashed rgba(255,255,255,.5);
	padding: 6px 8px; border-radius: 4px;
}
.ph.tela::before {
	/* painel de LED */
	background:
		linear-gradient(90deg, rgba(36,87,245,.9), rgba(215,38,43,.9)) 50% 30% / 60% 34% no-repeat,
		repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 6px) 50% 30% / 60% 34% no-repeat;
}

/* Vídeo do YouTube (fachada) */
.yt {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
	padding: 0; border: 0; background: #000; overflow: hidden; border-radius: var(--raio);
}
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; opacity: .85; }
.yt:hover img { transform: scale(1.04); opacity: 1; }
.yt .play {
	position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; translate: -50% -50%;
	border-radius: 50%; background: var(--av-vermelho); box-shadow: 0 10px 30px rgba(215,38,43,.45);
	transition: transform .2s;
}
.yt .play::after {
	content: ""; position: absolute; left: 27px; top: 22px;
	border-left: 20px solid #fff; border-block: 12px solid transparent;
}
.yt:hover .play { transform: scale(1.08); }
.yt .yt-t {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 14px; text-align: left;
	color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3;
	background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.yt iframe { width: 100%; height: 100%; border: 0; }

/* Mapa (fachada) */
.mapa {
	position: relative; min-height: 280px; border-radius: var(--raio); overflow: hidden;
	display: grid; place-items: center; text-align: center;
	background:
		linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px) 0 0 / 28px 28px,
		linear-gradient(135deg, #e9edf5, #dfe5ef);
	color: #1c1f27;
}
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa button {
	display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px;
	background: #fff; color: #1c1f27; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.mapa .pino {
	width: 22px; height: 22px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--av-vermelho);
	box-shadow: inset 0 0 0 6px var(--av-vermelho), inset 0 0 0 11px #fff;
}

/* Espaço para logotipo de fabricante */
.logo-slot {
	display: grid; place-items: center; text-align: center; min-height: 92px; padding: 16px;
	text-decoration: none; border-radius: var(--raio); transition: transform .2s, border-color .2s, background .2s;
}
.logo-slot:hover { transform: translateY(-3px); }
.logo-slot .marca { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; line-height: 1; }
.logo-slot small { display: block; margin-top: 6px; font-size: .7rem; opacity: .55; letter-spacing: .06em; text-transform: uppercase; }

/* Formulário */
/* min-width: 0 deixa os campos encolherem dentro de grades (senão o input
   impõe a própria largura mínima e a página vaza no celular). */
.campo { display: grid; gap: 6px; min-width: 0; }
.duas > *, form > * { min-width: 0; }
.campo label { font-size: .85rem; font-weight: 600; }
.campo input, .campo select, .campo textarea {
	width: 100%; font: inherit; color: inherit; padding: 12px 14px; border-radius: calc(var(--raio) * .6);
	border: 1px solid var(--linha); background: var(--campo, transparent);
}
.campo textarea { min-height: 120px; resize: vertical; }
[data-retorno]:not(:empty) { margin-top: 12px; font-size: .9rem; padding: 10px 14px; border-radius: 8px; background: rgba(36,87,245,.12); }

/* Barra fixa para alternar entre as prévias */
.barra-previa {
	position: fixed; z-index: 100; left: 50%; bottom: 12px; translate: -50% 0;
	display: flex; gap: 2px; padding: 4px; border-radius: 999px;
	background: rgba(15, 16, 20, .88); backdrop-filter: blur(8px);
	box-shadow: 0 8px 30px rgba(0,0,0,.35); max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none;
	font: 600 12px/1 system-ui, sans-serif;
}
.barra-previa a { color: #c9cad0; text-decoration: none; padding: 9px 12px; border-radius: 999px; white-space: nowrap; }
.barra-previa a[aria-current] { background: #fff; color: #111; }
.barra-previa a:hover:not([aria-current]) { color: #fff; }
body.menu-aberto .barra-previa { display: none; }

/* Com o menu do celular aberto, o desfoque do cabeçalho sai: backdrop-filter
   faria o painel (position: fixed) ficar preso dentro do cabeçalho. */
body.menu-aberto .topo, body.menu-aberto .topo .caixa { backdrop-filter: none !important; }