/* Páginas de segundo nível, no visual do Modelo C (Híbrido). */

:root {
	--fundo: #f6f7f9; --fundo-2: #ffffff; --cartao: #ffffff; --texto: #111318; --suave: #5f6372;
	--linha: #dfe2e8; --campo: #fff;
	--hero-fundo: #0d0f14; --hero-texto: #fff; --hero-suave: #c2c5cf;
	--topo-fundo: rgba(13,15,20,.9); --topo-texto: #c5c8d2; --topo-linha: rgba(255,255,255,.08);
	--raio: 14px; --raio-g: 24px; --btn-raio: 999px;
	--fonte-titulo: "Sora", system-ui, sans-serif; --fonte-texto: "Inter", system-ui, sans-serif;
	--titulo-caixa: none; --titulo-peso: 700; --titulo-espaco: -.035em; --titulo-escala: 1;
	--btn-fundo: var(--av-vermelho); --btn-fundo-hover: #ee3238; --destaque: var(--av-vermelho);
	--produto-fundo: linear-gradient(160deg, #f4f5f8, #e6e8ee);
}

h1, h2, h3 { text-transform: var(--titulo-caixa); font-weight: var(--titulo-peso); letter-spacing: var(--titulo-espaco); }
h1 { font-size: calc(clamp(2.3rem, 5.8vw, 4.2rem) * var(--titulo-escala)); }
h2 { font-size: calc(clamp(1.9rem, 4.4vw, 3rem) * var(--titulo-escala)); }

section { padding-block: clamp(64px, 9vw, 112px); }
section[id] { scroll-margin-top: 120px; }
.rotulo { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.rotulo::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--av-vermelho), var(--av-azul)); }
.rotulo + h2 { margin-top: 12px; }
.fundo-2 { background: var(--fundo-2); }

/* Botões */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: var(--btn-raio); font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid transparent; transition: .2s; }
.btn-principal { background: var(--btn-fundo); color: #fff; }
.btn-principal:hover { background: var(--btn-fundo-hover); }
.btn-contorno { border-color: color-mix(in srgb, currentColor 35%, transparent); }
.btn-contorno:hover { border-color: currentColor; }

/* Cabeçalho */
/* O desfoque fica num pseudo-elemento: backdrop-filter no próprio cabeçalho
   prenderia o menu do celular (position: fixed) dentro dele. */
.topo2 { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--topo-linha); }
.topo2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--topo-fundo); backdrop-filter: blur(12px); }
.topo2 .caixa { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.topo2 .logo img { height: 46px; width: auto; }
.nav2 { display: none; }
.nav2 a, .nav2 .grupo > span { color: var(--topo-texto); text-decoration: none; font-size: .92rem; font-weight: 500; }
.nav2 a:hover, .nav2 a[aria-current] { color: var(--destaque); }
.nav2 a:hover { color: #fff; }
.topo2 .cta { display: none; padding: 10px 18px; }
.btn-menu2 { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--topo-linha); border-radius: var(--btn-raio); color: var(--topo-texto); }
.btn-menu2 span, .btn-menu2 span::before, .btn-menu2 span::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: .25s; }
.btn-menu2 span::before, .btn-menu2 span::after { content: ""; position: absolute; left: 0; }
.btn-menu2 span::before { top: -6px; } .btn-menu2 span::after { top: 6px; }
.btn-menu2[aria-expanded="true"] span { background: transparent; }
.btn-menu2[aria-expanded="true"] span::before { top: 0; rotate: 45deg; }
.btn-menu2[aria-expanded="true"] span::after { top: 0; rotate: -45deg; }
.nav2.aberto { display: flex; flex-direction: column; position: fixed; inset: 68px 0 0; padding: 12px 16px 40px; background: var(--fundo); overflow-y: auto; }
.nav2.aberto > a, .nav2.aberto .grupo > span { font: var(--titulo-peso) 1.5rem var(--fonte-titulo); text-transform: var(--titulo-caixa); color: var(--texto); padding: 14px 0; border-bottom: 1px solid var(--linha); display: block; }
.nav2.aberto .sub { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 0 14px; border-bottom: 1px solid var(--linha); }
.nav2.aberto .sub a { color: var(--suave); padding: 6px 0; }
.nav2.aberto > a.so-celular { color: var(--destaque); border-bottom: 0; }
@media (min-width: 1180px) {
	.btn-menu2, .nav2 .so-celular { display: none; }
	.topo2 .cta { display: inline-flex; }
	.nav2, .nav2.aberto { display: flex; align-items: center; gap: 28px; position: static; flex-direction: row; padding: 0; background: none; overflow: visible; }
	.nav2.aberto > a, .nav2.aberto .grupo > span { font: 500 .92rem var(--fonte-texto); text-transform: none; color: var(--topo-texto); padding: 0; border: 0; }
	.grupo { position: relative; }
	.grupo > span { cursor: default; display: inline-flex; gap: 6px; align-items: center; }
	.grupo > span::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; }
	.grupo .sub, .nav2.aberto .grupo .sub { position: absolute; top: calc(100% + 14px); left: -18px; min-width: 220px; display: grid; grid-template-columns: 1fr; gap: 0; padding: 8px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--cartao); box-shadow: 0 20px 40px rgba(0,0,0,.18); opacity: 0; visibility: hidden; translate: 0 6px; transition: .2s; }
	.grupo .sub::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
	.grupo:hover .sub, .grupo:focus-within .sub { opacity: 1; visibility: visible; translate: 0 0; }
	.grupo .sub a { color: var(--texto); padding: 9px 12px; border-radius: calc(var(--raio) * .6); }
	.grupo .sub a:hover { background: var(--fundo-2); color: var(--texto); }
}


/* Rodapé */
.rodape2 { background: var(--hero-fundo); color: var(--hero-suave); border-top: 1px solid var(--linha); padding: 44px 0 120px; font-size: .88rem; }
.rodape2 .caixa { display: grid; gap: 24px; }
@media (min-width: 800px) { .rodape2 .caixa { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape2 img { height: 40px; width: auto; }
.rodape2 h4 { color: var(--hero-texto); font: 600 .85rem var(--fonte-texto); text-transform: none; letter-spacing: 0; margin-bottom: 10px; }
.rodape2 ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rodape2 a { text-decoration: none; }
.rodape2 a:hover { color: var(--hero-texto); }

/* Itens do menu e botão nunca quebram em duas linhas. */
.nav2 a, .nav2 .grupo > span, .topo2 .cta { white-space: nowrap; }