/* =========================================================
   Narro · páginas estratégicas no CLARO do Design System 3 (estudo de 23/10/2026)
   Pedido do Anderson: o preto pesava ("a Narro quase não tem isso"); topo e cards de case mantidos.
   Superfícies do DS3: claro (#D6D6D6, tinta roxo) como base; faixa roxo-escuro no número; faixa roxo no "como pensamos".
   Verde só como detalhe (aspas, número, botão). Vem DEPOIS de paginas.css e servicos.css (body.pg-claro).
   ========================================================= */
body.page-servicos.pg-claro{--bg:#d6d6d6;--ink:#480067;--ink-2:rgba(72,0,103,.78);--ink-3:rgba(72,0,103,.58);--line:rgba(72,0,103,.2);background:var(--bg);color:var(--ink)}
.pg-claro .site-header,.pg-claro .site-header .brand,.pg-claro .brand__tagline,.pg-claro .nav-toggle,.pg-claro .nav__link{color:var(--ink)}

/* topo */
.pg-claro .sv-kicker{color:var(--ink)}
.pg-claro .sv-hero__text{color:var(--ink-2)}
.pg-claro .pg-crumbs,.pg-claro .pg-crumbs a{color:var(--ink-3)}
.pg-claro .pg-crumbs a:hover{color:var(--ink)}
.pg-claro .pg-crumbs span[aria-hidden]{color:var(--ink)}
.pg-claro .pg-case-hero__fato{color:var(--ink-3)}
.pg-claro .pg-case-meta a{color:var(--ink)}

/* palavras de fundo: roxo bem leve no claro */
.pg-claro .sv-letters__row{color:rgba(72,0,103,.018)}
.pg-claro .sv-letters__row:nth-child(3n+2){color:transparent;-webkit-text-stroke:1px rgba(72,0,103,.045)}

/* blocos no claro */
.pg-claro .sv-block__head .sv-kicker{color:var(--ink)}
.pg-claro .sv-block__lead{color:var(--ink-2)}
.pg-claro .sv-rows,.pg-claro .sv-row,.pg-claro .sv-point,.pg-claro .pg-faq,.pg-claro .pg-faq details,.pg-claro .pg-links a,.pg-claro .sv-cta__grid{border-color:var(--line)}
.pg-claro .sv-row__text{color:var(--ink)}
.pg-claro .sv-label{color:var(--ink)}
.pg-claro .sv-row__deliv,.pg-claro .sv-point__text{color:var(--ink-3)}
.pg-claro .sv-row:hover .sv-row__title,.pg-claro .sv-point:hover .sv-point__title{color:#1d0039}
.pg-claro .sv-rule{background:var(--ink)}

/* cases (cards mantidos) */
.pg-claro .pg-case__cat{color:var(--ink-3)}
.pg-claro .pg-case__name{color:var(--ink)}
.pg-claro .pg-case:hover .pg-case__name{color:#1d0039}

/* logos soltos, como a parede da home: sem caixa, cores originais, fio em cima */
.pg-claro .pg-logos{background:none;border-radius:0;padding:clamp(32px,4.5vh,52px) 0 0;border-top:1px solid var(--line)}
.pg-claro .pg-logos .sv-rule{display:none}

/* perguntas e outras páginas */
.pg-claro .pg-faq summary{color:var(--ink)}
.pg-claro .pg-faq summary:hover{color:#1d0039}
.pg-claro .pg-faq summary i{border-color:rgba(72,0,103,.45)}
.pg-claro .pg-faq summary i::before,.pg-claro .pg-faq summary i::after{background:var(--ink)}
.pg-claro .pg-faq__a{color:var(--ink-2)}
.pg-claro .pg-links a{color:var(--ink)}
.pg-claro .pg-links small{color:var(--ink-3)}
.pg-claro .pg-links .cta__circle{border-color:rgba(72,0,103,.45)}
.pg-claro .pg-links .cta__circle svg{stroke:var(--ink)}
.pg-claro .pg-links a:hover strong{color:#1d0039}
.pg-claro .pg-links a:hover .cta__circle{background:var(--ink);border-color:var(--ink)}
.pg-claro .pg-links a:hover .cta__circle svg{stroke:#fff}

/* chamada final no claro */
.pg-claro .sv-cta__title{color:var(--ink)}
.pg-claro .sv-cta__text{color:var(--ink-2)}
.pg-claro .sv-cta__go{color:var(--ink)}

/* faixas de cor (DS3): o número em roxo-escuro, o "como pensamos" em roxo; tinta branca e destaque verde */
.pg-claro .pg-t-dado,.pg-claro .pg-t-pontos{position:relative;z-index:1;padding-top:clamp(80px,12vh,140px);padding-bottom:clamp(80px,12vh,140px);margin-bottom:clamp(90px,15vh,180px);color:#fff}
.pg-claro .pg-t-dado{background:#1d0039}
.pg-claro .pg-t-pontos{background:#480067}
.pg-claro .pg-t-dado .pg-dado{border:0;padding-block:0}
.pg-claro :is(.pg-t-dado,.pg-t-pontos) .sv-block__head .sv-kicker{color:var(--green)}
.pg-claro :is(.pg-t-dado,.pg-t-pontos) .sv-block__lead{color:rgba(255,255,255,.9)}
.pg-claro .pg-t-pontos .sv-point{border-color:rgba(255,255,255,.2)}
.pg-claro .pg-t-pontos .sv-point__title{color:#fff}
.pg-claro .pg-t-pontos .sv-point__text{color:rgba(255,255,255,.78)}
.pg-claro .pg-t-pontos .sv-point:hover .sv-point__title{color:var(--green)}
.pg-claro .pg-t-pontos .sv-rule{background:var(--green)}

/* rolagem cinematográfica: as faixas abrem do centro (clip-path preso à rolagem, paginas.js) */
.pg-claro .pg-t-dado,.pg-claro .pg-t-pontos{will-change:clip-path}