:root {
  --bg: #f4f3ef;
  --surface: #ebe9e3;
  --text: #111111;
  --muted: #6d6b66;
  --line: rgba(17, 17, 17, 0.18);
  --accent-1: #ff5f56;
  --accent-2: #4f63ff;
  --accent-3: #c7ff3e;
  --header-bg: rgba(244, 243, 239, 0.82);
  --font-sans: "Inter", sans-serif;
  --font-mono: "Space Mono", monospace;
}

body[data-bs-theme="dark"] {
  --bg: #0a0a0a;
  --surface: #151515;
  --text: #f3f3ef;
  --muted: #9e9e98;
  --line: rgba(255, 255, 255, 0.18);
  --header-bg: rgba(10, 10, 10, 0.82);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  transition: background-color .35s ease, color .35s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.border-top {
  border-color: var(--line) !important;
}

.site-header {
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.navbar {
  min-height: 62px;
}

.navbar-brand,
.section-number,
.eyebrow,
.project-type,
.timeline-kicker,
.theme-toggle,
.doc-year,
.doc-type {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.navbar-brand {
  font-weight: 700;
  font-size: .95rem;
}

.nav-link {
  color: var(--text);
  font-size: .9rem;
}

.nav-link:hover {
  opacity: .55;
}

.theme-toggle {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: .5rem .75rem;
  font-size: .7rem;
}

.hero {
  position: relative;
  overflow: hidden;
  padding-top: 90px;
}

.hero-title,
.project-title {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(3.4rem, 10vw, 10rem);
  line-height: .86;
  letter-spacing: -.07em;
  font-weight: 400;
}

.hero-intro {
  position: relative;
  z-index: 2;
  max-width: 850px;
  font-size: clamp(1.25rem, 2.5vw, 2.45rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.eyebrow,
.section-number {
  font-size: .73rem;
  color: var(--muted);
}

.index-link {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .85rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: .25rem;
}

.hero-orbit {
  position: absolute;
  width: min(52vw, 700px);
  aspect-ratio: 1;
  right: -8vw;
  top: 14vh;
  opacity: .75;
}

.orbit,
.orbit-core {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.orbit-a { width: 100%; height: 100%; animation: orbitSpin 18s linear infinite; }
.orbit-b { width: 68%; height: 68%; border-radius: 42% 58% 51% 49%; animation: orbitSpin 12s linear reverse infinite; }
.orbit-c { width: 38%; height: 38%; border-color: var(--accent-2); animation: orbitPulse 5s ease-in-out infinite; }
.orbit-core { width: 8%; height: 8%; background: var(--accent-1); border: 0; }

@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes orbitPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.25); }
}

.section-pad {
  padding: clamp(5rem, 9vw, 10rem) 0;
}

.display-heading {
  font-size: clamp(2.3rem, 5vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 400;
}

.section-copy {
  max-width: 700px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.filter-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: .55rem .8rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  text-transform: uppercase;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--text);
  color: var(--bg);
}

.project-card {
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.project-card.is-hidden {
  display: none;
}

.project-card__link {
  display: block;
}

.project-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: var(--surface);
}

.project-index {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: .72rem;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1rem 2rem;
}

.project-meta h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: -.025em;
}

.project-type {
  margin-bottom: .4rem;
  font-size: .65rem;
  color: var(--muted);
}

.project-arrow {
  font-size: 1.5rem;
  transition: transform .25s ease;
}

.project-card:hover .project-arrow {
  transform: translate(4px, -4px);
}

.visual-01 { background: #d9d7ff; }
.visual-02 { background: #1b1b1b; }
.visual-03 { background: #ded9ca; }
.visual-04 { background: #bad3ca; }
.visual-05 { background: #d8c1b6; }
.visual-06 { background: #c8c8c8; }

body[data-bs-theme="dark"] .visual-03,
body[data-bs-theme="dark"] .visual-04,
body[data-bs-theme="dark"] .visual-05,
body[data-bs-theme="dark"] .visual-06 {
  filter: brightness(.72);
}

.generative-shape {
  position: absolute;
  width: 56%;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(18deg);
  border: 1px solid #111;
  border-radius: 40% 60% 54% 46%;
  box-shadow:
    0 0 0 18px transparent,
    0 0 0 19px rgba(17,17,17,.35),
    0 0 0 42px transparent,
    0 0 0 43px rgba(17,17,17,.25),
    0 0 0 67px transparent,
    0 0 0 68px rgba(17,17,17,.16);
  animation: morph 8s ease-in-out infinite alternate;
}

@keyframes morph {
  from { border-radius: 40% 60% 54% 46%; transform: translate(-50%, -50%) rotate(18deg) scale(.92); }
  to { border-radius: 58% 42% 36% 64%; transform: translate(-50%, -50%) rotate(58deg) scale(1.08); }
}

.light-volume {
  position: absolute;
  inset: 20%;
  background: radial-gradient(circle at 35% 35%, #fff 0, #fff 4%, #ff5f56 12%, #4534ff 48%, transparent 70%);
  filter: blur(2px);
  border-radius: 50% 45% 55% 40%;
  animation: orbitPulse 5s ease-in-out infinite;
}

.planet-system span {
  position: absolute;
  border: 1px solid #111;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.planet-system span:nth-child(1) { width: 70%; height: 32%; transform: translate(-50%, -50%) rotate(18deg); }
.planet-system span:nth-child(2) { width: 48%; height: 48%; }
.planet-system span:nth-child(3) { width: 12%; height: 12%; background: #111; }

.river-lines,
.woven-grid,
.interface-grid {
  position: absolute;
  inset: 12%;
}

.river-lines {
  background:
    repeating-radial-gradient(ellipse at 20% 50%, transparent 0 16px, rgba(17,17,17,.5) 17px 18px, transparent 19px 31px);
  transform: rotate(-14deg);
}

.woven-grid {
  background:
    linear-gradient(90deg, transparent 47%, rgba(17,17,17,.55) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(17,17,17,.55) 48% 52%, transparent 53%);
  background-size: 38px 38px;
  transform: perspective(400px) rotateX(55deg) rotateZ(-18deg);
}

.interface-grid {
  border: 1px solid #111;
  background:
    linear-gradient(90deg, transparent 49.6%, #111 50%, transparent 50.4%),
    linear-gradient(0deg, transparent 49.6%, #111 50%, transparent 50.4%);
  background-size: 33.333% 33.333%;
}

.timeline {
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 110px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.timeline-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 2rem;
  padding: 0 0 4.5rem;
  position: relative;
}

.timeline-year {
  font-family: var(--font-mono);
  font-size: .8rem;
  padding-top: .2rem;
}

.timeline-content {
  position: relative;
  padding-left: 2rem;
  max-width: 700px;
}

.timeline-content::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: -5px;
  top: .3rem;
  border-radius: 50%;
  background: var(--text);
}

.timeline-content h3 {
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  letter-spacing: -.04em;
  font-weight: 400;
}

.timeline-content p:not(.timeline-kicker) {
  color: var(--muted);
  max-width: 620px;
}

.timeline-kicker {
  font-size: .67rem;
  color: var(--muted);
}

.tag-cloud {
  min-height: 480px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: .55rem 1.25rem;
  padding: 4rem 1rem;
  border: 1px solid var(--line);
}

.tag {
  border: 0;
  background: transparent;
  color: var(--text);
  line-height: .95;
  letter-spacing: -.05em;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}

.tag:hover,
.tag.active {
  color: var(--accent-1);
  transform: translateY(-3px);
}

.tag-cloud.has-selection .tag:not(.active) {
  opacity: .18;
}

.tag-xl { font-size: clamp(3rem, 7vw, 7rem); }
.tag-lg { font-size: clamp(2.2rem, 5vw, 5rem); }
.tag-md { font-size: clamp(1.6rem, 3.6vw, 3.6rem); }
.tag-sm { font-size: clamp(1rem, 2vw, 2rem); }

.tag-result {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
}

.document-list {
  border-top: 1px solid var(--line);
}

.document-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 180px 30px;
  gap: 1rem;
  align-items: center;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}

.document-row:hover {
  opacity: .55;
}

.doc-year,
.doc-type {
  font-size: .68rem;
  color: var(--muted);
}

.doc-title {
  font-size: clamp(1.2rem, 2vw, 2rem);
  letter-spacing: -.025em;
}

.profile-lead {
  font-size: clamp(1.8rem, 3.6vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.045em;
}

.profile-links {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: .78rem;
}

.site-footer {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
}

.project-hero {
  position: relative;
  overflow: hidden;
  padding-top: 90px;
}

.project-title {
  max-width: 1200px;
  font-size: clamp(3.2rem, 9vw, 9rem);
}

.project-hero-visual {
  position: absolute;
  width: 48vw;
  aspect-ratio: 1;
  right: -8vw;
  top: 18vh;
  opacity: .65;
}

.shape-wire--large {
  width: 58%;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.process-step {
  min-height: 270px;
  padding: 1.4rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.process-step span {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
}

.process-step h3 {
  margin-top: 3.5rem;
  font-size: 1.65rem;
  font-weight: 400;
}

.process-step p {
  color: var(--muted);
  font-size: .92rem;
}

.project-dark {
  background: #0a0a0a;
  color: #f4f3ef;
}

.project-dark .section-copy,
.project-dark .section-number {
  color: #aaa;
}

.large-placeholder {
  min-height: 620px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.3);
  background:
    radial-gradient(circle at 30% 30%, rgba(79,99,255,.8), transparent 25%),
    radial-gradient(circle at 70% 70%, rgba(255,95,86,.65), transparent 28%),
    #111;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: #aaa;
}

.reveal {
  animation: revealUp .85s ease both;
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991.98px) {
  .hero-orbit,
  .project-hero-visual {
    width: 88vw;
    right: -30vw;
    top: 22vh;
    opacity: .42;
  }

  .project-visual {
    min-height: 360px;
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .document-row {
    grid-template-columns: 70px 1fr 24px;
  }

  .doc-type {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: 3.25rem;
  }

  .display-heading {
    font-size: 2.35rem;
  }

  .timeline::before {
    left: 60px;
  }

  .timeline-item {
    grid-template-columns: 60px 1fr;
    gap: 1rem;
  }

  .timeline-content {
    padding-left: 1.25rem;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .tag-cloud {
    min-height: 360px;
    padding: 2.5rem .8rem;
  }

  .project-visual {
    min-height: 310px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   BAUDIO BEAR — CURVAS ORGÁNICAS
   ========================================================= */
.baudio-bear--curved {
  position: absolute;
  width: min(39vw, 490px);
  right: 3.5vw;
  top: 9vh;
  z-index: 1;
  color: var(--text);
  transform-origin: 50% 85%;
  pointer-events: auto;
}

.baudio-bear--curved .baudio-bear__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .12));
}

.organic-bear {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: organicBreath 5.8s ease-in-out infinite;
}

.organic-shadow {
  fill: rgba(17, 17, 17, .14);
  transform-box: fill-box;
  transform-origin: center;
  animation: organicShadow 5.8s ease-in-out infinite;
}

.organic-dark,
.organic-body-shape,
.organic-arm,
.organic-leg { fill: #171717; }

.organic-head { fill: #242424; }
.organic-face-panel { fill: #f3f1eb; }

.organic-eye {
  fill: #222;
  transform-box: fill-box;
  transform-origin: center;
  animation: organicBlink 7.6s ease-in-out infinite;
}

.organic-pupil {
  fill: #f3f1eb;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease-out;
}

.organic-muzzle { fill: #d9d5cc; }
.organic-nose { fill: #151515; }

.organic-mouth {
  fill: none;
  stroke: #151515;
  stroke-width: 5;
  stroke-linecap: round;
}

.organic-belly { fill: #373737; }

.organic-signal {
  fill: var(--accent-2);
  opacity: .78;
  transform-box: fill-box;
  transform-origin: center;
  animation: organicSignal 4.6s ease-in-out infinite;
}

.organic-ear {
  transform-box: fill-box;
  transform-origin: center;
  animation: organicEar 8s ease-in-out infinite;
}

.organic-ear--right { animation-delay: -4s; }

.organic-arm {
  transform-box: fill-box;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.organic-arm--left { transform-origin: 90% 10%; }
.organic-arm--right { transform-origin: 10% 10%; }

.baudio-bear--curved:hover .organic-arm--left {
  transform: rotate(4deg) translateY(-2px);
}

.baudio-bear--curved:hover .organic-arm--right {
  transform: rotate(-4deg) translateY(-2px);
}

.baudio-bear--curved .baudio-bear__caption {
  margin-top: -1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  color: var(--muted);
}

body[data-bs-theme="dark"] .organic-shadow {
  fill: rgba(255, 255, 255, .08);
}

body[data-bs-theme="dark"] .organic-face-panel {
  fill: #eceae4;
}

@keyframes organicBreath {
  0%, 100% { transform: translateY(0) rotate(-.3deg) scaleX(1) scaleY(1); }
  50% { transform: translateY(-6px) rotate(.3deg) scaleX(1.018) scaleY(1.01); }
}

@keyframes organicShadow {
  0%, 100% { transform: scaleX(1); opacity: .8; }
  50% { transform: scaleX(.91); opacity: .5; }
}

@keyframes organicBlink {
  0%, 45%, 49%, 100% { transform: scaleY(1); }
  47% { transform: scaleY(.08); }
}

@keyframes organicEar {
  0%, 84%, 100% { transform: rotate(0) scale(1); }
  89% { transform: rotate(-5deg) scale(1.03); }
  94% { transform: rotate(3deg) scale(.99); }
}

@keyframes organicSignal {
  0%, 100% { opacity: .24; transform: translateX(-2px) scale(.98); }
  50% { opacity: .9; transform: translateX(4px) scale(1.025); }
}

.baudio-bear--curved.is-listening .organic-bear {
  animation-play-state: paused;
}

.baudio-bear--curved.is-listening .organic-signal {
  animation-duration: 1.15s;
}

@media (max-width: 991.98px) {
  .baudio-bear--curved {
    width: min(56vw, 405px);
    right: -7vw;
    top: 15vh;
    opacity: .76;
  }
}

@media (max-width: 575.98px) {
  .baudio-bear--curved {
    width: 82vw;
    right: -30vw;
    top: 22vh;
    opacity: .44;
  }

  .baudio-bear--curved .baudio-bear__caption {
    display: none;
  }
}


/* =========================================================
   BAUDIO BEAR — IDENTIDAD MONOCROMA Y MIRADA
   ========================================================= */
:root {
  --bear-main: #2c2c2c;
  --bear-secondary: #454545;
  --bear-detail: #151515;
  --bear-muzzle: #b9b7b1;
  --bear-eye: #151515;
  --bear-eye-light: #f1f0eb;
}

body[data-bs-theme="dark"] {
  --bear-main: #171717;
  --bear-secondary: #303030;
  --bear-detail: #050505;
  --bear-muzzle: #777771;
  --bear-eye: #050505;
  --bear-eye-light: #dad9d4;
}

/* Cabeza y rostro son una sola masa cromática. */
.baudio-bear--curved .organic-head,
.baudio-bear--curved .organic-dark,
.baudio-bear--curved .organic-body-shape,
.baudio-bear--curved .organic-arm,
.baudio-bear--curved .organic-leg {
  fill: var(--bear-main);
  transition: fill .35s ease;
}

.baudio-bear--curved .organic-belly {
  fill: var(--bear-secondary);
  transition: fill .35s ease;
}

.baudio-bear--curved .organic-muzzle {
  fill: var(--bear-muzzle);
  transition: fill .35s ease;
}

.baudio-bear--curved .organic-eye,
.baudio-bear--curved .organic-nose {
  fill: var(--bear-eye);
  transition: fill .35s ease, transform .28s ease;
}

.baudio-bear--curved .organic-pupil {
  fill: var(--bear-eye-light);
  transition: transform .22s ease, r .22s ease;
}

.organic-brow {
  fill: none;
  stroke: var(--bear-detail);
  stroke-width: 6;
  stroke-linecap: round;
  transition: transform .28s ease, opacity .28s ease;
  transform-box: fill-box;
  transform-origin: center;
  opacity: .62;
}

/* Estado tierno: pupilas algo centradas hacia dentro y cejas suaves. */
.baudio-bear--curved[data-expression="tender"] .organic-pupil--left {
  transform: translate(2px, 2px);
}

.baudio-bear--curved[data-expression="tender"] .organic-pupil--right {
  transform: translate(-2px, 2px);
}

.baudio-bear--curved[data-expression="tender"] .organic-brow--left {
  transform: rotate(-5deg) translateY(2px);
}

.baudio-bear--curved[data-expression="tender"] .organic-brow--right {
  transform: rotate(5deg) translateY(2px);
}

/* Estado atento: mirada frontal, pupila más pequeña y cejas firmes. */
.baudio-bear--curved[data-expression="focus"] .organic-pupil {
  transform: translate(0, -1px) scale(.76);
}

.baudio-bear--curved[data-expression="focus"] .organic-brow--left {
  transform: rotate(3deg) translateY(-3px);
  opacity: 1;
}

.baudio-bear--curved[data-expression="focus"] .organic-brow--right {
  transform: rotate(-3deg) translateY(-3px);
  opacity: 1;
}

.baudio-bear--curved[data-expression="focus"] .organic-eye {
  transform: scaleY(1.08);
}

/* La señal deja de ser azul y adopta escala de grises según el tema. */
.baudio-bear--curved .organic-signal {
  fill: var(--bear-secondary);
  opacity: .34;
  mix-blend-mode: normal;
}

/* En hover/foco la señal se vuelve más definida, sin introducir color. */
.baudio-bear--curved[data-expression="focus"] .organic-signal {
  opacity: .68;
}

/* Transición general entre modo claro y oscuro. */
.baudio-bear--curved,
.baudio-bear--curved * {
  transition-property: fill, stroke, opacity, transform, filter;
  transition-duration: .35s;
  transition-timing-function: ease;
}


/* =========================================================
   BAUDIO BEAR — GEOMETRÍA LINEAL CURVA
   ========================================================= */
:root {
  --bear-fill: rgba(17, 17, 17, .035);
  --bear-line: #161616;
  --bear-line-soft: rgba(22, 22, 22, .34);
  --bear-node: #161616;
}

body[data-bs-theme="dark"] {
  --bear-fill: rgba(255, 255, 255, .025);
  --bear-line: #e7e6e1;
  --bear-line-soft: rgba(231, 230, 225, .34);
  --bear-node: #e7e6e1;
}

.baudio-bear--linear {
  position: absolute;
  width: min(39vw, 500px);
  right: 3.5vw;
  top: 8vh;
  z-index: 1;
  pointer-events: auto;
  transform-origin: 50% 88%;
}

.baudio-bear--linear .baudio-bear__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.linear-shadow {
  fill: var(--bear-line-soft);
  opacity: .28;
  transform-box: fill-box;
  transform-origin: center;
  animation: linearShadow 6.2s ease-in-out infinite;
}

.linear-bear {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: linearBreath 6.2s ease-in-out infinite;
}

.bear-silhouette {
  fill: var(--bear-fill);
  stroke: var(--bear-line);
  stroke-width: 5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.face-curve,
.torso-line {
  fill: none;
  stroke: var(--bear-line);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.structural-line,
.limb-line {
  fill: none;
  stroke: var(--bear-line-soft);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.eye-line {
  fill: none;
  stroke: var(--bear-line);
  stroke-width: 5;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .28s ease, d .28s ease;
  vector-effect: non-scaling-stroke;
}

.focus-dot {
  fill: var(--bear-node);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .24s ease, opacity .24s ease;
}

.muzzle-line,
.nose-line,
.mouth-line {
  fill: none;
  stroke: var(--bear-line);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.muzzle-line { stroke-width: 2.5; }
.nose-line { stroke-width: 4; }
.mouth-line { stroke-width: 3; }

.data-curve {
  fill: none;
  stroke: var(--bear-line);
  stroke-width: 2;
  stroke-dasharray: 5 10;
  stroke-linecap: round;
  opacity: .36;
  animation: dataTravel 5s linear infinite;
  vector-effect: non-scaling-stroke;
}

.data-node {
  fill: var(--bear-node);
  opacity: .34;
  animation: nodePulse 3s ease-in-out infinite;
}

.data-node--2 { animation-delay: -1s; }
.data-node--3 { animation-delay: -2s; }

.baudio-bear--linear .baudio-bear__caption {
  margin-top: -1rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .12em;
  color: var(--muted);
}

/* Estado base: mirada levemente lateral, más contemplativa que tierna. */
.baudio-bear--linear[data-expression="rest"] .focus-dot--left,
.baudio-bear--linear[data-expression="rest"] .focus-dot--right {
  transform: translate(-2px, 1px);
  opacity: .72;
}

/* Estado activo: mirada frontal y líneas oculares tensas. */
.baudio-bear--linear[data-expression="focus"] .focus-dot {
  transform: translate(0, 0) scale(1.18);
  opacity: 1;
}

.baudio-bear--linear[data-expression="focus"] .eye-line--left {
  transform: rotate(2deg) translateY(-2px);
}

.baudio-bear--linear[data-expression="focus"] .eye-line--right {
  transform: rotate(-2deg) translateY(-2px);
}

.baudio-bear--linear[data-expression="focus"] .data-curve {
  opacity: .82;
  stroke-dasharray: 2 7;
}

.baudio-bear--linear[data-expression="focus"] .data-node {
  opacity: 1;
}

@keyframes linearBreath {
  0%, 100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
  50% {
    transform: translateY(-4px) scaleX(1.006) scaleY(1.012);
  }
}

@keyframes linearShadow {
  0%, 100% {
    transform: scaleX(1);
    opacity: .24;
  }
  50% {
    transform: scaleX(.94);
    opacity: .14;
  }
}

@keyframes dataTravel {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -60; }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(.75); opacity: .25; }
  50% { transform: scale(1.25); opacity: .68; }
}

@media (max-width: 991.98px) {
  .baudio-bear--linear {
    width: min(58vw, 420px);
    right: -8vw;
    top: 14vh;
    opacity: .78;
  }
}

@media (max-width: 575.98px) {
  .baudio-bear--linear {
    width: 84vw;
    right: -31vw;
    top: 22vh;
    opacity: .46;
  }

  .baudio-bear--linear .baudio-bear__caption {
    display: none;
  }
}

/* RETÍCULA 09 */
.interactive-visual{position:absolute;inset:0;overflow:hidden;cursor:crosshair}
.visual-caption{position:absolute;left:1rem;bottom:1rem;z-index:5;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;opacity:.58}
.river-canvas,.fabric-svg,.sketch-svg,.chimera-svg{display:block;width:100%;height:100%}
.fabric-thread{fill:none;stroke:rgba(17,17,17,.56);stroke-width:1.25;vector-effect:non-scaling-stroke}
body[data-bs-theme="dark"] .fabric-thread{stroke:rgba(255,255,255,.56)}
.layout-frame{position:absolute;inset:14%;border:1px solid currentColor;transform-origin:center;transition:transform .3s ease}
.layout-block{position:absolute;border:1px solid currentColor;background:rgba(255,255,255,.06);transition:all .35s cubic-bezier(.2,.8,.2,1)}
.block-a{left:5%;top:5%;width:56%;height:22%}.block-b{right:5%;top:5%;width:28%;height:52%}.block-c{left:5%;bottom:5%;width:36%;height:58%}.block-d{left:46%;bottom:5%;width:49%;height:31%}
.layout-axis{position:absolute;background:currentColor;opacity:.35}.axis-x{left:0;right:0;height:1px;top:50%}.axis-y{top:0;bottom:0;width:1px;left:50%}
.visual-07{background:#d9d4c8}.visual-08{background:#bfc4c1}.visual-09{background:#c7c9c7}
.sketch-svg,.chimera-svg{transition:transform .3s ease}
.sketch-line{fill:none;stroke:#171717;stroke-width:2;stroke-linecap:round;stroke-dasharray:7 9;animation:sketchFlow 7s linear infinite;vector-effect:non-scaling-stroke}
.sketch-line--2{animation-duration:9s;opacity:.72}.sketch-line--3{animation-duration:11s;opacity:.46}.sketch-line--4{animation-duration:13s;opacity:.32}
.sketch-node{fill:#171717;transform-box:fill-box;transform-origin:center;animation:sketchNode 3s ease-in-out infinite}
.chimera-body{fill:rgba(17,17,17,.07);stroke:#171717;stroke-width:3;vector-effect:non-scaling-stroke}
.chimera-limb,.chimera-horn,.chimera-tail{fill:none;stroke:#171717;stroke-width:3;stroke-linecap:round;transform-box:fill-box;transform-origin:center;transition:transform .35s ease;vector-effect:non-scaling-stroke}
.chimera-eye{fill:#171717;transition:transform .2s ease}
.chimera-system:hover .horn-one{transform:rotate(-9deg)}.chimera-system:hover .horn-two{transform:rotate(9deg)}.chimera-system:hover .limb-one{transform:rotate(7deg)}.chimera-system:hover .limb-two{transform:rotate(-7deg)}.chimera-system:hover .chimera-tail{transform:rotate(-8deg)}
.photo-frame{position:absolute;border:1px solid rgba(17,17,17,.78);background:linear-gradient(135deg,rgba(17,17,17,.06),transparent 55%),repeating-linear-gradient(90deg,rgba(17,17,17,.06) 0 1px,transparent 1px 18px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.frame-one{inset:13% 37% 43% 12%}.frame-two{inset:31% 12% 14% 43%}.frame-three{inset:54% 52% 10% 18%}
.photo-focus{position:absolute;width:82px;height:82px;left:calc(50% - 41px);top:calc(50% - 41px);border:1px solid rgba(17,17,17,.76);border-radius:50%;transition:transform .25s ease}
.photo-focus:before,.photo-focus:after{content:"";position:absolute;background:rgba(17,17,17,.76)}.photo-focus:before{width:120px;height:1px;left:-19px;top:40px}.photo-focus:after{width:1px;height:120px;left:40px;top:-19px}
@keyframes sketchFlow{to{stroke-dashoffset:-90}}@keyframes sketchNode{0%,100%{transform:scale(.72);opacity:.38}50%{transform:scale(1.28);opacity:1}}


/* =========================================================
   ESCALA TIPOGRÁFICA AJUSTABLE DE LA PORTADA
   Cambia solamente --hero-name-size-desktop para regular
   el tamaño máximo del nombre.
   ========================================================= */
:root {
  --hero-name-size-desktop: 7.2rem;
  --hero-name-size-tablet: 5.4rem;
  --hero-name-size-mobile: 3.15rem;
  --hero-name-line-height: .9;
  --hero-name-letter-spacing: -.065em;
}

.hero-title {
  font-size: clamp(
    var(--hero-name-size-mobile),
    8vw,
    var(--hero-name-size-desktop)
  );
  line-height: var(--hero-name-line-height);
  letter-spacing: var(--hero-name-letter-spacing);
}

/* Clases opcionales equivalentes a escalas H1–H4.
   Basta añadir una de estas clases al h1 del nombre. */
.hero-title--h1 {
  --hero-name-size-desktop: 7.2rem;
}

.hero-title--h2 {
  --hero-name-size-desktop: 5.8rem;
}

.hero-title--h3 {
  --hero-name-size-desktop: 4.7rem;
}

.hero-title--h4 {
  --hero-name-size-desktop: 3.8rem;
}

@media (max-width: 991.98px) {
  .hero-title {
    font-size: clamp(
      var(--hero-name-size-mobile),
      9vw,
      var(--hero-name-size-tablet)
    );
  }
}

@media (max-width: 575.98px) {
  .hero-title {
    font-size: var(--hero-name-size-mobile);
  }
}