:root{
  --bg:#F4F7FB;
  --surface:#FFFFFF;
  --ink:#12203A;
  --muted:#52607A;
  --line:#D5DDEA;
  --line-strong:#AEBBD0;
  --accent:#2A4BFF;
  --accent-ink:#FFFFFF;
  --sun:#FFC145;
  --bubble-bot:#E9EEF8;
  --cta-bg:#12203A;
  --cta-ink:#F4F7FB;
  --cta-muted:#B9C4DA;
}
:root{--menta:#2BB673}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  line-height:1.1;letter-spacing:-.02em;margin:0;font-weight:700;
}
p{margin:0}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

/* Header */
.site-header{padding:22px 0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-wordmark{display:flex;align-items:baseline;gap:4px;line-height:1;white-space:nowrap}
.brand-name{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink)}
.brand-by{font-family:"Instrument Sans",Arial,sans-serif;font-size:.8rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.nav{display:flex;align-items:center;gap:28px}
.nav a.link{color:var(--muted);text-decoration:none;font-size:15.5px}
.nav a.link:hover{color:var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;font:inherit;font-weight:600;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.btn-sun{background:var(--sun);color:#12203A}
.btn-sun:hover{filter:brightness(1.05)}

/* Hero */
.hero{padding:40px 0 96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:64px;align-items:center}
h1{font-size:clamp(2.4rem,5.2vw,4.1rem)}
.lead{font-size:1.2rem;color:var(--muted);max-width:32em;margin:24px 0 32px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin-top:28px;color:var(--muted);font-size:15.5px;max-width:30em}

/* Demo */
.demo-label{font-weight:600;font-size:15px;color:var(--muted);margin:0 0 12px}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.tab{font:inherit;font-size:15px;font-weight:600;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.tab:hover{border-color:var(--ink)}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chat{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -32px rgba(18,32,58,.45)}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;font-size:15px;flex:0 0 auto}
.chat-head strong{display:block;font-size:16px;line-height:1.25}
.chat-head span.sub{display:block;font-size:13.5px;font-weight:400;color:var(--muted);line-height:1.3}
.avatar{position:relative}
.avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--menta);border:2px solid var(--surface)}
.messages{height:340px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15.5px;line-height:1.45}
.msg.bot{background:var(--bubble-bot);align-self:flex-start;border-bottom-left-radius:4px}
.msg.user{background:var(--accent);color:var(--accent-ink);align-self:flex-end;border-bottom-right-radius:4px}
.tag{align-self:flex-start;display:flex;align-items:center;gap:7px;margin:-4px 0 0 4px;font-size:13px;color:var(--muted)}
.tag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--sun);flex:0 0 auto}
.crm-card{align-self:flex-start;width:min(100%,360px);padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;background:var(--surface);font-size:13px}
.crm-card-title{display:block;margin-bottom:8px;color:var(--ink);font-size:13.5px}
.crm-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
.crm-card dt{color:var(--muted)}
.crm-card dd{margin:0;color:var(--ink)}
.crm-card-note{margin-top:10px;color:var(--muted);font-size:12px}
.typing{display:flex;align-items:center;gap:5px;padding:14px 16px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.1s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion: reduce){.typing span{animation:none;opacity:.7}}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
.chip{font:inherit;font-size:14px;padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;text-align:left}
.chip:hover{border-color:var(--accent)}
.composer{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;border-top:1px solid var(--line)}
.composer input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:8px 0}
.composer input::placeholder{color:var(--muted)}
.composer input:focus-visible{outline:none}
.composer:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}
.send{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.send:hover{filter:brightness(1.08)}
.data{margin-top:14px;font-size:15px}
.data summary{cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px;width:fit-content}
.data dl{margin:12px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
.data dt{color:var(--muted)}
.data dd{margin:0}

/* Sections */
.section{padding:96px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.section-intro{color:var(--muted);max-width:30em;margin-top:18px}

/* Steps */
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:20px;position:relative;padding-bottom:36px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:21px;top:48px;bottom:4px;width:2px;background:var(--line)}
.steps li:last-child::before{display:none}
.step-n{width:44px;height:44px;border-radius:50%;background:var(--sun);color:#12203A;display:grid;place-items:center;font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:700;font-size:1.15rem}
.steps h3{font-size:1.4rem;margin:6px 0 8px}
.steps p{color:var(--muted);max-width:34em}

/* Routes */
.routes{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.routes li{display:flex;align-items:center;gap:12px}
.ask{background:var(--bubble-bot);padding:10px 14px;border-radius:16px 16px 16px 4px;font-size:15.5px;line-height:1.4}
.wire{flex:1 1 24px;min-width:20px;border-top:2px dashed var(--line-strong)}
.via{flex:0 0 auto;font-weight:600;font-size:15px;padding:8px 14px;border-radius:10px;border:1.5px solid var(--ink)}
.integration-visual{display:grid;gap:26px}
.integration-routes .wire{position:relative;height:2px;overflow:hidden;border:0;background:var(--line-strong)}
.integration-routes .wire::after{position:absolute;top:0;left:0;width:24%;height:100%;background:var(--sun);content:"";opacity:0}
.integration-platforms{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.integration-platforms-title{margin:0 0 12px;font-size:14px;font-weight:700}
.integration-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.integration-tools li{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--bg);font-size:12px;line-height:1.4}
.integration-tools strong{color:var(--ink);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.integration-tools span{color:var(--muted)}
.integration-note{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.integration-section.is-visible .integration-routes .wire::after{animation:integration-signal 8s ease-in-out infinite}
.integration-section.is-visible .integration-routes .via{animation:integration-receive 8s linear infinite}
.integration-section.is-visible .integration-routes li:nth-child(2) .wire::after,
.integration-section.is-visible .integration-routes li:nth-child(2) .via{animation-delay:-6.4s}
.integration-section.is-visible .integration-routes li:nth-child(3) .wire::after,
.integration-section.is-visible .integration-routes li:nth-child(3) .via{animation-delay:-4.8s}
.integration-section.is-visible .integration-routes li:nth-child(4) .wire::after,
.integration-section.is-visible .integration-routes li:nth-child(4) .via{animation-delay:-3.2s}
.integration-section.is-visible .integration-routes li:nth-child(5) .wire::after,
.integration-section.is-visible .integration-routes li:nth-child(5) .via{animation-delay:-1.6s}
@keyframes integration-signal{0%,3%{transform:translateX(-110%);opacity:0}4%{opacity:1}16%{transform:translateX(430%);opacity:0}100%{transform:translateX(430%);opacity:0}}
@keyframes integration-receive{0%,16%,22%,100%{border-color:var(--ink);box-shadow:none}17%,20%{border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,193,69,.22)}}
@media (max-width:560px){
  .routes li{flex-wrap:wrap;gap:8px}
  .wire{display:none}
  .integration-tools{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .integration-section.is-visible .integration-routes .wire::after,
  .integration-section.is-visible .integration-routes .via{animation:none}
}

/* Businesses and services */
.business-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:48px;align-items:end}
.business-kicker{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.business-kicker::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--sun);flex:0 0 auto}
.business-intro h2{max-width:13em}
.business-lead{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-size:clamp(1.2rem,2vw,1.55rem);font-weight:500;line-height:1.4;letter-spacing:-.01em;color:var(--muted)}
.business-sectors{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:30px 0 24px;padding:0}
.business-sectors li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600}
.business-sectors li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)}
.business-sectors li:nth-child(3n)::before{background:var(--sun)}
.business-prompt{display:flex;align-items:center;gap:24px;padding:24px 28px;border-radius:18px;background:var(--sun);color:#12203A}
.business-prompt span{flex:0 0 auto;font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-size:1.05rem;font-weight:700}
.business-prompt p{font-size:16px;font-weight:500;line-height:1.5}
.nexora-feature{display:grid;grid-template-columns:38px minmax(0,1fr);gap:20px;align-items:start;margin-top:32px;padding:24px;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:16px;background:var(--surface)}
.nexora-feature .service-index{margin:0}
.nexora-feature h3{font-size:1.2rem;margin-bottom:10px}
.nexora-feature p{color:var(--muted);font-size:15.5px;line-height:1.55}
.devstudio-services{margin-top:42px}
.devstudio-services > .business-kicker{margin-bottom:16px}
.trio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:0}
.trio > article{padding:24px;border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:16px;background:var(--surface);box-shadow:0 12px 26px -22px rgba(18,32,58,.38)}
.trio > article:nth-child(2){border-top-color:var(--sun)}
.service-index{display:grid;width:38px;height:38px;place-items:center;margin-bottom:20px;border-radius:12px;background:var(--sun);color:#12203A;font-size:13px;font-weight:700}
.trio h3{font-size:1.2rem;margin-bottom:10px}
.trio p{color:var(--muted);font-size:15.5px;line-height:1.55}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;font-weight:500;line-height:1;color:var(--muted);flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);max-width:36em;padding:0 0 22px}

/* CTA */
.cta{background:var(--cta-bg);color:var(--cta-ink);border-radius:28px;padding:64px}
.cta h2{max-width:14em}
.cta p{color:var(--cta-muted);max-width:34em;margin:18px 0 28px}
.cta .cta-kicker{margin:0 0 14px;color:var(--sun);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cta-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:48px}
.cta-copy,.cta-form-column,.cta-form{min-width:0}
.cta-form-column{padding-top:4px}
.cta-form form{display:grid;gap:14px}
.cta-form label{display:grid;gap:6px;color:var(--cta-ink);font-size:14px;font-weight:600}
.cta-form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
.cta-form select,.cta-form textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px}
.cta-form textarea{min-height:110px;resize:vertical}
.cta-form :is(input,select,textarea):focus{border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,193,69,.22);outline:none}
.cta-form input[type=checkbox],.cta-form input[type=radio]{accent-color:var(--sun)}
.cta-form button,.cta-form input[type=submit],.cta-form [type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:10px;background:var(--sun);color:#12203A;font:inherit;font-weight:700;cursor:pointer}
.cta-form button:hover,.cta-form input[type=submit]:hover,.cta-form [type=submit]:hover{filter:brightness(1.05)}
.cta-form .nombres_form,.cta-form [class~="nombres_form"],
.cta-form .email_form,.cta-form [class~="email_form"],
.cta-form .empresa_form,.cta-form [class~="empresa_form"],
.cta-form .celular_form,.cta-form [class~="celular_form"],
.cta-form .descripción_form,.cta-form [class~="descripción_form"],
.cta-form .descripcion_form,.cta-form [class~="descripcion_form"],
.cta-form .terms_conditions_form,.cta-form [class~="terms_conditions_form"]{min-width:0}
.cta-form :is(input,select,textarea).nombres_form,.cta-form :is(input,select,textarea)[name="nombres_form"],.cta-form :is(input,select,textarea)[id="nombres_form"],
.cta-form :is(input,select,textarea).email_form,.cta-form :is(input,select,textarea)[name="email_form"],.cta-form :is(input,select,textarea)[id="email_form"],
.cta-form :is(input,select,textarea).empresa_form,.cta-form :is(input,select,textarea)[name="empresa_form"],.cta-form :is(input,select,textarea)[id="empresa_form"],
.cta-form :is(input,select,textarea).celular_form,.cta-form :is(input,select,textarea)[name="celular_form"],.cta-form :is(input,select,textarea)[id="celular_form"],
.cta-form :is(input,select,textarea)[class~="descripción_form"],.cta-form :is(input,select,textarea)[name="descripción_form"],.cta-form :is(input,select,textarea)[id="descripción_form"],
.cta-form :is(input,select,textarea)[class~="descripcion_form"],.cta-form :is(input,select,textarea)[name="descripcion_form"],.cta-form :is(input,select,textarea)[id="descripcion_form"]{box-sizing:border-box}
.cta-form .terms_conditions_form label,.cta-form [class~="terms_conditions_form"] label,
.cta-form label.terms_conditions_form,.cta-form label[class~="terms_conditions_form"]{display:flex;align-items:flex-start;gap:10px;color:var(--cta-muted);font-size:13px;line-height:1.5}
.cta-form input[type=checkbox].terms_conditions_form,.cta-form input[type=checkbox][name="terms_conditions_form"],.cta-form input[type=checkbox][id="terms_conditions_form"]{flex:0 0 auto;width:18px;min-height:18px;margin:2px 0 0;padding:0}
.cta-form .descripción_form textarea,.cta-form [class~="descripción_form"] textarea,
.cta-form .descripcion_form textarea,.cta-form [class~="descripcion_form"] textarea{min-height:120px}
.cta-contact-methods{display:grid;align-content:start;justify-items:start;gap:14px}
.cta-contact-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.cta-form-column .cta-contact-methods{margin-top:22px}
.cta .cta-contact-methods p{margin:0;color:var(--cta-muted);font-size:14px}
.btn-whatsapp{border-color:#25D366;background:#25D366;color:#12203A}
.btn-whatsapp:hover{border-color:#1EBE5D;background:#1EBE5D;color:#12203A}
.cta-email{color:var(--cta-ink);font-size:15px;font-weight:600;text-underline-offset:4px}
.cta-email:hover{color:var(--sun)}
.cta .cta-privacy{margin:20px 0 0;color:var(--cta-muted);font-size:13px;line-height:1.5}
.cta-privacy a{color:var(--cta-ink);text-underline-offset:3px}
.cta-privacy a:hover{color:var(--sun)}
.cta a:focus-visible{outline-color:var(--sun)}

/* Footer */
.site-footer{padding:48px 0 24px;border-top:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px}
.footer-main{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr);gap:36px;padding-bottom:32px}
.footer-brand{width:fit-content}
.footer-description{max-width:28em;margin-top:14px;color:var(--muted)}
.footer-nav{display:grid;align-content:start;gap:10px}
.footer-nav a,.footer-contact a{width:fit-content;color:var(--muted);text-decoration:none}
.footer-nav a:hover,.footer-contact a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.footer-contact{display:grid;align-content:start;gap:10px;font-style:normal}
.footer-contact strong{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;font-size:1rem}
.footer-privacy{padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.footer-privacy summary{width:fit-content;cursor:pointer;color:var(--ink);font-weight:600;text-underline-offset:3px}
.footer-privacy summary:hover{color:var(--accent)}
.footer-privacy-content{max-width:850px;padding-top:16px;color:var(--muted);font-size:13px;line-height:1.6}
.footer-privacy-content p+p{margin-top:10px}
.footer-privacy-content strong{color:var(--ink)}
.footer-privacy-content a{color:var(--ink);text-underline-offset:3px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;padding-top:20px;color:var(--muted);font-size:12px}

@media (max-width:900px){
  .hero-grid,.split{grid-template-columns:minmax(0,1fr);gap:48px}
  .business-intro{grid-template-columns:minmax(0,1fr);gap:20px}
  .business-prompt{align-items:flex-start;flex-direction:column;gap:8px}
  .trio{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:minmax(0,1fr);gap:28px}
  .section{padding:72px 0}
  .cta{padding:40px 28px}
  .cta-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .footer-main{grid-template-columns:minmax(0,1fr);gap:24px}
  .footer-bottom{flex-direction:column}
}
@media (max-width:720px){
  .nav a.link{display:none}
}
@media (max-width:480px){
  .wrap{padding:0 18px}
  .messages{height:320px}
  .hero{padding-bottom:72px}
}