/* Praksis — sitio.
   Lenguaje visual de Bondersh: lienzo oscuro con marco, vidrio, píldoras,
   grano y luces azules. Una sola familia tipográfica. */

:root{
  --fondo:#050C1C;
  --profundo:#06122B;
  --marino:#0A1A3C;
  --electrico:#2B54F5;
  --claro:#8FA9FF;
  --calido:#F2B98B;
  --verde:#9BE8BD;

  --blanco:#F6F8FF;
  --tenue:rgba(246,248,255,.66);
  --apagado:rgba(246,248,255,.5);
  --vidrio-borde:rgba(255,255,255,.18);

  --f:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.68,.24,1);
  --r:26px;
  --pad:30px;
  --marco:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--fondo);color:var(--blanco);font-family:var(--f);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding:var(--marco);overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--electrico);color:#fff}
:focus-visible{outline:2px solid var(--claro);outline-offset:3px;border-radius:8px}

.lienzo{border-radius:var(--r);overflow:hidden;position:relative;background:var(--profundo)}
.envoltorio{width:min(1180px,100% - var(--pad) * 2);margin-inline:auto}

/* grano y luces de ambiente, iguales en todas las escenas */
.fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.fondo img{width:100%;height:100%;object-fit:cover;transform:scale(1.07);
  transition:transform 2.6s var(--ease)}
.cuadro.dentro .fondo img{transform:scale(1)}
.grano{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.luz{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------------- tipografía ---------------- */
h1{font-size:clamp(2.3rem,3.9vw,3.7rem);font-weight:600;line-height:1.06;letter-spacing:-.032em}
h2{font-size:clamp(1.9rem,3.2vw,3rem);font-weight:600;line-height:1.08;letter-spacing:-.03em}
h3{font-size:1.18rem;font-weight:600;letter-spacing:-.02em}
h1 em,h2 em{font-style:normal;color:var(--claro)}
.bajada{color:var(--tenue);font-size:1.03rem;max-width:48ch;line-height:1.62}
.bajada strong,.bajada b{color:var(--blanco);font-weight:600}
.rotulo{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;
  border-radius:100px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(246,248,255,.86)}
.rotulo::before{content:'';display:block;width:7px;height:7px;border-radius:2px;background:var(--claro)}

/* ---------------- barra ---------------- */
.barra{position:fixed;top:var(--marco);left:var(--marco);right:var(--marco);z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px var(--pad);
  border-radius:var(--r) var(--r) 20px 20px;
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease)}
.barra.pegada{padding:12px var(--pad);background:rgba(5,12,28,.62);backdrop-filter:blur(18px);
  box-shadow:0 12px 34px -22px rgba(0,0,0,.9)}
.marca{display:inline-flex;align-items:baseline;font-weight:700;font-size:1.24rem;letter-spacing:-.03em;color:var(--blanco)}
.marca .punto{color:var(--claro)}
.menu{display:flex;gap:4px;padding:5px;border-radius:100px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(14px)}
.menu a{padding:8px 16px;border-radius:100px;font-size:.9rem;font-weight:500;color:rgba(246,248,255,.7);
  transition:background .3s var(--ease),color .3s var(--ease)}
.menu a:hover,.menu a.on{color:var(--blanco);background:rgba(255,255,255,.13)}
.acciones-barra{display:flex;align-items:center;gap:10px}
.hamburguesa{display:none;position:relative;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.09);border:1px solid var(--vidrio-borde);backdrop-filter:blur(14px)}
.hamburguesa span{position:absolute;left:calc(50% - 9px);top:calc(50% - .8px);
  width:18px;height:1.6px;border-radius:2px;background:var(--blanco);transition:transform .35s var(--ease)}
.hamburguesa span:first-child{transform:translateY(-3.5px)}
.hamburguesa span:last-child{transform:translateY(3.5px)}
.hamburguesa[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}

/* ---------------- píldoras ---------------- */
.boton{display:inline-flex;align-items:center;gap:10px;padding:11px 8px 11px 20px;border-radius:100px;
  background:var(--blanco);color:#0A1020;font-size:.92rem;font-weight:600;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.boton::after{content:'→';display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--electrico);color:#fff;font-size:.78rem;flex:none}
.boton:hover{transform:translateY(-2px);box-shadow:0 14px 32px -14px rgba(0,0,0,.85)}
.boton.fantasma{background:rgba(255,255,255,.09);color:var(--blanco);border:1px solid var(--vidrio-borde);
  backdrop-filter:blur(14px);padding:11px 22px}
.boton.fantasma::after{display:none}
.boton.fantasma:hover{background:rgba(255,255,255,.17)}
.boton.chico{padding:9px 8px 9px 16px;font-size:.86rem}
.boton.ancho{width:100%;justify-content:center}
.boton.invertido{background:var(--electrico);color:var(--blanco)}
.boton.invertido::after{background:var(--blanco);color:var(--electrico)}
.menu-entrar{display:none}
@media (max-width:820px){.menu-entrar{display:block}}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:calc(100svh - 28px);display:flex;align-items:center;
  padding:150px 0 110px;overflow:hidden}
.hero .luz{background:
  radial-gradient(56% 50% at 72% 38%,rgba(43,84,245,.34),transparent 70%),
  linear-gradient(90deg,rgba(5,12,28,.95) 0%,rgba(5,12,28,.86) 34%,rgba(5,12,28,.5) 68%,rgba(5,12,28,.72) 100%),
  radial-gradient(122% 100% at 50% 46%,transparent 44%,rgba(5,12,28,.78) 100%)}
.hero .envoltorio{position:relative;z-index:4;width:min(1180px,100% - var(--pad) * 2);display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{margin:18px 0 20px}
.hero .acciones{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.hero .nota{font-size:.84rem;color:var(--apagado);margin-top:18px}
.bajar{position:absolute;left:50%;bottom:30px;z-index:6;translate:-50% 0;
  display:inline-flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;color:var(--apagado);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;transition:color .35s var(--ease)}
.bajar:hover,.bajar:focus-visible{color:var(--blanco)}
.bajar .flecha{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--vidrio-borde);background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);animation:bajar-late 2.4s var(--ease) infinite}
.bajar:hover .flecha{background:rgba(255,255,255,.16)}
@keyframes bajar-late{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* la escena: papeles sueltos que se acomodan en una agenda */
.escena{position:relative;height:430px}
.agenda-viva{
  position:absolute;inset:0;border-radius:22px;padding:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border:1px solid var(--vidrio-borde);backdrop-filter:blur(16px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.22);
  display:grid;grid-template-rows:auto repeat(4,1fr);gap:10px;
}
.agenda-viva .cab{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)}
.agenda-viva .cab b{font-size:.95rem;font-weight:600}
.agenda-viva .cab span{font-size:.76rem;color:var(--apagado)}
.turno{
  display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:13px;
  background:rgba(143,169,255,.12);border:1px solid rgba(143,169,255,.22);
  opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.9);
  animation:acomodar .9s var(--ease) forwards;
}
.turno .hora{font-size:.8rem;color:var(--apagado);font-variant-numeric:tabular-nums;min-width:42px}
.turno .quien{font-weight:600;font-size:.92rem;flex:1}
.turno .estado{font-size:.68rem;font-weight:600;padding:4px 9px;border-radius:100px;
  background:rgba(143,169,255,.2);color:var(--claro);border:1px solid rgba(143,169,255,.28)}
.turno.pago{background:rgba(122,222,160,.12);border-color:rgba(122,222,160,.24)}
.turno.pago .estado{background:rgba(122,222,160,.18);color:var(--verde);border-color:rgba(122,222,160,.28)}
.turno:nth-child(2){--dx:-160px;--dy:-90px;--rot:-9deg;animation-delay:.15s}
.turno:nth-child(3){--dx:190px;--dy:-30px;--rot:7deg;animation-delay:.35s}
.turno:nth-child(4){--dx:-130px;--dy:120px;--rot:5deg;animation-delay:.55s}
.turno:nth-child(5){--dx:170px;--dy:140px;--rot:-6deg;animation-delay:.75s}
@keyframes acomodar{to{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}

.papelito{
  position:absolute;z-index:6;border-radius:14px;padding:11px 14px;font-size:.8rem;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px dashed rgba(255,255,255,.24);backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9);color:rgba(246,248,255,.8);
  animation:desvanecer 1s var(--ease) forwards;
}
.papelito b{display:block;font-size:.66rem;color:var(--apagado);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.papelito.uno{top:-22px;left:-46px;transform:rotate(-7deg);animation-delay:1.7s}
.papelito.dos{bottom:24px;right:-52px;transform:rotate(6deg);animation-delay:2s}
.papelito.tres{bottom:-28px;left:26px;transform:rotate(3deg);animation-delay:2.3s}
@keyframes desvanecer{
  0%{opacity:1}
  60%{opacity:1;filter:blur(0)}
  100%{opacity:0;filter:blur(3px);transform:translateY(14px) rotate(0) scale(.94)}
}

/* ---------------- el día ---------------- */
.dia{position:relative;padding:14vh 0;background:var(--fondo);border-top:1px solid rgba(255,255,255,.07)}
.dia .luz{background:
  radial-gradient(50% 40% at 80% 6%,rgba(43,84,245,.2),transparent 70%),
  linear-gradient(180deg,rgba(5,12,28,.78) 0%,rgba(5,12,28,.93) 26%,rgba(5,12,28,.96) 100%)}
.dia .envoltorio{position:relative;z-index:4}
.dia .intro{max-width:680px;margin-bottom:clamp(34px,5vw,60px)}
.dia h2{margin:18px 0 18px}

.momento{
  display:grid;grid-template-columns:104px 1fr 1fr;gap:26px;align-items:start;
  padding:36px 0;border-top:1px solid rgba(255,255,255,.09);
}
.momento .reloj{font-size:1.7rem;font-weight:700;color:var(--claro);
  letter-spacing:-.03em;position:sticky;top:100px;font-variant-numeric:tabular-nums}
.momento .reloj small{display:block;font-size:.68rem;font-weight:600;color:var(--apagado);
  letter-spacing:.1em;text-transform:uppercase;margin-top:6px;line-height:1.4}
.momento h3{margin-bottom:8px}
.momento p{color:var(--tenue);font-size:.95rem}

.antes,.despues{border-radius:20px;padding:22px}
.antes{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px dashed rgba(255,255,255,.2)}
.antes h3,.antes p{color:rgba(246,248,255,.72)}
.despues{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.07));
  border:1px solid var(--vidrio-borde);backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.2)}
.etiqueta{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  margin-bottom:12px;display:block}
.antes .etiqueta{color:var(--calido)}
.despues .etiqueta{color:var(--claro)}

.mensaje{border-radius:13px;padding:10px 13px;font-size:.85rem;margin-top:9px;
  background:rgba(5,12,28,.4);border:1px solid rgba(255,255,255,.1);color:rgba(246,248,255,.8)}
.mensaje small{display:block;color:var(--apagado);font-size:.72rem;margin-top:2px}
.fila-dato{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem}
.fila-dato:first-child{border-top:0;padding-top:2px}
.fila-dato b{font-weight:700;letter-spacing:-.01em}
.pastilla{font-size:.68rem;font-weight:600;padding:4px 10px;border-radius:100px;
  background:rgba(122,222,160,.18);color:var(--verde);border:1px solid rgba(122,222,160,.28)}
.pastilla.espera{background:rgba(242,185,139,.16);color:var(--calido);border-color:rgba(242,185,139,.3)}

/* ---------------- el paciente ---------------- */
.paciente{position:relative;padding:14vh 0;background:var(--profundo);
  border-top:1px solid rgba(255,255,255,.07);overflow:hidden}
.paciente .fondo img{object-position:20% 50%}
.paciente .luz{background:
  radial-gradient(48% 46% at 76% 48%,rgba(43,84,245,.26),transparent 72%),
  linear-gradient(90deg,rgba(6,18,43,.97) 0%,rgba(6,18,43,.92) 40%,rgba(6,18,43,.5) 76%,rgba(6,18,43,.74) 100%),
  radial-gradient(120% 100% at 50% 50%,transparent 46%,rgba(5,12,28,.7) 100%)}
.paciente .envoltorio{position:relative;z-index:4;display:grid;grid-template-columns:1fr .82fr;
  gap:clamp(30px,5vw,70px);align-items:center}
.paciente h2{margin:18px 0 18px}
.paciente ul{margin-top:28px;display:grid;gap:14px}
.paciente li{display:flex;gap:12px;font-size:.98rem;color:var(--tenue)}
.paciente li b{color:var(--blanco);font-weight:600}
.tilde{flex:0 0 22px;height:22px;border-radius:7px;background:rgba(143,169,255,.22);color:var(--claro);
  display:grid;place-items:center;font-size:.7rem;font-weight:700;margin-top:3px}

.telefono{width:284px;margin-inline:auto;border-radius:32px;padding:14px;position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  border:1px solid var(--vidrio-borde);backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.25)}
.telefono .pantalla{background:rgba(5,12,28,.55);border-radius:22px;padding:18px;
  border:1px solid rgba(255,255,255,.1)}
.telefono .saludo{font-size:.78rem;color:var(--apagado)}
.telefono .nombre{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.tarjeta-turno{border-radius:16px;padding:16px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14)}
.tarjeta-turno .r{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--apagado);font-weight:600}
.tarjeta-turno .fecha{font-size:.82rem;color:var(--tenue);margin-top:9px}
.tarjeta-turno .hora{font-size:2.2rem;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.tarjeta-turno .btn{margin-top:14px;width:100%;background:var(--electrico);color:#fff;
  border-radius:100px;padding:10px;font-weight:600;font-size:.88rem}
.tarjeta-turno .btn.hueca{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.aviso{
  position:absolute;top:30px;left:50%;width:248px;transform:translateX(-50%);z-index:3;
  border-radius:16px;padding:12px 14px;font-size:.82rem;
  background:rgba(8,20,46,.9);border:1px solid rgba(143,169,255,.3);backdrop-filter:blur(14px);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.9);
  animation:avisar 6s var(--ease) infinite;
}
.aviso b{display:block;font-size:.78rem;font-weight:700;color:var(--claro);margin-bottom:2px}
.aviso small{display:block;color:var(--apagado);margin-top:4px}
@keyframes avisar{
  0%,8%{opacity:0;transform:translate(-50%,-22px) scale(.96)}
  16%,60%{opacity:1;transform:translate(-50%,0) scale(1)}
  72%,100%{opacity:0;transform:translate(-50%,-14px) scale(.98)}
}

/* ---------------- precio ---------------- */
.precio{position:relative;padding:14vh 0;background:var(--fondo);
  border-top:1px solid rgba(255,255,255,.07);text-align:center}
.precio .luz{background:radial-gradient(46% 48% at 50% 30%,rgba(43,84,245,.22),transparent 70%)}
.precio .envoltorio{position:relative;z-index:4}
.precio h2{margin:18px 0 16px}
.precio .bajada{margin-inline:auto}
.precio .rotulo{margin-inline:auto}
.caja-precio{
  margin:clamp(30px,4vw,48px) auto 0;max-width:460px;border-radius:26px;padding:34px;text-align:left;
  background:linear-gradient(165deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  border:1px solid var(--vidrio-borde);backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.22);
}
.caja-precio .monto{font-size:3.4rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.caja-precio .monto span{font-size:1rem;font-weight:500;color:var(--apagado);letter-spacing:0}
.caja-precio ul{margin:24px 0 26px;display:grid;gap:12px}
.caja-precio li{display:flex;gap:11px;font-size:.94rem;color:var(--tenue)}
.caja-precio li b{color:var(--blanco);font-weight:600}
.caja-precio .letra-chica{font-size:.78rem;color:var(--apagado);margin-top:14px;text-align:center}

/* ---------------- cierre ---------------- */
.cierre{position:relative;padding:16vh 0;background:var(--profundo);
  border-top:1px solid rgba(255,255,255,.07);text-align:center;overflow:hidden}
.cierre .luz{background:
  radial-gradient(52% 60% at 50% 100%,rgba(43,84,245,.34),transparent 70%),
  linear-gradient(180deg,rgba(5,12,28,.86) 0%,rgba(5,12,28,.7) 40%,rgba(5,12,28,.92) 100%),
  radial-gradient(120% 96% at 50% 46%,transparent 40%,rgba(5,12,28,.8) 100%)}
.cierre .envoltorio{position:relative;z-index:4}
.cierre h2{margin-bottom:18px}
.cierre .bajada{margin-inline:auto}
.cierre .acciones{display:flex;gap:10px;justify-content:center;margin-top:30px;flex-wrap:wrap}

.pie{position:relative;z-index:4;background:var(--fondo);padding:46px var(--pad) 40px;
  border-top:1px solid rgba(255,255,255,.08)}
.pie .envoltorio{display:flex;align-items:center;justify-content:space-between;gap:14px 30px;
  flex-wrap:wrap;font-size:.86rem;color:var(--tenue)}
.pie .legal{color:rgba(246,248,255,.4)}
.pie nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pie nav a{color:rgba(246,248,255,.55);transition:color .25s var(--ease)}
.pie nav a:hover{color:var(--blanco)}

/* ---------------- aparición al hacer scroll ---------------- */
.aparece{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.aparece.visible{opacity:1;transform:none}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){
  .hero .envoltorio,.paciente .envoltorio{grid-template-columns:1fr;gap:44px}
  .escena{height:380px}
  .papelito{display:none}
}
@media (max-width:820px){
  :root{--pad:20px;--r:20px;--marco:8px}
  .hamburguesa{display:grid}
  .menu{position:absolute;top:68px;left:var(--pad);right:var(--pad);z-index:11;
    flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:18px;
    background:rgba(8,20,46,.97);border:1px solid rgba(255,255,255,.14);
    box-shadow:0 22px 50px -24px rgba(0,0,0,.95);
    opacity:0;visibility:hidden;translate:0 -10px;
    transition:opacity .35s var(--ease),translate .35s var(--ease),visibility .35s}
  .menu.abierto{opacity:1;visibility:visible;translate:0 0}
  .menu a{padding:13px 15px;border-radius:12px;font-size:.98rem}
  .barra .boton{display:none}
  .hero{padding:120px 0 80px}
  .momento{grid-template-columns:1fr;gap:16px;padding:30px 0}
  .momento .reloj{position:static;display:flex;align-items:baseline;gap:12px}
  .momento .reloj small{margin:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .aparece{opacity:1;transform:none}
  .turno{opacity:1;transform:none}
  .papelito{display:none}
  .aviso{opacity:1;transform:translateX(-50%)}
}