/* Gomis World Tour · portada (26 oct 2026). Se carga después de gomis.css, que sigue dando estilo
   al tablero jugable (#jugar), a las páginas de texto y a las fuentes Fredoka y Manrope.
   Idea: la noche azul de la bolsa de Gomis como escenario; el cómic aporta papel, regaliz y onomatopeyas.
   Todo lo nuevo lleva el prefijo n- para no chocar con gomis.css. */

@font-face {
  font-family: "Bangers";
  src: url("/fonts/Bangers-Latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --n-noche: #081236;
  --n-bolsa: #12256b;
  --n-tinta: #f3f1ff;
  --n-tenue: #b3bbe6;
  --n-limon: #ffd23f;
  --n-fresa: #ff4f6e;
  --n-regaliz: #1a0f2e;
  --n-papel: #fff8ec;
  --n-comic: "Bangers", "Impact", "Arial Black", sans-serif;
  --n-gut: max(var(--gutter, 16px), env(safe-area-inset-left, 0px));
  --n-gutr: max(var(--gutter, 16px), env(safe-area-inset-right, 0px));
}

html.n-html { color-scheme: dark; }
body.n-body { background: var(--n-noche); color: var(--n-tinta); overflow-x: hidden; }
body.n-body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--n-noche); }
.n-body main { overflow-x: clip; }
.n-body :focus-visible { outline-color: var(--n-limon); }

.n-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: var(--n-gut); padding-right: var(--n-gutr); }
.n-sec { padding-block: clamp(64px, 9vw, 120px); }
.n-sec h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.01em; color: var(--n-tinta); }
.n-sec h3 { font-size: 1.3rem; color: var(--n-tinta); }
.n-sec p, .n-sec li { margin: 0; }
.n-sec a { color: inherit; }
.n-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--n-tenue); max-width: 60ch; }
.n-eyebrow { display: block; margin-bottom: 0.4rem; font: 400 1.35rem/1.1 var(--n-comic); letter-spacing: 0.06em; color: var(--n-limon); }
.n-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.n-head.is-center { justify-items: center; text-align: center; }
.n-head.is-center .n-lead { margin: 0 auto; }

/* Barra */
.n-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgb(8 18 54 / 0.84); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.n-nav .n-wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.n-nav .n-brand img { height: 34px; width: auto; }
.n-nav ul { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.n-nav ul a { display: block; padding: 8px 12px; border-radius: 999px; font: 600 0.95rem var(--display); color: var(--n-tenue); text-decoration: none; }
.n-nav ul a:hover { color: var(--n-tinta); background: rgb(255 255 255 / 0.07); }
.n-lang { padding: 6px 12px; border: 1.5px solid rgb(255 255 255 / 0.25); border-radius: 999px; font: 600 0.85rem var(--display); color: var(--n-tinta); text-decoration: none; }
@media (max-width: 860px) { .n-nav ul { display: none; } .n-lang { margin-left: auto; } }

/* Portada */
.n-hero { position: relative; overflow: hidden; background: #06103a; }
.n-hero .n-art, .n-hero .n-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.n-hero .n-wrap { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 500px); min-height: min(62vw, 760px); align-items: center; }
.n-hero-txt { grid-column: 2; display: grid; gap: 22px; padding-block: 56px; justify-items: start; }
.n-logo { width: min(420px, 100%); }
@media (max-width: 820px) { .n-logo { width: min(300px, 80%); } }
.n-logo .n-wt { width: 72%; margin: -6% 0 0 18%; }
.n-hero h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.12; color: var(--n-tinta); }
.n-hero h1 b { color: var(--n-limon); font-weight: 700; }
.n-hero .n-lead { color: #d4d9f5; }
.n-rip { position: absolute; left: 31%; top: 4%; font: 400 clamp(2.4rem, 6vw, 5.4rem)/1 var(--n-comic); color: var(--n-limon); -webkit-text-stroke: 3px var(--n-regaliz); paint-order: stroke; text-shadow: 5px 5px 0 var(--n-fresa); transform: rotate(-12deg); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .n-rip { animation: n-rip 2.8s ease-in-out infinite; }
  @keyframes n-rip { 0%, 100% { transform: rotate(-12deg) scale(1); } 8% { transform: rotate(-8deg) scale(1.14); } 16% { transform: rotate(-12deg) scale(1); } }
}
.n-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.n-badge { display: inline-block; border-radius: 12px; transition: transform 0.2s; }
.n-badge:hover { transform: translateY(-2px) rotate(-1deg); }
.n-badge img { height: 56px; width: auto; }
.n-date { font: 600 1rem/1.3 var(--display); color: var(--n-tinta); }
.n-date span { display: block; font: 500 0.9rem var(--body); color: var(--n-tenue); }
.n-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.n-pills li { padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.14); font: 600 0.85rem var(--display); }
@media (max-width: 820px) {
  .n-hero .n-art, .n-hero .n-art img { position: relative; height: auto; aspect-ratio: 1.25; object-position: 12% center; }
  .n-hero .n-wrap { grid-template-columns: 1fr; min-height: 0; }
  .n-hero-txt { grid-column: 1; padding-block: 8px 48px; }
  .n-rip { left: auto; right: 8%; top: 6%; }
}

/* Etiqueta trasera de la bolsa */
.n-etiqueta { padding-block: clamp(40px, 6vw, 72px) 0; }
.n-lbl { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; align-items: start; padding: 22px 26px; background: var(--n-papel); color: var(--n-regaliz); border: 3px solid var(--n-regaliz); border-radius: 6px; box-shadow: 8px 8px 0 var(--n-limon); transform: rotate(-1deg); }
.n-lbl h2 { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 2px solid var(--n-regaliz); font: 400 1.5rem/1 var(--n-comic); letter-spacing: 0.05em; color: var(--n-regaliz); }
.n-lbl p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: #3c3355; }
.n-lbl p b { color: var(--n-regaliz); }
.n-sello { grid-row: 2 / 4; grid-column: 2; display: grid; place-items: center; width: 96px; height: 96px; border: 3px dashed var(--n-fresa); border-radius: 50%; font: 400 1.05rem/1 var(--n-comic); letter-spacing: 0.04em; text-align: center; color: var(--n-fresa); transform: rotate(10deg); }
@media (max-width: 560px) { .n-lbl { grid-template-columns: 1fr; } .n-sello { grid-row: auto; grid-column: 1; justify-self: end; margin-top: 6px; } }

/* Cómic */
.n-comic { background: radial-gradient(ellipse at 70% 0%, #1d3496 0%, transparent 60%), var(--n-noche); }
.n-comic .n-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.n-comic-txt { display: grid; gap: 18px; }
.n-vinetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; transform: rotate(1.5deg); }
.n-vinetas figure { margin: 0; padding: 7px; background: var(--n-papel); border: 3px solid var(--n-regaliz); box-shadow: 6px 6px 0 var(--n-regaliz); }
.n-vinetas figure:nth-child(2) { transform: translateY(22px) rotate(-2deg); }
.n-vinetas figure:nth-child(3) { transform: rotate(2deg); }
.n-vinetas img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.n-melaza { display: flex; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 20px; }
.n-melaza img { flex: none; width: 84px; height: 84px; object-fit: cover; border-radius: 16px; }
.n-melaza p { font-size: 0.98rem; color: var(--n-tenue); }
.n-melaza strong { font-family: var(--display); color: var(--n-tinta); }
@media (max-width: 820px) { .n-comic .n-grid { grid-template-columns: 1fr; } .n-vinetas { transform: none; } }

/* Reparto */
.n-reparto { background: linear-gradient(180deg, var(--n-noche), #0d1b52); }
.n-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.n-gomi { --c: #9b6bff; display: block; width: 100%; padding: 0; border: 0; border-radius: 26px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.n-pic { display: block; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 26px; background: #efeaf8; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 60%, transparent); }
.n-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s, transform 0.35s; }
.n-pic .n-dz { object-fit: contain; padding: 10%; opacity: 0; transform: scale(0.85) rotate(-4deg); background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 35%, #fff) 0%, #fff 72%); }
.n-gomi.is-on .n-dz { opacity: 1; transform: none; }
.n-gomi:hover .n-pic img:first-child { transform: scale(1.04); }
.n-tag { position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px; background: var(--n-regaliz); color: var(--n-limon); font: 400 0.95rem var(--n-comic); letter-spacing: 0.05em; transform: rotate(4deg); }
.n-info { display: grid; width: 100%; gap: 2px; padding: 12px 6px 4px; }
.n-info .n-name { display: flex; align-items: baseline; gap: 8px; font: 700 1.3rem/1.1 var(--display); color: var(--n-tinta); }
.n-info .n-name small { font: 700 0.8rem var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c); }
.n-info .n-d { display: block; font-size: 0.95rem; line-height: 1.45; color: var(--n-tenue); }

/* Cómo se juega: el tablero jugable de siempre, como página de papel */
.n-body .sec-play { background: var(--paper, #fffaf2); color: var(--ink); border-top: 0; }
.n-body .sec-play h2, .n-body .sec-play h3 { color: var(--ink); }

/* Juegos */
.n-juegos .n-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.n-juego { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.09); border-radius: 24px; }
.n-juego img { width: 100%; height: auto; aspect-ratio: 548 / 368; object-fit: cover; }
.n-juego div { display: grid; gap: 8px; align-content: start; padding: 18px; }
.n-juego .n-n { font: 400 1.05rem var(--n-comic); letter-spacing: 0.05em; color: var(--n-limon); }
.n-juego p { font-size: 0.96rem; line-height: 1.5; color: var(--n-tenue); }
.n-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.n-extra { display: grid; gap: 6px; padding-top: 14px; border-top: 2px solid rgb(255 255 255 / 0.14); }
.n-extra p { font-size: 0.95rem; color: var(--n-tenue); }
@media (max-width: 980px) { .n-juegos .n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .n-juegos .n-grid, .n-extras { grid-template-columns: 1fr; } }

/* Dentro de la app */
.n-app { background: var(--n-bolsa); }
.n-app .n-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 40px; align-items: center; }
.n-app-txt { display: grid; gap: 18px; }
.n-list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.n-list li { position: relative; padding-left: 28px; color: var(--n-tenue); }
.n-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 14px; height: 14px; border-radius: 50%; background: var(--n-limon); box-shadow: inset -3px -3px 0 #e0a800; }
.n-list b { font-family: var(--display); font-weight: 600; color: var(--n-tinta); }
.n-phones { display: flex; gap: 16px; overflow-x: auto; padding: 12px 4px 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.n-phone { flex: none; display: grid; gap: 10px; width: clamp(170px, 22vw, 230px); margin: 0; scroll-snap-align: start; }
.n-phone .n-f { padding: 7px; border-radius: 32px; background: #0a0a14; box-shadow: 0 18px 40px rgb(0 0 0 / 0.5), inset 0 0 0 2px rgb(255 255 255 / 0.13); }
.n-phone img, .n-phone video { display: block; width: 100%; height: auto; aspect-ratio: 480 / 1043; object-fit: cover; border-radius: 26px; }
.n-phone figcaption { font: 600 0.9rem var(--display); text-align: center; color: var(--n-tenue); }
@media (max-width: 860px) { .n-app .n-grid { grid-template-columns: 1fr; } }

/* Mundos */
.n-mundos { position: relative; padding-block: 0; background: #0b1640; }
.n-mundos-bg { display: block; width: 100%; height: clamp(420px, 62vw, 720px); object-fit: cover; object-position: center 30%; opacity: 0.55; -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); }
.n-mundos .n-wrap { position: absolute; inset: 0; display: grid; align-content: center; gap: 20px; }
.n-mundos h2 { text-shadow: 0 4px 30px rgb(0 0 0 / 0.8); }
.n-lista { display: flex; flex-wrap: wrap; gap: 8px; max-width: 820px; list-style: none; margin: 0; padding: 0; }
.n-lista li { padding: 6px 12px; border-radius: 999px; background: rgb(8 18 54 / 0.85); border: 1px solid rgb(255 255 255 / 0.15); font: 600 0.9rem var(--display); }
.n-lista li:nth-child(5n+1) { color: #ffb3c2; } .n-lista li:nth-child(5n+2) { color: #ffe58a; } .n-lista li:nth-child(5n+3) { color: #9ff0c9; } .n-lista li:nth-child(5n+4) { color: #b9c9ff; } .n-lista li:nth-child(5n) { color: #e3c4ff; }
@media (max-width: 640px) { .n-mundos-bg { height: auto; aspect-ratio: 0.8; } .n-mundos .n-wrap { position: relative; margin-top: -30%; } .n-mundos { padding-bottom: 56px; } }

/* Mascotas */
.n-mascotas { background: linear-gradient(180deg, #0d1b52, var(--n-noche)); }
.n-pets { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.n-pets li { display: grid; gap: 6px; text-align: center; }
.n-pets img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid rgb(255 255 255 / 0.12); background: #eee; transition: transform 0.25s; }
.n-pets li:hover img { transform: translateY(-6px) rotate(-3deg); }
.n-pets b { font: 600 1.05rem var(--display); }
.n-pets span { font-size: 0.82rem; line-height: 1.3; color: var(--n-tenue); }
@media (max-width: 860px) { .n-pets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .n-pets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Temporadas y disfraces */
.n-temp .n-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.n-temp figure { display: grid; gap: 10px; align-content: start; margin: 0; }
.n-temp figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 14px 20px rgb(0 0 0 / 0.55)); }
.n-temp figcaption { display: grid; gap: 2px; }
.n-temp figcaption b { font: 700 1.15rem var(--display); }
.n-temp figcaption span { font-size: 0.92rem; color: var(--n-tenue); }
.n-armario-t { margin-top: clamp(48px, 6vw, 72px); margin-bottom: 8px; }
.n-armario { display: flex; gap: 6px; overflow-x: auto; padding: 10px 4px 18px; list-style: none; margin: 0; scrollbar-width: thin; }
.n-armario li { flex: none; display: grid; gap: 4px; justify-items: center; width: 132px; }
.n-armario img { width: auto; height: 130px; object-fit: contain; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.45)); transition: transform 0.25s; }
.n-armario li:hover img { transform: translateY(-6px) scale(1.05); }
.n-armario span { font: 600 0.85rem var(--display); color: var(--n-tenue); }
@media (max-width: 860px) { .n-temp .n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Cada día */
.n-dia { background: var(--n-bolsa); }
.n-dia .n-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.n-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.n-semana li { display: grid; gap: 2px; padding: 10px 4px; border-radius: 14px; background: rgb(255 255 255 / 0.07); text-align: center; }
.n-semana b { font: 600 0.8rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--n-tenue); }
.n-semana span { font: 700 1.15rem var(--display); font-variant-numeric: tabular-nums; }
.n-semana i { font-style: normal; font-size: 0.72rem; color: var(--n-tenue); }
.n-semana .is-m span { color: var(--n-limon); }
.n-dia .n-phone { margin: 0 auto; width: clamp(190px, 60%, 250px); }
@media (max-width: 860px) { .n-dia .n-grid { grid-template-columns: 1fr; } }

/* A tu manera */
.n-gusto .n-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 22px; }
.n-gusto .n-grid > div { display: grid; gap: 6px; align-content: start; }
.n-gusto h3 { font-size: 1.12rem; }
.n-gusto p { font-size: 0.94rem; line-height: 1.5; color: var(--n-tenue); }
@media (max-width: 860px) { .n-gusto .n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .n-gusto .n-grid { grid-template-columns: 1fr; } }

/* Precio */
.n-precio { background: radial-gradient(ellipse at 50% 0%, #2443b3 0%, transparent 65%), var(--n-noche); }
.n-planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.n-plan { display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: 28px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.11); }
.n-plan.is-full { background: var(--n-papel); color: var(--n-regaliz); border: 3px solid var(--n-regaliz); box-shadow: 8px 8px 0 var(--n-limon); }
.n-plan.is-full h3 { color: var(--n-regaliz); }
.n-p { font: 400 2.8rem/1 var(--n-comic); letter-spacing: 0.03em; }
.n-p small { display: block; margin: 6px 0 0; font: 600 1rem var(--display); }
.n-plan ul { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.n-plan li { color: var(--n-tenue); }
.n-plan.is-full li { color: #3c3355; }
@media (max-width: 700px) { .n-planes { grid-template-columns: 1fr; } }
.n-nota { margin-top: 24px !important; text-align: center; font-size: 0.95rem; color: var(--n-tenue); }

/* Preguntas */
.n-faq .n-list-q { display: grid; gap: 10px; max-width: 820px; }
.n-faq details { padding: 4px 20px; border-radius: 18px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.09); }
.n-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; list-style: none; font: 600 1.08rem var(--display); cursor: pointer; }
.n-faq summary::-webkit-details-marker { display: none; }
.n-faq summary::after { content: "+"; font: 400 1.6rem/1 var(--n-comic); color: var(--n-limon); transition: transform 0.2s; }
.n-faq details[open] summary::after { transform: rotate(45deg); }
.n-faq details p { max-width: 68ch; padding: 0 0 16px; color: var(--n-tenue); }
.n-faq .n-more { margin-top: 20px; color: var(--n-tenue); }
.n-faq .n-more a { color: var(--n-limon); }

/* Cierre */
.n-final { position: relative; overflow: hidden; padding: 0; background: #06103a; }
.n-final .n-art img { display: block; width: 100%; height: clamp(380px, 48vw, 620px); object-fit: cover; object-position: left center; }
.n-final .n-wrap { position: absolute; inset: 0; display: grid; align-content: center; justify-items: end; gap: 18px; text-align: right; }
.n-final h2 { max-width: 13ch; }
@media (max-width: 700px) { .n-final .n-art img { height: auto; aspect-ratio: 1.2; object-position: 10% center; } .n-final .n-wrap { position: relative; justify-items: start; text-align: left; padding-block: 28px 56px; } }

/* Pie */
.n-foot { padding-block: 44px; border-top: 1px solid rgb(255 255 255 / 0.08); font-size: 0.92rem; color: var(--n-tenue); }
.n-foot .n-wrap { display: grid; gap: 22px; }
.n-foot-top > a img { width: auto; height: 56px; }
.n-foot-top { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
.n-foot a { color: var(--n-tenue); text-decoration: none; }
.n-foot a:hover { color: var(--n-tinta); text-decoration: underline; }
.n-foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.n-apps { display: flex; flex-wrap: wrap; gap: 12px 26px; list-style: none; margin: 0; padding: 0; }
.n-apps a { display: flex; align-items: center; gap: 10px; }
.n-apps img { width: 40px; height: 40px; border-radius: 10px; }
.n-apps strong { display: block; font-family: var(--display); color: var(--n-tinta); }
.n-jl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--n-tinta); color: var(--n-noche); font: 700 0.95rem var(--display); }
.n-foot p { margin: 0; }
.n-marks { font-size: 0.8rem; }

@media (prefers-reduced-motion: reduce) {
  .n-pic img, .n-pets img, .n-armario img, .n-badge { transition: none; }
}

/* Color de cada sabor (sin estilos en línea: la CSP no los permite). */
.n-c-gomi { --c: #a77bff; } .n-c-kai { --c: #ff5a6e; } .n-c-bruno { --c: #6f8bff; }
.n-c-sunny { --c: #ffd23f; } .n-c-pip { --c: #ff9a3c; } .n-c-lulu { --c: #4fe0a0; }
.n-c-zap { --c: #ff74c6; } .n-c-jet { --c: #33d6e0; } .n-c-otto { --c: #d08a4c; }

/* Tablero jugable con el reparto nuevo y en la noche de la portada. */
.n-sec img, .n-hero img, .n-etiqueta img, .n-foot img { height: auto; }
.n-body .sec-play { border-top: 0; background: radial-gradient(ellipse at 15% 0%, #1d3496 0%, transparent 55%), var(--n-noche); color: var(--n-tinta); }
.n-body .sec-play h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.01em; color: var(--n-tinta); }
.n-body .sec-play .lead, .n-body .sec-play .demo-help, .n-body .sec-play .demo-real, .n-body .sec-play .hint-ph { color: var(--n-tenue); }
.n-body .sec-play .demo-title { color: var(--n-tinta); }
.n-body .sec-play .rules li, .n-body .sec-play .step, .n-body .sec-play .hint, .n-body .sec-play .pill, .n-body .sec-play .auto-pill { color: var(--ink); }
.n-body .sec-play .play-text .step { box-shadow: 5px 5px 0 var(--n-limon); }
.n-body .sec-play .rules li { box-shadow: inset 0 0 0 var(--line) var(--n-regaliz), 4px 4px 0 rgb(0 0 0 / 0.35); }
.n-body .sec-play .hint-ph { border-color: rgb(255 255 255 / 0.25); }
.n-body .board-pals { display: none; }
.n-body .sec-play .board-frame { filter: drop-shadow(0 24px 40px rgb(0 0 0 / 0.45)); }
.n-body .z-A .cell-g, .n-body .z-A[data-state] .cell-g, .n-body .is-solved .z-A[data-state] .cell-g { background-image: url(/img/gomis/wt/sabor-A.9d98477b-160.webp); background-image: image-set(url(/img/gomis/wt/sabor-A.0b3ce91f-320.webp) 2x, url(/img/gomis/wt/sabor-A.9d98477b-160.webp) 1x); }
.n-body .z-B .cell-g, .n-body .z-B[data-state] .cell-g, .n-body .is-solved .z-B[data-state] .cell-g { background-image: url(/img/gomis/wt/sabor-B.a45e5920-160.webp); background-image: image-set(url(/img/gomis/wt/sabor-B.60183aab-320.webp) 2x, url(/img/gomis/wt/sabor-B.a45e5920-160.webp) 1x); }
.n-body .z-C .cell-g, .n-body .z-C[data-state] .cell-g, .n-body .is-solved .z-C[data-state] .cell-g { background-image: url(/img/gomis/wt/sabor-C.25d12ba4-160.webp); background-image: image-set(url(/img/gomis/wt/sabor-C.b7e3f827-320.webp) 2x, url(/img/gomis/wt/sabor-C.25d12ba4-160.webp) 1x); }
.n-body .z-D .cell-g, .n-body .z-D[data-state] .cell-g, .n-body .is-solved .z-D[data-state] .cell-g { background-image: url(/img/gomis/wt/sabor-D.f58838a9-160.webp); background-image: image-set(url(/img/gomis/wt/sabor-D.114ca714-320.webp) 2x, url(/img/gomis/wt/sabor-D.f58838a9-160.webp) 1x); }
.n-body .z-E .cell-g, .n-body .z-E[data-state] .cell-g, .n-body .is-solved .z-E[data-state] .cell-g { background-image: url(/img/gomis/wt/sabor-E.aa8a1f45-160.webp); background-image: image-set(url(/img/gomis/wt/sabor-E.c6caaf7b-320.webp) 2x, url(/img/gomis/wt/sabor-E.aa8a1f45-160.webp) 1x); }
.n-body .z-F .cell-g, .n-body .z-F[data-state] .cell-g, .n-body .is-solved .z-F[data-state] .cell-g { background-image: url(/img/gomis/wt/sabor-F.47f97bda-160.webp); background-image: image-set(url(/img/gomis/wt/sabor-F.5ec11bf5-320.webp) 2x, url(/img/gomis/wt/sabor-F.47f97bda-160.webp) 1x); }

/* Anexo 25: cinco eventos (Año Nuevo, entre Navidad y San Valentín). Año Nuevo es una ilustración a sangre, no un
   recorte: esquinas redondeadas. En móvil, el quinto va centrado debajo. */
.n-temp .n-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.n-temp figure img.is-foto { border-radius: 22px; object-fit: cover; }
@media (max-width: 860px) {
  .n-temp .n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-temp .n-grid > figure:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 9px); }
}

/* ── insignias App Store (poner_insignias.py) ── */
/* La que no toca se oculta con el atributo hidden (el display de .n-badge lo taparía). */
.n-badge[hidden] { display: none; }
/* Normas de Apple: la insignia no se gira, no se anima ni se deforma; aire libre de 1/4 de su alto alrededor. */
.n-badge, .n-badge:hover { transform: none; transition: none; }
.n-badge img { height: 56px; width: auto; max-width: none; }
.n-cta-precio { justify-content: center; margin-top: 28px; }
.n-final .n-badge { margin-top: 14px; }
/* ── fin insignias ── */