/* ============================================================
   AUDITORÍA — the free web audit funnel (/auditoria/).
   Loads on top of the root styles.css and adds only what the kit lacks:
   the questionnaire screen, the sample card, the score dials, the check
   tags, the locked Pro block, and a print sheet for "Descargar PDF".

   House rules kept: colour from the kit tokens only, hierarchy by tone
   (--ink-2), never opacity; no box-shadows; space above a .pill lives on
   the element before it. The bands reuse the .lm-* landing shells.
   ============================================================ */

/* ── Orphans: no line ends on one lonely word ─────────────────
   Headings balance their lines; running text only fixes the last one
   ("pretty"). This sheet loads on the /auditoria/ pages alone. */
.lm-band__title, .cta__title, .get__name, .step__name,
.au-step__q, .au-hero__title, .au-hero__verdict, .au-gate__title,
.au-pro__title, .au-score__name, .au-quick__title, .au-ia__title,
.au-card__big, .au-dash__title { text-wrap: balance; }
p, li, figcaption, label, .au-prob__title, .au-check__label { text-wrap: pretty; }

/* The hero title here is two long questions beside a picture. The kit's
   5.2vw size ran it to five lines on a laptop (owner, 28 Sep). */
.lm-hero__title { font-size: clamp(32px, 3.7vw, 50px); }

/* ── Landing: three report sheets in the hero ──────────────────
   Captures of the real report (print sheet) for three made-up businesses,
   fanned like printed PDFs. All three share one grid cell; the back two
   turn and slide out from under the front one. Paper edges are a hairline
   of ink, never a shadow (the kit has none).
   THE FOOT OF THE SHEETS GOES UNDER THE ARC (owner, 28 Sep). The figure
   pulls itself down through the hero's bottom padding (-var(--band)), so it
   ends on the hero's edge; the stack is absolute and taller than the
   figure, so its last quarter runs past that edge. The yellow band comes
   later in the page and is positioned, so it and its arc paint over the
   overflow: nothing needs clipping. --docs-show is the share of a sheet
   that stays visible.
   The turned sheets can spill sideways past a laptop's edge. overflow-x:
   clip on the hero trims that with no scrollbar and, unlike hidden, leaves
   the y axis free to overflow. */
.lm-hero { overflow-x: clip; }
/* The sheet width is read in cqi (the hero grid's width), not %: a % inside
   min-height resolves against HEIGHT, which left the phone view one sliver
   tall. */
.lm-hero__grid { container-type: inline-size; }
.au-docs {
  --docs-w: min(76cqi, 330px);
  --docs-show: 0.72;
  position: relative;
  align-self: stretch;
  min-height: calc(var(--docs-w) * 1.4144 * var(--docs-show));
  margin: 8px 0 calc(-1 * var(--band));
}
.au-docs__stack {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  width: var(--docs-w);
  translate: -50% 0;
}
@media (min-width: 900px) {
  .au-docs { --docs-w: min(40cqi, 470px); margin-top: 0; }
}
.au-doc {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--white);
}
.au-doc--3 { transform: translate(15%, 3%) rotate(6deg); }
.au-doc--2 { transform: translate(-15%, 2%) rotate(-5deg); }
.au-doc--1 { transform: rotate(-1deg); }

/* ── Landing bands ──────────────────────────────────────────── */
/* Three things, each with its report drawing. Phone: drawing left of the
   words. From 760px: three columns, drawing on top, centred. */
.au-gets {
  display: grid;
  gap: 18px;
  margin: clamp(22px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}
.au-gets li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.au-get__art { display: block; width: 100%; height: auto; }
@media (min-width: 760px) {
  .au-gets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
  .au-gets li { grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: center; align-items: start; }
  .au-get__art { width: min(100%, 200px); margin-inline: auto; }
}
/* "Con tu reporte, podrás": the same row, with the report's small box
   icons and one line each, so it reads lighter than the band above. */
.au-gets--do li { grid-template-columns: 72px minmax(0, 1fr); }
.au-gets--do .get__name { margin: 0; }
@media (min-width: 760px) {
  .au-gets--do li { grid-template-columns: minmax(0, 1fr); }
  .au-gets--do .au-get__art { width: min(100%, 112px); }
}

/* ── The questionnaire ──────────────────────────────────────── */
/* It takes over the viewport while the URL hash is #empezar, so the browser's
   back button closes it. Cream ground, one question per screen. */
.au-quiz {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  background: var(--cream);
  color: var(--ink);
}
.au-quiz[hidden] { display: none; }
body.au-quiz-open { overflow: hidden; }

.au-quiz__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: var(--wrap);
  margin: 0 auto;
  padding: 18px 0;
}
.au-quiz__logo {
  display: block;
  width: 150px;
  height: 16px;
  background-color: var(--ink);
  -webkit-mask: url("/assets/logo-horizontal.svg") no-repeat left center / contain;
          mask: url("/assets/logo-horizontal.svg") no-repeat left center / contain;
}
.au-quiz__exit {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.au-quiz__body {
  width: min(560px, 100% - 2 * var(--edge));
  margin: 0 auto;
  padding: clamp(8px, 3vh, 40px) 0 64px;
}
.au-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--hair);
  overflow: hidden;
}
.au-progress__fill {
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 240ms ease;
}
.au-progress__label {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.au-step { margin-top: clamp(24px, 5vh, 48px); }
.au-step[hidden] { display: none; }
.au-step__q {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.au-step__q:focus { outline: none; } /* focused by script so a screen reader hears the new question */
.au-step__help {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.au-fields { margin-top: 26px; display: grid; gap: 18px; }
.au-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}
.au-field .au-opt { font-weight: 400; color: var(--ink-2); }
.au-input,
.au-select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  font: inherit;
  font-size: 16px; /* 16 is the iOS floor: less zooms the page on focus */
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink-2);
  border-radius: 10px;
}
.au-input:focus-visible,
.au-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.au-choices { margin-top: 26px; display: grid; gap: 10px; }
.au-choice {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 18px;
  font: inherit;
  font-size: 17px;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 140ms ease;
}
.au-choice:hover,
.au-choice:focus-visible { background: var(--yellow); outline: none; }
.au-choice[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.au-step__acts {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.au-step__acts .pill { cursor: pointer; }
.au-step__acts .pill:not(.pill--quiet) { border: 0; }
.au-step__acts .pill:disabled { cursor: wait; }
.au-back {
  padding: 0;
  font: inherit;
  font-size: 15px;
  color: var(--ink-2);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.au-error {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--pink);
  font-size: 15px;
}
.au-error[hidden] { display: none; }
.au-turnstile { margin-top: 22px; min-height: 0; }
.au-legal {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.au-legal a { color: inherit; }

/* ── Dials (landing sample + dashboard) ─────────────────────── */
.au-dials {
  display: flex;
  justify-content: space-around;
  gap: 16px;
}
.au-dial { text-align: center; }
.au-dial__ring {
  --size: 132px;
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--ink) calc(var(--v) * 1%), var(--hair) 0);
}
.au-dial__ring::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--bg, var(--white));
}
.au-dial__n {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: calc(var(--size) * 0.3);
  line-height: 1;
}
.au-dial__name { margin-top: 10px; font-weight: 500; }
.au-dial__verdict {
  display: inline-block;
  margin: 4px 0 2px;
  padding: 2px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.au-dial__of { font-size: 13px; color: var(--ink-2); }

/* ── Check rows with C's tags ───────────────────────────────── */
.au-checks { margin: 0; padding: 0; list-style: none; }
.au-check {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
}
.au-check__label { font-size: 15px; }
.au-check > .au-fix { grid-column: 1 / -1; }

/* ── "Cómo mejorarlo" ──
   Every point to fix is one line; what we saw and what to do wait behind
   this closed <details> (owner, 28 Sep). Native, so it opens with script
   blocked. No author display on .au-fix, so the UA [hidden] rule still
   works for the quick win's box. The chevron is a real svg (the FAQ's
   pattern): generated content would be read out. */
.au-fix__sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.au-fix__sum::-webkit-details-marker { display: none; }
.au-fix__sum:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.au-fix__chev { flex: none; width: 16px; height: 16px; transition: transform 160ms ease; }
.au-fix[open] > .au-fix__sum .au-fix__chev { transform: rotate(180deg); }
.au-fix__body {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cream);
}
.au-fix__seen {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.au-fix__do { font-size: 15px; line-height: 1.45; color: var(--ink); }
.au-fix__do + .au-fix__seen { margin-top: 8px; }
.au-tag {
  min-width: 70px;
  padding: 3px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
}
.au-tag--g { background: var(--ink); color: var(--cream); }
.au-tag--a { background: var(--yellow); }
.au-tag--r { background: var(--pink); }
.au-tag--n,
.au-tag--x { background: transparent; color: var(--ink-2); border-color: var(--ink-2); }

/* ── The dashboard, in bands ────────────────────────────────────
   Visual pass, 27 Sep: one cream sheet of thin outlines where nothing led.
   Now the landing's grammar: a hero that says the result in words, the
   scores on yellow, the problems on white, the checks on cream, arcs where
   the ground changes. Fills and weight carry the hierarchy, not more lines. */
/* Centred in every state: waiting, failed and done (owner, 28 Sep: left
   aligned, the report hero left most of a wide screen empty). */
.au-hero .wrap { text-align: center; }
.au-hero .marker { margin-bottom: 10px; }
.au-hero__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.au-hero__title > span { display: block; }
/* The verdict wears the kit's green promise face, one step smaller than the
   domain so the site stays the subject. */
.au-hero__verdict {
  margin-top: 10px;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.15;
  max-width: 24ch;
  margin-inline: auto;
}
.au-hero__verdict:empty { display: none; }
.au-hero__sub { margin-top: 12px; color: var(--ink-2); }
.au-hero__sub:empty { display: none; }
#auReport[hidden] { display: none; }

.au-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.au-acts[hidden] { display: none; }
.au-acts .pill { cursor: pointer; }
.au-acts .pill:not(.pill--quiet) { border: 0; }
.au-copied { font-size: 13px; color: var(--ink-2); align-self: center; }
.au-hero .au-acts { justify-content: center; }
.au-note {
  margin-top: 18px;
  padding: 10px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  font-size: 14px;
  line-height: 1.45;
}

/* Scores: two white cards on the yellow band, dial left, words right. */
.au-scores__grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .au-scores__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.au-score {
  --bg: var(--white); /* the dial's inner disc */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: center;
  padding: var(--card-pad);
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
}
.au-score .au-dial__ring { --size: clamp(104px, 11vw, 150px); margin: 0; }
.au-score__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
}
.au-score__q { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
/* The verdict pill: filled, and filled the way the row tags are, so "Bien"
   up here and "OK" down there are visibly the same kind of good. */
.au-verdict {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
}
.au-verdict:empty { display: none; }
.au-verdict--g { background: var(--ink); color: var(--cream); }
.au-verdict--a { background: var(--yellow); }
.au-verdict--r { background: var(--pink); }
/* The tally under the cards: every tag on the page, counted. */
.au-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  font-size: 14px;
}
.au-tally:empty { display: none; }
.au-tally .au-tag { min-width: 0; padding: 4px 10px; font-size: 12px; }
.au-tally__of { color: var(--ink-2); }

/* Problems: three big numbered cards. */
.au-probs__list {
  display: grid;
  gap: 14px;
  margin: clamp(22px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}
/* align-items: start, so opening one card's "Cómo mejorarlo" grows that
   card alone instead of stretching the whole row. */
@media (min-width: 1000px) { .au-probs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; } }
.au-prob {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--card-pad);
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
}
.au-prob__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* The number, and under it the row's tag: FALTA is a sure miss, REVISAR a
   doubt, and the card says which. */
.au-prob__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.au-prob__lead .au-tag { min-width: 0; }
/* One drawing per box of checks (SUB_OF in report.js), six in all. */
.au-prob__icon { flex: none; width: clamp(64px, 6vw, 84px); height: auto; }
.au-prob__n {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: 1;
}
.au-prob__title { font-size: 19px; font-weight: 500; line-height: 1.35; }
.au-prob .au-fix { margin-top: 4px; }
.au-prob--ok { justify-content: center; }

/* ── The WhatsApp gate (result first, 28 Sep) ──
   Three blurred cards behind a white form. The cards are decoration: the
   API does not send the problems until the gate is passed. Every block here
   sets display, so each carries its own [hidden] rule. */
.au-probs__list[hidden],
.au-gate[hidden],
.au-ask[hidden] { display: none; }
.au-gate {
  position: relative;
  margin-top: clamp(22px, 3vw, 36px);
  display: grid;
}
.au-gate__peek {
  grid-area: 1 / 1;
  display: grid;
  gap: 14px;
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
@media (min-width: 1000px) { .au-gate__peek { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.au-gate__fake {
  padding: var(--card-pad);
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  min-height: 150px;
}
.au-gate__fake span { font-family: var(--font-display); font-size: 48px; line-height: 1; }
.au-gate__fake i { display: block; height: 10px; margin-top: 12px; border-radius: 5px; background: var(--hair); }
.au-gate__fake i:nth-child(3) { width: 70%; }
.au-gate__form {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  position: relative;
  width: min(100%, 520px);
  margin: 24px 0;
  padding: var(--card-pad);
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
}
.au-gate__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.15;
}
.au-gate__sub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.au-gate__form .au-fields { margin-top: 18px; }
.au-gate__acts { margin-top: 20px; }
.au-gate__acts .pill { border: 0; cursor: pointer; }

/* ── Two optional questions after unlocking ── */
.au-ask {
  margin-top: clamp(18px, 2.4vw, 28px);
  padding: var(--card-pad);
  border: 2px dashed var(--ink);
  border-radius: 20px;
  background: var(--white);
}
.au-ask__q { margin-top: 16px; font-weight: 500; }
.au-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.au-choice--chip { width: auto; padding: 9px 14px; font-size: 15px; border-radius: 999px; }
.au-ask__acts { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.au-ask__acts .pill { border: 0; cursor: pointer; }

/* The AI read: one ink card in its own white band. */
.au-ia {
  max-width: 760px;
  margin-top: clamp(20px, 3vw, 32px);
  padding: var(--card-pad);
  border: 2px solid var(--ink);
  border-radius: 20px;
}
.au-ia .au-ia__title { margin-top: 0; }

/* The quick win is a band of its own now, on yellow: chip, the fix as the
   headline, and "Lo que vimos" behind a click. */
.au-quick .wrap > * { max-width: 760px; }
.au-quick h2.au-chip { font-family: inherit; line-height: 1.4; }
.au-quick .au-fix { margin-top: 18px; }
.au-quick .au-fix__body { background: var(--white); }
.au-chip {
  display: inline-block;
  padding: 3px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.au-chip--ink { border-color: var(--cream-2); color: var(--cream); }
.au-quick__title,
.au-ia__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
}
.au-ia__title em,
.au-ia__meta em { font-style: normal; color: var(--yellow); }
.au-ia__meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--cream-2);
}
.au-ia__body { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--cream-2); }

/* Checks: one band per score, one column at a reading measure. */
.au-points .lm-intro { margin-bottom: clamp(14px, 2vw, 22px); }

/* A band's content at a reading measure, with one drawing in the empty
   right side on desktop (owner, 28 Sep). Phones get no drawing: the column
   already fills the screen. */
.au-split__art { display: none; }
@media (min-width: 1000px) {
  .au-split {
    display: grid;
    grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
  }
  .au-points .au-split { align-items: start; }
  .au-split__art {
    display: block;
    justify-self: center;
    width: min(100%, 340px);
    height: auto;
  }
  .au-points .au-split__art { position: sticky; top: calc(var(--nav-h, 64px) + 32px); }
}
/* The white band's boxes step to cream, so they still read as boxes. */
.au-points.mode-white .au-box { background: var(--cream); }
.au-points.mode-white .au-fix__body { background: var(--white); }

/* Pro sits alone at the foot, at a reading measure. */
.au-pro-band .au-pro { max-width: 720px; margin: 0 auto; }
.au-pro[hidden] { display: none; }

/* The failure state reuses these two. */
.au-card__big {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
}
.au-card__body { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* ── The six boxes (grouped checks) ──
   Native <details>: opens by itself when something inside needs work
   (report.js), so the eye lands on the gaps and green boxes stay folded. */
.au-box {
  margin-top: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
}
.au-box__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.au-box__head::-webkit-details-marker { display: none; }
.au-box__head::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}
.au-box[open] > .au-box__head::after { transform: rotate(-135deg) translate(-2px, -2px); }
.au-box__title { flex: 1; font-weight: 500; font-size: 16px; line-height: 1.3; }
.au-box__count {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--yellow);
  font-size: 12px;
  font-weight: 500;
}
.au-box__count.is-all { background: var(--ink); color: var(--cream); }
.au-box .au-checks { padding: 0 16px 6px; border-top: 1px solid var(--hair); }
.au-box .au-check:last-child { border-bottom: 0; }
/* The processing and failure states share the head and replace the grid. */
/* Centred under the centred hero. The steps stay a left-aligned list,
   centred as one block, so the dots line up. Small on purpose (owner,
   28 Sep: the 22px black dots read as giant buttons). */
.au-wait { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 460px; }
.au-wait[hidden] { display: none; }
.au-wait .au-progress { height: 4px; margin-bottom: 22px; }
.au-wait .au-progress__fill { transition: width 400ms linear; }
.au-wait__note { margin-top: 20px; font-size: 13px; color: var(--ink-2); }
.au-wait__steps {
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  text-align: left;
}
.au-wait__step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-2);
}
.au-wait__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink-2);
  border-radius: 50%;
}
.au-wait__step.is-on { color: var(--ink); }
.au-wait__step.is-on .au-wait__dot { border-color: var(--ink); background: var(--yellow); }
.au-wait__step.is-done .au-wait__dot { border-color: var(--ink); background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .au-wait__step.is-on .au-wait__dot { animation: au-pulse 1s ease-in-out infinite alternate; }
}
@keyframes au-pulse { to { background: var(--cream); } }

/* ── Pro: locked (A) and unlocked ───────────────────────────── */
.au-pro {
  padding: var(--card-pad);
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--white);
}
.au-pro__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15;
}
.au-pro__sub { margin-top: 6px; color: var(--ink-2); }
.au-pro__peek {
  position: relative;
  margin-top: 18px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
/* The sample behind the lock is decorative markup, blurred. It is
   aria-hidden: a screen reader gets the list below, which says the same
   thing in words. */
.au-pro__fake { padding: 14px 16px; filter: blur(4px); user-select: none; }
.au-pro__fake div {
  height: 10px;
  margin: 10px 0;
  border-radius: 5px;
  background: var(--hair);
}
.au-pro__fake div:nth-child(3n) { width: 60%; }
.au-pro__fake div:nth-child(3n + 1) { width: 85%; }
.au-pro__lock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  font-weight: 500;
}
.au-pro .plan__list { margin-top: 18px; }
.au-pro__acts { margin-top: 22px; text-align: center; }
.au-pro__acts + .au-pro__sub { text-align: center; }
.au-pro__content { margin-top: 16px; font-size: var(--fs-body); line-height: 1.55; }
.au-pro__content h3 { font-family: var(--font-display); font-size: 22px; margin: 1.2em 0 0.4em; }
.au-pro__content ul { padding-left: 1.2em; }
.au-pro__content p + p,
.au-pro__content p + ul,
.au-pro__content ul + p { margin-top: 0.8em; }

/* ── Pay page ───────────────────────────────────────────────── */
.au-pay { max-width: 620px; }
.au-dash__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.au-dash__sub { margin-top: 8px; color: var(--ink-2); }
.au-pay .lm-offer { margin-top: 24px; }
.au-pay__acts { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; }
.au-pay__acts .pill--quiet { color: var(--ink); }
.au-pay__acts [hidden] { display: none; } /* .pill sets display, which beats the UA [hidden] rule */
.au-code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  padding: 1px 6px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--cream);
}
.au-back-link { display: inline-block; margin-top: 24px; color: var(--ink-2); }

/* ── Print: "Descargar PDF" is window.print() over this sheet ─
   Bands keep their grounds (print-color-adjust), arcs and chrome drop. */
@media print {
  .nav, .foot, .au-acts, .au-pro-band .au-pro, .au-noprint, .arc { display: none !important; }
  .band { padding-block: 14px !important; }
  .au-score, .au-prob, .au-ia, .au-check, .au-box, .au-fix { break-inside: avoid; }
  .au-box .au-checks { display: block !important; }
  .au-scores, .au-quick, .au-ia, .au-score, .au-prob, .au-dial__ring, .au-fix__body,
  .au-tag, .au-verdict, .au-box__count {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .au-print-foot { display: block !important; margin-top: 18px; font-size: 11px; color: #444; }
}
.au-print-foot { display: none; }