/* ============================================================
   RendaPerto · Site institucional · Folha de estilo geral
   Direção: Canteiro Moderno. Extraída dos artboards de largura
   fixa (inicio-desktop.html 1280px, inicio-celular.html 390px),
   convertida em classes reutilizáveis e responsivas.

   Mobile-first: o layout do artboard celular é o estado base;
   o do desktop entra no @media (min-width: 900px).
   Blocos chapados, borda viva 2px, raio 0 a 4px, ZERO sombra
   suave. NO MÁXIMO UMA listra de obra por página (a faixa
   diagonal animada logo abaixo do herói).
   Prefixos: rp- (kit da marca) e site- (estrutura do site).
   ============================================================ */

:root {
  /* --- 1. Cores brutas (paleta da direção) ------------------- */
  --rp-verde-profundo: #0E2A1D;
  --rp-amarelo:        #FACC15;
  --rp-verde-vivo:     #16A34A;
  --rp-off-white:      #F4F4F0;
  --rp-branco:         #FFFFFF;
  --rp-vermelho:       #C2362B;
  --rp-verde-corpo:    #20342A;
  --rp-verde-apoio:    #41564A;
  --rp-verde-apoio-claro: #B9C6BD;

  /* --- 2. Cores semânticas ---------------------------------- */
  --rp-cor-fundo:              var(--rp-off-white);
  --rp-cor-superficie:         var(--rp-branco);
  --rp-cor-escura:             var(--rp-verde-profundo);
  --rp-cor-texto:              var(--rp-verde-profundo);
  --rp-cor-texto-corpo:        var(--rp-verde-corpo);
  --rp-cor-texto-apoio:        var(--rp-verde-apoio);
  --rp-cor-texto-sobre-escuro: var(--rp-off-white);
  --rp-cor-apoio-sobre-escuro: var(--rp-verde-apoio-claro);
  --rp-cor-acao:               var(--rp-amarelo);
  --rp-cor-texto-sobre-acao:   var(--rp-verde-profundo);
  --rp-cor-borda:              var(--rp-verde-profundo);
  --rp-cor-foco:               var(--rp-verde-profundo);

  /* --- 3. Tipografia ---------------------------------------- */
  --rp-fonte-display: 'Archivo Black', 'Arial Black', sans-serif;
  --rp-fonte-texto:   'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --rp-esp-display: -0.01em;
  --rp-esp-botao:    0.02em;

  /* --- 4. Bordas ------------------------------------------- */
  --rp-borda-viva: 2px solid var(--rp-cor-borda);

  /* --- 5. Listra de obra (assinatura, uma por página) ------ */
  --rp-listra: repeating-linear-gradient(-45deg,
      var(--rp-amarelo) 0 12px,
      var(--rp-verde-profundo) 12px 24px);
  --rp-listra-tile: 48px;

  /* --- 6. Foco, toque, medidas ----------------------------- */
  --rp-foco-anel:   3px solid var(--rp-cor-foco);
  --rp-foco-offset: 2px;
  --rp-toque-minimo: 48px;
  --rp-cabecalho-altura: 64px; /* barra do celular; muda no desktop */
  --rp-largura-max: 1192px;    /* 1280 do artboard - 88 de margem lateral */
}

/* ============================================================
   RESET MÍNIMO
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--rp-cor-fundo);
  color: var(--rp-cor-texto-corpo);
  font: 400 16px/1.5 var(--rp-fonte-texto);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* o corpo nunca rola na horizontal */
}
img, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: var(--rp-foco-anel);
  outline-offset: var(--rp-foco-offset);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Pular pro conteúdo (acessibilidade) */
.site-pular {
  position: absolute;
  left: -999px; top: 0;
  z-index: 100;
  background: var(--rp-amarelo);
  color: var(--rp-verde-profundo);
  padding: 12px 18px;
  font: 700 16px/1.2 var(--rp-fonte-texto);
  text-decoration: none;
}
.site-pular:focus { left: 8px; top: 8px; }

/* ============================================================
   CONTEXTO ESCURO (herói, seção escura, rodapé)
   ============================================================ */
.rp-sobre-escuro {
  background: var(--rp-cor-escura);
  color: var(--rp-cor-texto-sobre-escuro);
  --rp-cor-foco: var(--rp-amarelo);
}

/* ============================================================
   CONTAINER
   ============================================================ */
.site-container {
  max-width: var(--rp-largura-max);
  margin: 0 auto;
}

/* ============================================================
   CABEÇALHO FIXO (fundo claro) + NAVEGAÇÃO
   ============================================================ */
.site-cabecalho {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--rp-branco);
  border-bottom: var(--rp-borda-viva);
}
.site-cabecalho-bar {
  max-width: var(--rp-largura-max);
  margin: 0 auto;
  min-height: var(--rp-cabecalho-altura);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.site-marca {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  flex: none;
}
.site-marca img { height: 26px; width: auto; display: block; }

/* Nav de escritório (some no celular, vira painel) */
.site-nav {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--rp-branco);
  border-bottom: var(--rp-borda-viva);
  display: none;
}
.site-nav.aberto { display: block; }
.site-nav-links {
  list-style: none;
  margin: 0 auto;
  padding: 8px 16px 14px;
  max-width: var(--rp-largura-max);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.site-nav-links a {
  display: flex;
  align-items: center;
  min-height: var(--rp-toque-minimo);
  padding: 6px 8px;
  font: 700 16px/1.2 var(--rp-fonte-texto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--rp-verde-apoio);
  text-decoration: none;
}
.site-nav-links a[aria-current="page"] {
  color: var(--rp-verde-profundo);
  box-shadow: inset 0 -3px 0 var(--rp-amarelo);
}
.site-nav-cta { margin-top: 8px; }
.site-nav-cta .rp-btn { width: 100%; }

/* Botão "Baixar" curtinho que fica na barra no celular */
.site-baixar-mobile {
  flex: none;
  background: var(--rp-amarelo);
  color: var(--rp-verde-profundo);
  border: var(--rp-borda-viva);
  padding: 9px 12px;
  font: 700 13px/1 var(--rp-fonte-texto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.site-hamburguer {
  flex: none;
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rp-branco);
  border: var(--rp-borda-viva);
  border-radius: 0;
  color: var(--rp-verde-profundo);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.site-hamburguer svg { display: block; }
.site-hamburguer .icone-fechar { display: none; }
.site-hamburguer[aria-expanded="true"] .icone-abrir { display: none; }
.site-hamburguer[aria-expanded="true"] .icone-fechar { display: block; }

/* O corpo compensa a altura do cabeçalho fixo */
.site-corpo { padding-top: var(--rp-cabecalho-altura); }

/* ============================================================
   LISTRA DE OBRA (única da página, abaixo do herói)
   ============================================================ */
/* A listra e um repeating-linear-gradient CONTINUO (sem background-size): assim
   ela e uma fita so, inteirica, sem emenda. O passo da animacao (33.94px = 24px
   de periodo dividido por sen 45) e exatamente UM periodo da diagonal, entao a
   marcha tambem fecha sem pulo. Nao voltar a por background-size aqui: um tile
   que nao seja multiplo de 33.94px cria a emenda a cada N px. */
@keyframes rp-listra-corre {
  from { background-position: 0 0; }
  to   { background-position: 33.94px 0; }
}
.rp-listra {
  height: 14px;
  background: var(--rp-listra);
  border-bottom: var(--rp-borda-viva);
  animation: rp-listra-corre 3.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rp-listra { animation: none; }
}

/* ============================================================
   SEÇÕES
   ============================================================ */
.rp-secao { padding: 34px 20px; }
.rp-secao--escura {
  background: var(--rp-cor-escura);
  color: var(--rp-cor-texto-sobre-escuro);
  --rp-cor-foco: var(--rp-amarelo);
}
.rp-secao > .site-container { width: 100%; }

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, .rp-titulo-gigante {
  font: 400 clamp(36px, 8.2vw, 64px)/1.03 var(--rp-fonte-display);
  letter-spacing: var(--rp-esp-display);
  text-transform: uppercase;
  color: var(--rp-cor-texto);
}
h1 .rp-realce, .rp-titulo-gigante .rp-realce { color: var(--rp-amarelo); }

h2, .rp-titulo {
  font: 400 clamp(24px, 5.4vw, 34px)/1.1 var(--rp-fonte-display);
  letter-spacing: var(--rp-esp-display);
  text-transform: uppercase;
  color: var(--rp-cor-texto);
}
.rp-secao--escura h2, .rp-sobre-escuro h2,
.rp-secao--escura .rp-titulo, .rp-sobre-escuro .rp-titulo {
  color: var(--rp-cor-texto-sobre-escuro);
}
h2 .rp-realce, .rp-titulo .rp-realce { color: var(--rp-amarelo); }

.rp-titulo-sub {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--rp-cor-texto-apoio);
}
.rp-secao--escura .rp-titulo-sub { color: var(--rp-cor-apoio-sobre-escuro); }

.rp-lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--rp-cor-apoio-sobre-escuro);
}

/* Link sublinhado de amarelo (chamada secundária) */
.rp-link {
  display: inline-block;
  margin-top: 18px;
  font: 700 15px/1.2 var(--rp-fonte-texto);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--rp-verde-profundo);
  text-decoration: none;
  border-bottom: 3px solid var(--rp-amarelo);
  padding-bottom: 2px;
}
.rp-secao--escura .rp-link, .rp-sobre-escuro .rp-link {
  color: var(--rp-cor-texto-sobre-escuro);
}
.rp-link:hover { border-bottom-color: var(--rp-verde-vivo); }

/* ============================================================
   BOTÕES
   ============================================================ */
.rp-btn, .rp-btn-contorno, .rp-btn-escuro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--rp-toque-minimo);
  padding: 0 22px;
  border-radius: 0;
  font: 700 15px/1.2 var(--rp-fonte-texto);
  text-transform: uppercase;
  letter-spacing: var(--rp-esp-botao);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Primário amarelo com borda viva */
.rp-btn {
  background: var(--rp-amarelo);
  color: var(--rp-verde-profundo);
  border: var(--rp-borda-viva);
}
/* Secundário contornado (para fundo escuro) */
.rp-btn-contorno {
  background: transparent;
  color: var(--rp-cor-texto-sobre-escuro);
  border: 2px solid var(--rp-off-white);
}
/* Verde-profundo (dentro do card amarelo) */
.rp-btn-escuro {
  background: var(--rp-verde-profundo);
  color: var(--rp-off-white);
  border: var(--rp-borda-viva);
}
.rp-btn:active, .rp-btn-contorno:active, .rp-btn-escuro:active {
  transform: translate(1px, 1px);
}
.rp-btn .seta, .rp-btn-contorno .seta, .rp-btn-escuro .seta { flex: none; }

/* Botão-herói: mais alto e em Archivo Black */
.rp-btn--heroi {
  min-height: 60px;
  font: 400 16px/1.1 var(--rp-fonte-display);
  letter-spacing: 0;
}
.rp-btn-contorno.rp-btn--heroi { font-family: var(--rp-fonte-texto); font-weight: 700; }

.rp-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

/* ============================================================
   HERÓI
   ============================================================ */
.site-heroi { padding: 36px 20px 32px; }
.site-heroi-tag {
  display: inline-block;
  background: var(--rp-amarelo);
  color: var(--rp-verde-profundo);
  padding: 5px 10px;
  font: 700 13px/1.2 var(--rp-fonte-texto);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.site-heroi h1 { margin-top: 16px; color: var(--rp-off-white); }
.site-heroi-sub {
  margin-top: 14px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--rp-cor-apoio-sobre-escuro);
}
/* Cartão VERIFICADO ao lado (ou abaixo) do herói */
.site-heroi-selo {
  border: 2px solid var(--rp-amarelo);
  padding: 22px 20px;
  margin-top: 22px;
  text-align: center;
}
.site-heroi-selo-titulo {
  margin-top: 10px;
  font: 400 20px/1 var(--rp-fonte-display);
  text-transform: uppercase;
  color: var(--rp-off-white);
}
.site-heroi-selo p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--rp-cor-apoio-sobre-escuro);
}

/* ============================================================
   CARDS (borda viva 2px)
   ============================================================ */
.rp-cards {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.rp-card {
  background: var(--rp-branco);
  border: var(--rp-borda-viva);
  border-radius: 0;
  padding: 20px;
  color: var(--rp-cor-texto-apoio);
}
.rp-card-num {
  display: block;
  font: 400 40px/1 var(--rp-fonte-display);
  color: var(--rp-verde-profundo);
}
.rp-card h3, .rp-card-titulo {
  margin-top: 8px;
  font: 400 18px/1.1 var(--rp-fonte-display);
  text-transform: uppercase;
  color: var(--rp-verde-profundo);
}
.rp-card p { margin-top: 8px; font-size: 15px; line-height: 1.5; }

/* Card destacado (amarelo chapado) */
.rp-card--amarelo {
  background: var(--rp-amarelo);
  border-color: var(--rp-verde-profundo);
  color: var(--rp-verde-corpo);
}
.rp-card--amarelo .rp-card-titulo, .rp-card--amarelo h3 { color: var(--rp-verde-profundo); }

/* ============================================================
   LISTA DE VERIFICAÇÃO (seção escura de segurança)
   ============================================================ */
.rp-checks {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--rp-cor-apoio-sobre-escuro);
}
.rp-checks li { display: flex; gap: 10px; }
.rp-checks svg { flex: none; margin-top: 2px; }

/* Selo hexagonal com legenda */
.rp-hex {
  text-align: center;
  margin-bottom: 4px;
}
.rp-hex-legenda {
  margin-top: 10px;
  font: 400 16px/1.2 var(--rp-fonte-display);
  text-transform: uppercase;
  color: var(--rp-amarelo);
}

/* ============================================================
   CHIPS (categorias)
   ============================================================ */
.rp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.rp-chip {
  border: var(--rp-borda-viva);
  background: var(--rp-branco);
  padding: 9px 14px;
  font: 700 14px/1 var(--rp-fonte-texto);
  text-transform: uppercase;
  color: var(--rp-verde-profundo);
}

/* ============================================================
   FAIXA BRANCA (banda do piloto, borda em cima e embaixo)
   ============================================================ */
.rp-faixa-branca {
  background: var(--rp-branco);
  border-top: var(--rp-borda-viva);
  border-bottom: var(--rp-borda-viva);
  padding: 28px 20px;
}
.rp-faixa-branca-conteudo {
  max-width: var(--rp-largura-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.rp-faixa-branca .site-heroi-selo-titulo,
.rp-faixa-branca-titulo {
  font: 400 22px/1.1 var(--rp-fonte-display);
  text-transform: uppercase;
  color: var(--rp-verde-profundo);
}
.rp-faixa-branca p {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--rp-cor-texto-apoio);
  max-width: 760px;
}
.rp-faixa-branca-pino { display: flex; align-items: center; gap: 14px; }
.rp-faixa-branca-pino img { width: 40px; height: auto; flex: none; }

/* ============================================================
   CHAMADA FINAL (seção escura, centralizada)
   ============================================================ */
.rp-cta-final { text-align: center; }
.rp-cta-final .rp-titulo, .rp-cta-final h2 {
  font-size: clamp(29px, 7vw, 44px);
  line-height: 1.06;
  max-width: 820px;
  margin: 0 auto;
}
.rp-cta-final p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--rp-cor-apoio-sobre-escuro);
}
.rp-cta-final .rp-btn { margin-top: 22px; }

/* ============================================================
   RODAPÉ (fundo escuro, borda superior amarela)
   ============================================================ */
.site-rodape {
  background: var(--rp-cor-escura);
  color: var(--rp-cor-apoio-sobre-escuro);
  border-top: 3px solid var(--rp-amarelo);
  padding: 34px 20px 24px;
}
.site-rodape-grade {
  max-width: var(--rp-largura-max);
  margin: 0 auto;
  display: grid;
  gap: 26px;
}
.site-rodape-marca img { height: 30px; width: auto; display: block; }
.site-rodape-sobre {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  max-width: 320px;
}
.site-rodape-selo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font: 700 13px/1.2 var(--rp-fonte-texto);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rp-cor-texto-sobre-escuro);
}
.site-rodape-selo svg { flex: none; }
.site-rodape-col h2 {
  font: 700 13px/1.2 var(--rp-fonte-texto);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rp-off-white);
  margin-bottom: 4px;
}
.site-rodape-col ul { list-style: none; margin: 0; padding: 0; }
.site-rodape-col a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 15px;
  color: var(--rp-cor-apoio-sobre-escuro);
  text-decoration: none;
}
.site-rodape-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-rodape-email {
  display: inline-block;
  margin-top: 6px;
  font: 700 15px/1.4 var(--rp-fonte-texto);
  color: var(--rp-amarelo);
  text-decoration: none;
}
.site-rodape-email:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-rodape-base {
  max-width: var(--rp-largura-max);
  margin: 30px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(185, 198, 189, 0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================
   TELAS LARGAS (o layout do artboard desktop 1280px)
   ============================================================ */
@media (min-width: 900px) {
  :root { --rp-cabecalho-altura: 78px; }

  /* Cabeçalho: nav vira linha, some o hamburguer e o "Baixar" curto */
  .site-cabecalho-bar { padding: 0 44px; gap: 26px; }
  .site-marca img { height: 30px; }
  .site-hamburguer, .site-baixar-mobile { display: none; }
  .site-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 24px;
    background: transparent;
    border-bottom: 0;
    margin-left: auto;
  }
  .site-nav-links {
    flex-direction: row;
    align-items: center;
    gap: 22px;
    padding: 0;
    max-width: none;
  }
  .site-nav-links a { min-height: 0; padding: 6px 0; font-size: 15px; }
  .site-nav-cta { margin-top: 0; }
  .site-nav-cta .rp-btn { width: auto; padding: 0 22px; }

  /* Seções mais arejadas */
  .rp-secao { padding: 64px 44px; }
  .rp-faixa-branca { padding: 36px 44px; }
  .rp-listra { height: 18px; }

  /* Herói em duas colunas: texto + cartão VERIFICADO */
  .site-heroi { padding: 74px 44px 66px; }
  .site-heroi-grade {
    max-width: var(--rp-largura-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 56px;
    align-items: center;
  }
  .site-heroi h1 { font-size: 64px; margin-top: 22px; }
  .site-heroi-sub { font-size: 19px; margin-top: 20px; }
  .site-heroi-selo { margin-top: 0; padding: 30px 26px; }
  .rp-acoes { flex-direction: row; margin-top: 32px; }

  /* Cards em três colunas */
  .rp-cards--3 { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }

  /* Bloco de segurança: hexágono grande + texto */
  .site-seguranca-grade {
    max-width: var(--rp-largura-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 52px;
    align-items: center;
  }
  .rp-checks { grid-template-columns: 1fr 1fr; gap: 12px 22px; margin-top: 24px; }

  /* Bloco trabalhar: texto + card amarelo */
  .site-trabalhar-grade {
    max-width: var(--rp-largura-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 52px;
    align-items: center;
  }
  .site-trabalhar-grade .rp-card--amarelo { padding: 28px 26px; margin: 0; }

  /* Faixa branca do piloto em linha */
  .rp-faixa-branca-conteudo { flex-direction: row; align-items: center; gap: 28px; }
  .rp-faixa-branca-pino { flex: 1; }
  .rp-faixa-branca-conteudo > .rp-link { margin: 0; flex: none; }

  /* Rodapé em três colunas */
  .site-rodape { padding: 46px 44px 28px; }
  .site-rodape-grade { grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; }
  .site-rodape-base { flex-direction: row; justify-content: space-between; }
}