/* ============================================================
   Assessment — test, result, paywall.
   Every colour, size and radius comes from main.css tokens.
   Breakpoints: 480 / 768 / 1024 only.
   ============================================================ */

/* The site header is `position: fixed` for every page (main.css `header`), and this
   main is not a `.section`, so it never picked up the `.section:first-of-type`
   clearance the payment and schedule pages get. It therefore started at y=0 with the
   header on top of it: on desktop the fixed bar covered the "Volver atrás" link
   outright. Below 768px `body` already reserves --header-height, so only the section
   rhythm is added there. */
.assessment-page {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: calc(var(--header-height) + var(--section-y)) var(--space-4) var(--space-8);
}

@media (max-width: 768px) {
  .assessment-page {
    padding-top: var(--section-y);
  }
}

/* ── Getting back out ───────────────────────────────────────── */

/* Entering /evaluaciones/ was a one-way door: the header on these pages is only the
   logo, and the runner's "← Anterior" moves between QUESTIONS, not between pages. So
   there was no way back to the category list or the site short of the browser button
   or a phone's back-swipe.
   It sits at the top of the content rather than in the header because the wordmark is
   ~290px wide at its 52px header size — on a 360px phone nothing else fits on that
   row. Top-left of the content is also simply where reading starts. */
/* A real control, not a clickable line of text: an outlined pill reads as pressable
   at a glance, which a bare underlined label does not — and it gives the 44px tap
   target an actual visible edge to aim at. Deliberately quiet (surface fill, hairline
   border) so it never competes with the primary CTA on the page. */
.assessment-backlink {
  /* flex + fit-content, not inline-flex: the result page centers its text, and an
     inline box would ride along with it. This keeps it left no matter the parent. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px; /* tap target — this audience is ~80% mobile */
  padding: 0 var(--space-4);
  margin-bottom: var(--space-5);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.assessment-backlink::before {
  content: "←";
  font-size: 1.1em;
  line-height: 1;
}

.assessment-backlink:hover,
.assessment-backlink:focus-visible {
  border-color: var(--brand);
  background: var(--surface-alt);
  color: var(--brand-strong);
}

/* ── Intro ──────────────────────────────────────────────────── */

.assessment-intro {
  text-align: center;
}

.assessment-intro h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--ink-heading);
  margin-bottom: var(--space-3);
}

.assessment-intro__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
}

/* ── Listing (categories, and the tests inside one) ─────────── */

.assessment-list {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.assessment-list__card {
  display: block;
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.assessment-list__card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}

.assessment-list__card:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
}

/* Matches the homepage service cards: the same 26px .card-icon from main.css,
   inline with the heading rather than stacked above it, so a category card reads
   as the same kind of object as a service card. */
.assessment-list__card h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--ink-heading);
  margin-bottom: var(--space-2);
}

.assessment-list__card p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.assessment-list__meta {
  font-size: var(--fs-small);
  color: var(--brand-strong);
  font-weight: 500;
}

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

/* What is free and what is not, stated before the 5-minute investment. */
.assessment-pricing-note {
  max-width: 34rem;
  margin: 0 auto var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink);
}

.assessment-pricing-note strong { color: var(--ink-heading); }

/* ── Progress ───────────────────────────────────────────────── */

.assessment-progress {
  margin-bottom: var(--space-6);
}

.assessment-progress__track {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}

.assessment-progress__bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--brand-strong);
  transition: width 0.3s ease;
}

.assessment-progress__label {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}

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

/* ── Question ───────────────────────────────────────────────── */

.assessment-question {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-5);
}

.assessment-question__text {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--ink-heading);
  margin-bottom: var(--space-5);
  text-align: center;
}

.assessment-options {
  display: grid;
  gap: var(--space-3);
}

.assessment-option {
  /* 16px minimum: anything smaller makes iOS Safari zoom on tap. */
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  text-align: left;

  min-height: 48px;
  padding: var(--space-3) var(--space-4);

  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;

  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.assessment-option:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

.assessment-option:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
}

.assessment-option[aria-pressed="true"] {
  border-color: var(--brand-strong);
  background: var(--brand-tint);
  font-weight: 500;
}

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

.assessment-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-5);
}

.assessment-back {
  background: none;
  border: none;
  padding: var(--space-2);
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink-soft);
  cursor: pointer;
}

.assessment-back:hover { color: var(--ink); }
.assessment-back[hidden] { display: none; }

/* ── Disclaimer ─────────────────────────────────────────────── */

.assessment-disclaimer {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
}

/* ── Result: the screenshot card ────────────────────────────── */
/* Sized and composed to be captured in one screenshot and posted to a
   WhatsApp group. The subtle wordmark is what makes that traceable. */

.result-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.result-card__eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.result-card__headline {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--ink-heading);
  margin-bottom: var(--space-4);
}

.result-card__summary {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink);
  max-width: 34rem;
  margin: 0 auto var(--space-5);
}

.result-card__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.result-card__brand img { height: 22px; width: auto; }

/* ── "There is more below" cue ──────────────────────────────── */
/* The card + share row fill the viewport on phone and desktop, and the report
   sits ~1000px down. Without this, people read the free result and leave. */

.result-cue {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.result-cue__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: var(--brand-strong);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

.result-cue__btn:hover { background: var(--brand-hover); }

.result-cue__btn:focus-visible {
  outline: 2px solid var(--ink-heading);
  outline-offset: 3px;
}

.result-cue__chevron {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: result-cue-nudge 2.4s ease-in-out infinite;
}

/* A small, slow vertical nudge on the chevron only — enough to read as
   "scroll", well short of a bouncing icon. Stops entirely on hover and under
   reduced motion. */
@keyframes result-cue-nudge {
  0%, 70%, 100% { transform: translateY(0); }
  82%           { transform: translateY(3px); }
}

.result-cue__btn:hover .result-cue__chevron { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .result-cue__chevron { animation: none; }
}

/* ── Area breakdown ─────────────────────────────────────────── */

.result-areas {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.result-area__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
  font-size: var(--fs-body);
}

.result-area__label { color: var(--ink); }
.result-area__value { color: var(--ink-soft); font-size: var(--fs-small); }

.result-area__track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-alt);
  overflow: hidden;
}

.result-area__bar {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-strong);
}

/* ── Locked report + paywall ────────────────────────────────── */

.report-locked {
  position: relative;
  margin-top: var(--space-6);
}

.report-skeleton {
  /* Decorative only. The real report is not in this DOM — the API never sent
     it. Do not "optimise" by fetching the full report and hiding it. */
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.report-skeleton__section { margin-bottom: var(--space-5); }

.report-skeleton__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--ink-heading);
  margin-bottom: var(--space-3);
}

.report-skeleton__line {
  height: 0.85rem;
  border-radius: 4px;
  background: var(--surface-alt);
  margin-bottom: var(--space-2);
}

.report-skeleton__line:nth-child(3n) { width: 82%; }
.report-skeleton__line:nth-child(3n + 1) { width: 95%; }
.report-skeleton__line:nth-child(3n + 2) { width: 68%; }

.paywall {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.paywall__inner {
  width: 100%;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.paywall__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--ink-heading);
  margin-bottom: var(--space-3);
}

.paywall__copy {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
}

.paywall__price {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  color: var(--ink-heading);
  margin-bottom: var(--space-4);
}

.paywall__form { display: grid; gap: var(--space-3); text-align: left; }

.paywall__form input[type="text"],
.paywall__form input[type="email"],
.paywall__form input[type="tel"] {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-sans);
  /* 16px minimum, or iOS Safari zooms the page on focus. */
  font-size: var(--fs-body);
  color: var(--ink);
}

.paywall__form input:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 1px;
}

.paywall__consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.5;
}

.paywall__consent input {
  margin-top: 0.15rem;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--brand-strong);
}

.paywall__note {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

/* ── Unlocked report ────────────────────────────────────────── */

.report-full { margin-top: var(--space-6); }

.report-section { margin-bottom: var(--space-6); }

.report-section h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  color: var(--ink-heading);
  margin-bottom: var(--space-3);
}

.report-section p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.report-section strong { color: var(--ink-heading); }

/* ── Safety outcome ─────────────────────────────────────────── */
/* Never paywalled, never sold. Uses the teal secondary accent rather than the
   brand purple so it reads as care, not as another offer. */

.safety-note {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius);
  border: 1px solid var(--teal);
  background: rgba(var(--teal-rgb), 0.06);
}

.safety-note h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  color: var(--teal);
  margin-bottom: var(--space-3);
}

.safety-note ul { list-style: none; padding: 0; margin: var(--space-4) 0 0; }

.safety-note li {
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(var(--teal-rgb), 0.2);
  font-size: var(--fs-body);
  color: var(--ink);
}

/* ── Share ──────────────────────────────────────────────────── */

.result-share {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.result-share button,
.result-share a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.result-share button:hover,
.result-share a:hover { border-color: var(--brand); background: var(--brand-tint); }

/* ── Floating "take the test" pill (bottom-LEFT) ────────────── */
/* The bottom-right is fully allocated: the WhatsApp bubble with the "Agendar"
   pill parked 10px above it. This takes the opposite corner so neither moves. */

.assessment-cta {
  position: fixed;
  left: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
}

.assessment-cta[hidden] { display: none; }

.assessment-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--brand);
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink-heading);
  text-decoration: none;
  white-space: nowrap;
}

.assessment-cta__btn:hover { background: var(--brand-tint); }

/* One pulse on arrival, then still — "restrained motion" is a settled decision,
   and a permanently bouncing icon on a mostly-mobile audience is not that. */
.assessment-cta--enter .assessment-cta__btn {
  animation: assessment-pulse 1.1s ease-out 1;
}

@keyframes assessment-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .assessment-cta--enter .assessment-cta__btn { animation: none; }
}

@media (max-width: 480px) {
  .assessment-cta { left: 0.9rem; }
  .assessment-cta__btn { font-size: 0.9rem; padding: 0.55rem 0.95rem; }
}

/* ── Status / errors ────────────────────────────────────────── */

.assessment-status {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-body);
}

/* Both status helpers (assessment-result.js and assessment-runner.js) build the same
   wrapper: .assessment-status holding an optional spinner and .assessment-status__text.
   The static placeholders in the page markup mirror it so nothing flashes plain text
   before the script takes over. */
.assessment-status__text {
  margin: 0;
}

.assessment-status--busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Confirming a payment waits on the provider's webhook and can sit here for up to 45s.
   Static text for that long reads as a page that has stopped working. */
.assessment-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(var(--brand-rgb), 0.28);
  border-top-color: var(--brand-strong);
  animation: assessment-spin 0.9s linear infinite;
}

@keyframes assessment-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Still a visible "something is happening" marker, just not a spinning one. */
  .assessment-spinner {
    animation: none;
    border-top-color: var(--brand-strong);
    opacity: 0.85;
  }
}

/* ── Print: "Guardar como PDF" from any browser ─────────────── */

@media print {
  header,
  footer,
  .assessment-cta,
  .wsp-float,
  .mobile-cta,
  .result-share,
  .result-cue,
  .paywall,
  #sandbox-banner { display: none !important; }

  .report-skeleton { display: none !important; }

  body { background: #fff; }

  .assessment-page { max-width: none; padding: 0; }

  .result-card,
  .safety-note {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  .report-section { page-break-inside: avoid; }
  .report-section h2 { page-break-after: avoid; }
}