:root{
  --bg:#f3f3f1; --bg2:#ffffff; --panel:#ffffff; --line:#deded9; --text:#262625; --muted:#6b6b66;
  --accent:#e8590c; --accent-ink:#ffffff; --warn:#b45309; --bad:#c62828; --ok:#15803d;
  --logo-filter:brightness(0);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px; --gut:16px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--sans);
  background-image:linear-gradient(color-mix(in srgb,var(--line) 50%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 50%,transparent) 1px,transparent 1px);
  background-size:44px 44px;background-position:-1px -1px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% -10%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 60%),linear-gradient(var(--bg) 0,color-mix(in srgb,var(--bg) 86%,transparent) 100%);pointer-events:none;z-index:-1}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2{line-height:1.15;margin:0;letter-spacing:-.02em}
h1{font-size:1.55rem} h2{font-size:1.45rem}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px var(--gut);max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em}
.mark{width:22px;height:22px;border:2px solid var(--accent);border-radius:6px;position:relative}
.mark::after{content:"";position:absolute;inset:5px;background:var(--accent);border-radius:2px}
.brand-name{font-weight:800;letter-spacing:.14em;font-size:15px}
.brand-logo{height:34px;width:auto;display:block;filter:var(--logo-filter)}
.powered{font:11px var(--mono);color:var(--muted);opacity:.7;text-align:center}
.block .lead{margin:6px 0 18px;color:var(--muted)}

main{max-width:1080px;margin:0 auto;padding:0 var(--gut) 40px;display:grid;gap:28px}
.eyebrow{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.lead{color:var(--muted);margin:10px 0 18px;max-width:52ch}

.hero{display:grid;gap:20px;padding-top:8px}
.card{position:relative;background:var(--panel);box-shadow:0 6px 24px rgba(38,38,37,.07);border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:16px;overflow:hidden}
.card::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:50%}
.card::after{content:"";position:absolute;right:-20px;top:-20px;width:100px;height:100px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:50%}
.avatar{width:72px;height:72px;border-radius:18px;background:var(--bg2);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);display:grid;place-items:center;font:700 26px var(--mono);color:var(--accent);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.role{color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.qr{margin:0;display:flex;align-items:center;gap:12px}
.qr img{background:#fff;padding:6px;border-radius:10px}
.qr figcaption{font:12px var(--mono);color:var(--muted)}
.pitch{align-self:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 15px var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;border-style:dashed}
.btn:disabled{opacity:.6;cursor:wait}

.chat{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px;display:grid;gap:12px;scroll-margin-top:12px}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pill{font:11px var(--mono);padding:4px 9px;border-radius:999px;border:1px solid var(--warn);color:var(--warn)}
.log{display:grid;gap:14px;max-height:min(58vh,520px);min-height:0;overflow-y:auto;padding:4px 2px;scroll-behavior:smooth}
.msg{display:grid;gap:4px;max-width:70ch;animation:in .18s ease-out}
.msg .who{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.msg .body{white-space:pre-wrap;overflow-wrap:anywhere;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg2)}
.msg.user .body{background:color-mix(in srgb,var(--accent) 12%,var(--bg2));border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.msg.user{justify-self:end}
.msg.user .who{text-align:right}
.msg.bot .who{color:var(--accent)}
.src{font:11px var(--mono);color:var(--muted)}
.src b{color:var(--accent);font-weight:600}
.msg.sys .body{border-style:dashed;color:var(--muted);font-size:14px}
.typing .body{display:flex;gap:5px;align-items:center;min-height:42px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:b 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:8px 12px;font:13px var(--sans);cursor:pointer;min-height:36px}
.chip:hover{color:var(--text);border-color:var(--accent)}
.composer{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
textarea,input{width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:16px var(--sans);resize:none}
textarea:focus,input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.fine{font-size:12px;color:var(--muted)}

.block{display:grid;gap:12px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.svc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:6px}
.svc h3{margin:0;font-size:1rem}
.svc p{color:var(--muted);font-size:14px}
.ia .svc{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel))}
.form form{display:grid;gap:12px;max-width:560px}
.field{display:grid;gap:6px}
.field label{font-size:14px;color:var(--muted)}
.opt{opacity:.7}
.trap{position:absolute;left:-9999px}
.status{min-height:1.4em;font-size:14px}
.status.ok{color:var(--ok)}.status.err{color:var(--bad)}
.foot{max-width:1080px;margin:0 auto;padding:0 var(--gut) 32px;color:var(--muted);font:12px var(--mono)}

@media (min-width:860px){
  :root{--gut:28px}
  h1{font-size:1.9rem}
  .hero{grid-template-columns:minmax(320px,420px) 1fr;gap:36px;align-items:stretch}
  .pitch h2{font-size:2.5rem}
  .chat{padding:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* ---------- secciones de información de la empresa ---------- */
.brand-name{font-weight:800;letter-spacing:.14em;font-size:15px}
.brand-logo{height:40px}
.why{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.why .svc h3{display:flex;gap:8px;align-items:baseline}
.tag{margin-left:8px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:2px 7px;white-space:nowrap}
.about p{color:var(--muted);max-width:70ch}
.clients{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.clients li{border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--text);background:var(--panel);font-size:14px}
.contact-list{display:grid;gap:10px;list-style:none;margin:0;padding:0}
.contact-list a{color:var(--text)}
.contact-list span{color:var(--muted);font-size:13px;display:block}

/* ---------- diseño claro corporativo ---------- */
.tagpill{font:600 11px var(--sans);color:var(--muted);border:1px solid var(--line);padding:5px 10px;border-radius:999px;background:var(--panel)}
.pitch h2{font-size:2.05rem;line-height:1.08;font-weight:800}
.pitch h2 em{font-style:normal;color:var(--accent)}
.btn.primary:hover{filter:brightness(.94)}
.vf{position:relative;aspect-ratio:1999/989;border-radius:18px;overflow:hidden;border:1px solid var(--line);margin-top:22px;background:var(--panel)}
.vf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vf .c{position:absolute;width:18px;height:18px;border:2px solid var(--accent)}
.vf .tl{top:10px;left:10px;border-right:0;border-bottom:0}.vf .tr{top:10px;right:10px;border-left:0;border-bottom:0}
.vf .bl{bottom:10px;left:10px;border-right:0;border-top:0}.vf .br{bottom:10px;right:10px;border-left:0;border-top:0}
.vf .rec{position:absolute;top:12px;left:36px;font:700 10px var(--mono);display:flex;gap:6px;align-items:center;color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px}
.vf .rec i{width:8px;height:8px;border-radius:50%;background:#ef4444;display:block;animation:rec 1.6s steps(2,start) infinite}
.vf .ill{position:absolute;right:36px;bottom:12px;font:10px var(--mono);color:#fff;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:6px}
.vf .det{position:absolute;border:2px solid var(--accent);border-radius:4px;opacity:0;animation:det-in .5s ease-out forwards,det-glow 3s ease-in-out 2.4s infinite}
.vf .det small{position:absolute;top:-17px;left:-2px;background:var(--accent);color:var(--accent-ink);font:700 9px var(--mono);padding:2px 5px;border-radius:3px;white-space:nowrap}
.svc{position:relative}
.svc .ico{width:28px;height:28px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:4px}
.ia .svc{background:color-mix(in srgb,var(--accent) 4%,var(--panel));border:2px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.block h2{font-size:1.5rem}
.foot{text-align:center}
@media (min-width:860px){.pitch h2{font-size:2.9rem}}
.vf .d1{left:16.5%;top:24.5%;width:4.8%;height:17%;animation-delay:.5s,2.4s}
.vf .d2{left:34.4%;top:34%;width:25.8%;height:32%;animation-delay:1.1s,2.4s}
.vf .d3{left:82%;top:21%;width:14%;height:36%;animation-delay:1.7s,2.4s}
@keyframes det-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes det-glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 10px 1px color-mix(in srgb,var(--accent) 55%,transparent)}}
@keyframes rec{to{opacity:.25}}
@media (prefers-reduced-motion:reduce){.vf .det{opacity:1!important}}

/* ---------- chat: tamaños ajustados para celular ---------- */
.chat{padding:14px;gap:10px}
.chat h2{font-size:1.2rem}
.msg .body{font-size:15px;line-height:1.45;padding:9px 13px}
.composer textarea{min-height:56px;line-height:1.4;padding:14px}
.composer .btn{min-height:56px}
.chip{font-size:13px;padding:7px 12px;min-height:34px}
@media (min-width:860px){.chat{padding:22px}}

/* monitor de 4 cámaras (hero opcional: brand.hero = "wall") */
.wallvp{margin:22px 0 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.wallvp .vp-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line);font:500 10px var(--mono);color:var(--muted);letter-spacing:.06em}
.wallvp .vp-bar b{color:var(--accent);font-weight:500}
.wallvp .vp-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff5c5c;margin-right:6px;animation:wblink 1.4s steps(2) infinite}
.wallvp .wall{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.wallvp .cam{position:relative;overflow:hidden;aspect-ratio:16/10;background:#04090c}
.wallvp .cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.06) brightness(.93);animation:wzoom 14s ease-in-out infinite alternate}
.wallvp .cam::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5)),repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
.wallvp .cam .scan{position:absolute;left:0;right:0;top:0;height:34%;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--accent) 22%,transparent));border-bottom:1px solid color-mix(in srgb,var(--accent) 65%,transparent);animation:wscan 4.5s linear infinite}
.wallvp .det{position:absolute;z-index:3;border:1.5px solid var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.4);opacity:0;animation:wpop .4s ease-out forwards,wtrack 3s ease-in-out infinite alternate,wglow 2s ease-in-out infinite}
.wallvp .det.warn{border-color:#ffb454}
.wallvp .det b{position:absolute;left:-1.5px;bottom:100%;background:var(--accent);color:var(--accent-ink);font:500 9px/1 var(--mono);padding:3px 5px;white-space:nowrap}
.wallvp .det.warn b{background:#ffb454;color:#2a1a00}
.wallvp .hud{position:absolute;z-index:4;font:500 9px/1 var(--mono);color:#e8f5f7;text-shadow:0 1px 2px #000;letter-spacing:.04em}
.wallvp .hud.tl{top:7px;left:8px}.wallvp .hud.tr{top:7px;right:8px}.wallvp .hud.bl{bottom:7px;left:8px}
.wallvp .hud.tr::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff5c5c;margin-right:5px;animation:wblink 1.4s steps(2) infinite}
.wallvp .chip{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line);font:500 10px var(--mono);color:var(--text);min-height:34px}
.wallvp .chip i{width:7px;height:7px;border-radius:50%;background:#ffb454;flex:none;animation:wblink 1s steps(2) infinite}
.wallvp .chip span{transition:opacity .35s}
.wallvp .ill{padding:0 12px 8px;font:10px var(--mono);color:var(--muted)}
@keyframes wblink{50%{opacity:.2}}
@keyframes wscan{from{transform:translateY(-100%)}to{transform:translateY(300%)}}
@keyframes wzoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes wpop{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}
@keyframes wtrack{from{translate:0 0}to{translate:3px -2px}}
@keyframes wglow{50%{box-shadow:0 0 10px 1px color-mix(in srgb,var(--accent) 60%,transparent)}}
@media(max-width:520px){.wallvp .det b{font-size:7.5px;padding:2px 3px}.wallvp .hud{font-size:7.5px}}
@media (prefers-reduced-motion:reduce){.wallvp .cam img,.wallvp .scan,.wallvp .det,.wallvp .vp-dot,.wallvp .hud.tr::before,.wallvp .chip i{animation:none}.wallvp .det{opacity:1}}

.wallvp video{display:block;width:100%;height:auto;background:#04090c}