/* ==========================================================================
   Orientation quiz (Canva pages 4 to 12): entry screen, five questions and
   three results. Each screen is one 1920x1080 Canva frame.
   Desktop: positions in screenshot pixels (--q), measured on 1080px-wide
   screenshots of the frame. Mobile: stacked layout adapted by the developer.
   The back button and progress indicator have no Canva design (added on
   12/10/2026) and follow the site's own styles.
   ========================================================================== */

.quiz { --q: calc(var(--u) * 1920 / 1080); --p: var(--q); min-height: max(100vh, calc(608 * var(--q))); }  /* header in the same unit, so header + screen = exactly one frame */
.quiz-deco { top: 0; left: 0; width: 100%; height: calc(608 * var(--q)); }
.quiz main { position: relative; }

/* Entry and results ---------------------------------------------------------- */
.quiz-hero { position: relative; height: calc(452 * var(--q)); }
/* Copy blocks flow in a column (not absolute tops), so a title that wraps
   onto an extra line pushes the text down instead of overlapping it. */
.quiz-hero__copy { position: absolute; left: calc(66 * var(--q)); top: calc(21 * var(--q)); width: calc(430 * var(--q)); display: flex; flex-direction: column; align-items: flex-start; }
.quiz-hero .hello { margin-left: calc(4 * var(--q)); font-size: calc(47.2 * var(--e)); }
.quiz-hero__title { margin-top: calc(4 * var(--q)); width: calc(480 * var(--q)); font-size: calc(39.5 * var(--q)); line-height: 1.04; }
.quiz-hero__title--red     { color: var(--red); }
.quiz-hero__title--blue    { color: var(--blue); }
.quiz-hero__title--magenta { color: var(--magenta); }
.quiz-hero__text { margin: calc(15 * var(--q)) 0 0 calc(2 * var(--q)); width: calc(410 * var(--q)); font-size: calc(15.5 * var(--q)); line-height: 1.4; }
.quiz-hero__text--entry { margin-top: calc(15 * var(--q)); width: calc(372 * var(--q)); font-size: max(11px, calc(12.5 * var(--q))); line-height: 1.48; }
.quiz-hero__text strong { font-weight: 900; letter-spacing: -.08em; }
.quiz-hero__btn {
  margin-top: calc(15 * var(--q)); height: calc(40 * var(--q)); padding: 0 calc(16 * var(--q)) 0 calc(18 * var(--q));
  border-width: calc(3 * var(--q)); font-size: calc(23 * var(--q));
}
.quiz-hero__btn svg { margin-left: calc(8 * var(--q)); }
.quiz-hero__btn--red     { color: var(--red); }
.quiz-hero__btn--blue    { color: var(--blue); }
.quiz-hero__btn--magenta { color: var(--magenta); }
.quiz-hero__art { position: absolute; left: calc(632 * var(--e)); top: calc(-21 * var(--e)); width: calc(688 * var(--e)); }   /* final image, fitted to the Canva export (--e) */
.quiz-noscript { margin-top: calc(14 * var(--q)); width: calc(380 * var(--q)); font-size: max(11px, calc(13 * var(--q))); }
.quiz-noscript a { text-decoration: underline; }

.quiz-result .quiz-hero__copy { left: calc(58 * var(--q)); top: calc(35 * var(--q)); }
.quiz-result__maioria { font-size: calc(47.2 * var(--e)); }
.quiz-result .quiz-hero__title { margin: calc(2 * var(--q)) 0 0 calc(7 * var(--q)); width: calc(430 * var(--q)); }   /* ends before the photo */
.quiz-result .quiz-hero__text { margin-left: calc(10 * var(--q)); }
.quiz-result .quiz-hero__btn { margin: calc(20 * var(--q)) 0 0 calc(7 * var(--q)); height: calc(43 * var(--q)); font-size: calc(24 * var(--q)); }
.quiz-result__art { left: calc(495 * var(--q)); top: calc(17 * var(--q)); width: calc(555 * var(--q)); }

/* Questions -------------------------------------------------------------------- */
.quiz-question { position: relative; height: calc(452 * var(--q)); text-align: center; }
.quiz-nav {
  position: relative; z-index: 11;   /* sits in the header's empty space; must stay clickable */
  display: flex; align-items: center; justify-content: space-between;
  width: calc(527 * var(--q)); margin: calc(-30 * var(--q)) auto 0; height: calc(26 * var(--q));
}
.quiz-back {
  height: calc(24 * var(--q)); padding: 0 calc(10 * var(--q)); gap: calc(5 * var(--q));
  border-width: calc(1.8 * var(--q)); font-size: max(11px, calc(13 * var(--q))); color: var(--ink);
}
.quiz-progress { display: flex; align-items: center; gap: calc(8 * var(--q)); font-weight: 900; font-size: max(11px, calc(13 * var(--q))); letter-spacing: -.05em; }
.quiz-progress__dots { display: flex; gap: calc(4 * var(--q)); }
.quiz-progress__dot { width: calc(16 * var(--q)); height: calc(6 * var(--q)); border-radius: 99px; background: #e4e1d6; }
.quiz-progress__dot.is-done { background: var(--red); }

.quiz-question__title {
  width: calc(720 * var(--q)); margin: calc(8 * var(--q)) auto 0; min-height: calc(90 * var(--q));
  font-weight: 900; font-size: calc(42 * var(--q)); line-height: 1.03; letter-spacing: -.085em;
}
.quiz-question__title:focus { outline: none; }
.quiz-question__title .marker::before { top: .5em; }
.quiz-answers { display: grid; gap: calc(20 * var(--q)); width: calc(527 * var(--q)); margin: calc(22 * var(--q)) auto 0; position: relative; }
.quiz-answers::before {   /* soft grey glow behind the answers */
  content: ""; position: absolute; inset: 8% -18%; z-index: -1;
  background: radial-gradient(closest-side, rgb(0 0 0 / .10), transparent); filter: blur(calc(10 * var(--q)));
}
.answer {
  display: flex; align-items: center; width: 100%; height: calc(76 * var(--q));
  padding: 0 calc(80 * var(--q)); border: calc(4 * var(--q)) solid #fff; border-radius: 999px;
  background-color: var(--a);
  background-image:   /* lighter blobs, like the Canva texture */
    radial-gradient(ellipse 18% 70% at 10% 40%, rgb(255 255 255 / .10) 0 98%, transparent 100%),
    radial-gradient(ellipse 12% 90% at 42% 95%, rgb(255 255 255 / .08) 0 98%, transparent 100%),
    radial-gradient(ellipse 10% 80% at 72% 10%, rgb(255 255 255 / .08) 0 98%, transparent 100%);
  box-shadow: 0 calc(6 * var(--q)) calc(26 * var(--q)) rgb(0 0 0 / .12);
  color: #fff; text-align: left; font-weight: 900; font-size: calc(17 * var(--q)); line-height: 1.12; letter-spacing: -.08em;
  text-shadow: 0 calc(2 * var(--q)) calc(4 * var(--q)) rgb(0 0 0 / .35);
  transition: transform .15s ease, filter .15s ease;
}
.answer:hover { transform: translateY(-2px); filter: brightness(1.05); }
.answer--a { --a: var(--red); }
.answer--b { --a: var(--blue); }
.answer--c { --a: var(--magenta); }

/* Mobile and tablet ------------------------------------------------------------ */
@media (max-width: 900px) {
  .quiz { --q: var(--u); min-height: 100vh; }
  .quiz-deco { height: 100%; }

  .quiz-hero { height: auto; padding: calc(20 * var(--u)) calc(32 * var(--u)) calc(60 * var(--u)); }
  .quiz-hero__copy, .quiz-hero__art { position: static; width: auto; }
  .quiz-hero .hello { font-size: calc(56 * var(--u)); }
  .quiz-result__maioria { font-size: calc(56 * var(--u)); }
  .quiz-hero__title { width: auto; margin-top: calc(10 * var(--u)); font-size: calc(56 * var(--u)); }
  .quiz-hero__text, .quiz-hero__text--entry { width: auto; margin-top: calc(20 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.4; }
  .quiz-hero__btn, .quiz-result .quiz-hero__btn { height: calc(64 * var(--u)); margin-top: calc(26 * var(--u)); padding: 0 calc(28 * var(--u)); border-width: calc(4 * var(--u)); font-size: calc(32 * var(--u)); }
  .quiz-hero__art { width: 108%; max-width: none; margin: calc(30 * var(--u)) 0 0 -4%; }
  .quiz-noscript { width: auto; margin-top: calc(20 * var(--u)); font-size: max(11px, calc(20 * var(--u))); }

  .quiz-question { height: auto; padding: calc(10 * var(--u)) calc(24 * var(--u)) calc(60 * var(--u)); }
  .quiz-nav { width: auto; margin: 0; height: auto; z-index: auto; }
  .quiz-back { height: calc(48 * var(--u)); padding: 0 calc(18 * var(--u)); border-width: calc(3 * var(--u)); font-size: calc(22 * var(--u)); }
  .quiz-progress { font-size: calc(22 * var(--u)); gap: calc(10 * var(--u)); }
  .quiz-progress__dot { width: calc(24 * var(--u)); height: calc(9 * var(--u)); }
  .quiz-question__title { width: auto; min-height: 0; margin-top: calc(36 * var(--u)); font-size: calc(48 * var(--u)); }
  .quiz-answers { width: auto; gap: calc(22 * var(--u)); margin-top: calc(36 * var(--u)); }
  .answer { height: auto; min-height: calc(110 * var(--u)); padding: calc(20 * var(--u)) calc(44 * var(--u)); border-width: calc(5 * var(--u)); font-size: calc(26 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .answer { transition: none; }
}

/* Question highlights may wrap onto two lines: paint the marker as a
   background so each line gets its own piece. */
.quiz-question__title .marker::before { display: none; }
.quiz-question__title .marker {
  background: linear-gradient(transparent 52%, var(--highlight) 52%, var(--highlight) 96%, transparent 96%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}