/* ========== 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: #315275;   /* era #315275; escurecido ~9pt de luminosidade a pedido */
  --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 {
  background-color: #fff;                              /* cabeçalho branco (harmonia estilo cqt-br.com) */
  background-image:
    linear-gradient(to right, #ffffff 0%, #ffffff 40%, rgba(255,255,255,0.82) 56%, rgba(255,255,255,0.25) 80%, rgba(255,255,255,0.08) 100%),
    var(--banner-photo, none);                         /* foto cobre a largura toda, esmaecida à esquerda */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 46px max(40px, calc(50% - 580px));
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-gray);
  --banner-photo: none;                                /* cada página define: style="--banner-photo:url('...')" */
}
.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.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 {
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.93), rgba(255,255,255,0.82)),
      var(--banner-photo, none);
  }
  .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 ========== */
.content { max-width: 1240px; margin: 0 auto; padding: 40px 40px 68px; 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: 32px 0 10px;
  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: 26px 0 10px;
}
.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); }
.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;
}
.section-divider { border: none; border-top: 1px solid var(--border-gray); margin: 32px 0; }
.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; }

/* ========== 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; }
.numbered-item {
  display: flex; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--border-gray);
  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; margin-bottom: 4px; }
.numbered-item p { font-size: 15px; color: var(--text-light); line-height: 1.5; }

/* ========== 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 =====
   O monograma tem placa #FAF9F5 no proprio arquivo, entao sobre o rodape
   azul ele le como um carimbo claro, e e assim que deve aparecer. */
.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: 18px; max-width: 960px; margin: 0 auto; }
.pos-card { border: 1px solid rgba(51,102,153,0.3); border-radius: 3px; padding: 26px 24px; background: transparent; transition: border-color 0.3s; }
.pos-card:hover { border-color: rgba(51,102,153,0.45); }
.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: #315275; margin-bottom: 8px; text-wrap: pretty; }
.pos-card p { font-size: 13.5px; color: #336699; line-height: 1.55; }
.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: 16px; margin: 22px 0 10px; }
@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: 24px 16px; }
  .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(51,102,153,0.5); }
.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.45;
}
.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;
  padding: 36px 40px 68px;
  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: 22px 20px 56px; }
  .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);
  }
}

/* ---- 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; }
}

/* ===== BARRA DA HOME (gerado por _ferramentas/barra.py) ===== */
.veu-menu{position:fixed;inset:0;z-index:980;background:var(--fundo);
  color:var(--mercurio);display:flex;flex-direction:column;justify-content:flex-start;
  padding:132px var(--lado) 0;gap:0;transform:translateY(-101%);
  counter-reset:vm;overflow-y:auto;
  transition:transform .6s cubic-bezier(.76,0,.24,1)}
.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:15px 0;border-bottom:1px solid rgba(250,249,245,.20);
  font-family:var(--sans);font-weight:500;
  font-size:clamp(22px,2.4vw,34px);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}
.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)} }
/* 21/09: o cartao do monograma no CREME da pagina, var(--mercurio), como
   estava em efd247b. Passou por #E8F2DC, por trama e por vidro prateado; o
   Leandro pediu de volta o creme. Sobre o creme quem desenha a caixa e o fio. */
.barra-marca{background:var(--mercurio)}
.barra-marca:hover{background:var(--mercurio)}
.barra-marca .marca-frente{height:81.1px;width:auto;display:block;
  transition:height .45s cubic-bezier(.4,0,.2,1)}
.barra.rolou .barra-marca .marca-frente{height:71.1px}
.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:69.4px}
  /* 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 ===== */