: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;}
.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;}
}