/* Hero de las páginas VMI (IMSTOCK® / IMSTORE®) con el sistema de marca IMS Global.
   Fondo de almacén oscurecido (negro-foto), titular Poppins Black en MAYÚSCULAS en blanco,
   palabra clave en el color de la submarca, línea fina de acento, píldoras con check.
   Submarca: .vmi-hero--stock (naranja #F39E27) · .vmi-hero--store (turquesa #2FA9B4 / #288794) · sin modificador = VMI (ambos). */

.vmi-hero{
  --acento:#F39E27;          /* naranja IMS */
  --acento-2:#ED541E;        /* rojo-naranja IMS */
  --acento-tinta:#101010;    /* texto sobre el acento */
  position:relative; overflow:hidden; text-align:left;
  background:#101010; color:#fff;
  padding:170px 0 90px;
}
.vmi-hero--store{ --acento:#2FA9B4; --acento-2:#288794; --acento-tinta:#0B2A2D; }

/* Foto de almacén oscurecida, sin degradados de colores */
.vmi-hero::before{
  content:""; position:absolute; inset:0;
  background:url(/images/background/4.webp) center/cover no-repeat;
  opacity:.09; filter:grayscale(1) contrast(1.1);
}
/* Retícula fina del isotipo como marca de agua */
.vmi-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
}
.vmi-hero > .container{ position:relative; z-index:2; }
.vmi-hero .barra{ position:absolute; left:0; right:0; bottom:0; height:6px; background:var(--acento); z-index:3; }
.vmi-hero--vmi .barra{ background:linear-gradient(90deg,#F39E27 0 50%,#2FA9B4 50% 100%); }

.vmi-hero .crumb{ display:flex; justify-content:flex-start; text-align:left; margin:0 0 22px; padding:0; }
.vmi-hero .crumb li, .vmi-hero .crumb a{ color:rgba(255,255,255,.7); font-size:13px; }

.vmi-hero .kicker{
  display:flex; width:fit-content; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--acento);
  margin-bottom:14px;
}
.vmi-hero .kicker::before{ content:""; width:28px; height:2px; background:var(--acento); }

/* Logotipo tipográfico de la submarca: IMS blanco + TOCK/TORE en su color */
.vmi-hero .marca{ font-family:"Poppins",sans-serif !important; font-weight:900; font-size:30px; letter-spacing:-.5px; line-height:1; margin-bottom:18px; color:#fff; }
.vmi-hero .marca span{ font-family:inherit !important; color:var(--acento); }
.vmi-hero .marca sup{ font-size:.45em; top:-.9em; color:#fff; }
.vmi-hero .marca small{ display:block; font-family:"Montserrat",sans-serif !important; font-size:11px; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.6); margin-top:8px; }

.vmi-hero h1.vmi-h1{
  font-family:"Poppins",sans-serif !important; font-weight:900; text-transform:uppercase;
  font-size:60px; line-height:1.02; letter-spacing:-1px; color:#fff; margin:0 0 22px;
}
.vmi-hero h1.vmi-h1 em{ font-style:normal; font-family:inherit !important; color:var(--acento); }
.vmi-hero h1.vmi-h1 em.alt{ color:#2FA9B4; }
.vmi-hero .linea{ width:90px; height:4px; background:var(--acento-2); margin:0 0 22px; }
.vmi-hero--store .linea{ background:var(--acento); }

.vmi-hero p{ color:rgba(255,255,255,.88); font-size:17px; line-height:1.6; max-width:560px; }
.vmi-hero p.chico{ font-size:15px; color:rgba(255,255,255,.7); }
.vmi-hero p strong{ color:#fff; }

.vmi-hero .pildoras{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 28px; padding:0; list-style:none; }
.vmi-hero .pildoras li{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:7px 14px 7px 8px;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff;
}
.vmi-hero .pildoras li::before{
  content:"✓"; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:var(--acento); color:var(--acento-tinta); font-size:12px; font-weight:900;
}

/* Botones */
.vmi-hero .botones{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.vmi-hero .btn-vmi{
  display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:14px 26px;
  font-size:14px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.vmi-hero .btn-vmi:hover{ transform:translateY(-2px); }
.vmi-hero .btn-vmi.lleno{ background:var(--acento); color:var(--acento-tinta); }
.vmi-hero .btn-vmi.lleno:hover{ background:#fff; color:#101010; }
.vmi-hero .btn-vmi.linea-b{ border:2px solid rgba(255,255,255,.8); color:#fff; padding:12px 24px; }
.vmi-hero .btn-vmi.linea-b:hover{ background:#fff; color:#101010; }
.vmi-hero .btn-vmi svg{ width:18px; height:18px; flex:none; }
.vmi-hero .btn-vmi:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* Pantalla de SAMI sobre un bloque del color de la submarca (el "piso" del bodegón) */
.vmi-hero .pantalla{ position:relative; padding:0 0 26px 26px; }
.vmi-hero .pantalla::before{ content:""; position:absolute; left:0; bottom:0; width:78%; height:80%; background:var(--acento); border-radius:4px; }
.vmi-hero .pantalla img{ position:relative; display:block; width:100%; height:auto; border-radius:10px; box-shadow:0 30px 60px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12); }
.vmi-hero .pantalla .sello{
  position:absolute; right:-6px; top:-18px; z-index:2; background:#fff; color:#101010; border-radius:999px;
  padding:10px 18px; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.vmi-hero .pantalla .sello b{ color:var(--acento-2); }

/* Hero de /vmi: las dos submarcas */
.vmi-hero .submarcas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vmi-hero .sub{
  display:flex; flex-direction:column; border-radius:14px; padding:24px 22px; background:#1A1A1A;
  border:1px solid rgba(255,255,255,.1); border-top:5px solid var(--c); color:#fff; text-decoration:none;
}
.vmi-hero .sub--stock{ --c:#F39E27; }
.vmi-hero .sub--store{ --c:#2FA9B4; }
.vmi-hero .sub .marca{ font-size:26px; margin-bottom:10px; }
.vmi-hero .sub .marca span{ color:var(--c); }
.vmi-hero .sub p{ font-size:14px; line-height:1.5; margin:0 0 16px; color:rgba(255,255,255,.8); }
.vmi-hero .sub .acciones{ margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; }
.vmi-hero .sub .acciones a{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:8px 14px; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; text-decoration:none;
}
.vmi-hero .sub .acciones a.ver{ background:var(--c); color:#101010; }
.vmi-hero .sub .acciones a.pdf{ border:1.5px solid rgba(255,255,255,.6); color:#fff; }
.vmi-hero .sub .acciones a:hover{ background:#fff; color:#101010; border-color:#fff; }
.vmi-hero .sub .acciones svg{ width:14px; height:14px; }
.vmi-hero .cero{
  grid-column:1 / -1; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-radius:14px; padding:20px 24px; background:#F39E27; color:#101010;
}
.vmi-hero .cero .n{ font-family:"Poppins",sans-serif !important; font-weight:900; font-size:52px; line-height:1; color:#101010; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vmi-hero .cero .t{ font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#101010; }

/* /vmi lleva el titular más largo */
.vmi-hero--vmi h1.vmi-h1{ font-size:52px; }
@media (max-width:1199px){ .vmi-hero h1.vmi-h1{ font-size:50px; } .vmi-hero--vmi h1.vmi-h1{ font-size:46px; } }
@media (max-width:991px){
  .vmi-hero{ padding:140px 0 70px; }
  .vmi-hero h1.vmi-h1{ font-size:42px; }
  .vmi-hero .pantalla{ margin-top:20px; }
}
@media (max-width:767px){
  .vmi-hero{ padding:120px 0 60px; }
  .vmi-hero h1.vmi-h1{ font-size:32px; letter-spacing:-.5px; }
  .vmi-hero .marca{ font-size:24px; }
  .vmi-hero p{ font-size:16px; }
  .vmi-hero .btn-vmi{ width:100%; justify-content:center; }
  .vmi-hero .submarcas{ grid-template-columns:1fr; }
  .vmi-hero .cero .n{ font-size:42px; }
  .vmi-hero .pantalla .sello{ right:6px; top:-14px; font-size:11px; padding:8px 14px; }
}
@media (prefers-reduced-motion:reduce){ .vmi-hero .btn-vmi{ transition:none; } .vmi-hero .btn-vmi:hover{ transform:none; } }