/* ==========================================================================
   Naughty Match — Design System (web)
   Alineado al look & feel real de la app (v143): oscuro, cinematográfico,
   magenta/rosa/vino, íntimo y +18.
   Tipografía: Playfair Display (display) + Inter (workhorse) — ya usadas en el sitio.
   Uso: <link rel="stylesheet" href="/assets/css/nm.css">
   ========================================================================== */

:root{
  /* ground & surfaces */
  --nm-ink:#0A0407; --nm-ink-2:#12060B;
  --nm-surface:#1A0910; --nm-surface-2:#230B15;
  --nm-line:rgba(255,140,180,.14); --nm-line-2:rgba(255,140,180,.28);
  /* text */
  --nm-text:#FBEEF2; --nm-muted:#C9A2B2; --nm-muted-2:#9E7787;
  /* brand (del ícono/hub_logo de la app) */
  --nm-magenta:#FF2E7E; --nm-pink:#FF4D8D; --nm-crimson:#C2185B;
  --nm-gold:#F5C044; --nm-wine:#7A0E2E;
  --nm-brand:linear-gradient(115deg,#FF4D8D 0%,#FF2E7E 45%,#C2185B 100%);
  --nm-brand-soft:linear-gradient(120deg,rgba(255,77,141,.16),rgba(194,24,91,.16));
  --nm-glow:0 20px 60px -14px rgba(255,46,126,.55);
  /* niveles (Suave/Picante/Caliente/Extremo) */
  --nm-lvl-1:linear-gradient(90deg,#F5C044,#FF8FB1);
  --nm-lvl-2:linear-gradient(90deg,#FF8FB1,#FF2E7E);
  --nm-lvl-3:linear-gradient(90deg,#FF2E7E,#C2185B);
  --nm-lvl-4:linear-gradient(90deg,#C2185B,#7A0E2E);
  /* type & layout */
  --nm-f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --nm-f-display:"Playfair Display","Georgia",serif;
  --nm-maxw:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nm-ink); color:var(--nm-text);
  font-family:var(--nm-f); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; position:relative;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--nm-pink);outline-offset:3px;border-radius:8px}

/* ambient glow (decorativo) */
.nm-amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.nm-amb::before,.nm-amb::after{content:"";position:absolute;border-radius:50%;filter:blur(100px)}
.nm-amb::before{width:55vw;height:55vw;top:-18vw;right:-12vw;background:radial-gradient(circle,rgba(255,46,126,.32),transparent 62%)}
.nm-amb::after{width:48vw;height:48vw;bottom:-14vw;left:-12vw;background:radial-gradient(circle,rgba(122,14,46,.45),transparent 62%)}
.nm-page{position:relative;z-index:1}
.nm-wrap{max-width:var(--nm-maxw);margin:0 auto;padding:0 24px}

/* type helpers */
.nm-label{font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--nm-pink)}
.nm-grad{background:var(--nm-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons */
.nm-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--nm-f);font-weight:700;font-size:1rem;
  padding:.9rem 1.7rem;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease}
.nm-btn--play{background:var(--nm-brand);color:#fff;box-shadow:var(--nm-glow)}
.nm-btn--play:hover{transform:translateY(-2px);box-shadow:0 26px 74px -12px rgba(255,46,126,.72)}
.nm-btn--ghost{background:rgba(255,255,255,.04);color:var(--nm-text);border:1px solid var(--nm-line-2)}
.nm-btn--ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.nm-btn--sm{padding:.6rem 1.1rem;font-size:.88rem}

/* nav */
.nm-nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(16px);
  background:linear-gradient(to bottom,rgba(10,4,7,.92),rgba(10,4,7,.5));border-bottom:1px solid var(--nm-line)}
.nm-nav__in{display:flex;align-items:center;justify-content:space-between;height:70px;gap:1rem}
/* flex-shrink:0 + object-fit: sin esto el flex lo comprime a lo ancho en celular
   (el alto queda fijo) y el logo sale estirado. */
.nm-nav__logo{height:40px;width:40px;flex:none;object-fit:contain;
  filter:drop-shadow(0 3px 14px rgba(255,46,126,.5))}
.nm-nav__in>a:first-child{display:flex;align-items:center;gap:.7rem}
.nm-nav__brand{font-family:var(--nm-f-display);font-size:1.3rem;font-weight:700;color:var(--nm-text);letter-spacing:.02em}
.nm-footer img{height:34px}
.nm-nav__links{display:flex;align-items:center;gap:1.6rem;font-size:.9rem;color:var(--nm-muted);font-weight:600}
.nm-nav__links a:hover{color:var(--nm-text)}
@media(max-width:860px){.nm-nav__links a:not(.nm-nav__cta){display:none}}

/* breadcrumb */
.nm-crumb{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--nm-muted-2);padding:22px 0 0}
.nm-crumb a:hover{color:var(--nm-pink)}
.nm-crumb .sep{opacity:.5}

/* landing hero */
.nm-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:34px 0 20px}
@media(max-width:880px){.nm-hero{grid-template-columns:1fr;padding:24px 0}}
.nm-hero h1{font-family:var(--nm-f-display);font-weight:700;font-size:clamp(2rem,4.4vw,3.1rem);
  line-height:1.08;margin:1rem 0 0;text-wrap:balance;letter-spacing:-.01em}
.nm-hero__lead{font-size:1.12rem;color:var(--nm-muted);margin:1rem 0 0;max-width:48ch}
.nm-hero__cta{display:flex;gap:.8rem;margin-top:1.7rem;flex-wrap:wrap}
.nm-hero__chips{display:flex;gap:1.2rem;margin-top:1.5rem;flex-wrap:wrap;color:var(--nm-muted);font-size:.88rem;font-weight:600}
.nm-hero__chips span{display:inline-flex;align-items:center;gap:.4rem}
.nm-hero__img{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--nm-line-2)}
.nm-hero__img img{width:100%;height:100%;object-fit:cover}
.nm-hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,4,7,.55),transparent 45%)}

/* sections */
.nm-section{padding:52px 0;border-top:1px solid var(--nm-line)}
.nm-section h2{font-family:var(--nm-f-display);font-weight:700;font-size:clamp(1.6rem,3.3vw,2.25rem);
  margin:.3rem 0 0;line-height:1.15;text-wrap:balance}
.nm-prose{max-width:66ch}
.nm-prose p{color:var(--nm-muted);font-size:1.05rem;margin:.9rem 0 0}
.nm-prose strong{color:var(--nm-text)}

/* steps */
.nm-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.4rem}
@media(max-width:760px){.nm-steps{grid-template-columns:1fr}}
.nm-step{padding:22px;border-radius:16px;background:var(--nm-surface);border:1px solid var(--nm-line)}
.nm-step__n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:var(--nm-brand);color:#fff;margin-bottom:.7rem}
.nm-step h3{margin:0 0 .25rem;font-size:1.02rem}
.nm-step p{margin:0;color:var(--nm-muted);font-size:.92rem}

/* intensity levels */
.nm-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:1.4rem}
@media(max-width:900px){.nm-levels{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.nm-levels{grid-template-columns:1fr}}
.nm-lvl{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;border:1px solid var(--nm-line);
  transition:transform .25s ease,box-shadow .25s ease}
.nm-lvl:hover{transform:translateY(-6px);box-shadow:0 24px 50px -20px rgba(255,46,126,.5)}
.nm-lvl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.nm-lvl:hover img{transform:scale(1.06)}
.nm-lvl__grad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,4,7,.96) 6%,rgba(10,4,7,.3) 58%,transparent)}
.nm-lvl__bar{position:absolute;top:0;left:0;right:0;height:4px}
.nm-lvl__c{position:absolute;inset:auto 0 0 0;padding:18px}
.nm-lvl__n{font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.nm-lvl__t{font-family:var(--nm-f-display);font-size:1.4rem;font-weight:700;margin:.1rem 0 .35rem}
.nm-lvl__d{font-size:.85rem;color:var(--nm-muted);line-height:1.45}

/* catalogo de juegos — iconos reales de la app (game_*.webp) */
.nm-games{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.4rem}
@media(max-width:900px){.nm-games{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.nm-games{grid-template-columns:1fr}}
.nm-game{display:flex;flex-direction:column;padding:22px;border-radius:18px;border:1px solid var(--nm-line);
  background:linear-gradient(160deg,var(--nm-surface-2),var(--nm-surface));transition:transform .22s ease,border-color .22s ease}
.nm-game:hover{transform:translateY(-5px);border-color:var(--nm-line-2)}
.nm-game__ic{width:104px;height:104px;object-fit:contain;margin-bottom:.9rem;filter:drop-shadow(0 10px 22px rgba(255,46,126,.32))}
.nm-game h3{margin:0;font-family:var(--nm-f-display);font-size:1.24rem;font-weight:700}
.nm-game__d{margin:.25rem 0 .7rem;color:var(--nm-pink);font-size:.9rem;font-weight:600}
.nm-game__m{margin:0 0 1rem;color:var(--nm-muted);font-size:.93rem;line-height:1.55;flex:1}
.nm-game__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.nm-tag{font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:.28rem .6rem;border-radius:999px;
  border:1px solid var(--nm-line-2);color:var(--nm-muted);background:rgba(255,255,255,.02)}
.nm-tag--free{border-color:rgba(255,46,126,.5);color:var(--nm-pink)}
.nm-tag--vip{border-color:rgba(245,192,68,.55);color:var(--nm-gold)}
/* variante enlace: tarjetas del blog */
a.nm-game{text-decoration:none;color:inherit}
a.nm-game:hover h3{color:var(--nm-pink)}
a.nm-game .nm-game__d{display:block;margin:.2rem 0 0;order:3}
a.nm-game .nm-game__m{margin:.5rem 0 .8rem}

/* examples (tabs) */
.nm-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 1.3rem}
.nm-tabs button{font-family:var(--nm-f);font-weight:700;font-size:.88rem;padding:.5rem 1.05rem;border-radius:999px;
  cursor:pointer;border:1px solid var(--nm-line-2);background:rgba(255,255,255,.02);color:var(--nm-muted)}
.nm-tabs button[aria-selected="true"]{background:var(--nm-brand);color:#fff;border-color:transparent}
/* gema de nivel = asset real de la app (hub_int_*) */
.nm-tabs button{display:inline-flex;align-items:center;gap:.42rem;line-height:1}
.nm-tabs button img{width:22px;height:22px;object-fit:contain;flex:none}
.nm-ex{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.nm-ex{grid-template-columns:1fr}}
.nm-ex__card{padding:20px 22px;border-radius:16px;border:1px solid var(--nm-line);
  background:linear-gradient(160deg,var(--nm-surface-2),var(--nm-surface))}
.nm-ex__tag{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--nm-pink)}
.nm-ex__card--dare .nm-ex__tag{color:var(--nm-gold)}
.nm-ex__card p{margin:.5rem 0 0;font-size:1.04rem}

/* related links (hub-and-spoke) */
.nm-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.2rem}
@media(max-width:760px){.nm-rel{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.nm-rel{grid-template-columns:1fr}}
.nm-rel a{display:block;padding:18px 20px;border-radius:16px;border:1px solid var(--nm-line);
  background:var(--nm-surface);transition:transform .18s ease,border-color .18s ease}
.nm-rel a:hover{transform:translateY(-4px);border-color:var(--nm-line-2)}
.nm-rel__dot{width:30px;height:30px;border-radius:9px;margin-bottom:.6rem}
.nm-rel h3{margin:0 0 .2rem;font-size:1rem}
.nm-rel p{margin:0;color:var(--nm-muted);font-size:.85rem}

/* FAQ */
.nm-faq{max-width:70ch;margin-top:1.2rem}
.nm-faq details{border:1px solid var(--nm-line);border-radius:14px;padding:0 20px;margin-top:12px;background:var(--nm-surface)}
.nm-faq summary{cursor:pointer;padding:18px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.nm-faq summary::-webkit-details-marker{display:none}
.nm-faq summary::after{content:"+";color:var(--nm-pink);font-weight:800}
.nm-faq details[open] summary::after{content:"\2013"}
.nm-faq p{margin:0 0 18px;color:var(--nm-muted)}

/* final CTA */
.nm-cta{position:relative;border-radius:26px;overflow:hidden;text-align:center;padding:56px 26px;margin:20px 0 0;
  background:radial-gradient(120% 130% at 50% 0%,rgba(255,46,126,.24),transparent 58%),var(--nm-surface);
  border:1px solid var(--nm-line-2)}
.nm-cta h2{font-family:var(--nm-f-display);font-weight:700;font-size:clamp(1.7rem,3.8vw,2.5rem);margin:.4rem 0 0}
.nm-cta p{color:var(--nm-muted);max-width:46ch;margin:.9rem auto 1.7rem}

/* footer */
.nm-footer{border-top:1px solid var(--nm-line);padding:34px 0;color:var(--nm-muted-2);font-size:.85rem;margin-top:56px}
.nm-footer__in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.nm-footer__links{display:flex;gap:1.2rem;flex-wrap:wrap}
.nm-footer__links a:hover{color:var(--nm-pink)}
.nm-footer img{height:24px;width:24px;flex:none;object-fit:contain;opacity:.85}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ── compat: cuerpo de artículos del blog ──────────────────────────────────
   Los 16 artículos traen su markup con clases/variables del sistema viejo.
   En vez de arrastrar styles.css entero (dos sistemas peleándose en body/h1),
   se mapea lo que usan —2 variables y 4 clases, verificado— al sistema nm.
   Así el cuerpo se conserva palabra por palabra con UNA sola hoja de estilos.
   --text-muted valía #C9A2B2, idéntico a --nm-muted: ya estaban alineados. */
.nm-article{--text-white:var(--nm-text);--text-muted:var(--nm-muted);--accent-gold:var(--nm-gold);
  --primary-pink:var(--nm-pink);--accent-pink:var(--nm-pink);--accent-magenta:var(--nm-magenta);
  --font-body:var(--nm-f);--font-heading:var(--nm-f-display)}
.nm-article .text-center{text-align:center}
.nm-article .lead{font-size:1.14rem;color:var(--nm-muted);line-height:1.75}
.nm-article .glass-card{background:var(--nm-surface);border:1px solid var(--nm-line);
  border-radius:16px;padding:22px 24px}
.nm-article .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--nm-f);font-weight:700;font-size:1rem;padding:.9rem 1.8rem;border-radius:999px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.nm-article .btn-primary{background:var(--nm-brand);color:#fff;box-shadow:var(--nm-glow)}
.nm-article .btn-primary:hover{transform:translateY(-2px);box-shadow:0 26px 74px -12px rgba(255,46,126,.72)}
.nm-article h2{font-family:var(--nm-f-display);font-size:1.7rem;font-weight:700;margin:2.2rem 0 .8rem}
.nm-article h3{font-family:var(--nm-f-display);font-size:1.22rem;font-weight:700;margin:1.6rem 0 .5rem}
.nm-article p,.nm-article li{color:var(--nm-muted);font-size:1.05rem;line-height:1.75}
.nm-article strong{color:var(--nm-text)}
.nm-article a{color:var(--nm-pink)}
.nm-article ul,.nm-article ol{padding-left:1.2rem}
.nm-article img{max-width:100%;height:auto;border-radius:14px}

/* ── compartir (viral) — "compartí con tu pareja" ─────────────────────────── */
.nm-share{margin:2.6rem 0 0;text-align:center}
.nm-share__t{font-size:.95rem;color:var(--nm-muted);margin-bottom:1rem;font-weight:600}
.nm-share__row{display:inline-flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.nm-share__b{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.2rem;border-radius:999px;
  font-family:var(--nm-f);font-weight:700;font-size:.92rem;text-decoration:none;cursor:pointer;
  border:1px solid var(--nm-line-2);background:rgba(255,255,255,.04);color:var(--nm-text);
  transition:transform .18s ease,background .18s ease}
.nm-share__b:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
.nm-share__b svg{width:18px;height:18px;flex:none}
.nm-share__b--wa{border-color:rgba(37,211,102,.5)}
.nm-share__b--wa:hover{background:rgba(37,211,102,.16)}
.nm-share__b--ok{background:rgba(37,211,102,.2);border-color:rgba(37,211,102,.6)}

/* ── demo jugable ─────────────────────────────────────────────────────────── */
#nm-demo{margin:1.6rem 0 0}
.nmd-card{background:linear-gradient(160deg,var(--nm-surface-2),var(--nm-surface));
  border:1px solid var(--nm-line-2);border-radius:22px;padding:30px 28px;max-width:640px;margin:0 auto;
  box-shadow:0 30px 80px -40px rgba(255,46,126,.5)}
.nmd-card--mid{text-align:center}
.nmd-h{font-family:var(--nm-f-display);font-size:1.5rem;font-weight:700;margin:.5rem 0 .3rem;line-height:1.2}
.nmd-p{color:var(--nm-muted);font-size:1rem;margin:.5rem 0 0}
.nmd-note{color:var(--nm-muted-2);font-size:.84rem;margin:1.1rem 0 0;line-height:1.5}
.nmd-err{color:#FF6B8A;font-size:.9rem;margin:.8rem 0 0;font-weight:600}
.nmd-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.nmd-turn{font-size:.8rem;color:var(--nm-muted-2);font-weight:700}
.nmd-fields{display:grid;gap:.9rem;margin:1.3rem 0 0}
.nmd-f{display:block}
.nmd-f span{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nm-muted-2);margin-bottom:.4rem}
.nmd-f input{width:100%;padding:.85rem 1rem;border-radius:12px;border:1px solid var(--nm-line-2);
  background:rgba(0,0,0,.35);color:var(--nm-text);font-family:var(--nm-f);font-size:1rem}
.nmd-f input:focus{outline:2px solid var(--nm-pink);outline-offset:1px}
.nmd-lvl{display:flex;gap:.6rem;margin:1.2rem 0 0;flex-wrap:wrap}
.nmd-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1rem;border-radius:999px;
  border:1px solid var(--nm-line-2);background:rgba(255,255,255,.03);color:var(--nm-muted);
  font-family:var(--nm-f);font-weight:700;font-size:.88rem;cursor:pointer}
.nmd-chip img{width:22px;height:22px;object-fit:contain}
.nmd-chip.is-on{background:var(--nm-brand);color:#fff;border-color:transparent}
.nmd-go{width:100%;justify-content:center;margin-top:1.4rem}
.nmd-q{font-family:var(--nm-f-display);font-size:1.32rem;line-height:1.35;margin:1.1rem 0 0;color:var(--nm-text)}
.nmd-q--sm{font-size:1.05rem;color:var(--nm-muted)}
.nmd-opts{display:grid;gap:.6rem;margin:1.3rem 0 0}
.nmd-opt{text-align:left;padding:.95rem 1.1rem;border-radius:14px;border:1px solid var(--nm-line-2);
  background:rgba(255,255,255,.03);color:var(--nm-text);font-family:var(--nm-f);font-size:.98rem;
  line-height:1.4;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.nmd-opt:hover{background:rgba(255,46,126,.14);border-color:var(--nm-pink);transform:translateX(3px)}
.nmd-pass{font-size:3.2rem;line-height:1;margin-bottom:.4rem}
.nmd-res{font-family:var(--nm-f-display);font-size:1.7rem;font-weight:700;text-align:center;margin:.6rem 0 .2rem}
.nmd-res.is-hit{color:#4ADE80}
.nmd-res.is-miss{color:var(--nm-gold)}
.nmd-rev{display:grid;gap:.7rem;margin:1.2rem 0 0}
.nmd-rev__i{padding:.85rem 1.1rem;border-radius:14px;border:1px solid var(--nm-line);background:rgba(0,0,0,.28)}
.nmd-rev__i span{display:block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nm-muted-2);margin-bottom:.25rem}
.nmd-rev__i p{margin:0;font-size:1rem;color:var(--nm-text)}
.nmd-rev__i.is-real{border-color:rgba(255,46,126,.45)}
.nmd-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:1.1rem 0 .2rem}
.nmd-bar i{display:block;height:100%;background:var(--nm-brand)}
.nmd-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.nmd-cta .nm-btn{flex:1;justify-content:center;min-width:180px}
@media(max-width:560px){.nmd-card{padding:24px 20px}.nmd-q{font-size:1.16rem}}

/* ── demo: capa visual de la app (fondo DENTRO de la tarjeta) ───────────── */
#nm-demo{position:relative}
/* la tarjeta ES la pantalla del juego: el fondo del nivel vive adentro */
.nmd-card{position:relative;overflow:hidden;background-repeat:no-repeat;
  background-size:100% auto,cover;background-position:center top,center top;
  transition:background-image .45s ease}
.nmd-lv-light .nmd-card{
  background-image:linear-gradient(180deg,rgba(26,9,16,.72) 0%,rgba(18,6,11,.9) 55%,rgba(18,6,11,.97) 100%),
    url("/assets/img/nm/bg-light.webp")}
.nmd-lv-spicy .nmd-card{
  background-image:linear-gradient(180deg,rgba(26,9,16,.72) 0%,rgba(18,6,11,.9) 55%,rgba(18,6,11,.97) 100%),
    url("/assets/img/nm/bg-spicy.webp")}
/* arte del reveal (match / no-match), como en la app */
.nmd-art{display:block;width:min(230px,62%);height:auto;margin:.2rem auto .4rem;
  animation:nmd-pop .45s cubic-bezier(.2,1.3,.4,1) both;
  filter:drop-shadow(0 12px 34px rgba(255,46,126,.45))}
.nmd-art--end{width:min(150px,42%);animation:nmd-beat 2.6s ease-in-out infinite}
@keyframes nmd-pop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes nmd-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.nmd-card--end{text-align:center}
.nmd-card--end .nmd-cta{justify-content:center}
.nmd-opt:active{transform:scale(.985)}
.nmd-rev__i.is-real{background:linear-gradient(160deg,rgba(255,46,126,.16),rgba(0,0,0,.3))}

/* niveles bloqueados (Caliente / Extremo: solo en la app) */
.nmd-chip.is-lock{opacity:.62}
.nmd-chip.is-lock:hover{opacity:.85}
.nmd-chip__lock{font-size:.78rem;margin-left:.1rem}
.nmd-locked{margin:1.1rem 0 0;padding:16px 18px;border-radius:16px;
  border:1px solid rgba(245,192,68,.4);background:linear-gradient(160deg,rgba(245,192,68,.12),rgba(0,0,0,.3));
  animation:nmd-pop .3s ease both}
.nmd-locked__t{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--nm-gold);
  font-size:.98rem;margin-bottom:.3rem}
.nmd-locked__t img{width:26px;height:26px;object-fit:contain}
.nmd-locked p{margin:0 0 .9rem;color:var(--nm-muted);font-size:.93rem;line-height:1.5}
@media(prefers-reduced-motion:reduce){.nmd-art,.nmd-art--end,.nmd-locked{animation:none}}
@media(max-width:560px){.nmd-card{padding:24px 18px}}

/* selector de tipo de pareja (la app lo pregunta primero) */
.nmd-sub{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--nm-muted-2);margin:1.3rem 0 .5rem}
.nmd-pairs{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.nmd-pair{padding:0;overflow:hidden;border-radius:14px;cursor:pointer;background:rgba(0,0,0,.3);
  border:1px solid var(--nm-line-2);transition:border-color .18s ease,transform .18s ease}
.nmd-pair img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;opacity:.72;
  transition:opacity .18s ease}
.nmd-pair span{display:block;padding:.5rem .3rem;font-family:var(--nm-f);font-size:.78rem;
  font-weight:700;color:var(--nm-muted);line-height:1.2}
.nmd-pair:hover img{opacity:.92}
.nmd-pair.is-on{border-color:var(--nm-pink);transform:translateY(-2px)}
.nmd-pair.is-on img{opacity:1}
.nmd-pair.is-on span{color:var(--nm-text)}
@media(max-width:420px){.nmd-pair span{font-size:.72rem}}

/* ── demo Naughty Swipe ───────────────────────────────────────────────────── */
#nm-swipe{position:relative}
.nms-logo{width:min(150px,44%);height:auto;margin:0 auto .6rem;display:block;
  filter:drop-shadow(0 10px 28px rgba(255,46,126,.45))}
.nms-stage{position:relative;display:grid;place-items:center;margin:1.2rem 0 0;
  min-height:min(62vh,430px)}
.nms-card{position:relative;width:min(300px,86%);cursor:grab;touch-action:pan-y;
  will-change:transform;animation:nmd-pop .3s ease both}
.nms-card:active{cursor:grabbing}
.nms-frame{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 44px rgba(0,0,0,.55))}
.nms-txt{position:absolute;inset:18% 16% 20%;margin:0;display:grid;place-items:center;
  text-align:center;font-family:var(--nm-f-display);font-size:clamp(.98rem,3.4vw,1.2rem);
  line-height:1.35;color:#2A0A16;font-weight:700;overflow:hidden}
.nms-stamp{position:absolute;top:12%;padding:.3rem .8rem;border-radius:10px;font-weight:800;
  font-size:.9rem;letter-spacing:.06em;opacity:0;transition:opacity .12s ease;pointer-events:none}
.nms-stamp--no{left:8%;transform:rotate(-14deg);border:3px solid #E23B5A;color:#E23B5A;background:rgba(255,255,255,.9)}
.nms-stamp--yes{right:8%;transform:rotate(14deg);border:3px solid #4ADE80;color:#1B7A42;background:rgba(255,255,255,.9)}
.nms-card.is-no .nms-stamp--no{opacity:1}
.nms-card.is-yes .nms-stamp--yes{opacity:1}
.nms-btns{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.3rem}
.nms-b{padding:.9rem 1rem;border-radius:999px;font-family:var(--nm-f);font-weight:800;font-size:1rem;
  cursor:pointer;border:1px solid var(--nm-line-2);background:rgba(255,255,255,.04);color:var(--nm-text);
  transition:transform .16s ease,background .16s ease}
.nms-b:hover{transform:translateY(-2px)}
.nms-b--no:hover{background:rgba(226,59,90,.18);border-color:#E23B5A}
.nms-b--yes:hover{background:rgba(74,222,128,.16);border-color:#4ADE80}
.nms-matches{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.5rem;text-align:left}
.nms-matches li{padding:.8rem 1rem;border-radius:14px;font-size:.98rem;color:var(--nm-text);
  border:1px solid rgba(255,46,126,.4);background:linear-gradient(160deg,rgba(255,46,126,.16),rgba(0,0,0,.3))}
.nms-matches li::before{content:"♥ ";color:var(--nm-pink)}
@media(prefers-reduced-motion:reduce){.nms-card{animation:none}}

/* hub de la sección jugar */
.nmh-games{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.nmh-games{grid-template-columns:1fr}}
.nmh-game{text-decoration:none;color:inherit}
.nmh-game:hover h3{color:var(--nm-pink)}
.nmh-go{display:block;margin-top:1rem;font-weight:800;font-size:.92rem;color:var(--nm-pink)}

/* ── video (gameplays de YouTube Shorts, formato vertical) ────────────────── */
.nmv{position:relative;aspect-ratio:720/1614;border-radius:18px;overflow:hidden;background:#12060B;
  border:1px solid var(--nm-line-2);box-shadow:0 20px 50px -24px rgba(0,0,0,.8)}
.nmv__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#12060B}
/* El rotulo va ARRIBA: abajo lo tapaba la barra de controles nativa.
   pointer-events:none para no robarle el clic al video. */
.nmv__cap{position:absolute;left:0;right:0;top:0;padding:13px 16px;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,4,7,.92),transparent);font-size:.88rem;font-weight:700;
  color:var(--nm-text);line-height:1.3;transition:opacity .3s ease}
.nmv--on .nmv__cap{opacity:0}
.nmv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:1.4rem}
@media(max-width:860px){.nmv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.nmv-grid{grid-template-columns:1fr;max-width:330px;margin-inline:auto}}
.nmv-item h3{font-family:var(--nm-f-display);font-size:1.06rem;margin:.7rem 0 .1rem}
.nmv-item p{margin:0;color:var(--nm-muted);font-size:.9rem;line-height:1.45}
/* video suelto dentro de una landing: no ocupa toda la pantalla */
.nmv-solo{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:center;margin-top:1.4rem}
@media(max-width:720px){.nmv-solo{grid-template-columns:1fr;max-width:330px;margin-inline:auto}}
.nmv-solo .nmv{max-width:300px}