/*
 * Landing de relojes.
 *
 * SCALE WARNING — Bricks sets the root font size to 62.5%, so 1rem is 10px on
 * this site, not 16px. Every length below is written in that scale: 1.6rem is
 * body text, not a heading. Copying a value out of here into a 16px project
 * makes it 60% too small, and vice versa.
 *
 * Wherever the site already publishes a token (--text-m, --landing-h2,
 * --section-padding-x, --radius-buttons …) this file uses it rather than
 * restating the number. Those come from the "Global CSS Brick" snippet, which
 * hooks the frontend header rather than Bricks' render, so they reach this
 * template too.
 *
 * Naming follows the BEM already in use across the site, prefixed `rl-`.
 */

.rl-header,
.rl-hero,
.rl-section,
.rl-footer {
  /* Three golds, because one cannot do three jobs. #b59c67 is the brand tone
     and only clears contrast over the dark sections. On paper it drops to
     2.39:1, so display sizes fall back to the site's own darker --color-gold
     (3.35:1, enough at 24px+) and anything set small uses a deeper one that
     clears 4.5:1. Measured, not guessed. */
  --rl-gold: var(--landing-primary, #b59c67);
  --rl-gold-display: var(--color-gold, #9e8121);
  --rl-gold-text: #7a6318;
  --rl-muted: #5f5f5f;
  --rl-ink: var(--color-base, #212121);
  --rl-paper: #f4f3f3;
  --rl-night: #16130e;
  --rl-wa: #26d366;
  --rl-wa-hover: #1a9349;

  --rl-space-y: var(--landing-spacing-y, clamp(6rem, 1.912vw + 5.388rem, 8rem));
  --rl-gutter: var(--section-padding-x, clamp(2rem, 3.824vw + .776rem, 6rem));
  --rl-rule: 1px solid rgb(33 33 33 / .14);

  /* The page's own width, in one place. The header, the hero, the body and the
     footer all stop here, and they have to stop at the same number or the page
     reads as four bands that nearly line up. */
  --rl-ancho: 128rem;
}

/* Imagify wraps JPEG and PNG uploads in a <picture> and moves our class onto
   that wrapper, while WebP uploads stay a bare <img>. So the same class lands
   on a container for one image and on the image itself for the next, and every
   object-fit written for it silently does nothing on half the page — the inner
   <img> falls back to `fill` and stretches.
   This makes the pair behave as one: the wrapper carries the box and the
   transform, the image inside fills it and inherits whatever fit the wrapper
   was given. */
:is(.rl-hero__poster-img, .rl-pieza__img, .rl-donde__foto, .rl-invertir__pieza) > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: inherit;
}

/* A fixed header eats whatever an anchor jumps to. This stylesheet only loads
   on the landing, so reserving the room globally is safe here. */
html {
  scroll-padding-top: 10rem;
}

/* ── Primitives ──────────────────────────────────────────────────────────── */

.rl-container {
  width: 100%;
  max-width: var(--rl-ancho);
  margin-inline: auto;
  padding-inline: var(--rl-gutter);
}

.rl-section {
  padding-block: var(--rl-space-y);
}

.rl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Clipped rather than pushed to -9999px: an off-screen box still counts as
   layout, and every overflow audit from here on would flag it. */
.rl-skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--rl-ink);
  color: #fff;
  font-size: var(--text-m, 1.6rem);
}

.rl-skip:focus {
  width: auto;
  height: auto;
  padding: 1.5rem 2rem;
  clip-path: none;
}

:where(.rl-header, .rl-hero, .rl-section, .rl-footer) :focus-visible {
  outline: 2px solid var(--rl-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.rl-eyebrow {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-s, 1.4rem);
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rl-gold);
}

.rl-eyebrow--dark {
  color: var(--rl-muted);
}

.rl-titulo {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--landing-h2, clamp(2.2rem, 1.052vw + 1.863rem, 3.3rem));
  letter-spacing: .12em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--rl-gold);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.rl-btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 2.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-buttons, 5rem);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-m, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  transition: var(--transicion-hover, .3s ease-in-out);
  transition-property: background-color, color, border-color;
}

.rl-btn__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
}

/* White on #26d366 measures 1.98:1 — the button the whole site uses fails AA
   by a wide margin. Darkening the green far enough to carry white text stops
   looking like WhatsApp, so the green stays and the label goes dark: 9.3:1,
   still unmistakably the same button. */
.rl-btn--wa {
  background: var(--rl-wa);
  color: var(--rl-ink);
  font-weight: 500;
}

.rl-btn--wa:hover {
  background: #1fb457;
  color: var(--rl-ink);
}

.rl-btn--ghost {
  border-color: rgb(255 255 255 / .45);
  color: #fff;
}

.rl-btn--ghost:hover {
  background: rgb(255 255 255 / .12);
}

/* Outlined until you reach for it, WhatsApp green when you do — the same
   promise the gold landing's cards make. */
.rl-btn--outline {
  border-color: var(--rl-ink);
  color: var(--rl-ink);
}

/* The same button for the dark half of the page. A solid WhatsApp green in the
   hero shouts over a watch — it is the loudest thing on a screen whose whole
   argument is restraint. Outlined in gold it belongs to the case, and it still
   turns green the moment you reach for it, so nobody has to guess where it
   goes. Gold on the night ground measures 6.98:1, and the border clears the 3:1
   that non-text contrast asks of a control. */
.rl-btn--oro {
  border-color: var(--rl-gold);
  color: var(--rl-gold);
}

.rl-btn--oro:hover,
.rl-btn--oro:focus-visible {
  background: var(--rl-wa);
  border-color: var(--rl-wa);
  color: var(--rl-ink);
}

.rl-btn--big {
  padding: 1.6rem 3.2rem;
  font-size: var(--text-b, clamp(2rem, .191vw + 1.939rem, 2.2rem));
  font-weight: 700;
}

.rl-btn--big .rl-btn__icon {
  width: 2.6rem;
  height: 2.6rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

/* Fixed from the first paint, not switched from absolute on scroll: swapping
   position mid-scroll pulls the header out of flow and the page jumps by its
   own height. Here it never occupies flow, so the hero starts at the top of the
   viewport and the logo simply floats over the footage. */
.rl-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  transition: background-color .35s ease, box-shadow .35s ease;
}

/* A gradient under the logo while the bar is transparent. The video is bright
   gold in places and a white logo over a highlight disappears; this costs
   nothing and removes the gamble. */
/* WordPress pushes the document down for the admin bar with a margin on <html>,
   which a fixed element does not see. Only logged-in users hit this, but they
   are the ones reviewing the page. */
.admin-bar .rl-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .rl-header {
    top: 46px;
  }
}

.rl-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(0 0 0 / .55), rgb(0 0 0 / 0));
  transition: opacity .35s ease;
  pointer-events: none;
}

.rl-header.is-stuck {
  background-color: rgb(22 19 14 / .94);
  box-shadow: 0 .4rem 2rem rgb(0 0 0 / .3);
  backdrop-filter: blur(10px);
}

.rl-header.is-stuck::before {
  opacity: 0;
}

.rl-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  max-width: var(--rl-ancho);
  margin-inline: auto;
  padding: 2rem var(--rl-gutter);
}

.rl-header__logo img {
  display: block;
  width: clamp(14rem, 12vw, 18rem);
  height: auto;
}

/* Everything but the logo waits for the first scroll. visibility, not just
   opacity, so a keyboard cannot tab into a button nobody can see. */
.rl-header__claim,
.rl-header__actions {
  opacity: 0;
  visibility: hidden;
  translate: 0 -.8rem;
  transition: opacity .35s ease, translate .35s ease, visibility .35s;
}

.rl-header.is-stuck .rl-header__claim,
.rl-header.is-stuck .rl-header__actions {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.rl-header__claim {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 200;
  font-size: var(--text-m, 1.6rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .82);
}

.rl-header__claim span {
  color: var(--rl-gold);
}

.rl-header__actions {
  display: flex;
  gap: 1.2rem;
}

/* The sentinel is the top slice of the hero. Once it has scrolled past, the bar
   comes down — an IntersectionObserver rather than a scroll listener, so
   nothing runs on frames where nothing changed. */
.rl-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 1px;
  height: 10rem;
  pointer-events: none;
}

@media (max-width: 767px) {
  .rl-header__claim {
    order: 3;
    width: 100%;
    letter-spacing: .12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rl-cifra__valor {
    /* The figure is already correct in the markup; the count is decoration. */
    transition: none;
  }

  .rl-header,
  .rl-header::before,
  .rl-header__claim,
  .rl-header__actions {
    transition: none;
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

/* The hero is the video. Copy and a call to action are optional and stay out of
   the way unless someone fills the fields — footage of the piece says more
   about a watch than a headline over it, and the page already offers WhatsApp
   in the header, under every card and in the footer. */
.rl-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(70svh, 64rem);
  overflow: clip;
  background: var(--rl-night);
  isolation: isolate;
}

/* Layered with positive z-index on purpose. Negative values put the poster
   behind the hero's own background — the stack reads poster → video → scrim →
   copy, and every step is spelled out rather than inferred. */
.rl-hero__poster,
.rl-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.rl-hero__poster {
  z-index: 0;
}

.rl-hero__poster-img,
.rl-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rl-hero__video {
  z-index: 1;
  opacity: 0;
  transition: opacity .8s ease;
}

.rl-hero__video.is-ready {
  opacity: 1;
}

/* Only drawn when there is copy to protect. */
.rl-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .42) 45%, rgb(0 0 0 / .04) 100%);
}

.rl-hero__content {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 2rem;
  justify-items: start;
  max-width: 34ch;
  padding: clamp(3rem, 4vw, 6rem) var(--rl-gutter);
}

.rl-hero__titulo {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(4.6rem, 5vw + 2rem, 7rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: #fff;
}

.rl-hero__subtitulo {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(1.9rem, 1vw + 1.5rem, 3rem);
  line-height: 1.2;
  color: rgb(255 255 255 / .92);
}

@media (max-width: 767px) {
  .rl-hero {
    min-height: min(66svh, 50rem);
  }

  .rl-hero__scrim {
    background: linear-gradient(180deg, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / .08) 38%, rgb(0 0 0 / .7) 74%, rgb(0 0 0 / .9) 100%);
  }

  .rl-hero__content {
    max-width: none;
  }
}

/* ── Vitrina ─────────────────────────────────────────────────────────────── */

/* Stands in for the footage. The room is dark and the case is lit — which is
   what a jeweller's window actually looks like, and what makes the trimmed
   photos usable up here at all: they sit on plain white, so they need something
   pale to multiply into. A white cut-out on a black hero is a brick. */
.rl-hero--vitrina {
  align-items: center;
  min-height: min(88svh, 78rem);
  padding-block: clamp(10rem, 12vw, 14rem) clamp(4rem, 6vw, 7rem);
}

.rl-vitrina {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(3rem, 4vw, 4.5rem);
  align-items: center;
  width: 100%;
  max-width: var(--rl-ancho);
  margin-inline: auto;
  padding-inline: var(--rl-gutter);
  grid-template-areas:
    "copy"
    "caja"
    "controles";
}

.rl-vitrina__copy {
  grid-area: copy;
  display: grid;
  gap: 1.4rem;
  justify-items: start;
  /* rem, not ch: `ch` here resolves against the container's own font size, not
     the headline's, so it silently boxes a 50px title into 18 body characters. */
  max-width: 44rem;
}

/* It gets its own column now, so it can carry the weight the footage version
   does. The sheet moved over to the case, which is what leaves the room. */
.rl-vitrina__copy .rl-hero__titulo {
  font-size: clamp(4rem, 3.4vw + 2.2rem, 6.2rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.025em;
}

.rl-vitrina__copy .rl-hero__subtitulo {
  max-width: 34rem;
  font-size: clamp(1.7rem, .6vw + 1.5rem, 2.1rem);
  line-height: 1.35;
}

/* Three answers instead of a sentence. Each one is a line the page already
   makes further down — the visitor who leaves at the hero never gets there. */
.rl-vitrina__tips {
  display: grid;
  gap: 1.2rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
  /* Wide enough that each line stays a line: broken in two they stop reading as
     three quick answers and start reading as a paragraph with bullets. */
  max-width: 46rem;
}

.rl-vitrina__tip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-m, 1.6rem);
  line-height: 1.35;
  color: rgb(255 255 255 / .86);
}

/* Gold, and only on the glyph: three gold lines of text would read as three
   headings competing with the one above them. */
.rl-vitrina__tip-icono {
  flex: none;
  width: 2rem;
  height: 2rem;
  /* Optical centring against the first line of text rather than its box. */
  margin-top: .15em;
  color: var(--rl-gold);
}

/* ── Vitrina · el cristal ────────────────────────────────────────────────── */

/* The lit pane. Square-ish and barely rounded: a display case has edges, and a
   16px radius would turn it into a card. */
.rl-vitrina__escenario {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  max-width: 58rem;
  /* Left, not centred. In one column the case is capped below the width of the
     page, so `auto` margins pushed it into the middle while the headline, the
     sheet and the buttons all started at the gutter — on a tablet that reads as
     a photograph that came loose from its own layout. */
  margin-inline: 0;
  /* The same corner the cards downstairs use. They are the same object shown
     twice — one big and one small — and two different radii read as two
     different components rather than as one idea repeated. */
  border-radius: var(--radius-2, 2rem);
  /* The light falls from where the pointer is. Defaults put it high and centred,
     which is where a case's own tube would be, so nothing looks wrong before the
     script or the pointer arrives.

     It has to stay pale and nearly flat, and that is a constraint rather than a
     taste: the supplier photos are trimmed to a studio white that is never quite
     #ffffff, and multiply only hides that against something close to white. Give
     this gradient real depth and every piece grows a visible rectangle. */
  /* The same case the cards downstairs are lit in — warm, brightest near the
     top, corners falling away — with one difference: the light lands where the
     pointer is instead of at a fixed point.

     Background layers rather than pseudo-elements, and that is not tidiness: a
     positioned ::before would sit between the photo and this surface, and
     mix-blend-mode never reaches past its own stacking context. Painted here,
     they are part of what the watch multiplies into. */
  background:
    /* the gold cast of the opening, the card's second pane layer */
    linear-gradient(160deg,
      rgb(214 183 118 / .1) 0%,
      rgb(181 156 103 / .04) 45%,
      rgb(140 116 66 / .1) 100%),
    /* the light, following the pointer */
    radial-gradient(115% 95% at var(--rl-luz-x, 50%) var(--rl-luz-y, 32%),
      rgb(255 255 255 / .92) 0%,
      rgb(255 255 255 / 0) 58%,
      rgb(120 104 74 / .18) 100%),
    /* warm light: the case is lit, and lit metal is never neutral */
    linear-gradient(#fffdf8 0%, #fbf6ea 52%, #f0e7d3 100%);
  box-shadow:
    inset 0 0 0 1px rgb(181 156 103 / .3),
    0 3rem 6rem rgb(0 0 0 / .55);
  overflow: clip;
  /* This is the context the watch blends into, and the fence that keeps the
     blend off the dark hero behind it. */
  isolation: isolate;
}

/* No z-index here, on purpose — see the pane above. Order in the document is
   what puts the glass over the photo.
   pointer-events: none so the pane is always the event target and the script
   can read offsetX instead of measuring the box on every move. */
.rl-vitrina__pila {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

/* multiply lives here rather than on the image, and NOT on any wrapper above:
   a transform or a z-index on an ancestor gives it a stacking context, and the
   blend stops reaching the pane the moment it has one — which is exactly how the
   white rectangle it is meant to hide comes back. Opacity on this same element
   is safe, because opacity is applied before the blend, not around it. That is
   why the crossfade is opacity alone. */
.rl-vitrina__capa {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: multiply;
  transition: opacity .45s ease;
}

.rl-vitrina__capa.is-activa {
  opacity: 1;
}

/* Sized exactly the way the cards size theirs, and for the same two reasons.
   `width: auto` against a percentage height lets the piece keep its own
   proportions, so the box is the watch rather than the watch plus a margin of
   backdrop. And `margin-inline: auto` is what centres it: with left and right
   both set and the width left free the box is over-constrained, the browser
   keeps the intrinsic width, drops `right`, and parks the piece on the left. */
.rl-vitrina__foto {
  position: absolute;
  top: 7%;
  right: 8%;
  left: 8%;
  margin-inline: auto;
  display: block;
  width: auto;
  max-width: 100%;
  height: 72%;
  object-fit: contain;
  /* The trim leaves the bottom of the image at the bottom of the watch, so the
     reflection sits right under the piece instead of a margin below it. The
     mask runs after the flip: transparent first, visible last. Chrome and
     Safari only — elsewhere the watch simply stands in the light. */
  -webkit-box-reflect: below .2rem linear-gradient(transparent 62%, rgb(255 255 255 / .4));
}

/* The glass, and the one thing on this page that follows you.
   The reflection travels on the pane rather than on the watch: light lands on
   the case you are looking through, and a highlight that crawls over the dial
   instead reads as a shine effect on a photograph. */
.rl-vitrina__cristal {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* the moving band — the only thing on this page that follows you */
    linear-gradient(112deg,
      transparent 24%,
      rgb(255 255 255 / .55) 41%,
      rgb(255 255 255 / .12) 50%,
      transparent 64%),
    /* and the fixed one the cards already wear, so the two cases read as the
       same piece of furniture */
    linear-gradient(146deg,
      rgb(255 255 255 / .5) 0%,
      rgb(255 255 255 / .14) 26%,
      rgb(255 255 255 / 0) 42%);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: var(--rl-cristal, 62%) 0, 0 0;
  transition: background-position .18s linear;
  pointer-events: none;
}

/* ── Vitrina · la caja entera es el enlace ───────────────────────────────── */

/* The case and its sheet in one box, and the box is what the button grows to
   cover. It is the positioned ancestor the ::after resolves against, which is
   the whole reason it exists — without it the pseudo would spread across the
   entire hero and swallow the controls. */
.rl-vitrina__caja {
  grid-area: caja;
  position: relative;
  display: grid;
  gap: 2rem;
  align-content: start;
  /* The same ceiling as the stage inside it, and pinned to the same edge. They
     are one object seen from outside and from inside, and while the box was
     free to grow past the stage the tickets went with it: they anchor to this
     box, so on a column wider than 58rem the price hung off the left of the
     photograph and the year off the right.
     `width` as well as `max-width`, or the two starve each other: capping the
     box stops it from stretching to its grid area, the stage inside asks for
     100% of a box that is now only as wide as its contents, and the case comes
     out half the size it should be. */
  width: 100%;
  max-width: 58rem;
  margin-right: auto;
  cursor: pointer;
}

/* One link, and it is the link that was already there. No second <a> over the
   photo: that would be a duplicate destination for a keyboard and one more href
   for the script to keep in step with the piece on screen. */
.rl-vitrina__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Above the glass, which sits in the pane's own stacking context. */
  z-index: 1;
}

/* Reaching anywhere in the box lights the button, so the two read as one
   control rather than as a card that happens to sit near a link. */
.rl-vitrina__caja:hover .rl-btn--oro {
  background: var(--rl-wa);
  border-color: var(--rl-wa);
  color: var(--rl-ink);
}

/* ── Vitrina · la ficha ──────────────────────────────────────────────────── */

.rl-vitrina__ficha {
  display: grid;
  gap: 1rem;
  justify-items: start;
  /* Wide enough for a reference and three specs on one line. In `ch` this
     resolved against the container's own font size, not the line it was meant
     to hold, and broke every spec row in two. */
  max-width: 56rem;
}

/* Same order as the cards below, for the same reason: the maker is what someone
   is looking for, and the case turns every six seconds — the brand is the one
   word that has to land in that time. It wins on weight and tracking rather
   than size, so a headline still opens the hero and the case answers it. */
.rl-vitrina__marca {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(2rem, 1vw + 1.6rem, 2.6rem);
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rl-gold);
}

.rl-vitrina__modelo {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(1.7rem, .6vw + 1.5rem, 2rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.rl-vitrina__meta {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-s, 1.4rem);
  letter-spacing: .08em;
  color: rgb(255 255 255 / .68);
}

/* Written inside the sheet and shown on the case: absolute resolves against
   `.rl-vitrina__caja`, the nearest positioned ancestor, which is the box the
   stage sits at the top of — so the offsets land on the stage's own corner
   while the element stays where the script and the aria-live region expect it.
   It rides above the glass here rather than under it. The stage's pane carries
   a reflection that tracks the pointer, and a ticket dimming and brightening as
   someone moves the mouse reads as a bug. */
.rl-vitrina__precio {
  top: 1.6rem;
  left: 1.6rem;
  z-index: 2;
  font-size: clamp(1.5rem, .4vw + 1.4rem, 1.7rem);
}

.rl-vitrina__cta {
  margin-top: 1.4rem;
}

/* ── Vitrina · controles ─────────────────────────────────────────────────── */

.rl-vitrina__controles {
  grid-area: controles;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

.rl-vitrina__boton {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: var(--transicion-hover, .3s ease-in-out);
  transition-property: background-color, border-color;
}

.rl-vitrina__boton:hover {
  background-color: rgb(255 255 255 / .14);
  border-color: rgb(255 255 255 / .55);
}

.rl-vitrina__chevron {
  width: 1.6rem;
  height: 1.6rem;
}

[data-vitrina-paso="-1"] .rl-vitrina__chevron {
  rotate: 180deg;
}

/* One button, two glyphs, and aria-pressed decides. The state lives in the
   attribute a screen reader reads, so the icon cannot disagree with it. */
.rl-vitrina__glifo-play,
.rl-vitrina__boton--pausa[aria-pressed="true"] .rl-vitrina__glifo-pausa {
  display: none;
}

.rl-vitrina__boton--pausa[aria-pressed="true"] .rl-vitrina__glifo-play {
  display: block;
}

.rl-vitrina__puntos {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The dot is drawn by ::before so the button itself can carry a 44px target
   without a 44px dot. A control you can see is not the same as a control you
   can hit. */
.rl-vitrina__punto {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.rl-vitrina__punto::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: rgb(255 255 255 / .35);
  transition: var(--transicion-hover, .3s ease-in-out);
  transition-property: background-color, width;
}

.rl-vitrina__punto:hover::before {
  background: rgb(255 255 255 / .7);
}

/* The current piece is a bar, not a brighter dot: shape survives a colourblind
   eye and a bad screen, and opacity does not. */
.rl-vitrina__punto[aria-current="true"]::before {
  width: 2.6rem;
  border-radius: 1rem;
  background: var(--rl-gold);
}

/* While the case turns on its own, that bar becomes a track and fills over the
   interval — so the movement is announced before it happens instead of arriving
   as a page that changed by itself. Stopped for good, it goes back to a solid
   mark: there is no countdown left to show.

   Keyed on [data-auto], not [data-rotando]: hover only freezes the fill below.
   Selecting on the running state would delete this pseudo-element and build a
   fresh one every time the pointer crossed the hero, and the bar would snap
   back to zero on each pass. */
[data-auto="true"] .rl-vitrina__punto[aria-current="true"]::before {
  background: rgb(255 255 255 / .28);
}

[data-auto="true"] .rl-vitrina__punto[aria-current="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 1rem;
  margin: -.5rem 0 0 -1.3rem;
  border-radius: 1rem;
  background: var(--rl-gold);
  /* Clipped, not scaled. A scaled box carries its corner radius with it, so at
     five percent of its width a 10px radius has nowhere to go and the fill
     starts as a lens poking out of the track. Clipping leaves the pill at full
     size and reveals it: the left end keeps its curve, the right end is the
     straight edge a filling bar should have. */
  clip-path: inset(0 100% 0 0);
  /* The interval is published by the script, so the fill and the turn cannot
     drift apart. */
  animation: rl-avanza var(--rl-intervalo, 6s) linear forwards;
}

/* Frozen, not restarted. The fill keeps whatever ground it had covered, so
   leaving the case picks the countdown up mid-stride. */
[data-rotando="false"] .rl-vitrina__punto[aria-current="true"]::after {
  animation-play-state: paused;
}

@keyframes rl-avanza {
  to { clip-path: inset(0 0 0 0); }
}

@media (min-width: 900px) {
  /* The pitch on the left, the piece and everything true about it on the right.
     The sheet names what is in the case, so it belongs under the case — read
     across the page from the headline and it was describing a watch three
     hundred pixels away. */
  .rl-vitrina {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: clamp(4rem, 5vw, 7rem);
    row-gap: 2rem;
    /* The case spans the first two rows so the left column can size itself
       against its own content instead of against the height of a photograph:
       the headline sets row one, the controls sit at the top of row two right
       under it, and whatever height the case still needs falls into the slack
       below them. */
    /* The case spans both rows so the left column sizes itself against its own
       content instead of against the height of a photograph: the headline sets
       row one, the controls sit at the top of row two right under it, and
       whatever height the box still needs falls into the slack below them. */
    grid-template-areas:
      "copy      caja"
      "controles caja";
    /* min-content on the first row, and it matters: a two-row span whose item is
       taller than both rows spreads the surplus across them, so the case was
       padding the headline's row and pushing the buttons far down the page. This
       pins row one to the copy and drops all the slack into row two. */
    grid-template-rows: min-content 1fr;
    align-items: start;
  }

  /* Top-aligned with the case, so the headline and the piece start on the same
     line. Centred, it floated in the middle of an empty column and read as
     something that had come loose. */
  .rl-vitrina__copy {
    grid-row: 1 / 2;
    align-self: start;
    max-width: none;
    padding-right: 2rem;
  }

  /* Under the headline, not under the sheet. Stacked on the right the column ran
     case + sheet + buttons deep and pushed the fold off the screen; the left
     column had the room and nothing in it. */
  /* Centred in the slack the case leaves below the headline, which lands them
     about level with the foot of the photograph — and keeps landing there as the
     column changes width, because both sides are driven by the same box rather
     than by a margin somebody measured once. */
  .rl-vitrina__controles {
    align-self: center;
    margin-top: 0;
  }

}

/* ── Piezas ──────────────────────────────────────────────────────────────── */

.rl-piezas,
.rl-donde {
  background: var(--rl-paper);
  --rl-gold: var(--rl-gold-display);
}

.rl-section__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(4rem, 3vw + 2rem, 6rem);
}

/* The eyebrow reads above the title but comes after it in the DOM: the heading
   order is for screen readers, the visual order is for everyone else, and they
   do not have to agree. */
.rl-section__head .rl-eyebrow {
  order: -1;
}

/* ── Piezas · ordenar ────────────────────────────────────────────────────── */

/* The control sits on the title's line, right side, so the head reads as one
   band instead of growing a third row. Only this section's head becomes two
   columns — the others have nothing to put in the second one. */
/* Baseline, not end: the control is a line of text and the title is a line of
   text four times its size, so what has to line up is what they are written
   on, not the boxes around them. */
.rl-piezas .rl-section__head {
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 2rem;
}

.rl-piezas .rl-section__head > :is(.rl-titulo, .rl-eyebrow) {
  grid-column: 1;
}

/* One sentence — "Ordenar por Selección" — not a label with a field next to it.
   Everything inside is set the same way and the only thing that marks the part
   you can change is the rule under it. So the type is declared once, here, and
   the label and the trigger both just inherit it.
   nowrap because the two together are shorter than either of them broken, and a
   control on two lines beside a one-line title reads as something that failed. */
.rl-orden {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: .5rem;
  grid-column: 2;
  /* Second row: beside the title, not the eyebrow. */
  grid-row: 2;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-s, 1.4rem);
  letter-spacing: .04em;
  color: var(--rl-muted);
}

.rl-orden[hidden] {
  display: none;
}

.rl-orden__label {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: .6rem;
  white-space: nowrap;
}

.rl-orden__menu {
  position: relative;
  flex: none;
}

/* Carries on the sentence rather than interrupting it: same face, same size,
   same colour as the words before it, inherited rather than restated. The rule
   under the word is the whole of the affordance. */
.rl-orden__trigger {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.rl-orden__valor {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-decoration-color: currentColor;
  transition: color var(--transicion-hover, .3s ease-in-out);
}

.rl-orden__trigger:hover .rl-orden__valor {
  color: var(--rl-ink);
}

/* An SVG sits on its own bottom edge, so in a baseline row both glyphs would
   hang below the text they belong to. Centred on the line instead. */
.rl-orden__icono,
.rl-orden__chevron {
  align-self: center;
}

.rl-orden__chevron {
  flex: none;
  /* The shared glyph points right; a quarter turn is cheaper than a second
     file, and it gives the open state something to animate. */
  transform: rotate(90deg);
  transition: transform var(--transicion-hover, .3s ease-in-out);
  color: var(--rl-gold);
}

.rl-orden__trigger[aria-expanded="true"] .rl-orden__chevron {
  transform: rotate(-90deg);
}

/* The panel is a small card, in the same material as the display cases: light,
   softly cornered, lifted off the page rather than outlined on it. */
.rl-orden__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + .8rem);
  right: 0;
  display: grid;
  min-width: 100%;
  padding: .6rem;
  background: #fff;
  border-radius: var(--radius, 1rem);
  box-shadow:
    inset 0 0 0 1px rgb(181 156 103 / .24),
    0 1.2rem 3rem rgb(33 33 33 / .14);
}

.rl-orden__panel[hidden] {
  display: none;
}

.rl-orden__opcion {
  padding: .8rem 1.6rem;
  border: 0;
  border-radius: calc(var(--radius, 1rem) - .4rem);
  background: none;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-s, 1.4rem);
  letter-spacing: .06em;
  text-align: left;
  white-space: nowrap;
  color: var(--rl-muted);
  cursor: pointer;
  transition:
    background var(--transicion-hover, .3s ease-in-out),
    color var(--transicion-hover, .3s ease-in-out);
}

.rl-orden__opcion:hover {
  background: var(--rl-paper);
  color: var(--rl-ink);
}

/* Inside the panel the current one does need marking — that is what the panel
   is for. Ink and weight, no gold: the gold is spent on the price tickets. */
.rl-orden__opcion[aria-current="true"] {
  color: var(--rl-ink);
  font-weight: 600;
}

.rl-orden__icono {
  flex: none;
  color: var(--rl-gold);
}

@media (max-width: 700px) {
  /* Back to one column, with the control under the title rather than squeezed
     beside it. */
  .rl-piezas .rl-section__head {
    grid-template-columns: 1fr;
  }

  .rl-orden {
    grid-column: 1;
    grid-row: auto;
    padding-bottom: 0;
  }
}

/* ── Piezas · marcas ─────────────────────────────────────────────────────── */

/* A line of names under the title, in the same voice as the sort control: text,
   no chips, no boxes. On a narrow screen it scrolls sideways rather than
   stacking into four rows and pushing the watches off the first screen. */
.rl-marcas {
  /* Stops under the header and stays there while the grid runs past, so the
     maker in force is readable at any depth of the list — on a filtered grid it
     is the only thing on screen saying which one you are looking at.
     The fallback matters: the real height is measured and published by the
     script, and until it lands 8rem is close enough to keep the row off the
     bar rather than under it. */
  position: sticky;
  top: var(--rl-header-alto, 8rem);
  z-index: 4;
  margin: -2rem 0 clamp(3rem, 2vw + 1.6rem, 4rem);
  /* Opaque, or the cards read straight through the names as they pass. The
     section's own paper, so nothing draws a band across the page. */
  background: var(--rl-paper);
  /* Top padding is the air under the header; the bottom holds the underline of
     the pressed one, which sits outside the text box and the scroll container
     would otherwise clip. */
  padding-block: 1.2rem .8rem;
}

.rl-marcas[hidden] {
  display: none;
}

.rl-marcas__scroll {
  overflow-x: auto;
  scrollbar-width: none;
}

.rl-marcas__scroll::-webkit-scrollbar {
  display: none;
}

/* One per side, each a fade with an arrow in it. Painted on the container and
   not on the strip that scrolls: inside it they would travel with the names and
   leave the screen exactly when they are needed.
   Sixty pixels of target on the edges a thumb reaches for — and a real target,
   not pointer-events:none, which is what let a tap fall through to whichever
   maker sat underneath and filter by it. */
.rl-marcas__paso {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 6rem;
  padding: 0;
  border: 0;
  cursor: pointer;
}

/* Shown and hidden with the attribute rather than by toggling opacity from a
   class: it is what the rest of this component already does, it takes the
   element out of the box model instead of leaving an invisible one over a name
   in the row, and there is no cascade to lose an argument with. */
.rl-marcas__paso[hidden] {
  display: none;
}

.rl-marcas__paso--atras {
  left: 0;
  justify-content: flex-start;
  padding-left: .2rem;
  background: linear-gradient(to left, rgb(244 243 243 / 0), var(--rl-paper) 55%);
}

.rl-marcas__paso--adelante {
  right: 0;
  justify-content: flex-end;
  padding-right: .2rem;
  background: linear-gradient(to right, rgb(244 243 243 / 0), var(--rl-paper) 55%);
}

.rl-marcas__paso-icono {
  flex: none;
  color: var(--rl-gold-text);
}

/* The shared glyph points right, so the one going back is the same file turned
   around. */
.rl-marcas__paso--atras .rl-marcas__paso-icono {
  transform: rotate(180deg);
}

.rl-marcas__lista {
  display: flex;
  gap: .4rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rl-marcas__marca {
  padding: .2rem 0;
  border: 0;
  background: none;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-s, 1.4rem);
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--rl-muted);
  cursor: pointer;
  transition: color var(--transicion-hover, .3s ease-in-out);
}

.rl-marcas__marca:hover {
  color: var(--rl-ink);
}

/* The chosen maker takes the ink and the rule — the same pairing the sort
   control uses for the option in force, so the two read as one system. */
.rl-marcas__marca[aria-pressed="true"] {
  color: var(--rl-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}

/* The tally rides above the name, small: it qualifies the word rather than
   competing with it. */
.rl-marcas__cuenta {
  margin-left: .2rem;
  font-size: .78em;
  vertical-align: .4em;
  color: var(--rl-gold-text);
}

.rl-piezas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr));
  justify-items: center;
  /* Its own ceiling, two rem under the page's, so it keeps the relation it had
     to the container it sits in. */
  max-width: calc(var(--rl-ancho) - 2rem);
  margin-inline: auto;
  gap: clamp(4rem, 4vw + 1rem, 6rem);
  padding: 0;
  list-style: none;
}

/* Card shape follows the gold landing: the media panel is the object, the copy
   sits underneath on the section background, centred. No white container.
   Everything is centred — one alignment, not four.

   The card is still as tall as the tallest in its row — that is what a grid
   does — but nothing inside it grows to fill that height any more, so the
   spare room collects under the button, below everything, where no one has to
   look at it. */
.rl-pieza {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2rem;
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

/* Any `display` written here beats the one the browser gives [hidden], so
   without this the filter marks a maker and changes nothing on screen. */
.rl-pieza[hidden] {
  display: none;
}

/* The well is a display case, not a swatch of beige.
   Two constraints shape it. The client uploads the photo the supplier sent,
   white backdrop and all — so the interior has to stay light, because with
   mix-blend-mode: multiply a white backdrop vanishes into a light surface and
   turns to mud on a dark one. And those photos show the whole watch hanging,
   strap and all, not a watch resting on something: draw a shelf under them and
   the straps cut straight through it.
   So the case is suggested rather than built. Light from above, the corners
   falling away, a pane catching light across one edge, and the piece reflected
   below it. No surface is claimed that the photograph does not have. */
.rl-pieza__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background:
    /* corners falling into shadow, the way the inside of a case does */
    radial-gradient(115% 95% at 50% 32%, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / 0) 58%, rgb(120 104 74 / .16) 100%),
    /* warm light: the case is lit, and lit metal is never neutral */
    linear-gradient(#fffdf8 0%, #fbf6ea 52%, #f0e7d3 100%);
  border-radius: var(--radius-2, 2rem);
  box-shadow:
    inset 0 0 0 1px rgb(181 156 103 / .28),
    0 .6rem 2rem rgb(33 33 33 / .07);
  overflow: clip;
  transition: box-shadow var(--transicion-hover, .3s ease-in-out);
}

/* The pane in front: one soft diagonal band that reads as glass, plus a gold
   cast over the whole opening. The warmth belongs to the case, not to the
   watch — see the note on the image below. */
.rl-pieza__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(146deg,
      rgb(255 255 255 / .62) 0%,
      rgb(255 255 255 / .18) 26%,
      rgb(255 255 255 / 0) 42%),
    linear-gradient(160deg,
      rgb(214 183 118 / .10) 0%,
      rgb(181 156 103 / .04) 45%,
      rgb(140 116 66 / .10) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.rl-pieza:hover .rl-pieza__media,
.rl-pieza:focus-within .rl-pieza__media {
  box-shadow:
    inset 0 0 0 1px rgb(181 156 103 / .45),
    0 1.4rem 3.4rem rgb(33 33 33 / .16);
}

/* A photo that could not be trimmed is not on a plain backdrop, and multiply
   would turn its background to mud. It keeps the size and the frame, and gives
   up the blend and the reflection — both of those assume white behind glass. */
.rl-pieza__img--entera {
  mix-blend-mode: normal;
  border-radius: var(--radius, 1rem);
  -webkit-box-reflect: none;
}

/* multiply drops whatever white survives the trim into the case instead of
   stacking a second white rectangle on top of it. */
/* Positioned out of flow, and that is the whole trick.
   In flow the piece sized itself: a percentage height against a parent whose
   own height depended on that content is circular, so the browser fell back to
   each photo's natural size and the three wells came out 530, 480 and 490 tall
   instead of square. Taking the image out of flow lets aspect-ratio decide the
   well, the percentage resolve against a real number, and every piece render at
   exactly the same size.
   It also gives the element a box before the file arrives — width and height on
   auto measure zero, and a zero-sized image with loading="lazy" is never
   considered on screen, so it is never fetched, so it stays zero. */
.rl-pieza__img {
  position: absolute;
  top: 1.8rem;
  right: 1.8rem;
  left: 1.8rem;
  /* margin auto is what actually centres it. With left and right both set and
     the width left to the image's own proportions, the box is over-constrained:
     the browser keeps the intrinsic width, drops `right`, and parks the piece
     against the left edge. */
  margin-inline: auto;
  display: block;
  width: auto;
  /* max-width keeps a landscape photo inside the case. Without it the piece
     follows its own proportions past the edges and gets clipped — rare, since
     watches are shot standing, but silent when it happens. */
  max-width: 100%;
  height: 76%;
  object-fit: contain;
  mix-blend-mode: multiply;
  /* No colour filter on the piece. Even a tenth of sepia reads as a wash laid
     over the product, and on a page selling the actual watch the metal has to
     be the metal. The warmth lives in the case around it. */
  transform: scale(var(--rl-hover, 1));
  transform-origin: center 40%;
  transition: transform var(--transicion-hover, .3s ease-in-out);
  /* Now that the file has no margin, the bottom of the image is the bottom of
     the watch and the reflection can sit right under it. The mask is applied
     after the flip, so the gradient runs transparent-first, visible-last.
     Chrome and Safari only; elsewhere the piece stands in the light without a
     reflection and the card still reads as a case. */
  -webkit-box-reflect: below .2rem linear-gradient(transparent 62%, rgb(255 255 255 / .38));
}

.rl-pieza:hover .rl-pieza__img {
  --rl-hover: 1.05;
}

.rl-pieza:hover .rl-btn--outline,
.rl-pieza:focus-within .rl-btn--outline {
  background: var(--rl-wa);
  border-color: var(--rl-wa);
  color: var(--rl-ink);
}

/* Two groups, not six blocks: who it is, then what to do about it. The gap
   between them is what makes them read as two.

   It used to take `flex: 1` and push the two apart, which lined every button in
   a row up with its neighbours — at the cost of a hole above it on any card
   whose copy ran short, and a button with a two-line model name beside it ended
   up floating on its own. The two cannot both be had: if the copy is uneven and
   the buttons align, the difference has to show up somewhere.
   It shows up better below the button than above it. The button now follows its
   own copy at a fixed distance and rows of buttons sit within a line or two of
   each other, which reads as a grid of cards rather than a grid with a gap. */
.rl-pieza__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2.4rem;
  width: 100%;
}

.rl-pieza__identidad {
  display: grid;
  gap: .5rem;
  width: 100%;
}

/* The maker leads. In this trade it is the asset — someone is looking for a
   Rolex before they are looking for an Oyster Perpetual — and the card had it
   the other way round: a small gold caption above a heavy black model name.
   The two swap roles.
   Size alone would not do it. Six Rolex in one grid printed large is a wall of
   one word, so the brand wins on weight and tracking rather than scale, and the
   model keeps enough size to stay readable while giving up its bold. The gold
   stays: it is the page's own colour, and against a model name in plain ink it
   now reads as the line that matters rather than as a caption. */
.rl-pieza__marca {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(1.8rem, .6vw + 1.6rem, 2.1rem);
  font-weight: 700;
  letter-spacing: .2em;
  /* Tracking is added after the last letter too, so a centred line sits half a
     space left of everything under it. This pays it back. */
  text-indent: .2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rl-gold-text);
}

.rl-pieza__titulo {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, .4vw + 1.4rem, 1.7rem);
  line-height: 1.25;
  letter-spacing: .12em;
  text-indent: .12em;
  text-transform: uppercase;
  color: var(--rl-ink);
}

/* The second line is not a second rank. It is the rest of the same name —
   "Oyster Perpetual" then "Date" — and the field exists so the shop can choose
   where that name breaks, nothing more. Giving it its own weight and case made
   the card look like it carried brand, model and sub-model, three levels for
   two facts. So it inherits everything and only takes the line break. */
.rl-pieza__titulo span {
  display: block;
}

/* Reference and specs on one line. A buyer reads "40 mm · acero · automático"
   at a glance; the same values stacked with a label each were four rows of
   small caps fighting the title for attention. */
.rl-pieza__meta {
  margin: .4rem 0 0;
  font-size: var(--text-s, 1.4rem);
  line-height: 1.5;
  text-wrap: balance;
  color: var(--rl-muted);
}

.rl-pieza__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}

/* The ticket in the window — the little card with the figure that sits beside
   the piece in a shop display. One object, so one rule: the hero's case and the
   cards below show the same watches and would not survive quoting a price two
   different ways.
   As bare type it disappeared. Both backdrops are a light gradient and so is a
   steel watch, so the figure had nothing to sit against. The gold plate gives it
   one, and gold is what the page already uses to mark what matters.
   Top left in both, because it is the corner these photographs leave empty: the
   piece is shot standing and centred, the crown pushes the silhouette right, and
   the bottom belongs to the reflection. */
:is(.rl-pieza__precio, .rl-vitrina__precio, .rl-pieza__anio, .rl-vitrina__anio) {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: .6rem 1.2rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  color: var(--rl-night);
  background: linear-gradient(135deg, #e8cf94 0%, #cfae7b 48%, #b59c67 100%);
  border-radius: 10rem;
  box-shadow: 0 .2rem .8rem rgb(120 104 74 / .28);
}

/* On a card it stays behind the pane — the glass is at 2 — so the same
   reflection that crosses the watch crosses the ticket, and it reads as an
   object inside the case rather than a label stuck on the screen. */
.rl-pieza__precio {
  top: 1.4rem;
  left: 1.4rem;
  font-size: clamp(1.4rem, .3vw + 1.3rem, 1.5rem);
}

/* The year, facing the price across the top of the case: same shape, same size,
   same line, in the grid and in the hero alike. In a second-hand catalogue it is
   half of what is being bought, so it earns a ticket of its own.
   Not a second gold one, though. Two gold plates on one photograph is two
   things shouting, and the figure is the one that has to carry. This one is the
   ticket in bone: the case's own light, a hairline of the same gold, ink on
   top. Reads as the pair of the price rather than its rival. */
:is(.rl-pieza__anio, .rl-vitrina__anio) {
  color: var(--rl-ink);
  background: rgb(255 253 248 / .92);
  box-shadow:
    inset 0 0 0 1px rgb(181 156 103 / .45),
    0 .2rem .8rem rgb(120 104 74 / .18);
}

.rl-pieza__anio {
  top: 1.4rem;
  right: 1.4rem;
  font-size: clamp(1.4rem, .3vw + 1.3rem, 1.5rem);
}

.rl-vitrina__anio {
  top: 1.6rem;
  right: 1.6rem;
  z-index: 2;
  font-size: clamp(1.5rem, .4vw + 1.4rem, 1.7rem);
}

/* Both tickets are absolute, so an empty one still paints its plate on the
   photograph. */
:is(.rl-pieza__anio, .rl-vitrina__anio)[hidden] {
  display: none;
}

/* The whole card is the target, the same trick the gold landing uses. The link
   keeps its own text and focus ring, so a keyboard still lands on something it
   can read. */
.rl-pieza__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.rl-vacio {
  margin: 0;
  padding: 4rem;
  text-align: center;
  background: #fff;
  border-radius: var(--radius, 1rem);
  font-size: var(--text-m, 1.6rem);
  color: var(--rl-muted);
}

/* ── Por qué invertir ────────────────────────────────────────────────────── */

/* The one moment on the page that is allowed to be theatrical. A jeweller does
   not lay a Day-Date on a table: it goes in a case, under a light, on glass.
   That is the whole idea here — a pool of warm light, near-black around it, and
   a reflection underneath. The section earns its drama by being the only one
   that has any. */
.rl-invertir {
  position: relative;
  background:
    radial-gradient(120% 80% at 22% 42%, #241f16 0%, #16130e 58%, #100e0a 100%);
  overflow: clip;
}

/* A hairline of gold at the top edge, the way a display case catches light
   along its lip. */
.rl-invertir::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(181 156 103 / .55) 30%, rgb(181 156 103 / .55) 70%, transparent);
}

.rl-invertir__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(4rem, 6vw, 9rem);
}

.rl-invertir__vitrina {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: 2rem;
}

/* The light itself. Sized off the image rather than the column so it stays
   centred on the watch at every width. */
.rl-invertir__vitrina::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -58%;
  width: min(46rem, 130%);
  aspect-ratio: 1;
  background: radial-gradient(circle,
    rgb(214 183 118 / .34) 0%,
    rgb(181 156 103 / .14) 38%,
    rgb(181 156 103 / .04) 58%,
    transparent 72%);
  pointer-events: none;
}

/* The glass it stands on: a tight ellipse, not a drop shadow. A shadow says the
   object floats; this says it is resting on something. */
.rl-invertir__vitrina::after {
  content: "";
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  translate: -50% 0;
  width: min(24rem, 70%);
  height: 2.5rem;
  background: radial-gradient(ellipse, rgb(0 0 0 / .6) 0%, transparent 70%);
  pointer-events: none;
}

/* Still. The only motion is the highlight crossing the gold — a watch in a
   display case does not bob. */
.rl-invertir__caja {
  position: relative;
  z-index: 1;
  width: min(30rem, 100%);
}

.rl-invertir__pieza {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2rem 3rem rgb(0 0 0 / .55));
  /* Chrome and Safari only. Where it is missing the watch simply stands on the
     glass without a reflection, which is a smaller loss than a second copy of
     the image in the DOM to fake it everywhere. */
  -webkit-box-reflect: below .4rem linear-gradient(transparent 58%, rgb(255 255 255 / .14));
}

/* The highlight is masked to the watch's own alpha, so it runs across the gold
   and stops at its edge rather than sweeping a rectangle over it. Same idea as
   the .oro-brillo the gold landing uses on its headings — the page already
   speaks this language. */
.rl-invertir__brillo {
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg,
    transparent 38%,
    rgb(255 252 240 / .62) 47%,
    rgb(255 255 255 / .28) 52%,
    transparent 61%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  mask-image: var(--rl-pieza);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--rl-pieza);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  animation: rl-destello 7s ease-in-out infinite;
  pointer-events: none;
}

/* Long pause, quick sweep. A highlight that crawls continuously reads as a
   loading state; one that passes now and then reads as light catching metal. */
@keyframes rl-destello {
  0%, 62% { background-position: 190% 0; }
  78%     { background-position: -70% 0; }
  100%    { background-position: -70% 0; }
}


.rl-invertir__texto {
  display: grid;
  gap: clamp(3rem, 4vw, 4.5rem);
}

.rl-invertir .rl-section__head {
  margin-bottom: 0;
}

.rl-beneficios {
  display: grid;
  gap: 2.4rem;
  margin: 0;
}

/* A rule over each one instead of a number. Four reasons are not four steps,
   and numbering them would promise an order the content does not have. */
.rl-beneficio {
  padding-top: 1.6rem;
  border-top: 1px solid rgb(181 156 103 / .35);
}

.rl-beneficio__titulo {
  margin: 0 0 .6rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--landing-h3, 1.8rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rl-gold);
}

.rl-beneficio__texto {
  margin: 0;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 200;
  font-size: var(--text-b, 2rem);
  line-height: 1.5;
  color: rgb(255 255 255 / .84);
}

@media (max-width: 900px) {
  .rl-invertir__grid {
    grid-template-columns: 1fr;
    gap: clamp(3rem, 6vw, 5rem);
  }

  .rl-invertir__vitrina {
    order: -1;
  }

  .rl-beneficios {
    grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
    gap: 2.4rem 4rem;
  }
}

/* ── Cómo trabajamos ─────────────────────────────────────────────────────── */

.rl-trabajo {
  background: var(--rl-night);
}

.rl-trabajo .rl-titulo {
  margin-bottom: clamp(3rem, 3vw + 1.5rem, 5rem);
}

/* How we choose the pieces on the left, what the buyer gets on the right. The
   left column stays wider: it is running prose and wants the line length, while
   the right is four short entries that read better narrow. */
.rl-trabajo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(3.5rem, 5vw, 7rem);
  align-items: start;
}

.rl-trabajo__lista {
  display: grid;
  gap: 2.8rem;
  max-width: 62ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Three points, not three steps: no numbers, just a gold rule marking where
   each one starts. */
.rl-trabajo__item {
  padding-left: 2rem;
  border-left: 2px solid var(--rl-gold);
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 200;
  font-size: var(--text-b, clamp(2rem, .191vw + 1.939rem, 2.2rem));
  line-height: 1.5;
  color: rgb(255 255 255 / .88);
}

.rl-trabajo__item strong {
  font-weight: 700;
  color: #fff;
}

/* A panel rather than a second list: these are conditions, not more of the same
   argument, and the border is what tells the eye they answer a different
   question. Barely lifted off the night behind it — a solid card here would
   punch a hole in a section whose whole tone is dark and quiet. */
.rl-condiciones {
  padding: clamp(2.6rem, 2.5vw, 3.6rem);
  border: 1px solid rgb(181 156 103 / .3);
  border-radius: var(--radius-2, 2rem);
  background: rgb(255 255 255 / .028);
}

.rl-condiciones__titulo {
  margin: 0 0 2.4rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-s, 1.4rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rl-gold);
}

.rl-condiciones__lista {
  display: grid;
  gap: 2rem;
  margin: 0;
}

.rl-condiciones__nombre {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-m, 1.6rem);
  font-weight: 500;
  color: #fff;
}

.rl-check {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  color: var(--rl-gold);
}

/* Indented to clear the tick, so the detail hangs off its own heading instead
   of starting a new column of text under the icon. */
.rl-condiciones__detalle {
  margin: .4rem 0 0;
  padding-left: 2.5rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 200;
  font-size: var(--text-s, 1.4rem);
  line-height: 1.55;
  color: rgb(255 255 255 / .72);
}

@media (max-width: 900px) {
  .rl-trabajo__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Dónde estamos ───────────────────────────────────────────────────────── */

.rl-donde .rl-titulo {
  margin-bottom: clamp(3rem, 3vw + 1.5rem, 5rem);
}

.rl-donde__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: clip;
  background: #fff;
  border-radius: var(--radius-2, 2rem);
  box-shadow: 0 1.2rem 3.2rem rgb(0 0 0 / .07);
}

.rl-donde__info {
  padding: clamp(2.4rem, 3vw, 4rem);
}

.rl-donde__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: 2.4rem;
  border-radius: var(--radius, 1rem);
  overflow: clip;
}

.rl-donde__nombre {
  margin: 0 0 2rem;
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--landing-h3, 1.8rem);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rl-ink);
}

/* Only where the map sits in the card's grid. What it looks like comes from
   assets/mapa-local.css, because the same panel now runs across the site. */
.rl-donde__mapa {
  min-width: 0;
}

.rl-datos {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rl-rule);
}

.rl-datos__item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.2rem;
  border-bottom: var(--rl-rule);
  font-size: var(--text-m, 1.6rem);
}

.rl-datos__label {
  font-family: Montserrat, system-ui, sans-serif;
  font-size: var(--text-xs, 1.2rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rl-muted);
}

.rl-datos__item a {
  color: var(--rl-ink);
  text-decoration-color: color-mix(in srgb, var(--rl-ink) 35%, transparent);
  text-underline-offset: 3px;
}

.rl-datos__item a:hover {
  color: var(--rl-gold);
  text-decoration-color: currentColor;
}

.rl-donde__acciones {
  margin-top: 2.4rem;
}

@media (max-width: 900px) {
  .rl-donde__card {
    grid-template-columns: 1fr;
  }

  .rl-donde__mapa {
    order: -1;
  }
}

@media (max-width: 478px) {
  .rl-datos__item {
    grid-template-columns: 1fr;
    gap: .3rem;
  }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.rl-footer {
  background-color: var(--rl-ink);
  font-family: Montserrat, system-ui, sans-serif;
  font-weight: 200;
  color: #fff;
}

/* The band of figures. It sits between the reviews and the close, and the
   third figure is the rating those reviews add up to — the reviews make the
   claim, this counts it. That is what stitches the two together. */
.rl-cifras {
  border-bottom: 1px solid rgb(181 156 103 / .22);
  background: #16130e;
}

.rl-cifras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
  padding-block: clamp(3.5rem, 4vw, 5rem);
}

/* Hairlines between the columns, drawn on the item so they never appear at the
   ends of a row. */
.rl-cifra {
  padding: 2.4rem 0;
  border-top: 1px solid rgb(181 156 103 / .22);
}

.rl-cifra:first-child {
  border-top: 0;
}

@media (min-width: 820px) {
  .rl-cifra {
    padding: 0 clamp(2rem, 3vw, 4rem);
    border-top: 0;
    border-left: 1px solid rgb(181 156 103 / .22);
  }

  .rl-cifra:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .rl-cifra:last-child {
    padding-right: 0;
  }
}

/* Playfair here and only here. The rest of the landing is Montserrat, so the
   figures read as a different kind of statement — closer to an engraved plate
   than to a heading. */
.rl-cifra__valor {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  margin: 0 0 .4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(4rem, 3vw + 3rem, 5.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rl-gold);
  /* Tabular figures so a counting animation does not make the line jitter as
     digit widths change. */
  font-variant-numeric: tabular-nums;
}

.rl-cifra__sobre {
  font-size: .45em;
  font-weight: 400;
  color: rgb(255 255 255 / .45);
}

.rl-cifra__label {
  margin: 0 0 1.2rem;
  font-size: var(--text-xs, 1.2rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .62);
}

.rl-cifra__texto {
  margin: 0;
  font-size: var(--text-s, 1.4rem);
  line-height: 1.6;
  color: rgb(255 255 255 / .62);
}

/* ── Footer close ────────────────────────────────────────────────────────── */

.rl-footer__cierre {
  position: relative;
  padding-block: var(--rl-space-y) 0;
  background-image: url("/wp-content/uploads/footer-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* The photograph is dark but not evenly, and white type over a lucky highlight
   is how a footer becomes unreadable on one device and fine on another. */
.rl-footer__cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgb(22 19 14 / .8), rgb(22 19 14 / .92));
}

.rl-footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
  gap: clamp(3.5rem, 4vw, 6rem);
  align-items: start;
}

.rl-footer__marca {
  display: grid;
  justify-items: start;
  gap: 1.8rem;
}

.rl-footer__logo {
  display: block;
  width: clamp(15rem, 14vw, 19rem);
  height: auto;
}

.rl-footer__claim {
  margin: 0;
  font-size: clamp(1.8rem, 1vw + 1.4rem, 2.4rem);
  font-weight: 200;
  line-height: 1.25;
}

.rl-footer__claim strong {
  display: block;
  font-weight: 200;
  color: var(--rl-gold);
}

.rl-footer__titulo {
  margin: 0 0 1.6rem;
  font-size: var(--text-xs, 1.2rem);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rl-gold);
}

.rl-footer__contacto,
.rl-footer__atajos {
  display: grid;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-m, 1.6rem);
  line-height: 1.5;
}

/* Icon and text as two columns rather than an inline glyph: the address wraps
   to three lines on mobile and an inline icon would let the second line slide
   back under it. A fixed first column keeps every line hanging off one edge. */
.rl-footer__contacto li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1.2rem;
  align-items: start;
}

/* Nudged down by a fraction: the glyph's optical centre sits above the x-height
   of the first line, and unadjusted it reads as floating. */
.rl-icono {
  width: 2rem;
  height: 2rem;
  margin-top: .35rem;
  color: var(--rl-gold);
}

.rl-footer__contacto a,
.rl-footer__atajos a {
  color: rgb(255 255 255 / .86);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgb(255 255 255 / .28);
  transition: var(--transicion-hover, .3s ease-in-out);
  transition-property: color, text-decoration-color;
}

.rl-footer__contacto a:hover,
.rl-footer__atajos a:hover {
  color: var(--rl-gold);
  text-decoration-color: currentColor;
}

.rl-footer__atajos strong {
  font-weight: 500;
}

.rl-footer__legal {
  position: relative;
  max-width: var(--rl-ancho);
  margin: clamp(4rem, 5vw, 6rem) auto 0;
  padding: 2.4rem var(--rl-gutter);
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: var(--text-s, 1.4rem);
  color: rgb(255 255 255 / .5);
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rl-cifra__valor {
    /* The figure is already correct in the markup; the count is decoration. */
    transition: none;
  }

  .rl-invertir__brillo {
    animation: none;
  }

  .rl-invertir__brillo {
    opacity: 0;
  }

  .rl-pieza__img,
  .rl-btn,
  .rl-hero__video,
  .rl-footer__nav a,
  .rl-datos__item a {
    transition: none;
  }

  /* The case still works — the script simply stops turning it on its own and
     stops chasing the pointer. What is left is a lit piece and four buttons,
     so nothing here has to move for the hero to do its job. */
  .rl-vitrina__capa {
    scale: 1;
    transition: none;
  }

  .rl-vitrina__cristal,
  .rl-vitrina__boton,
  .rl-vitrina__punto::before {
    transition: none;
  }

  .rl-pieza:hover .rl-pieza__img {
    --rl-hover: 1;
  }
}