/* MundiJuegos — Portada v2 (Arte). Cargar después de ../identidad-v1.css */
/* Timings alineados con las animaciones del juego: --ease-pop, 160ms, 320ms */
:root{
  --mj-t-fast:160ms;
  --mj-t-med:320ms;
  --mj-intro:2200ms;
  --mj-ease:var(--ease-pop);
}

html{background:var(--bg-1)}
body{margin:0}

/* Botones: centrado vertical (el span.btn de v1 dejaba el texto pegado arriba) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--btn-h);min-width:var(--tap-min);padding:0 24px;
  line-height:1;text-decoration:none;cursor:pointer;box-sizing:border-box;
  font:800 var(--fs-m) var(--font-ui);color:var(--text);
  background:var(--primary);border:0;border-radius:var(--btn-radius);
  box-shadow:0 5px 0 var(--primary-dark);
  transition:transform var(--mj-t-fast),box-shadow var(--mj-t-fast);
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--primary-dark)}
.btn:focus-visible{outline:4px solid var(--info);outline-offset:3px}

.mj-page{
  min-height:100dvh;
  background:var(--bg);
  color:var(--text-on-dark);
  font-family:var(--font-ui);
  padding:0 0 calc(28px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}

/* ——— Cabecera ——— */
.mj-header{
  position:sticky;top:0;z-index:30;
  display:flex;justify-content:center;align-items:center;
  height:calc(72px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:rgba(30,27,75,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.mj-header__logo{height:44px;width:auto;display:block}

/* ——— Hero ——— */
.mj-hero{position:relative;display:flex;flex-direction:column}
.mj-hero__copy{text-align:center;padding:16px 20px 8px;z-index:4;position:relative}
.mj-hero__copy h1{
  font:800 clamp(1.9rem,8.4vw,3.25rem)/1.08 var(--font-title);
  margin:0;color:#fff;
  text-shadow:0 4px 0 rgba(30,27,75,.4),0 10px 28px rgba(0,0,0,.35);
}
.mj-hero__copy p{
  margin:8px 0 18px;color:var(--text-soft);font-size:var(--fs-s);font-weight:600;
}
.mj-hero__cta{min-width:min(280px,86vw)}

.mj-hero__stage{position:relative;z-index:1;margin-top:4px}
.mj-hero__frame{display:block;width:100%;overflow:hidden;line-height:0}
.mj-hero__art{
  display:block;width:100%;height:auto;
  aspect-ratio:1080/1200;object-fit:cover;object-position:center bottom;
}
.mj-hero__vignette{
  pointer-events:none;position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(to bottom,rgba(30,27,75,.22) 0%,transparent 16%),
    linear-gradient(to top,rgba(30,27,75,.22) 0%,transparent 12%),
    radial-gradient(120% 80% at 50% 60%,transparent 58%,rgba(14,10,40,.38) 100%);
}

/* Capa de primer plano: piezas y confeti (parallax) */
.mj-hero__fx{pointer-events:none;position:absolute;inset:0;z-index:2;overflow:hidden}

.mj-fx-piece{
  position:absolute;top:0;left:var(--x,10%);
  display:grid;gap:2px;transform:translateY(var(--land,70%)) rotate(var(--rot,0deg));
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.28));
  opacity:.95;
}
.mj-fx-piece i{
  width:14px;height:14px;background:var(--c,var(--p1));border-radius:3px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.22);
}
.mj-fx-piece[data-shape="t"]{grid-template-columns:repeat(3,14px)}
.mj-fx-piece[data-shape="t"] i:nth-child(1){grid-column:1}
.mj-fx-piece[data-shape="t"] i:nth-child(2){grid-column:2}
.mj-fx-piece[data-shape="t"] i:nth-child(3){grid-column:3}
.mj-fx-piece[data-shape="t"] i:nth-child(4){grid-column:2;grid-row:2}
.mj-fx-piece[data-shape="l"]{grid-template-columns:14px 14px}
.mj-fx-piece[data-shape="l"] i:nth-child(1){grid-column:1}
.mj-fx-piece[data-shape="l"] i:nth-child(2){grid-column:1}
.mj-fx-piece[data-shape="l"] i:nth-child(3){grid-column:1}
.mj-fx-piece[data-shape="l"] i:nth-child(4){grid-column:2;grid-row:3}
.mj-fx-piece[data-shape="i"]{grid-template-columns:14px}
.mj-fx-piece[data-shape="o"]{grid-template-columns:14px 14px}
.mj-fx-piece[data-shape="s"]{grid-template-columns:repeat(3,14px)}
.mj-fx-piece[data-shape="s"] i:nth-child(1){grid-column:2}
.mj-fx-piece[data-shape="s"] i:nth-child(2){grid-column:3}
.mj-fx-piece[data-shape="s"] i:nth-child(3){grid-column:1;grid-row:2}
.mj-fx-piece[data-shape="s"] i:nth-child(4){grid-column:2;grid-row:2}
.mj-fx-piece[data-shape="bar"]{grid-template-columns:14px 14px 14px}
.mj-fx-piece[data-shape="domino"]{grid-template-columns:14px 14px}
.mj-fx-piece[data-shape="mono"]{grid-template-columns:14px}

.mj-fx-confetti{
  position:absolute;left:50%;top:42%;width:8px;height:12px;border-radius:2px;
  background:var(--c,var(--primary));opacity:0;
  transform:translate(-50%,-50%);
}

/* ——— Secciones y tarjetas ——— */
.mj-section{max-width:1040px;margin:0 auto;padding:8px 16px 0}
.mj-section__title{
  font:800 1.15rem/1.2 var(--font-title);margin:20px 4px 12px;color:#fff;
}
.mj-games{display:grid;gap:20px;grid-template-columns:1fr;align-items:stretch}
.mj-games>.mj-card{height:100%}

.mj-card{
  display:block;text-decoration:none;color:var(--text);
  background:var(--surface);border-radius:24px;overflow:hidden;
  box-shadow:0 8px 0 #B9B2E6,var(--shadow-soft);
  transition:transform var(--mj-t-fast) var(--mj-ease);
}
a.mj-card:active{transform:translateY(4px) scale(.99)}
.mj-card--featured{box-shadow:0 8px 0 var(--primary-dark),0 14px 32px rgba(20,10,60,.45)}

/* v1 fallaba aquí: height fija / flex estiraba la imagen y cortaba el título */
.mj-card__img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;object-position:center;
  background:var(--bg-1);
}
.mj-card__body{display:flex;align-items:center;gap:12px;padding:14px 16px 16px}
.mj-card__info{flex:1;min-width:0}
.mj-card__title{font:800 1.25rem/1.1 var(--font-title);margin:0}
.mj-card__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mj-tag{
  font-size:.8rem;font-weight:800;padding:3px 10px;border-radius:999px;
  background:var(--surface-2);color:#4B3FA8;white-space:nowrap;line-height:1.3;
}
.mj-tag--new{background:var(--p9);color:#fff}
.mj-tag--soon{background:#5B5680;color:#fff}
.mj-card .btn{flex:none;height:var(--btn-h);padding:0 22px}

.mj-card--soon{filter:grayscale(.28);opacity:.88;pointer-events:none}
.mj-card--soon .mj-card__body{padding-right:16px}

.mj-card--slot{
  background:transparent;color:var(--text-on-dark);
  box-shadow:none;border:2px dashed rgba(199,194,240,.45);
  min-height:148px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px 16px;filter:none;opacity:.8;
}
.mj-card--slot .mj-card__title{color:#fff;font-size:1.1rem}
.mj-card--slot p{margin:6px 0 0;color:var(--text-soft);font-size:var(--fs-s)}

.mj-footer{text-align:center;margin-top:28px;padding:0 16px;font-size:.85rem;color:var(--text-soft)}

/* Entrada escalonada de tarjetas (tras la intro) */
html.mj-intro-done .mj-card,.is-intro-done .mj-card{animation:card-in 420ms var(--mj-ease) both}
html.mj-intro-done .mj-card--featured,.is-intro-done .mj-card--featured{animation-delay:40ms}
html.mj-intro-done .mj-games .mj-card:nth-child(1),.is-intro-done .mj-games .mj-card:nth-child(1){animation-delay:120ms}
html.mj-intro-done .mj-games .mj-card:nth-child(2),.is-intro-done .mj-games .mj-card:nth-child(2){animation-delay:200ms}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

/* Piezas flotando en reposo */
html.mj-intro-done .mj-fx-piece,.is-intro-done .mj-fx-piece{animation:mj-float 4.4s ease-in-out var(--delay,0s) infinite}
@keyframes mj-float{
  0%,100%{transform:translateY(var(--land,70%)) rotate(var(--rot,0deg))}
  50%{transform:translateY(calc(var(--land,70%) - 10px)) rotate(calc(var(--rot,0deg) + 8deg))}
}

@media (min-width:640px){
  .mj-games{grid-template-columns:1fr 1fr}
  .mj-card--featured{grid-column:1/-1}
  .mj-section:has(.mj-card--featured){/* featured lives in its own section */}
}
@media (min-width:720px){
  .mj-hero{display:grid;min-height:min(82dvh,740px)}
  .mj-hero__stage,.mj-hero__copy{grid-area:1/1}
  .mj-hero__stage{margin:0}
  .mj-hero__frame{height:100%}
  .mj-hero__art{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center 42%}
  .mj-hero__copy{
    align-self:stretch;display:flex;flex-direction:column;align-items:center;
    padding:20px 24px 0;
    background:linear-gradient(to bottom,rgba(20,14,50,.7) 0%,rgba(20,14,50,.28) 42%,transparent 70%);
    pointer-events:none;
  }
  .mj-hero__copy h1,.mj-hero__copy p,.mj-hero__cta{pointer-events:auto}
  .mj-hero__copy p{margin:6px 0 0;color:#EDE9FF;text-shadow:0 2px 10px rgba(0,0,0,.75),0 0 18px rgba(20,14,50,.9)}
  .mj-hero__cta{position:absolute;left:0;right:0;bottom:28px;margin:0 auto;width:max-content;z-index:5}
  .mj-hero__vignette{
    background:
      linear-gradient(to bottom,rgba(30,27,75,.2) 0%,transparent 30%),
      linear-gradient(to top,rgba(30,27,75,.5) 0%,transparent 24%),
      radial-gradient(110% 80% at 50% 55%,transparent 52%,rgba(14,10,40,.5) 100%);
  }
  .mj-fx-piece i{width:16px;height:16px}
  .mj-fx-piece[data-shape="t"],.mj-fx-piece[data-shape="s"],.mj-fx-piece[data-shape="bar"]{grid-template-columns:repeat(3,16px)}
  .mj-fx-piece[data-shape="l"],.mj-fx-piece[data-shape="o"],.mj-fx-piece[data-shape="domino"]{grid-template-columns:16px 16px}
  .mj-fx-piece[data-shape="i"],.mj-fx-piece[data-shape="mono"]{grid-template-columns:16px}
}

@media (min-width:960px){
  .mj-hero__copy h1{font-size:3.25rem}
}