/* ==========================================================================
   OKSEG · Base — reset, tipografia e utilitários
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* [hidden] precisa vencer displays de componentes (ex.: .btn { display:inline-flex }) */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-2));
  -webkit-text-size-adjust: 100%;
  /* impede que o menu off-canvas (fixed, translateX 100%) gere rolagem lateral */
  overflow-x: hidden;
  /* nossos próprios estados :active substituem o flash cinza de toque no mobile */
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-corpo);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--grafite);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* seleção de texto na cor da marca */
::selection {
  background: var(--okseg-laranja);
  color: var(--branco);
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; border: 0; background: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

/* --- Títulos ------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  line-height: 1.15;
  color: var(--preto);
  text-wrap: balance;
  /* tracking levemente negativo dá um ar mais premium ao Montserrat pesado */
  letter-spacing: -.01em;
}

h1 { font-size: var(--fs-h1); font-weight: 800; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; }

p { text-wrap: pretty; }

/* Assinatura tipográfica: peso leve + peso pesado na mesma frase.
   specs/design.md § 4 */
.leve   { font-weight: 300; color: var(--grafite); }
.forte  { font-weight: 800; }
.destaque  { color: var(--okseg-laranja); }

/* --- Layout -------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.secao { padding-block: var(--space-5); }

.secao--clara  { background: var(--cinza-claro); }
.secao--escura { background: var(--grafite-dark); color: var(--branco); }
.secao--escura h2,
.secao--escura h3 { color: var(--branco); }
.secao--escura .leve { color: rgba(255, 255, 255, .75); }

/* Título centralizado de seção — usa a assinatura tipográfica (.leve/.forte) */
.secao__titulo {
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
  font-size: var(--fs-h2);
  text-align: center;
}

/* Se vier um parágrafo logo abaixo, o título encosta nele */
.secao__titulo:has(+ .secao__intro) { margin-bottom: var(--space-3); }

.secao__intro {
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-align: center;
  color: var(--cinza-texto);
}

.secao--escura .secao__intro { color: rgba(255, 255, 255, .72); }

@media (min-width: 768px) {
  .secao { padding-block: var(--space-7); }
}

/* --- Acessibilidade ------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--okseg-laranja);
  outline-offset: 3px;
  border-radius: 2px;
}

.secao--escura :focus-visible,
.hero :focus-visible { outline-color: var(--branco); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular-para-conteudo {
  position: absolute;
  top: -100px; left: var(--gutter);
  z-index: 200;
  padding: var(--space-2) var(--space-3);
  background: var(--okseg-laranja-forte);
  color: var(--branco);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top var(--transicao);
}

.pular-para-conteudo:focus { top: 0; }

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

.animacoes-pausadas { scroll-behavior: auto; }
.animacoes-pausadas *, .animacoes-pausadas *::before, .animacoes-pausadas *::after {
  animation-play-state: paused !important;
  transition-duration: .01ms !important;
}

/* ==========================================================================
   IMPRESSÃO
   O público principal é síndico — e decisão de condomínio se toma em
   ASSEMBLEIA, no papel. A página de Planos impressa é material de reunião.
   Aqui a tela vira documento: sem navegação, sem botão, sem fundo preto
   gastando tinta, e com o telefone da central sobrevivendo no papel.
   ========================================================================== */

@media print {

  @page { margin: 1.5cm; }

  html { font-size: 11pt; }

  body {
    background: #fff;
    color: #000;
  }

  /* --- fora do papel: tudo que só serve na tela --- */
  .nav-principal,
  .cabecalho__acoes,
  .btn-hamburguer,
  .painel-mobile,
  .cortina,
  .whatsapp-flutuante,
  .ao-topo,
  .simulador,
  .pular-para-conteudo,
  .hero__navegacao,
  .faixa-cta,
  .badge-secao,
  .redes,
  .btn {
    display: none !important;
  }

  /* colunas de links do rodapé saem inteiras — senão sobra o título órfão
     ("SOLUÇÕES", "INSTITUCIONAL") sem nada embaixo. A coluna de contato fica. */
  .rodape__grid > div:has(> .rodape__links) { display: none !important; }

  /* o cabeçalho vira apenas a marca, como timbre do documento */
  .cabecalho {
    position: static;
    box-shadow: none;
    border-bottom: 1px solid #ccc;
  }

  /* --- fundos escuros viram papel branco --- */
  .secao--escura,
  .hero,
  .pagina-cabecalho,
  .rodape {
    background: #fff !important;
    color: #000 !important;
  }

  /* a faixa preta do título da página precisa virar cabeçalho de documento */
  .pagina-cabecalho {
    padding-block: var(--space-3) !important;
    border-bottom: 2px solid #000;
  }

  /* camada decorativa que pinta o gradiente escuro atrás do título */
  .hero__fundo,
  .pagina-cabecalho::before,
  .pagina-cabecalho::after,
  .hero::before,
  .hero::after { display: none !important; }

  .secao--escura h2, .secao--escura h3, .secao--escura p,
  .hero h1, .hero p,
  .pagina-cabecalho h1, .pagina-cabecalho p,
  .rodape, .rodape p {
    color: #000 !important;
  }

  /* migalha de pão não faz sentido no papel */
  .miolo-de-pao { display: none !important; }

  /* laranja da marca fica, mas só onde é título — economiza tinta */
  .destaque { color: #000 !important; font-weight: 800; }

  /* Texto claro existe porque vive sobre fundo escuro. No papel o fundo
     vira branco e ele sumiria — então tudo que é claro escurece aqui. */
  .leve,
  .secao--escura .leve,
  .pagina-cabecalho .leve,
  .hero .leve,
  .secao--escura .secao__intro,
  .rodape__slogan { color: #333 !important; }

  .secao--escura .forte,
  .pagina-cabecalho .forte,
  .hero .forte { color: #000 !important; }

  /* número do passo: o círculo laranja não é impresso, então o número
     precisa de contorno próprio para continuar legível */
  .passo-como__num {
    color: #000 !important;
    background: none !important;
    border: 2px solid #000;
  }

  /* botão de loja de app não faz sentido no papel */
  .link-loja,
  .btn-store { display: none !important; }

  /* --- o que não pode partir no meio da página --- */
  .plano,
  .card-solucao,
  .modulo,
  .passo-como,
  .diferencial,
  .faq-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* --- economia de tinta e clareza --- */
  .card-solucao,
  .plano,
  .tile-sol {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .card-solucao__icone,
  .tile-sol .card-solucao__icone,
  .diferencial__icone {
    background: none !important;
    box-shadow: none !important;
    color: #000 !important;
  }

  /* imagens decorativas saem; as de conteúdo encolhem */
  .hero__painel,
  .apps__mockup { display: none !important; }

  img { max-width: 50% !important; }
  .marca img { max-width: 180px !important; }

  /* --- o telefone precisa sobreviver no papel --- */
  .rodape__contatos {
    display: block !important;
    margin-top: var(--space-3);
    font-size: 10pt;
  }

  .rodape__contatos svg { display: none !important; }

  /* sem reveal: nada pode imprimir invisível */
  .reveal { opacity: 1 !important; transform: none !important; }
}