/* ============ Tipografías (locales) ============ */
@font-face {
  font-family: "Inkt";            /* título */
  src: url("../assets/fonts/inkt.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Collector Comic"; /* textos */
  src: url("../assets/fonts/collector-comic.otf") format("opentype");
  font-display: swap;
}

:root {
  --font-title: "Inkt", "Collector Comic", sans-serif;
  --font-text: "Collector Comic", "Comic Sans MS", sans-serif;
  --paper: #fdf8d8;
  --ink: #000;
  --kraft-ink: #3a2410;
  --tile: clamp(320px, 40vw, 432px); /* escala del cuadriculado */
}

*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-gutter: stable; }
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--paper) url("../assets/ui/fondo.png") repeat top center / var(--tile) var(--tile);
  color: var(--ink);
  font-family: var(--font-text);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }

/* ============ Header (una sola vez) ============ */
.hero {
  container-type: inline-size;
  width: min(100% - 2rem, 1080px);
  margin: 0 auto;
  padding-top: 6cqw;
  padding-bottom: 6cqw;
  text-align: center;
}
.hero__avatar { display: block; width: clamp(56px, 7cqw, 80px); height: auto; margin: 0 auto; }

.hero__title {
  margin: 4.6cqw 0 0;
  font: 400 10.2cqw/1.05 var(--font-title);
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__sub {
  margin: 2.6cqw auto 0;
  max-width: 34ch;
  font-size: clamp(14px, 4.2cqw, 20px);
  line-height: 1.35;
  text-transform: uppercase;
  text-wrap: balance;
}

.finder-wrap { position: relative; margin-top: 6cqw; }
.finder { position: relative; margin: 0; min-height: 58px; }
.finder__paper {
  display: block; width: 100%; height: auto; min-height: 58px;
  object-fit: fill; pointer-events: none; user-select: none;
}
.finder__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0 9%;
  border: 0; border-radius: 12px; background: transparent;
  font: 400 clamp(15px, 4.6cqw, 26px) var(--font-text);
  color: var(--kraft-ink);
    letter-spacing: .02em;
  text-transform: uppercase;
  -webkit-appearance: none; appearance: none;
}
.finder__input::placeholder { color: transparent; }  /* el texto visible es .finder__hint (el input recorta las tildes) */
.finder__hint {
  position: absolute; inset: 0; padding: 0 9%;
  display: flex; align-items: center; pointer-events: none;
  font: 400 clamp(15px, 4.6cqw, 26px)/1.2 var(--font-text);
  letter-spacing: .02em; color: rgba(58, 36, 16, .62); white-space: nowrap; overflow: hidden;
}
.finder__input:not(:placeholder-shown) ~ .finder__hint { display: none; }
.finder__input:focus-visible { outline: 3px dashed var(--ink); outline-offset: -10px; }
.finder__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ============ Galería ============ */
.sketchbook { width: min(100% - 2rem, 1100px); margin: clamp(2rem, 6vw, 4.5rem) auto 0; padding-bottom: 6rem; }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.5rem, 3vw, 1.5rem) clamp(.5rem, 3vw, 2rem);
}
.cell {
  container-type: inline-size;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1.04;
  opacity: 0; translate: 0 18px;
  transition: opacity .5s ease, translate .5s ease;
}
.cell.is-in { opacity: 1; translate: 0 0; }

.cut {
  position: relative; display: block;
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px));
  transition: transform .25s ease;
}
.cut:focus-visible { outline-offset: 8px; border-radius: 14px; }
.draw {
  display: block; width: auto; height: auto;
  max-width: 88cqw; max-height: 88cqw;   /* conserva proporción, mismo "peso" visual */
  filter: drop-shadow(0 3px 3px rgba(70, 50, 10, .25));
  user-select: none; -webkit-user-drag: none;
}
.tape {
  position: absolute; pointer-events: none;
  top: var(--tt, -4%); right: var(--tx, 2%);
  width: calc(40% * var(--ts, 1)); height: auto;
  transform: rotate(var(--tr, 38deg));
  filter: drop-shadow(0 1px 1px rgba(60, 40, 10, .25));
}

@media (min-width: 600px) { .hero__title { font-size: 6.1cqw; } .hero__title-last { margin-inline-start: .28em; } .hero__sub { max-width: none; font-size: clamp(14px, 1.72cqw, 20px); } .finder__input { font-size: clamp(16px, 2.4cqw, 28px); } .finder__hint { font-size: clamp(16px, 2.4cqw, 28px); } .finder { min-height: 0; } .finder__paper { min-height: 0; } }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359px) { .grid { grid-template-columns: 1fr; } .cell { max-width: 300px; margin: 0 auto; width: 100%; } }

@media (hover: hover) and (pointer: fine) {
  .cut:hover {
    transform: rotate(calc(var(--rot, 0deg) + 1.2deg)) translateY(calc(var(--dy, 0px) - 4px)) scale(1.03);
  }
  .cut:hover .draw { filter: drop-shadow(0 8px 7px rgba(70, 50, 10, .3)); }
}

/* Sin resultados (papel kraft) */
.empty {
  width: min(100%, 640px); margin: 2rem auto; padding: 2.4rem 12%;
  background: url("../assets/ui/buscador.png") center / 100% 100% no-repeat;
  text-align: center; color: var(--kraft-ink);
  font-size: clamp(15px, 3.4vw, 22px); line-height: 1.3;
  transform: rotate(-1deg);
}
.empty[hidden] { display: none; }
.empty p { margin: 0; }
.empty-js { text-align: center; }

/* ============ Modal ============ */
.modal {
  width: min(92vw, 560px); max-height: 94dvh;
  padding: 0; border: 0; background: transparent; color: var(--ink);
  overflow: visible; overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(45, 32, 12, .6); }
.modal[open] { animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.sheet {
  position: relative; max-height: 94dvh; overflow-x: hidden; overflow-y: auto;
  padding: clamp(2.2rem, 6vw, 3rem) clamp(1.2rem, 5vw, 2.4rem) clamp(1.6rem, 5vw, 2.4rem);
  background: var(--paper) url("../assets/ui/fondo.png") repeat top center / 320px 320px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .38);
  text-align: center;
}
.modal__close {
  position: absolute; top: .4rem; right: .5rem; z-index: 2;
  width: 48px; height: 48px; padding: 0; border: 0; background: none;
  font: 400 34px/1 var(--font-title); color: var(--ink); cursor: pointer;
}
.modal__art { position: relative; display: inline-block; max-width: 100%; margin-top: .6rem; }
.modal__img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(52dvh, 420px);
  filter: drop-shadow(0 4px 4px rgba(70, 50, 10, .25));
}
.modal__tape { position: absolute; top: -5%; right: 12%; width: 34%; height: auto; transform: rotate(38deg); pointer-events: none; }
.modal__name { margin: 1.1rem 0 0; font: 400 clamp(30px, 8vw, 46px)/1.05 var(--font-title); text-transform: uppercase; }
.modal__num { margin: .2rem 0 0; font-size: clamp(20px, 5vw, 26px); }

.btn {
  border: 0; font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;  /* ahora es <button>: mismo aspecto que el <a> anterior */
  display: inline-flex; align-items: center; justify-content: center;
  min-width: min(100%, 340px); min-height: 58px; margin-top: 1.3rem; padding: 0 1.6rem; white-space: nowrap;
  background: url("../assets/ui/buscador.png") center / 100% 100% no-repeat;
  color: var(--kraft-ink); text-decoration: none;
  font-size: clamp(13px, 3.8vw, 19px); letter-spacing: .02em;
  transition: transform .2s ease;
}
.btn:focus-visible { outline-offset: 2px; }
/* Estados del botón de descarga (el aspecto normal no cambia) */
.btn[data-state="soon"], .btn[data-state="busy"] { opacity: .6; cursor: default; }
.modal__msg { margin: .9rem auto 0; max-width: 34ch; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.3; color: var(--kraft-ink); }
.modal__msg[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .btn:hover:not([data-state="soon"]):not([data-state="busy"]) { transform: rotate(-1deg) scale(1.03); } }

/* ============ Sticker de redes (flotante) ============ */
/* Un solo asset para todas las pantallas. Oculto (y sin foco: tiene `inert`) hasta que app.js
   le pone .is-shown, 5 s después del primer scroll. Con el modal abierto se oculta
   (html.is-locked lo pone app.js). */
.social {
  --social-w: 320px;
  position: fixed; z-index: 5;
  right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: var(--social-w);
  opacity: 0; visibility: hidden; translate: 0 18px;
  pointer-events: none;                      /* el papel no bloquea los dibujos de abajo */
  transition: opacity .4s ease, translate .4s ease, visibility 0s linear .4s;
}
.social.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
html.is-locked .social { opacity: 0; visibility: hidden; pointer-events: none; }

.social__box { position: relative; }
.social__img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

/* Zonas clicables: % del tamaño de la imagen (350×117), así escalan con el sticker */
.social__link {
  position: absolute; top: 34.2%; height: 47.9%;
  pointer-events: auto; border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
}
.social__link:focus-visible { outline: 3px dashed var(--ink); outline-offset: -5px; }
.social__link--tiktok    { left: 39.0%; width: 14.3%; }
.social__link--instagram { left: 53.4%; width: 14.1%; }
.social__link--youtube   { left: 67.7%; width: 13.7%; }
.social__link--discord   { left: 81.6%; width: 14.1%; }

@media (max-width: 599px) {
  .social { right: 0; left: 0; margin-inline: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(calc(100vw - 32px), var(--social-w)); }
}

/* ============ Accesibilidad: menos movimiento ============ */
@media (prefers-reduced-motion: reduce) {
  .cell { opacity: 1; translate: none; transition: none; }
  .cut, .btn { transition: none; }
  .cut:hover { transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0px)); }
  .btn:hover { transform: none; }
  .modal[open] { animation: none; }
  .social { translate: none; transition: opacity .4s ease, visibility 0s linear .4s; }
  .social.is-shown { transition-delay: 0s; }
}