/* Sitio comercial AiraNova · estilo Apple con acentos futuristas en los colores del logo (azul, lima, naranja). */
:root {
  --negro: #000;
  --gris-0: #0b0b0f;
  --gris-1: #141419;
  --gris-2: #1d1d24;
  --linea: rgba(255, 255, 255, .1);
  --texto: #f5f5f7;
  --mut: #86868b;
  --cian: #4ea8ff;
  --violeta: #ff9f43;
  --rosa: #f472b6;
  --verde: #34d399;
  --ambar: #fbbf24;
  --rojo: #f87171;
  --degradado: linear-gradient(100deg, #4ea8ff 0%, #b5d86a 50%, #ff9f43 100%);
  --ancho: 1120px;
  font-family: "Inter", "SF Pro Display", -apple-system, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  color: var(--texto);
  background: var(--negro);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body { margin: 0; background: var(--negro); font-size: 17px; line-height: 1.47; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
a { color: var(--cian); }
button, input, textarea { font: inherit; color: inherit; }
code { font-family: "SF Mono", "Cascadia Code", Consolas, monospace; font-size: .9em; background: rgba(255, 255, 255, .08); padding: 1px 6px; border-radius: 6px; }
[hidden] { display: none !important; }
.salto { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; z-index: 50; }
.salto:focus { left: 8px; }
.contenedor { width: min(var(--ancho), 100% - 44px); margin: 0 auto; }
.degradado { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gris { color: var(--mut); }
.mut { color: var(--mut); }
.sobretitulo { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--cian); margin-bottom: 10px; }

/* ---------- Barra ---------- */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 30; height: 52px; background: rgba(0, 0, 0, .55); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.barra.scroll { border-color: var(--linea); background: rgba(10, 10, 14, .78); }
.barra-in { width: min(1024px, 100% - 32px); margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--texto); text-decoration: none; font-weight: 650; font-size: 18px; letter-spacing: -.02em; }
.logo b { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-marca { width: 10px; height: 10px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 0 3px rgba(78, 168, 255, .18), 0 0 14px var(--cian); }
.menu { display: flex; gap: 30px; }
.menu a { color: rgba(245, 245, 247, .8); text-decoration: none; font-size: 12.5px; letter-spacing: .01em; transition: color .2s; }
.menu a:hover { color: #fff; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 980px; padding: 10px 20px; font-weight: 500; font-size: 15px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .2s, filter .2s, background .2s, border-color .2s; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--degradado); color: #03121a; font-weight: 600; box-shadow: 0 10px 34px -10px rgba(78, 168, 255, .65); }
.btn-primario:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-borde { border-color: rgba(255, 255, 255, .25); color: var(--texto); background: rgba(255, 255, 255, .04); }
.btn-borde:hover { border-color: rgba(255, 255, 255, .5); }
.btn-chico { padding: 6px 13px; font-size: 13px; }
.btn-grande { padding: 14px 28px; font-size: 17px; }
.btn-entrar { padding: 5px 15px; font-size: 12.5px; background: #f5f5f7; color: #000; font-weight: 600; }
.btn-entrar:hover { background: #fff; }
.enlace-flecha { color: var(--cian); text-decoration: none; font-size: 17px; }
.enlace-flecha::after { content: " ›"; font-size: 1.15em; }
.enlace-flecha:hover { text-decoration: underline; }

/* ---------- Héroe ---------- */
.hero { position: relative; padding: 150px 0 0; text-align: center; overflow: hidden; }
.red { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }
.halo { position: absolute; left: 50%; top: 52%; width: 1100px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(31, 95, 214, .35), rgba(78, 168, 255, .14) 55%, transparent 75%); filter: blur(30px); pointer-events: none; }
.hero-in { position: relative; width: min(980px, 100% - 40px); margin: 0 auto; }
.titulo-hero { font-size: clamp(48px, 8.4vw, 104px); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; }
.lead { font-size: clamp(19px, 2.1vw, 25px); line-height: 1.38; color: #c7c7cc; margin: 26px auto 0; max-width: 760px; font-weight: 450; }
.lead.chico { font-size: clamp(17px, 1.6vw, 21px); margin-left: 0; }
.encabezado.centro .lead.chico { margin-left: auto; }
.rot { display: inline-block; color: #fff; font-weight: 650; }
.rot-w { display: inline-block; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rot-w.entra { animation: rotar .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes rotar { from { opacity: 0; transform: translateY(.45em); filter: blur(4px); } }
.acciones { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 36px; }

/* Captura del producto */
.escenario { --giro: 22deg; --escala: .9; position: relative; width: min(1060px, 100% - 32px); margin: 70px auto 0; perspective: 1600px; }
.pantalla { transform: rotateX(var(--giro)) scale(var(--escala)); transform-origin: center top; border-radius: 22px 22px 0 0; border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; background: linear-gradient(180deg, #0d1220, #070a12); box-shadow: 0 -30px 120px -20px rgba(78, 168, 255, .35), 0 0 0 1px rgba(255, 255, 255, .03) inset; overflow: hidden; text-align: left; transition: transform .1s linear; }
.pant-barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 12px; color: var(--mut); }
.pant-barra i { width: 11px; height: 11px; border-radius: 50%; background: #2a2f3a; }
.pant-barra i:nth-child(1) { background: #ff5f57; } .pant-barra i:nth-child(2) { background: #febc2e; } .pant-barra i:nth-child(3) { background: #28c840; }
.pant-barra span { margin-left: 12px; }
.pant-cuerpo { display: grid; grid-template-columns: 190px 1fr; min-height: 420px; }
.pant-lado { border-right: 1px solid rgba(255, 255, 255, .06); padding: 18px 12px; display: grid; gap: 4px; align-content: start; font-size: 13px; color: #9aa3b5; }
.pant-lado b { color: #fff; margin: 0 8px 12px; }
.pant-lado span { padding: 7px 10px; border-radius: 8px; }
.pant-lado .on { background: rgba(78, 168, 255, .14); color: #fff; box-shadow: inset 2px 0 0 var(--cian); }
.pant-main { padding: 22px; display: grid; gap: 16px; align-content: start; }
.pant-saludo { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.pant-saludo b { color: var(--verde); }
.pant-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pant-kpis div { padding: 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); display: grid; gap: 2px; }
.pant-kpis small { color: var(--mut); font-size: 11.5px; }
.pant-kpis b { font-size: 22px; letter-spacing: -.02em; }
.pant-kpis b.c { color: #bfe0ff; } .pant-kpis b.v { color: #ffd9b0; }
.pant-graf { height: 150px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); padding: 12px; }
.pant-graf svg { width: 100%; height: 100%; display: block; overflow: visible; }
.linea-anim { stroke-dasharray: 600; stroke-dashoffset: 600; animation: trazar 2.6s .5s ease-out forwards; filter: drop-shadow(0 0 6px #4ea8ff); }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.pant-ia { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: linear-gradient(100deg, rgba(78, 168, 255, .12), rgba(255, 159, 67, .12)); border: 1px solid rgba(78, 168, 255, .25); font-size: 13.5px; }
.chispa { width: 10px; height: 10px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 12px var(--cian); animation: latir 1.6s infinite; flex: none; }
@keyframes latir { 50% { transform: scale(1.4); opacity: .6; } }

/* ---------- Cifras ---------- */
.cifras { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: var(--gris-0); }
.cifras-in { display: grid; grid-template-columns: repeat(4, 1fr); padding: 46px 0; gap: 20px; }
.cifras-in div { display: grid; gap: 6px; text-align: center; }
.cifras-in b { font-size: clamp(36px, 4.6vw, 56px); font-weight: 700; letter-spacing: -.04em; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.cifras-in span { color: var(--mut); font-size: 14px; }

/* ---------- Secciones ---------- */
.seccion { padding: 130px 0; }
.seccion.negro { background: var(--negro); }
.seccion.gris-fondo { background: var(--gris-0); }
.encabezado { margin-bottom: 56px; }
.encabezado.centro { text-align: center; }
.titulo-seccion { font-size: clamp(38px, 5.6vw, 72px); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; }

/* Mosaico de productos */
.mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mosaico-t { position: relative; overflow: hidden; border-radius: 28px; padding: 38px 34px; min-height: 420px; background: var(--gris-1); border: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; gap: 10px; transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.mosaico-t:hover { transform: scale(1.012); border-color: rgba(255, 255, 255, .14); }
.mosaico-t h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
.mosaico-t > p:not(.sobretitulo) { color: #a1a1a6; font-size: 16px; max-width: 420px; }
.mosaico-t.grande { grid-column: span 2; min-height: 460px; background: radial-gradient(600px 300px at 90% 110%, rgba(78, 168, 255, .25), transparent 70%), radial-gradient(500px 300px at 10% 120%, rgba(181, 216, 106, .22), transparent 70%), var(--gris-1); }
.mosaico-t.grande h3 { font-size: clamp(32px, 3.6vw, 48px); }
.enlaces { display: flex; gap: 22px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.mini-kpis { margin-top: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.mini-kpis span { padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-size: 24px; font-weight: 700; letter-spacing: -.02em; backdrop-filter: blur(10px); }
.mini-kpis small { font-size: 12px; color: var(--mut); font-weight: 500; }
.t-agente { background: radial-gradient(400px 260px at 100% 100%, rgba(52, 211, 153, .18), transparent 70%), var(--gris-1); }
.burbujas-deco { margin-top: auto; display: grid; gap: 10px; }
.burbujas-deco span { padding: 10px 15px; border-radius: 18px; font-size: 14px; max-width: 85%; }
.burbujas-deco .b1 { justify-self: end; background: linear-gradient(100deg, #4ea8ff, #b5d86a); color: #04121a; border-bottom-right-radius: 5px; font-weight: 500; }
.burbujas-deco .b2 { background: rgba(255, 255, 255, .08); border-bottom-left-radius: 5px; }
.t-voz { background: radial-gradient(420px 260px at 50% 110%, rgba(244, 114, 182, .2), transparent 70%), var(--gris-1); }
.onda { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 5px; height: 90px; }
.onda i { width: 5px; border-radius: 9px; background: var(--degradado); height: 20%; animation: onda 1.2s ease-in-out infinite; }
.onda i:nth-child(3n) { animation-delay: -.3s; } .onda i:nth-child(3n+1) { animation-delay: -.7s; } .onda i:nth-child(4n) { animation-delay: -.5s; } .onda i:nth-child(5n) { animation-delay: -.9s; }
@keyframes onda { 0%, 100% { height: 18%; } 50% { height: 95%; } }
.onda.grande { height: 160px; gap: 8px; }
.onda.grande i { width: 8px; }
.t-crm .anillo.deco { margin-top: auto; align-self: center; width: 150px; height: 150px; }
.t-crm .anillo.deco span { font-size: 40px; }
.t-jarvis { background: radial-gradient(360px 260px at 50% 100%, rgba(31, 95, 214, .28), transparent 70%), var(--gris-1); }
.orbe-deco { margin: auto auto 0; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bfe0ff, #4ea8ff 30%, #1f5fd6 65%, #1e1b4b 100%); box-shadow: 0 0 70px rgba(78, 168, 255, .5), 0 0 140px rgba(181, 216, 106, .35); animation: respirar 5s ease-in-out infinite; }
@keyframes respirar { 50% { transform: scale(1.06); filter: brightness(1.15); } }
.t-auto { grid-column: span 2; min-height: 340px; }
.flujo-mini { margin: auto 0 0; padding: 0; list-style: none; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.flujo-mini li { padding: 10px 16px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; position: relative; }
.flujo-mini li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); color: var(--cian); font-size: 13px; }
.flujo-mini li:last-child { border-color: rgba(78, 168, 255, .5); box-shadow: 0 0 20px rgba(78, 168, 255, .25); }

/* ERP */
.erp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items: start; }
.erp-texto { position: sticky; top: 110px; display: grid; gap: 22px; justify-items: start; }
.nota-demo { font-size: 14px; color: var(--mut); }
.modulos-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.modulos-lista li { padding: 26px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 4px; }
.modulos-lista li:first-child { border-top: 1px solid var(--linea); }
.modulos-lista b { font-size: 26px; letter-spacing: -.03em; font-weight: 650; }
.modulos-lista span { color: var(--mut); }
.modulos-lista li:hover b { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Voz */
.voz-escena { position: relative; border-radius: 32px; padding: 60px 20px; background: radial-gradient(600px 200px at 50% 50%, rgba(181, 216, 106, .22), transparent 70%), var(--gris-1); border: 1px solid rgba(255, 255, 255, .06); }
.pasos-voz { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: v; }
.pasos-voz li { display: grid; gap: 4px; padding-top: 18px; border-top: 2px solid rgba(255, 255, 255, .12); counter-increment: v; }
.pasos-voz li::before { content: "0" counter(v); font-size: 12px; color: var(--cian); font-weight: 700; letter-spacing: .1em; }
.pasos-voz b { font-size: 21px; letter-spacing: -.02em; }
.pasos-voz span { color: var(--mut); font-size: 15px; }

/* Mejora continua */
.ciclo-fila { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.paso-c { padding: 30px 26px; border-radius: 24px; background: var(--gris-1); border: 1px solid rgba(255, 255, 255, .06); display: grid; gap: 10px; align-content: start; }
.paso-c span { font-size: 54px; font-weight: 700; letter-spacing: -.05em; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.paso-c h3 { font-size: 22px; }
.paso-c p { color: var(--mut); font-size: 15.5px; }

/* Control */
.control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border-radius: 26px; overflow: hidden; border: 1px solid var(--linea); }
.control > div { background: var(--negro); padding: 34px 30px; display: grid; gap: 8px; align-content: start; }
.control h3 { font-size: 21px; }
.control p { color: var(--mut); font-size: 15.5px; }

/* ---------- Demo en vivo ---------- */
.panel { background: var(--gris-1); border: 1px solid rgba(255, 255, 255, .08); border-radius: 26px; }
.demo { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; align-items: start; }
.demo-chat { display: flex; flex-direction: column; height: 620px; overflow: hidden; }
.tabs { display: flex; gap: 6px; padding: 14px 14px 0; overflow-x: auto; }
.tab { border: 0; background: rgba(255, 255, 255, .06); color: var(--mut); padding: 8px 15px; border-radius: 99px; cursor: pointer; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.tab[aria-selected="true"] { background: #f5f5f7; color: #000; }
.demo-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.fila { display: flex; gap: 12px; align-items: center; }
.demo-cab small { display: block; color: var(--mut); font-size: 12.5px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--degradado); color: #03121a; flex: none; }
.demo-msgs { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.burbuja { max-width: 80%; padding: 10px 15px; border-radius: 20px; white-space: pre-wrap; word-wrap: break-word; font-size: 15.5px; line-height: 1.42; }
.burbuja.ia { align-self: flex-start; background: rgba(255, 255, 255, .08); border-bottom-left-radius: 6px; }
.burbuja.cliente { align-self: flex-end; background: linear-gradient(100deg, #4ea8ff, #b5d86a); color: #04121a; border-bottom-right-radius: 6px; font-weight: 500; }
.burbuja.error { align-self: center; background: rgba(248, 113, 113, .12); color: #fecaca; font-size: 14px; }
.burbuja small { display: block; color: var(--mut); font-size: 12px; margin-top: 5px; }
.escribiendo { display: inline-flex; gap: 4px; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: var(--mut); animation: puntos 1.2s infinite; }
.escribiendo i:nth-child(2) { animation-delay: .15s; } .escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes puntos { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; transform: translateY(-3px); } }
.demo-estado { margin: 0 18px 8px; padding: 8px 12px; border-radius: 12px; background: rgba(78, 168, 255, .1); border: 1px solid rgba(78, 168, 255, .3); font-size: 13.5px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 18px 10px; }
.chip { border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #d1d1d6; padding: 6px 12px; border-radius: 99px; cursor: pointer; font-size: 13px; transition: border-color .2s; }
.chip:hover { border-color: var(--cian); color: #fff; }
.demo-form { display: flex; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid var(--linea); }
.demo-form input { flex: 1; min-width: 0; }
input[type=text], input[type=tel], input[type=email], textarea { background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 12px 15px; width: 100%; transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus { outline: none; border-color: var(--cian); box-shadow: 0 0 0 4px rgba(78, 168, 255, .18); }
.demo-lado { padding: 26px; display: grid; gap: 18px; }
.demo-lado h3 { font-size: 19px; }
.lead-cuerpo { display: flex; gap: 16px; align-items: center; }
.anillo { --p: 0; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; flex: none; background: radial-gradient(closest-side, var(--gris-1) 78%, transparent 80% 100%), conic-gradient(var(--cian) calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); transition: background .5s; }
.anillo span { font-size: 24px; font-weight: 700; }
.pill { display: inline-block; padding: 3px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; background: rgba(78, 168, 255, .14); color: #bfe0ff; margin-top: 4px; }
.datos { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; margin: 0; font-size: 14px; }
.datos dt { color: var(--mut); }
.datos dd { margin: 0; }
.alerta { padding: 12px 14px; border-radius: 14px; background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .35); font-size: 14px; color: #fde68a; }
.nota { font-size: 12.5px; color: var(--mut); }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.contacto > div { display: grid; gap: 22px; justify-items: start; }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.lista-check li { padding-left: 30px; position: relative; color: #d1d1d6; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--degradado); }
.lista-check li::after { content: "✓"; position: absolute; left: 4px; top: 0; font-size: 12px; font-weight: 800; color: #03121a; }
.formulario { padding: 32px; display: grid; gap: 16px; }
.formulario label { display: grid; gap: 7px; font-size: 14px; font-weight: 500; color: #d1d1d6; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trampa { position: absolute; left: -9999px; }
.formulario label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; color: var(--mut); }
.check input { margin-top: 3px; accent-color: var(--cian); width: 16px; height: 16px; flex: none; }
.estado { font-size: 14px; min-height: 1.2em; }
.estado.ok { color: var(--verde); }
.estado.mal { color: var(--rojo); }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 34px 0 46px; background: var(--gris-0); font-size: 13px; }
.pie-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie-menu { display: flex; gap: 22px; flex-wrap: wrap; }
.pie-menu a { color: var(--mut); text-decoration: none; }
.pie-menu a:hover { color: var(--texto); }
.pie-legal { color: #6e6e73; margin-top: 18px; font-size: 12px; }

/* ---------- Aparición ---------- */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), transform .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.revelar.visto { opacity: 1; transform: none; }

/* ---------- Adaptable ---------- */
@media (max-width: 1000px) {
  .menu { display: none; }
  .mosaico { grid-template-columns: 1fr 1fr; }
  .mosaico-t.grande, .t-auto { grid-column: span 2; }
  .erp, .contacto, .demo { grid-template-columns: 1fr; }
  .erp-texto { position: static; }
  .ciclo-fila { grid-template-columns: 1fr 1fr; }
  .control { grid-template-columns: 1fr 1fr; }
  .pasos-voz { grid-template-columns: repeat(3, 1fr); }
  .pant-cuerpo { grid-template-columns: 1fr; }
  .pant-lado { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: 116px; }
  .seccion { padding: 90px 0; }
  .mosaico, .ciclo-fila, .control, .dos-col { grid-template-columns: 1fr; }
  .mosaico-t.grande, .t-auto { grid-column: auto; }
  .mosaico-t { min-height: 360px; padding: 30px 24px; }
  .cifras-in { grid-template-columns: 1fr 1fr; gap: 30px 14px; }
  .pasos-voz { grid-template-columns: 1fr 1fr; }
  .pant-kpis { grid-template-columns: 1fr 1fr; }
  .pant-cuerpo { min-height: 0; }
  .demo-chat { height: 560px; }
  .datos { grid-template-columns: 1fr; gap: 2px; }
  .datos dd { margin-bottom: 8px; }
  .formulario { padding: 22px; }
  .acciones { gap: 18px; }
  .onda.grande { gap: 4px; }
  .onda.grande i { width: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
  .linea-anim { stroke-dashoffset: 0; }
  .escenario { --giro: 0deg; --escala: 1; }
}

/* =====================  AiraNova  ===================== */
:root { --azul: #4ea8ff; --lima: #b5d86a; --naranja: #ff9f43; }
.logo-img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(78, 168, 255, .35)); }
.logo { gap: 10px; }

/* Logo del héroe: flota y respira con un halo de los tres colores */
.hero-logo { position: relative; width: 120px; height: 120px; margin: 0 auto 26px; display: grid; place-items: center; }
.hero-logo::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(78, 168, 255, .55), rgba(181, 216, 106, .45), rgba(255, 159, 67, .55), rgba(78, 168, 255, .55)); filter: blur(28px); opacity: .55; animation: girar 9s linear infinite; }
.hero-logo::after { content: ""; position: absolute; inset: 0; border-radius: 34px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .15); }
.hero-logo img { position: relative; z-index: 1; width: 84px; height: 84px; object-fit: contain; animation: flotar 6s ease-in-out infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes flotar { 50% { transform: translateY(-6px); } }
.halo { background: radial-gradient(closest-side, rgba(31, 95, 214, .38), rgba(78, 168, 255, .14) 50%, rgba(255, 159, 67, .06) 65%, transparent 78%); }
.pant-lado b { display: flex; align-items: center; gap: 7px; }

/* Foco que sigue al cursor (lo mueve sitio.js) */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(380px circle at var(--mx, -400px) var(--my, -400px), rgba(78, 168, 255, .13), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: -1; }
.spot:hover::before { opacity: 1; }

/* Mosaico: fondos por tarjeta y tarjeta web + PWA con teléfono */
.mosaico-t.grande { background: radial-gradient(600px 300px at 90% 110%, rgba(78, 168, 255, .28), transparent 70%), radial-gradient(500px 300px at 10% 120%, rgba(255, 159, 67, .16), transparent 70%), var(--gris-1); }
.t-agente { background: radial-gradient(400px 260px at 100% 100%, rgba(181, 216, 106, .2), transparent 70%), var(--gris-1); }
.t-voz { background: radial-gradient(420px 260px at 50% 110%, rgba(255, 159, 67, .22), transparent 70%), var(--gris-1); }
.t-web { background: radial-gradient(380px 300px at 50% 120%, rgba(78, 168, 255, .25), transparent 70%), var(--gris-1); }
.telefono { margin: auto auto -70px; width: 170px; height: 250px; flex: none; border-radius: 34px; padding: 7px; background: linear-gradient(160deg, #3a3f4a, #121418); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.mosaico-t:hover .telefono { transform: translateY(-14px); }
.tel-pantalla { height: 100%; border-radius: 28px; background: radial-gradient(160px 120px at 50% 0%, rgba(78, 168, 255, .35), transparent 70%), #05070c; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px 0; position: relative; }
.tel-isla { position: absolute; top: 9px; width: 54px; height: 15px; border-radius: 99px; background: #000; }
.tel-pantalla img { width: 34px; height: 34px; }
.tel-pantalla b { font-size: 14px; }
.tel-l { width: 100%; height: 7px; border-radius: 9px; background: rgba(255, 255, 255, .1); }
.tel-l.corta { width: 66%; }
.tel-btn { margin-top: 6px; padding: 7px 14px; border-radius: 99px; background: var(--degradado); color: #04121a; font-size: 11.5px; font-weight: 600; }
.tel-inst { font-size: 10.5px; color: var(--mut); padding: 5px 10px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .2); }

/* Agentes IA */
.agentes { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; margin-bottom: 56px; }
.agentes .encabezado { margin: 0; }
.terminal { border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, #0a0e16, #05070b); box-shadow: 0 40px 100px -40px rgba(78, 168, 255, .45); font-family: "SF Mono", "Cascadia Code", Consolas, monospace; }
.term-barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 12px; color: var(--mut); }
.term-barra i { width: 11px; height: 11px; border-radius: 50%; }
.term-barra i:nth-child(1) { background: #ff5f57; } .term-barra i:nth-child(2) { background: #febc2e; } .term-barra i:nth-child(3) { background: #28c840; }
.term-barra span { margin-left: 10px; }
.term-cuerpo { padding: 18px 20px; min-height: 290px; display: grid; align-content: start; gap: 9px; font-size: 13.5px; color: #c7cbd4; }
.term-cuerpo div { animation: linea .4s ease-out; }
.term-cuerpo b { color: var(--azul); font-weight: 600; }
.term-cuerpo em { color: var(--naranja); font-style: normal; }
.term-cuerpo div:last-child::after { content: "▍"; color: var(--lima); margin-left: 4px; animation: cursor 1s steps(1) infinite; }
@keyframes linea { from { opacity: 0; transform: translateX(-6px); } }
@keyframes cursor { 50% { opacity: 0; } }
.capacidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cap, .ind { padding: 30px 28px; border-radius: 24px; background: var(--gris-1); border: 1px solid rgba(255, 255, 255, .06); display: grid; gap: 10px; align-content: start; transition: border-color .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.cap:hover, .ind:hover { border-color: rgba(255, 255, 255, .16); transform: translateY(-3px); }
.cap svg, .ind svg { width: 30px; height: 30px; fill: none; stroke: var(--azul); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cap:nth-child(3n+2) svg, .ind:nth-child(3n+2) svg { stroke: var(--lima); }
.cap:nth-child(3n) svg, .ind:nth-child(3n) svg { stroke: var(--naranja); }
.cap h3, .ind h3 { font-size: 21px; }
.cap p, .ind p { color: var(--mut); font-size: 15.5px; }

/* Portal del cliente */
.portal { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.portal-texto { display: grid; gap: 22px; justify-items: start; }
.tracking { padding: 28px; display: grid; gap: 22px; box-shadow: 0 40px 100px -50px rgba(78, 168, 255, .5); }
.trk-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.trk-cab b { display: block; font-size: 19px; letter-spacing: -.02em; margin-top: 2px; }
.trk-barra { height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.trk-barra span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--degradado); box-shadow: 0 0 18px rgba(78, 168, 255, .6); }
.trk-pasos { list-style: none; margin: 0; padding: 0; display: grid; }
.trk-pasos li { position: relative; padding: 0 0 18px 32px; display: grid; gap: 2px; }
.trk-pasos li::before { content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: var(--gris-1); z-index: 1; }
.trk-pasos li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 18px; bottom: 0; width: 2px; background: rgba(255, 255, 255, .1); }
.trk-pasos li.hecho::before { background: var(--lima); border-color: var(--lima); }
.trk-pasos li.hecho::after { background: var(--lima); opacity: .5; }
.trk-pasos li.actual::before { background: var(--azul); border-color: var(--azul); box-shadow: 0 0 0 5px rgba(78, 168, 255, .2); animation: latir 1.8s infinite; }
.trk-pasos b { font-size: 15.5px; }
.trk-pasos span { color: var(--mut); font-size: 13.5px; }
.trk-pasos li:not(.hecho):not(.actual) b { color: var(--mut); }
.trk-pie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.trk-pie div { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); display: grid; gap: 2px; }
.trk-pie b.ok { color: var(--lima); }

/* Industrias y experiencia */
.industrias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ind:nth-child(4n) svg { stroke: var(--azul); }
.experiencia { margin-top: 70px; text-align: center; display: grid; gap: 22px; }
.experiencia > p { font-size: 15px; }
.marquesina { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marq-pista { display: flex; gap: 60px; width: max-content; animation: desfilar 28s linear infinite; }
.marq-pista span { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -.03em; color: rgba(245, 245, 247, .28); white-space: nowrap; transition: color .3s; }
.marq-pista span:hover { color: #fff; }
@keyframes desfilar { to { transform: translateX(calc(-50% - 30px)); } }

/* Redes y WhatsApp flotante */
.social { color: var(--mut); text-decoration: none; font-size: 15px; padding: 9px 4px; }
.social:hover { color: var(--texto); }
.wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 99px; text-decoration: none; color: #fff; font-size: 14px; font-weight: 600; background: rgba(20, 22, 28, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .8); transition: transform .3s, border-color .3s; }
.wa-flotante:hover { transform: translateY(-2px); border-color: rgba(37, 211, 102, .6); }
.wa-flotante svg { width: 26px; height: 26px; color: #25d366; flex: none; }

@media (max-width: 1000px) {
  .agentes, .portal { grid-template-columns: 1fr; }
  .capacidades, .industrias { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero-logo { width: 96px; height: 96px; margin-bottom: 20px; }
  .hero-logo img { width: 66px; height: 66px; }
  .capacidades, .industrias, .trk-pie { grid-template-columns: 1fr; }
  .term-cuerpo { font-size: 12.5px; min-height: 260px; }
  .tracking { padding: 22px; }
  .wa-flotante span { display: none; }
  .wa-flotante { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .marq-pista { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 14px 30px; }
  .marq-pista span[aria-hidden] { display: none; }
}
.t-auto { background: radial-gradient(500px 260px at 85% 120%, rgba(181, 216, 106, .16), transparent 70%), radial-gradient(400px 240px at 0% 120%, rgba(78, 168, 255, .14), transparent 70%), var(--gris-1); }
.t-auto h3 { font-size: clamp(32px, 3.6vw, 48px); }
.flujo-mini li { font-size: 15px; padding: 12px 18px; }
.orbe-deco { background: radial-gradient(circle at 35% 30%, #e6f2ff, #4ea8ff 30%, #1f5fd6 62%, #0b1d4a 100%); box-shadow: 0 0 70px rgba(78, 168, 255, .5), 0 0 140px rgba(255, 159, 67, .22); }
.pie { padding-bottom: 96px; }

/* =====================  IA, automatización, idiomas y blog  ===================== */
/* Rendimiento: todo lo que se mueve anima solo transform/opacity (lo hace la GPU) y queda en pausa fuera de pantalla. */
.anima:not(.activa) *, .anima:not(.activa)::before, .anima:not(.activa)::after { animation-play-state: paused !important; }

/* Barra: idiomas y progreso */
.menu { gap: 22px; }
.barra-der { display: flex; align-items: center; gap: 10px; }
.progreso { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--degradado); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.idiomas { position: relative; }
.idioma-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: var(--texto); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.idioma-btn:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .09); }
.idioma-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px; border-radius: 16px; background: rgba(22, 24, 30, .92); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9); display: grid; gap: 2px; z-index: 60; animation: menuAbre .18s ease-out; }
.idioma-menu[hidden] { display: none; }
.idioma-menu button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent; color: #d1d1d6; padding: 9px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.idioma-menu button b { font-size: 11px; color: var(--mut); width: 22px; }
.idioma-menu button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.idioma-menu button[aria-checked="true"] { color: #fff; background: rgba(78, 168, 255, .14); }
.idioma-menu button[aria-checked="true"] b { color: var(--azul); }
@keyframes menuAbre { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Héroe: auroras que se desplazan lento detrás de todo */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; border-radius: 50%; filter: blur(70px); opacity: .3; will-change: transform; }
.au1 { background: #1f5fd6; left: -8%; top: 4%; animation: deriva1 18s ease-in-out infinite alternate; }
.au2 { background: #ff9f43; right: -10%; top: 18%; opacity: .16 !important; animation: deriva2 22s ease-in-out infinite alternate; }
.au3 { background: #b5d86a; left: 30%; top: 46%; opacity: .12 !important; animation: deriva3 26s ease-in-out infinite alternate; }
@keyframes deriva1 { to { transform: translate(18vw, 10vh) scale(1.15); } }
@keyframes deriva2 { to { transform: translate(-16vw, 14vh) scale(.9); } }
@keyframes deriva3 { to { transform: translate(-12vw, -18vh) scale(1.2); } }
.chispa-texto { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(78, 168, 255, .3); background: rgba(78, 168, 255, .08); }
.punto-vivo { width: 7px; height: 7px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 10px var(--lima); animation: latir 1.6s infinite; }

/* Cinta de capacidades */
.cinta { overflow: hidden; border-bottom: 1px solid var(--linea); background: #050608; padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cinta-pista { display: flex; gap: 46px; width: max-content; animation: desfilar 40s linear infinite; }
.cinta-pista span { font-size: 15px; font-weight: 600; letter-spacing: .02em; color: rgba(245, 245, 247, .55); white-space: nowrap; display: inline-flex; align-items: center; gap: 46px; }
.cinta-pista span::after { content: "✦"; color: var(--azul); font-size: 12px; }
.cinta-pista span:nth-child(3n+2)::after { color: var(--lima); }
.cinta-pista span:nth-child(3n)::after { color: var(--naranja); }

/* Sección IA: núcleo con órbitas */
.ia-seccion { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 78% 50%, rgba(31, 95, 214, .2), transparent 70%), var(--negro); }
.ia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.ia-texto { display: grid; gap: 24px; }
.pilares { display: grid; gap: 12px; margin-top: 6px; }
.pilar { display: grid; grid-template-columns: 44px 150px 1fr; gap: 6px 14px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--linea); }
.pilar-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--azul); }
.pilar:nth-child(2) .pilar-n { color: var(--lima); } .pilar:nth-child(3) .pilar-n { color: var(--naranja); }
.pilar b { font-size: 22px; letter-spacing: -.02em; }
.pilar > span:last-child { color: var(--mut); font-size: 15.5px; }
.nucleo-ia { position: relative; width: min(520px, 100%); aspect-ratio: 1; margin: 0 auto; }
.orbita { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .08); will-change: transform; }
.o1 { inset: 4%; animation: giro 50s linear infinite; }
.o2 { inset: 22%; border-style: dashed; border-color: rgba(78, 168, 255, .2); animation: giro 36s linear infinite reverse; }
.orbita span { position: absolute; padding: 8px 15px; border-radius: 99px; font-size: 13.5px; font-weight: 600; white-space: nowrap; background: rgba(20, 22, 28, .85); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); animation: contragiro 50s linear infinite; }
.o2 span { animation: contragiroR 36s linear infinite; font-size: 12.5px; color: #c7cbd4; }
.o1 span:nth-child(1) { border-color: rgba(78, 168, 255, .5); } .o1 span:nth-child(2) { border-color: rgba(181, 216, 106, .5); } .o1 span:nth-child(3) { border-color: rgba(255, 159, 67, .5); }
@keyframes giro { to { transform: rotate(360deg); } }
@keyframes contragiro { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes contragiroR { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.corazon { position: absolute; inset: 37%; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 2px; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 60%), #0b0f18; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 60px rgba(78, 168, 255, .45), 0 0 120px rgba(255, 159, 67, .15), inset 0 1px 0 rgba(255, 255, 255, .2); animation: respirar 5s ease-in-out infinite; }
.corazon img { width: 46%; height: auto; }
.corazon b { font-size: 13px; letter-spacing: .3em; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; padding-left: .3em; }
.onda-ia { position: absolute; inset: 37%; border-radius: 50%; border: 1.5px solid rgba(78, 168, 255, .5); animation: expandir 4.5s ease-out infinite; }
.onda-ia.w2 { animation-delay: 1.5s; border-color: rgba(181, 216, 106, .45); }
.onda-ia.w3 { animation-delay: 3s; border-color: rgba(255, 159, 67, .45); }
@keyframes expandir { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

/* Automatización: tubería con pulso y tarjetas antes / con IA */
.tuberia { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 40px; }
.tub-paso { position: relative; z-index: 1; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 0 8px; }
.tub-paso span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px; background: #0b0d12; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 6px var(--gris-0); margin-bottom: 8px; }
.tub-paso:nth-child(1) span { color: var(--azul); } .tub-paso:nth-child(2) span { color: var(--lima); } .tub-paso:nth-child(3) span { color: var(--naranja); } .tub-paso:nth-child(4) span { color: #fff; }
.tub-paso b { font-size: 18px; letter-spacing: -.02em; }
.tub-paso small { color: var(--mut); font-size: 14px; }
.tub-linea { position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tub-linea i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--azul), var(--lima), var(--naranja), transparent); width: 40%; animation: pulso 3.2s cubic-bezier(.6, 0, .4, 1) infinite; will-change: transform; }
@keyframes pulso { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.procesos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.proc { padding: 26px 24px; border-radius: 22px; background: var(--gris-1); border: 1px solid rgba(255, 255, 255, .06); display: grid; gap: 12px; align-content: start; transition: border-color .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.proc:hover { border-color: rgba(78, 168, 255, .35); transform: translateY(-4px); }
.proc h3 { font-size: 19px; }
.proc p { font-size: 14.5px; line-height: 1.45; padding-left: 14px; border-left: 2px solid; }
.proc .antes { color: #8a8a90; border-color: rgba(255, 255, 255, .14); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .25); }
.proc .con-ia { color: #e6e9ef; border-image: linear-gradient(var(--azul), var(--lima)) 1; }
.proc .antes::before { content: "Antes · "; }
.proc .con-ia::before { content: "Con IA · "; font-weight: 700; background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[lang="en"] .proc .antes::before { content: "Before · "; } html[lang="en"] .proc .con-ia::before { content: "With AI · "; }
html[lang="pt"] .proc .antes::before { content: "Antes · "; } html[lang="pt"] .proc .con-ia::before { content: "Com IA · "; }

/* Bloque del blog en la portada */
.blog-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.blog-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.art-tarjeta { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; min-height: 300px; border-radius: 26px; background: var(--gris-1); border: 1px solid rgba(255, 255, 255, .06); color: var(--texto); text-decoration: none; transition: border-color .3s, transform .4s cubic-bezier(.2, .8, .2, 1); }
.art-tarjeta::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--degradado); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.art-tarjeta:hover { border-color: rgba(255, 255, 255, .16); transform: translateY(-4px); }
.art-tarjeta:hover::after { transform: scaleX(1); }
.art-tarjeta h3 { font-size: 23px; line-height: 1.15; letter-spacing: -.025em; }
.art-tarjeta p { color: var(--mut); font-size: 15.5px; }
.art-tarjeta .enlace-flecha { margin-top: auto; font-size: 15px; }
.art-tag { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 99px; background: rgba(78, 168, 255, .12); color: #bfe0ff; }

@media (max-width: 1000px) {
  .ia-grid { grid-template-columns: 1fr; }
  .nucleo-ia { width: min(440px, 100%); }
  .procesos { grid-template-columns: 1fr 1fr; }
  .tuberia { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .tub-linea { display: none; }
  .blog-tarjetas { grid-template-columns: 1fr; }
  .art-tarjeta { min-height: 0; }
}
@media (max-width: 640px) {
  .procesos { grid-template-columns: 1fr; }
  .pilar { grid-template-columns: 34px 1fr; }
  .pilar > span:last-child { grid-column: 2; }
  .orbita span { font-size: 11.5px; padding: 6px 11px; }
  .o2 span { font-size: 10.5px; }
  .idioma-btn { padding: 0 9px; }
  .aurora i { width: 80vw; height: 80vw; }
}
@media (prefers-reduced-motion: reduce) {
  .cinta-pista { width: auto; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
  .cinta-pista span:nth-child(n+9) { display: none; }
  .orbita span { transform: translate(-50%, -50%); }
}

/* ---------- Menú desplegable en móvil (menu-movil.js) ---------- */
.menu-boton { display: none; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-boton span { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: #f5f5f7; transition: transform .25s, opacity .2s; }
.barra.menu-abierto .menu-boton span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.barra.menu-abierto .menu-boton span:nth-child(2) { opacity: 0; }
.barra.menu-abierto .menu-boton span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }
@media (max-width: 1180px) {
  .menu-boton { display: inline-flex; }
  .menu { position: absolute; top: calc(100% + 1px); left: 12px; right: 12px; display: none; flex-direction: column; gap: 2px; padding: 8px; border-radius: 20px; background: rgba(16, 17, 22, .94); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); }
  .barra.menu-abierto .menu { display: flex; animation: menuAbre .2s ease-out; }
  .menu a { font-size: 16px; padding: 12px 14px; border-radius: 12px; color: #f5f5f7; }
  .menu a:hover, .menu a:active { background: rgba(255, 255, 255, .07); }
}

.barra-in { width: min(1180px, 100% - 32px); }
.menu a { white-space: nowrap; }
.menu { gap: 20px; }