/* technology.css — estilos propios de technology.html (Technology / Beam Patterns).
   Reutiliza el design system + components.css + beam.css. */

/* Sin hero: la página abre en la sección flagship (#products). Su título es ahora
   el h1, así que le damos el tamaño de .head h2 y un padding-top que despeja el
   header sticky para que no quede pegado arriba. */
.head h1{font-size:clamp(2.3rem,4.8vw,3.6rem);margin:12px 0 0}
/* Tighten the inter-section rhythm on this page only (was 96/96 → 192px between
   sections). Scoped via #main so other pages' .block spacing is unchanged. The
   jump-target scroll-margin-top (below) is separate and untouched. */
#main > section.block{padding:64px 0}
/* La PRIMERA sección (sea cual sea tras reordenar) despeja el header sticky. */
#main > section.block:first-of-type{padding-top:128px}

/* Hero corto (sin imagen de fondo pesada) — clase ya sin uso tras quitar el hero. */
.tech-hero{position:relative;padding:150px 0 72px;border-bottom:1px solid var(--line-2);overflow:hidden}
.tech-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 16% 0%, rgba(225,6,0,.10), transparent 60%)}
.tech-hero .wrap{position:relative;z-index:1}
.tech-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:14px 0 0;padding-right:.18em}
.tech-hero .lede{color:#D6D6D6;font-size:1.1rem;max-width:40em;margin:20px 0 0}

/* Galería "Real Trail Output" (usa .beam-photo de beam.css como tile) */
.trail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.trail-grid .beam-photo{position:relative;aspect-ratio:4/5}
.trail-grid .beam-photo picture{position:absolute;inset:0}
.trail-grid .beam-photo img{width:100%;height:100%;object-fit:cover}

/* Pilares: 4 en grid */
.pillars.tech-pillars{grid-template-columns:repeat(4,1fr)}
.pillar .pnum{display:block;font-family:var(--display);font-style:italic;font-size:1.5rem;color:rgba(255,255,255,.22);margin-bottom:6px}

/* Marca de placeholder de specs */
.ph{display:inline-block;font-family:var(--util);text-transform:uppercase;letter-spacing:.10em;
  font-size:.60rem;font-weight:600;color:var(--accent);border:1px solid rgba(225,6,0,.4);
  border-radius:4px;padding:2px 6px;margin-right:6px;vertical-align:middle}

@media(max-width:980px){
  .trail-grid{grid-template-columns:repeat(2,1fr)}
  .pillars.tech-pillars{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .trail-grid{grid-template-columns:1fr}
  .pillars.tech-pillars{grid-template-columns:1fr}
}

/* ============================================================
   JUMP MENU (anchor nav) — HTML + CSS only, no JS
   Sticks just below the sticky site header (.site-header .nav = 90px).
   ============================================================ */
html{scroll-behavior:smooth}

.anchor-nav{position:sticky;top:90px;z-index:50;
  background:rgba(10,10,10,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.anchor-nav__row{display:flex;gap:10px;padding:12px 0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.anchor-nav__link{flex:0 0 auto;white-space:nowrap;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.10em;
  font-size:.82rem;font-weight:700;color:var(--silver);
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:99px;
  padding:9px 18px;transition:color .2s,border-color .2s,background .2s}
.anchor-nav__link:hover{color:#fff;border-color:var(--accent);background:rgba(225,6,0,.12)}
.anchor-nav__link:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}

/* Al saltar a una sección, su encabezado queda BAJO las barras fijas (header + jump menu). */
#products,#evolve,#scene,#xseries,#fog,#rock,#chase{scroll-margin-top:164px}

@media(max-width:560px){
  /* En móvil los 7 chips se desplazan en una sola fila (sin romper el layout). */
  .anchor-nav__row{gap:8px}
}

/* ============================================================
   CHANGE B — Compact LED series sections (EXPERIMENT, tunable)
   The product image+specs row is shrunk and centered so the page reads tighter.
   TUNE HERE: --series-img-max is the ONLY image-size knob; --series-row-max caps
   the whole image+specs row width. Both live in one place below.
   ============================================================ */
:root{
  --series-img-max: 320px;        /* product image max width (was ~584px at 1280 → ~half) */
  --series-row-max: 860px;        /* max width of the whole image+specs row (centered)    */
  --series-spec-fz: 0.82rem;      /* spec VALUE text size (was .93rem → ~12% smaller)     */
  --series-spec-label-fz: 0.68rem;/* spec LABEL text size (was .76rem → ~11% smaller)     */
}

/* Center + cap the whole row so the spec text isn't stranded wide when the image shrinks. */
#main .feature{
  max-width: var(--series-row-max);
  margin-left: auto;
  margin-right: auto;
}

/* Desktop (>980px keeps the 2-col grid; ≤980px stacking from components.css is preserved). */
@media(min-width:981px){
  #main .feature{
    grid-template-columns: var(--series-img-max) 1fr;
    gap: 40px;
    align-items: center;
  }
}

/* Cap the image itself and keep it centered when the row stacks on narrow screens. */
#main .feature .shot{
  max-width: var(--series-img-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Spec text (label–value rows) shrunk + tightened to match the compact image.
   Scoped to the series sections only (#main .feature) so nothing else changes.
   TUNE: --series-spec-fz (value) and --series-spec-label-fz (label) in :root above. */
#main .feature .specs li{
  font-size: var(--series-spec-fz);
  padding: 10px 0;          /* was 13px 0 — slightly tighter */
  line-height: 1.3;
}
#main .feature .specs li span:first-child{
  font-size: var(--series-spec-label-fz);
}

/* ===== P3: visitor controls for the 3D viewer (terrain picker + view toggle + reset) =====
   On-brand: dark panel, accent red active state, Saira (util) labels, Inter buttons. */
.beam-ui{
  display:flex; flex-direction:column; gap:10px;
  margin-top:14px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
}
.beam-ui[hidden]{display:none;}
.beam-ui-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.beam-ui-label{
  font-family:var(--util); text-transform:uppercase; letter-spacing:.18em;
  font-size:.72rem; color:var(--muted); flex:0 0 auto; min-width:64px;
}
.seg{display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:10px; padding:4px;}
.seg-btn{
  font-family:var(--body); font-size:.82rem; font-weight:600; line-height:1;
  color:var(--silver); background:transparent; border:1px solid transparent;
  border-radius:7px; padding:8px 12px; cursor:pointer; white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.seg-btn:hover{color:var(--txt); border-color:#3a3a3a;}
.seg-btn.is-active{background:var(--accent); color:#fff; border-color:var(--accent);}
.seg-btn.is-active:hover{background:var(--accent-hi); border-color:var(--accent-hi);}
.seg-btn:focus-visible, .beam-ui-reset:focus-visible{
  outline:2px solid var(--accent-hi); outline-offset:2px;
}
.beam-ui-reset{
  font-family:var(--util); text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--silver); background:transparent;
  border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer;
  margin-left:auto; transition:color .15s,border-color .15s;
}
.beam-ui-reset:hover{color:var(--txt); border-color:var(--accent);}
@media (max-width:760px){
  .beam-ui-row{gap:8px;}
  .beam-ui-label{min-width:100%; margin-bottom:-2px;}
  .seg-btn{font-size:.78rem; padding:8px 10px;}
  .beam-ui-reset{margin-left:0;}
}

/* ===== P3-ui: beam legend polish (overrides beam.css; loaded after it) =====
   Grey underglow + "All" indicator, hover accent bar on every row (via --c),
   and a tighter, even layout. */
.legend .leg[data-k="underglow"]{--c:var(--muted);}   /* grey dot + grey hover bar (site grey) */
.legend .leg[data-k="all"]{--c:var(--silver-hi);}      /* "All" = bright white-ish */
.legend .leg{padding:13px 16px 13px 20px; gap:13px;}   /* compact + even L/R */
.legend .leg + .leg{border-top:1px solid var(--line-2);}
.legend .leg h4{font-size:1.04rem;}
.legend .leg p{font-size:.82rem; margin-top:2px; max-width:34em;}
@media (max-width:760px){
  .legend .leg{padding:12px 12px 12px 18px;}
  .legend .leg p{font-size:.8rem;}
}