/* ==========================================================================
   NR Gestão, site.css
   Layout compartilhado (header, footer, hero, cards de página).
   Não define cor nem fonte nova: consome só tokens.css.
   ========================================================================== */

/* ---- Utilitários de acessibilidade ---- */
.sr-only{
  position:absolute;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:100;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--font-display);font-weight:700;
  padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:40;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:14px;
}
.site-logo{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--brand-ink);text-decoration:none;
}
.site-logo:hover{text-decoration:none}
.site-logo__word{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--text)}
.site-logo__word strong{font-weight:800;color:var(--brand-ink)}

/* Logo do cabeçalho 20% maior que o padrão (não afeta o logo do rodapé) */
.site-header .site-logo__mark{width:41px;height:41px}
.site-header .site-logo__word{font-size:1.26rem}

.site-nav{display:flex;align-items:center}
.site-nav__toggle{
  display:none;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:1.1rem;line-height:1;padding:8px 11px;cursor:pointer;color:var(--text);
}
.site-nav__list{
  display:flex;align-items:center;gap:22px;
  list-style:none;margin:0;padding:0;
}
.site-nav__list a{
  color:var(--text);font-weight:500;font-size:.95rem;
  padding-block:4px;border-bottom:2px solid transparent;
}
.site-nav__list a:hover{color:var(--brand-ink);text-decoration:none}
.site-nav__list a[aria-current="page"]{
  color:var(--brand-ink);font-weight:600;border-bottom-color:var(--accent);
}

@media (max-width:860px){
  .site-nav__toggle{display:inline-flex;align-items:center;justify-content:center}
  .site-nav__list{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:10px var(--gutter) 16px;
  }
  .site-nav__list.is-open{display:flex}
  .site-nav__list a{width:100%;padding-block:10px}
}

/* ==========================================================================
   Grade fixa de 3 colunas (ex.: grade de serviços, 2 linhas x 3 colunas)
   ========================================================================== */
.grid--3col{grid-template-columns:repeat(3, 1fr)}
@media (max-width:760px){.grid--3col{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:480px){.grid--3col{grid-template-columns:1fr}}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb{margin-top:28px}
.breadcrumb ol{
  list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;
  font-size:var(--fs-small);
}
.breadcrumb li{display:flex;align-items:center}
.breadcrumb li:not(:last-child)::after{content:"/";margin:0 8px;opacity:.5}
.breadcrumb a{color:inherit;opacity:.75}
.breadcrumb a:hover{opacity:1}
.breadcrumb li[aria-current="page"]{opacity:.95;font-weight:600}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero__inner,.hero-conteudo{max-width:56rem}
.hero__inner .eyebrow,.hero-conteudo .eyebrow{margin-bottom:14px;display:block}
.hero__inner h1,.hero-conteudo h1{margin-bottom:18px}
.hero__lead{font-size:1.12rem;max-width:none}
.hero__sub{color:var(--on-brand);opacity:.9;max-width:52ch}
.hero__chips{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px;
  margin:22px 0 0;padding:0;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__note{font-size:var(--fs-small);opacity:.8;margin-top:14px;max-width:52ch}
.hero__note-light{font-size:var(--fs-small);color:var(--text-dim);max-width:52ch}
.hero__note--spaced{margin-top:18px}
.hero-dark .btn-ghost{color:var(--on-brand);border-color:rgba(234,242,248,.35)}
.hero-dark .btn-ghost:hover{border-color:rgba(234,242,248,.6)}

/* ==========================================================================
   Passos (Como funciona)
   ========================================================================== */
.steps{
  list-style:none;margin:0;padding:0;counter-reset:step;
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.steps > li{
  counter-increment:step;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px 20px;box-shadow:var(--shadow);
}
.steps > li::before{
  content:counter(step);
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);
  font-family:var(--font-display);font-weight:700;font-size:.9rem;
  margin-bottom:12px;
}
.steps h3{margin-bottom:6px}

/* ==========================================================================
   Listas com marcador de conformidade
   ========================================================================== */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check-list li{
  padding-left:26px;position:relative;max-width:var(--maxw-prose);
}
.check-list li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:var(--accent-text);font-weight:700;
}

/* Lista neutra (itens que não se aplicam, alternativas, etc.) */
.dash-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dash-list li{
  padding-left:22px;position:relative;max-width:var(--maxw-prose);
  color:var(--text-dim);
}
.dash-list li::before{content:"–";position:absolute;left:0;top:0}
.dash-list strong{color:var(--text)}

/* Duas colunas lado a lado (ex.: "é para você" / "não é para você") */
.two-col{
  display:grid;gap:28px;margin-top:20px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.two-col h3{margin-bottom:12px}

/* Duas colunas texto + imagem de apoio (ex.: bloco de diferencial) */
.two-col--media{align-items:center;margin-top:0}
.two-col--media img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover;
}

/* ==========================================================================
   Hero com foto de fundo (LCP) + camada de overlay azul para contraste
   ========================================================================== */
.hero--photo{position:relative;overflow:hidden}
.hero--photo .hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero--photo .hero__overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    160deg,
    color-mix(in srgb, var(--nr-navy-deep) 93%, transparent),
    color-mix(in srgb, var(--nr-navy) 88%, transparent) 70%
  );
}
.hero--photo .hero__inner{position:relative;z-index:2}

/* Variante simplificada (Home): a própria .hero-dark carrega a foto,
   sem precisar do modificador .hero--photo. */
.hero-dark{position:relative;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;z-index:0;
}
/* Hero da Home especificamente: mais alto que o hero-dark genérico
   (usado também na faixa de CTA final e no hero simples de outras páginas). */
.hero--home{
  padding-block:120px 96px;min-height:560px;display:flex;align-items:center;
}
@media (max-width:760px){
  .hero--home{padding-block:88px 64px;min-height:0}
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    160deg,
    color-mix(in srgb, var(--nr-navy-deep) 93%, transparent),
    color-mix(in srgb, var(--nr-navy) 88%, transparent) 70%
  );
}
.hero-conteudo{position:relative;z-index:2}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{display:grid;gap:0;margin-top:18px}
.faq-item{padding-block:18px;border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none}
.faq-item h3,.faq-item h4{margin-bottom:8px;font-size:var(--fs-h3)}

/* ==========================================================================
   Link de linkagem interna em destaque
   ========================================================================== */
.link-strong{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:700;color:var(--brand-ink);
}
.link-strong::after{content:"→"}

/* ==========================================================================
   CTA final
   ========================================================================== */
.cta-final__inner{max-width:44rem;text-align:left}
.cta-final__inner p{max-width:52ch}
.cta-final__links{
  list-style:none;margin:26px 0 0;padding:18px 0 0;
  border-top:1px solid rgba(234,242,248,.15);
  display:grid;gap:10px;
}
.cta-final__links a{color:var(--on-brand);opacity:.85;font-size:.95rem}
.cta-final__links a:hover{opacity:1}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--nr-navy-deep);color:var(--on-brand)}
.site-footer a{color:var(--on-brand)}
.site-footer .site-logo__word{color:var(--on-brand)}
.site-footer .site-logo__word strong{color:#fff}
.site-footer__inner{
  display:grid;gap:32px;padding-block:var(--space-section);
  grid-template-columns:1.4fr 1fr 1fr 1fr;
}
.site-footer__brand p{opacity:.8;max-width:34ch;font-size:var(--fs-small);margin-top:12px}
.site-footer__heading{
  font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.08em;
  color:var(--on-brand);opacity:.7;margin-bottom:14px;
}
.site-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer__col a{font-size:.92rem;opacity:.9}
.site-footer__col a:hover{opacity:1}
.site-footer__contact{font-size:.92rem;opacity:.85;margin-bottom:16px}
.site-footer__bottom{
  border-top:1px solid rgba(234,242,248,.15);
  padding-block:18px;font-size:var(--fs-small);opacity:.7;
}
.site-footer__bottom p{max-width:none}

@media (max-width:760px){
  .site-footer__inner{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .site-footer__inner{grid-template-columns:1fr}
}

/* ==========================================================================
   Menu: dropdown de Serviços
   ========================================================================== */
.has-sub{position:relative}
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.has-sub__trigger{display:inline-flex;align-items:center;gap:6px}
.has-sub__caret{transition:transform .18s ease}
.submenu{
  position:absolute;top:calc(100% + 12px);left:-10px;min-width:264px;z-index:50;
  list-style:none;margin:0;padding:8px;display:grid;gap:2px;
  background:var(--nr-navy-deep);border:1px solid rgba(234,242,248,.14);
  border-radius:var(--radius-sm);box-shadow:0 22px 44px -20px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease;
}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.has-sub:hover .has-sub__caret,.has-sub:focus-within .has-sub__caret{transform:rotate(180deg)}
.submenu a{display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;color:var(--on-brand);border-bottom:none}
.submenu a:hover{background:rgba(234,242,248,.1);color:#fff}
@media (max-width:860px){
  .has-sub::after{display:none}
  .submenu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:none;box-shadow:none;padding:2px 0 6px 14px;min-width:0;
  }
  .submenu a{color:var(--text);padding:8px 0}
  .submenu a:hover{background:transparent;color:var(--brand-ink)}
  .has-sub__caret{display:none}
}

/* ==========================================================================
   FAQ accordion (details/summary)
   ========================================================================== */
.faq-accordion{display:grid;gap:0;margin-top:18px}
.faq-q{border-top:1px solid var(--line)}
.faq-q:first-child{border-top:none}
.faq-q summary{
  list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);color:var(--text);
}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--font-body,inherit);font-weight:400;font-size:1.5rem;line-height:1;
  color:var(--accent-strong);
}
.faq-q[open] summary::after{content:"–"}
.faq-q summary:hover{color:var(--brand-ink)}
.faq-answer{padding:0 0 18px;color:var(--text)}
.faq-answer p{margin-top:0}

/* ==========================================================================
   Segmentos (tiles com foto na Home)
   ========================================================================== */
.segmentos{
  list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:760px){.segmentos{grid-template-columns:repeat(2,1fr)}}
.segmento{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--shadow);
}
.segmento img{width:100%;height:100%;object-fit:cover;display:block}
.segmento::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(10,30,54,.82));
}
.segmento__rot{
  position:absolute;left:0;bottom:0;z-index:1;padding:14px;
  color:#fff;font-family:var(--font-display);font-weight:700;
}

/* ==========================================================================
   CTA final: grade texto + simulador de WhatsApp
   ========================================================================== */
.cta-final__grid{
  display:grid;gap:40px;align-items:center;
  grid-template-columns:1.1fr .9fr;
}
@media (max-width:820px){.cta-final__grid{grid-template-columns:1fr;gap:30px}}
.wa-phone{
  width:330px;max-width:100%;margin-inline:auto;
  background:#050608;border-radius:44px;padding:11px;
  border:1px solid #1c1f24;box-shadow:0 34px 70px -28px rgba(0,0,0,.7),inset 0 0 0 2px #16181c;
}
.wa-screen{background:#0b141a;border-radius:34px;overflow:hidden;display:flex;flex-direction:column;min-height:520px}
.wa-head{display:flex;align-items:center;gap:10px;background:#111b21;padding:12px 14px}
.wa-back{color:#8fa0ab;font-size:1.3rem;line-height:1}
.wa-avatar{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.wa-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.wa-name{font-family:var(--font-display);font-weight:700;color:#eaf2f8;font-size:.98rem}
.wa-status{font-size:.74rem;color:#25d366}
.wa-icons{display:flex;gap:15px;color:#8fa0ab}
.wa-body{flex:1;background:#0b141a;padding:16px 13px;display:flex;flex-direction:column;gap:9px}
.wa-bubble{max-width:82%;padding:7px 11px 16px;border-radius:11px;font-size:.86rem;line-height:1.4;position:relative;color:#e9edef}
.wa-ts{position:absolute;right:9px;bottom:5px;font-size:.62rem;opacity:.55}
.wa-in{background:#1f2c33;align-self:flex-start;border-top-left-radius:2px}
.wa-out{background:#005c4b;align-self:flex-end;border-top-right-radius:2px}
.wa-typing{align-self:flex-start;background:#1f2c33;border-radius:12px;padding:11px 14px;display:flex;gap:5px}
.wa-typing span{width:7px;height:7px;border-radius:50%;background:#8fa0ab;animation:wablink 1.2s infinite}
.wa-typing span:nth-child(2){animation-delay:.2s}
.wa-typing span:nth-child(3){animation-delay:.4s}
@keyframes wablink{0%,60%,100%{opacity:.35}30%{opacity:.95}}
.wa-input{display:flex;align-items:center;gap:9px;background:#111b21;padding:10px 12px}
.wa-field{flex:1;background:#1f2c33;color:#8fa0ab;border-radius:20px;padding:10px 15px;font-size:.83rem}
.wa-send{width:40px;height:40px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#fff;flex:none}
@media (prefers-reduced-motion:reduce){.wa-typing span{animation:none}}