/* ==========================================================================
   lucchini-enfoque.css — Secciones nuevas de la portada:
   Soporte mensual remoto  +  Sistemas a medida
   Aditivo: todo con prefijo .en-  Para sacarlo, se borra el <link> y las
   dos secciones (#soporte y #a-medida) del index.html.
   ========================================================================== */

/* ---- Pilares justo debajo del hero ---- */
.en-pilares{position:relative;z-index:5;margin:-70px auto 0;padding:0 32px;max-width:1400px}
.en-pilares-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.en-pilar{
  position:relative;overflow:hidden;border-radius:28px;padding:44px 40px 40px;color:#fff;
  background:linear-gradient(145deg,#0f2744 0%,#050a14 70%);
  border:1px solid rgba(74,158,255,.28);
  box-shadow:0 30px 80px -30px rgba(10,40,100,.7);
  transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
  display:block;
}
.en-pilar:hover{transform:translateY(-8px);box-shadow:0 40px 90px -28px rgba(43,125,224,.65)}
.en-pilar::before{
  content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg,transparent 0 60%,rgba(34,211,238,.35) 80%,transparent 100%);
  animation:en-giro 9s linear infinite;opacity:.55;
}
.en-pilar::after{content:"";position:absolute;inset:2px;border-radius:26px;background:linear-gradient(145deg,#0f2744 0%,#050a14 70%)}
.en-pilar > *{position:relative;z-index:2}
.en-pilar.b{background:linear-gradient(145deg,#143a6b 0%,#050a14 75%)}
.en-pilar.b::after{background:linear-gradient(145deg,#143a6b 0%,#050a14 75%)}
@keyframes en-giro{to{transform:rotate(360deg)}}
.en-pilar .en-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
.en-pilar h3{font-family:var(--font-display);font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.02em;margin:14px 0 14px}
.en-pilar h3 em{font-style:italic;font-weight:500;background:linear-gradient(135deg,var(--blue-400),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.en-pilar p{color:rgba(255,255,255,.72);font-size:16.5px;max-width:460px}
.en-pilar .en-ir{display:inline-flex;gap:8px;align-items:center;margin-top:24px;font-weight:600;color:var(--cyan)}
.en-pilar .en-ir svg{transition:transform .3s}
.en-pilar:hover .en-ir svg{transform:translateX(6px)}
.en-pilar .en-ico{position:absolute;right:28px;top:26px;width:72px;height:72px;opacity:.9;color:var(--blue-400)}

/* ---- Soporte mensual (oscuro) ---- */
.en-soporte{background:var(--blue-950);color:#fff;overflow:hidden}
.en-soporte::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 85% 20%,rgba(34,211,238,.18),transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 80%,rgba(43,125,224,.3),transparent 60%);
}
.en-soporte .section-inner{position:relative}
.en-soporte .label{color:var(--cyan)}
.en-soporte .label::before{background:var(--cyan)}
.en-soporte h2{color:#fff}
.en-soporte h2 em{font-style:italic;font-weight:500;background:linear-gradient(135deg,var(--blue-400),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.en-soporte .section-head p{color:rgba(255,255,255,.72)}
.en-sop-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.en-feats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.en-feat{
  padding:24px 22px;border-radius:20px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);
  transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s;
}
.en-feat:hover{transform:translateY(-5px);border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.07)}
.en-feat svg{width:30px;height:30px;color:var(--cyan);margin-bottom:12px}
.en-feat h4{font-family:var(--font-display);font-size:18px;margin-bottom:6px}
.en-feat p{font-size:14.5px;color:rgba(255,255,255,.62);line-height:1.55}
.en-sop-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* Terminal de sesión remota */
.en-term{
  position:sticky;top:110px;border-radius:20px;overflow:hidden;
  background:#070d1a;border:1px solid rgba(74,158,255,.35);
  box-shadow:0 0 0 1px rgba(34,211,238,.08),0 40px 90px -30px rgba(34,211,238,.35);
}
.en-term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08)}
.en-term-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.en-term-bar i:nth-child(2){background:#febc2e}
.en-term-bar i:nth-child(3){background:#28c840}
.en-term-bar span{margin-left:10px;font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,.45)}
.en-term-bar b{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:#4ade80;font-weight:500;display:flex;align-items:center;gap:6px}
.en-term-bar b::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite}
.en-term-body{padding:22px 22px 18px;font-family:var(--font-mono);font-size:13px;line-height:1.95;min-height:330px}
.en-ln{opacity:0;transform:translateX(-6px);white-space:normal}
.en-term.in .en-ln{animation:en-ln .5s ease forwards}
.en-term.in .en-ln:nth-child(1){animation-delay:.3s}
.en-term.in .en-ln:nth-child(2){animation-delay:1.1s}
.en-term.in .en-ln:nth-child(3){animation-delay:1.9s}
.en-term.in .en-ln:nth-child(4){animation-delay:2.7s}
.en-term.in .en-ln:nth-child(5){animation-delay:3.5s}
.en-term.in .en-ln:nth-child(6){animation-delay:4.3s}
.en-term.in .en-ln:nth-child(7){animation-delay:5.1s}
@keyframes en-ln{to{opacity:1;transform:none}}
.en-ln .p{color:var(--cyan)}
.en-ln .o{color:rgba(255,255,255,.55)}
.en-ln .k{color:#4ade80}
.en-ln .w{color:#fbbf24}
.en-ln.cur::after{content:"▋";color:var(--cyan);animation:blink 1s steps(1) infinite;margin-left:4px}
.en-term-pie{padding:12px 22px;border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:rgba(255,255,255,.38);font-family:var(--font-mono)}

/* ---- Sistemas a medida (claro, con acento) ---- */
.en-medida{background:linear-gradient(180deg,#f8fafc 0%,#eaf2ff 100%);overflow:hidden}
.en-medida::before{
  content:"";position:absolute;right:-180px;top:-120px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(43,125,224,.2),transparent 65%);pointer-events:none;
}
.en-med-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start;position:relative}
.en-pasos{list-style:none;position:relative;counter-reset:paso}
.en-pasos::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:linear-gradient(var(--blue-500),var(--cyan),transparent)}
.en-paso{position:relative;padding:0 0 30px 74px;counter-increment:paso}
.en-paso::before{
  content:counter(paso);position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;
  background:linear-gradient(135deg,var(--blue-600),var(--cyan));box-shadow:0 10px 26px -8px rgba(43,125,224,.7);
}
.en-paso h4{font-family:var(--font-display);font-size:21px;margin-bottom:4px;color:var(--gray-900)}
.en-paso p{color:var(--gray-600);font-size:15.5px}
.en-hechos-t{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600);margin-bottom:16px}
.en-hechos{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.en-hecho{
  padding:20px 20px 18px;border-radius:18px;background:#fff;border:1px solid var(--gray-200);
  box-shadow:0 12px 30px -18px rgba(15,39,68,.35);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .3s;
}
.en-hecho:hover{transform:translateY(-5px);border-color:var(--blue-400);box-shadow:0 22px 44px -18px rgba(43,125,224,.5)}
.en-hecho b{display:block;font-family:var(--font-display);font-size:17px;color:var(--gray-900);margin-bottom:3px}
.en-hecho span{font-size:13.5px;color:var(--gray-500)}
.en-stack{margin-top:22px;padding:18px 20px;border-radius:16px;background:var(--blue-900);color:rgba(255,255,255,.8);font-size:14.5px;display:flex;gap:12px;align-items:flex-start}
.en-stack code{font-family:var(--font-mono);color:var(--cyan);font-size:13px}
.en-med-cta{margin-top:30px}

@media (max-width:1000px){
  .en-sop-grid,.en-med-grid{grid-template-columns:1fr;gap:40px}
  .en-term{position:relative;top:0}
}
@media (max-width:760px){
  .en-pilares{margin-top:-40px;padding:0 20px}
  .en-pilares-grid{grid-template-columns:1fr}
  .en-pilar{padding:34px 26px 30px}
  .en-feats,.en-hechos{grid-template-columns:1fr}
  .en-pilar .en-ico{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  .en-pilar::before{animation:none}
  .en-ln{opacity:1;transform:none}
  .en-term.in .en-ln{animation:none}
}

/* Celulares angostos: que el botón "Hablemos" del menú no quede cortado */
@media (max-width:480px){
  .nav .btn{padding:10px 14px;font-size:13px;white-space:nowrap}
  .nav .btn svg{display:none}
}