/* =====================================================================
   SITIO — estilos de las piezas compartidas (assets/sitio.js)
   Banner de cookies · botón flotante de WhatsApp · aviso de Spotify
   Dos temas: .tema-dekid (Win98 / vaporwave) y .tema-yz (YOROZUYA)
   ===================================================================== */
:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --wa:#128c4a;            /* verde WhatsApp oscurecido: el ícono blanco llega a 4.3:1 */
  --wa-hondo:#0b5e31;
  --ck-alto:0px;
}

/* ---------- Banner de cookies ---------- */
.ck{
  position:fixed; z-index:400;
  left:max(16px, env(safe-area-inset-left, 0px)); bottom:max(16px, env(safe-area-inset-bottom, 0px));
  width:min(440px, calc(100vw - 32px));
  opacity:0; transform:translateY(16px);
  transition:opacity .18s ease, transform .18s ease;
}
.ck--visible{opacity:1; transform:none; transition:opacity .26s var(--ease-out), transform .26s var(--ease-out);}
.ck[hidden]{display:none;}
.ck-titulo{margin:0 0 6px;}
.ck-texto{margin:0 0 14px;}
.ck-link{text-decoration:underline; text-underline-offset:3px;}
.ck-panel{border:0; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:2px;}
.ck-panel[hidden]{display:none;}
.ck-op{display:flex; align-items:flex-start; gap:12px; padding:10px 4px; cursor:pointer; min-height:44px;}
.ck-op input{flex-shrink:0; width:22px; height:22px; margin:2px 0 0; cursor:pointer;}
.ck-op input:disabled{cursor:not-allowed;}
.ck-op span{flex:1; min-width:0; display:flex; flex-direction:column;}
.ck-op small{font-size:.86em; line-height:1.3;}
.ck-op em{font-style:normal; font-size:.82em; opacity:.75; padding-top:2px;}
.ck-acciones{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.ck-btn{min-height:44px; padding:8px 12px; border:0; cursor:pointer; font:inherit; line-height:1.1;}
.ck-btn--si{grid-column:1 / -1;}
.ck-btn:active{transform:scale(.97);}

/* tema dekid: ventana Win98 */
.tema-dekid .ck-ventana{background:var(--win-face); color:var(--win-text); padding:3px; box-shadow:var(--bevel-out), var(--drop);}
.tema-dekid .ck-barra{display:flex; align-items:center; gap:10px; height:24px; padding:0 3px 0 8px; background:linear-gradient(90deg, var(--vw-purple-deep), var(--vw-pink-deep));}
.tema-dekid .ck-barra-titulo{flex:1; font-family:var(--pixel); font-size:9px; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.3);}
.tema-dekid .ck-barra-btns{display:flex; gap:2px;}
.tema-dekid .ck-barra-btns i{width:16px; height:14px; background:var(--win-face); box-shadow:var(--bevel-btn);}
.tema-dekid .ck-cuerpo{background:var(--win-face-lighter); border:1px solid var(--win-face-dark); padding:16px 18px 18px; font-family:var(--retro); font-size:19px; line-height:1.3;}
.tema-dekid .ck-titulo{font-family:var(--pixel); font-size:12px; line-height:1.5; font-weight:400; color:var(--vw-purple-deep); text-transform:uppercase;}
.tema-dekid .ck-texto{color:var(--win-text-mute);}
.tema-dekid .ck-link{color:var(--win-text);}
.tema-dekid .ck-op{border-bottom:1px dashed var(--win-face-dark);}
.tema-dekid .ck-op b{font-weight:400; text-transform:uppercase; letter-spacing:.02em;}
.tema-dekid .ck-op small{color:var(--win-text-mute);}
.tema-dekid .ck-op input{accent-color:var(--vw-purple-deep);}
.tema-dekid .ck-btn{font-size:17px; text-transform:uppercase; letter-spacing:.03em; color:var(--win-text); background:var(--win-face); box-shadow:var(--bevel-btn), 2px 2px 0 rgba(0,0,0,.3);}
.tema-dekid .ck-btn--si{color:var(--vw-navy); text-shadow:0 1px 0 rgba(255,255,255,.35); background:linear-gradient(135deg, var(--vw-pink), var(--vw-purple));}
.tema-dekid .ck :focus-visible{outline:2px dotted var(--win-text); outline-offset:2px;}

/* tema yz: papel washi con sello */
.tema-yz .ck-ventana{background:var(--washi); color:var(--sumi); border-radius:3px; box-shadow:0 0 0 1px rgba(216,178,92,.6), 0 18px 50px rgba(0,0,0,.55);}
.tema-yz .ck-barra{display:none;}
.tema-yz .ck-cuerpo{padding:20px 20px 18px; font-family:var(--text); font-size:15px; line-height:1.55;}
.tema-yz .ck-titulo{font-family:var(--display); font-size:19px; font-weight:400; line-height:1.25;}
.tema-yz .ck-texto, .tema-yz .ck-op small{color:var(--washi-mute);}
.tema-yz .ck-link{color:#a8291a; font-weight:700;}
.tema-yz .ck-op{border-bottom:1px solid rgba(28,24,20,.14);}
.tema-yz .ck-op input{accent-color:var(--shu);}
.tema-yz .ck-btn{font-weight:700; font-size:15px; border-radius:999px; color:var(--sumi); background:transparent; box-shadow:inset 0 0 0 1.5px rgba(28,24,20,.55); transition:background-color .15s ease, transform .16s var(--ease-out);}
.tema-yz .ck-btn--si{color:#fff; background:var(--shu); box-shadow:none;}
.tema-yz .ck :focus-visible{outline:2px solid var(--shu); outline-offset:2px;}
@media (hover:hover) and (pointer:fine){
  .tema-yz .ck-btn:hover{background:rgba(28,24,20,.08);}
  .tema-yz .ck-btn--si:hover{background:#dd3d27;}
  .tema-dekid .ck-btn:hover{background:var(--win-face-light);}
  .tema-dekid .ck-btn--si:hover{background:linear-gradient(135deg, var(--vw-pink), var(--vw-purple));}
}

@media (max-width:560px){
  .ck{left:max(10px, env(safe-area-inset-left, 0px)); right:max(10px, env(safe-area-inset-right, 0px)); bottom:max(10px, env(safe-area-inset-bottom, 0px)); width:auto;}
  .tema-dekid .ck-cuerpo{font-size:18px; padding:14px 14px 16px;}
}

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante{
  position:fixed; z-index:390;
  right:max(16px, env(safe-area-inset-right, 0px)); bottom:max(16px, env(safe-area-inset-bottom, 0px));
  width:58px; height:58px; display:grid; place-items:center;
  color:#fff; background:var(--wa);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(calc(var(--ck-alto) * -1 + 8px)) scale(.9);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.wa-flotante--visible{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(calc(var(--ck-alto) * -1)) scale(1);
  transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s;
}
.wa-flotante--visible.wa-flotante--oculto{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(calc(var(--ck-alto) * -1 + 12px)) scale(.9);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.wa-flotante--visible:active{transform:translateY(calc(var(--ck-alto) * -1)) scale(.97); transition-duration:.1s;}
.wa-flotante svg{width:30px; height:30px;}
.wa-flotante .wa-tel{fill:var(--wa);}

.tema-dekid .wa-flotante{box-shadow:inset 1px 1px 0 rgba(255,255,255,.65), inset -1px -1px 0 rgba(0,0,0,.4), inset -2px -2px 0 var(--wa-hondo), 4px 4px 0 rgba(0,0,0,.4);}
.tema-dekid .wa-flotante:focus-visible{outline:2px dotted var(--vw-yellow); outline-offset:4px;}
.tema-yz .wa-flotante{border-radius:50%; box-shadow:0 0 0 2px var(--night), 0 0 0 3px rgba(216,178,92,.75), 0 10px 26px rgba(0,0,0,.5);}
.tema-yz .wa-flotante:focus-visible{outline:2px solid var(--neon-cyan); outline-offset:5px;}
@media (hover:hover) and (pointer:fine){
  .tema-dekid .wa-flotante--visible:hover{background:#17a35a;}
  .tema-yz .wa-flotante--visible:hover{box-shadow:0 0 0 2px var(--night), 0 0 0 3px var(--kin), 0 0 22px rgba(37,211,102,.45), 0 10px 26px rgba(0,0,0,.5);}
}

/* ---------- Aviso del reproductor de Spotify ---------- */
.embed{position:relative; min-height:352px; background:#121212;}
.embed-aviso{
  min-height:352px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:10px; padding:28px 22px; color:#f2ecff;
  background:radial-gradient(ellipse 80% 70% at 50% 0%, rgba(155,109,255,.28), transparent), #121212;
}
.embed-icono{width:44px; height:44px; color:#1ed760;}
.embed-titulo{font-family:var(--pixel); font-size:12px; line-height:1.6; text-transform:uppercase;}
.embed-texto{max-width:44ch; font-size:19px; line-height:1.3; color:#c3b6e6;}
.embed-acciones{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px;}
.embed-acciones .tbtn{min-height:44px; padding:6px 14px;}
@media (max-width:560px){ .embed, .embed-aviso{min-height:380px;} }

/* movimiento reducido: solo opacidad, sin desplazamientos */
@media (prefers-reduced-motion: reduce){
  .ck, .ck--visible{transform:none; transition:opacity .2s ease;}
  .wa-flotante, .wa-flotante--visible, .wa-flotante--visible.wa-flotante--oculto, .wa-flotante--visible:active{
    transform:translateY(calc(var(--ck-alto) * -1)); transition:opacity .2s ease, visibility 0s linear .2s;
  }
  .wa-flotante--visible{transition:opacity .2s ease, visibility 0s;}
  .ck-btn:active{transform:none;}
}