@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');

:root {
  --ameixa: #150e20;
  --offwhite: #f5f1f6;
  --lilas-claro: #e8ddf3;
  --lilas: #cba9f3;
  --vinho: #7a3fa8;
  --violeta: #4a2a73;
  --texto-claro: #f5f1f6;
  --texto-escuro: #150e20;
  --muted-dark: rgba(245,241,246,.64);
  --muted-light: rgba(21,14,32,.62);
  --line-dark: rgba(203,169,243,.24);
  --line-light: rgba(74,42,115,.16);

  /* Camada semântica. O lilás continua sendo a marca; estas cores são pontuação, e
   * valem uma por tela. Regra: vermelho é o que o padrão cobra, âmbar é o relógio,
   * verde é a saída. Se duas competirem na mesma tela, a tela perde as duas. */
  --perda: #ff7183;          /* sobre fundo escuro */
  --perda-forte: #c31f38;    /* sobre fundo claro */
  --perda-fundo: rgba(255,113,131,.09);
  --alerta: #f3b13c;
  --alerta-fundo: rgba(243,177,60,.09);
  --ouro: #f3ce72;
  --ganho: #3ed27f;          /* sobre fundo escuro */
  --ganho-forte: #0a6135;    /* sobre fundo claro; 6.4:1 no fundo do selo e da garantia */
  --ganho-fundo: rgba(62,210,127,.1);
  --display: "Playfair Display", Georgia, serif;
  --support: "Jost", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--texto-claro); background: var(--ameixa); font-family: var(--support); font-weight: 300; line-height: 1.52; overflow-x: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--lilas); }

/* Fundo sólido, grão e um único brilho. Sem céu, mandala ou geometria esotérica. */
.nu-cosmos { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--ameixa); }
.nu-cosmos::before { content: ""; position: absolute; width: 760px; height: 760px; top: -430px; right: -330px; border-radius: 50%; background: radial-gradient(circle, rgba(203,169,243,.2), transparent 64%); }
.nu-cosmos::after { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.nu-stars, .nu-aurora { display: none; }

.nu-header { width: min(100% - 36px, 720px); margin: 0 auto; padding: calc(25px + env(safe-area-inset-top)) 0 15px; }
.nu-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--offwhite); text-decoration: none; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.nu-brand-mark { width: 26px; color: var(--lilas); font-family: var(--display); font-size: 24px; line-height: 1; }

.nu-app { width: min(100%, 720px); min-height: 72vh; margin: 0 auto; padding: 10px 16px 64px; }
.nu-progress-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 1px; }
.nu-progress-copy, .nu-step { color: rgba(245,241,246,.48); font-size: 9px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }
/* A barra carrega o arco. --acento é redefinido por fase logo abaixo, e tudo que é
 * pontuação de tela lê deste token em vez de escolher cor sozinho. */
.nu-progress-number { color: var(--acento); font-family: var(--display); font-size: 14px; font-variant-numeric: lining-nums tabular-nums; transition: color .45s ease; }
.nu-progress { height: 2px; overflow: hidden; background: rgba(245,241,246,.1); }
.nu-progress-fill { height: 100%; background: var(--acento); transition: width .5s ease, background-color .45s ease; }

.nu-app { --acento: var(--lilas); }
.nu-app[data-fase="peso"] { --acento: var(--perda); }
.nu-app[data-fase="relogio"] { --acento: var(--alerta); }
.nu-app[data-fase="saida"] { --acento: var(--ganho); }
@media (prefers-reduced-motion: reduce) {
  .nu-progress-fill, .nu-progress-number { transition: none; }
}
.nu-navrow { min-height: 32px; display: flex; align-items: center; justify-content: space-between; margin: 10px 1px 7px; }
.nu-back { padding: 5px 0; border: 0; color: rgba(245,241,246,.48); background: transparent; cursor: pointer; font-size: 11px; }
.nu-back:hover { color: var(--offwhite); }

.nu-card { position: relative; overflow: hidden; padding: 34px 23px 37px; border: 1px solid rgba(203,169,243,.2); border-radius: 30px; color: var(--texto-claro); background: var(--ameixa); box-shadow: 0 30px 62px rgba(0,0,0,.42); }
.nu-card > * { position: relative; z-index: 1; }
.nu-card h1, .nu-card h2 { color: var(--offwhite); font-family: var(--display); font-weight: 500; letter-spacing: -.035em; }
.nu-card h1 { margin: 0 0 17px; font-size: clamp(36px, 10vw, 55px); line-height: 1.04; }
.nu-card h1[tabindex="-1"]:focus { outline: none; }
.nu-card h2 { margin: 26px 0 11px; font-size: 27px; line-height: 1.12; }
.nu-card p { margin: 0 0 14px; color: var(--muted-dark); font-size: 15px; }
.nu-card strong, .nu-card b { color: var(--offwhite); font-weight: 500; }
.nu-eyebrow { margin: 0 0 15px !important; color: var(--lilas) !important; font-family: var(--display); font-size: 17px !important; font-style: italic; font-weight: 500; letter-spacing: 0; }
.nu-lead { color: var(--offwhite) !important; font-family: var(--display); font-size: 20px !important; line-height: 1.42; }
.nu-highlight { color: var(--lilas); font-style: italic; }
/* A linha de risco da terceira tela de bloqueio. É a soma dos três, e é perda. */
.nu-risk { padding: 12px 14px; border-left: 3px solid var(--perda); border-radius: 0 14px 14px 0; color: var(--offwhite) !important; background: var(--perda-fundo); }
.nu-risk b { color: var(--perda) !important; }

/* A saída. Toda tela de peso fecha numa, e a partir daqui ela fecha em verde. */
.nu-out.is-exit { border-color: var(--ganho); background: var(--ganho-fundo); }
.nu-out.is-exit b { color: var(--ganho) !important; }
.nu-out { padding: 15px 17px; border-left: 3px solid var(--lilas); border-radius: 0 18px 18px 0; color: var(--offwhite) !important; background: rgba(203,169,243,.08); font-size: 14px !important; }

/* Telas de acolhimento alternam para o fundo claro da identidade. */
.nu-app[data-tone="light"] .nu-card { border-color: var(--line-light); color: var(--texto-escuro); background: var(--offwhite); box-shadow: 0 30px 62px rgba(8,4,14,.34); }
.nu-app[data-tone="light"] .nu-card h1, .nu-app[data-tone="light"] .nu-card h2, .nu-app[data-tone="light"] .nu-card strong, .nu-app[data-tone="light"] .nu-card b { color: var(--ameixa); }
.nu-app[data-tone="light"] .nu-card p { color: var(--muted-light); }
.nu-app[data-tone="light"] .nu-lead { color: var(--ameixa) !important; }
.nu-app[data-tone="light"] .nu-eyebrow { color: var(--vinho) !important; }
.nu-app[data-tone="light"] .nu-out { border-color: var(--vinho); color: var(--ameixa) !important; background: var(--lilas-claro); }

.nu-stage { opacity: 0; transform: translateY(7px); transition: opacity .28s ease, transform .28s ease; }
.nu-stage.is-visible { opacity: 1; transform: none; }

.nu-opening-hero { position: relative; margin: 20px -8px 24px; overflow: hidden; border: 1px solid rgba(203,169,243,.32); border-radius: 22px; background: var(--lilas-claro); box-shadow: 0 18px 38px rgba(0,0,0,.28); }
.nu-opening-hero::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 38%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(21,14,32,.5)); }
.nu-opening-hero img { display: block; width: 100%; height: clamp(188px, 55vw, 300px); object-fit: cover; object-position: center; }
.nu-opening-hero figcaption { position: absolute; z-index: 2; right: 10px; bottom: 10px; left: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.nu-opening-hero figcaption span { padding: 6px 4px; border: 1px solid rgba(203,169,243,.35); border-radius: 999px; color: var(--offwhite); background: rgba(21,14,32,.8); backdrop-filter: blur(7px); text-align: center; font-size: 8px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.nu-proofline { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 21px; border-top: 1px solid var(--line-dark); }
.nu-proofline div { padding: 13px 4px 3px; text-align: left; }
.nu-proofline b { display: block; color: var(--lilas) !important; font-family: var(--display); font-size: 16px; }
.nu-proofline span { color: rgba(245,241,246,.42); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.nu-options { display: grid; gap: 9px; margin-top: 21px; }
.nu-option { display: grid; grid-template-columns: 41px 1fr 17px; align-items: center; gap: 12px; width: 100%; padding: 13px; border: 1px solid var(--line-dark); border-radius: 17px; color: var(--offwhite); background: rgba(245,241,246,.025); text-align: left; cursor: pointer; transition: .16s ease; }
.nu-option:hover, .nu-option:focus-visible { border-color: var(--lilas); background: rgba(203,169,243,.08); transform: translateY(-1px); outline: none; }
.nu-option-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--lilas); font-family: var(--display); font-size: 21px; }
.nu-option-icon svg { width: 24px; height: 24px; }
.nu-option strong { display: block; font-family: var(--display); font-size: 17px; font-weight: 500; }
.nu-option small { display: block; margin-top: 1px; color: rgba(245,241,246,.5); font-size: 11px; }
.nu-option-arrow { color: var(--lilas); }

.nu-field { margin-top: 18px; }
.nu-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: rgba(245,241,246,.64); font-size: 9px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.nu-label em { color: rgba(245,241,246,.42); font-style: normal; font-weight: 300; letter-spacing: 0; text-transform: none; }
.nu-input { width: 100%; min-height: 54px; padding: 14px 15px; border: 1px solid rgba(203,169,243,.28); border-radius: 14px; outline: none; color: var(--offwhite); background: rgba(245,241,246,.05); font-size: 16px; font-weight: 300; transition: .16s ease; }
.nu-input:focus { border-color: var(--lilas); box-shadow: 0 0 0 3px rgba(203,169,243,.09); }
.nu-input::placeholder { color: rgba(245,241,246,.3); }
.nu-error { min-height: 20px; margin: 8px 0 0 !important; color: var(--lilas) !important; font-size: 12px !important; }
.nu-checkbox { display: grid; grid-template-columns: 19px 1fr; gap: 10px; align-items: start; margin-top: 17px; color: var(--muted-dark); font-size: 11px; }
.nu-checkbox input { width: 17px; height: 17px; accent-color: var(--vinho); }

.nu-actions { margin-top: 15px; }
.nu-btn { width: 100%; min-height: 58px; padding: 15px 20px; border: 0; border-radius: 999px; color: var(--ameixa); background: linear-gradient(100deg, #a873df, #dec2fb); box-shadow: 0 15px 35px rgba(122,63,168,.3); font-family: var(--support); font-size: 13px; font-weight: 500; letter-spacing: .045em; text-transform: uppercase; cursor: pointer; transition: .16s ease; }
.nu-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(122,63,168,.4); }
.nu-btn:active { transform: translateY(0); }
.nu-btn:disabled { opacity: .5; cursor: progress; transform: none; }
.nu-link-btn { display: block; margin: 12px auto 0; padding: 8px; border: 0; color: rgba(245,241,246,.5); background: transparent; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 11px; }
.nu-micro { margin: 10px 0 0 !important; color: rgba(245,241,246,.42) !important; text-align: center; font-size: 10px !important; }

.nu-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 18px; }
.nu-chip { display: inline-block; padding: 6px 9px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--muted-dark); font-size: 10px; }
.nu-edit { padding: 5px; border: 0; color: var(--lilas); background: transparent; text-decoration: underline; cursor: pointer; font-size: 10px; }
.nu-scan { min-height: 250px; display: grid; align-content: center; padding: 17px 0; }
.nu-scan-line { position: relative; padding: 13px 8px 13px 31px; border-bottom: 1px solid var(--line-dark); color: var(--muted-dark); opacity: 0; transform: translateY(6px); animation: scanLine .3s ease forwards; }
.nu-scan-line::before { content: "•"; position: absolute; left: 5px; color: rgba(203,169,243,.62); }
/* Cada linha que fecha acende em ouro, e a última fecha em verde com o tique. É o único
 * momento do quiz em que a cor marca uma coisa acontecendo, e não uma coisa dita. */
.nu-scan-line { color: var(--muted-dark); }
.nu-scan-line:not(.ok)::before { color: var(--ouro); }
.nu-scan-line.ok { color: var(--offwhite); border-bottom-color: rgba(62,210,127,.4); }
.nu-scan-line.ok::before { content: "✓"; left: 4px; color: var(--ganho); font-size: 12px; }
@keyframes scanLine { to { opacity: 1; transform: none; } }

.nu-duo { display: grid; gap: 10px; margin: 21px 0; }
/* A tela da força vem antes da sombra, e por isso é a única em ouro. Ouro é valor, e
 * está na identidade da marca. O verde fica reservado pra saída, senão ele passa a
 * significar duas coisas e para de significar qualquer uma. */
.nu-number-card { position: relative; min-height: 125px; padding: 17px 14px 17px 77px; border-radius: 20px; border-left: 2px solid rgba(243,206,114,.5); background: linear-gradient(120deg, rgba(243,206,114,.11), rgba(203,169,243,.07)); }
.nu-number-card > b { position: absolute; left: 15px; top: 13px; color: var(--ouro) !important; font-family: var(--display); font-size: 51px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.nu-number-card span { display: block; color: var(--ouro); font-size: 8px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.nu-number-card p { margin: 6px 0 0; color: var(--offwhite); font-family: var(--display); font-size: 16px; }
.nu-presence-card { position: relative; min-height: 204px; margin: 21px 0; padding: 25px 20px 25px 107px; border-radius: 24px; color: var(--ameixa); background: var(--lilas-claro); overflow: hidden; }
.nu-presence-card::after { content: "✦"; position: absolute; right: -16px; bottom: -39px; color: rgba(74,42,115,.08); font-size: 130px; }
.nu-presence-card > span { display: block; color: var(--vinho); font-size: 8px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.nu-presence-card > b { position: absolute; left: 18px; top: 20px; color: var(--violeta) !important; font-family: var(--display); font-size: 72px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.nu-presence-card p { margin: 13px 0 0; color: var(--ameixa); font-family: var(--display); font-size: 18px; line-height: 1.42; }

.nu-verdict { display: grid; gap: 8px; margin: 20px 0; counter-reset: verdict; }
/* O veredito é onde a conversa vira. Os três itens já são os bloqueios, então entram
 * no vermelho e a numeração vira a contagem do que ela está carregando. */
.nu-verdict-item { position: relative; padding: 14px 13px 14px 48px; border: 1px solid rgba(255,113,131,.26); border-left: 3px solid var(--perda); border-radius: 4px 17px 17px 4px; background: var(--perda-fundo); }
.nu-verdict-item::before { counter-increment: verdict; content: "0" counter(verdict); position: absolute; left: 13px; top: 15px; color: var(--perda); font-family: var(--display); font-size: 17px; }
.nu-verdict-item b { display: block; font-family: var(--display); font-size: 15px; font-weight: 500; }
.nu-verdict-item span { color: rgba(245,241,246,.45); font-size: 11px; }
.nu-pattern-head { display: grid; grid-template-columns: 73px 1fr; align-items: center; gap: 14px; margin: 4px 0 18px; }
/* O número do bloqueio segue o acento da fase, que nas telas 7 a 9 é o vermelho. */
.nu-pattern-num { color: var(--acento); font-family: var(--display); font-size: 65px; font-weight: 600; line-height: 1; text-align: center; font-variant-numeric: lining-nums tabular-nums; }
.nu-pattern-head small { display: block; color: var(--acento); font-size: 8px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.nu-pattern-head b { display: block; margin-top: 3px; font-family: var(--display); font-size: 23px; font-weight: 500; line-height: 1.1; }
.nu-translation { margin: 0 0 17px; padding: 14px 15px; border-radius: 18px; color: var(--ameixa); background: var(--lilas-claro); }
.nu-translation span { color: var(--vinho); font-size: 8px; font-weight: 500; letter-spacing: .13em; }
.nu-translation p { margin: 5px 0 0; color: var(--ameixa); font-family: var(--display); font-size: 16px; line-height: 1.38; }
.nu-scenes { list-style: none; margin: 17px 0; padding: 0; }
.nu-scenes li { position: relative; padding: 11px 0 11px 25px; border-bottom: 1px solid var(--line-dark); color: var(--offwhite); font-size: 14px; }
/* As cenas são o que o bloqueio já cobrou. O "×" carrega isso no vermelho. */
.nu-scenes li::before { content: "×"; position: absolute; left: 1px; color: var(--perda); font-family: var(--display); font-size: 17px; }
.nu-question { padding-left: 14px; border-left: 2px solid var(--lilas); color: var(--offwhite) !important; font-family: var(--display); font-size: 19px !important; font-style: italic; }
.nu-sample { margin: 9px 0 0; padding: 11px 13px; border: 1px solid var(--line-dark); border-radius: 14px; color: var(--muted-dark); font-size: 12px; }

.nu-microsim { margin: 21px 0 18px; padding: 18px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.nu-microsim-question { color: var(--offwhite) !important; font-family: var(--display); font-size: 19px !important; font-style: italic; }
.nu-microsim-options { display: grid; gap: 7px; }
.nu-microsim-option { width: 100%; padding: 11px 12px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--muted-dark); background: transparent; text-align: left; cursor: pointer; transition: .14s ease; }
.nu-microsim-option::before { content: "○"; margin-right: 8px; color: var(--lilas); }
.nu-microsim-option:hover, .nu-microsim-option:focus-visible { border-color: var(--lilas); color: var(--offwhite); outline: none; }
/* A resposta dela acende no acento da fase. É o retorno visual de cada sim que ela dá. */
.nu-microsim-option.is-selected { border-color: var(--acento); color: var(--offwhite); background: color-mix(in srgb, var(--acento) 15%, transparent); box-shadow: inset 2px 0 0 var(--acento); }
.nu-microsim-option.is-selected::before { content: "●"; color: var(--acento); }
.nu-microsim-answer { min-height: 0; margin: 11px 0 0 !important; color: var(--acento) !important; font-family: var(--display); font-size: 14px !important; font-style: italic; }

.nu-letter-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 17px 0; }
.nu-letter { width: 31px; padding: 5px 0; border-bottom: 1px solid var(--lilas); text-align: center; }
.nu-letter span { display: block; font-size: 12px; font-weight: 500; }
.nu-letter b { display: block; color: var(--lilas) !important; font-size: 10px; }
.nu-triangle-wrap { overflow-x: auto; padding: 9px 0 5px; scrollbar-width: thin; }
.nu-triangle { min-width: max-content; }
.nu-tri-row { display: flex; justify-content: center; gap: 3px; margin-bottom: 3px; }
.nu-tri-cell { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 5px; color: var(--muted-dark); background: rgba(203,169,243,.08); font-size: 10px; }
/* As casas quentes são os blocos de repetição, que é o achado negativo do triângulo.
 * Vermelho aqui faz a prova apontar pro mesmo lugar que o texto já apontou. */
.nu-tri-cell.hot { color: #2a0c12; background: var(--perda); font-weight: 500; }
.nu-sequence-list { list-style: none; margin: 15px 0; padding: 0; }
.nu-sequence-list li { margin-bottom: 8px; padding: 11px 12px; border-left: 2px solid var(--lilas); color: var(--muted-dark); background: rgba(203,169,243,.05); font-size: 12px; }
.nu-sequence-list b { color: var(--offwhite); }
.nu-sequence-list span { display: block; margin-top: 5px; color: var(--lilas); }

.nu-portal-hero { position: relative; margin: 20px 0 17px; padding: 22px 18px; border-radius: 22px; color: var(--ameixa); background: var(--lilas-claro); overflow: hidden; }
.nu-portal-hero::after { content: attr(data-number); position: absolute; right: -7px; bottom: -39px; color: rgba(74,42,115,.08); font-family: var(--display); font-size: 150px; font-weight: 600; }
.nu-portal-hero > span { display: block; color: var(--vinho); font-size: 8px; font-weight: 500; letter-spacing: .14em; }
.nu-portal-hero > b { display: block; margin: 4px 0; color: var(--violeta) !important; font-family: var(--display); font-size: 67px; font-weight: 600; line-height: .9; }
.nu-portal-hero > i { display: block; color: var(--ameixa); font-family: var(--display); font-size: 19px; font-style: italic; }
.nu-portal-grid { display: grid; gap: 9px; margin: 16px 0; }
.nu-portal-cell { padding: 14px; border: 1px solid var(--line-dark); border-radius: 16px; }
.nu-portal-cell > span, .nu-portal-clock > span, .nu-portal-card > span { display: block; color: var(--lilas); font-size: 8px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.nu-portal-cell p { margin: 6px 0 0; color: var(--offwhite); font-family: var(--display); font-size: 16px; }
/* O custo de atravessar dormindo é alerta, não perda consumada: ainda dá pra agir. */
.nu-portal-cell.is-cost { border-color: rgba(243,177,60,.36); background: var(--alerta-fundo); }
.nu-portal-cell.is-cost > span { color: var(--alerta); }
.nu-portal-clock { margin: 15px 0; padding: 14px; border: 1px solid rgba(243,177,60,.3); border-radius: 16px; background: var(--alerta-fundo); }
.nu-portal-clock > span { color: var(--alerta) !important; }
.nu-portal-clock p { margin: 5px 0 0; font-size: 13px; }
.nu-portal-clock b { color: var(--alerta) !important; }
.nu-portal-card { margin: 17px 0; padding: 16px; border-radius: 18px; color: var(--ameixa); background: var(--lilas-claro); }
.nu-portal-card > span { color: var(--vinho); }
.nu-portal-card > b { display: block; margin-top: 4px; color: var(--violeta) !important; font-family: var(--display); font-size: 20px; }
.nu-portal-card p { margin: 6px 0 0; color: var(--ameixa); font-size: 12px; }

.nu-compare { display: grid; gap: 9px; margin: 18px 0; }
/* A comparação é o segundo lugar onde vermelho e verde convivem de propósito: o que ela
 * leva de graça e para, contra o que a Leitura destrava. O contraste é o argumento. */
.nu-compare-card { padding: 15px; border: 1px solid rgba(255,113,131,.24); border-radius: 18px; background: var(--perda-fundo); }
.nu-compare-card.is-map { border-color: rgba(62,210,127,.4); color: var(--ameixa); background: var(--lilas-claro); }
.nu-compare-card span { color: var(--perda); font-size: 8px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.nu-compare-card.is-map span { color: var(--ganho-forte); }
.nu-compare-card h3 { margin: 4px 0; color: var(--offwhite); font-family: var(--display); font-size: 21px; font-weight: 500; }
.nu-compare-card.is-map h3 { color: var(--ameixa); }
.nu-compare-card p { margin: 0; font-size: 12px; }
.nu-compare-card.is-map p { color: var(--muted-light); }
.nu-no-need { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 13px 0; }
.nu-no-need span { color: var(--muted-dark); font-size: 10px; }
.nu-no-need span::before { content: "✓"; margin-right: 5px; color: var(--lilas); }

.nu-anchored-summary { margin: 19px 0; padding: 17px; border-radius: 20px; color: var(--ameixa); background: var(--lilas-claro); }
.nu-anchored-summary > span { display: block; margin-bottom: 7px; color: var(--vinho); font-size: 8px; font-weight: 500; letter-spacing: .13em; }
.nu-summary-grid { display: grid; gap: 7px; }
.nu-summary-grid > div { padding: 10px 11px; border: 1px solid rgba(74,42,115,.13); border-radius: 13px; background: rgba(255,255,255,.35); }
.nu-summary-grid > div.is-priority { border-color: rgba(122,63,168,.38); background: #fff; }
.nu-summary-grid small { display: block; color: var(--vinho); font-size: 7px; font-weight: 500; letter-spacing: .1em; }
.nu-summary-grid b { display: block; margin-top: 3px; color: var(--ameixa) !important; font-family: var(--display); font-size: 14px; font-weight: 600; line-height: 1.22; }
.nu-summary-grid em { display: block; margin-top: 3px; color: var(--muted-light); font-size: 9px; font-style: normal; }
.nu-locked { display: grid; gap: 7px; margin: 17px 0; }
.nu-locked-row { display: grid; grid-template-columns: 29px 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line-dark); border-radius: 15px; }
.nu-locked-row > span { color: var(--lilas); font-family: var(--display); font-size: 16px; }
.nu-locked-row b { display: block; font-family: var(--display); font-size: 14px; font-weight: 500; }
.nu-locked-row small { display: block; margin-top: 2px; color: rgba(245,241,246,.43); font-size: 9px; }
/* O que ela apontou como mais pesado destaca no acento da fase, então o realce anda
 * junto com a conversa em vez de ser sempre o mesmo lilás. */
.nu-locked-row.is-priority { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); }
.nu-locked-row.is-priority > span { color: var(--acento); }

.nu-offer-card { background: var(--offwhite); }
.nu-app .nu-offer-card h1, .nu-app .nu-offer-card h2, .nu-app .nu-offer-card strong, .nu-app .nu-offer-card b { color: var(--ameixa); }
.nu-app .nu-offer-card p { color: var(--muted-light); }
.nu-app .nu-offer-card .nu-lead { color: var(--ameixa) !important; }
.nu-app .nu-offer-card .nu-eyebrow { color: var(--vinho) !important; }
.nu-product { margin: 21px 0; padding: 23px 15px; border-radius: 22px; color: var(--offwhite); background: var(--ameixa); text-align: center; }
.nu-product-mark { display: block; color: var(--lilas); font-size: 24px; }
.nu-product small { display: block; margin-top: 4px; color: rgba(245,241,246,.45); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.nu-product h2 { margin: 7px 0 9px; color: var(--offwhite) !important; font-size: 31px; }
.nu-product p { margin: 0; color: var(--muted-dark) !important; font-size: 11px; }
.nu-offer-quick { margin: 18px 0 26px; padding: 17px; border-radius: 20px; background: var(--lilas-claro); text-align: center; }
.nu-offer-quick > span { display: block; color: var(--vinho); font-size: 8px; font-weight: 500; letter-spacing: .13em; }
.nu-offer-quick > b { display: block; margin: 3px 0 13px; color: var(--violeta) !important; font-family: var(--display); font-size: 46px; font-weight: 600; }
.nu-stack { display: grid; }
.nu-stack-item { display: grid; grid-template-columns: 32px 1fr; gap: 11px; padding: 13px 2px; border-bottom: 1px solid var(--line-light); }
.nu-stack-icon { color: var(--vinho); font-family: var(--display); font-size: 18px; }
.nu-stack-item b { display: block; font-family: var(--display); font-size: 16px; font-weight: 500; }
.nu-stack-item div > span { display: block; margin-top: 3px; color: var(--muted-light); font-size: 11px; }
.nu-offer-card .nu-no-need span { color: var(--muted-light); }
.nu-offer-card .nu-no-need span::before { color: var(--vinho); }
.nu-price { margin: 22px 0; padding: 19px; border-radius: 20px; color: var(--offwhite); background: var(--ameixa); text-align: center; }
.nu-price-label { margin: 0 !important; color: var(--muted-dark) !important; font-size: 8px !important; letter-spacing: .13em; text-transform: uppercase; }
.nu-price-value { margin: 2px 0 !important; color: var(--lilas) !important; font-family: var(--display); font-size: 50px !important; font-weight: 600; line-height: 1; }
.nu-price-note { margin: 7px 0 0 !important; color: var(--muted-dark) !important; font-size: 10px !important; }
.nu-section-kicker { display: block; color: var(--vinho); font-size: 8px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nu-feedbacks { margin: 20px 0; }
/* Volume não é elogio, é contagem. Fica em verde porque é ganho de confiança, e o
 * número é o que a leitora bate o olho. */
.nu-app .nu-offer-card .nu-volume { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 0 !important; color: var(--ganho-forte) !important; font-size: 12px !important; }
.nu-app .nu-offer-card .nu-volume b { color: var(--ganho-forte) !important; font-family: var(--display); font-size: 24px; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.nu-feedback-grid { display: grid; gap: 9px; margin-top: 10px; }
.nu-feedback { margin: 0; padding: 16px; border: 1px solid var(--line-light); border-radius: 17px; background: #fff; }
.nu-feedback blockquote { margin: 0; color: var(--ameixa); font-family: var(--display); font-size: 16px; line-height: 1.38; }
.nu-feedback figcaption { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: var(--muted-light); font-size: 10px; }
.nu-feedback figcaption b { color: var(--ameixa) !important; }
.nu-feedback figcaption span { text-align: right; }
/* PRINTS DAS CONVERSAS. Faixa que rola de lado: no celular cada print ocupa 76% da
 * largura, então o segundo aparece cortado na borda e a leitora entende que tem mais
 * pra ver sem precisar de seta ou instrução. */
.nu-proofshots { margin: 24px 0; }
.nu-proofshot-strip { display: flex; gap: 11px; margin: 10px -18px 0; padding: 4px 18px 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.nu-proofshot { flex: 0 0 76%; margin: 0; scroll-snap-align: start; }
.nu-proofshot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-light); border-radius: 14px; background: #ece5dd; box-shadow: 0 10px 24px rgba(21,14,32,.13); }
.nu-app .nu-offer-card .nu-proofshot figcaption { margin-top: 7px; color: var(--muted-light); font-size: 10px; letter-spacing: .04em; }
.nu-app .nu-offer-card .nu-proofshot-note { margin: 2px 0 0 !important; color: var(--muted-light) !important; font-size: 10px !important; }
@media (min-width: 700px) {
  .nu-proofshot { flex-basis: 40%; }
}

.nu-deliverable-preview { margin: 22px 0; padding: 18px; border: 1px solid var(--line-light); border-radius: 22px; background: #fff; }
.nu-preview-copy h2 { margin: 7px 0 8px; color: var(--ameixa) !important; font-size: 25px; }
.nu-preview-copy p { margin-bottom: 15px; color: var(--muted-light) !important; font-size: 12px; }
.nu-preview-pages { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 9px; }
.nu-preview-page { position: relative; min-height: 246px; overflow: hidden; padding: 17px 14px; border-radius: 15px; box-shadow: 0 13px 28px rgba(21,14,32,.13); }
.nu-preview-page h3 { margin: 8px 0; font-family: var(--display); font-weight: 500; letter-spacing: -.035em; line-height: 1.02; }
.nu-preview-page p { font-size: 10px; line-height: 1.38; }
.nu-preview-page small { font-size: 6px; font-weight: 500; letter-spacing: .15em; }
.nu-preview-page.is-cover { transform: rotate(-2deg); color: var(--offwhite); background: var(--ameixa); }
.nu-preview-page.is-cover > span { color: var(--lilas); font-size: 23px; }
.nu-preview-page.is-cover small { display: block; margin-top: 12px; color: var(--lilas); }
.nu-preview-page.is-cover h3 { color: var(--offwhite) !important; font-size: 25px; }
.nu-preview-page.is-cover p { color: rgba(245,241,246,.62) !important; }
.nu-preview-page.is-cover p b { color: var(--offwhite) !important; }
.nu-preview-page.is-cover div { display: grid; gap: 5px; margin-top: 18px; }
.nu-preview-page.is-cover i { padding-top: 5px; border-top: 1px solid rgba(203,169,243,.2); color: rgba(245,241,246,.55); font-size: 6px; font-style: normal; }
.nu-preview-page.is-inside { transform: rotate(1.5deg); border: 1px solid rgba(243,206,114,.26); color: var(--offwhite); background: #100b18; }
.nu-preview-page.is-inside small { color: #f3ce72; }
.nu-preview-page.is-inside h3 { color: #f3ce72 !important; font-size: 21px; }
.nu-preview-page.is-inside > strong { display: block; color: var(--offwhite) !important; font-family: var(--display); font-size: 12px; }
.nu-preview-page.is-inside > p { margin: 9px 0; color: rgba(245,241,246,.62) !important; }
.nu-preview-practice { position: absolute; right: 10px; bottom: 10px; left: 10px; padding: 10px; border: 1px solid rgba(243,206,114,.38); background: rgba(243,206,114,.05); }
.nu-preview-practice span { color: #f3ce72; font-size: 6px; font-weight: 500; letter-spacing: .1em; }
.nu-preview-practice p { margin: 4px 0 0; color: rgba(245,241,246,.72) !important; font-size: 8px; }
.nu-preview-note { margin: 12px 0 0 !important; color: var(--muted-light) !important; text-align: center; font-size: 9px !important; }
/* A garantia tira risco de cima dela, então ela é ganho e fica verde. */
.nu-guarantee { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center; margin: 18px 0; padding: 14px 15px; border: 1px solid rgba(13,122,69,.24); border-radius: 18px; background: var(--ganho-fundo); }
.nu-guarantee-icon { display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid var(--ganho-forte); border-radius: 50%; color: var(--ganho-forte); font-family: var(--display); font-size: 16px; }
.nu-app .nu-offer-card .nu-guarantee b { display: block; color: var(--ganho-forte) !important; font-family: var(--display); font-size: 16px; }
.nu-guarantee p { margin: 3px 0 0; font-size: 11px; }
.nu-inline-cta { margin: 7px 0 17px; }
.nu-app[data-screen="oferta"] .nu-btn { color: #082417; background: #3ed27f; box-shadow: 0 15px 35px rgba(24,151,86,.28); }
.nu-app[data-screen="oferta"] .nu-btn:hover { background: #58df94; box-shadow: 0 18px 42px rgba(24,151,86,.38); }
.nu-decision { color: var(--muted-light) !important; text-align: center; font-family: var(--display); font-size: 14px !important; font-style: italic; }
.nu-decision-2 { margin: 9px 0 0 !important; color: var(--violeta) !important; text-align: center; font-family: var(--display); font-size: 15px !important; font-weight: 500; line-height: 1.4; }

/* A CONTA DE DEIXAR COMO ESTÁ.
 * O nome do bloco é "conta", então ele é desenhado como uma: linhas lançadas uma a uma,
 * régua pontilhada entre elas, e um total embaixo. Sai da caixa arredondada que o resto
 * da oferta usa, porque ele não é mais um card de entrega e não pode parecer um.
 * Vermelho lança o que o padrão cobra; verde fecha na saída, dentro do mesmo bloco.
 * O contraste dos dois é o argumento inteiro em forma de cor. */
.nu-cost-block { position: relative; margin: 26px 0; padding: 20px 19px 19px; border-left: 3px solid var(--perda); border-radius: 4px 20px 20px 4px; color: var(--texto-claro); background: linear-gradient(158deg, #241528, #1a1020 62%); box-shadow: 0 18px 40px rgba(21,14,32,.22); }
.nu-cost-block > span { display: block; margin-bottom: 4px; color: var(--perda) !important; font-size: 8px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

/* Atenção ao seletor: data-tone="light" vale só na tela da Presença. O cartão da oferta
 * clareia por .nu-offer-card, e é dele que estas regras precisam descender para vencer
 * o `.nu-app .nu-offer-card p`, que pinta o texto de quase preto.
 *
 * Linhas lançadas. Continuam parágrafos de verdade, e não itens de lista, porque são
 * frases inteiras: o orçamento de leitura precisa contá-las como prosa. */
.nu-app .nu-offer-card .nu-cost-block p { margin: 0; padding: 11px 0; border-bottom: 1px dotted rgba(255,113,131,.22); color: rgba(245,241,246,.82) !important; font-size: 13px !important; line-height: 1.48; }
.nu-app .nu-offer-card .nu-cost-block b { color: var(--offwhite) !important; }

/* O total da conta. É a única linha em Playfair aqui, e é a que tem que ficar. */
.nu-app .nu-offer-card .nu-cost-block .nu-cost-total { margin-top: 3px; padding: 15px 0 16px; border-bottom: 0; color: var(--offwhite) !important; font-family: var(--display); font-size: 19px !important; font-style: italic; line-height: 1.32; }
.nu-cost-total::before { content: "="; margin-right: 9px; color: var(--perda); font-style: normal; font-weight: 500; }

/* A saída, no verde. Fecha o bloco e cumpre a regra da casa: todo peso desagua numa saída. */
.nu-app .nu-offer-card .nu-cost-block .nu-cost-exit { margin: 2px -19px -19px; padding: 14px 19px 15px; border-top: 1px solid rgba(62,210,127,.28); border-bottom: 0; border-radius: 0 0 18px 4px; color: var(--ganho) !important; background: var(--ganho-fundo); font-family: var(--display); font-size: 15px !important; }

/* O eco dos micro-sims, na prévia. Vive no cartão escuro, e por isso herda o claro. */
.nu-echo { margin: 13px 0 0 !important; padding-left: 13px; border-left: 2px solid var(--lilas); color: var(--lilas-claro) !important; font-family: var(--display); font-size: 14px !important; font-style: italic; line-height: 1.45; }

/* Selo de entrega. Verde, porque velocidade é ganho, e o prazo vem do config. */
.nu-delivery { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 14px 7px 11px; border: 1px solid rgba(62,210,127,.4); border-radius: 999px; color: var(--ganho-forte); background: var(--ganho-fundo); font-size: 11px; font-weight: 500; }
.nu-delivery::before { content: "→"; font-size: 13px; }
.nu-app .nu-offer-card .nu-delivery b { color: var(--ganho-forte) !important; font-weight: 500; }

/* O eco dos micro-sims, na prévia. Vive no cartão escuro, e por isso herda o claro. */
.nu-faq { margin-top: 24px; border-top: 1px solid var(--line-light); }
.nu-faq details { border-bottom: 1px solid var(--line-light); }
.nu-faq summary { padding: 13px 0; color: var(--ameixa); cursor: pointer; font-family: var(--display); }
.nu-faq details p { padding: 0 0 12px; font-size: 12px; }

.nu-footer { width: min(100% - 36px, 720px); margin: 0 auto; padding: 24px 0 38px; border-top: 1px solid rgba(245,241,246,.09); color: rgba(245,241,246,.38); text-align: center; font-size: 9px; }
.nu-footer-mark { color: var(--lilas); font-size: 18px; }
.nu-footer p { margin: 5px 0 8px; }
.nu-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.nu-footer a, .nu-footer button { border: 0; color: rgba(245,241,246,.42); background: transparent; font-size: 9px; cursor: pointer; }
.nu-consent { position: fixed; z-index: 20; right: 12px; bottom: 12px; left: 12px; max-width: 680px; margin: auto; padding: 16px; border: 1px solid var(--lilas); border-radius: 20px; color: var(--offwhite); background: var(--ameixa); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.nu-consent[hidden], .nu-modal[hidden] { display: none; }
.nu-consent strong { font-family: var(--display); font-size: 16px; font-weight: 500; }
.nu-consent p { margin: 4px 0 12px; color: var(--muted-dark); font-size: 11px; }
.nu-consent-actions { display: flex; gap: 8px; }
.nu-btn-small, .nu-btn-quiet { padding: 9px 12px; border: 1px solid var(--lilas); border-radius: 999px; cursor: pointer; font-family: var(--display); font-size: 12px; }
.nu-btn-small { color: var(--ameixa); background: var(--lilas); }
.nu-btn-quiet { color: var(--offwhite); background: transparent; }
.nu-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(8,4,13,.84); }
.nu-modal-card { position: relative; width: min(100%, 420px); padding: 30px 24px; border: 1px solid var(--lilas); border-radius: 26px; color: var(--offwhite); background: var(--ameixa); box-shadow: 0 30px 62px rgba(0,0,0,.5); text-align: center; }
.nu-modal-card h2 { margin: 7px 0; font-family: var(--display); font-weight: 500; }
.nu-modal-card p { color: var(--muted-dark); font-size: 12px; }
.nu-modal-icon { color: var(--lilas); font-size: 24px; }
.nu-modal-close { position: absolute; top: 9px; right: 12px; border: 0; color: var(--muted-dark); background: transparent; font-size: 22px; cursor: pointer; }
.nu-modal-card code { color: var(--lilas); }
.nu-legal { width: min(100% - 32px, 760px); margin: 16px auto 50px; padding: 31px 25px; border-radius: 28px; color: var(--ameixa); background: var(--offwhite); }
.nu-legal h1, .nu-legal h2 { font-family: var(--display); font-weight: 500; }
.nu-legal h1 { font-size: 38px; line-height: 1.05; }
.nu-legal h2 { margin-top: 27px; color: var(--violeta); font-size: 22px; }
.nu-legal p, .nu-legal li { color: var(--muted-light); font-size: 13px; }
.nu-draft-warning { padding: 12px 14px; border-left: 3px solid var(--vinho); color: var(--ameixa) !important; background: var(--lilas-claro); }

@media (min-width: 620px) {
  .nu-app { padding: 18px 24px 76px; }
  .nu-card { padding: 45px 48px 49px; }
  .nu-options { grid-template-columns: 1fr 1fr; }
  .nu-duo, .nu-compare, .nu-portal-grid { grid-template-columns: 1fr 1fr; }
  .nu-summary-grid { grid-template-columns: 1fr 1fr; }
  .nu-microsim-options { grid-template-columns: repeat(3, 1fr); }
  .nu-microsim-option { text-align: center; }
  .nu-feedback-grid { grid-template-columns: repeat(3, 1fr); }
  .nu-consent { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
  .nu-consent p { margin-bottom: 0; }
}

@media (max-width: 370px) {
  .nu-card { padding: 29px 18px 33px; }
  .nu-card h1 { font-size: 34px; }
  .nu-presence-card { padding-left: 88px; }
  .nu-presence-card > b { font-size: 61px; }
  .nu-preview-pages { grid-template-columns: 1fr; }
  .nu-preview-page { min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .nu-stage { opacity: 1; transform: none; transition: none; }
}