/* ══════════════════════════════════════════════════════════════════════════
   Profile Reserve 360 · SISTEMA DE DISEÑO PÚBLICO (27-sep, rediseño «toda la web»)

   Lo comparten TODAS las páginas de cara al cliente final (portada y marketing,
   alta y entrar, pagos, regalo, presupuesto, cita previa, kiosco, turnos, bajas,
   espera, legales, desarrolladores, errores). El panel del negocio y el superadmin
   NO lo cargan: siguen con r360.css.

   Por qué un fichero aparte y con prefijo `pb-`: varias páginas públicas cargan
   también r360.css (tokens del panel) y no queremos que una clase `.btn` de aquí
   pise la del panel ni al revés. Todo lo de aquí empieza por `pb-` o vive en
   variables `--pb-*`, y la base va dentro de :where(.pb) (especificidad 0) para que
   cualquier clase de una página la pise sin tener que prefijarla.

   Familia visual = Profile Manager 360: lienzo lavanda muy claro, blanco para las
   tarjetas, índigo #6564f4 para marca y acción, violeta→azul SÓLO como acento
   (una palabra del titular, un halo), el avatar de la casa como guía. Los datos
   van en verde/ámbar/rojo. Instrument Sans + IBM Plex Mono para cifras.

   Contraste medido (WCAG AA):
     --pb-acc  #5849e8 sobre #fff 5,9:1 · sobre --pb-bg 5,5:1
     --pb-md   #474e63 sobre #fff 8,3:1
     --pb-dm   #626879 sobre #fff 5,6:1 · sobre --pb-bg 5,2:1
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --pb-tx:#0f1222; --pb-md:#474e63; --pb-dm:#626879;
  --pb-bg:#f6f5fd; --pb-bg2:#efedfb; --pb-s1:#fff; --pb-s2:#f9f9fd; --pb-s3:#f0f0f8;
  --pb-ln:#e6e5f2; --pb-ln2:#efeef7;
  --pb-pr:#6564f4; --pb-acc:#5849e8; --pb-acc-h:#4a3cd6; --pb-pr-s:#efeefe; --pb-pr-b:#dcdbfd;
  --pb-vi:#9148fb; --pb-az:#2842e9;
  --pb-ok:#0f9d63; --pb-ok-s:#e4f7ef; --pb-ok-t:#06673f;
  --pb-am:#dc8407; --pb-am-s:#fdf3e3; --pb-am-t:#8a4f08;
  --pb-ko:#e0453b; --pb-ko-s:#fdecea; --pb-ko-t:#a3231b;
  --pb-grad:linear-gradient(95deg,#9148fb 0%,#6564f4 50%,#2842e9 100%);
  --pb-aurora:radial-gradient(60% 70% at 12% 0%,rgba(145,72,251,.16),transparent 70%),
              radial-gradient(55% 60% at 92% 8%,rgba(40,66,233,.13),transparent 70%),
              radial-gradient(40% 50% at 55% 100%,rgba(101,100,244,.10),transparent 70%);
  --pb-sh1:0 1px 2px rgba(16,19,34,.05),0 4px 14px -4px rgba(40,32,120,.08);
  --pb-sh2:0 1px 2px rgba(16,19,34,.05),0 18px 44px -14px rgba(50,40,150,.22);
  --pb-sh3:0 2px 4px rgba(16,19,34,.05),0 40px 80px -24px rgba(50,40,150,.34);
  --pb-r1:12px; --pb-r2:18px; --pb-r3:26px; --pb-r4:34px;
  --pb-env:1200px; --pb-gut:24px;
  --pb-f:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pb-mono:'IBM Plex Mono',ui-monospace,monospace;
  --pb-ease:cubic-bezier(.2,.8,.2,1);
}
@media (max-width:560px){:root{--pb-gut:16px}}

/* ── Base (sólo dentro de body.pb, para no tocar pantallas que no lo pidan) ── */
body.pb{margin:0;background:var(--pb-bg);color:var(--pb-tx);font:400 16.5px/1.55 var(--pb-f);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-synthesis:none}
:where(.pb) *,:where(.pb) *::before,:where(.pb) *::after{box-sizing:border-box}
:where(.pb) img{max-width:100%;height:auto}
:where(.pb) :where(h1,h2,h3){margin:0;letter-spacing:-.035em;line-height:1.06;text-wrap:balance;font-weight:600}
:where(.pb) p{margin:0}
:where(.pb) a{color:var(--pb-acc)}
/* los botones que son enlaces: su color manda sobre el de los enlaces */
a.pb-btn-p,a.pb-btn-p:hover{color:#fff}
a.pb-btn-b,a.pb-btn-b:hover{color:var(--pb-tx)}
:where(.pb) :focus-visible{outline:3px solid var(--pb-acc);outline-offset:2px;border-radius:8px}
.pb-env{max-width:var(--pb-env);margin:0 auto;padding:0 var(--pb-gut)}
.pb-grad{background:var(--pb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pb-saltar{position:absolute;left:12px;top:-60px;z-index:200;background:var(--pb-tx);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.pb-saltar:focus{top:12px}

/* ── Rótulo sobre el título (la «píldora» de PM360) ── */
.pb-ceja{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 var(--pb-f);letter-spacing:.12em;text-transform:uppercase;color:var(--pb-acc);background:rgba(255,255,255,.75);border:1px solid var(--pb-pr-b);border-radius:99px;padding:8px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pb-ceja i{width:7px;height:7px;border-radius:50%;background:var(--pb-pr);box-shadow:0 0 0 4px rgba(101,100,244,.18)}

/* ── Botones ── */
.pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:600 15.5px/1 var(--pb-f);padding:0 22px;min-height:48px;border-radius:14px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .18s var(--pb-ease),box-shadow .18s,background .18s,border-color .18s;-webkit-tap-highlight-color:transparent}
.pb-btn:active{transform:translateY(1px) scale(.99)}
.pb-btn:disabled,.pb-btn[aria-disabled=true]{opacity:.55;cursor:default}
.pb-btn-p{background:var(--pb-acc);color:#fff;box-shadow:0 10px 24px -10px rgba(88,73,232,.75),inset 0 1px 0 rgba(255,255,255,.18)}
.pb-btn-p:hover{background:var(--pb-acc-h);color:#fff;box-shadow:0 14px 30px -10px rgba(88,73,232,.8)}
.pb-btn-b{background:#fff;color:var(--pb-tx);border-color:var(--pb-ln);box-shadow:0 1px 2px rgba(16,19,34,.05)}
.pb-btn-b:hover{border-color:#cfcde6;color:var(--pb-tx)}
.pb-btn-f{background:none;color:var(--pb-acc);padding:0 6px;min-height:44px}
.pb-btn-f:hover{color:var(--pb-acc-h)}
.pb-btn-l{min-height:56px;padding:0 28px;font-size:17px;border-radius:16px}
.pb-btn-s{min-height:40px;padding:0 15px;font-size:14.5px;border-radius:11px}
.pb-btn-ancho{width:100%}
.pb-btn svg{flex-shrink:0}

/* ── Tarjetas ── */
.pb-tarjeta{background:var(--pb-s1);border:1px solid var(--pb-ln);border-radius:var(--pb-r3);box-shadow:var(--pb-sh1)}
.pb-tarjeta-alta{background:var(--pb-s1);border:1px solid var(--pb-ln);border-radius:var(--pb-r3);box-shadow:var(--pb-sh2)}
.pb-cristal{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);border-radius:var(--pb-r2);box-shadow:var(--pb-sh2);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4)}

/* ── Formularios ── */
.pb-campo{display:flex;flex-direction:column;gap:7px;font-size:14.5px;font-weight:600;color:var(--pb-tx)}
.pb-campo small,.pb-ayuda{font-weight:400;font-size:13.5px;color:var(--pb-dm)}
.pb-campo input,.pb-campo select,.pb-campo textarea,.pb-input{font:400 16px var(--pb-f);color:var(--pb-tx);background:#fff;border:1px solid #d9d8ea;border-radius:13px;padding:12px 14px;min-height:50px;width:100%;transition:border-color .15s,box-shadow .15s}
.pb-campo input:focus,.pb-campo select:focus,.pb-campo textarea:focus,.pb-input:focus{outline:none;border-color:var(--pb-pr);box-shadow:0 0 0 4px rgba(101,100,244,.16)}
.pb-campo [aria-invalid=true],.pb-input[aria-invalid=true]{border-color:var(--pb-ko);box-shadow:0 0 0 4px rgba(224,69,59,.14)}
.pb-campo textarea{resize:vertical;min-height:96px}
.pb-check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--pb-md);line-height:1.45}
.pb-check input{width:20px;height:20px;margin-top:1px;accent-color:var(--pb-acc);flex-shrink:0}

/* ── Avisos ── */
.pb-aviso{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:14px 16px;font-size:15px;line-height:1.45;border:1px solid}
.pb-aviso svg{flex-shrink:0;margin-top:1px}
.pb-aviso-ok{background:var(--pb-ok-s);border-color:#bfe9d4;color:var(--pb-ok-t)}
.pb-aviso-ko{background:var(--pb-ko-s);border-color:#f8cdc8;color:var(--pb-ko-t)}
.pb-aviso-am{background:var(--pb-am-s);border-color:#f6ddb4;color:var(--pb-am-t)}
.pb-aviso-in{background:var(--pb-pr-s);border-color:var(--pb-pr-b);color:#3f33b8}

/* ── Chips y sellos ── */
.pb-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;background:var(--pb-s3);color:var(--pb-md);border-radius:99px;padding:5px 11px}
.pb-sello{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:99px;padding:4px 11px;background:var(--pb-pr);color:#fff}

/* ── Cabecera y pie públicos mínimos (páginas sueltas: pago, regalo, legales…) ── */
.pb-cab{position:sticky;top:0;z-index:60;background:rgba(246,245,253,.8);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(230,229,242,.8)}
.pb-cab-in{max-width:var(--pb-env);margin:0 auto;padding:0 var(--pb-gut);height:66px;display:flex;align-items:center;gap:20px}
.pb-marca{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--pb-tx)}
.pb-marca span{display:flex;flex-direction:column;line-height:1.02}
.pb-marca b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.pb-marca small{font-size:12.5px;font-weight:600;color:var(--pb-tx)}
.pb-marca em{font-style:normal;background:linear-gradient(90deg,#9b3cf5,#5b4cf2 45%,#1fb2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pb-pie{padding:34px 0 30px;color:var(--pb-dm);font-size:14px}
.pb-pie a{color:var(--pb-dm)}

/* ── Fondo aurora (héroes y pantallas de una sola tarjeta) ── */
.pb-aurora{background:var(--pb-aurora),var(--pb-bg)}
/* Página de «una tarjeta en el centro» (pago, regalo, baja, errores, cita previa…) */
.pb-solo{min-height:calc(100svh - 66px);display:grid;place-items:center;padding:40px var(--pb-gut) 64px}
.pb-solo-in{width:100%;max-width:560px}
.pb-solo .pb-tarjeta-alta{padding:32px}
@media (max-width:560px){.pb-solo .pb-tarjeta-alta{padding:22px 18px;border-radius:22px}}

/* ── El avatar de la casa ──
   Siempre con alt vacío y aria-hidden si es decoración; flota con una sombra suave
   del mismo violeta. `.pb-av-halo` le pone detrás el círculo de PM360. */
.pb-av{display:block;filter:drop-shadow(0 18px 24px rgba(40,32,120,.18))}
.pb-av-halo{position:relative;isolation:isolate}
.pb-av-halo::before{content:'';position:absolute;z-index:-1;left:50%;bottom:4%;width:88%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle at 30% 30%,#b9a8ff,#6f5cf5 60%,#4b3fd9);opacity:.9}

/* ── Estado vacío / error con el avatar ── */
.pb-estado{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.pb-estado .pb-av{width:180px}
.pb-estado h1{font-size:clamp(28px,5vw,40px)}
.pb-estado p{color:var(--pb-md);max-width:440px}

/* ── Pasos (1 · 2 · 3) ── */
.pb-pasos{display:flex;gap:8px;list-style:none;margin:0;padding:0;font-size:13.5px;font-weight:600;color:var(--pb-dm)}
.pb-pasos li{display:flex;align-items:center;gap:8px}
.pb-pasos li b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--pb-mono);background:var(--pb-s3);color:var(--pb-dm)}
.pb-pasos li[aria-current] {color:var(--pb-tx)}
.pb-pasos li[aria-current] b{background:var(--pb-pr);color:#fff;box-shadow:0 0 0 4px rgba(101,100,244,.18)}
.pb-pasos li.ya b{background:var(--pb-pr-b);color:#3f33b8}
.pb-pasos li+li::before{content:'';width:22px;height:2px;border-radius:2px;background:var(--pb-ln)}

/* ── Aparición al hacer scroll: SÓLO transform (nunca opacity desde 0: a mitad de
   camino el texto queda sin contraste) y sólo si el usuario no pide menos movimiento.
   Sin JS: se ven tal cual. Con JS (landing.js pone .pb-js en <html>) entran al verse. */
@media (prefers-reduced-motion:no-preference){
  .pb-js .pb-sube{transform:translateY(26px);transition:transform .9s var(--pb-ease)}
  .pb-js .pb-sube.visto{transform:none}
  .pb-flota{animation:pb-flota 6s ease-in-out infinite}
  .pb-flota.d2{animation-delay:-2s}.pb-flota.d3{animation-delay:-4s}
}
@keyframes pb-flota{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){:where(.pb) *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}