/* ==========================================================================
   VISUALMETRICS.NET — Hoja de estilos del sitio
   --------------------------------------------------------------------------
   Estructura:
     1. Tokens de diseño (colores de marca, tipografía, radios, sombras)
     2. Base y layout de página (header, main, footer)
     3. Componente HUB de cliente (.vm-hub): cabecera, tarjetas, botones
     4. Iconos (máscaras SVG, seguros frente a filtros de WordPress)
     5. Responsive y accesibilidad
     6. Landing y acceso clientes (.vm-landing, .vm-access) — también la 404
   --------------------------------------------------------------------------
   Convención: todas las clases usan el prefijo "vm-".
   Para crear una página de cliente nueva NO hace falta tocar este archivo:
   basta duplicar el HTML de cliente y cambiar textos/enlaces.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

/* ==========================================================================
   1. TOKENS DE DISEÑO
   Colores tomados directamente del logo:
     navy del icono y de "metrics"  → #00234e
     cian de "visual" y la gráfica  → #00b1c9 (gama #0099bc–#00c0ce)
   ========================================================================== */
:root{
  /* Marca */
  --vm-navy:        #00234e;   /* azul profundo del logo */
  --vm-navy-2:      #013a6b;   /* navy iluminado, para gradientes y hover */
  --vm-cyan:        #00b1c9;   /* cian principal del logo */
  --vm-cyan-deep:   #0090b4;   /* cian oscurecido, hover y texto sobre claro */
  --vm-cyan-soft:   #e3f6f9;   /* lavado cian para fondos suaves */

  /* Neutros */
  --vm-ink:         #0b1f33;   /* texto principal */
  --vm-muted:       #51647a;   /* texto secundario */
  --vm-line:        #e3eaf1;   /* bordes */
  --vm-line-soft:   #eef3f8;   /* fondos de chips */
  --vm-bg:          #f5f9fc;   /* fondo de página */
  --vm-card:        #ffffff;

  /* Tipografía */
  --vm-font-display:'Archivo', sans-serif;                            /* títulos */
  --vm-font-body:   'IBM Plex Sans', -apple-system, sans-serif;       /* texto */
  --vm-font-mono:   'IBM Plex Mono', monospace;                       /* etiquetas técnicas */

  /* Geometría y sombras */
  --vm-radius-lg:   22px;
  --vm-radius-md:   13px;
  --vm-radius-sm:   8px;
  --vm-shadow-card: 0 1px 2px rgba(0,35,78,.04), 0 12px 28px -16px rgba(0,35,78,.18);
  --vm-shadow-card-hover: 0 1px 2px rgba(0,35,78,.05), 0 24px 44px -20px rgba(0,35,78,.28);
}

/* ==========================================================================
   2. BASE Y LAYOUT DE PÁGINA
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body.vm-body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--vm-font-body);
  color:var(--vm-ink);
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
}

/* ----- Header del sitio ----- */
.vm-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1120px;
  width:100%;
  margin:0 auto;
  padding:18px clamp(18px,4vw,40px);
}
.vm-header-logo img{
  height:46px;
  width:auto;
  display:block;
}
.vm-header-badge{
    font-family: var(--vm-font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #ffffff;
    background: #00234e;
    border: 1px solid #c9ecf2;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

/* ----- Main ----- */
.vm-main{
  flex:1;
  width:100%;
  padding:0 clamp(12px,3vw,28px) clamp(28px,4vw,48px);
}

/* ----- Footer del sitio ----- */
.vm-footer{
  max-width:1120px;
  width:100%;
  margin:0 auto;
  padding:22px clamp(18px,4vw,40px) 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--vm-muted);
}
.vm-footer a{
  color:var(--vm-cyan-deep);
  text-decoration:none;
  font-weight:500;
}
.vm-footer a:hover{ text-decoration:underline; }

/* ==========================================================================
   3. COMPONENTE HUB DE CLIENTE  (.vm-hub)
   Contenedor del espacio privado: cabecera + lista de tarjetas de apps.
   ========================================================================== */
.vm-hub{
  max-width:1120px;
  margin:0 auto;
  padding:clamp(28px,5vw,56px) clamp(18px,4vw,40px) clamp(40px,6vw,64px);
  position:relative;
  border-radius:28px;
  background:
radial-gradient(120% 80% at 85% -10%, rgb(255 255 255 / 8%), transparent 55%), linear-gradient(45deg, #ffffff 0%, #1b6c7805 100%);
  background-color:var(--vm-bg);
  overflow:hidden;
}
/* micro-grid blueprint de fondo */
.vm-hub::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:none;
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(110% 90% at 50% 0%, #000 35%, transparent 80%);
          mask-image:radial-gradient(110% 90% at 50% 0%, #000 35%, transparent 80%);
  pointer-events:none;
}
.vm-hub > *{ position:relative; z-index:1; }

/* ----- Cabecera del hub ----- */
.vm-head{ margin-bottom:clamp(26px,4vw,40px); }

.vm-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--vm-font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
  margin:0 0 16px;
}
.vm-kicker::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--vm-cyan);
  box-shadow:0 0 0 4px var(--vm-cyan-soft);
}
.vm-title{
  margin:0 0 10px;
  font-family:var(--vm-font-display);
  font-size:clamp(34px,6vw,52px);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-0.035em;
  color:var(--vm-navy);
}
.vm-subtitle{
  margin:0;
  font-size:clamp(15px,2vw,18px);
  line-height:1.5;
  color:var(--vm-muted);
  max-width:560px;
}

/* ----- Grid de tarjetas ----- */
.vm-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ----- Tarjeta de aplicación ----- */
.vm-card{
  position:relative;
  background:var(--vm-card);
  border:1px solid var(--vm-line);
  border-radius:var(--vm-radius-lg);
  padding:clamp(22px,3vw,30px) clamp(22px,3.5vw,34px);
  box-shadow:var(--vm-shadow-card);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px,3vw,36px);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  /* animación de entrada */
  opacity:0;
  transform:translateY(14px);
  animation:vm-in .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.vm-card:nth-child(1){ animation-delay:.05s; }
.vm-card:nth-child(2){ animation-delay:.13s; }
.vm-card:nth-child(3){ animation-delay:.21s; }
.vm-card:nth-child(4){ animation-delay:.29s; }
.vm-card:nth-child(5){ animation-delay:.37s; }
.vm-card:nth-child(6){ animation-delay:.45s; }
@keyframes vm-in{ to{ opacity:1; transform:none; } }

/* línea de acento superior en hover (navy → cian, como el logo) */
.vm-card::after{
  content:"";
  position:absolute;
  left:clamp(22px,3.5vw,34px);
  right:clamp(22px,3.5vw,34px);
  top:0;
  height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--vm-navy),var(--vm-cyan));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.vm-card:hover{
  transform:translateY(-3px);
  border-color:#cfdce8;
  box-shadow:var(--vm-shadow-card-hover);
}
.vm-card:hover::after{ transform:scaleX(1); }

/* índice numérico */
.vm-index{
  position:absolute;
  top:18px;right:22px;
  font-family:var(--vm-font-mono);
  font-size:13px;
  font-weight:600;
  color:#bcc9d6;
  letter-spacing:.05em;
  transition:color .22s ease;
}
.vm-card:hover .vm-index{ color:var(--vm-cyan); }

/* ----- Zona izquierda de la tarjeta ----- */
.vm-card-main{
  display:flex;
  align-items:flex-start;
  gap:clamp(16px,2.5vw,24px);
  flex:1;
  min-width:0;
}
.vm-card-content{ flex:1; min-width:0; }

.vm-eyebrow{
  display:block;
  font-family:var(--vm-font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
  margin:0 0 7px;
}
.vm-card-title{
  margin:0 0 9px;
  font-family:var(--vm-font-display);
  font-size:clamp(22px,3vw,27px);
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--vm-navy);
  line-height:1.1;
}
.vm-card-text{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--vm-muted);
  max-width:640px;
}
.vm-card-text a{
  color:var(--vm-cyan-deep);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid rgba(0,144,180,.35);
}
.vm-card-text a:hover{ border-bottom-color:var(--vm-cyan-deep); }

/* chips/etiquetas */
.vm-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:15px;
}
.vm-tag{
  font-family:var(--vm-font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.04em;
  color:#3e5468;
  background:var(--vm-line-soft);
  border:1px solid var(--vm-line);
  padding:4px 10px;
  border-radius:7px;
}

/* ----- Botones ----- */
.vm-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex-shrink:0;
  width:188px;
}
.vm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none !important;
  height:52px;
  padding:0 20px;
  border-radius:var(--vm-radius-md);
  font-family:var(--vm-font-body);
  font-size:14.5px;
  font-weight:600;
  line-height:1 !important;
  letter-spacing:.005em;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* icono del botón como máscara */
.vm-btn::after{
  content:"";
  width:17px;height:17px;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
  transition:transform .2s ease;
}
.vm-btn:focus-visible{ outline:3px solid var(--vm-cyan-soft); outline-offset:2px; }

.vm-btn--primary{
  background:var(--vm-navy);
  color:#fff !important;
  box-shadow:0 8px 18px -10px rgba(0,35,78,.7);
}
.vm-btn--primary::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}
.vm-btn--primary:hover{
  background:var(--vm-navy-2);
  transform:translateY(-1px);
  box-shadow:0 12px 22px -10px rgba(0,35,78,.75);
}
.vm-btn--primary:hover::after{ transform:translate(2px,-2px); }

.vm-btn--secondary{
  background:#fff;
  color:var(--vm-navy) !important;
  border:1px solid var(--vm-line);
}
.vm-btn--secondary::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M4 19h16'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M4 19h16'/%3E%3C/svg%3E");
}
.vm-btn--secondary:hover{
  background:#f7fafc;
  border-color:#cfdae3;
  transform:translateY(-1px);
}
.vm-btn--secondary:hover::after{ transform:translateY(1px); }

/* botón deshabilitado (app aún no disponible) */
.vm-btn--disabled{
  opacity:.45;
  pointer-events:none;
  filter:saturate(.4);
  box-shadow:none !important;
}

/* ==========================================================================
   4. ICONOS DE TARJETA
   Cuadrado navy con gradiente (como el icono del logo) + símbolo en máscara.
   Para añadir un icono nuevo: duplicar un bloque .vm-icon--xxx y cambiar
   el SVG codificado en la máscara.
   ========================================================================== */
.vm-icon{
  width:64px;height:64px;min-width:64px;
  border-radius:17px;
  background:linear-gradient(155deg,#01376a 0%, var(--vm-navy) 60%, #001a3a 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(0,35,78,.55), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .22s ease;
}
.vm-card:hover .vm-icon{ transform:translateY(-2px) rotate(-3deg); }

.vm-icon::before{
  content:"";
  width:32px;height:32px;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
}

/* gráfico de barras + línea (dashboards) */
.vm-icon--chart::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Crect x='7' y='12' width='2.6' height='6' rx='.6'/%3E%3Crect x='12' y='9' width='2.6' height='9' rx='.6'/%3E%3Crect x='17' y='6' width='2.6' height='12' rx='.6'/%3E%3Cpath d='M6 9.5l4-3 3 1.5 5-4'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Crect x='7' y='12' width='2.6' height='6' rx='.6'/%3E%3Crect x='12' y='9' width='2.6' height='9' rx='.6'/%3E%3Crect x='17' y='6' width='2.6' height='12' rx='.6'/%3E%3Cpath d='M6 9.5l4-3 3 1.5 5-4'/%3E%3C/svg%3E");
}

/* maquinaria / equipos */
.vm-icon--machine::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15h9l3-6h5l1.5 4.5V16'/%3E%3Cpath d='M2 15v-3h6'/%3E%3Ccircle cx='6.5' cy='17.5' r='2'/%3E%3Ccircle cx='17.5' cy='17.5' r='2'/%3E%3Cpath d='M8.5 17.5h7'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15h9l3-6h5l1.5 4.5V16'/%3E%3Cpath d='M2 15v-3h6'/%3E%3Ccircle cx='6.5' cy='17.5' r='2'/%3E%3Ccircle cx='17.5' cy='17.5' r='2'/%3E%3Cpath d='M8.5 17.5h7'/%3E%3C/svg%3E");
}

/* obras / progreso */
.vm-icon--works::before{
  -webkit-mask:none; mask:none;
  background:
    linear-gradient(currentColor 0 0) 6px 22px / 20px 4px no-repeat,
    linear-gradient(currentColor 0 0) 9px 15px / 14px 4px no-repeat,
    linear-gradient(currentColor 0 0) 12px 8px / 8px 4px no-repeat,
    linear-gradient(currentColor 0 0) 14px 4px / 4px 22px no-repeat;
  border-bottom:3px solid currentColor;
  opacity:.95;
}

/* grúa */
.vm-icon--crane::before{
  -webkit-mask:none; mask:none;
  width:34px;
  background:
    linear-gradient(currentColor 0 0) 5px 5px / 23px 3px no-repeat,
    linear-gradient(45deg, transparent 46%, currentColor 47% 53%, transparent 54%) 5px 5px / 23px 14px no-repeat,
    linear-gradient(currentColor 0 0) 8px 8px / 3px 22px no-repeat,
    linear-gradient(currentColor 0 0) 5px 28px / 15px 3px no-repeat,
    linear-gradient(currentColor 0 0) 27px 5px / 2px 13px no-repeat,
    linear-gradient(currentColor 0 0) 24px 17px / 8px 3px no-repeat;
  opacity:.95;
}

/* ==========================================================================
   5. RESPONSIVE Y ACCESIBILIDAD
   ========================================================================== */
@media (max-width:860px){
  .vm-card{
    flex-direction:column;
    align-items:stretch;
    gap:22px;
  }
  .vm-index{ top:20px;right:24px; }
  .vm-actions{
    flex-direction:row;
    width:100%;
  }
  .vm-btn{ flex:1; }
}
@media (max-width:460px){
  .vm-header-logo img{ height:38px; }
  .vm-header-badge{ display:none; }
  .vm-card-main{ flex-direction:column; }
  .vm-actions{ flex-direction:column; }
  .vm-card-text{ font-size:14.5px; }
}

@media (prefers-reduced-motion:reduce){
  .vm-card,.vm-icon,.vm-btn,.vm-btn::after,.vm-card::after{
    transition:none;animation:none;opacity:1;transform:none;
  }
}

/* ==========================================================================
   6. LANDING Y ACCESO CLIENTES
   Usado por index.html (landing) y 404.html.
   ========================================================================== */
body.vm-landing{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--vm-font-body);
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
}
.vm-landing-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:40px;
  width:100%;
  text-align:center;
}
.vm-landing-logo{
  width:min(620px,76vw);
  height:auto;
  display:block;
}
.vm-landing-logo--sm{ width:min(340px,70vw); }
.vm-landing-logo--xs{ width:min(230px,52vw); }

/* títulos y texto (página 404) */
.vm-landing-title{
  margin:28px 0 0;
  font-family:var(--vm-font-display);
  font-size:26px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--vm-navy);
}
.vm-landing-text{
  margin:12px 0 0;
  font-size:15.5px;
  line-height:1.6;
  color:var(--vm-muted);
  max-width:420px;
}
/* variante un poco mayor (p. ej. subtítulo de contacto.html) */
.vm-landing-text--lg{
  font-size:clamp(16.5px,2.3vw,19px);
  max-width:460px;
}
.vm-landing-link{
  margin-top:22px;
  font-size:14px;
  color:var(--vm-cyan-deep);
}

/* ----- Claim de la landing ----- */
.vm-claim{
  margin:18px auto 7px;
  max-width:540px; /* que la primera línea (hasta la coma) quepa entera */
  font-size:17px;
  font-weight:500;
  line-height:1.45;
  color:var(--vm-ink);
  text-wrap:balance; /* reparte las líneas equilibradas, sin palabras huérfanas */
}
.vm-claim-short{ display:none; }
.vm-claim-sub{
  margin:0 auto;
  max-width:420px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--vm-muted);
  text-wrap:balance;
}
@media (max-width:600px){
  .vm-claim{ font-size:15px; max-width:320px; margin-top:14px; }
  .vm-claim-sub{ font-size:12.5px; max-width:290px; }
  .vm-claim-full{ display:none; }
  .vm-claim-short{ display:inline; }
}

/* ----- Titular destacado de la landing (index.html) -----
   Reutiliza la tipografía de la promesa de contacto (.vm-flow-headline)
   y un subtexto en dos líneas, más discreto (.vm-claim-sub). */
/* prefijo body.vm-landing: gana en especificidad a .vm-flow-headline y
   .vm-access (que se definen después en el archivo) */
body.vm-landing .vm-landing-headline{
  margin:46px auto 0;
  max-width:560px;
}
body.vm-landing .vm-landing-claim-sub{
  margin:17px auto 0;
  font-size:15px;
  line-height:1.55;
  max-width:380px;
}
/* más aire entre el texto y los botones */
body.vm-landing .vm-access--landing{ margin-top:54px; }
/* los dos botones, mismo ancho y misma altura */
body.vm-landing .vm-landing-demo,
body.vm-landing .vm-access--landing .vm-access-toggle{
  width:min(240px,80vw);
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* al abrir el formulario, el botón "Acceso clientes" desaparece
   (gana en especificidad a la regla de arriba) */
body.vm-landing .vm-access--landing.open .vm-access-toggle{ display:none; }
@media (max-width:600px){
  /* logo algo más pequeño: deja aire alrededor en pantallas estrechas */
  body.vm-landing .vm-landing-logo{ width:min(300px,82vw); }
  /* más separación entre logo, titular, subtexto y botones */
  body.vm-landing .vm-landing-headline{ margin-top:44px; max-width:340px; }
  body.vm-landing .vm-landing-claim-sub{ margin-top:18px; font-size:13.5px; max-width:300px; }
  body.vm-landing .vm-access--landing{ margin-top:52px; }
  /* en móvil los dos botones se apilan, ambos del mismo ancho */
  body.vm-landing .vm-access--landing .vm-access-row{ flex-direction:column; gap:14px; }
  body.vm-landing .vm-landing-demo,
  body.vm-landing .vm-access--landing .vm-access-toggle{ width:min(300px,82vw); }
}

/* ----- Bloque de acceso ----- */
.vm-access{
  margin-top:38px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:60px; /* reserva espacio: no salta al cambiar botón ↔ formulario */
}
.vm-access-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
/* botón Demo: cian del logo, sutil pero más llamativo que el de acceso */
.vm-access-demo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--vm-cyan-soft);
  border:1px solid #bfe8ef;
  border-radius:999px;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--vm-cyan-deep);
  text-decoration:none;
  padding:13px 34px;
  transition:color .2s ease, border-color .2s ease, background .2s ease,
             box-shadow .2s ease, transform .18s ease;
}
.vm-access-demo:hover{
  background:var(--vm-cyan);
  border-color:var(--vm-cyan);
  color:#fff;
  box-shadow:0 6px 16px -8px rgba(0,144,180,.5);
  transform:translateY(-1px);
}
.vm-access-toggle{
  background:#f8fbfd;
  border:1px solid var(--vm-line);
  border-radius:999px;
  font:inherit;
  font-size:14.5px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--vm-muted);
  cursor:pointer;
  padding:13px 30px;
  transition:color .2s ease, border-color .2s ease, background .2s ease,
             box-shadow .2s ease, transform .18s ease;
}
.vm-access-toggle:hover{
  color:var(--vm-cyan-deep);
  border-color:#bfe8ef;
  background:#fff;
  box-shadow:0 6px 16px -8px rgba(0,35,78,.25);
  transform:translateY(-1px);
}
.vm-access-form{
  display:none;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.vm-access.open .vm-access-form{ display:flex; animation:vm-access-in .25s ease; }
.vm-access.open .vm-access-toggle{ display:none; } /* el formulario ocupa su lugar */
@keyframes vm-access-in{ from{ opacity:0; transform:translateY(4px); } }
.vm-access--static .vm-access-form{ display:flex; } /* 404: formulario siempre visible */

.vm-access-input{
  width:min(280px,60vw);
  height:48px;
  padding:0 18px;
  font:inherit;
  font-size:16px; /* ≥16px: evita zoom en iPhone */
  color:var(--vm-ink);
  background:var(--vm-bg);
  border:1px solid var(--vm-line);
  border-radius:var(--vm-radius-md);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.vm-access-input:focus{
  border-color:var(--vm-cyan);
  box-shadow:0 0 0 3px var(--vm-cyan-soft);
}
.vm-access-input::placeholder{ color:#9db0c3; }

.vm-access-btn{
  height:48px;
  padding:0 22px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:#fff;
  background:var(--vm-navy);
  border:none;
  border-radius:var(--vm-radius-md);
  cursor:pointer;
  transition:background .2s ease, transform .18s ease;
}
.vm-access-btn:hover{ background:var(--vm-navy-2); transform:translateY(-1px); }

/* ----- Pie de la landing (contacto) ----- */
.vm-landing-foot{
  position:fixed;
  left:0; right:0; bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:13px;
  color:#9db0c3;
}
.vm-landing-foot a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--vm-muted);
  text-decoration:none;
  font-weight:500;
  padding:4px 8px;
  border-radius:8px;
  transition:color .2s ease, background .2s ease;
}
.vm-landing-foot a:hover{
  color:var(--vm-cyan-deep);
  background:var(--vm-cyan-soft);
}
.vm-landing-foot svg{ display:block; }

@media (max-width:600px){
  .vm-landing-logo{ width:min(360px,92vw); }
  .vm-access-form{ flex-direction:column; width:100%; }
  .vm-access-input{ width:min(320px,80vw); }
  .vm-landing-foot{ bottom:12px; font-size:12px; }
}

/* ==========================================================================
   7. PÁGINA INTERMEDIA / FLUJO  (como-funciona.html)
   Página puente entre la landing y la demo: explica el servicio en tres
   mensajes encadenados (flow) y remata con un CTA hacia el cuadro de mando.
   ========================================================================== */
body.vm-flow{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--vm-font-body);
  color:var(--vm-ink);
  background:#ffffff;
  -webkit-font-smoothing:antialiased;
}

/* logo arriba, enlaza a la home */
.vm-flow-top{
  display:flex;
  justify-content:center;
  padding:clamp(24px,4vw,34px) 24px 0;
}
.vm-flow-top img{
  width:min(280px,60vw);
  height:auto;
  display:block;
}

/* zona central: mensajes + CTA, centrados vertical y horizontalmente */
.vm-flow-main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(40px,5.5vw,60px);
  width:100%;
  padding:clamp(28px,5vw,52px) 24px clamp(44px,6vw,64px);
}

/* titular suelto (la promesa, fuera del flujo) */
.vm-flow-headline{
  margin:0;
  max-width:620px;
  text-align:center;
  font-family:var(--vm-font-display);
  font-size:clamp(25px,4.6vw,40px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--vm-navy);
  text-wrap:balance;
  opacity:0; transform:translateY(14px);
  animation:vm-in .55s cubic-bezier(.2,.7,.2,1) .04s forwards;
}
/* bloque promesa: titular + compromiso de plazo */
.vm-flow-promise{ max-width:640px; text-align:center; }
.vm-flow-headline-sub{
  margin:11px 0 0;
  font-family:var(--vm-font-body);
  font-size:clamp(15px,2.2vw,18px);
  font-weight:600;
  letter-spacing:.005em;
  color:var(--vm-cyan-deep);
  opacity:0; transform:translateY(14px);
  animation:vm-in .55s cubic-bezier(.2,.7,.2,1) .10s forwards;
}

/* contenedor del flujo recurrente (bisagra + pasos) */
.vm-flow-seq{ width:100%; max-width:528px; margin:0 auto; }
.vm-flow-bridge{
  display:block;
  margin:0 0 18px;
  font-family:var(--vm-font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
  opacity:0; transform:translateY(14px);
  animation:vm-in .55s cubic-bezier(.2,.7,.2,1) .14s forwards;
}

/* lista de mensajes con línea-guía vertical (el "flow") */
.vm-flow-steps{
  --vm-flow-gap:clamp(30px,4.4vw,46px);
  display:flex;
  flex-direction:column;
  gap:var(--vm-flow-gap);
  width:100%;
  max-width:528px;
  margin:0 auto;
}
.vm-flow-step{
  position:relative;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:clamp(15px,2.5vw,22px);
  align-items:start;
  /* entrada escalonada (reutiliza el keyframe vm-in) */
  opacity:0;
  transform:translateY(14px);
  animation:vm-in .55s cubic-bezier(.2,.7,.2,1) forwards;
}
.vm-flow-step:nth-child(1){ animation-delay:.24s; }
.vm-flow-step:nth-child(2){ animation-delay:.34s; }
.vm-flow-step:nth-child(3){ animation-delay:.44s; }

/* línea vertical que conecta un punto con el siguiente */
.vm-flow-step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:16px;
  top:24px;
  bottom:calc(-1 * var(--vm-flow-gap));
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(var(--vm-cyan-soft), var(--vm-line));
}

/* punto cian de cada paso */
.vm-flow-dot{
  width:13px;height:13px;
  margin:6px auto 0;
  border-radius:50%;
  background:var(--vm-cyan);
  box-shadow:0 0 0 5px var(--vm-cyan-soft);
  position:relative;
  z-index:1;
}

/* textos de cada mensaje (dos líneas) */
.vm-flow-line1{
  font-family:var(--vm-font-display);
  font-size:clamp(21px,3.6vw,31px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.025em;
  color:var(--vm-navy);
}
.vm-flow-line2{
  margin-top:5px;
  font-size:clamp(15.5px,2.4vw,20px);
  line-height:1.4;
  font-weight:400;
  color:var(--vm-muted);
}

/* ----- CTA principal: degradado de marca (navy → cian), más llamativo ----- */
.vm-flow-cta{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:17px 42px;
  border-radius:999px;
  font-family:var(--vm-font-body);
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
  color:#fff !important;
  text-decoration:none;
  background:linear-gradient(100deg,var(--vm-navy) 0%, var(--vm-cyan-deep) 72%, var(--vm-cyan) 100%);
  box-shadow:0 14px 30px -12px rgba(0,35,78,.55);
  transition:transform .18s ease, box-shadow .2s ease, filter .2s ease;
  opacity:0;
  animation:vm-in .55s cubic-bezier(.2,.7,.2,1) .46s forwards;
}
.vm-flow-cta::after{
  content:"";
  width:19px;height:19px;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .2s ease;
}
.vm-flow-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px -12px rgba(0,35,78,.6);
  filter:brightness(1.06);
}
.vm-flow-cta:hover::after{ transform:translateX(3px); }
.vm-flow-cta:focus-visible{ outline:3px solid var(--vm-cyan-soft); outline-offset:3px; }

/* enlace discreto para volver a la home */
.vm-flow-back{
  font-size:13.5px;
  color:var(--vm-muted);
  text-decoration:none;
  transition:color .2s ease;
}
.vm-flow-back:hover{ color:var(--vm-cyan-deep); }

/* ----- Página de contacto (contacto.html) ----- */
/* variante del CTA con icono de sobre, para el email */
.vm-flow-cta--mail::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
.vm-flow-cta--mail:hover::after{ transform:translateY(1px); }
.vm-contact-mail{ margin-top:30px; }
.vm-contact-li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:20px;
  font-size:14px;
  font-weight:500;
  color:var(--vm-muted);
  text-decoration:none;
  transition:color .2s ease;
}
.vm-contact-li:hover{ color:var(--vm-cyan-deep); }
.vm-contact-li svg{ display:block; }
/* bloque motivador de contacto (reaprovecha .vm-flow-headline / -sub) */
.vm-contact-promise{ margin-top:32px; }
.vm-contact-ask{ margin-top:18px; }
/* bloque de contacto al final de como-funciona: formulario + LinkedIn */
.vm-flow-contact{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;                 /* ocupa el ancho disponible (no se encoge al contenido) */
  max-width:480px;
  margin:0 auto;
  /* sin nada encima: el formulario abre la página, sin filete superior */
  padding-top:0;
}
/* rótulo de transición sobre el formulario (mismo estilo que las bisagras mono) */
.vm-flow-contact-kicker{
  margin:0 0 22px;            /* anula el margin-bottom heredado y centra el rótulo */
  animation:none;            /* sin entrada escalonada aquí */
  opacity:1; transform:none;
}
/* reaseguro bajo el kicker: sin compromiso + respuesta rápida */
.vm-contact-reassure{
  margin:-12px 0 26px;
  font-size:13px;
  color:var(--vm-muted);
  text-align:center;
}
/* nota RGPD bajo el botón de envío */
.vm-form-rgpd{
  margin:12px 0 0;
  font-size:11.5px;
  line-height:1.5;
  color:#9db0c3;
  text-align:center;
}

/* ----- Ilustración (SVG) encima del formulario (contacto.html) ----- */
.vm-contact-illus{
  margin:0 auto clamp(14px,2.4vw,22px);
  width:min(300px,72vw);
}
.vm-contact-illus .vm-pr-anim{ width:100%; height:auto; }

/* ----- Vídeo del proceso real (variante; ahora se usa en precios.html) -----
   Bucle silenciado en autoplay (sin audio): se comporta como una demostración
   en movimiento. Alineado con la columna del formulario. */
.vm-form-video{
  width:100%;
  max-width:520px;
  margin:0 auto clamp(18px,2.6vw,24px);
  text-align:center;
}
.vm-form-video video{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  border:1px solid var(--vm-line);
  box-shadow:var(--vm-shadow-card);
  background:#0b1f3a;
}
.vm-form-video figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.4;
  color:var(--vm-muted);
  text-wrap:balance;
}

/* ----- Formulario de contacto (como-funciona.html) -----
   Envía un JSON al webhook de Make vía fetch(). La URL del webhook se define
   en el <script> de la página (constante WEBHOOK_URL). El email ofuscado y
   LinkedIn quedan debajo como vías secundarias (.vm-form-alt). */
.vm-form{
  width:100%;
  max-width:480px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:left;
  opacity:0; transform:translateY(14px);
  animation:vm-in .55s cubic-bezier(.2,.7,.2,1) .30s forwards;
}
.vm-form-row{ display:flex; gap:14px; }
.vm-form-row > .vm-form-field{ flex:1; min-width:0; }
.vm-form-field{ display:flex; flex-direction:column; gap:6px; }
.vm-form-label{
  font-family:var(--vm-font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
}
.vm-form-input,
.vm-form-textarea{
  width:100%;
  font:inherit;
  font-size:16px; /* ≥16px: evita el zoom automático en iOS */
  color:var(--vm-ink);
  background:var(--vm-bg);
  border:1px solid var(--vm-line);
  border-radius:var(--vm-radius-md);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.vm-form-input{ height:48px; padding:0 16px; }
.vm-form-textarea{ padding:13px 16px; min-height:120px; resize:vertical; line-height:1.5; }
.vm-form-input:focus,
.vm-form-textarea:focus{
  border-color:var(--vm-cyan);
  box-shadow:0 0 0 3px var(--vm-cyan-soft);
}
.vm-form-input::placeholder,
.vm-form-textarea::placeholder{ color:#9db0c3; }

/* botón de envío: reaprovecha el degradado de marca del CTA */
.vm-form-submit{
  align-self:center;
  margin-top:6px;
  border:none;
  cursor:pointer;
  font-family:var(--vm-font-body);
  opacity:1;          /* sin animación de entrada (ya la lleva el contenedor) */
  animation:none;
}
.vm-form-submit:disabled{ opacity:.55; cursor:default; transform:none; filter:saturate(.6); }

/* mensaje de estado (enviado / error) */
.vm-form-msg{
  margin:4px auto 0;
  max-width:480px;
  font-size:14.5px;
  line-height:1.5;
  text-align:center;
  display:none;
}
.vm-form-msg.is-ok{ display:block; color:var(--vm-cyan-deep); font-weight:600; }
.vm-form-msg.is-err{ display:block; color:#c0392b; font-weight:600; }

/* mensaje destacado tras enviar (el formulario se oculta y queda solo esto) */
.vm-form-msg--done{
  white-space:pre-line;            /* respeta el salto de línea del texto */
  margin:24px auto;
  max-width:440px;
  font-family:var(--vm-font-display);
  font-size:clamp(20px,3.2vw,27px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.015em;
  color:var(--vm-navy);
  text-wrap:balance;
  animation:vm-in .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.vm-form-msg--done::before{
  content:"";
  display:block;
  width:54px; height:54px;
  margin:0 auto 16px;
  border-radius:50%;
  background:
    var(--vm-cyan-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230090b4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 26px no-repeat;
  box-shadow:0 0 0 6px rgba(0,177,201,.10);
}

/* vía secundaria bajo el formulario: "…hablamos en LinkedIn" en una línea */
.vm-form-alt{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:24px;
}
.vm-form-alt-label{
  font-size:13.5px;
  color:var(--vm-muted);
}
/* la línea de LinkedIn no debe arrastrar el margin-top base de .vm-contact-li */
.vm-form-alt .vm-contact-li{ margin-top:0; }
.vm-form-alt-mail{
  font-size:14.5px;
  font-weight:600;
  color:var(--vm-cyan-deep);
  text-decoration:none;
}
.vm-form-alt-mail:hover{ text-decoration:underline; }

@media (max-width:600px){
  /* menos padding lateral en móvil: el formulario aprovecha más ancho */
  .vm-flow-main{ padding-left:16px; padding-right:16px; }
  .vm-form-row{ flex-direction:column; gap:14px; }
  .vm-flow-step{ grid-template-columns:26px 1fr; }
  .vm-flow-step:not(:last-child)::before{ left:12px; }
  .vm-flow-dot{ width:11px;height:11px; }
  .vm-flow-cta{ padding:16px 34px; font-size:15.5px; }
}

@media (prefers-reduced-motion:reduce){
  .vm-flow-step,.vm-flow-cta,.vm-flow-headline,.vm-flow-headline-sub,.vm-flow-bridge{ animation:none; opacity:1; transform:none; }
}

/* ==========================================================================
   8. HUB DE CLIENTE — TARJETAS COMPACTAS  (.vm-appgrid / .vm-app)
   Versión simplificada del hub: tarjetas pequeñas con sólo lo que aporta
   valor al cliente — título, versión + fecha y, si aplica, enlace a los
   datos de origen. Toda la tarjeta es un enlace que abre el cuadro de mando.
   Sustituye a las tarjetas grandes (.vm-card) en las páginas de cliente.
   Rejilla: 1 columna en móvil, 2 en tablet, hasta 3 en escritorio.
   ========================================================================== */
.vm-appgrid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px,2vw,20px);
}
@media (min-width:620px){
  .vm-appgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:960px){
  .vm-appgrid{ grid-template-columns:repeat(3,1fr); }
}

/* ----- Tarjeta compacta ----- */
.vm-app{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--vm-card);
  border:1px solid var(--vm-line);
  border-radius:var(--vm-radius-md);
  padding:22px 22px 20px;
  box-shadow:var(--vm-shadow-card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  /* entrada escalonada (reutiliza el keyframe vm-in) */
  opacity:0;
  transform:translateY(12px);
  animation:vm-in .45s cubic-bezier(.2,.7,.2,1) forwards;
}
.vm-app:nth-child(1){ animation-delay:.04s; }
.vm-app:nth-child(2){ animation-delay:.10s; }
.vm-app:nth-child(3){ animation-delay:.16s; }
.vm-app:nth-child(4){ animation-delay:.22s; }
.vm-app:nth-child(5){ animation-delay:.28s; }
.vm-app:nth-child(6){ animation-delay:.34s; }

/* ----- Icono de la app (estilo "cargando": planos, navy → cian) ----- */
.vm-app-icon{
  width:60px;
  height:60px;
  flex:none;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  background:var(--vm-cyan-soft);
  border:1px solid #d4eef3;
  border-radius:16px;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.vm-app-icon-svg{
  width:34px;
  height:34px;
  display:block;
}
.vm-app:hover .vm-app-icon{
  transform:translateY(-2px);
  background:#d8f1f5;
  border-color:#bfe6ed;
}
@media (prefers-reduced-motion:reduce){
  .vm-app-icon{ transition:none; }
}

/* filete superior de marca (navy → cian) que aparece en hover */
.vm-app::after{
  content:"";
  position:absolute;
  left:22px; right:22px; top:0;
  height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--vm-navy),var(--vm-cyan));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.vm-app:hover{
  transform:translateY(-3px);
  border-color:#cfdce8;
  box-shadow:var(--vm-shadow-card-hover);
}
.vm-app:hover::after{ transform:scaleX(1); }

/* ----- Título ----- */
.vm-app-title{
  margin:0;
  font-family:var(--vm-font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
  color:var(--vm-navy);
}

/* ----- Versión + fecha ----- */
.vm-app-meta{
  margin:0;
  font-family:var(--vm-font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--vm-muted);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.vm-app-ver{
  color:var(--vm-cyan-deep);
  font-weight:600;
}
.vm-app-meta .vm-app-sep{ color:#c2cfdc; }

/* ----- Enlace a los datos de origen (opcional) ----- */
.vm-app-data{
  align-self:flex-start;
  margin-top:2px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:500;
  color:var(--vm-cyan-deep);
  text-decoration:none;
}
.vm-app-data::before{
  content:"";
  width:14px; height:14px;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 11v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6'/%3E%3C/svg%3E");
}
.vm-app-data:hover{ text-decoration:underline; }

/* ----- Botones de la tarjeta (Abrir / Descargar) ----- */
.vm-app-actions{
  display:flex;
  gap:10px;
  margin-top:16px;       /* separa de la info */
  padding-top:2px;
}
/* empuja los botones al fondo para alinear tarjetas de distinta altura */
.vm-app-data + .vm-app-actions,
.vm-app-meta + .vm-app-actions{ margin-top:auto; padding-top:16px; }

.vm-app-btn{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:42px;
  padding:0 14px;
  border-radius:var(--vm-radius-md);
  font-family:var(--vm-font-body);
  font-size:14px;
  font-weight:600;
  line-height:1;
  text-decoration:none !important;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .2s ease, background .2s ease,
             border-color .2s ease, color .2s ease, filter .2s ease;
}
.vm-app-btn::after{
  content:"";
  width:15px; height:15px;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
  transition:transform .2s ease;
}
.vm-app-btn:focus-visible{ outline:3px solid var(--vm-cyan-soft); outline-offset:2px; }

/* Abrir: degradado de marca (igual que el botón "Ver la demo") */
.vm-app-btn--open{
  color:#fff !important;
  background:linear-gradient(100deg,var(--vm-navy) 0%, var(--vm-cyan-deep) 72%, var(--vm-cyan) 100%);
  box-shadow:0 10px 22px -12px rgba(0,35,78,.55);
}
.vm-app-btn--open::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}
.vm-app-btn--open:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 14px 26px -12px rgba(0,35,78,.6);
}
.vm-app-btn--open:hover::after{ transform:translate(2px,-2px); }

/* Descargar: discreto */
.vm-app-btn--down{
  color:var(--vm-muted) !important;
  background:#fff;
  border:1px solid var(--vm-line);
  font-weight:500;
}
.vm-app-btn--down::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M4 19h16'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M4 19h16'/%3E%3C/svg%3E");
}
.vm-app-btn--down:hover{
  color:var(--vm-cyan-deep) !important;
  border-color:#bfe8ef;
  background:#f8fbfd;
}
.vm-app-btn--down:hover::after{ transform:translateY(1px); }

/* botón deshabilitado (app/descarga aún no disponible) */
.vm-app-btn--disabled{
  opacity:.45;
  pointer-events:none;
  filter:saturate(.4);
  box-shadow:none !important;
}

/* tarjeta sin cuadro de mando todavía (no abre nada) */
.vm-app--soon{ opacity:.7; }
.vm-app--soon:hover{ transform:none; box-shadow:var(--vm-shadow-card); border-color:var(--vm-line); }
.vm-app--soon:hover::after{ transform:scaleX(0); }
.vm-app-soon-tag{
  position:absolute;
  top:18px; right:18px;
  font-family:var(--vm-font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vm-muted);
  background:var(--vm-line-soft);
  border:1px solid var(--vm-line);
  padding:3px 8px;
  border-radius:999px;
}

/* --------------------------------------------------------------------------
   Tarjeta DESACTIVADA  (reutilizable)
   Uso: añadir la clase  vm-app--disabled  al <article class="vm-app">.
   Opcional: añadir dentro  <span class="vm-app-off-tag">No disponible</span>
   La tarjeta sigue visible pero apagada y no responde a clics.
   -------------------------------------------------------------------------- */
.vm-app--disabled{
  opacity:.7;
  filter:grayscale(.9);
  background:var(--vm-line-soft);
  pointer-events:none;       /* bloquea abrir / descargar / datos de origen */
  user-select:none;
}
.vm-app--disabled:hover{
  transform:none;
  box-shadow:var(--vm-shadow-card);
  border-color:var(--vm-line);
}
.vm-app--disabled:hover::after{ transform:scaleX(0); }
.vm-app--disabled .vm-app-icon{
  background:#eef2f6;
  border-color:#e2e8ef;
}
.vm-app--disabled .vm-app-btn{
  box-shadow:none !important;
  opacity:.55;
}

/* etiqueta "No disponible" (esquina superior derecha) */
.vm-app-off-tag{
  position:absolute;
  top:18px; right:18px;
  font-family:var(--vm-font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vm-muted);
  background:var(--vm-line-soft);
  border:1px solid var(--vm-line);
  padding:3px 8px;
  border-radius:999px;
}

@media (prefers-reduced-motion:reduce){
  .vm-app{ animation:none; opacity:1; transform:none; }
}

/* ==========================================================================
   9. PÁGINA DE PRECIOS  (precios.html)
   Página pública con tono algo más formal: explica qué es VisualMetrics
   (bloque .vm-pr-intro) y muestra las tarifas en dos planos —construcción
   (pago único) y mantenimiento/evolución (recurrente)— mediante tarjetas
   .vm-price-card dentro de una rejilla .vm-price-grid. Reutiliza tokens,
   tipografía y el CTA de marca (.vm-flow-cta). Clases con prefijo vm-pr-/
   vm-price-: no interfieren con el resto de páginas.
   ========================================================================== */

/* ----- Layout general de la página ----- */
.vm-pr-main{
  flex:1;
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:clamp(20px,4vw,40px) clamp(18px,4vw,40px) clamp(48px,6vw,72px);
}

/* ----- Hero: ilustración (Excel → cuadro de mando) + titular + chips ----- */
.vm-pr-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(14px,2.2vw,20px);
  max-width:720px;
  margin:clamp(8px,2vw,20px) auto clamp(44px,6vw,68px);
}
.vm-pr-anim{
  width:min(320px,80vw);
  height:auto;
}
.vm-pr-hero .vm-flow-headline{ max-width:660px; }
.vm-pr-hero .vm-pr-feats{ margin-top:clamp(8px,1.6vw,14px); }

/* insignia de plazo: icono de calendario + mensaje clave (sin paréntesis) */
.vm-pr-timebadge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:clamp(12px,2vw,16px);
  font-family:var(--vm-font-body);
  font-size:14px;
  font-weight:600;
  color:var(--vm-cyan-deep);
  background:var(--vm-cyan-soft);
  border:1px solid #c9ecf2;
  padding:6px 14px;
  border-radius:999px;
  opacity:0; transform:translateY(14px);
  animation:vm-in .55s cubic-bezier(.2,.7,.2,1) .12s forwards;
}
.vm-pr-timebadge svg{ width:15px; height:15px; flex-shrink:0; }
@media (prefers-reduced-motion:reduce){
  .vm-pr-timebadge{ animation:none; opacity:1; transform:none; }
}

/* flujo ilustrado: bisagra + figura (vídeo) + micro-flujo en texto */
/* la bisagra aquí es una línea suave (no el kicker mono en mayúsculas) */
.vm-pr-flowbridge{
  margin:0;
  font-family:var(--vm-font-body);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--vm-muted);
}
.vm-pr-flowfig{
  margin:0;
  width:min(360px,86vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.vm-pr-flowfig .vm-pr-anim{ width:100%; }
/* variante con vídeo del proceso real (en lugar del SVG) */
.vm-pr-flowvid{ width:min(560px,92vw); }
.vm-pr-flowvid video{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
  border:1px solid #f7f7f7;
  box-shadow:var(--vm-shadow-card);
  background:#0b1f3a;
}
.vm-pr-flowcap{
  display:grid;
  grid-template-columns:1fr 1fr;
  width:100%;
  column-gap:10px;
}
/* micro-flujo en una línea (Cargas tu Excel → Obtienes…), encima del vídeo */
.vm-pr-flowline{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px 11px;
  margin:0;
  max-width:480px;
  font-family:var(--vm-font-body);
  font-size:14.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--vm-navy);
  text-align:center;
  text-wrap:balance;
}
.vm-pr-flowarrow{
  width:18px;
  height:18px;
  color:var(--vm-cyan-deep);
  flex-shrink:0;
}

/* Animación del SVG del hero (scoped a .vm-pr-anim para no afectar a nada más) */
.vm-pr-anim .cell{ animation:vm-pr-cellOn 3.8s ease-in-out infinite; }
@keyframes vm-pr-cellOn{ 0%,100%{opacity:.5} 50%{opacity:.9} }
.vm-pr-anim .scan{ animation:vm-pr-scan 6s ease-in-out infinite; }
@keyframes vm-pr-scan{ 0%{transform:translateY(0)} 50%{transform:translateY(66px)} 100%{transform:translateY(0)} }
.vm-pr-anim .arrow{ animation:vm-pr-pulse 3.8s ease-in-out infinite; }
@keyframes vm-pr-pulse{ 0%,100%{opacity:.45} 50%{opacity:.85} }
.vm-pr-anim .bar{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:vm-pr-grow 5s ease-in-out infinite;
}
@keyframes vm-pr-grow{ 0%,100%{transform:scaleY(.88)} 50%{transform:scaleY(1)} }
@media (prefers-reduced-motion:reduce){
  .vm-pr-anim .cell,
  .vm-pr-anim .scan,
  .vm-pr-anim .arrow,
  .vm-pr-anim .bar{ animation:none; }
  .vm-pr-anim .bar{ transform:none; }
}

/* ----- Cabecera / intro: qué es VisualMetrics ----- */
.vm-pr-intro{
  max-width:760px;
  margin:0 auto clamp(40px,6vw,64px);
  text-align:center;
}
.vm-pr-kicker{
  display:inline-block;
  font-family:var(--vm-font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
  margin:0 0 16px;
}
.vm-pr-title{
  margin:0 0 18px;
  font-family:var(--vm-font-display);
  font-size:clamp(30px,5.2vw,46px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--vm-navy);
  text-wrap:balance;
}
.vm-pr-lead{
  margin:0 auto;
  max-width:660px;
  font-size:clamp(16px,2.2vw,18.5px);
  line-height:1.65;
  color:var(--vm-muted);
  text-wrap:balance;
}
.vm-pr-lead + .vm-pr-lead{ margin-top:16px; }
.vm-pr-lead strong{ color:var(--vm-ink); font-weight:600; }

/* ----- Cómo trabajamos: cuatro rasgos en línea ----- */
.vm-pr-feats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:26px auto 0;
  max-width:680px;
}
.vm-pr-feat{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--vm-font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.03em;
  color:#3e5468;
  background:var(--vm-line-soft);
  border:1px solid var(--vm-line);
  padding:7px 13px;
  border-radius:999px;
}
.vm-pr-feat::before{
  content:"";
  width:13px;height:13px;
  flex-shrink:0;
  background-color:var(--vm-cyan-deep);
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ----- Rótulo de sección sobre las tarifas ----- */
.vm-pr-section-kicker{
  display:block;
  text-align:center;
  font-family:var(--vm-font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
  margin:0 0 clamp(14px,2vw,18px);
}
.vm-pr-section-title{
  margin:0 auto clamp(28px,4vw,40px);
  text-align:center;
  max-width:620px;
  font-family:var(--vm-font-display);
  font-size:clamp(23px,3.4vw,32px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.12;
  color:var(--vm-navy);
}

/* ----- Rejilla de tarifas ----- */
.vm-price-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(18px,2.4vw,24px);
  align-items:stretch;
}
@media (min-width:780px){
  .vm-price-grid{ grid-template-columns:repeat(2,1fr); }
}
/* variante de una sola tarjeta: centrada y con ancho contenido */
.vm-price-grid--solo{ max-width:560px; margin:0 auto; }
@media (min-width:780px){
  .vm-price-grid--solo{ grid-template-columns:1fr; }
}

/* ----- Tarjeta de tarifa ----- */
.vm-price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--vm-card);
  border:1px solid var(--vm-line);
  border-radius:var(--vm-radius-lg);
  padding:clamp(26px,3.4vw,36px) clamp(24px,3.2vw,34px) clamp(28px,3.4vw,36px);
  box-shadow:var(--vm-shadow-card);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.vm-price-card:hover{
  transform:translateY(-3px);
  border-color:#cfdce8;
  box-shadow:var(--vm-shadow-card-hover);
}
/* tarjeta destacada (el plano principal: la construcción) */
.vm-price-card--feature{
  border-color:#bfe8ef;
  box-shadow:0 1px 2px rgba(0,35,78,.05), 0 22px 44px -22px rgba(0,144,180,.4);
}
.vm-price-card--feature::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  border-radius:var(--vm-radius-lg) var(--vm-radius-lg) 0 0;
  background:linear-gradient(90deg,var(--vm-navy),var(--vm-cyan));
}
.vm-price-badge{
  position:absolute;
  top:18px; right:20px;
  font-family:var(--vm-font-mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
  background:var(--vm-cyan-soft);
  border:1px solid #c9ecf2;
  padding:4px 11px;
  border-radius:999px;
}

.vm-price-eyebrow{
  font-family:var(--vm-font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
  margin:0 0 9px;
}
.vm-price-name{
  margin:0 0 7px;
  font-family:var(--vm-font-display);
  font-size:clamp(21px,2.8vw,26px);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  color:var(--vm-navy);
}
.vm-price-desc{
  margin:0 0 20px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--vm-muted);
}

/* importe */
.vm-price-amount{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.vm-price-from{
  font-family:var(--vm-font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vm-muted);
}
.vm-price-value{
  font-family:var(--vm-font-display);
  font-size:clamp(34px,5vw,46px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--vm-navy);
}
.vm-price-period{
  font-size:15px;
  font-weight:500;
  color:var(--vm-muted);
}
.vm-price-note{
  margin:0 0 22px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--vm-muted);
}
/* garantía destacada: solo se factura tras la aprobación (sacada de la lista) */
.vm-price-guarantee{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 22px;
  padding:12px 16px;
  background:var(--vm-cyan-soft);
  border:1px solid #cfeef4;
  border-radius:var(--vm-radius-md);
  color:var(--vm-navy);
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  text-align:left;
}
.vm-price-guarantee svg{
  flex:0 0 auto;
  width:19px; height:19px;
  margin-top:2px;
  color:var(--vm-cyan-deep);
}
.vm-price-guarantee strong{ font-weight:700; }

/* ----- Tres niveles de precio (cabecera de la tarjeta) -----
   Cabecera de 3 columnas (Esencial / Estándar / Avanzado); el resto de la
   tarjeta es común. En móvil estrecho cada nivel pasa a fila (nombre · precio). */
.vm-tiers-head{
  font-family:var(--vm-font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
  margin:12px 0 12px;
}
.vm-tiers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--vm-line);
  border-radius:var(--vm-radius-md);
  margin-bottom:14px;
}
/* esquinas redondeadas por celda (sin overflow:hidden, para que el chip
   pueda asomar sobre el borde superior) */
.vm-tier:first-child{ border-radius:var(--vm-radius-md) 0 0 var(--vm-radius-md); }
.vm-tier:last-child{  border-radius:0 var(--vm-radius-md) var(--vm-radius-md) 0; }
.vm-tier{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:6px;
  padding:16px 10px 18px;
  background:var(--vm-card);
}
.vm-tier + .vm-tier{ border-left:1px solid var(--vm-line); }

/* nivel destacado (Estándar): sombreado + chip "Más habitual" */
.vm-tier--popular{
  position:relative;
  background:var(--vm-cyan-soft);
}
.vm-tier-chip{
  position:absolute;
  top:-1px; left:50%;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  font-family:var(--vm-font-mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(90deg,var(--vm-navy),var(--vm-cyan));
  padding:3px 9px;
  border-radius:999px;
  box-shadow:0 4px 10px -4px rgba(0,144,180,.6);
}
.vm-tier-name{
  font-family:var(--vm-font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--vm-cyan-deep);
}
.vm-tier-price{
  font-family:var(--vm-font-display);
  font-size:clamp(22px,3.6vw,29px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--vm-navy);
}
.vm-tier-hint{
  font-size:11.5px;
  line-height:1.35;
  color:var(--vm-muted);
  text-wrap:balance;
}
/* En móvil mantenemos las 3 columnas (como en desktop), en versión compacta:
   menos padding, precio y textos más pequeños, para conservar la comparación
   lado a lado en lugar de apilar un precio sobre otro. */
@media (max-width:440px){
  .vm-tier{
    padding:18px 5px 14px;
    gap:4px;
  }
  .vm-tier--popular{ padding:18px 5px 14px; }
  .vm-tier-name{
    font-size:9px;
    letter-spacing:.05em;
  }
  .vm-tier-price{ font-size:clamp(17px,5.2vw,23px); }
  .vm-tier-hint{
    font-size:9.5px;
    line-height:1.25;
  }
  .vm-tier-chip{
    font-size:8px;
    letter-spacing:.04em;
    padding:2px 6px;
  }
}
@media (max-width:340px){
  .vm-tier-hint{ display:none; }
}

/* ----- Tabla comparativa: VisualMetrics vs desarrollo convencional ----- */
.vm-cmp{
  max-width:760px;
  margin:clamp(48px,6vw,72px) auto 0;
}
.vm-cmp-table{
  border:1px solid var(--vm-line);
  border-radius:var(--vm-radius-lg);
  overflow:hidden;
  background:var(--vm-card);
  box-shadow:var(--vm-shadow-card);
}
.vm-cmp-row{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  align-items:stretch;          /* las celdas llenan toda la altura de la fila */
}
.vm-cmp-row + .vm-cmp-row{ border-top:1px solid var(--vm-line); }
.vm-cmp-row > div{
  display:flex;                 /* centra el contenido vertical y horizontalmente */
  align-items:center;
  justify-content:center;
  padding:13px clamp(12px,2vw,18px);
  font-size:14.5px;
  line-height:1.35;
}
.vm-cmp-feature{
  justify-content:flex-start;   /* etiqueta alineada a la izquierda */
  text-align:left;
  font-weight:600;
  font-size:13.5px;
  color:var(--vm-navy);
}
.vm-cmp-vm{
  background:var(--vm-cyan-soft);
  color:var(--vm-navy);
  font-weight:600;
  text-align:center;
}
.vm-cmp-conv{
  color:var(--vm-muted);
  text-align:center;
}
/* indicadores bueno / peor, en gama azul (sin rojo ni verde):
   check cian = mejor · cruz azul-gris apagada = peor */
.vm-cmp-yes,
.vm-cmp-no{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.vm-cmp-yes::before,
.vm-cmp-no::before{
  content:"";
  width:16px;height:16px;
  flex-shrink:0;
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
}
.vm-cmp-yes::before{
  background-color:var(--vm-cyan-deep);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.vm-cmp-no::before{
  background-color:#9fadbe;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* fila de cabecera */
.vm-cmp-head{ background:var(--vm-line-soft); }
.vm-cmp-head > div{ padding-top:15px; padding-bottom:15px; }
.vm-cmp-head .vm-cmp-vm{
  font-family:var(--vm-font-display);
  font-weight:800;
  font-size:15.5px;
  letter-spacing:-.01em;
  background:linear-gradient(155deg,#013a6b 0%, var(--vm-navy) 100%);
  color:#fff;
}
.vm-cmp-head .vm-cmp-conv{
  font-family:var(--vm-font-display);
  font-weight:700;
  font-size:14px;
  color:var(--vm-ink);
}
@media (max-width:560px){
  .vm-cmp-row{ grid-template-columns:1.1fr .95fr .95fr; }
  .vm-cmp-row > div{ padding:11px 9px; font-size:12.5px; }
  .vm-cmp-feature{ font-size:12px; }
  .vm-cmp-head .vm-cmp-vm{ font-size:13px; }
  .vm-cmp-head .vm-cmp-conv{ font-size:12px; }
  .vm-cmp-yes, .vm-cmp-no{ gap:5px; }
  .vm-cmp-yes::before, .vm-cmp-no::before{ width:13px;height:13px; }
}

/* línea separadora dentro de la tarjeta */
.vm-price-rule{
  height:1px;
  background:var(--vm-line);
  margin:0 0 20px;
}

/* lista de prestaciones */
.vm-price-list{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.vm-price-list li{
  position:relative;
  padding-left:28px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--vm-ink);
}
.vm-price-list li::before{
  content:"";
  position:absolute;
  left:0; top:2px;
  width:18px; height:18px;
  border-radius:50%;
  background:
    var(--vm-cyan-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230090b4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 11px no-repeat;
}
.vm-price-list .vm-price-muted{ color:var(--vm-muted); }

/* nota extra bajo la lista (p. ej. la bolsa de horas opcional) */
.vm-price-note--extra{
  margin:-6px 0 22px;
  padding-top:16px;
  border-top:1px dashed var(--vm-line);
  font-style:italic;
}

/* CTA dentro de la tarjeta: empujado al fondo */
.vm-price-cta{
  margin-top:auto;
  align-self:stretch;
  justify-content:center;
  opacity:1;          /* sin animación de entrada heredada del CTA de marca */
  animation:none;
}
/* variante secundaria (mantenimiento): contorno, no degradado */
.vm-price-cta--ghost{
  background:#fff;
  color:var(--vm-navy) !important;
  border:1px solid var(--vm-line);
  box-shadow:none;
}
.vm-price-cta--ghost::after{ display:none; }
.vm-price-cta--ghost:hover{
  background:#f7fafc;
  border-color:#bfe8ef;
  filter:none;
}

/* ----- Nota / aclaración bajo las tarifas ----- */
.vm-pr-fine{
  margin:clamp(24px,3vw,32px) auto 0;
  max-width:720px;
  text-align:center;
  font-size:13px;
  line-height:1.6;
  color:var(--vm-muted);
}

/* ----- Bloque de cierre: llamada a contacto ----- */
.vm-pr-closing{
  margin:clamp(48px,6vw,72px) auto 0;
  max-width:640px;
  text-align:center;
  padding-top:clamp(36px,5vw,52px);
  border-top:1px solid var(--vm-line);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.vm-pr-closing-title{
  margin:0 0 12px;
  font-family:var(--vm-font-display);
  font-size:clamp(23px,3.4vw,32px);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.12;
  color:var(--vm-navy);
}
.vm-pr-closing-text{
  margin:0 0 30px;
  font-size:clamp(15.5px,2.1vw,17.5px);
  line-height:1.6;
  color:var(--vm-muted);
  max-width:520px;
}
.vm-pr-back{
  margin-top:26px;
  font-size:13.5px;
  color:var(--vm-muted);
  text-decoration:none;
  transition:color .2s ease;
}
.vm-pr-back:hover{ color:var(--vm-cyan-deep); }

@media (max-width:600px){
  .vm-price-badge{ position:static; display:inline-block; margin-bottom:12px; }
  .vm-price-card--feature{ padding-top:clamp(28px,3.4vw,36px); }
}
@media (prefers-reduced-motion:reduce){
  .vm-price-card{ transition:none; }
}

/* ==========================================================================
   10. HUB DE CLIENTE — VERSIÓN PREMIUM  (.vm-hub--client)
   Refinado del espacio de cliente para usarlo como plantilla:
   filete de marca, fondo blueprint sutil, cabecera con logo del cliente
   en tarjeta, meta bajo el título y pie de ayuda. Se añade la clase
   vm-hub--client al div.vm-hub; el resto son clases nuevas (no interfieren
   con otras páginas). Referencia viva: c/index_terratest.html.
   ========================================================================== */

/* filete superior de marca, permanente (navy → cian, como las tarjetas) */
.vm-hub--client{
  border:1px solid var(--vm-line);
  background-color:#f8fbfd;
}
.vm-hub--client::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg,var(--vm-navy) 0%,var(--vm-cyan-deep) 55%,var(--vm-cyan) 100%);
  z-index:1;
}
/* activa el micro-grid blueprint (definido vacío en .vm-hub::before) */
.vm-hub--client::before{
  background-image:
    linear-gradient(rgba(0,35,78,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,35,78,.045) 1px, transparent 1px);
}

/* ----- Cabecera: texto a la izquierda, logo del cliente a la derecha ----- */
.vm-head--client{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,3vw,32px);
  flex-wrap:wrap;
}
.vm-head--client .vm-title{ margin-bottom:12px; }

/* logo del cliente en tarjeta blanca, discreta y elegante */
.vm-head-clientlogo{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,2vw,20px) clamp(20px,2.6vw,30px);
  background:#ffffff;
  border:1px solid var(--vm-line);
  border-radius:var(--vm-radius-lg);
  box-shadow:var(--vm-shadow-card);
}
.vm-head-clientlogo img{
  display:block;
  height:clamp(64px,9vw,96px);
  width:auto;
  max-width:min(300px,60vw);
  object-fit:contain;
}

/* meta bajo el título: nº de apps + última actualización */
.vm-hub-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  font-family:var(--vm-font-mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--vm-muted);
}
.vm-hub-meta-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  border-radius:999px;
  background:var(--vm-cyan-soft);
  border:1px solid #cfeef4;
  color:var(--vm-cyan-deep);
  font-weight:600;
}
.vm-hub-meta-chip::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--vm-cyan);
}
.vm-hub-meta-sep{ color:#c2cfdc; }

/* iconos de app algo mayores en el hub premium */
.vm-hub--client .vm-app-icon{ width:66px; height:66px; border-radius:18px; }
.vm-hub--client .vm-app-icon-svg{ width:40px; height:40px; }

/* ----- Pie de ayuda del hub ----- */
.vm-hub-help{
  margin-top:clamp(30px,4.5vw,46px);
  padding-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--vm-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-size:14px;
  color:var(--vm-muted);
}
.vm-hub-help a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  color:var(--vm-cyan-deep);
  text-decoration:none;
}
.vm-hub-help a::after{
  content:"";
  width:14px; height:14px;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;
          mask:center/contain no-repeat;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition:transform .2s ease;
}
.vm-hub-help a:hover::after{ transform:translateX(3px); }

@media (max-width:620px){
  .vm-head--client{ flex-direction:column-reverse; align-items:flex-start; }
  .vm-head-clientlogo{ padding:12px 18px; }
  .vm-head-clientlogo img{ height:56px; }
}

/* ==========================================================================
   11. LANDING COMO TARJETA  (.vm-landing-card)
   La home adopta el lenguaje del hub premium (sección 10): contenedor
   tarjeta sobre #f8fbfd, filete superior navy→cian y micro-grid blueprint,
   pero conservando la composición centrada de la landing. Se activa con
   body.vm-landing--card + main.vm-landing-card (junto a las clases
   existentes). El pie LinkedIn pasa a vivir dentro de la tarjeta
   (.vm-landing-card-foot, al estilo vm-hub-help).
   Referencia viva: index.html.
   ========================================================================== */

/* aire alrededor de la tarjeta (el body sigue centrando en flex) */
body.vm-landing.vm-landing--card{
  padding:clamp(16px,3vw,40px);
  box-sizing:border-box;
}

.vm-landing-card{
  position:relative;
  width:min(880px,100%);
  /* margin:auto (no "0 auto"): si la tarjeta es más alta que el viewport,
     el centrado flex del body no recorta la parte superior */
  margin:auto;
  padding:clamp(44px,6vw,72px) clamp(22px,5vw,56px) clamp(24px,3.5vw,36px);
  border:1px solid var(--vm-line);
  border-radius:28px;
  background-color:#f8fbfd;
  box-shadow:var(--vm-shadow-card);
  overflow:hidden;
}
/* filete superior de marca (como .vm-hub--client::after) */
.vm-landing-card::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:linear-gradient(90deg,var(--vm-navy) 0%,var(--vm-cyan-deep) 55%,var(--vm-cyan) 100%);
  z-index:1;
}
/* micro-grid blueprint, desvanecido hacia abajo (como el hub) */
.vm-landing-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,35,78,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,35,78,.045) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(110% 90% at 50% 0%, #000 35%, transparent 80%);
          mask-image:radial-gradient(110% 90% at 50% 0%, #000 35%, transparent 80%);
  pointer-events:none;
}
.vm-landing-card > *{ position:relative; z-index:1; }

/* el logo respira mejor algo más contenido dentro de la tarjeta */
body.vm-landing .vm-landing-card .vm-landing-logo{ width:min(480px,70vw); }

/* ----- Pie dentro de la tarjeta (sustituye al .vm-landing-foot fijo) ----- */
.vm-landing-card-foot{
  margin-top:clamp(44px,6vw,64px);
  padding-top:clamp(16px,2.5vw,24px);
  border-top:1px solid var(--vm-line);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
  color:#9db0c3;
}
.vm-landing-card-foot a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--vm-muted);
  text-decoration:none;
  font-weight:500;
  padding:4px 8px;
  border-radius:8px;
  transition:color .2s ease, background .2s ease;
}
.vm-landing-card-foot a:hover{
  color:var(--vm-cyan-deep);
  background:var(--vm-cyan-soft);
}
.vm-landing-card-foot svg{ display:block; }

@media (max-width:600px){
  .vm-landing-card{ border-radius:22px; }
  /* en móvil el pie se apila y centra */
  .vm-landing-card-foot{
    flex-direction:column;
    justify-content:center;
    gap:8px;
    font-size:12px;
    text-align:center;
  }
}

/* ============================================================
   12. Selector de idioma (ES / EN)
   Pastilla fija arriba-derecha, presente en todas las páginas
   públicas. El idioma activo va resaltado; el otro enlaza a la
   página equivalente en el otro idioma.
   ============================================================ */
.vm-langswitch{
  position:fixed;
  top:14px;
  right:14px;
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid #d7e0ea;
  box-shadow:0 2px 10px rgba(0,35,78,.08);
  backdrop-filter:saturate(1.2) blur(4px);
  font-size:13px;
  line-height:1;
  -webkit-font-smoothing:antialiased;
}
.vm-langswitch a,
.vm-langswitch span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--vm-muted);
  transition:color .2s ease, background .2s ease;
}
.vm-langswitch a:hover{
  color:var(--vm-cyan-deep);
  background:var(--vm-cyan-soft);
}
/* idioma activo */
.vm-langswitch .is-active{
  color:#fff;
  background:linear-gradient(135deg,var(--vm-navy),var(--vm-cyan));
  cursor:default;
}

@media (max-width:600px){
  .vm-langswitch{ top:10px; right:10px; font-size:12px; }
  .vm-langswitch a,
  .vm-langswitch span{ min-width:30px; height:24px; padding:0 8px; }
}