@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;900&family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
  --bg: #121110;
  --surface: #1C1917;
  --surface-elevated: #26221E;
  --primary: #78716C;
  --foreground: #F5F1EC;
  --muted-foreground: #A8A29E;
  --accent: #EA580C;
  --accent-secondary: #D97706;
  --border: rgba(245, 241, 236, 0.08);
  --destructive: #DC2626;
}

/* scroll-behavior intentionally NOT set to smooth here: GSAP's ScrollToPlugin
   drives all anchor navigation (see main.js) and fights with the browser's
   own native smooth-scroll if both are active at once (the scroll visibly
   stutters/stalls) — GSAP owns this exclusively. */
html {
  scroll-behavior: auto;
}

body {
  background-color: var(--bg);
  color: var(--foreground);
  font-family: 'Inter', sans-serif;
  position: relative;
}

/* Subtle grain over the entire page so flat color panels don't read as
   "flat digital" — fixed so it doesn't scroll/tile-seam, low opacity,
   never intercepts clicks. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Blueprint grid: faint technical grid used as ambient background motion in
   Hero/Cobertura. Uses --border (already near-transparent) so the combined
   effect stays in the 0.03-0.05 opacity range asked for. Static end-state
   under prefers-reduced-motion via the global override below. */
.blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.6;
  animation: grid-drift 24s linear infinite;
  pointer-events: none;
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 48px 48px, 48px 48px; }
}

.font-display {
  font-family: 'Space Grotesk', sans-serif;
}

.font-mono {
  font-family: 'Fira Code', monospace;
}

/* Focus visibility for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Route (Hero seal ring) draw-on-load: default fully drawn as static
   fallback, JS overrides stroke-dasharray/offset only when motion is
   enabled. */
.route-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Hero seal: fixed (non-animated) slight tilt so it reads as a physically
   stamped mark, not a perfectly-centered vector circle. */
.seal {
  transform: rotate(-3deg);
}

.pending-flag {
  color: var(--destructive);
  border: 1px dashed var(--destructive);
  padding: 0.125rem 0.5rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.75rem;
  display: inline-block;
}

/* Shared treatment for every real photo on the site: cover/position only.
   The scrim is a plain monochromatic (--bg) gradient layered in the same
   background-image property per element (see index.html) — no color wash,
   no background-blend-mode, so the photo reads at near-full color where
   there is no text over it. */
.photo-duotone {
  background-size: cover;
  background-position: center;
}

/* Section eyebrow: number + slash separator, chrome only (not translated) */
.eyebrow-marker {
  font-family: 'Fira Code', monospace;
  color: var(--accent);
}

/* Manifest rows (Services): subtle highlight on hover so the list still
   reads as scannable/interactive without becoming a card. */
.manifest-row {
  transition: background-color 200ms ease;
}

.manifest-row:hover {
  background-color: var(--surface-elevated);
}

/* Stamp-style CTA: replaces the rectangular button everywhere (Hero, nav,
   Reviews, Contact submit) with a circular/pill seal motif — solid ring +
   a fainter dashed ring offset outward. */
.stamp-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent);
  border-radius: 9999px;
  padding: 0.9rem 2.25rem;
  font-family: 'Fira Code', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--foreground);
  background-color: transparent;
  transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
}

.stamp-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px dashed var(--accent);
  border-radius: 9999px;
  opacity: 0.45;
  pointer-events: none;
}

.stamp-btn:hover {
  background-color: var(--accent);
  color: var(--bg);
  transform: translateY(-2px);
}

.stamp-btn.stamp-btn-sm {
  padding: 0.4rem 1.1rem;
  font-size: 0.7rem;
}

.stamp-btn.stamp-btn-sm::before {
  inset: -4px;
}

/* Coverage stamp badge overlapping the map */
.stamp-badge {
  position: absolute;
  width: 7rem;
  height: 7rem;
  border-radius: 9999px;
  border: 2px solid var(--accent);
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
}

/* Fleet tabs styled as physical folder tabs: the active tab sits flush
   with the panel below it (same background, no shared border) so it
   visually reads as "the tab that's pulled forward", not an app toggle. */
.folder-tab {
  position: relative;
  top: 1px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  transition: background-color 200ms ease, color 200ms ease;
}

.folder-tab[aria-selected="true"] {
  background-color: var(--surface);
  border-color: var(--accent);
  color: var(--foreground);
  z-index: 1;
}

.folder-tab[aria-selected="false"] {
  background-color: var(--surface-elevated);
  color: var(--muted-foreground);
}

.folder-tab[aria-selected="false"]:hover {
  color: var(--foreground);
}

/* Functional document index (fixed sidebar): real navigation, not a
   decorative page counter — click scrolls, .active tracks scroll position. */
.doc-index-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-family: 'Fira Code', monospace;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  background-color: var(--bg);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.doc-index-item:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.08);
}

.doc-index-item.active {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--bg);
}

/* Custom tooltip (replaces the native browser title= bubble, which breaks
   the site's visual language): small Fira Code label on a --surface panel
   with a dashed accent border, appearing to the left of the index. */
.doc-index-item {
  position: relative;
}

.doc-index-item::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;
  background-color: var(--surface);
  border: 1px dashed var(--accent);
  color: var(--foreground);
  font-family: 'Fira Code', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}

.doc-index-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.tab-panel[hidden] {
  display: none;
}

/* Tab crossfade: main.js toggles this class before/after swapping [hidden]
   so switching Liviano/Pesado fades instead of snapping instantly. */
.tab-panel {
  transition: opacity 220ms ease, transform 220ms ease;
  opacity: 1;
  transform: translateY(0);
}

.tab-panel.tab-panel-fade {
  opacity: 0;
  transform: translateY(4px);
}

/* Photo hover zoom (Fleet): outer stays static/overflow-hidden, inner scales */
.photo-zoom-wrap {
  overflow: hidden;
}

.photo-zoom-inner {
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-zoom-wrap:hover .photo-zoom-inner {
  transform: scale(1.05);
}

/* Language selector + mobile menu button hover feedback */
.lang-btn {
  transition: background-color 200ms ease, color 200ms ease;
}

.lang-btn[aria-pressed="false"]:hover {
  color: var(--foreground);
  background-color: var(--surface-elevated);
}

#mobile-menu-btn {
  transition: color 200ms ease;
}

#mobile-menu-btn:hover {
  color: var(--accent);
}

/* Rental chips */
.chip {
  font-family: 'Fira Code', monospace;
  letter-spacing: 0.02em;
}

/* Reduced motion: kill all animation/transition, force static end states */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}