/* Hero → definición: único efecto de scroll de esta prueba. */
.watch-detail-page--editorial > .watch-hero-pin-shell {
  position: relative;
  width: 100%;
  min-width: 0;
  height: var(--watch-hero-pin-height, auto);
}

/* El wrapper solo aporta el recorrido de pin; este bloque conserva el Hero editorial intacto. */
.watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block {
  --watch-editorial-ink: #15202b;
  --watch-editorial-muted: #536270;
  --watch-editorial-border: rgba(27, 40, 52, 0.14);
  --watch-editorial-border-strong: rgba(27, 40, 52, 0.24);
  --watch-editorial-highlight: rgba(255, 255, 255, 0.52);
  --watch-editorial-section-bg: linear-gradient(180deg, #fcfbf8 0%, #f4efe7 100%);
  --watch-editorial-section-overlay:
    linear-gradient(115deg, rgba(255, 255, 255, 0.82) 0 42%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(235, 241, 244, 0.5), rgba(235, 241, 244, 0));
  --watch-editorial-section-glow:
    radial-gradient(circle at 78% 24%, rgba(177, 199, 214, 0.28), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(223, 206, 188, 0.24), transparent 22%);
  --watch-editorial-section-pad-block: clamp(42px, 7vw, 92px);
  --watch-editorial-section-pad-top: calc(var(--watch-editorial-section-pad-block) + var(--header-offset) - 85px);
  --watch-editorial-section-pad-bottom: var(--watch-editorial-section-pad-block);
  --watch-editorial-panel: rgba(255, 255, 255, 0.8);
  --watch-editorial-panel-strong: rgba(255, 255, 255, 0.94);
  position: sticky;
  top: var(--watch-hero-pin-top, 0px);
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(320px, 0.96fr) minmax(0, 1.04fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  overflow: visible;
  margin-top: calc(var(--header-offset) * -1);
  margin-inline: calc(50% - 50vw);
  width: auto;
  border: 0;
  border-radius: 0;
  background:
    var(--watch-editorial-section-glow),
    var(--watch-editorial-section-overlay),
    var(--watch-editorial-section-bg);
  box-shadow: none;
  padding: var(--watch-editorial-section-pad-top) var(--watch-editorial-gutter) var(--watch-editorial-section-pad-bottom);
}

.watch-detail-page--editorial
  > .watch-hero-pin-shell
  > .watch-detail-hero-block
  > :not(.watch-hero-definition-layer) {
  position: relative;
  z-index: 1;
}

.watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block::after {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: var(--watch-editorial-gutter);
  width: min(42vw, 460px);
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(55, 77, 93, 0.16), rgba(55, 77, 93, 0));
  pointer-events: none;
}

/* La columna mantiene su composición, pero usa medidas reales más generosas. */
@media (min-width: 1101px) {
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-content {
    align-self: start;
    gap: 19px;
    padding-bottom: 24px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-kicker {
    padding: 9px 17px;
    font-size: 0.84rem;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title {
    font-size: clamp(2.32rem, 5.6vw, 3.9rem);
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-tagline {
    font-size: clamp(1.1rem, 1.36vw, 1.24rem);
    line-height: 1.66;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-info {
    gap: 18px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-grid {
    margin-top: 18px;
    gap: 14px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-info .watch-detail-meta-row {
    padding-block: 14px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-row dt {
    font-size: 0.83rem;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-row dd {
    font-size: 1.13rem;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-actions-row {
    grid-template-columns: minmax(300px, 1fr) minmax(185px, 206px);
    gap: 24px;
    margin-top: 34px;
    padding-top: 20px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-view[data-watch-reaction-view] .watch-detail-reactions-grid {
    width: 288px !important;
    grid-auto-rows: 35px !important;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-view[data-watch-reaction-view="rating"] .watch-detail-reactions-grid {
    grid-template-columns: repeat(5, 56px) !important;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-view[data-watch-reaction-view] .watch-detail-reaction-chip {
    height: 35px !important;
    min-height: 35px !important;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-view[data-watch-reaction-view="rating"] .watch-detail-reaction-chip {
    width: 56px !important;
    min-width: 56px !important;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-view[data-watch-reaction-view="rating"] .watch-detail-reaction-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-count {
    font-size: 0.7rem;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-actions-row .watch-detail-brand-logo-slot {
    width: 208px;
  }
}

.watch-detail-page.watch-hero-definition-experience > .watch-detail-intro {
  display: none;
}

.watch-detail-page.watch-hero-definition-experience .watch-detail-hero-content {
  opacity: var(--watch-hero-content-opacity, 1);
  filter: blur(var(--watch-hero-content-blur, 0px));
  will-change: opacity, filter;
}

/* The hero media remains in its own grid area. Its visual compensation follows
   the already-rendered definition progress, so it never changes layout, scroll
   triggers or the text column's available width. */
.watch-detail-page.watch-hero-definition-experience .watch-detail-hero-media {
  transform: translate3d(var(--watch-hero-definition-media-shift, 0px), 0, 0);
  will-change: transform;
}

.watch-hero-definition-layer {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: max(0px, calc(var(--watch-editorial-gutter) - clamp(0px, 3.6vw, 64px)));
  left: calc(40% + clamp(10px, 1.8vw, 28px));
  display: grid;
  align-content: center;
  transform: translateY(-50%);
  opacity: var(--watch-hero-definition-opacity, 0);
  filter: blur(var(--watch-hero-definition-blur, 0.7px));
  color: var(--watch-editorial-ink, var(--color-text));
  pointer-events: none;
  will-change: opacity, filter;
  min-width: 0;
}

.watch-hero-definition-layer p {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1rem, 1.3vw, 1.24rem);
  font-weight: 460;
  line-height: 1.46;
  overflow-wrap: anywhere;
}

.watch-detail-page.watch-hero-definition-experience
  > .watch-hero-pin-shell
  > .watch-detail-hero-block
  :is(.watch-detail-hero-note, .watch-detail-hero-gallery-nav) {
  opacity: var(--watch-hero-content-opacity, 1);
  filter: blur(var(--watch-hero-content-blur, 0px));
  will-change: opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
  .watch-detail-page.watch-hero-definition-experience .watch-detail-hero-content,
  .watch-hero-definition-layer {
    filter: none;
  }
}

@media (max-width: 1100px) {
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block {
    grid-template-columns: 1fr;
  }
}

/* En alturas de portátil o ventana reducida el Hero sigue siendo una única
   pantalla de lectura. La misma composición se compacta verticalmente: no se
   desplaza ninguna capa ni se modifica el pin, solo se reparte el espacio
   entre reloj, ficha y acciones para que la última fila no se corte. */
@media (min-width: 900px) {
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-image {
    max-width: min(100%, 480px);
  }
}

@media (min-width: 900px) and (max-height: 980px) {
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-actions-row {
    gap: clamp(12px, 1.8vw, 20px);
    margin-top: clamp(14px, 2.2vh, 22px);
    padding-top: clamp(10px, 1.5vh, 14px);
  }
}

/* La escala del reloj permanece estable. Solo su posición y la de la ficha
   responden a la altura disponible: en un lienzo bajo suben apenas, y en uno
   alto recuperan aire hacia abajo sin modificar el recorrido del Hero. */
@media (min-width: 900px) {
  /* El archivo del reloj reserva una franja transparente al pie. Se descuenta
     del flujo de la figura para que el pie de foto siga al reloj real. */
  .watch-detail-page.watch-hero-runtime-fit > .watch-hero-pin-shell > .watch-detail-hero-block :is(.watch-detail-hero-media, .watch-detail-hero-content) {
    align-self: start;
    translate: 0 var(--watch-hero-runtime-offset);
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-note {
    position: static;
    z-index: auto;
    top: auto;
    left: auto;
    width: auto;
    margin: 0;
    color: rgba(205, 220, 232, 0.84);
  }
}

@media (max-width: 899px) {
  /* El panel temporal de favorito se anima fuera del borde derecho. En iOS
     no debe ensanchar el área desplazable de toda la ficha. */
  html:has(body.page-watch-detail),
  body.page-watch-detail {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block {
    --watch-editorial-section-pad-block: 22px;
    gap: 18px;
    padding-inline: 14px;
  }

  .watch-hero-definition-layer {
    top: auto;
    right: 18px;
    bottom: clamp(28px, 7vh, 62px);
    left: 18px;
    transform: none;
    text-align: center;
  }

  .watch-hero-definition-layer p {
    font-size: clamp(1.05rem, 4.5vw, 1.34rem);
  }

  .watch-detail-page.watch-hero-definition-experience .watch-detail-hero-media {
    transform: none;
    will-change: auto;
  }
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block {
  --watch-editorial-section-bg:
    linear-gradient(112deg, #091a27 0 42%, #152733 42% 100%);
  --watch-editorial-section-overlay:
    linear-gradient(115deg, rgba(5, 17, 27, 0.38) 0 42%, rgba(5, 17, 27, 0) 42%),
    linear-gradient(180deg, rgba(74, 108, 129, 0.16), rgba(37, 62, 79, 0));
  --watch-editorial-section-glow:
    radial-gradient(circle at 78% 24%, rgba(95, 139, 165, 0.22), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(47, 88, 113, 0.18), transparent 22%);
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block::after {
  background: linear-gradient(90deg, rgba(151, 187, 216, 0.2), rgba(151, 187, 216, 0));
}

/* Dark mode shares the hero's light-mode structure; only its palette changes. */
body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-figure,
body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-image {
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Night hero: the reaction controls remain the same component, but use an
   elevated blue-charcoal surface instead of the day-mode white chips. */
body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-tagline {
  color: rgba(211, 225, 236, 0.86) !important;
}

body.night-mode .watch-hero-definition-layer,
body.night-mode .watch-hero-definition-layer :is(p, strong, em, a) {
  color: #f5f8fb !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-title {
  color: rgba(196, 215, 229, 0.82) !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions .watch-detail-reaction-chip,
body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions .watch-detail-reaction-chip::before {
  border-color: rgba(185, 213, 231, 0.34) !important;
  background: linear-gradient(145deg, rgba(39, 61, 77, 0.98), rgba(24, 41, 54, 0.98)) !important;
  color: rgba(236, 244, 250, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 7px rgba(0, 0, 0, 0.18) !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions .watch-detail-reaction-chip:is(:hover, :focus-visible) {
  border-color: rgba(213, 232, 245, 0.58) !important;
  background: linear-gradient(145deg, rgba(50, 77, 96, 0.99), rgba(29, 50, 65, 0.99)) !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions .watch-detail-reaction-chip.is-active,
body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions .watch-detail-reaction-chip.is-active::before {
  border-color: rgba(205, 229, 242, 0.7) !important;
  background: linear-gradient(145deg, rgba(77, 111, 133, 0.98), rgba(43, 72, 91, 0.98)) !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions :is(.watch-detail-reaction-icon, .watch-detail-reaction-gender-symbol, .watch-detail-reaction-count) {
  color: rgba(238, 246, 251, 0.94) !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-dial {
  border-color: rgba(185, 213, 231, 0.34) !important;
  background: rgba(22, 40, 53, 0.96) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-indicator {
  background: rgba(75, 106, 126, 0.96) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.26) !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-option {
  color: rgba(190, 211, 225, 0.74) !important;
}

body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-option[aria-pressed="true"] {
  color: rgba(247, 251, 253, 0.98) !important;
}

.watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row,
.watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-title {
  min-width: 0;
  max-width: 100%;
}

.watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-title {
  width: auto;
  max-width: calc(100% - 38px);
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Hero móvil: composición propia del bloque que participa en el pin.  No
   modifica su altura, sticky ni el recorrido de definición; solo el orden y
   las medidas de los elementos visibles antes de esa transición. */
@media (max-width: 899px) {
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block {
    --watch-editorial-section-overlay: linear-gradient(180deg, rgba(235, 241, 244, 0.4), rgba(235, 241, 244, 0));
    --watch-editorial-section-pad-top: calc(var(--header-offset, 72px) + 12px);
    display: grid;
    grid-template-columns: minmax(0, 0.60fr) minmax(0, 0.40fr);
    grid-template-areas:
      "headline headline"
      "media meta"
      "actions actions"
      "auth auth";
    align-items: start;
    gap: 20px 18px;
    isolation: isolate;
  }

  /* La superficie clara nace a la izquierda y mantiene su diagonal hasta el
     final de la pieza. Es una capa de fondo, nunca un recorte del reloj. */
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0 auto 0 0;
    width: 64%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(251, 247, 240, 0.86));
    clip-path: polygon(0 0, 100% 0, 42% 100%, 0 100%);
    pointer-events: none;
  }

  body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block {
    --watch-editorial-section-overlay: linear-gradient(180deg, rgba(57, 83, 101, 0.16), rgba(14, 27, 37, 0));
  }

  body.night-mode .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block::before {
    background: linear-gradient(180deg, rgba(8, 20, 30, 0.94), rgba(11, 25, 36, 0.9));
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block > .watch-detail-hero-media {
    grid-area: media;
    position: relative;
    z-index: 1;
    align-self: start;
    min-width: 0;
    gap: 3px;
    margin-left: -20px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-figure {
    width: 120%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-note {
    width: calc(100% - 24px);
    margin: 1px 0 0 24px;
    font-size: 0.57rem;
    line-height: 1.25;
    text-align: left;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block > .watch-detail-hero-content {
    display: contents;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-headline {
    grid-area: headline;
    position: static;
    z-index: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    gap: 0;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-copy,
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row {
    width: 100%;
    min-width: 0;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-copy {
    gap: 0;
    padding-bottom: 0;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-kicker,
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-tagline {
    display: none;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row {
    display: block;
    /* El favorito fijo comparte este grupo con el título. Debe quedar por
       delante de la definición animada, que usa la capa 2. */
    position: relative;
    z-index: 3;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-title {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    overflow: visible;
    white-space: nowrap;
    overflow-wrap: normal;
    text-wrap: nowrap;
    font-size: clamp(1rem, 5vw, 1.28rem);
    line-height: 1.08;
    letter-spacing: 0.012em;
    text-align: center;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn,
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-icon {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    box-sizing: border-box;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    justify-content: center;
    position: fixed;
    /* Queda sobre todo el hero, pero inmediatamente bajo el header (1300)
       para que este lo cubra al desplazarse hacia abajo. */
    z-index: 1299;
    /* Se solapa un píxel con el header: la línea pertenece a la esquina,
       no es un hueco donde pueda asomarse el fondo del hero. */
    top: calc(var(--mobile-favorite-anchor-top, var(--header-offset, 72px)) - 1px);
    right: 0;
    left: auto;
    transition: transform 160ms ease;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn::before {
    inset: 0;
    width: auto;
    height: auto;
    z-index: 0;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: var(--header-bg) !important;
    pointer-events: none;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-icon {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 17px;
    min-width: 17px;
    height: 17px;
    min-height: 17px;
    z-index: 1;
    display: none !important;
    visibility: hidden !important;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-icon svg {
    display: none !important;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn::after {
    position: absolute;
    z-index: 2;
    top: calc(33.333% - 8.5px);
    right: auto;
    left: calc(66.667% - 8.5px);
    width: 17px;
    height: 17px;
    content: "";
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 20.5 4.6 13.5a4.6 4.6 0 0 1 0-6.6 4.7 4.7 0 0 1 6.7 0L12 7.6l.7-.7a4.7 4.7 0 0 1 6.7 0 4.6 4.6 0 0 1 0 6.6Z'/%3E%3C/svg%3E");
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn.is-active::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f2c94c' d='M12 20.5 4.6 13.5a4.6 4.6 0 0 1 0-6.6 4.7 4.7 0 0 1 6.7 0L12 7.6l.7-.7a4.7 4.7 0 0 1 6.7 0 4.6 4.6 0 0 1 0 6.6Z'/%3E%3C/svg%3E");
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-label {
    display: none;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-toast {
    position: absolute;
    top: 0;
    right: 0;
    left: 46px;
    /* Por encima de la lámina triangular (0), pero bajo el corazón (2).
       El contexto completo vive en 1299, bajo el header global. */
    z-index: 1;
    width: auto;
    max-width: none;
    height: 46px;
    min-height: 46px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    overflow: hidden;
    color: #fff;
    background: var(--header-bg);
    font-family: "Manrope", "Segoe UI", Arial, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    font-variation-settings: "wght" 800;
    -webkit-text-stroke: 0.01em currentColor;
    line-height: 1.1;
    letter-spacing: 0.035em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    text-transform: uppercase;
    transform: none;
    transition: opacity 360ms ease 180ms;
    white-space: nowrap;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn.has-mobile-toast .watch-detail-favorite-toast {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn:is(.has-mobile-toast, .is-mobile-toast-closing) {
    width: min(290px, 100vw);
    min-width: min(290px, 100vw);
    background: var(--header-bg) !important;
    box-shadow: none !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 46px 100%);
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn.has-mobile-toast {
    animation: mobile-favorite-toast-slide-in 980ms cubic-bezier(0.22, 0.75, 0.28, 1) both;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn.is-mobile-toast-closing {
    pointer-events: none;
    animation: mobile-favorite-toast-collapse 720ms cubic-bezier(0.58, 0.08, 0.72, 0.44) both;
  }

  @keyframes mobile-favorite-toast-slide-in {
    from {
      transform: translateX(calc(100% - 46px));
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes mobile-favorite-toast-collapse {
    from {
      transform: translateX(0);
      clip-path: polygon(0 0, 100% 0, 100% 100%, 46px 100%);
    }

    to {
      transform: translateX(calc(100% - 46px));
      clip-path: polygon(0 0, 46px 0, 46px 46px);
    }
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn:is(.has-mobile-toast, .is-mobile-toast-closing)::before {
    content: none;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn:is(.has-mobile-toast, .is-mobile-toast-closing)::after {
    left: calc((46px * 0.6667) - 8.5px);
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn.has-mobile-toast .watch-detail-favorite-toast {
    background: transparent;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-title-row .watch-detail-favorite-btn.is-mobile-toast-closing .watch-detail-favorite-toast {
    visibility: visible;
    opacity: 0;
  }

  /* El aviso necesita salir del contexto de apilado normal del hero durante
     sus pocos segundos visibles. Sigue inmediatamente bajo el header (1300). */
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block:has(
    .watch-detail-favorite-btn
  ) {
    z-index: 1299;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-hero-definition-layer {
    z-index: 0;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-info {
    display: contents;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-grid {
    grid-area: meta;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-self: center;
    gap: 3px;
    margin: 0;
    padding-left: 6px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-info .watch-detail-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    padding: 4px 0;
    border: 0;
    background: transparent;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-row dt {
    font-size: clamp(0.68rem, 2.15vw, 0.77rem);
    line-height: 1.15;
    letter-spacing: 0.08em;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-meta-row dd {
    min-width: 0;
    font-size: clamp(0.81rem, 2.95vw, 0.98rem);
    line-height: 1.22;
    overflow-wrap: anywhere;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-actions-row {
    grid-area: actions;
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 0.46fr);
    align-items: end;
    gap: 8px;
    margin: 0;
    padding-top: 10px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions {
    width: 100%;
    --watch-reaction-chip-min-height: 34px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions-head {
    margin-bottom: 4px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions-title {
    font-size: 0.7rem;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions .watch-detail-reactions-grid {
    width: 100% !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-quick-reactions .watch-detail-reaction-chip {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px;
    padding: 2px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience {
    gap: 5px;
    margin-top: 5px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-dial {
    height: 23px;
    padding: 1px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-option,
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-option:nth-child(1),
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-option:nth-child(2),
  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-reaction-audience-option:nth-child(3) {
    min-height: 21px;
    font-size: 0.58rem;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-actions-row .watch-detail-brand-logo-slot {
    width: min(100%, 112px);
    margin: 0;
    justify-self: end;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-hero-actions-row .watch-detail-brand-logo-wrap {
    padding: 6px 8px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-brand-logo {
    max-height: 34px;
  }

  .watch-detail-page--editorial > .watch-hero-pin-shell > .watch-detail-hero-block .watch-detail-auth-message {
    grid-area: auth;
    position: relative;
    z-index: 1;
    margin: 0;
  }


  /* El gesto nativo del navegador resuelve Volver en pantallas táctiles. */
  body:has(.watch-detail-page--editorial) .context-back-button {
    display: none;
  }
}