: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;
  }
}


/* =========================================================
   REVISIÓN 12 — OSO SVG ORIGINAL Y SISTEMAS GENERATIVOS
   ========================================================= */
.baudio-bear--source{position:absolute;width:min(36vw,470px);right:4vw;top:8vh;z-index:1;pointer-events:auto}
.bear-source-stage{position:relative;width:100%;transform-origin:50% 82%;animation:sourceBearBreath 6.5s ease-in-out infinite}
.bear-source-image{position:relative;z-index:2;display:block;width:100%;height:auto;filter:drop-shadow(0 24px 22px rgba(0,0,0,.12))}
.bear-ear-reactor{position:absolute;z-index:1;width:15.5%;aspect-ratio:1;border-radius:50%;background:#050505;top:5.8%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.bear-ear-reactor--left{left:8.7%;transform-origin:80% 75%}.bear-ear-reactor--right{right:8.4%;transform-origin:20% 75%}
.bear-pupil{position:absolute;z-index:4;width:1.7%;aspect-ratio:1;border-radius:50%;background:#f5f3ed;top:19.3%;transition:transform .15s ease-out,opacity .25s ease;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.bear-pupil--left{left:34.7%}.bear-pupil--right{left:60.8%}
.bear-sketch-overlay{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.bear-sketch-overlay path{fill:none;stroke:var(--text);stroke-width:1;stroke-dasharray:5 11;opacity:.2;animation:sourceSketch 10s linear infinite}
.bear-sketch-overlay path:nth-child(2){animation-duration:13s;opacity:.14}.bear-sketch-overlay path:nth-child(3){animation-duration:16s;opacity:.1}
.baudio-bear--source[data-expression="focus"] .bear-ear-reactor--left{transform:rotate(-8deg) scale(1.08)}
.baudio-bear--source[data-expression="focus"] .bear-ear-reactor--right{transform:rotate(8deg) scale(1.08)}
.baudio-bear--source .baudio-bear__caption{text-align:center;margin-top:-.7rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;color:var(--muted)}
@keyframes sourceBearBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.008,1.012)}}
@keyframes sourceSketch{to{stroke-dashoffset:-120}}

/* Shared visual stage */
.interactive-visual{position:absolute;inset:0;overflow:hidden;cursor:crosshair}
.interactive-visual canvas{display:block;width:100%;height:100%}
.visual-caption{position:absolute;left:1rem;bottom:1rem;z-index:8;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;opacity:.62}

/* P03 cosmic vortex */
.cosmic-system{background:radial-gradient(circle at 50% 50%,#111 0 12%,#0a0a0c 38%,#030305 100%)}
.cosmic-canvas{filter:saturate(1.18) contrast(1.05)}

/* P06 expanded adaptive layout */
.layout-system--expanded .layout-frame{position:absolute;inset:0;border:0;overflow:hidden;transform-origin:center;transition:transform .28s ease;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 1px),currentColor calc(12.5% - 1px) 12.5%),repeating-linear-gradient(0deg,transparent 0 calc(12.5% - 1px),currentColor calc(12.5% - 1px) 12.5%);background-size:100% 100%;opacity:.88}
.layout-system--expanded .layout-block{position:absolute;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 82%,var(--text) 18%);transition:all .32s cubic-bezier(.2,.8,.2,1)}
.layout-system--expanded .block-a{left:2%;top:3%;width:46%;height:27%}.layout-system--expanded .block-b{right:2%;top:3%;width:46%;height:45%}.layout-system--expanded .block-c{left:2%;top:34%;width:29%;height:62%}.layout-system--expanded .block-d{left:34%;bottom:4%;width:31%;height:58%}.layout-system--expanded .block-e{right:2%;bottom:4%;width:30%;height:43%}.layout-system--expanded .block-f{left:34%;top:34%;width:17%;height:19%}
.layout-system--expanded .layout-axis{position:absolute;background:currentColor;opacity:.4}.layout-system--expanded .axis-x{left:0;right:0;height:1px;top:50%}.layout-system--expanded .axis-y{top:0;bottom:0;width:1px;left:50%}

/* P07 expanded sketch */
.sketch-system{inset:-10%}.sketch-svg--expanded{width:120%;height:120%;margin:-10%;transition:transform .28s ease}
.sketch-svg--expanded .sketch-line{stroke-width:2.6}.sketch-svg--expanded .sketch-node{transform-origin:center}

/* P08 amorphous beings */
.monsters-svg{width:100%;height:100%;display:block}
.amorphous-being{transform-box:fill-box;transform-origin:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease;cursor:pointer}
.amorphous-being path{fill:color-mix(in srgb,var(--text) 10%,transparent);stroke:var(--text);stroke-width:2;vector-effect:non-scaling-stroke}
.amorphous-being circle{fill:var(--text)}
.amorphous-being.is-near{transform:scale(1.35) rotate(4deg);z-index:5}.amorphous-being.is-far{opacity:.38;transform:scale(.88)}

/* P09 human silhouette with typography */
.visuality-system{background:linear-gradient(135deg,color-mix(in srgb,var(--bg) 92%,var(--text) 8%),var(--bg))}
.visuality-canvas{width:100%;height:100%}

@media(max-width:991.98px){.baudio-bear--source{width:min(55vw,410px);right:-7vw;top:14vh;opacity:.82}}
@media(max-width:575.98px){.baudio-bear--source{width:84vw;right:-32vw;top:22vh;opacity:.5}.baudio-bear--source .baudio-bear__caption{display:none}}
@media(prefers-reduced-motion:reduce){.bear-source-stage,.bear-sketch-overlay path{animation:none}}

/* =========================================================
   REVISIÓN 13 — ESCALA Y POSICIÓN DEL OSO
   ========================================================= */

/* El contenido de portada siempre queda por delante de la figura. */
.hero > .container-fluid {
  position: relative;
  z-index: 2;
}

/* Aproximadamente 70 % del tamaño anterior en escritorio. */
.baudio-bear--source {
  width: min(25.2vw, 330px);
  right: 6vw;
  top: 16vh;
  z-index: 1;
  max-height: 68vh;
}

.bear-source-stage,
.bear-source-image {
  max-height: 68vh;
}

.bear-source-image {
  object-fit: contain;
}

/* El SVG ya incluye orejas circulares. Las capas adicionales producían
   el efecto de orejas dobles y deformadas. */
.bear-ear-reactor {
  display: none;
}

/* Mantiene la mirada interactiva sin alterar la silueta del SVG. */
.bear-pupil {
  width: 1.55%;
  top: 19.1%;
}

.bear-pupil--left {
  left: 34.8%;
}

.bear-pupil--right {
  left: 60.7%;
}

@media (max-width: 1199.98px) {
  .baudio-bear--source {
    width: min(27vw, 315px);
    right: 3vw;
    top: 18vh;
  }
}

@media (max-width: 991.98px) {
  .baudio-bear--source {
    width: min(38vw, 300px);
    right: -1vw;
    top: 20vh;
    opacity: .72;
  }
}

@media (max-width: 767.98px) {
  .baudio-bear--source {
    width: min(42vw, 250px);
    right: -5vw;
    top: 25vh;
    opacity: .55;
  }
}

@media (max-width: 575.98px) {
  .baudio-bear--source {
    width: 48vw;
    right: -12vw;
    top: 28vh;
    opacity: .34;
  }
}


/* =========================================================
   AJUSTE DE ENCUADRE — BRAZOS COMPLETOS
   ========================================================= */
.baudio-bear--faceted {
  overflow: visible;
}

.baudio-bear--faceted .baudio-bear__svg {
  overflow: visible;
  width: 100%;
  max-width: none;
}

/* Se mantiene el oso al 70 %, pero con más aire lateral. */
@media (min-width: 992px) {
  .baudio-bear--faceted {
    width: min(29vw, 375px);
    right: 4.5vw;
  }
}

/* Evita que el hero recorte la silueta por los costados. */
.hero {
  overflow-x: clip;
  overflow-y: visible;
}

/* Navegadores sin soporte para overflow: clip. */
@supports not (overflow: clip) {
  .hero {
    overflow-x: hidden;
  }
}


/* =========================================================
   REVISIÓN 15 — SVG COMPLETO Y LIENZO DE SKETCH
   ========================================================= */

/* El SVG se presenta completo: no se altera su viewBox y no se recorta. */
.baudio-bear--source {
  width: min(25.2vw, 330px);
  right: 5vw;
  top: 15vh;
  max-height: none;
  overflow: visible;
}

.bear-source-stage {
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
}

.bear-source-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  overflow: visible;
}

/* El archivo original ya contiene sus orejas. */
.bear-ear-reactor {
  display: none !important;
}

/* El hero no recorta la ilustración. */
.hero {
  overflow: visible;
}

/* En escritorio se reserva aire a ambos lados del oso. */
@media (min-width: 1200px) {
  .baudio-bear--source {
    width: min(24vw, 320px);
    right: 6vw;
  }
}

@media (max-width: 1199.98px) {
  .baudio-bear--source {
    width: min(27vw, 315px);
    right: 3vw;
  }
}

/* Lienzo interactivo para Dibujo / Sketch */
.sketch-drawing-system {
  inset: 0;
  background:
    radial-gradient(circle at 70% 25%, rgba(17,17,17,.04), transparent 35%),
    linear-gradient(135deg, rgba(17,17,17,.025), transparent 60%);
}

.sketch-drawing-system .sketch-svg--expanded {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  margin: 0;
  opacity: .38;
  pointer-events: none;
}

.sketch-drawing-system .sketch-line {
  stroke-width: 2.1;
  stroke-dasharray: 5 11;
}

.sketch-drawing-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.sketch-instruction {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 6;
  max-width: 62%;
  font-family: var(--font-mono);
  font-size: .54rem;
  line-height: 1.35;
  letter-spacing: .08em;
  text-align: right;
  opacity: .48;
  pointer-events: none;
}

.sketch-drawing-system.is-drawing .sketch-instruction {
  opacity: .18;
}

body[data-bs-theme="dark"] .sketch-drawing-system {
  background:
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.045), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 60%);
}

@media (max-width: 767.98px) {
  .sketch-instruction {
    display: none;
  }
}


/* =========================================================
   REVISIÓN 16 — OJOS, TRAMAS Y SKETCH
   ========================================================= */

/* Corrige la posición de los ojos añadidos sobre el SVG original. */
.bear-eye-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bear-eye {
  position: absolute;
  top: 29.5%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f3f2ee;
  transform: translate(-50%, -50%);
  transition: transform .18s ease;
}

.bear-eye--left {
  left: 44.2%;
}

.bear-eye--right {
  left: 55.8%;
}

/* Elimina cualquier posicionamiento anterior de ojos demasiado alto. */
.baudio-bear--source .bear-eye--left,
.baudio-bear--source .bear-eye--right {
  top: 29.5% !important;
}

/* P05 — Tramas vivas: retícula textil visible nuevamente. */
.fabric-system {
  background: transparent;
}

.fabric-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fabric-thread {
  fill: none;
  stroke: rgba(17, 17, 17, .54);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

body[data-bs-theme="dark"] .fabric-thread {
  stroke: rgba(255, 255, 255, .54);
}

/* P07 — Sketch sin fondo; solo líneas y lienzo. */
.visual-07,
.sketch-drawing-system {
  background: transparent !important;
}

.sketch-drawing-system::before,
.sketch-drawing-system::after {
  content: none !important;
}

.sketch-drawing-system .sketch-svg--expanded {
  opacity: .28;
}

.sketch-drawing-canvas {
  background: transparent;
}