/* Boyd Digital Barcelona — boyddigital.es
   Design tokens: deep navy ink + electric blue (neon-office nod) + Barcelona terracotta accent.
   Display: Space Grotesk · Body: Inter */

:root{
  --ink:#14224A;
  --navy:#1F3A6E;
  --blue:#1B66FF;
  --blue-700:#1450cc;
  --terra:#E2703A;
  --terra-700:#c85d2b;
  --paper:#F6F8FC;
  --card:#ffffff;
  --line:#E3E8F2;
  --muted:#586079;
  --ink-soft:#3a456a;
  --ok:#159c6b;
  --maxw:1140px;
  --r:14px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(20,34,74,.06), 0 12px 30px -16px rgba(20,34,74,.22);
  --shadow-lift:0 2px 4px rgba(20,34,74,.08), 0 24px 50px -24px rgba(20,34,74,.34);
  --ff-display:"Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-body:"Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--ff-body); color:var(--ink);
  background:var(--paper); line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--blue-700); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--ff-display); color:var(--ink); line-height:1.12; font-weight:600; letter-spacing:-.01em; margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.5rem); letter-spacing:-.025em}
h2{font-size:clamp(1.7rem,3.4vw,2.45rem); letter-spacing:-.02em}
h3{font-size:1.22rem}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.06rem,1.6vw,1.28rem); color:var(--ink-soft)}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:22px}
.section{padding:clamp(56px,8vw,104px) 0}
.section--tight{padding:clamp(40px,6vw,72px) 0}
.section--paper{background:var(--paper)}
.section--white{background:#fff}
.center{text-align:center}
.measure{max-width:62ch}
.measure-narrow{max-width:50ch}

/* eyebrow / labels (utility) */
.eyebrow{
  font-family:var(--ff-display); font-weight:600; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:.6em; margin:0 0 1rem;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--terra); border-radius:2px}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--ff-display);
  font-weight:600; font-size:1rem; padding:.85em 1.4em; border-radius:999px;
  border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, background .18s ease, box-shadow .18s ease;
  text-decoration:none; line-height:1;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--terra); color:#fff; box-shadow:0 10px 22px -12px rgba(226,112,58,.9)}
.btn--primary:hover{background:var(--terra-700)}
.btn--ink{background:var(--ink); color:#fff}
.btn--ink:hover{background:#0e1838}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink); background:#fff}
.btn--wa{background:#1FA855; color:#fff}
.btn--wa:hover{background:#178a45}
.btn--lg{padding:1.02em 1.7em; font-size:1.06rem}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* ---------- top utility bar ---------- */
.topbar{background:var(--ink); color:#cfd8ef; font-size:.82rem}
.topbar .wrap{display:flex; gap:18px; align-items:center; justify-content:flex-end; min-height:38px; flex-wrap:wrap}
.topbar a{color:#eaf0ff}
.topbar .sep{opacity:.4}

/* ---------- header / nav ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:70px}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--ff-display); font-weight:600; color:var(--ink); letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand img{width:38px; height:38px}
.brand b{font-size:1.12rem; line-height:1}
.brand span{display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-family:var(--ff-body); font-weight:600}
.nav-links{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--ink-soft); font-weight:500; font-size:.96rem; padding:.5em .7em; border-radius:8px}
.nav-links a:hover{color:var(--ink); background:var(--paper); text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--blue-700)}
.nav-right{display:flex; align-items:center; gap:12px}
.lang{display:flex; gap:2px; border:1px solid var(--line); border-radius:999px; padding:3px; background:#fff}
.lang a{font-family:var(--ff-display); font-size:.78rem; font-weight:600; padding:.28em .6em; border-radius:999px; color:var(--muted)}
.lang a:hover{text-decoration:none; color:var(--ink)}
.lang a.is-active{background:var(--ink); color:#fff}
.nav-cta{display:inline-flex}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:42px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ---------- hero ---------- */
.hero{position:relative; background:
   radial-gradient(1100px 500px at 78% -10%, rgba(27,102,255,.10), transparent 60%),
   linear-gradient(180deg,#fff 0%, var(--paper) 100%);
   overflow:hidden}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding:clamp(48px,7vw,86px) 0 clamp(60px,8vw,96px)}
.tagline-chip{display:inline-flex; align-items:center; gap:.55em; background:#fff; border:1px solid var(--line); color:var(--ink-soft);
  font-size:.8rem; font-weight:500; padding:.42em .8em; border-radius:999px; margin-bottom:20px; box-shadow:var(--shadow)}
.tagline-chip b{color:var(--ink); font-family:var(--ff-display)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(21,156,107,.16)}
.hero h1{margin-bottom:.5em}
.hero h1 .accent{color:var(--blue)}
.hero .lead{max-width:46ch; margin-bottom:26px}
.hero-cta{margin-bottom:22px}
.hero-meta{display:flex; flex-wrap:wrap; gap:18px 26px; font-size:.86rem; color:var(--muted)}
.hero-meta b{color:var(--ink); font-family:var(--ff-display); font-weight:600}

/* skyline signature */
.skyline-card{position:relative; aspect-ratio:1/1; max-width:430px; margin-inline:auto; width:100%;
  background:linear-gradient(160deg,#16264f,#0f1c3d); border-radius:26px; box-shadow:var(--shadow-lift);
  overflow:hidden; display:grid; place-items:end center}
.skyline-card .gear-badge{position:absolute; top:20px; left:20px; width:54px; height:54px; background:#fff; border-radius:14px; display:grid; place-items:center; box-shadow:var(--shadow)}
.skyline-card .gear-badge img{width:40px;height:40px}
.skyline-card .kw{position:absolute; top:26px; right:24px; text-align:right; color:#9fb4e6; font-family:var(--ff-display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase}
.skyline-svg{width:100%; height:auto; display:block}
.skyline-svg .ln{fill:none; stroke:#7ea2ff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.92}
.skyline-svg .ln2{stroke:#bcd0ff; opacity:.55}
.skyline-card .ground{position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--terra),transparent); opacity:.85}

/* ---------- trusted by ---------- */
.trusted{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
.trusted .wrap{padding-block:26px}
.trusted-label{text-align:center; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-family:var(--ff-display); font-weight:600; margin-bottom:16px}
.logos{display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:center; align-items:center}
.logos span{font-family:var(--ff-display); font-weight:600; font-size:1.02rem; color:var(--ink); opacity:.62; letter-spacing:.01em; white-space:nowrap}
.trusted-note{text-align:center; color:var(--muted); font-size:.78rem; margin-top:14px}

/* ---------- generic grids/cards ---------- */
.grid{display:grid; gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow); transition:transform .14s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.card h3{margin-bottom:.35em; display:flex; align-items:center; gap:.5em}
.card p{margin-bottom:0; color:var(--muted); font-size:.97rem}
.ico{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:rgba(27,102,255,.1); color:var(--blue); flex:none; margin-bottom:14px}
.ico svg{width:21px; height:21px}

.split{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.feature-list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px}
.feature-list li{display:flex; gap:12px; align-items:flex-start}
.feature-list .tick{flex:none; width:24px; height:24px; border-radius:7px; background:rgba(21,156,107,.12); color:var(--ok); display:grid; place-items:center; margin-top:2px}
.feature-list .tick svg{width:14px;height:14px}
.feature-list b{font-family:var(--ff-display); color:var(--ink)}

/* who-for chips */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.chip{background:#fff; border:1px solid var(--line); border-radius:999px; padding:.5em 1em; font-size:.92rem; color:var(--ink-soft); font-weight:500}

/* process (real sequence -> numbered) */
.steps{counter-reset:step; display:grid; gap:2px; margin-top:8px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--line)}
.step{counter-increment:step; background:#fff; padding:22px 24px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start}
.step::before{content:counter(step,decimal-leading-zero); font-family:var(--ff-display); font-weight:600; color:var(--blue); font-size:1.05rem; background:rgba(27,102,255,.08); width:42px; height:42px; border-radius:11px; display:grid; place-items:center}
.step h3{margin:.1em 0 .2em; font-size:1.06rem}
.step p{margin:0; color:var(--muted); font-size:.95rem}

/* stat band */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.stat .n{font-family:var(--ff-display); font-weight:600; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--ink); letter-spacing:-.02em; line-height:1}
.stat .l{color:var(--muted); font-size:.9rem; margin-top:6px}

/* FAQ */
.faq{max-width:760px; margin-inline:auto}
.qa{border-bottom:1px solid var(--line)}
.qa>button{width:100%; text-align:left; background:none; border:0; padding:22px 4px; font-family:var(--ff-display); font-weight:600; font-size:1.08rem; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px}
.qa>button .pm{flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:transform .2s ease, border-color .2s}
.qa>button[aria-expanded="true"] .pm{transform:rotate(45deg); border-color:var(--blue); color:var(--blue)}
.qa .ans{max-height:0; overflow:hidden; transition:max-height .28s ease}
.qa .ans p{padding:0 4px 22px; color:var(--muted); margin:0; max-width:64ch}

/* CTA band */
.cta-band{position:relative; background:linear-gradient(150deg,#15244c,#0f1c3d); color:#fff; border-radius:24px; padding:clamp(34px,5vw,58px); overflow:hidden; box-shadow:var(--shadow-lift)}
.cta-band h2{color:#fff} .cta-band p{color:#c3cee8; max-width:54ch}
.cta-band::after{content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(27,102,255,.4),transparent 70%)}
.cta-band .btn-row{position:relative; z-index:2; margin-top:8px}

/* breadcrumb */
.crumb{font-size:.84rem; color:var(--muted); padding-top:18px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--ink)}
.crumb .s{margin:0 .4em; opacity:.5}

/* page-hero (interior) */
.page-hero{background:linear-gradient(180deg,#fff,var(--paper)); border-bottom:1px solid var(--line)}
.page-hero .wrap{padding-block:14px clamp(40px,6vw,68px)}
.page-hero h1{margin-top:14px}
.page-hero .lead{max-width:60ch}

/* contact */
.form{display:grid; gap:16px}
.field{display:grid; gap:6px}
.field label{font-family:var(--ff-display); font-weight:600; font-size:.9rem; color:var(--ink)}
.field input,.field textarea,.field select{font-family:var(--ff-body); font-size:1rem; padding:.8em .9em; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,102,255,.14)}
.form .consent{font-size:.82rem; color:var(--muted)}
.contact-aside{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow)}
.contact-aside h3{font-size:1.05rem}
.contact-aside .row{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line)}
.contact-aside .row:first-of-type{border-top:0}
.contact-aside .row .ic{flex:none; color:var(--blue)}

/* footer */
.site-footer{background:var(--ink); color:#aebbdb; padding:64px 0 30px; position:relative}
.foot-skyline{position:absolute; top:0; left:0; right:0; height:46px; opacity:.4; overflow:hidden}
.foot-skyline svg{width:100%; height:46px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px}
.site-footer a{color:#d4ddf3} .site-footer a:hover{color:#fff}
.foot-brand b{font-family:var(--ff-display); color:#fff; font-size:1.1rem; display:block; margin-bottom:8px}
.foot-brand p{font-size:.9rem; color:#9aa8cc; max-width:34ch}
.foot-col h4{color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; font-family:var(--ff-display)}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.93rem}
.foot-social{display:flex; gap:12px; margin-top:14px}
.foot-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:9px;display:grid;place-items:center;color:#cdd8f2}
.foot-social a:hover{background:rgba(255,255,255,.08)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.82rem; color:#8595bd}

/* floating whatsapp */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:50%; background:#1FA855; color:#fff; display:grid; place-items:center; box-shadow:0 12px 28px -8px rgba(31,168,85,.7); transition:transform .15s}
.wa-float:hover{transform:scale(1.06); text-decoration:none}
.wa-float svg{width:28px;height:28px}

/* utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.note{background:rgba(27,102,255,.06); border:1px solid rgba(27,102,255,.18); border-left:4px solid var(--blue); border-radius:10px; padding:16px 18px; font-size:.92rem; color:var(--ink-soft)}

/* responsive */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .skyline-card{order:-1; max-width:360px}
  .split{grid-template-columns:1fr; gap:30px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr); gap:28px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:760px){
  .topbar{display:none}
  .nav-links,.nav-cta{display:none}
  .burger{display:inline-flex}
  .nav.open .nav-links{display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; background:#fff; border-bottom:1px solid var(--line); padding:10px 16px 16px; box-shadow:var(--shadow)}
  .nav.open .nav-links a{padding:.8em .6em}
  .nav.open .nav-cta{display:flex; margin-top:6px}
  .nav{position:relative; flex-wrap:wrap}
}
@media (max-width:560px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .btn{width:100%; justify-content:center}
  .btn-row .btn{width:100%}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
}