/* ==================================================================
   Komunicas · capa comun
   Se carga despues del estilo de cada pagina: trae las fuentes propias,
   ajusta la paleta al lila del audifono del logo y agrega lo que todas
   las paginas comparten (logo, transiciones, movimiento).
   ================================================================== */

/* Fuentes propias, servidas desde el sitio: no dependen de Google y cargan
   aunque el wifi del salon este lento. El titulo es Big Shoulders en su peso
   mas negro; cualquier peso que pida la pagina cae en ese. */
@font-face{font-family:"Kom Titulo"; src:url("/fuentes/kom-titulo.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; size-adjust:112%}
@font-face{font-family:"Kom Texto"; src:url("/fuentes/kom-texto.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap}
@font-face{font-family:"Kom Texto"; src:url("/fuentes/kom-texto-italica.woff2") format("woff2");
  font-weight:300 900; font-style:italic; font-display:swap}

:root{
  --tit:"Kom Titulo","Arial Narrow",Impact,sans-serif;
  --txt:"Kom Texto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fondo:#F4F0FA; --alza:#ECE6F7; --chip:#E7E0F5;
  --tinta:#1F0B36; --indigo:#1A0830;
  --lila:#6B55B5; --aro:rgba(107,85,181,.34);
  --brillo:radial-gradient(62% 38% at 50% -6%,rgba(142,124,195,.22),transparent 72%);
  --punto:#E9A20F;
  --logo:url("/img/komunicas-negro.svg");
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#120424; --alza:#241042; --chip:#2A1747;
    --tinta:#F3EEFB; --indigo:#F3EEFB;
    --lila:#B9A8E8; --aro:rgba(185,168,232,.42);
    --brillo:radial-gradient(62% 38% at 50% -6%,rgba(185,168,232,.18),transparent 72%);
    --punto:#FFCF5C;
    --logo:url("/img/komunicas-blanco.svg");
  }
}
:root[data-theme="dark"]{
  --fondo:#120424; --alza:#241042; --chip:#2A1747;
  --tinta:#F3EEFB; --indigo:#F3EEFB;
  --lila:#B9A8E8; --aro:rgba(185,168,232,.42);
  --brillo:radial-gradient(62% 38% at 50% -6%,rgba(185,168,232,.18),transparent 72%);
  --punto:#FFCF5C;
  --logo:url("/img/komunicas-blanco.svg");
}

/* El logo de verdad, en todas las paginas. */
.logo-k{display:inline-block; width:9.4rem; max-width:100%; aspect-ratio:7600/1760;
  background:var(--logo) left center/contain no-repeat; vertical-align:middle}
.wm{background-image:var(--logo) !important}
span.wm{display:inline-block; vertical-align:middle}

/* Las paginas pasan de una a otra con un fundido corto en vez de un pantallazo blanco. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* Contestar se siente: la buena salta un poco, la mala tiembla. */
@keyframes k-pop{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes k-tiembla{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.op.bien,.pal.bien,.op[data-est="bien"]{animation:k-pop .42s cubic-bezier(.3,1.6,.5,1)}
.op.mal,.op[data-est="mal"]{animation:k-tiembla .38s ease}

/* Boton flotante de WhatsApp (solo telefonos, y nunca mientras se juega). */
.k-wa{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:30;
  width:56px; height:56px; border-radius:50%; display:none; place-items:center;
  background:#1FA855; color:#fff; box-shadow:0 12px 26px -10px rgba(0,0,0,.45); text-decoration:none}
.k-wa svg{width:28px; height:28px}
@media (max-width:720px){ .k-wa{display:grid} }
body.jugando .k-wa{display:none}

/* Fotos a pantalla completa */
.k-visor{position:fixed; inset:0; z-index:60; background:rgba(8,2,18,.94); display:grid; place-items:center; padding:16px}
.k-visor img{max-width:100%; max-height:calc(100vh - 110px); border-radius:14px; box-shadow:0 30px 60px -20px #000}
.k-visor .k-cerrar,.k-visor .k-prev,.k-visor .k-next{position:absolute; border:0; border-radius:50%; width:48px; height:48px;
  background:rgba(255,255,255,.12); color:#fff; font:700 1.4rem/1 var(--txt); cursor:pointer}
.k-visor .k-cerrar{top:calc(14px + env(safe-area-inset-top,0px)); right:14px}
.k-visor .k-prev{left:14px; top:50%} .k-visor .k-next{right:14px; top:50%}
.k-visor p{position:absolute; bottom:calc(18px + env(safe-area-inset-bottom,0px)); left:16px; right:16px; margin:0; text-align:center; color:#D9CFF0; font:500 .92rem/1.4 var(--txt)}

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .op.bien,.pal.bien,.op[data-est="bien"],.op.mal,.op[data-est="mal"]{animation:none}
}

/* Audio (audio.js): el boton de escuchar y el selector US / UK.
   El boton mide 44px para que se toque con el pulgar sin apuntar. */
.oir{display:inline-grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--aro); background:var(--alza); color:var(--lila); cursor:pointer; padding:0;
  vertical-align:middle; transition:background .15s, color .15s, transform .1s}
.oir svg{width:22px; height:22px}
.oir:active{transform:scale(.94)}
.oir.sonando{background:var(--lila); color:var(--fondo); border-color:var(--lila)}
.oir:focus-visible,.acento:focus-visible{outline:3px solid var(--aro); outline-offset:2px}
@media (hover:hover){ .oir:hover{border-color:var(--lila)} }
.acento{display:inline-flex; align-items:center; gap:2px; flex:none; border:1.5px solid var(--aro); border-radius:999px;
  background:transparent; padding:3px; cursor:pointer; font:700 .72rem/1 var(--txt); letter-spacing:.06em; color:var(--tinta)}
.acento span{padding:6px 8px; border-radius:999px; opacity:.55}
.acento .ac-on{background:var(--lila); color:var(--fondo); opacity:1}
.oirfila{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:.55rem 0 .1rem}
.oirfila .que{font-weight:700; color:var(--tinta)}
.audio-aviso{position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:70;
  background:var(--indigo); color:var(--fondo); padding:10px 16px; border-radius:12px; font:600 .9rem/1.3 var(--txt);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5); max-width:calc(100vw - 32px)}
@media (prefers-reduced-motion: reduce){ .oir{transition:none} .oir:active{transform:none} }