/* ============================================================
   N5Group · Landing Desarrollo de Software / APIs
   Paleta extraída del asterisco de marca (verde → cian → azul).
   ============================================================ */

:root{
  /* Marca (del asterisco) */
  --green:#06C68A;
  --emerald:#00A878;
  --cyan:#00A8D8;
  --azure:#0090C0;
  --blue:#1E5AD6;
  --royal:#1848C0;
  --navy:#0A2A6B;
  --ink:#08183B;            /* azul muy profundo: texto/secciones oscuras */
  --grad:linear-gradient(120deg,var(--green) 0%,var(--cyan) 48%,var(--blue) 100%);

  /* Neutros */
  --paper:#FFFFFF;
  --mist:#EDEFF3;           /* gris claro (fondo del logo) */
  --line:#DCE3EC;
  --muted:#54617A;
  --ok:#12A46B;

  --radius:16px;
  --maxw:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Archivo",system-ui,sans-serif;line-height:1.08;margin:0;letter-spacing:-.015em}
h1{font-weight:800;font-size:clamp(2.2rem,4.8vw,3.6rem)}
h2{font-weight:700;font-size:clamp(1.7rem,3.1vw,2.5rem)}
h3{font-weight:700;font-size:1.16rem}
p{margin:0}
a{color:var(--blue);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"Archivo",sans-serif;font-weight:700;font-size:1.02rem;
  padding:15px 28px;border-radius:12px;border:0;cursor:pointer;
  transition:transform .12s ease,box-shadow .14s ease,filter .14s ease;
}
.btn-primary{color:#fff;background:var(--grad);box-shadow:0 8px 24px rgba(30,90,214,.28)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,90,214,.38)}
.btn-line{background:transparent;border:1.6px solid rgba(255,255,255,.55);color:#fff}
.btn-line:hover{background:rgba(255,255,255,.12)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:6px}

/* ---------- Logo (asterisco) ---------- */
.brand{display:flex;align-items:center;gap:.6rem;font-family:"Archivo";font-weight:800;font-size:1.3rem;letter-spacing:.01em;color:#fff}
.brand .ast{width:34px;height:34px;flex:0 0 auto}
.brand .n5{line-height:1}
.brand .n5 span{display:block;font-size:.62rem;font-weight:600;letter-spacing:.18em;color:#bcd;opacity:.85}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(8,24,59,.94);backdrop-filter:blur(9px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.menu{display:flex;align-items:center;gap:1.6rem}
.menu a{color:#c9d6ea;font-weight:500;font-size:.98rem}
.menu a:hover{color:#fff}
.nav-cta{display:flex;align-items:center;gap:1rem}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:.2s}
@media(max-width:900px){
  .menu{position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);
        max-height:0;overflow:hidden;transition:max-height .28s ease;border-bottom:1px solid rgba(255,255,255,.1)}
  .menu.open{max-height:340px}
  .menu a{width:100%;padding:15px 24px;border-top:1px solid rgba(255,255,255,.07)}
  .burger{display:block}
  .nav-cta .btn{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
   radial-gradient(760px 420px at 82% 8%,rgba(0,168,216,.30),transparent 62%),
   linear-gradient(165deg,var(--ink) 0%,var(--navy) 62%,#0d327f 100%);
   color:#e9f0fb;padding:74px 0 84px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center}
.kicker{color:var(--cyan);font-weight:600;font-size:1rem;margin-bottom:16px}
.hero h1{color:#fff;max-width:15ch}
.hero .lead{margin-top:20px;font-size:1.2rem;color:#b9c8e2;max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-trust{margin-top:26px;font-size:.98rem;color:#8ea3c6;max-width:46ch}
.hero-trust b{color:#dce7f7;font-weight:600}
.hero-art{display:flex;justify-content:center;align-items:center}
.hero-art .big-ast{width:min(360px,80%);height:auto;filter:drop-shadow(0 24px 60px rgba(0,168,216,.35))}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:30px}.hero-art{order:-1}.hero-art .big-ast{width:210px}.hero h1,.hero .lead,.hero-trust{max-width:none}}

/* ---------- Secciones ---------- */
section{padding:82px 0}
.s-mist{background:var(--mist)}
.s-ink{background:var(--ink);color:#dce7f7}
.s-ink h2{color:#fff}
.lead2{color:var(--muted);font-size:1.14rem;max-width:62ch;margin-top:14px}
.s-ink .lead2{color:#a9bcdd}
.eyebrow{color:var(--emerald);font-weight:600;font-size:1rem;margin-bottom:12px}

/* Servicios */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:42px}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:24px 22px;position:relative;overflow:hidden;transition:transform .14s ease,box-shadow .14s ease}
.svc::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad)}
.svc:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(8,24,59,.10)}
.svc .ic{width:40px;height:40px;margin-bottom:14px}
.svc h3{margin-bottom:8px}
.svc p{color:var(--muted);font-size:.98rem}
.svc.star::after{content:"Especialidad N5";position:absolute;top:14px;right:14px;font-size:.66rem;font-weight:700;
  font-family:"Archivo";color:var(--emerald);background:rgba(6,198,138,.12);padding:3px 8px;border-radius:999px}
@media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* Proceso (secuencia -> numeración legítima) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 28px;margin-top:44px;counter-reset:s}
.step{position:relative;padding-left:60px}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-4px;
  font-family:"Archivo";font-weight:800;font-size:1.5rem;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.step h3{margin-bottom:6px}
.step p{color:#a9bcdd}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:22px}}

/* Tecnologías */
.tech{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.tech span{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 18px;font-weight:600;color:var(--navy);font-size:.96rem}

/* Por qué N5 */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:42px}
.why .item{display:flex;gap:16px;align-items:flex-start}
.why .dot{flex:0 0 auto;width:44px;height:44px;border-radius:12px;background:var(--grad);display:grid;place-items:center}
.why .dot svg{width:22px;height:22px}
.why h3{margin-bottom:5px}
.why p{color:var(--muted)}
@media(max-width:720px){.why{grid-template-columns:1fr}}

/* Clientes (LOGOS) */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:38px}
.logo-slot{background:var(--paper);border:1px solid var(--line);border-radius:12px;min-height:96px;
  display:flex;align-items:center;justify-content:center;padding:18px}
.logo-slot img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:.18s}
.logo-slot:hover img{filter:none;opacity:1}
.logo-slot.empty{border-style:dashed;background:#f6f8fb}
.logo-slot.empty::after{content:"Logo";color:#aab6c8;font-weight:600;font-size:.9rem}
@media(max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.logos{grid-template-columns:repeat(2,1fr)}}

/* Contacto / formulario */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.contact-copy h2{color:#fff}
.contact-copy p{color:#a9bcdd;margin-top:14px;max-width:42ch}
.contact-copy .ph{margin-top:22px;font-family:"Archivo";font-weight:700;font-size:1.35rem;color:#fff}
.contact-copy .ph a{color:#fff}
.card{background:var(--paper);color:var(--ink);border-radius:var(--radius);padding:30px;box-shadow:0 26px 60px rgba(0,0,0,.30)}
.card h3{font-size:1.32rem;margin-bottom:4px}
.card .sub{color:var(--muted);font-size:.95rem;margin-bottom:20px}
.field{margin-bottom:15px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:1rem;color:var(--ink);background:#fbfdff;transition:border-color .12s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cyan);outline:none}
.field textarea{min-height:96px;resize:vertical}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#d0342c}
.card .btn-primary{width:100%;margin-top:6px}
.form-note{font-size:.82rem;color:var(--muted);text-align:center;margin-top:12px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:30px}.grid2{grid-template-columns:1fr}}

/* Footer */
footer{background:#050f28;color:#8ea3c6;padding:40px 0 30px;font-size:.94rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.foot a{color:#c9d6ea}
.foot .brand{font-size:1.1rem}
.foot-legal{width:100%;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.85rem;color:#5f7194}
/* "Un proyecto de N5Group" — muy sutil */
.subtle{font-size:.8rem;color:#3f5178;letter-spacing:.02em}
.subtle a{color:#5f7194}

/* WhatsApp flotante */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:80;width:58px;height:58px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .15s ease}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:32px;height:32px}
@media(max-width:560px){.wa-float{right:16px;bottom:16px;width:54px;height:54px}}

/* Página Gracias */
.gracias{min-height:72vh;display:grid;place-items:center;text-align:center;
  background:radial-gradient(700px 380px at 50% 0,rgba(0,168,216,.12),transparent 60%)}
.gracias .tick{width:82px;height:82px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 12px 30px rgba(30,90,214,.30)}
.gracias .tick svg{width:40px;height:40px}
.gracias h1{max-width:16ch;margin:0 auto}
.gracias p{color:var(--muted);font-size:1.14rem;max-width:52ch;margin:16px auto 30px}

/* Motion: una sola entrada orquestada en el hero */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spin-in{from{opacity:0;transform:rotate(-25deg) scale(.85)}to{opacity:1;transform:none}}
.hero .kicker,.hero h1,.hero .lead,.hero-cta,.hero-trust{animation:rise .6s ease both}
.hero h1{animation-delay:.06s}.hero .lead{animation-delay:.12s}.hero-cta{animation-delay:.18s}.hero-trust{animation-delay:.24s}
.hero-art .big-ast{animation:spin-in .8s cubic-bezier(.2,.7,.2,1) both}