/* ============================================================
   TARJETA DEL JUEGO (2026-10-28) — «¿Cuánto os conocéis?» en la portada,
   en Hoy y tras una lectura de tarot sobre una relación. Lleva a /juego.
   Monocromo, dos anillos que se cruzan como en Compatibilidad.
   ============================================================ */
.juego-promo{
  position:relative;display:grid;gap:6px;max-width:620px;margin:0 auto;padding:22px 24px 20px;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--r-l);background:var(--card-gradient, var(--surface));
  color:var(--ink);text-decoration:none;text-align:left;
  transition:border-color var(--dur-micro, .2s) var(--ease-premium, ease),transform .25s ease;
}
.juego-promo:hover{border-color:rgba(var(--tx-rgb),.45);}
.juego-promo:active{transform:scale(.99);}
.juego-promo:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.juego-promo-k{font:500 10px/1.3 'Space Grotesk',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--tx-rgb),.6);}
.juego-promo-t{font:400 clamp(24px,5vw,30px)/1.15 'Fraunces',Georgia,serif;font-style:italic;}
.juego-promo-s{font:400 14.5px/1.5 'Space Grotesk',sans-serif;color:var(--muted);}
.juego-promo-cta{margin-top:8px;font:500 12px/1 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;}
.juego-promo-deco{position:absolute;right:22px;top:18px;width:40px;height:28px;opacity:.55;pointer-events:none;}
.juego-promo-deco circle{fill:none;stroke:var(--ink);stroke-width:3;}
#landing.chapters .juego-promo-sec,.juego-promo-sec{padding-top:8px;padding-bottom:8px;}

/* Un toque de color para que destaque (2026-10-28): champán, el mismo
   dorado suave del acento cálido de la marca (atmosfera.css), solo en el
   juego. Borde con degradado, anillos y llamada en ese tono, y un halo
   muy tenue. En Alba, un dorado más hondo para que se lea. */
.juego-promo{
  --juego-tono:var(--tono-champan,#E6C78E);--juego-tono-2:var(--tono-rosa,#D9A7A0);--juego-halo:rgba(230,199,142,.16);
  border-color:transparent;
  background:
    radial-gradient(120% 90% at 100% 0%,var(--juego-halo),transparent 60%) padding-box,
    var(--card-gradient, var(--surface)) padding-box,
    linear-gradient(var(--void-2,#0e0e14),var(--void-2,#0e0e14)) padding-box,
    linear-gradient(135deg,var(--juego-tono),rgba(var(--tx-rgb),.12) 45%,var(--juego-tono-2)) border-box;
}
.juego-promo:hover{border-color:transparent;box-shadow:0 0 0 1px var(--juego-tono),0 18px 50px -24px var(--juego-tono);}
.juego-promo-k,.juego-promo-cta{color:var(--juego-tono);}
.juego-promo-deco circle{stroke:var(--juego-tono);}
.juego-promo-deco circle + circle{stroke:var(--juego-tono-2);}
html[data-theme="alba"] .juego-promo{--juego-halo:rgba(154,116,50,.10);}