/* DOSE TIC — usa el sistema compartido de base.css
   Incluye las dos líneas de servicio: Soporte e Infraestructura + Desarrollo de Software */
.hero-orbit{animation-duration:46s}

/* ---------- tarjetas de las dos líneas ---------- */
.lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.line-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:38px 36px 34px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.line-card::after{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(10,100,218,.12),transparent 70%);pointer-events:none}
.line-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-200)}
.line-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;background:var(--blue-100);color:var(--blue-500);margin-bottom:10px}
.line-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.line-tag{font:600 .74rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-500)}
.line-card h3{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.line-card p{color:var(--text);max-width:44ch}
.line-go{margin-top:auto;padding-top:14px;font-weight:600;color:var(--blue-500);transition:letter-spacing .3s var(--ease)}
.line-card:hover .line-go{letter-spacing:.02em}
.line-card.dark{background:linear-gradient(150deg,var(--navy-800),var(--navy-900));border-color:transparent;box-shadow:0 20px 50px rgba(6,26,77,.28)}
.line-card.dark::after{background:radial-gradient(circle,rgba(111,168,255,.35),transparent 70%)}
.line-card.dark h3{color:#fff}
.line-card.dark p{color:#C9D9F7}
.line-card.dark .line-tag,.line-card.dark .line-go{color:var(--blue-300)}
.line-card.dark .line-icon{background:rgba(255,255,255,.1);color:#fff}

/* ---------- bloques de cada línea ---------- */
.line-block{border-top:1px solid var(--line)}
.line-block.alt{background:var(--blue-50)}
.line-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:28px;
  padding:22px 26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.line-cta p{color:var(--ink);font-weight:500}

/* ---------- método en 4 pasos ---------- */
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- formulario: si el selector de servicio está oculto, la división ocupa toda la fila ---------- */
.js-contact-form .form-row:has([data-servicio-field][hidden]){grid-template-columns:1fr}

@media (max-width:980px){.steps.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.lines{grid-template-columns:1fr}.line-card{padding:30px 24px 28px}.line-cta{padding:20px}}
@media (max-width:640px){.steps.four{grid-template-columns:1fr}}