@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{color-scheme:light only;
  --azul:#0000DC; --cian:#00D0FF; --amarillo:#FFFF2C;
  --grafito:#1A1A1A; --negro:#000; --niebla:#F3F3F3; --blanco:#fff;
  --texto:#1A1A1A; --suave:#5c5c66;
  --f:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--f);font-size:1.0625rem;line-height:1.55;color:var(--texto);background:var(--blanco)}
img,svg,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--amarillo);color:#000;padding:.6rem 1rem}
.wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto}

/* header */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.9rem clamp(1rem,3vw,2.5rem);color:var(--texto);transition:background .25s,color .25s}
.top.solid{background:rgba(255,255,255,.96);color:var(--texto);backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--azul)}
.brand svg{width:38px;height:auto}
.brand span{font-size:1.15rem;letter-spacing:-.01em}
.brand b{font-weight:700}.brand i{font-style:normal;font-weight:300}
.nav{display:flex;align-items:center;gap:1.6rem;font-size:.95rem}
.nav a{text-decoration:none;opacity:.9}.nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.nav .btn{opacity:1}
.menu-btn{display:none;background:none;border:0;color:inherit;font:inherit;font-size:.95rem;padding:.4rem .2rem;cursor:pointer}
@media (max-width:880px){
  .nav{position:fixed;inset:0;background:#fff;color:var(--texto);flex-direction:column;justify-content:center;gap:1.4rem;font-size:1.35rem;transform:translateY(-100%);transition:transform .3s}
  .nav.open{transform:none}
  .menu-btn{display:block;position:relative;z-index:60}
  .top.menu-open{color:var(--texto);background:transparent;box-shadow:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.7rem 1.6rem;border-radius:6px;font:500 .98rem/1 var(--f);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-azul{background:var(--azul);color:#fff}.btn-azul:hover{background:#0000b0}
.btn-claro{background:rgba(255,255,255,.92);color:var(--texto)}.btn-claro:hover{background:#fff}
.btn-linea{border-color:currentColor;color:inherit;background:transparent}.btn-linea:hover{background:rgba(127,127,127,.12)}
.btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* hero */
.hero{min-height:100svh;background:#fff;color:var(--texto);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(2rem,5vw,5rem);padding:7rem clamp(1.25rem,6vw,6rem) 4rem;position:relative;overflow:hidden}
.hero h1{font-size:clamp(2.9rem,7.2vw,6.4rem);line-height:.98;font-weight:500;letter-spacing:-.035em;margin:0 0 1.5rem;max-width:11ch}
.hero p{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:36ch;color:var(--suave);margin:0 0 2.2rem;font-weight:300}
.hero .btns{justify-content:flex-start}
.terminal{justify-self:center;width:min(100%,330px);aspect-ratio:9/16;border-radius:30px;background:#1A1A1A;padding:14px;box-shadow:0 40px 80px -30px rgba(0,0,220,.35);position:relative}
.terminal video,.terminal img{width:100%;height:100%;object-fit:cover;border-radius:18px;background:#fff}
.terminal::after{content:"";position:absolute;top:6px;left:50%;width:8px;height:8px;border-radius:50%;background:#222;transform:translateX(-50%)}
.hero-dots{position:absolute;inset:auto 0 0 0;height:7px;background:repeating-linear-gradient(90deg,var(--azul) 0 40px,var(--cian) 40px 80px,var(--amarillo) 80px 120px)}
@media (max-width:880px){.hero{grid-template-columns:1fr;padding-top:6.5rem;text-align:left}.terminal{width:min(72%,280px)}}

/* vertical panels (tesla) */
.panel{min-height:92svh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:6.5rem 1.25rem 3.5rem;position:relative;overflow:hidden;color:#fff}
.panel.c-azul{background:var(--azul)}.panel.c-cian{background:var(--cian);color:var(--negro)}.panel.c-negro{background:#fff;color:var(--texto);border-top:1px solid #e6e6ea}
.panel-head h2{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.04;font-weight:500;letter-spacing:-.025em;margin:0 0 .8rem}
.panel-head p{margin:0 auto;max-width:44ch;font-size:clamp(1rem,1.5vw,1.18rem);font-weight:300;opacity:.92}
.tag{display:inline-block;margin-top:1rem;font-size:.85rem;padding:.3rem .75rem;border-radius:999px;border:1px solid currentColor;opacity:.85}
.perfiles{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:1.6rem auto 0;padding:0;list-style:none;max-width:560px}
.perfiles li{font-size:.9rem;padding:.35rem .8rem;border-radius:999px;background:rgba(255,255,255,.14)}
.c-cian .perfiles li{background:rgba(0,0,0,.08)}.c-negro .perfiles li{background:var(--niebla)}
.panel .btns{margin-top:2rem}
.panel .c-cian .btn-linea{color:#000}

/* credential card */
.cred{width:min(88vw,430px);aspect-ratio:1.586;border-radius:22px;position:relative;overflow:hidden;margin:2.2rem 0 0;box-shadow:0 30px 60px -25px rgba(0,0,0,.55);text-align:left;color:#fff}
.cred.k-azul{background:#0000c4}.cred.k-cian{background:#00bfee;color:#000}.cred.k-negro{background:#fff;color:var(--texto);box-shadow:0 30px 60px -25px rgba(0,0,0,.45)}.cred.k-negro .nom{color:var(--azul)}
.cred .pat{position:absolute;top:0;right:0;width:46%;height:100%;opacity:.9}
.cred .bx{position:absolute;left:8%;top:30%;width:26%}
.cred .lema{position:absolute;left:8%;bottom:10%;font-size:.8rem;font-weight:400}
.cred .nom{position:absolute;left:8%;top:11%;font-size:.95rem;font-weight:500;color:var(--amarillo)}
.cred.k-cian .nom{color:var(--azul)}


/* generic sections */
.sec{padding:clamp(4.5rem,9vw,8rem) 0}
.sec h2{font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.06;font-weight:500;letter-spacing:-.025em;margin:0 0 1rem;max-width:20ch}
.sec .lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--suave);max-width:52ch;margin:0 0 3rem;font-weight:300}
.dark{background:#fff;color:var(--texto);border-top:1px solid #e6e6ea}.dark .lead{color:var(--suave)}
.niebla{background:var(--niebla)}

/* steps */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);counter-reset:p;padding:0;list-style:none;margin:0}
.pasos li{counter-increment:p;border-top:2px solid var(--texto);padding-top:1.2rem}
.pasos li::before{content:counter(p);display:block;font-size:3.2rem;font-weight:300;line-height:1;color:var(--azul);margin-bottom:.8rem}
.pasos h3{font-size:1.3rem;font-weight:500;margin:0 0 .4rem}
.pasos p{margin:0;color:var(--suave)}

@media (max-width:760px){.pasos{grid-template-columns:1fr}}
.como{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.malla{width:min(100%,300px);justify-self:center}
.malla .ln{stroke:var(--texto);stroke-width:3;fill:none;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 1.1s ease}
.malla.on .ln{stroke-dashoffset:0}
.malla .pt{transform-box:fill-box;transform-origin:center}
@media (max-width:760px){.como{grid-template-columns:1fr}}

/* dashboard */
.tablero{background:#fff;color:var(--texto);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.6)}
.tb-bar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem;background:var(--azul);color:#fff;gap:1rem;flex-wrap:wrap}
.tb-bar strong{font-weight:500}
.tb-reloj{font-variant-numeric:tabular-nums;font-size:1.1rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #e6e6ea}
.kpi{padding:1.2rem 1.4rem;border-right:1px solid #e6e6ea}.kpi:last-child{border-right:0}
.kpi b{display:block;font-size:2rem;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:.88rem;color:var(--suave)}
.tb-scroll{overflow-x:auto}
.tb table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
.tb th{text-align:left;font-weight:500;color:var(--suave);font-size:.85rem;padding:.8rem 1.4rem;border-bottom:1px solid #e6e6ea}
.tb td{padding:.75rem 1.4rem;border-bottom:1px solid #f0f0f3;font-variant-numeric:tabular-nums}
.tb tr.nuevo td{animation:flash 2s ease}
@keyframes flash{from{background:#fffbb3}to{background:transparent}}
.est{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.82rem}
.est.ok{background:#e7f9ff;color:#005d73}.est.tarde{background:#fff9c2;color:#5c5600}.est.campo{background:#e9e9ff;color:#0000a0}
.tb-nota{font-size:.82rem;color:var(--suave);padding:.8rem 1.4rem}
@media (max-width:640px){.kpis{grid-template-columns:repeat(2,1fr)}.kpi:nth-child(2){border-right:0}.kpi:nth-child(-n+2){border-bottom:1px solid #e6e6ea}}

/* formats */
.formatos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.formato svg{height:220px;width:auto;margin:0 auto 1.4rem}
.formato h3{font-size:1.25rem;font-weight:500;margin:0 0 .4rem}
.formato p{margin:0;color:var(--suave)}
@media (max-width:760px){.formatos{grid-template-columns:1fr}.formato svg{height:180px}}

/* erp */
.erps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #d9d9df;border-left:1px solid #d9d9df;margin:0;padding:0;list-style:none}
.erps li{border-right:1px solid #d9d9df;border-bottom:1px solid #d9d9df;padding:1.8rem 1rem;text-align:center;font-size:1.15rem;font-weight:500;letter-spacing:-.01em}
.nota{font-size:.88rem;color:var(--suave);margin-top:1.2rem;max-width:70ch}
@media (max-width:760px){.erps{grid-template-columns:repeat(2,1fr)}}

/* awards & ecosystem */
.premios{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0;padding:0;list-style:none}
.premios li{border-left:3px solid var(--azul);padding-left:1.1rem}
.premios b{display:block;font-weight:500;font-size:1.15rem}
.premios span{color:var(--suave);font-size:.95rem}
@media (max-width:760px){.premios{grid-template-columns:1fr}}
.eco{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.eco a{display:block;padding:2rem;border-radius:14px;background:#fff;text-decoration:none;border:1px solid #e1e1e6;transition:border-color .2s}
.eco a:hover{border-color:var(--azul)}
.eco h3{font-size:1.35rem;font-weight:500;margin:0 0 .4rem}
.eco p{margin:0;color:var(--suave)}
@media (max-width:760px){.eco{grid-template-columns:1fr}}

/* form */
.demo-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:.9rem;font-weight:500;margin-bottom:.35rem}
.form input,.form select{width:100%;min-height:48px;padding:.7rem .9rem;border:1.5px solid #c9c9d1;border-radius:6px;font:inherit;background:#fff;color:var(--texto)}
.form input:focus,.form select:focus{border-color:var(--azul);outline:none;box-shadow:0 0 0 3px rgba(0,0,220,.2)}
.form .hp{position:absolute;left:-9999px}
.form .legal{font-size:.85rem;color:var(--suave);margin:0}
.form button{justify-self:start}

@media (max-width:760px){.demo-grid,.form{grid-template-columns:1fr}}

/* vertical page */
.vh{min-height:78svh;display:flex;align-items:flex-end;padding:8rem clamp(1.25rem,6vw,6rem) 4rem;color:#fff;position:relative;overflow:hidden}
.vh.c-azul{background:var(--azul)}.vh.c-cian{background:var(--cian);color:#000}.vh.c-negro{background:#fff;color:var(--texto);border-bottom:1px solid #e6e6ea}
.vh .pat{position:absolute;top:0;right:0;width:55%;height:100%;opacity:.5}
.vh-in{position:relative;max-width:760px}
.vh h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1;font-weight:500;letter-spacing:-.03em;margin:0 0 1.2rem}
.vh p{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;max-width:42ch;margin:0 0 2rem}
.vh .btns{justify-content:flex-start}
.grid-perfiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.grid-perfiles div{background:var(--niebla);border-radius:12px;padding:1.5rem}
.grid-perfiles h3{font-size:1.15rem;font-weight:500;margin:0 0 .4rem}
.grid-perfiles p{margin:0;color:var(--suave);font-size:.98rem}
@media (max-width:900px){.grid-perfiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-perfiles{grid-template-columns:1fr}}
.recorrido{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,6vw,5rem);align-items:center}
.recorrido ol{margin:0;padding:0;list-style:none;counter-reset:r}
.recorrido li{counter-increment:r;display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.2rem 0;border-bottom:1px solid #e1e1e6}
.recorrido li::before{content:counter(r);font-size:2rem;font-weight:300;color:var(--azul);line-height:1}
.recorrido h3{margin:0 0 .3rem;font-weight:500;font-size:1.2rem}
.recorrido p{margin:0;color:var(--suave)}
.recorrido .terminal{width:min(100%,280px)}
@media (max-width:800px){.recorrido{grid-template-columns:1fr}}
.benef{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.benef div{border-top:3px solid var(--azul);padding-top:1.2rem}
.benef h3{font-size:1.3rem;font-weight:500;margin:0 0 .5rem}
.benef p{margin:0;color:var(--suave)}
@media (max-width:760px){.benef{grid-template-columns:1fr}}

/* legal */
.legal-doc{max-width:72ch}
.legal-doc h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:500;letter-spacing:-.025em;line-height:1.05;margin:0 0 1rem}
.legal-doc h2{font-size:1.4rem;font-weight:500;margin:2.5rem 0 .6rem;max-width:none}
.legal-doc p,.legal-doc li{color:#33333b}
.legal-doc ul{padding-left:1.2rem}

/* footer */
.foot{background:#fff;color:var(--suave);border-top:1px solid #e1e1e6;padding:3.5rem 0 2.5rem;font-size:.93rem}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start}
.foot .brand{color:var(--azul)}
.foot a{color:var(--texto)}
.foot p{margin:.3rem 0}
.foot-bar{height:6px;background:repeating-linear-gradient(90deg,var(--azul) 0 40px,var(--cian) 40px 80px,var(--amarillo) 80px 120px)}

.hero-azul .top:not(.solid):not(.menu-open){color:#fff}
.hero-azul .top:not(.solid):not(.menu-open) .nav .btn-azul{background:#fff;color:var(--azul)}
.recorrido .malla{width:min(100%,260px)}


/* faq */
.faq{max-width:820px}
.faq details{border-bottom:1px solid #e1e1e6;padding:1.1rem 0}
.faq summary{cursor:pointer;font-size:1.15rem;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:1.5rem;line-height:1;color:var(--azul)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.7rem 0 0;color:var(--suave);max-width:68ch}
/* overflow guard */
html,body{overflow-x:hidden}
.perfiles li,.tag{white-space:normal}
@media (max-width:400px){.btn{padding:.7rem 1.1rem}.hero h1{font-size:2.6rem}}

/* logo azul; blanco solo sobre portadas azules */
.hero-azul .top:not(.solid):not(.menu-open) .brand{color:#fff}
.cred.k-negro .bx{color:var(--azul)}