/* ==========================================================================
   Stadio
   Un solo tema: el amarillo de la marca. La barra y la ayuda usan el azul
   marino de los pósters oscuros. Esquinas: paneles 16px, controles en píldora.
   ========================================================================== */

@font-face {
  font-family: 'Finger Paint';
  src: url('../fonts/finger-paint.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --amarillo: #ffd21f;
  --verde: #03bf62;
  --azul: #0281cc;
  --tinta: #13202f;
  --papel: #fffdf0;
  --lima: #eaf6b4;
  --tinta-suave: #4b4a2c;
  --ama-osc: #f2b705;
  --ama-cla: #ffe672;

  --mano: 'Finger Paint', 'Comic Sans MS', cursive;
  /* Engrosa el trazo para acercarlo al marcador grueso de los pósters. */
  --grosor: 0.032em;
  --texto: 'Bricolage Grotesque', system-ui, sans-serif;

  --salida: cubic-bezier(0.23, 1, 0.32, 1);
  --mov: cubic-bezier(0.77, 0, 0.175, 1);

  --barra-w: 264px;
  --margen: clamp(16px, 4vw, 56px);
  --radio: 16px;
  --sombra: 0 16px 22px -10px rgb(110 74 0 / 0.42);

  /* capas */
  --z-barra: 50;
  --z-salto: 60;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--azul) var(--amarillo);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--amarillo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.5;
  caret-color: var(--azul);
  overflow-x: hidden;
}

::selection { background: var(--azul); color: var(--papel); }

img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, ol, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
.barra :focus-visible, .ayuda :focus-visible, .campo--tinta :focus-visible { outline-color: var(--amarillo); }
[tabindex='-1']:focus { outline: none; }

.icono { width: 1.25em; height: 1.25em; flex: none; }

.salto {
  position: fixed; left: 12px; top: -80px; z-index: var(--z-salto);
  background: var(--tinta); color: var(--amarillo);
  padding: 10px 16px; border-radius: 999px; font-weight: 600;
}
.salto:focus { top: 12px; }

.sin-js { padding: 24px var(--margen); font-weight: 600; }

/* ---------- Trazos y campos de color ---------- */
.trazo, .estrella { display: block; overflow: visible; pointer-events: none; }
.trazo--azul { color: var(--azul); }
.trazo--verde { color: var(--verde); }
.trazo--amarillo { color: var(--amarillo); }
.trazo--tinta { color: var(--tinta); }
.trazo--oscuro { color: var(--ama-osc); }
.trazo--claro { color: var(--ama-cla); }
.trazo path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.campo { border-radius: var(--radio); background: var(--fondo, var(--papel)); box-shadow: inset 0 0 0 5px var(--borde, transparent); }
.trazo--acento { color: var(--acento); }
.trazo--contra { color: var(--contra); }
.campo--tinta { background: var(--tinta); }
.campo--azul { background: var(--azul); }
.campo--verde { background: var(--verde); }
.campo--papel { background: var(--papel); }

/* ---------- Fondo: luz arriba, ámbar abajo y trazos dispersos ---------- */
.pagina {
  background:
    radial-gradient(95% 720px at 100% 0%, #ffe77a 0%, rgb(255 231 122 / 0) 68%),
    linear-gradient(180deg, var(--amarillo) 0%, #ffc50f 100%);
}
#vista { position: relative; }
#vista > :not(.fondo) { position: relative; z-index: 1; }
.fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fondo__pieza { position: absolute; display: block; }
.fondo__pieza svg { width: 100%; height: auto; }
.fondo__pieza--tonal .trazo { stroke-width: 22; }
.portada__escena > .trazo, .portada__escena > .estrella { transition: color 420ms ease; }
.portada__escena.alt > .trazo--azul { color: var(--verde); }
.portada__escena.alt > .trazo--verde { color: var(--azul); }
@supports (animation-timeline: view()) {
  .fondo__pieza--tonal { animation: deriva linear both; animation-timeline: view(); }
  .fondo__pieza--color { animation: deriva-corta linear both; animation-timeline: view(); }
  @keyframes deriva { from { translate: 0 70px; } to { translate: 0 -70px; } }
  @keyframes deriva-corta { from { translate: 0 -26px; } to { translate: 0 26px; } }
}

/* ---------- Logo ---------- */
.logo {
  display: block;
  aspect-ratio: 2105 / 724;
  background: var(--verde);
  -webkit-mask: url('../img/logo.svg') center / contain no-repeat;
  mask: url('../img/logo.svg') center / contain no-repeat;
}
.marca { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; }
.marca .logo { width: 112px; }
.marca__est { font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: 0.85rem; line-height: 1; margin-top: 2px; }

.cabecera { display: flex; justify-content: center; padding: 10px var(--margen) 2px; }

/* ---------- Barra de navegación: abajo en móvil, a la izquierda en escritorio ---------- */
.barra {
  position: fixed; z-index: var(--z-barra);
  inset: auto 0 0 0;
  background: var(--tinta); color: var(--papel);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  view-transition-name: barra;
}
.marca--barra, .barra__pie { display: none; }
.menu { display: flex; justify-content: space-around; gap: 2px; }
.menu li { flex: 1; min-width: 0; }
.menu__item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; padding: 8px 2px 6px;
  background: none; border: 0; border-radius: 14px;
  color: var(--papel); text-decoration: none;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--salida);
  -webkit-tap-highlight-color: transparent;
}
.menu__item .icono { width: 26px; height: 26px; transition: transform 300ms var(--salida); }
.menu__item:active { transform: scale(0.94); }
.menu__item--activo { color: var(--tinta); background: var(--amarillo); }
.menu__item--activo .icono { transform: rotate(-8deg) scale(1.08); }
.menu__raya { display: none; }

.pagina { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.ayuda { margin-top: auto; }
#vista { padding-bottom: clamp(72px, 11vw, 140px); }

@media (min-width: 1024px) {
  .cabecera { display: none; }
  .barra {
    inset: 0 auto 0 0; width: var(--barra-w);
    display: flex; flex-direction: column;
    padding: 30px 18px 22px;
  }
  .marca--barra { display: inline-flex; align-self: flex-start; margin: 0 0 34px 12px; align-items: flex-end; }
  .marca--barra .logo { width: 164px; }
  .marca--barra .marca__est { color: var(--lima); font-size: 0.95rem; }
  .menu { flex-direction: column; justify-content: flex-start; gap: 4px; }
  .menu__item {
    flex-direction: row; gap: 14px; padding: 10px 14px;
    font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: 1.6rem; font-weight: 400; line-height: 1.2;
    border-radius: 999px;
  }
  .menu__item .icono { width: 30px; height: 30px; color: var(--lima); }
  .menu__txt { position: relative; }
  .menu__raya {
    display: block; position: absolute; left: -4px; right: -4px; bottom: -9px;
    width: calc(100% + 8px); height: 12px;
  }
  .menu__raya path { stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 420ms var(--mov), opacity 100ms; }
  .menu__item--activo { background: none; color: var(--amarillo); }
  .menu__item--activo .icono { color: var(--amarillo); }
  .menu__item--activo .menu__raya path { stroke-dashoffset: 0; opacity: 1; }
  .barra__pie {
    display: grid; gap: 8px; margin-top: auto; padding: 0 14px;
    font-size: 0.92rem; color: var(--lima);
  }
  .barra__pie a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .barra__pie a:hover span { text-decoration: underline; }
  .pagina { margin-left: var(--barra-w); padding-bottom: 0; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .menu__item:not(.menu__item--activo):hover { background: rgb(255 210 31 / 0.12); }
  .menu__item:hover .icono { transform: rotate(-10deg) scale(1.1); }
}

/* ---------- Botones y pastillas ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; min-height: 56px;
  background: var(--tinta); color: var(--amarillo);
  border: 0; border-radius: 999px;
  font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: 1.45rem; line-height: 1.1; white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: transform 160ms var(--salida), box-shadow 200ms ease;
}
.btn .icono { transition: transform 240ms var(--salida); }
.btn:active { transform: scale(0.97); }
.btn--wa { background: var(--verde); color: var(--tinta); width: 100%; }
.btn--linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2.5px var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 22px 26px -12px rgb(110 74 0 / 0.5); }
  .btn:hover .icono { transform: translateX(4px); }
  .btn--linea:hover { box-shadow: inset 0 0 0 2.5px var(--tinta); background: rgb(19 32 47 / 0.07); }
  .btn:active { transform: scale(0.97); }
}

.pastilla {
  display: inline-flex; align-items: baseline; gap: 6px; flex: none;
  padding: 9px 16px; min-height: 44px;
  background: transparent; color: var(--tinta);
  border: 2.5px solid var(--tinta); border-radius: 999px;
  font-weight: 600; font-size: 1rem; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--salida);
}
.pastilla b { font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; font-size: 1.2rem; line-height: 1; }
.pastilla:active { transform: scale(0.96); }
.pastilla[aria-pressed='true'] { background: var(--tinta); color: var(--amarillo); transform: rotate(-2deg); }
.pastilla--mas { align-items: center; text-decoration: none; border-style: dashed; }
.pastilla--mas .icono { width: 1.05em; height: 1.05em; transition: transform 220ms var(--salida); }
.pastilla--mas:hover .icono { transform: translateX(3px); }
.pastilla--chica { min-height: 38px; padding: 6px 14px; font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) {
  .pastilla:not([aria-pressed='true']):hover { background: rgb(19 32 47 / 0.09); }
}

/* ---------- Títulos ---------- */
.titulo {
  position: relative; display: inline-block;
  font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; color: var(--azul);
  font-size: clamp(2.5rem, 5.4vw, 4rem); line-height: 1; letter-spacing: -0.01em;
  margin-bottom: clamp(26px, 4vw, 44px);
}
.titulo label { cursor: text; }
.titulo__raya { position: absolute; left: -2%; bottom: -0.32em; width: 104%; height: 0.3em; }
.titulo--pagina { font-size: clamp(2.8rem, 6.4vw, 4.75rem); }
.titulo--chico { font-size: clamp(2rem, 3.6vw, 2.75rem); margin-bottom: 22px; }
.entrada { max-width: 56ch; font-size: 1.125rem; margin: -6px 0 clamp(26px, 4vw, 44px); }

.bloque { padding: clamp(56px, 9vw, 112px) var(--margen) 0; max-width: 1280px; }
.bloque--cabeza { padding-top: clamp(28px, 5vw, 64px); }

/* ---------- Portada ---------- */
.portada {
  display: grid; gap: 12px;
  padding: 18px var(--margen) 30px; max-width: 1280px;
}
.portada h1 {
  font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; color: var(--verde);
  font-size: clamp(3.2rem, 14vw, 6rem); line-height: 1; letter-spacing: -0.01em;
  text-wrap: balance;
}
.portada__sub { max-width: 36ch; font-size: 1.0625rem; margin-top: 6px; }
.portada__texto { display: contents; }
.portada h1, .portada__sub { grid-column: 1; }
.portada__escena { order: 3; }
.jugadores { order: 4; }
.portada .btn { order: 5; justify-self: start; }

.jugadores {
  display: flex; gap: 8px; overflow-x: auto;
  margin-inline: calc(var(--margen) * -1); padding: 6px var(--margen) 8px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.jugadores::-webkit-scrollbar { display: none; }
.jugadores .pastilla { scroll-snap-align: center; }

.portada__escena {
  position: relative; aspect-ratio: 1 / 0.76; --mx: 0; --my: 0;
  perspective: 1100px; margin: 4px 0;
}
.portada__marco {
  position: absolute; inset: -3% 3% -3% 1%;
  transform: rotateY(calc(var(--mx) * 12deg)) rotateX(calc(var(--my) * -12deg)) translate(calc(var(--mx) * 10px), calc(var(--my) * 10px));
  transition: transform 600ms var(--salida);
}
.pc {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: pointer;
  transition: transform 700ms var(--salida), filter 500ms ease;
  animation: cae 760ms var(--salida) calc(var(--i) * 140ms + 80ms) backwards;
  -webkit-tap-highlight-color: transparent;
}
.pc--delante {
  z-index: 2;
  transform: translate(11%, 7%) rotate(-5deg) scale(0.82);
  filter: drop-shadow(0 24px 18px rgb(96 62 0 / 0.4));
}
.pc--detras {
  z-index: 1;
  transform: translate(-19%, -11%) rotate(9deg) scale(0.62);
  filter: drop-shadow(0 14px 12px rgb(96 62 0 / 0.3)) brightness(0.96);
}
@keyframes cae {
  from { opacity: 0; translate: 0 -46px; }
}
@media (hover: hover) and (pointer: fine) {
  .pc--detras:hover { transform: translate(-21%, -14%) rotate(5deg) scale(0.66); filter: drop-shadow(0 18px 14px rgb(96 62 0 / 0.34)); }
  .pc--delante:hover { transform: translate(11%, 6%) rotate(-3deg) scale(0.84); }
}

.portada__escena > .trazo, .portada__escena > .estrella { position: absolute; }
.p-onda { left: -5%; top: 7%; width: 36%; --d: 300; }
.p-estrella { right: 1%; top: -2%; width: 21%; }
.p-zigzag { right: -2%; top: 40%; width: 11%; --d: 520; }
.p-asterisco { left: 0; top: 50%; width: 13%; --d: 640; }
.p-rizo { left: 6%; bottom: -3%; width: 14%; --d: 760; }
.p-garabato { right: 4%; bottom: -4%; width: 32%; --d: 880; }

@media (min-width: 1024px) {
  .portada {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(16px, 3vw, 48px);
    min-height: min(100dvh, 880px); padding-top: clamp(24px, 5vh, 64px); padding-bottom: 40px;
  }
  .portada__texto { display: block; }
  .portada h1 { font-size: clamp(4rem, 6.6vw, 6rem); }
  .portada__sub { font-size: 1.2rem; margin: 22px 0 26px; }
  .jugadores { flex-wrap: wrap; overflow: visible; margin: 0 0 30px; padding: 0; max-width: 30rem; }
  .portada__escena { order: 0; margin: 0; aspect-ratio: 1 / 0.86; }
}

/* ---------- Cinta ---------- */
.cinta {
  background: var(--azul); color: var(--papel);
  transform: rotate(-1.6deg); margin: clamp(20px, 4vw, 44px) -3vw 0;
  padding: 12px 0; overflow: hidden;
  font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1;
}
.cinta__pista { display: flex; align-items: center; gap: 26px; width: max-content; padding-left: 26px; animation: cinta 34s linear infinite; }
.cinta__pista span { white-space: nowrap; }
.cinta .estrella { width: 0.9em; flex: none; }
.cinta.pausa .cinta__pista { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Rejilla de camisas ---------- */
.rejilla { display: grid; gap: clamp(34px, 5vw, 52px) clamp(16px, 2.4vw, 28px); }
.ficha { display: block; text-decoration: none; --sep: 9%; --alto: 92%; -webkit-tap-highlight-color: transparent; }
.ficha__panel {
  position: relative; display: block; height: clamp(250px, 66vw, 400px);
  transition: transform 300ms var(--salida);
}
.ficha__img {
  position: absolute; left: 50%; top: 50%; height: var(--alto, 100%); width: auto; max-width: none;
  translate: -50% -50%;
  filter: drop-shadow(0 16px 12px rgb(8 16 28 / 0.32));
  transition: transform 520ms var(--salida);
}
.ficha__img--frente { transform: translateX(calc(var(--sep) * -1)) rotate(-5deg); }
.ficha__img--atras { transform: translateX(calc(var(--sep) * 1.5)) translateY(3%) rotate(8deg) scale(0.9); }
.ficha__pie { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 4px 0; }
.ficha__nombre { font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1; }
.ficha__meta { font-weight: 600; text-align: right; }
.ficha:active .ficha__panel { transform: scale(0.985); }

@media (hover: hover) and (pointer: fine) {
  .ficha:hover .ficha__img--frente { transform: translateX(calc(var(--sep) * -2.1)) rotate(-10deg) scale(0.96); }
  .ficha:hover .ficha__img--atras { transform: translateX(calc(var(--sep) * 1.7)) translateY(-1%) rotate(5deg) scale(1.04); }
  .ficha:hover .ficha__nombre { text-decoration: underline; text-decoration-color: var(--azul); text-decoration-thickness: 4px; }
}

@media (min-width: 760px) {
  .rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ficha { grid-column: span 6; }
  .ficha__panel { height: clamp(280px, 30vw, 400px); }
  .ficha:nth-child(5n + 1), .ficha:nth-child(5n + 4) { grid-column: span 7; --sep: 19%; --alto: 106%; }
  .ficha:nth-child(5n + 2), .ficha:nth-child(5n + 3) { grid-column: span 5; --sep: 9%; --alto: 88%; }
  .ficha:nth-child(5n + 5) { grid-column: span 12; --sep: 30%; --alto: 110%; }
}

/* ---------- Así se pide ---------- */
.pasos__lista { display: grid; gap: 34px; }
.pasos__lista li { position: relative; max-width: 24rem; }
.pasos__lista strong { display: block; font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.6rem); line-height: 1.05; margin-bottom: 8px; }
.pasos__lista span { display: block; }
.pasos__flecha { display: none; }
@media (min-width: 900px) {
  .pasos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .pasos__lista li:nth-child(2) { margin-top: 56px; }
  .pasos__lista li:nth-child(3) { margin-top: 16px; }
  .pasos__flecha { display: block; position: absolute; top: 46px; right: -30%; width: 30%; max-width: 104px; --d: 300; }
  .pasos__lista li:nth-child(2) .pasos__flecha { transform: scaleY(-1) rotate(8deg); top: 34px; }
}

/* ---------- Aviso de clubes ---------- */
.aviso { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 56px); display: grid; gap: 16px; justify-items: start; }
.aviso h2 { font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; }
.aviso p { max-width: 44ch; font-size: 1.125rem; }
.aviso .btn { box-shadow: 0 16px 22px -10px rgb(0 70 34 / 0.5); margin-top: 6px; }
.aviso__espiral { position: absolute; right: -3%; top: -14%; width: clamp(140px, 24vw, 280px); opacity: 0.9; --d: 200; }

/* ---------- Página vacía ---------- */
.vacio { padding: clamp(20px, 5vw, 64px) var(--margen) 0; max-width: 820px; }
.vacio__dibujo { position: relative; height: clamp(180px, 34vw, 280px); max-width: 520px; margin-bottom: 26px; }
.vacio__dibujo > * { position: absolute; }
.v-carita { left: 28%; top: 6%; width: 40%; max-width: 210px; --d: 100; }
.v-estrella { left: 0; top: 0; width: 22%; }
.v-rizo { right: 6%; top: 10%; width: 15%; --d: 500; }
.v-rayas { left: 8%; bottom: 0; width: 20%; --d: 700; }
.vacio__acciones { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Buscar ---------- */
.buscar__campo {
  display: flex; align-items: center; gap: 12px; max-width: 640px;
  background: var(--papel); border: 3px solid var(--tinta); border-radius: 999px;
  padding: 4px 22px; box-shadow: var(--sombra);
  transition: box-shadow 200ms ease, transform 200ms var(--salida);
}
.buscar__campo:focus-within { transform: translateY(-2px); box-shadow: 0 22px 26px -12px rgb(110 74 0 / 0.5); }
.buscar__campo .icono { width: 26px; height: 26px; }
.buscar__campo input {
  flex: 1; min-width: 0; height: 56px; border: 0; background: none; outline: none;
  font: inherit; font-size: 1.2rem; font-weight: 500; color: var(--tinta);
}
.buscar__campo input::placeholder { color: #5d5a45; opacity: 1; }
.buscar__campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.buscar__ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.buscar__cuenta { font-weight: 600; margin: 30px 0 14px; min-height: 1.5em; }
.resultados { display: grid; gap: 14px; }
@media (min-width: 900px) { .resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.resultados li { animation: sube 420ms var(--salida) backwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes sube { from { opacity: 0; transform: translateY(12px); } }
.resultado {
  display: flex; align-items: center; gap: 16px; padding: 8px 18px 8px 8px;
  background: var(--papel); border-radius: var(--radio); text-decoration: none;
  transition: transform 180ms var(--salida);
}
.resultado__foto { position: relative; flex: none; width: 92px; height: 92px; border-radius: 12px; }
.resultado__foto img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: contain; transform: rotate(-5deg); transition: transform 300ms var(--salida); }
.resultado__txt { flex: 1; min-width: 0; display: grid; }
.resultado__nombre { font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: 1.7rem; line-height: 1.1; }
.resultado__meta { color: var(--tinta-suave); }
.resultado > .icono { width: 24px; height: 24px; transition: transform 220ms var(--salida); }
.resultado:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .resultado:hover .resultado__foto img { transform: rotate(4deg) scale(1.08); }
  .resultado:hover > .icono { transform: translateX(5px); }
}
.buscar__nada { display: grid; gap: 18px; justify-items: start; max-width: 44ch; font-size: 1.125rem; }
.buscar__nada[hidden] { display: none; }
.buscar__garabato { width: 160px; }

/* ---------- Página de camisa ---------- */
.producto { display: grid; gap: 28px; padding: 8px var(--margen) 0; max-width: 1280px; }
.escena { position: relative; aspect-ratio: 1 / 0.9; perspective: 1500px; }
.escena { overflow: hidden; }
/* Disco de luz detrás de la camisa: un tono más claro del propio fondo. */
.e-halo {
  position: absolute; left: 50%; top: 52%; width: 82%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fondo), #fff 16%);
  animation: late 6s ease-in-out infinite alternate;
}
@keyframes late { from { scale: 0.95; } to { scale: 1.04; } }
.e-d { position: absolute; animation: vaga var(--t, 7s) ease-in-out var(--r, 0s) infinite alternate; }
@keyframes vaga {
  from { translate: calc(var(--dx, 6px) * -1) calc(var(--dy, 8px) * -1); rotate: calc(var(--g, 6deg) * -1); }
  to { translate: var(--dx, 6px) var(--dy, 8px); rotate: var(--g, 6deg); }
}
.e-d path { animation: dibuja 900ms var(--mov) calc(var(--k, 0) * 90ms + 180ms) backwards; }
@keyframes dibuja { from { stroke-dashoffset: 1; } }
.e-onda { left: -3%; top: 4%; width: 34%; --t: 6.5s; --dx: 10px; --dy: 5px; --g: 5deg; }
.e-rizo { right: 7%; top: 3%; width: 11%; --t: 8s; --r: -2s; --dx: 4px; --dy: 10px; --g: 9deg; }
.e-zigzag { right: -1%; top: 38%; width: 10%; --t: 5.5s; --r: -1s; --dx: 5px; --dy: 12px; --g: 7deg; }
.e-garabato { left: -4%; bottom: -3%; width: 36%; --t: 9s; --r: -3s; --dx: 8px; --dy: 6px; --g: 4deg; }
.e-asterisco { left: 3%; top: 44%; width: 11%; animation: gira-lento 26s linear infinite; }
.e-estrella { right: 4%; bottom: 4%; width: 17%; animation: gira-lento 18s linear infinite reverse, brota 700ms var(--salida) 300ms backwards; }
@keyframes gira-lento { to { rotate: 360deg; } }
@keyframes brota { from { scale: 0; } }
.escena.pausa .e-d, .escena.pausa .e-halo { animation-play-state: paused; }

.giro {
  position: absolute; inset: 5%; padding: 0; background: none; border: 0;
  -webkit-tap-highlight-color: transparent;
}
.giro:focus-visible { outline-offset: 0; border-radius: var(--radio); }
.giro__cara {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 22px 16px rgb(8 16 28 / 0.36));
}
.giro__cara--frente { view-transition-name: camisa; }
.giro__cara--espalda, .giro--espalda .giro__cara--frente { visibility: hidden; }
.giro--espalda .giro__cara--espalda { visibility: visible; }

.producto--una-cara .caras { display: none; }
.producto--una-cara .giro { cursor: default; }
.caras { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.caras__btn {
  min-height: 44px; padding: 8px 18px; background: transparent; border: 2.5px solid var(--tinta); border-radius: 999px;
  font-weight: 600; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--salida);
}
.caras__btn:active { transform: scale(0.96); }
.caras__btn[aria-pressed='true'] { background: var(--tinta); color: var(--amarillo); }
.caras__pista { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 0.92rem; color: var(--tinta-suave); }

.volver { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; margin-bottom: 10px; }
.volver .icono { transform: scaleX(-1); transition: transform 200ms var(--salida); }
.volver:hover { text-decoration: underline; }
.volver:hover .icono { transform: scaleX(-1) translateX(4px); }

.producto h1 {
  font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; color: var(--verde);
  font-size: clamp(2.8rem, 6.2vw, 4.4rem); line-height: 1; letter-spacing: -0.01em; text-wrap: balance;
}
.precio { margin: 10px 0 26px; font-weight: 600; min-height: 1.6em; }
.precio { display: flex; align-items: baseline; gap: 10px; }
.precio b { display: inline-block; transform-origin: left bottom; font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; font-size: 2.6rem; line-height: 1; }
.precio small { font-size: 0.85rem; font-weight: 600; color: var(--tinta-suave); }
.nota-precio { margin-top: 22px; font-size: 0.85rem; font-weight: 600; color: var(--tinta-suave); }
.temporada {
  display: inline-block; vertical-align: middle; margin-left: 0.3em; padding: 0.2em 0.6em;
  border: 2px solid currentColor; border-radius: 999px;
  font-family: var(--texto); font-size: 0.8rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em;
  -webkit-text-stroke: 0; color: var(--tinta); white-space: nowrap;
}
.producto h1 .temporada { font-size: 0.95rem; }
.club + .club { margin-top: clamp(44px, 6vw, 72px); }
.club__nombre {
  display: inline-block; margin-bottom: 18px; padding: 4px 18px 6px;
  background: var(--tinta); color: var(--amarillo); border-radius: 999px; rotate: -1.5deg;
  font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15;
}
.club .nota-precio { margin-top: 22px; }
.ficha__meta b { display: block; font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.resultado__precio { font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: 1.3rem; line-height: 1.2; }

.grupo { margin-bottom: 26px; }
.grupo legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.grupo__ops { display: flex; flex-wrap: wrap; gap: 10px; }
.grupo--sacude { animation: sacude 380ms var(--salida); }
@keyframes sacude {
  20% { transform: translateX(-7px); } 45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); } 100% { transform: translateX(0); }
}
.falta {
  display: inline-block; margin-top: 12px; padding: 6px 14px;
  background: var(--tinta); color: var(--amarillo); border-radius: 999px; font-weight: 600;
  animation: sube 300ms var(--salida);
}
.falta[hidden] { display: none; }

.dorsal {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 22px 6px 6px; min-height: 60px;
  background: transparent; border: 2.5px solid var(--tinta); border-radius: 999px;
  font-weight: 600; font-size: 1.1rem;
  transition: background-color 180ms ease, color 180ms ease, transform 200ms var(--salida);
}
.dorsal b {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--tinta); color: var(--amarillo);
  font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; font-size: 1.55rem; line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, transform 300ms var(--salida);
}
.dorsal:active { transform: scale(0.97); }
.dorsal[aria-pressed='true'] { background: var(--tinta); color: var(--amarillo); }
.dorsal[aria-pressed='true'] b { background: var(--amarillo); color: var(--tinta); transform: rotate(-10deg) scale(1.06); }
@media (hover: hover) and (pointer: fine) {
  .dorsal:not([aria-pressed='true']):hover, .caras__btn:not([aria-pressed='true']):hover { background: rgb(19 32 47 / 0.09); }
}

.grupo__ops--tallas { gap: 10px 12px; }
.talla-caja { display: grid; justify-items: center; gap: 4px; }
.talla-caja--cambio { animation: brinca 360ms var(--salida) backwards; animation-delay: calc(var(--i) * 35ms); }
@keyframes brinca { from { transform: translateY(6px) scale(0.9); opacity: 0.4; } }
.talla {
  position: relative; display: grid; place-items: center;
  width: 60px; height: 60px; padding: 0;
  background: transparent; border: 2.5px solid var(--tinta); border-radius: 999px;
  font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: 1.45rem; line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, transform 200ms var(--salida);
}
.talla:active { transform: scale(0.94); }
.talla[aria-pressed='true'] { background: var(--tinta); color: var(--amarillo); transform: rotate(-6deg) scale(1.06); }
.talla:disabled { cursor: not-allowed; border-style: dashed; border-color: rgb(19 32 47 / 0.5); color: rgb(19 32 47 / 0.55); }
.talla__tachado { position: absolute; inset: 14% -8%; width: 116%; height: 72%; }
.talla__tachado path { stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 360ms var(--mov) calc(var(--i, 0) * 35ms), opacity 60ms calc(var(--i, 0) * 35ms); }
.talla:disabled .talla__tachado path { stroke-dashoffset: 0; opacity: 1; }
.talla__estado { font-size: 0.76rem; font-weight: 600; color: var(--tinta-suave); visibility: hidden; }
.talla-caja--agotada .talla__estado { visibility: visible; }
@media (hover: hover) and (pointer: fine) {
  .talla:not(:disabled):not([aria-pressed='true']):hover { background: rgb(19 32 47 / 0.09); transform: rotate(4deg); }
}

.resumen { font-weight: 600; margin-bottom: 14px; }
.nota { margin-top: 12px; font-size: 0.95rem; color: var(--tinta-suave); max-width: 44ch; }
.btn--wa .icono { width: 1.3em; height: 1.3em; }
.btn--wa:hover .icono { transform: rotate(-10deg) scale(1.1); }

@media (min-width: 900px) {
  .producto { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding-top: clamp(24px, 4vw, 56px); }
  .producto__lado { position: sticky; top: 24px; }
  .escena { aspect-ratio: 1 / 1; }
  .btn--wa { width: auto; min-width: 320px; }
}

.fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
@media (min-width: 760px) { .fila { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.mini { text-decoration: none; display: block; }
.mini__panel { position: relative; display: block; aspect-ratio: 1 / 0.82; transition: transform 300ms var(--salida); }
.mini__panel img { position: absolute; inset: -8% 4% 0; width: 92%; height: 108%; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 10px 8px rgb(8 16 28 / 0.3)); transition: transform 420ms var(--salida); }
.mini__nombre { display: block; font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: 1.6rem; line-height: 1.1; padding: 10px 4px 0; }
.mini:active .mini__panel { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .mini:hover .mini__panel img { transform: rotate(5deg) scale(1.07) translateY(-3%); }
}

/* ---------- Ayuda ---------- */
.ayuda {
  position: relative; overflow: hidden;
  background: var(--tinta); color: var(--papel);
  padding: clamp(40px, 7vw, 88px) var(--margen) clamp(28px, 4vw, 44px);
}
.ayuda__cabeza { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 28px; margin-bottom: clamp(28px, 5vw, 52px); }
.logo--grande { width: clamp(170px, 30vw, 320px); }
.ayuda h2 { font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; color: var(--amarillo); }
.ayuda__cols { display: grid; gap: 30px clamp(28px, 5vw, 72px); max-width: 1000px; position: relative; }
@media (min-width: 720px) { .ayuda__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ayuda h3 { font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--lima); margin-bottom: 8px; }
.ayuda p { max-width: 46ch; }
.encargo { display: grid; gap: 14px; justify-items: start; }
.encargo h3 { margin-bottom: 0; }
.encargo .btn { width: auto; min-width: 0; box-shadow: none; }
.contacto { display: grid; gap: 4px; }
.contacto a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; text-decoration-color: var(--verde); }
.contacto a:hover { color: var(--amarillo); }
.contacto .icono { color: var(--verde); width: 24px; height: 24px; }
.ayuda__cierre { margin-top: clamp(34px, 6vw, 64px); font-family: var(--mano); -webkit-text-stroke: var(--grosor) currentColor; font-size: 1.15rem; color: var(--lima); }
.ayuda__carita { position: absolute; right: clamp(16px, 6vw, 90px); top: clamp(26px, 5vw, 60px); width: clamp(64px, 11vw, 132px); transform: rotate(10deg); }
.ayuda__estrella { position: absolute; right: -40px; bottom: -40px; width: clamp(120px, 18vw, 230px); opacity: 0.9; }

/* ---------- Movimiento al entrar en pantalla (solo con JS activo) ---------- */
.js [data-aparece] .trazo path, .js .titulo[data-aparece] .trazo path { stroke-dashoffset: 1; opacity: 0; }
.js [data-aparece].visto .trazo path {
  stroke-dashoffset: 0; opacity: 1;
  transition: stroke-dashoffset 900ms var(--mov) calc(var(--d, 0) * 1ms), opacity 80ms calc(var(--d, 0) * 1ms);
}
.js [data-aparece] .estrella { opacity: 0; scale: 0.6; }
.js [data-aparece].visto .estrella { opacity: 1; scale: 1; transition: opacity 300ms 420ms, scale 700ms var(--salida) 420ms; }

.js .ficha[data-aparece], .js .mini[data-aparece], .js .pasos__lista li[data-aparece] { opacity: 0; transform: translateY(30px) rotate(-1.5deg); }
.js .ficha.visto, .js .mini.visto, .js .pasos__lista li.visto {
  opacity: 1; transform: none;
  transition: opacity 480ms ease calc(var(--i, 0) * 70ms), transform 760ms var(--salida) calc(var(--i, 0) * 70ms);
}
@media (min-width: 900px) {
  .js .pasos__lista li[data-aparece] { transform: translateY(30px); }
}

.flota { animation: flota 5.5s ease-in-out infinite alternate; }
.p-garabato.flota { animation-duration: 7s; animation-direction: alternate-reverse; }
@keyframes flota { from { translate: 0 -5px; rotate: -2deg; } to { translate: 0 7px; rotate: 3deg; } }
.pausa .flota { animation-play-state: paused; }

/* Las estrellas giran con el scroll: se mueven solo cuando tú te mueves. */
@supports (animation-timeline: view()) {
  .gira { animation: gira linear both; animation-timeline: view(); }
  @keyframes gira { from { rotate: -50deg; } to { rotate: 130deg; } }
}

/* ---------- Transiciones entre páginas ---------- */
::view-transition-old(root) { animation: 160ms ease-in both sale; }
::view-transition-new(root) { animation: 340ms var(--salida) both entra; }
@keyframes sale { to { opacity: 0; } }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
::view-transition-group(camisa) { animation-duration: 520ms; animation-timing-function: var(--mov); }
::view-transition-old(barra), ::view-transition-new(barra) { animation: none; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
  }
  .ficha__img, .portada__marco, .pc, .mini__panel img, .resultado__foto img { transition: none; }
  .js .ficha[data-aparece], .js .mini[data-aparece], .js .pasos__lista li[data-aparece] { transform: none; }
  .js [data-aparece] .trazo path { stroke-dashoffset: 0; }
  .cinta__pista { animation: none; }
  .gira, .fondo__pieza, .e-d, .e-halo { animation: none; }
  .e-d path { animation: none; }
}