/* =========================================================================
   MG AUTOELEVADORES — Hoja de estilos principal
   Rosario, Santa Fe · +20 años de trayectoria

   Índice
   1. Tokens (color, tipografía, espaciado)
   2. Reset y base
   3. Utilidades y layout
   4. Componente "placa" (motivo de identidad — placa de chapa remachada,
      como las placas de capacidad de un autoelevador)
   5. Header / navegación
   6. Hero
   7. Trayectoria / historia
   8. Servicios
   9. Diferenciales
   10. Marcas
   11. Galería / carrusel
   12. Método de trabajo
   13. Zona de trabajo
   14. Contacto / footer
   15. Botón flotante de WhatsApp
   16. Animaciones y scroll-reveal
   17. Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   Paleta extraída directamente del isologo: azul #01589B y naranja #FF5500.
   Se suma un azul acero muy oscuro para las secciones "industriales" y un
   sistema tipográfico de tres roles: Oswald (display condensada, señalética
   industrial), Inter (texto) y IBM Plex Mono (datos: capacidades, años,
   números de placa).
   ------------------------------------------------------------------------- */
:root {
  /* Color de marca */
  --blue-900: #061F33;      /* fondo de secciones oscuras */
  --blue-800: #0A3358;      /* degradé secundario */
  --blue-700: #0D4272;
  --blue-600: #01589B;      /* azul de marca (logo) */
  --blue-500: #1B6FB8;
  --blue-100: #E4EEF6;

  --orange-600: #D64600;
  --orange-500: #FF5500;    /* naranja de marca (logo) */
  --orange-400: #FF7A38;
  --orange-100: #FFE7DA;

  --steel-900: #0B1620;     /* texto principal sobre claro */
  --steel-700: #3B4954;
  --steel-500: #5B6A75;
  --steel-300: #A6B2BB;
  --steel-200: #D9E0E5;
  --steel-100: #EEF1F3;

  --paper: #F6F7F9;
  --white: #FFFFFF;

  /* Tipografía */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  /* Espaciado */
  --space-2xs: 0.4rem;
  --space-xs: 0.8rem;
  --space-sm: 1.6rem;
  --space-md: 2.4rem;
  --space-lg: 4rem;
  --space-xl: 6.4rem;
  --space-2xl: 9.6rem;

  --container: 1240px;
  --radius-sm: 4px;
  --radius-md: 8px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-plate: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 40px -24px rgba(6,31,51,0.35);
  --shadow-card: 0 12px 32px -20px rgba(11,22,32,0.35);
}

/* -------------------------------------------------------------------------
   2. RESET Y BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 62.5%; } /* 1rem = 10px */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--steel-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

/* -------------------------------------------------------------------------
   3. UTILIDADES Y LAYOUT
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section { padding-block: var(--space-2xl); position: relative; }
.section--tight { padding-block: var(--space-xl); }
.section--dark { background: var(--blue-900); color: var(--white); }
.section--paper { background: var(--paper); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-500);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--orange-500);
}

.section-head {
  max-width: 760px;
  margin-bottom: var(--space-lg);
}
.section-head h2 {
  font-size: clamp(2.8rem, 4vw, 4.2rem);
  line-height: 1.08;
  text-transform: uppercase;
}
.section-head p {
  margin-top: var(--space-sm);
  font-size: 1.8rem;
  color: var(--steel-500);
  max-width: 62ch;
}
.section--dark .section-head p { color: var(--steel-300); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease-out), background-color 0.25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--orange-500);
  color: var(--white);
  box-shadow: 0 14px 28px -14px rgba(255,85,0,0.55);
}
.btn--primary:hover { background: var(--orange-600); }

.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.35);
  color: var(--white);
}
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

.btn--outline-dark {
  background: transparent;
  border-color: var(--blue-600);
  color: var(--blue-600);
}
.btn--outline-dark:hover { background: var(--blue-600); color: var(--white); }

.btn--sm { padding: 1.1rem 1.8rem; font-size: 1.3rem; }

.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* -------------------------------------------------------------------------
   4. COMPONENTE "PLACA"
   Motivo central de identidad: réplica estilizada de una placa de capacidad
   remachada (como las que llevan los autoelevadores), con doble marco —tal
   como el propio isologo— remaches en las esquinas y tipografía de datos
   en mono. Se usa para estadísticas, tarjetas de servicio y diferenciales.
   ------------------------------------------------------------------------- */
.plate {
  position: relative;
  background: linear-gradient(155deg, #0D3155 0%, #08233D 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  box-shadow: var(--shadow-plate);
}
.plate::before {
  /* marco interno, como el doble borde del logo */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: calc(var(--radius-md) - 2px);
  pointer-events: none;
}
.plate::after {
  /* remaches en las esquinas */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 3px, rgba(255,255,255,0.55) 40%, transparent 42%),
    radial-gradient(circle 3px, rgba(255,255,255,0.55) 40%, transparent 42%),
    radial-gradient(circle 3px, rgba(255,255,255,0.55) 40%, transparent 42%),
    radial-gradient(circle 3px, rgba(255,255,255,0.55) 40%, transparent 42%);
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
  background-repeat: no-repeat;
}
.plate--light {
  background: linear-gradient(155deg, var(--white) 0%, var(--steel-100) 100%);
  border-color: var(--steel-200);
  box-shadow: var(--shadow-card);
}
.plate--light::before { border-color: var(--steel-200); }
.plate--light::after {
  background-image:
    radial-gradient(circle 3px, rgba(11,22,32,0.18) 40%, transparent 42%),
    radial-gradient(circle 3px, rgba(11,22,32,0.18) 40%, transparent 42%),
    radial-gradient(circle 3px, rgba(11,22,32,0.18) 40%, transparent 42%),
    radial-gradient(circle 3px, rgba(11,22,32,0.18) 40%, transparent 42%);
  background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
  background-repeat: no-repeat;
}

.plate-label {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-400);
  font-weight: 600;
}
.plate--light .plate-label { color: var(--orange-600); }

/* -------------------------------------------------------------------------
   5. HEADER / NAVEGACIÓN
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--steel-200);
  transition: box-shadow .3s var(--ease-out), padding .3s var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 8px 24px -18px rgba(6,31,51,0.35); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.4rem;
  gap: var(--space-md);
}

.brand { display: flex; align-items: center; gap: 1.2rem; }
.brand img { height: 42px; width: auto; }
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 600;
}
.brand-text strong { color: var(--blue-600); font-size: 1.7rem; letter-spacing: 0.01em; }
.brand-text span {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-500);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--steel-700);
  position: relative;
  padding-block: 0.4rem;
  transition: color .2s var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--orange-500);
  transition: right .25s var(--ease-out);
}
.nav-links a:hover { color: var(--blue-600); }
.nav-links a:hover::after { right: 0; }

.nav-cta { display: flex; align-items: center; gap: 1.2rem; }
.nav-phone {
  display: none;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--steel-700);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.6rem;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--steel-900); transition: transform .25s var(--ease-out), opacity .25s var(--ease-out); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(180deg, rgba(4,18,31,0.60) 0%, rgba(4,18,31,0.72) 55%, rgba(4,18,31,0.84) 100%),
    radial-gradient(900px 480px at 86% 0%, rgba(1,88,155,0.20), transparent 62%),
    url("../images/10.webp");
  background-size: cover, cover, cover;
  background-position: center, center, center 35%;
  background-repeat: no-repeat;
  background-color: var(--blue-900);
  color: var(--white);
  overflow: hidden;
  padding-top: calc(var(--space-2xl) + 6rem);
  padding-bottom: var(--space-2xl);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(3.4rem, 4.6vw, 5.4rem);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--white);
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--orange-500);
}

.hero-copy p {
  margin-top: var(--space-sm);
  font-size: 1.8rem;
  color: var(--steel-300);
  max-width: 54ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: var(--space-md);
}

/* Franja de datos discreta, sin cajas */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.14);
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.hero-stats strong {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1;
}

.hero-stats strong span {
  color: var(--orange-400);
}

.hero-stat-lbl {
  font-size: 1.15rem;
  color: var(--steel-300);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.hero-visual {
  position: relative;
}

.hero-visual .plate {
  padding: var(--space-md);
}

.hero-visual .plate-label {
  margin-bottom: 1.2rem;
  display: block;
}

.hero-visual h3 {
  color: var(--white);
  font-size: 2.2rem;
  text-transform: uppercase;
}

.hero-visual .cap-list {
  display: flex;
  gap: 1rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}

.cap-chip {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--white);
  background: rgba(255,85,0,0.14);
  border: 1px solid rgba(255,85,0,0.4);
  border-radius: 3px;
  padding: 0.6rem 1.1rem;
}

.hero-visual-note {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: var(--steel-300);
  font-size: 1.4rem;
  line-height: 1.6;
}

/* -------------------------------------------------------------------------
   7. TRAYECTORIA
   ------------------------------------------------------------------------- */
.trayectoria-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-xl);
  align-items: start;
}
.trayectoria-copy p { font-size: 1.8rem; color: var(--steel-700); margin-bottom: var(--space-sm); }
.trayectoria-copy p:last-of-type { margin-bottom: 0; }

.counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: var(--space-lg);
}
.counter { text-align: left; }
.counter .count {
  font-family: var(--font-mono);
  font-size: 3.6rem;
  font-weight: 600;
  color: var(--blue-600);
  line-height: 1;
}
.counter .count .plus { color: var(--orange-500); }
.counter .lbl {
  margin-top: 0.6rem;
  font-size: 1.3rem;
  color: var(--steel-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.timeline { position: relative; padding-left: 2.8rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(var(--blue-600), var(--orange-500));
}
.timeline-item { position: relative; padding-bottom: var(--space-lg); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.8rem;
  top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue-600);
}
.timeline-item.is-founding::before { border-color: var(--orange-500); }
.timeline-item .tl-tag {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-600);
  font-weight: 600;
}
.timeline-item h4 { font-size: 2rem; margin-top: 0.4rem; color: var(--steel-900); text-transform: uppercase; }
.timeline-item p { margin-top: 0.6rem; color: var(--steel-500); font-size: 1.55rem; max-width: 46ch; }

/* -------------------------------------------------------------------------
   8. SERVICIOS
   ------------------------------------------------------------------------- */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.servicio-card {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  color: var(--white);
}
.servicio-card .icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  background: rgba(255,85,0,0.16);
  border: 1px solid rgba(255,85,0,0.4);
  border-radius: var(--radius-sm);
}
.servicio-card .icon svg { width: 26px; height: 26px; stroke: var(--orange-400); }
.servicio-card h3 { font-size: 2.3rem; text-transform: uppercase; color: var(--white); }
.servicio-card .desc { color: var(--steel-300); font-size: 1.5rem; }
.servicio-card ul { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.4rem; }
.servicio-card li {
  font-size: 1.4rem;
  color: var(--steel-200);
  padding-left: 1.6rem;
  position: relative;
}
.servicio-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7rem;
  width: 8px; height: 2px;
  background: var(--orange-500);
}
.servicio-card .btn { margin-top: auto; align-self: flex-start; }

/* -------------------------------------------------------------------------
   9. DIFERENCIALES
   ------------------------------------------------------------------------- */
.dif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.dif-item {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 2.2rem;
}
.dif-item .icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: var(--blue-100);
  border-radius: var(--radius-sm);
}
.dif-item .icon svg { width: 22px; height: 22px; stroke: var(--blue-600); }
.dif-item h4 { font-size: 1.6rem; text-transform: uppercase; color: var(--steel-900); margin-bottom: 0.4rem; }
.dif-item p { font-size: 1.4rem; color: var(--steel-500); }

/* -------------------------------------------------------------------------
   10. MARCAS
   ------------------------------------------------------------------------- */
.marcas-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}
.marca-badge {
  font-family: var(--font-display);
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--steel-700);
  border: 1.5px solid var(--steel-200);
  border-radius: var(--radius-sm);
  padding: 1.6rem 2.8rem;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out);
}
.marca-badge:hover { border-color: var(--orange-500); color: var(--blue-600); transform: translateY(-3px); }
.marca-badge.is-featured {
  border-color: var(--orange-500);
  color: var(--blue-600);
  background: var(--orange-100);
}

/* -------------------------------------------------------------------------
   11. GALERÍA / CARRUSEL
   ------------------------------------------------------------------------- */
.gallery-wrap { position: relative; }
.gallery-track {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide {
  flex: 0 0 auto;
  height: 460px;
  max-width: 88vw;
  scroll-snap-align: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--steel-200);
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-slide img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  transition: transform .5s var(--ease-out);
}
.gallery-slide:hover img { transform: scale(1.03); }

.gallery-nav {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: var(--space-md);
}
.gallery-arrow {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--steel-200);
  background: var(--white);
  display: grid;
  place-items: center;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.gallery-arrow svg { width: 20px; height: 20px; stroke: var(--steel-900); }
.gallery-arrow:hover { background: var(--blue-600); border-color: var(--blue-600); transform: scale(1.05); }
.gallery-arrow:hover svg { stroke: var(--white); }
.gallery-arrow:disabled { opacity: 0.35; pointer-events: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4,15,25,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-md);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--white);
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .2s var(--ease-out);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.2); }
.lightbox-close { top: var(--space-md); right: var(--space-md); }
.lightbox-prev { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg { width: 22px; height: 22px; stroke: currentColor; }

/* -------------------------------------------------------------------------
   12. MÉTODO DE TRABAJO
   ------------------------------------------------------------------------- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  position: relative;
}
.flow-step { position: relative; padding-top: 2.4rem; }
.flow-step .step-index {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--orange-500);
  letter-spacing: 0.1em;
}
.flow-step h4 { font-size: 1.9rem; text-transform: uppercase; margin-top: 0.8rem; color: var(--steel-900); }
.flow-step p { margin-top: 0.6rem; color: var(--steel-500); font-size: 1.45rem; }
.flow-step::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--steel-200);
}
.flow-step::after {
  content: "";
  position: absolute;
  top: -4px; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--orange-500);
}

/* -------------------------------------------------------------------------
   13. ZONA DE TRABAJO
   ------------------------------------------------------------------------- */
.zona-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.zona-list { display: flex; flex-direction: column; gap: 1.6rem; margin-top: var(--space-md); }
.zona-list .zrow {
  display: flex;
  gap: 1.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--steel-200);
}
.zona-list .zrow:last-child { border-bottom: none; padding-bottom: 0; }
.zona-list .zlabel {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--orange-600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  min-width: 140px;
}
.zona-list .zvalue { color: var(--steel-700); font-size: 1.55rem; }

.zona-visual { position: relative; aspect-ratio: 1/1; max-width: 460px; margin-inline: auto; }
.radar {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(1,88,155,0.06), transparent 70%);
  border: 1px dashed var(--steel-200);
  display: grid;
  place-items: center;
}
.radar::before, .radar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--steel-200);
}
.radar::before { inset: 16%; }
.radar::after { inset: 34%; }
.radar-core {
  position: relative;
  z-index: 2;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: var(--blue-600);
  color: var(--white);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 20px 44px -18px rgba(1,88,155,0.55);
}
.radar-ping {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 6px rgba(255,85,0,0.18);
}

/* -------------------------------------------------------------------------
   14. CONTACTO / FOOTER
   ------------------------------------------------------------------------- */
.contacto-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
}
.contacto-copy h2 { color: var(--white); }
.contacto-actions { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: var(--space-md); }

.contact-plate { padding: var(--space-md); }

.contact-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin-top: 1.8rem;
}
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
a.contact-row:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-2px);
}
.contact-row .icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,85,0,0.14);
  border: 1px solid rgba(255,85,0,0.35);
}
.contact-row .icon svg { width: 18px; height: 18px; stroke: var(--orange-400); }
.contact-row .icon--wa { background: rgba(33,192,99,0.16); border-color: rgba(33,192,99,0.4); }
.contact-row .icon--wa svg { stroke: #3DDC84; }
.contact-row .icon--mail { background: rgba(27,111,184,0.22); border-color: rgba(27,111,184,0.5); }
.contact-row .icon--mail svg { stroke: var(--blue-500); }
.contact-row .icon--pin { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); }
.contact-row .icon--pin svg { stroke: var(--steel-200); }

.contact-row-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.contact-row .value {
  color: var(--white);
  font-size: 1.4rem;
  word-break: break-word;
}
.contact-row .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-300);
}

.contact-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.contact-social .lbl {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-300);
}
.contact-social-links { display: flex; gap: 1rem; }
.contact-social-links a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.contact-social-links a svg { width: 16px; height: 16px; stroke: var(--white); }
.contact-social-links a:hover { background: var(--orange-500); border-color: var(--orange-500); }

.site-footer {
  position: relative;
  background: #04121F;
  color: var(--steel-300);
  padding-block: var(--space-lg) var(--space-md);
}
.site-footer::before {
  /* línea de acento — misma lógica cromática que la ficha de datos */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-600), var(--orange-500) 60%, var(--orange-500));
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand { display: flex; align-items: center; gap: 1.4rem; }
.footer-brand img {
  height: 46px;
  width: auto;
  border-radius: 4px;
  background: var(--white);
  padding: 5px 9px;
}
.footer-brand-text strong { display: block; color: var(--white); font-family: var(--font-display); font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.01em; }
.footer-brand-text span { font-family: var(--font-mono); font-size: 1.1rem; color: var(--steel-300); }

.footer-social { display: flex; gap: 1rem; }
.footer-social a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.footer-social a svg { width: 18px; height: 18px; stroke: var(--white); }
.footer-social a:hover { background: var(--orange-500); border-color: var(--orange-500); transform: translateY(-2px); }

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
}
.footer-col h5 { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-400); margin-bottom: 1.4rem; }
.footer-col a, .footer-col p {
  display: block;
  font-size: 1.4rem;
  color: var(--steel-300);
  margin-bottom: 1rem;
  transition: color .2s var(--ease-out);
}
.footer-col a:hover { color: var(--white); }
.footer-col p { color: var(--steel-500); margin-bottom: 0; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 1.25rem;
  color: var(--steel-500);
}
.footer-top-link {
  color: var(--steel-300);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  transition: color .2s var(--ease-out);
}
.footer-top-link:hover { color: var(--orange-400); }

/* -------------------------------------------------------------------------
   15. BOTÓN FLOTANTE DE WHATSAPP
   ------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #21C063;
  color: var(--white);
  padding: 1.4rem 1.8rem;
  border-radius: 50px;
  box-shadow: 0 16px 32px -12px rgba(33,192,99,0.55);
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.wa-float:hover { transform: translateY(-3px) scale(1.02); }
.wa-float svg { width: 24px; height: 24px; flex-shrink: 0; }
.wa-float .wa-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50px;
  border: 2px solid #21C063;
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* -------------------------------------------------------------------------
   16. ANIMACIONES / SCROLL REVEAL
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

/* -------------------------------------------------------------------------
   17. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .nav-phone { display: block; }
}

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 620px; }
  .trayectoria-grid { grid-template-columns: 1fr; }
  .servicios-grid { grid-template-columns: 1fr 1fr; }
  .dif-grid { grid-template-columns: 1fr 1fr; }
  .contacto-grid { grid-template-columns: 1fr; }
  .zona-grid { grid-template-columns: 1fr; }
  .zona-visual { order: -1; max-width: 320px; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: var(--space-lg); }
}

@media (max-width: 760px) {
  html { font-size: 58%; }
  .nav-links {
    position: fixed;
    inset: 68px 0 0 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-md);
    transform: translateX(100%);
    transition: transform .3s var(--ease-out);
  }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a { font-size: 1.9rem; }
  .nav-toggle { display: flex; }

  .hero-stats { gap: var(--space-md); }
  .counters { grid-template-columns: 1fr; gap: 2rem; }
  .servicios-grid { grid-template-columns: 1fr; }
  .dif-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .footer-links { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .wa-float span { display: none; }
  .wa-float { padding: 1.5rem; border-radius: 50%; }
  .gallery-slide { height: 300px; max-width: 92vw; }
  .contact-rows { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero-stats { flex-direction: column; gap: 1.4rem; }
}


/* -------------------------------------------------------------------------
   FIX: menú mobile recortado por el backdrop-filter del header
   backdrop-filter convierte a .site-header en containing block de los
   position:fixed. Por eso "bottom:0" del inset se calculaba relativo al
   alto del header (~68px) y no al viewport, dejando el panel del menú
   comprimido a una franja mínima sin fondo real detrás de los links.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .nav-links {
    top: 68px;
    left: 0;
    right: 0;
    bottom: auto;
    height: calc(100vh - 68px);
    height: calc(100svh - 68px); /* mejor soporte en mobile con barras de UI */
    overflow-y: auto;
    z-index: 95;
  }
}