/* ════════════════════════════════════════════════════════════
   NEXT CELL — Design System
   Compartilhado pelas 5 Landing Pages
   ════════════════════════════════════════════════════════════ */

/* ─── Importar fontes ─── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

/* ─── Variáveis globais ─── */
:root {
  /* Paleta principal */
  --nc-primary:   #2F4A6D;
  --nc-dark:      #0F1B2D;
  --nc-light:     #F4F6F9;
  --nc-white:     #FFFFFF;
  --nc-cta:       #22C55E;
  --nc-cta-dark:  #16A34A;

  /* Acento padrão (LP Principal) */
  --nc-accent:    #2F4A6D;

  /* Tipografia */
  --nc-font:      'Inter', system-ui, -apple-system, sans-serif;
  --nc-fs-xs:     0.75rem;   /* 12px */
  --nc-fs-sm:     0.875rem;  /* 14px */
  --nc-fs-base:   1rem;      /* 16px */
  --nc-fs-lg:     1.125rem;  /* 18px */
  --nc-fs-xl:     1.25rem;   /* 20px */
  --nc-fs-2xl:    1.5rem;    /* 24px */
  --nc-fs-3xl:    2rem;      /* 32px */
  --nc-fs-4xl:    2.5rem;    /* 40px */

  /* Espaçamento */
  --nc-gap-xs:    0.5rem;
  --nc-gap-sm:    1rem;
  --nc-gap-md:    1.5rem;
  --nc-gap-lg:    2.5rem;
  --nc-gap-xl:    4rem;

  /* Bordas */
  --nc-radius-sm: 8px;
  --nc-radius-md: 16px;
  --nc-radius-lg: 24px;
  --nc-radius-full: 9999px;

  /* Sombras */
  --nc-shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --nc-shadow-md: 0 4px 24px rgba(0,0,0,.12);
  --nc-shadow-lg: 0 8px 40px rgba(0,0,0,.18);

  /* Transições */
  --nc-ease:      cubic-bezier(.4,0,.2,1);
  --nc-duration:  220ms;

  /* Largura máxima do container */
  --nc-max-w:     1200px;
}

/* ─── Acentos por LP ─── */
.lp-iphone      { --nc-accent: #6B7280; }
.lp-xiaomi      { --nc-accent: #FF6900; }
.lp-realme      { --nc-accent: #FFC915; }
.lp-assistencia { --nc-accent: #3B82F6; }

/* ─── Reset moderno ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--nc-font);
  font-size: var(--nc-fs-base);
  line-height: 1.6;
  color: var(--nc-dark);
  background: var(--nc-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Padding inferior para a barra mobile */
body.is-landing {
  padding-bottom: 72px;
}

@media (min-width: 768px) {
  body.is-landing {
    padding-bottom: 0;
  }
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─── Utilitários ─── */
.nc-container {
  width: 100%;
  max-width: var(--nc-max-w);
  margin-inline: auto;
  padding-inline: var(--nc-gap-sm);
}

@media (min-width: 768px) {
  .nc-container { padding-inline: var(--nc-gap-lg); }
}

.nc-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Animação de entrada no scroll ─── */
.nc-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms var(--nc-ease), transform 500ms var(--nc-ease);
}
.nc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Tipografia ─── */
.nc-section__title {
  font-size: var(--nc-fs-3xl);
  font-weight: 800;
  line-height: 1.15;
  color: var(--nc-dark);
}

.nc-section__sub {
  font-size: var(--nc-fs-lg);
  color: #4B5563;
  margin-top: var(--nc-gap-xs);
}

@media (min-width: 768px) {
  .nc-section__title { font-size: var(--nc-fs-4xl); }
}

/* ─── Botões ─── */
.nc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nc-gap-xs);
  padding: .75rem 1.5rem;
  border-radius: var(--nc-radius-full);
  font-weight: 600;
  font-size: var(--nc-fs-base);
  line-height: 1;
  transition: background var(--nc-duration) var(--nc-ease),
              transform var(--nc-duration) var(--nc-ease),
              box-shadow var(--nc-duration) var(--nc-ease);
  min-height: 48px;
  min-width: 48px;
  white-space: nowrap;
}

.nc-btn:focus-visible {
  outline: 3px solid var(--nc-cta);
  outline-offset: 3px;
}

/* Botão CTA principal (verde) */
.nc-btn--primary {
  background: var(--nc-cta);
  color: var(--nc-dark);
}
.nc-btn--primary:hover {
  background: var(--nc-cta-dark);
  color: var(--nc-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(34,197,94,.35);
}

/* Botão WhatsApp */
.nc-btn--wa {
  background: #25D366;
  color: var(--nc-white);
}
.nc-btn--wa:hover {
  background: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,.35);
}

/* Botão outline */
.nc-btn--outline {
  background: transparent;
  color: var(--nc-primary);
  border: 2px solid var(--nc-primary);
}
.nc-btn--outline:hover {
  background: var(--nc-primary);
  color: var(--nc-white);
  transform: translateY(-2px);
}

/* Botão outline claro (sobre fundo escuro) */
.nc-btn--outline-light {
  background: transparent;
  color: var(--nc-white);
  border: 2px solid rgba(255,255,255,.6);
}
.nc-btn--outline-light:hover {
  background: rgba(255,255,255,.15);
  border-color: var(--nc-white);
}

/* ─── Selos de confiança ─── */
.nc-selos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nc-gap-xs);
  margin-top: var(--nc-gap-md);
}

.nc-selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--nc-radius-full);
  padding: .35rem .85rem;
  font-size: var(--nc-fs-sm);
  font-weight: 600;
  color: var(--nc-white);
  backdrop-filter: blur(4px);
}

.nc-selo svg {
  flex-shrink: 0;
  color: var(--nc-cta);
}

/* ─── Seções ─── */
.nc-section {
  padding-block: var(--nc-gap-xl);
}

.nc-section--dark {
  background: var(--nc-dark);
  color: var(--nc-light);
}

.nc-section--dark .nc-section__title { color: var(--nc-white); }
.nc-section--dark .nc-section__sub   { color: rgba(255,255,255,.7); }

.nc-section--light {
  background: var(--nc-light);
}

.nc-section--accent {
  background: var(--nc-accent);
  color: var(--nc-white);
}

/* ─── Cards ─── */
.nc-card {
  background: var(--nc-white);
  border-radius: var(--nc-radius-md);
  box-shadow: var(--nc-shadow-sm);
  overflow: hidden;
  transition: transform var(--nc-duration) var(--nc-ease),
              box-shadow var(--nc-duration) var(--nc-ease);
}

.nc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--nc-shadow-md);
}

.nc-card__body {
  padding: var(--nc-gap-md);
}

.nc-card__title {
  font-size: var(--nc-fs-xl);
  font-weight: 700;
  color: var(--nc-dark);
}

.nc-card__text {
  font-size: var(--nc-fs-base);
  color: #6B7280;
  margin-top: var(--nc-gap-xs);
}

/* ─── Grid utilitário ─── */
.nc-grid-2 {
  display: grid;
  gap: var(--nc-gap-md);
  grid-template-columns: 1fr;
}

.nc-grid-3 {
  display: grid;
  gap: var(--nc-gap-md);
  grid-template-columns: 1fr;
}

.nc-grid-4 {
  display: grid;
  gap: var(--nc-gap-md);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .nc-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .nc-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .nc-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── FAQ acordeão ─── */
.nc-faq__item {
  border-bottom: 1px solid #E5E7EB;
}

.nc-faq__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--nc-gap-sm) 0;
  font-size: var(--nc-fs-lg);
  font-weight: 600;
  text-align: left;
  color: var(--nc-dark);
  gap: var(--nc-gap-sm);
  min-height: 48px;
}

.nc-faq__btn svg {
  flex-shrink: 0;
  transition: transform var(--nc-duration) var(--nc-ease);
}

.nc-faq__btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nc-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 400ms var(--nc-ease);
}

.nc-faq__answer-inner {
  padding-bottom: var(--nc-gap-sm);
  color: #4B5563;
  line-height: 1.7;
}

/* ─── Checklist visual ─── */
.nc-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--nc-gap-sm);
}

.nc-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.nc-checklist__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--nc-cta);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.nc-checklist__icon svg {
  color: var(--nc-white);
}

/* ─── 3 Passos ─── */
.nc-passos {
  display: grid;
  gap: var(--nc-gap-lg);
  grid-template-columns: 1fr;
  counter-reset: passo;
}

@media (min-width: 768px) {
  .nc-passos { grid-template-columns: repeat(3, 1fr); }
}

.nc-passo {
  text-align: center;
  counter-increment: passo;
}

.nc-passo__num {
  width: 56px; height: 56px;
  background: var(--nc-accent);
  color: var(--nc-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nc-fs-2xl);
  font-weight: 800;
  margin-inline: auto;
  margin-bottom: var(--nc-gap-sm);
}

.nc-passo__num::before {
  content: counter(passo);
}

.nc-passo__title {
  font-size: var(--nc-fs-lg);
  font-weight: 700;
  margin-bottom: .5rem;
}

/* ─── Placeholder (itens pendentes) ─── */
.nc-placeholder {
  background: #FEF3C7;
  color: #92400E;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--nc-fs-sm);
  font-style: italic;
}