/* =========================================================
   CRISTAL LILA (estilo iPhone / Liquid Glass)
   Aurora de color detrás + burbujas de cristal + tarjetas translúcidas
   ========================================================= */
:root{
  --glass:linear-gradient(135deg, rgba(255,255,255,.66), rgba(234,231,240,.34));
  --glass-strong:linear-gradient(135deg, rgba(255,255,255,.88), rgba(240,238,244,.6));
  --glass-edge:rgba(255,255,255,.75);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(30,28,45,.08), 0 18px 40px -22px rgba(30,28,50,.35);
  --ease:cubic-bezier(.22,.8,.24,1);
}
html{background:#E5E3E9;}
body{background:transparent; position:relative; overflow-x:hidden;}
main,.toast{position:relative; z-index:2;}

/* Aurora: manchas de color vivas que se ven a través del cristal */
.aurora{position:fixed; inset:-18vmax; z-index:0; pointer-events:none; filter:blur(60px); opacity:.8;}
.aurora i{position:absolute; border-radius:50%;}
.aurora i:nth-child(1){width:55vmax; height:55vmax; left:52%; top:2%; background:radial-gradient(circle, #CFC8DE 0%, rgba(207,200,222,0) 66%); animation:dr1 26s var(--ease) infinite alternate;}
.aurora i:nth-child(2){width:46vmax; height:46vmax; left:4%; top:26%; background:radial-gradient(circle, #D6D4DC 0%, rgba(214,212,220,0) 68%); animation:dr2 32s var(--ease) infinite alternate;}
.aurora i:nth-child(3){width:40vmax; height:40vmax; left:58%; top:58%; background:radial-gradient(circle, #C9B6EE 0%, rgba(201,182,238,0) 68%); animation:dr3 29s var(--ease) infinite alternate, respira 16s ease-in-out infinite;}
.aurora i:nth-child(4){width:34vmax; height:34vmax; left:18%; top:72%; background:radial-gradient(circle, #9B7FD6 0%, rgba(155,127,214,0) 66%); opacity:.7; animation:dr2 36s var(--ease) infinite alternate-reverse;}
@keyframes dr1{to{transform:translate3d(-8vmax,6vmax,0) scale(1.08);}}
@keyframes dr2{to{transform:translate3d(7vmax,-5vmax,0) scale(1.12);}}
@keyframes dr3{to{transform:translate3d(-6vmax,-7vmax,0) scale(.94);}}

/* Barra superior: píldora de cristal */
.top{position:sticky; top:calc(10px + env(safe-area-inset-top,0px)); z-index:15; margin:calc(12px + env(safe-area-inset-top,0px)) auto 22px; max-width:840px; width:calc(100% - 28px);
  padding:10px 10px 10px 18px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);}
.brand img{height:32px;}
.top a.back{background:rgba(255,255,255,.55); border:1px solid var(--glass-edge); padding:8px 15px; border-radius:999px; font-weight:600; color:var(--brand); box-shadow:inset 0 1px 0 #fff;}

/* Tarjeta principal: cristal translúcido (se ve la aurora y las burbujas detrás) */
.card{position:relative; background:linear-gradient(140deg, rgba(255,255,255,.58), rgba(232,229,238,.30)); border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.25), 0 34px 80px -40px rgba(30,28,50,.45);
  -webkit-backdrop-filter:blur(26px) saturate(170%); backdrop-filter:blur(26px) saturate(170%);
  border-radius:32px; animation:rise .6s var(--ease) both;}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(165deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 26%);}
.card > *{position:relative;}
@keyframes rise{from{opacity:0; transform:translateY(16px) scale(.985); filter:blur(4px);}to{opacity:1; transform:none; filter:none;}}

/* Burbujas internas: cada bloque es su propia pieza de cristal */
.perc,.lock,.pattern,.gap-read div,.area-card,.lever,.resume,.cat-note,.low-list li{
  background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);}
.perc{border-radius:20px;}
.perc.set{background:var(--glass-strong); border-color:rgba(255,255,255,.95); box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px rgba(64,41,120,.35), 0 14px 26px -18px rgba(30,28,50,.45);}
.low-list li{border-radius:16px; padding:12px 14px; margin-bottom:8px; border-bottom:1px solid var(--glass-edge);}
.locks{background:linear-gradient(150deg, rgba(255,255,255,.4), rgba(232,229,238,.28)); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); border-radius:26px;}
.lock{border-radius:18px;}
.area-card .lvl{background:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.8);}
.focus{background:rgba(255,255,255,.75);}

/* Botones */
.btn-dark{background:linear-gradient(170deg,#5a40a3 0%,#33226e 50%,#1a1240 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 6px rgba(0,0,0,.25), 0 14px 30px -12px rgba(64,41,120,.8);}
.btn-dark:hover{background:linear-gradient(170deg,#6a4fb8 0%,#3b2a7c 50%,#20164f 100%);}
.btn-dark:disabled{background:linear-gradient(170deg,#5a40a3,#33226e); box-shadow:none;}
.btn-line{background:var(--glass); border-color:var(--glass-edge); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.cta .btn-line{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35);}
.btn{transition:background .25s, transform .2s var(--ease), box-shadow .25s;}
.btn:hover{transform:translateY(-1px);} .btn:active{transform:scale(.97);}

.badge{color:#1D6E4B; background:rgba(63,181,126,.14); border-color:rgba(63,181,126,.3); box-shadow:none;}
.areas-chips span{background:var(--glass); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 #fff, 0 6px 14px -10px rgba(64,41,120,.4);}
.bar{background:rgba(255,255,255,.5); box-shadow:inset 0 1px 2px rgba(64,41,120,.15);}
.bar i{background:linear-gradient(90deg,#8B7FB0,#402978);}
.opt,.pill{background:var(--glass); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 0 #fff, 0 6px 14px -10px rgba(64,41,120,.45);}
.opt:hover,.pill:hover{border-color:rgba(139,111,203,.6);}
.opt.on,.pill.on{background:linear-gradient(170deg,#4a3389,#0F1A33); border-color:rgba(255,255,255,.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 20px -10px rgba(15,26,51,.8);}
.field input[type=text],.field input[type=email],.field input[type=tel]{background:rgba(255,255,255,.7); border:1px solid var(--glass-edge); box-shadow:inset 0 1px 3px rgba(64,41,120,.12);}
.field input:focus{border-color:#8B6FCB; box-shadow:0 0 0 4px rgba(139,111,203,.18);}
.q,.nav-q{border-top-color:rgba(91,63,160,.12);}

/* Arte de la intro */
.intro-art{animation:none;}

/* Bloques oscuros con brillo */
.cta,.rep-cover,.pressure{background:linear-gradient(150deg,#121826 0%,#1A2132 60%,#272B42 100%); border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 28px 60px -30px rgba(15,26,51,.85);}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background:rgba(255,255,255,.92);} .top{background:rgba(255,255,255,.95);}
}
@media (max-width:720px){
  .top{width:calc(100% - 20px); padding:8px 8px 8px 14px;}
  .brand span{display:none;}
  .card{border-radius:26px;}
}
@media (prefers-reduced-motion:reduce){ .aurora i,.card{animation:none !important;} }
@media print{
  .aurora{display:none !important;}
  .card{background:#fff !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; animation:none; border:none;}
  .card::before{display:none;}
  .perc,.lock,.pattern,.gap-read div,.area-card,.lever,.low-list li{box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; border:1px solid #DDD5EA;}
}

/* Reflejo lila que pasa de vez en cuando sobre el cristal */
@keyframes respira{0%,100%{opacity:.15;}50%{opacity:.75;}}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3;
  background:linear-gradient(112deg, transparent 38%, rgba(179,157,219,.16) 46%, rgba(255,255,255,.38) 50%, rgba(179,157,219,.16) 54%, transparent 62%);
  background-size:260% 100%; background-position:130% 0; animation:reflejo 15s ease-in-out 3s infinite;}
@keyframes reflejo{0%,72%{background-position:130% 0;}88%,100%{background-position:-30% 0;}}
.card.dark{background:linear-gradient(150deg,#121826 0%,#1A2132 60%,#272B42 100%); color:#E9ECF5; border-color:rgba(255,255,255,.12);}

/* Informe: guardar y decidir */
.save-note{margin-top:16px; display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:14px 18px; border-radius:18px; font-size:14.5px;
  background:var(--glass); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);}
.save-note button{border:none; cursor:pointer; font:inherit; font-weight:600; font-size:14px; color:#fff; padding:10px 18px; border-radius:999px; background:linear-gradient(170deg,#5a40a3,#2b1c5e);}
.decide{padding:28px; border-radius:24px; background:var(--glass-strong); border:1px solid var(--glass-edge); box-shadow:var(--glass-shadow);}
.decide h3{font-size:26px;}
.decide ol{margin:14px 0 0; padding-left:22px;}
.decide li{font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.4; margin-bottom:10px;}
@media (prefers-reduced-motion:reduce){ .card::after{animation:none; display:none;} .aurora i{animation:none !important;} }
@media print{ .card::after,.save-note{display:none !important;} .decide{background:#fff; box-shadow:none; border:1px solid #DDD5EA;} }

/* Resultados e informe: tarjeta muy alta. Sin desenfoque de fondo (evita fallos de dibujo en celulares) */
#s-res.card{-webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(160deg, rgba(250,249,252,.94), rgba(240,238,244,.9));}
#s-res.card::after{display:none;}