/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --blue:       #0097DB;
  --blue-2:     #005E8A;
  --blue-dark:  #003B57;
  --white:      #FFFFFF;
  --gray-light: #F5F7FA;
  --gray-mid:   #DDE3EA;
  --gray-dark:  #5F6B7A;
  --ink:        #101820;

  --bg:         var(--white);
  --text:       var(--ink);
  --text-mute:  var(--gray-dark);
  --line:       var(--gray-mid);

  --display: "Manrope", "Inter", sans-serif;
  --sans:    "Inter", "Manrope", sans-serif;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --nav-h: 84px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--blue); color: var(--white); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--ink); color: var(--white);
  border-radius: 8px; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
}
.kicker::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

.section {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

/* Subtle depth halos — soft ambient light pools behind key sections.
   Kept faint on purpose: this brand's whitespace must still dominate. */
.services, .why, .testimonials, .cta-final { position: relative; isolation: isolate; }
.services::before, .why::before, .testimonials::before {
  content: "";
  position: absolute;
  inset: -25% -10% -35% -10%;
  z-index: -1;
  background: radial-gradient(42% 38% at 50% 18%, rgba(0,151,219,.09), transparent 72%);
  filter: blur(90px);
  pointer-events: none;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: -35% -10% -35% -10%;
  z-index: 0;
  background: radial-gradient(52% 62% at 50% 42%, rgba(0,151,219,.38), transparent 72%);
  filter: blur(110px);
  pointer-events: none;
}
.cta-final-inner { position: relative; z-index: 1; }
.section-title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  max-width: 22ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .85s var(--ease-soft), transform .85s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.btn-sm { padding: 0.65rem 1.3rem; font-size: .85rem; }
.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 10px 30px -8px rgba(0,151,219,.55);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -10px rgba(0,151,219,.6);
  background: var(--blue-2);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--gray-mid);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-3px); }
.btn-on-dark {
  background: var(--white);
  color: var(--blue-dark);
}
.btn-on-dark:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -10px rgba(0,0,0,.35); }
.btn-ghost-on-dark {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.4);
}
.btn-ghost-on-dark:hover { border-color: var(--white); transform: translateY(-3px); }

.has-magnetic { display: inline-flex; position: relative; isolation: isolate; }
.magnetic-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  will-change: transform;
  transition: transform .8s var(--ease-soft);
}

/* =============================================================
   5. Custom cursor
   ============================================================= */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
.cursor-dot {
  width: 6px; height: 6px; margin: -3px;
  background: var(--blue);
  border-radius: 50%;
}
.cursor-ring {
  width: 34px; height: 34px; margin: -17px;
  border: 1.5px solid var(--blue);
  border-radius: 50%;
  opacity: .55;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), opacity .35s var(--ease-out);
}
.cursor.is-interactive .cursor-ring { width: 54px; height: 54px; margin: -27px; opacity: .9; }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

/* =============================================================
   6. Nav
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-soft);
}
.nav.nav--hidden { transform: translateY(-100%); }
.nav-inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav.is-scrolled {
  background: rgba(255,255,255,.4);
  box-shadow: 0 1px 0 rgba(16,24,32,.08);
}
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { display: block; height: 34px; width: auto; }
.nav-links { display: none; gap: 2.2rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link { position: relative; font-size: .92rem; font-weight: 500; padding: .25rem 0; color: var(--text-mute); transition: color .3s var(--ease-out); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .btn-primary { display: none; }
@media (min-width: 720px) { .nav .btn-primary { display: inline-flex; } }

/* Nav sits on a translucent/blurred bar over whatever section is scrolled
   beneath it — over dark sections the default dark-gray link color and
   dark logo wordmark lose all contrast. initNavTheme() (main.js) toggles
   this class when a [data-nav-theme="dark"] section (or the 3D stage once
   its background fades dark) is behind the fixed header band. */
.nav--on-dark .nav-link { color: rgba(255,255,255,.82); }
.nav--on-dark .nav-link:hover { color: var(--white); }
.nav--on-dark .nav-burger span { background: var(--white); }

.nav-burger {
  display: flex; flex-direction: column; gap: 5px; padding: .4rem;
}
@media (min-width: 960px) { .nav-burger { display: none; } }
.nav-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .3s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: grid; place-items: center;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-soft);
}
.nav-mobile[data-open="true"] { clip-path: inset(0); }
.nav-mobile nav { display: flex; flex-direction: column; gap: 1.6rem; text-align: center; }
.nav-mobile-link { font-family: var(--display); font-size: 1.6rem; font-weight: 700; }

/* =============================================================
   7. 3D Stage (hero + differentiator)
   ============================================================= */
/* Standalone hero — plain HTML/CSS, no WebGL/Three.js dependency, so it
   paints instantly regardless of how long the 3D stage below takes to boot.
   Previously this copy was overlaid on the 3D canvas and scrubbed out of
   the way by hand; that coupled the very first thing a visitor reads to
   the WebGL init/render cost, which read as laggy on mobile. Now it's just
   a normal section the page scrolls past to reach the roller. */
.hero-standalone {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-standalone-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 22% 18%, rgba(0,151,219,.1), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(0,94,138,.08), transparent 50%);
  pointer-events: none;
}
.hero-standalone .container { position: relative; z-index: 1; }
.hero-standalone .stage-scrollcue { position: absolute; right: clamp(1.5rem, 5vw, 4rem); top: 69%; bottom: auto; transform: translateY(-50%); }

.stage3d {
  position: relative;
  /* lvh (the LARGEST possible mobile viewport — toolbar hidden), matching
     .stage3d-canvas-wrap below. Using svh here (the SMALLEST viewport —
     toolbar shown) sized the sticky child for the shortest case, so the
     instant the address bar hid mid-scroll and the real viewport grew
     taller than that, the sticky child fell short of the bottom edge and
     exposed a sliver of whatever section follows. lvh always covers the
     tallest the viewport can get, so it's never too short.
     Short on purpose: the camera-pan/cleaning sequence auto-plays on its
     own timer (main.js, initStage3D) once scrolled into view — this only
     needs a little room past 100lvh for the sticky pin to hold during
     playback and release naturally afterward. */
  height: 132lvh;
  /* Dark: only ever visible for an instant as the sticky stage releases at
     the very end of the scroll — must already match the dark tone the fade
     (main.js) settles on, so nothing white flashes between stage and Servicios. */
  background: #050b14;
}
/* Added once the visitor has watched the full camera-pan cinematic play
   both ways (main.js, playTo's onComplete) — after that, arriving/leaving
   the stage just snaps the roller/camera state instantly, and this is
   what turns the light/dark background swap into a quick crossfade
   instead of a hard cut. */
.stage3d.is-simple-tone { transition: background-color .6s var(--ease-soft); }
.stage3d-canvas-wrap {
  position: sticky; top: 0;
  height: 100lvh;
  overflow: hidden;
  isolation: isolate;
  /* Forces its own GPU compositing layer — works around a real browser
     repaint glitch where sticky + WebGL canvas combos sometimes fail to
     repaint after a fast scroll until something else triggers a redraw. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  /* Its own GPU compositing layer (above) can leave a hairline seam at its
     lower edge against the section below, even in the same color — bleed a
     couple of px of that same tone past the edge to cover it. */
  box-shadow: 0 2px 0 0 #050b14;
}
/* Fades in instead of popping in the instant WebGL has its first frame
   ready — a hard cut read as the roller "appearing too fast" right after
   the hero text. Slightly delayed so the text is already settling in by
   the time the roller starts to reveal itself, not competing with it. */
.stage3d-canvas-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0;
  transition: opacity 1.8s var(--ease-out) .3s;
}
html.is-ready .stage3d-canvas-wrap canvas { opacity: 1; }

/* Same gradient as .hero-standalone-bg but mirrored vertically (18%/82%
   swapped), so the pattern continues across the seam like a reflection
   instead of restarting from the same top-left corner right after the
   hero section just finished the same thing at its bottom edge. */
.stage3d-hexbg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    radial-gradient(circle at 22% 82%, rgba(0,151,219,.1), transparent 45%),
    radial-gradient(circle at 82% 22%, rgba(0,94,138,.08), transparent 50%);
  pointer-events: none;
}
.stage3d-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, var(--stage-vignette, rgba(255,255,255,.65)) 100%);
}
/* Scroll-driven fade to the dark tone that opens "Lo que hacemos" right after */
.stage3d-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: #050b14;
  opacity: 0;
}

.stage-panel {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center;
}
.stage-panel .container { pointer-events: auto; }

/* The diff panel is the only panel left in the 3D stage (the hero copy now
   lives in its own standalone section above) — always visible, no more
   crossfade to coordinate with anything. pointer-events stays off on the
   panel itself (it's just decorative kicker labels, nothing clickable) so
   drag-to-rotate on the canvas underneath (main.js) isn't blocked by this
   full-bleed, mostly-empty overlay; .container above still opts back in
   for the small centered column in case that ever needs it. */
.stage-panel-diff { opacity: 1; pointer-events: none; }

.hero-copy {
  position: relative;
  max-width: 40rem;
}
.kicker {
  text-shadow: 0 1px 24px rgba(255,255,255,.6);
}
.hero-title {
  font-size: clamp(2.1rem, 5vw, 4rem);
  max-width: 24ch;
  margin-bottom: 1.4rem;
}
.hero-title em {
  color: var(--blue);
  font-style: normal;
}
.hero-sub {
  max-width: 46ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: #3a3d40;
  margin-bottom: 1.6rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.2rem; }
.hero-indicators { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); }
.hero-indicators li { display: flex; flex-direction: column; gap: .2rem; }
.hero-indicators strong {
  font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--blue-dark);
  text-shadow: 0 1px 20px rgba(255,255,255,.55);
}
.hero-indicators span { font-size: .82rem; color: var(--text-mute); text-shadow: 0 1px 16px rgba(255,255,255,.5); }

/* Anchored to the right edge, not centered — centered sat directly
   behind the last hero indicator ("+ rodillos recuperados") on shorter
   viewports, where the two rows of content end up close together. */
.stage-scrollcue {
  position: absolute; right: clamp(1.5rem, 5vw, 4rem); bottom: 2.2rem;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute);
}
.stage-scrollcue-icon {
  width: 22px; height: 22px; color: var(--blue);
  animation: cueBounce 1.8s ease-in-out infinite;
}
@keyframes cueBounce { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }

.stage-panel-diff { justify-content: center; align-items: flex-start; text-align: center; padding-top: calc(var(--nav-h) + 4rem); }
.diff-inner { display: flex; flex-direction: column; align-items: center; }
.diff-kicker { display: none; font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 700; font-family: var(--display); color: var(--blue-dark); text-transform: none; letter-spacing: 0; }
.diff-kicker::before { display: none; }
.diff-kicker.is-active {
  display: inline-flex;
  animation: diffFade .6s var(--ease-out);
  padding: .85rem 1.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 24px 50px -22px rgba(16,24,32,.28), 0 0 0 1px rgba(255,255,255,.5) inset;
}
@keyframes diffFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =============================================================
   7.5 Digital Anilox Lab — laboratorio de ingeniería interactivo
   ============================================================= */
/* This heading sits directly above a dashboard that has to fit three
   panels in one screen — kept noticeably smaller/tighter than the
   hero-style clamp() other section titles use, since headline drama
   here costs the "no scrollbar" layout real vertical budget instead. */
.lab { background: linear-gradient(180deg, var(--gray-light) 0%, var(--white) 22%); padding-top: clamp(1.6rem, 3vw, 2.5rem); }
.lab .section-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .4rem; }
.simulator-sub {
  max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--gray-dark);
  margin-bottom: clamp(1rem, 1.6vw, 1.4rem);
}

.lab-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  align-items: start;
}
/* Three columns as soon as panels start being height-capped (see
   .lab-panel below) — below this, a stacked column of three
   independently-capped panels would be taller than a stacked column of
   three full-height ones, defeating the point of the cap. Keeps the
   "all three panels on one screen" layout on laptop widths with OS
   display scaling, not just on uncapped 1180px+ desktops. */
@media (min-width: 720px) {
  /* Config gets the extra share — its chip rows are the widest content
     in the lab, and giving them more width lets each collapse onto one
     line instead of wrapping to two. Dashboard is mostly short numbers,
     so it can afford to be the narrowest. */
  .lab-grid { grid-template-columns: 1.2fr 1fr .9fr; gap: .7rem; }
}
@media (min-width: 1180px) {
  .lab-grid { grid-template-columns: 1.35fr 1fr .85fr; gap: 1.1rem; }
}

/* Shared "floating instrument panel" surface — soft glass, rounded,
   extremely soft shadow. This is the base unit the whole lab is built from.
   Capped to the viewport (minus header/heading space) and independently
   scrollable so the three panels always sit within one screen — nothing
   below the fold, nothing overlapping the next section. */
.lab-panel {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(221,227,234,.8);
  border-radius: 22px;
  padding: .7rem .85rem .6rem;
  box-shadow: 0 40px 90px -40px rgba(16,24,32,.22), 0 1px 0 rgba(255,255,255,.6) inset;
}
.lab-panel-title {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .35rem;
}

/* ---- Config (left) ---- */
/* One field per row, full panel width — a 2-up grid forces every row to
   the height of its tallest chip-set (grid rows share height), which
   wasted far more space than it saved. Full width lets each chip-row
   wrap onto fewer lines on its own, and the panel has no scrollbar of
   its own, so every field must fit without one. */
.lab-config { display: flex; flex-direction: column; gap: .2rem; }
.lab-field { display: flex; flex-direction: column; gap: .14rem; }
.lab-field-label { font-size: .7rem; font-weight: 700; color: var(--ink); }

.lab-lineatura-wrap {
  display: inline-flex; align-items: baseline; gap: .5rem;
  background: var(--white);
  border: 1.5px solid var(--blue);
  border-radius: 12px;
  padding: .38rem .7rem;
  width: fit-content;
}
.lab-lineatura-input {
  width: 6ch;
  border: 0; background: transparent; outline: none;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--blue-dark);
  -moz-appearance: textfield;
}
.lab-lineatura-input::-webkit-outer-spin-button,
.lab-lineatura-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.lab-input-suffix { font-size: .72rem; color: var(--text-mute); font-weight: 600; }

.chip-row { display: flex; flex-wrap: wrap; gap: .2rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: .16rem;
  padding: .2rem .36rem;
  border-radius: 999px;
  border: 1px solid var(--gray-mid);
  background: var(--white);
  font-size: .61rem; font-weight: 700; color: var(--ink);
  transition: transform .3s var(--ease-soft), background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.chip em { font-style: normal; font-weight: 500; opacity: .7; font-size: .92em; }
.chip:hover { border-color: var(--blue); color: var(--blue-2); transform: translateY(-2px); }
.chip.is-active {
  background: var(--blue); border-color: var(--blue); color: var(--white);
  box-shadow: 0 10px 24px -8px rgba(0,151,219,.55);
}
.chip.is-active em { opacity: .85; }

.lab-range-row { display: flex; align-items: center; gap: 1rem; }
.lab-range {
  -webkit-appearance: none; appearance: none;
  flex: 1;
  height: 6px; border-radius: 999px;
  background: var(--gray-mid);
  outline: none; cursor: pointer;
}
.lab-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--blue);
  box-shadow: 0 6px 16px -4px rgba(0,151,219,.5);
}
.lab-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--blue);
}
.lab-range-value {
  flex: none; font-family: var(--display); font-weight: 800; font-size: .88rem; color: var(--blue-dark);
  min-width: 6.5ch; text-align: right;
}

/* ---- Visual (center) ---- */
.lab-visual { display: flex; flex-direction: column; gap: .45rem; }

.lab-clean-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  align-self: center;
  padding: .5rem 1.4rem;
  border-radius: 999px;
  background: var(--blue-dark);
  color: var(--white);
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 20px 40px -14px rgba(0,59,87,.5);
  transition: transform .3s var(--ease-soft), box-shadow .3s var(--ease-soft), opacity .3s;
}
.lab-clean-btn:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -14px rgba(0,59,87,.6); }
.lab-clean-btn:disabled { opacity: .55; pointer-events: none; }
.lab-clean-btn svg { width: 18px; height: 18px; }

.lab-print { margin-top: 0; }

.simulator-canvas-wrap {
  position: relative;
  width: 100%;
  /* Capped so a wide dashboard column (e.g. the ≥1180px 3-column ratio)
     can't inflate this aspect-ratio box taller than the panel has room
     for — without this, the panel grows past one screen exactly when
     the layout gives it the most horizontal space. */
  max-width: 280px;
  margin-inline: auto;
  aspect-ratio: 16/9;
  border-radius: 28px;
  overflow: hidden;
  background: var(--gray-light);
  border: 1px solid var(--gray-mid);
  box-shadow: 0 40px 80px -34px rgba(16,24,32,.2);
}
.cell-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.simulator-slider-wrap { display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: 340px; margin-inline: auto; }
.simulator-slider-hint {
  display: inline-flex; align-items: center; gap: .5rem;
  align-self: center;
  font-size: .78rem; font-weight: 600; color: var(--blue);
  margin-bottom: .1rem;
}
.simulator-slider-hint svg {
  width: 18px; height: 18px; flex: none;
  animation: sliderHintNudge 1.8s ease-in-out infinite;
}
@keyframes sliderHintNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
.simulator-slider-labels {
  display: flex; justify-content: space-between;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--blue-2);
}
.simulator-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #4a5560, var(--gray-mid) 45%, var(--blue) 100%);
  outline: none; cursor: pointer;
}
.simulator-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
  box-shadow: 0 8px 20px -4px rgba(0,151,219,.55);
  transition: transform .25s var(--ease-out);
}
.simulator-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.simulator-slider::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
  box-shadow: 0 8px 20px -4px rgba(0,151,219,.55);
}

.simulator-print-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: .4rem;
}
.simulator-print-frame {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--gray-mid);
  box-shadow: 0 26px 54px -34px rgba(16,24,32,.18);
  aspect-ratio: 1408/750;
}
.sim-print-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sim-print-good { opacity: 0; will-change: opacity; }

/* ---- Dashboard (right) ---- */
.lab-dashboard { display: flex; flex-direction: column; }

.lab-gauges {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: .4rem .4rem;
  margin-bottom: .4rem;
}
.gauge { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
/* Ring + value share one positioned box — the value is absolutely centered
   and painted after the ring in a separate layer, so it always sits on top
   regardless of the ring's own stacking context (its rotate() transform). */
.gauge-ring { position: relative; width: 42px; height: 42px; }
/* Transferencia (primer gauge) es el resultado directo del servicio de
   limpieza — se destaca por sobre los otros tres, que son secundarios. */
.lab-gauges .gauge:first-child .gauge-ring { width: 54px; height: 54px; }
.lab-gauges .gauge:first-child .gauge-value { font-size: 1.05rem; }
.lab-gauges .gauge:first-child .gauge-label { color: var(--blue); font-weight: 700; }
.gauge-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); z-index: 1; }
.gauge-track {
  fill: none; stroke: var(--gray-mid); stroke-width: 8;
}
.gauge-fill {
  fill: none; stroke: var(--blue); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 263.9; /* 2*PI*42 */
  stroke-dashoffset: 263.9;
}
.gauge-fill-warn { stroke: #c53e1e; }
.gauge-value {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: .82rem; color: var(--blue-dark);
  font-variant-numeric: tabular-nums;
}
.gauge-label { font-size: .62rem; color: var(--text-mute); text-align: center; }

.sim-metric {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem .8rem;
  padding-block: .15rem;
  border-top: 1px solid var(--gray-mid);
}
.sim-metric:first-of-type { border-top: 0; }
.sim-metric-label { font-size: .7rem; color: var(--text-mute); }
.sim-metric-value {
  font-family: var(--display); font-weight: 800; font-size: .82rem; color: var(--blue-dark);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--ease-out);
  text-align: right;
}
.sim-metric-value-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.sim-unit-toggle {
  font-size: .62rem; font-weight: 700; color: var(--blue);
  border: 1px solid rgba(0,151,219,.35); border-radius: 999px;
  padding: .1rem .45rem;
  background: rgba(0,151,219,.08);
}
.sim-unit-toggle:hover { background: rgba(0,151,219,.16); }

.lab-observation {
  margin-top: .3rem;
  padding: .45rem .6rem;
  background: var(--gray-light);
  border-radius: 12px;
  font-size: .7rem; line-height: 1.32; color: var(--ink);
  font-style: italic;
}

.simulator-dashboard-note {
  margin-top: .25rem;
  font-size: .62rem; line-height: 1.3;
  color: var(--text-mute);
}

@media (max-width: 539px) {
  .lab-gauges { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .gauge-ring { width: 72px; height: 72px; }
  .gauge-value { font-size: .92rem; }
}


/* =============================================================
   8. Cards / Services
   ============================================================= */
.card {
  --rx: 0deg; --ry: 0deg;
  background: var(--white);
  border: 1px solid var(--gray-mid);
  border-radius: 20px;
  padding: 2.2rem 1.8rem;
  box-shadow: 0 26px 54px -34px rgba(16,24,32,.16), 0 8px 20px -16px rgba(0,151,219,.10);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft), border-color .3s;
}
.card:hover {
  transition-duration: .15s;
  border-color: rgba(0,151,219,.35);
  box-shadow: 0 40px 80px -30px rgba(0,151,219,.28), 0 12px 26px -12px rgba(16,24,32,.12);
}
.services-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
.service-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--gray-light);
  color: var(--blue);
  margin-bottom: 1.4rem;
  transform: translateZ(30px);
}
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { font-size: 1.15rem; margin-bottom: .6rem; transform: translateZ(20px); }
.service-card p { color: var(--text-mute); font-size: .95rem; transform: translateZ(20px); }

/* ---- Servicios: intro ---- */
.services-intro {
  max-width: 68ch;
  color: var(--text-mute);
  font-size: 1.05rem;
  margin-top: -1.4rem;
  margin-bottom: 0;
}

/* ---- Servicios: showcase editorial (una identidad visual por servicio) ---- */
.services-showcase {
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 10vw, 9rem);
  margin-block: clamp(4.5rem, 9vw, 7.5rem) clamp(4rem, 8vw, 6rem);
}

/* One small line-icon per service instead of a numeral — same slot, same
   glow treatment (drop-shadow stands in for text-shadow since this is an
   SVG now, not text). */
.service-feature-n {
  display: block;
  width: clamp(3.2rem, 6vw, 4.4rem);
  color: var(--blue);
  opacity: .2;
  margin-bottom: .9rem;
}
.service-feature-n svg { width: 100%; height: auto; display: block; }
.service-feature--dark .service-feature-n,
.service-feature--luxury .service-feature-n {
  color: var(--blue);
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(0,151,219,.85)) drop-shadow(0 0 22px rgba(0,151,219,.5));
}

.service-feature-problem {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: var(--blue-2);
  max-width: 28ch;
  margin-bottom: 1.1rem;
  letter-spacing: -0.01em;
}
.service-feature--dark .service-feature-problem,
.service-feature--luxury .service-feature-problem { color: var(--blue); }

.service-feature-body h3 { font-size: clamp(1.65rem, 2.9vw, 2.35rem); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 1.1rem; }
.service-feature-body > p { color: var(--text-mute); font-size: 1.02rem; max-width: 58ch; margin-bottom: 1.6rem; }
.service-feature--dark .service-feature-body h3,
.service-feature--luxury .service-feature-body h3 { color: var(--white); }
.service-feature--dark .service-feature-body > p,
.service-feature--luxury .service-feature-body > p { color: rgba(255,255,255,.7); }

.service-feature-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.1rem; }
.service-feature-tags li {
  font-size: .8rem; font-weight: 600;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--gray-mid);
  color: var(--text-mute);
}
.service-feature--dark .service-feature-tags li,
.service-feature--luxury .service-feature-tags li {
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.8);
}

/* Media: reveal con blur + zoom lento (independiente del reveal genérico) */
.service-feature-media {
  border-radius: 34px;
  overflow: hidden;
  background: var(--gray-light);
  /* Marco suave por defecto (fondos claros) — se reemplaza por un glow en fondos oscuros, más abajo */
  box-shadow: 0 40px 90px -45px rgba(16,24,32,.35);
}
.service-feature-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.6s var(--ease-soft);
}
.service-feature-media[data-reveal] {
  opacity: 0;
  filter: blur(24px);
  transform: scale(1.08);
  transition: opacity 1.2s var(--ease-soft), filter 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
}
.service-feature-media[data-reveal].is-revealed { opacity: 1; filter: blur(0); transform: scale(1); }
.service-feature-media:hover img { transform: scale(1.045); }

/* 01 · hero — imagen protagonista arriba, texto centrado debajo */
.service-feature-media--hero {
  aspect-ratio: 16/10;
  margin-inline: var(--gutter);
  margin-bottom: clamp(2.6rem, 5vw, 3.8rem);
  box-shadow: 0 50px 100px -40px rgba(16,24,32,.32);
}
@media (min-width: 720px) { .service-feature-media--hero { aspect-ratio: 21/8; } }
.service-feature-body--center { max-width: 62ch; margin-inline: auto; }

/* 02 / 04 · split — texto y foto lado a lado */
.service-feature-split { display: grid; gap: clamp(2.2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .service-feature-split { grid-template-columns: 1fr 1fr; } }
.service-feature-split .service-feature-media { aspect-ratio: 4/5; }
@media (min-width: 900px) { .service-feature-split .service-feature-media { position: sticky; top: calc(var(--nav-h) + 2rem); } }
/* Apilado (móvil/tablet angosto): el texto siempre va antes que la imagen,
   sin importar el orden del HTML. En escritorio, --reverse pone la imagen
   a la izquierda como antes. */
.service-feature-split--reverse .service-feature-body { order: -1; }
@media (min-width: 900px) {
  .service-feature-split--reverse { grid-template-columns: 1.05fr .95fr; }
  .service-feature-split--reverse .service-feature-body { order: 0; }
  .service-feature-split--reverse .service-feature-media { order: -1; }
}

.service-feature--dark { background: var(--ink); padding-block: clamp(3.5rem, 7vw, 6rem); }
.service-feature--luxury {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(0,151,219,.22), transparent 60%),
    linear-gradient(160deg, #050b14, #0a1826 55%, #050b14);
}
/* En fondos oscuros una sombra no se ve — se reemplaza por un glow (halo de luz) */
.service-feature--dark .service-feature-media,
.service-feature--luxury .service-feature-media {
  box-shadow: 0 0 70px 8px rgba(0,151,219,.25), 0 40px 90px -35px rgba(0,0,0,.6);
}
.service-feature-split .service-feature-media--luxury { aspect-ratio: 5/4; }

/* #servicios completa es oscura (incluye Suministros/confianza/CTA debajo del
   showcase) — el margen negativo cubre la línea de costura de 1px contra el
   stage 3D anterior. Los textos que van directo sobre este fondo (no dentro
   de una tarjeta blanca) se aclaran más abajo. */
section#servicios { background: #050b14; padding-top: 0; margin-top: -4px; position: relative; z-index: 1; }

/* Suministros sobre fondo oscuro: textos que estaban pensados para fondo
   claro, aclarados. Las tarjetas blancas (.card, .supply-card, .supplies-feature)
   no se tocan — siguen legibles por sí mismas. */
#suministros > .kicker { color: rgba(255,255,255,.85); }
#suministros > .kicker::before { background: var(--white); }
.supplies-title { color: var(--white); }
.supplies-tagline { color: var(--blue); }
.supplies-desc { color: rgba(255,255,255,.68); }

/* Showcase unificado (Servicios 01–04 sobre un mismo fondo degradado) */
.services-showcase--unified {
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(0,151,219,.22), transparent 60%),
    linear-gradient(160deg, #050b14, #0a1826 55%, #050b14);
  /* Sin padding-top: la imagen/texto del lead suben hasta el borde mismo del
     fondo oscuro, en vez de dejar una franja lisa antes de que empiece. */
  padding-top: 0;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  /* .services-showcase's own margin-block (~115px top) was collapsing straight
     through #servicios (no padding/border to stop it), pushing this dark div
     down and leaving that gap showing the white page background. Zeroed here. */
  margin-top: 0;
}
.services-showcase--unified .service-feature--luxury { background: none; padding-block: 0; }
.services-showcase--unified .services-lead .section-title { color: var(--white); }
.services-showcase--unified .services-lead .services-intro { color: rgba(255,255,255,.72); }

/* Lead: imagen de fondo con texto superpuesto, bordes difuminados hacia el degradado.
   Sized as a proper banner (not just a tight wrap around the text) — the
   clamp() keeps it from ballooning on ultra-tall monitors or getting
   cramped on short ones. */
.services-lead {
  position: relative;
  isolation: isolate;
  min-height: clamp(26rem, 78vh, 44rem);
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 5vw, 3rem) clamp(1rem, 2vw, 1.5rem);
}
.services-lead-media {
  position: absolute; inset: 0; z-index: -2;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 32%, #000 42%, transparent 85%);
          mask-image: radial-gradient(75% 70% at 50% 32%, #000 42%, transparent 85%);
}
.services-lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.services-lead::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,11,20,.2) 0%, rgba(5,11,20,.6) 55%, rgba(10,24,38,.96) 100%);
}
.services-lead .kicker {
  color: #5FC7F5;
  font-size: .92rem;
  text-shadow: 0 0 10px rgba(0,151,219,.85), 0 0 24px rgba(0,151,219,.5);
}
.services-lead .kicker::before {
  background: var(--blue);
  box-shadow: 0 0 8px rgba(0,151,219,.9);
}

/* A more dramatic entrance than the site-wide default reveal (fade +
   translateY) for this banner specifically — blur-to-sharp plus a bigger
   rise and a slight scale, staggered kicker → title → intro so the three
   lines land one after another instead of all at once. */
.services-lead-content [data-reveal] {
  opacity: 0;
  transform: translateY(56px) scale(.94);
  filter: blur(14px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out);
}
.services-lead-content [data-reveal].is-revealed { opacity: 1; transform: none; filter: blur(0); }
.services-lead-content .kicker[data-reveal] { transition-delay: 0s; }
.services-lead-content .section-title[data-reveal] { transition-delay: .12s; }
.services-lead-content .services-intro[data-reveal] { transition-delay: .24s; }

/* 03 · band — imagen ancha de borde a borde, texto en dos columnas debajo */
.service-feature-media--band {
  aspect-ratio: 16/9;
  border-radius: 0;
  margin-bottom: clamp(2.6rem, 5vw, 3.8rem);
  border-block: 1px solid rgba(16,24,32,.08);
  box-shadow: 0 55px 100px -50px rgba(16,24,32,.45), 0 14px 34px -20px rgba(16,24,32,.18);
}
@media (min-width: 900px) { .service-feature-media--band { aspect-ratio: 21/7; } }
.service-feature-band-body { display: grid; gap: 2.2rem; }
@media (min-width: 860px) { .service-feature-band-body { grid-template-columns: .8fr 1.2fr; gap: 4.5rem; } }
.service-feature-band-intro .service-feature-problem { max-width: 22ch; }

/* ---- Suministros: boutique técnica ---- */
.supplies {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--gray-mid);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.supplies-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .7rem; }
.supplies-tagline { font-family: var(--display); font-weight: 700; color: var(--blue-2); font-size: 1.05rem; max-width: 56ch; margin-bottom: .6rem; }
.supplies-desc { color: var(--text-mute); max-width: 62ch; margin-bottom: 2.6rem; }

/* ---- Suministros: soluciones destacadas (Raclas, Obturadores, ...) ---- */
.supplies-feature {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  background: var(--ink);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
@media (min-width: 860px) { .supplies-feature { grid-template-columns: 1.05fr .95fr; } }
@media (min-width: 860px) { .supplies-feature--reverse { grid-template-columns: .95fr 1.05fr; } }
.supplies-feature--reverse .supplies-feature-media { order: -1; }
.supplies-feature-body { padding: clamp(2rem, 4vw, 3rem); }
.supplies-feature-kicker { color: rgba(255,255,255,.85); }
.supplies-feature-kicker::before { background: var(--white); }
.supplies-feature-body h4 { color: var(--white); font-size: clamp(1.5rem, 2.8vw, 2.05rem); margin-bottom: .6rem; }
.supplies-feature-lead { font-family: var(--display); font-weight: 700; color: var(--blue); font-size: 1rem; margin-bottom: .9rem; }
.supplies-feature-text { color: rgba(255,255,255,.72); font-size: .98rem; max-width: 46ch; margin-bottom: 1.6rem; }
.supplies-feature-tags { margin-bottom: 1.9rem; }
.supplies-feature-tags li { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.8); }
.supplies-feature-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.supplies-feature-media { aspect-ratio: 16/11; }
@media (min-width: 860px) { .supplies-feature-media { aspect-ratio: auto; height: 100%; min-height: 320px; } }
.supplies-feature-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.4s var(--ease-soft);
}
.supplies-feature:hover .supplies-feature-media img { transform: scale(1.045); }

.supplies-grid {
  display: grid; gap: 1.6rem; align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .supplies-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .supplies-grid { grid-template-columns: repeat(3, 1fr); } }

.supply-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.supply-card-media { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--ink); }
.supply-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-soft);
}
.supply-card:hover .supply-card-media img { transform: scale(1.06); }
.supply-card-n {
  position: absolute; top: 1rem; left: 1rem; z-index: 1;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: var(--white);
  background: rgba(5,11,20,.55); backdrop-filter: blur(6px);
  padding: .3rem .65rem; border-radius: 999px;
}
.supply-card-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.supply-card-body h4 { font-size: 1.05rem; margin-bottom: .5rem; transform: translateZ(20px); }
.supply-card-tag { color: var(--text-mute); font-size: .9rem; margin-bottom: 1rem; transform: translateZ(20px); }
.supply-card-more {
  max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0;
  transform: translateZ(20px);
  transition: max-height .4s var(--ease-soft), opacity .3s ease, margin-bottom .4s var(--ease-soft);
}
.supply-card-more p { font-size: .84rem; color: var(--text-mute); margin-top: .6rem; }
.supply-card-more p + p { margin-top: .45rem; }
.supply-card-media:hover ~ .supply-card-body .supply-card-more {
  max-height: 12rem; opacity: 1; margin-bottom: 1.1rem;
}
@media (hover: none) {
  .supply-card-more { max-height: none; opacity: 1; margin-bottom: 1.1rem; }
}
.supply-card-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: auto; padding-top: .3rem;
  font-weight: 600; font-size: .85rem; color: var(--blue-2);
  transform: translateZ(20px);
}
.supply-card-link span { transition: transform .35s var(--ease-soft); }
.supply-card-link:hover { color: var(--blue); }
.supply-card-link:hover span { transform: translateX(4px); }

/* ---- Por qué elegir (dentro de Servicios) ---- */
.reasons { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.reasons-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 2rem; }
.reasons-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .reasons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .reasons-grid { grid-template-columns: repeat(5, 1fr); } }
.reason-item { display: flex; flex-direction: column; gap: .7rem; }
.reason-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  color: var(--blue-dark);
  font-size: .72rem; font-weight: 800;
}
.reason-item h4 { font-size: 1rem; margin-bottom: .35rem; }
.reason-item p { color: var(--text-mute); font-size: .88rem; }

.services-cta-row {
  display: flex; flex-wrap: wrap; gap: 1rem;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--gray-mid);
}
.services-trust {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 1.1rem 1.4rem;
  background: var(--gray-light);
  border-left: 3px solid var(--blue);
  border-radius: 4px;
  font-size: .95rem;
}
.services-trust-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-left: .3rem;
  font-weight: 600; color: var(--blue-2);
}
.services-trust-link span { transition: transform .35s var(--ease-soft); }
.services-trust-link:hover { color: var(--blue); }
.services-trust-link:hover span { transform: translateX(4px); }

/* =============================================================
   9. Tecnología (accordion)
   ============================================================= */
.tech-grid { display: flex; flex-direction: column; gap: .8rem; max-width: 720px; }
.tech-item {
  border: 1px solid var(--gray-mid);
  border-radius: 14px;
  padding: 1.3rem 1.6rem;
  background: var(--gray-light);
  box-shadow: 0 18px 36px -28px rgba(16,24,32,.14);
}
.tech-item summary {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.tech-item summary::-webkit-details-marker { display: none; }
.tech-item summary span { color: var(--blue); font-size: .85rem; font-weight: 800; }
.tech-item p { margin-top: .9rem; color: var(--text-mute); max-width: 68ch; }

/* =============================================================
   10. Proceso (timeline)
   ============================================================= */
.process-layout { display: grid; gap: 2.4rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .process-layout { grid-template-columns: 1fr .7fr; } }
.process-layout--no-media { grid-template-columns: 1fr; max-width: 720px; }
@media (min-width: 960px) { .process-layout--no-media { grid-template-columns: 1fr; } }
.process-media { border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(16,24,32,.2); }
@media (min-width: 960px) { .process-media { position: sticky; top: calc(var(--nav-h) + 2rem); } }
.process-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.process-media figcaption {
  padding: .9rem 1.2rem;
  background: var(--gray-light);
  font-size: .85rem; font-weight: 600; color: var(--text-mute);
}

.timeline {
  position: relative;
  display: flex; flex-direction: column; gap: 2.4rem;
  padding-left: 2.6rem;
}
.timeline::before {
  content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--blue), var(--gray-mid));
}
.timeline-step { position: relative; display: flex; gap: 1.4rem; }
.timeline-n {
  position: absolute; left: -2.6rem; top: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue);
  color: var(--blue-dark);
  font-size: .68rem; font-weight: 800;
}
.timeline-step h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.timeline-step p { color: var(--text-mute); max-width: 52ch; }

/* =============================================================
   11. Por qué / stats
   ============================================================= */
.why-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .why-grid { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.why-list { display: flex; flex-direction: column; gap: 1.4rem; margin-top: 2rem; }
.why-list li { display: flex; flex-direction: column; gap: .3rem; padding-left: 1.3rem; border-left: 2px solid var(--blue); }
.why-list strong { font-family: var(--display); font-size: 1.05rem; }
.why-list span { color: var(--text-mute); font-size: .93rem; }

.why-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem;
  background: var(--blue-dark);
  border-radius: 24px;
  padding: clamp(2.2rem, 4.5vw, 3.6rem);
  box-shadow: 0 44px 84px -32px rgba(0,59,87,.5), 0 16px 32px -18px rgba(16,24,32,.22);
}
.stat { display: flex; flex-direction: column; gap: .3rem; color: var(--white); }
.stat strong { font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; color: var(--white); }
.stat span { font-size: .82rem; color: rgba(255,255,255,.65); }

/* =============================================================
   12. Galería técnica (sin fotografía — diagramas)
   ============================================================= */
.gallery-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-tile {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  background: var(--gray-light);
  border: 1px solid var(--gray-mid);
  box-shadow: 0 30px 60px -34px rgba(16,24,32,.2);
  transition: transform .7s var(--ease-soft), box-shadow .7s var(--ease-soft);
}
.gallery-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-soft);
}
.gallery-tile:hover { transform: scale(1.02); box-shadow: 0 40px 80px -30px rgba(0,151,219,.3); }
.gallery-tile:hover img { transform: scale(1.08); }
.gallery-caption {
  position: absolute; left: 1.4rem; bottom: 1.3rem; z-index: 2;
  font-size: .85rem; font-weight: 600; color: var(--white);
  background: rgba(16,24,32,.55);
  padding: .5rem .9rem; border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* =============================================================
   13. Testimonios
   ============================================================= */
.testimonials-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: var(--gray-light);
  border-radius: 20px;
  padding: 2.2rem 2rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  box-shadow: 0 24px 50px -32px rgba(16,24,32,.14);
}
.quote-mark { font-family: var(--display); font-size: 3rem; color: var(--blue); line-height: 1; }
.testimonial p { font-size: 1.02rem; color: var(--ink); }
.testimonial footer { display: flex; flex-direction: column; gap: .15rem; }
.testimonial strong { font-family: var(--display); font-size: .95rem; }
.testimonial span { font-size: .82rem; color: var(--text-mute); }

/* =============================================================
   14. CTA final
   ============================================================= */
.cta-final { background: var(--blue-dark); }
.cta-final .kicker { color: rgba(255,255,255,.75); }
.cta-final .kicker::before { background: var(--white); }
.cta-final-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-final-title {
  color: var(--white);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  max-width: 18ch;
  margin-bottom: 1.2rem;
}
.cta-final-sub { color: rgba(255,255,255,.72); max-width: 40ch; margin-bottom: 2.2rem; }
.cta-final-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* =============================================================
   15. Footer
   ============================================================= */
.footer { background: var(--ink); color: rgba(255,255,255,.7); padding-block: 3.5rem 2rem; }
.footer-inner {
  display: grid; gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; } }
@media (min-width: 960px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-logo-badge {
  display: inline-flex; align-self: flex-start;
  background: var(--white);
  padding: .55rem 1rem;
  border-radius: 12px;
}
.footer-logo-img { display: block; height: 26px; width: auto; }
.footer-brand p { font-size: .85rem; max-width: 32ch; }
.footer-col { display: flex; flex-direction: column; gap: .7rem; }
.footer-col h4 { color: var(--white); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .3rem; }
.footer-col a, .footer-col span { font-size: .88rem; }
.footer-col a:hover { color: var(--blue); }

/* =============================================================
   16. Responsive base tweaks
   ============================================================= */
@media (max-width: 719px) {
  .stage3d { height: 132lvh; }
  .hero-actions { flex-direction: column; align-items: stretch; margin-bottom: 1.6rem; }
  .hero-actions .btn { width: 100%; }
  .hero-indicators { gap: 1.1rem 1.6rem; }
  .stage-scrollcue { display: none; }
  /* The image/text mask was centered for the desktop lead's taller box —
     on the short mobile one that left a flat, image-less dark band before
     the hex texture ever appeared. Move the mask's visible center to the
     very top and drop the lead's own top padding so both the photo and
     the kicker/title sit flush against the top of the dark panel. */
  .services-lead { padding-top: 0; }
  .services-lead-media {
    -webkit-mask-image: radial-gradient(85% 65% at 50% 10%, #000 45%, transparent 90%);
            mask-image: radial-gradient(85% 65% at 50% 10%, #000 45%, transparent 90%);
  }
  /* backdrop-filter forces the browser to re-sample and blur whatever's
     behind it on every frame — over a live, constantly-changing WebGL
     canvas (camera panning, roller spinning) that's real compositor work
     fighting the 3D render for the same frame budget. Mobile GPUs feel it
     as stutter; desktop has the headroom to keep it. The diff-kicker
     labels are the only thing left using a live blur (the hero copy moved
     out to its own plain section, so it no longer needs this at all). */
  .diff-kicker.is-active {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,.92);
  }
}

/* Short viewports (small laptops, embedded panes): keep the scroll cue
   from colliding with the last row of hero content. */
@media (max-height: 760px) {
  .hero-standalone { padding-bottom: 2.6rem; }
  .hero-title { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 1rem; }
  .hero-sub { margin-bottom: 1.2rem; }
  .hero-actions { margin-bottom: 1.4rem; }
  .stage-scrollcue { bottom: 0.9rem; }
  .stage-scrollcue-icon { width: 18px; height: 18px; }
}
@media (max-height: 620px) {
  .stage-scrollcue { display: none; }
}

/* =============================================================
   18. Zecher — Tecnología Zecher (página dedicada)
   ============================================================= */

/* ---- Bloque 1: Hero cinematográfico ---- */
.zx-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.zx-hero-media { position: absolute; inset: 0; z-index: -2; }
.zx-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zx-hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(5,11,20,.92) 0%, rgba(5,11,20,.55) 42%, rgba(5,11,20,.12) 70%),
    linear-gradient(0deg, rgba(5,11,20,.75), transparent 45%);
}
.zx-hero-container { width: 100%; padding-block: clamp(4rem, 10vw, 7rem); }
.zx-hero-content { max-width: 46ch; }
.zx-hero-kicker { color: rgba(255,255,255,.85); }
.zx-hero-kicker::before { background: var(--white); }
.zx-hero-title {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 1.1rem;
}
.zx-hero-sub {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--white);
  margin-bottom: 1rem;
  max-width: 34ch;
}
.zx-hero-msg { color: rgba(255,255,255,.72); font-size: .98rem; max-width: 46ch; margin-bottom: 1.8rem; }
.zx-hero-scroll {
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.85); font-weight: 600; font-size: .85rem;
  padding-bottom: .2rem; border-bottom: 1px solid rgba(255,255,255,.35);
}
.zx-hero-scroll:hover { color: var(--white); border-color: var(--white); }
@media (max-width: 720px) { .zx-hero { min-height: 82vh; } }

/* ---- Bloque 2: Aniloxgraf × Zecher ---- */
.zx-partnership-lead { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.zx-partnership-message {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  color: var(--blue-2);
  margin-bottom: .9rem;
}
.zx-partnership-text { color: var(--text-mute); font-size: 1.02rem; max-width: 60ch; }

.zx-partnership-grid {
  position: relative;
  display: grid; gap: 2.5rem;
  grid-template-columns: 1fr;
  background: var(--gray-light);
  border-radius: 24px;
  padding: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 860px) { .zx-partnership-grid { grid-template-columns: 1fr auto 1fr; gap: 3rem; } }

.zx-partner-col { display: flex; flex-direction: column; gap: 1.4rem; }
.zx-partner-logo { height: 32px; width: auto; }
.zx-wordmark {
  font-family: var(--display); font-weight: 800;
  font-size: 1.6rem; letter-spacing: .08em;
  color: var(--ink);
}
.zx-partner-list { display: flex; flex-direction: column; gap: .6rem; }
.zx-partner-list li { position: relative; padding-left: 1.3rem; font-size: .92rem; color: var(--text); }
.zx-partner-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
}
.zx-partner-col--zecher .zx-partner-list li::before { background: var(--blue-dark); }

.zx-partner-x { display: none; }
@media (min-width: 860px) {
  .zx-partner-x {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 20px 40px -18px rgba(16,24,32,.25);
    font-family: var(--display); font-weight: 800; font-size: 1.2rem;
    color: var(--blue);
    align-self: center;
    margin-top: 1.4rem;
  }
}

/* ---- Bloque 4: Explorador de tecnologías de grabado ---- */
.zx-explorer { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.zx-explorer-nav {
  display: none;
  flex-direction: row; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.5rem;
}
.zx-explorer-nav-item {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .95rem;
  border-radius: 999px;
  border: 1.5px solid var(--gray-mid);
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  color: var(--text-mute);
  transition: background-color .3s, color .3s, border-color .3s;
}
.zx-explorer-nav-item span { font-size: .7rem; font-weight: 800; color: var(--blue); }
.zx-explorer-nav-item:hover { border-color: var(--blue); color: var(--ink); }
.zx-explorer-nav-item.is-active { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); }
.zx-explorer-nav-item.is-active span { color: var(--white); }

@media (min-width: 900px) {
  .zx-explorer.is-enhanced { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; }
  .zx-explorer-nav { flex-direction: column; margin-bottom: 0; position: sticky; top: calc(var(--nav-h) + 2rem); }
  .zx-explorer-nav-item { border-radius: 12px; border: none; padding: .85rem 1rem; }
}
.zx-explorer.is-enhanced .zx-explorer-nav { display: flex; }
.zx-explorer.is-enhanced .zx-explorer-panel { display: none; border-bottom: none; padding-block: 0; }
.zx-explorer.is-enhanced .zx-explorer-panel.is-active { display: grid; animation: zxFadeIn .5s var(--ease-soft); }
@keyframes zxFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.zx-explorer-panels { position: relative; }
.zx-explorer-panel {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
  padding-block: 1.8rem;
  border-bottom: 1px solid var(--gray-mid);
}
.zx-explorer-panels .zx-explorer-panel:last-child { border-bottom: none; }
@media (min-width: 720px) { .zx-explorer-panel { grid-template-columns: .85fr 1.15fr; align-items: center; } }

.zx-explorer-media { border-radius: 20px; overflow: hidden; aspect-ratio: 1/1; background: var(--gray-light); }
.zx-explorer-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease-soft); }
.zx-explorer-media:hover img { transform: scale(1.04); }

.zx-explorer-app { font-size: .88rem; color: var(--text-mute); margin: -.6rem 0 1.2rem; }
.zx-explorer-app strong { color: var(--ink); }

/* ---- Bloque 5: Tratamientos de superficie ---- */
.zx-treatments-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 780px) { .zx-treatments-grid { grid-template-columns: repeat(2, 1fr); } }
.zx-treatment-card { padding: 0; overflow: hidden; }
.zx-treatment-media { aspect-ratio: 1/1; overflow: hidden; background: var(--ink); }
.zx-treatment-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zx-treatment-body { padding: 1.8rem 1.8rem 2rem; }
.zx-treatment-body h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.zx-treatment-sub { display: block; font-family: var(--sans); font-weight: 500; font-size: .82rem; color: var(--blue-2); margin-bottom: .9rem; }
.zx-treatment-body p { color: var(--text-mute); font-size: .93rem; }
.zx-treatment-pending { font-style: italic; color: var(--gray-dark); }
.zx-treatments-note { margin-top: 1.6rem; font-size: .9rem; color: var(--text-mute); }

/* ---- Bloque 9: Respaldo internacional ---- */
.zx-quality { position: relative; isolation: isolate; background: var(--blue-dark); }
.zx-quality::before {
  content: "";
  position: absolute; inset: -25% -10% -35% -10%; z-index: -1;
  background: radial-gradient(42% 38% at 50% 18%, rgba(0,151,219,.28), transparent 72%);
  filter: blur(90px); pointer-events: none;
}
.zx-quality .kicker { color: rgba(255,255,255,.75); }
.zx-quality .kicker::before { background: var(--white); }
.zx-quality .section-title { color: var(--white); }
.zx-quality-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: 2rem;
}
@media (min-width: 720px) { .zx-quality-stats { grid-template-columns: repeat(4, 1fr); } }
.zx-quality-text { color: rgba(255,255,255,.72); max-width: 56ch; }

/* ---- Bloque 10: El valor de Aniloxgraf ---- */
@media (min-width: 1100px) { .reasons-grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .reasons-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.zx-value-message {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--gray-mid);
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink);
}

/* =============================================================
   20. Quote request page (quote-*)
   ============================================================= */
.quote-intro { padding-bottom: 0; }
.quote-intro-text { color: var(--text-mute); font-size: 1.05rem; max-width: 56ch; }

.quote-layout {
  display: grid; gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .quote-layout { grid-template-columns: 1.6fr 1fr; } }

.quote-form {
  display: flex; flex-direction: column; gap: 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.quote-row { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .quote-row { grid-template-columns: 1fr 1fr; } }

.quote-field { display: flex; flex-direction: column; gap: .5rem; }
.quote-field label {
  font-family: var(--display); font-weight: 600; font-size: .88rem; color: var(--ink);
}
.quote-field label span { color: var(--blue); }

.quote-field input,
.quote-field select,
.quote-field textarea {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--gray-light);
  border: 1.5px solid var(--gray-mid);
  border-radius: 10px;
  padding: .8rem 1rem;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
  outline: none; border-color: var(--blue); background: var(--white);
}
.quote-field textarea { resize: vertical; min-height: 6rem; }
.quote-field select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
  padding-right: 2.6rem;
}

.quote-hint { color: var(--text-mute); font-size: .85rem; margin: -.2rem 0 0; }
.quote-submit { align-self: flex-start; }

.quote-field.has-error input,
.quote-field.has-error select,
.quote-field.has-error textarea { border-color: #D64545; }
.quote-field-error {
  color: #D64545; font-size: .8rem; display: none;
}
.quote-field.has-error .quote-field-error { display: block; }

/* Campo trampa anti-spam: accesible para lectores de pantalla, invisible y
   fuera del flujo para el resto. No usar display:none (algunos bots lo saltan). */
.quote-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Botón mientras se envía la solicitud */
.quote-submit[aria-busy="true"] { pointer-events: none; opacity: .8; }
.quote-submit[aria-busy="true"] .quote-submit-arrow {
  transform: rotate(0deg);
  animation: quote-spin .8s linear infinite;
  display: inline-block;
}
@keyframes quote-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .quote-submit[aria-busy="true"] .quote-submit-arrow { animation: none; }
}

/* Panel de aviso de error (se mantiene el formulario y los datos escritos) */
.quote-feedback {
  border-radius: 12px;
  padding: .85rem 1.1rem;
  font-size: .9rem;
  line-height: 1.5;
  background: rgba(214, 69, 69, .08);
  border: 1px solid rgba(214, 69, 69, .32);
  color: #A83232;
}

/* Mensaje de éxito — reemplaza el formulario dentro del mismo lienzo */
.quote-form.is-sent { gap: 1rem; }
.quote-form.is-sent > :not(.quote-success) { display: none; }
.quote-success {
  display: flex; flex-direction: column; align-items: flex-start; gap: .9rem;
  padding: .5rem 0;
  animation: quote-rise .6s var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) { .quote-success { animation: none; } }
@keyframes quote-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.quote-success-badge {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 151, 219, .12);
  color: var(--blue);
}
.quote-success-badge svg { width: 26px; height: 26px; }
.quote-success h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.5rem; color: var(--ink); line-height: 1.2;
}
.quote-success p {
  color: var(--text-mute); font-size: .98rem; max-width: 46ch;
}

.quote-aside-card {
  background: var(--blue-dark); color: var(--white);
  border-radius: 20px; padding: clamp(1.6rem, 4vw, 2rem);
}
.quote-aside-card h3 { font-family: var(--display); font-size: 1.15rem; margin-bottom: .6rem; }
.quote-aside-card p { color: rgba(255,255,255,.72); font-size: .92rem; margin-bottom: 1.2rem; }
.quote-aside-link {
  display: inline-block; font-family: var(--display); font-weight: 700; color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: .2rem; margin-bottom: 1rem;
}
.quote-aside-link:hover { border-color: var(--white); }
.quote-aside-note { display: block; color: rgba(255,255,255,.55); font-size: .82rem; }

/* =============================================================
   21. Reduced motion — only intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .stage-scrollcue-icon { animation: none; }
  .zx-explorer.is-enhanced .zx-explorer-panel.is-active { animation: none; }
}