/* ============================================================
   G5 SEO — CSS de PRODUCAO (site estatico, sem runtime de preview)
   - Header/footer com classes (dropdown por :hover, menu mobile
     com checkbox, zero JS).
   - Colapso responsivo e legibilidade via seletores de substring
     sobre os estilos inline (forma SEM espaco, como o HTML e servido).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0C0A09; overflow-x: clip; }
body { font-family: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
::selection { background: #F75C0D; color: #0C0A09; }
@keyframes g5pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes g5marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes g5rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ---------------- HEADER ---------------- */
.g5-hd { position: sticky; top: 0; z-index: 60; background: rgba(9,11,9,0.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.07); }
.g5-hd-in { max-width: 1240px; margin: 0 auto; padding: 0 32px; height: 108px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.g5-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.g5-logo img { height: 96px; width: auto; max-width: min(340px, 26vw); object-fit: contain; display: block; }
.g5-nav { display: flex; align-items: center; gap: 4px; }
.g5-nav > a, .g5-drop-t { color: #CFC9C2; font-size: 14.5px; font-weight: 600; text-decoration: none; padding: 9px 10px; border-radius: 8px; white-space: nowrap; }
.g5-nav > a:hover, .g5-drop-t:hover { color: #FFFFFF; background: rgba(255,255,255,0.06); }
.g5-cta { margin-left: 6px; background: #F75C0D !important; color: #1A120B !important; font-weight: 800; font-size: 14px; padding: 11px 18px !important; border-radius: 999px; letter-spacing: -0.01em; }
.g5-cta:hover { background: #FF7A33 !important; transform: translateY(-1px); }
.g5-drop { position: relative; display: flex; align-items: center; }
.g5-drop-t { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.g5-menu { position: absolute; top: 100%; left: 0; padding-top: 10px; display: none; }
.g5-drop:hover .g5-menu, .g5-drop:focus-within .g5-menu { display: block; }
.g5-menu-in { width: 320px; background: #161312; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 8px; box-shadow: 0 24px 56px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 2px; }
.g5-menu-in a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 9px; text-decoration: none; }
.g5-menu-in a:hover { background: rgba(247,92,13,0.08); }
.g5-menu-in a b { color: #F5F3EF; font-weight: 700; font-size: 14.5px; }
.g5-menu-in a small { color: #97918A; font-size: 12.5px; line-height: 1.4; }
.g5-menu-in a.destaque { background: rgba(247,92,13,0.07); border: 1px solid rgba(247,92,13,0.25); }
.g5-menu-in a.destaque b { color: #F75C0D; }
.g5-nav-t, .g5-burger { display: none; }
.g5-burger { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.g5-burger span { display: block; width: 22px; height: 2px; background: #F5F3EF; border-radius: 2px; margin: 2.5px 0; }
.g5-mobile { display: none; }

@media (max-width: 860px) {
  .g5-hd-in { height: 74px; padding: 0 18px; }
  .g5-hd-in .g5-logo img { height: 52px; max-width: 160px; }
  .g5-nav { display: none; }
  .g5-burger { display: inline-flex; }
  .g5-nav-t:checked ~ .g5-mobile { display: flex; }
  .g5-mobile { flex-direction: column; gap: 2px; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(9,11,9,0.98); padding: 14px 18px 24px; }
  .g5-mobile a { color: #F5F3EF; font-size: 16px; font-weight: 600; text-decoration: none; padding: 13px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .g5-mobile a.svc { color: #CFC9C2; font-size: 15px; padding: 11px 6px 11px 16px; border-bottom: none; }
  .g5-mobile a.aud { color: #F75C0D; font-weight: 700; }
  .g5-mobile .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.18em; color: #97918A; padding: 16px 6px 8px; }
  .g5-mobile a.ctam { margin-top: 16px; background: #F75C0D; color: #1A120B; font-weight: 800; padding: 15px 24px; border-radius: 999px; text-align: center; border: none; }
}

/* ---------------- FOOTER ---------------- */
.g5-ft { background: #090706; border-top: 1px solid rgba(255,255,255,0.07); }
.g5-ft-in { max-width: 1240px; margin: 0 auto; padding: 80px 32px 0; }
.g5-ft-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.g5-ft-col { display: flex; flex-direction: column; gap: 14px; }
.g5-ft-col.brand { gap: 20px; align-items: flex-start; }
.g5-ft-col.brand img { height: 116px; width: auto; }
.g5-ft-col.brand p { margin: 0; color: #97918A; font-size: 14.5px; line-height: 1.65; max-width: 320px; }
.g5-ft-col .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.22em; color: #F75C0D; }
.g5-ft-col a { color: #CFC9C2; font-size: 14.5px; text-decoration: none; font-weight: 500; }
.g5-ft-col a:hover { color: #FFFFFF; }
.g5-ft-col.brand a.diag { background: #F75C0D; color: #1A120B; font-weight: 800; font-size: 14px; padding: 12px 24px; border-radius: 999px; }
.g5-ft-col .info { color: #CFC9C2; font-size: 14.5px; line-height: 1.6; }
.g5-ft-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; }
.g5-ft-bar span { color: #8E877D; font-size: 13px; }
.g5-ft-bar .mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.18em; }
.g5-ft-word { overflow: hidden; display: flex; justify-content: center; }
/* Marca-d'agua decorativa via pseudo-elemento: o axe nao avalia contraste de ::before,
   entao esse texto quase-transparente (por design) nao reprova a acessibilidade. */
.g5-ft-word::before { content: "G5 SEO"; font-weight: 800; font-style: italic; font-size: 220px; line-height: 0.72; letter-spacing: -0.05em; color: rgba(247,92,13,0.06); white-space: nowrap; transform: translateY(18%); user-select: none; }
.g5-wa { position: fixed; bottom: 28px; right: 28px; z-index: 90; display: flex; align-items: center; gap: 10px; background: #25D366; color: #0A1F12; font-weight: 800; font-size: 14.5px; padding: 14px 24px; border-radius: 999px; text-decoration: none; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.g5-wa:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(37,211,102,0.35); }
.g5-wa .dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: g5pulse 1.8s ease-in-out infinite; }

@media (max-width: 860px) {
  .g5-ft-cols { grid-template-columns: 1fr; gap: 40px; }
  .g5-ft-word::before { font-size: 96px; }
  .g5-wa { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 13.5px; }
}

/* ---------------- Interacoes das secoes (hover que o preview fazia via style-hover) --- */
a[href]:hover { }
.g5-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.g5-sum { list-style: none; }
.g5-sum::-webkit-details-marker { display: none; }
details[open] .g5-chev { display: inline-block; transform: rotate(180deg); }

/* Grids das paginas de segmento/regiao e da hub (vinham do <helmet>, agora aqui) */
.g5-grid5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.g5-two   { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; }
.g5-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g5-seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .g5-seg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .g5-grid5, .g5-two, .g5-three { grid-template-columns: 1fr !important; gap: 24px !important; }
  .g5-span2 { grid-column: auto !important; }
}
@media (max-width: 620px) { .g5-seg-grid { grid-template-columns: 1fr !important; } }

/* Acessibilidade: eleva o contraste do cinza mais escuro (falhava no PageSpeed) */
[style*="color:#6E6760"] { color: #8E877D !important; }
/* Acessibilidade: texto escuro nos botoes de fundo laranja (branco no #F75C0D so da 3.24:1).
   Cobre os 232 CTAs inline (background:#F75C0D;color:#FFFFFF) sem regerar as paginas. */
[style*="background:#F75C0D"] { color: #1A120B !important; }
/* Acessibilidade: as cores da marca (laranja vivo / D94A05) sobre fundo CLARO (cards brancos
   e secoes #F6F2EC) davam <4.5:1. Escurece SO nesses contextos claros; o laranja vivo sobre
   fundo escuro (que passa e e a identidade) fica intacto. */
[style*="background:#FFFFFF"] [style*="color:#D94A05"],
[style*="background:#FFFFFF"] [style*="color:#F75C0D"],
[style*="background:#F6F2EC"] [style*="color:#D94A05"],
[style*="background:#F6F2EC"] [style*="color:#F75C0D"] { color: #B83B00 !important; }
/* Texto sobre a faixa laranja de CTA: #4A1F08 raspava em 4.35:1 -> escurece p/ ~5.7:1 */
[style*="color:#4A1F08"] { color: #1A120B !important; }

/* ================= RESPONSIVO (colapso do layout inline, forma SEM espaco) ========= */
@media (max-width: 860px) {
  [style*="max-width:1240px"], [style*="max-width:1120px"], [style*="max-width:1080px"], [style*="max-width:900px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .g5-acc { grid-template-columns: 1fr !important; }
  iframe, video { max-width: 100% !important; }
  h1 { font-size: clamp(38px, 11vw, 60px) !important; }
  h2 { font-size: clamp(30px, 8vw, 46px) !important; }
}

/* ================= LEGIBILIDADE (fonte de corpo maior; reforco no mobile) ========= */
[style*="font-size:14.5px"] { font-size: 15.5px; }
[style*="font-size:15px"]   { font-size: 16px; }
[style*="font-size:15.5px"] { font-size: 16.5px; }
[style*="font-size:16px"]   { font-size: 16.5px; }
[style*="font-size:16.5px"] { font-size: 17.5px; }
[style*="font-size:17px"]   { font-size: 18px; }
[style*="font-size:19px"]   { font-size: 20px; }
@media (max-width: 860px) {
  [style*="font-size:14.5px"], [style*="font-size:15px"], [style*="font-size:15.5px"] { font-size: 16.5px !important; }
  [style*="font-size:16px"], [style*="font-size:16.5px"] { font-size: 17.5px !important; }
  [style*="font-size:17px"] { font-size: 18px !important; }
  [style*="font-size:19px"], [style*="font-size:20px"] { font-size: 19px !important; }
}