/* rail-kit subset (22274d4) — generated by scripts/rail-subset.py for: scene, masthead, rating, faq, segmented, steps, chapters, photo, offer, folder, price, options, frame, readout, embed, masonry, post, shortcuts, list, filters, cta, merchant, place. Do not edit; re-run the script. */
/* ---- from rail.css ---- */
.rail-steps, .rail-post, .rail-filters, .rail-frame, .rail-list, .rail-faq, .rail-scene, .rail-embed, .rail-merchant, .rail-segmented, .rail-cta, .rail-options, .rail-price, .rail-rating, .rail-masonry, .rail-shortcuts, .rail-offer, .rail-folder, .rail-steps *, .rail-post *, .rail-filters *, .rail-frame *, .rail-list *, .rail-faq *, .rail-scene *, .rail-segmented *, .rail-cta *, .rail-options *, .rail-price *, .rail-rating *, .rail-masonry *, .rail-shortcuts *, .rail-offer *, .rail-folder *, .rail-masthead *, .rail-readout, .rail-readout *, .rail-place, .rail-place *, .rail-photo, .rail-photo *, .rail-chapters * {
  box-sizing: border-box;
  /* UNA PALABRA LARGA NO PUEDE MOVER LA PAGINA. El kit no elige el contenido:
     lo elige la marca, y el contenido real trae apellidos compuestos, correos,
     referencias y URLs sin un espacio donde romper. Medido inyectando una
     palabra de 34 caracteres en cada nodo de texto: 24 de las 86 stories
     desbordaban a lo ancho, hasta 1168 px en un viewport de 390.
     `break-word` solo parte la palabra CUANDO no cabe, asi que no cambia nada
     de lo que ya entra — y deja intacto el min-content, que es lo que otros
     componentes usan para dimensionarse. */
  overflow-wrap: anywhere;
}
.rail-steps, .rail-post, .rail-filters, .rail-frame, .rail-list, .rail-faq, .rail-scene, .rail-embed, .rail-merchant, .rail-segmented, .rail-cta, .rail-options, .rail-price, .rail-rating, .rail-masonry, .rail-shortcuts, .rail-offer, .rail-folder, .rail-masthead, .rail-readout, .rail-place, .rail-photo, .rail-chapters {
  --_gap: calc(var(--rail-gap, 20px) * var(--_space));
  --_width: var(--rail-card-width, 300px);
  --_accent: var(--rail-accent, currentColor);
  /* THE ACCENT AS TEXT IS A DIFFERENT COLOUR FROM THE ACCENT AS A FILL, and
     this alias is the only reason a brand does not have to know that fifteen
     times. An accent tuned for a filled button is routinely 3:1 or worse as
     13-15px text, which the axe gate has now caught on three separate
     components. A brand sets --rail-accent-text ONCE and every text use
     follows; leave it unset and nothing changes. */
  --_accent-text: var(--rail-accent-text, var(--_accent));
  --_radius: var(--rail-card-radius, 16px);
  --_bg: var(--rail-card-bg, rgba(255, 255, 255, 0.04));
  --_border: var(--rail-card-border, rgba(255, 255, 255, 0.12));
  --_text: var(--rail-text, inherit);
  --_muted: var(--rail-muted, rgba(255, 255, 255, 0.65));
  --_aspect: var(--rail-media-aspect, 4 / 3);
  --_shadow: var(--rail-card-shadow, 0 18px 40px -22px rgba(0, 0, 0, 0.9));

  /* ---- the three axes -------------------------------------------------
     Before this block a brand had to set ten separate sizes to look denser
     or calmer, and motion could not be themed at all: every duration and
     curve was a literal. Now a brand moves ONE number per axis and the kit
     follows.

     Every axis defaults to 1 and every step keeps the literal it already
     had, so a brand that sets nothing renders exactly what it rendered
     before. This is additive: the per-value tokens below still win when a
     brand sets them.

       .my-brand { --rail-density: 0.85; --rail-motion-scale: 0.7; }   */
  --_type: var(--rail-type-scale, 1);
  --_space: var(--rail-density, 1);
  --_motion: var(--rail-motion-scale, 1);

  --_text-2xs: calc(var(--rail-text-2xs, 11px) * var(--_type));
  --_text-xs: calc(var(--rail-text-xs, 13px) * var(--_type));
  --_text-sm: calc(var(--rail-text-sm, 13.5px) * var(--_type));
  --_text-md: calc(var(--rail-text-md, 14px) * var(--_type));

  --_space-2xs: calc(var(--rail-space-2xs, 4px) * var(--_space));
  --_space-xs: calc(var(--rail-space-xs, 6px) * var(--_space));
  --_space-sm: calc(var(--rail-space-sm, 10px) * var(--_space));
  --_space-md: calc(var(--rail-space-md, 12px) * var(--_space));
  --_space-lg: calc(var(--rail-space-lg, 16px) * var(--_space));
  --_space-s: calc(var(--rail-space-s, 8px) * var(--_space));
  --_space-3xs: calc(var(--rail-space-3xs, 2px) * var(--_space));
  --_space-xl: calc(var(--rail-space-xl, 18px) * var(--_space));
  --_space-2xl: calc(var(--rail-space-2xl, 20px) * var(--_space));
  --_space-3xl: calc(var(--rail-space-3xl, 22px) * var(--_space));
  /* Two steps the ramp was missing once 42 more components joined it. Added
     rather than snapping 14 to 16 and 24 to 22, because every axis so far has
     promised that a brand setting nothing renders exactly what it did. */
  --_space-mid: calc(var(--rail-space-mid, 14px) * var(--_space));
  --_space-4xl: calc(var(--rail-space-4xl, 24px) * var(--_space));
  --_text-lg: calc(var(--rail-text-lg, 14.5px) * var(--_type));
  --_text-xl: calc(var(--rail-text-xl, 17px) * var(--_type));
  --_track-wide: var(--rail-track-wide, 0.04em);
  --_track-wider: var(--rail-track-wider, 0.08em);
  --_pill: var(--rail-pill-radius, 999px);

  /* A control's tap target is the one value density must not be able to
     break: WCAG 2.2 AA wants 24px and this kit ships 44. max() means a
     brand can make the kit denser without configuring it below the floor. */
  --_control-min: max(24px, calc(var(--rail-control-min, 44px) * var(--_space)));
  --_control-min-sm: max(24px, calc(var(--rail-control-min-sm, 40px) * var(--_space)));

  /* Durations, not the number of passes: the sweep still runs three times
     and stops. A brand can slow it down; it cannot make it loop. */
  --_dur-fast: calc(var(--rail-motion-fast, 0.2s) * var(--_motion));
  --_dur-base: calc(var(--rail-motion-base, 0.28s) * var(--_motion));
  --_dur-slow: calc(var(--rail-motion-slow, 0.5s) * var(--_motion));
  --_dur-sweep: calc(var(--rail-motion-sweep, 2.6s) * var(--_motion));
  --_ease: var(--rail-motion-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  --_ease-soft: var(--rail-motion-ease-soft, ease);
  /* The AA tap floor. NOT scaled by density: a brand may make the kit denser,
     it may not configure itself below 24px. */
  --_tap-min: var(--rail-tap-min, 24px);
  --_ease-out: var(--rail-motion-ease-out, cubic-bezier(0.25, 0.46, 0.45, 0.94));
  color: var(--_text);
  container-type: inline-size;
}
.rail-segmented, .rail-cta {
  container-type: normal;
}
.rail-filters__list {
  display: flex;
  gap: var(--_space-s);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--_space-2xs);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.rail-filters__list::-webkit-scrollbar { display: none; }
.rail-filters__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--_space-xs);
  white-space: nowrap;
  /* WCAG AA tap target is 24px; 40 is comfortable for a thumb. */
  min-height: var(--_control-min-sm);
  padding: 0 var(--_space-lg);
  border-radius: var(--_pill);
  border: 1px solid var(--rail-card-border, rgba(255, 255, 255, 0.12));
  background: var(--rail-chip-bg, transparent);
  color: inherit;
  font-size: var(--_text-lg);
  font-weight: var(--rail-weight-medium, 500);
  text-decoration: none;
  cursor: pointer;
}
.rail-filters__chip[data-active] {
  background: var(--rail-chip-active-bg, var(--_accent));
  border-color: var(--rail-chip-active-bg, var(--_accent));
  color: var(--rail-chip-active-color, #fff);
}
.rail-filters__count {
  color: var(--rail-filters-count-color, currentColor);
  font-variant-numeric: tabular-nums;
}
.rail-filters :is(a, button):focus-visible {
  outline: 2px solid var(--rail-focus, currentColor);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.rail-filters__chip { transition: background-color var(--_dur-fast) var(--_ease-soft), border-color var(--_dur-fast) var(--_ease-soft), color var(--_dur-fast) var(--_ease-soft); }
}
.rail-frame {
  border-radius: var(--rail-frame-radius, calc(var(--_radius) + var(--_space-s)));
  padding: var(--rail-frame-inset, var(--_space-2xs));
  /* The frame is the only place the kit draws a filled accent area, so it
     takes its own token: a brand's button accent is often too loud at this
     size, and too quiet behind white type. */
  background: var(--rail-frame-bg, var(--_accent));
  color: var(--rail-frame-color, #fff);
  overflow: hidden;
}
.rail-frame__band {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--_space-2xs) var(--_space-sm);
  margin: 0;
  padding: var(--rail-frame-band-padding, var(--_space-s) var(--_space-md) var(--_space-sm));
  text-align: center;
}
.rail-frame__label {
  font-family: var(--rail-frame-label-font, var(--rail-heading-font, inherit));
  font-size: calc(var(--rail-frame-label-size, 15px) * var(--_type));
  font-weight: var(--rail-frame-label-weight, 800);
  letter-spacing: var(--rail-frame-label-tracking, 0.02em);
  text-transform: var(--rail-frame-label-transform, uppercase);
}
.rail-frame__presenter {
  display: inline-flex;
  align-items: baseline;
  gap: var(--_space-xs);
  font-size: calc(var(--rail-frame-presenter-size, 14px) * var(--_type));
}
.rail-frame__presenter-prefix { opacity: 0.85; }
.rail-frame__presenter-mark {
  display: inline-flex;
  align-items: center;
  min-height: var(--_tap-min);
  font-weight: var(--rail-frame-presenter-weight, 700);
  color: inherit;
}
a.rail-frame__presenter-mark { text-decoration: none; }
.rail-frame__presenter-mark :is(img, svg) {
  display: block;
  max-height: var(--rail-frame-presenter-logo-height, 18px);
  width: auto;
}
.rail-frame__body {
  border-radius: var(--_radius);
  overflow: hidden;
  /* The body is the host's own surface again: the frame colours its edge, not
     what sits inside it. */
  background: var(--rail-frame-body-bg, var(--_bg));
  color: var(--_text);
}
.rail-frame :is(a, button):focus-visible {
  outline: 2px solid var(--rail-focus, currentColor);
  outline-offset: 2px;
}
.rail-frame__body > .rail-versus, .rail-frame__body > .rail-list { border-radius: 0; }
.rail-list {
  display: flex;
  flex-direction: column;
  gap: var(--_space-md);
}
.rail-list__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--_space-lg);
}
.rail-list__eyebrow {
  margin: 0 0 var(--_space-2xs);
  font-size: calc(var(--rail-size-label, 12px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  letter-spacing: var(--rail-tracking-label, 0.1em);
  text-transform: uppercase;
  color: var(--rail-eyebrow-color, var(--_muted));
}
.rail-list__heading {
  margin: 0;
  font-family: var(--rail-heading-font, inherit);
  font-size: calc(var(--rail-heading-size, clamp(24px, 3vw, 34px)) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
  line-height: 1.1;
}
.rail-list__header-action {
  flex-shrink: 0;
  /* Measured at 55x18 by the brand check — under the 24px WCAG 2.2 AA floor.
     A text link is still a tap target. */
  display: inline-flex;
  align-items: center;
  min-height: var(--_tap-min);
  color: var(--rail-cta-link-color, var(--_accent-text));
  font-size: calc(var(--rail-size-meta, 15px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  text-decoration: none;
}
.rail-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: var(--_radius);
  background: var(--rail-list-bg, var(--_bg));
  overflow: hidden;
}
.rail-list__item + .rail-list__item {
  border-top: 1px solid var(--_border);
}
.rail-list__row {
  display: flex;
  align-items: center;
  gap: var(--_space-mid);
  /* 56 clears the 24px AA tap target with room for two lines of text. */
  min-height: var(--rail-list-row-height, 56px);
  padding: var(--rail-list-row-padding, var(--_space-mid) var(--_space-lg));
  color: inherit;
  text-decoration: none;
}
.rail-list__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--rail-icon-box, 34px);
  height: var(--rail-icon-box, 34px);
  border-radius: var(--rail-icon-radius, 10px);
  background: var(--rail-icon-bg, transparent);
  color: var(--_accent);
}
.rail-list__icon :is(img, svg) {
  display: block;
  width: var(--rail-icon-size, 22px);
  height: var(--rail-icon-size, 22px);
}
.rail-list__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--_space-3xs);
}
.rail-list__title {
  font-family: var(--rail-title-font, inherit);
  font-size: calc(var(--rail-list-title-size, 17px) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
  line-height: 1.25;
}
.rail-list__title-link { color: inherit; text-decoration: none; }
.rail-list__description {
  font-size: calc(var(--rail-list-description-size, 14.5px) * var(--_type));
  line-height: 1.4;
  color: var(--_muted);
}
.rail-list__value {
  flex-shrink: 0;
  font-size: calc(var(--rail-size-body, 16px) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
  font-variant-numeric: tabular-nums;
}
.rail-list__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rail-list-action-height, var(--_control-min-sm));
  padding: 0 var(--_space-xl);
  border-radius: var(--rail-cta-radius, var(--_pill));
  border: 1px solid var(--rail-cta-secondary-border, var(--_border));
  background: var(--rail-cta-secondary-bg, transparent);
  color: var(--rail-cta-secondary-color, var(--rail-cta-link-color, var(--_accent-text)));
  font-size: calc(var(--rail-size-meta, 15px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  text-decoration: none;
  white-space: nowrap;
}
.rail-list :is(a, button):focus-visible {
  outline: 2px solid var(--rail-focus, var(--_accent));
  outline-offset: -2px;
}
@media (prefers-reduced-motion: no-preference) {
.rail-list__row { transition: background-color var(--_dur-fast) var(--_ease-soft); }
}
@media (hover: hover) and (pointer: fine) {
a.rail-list__row:hover {
    background: var(--rail-list-row-hover-bg, color-mix(in srgb, currentColor 6%, transparent));
  }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
[data-rail-surface="glass"] :is(.rail-card, .rail-versus, .rail-list__items), .rail-list[data-rail-surface="glass"] .rail-list__items {
    position: relative;
    background: var(--rail-glass-bg, rgba(255, 255, 255, 0.07));
    -webkit-backdrop-filter: blur(var(--rail-glass-blur, 18px))
      saturate(var(--rail-glass-saturate, 1.7));
    backdrop-filter: blur(var(--rail-glass-blur, 18px))
      saturate(var(--rail-glass-saturate, 1.7));
    box-shadow: var(--rail-glass-shadow, 0 24px 60px -28px rgba(0, 0, 0, 0.85));
  }
[data-rail-surface="glass"] :is(.rail-card, .rail-versus, .rail-list__items)::before, .rail-list[data-rail-surface="glass"] .rail-list__items::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(
      --rail-glass-edge,
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.55),
        rgba(255, 255, 255, 0.12) 38%,
        rgba(255, 255, 255, 0.06)
      )
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}
.rail-faq { max-width: var(--rail-measure, 68ch); }
.rail-faq__heading {
  margin: 0 0 var(--_space-s);
  font-family: var(--rail-heading-font, inherit);
  font-size: calc(var(--rail-heading-size, clamp(24px, 3vw, 34px)) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
  line-height: 1.1;
}
.rail-faq details {
  /* El ATAJO va primero y el lado despues: `border` resetea los cuatro lados,
     asi que escribirlo debajo del `border-top` se lo comeria. Es la trampa que
     ya costo una sesion con `padding`. */
  border: var(--rail-faq-item-border, none);
  border-top: var(--rail-faq-item-border-top, 1px solid var(--_border));
  border-radius: var(--rail-faq-item-radius, 0);
  background: var(--rail-faq-item-bg, transparent);
  padding: var(--rail-faq-item-padding, 0);
}
.rail-faq details[open] { border-color: var(--rail-faq-open-border, currentColor); }
.rail-faq details + details { margin-top: var(--rail-faq-gap, 0); }
.rail-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--_space-4xl);
  /* 44 is the comfortable thumb target; AA's floor is 24. */
  min-height: var(--_control-min);
  padding: var(--rail-faq-padding, 28px 0);
  list-style: none;
  cursor: pointer;
}
.rail-faq summary::-webkit-details-marker { display: none; }
.rail-faq__q {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
  font-family: var(--rail-faq-q-font, var(--rail-title-font, inherit));
  font-size: calc(var(--rail-faq-q-size, clamp(20px, 2.8vw, 34px)) * var(--_type));
  font-weight: var(--rail-faq-q-weight, 400);
  line-height: 1.2;
  letter-spacing: var(--rail-tracking-tight, -0.018em);
}
.rail-faq__pm {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  /* La caja tiene que dar de si para la DIAGONAL del glifo: 15 px girados son
     21. Como la que gira es el glifo y no ella, agrandarla ya no agranda nada
     —ese fue mi primer intento y lo empeoro, de 396 a 397—. */
  width: var(--rail-faq-marker-box, 1.5em);
  /* Solo el ANCHO necesita sitio para la diagonal: lo que girado se sale por
     arriba o por abajo no ensancha nada. Con alto 1.5em la caja crecia a 36 px
     con un titulo de 24, alargaba cada fila 12 px y centraba el `+` por debajo
     de la primera linea de la pregunta (medido en thedancingchairs a 390 px:
     texto a 107, `+` a 114). El alto es el de la linea, como antes. */
  height: 1em;
  font-size: calc(var(--rail-size-title, 24px) * var(--_type));
  line-height: 1;
  color: var(--_muted);
}
.rail-faq details[open] .rail-faq__pm-glyph { transform: rotate(45deg); }
.rail-faq__a {
  padding: var(--rail-faq-answer-padding, 0 0 calc(var(--_space-md) * 2.5));
  max-width: var(--rail-measure, 44rem);
  color: var(--_muted);
  font-size: calc(var(--rail-faq-a-size, 18px) * var(--_type));
  line-height: var(--rail-faq-a-line, 1.62);
}
.rail-faq summary:focus-visible {
  outline: 2px solid var(--rail-focus, var(--_accent));
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.rail-faq__pm-glyph { transition: transform var(--_dur-base) var(--_ease); }
}
.rail-scene {
  display: grid;
  gap: var(--rail-scene-gap, clamp(var(--_space-4xl), 4vw, calc(var(--_space-4xl) * 2.34)));
  align-items: center;
}
.rail-scene__figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  /* The picture keeps its portrait shape. Cropping a portrait to a landscape
     band takes the top of somebody's head off. */
  aspect-ratio: var(--rail-scene-aspect, 4 / 5);
  outline: 1px solid var(--_border);
  outline-offset: -1px;
}
.rail-scene__figure > :is(img, video, iframe) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--rail-scene-focus, 50% 34%);
  display: block;
  border: 0;
}
.rail-scene__quote {
  margin: 0;
  font-family: var(--rail-scene-quote-font, var(--rail-heading-font, inherit));
  font-size: calc(var(--rail-scene-quote-size, clamp(24px, 3.6vw, 46px)) * var(--_type));
  font-weight: var(--rail-scene-quote-weight, 400);
  font-style: var(--rail-scene-quote-style, italic);
  line-height: 1.18;
  letter-spacing: var(--rail-tracking-tight, -0.02em);
  text-wrap: balance;
  max-width: 20ch;
}
.rail-scene__caption {
  margin: var(--rail-scene-caption-margin, clamp(var(--_space-2xl), 2.6vw, calc(var(--_space-md) * 2.5)) 0 0);
  font-size: calc(var(--rail-scene-caption-size, 12px) * var(--_type));
  letter-spacing: var(--rail-tracking-label, 0.1em);
  text-transform: uppercase;
  color: var(--_muted);
}
.rail-scene__caption::before {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  background: var(--_accent);
  margin: 0 0 var(--_space-lg);
}
@media (min-width: 860px) {
.rail-scene {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 0;
  }
.rail-scene__text {
    margin-inline-start: clamp(-140px, -9vw, -60px);
    position: relative;
    z-index: 1;
  }
.rail-scene__quote {
    text-shadow: var(
      --rail-scene-quote-shadow,
      0 2px 40px rgba(0, 0, 0, 0.85),
      0 1px 8px rgba(0, 0, 0, 0.6)
    );
  }
.rail-scene[data-rail-flip] .rail-scene__figure { order: 2; }
.rail-scene[data-rail-flip] .rail-scene__text {
    order: 1;
    margin-inline-start: 0;
    margin-inline-end: clamp(-140px, -9vw, -60px);
    text-align: end;
  }
.rail-scene[data-rail-flip] .rail-scene__quote { margin-inline-start: auto; }
.rail-scene[data-rail-flip] .rail-scene__caption::before { margin-inline-start: auto; }
}
.rail-list__image {
  flex-shrink: 0;
  display: block;
  width: var(--rail-list-image-width, 64px);
  aspect-ratio: var(--rail-list-image-aspect, 2 / 3);
  object-fit: cover;
  border-radius: var(--rail-list-image-radius, 6px);
}
.rail-list__note {
  font-size: calc(var(--rail-list-note-size, 14px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  line-height: 1.35;
  color: var(--rail-list-note-color, var(--_accent-text));
}
.rail-list__chevron {
  flex-shrink: 0;
  font-size: calc(var(--rail-size-title, 22px) * var(--_type));
  line-height: 1;
  color: var(--_muted);
}
.rail-segmented {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--_space-2xs);
  padding: var(--rail-segmented-inset, var(--_space-2xs));
  border-radius: var(--rail-segmented-radius, var(--_pill));
  background: var(--rail-segmented-bg, color-mix(in srgb, currentColor 8%, transparent));
}
.rail-segmented::-webkit-scrollbar { display: none; }
.rail-segmented[data-rail-block] { display: flex; width: 100%; }
.rail-segmented[data-rail-block] .rail-segmented__segment { flex: 1; }
.rail-segmented__segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_space-s);
  min-height: var(--rail-segmented-height, var(--_control-min-sm));
  padding: 0 var(--_space-xl);
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--_muted);
  font-family: inherit;
  font-size: calc(var(--rail-size-body, 16px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.rail-segmented__segment[data-active] {
  background: var(--rail-segmented-active-bg, color-mix(in srgb, currentColor 12%, transparent));
  color: var(--rail-segmented-active-color, var(--_accent-text));
}
.rail-segmented__icon { display: grid; place-items: center; }
.rail-segmented__icon :is(svg, img) {
  width: var(--rail-icon-size, 18px);
  height: var(--rail-icon-size, 18px);
  display: block;
}
.rail-segmented :is(a, button):focus-visible {
  outline: 2px solid var(--rail-focus, var(--_accent));
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.rail-segmented__segment { transition: background-color var(--_dur-fast) var(--_ease-soft), color var(--_dur-fast) var(--_ease-soft); }
}
.rail-cta {
  display: inline-grid;
  justify-items: center;
  gap: var(--_space-3xs);
  min-height: var(--rail-cta-height, 48px);
  padding: var(--rail-cta-padding, var(--_space-sm) var(--_space-3xl));
  border: 1px solid transparent;
  border-radius: var(--rail-cta-radius, var(--_pill));
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.rail-cta[data-rail-block] { display: grid; width: 100%; }
.rail-cta[data-rail-size="lg"] { min-height: var(--rail-cta-height-lg, 64px); }
.rail-cta[data-rail-stacked] { padding: var(--rail-cta-padding-stacked, var(--_space-md) var(--_space-3xl)); }
.rail-cta[data-rail-variant="primary"] {
  background: var(--rail-cta-bg, var(--_accent));
  color: var(--rail-cta-color, #fff);
  border-color: var(--rail-cta-bg, var(--_accent));
}
.rail-cta[data-rail-variant="secondary"] {
  background: var(--rail-cta-secondary-bg, transparent);
  color: var(--rail-cta-secondary-color, inherit);
  border-color: var(--rail-cta-secondary-border, var(--_border));
}
.rail-cta[data-rail-variant="link"] {
  /* Sin caja, pero SIGUE siendo un objetivo. Con `min-height: 0` medi­a 60x20
     y el suelo AA son 24 px. Se lo queda como alto minimo: no pinta nada
     —fondo none, borde 0— y se puede tocar. */
  min-height: var(--_tap-min);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--rail-cta-link-color, var(--_accent-text));
}
.rail-cta[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.rail-cta__main {
  display: inline-flex;
  align-items: center;
  gap: var(--_space-sm);
  font-size: calc(var(--rail-size-body, 17px) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
}
.rail-cta[data-rail-size="lg"] .rail-cta__main {
  font-size: calc(var(--rail-cta-label-size-lg, 24px) * var(--_type));
  letter-spacing: var(--rail-tracking-wide, 0.02em);
}
.rail-cta__eyebrow, .rail-cta__fineprint {
  font-size: calc(var(--rail-size-micro, 12px) * var(--_type));
  font-weight: var(--rail-weight-medium, 500);
  /* Not muted: on a filled button the "muted" token is tuned for the page, not
     for the accent, and it routinely fails contrast against it. Transparency
     of the button's own text colour cannot. */
  opacity: 0.85;
}
.rail-cta__icon { display: grid; place-items: center; }
.rail-cta__icon :is(svg, img) {
  width: var(--rail-icon-size, 22px);
  height: var(--rail-icon-size, 22px);
  display: block;
}
.rail-cta:focus-visible {
  outline: 2px solid var(--rail-focus, var(--_accent));
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
.rail-cta { transition: filter var(--_dur-fast) var(--_ease-soft), background-color var(--_dur-fast) var(--_ease-soft); }
}
@media (hover: hover) and (pointer: fine) {
.rail-cta:not([disabled]):hover { filter: brightness(1.08); }
}
.rail-options {
  display: grid;
  grid-template-columns: repeat(var(--_cols, 3), minmax(0, 1fr));
  gap: var(--rail-options-gap, var(--_space-s));
}
.rail-options__option {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--_space-3xs);
  /* 56 gives two lines of text a comfortable thumb target. */
  min-height: var(--rail-options-height, 56px);
  padding: var(--_space-s) var(--_space-sm);
  border: 1px solid var(--rail-options-border, transparent);
  border-radius: var(--rail-options-radius, var(--_radius));
  background: var(--rail-options-bg, color-mix(in srgb, currentColor 8%, transparent));
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}
.rail-options__option[aria-checked="true"] {
  border-color: var(--rail-options-active-border, var(--_accent));
  background: var(--rail-options-active-bg, color-mix(in srgb, var(--_accent) 16%, transparent));
}
.rail-options__option[disabled] { opacity: 0.45; cursor: not-allowed; }
.rail-options__eyebrow {
  font-size: calc(var(--rail-size-micro, 11px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  letter-spacing: var(--rail-tracking-label, 0.1em);
  text-transform: uppercase;
  color: var(--_muted);
}
.rail-options__line {
  font-size: calc(var(--rail-size-body, 16px) * var(--_type));
  font-variant-numeric: tabular-nums;
}
.rail-options__price {
  font-size: calc(var(--rail-size-body, 17px) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
  font-variant-numeric: tabular-nums;
  color: var(--rail-options-price-color, var(--_accent-text));
}
.rail-options__option:focus-visible {
  outline: 2px solid var(--rail-focus, var(--_accent));
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
.rail-options__option { transition: background-color var(--_dur-fast) var(--_ease-soft), border-color var(--_dur-fast) var(--_ease-soft); }
}
.rail-filters__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.rail-filters__icon :is(svg, img) {
  width: var(--rail-icon-size, 20px);
  height: var(--rail-icon-size, 20px);
  display: block;
}
.rail-filters__chip { gap: var(--_space-s); }
@supports (mask-image: linear-gradient(to right, transparent, black)) {
.rail-filters__list {
    mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - var(--rail-filters-fade, 32px)),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - var(--rail-filters-fade, 32px)),
      transparent 100%
    );
  }
}
.rail-filters[data-rail-wrap] .rail-filters__list {
  flex-wrap: wrap;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}
.rail-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--_space-s);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.rail-price__prefix, .rail-price__was, .rail-price__secondary {
  font-size: calc(var(--rail-size-meta, 15px) * var(--_type));
  color: var(--_muted);
}
.rail-price__now {
  display: inline-flex;
  align-items: baseline;
  color: var(--rail-price-color, inherit);
}
.rail-price__currency {
  font-size: calc(var(--rail-price-currency-size, 0.62em) * var(--_type));
  align-self: flex-start;
  padding-top: 0.22em;
}
.rail-price__whole {
  font-family: var(--rail-stat-font, inherit);
  font-size: calc(var(--rail-price-size, 26px) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
  line-height: 1;
  letter-spacing: var(--rail-tracking-tight, -0.02em);
}
.rail-price[data-rail-size="lg"] .rail-price__whole {
  font-size: calc(var(--rail-price-size-lg, 38px) * var(--_type));
}
.rail-price__cents {
  font-size: calc(var(--rail-price-cents-size, 0.62em) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
}
.rail-price__unit {
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  font-weight: var(--rail-weight-medium, 500);
  color: var(--_muted);
  margin-inline-start: var(--_space-3xs);
}
.rail-price__off {
  font-size: calc(var(--rail-size-meta, 15px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  color: var(--rail-price-off-color, var(--rail-tone-down, #e2585f));
}
.rail-price__secondary { flex-basis: 100%; }
.rail-price__secondary-amount {
  font-weight: var(--rail-weight-bold, 700);
  color: var(--rail-price-secondary-color, var(--rail-tone-down, #e2585f));
}
.rail-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--_space-xs);
  margin: 0;
  font-size: calc(var(--rail-size-meta, 15px) * var(--_type));
  color: var(--_muted);
}
.rail-rating__value {
  font-weight: var(--rail-weight-semibold, 600);
  color: var(--_text);
  font-variant-numeric: tabular-nums;
}
.rail-rating__stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: calc(var(--rail-rating-star-size, 14px) * var(--_type));
  letter-spacing: var(--rail-rating-star-gap, 1px);
  color: var(--rail-rating-track, color-mix(in srgb, currentColor 30%, transparent));
}
.rail-rating__stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--rail-rating-color, #f0b429);
}
.rail-rating__stars-track { visibility: visible; }
.rail-rating__count { font-variant-numeric: tabular-nums; }
.rail-rating__meta::before {
  content: "|";
  margin-inline-end: var(--_space-xs);
  opacity: 0.45;
}
.rail-rating__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rail-masonry {
  --_cols: 2;
  column-count: var(--_cols);
  column-gap: var(--rail-masonry-gap, var(--_space-md));
}
@media (min-width: 720px) {
.rail-masonry[data-rail-columns="3"] { --_cols: 3; }
.rail-masonry[data-rail-columns="4"] { --_cols: 4; }
}
.rail-masonry[data-rail-balanced] {
  display: grid;
  grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
  grid-auto-rows: 1px;
  row-gap: 0;
  align-items: start;
  column-count: auto;
}
.rail-masonry[data-rail-balanced] > * {
  margin-bottom: 0;
}
.rail-masonry > * {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--rail-masonry-gap, var(--_space-md));
  display: block;
}
.rail-shortcuts__list {
  display: flex;
  gap: var(--rail-shortcuts-gap, var(--_space-mid));
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail-shortcuts__list::-webkit-scrollbar { display: none; }
.rail-shortcuts[data-rail-wrap] .rail-shortcuts__list {
  flex-wrap: wrap;
  overflow: visible;
  justify-content: center;
}
.rail-shortcuts__item { flex: 0 0 auto; }
.rail-shortcuts__shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_space-s);
  width: var(--rail-shortcuts-width, 76px);
  padding: var(--_space-2xs) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.rail-shortcuts__glyph {
  display: grid;
  place-items: center;
  width: var(--rail-shortcuts-glyph-box, 56px);
  height: var(--rail-shortcuts-glyph-box, 56px);
  border-radius: var(--rail-shortcuts-glyph-radius, var(--_pill));
  background: var(--rail-shortcuts-glyph-bg, transparent);
  font-size: calc(var(--rail-shortcuts-glyph-size, 40px) * var(--_type));
  line-height: 1;
}
.rail-shortcuts__glyph :is(svg, img) {
  width: var(--rail-shortcuts-glyph-size, 40px);
  height: var(--rail-shortcuts-glyph-size, 40px);
  display: block;
}
.rail-shortcuts__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  text-align: center;
}
.rail-shortcuts :is(a, button):focus-visible {
  outline: 2px solid var(--rail-focus, var(--_accent));
  outline-offset: 3px;
  border-radius: var(--rail-shortcuts-focus-radius, var(--_space-s));
}
.rail-offer {
  --_notch: var(--rail-offer-notch, 11px);
  --_notch-at: var(--rail-offer-notch-at, 76%);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--_space-mid);
  padding: var(--rail-offer-padding, var(--_space-mid) var(--_space-xl));
  border-radius: var(--rail-offer-radius, 14px);
  background: var(--rail-offer-bg, color-mix(in srgb, var(--_accent) 14%, transparent));
  -webkit-mask:
    radial-gradient(var(--_notch) at var(--_notch-at) 0, transparent 99%, #000 100%) 0 0 / 100% 51% no-repeat,
    radial-gradient(var(--_notch) at var(--_notch-at) 100%, transparent 99%, #000 100%) 0 100% / 100% 51% no-repeat;
  mask:
    radial-gradient(var(--_notch) at var(--_notch-at) 0, transparent 99%, #000 100%) 0 0 / 100% 51% no-repeat,
    radial-gradient(var(--_notch) at var(--_notch-at) 100%, transparent 99%, #000 100%) 0 100% / 100% 51% no-repeat;
}
.rail-offer::after {
  content: "";
  position: absolute;
  top: var(--_notch);
  bottom: var(--_notch);
  inset-inline-start: var(--_notch-at);
  border-inline-start: 1px dashed var(--rail-offer-perforation, color-mix(in srgb, currentColor 30%, transparent));
}
.rail-offer[data-rail-stub]::after { display: none; }
.rail-offer[data-rail-stub] :is(.rail-offer__action, .rail-offer__claimed) {
  position: relative;
}
.rail-offer[data-rail-stub] :is(.rail-offer__action, .rail-offer__claimed)::before {
  content: "";
  position: absolute;
  inset-block: -100vh;
  inset-inline-start: calc(var(--_space-mid) / -2);
  /* The strip's ink, not the button's: currentColor in here is the label
     colour, which on a filled button is the one colour guaranteed to vanish
     against the strip. */
  color: var(--_accent-text);
  border-inline-start: 1px dashed var(--rail-offer-perforation, color-mix(in srgb, currentColor 30%, transparent));
  pointer-events: none;
}
.rail-offer[data-rail-claimed] {
  background: var(--rail-offer-claimed-bg, color-mix(in srgb, var(--_accent) 6%, transparent));
}
.rail-offer[data-rail-claimed] .rail-offer__glyph {
  opacity: var(--rail-offer-claimed-glyph-opacity, 0.55);
}
.rail-offer__glyph {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--rail-offer-glyph-box, 44px);
  height: var(--rail-offer-glyph-box, 44px);
  border-radius: var(--rail-offer-glyph-radius, var(--_space-md));
  background: var(--rail-offer-glyph-bg, var(--_accent));
  color: var(--rail-offer-glyph-color, #fff);
  font-size: calc(var(--rail-size-title, 22px) * var(--_type));
  line-height: 1;
}
.rail-offer__glyph :is(svg, img) {
  width: var(--rail-size-title, 22px);
  height: var(--rail-size-title, 22px);
  display: block;
}
.rail-offer__text { flex: 1; min-width: 0; }
.rail-offer__headline {
  margin: 0;
  font-size: calc(var(--rail-size-body, 17px) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
  line-height: 1.25;
}
.rail-offer__validity {
  display: flex;
  align-items: center;
  gap: var(--_space-3xs);
  margin: var(--_space-3xs) 0 0;
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  /* Its own knob, not --_muted. The offer strip paints a tinted surface, so a
     muted value tuned against the page background can land under 4.5:1 on it
     (axe measured 3.04). A brand must be able to fix the offer without
     lifting muted text everywhere else. */
  color: var(--rail-offer-meta-color, var(--_muted));
}
.rail-offer__explain {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rail-offer__action {
  min-width: 0;
  flex-shrink: 0;
  /* A long label wraps inside the button rather than pushing the strip
     wider than the screen (long-word-sweep). */
  max-width: 50%;
  overflow-wrap: anywhere;
  text-align: center;
  display: inline-flex;
  align-items: center;
  min-height: var(--rail-offer-action-height, var(--_control-min-sm));
  padding: 0 var(--_space-xl);
  border: 0;
  border-radius: var(--rail-cta-radius, var(--_pill));
  background: var(--rail-offer-action-bg, var(--rail-cta-bg, var(--_accent)));
  color: var(--rail-offer-action-color, var(--rail-cta-color, #fff));
  font: inherit;
  font-size: calc(var(--rail-size-body, 15px) * var(--_type));
  font-weight: var(--rail-weight-bold, 700);
  text-decoration: none;
  cursor: pointer;
}
.rail-offer__claimed {
  flex-shrink: 0;
  font-size: calc(var(--rail-size-meta, 15px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  color: var(--rail-offer-meta-color, var(--_muted));
}
.rail-offer__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.rail-offer :is(a, button):focus-visible {
  outline: 2px solid var(--rail-focus, var(--_accent));
  outline-offset: 2px;
}
.rail-embed__frame {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--rail-embed-radius, 12px);
}
.rail-embed__facade {
  display: flex;
  align-items: center;
  gap: var(--_space-mid);
  padding: var(--rail-embed-padding, var(--_space-mid));
  border: 1px solid var(--rail-embed-border, var(--_border));
  border-radius: var(--rail-embed-radius, 12px);
  background: var(--rail-embed-bg, transparent);
  color: var(--_text);
}
.rail-embed__image {
  flex-shrink: 0;
  width: var(--rail-embed-art, 96px);
  height: var(--rail-embed-art, 96px);
  object-fit: cover;
  border-radius: var(--rail-embed-art-radius, 8px);
}
.rail-embed__glyph {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: var(--rail-embed-art, 96px);
  height: var(--rail-embed-art, 96px);
}
.rail-embed__text { min-width: 0; }
.rail-embed__heading {
  margin: 0;
  font-weight: var(--rail-weight-semibold, 600);
  font-size: calc(var(--rail-size-body, 16px) * var(--_type));
}
.rail-embed__body {
  margin: var(--_space-3xs) 0 0;
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  color: var(--_muted);
}
.rail-embed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_space-md);
  margin-top: var(--_space-md);
}
.rail-embed__load, .rail-embed__out {
  min-height: var(--_tap-min);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--rail-weight-semibold, 600);
  font-size: calc(var(--rail-size-meta, 15px) * var(--_type));
  cursor: pointer;
  text-decoration: none;
}
.rail-embed__load { color: var(--rail-embed-load-color, var(--_accent-text)); }
.rail-embed__out { color: var(--rail-embed-out-color, var(--_text)); }
.rail-embed :is(a, button):focus-visible {
  outline: 2px solid var(--rail-focus, currentColor);
  outline-offset: 2px;
}
.rail-merchant__heading {
  margin: 0 0 var(--_space-md);
  font-size: calc(var(--rail-heading-size, clamp(22px, 3vw, 30px)) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
}
.rail-merchant__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rail-merchant__row {
  display: flex;
  align-items: center;
  gap: var(--_space-md);
  border-bottom: 1px solid var(--rail-merchant-divider, var(--_border));
}
.rail-merchant__row:last-child { border-bottom: 0; }
.rail-merchant__link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--_space-md);
  padding: var(--rail-merchant-padding, var(--_space-md) 0);
  color: inherit;
  text-decoration: none;
}
.rail-merchant__logo {
  flex-shrink: 0;
  width: var(--rail-merchant-logo, 44px);
  height: var(--rail-merchant-logo, 44px);
  border-radius: var(--rail-merchant-logo-radius, 50%);
  object-fit: cover;
  display: grid;
  place-items: center;
}
.rail-merchant__logo--letter {
  background: var(--rail-merchant-logo-bg, color-mix(in srgb, currentColor 12%, transparent));
  font-weight: var(--rail-weight-semibold, 600);
}
.rail-merchant__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--_space-3xs);
}
.rail-merchant__name { font-weight: var(--rail-weight-semibold, 600); }
.rail-merchant__meta {
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  color: var(--_muted);
}
.rail-merchant__offer {
  font-size: calc(var(--rail-size-meta, 13px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  color: var(--rail-merchant-offer-color, var(--_accent-text));
}
.rail-merchant__tags { display: flex; flex-wrap: wrap; gap: var(--_space-3xs); }
.rail-merchant__tag {
  font-size: calc(var(--rail-size-meta, 12px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  padding: 1px var(--_space-3xs);
  border: 1px solid var(--rail-merchant-tag-border, var(--_border));
  border-radius: var(--rail-merchant-tag-radius, 4px);
  color: var(--rail-merchant-tag-color, var(--_text));
}
.rail-merchant__unavailable {
  font-size: calc(var(--rail-size-meta, 13px) * var(--_type));
  color: var(--rail-merchant-unavailable-color, var(--_muted));
}
.rail-merchant__row[data-rail-unavailable] .rail-merchant__logo { opacity: 0.5; }
.rail-merchant__favourite {
  flex-shrink: 0;
  min-width: var(--_tap-min);
  min-height: var(--_tap-min);
  border: 0;
  background: none;
  color: var(--rail-merchant-favourite-color, var(--_text));
  font-size: calc(var(--rail-size-body, 18px) * var(--_type));
  cursor: pointer;
}
.rail-merchant :is(a, button):focus-visible {
  outline: 2px solid var(--rail-focus, currentColor);
  outline-offset: 2px;
}
.rail-folder {
  display: block;
  color: var(--_text, currentColor);
}
.rail-folder__tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--rail-folder-gap, 3px);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0 var(--rail-folder-inset, 10px);
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}
.rail-folder__tabs::-webkit-scrollbar { display: none; }
.rail-folder__tab {
  flex: 0 0 auto;
  display: inline-flex;
  /* LOS ROTULOS COMPARTEN LINEA DE BASE, Y ANTES BAILABAN. El escalon hace la
     pestana mas alta segun su indice -esa es la intencion: se cortan arriba-
     pero con el contenido centrado el TEXTO subia con la caja. Medido en el
     consumidor: cinco pestanas con la linea de base en y=46, 44, 42, 40, 46.
     Una fila de palabras a cinco alturas distintas se lee como desalineacion,
     que es justo lo que el escalon queria evitar.
     Anclado abajo, escalona el canto superior y no el texto. */
  align-items: flex-end;
  padding-bottom: var(--rail-folder-tab-pad-b, 11px);
  gap: var(--_space-s, 8px);
  min-height: var(--rail-folder-tab-height, 40px);
  padding: 0 var(--rail-folder-tab-pad, 15px);
  border: 1px solid var(--_border, currentColor);
  border-bottom-color: transparent;
  border-radius: var(--rail-folder-tab-radius, 9px) var(--rail-folder-tab-radius, 9px) 0 0;
  background: var(--rail-folder-tab-bg, transparent);
  color: inherit;
  font: inherit;
  font-size: var(--rail-folder-tab-size, 13px);
  cursor: pointer;
  /* THE STEP CHANGES THE TAB'S HEIGHT, NOT ITS BOTTOM EDGE, and the first
     version had it backwards. Stepping the bottom margin lifted the inactive
     tabs OFF the sheet: in a drawer they all rest on the same edge — what
     varies is where they are cut at the top, which is how you can read them
     all at once. Lifted instead, the row reads as a misalignment, and that is
     exactly how it looked in review. */
  padding-top: calc(var(--rail-folder-i, 0) * var(--rail-folder-step, 0px));
}
.rail-folder[data-rail-tone="drawer"] .rail-folder__tab {
  --rail-folder-step: 3px;
}
.rail-folder__tab[aria-selected="true"] {
  background: var(--rail-folder-sheet-bg, var(--_card-bg, transparent));
  border-color: var(--_accent, currentColor);
  border-bottom-color: transparent;
  color: var(--_accent-text, inherit);
}
.rail-folder__tab:focus-visible {
  outline: 2px solid var(--_accent, currentColor);
  outline-offset: 2px;
}
.rail-folder__badge {
  font-size: var(--rail-folder-badge-size, 11px);
  opacity: 0.75;
}
.rail-folder__sheet {
  border: 1px solid var(--_border, currentColor);
  border-radius: 0 var(--rail-folder-radius, 12px) var(--rail-folder-radius, 12px)
    var(--rail-folder-radius, 12px);
  background: var(--rail-folder-sheet-bg, var(--_card-bg, transparent));
  padding: var(--rail-folder-pad, 18px);
}
.rail-folder__sheet:focus-visible {
  outline: 2px solid var(--_accent, currentColor);
  outline-offset: -3px;
}
@media (prefers-reduced-motion: no-preference) {
.rail-folder__sheet {
    animation: rail-folder-sale var(--rail-folder-speed, 0.26s) var(--_ease);
  }
.rail-folder__tab {
    transition: background var(--rail-folder-speed, 0.26s) ease,
      border-color var(--rail-folder-speed, 0.26s) ease;
  }
}
@keyframes rail-folder-sale {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.rail-filters__chip--icon {
  flex: 0 0 auto;
  justify-content: center;
  width: var(--rail-filters-icon-size, 40px);
  height: var(--rail-filters-icon-size, 40px);
  aspect-ratio: 1;
  padding: 0;
  border-radius: 100%;
}
.rail-masthead { color: var(--_text); }
.rail-masthead__top {
  display: flex;
  justify-content: space-between;
  gap: var(--_space-md);
  flex-wrap: wrap;
  margin: 0 0 var(--_space-lg);
  padding-top: var(--_space-md);
  border-top: 1px solid var(--_border);
  font-size: var(--_text-xs);
}
.rail-masthead__counter { color: var(--_muted); text-align: end; }
.rail-masthead__title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--_space-lg);
}
.rail-masthead__title :is(h1, h2, h3) {
  margin: 0;
  font-size: var(--rail-masthead-size, clamp(40px, 6.5vw, 86px));
  line-height: var(--rail-masthead-leading, .98);
  letter-spacing: var(--rail-masthead-tracking, -.045em);
  font-weight: var(--rail-masthead-weight, 400);
}
.rail-masthead__controls { flex: none; display: flex; gap: var(--_space-xs); }
.rail-masthead__lede { margin: var(--_space-md) 0 0; color: var(--_muted); font-size: var(--_text-md); }
@media (max-width: 720px) {
.rail-masthead__title { display: block; }
.rail-masthead__controls { margin-top: var(--_space-md); }
}
.rail-steps {
  display: flex;
  flex-direction: column;
  gap: var(--rail-steps-gap, var(--_space-sm));
}
.rail-steps__track {
  display: flex;
  gap: var(--rail-steps-seg-gap, var(--_space-xs));
}
.rail-steps__seg {
  flex: 1 1 0;
  height: var(--rail-steps-height, 3px);
  border-radius: var(--rail-steps-radius, var(--_pill));
  background: var(--rail-steps-pending, var(--_border));
}
.rail-steps__seg[data-done] {
  background: var(--rail-steps-done, currentColor);
}
.rail-steps__label {
  margin: 0;
  color: var(--rail-steps-label-color, var(--_muted));
  font-size: calc(var(--rail-steps-label-size, 13px) * var(--_type));
}
.rail-post {
  display: flex;
  flex-direction: column;
  gap: var(--rail-post-gap, var(--_space-sm));
  padding: var(--rail-post-pad, var(--_space-md));
  background: var(--rail-post-bg, var(--_bg));
  border-radius: var(--rail-post-radius, var(--_radius));
  color: inherit;
}
.rail-post__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rail-post-gap, var(--_space-sm));
}
.rail-post__overflow {
  flex: 0 0 auto;
}
.rail-post__body {
  margin: 0;
  color: var(--rail-post-color, inherit);
}
.rail-post__body[data-clamped] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rail-post-clamp, 3);
  line-clamp: var(--rail-post-clamp, 3);
  overflow: hidden;
}
.rail-post__more {
  align-self: flex-start;
  min-height: var(--_control-min-sm);
  padding: 0;
  border: 0;
  background: transparent;
  /* NO VA EN EL ACENTO, y es la cuarta vez que esta misma decision se corrige
     en este kit. Medido por axe sobre la marca de Geebs: acento #b91c1c sobre
     #111 da 2,91:1, y el suelo para texto pequeno es 4,5:1. «Ver mas» no es
     un adorno: es el control que decide si se lee el resto del mensaje.
     El color lo pone el texto normal y el afordance lo llevan el subrayado y
     el peso — que se ven igual sin distinguir tonos. */
  color: var(--rail-post-more-color, var(--_text));
  font: inherit;
  font-weight: var(--rail-post-more-weight, 600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.rail-post__attachment {
  border-radius: var(--rail-post-attachment-radius, var(--_radius));
  overflow: hidden;
}
.rail-post__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rail-post-gap, var(--_space-sm));
}
.rail-readout {
  padding: var(--_space-sm);
  border-radius: var(--rail-readout-radius, var(--rail-card-radius, 12px));
  background: var(--rail-readout-bg, color-mix(in srgb, currentColor 8%, transparent));
}
.rail-readout__heading {
  margin: 0 0 var(--_space-sm);
  font-size: calc(var(--rail-readout-heading-size, 22px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
}
.rail-readout__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--_space-md);
}
.rail-readout__item, .rail-readout__link {
  display: flex;
  align-items: flex-start;
  gap: var(--_space-sm);
  color: inherit;
  text-decoration: none;
  min-inline-size: 0;
}
.rail-readout__block {
  flex: 0 0 auto;
  inline-size: var(--rail-readout-block, 116px);
  min-block-size: var(--rail-readout-block, 116px);
  display: grid;
  place-content: center;
  place-items: center;
  border-radius: var(--rail-readout-block-radius, 8px);
  background: var(--rail-readout-block-bg, color-mix(in srgb, currentColor 10%, transparent));
  text-align: center;
  padding: var(--_space-2xs);
  /* The value is sometimes a WORD, not a figure. "Holding" at a fixed 30px
     measured 106px inside 108px of clearance — not broken, and two pixels
     from it, which a longer state or a denser brand closes immediately. The
     block sizes its own text now. */
  container-type: inline-size;
}
.rail-readout__value {
  font-size: calc(
    clamp(
      var(--rail-readout-value-min, 18px),
      var(--rail-readout-value-scale, 24cqi),
      var(--rail-readout-value-size, 30px)
    ) * var(--_type)
  );
  font-weight: var(--rail-weight-semibold, 600);
  line-height: 1.1;
}
.rail-readout__unit {
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  color: var(--_muted);
}
.rail-readout__text {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: grid;
  gap: var(--_space-2xs);
}
.rail-readout__title {
  font-size: calc(var(--rail-readout-title-size, 20px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
}
.rail-readout__body {
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  color: var(--_muted);
}
.rail-readout a:focus-visible {
  outline: 2px solid var(--rail-focus, currentColor);
  outline-offset: 2px;
}
.rail-plans .rail-price__unit {
  margin-inline-start: var(--_space-2xs);
}
.rail-place__heading {
  margin: 0 0 var(--_space-sm);
  font-size: calc(var(--rail-place-heading-size, 22px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
}
.rail-place__map {
  display: block;
  aspect-ratio: var(--rail-place-map-aspect, 16 / 9);
  border-radius: var(--rail-place-radius, var(--rail-card-radius, 12px));
  background: var(--rail-place-map-bg, color-mix(in srgb, currentColor 10%, transparent));
  overflow: hidden;
}
.rail-place__map > * {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.rail-place__where {
  display: grid;
  gap: var(--_space-3xs);
  padding-block: var(--_space-sm);
}
.rail-place__travel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--_space-sm);
  margin: 0;
}
.rail-place__time {
  display: flex;
  align-items: center;
  gap: var(--_space-2xs);
  font-size: calc(var(--rail-place-time-size, 20px) * var(--_type));
  font-weight: var(--rail-weight-semibold, 600);
  min-inline-size: 0;
}
.rail-place__distance {
  color: var(--_muted);
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
}
.rail-place__address {
  font-style: normal;
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  color: var(--_muted);
}
.rail-place__actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--_space-2xs);
  overflow-x: auto;
  scrollbar-width: none;
}
.rail-place__actions::-webkit-scrollbar {
  display: none;
}
.rail-place__action-cell {
  flex: 0 0 auto;
}
.rail-place__action {
  display: flex;
  align-items: center;
  gap: var(--_space-2xs);
  min-block-size: max(var(--_tap-min), var(--rail-place-act-height, 44px));
  padding-inline: var(--_space-md);
  border: 0;
  border-radius: var(--rail-place-act-radius, 999px);
  background: var(--rail-place-act-bg, color-mix(in srgb, currentColor 10%, transparent));
  color: inherit;
  text-decoration: none;
  font: inherit;
  font-weight: var(--rail-weight-semibold, 600);
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  white-space: nowrap;
  cursor: pointer;
}
.rail-place__action[data-rail-primary] {
  background: var(--rail-place-primary-bg, var(--_accent));
  color: var(--rail-place-primary-color, #fff);
}
.rail-place a:focus-visible, .rail-place button:focus-visible {
  outline: 2px solid var(--rail-focus, currentColor);
  outline-offset: 2px;
}
.rail-photo {
  margin: 0;
  display: grid;
  gap: var(--_space-xs);
}
.rail-photo__frame {
  position: relative;
  display: block;
}
.rail-photo__art {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: var(--rail-photo-radius, 0);
}
.rail-photo__expand {
  position: absolute;
  inset-block-end: var(--_space-2xs);
  inset-inline-start: var(--_space-2xs);
  min-inline-size: max(var(--_tap-min), var(--rail-photo-expand, 34px));
  min-block-size: max(var(--_tap-min), var(--rail-photo-expand, 34px));
  inline-size: max(var(--_tap-min), var(--rail-photo-expand, 34px));
  display: grid;
  place-items: center;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  border-radius: var(--rail-photo-expand-radius, 6px);
  background: var(--rail-photo-expand-bg, rgba(0, 0, 0, 0.62));
  color: var(--rail-photo-expand-color, #fff);
  font: inherit;
  cursor: pointer;
}
.rail-photo__caption {
  font-size: calc(var(--rail-size-meta, 14px) * var(--_type));
  color: var(--_muted);
}
.rail-photo__credit {
  margin-inline-start: var(--_space-3xs);
  opacity: var(--rail-photo-credit-opacity, 0.85);
}
.rail-photo button:focus-visible {
  outline: 2px solid var(--rail-focus, currentColor);
  outline-offset: 2px;
}
.rail-chapters {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--_gap);
}
.rail-chapters__index {
  position: sticky;
  inset-block-start: var(--rail-chapters-top, 0);
  z-index: 1;
  align-self: start;
  padding-block: var(--_space-sm);
  background: var(--rail-chapters-bg, transparent);
}
.rail-chapters__label {
  margin: 0;
  font-size: var(--rail-chapters-label-size, 0.75rem);
  letter-spacing: var(--rail-chapters-label-track, 0.08em);
  text-transform: uppercase;
  opacity: 0.6;
}
.rail-chapters__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rail-chapters;
}
.rail-chapters__item {
  counter-increment: rail-chapters;
  border-block-start: 1px solid var(--rail-chapters-rule, currentColor);
}
.rail-chapters__jump {
  display: flex;
  flex-direction: column;
  gap: var(--rail-chapters-note-gap, 2px);
  width: 100%;
  padding-block: var(--_space-sm);
  padding-inline: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
  background: none;
  border: 0;
  /* 0.58, NO 0.45. El gate de axe lo midio: a 0.45 el titulo inactivo compone
     #74726f sobre #0a0a0a = 4,12:1, por debajo del 4,5:1 que pide el texto
     normal. Atenuar texto POR DEBAJO del suelo de contraste no es jerarquia, es
     texto ilegible — el mismo defecto que hace que `rail-inscribe` arranque en
     0,62 y no en 0. A 0.58 compone ~#95918f y pasa con 6,4:1, y el capitulo
     activo sigue destacando porque va a opacidad 1. */
  opacity: var(--rail-chapters-dim, 0.58);
}
.rail-chapters__jump[aria-current] {
  opacity: 1;
}
.rail-chapters__title::before {
  content: counter(rail-chapters, decimal-leading-zero) " ";
  opacity: 0.55;
}
.rail-chapters__note {
  font-size: var(--rail-chapters-note-size, 0.8125rem);
  opacity: 0.7;
}
.rail-chapters__scene {
  position: relative;
  min-inline-size: 0;
}
.rail-chapters__mark {
  position: absolute;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
}
.rail-chapters__mark:nth-child(1) { inset-block-start: 0; }
.rail-chapters__mark:nth-child(2) { inset-block-start: 20%; }
.rail-chapters__mark:nth-child(3) { inset-block-start: 40%; }
.rail-chapters__mark:nth-child(4) { inset-block-start: 60%; }
.rail-chapters__mark:nth-child(5) { inset-block-start: 80%; }
.rail-chapters__mark:nth-child(n + 6) { inset-block-start: 95%; }
@media (min-width: 48rem) {
.rail-chapters {
    grid-template-columns: var(--rail-chapters-index-width, 15rem) 1fr;
  }
}
.rail-chapters__jump {
  transition: opacity var(--rail-chapters-ease, 240ms) ease;
}
@media (prefers-reduced-motion: reduce) {
.rail-chapters__jump {
    transition: none;
  }
}
/* ---- from motion.css ---- */