/* ==============================================================
   TID · Secciones de la propuesta de Inicio (prefijo in-)
   Se apoya en los tokens y componentes de estilo.css
   (.wrap, .sec, .sechead, .svcgrid, .svccard, .process, .ctaband).
   ============================================================== */

/* ---------- ¿Quién eres? ---------- */
.in-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.in-segcard{display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px}
.in-segcard .in-who{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.in-segcard h3{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.15;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.in-segcard p{color:var(--ink2);font-size:15.5px;line-height:1.55}
.in-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.in-links a{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink2);background:var(--bg2);border-radius:8px;padding:6px 10px;transition:color .2s,background .2s}
.in-links a:hover{color:#fff;background:var(--primary)}
.in-links a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ---------- Casos con números ---------- */
.in-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.in-case{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:10px}
.in-case .in-num{font-family:var(--disp);font-weight:700;font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.in-case .in-num small{font-size:.4em;letter-spacing:0;color:var(--muted);margin-left:6px}
.in-case .in-tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}
.in-case h3{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--ink);line-height:1.25}
.in-case p{color:var(--ink2);font-size:15px;line-height:1.55}
.in-case ul{list-style:none;display:grid;gap:4px;margin-top:4px;border-top:1px solid var(--line);padding-top:12px}
.in-case li{font-family:var(--mono);font-size:11.5px;color:var(--ink2);display:flex;gap:8px}
.in-case li::before{content:"✓";color:var(--primary);font-weight:700}
.in-note{margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- Plan anual de mantenimiento ---------- */
.in-plan{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:44px}
.in-plan h2{font-family:var(--disp);font-weight:700;font-size:clamp(28px,3.6vw,40px);line-height:1.06;letter-spacing:-.025em;color:var(--ink);margin-top:14px;text-wrap:balance}
.in-plan > div > p{color:var(--ink2);margin-top:14px;font-size:17px;max-width:46ch}
.in-plan .btn{margin-top:22px}
.in-inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.in-inc li{background:var(--bg);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.in-inc li b{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--ink)}
.in-inc li span{font-size:13.5px;color:var(--ink2);line-height:1.45}
.in-inc li em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}

@media (max-width:900px){
  .in-seg,.in-cases{grid-template-columns:1fr}
  .in-plan{grid-template-columns:1fr;padding:28px 22px}
  .in-inc{grid-template-columns:1fr}
}

/* ---------- Portada plana ---------- */
.in-hero{padding:76px 0 30px}
.in-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.in-hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(38px,5.2vw,64px);line-height:1.02;letter-spacing:-.03em;color:var(--ink);text-wrap:balance;margin-top:18px}
.in-hero h1 em{font-style:normal;color:var(--primary)}
.in-sub{font-size:19px;color:var(--ink2);max-width:52ch;margin-top:22px;line-height:1.55}
.in-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* tarjeta de "¿Te suena alguno?": dolores del cliente que llevan a cada servicio */
.in-pains{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:8px 8px 10px;box-shadow:0 24px 60px -34px rgba(20,25,27,.3)}
.in-pains-head{display:flex;align-items:center;gap:12px;padding:14px 14px 10px}
.in-pains-head span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep)}
.in-pains-head i{flex:1;height:1px;background:var(--line)}
.in-pains ul{list-style:none}
.in-pains a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:13px 14px;border-radius:12px;font-size:15.5px;line-height:1.4;color:var(--ink2);transition:background .2s}
.in-pains a b{color:var(--ink);font-weight:600}
.in-pains a .ar{color:var(--primary);transition:transform .2s var(--eo)}
.in-pains li + li a{border-top:1px solid var(--line-soft)}
@media (hover:hover){ .in-pains a:hover{background:var(--bg)} .in-pains a:hover .ar{transform:translateX(4px)} }
.in-pains a:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.in-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:64px;padding-top:26px;border-top:1px solid var(--line)}
.in-facts span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.in-facts p{margin-top:8px;font-size:15.5px;color:var(--ink2);max-width:34ch}
.in-intro{padding-bottom:0}
.in-intro .sechead{margin-bottom:34px}
.svccard.in-wide{grid-column:1 / -1}
#plan{scroll-margin-top:calc(var(--navh) + 16px)}
#recorrido{scroll-margin-top:var(--navh)}
@media (max-width:900px){
  .in-hero{padding:44px 0 10px}
  .in-hero-grid{grid-template-columns:1fr;gap:30px}
  .in-sub{font-size:17px}
  .in-facts{grid-template-columns:1fr;gap:16px;margin-top:40px}
}

/* ---------- Tarjeta "Lo que revisa un ingeniero" (Eléctricos): misma caja que in-pains, sin enlaces ---------- */
.in-spec li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:12px 14px;font-size:15px;line-height:1.4;color:var(--ink2)}
.in-spec li b{color:var(--ink);font-weight:600}
.in-spec li + li{border-top:1px solid var(--line-soft)}
.in-spec li em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--primary-deep);background:var(--primary-soft);border-radius:8px;padding:4px 8px;white-space:nowrap}