/* ══════════════════════════════════════════════════
   NR-1 — Conformidade Psicossocial · Pantanal Saúde
   Design inspirado em Sólides com paleta Pantanal:
   roxo → verde-deep, magenta → amarelo, lavanda → cream
══════════════════════════════════════════════════ */

[data-variant="nr1"] {
  /* accent já definido corretamente em style.css como var(--pn-teal) */
  --nr1-bg-soft: var(--pn-offwhite, #f7f4ef);
  --nr1-bg-cream: var(--pn-offwhite, #f7f4ef);
  --nr1-green-dark: var(--pn-navy, #0c2b52);
  --nr1-text-on-dark: rgba(255, 255, 255, .85);
}

/* Body em creme suave */
[data-variant="nr1"] body {
  background: var(--nr1-bg-cream);
}

/* ══════════════════════════════════════════════════
   TIPOGRAFIA · variante "corporativa" (igual ao main site)
   Títulos principais → Inter Bold (sans-serif)
   <em> dentro do título → Fraunces italic (serif)
══════════════════════════════════════════════════ */

[data-variant="nr1"] .nr1-hero-title,
[data-variant="nr1"] .nr1-features-title,
[data-variant="nr1"] .nr1-section-title,
[data-variant="nr1"] .nr1-prazo-title,
[data-variant="nr1"] .nr1-closing-title,
[data-variant="nr1"] .nr1-feature-title,
[data-variant="nr1"] .nr1-prazo-card-title,
[data-variant="nr1"] .nr1-beneficio-title {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
  font-variation-settings: normal;
}

[data-variant="nr1"] .nr1-hero-title em,
[data-variant="nr1"] .nr1-features-title em,
[data-variant="nr1"] .nr1-section-title em,
[data-variant="nr1"] .nr1-prazo-title em,
[data-variant="nr1"] .nr1-closing-title em,
[data-variant="nr1"] .nr1-feature-title em,
[data-variant="nr1"] .nr1-prazo-card-title em,
[data-variant="nr1"] .nr1-beneficio-title em {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  color: var(--accent);
}

/* Em sobre fundo escuro (hero verde + prazo verde) → amarelo para contraste */
[data-variant="nr1"] .nr1-hero-title em,
[data-variant="nr1"] .nr1-prazo-title em {
  color: var(--pn-yellow);
}
.nr1-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.nr1-banner-icon {
  font-size: 18px;
  line-height: 1;
}
.nr1-banner-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
}
.nr1-banner-text strong {
  color: var(--pn-yellow);
  font-weight: 700;
  margin-right: 4px;
}
.nr1-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pn-yellow);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color .2s, gap .2s;
}
.nr1-banner-cta:hover {
  color: #fff;
  gap: 8px;
}

/* ─── Hero ─── */
.nr1-hero {
  /* Gradiente direcional sutil: mais escuro top-left, levemente mais claro bottom-right */
  background:
    radial-gradient(120% 90% at 15% 0%, var(--pn-navy, #0c2b52) 0%, transparent 55%),
    radial-gradient(120% 90% at 90% 100%, #1b8b73 0%, transparent 55%),
    var(--pn-green-deep);
  color: #fff;
  padding: clamp(40px, 4.5vw, 60px) 0 0;
  position: relative;
  overflow: hidden;
}
/* Hero precisa permitir mockup escapar lateralmente,
   mas mantém overflow vertical/desktop contido */
@media (min-width: 981px) {
  .nr1-hero { overflow-x: clip; overflow-y: visible; }
}

/* ── CAMADA 1: Iluminação atmosférica suave ── */
.nr1-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Glow verde-menta principal (atrás do mockup) */
    radial-gradient(55% 70% at 75% 45%, rgba(125, 211, 175, .14) 0%, transparent 65%),
    /* Vinhete sutil nas bordas */
    radial-gradient(140% 110% at 50% 50%, transparent 60%, rgba(5, 22, 17, .40) 100%);
}

/* ── CAMADA 2: Elemento decorativo grande no canto (inspirado na "S" do Sólides) ── */
/* Forma orgânica sutil — um círculo gigante parcialmente visível no canto bottom-right */
.nr1-hero-bg-decor {
  position: absolute;
  bottom: -55%;
  right: -12%;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* Anel sutil — gradiente radial cria a impressão de borda iluminada */
  background:
    radial-gradient(circle at center,
      transparent 56%,
      rgba(255, 255, 255, .035) 58%,
      rgba(255, 255, 255, .02) 62%,
      transparent 66%
    );
}
/* Segundo arco menor, sobreposto, dá profundidade */
.nr1-hero-bg-decor::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      transparent 60%,
      rgba(125, 211, 175, .045) 62%,
      transparent 68%
    );
}

/* ── CAMADA 3: Linhas geométricas sutilíssimas (grid muito leve) ── */
.nr1-hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* Linhas horizontais finas, espaçadas */
    linear-gradient(0deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 100% 88px;
  /* Mask pra desaparecer nas bordas e atrás do conteúdo */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%),
    linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%),
    linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: .7;
}

/* Container do hero — layout em CAMADAS (não grid).
   Texto fica na camada de baixo, mockup na de cima — independentes. */
.nr1-hero-grid {
  position: relative;
  z-index: 1;
  min-height: 520px;
  display: block;
  margin-bottom: 40px;
}
@media (max-width: 980px) {
  .nr1-hero-grid {
    min-height: auto;
  }
}

/* Pill "Módulo NR-1" */
.nr1-module-pill {
  display: inline-block;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 26px;
}

/* Título grande (equivalente a display-xl do site principal) */
.nr1-hero-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 28px;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  /* text-wrap balance: distribui o texto em linhas iguais
     (cai em "balance" no Chrome/Edge, ignora em outros) */
  text-wrap: balance;
}

.nr1-hero-sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--nr1-text-on-dark);
  max-width: 56ch;
  margin: 0 0 36px;
}

/* CTA pill amarelo (specs do .btn-yellow + .btn-lg do site principal) */
.nr1-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pn-yellow);
  color: var(--pn-green-deep);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  padding: 16px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(245, 197, 24, .35);
}
.nr1-cta-pill:hover {
  background: #fed535;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(245, 197, 24, .35);
}

/* Variação escura do CTA (para fundo cream) */
.nr1-cta-pill-dark {
  background: var(--pn-green-deep);
  color: #fff;
  box-shadow: 0 8px 24px rgba(15, 39, 71, .25);
}
.nr1-cta-pill-dark:hover {
  background: var(--pn-navy, #0c2b52);
  box-shadow: 0 12px 32px rgba(15, 39, 71, .35);
}

/* ─── CAMADA 1: texto (z-index 1) ─── */
.nr1-hero-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: clamp(24px, 4vw, 56px) 0;
}

/* ─── CAMADA 2: mockup 3D (z-index 2, acima do texto) ─── */
.nr1-hero-visual {
  position: absolute;
  z-index: 2;
  top: -60px;          /* sobe pra acomodar tamanho maior */
  right: -5%;          /* escapa um pouco pela direita */
  width: 85%;          /* aumentado de 70% pra 85% */
  max-width: 1280px;   /* aumentado de 1100px pra 1280px */
  pointer-events: none;
}
.nr1-hero-mockup {
  width: 100%;
  height: auto;
  display: block;
  /* Sombra suave embaixo pra dar "peso" ao 3D flutuando */
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .38))
          drop-shadow(0 80px 100px rgba(0, 0, 0, .22));
  animation: nr1-mockup-float 6s ease-in-out infinite;
  will-change: transform;
}
@keyframes nr1-mockup-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .nr1-hero-mockup { animation: none; }
}

/* Mobile · mockup vai pra baixo do texto (sem sobrepor) */
@media (max-width: 980px) {
  .nr1-hero-content {
    max-width: none;
  }
  .nr1-hero-visual {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 720px;
    margin: 32px auto 0;
  }
}

/* ─── Features section · estilo "Our Main Practices" + blobs orgânicos ─── */
.nr1-features {
  background: var(--nr1-cream);
  padding: clamp(72px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}

/* Blobs decorativos — atrás de todo conteúdo, peeking das bordas */
.nr1-features-blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  width: auto;
  /* Animação suave de respiração — float orgânico */
  animation: nr1-blob-drift 18s ease-in-out infinite;
  will-change: transform;
}

/* Blob mint à esquerda · entra pela margem, fica entre header e cards */
.nr1-features-blob--left {
  height: 640px;
  top: 32%;
  left: -240px;
  opacity: .42;
  transform: rotate(-8deg);
  animation-delay: 0s;
}

/* Blob dark grande à direita · ancora visualmente o canto inferior */
.nr1-features-blob--right {
  height: 740px;
  bottom: -240px;
  right: -260px;
  opacity: .18;
  transform: rotate(5deg);
  animation-delay: -9s;
}

/* Blob mint no canto superior direito · contrabalança o esquerdo, fecha a composição */
.nr1-features-blob--top-right {
  height: 440px;
  top: -120px;
  right: -120px;
  opacity: .32;
  transform: rotate(35deg);
  animation-delay: -5s;
}

@keyframes nr1-blob-drift {
  0%, 100% {
    transform: translate(0, 0) rotate(var(--blob-rot, 0deg));
  }
  50% {
    transform: translate(12px, -16px) rotate(var(--blob-rot, 0deg));
  }
}
/* Hack: a animação respeita o rotate de cada blob via CSS var */
.nr1-features-blob--left      { --blob-rot: -8deg; }
.nr1-features-blob--right     { --blob-rot:  5deg; }
.nr1-features-blob--top-right { --blob-rot: 35deg; }

@media (prefers-reduced-motion: reduce) {
  .nr1-features-blob { animation: none; }
}

@media (max-width: 880px) {
  .nr1-features-blob--left      { height: 400px; left: -140px; opacity: .35; }
  .nr1-features-blob--right     { height: 460px; right: -160px; bottom: -120px; opacity: .15; }
  .nr1-features-blob--top-right { height: 260px; top: -80px; right: -80px; opacity: .25; }
}

/* Container sempre acima dos blobs */
.nr1-features > .container {
  position: relative;
  z-index: 1;
}

/* Header com layout 2-col: heading à esquerda + bonecos à direita */
.nr1-features-head {
  text-align: left;
  max-width: none;
  margin: 0 0 clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
@media (max-width: 880px) {
  .nr1-features-head { grid-template-columns: 1fr; gap: 20px; }
}

.nr1-features-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--pn-green-deep);
  margin: 0;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  max-width: 14ch;
}
.nr1-features-title em {
  font-style: italic;
  color: var(--pn-green-deep);
  font-weight: 400;
}

/* Bonecos 3D — ocupam a coluna direita do header (no lugar do subtitle) */
.nr1-features-figures {
  position: relative;
  width: 100%;
  pointer-events: none;
}
.nr1-features-figures img {
  /* Width 135% + margens negativas balanceadas: escapa pra ambos os lados */
  width: 135% !important;
  max-width: none !important;
  height: auto;
  max-height: clamp(340px, 36vw, 520px);
  object-fit: contain;
  object-position: center;
  display: block;
  margin-left: -25%;
  margin-right: 0;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .12))
          drop-shadow(0 8px 14px rgba(15, 39, 71, .08));
  animation: nr1-figures-float 7s ease-in-out infinite;
  will-change: transform;
  position: relative;
  z-index: 2;
}
@media (max-width: 880px) {
  .nr1-features-figures img {
    width: 100%;
    margin-right: 0;
  }
}
@keyframes nr1-figures-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .nr1-features-figures img { animation: none; }
}
@media (max-width: 880px) {
  .nr1-features-figures img { max-height: 240px; }
}

.nr1-features-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;  /* cards bem juntinhos como blocos */
  margin-bottom: clamp(48px, 6vw, 64px);
}
@media (max-width: 880px) {
  .nr1-features-grid { grid-template-columns: 1fr; gap: 4px; }
}

/* Cards como blocos warm tan, sem sombra, sem border-top */
.nr1-feature-card {
  background: var(--nr1-feature-bg, #e8dcb8);
  border-radius: 4px;
  padding: clamp(36px, 4.5vw, 56px) clamp(28px, 3.5vw, 42px);
  position: relative;
  border-top: none;
  box-shadow: none;
  transition: background .25s;
}
.nr1-feature-card:hover {
  background: #ddd0a4;  /* tom ligeiramente mais saturado no hover */
  transform: none;
}

/* Ícone agora pequeno e mais sutil — alinhado com o estilo "minimal" */
.nr1-feature-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgba(15, 39, 71, .12);
  color: var(--pn-green-deep);
  border-radius: 8px;
  margin-bottom: 24px;
}
.nr1-feature-icon svg {
  width: 18px;
  height: 18px;
}

.nr1-feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--pn-green-deep);
  margin: 0 0 18px;
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
.nr1-feature-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--pn-text);
  margin: 0;
  max-width: 36ch;
}

.nr1-features-cta {
  text-align: center;
  margin-top: clamp(32px, 4vw, 48px);
}

/* ─── Ribbon marquee (scroll infinito → esquerda) ─── */
.nr1-ribbon {
  background: var(--pn-green-deep);
  padding: 18px 0;
  overflow: hidden;
  position: relative;
  /* Fade nas pontas para entrada/saída suave */
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.nr1-ribbon-track {
  display: flex;
  width: max-content;
  animation: nr1-ribbon-scroll 50s linear infinite;
  will-change: transform;
}

/* Pausa no hover (UX para leitura) */
.nr1-ribbon:hover .nr1-ribbon-track {
  animation-play-state: paused;
}

.nr1-ribbon-set {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3vw, 44px);
  padding-right: clamp(28px, 3vw, 44px);
  flex-shrink: 0;
}

.nr1-ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.nr1-ribbon-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pn-yellow);
  flex-shrink: 0;
}
.nr1-ribbon-num {
  font-weight: 700;
  color: var(--pn-yellow);
  letter-spacing: .02em;
}
.nr1-ribbon-text {
  color: rgba(255, 255, 255, .82);
}

@keyframes nr1-ribbon-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .nr1-ribbon-track { animation: none; }
}

/* Padding global das sections (mais compacto) — sobrescreve cada uma */
.nr1-section,
[data-variant="nr1"] .nr1-features,
[data-variant="nr1"] .nr1-prazo,
[data-variant="nr1"] .nr1-beneficios,
[data-variant="nr1"] .nr1-faq,
[data-variant="nr1"] .nr1-closing {
  padding-top: clamp(48px, 5.5vw, 72px);
  padding-bottom: clamp(48px, 5.5vw, 72px);
}

/* ─── Section head genérico (reusado por várias sections) ─── */
.nr1-section-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(32px, 4vw, 52px);
}
.nr1-section-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--pn-green-deep);
  margin: 0 0 22px;
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
.nr1-section-title em {
  font-style: italic;
  color: var(--pn-green-deep);
  font-weight: 400;
}
.nr1-section-sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--pn-text-soft);
  max-width: 56ch;
  margin: 0 auto;
}

/* ─── Prazo (deadline urgency) ─── */
.nr1-prazo {
  background: var(--pn-green-deep);
  color: #fff;
  padding: clamp(80px, 10vw, 130px) 0;
  position: relative;
  overflow: hidden;
}

/* Ícone gigante de alerta no fundo — decorativo, cria profundidade */
.nr1-prazo-bg-icon {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  height: 68%;
  width: auto;
  color: #fff;
  opacity: 0.07;       /* sutil mas presente sobre o verde-escuro */
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 880px) {
  .nr1-prazo-bg-icon { right: -10%; height: 50%; opacity: .05; }
}

.nr1-prazo > .container {
  position: relative;
  z-index: 1;
}
.nr1-prazo-bg-decor {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(60% 50% at 20% 20%, rgba(245, 197, 24, .08) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 80%, rgba(255, 255, 255, .03) 0%, transparent 60%),
    repeating-radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .015) 0 1.5px, transparent 1.5px 4px);
  pointer-events: none;
  z-index: 0;
}
.nr1-prazo > .container {
  position: relative;
  z-index: 1;
}
.nr1-prazo-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(32px, 4vw, 52px);
}
.nr1-prazo-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 22px;
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
.nr1-prazo-title em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);   /* era amarelo — agora branco */
  font-weight: 400;
}

/* Destaque da data "26 de maio" — amarelo + background sutil */
.nr1-prazo-date {
  display: inline-block;
  color: var(--pn-yellow);
  background: rgba(245, 197, 24, 0.18);
  padding: 0 .18em;
  border-radius: 6px;
  font-style: italic;
}

/* Countdown regressivo abaixo do título */
.nr1-prazo-countdown {
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 500;
  font-style: normal;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  margin: 14px 0 18px;
  letter-spacing: .01em;
}

.nr1-prazo-sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  max-width: 56ch;
  margin: 0 auto;
}

.nr1-prazo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 56px);
}
@media (max-width: 880px) {
  .nr1-prazo-cards { grid-template-columns: 1fr; }
}
.nr1-prazo-card {
  background: #fff;
  border-radius: 16px;
  padding: clamp(32px, 4vw, 44px) clamp(24px, 3vw, 36px);
  text-align: center;
  transition: transform .2s, box-shadow .2s;
  /* Borda esquerda colorida — define a "progressão visual" */
  border-left: 5px solid transparent;
}
.nr1-prazo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .14);
}

/* Card 1 · Prazo final — verde claro (menta) */
.nr1-prazo-card--mint {
  border-left-color: #1b8b73;
}
/* Card 2 · Evite riscos — amarelo Pantanal */
.nr1-prazo-card--yellow {
  border-left-color: var(--pn-yellow);
}
/* Card 3 · Antecipe-se — verde escuro Pantanal */
.nr1-prazo-card--dark {
  border-left-color: var(--pn-green-deep);
}
.nr1-prazo-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--pn-yellow);
  margin-bottom: 18px;
}
.nr1-prazo-icon svg {
  width: 100%;
  height: 100%;
}
.nr1-prazo-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.6vw, 1.55rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--pn-green-deep);
  margin: 0 0 14px;
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
.nr1-prazo-card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pn-text-soft);
  margin: 0;
}
.nr1-prazo-card-desc strong {
  color: var(--pn-green-deep);
  font-weight: 700;
}

.nr1-prazo-callout {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(245, 197, 24, .4);
  border-radius: 999px;
  padding: 14px 28px;
  color: rgba(255, 255, 255, .92);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 auto;
  text-align: left;
}
.nr1-prazo-callout svg {
  width: 18px;
  height: 18px;
  color: var(--pn-yellow);
  flex-shrink: 0;
}
.nr1-prazo-callout strong {
  color: var(--pn-yellow);
  font-weight: 700;
}
@media (max-width: 720px) {
  .nr1-prazo-callout { font-size: .88rem; padding: 12px 18px; flex-wrap: wrap; }
}
.nr1-prazo > .container { text-align: center; }

/* ─── Benefícios por área ─── */
.nr1-beneficios {
  background: var(--nr1-bg-soft);
  padding: clamp(72px, 9vw, 120px) 0;
}
.nr1-beneficios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 64px);
}
@media (max-width: 880px) {
  .nr1-beneficios-grid { grid-template-columns: 1fr; }
}
.nr1-beneficio-card {
  background: #fff;
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 10px 32px rgba(15, 39, 71, .06);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
}

/* Avatar/portrait com foto real no topo de cada card */
.nr1-beneficio-portrait {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  margin: 0 0 32px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(15, 39, 71, .12);
  /* Borda dupla (ring effect) — cada variante tem cor diferente */
  border: 3px solid #fff;
}
.nr1-beneficio-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  /* Zoom pra ignorar padding interno do PNG e focar no rosto */
  transform: scale(1.6);
  transform-origin: center 35%;
}
.nr1-beneficio-portrait-tag {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pn-text-soft);
  white-space: nowrap;
  background: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 39, 71, .12);
  box-shadow: 0 2px 6px rgba(15, 39, 71, .06);
}
/* Anel colorido externo — cada departamento com sua cor */
.nr1-beneficio-portrait--warm {
  box-shadow: 0 0 0 3px var(--pn-yellow), 0 6px 18px rgba(15, 39, 71, .12);
}
.nr1-beneficio-portrait--mint {
  box-shadow: 0 0 0 3px #1b8b73, 0 6px 18px rgba(15, 39, 71, .12);
}
.nr1-beneficio-portrait--deep {
  box-shadow: 0 0 0 3px var(--pn-green-deep), 0 6px 18px rgba(15, 39, 71, .12);
}
.nr1-beneficio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(15, 39, 71, .12);
}
.nr1-beneficio-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  color: var(--pn-green-deep);
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  align-self: flex-start;
  margin-bottom: 20px;
}
.nr1-beneficio-pill-icon {
  display: inline-grid;
  place-items: center;
  color: var(--pn-green-deep);
}
.nr1-beneficio-pill-icon svg {
  width: 16px;
  height: 16px;
}
.nr1-beneficio-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.55vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--pn-green-deep);
  margin: 0 0 14px;
  line-height: 1.2;
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
.nr1-beneficio-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--pn-text-soft);
  margin: 0 0 22px;
}
.nr1-beneficio-list {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(15, 39, 71, .1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nr1-beneficio-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pn-text);
}
.nr1-check {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--pn-yellow);
  color: var(--pn-green-deep);
  margin-top: 1px;
}
.nr1-check svg {
  width: 10px;
  height: 10px;
}

/* ─── FAQ ─── */
.nr1-faq {
  background: var(--nr1-bg-cream);
  padding: clamp(72px, 9vw, 120px) 0;
}
/* Grid 2 colunas: lista FAQ + personagem animado à direita */
.nr1-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(32px, 4vw, 60px);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
.nr1-faq-aside {
  position: sticky;
  top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nr1-faq-character {
  width: 100%;
  height: auto;
  max-width: 320px;
  pointer-events: none;
  user-select: none;
  display: block;
  animation: nr1FaqFloat 4.5s ease-in-out infinite;
  filter: drop-shadow(0 18px 28px rgba(15, 39, 71, 0.18));
}
@keyframes nr1FaqFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
  .nr1-faq-character { animation: none; }
}
@media (max-width: 900px) {
  .nr1-faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .nr1-faq-aside {
    position: static;
    order: -1;
    max-width: 240px;
    margin: 0 auto;
  }
  .nr1-faq-character { max-width: 240px; }
}
@media (max-width: 600px) {
  .nr1-faq-aside { display: none; }
}

.nr1-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nr1-faq-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s;
  box-shadow: 0 4px 16px rgba(15, 39, 71, .04);
}
.nr1-faq-item:hover {
  box-shadow: 0 8px 24px rgba(15, 39, 71, .08);
}
.nr1-faq-item.is-open {
  box-shadow: 0 10px 32px rgba(15, 39, 71, .1);
}
.nr1-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--pn-green-deep);
  text-align: left;
  transition: color .2s;
}
.nr1-faq-q:hover {
  color: var(--pn-navy, #0c2b52);
}
.nr1-faq-arrow {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--pn-green-deep);
  flex-shrink: 0;
  transition: transform .25s;
}
.nr1-faq-arrow svg {
  width: 14px;
  height: 14px;
}
.nr1-faq-item.is-open .nr1-faq-arrow {
  transform: rotate(90deg);
  background: var(--pn-yellow);
}
.nr1-faq-a {
  padding: 0 28px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--pn-text-soft);
  animation: nr1-faq-fade .25s ease-out;
}
@keyframes nr1-faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Closing ─── */
.nr1-closing {
  background: var(--nr1-bg-cream);
  padding: clamp(80px, 10vw, 130px) 0;
}

/* Grid 2-col: foto à esquerda, texto à direita */
.nr1-closing-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .nr1-closing-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Foto da equipe corporativa em reunião */
.nr1-closing-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(15, 39, 71, .14);
}
.nr1-closing-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Tom levemente quente pra harmonizar com a paleta cream */
  filter: contrast(1.02) saturate(.96);
}
.nr1-closing-photo-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pn-green-deep);
  background: rgba(255, 255, 255, .85);
  padding: 6px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.nr1-closing-photo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pn-yellow);
}

.nr1-closing-inner {
  text-align: left;
}
@media (max-width: 880px) {
  .nr1-closing-inner { text-align: center; }
}
.nr1-closing-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--pn-green-deep);
  margin: 0 0 24px;
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
.nr1-closing-title em {
  font-style: italic;
  color: var(--pn-green-deep);
  font-weight: 400;
}
.nr1-closing-sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--pn-text-soft);
  max-width: 56ch;
  margin: 0;
}
@media (max-width: 880px) {
  .nr1-closing-sub { margin: 0 auto; }
}

/* ─── Tweaks do nav nesta página ─── */
/* Nav em modo padrão (texto branco no topo do hero verde-escuro);
   ao scrollar, vira branco com texto escuro (comportamento padrão do site) */

/* ═══ POLISH · mancha mint atrás do personagem do FAQ ═══ */
.nr1-faq-aside { position: relative; }
.nr1-faq-aside::before {
  content: "";
  position: absolute;
  inset: -12% -18%;
  background-image: url("../assets/nr1-blob-mint.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.45;
  transform: rotate(18deg);
  z-index: 0;
  pointer-events: none;
}
.nr1-faq-character { position: relative; z-index: 1; }