/* ═══════════════════════════════════════════════════════════════
   Inicio · quiénes somos y por dónde se entra
   El degradado azul→rosa de la marca manda, como en el sitio
   original. Primero el posicionamiento con el iso de fondo, después
   las cifras, la promesa, y el puente a las cuatro especialidades.
   ═══════════════════════════════════════════════════════════════ */

.hm{--az:#3245FF;--ro:#e91e63;--vi:#8B2FE8;
  background:#0b0b1a;color:#fff}

/* ── el banner ──────────────────────────────────────────────── */
.hm-hero{position:relative;overflow:hidden;
  padding:clamp(54px,10vh,120px) 0 clamp(40px,6vh,72px)}
/* los colores vivos del sitio original, bien saturados */
.hm-hero::before{content:"";position:absolute;left:50%;top:-22%;
  width:min(1240px,132%);aspect-ratio:1.9/1;transform:translateX(-50%);
  pointer-events:none;z-index:0;filter:blur(72px);opacity:.55;
  background:radial-gradient(ellipse at 20% 52%,var(--az),transparent 56%),
             radial-gradient(ellipse at 52% 44%,var(--vi),transparent 54%),
             radial-gradient(ellipse at 82% 54%,var(--ro),transparent 56%)}
/* el iso de la marca, enorme y translúcido */
.hm-iso{position:absolute;right:-6%;top:48%;transform:translateY(-50%);
  width:min(660px,64%);z-index:0;pointer-events:none;
  opacity:.07;filter:saturate(0) brightness(2)}
@media(max-width:900px){
  .hm-iso{right:-22%;width:92%;opacity:.05}
}
.hm-in{position:relative;z-index:1;max-width:1220px;margin:0 auto;
  padding:0 clamp(20px,5vw,48px)}

.hm-ojal{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:16px}
.hm-ojal i{width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--az),var(--ro))}
.hm-h1{font-size:clamp(36px,6.2vw,78px);font-weight:600;line-height:1;
  letter-spacing:-.042em;margin:0;max-width:17ch;text-wrap:balance}
.hm-h1 em{font-style:normal;
  background:linear-gradient(100deg,#7C8BFF,var(--ro));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm-lead{font-size:clamp(16px,1.9vw,21px);line-height:1.5;
  color:rgba(255,255,255,.7);margin:20px 0 0;max-width:56ch;text-wrap:pretty}

.hm-acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,4vh,34px)}
.hm-btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;
  font-weight:600;padding:14px 30px;border-radius:999px;color:#fff;
  background:linear-gradient(100deg,var(--az),var(--ro));
  transition:transform .3s var(--ease-j),box-shadow .3s var(--ease-j)}
.hm-btn:hover{color:#fff;transform:translateY(-2px);
  box-shadow:0 14px 32px -12px var(--ro)}
.hm-btn{position:relative;overflow:hidden;isolation:isolate}
/* destello que barre el boton cada tanto, para que el ojo lo encuentre */
.hm-btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.42) 50%,
    transparent 68%);
  transform:translateX(-120%);
  animation:hm-destello 4.6s var(--ease-j) 1.4s infinite}
.hm-btn:hover::after{animation-duration:1.6s;animation-delay:0s}
@keyframes hm-destello{
  0%{transform:translateX(-120%)}
  38%,100%{transform:translateX(120%)}}
.hm-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.3;fill:none;
  transition:transform .35s var(--ease-j)}
.hm-btn:hover svg{transform:translateX(4px)}
.hm-btn--fino::after{display:none}
.hm-btn--fino{background:none;border:1px solid rgba(255,255,255,.26);
  color:rgba(255,255,255,.86)}
.hm-btn--fino:hover{border-color:#fff;color:#fff;box-shadow:none}

/* ── la promesa · el mapa de cobertura de fondo ─────────────── */
.hm-falta{position:relative;z-index:1;overflow:hidden;
  display:flex;align-items:center;
  min-height:clamp(360px,50vh,520px);
  padding:clamp(48px,8vh,92px) 0 clamp(52px,8vh,96px);
  border-top:1px solid rgba(255,255,255,.09);
  background-image:url('../img/mapa.webp');
  background-size:cover;background-position:center right;
  background-repeat:no-repeat}
/* el mapa tiene zonas claras: sin este velo el texto se pierde */
.hm-falta::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(11,11,26,.95) 0%,
    rgba(11,11,26,.82) 38%,rgba(11,11,26,.30) 72%,rgba(11,11,26,.55) 100%)}
.hm-falta-in{position:relative;z-index:1;width:100%;
  max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,48px)}
/* la mitad derecha del mapa es la ilustración: el texto no la pisa */
.hm-falta-in > *{max-width:min(100%,54ch)}
@media(max-width:820px){
  .hm-falta{background-position:center}
  .hm-falta::before{background:linear-gradient(180deg,rgba(11,11,26,.92),
    rgba(11,11,26,.86))}}

/* el dato destacado, debajo del texto */
.hm-dato{margin-top:clamp(22px,3.4vh,30px);
  display:inline-flex;flex-direction:column;gap:2px;
  padding:16px 26px 18px;border-radius:18px;
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hm-dato b{font-size:clamp(30px,4.2vw,50px);font-weight:600;line-height:1;
  letter-spacing:-.04em;
  background:linear-gradient(118deg,#8E9BFF 6%,#C86BFF 50%,#FF6B9D 94%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.hm-dato span{font-size:clamp(12.5px,1.3vw,14.5px);font-weight:500;
  letter-spacing:.04em;color:rgba(255,255,255,.72)}
.hm-falta h2{font-size:clamp(26px,3.8vw,46px);font-weight:600;line-height:1.04;
  letter-spacing:-.038em;margin:0;text-wrap:balance}
.hm-falta h2 em{font-style:normal;
  background:linear-gradient(100deg,#7C8BFF,var(--ro));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hm-falta p{font-size:clamp(15.5px,1.7vw,18px);line-height:1.55;
  color:rgba(255,255,255,.72);margin:18px 0 0;max-width:46ch;
  text-wrap:pretty}

/* ── el puente: cuatro accesos ──────────────────────────────── */
.hm-puente{padding:clamp(30px,5vh,60px) 0 clamp(50px,8vh,100px);
  border-top:1px solid rgba(255,255,255,.09)}
.hm-tit{font-size:clamp(24px,3.4vw,42px);font-weight:600;line-height:1.06;
  letter-spacing:-.035em;margin:0;text-wrap:balance}
.hm-sub{font-size:clamp(15px,1.7vw,18px);line-height:1.5;
  color:rgba(255,255,255,.6);margin:12px 0 0;max-width:54ch;text-wrap:pretty}

.hm-vias{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,2.2vw,24px);margin-top:clamp(26px,4vh,42px)}
@media(max-width:820px){.hm-vias{grid-template-columns:1fr}}

.hm-via{position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:clamp(16px,2vw,22px);color:#fff;
  border:1px solid rgba(255,255,255,.13);
  /* el degradado azul→rosa del banner principal, teñido por la
     solución de cada tarjeta con su --v1 en el medio */
  background:
    radial-gradient(125% 120% at 22% 0%,rgba(255,255,255,.20),transparent 56%),
    linear-gradient(152deg,var(--az) 0%,var(--v1) 32%,var(--v2) 54%,
      var(--ro) 74%,#12121f 100%);
  opacity:0;transform:translateY(22px);
  transition:opacity .5s var(--ease-j),transform .55s var(--ease-j),
             border-color .4s var(--ease-j),box-shadow .45s var(--ease-j)}
.hm-via.vis{opacity:1;transform:none}
.hm-via:hover{color:#fff;border-color:color-mix(in srgb,var(--v1) 70%,transparent);
  box-shadow:0 26px 56px -26px rgba(0,0,0,.9)}
.hm-via::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:4;
  background:linear-gradient(90deg,var(--v1),var(--v2));
  transform:scaleX(.24);transform-origin:left;
  transition:transform .5s var(--ease-j)}
.hm-via:hover::before{transform:scaleX(1)}

/* la marca de cada solución */
.hm-via-marca{position:relative;z-index:3;
  padding:clamp(18px,2.4vw,26px) clamp(18px,2.4vw,26px) 0;
  display:flex;align-items:center;min-height:34px}
.hm-via-marca img{height:clamp(28px,3.4vw,40px);width:auto;display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.hm-via-marca{min-height:44px}
.hm-via-marca .wm{font-size:clamp(24px,3vw,34px);font-weight:700;
  letter-spacing:-.03em;color:#fff;
  text-shadow:0 6px 18px rgba(0,0,0,.4)}
.hm-via-marca .wm em{font-style:normal;color:#fff;opacity:.72}

/* la escena con el mockup · misma altura en las cuatro, así la fila
   no se desbalancea porque un mockup sea más alto que otro */
.hm-via-arte{position:relative;z-index:1;overflow:hidden;
  aspect-ratio:16/9.2;
  padding:clamp(16px,2.4vw,26px) clamp(18px,2.4vw,26px) 0;
  display:flex;justify-content:center;align-items:flex-end}
.hm-via-arte > img{width:100%;height:100%;object-fit:cover;
  border-radius:10px;position:absolute;inset:0;
  transition:transform .7s var(--ease-j)}
.hm-via:hover .hm-via-arte > img{transform:scale(1.04)}

/* mockup de notebook, dibujado */
.mk-lap{width:min(94%,420px);max-height:100%;
  display:flex;flex-direction:column;
  transition:transform .6s var(--ease-j)}
.hm-via:hover .mk-lap{transform:translateY(-5px)}
.mk-lap-pant{border:5px solid #23232e;border-bottom:none;
  border-radius:9px 9px 0 0;background:#0b0b12;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.13);min-height:0}
.mk-lap-pant img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:top center}
.mk-lap-base{height:11px;border-radius:0 0 11px 11px;
  background:linear-gradient(180deg,#2b2b36,#191921);
  box-shadow:0 0 0 1px rgba(255,255,255,.11);position:relative}
.mk-lap-base::after{content:"";position:absolute;left:50%;top:0;
  width:16%;height:3px;border-radius:0 0 4px 4px;transform:translateX(-50%);
  background:rgba(255,255,255,.14)}

/* mockup de celular · se mide por alto, no por ancho, para que entre
   en la misma escena que las notebooks */
.mk-cel{height:100%;width:auto;border-radius:18px 18px 0 0;padding:5px 5px 0;
  background:linear-gradient(170deg,#2e2e3a,#16161d);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 20px 34px -18px rgba(0,0,0,.9);
  transition:transform .6s var(--ease-j)}
.hm-via:hover .mk-cel{transform:translateY(-5px)}
.mk-cel img{display:block;height:100%;width:auto;
  border-radius:13px 13px 0 0;object-fit:cover;object-position:top center}

/* la pantalla de i3 no es una captura: es el equipo, va flotando */
.mk-pant{height:100%;display:flex;align-items:flex-end;justify-content:center;
  transition:transform .6s var(--ease-j)}
.hm-via:hover .mk-pant{transform:translateY(-5px)}
.mk-pant img{display:block;max-height:100%;max-width:100%;width:auto;
  height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.55))}

.hm-via-cuerpo{position:relative;z-index:3;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px) clamp(18px,2.4vw,26px);
  display:flex;flex-direction:column;flex:1;
  background:linear-gradient(180deg,rgba(8,8,16,0),rgba(8,8,16,.88) 20%,
    rgba(8,8,16,.97) 52%)}
.hm-via h3{font-size:clamp(19px,2.1vw,25px);font-weight:600;letter-spacing:-.025em;
  margin:0 0 9px;text-wrap:balance}
.hm-via p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.68);
  margin:0 0 16px;text-wrap:pretty}
.hm-via-ir{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#fff}
.hm-via-ir svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.3;fill:none;
  transition:transform .35s var(--ease-j)}
.hm-via:hover .hm-via-ir svg{transform:translateX(4px)}

/* ── nada de subrayados en esta página ──────────────────────── */
.hm a,.hm a:hover,.hm h1,.hm h2,.hm h3,.hm h4,
.hm .hm-via-ir,.hm .hm-btn{text-decoration:none}
.hm h1 em,.hm h2 em,.hm .hm-cifra b{text-decoration:none;border-bottom:none}

@media(prefers-reduced-motion:reduce){
  .hm-via{opacity:1;transform:none}
  .hm-btn::after{animation:none;display:none}
}

/* ── el formulario del cierre, más corto ─────────────────────────
   Los campos van de a dos (seis filas se vuelven tres) y se le baja
   el aire entre uno y otro. El alto de la tarjeta cae casi a la
   mitad sin sacar ningún dato. */
.form-compacta{padding:26px}
.form-compacta h3{margin-bottom:4px}
.form-compacta > p{margin-bottom:18px}
.form-compacta .f-grid{gap:0 12px}
.form-compacta .f-campo{margin-bottom:11px}
.form-compacta .f-campo label{font-size:12.5px;margin-bottom:5px}
.form-compacta .f-campo input,
.form-compacta .f-campo select{min-height:42px;padding:9px 13px;font-size:14.5px}
/* a media columna el texto de la opción no puede pisar la flecha */
.form-compacta .f-campo select{padding-right:36px;text-overflow:ellipsis}
.form-compacta .f-legal{margin-top:11px;font-size:12px}
@media(max-width:520px){
  /* en una sola columna el ahorro se lo lleva el interlineado */
  .form-compacta{padding:22px}
  .form-compacta .f-campo{margin-bottom:10px}
}