:root{
  --bg:#0D1526; --bg2:#111E33; --card:#16233D; --border:#2A3A55;
  --blue:#2E7CF6; --blue2:#1B5FD9; --text:#F2F6FF; --muted:#9FB2D1;
  --green:#25D366; --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; color-scheme:dark;}
body{background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5; -webkit-text-size-adjust:100%;}
.wrap{max-width:640px; margin:0 auto; padding:0 16px 80px;}
header.top{position:sticky; top:0; z-index:10; background:rgba(13,21,38,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--border);}
.top-inner{max-width:640px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px;}
.top-inner img{width:44px; height:44px; border-radius:12px; object-fit:contain; background:#fff;}
.top-inner .t{font-weight:800; font-size:1.15rem;}
.top-inner .h{font-size:.75rem; color:var(--muted);}
.hero{padding:28px 0 8px; text-align:center;}
.hero img.logo{width:120px; height:120px; border-radius:28px; object-fit:contain; background:#fff; margin-bottom:14px;}
.hero h1{font-size:1.7rem; line-height:1.25; margin-bottom:8px;}
.hero .sub{font-size:1.1rem; color:var(--blue); font-weight:700; margin-bottom:8px;}
.hero p.desc{color:var(--muted); margin-bottom:6px;}
.hero .meta{color:var(--muted); font-size:.9rem; margin-bottom:6px;}
.btn{display:block; width:100%; min-height:46px; padding:12px 16px; margin:10px 0; border:none; border-radius:var(--radius); font-size:1rem; font-weight:800; cursor:pointer; text-align:center; text-decoration:none; color:#fff; line-height:1.35;}
.btn .ic{width:20px; height:20px; vertical-align:-4px; margin-right:8px;}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));}
.btn-wa{background:var(--green); color:#062b16;}
.btn-ghost{background:transparent; border:2px solid var(--border); color:var(--text);}
.btn:active{transform:scale(.98);}
button.btn{font-family:inherit;}
.btn:disabled,.btn.is-busy{opacity:.65; cursor:wait;}
section{margin-top:28px; scroll-margin-top:76px;}
section h2{font-size:1.3rem; margin-bottom:4px; display:flex; align-items:center; gap:8px;}
section h2::before{content:""; width:5px; height:1.3em; border-radius:3px; background:linear-gradient(180deg,var(--blue),var(--blue2)); flex-shrink:0;}
section .hint{color:var(--muted); font-size:.92rem; margin-bottom:14px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:12px;}
.svc{border-left:6px solid var(--blue); transition:border-color .2s; position:relative;}
.svc.sel{outline:2px solid var(--blue);}
.svc h3{font-size:1.15rem; margin-bottom:2px;}
.svc .d{color:var(--muted); font-size:.92rem; margin-bottom:8px;}
.tarifa-cap{font-size:.75rem; color:var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin:10px 0 6px;}
.tarifa-opciones{display:grid; gap:7px;}
.svc .tarifa-opcion{display:flex; align-items:center; gap:8px; margin:0; padding:8px 10px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; font-size:.9rem; line-height:1.3;}
.svc .tarifa-opcion.elegida{border-color:var(--blue); background:#14294a;}
.svc-head{display:flex; align-items:center; gap:10px; cursor:pointer; -webkit-tap-highlight-color:transparent;}
.svc-head-txt{flex:1 1 auto; min-width:0;}
.svc-head .d{margin-bottom:0;}
.svc-head:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:8px;}
.svc-badge{background:var(--blue); color:#fff; border-radius:999px; padding:2px 10px; font-size:.8rem; font-weight:800; white-space:nowrap; flex:0 0 auto;}
.svc-flecha{color:var(--muted); font-size:1.05rem; line-height:1; flex:0 0 auto;}
.svc.abierta{border-color:var(--blue);}
.svc.abierta .svc-flecha{color:var(--blue);}
.svc-elige{color:var(--muted); font-size:.85rem; font-weight:700; white-space:nowrap; flex:0 0 auto;}
.svc .tarifa-opciones{margin-left:8px;}
.tarifa-eleccion{display:flex; align-items:center; gap:9px; flex:1 1 auto; min-width:0; margin:0; padding:2px 0; cursor:pointer;}
.tarifa-opcion input{width:20px; height:20px; padding:0; margin:0; flex:0 0 20px; accent-color:var(--blue);}
label{display:block; font-weight:700; margin:14px 0 6px; font-size:.95rem;}
.service-selected{margin:0 0 4px;}
input,textarea,select{width:100%; background:#0A1322; border:2px solid var(--border); border-radius:12px; color:var(--text); padding:14px; font-size:1rem;}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--blue);}
textarea{min-height:110px; resize:vertical;}
.steps{display:grid; gap:12px; margin-top:12px;}
.step{display:flex; gap:12px; align-items:flex-start;}
.step .n{background:var(--blue); color:#fff; font-weight:800; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.estado{font-weight:800; text-transform:capitalize;}
.pill{display:inline-block; padding:4px 12px; border-radius:999px; font-size:.85rem; font-weight:800; background:#1d3a24; color:#7be495; border:1px solid #2c5c38;}
.folio{font-family:ui-monospace,monospace; background:var(--bg2); padding:6px 10px; border-radius:8px; border:1px solid var(--border);}
.pedido-head{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.pedido-servicio{margin-top:14px; font-size:1rem;}
.pedido-fecha{margin-top:4px; color:var(--muted); font-size:.9rem;}
.pedido-descripcion{margin-top:10px;}
.pedido-visita{margin-top:8px;}
.pedido-card .pedido-visita.hint{margin-bottom:0;}
.msg{padding:14px; border-radius:12px; margin:12px 0; font-size:.95rem;}
.msg.ok{background:#12351f; border:1px solid #2c5c38;}
.msg.err{background:#3a1620; border:1px solid #6b2436;}
.msg.info{background:#14294a; border:1px solid #2A3A55;}
.toast{position:fixed; left:50%; bottom:max(22px, env(safe-area-inset-bottom)); z-index:30; transform:translateX(-50%); width:min(calc(100% - 32px), 440px); padding:12px 16px; border-radius:12px; background:#12351f; border:1px solid #3b7a4c; color:#f3fff6; box-shadow:0 12px 30px rgba(0,0,0,.34); font-weight:750; text-align:center;}
footer{margin-top:36px; text-align:center; color:var(--muted); font-size:.85rem;}
footer a{color:var(--blue);}
.hidden{display:none !important;}
.apkbox{text-align:center;}
.apkbox .ver{color:var(--muted); font-size:.9rem; margin:6px 0 12px;}
@media(min-width:700px){
  .top-inner{max-width:none; margin:0; justify-content:flex-start;}
  .hero h1{font-size:2.1rem;}
  .steps{grid-template-columns:1fr 1fr 1fr;}
}
/* Hero: en PC ubicación y horario en una línea; en celular apilados */
@media(max-width:480px){
  .hero .meta .loc{display:block;}
  .hero .meta .sep{display:none;}
  .hero .meta .sched{display:block; margin-top:2px;}
}

/* ===== Asistente virtual: widget de chat público en la portada =====
   Botón flotante con el avatar + pastilla «Asistente», burbuja-teaser de
   saludo (simulada, sin servidor) y panel de chat. Todo con prefijo sj-
   para no tocar los estilos existentes. */
.sj-chat-btn{
  position:fixed; right:16px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:50;
  display:flex; align-items:center; gap:9px; padding:6px 16px 6px 6px;
  background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff;
  border:none; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:.98rem; font-weight:800; box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.sj-chat-btn img{width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top; border:2px solid rgba(255,255,255,.85); background:#0a101e;}
.sj-chat-btn:active{transform:scale(.97);}
.sj-teaser{
  position:fixed; right:16px; bottom:calc(max(16px, env(safe-area-inset-bottom)) + 70px); z-index:50;
  max-width:min(78vw, 300px); background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:16px; border-bottom-right-radius:4px;
  padding:11px 14px; font-size:.93rem; line-height:1.4; cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.sj-teaser::after{
  content:""; position:absolute; right:26px; bottom:-7px; width:14px; height:14px;
  background:var(--card); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transform:rotate(45deg);
}
.sj-chat-panel{
  position:fixed; z-index:60; display:flex; flex-direction:column;
  right:12px; left:12px; bottom:max(12px, env(safe-area-inset-bottom));
  height:min(72dvh, 620px); max-height:calc(100dvh - 24px);
  background:#0a101e; border:1px solid var(--border); border-radius:18px;
  overflow:hidden; box-shadow:0 22px 60px rgba(0,0,0,.6);
}
@media(min-width:700px){
  .sj-chat-panel{left:auto; width:392px; bottom:24px; right:24px; height:min(640px, calc(100dvh - 48px));}
  .sj-chat-btn{right:24px; bottom:24px;}
  .sj-teaser{right:24px; bottom:94px;}
}
.sj-chat-head{
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  background:var(--card); border-bottom:1px solid var(--border); flex:0 0 auto;
}
.sj-chat-head img{width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:top; border:2px solid var(--blue);}
.sj-chat-head-txt{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.25;}
.sj-chat-head-txt b{font-size:1rem;}
.sj-enlinea{color:var(--muted); font-size:.8rem; display:flex; align-items:center; gap:6px;}
.sj-enlinea i{width:8px; height:8px; border-radius:50%; background:#2ee06f; display:inline-block;}
.sj-chat-close{
  background:transparent; border:none; color:var(--muted); font-size:1.15rem;
  width:38px; height:38px; border-radius:10px; cursor:pointer; flex:0 0 auto;
}
.sj-chat-close:active{background:var(--bg2);}
.sj-chat-msgs{
  flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:9px;
}
.sj-msg{
  max-width:86%; padding:10px 13px; border-radius:14px; font-size:.95rem;
  line-height:1.45; white-space:pre-wrap; word-wrap:break-word;
}
.sj-msg.agente{background:#182747; border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px;}
.sj-msg.yo{background:var(--blue2); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;}
.sj-msg a{color:#7ec3ff;}
.sj-msg.yo a{color:#fff; text-decoration:underline;}
.sj-escribiendo{color:var(--muted); font-size:.83rem; font-style:italic; padding:0 4px;}
/* Plequitas dentro del widget: mismas clases que la página de prueba */
.sj-plequitas{align-self:flex-start; max-width:92%; display:flex; flex-direction:column; gap:9px;}
.sj-plequitas .guia{color:var(--muted); font-size:.8rem;}
.sj-plequitas .chips{display:flex; flex-wrap:wrap; gap:8px;}
.sj-plequitas .chip{
  background:#182747; color:var(--text); border:1px solid var(--border);
  border-radius:999px; padding:9px 14px; font-size:.9rem; font-weight:500; font-family:inherit;
  display:inline-flex; align-items:baseline; gap:7px; text-align:left; cursor:pointer;
}
.sj-plequitas .chip .precio{color:var(--muted); font-size:.83rem; font-weight:700;}
.sj-plequitas .chip.sel{background:#1d4ed8; border-color:#3b82f6; color:#fff;}
.sj-plequitas .chip.sel .precio{color:#dbeafe;}
.sj-plequitas .chip.sel::before{content:'✓'; font-weight:700;}
.sj-plequitas .chip:disabled{cursor:default;}
.sj-plequitas .btn-continuar{
  align-self:flex-start; background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff;
  border:0; border-radius:10px; padding:11px 18px; font-size:.93rem; font-weight:700; font-family:inherit; cursor:pointer;
}
.sj-plequitas .btn-continuar:disabled{opacity:.45;}
.sj-plequitas .enviada{color:var(--muted); font-size:.8rem; font-style:italic;}
.sj-chat-form{
  display:flex; gap:8px; padding:10px; border-top:1px solid var(--border);
  background:var(--card); flex:0 0 auto;
}
.sj-chat-form input{
  flex:1 1 auto; min-width:0; width:auto; background:#0d1526; border:1px solid var(--border);
  border-radius:10px; padding:12px; font-size:1rem; color:var(--text);
}
.sj-chat-form input:focus{border-color:var(--blue); outline:none;}
.sj-chat-form button{
  background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; border:0;
  border-radius:10px; padding:12px 18px; font-size:.95rem; font-weight:700; font-family:inherit; cursor:pointer;
}
.sj-chat-form button:disabled{opacity:.55; cursor:default;}
.sj-chat-gps{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap; padding:8px 12px;
  background:var(--card); border-top:1px solid var(--border); flex:0 0 auto;
}
.sj-chat-gps button{
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:8px 12px; font-size:.85rem; font-weight:600; font-family:inherit; cursor:pointer;
}
.sj-chat-gps span{color:var(--muted); font-size:.78rem;}
