/* ==========================================================================
   JUEGOS.CSS — Sección de Juegos Corporativos (Mundo 2)
   TODO configurable vía CSS variables. Defaults sensatos incorporados.
   ========================================================================== */

/* ════════════════════════════════════════════════════════════════════════
   CONTENEDOR DE SECCIÓN M2
   ════════════════════════════════════════════════════════════════════════ */
.m2-juegos-section{
  padding:3rem 1.5rem 2rem;
  position:relative;
  z-index:5;
  text-align:center;
}
.m2-juegos-section[data-activo="false"]{ display:none !important; }
.m2-juegos-eyebrow{
  font-family:var(--juego-eyebrow-font,'Cinzel'),serif;
  font-size:var(--juego-eyebrow-size,.65rem);
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--juego-accent,#C9A84C);
  opacity:.85;
  margin-bottom:.75rem;
  display:inline-block;
}
.m2-juegos-titulo{
  font-family:var(--juego-titulo-font,'Cormorant Garamond'),serif;
  font-size:var(--juego-titulo-size, clamp(1.4rem, 4vw, 2rem));
  color:var(--juego-titulo,#F5EDD8);
  margin:0 0 .6rem 0;
  line-height:1.2;
  font-weight:400;
}
.m2-juegos-subtitulo{
  font-family:var(--juego-sub-font,'Comfortaa'),'Cormorant Garamond',serif;
  font-size:var(--juego-sub-size,.95rem);
  color:var(--juego-sub,#9B8E7A);
  margin:0 auto 1.6rem;
  max-width:420px;
  line-height:1.5;
}

/* Botón principal */
.m2-juegos-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:1rem 2.2rem;
  background:var(--juego-btn-fondo, transparent);
  border:1px solid var(--juego-btn-borde,#C9A84C);
  color:var(--juego-btn-texto,#C9A84C);
  font-family:var(--juego-btn-font,'Cinzel'),serif;
  font-size:.68rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .3s;
  position:relative;overflow:hidden;text-decoration:none;
  margin-top:.4rem;
}
.m2-juegos-btn::before{
  content:"";position:absolute;inset:0;
  background:var(--juego-btn-borde,#C9A84C);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s cubic-bezier(.65,.05,.36,1);z-index:-1;
}
.m2-juegos-btn[data-efecto="fill"]:hover::before{transform:scaleX(1);}
.m2-juegos-btn[data-efecto="fill"]:hover{color:var(--juego-btn-fondo-hover,#0a0608);}
.m2-juegos-btn[data-efecto="glow"]:hover{
  box-shadow:0 0 25px var(--juego-btn-borde,#C9A84C);
  text-shadow:0 0 8px var(--juego-btn-borde,#C9A84C);
}
.m2-juegos-btn[data-efecto="expand"]:hover{
  letter-spacing:.5em;padding-left:2.5rem;padding-right:2.5rem;
}
.m2-juegos-btn-icon{font-size:1rem;}
.m2-juegos-btn-ya-jugado{
  margin-top:.8rem;
  font-family:var(--juego-sub-font,'Comfortaa'),'Cormorant Garamond',serif;
  font-style:italic;
  color:var(--juego-accent,#C9A84C);opacity:.75;font-size:.85rem;
  display:none;
}
.m2-juegos-btn-ya-jugado.visible{display:block;}

/* ════════════════════════════════════════════════════════════════════════
   OVERLAY
   ════════════════════════════════════════════════════════════════════════ */
.juego-overlay{
  position:fixed;inset:0;z-index:300;
  background-color:var(--juego-overlay-fondo, rgba(10,6,8,.97));
  background-image:var(--juego-overlay-imagen, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  backdrop-filter:blur(var(--juego-overlay-blur, 14px));
  -webkit-backdrop-filter:blur(var(--juego-overlay-blur, 14px));
  display:none;align-items:flex-start;justify-content:center;
  padding:2rem 1rem;overflow-y:auto;opacity:0;transition:opacity .4s;
}
/* Veil sobre la imagen del overlay (si hay), para que el contenido
   siga siendo legible sobre imágenes claras/complejas */
.juego-overlay[data-has-image="true"]::before{
  content:"";
  position:absolute;inset:0;
  background:var(--juego-overlay-veil, rgba(10,6,8,.75));
  z-index:0;
  pointer-events:none;
}
.juego-overlay.active{display:flex;opacity:1;}
.juego-overlay-inner{
  width:100%;max-width:540px;margin:auto;position:relative;
  display:flex;flex-direction:column;gap:1.2rem;
  animation:juegoSlideUp .5s cubic-bezier(.22,1,.36,1) both;
  z-index:1;
}
@keyframes juegoSlideUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}
.juego-close{
  position:absolute;top:-.5rem;right:0;
  background:none;border:1px solid rgba(201,168,76,.35);
  color:var(--juego-accent,#C9A84C);
  width:36px;height:36px;border-radius:50%;
  cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;z-index:10;
}
.juego-close:hover{
  background:var(--juego-accent,#C9A84C);color:#0a0608;
  transform:rotate(90deg);
}

/* ════════════════════════════════════════════════════════════════════════
   IDENTIFICACIÓN
   ════════════════════════════════════════════════════════════════════════ */
.juego-ident{
  background:var(--ident-card-fondo, linear-gradient(145deg, rgba(26,13,23,.85), rgba(10,6,8,.85)));
  border:1px solid var(--ident-card-borde, rgba(201,168,76,.2));
  border-radius:12px;padding:2rem 1.5rem;text-align:center;
}
.juego-ident h3{
  font-family:var(--ident-titulo-font,'Cormorant Garamond'),serif;
  font-size:var(--ident-titulo-size, 1.5rem);
  color:var(--ident-titulo-color,#F5EDD8);
  margin:0 0 .3rem 0;font-weight:400;
}
.juego-ident p{
  font-family:var(--ident-texto-font,'Cormorant Garamond'),serif;
  color:var(--ident-texto-color,#9B8E7A);font-style:italic;
  margin:0 0 1.3rem;font-size:var(--ident-texto-size, .95rem);line-height:1.4;
}
.juego-input{
  width:100%;padding:.85rem 1rem;
  background:var(--ident-input-fondo, rgba(10,6,8,.6));
  border:1px solid var(--ident-input-borde, rgba(201,168,76,.25));
  border-radius:6px;
  color:var(--ident-input-color,#F5EDD8);
  font-family:var(--ident-input-font,'Cormorant Garamond'),serif;
  font-size:1rem;outline:none;transition:border-color .2s;box-sizing:border-box;
}
.juego-input:focus{border-color:var(--juego-accent,#C9A84C);}
.juego-input::placeholder{color:rgba(245,237,216,.3);font-style:italic;}
.juego-ident-actions{
  display:flex;flex-direction:column;gap:.6rem;margin-top:1.2rem;
}
.juego-btn-primary, .juego-btn-secondary{
  padding:.9rem 1rem;border-radius:6px;
  font-family:var(--juego-btn-font,'Cinzel'),serif;
  font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;
  cursor:pointer;transition:all .25s;border:1px solid;
}
.juego-btn-primary{
  background:var(--btn-primary-fondo, var(--juego-accent,#C9A84C));
  color:var(--btn-primary-texto,#0a0608);
  border-color:var(--btn-primary-borde, var(--juego-accent,#C9A84C));
}
.juego-btn-primary:hover{
  box-shadow:0 0 20px var(--juego-accent,#C9A84C);transform:translateY(-1px);
}
.juego-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.juego-btn-secondary{
  background:var(--btn-secondary-fondo, transparent);
  color:var(--btn-secondary-texto,#9B8E7A);
  border-color:var(--btn-secondary-borde, rgba(155,142,122,.3));
}
.juego-btn-secondary:hover{color:#F5EDD8;border-color:#9B8E7A;}

/* ════════════════════════════════════════════════════════════════════════
   HEADER DE JUEGO
   ════════════════════════════════════════════════════════════════════════ */
.juego-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:.85rem 1.2rem;
  background:var(--juego-header-fondo, rgba(26,13,23,.6));
  background-image:var(--juego-header-imagen, none);
  background-size:cover;
  background-position:center;
  background-blend-mode:overlay;
  border:1px solid var(--juego-header-borde, rgba(201,168,76,.15));
  border-radius:8px;
  position:relative;
  overflow:hidden;
}
/* capa tenue sobre la imagen para asegurar legibilidad cuando hay imagen */
.juego-header[data-has-image="true"]::before{
  content:"";
  position:absolute;inset:0;
  background:var(--juego-header-overlay, rgba(10,6,8,.55));
  z-index:0;
  pointer-events:none;
}
.juego-header > *{ position:relative; z-index:1; }
.juego-header-item{display:flex;flex-direction:column;gap:.15rem;}
.juego-header-label{
  font-family:var(--juego-header-label-font,'Cinzel'),serif;
  font-size:.5rem;letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--juego-header-label-color, var(--juego-sub,#9B8E7A));
}
.juego-header-value{
  font-family:var(--juego-header-value-font,'Cormorant Garamond'),serif;
  font-size:1.1rem;
  color:var(--juego-header-value-color, var(--juego-accent,#C9A84C));
  font-weight:600;
}
.juego-progress{
  height:var(--juego-progress-height, 4px);
  background:var(--juego-progress-track, rgba(201,168,76,.1));
  border-radius:2px;overflow:hidden;margin-top:.4rem;
}
.juego-progress-bar{
  height:100%;
  background:var(--juego-progress-fill, var(--juego-accent,#C9A84C));
  transition:width .4s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 8px var(--juego-progress-glow, var(--juego-accent,#C9A84C));
}

/* ════════════════════════════════════════════════════════════════════════
   CARD BASE DE JUEGO
   ════════════════════════════════════════════════════════════════════════ */
.juego-card{
  background:var(--card-fondo, linear-gradient(145deg, rgba(26,13,23,.85), rgba(10,6,8,.85)));
  border:1px solid var(--card-borde, rgba(201,168,76,.2));
  border-radius:12px;padding:1.8rem 1.3rem;
  animation:juegoFadeIn .5s cubic-bezier(.22,1,.36,1);
}
@keyframes juegoFadeIn{
  from{opacity:0;transform:translateY(15px);}
  to{opacity:1;transform:translateY(0);}
}

/* ════════════════════════════════════════════════════════════════════════
   TRIVIA
   ════════════════════════════════════════════════════════════════════════ */
.trivia-pregunta-num{
  font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.35em;
  text-transform:uppercase;color:var(--juego-accent,#C9A84C);
  opacity:.8;margin-bottom:.8rem;
}
.trivia-pregunta-texto{
  font-family:var(--trivia-pregunta-font,'Cormorant Garamond'),serif;
  font-size:var(--trivia-pregunta-size, 1.3rem);
  color:var(--trivia-pregunta-color,#F5EDD8);
  line-height:1.4;margin:0 0 1.4rem 0;font-weight:400;
}
.trivia-opciones{display:grid;grid-template-columns:1fr;gap:.6rem;}
@media (min-width:480px){.trivia-opciones{grid-template-columns:1fr 1fr;}}
.trivia-opcion{
  padding:.95rem 1rem;
  background:var(--trivia-opcion-fondo, rgba(10,6,8,.5));
  border:1px solid var(--trivia-opcion-borde, rgba(201,168,76,.2));
  border-radius:8px;
  color:var(--trivia-opcion-color,#F5EDD8);
  font-family:var(--trivia-opcion-font,'Cormorant Garamond'),serif;
  font-size:var(--trivia-opcion-size, 1rem);
  cursor:pointer;transition:all .2s;text-align:left;line-height:1.3;
  display:flex;align-items:center;gap:.7rem;min-height:52px;
}
.trivia-opcion:hover:not([disabled]){
  border-color:var(--juego-accent,#C9A84C);
  background:rgba(201,168,76,.08);transform:translateX(2px);
}
.trivia-opcion-letra{
  display:inline-flex;width:26px;height:26px;border-radius:50%;
  background:rgba(201,168,76,.15);
  align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.05em;
  color:var(--juego-accent,#C9A84C);flex-shrink:0;transition:all .2s;
}
.trivia-opcion:hover .trivia-opcion-letra{
  background:var(--juego-accent,#C9A84C);color:#0a0608;
}
.trivia-opcion.correcta{
  border-color:var(--color-acierto,#4ade80);
  background:rgba(74,222,128,.12);animation:triviaPop .35s;
}
.trivia-opcion.correcta .trivia-opcion-letra{
  background:var(--color-acierto,#4ade80);color:#0a0608;
}
.trivia-opcion.incorrecta{
  border-color:var(--color-fallo,#f87171);
  background:rgba(248,113,113,.12);animation:triviaShake .4s;
}
.trivia-opcion.incorrecta .trivia-opcion-letra{
  background:var(--color-fallo,#f87171);color:#0a0608;
}
.trivia-opcion[disabled]{cursor:not-allowed;opacity:.55;}
.trivia-opcion[disabled].correcta,.trivia-opcion[disabled].incorrecta{opacity:1;}
@keyframes triviaPop{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}
@keyframes triviaShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
.trivia-feedback{
  margin-top:1rem;padding:.9rem 1rem;border-radius:6px;
  font-family:var(--trivia-feedback-font,'Cormorant Garamond'),serif;
  font-size:.95rem;line-height:1.4;display:none;
}
.trivia-feedback.visible{display:block;animation:juegoFadeIn .3s;}
.trivia-feedback.acierto{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);color:#a5e8c0;}
.trivia-feedback.fallo{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:#f8baba;}
.trivia-footer{margin-top:1.1rem;display:flex;justify-content:flex-end;}

/* ════════════════════════════════════════════════════════════════════════
   RESULTADO FINAL
   ════════════════════════════════════════════════════════════════════════ */
.juego-resultado{
  background:var(--resultado-fondo, linear-gradient(145deg, rgba(26,13,23,.9), rgba(10,6,8,.9)));
  border:1px solid var(--resultado-borde, rgba(201,168,76,.3));
  border-radius:12px;padding:2.2rem 1.5rem;text-align:center;
}
.juego-resultado-emoji{
  font-size:3.5rem;margin-bottom:.5rem;display:block;
  animation:juegoPop .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes juegoPop{0%{opacity:0;transform:scale(.4);}100%{opacity:1;transform:scale(1);}}
.juego-resultado-titulo{
  font-family:var(--resultado-titulo-font,'Cormorant Garamond'),serif;
  font-size:var(--resultado-titulo-size, 1.6rem);
  color:var(--resultado-titulo-color,#F5EDD8);
  margin:.3rem 0 .5rem;font-weight:500;
}
.juego-resultado-score{
  font-family:var(--resultado-score-font,'Cinzel'),serif;
  font-size:var(--resultado-score-size, 2.5rem);
  color:var(--resultado-score-color, var(--juego-accent,#C9A84C));
  letter-spacing:.05em;margin:.5rem 0;font-weight:600;
  text-shadow:0 0 20px rgba(201,168,76,.3);
}
.juego-resultado-detalle{
  font-family:var(--resultado-detalle-font,'Cormorant Garamond'),serif;
  color:var(--resultado-detalle-color,#9B8E7A);
  font-size:1rem;font-style:italic;margin:0 0 1.4rem;
}
.juego-resultado-actions{display:flex;flex-direction:column;gap:.6rem;}

/* ════════════════════════════════════════════════════════════════════════
   HOT SEAT
   ════════════════════════════════════════════════════════════════════════ */
.hotseat-pregunta{
  font-family:var(--hotseat-pregunta-font,'Cormorant Garamond'),serif;
  font-size:var(--hotseat-pregunta-size, 1.35rem);
  color:var(--hotseat-pregunta-color,#F5EDD8);
  line-height:1.4;margin:0 0 1.2rem 0;font-style:italic;
  text-align:center;padding:0 .5rem;
}
.hotseat-textarea{
  width:100%;min-height:120px;padding:1rem;
  background:var(--hotseat-ta-fondo, rgba(10,6,8,.6));
  border:1px solid var(--hotseat-ta-borde, rgba(201,168,76,.25));
  border-radius:8px;
  color:var(--hotseat-ta-color,#F5EDD8);
  font-family:var(--hotseat-ta-font,'Cormorant Garamond'),serif;
  font-size:1.05rem;line-height:1.5;resize:vertical;outline:none;
  box-sizing:border-box;transition:border-color .2s;
}
.hotseat-textarea:focus{border-color:var(--juego-accent,#C9A84C);}
.hotseat-textarea::placeholder{color:rgba(245,237,216,.25);font-style:italic;}
.hotseat-counter{
  text-align:right;font-family:'Cinzel',serif;font-size:.55rem;
  letter-spacing:.25em;color:var(--juego-sub,#9B8E7A);margin-top:.3rem;
}
.hotseat-anonimo-toggle{
  display:flex;align-items:center;gap:.5rem;margin-top:.8rem;
  cursor:pointer;color:var(--juego-sub,#9B8E7A);
  font-family:var(--hotseat-ta-font,'Cormorant Garamond'),serif;
  font-size:.9rem;font-style:italic;user-select:none;
}
.hotseat-anonimo-toggle input{accent-color:var(--juego-accent,#C9A84C);cursor:pointer;}

/* ════════════════════════════════════════════════════════════════════════
   MURO DE RECONOCIMIENTOS
   ════════════════════════════════════════════════════════════════════════ */
.muro-intro{
  font-family:var(--muro-intro-font,'Cormorant Garamond'),serif;
  font-size:var(--muro-intro-size, 1rem);
  color:var(--muro-intro-color,#9B8E7A);
  font-style:italic;text-align:center;margin:0 0 1rem;line-height:1.5;
}
.muro-form-group{margin-bottom:.8rem;}
.muro-label{
  display:block;
  font-family:var(--muro-label-font,'Cinzel'),serif;
  font-size:.55rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--muro-label-color,#9B8E7A);margin-bottom:.35rem;
}

/* ════════════════════════════════════════════════════════════════════════
   ¿QUIÉN DIJO ESTO?
   ════════════════════════════════════════════════════════════════════════ */
.quien-frase{
  background:var(--quien-frase-fondo, rgba(10,6,8,.5));
  border-left:3px solid var(--juego-accent,#C9A84C);
  padding:1rem 1.2rem;margin:0 0 1.2rem;
  font-family:var(--quien-frase-font,'Cormorant Garamond'),serif;
  font-size:var(--quien-frase-size, 1.15rem);
  color:var(--quien-frase-color,#F5EDD8);
  font-style:italic;line-height:1.5;border-radius:0 6px 6px 0;
}
.quien-frase::before{
  content:"“";font-size:2rem;color:var(--juego-accent,#C9A84C);
  line-height:0;vertical-align:-.2em;margin-right:.15em;opacity:.7;
}

/* ════════════════════════════════════════════════════════════════════════
   LOADING / ERRORES
   ════════════════════════════════════════════════════════════════════════ */
.juego-loading{
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
  padding:2rem;color:var(--juego-sub,#9B8E7A);
  font-family:'Cormorant Garamond',serif;font-style:italic;
}
.juego-spinner{
  width:36px;height:36px;border:2px solid rgba(201,168,76,.18);
  border-top-color:var(--juego-accent,#C9A84C);border-radius:50%;
  animation:juegoSpin .8s linear infinite;
}
@keyframes juegoSpin{to{transform:rotate(360deg);}}
.juego-error{
  padding:.9rem 1rem;background:rgba(248,113,113,.1);
  border:1px solid rgba(248,113,113,.3);border-radius:6px;
  color:#f8baba;font-family:'Cormorant Garamond',serif;
  font-size:.9rem;text-align:center;margin-top:.7rem;display:none;
}
.juego-error.visible{display:block;}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:420px){
  .juego-overlay{padding:1rem .8rem;}
  .juego-card, .juego-ident, .juego-resultado{padding:1.4rem 1rem;}
  .trivia-pregunta-texto{font-size:1.15rem;}
  .hotseat-pregunta{font-size:1.15rem;}
  .juego-resultado-score{font-size:2rem;}
}
@media (prefers-reduced-motion:reduce){
  .juego-overlay-inner, .juego-card, .juego-resultado-emoji,
  .trivia-opcion.correcta, .trivia-opcion.incorrecta{
    animation-duration:.2s !important;
  }
}