/* ==========================================================================
   VM LOGISTICS — Capa de marca
   Se carga DESPUÉS de style.css. Aplica el Manual de identidad digital v1.0
   sobre la plantilla y define los componentes propios del sitio.

   Los colores base de la plantilla ya fueron sustituidos en style.css
   (el original se conserva en style.original.css). Esta hoja añade
   tipografía, componentes nuevos y correcciones puntuales.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* --------------------------------------------------------------------------
   Tokens del manual
   -------------------------------------------------------------------------- */

:root {
  --vm-naranja:        #FF6B33;
  --vm-naranja-inicio: #FF4425;
  --vm-naranja-fin:    #FF9C44;
  --vm-azul:           #4193C6;
  --vm-azul-inicio:    #4184C2;
  --vm-azul-fin:       #41ABD3;
  --vm-grafito:        #5B6367;
  --vm-tinta:          #14191C;
  --vm-humo:           #3A4145;
  --vm-acero:          #8C9498;
  --vm-borde:          #DFE3E4;
  --vm-niebla:         #F3F5F6;
  --vm-blanco:         #FFFFFF;

  --vm-grad-naranja: linear-gradient(135deg, #FF4425, #FF9C44);
  --vm-grad-azul:    linear-gradient(135deg, #4184C2, #41ABD3);

  /* ⚠ ACCESIBILIDAD — pendiente de decisión del cliente.
     Texto blanco sobre los degradados de marca NO cumple WCAG AA:
     cae de 3.44:1 a 2.08:1 (naranja) y de 3.96:1 a 2.63:1 (azul).
     Al aprobarse la corrección, sustituir los dos valores de arriba por:
       --vm-grad-naranja: linear-gradient(135deg, #FF4425, #EF7000);
       --vm-grad-azul:    linear-gradient(135deg, #4184C2, #2FA0CB);
     y subir el tamaño de los botones a 19px.
     Ver VM_Logistics_Analisis_Manual_Identidad.md §2 */

  --vm-font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --vm-font-texto:   "IBM Plex Sans", system-ui, sans-serif;
  --vm-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --vm-e1: 8px;  --vm-e2: 16px; --vm-e3: 24px; --vm-e4: 32px;
  --vm-e5: 48px; --vm-e6: 64px; --vm-e7: 96px;
  --vm-r-sm: 4px; --vm-r-md: 8px; --vm-r-lg: 14px; --vm-r-pill: 999px;

  --vm-sombra: 0 6px 20px rgba(20, 25, 28, .10);
  --vm-medida: 70ch;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  font-family: var(--vm-font-texto);
  font-size: 17px;
  line-height: 27px;
  color: var(--vm-tinta);
}

h1, h2, h3, h4, h5,
.trucker__hero-title,
.trucker__breadcrumb-title,
.trucker__main-title,
.trucker__footer-menu-title {
  font-family: var(--vm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* Accesibilidad: enlace de salto y foco visible */
.vm-saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--vm-tinta);
  color: #FFF;
  padding: 12px 20px;
  border-radius: 0 0 var(--vm-r-md) 0;
}
.vm-saltar-contenido:focus { left: 0; }

a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--vm-azul);
  outline-offset: 2px;
}

.vm-oculto-visual {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Logotipo — reglas de tamaño del manual
   Lockup mín. 140 px de ancho · cabecera 36–44 px de alto · isotipo mín. 24 px
   -------------------------------------------------------------------------- */

.vm-logo-cabecera { height: 52px; width: auto; }
@media (max-width: 767px) { .vm-logo-cabecera { height: 44px; } }

.trucker__footer-logo img { max-width: 180px; height: auto; }

/* --------------------------------------------------------------------------
   Menú
   -------------------------------------------------------------------------- */

.trucker__menu > li > a,
.trucker__nav-link,
.trucker__submenu-link,
.trucker__sub-menu a {
  font-family: var(--vm-font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.vm-menu-activo { color: var(--vm-naranja) !important; }
.trucker__menu > li > a.vm-menu-activo { border-bottom: 2px solid var(--vm-naranja); }

.trucker__btn-style-1 {
  font-family: var(--vm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--vm-grad-naranja) !important;
  border-radius: var(--vm-r-md);
}
.trucker__btn-style-1:hover { filter: brightness(1.06); background: var(--vm-grad-naranja) !important; }

/* --------------------------------------------------------------------------
   Secciones y títulos
   -------------------------------------------------------------------------- */

.vm-seccion { padding: var(--vm-e7) 0; }
@media (max-width: 991px) { .vm-seccion { padding: var(--vm-e6) 0; } }

.vm-fondo-niebla { background: var(--vm-niebla); }
.vm-fondo-tinta  { background: var(--vm-tinta); color: #B7BEC1; }

.vm-kicker {
  font-family: var(--vm-font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vm-naranja);
  margin: 0 0 var(--vm-e2);
}
.vm-kicker-claro { color: var(--vm-naranja-fin); }

.vm-titulo {
  font-size: 40px;
  line-height: 42px;
  color: var(--vm-tinta);
  margin: 0 0 var(--vm-e3);
}
.vm-titulo-claro { color: var(--vm-blanco); }
@media (max-width: 767px) { .vm-titulo { font-size: 30px; line-height: 34px; } }

.vm-subtitulo {
  font-family: var(--vm-font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--vm-naranja);
  margin: var(--vm-e3) 0 var(--vm-e2);
}

.vm-titulo-centrado { text-align: center; margin-bottom: var(--vm-e5); }
.vm-titulo-centrado .vm-titulo { max-width: 22ch; margin-inline: auto; }

.vm-texto { color: var(--vm-humo); max-width: var(--vm-medida); margin: 0 0 var(--vm-e2); }
.vm-texto-centrado { margin-inline: auto; }

.vm-badge {
  display: inline-block;
  font-family: var(--vm-font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--vm-tinta);
  color: var(--vm-blanco);
  padding: 8px 18px;
  border-radius: var(--vm-r-md);
  margin: 0 0 var(--vm-e3);
}

.vm-nota { font-size: 14px; color: var(--vm-acero); margin-top: var(--vm-e3); }

.vm-dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--vm-e6);
  align-items: center;
}

.vm-imagen-marco { border-radius: var(--vm-r-lg); overflow: hidden; }
.vm-imagen-marco img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */

.vm-portada .trucker__hero-title { font-size: 64px; line-height: .95; }
@media (max-width: 767px) { .vm-portada .trucker__hero-title { font-size: 38px; } }

.vm-portada-kicker {
  font-family: var(--vm-font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vm-naranja-fin);
  margin-bottom: var(--vm-e2);
}
.vm-portada-texto {
  color: #C9CFD2;
  font-size: 19px;
  max-width: 46ch;
  margin: 0 auto var(--vm-e4);
}
.vm-portada-botones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.vm-botones-centrados { justify-content: center; }
.vm-portada-icono { font-size: 34px; color: var(--vm-naranja-fin); display: block; margin-bottom: 10px; }

.vm-btn-claro, .vm-btn-contorno {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vm-font-display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 20px 28px;
  border-radius: var(--vm-r-md);
  transition: .2s;
}
.vm-btn-claro { border: 1px solid rgba(255,255,255,.35); color: #FFF; }
.vm-btn-claro:hover { border-color: #FFF; color: #FFF; }
.vm-btn-contorno { border: 1px solid var(--vm-grafito); color: var(--vm-tinta); }
.vm-btn-contorno:hover { border-color: var(--vm-naranja-inicio); color: var(--vm-naranja-inicio); }

/* --------------------------------------------------------------------------
   Cita
   -------------------------------------------------------------------------- */

.vm-cita {
  font-size: 26px;
  line-height: 40px;
  color: var(--vm-tinta);
  border-left: 3px solid var(--vm-naranja-inicio);
  padding-left: var(--vm-e4);
  max-width: 62ch;
  margin: 0 auto;
}
.vm-cita strong { color: var(--vm-naranja-inicio); font-weight: 600; }
@media (max-width: 767px) { .vm-cita { font-size: 20px; line-height: 32px; } }

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.vm-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--vm-e3);
}

.vm-tarjeta {
  background: var(--vm-blanco);
  border: 1px solid var(--vm-borde);
  border-radius: var(--vm-r-lg);
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.vm-tarjeta:hover { box-shadow: var(--vm-sombra); border-color: var(--vm-acero); transform: translateY(-3px); }
.vm-tarjeta-cabecera { padding: var(--vm-e3) var(--vm-e3) 0; }
.vm-tarjeta-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--vm-r-md);
  background: var(--vm-grad-naranja);
  color: #FFF;
  font-size: 26px;
}
.vm-tarjeta-cuerpo { padding: var(--vm-e3); }
.vm-tarjeta-titulo { font-size: 22px; margin: 0 0 var(--vm-e1); color: var(--vm-tinta); }
.vm-tarjeta-texto  { font-size: 15px; color: var(--vm-humo); margin: 0 0 var(--vm-e2); }

.vm-enlace-accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vm-font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 15px;
  color: var(--vm-naranja-inicio);
  border-bottom: 1px solid rgba(255, 68, 37, .4);
}
.vm-enlace-accion:hover { border-bottom-color: var(--vm-naranja-inicio); color: var(--vm-naranja-inicio); }

/* --------------------------------------------------------------------------
   Listas
   -------------------------------------------------------------------------- */

.vm-lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vm-lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.vm-check {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 107, 51, .14);
  color: var(--vm-naranja-inicio);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  margin-top: 2px;
}
.vm-lista-check span:last-child { color: var(--vm-humo); }

.vm-lista-destinos {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px var(--vm-e3);
  margin: 0 0 var(--vm-e3);
}
.vm-lista-destinos-amplia { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.vm-lista-destinos li { color: var(--vm-humo); font-size: 15px; }
.vm-lista-destinos i { color: var(--vm-naranja-inicio); margin-right: 6px; }

/* --------------------------------------------------------------------------
   Compromisos
   -------------------------------------------------------------------------- */

.vm-rejilla-compromisos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--vm-e3);
}
.vm-compromiso {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--vm-r-lg);
  padding: var(--vm-e4) var(--vm-e3);
  text-align: center;
}
.vm-compromiso-icono { font-size: 34px; color: var(--vm-naranja-fin); display: block; margin-bottom: var(--vm-e2); }
.vm-compromiso-texto { color: #DFE3E4; font-size: 15px; margin: 0; }

/* --------------------------------------------------------------------------
   Flota
   -------------------------------------------------------------------------- */

.vm-rejilla-flota {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--vm-e3);
}
.vm-flota-item {
  text-align: center;
  padding: var(--vm-e3);
  border: 1px solid var(--vm-borde);
  border-radius: var(--vm-r-lg);
}
.vm-flota-item i { font-size: 30px; color: var(--vm-naranja); display: block; margin-bottom: 10px; }
.vm-flota-item p {
  margin: 0;
  font-family: var(--vm-font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vm-tinta);
}

/* --------------------------------------------------------------------------
   Tablas y avisos
   -------------------------------------------------------------------------- */

.vm-tabla-envoltura { overflow-x: auto; }
.vm-tabla { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--vm-blanco); }
.vm-tabla th {
  text-align: left; padding: 14px;
  font-family: var(--vm-font-display);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vm-grafito);
  border-bottom: 1px solid var(--vm-borde);
}
.vm-tabla td { padding: 14px; border-bottom: 1px solid var(--vm-borde); color: var(--vm-humo); }

.vm-avisos { display: grid; gap: 12px; margin-top: var(--vm-e4); }
.vm-aviso {
  display: flex; gap: var(--vm-e2);
  padding: var(--vm-e2) var(--vm-e3);
  border-radius: var(--vm-r-md);
  border-left: 3px solid var(--vm-azul-fin);
  background: rgba(65, 171, 211, .10);
  font-size: 15px;
}
.vm-aviso strong { flex: none; font-weight: 600; color: var(--vm-tinta); }
.vm-aviso span { color: var(--vm-humo); }
.vm-aviso-atencion { border-left-color: var(--vm-naranja-fin); background: rgba(255, 156, 68, .14); }

.vm-microclaims { display: grid; gap: 12px; margin-top: var(--vm-e3); }
.vm-microclaim { display: flex; gap: 12px; align-items: center; color: var(--vm-tinta); font-weight: 500; }
.vm-microclaim i { color: var(--vm-azul); font-size: 22px; }

/* --------------------------------------------------------------------------
   Llamada a la acción
   -------------------------------------------------------------------------- */

.vm-cta { background: var(--vm-tinta); padding: var(--vm-e6) 0; }
.vm-cta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-e4);
  align-items: center;
  justify-content: space-between;
}
.vm-cta-titulo { color: #FFF; font-size: 34px; margin: 0 0 12px; }
.vm-cta-texto  { color: #B7BEC1; margin: 0; max-width: 46ch; }
.vm-cta-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.vm-cta .vm-btn-contorno { border-color: rgba(255,255,255,.35); color: #FFF; }
.vm-cta .vm-btn-contorno:hover { border-color: #FFF; color: #FFF; }

/* --------------------------------------------------------------------------
   Contacto y formularios
   -------------------------------------------------------------------------- */

.vm-contacto-envoltura {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.3fr);
  gap: var(--vm-e6);
}
@media (max-width: 991px) { .vm-contacto-envoltura { grid-template-columns: 1fr; } }

.vm-contacto-lista { list-style: none; padding: 0; margin: var(--vm-e4) 0 0; display: grid; gap: var(--vm-e3); }
.vm-contacto-lista li { display: flex; gap: var(--vm-e2); align-items: flex-start; }
.vm-contacto-icono {
  flex: none; width: 44px; height: 44px;
  border-radius: var(--vm-r-md);
  background: var(--vm-niebla);
  color: var(--vm-naranja-inicio);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.vm-contacto-etiqueta {
  display: block;
  font-family: var(--vm-font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vm-acero);
  margin-bottom: 2px;
}

.vm-contacto-formulario {
  background: var(--vm-niebla);
  border: 1px solid var(--vm-borde);
  border-radius: var(--vm-r-lg);
  padding: var(--vm-e5);
}
@media (max-width: 767px) { .vm-contacto-formulario { padding: var(--vm-e3); } }

.vm-formulario-titulo { font-size: 24px; margin: 0 0 var(--vm-e4); color: var(--vm-tinta); }

.vm-campo { margin-bottom: var(--vm-e3); }
.vm-campo > label {
  display: block;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--vm-grafito); font-weight: 600;
  margin-bottom: 6px;
}
.vm-campo input, .vm-campo select, .vm-campo textarea {
  width: 100%;
  font: 400 16px/1.4 var(--vm-font-texto);
  color: var(--vm-tinta);
  background: var(--vm-blanco);
  border: 1px solid var(--vm-borde);
  border-radius: var(--vm-r-md);
  padding: 12px 14px;
}
.vm-campo textarea { resize: vertical; }
.vm-campo input:focus, .vm-campo select:focus, .vm-campo textarea:focus {
  outline: none;
  border-color: var(--vm-azul);
  box-shadow: 0 0 0 3px rgba(65, 171, 211, .22);
}
.vm-campos-dos  { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 var(--vm-e3); }
.vm-campos-tres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 var(--vm-e3); }
.vm-campo-check label {
  display: flex; align-items: center; gap: 10px;
  text-transform: none; letter-spacing: 0; font-size: 15px;
  font-weight: 400; color: var(--vm-tinta);
}
.vm-campo-check input { width: 18px; height: 18px; accent-color: var(--vm-naranja-inicio); }

/* --------------------------------------------------------------------------
   Prosa legal
   -------------------------------------------------------------------------- */

.vm-prosa { max-width: var(--vm-medida); margin: 0 auto; }
.vm-prosa h2 { font-size: 24px; margin: var(--vm-e5) 0 var(--vm-e2); color: var(--vm-tinta); }
.vm-prosa p  { color: var(--vm-humo); margin: 0 0 var(--vm-e2); }

/* --------------------------------------------------------------------------
   Pie
   Rejilla de cuatro columnas proporcionadas. El pie de la plantilla empujaba
   toda la navegación a la mitad derecha y dejaba media pantalla vacía; los
   enlaces legales pasan a la barra inferior para dejar las columnas parejas.
   -------------------------------------------------------------------------- */

.vm-pie {
  background-color: var(--vm-tinta);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #B7BEC1;
  padding: var(--vm-e7) 0 var(--vm-e3);
  position: relative;
}
/* Velo para que la foto de fondo no compita con el texto */
.vm-pie::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,25,28,.94) 0%, rgba(20,25,28,.97) 100%);
}
.vm-pie > * { position: relative; z-index: 1; }

.vm-pie-rejilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: var(--vm-e5) var(--vm-e4);
  align-items: start;
  padding-bottom: var(--vm-e6);
}
@media (max-width: 1099px) {
  .vm-pie-rejilla { grid-template-columns: 1fr 1fr; gap: var(--vm-e5) var(--vm-e4); }
}
@media (max-width: 575px) {
  .vm-pie-rejilla { grid-template-columns: 1fr; }
}

/* --- Columna de marca --- */
.vm-pie-logo { width: 200px; height: auto; margin-bottom: var(--vm-e3); }
.vm-pie-descripcion {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #9BA3A8;
  max-width: 34ch;
}
.vm-pie-descripcion--corta { margin-bottom: var(--vm-e3); max-width: 28ch; }

.vm-pie-redes { display: flex; gap: 10px; margin-top: var(--vm-e3); }
.vm-pie-redes a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: #DFE3E4;
  transition: .25s;
}
.vm-pie-redes a:hover {
  background: var(--vm-grad-naranja);
  border-color: transparent;
  color: #FFF;
}

/* --- Columnas de enlaces --- */
.vm-pie-titulo {
  font-family: var(--vm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 15px;
  color: var(--vm-blanco);
  margin: 0 0 var(--vm-e3);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.vm-pie-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vm-pie-lista a { color: #9BA3A8; font-size: 15px; transition: color .2s; }
.vm-pie-lista a:hover { color: var(--vm-naranja-fin); }

.vm-pie-contacto li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  color: #9BA3A8;
}
.vm-pie-contacto i { color: var(--vm-naranja); margin-top: 4px; flex: none; }

.vm-pie-boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--vm-r-md);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--vm-blanco);
  transition: .25s;
}
.vm-pie-boton:hover {
  background: var(--vm-grad-naranja);
  border-color: transparent;
  color: #FFF;
}

/* --- Barra inferior --- */
.vm-pie-barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vm-e2) var(--vm-e4);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: var(--vm-e3);
}
.vm-pie-copy {
  margin: 0;
  font-family: var(--vm-font-mono);
  font-size: 12px;
  color: var(--vm-acero);
}
.vm-pie-legal { display: flex; flex-wrap: wrap; gap: var(--vm-e3); }
.vm-pie-legal a {
  font-family: var(--vm-font-mono);
  font-size: 12px;
  color: var(--vm-acero);
  transition: color .2s;
}
.vm-pie-legal a:hover { color: var(--vm-naranja-fin); }

/* --- WhatsApp flotante --- */
.vm-whatsapp-flotante {
  position: fixed;
  right: 20px; bottom: 100px;
  z-index: 900;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #FFF;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 20px rgba(20,25,28,.25);
}
.vm-whatsapp-flotante:hover { color: #FFF; filter: brightness(1.05); }

/* --------------------------------------------------------------------------
   Preferencias de movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Tarjetas de servicio
   Reconstruye el diseño `transport-system` de la plantilla con CSS fluido:
   las formas originales eran PNG de 382 px fijos y el icono se posicionaba
   con right:-108px, lo que lo dejaba fuera de la tarjeta.
   -------------------------------------------------------------------------- */

/* El título de esta sección ocupa todo el ancho, no la medida de lectura */
.trucker__transport-system-home-1 .vm-titulo-centrado .vm-titulo {
  max-width: none;
}

.vm-servicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vm-e4);
  margin-top: var(--vm-e5);
}
@media (max-width: 1100px) { .vm-servicios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .vm-servicios { grid-template-columns: 1fr; } }

.vm-servicio {
  position: relative;
  border-radius: var(--vm-r-lg);
  overflow: hidden;
  background: var(--vm-blanco);
  box-shadow: 0 0 30px rgba(20, 25, 28, .10);
  transition: box-shadow .3s ease, transform .3s ease;
}
.vm-servicio:hover {
  box-shadow: 0 10px 34px rgba(20, 25, 28, .18);
  transform: translateY(-4px);
}

.vm-servicio-cuerpo {
  display: block;
  position: relative;
  color: inherit;
}
.vm-servicio-cuerpo:hover { color: inherit; }

.vm-servicio-foto {
  display: block;
  width: 100%;
  aspect-ratio: 416 / 430;
  object-fit: cover;
}

/* Panel inferior con el corte diagonal del diseño original
   (la forma de la plantilla bajaba del 100 % al 92 % del ancho) */
.vm-servicio-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 140px;
  padding: 22px 92px 22px 26px;   /* el hueco derecho deja sitio al icono */
  background: var(--vm-blanco);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  transition: background .35s linear;
}
.vm-servicio:hover .vm-servicio-panel { background: var(--vm-grad-naranja); }

.vm-servicio-titulo {
  font-family: var(--vm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--vm-tinta);
  transition: color .35s linear;
}
.vm-servicio-texto {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--vm-humo);
  transition: color .35s linear;
}
.vm-servicio:hover .vm-servicio-titulo,
.vm-servicio:hover .vm-servicio-texto { color: var(--vm-blanco); }

/* Icono circular: dentro de la tarjeta, apoyado en el corte diagonal */
.vm-servicio-icono {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--vm-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .35s linear;
  z-index: 2;
}
.vm-servicio-icono i {
  font-size: 24px;
  color: var(--vm-blanco);
  transition: color .35s linear;
}
.vm-servicio:hover .vm-servicio-icono { background: var(--vm-blanco); }
.vm-servicio:hover .vm-servicio-icono i { color: var(--vm-naranja-inicio); }

@media (max-width: 400px) {
  .vm-servicio-panel { padding: 20px 80px 20px 20px; }
  .vm-servicio-icono { width: 54px; height: 54px; right: 16px; bottom: 16px; }
  .vm-servicio-icono i { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   Animaciones al hacer scroll
   Las ejecuta WOW.js (assets/js/wow.js), que ya inicializa script.js.
   -------------------------------------------------------------------------- */

/* Sin JavaScript el contenido debe verse igual: WOW oculta con estilo en
   línea, así que basta con no ocultar nada desde CSS. */
.no-js .wow { visibility: visible !important; animation: none !important; }

/* Quien prefiera menos movimiento no ve ninguna animación */
@media (prefers-reduced-motion: reduce) {
  .wow {
    visibility: visible !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Proceso · diseño de tarjeta `trucker__feature` de la plantilla
   Icono arriba a la izquierda, pastilla con el número de paso a la derecha,
   línea divisoria, título, guion decorativo y descripción.
   -------------------------------------------------------------------------- */

.vm-proceso-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vm-e3);
  margin-top: var(--vm-e5);
}
@media (max-width: 1099px) { .vm-proceso-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .vm-proceso-cards { grid-template-columns: 1fr; } }

.vm-proceso-card {
  background: var(--vm-blanco);
  border-radius: 2px;
  box-shadow: 0 0 55px rgba(0, 0, 0, .10);
  padding: 46px 30px 50px;
  transition: box-shadow .3s ease, transform .3s ease;
}
.vm-proceso-card:hover {
  box-shadow: 0 10px 44px rgba(20, 25, 28, .16);
  transform: translateY(-4px);
}
@media (max-width: 1299px) { .vm-proceso-card { padding-left: 25px; padding-right: 25px; } }

.vm-proceso-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vm-e2);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vm-borde);
  margin-bottom: 32px;
}

.vm-proceso-card-icono i {
  font-size: 44px;
  line-height: 1;
  color: var(--vm-naranja);
  transition: color .3s linear;
}
.vm-proceso-card:hover .vm-proceso-card-icono i { color: var(--vm-naranja-inicio); }

/* Pastilla del número de paso: ocupa el lugar del botón "Learn More" */
.vm-proceso-card-paso {
  display: inline-block;
  flex: none;
  background: var(--vm-tinta);
  color: var(--vm-blanco);
  font-family: var(--vm-font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 9px 22px;
  border-radius: 35px;
  transition: background .4s linear;
}
.vm-proceso-card:hover .vm-proceso-card-paso { background: var(--vm-grad-naranja); }

.vm-proceso-card-titulo {
  font-family: var(--vm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 1.2;
  color: var(--vm-tinta);
  margin: 0 0 20px;
}

.vm-proceso-card-linea { display: block; line-height: 0; }
.vm-proceso-card-linea img { display: inline-block; width: 57px; height: 3px; }

.vm-proceso-card-texto {
  margin: 25px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vm-humo);
  max-width: none;
}

/* --------------------------------------------------------------------------
   Ventajas · diseño de pasos en tarjeta
   Dos filas de cuatro, con placa de icono, título y descripción. La línea
   punteada une los iconos dentro de cada fila y alterna curva hacia abajo
   y hacia arriba, como en la referencia.
   -------------------------------------------------------------------------- */

.vm-ventajas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vm-e6) var(--vm-e4);
  margin-top: var(--vm-e5);
}
@media (max-width: 1099px) { .vm-ventajas { grid-template-columns: repeat(2, 1fr); gap: var(--vm-e5) var(--vm-e3); } }
@media (max-width: 575px)  { .vm-ventajas { grid-template-columns: 1fr; } }

.vm-ventaja {
  position: relative;
  text-align: center;
}

.vm-ventaja-placa {
  width: 132px;
  height: 132px;
  margin: 0 auto var(--vm-e3);
  border-radius: 22px;
  background: var(--vm-blanco);
  box-shadow: 0 10px 40px rgba(20, 25, 28, .10);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.vm-ventaja:hover .vm-ventaja-placa {
  transform: translateY(-6px);
  box-shadow: 0 16px 44px rgba(20, 25, 28, .16);
}
.vm-ventaja-placa i {
  font-size: 46px;
  line-height: 1;
  color: var(--vm-naranja);
  transition: color .3s linear;
}
.vm-ventaja:hover .vm-ventaja-placa i { color: var(--vm-naranja-inicio); }

.vm-ventaja-titulo {
  font-family: var(--vm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1.2;
  color: var(--vm-tinta);
  margin: 0 0 10px;
}
.vm-ventaja-texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--vm-humo);
  margin: 0 auto;
  max-width: 30ch;
}

/* Conector punteado entre iconos: solo dentro de cada fila de cuatro */
@media (min-width: 1100px) {
  .vm-ventaja::after {
    content: "";
    position: absolute;
    top: 46px;
    left: calc(50% + 78px);
    width: calc(100% + var(--vm-e4) - 156px);
    height: 44px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  /* curva hacia abajo */
  .vm-ventaja:nth-child(4n+1)::after,
  .vm-ventaja:nth-child(4n+3)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 30 44, 70 44, 100 6' fill='none' stroke='%238C9498' stroke-width='1.6' stroke-dasharray='5 7' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  /* curva hacia arriba */
  .vm-ventaja:nth-child(4n+2)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 30 0, 70 0, 100 38' fill='none' stroke='%238C9498' stroke-width='1.6' stroke-dasharray='5 7' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  /* el último de cada fila no lleva conector */
  .vm-ventaja:nth-child(4n)::after { content: none; }
}

/* --------------------------------------------------------------------------
   Flota · diseño de tabla de precios de la plantilla
   Foto arriba (375 × 300, el doble de alto que en el original), título,
   subtítulo, lista de características con palomita y botón al pie.
   Las tarjetas se estiran a la misma altura y el botón se ancla abajo, así
   los botones quedan alineados aunque las listas tengan distinto largo.
   -------------------------------------------------------------------------- */

.vm-flota-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vm-e4);
  margin-top: var(--vm-e5);
}
@media (max-width: 1099px) { .vm-flota-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .vm-flota-cards { grid-template-columns: 1fr; } }

.vm-flota-card {
  display: flex;
  flex-direction: column;
  background: var(--vm-blanco);
  border-radius: 15px;
  padding: 15px 15px 24px;
  box-shadow: 0 0 45px rgba(6, 2, 2, .10);
  transition: box-shadow .3s ease, transform .3s ease;
}
.vm-flota-card:hover {
  box-shadow: 0 12px 48px rgba(20, 25, 28, .18);
  transform: translateY(-5px);
}

.vm-flota-card-foto {
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.vm-flota-card-foto img {
  width: 100%;
  aspect-ratio: 375 / 300;      /* el doble de alto que el original 375×150 */
  object-fit: cover;
  transition: transform .5s ease;
}
.vm-flota-card:hover .vm-flota-card-foto img { transform: scale(1.05); }

.vm-flota-card-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;                       /* estira para que el botón quede abajo */
  padding: var(--vm-e3) 10px 0;
  text-align: center;
}

.vm-flota-card-titulo {
  font-family: var(--vm-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 25px;
  line-height: 1.15;
  color: var(--vm-tinta);
  margin: 0 0 6px;
}
.vm-flota-card-subtitulo {
  font-size: 15px;
  color: var(--vm-naranja-inicio);
  font-weight: 600;
  margin: 0 0 var(--vm-e3);
  padding-bottom: var(--vm-e3);
  border-bottom: 1px solid var(--vm-borde);
}

.vm-flota-card-specs {
  list-style: none;
  margin: 0 0 var(--vm-e3);
  padding: 0;
  text-align: left;
  display: grid;
  gap: 12px;
}
.vm-flota-card-specs li { display: flex; gap: 10px; align-items: flex-start; }

.vm-flota-card-check {
  flex: none;
  margin-top: 5px;
  color: var(--vm-naranja);
  line-height: 0;
}
.vm-flota-card-spec {
  font-size: 15px;
  line-height: 1.5;
  color: var(--vm-humo);
}
.vm-flota-card-spec strong { color: var(--vm-tinta); font-weight: 600; }

.vm-flota-card-btn {
  margin-top: auto;              /* ancla el botón al pie de la tarjeta */
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vm-font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 13px 26px;
  border-radius: var(--vm-r-md);
  background: var(--vm-tinta);
  color: var(--vm-blanco);
  transition: background .35s linear, color .35s linear;
}
.vm-flota-card-btn:hover {
  background: var(--vm-grad-naranja);
  color: var(--vm-blanco);
}