/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* [v1] background: rgba(255,255,255,0.92); backdrop-filter: saturate(180%) blur(10px); */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.2s ease;
}
/* Sombra al superar 8 px de scroll (clase puesta desde js/main.js). */
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.logo {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.logo img { height: 53px; width: auto; } /* [v1] 48px */
.logo__light { display: none; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

.main-nav__list {
  display: flex;
  gap: var(--space-5);
}

.main-nav__list a {
  font-family: var(--font-base); /* [v2] var(--font-heading) */
  /* [v1] font-weight: 300; letter-spacing: 0.06em; */
  /* [v4] Mayúsculas/minúsculas: font-size var(--fs-sm); letter-spacing 0; sin text-transform. */
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.main-nav__list a:hover { color: var(--color-primary); border-color: var(--color-accent); }
/* Enlace de la sección visible (IntersectionObserver en js/main.js). */
.main-nav__list a.is-current { color: var(--color-primary); border-color: var(--color-accent); }

/* [v4] El botón "Cotizar ahora" del menú iba en mayúsculas/minúsculas. */
.main-nav__cta {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-xs);
}

/* [v1] .main-nav__cta { background: var(--color-step); }  (coral C87D71)
        .main-nav__cta:hover { background: var(--color-step-dark); } (B46B61)
   Ahora usa el .btn-primary verde de marca sin sobrescritura. */

.nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  padding: var(--space-2);
}
.nav-toggle .icon { width: 28px; height: 28px; color: var(--color-primary); }
.nav-toggle__close { display: none; }

/* ===== Hero ===== */
/* Hero + barra de confianza ocupan la pantalla bajo el header (--header-h lo pone
   js/hero-video.js), así la barra azul se ve mientras corre el video. */
.hero-stage {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h, 72px));
}
.hero-stage .hero { flex: 1 0 auto; min-height: 0; }

/* [v1] Hero anterior: alineado a la izquierda, min-height 680px, foto vehiculos-efecto.jpg con
   object-position 72% center, cambio a laptop-volando.jpg (.hero__bg::after) al pasar el cursor por
   la tarjeta de renting, velo a 98deg que solo oscurecía la mitad izquierda, .hero__content de 560px,
   título en dos piezas (.hero__title-lead 24–36px peso 700 + .hero__title-flex "FLEX" en Roboto 900
   italic 60–112px color --color-accent-on-dark), tarjetas de vidrio (rgba blanco .09 + backdrop-filter
   blur 6px) en fila con icono a la izquierda y max-width 520px. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: clamp(560px, 78vh, 720px);
  padding: var(--space-8) 0;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* [v7] Velo simétrico en un solo degradado (0.40 bordes · 0.80 al 28 % · 0.90 al centro) y mitades
   de rgba .25 que se aclaraban al hover: el cambio apenas se notaba. Ahora el velo vive en cada
   mitad (para poder retirarlo de un solo lado) y ::after deja solo una base ligera. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(12, 42, 59, 0.25);
}
/* Sin foto 50/50 todavía: fondo --color-primary liso, sin velo ni mitades. */
.hero--sin-foto::after,
.hero--sin-foto .hero__half { display: none; }

/* Mitad activa: al pasar el cursor o enfocar una tarjeta, su mitad se ilumina en degradé:
   hacia el centro el velo se mantiene y hacia el borde exterior casi desaparece.
   Cada mitad tiene dos capas que se cruzan: ::before (velo normal) y ::after (velo iluminado).
   [v8] Toda la mitad bajaba a opacity .12 y el centro también se aclaraba. */
.hero__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
}
.hero__half::before,
.hero__half::after {
  content: "";
  position: absolute;
  inset: 0;
  transition: opacity 0.45s ease;
}
.hero__half::after { opacity: 0; }
.hero__half--leasing { left: 0; }
.hero__half--renting { right: 0; }
/* Valores en espejo respecto al centro (90deg en la izquierda, 270deg en la derecha). */
.hero__half--leasing::before {
  background: linear-gradient(90deg, rgba(12, 42, 59, 0.55) 0%, rgba(12, 42, 59, 0.85) 56%, rgba(12, 42, 59, 0.92) 100%);
}
.hero__half--renting::before {
  background: linear-gradient(270deg, rgba(12, 42, 59, 0.55) 0%, rgba(12, 42, 59, 0.85) 56%, rgba(12, 42, 59, 0.92) 100%);
}
.hero__half--leasing::after {
  background: linear-gradient(90deg, rgba(12, 42, 59, 0) 0%, rgba(12, 42, 59, 0.10) 30%, rgba(12, 42, 59, 0.55) 70%, rgba(12, 42, 59, 0.92) 100%);
}
.hero__half--renting::after {
  background: linear-gradient(270deg, rgba(12, 42, 59, 0) 0%, rgba(12, 42, 59, 0.10) 30%, rgba(12, 42, 59, 0.55) 70%, rgba(12, 42, 59, 0.92) 100%);
}
.hero:has([data-preselect="leasing"]:is(:hover, :focus-visible)) .hero__half--leasing::before,
.hero:has([data-preselect="renting"]:is(:hover, :focus-visible)) .hero__half--renting::before { opacity: 0; }
.hero:has([data-preselect="leasing"]:is(:hover, :focus-visible)) .hero__half--leasing::after,
.hero:has([data-preselect="renting"]:is(:hover, :focus-visible)) .hero__half--renting::after { opacity: 1; }
/* Mientras corre la secuencia del video, el hero no responde a más clics. */
.hero.is-playing .hero__content { pointer-events: none; }

.hero__inner { position: relative; }
.hero__content {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title {
  margin: var(--space-2) 0 0;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em; /* [v2] -0.02em (Inter) · [v3] -0.01em (Source Serif 4) */
}

.hero__sub {
  max-width: 56ch;
  margin: var(--space-4) auto 0;
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.85);
}

.hero__picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  width: 100%;
  max-width: 640px;
  margin: var(--space-6) auto 0;
}

.picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  min-height: 150px;
  background: rgba(12, 42, 59, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  padding: var(--space-5) var(--space-4);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.picker-card:hover,
.picker-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-accent-on-dark);
}

.picker-card__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.picker-card__label { display: block; font-weight: 600; font-size: var(--fs-base); color: var(--color-text-inverse); }
.picker-card__hint { display: block; margin-top: var(--space-1); font-size: var(--fs-sm); font-weight: 500; color: var(--color-accent-on-dark); }

.hero__link {
  margin-top: var(--space-5);
  color: #fff;
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero__link:hover { color: var(--color-accent-on-dark); }

/* ===== Barra de confianza ===== */
.trust-bar {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-5) 0;
}

/* [v1] Frase a la izquierda (max-width 30ch) e insignias a la derecha (justify-content: space-between). */
.trust-bar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.trust-bar__claim {
  font-weight: 500;
  font-size: var(--fs-sm);
}

.trust-bar__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
}
.trust-badge .icon { width: 26px; height: 26px; color: var(--color-accent-on-dark); }

/* ===== Quiénes somos ===== */
/* [v1] .section--about tenía padding 0 y la foto laptop-fondo.png a sangre a la izquierda
   (.about-media, ~46 % del ancho, con velo blanco a la derecha); el texto ocupaba la columna 2
   de .about-grid (1fr 1.05fr, min-height 560px).
   [v1] .section--photo: fondos fotográficos con background-attachment: fixed y velo navy .78
   (.section--compare → diferencias-blur.jpg, .section--cases → gente-en-taller-blur.jpg), con
   textos en blanco.
   [v1] .glass-card: vidrio translúcido (gradiente blanco .72–.62, backdrop-filter blur 16px,
   borde blanco .7, sombra 0 22px 45px). */
.section--about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-text-inverse);
  background: var(--color-primary); /* respaldo mientras carga la foto */
  padding: calc(var(--space-8) * 1.4) 0;
}

/* Capa de la foto: más alta que la sección para que el parallax
   (translateY desde js/main.js) nunca deje bordes vacíos. */
.about-bg {
  position: absolute;
  inset: -20% 0;
  z-index: -2;
}
.about-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* Velo azul marino: más denso a la izquierda, donde va el texto. */
.section--about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(7, 25, 37, 0.92) 0%,
    rgba(12, 42, 59, 0.82) 45%,
    rgba(12, 42, 59, 0.55) 100%);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* [v3] h2 en --color-primary y párrafos en --color-text-muted sobre fondo blanco. */
.about-text h2 { line-height: 1.15; color: var(--color-text-inverse); }

.about-text p {
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--fs-base);
  text-align: justify; /* [v1] alineado a la izquierda */
  hyphens: auto; /* evita espacios muy abiertos al justificar (usa lang="es-PE") */
}
.about-text strong { color: var(--color-text-inverse); }

.about-text .btn { align-self: flex-start; margin-top: var(--space-2); }

/* Ficha institucional en vidrio esmerilado sobre la foto.
   [v3] Fondo --color-bg sólido, borde --color-border, sombra --shadow-sm, textos oscuros. */
.about-facts {
  margin: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 24px 48px rgba(4, 18, 28, 0.35);
  padding: var(--space-2) var(--space-5);
}
/* Sin soporte de backdrop-filter: vidrio más opaco para mantener el contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .about-facts { background: rgba(12, 42, 59, 0.88); }
}
.about-fact {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.about-fact:first-child { border-top: 0; }
.about-fact dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent-on-dark);
}
.about-fact dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-inverse);
}

/* ===== Soluciones ===== */
/* [v5] Comparador anterior: .compare en grid 1fr auto 1fr con .compare__divider (línea vertical
   de 1 px) entre dos .compare-card blancas (padding space-5, borde, radio 8 px, sombra sm,
   hover translateY(-2px) y borde verde .5; .is-highlighted con borde verde 1,5 s), cabecera
   con icono 58 px + h3 20 px + bajada, tabla .compare-card__specs y botón a ancho completo. */
/* [v6] Versión anterior: .solutions en grid de 2 columnas (max-width 960px, dentro del contenedor)
   con .solution-stack (dos tarjetas en la misma celda; la de atrás --color-bg-alt, desplazada
   translate(18px, -78px) y z-index 1) y .solution-card blanca con borde, radio 8 px, sombra sm,
   min-height 248px, icono en caja verde de 48 px, etiqueta, título 20 px, texto y "Ver detalle →". */

/* Tres tarjetas a sangre: fuera del contenedor, sin separación lateral. */
.section--solutions { padding-bottom: var(--space-7); }
.solutions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--color-bg);
}

.solution-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* [v7] min-height: clamp(420px, 38vw, 560px); (más altas que anchas)
     Cuadradas: si el texto no cabe (tablet estrecha), la tarjeta crece lo justo. */
  aspect-ratio: 1 / 1;
  padding: var(--space-6);
  overflow: hidden;
  color: var(--color-text-inverse);
  background: var(--color-primary);
}

.solution-card__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Velo: transparente arriba para que se vea la foto, oscuro abajo donde va el texto. */
.solution-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(7, 25, 37, 0.10) 0%,
    rgba(7, 25, 37, 0.45) 35%,
    rgba(7, 25, 37, 0.80) 60%,
    rgba(7, 25, 37, 0.94) 100%);
  transition: background 0.3s ease;
}
.solution-card:hover::after,
.solution-card:focus-visible::after {
  background: linear-gradient(180deg,
    rgba(7, 25, 37, 0.20) 0%,
    rgba(12, 42, 59, 0.55) 40%,
    rgba(7, 25, 37, 0.95) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .solution-card:hover .solution-card__bg,
  .solution-card:focus-visible .solution-card__bg { transform: scale(1.05); }
}
.solution-card:focus-visible { outline: 3px solid var(--color-accent-on-dark); outline-offset: -3px; }

.solution-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 34ch;
}
.solution-card__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-on-dark);
}
.solution-card__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  color: var(--color-text-inverse);
}
.solution-card__text { font-size: var(--fs-base); color: rgba(255, 255, 255, 0.85); }
.solution-card__more {
  margin-top: var(--space-3);
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--color-accent-on-dark);
}

/* Flecha: en escritorio acompaña al "Ver detalle"; en móvil queda sola a la derecha. */
.solution-card__arrow {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  font-size: 1.1rem;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.solution-card:hover .solution-card__arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateX(4px);
}

/* ===== Detalle de productos ===== */
/* Las dos secciones de leasing comparten fondo y se separan con una línea. */
.product-group { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); }
.product-group .product + .product { border-top: 1px solid var(--color-border); }

.product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-7);
  align-items: center;
}
/* [v7] Solo se cambiaba el orden y la ficha caía en la columna ancha (1.15fr):
   también se invierten las columnas para que la ficha mida lo mismo en los tres productos. */
.product--reverse .product__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.product--reverse .product__intro { order: 2; }

.product__intro h2 { margin-top: var(--space-1); }
.product__lead {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
}

.product__points {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
}
.product__points li { display: flex; gap: var(--space-3); align-items: flex-start; }
.product__points .icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--color-accent);
}

.product__ctas { margin-top: var(--space-6); }

.product__sheet {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.product__sheet-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.product__sheet-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--color-primary);
}
.product__specs { margin: 0; }
.product__ideal {
  margin-top: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.product__ideal strong { color: var(--color-primary); }

/* Piezas del comparador que se reutilizan: icono, filas de la ficha y nota al pie. */
.compare-card__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  background: rgba(var(--color-accent-rgb), 0.14);
  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
  border-radius: var(--radius-sm);
}
.compare-card__icon img { width: 40px; height: 40px; }

.compare-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.compare-spec dt {
  font-size: var(--fs-xs);
  /* [v1] color #2f4356 (compensaba el vidrio translúcido). */
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.compare-spec dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
}

.compare__footnote {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--fs-sm);
  /* [v1] color blanco .78 y enlace en --color-accent-on-dark sobre la foto. */
  color: var(--color-text-muted);
}
.compare__footnote a {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}
.compare__footnote a:hover { color: var(--color-accent-dark); }

/* Aparición progresiva al entrar en pantalla (se anula si el sistema
   pide menos movimiento; ver [data-reveal] en js/main.js).
   [v1] translateY(18px), 0.5s, escalonado de 90 ms por elemento. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ===== Cómo funciona ===== */
/* [v2] Versión horizontal retirada: .process en grid de 3 columnas con línea superior
   (::before gris + ::after verde con scaleX 0→1 en 600 ms), .process-step__num de 14 px. */
.section--process {
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border);
}

.process {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

/* La columna izquierda queda fija mientras se recorren los pasos. */
.process__stage {
  position: sticky;
  top: 120px;
  display: grid;
}

.process-slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.process-slide.is-active {
  opacity: 1;
  transform: none;
}

/* El número monta sobre la ilustración, apoyado en su borde izquierdo. */
.process-slide__num {
  position: absolute;
  top: 12%;
  left: 0;
  z-index: 2;
  /* [v1] Roboto Black Italic (--font-display, peso 900): esa fuente ya no se carga.
     [v2] Inter / peso 700. [v3] Source Serif 4 / peso 500. */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(8rem, 15vw, 14rem);
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  text-shadow: 0 6px 24px rgba(245, 249, 252, 0.9);
}

.process-slide__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 78%;
  height: auto;
  margin-left: auto;
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: 10rem;
  padding: var(--space-7) 0 16rem;
}

.process-step {
  position: relative;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-border);
  opacity: 0.55;
  transition: opacity 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

/* El riel se va tiñendo hasta el paso actual, como una barra de progreso. */
.process-step.is-passed { border-color: var(--color-accent); }

.process-step.is-active {
  opacity: 1;
  transform: translateX(6px);
}

/* Punto que marca el paso en curso sobre el riel. */
.process-step.is-active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0.5em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px var(--color-bg-soft);
}

.process-step h3 {
  font-size: clamp(1.625rem, 2.7vw, 2.5rem);
  line-height: 1.18;
  /* [v1] color: var(--color-step) (coral, eliminado del sistema). */
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.process-step p {
  color: var(--color-text-muted);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.65;
  max-width: 42ch;
}

/* Número e ilustración por paso: solo en móvil, donde no hay columna fija. */
.process-step__num,
.process-step__img { display: none; }

/* ===== Cotizador ===== */
.quotation {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 780px;
  margin: 0 auto;
  overflow: hidden;
}

.quotation__progress {
  display: flex;
  background: var(--color-bg-soft);
  padding: var(--space-4) var(--space-6);
  gap: var(--space-3);
}

.quotation__progress-step {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-sm); /* [v1] var(--radius-pill) */
  background: var(--color-border);
}
.quotation__progress-step.is-active,
.quotation__progress-step.is-done { background: var(--color-accent); }

.quotation__body { padding: var(--space-6); }

.quotation__step { display: none; }
.quotation__step.is-active { display: block; animation: fadeIn 0.25s ease; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.quotation__step h3 {
  font-size: 1.25rem; /* [v1] var(--fs-xl) */
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.quotation__step-hint { color: var(--color-text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-5); }

.product-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.product-choice input { position: absolute; opacity: 0; }

.product-choice label {
  display: block;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.product-choice__icon { width: 44px; height: 44px; margin-bottom: var(--space-2); }
.product-choice label span.title { font-weight: 700; color: var(--color-primary); display: block; }
.product-choice label span.desc { font-size: var(--fs-xs); color: var(--color-text-muted); }
.product-choice input:checked + label {
  border-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.08);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-field[hidden] { display: none !important; }
.form-field--full { grid-column: 1 / -1; }

.form-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }

.form-field input[type="text"],
.form-field input[type="number"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  background: var(--color-bg-soft);
  font-size: var(--fs-sm);
}
.form-field input:focus, .form-field select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-bg);
}

.ruc-control { position: relative; }
.ruc-control input { width: 100%; padding-right: 2.6rem; }
.ruc-status {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  pointer-events: none;
}
.ruc-status__ok,
.ruc-status__bad { display: none; }
.ruc-status .icon { width: 1.25rem; height: 1.25rem; display: block; }
.ruc-control.is-ok .ruc-status__ok { display: block; color: var(--color-accent); }
.ruc-control.is-bad .ruc-status__bad { display: block; color: var(--color-danger); }
.ruc-control.is-ok input { border-color: var(--color-accent); }
.ruc-control.is-bad input { border-color: var(--color-danger); background: var(--color-danger-bg); }

#lead-form .form-grid { gap: 0.65rem 1rem; }
#lead-form .form-field { margin-bottom: 0; gap: 0.3rem; }
#lead-form .field-error { min-height: 0; }
#lead-form .field-error:empty { display: none; }
#lead-form .consent-field { margin-top: var(--space-3); }

.form-field input.razon-social {
  color: var(--color-primary);
  font-weight: 600;
  cursor: default;
}
.form-field input.razon-social::placeholder { color: var(--color-text-muted); font-weight: 400; }
.form-field input.razon-social.is-loading::placeholder { color: var(--color-primary-light); font-weight: 500; }

.form-field .field-error { font-size: var(--fs-xs); color: var(--color-danger); min-height: 1em; }
.form-field.has-error input,
.form-field.has-error select { border-color: var(--color-danger); background: var(--color-danger-bg); }

.range-field { display: flex; align-items: center; gap: var(--space-3); }
.range-field output { font-weight: 700; color: var(--color-primary); min-width: 3.5ch; text-align: right; }

.plazo-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.plazo-options input { position: absolute; opacity: 0; }
.plazo-options label {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); /* [v1] var(--radius-pill) */
  padding: 0.5rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-muted);
}
.plazo-options input:checked + label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.quotation__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-6);
  gap: var(--space-3);
}

.quotation__result {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.quotation__result-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 700; }
.quotation__result-value { font-size: var(--fs-2xl); font-weight: 700; /* [v1] 900 */ color: var(--color-primary); margin: var(--space-1) 0; }
.quotation__result-note { font-size: var(--fs-xs); color: var(--color-text-muted); }

.consent-field {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}
.consent-field input { margin-top: 0.15rem; flex-shrink: 0; }
.consent-field label {
  flex: 1;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-muted);
}

.quotation__success, .quotation__error {
  display: none;
  text-align: center;
  padding: var(--space-6);
}
.quotation__success.is-active, .quotation__error.is-active { display: block; }
.quotation__success .icon { width: 52px; height: 52px; color: var(--color-accent-dark); margin: 0 auto var(--space-4); }
.quotation__success h3 { color: var(--color-primary); margin-bottom: var(--space-2); }

.advisor-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-primary-light);
  margin-top: var(--space-4);
  border: 0;
  background: none;
}
.advisor-link:hover { color: var(--color-accent-dark); }

/* ===== Casos de uso ===== */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* [v1] .case-card usaba .glass-card sobre la foto desenfocada. */
.case-card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.case-card:hover { transform: translateY(-2px); border-color: rgba(var(--color-accent-rgb), 0.5); }

/* Única píldora de la página: etiqueta Leasing / Renting. [v1] border-radius: var(--radius-sm) */
.case-card__tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-accent-dark);
  background: rgba(var(--color-accent-rgb), 0.12);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.75rem;
}

.case-card h3 { font-size: 1.25rem; color: var(--color-primary); }
.case-card p { font-size: var(--fs-sm); color: var(--color-text-muted); }
/* [v1] .case-card__example: leyenda en itálica "Ejemplo ilustrativo…" con línea superior. */

/* ===== Clientes ===== */
/* Nombres como texto hasta tener los logos; .client-card admite un <img> en su lugar. */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}
.client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.client-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--color-primary);
}
.client-card img { max-height: 56px; width: auto; }

/* ===== Por qué Assetx Flex ===== */
.why-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.why-card {
  /* [v1] background: rgba(255,255,255,0.06); border-radius: var(--radius-lg) (22px) */
  background: var(--color-primary-light);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.why-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.32); }

.why-card .icon { width: 30px; height: 30px; color: var(--color-accent-on-dark); margin-bottom: var(--space-3); }
.why-card h3 { font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--space-2); }
.why-card p { font-size: var(--fs-sm); color: rgba(255,255,255,0.78); }

/* ===== FAQ ===== */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
}

.faq-item__question {
  font-weight: 600;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--color-primary);
}

.faq-item__question .icon { transition: transform 0.2s ease; color: var(--color-text-muted); flex-shrink: 0; }
.faq-item.is-open .faq-item__question .icon { transform: rotate(180deg); }

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-item__answer-inner { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); font-size: var(--fs-sm); }
.faq-item.is-open .faq-item__answer { max-height: 400px; }

/* ===== CTA final ===== */
.cta-final {
  /* [v1] background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); radio 22px */
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
}

.cta-final h2 { color: var(--color-text-inverse); }
.cta-final p { color: rgba(255,255,255,0.82); margin-top: var(--space-3); font-size: var(--fs-lg); }
.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cta-final .cta-group { justify-content: center; margin-top: var(--space-6); }

/* ===== Footer ===== */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.75);
  padding: var(--space-7) 0 var(--space-5);
  font-size: var(--fs-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-brand img { height: 53px; /* [v1] 32px; ahora igual al header */ width: auto; margin-bottom: var(--space-3); }
.footer-brand p { max-width: 34ch; color: rgba(255,255,255,0.6); font-size: var(--fs-xs); }

.footer-col h4 {
  font-family: var(--font-base); /* rótulo pequeño en mayúsculas: se lee mejor sin serif */
  color: #fff;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a:hover { color: var(--color-accent); }

.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.footer-social .icon { width: 16px; height: 16px; }

/* Pertenencia al Grupo Kairum: enlaza a kairum.pe */
.footer-group {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
}
.footer-brand .footer-group img { height: 26px; width: auto; aspect-ratio: 3 / 1; object-fit: contain; margin-bottom: 0; opacity: 0.7; transition: opacity 0.2s; }
.footer-group:hover { color: var(--color-accent); }
.footer-group:hover img { opacity: 1; }

.footer-legal {
  padding-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.5);
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Botón flotante WhatsApp mobile */
.whatsapp-float {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform 0.15s ease, background 0.15s ease;
}
.whatsapp-float:hover { background: #1fb85a; transform: translateY(-2px); }
.whatsapp-float .icon { width: 28px; height: 28px; color: #06340f; }

/* ===== Páginas legales (Política de privacidad, Términos y condiciones) ===== */
.legal-page { padding: var(--space-7) 0 var(--space-8); background: var(--color-bg-soft); }
.legal-page__inner { max-width: 820px; }
.legal-page__back {
  display: inline-block;
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-accent-dark);
}
.legal-page__back:hover { text-decoration: underline; }
.legal-page h1 {
  font-size: clamp(1.9rem, 3.6vw, var(--fs-4xl));
  line-height: 1.15;
  color: var(--color-primary);
}
.legal-page__updated { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
.legal-page__body {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
}
.legal-page__body h2 {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-xl);
  color: var(--color-primary);
}
.legal-page__body p { margin-bottom: var(--space-4); text-align: justify; hyphens: auto; }
.legal-page__body ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); list-style: disc; }
.legal-page__body li { margin-bottom: var(--space-2); }
.legal-page__body a { color: var(--color-accent-dark); text-decoration: underline; }
.consent-field label a { color: var(--color-accent-dark); text-decoration: underline; }