/* spartraxx.dev — hoja de cuaderno de ingeniería, hecha a mano. */

:root {
  --papel: #eef3e2;
  --cuadro: #d6e2c8;
  --cuadro-fuerte: #bfd0ad;
  --lapiz: #3b3d40;
  --lapiz-suave: #55585c;
  --tinta: #1f3fa0;
  --rojo: #b3261e;
  --impreso: #4d6a3a;
  --borde-form: #6f8a5a;
  --posit: #fff3a8;
  --posit-doblez: #f0e07c;
  --cinta: rgba(232, 220, 184, 0.82);
  --foto: #fdfdfb;
  --mano: 'Architects Daughter', 'Comic Sans MS', cursive;
  --birome: 'Caveat', 'Segoe Print', cursive;
  --imprenta: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;

  /* Lo que hay apoyado en la mesa, a los costados del cuaderno. Son dibujos de /img/mesa/, vistos desde arriba.
   --margen es cuánta mesa se ve de cada lado; con poca, las cosas se arriman al cuaderno. */
.mesa { display: none; }
@media (min-width: 1340px) {
  .mesa { --margen: calc((100vw - 1080px) / 2); display: block; position: absolute; inset: 0; pointer-events: none; }
  .mesa i { position: absolute; display: block; background: center / contain no-repeat; filter: drop-shadow(5px 8px 5px rgba(0, 0, 0, 0.5)); }

  /* A la izquierda: la taza de café y, más abajo, la birome azul y la microfibra roja. */
  /* La taza mide lo que una taza al lado de una birome (unos 8 cm de boca contra 15 de largo).
     Con poca mesa no entra entera: se asoma desde el borde de la pantalla, con el asa para afuera. */
  .mesa .taza {
    right: calc(100% + clamp(20px, (var(--margen) - 250px) * 0.5, 150px));
    top: 44px; width: 200px; height: 200px;
    background-image: url(img/mesa/taza.svg);
    filter: none; /* trae su sombra dibujada: así el vapor no proyecta sombra */
  }
  .mesa .lapicera {
    right: calc(100% + clamp(36px, var(--margen) * 0.3, 150px));
    top: 336px; width: 28px; height: 299px;
    background-image: url(img/mesa/lapicera.svg);
    transform: rotate(9deg);
  }
  .mesa .microfibra {
    right: calc(100% + clamp(92px, var(--margen) * 0.62, 280px));
    top: 388px; width: 26px; height: 279px;
    background-image: url(img/mesa/microfibra.svg);
    transform: rotate(-5deg);
  }

  /* A la derecha: la regla y, más abajo, el resaltador y el fibrón. */
  .mesa .regla {
    left: calc(100% + clamp(26px, var(--margen) * 0.2, 90px));
    top: 120px; width: 56px; height: 560px;
    background-image: url(img/mesa/regla.svg);
    transform: rotate(2.5deg);
  }
  .mesa .resaltador {
    left: calc(100% + clamp(28px, var(--margen) * 0.24, 110px));
    top: 812px; width: 46px; height: 204px;
    background-image: url(img/mesa/resaltador.svg);
    transform: rotate(-13deg);
  }
  .mesa .fibron {
    left: calc(100% + clamp(40px, var(--margen) * 0.55, 250px));
    top: 1038px; width: 40px; height: 255px;
    background-image: url(img/mesa/fibron.svg);
    transform: rotate(6deg);
  }

  /* Entre la regla y el resaltador, la goma de dos colores. */
  .mesa .goma {
    left: calc(100% + clamp(16px, var(--margen) * 0.16, 80px));
    top: 716px; width: 124px; height: 53px;
    background-image: url(img/mesa/goma.svg);
    transform: rotate(-17deg);
    filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.5));
  }

  /* Abajo a la izquierda: el lápiz recién afilado, con el sacapuntas y la viruta que quedó. */
  .mesa .lapiz {
    right: calc(100% + clamp(62px, var(--margen) * 0.44, 200px));
    top: 716px; width: 22px; height: 312px;
    background-image: url(img/mesa/lapiz.svg);
    transform: rotate(-11deg);
    filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.5));
  }
  .mesa .sacapuntas {
    right: calc(100% + clamp(26px, var(--margen) * 0.2, 100px));
    top: 1050px; width: 58px; height: 40px;
    background-image: url(img/mesa/sacapuntas.svg);
    transform: rotate(-24deg);
    filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, 0.5));
  }
  .mesa .viruta {
    right: calc(100% + clamp(0px, var(--margen) * 0.2 - 22px, 84px));
    top: 1074px; width: 140px; height: 103px;
    background-image: url(img/mesa/viruta.svg);
    filter: drop-shadow(1px 2px 1.5px rgba(0, 0, 0, 0.5));
  }

  /* El vapor del café: dos nubecitas que suben y se deshacen. */
  .mesa .taza::before, .mesa .taza::after {
    content: "";
    position: absolute;
    left: 38%; top: 16%; width: 30%; height: 42%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
    filter: blur(5px);
    opacity: 0;
    animation: vapor 5.5s ease-in-out infinite;
  }
  .mesa .taza::after { left: 54%; top: 24%; --hacia: -12px; animation-delay: -2.6s; animation-duration: 6.5s; }
}
@media (min-width: 1500px) {
  .mesa .taza { width: 232px; height: 232px; top: 36px; }
  .mesa .lapicera { top: 352px; }
  .mesa .microfibra { top: 404px; }
}
@keyframes vapor {
  0% { transform: translate(0, 8px) scale(0.6); opacity: 0; }
  30% { opacity: 0.85; }
  100% { transform: translate(var(--hacia, 14px), -44px) scale(1.6); opacity: 0; }
}
/* Con el casillero "Animación" en "no", el vapor se queda quieto. */
.quieto .mesa .taza::before, .quieto .mesa .taza::after { animation: none; opacity: 0.45; }

/* Las banderitas adhesivas que marcan cada hoja del cuaderno: una por pestaña. */
  --c-recepcion: #ffe45e;
  --c-juegos: #8fd0f5;
  --c-apps: #ff9fb8;
  --c-jugar: #ffb35c;

  /* La mesa sobre la que está apoyado el cuaderno. */
  --mesa: #3b2c21;
  --borde-hoja: #b3bfa1;
}

/* Cada página dice en qué pestaña está: <body data-seccion="juegos">. */
[data-seccion="recepcion"] { --seccion: var(--c-recepcion); }
[data-seccion="juegos"] { --seccion: var(--c-juegos); }
[data-seccion="apps"] { --seccion: var(--c-apps); }
[data-seccion="jugar"] { --seccion: var(--c-jugar); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--lapiz);
  font-family: var(--mano);
  font-size: 19px;
  line-height: 1.55;
  /* La mesa: madera oscura con un poco de veta. */
  background-color: var(--mesa);
  background-image:
    url(img/grano.svg),
    repeating-linear-gradient(1deg,
      rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 9px,
      rgba(255, 255, 255, 0.03) 9px 10px, transparent 10px 23px,
      rgba(0, 0, 0, 0.1) 23px 25px, transparent 25px 41px),
    linear-gradient(180deg, #4a382b, #33251b);
  background-size: 240px 240px, auto, auto;
}

/* El papel cuadriculado: la hoja de arriba, las de abajo y la que vuelve cuando se pasa para atrás. */
.pagina, .pila, .hoja-nueva, .doblez-dorso {
  background-color: var(--papel);
  background-image:
    url(img/grano.svg),
    linear-gradient(var(--cuadro-fuerte) 1px, transparent 1px),
    linear-gradient(90deg, var(--cuadro-fuerte) 1px, transparent 1px),
    linear-gradient(var(--cuadro) 1px, transparent 1px),
    linear-gradient(90deg, var(--cuadro) 1px, transparent 1px);
  background-size: 240px 240px, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  border-radius: 2px 7px 7px 2px;
}

a { color: var(--tinta); }
a:hover { color: var(--rojo); }
a:focus-visible { outline: 2px dashed var(--rojo); outline-offset: 4px; }

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

/* Los filtros que hacen que el trazo no salga perfecto (están en cada página, en <svg class="filtros">). */
.filtros { position: absolute; width: 0; height: 0; overflow: hidden; }
.a-mano { filter: url(#mano); }
.trazo { filter: url(#trazo); }

/* Para torcer cualquier cosa un poquito: style="--g: -1deg; --x: 2px". */
.t { transform: rotate(var(--g, 0deg)) translate(var(--x, 0px), var(--y, 0px)); }

/* El cuaderno: arriba asoman las banderitas, debajo están las hojas apiladas y encima la hoja que se lee. */
.hoja { overflow: clip; padding: 30px 22px 80px; }
.cuaderno { position: relative; max-width: 1080px; margin: 0 auto; }
.hojas { position: relative; z-index: 1; }

/* Las hojas de abajo. Cada par de sombras es una hoja más que asoma por arriba (papel + su borde). */
.pila {
  position: absolute;
  inset: 0;
  box-shadow:
    0 -1px 0 0 var(--borde-hoja),
    3px -5px 0 -1px #e9eedc, 3px -6px 0 -1px var(--borde-hoja),
    -2px -10px 0 -2px #e5ebd8, -2px -11px 0 -2px var(--borde-hoja),
    4px -15px 0 -3px #e1e7d3, 4px -16px 0 -3px #a5b192,
    0 22px 44px rgba(0, 0, 0, 0.5);
}

.pagina {
  --hueco: 60px;
  position: relative;
  min-height: 70vh;
  padding: 40px 46px 64px 78px;
  display: flex;
  flex-direction: column;
  gap: var(--hueco);
  box-shadow: 0 0 0 1px rgba(111, 138, 90, 0.22);
  /* Los tamaños grandes (el nombre, los títulos) se miden contra el ancho de la hoja: "cqi". */
  container-type: inline-size;
}
/* Pasar de hoja (lo mueve cuaderno.js): la hoja se dobla desde la esquina de abajo y pasa por delante.
   .hoja-nueva es la hoja en blanco que vuelve cuando se pasa para atrás. */
.hoja-nueva { position: absolute; inset: 0; z-index: 2; box-shadow: 0 0 0 1px rgba(111, 138, 90, 0.22); }
.doblez, .doblez-abajo, .doblez-espejo, .doblez-dorso { position: absolute; inset: 0; pointer-events: none; }
/* La hoja doblada pasa por arriba del anillado y lo tapa; al terminar de dar la vuelta se pierde por el borde de los anillos. */
.doblez { z-index: 4; clip-path: inset(-700px -300px -700px -15px); }
.doblez-abajo { overflow: hidden; border-radius: 2px 7px 7px 2px; }
.doblez-espejo { transform-origin: 0 0; }
.doblez-dorso::before { content: ""; position: absolute; inset: 0; background: rgba(86, 96, 62, 0.09); } /* el dorso, apenas más oscuro */
.doblez-luz, .doblez-abajo i { position: absolute; left: 0; top: 0; height: 9000px; transform-origin: 0 0; }
.doblez-luz {
  width: 280px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.28) 0, rgba(0, 0, 0, 0.07) 6%, rgba(255, 255, 255, 0.45) 15%,
    rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.1) 100%);
}
.doblez-abajo i { width: 120px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0)); }
.doblez-borde { position: absolute; left: 100%; width: 36px; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0)); }

/* El espiral: un agujero y una vuelta de alambre, repetidos a lo largo del lomo. */
.hojas::after {
  content: "";
  position: absolute; z-index: 3;
  left: -15px; top: 28px; bottom: 28px; width: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cellipse cx='33' cy='19' rx='5' ry='4.5' fill='%2321190f' fill-opacity='.82'/%3E%3Cpath d='M34 19 C27 8 9 7 6 16 C4.5 22 8 26 15 25' fill='none' stroke='%23555b61' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M32 16.5 C26 9.5 11 9 8 15.5' fill='none' stroke='%23d5dade' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 46px 38px no-repeat round;
  pointer-events: none;
}

/* Mientras la hoja espera a que la dibujen está en blanco. Si el script no llegara a cargar, aparece sola. */
.por-dibujar .pagina > * { opacity: 0; animation: por-si-acaso 0.01s 4s forwards; }
@keyframes por-si-acaso { to { opacity: 1; } }
.contenido { position: relative; display: flex; flex-direction: column; gap: var(--hueco); }

.birome { font-family: var(--birome); color: var(--tinta); }
.rojo { font-family: var(--birome); color: var(--rojo); }
.rotulo {
  font-family: var(--imprenta);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--impreso);
}

/* Las banderitas adhesivas: asoman por arriba, pegadas a las hojas de abajo.
   La de la hoja que se está leyendo queda entera y por delante, pegada sobre el papel. */
.pestanas {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 34px 0 84px;
  margin-bottom: -8px;
}
.pestana {
  position: relative;
  z-index: 0;
  display: inline-flex;
  justify-content: center;
  height: 64px;
  min-width: 92px;
  padding: 8px 16px 0;
  background: var(--color) linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 45%);
  border-radius: 2px 3px 0 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  color: var(--lapiz);
  text-decoration: none;
  font-size: 22px;
  line-height: 1.1;
  white-space: nowrap;
  transform: translateY(var(--sube, 0px)) rotate(var(--g, 0deg));
  transform-origin: 50% 100%;
  transition: transform 0.18s ease;
}
.pestana:hover { color: var(--tinta); --sube: -5px; }
.pestana[aria-current="page"] { z-index: 2; --sube: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.pestana[aria-current="page"]:hover { color: var(--lapiz); }
.pestana:focus-visible { outline-offset: -5px; z-index: 2; }

/* El formulario de arriba de la hoja: dibujado a lápiz sobre la cuadrícula y llenado con birome.
   Las líneas son degradados finitos pasados por el filtro del trazo, así salen temblorosas y se pasan en las esquinas. */
.planilla {
  --raya: linear-gradient(var(--lapiz), var(--lapiz));
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.planilla::before {
  content: "";
  position: absolute; inset: -9px;
  pointer-events: none;
  background:
    var(--raya) 2px 9px / calc(100% - 5px) 2px no-repeat,
    var(--raya) 5px calc(100% - 9px) / calc(100% - 6px) 2px no-repeat,
    var(--raya) 9px 3px / 2px calc(100% - 4px) no-repeat,
    var(--raya) calc(100% - 9px) 1px / 2px calc(100% - 5px) no-repeat;
  filter: url(#trazo);
  opacity: 0.88;
}
.planilla > div { position: relative; padding: 7px 14px 4px; display: flex; flex-direction: column; }
/* Las divisiones: una raya vertical (::before) y una horizontal (::after) por casillero, que se prenden según la grilla. */
.planilla > div::before, .planilla > div::after {
  content: "";
  position: absolute;
  display: none;
  pointer-events: none;
  filter: url(#trazo);
  opacity: 0.8;
}
.planilla > div::before { left: -7px; top: -5px; bottom: -4px; width: 14px; background: var(--raya) center / 1.8px 100% no-repeat; }
.planilla > div::after { top: -7px; left: -5px; right: -4px; height: 14px; background: var(--raya) center / 100% 1.8px no-repeat; }
.planilla > div:nth-child(even)::before, .planilla > div:nth-child(n+3)::after { display: block; }
.planilla .rotulo { font-family: var(--mano); font-size: 11.5px; font-weight: 400; letter-spacing: 1.6px; color: var(--lapiz-suave); filter: url(#mano); }
.planilla .valor { font-family: var(--birome); font-size: 25px; line-height: 1.2; color: var(--tinta); align-self: flex-start; }
/* Con la hoja ancha, todo en un renglón. Los casilleros de sonido y animación los agrega cuaderno.js. */
@container (min-width: 760px) {
  .planilla { grid-template-columns: repeat(4, 1fr); }
  .planilla.con-casilleros { grid-template-columns: 1.3fr 1.2fr 1.1fr 0.8fr 0.8fr 0.95fr; }
  .planilla > div:nth-child(n)::before, .planilla > div:nth-child(n)::after { display: none; }
  .planilla > div + div:nth-child(n)::before { display: block; }
}
.interruptor {
  appearance: none; border: 0; background: none; margin: 0; padding: 0;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px;
  font: inherit; font-family: var(--birome); font-size: 25px; color: var(--tinta); cursor: pointer;
}
.interruptor:hover { color: var(--rojo); }
.interruptor:focus-visible { outline: 2px dashed var(--rojo); outline-offset: 3px; }
.interruptor .casilla { width: 20px; height: 20px; }
.interruptor[aria-pressed="false"] .tilde { display: none; }

/* Recepción: el nombre grande */
.portada { position: relative; display: flex; flex-direction: column; gap: 10px; }
.nombre {
  margin: 14px 0 0;
  font-weight: 400;
  font-size: clamp(34px, 11vw, 124px);
  font-size: clamp(34px, 15.5cqi, 124px);
  line-height: 1;
  letter-spacing: 2px;
  display: flex;
  flex-wrap: nowrap;
}
.nombre span { display: inline-block; }
.nombre span:nth-child(1) { transform: rotate(-3deg) translateY(1px); }
.nombre span:nth-child(2) { transform: rotate(1.5deg) translateY(-3px); }
.nombre span:nth-child(3) { transform: rotate(-1deg) translateY(3px) scale(0.97); }
.nombre span:nth-child(4) { transform: rotate(2.5deg) translateY(-1px); }
.nombre span:nth-child(5) { transform: rotate(-1.5deg) translateY(2px) scale(1.03); }
.nombre span:nth-child(6) { transform: rotate(-2.5deg) translateY(-4px); }
.nombre span:nth-child(7) { transform: rotate(2deg) translateY(1px) scale(1.02); }
.nombre span:nth-child(8) { transform: rotate(-2deg) translateY(-1px) scale(0.96); }
.nombre span:nth-child(9) { transform: rotate(3deg) translateY(4px); }
.subrayado { width: min(640px, 90%); height: 20px; overflow: visible; }
.subrayado path { fill: none; stroke: var(--lapiz); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.frase { margin: 8px 0 0; font-size: 26px; max-width: 760px; }
.al-margen { margin: 0; font-size: 27px; align-self: flex-start; }

/* El título de las otras pestañas, pasado con resaltador del color de la pestaña. */
.encabezado { position: relative; display: flex; flex-direction: column; gap: 10px; }
.encabezado h1 {
  margin: 10px 0 0;
  font-weight: 400;
  font-size: clamp(44px, 10vw, 100px);
  font-size: clamp(42px, 13cqi, 100px);
  line-height: 1.05;
}
.resaltado {
  padding: 0 0.12em;
  background: linear-gradient(100deg, transparent 0.3em, var(--seccion) 0.3em, var(--seccion) calc(100% - 0.2em), transparent calc(100% - 0.2em)) 0 62% / 100% 46% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Trazos: cajas, círculos y tachados dibujados encima del texto. */
.boceto {
  position: absolute;
  left: -5px; top: -5px;
  width: calc(100% + 10px); height: calc(100% + 10px);
  overflow: visible;
  pointer-events: none;
}
.boceto path { fill: none; stroke: var(--lapiz); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.boceto .fino { stroke-width: 1.4; opacity: 0.7; }
.boceto.de-rojo path { stroke: var(--rojo); stroke-width: 2.4; }
.boceto.punteado path { stroke-width: 1.9; stroke-dasharray: 10 7; }

.titulo { margin: 0; font-weight: 400; font-size: 40px; line-height: 1; }
.caja { position: relative; display: inline-block; padding: 8px 22px 6px; transform: rotate(var(--g, 0deg)); }
.circulo { position: relative; display: inline-block; padding: 2px 16px; vertical-align: middle; transform: rotate(var(--g, -4deg)); }
.circulo .boceto { left: -10px; top: -7px; width: calc(100% + 20px); height: calc(100% + 14px); }
.tachado { position: relative; display: inline-block; }
.tachado svg { position: absolute; left: -4px; top: 30%; width: calc(100% + 8px); height: 40%; overflow: visible; }
.tachado path { fill: none; stroke: var(--rojo); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tachado.de-tinta svg { top: 46%; height: 10px; }
.tachado.de-tinta path { stroke: var(--tinta); stroke-width: 2; }

/* Un sello de goma: "en desarrollo", "se juega online"… */
.sello {
  display: inline-block;
  padding: 3px 10px 2px;
  border: 2px solid currentColor;
  border-radius: 5px;
  color: var(--rojo);
  font-family: var(--imprenta);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: rotate(var(--g, -3deg));
  opacity: 0.88;
}
.sello.azul { color: var(--tinta); }
.sello.verde { color: var(--impreso); }
.sellos { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0; }

.flecha { overflow: visible; }
.flecha path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.seccion { position: relative; display: flex; flex-direction: column; gap: 28px; }
.seccion > p { margin: 0; max-width: 760px; }

/* Recepción: quién soy y el pósit, uno al lado del otro */
.recepcion { display: flex; flex-wrap: wrap; gap: 44px 60px; align-items: flex-start; }
.sobre { position: relative; flex: 2 1 440px; display: flex; flex-direction: column; gap: 18px; }
.sobre > p { margin: 0; font-size: 24px; line-height: 1.5; max-width: 640px; }
.herramientas { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.herramientas ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 24px; }
.herramientas li { font-family: var(--birome); color: var(--tinta); font-size: 28px; line-height: 1.3; }
.cafe { position: absolute; right: 2%; top: -60px; width: 150px; height: 150px; opacity: 0.22; pointer-events: none; }
.cafe g { fill: none; stroke: #7a4a1f; stroke-linecap: round; }

.contacto { position: relative; flex: 0 1 380px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.posit {
  position: relative;
  width: 100%;
  background: var(--posit);
  padding: 22px 26px 30px;
  transform: rotate(1.8deg);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06), 6px 12px 16px rgba(0, 0, 0, 0.14);
  display: flex; flex-direction: column; gap: 4px;
}
.posit::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 22px; background: rgba(0, 0, 0, 0.035); }
.posit::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--posit-doblez) 0, var(--posit-doblez) 50%, var(--papel) 50%);
  box-shadow: -2px -2px 3px rgba(0, 0, 0, 0.08);
}
.posit h2 { margin: 0; font-weight: 400; font-size: 34px; line-height: 1; }
.posit .subrayado { width: 170px; height: 10px; margin-bottom: 6px; }
.posit .subrayado path { stroke-width: 2; }
.posit a { display: flex; align-items: center; min-height: 44px; color: var(--lapiz); }
.posit a:hover { color: var(--tinta); }
.nota-posit { display: inline-flex; align-items: flex-start; gap: 6px; margin: 18px 0 0 8px; font-size: 24px; line-height: 1.2; }
.nota-posit .flecha { flex: none; margin-top: -14px; }

/* Recepción: las tres fichas que llevan a cada pestaña */
.zonas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px 30px; padding-top: 10px; }
.zona {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 24px 18px;
  background: var(--color);
  background: color-mix(in srgb, var(--color) 48%, #fffdf3);
  color: var(--lapiz);
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 4px 10px 16px rgba(0, 0, 0, 0.13);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zona:hover { color: var(--lapiz); transform: rotate(0deg) translateY(-4px); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 6px 16px 22px rgba(0, 0, 0, 0.16); }
.zona .cinta { left: 50%; top: -15px; width: 104px; margin-left: -52px; transform: rotate(-3deg); }
.zona-titulo { font-size: 36px; line-height: 1.05; }
.zona-texto { font-size: 20px; line-height: 1.45; }
.zona-estado { font-size: 24px; line-height: 1.2; }
.zona-entrar { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; font-size: 26px; }
.zona:hover .zona-entrar { color: var(--rojo); }
@media (prefers-reduced-motion: reduce) { .zona { transition: none; } }

/* Juegos: la ficha de cada juego */
.juego { display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
.foto { flex: 999 1 480px; min-width: 0; margin: 14px 0 0; position: relative; transform: rotate(-1.6deg); }
.foto .marco { background: var(--foto); padding: 12px 12px 42px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.16); }
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #d9d6cc; }
.foto figcaption { font-size: 27px; padding-top: 6px; }
.cinta {
  position: absolute;
  width: 118px; height: 32px;
  background: var(--cinta);
  clip-path: polygon(2% 6%, 30% 0, 62% 5%, 98% 0, 96% 22%, 100% 44%, 95% 63%, 99% 84%, 97% 100%, 70% 95%, 38% 100%, 3% 96%, 0 76%, 4% 55%, 0 35%, 3% 18%);
}
.nota-foto {
  position: absolute; right: 6%; top: -78px;
  display: flex; align-items: flex-end; gap: 4px;
  font-size: 25px; transform: rotate(1.6deg);
}
.nota-foto span { padding-bottom: 34px; }

.ficha { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; }
.ficha h2, .ficha h3 { margin: 0; font-weight: 400; font-size: 46px; line-height: 1.1; }
.ficha p { margin: 0; }
.lista-birome {
  margin: 0; padding-left: 22px;
  font-family: var(--birome); color: var(--tinta);
  font-size: 26px; line-height: 1.3;
  display: flex; flex-direction: column; gap: 2px;
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 8px; }
.boton {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  color: var(--lapiz); text-decoration: none; font-size: 25px;
}
.boton:hover { color: var(--tinta); background: rgba(31, 63, 160, 0.06); }
.enlace-birome { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--birome); font-size: 24px; }
.aviso { font-size: 23px; align-self: flex-start; }

.pendientes-y-boceto { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-end; margin-top: 10px; }
.pendientes { flex: 1 1 460px; max-width: 640px; display: flex; flex-direction: column; gap: 6px; }
.pendientes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pendientes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 34px; }
.casilla { width: 24px; height: 24px; flex: none; overflow: visible; }
.casilla path { fill: none; stroke: var(--lapiz); stroke-width: 1.8; stroke-linecap: round; }
.casilla .tilde { stroke: var(--tinta); stroke-width: 2.6; stroke-linejoin: round; }
.ya-casi { display: inline-flex; align-items: center; gap: 6px; font-size: 24px; }
.dibujo { flex: 0 1 240px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dibujo svg { width: 230px; max-width: 100%; height: auto; overflow: visible; }
.dibujo g { fill: none; stroke: var(--lapiz-suave); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dibujo figcaption { font-size: 22px; }

/* Apps y "próximo juego": fichas con borde punteado */
.proyectos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 36px; }
.proyecto { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
.proyecto h2, .proyecto h3 { margin: 0; font-weight: 400; font-size: 32px; line-height: 1.15; }
.proyecto p { margin: 0; }
.proyecto .birome { font-size: 23px; }
.proyecto .sellos { margin-bottom: 4px; }
.proxima { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 20px; }
.proxima svg { width: 100%; height: 64px; overflow: visible; }
.proxima path { fill: none; stroke: var(--lapiz); stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.curvas { width: 100%; max-width: 300px; height: auto; margin: 4px 0 2px; overflow: visible; }
.curvas g { fill: none; stroke: var(--impreso); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.curvas .cima { stroke: var(--rojo); stroke-width: 2; }

/* Jugar online: el catálogo */
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 48px 44px; padding-top: 14px; }
.cartucho {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 12px 24px;
  background: var(--foto);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.16);
}
.cartucho .cinta { left: 50%; top: -15px; margin-left: -59px; transform: rotate(2deg); }
.cartucho-foto { display: block; }
.cartucho-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #d9d6cc; }
.cartucho-datos { display: flex; flex-direction: column; gap: 12px; padding: 0 10px; }
.cartucho h2 { margin: 0; font-weight: 400; font-size: 42px; line-height: 1.1; }
.cartucho-datos > p { margin: 0; }
.datos { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 22px; font-family: var(--birome); color: var(--tinta); font-size: 24px; line-height: 1.3; }
.datos li { position: relative; }
.datos li + li::before { content: "·"; position: absolute; left: -14px; color: var(--lapiz-suave); }
.cartucho .acciones { margin-top: 2px; }
.cartucho .aviso { font-size: 22px; }
.hueco { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px 30px; min-height: 260px; }
.hueco p { margin: 0; }
.hueco .proxima { padding: 0; }

/* Garabatos: lo que uno dibuja en los huecos de la hoja cuando está aburrido o esperando algo.
   Cada uno se ubica con style="right: …; top: …; width: …" dentro de su sección.
   Solo aparecen cuando la hoja es ancha y de verdad hay hueco; con class="siempre", en cualquier ancho. */
.garabato {
  position: absolute;
  display: none;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--lapiz-suave);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Cuándo se ve cada uno, según el ancho de la hoja:
     (nada)        solo con la hoja ancha, cuando "Quién soy" y el pósit están lado a lado
     desde-medio   también con la hoja mediana (ventana angosta o vertical)
     solo-medio    solo con la hoja mediana: huecos que aparecen cuando las cosas se apilan
     siempre       en cualquier ancho, celular incluido */
.garabato.siempre { display: block; }
@container (min-width: 600px) { .garabato.desde-medio { display: block; } }
@container (min-width: 560px) and (max-width: 879.98px) { .garabato.solo-medio { display: block; } }
@container (min-width: 940px) { .garabato { display: block; } .garabato.solo-medio { display: none; } }
.garabato.en-birome, .garabato .en-birome { stroke: var(--tinta); }
.garabato.en-rojo, .garabato .en-rojo { stroke: var(--rojo); }
.garabato .grueso { stroke-width: 2.4; }
.garabato text { fill: var(--tinta); stroke: none; font-family: var(--birome); font-size: 22px; }

/* Pie */
.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px 24px; border-top: 1.5px solid var(--borde-form); padding-top: 10px;
}
.pie .numero { position: relative; display: inline-block; padding: 0 12px; font-size: 24px; }
.pie .numero .boceto { left: -6px; top: -8px; width: calc(100% + 12px); height: calc(100% + 16px); }
.pie .numero .boceto path { stroke-width: 2; }

/* Páginas de adentro (notas, 404) */
.volver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--birome); font-size: 26px; }
.version { display: flex; flex-direction: column; gap: 16px; }
.version ul { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.version strong { font-weight: 400; text-decoration: underline; text-decoration-color: rgba(179, 38, 30, 0.6); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Celular */
@media (max-width: 700px) {
  body { font-size: 18px; }
  .hoja { padding: 20px 8px 48px; }
  .pagina { --hueco: 48px; padding: 34px 14px 52px 38px; }
  .hojas::after { left: -11px; top: 20px; bottom: 20px; width: 34px; background-size: 34px 28px; }
  .pestanas { gap: 6px; padding: 0 8px 0 34px; }
  .pestana { flex: 1 1 auto; min-width: 0; padding: 8px 6px 0; font-size: 18px; }
  .pestana:hover { --sube: 0px; }
  .pestana[aria-current="page"]:hover { --sube: 12px; }
  /* En el celular la banderita dice solo "jugar": "online" queda para los lectores de pantalla. */
  .pestana .extra { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .planilla .valor, .interruptor { font-size: 22px; }
  .nota-foto { display: none; }
  .titulo { font-size: 34px; }
  .ficha h2, .ficha h3 { font-size: 40px; }
  .cartucho h2 { font-size: 38px; }
  .frase { font-size: 23px; }
  .al-margen { font-size: 24px; }
  .sobre > p { font-size: 22px; }
  .juego { gap: 32px; }
  .cafe { top: -70px; }
}

/* Celulares angostos: que las cuatro banderitas sigan entrando en una fila. */
@media (max-width: 350px) {
  .pestanas { gap: 4px; }
  .pestana { padding: 8px 4px 0; font-size: 16.5px; }
  .planilla .valor, .interruptor { font-size: 20px; }
  .planilla > div { padding: 7px 9px 4px; }
}

@media (prefers-reduced-motion: reduce) { .pestana { transition: none; } }