/* ==========================================================================
   Portal de Paciente — portada previa al login, v2 (Fase BH, 16-oct-2026)
   Lógica "Duolingo": pocas palabras, personajes grandes que actúan, botones
   con relieve, fichas 3D flotantes, login en modal. Todo bajo #login-screen
   con prefijo .pp- (no toca consentimiento ni la app).
   ========================================================================== */
#login-screen{
  --rose:#D12F6E; --rose-d:#A3204F; --rose-l:#FFE3EC; --rose-m:#F7B6CB;
  --ink:#4A3A42; --mute:#7A6670; --line:#E5E5E5; --navy:#0E2747; --navy-2:#173E6E;
  --amber:#FFB800; --amber-d:#D18F00; --teal:#14B8A6; --teal-d:#0E8F81; --violet:#8B6CF0; --violet-d:#6347CC; --blue:#3F74D6; --blue-d:#2A57AD;
  display:block; padding:0; min-height:100vh; background:#fff; color:var(--ink);
  font-family:'Nunito','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; overflow-x:hidden;
}
#login-screen *{box-sizing:border-box;}
#login-screen img{display:block; max-width:100%; height:auto;}
#login-screen h1,#login-screen h2,#login-screen p{margin:0;}

/* ---------- botones con relieve ---------- */
#login-screen .pp-btn,#login-screen .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:auto; height:50px; padding:0 22px; margin:0;
  border:0; border-radius:12px; cursor:pointer; text-decoration:none; font-family:inherit; font-weight:800; font-size:15px;
  letter-spacing:.8px; text-transform:uppercase; color:#fff; background:var(--rose); box-shadow:0 4px 0 var(--rose-d);
  transition:transform .08s, box-shadow .08s, filter .15s;
}
#login-screen .pp-btn:hover,#login-screen .btn:hover{filter:brightness(1.07);}
#login-screen .pp-btn:active,#login-screen .btn:active{transform:translateY(4px); box-shadow:0 0 0 var(--rose-d);}
#login-screen .pp-btn:focus-visible,#login-screen .btn:focus-visible,.pp-x:focus-visible{outline:3px solid var(--rose-m); outline-offset:3px;}
#login-screen .pp-btn.sec{background:#fff; color:var(--rose); border:2px solid var(--line); box-shadow:0 4px 0 var(--line);}
#login-screen .pp-btn.sec:active{box-shadow:0 0 0 var(--line);}
#login-screen .pp-btn.wht{background:#fff; color:var(--navy); box-shadow:0 4px 0 #BFCFE8;}
#login-screen .pp-btn.wht:active{box-shadow:0 0 0 #BFCFE8;}
#login-screen .pp-btn.sm{height:42px; padding:0 18px; font-size:14px;}
#login-screen .btn{width:100%; margin-top:18px;}
#login-screen .btn:disabled{opacity:.6; cursor:default; transform:none; box-shadow:0 4px 0 var(--rose-d);}

/* ---------- barra superior ---------- */
.pp-nav{position:sticky; top:0; z-index:30; background:#fff; border-bottom:2px solid var(--line);}
.pp-nav-in{max-width:1080px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; justify-content:space-between;}
.pp-logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--rose);}
.pp-logo img{width:38px; height:38px; border-radius:11px;}
.pp-logo b{font-size:28px; font-weight:900; letter-spacing:-.5px; line-height:1;}
.pp-logo small{font-size:12px; font-weight:800; color:var(--mute); letter-spacing:.4px; text-transform:uppercase; padding:3px 8px; border-radius:8px; background:#F4F4F4;}

/* ---------- hero ---------- */
.pp-hero{max-width:1080px; margin:0 auto; padding:24px 20px 28px; min-height:calc(100vh - 64px - 64px); display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center;}
.pp-hero-txt{text-align:center;}
.pp-hero h1{font-size:clamp(26px,3.2vw,34px); line-height:1.25; font-weight:900; color:var(--ink); margin-bottom:26px;}
.pp-hero-btns{display:flex; flex-direction:column; gap:14px; width:min(330px,100%); margin:0 auto;}
.pp-hero-btns .pp-btn{width:100%;}

/* cast (entra cayendo y rebota) */
.pp-cast{position:relative; width:min(540px,100%); aspect-ratio:540/450; margin:0 auto;}
.pp-slab{position:absolute; left:4%; right:4%; bottom:3%; height:24%; background:var(--rose-l); border:3px solid var(--rose-m); border-radius:30px; box-shadow:0 12px 0 var(--rose-m);}
.pp-ch{position:absolute; left:var(--l); bottom:var(--b); width:var(--w); z-index:var(--z,1); cursor:pointer; -webkit-tap-highlight-color:transparent;}
.pp-ch .pp-jp,.pp-ch .pp-jp img{width:100%;}
.pp-ch img{transform-origin:50% 100%; user-select:none; -webkit-user-drag:none;}
.pp-say{position:absolute; left:50%; bottom:98%; transform:translateX(-50%); background:#fff; border:2px solid var(--line); border-radius:14px; padding:7px 12px; font-weight:800; font-size:14px; color:var(--ink); white-space:nowrap; box-shadow:0 3px 0 var(--line); animation:pp-say 1.8s ease forwards; pointer-events:none; z-index:9;}
.pp-say:after{content:""; position:absolute; left:50%; bottom:-8px; width:12px; height:12px; background:#fff; border-right:2px solid var(--line); border-bottom:2px solid var(--line); transform:translateX(-50%) rotate(45deg);}
@keyframes pp-say{0%{opacity:0; transform:translateX(-50%) translateY(8px) scale(.8);} 12%{opacity:1; transform:translateX(-50%) scale(1);} 80%{opacity:1;} 100%{opacity:0; transform:translateX(-50%) translateY(-6px);}}

/* estado previo a la animación solo si hay JS */
.pp-js .pp-ch{opacity:0;}
.pp-go .pp-ch{animation:pp-tumble .95s cubic-bezier(.3,1.45,.5,1) both; animation-delay:var(--d,0s);}
.pp-go .pp-ch img{animation:pp-bob 3.4s ease-in-out 1.4s infinite alternate;}
.pp-go .pp-ch:nth-child(even) img{animation-duration:3.9s; animation-delay:1.7s;}
@keyframes pp-tumble{0%{opacity:0; transform:translate(var(--fx,0),var(--fy,-130%)) rotate(var(--fr,-35deg)) scale(.35);} 55%{opacity:1; transform:translate(0,6%) rotate(calc(var(--fr,-35deg)*-.12)) scale(1.07);} 80%{transform:translate(0,-2%) rotate(0) scale(.98);} 100%{opacity:1; transform:none;}}
@keyframes pp-bob{from{transform:translateY(0) rotate(-1deg);} to{transform:translateY(-7px) rotate(1.2deg);}}
.pp-jp.pp-jump{animation:pp-jump .7s cubic-bezier(.3,1.3,.5,1);}
@keyframes pp-jump{0%{transform:scale(1,1);} 18%{transform:scale(1.1,.88);} 45%{transform:translateY(-26px) scale(.94,1.08);} 72%{transform:translateY(0) scale(1.07,.92);} 100%{transform:scale(1,1);}}

/* ---------- tira de funciones ---------- */
.pp-strip{border-top:2px solid var(--line); border-bottom:2px solid var(--line); background:#fff;}
.pp-strip-in{max-width:1080px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; justify-content:space-between; gap:6px; overflow-x:auto; scrollbar-width:none;}
.pp-strip-in::-webkit-scrollbar{display:none;}
.pp-strip-in span{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:13px; letter-spacing:.8px; text-transform:uppercase; color:var(--mute); white-space:nowrap; padding:0 14px; position:relative;}
.pp-strip-in span+span:before{content:""; position:absolute; left:-4px; top:50%; height:26px; width:2px; margin-top:-13px; background:var(--line);}
.pp-strip-in i{width:30px; height:26px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:#fff; background:var(--c,var(--rose));}

/* ---------- escenas ---------- */
.pp-scene{max-width:1000px; margin:0 auto; padding:76px 20px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;}
.pp-scene.rev .pp-art{order:2;}
.pp-txt h2{font-size:clamp(34px,4.6vw,48px); line-height:1.1; font-weight:900; color:var(--rose); letter-spacing:-.4px; margin-bottom:14px;}
.pp-txt p{font-size:17px; line-height:24px; color:var(--mute); font-weight:600; max-width:440px;}
.pp-art{position:relative; width:100%; max-width:480px; height:420px; margin:0 auto;}
.pp-pj{height:calc(var(--h,300px) * var(--k,1)); position:absolute; bottom:0; z-index:2; cursor:pointer; -webkit-tap-highlight-color:transparent;}
#login-screen .pp-pj img{height:100%; width:auto; max-width:none;}
.pp-pj .pp-jp{height:100%;}
.pp-pop{opacity:0;}
.pp-in .pp-pop{animation:pp-pop .75s cubic-bezier(.3,1.5,.5,1) both; animation-delay:var(--d,0s);}
@keyframes pp-pop{0%{opacity:0; transform:scale(.55) translateY(26px);} 100%{opacity:1; transform:none;}}
#login-screen .pp-in .pp-pj img{animation:pp-bob 3.6s ease-in-out 1s infinite alternate;}
.pp-no-js .pp-pop{opacity:1;}

/* tarjetas de interfaz de juguete */
.pp-ui{position:absolute; z-index:3; background:#fff; border:2px solid var(--line); border-radius:18px; box-shadow:0 5px 0 var(--line); padding:12px 14px; font-weight:800; color:var(--ink); font-size:14px;}
.pp-ui small{display:block; font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--mute); margin-bottom:4px;}
.pp-ui b{display:block; font-size:19px; line-height:1.15;}
.pp-chip{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; font-weight:800; color:var(--teal-d); background:#DDF7F3; border-radius:999px; padding:4px 10px;}
.pp-prog{height:14px; border-radius:99px; background:#EEE; overflow:hidden; margin-bottom:12px;}
.pp-prog i{display:block; height:100%; width:30%; background:var(--rose); border-radius:99px; position:relative;}
.pp-prog i:after{content:""; position:absolute; left:6px; right:6px; top:3px; height:4px; border-radius:9px; background:rgba(255,255,255,.35);}
.pp-in .pp-prog i{animation:pp-fill 6s ease-in-out infinite;}
@keyframes pp-fill{0%{width:18%;} 40%{width:62%;} 80%,100%{width:92%;}}
.pp-opt{border:2px solid var(--line); border-bottom-width:4px; border-radius:12px; padding:9px 12px; margin-top:8px; font-size:14px; color:var(--ink);}
.pp-in .pp-opt{animation:pp-sel 6s infinite;}
.pp-in .pp-opt:nth-of-type(2){animation-delay:2s;}
.pp-in .pp-opt:nth-of-type(3){animation-delay:4s;}
@keyframes pp-sel{0%,6%{border-color:var(--line); background:#fff; color:var(--ink);} 10%,30%{border-color:var(--rose); background:var(--rose-l); color:var(--rose-d);} 36%,100%{border-color:var(--line); background:#fff; color:var(--ink);}}
.pp-task{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14.5px;}
.pp-task+.pp-task{border-top:2px solid #F3F3F3;}
.pp-task i{width:24px; height:24px; border-radius:8px; border:2px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-size:12px; color:transparent; flex:none;}
.pp-in .pp-task i{animation:pp-tick 7s infinite;}
.pp-in .pp-task:nth-child(2) i{animation-delay:1.6s;}
.pp-in .pp-task:nth-child(3) i{animation-delay:3.2s;}
@keyframes pp-tick{0%,8%{background:#fff; border-color:var(--line); color:transparent; transform:scale(1);} 12%{transform:scale(1.25);} 16%,70%{background:var(--teal); border-color:var(--teal-d); color:#fff; transform:scale(1);} 78%,100%{background:#fff; border-color:var(--line); color:transparent;}}
.pp-chat{display:flex; flex-direction:column; gap:9px; width:240px;}
.pp-b{max-width:88%; border-radius:16px; padding:9px 13px; font-size:14px; font-weight:700; line-height:1.3; opacity:0;}
.pp-b.me{align-self:flex-end; background:var(--rose); color:#fff; border-bottom-right-radius:4px;}
.pp-b.yo{background:#F2F2F2; color:var(--ink); border-bottom-left-radius:4px;}
.pp-b.dots{background:#F2F2F2; border-bottom-left-radius:4px; display:flex; gap:4px; padding:12px 14px; align-self:start; width:max-content;}
.pp-b.dots i{width:7px; height:7px; border-radius:50%; background:#9a8a92; animation:pp-dot 1s infinite;}
.pp-b.dots i:nth-child(2){animation-delay:.15s;} .pp-b.dots i:nth-child(3){animation-delay:.3s;}
@keyframes pp-dot{0%,100%{transform:translateY(0); opacity:.5;} 50%{transform:translateY(-4px); opacity:1;}}
.pp-rep{display:grid; align-self:flex-start; max-width:88%;}
.pp-rep>*{grid-area:1/1; max-width:100%;}
.pp-in .pp-b.me{animation:pp-bub 9s infinite .2s;}
.pp-in .pp-b.dots{animation:pp-bubd 9s infinite .2s;}
.pp-in .pp-b.yo{animation:pp-bub2 9s infinite .2s;}
@keyframes pp-bub{0%{opacity:0; transform:translateY(10px) scale(.9);} 5%,92%{opacity:1; transform:none;} 100%{opacity:0;}}
@keyframes pp-bub2{0%,24%{opacity:0; transform:translateY(8px) scale(.92);} 28%,92%{opacity:1; transform:none;} 100%{opacity:0;}}
@keyframes pp-bubd{0%,12%{opacity:0;} 14%,23%{opacity:1; transform:none;} 24%,100%{opacity:0;}}

/* fichas 3D flotantes */
.pp-fl{position:absolute; z-index:1; will-change:transform; transform:translateY(var(--py,0px));}
.pp-fl .pp-pop{display:block;}
.pp-tile{width:var(--s,60px); height:var(--s,60px); border-radius:calc(var(--s,60px)*.3); background:var(--c); box-shadow:0 6px 0 var(--cd); color:#fff; display:flex; align-items:center; justify-content:center; font-size:calc(var(--s,60px)*.44); transform:rotate(var(--r,0deg));}
.pp-in .pp-tile{animation:pp-float 4.2s ease-in-out infinite alternate; animation-delay:var(--fd,0s);}
@keyframes pp-float{from{transform:translateY(0) rotate(var(--r,0deg));} to{transform:translateY(-12px) rotate(calc(var(--r,0deg) + 6deg));}}

/* ---------- banda Insight Hub (oscura) ---------- */
.pp-hubband{position:relative; background:var(--navy); color:#fff; overflow:hidden;}
.pp-hubband-in{max-width:1000px; margin:0 auto; padding:84px 20px 72px; display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center;}
.pp-hubband .pp-art{height:380px;}
.pp-hubband .pp-pj{left:50%; margin-left:-125px; height:350px;}
.pp-hub-txt{text-align:left;}
.pp-hub-kicker{font-weight:800; font-size:13px; letter-spacing:1.6px; text-transform:uppercase; color:#9CC2FF; margin-bottom:12px;}
#login-screen .pp-hub-logo{height:52px; width:auto; margin-bottom:16px;}
.pp-hub-txt p{font-size:17px; line-height:24px; color:#CFE0FA; font-weight:600; max-width:420px; margin-bottom:24px;}

/* ---------- cierre con colina ---------- */
.pp-final{text-align:center; position:relative; overflow:hidden; padding-top:84px;}
.pp-final h2{font-size:clamp(38px,6vw,64px); line-height:1.05; font-weight:900; color:var(--rose); letter-spacing:-.8px; margin-bottom:26px; padding:0 20px;}
.pp-hill{position:relative; height:420px; margin-top:6px;}
.pp-hill:before{content:""; position:absolute; left:-12%; right:-12%; top:210px; bottom:-300px; background:var(--rose); border-radius:50% 50% 0 0 / 100% 100% 0 0;}
.pp-row{position:absolute; left:50%; bottom:128px; transform:translateX(-50%); width:min(940px,100%); height:260px;}
.pp-row .pp-ch{bottom:0;}
.pp-foot{background:var(--rose); color:#fff; text-align:center; padding:6px 20px 36px; font-weight:700; font-size:14px; line-height:2;}
.pp-foot a{color:#fff; font-weight:800; text-decoration:none; opacity:.95;}
.pp-foot a:hover{text-decoration:underline;}

/* ---------- modal (login / sin acceso) ---------- */
.pp-modal{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px;}
.pp-modal[hidden]{display:none;}
.pp-modal-bg{position:absolute; inset:0; background:rgba(40,16,30,.55); opacity:0; transition:opacity .2s;}
.pp-sheet{position:relative; width:min(420px,100%); max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:24px; padding:30px 26px 24px; box-shadow:0 24px 60px -16px rgba(0,0,0,.4); transform:translateY(24px) scale(.96); opacity:0; transition:transform .28s cubic-bezier(.3,1.4,.5,1), opacity .2s;}
.pp-open .pp-modal-bg{opacity:1;} .pp-open .pp-sheet{transform:none; opacity:1;}
.pp-x{position:absolute; right:12px; top:12px; width:38px; height:38px; border-radius:12px; border:0; background:transparent; font-size:26px; line-height:1; color:var(--mute); cursor:pointer;}
.pp-x:hover{background:#F4F4F4;}
#login-screen .pp-sheet-pj{height:112px; width:auto; margin:-6px auto 6px;}
.pp-sheet h2{font-size:26px; font-weight:900; text-align:center; color:var(--ink); margin-bottom:4px;}
.pp-sheet .sub{text-align:center; font-size:15px; font-weight:600; color:var(--mute); margin-bottom:18px;}
#login-screen label{display:block; font-size:12.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--mute); margin:14px 0 6px;}
#login-screen input[type=email],#login-screen input[type=password]{width:100%; height:50px; padding:0 14px; border:2px solid var(--line); background:#F7F7F7; border-radius:12px; font-size:16px; font-weight:700; color:var(--ink); font-family:inherit; outline:none; transition:.12s;}
#login-screen input:focus{border-color:var(--rose); background:#fff; box-shadow:0 0 0 4px rgba(209,47,110,.14);}
#login-screen .form-error{border-radius:12px; font-weight:700;}
.pp-note{margin-top:16px; text-align:center; font-size:13.5px; font-weight:700; color:var(--mute);}
.pp-note button{background:none; border:0; padding:0; font:inherit; color:var(--rose); font-weight:800; cursor:pointer; text-decoration:underline;}
body.pp-lock{overflow:hidden;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .pp-hero{grid-template-columns:1fr; min-height:0; padding-top:8px; gap:6px;}
  .pp-hero h1{font-size:26px; margin-bottom:20px;}
  .pp-scene,.pp-hubband-in{grid-template-columns:1fr; gap:6px; padding-top:44px; padding-bottom:44px; text-align:center;}
  .pp-scene.rev .pp-art{order:0;}
  .pp-txt p,.pp-hub-txt p{margin-left:auto; margin-right:auto;}
  .pp-hub-txt{text-align:center;}
  #login-screen .pp-hub-logo{margin-left:auto; margin-right:auto;}
  .pp-art{height:360px;}
  .pp-hubband .pp-art{height:320px;}
  .pp-hubband .pp-pj{height:300px; margin-left:-107px;}
  .pp-ui{transform-origin:top right;}
}
@media (max-width:560px){
  .pp-art{--k:.8;}
  .pp-scene .pp-ui{top:auto !important; bottom:4px; right:0 !important;}
  .pp-art.tall{height:430px;}
  .pp-scene .pp-art.tall .pp-ui{top:0 !important; bottom:auto;}
  .pp-scene .pp-pj[style*="left:158px"]{left:118px !important;}
  .pp-logo small{display:none;}
  .pp-logo b{font-size:25px;}
  .pp-strip-in{justify-content:flex-start;}
  .pp-art{height:330px;}
  .pp-ui{padding:10px 12px; font-size:13px;}
  .pp-ui b{font-size:16px;}
  .pp-chat{width:200px;}
  .pp-b{font-size:13px; padding:8px 11px;}
  .pp-hill{height:330px;}
  .pp-hill:before{top:150px;}
  .pp-row{bottom:96px; height:190px;}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .pp-js .pp-ch,.pp-pop,.pp-b{opacity:1 !important;}
  #login-screen *,#login-screen *:before,#login-screen *:after{animation:none !important; transition:none !important;}
  .pp-b.dots{display:none;}
}

/* ---------- elenco del cierre: cae al entrar en pantalla ---------- */
.pp-go .pp-ch.late{animation:none; opacity:0;}
.pp-go .pp-ch.late img{animation:none;}
.pp-go .pp-final.pp-in .pp-ch.late{animation:pp-tumble .95s cubic-bezier(.3,1.45,.5,1) both; animation-delay:var(--d,0s);}
.pp-go .pp-final.pp-in .pp-ch.late img{animation:pp-bob 3.6s ease-in-out 1.4s infinite alternate;}