/* Prototype layout, following mockup 1F Silencio. Everything visual comes from the tokens and components in /brand/. */

/* The commercial site is light only. Dark bands stay dark through .on-ink, which sets its own scheme. */
:root { color-scheme: only light; }

/* ---------- Header: menu on the left, name in the middle, over the film while it is on screen ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--prx-z-header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--prx-space-6);
  padding: max(0.25rem, env(safe-area-inset-top)) var(--prx-layout-margin) 0.25rem;
  background: var(--prx-color-ink);
  color: var(--prx-color-paper);
}
:root[data-palette="azul"] .site-header { background: var(--prx-color-azul-ink); color: var(--prx-color-azul-paper); }
/* Over the film the bar is this layer. initHeader sets --bar-fill from the scroll position, so there is no timed transition to fall behind a fast scroll. */
.is-ready .site-header:not(.is-solid)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--prx-color-ink); opacity: var(--bar-fill, 0); pointer-events: none; }
:root[data-palette="azul"] .site-header:not(.is-solid)::before { background: var(--prx-color-azul-ink); }
.is-ready .site-header:not(.is-solid) { background: transparent; color: #fff; }
.site-header .brandlink { grid-column: 2; grid-row: 1; }
.site-nav { grid-column: 1; grid-row: 1; display: flex; gap: clamp(1rem, 3vw, 3rem); }
.site-nav a, .site-lang {
  display: inline-flex;
  align-items: center;
  min-height: var(--prx-layout-target);
  font-size: var(--prx-size-xs);
  font-weight: 400;
  letter-spacing: var(--prx-track-caps);
  text-transform: uppercase;
  border-bottom: var(--prx-border-hair) solid transparent;
  transition: border-color var(--prx-dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .site-nav a:hover, .site-lang:hover { border-bottom-color: currentColor; } }
.site-nav a[aria-current] { border-bottom-color: currentColor; }
.site-tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; }
.site-lang { min-width: var(--prx-layout-target); justify-content: flex-end; }
.site-header :focus-visible { outline-color: currentColor; }

/* The capitals of the menu need more room: below this width it goes under the name. */
@media (max-width: 1000px) {
  :root { --prx-layout-header: 5.5rem; }
  .site-header { grid-template-columns: 1fr auto; padding-block: 0; justify-items: start; }
  .site-header .brandlink { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .site-nav { grid-column: 1; grid-row: 2; }
  .site-tools { grid-column: 2; grid-row: 2; }
}

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--prx-space-6); padding-inline: var(--prx-layout-margin); font-size: var(--prx-size-ctl); line-height: 1.5; background: var(--prx-color-ink); color: var(--prx-fg); }
:root[data-palette="azul"] .site-footer { background: var(--prx-color-azul-ink); }
.site-footer__grid { display: grid; gap: var(--prx-space-5); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1.4fr 1.4fr; gap: var(--prx-space-7); } }
.site-footer__copy { display: grid; gap: var(--prx-space-3); align-content: start; }
.site-footer__name { font-weight: 300; letter-spacing: var(--prx-track-brand); margin-bottom: var(--prx-space-3); }

/* ---------- Paths under the title, in the capitals of the menu ---------- */
.hero-paths { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(1rem, 2.4vw, 2.25rem); max-width: 64rem; }
.xplink {
  display: inline-flex;
  align-items: center;
  min-height: var(--prx-layout-target);
  font-size: var(--prx-size-xs);
  font-weight: 400;
  letter-spacing: var(--prx-track-caps);
  text-transform: uppercase;
  color: #fff;
  border-bottom: var(--prx-border-hair) solid transparent;
  transition: border-color var(--prx-dur-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .xplink:hover { border-bottom-color: #fff; } }
.xplink:focus-visible { outline-color: #fff; }

/* ---------- Home: two ways in, set as statements ---------- */
.ways { display: grid; gap: var(--prx-space-7); justify-items: center; }
.way { display: grid; gap: var(--prx-space-2); justify-items: center; }
.way__t { font-size: var(--prx-size-h1); line-height: var(--prx-leading-h1); font-weight: 300; letter-spacing: var(--prx-track-statement); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; text-decoration-color: transparent; transition: text-decoration-color var(--prx-dur-base) ease; }
.way__d { font-size: var(--prx-size-sm); color: var(--prx-fg-muted); }
@media (hover: hover) and (pointer: fine) { .way:hover .way__t { text-decoration-color: currentColor; } }
.way:focus-visible { outline-offset: 8px; }

/* ---------- Six families: all six at a glance (Empresas) ---------- */
.ix__list { width: 100%; max-width: 84rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--prx-space-7) var(--prx-space-6); margin-top: var(--prx-space-7); text-align: left; }
.ix__item { display: grid; align-content: start; gap: var(--prx-space-2); scroll-margin-top: calc(var(--prx-layout-header) + var(--prx-space-5)); }
.ix__img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: var(--prx-space-2); background: var(--prx-bg-muted); }
.ix__name { font-weight: 300; font-size: var(--prx-size-lg); line-height: 1.25; letter-spacing: var(--prx-track-heading); color: var(--prx-fg); }
.ix__def, .ix__eg { font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); }
.ix__eg { color: var(--prx-fg-muted); }
.band--families .statement { text-wrap: balance; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .ix__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* From 1024 px the whole section fits the screen under the header: compact heading, 3 x 2, and the
   images give up height (never below 2.5:1) before the section outgrows the viewport. */
@media (min-width: 1024px) {
  .band--families {
    --fam-margin: clamp(1.25rem, 3vw, 3rem);
    --fam-gap: clamp(1rem, 2.2vw, 2rem);
    --fam-col: calc((min(100vw - 2 * var(--fam-margin), 84rem) - 2 * var(--fam-gap)) / 3);
    --fam-text: clamp(27.75rem, 44.65rem - 18.75vw, 32.5rem);
    min-height: calc(100svh - var(--prx-layout-header));
    padding: clamp(0.75rem, 8vh - 3rem, 2.5rem) var(--fam-margin);
  }
  .band--families .band__title::after { margin-top: 0.625rem; }
  .band--families .band__body { margin-top: 0.75rem; }
  .band--families .statement { max-width: none; font-size: var(--prx-size-lg); line-height: 1.25; }
  .ix__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--fam-gap); margin-top: clamp(0.75rem, 2.2vh, 1.5rem); }
  .ix__item { grid-row: span 4; grid-template-rows: subgrid; gap: 0; }
  .ix__item:nth-child(n + 4) .ix__img { margin-top: clamp(0.75rem, 2.4vh, 1.75rem); }
  .ix__img { aspect-ratio: auto; height: clamp(var(--fam-col) / 2.5, (100svh - var(--prx-layout-header) - var(--fam-text)) / 2, var(--fam-col) / 2); margin-bottom: 0.625rem; }
  .ix__name { font-size: clamp(var(--prx-size-md), 0.6rem + 0.72vw, var(--prx-size-lg)); }
  .ix__def, .ix__eg { margin-top: 0.25rem; }
}

/* ---------- Tables ---------- */
.table-scroll { width: 100%; max-width: 64rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline-offset: 2px; }
.chain, .sides { width: 100%; text-align: left; }
.chain th, .chain td, .sides th, .sides td { padding: var(--prx-space-4) var(--prx-space-4) var(--prx-space-4) 0; border-top: var(--prx-border-hair) solid var(--prx-line); vertical-align: baseline; }
.chain thead th, .sides thead th { border-top: 0; font-size: var(--prx-size-xs); line-height: 1.5; font-weight: 500; letter-spacing: var(--prx-track-caps); text-transform: uppercase; color: var(--prx-fg-muted); padding-top: 0; }
.chain tbody th { font-weight: 400; color: var(--prx-fg-muted); font-size: var(--prx-size-sm); }
.chain td { font-size: var(--prx-size-h4); line-height: var(--prx-leading-h4); font-weight: 300; letter-spacing: var(--prx-track-heading); }
.sides tbody th { font-weight: 400; }
.sides td { color: var(--prx-fg-muted); font-size: var(--prx-size-sm); }

.flow { width: 100%; max-width: 76rem; display: grid; gap: var(--prx-space-7); text-align: center; }
@media (min-width: 768px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow li { display: grid; gap: var(--prx-space-2); align-content: start; justify-items: center; }
.flow__n { font-size: var(--prx-size-xs); letter-spacing: var(--prx-track-caps); color: var(--prx-fg-muted); }
.flow p { max-width: 22rem; font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); }

/* ---------- Levels of a record ---------- */
.levels { width: 100%; max-width: 64rem; display: grid; gap: var(--prx-space-7); }
@media (min-width: 900px) { .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--prx-space-6); } }
.level { display: grid; gap: var(--prx-space-4); align-content: start; }
.level__t { font-size: var(--prx-size-xs); line-height: 1.5; font-weight: 500; letter-spacing: var(--prx-track-caps); text-transform: uppercase; }

/* ---------- Examples: an image and its name below, never over it ---------- */
.xp-grid { width: 100%; max-width: 100rem; display: grid; gap: var(--prx-space-7) var(--prx-layout-gutter); }
.xp { display: grid; gap: var(--prx-space-3); justify-items: center; align-content: start; }
.xp__i { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: 16 / 10; background: var(--prx-bg-subtle); }
.xp img { width: 100%; height: 100%; object-fit: cover; }
.xp__t { font-size: var(--prx-size-xs); line-height: 1.5; font-weight: 400; letter-spacing: var(--prx-track-caps); text-transform: uppercase; border-bottom: var(--prx-border-hair) solid transparent; transition: border-color var(--prx-dur-fast) ease; }
@media (hover: hover) and (pointer: fine) { .xp:hover .xp__t { border-bottom-color: currentColor; } }
.xp:focus-visible { outline-offset: 4px; }
@media (min-width: 900px) {
  .xp-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .xp--w { grid-column: span 12; }
  .xp--w .xp__i { aspect-ratio: 21 / 9; }
  .xp--6 { grid-column: span 6; }
  .xp--4 { grid-column: span 4; }
}

/* ---------- Tabs and records inside a band ---------- */
.tabset { width: 100%; max-width: 40rem; }
.tabs { box-shadow: inset 0 -1px 0 var(--prx-line); }
.tabpanel { padding-top: var(--prx-space-5); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.tabpanel[hidden] { display: none; }
.tabpanel:focus-visible { outline-offset: 4px; }
.tabnote { margin-top: var(--prx-space-4); text-align: center; }

/* ---------- Catalogue of pieces: labels, not a row of equal cards ---------- */
.catalog { width: 100%; max-width: 88rem; display: grid; gap: var(--prx-space-8) var(--prx-layout-gutter); }
@media (min-width: 900px) {
  .catalog { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .piece--a { grid-column: 1 / span 7; }
  .piece--b { grid-column: 9 / span 4; align-self: end; }
  .piece--c { grid-column: 5 / span 4; }
  .piece--a img { aspect-ratio: 16 / 10; }
}

/* ---------- Classics: prints of a film ---------- */
.prints { width: 100%; max-width: 76rem; display: grid; gap: var(--prx-layout-gutter); }
@media (min-width: 900px) { .prints { grid-template-columns: 1.6fr 1fr; } }
.print { position: relative; background: #0a0a0c; padding: 0.75rem; }
.print img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px / 18px; aspect-ratio: 3 / 2; }
.print::after { content: ""; position: absolute; inset: 0.75rem; border-radius: 14px / 18px; box-shadow: inset 0 0 64px rgb(0 0 0 / 0.55); pointer-events: none; }

/* On a phone the four columns of the two-sided table become rows, so the status is never off screen. */
@media (max-width: 639px) {
  .sides thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sides, .sides tbody, .sides tr, .sides th, .sides td { display: block; }
  .sides tr { padding-block: var(--prx-space-4); border-top: var(--prx-border-hair) solid var(--prx-line); }
  .sides tbody th, .sides tbody td { border: 0; padding: 0.125rem 0; }
  .sides tbody th { padding-bottom: var(--prx-space-2); }
  .sides td { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--prx-space-3); align-items: baseline; }
  .sides td::before { content: attr(data-label); color: var(--prx-fg-subtle); font-size: var(--prx-size-sm); }
  .sides td .tag { justify-self: start; }
  .chain td { font-size: var(--prx-size-md); line-height: var(--prx-leading-md); }
  .chain th, .chain td { padding-right: var(--prx-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .xplink, .hero__layer, .hero__layer video { transition: none !important; }
}

/* ---------- Cómo trabajamos: one explorer, three kinds of operation, two views ---------- */
.wf { --fd-y: 2.8125rem; width: 100%; max-width: 76rem; text-align: left; }
.wf__bar { display: grid; gap: var(--prx-space-3) var(--prx-space-7); }
@media (min-width: 768px) { .wf__bar { grid-template-columns: auto auto; justify-content: space-between; align-items: end; } }
.wf__ctl { display: grid; gap: 0.125rem; min-width: 0; }
.wf__lab { font-size: var(--prx-size-xs); line-height: 1.4; color: var(--prx-fg-muted); }
.wf__seg { display: flex; flex-wrap: wrap; gap: 0 clamp(1rem, 2vw, 1.75rem); }
.wf__seg button { min-height: var(--prx-layout-target); min-width: var(--prx-layout-target); padding: 0 0.125rem; background: none; color: var(--prx-fg-muted); font-size: var(--prx-size-sm); line-height: 1.2; border-bottom: var(--prx-border-hair) solid transparent; transition: color var(--prx-dur-fast) ease, border-color var(--prx-dur-fast) ease; }
.wf__seg button[aria-selected="true"], .wf__seg button[aria-pressed="true"] { color: var(--prx-fg); border-bottom-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .wf__seg button:hover { color: var(--prx-fg); } }
.wf__demo { font-size: var(--prx-size-xs); line-height: 1.4; color: var(--prx-fg-muted); margin-top: 0.25rem; max-width: 22rem; }
.wf__state { margin-top: var(--prx-space-4); font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); color: var(--prx-fg-muted); max-width: 44rem; }

/* The three parties. Lines light up per stage; the asset and the price never pass through the middle. */
.fd { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--prx-space-6); padding-bottom: 5.25rem; text-align: center; }
.fd__n { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; color: var(--prx-fg-muted); font-size: var(--prx-size-ctl); line-height: 1.25; transition: color var(--prx-dur-base) ease; }
.fd__n span { display: flex; align-items: flex-end; justify-content: center; height: 2.5rem; padding: 0 0.25rem 0.5rem; }
.fd__n i { display: block; width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 1px solid currentColor; background: var(--prx-bg); transition: background-color var(--prx-dur-base) ease; }
.fd__n.is-on { color: var(--prx-fg); }
.fd__n.is-on i { background: currentColor; }
.fd__line { position: absolute; background: var(--prx-line-strong); }
.fd__line::after { content: ""; position: absolute; inset: 0; background: var(--prx-fg); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--prx-ease-out); }
.fd__line--a { left: calc(100% / 6); width: calc(100% / 3); top: var(--fd-y); height: 1px; }
.fd__line--b { left: 50%; width: calc(100% / 3); top: var(--fd-y); height: 1px; }
.fd[data-flow~="in"] .fd__line--a::after, .fd[data-flow~="out"] .fd__line--b::after { transform: none; }
/* The deal goes under Praxon: down from one party, across, up to the other. */
.fd__deal { position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: calc(var(--fd-y) + 0.3125rem); height: 2rem; border: 1px solid var(--prx-line-strong); border-top: 0; }
.fd__deal::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 1px; background: var(--prx-fg); transform: scaleX(0); transform-origin: left; transition: transform 620ms var(--prx-ease-out); }
.fd[data-flow~="deal"] .fd__deal { border-color: var(--prx-fg); border-top-color: transparent; transition: border-color 320ms ease; }
.fd[data-flow~="deal"] .fd__deal::after { transform: none; }
/* The commission is the only line that reaches Praxon from the deal. */
.fd__fee { position: absolute; left: 50%; top: calc(var(--fd-y) + 0.3125rem); width: 1px; height: 2rem; margin-left: -0.5px; background: repeating-linear-gradient(to bottom, var(--prx-line-strong) 0 3px, transparent 3px 7px); }
.fd__fee::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--prx-fg) 0 3px, transparent 3px 7px); transform: scaleY(0); transform-origin: bottom; transition: transform 420ms var(--prx-ease-out); }
.fd[data-flow~="fee"] .fd__fee::after { transform: none; }
.fd__self { position: absolute; left: 50%; top: var(--fd-y); width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem; border-radius: 50%; border: 1px solid var(--prx-fg); opacity: 0; }
.fd[data-flow~="self"] .fd__self { animation: fd-pulse 1800ms ease-out 2; }
@keyframes fd-pulse { from { opacity: 0.7; transform: scale(0.45); } to { opacity: 0; transform: scale(1.5); } }
.fd__cap { position: absolute; left: 0; right: 0; bottom: 0; min-height: 2.4em; padding-inline: 0.5rem; font-size: var(--prx-size-ctl); line-height: 1.2; color: var(--prx-fg-muted); }
@media (prefers-reduced-motion: reduce) {
  .fd__line::after, .fd__deal::after, .fd__fee::after, .fd__n, .fd__n i { transition: none !important; }
  .fd[data-flow~="self"] .fd__self { animation: none; opacity: 0.5; }
}

/* Stage rail: names on a wide screen, numbers on a phone. */
.wf-rail { position: relative; display: flex; margin-top: var(--prx-space-3); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 var(--prx-line); }
.wf-rail::-webkit-scrollbar { display: none; }
.fstep { position: relative; flex: 1 0 var(--prx-layout-target); min-height: var(--prx-layout-target); display: grid; gap: 0.125rem; justify-items: center; align-content: center; padding: 0.375rem 0.25rem; background: none; color: var(--prx-fg-muted); border-bottom: var(--prx-border-hair) solid transparent; text-align: center; transition: color var(--prx-dur-fast) ease, border-color var(--prx-dur-fast) ease; }
.fstep[aria-selected="true"] { color: var(--prx-fg); border-bottom-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .fstep:hover { color: var(--prx-fg); } }
.fstep__n { font-size: var(--prx-size-xs); line-height: 1.3; font-variant-numeric: tabular-nums lining-nums; }
.fstep__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 900px) {
  .fstep__t { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: var(--prx-size-ctl); line-height: 1.2; }
}
.wf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--prx-space-4); margin-top: var(--prx-space-4); }
.wf-btn { min-height: var(--prx-layout-target); min-width: var(--prx-layout-target); padding: 0 0.125rem; background: none; color: var(--prx-fg); font-size: var(--prx-size-sm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.wf-btn[disabled] { color: var(--prx-fg-muted); text-decoration: none; cursor: default; }
.wf-nav__n { font-size: var(--prx-size-sm); color: var(--prx-fg-muted); font-variant-numeric: tabular-nums lining-nums; }
.wf-nav__sp { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 var(--prx-space-4); }

/* A stage. Without script every stage stays visible: that is the static alternative. */
.fstage { padding-top: var(--prx-space-5); display: grid; gap: var(--prx-space-4); }
.fstage + .fstage { margin-top: var(--prx-space-5); border-top: var(--prx-border-hair) solid var(--prx-line); }
.fstage[hidden] { display: none; }
.is-enhanced:not(.is-all) .fstage + .fstage { margin-top: 0; border-top: 0; }
.fstage__t { font-weight: 300; font-size: var(--prx-size-h3); line-height: var(--prx-leading-h3); letter-spacing: var(--prx-track-heading); }
.fstage__num { color: var(--prx-fg-muted); margin-right: 0.4em; font-variant-numeric: tabular-nums lining-nums; }
.fstage__g { display: grid; gap: var(--prx-space-3) var(--prx-space-5); }
@media (min-width: 900px) { .fstage__g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fstage__g dt { font-size: var(--prx-size-xs); line-height: 1.4; color: var(--prx-fg-muted); margin-bottom: 0.125rem; }
.fstage__g dd { font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); }
.is-enhanced .fstage { animation: fstage-in 240ms var(--prx-ease-out) both; }
@keyframes fstage-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-enhanced .fstage { animation: none; } }
.wf-track__t { font-size: var(--prx-size-xs); line-height: 1.5; font-weight: 500; letter-spacing: var(--prx-track-caps); text-transform: uppercase; margin-top: var(--prx-space-6); }
.is-enhanced .wf-track__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wf-track[hidden] { display: none; }
.wf-docs { width: 100%; text-align: left; }
.wf-docs th, .wf-docs td { padding: 0.5rem 0.75rem 0.5rem 0; border-top: var(--prx-border-hair) solid var(--prx-line); vertical-align: baseline; font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); }
.wf-docs thead th { border-top: 0; font-size: var(--prx-size-xs); font-weight: 400; color: var(--prx-fg-muted); }
.wf-docs tbody th { font-weight: 400; }
@media (max-width: 767px) {
  .wf-docs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wf-docs, .wf-docs tbody, .wf-docs tr, .wf-docs th, .wf-docs td { display: block; }
  .wf-docs tr { padding-block: 0.5rem; border-top: var(--prx-border-hair) solid var(--prx-line); }
  .wf-docs tbody th, .wf-docs td { border: 0; padding: 0.0625rem 0; }
  .wf-docs td::before { content: attr(data-label) ": "; color: var(--prx-fg-muted); }
}
.is-all .fd, .is-all .wf-rail, .is-all [data-wf-step] { display: none; }

/* What each operation asks for: a plain list, not a form. */
.wlist { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; max-width: 40rem; }
.wlist li { font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); padding-block: 0.25rem; }
@media print { .wf-track[hidden], .fstage[hidden] { display: grid !important; } .fd, .wf-rail, .wf-nav, .wf__bar { display: none !important; } }
.wf [hidden] { display: none !important; }
.wf-stages { display: grid; }
.is-enhanced .wf__state--static { display: none; }
.wf .table-scroll { max-width: none; }
.tabset--wf { max-width: 52rem; }
.tabset--wf .tab { flex: none; }

/* ---------- Real footage: its own exposure under the title, measured on its frames ---------- */
.hero__layer--real img, .hero__layer--real video { filter: grayscale(1) brightness(var(--film-b, 0.6)) contrast(0.96); }
/* The Mono rule of praxon.css (main img:not(.keep-color)) outranks both hero grades, so a still lost
   the exposure its film has. Restated at that weight: a poster is graded exactly like its video. */
:root:not([data-palette="azul"]) main .hero__layer img:not(.keep-color) { filter: grayscale(1) brightness(0.86) contrast(0.96); }
:root:not([data-palette="azul"]) main .hero__layer--real img:not(.keep-color) { filter: grayscale(1) brightness(var(--film-b, 0.6)) contrast(0.96); }

/* ---------- Particulares: each example plays its own preview, one at a time ---------- */
.xp__real, .xp__film { filter: grayscale(1); }
.xp__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--prx-dur-media) var(--prx-ease-media); pointer-events: none; }
.xp.is-playing .xp__film { opacity: 1; }
.xp-ctl { margin-top: var(--prx-space-5); }
@media (prefers-reduced-motion: reduce) { .xp__film { transition: none; } }

/* ---------- Media review ---------- */
.review-tw { max-width: 100rem; }
.review-tw .wf-docs a { overflow-wrap: anywhere; }
.proof { width: 100%; max-width: 64rem; display: grid; gap: var(--prx-layout-gutter); }
@media (min-width: 700px) { .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof img { width: 100%; height: auto; }
.proof__note { width: 100%; max-width: 64rem; }
/* Museum references: review page only, kept apart from the real footage and always labelled. */
.museum { width: 100%; max-width: 64rem; display: grid; gap: var(--prx-layout-gutter); margin-top: var(--prx-space-5); text-align: left; }
@media (min-width: 700px) { .museum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.museum__item { display: grid; gap: var(--prx-space-2); align-content: start; }
.museum__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--prx-bg-muted); }
.museum__cap { display: grid; gap: 0.25rem; justify-items: start; font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); }
.museum__kind { font-size: var(--prx-size-xs); letter-spacing: var(--prx-track-caps); text-transform: uppercase; }
.museum__name cite { font-style: italic; }
.museum__cap a { display: inline-flex; align-items: center; min-height: var(--prx-layout-target); }

/* ---------- Home: what Praxon is, at first glance, above the title without moving it ---------- */
.hero__center--role { position: relative; }
.hero__role { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: clamp(0.75rem, 2.4vh, 1.5rem); white-space: nowrap; color: #fff; font-size: clamp(0.8125rem, 1.05vw, 1rem); font-weight: 400; line-height: 1.4; letter-spacing: var(--prx-track-caps); text-transform: uppercase; text-align: center; }
@media (prefers-reduced-motion: no-preference) { html:not(.no-rise) .hero__role { animation: prx-dawn var(--prx-dur-hero) ease-out 100ms both; } }

/* Home: what Praxon does, in a sentence under the title. Out of the flow, so the title stays where 1F put it. */
.hero__lede { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: min(42rem, calc(100vw - 2 * var(--prx-layout-margin))); margin-top: clamp(0.75rem, 2.4vh, 1.5rem); color: #fff; font-size: clamp(0.9375rem, 1.2vw, 1.125rem); font-weight: 400; line-height: 1.4; text-align: center; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) { html:not(.no-rise) .hero__lede { animation: prx-dawn var(--prx-dur-hero) ease-out 100ms both; } }

/* Companies: the three parties, every line on, with nothing to animate. */
.fd--static { --fd-y: 2.8125rem; width: 100%; max-width: 40rem; margin: 0 auto; }
.fd--static .fd__n { color: var(--prx-fg); }
.fd--static .fd__n i { background: currentColor; }
.band--lead .statement { text-wrap: balance; }

/* Companies: who takes the enquiry. Each person's name and mailbox stay readable and copyable above their own link. */
.contact { width: 100%; max-width: 44rem; display: grid; gap: var(--prx-space-7) var(--prx-layout-gutter); margin: var(--prx-space-7) auto 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .contact { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.contact__person { display: grid; justify-items: center; align-content: start; gap: var(--prx-space-2); min-width: 0; }
.contact__name { font-weight: 300; font-size: var(--prx-size-lg); line-height: 1.25; letter-spacing: var(--prx-track-heading); }
.contact__role { font-size: var(--prx-size-xs); letter-spacing: var(--prx-track-caps); text-transform: uppercase; color: var(--prx-fg-muted); }
.contact__addr { max-width: 100%; font-size: var(--prx-size-sm); line-height: var(--prx-leading-sm); overflow-wrap: anywhere; }
.contact__act { margin-top: var(--prx-space-2); }
.band--consulta .contact + .note { margin-top: var(--prx-space-6); }
.band--consulta .note:last-child { margin-top: var(--prx-space-3); }
.band--consulta .band__title { scroll-margin-top: calc(var(--prx-layout-header) + var(--prx-space-5)); }

/* Production home: role and description form one centred block. */
[data-page="home"] .hero__center--role {
  width: 100%;
  gap: clamp(1rem, 2.4vh, 1.5rem);
  text-align: center;
}
[data-page="home"] .hero__role {
  position: static;
  transform: none;
  margin: 0;
  white-space: normal;
  text-wrap: balance;
}
[data-page="home"] .hero__lede {
  position: static;
  transform: none;
  margin: 0;
  max-width: 100%;
}