/* BRB Network — añadidos sobre el design system del Hub.
   Solo lo que el Hub no trae: reloj de sesión, sala y expediente. */

/* ---------- SALA DE SESIÓN ---------- */
.chat .sala-head{display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:linear-gradient(180deg,rgba(24,23,21,.98),rgba(9,9,8,.96));
  box-shadow:inset 0 -1px 0 var(--hairline)}
.sala-av{width:44px;height:44px}
.sala-id{flex:1;min-width:0;line-height:1.25}
.sala-id b{display:block;font-size:14px}
.sala-id small{color:var(--signal);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.reloj{font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:-.03em;
  color:var(--champagne-hi);font-variant-numeric:tabular-nums}
.reloj.alerta{color:#e8b45c;animation:relojPulso 1.1s var(--ease) infinite}
.reloj.fin{color:var(--danger);animation:none}
@keyframes relojPulso{50%{opacity:.4}}
.relojBar{height:2px;background:rgba(255,255,255,.06)}
.relojBar i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--bronze),var(--champagne-hi));transition:width 1s linear}

.sala-msgs{overflow-y:auto;padding:26px clamp(16px,4vw,42px);display:flex;flex-direction:column;gap:16px}
.sala-msgs>*{max-width:min(680px,86%)}
.burbuja{padding:15px 19px;border-radius:22px;font-size:14.5px;line-height:1.62;white-space:pre-wrap;word-wrap:break-word}
.burbuja.yo{align-self:flex-end;border-bottom-right-radius:7px;
  background:linear-gradient(135deg,var(--champagne-hi),#b18c3f);color:#171207;font-weight:500}
.burbuja.el{align-self:flex-start;border-bottom-left-radius:7px;
  background:linear-gradient(145deg,rgba(24,23,21,.96),rgba(15,15,14,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.burbuja.el b{color:var(--champagne-hi);font-weight:620}
.nota{align-self:center;max-width:100%;color:var(--muted);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:6px 0}
.escribiendo{align-self:flex-start;display:flex;gap:6px;padding:20px 24px;border-radius:22px;
  background:rgba(24,23,21,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.escribiendo i{width:5px;height:5px;border-radius:50%;background:var(--champagne);animation:pt 1.3s infinite}
.escribiendo i:nth-child(2){animation-delay:.18s}.escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes pt{0%,60%,100%{opacity:.2}30%{opacity:1}}

.sala-composer{display:flex;align-items:flex-end;gap:12px;padding:18px clamp(16px,4vw,42px);
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
  background:rgba(9,9,8,.96);box-shadow:inset 0 1px 0 var(--hairline)}
.sala-composer textarea{flex:1;min-height:52px;max-height:150px;padding:15px 20px;resize:none;
  background:#11110f;color:var(--paper);border:0;border-radius:26px;font:inherit;font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:box-shadow .5s var(--ease)}
.sala-composer textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--champagne)}
.btn-send{flex:0 0 auto;width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--champagne-hi),#b18c3f);color:#171207;font-size:20px;font-weight:700;
  transition:transform .5s var(--ease)}
.btn-send:hover{transform:translateY(-2px)}
.btn-send:disabled{opacity:.4;transform:none}

/* ---------- RELOJ GRANDE DEL LOBBY ---------- */
.cupo-orbit{position:relative;width:186px;aspect-ratio:1;display:grid;place-items:center;
  border-radius:50%;box-shadow:inset 0 0 0 1px rgba(216,189,117,.3)}
.cupo-orbit::before{content:"";position:absolute;inset:16px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(216,189,117,.13)}
.cupo-orbit b{font-family:var(--serif);font-size:74px;font-weight:500;line-height:1;color:var(--champagne-hi)}
.cupo-orbit small{position:absolute;bottom:34px;color:var(--muted);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase}

/* ---------- EXPEDIENTE ---------- */
.exp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.exp-cat{padding:24px}
.exp-cat h4{margin:0 0 16px;color:var(--champagne);font-size:9px;font-weight:650;
  letter-spacing:.22em;text-transform:uppercase}
.dato{padding:13px 0;box-shadow:inset 0 -1px 0 var(--hairline)}
.dato:last-child{box-shadow:none;padding-bottom:0}
.dato .k{color:var(--dim);font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.dato .v{font-size:15px;line-height:1.5}
.dato .cita{margin-top:9px;padding-left:12px;color:var(--muted);font-size:12.5px;font-style:italic;
  font-family:var(--serif);box-shadow:inset 1px 0 0 var(--goldline)}
.dato .pie{display:flex;align-items:center;gap:10px;margin-top:9px;color:var(--dim);font-size:9px;letter-spacing:.1em}
.dato .pie button{margin-left:auto;background:none;border:0;color:var(--champagne);
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

.barra{height:3px;margin:14px 0 8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--bronze),var(--champagne-hi));transition:width .8s var(--ease)}

.pr{white-space:pre-wrap;font-size:15px;line-height:1.7;color:#cdc7bd}

/* ---------- NIVELES ---------- */
.nivel{padding:30px;display:grid;gap:14px;align-content:start}
.nivel.actual{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(216,189,117,.3)}
.nivel-n{font-family:var(--serif);font-size:52px;font-weight:500;line-height:.8;color:var(--champagne-hi)}
.nivel h3{margin:0;font-family:var(--serif);font-size:27px;font-weight:500;letter-spacing:-.02em}
.nivel p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}

/* ---------- MURO ---------- */
.muro{padding:clamp(28px,4vw,52px)}
.muro-logros{display:grid;gap:11px;margin:24px 0 28px}
.muro-logros div{display:flex;gap:13px;align-items:baseline;padding-bottom:11px;
  box-shadow:inset 0 -1px 0 var(--hairline);font-size:14px}
.muro-logros div:last-child{box-shadow:none}
.muro-logros b{color:var(--champagne-hi);font-family:var(--serif);font-size:23px;font-weight:500;min-width:52px}

/* ---------- SESIONES PASADAS ---------- */
.ses-fila{display:flex;align-items:center;gap:16px;padding:19px 24px;cursor:pointer;
  box-shadow:inset 0 -1px 0 var(--hairline);transition:background .5s var(--ease)}
.ses-fila:last-child{box-shadow:none}
.ses-fila:hover{background:rgba(255,255,255,.022)}
.ses-fila .n{font-family:var(--serif);font-size:27px;font-weight:500;color:var(--dim);min-width:38px}
.ses-fila .t{flex:1;min-width:0}
.ses-fila .t b{display:block;font-size:14.5px;font-weight:550}
.ses-fila .t small{color:var(--dim);font-size:11px}

@media(max-width:900px){
  .reloj{font-size:25px}
  .cupo-orbit{width:154px}.cupo-orbit b{font-size:60px}
  .chat{grid-template-rows:auto auto 1fr auto}
}

/* ---------- ACADEMIA ---------- */
.reveal{animation:subir .7s var(--ease) both}
.reveal-fin{animation:none!important;opacity:1!important;transform:none!important;will-change:auto}
@keyframes subir{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

.serie{margin-top:34px}
.serie-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:14px}
.serie-tit{margin:0;font-family:var(--serif);font-size:clamp(23px,2.4vw,31px);font-weight:500;letter-spacing:-.025em;line-height:1.05}
.carril{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.carril::-webkit-scrollbar{height:4px}
.carril::-webkit-scrollbar-thumb{background:var(--goldline);border-radius:9px}
.quick-start{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:14px;margin-top:16px}
.quick-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;width:100%;
  min-height:104px;padding:20px 22px;border:0;border-radius:24px;text-align:left;cursor:pointer;color:var(--paper);
  background:linear-gradient(145deg,rgba(24,23,21,.96),rgba(15,15,14,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.quick-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 70px rgba(0,0,0,.22)}
.quick-card.primary{background:linear-gradient(135deg,rgba(216,189,117,.96),rgba(158,122,49,.98));color:#171207}
.quick-ico{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.07)}
.quick-card.primary .quick-ico{background:rgba(0,0,0,.1)}
.quick-ico svg{width:22px;height:22px;stroke-width:1.35}
.quick-card b{display:block;font-size:15px;font-weight:680;line-height:1.25}
.quick-card small{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.45}
.quick-card.primary small{color:#4f4124}
.quick-card i{font-style:normal;color:var(--champagne)}
.quick-card.primary i{color:#171207}

.book-shelf{margin-top:36px;padding:30px;border-radius:28px;background:
  linear-gradient(145deg,rgba(24,23,21,.94),rgba(13,13,12,.98));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08)}
.book-shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:24px}
.book-shelf-head h2{margin:0;font-family:var(--serif);font-size:clamp(30px,3.2vw,44px);font-weight:500;letter-spacing:-.03em;line-height:.95}
.book-shelf-head p{max-width:680px;margin:12px 0 0;color:var(--muted);font-size:14px;line-height:1.65}
.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.book-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;min-height:210px;padding:16px;border-radius:22px;
  background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.065);
  transition:transform .55s var(--ease),background .55s var(--ease)}
.book-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.052)}
.book-cover{display:block;align-self:start;perspective:800px}
.book-cover img{width:112px;aspect-ratio:2/3;object-fit:cover;border-radius:5px;
  box-shadow:12px 18px 36px -18px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.1);
  transition:transform .65s var(--ease)}
.book-card:hover .book-cover img{transform:rotateY(-8deg) rotateZ(-1deg) translateY(-3px)}
.book-copy{display:flex;min-width:0;flex-direction:column;align-items:flex-start}
.book-copy span{color:var(--champagne);font-size:8px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.book-copy h3{margin:8px 0 9px;font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:1}
.book-copy p{margin:0 0 16px;color:#b8b1a6;font-size:12.5px;line-height:1.55}
.book-copy .text-link{margin-top:auto}
.vcard{flex:0 0 auto;width:min(290px,74vw);scroll-snap-align:start;background:none;border:0;padding:0;
  cursor:pointer;text-align:left;display:grid;gap:10px;color:inherit;font:inherit;
  transition:transform .6s var(--ease)}
.vcard:hover{transform:translateY(-5px)}
.vthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:16px;background:#141412 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);overflow:hidden}
.vthumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.62))}
.vplay{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;
  background:rgba(9,9,8,.7);backdrop-filter:blur(8px);color:var(--champagne-hi);
  box-shadow:inset 0 0 0 1px rgba(216,189,117,.45);opacity:0;transition:all .5s var(--ease)}
.vcard:hover .vplay{opacity:1;transform:translate(-50%,-50%) scale(1)}
.vcheck{position:absolute;z-index:2;right:10px;top:10px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;
  background:var(--signal);color:#12160b}
.vcard.visto .vtit{color:var(--muted)}
.vtit{font-size:13.5px;line-height:1.45;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* reproductor / visor de documento */
.reproductor{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  background:rgba(4,4,3,.9);backdrop-filter:blur(10px)}
.repro-in{width:min(980px,100%);background:var(--surface);border-radius:22px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 40px 90px rgba(0,0,0,.6)}
.repro-head{display:flex;align-items:center;gap:14px;padding:16px 20px;box-shadow:inset 0 -1px 0 var(--hairline)}
.repro-head b{flex:1;font-size:14.5px;line-height:1.35}
.repro-frame{aspect-ratio:16/9;background:#000}
.repro-frame iframe{width:100%;height:100%;border:0;display:block}
.repro-in.doc{width:min(820px,100%)}
.doc-body{max-height:72dvh;overflow-y:auto;padding:26px clamp(20px,4vw,38px);font-size:14.5px;line-height:1.75}

/* ---------- MÚSICA CON IA ---------- */
.music-visual{background-image:url("/assets/img/private-office-library.webp");background-position:58% center}
.music-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:16px;margin-top:16px}
.music-player,.music-side{padding:26px 30px}
.music-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.music-head h2,.music-side h2{margin:0;font-family:var(--serif);font-size:clamp(25px,2.6vw,36px);font-weight:500;letter-spacing:-.025em;line-height:1}
.music-frame{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.music-frame iframe{width:100%;height:100%;border:0;display:block}
.music-side p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.6}
.music-pistas{display:grid;gap:9px}
.pista{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;
  padding:9px;border:0;border-radius:16px;background:rgba(255,255,255,.035);color:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.065);transition:background .45s var(--ease),transform .45s var(--ease)}
.pista:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.pista-cover{width:44px;height:44px;border-radius:12px;background:#0d0d0c center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pista-id{min-width:0}.pista-id b,.pista-id small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pista-id b{font-size:12.5px}.pista-id small{margin-top:3px;color:var(--muted);font-size:10px}
.pista-play{color:var(--champagne);font-size:13px}
.empty.small{padding:28px 14px}

/* ---------- SERVICIO ÚNICO ---------- */
.one-service{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.55fr);gap:16px;margin-top:16px}
.one-service-card{min-height:260px;padding:34px;text-align:left;border:0;color:inherit;cursor:pointer;
  display:grid;align-content:end;gap:14px;background:
  linear-gradient(160deg,rgba(17,16,13,.24),rgba(7,7,6,.9)),
  url("/assets/img/private-office-founder.webp") center/cover}
.one-service-card .serv-ico{width:54px;height:54px;display:grid;place-items:center;border-radius:18px;background:rgba(9,9,8,.58);
  color:var(--champagne-hi);box-shadow:inset 0 0 0 1px rgba(216,189,117,.28)}
.one-service-card .serv-ico svg{width:24px;height:24px}
.one-service-card b{max-width:620px;font-family:var(--serif);font-size:clamp(31px,3vw,46px);font-weight:500;line-height:.95;letter-spacing:-.03em}
.one-service-card .serv-desc{max-width:520px;color:#d3cbbd;font-size:14px;line-height:1.6}
.service-note{padding:28px;display:grid;align-content:start;gap:13px}
.service-note p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.65}
.service-note .btn{justify-content:space-between}

.profile-fast-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.profile-fast-actions .btn{min-height:42px}

/* ---------- MEMBRESÍAS ---------- */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:14px;margin-top:16px}
.plan{position:relative;padding:32px 28px;display:grid;gap:14px;align-content:start;height:100%}
.plan.actual{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(216,189,117,.42)}
.plan.top{background:linear-gradient(160deg,rgba(216,189,117,.09),transparent 62%),
  linear-gradient(145deg,rgba(24,23,21,.96),rgba(15,15,14,.98))}
.plan-flag{position:absolute;top:16px;right:16px;padding:5px 11px;border-radius:999px;
  background:var(--champagne-hi);color:#171207;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.plan-n{font-family:var(--serif);font-size:44px;font-weight:500;line-height:.8;color:var(--champagne-hi);opacity:.55}
.plan h3{margin:0;font-family:var(--serif);font-size:29px;font-weight:500;letter-spacing:-.025em}
.plan-gancho{margin:0;color:#b6b0a7;font-size:14.5px;line-height:1.6}
.plan-cifra{display:flex;align-items:baseline;gap:10px;padding:14px 0;box-shadow:inset 0 -1px 0 var(--hairline)}
.plan-cifra b{font-family:var(--serif);font-size:44px;font-weight:500;line-height:.9;color:var(--champagne-hi)}
.plan-cifra span{color:var(--muted);font-size:12.5px;line-height:1.4}
.plan-benef{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.plan-benef li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.55;color:#c6c0b6}
.plan-benef li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;
  background:var(--champagne);opacity:.8}
.plan-precio{font-family:var(--serif);font-size:34px;font-weight:500;color:var(--paper)}
.plan-precio small{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:400}
.plan .btn{justify-self:start;margin-top:4px}

@media(max-width:900px){
  .plan{padding:26px 22px}
  .repro-in{border-radius:18px}
  .doc-body{max-height:66dvh}
  .quick-start,.music-layout,.one-service,.book-grid{grid-template-columns:1fr}
  .book-shelf{padding:22px 18px}
  .book-shelf-head{display:block}
  .book-shelf-head .btn{margin-top:16px}
  .music-head{display:block}
  .music-head .btn{margin-top:14px}
  .one-service-card{min-height:310px;padding:28px 24px}
}

/* ---------- LEGIBILIDAD VISITANTE ----------
   El contenido de Network no debe depender de negro sobre negro. La navegación
   puede mantenerse sobria, pero las superficies de lectura son claras. */
body{
  background:
    radial-gradient(900px 580px at 86% -10%,rgba(177,138,52,.13),transparent 62%),
    linear-gradient(180deg,#f4f1e8 0%,#ece7da 100%);
}
#app{color:#10202a}
#app .section-title,
#app h1,#app h2,#app h3,
#app .dato .v{color:#10202a}
#app .muted,
#app .lede,
#app .view-head p,
#app .dato .k,
#app .ses-fila .t small{color:#5d6570}
#app .bezel{
  background:rgba(16,32,42,.045);
  box-shadow:inset 0 0 0 1px rgba(16,32,42,.08);
}
#app .panel{
  background:linear-gradient(145deg,#fffdf7,#f6f2e8);
  color:#10202a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px rgba(36,30,18,.08);
}
#app .visual-head{
  border-color:rgba(16,32,42,.12);
  box-shadow:0 22px 64px rgba(36,30,18,.13);
}
#app .visual-head::before{
  background:
    linear-gradient(90deg,rgba(9,11,12,.88) 0%,rgba(9,11,12,.62) 48%,rgba(9,11,12,.12) 100%),
    linear-gradient(0deg,rgba(9,11,12,.58),transparent 62%);
}
#app .visual-head .section-title,
#app .visual-head h1,
#app .visual-head h2,
#app .visual-head p{color:#fffaf0}
#app .visual-head .section-title em{color:#f1d994}
#app .btn-dark{
  background:#10202a;
  color:#fffaf0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
#app .meta-pill{
  background:rgba(255,253,247,.88);
  color:#24323b;
  box-shadow:inset 0 0 0 1px rgba(16,32,42,.12);
}
#app .quick-card,
#app .book-shelf,
#app .book-card,
#app .service-note,
#app .music-player,
#app .music-side{
  background:linear-gradient(145deg,#fffdf7,#f6f2e8);
  color:#10202a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(16,32,42,.08),0 18px 44px rgba(36,30,18,.08);
}
#app .quick-card.primary{
  background:linear-gradient(135deg,#caa85f,#987231);
  color:#11130f;
}
#app .quick-card small,
#app .book-shelf-head p,
#app .book-copy p,
#app .service-note p,
#app .music-side p,
#app .plan-gancho,
#app .plan-benef li,
#app .plan-cifra span,
#app .pr{color:#4f5d67}
#app .book-card:hover,
#app .quick-card:hover{
  background:#ffffff;
}
#app .one-service-card{
  color:#fffaf0;
  background:
    linear-gradient(160deg,rgba(9,11,12,.18),rgba(9,11,12,.78)),
    url("/assets/img/private-office-founder.webp") center/cover;
}
#app .one-service-card b,
#app .one-service-card .serv-desc{color:#fffaf0}
#app .ses-fila{
  box-shadow:inset 0 -1px 0 rgba(16,32,42,.1);
}
#app .ses-fila:hover{background:rgba(16,32,42,.045)}
#app .empty{color:#5d6570}
#app .field input,
#app .field textarea,
#app .field select{
  background:#fffaf0;
  color:#10202a;
  box-shadow:inset 0 0 0 1px rgba(16,32,42,.16);
}
#app .field label{color:#59646d}

@media(max-width:820px){
  #app{background:transparent}
}

/* ---------- TEMA AZUL + BLANCO LEGIBLE ----------
   Pedido: nada marrón/pastel. Blanco limpio, azul marino y acentos azules. */
:root{
  --ink:#f5f9ff;
  --ink-2:#eaf2fb;
  --surface:#ffffff;
  --surface-2:#f7fbff;
  --paper:#0b1b33;
  --muted:#4f6683;
  --dim:#8295ad;
  --champagne:#1f5fbf;
  --champagne-hi:#3d8bff;
  --bronze:#164887;
  --hairline:rgba(11,27,51,.1);
  --goldline:rgba(31,95,191,.24);
}
.rail{
  background:linear-gradient(180deg,#0b1b33,#071226);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 70px rgba(11,27,51,.18);
}
.rail-nav button{color:#9eb5d6}
.rail-nav button:hover{color:#fff;background:rgba(255,255,255,.08)}
.rail-nav button.active{color:#fff;background:rgba(61,139,255,.22)}
.rail-nav button.active::before{background:#3d8bff;box-shadow:0 0 18px rgba(61,139,255,.42)}
.rail-profile{background:rgba(255,255,255,.065);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.rail-profile small,.mini-arrow{color:#b5c8e5}
.topbar{
  background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(11,27,51,.09),0 8px 30px rgba(11,27,51,.08);
}
.crumb span{color:#8295ad}.crumb b{color:#0b1b33}
.status-chip{background:rgba(31,95,191,.1);box-shadow:inset 0 0 0 1px rgba(31,95,191,.18);color:#1f5fbf}
.icon-btn{background:rgba(11,27,51,.055);box-shadow:inset 0 0 0 1px rgba(11,27,51,.1);color:#0b1b33}
.mobile-nav{background:rgba(11,27,51,.96)}
.mobile-nav button{color:#9eb5d6}.mobile-nav button.active{color:#fff}
.mobile-ring span{background:#3d8bff;color:#fff;box-shadow:0 0 0 6px #0b1b33}

body{
  background:
    radial-gradient(900px 580px at 86% -10%,rgba(61,139,255,.14),transparent 62%),
    linear-gradient(180deg,#f5f9ff 0%,#eaf2fb 100%);
}
#app,
#app .section-title,
#app h1,#app h2,#app h3,
#app .dato .v{color:#0b1b33}
#app .muted,
#app .lede,
#app .view-head p,
#app .dato .k,
#app .ses-fila .t small,
#app .quick-card small,
#app .book-shelf-head p,
#app .book-copy p,
#app .service-note p,
#app .music-side p,
#app .plan-gancho,
#app .plan-benef li,
#app .plan-cifra span,
#app .pr{color:#4f6683}
#app .eyebrow,
#app .gold-text,
#app .text-link{color:#1f5fbf}
#app .section-title em{color:#1f5fbf}
#app .bezel{background:rgba(11,27,51,.045);box-shadow:inset 0 0 0 1px rgba(11,27,51,.08)}
#app .panel,
#app .quick-card,
#app .book-shelf,
#app .book-card,
#app .service-note,
#app .music-player,
#app .music-side{
  background:linear-gradient(145deg,#ffffff,#f7fbff);
  color:#0b1b33;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(11,27,51,.08),0 18px 44px rgba(11,27,51,.08);
}
#app .quick-card.primary,
#app .btn-gold{
  background:linear-gradient(135deg,#3d8bff,#1f5fbf);
  color:#fff;
}
#app .btn-dark{
  background:#0b1b33;
  color:#fff;
}
#app .btn-dark:hover{background:#14325d;color:#fff}
#app .meta-pill{background:rgba(255,255,255,.9);color:#304866;box-shadow:inset 0 0 0 1px rgba(11,27,51,.12)}
#app .visual-head::before{
  background:
    linear-gradient(90deg,rgba(11,27,51,.9) 0%,rgba(11,27,51,.66) 48%,rgba(11,27,51,.16) 100%),
    linear-gradient(0deg,rgba(11,27,51,.58),transparent 62%);
}
#app .visual-head .section-title,
#app .visual-head h1,
#app .visual-head h2{color:#fff}
#app .visual-head p{color:#dfeaff}
#app .visual-head .section-title em{color:#8fc2ff}
#app .field input,
#app .field textarea,
#app .field select{
  background:#fff;
  color:#0b1b33;
  box-shadow:inset 0 0 0 1px rgba(11,27,51,.16);
}
#app .field label{color:#4f6683}

/* ---------- DEMO EN VIVO CON EL AVATAR ---------- */
.demo-viva{display:flex;align-items:center;gap:22px;padding:26px 30px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(216,189,117,.12),transparent 58%),
             linear-gradient(145deg,rgba(24,23,21,.96),rgba(15,15,14,.98))}
.demo-viva .txt{flex:1;min-width:230px}
.demo-viva h3{margin:0 0 6px;font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:-.02em}
.demo-viva p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.demo-punto{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  color:var(--signal);font-size:9px;font-weight:650;letter-spacing:.2em;text-transform:uppercase}
.demo-punto i{width:6px;height:6px;border-radius:50%;background:var(--signal);animation:latir 1.6s infinite}
@keyframes latir{50%{opacity:.25}}

.avatar-live{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;
  background:rgba(4,4,3,.94);backdrop-filter:blur(14px)}
.av-in{width:min(860px,100%);display:grid;gap:12px}
.av-top{display:flex;align-items:center;gap:12px}
.av-top b{flex:1;font-size:14px}
.av-cronos{font-family:var(--serif);font-size:25px;font-weight:500;color:var(--champagne-hi);font-variant-numeric:tabular-nums}
.av-cronos.alerta{color:#e8b45c}
.av-marco{position:relative;aspect-ratio:16/9;max-height:74dvh;border-radius:22px;overflow:hidden;background:#0a0a09;
  box-shadow:inset 0 0 0 1px rgba(216,189,117,.28),0 34px 80px rgba(0,0,0,.6)}
.av-marco iframe{width:100%;height:100%;border:0;display:block}
.av-fin{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;
  background:rgba(8,8,7,.93);backdrop-filter:blur(6px)}
.av-fin div{max-width:280px}
.av-nota{text-align:center;color:var(--dim);font-size:11px;letter-spacing:.06em}


/* ---------- EL MENÚ SIEMPRE VISIBLE ----------
   La sala, el reproductor y el avatar son pantalla completa, pero NO deben tapar
   la navegación. El rail vive hasta 820px; abajo de eso manda la barra inferior. */
@media (min-width:821px){
  .chat, .reproductor, .avatar-live{ left:var(--rail); }
}
@media (max-width:820px){
  .chat, .reproductor, .avatar-live{ bottom:88px; }
  .sala-composer{ padding-bottom:18px; }
}

/* ---------- EL MENÚ SIEMPRE VISIBLE ----------
   La sala, el reproductor y el avatar son pantalla completa, pero NO deben tapar
   la navegación. El rail vive hasta 820px; abajo de eso manda la barra inferior. */
@media (min-width:821px){
  .chat, .reproductor, .avatar-live{ left:var(--rail); }
}
@media (max-width:820px){
  .chat, .reproductor, .avatar-live{ bottom:88px; }
  .sala-composer{ padding-bottom:18px; }
}


/* La consulta ya no muestra cuenta regresiva: solo una barra que se va agotando. */
.salir-arriba{flex:0 0 auto;color:var(--dim);font-size:11.5px;letter-spacing:.04em}
.salir-arriba:hover{color:var(--danger)}
.relojBar i.porfin{background:linear-gradient(90deg,#8a6a2a,#e8b45c)}

/* ---------- CONTACTO DIRECTO RAMON ---------- */
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:46;
  min-height:50px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 18px 0 15px;
  border-radius:999px;
  background:#25d366;
  color:#07160d;
  text-decoration:none;
  font-size:12px;
  font-weight:750;
  box-shadow:0 18px 48px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.35);
}
.whatsapp-float svg{width:20px;height:20px;stroke-width:1.7}
.whatsapp-float:hover{transform:translateY(-2px);background:#35e276}
.carta-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.carta-actions .btn{width:100%;justify-content:center}

@media (max-width:820px){
  .whatsapp-float{
    right:14px;
    bottom:calc(104px + env(safe-area-inset-bottom));
    min-height:46px;
    padding:0 14px;
  }
  .whatsapp-float b{display:none}
  .carta-actions{grid-template-columns:1fr}
}
/* ---------- INTRO CINEMATICO ---------- */
.intro-loader{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#02050a;
  opacity:1;
  transform:translateZ(0);
  transition:opacity .65s var(--ease),visibility .65s var(--ease);
}
.intro-loader[hidden]{
  display:none;
}
.intro-loader.is-done{
  opacity:0;
  visibility:hidden;
}
.intro-video{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#02050a;
  border-radius:0;
  box-shadow:none;
  filter:saturate(1.08) contrast(1.04);
}
.intro-loader::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%,transparent 0 38%,rgba(0,0,0,.24) 72%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(0,0,0,.34),transparent 24%,transparent 72%,rgba(0,0,0,.52));
}
.intro-shine{
  position:absolute;
  inset:auto 0 0;
  height:42%;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(61,139,255,.14));
  mix-blend-mode:screen;
}
.intro-progress{
  position:absolute;
  left:50%;
  bottom:calc(34px + env(safe-area-inset-bottom));
  width:min(260px,56vw);
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  box-shadow:0 0 30px rgba(61,139,255,.32);
  transform:translateX(-50%);
}
.intro-progress i{
  display:block;
  width:100%;
  height:100%;
  transform-origin:left center;
  background:linear-gradient(90deg,#3d8bff,#f5f9ff,#3d8bff);
  animation:introLoad 6.08s linear both;
}
@keyframes introLoad{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .intro-loader{display:none}
}
@media (max-width:820px){
  .intro-loader{
    place-items:center;
    background:radial-gradient(circle at 50% 36%,rgba(17,43,84,.96),#02050a 70%);
  }
  .intro-video{
    position:relative;
    inset:auto;
    width:min(58vw,220px);
    height:auto;
    max-height:30dvh;
    aspect-ratio:9/16;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 18px 55px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.12);
  }
  .intro-loader::after{
    background:
      radial-gradient(circle at 50% 50%,transparent 0 22%,rgba(0,0,0,.2) 58%,rgba(0,0,0,.7) 100%),
      linear-gradient(180deg,rgba(0,0,0,.26),transparent 32%,rgba(0,0,0,.46));
  }
  .intro-shine{
    height:34%;
    opacity:.72;
  }
  .intro-progress{
    bottom:calc(24px + env(safe-area-inset-bottom));
    width:min(180px,46vw);
  }
}

/* ---------- CONTRASTE accesible de consultoría (modo oscuro) ---------- */
.chat{
  background:#0b0b0a;
}

.topbar{
  background:rgba(8,8,7,.96);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 8px 30px rgba(0,0,0,.28);
}
.topbar .crumb span{
  color:#9aa4af;
}
.topbar .crumb b{
  color:#f2eee6;
}
.topbar .status-chip{
  color:#f1ece2;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.topbar .status-chip i{
  background:#b8d37b;
  box-shadow:0 0 14px rgba(184,211,123,.42);
}
.topbar .icon-btn{
  color:#f2eee6;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}

.chat .sala-head{
  background:#12100e;
  color:#efece4;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.14);
}
.chat .sala-head .icon-btn,
.chat .sala-head .salir-arriba{
  color:#ebe6dc;
}
.chat .sala-head .icon-btn{
  background:rgba(255,255,255,.07);
}
.chat .sala-id b{
  color:#f3efe6;
}
.chat .sala-id small{
  color:#96a3ad;
}

.chat .burbuja.el{
  background:linear-gradient(145deg,#181717,#0e0e0d);
  color:#ece8df;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.chat .burbuja.el b{
  color:#f1d994;
}
.chat .burbuja.yo{
  background:linear-gradient(135deg,#f4da93,#bf8f3f);
  color:#1a1309;
}
.chat .nota{
  color:#d0c8bd;
}
.chat .escribiendo{
  background:#161513;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.chat .sala-composer{
  background:#090908;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.chat .sala-composer textarea{
  background:#141312;
  color:#ece8df;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.chat .sala-composer textarea:focus{
  box-shadow:inset 0 0 0 1px var(--champagne-hi);
}
.chat .sala-composer .btn-send{
  background:linear-gradient(135deg,#f1d994,#d6ac4a);
  color:#1c160e;
}
.sala-msgs{scrollbar-color:rgba(255,255,255,.2) transparent;}

#salaEstado{
  color:#c5c0b5;
}
#relojBar{
  background:rgba(255,255,255,.11);
}
#relojBar i{
  background:linear-gradient(90deg,#8a6a2a,#f1d994);
}
#relojBar i.porfin{
  background:linear-gradient(90deg,#8a6a2a,#e8b45c);
}

/* ---------- AJUSTE FINAL CONSULTORES: SALA Y TEMA DE SESSIÓN ---------- */
.chat#sala{
  left:var(--rail);
  right:22px;
  top:22px;
  bottom:22px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg,#102746 0%,#0c1f42 48%,#091833 100%);
  box-shadow:inset 0 0 0 1px rgba(147,188,255,.14), 0 26px 80px rgba(3,10,25,.42);
}
.chat#sala::before,
.chat#sala::after{
  display:none!important;
  content:none!important;
}
.chat .sala-head{
  background:linear-gradient(180deg,rgba(17,40,78,.98),rgba(13,32,60,.96));
  color:#eef4ff;
  box-shadow:none;
  border-bottom:1px solid rgba(160,200,255,.18);
}
.chat .sala-head .icon-btn,
.chat .sala-head .salir-arriba{
  color:#eff4ff;
  background:rgba(255,255,255,.09);
}
.chat .sala-head .icon-btn{
  border:1px solid rgba(160,200,255,.24);
}
.chat .sala-id b{ color:#f5f8ff; }
.chat .sala-id small{ color:#a9c1e7; }
.chat .sala-msgs{
  padding:20px clamp(16px,4vw,38px);
  background:transparent;
  gap:14px;
}
.chat .burbuja.el{
  background:linear-gradient(145deg,rgba(22,50,92,.96),rgba(12,27,54,.96));
  color:#eef4ff;
  box-shadow:inset 0 0 0 1px rgba(167,205,255,.12);
}
.chat .burbuja.el b{ color:#ffe9ad; }
.chat .burbuja.yo{
  background:linear-gradient(135deg,#5ca2ff,#2d74d8);
  color:#0c1730;
}
.chat .nota{ color:#c6d7f0; }
.chat .escribiendo{
  background:rgba(18,37,71,.9);
  box-shadow:none;
}
.chat .sala-composer{
  background:linear-gradient(180deg,rgba(15,34,68,.9),rgba(11,26,52,.96));
  box-shadow:inset 0 1px 0 rgba(165,205,255,.18);
}
.chat .sala-composer textarea{
  background:rgba(9,24,52,.88);
  color:#eef4ff;
  box-shadow:inset 0 0 0 1px rgba(165,205,255,.25);
}
.chat .sala-composer textarea:focus{ box-shadow:inset 0 0 0 1px #9fc3ff; }
.chat .btn-send{ background:linear-gradient(135deg,#5ea7ff,#2f70cf); color:#081226; }
.chat .sala-composer .btn-send:hover{ transform:none; }
#salaEstado{ color:#b5caea; }
#relojBar{ background:rgba(160,200,255,.18); }
#relojBar i{ background:linear-gradient(90deg,#4f94ff,#9dc6ff); }
#relojBar i.porfin{ background:linear-gradient(90deg,#7cb4ff,#ffce6f); }
#sala .chat{ scrollbar-color:rgba(190,220,255,.4) transparent; }

@media (max-width:820px){
  .chat#sala{
    left:0;
    right:0;
    top:0;
    bottom:88px;
    border-radius:18px 18px 0 0;
  }
  .chat .sala-msgs{ padding:16px 12px 18px; }
}

/* Academy domain: keep the inherited Network auth form inside the mobile viewport. */
@media (max-width:820px){
  .auth-panel{overflow-x:hidden}
  .auth-box{width:min(100%,calc(100vw - 44px));max-width:calc(100vw - 44px);min-width:0}
  .auth-box .btn,.auth-box .field input,.auth-box .field select{max-width:100%}
}