/* Pesito pixel choreography. Colours and type come from the existing
   Lotería system; whole-cell sprites follow the chapter study in
   docs/design-system/pesito-design-system.html. */
/* Lenis writes native scroll positions; CSS must not ease them again.
   Stable section sizes keep destinations and sticky progress exact. */
html.lenis { scroll-behavior: auto; }
.lenis :is(.ed-grid--thirds, .ed-grid--split, .ed-grid--split-wide,
  section.ed-panel--verde, section.ed-panel--tinta, section.ed-panel--bosque,
  .faq-list, .ed-footer, .footer) { content-visibility: visible; }
.editorial-system .nav-sheet { overscroll-behavior: contain; }
/* Keep the native rise and sibling stagger without fading the whole
   text-bearing panel. A tall card can remain within its entry range
   while its small print is already readable, so contrast cannot depend
   on the reveal reaching its final frame. */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    @keyframes editorial-reveal-rise {
      from { transform: translateY(20px); }
      to { transform: translateY(0); }
    }
    .editorial-system [data-reveal]:not(.ed-chips),
    .editorial-system .ed-chips > .ed-chip { animation-name: editorial-reveal-rise; }
  }
}
.px-chapter {
  position: relative;
  margin-block: var(--panel-gap, 16px);
  isolation: isolate;
}
.px-stage {
  position: relative;
  min-height: 640px;
  padding: clamp(28px, 5vw, 80px);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  overflow: hidden;
  background: var(--amarillo-500);
  color: var(--ink-fixed);
}
.px-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}
.px-title, .px-statement, .px-info { position: relative; z-index: 2; }
.px-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .04em;
  min-height: 440px;
}
.px-line {
  display: block;
  font-family: var(--font-black);
  font-size: clamp(38px, 7.5vw, 124px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1;
  color: var(--ink-fixed);
}
.px-line:nth-child(even) { align-self: flex-end; }
/* The price line carries a clause, so it steps down one size and stays
   one row on wide screens; the characters still depart one by one. */
.px-line--long { font-size: clamp(30px, 3.8vw, 70px); letter-spacing: -.04em; line-height: 1.06; }
.px-line .px-character { display: inline-block; }
.px-line .px-word-chunk { display: inline-block; white-space: nowrap; }
/* The story act: the family photograph beside the copy, a Lotería card
   set at a slight angle on the rose field. One column on phones. */
.px-statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  text-align: left;
  padding-block: 40px;
}
.px-photo {
  margin: 0;
  justify-self: center;
  width: min(100%, 520px);
  border: 1px solid var(--ink-fixed);
  border-radius: 20px;
  overflow: hidden;
  background: var(--hueso);
  transform: rotate(-2deg);
}
.px-photo img { display: block; width: 100%; height: auto; }
.px-statement-copy { min-width: 0; max-width: 46ch; }
.px-statement :is(h2, h3) {
  max-width: 16ch;
  margin: 0;
  font: 400 clamp(36px, 5vw, 76px)/1.04 var(--font-black);
  letter-spacing: -.045em;
  color: inherit;
}
.px-statement p { max-width: 42ch; margin: 18px 0 0; color: inherit; }
@media (min-width: 768px) {
  .px-statement { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); }
  .px-photo { justify-self: end; }
}
.px-marquee { display: none; }
/* The line the heart says. In flow it reads as a headline between the
   story and the final act; pinned, it sits in the band under the heart's
   tip, which the 21-row artboard leaves clear. */
.px-love {
  position: relative;
  z-index: 2;
  max-width: 18ch;
  margin: 32px auto 0;
  text-align: center;
  font: 400 clamp(28px, 4.2vw, 64px)/1.06 var(--font-black);
  letter-spacing: -.04em;
  color: var(--ink-fixed);
}
/* Pedro's greeting. It belongs to his drawing, so it exists only while
   the chapter is pinned; in flow, static, print and reduced motion the
   drawing is not shown and neither is the line. */
.px-hello { display: none; }
.px-chapter.is-motion-ready .px-hello {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  z-index: 2;
  margin: 0;
  padding: 0 clamp(24px, 4.5vw, 72px);
  text-align: center;
  font: 400 clamp(24px, 3.2vw, 48px)/1.06 var(--font-black);
  letter-spacing: -.04em;
  color: var(--ink-fixed);
  opacity: 0;
  visibility: hidden;
}
.px-info { margin-top: 40px; min-width: 0; }
.px-info:has(.px-info-cards) {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 3.6vw, 56px);
}
.px-info :is(h2, h3, p) { color: var(--ink-fixed); }
.px-info [data-pixel-manifesto] {
  max-width: 36ch;
  margin: 20px 0 0;
  font: 400 clamp(18px, 1.7vw, 22px)/1.5 var(--font-body);
  letter-spacing: -.012em;
}
.px-info .px-info-copy :is(h2, h3) {
  max-width: 18ch;
  margin: 0;
  font: 400 clamp(36px, 3.8vw, 56px)/1.06 var(--font-black);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.px-info .px-word { display: inline-block; }
.px-scroll-hint { display: none; }

/* Pin only after the engine has painted. An unavailable script always
   leaves normal document flow and readable copy. */
.px-chapter.is-motion-ready { height: 960vh; height: 960svh; }
.px-chapter.is-motion-ready .px-stage {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  height: calc(100svh - 32px);
  min-height: 0;
  padding: 0;
}
/* On touch screens editorial-motion.js holds the viewport units measured
   with the page (pesito-vh-frozen and --frozen-svh on the chapter;
   --stage-svh for the pinned stage): a browser bar that resizes the page
   must not change the chapter's length, its stage or its type. */
.px-chapter.is-motion-ready:where(.pesito-vh-frozen) { height: calc(var(--frozen-svh) * 960); }
.px-chapter.is-motion-ready:where(.pesito-vh-frozen) .px-stage { height: calc(var(--stage-svh) * 100 - 32px); }
.px-chapter.is-motion-ready :is(.px-title, .px-statement, .px-info) {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: clamp(24px, 4.5vw, 72px);
}
.px-chapter.is-motion-ready .px-title { min-height: 0; }
.px-chapter.is-motion-ready .px-statement {
  display: grid;
  align-content: center;
  color: var(--paper-fixed);
  opacity: 0;
  visibility: hidden;
}
/* Pinned, the photograph is capped by the viewport so the act never
   overflows the stage (an overflowing act returns the chapter to flow). */
.px-chapter.is-motion-ready .px-photo { max-height: 52svh; width: auto; max-width: 100%; aspect-ratio: 960 / 717; }
.px-chapter.is-motion-ready:where(.pesito-vh-frozen) .px-photo { max-height: calc(var(--stage-svh) * 52); }
.px-chapter.is-motion-ready .px-photo img { width: 100%; height: 100%; object-fit: cover; }
.px-chapter.is-motion-ready .px-love {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 7%, 72px);
  max-width: none;
  margin: 0;
  padding: 0 clamp(24px, 4.5vw, 72px);
  color: var(--paper-fixed);
  opacity: 0;
  visibility: hidden;
}
.px-chapter.is-motion-ready .px-info {
  display: grid;
  align-content: center;
  background: transparent;
  color: var(--paper-fixed);
  opacity: 0;
  visibility: hidden;
}
.px-chapter.is-motion-ready .px-info:has(.px-info-cards) {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3.6vw, 56px);
  align-items: center;
}
.px-info-copy { min-width: 0; max-width: 36rem; }
.px-chapter.is-motion-ready .px-info-copy :is(h2, h3, p) { color: var(--paper-fixed); }
.px-info-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.px-info-cards > * {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(20px, 2vw, 28px);
  border: var(--panel-border);
  border-radius: 20px;
  background: var(--hueso);
  color: var(--tinta-900);
}
.px-info-cards > * :is(h2, h3, p) { color: inherit; }
.px-info .px-info-cards > * :is(h2, h3) {
  margin: 0;
  font: 400 clamp(19px, 1.65vw, 24px)/1.2 var(--font-black);
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
.px-info .px-info-cards > * p {
  margin: 10px 0 0;
  max-width: 48ch;
  font: 400 clamp(15px, 1.05vw, 17px)/1.5 var(--font-body);
  letter-spacing: normal;
  overflow-wrap: break-word;
}
.px-chapter.is-motion-ready .px-marquee {
  position: absolute;
  inset: auto 0 10%;
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.px-marquee > span {
  display: block;
  width: max-content;
  font: 400 clamp(42px, 6.3vw, 96px)/1 var(--font-black);
  letter-spacing: -.04em;
  white-space: nowrap;
  color: var(--ink-fixed);
}
.px-chapter.is-motion-ready .px-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 4;
  display: block;
  font: 500 32px/1 var(--font-body);
  transform: translateX(-50%);
}
.px-chapter.is-static .px-canvas { opacity: .13; }
.px-chapter.is-static .px-statement { color: var(--ink-fixed); }
.px-chapter.is-static .px-title { min-height: 260px; }

/* The opening grid never locks scrolling, focus, or navigation. Its
   removal is bounded even if a font/media request fails. */
.pesito-pixel-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: var(--hueso);
  color: var(--tinta-900);
  transition: clip-path 420ms cubic-bezier(.76, 0, .24, 1);
  clip-path: inset(0);
}
.pesito-pixel-intro.is-leaving { clip-path: inset(0 0 100% 0); }
.pesito-pixel-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pesito-pixel-intro-wordmark {
  position: relative;
  z-index: 1;
  font: 400 clamp(76px, 17vw, 240px)/.9 var(--font-black);
  letter-spacing: -.025em;
}
.pesito-pixel-intro-wordmark > .intro-letter { display: inline-block; opacity: 0; }
.pesito-pixel-intro-wordmark > .intro-letter:nth-child(6) { margin-right: .025em; }
.pesito-pixel-intro-symbol {
  position: absolute;
  width: clamp(90px, 11vw, 148px);
  height: auto;
  fill: var(--verde-500);
  overflow: visible;
}
.pesito-pixel-intro-dot {
  display: inline-block;
  width: .14em;
  height: .14em;
  margin-left: .055em;
  background: var(--verde-500);
}
.pesito-pixel-intro-rule {
  position: absolute;
  inset: auto 24px 24px;
  height: 3px;
  background: var(--tinta-900);
  transform-origin: left;
  transform: scaleX(0);
}
.editorial-arriving .ed-grid--hero {
  animation: editorial-hero-arrival 1200ms cubic-bezier(.16, 1, .3, 1) both;
}
.editorial-arriving .ed-rail {
  animation: editorial-rail-arrival 900ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes editorial-hero-arrival {
  from { clip-path: inset(100% 0 0 0 round 28px); transform: translateY(24px); }
  to { clip-path: inset(0 round 28px); transform: translateY(0); }
}
@keyframes editorial-rail-arrival {
  from { transform: translateX(-130%); }
  to { transform: translateX(0); }
}

/* Existing product panels become one native pinned horizontal pass.
   Narrow screens and reduced motion preserve their vertical reading. */
.editorial-gallery { position: relative; min-width: 0; }
.editorial-gallery-track { display: grid; gap: var(--panel-gap, 16px); }
.editorial-gallery.is-gallery-active .editorial-gallery-sticky {
  position: sticky;
  top: 16px;
  height: 86vh;
  height: 86svh;
  overflow: hidden;
  border-radius: var(--panel-radius);
}
.editorial-gallery.is-gallery-active:where(.pesito-vh-frozen) .editorial-gallery-sticky { height: calc(var(--frozen-svh) * 86); }
.editorial-gallery.is-gallery-active .editorial-gallery-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.editorial-gallery.is-gallery-active .editorial-gallery-track > .ed-showcase {
  flex: 0 0 auto;
  width: var(--editorial-gallery-card-width, 900px);
  max-width: none;
  height: 100%;
  margin: 0;
  content-visibility: visible;
  contain-intrinsic-size: none;
}
.editorial-pixel-tile {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1.45;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--ink-fixed);
  border-radius: 16px;
  background: var(--azul-700);
}
.editorial-pixel-tile canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
/* The pixel tile IS this card's emblem. The bubble glyph it replaces
   said the same thing one size smaller, which left every card in the
   deck wearing two icons for one idea. The tile stays, the bubble goes.
   Hidden rather than dropped from the markup: without JS no tile is
   prepended, the class is never added, and the bubble is still the
   card's only emblem. */
.editorial-pixel-card > :is(.carta-bubble, .ed-icon) { display: none; }

/* On the wide carta the deck's lead card runs as a row, so the tile is
   an emblem beside the copy rather than a full-bleed plate above it.
   Without a basis it would take `width: 100%` from the rule above and
   set an aspect-ratio height off the full card width. */
.carta--ancha.editorial-pixel-card > .editorial-pixel-tile {
  flex: 0 0 clamp(200px, 30%, 340px);
  width: auto;
  margin-bottom: 0;
}
/* Title and body are siblings of the tile, so without a shared basis
   they wrap onto two independent flex lines and the copy drops below
   the emblem leaving a dead column beside it. Equal bases keep them in
   one column; the title also drops the deck's centring, because beside
   an emblem it reads as a column head rather than a card label. */
/* Grid, not flex-wrap. Three siblings (tile, title, body) on a wrapping
   flex row keep resolving as three lines; a two-column grid states the
   intent directly — emblem in column one, the copy stacked in column
   two — and needs no basis arithmetic to hold together. */
.carta--ancha.editorial-pixel-card {
  display: grid;
  grid-template-columns: clamp(200px, 30%, 340px) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 8px;
}
.carta--ancha.editorial-pixel-card > .editorial-pixel-tile {
  grid-row: 1 / span 2;
  width: 100%;
}
.carta--ancha.editorial-pixel-card > :is(h3, .headline) {
  align-self: end;
  text-align: start;
  margin: 0;
}
.carta--ancha.editorial-pixel-card > p {
  align-self: start;
  max-width: 62ch;
  margin: 0;
}
@media (max-width: 720px) {
  /* One column on phones: emblem, then title, then copy. */
  .carta--ancha.editorial-pixel-card { grid-template-columns: minmax(0, 1fr); }
  .carta--ancha.editorial-pixel-card > .editorial-pixel-tile {
    grid-row: auto;
    margin-bottom: 4px;
  }
}
/* Two tiled cards side by side share their rows: tile, title, copy.
   A title that wraps to two lines beside a one-line title otherwise
   drops its copy one line below its neighbour's. As a subgrid, each
   row's title track is as tall as its taller title, the shorter title
   sits on the copy (bottom of its track), and both copy blocks start on
   one line; where the titles match, nothing moves. The margins keep the
   rhythm (tile 24px, title 8px), so the gap is zero. Only while the deck
   runs two up; stacked, each card keeps its own flex column. The :has()
   holds it to that three-part anatomy (the bubble it replaces is hidden),
   so a card with a second paragraph keeps its flex column rather than
   running out of rows. */
@media (min-width: 721px) {
  @supports (grid-template-rows: subgrid) {
    .cartas.cartas--2up > .carta.editorial-pixel-card:not(.carta--ancha):has(> .editorial-pixel-tile + :is(.ed-icon, .carta-bubble) + :is(h3, .headline) + p:last-child, > .editorial-pixel-tile + :is(h3, .headline) + p:last-child) {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
      justify-items: center;
    }
    .cartas.cartas--2up > .carta.editorial-pixel-card:not(.carta--ancha) > :is(h3, .headline) { align-self: end; }
    .cartas.cartas--2up > .carta.editorial-pixel-card:not(.carta--ancha) > p { align-self: start; }
  }
}
/* The card feature carries Pedro, the illustrated mascot, as its emblem
   in place of a pixel tile: the same emblem-beside-copy grid as the deck's
   lead card, one column on phones. It stacks under the OXXO pixel card,
   so it takes that card's emblem column and gaps and the two copy columns
   start on one line; the figure keeps its 240px cap and centres in the
   wider column. `.carta.carta` in the first selector matches
   main.css's `.carta.carta--ancha { gap }` (0,2,0), which otherwise beat
   the column and row gaps here and set the copy 28px off the figure. */
:is(.carta.carta--pedro, .ed-feature-panel--pedro) {
  display: grid;
  grid-template-columns: clamp(200px, 30%, 340px) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: 8px;
}
:is(.carta--pedro, .ed-feature-panel--pedro) > .carta-pedro-figure {
  grid-row: 1 / span 2;
  margin: 0;
  justify-self: center;
  width: 100%;
  max-width: 240px;
}
:is(.carta--pedro, .ed-feature-panel--pedro) > .carta-pedro-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(2px 3px 0 var(--ink-fixed));
}
/* Pedro's lotería card (owner, 2026-09-24; replaces the 2026-09-22
   polaroid): the artwork is the whole card, border, number and name
   included, so the figure adds no frame or caption, only a slight tilt
   and a soft print shadow. The card keeps its own colours in both
   themes; it straightens when the pointer reaches it. */
:is(.carta--pedro, .ed-feature-panel--pedro) > .carta-pedro-figure {
  transform: rotate(-2.5deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
:is(.carta--pedro, .ed-feature-panel--pedro) > .carta-pedro-figure:hover { transform: rotate(0deg); }
:is(.carta--pedro, .ed-feature-panel--pedro) > .carta-pedro-figure picture { display: block; }
:is(.carta--pedro, .ed-feature-panel--pedro) > .carta-pedro-figure img {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.28));
}
@media (prefers-reduced-motion: reduce) {
  :is(.carta--pedro, .ed-feature-panel--pedro) > .carta-pedro-figure { transition: none; }
}
:is(.carta--pedro, .ed-feature-panel--pedro) > :is(h3, .headline) { align-self: end; text-align: start; margin: 0; }
:is(.carta.carta--pedro, .ed-feature-panel--pedro) > p { align-self: start; max-width: 62ch; margin: 0; }
:is(.carta--pedro, .ed-feature-panel--pedro) > :is(.carta-bubble, .ed-icon) { display: none; }
@media (max-width: 720px) {
  :is(.carta.carta--pedro, .ed-feature-panel--pedro) { grid-template-columns: minmax(0, 1fr); }
  :is(.carta--pedro, .ed-feature-panel--pedro) > .carta-pedro-figure { grid-row: auto; max-width: 200px; margin-bottom: 4px; }
}
.editorial-ticker {
  position: relative;
  min-width: 0;
  height: 64px;
  margin-block: var(--panel-gap, 16px);
  border: 1px solid var(--ink-fixed);
  border-radius: 999px;
  overflow: hidden;
  --ticker-fill: var(--azul-700);
  background: var(--ticker-fill);
  color: var(--paper-fixed);
}
.editorial-ticker--rose { --ticker-fill: var(--rosa-600); }
/* The words leave and enter through a 36px fade in the banner's own fill
   (the pill's curve at 64px tall) instead of being sliced by it. The fade
   sits inside the frame, over the moving track, so the 1px ink border
   stays crisp. */
.editorial-ticker::before,
.editorial-ticker::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 1;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--ticker-fill), transparent);
}
.editorial-ticker::before { inset-inline-start: 0; }
.editorial-ticker::after { inset-inline-end: 0; transform: scaleX(-1); }
/* Without separator squares, the flags carry the rhythm: a wider gap
   keeps each flag reading with its own name. */
/* The country banner is lilac with ink type (owner, 2026-09-22): on the
   blue it shared a hue with half the flags (the United States, Honduras,
   El Salvador, Nicaragua, Argentina...), on lilac every flag reads.
   Both colours are fixed, so the pair holds in the dark theme too. */
.editorial-ticker--flags { --ticker-fill: var(--lila-300); color: var(--ink-fixed); }
.editorial-ticker--flags .editorial-ticker-group { gap: 48px; padding-right: 48px; }
.editorial-ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: editorial-ticker-travel 44s linear infinite;
}
/* Country flags for the Americas banner. Windows ships no flag emoji
   (a regional-indicator pair renders as two letters), so the flags come
   from a self-hosted Twemoji flag font (CC BY 4.0, credited on
   /en/licenses). unicode-range limits it to flag characters: every other
   glyph still falls through to the banner's own face, and the file only
   downloads on a page that actually shows a flag. */
@font-face {
  font-family: 'Twemoji Country Flags';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url('/assets/fonts/TwemojiCountryFlags.woff2') format('woff2');
}
.editorial-ticker-group {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  font: 400 clamp(16px, 1.7vw, 25px)/1 'Twemoji Country Flags', var(--font-black);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.editorial-ticker-separator {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: var(--amarillo-500);
  box-shadow: 6px -6px 0 var(--verde-300);
}
.editorial-ticker.is-paused .editorial-ticker-track,
.editorial-ticker.is-offscreen .editorial-ticker-track,
.editorial-ticker:hover .editorial-ticker-track { animation-play-state: paused; }
@keyframes editorial-ticker-travel { to { transform: translateX(-50%); } }
@media (max-width: 1279.98px), (max-height: 539.98px) {
  .editorial-gallery.is-gallery-active .editorial-gallery-sticky {
    top: 84px;
    height: min(86vh, calc(100vh - 100px));
    height: min(86svh, calc(100svh - 100px));
  }
  .editorial-gallery.is-gallery-active:where(.pesito-vh-frozen) .editorial-gallery-sticky {
    height: min(calc(var(--frozen-svh) * 86), calc(var(--frozen-svh) * 100 - 100px));
  }
}

@media (max-width: 1279.98px), (max-height: 539.98px) {
  .px-chapter.is-motion-ready .px-stage {
    top: 84px;
    height: calc(100vh - 100px);
    height: calc(100svh - 100px);
  }
  .px-chapter.is-motion-ready:where(.pesito-vh-frozen) .px-stage { height: calc(var(--stage-svh) * 100 - 100px); }
}
@media (max-width: 767px) {
  .px-stage { min-height: 440px; padding: 24px; }
  .px-title { min-height: 300px; }
  /* Two tiers on phones too (this rule used to size the price line
     with the headline, 37px each, in five ragged lines): the headline
     holds one row from 320 to 430 in EN and ES, the price line steps
     down and both balance their breaks between word chunks. */
  .px-line { font-size: clamp(24px, 7.9vw, 66px); text-wrap: balance; }
  .px-line--long { font-size: clamp(18px, 5.4vw, 34px); line-height: 1.12; }
  .px-chapter.is-motion-ready { height: 780vh; height: 780svh; }
  .px-chapter.is-motion-ready:where(.pesito-vh-frozen) { height: calc(var(--frozen-svh) * 780); }
  .px-chapter.is-motion-ready .px-stage { min-height: 0; }
  .px-chapter.is-motion-ready :is(.px-title, .px-statement, .px-info) { padding: 24px; }
  .px-info:has(.px-info-cards),
  .px-chapter.is-motion-ready .px-info:has(.px-info-cards) {
    grid-template-columns: 1fr;
    gap: 16px;
    align-content: center;
  }
  .px-info .px-info-copy :is(h2, h3) { font-size: clamp(30px, 6.4vw, 40px); line-height: 1.08; }
  .px-info [data-pixel-manifesto] { margin-top: 14px; font-size: 17px; line-height: 1.48; }
  .px-info-cards { gap: 12px; }
  .px-info-cards > * { padding: 16px; border-radius: 16px; }
  .px-info .px-info-cards > * :is(h2, h3) { font-size: 20px; }
  .px-info .px-info-cards > * p { margin-top: 8px; font-size: 15px; line-height: 1.45; }
  .px-statement :is(h2, h3) { font-size: clamp(30px, 8vw, 54px); }
  .px-chapter.is-motion-ready .px-photo { max-height: min(30svh, 240px); }
  .px-chapter.is-motion-ready:where(.pesito-vh-frozen) .px-photo { max-height: min(calc(var(--stage-svh) * 30), 240px); }
  .px-love { font-size: clamp(24px, 6.5vw, 40px); }
}
/* Keep the full final message in the pinned viewport on compact phones.
   Only type and spacing change; the native scroll timeline is untouched.

   One rule list, not two. The height condition is carried entirely by the
   `pesito-vh-short` / `pesito-vh-tiny` classes, which editorial-motion.js
   sets on every device: measured once and held on a touch screen (a
   browser bar must not retype the page mid-read), live everywhere else.
   There is deliberately no `(max-height: …)` copy of these declarations
   to drift from. Lengths read `var(--stage-svh, 1svh)` — the held value
   when frozen, the live unit otherwise — so one edit changes both. */
@media (max-width: 767px) {
  .px-chapter.is-motion-ready:where(.pesito-vh-short) .px-info { padding: 12px; }
  .px-chapter.is-motion-ready:where(.pesito-vh-short) .px-info:has(.px-info-cards) { gap: 12px; }
  :where(.pesito-vh-short) .px-info .px-info-copy :is(h2, h3) { font-size: 26px; line-height: 1.08; }
  :where(.pesito-vh-short) .px-info [data-pixel-manifesto] { margin-top: 8px; font-size: 14px; line-height: 1.35; }
  :where(.pesito-vh-short) .px-info-cards { gap: 8px; }
  :where(.pesito-vh-short) .px-info-cards > * { padding: 10px; }
  :where(.pesito-vh-short) .px-info .px-info-cards > * :is(h2, h3) { font-size: 16px; line-height: 1.15; }
  :where(.pesito-vh-short) .px-info .px-info-cards > * p { margin-top: 6px; font-size: 13px; line-height: 1.35; }
  :where(.pesito-vh-short) .px-statement :is(h2, h3) { font-size: 28px; line-height: 1.08; }
  :where(.pesito-vh-short) .px-statement p { margin-top: 12px; font-size: 14px; line-height: 1.4; }
  .px-chapter.is-motion-ready:where(.pesito-vh-short) .px-statement { gap: 14px; }
  .px-chapter.is-motion-ready:where(.pesito-vh-short) .px-photo { max-height: min(calc(var(--stage-svh, 1svh) * 24), 160px); }
}
/* Devices that keep the live units get the same type from the same
   classes, set live by editorial-motion.js. There is deliberately no
   `(max-height: …)` copy of these declarations: one rule list, one
   place to edit. */
.px-chapter.is-motion-ready:where(.pesito-vh-tiny) .px-photo { display: none; }
@media (min-width: 768px) {
  .px-chapter.is-motion-ready:where(.pesito-vh-short) .px-info { padding: 24px; }
  :where(.pesito-vh-short) .px-info .px-info-copy :is(h2, h3) { font-size: clamp(30px, 3.2vw, 40px); }
  :where(.pesito-vh-short) .px-info [data-pixel-manifesto] { margin-top: 14px; font-size: 18px; }
  :where(.pesito-vh-short) .px-info-cards { gap: 12px; }
  :where(.pesito-vh-short) .px-info-cards > * { padding: 16px 20px; }
  :where(.pesito-vh-short) .px-info .px-info-cards > * :is(h2, h3) { font-size: 20px; }
  :where(.pesito-vh-short) .px-info .px-info-cards > * p { margin-top: 8px; font-size: 15px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .pesito-pixel-intro { display: none; }
  .px-chapter.is-motion-ready { height: auto; }
  .px-chapter.is-motion-ready .px-stage { position: relative; top: auto; height: auto; }
  .px-chapter.is-motion-ready :is(.px-title, .px-statement, .px-love, .px-info) {
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .px-chapter.is-motion-ready .px-love { color: var(--ink-fixed); bottom: auto; margin: 32px auto 0; }
  .px-chapter.is-motion-ready .px-hello { display: none; }
  .px-chapter.is-motion-ready :is(.px-marquee, .px-scroll-hint) { display: none; }
  .px-character, .px-word, .px-info-cards > * { opacity: 1 !important; transform: none !important; }
  .editorial-arriving .ed-grid--hero, .editorial-arriving .ed-rail { animation: none; }
  .editorial-gallery.is-gallery-active { height: auto !important; }
  .editorial-gallery.is-gallery-active .editorial-gallery-sticky { position: relative; top: auto; height: auto; }
  .editorial-gallery.is-gallery-active .editorial-gallery-track { display: grid; width: auto; transform: none !important; }
  .editorial-gallery.is-gallery-active .editorial-gallery-track > .ed-showcase { width: 100%; }
  .editorial-ticker-track { animation: none; }
}
@media (forced-colors: active) {
  .px-canvas, .pesito-pixel-intro, .px-hello { display: none; }
  .px-stage, .px-info { background: Canvas !important; color: CanvasText !important; }
  .px-chapter.is-motion-ready :is(.px-statement, .px-love) { color: CanvasText; }
  .editorial-pixel-tile { display: none; }
  .editorial-ticker { background: Canvas; color: CanvasText; }
  .editorial-ticker::before, .editorial-ticker::after { forced-color-adjust: none; background: linear-gradient(90deg, Canvas, transparent); }
  .editorial-ticker-track { animation: none; }
}
@media print {
  .px-chapter.is-motion-ready { height: auto; }
  .px-chapter.is-motion-ready .px-stage { position: relative; top: 0; height: auto; }
  .px-chapter.is-motion-ready :is(.px-title, .px-statement, .px-love, .px-info) { position: relative; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .px-chapter.is-motion-ready .px-statement-copy { opacity: 1 !important; visibility: visible !important; }
  .px-canvas, .px-marquee, .px-scroll-hint, .pesito-pixel-intro, .px-hello { display: none !important; }
  .px-statement, .px-love, .px-info :is(h2, h3, p) { color: CanvasText !important; }
  .px-character, .px-word, .px-info-cards > * { opacity: 1 !important; transform: none !important; }
  .editorial-gallery { height: auto !important; }
  .editorial-gallery.is-gallery-active .editorial-gallery-sticky { position: relative; height: auto; }
  .editorial-gallery.is-gallery-active .editorial-gallery-track { display: grid; width: auto; transform: none !important; }
  .editorial-gallery.is-gallery-active .editorial-gallery-track > .ed-showcase { width: 100%; }
  .editorial-ticker { display: none; }
}