/* quote.duxels.com — on top of duxels-shared's chrome.css (the Worker links /shared/<version>/chrome/chrome.css after this file: the tokens --bg, --bg2, --fg, --mut, --line, --font, the
   header, the language menu and the footer; it is NOT duxels.com's mundo.css any more). What that big stylesheet gave the page without saying so (the page background, the body
   type, the resets, the skip link, the room under the fixed header) is below, in «the page's own base». Only the steps live after it. One column, mobile first (375 px), the
   colour of the chosen pillar is the accent of the whole form. */
/* ---- the page's own base (it used to come from duxels.com's mundo.css) ---------------------------------------------------------------------------------------------------- */
html { background: var(--bg); color-scheme: dark; -webkit-tap-highlight-color: transparent; }
.privacy-page { background: radial-gradient(ellipse at 70% 0%, var(--bg2), var(--bg) 42%) fixed; } /* chrome.css draws the header bar of this class */
body { margin: 0; background: transparent; color: var(--fg); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
main { position: relative; z-index: 1; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 60; }
.skip:focus, .skip:focus-visible { left: 12px; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
/* the room above the footer; the one under the fixed header (header 2) and beside the side menu is the package's: it puts margin-top: var(--dxh-h) and margin-left: var(--dxh-side-w) on <body> */
.quote-main { margin: 0 auto; padding: 32px 0 max(64px, env(safe-area-inset-bottom)); }

:root {
  --red: #f0392f;
  --green: #22b14c;
  --blue: #2a86ff;
  --white: #f2f5ff;
  --raised: rgba(18, 26, 51, 0.72);
  --soft: #c4cce0;
  --err: #ff8a80;
  --radius: 14px;
}
/* the ink on an accent is the night blue for all four: white on the red (3.9:1) and on the blue (3.5:1) is under WCAG AA, the dark ink is 4.8:1 or more */
.quote-main { --accent: var(--blue); --accent-ink: #0b1020; width: min(100% - 32px, 640px); }
.quote-main[data-pillar="red"] { --accent: var(--red); }
.quote-main[data-pillar="green"] { --accent: var(--green); }
.quote-main[data-pillar="blue"] { --accent: var(--blue); }
.quote-main[data-pillar="white"] { --accent: var(--white); }
.quote-main:focus { outline: none; }
.quote-main [hidden] { display: none !important; }

/* the heading and the progress: four segments that fill with the accent */
.q-head h1 { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -0.035em; line-height: 1.08; }
.q-head .q-intro { color: var(--soft); font-size: 1.05rem; margin-top: 12px; max-width: 38em; }
.progress { margin: 28px 0 8px; }
.progress ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.progress li { height: 4px; border-radius: 2px; background: var(--line); }
.progress li.done, .progress li[aria-current="step"] { background: var(--accent); }
.progress li[aria-current="step"] { box-shadow: 0 0 0 1px var(--accent); }
.progress .where { margin-top: 10px; color: var(--mut); font-size: 0.92rem; }

.step { margin-top: 20px; }
.step > h2 { font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.01em; }
.step > h2:focus { outline: none; }
/* the common header is fixed: the package gives <html> scroll-padding-top: var(--dxh-h), so a title that gets the focus already stops below it; this is only a little air */
.step > h2, .field textarea, .field input { scroll-margin-top: 16px; }
.step .lead { color: var(--soft); margin-top: 8px; }
.status { color: var(--mut); padding: 24px 0; }
.notice { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--raised); color: var(--soft); border-radius: 0 10px 10px 0; font-size: 0.95rem; }
.error { color: var(--err); margin-top: 8px; font-size: 0.95rem; }
.error:empty { display: none; }

/* buttons: the primary carries the accent; the rest are quiet */
.q-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 650; cursor: pointer; text-decoration: none; }
.q-primary { background: var(--accent); color: var(--accent-ink); }
.q-primary:hover { filter: brightness(1.08); }
.q-primary[disabled] { opacity: 0.55; cursor: progress; }
.q-quiet { background: transparent; color: var(--fg); border-color: var(--line); }
.q-quiet:hover { border-color: var(--fg); }
.q-link { background: none; border: 0; padding: 0; min-height: 44px; color: var(--mut); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.q-link:hover { color: var(--fg); }
.q-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
/* the focus ring is duxels.com's (white): an accent ring on the red pillar would read as an error */
.q-btn:focus-visible, .q-link:focus-visible, .choice:focus-visible, .quote-main input:focus-visible, .quote-main textarea:focus-visible {
  outline: 2px solid var(--fg); outline-offset: 3px; }

.restart { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 6px; color: var(--mut); font-size: 0.92rem; }

@media (prefers-reduced-motion: no-preference) {
  .step { animation: q-in 0.22s ease-out; }
  @keyframes q-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* step 1: the four pillars, then the four branches of the chosen one; «solo una página» and «no sé» stay quieter below */
.choices { display: grid; gap: 10px; margin-top: 18px; }
.choice { display: grid; gap: 4px; width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised);
  color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.choice:hover { border-color: rgba(232, 236, 248, 0.4); }
.choice .name { font-weight: 650; font-size: 1.05rem; line-height: 1.35; }
.choice .desc { color: var(--mut); font-size: 0.93rem; line-height: 1.45; }
.choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
[data-pillar="red"] { --c: var(--red); }
[data-pillar="green"] { --c: var(--green); }
[data-pillar="blue"] { --c: var(--blue); }
[data-pillar="white"] { --c: var(--white); }
.q-pillar { border-left: 5px solid var(--c); padding-left: 16px; }
.q-pillar .label { color: var(--c); font-size: 1.4rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; }
.q-pillar:hover { background: color-mix(in srgb, var(--c) 9%, var(--bg2)); }
.q-pillar-name .label { color: var(--accent); font-weight: 700; }
.type { grid-template-columns: 56px minmax(0, 1fr); align-items: center; column-gap: 14px; }
.type .text { display: grid; gap: 3px; }
.type .art { width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--bg)) 70%); }
.extras { margin-top: 28px; }
.extras .or { color: var(--mut); font-size: 0.92rem; }
.extras .choices { margin-top: 10px; }
.extra { background: transparent; }
@media (min-width: 640px) {
  .q-pillars { grid-template-columns: 1fr 1fr; }
  .q-pillar { min-height: 132px; align-content: start; }
  .extras .choices { grid-template-columns: 1fr 1fr; }
}
/* duxels.com's static pages set a fixed gradient with no colour under it: the colour, for the long phone pages */
html.quote-page { background-color: var(--bg); }

/* step 2: the chosen type with its «desde», and the fixed questions as chips (radios underneath, so the keyboard and screen readers get real controls) */
.chosen { margin-top: 12px; }
.chosen-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 1.1rem; font-weight: 650; }
.chosen-name .q-link { min-height: 0; font-size: 0.92rem; font-weight: 400; }
.from { display: grid; gap: 2px; margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); width: fit-content; max-width: 100%; }
.from-amount { font-size: 1.05rem; }
.from-note { color: var(--mut); font-size: 0.85rem; }
.chips { border: 0; margin: 26px 0 0; padding: 0; min-width: 0; }
.chips legend { padding: 0; font-weight: 650; font-size: 1.05rem; }
.chips .hint { color: var(--mut); font-size: 0.88rem; margin-top: 2px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--soft); line-height: 1.3; }
.chip:hover span { border-color: rgba(232, 236, 248, 0.45); color: var(--fg); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
.hint { color: var(--mut); font-size: 0.9rem; }

/* step 3: the idea, the follow-up questions, the brief */
.field { display: grid; gap: 6px; margin-top: 22px; }
.field label { font-weight: 650; font-size: 1.02rem; }
.field .hint { margin: 0; }
.field textarea, .field input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 12, 26, 0.7);
  color: var(--fg); font: inherit; line-height: 1.55; resize: vertical; }
.field textarea:hover, .field input:hover { border-color: rgba(232, 236, 248, 0.35); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field-foot { display: flex; justify-content: space-between; gap: 12px; }
.field-foot .error { margin: 0; }
.counter { margin-left: auto; color: var(--mut); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.idea-quote { margin: 18px 0 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent); color: var(--soft); white-space: pre-line; overflow-wrap: anywhere; }
.live { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--soft); }
.spinner { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); }
@media (prefers-reduced-motion: no-preference) { .spinner { animation: q-spin 0.9s linear infinite; } @keyframes q-spin { to { transform: rotate(360deg); } } }
.live:empty { margin: 0; }

/* step 4: the summary, the contact details, the thanks */
.summary { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.summary h3 { font-size: 1rem; color: var(--mut); font-weight: 600; }
.summary dl { margin: 6px 0 0; }
.sum-row { padding: 12px 0; border-top: 1px solid var(--line); }
.sum-row:first-child { border-top: 0; }
.sum-row dt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 650; }
.sum-row dt .q-link { min-height: 0; font-weight: 400; font-size: 0.9rem; }
.sum-row dd { margin: 6px 0 0; color: var(--soft); }
.sum-row ul { display: grid; gap: 4px; }
.sum-row .k { color: var(--mut); }
.brief-text { white-space: pre-line; overflow-wrap: anywhere; max-height: 14em; overflow: auto; }
.muted { color: var(--mut); }
.contact .opt { color: var(--mut); font-weight: 400; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { margin: 12px auto 0; max-width: 720px; padding: 0 16px; } /* one widget for the page, after #app; with interaction-only it shows nothing unless Cloudflare needs the visitor */
.consent { margin-top: 20px; color: var(--mut); font-size: 0.9rem; }
.consent a { color: #9bc7ff; text-underline-offset: 3px; }
.form-error { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 138, 128, 0.12); color: var(--err); }
.form-error:empty { display: none; }
.form-error:focus { outline: 2px solid var(--err); outline-offset: 2px; }
.folio-label { margin-top: 18px; color: var(--mut); }
.folio { font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 750; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--accent); user-select: all; overflow-wrap: anywhere; }

/* reduced motion: no entrance and no spinning (the wait still says it in words) */
@media (prefers-reduced-motion: reduce) {
  .step, .spinner { animation: none !important; }
  .quote-main *, .quote-main *::before, .quote-main *::after { transition: none !important; scroll-behavior: auto !important; }
}
/* read by screen readers, not shown (the step title already says it) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* a live region that waits for its words: in the page (so it is announced), with no box until then */
.notice:empty { padding: 0; margin: 0; border: 0; background: none; }