/* >>> FUENTES AUTO-HOSPEDADAS (generado por tools/fetch_fonts.py) >>> */
/* ==========================================================================
   Fuentes auto-hospedadas — generado por tools/fetch_fonts.py, no editar a mano.

   Se sirven desde el propio dominio para eliminar los dos viajes cross-origin
   que hacia falta hacer antes (fonts.googleapis.com -> fonts.gstatic.com).
   Subset: latin. font-display: swap, igual que la version de Google.
   ========================================================================== */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/barlow-condensed-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* <<< FIN FUENTES AUTO-HOSPEDADAS <<< */

/* =============================================================
   RENTALS JOSUEK — styles.css
   Archetype: Industrial Dark (adapted from Editorial Dark Warm
   topology, reskinned to true near-black + off-white + industrial
   amber, condensed grotesk display, no serif italic, no glyphs).
   Single file, sectioned. Mobile-first. Native scroll.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #0a0a0a;
  --bg-2:      #121212;
  --bg-3:      #1a1a1a;
  --bg-4:      #232323;
  --ink:       #f4f4f2;
  --ink-mute:  rgba(244, 244, 242, .68);
  /* Was .42 — ~3.7:1 on --bg, under the 4.5:1 WCAG AA floor and genuinely
     hard to read on a phone outdoors. .55 lands at ~5.8:1. */
  --ink-dim:   rgba(244, 244, 242, .55);
  --accent:    #ffc61e;
  --accent-2:  #e6a800;
  --accent-ink:#161207;
  --whatsapp:  #25d366;
  --line:      rgba(244, 244, 242, .12);
  --line-2:    rgba(244, 244, 242, .22);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, .55);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, .4);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --container: 1264px;
  /* Slimmer bar on phones — 84px ate a fifth of a 640px-tall viewport.
     Everything that positions against the header (the mobile menu, the JS
     anchor offset) reads this token or the header's measured height. */
  --nav-h: 68px;

  --font-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.7, 0, .84, 0);
  --ease-soft:   cubic-bezier(.25, .46, .45, .94);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
}

@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 35%; }

/* =============================================================
   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 {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  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; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-wrap: balance;
  line-height: .96;
  letter-spacing: -.01em;
  font-weight: 800;
}
::selection { background: var(--accent); color: var(--accent-ink); }

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

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .7rem 1.1rem; background: var(--accent); color: var(--accent-ink);
  z-index: 9999; border-radius: 8px; font-weight: 700;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container {
  width: 100%; max-width: var(--container); margin-inline: auto;
  /* viewport-fit=cover means the notch/rounded corners can eat into the
     gutters in landscape — pad past them. */
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.section { position: relative; padding-block: clamp(4rem, 9vw, 8rem); }
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.kicker {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.kicker::before {
  content: ""; width: 22px; height: 1px; background: var(--accent);
}
.section-title { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.section-lead { margin-top: 1.1rem; color: var(--ink-mute); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 42ch; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }
.reveal-1 { transition-delay: .06s; }
.reveal-2 { transition-delay: .14s; }
.reveal-3 { transition-delay: .22s; }

/* =============================================================
   4. Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 1rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .96rem;
  letter-spacing: -.005em;
  transition: transform .35s var(--ease-out), background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: 0 14px 34px rgba(255, 198, 30, .22);
}
.btn-primary:hover { box-shadow: 0 18px 44px rgba(255, 198, 30, .34); transform: translateY(-2px); }
.btn-ghost {
  background: rgba(244, 244, 242, .04);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink-mute); background: rgba(244, 244, 242, .08); }
.btn-whatsapp {
  background: var(--whatsapp);
  color: #06210f;
  box-shadow: 0 14px 34px rgba(37, 211, 102, .25);
}
.btn-whatsapp:hover { box-shadow: 0 18px 44px rgba(37, 211, 102, .38); transform: translateY(-2px); }
.btn-lg { padding: 1.2rem 2.2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* =============================================================
   5. Splash / intro loader
   ============================================================= */
.splash {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--bg);
  /* pointer-events fijo en none en vez de animado: la red de seguridad de
     abajo lo cambiaba dentro de un @keyframes, y esa propiedad no se puede
     componer, asi que Chrome mandaba toda la animacion al hilo principal
     ("evita las animaciones no compuestas"). Como valor fijo el keyframe
     queda solo con opacity, que si se compone. De paso arregla un detalle
     de UX: durante el intro los clics ya no quedan atrapados en la capa. */
  pointer-events: none;
  animation: splashSafety .01s 4.5s forwards;
}
.splash-mark {
  width: clamp(52px, 9vw, 84px); height: auto;
  opacity: 0;
  animation: splashMark .7s var(--ease-out) .15s forwards;
}
.splash-word {
  margin-top: 1.4rem;
  width: clamp(200px, 30vw, 340px); height: auto;
  opacity: 0;
  animation: splashWord .8s var(--ease-out) .55s forwards;
}
.splash-bar {
  margin-top: 2.2rem; width: 140px; height: 2px;
  background: var(--line-2); overflow: hidden; border-radius: 2px;
}
.splash-bar::after {
  content: ""; display: block; height: 100%; width: 40%;
  background: var(--accent);
  animation: splashBar 1.4s var(--ease-soft) infinite;
}
.splash.is-out {
  opacity: 0;
  transition: opacity .7s var(--ease-out);
  pointer-events: none;
}
@keyframes splashSafety { to { opacity: 0; } }
@keyframes splashMark { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes splashWord { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes splashBar {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(60%); }
  100% { transform: translateX(260%); }
}

/* =============================================================
   6. Custom cursor
   ============================================================= */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
html.cursor-ready .cursor-dot,
html.cursor-ready .cursor-ring { opacity: 1; }
.cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  background: var(--accent); border-radius: 50%;
}
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(244, 244, 242, .55);
  border-radius: 50%;
  transition: opacity .25s var(--ease-out), width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.cursor-ring.is-grown {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: var(--accent);
  background: rgba(255, 198, 30, .08);
}
.cursor-ring.is-active { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* =============================================================
   7. Nav
   ============================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  padding-top: env(safe-area-inset-top);
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease-out);
}
/* The solid/blurred bar lives on a pseudo-element, NOT on .nav itself.
   A non-`none` backdrop-filter (or filter/transform) turns the element into
   the containing block for its position:fixed descendants — which used to
   collapse the full-screen .nav-mobile menu into a ~64px sliver as soon as
   the header went solid on scroll. Painting the blur in ::before keeps .nav
   a plain fixed box, so the menu stays anchored to the viewport. */
.nav::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 10, 10, .82);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
@supports (backdrop-filter: blur(14px)) {
  .nav::before { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
}
.nav.is-solid::before { opacity: 1; }
.nav.is-solid { border-bottom-color: var(--line); }
/* Menu open: the bar becomes a plain opaque strip. Leaving the blur on would
   show a smeared, colour-shifted slice of the page above an otherwise solid
   black menu panel. */
.nav.is-menu-open::before {
  opacity: 1;
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img { height: 30px; width: auto; }
@media (min-width: 720px) { .nav-logo img { height: 34px; } }
.nav-links { display: none; align-items: center; gap: 2.1rem; }
.nav-links a {
  font-size: .92rem; font-weight: 600; color: var(--ink-mute);
  position: relative; padding-block: .3rem;
  transition: color .3s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--accent); transition: right .35s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
.nav-cta { display: none; }
.nav-toggle {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-2);
  background: rgba(10, 10, 10, .35);
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.nav.is-menu-open .nav-toggle { border-color: var(--accent); }
.nav-toggle-bars { position: relative; width: 18px; height: 13px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--ease-out), opacity .3s var(--ease-out), top .35s var(--ease-out);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5.5px; }
.nav-toggle-bars span:nth-child(3) { top: 11px; }
.nav.is-menu-open .nav-toggle-bars span:nth-child(1) { top: 5.5px; transform: rotate(45deg); }
.nav.is-menu-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-toggle-bars span:nth-child(3) { top: 5.5px; transform: rotate(-45deg); }

.nav-mobile {
  position: fixed;
  top: calc(var(--nav-h) + env(safe-area-inset-top));
  right: 0; bottom: 0; left: 0;
  z-index: 99;
  /* Fully opaque: at rgba(…,.98) the bright hero/contact copy behind the
     panel still ghosted through on OLED phones. */
  background: var(--bg);
  display: flex; flex-direction: column;
  /* `safe center` keeps the list optically centred on tall phones but falls
     back to top-aligned (instead of clipping the first items past the top
     edge) when the menu is taller than the space available — landscape and
     small handsets used to lose the last two links with no way to reach them. */
  justify-content: safe center;
  gap: clamp(.65rem, 2.2vh, 1.6rem);
  padding: clamp(1.25rem, 4vh, 2.5rem) 1.5rem calc(clamp(1.25rem, 4vh, 2.5rem) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-12px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
.nav.is-menu-open .nav-mobile {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
}
.nav-mobile a {
  display: flex; align-items: center;
  min-height: 44px;                      /* full-width, thumb-sized rows */
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.2vh, 2.1rem);
  line-height: 1.15;
  font-weight: 700; color: var(--ink);
  flex: none;
  -webkit-tap-highlight-color: rgba(255, 198, 30, .12);
}
.nav-mobile a:active { color: var(--accent); }
.nav-mobile .btn { align-self: flex-start; margin-top: .6rem; flex: none; }
/* Older engines without `safe` alignment: never centre, so nothing is clipped. */
@supports not (justify-content: safe center) {
  .nav-mobile { justify-content: flex-start; }
}
/* Scroll lock while the full-screen menu is open. Applied as a class so the
   stylesheet's own `overflow-x: clip` is restored on close (an inline style
   used to wipe it), and so body is locked too — iOS Safari ignores
   overflow:hidden on <html> alone. */
html.is-nav-locked, html.is-nav-locked body { overflow: hidden; }

/* =============================================================
   8. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: clip;
  --mx: 62%; --my: 30%;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%;
  filter: saturate(1.05) contrast(1.06) brightness(.82);
  transform: scale(1.06);
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 32%, rgba(10,10,10,.72) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,.15) 55%);
}
.hero-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(46rem 30rem at var(--mx) var(--my), rgba(255, 198, 30, .16), transparent 65%);
  mix-blend-mode: screen;
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(6.5rem, 16vw, 9rem) clamp(3rem, 7vw, 4.5rem);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 1.4rem;
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,198,30,.18); }
.hero-title {
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  max-width: 15ch;
  text-transform: uppercase;
}
.hero-title em {
  font-style: normal; color: var(--accent);
}
.hero-sub {
  margin-top: 1.5rem; max-width: 46ch;
  font-size: clamp(1.02rem, 1.7vw, 1.24rem);
  color: var(--ink-mute);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }
.hero-strip {
  margin-top: clamp(2.6rem, 6vw, 4rem);
  display: flex; flex-wrap: wrap; gap: 2.4rem 3rem;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.hero-strip-item { display: flex; flex-direction: column; gap: .2rem; }
.hero-strip-num { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
.hero-strip-num--text { font-size: 1.15rem; letter-spacing: -.005em; max-width: 14ch; }
.hero-strip-label { font-size: .82rem; color: var(--ink-dim); }

/* =============================================================
   9. About / pillars / stats
   ============================================================= */
.about-grid { display: grid; gap: 2.4rem; }
.about-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.about-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.about-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,10,10,.65), transparent 45%);
}
.about-figure-cap {
  position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 1;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; color: var(--ink);
}
.about-figure--brand {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: radial-gradient(120% 100% at 30% 20%, rgba(255,198,30,.12), transparent 60%), var(--bg-3);
  padding: 3rem;
}
.about-figure--brand::after { content: none; }
.about-figure--brand img {
  width: 68%; height: auto; aspect-ratio: auto; object-fit: contain;
}
.about-copy p { color: var(--ink-mute); font-size: 1.05rem; max-width: 56ch; }
.about-copy p + p { margin-top: 1rem; }

.pillars { display: grid; gap: 1rem; margin-top: 2.6rem; }
.pillar {
  padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(244,244,242,.03), transparent);
}
.pillar-num { font-family: var(--font-mono); color: var(--accent); font-size: .82rem; letter-spacing: .1em; }
.pillar h3 { font-family: var(--font-body); font-size: 1.06rem; font-weight: 700; margin-top: .6rem; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.pillar p { margin-top: .5rem; color: var(--ink-mute); font-size: .94rem; }

.stats {
  margin-top: 3rem; display: grid; gap: 1.4rem;
  padding-top: 2.4rem; border-top: 1px solid var(--line);
}
.stat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--ink);
  display: flex; align-items: baseline; gap: .2rem;
}
.stat-num .unit { font-size: .5em; color: var(--accent); font-family: var(--font-mono); font-weight: 500; }
.stat-label { margin-top: .3rem; color: var(--ink-dim); font-size: .88rem; }

.faq { margin-top: 2.6rem; display: grid; gap: .8rem; max-width: 62rem; }
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(244,244,242,.03), transparent);
  overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 1.2rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; font-family: var(--font-mono); font-size: 1.3rem; line-height: 1;
  color: var(--accent); transition: transform .25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item-body { padding: 0 1.4rem 1.2rem; color: var(--ink-mute); font-size: .95rem; max-width: 62ch; }
.faq-item-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================
   10. Machinery catalog — spec-sheet style cards: a contained
   product photo on a neutral panel, an inline thumbnail filmstrip,
   then a structured body (eyebrow, title, spec list, price, CTA).
   Modeled after clean rental-catalog UIs (SKRental) but reskinned
   to the site's dark/amber industrial language.
   ============================================================= */
.catalog-grid { display: grid; gap: 1.4rem; }

.catalog-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-3);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.catalog-card:hover { border-color: var(--line-2); transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.catalog-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(180deg, var(--bg-4), var(--bg-3) 85%);
  transform-style: preserve-3d;
}
.catalog-media img {
  width: 100%; height: 100%; object-fit: contain; padding: 2.2rem 1.8rem 1.4rem;
  transition: transform .6s var(--ease-out);
}
.catalog-media.is-tilting img { transform: scale(1.035); }
.catalog-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(360px circle at var(--hx, 50%) var(--hy, 50%), rgba(255,198,30,.14), transparent 60%);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.catalog-media.is-tilting::before { opacity: 1; }

.catalog-thumbs {
  display: flex; flex-wrap: wrap; gap: .55rem; padding: .9rem 1.4rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.15);
}
.catalog-thumb {
  position: relative;
  width: 44px; height: 44px; padding: 0; border-radius: 8px; overflow: hidden; flex: none;
  border: 1.5px solid var(--line-2);
  background: var(--bg-4);
  opacity: .55; transition: opacity .25s var(--ease-out), border-color .25s var(--ease-out);
}
.catalog-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catalog-thumb:hover, .catalog-thumb.is-active { opacity: 1; border-color: var(--accent); }

.catalog-body { display: flex; flex-direction: column; flex: 1; padding: 1.7rem 1.5rem 1.5rem; }
.machine-tag { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.machine-name { margin-top: .5rem; font-size: clamp(1.35rem, 2vw, 1.6rem); }
/* The product title doubles as the card's link — on touch it needs a row
   worth tapping, not a 26px line of text. */
.machine-name a { display: inline-block; padding-block: .45rem; }
.machine-name a:hover { color: var(--accent); }
.machine-desc { margin-top: .6rem; color: var(--ink-mute); font-size: .92rem; }

.catalog-specs { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; }
.catalog-spec {
  display: flex; align-items: baseline; gap: .65rem;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .01em; color: var(--ink-mute);
}
.catalog-spec::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-bottom: .05em;
  background: var(--accent); border-radius: 2px;
}

.catalog-price {
  margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.catalog-price-label { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.catalog-price-value { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; color: var(--accent); }
.catalog-price-value .unit { font-family: var(--font-mono); font-size: .62rem; font-weight: 500; margin-left: .35em; text-transform: uppercase; color: var(--ink-dim); }
.catalog-price--quote .catalog-price-value { font-size: 1.15rem; color: var(--ink); }

.catalog-note { margin-top: .7rem; font-size: .82rem; color: var(--ink-dim); }

/* Standalone tag cloud (e.g. "qué incluye" amenity lists) — distinct
   from .catalog-specs, which is the per-product spec list inside a card. */
.catalog-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.catalog-chip {
  padding: .35rem .75rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: .76rem; color: var(--ink-mute);
}
.catalog-actions { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .6rem; }

/* =============================================================
   11. Reviews / clients
   ============================================================= */
.rating-badge {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: .9rem 1.3rem; border: 1px solid var(--line-2); border-radius: 999px;
  margin-bottom: 2.6rem;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.rating-badge:hover { border-color: var(--accent); background: rgba(255,198,30,.05); }
.rating-stars { color: var(--accent); font-size: 1.05rem; letter-spacing: .06em; }
.rating-value { font-family: var(--font-display); font-size: 1.3rem; }
.rating-text { color: var(--ink-mute); font-size: .88rem; }
.rating-text .arrow { color: var(--accent); margin-left: .3em; }

.reviews-grid { display: grid; gap: 1.2rem; }
.review-card {
  padding: 1.8rem; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(244,244,242,.035), transparent);
}
.review-stars { color: var(--accent); font-size: .95rem; letter-spacing: .06em; }
.review-quote { margin-top: 1rem; font-size: 1.02rem; color: var(--ink); line-height: 1.55; }
.review-quote::before { content: "\201C"; color: var(--accent); }
.review-quote::after { content: "\201D"; color: var(--accent); }
.review-meta { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .15rem; }
.review-name { font-weight: 700; font-size: .95rem; }
.review-src { font-family: var(--font-mono); font-size: .76rem; color: var(--ink-dim); }

/* Photo gallery — plain grid of real equipment photos, grouped per
   product on multi-product pages (no lightbox, matches site's simplicity). */
.photo-gallery-group + .photo-gallery-group { margin-top: 2.4rem; }
.photo-gallery-group h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); margin-bottom: 1rem;
}
.photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.photo-gallery-item {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--line); background: var(--bg-3);
  box-shadow: var(--shadow-md);
}
.photo-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.photo-gallery-item:hover img { transform: scale(1.06); }

/* =============================================================
   12. Contact — one unified panel, WhatsApp-forward, with a
   live open/closed status pill and a 7-day hours strip.
   ============================================================= */
.contact-panel {
  display: grid;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-3);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* min-width:0 — grid items default to min-width:auto, so the 7-day hours
   strip (and the long address/e-mail rows) forced both cells to ~549px inside
   a 335px panel on phones. The excess was invisibly cut off by the root's
   overflow-x: clip, which is what made the page feel like it had stray
   sideways scroll. */
.contact-panel-main {
  position: relative;
  min-width: 0;
  padding: clamp(1.4rem, 4.5vw, 2.8rem);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,198,30,.1), transparent 60%);
}
.contact-panel-details {
  min-width: 0;
  padding: clamp(1.4rem, 4.5vw, 2.8rem);
  display: flex; flex-direction: column;
}

.status-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .85rem; margin-bottom: 1.6rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-family: var(--font-mono); font-size: .78rem; color: var(--ink-mute);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); flex: none; }
.status-pill.is-open { border-color: rgba(37,211,102,.4); color: var(--ink); }
.status-pill.is-open .status-dot { background: var(--whatsapp); box-shadow: 0 0 0 4px rgba(37,211,102,.18); }
.status-pill.is-closed .status-dot { background: var(--ink-dim); }

.contact-hero-cta {
  display: flex; align-items: center; gap: 1rem;
  min-width: 0;
  padding: 1.3rem clamp(1rem, 3.5vw, 1.4rem);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  box-shadow: 0 16px 36px rgba(255,198,30,.22);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.contact-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(255,198,30,.32); }
.contact-hero-cta .cta-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(22,18,7,.14); display: grid; place-items: center;
}
.contact-hero-cta .cta-icon svg { width: 24px; height: 24px; }
.contact-hero-cta .cta-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.contact-hero-cta .cta-copy strong { font-family: var(--font-display); font-size: clamp(1.15rem, 5.5vw, 1.35rem); line-height: 1; }
.contact-hero-cta .cta-copy span { font-size: .82rem; opacity: .75; text-wrap: pretty; }
.contact-hero-cta .cta-arrow {
  margin-left: auto; font-family: var(--font-display); font-size: 1.3rem;
  transition: transform .35s var(--ease-out);
}
.contact-hero-cta:hover .cta-arrow { transform: translateX(5px); }

.contact-alt-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .2rem 1rem;
  margin-top: 1.2rem; padding-top: 1.2rem; min-height: 44px;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-mute);
  transition: color .25s var(--ease-out);
}
.contact-alt-row:hover { color: var(--ink); }
.contact-alt-row span:last-child { font-family: var(--font-mono); font-size: .84rem; }

.detail-row {
  display: flex; flex-direction: column; gap: .3rem;
  padding-block: 1rem; min-width: 0;
  border-bottom: 1px solid var(--line);
  transition: color .25s var(--ease-out);
}
/* Long, unbreakable strings (e-mail, street address) must wrap rather than
   push the whole panel wider than the screen. */
.detail-value, .contact-alt-row span { overflow-wrap: anywhere; }
.contact-panel-details > .detail-row:first-child { padding-top: 0; }
.detail-label {
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-dim);
}
.detail-value { font-size: .96rem; color: var(--ink); }
.detail-row:hover .detail-value { color: var(--accent); }

.hours-strip {
  display: flex; gap: .5rem; margin-top: 1.6rem;
  overflow-x: auto; padding-bottom: .2rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* On phones the strip wraps into two rows instead of scrolling sideways —
   a hidden horizontal scroller here was undiscoverable, so Fri/Sat/Sun were
   effectively invisible. */
@media (max-width: 599px) {
  .hours-strip { flex-wrap: wrap; overflow-x: visible; gap: .45rem; }
  .hours-strip .hours-day { flex: 1 1 60px; }
}
.hours-day {
  flex: 0 0 auto; min-width: 62px;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .65rem .4rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.hd-label { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }
.hd-time { font-size: .78rem; font-weight: 600; color: var(--ink-mute); white-space: nowrap; }
.hours-day.is-today { border-color: var(--accent); background: rgba(255,198,30,.08); }
.hours-day.is-today .hd-label { color: var(--accent); }
.hours-day.is-today .hd-time { color: var(--ink); }

/* =============================================================
   12b. Quote form (cotizador → WhatsApp)
   ============================================================= */
.quote-form {
  margin-top: 2.6rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(244,244,242,.03), transparent);
}
.quote-grid { display: grid; gap: 1.2rem; }
.quote-field { display: flex; flex-direction: column; gap: .5rem; }
.quote-field--full { grid-column: 1 / -1; }
.quote-field label {
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-dim);
}
.quote-field input, .quote-field select {
  color-scheme: dark;
  width: 100%; min-width: 0;
  padding: .85rem 1rem;
  background: var(--bg-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  /* Must stay at 16px: iOS Safari force-zooms the page on focus for any
     field under 16px, and it never zooms back out. */
  font-size: 1rem;
  min-height: 46px;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.quote-field input::placeholder { color: var(--ink-dim); }
.quote-field input:focus, .quote-field select:focus {
  outline: none; border-color: var(--accent); background: var(--bg-3);
}
.quote-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
.quote-submit { margin-top: 1.6rem; }
.quote-note { margin-top: .9rem; font-size: .82rem; color: var(--ink-dim); text-align: center; }

/* =============================================================
   13. Floating WhatsApp button
   ============================================================= */
.fab {
  position: fixed; z-index: 90;
  right: calc(clamp(1rem, 3vw, 1.8rem) + env(safe-area-inset-right));
  bottom: calc(clamp(1rem, 3vw, 1.8rem) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1.1rem .85rem .85rem;
  background: var(--whatsapp); color: #06210f;
  border-radius: 999px;
  box-shadow: 0 16px 40px rgba(37, 211, 102, .35);
  transform: translateY(18px) scale(.9);
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-bounce);
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab-icon {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(6,33,15,.12);
  display: grid; place-items: center; position: relative;
}
.fab-icon svg { width: 22px; height: 22px; }
.fab-icon::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(37,211,102,.55);
  animation: fabPulse 2.2s var(--ease-soft) infinite;
}
.fab-label { font-size: .86rem; font-weight: 700; white-space: nowrap; }
@keyframes fabPulse {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 719px) { .fab-label { display: none; } .fab { padding: .85rem; } }
@media (prefers-reduced-motion: reduce) { .fab-icon::after { animation: none; } }

/* =============================================================
   14. Footer
   ============================================================= */
/* Extra bottom room on phones so the floating WhatsApp pill never sits on
   top of the last footer line. */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 3.4rem calc(2.2rem + env(safe-area-inset-bottom));
}
@media (max-width: 719px) { .footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } }
.footer-top { display: grid; gap: 2.4rem; padding-bottom: 2.6rem; border-bottom: 1px solid var(--line); }
.footer-logo img { height: 24px; width: auto; margin-bottom: 1rem; }
.footer-logo p { color: var(--ink-dim); font-size: .88rem; max-width: 34ch; }
.footer-nav h4, .footer-contact h4 {
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-dim); font-weight: 500; margin-bottom: 1rem;
}
/* Footer links are the site's secondary navigation on phones — give each row
   a real 44px touch target instead of a 26px line of text. Pointer devices
   keep the original tighter rhythm. */
.footer-nav ul, .footer-contact ul { display: grid; gap: .1rem; }
.footer-nav a, .footer-contact a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .92rem; color: var(--ink-mute);
  transition: color .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .footer-nav ul, .footer-contact ul { gap: .6rem; }
  .footer-nav a, .footer-contact a { min-height: 0; display: inline-block; }
}
.footer-nav a:hover, .footer-contact a:hover { color: var(--ink); }
.footer-bottom {
  padding-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  justify-content: space-between; font-size: .82rem; color: var(--ink-dim);
}

/* =============================================================
   15. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
}

/* Breadcrumbs are plain inline links in the markup (kept that way for the
   BreadcrumbList SEO pattern) — give them a real 44px-ish touch area
   without changing a single tag. */
nav[aria-label="Breadcrumb"] a {
  display: inline-block;
  padding-block: .5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
nav[aria-label="Breadcrumb"] { margin-top: -.5rem; }

@media (min-width: 720px) {
  :root { --nav-h: 84px; }
  .about-grid { grid-template-columns: 1.1fr .9fr; align-items: center; }

  .pillars { grid-template-columns: repeat(3, 1fr); margin-top: 3.4rem; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-gallery { grid-template-columns: repeat(3, 1fr); }
  .footer-top { grid-template-columns: 1.3fr .8fr 1fr; }
}

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }

  .catalog-grid { grid-template-columns: repeat(3, 1fr); }

  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
  .photo-gallery { grid-template-columns: repeat(4, 1fr); }

  .contact-panel { grid-template-columns: minmax(320px, .9fr) 1fr; }
  .contact-panel-main { border-bottom: none; border-right: 1px solid var(--line); }
}

@media (min-width: 1280px) {
  .hero-title { max-width: 17ch; }
  .about-copy p { font-size: 1.12rem; }
}

/* Phone in landscape: an 84px bar eats a quarter of a 360px-tall viewport,
   and a 100svh hero leaves no room for the copy. Keep the header thin and
   let the hero size to its content. */
@media (max-height: 540px) and (orientation: landscape) {
  :root { --nav-h: 56px; }
  .hero { min-height: 0; padding-block: 1rem; }
  .hero-inner { padding-block: clamp(4.5rem, 14vh, 6rem) 2.5rem; }
  .hero-strip { margin-top: 1.6rem; padding-top: 1.2rem; gap: 1.2rem 2.4rem; }
}

/* =============================================================
   16. Page transitions — deliberately NOT the home splash.
   The splash is a branded 0.7–4s intro gate; this is a ~300ms in /
   ~160ms out cross-fade meant to feel instant. Only <main> and the
   footer move: the header, the floating WhatsApp pill and the custom
   cursor stay put, so the shell reads as persistent between pages.
   Nothing here creates a lasting containing block — both keyframe
   sets end on `transform: none`.
   ============================================================= */
.route-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  main { animation: pageIn .3s var(--ease-out) both; }
  .footer { animation: pageIn .3s var(--ease-out) .05s both; }

  html.is-leaving main,
  html.is-leaving .footer { animation: pageOut .16s var(--ease-in) both; }

  html.is-leaving .route-bar { opacity: 1; animation: routeBar .45s var(--ease-out) both; }

  /* Safety net: `animation-fill-mode: both` means the entrance starts at
     opacity 0, so an engine that never runs the animation would leave the
     page blank. JS drops this class in ~0.9s (long after the 0.35s entrance)
     to hard-commit the visible state; it stops matching the moment we start
     leaving, so the exit animation still plays. */
  html.page-ready:not(.is-leaving) main,
  html.page-ready:not(.is-leaving) .footer { animation: none; opacity: 1; transform: none; }
}

@keyframes pageIn  { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes pageOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate3d(0, -6px, 0); } }
@keyframes routeBar { from { transform: scaleX(.05); } to { transform: scaleX(.92); } }

/* =============================================================
   17. Reduced motion — only genuinely intrusive effects
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-media img { transform: none; }
  .splash-bar::after { animation: none; }
}