/* Netward | base comum aos conceitos (negocios ficticios).
   So o que se repete: tipos de letra, reset, aviso de conceito, seletor de lingua, botao com icone,
   revelar ao entrar no ecra e janela de demonstracao do WhatsApp. O tema visual vive em cada conceito.
   Icones: Phosphor (licenca MIT, base/icons). Movimento: so transform e opacity, desligado com reduced-motion. */

@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/conceitos/base/ebgaramond-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root { --ease: cubic-bezier(0.16, 1, 0.3, 1); --press: cubic-bezier(0.32, 0.72, 0, 1); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; font: 400 1.0625rem/1.6 "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wrap { width: min(1240px, 100% - 2 * clamp(16px, 5vw, 48px)); margin-inline: auto; }
.ico { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-arrow { --i: url("/conceitos/base/icons/arrow-up-right.svg"); }
.i-wa { --i: url("/conceitos/base/icons/whatsapp-logo.svg"); }
.i-plus { --i: url("/conceitos/base/icons/plus.svg"); }
.i-minus { --i: url("/conceitos/base/icons/minus.svg"); }
.i-back { --i: url("/conceitos/base/icons/arrow-left.svg"); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Aviso de conceito: fixo, discreto, sempre visivel */
.nw-note {
  position: fixed; z-index: 70; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px);
  padding: 7px 8px 7px 16px; border-radius: 999px; background: rgba(14, 16, 20, .9); color: #eef0f2;
  font: 500 .8125rem/1.3 "Geist", sans-serif; box-shadow: 0 10px 30px rgba(14, 16, 20, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.nw-note a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #38b6ff; color: #04141f; font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Seletor de lingua */
.langs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; }
.langs button { min-width: 38px; min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font: 600 .75rem/1 "Geist", sans-serif; letter-spacing: .04em; opacity: .6; transition: opacity .3s var(--ease), background-color .3s var(--ease); }
.langs button.on { opacity: 1; }

/* Botao com icone aninhado */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 6px 6px 6px 24px; border: 0; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .5s var(--press), background-color .3s var(--ease); }
.btn .bi { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; transition: transform .5s var(--press); }
.btn .bi .ico { width: 18px; height: 18px; }
.btn:hover .bi { transform: translate(2px, -1px) scale(1.04); }
.btn:active { transform: scale(.98); }
.btn-plain { padding: 0 22px; }

/* Revelar ao entrar no ecra (so com JS e sem reduced-motion) */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* Janela de demonstracao do WhatsApp */
.wa-demo { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 16px; background: rgba(10, 12, 16, .55); }
.wa-demo.show { display: grid; }
.wa-box { width: min(460px, 100%); padding: 8px; border-radius: 28px; background: rgba(255, 255, 255, .14); }
.wa-in { padding: 24px; border-radius: 22px; background: #fbfbfa; color: #14171c; box-shadow: 0 30px 80px rgba(10, 12, 16, .3); }
.wa-in h2 { font: 650 1.1875rem/1.25 "Geist", sans-serif; letter-spacing: -.02em; margin-bottom: 8px; }
.wa-in p { color: #565c68; font-size: .9375rem; margin-bottom: 0; }
.wa-msg { white-space: pre-wrap; margin: 18px 0 20px; padding: 16px 18px; border-radius: 16px 16px 16px 4px; background: #dcf8c6; color: #14171c; font-size: .9375rem; line-height: 1.5; }
.wa-in button { width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: #14171c; color: #fbfbfa; font-weight: 600; cursor: pointer; }

@media (max-width: 560px) {
  .nw-note { font-size: .75rem; padding-left: 12px; bottom: 10px; }
  .nw-note .long { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .rv { opacity: 1; transform: none; }
}
.js .rv.d1 { --d: .08s; }
.js .rv.d2 { --d: .16s; }
.js .rv.d3 { --d: .24s; }