/* =============================================================
   KYNETRA — sistema de diseno
   Direccion B: claro corporativo. Navy + azul de accion.
   El movimiento vive aqui: nada de librerias, todo CSS + JS propio.
   ============================================================= */

:root{
  /* --- color --- */
  --tinta:#0F172A;
  --tinta-2:#475569;
  --texto:#020617;
  --accion:#0369A1;
  --accion-oscuro:#075985;
  --accion-suave:#E0F2FE;
  --fondo:#F8FAFC;
  --blanco:#FFFFFF;
  --linea:#E2E8F0;
  --exito:#059669;
  --wa:#25D366;

  /* --- espaciado, escala de 4 --- */
  --s-1:4px;  --s-2:8px;  --s-3:16px; --s-4:24px;
  --s-5:32px; --s-6:48px; --s-7:64px; --s-8:96px; --s-9:128px;

  /* --- tipografia --- */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-h1:clamp(2.1rem,5.2vw,3.6rem);
  --fs-h2:clamp(1.6rem,3.6vw,2.5rem);
  --fs-h3:1.22rem;
  --fs-body:1rem;
  --fs-small:.875rem;

  /* --- movimiento --- */
  --ease:cubic-bezier(.22,1,.36,1);        /* salida suave, entrada rapida */
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-rapido:160ms;
  --t-medio:280ms;
  --t-lento:640ms;

  --radio:12px;
  --radio-lg:18px;
  --sombra:0 1px 2px rgba(15,23,42,.05), 0 10px 30px rgba(15,23,42,.07);
  --sombra-alta:0 2px 4px rgba(15,23,42,.06), 0 20px 50px rgba(15,23,42,.12);
  --header-h:70px;

  --z-header:40; --z-menu:50; --z-flotante:60;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{line-height:1.12;font-weight:800;letter-spacing:-.032em;text-wrap:balance;color:var(--tinta)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em}
p{max-width:64ch}
:focus-visible{outline:3px solid var(--accion);outline-offset:3px;border-radius:4px}

.container{width:min(1180px,92%);margin-inline:auto}
/* Oculta visualmente pero lo siguen leyendo los lectores de pantalla.
   min-height/padding/border a 0 SON necesarios: si el elemento lleva .btn,
   su min-height:48px pisa el height:1px y el enlace aparece en pantalla. */
.solo-lectores{
  position:absolute!important;width:1px;height:1px;min-height:0!important;
  padding:0!important;margin:-1px;border:0!important;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
/* pero al tabular SÍ debe verse: es su razón de existir */
.solo-lectores:focus-visible{
  position:fixed!important;top:12px;left:12px;z-index:99;
  width:auto;height:auto;min-height:44px!important;padding:0 20px!important;
  clip:auto;background:var(--accion);color:#fff;border-radius:8px;
}
.mono{font-family:var(--mono)}

/* =============================================================
   MOVIMIENTO — aparicion al hacer scroll
   Bajo .js: si el JS falla, TODO se ve igual.
   ============================================================= */
.js .rev{opacity:0;transform:translateY(22px);
         transition:opacity var(--t-lento) var(--ease),transform var(--t-lento) var(--ease)}
.js .rev.in{opacity:1;transform:none}

.js [data-esc]>*{opacity:0;transform:translateY(22px);
                 transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js [data-esc].in>*{opacity:1;transform:none}
.js [data-esc].in>*:nth-child(2){transition-delay:.07s}
.js [data-esc].in>*:nth-child(3){transition-delay:.14s}
.js [data-esc].in>*:nth-child(4){transition-delay:.21s}
.js [data-esc].in>*:nth-child(5){transition-delay:.28s}
.js [data-esc].in>*:nth-child(6){transition-delay:.35s}

/* =============================================================
   BOTONES
   ============================================================= */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:0 var(--s-5);
  border:1px solid transparent;border-radius:9px;
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;cursor:pointer;
  transition:background-color var(--t-rapido) var(--ease-io),
             border-color var(--t-rapido) var(--ease-io),
             color var(--t-rapido) var(--ease-io),
             box-shadow var(--t-medio) var(--ease);
}
.btn svg{transition:transform var(--t-medio) var(--ease)}
.btn:hover svg{transform:translateX(3px)}      /* mueve el icono, no el boton */

.btn-1{background:var(--accion);color:#fff;box-shadow:0 1px 2px rgba(3,105,161,.2),0 8px 20px rgba(3,105,161,.22)}
.btn-1:hover{background:var(--accion-oscuro);box-shadow:0 2px 4px rgba(3,105,161,.24),0 14px 30px rgba(3,105,161,.28)}
.btn-2{background:var(--blanco);color:var(--tinta);border-color:var(--linea);box-shadow:0 1px 2px rgba(15,23,42,.04)}
.btn-2:hover{border-color:#94a3b8;background:#fff}
.btn-3{background:transparent;color:var(--accion);padding:0;min-height:auto;font-size:.93rem}
.btn-3:hover{color:var(--accion-oscuro)}
.btn-claro{background:#fff;color:var(--tinta)}
.btn-claro:hover{background:#e8eef4}
.btn-lg{min-height:54px;padding:0 var(--s-6);font-size:1.02rem}
.btn-block{display:flex;width:100%}

/* =============================================================
   HEADER
   ============================================================= */
.header{
  position:sticky;top:0;z-index:var(--z-header);height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(248,250,252,.82);backdrop-filter:blur(14px) saturate(1.6);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-medio) var(--ease),background-color var(--t-medio) var(--ease);
}
.header.compacto{border-bottom-color:var(--linea);background:rgba(248,250,252,.95)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}

.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.16rem;letter-spacing:-.04em;color:var(--tinta)}
.logo-marca{width:26px;height:26px;flex:none}
.logo-marca rect,.logo-marca path{transition:transform var(--t-medio) var(--ease)}
.logo:hover .logo-marca .n2{transform:translateY(-2px)}
.logo:hover .logo-marca .n3{transform:translateY(2px)}

.nav-esc{display:none}
.nav-esc ul{display:flex;align-items:center;gap:var(--s-5);list-style:none}
.nav-esc a{position:relative;font-size:.93rem;font-weight:600;color:var(--tinta-2);
           transition:color var(--t-rapido) var(--ease-io)}
.nav-esc a:hover{color:var(--tinta)}
/* El CTA del menu es un boton, no un enlace de navegacion.
   Sin esto, `.nav-esc a` (0,2,0) le gana a `.btn-1` (0,1,0) y el texto
   sale gris sobre azul: ilegible. */
.nav-esc a.btn-1,.nav-esc a.btn-1:hover{color:#fff}
/* subrayado que crece desde la izquierda */
.nav-esc a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;
  background:var(--accion);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-medio) var(--ease);
}
.nav-esc a:not(.btn):hover::after{transform:scaleX(1)}

.menu-btn{width:44px;height:44px;display:grid;place-items:center;background:none;
          border:1px solid var(--linea);border-radius:10px;cursor:pointer;background:#fff}
.menu-btn span{display:block;width:18px;height:2px;background:var(--tinta);border-radius:2px;
               box-shadow:0 -6px 0 var(--tinta),0 6px 0 var(--tinta);
               transition:box-shadow var(--t-rapido) var(--ease)}
.menu-movil{
  position:fixed;inset:var(--header-h) 0 0;z-index:var(--z-menu);background:var(--fondo);
  padding:var(--s-5) 0;overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:transform var(--t-medio) var(--ease),opacity var(--t-medio) var(--ease),visibility var(--t-medio);
}
.menu-movil.abierto{transform:none;opacity:1;visibility:visible}
.menu-movil ul{list-style:none}
.menu-movil a{display:block;padding:var(--s-4) 0;font-size:1.2rem;font-weight:700;
              border-bottom:1px solid var(--linea);color:var(--tinta)}
.menu-movil .btn{margin-top:var(--s-5)}

/* =============================================================
   SECCIONES
   ============================================================= */
.sec{padding:var(--s-8) 0;position:relative}
.sec-alt{background:var(--blanco)}
.sec-oscura{background:var(--tinta);color:#CBD5E1}
.sec-oscura h2,.sec-oscura h3{color:#fff}

.cab{max-width:660px;margin-bottom:var(--s-7)}
.cab.centro{margin-inline:auto;text-align:center}
.cab.centro p{margin-inline:auto}
.cab h2+p{margin-top:var(--s-3);color:var(--tinta-2);font-size:1.06rem}
.sec-oscura .cab h2+p{color:#94A3B8}

.kicker{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:var(--s-4);
  padding:5px 12px;border-radius:999px;
  background:var(--accion-suave);color:var(--accion);
  font-size:.73rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accion);
                animation:latido 2.4s var(--ease-io) infinite}
@keyframes latido{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.sec-oscura .kicker{background:rgba(3,105,161,.22);color:#7DD3FC}
.sec-oscura .kicker::before{background:#7DD3FC}

/* =============================================================
   HERO — con retícula viva de fondo
   ============================================================= */
.hero{position:relative;padding:var(--s-8) 0 var(--s-9);overflow:hidden}
.hero-fondo{position:absolute;inset:0;pointer-events:none;z-index:0}
/* retícula sutil que se desvanece hacia abajo */
.hero-fondo::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--linea) 1px,transparent 1px),
                   linear-gradient(90deg,var(--linea) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  opacity:.85;
}
/* halo que respira, muy lento: da vida sin distraer */
.hero-fondo::after{
  content:"";position:absolute;top:-180px;left:50%;width:900px;height:620px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(3,105,161,.13),transparent 65%);
  animation:respirar 11s var(--ease-io) infinite;
}
@keyframes respirar{
  0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}
  50%    {opacity:1;  transform:translateX(-50%) scale(1.1)}
}
.hero .container{position:relative;z-index:1}
.hero h1{margin-bottom:var(--s-4);max-width:16ch}
.hero .sub{font-size:1.14rem;color:var(--tinta-2);margin-bottom:var(--s-6);max-width:54ch}
.hero-ctas{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-7)}

/* cifras */
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-4);
        padding-top:var(--s-6);border-top:1px solid var(--linea)}
.cifra b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--tinta);
         font-variant-numeric:tabular-nums;line-height:1}
.cifra span{display:block;margin-top:5px;font-size:.85rem;color:var(--tinta-2);font-weight:500}

/* =============================================================
   TARJETAS DE PRODUCTO
   ============================================================= */
.grid{display:grid;gap:var(--s-4);grid-template-columns:1fr}

.prod{
  position:relative;overflow:hidden;
  padding:var(--s-6);background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio-lg);
  transition:border-color var(--t-medio) var(--ease),box-shadow var(--t-medio) var(--ease);
}
/* barra superior que se despliega al pasar el cursor */
.prod::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accion);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-lento) var(--ease);
}
.prod:hover{border-color:#BAE6FD;box-shadow:var(--sombra-alta)}
.prod:hover::before{transform:scaleX(1)}
.prod-tag{display:inline-block;margin-bottom:var(--s-3);padding:3px 9px;border-radius:6px;
          background:var(--accion-suave);color:var(--accion);
          font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.prod h3{margin-bottom:var(--s-2);font-size:1.4rem}
.prod>p{color:var(--tinta-2);margin-bottom:var(--s-4)}
.prod ul{list-style:none;display:grid;gap:var(--s-2);margin-bottom:var(--s-5)}
.prod li{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;color:var(--tinta-2)}
.prod li svg{flex:none;margin-top:4px;color:var(--exito)}

/* tarjeta simple */
.card{padding:var(--s-5);background:var(--blanco);border:1px solid var(--linea);
      border-radius:var(--radio);
      transition:transform var(--t-medio) var(--ease),box-shadow var(--t-medio) var(--ease),border-color var(--t-medio) var(--ease)}
.card:hover{border-color:#CBD5E1;box-shadow:var(--sombra)}
.card h3{margin-bottom:var(--s-2)}
.card p{font-size:.94rem;color:var(--tinta-2)}
.card-ic{width:42px;height:42px;margin-bottom:var(--s-4);display:grid;place-items:center;
         border-radius:11px;background:var(--accion-suave);color:var(--accion)}

/* pasos numerados */
.paso{position:relative;padding-left:58px}
.paso::before{
  content:attr(data-n);position:absolute;left:0;top:0;
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--tinta);color:#fff;border-radius:11px;
  font-weight:800;font-size:1.02rem;font-variant-numeric:tabular-nums;
}
.sec-oscura .paso::before{background:var(--accion)}
.paso h3{margin-bottom:6px}
.paso p{font-size:.94rem;color:var(--tinta-2)}
.sec-oscura .paso p{color:#94A3B8}

/* =============================================================
   DEMO DE WHATSAPP — la pieza estrella
   Conversacion real del agente, animada mensaje a mensaje.
   ============================================================= */
.demo-wa{display:grid;gap:var(--s-6);align-items:center}

.tel{
  position:relative;width:100%;max-width:340px;margin-inline:auto;
  /* margen superior: el distintivo "Atendiendo ahora" va en top:-13px y
     sin este aire se monta encima de las cifras del hero en movil */
  margin-top:34px;
  background:#0B141A;border-radius:34px;padding:11px;
  box-shadow:0 4px 10px rgba(15,23,42,.14),0 30px 70px rgba(15,23,42,.28);
}
@media (min-width:940px){ .tel{margin-top:0} }
.tel-pantalla{background:#0B141A;border-radius:25px;overflow:hidden;
              display:flex;flex-direction:column;height:520px}
.tel-barra{display:flex;align-items:center;gap:11px;padding:13px 15px;background:#1F2C34;flex:none}
.tel-av{width:34px;height:34px;border-radius:50%;background:var(--accion);
        display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;flex:none}
.tel-quien b{display:block;color:#E9EDEF;font-size:.9rem;font-weight:600;line-height:1.3}
.tel-quien span{display:block;color:#8696A0;font-size:.72rem}

.tel-chat{
  flex:1;padding:15px 13px;overflow:hidden;
  display:flex;flex-direction:column;gap:9px;justify-content:flex-end;
  background-color:#0B141A;
  background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:22px 22px;
}
.msj{
  max-width:82%;padding:8px 11px;border-radius:9px;font-size:.845rem;line-height:1.45;
  opacity:0;transform:translateY(9px) scale(.97);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
  word-break:break-word;
}
.msj.vis{opacity:1;transform:none}
/* Se ve desde el TELEFONO DEL CLIENTE: sus mensajes a la derecha en verde,
   los del agente a la izquierda en gris. Es la convencion de WhatsApp. */
.msj-agente{align-self:flex-start;background:#1F2C34;color:#E9EDEF;border-bottom-left-radius:3px}
.msj-cliente{align-self:flex-end;background:#005C4B;color:#E9EDEF;border-bottom-right-radius:3px}
.msj i{display:flex;align-items:center;justify-content:flex-end;gap:4px;
       margin-top:3px;font-size:.63rem;color:#8696A0;font-style:normal}
.msj-cliente i{color:#8AD3B8}
/* doble check: gris = entregado, azul = leido por el agente */
.msj .checks{color:#8AD3B8;opacity:.75;transition:color .34s var(--ease),opacity .34s var(--ease)}
.msj.leido .checks{color:#53BDEB;opacity:1}

/* burbuja "escribiendo…" */
.escribiendo{align-self:flex-start;background:#1F2C34;padding:11px 13px;border-radius:9px;
             border-bottom-left-radius:3px;display:flex;gap:4px;
             opacity:0;transform:translateY(9px);transition:opacity .22s var(--ease),transform .22s var(--ease)}
.escribiendo.vis{opacity:1;transform:none}
.escribiendo i{width:6px;height:6px;border-radius:50%;background:#8696A0;
               animation:puntos 1.3s var(--ease-io) infinite}
.escribiendo i:nth-child(2){animation-delay:.18s}
.escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes puntos{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* aviso de accion ejecutada: lo que lo diferencia de un chatbot */
.accion-hecha{
  align-self:center;max-width:92%;margin:5px 0;
  padding:8px 12px;border-radius:9px;
  background:rgba(5,150,105,.14);border:1px solid rgba(5,150,105,.34);
  color:#6EE7B7;font-size:.74rem;font-weight:600;
  display:flex;align-items:center;gap:7px;
  opacity:0;transform:scale(.94);transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.accion-hecha.vis{opacity:1;transform:none}
.accion-hecha svg{flex:none}

/* =============================================================
   CAPTURAS DE PRODUCTO — en marco de telefono, para que se lea
   igual que la demo de WhatsApp y el sitio se sienta de una pieza.
   ============================================================= */
/* Dos telefonos juntos, no separados: se leen como un par. */
.capturas{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;
          align-items:flex-start;margin-top:var(--s-7)}
.captura{
  position:relative;flex:0 1 244px;max-width:244px;
  background:#111827;border-radius:32px;padding:8px;
  box-shadow:0 4px 10px rgba(15,23,42,.12),0 26px 60px rgba(15,23,42,.2);
  transition:transform var(--t-lento) var(--ease),box-shadow var(--t-lento) var(--ease);
}
/* muesca superior: lo que lo hace leer como telefono y no como marco */
.captura::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:74px;height:17px;background:#111827;border-radius:0 0 12px 12px;z-index:2;
}
.captura img{display:block;width:100%;border-radius:25px}
.pie-captura{max-width:62ch;margin:var(--s-4) auto 0;text-align:center;
             font-size:.92rem;color:var(--tinta-2)}
.pie-captura b{color:var(--tinta);font-weight:700}

/* --- captura de escritorio en marco de navegador --- */
.captura-esc{
  max-width:960px;margin:var(--s-7) auto 0;
  border-radius:12px 12px 14px 14px;overflow:hidden;
  border:1px solid var(--linea);
  box-shadow:0 4px 12px rgba(15,23,42,.08),0 28px 64px rgba(15,23,42,.16);
  transition:box-shadow var(--t-lento) var(--ease),transform var(--t-lento) var(--ease);
}
.captura-esc:hover{transform:translateY(-5px);
                   box-shadow:0 6px 16px rgba(15,23,42,.1),0 36px 80px rgba(15,23,42,.2)}
.barra-nav{display:flex;align-items:center;gap:7px;padding:10px 13px;background:#E2E5E9}
.barra-nav i{width:11px;height:11px;border-radius:50%;background:#C3C8CF;flex:none}
.barra-nav span{margin-left:9px;padding:3px 14px;border-radius:6px;background:#fff;
                font-family:var(--mono);font-size:.7rem;color:#64748B}
.captura-esc img{display:block;width:100%}

@media (min-width:940px){
  .capturas{gap:var(--s-4)}
  /* se solapan un poco y se inclinan: parecen dos telefonos sobre una mesa */
  .captura-a{transform:rotate(-3deg) translateX(14px)}
  .captura-b{transform:rotate(3deg) translateX(-14px);margin-top:26px}
  .captura:hover{transform:rotate(0deg) translateY(-9px);z-index:3;
                 box-shadow:0 6px 14px rgba(15,23,42,.14),0 34px 74px rgba(15,23,42,.26)}
}
@media (prefers-reduced-motion:reduce){
  .captura-a,.captura-b,.captura:hover{transform:none}
}

/* --- distintivo EN VIVO sobre el telefono --- */
.tel-vivo{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 13px;border-radius:999px;
  background:var(--exito);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(5,150,105,.4);
}
.tel-vivo::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;
                  animation:latido 1.7s var(--ease-io) infinite}

/* =============================================================
   DIAGNOSTICO EXPRESS — via de entrada alternativa al formulario
   ============================================================= */
.diag{
  position:relative;overflow:hidden;
  padding:var(--s-7) var(--s-5);border-radius:var(--radio-lg);
  background:linear-gradient(135deg,#0F172A 0%,#0C2A42 100%);
  color:#CBD5E1;text-align:center;
}
.diag::before{                       /* reticula tenue, coherente con el hero */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 30%,transparent 100%);
}
.diag>*{position:relative;z-index:1}
.diag h2{color:#fff;margin-bottom:var(--s-3)}
.diag>p{margin:0 auto var(--s-5);color:#94A3B8}
.diag .kicker{background:rgba(125,211,252,.16);color:#7DD3FC}
.diag .kicker::before{background:#7DD3FC}
.diag-pasos{display:grid;grid-template-columns:1fr;gap:var(--s-4);
            margin:var(--s-6) auto 0;max-width:720px;text-align:left}
.diag-paso{display:flex;gap:var(--s-3);align-items:flex-start;font-size:.94rem}
.diag-paso b{display:grid;place-items:center;flex:none;width:26px;height:26px;
             border-radius:50%;background:rgba(125,211,252,.18);color:#7DD3FC;
             font-size:.8rem;font-weight:800}
.diag-nota{margin:var(--s-5) auto 0;font-size:var(--fs-small);color:#7A8899}

@media (min-width:760px){ .diag-pasos{grid-template-columns:repeat(3,1fr)} }

/* --- invitacion a probarlo, aparece al terminar la conversacion --- */
.demo-cta{
  margin-top:var(--s-4);padding:var(--s-4);
  background:rgba(5,150,105,.07);border:1px solid rgba(5,150,105,.28);
  border-radius:var(--radio);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.demo-cta.vis{opacity:1;transform:none}
.demo-cta p{font-size:.92rem;color:var(--tinta);margin-bottom:var(--s-3);max-width:none}
.demo-cta strong{color:var(--exito)}
.demo-cta .btn{background:var(--wa);color:#fff;box-shadow:0 6px 18px rgba(37,211,102,.32)}
.demo-cta .btn:hover{background:#1FB855}

.demo-txt li{display:flex;gap:11px;align-items:flex-start;margin-bottom:var(--s-3);
             font-size:.96rem;color:var(--tinta-2)}
.demo-txt li svg{flex:none;margin-top:4px;color:var(--accion)}
.demo-txt ul{list-style:none;margin:var(--s-5) 0}
.replay{display:inline-flex;align-items:center;gap:7px;background:none;border:none;
        color:var(--accion);font-weight:700;font-size:.9rem;cursor:pointer;padding:0}
.replay svg{transition:transform .5s var(--ease)}
.replay:hover svg{transform:rotate(-180deg)}

/* =============================================================
   FRANJA DE TECNOLOGIAS
   ============================================================= */
.tec{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center}
.tec span{padding:6px 13px;border-radius:999px;background:var(--blanco);
          border:1px solid var(--linea);font-size:.82rem;font-weight:600;color:var(--tinta-2);
          transition:border-color var(--t-rapido) var(--ease-io),color var(--t-rapido) var(--ease-io)}
.tec span:hover{border-color:#BAE6FD;color:var(--accion)}

/* =============================================================
   FORMULARIO
   ============================================================= */
.form{display:grid;gap:var(--s-4);max-width:520px}
.campo{display:grid;gap:var(--s-2)}
.campo label{font-size:var(--fs-small);font-weight:700;color:var(--tinta)}
.campo input,.campo textarea,.campo select{
  width:100%;min-height:48px;padding:var(--s-3);
  background:var(--blanco);border:1px solid var(--linea);border-radius:9px;
  transition:border-color var(--t-rapido) var(--ease-io),box-shadow var(--t-rapido) var(--ease-io);
}
.campo textarea{min-height:104px;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;border-color:var(--accion);box-shadow:0 0 0 3px rgba(3,105,161,.15);
}
.form-nota{font-size:var(--fs-small);color:var(--tinta-2)}
.form-nota a{text-decoration:underline}

/* =============================================================
   CTA FINAL Y FOOTER
   ============================================================= */
.cta-final{text-align:center}
.cta-final h2{margin-bottom:var(--s-3)}
.cta-final p{margin:0 auto var(--s-6)}

.footer{background:var(--tinta);color:#94A3B8;padding:var(--s-8) 0 var(--s-5)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
.footer .logo{color:#fff}
.footer h3{color:#fff;font-size:var(--fs-small);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s-3)}
.footer ul{list-style:none;display:grid;gap:var(--s-2)}
.footer a{overflow-wrap:anywhere;transition:color var(--t-rapido) var(--ease-io)}
.footer a:hover{color:#fff}
.footer-abajo{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid rgba(255,255,255,.1);
              font-size:var(--fs-small);display:flex;flex-direction:column;gap:var(--s-2);
              padding-bottom:80px}

.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:var(--z-flotante);
  width:56px;height:56px;display:grid;place-items:center;
  background:var(--wa);color:#fff;border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.26);
  transition:transform var(--t-medio) var(--ease),box-shadow var(--t-medio) var(--ease);
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.32)}

/* =============================================================
   BREAKPOINTS — de movil hacia arriba
   ============================================================= */
@media (min-width:640px){
  .hero-ctas{flex-direction:row}
  .cifras{grid-template-columns:repeat(4,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-abajo{flex-direction:row;justify-content:space-between;align-items:center}
}
@media (min-width:940px){
  .nav-esc{display:block}
  .menu-btn,.menu-movil{display:none}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s-7);align-items:center}
  .demo-wa{grid-template-columns:.85fr 1.15fr;gap:var(--s-8)}
  .demo-wa .tel{margin-inline:0}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr}
  .footer-abajo{padding-bottom:var(--s-4)}
}

/* =============================================================
   MOVIMIENTO REDUCIDO — obligatorio
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .rev,.js [data-esc]>*{opacity:1;transform:none}
  .msj,.accion-hecha{opacity:1;transform:none}
  .hero-fondo::after{animation:none}
}

@media print{.header,.menu-movil,.wa-float,.footer{display:none}body{background:#fff;color:#000}}