/* EasyBiz · formulario de reserva (22-10-2026). Una pregunta por pantalla. Marca en ~/CORE/easybiz/web/MARCA.md. */
:root{
  --bg:#050608;--s1:#0C0E12;--s2:#111419;--s3:#171A21;
  --ink:#F2F4F8;--ink-2:#A9B0BE;--ink-3:#6B7383;
  --l1:rgba(255,255,255,.075);--l2:rgba(255,255,255,.13);--l3:rgba(255,255,255,.22);
  --o1:#FFE47A;--o2:#FFD84D;--o4:#F5C518;--o6:#E0A800;
  --wash:rgba(var(--acc-rgb),.10);--sobre-oro:#050608;--corte:#E5677A;
  --acc-rgb:245,197,24;--acc-text:#F5C518;--shadow:0 18px 40px rgba(0,0,0,var(--shadow-a,.45));--thumb-fade:rgba(5,6,8,.85);--top-bg:rgba(5,6,8,.85);--btn-hi:rgba(255,255,255,.35);
  --font:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;--font-head:var(--font);
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
em,i{font-style:normal}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* cabecera */
.app-top{position:sticky;top:0;z-index:10;background:var(--top-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--l1)}
.app-top .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo img{height:26px;width:auto}
.back{font-size:14px;font-weight:500;color:var(--ink-2)}
.back:hover{color:var(--acc-text)}

/* titular */
.app-head{padding:56px 0 6px;text-align:center;background:radial-gradient(800px 340px at 50% -30%,rgba(var(--acc-rgb),.12),transparent 70%)}
.app-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc-text);margin-bottom:16px}
.app-title{font-family:var(--font-head);font-size:clamp(30px,4.4vw,48px);line-height:1.05;font-weight:800;letter-spacing:-.025em;max-width:760px;margin:0 auto 14px}
.hl{color:var(--acc-text);background:linear-gradient(transparent 62%,rgba(var(--acc-rgb),.18) 62%)}
.app-sub{font-size:16px;color:var(--ink-2)}

.app-main{flex:1;padding-bottom:60px}

/* progreso */
.prog-wrap{max-width:480px;padding:28px 20px 4px}
.prog{height:6px;border-radius:99px;background:var(--s3);overflow:hidden}
.prog-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--o6),var(--o2));transition:width .4s cubic-bezier(.4,0,.2,1)}
.prog-count{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--ink-3);margin-top:10px}

/* pasos */
.wizard{max-width:480px;margin:0 auto;padding-top:8px}
.step{animation:entra .35s ease both}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.q{font-family:var(--font-head);font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:24px 0 6px}
.req{color:var(--acc-text);margin-left:2px}
.q-sub{color:var(--ink-2);font-size:15px;margin-bottom:18px}

.field{margin-bottom:16px}
.lbl{display:block;font-size:14px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
input[type=text],input[type=email],input[type=tel],textarea{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--bg);border:1px solid var(--l3);border-radius:10px;padding:14px 16px;outline:none;transition:border-color .15s,box-shadow .15s;appearance:none}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,textarea:focus{border-color:var(--o4);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.22)}
textarea{resize:vertical;min-height:120px;line-height:1.5}
.fields.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fields.two .field{margin-bottom:0}

.ferr{color:var(--corte);font-size:14px;font-weight:500;margin-top:12px}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink-2);margin:16px 0 4px;cursor:pointer}
.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--o4)}
.consent a{color:var(--acc-text);text-decoration:underline;text-underline-offset:2px}

.opts{display:flex;flex-direction:column;gap:12px;margin:4px 0}
.opt{position:relative;display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid var(--l2);border-radius:12px;background:var(--s1);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--l3)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .box{width:22px;height:22px;flex:0 0 auto;border:2px solid var(--l3);border-radius:50%;display:grid;place-items:center}
.opt .box::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--o4);transform:scale(0);transition:transform .15s}
.opt span{font-size:16.5px;font-weight:500}
.opt:has(input:checked){border-color:rgba(var(--acc-rgb),.55);background:var(--wash)}
.opt:has(input:checked) .box{border-color:var(--o4)}
.opt:has(input:checked) .box::after{transform:scale(1)}
.opt:has(input:focus-visible){outline:2px solid var(--o2);outline-offset:2px}

/* botones */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:14px;padding:0 24px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:16px;font-weight:700;color:var(--sobre-oro);background:linear-gradient(180deg,var(--o2),var(--o4) 55%,var(--o6));box-shadow:inset 0 1px 0 var(--btn-hi);
  transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px);background:linear-gradient(180deg,var(--o1),var(--o2) 55%,var(--o4));box-shadow:0 0 0 1px rgba(var(--acc-rgb),.4),0 10px 30px rgba(var(--acc-rgb),.4)}
.btn:focus-visible{outline:2px solid var(--o2);outline-offset:3px}
.btn-line{background:var(--s1);color:var(--ink);border:1px solid var(--l2);box-shadow:none}
.btn-line:hover{background:var(--s2);border-color:var(--o4);box-shadow:none}

/* agenda */
.sched{border:1px solid var(--l2);border-radius:12px;overflow:hidden;background:var(--s1)}
.sched-days{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--l1);border-bottom:1px solid var(--l1)}
.day{appearance:none;border:0;background:var(--s1);color:var(--ink);cursor:pointer;padding:12px 4px;text-align:center;font:inherit;transition:background .12s}
.day:hover{background:var(--s3)}
.day .dow{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.day .num{display:block;font-size:22px;font-weight:700;margin-top:2px}
.day.sel{background:var(--o4);color:var(--sobre-oro)}
.day.sel .dow{color:var(--sobre-oro)}
.sched-times{padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px;min-height:90px}
.sched-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:15px}
.time{appearance:none;font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--bg);border:1px solid var(--l2);border-radius:10px;padding:10px 6px;cursor:pointer;transition:border-color .12s,background .12s}
.time:hover{border-color:var(--o4)}
.time.sel{background:var(--o4);border-color:var(--o4);color:var(--sobre-oro)}

/* confirmación */
.done{text-align:center}
.done-badge{width:72px;height:72px;margin:34px auto 6px;color:var(--acc-text)}
.done-badge svg{width:100%;height:100%}
.done-t{font-size:30px;margin:10px 0 10px}
.done-msg{color:var(--ink-2);font-size:16px;margin:0 auto 22px;max-width:44ch}
.done-summary{list-style:none;margin:0 auto 18px;padding:18px 20px;text-align:left;background:var(--s1);border:1px solid var(--l2);border-radius:20px;display:grid;gap:10px}
.done-summary li{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.done-summary .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.done-summary .v{font-weight:600;text-align:right;word-break:break-word}

/* pie */
.app-foot{border-top:1px solid var(--l1);background:var(--s1);padding:28px 0 32px;text-align:center}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;font-size:14px}
.foot-links a{color:var(--ink-2)}
.foot-links a:hover{color:var(--acc-text)}
.copy{margin-top:10px;font-size:13px;color:var(--ink-3)}

@media (max-width:560px){
  .app-head{padding:38px 0 4px}
  .fields.two{grid-template-columns:1fr}
  .q{font-size:24px}
  .day .num{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}