/* =============================================================
   Citricus: folha das páginas de conteúdo (blog, posts, arquivos, 404)
   Mobile-first. Uma regra serve todas as seções; a variação de
   cada seção chega como custom property inline, nunca como regra
   nova. É isso que mantém este arquivo enxuto.

   Identidade: o hexágono do logo + a precisão de uma planta
   técnica. Navy do logo nas áreas escuras, teal da marca na ação,
   grade fina como textura. Nada de laranja.
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */

:root{
  /* Marca */
  --c-navy:        #24285A;   /* "CITRICUS" do logo */
  --c-navy-800:    #1E214E;
  --c-navy-900:    #141736;   /* fundo das seções escuras */
  --c-navy-950:    #0F1129;
  --c-teal:        #14848C;   /* ação: botões, destaques (4.5:1 no branco) */
  --c-teal-700:    #0E5A62;   /* links e texto em teal (7.9:1) */
  --c-teal-500:    #23AB9B;   /* verde-teal da ponta do hexágono */
  --c-teal-300:    #41D8C6;   /* teal sobre navy (9.5:1) */
  --c-teal-100:    #D4EFEC;
  --c-teal-050:    #EEF7F6;
  --grad-brand:    linear-gradient(100deg, #2B2C66 0%, #1E6B83 55%, #1FA295 100%);
  --grad-text:     linear-gradient(95deg, #5FD0C4 0%, #8FE3D8 60%, #C9F3EE 100%);

  /* Neutros */
  --c-ink:         #181A3F;
  --c-ink-2:       #4A4F6A;
  --c-ink-3:       #6E7390;
  --c-line:        #E1E5EE;
  --c-line-2:      #CDD3E0;
  --c-surface:     #FFFFFF;
  --c-surface-2:   #F2F3F7;
  --c-bg:          #FFFFFF;
  --c-on-dark:     #FFFFFF;
  --c-on-dark-2:   #B9BED6;

  /* Tipografia */
  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Espaço, raio, elevação */
  --sp-xs: .5rem;  --sp-sm: 1rem;  --sp-md: 2rem;
  --sp-lg: 3.75rem; --sp-xl: 6rem;
  --radius: 18px;  --radius-sm: 12px;  --radius-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(18,21,46,.06), 0 2px 8px rgba(18,21,46,.05);
  --shadow-md: 0 10px 24px rgba(18,21,46,.08), 0 2px 6px rgba(18,21,46,.05);
  --shadow-lg: 0 30px 60px rgba(17,20,58,.18);

  /* Larguras */
  --w-wide: 1280px; --w-normal: 1120px; --w-narrow: 760px;
  --header-h: 72px;
}
@media (min-width:900px){ :root{ --sp-lg: 5rem; --sp-xl: 8rem; --header-h: 80px } }

/* ---------- 2. Reset e base ---------------------------------- */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px) }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important } }

body{
  margin:0;
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{ max-width:100%; height:auto; display:block }
h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.025em;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--c-ink);
}
h1{ font-size:clamp(2.35rem, 1.5rem + 3.9vw, 4.6rem); font-weight:700 }
h2{ font-size:clamp(1.85rem, 1.3rem + 2.2vw, 3.1rem) }
h3{ font-size:clamp(1.2rem, 1.08rem + .5vw, 1.5rem); line-height:1.2; letter-spacing:-.015em }
h4{ font-size:1.1rem; line-height:1.3; letter-spacing:-.01em }
p{ margin:0 0 1.1em; text-wrap:pretty }
p:last-child{ margin-bottom:0 }
a{ color:var(--c-teal-700); text-underline-offset:.18em; text-decoration-thickness:1px }
a:hover{ color:var(--c-navy) }
ul,ol{ padding-left:1.2rem }
li{ margin-bottom:.35em }
hr{ border:0; border-top:1px solid var(--c-line); margin:var(--sp-md) 0 }
strong{ font-weight:650 }
:focus-visible{ outline:3px solid var(--c-teal-300); outline-offset:3px; border-radius:6px }
::selection{ background:var(--c-teal-100); color:var(--c-navy-900) }

.screen-reader-text{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--c-navy-900); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 10px 0 }
.skip-link:focus{ left:0; color:#fff }

/* ---------- 3. Container e grid (motor Citricus) ------------- */

.ctr-container{
  padding-block:var(--pt, var(--sp-lg)) var(--pb, var(--sp-lg));
  background:var(--bg, transparent);
  position:relative;
}
.ctr-container--bgimg{ background-image:var(--bg-img); background-size:cover; background-position:center }
.ctr-inner{ margin-inline:auto; padding-inline:16px; max-width:var(--w-normal); position:relative }
@media (min-width:600px){ .ctr-inner{ padding-inline:clamp(1.5rem,4vw,2.5rem) } }
.ctr-container--wide   > .ctr-inner{ max-width:var(--w-wide) }
.ctr-container--narrow > .ctr-inner{ max-width:var(--w-narrow) }
.ctr-container--full   > .ctr-inner{ max-width:none; padding-inline:0 }

.ctr-grid{ display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:var(--gap, var(--sp-md)) }
@media (max-width:980px){ .ctr-grid{ grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr)) } }
@media (max-width:640px){ .ctr-grid{ grid-template-columns:repeat(var(--cols-sm,1),minmax(0,1fr)) } }

.cit-grid{ display:grid; gap:clamp(1rem,2vw,1.75rem) }
@media (min-width:640px){ .cit-grid--2,.cit-grid--3,.cit-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1000px){ .cit-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)) } .cit-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

@media (max-width:640px){ .hide-mobile{ display:none!important } }
@media (min-width:981px){ .hide-desktop{ display:none!important } }

/* Fundos */
.cit-tint{ background:var(--c-surface-2) }
.cit-tint-teal{ background:var(--c-teal-050) }
.cit-dark{ background:var(--c-navy-900); color:var(--c-on-dark-2) }
.cit-dark h1,.cit-dark h2,.cit-dark h3,.cit-dark h4,.cit-dark strong{ color:#fff }
.cit-dark a:not(.ctr-btn){ color:var(--c-teal-300) }
.cit-dark .cit-lead{ color:var(--c-on-dark-2) }

/* Textura de planta técnica: grade fina, desbotando nas bordas */
.cit-grid-bg::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(95,208,196,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,208,196,.08) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%);
}
.cit-tint.cit-grid-bg::before,.cit-light-grid::before{
  background-image:
    linear-gradient(rgba(36,40,90,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,40,90,.06) 1px, transparent 1px);
}

/* ---------- 4. Tipografia auxiliar --------------------------- */

.cit-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-body); font-size:.78rem; font-weight:650;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-teal-700); margin:0 0 1rem; text-decoration:none;
}
.cit-eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px }
.cit-dark .cit-eyebrow,.cit-final .cit-eyebrow{ color:var(--c-teal-300) }
.cit-lead{ font-size:clamp(1.08rem,1rem + .4vw,1.3rem); line-height:1.55; color:var(--c-ink-2); max-width:60ch }
.cit-center{ text-align:center }
.cit-center .cit-lead,.cit-center .cit-section-head{ margin-inline:auto }
.cit-section-head{ max-width:760px; margin-bottom:clamp(2rem,4vw,3.25rem) }
.cit-section-head h2{ margin-bottom:.4em }
.cit-hl{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent }
.cit-hl-light{ color:var(--c-teal) }
.cit-num{ font-variant-numeric:tabular-nums }
.cit-muted{ color:var(--c-ink-3) }
.cit-small{ font-size:.92rem }

/* ---------- 5. Botões ---------------------------------------- */

.ctr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:52px; padding:.85rem 1.6rem;
  border-radius:999px; border:1.5px solid transparent;
  font-family:var(--font-body); font-weight:650; font-size:1rem; line-height:1.2; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ctr-btn .cit-ico{ width:19px; height:19px; flex:none; transition:transform .18s ease }
.ctr-btn:hover .cit-ico{ transform:translateX(3px) }
.ctr-btn:active{ transform:translateY(1px) }
.ctr-btn--sm{ min-height:44px; padding:.6rem 1.15rem; font-size:.95rem }

.ctr-btn--primary{ background:var(--c-teal); color:#fff; box-shadow:0 6px 18px rgba(21,131,142,.28) }
.ctr-btn--primary:hover{ background:var(--c-teal-700); color:#fff; box-shadow:0 10px 24px rgba(14,90,98,.32) }
.ctr-btn--accent{ background:var(--c-teal); color:#fff }
.ctr-btn--ghost{ border-color:var(--c-line-2); color:var(--c-ink); background:var(--c-surface) }
.ctr-btn--ghost:hover{ border-color:var(--c-teal); color:var(--c-teal-700) }
.ctr-btn--ghost-light{ border-color:rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.04) }
.ctr-btn--ghost-light:hover{ border-color:var(--c-teal-300); background:rgba(95,208,196,.1); color:#fff }
.ctr-btn--light{ background:#fff; color:var(--c-navy-900) }
.ctr-btn--light:hover{ background:var(--c-teal-050); color:var(--c-navy-900) }
.ctr-btn--wa{ background:#1F7A54; color:#fff }
.ctr-btn--wa:hover{ background:#17603F; color:#fff }
.ctr-btn--wa .cit-ico{ order:-1 }

.cit-btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:var(--sp-md) }
.cit-center-row{ justify-content:center }
@media (max-width:480px){ .cit-btn-row .ctr-btn{ width:100% } }

/* ---------- 6. Header ---------------------------------------- */

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.admin-bar .site-header{ top:32px }
@media (max-width:782px){ .admin-bar .site-header{ top:46px } }
.site-header.is-scrolled{ border-color:var(--c-line); box-shadow:0 6px 20px rgba(18,21,46,.05) }
.site-header-inner{
  max-width:var(--w-wide); margin-inline:auto; height:var(--header-h);
  padding-inline:16px; display:flex; align-items:center; gap:1rem;
}
@media (min-width:600px){ .site-header-inner{ padding-inline:clamp(1.5rem,4vw,2.5rem) } }
.site-brand{ display:flex; align-items:center; flex:none; margin-right:auto }
.cit-logo{ height:40px; width:auto; background:none }
@media (min-width:900px){ .cit-logo{ height:44px } }

.site-nav .menu{ list-style:none; margin:0; padding:0 }
.site-nav .menu a{ text-decoration:none; color:var(--c-ink); font-weight:550; font-size:.98rem }
.site-nav .menu a:hover,.site-nav .current-menu-item > a,.site-nav .current-menu-ancestor > a{ color:var(--c-teal-700) }

/* Desktop */
@media (min-width:1081px){
  .site-nav{ display:flex; align-items:center; gap:1.75rem }
  .site-nav .menu{ display:flex; gap:1.6rem; align-items:center }
  .site-nav .menu > li{ position:relative; margin:0 }
  .site-nav .menu > li > a{ display:inline-flex; align-items:center; gap:.3rem; padding:.6rem 0 }
  .site-nav .menu-item-has-children > a::after{ content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); opacity:.6 }
  .site-nav .sub-menu{
    list-style:none; margin:0; padding:.6rem; position:absolute; top:100%; left:-1rem; min-width:300px;
    background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); box-shadow:var(--shadow-lg);
    opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .site-nav .sub-menu li{ margin:0 }
  .site-nav .sub-menu a{ display:block; padding:.6rem .8rem; border-radius:10px; font-size:.95rem }
  .site-nav .sub-menu a:hover{ background:var(--c-teal-050) }
  .site-nav li:hover > .sub-menu,.site-nav li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:none }
  .site-nav-extra{ display:flex; align-items:center; gap:1rem }
  .nav-toggle{ display:none }
}

/* Mobile */
.nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid var(--c-line); border-radius:12px; background:#fff; cursor:pointer; flex:none;
}
.nav-toggle-bars{ display:grid; gap:5px }
.nav-toggle-bars span{ display:block; width:20px; height:2px; background:var(--c-ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:1080px){
  /* backdrop-filter vira bloco de contenção do painel fixo: no mobile o header é sólido */
  .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff }
  .nav-toggle{ display:inline-flex }
  .site-nav{
    position:fixed; inset:var(--header-h) 0 0 0; z-index:99; background:#fff;
    padding:1.25rem 16px 2rem; overflow-y:auto; overscroll-behavior:contain;
    display:flex; flex-direction:column; gap:1.5rem;
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .admin-bar .site-nav{ top:calc(var(--header-h) + 46px) }
  .site-nav.is-open{ opacity:1; visibility:visible; transform:none }
  .site-nav .menu > li{ border-bottom:1px solid var(--c-line); margin:0 }
  .site-nav .menu > li > a{ display:flex; padding:1rem 0; font-size:1.15rem; font-family:var(--font-head); font-weight:600 }
  .site-nav .sub-menu{ list-style:none; padding:0 0 .8rem .2rem; margin:0; display:grid; gap:.1rem }
  .site-nav .sub-menu a{ display:block; padding:.45rem 0; color:var(--c-ink-2) }
  .site-nav-extra{ display:flex; flex-direction:column; align-items:stretch; gap:1rem }
  .site-nav-extra .ctr-btn{ width:100% }
}

/* Seletor de idioma */
.cit-lang{ display:inline-flex; align-items:center; border:1px solid var(--c-line); border-radius:999px; padding:3px; font-size:.82rem; font-weight:650; letter-spacing:.04em }
.cit-lang-item{ display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:30px; padding:0 .55rem; border-radius:999px; color:var(--c-ink-2); text-decoration:none }
.cit-lang-item.is-current{ background:var(--c-navy-900); color:#fff }
a.cit-lang-item:hover{ color:var(--c-teal-700); background:var(--c-teal-050) }
@media (max-width:1080px){ .site-nav-extra .cit-lang{ align-self:flex-start } }

/* ---------- 7. Hero ------------------------------------------ */

.cit-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--c-navy-900); color:var(--c-on-dark-2);
}
.cit-hero h1{ color:#fff; max-width:15ch }
.cit-hero .cit-lead{ color:var(--c-on-dark-2); max-width:56ch }
.cit-hero::after{ /* brilho teal do hexágono */
  content:""; position:absolute; z-index:-1; width:720px; height:720px; right:-220px; top:-200px;
  background:radial-gradient(closest-side, rgba(31,162,149,.30), rgba(31,162,149,0));
  pointer-events:none;
}
.cit-hero-grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center }
@media (min-width:1000px){ .cit-hero-grid{ grid-template-columns:1.25fr .75fr } }

/* Hexágono vazado, assinatura visual */
.cit-hexmark{ position:relative; aspect-ratio:1/1.1; max-width:420px; width:100%; margin-inline:auto }
.cit-hexmark svg{ width:100%; height:100% }
.cit-hexmark .hx-outline{ fill:none; stroke:rgba(95,208,196,.35); stroke-width:1 }
.cit-hexmark .hx-fill{ fill:url(#cit-hx-grad) }
.cit-hexmark-logo{ position:absolute; left:50%; top:50%; width:36%; height:auto; transform:translate(-50%,-50%); background:none; filter:drop-shadow(0 12px 30px rgba(31,162,149,.35)) }
.cit-hexchip{
  position:absolute; display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .85rem .55rem .6rem;
  background:rgba(255,255,255,.96); color:var(--c-navy-900); border-radius:999px; font-size:.85rem; font-weight:600; white-space:nowrap;
  box-shadow:0 14px 30px rgba(5,8,30,.35);
}
.cit-hexchip .cit-ico{ width:26px; height:26px; padding:5px; border-radius:50%; background:var(--c-teal-050); color:var(--c-teal-700) }
.cit-hexchip--1{ left:-6%; top:16% }
.cit-hexchip--2{ right:-8%; top:46% }
.cit-hexchip--3{ left:4%; bottom:10% }
.cit-hexchip--3 .cit-ico{ background:var(--c-teal); color:#fff }
@media (prefers-reduced-motion:no-preference){
  .cit-hexchip{ animation:cit-float 6s ease-in-out infinite }
  .cit-hexchip--2{ animation-delay:-2s } .cit-hexchip--3{ animation-delay:-4s }
}
@keyframes cit-float{ 50%{ transform:translateY(-8px) } }
@media (max-width:999px){ .cit-hexmark{ display:none } }

.cit-hero-proof{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem 1.5rem; margin-top:clamp(2rem,4vw,3rem); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12) }
.cit-hero-proof > div{ display:flex; flex-direction:column }
.cit-hero-proof strong{ font-family:var(--font-head); font-size:clamp(1.45rem,1.1rem + 1vw,1.9rem); color:#fff; line-height:1.1; letter-spacing:-.02em }
.cit-hero-proof span{ font-size:.86rem; line-height:1.35; margin-top:.25rem }
@media (min-width:700px){ .cit-hero-proof{ grid-template-columns:repeat(4,auto); justify-content:start; column-gap:2.25rem } }

.cit-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem .4rem .45rem;
  border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.05);
  font-size:.85rem; color:#fff; margin-bottom:1.5rem;
}
.cit-badge img{ height:22px; width:auto; background:#fff; border-radius:999px; padding:2px 6px }
.cit-badge-dot{ width:8px; height:8px; border-radius:50%; background:var(--c-teal-300); box-shadow:0 0 0 4px rgba(95,208,196,.18) }

/* ---------- 8. Blocos de seção ------------------------------- */

/* Índice numerado de serviços: o centro da home */
.cit-index{ list-style:none; margin:0; padding:0; border-top:1px solid var(--c-line) }
.cit-index-item{ margin:0; border-bottom:1px solid var(--c-line) }
.cit-index-link{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem 1.25rem;
  padding:1.35rem .25rem; text-decoration:none; color:inherit; isolation:isolate; overflow:hidden;
}
.cit-index-link::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--c-teal-050); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.cit-index-link:hover::before,.cit-index-link:focus-visible::before{ transform:scaleX(1) }
.cit-index-num{ font-family:var(--font-head); font-size:.95rem; font-weight:600; color:var(--c-teal-700); font-variant-numeric:tabular-nums; min-width:2ch }
.cit-index-ico{ display:none }
.cit-index-title{ margin:0 0 .2rem; font-size:clamp(1.25rem,1.05rem + .9vw,1.85rem); letter-spacing:-.02em }
.cit-index-desc{ display:block; color:var(--c-ink-2); font-size:.98rem; line-height:1.5 }
.cit-index-go{ display:inline-flex; width:46px; height:46px; border-radius:50%; border:1px solid var(--c-line-2); align-items:center; justify-content:center; color:var(--c-ink); transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease }
.cit-index-go .cit-ico{ width:18px; height:18px }
.cit-index-link:hover .cit-index-go{ background:var(--c-teal); border-color:var(--c-teal); color:#fff; transform:rotate(-30deg) }
@media (min-width:760px){
  .cit-index-link{ grid-template-columns:3.5rem 56px 1fr auto; padding:1.6rem .75rem }
  .cit-index-ico{ display:inline-flex; width:56px; height:56px; border-radius:16px; background:var(--c-teal-050); color:var(--c-teal-700); align-items:center; justify-content:center; transition:background .25s ease }
  .cit-index-link:hover .cit-index-ico{ background:#fff }
  .cit-index-text{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:2rem; align-items:center }
  .cit-index-title{ margin:0 }
}
.cit-dark .cit-index,.cit-dark .cit-index-item{ border-color:rgba(255,255,255,.12) }
.cit-dark .cit-index-desc{ color:var(--c-on-dark-2) }
.cit-dark .cit-index-link::before{ background:rgba(95,208,196,.08) }
.cit-dark .cit-index-ico{ background:rgba(95,208,196,.1); color:var(--c-teal-300) }
.cit-dark .cit-index-num{ color:var(--c-teal-300) }
.cit-dark .cit-index-go{ border-color:rgba(255,255,255,.2); color:#fff }

/* Duas colunas: texto + mídia */
.cit-split{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center }
@media (min-width:960px){ .cit-split{ grid-template-columns:1fr 1fr } .cit-split--wide-text{ grid-template-columns:1.15fr .85fr } .cit-split--rev > :first-child{ order:2 } }
.cit-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--c-surface-2) }
.cit-media img{ width:100%; height:100%; object-fit:cover }
.cit-media--frame::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(18,21,46,.08); pointer-events:none }

/* Lista com check */
.cit-checks{ list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:.8rem }
.cit-checks li{ position:relative; padding-left:2.1rem; margin:0 }
.cit-checks li::before{
  content:""; position:absolute; left:0; top:.2em; width:1.35rem; height:1.35rem; border-radius:50%;
  background:var(--c-teal-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E5A62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/62% no-repeat;
}
.cit-dark .cit-checks li::before{ background-color:rgba(95,208,196,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FD0C4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") }
@media (min-width:700px){ .cit-checks--2{ grid-template-columns:1fr 1fr; column-gap:2rem } }

/* Números */
.cit-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--c-line); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden }
@media (min-width:900px){ .cit-stats--4{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.cit-stat{ background:#fff; padding:clamp(1.25rem,3vw,2rem) }
.cit-stat strong{ display:block; font-family:var(--font-head); font-size:clamp(2rem,1.4rem + 2vw,3rem); line-height:1; letter-spacing:-.03em; color:var(--c-navy); margin-bottom:.5rem }
.cit-stat span{ color:var(--c-ink-2); font-size:.95rem; line-height:1.45; display:block }
.cit-dark .cit-stats{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.1) }
.cit-dark .cit-stat{ background:var(--c-navy-900) }
.cit-dark .cit-stat strong{ color:#fff }
.cit-dark .cit-stat span{ color:var(--c-on-dark-2) }

/* Blocos de valor (ícone + título + texto) */
.cit-feature{ padding:clamp(1.5rem,3vw,2rem); border:1px solid var(--c-line); border-radius:var(--radius); background:#fff; height:100% }
.cit-feature h3{ margin:.9rem 0 .5rem; font-size:1.25rem }
.cit-feature p{ color:var(--c-ink-2); margin:0; font-size:1rem }
.cit-feature-ico{ display:inline-flex; width:48px; height:48px; border-radius:14px; align-items:center; justify-content:center; background:var(--c-teal-050); color:var(--c-teal-700) }
.cit-dark .cit-feature{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.1) }
.cit-dark .cit-feature p{ color:var(--c-on-dark-2) }
.cit-dark .cit-feature-ico{ background:rgba(95,208,196,.12); color:var(--c-teal-300) }

/* Faixa de destaque com CTA ao lado (teste de performance, auditoria) */
.cit-teaser{ display:grid; gap:1.5rem; align-items:center; padding:clamp(1.75rem,4vw,3rem); background:var(--c-teal-050); border:1px solid var(--c-teal-100); border-radius:var(--radius-lg) }
.cit-teaser h2{ margin-bottom:.4em }
@media (min-width:900px){ .cit-teaser{ grid-template-columns:1fr auto; gap:3rem } }

/* Citação do fundador */
.cit-quote{ margin:0; padding:0; border:0 }
.cit-quote p{ font-family:var(--font-head); font-size:clamp(1.35rem,1.1rem + 1vw,2rem); line-height:1.3; letter-spacing:-.015em; color:var(--c-ink) }
.cit-quote footer{ margin-top:1.25rem; color:var(--c-ink-2); font-size:.95rem }
.cit-quote footer strong{ color:var(--c-ink); display:block }
.cit-dark .cit-quote p{ color:#fff }

/* Chips */
.cit-chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:1.25rem 0 0 }
.cit-chips li{ margin:0; padding:.35rem .8rem; border-radius:999px; border:1px solid var(--c-line-2); font-size:.88rem; color:var(--c-ink-2); background:#fff }
.cit-dark .cit-chips li{ background:transparent; border-color:rgba(255,255,255,.18); color:var(--c-on-dark-2) }

/* Cabeçalho de página de serviço */
.cit-svc-hero{ background:var(--c-navy-900); color:var(--c-on-dark-2); overflow:hidden; isolation:isolate }
.cit-svc-hero h1{ color:#fff; max-width:18ch; font-size:clamp(2.2rem,1.4rem + 3.4vw,4rem) }
.cit-svc-hero .cit-lead{ color:var(--c-on-dark-2) }
.cit-svc-hero .cit-crumbs a,.cit-svc-hero .cit-crumbs li{ color:var(--c-on-dark-2) }
.cit-svc-hero .cit-crumbs li[aria-current]{ color:#fff }

/* ---------- 9. Página, breadcrumbs, prosa, artigo ------------ */

.cit-pagehead{ background:var(--c-surface-2); border-bottom:1px solid var(--c-line); padding-block:clamp(2.5rem,6vw,4.5rem) }
.cit-pagehead-inner,.cit-article-head-inner{ max-width:var(--w-wide); margin-inline:auto; padding-inline:16px }
@media (min-width:600px){ .cit-pagehead-inner,.cit-article-head-inner{ padding-inline:clamp(1.5rem,4vw,2.5rem) } }
.cit-pagehead h1{ font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem); max-width:22ch }

.cit-crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.25rem .5rem; margin:0 0 1.25rem; padding:0; font-size:.88rem; color:var(--c-ink-3) }
.cit-crumbs li{ margin:0; display:inline-flex; align-items:center; gap:.5rem }
.cit-crumbs li + li::before{ content:"/"; opacity:.5 }
.cit-crumbs a{ color:inherit; text-decoration:none }
.cit-crumbs a:hover{ color:var(--c-teal-700); text-decoration:underline }
.cit-dark .cit-crumbs ol,.cit-hero .cit-crumbs ol{ color:var(--c-on-dark-2) }

.cit-prose{ font-size:1.1rem; line-height:1.75; color:#262A45 }
.cit-prose > * + *{ margin-top:1.15em }
.cit-prose p{ margin:0 }
.cit-prose h2{ font-size:clamp(1.55rem,1.25rem + 1.2vw,2.1rem); margin:2.1em 0 .6em; line-height:1.15 }
.cit-prose h3{ font-size:1.3rem; margin:1.8em 0 .5em }
.cit-prose h2 + *,.cit-prose h3 + *{ margin-top:0 }
.cit-prose ul,.cit-prose ol{ padding-left:1.35rem }
.cit-prose li{ margin-bottom:.5em }
.cit-prose li::marker{ color:var(--c-teal) }
.cit-prose a{ color:var(--c-teal-700); text-decoration:underline }
.cit-prose blockquote{ margin:1.6em 0; padding:1.1rem 1.4rem; border-left:3px solid var(--c-teal); background:var(--c-teal-050); border-radius:0 12px 12px 0; color:var(--c-ink) }
.cit-prose img,.cit-prose figure{ border-radius:var(--radius-sm); margin-block:1.6em }
.cit-prose figcaption{ font-size:.88rem; color:var(--c-ink-3); text-align:center; margin-top:.5rem }
.cit-prose table{ width:100%; border-collapse:collapse; font-size:.98rem; display:block; overflow-x:auto }
.cit-prose th,.cit-prose td{ border-bottom:1px solid var(--c-line); padding:.7rem .6rem; text-align:left; vertical-align:top }
.cit-prose th{ font-weight:650; color:var(--c-ink); background:var(--c-surface-2) }
.cit-prose code{ font-size:.9em; background:var(--c-surface-2); padding:.1em .35em; border-radius:6px }

.cit-article-head{ padding-block:clamp(2.5rem,6vw,4.5rem) 1.5rem }
.cit-article-head-inner{ max-width:var(--w-narrow) }
.cit-article-head h1{ font-size:clamp(2rem,1.4rem + 2.6vw,3.3rem) }
.cit-article-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.92rem; color:var(--c-ink-3); margin-top:1.5rem }
.cit-article-cover{ max-width:960px; margin:0 auto; padding-inline:16px }
.cit-article-cover img{ width:100%; border-radius:var(--radius-lg); aspect-ratio:16/10; object-fit:cover }
.cit-author{ display:flex; gap:1rem; align-items:flex-start; margin-top:var(--sp-lg); padding:1.5rem; border:1px solid var(--c-line); border-radius:var(--radius) }
.cit-author img{ border-radius:50%; flex:none }
.cit-author p{ margin:0; color:var(--c-ink-2); font-size:.98rem }
.cit-author .cit-author-name{ font-weight:650; color:var(--c-ink); margin-bottom:.25rem }

.cit-pagination ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; padding:0; margin:var(--sp-lg) 0 0; justify-content:center }
.cit-pagination li{ margin:0 }
.cit-pagination a,.cit-pagination span{ display:inline-flex; min-width:44px; min-height:44px; padding:0 .9rem; align-items:center; justify-content:center; border:1px solid var(--c-line); border-radius:12px; text-decoration:none; color:var(--c-ink) }
.cit-pagination .current{ background:var(--c-navy-900); color:#fff; border-color:var(--c-navy-900) }

.cit-search{ display:flex; gap:.5rem; margin-top:1.25rem; max-width:520px }
.cit-search input{ flex:1; min-height:48px; padding:.7rem 1rem; border:1px solid var(--c-line-2); border-radius:999px; font:inherit; background:#fff }

.cit-404 h1{ max-width:16ch }
.cit-404-h{ margin-top:var(--sp-lg); font-size:1.4rem }

/* ---------- 10. CTA final e rodapé --------------------------- */

.cit-final{ position:relative; background:var(--grad-brand); color:#fff; overflow:hidden; isolation:isolate }
.cit-final::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:56px 56px;
}
.cit-final-inner{
  max-width:var(--w-wide); margin-inline:auto; padding:clamp(3.5rem,8vw,6rem) 16px;
  display:grid; gap:1.5rem; align-items:end;
}
@media (min-width:600px){ .cit-final-inner{ padding-inline:clamp(1.5rem,4vw,2.5rem) } }
@media (min-width:960px){ .cit-final-inner{ grid-template-columns:1.3fr auto; gap:3rem } .cit-final .cit-btn-row{ margin:0 } }
.cit-final h2{ color:#fff; max-width:18ch }
.cit-final .cit-lead{ color:rgba(255,255,255,.85) }
.cit-final .ctr-btn--primary{ background:#fff; color:var(--c-navy-900); box-shadow:none }
.cit-final .ctr-btn--primary:hover{ background:var(--c-teal-050); color:var(--c-navy-900) }

.site-footer{ background:var(--c-navy-950); color:var(--c-on-dark-2); font-size:.96rem }
.site-footer a{ color:var(--c-on-dark-2); text-decoration:none }
.site-footer a:hover{ color:#fff }
.site-footer .ctr-btn--light,.site-footer .ctr-btn--light:hover{ color:var(--c-navy-900) }
.site-footer-inner{
  max-width:var(--w-wide); margin-inline:auto; padding:clamp(3rem,7vw,5rem) 16px 2.5rem;
  display:grid; gap:2.5rem;
}
@media (min-width:600px){ .site-footer-inner{ padding-inline:clamp(1.5rem,4vw,2.5rem); grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .site-footer-inner{ grid-template-columns:1.5fr 1fr 1fr 1.1fr } }
.site-footer-brand .cit-logo{ height:42px; margin-bottom:1.25rem }
.site-footer-brand p{ max-width:36ch }
.site-footer-small{ font-size:.88rem; opacity:.8 }
.site-footer-badge{ margin-top:1.25rem; height:52px; width:auto; background:#fff; border-radius:10px; padding:4px 10px }
.site-footer-h{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; font-weight:650; margin:0 0 1.1rem }
.site-footer ul{ list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:.55rem }
.site-footer li{ margin:0 }
.site-footer-col li a{ display:inline-flex; align-items:center; gap:.5rem }
.site-footer-col .cit-ico{ width:18px; height:18px; color:var(--c-teal-300) }
.site-footer-bar{
  max-width:var(--w-wide); margin-inline:auto; padding:1.5rem 16px calc(1.5rem + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; font-size:.86rem;
}
@media (min-width:600px){ .site-footer-bar{ padding-inline:clamp(1.5rem,4vw,2.5rem) } }
.site-footer-bar p{ margin:0 }
.site-footer-legal{ display:flex!important; flex-wrap:wrap; gap:1.25rem!important; margin:0!important }
.site-footer .cit-lang{ border-color:rgba(255,255,255,.18) }
.site-footer .cit-lang-item{ color:var(--c-on-dark-2) }
.site-footer .cit-lang-item.is-current{ background:#fff; color:var(--c-navy-900) }
.site-footer a.cit-lang-item:hover{ background:rgba(255,255,255,.08); color:#fff }

/* WhatsApp flutuante */
.cit-wa-float{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:90;
  width:56px; height:56px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#1F7A54; color:#fff; box-shadow:0 10px 24px rgba(17,20,58,.28);
  transition:transform .2s ease, background .2s ease;
}
.cit-wa-float:hover{ transform:translateY(-2px); background:#17603F; color:#fff }
.cit-wa-float .cit-ico{ width:26px; height:26px }

/* ---------- 11. Movimento ------------------------------------ */

.js .ctr-anim,.js .cit-anim{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1) }
.js .ctr-anim.in,.js .cit-anim.in{ opacity:1; transform:none }

.cit-ico{ flex:none }

/* Formulário de lead e FAQ do plugin herdam o visual mesmo antes do CSS de componente */
.ctr-acc summary{ cursor:pointer }

/* ---------- 12. Linha do tempo (Sobre) ----------------------- */

.cit-timeline{ list-style:none; margin:0; padding:0; position:relative }
.cit-timeline::before{ content:""; position:absolute; left:2.6rem; top:.5rem; bottom:.5rem; width:1px; background:linear-gradient(var(--c-teal), var(--c-line)) }
.cit-timeline li{ position:relative; display:grid; grid-template-columns:5.2rem 1fr; gap:1.25rem; margin:0 0 2rem }
.cit-timeline li:last-child{ margin-bottom:0 }
.cit-timeline-year{ position:relative; z-index:1; justify-self:start; display:inline-flex; align-items:center; justify-content:center; min-width:5.2rem; height:2.2rem; border-radius:999px; background:#fff; border:1px solid var(--c-line-2); font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--c-navy); font-variant-numeric:tabular-nums }
.cit-timeline li:first-child .cit-timeline-year{ background:var(--c-teal); border-color:var(--c-teal); color:#fff }
.cit-timeline h3{ margin:.15rem 0 .35rem; font-size:1.2rem }
.cit-timeline p{ margin:0; color:var(--c-ink-2) }
/* ---------- 13. Cards (blog, busca, arquivos) ---------------- */

.cit-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; height:100% }
.cit-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--c-line-2) }
.cit-card-media{ display:block; aspect-ratio:16/10; background:var(--c-surface-2); overflow:hidden }
.cit-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.cit-card:hover .cit-card-media img{ transform:scale(1.03) }
.cit-card-ph{ display:flex; width:100%; height:100%; align-items:center; justify-content:center; background:var(--grad-brand); color:rgba(255,255,255,.7) }
.cit-card-ph .cit-ico{ width:56px; height:56px }
.cit-card-body{ display:flex; flex-direction:column; gap:.55rem; padding:1.35rem 1.4rem 1.5rem; flex:1 }
.cit-card-kicker{ font-size:.75rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--c-teal-700) }
.cit-card-title{ font-size:1.22rem; line-height:1.25; margin:0 }
.cit-card-title a{ color:var(--c-ink); text-decoration:none }
.cit-card-title a::after{ content:""; position:absolute; inset:0 } /* card inteiro clicável, um único link no leitor de tela */
.cit-card-text{ color:var(--c-ink-2); font-size:.98rem; line-height:1.55; margin:0 }
.cit-card-meta{ margin:auto 0 0; padding-top:.5rem; font-size:.85rem; color:var(--c-ink-3) }

/* ---------- 14. Ajustes de composição ------------------------ */

.ctr-container--full .cit-btn-row{ padding-inline:16px }
.cit-split > .cit-section-head{ margin-bottom:0 }
@media (max-width:959px){ .cit-split{ gap:1.25rem } .cit-split .cit-media{ margin-inline:auto } }
.cit-hero .cit-eyebrow,.cit-svc-hero .cit-eyebrow{ color:var(--c-teal-300) }
@media (max-width:959px){ .cit-svc-hero .cit-media{ max-width:320px!important } }

/* ---------- 15. Cabeçalho de página no mesmo tom dos heroes do site --- */
.cit-pagehead{ background:radial-gradient(120% 220% at 10% -40%, rgba(35,171,155,.18) 0%, transparent 55%), linear-gradient(105deg,#141736 0%,#181A3F 50%,#141736 100%); border-bottom:0; color:#B8BCD7 }
.cit-pagehead h1{ color:#fff }
.cit-pagehead .cit-lead{ color:#B8BCD7 }
.cit-pagehead .cit-eyebrow{ color:#41D8C6 }
.cit-pagehead .cit-crumbs ol{ color:#AFB3D0 }
.cit-pagehead .cit-crumbs a:hover{ color:#fff }
.cit-pagehead .cit-search input{ background:#fff }