/* Guías temporales para componer la transición Hero → Especificaciones. */
.watch-detail-page.watch-specs-guide-experience > .watch-detail-specs-block {
  --watch-editorial-section-pad-top: clamp(36px, 2.2vw, 44px);
  /* Valor congelado: mover el contenido no debe mover la estrella. */
  --watch-specs-guide-anchor-offset: calc(clamp(34px, 6vw, 76px) - clamp(8px, 1vw, 18px));
  --watch-specs-guide-horizontal-correction: -70px;
  position: relative;
  z-index: 5;
  isolation: isolate;
  overflow: visible;
  /* Continúa exactamente el beige del extremo inferior del Hero. */
  --watch-editorial-section-bg: transparent;
  --watch-editorial-section-overlay: none;
  --watch-editorial-section-glow: none;
}

/* La superficie clara del Hero y la silueta comparten color y opacidad. */
.watch-detail-page.watch-specs-guide-experience {
  --watch-specs-surface-color: #f4efe7;
  --watch-specs-linked-surface-color: #fcfbf8;
  --watch-specs-linked-surface-opacity: 0.96;
  --watch-specs-linked-surface-overlay: rgb(252 251 248 / 0.82);
  /* El plano de Specs no participa en la interpolación cromática del fondo. */
  --watch-specs-guide-fill-opacity: 0.96;
  /* Galería lee el mismo tono que el fondo superior en cada frame. */
  --watch-editorial-shared-warm-surface: var(--watch-specs-surface-color);
}

.watch-detail-page.watch-specs-guide-experience {
  position: relative;
  isolation: isolate;
}

.watch-specs-continuous-surface {
  position: absolute;
  z-index: 0;
  /* El Hero sube una altura de cabecera para quedar bajo la navegación fija.
     La superficie debe acompañarlo en ese mismo tramo: si empezase en 0
     dentro del artículo, se vería una franja huérfana antes del primer plano. */
  top: calc(var(--header-offset) * -1);
  right: 0;
  left: 0;
  /* Ya cubre la entrada a Specs en el primer paint; JS solo ajusta su final. */
  height: max(
    1480px,
    calc(var(--watch-specs-continuous-surface-height, 0px) + var(--header-offset))
  );
  background: var(--watch-specs-surface-color);
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  animation: none;
  transition: none;
  will-change: auto;
  pointer-events: none;
}

/* Hero y Specs se construyen desde la misma pareja de superficies. */
.watch-detail-page.watch-specs-guide-experience
  > .watch-hero-pin-shell
  > .watch-detail-hero-block {
  --watch-editorial-section-bg:
    transparent;
  --watch-editorial-section-overlay:
    linear-gradient(115deg, var(--watch-specs-linked-surface-overlay) 0 42%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(235, 241, 244, 0.5), rgba(235, 241, 244, 0));
}

.watch-detail-page.watch-specs-guide-experience
  > .watch-hero-pin-shell
  > .watch-detail-hero-block::before {
  display: none;
}

/* La línea del Hero se conserva; el ambiente no la cubre. */
.watch-detail-page.watch-specs-guide-experience
  > .watch-hero-pin-shell
  > .watch-detail-hero-block::after {
  display: none;
}

.watch-detail-page--editorial > .watch-detail-specs-block > .watch-specs-guide-art {
  position: absolute;
  z-index: 5;
  top: calc(-178px + var(--watch-specs-guide-anchor-offset));
  left: calc(var(--watch-editorial-gutter) + var(--watch-specs-guide-horizontal-correction));
  width: min(63.74vw, 1040px);
  height: min(650px, 49vw);
  min-height: 430px;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  animation: none;
  transition: none;
  will-change: auto;
  overflow: visible;
  pointer-events: none;
}

.watch-detail-page--editorial > .watch-detail-specs-block > :not(.watch-specs-guide-art) {
  z-index: 6;
}

.watch-detail-page--editorial > .watch-detail-specs-block > .watch-specs-guide-art + .watch-detail-block-head {
  margin-top: 14px;
}

.watch-specs-guide-fill {
  position: absolute;
  z-index: 0;
  top: 0;
  left: -360px;
  width: 1400px;
  height: 900px;
  background: var(--watch-specs-linked-surface-color, #fcfbf8);
  opacity: 0.96;
  visibility: visible;
  transform: none;
  filter: none;
  clip-path: polygon(0 0, 315px 46px, 1082px 220px, 465px 276px, 147px 816px, 0 816px);
  animation: none;
  transition: none;
  will-change: auto;
}

.watch-detail-page.watch-specs-guide-experience .watch-detail-specs-grid > .watch-detail-spec-card {
  translate: 0 var(--watch-specs-card-y, 0px);
  will-change: translate;
}

/* Solo la silueta exterior cambia; el interior de las cards permanece intacto. */
.watch-detail-page.watch-specs-guide-experience .watch-detail-specs-grid > .watch-detail-spec-card:nth-child(4n + 2) {
  border-radius: 10px 4px 18px 7px;
}

.watch-detail-page.watch-specs-guide-experience .watch-detail-specs-grid > .watch-detail-spec-card:nth-child(5n + 3) {
  border-radius: 6px 16px 7px 19px;
}

.watch-detail-page.watch-specs-guide-experience .watch-detail-specs-grid > .watch-detail-spec-card:nth-child(6n + 5) {
  border-radius: 16px 7px 17px 5px;
}

body.night-mode .watch-detail-page.watch-specs-guide-experience > .watch-detail-specs-block {
  --watch-editorial-section-bg: transparent;
  --watch-editorial-section-overlay: none;
}

/* Day has no surface painted directly on this section: its two linked planes
   are the continuous base and the clipped guide above it.  A generic legacy
   night rule was adding a blue wash to the whole block, splitting that pair
   exactly at the Hero → Specifications boundary.  Keep the shared geometry
   and all of its decorative layers; only remove that inherited wash here. */
body.night-mode .watch-detail-page.watch-specs-guide-experience > .watch-detail-specs-block.watch-detail-block {
  background: transparent;
}

/* The linked Hero → Specs plane keeps its geometry; in night mode only its
   palette changes, so neither the continuous surface nor its inner guide can
   expose the light-theme fill. */
body.night-mode .watch-detail-page.watch-specs-guide-experience {
  --watch-specs-surface-color: #101a23;
  --watch-specs-linked-surface-color: #101a23;
  --watch-specs-linked-surface-overlay: rgb(16 26 35 / 0.9);
}

body.night-mode .watch-detail-page.watch-specs-guide-experience .watch-specs-continuous-surface {
  background:
    linear-gradient(
      180deg,
      var(--watch-specs-surface-color) 0 96%,
      color-mix(in srgb, var(--watch-specs-surface-color) 97%, #05090d) 100%
    );
}

body.night-mode .watch-detail-page.watch-specs-guide-experience .watch-specs-guide-fill {
  background:
    linear-gradient(180deg, rgb(62 89 108 / 0.18), rgb(62 89 108 / 0)),
    linear-gradient(154deg, #020c16 0%, #05131d 100%);
}

/* Misma arquitectura que día: el Hero es transparente durante el enlace,
   de modo que la superficie continua aparece a la derecha y la guía ocupa
   únicamente el plano diagonal izquierdo. Solo cambia la paleta nocturna. */
body.night-mode .watch-detail-page.watch-specs-guide-experience
  > .watch-hero-pin-shell
  > .watch-detail-hero-block {
  --watch-editorial-section-bg: transparent;
  --watch-editorial-section-overlay:
    linear-gradient(115deg, rgb(3 15 27 / 0.96) 0 42%, rgb(3 15 27 / 0) 42%),
    linear-gradient(180deg, rgba(62, 89, 108, 0.18), rgba(62, 89, 108, 0));
}

@media (max-width: 899px) {
  .watch-detail-page.watch-specs-guide-experience > .watch-detail-specs-block {
    --watch-editorial-section-pad-top: 24px;
    --watch-specs-guide-anchor-offset: 14px;
    /* La guía decorativa mide 1400 px para dibujar su diagonal completa.
       En móvil no puede participar en el ancho desplazable de la página. */
    overflow-x: hidden;
    overflow-x: clip;
  }

  .watch-specs-guide-art {
    top: calc(-94px + var(--watch-specs-guide-anchor-offset));
    width: min(94vw, 620px);
    height: 330px;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .watch-detail-page.watch-specs-guide-experience .watch-detail-specs-grid > .watch-detail-spec-card {
    translate: 0 0;
    will-change: auto;
  }
}