/* page-seo.css
   Estilos exclusivos da página /seo-e-seguranca
   Componentes reutilizáveis já estão em 04-components.css
   ─────────────────────────────────────────────────────── */

.service-hero--seo .service-hero__bg {
  background-image: url("../img/seo.webp");
}

/* =========================================================
   1. OVERRIDE DE VARIÁVEIS GLOBAIS (:root)
========================================================= */
:root {
  /* Backgrounds baseados em #000A15 */
  --oco-bg-1: #000A15;
  --oco-bg-2: #001226;
  --oco-bg-3: #001A3A;

  /* Cards e Superfícies */
  --oco-card: #001226;
  --oco-card-alpha: rgba(0, 18, 38, 0.86);

  /* Ajuste de textos e bordas para tons frios */
  --oco-text: #B4C4D9;
  --oco-text-strong: #EAF0F6;
  --oco-muted: #7E92A8;
  --oco-border: #425A76;

  /* Accent Azul #4DA3FF */
  --oco-accent: #4DA3FF;
  --oco-accent-dark: #2080DF;
  --oco-accent-soft: rgba(77, 163, 255, 0.05);

  /* Sombras atualizadas para o RGB do novo accent (77, 163, 255) */
  --oco-shadow-plan:
    0 0 0 1px rgba(77, 163, 255, 0.42),
    0 0 28px rgba(77, 163, 255, 0.16),
    inset 0 0 18px rgba(77, 163, 255, 0.04);
}

/* =========================================================
   2. OVERRIDE DE CLASSES COM RGBA() HARDCODED
   Como o arquivo 04-components.css usa RGBs fixos em vez
   de variáveis para opacidade, precisamos sobrescrevê-los.
========================================================= */

/* Header & Nav */
.site-header {
  background: rgba(0, 10, 21, 0.78);
  box-shadow: inset 0 -1px 0 rgba(77, 163, 255, 0.45);
}
.site-header__toggle {
  border-color: rgba(77, 163, 255, 0.32);
}

@media (max-width: 960px) {
  .mobile-nav {
    background: rgba(0, 10, 21, 0.98);
    box-shadow:
      inset 0 1px 0 rgba(77, 163, 255, 0.12),
      inset 0 -1px 0 rgba(77, 163, 255, 0.12);
  }
}

/* Buttons */
.btn-primary:hover {
  box-shadow: 0 10px 26px rgba(77, 163, 255, 0.18);
}
.btn-secondary:hover {
  background: rgba(77, 163, 255, 0.08);
}

/* Cards & Tags */
.card {
  border-color: rgba(66, 90, 118, 0.28);
}
.card-plan-featured {
  border-color: rgba(77, 163, 255, 0.52);
}
.tag-list li {
  border-color: rgba(77, 163, 255, 0.18);
  background: rgba(77, 163, 255, 0.04);
}

/* Footer */
.site-footer,
.site-footer__bottom {
  border-top-color: rgba(66, 90, 118, 0.24);
}

/* Service Hero (Gradientes de Fundo) */
.service-hero::before {
  background:
    linear-gradient(
      90deg,
      rgba(0, 10, 21, 0.96) 0%,
      rgba(0, 10, 21, 0.82) 38%,
      rgba(0, 10, 21, 0.35) 72%,
      rgba(0, 10, 21, 0.06) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 10, 21, 0.10) 0%,
      rgba(0, 10, 21, 0.72) 100%
    );
}

/* Service Sticky Card */
.service-sticky-card {
  border-color: rgba(77, 163, 255, 0.06);
  background: rgba(0, 18, 38, 0.88);
  box-shadow:
    0 0 1.75rem rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(77, 163, 255, 0.025);
}

/* Process List */
.process-list li {
  border-color: rgba(66, 90, 118, 0.42);
  background: rgba(0, 18, 38, 0.58);
}
.process-list span {
  color: rgba(66, 90, 118, 0.56);
}

/* Content & Final CTA Cards */
.content-cta-card,
.final-cta-card {
  border-color: rgba(77, 163, 255, 0.04);
  background:
    radial-gradient(circle at 50% 0%, rgba(77, 163, 255, 0.045), transparent 38%),
    rgba(0, 18, 38, 0.86);
}
.final-cta-card::before {
  background:
    linear-gradient(90deg, transparent, rgba(77, 163, 255, 0.035), transparent),
    radial-gradient(circle at 50% 100%, rgba(77, 163, 255, 0.055), transparent 42%);
}

/* FAQ */
.faq-item {
  border-color: rgba(66, 90, 118, 0.58);
  background: rgba(0, 18, 38, 0.72);
}
.faq-item::before {
  background:
    linear-gradient(90deg, rgba(77, 163, 255, 0.06), transparent 34%),
    radial-gradient(circle at 0% 0%, rgba(77, 163, 255, 0.11), transparent 32%);
}
.faq-item[open] {
  border-color: rgba(77, 163, 255, 0.42);
  background: rgba(0, 18, 38, 0.88);
  box-shadow:
    0 0 0 1px rgba(77, 163, 255, 0.08),
    0 0 1.5rem rgba(77, 163, 255, 0.06);
}
.faq-item summary::after {
  border-color: rgba(77, 163, 255, 0.22);
}
.faq-item[open] summary::after {
  border-color: rgba(77, 163, 255, 0.48);
  background: rgba(77, 163, 255, 0.06);
}