/* ========== RESET & BASE ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  color: var(--text-dark);
  background: var(--mercurio);
  font-size: 16px;
  line-height: 1.55;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }


:root {
  --dark: #14304C;
  --dark-gray: #315275;
  --mid-gray: #315275;
  --light-gray: #9FC5F0;
  --border-gray: #A3B5C8;
  --accent-red: #336699;
  --accent-red-text: #315275;   /* vermelho escuro p/ texto pequeno (passa WCAG AA) */
  --white: #ffffff;
  --text-dark: #14304C;
  --text-light: #14304C;   /* 02/10/2026: o texto padrao do site e o escuro da Ideal Metrics (era #315275) */
  --blue-medium: #336699;
  --blue-light: #9FC5F0;
  --lavender: #F2F1F5;
  --gold: #9FC5F0;
  --max-width: 1240px;
  /* Hero Refined — Corporate palette */
  --color-primary: #14304C;
  --color-primary-light: #315275;
  --color-accent: #336699;
  --color-accent-light: #9FC5F0;
  --color-text: #14304C;   /* era #14304C (cinza-escuro); titulos em preto a pedido */
  --color-text-light: #315275;
  --color-bg: #FFFFFF;
  --color-bg-alt: #FAF9F5;
  --color-white: #FFFFFF;

  /* O vocabulario da home, para que o CSS portado de la funcione aqui sem
     reescrita. Sao os mesmos valores, com os nomes que a home usa. */
  --azul: #14304C;
  --azul-escuro: #315275;
  --mercurio: #FAF9F5;
  --branco: #FFFFFF;
  --liga-corpo: #336699;
  --liga-claro: #9FC5F0;
  --perola: #F2F1F5;
  --fio: rgba(20,48,76,.30);
  --sans: 'IBM Plex Sans Condensed', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --lado: clamp(28px, 4vw, 64px);

  /* TESTE 06/09/2026: a cor dos fundos escuros. Reverter = #14304C */
  --fundo: #336699;
  --claro-principal: #BDDDFF;   /* 4a das principais */
}

/* ========== TARJA DE IDENTIFICACAO ========== */
/* Vem antes do cabecalho e rola junto com a pagina: o .header e sticky,
   nao fixed, entao a tarja sai de cena na primeira rolagem. */

/* ========== HEADER ========== */
.header {
  background: var(--mercurio);
  padding: 0 max(40px, calc(50% - 580px));
  height: 52px;   /* borda inferior alinha com a linha horizontal interna do logo (~51,5px) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-gray);
}
.header.scrolled { box-shadow: 0 2px 14px rgba(20,48,76,0.07); }
.header.scrolled .header-logo img,
.header.scrolled .header-logo svg { height: 60px; }  /* rolando, o logo recolhe e libera o menu fixo (sidenav top 68) */
.header-logo {
  display: flex;
  align-items: flex-start;
  align-self: flex-start;
  position: relative;
  z-index: 210;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s;
}
.header-logo a {
  display: flex;
  align-items: center;
  position: relative;
  top: 0;
}
.header-logo img,
.header-logo svg {
  height: 76px;
  width: auto;
  display: block;
  transition: height 0.25s ease;
}
.header-nav { display: flex; align-items: center; gap: 28px; height: 100%; }
.header-nav a {
  /* mesmo idioma do menu da home: mono, caixa alta, entreletra aberta */
  font-family: var(--mono);
  color: var(--color-text);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.35s cubic-bezier(.4,0,.2,1);
}
.header-nav a:hover { color: var(--accent-red); }
.header-nav .dropdown { position: static; padding-bottom: 8px; margin-bottom: -8px; }
.header-nav .dropdown > a { cursor: pointer; }

/* ---- Mega Menu ---- */
.mega-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  padding: 32px max(40px, calc(50% - 580px));
  padding-top: 40px;
  z-index: 200;
  box-shadow: 0 12px 30px rgba(20,48,76,0.10);
  border-top: 2px solid var(--accent-red);
  border-bottom: 1px solid var(--border-gray);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease 0.1s;
  pointer-events: none;
}
.mega-menu::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
  background: transparent;
}
.header-nav .dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.mega-menu-col h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--mid-gray);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-gray);
}
.mega-menu-col a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text);
  transition: color 0.2s;
}
.mega-menu-col a:hover { color: var(--accent-red); }
.mega-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.mega-menu-col a:hover .mega-icon {
  border-color: var(--accent-red);
  background: rgba(51,102,153,0.1);
}
.mega-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--mid-gray);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mega-menu-col a:hover .mega-icon svg { stroke: var(--accent-red); }
.header-search {
  background: var(--accent-red);
  color: white;
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.header-lang {
  display: flex;
  gap: 8px;
  color: var(--blue-light);
  font-size: 11px;
}

/* ========== PAGE BANNER ========== */
.page-banner {
  /* 22/09/2026: SEM FOTO, por ora. Creme a esquerda (onde se le o titulo) e trama
     azulada a direita, com o rastro do mouse: canvas .pb-gl do motor js/trama.js,
     imagem gerada por _ferramentas/banner/banner.py. A foto de cada pagina
     (--banner-photo) continua no HTML e deixou de ser usada aqui. */
  background: var(--mercurio, #FAF9F5);
  padding: 46px max(40px, calc(50% - 580px));
  min-height: 300px;   /* 23/09: «ligeiramente mais alta», e a foto vai aqui */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-gray);
}
.page-banner .pb-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.page-banner h1 {
  font-size: clamp(26px, 3vw, 42px);                   /* mesma escala da chamada da home */
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.04;                                   /* 02/10/2026: «diminua o espacamento entre as linhas» (era 1,16) */
  color: var(--color-primary);                         /* título escuro sobre o branco */
  position: relative;
  z-index: 2;
  max-width: min(560px, 54%);
  text-wrap: balance;
}
.page-banner p {
  color: var(--mid-gray);
  font-size: 17px;
  margin-top: 6px;
  position: relative;
  z-index: 2;
  max-width: min(560px, 54%);
}
@media (max-width: 768px) {
  .page-banner h1, .page-banner p { max-width: 100%; }
}
.breadcrumb {
  background: var(--lavender);
  padding: 8px max(40px, calc(50% - 580px));
  font-size: 13px;
  color: var(--mid-gray);
}
.breadcrumb a { color: var(--dark-gray); }
.breadcrumb a:hover { color: var(--accent-red); text-decoration: underline; }

/* ========== HERO (HOME) ========== */
.hero {
  background: #ffffff;
  position: relative;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px max(40px, calc(50% - 580px)) 40px;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 55%;
  height: 100%;
  background-image: url('../img/CQT Sistemas da Qualidade.png');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 55%;
  height: 100%;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.4) 15%, rgba(255,255,255,0.05) 40%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; max-width: 520px; }
.hero-logo { margin-bottom: 18px; }
.hero-logo img { height: 38px; width: auto; }
.nowrap { white-space: nowrap; }
.hero h1 {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 700;
  color: #14304C;
  line-height: 1.16;
  letter-spacing: -0.012em;
  max-width: 520px;
}
.hero-subtitle {
  margin-top: 24px;
  padding-bottom: 14px;
  position: relative;
  display: inline-block;
}
.hero-subtitle::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 3px;
  background: var(--accent-red);
}
.hero-subtitle::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 88px;
  width: 30px;
  height: 3px;
  background: var(--accent-red);
}
.hero-subtitle a {
  color: #14304C;
  font-size: 18px;
  font-style: italic;
  text-decoration: none;
  line-height: 1.6;
}
.hero-subtitle a:hover {
  text-decoration: underline;
}
.hero-bottom {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-top: 32px;
  position: relative;
  z-index: 2;
}
.hero-actions { display: flex; flex-direction: column; gap: 12px; min-width: 200px; }
.btn-outline {
  background: var(--accent-red);
  border: 1px solid var(--accent-red);
  color: #ffffff;
  padding: 11px 26px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.25s;
  border-radius: 6px;
}
.btn-outline:hover {
  background: #336699;
  border-color: #336699;
}
.btn-whatsapp {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #14304C;
  font-size: 16px;
  font-weight: 500;
  transition: color 0.2s;
}
.btn-whatsapp:hover {
  color: #25D366;
}
.wa-icon-sm {
  width: 28px; height: 28px;
  background: #25D366;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wa-icon-sm svg {
  width: 16px; height: 16px;
  fill: white;
}
.hero-cards { display: flex; gap: 14px; flex: 1; justify-content: flex-end; }
.hero-card {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 22px 24px;
  flex: 0 1 210px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(20,48,76, 0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}
.hero-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(20,48,76, 0.15);
}
.hero-card h3 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  color: #14304C;
}
.hero-card p { font-size: 14px; color: var(--mid-gray); line-height: 1.6; }
.hero-card .plus {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-red);
  cursor: pointer;
}

/* ========== SECONDARY NAV ========== */
.secondary-nav {
  background: var(--light-gray);
  padding: 10px max(40px, calc(50% - 580px));
  display: flex;
  justify-content: center;
  gap: 36px;
  border-bottom: 1px solid var(--border-gray);
}
.secondary-nav a {
  font-size: 14px;
  color: var(--text-light);
  transition: color 0.2s;
}
.secondary-nav a:hover { color: var(--dark-gray); }

/* ========== CONTENT CONTAINERS ========== */
/* 23/09/2026: respiro entre a migalha e o texto e ate o rodape, em todas as
   paginas. Primeiro 40 -> 60 e 68 -> 120; na mesma tarde, «ainda mais espaco»,
   entao 88 em cima e 168 embaixo. */
.content { max-width: 1240px; margin: 0 auto; padding: 88px 40px 168px; counter-reset: csec; }
.content h2 {
  counter-increment: csec;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text);
  margin: 56px 0 10px;                   /* 02/10/2026: secao a secao, 56 px (era 32) */
  padding-top: 22px;
  border-top: 1px solid var(--border-gray);
  text-wrap: pretty;
}
.content h2::before {                    /* numero editorial serifado (padrao roteiro) */
  content: counter(csec, decimal-leading-zero);
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--color-primary-light);
  margin-bottom: 8px;
}
.content h2:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; }
.content h3 {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 44px 0 12px;                   /* 02/10/2026: titulo de secao mais afastado do bloco de cima (era 26) */
}
.content h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}
.content p { margin-bottom: 10px; font-size: 15px; line-height: 1.5; color: var(--text-light); }
/* 02/10/2026: TODA PAGINA ABRE POR UMA FRASE, maior que o texto, que diz o servico; depois um texto, depois os diagramas */
.content p.abre { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.012em; color: var(--text-light); max-width: 800px; margin: 0 0 22px; text-wrap: pretty; }   /* 02/10: a mesma letra da chamada do Spirit ([ 02 ] Visual), bold por inteiro */
.content p.abre strong, .content p.abre b { font-weight: inherit; }   /* a frase nao varia entre bold e nao bold */
.content p.abre + p { margin-top: 0; }
.content ul { margin: 8px 0 18px 2px; }
.content ul li {
  font-size: 14.5px;
  color: var(--text-light);
  margin-bottom: 5px;
  list-style: none;
  padding-left: 20px;
  position: relative;
}
.content ul li::before {                 /* marcador da marca: quadrado 6px, 3px seria invisivel */
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--accent-red);
  border-radius: 2px;
}
/* 02/10/2026: ESPACAMENTO CANONICO. Secao a secao: 56 px ate o fio e 44 px dele ao titulo (era 32 e 32).
   Bloco (grade de cards, fotos, numeros, figura, icones) ate o texto ou o bloco seguinte: 28 px. */
.section-divider { border: none; border-top: 1px solid var(--border-gray); margin: 56px 0 44px; }
.highlight-box {                         /* sem faixa lateral; card transparente de borda fina */
  background: transparent;
  padding: 20px 24px;
  margin: 20px 0;
  border: 1px solid rgba(51,102,153, 0.55);
  border-radius: 3px;
  font-size: 15px;
  color: var(--mid-gray);
  line-height: 1.5;
}
.link-arrow {
  color: var(--accent-red-text);
  font-size: 13px;
  text-decoration: underline;
  display: inline-block;
  margin-top: 8px;
}

/* ========== SERVICES SECTION (HOME) ========== */
.services-section { padding: 40px max(40px, calc(50% - 580px)); }
.services-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 40px;
}
.services-header-left { display: flex; align-items: center; gap: 14px; }
.services-icon {
  width: 55px; height: 55px;
  background: var(--light-gray);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-gray);
  padding: 10px;
}
.services-icon img { height: 28px; width: auto; }
.services-icon--a4 {
  background: none;
  border: none;
  padding: 0;
  width: auto;
  flex: 0 0 auto;
}
.services-icon--a4 img { height: 55px; width: auto; }
.services-header-right {
  max-width: 300px;
  background: var(--lavender);
  padding: 20px;
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.6;
}
.services-outer {
  display: flex;
  border-top: 1px solid var(--border-gray);
}
.services-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.services-right {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border-gray);
}
.service-card {
  padding: 24px 18px;
  border-right: 1px solid var(--border-gray);
  border-bottom: 1px solid var(--border-gray);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  transition: background 0.25s ease;
  cursor: pointer;
}
.service-card:nth-child(4n) { border-right: none; }
.service-card:hover { background: var(--mid-gray); }
.service-card:hover h3,
.service-card:hover .subtitle { color: var(--white); }
.service-card:hover .dash { background: var(--white); }
.service-card h3 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  line-height: 1.3;
  transition: color 0.25s ease;
}
.service-card .subtitle { font-size: 14.5px; color: var(--text-light); line-height: 1.5; transition: color 0.25s ease; }
.service-card .dash { margin-top: auto; width: 28px; height: 2px; background: var(--text-dark); transition: background 0.25s ease; }
.services-photo-col {
  position: relative;
  overflow: hidden;
  flex: 1;
  background-size: cover;
  background-position: center;
}

/* ========== SERVICES PAGE BLOCKS ========== */
.service-block {
  padding: 36px 40px;
  max-width: 1240px;
  margin: 0 auto;
  border-bottom: 1px solid var(--border-gray);
}
.service-block:last-of-type { border-bottom: none; }
.service-block h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}
.service-block .block-sub {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-light);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.service-block p { font-size: 16px; color: var(--text-light); line-height: 1.6; margin-bottom: 8px; }
.service-block ul { margin: 8px 0 16px 20px; }
.service-block ul li { font-size: 16px; color: var(--text-light); margin-bottom: 4px; list-style: disc; }
.service-block h3 { font-size: 15px; font-weight: 700; margin-top: 16px; margin-bottom: 6px; }
.service-block .link-arrow {
  color: var(--accent-red-text);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid var(--border-gray);
  padding-bottom: 12px;
  display: inline-block;
  margin-top: 12px;
}
.norm-list { columns: 2; column-gap: 40px; margin: 8px 0 16px; }
.norm-list p { font-size: 16px; margin-bottom: 2px; }

/* ========== NEWSLETTER + CONTACT ========== */
.newsletter-contact {
  display: flex;
  padding: 0 max(40px, calc(50% - 580px));
  border-top: 1px solid var(--border-gray);
}
.newsletter { padding: 28px; border-top: 1px solid var(--border-gray); }
.newsletter h3 { font-size: 17px; font-weight: 400; margin-bottom: 6px; }
.newsletter label { font-size: 14px; color: var(--text-light); }
.newsletter-form { display: flex; gap: 8px; margin-top: 6px; }
.newsletter-form input {
  font-family: inherit;
  border: 1px solid var(--border-gray);
  padding: 7px 12px;
  font-size: 15px;
  width: 260px;
}
.newsletter-form button {
  background: var(--accent-red);
  color: var(--white);
  border: none;
  padding: 7px 18px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}
.contact-box {
  background: var(--accent-red);
  color: var(--white);
  padding: 28px;
  
}
.contact-box h3 { font-size: 17px; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; }
.contact-box p { font-size: 15px; margin-bottom: 14px; text-decoration: underline; color: #fff; }
.contact-box .wa-link { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; }
.contact-box .wa-dot { width: 18px; height: 18px; background: #25D366; border-radius: 50%; }
.contact-box .email-label { font-size: 12px; text-transform: uppercase; opacity: 0.7; }
.contact-box .email { font-size: 15px; text-decoration: underline; }

/* ========== BLOG SECTION ========== */
.blog-section { padding: 36px max(40px, calc(50% - 580px)) 50px; }
.blog-section > h2 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.blog-link { color: var(--accent-red); font-size: 15px; text-decoration: underline; margin-bottom: 20px; display: block; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-tab {
  background: none;
  border: 1px solid var(--border-gray);
  padding: 6px 16px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.filter-tab:hover { border-color: var(--mid-gray); color: var(--text-dark); }
.filter-tab.active { background: var(--fundo); color: var(--white); border-color: var(--dark); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card { padding-bottom: 14px; border-bottom: 1px solid var(--border-gray); }
.blog-card-img {
  width: 100%; height: 130px;
  background: linear-gradient(135deg, var(--mid-gray) 0%, var(--dark-gray) 100%);
  margin-bottom: 10px;
  position: relative;
}
.blog-card-img .category {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(51,102,153,0.6);
  color: white; font-size: 9.5px; padding: 2px 7px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.blog-card .author { font-size: 13px; color: var(--text-light); margin-bottom: 3px; }
.blog-card h3 { font-size: 13.5px; font-weight: 600; line-height: 1.3; font-family: 'IBM Plex Mono', monospace; }
/* 17/10/2026: o blog da CQT trazido para a Ideal Metrics (_ferramentas/blog.py). Cartao = link, com a foto no motor da
   trama (.bl-quadro, 4:3) e o rotulo do tema por cima; o post tem o texto numa coluna de leitura e tres outros posts. */
a.blog-card { display: block; color: inherit; text-decoration: none; }
.blog-card .blog-card-img { height: auto; aspect-ratio: 4 / 3; background: var(--color-bg-alt); overflow: hidden; border-radius: 3px; }
.blog-card .blog-card-img .category { z-index: 2; background: rgba(20,48,76,.78); font-family: 'IBM Plex Mono', monospace; letter-spacing: .12em; padding: 3px 8px; border-radius: 2px; }
.bl-quadro { position: absolute; inset: 0; overflow: hidden; }
.bl-quadro img, .bl-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bl-quadro img { object-fit: cover; }
a.blog-card h3 { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.25; color: #14304C; transition: color .2s; }
a.blog-card:hover h3 { color: #336699; }
.blog-card .author { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .04em; margin: 4px 0 6px; }
.bl-post { padding: 56px max(40px, calc(50% - 580px)) 352px; }
.bl-artigo { max-width: 760px; margin: 0 auto; color: #14304C; }
.bl-meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; color: #315275; margin: 0 0 22px; }
.bl-capa { position: relative; aspect-ratio: 4 / 3; max-height: 460px; width: 100%; border-radius: 3px; margin: 0 0 36px; }
.bl-texto p, .bl-texto li { font-size: 18px; line-height: 1.55; margin: 0 0 16px; }
.bl-texto h3 { font-size: 22px; font-weight: 700; line-height: 1.25; margin: 36px 0 12px; color: #14304C; }
.bl-texto ul { margin: 0 0 18px; padding-left: 22px; }
.bl-texto li { margin-bottom: 8px; }
.bl-fonte { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px !important; line-height: 1.5 !important; color: #315275; border-top: 1px solid rgba(20,48,76,.16); padding-top: 14px; margin-top: 28px !important; }
.bl-volta { margin: 40px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.bl-volta a { color: #14304C; }
.bl-mais { max-width: 1160px; margin: 96px auto 0; border-top: 1px solid rgba(20,48,76,.16); padding-top: 22px; }
.bl-mais-rot { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #14304C; margin: 0 0 22px; }
@media (max-width: 760px) {
  .bl-post { padding: 36px 20px 120px; }
  .bl-texto p, .bl-texto li { font-size: 16.5px; }
  .bl-mais-grade { grid-template-columns: 1fr; }
}

/* ========== CONTACT PAGE ========== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 20px;
}
.contact-form label { display: block; font-size: 14px; color: var(--text-light); margin-bottom: 4px; margin-top: 14px; }
.contact-form input, .contact-form textarea {
  width: 100%; font-family: inherit; border: 1px solid var(--border-gray);
  padding: 8px 12px; font-size: 16px; resize: vertical;
}
.contact-form textarea { min-height: 100px; }
.contact-form button {
  margin-top: 14px;
  background: var(--accent-red);
  color: var(--white);
  border: none;
  padding: 10px 28px;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}
.contact-info h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; margin-top: 16px; }
.contact-info p { font-size: 16px; color: var(--text-light); }

/* ========== STEPS (ISO page) ========== */
.steps { counter-reset: step; margin: 24px 0; }
.step { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
.step-num {
  font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500;
  letter-spacing: 0.2em; color: var(--dark);
  min-width: 50px; line-height: 1;
}
.step-content h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.step-content p { font-size: 16px; color: var(--text-light); }

/* ========== NUMBERED LIST (Suporte) ========== */
.numbered-items { counter-reset: item; display: grid; gap: 8px; }   /* 02/10/2026: cards soltos, nao mais linhas separadas por fio */
.numbered-item {
  display: flex; gap: 16px; padding: 14px 18px 16px;
  border: 1px solid rgba(20,48,76,.14); border-radius: 3px; background: var(--color-bg-alt);
  align-items: flex-start;
}
.numbered-item .num {
  font-size: 28px; font-weight: 700; color: var(--dark);
  min-width: 40px; line-height: 1;
}
.numbered-item h4 { font-size: 13px; font-weight: 600; line-height: 1.25; margin-bottom: 4px; }
.numbered-item p { font-size: 15px; color: var(--text-light); line-height: 1.35; }
/* o ultimo paragrafo do card nao leva a margem do texto corrido; a lista solta do texto que vem depois */
.numbered-item p:last-child, .pos-card p:last-child { margin-bottom: 0; }
.numbered-items { margin-bottom: 28px; }

/* ========== RODAPE ==========
   Portado da home (index-completo). O rodape antigo, de tres colunas de
   link sobre fundo escuro, saiu inteiro: os links dele estao todos aqui,
   redistribuidos nas colunas a, b e c. */
/* ============ RODAPÉ (ft-) — geometria do modelo: grid 12 col, gap 15px ============ */
.ft-root{
  background:var(--fundo);
  color:var(--mercurio);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:15px;
  padding:20px var(--lado) 26px;                 /* lg:pt-20 lg:pb-26 do modelo */
  font-family:var(--mono);
  font-weight:400;
  font-size:11px;
  line-height:1.45;                              /* passo de linha ~16px medido no screenshot */
  letter-spacing:.08em;
  text-transform:uppercase;
}
/* Marca gigante: colunas 1-6, linha 1, centrada (lg:col-1s6 lg:row-start-1) */
.ft-brand{
  grid-column:1/7;
  grid-row:1;
  display:flex;
  justify-content:center;
  align-items:center;
}
.ft-logo{
  width:min(380px,62%);
  height:auto;
  display:block;
}
/* hr só no mobile (modelo: lg:hidden) */
.ft-hr{display:none;}
/* Nav: colunas 7-12, subgrid de 6 colunas (lg:col-span-6 + grid-cols-subgrid) */
.ft-nav{
  grid-column:7/13;
  grid-row:1;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:15px;
  align-content:start;
}
.ft-col{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
/* Colunas de links do topo: fio vertical 1px, pl-12, pt-15, altura travada 285px (lg:h-285) */
.ft-col-a,
.ft-col-b{
  grid-column:span 3;
  border-left:1px solid rgba(232,230,224,.45);
  padding-left:12px;
  padding-top:15px;
  height:285px;
}
/* Grupo inferior esquerdo (posição do FAQ do modelo): sem fio, mt-32, pl-12 */
.ft-col-c{
  grid-column:span 3;
  padding-left:13px;                             /* 1px do fio + 12px: alinha com o texto das colunas com fio */
  margin-top:32px;
}
/* Bloco FALE CONOSCO (posição do Stay In Touch): ml-12, mt-32, mb-34 */
.ft-contact{
  grid-column:span 3;
  margin:32px 0 34px 12px;
}
.ft-contact-line{
  display:flex;
  width:100%;
  align-items:baseline;
}
.ft-pipe{margin:0 16px;}                          /* lg:mx-16 (mobile mx-22) */
.ft-form{width:100%;margin-top:20px;}             /* mt-20 do modelo */
/* Caixa de e-mail: borda 1px, 17.36vw, pl-20, altura 55px (h-55 do botão) */
.ft-mailbox{
  border:1px solid rgba(232,230,224,.8);
  background:var(--fundo);
  color:var(--mercurio);
  width:17.36vw;
  min-width:250px;
  height:55px;
  padding-left:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ft-mail-label{display:block;flex:1;height:100%;}
.ft-mailbox input{
  width:100%;
  height:100%;
  background:transparent;
  border:0;
  outline:none;
  color:var(--mercurio);
  font-family:var(--sans);                        /* modelo: input em sans (font-pp-neue), não mono */
  font-weight:400;
  font-size:12px;                                 /* lg:fs-12 (mobile fs-14) */
  letter-spacing:0;
  line-height:1;
  text-transform:none;
}
.ft-mailbox input::placeholder{color:var(--mercurio);opacity:1;}
.ft-mail-btn{
  height:55px;                                    /* h-55 */
  padding:0 15px;                                 /* px-15 */
  background:none;
  border:0;
  color:var(--mercurio);
  cursor:pointer;
  display:flex;
  align-items:center;
}
.ft-mail-btn svg{transition:transform .35s cubic-bezier(.4,0,.2,1);}
.ft-mail-btn:hover svg{transform:translateX(4px);}
/* Créditos: coluna direita da faixa de baixo (posição da coluna Privacy do modelo): fio, h-185, justify-end */
.ft-credits{
  grid-column:4/7;
  border-left:1px solid rgba(232,230,224,.45);
  padding-left:12px;
  height:185px;
  justify-content:flex-end;
}
/* Linha legal: sobreposta à célula da marca, alinhada à base (lg:col-1s6 row 1 self-end pl-15) */
.ft-legal{
  grid-column:1/7;
  grid-row:1;
  align-self:end;
  padding-left:15px;
}
/* Links: mercury, sublinhado fino varrendo no hover */
.ft-root a{
  color:var(--mercurio);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-size:0 1px;
  background-position:0 100%;
  transition:background-size .4s cubic-bezier(.4,0,.2,1);
}
.ft-root a:hover{background-size:100% 1px;}
.ft-root a:focus-visible,
.ft-mail-btn:focus-visible,
.ft-mailbox input:focus-visible{outline:1px solid var(--mercurio);outline-offset:3px;}
.ft-lower{text-transform:none;}
.ft-sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ============ Mobile (<=880px): pilha única, sem fios, hr visível ============ */
@media (max-width:880px){
  .ft-root{
    grid-template-columns:1fr;
    padding:50px var(--lado) 20px;                /* pt-50 pb-20 do modelo */
  }
  .ft-brand{grid-column:1;grid-row:auto;}
  .ft-logo{width:min(280px,64%);}
  .ft-hr{
    display:block;
    border:0;
    border-top:1px solid rgba(232,230,224,.45);
    width:100%;
    margin:50px 0 0;                              /* mt-50 */
  }
  .ft-nav{
    grid-column:1;
    grid-row:auto;
    grid-template-columns:1fr;
    margin-top:50px;                              /* mt-50 */
    row-gap:30px;                                 /* gap-y-30 */
  }
  .ft-col-a,.ft-col-b{
    grid-column:1;
    border-left:0;
    padding:0;
    height:auto;
  }
  .ft-col-c{grid-column:1;padding-left:0;margin-top:0;}
  .ft-contact{grid-column:1;margin:0;}
  .ft-pipe{margin:0 22px;}                        /* mx-22 mobile */
  .ft-mailbox{width:100%;min-width:0;}
  .ft-mailbox input{font-size:14px;}              /* fs-14 mobile */
  .ft-credits{
    grid-column:1;
    border-left:0;
    padding-left:0;
    height:auto;
    margin-top:20px;                              /* mt-20 (linha de créditos mobile do modelo) */
  }
  .ft-legal{
    grid-column:1;
    grid-row:auto;
    align-self:start;
    padding-left:0;
    margin-top:26px;                              /* mt-26 */
  }
}

/* ===== marcas oficiais =====
   04/10/2026: o logo do fim do rodape e o 18Asset 208 (img/marca-vertical-ideal-m.svg), com a placa
   Linho #F3F0E9 do proprio arquivo, sem tingir. Sobre o rodape azul le como um carimbo claro. */
.ft-legal{display:flex;align-items:center;gap:14px}
.ft-mono{height:34px;width:auto;flex:none;display:block;border-radius:2px}
@media (max-width:880px){.ft-mono{height:28px}}

/* ========== WHATSAPP FLOATING ========== */
.whatsapp-float {
  position: fixed; bottom: 22px; right: 22px;
  width: 46px; height: 46px;
  background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(20,48,76,0.3);
  z-index: 999; transition: transform 0.2s;
}
.whatsapp-float:hover { transform: scale(1.1); }
.whatsapp-float svg { width: 24px; height: 24px; fill: white; }
.whatsapp-float img { width: 28px; height: 28px; filter: brightness(0) invert(1); }

/* ========== ALCANCE BOX ========== */
.alcance-box {
  background: var(--fundo);
  color: var(--white);
  padding: 24px 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 30px 0;
}
.alcance-box .icon-circle {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--dark-gray); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; padding: 10px;
}
.alcance-box .icon-circle img { height: 24px; width: auto; }
/* a cor vem declarada aqui porque .content h3 vence a heranca da caixa */
.alcance-box h3 { font-size: 15px; font-weight: 600; text-decoration: underline;
  margin-bottom: 4px; color: var(--white); }
.alcance-box p { font-size: 15px; color: var(--blue-light); }

/* ========== SERVICES HERO GRID (Home) ========== */
@keyframes shColumnReveal {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.services-hero .sh-column {
  opacity: 0;
  animation: shColumnReveal 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.services-hero .sh-column:nth-child(1) { animation-delay: 0.1s; }
.services-hero .sh-column:nth-child(2) { animation-delay: 0.25s; }
.services-hero .sh-column:nth-child(3) { animation-delay: 0.4s; }
.services-hero .sh-column:nth-child(4) { animation-delay: 0.55s; }

.services-hero {
  width: 100%;
  height: min(552px, 39.375vw);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.services-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 70%;
  height: 100%;
  background-image: url('../img/CQT Sistemas da Qualidade.png');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 0;
}
.sh-column {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.sh-column:last-child { border-right: none; }
.sh-column:hover { flex: 1.5; }

/* Column background colors — #336699 derivants, lighter and more varied */
.sh-column--iso    { background: linear-gradient(160deg, rgba(85,112,140,0.4) 0%, rgba(100,130,158,0.35) 50%, rgba(120,152,180,0.3) 100%); }
.sh-column--inspect { background: linear-gradient(160deg, rgba(105,135,165,0.4) 0%, rgba(125,158,188,0.35) 50%, rgba(150,178,205,0.3) 100%); }
.sh-column--esg    { background: linear-gradient(160deg, rgba(75,100,130,0.4) 0%, rgba(95,125,155,0.35) 50%, rgba(115,148,178,0.3) 100%); }
.sh-column--food   { background: linear-gradient(160deg, rgba(90,118,148,0.4) 0%, rgba(110,140,170,0.35) 50%, rgba(135,165,195,0.3) 100%); }

/* Overlay gradient */
.sh-column::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(51,102,153,0.15) 0%, rgba(51,102,153,0.6) 100%);
  transition: background 0.5s;
  z-index: 1;
}
.sh-column:hover::before {
  background: linear-gradient(to bottom, rgba(51,102,153,0.05) 0%, rgba(51,102,153,0.45) 100%);
}

/* Background image (for future use) */
.sh-column-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Content container */
.sh-content {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 32px;
  color: #fff;
}

/* Title area */
.sh-title {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin-bottom: 12px;
}
/* o peso e do bloco inteiro, nao da palavra */
.sh-title strong {
  font-weight: inherit;
}
.sh-accent-bar {
  width: 40px;
  height: 3px;
  background: var(--accent-red);
  margin-bottom: 16px;
}

/* Vertical text */
.sh-vertical {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 34px;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  opacity: 0.2;
  white-space: nowrap;
  color: #fff;
  transition: opacity 0.5s;
  z-index: 2;
  pointer-events: none;
}
.sh-column:hover .sh-vertical {
  opacity: 0.35;
}

/* List items (appear on hover) */
.sh-list {
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s;
}
.sh-column:hover .sh-list {
  opacity: 1;
  transform: translateY(0);
}
.sh-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.9);
}
.sh-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-red);
  flex-shrink: 0;
}

/* CTA button */
.sh-cta {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  color: #fff;
  padding: 8px 24px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.3s;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  width: fit-content;
}
.sh-cta:hover {
  background: #fff;
  color: var(--dark-gray);
  border-color: #fff;
}

/* Bottom label */
.sh-label {
  position: absolute;
  bottom: 16px;
  left: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
  max-width: calc(100% - 56px);
}
.sh-label svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ========== SERVICES HERO SLATE VARIANT (Home) ========== */
.services-hero--slate {
  margin-top: 0;
}
/* Gradientes azulados translúcidos — escuro → claro entre colunas */
.services-hero--slate .sh-column--iso {
  background: linear-gradient(160deg, rgba(50,90,150,0.45) 0%, rgba(70,115,175,0.40) 100%);
}
.services-hero--slate .sh-column--inspect {
  background: linear-gradient(160deg, rgba(70,120,185,0.40) 0%, rgba(95,148,210,0.35) 100%);
}
.services-hero--slate .sh-column--esg {
  background: linear-gradient(160deg, rgba(95,150,215,0.35) 0%, rgba(125,178,235,0.30) 100%);
}
.services-hero--slate .sh-column--food {
  background: linear-gradient(160deg, rgba(125,175,232,0.30) 0%, rgba(155,200,248,0.25) 100%);
}

/* ========== SERVICE HUB — Painel Interativo ========== */
.service-hub {
  position: relative;
  padding: 80px max(40px, calc(50% - 580px));
  overflow: hidden;
  background: #fff;
}

/* Fundo — grain + mesh */
.sh-hub-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sh-hub-grain {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
}
.sh-hub-mesh {
  position: absolute;
  inset: 0;
  background: #fff;
}

/* Linhas conectoras SVG */
.sh-hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.sh-hub-line {
  fill: none;
  stroke: rgba(51,102,153,0.2);
  stroke-width: 1.5;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke 0.4s;
}
.service-hub.is-visible .sh-hub-line {
  animation: hubLineDraw 2s ease forwards;
}
.sh-hub-line--1 { animation-delay: 0.3s; }
.sh-hub-line--2 { animation-delay: 0.6s; }
.sh-hub-line--3 { animation-delay: 0.9s; }
.sh-hub-line--4 { animation-delay: 1.2s; }
.sh-hub-line--5 { animation-delay: 0.1s; stroke: rgba(51,102,153,0.15); }
@keyframes hubLineDraw {
  to { stroke-dashoffset: 0; }
}

/* Header */
.sh-hub-header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 56px;
}
.sh-hub-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 16px;
  padding: 6px 20px;
  border: 1px solid rgba(51,102,153,0.3);
  border-radius: 20px;
}
.sh-hub-title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #315275;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.sh-hub-title strong {
  font-weight: inherit;
  color: inherit;
}

/* Grid — 4 cards + centro */
.sh-hub-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  max-width: 1280px;
  margin: 0 auto;
}

/* Cards */
.sh-hub-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.service-hub.is-visible .sh-hub-card {
  opacity: 1;
  transform: translateY(0);
}
.service-hub.is-visible .sh-hub-card[data-hub="0"] { transition-delay: 0.15s; }
.service-hub.is-visible .sh-hub-card[data-hub="1"] { transition-delay: 0.30s; }
.service-hub.is-visible .sh-hub-card[data-hub="2"] { transition-delay: 0.45s; }
.service-hub.is-visible .sh-hub-card[data-hub="3"] { transition-delay: 0.60s; }

/* Card glow */
.sh-hub-card-glow {
  display: none;
}

/* Card inner — white + thin border */
.sh-hub-card-inner {
  position: relative;
  z-index: 1;
  padding: 32px 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #A3B5C8;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sh-hub-card:hover .sh-hub-card-inner {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(20,48,76,0.08);
  border-color: #336699;
}

/* Card icon */
.sh-hub-card-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
}
.sh-hub-card-icon svg {
  width: 100%;
  height: 100%;
}
.sh-hub-icon-ring {
  fill: none;
  stroke: #336699;
  stroke-width: 1.5;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transition: stroke 0.4s;
}
.service-hub.is-visible .sh-hub-icon-ring {
  animation: hubRingDraw 1.2s ease forwards;
}
.sh-hub-card:hover .sh-hub-icon-ring {
  stroke: var(--accent-red);
}
@keyframes hubRingDraw {
  to { stroke-dashoffset: 0; }
}
.sh-hub-icon-check,
.sh-hub-icon-globe,
.sh-hub-icon-lens,
.sh-hub-icon-doc {
  fill: none;
  stroke: #315275;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Card number */
.sh-hub-card-num {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgba(51,102,153,0.3);
  transition: color 0.4s;
}
.sh-hub-card:hover .sh-hub-card-num {
  color: rgba(51,102,153,0.5);
}

/* Card text */
.sh-hub-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #315275;
  line-height: 1.2;
  margin-bottom: 12px;
}
.sh-hub-card h3 strong {
  font-weight: inherit;
}
.sh-hub-card-desc {
  font-size: 13px;
  color: rgba(20,48,76,0.55);
  line-height: 1.6;
  margin-bottom: 0;
  transition: color 0.4s;
}
.sh-hub-card:hover .sh-hub-card-desc {
  color: rgba(20,48,76,0.75);
}

/* Card details — reveal on hover */
.sh-hub-card-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease;
  margin-top: 0;
}
.sh-hub-card:hover .sh-hub-card-details {
  max-height: 200px;
  opacity: 1;
  margin-top: 16px;
}
.sh-hub-card-details ul {
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
}
.sh-hub-card-details li {
  font-size: 12px;
  color: rgba(20,48,76,0.6);
  padding: 5px 0;
  border-bottom: 1px solid rgba(20,48,76,0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sh-hub-card-details li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-red);
  flex-shrink: 0;
}

/* CTA button */
.sh-hub-btn {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #315275;
  padding: 10px 24px;
  border: 1px solid rgba(49,82,117,0.3);
  border-radius: 4px;
  transition: all 0.3s;
  background: transparent;
}
.sh-hub-btn:hover {
  background: var(--accent-red);
  border-color: var(--accent-red);
  color: #fff;
}

/* Centro — contador */
.sh-hub-center {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
  align-self: center;
}
.service-hub.is-visible .sh-hub-center {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.35s;
}
.sh-hub-center-ring {
  position: relative;
  width: 160px;
  height: 160px;
}
.sh-hub-center-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.sh-hub-ring-bg {
  fill: none;
  stroke: #A3B5C8;
  stroke-width: 2;
}
.sh-hub-ring-progress {
  fill: none;
  stroke: var(--accent-red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 352;
  stroke-dashoffset: 352;
}
.service-hub.is-visible .sh-hub-ring-progress {
  animation: hubRingFill 2s ease 0.6s forwards;
}
@keyframes hubRingFill {
  to { stroke-dashoffset: 0; }
}

.sh-hub-center-content {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sh-hub-counter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #315275;
  display: block;
  line-height: 1;
}
.sh-hub-counter-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(20,48,76,0.4);
  display: block;
  margin-top: 4px;
  line-height: 1.3;
}
.sh-hub-since {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(49,82,117,0.6);
  letter-spacing: 1px;
}
.sh-hub-since strong {
  color: #315275;
}

/* ========== HERO REFINED — Corporate Premium ========== */
@keyframes heroRevealUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroRevealVisual {
  from { opacity: 0; transform: translateX(30px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroGeoLine {
  from { stroke-dashoffset: 1400; }
  to   { stroke-dashoffset: 0; }
}
@keyframes heroGeoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroGeoDot {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes heroGeoRectReveal {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes heroGeoCrossReveal {
  from { opacity: 0; transform: rotate(-90deg) scale(0); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes heroGeoDiamondReveal {
  from { opacity: 0; transform: scale(0) rotate(45deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes heroGeoShapeReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroGeoCurveMain {
  from { stroke-dashoffset: 1600; }
  to   { stroke-dashoffset: 0; }
}

.reveal {
  opacity: 0;
  animation: heroRevealUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--reveal-delay, 0s);
}
.reveal-visual {
  opacity: 0;
  animation: heroRevealVisual 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: var(--reveal-delay, 0.3s);
}

.hero-refined {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
  border-bottom: 1px solid rgba(20,48,76,0.06);
  padding-left: max(40px, calc(50% - 580px));
  padding-right: max(40px, calc(50% - 580px));
}
.hero-refined__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 85% 20%, rgba(51,102,153,0.035) 0%, transparent 70%);
  pointer-events: none;
}
/* Forma geométrica CSS — círculo grande lado direito */
.hero-refined__bg::before {
  content: '';
  position: absolute;
  top: 8%;
  right: 5%;
  width: 280px;
  height: 280px;
  border: 2px solid rgba(49,82,117, 0.08);
  border-radius: 50%;
  opacity: 0;
  animation: heroGeoShapeReveal 1.5s ease forwards;
  animation-delay: 0.5s;
}

/* Geometric background SVG */
.hero-refined__geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-refined__geo-line {
  fill: none;
  stroke: rgba(49,82,117, 0.09);
  stroke-width: 1;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: heroGeoLine 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.3s;
}
.hero-refined__geo-line--v {
  stroke: rgba(49,82,117, 0.07);
  stroke-dasharray: 6 10;
  stroke-dashoffset: 0;
  animation: heroGeoFadeIn 1.8s ease forwards;
  animation-delay: 0.6s;
  opacity: 0;
}
.hero-refined__geo-line--mid {
  stroke: rgba(49,82,117, 0.05);
  animation-delay: 0.8s;
}
.hero-refined__geo-dot {
  fill: rgba(49,82,117, 0.14);
  opacity: 0;
  animation: heroGeoDot 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1.8s;
}
.hero-refined__geo-dot--accent {
  fill: rgba(51,102,153,0.18);
  animation-delay: 2s;
}
.hero-refined__geo-rect {
  fill: none;
  stroke: rgba(49,82,117, 0.08);
  stroke-width: 1.5;
  opacity: 0;
  animation: heroGeoRectReveal 1s ease forwards;
  animation-delay: 1.2s;
}
.hero-refined__geo-rect--alt {
  stroke: rgba(51,102,153,0.1);
  animation-delay: 1.5s;
}
.hero-refined__geo-curve {
  fill: none;
  stroke: rgba(49,82,117, 0.1);
  stroke-width: 1.5;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: heroGeoLine 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.8s;
}
.hero-refined__geo-curve--main {
  stroke: rgba(49,82,117, 0.07);
  stroke-width: 1;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: heroGeoCurveMain 3.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}
.hero-refined__geo-curve--alt {
  stroke: rgba(49,82,117, 0.06);
  stroke-width: 1;
  animation-delay: 1.4s;
}
/* Círculos outline grandes */
.hero-refined__geo-circle {
  fill: none;
  stroke: rgba(49,82,117, 0.07);
  stroke-width: 1.5;
  opacity: 0;
  animation: heroGeoShapeReveal 1.8s ease forwards;
  animation-delay: 1s;
}
.hero-refined__geo-circle--sm {
  stroke-width: 1;
  stroke: rgba(49,82,117, 0.05);
  animation-delay: 1.5s;
}
.hero-refined__geo-cross {
  opacity: 0;
  animation: heroGeoCrossReveal 0.6s ease forwards;
  animation-delay: 2.2s;
}
.hero-refined__geo-cross line {
  stroke: rgba(49,82,117, 0.12);
  stroke-width: 1.5;
}
.hero-refined__geo-diamond {
  fill: none;
  stroke: rgba(49,82,117, 0.1);
  stroke-width: 1.5;
  opacity: 0;
  animation: heroGeoDiamondReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 2s;
}
.hero-refined__geo-diag {
  fill: none;
  stroke: rgba(49,82,117, 0.05);
  stroke-width: 1;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: heroGeoLine 3s ease forwards;
  animation-delay: 1s;
}

.hero-refined__container {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  gap: 40px;
  padding: 72px 0 64px;
  min-height: 520px;
}

/* Badge */
.hero-refined__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.hero-refined__badge-line {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent-red);
}
.hero-refined__badge-text {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #14304C;
}

/* Title */
.hero-refined__title {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.16;
  color: #14304C;
  margin-bottom: 20px;
  letter-spacing: -0.012em;
}
.hero-refined__title span {
  display: block;
}
/* Bullet vermelho nos dois pilares do titulo, com entrada em pop */
.hero-refined__title span:not(.hero-refined__title--light)::before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--accent-red, #336699);
  margin-right: 13px;
  vertical-align: middle;
  position: relative;
  top: -0.06em;
  opacity: 0;
  transform-origin: center;
  animation: heroBulletIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--reveal-delay, 0s) + 0.2s);
}
@keyframes heroBulletIn {
  0%   { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-refined__title span:not(.hero-refined__title--light)::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.hero-refined__title--light {
  font-weight: 600;
  font-size: 0.58em;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #315275;
}
.hero-refined__title--accent {
  color: #14304C;
  font-weight: 700;
}

/* Subtitle */
.hero-refined__subtitle {
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: #14304C;
  opacity: 0.7;
  max-width: 500px;
  margin-bottom: 32px;
}

/* Traços decrescentes decorativos — lado a lado, espessos */
.hero-refined__dashes {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
  max-width: 500px;
}
.hero-refined__dash {
  display: block;
  height: 3px;
  background: var(--color-accent);
  border-radius: 1px;
}
.hero-refined__dash--1 { flex: 3; }
.hero-refined__dash--2 { flex: 2; }
.hero-refined__dash--3 { flex: 1; }

/* Buttons */
.hero-refined__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-refined__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  letter-spacing: 0.3px;
}
.hero-refined__btn--primary {
  background: var(--fundo);
  color: var(--color-white);
  border: 1.5px solid var(--color-primary);
}
.hero-refined__btn--primary svg {
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s;
}
.hero-refined__btn--primary:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20,48,76,0.18);
}
.hero-refined__btn--primary:hover svg {
  opacity: 1;
  transform: translateX(3px);
}
.hero-refined__btn--whatsapp {
  background: transparent;
  color: #25D366;
  border: 1.5px solid #25D366;
}
.hero-refined__btn--whatsapp:hover {
  background: #25D366;
  color: #fff;
  border-color: #25D366;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.25);
}

/* ---- Visual Column — Geometric Frame ---- */
.hero-refined__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-refined__frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 36px 32px 28px;
}

/* Corner accents */
.hero-refined__corner {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.hero-refined__corner--tl {
  top: 0; left: 0;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
}
.hero-refined__corner--br {
  bottom: 0; right: 0;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}

/* Stats strip */
.hero-refined__stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(20,48,76,0.08);
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 32px;
  padding-right: 32px;
}
.hero-refined__stat {
  flex: 1;
  text-align: center;
}
.hero-refined__stat-num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #315275;
  line-height: 1;
  letter-spacing: -0.5px;
}
.hero-refined__stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 6px;
  line-height: 1.3;
}
.hero-refined__stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(51,102,153,0.1);
  flex-shrink: 0;
}

/* Image wrapper — alinhada com a barra dos stats */
.hero-refined__img-wrap {
  position: relative;
  margin-bottom: 20px;
  margin-left: -32px;
  margin-right: -32px;
  overflow: hidden;
}
.hero-refined__img-wrap img {
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Texto vertical decorativo lado direito */
.hero-refined__side-text {
  position: absolute;
  right: -24px;
  bottom: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(26,43,77,0.4);
  white-space: nowrap;
  pointer-events: none;
}

/* Gold accent bar */
.hero-refined__accent-bar {
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}

/* ========== HERO REFINED — Responsive ========== */
@media (max-width: 1024px) {
  .hero-refined__container {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 60px 0 52px;
  }
  .hero-refined__frame { max-width: 400px; padding: 28px 24px 20px; }
  .hero-refined__stats { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .hero-refined__img-wrap { margin-left: -24px; margin-right: -24px; }
  .hero-refined__stat-num { font-size: 24px; }
  .hero-refined__side-text { display: none; }
  .hero-refined__geo { display: none; }
  .hero-refined__bg::before { display: none; }
}

@media (max-width: 768px) {
  .hero-refined__container {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 44px 0 36px;
    min-height: auto;
  }
  .hero-refined__visual {
    order: -1;
    justify-content: center;
  }
  .hero-refined__frame { max-width: 360px; padding: 24px 20px 16px; }
  .hero-refined__stats { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .hero-refined__img-wrap { margin-left: -20px; margin-right: -20px; }
  .hero-refined__stat-num { font-size: 22px; }
  .hero-refined__side-text { display: none; }
  .hero-refined__geo { display: none; }
  .hero-refined__bg::before { display: none; }
  .hero-refined__content { text-align: center; }
  .hero-refined__badge { justify-content: center; }
  .hero-refined__dashes { align-items: center; }
  .hero-refined__title { font-size: 24px; }
  .hero-refined__subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
  }
  .hero-refined__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-refined__btn {
    justify-content: center;
    width: 100%;
  }
}

/* ========== DIAGRAMAS — Estilos comuns ========== */
.diag-section {
  background: #fff;
  padding: 72px max(40px, calc(50% - 580px));
  border-top: 1px solid #A3B5C8;
}
.diag-header {
  text-align: center;
  margin-bottom: 48px;
}
.diag-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 12px;
  padding: 5px 18px;
  border: 1px solid rgba(51,102,153,0.2);
  border-radius: 20px;
}
.diag-title {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #315275;
  line-height: 1.2;
  margin-bottom: 8px;
}
.diag-title strong { font-weight: inherit; color: inherit; }
.diag-sub {
  font-size: 14px;
  color: #336699;
}

/* ========== DIAGRAMA 2 — Timeline ========== */
.diag-timeline-track {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.diag-timeline-line {
  position: absolute;
  top: 18px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: #A3B5C8;
}
.diag-timeline-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: var(--accent-red);
  transition: width 1.5s ease;
}
.diag-timeline.is-visible .diag-timeline-line::after {
  width: 100%;
}
.diag-timeline-step {
  position: relative;
  flex: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.diag-timeline.is-visible .diag-timeline-step {
  opacity: 1;
  transform: translateY(0);
}
.diag-timeline.is-visible .diag-timeline-step[data-step="0"] { transition-delay: 0.2s; }
.diag-timeline.is-visible .diag-timeline-step[data-step="1"] { transition-delay: 0.4s; }
.diag-timeline.is-visible .diag-timeline-step[data-step="2"] { transition-delay: 0.6s; }
.diag-timeline.is-visible .diag-timeline-step[data-step="3"] { transition-delay: 0.8s; }
.diag-timeline.is-visible .diag-timeline-step[data-step="4"] { transition-delay: 1.0s; }
.diag-timeline-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #A3B5C8;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
  transition: border-color 0.4s, background 0.4s;
}
.diag-timeline.is-visible .diag-timeline-dot {
  border-color: var(--accent-red);
}
.diag-timeline-step:hover .diag-timeline-dot {
  background: var(--accent-red);
}
.diag-timeline-card {
  background: #fff;
  border: 1px solid #A3B5C8;
  border-radius: 8px;
  padding: 24px 16px;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.diag-timeline-step:hover .diag-timeline-card {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(20,48,76,0.06);
  border-color: #336699;
}
.diag-timeline-num {
  font-size: 11px;
  font-weight: 700;
  color: #336699;
  letter-spacing: 2px;
}
.diag-timeline-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: #315275;
  margin: 8px 0;
}
.diag-timeline-card p {
  font-size: 12px;
  color: #336699;
  line-height: 1.5;
}

/* ========== DIAGRAMA 3 — Metrics ========== */
.diag-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.diag-metric {
  text-align: center;
  background: #fff;
  border: 1px solid #A3B5C8;
  border-radius: 8px;
  padding: 36px 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s, box-shadow 0.3s;
}
.diag-metrics.is-visible .diag-metric {
  opacity: 1;
  transform: translateY(0);
}
.diag-metrics.is-visible .diag-metric[data-step="0"] { transition-delay: 0.1s; }
.diag-metrics.is-visible .diag-metric[data-step="1"] { transition-delay: 0.25s; }
.diag-metrics.is-visible .diag-metric[data-step="2"] { transition-delay: 0.4s; }
.diag-metrics.is-visible .diag-metric[data-step="3"] { transition-delay: 0.55s; }
.diag-metric:hover {
  border-color: #336699;
  box-shadow: 0 8px 24px rgba(20,48,76,0.06);
}
.diag-metric-ring {
  width: 100px;
  height: 100px;
  margin: 0 auto 12px;
  transform: rotate(-90deg);
}
.diag-metric-ring-bg {
  fill: none;
  stroke: #A3B5C8;
  stroke-width: 3;
}
.diag-metric-ring-fill {
  fill: none;
  stroke: var(--accent-red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;
  transition: stroke-dashoffset 2s ease;
}
.diag-metrics.is-visible .diag-metric-ring-fill {
  stroke-dashoffset: calc(276.46 * (1 - var(--pct)));
}
.diag-metric-content {
  position: relative;
  margin-top: -68px;
  margin-bottom: 20px;
}
.diag-metric-num {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #315275;
}
.diag-metric-suffix {
  font-size: 18px;
  font-weight: 600;
  color: #336699;
}
.diag-metric h4 {
  font-size: 14px;
  font-weight: 700;
  color: #315275;
  margin-bottom: 6px;
}
.diag-metric p {
  font-size: 12px;
  color: #336699;
  line-height: 1.5;
}

/* ========== DIAGRAMA 4 — Radial ========== */
.diag-radial-container {
  position: relative;
  width: 360px;
  height: 360px;
  margin: 0 auto;
}
.diag-radial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: #fff;
  border: 1px solid #A3B5C8;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.diag-radial-logo {
  width: 32px;
  height: 32px;
}
.diag-radial-center span {
  font-size: 9px;
  font-weight: 700;
  color: #315275;
  letter-spacing: 2px;
  margin-top: 2px;
}
.diag-radial-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.diag-radial-orbit--1 {
  position: absolute;
  inset: 0;
}
.diag-radial-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  transform: rotate(var(--angle)) translateY(-140px) rotate(calc(-1 * var(--angle)));
  background: #fff;
  border: 1px solid #A3B5C8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  opacity: 0;
  z-index: 2;
}
.diag-radial.is-visible .diag-radial-node {
  opacity: 1;
}
.diag-radial.is-visible .diag-radial-node[data-step="0"] { transition-delay: 0.15s; }
.diag-radial.is-visible .diag-radial-node[data-step="1"] { transition-delay: 0.3s; }
.diag-radial.is-visible .diag-radial-node[data-step="2"] { transition-delay: 0.45s; }
.diag-radial.is-visible .diag-radial-node[data-step="3"] { transition-delay: 0.6s; }
.diag-radial.is-visible .diag-radial-node[data-step="4"] { transition-delay: 0.75s; }
.diag-radial.is-visible .diag-radial-node[data-step="5"] { transition-delay: 0.9s; }
.diag-radial-node:hover {
  border-color: var(--accent-red);
  transform: rotate(var(--angle)) translateY(-140px) rotate(calc(-1 * var(--angle))) scale(1.15);
  box-shadow: 0 6px 20px rgba(20,48,76,0.08);
}
.diag-radial-label {
  font-size: 9px;
  font-weight: 700;
  color: #315275;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.1;
}

/* ========== DIAGRAMA 5 — Sectors ========== */
.diag-sectors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
.diag-sector {
  background: #fff;
  border: 1px solid #A3B5C8;
  border-radius: 8px;
  padding: 32px 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s, box-shadow 0.3s;
}
.diag-sectors.is-visible .diag-sector {
  opacity: 1;
  transform: translateY(0);
}
.diag-sectors.is-visible .diag-sector[data-step="0"] { transition-delay: 0.1s; }
.diag-sectors.is-visible .diag-sector[data-step="1"] { transition-delay: 0.2s; }
.diag-sectors.is-visible .diag-sector[data-step="2"] { transition-delay: 0.3s; }
.diag-sectors.is-visible .diag-sector[data-step="3"] { transition-delay: 0.4s; }
.diag-sectors.is-visible .diag-sector[data-step="4"] { transition-delay: 0.5s; }
.diag-sectors.is-visible .diag-sector[data-step="5"] { transition-delay: 0.6s; }
.diag-sector:hover {
  border-color: #336699;
  box-shadow: 0 8px 24px rgba(20,48,76,0.06);
  transform: translateY(-4px);
}
.diag-sector-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  color: #336699;
}
.diag-sector-icon svg {
  width: 100%;
  height: 100%;
}
.diag-sector:hover .diag-sector-icon { color: var(--accent-red); }
.diag-sector h4 {
  font-size: 15px;
  font-weight: 700;
  color: #315275;
  margin-bottom: 6px;
}
.diag-sector p {
  font-size: 12px;
  color: #336699;
  line-height: 1.5;
}

/* ===== Como Atuamos — banda slate premium ===== */
.diag-timeline--band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #2d3a4d 0%, #315275 55%, #4a6178 100%);
  border-top: none;
}
.diag-band-geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.diag-band-geo path,
.diag-band-geo line { fill: none; stroke: rgba(255,255,255,0.11); stroke-width: 1; }
.diag-band-geo circle { fill: none; stroke: rgba(255,255,255,0.09); stroke-width: 1; }
.diag-band-geo .diag-band-geo-dot { fill: rgba(255,255,255,0.28); stroke: none; }
.diag-band-geo .diag-band-geo-cross line { stroke: rgba(255,255,255,0.18); }
.diag-timeline--band .diag-header,
.diag-timeline--band .diag-timeline-track { position: relative; z-index: 1; }
.diag-timeline--band .diag-title,
.diag-timeline--band .diag-title strong { color: #fff; }
.diag-timeline--band .diag-sub { color: rgba(255,255,255,0.6); }
.diag-timeline--band .diag-tag { color: var(--liga-claro); border-color: rgba(159,197,240,0.35); }
.diag-timeline--band .diag-timeline-line { background: rgba(255,255,255,0.15); }
.diag-timeline--band .diag-timeline-dot { background: #315275; border-color: rgba(255,255,255,0.35); }
.diag-timeline--band.is-visible .diag-timeline-dot { border-color: var(--accent-red); }
.diag-timeline--band .diag-timeline-step:hover .diag-timeline-dot { background: var(--accent-red); }
.diag-timeline--band .diag-timeline-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 18px 12px 8px;
}
.diag-timeline--band .diag-timeline-step:hover .diag-timeline-card {
  transform: translateY(-4px);
  box-shadow: none;
}
.diag-timeline--band .diag-timeline-num {
  display: block;
  font-size: 46px;
  font-weight: 200;
  color: rgba(255,255,255,0.16);
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 6px;
  transition: color 0.3s;
}
.diag-timeline--band .diag-timeline-step:hover .diag-timeline-num { color: rgba(51,102,153,0.9); }
.diag-timeline--band .diag-timeline-card h4 { color: #fff; font-size: 15px; margin: 4px 0 7px; }
.diag-timeline--band .diag-timeline-card p { color: rgba(255,255,255,0.5); font-size: 12px; }

/* ===== Setores — lista HoverExpand (linhas que expandem com foto) ===== */
.diag-sectors .hx { max-width: 800px; margin: 0 auto; color: #315275; }
.hx-row {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  height: 72px;
  overflow: hidden;
  border-top: 1px solid rgba(20,48,76,0.14);
  transition: height 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease;
}
.hx-row:last-child { border-bottom: 1px solid rgba(20,48,76,0.14); }
.hx-row:hover { height: 300px; }
.hx:hover .hx-row:not(:hover) { opacity: 0.4; }
.hx-media {
  position: absolute; inset: 0;
  background-image: var(--hx-img);
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.5s cubic-bezier(0.23,1,0.32,1), transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
.hx-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(51,102,153,0.82) 0%, rgba(51,102,153,0.28) 48%, rgba(51,102,153,0.08) 100%);
}
.hx-row:hover .hx-media { opacity: 1; transform: scale(1); }
.hx-content { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 0 24px 16px; z-index: 1; }
.hx-inner { display: flex; width: 100%; align-items: flex-end; justify-content: space-between; gap: 16px; }
.hx-lead { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.hx-idx { font-size: 12px; color: #336699; opacity: 0.7; flex-shrink: 0; transition: color 0.3s, opacity 0.3s; }
.hx-label { font-size: clamp(16px, 1.8vw, 22px); font-weight: 700; letter-spacing: -0.012em; color: #315275; white-space: nowrap; transition: color 0.3s; }
.hx-desc { font-size: 13px; color: rgba(255,255,255,0.78); white-space: nowrap; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.23,1,0.32,1); }
.hx-sub { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #336699; opacity: 0.55; flex-shrink: 0; transition: color 0.3s, opacity 0.3s; }
.hx-row:hover .hx-idx { color: rgba(255,255,255,0.6); opacity: 1; }
.hx-row:hover .hx-label { color: #fff; }
.hx-row:hover .hx-desc { opacity: 1; transform: translateX(0); transition-delay: 0.1s; }
.hx-row:hover .hx-sub { color: rgba(255,255,255,0.72); opacity: 1; }
@media (max-width: 640px) {
  .hx-desc { display: none; }
  .hx-label { font-size: 19px; }
  .hx-content { padding: 0 16px 14px; }
}

/* ===== Posicionamento (home) + fatos (como-trabalhamos) ===== */
.pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 960px; margin: 0 auto; }
/* 02/10/2026: PADRAO DE CARD DO SITE, o mesmo da .ifc-cel: solto, borda fina propria, canto de 3px, vao de 8px na grade, entrelinha 1,35 */
.pos-card { border: 1px solid rgba(20,48,76,.14); border-radius: 3px; padding: 18px 20px 20px; background: var(--color-bg-alt); transition: border-color 0.3s; }
.pos-card:hover { border-color: rgba(20,48,76,.32); }
.pos-num { display: block; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--accent-red); margin-bottom: 14px; }
.pos-card h4 { font-size: 16px; font-weight: 700; color: var(--text-light); line-height: 1.25; margin-bottom: 6px; text-wrap: pretty; }
.pos-card p { font-size: 13.5px; color: var(--text-light); line-height: 1.35; }
.pos-cta-wrap { text-align: center; margin-top: 34px; }
.pos-cta { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-red); border: 1px solid rgba(51,102,153,0.4); border-radius: 3px; padding: 12px 28px; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.pos-cta:hover { background: var(--accent-red); color: #fff; border-color: var(--accent-red); }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin: 22px 0 28px; }
@media (max-width: 760px) { .pos-grid { grid-template-columns: 1fr; } }

/* ===== Faixa de clientes / prova ===== */
.clientes-logos-wrap { max-width: 880px; margin: 0 auto; }
.clientes-logos-wrap img { width: 100%; height: auto; display: block; opacity: 0.85; transition: opacity 0.3s; }
.clientes-band:hover .clientes-logos-wrap img { opacity: 1; }
.clientes-logos-wrap--page { margin: 30px auto 8px; max-width: 760px; }
.clientes-logos-wrap--page img { opacity: 0.9; }
.clientes-names { text-align: center; font-size: 13px; color: #336699; letter-spacing: 0.4px; margin-top: 18px; }
.norm-list a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.norm-list a:hover { color: var(--accent-red); border-color: var(--accent-red); }
.logo-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 18px; align-items: center; max-width: 1000px; margin: 0 auto; }
.logo-wall--page { margin: 26px auto 6px; }
.logo-cell { display: flex; align-items: center; justify-content: center; padding: 18px 14px; }
.logo-cell img { max-width: 100%; max-height: 48px; width: auto; height: auto; opacity: 0.72; transition: opacity 0.25s; }
.logo-cell img:hover { opacity: 1; }
@media (max-width: 640px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } .logo-cell { padding: 14px 10px; } .logo-cell img { max-height: 42px; } }

/* ========== DIAGRAMA 6 — Compare ========== */
.diag-compare-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}
.diag-compare-col {
  background: #fff;
  border: 1px solid #A3B5C8;
  border-radius: 8px;
  padding: 32px 28px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.3s;
}
.diag-compare-col--after {
  transform: translateX(20px);
}
.diag-compare.is-visible .diag-compare-col {
  opacity: 1;
  transform: translateX(0);
}
.diag-compare.is-visible .diag-compare-col[data-step="0"] { transition-delay: 0.1s; }
.diag-compare.is-visible .diag-compare-col[data-step="2"] { transition-delay: 0.5s; }
.diag-compare-col:hover { border-color: #336699; }
.diag-compare-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #A3B5C8;
}
.diag-compare-col--before .diag-compare-label { color: #336699; }
.diag-compare-col--after .diag-compare-label { color: var(--accent-red); border-color: var(--accent-red); }
.diag-compare-col ul {
  list-style: none;
  padding: 0;
}
.diag-compare-col li {
  font-size: 13px;
  color: #315275;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-bg-alt);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}
.diag-compare-col--before li::before {
  content: '✕';
  color: #336699;
  font-size: 11px;
  flex-shrink: 0;
}
.diag-compare-col--after li::before {
  content: '✓';
  color: var(--accent-red);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.diag-compare-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 40px;
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
  color: #336699;
}
.diag-compare.is-visible .diag-compare-center {
  opacity: 1;
}
.diag-compare-arrow svg {
  width: 24px;
  height: 60px;
}
.diag-compare-center span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-red);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .header { height: auto; padding: 8px 16px; flex-wrap: wrap; }
  .header-logo img, .header-logo svg { height: 58px; }
  /* menu do topo continua no mobile: links enxutos com quebra de linha */
  .header-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    gap: 2px 14px;
    padding: 4px 0 8px;
  }
  .header-nav a { font-size: 11.5px; }
  .mega-menu { display: none !important; }  /* sem hover no toque; o link do pai navega */
  /* hero-refined responsive handled inline above */
  .hero-refined { padding-left: 20px; padding-right: 20px; }
  .secondary-nav { flex-wrap: wrap; gap: 12px; padding: 10px 20px; }
  .services-section { padding: 24px 20px; }
  .services-header { flex-direction: column; }
  .services-outer { flex-direction: column; }
.services-right { width: 100%; }
.services-photo-col { min-height: 220px; flex: none; }
.services-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter-contact { flex-direction: column; padding: 0 20px; }
  .contact-box { width: 100%; }
  .blog-filters { gap: 6px; }
  .filter-tab { font-size: 12px; padding: 5px 12px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-section { padding-left: 20px; padding-right: 20px; }
  .content { padding: 48px 16px 96px; }
  .page-banner { padding: 26px 16px; min-height: auto; }
  .page-banner::after { display: none; }
  .breadcrumb { padding: 6px 16px; }
  .service-block { padding: 24px 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .norm-list { columns: 1; }
  /* Services hero responsive */
  .services-hero { flex-direction: column; height: auto; }
  .sh-column { min-height: 320px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .sh-column:hover { flex: 1; }
  .sh-content { padding: 32px 20px; }
  .sh-title { font-size: 24px; }
  .sh-vertical { display: none; }
  .sh-list { opacity: 1; transform: none; }
  .sh-label { left: 20px; }
  /* Services hero slate responsive */
  .services-hero--slate { margin-top: 0; }
  /* Service hub responsive */
  .service-hub { padding: 48px 20px; }
  .sh-hub-title { font-size: 26px; }
  .sh-hub-grid { grid-template-columns: 1fr; gap: 16px; }
  .sh-hub-center { order: -1; margin-bottom: 8px; }
  .sh-hub-lines { display: none; }
  .sh-hub-card-details { max-height: 200px; opacity: 1; margin-top: 12px; }
  /* Diagramas responsive */
  .diag-section { padding: 48px 20px; }
  .diag-title { font-size: 24px; }
  .diag-timeline-track { flex-direction: column; gap: 0; }
  .diag-timeline-line { display: none; }
  .diag-metrics-grid { grid-template-columns: 1fr 1fr; }
  .diag-radial-container { width: 280px; height: 280px; }
  .diag-radial-node { width: 52px; height: 52px; margin: -26px 0 0 -26px; transform: rotate(var(--angle)) translateY(-110px) rotate(calc(-1 * var(--angle))); }
  .diag-radial-node:hover { transform: rotate(var(--angle)) translateY(-110px) rotate(calc(-1 * var(--angle))) scale(1.1); }
  .diag-sectors-grid { grid-template-columns: 1fr 1fr; }
  .diag-compare-grid { grid-template-columns: 1fr; gap: 16px; }
  .diag-compare-center { flex-direction: row; padding-top: 0; }
  .diag-compare-arrow svg { width: 60px; height: 24px; transform: rotate(-90deg); }
  .services-hero--slate { margin-top: 0; }
}



/* ===== Ideal Metrics horizontal lockup ===== */
.im-hero-stamp {
  margin: 30px 0 22px;   /* respiro do topo da secao */
  display: flex;
  align-items: center;
  gap: 28px;
}
.im-hero-stamp img {
  height: 92px;   /* Asset 41, lockup horizontal (razao 2,32); 214px de largura */
  width: auto;
  opacity: 1;
  /* sem filter: o a29 traz a estrela em #336699 e brightness(0) a deixaria preta */
}

.im-footer-brand {
  margin: 14px 0 10px;
}
.im-footer-brand img {
  height: 50px;
  width: auto;
  opacity: 0.65;
}

/* ========== GESTÃO DE CARBONO — hero + infográficos ========== */
/* Coluna 4 do hero (substitui --food, mantém a progressão escuro→claro) */
.sh-column--carbon { background: linear-gradient(160deg, rgba(90,118,148,0.4) 0%, rgba(110,140,170,0.35) 50%, rgba(135,165,195,0.3) 100%); }
.services-hero--slate .sh-column--carbon {
  background: linear-gradient(160deg, rgba(125,175,232,0.30) 0%, rgba(155,200,248,0.25) 100%);
}

/* Eyebrow de seção */
.carb-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--blue-medium);
  margin: 28px 0 2px;
}

/* Ícones — idioma da icon-library (38x38, traço fino, monocromático) */
.carb-ic { width: 38px; height: 38px; display: block; color: var(--color-text); flex-shrink: 0; }
.carb-ic svg { width: 100%; height: 100%; display: block; }
.carb-ic svg * { stroke-width: 1.4; }

/* Infográfico: escopos GHG */
.carb-scopes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0 8px;
}
.carb-scope {
  border: 1px solid rgba(51,102,153,0.35);
  border-radius: 3px;
  padding: 22px 20px;
  background: transparent;
}
.carb-scope-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.carb-scope-tag {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent-red);
}
.carb-scope h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 6px;
  text-wrap: pretty;
}
.carb-scope p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0;
}

/* Portfólio de serviços */
.carb-portfolio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 18px 0 8px;
}
.carb-cat {
  border: 1px solid rgba(51,102,153,0.35);
  border-radius: 3px;
  padding: 20px 24px 20px;
  background: transparent;
}
.carb-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.carb-cat-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--accent-red);
}
.carb-cat h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.carb-cat ul { margin: 0; }
.content .carb-cat li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-light);
  margin-bottom: 8px;
  list-style: none;
}
.carb-cat li:last-child { margin-bottom: 0; }
.carb-cat li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-red);
}
.carb-cat li strong { color: var(--text-dark); font-weight: 600; }

/* Infográfico: método em 5 etapas */
.carb-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 22px 0 8px;
}
.carb-flow-step {
  position: relative;
  padding: 0 12px;
  text-align: center;
}
.carb-flow-step::before {
  content: '';
  position: absolute;
  top: 19px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--border-gray);
  z-index: 0;
}
.carb-flow-step:first-child::before { display: none; }
.carb-flow-num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 auto 12px;
  border-radius: 3px;
  background: var(--dark-gray);
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
}
.carb-flow-step h5 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 5px;
  text-wrap: pretty;
}
.carb-flow-step p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-light);
  margin: 0;
}

/* Infográfico: benefícios em grade */
.carb-benes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 18px 0 8px;
}
.carb-bene {
  border: 1px solid rgba(51,102,153,0.35);
  border-radius: 3px;
  padding: 22px 18px;
  background: transparent;
}
.carb-bene .carb-ic { margin-bottom: 12px; }
.carb-bene h5 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0 0 6px;
  text-wrap: pretty;
}
.carb-bene p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-light);
  margin: 0;
}

/* CTA */
.carb-cta {
  display: inline-block;
  margin-top: 6px;
  border: 1px solid var(--mid-gray);
  border-radius: 3px;
  padding: 10px 28px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dark);
  transition: all 0.3s;
}
.carb-cta:hover {
  background: var(--mid-gray);
  color: var(--white);
}

/* Responsivo */
@media (max-width: 860px) {
  .carb-benes { grid-template-columns: repeat(2, 1fr); }
  .carb-flow { grid-template-columns: 1fr; row-gap: 18px; }
  .carb-flow-step { text-align: left; display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; row-gap: 2px; padding: 0; }
  .carb-flow-num { grid-row: 1 / span 2; grid-column: 1; margin: 0; }
  .carb-flow-step h5 { grid-column: 2; grid-row: 1; }
  .carb-flow-step p { grid-column: 2; grid-row: 2; }
  .carb-flow-step::before { display: none; }
}
@media (max-width: 760px) {
  .carb-portfolio { grid-template-columns: 1fr; }
  .carb-scopes { grid-template-columns: 1fr; }
  .carb-benes { grid-template-columns: 1fr; }
}

.im-hero-stamp--bottom {
  margin: 30px 0 0;
}

/* Logo B.2 no canto superior direito do hero */
.im-hero-b2 {
  position: absolute;
  top: 40px;
  right: max(40px, calc(50% - 580px));
  z-index: 3;
}
.im-hero-b2 img {
  height: 73px;
  width: auto;
}

/* Selo A.4 abaixo do conteudo (sem brightness, colorido) */
.im-hero-badge {
  margin: 30px 0 0;
}
.im-hero-badge img {
  height: 84px;
  width: auto;
}

/* ===== Cards de produto clicaveis (Gestao de Carbono) ===== */
a.pos-card { display: block; text-decoration: none; color: inherit; }
.pos-card--link:hover { border-color: rgba(20,48,76,.4); }
.pos-card--link .pos-more { display: block; margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-red-text); }

/* ==========================================================================
   EFEITO DE NAVEGACAO (paginas de carbono / roteiro): marca Ideal Metrics
   Barra de secao fixa com scrollspy + secoes numeradas com numero serif fixo
   + scroll-reveal. Referencia de interacao: — CQT/cqt-smeta.html.
   ========================================================================== */

/* Barra de navegacao de secao — gruda sob o header (52px) */
.secnav {
  position: sticky;
  top: 52px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
  padding: 0 max(20px, calc(50% - 550px));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-gray);
  overflow-x: auto;
  scrollbar-width: none;
  transition: box-shadow 0.25s;
}
.secnav::-webkit-scrollbar { display: none; }
.secnav.scrolled { box-shadow: 0 6px 20px -12px rgba(20,48,76, 0.35); }
.secnav a {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid-gray);
  padding: 7px 13px;
  border-radius: 3px;
  transition: color 0.2s, background 0.2s;
}
.secnav a:hover { color: var(--accent-red); }
.secnav a.active {
  color: var(--accent-red);
  background: rgba(51,102,153, 0.08);
}

/* Corpo do roteiro */
.rot-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 40px 60px;
}
.rot-lead {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-light);
  max-width: 760px;
  margin: 0 0 8px;
}
.rot-lead strong { color: var(--color-text); font-weight: 600; }

/* Secao com scroll-reveal */
.rot-sec {
  padding: 30px 0;
  border-top: 1px solid var(--border-gray);
  scroll-margin-top: 104px; /* header 48 + secnav 46 + folga */
}
.rot-sec:first-of-type { border-top: none; }
/* Estado oculto do reveal SO quando ha JS (html.js). Sem JS, o conteudo aparece. */
html.js .rot-sec {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .rot-sec.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .rot-sec { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Layout de coluna: numero serif fixo | conteudo */
.rot-row {
  display: grid;
  grid-template-columns: 156px 1fr;
  gap: 2.6rem;
  align-items: start;
}
.rot-aside {
  position: sticky;
  top: 120px; /* header 48 + secnav 46 + folga */
}
.rot-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--accent-red);
}
.rot-kicker {
  display: inline-block;
  margin-top: 12px;
  padding-top: 9px;
  border-top: 2px solid var(--accent-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.rot-body > h2 {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.4px;
  color: var(--color-text);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.rot-body > p { margin: 0 0 11px; font-size: 15px; line-height: 1.5; color: var(--text-light); }
.rot-body > p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .rot-main { padding: 22px 20px 16px; }
  .rot-row { grid-template-columns: 1fr; gap: 1rem; }
  .rot-aside {
    position: relative;
    top: 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }
  .rot-num { font-size: 38px; }
  .rot-kicker { margin-top: 0; }
}

/* ==========================================================================
   DOCUMENTO CONSOLIDADO: rail de seções fixo à esquerda + fluxo à direita
   (gestao-carbono: todo o conteúdo dos produtos numa página só).
   ========================================================================== */
.rot-doc {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 40px 60px;
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: 3rem;
  align-items: start;
}

/* Rail vertical fixo */
.rail {
  position: sticky;
  top: 72px;                       /* header 48 + folga */
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
  border-left: 1px solid var(--border-gray);
}
.rail-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-gray);
  padding: 0 0 12px 16px;
}
.rail a {
  display: flex;
  gap: 11px;
  align-items: baseline;
  padding: 8px 0 8px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--text-light);
  font-size: 14px;
  line-height: 1.25;
  transition: color 0.2s, border-color 0.2s;
}
.rail a .rn {
  font-size: 12px;
  font-weight: 700;
  color: var(--mid-gray);
  min-width: 16px;
  transition: color 0.2s;
}
.rail a:hover { color: var(--color-text); }
.rail a.active {
  color: var(--accent-red-text);
  border-left-color: var(--accent-red);
  font-weight: 600;
}
.rail a.active .rn { color: var(--accent-red-text); }

/* Fluxo de seções */
.rot-flow { min-width: 0; }
.rot-flow .rot-sec { scroll-margin-top: 68px; } /* doc consolidado nao tem secnav no topo */
.rot-flow .rot-sec:first-of-type { border-top: none; padding-top: 0; }

/* Cabeçalho de cada seção: número serif + kicker + título */
.rot-head { margin: 0 0 16px; }
.rot-head .rot-num { display: block; }
.rot-head .rot-kicker { margin-top: 10px; }
.rot-head h2 {
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 10px 0 0;
  text-wrap: pretty;
}
.rot-desc {
  color: var(--text-light);
  font-size: 15px;
  margin: 8px 0 0;
  max-width: 680px;
}
/* Subtítulos internos de uma seção de produto */
.rot-flow h3 {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 28px 0 12px;
}

@media (max-width: 860px) {
  .rot-doc { grid-template-columns: 1fr; gap: 0; padding: 20px 20px 12px; }
  .rail {
    position: static;
    max-height: none;
    overflow: visible;
    border-left: none;
    border-bottom: 1px solid var(--border-gray);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 18px;
    padding-bottom: 12px;
  }
  .rail-title { display: none; }
  .rail a {
    padding: 6px 11px;
    margin-left: 0;
    border-left: none;
    border-radius: 3px;
    font-size: 12.5px;
  }
  .rail a.active { background: rgba(51,102,153, 0.08); border-left: none; }
  .rot-head h2 { font-size: 23px; }
}

/* Call-out "Mais sobre o SMETA": leva ao roteiro completo */
.more-card {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 660px;
  margin: 26px 0;
  padding: 16px 20px;
  border: 1px solid var(--border-gray);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.more-card:hover {
  border-color: rgba(51,102,153, 0.5);
  background: rgba(51,102,153, 0.03);
  box-shadow: 0 6px 22px -16px rgba(20,48,76, 0.4);
}
.more-card .mc-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--accent-red);
}
.more-card .mc-ic svg { width: 100%; height: 100%; display: block; }
.more-card .mc-body { display: flex; flex-direction: column; }
.more-card .mc-t {
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
  line-height: 1.2;
}
.more-card .mc-d {
  font-size: 14px;
  color: var(--text-light);
  margin-top: 3px;
  line-height: 1.35;
}
.more-card .mc-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  color: var(--accent-red-text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .more-card { flex-wrap: wrap; gap: 12px; }
  .more-card .mc-arrow { margin-left: 52px; }
}

/* ==========================================================================
   SISTEMA DE DESIGN 2026-07: menu lateral FIXO + reveal editorial + polish
   Mantidos: cabecalho branco com menu no topo (como era), mega-menu branco,
   barra cinza (breadcrumb), hero da home. Serif so como acento.
   ========================================================================== */

/* ---- Layout de pagina com menu fixo a esquerda ---- */
.page-layout {
  max-width: 1240px;
  margin: 0 auto;
  /* 23/09/2026: quem manda no respiro das paginas internas e ESTE padding, e nao
     o do .content (zerado logo abaixo). Vao maior entre a migalha e o texto
     (36 -> 56) e bem maior ate o rodape (68 -> 176). */
  padding: 56px 40px 352px;   /* 02/10/2026: «o branco ate o rodape, o dobro do que e agora» (era 176) */
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 3.2rem;
  align-items: start;
}
.page-layout .content { max-width: none; margin: 0; padding: 0; }

.sidenav {
  position: sticky;
  top: 72px;                        /* header 52 + folga */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 6px;
}
.sn-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-gray);
  padding-bottom: 12px;
}
.sn-group { margin-bottom: 22px; }
.sn-group .sn-num {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-red-text);
}
.sn-group h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid-gray);
  margin: 6px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-gray);
}
.sn-group a {
  display: block;
  padding: 5px 0 5px 10px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-light);
  border-left: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.sn-group a:hover { color: var(--color-text); }
.sn-group a.active {
  color: var(--accent-red-text);
  border-left-color: var(--accent-red);
  font-weight: 600;
}

@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; gap: 0; padding: 40px 20px 104px; }
  .sidenav {
    position: static;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    padding: 0 0 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-gray);
  }
  .sn-title, .sn-group .sn-num, .sn-group h5 { display: none; }
  .sn-group { display: contents; }
  .sn-group a {
    padding: 5px 10px;
    border-left: none;
    border: 1px solid var(--border-gray);
    border-radius: 3px;
    font-size: 12px;
  }
  .sn-group a.active {
    border-color: rgba(51,102,153, 0.5);
    background: rgba(51,102,153, 0.06);
  }
}

/* ---- 17/10/2026: menu lateral RECOLHIDO numa etiqueta («para todas as paginas quero que esta parte de navegacao
   esteja colapsada e com etiqueta, o que sobra mais espaco para usarmos a pagina»). A coluna de 220 px vira 40 px; o
   js/gaveta.js poe o conteudo do .sidenav num painel (.sn-painel) e a etiqueta (.sn-aba) na borda direita dele; clicar
   abre o painel para a direita, por cima do texto, e a etiqueta anda junto. Esc, clique fora ou a etiqueta fecham.
   No celular (ate 900 px) continua a lista de botoes de sempre. ---- */
@media (min-width: 901px) {
  .page-layout { grid-template-columns: 40px minmax(0, 1fr); gap: 2.4rem; }
  .sidenav { top: 92px; min-height: 140px;   /* 17/10/2026: «a navegacao encostasse em cima, na parte ja do banner, para nao dar a impressao de que esta flutuando»: pendurada no alto do .page-layout (o js tira o respiro de cima) e, rolando, presa na base do cabecalho (o js mede) */
    max-height: none; overflow: visible; padding: 0; z-index: 60; }   /* a altura da etiqueta: no fim da pagina ela sobe junto com o texto e nao invade o rodape */
  .sidenav > :not(.sn-caixa) { display: none; }
  .sn-caixa { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; }
  .sn-painel { width: 0; overflow: hidden; visibility: hidden; background: #FAF9F5; border: 1px solid rgba(20,48,76,.16); border-right: 0; border-top: 0;
    border-radius: 0 0 0 3px; box-shadow: -4px 10px 40px -24px rgba(20,48,76,.45);
    transition: width .6s cubic-bezier(.65,.05,.36,1), visibility 0s .6s; }
  .sidenav.aberta .sn-painel { width: 300px; visibility: visible; transition: width .6s cubic-bezier(.65,.05,.36,1), visibility 0s; }
  .sn-painel-in { width: 300px; box-sizing: border-box; max-height: calc(100vh - 150px); overflow-y: auto; scrollbar-width: thin; padding: 22px 22px 8px 24px; }
  .sn-aba { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 9px; background: #FAF9F5; color: #14304C; cursor: pointer;   /* 17/10/2026: «aqui pode ser da cor creme» (era branca) */
    border: 1px solid rgba(20,48,76,.16); border-left: 0; border-top: 0; border-radius: 0 0 3px 0; box-shadow: 6px 0 18px -10px rgba(20,48,76,.35);
    transition: background .25s, color .25s; font: inherit; }
  .sn-aba svg { width: 18px; height: 11px; fill: currentColor; flex: none; }
  .sn-aba span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
  .sn-aba:hover, .sn-aba:focus-visible, .sidenav.aberta .sn-aba { background: #14304C; color: #FAF9F5; outline: none; }
}
@media (max-width: 900px) {
  .sn-caixa, .sn-painel, .sn-painel-in { display: contents; }
  .sn-aba { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sn-painel { transition: none !important; } }

/* ---- Reveal suave do conteudo (gated: so com JS presente) ---- */
html.js .content > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--rvl-d, 0ms);
}
html.js .content > .in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .content > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Polish global ---- */
::selection { background: rgba(51,102,153, 0.16); }
:focus-visible { outline: 2px solid var(--accent-red-text); outline-offset: 2px; }

/* ==========================================================================
   PROPOSTA: novo modelo do hero (home). Manifesto tipografico serifado +
   4 tiles escalonados + regua de numeros editoriais + ticker de servicos.
   Prefixo nh-. Convive com o hero atual ate o Leandro escolher.
   ========================================================================== */
.nh-flag {
  background: var(--lavender);
  padding: 8px max(40px, calc(50% - 580px));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.nh-hero {
  background: #fff;
  border-top: 1px solid var(--border-gray);
  overflow: hidden;
}
.nh-inner { padding: 64px max(40px, calc(50% - 580px)) 0; }
.nh-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 4rem;
  align-items: center;
}
.nh-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.nh-eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: var(--accent-red);
}
.nh-title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--color-primary);
  margin: 18px 0 0;
  text-wrap: balance;
}
.nh-title em {
  font-style: italic;
  color: var(--accent-red);
}
.nh-sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-light);
  max-width: 520px;
  margin: 18px 0 0;
}
.nh-ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.nh-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 3px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.nh-btn--primary { background: var(--fundo); color: #fff; }
.nh-btn--primary:hover { background: var(--accent-red); }
.nh-btn--ghost {
  border: 1px solid var(--border-gray);
  color: var(--color-text);
}
.nh-btn--ghost:hover { border-color: rgba(51,102,153, 0.5); color: var(--accent-red-text); }

/* 4 elementos como tiles escalonados */
.nh-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nh-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  border: 1px solid var(--border-gray);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 14px;
  isolation: isolate;
  transition: border-color 0.25s;
}
.nh-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(180deg, rgba(51,102,153,0) 46%, rgba(51,102,153,0.78) 100%), var(--tile);
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nh-tile:hover { border-color: rgba(51,102,153, 0.55); }
.nh-tile:hover::before { transform: scale(1.045); }
.nh-tile:nth-child(even) { transform: translateY(22px); }
.nh-tile-num {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.nh-tile-label {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.25;
}

/* Regua de numeros editoriais */
.nh-stats {
  display: flex;
  margin-top: 64px;
  border-top: 1px solid var(--border-gray);
}
.nh-stat { padding: 22px 56px 26px 0; }
.nh-stat + .nh-stat { border-left: 1px solid var(--border-gray); padding-left: 56px; }
.nh-num {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--color-primary-light);
}
.nh-lab {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mid-gray);
}

/* Ticker de servicos */
.nh-ticker {
  border-top: 1px solid var(--border-gray);
  border-bottom: 1px solid var(--border-gray);
  overflow: hidden;
}
.nh-track {
  display: flex;
  width: max-content;
  animation: nh-scroll 46s linear infinite;
}
.nh-ticker:hover .nh-track { animation-play-state: paused; }
.nh-track span {
  padding: 11px 30px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-gray);
  white-space: nowrap;
  border-right: 1px solid var(--border-gray);
}
@keyframes nh-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .nh-track { animation: none; }
  .nh-tile::before { transition: none; }
}

@media (max-width: 900px) {
  .nh-inner { padding: 40px 20px 0; }
  .nh-top { grid-template-columns: 1fr; gap: 2.4rem; }
  .nh-tile:nth-child(even) { transform: translateY(14px); }
  .nh-stats { flex-wrap: wrap; margin-top: 40px; }
  .nh-stat { padding: 16px 28px 18px 0; }
  .nh-stat + .nh-stat { padding-left: 28px; }
  .nh-num { font-size: 40px; }
}

/* ===== Letreiro vermelho de servicos (marquee) ===== */
.svc-ticker {
  background: var(--accent-red, #336699);
  overflow: hidden;
}
.svc-ticker__track {
  display: flex;
  width: max-content;
  animation: svc-ticker-scroll 48s linear infinite;
}
.svc-ticker:hover .svc-ticker__track { animation-play-state: paused; }
.svc-ticker__track span {
  padding: 12px 34px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,0.22);
}
@keyframes svc-ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .svc-ticker__track { animation: none; }
}

/* ===== Logo de secao (Asset 5) — 3a secao (.nh-hero) e 4a (.pos-section) ===== */
.im-secao-logo { margin: 0 0 22px; }
.im-secao-logo img { display: block; height: 46px; width: auto; }
/* .diag-header e centralizado, entao o bloco tambem precisa ser */
.diag-header .im-secao-logo { margin: 0 auto 20px; }
.diag-header .im-secao-logo img { margin: 0 auto; }
@media (max-width: 700px) {
  .im-secao-logo { margin-bottom: 16px; }
  .im-secao-logo img { height: 36px; }
}


/* ========== PAGINA IFC (23/09/2026) ==========
   A pagina abre pelo que entregamos, em grade, e so depois explica o framework.
   Dois desenhos quebram a leitura: o percurso do trabalho e a roda dos oito
   padroes, com o PS1 no meio. Tudo em linha fina e tinta da casa, sem cor nova. */
/* 02/10/2026: «cards nao encostados uns nos outros, com 3px de canto, pequeno gap» (padrao do site) */
.ifc-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 22px 0 28px; }
.ifc-cel { background: var(--color-bg-alt); border: 1px solid rgba(20,48,76,.14); border-radius: 3px; padding: 18px 20px 20px; }
.ifc-cel .ifc-rot { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--mid-gray); margin-bottom: 8px; }
.ifc-cel h4 { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--color-primary); margin: 0 0 6px; }
.ifc-cel p { font-size: 15px; line-height: 1.35; color: var(--text-light); margin: 0; }   /* 02/10: a linha que quebra sozinha fica mais junta (era 1,5) */
.ifc-fig { margin: 30px 0 28px; }
.ifc-fig + .ifc-fig { margin-top: 72px; }   /* 02/10/2026: «mais espaco entre os diagramas» (era 30) */
.ifc-fig svg { display: block; width: 100%; height: auto; }
.ifc-fig figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mid-gray); margin-top: 12px; }
.ifc-svg-t { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 13px; font-weight: 600;
  fill: var(--color-primary); text-anchor: middle; }
.ifc-svg-p { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 11.5px; font-weight: 500;
  fill: var(--mid-gray); text-anchor: middle; }
.ifc-svg-n { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .18em;
  fill: var(--mid-gray); text-anchor: middle; }
.ifc-linha { fill: none; stroke: rgba(20,48,76,.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ifc-aro { fill: none; stroke: rgba(20,48,76,.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ifc-aro--f { fill: var(--color-bg-alt); }
@media (max-width: 760px) { .ifc-grade { grid-template-columns: 1fr; } }

/* 02/10/2026: NUMEROS COM FONTE, componente do site (nasceu na seguranca viaria): cards soltos, fonte colada embaixo */
.vi-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:22px 0 8px}
.vi-num{background:var(--color-bg-alt);border:1px solid rgba(20,48,76,.14);border-radius:3px;padding:18px 18px 16px}
.vi-num b{display:block;font:700 31px/1 'IBM Plex Sans Condensed',sans-serif;color:var(--color-primary);letter-spacing:-.01em;white-space:nowrap}
.vi-num span{display:block;margin-top:9px;font-size:14px;line-height:1.3;color:var(--color-primary)}
.content p.vi-fonte{font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.6;letter-spacing:.04em;margin:8px 0 0}
.content .vi-nums + p.vi-fonte{margin-bottom:28px}
@media (max-width:760px){.vi-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ========== TESTE 23/09/2026: texto do conteudo no azul-tinta ==========
   So vale na pagina que levar `class="txt-escuro"` no <body> (hoje, a do IFC).
   O padrao do site e o corpo em #315275; aqui tudo vai para #14304C. */
.txt-escuro .content,
.txt-escuro .content p,
.txt-escuro .content li,
.txt-escuro .content .ifc-cel p,
.txt-escuro .content .ifc-fig figcaption { color: var(--color-primary); }
.txt-escuro .content .ifc-svg-p,
.txt-escuro .content .ifc-svg-n { fill: var(--color-primary); }


/* 24/09/2026: credito no fim do rodape, «Website powered by Ideal Metrics», com o
   selo bem pequeno ao lado. Na mesma linha do CNPJ, empurrado para a direita. */
.ft-legal{flex-wrap:wrap}
.ft-powered{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.ft-powered-selo{height:18px;width:auto;display:block}
@media (max-width:880px){ .ft-powered{margin-left:0;width:100%;margin-top:8px} }

/* ===== BARRA DA HOME (gerado por _ferramentas/barra.py) ===== */
.veu-menu{position:fixed;inset:0;z-index:980;
  /* 24/09: o mesmo vidro azul da abertura (rgba 51,102,153 a 80% + desfoque), e
     nunca mais alto que a tela: o que nao couber rola dentro do proprio veu. */
  background:rgba(51,102,153,.86);
  -webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);
  color:var(--mercurio);display:flex;flex-direction:column;justify-content:flex-start;
  padding:104px var(--lado) 40px;gap:0;transform:translateY(-101%);
  counter-reset:vm;overflow-y:auto;max-height:100vh;
  transition:transform .6s cubic-bezier(.76,0,.24,1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .veu-menu{background:var(--fundo)} }
.veu-menu.aberto{transform:none}
/* cada item: indice mono a esquerda, nome a direita, fio embaixo. E o
   mesmo idioma dos rotulos de secao, na escala dos titulos. */
.veu-menu a{counter-increment:vm;display:flex;align-items:baseline;gap:22px;
  padding:11px 0;border-bottom:1px solid rgba(250,249,245,.20);
  font-family:var(--sans);font-weight:500;
  font-size:clamp(20px,2vw,28px);line-height:1.2;letter-spacing:-.012em;
  transition:padding-left .35s cubic-bezier(.4,0,.2,1),color .35s}
.veu-menu a::before{content:"[ " counter(vm,decimal-leading-zero) " ]";
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  color:rgba(250,249,245,.55);flex:none;min-width:64px}
.veu-menu a:first-of-type{border-top:1px solid rgba(250,249,245,.20)}
.veu-menu a:hover{color:var(--branco);padding-left:10px}
@media (max-width:880px){
  .veu-menu{padding-top:104px}
  .veu-menu a{gap:14px;padding:12px 0}
  .veu-menu a::before{min-width:48px}
}
.veu-menu .fecha{position:absolute;top:15px;right:var(--lado);
  background:var(--branco);color:var(--azul);border:none;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:16px 24px}
/* 23/09/2026: o mapa do site dentro do veu. «Todos os servicos» nao navega mais:
   ele ABRE este painel com todos os temas, e so vai para servicos.html se o
   navegador estiver sem JS. A busca saiu daqui e foi para a segunda secao. */
.veu-mapa{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px;margin:30px 0 40px}
.veu-mapa h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,249,245,.55);margin:0 0 10px;font-weight:500}
.veu-mapa a{display:block;padding:6px 0;border:none;font-size:15px;font-weight:400;line-height:1.3;
  counter-increment:none;color:rgba(250,249,245,.88)}
.veu-mapa a::before{content:none}
.veu-mapa a:hover{color:var(--branco);padding-left:6px}
@media (max-width:880px){ .veu-mapa{grid-template-columns:1fr 1fr;gap:18px 20px} }
/* 24/09: o MEGA-MENU flutuante de antes da troca de cabecalho, de volta para o
   Leandro comparar com o veu. Largura toda, altura so a do conteudo, icones
   redondos. Abre por «Todos os servicos» na barra (hover ou clique) e dentro do
   veu; fecha no clique fora, em Esc, ou ao sair com o mouse. */
.mega-menu{position:fixed;left:0;right:0;top:92px;z-index:950;   /* abaixo da barra (960): o cartao do monograma desce 22px sobre a pagina e nao pode ser coberto */
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  background:var(--mercurio);padding:36px var(--lado) 34px;
  box-shadow:0 12px 30px rgba(20,48,76,.10);border-top:1px solid var(--azul);
  border-bottom:1px solid rgba(20,48,76,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility 0s linear .2s}
.mega-menu.aberto{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.mega-menu-col h4{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--azul-escuro);margin:0 0 14px;padding-bottom:8px;
  border-bottom:1px solid rgba(20,48,76,.16)}
.mega-menu-col a{display:flex;align-items:center;gap:10px;padding:7px 0;
  font-family:var(--sans);font-size:14px;color:var(--azul);text-decoration:none;transition:color .2s}
.mega-menu-col a:hover{color:var(--liga-corpo)}
.mega-icon{width:30px;height:30px;border:1px solid rgba(20,48,76,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .2s,background .2s}
.mega-menu-col a:hover .mega-icon{border-color:var(--liga-corpo);background:rgba(51,102,153,.08)}
.mega-icon svg{width:14px;height:14px;fill:none;stroke:var(--azul-escuro);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.mega-menu-col a:hover .mega-icon svg{stroke:var(--liga-corpo)}
@media (max-width:880px){ .mega-menu{display:none} }
.veu-menu .selo-mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.8;margin-bottom:24px}
.tarja{position:fixed;top:0;left:0;right:0;z-index:950;height:26px;
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 var(--lado);background:var(--mercurio);
  /* 3px e nao 1: esta e a PRIMEIRA LINHA da pagina, e ela virou tambem a
     aresta de cima da caixa do logo (ver `.barra-marca`). Com
     `box-sizing:border-box` os 26 de altura ja contam o fio, entao ele
     ocupa de 23 a 26 e a barra, que comeca em 26, encosta nele sem folga. */
  border-bottom:3px solid rgba(20,48,76,.2)}
.tarja-lado{display:flex;align-items:center;height:100%}
.tarja span{display:flex;align-items:center;height:100%;padding:0 14px;
  font-family:var(--mono);font-weight:500;font-size:10px;white-space:nowrap;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(20,48,76,.72)}
.tarja span + span{border-left:1px solid rgba(20,48,76,.22)}
.tarja-lado span:last-child{padding-right:0}
.tarja .tarja-nome{color:var(--azul)}
@media (max-width:880px){ .tarja{height:22px}
  .tarja span{font-size:9px;letter-spacing:.16em;padding:0 10px} }

.barra{position:fixed;top:26px;left:0;right:0;z-index:960;height:66px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--lado);background:rgba(250,249,245,.78);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border-bottom:1px solid rgba(20,48,76,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .barra{background:var(--mercurio)} }
/* A CAIXA DO LOGO, no feitio das pecas do painel Spirit: fio de 1px, canto de
   3px e 18 de respiro em volta da marca (`.peca{border:1px solid;border-radius:3px;
   padding:18px}` la). O fundo volta ao CREME, mas em VIDRO: creme a 62% com
   desfoque por tras, e nao chapa. E por isso que o monograma entra SEM a chapa
   dele (`monograma-ideal-m-limpo.svg`, o oficial com o <rect> de fundo tirado):
   chapa opaca dentro de caixa de vidro apaga o vidro justamente no meio, e
   sobraria um aro de vidro em volta de um retangulo cego.
   O brilho de 1px na aresta de cima e a receita da casa para vidro (a mesma do
   `.barra-nav a.vidro`), e e o que faz a peca ler como superficie e nao como
   recorte. Sem sombra, que e regra da casa.
   ANCORA: `margin-top:-26px` e exatamente o `top` da barra, entao a aresta de
   cima cai em y=26, no fim do fio grosso da tarja. A caixa tem 81,1 de marca mais 7,3
   de respiro, 88,4 no total (a peca inteira encolheu 15% em 14/09, noite), e a
   base cai em 114 contra 92 da barra: sao 22px de
   caixa sobre a foto, que e onde o vidro tem o que desfocar. A primeira versao
   saiu com 148 e ficou grande demais. */
.barra-marca{display:flex;align-items:center;position:relative;z-index:1;
  /* margin-top:0 e nao -26: a aresta de cima da caixa cai em y=26, que e
     exatamente onde termina o fio grosso da tarja. Os dois viram UMA coisa,
     e por isso a caixa nao tem `border-top`: quem fecha o alto dela e a
     primeira linha da pagina. */
  align-self:flex-start;margin-top:0;
  /* 8 e nao 14: a CAIXA fica do mesmo tamanho e quem cresce e a marca.
     96 + 16 = 112 de altura, o mesmo de antes. */
  padding:3.66px;border-radius:0 0 3px 3px;border:1px solid var(--fio);border-top:none;
  /* CREME CHAPADO, 19/09. A caixa era prata: um degrade de cinco paradas no
     eixo de 26 graus, de #E9EAEB a branco (a «prata discreta» de 17/09). Sobre
     o creme da pagina ela lia como um cartao branco recortado, e nao como a
     marca solta. Agora e o proprio creme do site, sem degrade e sem brilho
     interno: o que aparece no alto e o monograma, nao a placa. O desfoque fica,
     porque a caixa passa por cima da foto da primeira secao.
     21/09: o fundo passa a #E8F2DC, a pedido do Leandro, o mesmo da placa do
     monograma oficial e do disco do avatar. */
  background:var(--mercurio);
  backdrop-filter:blur(14px) saturate(160%);
  transition:background .45s cubic-bezier(.4,0,.2,1)}
/* navegador sem backdrop-filter nao pode ficar com uma caixa translucida sem
   desfoque por tras: ali o creme fecha. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .barra-marca{background:var(--mercurio)} }
/* 22/09: o cartao do monograma volta ao VIDRO CLARO de c66f739 (21/09, noite),
   a pedido do Leandro: o degrade azul bem claro do anel do selo de vidro
   (#F5F8FC a #C9D8E9, claro no alto a esquerda), o reflexo (branco 72% -> 18%
   -> 0 de cima para baixo) e a borda de luz (branco 85% por dentro).
   Ainda em 22/09, «um pouco mais branco creme, menos azulada, ligeiramente»:
   as paradas foram puxadas para o creme #FAF9F5, de #F5F8FC/#E4ECF5/#C9D8E9
   para #F9F9F6/#EEF0F0/#DCE3E9. 23/09: «ligeiramente mais bege», entao
   #FAF8F1/#F1EFE6/#DFE0D9; e o monograma passou ao azul-tinta #14304C.
   E «este fundo nao pode mudar conforme avancamos na pagina»: o cartao e OPACO
   e sem backdrop-filter (nada do que passa por tras aparece nele), e nao
   encolhe mais ao rolar (a regra .barra.rolou saiu; a marca fica em 81,1).
   24/09: a Nevoa #D3E2F2 nao convenceu («nao estou acertando esse
   monograma, uma cor mais escura e o monograma em prata»). Fica a placa de
   METAL ESCURO: degrade tinta de #24496F a #0E2238 a 135 graus, reflexo branco
   de 10% no alto e aresta de luz de 1px a 14%; o monograma entra em PRATA
   (monograma-ideal-m-prata.svg, gerado por _ferramentas/monograma_prata.py).
   Escolhida entre quatro na prova (tinta, meio, oficial e esta). */
.barra-marca,.barra-marca:hover{
  /* 28/09: «troque o fundo do monograma para mescla azul claro e mescla creme»: a
     placa do Asset 182, degrade liso de #BDDDFF (alto, esquerda) a #FAF9F5 (baixo,
     direita), no angulo da diagonal da placa; o monograma volta a TINTA (#14304C,
     monograma-ideal-m-limpo.svg). O metal azul de 24/09 (#8EB4D8/#79A4CD/#6590BE,
     monograma prata) saiu. */
  background:linear-gradient(143deg, #F3F7FD 0%, #FAF9F5 58%);   /* 28/09: «mais bege do que azul»: o creme domina a partir de 58%; depois «meio branco onde e o azul»: #BDDDFF -> #F3F7FD */
  border-color:rgba(20,48,76,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 16px rgba(20,48,76,.08);
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:none}
.barra-marca .marca-frente{height:69px;width:auto;display:block;transition:height .35s ease}   /* 30/09 (definitivo): monograma 18Asset 13, quadro 167,5 x 189,24 (topo 60, folga 20: «estique para voltar a forma regular», era 159,24): mesma largura de cartao */
/* 28/09: SO NA HOME (body.inicio), antes de rolar a pagina a marca e maior, 100 px;
   passou de 40 px de rolagem (.barra.rolou, barra.js) ela volta aos 81,1. */
@media (min-width:881px){ .barra:not(.rolou) .barra-marca .marca-frente{height:85.1px} }   /* 02/10/2026: em TODAS as paginas, como na home («mantenha o monograma maior antes de rolar») */
.barra-marca span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.barra-nav{display:flex;align-items:center;gap:30px}
.barra-nav a{font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--azul-escuro);
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s,border-color .3s}
.barra-nav a:hover{color:var(--azul);border-bottom-color:var(--azul)}
/* Contato e o unico botao de vidro da barra: fundo quase branco, o
   desfoque da propria barra por tras, e um brilho de 1px na aresta de
   cima, que e o que faz a peca ler como vidro e nao como caixa. Sem
   sombra, que e regra da casa. */
.barra-nav a.vidro{padding:9px 20px;border:1px solid rgba(20,48,76,.16);
  border-radius:3px;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(20,48,76,.05);
  color:var(--azul);
  transition:background .35s,border-color .35s,color .35s}
.barra-nav a.vidro:hover{background:rgba(255,255,255,.86);
  border-color:rgba(20,48,76,.30);color:var(--azul)}
.barra-menu{background:none;border:1px solid rgba(20,48,76,.28);border-radius:3px;
  cursor:pointer;font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--azul);padding:9px 18px;
  transition:background .35s,border-color .35s,color .35s}
.barra-menu:hover{background:var(--azul);color:var(--mercurio);border-color:var(--azul)}
@media (max-width:1100px){ .barra-nav{display:none} }
@media (min-width:1101px){ .barra-menu{display:none} }
@media (max-width:880px){ .barra{top:22px;height:56px} .barra-marca .marca-frente{height:59px}
  /* a barra comeca em 22 aqui: a ancora da placa acompanha, senao ela passa
     do topo da tela e a aresta de cima e cortada */
  .barra-marca{margin-top:0;padding:3.15px} }
.barra-espaco{height:92px}
/* ===== fim BARRA DA HOME ===== */

/* ===== PERGUNTAS FREQUENTES (11/10/2026): componente unico do site. O Leandro pediu paginas mais simples, com o que
   explica (o que e a norma, o que se entrega, as dificuldades) numa secao de perguntas no fim, e nao no texto. Sanfona:
   so a pergunta aparece; a resposta abre no clique. Markup:
   <h3 id="perguntas">Perguntas frequentes</h3>
   <div class="faq"><details class="faq-item"><summary>Pergunta?</summary><p>Resposta.</p></details> ... </div> ===== */
.faq{margin:22px 0 28px;border-top:1px solid rgba(20,48,76,.14)}
.faq-item{border-bottom:1px solid rgba(20,48,76,.14)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:14px 2px;font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.3;color:var(--azul)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;font-family:var(--mono);font-weight:400;font-size:18px;line-height:1;color:var(--azul);
  transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:1px solid var(--azul);outline-offset:2px}
.faq-item p,.content .faq-item p{margin:0 0 16px;padding:0 2px;font-size:15px;line-height:1.5;color:var(--text-light,#14304C)}
.faq-item ul{margin:0 0 16px}
/* ===== fim PERGUNTAS FREQUENTES ===== */

/* ===== grade-guia de colunas atras de tudo (11/10/2026) =====
   «gosto das linhas verticais, podem ser menos, finas e por todo site, para contemplar o estilo suico». A mesma grade
   da home: 6 colunas entre as margens do cabecalho (--lado-guia = o --lado da home), fio de 1 px na tinta da marca a
   8%, com a borda da direita. Fica atras do conteudo (z-index -1 no body sem contexto proprio); o que tem fundo
   proprio (banner, cards, rodape) cobre a grade. */
:root{--lado-guia:clamp(28px,4vw,64px)}
body::before{content:"";position:fixed;top:0;bottom:0;left:var(--lado-guia);right:var(--lado-guia);z-index:-1;pointer-events:none;
  /* 16/10/2026: sem as duas linhas do limite da pagina; so as 5 de dentro (fio na borda direita de cada coluna, o da
     ultima recortado) */
  background-image:linear-gradient(to left,rgba(20,48,76,.08) 1px,transparent 1px);background-size:calc(100%/6) 100%;
  clip-path:inset(0 1px 0 0)}