/* eCustomer — estilos del sitio */

:root{
  --abismo:#061D1C; --bosque:#0D302D; --linea:rgba(238,242,236,.14);
  --menta:#5FB08F; --menta-claro:#8FD3B4; --bruma:#A9C7BB; --marfil:#EEF2EC;
  --ok:#8FD3B4; --alerta:#F2D27E; --no:#F2A88A; --tarjeta:rgba(13,48,45,.5);
  --font:'Manrope','Avenir Next','Segoe UI',system-ui,sans-serif;
  --pad:clamp(20px,5vw,72px);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --abismo:#061D1C; --marfil:#EEF2EC; } }
:root[data-theme="dark"]{ --abismo:#061D1C; --marfil:#EEF2EC; }
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
body{margin:0;background:var(--abismo);color:var(--marfil);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--menta-claro);outline-offset:3px;border-radius:4px}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.025em;line-height:1.04}
p{margin:0}

/* SECCIONES CLARAS: misma marca, mejor lectura */
.claro{--abismo:#F3F6F2;--marfil:#0F3B38;--bruma:#4A6461;--linea:rgba(15,59,56,.14);--menta-claro:#2F7D61;
  --ok:#2F7D61;--alerta:#B7801A;--no:#B9502B;--tarjeta:#FFFFFF;background:#F3F6F2;color:#0F3B38}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(6,29,28,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--linea)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.nav img{height:28px;width:auto}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500}
.nav ul a{text-decoration:none;color:var(--bruma);transition:color .2s}
.nav ul a:hover{color:var(--marfil)}
.nav .acc{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--font);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.btn-claro{background:var(--marfil);color:var(--abismo)}
.btn-claro:hover{background:var(--menta-claro)}
.btn-linea{border-color:var(--linea);color:var(--marfil);background:transparent}
.btn-linea:hover{border-color:var(--marfil)}
.menu-btn{display:none}
@media (max-width:1080px){.nav ul{display:none}.nav .btn-linea{display:none}}

/* HERO: imagen que se expande con el scroll */
.hero{position:relative;height:240vh}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-titulo{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 120px);z-index:3}
.hero-titulo h1{font-size:clamp(44px,6.2vw,104px);font-weight:500;max-width:11ch}
.hero-titulo p{margin-top:28px;max-width:46ch;color:var(--bruma);font-size:clamp(16px,1.4vw,19px)}
.hero-media{position:absolute;right:var(--pad);bottom:6vh;width:36vw;height:42vh;border-radius:36px 36px 36px 8px;overflow:hidden;z-index:2;will-change:width,height,right,bottom,border-radius}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:28% center;transform:scale(1.15);will-change:transform}
.hero-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,29,28,.15),rgba(6,29,28,.85));opacity:0}
.hero-frase{position:absolute;left:var(--pad);right:var(--pad);bottom:12vh;z-index:4;opacity:0;transform:translateY(40px)}
.hero-frase h2{font-size:clamp(34px,4.6vw,76px);max-width:16ch}
.hero-frase p{margin-top:22px;color:var(--marfil);opacity:.85;max-width:52ch}
.scroll-hint{position:absolute;left:var(--pad);bottom:6vh;z-index:3;font-size:13px;color:var(--bruma);display:flex;align-items:center;gap:12px}
.scroll-hint span{width:1px;height:42px;background:linear-gradient(var(--menta),transparent)}
@media (max-width:760px){
  .hero-media{width:calc(100vw - 2*var(--pad));height:36vh}
  .scroll-hint{display:none}
}

/* ONDA */
.onda{padding:120px 0 100px;border-bottom:1px solid var(--linea)}
.onda canvas{width:100%;height:160px;display:block}
.onda-datos{display:flex;flex-wrap:wrap;gap:24px 72px;margin-top:56px}
.onda-datos div{display:flex;flex-direction:column;gap:4px}
.onda-datos strong{font-size:clamp(34px,3.6vw,56px);font-weight:500;letter-spacing:-.03em;line-height:1}
.onda-datos span{color:var(--bruma);font-size:15px}

/* SECCIONES */
.sec{padding:clamp(96px,12vw,170px) 0}
.sec-cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:72px}
.sec-cab h2{font-size:clamp(36px,4.6vw,72px);max-width:14ch}
.sec-cab p{color:var(--bruma);max-width:46ch;justify-self:end}
@media (max-width:860px){.sec-cab{grid-template-columns:1fr}.sec-cab p{justify-self:start}}

/* SERVICIOS: lista editorial con acordeón */
.servicios{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.servicio{border-bottom:1px solid var(--linea)}
.servicio button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:34px 0;min-height:44px}
.servicio button h3{font-size:clamp(24px,2.8vw,42px);transition:color .25s,transform .35s}
.servicio button:hover h3{color:var(--menta-claro)}
.servicio .mas{width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);font-size:22px;display:grid;place-items:center;transition:transform .35s,background .25s}
.servicio[aria-expanded="true"] .mas,.servicio.abierto .mas{transform:rotate(45deg);background:var(--marfil);color:var(--abismo)}
.servicio .cuerpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.servicio.abierto .cuerpo{grid-template-rows:1fr}
.servicio .cuerpo>div{overflow:hidden}
.servicio .cuerpo p{color:var(--bruma);max-width:60ch;padding:0 0 34px;font-size:18px}

/* IMAGEN DIVIDIDA */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.split-media{height:clamp(420px,62vh,720px);border-radius:8px 40px 40px 40px;overflow:hidden}
.split-media img{width:100%;height:120%;object-fit:cover;will-change:transform}
.split h2{font-size:clamp(34px,4vw,62px)}
.split .lista{margin-top:40px;display:grid;gap:0;border-top:1px solid var(--linea)}
.split .lista div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--linea)}
.split .lista dt{color:var(--menta-claro);font-weight:600}
.split .lista dd{margin:0;color:var(--bruma)}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .lista div{grid-template-columns:1fr;gap:4px}}

/* PLATAFORMA */
.plat{background:var(--bosque)}
.plat-stage{perspective:1600px}
.dash{background:#F4F7F5;color:#0F3B38;border-radius:22px;overflow:hidden;box-shadow:0 60px 120px rgba(0,0,0,.45);transform-origin:50% 0;will-change:transform}
.dash-barra{display:flex;align-items:center;gap:8px;padding:14px 20px;background:#E6EEEA;font-size:13px;color:#5B7774}
.dash-barra i{width:11px;height:11px;border-radius:50%;background:#C9D6D1;display:block}
.dash-cuerpo{display:grid;grid-template-columns:200px minmax(0,1fr)}
.dash-menu{padding:22px 16px;border-right:1px solid #DFE8E4;display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:600;color:#4A6461}
.dash-menu span{padding:10px 12px;border-radius:10px}
.dash-menu span.act{background:#0F3B38;color:#fff}
.dash-main{padding:26px;display:flex;flex-direction:column;gap:20px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:#fff;border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.kpi small{font-size:12px;color:#5B7774;font-weight:600}
.kpi b{font-size:30px;font-weight:600;letter-spacing:-.02em}
.dash-fila{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.panel{background:#fff;border-radius:16px;padding:18px}
.panel h4{margin:0 0 14px;font-size:14px}
.barras{display:flex;align-items:flex-end;gap:6px;height:150px}
.barras i{flex:1;height:100%;border-radius:5px 5px 0 0;background:#5FB08F;display:block;transform-origin:bottom;transform:scaleY(var(--s,1))}
.ej{display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:10px}
.ej em{font-style:normal;width:28px;height:28px;border-radius:50%;background:#E4F3EC;display:grid;place-items:center;font-weight:700;font-size:11px}
.ej span{flex:1;height:7px;background:#EAF0ED;border-radius:9px;overflow:hidden}
.ej span u{display:block;height:100%;background:#2F7D61;border-radius:9px}
.ej b{width:38px;text-align:right}
.entregas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:80px;border-top:1px solid var(--linea)}
.entregas div{padding:28px 28px 0 0;display:flex;flex-direction:column;gap:8px}
.entregas small{color:var(--menta-claro);font-weight:600;font-size:14px}
.entregas strong{font-size:22px;font-weight:500}
.entregas p{color:var(--bruma);font-size:15px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-cuerpo{grid-template-columns:1fr}.dash-menu{display:none}.dash-fila{grid-template-columns:1fr}.entregas{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* METODOLOGÍA: recorrido horizontal */
.metodo{position:relative;height:340vh;background:#F3F6F2}
.metodo-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:56px}
.metodo-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.metodo-cab h2{font-size:clamp(36px,4.6vw,72px);max-width:13ch}
.progreso{width:min(320px,40vw);height:2px;background:var(--linea);position:relative}
.progreso i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--menta)}
.pista{display:flex;gap:24px;padding-left:var(--pad);will-change:transform}
.paso{flex:0 0 clamp(280px,28vw,400px);min-height:340px;border:1px solid var(--linea);border-radius:28px 28px 28px 6px;padding:34px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;background:var(--tarjeta)}
.paso b{font-size:64px;font-weight:300;color:var(--menta-claro);letter-spacing:-.04em;line-height:1}
.paso h3{font-size:26px;margin-bottom:12px}
.paso p{color:var(--bruma);font-size:16px}
@media (max-width:760px){
  .metodo{height:auto}
  .metodo-stage{position:static;height:auto;padding:110px 0}
  .pista{flex-direction:column;padding:0 var(--pad);transform:none!important}
  .paso{flex-basis:auto;min-height:0}
  .progreso{display:none}
}

/* RESULTADOS */
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linea)}
.res div{padding:44px 40px 48px 0;border-bottom:1px solid var(--linea);display:flex;flex-direction:column;gap:10px}
.res div:not(:nth-child(3n)){border-right:1px solid var(--linea)}
.res div:not(:nth-child(3n+1)){padding-left:40px}
.res strong{font-size:clamp(56px,6vw,96px);font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--marfil)}
.res h3{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.res p{color:var(--bruma);font-size:15px}
@media (max-width:860px){.res{grid-template-columns:1fr}.res div{padding:36px 0!important;border-right:0!important}}

/* EVALUACIÓN */
.eval{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px)}
.eval h2{font-size:clamp(32px,3.4vw,52px);margin-bottom:28px}
.eval p.intro{color:var(--bruma);margin-bottom:32px;max-width:48ch}
.estado{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--linea)}
.estado:last-child{border-bottom:1px solid var(--linea)}
.estado b{font-weight:700;display:inline-flex;align-items:center;gap:10px}
.estado b::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;flex-shrink:0}
.estado b.ok{color:var(--ok)}
.estado b.no{color:var(--no)}
.estado b.al{color:var(--alerta)}
.estado span{color:var(--bruma)}
.porque{display:grid;gap:0}
.porque div{padding:22px 0;border-top:1px solid var(--linea)}
.porque div:last-child{border-bottom:1px solid var(--linea)}
.porque h3{font-size:22px;margin-bottom:6px;letter-spacing:-.01em}
.porque p{color:var(--bruma)}
@media (max-width:860px){.eval{grid-template-columns:1fr}.estado{grid-template-columns:1fr;gap:4px}}

/* PLAN */
.plan{border:1px solid var(--linea);border-radius:28px;padding:clamp(20px,3vw,40px);overflow-x:auto}
.plan-g{min-width:620px;display:grid;grid-template-columns:200px repeat(8,minmax(0,1fr));gap:8px 6px;align-items:center;font-size:15px}
.plan-g small{color:var(--bruma);text-align:center;font-size:12px}
.plan-g i{height:26px;border-radius:9px;background:var(--menta);display:block;transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.plan.visible .plan-g i{transform:scaleX(1)}

/* VALORES */
.mision{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px)}
.mision h3{font-size:15px;font-weight:600;color:var(--menta-claro);letter-spacing:0;margin-bottom:16px}
.mision p{font-size:clamp(22px,2.2vw,32px);font-weight:400;line-height:1.35;letter-spacing:-.015em}
.valores{display:flex;flex-wrap:wrap;gap:10px;margin-top:64px}
.valores span{border:1px solid var(--linea);border-radius:999px;padding:12px 22px;font-size:16px}
@media (max-width:760px){.mision{grid-template-columns:1fr}}

/* CTA */
.cta{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.cta::after{content:"";position:absolute;inset:0;background:rgba(4,22,21,.62)}
.cta .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center;padding-block:120px;width:100%}
.cta h2{font-size:clamp(40px,5.6vw,92px);max-width:11ch}
.cta .wrap>div>p{margin-top:24px;color:var(--marfil);opacity:.85;max-width:44ch}
.contacto{margin-top:36px;display:flex;flex-wrap:wrap;gap:10px}
.contacto span{background:rgba(238,242,236,.1);border-radius:999px;padding:10px 18px;font-size:15px}
form{background:rgba(6,29,28,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--linea);border-radius:28px;padding:clamp(24px,3vw,40px);display:grid;gap:16px}
.campo{display:grid;gap:6px}
.campo label{font-size:14px;font-weight:600}
.campo input,.campo textarea{font:inherit;font-size:16px;color:var(--marfil);background:rgba(238,242,236,.06);border:1px solid var(--linea);border-radius:14px;padding:13px 15px;min-height:50px}
.campo input::placeholder,.campo textarea::placeholder{color:#7F9C92}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--menta-claro)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.estado-form{font-size:15px;min-height:1.6em;color:var(--menta-claro)}
.estado-form.error{color:#F2A88A}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}.dos{grid-template-columns:1fr}}

/* MODAL DE INGRESO */
/* UN SOLO efecto glass: .blur-fondo se aplica a todo el sitio (ver sitio.js). Por eso, mientras
   el modal esta abierto, se APAGAN los otros backdrop-filter del sitio (el del menu y el del
   formulario de contacto): si quedan encendidos, se ve un segundo desenfoque con su propio
   borde, que es justo el efecto duplicado que no queremos. */
.blur-fondo{filter:blur(10px) brightness(.7);transition:filter .25s}
/* El JS pone html.con-login mientras el modal esta abierto. */
html.con-login .nav,html.con-login .nav.solid{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important}
html.con-login form{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:transparent!important}
.login-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .25s;overflow-y:auto}
.login-modal.abierto{visibility:visible;opacity:1}
.login-mascara{position:absolute;inset:0;background:rgba(6,29,28,.3)}
/* Tarjeta solida y clara + textos oscuros. Los estilos criticos van tambien en linea en el
   markup (ver sitio.js), para que el modal se vea bien aunque el navegador tenga una version
   vieja de este archivo en cache. Aqui queda lo que no es critico. */
.login-tarjeta{position:relative;width:100%;max-width:420px;margin:auto;font-family:'Manrope','Avenir Next','Segoe UI',system-ui,sans-serif}
.login-x{cursor:pointer}
.login-logo{display:block}
/* El mensaje de estado va en verde; si hay error, en coral. El color del texto de error
   necesita !important porque el color base va en linea en el markup. */
.login-estado.error{color:#B9502B!important}
.login-campo input:focus{border-color:#2F7D61!important}
.login-ingresar:hover{background:#8FD3B4!important}
.login-ingresar:disabled{opacity:.65;cursor:not-allowed}
.login-volver:hover{border-color:#0B2B28!important;background:rgba(11,43,40,.05)!important}

footer{border-top:1px solid var(--linea);padding:40px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;color:var(--bruma);font-size:14px}
footer img{height:24px;width:auto}
footer a{color:var(--menta-claro);text-decoration:none;font-weight:600}


/* CALIDAD CON IA */
.ia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.ia h2{font-size:clamp(36px,4.4vw,68px);max-width:13ch}
.ia .intro{color:var(--bruma);margin-top:24px;max-width:48ch}
.capas{margin-top:44px;display:grid;gap:0;border-top:1px solid var(--linea)}
.capas>div{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--linea);align-items:start}
.capas svg{margin-top:3px}
.capas h3{font-size:19px;letter-spacing:-.01em;margin-bottom:4px;line-height:1.3}
.capas p{color:var(--bruma);font-size:15px}
.trans{background:#F4F7F5;color:#0F3B38;border-radius:24px;overflow:hidden;box-shadow:0 50px 100px rgba(0,0,0,.4)}
.trans-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;background:#E6EEEA;font-size:13px;color:#4A6461;flex-wrap:wrap}
.trans-cab b{color:#0F3B38}
.onda-mini{display:flex;align-items:center;gap:2px;height:26px}
.onda-mini i{display:block;width:3px;border-radius:2px;background:#5FB08F}
.trans-cuerpo{padding:22px;display:grid;gap:12px}
.linea{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;font-size:14px;line-height:1.5}
.linea small{color:#6B8481;font-weight:600;padding-top:2px}
.linea p{background:#fff;border-radius:14px 14px 14px 4px;padding:12px 14px}
.linea.eje p{border-radius:14px 14px 4px 14px;background:#E4F3EC}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;margin-top:8px;margin-right:6px}
.tag.emo{background:#FDE7DC;color:#9A3B1F}
.tag.kpi{background:#FCEFCF;color:#7A5410}
.tag.ok{background:#D8EFE4;color:#1F6B4F}
.trans-pie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #DFE8E4}
.trans-pie div{padding:16px 22px;display:grid;gap:2px}
.trans-pie div+div{border-left:1px solid #DFE8E4}
.trans-pie small{font-size:12px;color:#5B7774;font-weight:600}
.trans-pie b{font-size:20px;font-weight:600}
@media (max-width:900px){.ia{grid-template-columns:1fr}.trans-pie{grid-template-columns:1fr}.trans-pie div+div{border-left:0;border-top:1px solid #DFE8E4}}

/* ECOSISTEMA DIGITAL */
.flujo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative;margin-bottom:28px}
.etapa{padding:0 24px 0 0;display:flex;flex-direction:column;gap:16px}
.etapa .punto{display:flex;align-items:center;gap:0}
.etapa .punto b{width:48px;height:48px;border-radius:16px 16px 16px 4px;background:var(--menta);color:var(--abismo);display:grid;place-items:center;font-weight:700;font-size:16px;flex-shrink:0}
.etapa .punto i{flex:1;height:1px;background:linear-gradient(90deg,var(--menta),var(--linea));display:block}
.etapa:last-child .punto i{background:transparent}
.etapa h3{font-size:24px;line-height:1.15}
.etapa p{color:var(--bruma);font-size:15px}
.canales{display:flex;flex-wrap:wrap;gap:6px}
.canales span{font-size:13px;border:1px solid var(--linea);border-radius:999px;padding:5px 12px;color:var(--marfil)}
.base{border:1px solid var(--linea);border-radius:24px;padding:22px 28px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;background:rgba(95,176,143,.08)}
.base strong{font-weight:600;font-size:17px}
.base span{color:var(--bruma);font-size:15px}
.componentes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:96px;border-top:1px solid var(--linea)}
.componentes>div{padding:28px 28px 32px 0;border-bottom:1px solid var(--linea);display:grid;gap:8px;align-content:start}
.componentes>div:not(:nth-child(4n+1)){padding-left:28px;border-left:1px solid var(--linea)}
.componentes h3{font-size:19px;line-height:1.3;letter-spacing:-.01em}
.componentes p{color:var(--bruma);font-size:15px}
.hibrido{margin-top:96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.hibrido h3{font-size:clamp(28px,3vw,44px);line-height:1.1}
.hibrido>div>p{color:var(--bruma);margin-top:18px;max-width:46ch}
.gpt{border:1px solid var(--linea);border-radius:28px 28px 28px 6px;padding:32px;display:grid;gap:18px;background:var(--bosque)}
.gpt h4{margin:0;font-size:20px;font-weight:600}
.gpt ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.gpt li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;color:var(--bruma);font-size:15px}
.gpt li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--menta);margin-top:9px}
@media (max-width:1000px){.flujo{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 0}.componentes{grid-template-columns:repeat(2,minmax(0,1fr))}.componentes>div{padding-left:0!important;border-left:0!important;padding-right:20px}.hibrido{grid-template-columns:1fr}}
@media (max-width:600px){.flujo{grid-template-columns:1fr}.componentes{grid-template-columns:1fr}}

/* SECTORES */
.sectores{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline;padding:36px 0;border-top:1px solid var(--linea)}
.sectores small{color:var(--bruma);font-size:15px}
.sectores span{font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.02em}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero{height:auto}
  .hero-stage{position:relative;height:auto;padding:150px 0 0}
  .hero-titulo{position:relative;top:auto}
  .hero-media{position:relative;right:auto;bottom:auto;width:auto;height:60vh;margin:56px var(--pad) 0}
  .hero-media img{transform:none}
  .hero-frase{position:relative;opacity:1;transform:none;left:auto;right:auto;bottom:auto;padding:56px var(--pad) 0}
  .scroll-hint{display:none}
  .metodo{height:auto}.metodo-stage{position:static;height:auto;padding:110px 0}
  .pista{flex-wrap:wrap;padding-right:var(--pad);transform:none!important}
  .plan-g i{transform:none;transition:none}
  .servicio .cuerpo{transition:none}
}

.cta h1{font-size:clamp(40px,5.6vw,92px);max-width:11ch}
.cta .wrap{padding-top:160px}
h1[tabindex="-1"]:focus{outline:none}
/* PÁGINAS */
.pagina[hidden]{display:none!important}
.phero{padding:calc(env(safe-area-inset-top,0px) + 170px) 0 clamp(64px,8vw,110px)}
.phero .migas{color:var(--bruma);font-size:15px;margin-bottom:28px;display:flex;gap:10px;align-items:center}
.phero .migas a{color:var(--bruma);text-decoration:none}
.phero .migas a:hover{color:var(--marfil)}
.phero h1{font-size:clamp(44px,6.4vw,104px);max-width:13ch}
.phero .bajada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:40px;align-items:end}
.phero .bajada p{color:var(--bruma);font-size:clamp(17px,1.4vw,20px);max-width:52ch}
.phero .bajada .acc{display:flex;gap:12px;flex-wrap:wrap;justify-self:end}
.phero-img{margin-top:clamp(56px,7vw,96px);height:clamp(320px,56vh,620px);border-radius:40px 40px 40px 8px;overflow:hidden}
.phero-img img{width:100%;height:125%;object-fit:cover;will-change:transform}
@media (max-width:860px){.phero .bajada{grid-template-columns:1fr}.phero .bajada .acc{justify-self:start}}

/* LÍNEAS DE NEGOCIO */
.lineas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lineas a{text-decoration:none;color:inherit;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid var(--linea);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.lineas a:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(15,59,56,.14)}
.lineas .vis{height:340px;position:relative;overflow:hidden}
.lineas .vis img{width:100%;height:100%;object-fit:cover}
.lineas .txt{padding:36px 36px 40px;display:grid;gap:14px}
.lineas h3{font-size:clamp(28px,2.6vw,40px)}
.lineas p{color:var(--bruma)}
.lineas .ir{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--menta-claro);margin-top:6px}
.chatvis{background:#0D302D;display:grid;place-items:center}
.tel{width:230px;background:#F4F7F5;border-radius:32px;padding:16px 14px 20px;box-shadow:0 30px 60px rgba(0,0,0,.35);display:grid;gap:9px;font-size:12.5px;color:#0F3B38;transform:translateY(34px)}
.tel .top{display:flex;align-items:center;gap:8px;padding:2px 4px 8px;border-bottom:1px solid #DFE8E4;font-weight:700}
.tel .top i{width:26px;height:26px;border-radius:50%;background:#5FB08F;display:block}
.tel p{margin:0;padding:9px 11px;border-radius:14px 14px 14px 4px;background:#fff;max-width:86%;line-height:1.4}
.tel p.yo{justify-self:end;background:#D8EFE4;border-radius:14px 14px 4px 14px}
.tel .btnp{justify-self:start;background:#0F3B38;color:#fff;border-radius:999px;padding:7px 12px;font-weight:700;font-size:12px}
@media (max-width:860px){.lineas{grid-template-columns:1fr}}

/* RESUMEN DE SERVICIOS */
.resumen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,96px)}
.resumen h3{font-size:15px;font-weight:600;color:var(--menta-claro);letter-spacing:0;margin-bottom:8px}
.resumen ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.resumen li a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--linea);text-decoration:none;font-size:clamp(18px,1.6vw,22px);transition:color .2s,padding .3s}
.resumen li a:hover{color:var(--menta-claro);padding-left:8px}
.resumen li a span{color:var(--bruma);font-size:22px}
@media (max-width:860px){.resumen{grid-template-columns:1fr}}

/* BANDA CTA */
.banda{padding:clamp(80px,10vw,140px) 0;border-top:1px solid var(--linea)}
.banda .wrap{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-end}
.banda h2{font-size:clamp(36px,4.6vw,72px);max-width:14ch}
.banda .acc{display:flex;gap:12px;flex-wrap:wrap}

/* LISTAS EN GRILLA */
.grilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linea)}
.grilla>div{padding:32px 32px 36px 0;border-bottom:1px solid var(--linea);display:grid;gap:10px;align-content:start}
.grilla>div:not(:nth-child(3n+1)){padding-left:32px;border-left:1px solid var(--linea)}
.grilla h3{font-size:21px;line-height:1.25;letter-spacing:-.01em}
.grilla p{color:var(--bruma);font-size:15.5px}
.grilla.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.grilla.dos>div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
.grilla.dos>div:nth-child(2n){padding-left:32px;border-left:1px solid var(--linea)}
@media (max-width:860px){.grilla,.grilla.dos{grid-template-columns:1fr}.grilla>div{padding:28px 0!important;border-left:0!important}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.chips span{border:1px solid var(--linea);border-radius:999px;padding:10px 20px;font-size:15px}
.texto-largo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px)}
.texto-largo h2{font-size:clamp(34px,4vw,60px)}
.texto-largo .cuerpo{display:grid;gap:22px;color:var(--bruma);font-size:18px;max-width:60ch}
.texto-largo .cuerpo p:first-child{color:var(--marfil);font-size:clamp(20px,1.8vw,26px);line-height:1.45}
@media (max-width:860px){.texto-largo{grid-template-columns:1fr}}

/* PILARES IA */
.pilares{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pilar{border:1px solid var(--linea);border-radius:28px 28px 28px 6px;padding:30px;display:grid;gap:14px;align-content:start;background:var(--tarjeta)}
.pilar .ico{width:48px;height:48px;border-radius:16px;background:rgba(95,176,143,.16);display:grid;place-items:center}
.pilar h3{font-size:22px;line-height:1.2}
.pilar p{color:var(--bruma);font-size:15px}
@media (max-width:1000px){.pilares{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pilares{grid-template-columns:1fr}}
.lineas.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.lineas.tres .vis{height:260px}
.lineas.tres .txt{padding:30px}
.lineas.tres h3{font-size:clamp(24px,2vw,32px)}
@media (max-width:1000px){.lineas.tres{grid-template-columns:1fr}}
.resumen.tres{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px)}
@media (max-width:1000px){.resumen.tres{grid-template-columns:1fr}}
.resumen.tres li a{font-size:clamp(16px,1.3vw,19px)}

/* EJES */
.ejes{display:grid;gap:0;border-top:1px solid var(--linea)}
.eje{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1.2fr);gap:32px;padding:30px 0;border-bottom:1px solid var(--linea);align-items:baseline}
.eje b{font-size:44px;font-weight:300;color:var(--menta-claro);letter-spacing:-.03em;line-height:1}
.eje h3{font-size:clamp(22px,2vw,30px)}
.eje p{color:var(--bruma)}
@media (max-width:860px){.eje{grid-template-columns:60px minmax(0,1fr)}.eje p{grid-column:2}}

/* DEMO CHAT */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.demo h2{font-size:clamp(34px,4vw,60px);max-width:13ch}
.demo .intro{color:var(--bruma);margin-top:20px;max-width:46ch}
.escenarios{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.escenarios button{font:600 15px/1 var(--font);color:var(--marfil);background:transparent;border:1px solid var(--linea);border-radius:999px;padding:0 18px;min-height:46px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.escenarios button:hover{border-color:var(--marfil)}
.escenarios button[aria-pressed="true"]{background:var(--marfil);color:var(--abismo);border-color:var(--marfil)}
.detras{margin-top:36px;border-top:1px solid var(--linea)}
.detras h3{font-size:15px;font-weight:600;color:var(--menta-claro);letter-spacing:0;margin:20px 0 6px}
.detras dl{margin:0;display:grid}
.detras dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--linea);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.detras dl div.on{opacity:1;transform:none}
.detras dt{color:var(--bruma);font-size:15px}
.detras dd{margin:0;font-weight:600}
.movil{background:#E9EFEC;border-radius:36px;padding:12px;box-shadow:0 50px 100px rgba(0,0,0,.45);max-width:420px;width:100%;justify-self:center}
.movil-cab{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#0F3B38;color:#fff;border-radius:26px 26px 8px 8px}
.movil-cab i{width:36px;height:36px;border-radius:50%;background:#5FB08F;display:grid;place-items:center;font-style:normal;font-weight:700;color:#0F3B38;font-size:14px}
.movil-cab small{display:block;color:#A9DCC5;font-size:12px}
.mensajes{height:470px;overflow-y:auto;padding:18px 10px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.msg{max-width:84%;padding:10px 13px;border-radius:16px 16px 16px 4px;background:#fff;color:#0F3B38;font-size:14.5px;line-height:1.45;animation:entra .3s ease both}
.msg.yo{align-self:flex-end;background:#CDEBDD;border-radius:16px 16px 4px 16px}
.msg.doc{display:flex;align-items:center;gap:10px;font-weight:600}
.msg.doc span{width:34px;height:40px;border-radius:6px;background:#F2D9CF;color:#9A3B1F;display:grid;place-items:center;font-size:10px;font-weight:800;flex-shrink:0}
.msg.card{padding:0;overflow:hidden}
.msg.card div{padding:12px 14px}
.msg.card strong{display:block;font-size:15px}
.msg.card em{display:block;font-style:normal;text-align:center;padding:11px;border-top:1px solid #E1ECE7;color:#2F7D61;font-weight:700}
.escribe{align-self:flex-start;background:#fff;border-radius:16px;padding:12px 14px;display:flex;gap:4px}
.escribe i{width:7px;height:7px;border-radius:50%;background:#9DB3AC;display:block;animation:pulso 1s infinite}
.escribe i:nth-child(2){animation-delay:.15s}.escribe i:nth-child(3){animation-delay:.3s}
.movil-pie{margin:4px;background:#fff;border-radius:999px;padding:12px 18px;color:#7F9C92;font-size:14px}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pulso{0%,100%{opacity:.35}50%{opacity:1}}
@media (max-width:900px){.demo{grid-template-columns:1fr}.detras dl div{grid-template-columns:1fr;gap:2px}}
@media (prefers-reduced-motion: reduce){.msg{animation:none}.detras dl div{transition:none}}

/* ARQUITECTURA POSTVENTA */
.arq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.capa{border:1px solid var(--linea);border-radius:28px;padding:28px;display:grid;gap:14px;align-content:start;position:relative}
.capa small{color:var(--menta-claro);font-weight:600;font-size:14px}
.capa h3{font-size:24px}
.capa ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.capa li{background:rgba(238,242,236,.06);border-radius:12px;padding:11px 14px;font-size:15px}
.capa.centro{background:rgba(95,176,143,.1);border-color:rgba(95,176,143,.4)}
.arq-base{margin-top:20px}
@media (max-width:900px){.arq{grid-template-columns:1fr}}

/* MENÚ MÓVIL */
.menu-btn{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--linea);background:transparent;color:var(--marfil);cursor:pointer;align-items:center;justify-content:center}
.panel{position:fixed;inset:0;z-index:49;background:var(--abismo);padding:calc(env(safe-area-inset-top,0px) + 110px) var(--pad) 40px;display:none;flex-direction:column;gap:6px}
.panel.abierto{display:flex}
.panel a{font-size:32px;font-weight:500;letter-spacing:-.02em;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--linea)}
.nav ul a[aria-current="page"]{color:var(--marfil)}
.nav ul a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--menta);margin-top:4px;border-radius:2px}
@media (max-width:1240px){.menu-btn{display:inline-flex}}
.nav ul{gap:22px;font-size:14.5px}
@media (max-width:1240px){.nav ul{display:none!important}.nav .btn-linea{display:none}}

/* FOOTER COMPLETO */
.pie{border-top:1px solid var(--linea);padding:80px 0 40px}
.pie-g{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.pie-g img{height:28px;width:auto}
.pie-g p{color:var(--bruma);font-size:15px;margin-top:18px;max-width:34ch}
.pie-g h3{font-size:14px;font-weight:600;color:var(--menta-claro);letter-spacing:0;margin-bottom:14px}
.pie-g ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pie-g a{color:var(--marfil);text-decoration:none;font-size:15px;opacity:.85}
.pie-g a:hover{opacity:1;color:var(--menta-claro)}
.pie-b{margin-top:64px;padding-top:24px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--bruma);font-size:14px}
@media (max-width:860px){.pie-g{grid-template-columns:1fr 1fr}.pie-g>div:first-child{grid-column:1/-1}}

.saltar{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--marfil);color:var(--abismo);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.saltar:focus{left:12px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal>*{max-width:760px}
.legal h2{font-size:26px;margin:40px 0 12px}
.legal p,.legal li{color:var(--bruma)}
.pendiente{background:rgba(242,210,126,.12);border:1px dashed #F2D27E;border-radius:12px;padding:14px 18px;color:#F2D27E;margin:16px 0}