/* ============================================================================
   RARA · horizon.css — EL HORIZONTE, the seasons module (owner redline
   2026-07-19: "muy simplista" + looked selectable but wasn't + the meter/bar
   idiom outlawed sitewide; owner: "no meterías alguna imagen de fondo?").
   Replaces the retired season renderers (spotlight's _inst.html hue tick-rail
   + the PDP's inline SVG cel-seasons glyphs) with one shared photographic
   coast horizon: four selectable season stations whose ELEVATION + DIAMETER —
   never a per-season hue — encode the real p.ficha_seasons proportion. Shared
   by templates/catalog/detail.html and _spotlight.html via _horizon.html. The
   ONE saturated moment is the dominant season's burgundy disc; every other
   station stays mist with a hairline ring (WCAG: color is never the sole
   carrier — same law that retired season_hue from every other meter).
   Reveal-on-scroll rides the sitewide [data-reveal] contract (motion.css) —
   no bespoke entrance CSS needed here, only the selection-interaction motion.
   ============================================================================ */

.horizon-mod{margin-top:8px}

/* Rounded hairline frame around the ground image (mirrors .gallery's
   border-radius:6px / var(--line-2) hairline convention, pdp.css). Default
   ground is the engraved banknote-style horizon (owner redline 2026-07-19
   part 2: the full-colour photo "rompe la armonía" against the sibling
   engraved modules) — background-color is the fallback if that file is ever
   missing, so a 404 degrades to a flat, still-legible ground instead of a
   blank hole. */
.horizon-strip{
  position:relative;
  height:140px;
  border:1px solid var(--line-2);
  border-radius:8px;
  overflow:hidden;
  background-color:var(--cream); /* fallback if the ground image 404s */
  /* Default ground = the PARAMETRIC engraved horizon (SVG, not raster): infinitely
     sharp at any DPI, and its ink is a CSS var (--hz-ink) so family hues can
     re-ink the plate later. The Gemini organic engraving stays a cull candidate. */
  background-image:url("/static/research-ambience/horizon-grabado.ab7bc745a985.svg");
  background-size:cover;
  background-position:center 62%; /* SVG's own horizon sits high; show sea + sun */
}
/* ?hz= cull variants — see _horizon.html for the switcher contract. */
.horizon-mod--foto .horizon-strip{
  background-image:url("/static/research-ambience/01-banknote-coast-marea.cbd02aa608e2.webp");
}
.horizon-mod--duo .horizon-strip{
  background-image:url("/static/research-ambience/horizon-duo-oxblood.ccd260755313.webp");
}
.horizon-mod--aquaduo .horizon-strip{
  background-image:url("/static/research-ambience/horizon-duo-aqua.1c7911d849ac.webp");
}

.horizon-row{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:space-evenly;
  padding:0 6% 16px;
  --hz-scale:1;
}

.horizon-station{
  appearance:none; background:none; border:0; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center;
  position:relative;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}

/* --d-raw / --el-raw (unitless px) are set inline per station from the real
   p.ficha_seasons pct (see _horizon.html); --hz-scale only adjusts the visual
   scale responsively, never the underlying data-derived numbers. */
.horizon-disc{
  display:block;
  width:calc(var(--d-raw) * 1px * var(--hz-scale));
  height:calc(var(--d-raw) * 1px * var(--hz-scale));
  margin-bottom:calc(var(--el-raw) * 1px * var(--hz-scale));
  border-radius:50%;
  background:var(--cream);
  border:1px solid var(--line-ui);
  box-shadow:0 1px 3px rgba(26,21,24,.18); /* single light source, faint */
  transition:width var(--dur-fast) var(--ease-out),height var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.horizon-station.is-dominant .horizon-disc{background:var(--burgundy);border-color:var(--burgundy-deep)}
.horizon-station.is-sel .horizon-disc{transform:scale(1.16)}

/* Contrast law (pale engraved/duo grounds): the translucent mist wash below
   was tuned against the real, varied ?hz=foto photo. The engraved default and
   both duotone crops are paler and flatter, so their ring + label/pct
   backplates swap the wash for a fully OPAQUE hairline chip — same cream +
   hairline idiom .horizon-strip's own frame already uses. An opaque fill has
   no "worst point": ink-on-cream clears WCAG 4.5:1 (~15:1) no matter what
   sits underneath. ?hz=foto is untouched below. */
.horizon-mod:not(.horizon-mod--foto) .horizon-disc{box-shadow:none;border-color:var(--burgundy-deep)}

/* The exact percentage — fades in beside the disc only while its station is
   selected; positioned off-flow so it never shifts the row's layout. */
.horizon-pct{
  position:absolute;
  left:calc(50% + (var(--d-raw) * 1px * var(--hz-scale)) / 2 + 6px);
  bottom:calc((var(--el-raw) * 1px * var(--hz-scale)) + (var(--d-raw) * 1px * var(--hz-scale)) / 2 - 8px);
  background:rgba(238,240,234,.85);
  color:var(--ink);
  font-size:10px; letter-spacing:.03em; white-space:nowrap;
  padding:2px 5px; border-radius:3px;
  opacity:0; transition:opacity var(--dur-fast) var(--ease-out);
  pointer-events:none;
}
.horizon-station.is-sel .horizon-pct{opacity:1}

/* Contrast law: labels over the photo sit on a mist backplate, never raw. */
.horizon-label{
  margin-top:6px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
  background:rgba(238,240,234,.85);
  padding:2px 6px; border-radius:2px;
  white-space:nowrap;
}

/* Same opaque-swap as the disc above: non-foto grounds get a solid cream +
   hairline chip instead of the translucent mist wash. */
.horizon-mod:not(.horizon-mod--foto) .horizon-pct,
.horizon-mod:not(.horizon-mod--foto) .horizon-label{
  background:var(--cream);
  border:1px solid var(--line-2);
}

.horizon-caption{margin:10px 0 0;font-size:11.5px;letter-spacing:.02em;color:var(--muted)}

@media(max-width:700px){
  .horizon-strip{height:104px}
  .horizon-row{--hz-scale:.72;padding:0 5% 10px}
  .horizon-label{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .horizon-disc,.horizon-pct{transition:none}
}