/* ============================================================
   EXTENSAO AUROQ — os 19 componentes do sistema em CSS puro.
   O bundle original entrega os componentes so em React (.jsx).
   Site, landing page, post e carrossel neste repositorio sao
   HTML estatico, entao aqui esta o espelho fiel em classes.

   Fonte da verdade dos valores: os arquivos .jsx em components/
   Se um .jsx mudar, este arquivo muda junto. Nao divergir.

   Uso:
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="tokens/social.css">   (so em arte social)
     <link rel="stylesheet" href="nf-components.css">
   ============================================================ */

/* ---------- CORE ---------- */

/* Button — o unico formato de botao da marca: pilula cheia. */
.nf-btn{
  font-family:var(--font-sans);
  font-weight:var(--w-semibold);
  letter-spacing:.01em;
  line-height:1;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  transition:var(--transition-ui);
  font-size:17px;
  padding:14px 28px;
}
.nf-btn--sm{font-size:15px;padding:10px 20px}
.nf-btn--lg{font-size:19px;padding:18px 38px}
.nf-btn--block{width:100%}
.nf-btn:active{transform:scale(.985)}
.nf-btn[disabled],.nf-btn--disabled{opacity:.4;pointer-events:none}

.nf-btn--primary{background:var(--rust-700);color:var(--paper-0)}
.nf-btn--primary:hover{background:var(--rust-800);color:var(--paper-0)}
.nf-btn--olive{background:var(--olive-600);color:var(--paper-0)}
.nf-btn--olive:hover{background:var(--olive-700);color:var(--paper-0)}
.nf-btn--secondary{background:transparent;color:var(--ink-800);border-color:var(--ink-800)}
.nf-btn--secondary:hover{color:var(--rust-700);border-color:var(--rust-700)}
.nf-btn--inverse{background:var(--paper-0);color:var(--olive-900)}
.nf-btn--inverse:hover{background:var(--sand-200);color:var(--olive-900)}
.nf-btn--ghost{
  background:transparent;color:var(--rust-700);padding:8px 0;border-radius:0;
  text-decoration:underline;text-underline-offset:5px;
}
.nf-btn--ghost:hover{color:var(--rust-800)}

/* Eyebrow — .nf-eyebrow ja existe em tokens/base.css. Aqui so os tons. */
.nf-eyebrow--rust{color:var(--rust-700)}
.nf-eyebrow--ink{color:var(--ink-400)}
.nf-eyebrow--on-dark{color:var(--sand-400)}
.nf-eyebrow--center{text-align:center}

/* Pill — capsula de reforco ou metadado. Nunca acao. */
.nf-pill{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:var(--fs-body-sm);
  padding:10px 20px;
  border-radius:var(--r-pill);
  background:transparent;color:var(--ink-600);
  border:1px solid var(--border-strong);
}
.nf-pill--sand{background:var(--sand-300);color:var(--ink-900);border-color:transparent}
.nf-pill--rust{background:var(--rust-100);color:var(--rust-800);border-color:transparent}
.nf-pill--on-dark{background:transparent;color:var(--paper-0);border-color:var(--border-on-dark)}

/* DottedDivider — o unico divisor da marca. */
.nf-dotted{width:100%;height:0;border-top:1px dotted var(--paper-3)}
.nf-dotted--on-dark{border-top-color:var(--border-on-dark)}
.nf-dotted--v{width:0;height:100%;border-top:0;border-left:1px dotted var(--paper-3)}

/* ---------- BRAND ---------- */

/* Wordmark — substitui o logo. "Nanny" bold oliva + "Faggiano" light. */
.nf-wordmark{
  font-family:var(--font-sans);
  font-size:34px;line-height:1.05;
  letter-spacing:var(--ls-display);
  color:var(--ink-900);
}
.nf-wordmark b{font-weight:var(--w-bold);color:var(--olive-700)}
.nf-wordmark span{font-weight:var(--w-light)}
.nf-wordmark--on-dark{color:var(--paper-0)}
.nf-wordmark--on-dark b{color:var(--cream-300)}

/* Signature — carimbo humano, sempre pequeno e no canto. */
.nf-signature{
  font-family:var(--font-script);
  font-size:24px;line-height:1;
  color:var(--ink-800);
}
.nf-signature--on-dark{color:var(--paper-0)}

/* BlobPortrait — toda foto da Nanny passa por aqui. */
.nf-blob{border-radius:var(--r-blob);overflow:hidden;display:block}
.nf-blob--rounded{border-radius:var(--r-lg)}
.nf-blob--circle{border-radius:var(--r-pill)}
.nf-blob img{width:100%;height:100%;object-fit:cover;display:block}

/* HandAccent — o circulo/sublinhado a mao. Uma vez por tela. */
.nf-accent{position:relative;display:inline-block}
.nf-accent svg{position:absolute;pointer-events:none}
.nf-accent--circle svg{inset:-16% -10%;width:120%;height:132%}
.nf-accent--underline svg{left:0;right:0;bottom:-12px;width:100%;height:12px}
.nf-accent--strike{
  text-decoration:line-through;
  text-decoration-color:var(--ink-900);
  text-decoration-thickness:4px;
}

/* ---------- CARDS ---------- */

/* HighlightCard — cartao de conteudo geral. */
.nf-card{
  border-radius:var(--r-lg);
  padding:26px 28px;
  font-family:var(--font-sans);
  font-size:var(--fs-body-sm);
  line-height:var(--lh-normal);
  box-shadow:var(--shadow-card);
  background:var(--sand-300);color:var(--ink-900);
  border:1px solid transparent;
}
.nf-card--paper{background:var(--paper-0);color:var(--ink-800);border-color:var(--border-hairline)}
.nf-card--outline{background:transparent;color:var(--ink-800);border-color:var(--border-hairline)}
.nf-card--dark{background:var(--olive-800);color:var(--paper-0);border-color:transparent}
.nf-card__eyebrow{
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--olive-500);margin-bottom:14px;
}
.nf-card--dark .nf-card__eyebrow{color:var(--sand-400)}
.nf-card__title{
  font-size:var(--fs-title);font-weight:var(--w-bold);
  letter-spacing:var(--ls-display);margin-bottom:12px;
}

/* PhaseCard — grade de fases. Ordem de tom fixa: rust, blue, olive, dark. */
.nf-phase{
  background:var(--rust-700);
  border-radius:var(--r-lg);
  padding:22px 26px;
  display:flex;align-items:center;gap:22px;
  color:var(--paper-0);
  font-family:var(--font-sans);
}
.nf-phase--blue{background:var(--blue-700)}
.nf-phase--olive{background:var(--olive-500)}
.nf-phase--dark{background:var(--olive-800)}
.nf-phase__icon{flex:0 0 auto;width:64px;height:64px;display:grid;place-items:center;opacity:.95}
.nf-phase__rule{width:1px;align-self:stretch;background:rgba(244,243,239,.45)}
.nf-phase__body{min-width:0}
.nf-phase__label{font-size:var(--fs-body-sm);font-weight:var(--w-regular);opacity:.9;margin-bottom:2px}
.nf-phase__title{
  font-size:var(--fs-body-sm);font-weight:var(--w-bold);
  text-transform:uppercase;letter-spacing:.02em;margin-bottom:8px;
}
.nf-phase__text{font-size:var(--fs-body-sm);line-height:var(--lh-normal);opacity:.92}

/* QuoteCard — fala da Nanny ou depoimento. Aspas bold, autoria nunca. */
.nf-quote{
  background:var(--paper-0);color:var(--ink-900);
  border-radius:var(--r-lg);padding:32px 34px;
  font-family:var(--font-sans);
}
.nf-quote--dark{background:var(--olive-800);color:var(--paper-0)}
.nf-quote__mark{
  font-size:46px;line-height:.7;font-weight:var(--w-black);
  color:var(--ink-900);margin-bottom:22px;
}
.nf-quote--dark .nf-quote__mark{color:var(--sand-400)}
.nf-quote__text{
  font-size:var(--fs-subtitle);font-weight:var(--w-bold);
  line-height:var(--lh-snug);letter-spacing:var(--ls-display);
}
.nf-quote__rule{width:38px;height:3px;background:var(--ink-900);margin:26px 0 14px}
.nf-quote--dark .nf-quote__rule{background:var(--sand-400)}
.nf-quote__author{font-size:var(--fs-body-sm);color:var(--ink-600)}
.nf-quote--dark .nf-quote__author{color:var(--text-on-dark-muted)}

/* ContrastPair — a meta paralisante (riscada) x o micro passo (sand). */
.nf-contrast{display:flex;align-items:stretch;gap:var(--slide-gap)}
.nf-contrast__side{
  flex:1;
  background:var(--paper-0);
  border:1px solid var(--border-hairline);
  border-radius:var(--r-lg);
  padding:28px 30px;
  font-family:var(--font-sans);
}
.nf-contrast__side--emphasis{background:var(--sand-300);border-color:transparent}
.nf-contrast__head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.nf-contrast__icon{display:grid;place-items:center;width:28px;height:28px;color:var(--blue-300)}
.nf-contrast__side--emphasis .nf-contrast__icon{color:var(--gold-500)}
.nf-contrast__title{
  font-size:var(--fs-title);font-weight:var(--w-black);
  text-transform:uppercase;line-height:var(--lh-snug);
  color:var(--ink-900);margin-bottom:14px;
}
.nf-contrast__title--strike{text-decoration:line-through;text-decoration-thickness:3px}
.nf-contrast__text{font-size:var(--fs-body-sm);color:var(--ink-600)}

/* ---------- LISTS ---------- */

/* SparkleList — presentes, entregaveis, credenciais. */
.nf-list-sparkle{
  list-style:none;margin:0;padding:0;
  display:grid;gap:18px;
  font-family:var(--font-sans);font-size:var(--fs-body-sm);
  color:var(--ink-800);
  --bullet:var(--rust-700);
}
.nf-list-sparkle--olive{--bullet:var(--olive-500)}
.nf-list-sparkle--on-dark{--bullet:var(--sand-400);color:var(--paper-0)}
.nf-list-sparkle--lg{font-size:var(--fs-body)}
.nf-list-sparkle li{
  display:flex;gap:16px;align-items:flex-start;
  line-height:var(--lh-normal);
}
.nf-list-sparkle li::before{
  content:"";flex:0 0 auto;width:18px;height:18px;margin-top:4px;
  background-color:var(--bullet);
  -webkit-mask:var(--nf-sparkle) center/contain no-repeat;
          mask:var(--nf-sparkle) center/contain no-repeat;
}
:root{
  --nf-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 3c.5 4.3 1.4 5.2 5.7 5.7-4.3.5-5.2 1.4-5.7 5.7-.5-4.3-1.4-5.2-5.7-5.7C7.6 8.2 8.5 7.3 9 3z' fill='%23000'/%3E%3Cpath d='M9 2.5v13M2.5 9h13' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* ChevronList — sintomas, sensacoes, mecanica. */
.nf-list-chevron{
  list-style:none;margin:0;padding:0;
  display:grid;gap:16px;
  font-family:var(--font-sans);font-size:var(--fs-body-sm);
  color:var(--ink-800);
  --bullet:var(--gold-500);
}
.nf-list-chevron--olive{--bullet:var(--olive-500)}
.nf-list-chevron--rust{--bullet:var(--rust-700)}
.nf-list-chevron li{display:flex;gap:14px;align-items:baseline;line-height:var(--lh-normal)}
.nf-list-chevron li::before{
  content:"\00BB";color:var(--bullet);
  font-weight:var(--w-bold);font-size:18px;
}

/* NumberedSteps — cadeias causais. Nunca ofertas. */
.nf-steps{list-style:none;margin:0;padding:0;font-family:var(--font-sans)}
.nf-steps li{
  display:grid;grid-template-columns:44px 1fr;column-gap:18px;
  padding-bottom:26px;position:relative;
}
.nf-steps li:last-child{padding-bottom:0}
.nf-steps__n{
  position:relative;
}
.nf-steps__n>span{
  width:38px;height:38px;border-radius:var(--r-pill);
  background:var(--olive-500);color:var(--paper-0);
  display:grid;place-items:center;
  font-weight:var(--w-bold);font-size:var(--fs-body-sm);
}
.nf-steps li:not(:last-child) .nf-steps__n::after{
  content:"";position:absolute;left:18px;top:44px;bottom:-38px;
  width:1px;background:var(--olive-300);
}
.nf-steps__title{
  font-size:var(--fs-body);font-weight:var(--w-bold);
  color:var(--ink-900);margin-bottom:6px;
}
.nf-steps__text{
  font-size:var(--fs-body-sm);font-style:italic;
  color:var(--ink-600);line-height:var(--lh-normal);
}

/* ---------- PALCO (deck e social) ---------- */

/* SlideFrame — todo slide, post ou quadro de carrossel mora aqui dentro. */
.nf-slide{
  position:relative;
  width:var(--slide-w);height:var(--slide-h);
  background:var(--paper-1);
  background-image:var(--grain);
  color:var(--ink-800);
  font-family:var(--font-sans);
  overflow:hidden;
  padding:var(--slide-pad-y) var(--slide-pad-x);
  box-sizing:border-box;
}
.nf-slide--dark{background-color:var(--olive-900);color:var(--paper-0)}
.nf-slide--olive{background-color:var(--olive-600);color:var(--paper-0)}
.nf-slide--rust{background-color:var(--rust-500);color:var(--paper-0)}
.nf-slide--flush{padding:0}
.nf-slide--nograin{background-image:none}

/* SlideHeader — a linha de rodape superior de todo slide de conteudo. */
.nf-slide-header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  font-family:var(--font-sans);font-size:var(--fs-meta);
  color:var(--ink-800);
}
.nf-slide--dark .nf-slide-header,
.nf-slide--olive .nf-slide-header,
.nf-slide--rust .nf-slide-header{color:var(--paper-0)}
.nf-slide-header__left{text-transform:uppercase;letter-spacing:.03em}
.nf-slide-header__right{
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--olive-500);text-align:right;
}
.nf-slide--dark .nf-slide-header__right,
.nf-slide--olive .nf-slide-header__right,
.nf-slide--rust .nf-slide-header__right{color:var(--sand-400)}

/* ---------- FORMS ---------- */

.nf-field{display:grid;gap:8px;font-family:var(--font-sans)}
.nf-field__label{font-size:var(--fs-web-small);color:var(--ink-600)}
.nf-field__hint{font-size:var(--fs-web-small);color:var(--ink-400)}
.nf-input{
  font:inherit;font-size:var(--fs-web-body);
  padding:14px 18px;border-radius:var(--r-md);
  background:var(--paper-0);color:var(--ink-900);
  border:1px solid var(--border-hairline);
  outline:none;transition:var(--transition-ui);
}
.nf-input:focus{border-color:var(--rust-700)}
.nf-field--on-dark .nf-field__label,
.nf-field--on-dark .nf-field__hint{color:var(--text-on-dark-muted)}
.nf-field--on-dark .nf-input{
  background:rgba(244,243,239,.08);color:var(--paper-0);
  border-color:var(--border-on-dark);
}

.nf-check{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-family:var(--font-sans);font-size:var(--fs-web-small);
  color:var(--ink-600);
}
.nf-check input{position:absolute;opacity:0;width:0;height:0}
.nf-check__box{
  flex:0 0 auto;width:20px;height:20px;border-radius:var(--r-xs);
  border:1px solid var(--border-strong);background:transparent;
  display:grid;place-items:center;transition:var(--transition-ui);
}
.nf-check__box svg{opacity:0}
.nf-check input:checked+.nf-check__box{background:var(--rust-700);border-color:var(--rust-700)}
.nf-check input:checked+.nf-check__box svg{opacity:1}
.nf-check input:focus-visible+.nf-check__box{outline:2px solid var(--focus-ring);outline-offset:2px}
.nf-check--on-dark{color:var(--text-on-dark-muted)}
.nf-check--on-dark .nf-check__box{border-color:var(--border-on-dark)}

/* ---------- LAYOUT WEB ---------- */

.nf-wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-6)}
.nf-section{padding:var(--sp-24) 0}
.nf-section--tight{padding:var(--sp-16) 0}
.nf-section--inverse{background:var(--surface-inverse);color:var(--text-on-dark);background-image:var(--grain)}
.nf-section--raised{background:var(--surface-raised)}
.nf-hero-title{font-size:var(--fs-web-hero);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
.nf-h1{font-size:var(--fs-web-h1)}
.nf-h2{font-size:var(--fs-web-h2)}
.nf-h3{font-size:var(--fs-web-h3)}
.nf-lead{font-size:var(--fs-web-body);line-height:var(--lh-loose);color:var(--ink-600);max-width:62ch}
/* Duas colunas assimetricas (texto + foto). Colapsa sozinho no mobile —
   por isso nunca escreva grid-template-columns inline numa peca web. */
.nf-split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-16);align-items:center}
.nf-split--even{grid-template-columns:1fr 1fr;align-items:start}
.nf-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--slide-gap)}
.nf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--slide-gap)}
.nf-grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--slide-gap)}

@media (max-width:820px){
  .nf-grid-2,.nf-grid-3,.nf-grid-4,.nf-split,.nf-split--even{grid-template-columns:1fr}
  .nf-contrast{flex-direction:column}
  .nf-hero-title{font-size:40px}
  .nf-h1{font-size:32px}
  .nf-h2{font-size:26px}
  .nf-section{padding:var(--sp-16) 0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}