/* ============================================================================
   world.css · la portada inmersiva. Todo flota sobre un único lienzo 3D fijo.
   ========================================================================== */
.world-page { background: #04070b; }
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; }
#world-track { position: relative; z-index: -1; pointer-events: none; }
.scrim { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 500ms var(--sc-ease-out); }
.scrim--l { background: linear-gradient(90deg, rgb(4 7 11 / 0.88) 0%, rgb(4 7 11 / 0.55) 32%, transparent 58%); }
.scrim--r { background: linear-gradient(270deg, rgb(4 7 11 / 0.82) 0%, rgb(4 7 11 / 0.45) 30%, transparent 55%); }
.scrim--b { background: linear-gradient(0deg, rgb(4 7 11 / 0.85) 0%, transparent 45%); }
:is([data-station="hero"], [data-station="comunidad"], [data-station="piscina"], [data-station="industria"], [data-station="final"]) .scrim--l { opacity: 1; }
:is([data-station="dentro"], [data-station="casa"], [data-station="riego"], [data-station="contraincendios"]) .scrim--r { opacity: 1; }
[data-station="red"] .scrim--b { opacity: 1; }
@media (max-width: 860px) { .scrim--l, .scrim--r { display: none; } [data-station]:not([data-station="despiece"]):not([data-station=""]) .scrim--b { opacity: 1; } }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(2 4 7 / 0.75) 100%); }

/* curtain */
.curtain { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: #04070b; transition: opacity 900ms var(--sc-ease-out), visibility 0s 900ms; }
.curtain svg { width: 56px; height: 56px; animation: spinIn 1.4s var(--sc-ease-in-out) infinite; }
.is-ready .curtain { opacity: 0; visibility: hidden; }
@keyframes spinIn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .curtain svg { animation: none; } }

/* bar over the world */
.world-page .bar { background: linear-gradient(rgb(4 7 11 / 0.85), rgb(4 7 11 / 0)); box-shadow: none; backdrop-filter: none; }
.nav button { padding: 0.55rem 0.8rem; border-radius: 8px; border: 0; background: none; color: var(--sc-ink); font: 500 0.95rem var(--sc-font-text); cursor: pointer; }
@media (hover: hover) { .nav button:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); } }
@media (max-width: 900px) { .nav button { font: 700 1.6rem/1 var(--sc-font-display); padding: 1rem 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; } }

/* ------------------------------------------------------------- panels -- */
.panels { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.panel {
  position: absolute; pointer-events: auto; opacity: 0; visibility: hidden;
  width: min(30rem, 38vw); top: 50%; translate: 0 -50%;
}
.panel--left { left: calc(var(--sc-gutter) + 6rem); }
.panel--right { right: var(--sc-gutter); }
.panel--hero { left: calc(var(--sc-gutter) + 6rem); width: min(40rem, 48vw); top: auto; bottom: clamp(3rem, 11vh, 7rem); translate: none; }
.panel--top { left: 50%; top: calc(var(--bar-h) + 1rem); translate: -50% 0; width: min(46rem, 80vw); text-align: center; }
.panel--bottom { left: 50%; top: auto; bottom: clamp(2rem, 7vh, 4rem); translate: -50% 0; width: min(54rem, 86vw); text-align: center; }
.panel--final { left: calc(var(--sc-gutter) + 6rem); width: min(46rem, 56vw); }
.card-glass {
  padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: 20px;
  background: linear-gradient(160deg, rgb(16 26 34 / 0.82), rgb(8 13 18 / 0.86));
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgb(160 210 240 / 0.12); box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / 0.06);
}
.panel .eyebrow { margin: 0 0 var(--sc-3); color: var(--red-text); }
.panel h1 + p, .panel h2 + p { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); }
.panel .lede { color: var(--sc-ink-soft); }
.panel__ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-5); }
.trust { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: var(--sc-6) 0 0; padding: 0; list-style: none; color: var(--sc-ink-soft); font-size: 0.86rem; }
.trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
.trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }
.hero-title { font-size: clamp(3rem, 1.4rem + 6vw, 7.4rem); font-weight: 750; line-height: 0.92; letter-spacing: -0.05em; }
.hero-title em { font-style: normal; color: #8fe6ff; }

.prods { display: grid; gap: 2px; margin-top: var(--sc-5); }
.prow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sc-3); align-items: center; padding: 6px; border-radius: 12px; }
@media (hover: hover) { .prow:hover { background: rgb(160 210 240 / 0.06); } }
.prow__media { width: 64px; height: 50px; border-radius: 8px; background: var(--steel); overflow: hidden; border: 0; padding: 0; cursor: pointer; }
.prow__media .dib, .prow__media img { width: 100%; height: 100%; object-fit: contain; }
.prow h3 { font: 650 0.94rem/1.25 var(--sc-font-text); letter-spacing: 0; }
.prow h3 button { all: unset; cursor: pointer; }
.prow h3 button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-radius: 4px; }
.prow p { margin: 0.1rem 0 0; color: var(--sc-ink-soft); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.prow .btn--add { min-height: 38px; padding: 0 0.85rem; font-size: 0.86rem; }
.chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-2); margin-top: var(--sc-5); }
.chips-row .chip { background: rgb(8 13 18 / 0.6); backdrop-filter: blur(8px); }

.final-tel { display: inline-block; margin-top: var(--sc-5); font: 700 clamp(2.4rem, 1rem + 5vw, 5.6rem)/0.95 var(--sc-font-display); letter-spacing: -0.04em; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.final-meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sc-6); margin: var(--sc-6) 0 0; font-size: 0.9rem; }
.final-meta dt { color: var(--sc-ink-soft); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.3rem; }
.final-meta dd { margin: 0; }
.final-meta a { color: var(--sc-ink); }
.final-quote { margin: var(--sc-6) 0 0; padding-top: var(--sc-5); border-top: 1px solid var(--line); color: var(--sc-ink-soft); font-size: 0.92rem; }
.final-quote b { color: var(--sc-ink); }
.final-foot { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin-top: var(--sc-5); font-size: 0.8rem; color: var(--sc-ink-soft); }
.final-foot a { color: inherit; }

/* despiece caption + labels */
.panel--top h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.panel--top p { margin: var(--sc-2) auto 0 !important; max-width: 52ch; }
.pump-leaders { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 8; }
.pump-leaders path { fill: none; stroke: rgb(170 220 245 / 0.55); stroke-width: 1; stroke-dasharray: 3 4; }
.pump-leaders circle { fill: #04070b; stroke: #8fe6ff; stroke-width: 2; }
.pump-labels { position: fixed; inset: 0; z-index: 9; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.plabel {
  position: absolute; left: 0; top: 0; width: 13.5rem; padding: 0.65rem 0.8rem; pointer-events: auto;
  background: rgb(12 20 27 / 0.85); backdrop-filter: blur(10px); border: 1px solid rgb(160 210 240 / 0.14); border-radius: 12px; box-shadow: var(--sc-e2);
  opacity: 0; visibility: hidden; transition: opacity 220ms var(--sc-ease-out), visibility 0s 220ms;
}
.plabel.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.plabel__n { margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8fe6ff; }
.plabel h3 { font: 650 0.98rem/1.2 var(--sc-font-text); letter-spacing: 0; }
.plabel p { margin: 0.25rem 0 0.45rem; font-size: 0.8rem; line-height: 1.4; color: var(--sc-ink-soft); }
.plabel a { font-size: 0.84rem; font-weight: 700; color: var(--sc-ink); text-decoration-color: var(--red-text); text-underline-offset: 0.25em; }

/* price tags pinned to the 3D */
.tags { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.tag {
  position: absolute; left: 0; top: 0; pointer-events: auto; opacity: 0; visibility: hidden;
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.45rem 0.4rem 0.8rem; margin-top: -14px;
  border: 1px solid rgb(255 255 255 / 0.18); border-radius: 999px; cursor: pointer;
  background: rgb(10 16 22 / 0.88); backdrop-filter: blur(10px); color: var(--sc-ink); font: 600 0.84rem var(--sc-font-text); white-space: nowrap;
  box-shadow: var(--sc-e2);
}
.tag::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 1px; height: 10px; background: rgb(255 255 255 / 0.35); }
.tag b { font-variant-numeric: tabular-nums; }
.tag i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sc-accent); color: #fff; font-style: normal; font-size: 1.1rem; line-height: 1; }
@media (hover: hover) { .tag:hover { border-color: rgb(255 255 255 / 0.4); } }
.tag .pulse { position: absolute; inset: -6px; border-radius: inherit; border: 1px solid rgb(224 36 45 / 0.6); animation: pulse 2s var(--sc-ease-out) infinite; pointer-events: none; }
@keyframes pulse { from { opacity: 1; transform: scale(0.96); } to { opacity: 0; transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .tag .pulse { animation: none; opacity: 0; } }

/* --------------------------------------------------------------- rail -- */
.rail { position: fixed; z-index: 30; left: calc(var(--sc-gutter) - 0.5rem); top: 50%; translate: 0 -50%; }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; position: relative; }
.rail__line { position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: rgb(160 210 240 / 0.14); border-radius: 1px; overflow: hidden; }
.rail__line i { position: absolute; inset: 0; background: linear-gradient(#8fe6ff, #3fb8e6); transform-origin: top; transform: scaleY(0); }
.rail a { display: flex; align-items: center; gap: 0.8rem; padding: 0.32rem 0; color: var(--sc-ink-soft); text-decoration: none; font-size: 0.78rem; font-weight: 600; }
.rail a b { position: relative; z-index: 1; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #04070b; border: 2px solid rgb(160 210 240 / 0.3); transition: border-color 200ms, background-color 200ms, transform 200ms var(--sc-ease-out); }
.rail a span { opacity: 0; translate: -4px 0; transition: opacity 200ms var(--sc-ease-out), translate 200ms var(--sc-ease-out); }
.rail:hover a span, .rail a:focus-visible span { opacity: 1; translate: 0 0; }
.rail:hover { z-index: 40; }
.rail:hover::before { content: ""; position: absolute; inset: -1rem -1.5rem -1rem -1rem; border-radius: 16px; background: rgb(4 7 11 / 0.85); backdrop-filter: blur(10px); z-index: -1; }
.rail a[aria-current] { color: var(--sc-ink); }
.rail a[aria-current] b { border-color: #8fe6ff; background: #8fe6ff; transform: scale(1.1); box-shadow: 0 0 0 4px rgb(143 230 255 / 0.15); }

/* mobile progress + station name */
.mbar { display: none; }

/* scroll hint */
.hint { position: fixed; z-index: 12; left: 50%; bottom: 1.6rem; translate: -50% 0; display: flex; align-items: center; gap: 0.75rem; color: var(--sc-ink-soft); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; transition: opacity 400ms var(--sc-ease-out); }
.hint__track { position: relative; width: 22px; height: 36px; border: 1.5px solid rgb(160 210 240 / 0.45); border-radius: 12px; }
.hint__track::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #8fe6ff; animation: hint 1.6s var(--sc-ease-in-out) infinite; }
@keyframes hint { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }
html:not([data-station="hero"]) .hint { opacity: 0; }

/* sound */
.sound { position: fixed; z-index: 30; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 0.5rem; height: 40px; padding: 0 0.85rem; border-radius: 20px; border: 1px solid rgb(160 210 240 / 0.2); background: rgb(8 13 18 / 0.7); backdrop-filter: blur(10px); color: var(--sc-ink-soft); font: 600 0.8rem var(--sc-font-text); cursor: pointer; }
.sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sound[aria-pressed="true"] { color: #8fe6ff; border-color: rgb(143 230 255 / 0.45); }
.sound .bars { display: inline-flex; gap: 2px; align-items: end; height: 14px; }
.sound .bars i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; }
.sound[aria-pressed="true"] .bars i { animation: eq 0.9s ease-in-out infinite; }
.sound .bars i:nth-child(2) { animation-delay: 0.15s; } .sound .bars i:nth-child(3) { animation-delay: 0.3s; }
@keyframes eq { 50% { height: 14px; } }

/* ------------------------------------------------------------ catalog -- */
.catalog { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: rgb(4 7 11 / 0.82); backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px); opacity: 0; visibility: hidden; transition: opacity 260ms var(--sc-ease-out), visibility 0s 260ms; }
.is-catalog .catalog { opacity: 1; visibility: visible; transition-delay: 0s; }
.is-catalog { overflow: hidden; }
.catalog__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); padding: var(--sc-5) var(--sc-gutter) var(--sc-4); }
.catalog__head h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); margin-right: auto; }
.catalog__body { flex: 1; overflow: auto; padding: 0 var(--sc-gutter) var(--sc-8); }
.catalog .chips { display: flex; gap: var(--sc-2); flex-wrap: wrap; padding: 0 var(--sc-gutter) var(--sc-5); }
.catalog .grid-cat { transform: translateY(10px); transition: transform 320ms var(--sc-ease-out); }
.is-catalog .catalog .grid-cat { transform: none; }
.catalog__foot { margin-top: var(--sc-6); display: flex; justify-content: center; }

/* --------------------------------------------------------- quick view -- */
.qv-scrim { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: var(--sc-4); background: rgb(2 4 7 / 0.7); backdrop-filter: blur(6px); }
.qv { width: min(58rem, 100%); max-height: 92vh; overflow: auto; display: grid; grid-template-columns: 1.1fr 1fr; border-radius: 22px; background: var(--sc-surface); border: 1px solid var(--line); box-shadow: var(--sc-e3); position: relative; }
.qv__media { position: relative; min-height: 22rem; background: radial-gradient(80% 80% at 50% 40%, #182733, #0b1218); }
.qv__media .dib, .qv__media img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.qv__info { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: var(--sc-3); align-content: start; }
.qv__info h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.qv__price { margin: 0; font: 700 2rem var(--sc-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qv__close { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgb(4 7 11 / 0.6); }
.qv__buy { display: flex; gap: var(--sc-3); flex-wrap: wrap; margin-top: var(--sc-2); }
.qv__buy .btn { flex: 1; }
@media (max-width: 760px) { .qv { grid-template-columns: 1fr; } .qv__media { min-height: 14rem; } }

/* ------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .rail, .sound { display: none; }
  .mbar { display: block; position: fixed; z-index: 31; left: 0; right: 0; top: var(--bar-h); padding: 0 var(--sc-gutter); pointer-events: none; }
  .mbar__line { display: block; height: 2px; background: rgb(160 210 240 / 0.14); border-radius: 1px; overflow: hidden; }
  .mbar__line i { display: block; height: 100%; background: #8fe6ff; transform-origin: left; transform: scaleX(0); }
  .mbar__name { display: inline-block; margin-top: 8px; padding: 0.25rem 0.6rem; border-radius: 999px; background: rgb(8 13 18 / 0.7); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8fe6ff; }
  .panel, .panel--left, .panel--right, .panel--final { left: 10px; right: 10px; width: auto; top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); translate: none; max-height: 52vh; overflow: auto; }
  .panel--hero { left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(96px + env(safe-area-inset-bottom)); }
  .panel--top { top: calc(var(--bar-h) + 2.6rem); bottom: auto; left: var(--sc-gutter); right: var(--sc-gutter); translate: none; width: auto; }
  .panel--bottom { left: 10px; right: 10px; translate: none; width: auto; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .card-glass { padding: 1.1rem; border-radius: 16px; }
  .panel .lede, .panel h2 + p { font-size: 0.95rem; }
  .panel h2.h-lg { font-size: 1.5rem; }
  .hero-title { font-size: clamp(2.8rem, 13vw, 4rem); }
  .trust { display: none; }
  .final-tel { font-size: 2.3rem; }
  .final-meta { grid-template-columns: 1fr; gap: var(--sc-3); }
  .final-quote, .final-foot { display: none; }
  .prow { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .prow__media { width: 52px; height: 42px; }
  .hint { bottom: auto; top: 39vh; }
  .pump-labels.is-strip { top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); display: flex; gap: 8px; overflow-x: auto; padding: 0 10px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .is-strip .plabel { position: relative; flex: none; width: 13rem; scroll-snap-align: start; }
  .tag { font-size: 0.78rem; }
}

/* --------------------------------------------- flat fallback (no WebGL) -- */
.flat #world, .flat .rail, .flat .hint, .flat .tags, .flat .pump-labels, .flat .pump-leaders, .flat .vignette, .flat .mbar { display: none; }
.flat .curtain { display: none; }
.flat .panels { position: static; }
.flat .panel { position: relative; inset: auto; translate: none; opacity: 1 !important; visibility: visible !important; transform: none !important; width: auto; max-width: 44rem; margin: 6rem auto; }
.flat #world-track { display: none; }
@media (max-width: 900px) {
  .world-page .chat-fab { top: calc(var(--bar-h) + 14px); bottom: auto; right: 12px; width: 42px; height: 42px; }
}

/* ---------------------------------------------------- phone, refined -- */
#world { height: 100lvh; }
@media (max-width: 860px) {
  .mbar__nav { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; padding: 2px; border-radius: 999px; background: rgb(8 13 18 / 0.78); backdrop-filter: blur(10px); border: 1px solid rgb(160 210 240 / 0.12); pointer-events: auto; }
  .mbar__nav button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--sc-ink); cursor: pointer; }
  .mbar__nav button:active { background: rgb(160 210 240 / 0.12); }
  .mbar__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .mbar__name { margin: 0; background: none; padding: 0 0.3rem; min-width: 6.5rem; text-align: center; }

  .panel, .panel--left, .panel--right, .panel--final { max-height: 58vh; max-height: 58svh; overscroll-behavior: contain; }
  .panel .eyebrow { margin-bottom: 0.4rem; font-size: 0.66rem; }
  .panel h2.h-lg { font-size: 1.35rem; line-height: 1.08; }
  .panel h2 + p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.5rem !important; font-size: 0.9rem; line-height: 1.45; }
  .panel__ctas { margin-top: 0.9rem; }
  .panel__ctas .btn { min-height: 44px; font-size: 0.9rem; }

  /* products become a swipeable strip */
  .prods { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0.9rem -1.1rem 0; padding: 0 1.1rem 2px; scrollbar-width: none; }
  .prods::-webkit-scrollbar { display: none; }
  .prow { flex: 0 0 9.6rem; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; border-radius: 12px; background: rgb(160 210 240 / 0.05); border: 1px solid rgb(160 210 240 / 0.08); scroll-snap-align: start; }
  .prow__media { width: 100%; height: 70px; }
  .prow h3 { font-size: 0.82rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.05rem; }
  .prow p { font-size: 0.82rem; font-weight: 700; color: var(--sc-ink); }
  .prow .btn--add { width: 100%; min-height: 38px; }

  .hero-title { font-size: clamp(2.6rem, 12.5vw, 3.6rem); }
  .panel--hero .lede { font-size: 0.95rem; }
  .panel--hero .panel__ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .panel--hero .panel__ctas .btn { padding: 0 0.6rem; font-size: 0.92rem; }

  .final-tel { font-size: 2.1rem; margin-top: 0.8rem; }
  .panel--final .panel__ctas { display: grid; grid-template-columns: 1fr 1fr; }
  .panel--final .panel__ctas .btn:first-child { grid-column: 1 / -1; }

  /* catalog: compact header, chips in one swipeable row */
  .catalog__head { padding: 0.9rem 1rem 0.6rem; }
  .catalog__head .lede { display: none; }
  .catalog .chips { flex-wrap: nowrap; overflow-x: auto; padding: 0 1rem 0.8rem; scrollbar-width: none; }
  .catalog .chip { flex: none; min-height: 38px; }
  .catalog__body { padding: 0 0.75rem 6rem; }

  /* quick view: a sheet from the bottom */
  .qv-scrim { align-items: end; padding: 0; }
  .qv { border-radius: 22px 22px 0 0; max-height: 90svh; animation: sheet 280ms var(--sc-ease-drawer); }
  .qv__media { min-height: 11rem; }
  .qv__info { padding: 1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); gap: 0.6rem; }
  .qv__price { font-size: 1.6rem; }
}
@keyframes sheet { from { transform: translateY(40px); opacity: 0.6; } }

/* ------------------------------------------------------------ x3 ---- */
/* hero reveal after the intro flight */
.panel--hero > * { opacity: 0; }
.is-ready .panel--hero > * { opacity: 1; animation: heroIn 1s var(--sc-ease-out) both; animation-delay: var(--d, 2s); }
.panel--hero > :nth-child(1) { --d: 2.1s; } .panel--hero > :nth-child(2) { --d: 2.25s; } .panel--hero > :nth-child(3) { --d: 2.5s; }
.panel--hero > :nth-child(4) { --d: 2.65s; } .panel--hero > :nth-child(5) { --d: 2.8s; } .panel--hero > :nth-child(6) { --d: 2.95s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } }
@media (prefers-reduced-motion: reduce) { .panel--hero > *, .is-ready .panel--hero > * { opacity: 1; animation: none; } }

.hero-diag { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--sc-5); padding: 0.55rem 0.9rem 0.55rem 0.75rem; border-radius: 999px; border: 1px solid rgb(255 115 120 / 0.35); background: rgb(224 36 45 / 0.12); color: var(--sc-ink); font: 600 0.9rem var(--sc-font-text); cursor: pointer; transition: background-color 160ms var(--sc-ease-out), border-color 160ms; }
.hero-diag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-diag__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b44; box-shadow: 0 0 0 0 rgb(255 59 68 / 0.6); animation: ping 1.8s var(--sc-ease-out) infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgb(255 59 68 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 59 68 / 0); } }
@media (hover: hover) { .hero-diag:hover { background: rgb(224 36 45 / 0.22); border-color: rgb(255 115 120 / 0.6); } }

/* diagnosis panel */
.diag { position: fixed; z-index: 40; right: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(25rem, 34vw); max-height: calc(100vh - 2 * var(--bar-h)); overflow: auto;
  opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity 260ms var(--sc-ease-out), transform 260ms var(--sc-ease-out), visibility 0s 260ms; }
.is-diag .diag { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.is-diag [data-panel]:not([data-panel="despiece"]), .is-diag .tags, .is-diag .hint { opacity: 0 !important; visibility: hidden !important; }
.diag__x { position: absolute; top: 10px; right: 10px; }
.diag .eyebrow { margin: 0 0 0.5rem; color: var(--red-text); }
.diag__lede { margin: 0.6rem 0 0; color: var(--sc-ink-soft); font-size: 0.94rem; }
.diag__opts { display: grid; gap: 6px; margin-top: var(--sc-5); }
.diag__opt { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 50px; padding: 0 0.9rem 0 1rem; border-radius: 12px; border: 1px solid rgb(160 210 240 / 0.14); background: rgb(160 210 240 / 0.04); color: var(--sc-ink); font: 600 0.95rem var(--sc-font-text); text-align: left; cursor: pointer; transition: background-color 140ms var(--sc-ease-out), border-color 140ms; }
.diag__opt svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--red-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .diag__opt:hover { background: rgb(160 210 240 / 0.09); border-color: rgb(160 210 240 / 0.3); } }
.diag__opt:active { transform: scale(0.99); }
.diag__k { margin: 0.3rem 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8fe6ff; }
.diag__back { margin-top: var(--sc-4); padding: 0; border: 0; background: none; color: var(--sc-ink); font: 600 0.9rem var(--sc-font-text); text-decoration: underline; text-decoration-color: var(--red-text); text-underline-offset: 0.25em; cursor: pointer; }
.diag__note { margin: var(--sc-4) 0 0; font-size: 0.8rem; color: var(--sc-ink-soft); }
.plabel.is-hot { border-color: #ff3b44; box-shadow: 0 0 0 1px #ff3b44, var(--sc-e3); }
.plabel.is-hot .plabel__n { color: #ff7378; }

/* floating cart */
.hud-cart { position: fixed; z-index: 35; left: 50%; bottom: 18px; translate: -50% 0; display: flex; align-items: center; gap: 0.9rem; padding: 6px 6px 6px 8px; border-radius: 16px;
  background: rgb(10 16 22 / 0.86); backdrop-filter: blur(14px); border: 1px solid rgb(160 210 240 / 0.16); box-shadow: var(--sc-e3); animation: hudIn 320ms var(--sc-ease-out); }
.hud-cart[hidden] { display: none; }
@keyframes hudIn { from { opacity: 0; transform: translateY(14px); } }
.hud-cart__open { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.6rem; border: 0; border-radius: 10px; background: none; color: var(--sc-ink); font: 600 0.9rem var(--sc-font-text); cursor: pointer; }
.hud-cart__open svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hud-cart__open b { font-variant-numeric: tabular-nums; }
.hud-cart__ship { font-size: 0.8rem; color: #8fe6ff; white-space: nowrap; }
.hud-cart .btn { min-height: 42px; }
.has-cart .hint { bottom: 5.6rem; }

@media (max-width: 900px) {
  .hud-cart { display: none !important; }
  .diag { left: 10px; right: 10px; width: auto; top: auto; bottom: calc(80px + env(safe-area-inset-bottom)); translate: none; max-height: 62svh; transform: translateY(24px); }
  .is-diag .pump-labels { display: none; }
  .hero-diag { font-size: 0.82rem; margin-top: 0.8rem; width: 100%; justify-content: space-between; }
}

/* header and hero on shorter or narrower laptops */
.nav a, .nav button, .bar__tel { white-space: nowrap; }
@media (max-width: 1360px) and (min-width: 901px) { .bar__tel span { display: none; } .nav a, .nav button { padding: 0.5rem 0.6rem; } }
@media (max-width: 1100px) and (min-width: 901px) { .nav [data-goto-link="red"] { display: none; } }
@media (min-width: 861px) {
  .hero-title { font-size: min(clamp(3rem, 1.4rem + 6vw, 7.4rem), 13vh); }
  .panel--hero { bottom: clamp(2rem, 8vh, 7rem); }
}
@media (min-width: 861px) and (max-height: 780px) { .panel--hero .trust { display: none; } .panel--hero .lede { font-size: 1rem; } }