/* Plan
   Layout: single-page consultancy site — sticky nav, hero with a vertex/sunset mark over a
   faint synthwave horizon grid, honest trust strip (no fabricated stats), five service
   packages as a graduated card grid, a 4-step process rail, a sector grid, and a closing
   contact block. Deliberate single dark theme: "midnight signal" — near-black surfaces,
   a confident blue accent for trust and clarity, a cool teal secondary accent as the one
   restrained nod to 80s-90s synthwave, kept as thin lines and gradients rather than neon.
*/
:root{
  --void:#0a0e18;
  --surface:#111a2c;
  --surface-2:#182238;
  --line:rgba(76,127,240,.18);
  --line-strong:rgba(76,127,240,.36);
  --ink:#f3efe4;
  --ink-dim:#a7afc4;
  --ink-faint:#6b7390;
  --gold:#4c7ff0;
  --gold-soft:#93b4ff;
  --teal:#3ed3c8;
  --teal-dim:#2a8f89;
  color-scheme: dark;

  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow.teal{color:var(--teal)}
section{padding-block:88px}
@media (max-width:640px){ section{padding-block:56px} }

/* ---------- background texture: faint synthwave horizon ---------- */
.horizon{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
}
.horizon svg{position:absolute; left:50%; transform:translateX(-50%); opacity:.5}

/* ---------- header ---------- */
header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:rgba(10,14,24,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:16px;
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em;}
.brand .mark{width:30px;height:30px;flex:none}
.navlinks{display:flex; align-items:center; gap:28px; font-size:14px; color:var(--ink-dim)}
.navlinks a{text-decoration:none; transition:color .15s}
.navlinks a:hover{color:var(--gold-soft)}
.navlinks{display:none}
@media (min-width:800px){ .navlinks{display:flex} }
.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px;
  border-radius:8px; padding:11px 20px; cursor:pointer;
  border:1px solid transparent; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#08101f;}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold)}
.btn-sm{padding:8px 14px; font-size:13px}

/* ---------- hero ---------- */
.hero{position:relative; padding-block:96px 72px; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-inner{position:relative; z-index:2; display:grid; gap:40px; align-items:center}
@media (min-width:920px){ .hero-inner{grid-template-columns:1.1fr .9fr} }
.hero h1{font-size:clamp(32px,5vw,52px); line-height:1.08; margin-top:14px}
.hero h1 em{font-style:normal; color:var(--gold-soft)}
.hero p.lead{margin-top:20px; font-size:18px; color:var(--ink-dim); max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px}
.hero-note{margin-top:18px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-faint); letter-spacing:.02em}
.hero-note .dot{color:var(--teal)}
.hero-visual{position:relative; display:flex; align-items:center; justify-content:center}
.hero-visual svg{width:min(340px,80%); height:auto}

/* ---------- trust strip ---------- */
.trust{border-bottom:1px solid var(--line)}
.trust .wrap{
  display:grid; gap:20px; padding-block:28px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .trust .wrap{grid-template-columns:repeat(4,1fr)} }
.trust-item{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-dim)}
.trust-item svg{flex:none; width:18px; height:18px; margin-top:2px; color:var(--teal)}
.trust-item b{display:block; color:var(--ink); font-weight:600; font-size:14px}

/* ---------- section headers ---------- */
.sec-head{max-width:640px; margin-bottom:48px}
.sec-head h2{font-size:clamp(26px,3.4vw,36px); margin-top:12px}
.sec-head p{margin-top:14px; color:var(--ink-dim); font-size:16px}

/* ---------- services ---------- */
.pkg-grid{display:grid; gap:20px; grid-template-columns:1fr}
@media (min-width:680px){ .pkg-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .pkg-grid{grid-template-columns:repeat(3,1fr)} }
.pkg{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:26px; display:flex; flex-direction:column; gap:16px;
  transition:border-color .18s ease, transform .18s ease;
}
.pkg:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.pkg.featured{border-color:var(--line-strong); background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.pkg-top{display:flex; align-items:center; justify-content:space-between}
.pkg-num{font-family:var(--font-mono); font-size:12px; color:var(--ink-faint)}
.pkg-tag{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); border:1px solid var(--teal-dim); border-radius:100px; padding:3px 9px}
.pkg h3{font-size:19px}
.pkg .desc{color:var(--ink-dim); font-size:14.5px}
.pkg ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.pkg li{display:flex; gap:9px; font-size:13.5px; color:var(--ink-dim)}
.pkg li svg{flex:none; width:15px; height:15px; margin-top:3px; color:var(--gold)}
.pkg-price{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:baseline; justify-content:space-between}
.pkg-price .amt{font-family:var(--font-display); font-size:20px; color:var(--gold-soft); font-weight:600}
.pkg-price .per{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint)}

.addons{margin-top:40px; padding-top:32px; border-top:1px dashed var(--line)}
.addons-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px}
.addons-head h3{font-size:16px; color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  font-size:13px; color:var(--ink-dim); background:var(--surface);
  border:1px solid var(--line); border-radius:100px; padding:8px 15px;
}

/* ---------- process ---------- */
.process{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steps{display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid var(--line)}
@media (min-width:820px){ .steps{grid-template-columns:repeat(4,1fr)} }
.step{padding:28px 22px; border-bottom:1px solid var(--line); position:relative}
@media (min-width:820px){
  .step{border-bottom:none; border-right:1px solid var(--line)}
  .step:last-child{border-right:none}
}
.step .n{font-family:var(--font-mono); font-size:13px; color:var(--gold)}
.step h3{font-size:16.5px; margin-top:10px}
.step p{margin-top:8px; font-size:13.5px; color:var(--ink-dim)}

/* ---------- sectors ---------- */
.sector-grid{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){ .sector-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:960px){ .sector-grid{grid-template-columns:repeat(5,1fr)} }
.sector{
  border:1px solid var(--line); border-radius:12px; padding:18px 14px;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  background:var(--surface);
}
.sector svg{width:20px; height:20px; color:var(--teal)}
.sector span{font-size:13.5px; color:var(--ink); font-weight:500; line-height:1.3}

/* ---------- closing CTA ---------- */
.closing{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.closing-inner{
  position:relative; z-index:2;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:20px;
  padding:52px clamp(24px,5vw,64px); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.closing h2{font-size:clamp(24px,3.6vw,34px); max-width:26ch}
.closing p{color:var(--ink-dim); max-width:52ch; font-size:16px}
.contact-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px}
.email-pill{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line-strong); border-radius:100px; padding:10px 10px 10px 18px;
  font-family:var(--font-mono); font-size:14px; color:var(--gold-soft);
}
.email-pill button{
  font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--void);
  background:var(--gold-soft); border:none; border-radius:100px; padding:7px 13px; cursor:pointer;
}
.email-pill button:hover{background:var(--gold)}

/* ---------- footer ---------- */
footer{padding-block:36px}
.foot-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px}
.foot-brand{display:flex; align-items:center; gap:10px; color:var(--ink-dim); font-size:13.5px}
.foot-brand b{color:var(--ink); font-family:var(--font-display); font-weight:600}
.foot-links{display:flex; gap:20px; font-size:13px; color:var(--ink-faint)}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--gold-soft)}
.asturias-mark{opacity:.4; width:16px; height:16px; color:var(--gold)}