/* Digital Vela - digitalvela.mx
   Identity 2026: Lona, Noche, Mar; Faro only in data. Questrial, Geist, Geist Mono. */

@font-face{font-family:"Questrial";src:url("/assets/fonts/Questrial-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-VF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-VF.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --paper:#F2F4F4; --panel:#FFFFFF; --ink:#101418; --ink-2:#555C63; --ink-3:#687077;
  --line:#D6DCDE; --line-2:#BCC5C9;
  --mar:#1B5A70; --on-mar:#F2F4F4;
  --foot-bg:#101418; --foot-ink:#E8ECEA; --foot-ink-2:#A9B1B6; --foot-line:#2A3238;
  --display:"Questrial","Century Gothic","Avenir Next",system-ui,sans-serif;
  --text:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0E1215; --panel:#161B1F; --ink:#E8ECEA; --ink-2:#A9B1B6; --ink-3:#8A9399;
    --line:#262D32; --line-2:#3A444B;
    --mar:#7EBFCE; --on-mar:#0E1215;
    --foot-bg:#080B0D; --foot-ink:#E8ECEA; --foot-ink-2:#8A9399; --foot-line:#1F262B;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--mar)}
::selection{background:var(--mar);color:var(--on-mar)}
:focus-visible{outline:2px solid var(--mar);outline-offset:3px;border-radius:2px}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:max(clamp(16px,4vw,48px),env(safe-area-inset-left,0px))}
.skip{position:absolute;left:-9999px;top:12px;z-index:10;background:var(--ink);color:var(--paper);padding:10px 16px;font-family:var(--mono);font-size:12px;text-decoration:none}
.skip:focus{left:12px}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* header */
.head{border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:inline-flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;min-height:44px}
.brand-mark{width:30px;height:30px;flex:none}
.wm{font-family:var(--display);font-size:15px;letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.nav ul{display:flex;gap:clamp(14px,2.4vw,30px);list-style:none;margin:0;padding:0}
.nav ul a{display:inline-block;padding-block:12px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mar);text-decoration:none;transition:color .2s}
.nav ul a:hover{color:var(--ink)}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang a{display:inline-flex;align-items:center;min-height:34px;padding-inline:12px;border-radius:999px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink-3);text-decoration:none;transition:color .2s,background .2s}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--ink);color:var(--paper)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(56px,9vw,120px) clamp(56px,8vw,104px)}
.hero h1{font-size:clamp(42px,6.2vw,84px);line-height:1.03;letter-spacing:-.02em;margin-top:22px;max-width:14ch}
.lede{font-size:clamp(17px,1.45vw,19px);line-height:1.7;color:var(--ink-2);max-width:54ch;margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;padding:0;margin:36px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.facts li{padding-top:12px;border-top:1px solid var(--line)}
.hero-mark{margin:0;display:flex;flex-direction:column;align-items:center;gap:22px}
.mark-hero{width:min(420px,100%);height:auto;overflow:visible}
.hero-mark figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sail{fill:var(--ink);transition:fill .35s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .mark-hero .sail{animation:sail-in 1.1s var(--ease) both}
  .mark-hero .s0{--dx:0px;--dy:-16px;animation-delay:.08s}
  .mark-hero .s1{--dx:16px;--dy:0px;animation-delay:.22s}
  .mark-hero .s2{--dx:0px;--dy:16px;animation-delay:.36s}
  .mark-hero .s3{--dx:-16px;--dy:0px;animation-delay:.5s}
}
@keyframes sail-in{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-10deg)}to{opacity:1;transform:none}}

/* sections */
.sec{border-top:1px solid var(--line);padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec h2{font-size:clamp(32px,4vw,52px);line-height:1.06;letter-spacing:-.015em;margin-top:14px}
.intro{font-size:17px;line-height:1.7;color:var(--ink-2);max-width:60ch}

/* areas */
.areas{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center}
.areas-mark{margin:0;display:grid;place-items:center}
.mark-areas{width:min(400px,100%);height:auto}
.areas-mark[data-active] .sail{fill:var(--line-2)}
.areas-mark[data-active="0"] .s0,.areas-mark[data-active="1"] .s1,.areas-mark[data-active="2"] .s2,.areas-mark[data-active="3"] .s3{fill:var(--mar)}
.area-list{list-style:none;margin:0;padding:0}
.area{display:grid;grid-template-columns:40px minmax(0,1fr);gap:20px;padding-block:24px;border-top:1px solid var(--line)}
.area:last-child{border-bottom:1px solid var(--line)}
.badge{width:40px;height:40px;display:block}
.badge path{fill:var(--line-2)}
.badge path.me{fill:var(--mar)}
.area-k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.area h3{font-size:clamp(24px,2.2vw,28px);line-height:1.1;margin-top:6px;transition:color .25s}
.area p:last-child{font-size:15.5px;color:var(--ink-2);margin-top:8px;max-width:58ch}
@media (hover:hover){.area:hover h3{color:var(--mar)}}

/* one data core */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.steps li{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:18px}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-top .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-3)}
.step-top .badge{width:32px;height:32px}
.steps p{font-size:15.5px;color:var(--ink-2)}
.steps strong{font-weight:500;color:var(--ink)}

/* audiences */
.aud{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.aud article{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.aud h3{font-size:26px;line-height:1.1}
.aud p{font-size:15.5px;color:var(--ink-2)}
.aud .prod{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--mar)}

/* contact */
.contact-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.contact h2{font-size:clamp(36px,5vw,64px);line-height:1.04;max-width:14ch}
.contact .intro{margin-top:20px}
.reach{margin:0}
.reach div{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:baseline;gap:16px;padding-block:18px;border-top:1px solid var(--line)}
.reach div:last-child{border-bottom:1px solid var(--line)}
.reach dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.reach dd{margin:0}
.reach a{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);color:var(--ink);text-decoration:none;overflow-wrap:anywhere;transition:color .2s}
.reach a:hover{color:var(--mar)}

/* footer */
.foot{background:var(--foot-bg);color:var(--foot-ink);padding-block:clamp(48px,7vw,80px) calc(clamp(28px,4vw,40px) + env(safe-area-inset-bottom,0px))}
.foot .brand{color:var(--foot-ink)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-top:36px;padding-top:28px;border-top:1px solid var(--foot-line);font-size:14px;line-height:1.7;color:var(--foot-ink-2)}
.foot-grid strong{display:block;font-weight:500;color:var(--foot-ink)}
.foot-grid a{color:var(--foot-ink);text-decoration:none;display:inline-block;padding-block:2px}
.foot-grid a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-copy{margin-top:40px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--foot-ink-2)}

/* privacy notice */
.doc{max-width:720px;padding-block:clamp(48px,7vw,96px)}
.doc h1{font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-.015em;margin-top:14px}
.doc .updated{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-3);margin-top:16px}
.doc .note{margin-top:24px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-size:15px;color:var(--ink-2)}
.doc section{margin-top:40px}
.doc h2{font-size:24px;line-height:1.2}
.doc section p{font-size:16.5px;line-height:1.75;color:var(--ink-2);margin-top:12px}

/* 404 */
.nf{padding-block:clamp(80px,14vw,160px)}
.nf h1{font-size:clamp(36px,5vw,56px);line-height:1.05;margin-top:14px;margin-bottom:18px}
.nf .more{display:inline-block;margin-top:28px;font-size:15px}
.nf-es{margin-top:18px;color:var(--ink-3);font-size:15px}

@media (max-width:900px){
  .hero,.sec-head,.areas,.contact-in{grid-template-columns:minmax(0,1fr)}
  .hero-mark{order:-1}
  .mark-hero{width:min(220px,56vw)}
  .mark-areas{width:min(260px,64vw)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aud{grid-template-columns:minmax(0,1fr)}
  .hide-md{display:none}
}
@media (max-width:560px){
  .head-in{min-height:64px}
  .hide-sm{display:none}
  .wm{font-size:14px}
  .steps,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .reach div{grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}