.juego-page { --juego-papel: #F3EBCB; --juego-carta: #FCF7E3; --juego-fondo1: #EFE6C2; --juego-fondo2: #E9DFB7; }

.juego { display: grid; gap: clamp(28px, 4vw, 44px); padding-block: 20px clamp(32px, 5vw, 56px); }
.juego .crumbs { margin: 0; }


html:not(.juego-on) .quiz__grilla { display: none; }
.juego-on .quiz__sinjs { display: none; }
.quiz__sinjs { justify-self: center; display: grid; justify-items: center; gap: 10px; max-width: 30rem; text-align: center; font-weight: 500; }
.quiz__sinjs p { margin: 0; }
.quiz__sinjs .btn { margin-top: 6px; }

.quiz { position: relative; display: grid; gap: 18px; padding: 28px max(16px, 3vw) 36px; border-radius: 28px; background: var(--juego-papel); color: var(--sabor-color-brand-burgundy); overflow: hidden; }
.quiz__marca { margin: 0; text-align: center; font: 600 clamp(2.1rem, 8.2vw, 4.4rem)/0.92 var(--blog-font-ui); letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; color: var(--sabor-color-brand-burgundy); }
.quiz__wm { display: inline-block; margin: 0 0.04em; vertical-align: -0.02em; color: var(--blog-signature); }
.quiz__wm svg { display: block; width: auto; height: 0.9em; }
.quiz__semana { margin: -6px 0 0; text-align: center; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sabor-color-text-secondary); }
.desafio { justify-self: center; max-width: 30rem; margin: 0; padding: 11px 18px; border-radius: 16px; background: var(--sabor-color-brand-yellow); font-weight: 600; line-height: 1.3; text-align: center; }
.desafio.gano { background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); }
.quiz__grilla { display: grid; grid-template-columns: 1fr minmax(280px, 350px) 1fr; gap: 28px; align-items: center; }
.quiz__intro { justify-self: end; max-width: 16rem; margin: 0; text-align: center; }

.quiz__pregunta { margin: 0; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.quiz__sub { margin: 6px 0 0; font-size: 0.76rem; line-height: 1.35; color: var(--sabor-color-text-secondary); }


.mazo { position: relative; justify-self: center; width: 100%; max-width: 350px; }
.carta { border: 2px solid var(--sabor-color-brand-burgundy); border-radius: 22px; background: var(--juego-carta); box-shadow: 0 14px 30px rgb(88 2 27 / 0.16); }
.carta--fondo1, .carta--fondo2 { position: absolute; inset: 0; }
.carta--fondo1 { transform: rotate(-5deg) translate(-8px, 8px); background: var(--juego-fondo1); }
.carta--fondo2 { transform: rotate(4deg) translate(8px, 10px); background: var(--juego-fondo2); }
.carta--frente {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 490px; padding: 22px 18px 14px;
  transform: rotate(var(--giro, -1.5deg));
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.42s ease;
  touch-action: manipulation;
}
.mazo.terminado .carta--frente { min-height: 0; padding-bottom: 20px; }
.carta--frente.sale { transform: translate(120%, -40px) rotate(18deg); opacity: 0; }
.carta--frente.sale-izq { transform: translate(-120%, -40px) rotate(-18deg); opacity: 0; }
.carta--frente.entra { transform: translateY(18px) scale(0.94) rotate(-3deg); opacity: 0; transition: none; }
.carta__num { margin: 0; text-align: center; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.carta__frase { flex: 1; display: grid; place-items: center; min-height: 6em; margin: 0; text-align: center; font: 600 clamp(1.25rem, 4.6vw, 1.5rem)/1.1 var(--blog-font-ui); text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.carta__frase > span { display: block; }
.glosa-junto { white-space: nowrap; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }


.glosa {
  padding: 0 0.06em; border: 0; border-radius: 4px; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; cursor: help;
  text-decoration: underline dotted var(--blog-signature); text-decoration-thickness: 0.13em; text-underline-offset: 0.2em;
  transition: background 0.15s ease;
}
.glosa:hover, .glosa[aria-expanded="true"] { background: rgb(255 238 108 / 0.75); }

.persona { cursor: pointer; text-decoration-style: solid; text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
.explica .persona { font-weight: 600; color: var(--sabor-color-brand-burgundy); }
.glosa-pop {
  position: absolute; z-index: 5; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 10px;
  width: min(300px, calc(100% - 16px)); padding: 10px 12px 10px 10px;
  border: 2px solid var(--sabor-color-brand-burgundy); border-radius: 16px; background: var(--sabor-color-brand-cream);
  box-shadow: 0 12px 26px rgb(88 2 27 / 0.22); text-align: left; color: var(--sabor-color-brand-burgundy);
  transform-origin: var(--flecha, 50%) 100%; animation: glosa-entra 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.glosa-pop.abajo { transform-origin: var(--flecha, 50%) 0; animation-name: glosa-entra-abajo; }
.glosa-pop::after {
  content: ""; position: absolute; left: calc(var(--flecha, 50%) - 7px); bottom: -8px; width: 12px; height: 12px;
  border-right: 2px solid var(--sabor-color-brand-burgundy); border-bottom: 2px solid var(--sabor-color-brand-burgundy);
  background: var(--sabor-color-brand-cream); transform: rotate(45deg);
}
.glosa-pop.abajo::after { top: -8px; bottom: auto; transform: rotate(225deg); }
.glosa-pop__media { display: block; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: var(--juego-fondo1); }
.glosa-pop__media svg { display: block; width: 100%; height: 100%; }
.glosa-pop__txt { display: grid; gap: 3px; min-width: 0; font-size: 0.8rem; line-height: 1.32; }
.glosa-pop__txt p { margin: 0; }
.glosa-pop__t { padding-right: 18px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.glosa-pop__credito { font-size: 0.66rem; color: var(--sabor-color-text-secondary); }
.glosa-pop__credito a { color: inherit; text-underline-offset: 2px; }

.glosa-pop--persona { grid-template-columns: 72px minmax(0, 1fr); align-items: center; width: min(250px, calc(100% - 16px)); }
.glosa-pop__retrato { width: 72px; height: 96px; object-position: 50% 25%; }
.glosa-pop__cerrar {
  position: absolute; top: -13px; right: -13px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0 0 2px;
  border: 2px solid var(--sabor-color-brand-cream); border-radius: 50%; background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream);
  font-size: 1.2rem; line-height: 1;
}
.glosa-pop__papa { transform-box: fill-box; transform-origin: 50% 100%; animation: glosa-papa 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
@keyframes glosa-entra { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
@keyframes glosa-entra-abajo { from { opacity: 0; transform: translateY(-6px) scale(0.96); } }
@keyframes glosa-papa { from { opacity: 0; transform: translateY(-16px); } }
.opcion {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 54px; padding: 0 8px;
  border: 2px solid var(--sabor-color-brand-burgundy); border-radius: 14px; background: transparent; color: var(--sabor-color-brand-burgundy);
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.opcion:hover:not([disabled]) { background: rgb(88 2 27 / 0.06); }
.opcion:active:not([disabled]) { transform: scale(0.96); }
.opcion[disabled] { cursor: default; }
.opcion.correcta { background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); }
.opcion.errada { border-color: var(--blog-signature); background: var(--blog-signature); color: var(--sabor-color-brand-cream); }
.opcion.apagada { opacity: 0.4; }
.explica { display: grid; align-content: start; gap: 6px; min-height: 9em; font-size: 0.9rem; line-height: 1.38; text-align: center; color: var(--sabor-color-text-secondary); opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; }
.explica p { margin: 0; }
.respondida .explica { opacity: 1; transform: none; }

.explica__nota { font-size: 0.78rem; }
.explica b { color: var(--sabor-color-brand-burgundy); }
.explica a { color: var(--sabor-color-brand-burgundy); font-weight: 600; text-decoration-color: var(--blog-signature); text-underline-offset: 3px; }
.explica__fuente { font-size: 0.68rem; opacity: 0.85; }
.explica__fuente a { font-weight: 500; }
.carta__pie { display: grid; place-items: center; gap: 2px; min-height: 44px; }

.carta__reloj { width: min(220px, 70%); height: 3px; border-radius: 2px; overflow: hidden; background: var(--sabor-color-border-subtle); }
.carta__reloj i { display: block; height: 100%; background: var(--sabor-color-brand-burgundy); transform-origin: left; }

.carta__tiempo { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(220px, 70%); }
.carta__tiempo[hidden], .carta__aviso[hidden] { display: none; }
.carta__tiempo .carta__reloj { flex: 1; width: auto; }
.carta__seg { min-width: 1.4em; font-size: 0.74rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--sabor-color-text-secondary); }
.carta__aviso { margin: 0; font-size: 0.74rem; line-height: 1.3; text-align: center; color: var(--sabor-color-text-secondary); }

.carta__plato {
  position: absolute; z-index: 2; top: -18px; right: -10px; width: 96px; height: 72px; object-fit: cover;
  border: 3px solid var(--sabor-color-brand-cream); border-radius: 10px; background: var(--juego-fondo1);
  box-shadow: 0 8px 18px rgb(88 2 27 / 0.22); pointer-events: none;
  opacity: 0; transform: rotate(9deg) scale(0.8);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.carta__plato.ve { opacity: 1; transform: rotate(5deg); }
.siguiente { min-height: 44px; padding: 6px 12px; border: 0; background: none; color: var(--sabor-color-brand-burgundy); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--blog-signature); text-underline-offset: 5px; }


.final { display: grid; gap: 14px; text-align: center; }
.final__numero { margin: 0; font: 600 4.6rem/0.9 var(--blog-font-ui); letter-spacing: -0.03em; }
.final__punto { margin: -6px 0 0; font: 600 1.5rem/1 var(--blog-font-hand); color: var(--blog-signature); }
.final__duelo { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--sabor-color-brand-yellow); font-weight: 600; line-height: 1.3; }
.final__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.final__datos div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 10px 8px; border: 1.5px solid var(--sabor-color-border-subtle); border-radius: 14px; background: var(--sabor-color-brand-cream); }
.final__datos dt { font-size: 0.76rem; line-height: 1.25; color: var(--sabor-color-text-secondary); }
.final__datos dd { margin: 0; font: 600 1.6rem/1 var(--blog-font-ui); }
.sello { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--sabor-color-brand-yellow); font: 600 0.68rem/1.2 var(--blog-font-ui); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.final__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.final__botones button { min-height: 48px; padding: 11px 12px; border-radius: 14px; font-weight: 600; line-height: 1.2; }
.boton-lleno { border: 2px solid var(--sabor-color-brand-burgundy); background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); }
.boton-borde { border: 2px solid var(--sabor-color-brand-burgundy); background: transparent; color: var(--sabor-color-brand-burgundy); }
.final__copia { display: grid; gap: 6px; text-align: left; }
.final__copia p { margin: 0; font-size: 0.86rem; font-weight: 600; }
.final__copia textarea { width: 100%; min-height: 5.2em; padding: 10px 12px; resize: none; border: 1.5px solid var(--sabor-color-brand-burgundy); border-radius: 12px; background: var(--sabor-color-brand-cream); color: var(--sabor-color-brand-burgundy); font: 500 1rem/1.4 var(--blog-font-ui); }


.final__news { display: grid; gap: 8px; padding-top: 14px; border-top: 1.5px dashed rgb(88 2 27 / 0.25); text-align: left; }
.final__titulo { margin: 0; font-weight: 600; }
.final__news-txt { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--sabor-color-text-secondary); }
.final__news .btn { justify-self: start; white-space: normal; }
.final__campo { display: flex; border-bottom: 2px solid var(--sabor-color-brand-burgundy); }
.final__campo input { flex: 1; width: 0; min-width: 0; padding: 9px 0; border: 0; background: transparent; color: var(--sabor-color-brand-burgundy); font: 500 1rem/1.3 var(--blog-font-ui); }
.final__campo input::placeholder { color: rgb(88 2 27 / 0.5); }
.final__campo button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 0 9px 12px; border: 0; background: none; color: var(--sabor-color-brand-burgundy); font-weight: 600; white-space: nowrap; }
.final__campo .icon { width: 16px; height: 16px; }
.final__consiento { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; line-height: 1.35; color: var(--sabor-color-text-secondary); cursor: pointer; }
.final__consiento input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--sabor-color-brand-burgundy); }
.final__news .newsletter__msg, .final__news .newsletter__deck { margin: 0; font-size: 0.86rem; font-weight: 600; }


.medidor { display: grid; justify-items: center; justify-self: start; gap: 4px; text-align: center; }
.medidor__dial { width: 128px; height: 128px; overflow: visible; }
.medidor .dial__cara { transition: fill 0.4s ease; }
.medidor.leyenda .dial__cara { fill: var(--sabor-color-brand-yellow); }
.medidor .dial__lleno { transition: stroke-dashoffset 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.medidor .dial__aguja { transition: transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1); }
.medidor__aciertos { margin: 6px 0 0; font: 600 1.7rem/1 var(--blog-font-ui); text-transform: uppercase; }
.medidor__punto { margin: 0; font: 600 1.4rem/1 var(--blog-font-hand); color: var(--blog-signature); }
.medidor.pop .medidor__aciertos { animation: juego-pop 0.45s ease; }
.medidor.cae .medidor__aciertos { animation: juego-sacudon 0.45s ease; }
@keyframes juego-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes juego-sacudon { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }


.juego__como { display: grid; gap: 14px; max-width: 46rem; }
.juego__como-t { font-size: var(--blog-title-section); letter-spacing: -0.01em; }
.juego__pasos { display: grid; gap: 10px; padding-left: 1.4em; list-style: decimal; }
.juego__pasos li { padding-left: 4px; line-height: 1.45; }
.juego__pasos li::marker { font-weight: 600; }
.juego__pasos b { font-weight: 600; }
.juego__guardado { margin: 0; font-size: 0.9rem; color: var(--sabor-color-text-secondary); }


.final__datos div:only-child { grid-column: 1 / -1; }
.final__actual { justify-self: center; font-weight: 600; color: var(--sabor-color-brand-burgundy); text-underline-offset: 0.2em; }


.juego__mas { display: grid; gap: 12px; justify-items: start; max-width: 46rem; }
.juego__mas p { margin: 0; line-height: 1.45; }


.archivo { display: grid; gap: 18px; padding: 30px max(16px, 3vw) 38px; border-radius: 28px; background: var(--juego-papel); color: var(--sabor-color-brand-burgundy); }
.archivo__t { margin: 0; text-align: center; font: 600 clamp(2.2rem, 8vw, 4.2rem)/0.92 var(--blog-font-ui); letter-spacing: -0.02em; text-transform: uppercase; }
.archivo__bajada { justify-self: center; max-width: 36rem; margin: 0; text-align: center; line-height: 1.45; text-wrap: balance; }
.archivo__wm { display: inline-block; margin: 0 0.04em; vertical-align: -0.08em; color: var(--blog-signature); }
.archivo__wm svg { display: block; width: auto; height: 0.86em; }
.archivo__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; margin: 10px 0 0; padding: 0; list-style: none; }
.archivo__item { display: flex; }
.archivo__carta {
  flex: 1; display: grid; gap: 8px; align-content: start; padding: 20px 18px 16px;
  border: 2px solid var(--sabor-color-brand-burgundy); border-radius: 22px; background: var(--juego-carta);
  box-shadow: 0 12px 26px rgb(88 2 27 / 0.14); color: inherit; text-decoration: none;
  transform: rotate(var(--giro, 0deg)); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}
.archivo__carta:hover, .archivo__carta:focus-visible { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 34px rgb(88 2 27 / 0.2); }
.archivo__carta:focus-visible { outline: 3px solid var(--blog-signature); outline-offset: 3px; }
.archivo__carta--hoy { background: var(--sabor-color-brand-yellow); }
.archivo__ojo { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.archivo__fecha { font: 600 1.45rem/1.02 var(--blog-font-ui); letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.archivo__temas { font-size: 0.92rem; line-height: 1.4; color: var(--sabor-color-text-secondary); }
.archivo__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.86rem; font-weight: 600; }
.archivo__record { padding: 3px 10px; border-radius: 999px; background: var(--sabor-color-brand-burgundy); color: var(--sabor-color-brand-cream); }
.archivo__record[hidden] { display: none; }
.archivo__jugar { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; }
.archivo__jugar svg { width: 1em; height: 1em; }

@media (max-width: 760px) {
  .quiz { gap: 14px; padding-top: 22px; }
  .quiz__grilla { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .quiz__intro { order: 1; justify-self: center; max-width: 22rem; }
  .medidor { order: -1; justify-self: center; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; }
  .medidor__dial { grid-row: span 2; width: 84px; height: 84px; }
  .medidor__aciertos { align-self: end; justify-self: start; margin: 0; font-size: 1.35rem; }
  .medidor__punto { align-self: start; justify-self: start; }
  .carta--frente { min-height: 430px; }
  .carta__plato { width: 84px; height: 63px; right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .carta--frente, .opcion, .explica, .glosa, .medidor .dial__aguja, .medidor .dial__lleno, .medidor .dial__cara { transition: none; }
  .glosa-pop, .glosa-pop__papa { animation: none; }
  .carta__plato { transition: none; transform: rotate(5deg); }
  .medidor.pop .medidor__aciertos, .medidor.cae .medidor__aciertos { animation: none; }
  .archivo__carta { transition: none; }
}