/* =========================================================
   Narro · páginas estratégicas (mercados, serviços e cases) · 22/10/2026
   Mesma base da página Serviços (servicos.css + style.css). Aqui ficam só os blocos novos.
   Gerado junto com bastidores/paginas-estrategicas/gerar.py.
   ========================================================= */
.pg-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.pg-crumbs a{color:rgba(255,255,255,.45);transition:color .3s ease}
.pg-crumbs a:hover{color:var(--green)}
.pg-crumbs span[aria-hidden]{color:var(--green)}
.sv-hero .pg-crumbs + .sv-kicker{margin-top:18px}

/* número em destaque com fonte */
.pg-dado{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end;padding-block:clamp(36px,6vh,64px);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.pg-dado__num{font-size:clamp(56px,7.4vw,128px);font-weight:700;line-height:.95;letter-spacing:-.045em;color:var(--green)}
.pg-dado__num small{display:block;margin-top:12px;font-size:clamp(15px,1.2vw,19px);font-weight:300;letter-spacing:-.005em;line-height:1.35;color:#fff}
.pg-dado__text{max-width:520px;font-size:clamp(14px,1.05vw,17px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.9)}
.pg-dado__fonte{display:block;margin-top:14px;font-size:10.5px;font-weight:400;letter-spacing:.04em;color:rgba(255,255,255,.45)}
.pg-dado__fonte a{text-decoration:underline;text-underline-offset:3px}

/* cases do mercado */
.pg-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,32px)}
.pg-case{position:relative;display:flex;flex-direction:column;gap:14px}
.pg-case__media{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:2px;background:#1a1a1a}
.pg-case__media img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.1s var(--ease-out),filter .6s ease}
.pg-case:hover .pg-case__media img{transform:scale(1.05)}
.pg-case__cat{font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.pg-case__name{font-size:clamp(19px,1.5vw,24px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:#fff;transition:color .4s ease}
.pg-case:hover .pg-case__name{color:var(--green)}
.pg-case__link::after{content:"";position:absolute;inset:0}
.pg-vazio{font-size:13px;font-weight:300;line-height:1.6;color:rgba(255,255,255,.62);max-width:56ch}

/* marcas atendidas: as cores originais sobre o cinza da Narro, como a parede de clientes da home */
.pg-logos{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(22px,3vw,48px) clamp(18px,3vw,56px);align-items:center;padding:clamp(32px,5vw,64px) clamp(24px,4vw,64px);background:#d6d6d6;border-radius:2px}
.pg-logos li{display:flex;align-items:center;justify-content:center;height:clamp(38px,4vw,58px)}
.pg-logos img{max-width:100%;max-height:100%;width:auto;height:auto;transition:transform .6s var(--ease-out)}
.pg-logos li:hover img{transform:scale(1.06)}
.pg-logos .sv-rule{top:0}

/* perguntas frequentes */
.pg-faq{border-top:1px solid rgba(255,255,255,.14)}
.pg-faq details{border-bottom:1px solid rgba(255,255,255,.14)}
.pg-faq summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding-block:clamp(22px,3.4vh,34px);cursor:pointer;list-style:none;font-size:clamp(18px,1.5vw,24px);font-weight:400;line-height:1.3;letter-spacing:-.015em;color:#fff;transition:color .4s ease}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary:hover{color:var(--green)}
.pg-faq summary i{position:relative;width:22px;height:22px;border-radius:50%;border:1px solid rgba(101,214,0,.55)}
.pg-faq summary i::before,.pg-faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.5px;background:var(--green);transform:translate(-50%,-50%);transition:transform .4s var(--ease-out)}
.pg-faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.pg-faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.pg-faq__a{max-width:760px;padding-bottom:clamp(24px,3.6vh,36px);font-size:clamp(14px,1.05vw,16px);font-weight:300;line-height:1.65;color:rgba(255,255,255,.78)}

/* outras páginas (links internos) */
.pg-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,96px)}
.pg-links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding-block:clamp(20px,3vh,30px);border-top:1px solid rgba(255,255,255,.14);color:#fff}
.pg-links strong{display:block;font-size:clamp(18px,1.45vw,23px);font-weight:400;letter-spacing:-.015em;transition:color .4s ease}
.pg-links small{display:block;margin-top:6px;font-size:12.5px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.55)}
.pg-links .cta__circle{background:transparent;border:1px solid rgba(101,214,0,.55)}
.pg-links .cta__circle svg{stroke:var(--green)}
.pg-links a:hover strong{color:var(--green)}
.pg-links a:hover .cta__circle{background:var(--green);transform:translateX(4px)}
.pg-links a:hover .cta__circle svg{stroke:#1d0039}

/* página do case */
.pg-case-hero__fato{display:block;margin-top:22px;font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pg-capa{margin-top:clamp(8px,2vh,24px);overflow:hidden;border-radius:2px;background:#1a1a1a}
.pg-capa img{display:block;width:100%;height:auto}
.pg-galeria{display:grid;gap:clamp(14px,2vw,28px)}
.pg-galeria figure{margin:0;overflow:hidden;border-radius:2px;background:#141414}
.pg-galeria img,.pg-galeria video{display:block;width:100%;height:auto}
.pg-galeria video{max-height:88svh;margin-inline:auto;background:#000}
.pg-case-meta{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}
.pg-case-meta a{display:inline-flex;align-items:center;gap:12px;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#fff}
.pg-case-meta .cta__circle{background:var(--green)}
.pg-case-meta .cta__circle svg{stroke:#1d0039}
.pg-case-meta a:hover .cta__circle{transform:translateX(4px)}

@media(max-width:1100px){.pg-cases{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){
  .pg-dado,.pg-links{grid-template-columns:minmax(0,1fr)}
  .pg-cases{grid-template-columns:minmax(0,1fr)}
  .pg-logos{grid-template-columns:repeat(3,minmax(0,1fr));padding:28px 20px}
}

/* topo das páginas novas: título um pouco menor que o da página Serviços, para a 1ª linha (a maior da escada) não encostar no "n" */
.page-pg .sv-hero__title{font-size:clamp(40px,4.4vw,76px)}
/* página do case: a peça principal fica colorida dentro do "n" */
.page-pg-case .sv-hero__img{filter:none}