/* ═══════════════════════════════════════════════════
   NOSSO COMPROMISSO
   Figma 47:1974 · bg-light
   Parte 1: text reveal (acende no scroll)
   Parte 2: carrossel em arco + convicção + CTA
   Desktop-first · base 1920px
   ═══════════════════════════════════════════════════ */

#compromisso {
  position: relative;
  background-color: var(--c-light);
  /* SEM overflow:hidden — o arco full-bleed precisa sangrar até as bordas
     da viewport. O fade por opacidade (JS) esconde as fotos fora do arco. */
  padding: clamp(120px, 13vw, 250px) var(--gutter) clamp(80px, 6.25vw, 120px);
}


/* ─────────────────────────────────────────────────── */
/*  PARTE 1 — INTRO (badge + texto reveal 88px)        */
/* ─────────────────────────────────────────────────── */

.nc__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 2.08vw, 40px);
  text-align: center;
}

/* Badge "NOSSO COMPROMISSO" — texto escuro sobre fundo claro */
.nc__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 6px;
  background: rgba(85, 85, 85, 0.10);
  backdrop-filter: blur(12.5px);
  -webkit-backdrop-filter: blur(12.5px);
}

.nc__badge-dot {
  display: block;
  width:  8.628px;
  height: 8.628px;
  background: var(--c-red);
  flex-shrink: 0;
}

.nc__badge-text {
  font-family: var(--f-mono);
  font-size: clamp(13px, 0.94vw, 18px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-dark);
  white-space: nowrap;
}


/* ── Texto reveal — base compartilhada ── */
.nc__reveal {
  font-family: var(--f-sans);
  font-weight: var(--fw-regular);
  text-align: center;
  margin: 0;
}

/* Bloco 1 — 88px (Figma w-1548 · tracking -4.4px · leading 1.15) */
.nc__reveal--lg {
  font-size: clamp(34px, 4.58vw, 88px);
  line-height: 1.15;
  letter-spacing: -0.05em;
  max-width: clamp(320px, 80.6vw, 1548px);
}

/* Bloco 2 — 56px (Figma w-922 · leading 1.3) */
.nc__reveal--md {
  font-size: clamp(26px, 2.92vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.05em;
  max-width: clamp(300px, 48vw, 922px);
}

/* Palavra individual — começa apagada, acende no scroll */
.nc__word {
  color: rgba(0, 0, 0, 0.15);
  transition: color 400ms ease;
}

.nc__word.is-on {
  color: var(--c-dark);
}

.nc__word--red.is-on {
  color: var(--c-red);
}


/* ─────────────────────────────────────────────────── */
/*  PARTE 2 — STAGE (carrossel em arco + convicção)    */
/* ─────────────────────────────────────────────────── */

.nc__stage {
  position: relative;
  /* GAP ACIMA: headline → topo do arco. Igual ao gap abaixo (.nc__outro)
     para simetria, como no Figma (carrossel centrado no vão entre textos). */
  margin-top: clamp(60px, 6.5vw, 124px);
}

/* ── Carrossel em arco (roda) ──
   As fotos vivem sobre um círculo gigante cujo centro fica muito
   abaixo da área visível. Só o topo do círculo (a "calota") aparece.
   GSAP gira o .nc__wheel no scroll → o arco roda em loop infinito.

   Variáveis controlam a geometria (herdadas por .nc__wheel/.nc__photo):
   --nc-radius  raio do círculo
   --nc-top     distância do topo do arco até o topo do container
   --nc-size    lado da foto quadrada                              */
.nc__carousel {
  /* Full-bleed: ocupa 100vw mesmo dentro do padding lateral da seção,
     para o arco ir de borda a borda da viewport sem corte lateral.
     SEM overflow:hidden — nada é cortado; o fade por opacidade (JS)
     apaga as fotos fora do arco visível. */
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Empurra o carrossel para baixo, centralizando-o no vão entre os textos */
  margin-top: clamp(60px, 7vw, 140px);
  position: relative;
  z-index: 1;
  /* Altura = base visível do arco (≈ card + raio·(1−cos36°)) → o texto que
     segue no fluxo começa logo abaixo do arco com gap simétrico ao de cima. */
  height: clamp(280px, 22.8vw, 438px);

  /* Card menor que o Figma (258px) para abrir o gap entre as fotos,
     mantendo o vão generoso do anel original (~160px entre cards). */
  --nc-size:   clamp(136px, 10.94vw, 210px);
  /* Ápice da foto alinhado ao topo do container (não invade o texto acima). */
  --nc-top:    calc(var(--nc-size) / 2);
  /* Raio: anel largo; a foto de ~54° toca a borda da viewport e some no fade. */
  --nc-radius: clamp(680px, 62vw, 1190px);
}

/* Roda: ponto 0×0 no centro do círculo (abaixo da viewport).
   GSAP aplica rotation aqui → todas as fotos giram em torno deste ponto. */
.nc__wheel {
  position: absolute;
  left: 50%;
  top: calc(var(--nc-top) + var(--nc-radius));
  width: 0;
  height: 0;
  transform-origin: center center;
  will-change: transform;
}

/* Cada foto: caixa centrada no ponto da roda (margens negativas),
   depois empurrada para o raio e girada tangente ao arco (--angle).
   Ordem do transform: translateY aplica primeiro (sobe R), rotate
   gira em torno do centro do círculo → posição + inclinação tangente. */
.nc__photo {
  position: absolute;
  left: 0;
  top: 0;
  /* Container quadrado fixo — proporção da foto preservada via cover */
  width:  var(--nc-size);
  height: var(--nc-size);
  margin-left: calc(var(--nc-size) / -2);
  margin-top:  calc(var(--nc-size) / -2);
  object-fit: cover;
  object-position: center;
  display: block;
  max-width: none;
  /* Sem sombra alguma. */
  box-shadow: none;
  filter: none;
  /* scale (--scale, def. 1) dá a perspectiva: 1 no topo, menor nas laterais.
     opacity é definida pelo JS por ângulo → fade só nas extremidades. */
  transform: rotate(var(--angle, 0deg))
             translateY(calc(-1 * var(--nc-radius)))
             scale(var(--scale, 1));
  transform-origin: center center;
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}


/* ── Convicção: texto reveal + CTA, sobreposto ao arco ── */
.nc__outro {
  position: relative;
  /* z-index ACIMA dos cards do carrossel (z:1) → texto nunca é coberto. */
  z-index: 5;
  /* Bloco de texto + botão mais próximo do carrossel */
  margin-top: clamp(28px, 3.2vw, 62px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 4.17vw, 80px);
}


/* ── Botão "Entre em contato conosco" (Figma 47:2018) ──
   Pílula vermelha · texto branco · quadrado escuro c/ seta      */
.nc__contact {
  display: inline-flex;
  align-items: center;
  gap: clamp(20px, 1.875vw, 36px);
  padding: 10px 10px 10px clamp(24px, 1.875vw, 36px);
  border-radius: 12px;
  background: var(--c-red);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}

.nc__contact:hover {
  background: #c42a2d;
  transform: translateY(-2px);
}

.nc__contact-text {
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.146vw, 22px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.05em;
  color: var(--c-light);
  white-space: nowrap;
}

/* Quadrado escuro com a seta vermelha centralizada */
.nc__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  clamp(48px, 3.33vw, 64px);
  height: clamp(48px, 3.33vw, 64px);
  border-radius: 8px;
  background: var(--c-dark);
  flex-shrink: 0;
}

.nc__contact-icon img {
  width:  clamp(18px, 1.25vw, 24px);
  height: auto;
  display: block;
  transition: transform var(--dur-base) var(--ease);
}

.nc__contact:hover .nc__contact-icon img {
  transform: translate(3px, -3px);
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Arco menor com gap generoso; ápice no topo (--nc-top herda size/2) */
  .nc__carousel {
    height: clamp(220px, 34vw, 300px);
    --nc-radius: clamp(420px, 70vw, 620px);
    --nc-size:   clamp(96px, 20vw, 140px);
  }

  /* Gaps simétricos acima e abaixo do carrossel */
  .nc__stage  { margin-top: clamp(40px, 8vw, 72px); }
  .nc__outro  { margin-top: clamp(40px, 8vw, 72px); }
}