/* =========================================================
   Propuesta 1 · "Un pedacito de mí"
   El universo del portafolio de Mariana llevado a la web:
   rayas rosa/lavanda, papel, collage y objetos retro.
   ========================================================= */
:root {
  color-scheme: light;
  --pink: #F4C9D6;
  --lav: #BCBADD;
  --red: #EA1E2B;
  --rose: #F38FB0;
  --navy: #233668;
  --ink: #16131A;
  --paper: #EDE5DB;
  --slide: #EBE7E9;
  --purple: #6C5FC7;
  --stripe: 52px;
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
  --font-type: "Courier Prime", "Courier New", monospace;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --shadow-lg: 0 24px 50px -18px rgba(54, 30, 70, .45);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--pink);
  background-image: repeating-linear-gradient(90deg, var(--pink) 0 var(--stripe), var(--lav) var(--stripe) calc(var(--stripe) * 2));
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .8s;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Grano de papel sobre toda la página */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .32 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Botones y pastillas ---------- */
.pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pills a, .pills button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid var(--navy); color: var(--navy); background: rgba(255,255,255,.55);
  font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.pills a:hover, .pills button:hover { transform: translateY(-2px); }
.pills .is-cta, .pills .is-active { background: var(--navy); color: #fff; }

.btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 0 26px;
  border-radius: 999px; font-weight: 800; text-decoration: none; cursor: pointer; border: 2px solid var(--ink);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { box-shadow: 4px 4px 0 var(--red); }
.btn-line { background: #fff; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .92rem; }

/* ---------- Barra superior ---------- */
.topbar {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 40;
  width: min(1180px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 10px 8px 22px; border-radius: 999px;
  background: rgba(255,255,255,.55); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 10px 30px -12px rgba(54,30,70,.35);
}
.wordmark { font-size: 1.35rem; text-decoration: none; letter-spacing: -.01em; font-weight: 300; user-select: none; }
.wordmark b { font-weight: 800; }
.topbar .pills { gap: 6px; flex-wrap: nowrap; }
.topbar .pills a { min-height: 36px; padding: 0 16px; font-size: .9rem; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: max(720px, 100svh);
  display: grid; grid-template-columns: minmax(250px, 330px) 1fr; align-items: center; gap: 2vw;
  padding: 110px max(24px, 5vw) 80px;
  max-width: 1360px; margin: 0 auto;
}
.badge-slot { position: relative; align-self: start; height: 560px; margin-top: -110px; }
.badge-rig {
  position: absolute; left: 50%; top: 0; width: 260px; margin-left: -130px;
  transform-origin: 50% 0; will-change: transform; z-index: 3;
}
.strap {
  width: 34px; height: 150px; margin: 0 auto; overflow: hidden;
  background: var(--navy); color: var(--rose);
  box-shadow: inset -6px 0 8px rgba(0,0,0,.25);
  font: 800 11px/1 var(--font-display); letter-spacing: .2em;
}
.strap span { display: block; writing-mode: vertical-rl; padding-top: 10px; white-space: nowrap; }
.hook { display: block; width: 40px; height: 70px; margin: -4px auto -14px; position: relative; z-index: 2; }

.badge { position: relative; perspective: 1200px; cursor: grab; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.badge:active { cursor: grabbing; }
.badge:focus-visible .badge-inner { box-shadow: 0 0 0 4px var(--navy); border-radius: 18px; }
.badge-inner { position: relative; height: 360px; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.4,.5,1); }
.badge.is-flipped .badge-inner { transform: rotateY(180deg); }
.badge-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 18px; padding: 34px 18px 18px;
  border: 8px solid rgba(255,255,255,.55); outline: 1.5px solid rgba(255,255,255,.9);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(0,0,0,.05);
}
.badge-front { background: #E9E6E2 linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%); }
.badge-front::after { /* brillo del plástico */
  content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 42%, transparent 52%);
}
.badge-slit { position: absolute; top: 10px; left: 50%; width: 60px; height: 9px; margin-left: -30px; border-radius: 9px; background: rgba(60,50,70,.25); box-shadow: inset 0 2px 3px rgba(0,0,0,.25); }
.badge-photo { position: relative; height: 222px; }
.badge-photo img { position: absolute; left: 50%; bottom: 0; width: 88%; transform: translateX(-50%); }
.badge-name { margin: 12px 0 0; font: 800 1.75rem/1 var(--font-body); letter-spacing: -.01em; color: #1b1033; }
.badge-meta { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 2px 0; font-size: 1.12rem; }
.badge-back { transform: rotateY(180deg); background: var(--navy); color: #fff; text-align: center; padding-top: 40px; }
.vip { margin: 0; font: italic 900 2.6rem/1 var(--font-display); color: var(--rose); letter-spacing: .02em; }
.vip-sub { margin: 8px 0 14px; font-size: .95rem; }
.badge-back ul { list-style: none; margin: 0 0 16px; padding: 0; font-family: var(--font-type); font-size: .95rem; line-height: 1.7; }
.barcode { height: 44px; margin: 0 14px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 6px, transparent 6px 9px, #fff 9px 12px, transparent 12px 14px); }
.vip-foot { margin: 8px 0 0; font: 700 .75rem var(--font-type); letter-spacing: .1em; opacity: .8; }

.hero-main { position: relative; text-align: center; }
.glass {
  position: relative; margin: 0 auto; width: min(860px, 100%);
  padding: clamp(26px, 4vw, 52px) clamp(22px, 4vw, 56px) clamp(22px, 3vw, 40px);
  border-radius: 46px;
  background: linear-gradient(110deg, rgba(255,255,255,.55), rgba(240,170,215,.35) 60%, rgba(190,160,220,.45));
  backdrop-filter: blur(9px) saturate(1.25); -webkit-backdrop-filter: blur(9px) saturate(1.25);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 30px 60px -30px rgba(80,40,90,.55), inset 0 1px 0 rgba(255,255,255,.9);
}
.big-word {
  margin: 0; display: flex; align-items: center; justify-content: center;
  font: italic 900 clamp(2.2rem, 7vw, 6.2rem)/.9 var(--font-display); letter-spacing: -.01em;
}
.f-loop { width: .62em; height: 1.2em; margin: -.3em -.04em -.1em; overflow: visible; }
.f-loop path { fill: none; stroke: var(--ink); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s .4s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.glass-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding: 0 .3em; }
.glass-row h1 { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.9rem); font-weight: 300; letter-spacing: -.01em; }
.glass-row h1 b { font-weight: 800; }
.year { font: italic 900 clamp(1.4rem, 3vw, 2.4rem) var(--font-display); }

.sticker-burst {
  position: absolute; right: -52px; top: -78px; width: 150px; height: 150px; border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center; animation: wobble 5s ease-in-out infinite;
}
.sticker-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.burst { fill: var(--red); }
.burst-shadow { fill: var(--rose); transform: translate(7px, 7px); }
.sticker-burst span { position: relative; color: #fff; font: italic 900 1.05rem/1.05 var(--font-display); transform: rotate(-10deg); }
@keyframes wobble { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(6deg) scale(1.05); } }

.hero-kicker { margin: 34px 0 6px; font-size: 1.15rem; letter-spacing: .32em; font-weight: 500; }
.hero-sub { margin: 0 auto; max-width: 560px; font-size: 1.12rem; line-height: 1.55; font-weight: 600; }
.hero-sub em { font-family: var(--font-hand); font-style: normal; font-size: 1.45em; font-weight: 700; color: var(--navy); }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); margin: 0; font: 700 1.3rem var(--font-hand); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---------- Títulos tipo etiquetadora Dymo ---------- */
.dymo {
  display: table; margin: 0 auto 38px; padding: .35em .9em .3em;
  background: var(--ink); color: #fff; border-radius: 6px;
  font: 800 clamp(1.3rem, 2.6vw, 1.9rem)/1 var(--font-display); font-stretch: 85%; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.6);
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.12);
  transform: rotate(-1.5deg);
}
.dymo-red { background: var(--red); transform: rotate(1deg); }

section { position: relative; }
.about, .board-section, .services, .contact { padding: 90px max(16px, 4vw); max-width: 1240px; margin: 0 auto; }

/* ---------- Sobre mí: máquina de escribir ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.typewriter { position: relative; width: min(640px, 100%); margin: 0 auto; }
.paper-stack {
  position: relative; width: 80%; margin: 0 auto; z-index: 1;
  /* Se recorta solo por abajo: las hojas entran y salen por el rodillo. */
  clip-path: inset(-100vh -140px 0 -140px);
  overflow-anchor: none; /* que el navegador no persiga el texto cuando el papel sube */
  transform: translateX(var(--carriage, 0px)); transition: transform .07s linear;
}
.paper {
  position: relative; min-height: 470px; padding: 34px 36px 70px; background: var(--paper);
  border-radius: 14px 14px 0 0; box-shadow: 0 -6px 30px -14px rgba(0,0,0,.35);
  font-family: var(--font-type); font-size: .98rem; line-height: 1.55; color: #222;
  transition: transform .7s cubic-bezier(.6,0,.3,1), opacity .5s;
}
.paper h3 { margin: 0 0 10px; font-size: 1.5rem; font-weight: 700; padding-bottom: 8px; border-bottom: 1px dashed #777; }
.paper h4 { margin: 18px 0 6px; font-size: 1.08rem; font-weight: 700; }
.paper p { margin: 0 0 4px; }
.paper.is-pending { color: transparent; }
.paper .cur::after { content: "▍"; animation: blink .8s steps(1) infinite; color: var(--red); }
@keyframes blink { 50% { opacity: 0; } }
/* Hoja en blanco para la nota: espera dentro del rodillo y sube al empezar a escribir.
   Como en una máquina real, se escribe justo encima del rodillo y el papel sube con cada línea. */
.paper-note { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(100%); transition: transform .9s cubic-bezier(.45,0,.2,1) .2s; }
.paper-note.is-feeding { transform: translateY(100%) !important; transition: none; }
.typewriter.is-writing #paper-about { transform: translateY(-115%); opacity: 0; transition: transform .7s cubic-bezier(.6,0,.3,1), opacity .3s .45s; }
.typewriter.is-writing .paper-note { transform: translateY(0); }
.paper.is-ejected { position: absolute; inset: 0; z-index: 2; animation: eject .8s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes eject { to { transform: translateY(-115%); opacity: 0; } }
.note-body { flex: none; margin: 0 !important; white-space: pre-wrap; word-break: break-word; min-height: 1.5em; }
.typewriter.is-writing .note-body::after { content: "▍"; animation: blink .8s steps(1) infinite; color: var(--red); }

.machine { position: relative; z-index: 2; margin-top: -54px; }
.carriage { position: relative; transform: translateX(var(--carriage, 0px)); transition: transform .07s linear; }
.typewriter.is-returning .paper-stack, .typewriter.is-returning .carriage { transition: transform .5s cubic-bezier(.25,.8,.3,1); }
.roller {
  position: relative; height: 40px; margin: 0 5%; border-radius: 20px;
  background: linear-gradient(#3a3a3a, #6a6a6a 35%, #1d1d1d 80%);
  box-shadow: 0 6px 10px rgba(0,0,0,.3);
}
.roller i { position: absolute; top: -6px; width: 30px; height: 52px; border-radius: 10px; background: linear-gradient(90deg, #cfd2c3, #f2f3ea 40%, #a5a993); }
.roller i:first-of-type { left: -22px; } .roller i:last-of-type { right: -22px; }
.lever {
  position: absolute; right: calc(100% + 6px); top: 2px; z-index: 3; width: 70px; height: 11px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: linear-gradient(#f4f6fa, #9aa0aa 60%, #6f747d); box-shadow: 0 3px 4px rgba(0,0,0,.3);
  transform-origin: 100% 50%; transform: rotate(30deg); transition: transform .18s cubic-bezier(.3,1.6,.5,1);
}
.lever::before { content: ""; position: absolute; left: -12px; top: -6px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b5b9c0 55%, #6c7078); box-shadow: 0 3px 4px rgba(0,0,0,.3); }
.lever:hover { transform: rotate(24deg); }
.lever.is-down { transform: rotate(6deg); }
.machine-body {
  position: relative; margin-top: -6px; padding: 26px 7% 22px; border-radius: 34px 34px 22px 22px;
  background: linear-gradient(#d8dbc6, #b8bca2 60%, #9fa38a);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.6), inset 0 -8px 16px rgba(0,0,0,.18), var(--shadow-lg);
}
.plate { display: table; margin: 0 auto 14px; padding: 3px 12px; border-radius: 4px; background: linear-gradient(#e9eaea, #9da1a6); font: 800 .75rem var(--font-display); letter-spacing: .3em; color: #3e4148; }
.keys { --ks: clamp(22px, 4.3vw, 34px); --kg: 7px; display: grid; gap: var(--kg); }
.key-row { display: flex; justify-content: center; gap: var(--kg); }
.key-row:nth-child(2) { padding-left: 12px; } .key-row:nth-child(3) { padding-left: 24px; } .key-row:nth-child(4) { padding-left: 36px; }
.key {
  flex: none; width: var(--ks); height: var(--ks); padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: 700 clamp(.55rem, 1.3vw, .76rem)/1 var(--font-body); color: #f2f0e8;
  background: radial-gradient(circle at 40% 35%, #4b4b4b, #1b1b1b 70%);
  border: 2px solid #c9ccc0; box-shadow: 0 4px 0 #6d705f, 0 5px 6px rgba(0,0,0,.35);
  transition: transform .05s, box-shadow .05s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.key-wide { width: calc(var(--ks) * 1.7); border-radius: 999px; font-size: clamp(.75rem, 1.6vw, 1rem); }
.key:hover { background: radial-gradient(circle at 40% 35%, #616161, #262626 70%); }
.key.is-down { transform: translateY(3px); box-shadow: 0 1px 0 #6d705f, 0 2px 3px rgba(0,0,0,.35); background: radial-gradient(circle at 40% 35%, #333, #0d0d0d 70%); color: #fff; }
.spacebar {
  display: block; width: 52%; height: 18px; margin: 12px auto 0; padding: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(#3a3a3a, #161616); border: 2px solid #c9ccc0; box-shadow: 0 4px 0 #6d705f;
  transition: transform .05s, box-shadow .05s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.spacebar:hover { background: linear-gradient(#4a4a4a, #222); }
.spacebar.is-down { transform: translateY(3px); box-shadow: 0 1px 0 #6d705f; }
/* El textarea invisible queda fijo en pantalla: así el navegador nunca desplaza la página para seguir el cursor. */
#note-input.sr-only { position: fixed !important; top: 50%; left: 50%; }
.note-actions { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.note-send { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.about-side { position: relative; padding-top: 30px; }
.sticky-note {
  position: relative; padding: 30px 26px 26px; background: #FBFBF6;
  box-shadow: 0 18px 30px -16px rgba(0,0,0,.4); transform: rotate(3deg);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 90% 100%, 0 100%);
}
.sticky-note h3 { margin: 0 0 12px; font: 700 2.1rem/1 var(--font-hand); }
.checks { list-style: none; margin: 0; padding: 0; font-weight: 700; font-style: italic; font-size: 1.05rem; line-height: 1.75; }
.checks li { display: flex; gap: 10px; align-items: center; }
.checks svg { width: 20px; height: 20px; flex: none; }
.checks path { fill: none; stroke: #27a548; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .5s; }
.checks.is-on path { stroke-dashoffset: 0; }
.tack {
  position: absolute; top: -10px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #ff9a9f, var(--red) 55%, #9a0c16);
  box-shadow: 3px 6px 5px rgba(0,0,0,.35);
}
.hand-hint { margin: 34px 0 0; font: 700 1.55rem/1.2 var(--font-hand); transform: rotate(-3deg); color: var(--navy); }

/* ---------- Tablero de corcho ---------- */
.filters { justify-content: center; margin: -10px 0 30px; }
.board-frame {
  position: relative; padding: 18px; border-radius: 10px;
  background:
    repeating-linear-gradient(92deg, rgba(120,80,30,.08) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #e8cb9b, #d2ad75 50%, #e2c18d);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.12);
}
.board {
  position: relative; min-height: 400px; border-radius: 4px; transition: height .5s cubic-bezier(.2,.8,.2,1);
  background-color: #C7976A;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .2 0 0 0 0 .08 -2.4 0 0 0 1.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .8 0 0 0 0 .6 2.6 0 0 0 -1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 40px rgba(70,35,10,.45), inset 0 2px 6px rgba(0,0,0,.35);
}
.pin-card {
  position: absolute; left: 0; top: 0; width: var(--w, 240px); margin: 0;
  padding: 10px 10px 4px; background: #fdfcf8;
  box-shadow: 0 14px 22px -12px rgba(40,20,5,.65), 0 2px 3px rgba(0,0,0,.18);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .35s, box-shadow .25s;
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; z-index: 2;
}
.pin-card:hover, .pin-card:focus-visible { --r: 0deg; box-shadow: 0 26px 34px -14px rgba(40,20,5,.7); z-index: 5; outline: none; }
.pin-card:focus-visible { box-shadow: 0 0 0 4px var(--navy), 0 26px 34px -14px rgba(40,20,5,.7); }
.pin-card.is-dragging { transition: opacity .35s, box-shadow .25s; z-index: 10; cursor: grabbing; --r: -2deg; box-shadow: 0 40px 50px -20px rgba(40,20,5,.75); }
.pin-card.is-out { opacity: 0; pointer-events: none; transform: translate(var(--x), calc(var(--y) + 30px)) rotate(var(--r)) scale(.7); }
.pin-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #ddd; pointer-events: none; }
.pin-card figcaption { padding: 6px 2px 4px; font-family: var(--font-hand); line-height: 1.05; }
.pin-card figcaption b { display: block; font-size: 1.5rem; font-weight: 700; }
.pin-card figcaption span { font-size: 1.15rem; color: #6a5a52; }
.pin-card .tack { top: -9px; }
.pin-card[data-pin="1"] .tack { background: radial-gradient(circle at 35% 30%, #ffd0e0, var(--rose) 55%, #b3406a); }
.pin-card[data-pin="2"] .tack { background: radial-gradient(circle at 35% 30%, #c6c9ff, #6c6fd8 55%, #2f318a); }
.pin-card[data-pin="3"] .tack { background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c230 55%, #a07a06); }

.sticker { position: absolute; z-index: 6; border: 0; cursor: pointer; padding: 0; background: none; transition: transform .3s; }
.sticker:hover { transform: rotate(0deg) scale(1.08) !important; }
.sticker-ai {
  right: -34px; top: -40px; transform: rotate(-12deg);
  padding: 12px 16px 10px; background: #fff; border-radius: 12px; box-shadow: 0 10px 18px -8px rgba(0,0,0,.5);
  font: 900 1.05rem/.9 var(--font-display); font-stretch: 70%; text-align: center;
}
.sticker-ai .ai { display: block; font-size: 2.2rem; letter-spacing: -.02em; }
.sticker-ai.is-verified::after {
  content: "HECHO POR UNA HUMANA"; position: absolute; left: 50%; top: 50%; width: 150px; padding: 4px;
  border: 3px solid #27a548; color: #27a548; border-radius: 6px; background: rgba(255,255,255,.85);
  font: 900 .78rem/1.1 var(--font-display); letter-spacing: .06em;
  transform: translate(-50%, -50%) rotate(-18deg); animation: stamp .35s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-18deg) scale(2.2); opacity: 0; } }
.sticker-idea {
  left: -28px; bottom: -36px; transform: rotate(-7deg);
  padding: 12px 18px; background: #F9F3E4; border-radius: 8px; box-shadow: 0 10px 18px -8px rgba(0,0,0,.5);
  font: 900 1rem/1 var(--font-display); font-stretch: 75%; text-align: left;
}
.sticker-idea span { color: var(--red); }
.bulb { position: absolute; width: 34px; height: 46px; pointer-events: none; z-index: 30; animation: float-up 1.6s ease-out forwards; }
@keyframes float-up { from { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; } to { transform: translate(var(--dx), -140px) scale(1) rotate(var(--rot)); opacity: 0; } }

.flag-pin { position: absolute; left: -26px; top: -48px; z-index: 6; width: 70px; height: 70px; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(-14deg); }
.flag { position: absolute; left: 10px; top: 6px; width: 54px; height: 36px; display: flex; flex-direction: column; box-shadow: 0 4px 8px rgba(0,0,0,.3); border-radius: 2px; overflow: hidden; animation: wave 3s ease-in-out infinite; transform-origin: left center; }
.flag i { flex: 1; display: block; position: relative; }
.flag i:nth-child(1) { background: #F7CE1E; } .flag i:nth-child(2) { background: #1B3C9B; } .flag i:nth-child(3) { background: #D7272F; }
.flag b { position: absolute; inset: 0; background: radial-gradient(circle, #fff 0 1.2px, transparent 1.6px) 50% 60%/7px 7px; clip-path: ellipse(36% 70% at 50% 120%); opacity: .95; }
.flag-stick { position: absolute; left: 8px; top: 2px; width: 4px; height: 62px; border-radius: 3px; background: linear-gradient(90deg, #8a8f99, #f4f6fa, #6f747d); }
@keyframes wave { 50% { transform: skewY(-4deg) scaleX(.96); } }
.ve-star { position: fixed; z-index: 70; width: 22px; height: 22px; pointer-events: none; color: #fff; filter: drop-shadow(0 2px 3px rgba(27,60,155,.6)); }

.board-tip { text-align: center; margin: 22px 0 0; font: 700 1.4rem var(--font-hand); }
@media (pointer: coarse) { .only-fine { display: none; } }

/* ---------- Carpeta de proyecto (modal) ---------- */
.folder {
  /* Tamaño fijo: al pasar de proyecto con las flechas la carpeta no cambia y los botones no se mueven. */
  width: min(1120px, calc(100% - 24px)); height: min(760px, calc(100dvh - 24px)); max-height: none; padding: 0; border: 0; border-radius: 22px;
  background: var(--slide); color: var(--ink); box-shadow: 0 40px 80px -20px rgba(30,10,40,.6); overflow: hidden;
}
.folder::backdrop { background: rgba(40,25,60,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.folder[open] { animation: folder-in .45s cubic-bezier(.2,.9,.3,1.15); }
@keyframes folder-in { from { transform: translateY(40px) rotate(-2deg) scale(.96); opacity: 0; } }
.folder-inner { position: relative; display: flex; flex-direction: column; height: 100%; padding: 26px clamp(18px, 3vw, 40px) 30px; }
.folder-top { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 26px; }
.folder .pills a, .folder .pills span { min-height: 34px; padding: 0 16px; font-size: .88rem; border-radius: 999px; border: 1.5px solid var(--navy); color: var(--navy); font-weight: 700; display: inline-flex; align-items: center; }
.folder .pills .is-active { background: var(--navy); color: #fff; }
.folder-ctrl { display: flex; gap: 8px; flex: none; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; cursor: pointer; font-size: 1.1rem; display: grid; place-items: center; }
.icon-btn:hover { background: var(--ink); color: #fff; }
.folder-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 100%; gap: clamp(20px, 4vw, 56px); }
.folder-grid > div:first-child { display: flex; flex-direction: column; min-height: 0; }
.folder-grid > div:last-child { min-height: 0; overflow-y: auto; padding-right: 6px; }
.folder-main { flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 18px 30px -18px rgba(0,0,0,.5); }
.folder-main img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.thumbs { flex: none; display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.thumbs button { flex: none; width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; }
.thumbs button.is-active { border-color: var(--navy); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.folder h3 { margin: 0; font: 900 clamp(2rem, 4vw, 3.1rem)/1 var(--font-display); letter-spacing: -.01em; }
.folder .client { margin: 8px 0 26px; font: italic 800 clamp(1.2rem, 2.2vw, 1.7rem) var(--font-display); }
.folder blockquote { margin: 0 0 26px; padding: 4px 0 4px 22px; border-left: 5px solid var(--ink); font-size: clamp(1.2rem, 2vw, 1.5rem); font-style: italic; }
.folder .desc { font-size: 1.05rem; line-height: 1.6; text-align: justify; hyphens: auto; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.tool { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 7px; font: 800 .95rem var(--font-body); }
.palette { display: flex; gap: 6px; }
.palette button { flex: 1; height: 54px; border: 0; border-radius: 6px; cursor: copy; position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.palette button span { position: absolute; left: 6px; bottom: 4px; font: 700 .7rem var(--font-type); color: #fff; }
.palette button.is-light span { color: #222; }
.folder-cta { margin-top: 26px; }

/* ---------- Servicios: post-its ---------- */
.postits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 34px 26px; }
.postit {
  position: relative; padding: 34px 22px 22px; min-height: 230px; display: flex; flex-direction: column;
  background: var(--bg); transform: rotate(var(--r)); transition: transform .3s;
  box-shadow: 0 22px 26px -18px rgba(50,20,40,.55);
}
.postit:hover { transform: rotate(0) translateY(-6px); }
.postit .tape {
  position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; margin-left: -55px; transform: rotate(-4deg);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 8px, rgba(255,255,255,.25) 8px 16px), var(--tape);
  opacity: .9; box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.postit .num { font: italic 900 2.3rem/1 var(--font-display); opacity: .25; }
.postit h3 { margin: 8px 0 8px; font-size: 1.25rem; line-height: 1.15; font-weight: 800; }
.postit p { margin: 0 0 16px; line-height: 1.45; }
.postit a { margin-top: auto; font: 700 1.45rem var(--font-hand); text-decoration: none; }
.postit a:hover { text-decoration: underline; }

/* ---------- Contacto: teléfono de disco ---------- */
.contact-title { margin: 0 0 30px; font: 800 clamp(3.2rem, 9vw, 6.5rem)/1 var(--font-body); letter-spacing: -.02em; }
.contact-title span:first-child { font-family: var(--font-hand); font-weight: 700; font-size: 1.15em; }
.contact-title .bang { display: inline-block; color: var(--red); transform: rotate(8deg); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.dial-wrap { position: relative; width: min(500px, 100%); margin: 0 auto; }
.dial-display {
  margin: 0 auto 18px; width: min(340px, 90%); padding: 10px 16px; border-radius: 10px; text-align: center;
  background: #1d2a22; color: #9ef0a8; font: 700 1.3rem var(--font-type); letter-spacing: .12em;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.6);
  text-shadow: 0 0 8px rgba(120,255,150,.6); min-height: 50px; overflow: hidden; white-space: nowrap;
}
.dial { width: 100%; height: auto; display: block; overflow: visible; touch-action: manipulation; }
.dial-num { cursor: pointer; }
.dial-num circle { fill: #F4F1EA; stroke: #8e939b; stroke-width: 2; }
.dial-num text { font: 700 30px var(--font-body); fill: #2b2b2b; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.dial-num:hover circle, .dial-num:focus-visible circle { fill: #fff; stroke: var(--red); stroke-width: 3; }
.dial-num:focus { outline: none; }
#dial-wheel { transform-box: view-box; transform-origin: 200px 200px; pointer-events: none; }
.dc-title { font: 800 21px var(--font-body); text-anchor: middle; fill: #222; }
.dc-line { font: 600 13px var(--font-body); text-anchor: middle; fill: #333; }
.finger-stop { fill: url(#wheel); stroke: #6c7078; stroke-width: 1.5; filter: drop-shadow(0 3px 2px rgba(0,0,0,.3)); }
.dial-hint { text-align: center; font: 700 1.35rem var(--font-hand); margin: 14px 0 0; }
.contact-lead { font-size: 1.3rem; line-height: 1.45; font-weight: 600; margin: 0 0 24px; }
.clink {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 18px 22px; margin-bottom: 12px; border-radius: 16px; text-decoration: none;
  background: rgba(255,255,255,.8); border: 2px solid var(--ink); transition: transform .2s, box-shadow .2s;
}
.clink:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.clink-k { font: italic 900 1.3rem var(--font-display); }
.clink-v { font-weight: 600; word-break: break-all; }

/* ---------- Postal de contacto (Web3Forms) ---------- */
.postcard {
  position: relative; display: grid; gap: 14px; margin-bottom: 16px; padding: 26px 26px 20px;
  background: #FBF7EF; border: 10px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--red) 0 12px, #fff 12px 22px, var(--navy) 22px 34px, #fff 34px 44px) 10;
  box-shadow: var(--shadow-lg); transform: rotate(-1deg);
}
.stamp {
  position: absolute; right: 18px; top: 16px; width: 76px; height: 88px; display: grid; place-content: center; gap: 2px; text-align: center;
  background: var(--pink); color: var(--red); outline: 2px dashed #fff; outline-offset: -7px; box-shadow: 0 3px 6px rgba(0,0,0,.2); transform: rotate(6deg);
}
.stamp b { font: italic 900 1.6rem/1 var(--font-display); }
.stamp small { font: 700 .95rem/1 var(--font-hand); color: var(--navy); }
.pc-field { display: grid; gap: 2px; }
.pc-field:nth-of-type(-n+2) { margin-right: 96px; }
.pc-field > span { font: 700 1.3rem/1 var(--font-hand); color: var(--navy); }
.pc-field input, .pc-field select, .pc-field textarea {
  width: 100%; padding: 6px 2px; border: 0; border-bottom: 1.5px dashed #9b8f86; border-radius: 0;
  background: transparent; font: 400 1rem var(--font-type); color: var(--ink); outline: none;
}
.pc-field select { cursor: pointer; }
.pc-field textarea { min-height: 112px; resize: vertical; line-height: 28px; border-bottom: 0; background: repeating-linear-gradient(transparent 0 27px, #d8cfc4 27px 28px); }
.pc-field input:focus, .pc-field select:focus, .pc-field textarea:focus { border-bottom-color: var(--red); box-shadow: 0 2px 0 var(--red); }
.pc-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.pc-foot .btn:disabled { opacity: .6; cursor: wait; }
.form-status { margin: 0; font-weight: 700; }
.form-status[data-state="ok"] { color: #1d8a3e; }
.form-status[data-state="error"] { color: var(--red); }
.form-status[data-state="sending"] { color: var(--navy); }
.pc-note { margin: 0; font-size: .82rem; opacity: .7; }
.form-alt { margin: 0; font-size: .92rem; }
.form-alt a { font-weight: 700; color: var(--navy); }
.hp { display: none !important; }

.foot { text-align: center; padding: 40px 16px 110px; font-weight: 600; }
.foot-small { font: 700 1.25rem var(--font-hand); margin-top: 6px; }

/* ---------- Toast y contador de secretos (estilos para Kit) ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 90; max-width: min(520px, calc(100% - 32px));
  padding: 14px 22px; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 600; text-align: center; line-height: 1.4;
  box-shadow: 0 16px 30px -10px rgba(0,0,0,.5); transform: translate(-50%, 140%); transition: transform .45s cubic-bezier(.2,.9,.3,1.2);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast { pointer-events: none; } .toast a { pointer-events: auto; }
.toast small { opacity: .7; font-weight: 500; }
.eggs-btn {
  position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; gap: 6px; align-items: center;
  padding: 10px 16px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; cursor: pointer;
  font-weight: 800; font-size: .9rem; box-shadow: 3px 3px 0 var(--ink);
}
.eggs-btn .eggs-ico { color: var(--red); }
.eggs-btn.is-bump { animation: bump .6s cubic-bezier(.3,1.8,.5,1); }
.eggs-btn.is-complete { background: var(--red); color: #fff; } .eggs-btn.is-complete .eggs-ico { color: #fff; }
@keyframes bump { 30% { transform: scale(1.25) rotate(-6deg); } }
.eggs-panel {
  position: fixed; right: 16px; bottom: 70px; z-index: 80; width: min(340px, calc(100% - 32px));
  padding: 18px 20px; border-radius: 14px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--font-type); font-size: .9rem;
}
.eggs-title { margin: 0 0 10px; font-weight: 700; font-size: 1rem; }
.eggs-panel ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.eggs-panel li { display: flex; gap: 8px; line-height: 1.3; }
.eggs-panel li span { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #d6cfc4; font-weight: 700; font-size: .75rem; }
.eggs-panel li.is-found span { background: #27a548; color: #fff; }
.eggs-panel li.is-found { text-decoration: none; font-weight: 700; }
.eggs-reset { margin-top: 12px; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font-size: .8rem; opacity: .7; }

/* ---------- Chepyto y el big bang ---------- */
.chepyto {
  position: fixed; left: 18px; bottom: 0; z-index: 75; width: 120px; height: 120px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(105%) rotate(8deg); transition: transform .7s cubic-bezier(.3,1.5,.5,1);
}
.chepyto.is-peeking { transform: translateY(48%) rotate(8deg); }
.chepyto.is-peeking:hover { transform: translateY(30%) rotate(-4deg); }
.chepyto.is-lit { transform: translateY(20%) rotate(0); animation: shake .12s linear infinite; }
.chepyto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.chepyto .spark { position: absolute; right: 2px; top: -4px; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #fff 0 15%, #ffd23f 35%, rgba(255,120,0,0) 70%); opacity: 0; }
.chepyto.is-lit .spark { opacity: 1; animation: spark .15s linear infinite alternate; }
@keyframes spark { to { transform: scale(1.6) rotate(40deg); } }
@keyframes shake { 25% { translate: -2px 1px; } 75% { translate: 2px -1px; } }
.boom-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; overflow: hidden; }
.boom-count { position: absolute; inset: 0; display: grid; place-items: center; font: italic 900 32vmin/1 var(--font-display); color: var(--red); -webkit-text-stroke: 6px #fff; paint-order: stroke; animation: count .9s ease-out both; }
@keyframes count { from { transform: scale(.3); opacity: 0; } 30% { transform: scale(1); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.boom-flash { position: absolute; inset: 0; background: #fff; animation: flash .6s ease-out forwards; }
@keyframes flash { to { opacity: 0; } }
.boom-word { position: absolute; left: 50%; top: 50%; font: italic 900 22vmin/.9 var(--font-display); color: transparent; -webkit-text-stroke: 4px var(--red); white-space: nowrap; transform: translate(-50%, -50%); animation: bigbang 2.4s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes bigbang { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } 60% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }
.boom-burst { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; }
body.is-shaking main { animation: shake .09s linear 8; }

/* ---------- Modos secretos ---------- */
body.mode-cafe { --pink: #E9D9C2; --lav: #BE9E7C; }
body.mode-cafe .glass { background: linear-gradient(110deg, rgba(255,255,255,.5), rgba(160,100,50,.25)); }
.steam { position: fixed; z-index: 70; bottom: 0; width: 60px; height: 50vh; pointer-events: none; }
.steam path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 6; stroke-linecap: round; animation: steam 3.2s ease-in-out infinite; }
@keyframes steam { from { transform: translateY(40%); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-20%); opacity: 0; } }
body.mode-creativa { animation: stripes 1.2s linear infinite; background-image: repeating-linear-gradient(90deg, #F4C9D6 0 52px, #BCBADD 52px 104px, #FBE38E 104px 156px, #B9E6CF 156px 208px); }
@keyframes stripes { to { background-position: 208px 0; } }
body.mode-creativa .pin-card, body.mode-creativa .postit, body.mode-creativa .sticker, body.mode-creativa .dymo { animation: jiggle .5s ease-in-out infinite alternate; }
@keyframes jiggle { from { rotate: -2deg; } to { rotate: 2deg; } }
body.mode-2001 .big-word, body.mode-2001 h1 { background: linear-gradient(90deg, #ff5ea8, #7d6bff, #3fd1ff, #7cff9a, #ffe14d); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.mode-2001 .f-loop path { stroke: #7d6bff; }
.sparkle { position: fixed; z-index: 70; pointer-events: none; font-size: 18px; animation: sparkle .9s ease-out forwards; }
@keyframes sparkle { to { transform: translateY(26px) scale(.2); opacity: 0; } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 0; gap: 0; }
  .badge-slot { height: 420px; margin-top: 0; }
  .badge-rig { transform-origin: 50% 0; scale: .78; transform-origin: top center; }
  .about-grid { grid-template-columns: 1fr; }
  .about-side { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding: 0 4%; }
  .contact-grid { grid-template-columns: 1fr; }
  .folder-inner { overflow-y: auto; padding-top: 0; }
  .folder-top { position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * clamp(18px, 3vw, 40px)) 20px; padding: 18px clamp(18px, 3vw, 40px) 12px; background: var(--slide); }
  .folder-grid { flex: none; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .folder-grid > div:last-child { overflow: visible; padding-right: 0; }
  .folder-main { flex: none; height: 44vh; }
}
@media (max-width: 700px) {
  :root { --stripe: 34px; }
  .topbar { padding-left: 16px; }
  .topbar .pills a:not(.is-cta) { display: none; }
  .badge-slot { height: 380px; }
  .badge-rig { scale: .7; }
  .strap { height: 110px; }
  .sticker-burst { width: 108px; height: 108px; right: -14px; top: -66px; }
  .sticker-burst span { font-size: .8rem; }
  .glass { border-radius: 30px; }
  .about, .board-section, .services, .contact { padding-top: 64px; padding-bottom: 64px; }
  .paper-stack { width: 90%; }
  .keys { --ks: clamp(19px, 5.4vw, 30px); --kg: 4px; }
  .key-row:nth-child(2) { padding-left: 6px; } .key-row:nth-child(3) { padding-left: 12px; } .key-row:nth-child(4) { padding-left: 18px; }
  .lever { display: none; }
  .paper { padding: 24px 20px 64px; font-size: .88rem; min-height: 430px; }
  .about-side { grid-template-columns: 1fr; }
  .sticker-ai { right: -10px; top: -46px; font-size: .9rem; }
  .sticker-ai .ai { font-size: 1.8rem; }
  .sticker-idea { left: -8px; bottom: -40px; font-size: .85rem; }
  .flag-pin { left: -12px; }
  .folder-top { flex-direction: column-reverse; align-items: stretch; }
  .folder-ctrl { justify-content: flex-end; }
  .chepyto { width: 92px; height: 92px; }
  .postcard { padding: 22px 16px 16px; transform: none; }
  .stamp { width: 62px; height: 72px; right: 12px; }
  .pc-field:nth-of-type(-n+2) { margin-right: 74px; }
  .eggs-label { display: none; }
  .eggs-btn { padding: 9px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}