@charset "UTF-8";
/* =========================
   TOKENS / VARIÁVEIS
   ========================= */
/* 
  Variáveis globais do tema.
  Centraliza cores, espaçamentos, raios, sombras e medidas estruturais.
*/
:root {
  /* Cores principais da marca */
  --wrpd-primary: #0f6472;
  --wrpd-primary-dark: #00505b;
  --wrpd-primary-light: #eef7f8;
  /* Cor secundária para destaques e CTAs */
  --wrpd-secondary: #dd6b20;
  --wrpd-secondary-dark: #b44c16;
  --wrpd-secondary-light: #f4d4ad;
  /* Cores de texto */
  --wrpd-text: #2d3748;
  --wrpd-text-soft: #4a5560;
  --wrpd-text-muted: #5b6870;
  /* Superfícies e bordas */
  --wrpd-border: #dbe6e8;
  --wrpd-bg-soft: #cae8f0;
  --wrpd-white: #ffffff;
  --wrpd-background: #f5f7fb;
  /* Cores auxiliares usadas em cards, banners e ícones */
  --wrpd-blue: #2b6cb0;
  --wrpd-purple: #6b46c1;
  --wrpd-teal: #0f766e;
  --wrpd-green: #2f855a;
  --wrpd-cyan: #0284c7;
  --wrpd-orange: #dd6b20;
  --wrpd-red: #c53030;
  /* Medidas estruturais */
  --wrpd-wrapper-padding: 24px;
  --wrpd-header-min-height: 78px;
  --wrpd-mobile-menu-width: 240px;
  /* Escala de espaçamento */
  --wrpd-space-1: 4px;
  --wrpd-space-2: 6px;
  --wrpd-space-3: 8px;
  --wrpd-space-4: 10px;
  --wrpd-space-5: 12px;
  --wrpd-space-6: 14px;
  --wrpd-space-7: 16px;
  --wrpd-space-8: 24px;
  --wrpd-space-9: 32px;
  --wrpd-space-10: 40px;
  --wrpd-space-11: 48px;
  --wrpd-space-12: 56px;
  --wrpd-space-13: 100px;
  /* Raios de borda */
  --wrpd-radius-sm: 8px;
  --wrpd-radius-md: 10px;
  --wrpd-radius-lg: 12px;
  --wrpd-radius-xl: 14px;
  --wrpd-radius-2xl: 16px;
  /* Sombras e transições */
  --wrpd-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  --wrpd-shadow-menu: 0 10px 24px rgba(0, 0, 0, 0.12);
  --wrpd-transition-fast: 0.2s ease;
  /* Breakpoints */
  --wrpd-breakpoint-mobile: 600px;
}

/* =========================
   MIXINS
   ========================= */
/*
  Faz uma seção “sangrar” horizontalmente até as bordas da viewport.
  Útil para hero e banners full width.
*/
/*
  Aplica uma cor sólida de fundo à seção.
  (Não está sendo usado atualmente no site)
*/
/*
  Ajusta a borda superior para ficar igual às demais bordas do card.
  A cor do topo só muda no hover (via .card--link:hover).
*/
/*
  Aplica cor ao ícone do card.
*/
/* =========================
   BASE E ESTABILIDADE
   ========================= */
/*
  Garante modelo de caixa previsível no site inteiro.
  Assim padding e border entram no cálculo da largura.
*/
html {
  box-sizing: border-box;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

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

/*
  Remove margens e paddings padrão do navegador.
  Sem isso o body mantém margin: 8px por padrão.
*/
html,
body {
  margin: 0;
  padding: 0;
}

/*
  Define comportamento global do body.
*/
body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--wrpd-text);
  background-color: var(--wrpd-background);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/*
  Padding horizontal padrão usado pelos wrappers do tema.
*/
.wrapper {
  padding-left: var(--wrpd-wrapper-padding);
  padding-right: var(--wrpd-wrapper-padding);
}

/*
  Remove o espaçamento padrão entre o header e o conteúdo,
  já que os banners assumem esse papel visual.
*/
.page-content {
  padding-top: 0;
}

/* =========================
   LAYOUT / WRAPPERS
   ========================= */
/*
  Wrapper base do site.
  Mantém o conteúdo centralizado e com respiro lateral consistente.
*/
.wrapper {
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wrpd-wrapper-padding);
  padding-right: var(--wrpd-wrapper-padding);
  box-sizing: border-box;
}

/*
  Cabeçalho, rodapé, hero, banner e áreas amplas.
*/
.site-header .wrapper,
.site-footer .wrapper,
.hero-container,
.banner-container {
  max-width: 1280px;
}

/*
  Wrapper específico para posts do blog.
  Mantém leitura confortável em textos longos.
*/
.wrapper--post {
  max-width: 1200px;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.post-content {
  flex: 1;
  min-width: 0; /* Permite que o conteúdo quebre se necessário */
}

.post-sidebar {
  width: 300px;
  flex-shrink: 0;
}

/*
  Wrapper específico para páginas de serviço.
  Layout com duas colunas: 2/3 para conteúdo principal, 1/3 para sidebar.
*/
.wrapper--service {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.service-layout {
  display: flex;
  width: 100%;
  gap: 2rem;
}

.service-main {
  flex: 2; /* 2/3 */
  min-width: 0;
}

.service-sidebar {
  flex: 1; /* 1/3 */
  flex-shrink: 0;
}

@media (max-width: 880px) {
  .service-layout {
    flex-direction: column;
  }
  .service-sidebar {
    width: 100%;
  }
}
/* Service sidebar components */
.toc-section {
  margin-bottom: var(--wrpd-space-6);
}

.toc-section h3 {
  margin-top: 0;
  margin-bottom: var(--wrpd-space-4);
  font-size: var(--wrpd-font-size-lg);
}

.toc-list ul {
  list-style: disc;
  padding-left: 1rem;
  margin: 0;
}

.toc-list li {
  margin-bottom: var(--wrpd-space-2);
}

.toc-list li li {
  list-style: circle;
  margin-left: 1rem;
}

.toc-list a {
  color: var(--wrpd-primary);
  text-decoration: none;
}

.toc-list a:hover {
  text-decoration: underline;
}

.cta-box {
  margin-bottom: var(--wrpd-space-6);
}

.service-sidebar .sidebar-box {
  margin-bottom: 1.5rem;
}

.service-sidebar .sidebar-box h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--wrpd-text);
}

.service-sidebar .sidebar-box.cta-box {
  background: var(--wrpd-secondary-light);
  border-radius: var(--wrpd-radius-2xl);
  padding: var(--wrpd-space-9);
}

.service-sidebar .sidebar-box.cta-box h3 {
  margin-top: 0;
}

.partners-section,
.success-cases-section,
.technologies-section,
.services-section,
.external-links-section {
  margin-bottom: var(--wrpd-space-6);
}

.partners-section h3,
.success-cases-section h3,
.technologies-section h3,
.services-section h3,
.external-links-section h3 {
  margin-top: 0;
  margin-bottom: var(--wrpd-space-4);
  font-size: var(--wrpd-font-size-lg);
}

.partners-list,
.technologies-list,
.success-cases-list,
.services-list,
.external-links-list {
  list-style: disc;
  padding-left: 1rem;
  margin: 0;
}

.partners-list li,
.technologies-list li,
.success-cases-list li,
.services-list li,
.external-links-list li {
  margin-bottom: var(--wrpd-space-2);
}

.partners-list a,
.technologies-list a,
.success-cases-list a,
.services-list a,
.external-links-list a {
  color: var(--wrpd-primary);
  text-decoration: none;
}

.partners-list a:hover,
.technologies-list a:hover,
.success-cases-list a:hover,
.services-list a:hover,
.external-links-list a:hover {
  text-decoration: underline;
}

.partners-list li ul,
.technologies-list li ul,
.success-cases-list li ul,
.services-list li ul {
  list-style: circle;
  margin-left: 1.5rem;
}

.partners-list a,
.technologies-list a,
.success-cases-list a,
.services-list a {
  color: var(--wrpd-primary);
  text-decoration: none;
}

.partners-list a:hover,
.technologies-list a:hover,
.success-cases-list a:hover,
.services-list a:hover {
  text-decoration: underline;
}

.page-content {
  padding-bottom: var(--wrpd-space-11);
}

.page-content > :last-child {
  margin-bottom: var(--wrpd-space-9);
}

/* =========================
   HEADER E LOGO
   ========================= */
/*
  Cabeçalho principal do site.
  Fica acima do restante e serve como base visual para a navegação.
  Fundo branco com borda inferior sutil.
*/
.site-header {
  position: relative;
  z-index: 1000;
  background: var(--wrpd-background);
  border-bottom: none;
}

/*
  Organiza logo e navegação no cabeçalho.
  Flexbox para alinhamento horizontal.
*/
.site-header .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--wrpd-header-min-height);
}

/*
  Link/título da marca.
  Garante alinhamento consistente do logo.
*/
.site-title {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 220px;
  line-height: 1;
}

/*
  Logo principal do site.
  Mantém proporções e tamanho consistente.
*/
.site-logo {
  display: block;
  height: 48px;
  width: auto;
}

/* =========================
   MENU / NAVEGAÇÃO
   ========================= */
/*
  Container da navegação principal.
  Posicionamento relativo para controle de z-index.
*/
.site-nav {
  position: relative;
  z-index: 1100;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-end;
}

/*
  Input de controle do menu mobile.
  Fica oculto, mas continua funcional.
*/
.nav-trigger {
  display: none;
}

/*
  Botão do hambúrguer fica oculto no desktop.
  Só aparece em telas menores.
*/
.site-nav label[for=nav-trigger] {
  display: none;
}

/*
  Agrupa os links do menu desktop.
  Layout horizontal para telas grandes.
*/
.site-nav .trigger {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--wrpd-space-1);
}

/*
  Link padrão da navegação.
  Aparência base com cantos arredondados no topo.
*/
.site-nav .page-link {
  display: inline-block;
  padding: var(--wrpd-space-5) var(--wrpd-space-6);
  border-radius: var(--wrpd-radius-md) var(--wrpd-radius-md) 0 0;
  text-decoration: none;
  font-weight: 600;
  color: var(--wrpd-text);
  background: transparent;
  position: relative;
  top: 1px;
  transition: background-color var(--wrpd-transition-fast), color var(--wrpd-transition-fast);
}

/*
  Estado hover dos links do menu.
  Fundo azul claro e cor primária para destaque.
*/
.site-nav .page-link:hover {
  background: var(--wrpd-secondary-light);
  color: var(--wrpd-primary);
  text-decoration: none;
}

/*
  Link ativo da navegação.
  Visualmente encosta no banner.
  Fundo azul sólido quando na página atual.
*/
.site-nav .page-link.is-active {
  background: var(--wrpd-primary);
  color: var(--wrpd-white);
  z-index: 20;
}

/*
  Hover do link ativo.
  Tom mais escuro para feedback visual.
*/
.site-nav .page-link.is-active:hover {
  background: var(--wrpd-primary-dark);
  color: var(--wrpd-white);
}

/*
  Foco visível para acessibilidade.
  Outline azul para navegação por teclado.
*/
.site-nav .page-link:focus-visible,
.site-nav label[for=nav-trigger]:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.text-link-cta:focus-visible {
  outline: 2px solid var(--wrpd-primary);
  outline-offset: 2px;
}

/* =========================
   MENU MOBILE
   ========================= */
@media screen and (max-width: 600px) {
  /*
    Ajusta a altura do wrapper do header no mobile.
  */
  .site-header .wrapper {
    min-height: var(--wrpd-header-min-height);
  }
  /*
    Reposiciona a navegação no layout mobile.
  */
  .site-nav {
    position: relative;
    margin-left: auto;
    align-self: center;
  }
  /*
    Botão do menu mobile.
  */
  .site-nav label[for=nav-trigger] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--wrpd-border);
    border-radius: var(--wrpd-radius-md);
    background: var(--wrpd-white);
    cursor: pointer;
    z-index: 1300;
    position: relative;
  }
  /*
    Hover do botão mobile.
  */
  .site-nav label[for=nav-trigger]:hover {
    background: var(--wrpd-primary-light);
  }
  /*
    Caixa suspensa do menu mobile.
  */
  .site-nav .trigger {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    display: none;
    width: var(--wrpd-mobile-menu-width);
    min-width: var(--wrpd-mobile-menu-width);
    padding: var(--wrpd-space-5);
    background: var(--wrpd-white);
    border: 1px solid var(--wrpd-border);
    border-radius: var(--wrpd-radius-2xl);
    box-shadow: var(--wrpd-shadow-menu);
    z-index: 1200;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--wrpd-space-2);
  }
  /*
    Garante menu fechado por padrão.
  */
  .site-nav input ~ .trigger {
    display: none;
  }
  /*
    Abre o menu quando o checkbox é marcado.
  */
  .site-nav input:checked ~ .trigger {
    display: flex;
  }
  /*
    Link mobile em largura total.
  */
  .site-nav .page-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: var(--wrpd-space-5) var(--wrpd-space-6);
    border-radius: var(--wrpd-radius-md);
    background: transparent;
    color: var(--wrpd-text);
    top: 0;
    text-align: left;
  }
  /*
    Hover no mobile.
  */
  .site-nav .page-link:hover {
    background: var(--wrpd-primary-light);
    color: var(--wrpd-primary);
  }
  /*
    Link ativo no mobile.
  */
  .site-nav .page-link.is-active {
    background: var(--wrpd-primary);
    color: var(--wrpd-white);
    border-radius: var(--wrpd-radius-md);
    top: 0;
    margin: 0;
    padding: var(--wrpd-space-5) var(--wrpd-space-6);
  }
  /*
    Hover do link ativo no mobile.
  */
  .site-nav .page-link.is-active:hover {
    background: var(--wrpd-primary-dark);
    color: var(--wrpd-white);
  }
  /*
    Ícone do botão mobile.
  */
  .menu-icon {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
/* =========================
   HERO HOME
   ========================= */
/*
  Hero principal da home.
  Usa largura total da viewport e reforça a presença institucional da página inicial.
  Gradiente azul como fundo.
*/
.hero-full {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: linear-gradient(135deg, var(--wrpd-primary), #0b8a9b);
  color: var(--wrpd-white);
  padding-top: var(--wrpd-space-13);
  padding-bottom: var(--wrpd-space-13);
  margin-top: 0;
  margin-bottom: var(--wrpd-space-11);
  box-sizing: border-box;
}

/*
  Container interno do hero.
  Usa a mesma lógica estrutural do wrapper do header
  para alinhar o texto com o logo e a navegação.
*/
.hero-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--wrpd-wrapper-padding);
  padding-right: var(--wrpd-wrapper-padding);
  box-sizing: border-box;
}

/*
  Título principal do hero.
  Grande e destacado para impacto visual.
*/
.hero-full h1 {
  font-size: 2.8rem;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--wrpd-white);
}

/*
  Texto de apoio do hero.
  Complementa o título com informações adicionais.
*/
.hero-full p {
  font-size: 1.2rem;
  line-height: 1.7;
  max-width: 760px;
  margin-bottom: 1.5rem;
  color: var(--wrpd-white);
}

/* =========================
   BANNERS DE PÁGINA E POST
   ========================= */
/*
  Banner interno das páginas e páginas de collection.
  Usa largura total e aceita uma ilustração como fundo à direita.
*/
.page-banner {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--wrpd-primary);
  color: var(--wrpd-white);
  padding-top: 76px;
  padding-bottom: 76px;
  margin-bottom: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--wrpd-border);
}

/*
  Variante com imagem de fundo.
  O dado da imagem agora é renderizado em um bloco ao lado do texto.
*/
.page-banner--image {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 260px;
}

/*
  Variações cromáticas opcionais do banner.
  (Não estão sendo usadas atualmente no site)
*/
/*
  Container interno do banner.
  Usa a mesma lógica estrutural do wrapper do header
  para alinhar o texto com o logo e o hero.
*/
.banner-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--wrpd-wrapper-padding);
  padding-right: var(--wrpd-wrapper-padding);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 50%);
  gap: var(--wrpd-space-8);
  align-items: center;
  position: relative;
}

.banner-figure {
  width: 100%;
  min-height: 300px;
  border-radius: var(--wrpd-radius-xl);
  overflow: hidden;
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

/*
  Bloco de texto do banner.
*/
.banner-text {
  max-width: 760px;
  padding-top: 76px;
  padding-bottom: 76px;
  position: relative;
  z-index: 2;
}

/*
  Título principal do banner.
*/
.page-banner h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2.2rem;
  line-height: 1.2;
  color: var(--wrpd-white);
}

/*
  Texto auxiliar do banner e metadados de post.
*/
.page-banner p,
.post-meta-banner {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92) !important;
}

/*
  Ícone opcional exibido acima do título.
*/
.banner-icon {
  margin-bottom: 12px;
  font-size: 28px;
  line-height: 1;
  width: 150px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/*
  Cor do ícone dentro do banner.
*/
.page-banner .banner-icon i {
  color: var(--wrpd-white);
}

/*
  Estilo para logos de parceiros no banner.
*/
.page-banner .banner-icon .banner-partner-logo {
  width: 250px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--wrpd-radius-sm);
}

/* =========================
   RESPONSIVO DO BANNER
   ========================= */
@media screen and (max-width: 900px) {
  .page-banner {
    overflow: hidden;
  }
  .banner-container {
    grid-template-columns: 1fr;
    position: relative;
    padding-left: 0;
    padding-right: 0;
  }
  .banner-text,
  .banner-figure {
    grid-column: 1;
    grid-row: 1;
  }
  .banner-figure {
    min-height: 260px;
    height: 100%;
    z-index: 1;
    filter: brightness(0.65);
    border-radius: 0;
  }
  .banner-text {
    max-width: 100%;
    padding: 48px var(--wrpd-wrapper-padding);
    position: relative;
    z-index: 2;
  }
}
@media screen and (max-width: 600px) {
  /*
    Banner mais compacto no mobile.
  */
  .page-banner {
    margin-bottom: 32px;
  }
  .page-banner--image {
    min-height: 80px; /* 40px * 2 */
  }
  /*
    Título um pouco menor no mobile.
  */
  .page-banner h1 {
    font-size: 2rem;
  }
  /*
    Texto do banner ligeiramente menor no mobile.
  */
  .page-banner p,
  .post-meta-banner {
    font-size: 1rem;
  }
  /*
    Texto usa toda a largura disponível.
  */
  .banner-text {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
/*
  Estilo para breadcrumb no banner.
*/
.breadcrumb {
  margin-top: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
.breadcrumb a {
  color: var(--wrpd-white);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* =========================
   BOTÕES
   ========================= */
/*
  Base visual compartilhada pelos botões principais do site.
  Define aparência comum para btn-primary e btn-secondary.
*/
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: var(--wrpd-space-5) var(--wrpd-space-8);
  border-radius: var(--wrpd-radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--wrpd-transition-fast), color var(--wrpd-transition-fast), border-color var(--wrpd-transition-fast);
}

/*
  Botão principal, normalmente usado em CTAs de destaque.
  Cor laranja com fundo sólido.
*/
.btn-primary {
  background: var(--wrpd-secondary);
  color: var(--wrpd-white) !important;
}

/*
  Hover do botão principal.
  Escurece o fundo para feedback visual.
*/
.btn-primary:hover {
  background: var(--wrpd-secondary-dark);
  text-decoration: none;
}

/*
  Botão secundário, mais discreto e usado em ações complementares.
  Fundo transparente com borda azul.
*/
.btn-secondary {
  background: transparent;
  color: var(--wrpd-primary) !important;
  border: 1px solid var(--wrpd-primary);
  margin-right: var(--wrpd-space-5);
}

/*
  Hover do botão secundário.
  Adiciona fundo azul claro para feedback visual.
*/
.btn-secondary:hover {
  background: var(--wrpd-primary-light);
  text-decoration: none;
}

/* =========================
   HOME / SEÇÕES E CARDS
   ========================= */
/*
  Espaçamento entre seções da home.
*/
.home-section {
  margin-bottom: var(--wrpd-space-12);
}

/*
  Títulos de seção da home.
*/
.home-section h2 {
  margin-bottom: 1.25rem;
  font-size: 2rem;
  line-height: 1.2;
}

/*
  Grid base usado em listagens de cards.
*/
.card-grid {
  display: grid;
  gap: var(--wrpd-space-8);
}

/*
  Grid automático para cards com largura mínima controlada.
  Usado na home para listas gerais de cards.
*/
.card-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/*
  Grids fixos usados em listagens específicas do site.
*/
.card-grid--partners {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wrpd-space-8);
}

.card-grid--services {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wrpd-space-8);
}

.card-grid--blog {
  grid-template-columns: 1fr;
  gap: var(--wrpd-space-6);
}

/*
  Card base reutilizado em várias seções do site.
*/
.card {
  background: var(--wrpd-white);
  border: 1px solid var(--wrpd-border);
  border-radius: var(--wrpd-radius-xl);
  padding: var(--wrpd-space-8);
  box-shadow: var(--wrpd-shadow);
}

/*
  Título do card.
*/
.card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
  line-height: 1.3;
}

.card:hover h3 {
  color: var(--wrpd-primary);
}

/*
  Texto do card.
*/
.card p {
  margin-bottom: 0;
  color: var(--wrpd-text-soft);
  line-height: 1.7;
}

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

/*
  Variante de card usada para serviços e blocos institucionais com ícone.
*/
.card--service {
  position: relative;
  overflow: hidden;
}

/*
  Bloco do ícone do card.
*/
.card-icon {
  width: 150px;
  min-height: 64px;
  border-radius: var(--wrpd-radius-lg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

/*
  Tamanho do ícone interno.
*/
.card-icon i {
  font-size: 36px;
}

/*
  Estilo para logos de parceiros em cards.
*/
.card-partner-logo {
  width: 150px;
  height: 60px;
  object-fit: contain;
  border-radius: var(--wrpd-radius-sm);
  display: block;
}

/*
  Estilo para logos do footer (classe independente).
*/
.partner-logo {
  /* fica no footer */
}

/*
  Variações de cor dos cards.
*/
.card--blue {
  border-top: 1px solid var(--wrpd-border);
}

.card-icon--blue {
  color: var(--wrpd-blue);
}

.card--purple {
  border-top: 1px solid var(--wrpd-border);
}

.card-icon--purple {
  color: var(--wrpd-purple);
}

.card--teal {
  border-top: 1px solid var(--wrpd-border);
}

.card-icon--teal {
  color: var(--wrpd-teal);
}

.card--green {
  border-top: 1px solid var(--wrpd-border);
}

.card-icon--green {
  color: var(--wrpd-green);
}

.card--cyan {
  border-top: 1px solid var(--wrpd-border);
}

.card-icon--cyan {
  color: var(--wrpd-cyan);
}

.card--orange {
  border-top: 1px solid var(--wrpd-border);
}

.card-icon--orange {
  color: var(--wrpd-orange);
}

.card--red {
  border-top: 1px solid var(--wrpd-border);
}

.card-icon--red {
  color: var(--wrpd-red);
}

/*
  Link textual de chamada dentro de cards e listagens.
*/
.text-link-cta {
  font-weight: 700;
  color: var(--wrpd-primary);
  text-decoration: none;
  transition: color var(--wrpd-transition-fast);
}

/*
  Hover do link textual de chamada.
*/
.text-link-cta:hover {
  text-decoration: underline;
}

/*
  Card clicável.
  Faz o card inteiro funcionar como link sem perder aparência de card.
*/
.card--link,
.card--clickable {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
  cursor: pointer;
  transition: transform var(--wrpd-transition-fast), box-shadow var(--wrpd-transition-fast), border-color var(--wrpd-transition-fast), border-top-width var(--wrpd-transition-fast);
}

/*
  Hover do card clicável.
  Eleva levemente o card e reforça a borda.
*/
.card--link:hover,
.card--clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 101, 115, 0.28);
  border-top-width: 4px;
}

/*
  Foco por teclado para acessibilidade.
*/
.card--link:focus-visible {
  outline: 2px solid var(--wrpd-primary);
  outline-offset: 3px;
}

/*
  Título do card no hover.
*/
.card--link:hover h3 {
  color: var(--wrpd-primary);
}

/*
  Remove sublinhado de qualquer conteúdo interno do card-link.
*/
.card--link,
.card--link:hover,
.card--link:visited,
.card--link h3,
.card--link p,
.card--link span {
  text-decoration: none;
}

/*
  Media queries para responsividade dos grids de cards.
*/
@media screen and (max-width: 768px) {
  .card-grid--partners,
  .card-grid--services {
    grid-template-columns: 1fr;
  }
}
/* =========================
   CTA BOX
   ========================= */
/*
  Caixa de destaque usada para chamadas institucionais ou de contato.
  Fundo azul claro com borda sutil.
*/
.cta-box {
  background: var(--wrpd-secondary-light);
  border: 1px solid var(--wrpd-border);
  border-radius: var(--wrpd-radius-2xl);
  padding: var(--wrpd-space-9);
}

/*
  Remove margem superior do título para melhor alinhamento interno.
  Evita espaço extra no topo do conteúdo da caixa.
*/
.cta-box h2 {
  margin-top: 0;
}

/* =========================
   BLOG
   ========================= */
/*
  Lista customizada de posts.
  Remove estilos padrão de lista para controle total.
*/
.post-list-custom {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
  Item individual da listagem de posts.
  Espaçamento vertical entre posts.
*/
.post-list-custom li {
  padding: 0 0 1.5rem 0;
  margin: 0 0 1.5rem 0;
  border-bottom: 1px solid var(--wrpd-border);
}

/*
  Título do post na listagem.
  Hierarquia visual clara.
*/
.post-list-custom h3 {
  margin-bottom: 0.4rem;
}

/*
  Metadados do post nos cards.
  Informações secundárias como data e autor dentro dos cards.
*/
.post-list-meta {
  font-size: 0.9rem;
  color: var(--wrpd-text-soft);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

/*
  Seção de categorias na página do blog.
  Organiza filtros por categoria.
*/
.categories-section {
  margin-bottom: 2rem;
}

/*
  Container para elementos da sidebar.
  Fundo sutil com borda e sombra leve.
*/
.sidebar-box {
  background: var(--wrpd-surface);
  border: 1px solid var(--wrpd-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: rgba(0, 0, 0, 0.04) 0 1px 8px;
}

/*
  Título da seção de categorias.
  Destaque visual para organização.
*/
.categories-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

/*
  Lista de categorias.
  Remove marcadores padrão.
*/
.categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*
  Item da lista de categorias.
  Espaçamento entre categorias.
*/
.categories-list li {
  margin-bottom: 0.5rem;
}

/*
  Link das categorias.
  Layout flexível com contador à direita.
*/
.categories-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  background-color: var(--wrpd-surface);
  color: var(--wrpd-text);
  text-decoration: none;
  border: 1px solid var(--wrpd-border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  transition: background-color 0.2s, border-color 0.2s;
}

/*
  Hover dos links de categoria.
  Destaque sutil com cor primária.
*/
.categories-list a:hover {
  background-color: rgba(0, 101, 115, 0.08);
  border-color: var(--wrpd-primary);
}

/*
  Contador de posts por categoria.
  Cor mais suave para informação secundária.
*/
.category-count {
  color: var(--wrpd-text-muted);
  font-size: 0.85rem;
}

/*
  Categoria ativa (selecionada).
  Mantém o destaque visual.
*/
.categories-list a.is-active {
  background-color: rgba(0, 101, 115, 0.08);
  border-color: var(--wrpd-primary);
  color: var(--wrpd-text);
}

/*
  Layout de duas colunas em blog/categorias.
  Conteúdo principal à esquerda, sidebar à direita.
*/
.content-columns {
  display: grid;
  grid-template-columns: 67% 33%;
  gap: 2rem;
}

/*
  Navegação de paginação.
  Links para páginas anteriores/próximas.
*/
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

/*
  Link individual da paginação.
  Aparência consistente com outros elementos.
*/
.pagination__link {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--wrpd-border);
  border-radius: 0.5rem;
  background: var(--wrpd-surface);
  color: var(--wrpd-text);
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

/*
  Hover dos links de paginação.
  Destaque sutil com cor primária.
*/
.pagination__link:hover {
  border-color: var(--wrpd-primary);
  background: rgba(0, 101, 115, 0.08);
}

/*
  Texto informativo da paginação.
  Mostra "Página X de Y".
*/
.pagination__pages {
  font-size: 0.95rem;
  color: var(--wrpd-text-muted);
}

@media (max-width: 860px) {
  .content-columns {
    grid-template-columns: 1fr;
  }
}
.content-columns__main {
  min-width: 0;
}

.content-columns__sidebar {
  position: relative;
}

/*
  Sidebar do post individual.
  Espaçamento entre elementos da sidebar.
*/
.post-sidebar .sidebar-box {
  margin-bottom: 1.5rem;
}

/*
  Títulos na sidebar do post.
  Hierarquia visual consistente.
*/
.post-sidebar h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--wrpd-text);
}

.post-sidebar p {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.post-categories {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}

.post-categories li {
  margin-bottom: 0.25rem;
}

.post-categories a {
  color: var(--wrpd-primary);
  text-decoration: none;
  font-size: 0.95rem;
}

.post-categories a:hover {
  text-decoration: underline;
}

/*
  Responsividade para posts.
*/
@media (max-width: 1024px) {
  .wrapper--post {
    flex-direction: column;
  }
  .post-sidebar {
    width: 100%;
  }
}
/*
  Formulário de contato
*/
.contact-form {
  max-width: 600px;
  margin: 2rem 0;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--wrpd-text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--wrpd-border);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  background: var(--wrpd-surface);
  color: var(--wrpd-text);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--wrpd-primary);
  box-shadow: 0 0 0 3px rgba(0, 101, 115, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.btn-primary {
  background: var(--wrpd-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--wrpd-primary-dark, #006573);
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* =========================
   FORMULARIOS
   ========================= */
.contact-form {
  display: grid;
  gap: var(--wrpd-space-7);
  max-width: 760px;
}

.form-group {
  display: grid;
  gap: var(--wrpd-space-3);
}

.form-group label {
  color: var(--wrpd-text);
  font-weight: 700;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid var(--wrpd-border);
  border-radius: var(--wrpd-radius-sm);
  background: var(--wrpd-white);
  color: var(--wrpd-text);
  font: inherit;
  padding: var(--wrpd-space-5) var(--wrpd-space-6);
  transition: border-color var(--wrpd-transition-fast), box-shadow var(--wrpd-transition-fast);
}

.form-group textarea {
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--wrpd-primary);
  box-shadow: 0 0 0 3px rgba(15, 100, 114, 0.16);
  outline: none;
}

.contact-form .btn-primary {
  justify-self: start;
  border: 0;
  background: var(--wrpd-secondary);
  color: var(--wrpd-white) !important;
  cursor: pointer;
}

.contact-form .btn-primary:hover {
  background: var(--wrpd-secondary-dark);
}

.contact-form .btn-primary:disabled {
  cursor: wait;
  opacity: 0.72;
}

.contact-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  min-height: 1.5em;
  margin: 0;
  color: var(--wrpd-text-soft);
  font-weight: 700;
}

.contact-form__status--success {
  color: var(--wrpd-green);
}

.contact-form__status--error {
  color: var(--wrpd-red);
}

/* =========================
   FOOTER
   ========================= */
/*
  Rodapé principal do site.
*/
.site-footer {
  background: var(--wrpd-bg-soft);
  border-top: 1px solid var(--wrpd-border);
  padding: 32px 0 24px;
}

/*
  Wrapper do rodapé em coluna para empilhar logo, conteúdo e copyright.
*/
.site-footer .wrapper {
  display: flex;
  flex-direction: column;
}

/*
  Garante que os blocos principais ocupem toda a largura do rodapé.
*/
.footer-top,
.footer-content,
.footer-bottom {
  width: 100%;
}

/*
  Linha superior do rodapé, contendo o logo principal.
*/
.footer-top {
  display: block;
  margin-bottom: 24px;
}

/*
  Link do logo no rodapé.
*/
.footer-top .site-title {
  display: inline-flex;
  line-height: 1;
  min-width: 0;
}

/*
  Tamanho do logo no topo do rodapé.
  Mesmo tamanho do header para consistência visual.
*/
.footer-top .site-logo {
  height: 48px;
  width: auto;
  display: block;
}

/*
  Grid principal do conteúdo do rodapé.
  Organiza as 4 colunas principais: empresa, descrição, links, parceiro.
*/
.footer-content {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 0.9fr 0.8fr;
  gap: 24px;
  align-items: start;
}

/*
  Nome da empresa na coluna de endereço.
  Destaque visual para o nome da organização.
*/
.footer-address strong:first-of-type {
  display: block;
  margin-bottom: 8px;
}

/*
  Texto do endereço.
  Cor suave para não competir com o conteúdo principal.
*/
.footer-address p {
  margin: 0 0 10px 0;
  line-height: 1.5;
  color: var(--wrpd-text-soft);
}

/*
  Destaques da coluna de endereço, como telefone.
  Informações de contato importantes.
*/
.footer-address strong {
  display: block;
  margin: 0 0 8px 0;
}

/*
  Link de e-mail no rodapé.
  Cor primária para manter consistência com outros links.
*/
.footer-address a {
  color: var(--wrpd-primary);
  text-decoration: none;
}

/*
  Hover do link de e-mail.
  Sublinhado para feedback visual.
*/
.footer-address a:hover {
  text-decoration: underline;
}

/*
  Descrição institucional do rodapé.
  Texto explicativo sobre a empresa.
*/
.footer-description p {
  margin: 0;
  line-height: 1.65;
  color: var(--wrpd-text-soft);
}

/*
  Coluna de links do rodapé.
  Alinhamento à direita para organização visual.
*/
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}

/*
  Links do rodapé.
  Navegação secundária do site.
*/
.footer-links a {
  color: var(--wrpd-primary);
  text-decoration: none;
}

/*
  Hover dos links do rodapé.
  Sublinhado para feedback visual.
*/
.footer-links a:hover {
  text-decoration: underline;
}

/*
  Bloco do parceiro/associação no rodapé.
  Destaque para parcerias importantes.
*/
.footer-partner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

/*
  Título do bloco do parceiro.
*/
.footer-partner strong {
  display: block;
  margin-bottom: 10px;
}

/*
  Link do logo do parceiro.
*/
.footer-partner a {
  display: inline-flex;
  justify-content: flex-end;
}

/*
  Logo do parceiro/associação.
*/
.partner-logo {
  height: 44px;
  width: auto;
  display: block;
  object-fit: contain;
  padding-bottom: 20px;
}

/*
  Linha final do rodapé com copyright.
*/
.footer-bottom {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--wrpd-border);
}

/*
  Texto do copyright.
*/
.footer-bottom p {
  margin: 0;
  color: var(--wrpd-text-soft);
}

/* =========================
   RESPONSIVO DO FOOTER
   ========================= */
@media screen and (max-width: 900px) {
  /*
    Rodapé passa para duas colunas em tablets.
  */
  .footer-content {
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    grid-template-areas: "address description" "links partner";
  }
  /*
    Áreas nomeadas do grid do rodapé.
  */
  .footer-address {
    grid-area: address;
  }
  .footer-description {
    grid-area: description;
  }
  /*
    Links alinham à esquerda em telas médias.
  */
  .footer-links {
    grid-area: links;
    align-items: flex-start;
    text-align: left;
  }
  /*
    Parceiro também alinha à esquerda em telas médias.
  */
  .footer-partner {
    grid-area: partner;
    align-items: flex-start;
    text-align: left;
  }
  /*
    Link do parceiro acompanha o alinhamento à esquerda.
  */
  .footer-partner a {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 600px) {
  /*
    Padding do rodapé reduzido no mobile.
  */
  .site-footer {
    padding: 24px 0 20px;
  }
  /*
    Menor espaçamento sob o logo do rodapé.
  */
  .footer-top {
    margin-bottom: 18px;
  }
  /*
    Logo principal um pouco menor no mobile.
  */
  .footer-top .site-logo {
    height: 42px;
  }
  /*
    Em telas pequenas, o rodapé passa para uma única coluna para melhorar leitura.
  */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 18px 0;
    grid-template-areas: "address" "description" "links" "partner";
  }
  /*
    Links em duas colunas no mobile para usar melhor o espaço.
  */
  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    text-align: left;
  }
  /*
    Parceiro alinhado à esquerda no mobile.
  */
  .footer-partner {
    align-items: flex-start;
    text-align: left;
  }
  /*
    Link do parceiro acompanha o alinhamento.
  */
  .footer-partner a {
    justify-content: flex-start;
  }
  /*
    Logo do parceiro menor no mobile.
  */
  .partner-logo {
    height: 36px;
  }
  /*
    Linha inferior mais compacta no mobile.
  */
  .footer-bottom {
    margin-top: 18px;
    padding-top: 12px;
  }
}
/* =========================
   TIMELINE — Linha do tempo
   ========================= */
.timeline-section {
  padding: var(--wrpd-space-11) 0 var(--wrpd-space-9);
}

.timeline {
  position: relative;
  padding: var(--wrpd-space-8) 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--wrpd-primary) 4%, var(--wrpd-primary) 96%, transparent);
}

.timeline-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--wrpd-space-8);
  position: relative;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-item--left .timeline-content {
  grid-column: 1;
  text-align: right;
  padding-right: 2.5rem;
}
.timeline-item--left .timeline-image {
  grid-column: 2;
  padding-left: 2.5rem;
}
.timeline-item--right .timeline-content {
  grid-column: 2;
  text-align: left;
  padding-left: 2.5rem;
}
.timeline-item--right .timeline-image {
  grid-column: 1;
  grid-row: 1;
  padding-right: 2.5rem;
}

.timeline-content {
  padding-top: 0.15rem;
}

.timeline-image {
  display: flex;
  align-items: flex-start;
}
.timeline-image img {
  width: 100%;
  border-radius: var(--wrpd-radius-lg);
  border: 1px solid var(--wrpd-border);
  box-shadow: var(--wrpd-shadow);
  filter: sepia(15%) brightness(0.97);
}

.timeline-marker {
  position: absolute;
  left: 50%;
  top: 0.3rem;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wrpd-primary);
  border: 3px solid var(--wrpd-white);
  box-shadow: 0 0 0 2px var(--wrpd-primary);
  z-index: 1;
}

.timeline-year {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wrpd-primary);
  background: var(--wrpd-primary-light);
  border: 1px solid var(--wrpd-border);
  border-radius: var(--wrpd-radius-sm);
  padding: 2px 10px;
  margin-bottom: 0.45rem;
}

.timeline-content h3 {
  margin: 0.4rem 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wrpd-text);
}

.timeline-content p {
  margin: 0;
  color: var(--wrpd-text-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}

@media (max-width: 600px) {
  .timeline::before {
    left: 8px;
    transform: none;
  }
  .timeline-item--left,
  .timeline-item--right {
    display: block;
    padding-left: 2rem;
  }
  .timeline-item--left .timeline-content,
  .timeline-item--right .timeline-content {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }
  .timeline-item--left .timeline-image,
  .timeline-item--right .timeline-image {
    display: none;
  }
  .timeline-item--left .timeline-marker,
  .timeline-item--right .timeline-marker {
    left: 8px;
    transform: translateX(-50%);
  }
}

/*# sourceMappingURL=main.css.map */