/* Nettle Studios · la oficina 101, pintada con el mundo de Kachiban: mesa morada, oro de ficha y cartas marfil. */
:root {
  --mesa: #2c0b3a;
  --mesa-honda: #1d0727;
  --mesa-media: #43125a;
  --mesa-clara: #5c1f78;
  --oro: #f3c450;
  --oro-claro: #ffe3a1;
  --oro-hondo: #a8741d;
  --marfil: #fbf5ea;
  --tinta: #1f1426;
  --rojo-carta: #c8243a;
  --rosa: #f6b9cf;
  --rosa-marca: #b4577f;
  --turquesa: #1f6b6e;
  --turquesa-cara: #8fd6cf;
  --texto: #f7effa;
  --texto-suave: #dac9e4;

  --juego: "Baloo 2", "Hanken Grotesk", system-ui, sans-serif;
  --letra: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --borde-pagina: clamp(1rem, 4vw, 3rem);
  --ancho: 74rem;
  --salida: cubic-bezier(.16, 1, .3, 1);
  --paso: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--mesa); color: var(--texto); color-scheme: dark;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth; scroll-padding-top: 5rem;
  scrollbar-color: var(--mesa-clara) var(--mesa-honda);
}
body { margin: 0; font: 400 1.0625rem/1.6 var(--letra); caret-color: var(--oro); overflow-x: hidden; }
::selection { background: var(--oro); color: var(--tinta); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; text-decoration-color: var(--oro); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem .9rem; background: var(--oro); color: var(--tinta); font-weight: 700; border-radius: 6px; text-decoration: none; }
.saltar:focus { top: 1rem; }

/* ---------- Logotipo y barra ---------- */
.logo-nettle { display: inline-flex; align-items: baseline; gap: .3em; font: 800 1.55rem/1 var(--juego); letter-spacing: -.01em; color: var(--texto); }
.logo-nettle-sub { font: 600 .8rem/1 var(--letra); text-transform: uppercase; letter-spacing: .24em; color: var(--oro); }
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .5rem 2rem;
  padding: .65rem var(--borde-pagina);
  background: var(--mesa-honda);
  box-shadow: 0 1px 0 rgba(243, 196, 80, .35), 0 8px 24px -14px rgba(0, 0, 0, .7);
}
.barra-marca { text-decoration: none; padding: .4rem 0; }
.barra-nav { display: flex; gap: .25rem 1.5rem; margin-left: auto; }
.barra-nav a, .barra-madre { font: 600 .95rem/1 var(--letra); text-decoration: none; padding: .75rem 0; color: var(--texto-suave); transition: color .2s ease; }
.barra-nav a:hover, .barra-madre:hover { color: var(--oro); }
.barra-nav a[aria-current="page"] { color: var(--oro); }
.barra-madre { font-weight: 500; font-size: .875rem; }
.barra-madre span { font-weight: 700; color: var(--texto); }

/* ---------- Botones ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 2rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .8rem 1.5rem;
  font: 800 1.05rem/1 var(--juego); text-decoration: none; border-radius: 999px; cursor: pointer;
  transition: transform .18s var(--salida), box-shadow .2s ease, background-color .2s ease;
}
.boton:active { transform: translateY(1px) scale(.98); }
.boton-oro { color: var(--tinta); background: linear-gradient(180deg, #ffe08a, var(--oro) 55%, #d9a23a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 var(--oro-hondo), 0 12px 22px -10px rgba(0, 0, 0, .7); }
.boton-oro:hover { transform: translateY(-1px); }
.boton-oro:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 0 var(--oro-hondo); transform: translateY(3px); }
.boton-linea { color: var(--texto); border: 2px solid rgba(243, 196, 80, .7); }
.boton-linea:hover { background: rgba(243, 196, 80, .12); }
.boton-texto { font: 700 .95rem/1 var(--letra); color: var(--oro); background: none; border: 0; padding: .75rem .25rem; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; }
.boton-texto:hover { color: var(--oro-claro); }

/* ---------- Portada ---------- */
.portada {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
  max-width: var(--ancho); margin: 0 auto; min-height: calc(100svh - 4rem);
  padding: clamp(2.5rem, 6vw, 5rem) var(--borde-pagina);
  background: radial-gradient(60% 70% at 75% 45%, rgba(92, 31, 120, .9), transparent 70%);
}
.portada-icono { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); margin-bottom: 1.25rem; }
.nombre { font: 800 clamp(3.8rem, 2.4rem + 6vw, 6rem)/.88 var(--juego); color: var(--oro); letter-spacing: -.02em; text-shadow: 0 4px 0 var(--oro-hondo), 0 14px 30px rgba(0, 0, 0, .5); }
.lema { margin-top: 1rem; font: 700 clamp(1.3rem, 1rem + 1.2vw, 1.85rem)/1.2 var(--juego); }
.entrada { margin-top: 1rem; max-width: 33rem; color: var(--texto-suave); font-size: clamp(1.0625rem, 1rem + .25vw, 1.175rem); }
.pronto { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.75rem; padding: .55rem 1rem; font-weight: 700; color: var(--oro-claro); border-radius: 999px; background: rgba(243, 196, 80, .12); box-shadow: inset 0 0 0 1px rgba(243, 196, 80, .45); }
.pronto-punto { width: .6rem; height: .6rem; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 0 rgba(243, 196, 80, .6); animation: latido 2.4s ease-out infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(243, 196, 80, .55); } 70%, 100% { box-shadow: 0 0 0 .55rem rgba(243, 196, 80, 0); } }

/* La partida en miniatura */
.mesa-caja { position: relative; margin: 0; justify-self: center; width: min(100%, 34rem); }
.mesa { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.mesa-fondo { fill: var(--mesa-media); stroke: var(--oro); stroke-width: 3; }
.celda rect { fill: var(--marfil); }
.celda text { font: 700 13px/1 var(--juego); }
.celda.rojo { fill: var(--rojo-carta); }
.celda.negro { fill: var(--tinta); }
.ficha { transform-box: fill-box; transform-origin: center; }
.ficha-aro { fill: #d9a840; stroke: #7a5414; stroke-width: 1.5; }
.ficha-r .ficha-cara { fill: var(--rosa); }
.ficha-r .ficha-marca { fill: var(--rosa-marca); }
.ficha-t .ficha-cara { fill: var(--turquesa); }
.ficha-t .ficha-marca { fill: var(--turquesa-cara); }
.kachi-linea { stroke: var(--oro); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(255, 214, 120, .8)); }
.sello-kachi {
  position: absolute; left: 50%; top: 44%; translate: -50% -50%; rotate: -8deg;
  padding: .2rem 1.1rem .05rem; pointer-events: none;
  font: 800 clamp(2rem, 1.4rem + 2.5vw, 3.2rem)/1.1 var(--juego); color: var(--oro);
  background: var(--mesa-honda); border: 3px solid var(--oro); border-radius: 14px;
  text-shadow: 0 2px 0 var(--oro-hondo);
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .7);
}
.mesa-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem; margin-top: 1rem; color: var(--texto-suave); font-size: .95rem; }

.mesa-caja.jugando .ficha { animation: caer .5s var(--salida) both; animation-delay: calc(var(--i) * var(--paso) + 250ms); }
.mesa-caja.jugando .kachi-linea { animation: trazar .55s cubic-bezier(.65, 0, .35, 1) both; animation-delay: calc(9 * var(--paso) + 250ms); }
.mesa-caja.jugando .sello-kachi { animation: sellar .55s var(--salida) both; animation-delay: calc(9 * var(--paso) + 700ms); }
@keyframes caer { from { opacity: 0; transform: translateY(-28px) scale(1.35); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sellar { from { opacity: 0; scale: 1.9; rotate: -18deg; } to { opacity: 1; scale: 1; rotate: -8deg; } }

/* ---------- Bloques ---------- */
.bloque { max-width: var(--ancho); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) var(--borde-pagina); }
.bloque-titulo { font: 800 clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem)/1 var(--juego); color: var(--texto); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); counter-reset: none; }
.pasos li { color: var(--texto-suave); font-size: 1.05rem; }
.pasos strong { display: block; color: var(--texto); font: 800 1.45rem/1.2 var(--juego); margin-bottom: .35rem; }
.paso-n {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; border-radius: 50%;
  font: 800 1.5rem/1 var(--juego); color: var(--tinta);
  background: radial-gradient(circle at 35% 30%, #ffe9b0, var(--oro) 55%, #b98420);
  box-shadow: 0 0 0 3px var(--mesa), 0 0 0 5px rgba(243, 196, 80, .5), 0 8px 14px -6px rgba(0, 0, 0, .7);
}
.especiales { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 18px; background: var(--marfil); color: var(--tinta); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); }
.especiales h3 { font: 800 1.5rem/1.15 var(--juego); margin-bottom: 1.25rem; }
.especiales dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
.especiales div { padding-top: .9rem; border-top: 1px solid rgba(31, 20, 38, .15); }
.especiales dt { font-weight: 700; }
.especiales dd { margin: .15rem 0 0; color: #4b3d55; }

.bloque-capturas { max-width: none; padding-left: 0; padding-right: 0; background: var(--mesa-honda); }
.bloque-capturas .bloque-titulo { max-width: var(--ancho); margin-left: auto; margin-right: auto; padding: 0 var(--borde-pagina); }
.carrete {
  list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(12.5rem, 42vw, 15rem); gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--borde-pagina);
  padding: .5rem max(var(--borde-pagina), calc((100vw - var(--ancho)) / 2 + var(--borde-pagina))) 1.5rem;
  scrollbar-width: thin;
}
.carrete li { scroll-snap-align: start; }
.nota-capturas { max-width: var(--ancho); margin: .5rem auto 0; padding: 0 var(--borde-pagina); color: var(--texto-suave); font-size: .9rem; }
.barra-nav .idioma { color: var(--oro); }
.carrete figure { margin: 0; }
.carrete img { border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 36px -18px rgba(0, 0, 0, .9); }
.carrete figcaption { margin-top: .75rem; font-weight: 600; color: var(--texto-suave); font-size: .95rem; }

.bloque-modos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.lista-fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.lista-fichas li { position: relative; padding-left: 1.75rem; color: var(--texto-suave); }
.lista-fichas li::before { content: ""; position: absolute; left: 0; top: .38em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--rosa); box-shadow: inset 0 0 0 2px #d9a840; }
.lista-fichas li:nth-child(even)::before { background: var(--turquesa); }
.limpio p { color: var(--texto-suave); max-width: 34rem; }
.aviso-compras { margin-top: 1rem; font-size: .95rem; }

.documentos { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(243, 196, 80, .3); }
.documentos li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 2rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(243, 196, 80, .3); }
.doc-principal { font: 800 1.3rem/1.2 var(--juego); text-decoration: none; padding: .25rem 0; }
.doc-principal:hover { color: var(--oro); }
.documentos span { color: var(--texto-suave); }
.doc-idioma { font-weight: 600; color: var(--texto-suave); padding: .5rem 0; }

.bloque-contacto { text-align: center; }
.bloque-contacto > p:first-of-type { color: var(--texto-suave); }
.correo { margin-top: 1.25rem; }
.correo a { font: 800 clamp(1.4rem, .9rem + 2.6vw, 2.6rem)/1.15 var(--juego); color: var(--oro); overflow-wrap: anywhere; }

.pie { padding: 2.5rem var(--borde-pagina) 3rem; background: var(--mesa-honda); color: var(--texto-suave); font-size: .9rem; text-align: center; }
.pie p { max-width: 52rem; margin: 0 auto .6rem; }

/* ---------- Páginas legales (modo lectura) ---------- */
.legal { background: var(--marfil); color: var(--tinta); color-scheme: light; }
.legal ::selection { background: #f7d77f; color: var(--tinta); }
.legal .barra-nav { gap: .25rem 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
.legal .barra-nav .idioma { color: var(--oro); }
.legal main { max-width: 46rem; margin: 0 auto; padding: 2.75rem 1.25rem 3.5rem; }
.legal main a { color: #6a2a8a; text-decoration-color: rgba(106, 42, 138, .45); overflow-wrap: anywhere; }
.legal h1 { font: 800 clamp(2rem, 1.5rem + 2vw, 2.75rem)/1.08 var(--juego); color: #3b0f4f; margin: 0 0 .5rem; letter-spacing: -.01em; }
.legal .meta { color: #5c4e66; font-size: .9375rem; margin: 0 0 2rem; }
.legal h2 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 700; margin: 2.75rem 0 .75rem; scroll-margin-top: 5rem; color: #2c0b3a; }
.legal h2 .num { color: #8a6a2a; font-variant-numeric: tabular-nums; font-weight: 600; margin-right: .15em; }
.legal h3 { font-size: 1.0625rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.legal p, .legal ul, .legal ol { margin: 0 0 1rem; max-width: 68ch; }
.legal ul, .legal ol { padding-left: 1.4rem; }
.legal li { margin: .35rem 0; }
.legal li::marker { color: #8a6a2a; }
.legal strong { font-weight: 700; }
.legal code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .875em; background: #f1e8d8; border: 1px solid #e3d6bf; border-radius: 4px; padding: .05em .3em; overflow-wrap: anywhere; }
.legal .pendiente { background: #fff1a6; color: #4a3b00; border: 1px solid #c9a400; border-radius: 4px; padding: .05em .35em; font-weight: 600; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.legal .resumen { background: #f4ead8; border: 1px solid #e3d6bf; border-radius: 12px; padding: .25rem 1.25rem .5rem; margin: 0 0 2.5rem; }
.legal .resumen h2 { margin-top: 1rem; }
.legal .indice { border-top: 1px solid #e3d6bf; border-bottom: 1px solid #e3d6bf; padding: .25rem 0 1rem; margin: 0 0 1rem; }
.legal .indice h2 { font-size: .9375rem; color: #5c4e66; font-weight: 600; margin: 1rem 0 .5rem; }
.legal .indice ol { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 2rem; max-width: none; }
.legal .indice li { margin: 0; break-inside: avoid; }
.legal .indice a { display: flex; align-items: baseline; padding: .3rem 0; text-decoration: none; }
.legal .indice a:hover { text-decoration: underline; }
.legal .indice .num { flex: none; color: #8a6a2a; font-variant-numeric: tabular-nums; min-width: 1.9em; }
.legal .tabla { margin: 1rem 0 1.25rem; overflow-x: auto; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .65rem .75rem .65rem 0; border-bottom: 1px solid #e3d6bf; }
.legal th { color: #5c4e66; font-weight: 600; font-size: .8125rem; letter-spacing: .01em; border-bottom-color: var(--tinta); }
.legal .resumen td:first-child { font-weight: 600; width: 30%; }
.legal .resumen tr:last-child td { border-bottom: 0; }
.legal .tarjetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.5rem 0; }
.legal .tarjeta { background: #f4ead8; border: 1px solid #e3d6bf; border-radius: 12px; padding: 1rem 1.25rem; }
.legal .tarjeta h2 { margin: 0 0 .35rem; font-size: 1.125rem; }
.legal .tarjeta p { margin: 0 0 .75rem; font-size: .9375rem; color: #5c4e66; }
.legal .tarjeta .idiomas { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; }
.legal .tarjeta .idiomas a { display: inline-block; padding: .4rem 0; font-weight: 600; }
.legal .pie { background: #f1e7d6; color: #5c4e66; text-align: left; }
.legal .pie a { color: #6a2a8a; }

@media (prefers-color-scheme: dark) {
  .legal { background: #1a0b22; color: #efe6f3; color-scheme: dark; }
  .legal h1 { color: var(--oro); }
  .legal h2 { color: #f7effa; }
  .legal h2 .num, .legal li::marker, .legal .indice .num { color: #d9b061; }
  .legal .meta, .legal th, .legal .indice h2, .legal .tarjeta p { color: #c4b3cf; }
  .legal main a, .legal .pie a { color: #e3b8ff; text-decoration-color: rgba(227, 184, 255, .5); }
  .legal .resumen, .legal .tarjeta { background: #26112f; border-color: #3d2149; }
  .legal .indice, .legal th, .legal td { border-color: #3d2149; }
  .legal th { border-bottom-color: #efe6f3; }
  .legal code { background: #26112f; border-color: #3d2149; }
  .legal .pie { background: #13071a; color: #c4b3cf; }
  .legal ::selection { background: #6a3a00; color: #fff; }
}

/* ---------- 404 ---------- */
.perdido { min-height: calc(100svh - 8rem); display: grid; place-items: center; text-align: center; padding: 3rem var(--borde-pagina); }
.perdido .nombre { font-size: clamp(3rem, 2rem + 5vw, 5rem); }
.perdido p { margin: 1rem auto 0; max-width: 32rem; color: var(--texto-suave); }
.perdido .acciones { justify-content: center; }

/* ---------- Tamaños ---------- */
@media (max-width: 60rem) {
  .portada { grid-template-columns: 1fr; min-height: 0; gap: 1.5rem; }
  .portada-texto { display: contents; }
  .portada-icono, .nombre, .lema { order: 1; }
  .portada-icono { margin-bottom: -.5rem; }
  .lema { margin-top: -.75rem; }
  .mesa-caja { order: 2; }
  .entrada { order: 3; margin-top: 0; }
  .pronto { order: 4; margin-top: 0; justify-self: start; }
  .portada .acciones { order: 5; margin-top: 0; }
  .pasos { grid-template-columns: 1fr; }
  .bloque-modos { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .barra { gap: .5rem 1rem; }
  .barra-nav { margin-left: auto; }
  .barra-nav a:not(.idioma) { display: none; }
  .barra-madre { margin-left: 0; }
  .legal .barra { flex-wrap: wrap; position: static; }
  .legal .barra-nav { display: flex; width: 100%; justify-content: flex-start; margin-left: 0; }
  .legal .barra-madre { display: none; }
  .especiales dl { grid-template-columns: 1fr; }
  .documentos li { grid-template-columns: 1fr auto; }
  .documentos span { grid-column: 1 / -1; grid-row: 2; }
  .legal .tabla { overflow: visible; }
  .legal table, .legal thead, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal tr { border-bottom: 1px solid #e3d6bf; padding: .5rem 0; }
  .legal td { border: 0; padding: .2rem 0; }
  .legal td::before { content: attr(data-rotulo); display: block; color: #5c4e66; font-size: .8125rem; font-weight: 600; }
  .legal .resumen td:first-child { width: 100%; }
  .legal .resumen td:first-child::before, .legal .resumen td + td::before { display: none; }
  .legal .resumen tr:last-child { border-bottom: 0; }
}
@media print {
  .legal { background: #fff; color: #000; }
  .legal .barra, .legal .indice, .saltar { display: none; }
  .legal main { padding-top: 1rem; }
  .legal h2 { break-after: avoid; }
  .legal tr { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}