/* SyntaxFlow — the hubs and landings of Compras and Familia.
   ===========================================================================
   Loaded on top of base.css by the pages tools/build-px-landings.cjs writes.
   One colour per product, from px-tokens.css (loaded before this file; no
   colour is written here): the opening band takes the deep product colour
   flat, in both themes, like the worlds take theirs; on the page, text, links
   and buttons use the product colour for the theme (deep in light, pale in
   dark, with its own ink on a fill), and the rest is the site's paper and ink.
   Phone first (360 px); every state is a word and an icon, never colour alone.
   =========================================================================== */
.px{
  --pxc:var(--px-compras);                      /* the product colour on the page: text, links, buttons (deep in light, pale in dark) */
  --pxc-on:var(--px-compras-ink);               /* text on a --pxc fill */
  --pxc-band:var(--px-compras-deep);            /* the opening band: the deep colour in both themes */
  --pxc-band-ink:#ffffff; --pxc-band-ink2:rgba(255,255,255,.9);
}
.px-familia{ --pxc:var(--px-familia); --pxc-on:var(--px-familia-ink); --pxc-band:var(--px-familia-deep); }

/* icons are inline: base.css makes every svg a block */
.px-main svg{ display:inline-block; width:1.15em; height:1.15em; flex:0 0 auto; vertical-align:-.18em; max-width:none; }
.px-ar{ display:inline-block; transition:transform .2s cubic-bezier(.16,1,.3,1); }

/* ---------- buttons ---------- */
.px-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; min-height:48px; padding:10px 22px; border-radius:999px;
  border:1.5px solid var(--pxc); background:var(--pxc); color:var(--pxc-on); font:inherit; font-weight:650; font-stretch:108%; line-height:1.2;
  text-decoration:none; cursor:pointer; text-align:center; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.px-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -12px var(--pxc); color:var(--pxc-on); }
.px-btn:hover .px-ar{ transform:translateX(3px); }
.px-btn:active{ transform:translateY(0); box-shadow:none; }
.px-btn.ghost{ background:transparent; color:var(--pxc); border-color:currentColor; }
.px-btn.ghost:hover{ color:var(--pxc); box-shadow:none; background:color-mix(in srgb,var(--pxc) 8%,transparent); }
.px-btn:focus-visible{ outline:3px solid var(--pxc); outline-offset:3px; }

/* ---------- the opening band: problem on the left, the tool on the right ---------- */
.px-hero{ background:var(--pxc-band); color:var(--pxc-band-ink2); padding:28px 0 32px; position:relative; overflow:hidden; isolation:isolate; }
.px-hero::before{ content:""; position:absolute; inset:auto -20% -60% 40%; height:120%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent); }
.px-hero-in{ display:grid; gap:24px; align-items:start; }
.px-hero-copy{ min-width:0; }
.px-hero h1{ color:var(--pxc-band-ink); font-size:clamp(1.9rem,1.2rem + 3vw,3.4rem); line-height:1.02; letter-spacing:-.025em; font-stretch:120%; margin:0 0 .4em; max-width:20ch; }
.px-lead{ font-size:clamp(1.04rem,.98rem + .3vw,1.2rem); line-height:1.5; color:var(--pxc-band-ink2); max-width:52ch; margin:0 0 18px; }
.px-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; font-weight:640; font-stretch:110%; color:var(--pxc-band-ink); font-size:.95rem; }
.px-eyebrow svg{ width:22px; height:22px; }
.px-crumbs ol{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:4px 8px; font-size:.88rem; }
.px-crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--pxc-band-ink2); }
.px-hero a:not(.px-btn){ color:var(--pxc-band-ink); text-decoration-color:rgba(255,255,255,.55); }
.px-hero-copy :focus-visible{ outline-color:#fff; }
.px-badges{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.px-badges li{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); color:var(--pxc-band-ink); font-size:.88rem; font-weight:600; }

/* the tool card: the site's surface, so its controls are the site's own */
.px-tool{ background:var(--surface); color:var(--ink); border-radius:20px; padding:20px; box-shadow:0 24px 60px -30px rgba(0,0,0,.6); scroll-margin-top:80px; }
.px-tool-wrap{ min-width:0; scroll-margin-top:76px; }
.px-tool .px-tool-h{ font-size:1.3rem; margin:0 0 14px; }
.px-choices{ display:grid; gap:8px; margin:0 0 16px; }
.px-choice{ display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 14px; border-radius:12px; cursor:pointer;
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--rule); font-weight:560; line-height:1.3; transition:box-shadow .15s, background-color .15s; }
.px-choice:hover{ box-shadow:inset 0 0 0 1.5px var(--pxc); }
.px-choice input{ width:20px; height:20px; margin:0; flex:0 0 20px; accent-color:var(--pxc); }
.px-choice:has(input:checked){ background:color-mix(in srgb,var(--pxc) 10%,var(--surface)); box-shadow:inset 0 0 0 2px var(--pxc); }
.px-choice:has(input:focus-visible){ outline:3px solid var(--pxc); outline-offset:2px; }
.px-checks{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:4px; }
.px-checks li{ display:flex; align-items:flex-start; gap:12px; padding:8px 4px; border-bottom:1px solid var(--rule); }
.px-checks li:last-child{ border-bottom:0; }
.px-checks input{ width:20px; height:20px; margin:2px 0 0; flex:0 0 20px; accent-color:var(--pxc); }
.px-checks label{ line-height:1.4; cursor:pointer; }
.px-check-out{ margin:0 0 16px; padding:12px 14px; border-radius:12px; background:var(--surface-2); font-size:.94rem; }
.px-check-out p{ margin:0; }
.px-check-out ul{ margin:6px 0 6px; padding-left:1.2em; color:var(--ink-2); }
.px-check-n{ font-weight:620; }
.px-check-note{ color:var(--ink-3); font-size:.88rem; }
.px-field{ margin:0 0 16px; }
.px-field label,.px-label{ display:block; font-size:.92rem; font-weight:600; color:var(--ink-2); margin:0 0 6px; }
.px-field select{ width:100%; min-height:48px; }
.px-tool textarea{ width:100%; min-height:150px; margin:0 0 10px; }
.px-err{ margin:0 0 10px; padding:10px 12px; border-radius:10px; color:var(--fail); background:color-mix(in srgb,var(--fail) 9%,var(--surface)); font-weight:600; font-size:.94rem; }
.px-err::before{ content:"!"; display:inline-grid; place-items:center; width:1.3em; height:1.3em; margin-right:8px; border-radius:50%; background:var(--fail); color:var(--surface); font-weight:800; font-size:.8em; vertical-align:.08em; }
.px-ex-note{ margin:0 0 10px; font-size:.88rem; color:var(--ink-2); }
.px-ex-note::before{ content:"Ej."; display:inline-block; margin-right:6px; padding:0 6px; border-radius:4px; background:var(--wool-tint); color:var(--ink); font-size:.78rem; font-weight:700; }
html:not([lang^="es"]) .px-ex-note::before{ content:"Ex."; }
.px-acts{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.px-acts .px-btn{ flex:1 1 auto; }
.px-upload{ width:100%; min-height:56px; font-size:1.05rem; margin:0 0 6px; }
.px-hint{ margin:0 0 6px; font-size:.86rem; color:var(--ink-3); }
.px-or{ display:flex; align-items:center; gap:12px; margin:10px 0; color:var(--ink-3); font-size:.88rem; }
.px-or::before,.px-or::after{ content:""; flex:1; height:1px; background:var(--rule); }
.px-fine{ display:flex; gap:8px; align-items:flex-start; margin:0; font-size:.86rem; color:var(--ink-2); line-height:1.45; }
.px-fine svg{ margin-top:.12em; color:var(--pxc); }
.px-tool a:not(.px-btn){ color:var(--pxc); }

/* ---------- sections ---------- */
.px-sec{ padding:44px 0 0; }
.px-sec h2{ font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem); font-stretch:118%; margin:0 0 18px; max-width:30ch; }
.px-kicker{ display:inline-flex; align-items:center; gap:8px; margin:0 0 10px; padding:4px 10px; border-radius:999px; background:var(--wool-tint);
  color:var(--ink); font-size:.82rem; font-weight:650; }
.px-note{ margin:14px 0 0; font-size:.9rem; color:var(--ink-2); max-width:70ch; }

/* before → after */
.px-ba{ display:grid; gap:16px; }
.px-ba h3{ display:flex; align-items:center; gap:8px; font-size:1rem; margin:0 0 12px; color:var(--ink-2); font-stretch:105%; }
.px-before{ padding:18px; border-radius:18px; background:var(--paper-2); }
.px-after{ padding:18px; border-radius:18px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule), var(--e2); border-top:4px solid var(--pxc); }
.px-scraps{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.px-scraps li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; padding:10px 12px; border-radius:10px; background:var(--surface); box-shadow:var(--e1); font-size:.94rem; line-height:1.4; }
.px-scraps li:nth-child(odd){ transform:rotate(-.4deg); }
.px-scraps li:nth-child(even){ transform:rotate(.35deg); }
.px-tag{ display:inline-block; padding:1px 8px; border-radius:6px; font-size:.76rem; font-weight:700; letter-spacing:.01em; background:var(--steel-tint); color:var(--ink); white-space:nowrap; }
.px-msg{ margin:0; padding:16px 18px; border-radius:12px; background:var(--surface); box-shadow:var(--e1); border-left:4px solid var(--rule-2); font-size:1.02rem; line-height:1.55; }
.px-msg p{ margin:0; }
.px-timeline{ list-style:none; margin:0 0 14px; padding:0 0 0 18px; position:relative; display:grid; gap:12px; }
.px-timeline::before{ content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px; background:var(--rule-2); border-radius:2px; }
.px-timeline li{ position:relative; display:grid; gap:1px; }
.px-timeline li::before{ content:""; position:absolute; left:-18px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 3px var(--pxc); }
.px-tl-d{ font-size:.84rem; font-weight:650; color:var(--ink-2); }
.px-tl-t{ font-weight:600; line-height:1.35; }
.px-tl-s{ display:inline-flex; gap:6px; align-items:flex-start; font-size:.84rem; color:var(--ink-3); }
.px-states{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px; }
.px-st{ display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border-radius:10px; font-size:.92rem; font-weight:560; line-height:1.4; background:var(--surface-2); color:var(--ink); }
.px-st svg{ margin-top:.1em; }
.px-st-warn svg{ color:var(--warn); }
.px-st-miss svg{ color:var(--ink-3); }
.px-st-conflict svg{ color:var(--heat); }
.px-st-ok svg{ color:var(--pass); }
.px-draft{ padding:14px 16px; border-radius:12px; border:1.5px dashed var(--rule-2); background:var(--surface-2); }
.px-draft p{ margin:0; }
.px-draft-h{ display:flex; gap:8px; align-items:center; font-weight:650; margin-bottom:4px !important; }
.px-draft-to{ font-size:.86rem; color:var(--ink-3); margin-bottom:8px !important; }
.px-draft-b{ font-size:.95rem; line-height:1.55; color:var(--ink-2); }
.px-draft-b p + p{ margin-top:.6em !important; }
.px-props{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; }
.px-prop{ display:grid; gap:4px; padding:12px 14px; border-radius:12px; background:var(--surface-2); box-shadow:inset 3px 0 0 var(--k,var(--pxc)); }
.px-prop b{ font-size:1.02rem; font-stretch:106%; }
.px-prop .px-tag{ justify-self:start; }
.px-prop .px-st{ padding:6px 8px; background:color-mix(in srgb,var(--warn) 10%,var(--surface)); }
.px-when{ color:var(--ink-2); font-size:.94rem; }
.px-src{ display:inline-flex; gap:6px; align-items:flex-start; font-size:.84rem; color:var(--ink-3); }
.px-src svg{ margin-top:.12em; }
.px-prop-ev{ --k:var(--pxc); } .px-prop-task{ --k:var(--alu); } .px-prop-bring{ --k:var(--oak); } .px-prop-day{ --k:var(--glass); } .px-prop-doubt{ --k:var(--warn); }
.px-who{ font-size:.86rem; color:var(--ink-2); }
.px-who.px-st{ padding:4px 8px; justify-self:start; font-size:.84rem; background:var(--surface); }
.px-weekbox{ padding:18px; border-radius:18px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule), var(--e2); border-top:4px solid var(--pxc); }
.px-week-h{ display:flex; gap:8px; align-items:center; margin:0 0 12px; font-weight:650; }
.px-week{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.px-week > li{ display:grid; gap:8px; padding:12px 0; border-top:1px solid var(--rule); }
.px-week ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.px-day{ margin:0; font-size:.95rem; font-stretch:104%; color:var(--ink-2); }
.px-none{ margin:0; color:var(--ink-3); font-size:.9rem; }

/* what it answers, how it works */
.px-solves{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.px-solves li{ padding:18px; border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); }
.px-solves h3{ font-size:1.08rem; margin:10px 0 4px; }
.px-solves p{ margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.5; }
.px-solve-ico{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; background:color-mix(in srgb,var(--pxc) 12%,var(--surface)); color:var(--pxc); }
.px-solve-ico svg{ width:22px; height:22px; }
.px-steps{ list-style:none; counter-reset:s; margin:0; padding:0; display:grid; gap:12px; max-width:760px; }
.px-steps li{ counter-increment:s; display:flex; gap:14px; align-items:flex-start; line-height:1.5; }
.px-steps li::before{ content:counter(s); flex:0 0 34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--pxc); color:var(--pxc-on); font-weight:700; font-size:.95rem; }
.px-steps li span{ padding-top:4px; }

/* cards to the landings */
.px-cards{ display:grid; gap:14px; }
.px-card{ display:flex; flex-direction:column; gap:6px; padding:20px; border-radius:18px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule);
  color:var(--ink); text-decoration:none; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
.px-card h3{ margin:0; font-size:1.15rem; color:var(--pxc); line-height:1.2; }
.px-card p{ margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.5; }
.px-card-go{ margin-top:auto; padding-top:8px; font-weight:650; color:var(--pxc); }
.px-card:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--pxc), var(--e2); }
.px-card:hover .px-ar{ transform:translateX(3px); }
.px-card:focus-visible{ outline:3px solid var(--pxc); outline-offset:3px; }

/* lists: what you take away, what it does not do */
.px-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:820px; }
/* rows with a hairline between them: the list reads as one block across its column */
.px-list li{ display:flex; gap:12px; align-items:flex-start; line-height:1.5; padding:12px 0; border-top:1px solid var(--rule); }
.px-list li:last-child{ border-bottom:1px solid var(--rule); }
.px-list svg{ margin-top:.2em; width:1.25em; height:1.25em; }
.px-list-ok svg{ color:var(--pass); }
.px-list-no svg{ color:var(--ink-3); }

/* privacy */
.px-privacy{ display:flex; gap:16px; align-items:flex-start; padding:22px; border-radius:20px; background:color-mix(in srgb,var(--pxc) 9%,var(--surface)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pxc) 25%,transparent); }
.px-privacy h2{ font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem); margin:0 0 8px; }
.px-privacy p{ margin:0 0 8px; color:var(--ink-2); max-width:70ch; }
.px-privacy p:last-child{ margin:0; }
.px-privacy-ico{ flex:0 0 44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--pxc); color:var(--pxc-on); }
.px-privacy-ico svg{ width:22px; height:22px; }

/* questions */
.px-faq{ display:grid; gap:10px; max-width:820px; }
.px-faq details{ margin:0; padding:0; border-radius:14px; border:1px solid var(--rule); background:var(--surface); }
.px-faq summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:12px 16px; font-weight:620; line-height:1.35; border-radius:14px; }
.px-faq summary::-webkit-details-marker{ display:none; }
.px-faq summary::after{ content:""; flex:0 0 10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin:-4px 4px 0 0; transition:transform .2s; color:var(--pxc); }
.px-faq details[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
.px-faq details[open] summary{ margin:0; }
.px-faq details p{ margin:0; padding:0 16px 16px; color:var(--ink-2); line-height:1.55; }
.px-faq summary:focus-visible{ outline:3px solid var(--pxc); outline-offset:2px; }

/* public sources */
.px-sources{ list-style:none; margin:0 auto; padding:0; display:grid; gap:10px; max-width:640px; }   /* under 80 characters a line at 768 px too (MEASURE), centred in its column */
.px-sources li{ display:grid; gap:2px; padding:12px 14px; border-radius:12px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); }
.px-sources a{ display:inline-flex; align-items:center; gap:6px; font-weight:620; color:var(--ink); }
.px-sources a svg{ width:.95em; height:.95em; color:var(--ink-3); }
.px-sources span{ color:var(--ink-2); font-size:.92rem; }

/* next step and related */
.px-next{ padding-top:56px; }
.px-next-in > div{ min-width:0; }
.px-next-in{ display:grid; gap:16px; align-items:center; padding-top:28px !important; padding-bottom:28px !important; border-radius:22px;
  background:color-mix(in srgb,var(--pxc) 12%,var(--surface)); }
.px-next h2{ margin:0 0 6px; }
.px-next p{ margin:0; color:var(--ink-2); }
.px-next .px-btn{ justify-self:start; }
.px-rel{ padding-bottom:64px; }
.px-cards-sm .px-card{ padding:16px 18px; }
.px-cards-sm .px-card h3{ font-size:1.02rem; }

/* ---------- wider screens ---------- */
@media (min-width:640px){
  /* the closing box keeps text and button side by side from tablets up: one column of
     short lines hugged the left at 640-959 px (audit-layout ASYM, 14-10-2026) */
  .px-next-in{ grid-template-columns:minmax(0,1fr) auto; }
  .px-next .px-btn{ justify-self:end; }
  .px-solves{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .px-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .px-sec{ padding-top:60px; }
  .px-tool{ padding:24px; }
}
@media (min-width:960px){
  .px-hero{ padding:56px 0 64px; }
  .px-hero-in{ grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:48px; align-items:center; }
  /* the two boxes end level (tools/audit-layout.mjs ALIGN): the shorter one keeps its content at the top */
  .px-ba{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:24px; align-items:stretch; }
  /* a section that is a column of reading (a list, the questions, the sources, the steps) is one
     centred column, heading included, of at most about 78 characters a line, so the page sits
     straight on a wide screen instead of hugging the left (ASYM, MEASURE) */
  .px-read > .wrap{ max-width:calc(680px + 56px); }
  .px-solves{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .px-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .px-next-in{ grid-template-columns:minmax(0,1fr) auto; padding:32px 40px !important; }
  .px-next .px-btn{ justify-self:end; }
  .px-sec{ padding-top:76px; }
}
@media (max-width:640px){
  .px-next-in{ margin:0 16px; border-radius:18px; padding-left:18px !important; padding-right:18px !important; }
  .px-acts .px-btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .px-btn,.px-card,.px-ar,.px-choice,.px-faq summary::after{ transition:none; }
  .px-scraps li{ transform:none !important; }
}
@media print{
  .px-hero{ background:#fff !important; color:#000; }
  .px-hero h1,.px-eyebrow,.px-lead{ color:#000 !important; }
  .px-tool-wrap,.px-next,.px-badges{ display:none !important; }
  .px-faq details{ border:0; }
}