/* TonoSana – «Sala de mezcla»: capa visual sobre styles.css + diseno.css (ver DESIGN.md) */
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage.woff2?v=20261017") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
:root {
  --bg: #f4f2ec;
  --surface: #fffdf8;
  --text: #121816;
  --muted: #59625f;
  --line: #e2ddd2;
  --senal: #d94a2b;
  --titulo: "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --sombra: 0 1px 1px rgba(30, 26, 18, .05), 0 6px 20px -6px rgba(30, 26, 18, .12);
  --sombra-alta: 0 2px 4px rgba(30, 26, 18, .06), 0 22px 44px -14px rgba(30, 26, 18, .24);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1110;
    --surface: #151b19;
    --text: #ecf1ef;
    --muted: #9aa8a4;
    --line: #26302d;
    --senal: #ff7a5c;
    --sombra: 0 1px 1px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .6);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 48px -14px rgba(0, 0, 0, .75);
  }
}

body { background: var(--bg); }
::selection { background: color-mix(in srgb, var(--brand) 25%, transparent); }

h1, h2, .card-title, .hub-card strong, .logo { font-family: var(--titulo); }
h1 { font-weight: 760; letter-spacing: -.03em; }
h2 { font-weight: 680; letter-spacing: -.02em; }

/* Cabecera */
.site-header { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color: color-mix(in srgb, var(--line) 80%, transparent); }
.logo { font-weight: 760; letter-spacing: -.02em; }
.logo img { box-shadow: none; }
.nav .nav-tool { transition: background .22s var(--curva), border-color .22s, color .22s; }
.nav .nav-tool[aria-current="page"] { background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: inset 0 -2px 0 var(--brand); }

/* Hero */
.hero { position: relative; padding-top: 40px; }
.hero-ceja {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font: 600 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--senal) 22%, transparent); }
.hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.02; max-width: 15ch; margin-bottom: 14px; }
.hero .lead { font-size: 1.06rem; max-width: 62ch; }

/* Escenario: tarde soleada con el gatito de TonoSana (js/gato.js) */
.escena {
  position: relative; overflow: hidden; isolation: isolate; color: #24170f;
  padding: 0 0 110px; min-height: min(78vh, 640px);
  background:
    radial-gradient(42% 62% at 82% 20%, rgba(255, 248, 228, .95), transparent 70%),
    linear-gradient(118deg, transparent 50%, rgba(255, 255, 255, .3) 56%, transparent 62%, transparent 67%, rgba(255, 255, 255, .22) 71%, transparent 76%),
    radial-gradient(60% 40% at 75% 100%, rgba(214, 140, 96, .35), transparent 70%),
    linear-gradient(180deg, #ffe6c9 0%, #ffd2b0 60%, #f6bf9c 100%);
}
.escena-3d { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.escena::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 0, transparent 60px);
}
.escena .hero { padding-top: clamp(48px, 9vh, 96px); }
.escena .hero-ceja { color: #7a4f35; }
.escena h1 { color: #22150d; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.escena .lead { color: #4a3427; }
.escena .lead strong { color: #22150d; }
.objetos + .hub { position: relative; z-index: 2; margin-top: -96px; }
.objetos + .hub .hub-titulo { color: #7a4f35; }
body:has(.escena) .site-header { background: rgba(255, 236, 214, .92); border-bottom-color: rgba(122, 64, 30, .12); }
body:has(.escena) .site-header .logo, body:has(.escena) .nav .nav-tool { color: #2a1a10; }
body:has(.escena) .nav .nav-tool:hover { background: rgba(255, 255, 255, .55); color: #22150d; }
body:has(.escena) .nav .nav-tool[aria-current="page"] { background: rgba(255, 255, 255, .75); border-color: rgba(122, 64, 30, .16); color: #22150d; box-shadow: inset 0 -2px 0 var(--brand); }

/* Escenario compacto (páginas de herramientas): la herramienta queda a la vista enseguida */
.escena-compacta { min-height: 0; padding-bottom: 64px; }
.escena-compacta .hero { padding-top: clamp(32px, 6vh, 56px); }
.escena-compacta h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); max-width: 22ch; }
.escena-compacta + .objetos .obj-onda { display: none; }
.escena-compacta + .objetos .obj-musica { right: 160px; bottom: 120px; }
.escena-compacta + .objetos .obj-video { right: 20px; bottom: 210px; }
.escena-compacta + .objetos .obj-mic { right: 40px; bottom: 50px; }
.escena-compacta + .objetos + .tool { position: relative; z-index: 2; }

/* Cambio de página: la página actual sale hacia el usuario y la nueva llega desde el fondo (navegadores compatibles) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: salir-pagina .35s var(--curva) both; }
  ::view-transition-new(root) { animation: entrar-pagina .45s var(--curva) both; }
}
@keyframes salir-pagina { to { opacity: 0; scale: 1.06; filter: blur(4px); } }
@keyframes entrar-pagina { from { opacity: 0; scale: .94; } }

/* Canales (accesos a herramientas) */
.hub-titulo, .group-title { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; }
.hub-grid { gap: 14px; perspective: 900px; }
@media (min-width: 700px) { .hub:not(.hub-compacto) .hub-grid { grid-template-columns: repeat(2, 1fr); } }
.hub-card {
  border-radius: 22px; padding: 20px; transform-style: preserve-3d;
  box-shadow: inset 4px 0 0 var(--color), var(--sombra);
  transform: translate3d(0, var(--sy, 0px), var(--sz, 0px)) rotateX(calc(var(--rx, 0deg) + var(--sr, 0deg))) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  opacity: var(--so, 1);
  transition: transform .48s var(--curva), box-shadow .22s, border-color .22s;
}
.hub-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .22s; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--color) 16%, transparent), transparent 70%);
}
.hub-card > :not(.hub-nuevo) { position: relative; transform-style: preserve-3d; }
main { overflow-x: clip; } /* los objetos 3D nunca generan scroll horizontal */
.hub-card:hover { box-shadow: inset 4px 0 0 var(--color), var(--sombra-alta); }
.hub-card:hover { --ty: -3px; }
.hub-card:active { --ty: 2px; }
.hub-card:hover::before { opacity: 1; }
.hub-card.inclinando { transition: transform .12s linear, box-shadow .22s, border-color .22s; }
/* El icono y el título se despegan de la tarjeta hacia el usuario */
.hub-icono, .hub-card strong { transition: transform .48s var(--curva), box-shadow .48s var(--curva); }
.hub-card:hover .hub-icono, .hub-card.inclinando .hub-icono, .hub-card.levitar .hub-icono {
  transform: translateZ(56px) scale(1.12);
  box-shadow: 0 22px 28px -12px color-mix(in srgb, var(--color) 70%, transparent), 0 6px 10px -4px rgba(0, 0, 0, .25);
}
.hub-card:hover strong, .hub-card.inclinando strong, .hub-card.levitar strong { transform: translateZ(24px); }
.hub-icono { border-radius: 14px; background: color-mix(in srgb, var(--color) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--color) 28%, transparent); }
.hub-card strong { font-size: 1.16rem; font-weight: 680; letter-spacing: -.015em; }
.hub-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; }
.hub-num { font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hub-medidor { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.hub-medidor i { width: 4px; height: 30%; border-radius: 2px; background: color-mix(in srgb, var(--color) 55%, var(--line)); transform-origin: bottom; }
.hub-medidor i:nth-child(2) { height: 55%; } .hub-medidor i:nth-child(3) { height: 80%; }
.hub-medidor i:nth-child(4) { height: 45%; } .hub-medidor i:nth-child(5) { height: 65%; }
.hub-ir { margin-top: 0; color: color-mix(in srgb, var(--color) 78%, var(--text)); } /* contraste AA sobre papel */
@media (prefers-color-scheme: dark) { .hub-ir { color: var(--color); } }
.hub-nuevo { background: var(--text); color: var(--bg); font-family: var(--mono); letter-spacing: .08em; }
@media (prefers-reduced-motion: no-preference) {
  .hub-card:hover .hub-medidor i { animation: vumetro .9s var(--curva) infinite alternate; }
  .hub-card:hover .hub-medidor i:nth-child(2) { animation-delay: -.3s; }
  .hub-card:hover .hub-medidor i:nth-child(3) { animation-delay: -.6s; }
  .hub-card:hover .hub-medidor i:nth-child(4) { animation-delay: -.15s; }
  .hub-card:hover .hub-medidor i:nth-child(5) { animation-delay: -.45s; }
}
@keyframes vumetro { from { transform: scaleY(.35); } to { transform: scaleY(1.2); } }

/* Objetos 3D flotantes: anclados al borde inferior del escenario, por encima de las tarjetas */
.objetos {
  position: relative; z-index: 3; height: 0; max-width: 1100px; margin: 0 auto;
  pointer-events: none; perspective: 900px; --px: 0; --py: 0; --sc: 0;
}
.obj {
  position: absolute; display: block; transform-style: preserve-3d;
  transform: translate3d(calc((var(--px) + var(--sc) * var(--lado, 1) * 3) * var(--d) * 1px), calc((var(--py) - var(--sc) * 2) * var(--d) * 1px), calc(var(--z) + var(--sc) * 420px))
             rotateY(calc(var(--px) * -22deg)) rotateX(calc(var(--py) * 16deg));
  opacity: calc(1 - var(--sc) * 1.1);
  transition: transform .6s var(--curva), opacity .3s;
}
.obj-cara {
  --t: 88px; position: relative; display: grid; place-items: center; width: var(--t); height: var(--t);
  border-radius: 28%; transform: rotate(var(--giro, 0deg));
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .55), inset 0 -8px 16px rgba(0, 0, 0, .28),
    0 34px 44px -14px rgba(0, 0, 0, .65), 0 0 46px -4px color-mix(in srgb, var(--c) 60%, transparent);
}
.obj-cara::before {
  content: ""; position: absolute; inset: 4% 8% 52%; border-radius: 40% 40% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
}
.obj-cara svg {
  position: relative; width: 52%; height: 52%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3));
}
.obj-cara svg .relleno { fill: #fff; }
.obj-musica { --lado: -1; --c: #14a394; --d: 34; --z: 60px; right: 170px; bottom: 330px; }
.obj-musica .obj-cara { --t: 108px; --giro: -10deg; }
.obj-video { --c: #e0457b; --d: 14; --z: -90px; right: 0; bottom: 480px; filter: blur(.6px); }
.obj-video .obj-cara { --t: 78px; --giro: 12deg; }
.obj-mic { --lado: .5; --c: #7c5cff; --d: 24; --z: 10px; right: 50px; bottom: 210px; }
.obj-mic .obj-cara { --t: 92px; --giro: 8deg; }
.obj-onda { --c: #e07a24; --d: 46; --z: 120px; right: 40px; bottom: -34px; }
.obj-onda .obj-cara { --t: 84px; --giro: -14deg; }
@media (prefers-reduced-motion: no-preference) {
  .obj-cara { animation: llegar 1.1s var(--curva) both, flotar 6s ease-in-out 1.1s infinite alternate; }
  .obj-video .obj-cara { animation-delay: .15s, 1.25s; animation-duration: 1.1s, 7s; }
  .obj-mic .obj-cara { animation-delay: .3s, 1.4s; animation-duration: 1.1s, 5.5s; }
  .obj-onda .obj-cara { animation-delay: .45s, 1.55s; animation-duration: 1.1s, 6.5s; }
}
@keyframes llegar {
  from { opacity: 0; transform: translateZ(-700px) translateY(60px) rotate(calc(var(--giro, 0deg) - 40deg)) scale(.4); }
  to { opacity: 1; transform: rotate(var(--giro, 0deg)); }
}
@keyframes flotar {
  from { transform: rotate(var(--giro, 0deg)); }
  to { transform: translateY(-16px) rotate(calc(var(--giro, 0deg) + 6deg)); }
}
@media (max-width: 1099px) {
  .escena .hero > * { max-width: 60%; }
  .objetos { margin: 0 16px; }
  .obj { scale: .78; transform-origin: bottom right; }
  .obj-video { display: none; }
  .obj-musica { right: 120px; bottom: 300px; }
  .obj-mic { right: 10px; bottom: 360px; }
  .obj-onda { right: 50px; bottom: 150px; }
}

/* Pads de herramientas */
.tool-btn { position: relative; border-radius: 14px; padding: 11px 12px 11px 14px; transition: border-color .22s, background .22s, transform .12s; }
.tool-btn:active:not(:disabled) { transform: scale(.98); }
.tool-btn.is-active { background: var(--surface); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand), var(--sombra); }
.tool-btn.is-active::after {
  content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}

/* Tarjeta de trabajo */
.card { border-radius: 22px; padding: 22px; }
.card-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.drop { border-radius: 16px; border-color: color-mix(in srgb, var(--muted) 35%, var(--line)); background: color-mix(in srgb, var(--bg) 60%, var(--surface)); transition: border-color .22s, background .22s; }
.drop:hover, .drop.is-over { background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface)); }
.btn-primary { background: var(--brand); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 8px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent); letter-spacing: .01em; transition: transform .12s var(--curva), background .22s, opacity .22s; }
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); }
.btn-primary:active:not(:disabled) { transform: scale(.985); }
.bar { height: 8px; }
.bar-fill { background: repeating-linear-gradient(90deg, var(--brand) 0 6px, color-mix(in srgb, var(--brand) 70%, var(--surface)) 6px 8px); }

/* Tira de confianza */
.trust { gap: 8px 10px; }
.trust li { border-color: var(--line); }

/* Contenido */
.content h2 { font-size: 1.45rem; margin-top: 40px; }
details { transition: border-color .22s; }
details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
summary { list-style-position: outside; }

/* Profundidad con el scroll (js/estudio.js → --sy, --sz, --sr, --so): los bloques suben desde el fondo
   y, al irse por arriba, salen hacia el usuario. Solo transform/opacity: no mueve el diseño (CLS 0). */
.hub-grid, .tool-groups, .tool, .trust, .content, .page { perspective: 1100px; }
.prof:not(.hub-card) {
  transform: translate3d(0, var(--sy, 0px), var(--sz, 0px)) rotateX(var(--sr, 0deg));
  opacity: var(--so, 1);
  transform-origin: 50% 100%;
}
.hub-card.prof { transition: transform .18s linear, opacity .18s linear, box-shadow .22s, border-color .22s; }
.hub-card.prof:hover, .hub-card.prof.inclinando { transition: transform .12s linear, box-shadow .22s, border-color .22s; }
html.midiendo .prof { transform: none !important; }

/* Al elegir una herramienta: el botón salta con una onda y la tarjeta gira para mostrar la opción nueva */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .tool-btn.golpe { animation: golpe .5s var(--curva); }
  .tool-btn.golpe::before {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
    border: 2px solid var(--brand); animation: onda-golpe .6s var(--curva) forwards;
  }
  .card.cambio { animation: cambio .6s var(--curva); }
}
@keyframes golpe {
  0% { scale: 1; }
  30% { scale: 1.1; translate: 0 -5px; }
  60% { scale: .97; translate: 0 0; }
  100% { scale: 1; }
}
@keyframes onda-golpe { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.35; } }
@keyframes cambio {
  0% { rotate: x 14deg; scale: .96; }
  55% { rotate: x -3deg; scale: 1.01; }
  100% { rotate: x 0deg; scale: 1; }
}

@media (max-width: 640px) {
  .hero { padding-top: 22px; }
  .escena { min-height: 0; padding-bottom: 150px; }
  .escena .hero > * { max-width: none; }
  .obj { scale: .5; }
  .obj-onda { display: none; }
  .obj-musica { right: 64px; bottom: 34px; }
  .obj-mic { right: 4px; bottom: 70px; }
  .escena-compacta { padding-bottom: 72px; }
  .escena-compacta + .objetos .obj-video { display: none; }
  .escena-compacta + .objetos .obj-musica { right: 60px; bottom: -6px; }
  .escena-compacta + .objetos .obj-mic { right: 0; bottom: 14px; }
  .escena::after { background: linear-gradient(0deg, var(--bg) 0, transparent 70px); }
  .objetos + .hub { margin-top: -84px; }
  body:has(.escena) .nav .nav-tool { background: rgba(255, 255, 255, .5); border-color: rgba(122, 64, 30, .14); }
  .hero h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .hub-card { padding: 16px; border-radius: 18px; }
  .card { padding: 16px; }
  /* La cabecera en columna no debe envolver: con wrap, la línea toma el ancho del menú y crea scroll horizontal */
  .header-in { flex-wrap: nowrap; }
}

/* Gatito de TonoSana (js/gato.js): ambiente cálido de tarde soleada, carpetitas flotantes y la notita que persigue */
.escena-3d { display: none; }
.escena + .objetos { display: none; }
.escena::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 238, 205, .85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 1px, transparent 2px);
  background-size: 190px 170px, 130px 150px, 90px 110px;
  background-position: 0 0, 40px 60px, 70px 20px;
}
.gato-escena {
  position: absolute; z-index: 0; right: max(12px, calc((100% - 1100px) / 2)); bottom: 70px;
  width: min(44vw, 520px, calc((min(78vh, 640px) - 60px) * .94)); aspect-ratio: 480 / 510;
  pointer-events: none; --px: 0; --py: 0; --sc: 0; --jx: 50%; --jy: 30%;
  translate: 0 calc(var(--sc) * 50px);
}
.gato-compacto { width: min(24vw, 250px); bottom: 0; }
.escena-compacta:has(.gato-escena) { min-height: 300px; }
.gato { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 26px rgba(122, 64, 30, .22)); }
.gato .tocable { pointer-events: visiblePainted; cursor: pointer; }
.gato .cola { transform-box: view-box; transform-origin: 262px 405px; }
.gato .respira { transform-box: view-box; transform-origin: 200px 430px; }
.gato .ojo { transform-box: fill-box; transform-origin: center; transition: transform .07s, opacity .15s; }
.gato.parpadeo .ojo { transform: scaleY(.08); }
.gato .ojo-feliz, .gato .boca-abierta { opacity: 0; transition: opacity .15s; }
.gato.feliz .ojo { opacity: 0; }
.gato.feliz .ojo-feliz, .gato.cazando .boca-abierta, .gato.feliz .boca-abierta { opacity: 1; }

.carpeta {
  position: absolute; left: var(--x); top: var(--y); width: var(--t, 60px);
  translate: calc(var(--px) * var(--d) * -1px) calc((var(--py) * var(--d) * -1 - var(--sc) * var(--d) * 5) * 1px);
  rotate: var(--g, 0deg); filter: drop-shadow(0 10px 12px rgba(122, 64, 30, .28));
  transition: translate .6s var(--curva);
}
.carpeta svg { display: block; width: 100%; height: auto; }
.c-tapa { fill: color-mix(in srgb, var(--c) 70%, #000); }
.c-frente { fill: var(--c); }
.c-brillo { fill: rgba(255, 255, 255, .35); }
.c-glifo { fill: #fff; }
.c1 { --c: #14a394; --x: 2%; --y: 22%; --d: 18; --g: -12deg; --t: 70px; }
.c2 { --c: #ff7a59; --x: 78%; --y: 0%; --d: 30; --g: 10deg; --t: 58px; }
.c3 { --c: #7c5cff; --x: 0%; --y: 58%; --d: 26; --g: 8deg; --t: 60px; }
.c4 { --c: #f5b82e; --x: 84%; --y: 48%; --d: 14; --g: -8deg; --t: 52px; }
.c5 { --c: #e0457b; --x: 10%; --y: -12%; --d: 36; --g: 14deg; --t: 46px; }
.c6 { --c: #3aa0ff; --x: 66%; --y: -16%; --d: 22; --g: -6deg; --t: 50px; }
.gato-compacto .c3, .gato-compacto .c5, .gato-compacto .c6 { display: none; }

.juguete {
  position: absolute; left: var(--jx); top: var(--jy); width: 9%; margin: -4.5% 0 0 -4.5%;
  opacity: 0; scale: .6; transition: opacity .3s, scale .3s; filter: drop-shadow(0 0 10px rgba(255, 196, 80, .9));
}
.con-juguete .juguete { opacity: 1; scale: 1; }
.juguete.pop { animation: pop .5s var(--curva) forwards; }
.juguete svg { display: block; width: 100%; height: auto; }
@keyframes pop { 0% { scale: 1; opacity: 1; } 40% { scale: 1.6; } 100% { scale: 0; opacity: 0; } }

.burbuja {
  position: absolute; left: 50%; top: 14%; font: 800 1.4rem/1 var(--titulo); color: #e0457b;
  text-shadow: 0 2px 0 #fff, 0 6px 14px rgba(122, 64, 30, .25); pointer-events: none; animation: subir 1.4s var(--curva) forwards;
}
.burbuja.b0 { --bx: -70; }
.burbuja.b1 { --bx: 60; color: #14a394; animation-delay: .12s; }
.burbuja.b2 { --bx: 0; color: #7a4f35; font-size: 1.05rem; animation-delay: .24s; }
@keyframes subir {
  from { opacity: 0; translate: 0 10px; scale: .6; }
  20% { opacity: 1; scale: 1.1; }
  to { opacity: 0; translate: calc(var(--bx, 0) * 1px) -90px; scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .escena::before { animation: polvo 50s linear infinite; }
  .gato .cola { animation: cola 3.2s ease-in-out infinite alternate; }
  .gato.cazando .cola { animation-duration: .6s; }
  .gato .respira { animation: respirar 3.6s ease-in-out infinite; }
  .carpeta svg { animation: flotar-c 5s ease-in-out infinite alternate; }
  .c2 svg { animation-duration: 6.2s; animation-delay: -1s; }
  .c3 svg { animation-duration: 4.4s; animation-delay: -2s; }
  .c4 svg { animation-duration: 5.6s; animation-delay: -3s; }
  .c5 svg { animation-duration: 4.8s; animation-delay: -.5s; }
  .c6 svg { animation-duration: 6.6s; animation-delay: -2.5s; }
  .gato-escena { animation: llegar-gato .9s var(--curva) both; }
  .pausa *, .escena:has(.pausa)::before { animation-play-state: paused !important; }
}
@keyframes polvo { to { background-position: 190px -170px, -130px -300px, 180px -220px; } }
@keyframes cola { from { rotate: -7deg; } to { rotate: 9deg; } }
@keyframes respirar { 50% { scale: 1.012 1.018; } }
@keyframes flotar-c { from { translate: 0 0; rotate: 0deg; } to { translate: 0 -14px; rotate: 5deg; } }
@keyframes llegar-gato { from { opacity: 0; translate: 0 40px; scale: .92; } }

@media (max-width: 1099px) {
  .gato-escena { width: min(42vw, 440px); }
  .c1 { --x: 4%; }
  .c3 { --x: 2%; }
}
@media (max-width: 640px) {
  .escena { padding-bottom: 250px; }
  .escena-compacta { padding-bottom: 170px; }
  .gato-escena { width: 205px; right: 10px; bottom: 82px; }
  .gato-compacto { width: 160px; bottom: 0; }
  .c1 { --x: -30%; --y: 30%; --t: 52px; }
  .c2 { --t: 44px; }
  .c3 { --x: -48%; --y: 64%; --t: 46px; }
  .c4 { --t: 40px; }
  .c5, .c6 { display: none; }
}