/* Small additions on top of the exported design CSS (novo.css, which is generated: do not edit). */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: #fff; color: #0d0f14; }
.skip:focus { left: 8px; }

/* Cookie banner (new design). On phones it floats above the bottom navigation bar. */
.cookie-banner {
  position: fixed; z-index: 90; left: 12px; right: 12px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 120px); overflow-y: auto;
  max-width: 520px; padding: 18px 18px 16px;
  border: 1px solid oklch(90% .035 250 / .18); border-radius: 20px;
  background: oklch(14% .03 258 / .92); color: oklch(97% .006 250);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -16px rgb(0 0 0 / .7);
  font-family: Roboto, system-ui, sans-serif; font-size: .875rem; line-height: 1.5;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner h2 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0; }
.cookie-banner p { margin: 0 0 14px; color: oklch(86% .02 250); }
.cookie-banner a { color: inherit; text-underline-offset: 3px; }
.cookie-options { display: grid; gap: 10px; margin-bottom: 14px; }
.cookie-options[hidden], .cookie-actions [hidden] { display: none; }
.cookie-options label { display: flex; align-items: flex-start; gap: 10px; }
.cookie-options input { margin-top: 3px; accent-color: oklch(62% .22 258); }
.cookie-options small { display: block; color: oklch(80% .022 250); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-btn {
  cursor: pointer; border: 1px solid oklch(90% .035 250 / .3); border-radius: 999px;
  padding: 9px 16px; background: transparent; color: inherit; font: inherit; font-weight: 500;
}
.cookie-btn:hover { background: oklch(97% .006 250 / .1); }
.cookie-btn-primary { border-color: transparent; background: oklch(60% .24 258); color: #fff; }
.cookie-btn-primary:hover { background: oklch(65% .23 258); }
.cookie-btn:focus-visible { outline: 2px solid oklch(80% .12 245); outline-offset: 2px; }
@media (min-width: 768px) {
  .cookie-banner { left: 24px; right: auto; bottom: 24px; }
}

/* Phones: headline and intro first, then the globe with the chips, then the call to action.
   The copy blocks are flattened into the hero grid so the button can sit below the globe. */
@media (width <= 767px) {
  .hero-sora { padding-top: 88px; }
  .hero-sora > div { gap: 0; }
  .hero-copy, .hero-copy > .animate-reveal { display: contents; }
  .hero-copy > .animate-reveal > * { animation: reveal-up 1.2s cubic-bezier(.2, .7, .2, 1) 900ms both; }
  .hero-copy > .animate-reveal > .hero-intro { order: 1; }
  .hero-phone-network { order: 2; margin-top: 1.5rem; }
  .hero-copy > .animate-reveal > div { order: 3; margin-top: 1.25rem; }
}

/* Phones: the pre-launch notifications mock is hidden; it only shows from tablets up. */
@media (width <= 767px) {
  .quaep-notification-phone { display: none; }
}

/* Legal pages: typography for the long-form text rendered inside .legal-doc. */
.legal-notice { margin-top: 1rem; border-left: 3px solid var(--primary); background: color-mix(in oklab, var(--primary) 8%, transparent); padding: .75rem 1rem; border-radius: 0 .5rem .5rem 0; font-size: .875rem; color: var(--muted-foreground); }
.legal-body > * + * { margin-top: 1rem; }
.legal-body h2 { margin-top: 2rem; font-size: 1.15rem; font-weight: 700; color: var(--foreground); }
.legal-body h3 { margin-top: 1.5rem; font-size: 1rem; font-weight: 700; color: var(--foreground); }
.legal-body ul, .legal-body ol { padding-left: 1.25rem; }
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li + li { margin-top: .5rem; }
.legal-body strong { color: var(--foreground); }
.legal-body a { color: var(--primary); text-decoration: underline; }

/* Signup form (/cadastro/): inputs, selectable pills and the fields that depend on "Eu sou". */
.signup-input { margin-top: .5rem; width: 100%; border-radius: 1rem; padding: .875rem 1rem; font-size: 1rem; color: var(--paper-foreground); }
.signup-input::placeholder { color: color-mix(in oklab, var(--paper-muted) 70%, transparent); }
.signup-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 30%, transparent); }
.signup-input[aria-invalid="true"] { border-color: var(--destructive); }
.signup-error { margin-top: .375rem; display: inline-block; border-radius: .25rem; background: color-mix(in oklab, var(--destructive) 90%, transparent); padding: .125rem .5rem; font-size: .875rem; font-weight: 500; color: var(--destructive-foreground); }
.signup-pill:has(:checked) { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-glow); }

/* Member area (/inicio/, /inicio-profissional/): small controls that sit on the light "pioneer" theme. */
.area-nav-link { display: inline-flex; align-items: center; border-radius: 9999px; padding: .5rem 1rem; font-size: .875rem; font-weight: 500; cursor: pointer; }
.area-nav-link:hover { background: var(--secondary); }
.area-input { margin-top: .25rem; width: 100%; border-radius: .75rem; border: 1px solid var(--input); background: var(--card); padding: .5rem .75rem; font-size: .875rem; }
.area-textarea { margin-top: .5rem; width: 100%; resize: vertical; border-radius: .75rem; border: 1px solid var(--input); background: var(--card); padding: .75rem; font-size: .875rem; outline: none; }
.area-textarea:focus, .area-input:focus { border-color: var(--primary); }
.area-button, .area-button-outline, .area-button-ghost { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding: .625rem 1.25rem; font-size: .875rem; font-weight: 600; cursor: pointer; }
.area-button { background: var(--primary); color: var(--primary-foreground); }
.area-button-outline { border: 1px solid var(--border); }
.area-button-outline:hover, .area-button-ghost:hover { background: var(--secondary); }
.area-eteriens-open { display: inline-flex; align-items: center; gap: .75rem; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); padding: .75rem 1.25rem; box-shadow: var(--shadow-soft); cursor: pointer; }
.area-eteriens-open[hidden] { display: none; }

/* Status pages (confirmation, unsubscribe, data deletion, my invites). */
.st-title { margin-top: 1rem; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.1; }
.st-lead { margin-top: 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }
.st-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--primary); color: var(--primary-foreground); padding: .875rem 1.75rem; font-weight: 700; box-shadow: var(--shadow-glow); cursor: pointer; }
.st-btn-ghost { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--border); padding: .75rem 1.5rem; font-weight: 600; }
.st-btn-ghost:hover { background: var(--secondary); }
.st-link { font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* Mobile bottom menu: nearly opaque so the page text behind it never shows through. */
.quaep-bottom-nav {
  background: color-mix(in oklab, var(--nav-navy) 96%, black);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: color-mix(in oklab, var(--cosmic-light) 22%, transparent);
}
.quaep-bottom-nav a:not([aria-current]) { color: color-mix(in oklab, var(--cosmic-light) 82%, transparent); }

/* Header menu pill: solid enough to read over any page (it used to be a 5% tint of the text color). */
.quaep-header-dark .quaep-nav-glass { background: color-mix(in oklab, var(--cosmic-background) 90%, transparent); }
.quaep-header-light .quaep-nav-glass { background: rgb(255 255 255 / 0.92); }

/* /bio: the copyright line is centered under the buttons, whatever the parent's alignment. */
.bio-copy { width: 100%; align-self: center; text-align: center; }

/* Login/signup aside: the title and text read left-aligned (the global justify rule left wide gaps between words). */
#conteudo [data-aside] p { text-align: left; }

/* Login/signup: on desktop the picture panel stays one screen tall and pinned while the (longer) form scrolls, so the image is never cut. */
@media (width >= 1024px) {
  [data-aside] { position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: start; }
}

/* The bright column of the descending light is animated in hero-scene.js (a beam every 5 s);
   here only the soft ambient glow stays. */
.quaep-descending-light{background:radial-gradient(ellipse 48% 40% at 60% 85%, var(--descending-light), transparent 75%)}

/* Mobile: the pre-launch card is hidden; the hero and the sections above already carry the call to action. */
@media (max-width: 767px) {
  .quaep-prelaunch { display: none; }
}

/* Scenes outside the home (login, signup, area, bio) have no dark section behind them: give the scene its own night
   base so the static Earth never shows over the light page while the canvas loads, and drop the descending-light
   glow, which is anchored to 85% of the height and lands as a grey blob in tall, narrow panels. */
.quaep-cosmic-scene { background: var(--cosmic-background); }
[data-aside] .quaep-descending-light { display: none; }

/* Member home: picker for the banner scene. */
.banner-picker-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.banner-option { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; padding: .3rem .3rem .45rem; border: 1px solid var(--border); border-radius: .85rem; background: var(--card); color: var(--muted-foreground); font-size: .72rem; font-weight: 600; text-align: center; cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s; }
.banner-option img { display: block; width: 100%; height: auto; aspect-ratio: 2; object-fit: cover; border-radius: .6rem; }
.banner-option:hover { border-color: color-mix(in oklab, var(--primary) 55%, var(--border)); color: var(--foreground); }
.banner-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.banner-option[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
@media (max-width: 480px) { .banner-picker-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.banner-toggle { position: absolute; right: .9rem; bottom: .9rem; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; background: rgb(8 14 30 / .55); color: #fff; font-size: .8rem; font-weight: 600; backdrop-filter: blur(8px); cursor: pointer; transition: background .2s, border-color .2s; }
.banner-toggle:hover, .banner-toggle[aria-expanded="true"] { background: rgb(8 14 30 / .8); border-color: rgb(255 255 255 / .7); }
.banner-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) { .banner-toggle { width: 2.75rem; padding: 0; justify-content: center; } .banner-toggle-label { display: none; } }
.banner-picker[hidden] { display: none; }

/* Recognition: the QUAEP symbol behind the profile picture (Generation) and a seal (Ambassador). */
.rec-g-origem { --ga: #f5c04a; --gb: #ff8a3d; }
.rec-g-movimento { --ga: #3ee0d0; --gb: #2f8cff; }
.rec-g-expansao { --ga: #b38cff; --gb: #e063c8; }
.rec-g-conexao { --ga: #9dff3a; --gb: #12d65a; }
.rec-g-comunidade { --ga: #aab2c0; --gb: #6f7886; }
.rec-m-conector { --ma: #34d399; --mb: #0f9f7a; }
.rec-m-multiplicador { --ma: #38bdf8; --mb: #2563eb; }
.rec-m-embaixador { --ma: #a78bfa; --mb: #7c3aed; }
.rec-m-destaque { --ma: #fcd34d; --mb: #f59e0b; }
.rec-link { display: grid; place-items: center; border-radius: 50%; }
.rec-avatar { --s: 5rem; position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); isolation: isolate; }
.rec-photo { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; border: max(2px, calc(var(--s) * .045)) solid var(--card); background: var(--secondary); color: var(--primary); font-weight: 700; font-size: calc(var(--s) * .4); box-shadow: 0 2px 10px rgb(10 20 50 / .22); }
.rec-photo img { width: 100%; height: 100%; object-fit: cover; }
.rec-ring { --t: max(2px, calc(var(--s) * .065)); position: absolute; z-index: -1; inset: calc(var(--t) * -1); border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + .5px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + .5px)); }
.rec-seal { position: absolute; right: -6%; bottom: -4%; display: grid; place-items: center; width: calc(var(--s) * .34); height: calc(var(--s) * .34); min-width: 1rem; min-height: 1rem; border-radius: 50%; background: var(--card); border: max(1.5px, calc(var(--s) * .02)) solid var(--card); box-shadow: 0 1px 6px rgb(10 20 50 / .35); }
.rec-ring-g { background: linear-gradient(135deg, var(--ga), var(--gb)); }
.rec-ring-m { background: linear-gradient(135deg, var(--ma), var(--mb)); }
.rec-ring-gm { background: linear-gradient(135deg, var(--ga) 0%, var(--gb) 35%, var(--ma) 65%, var(--mb) 100%); }
.rec-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rec-seal b { display: block; width: 86%; height: 86%; background: linear-gradient(135deg, var(--ga), var(--gb)); -webkit-mask: url("../img/quaep-icone.0614e82e371c.webp") center / contain no-repeat; mask: url("../img/quaep-icone.0614e82e371c.webp") center / contain no-repeat; }
.rec-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .5rem; border-radius: 50%; vertical-align: baseline; background: linear-gradient(135deg, var(--ga, var(--ma)), var(--gb, var(--mb))); }
.rec-profile-head { margin-bottom: 1rem; }

/* Language switch (public pages) */
.lang-switch { position: relative; }
.lang-switch summary { display: inline-flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer; border-radius: 9999px; padding: .5rem .85rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: #fff; border: 1px solid rgb(255 255 255 / .22); background: rgb(13 20 38 / .78); backdrop-filter: blur(8px); }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:focus-visible { outline: 2px solid var(--ring, #4f8dff); outline-offset: 2px; }
.lang-switch ul { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; min-width: 9.5rem; margin: 0; padding: .35rem; list-style: none; border-radius: .9rem; background: #0d1426; color: #fff; border: 1px solid rgb(255 255 255 / .16); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .6); }
.lang-switch li a { display: block; border-radius: .6rem; padding: .55rem .8rem; font-size: .9rem; color: inherit; text-decoration: none; }
.lang-switch li a:hover, .lang-switch li a[aria-current] { background: rgb(255 255 255 / .1); }
.lang-switch li a[aria-current]::after { content: " ✓"; }
.lang-pill { display: inline-block; border-radius: 9999px; padding: .45rem .9rem; font-size: .85rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); text-decoration: none; color: inherit; }
.lang-pill[aria-current] { background: rgb(79 141 255 / .22); border-color: rgb(79 141 255 / .6); }

/* Closing lines of a page section (client copy) */
.page-closing { position: relative; text-align: center !important; margin: 3.5rem auto 3.5rem; max-width: 46rem; padding: 0 1.25rem; text-align: center; font-size: 1.125rem; font-weight: 600; line-height: 1.6; }
.page-closing-dark { color: rgb(255 255 255 / .88); margin-top: 2.5rem; margin-bottom: 4rem; }
.page-closing-faq { margin: 2.5rem auto 2rem; }

/* Language pills in the mobile menu: readable on the dark panel */
.quaep-mobile-menu .lang-pill { color: #fff; border-color: rgb(255 255 255 / .35); background: rgb(255 255 255 / .06); }
.quaep-mobile-menu .lang-pill[aria-current] { background: #1f6bff; border-color: #6ea0ff; }
/* Bottom bar: long labels in other languages must not collide */
.quaep-bottom-item { min-width: 0; }
.quaep-bottom-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .62rem; }

/* Abertura: enquanto ela carrega, a página fica escondida (sem piscar). Se algo travar, aparece sozinha em 6 s. */
html.qa-pending body { background: #0d1426; }
html.qa-pending body > :not(#quaep-abertura) { visibility: hidden; animation: qa-failsafe 0s linear 6s forwards; }
@keyframes qa-failsafe { to { visibility: visible; } }