/* Decorative layers sit behind the content and never intercept input. */
:is(#servicios, #proyectos, #proceso, #estudio, #contacto) {
  position: relative;
  isolation: isolate;
}
.section-atmosphere {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.studio-section {
  --studio-muted: #c3d2e2;
  --studio-accent: #a3d9ff;
  background: #0b0d10;
  color: #f5f8ff;
}
.studio-starlight {
  inset: 0;
  background: radial-gradient(ellipse at 13% 27%, #163d638f, transparent 58%),
    radial-gradient(ellipse at 94% 71%, #132d4b9c, transparent 57%), #0b131f;
}
.studio-starlight::before, .studio-starlight::after {
  content: "";
  position: absolute;
  inset: 0;
  mask-image: linear-gradient(transparent, #000 12% 86%, transparent);
}
.studio-starlight::before {
  background-image: radial-gradient(circle at 9% 14%, #d3e8ff9e 1px, transparent 1.7px),
    radial-gradient(circle at 76% 11%, #aacfff80 1px, transparent 1.6px),
    radial-gradient(circle at 38% 28%, #d9edff8c .8px, transparent 1.5px),
    radial-gradient(circle at 59% 39%, #88bceb80 1px, transparent 1.6px),
    radial-gradient(circle at 22% 52%, #fff8 .8px, transparent 1.5px),
    radial-gradient(circle at 91% 61%, #d5eaff9c 1px, transparent 1.8px),
    radial-gradient(circle at 45% 74%, #a0caff80 .7px, transparent 1.6px),
    radial-gradient(circle at 14% 86%, #c3d9f78a 1px, transparent 1.7px),
    radial-gradient(circle at 70% 90%, #fff9 1px, transparent 1.7px);
  background-size: 343px 287px;
}
.studio-starlight::after {
  background-image: radial-gradient(circle at 29% 22%, #e3f2ffde .9px, #78b8ff36 2px, transparent 5px),
    radial-gradient(circle at 81% 38%, #d8eaffc7 1px, #82c2ff30 2.1px, transparent 5px),
    radial-gradient(circle at 58% 77%, #e3f2ffd4 .9px, #78b8ff36 2px, transparent 4px),
    radial-gradient(circle at 10% 87%, #b6d6ffbb 1px, #78b8ff2b 2px, transparent 4px);
  background-size: 467px 401px;
}
.studio-starlight > canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
html[data-motion="on"] .studio-starlight[data-starfield-active] > canvas { opacity: 1; }
html[data-motion="on"] .studio-starlight[data-starfield-active]::before,
html[data-motion="on"] .studio-starlight[data-starfield-active]::after {
  opacity: .26;
}
.studio-section .section-meta {
  color: var(--studio-muted);
  border-color: #adc9e83d;
}
.studio-section :is(.blue-text, .section-meta b) { color: var(--studio-accent); }
.studio-layout { grid-template-areas: "portrait copy"; align-items: center; }
.studio-copy { grid-area: copy; }
.studio-copy > p, .studio-copy .company-note,
.founder-portrait figcaption > :is(span, small) { color: var(--studio-muted); }
.studio-copy > .text-link {
  margin-top: 18px;
  color: #f5f8ff;
  border-color: #adc9e870;
  white-space: normal;
}
.studio-copy > .text-link:hover { color: var(--studio-accent); }
.founder-portrait { grid-area: portrait; width: 100%; max-width: 460px; }
.portrait-frame {
  border: 1px solid #adc9e845;
  border-radius: 18px;
  background: #223349;
  box-shadow: 0 16px 48px #070e1b66;
}
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 13% 87%, transparent);
}
.hero-aurora::before, .hero-aurora::after, .contact-aurora::before {
  content: "";
  position: absolute;
  inset: -35% -9%;
  animation: aurora-sweep 23s ease-in-out infinite alternate paused;
}
.hero-aurora::before {
  background: radial-gradient(ellipse at 24% 70%, #63bce750, transparent 41%),
    radial-gradient(ellipse at 65% 33%, #005cb92b, transparent 46%);
}
.hero-aurora::after {
  background: radial-gradient(ellipse at 76% 68%, #64cee243, transparent 42%),
    radial-gradient(ellipse at 40% 26%, #007cba14, transparent 40%);
  animation-delay: -9s;
  animation-duration: 29s;
  animation-direction: alternate-reverse;
}
html[data-motion="on"] .hero-logo-scene.is-motion-visible .hero-aurora::before,
html[data-motion="on"] .hero-logo-scene.is-motion-visible .hero-aurora::after,
html[data-motion="on"] .contact-atmosphere.is-motion-visible .contact-aurora::before {
  animation-play-state: running;
}
@keyframes aurora-sweep {
  from { transform: translate3d(-6%, -5%, 0) rotate(-6deg) scale(.96); }
  to { transform: translate3d(8%, 7%, 0) rotate(7deg) scale(1.12); }
}

.network-atmosphere {
  height: min(88vh, 690px);
  background: radial-gradient(ellipse at 83% 35%, #e5f4ffb3, transparent 58%);
  mask-image: linear-gradient(#000 68%, transparent);
}
.network-atmosphere > canvas { display: block; width: 100%; height: 100%; }

.fluid-atmosphere {
  height: clamp(350px, 59vw, 660px);
  background: radial-gradient(ellipse at 86% 25%, #005cb92c, transparent 62%);
  mask-image: linear-gradient(#000 68%, transparent);
}
.fluid-position {
  position: absolute;
  top: -7%;
  right: -2%;
  width: min(88%, 920px);
  opacity: .78;
  transform: translate3d(var(--ink-x, 0px), var(--ink-y, 0px), 0);
  transition: transform .6s var(--ease);
}
.fluid-field { display: block; width: 100%; height: auto; }
.fluid-bands {
  transform-origin: center;
  animation: fluid-drift 20s ease-in-out infinite alternate paused;
}
html[data-motion="on"] .fluid-atmosphere.is-motion-visible .fluid-bands { animation-play-state: running; }
@keyframes fluid-drift {
  from { transform: translateY(-8px) rotate(-3deg); }
  to { transform: translateY(14px) rotate(4deg); }
}

.grid-atmosphere {
  height: clamp(410px, 76vh, 690px);
  background: radial-gradient(ellipse at 58% 46%, #bceeff38, transparent 64%);
  mask-image: linear-gradient(#000 75%, transparent);
}
.perspective-grid {
  position: absolute;
  inset: 0;
  perspective: 470px;
  perspective-origin: 50% 37%;
  mask-image: linear-gradient(transparent 23%, #000 55%, transparent 100%);
}
.grid-plane {
  position: absolute;
  inset: 33% -76% -100%;
  transform-origin: center top;
  transform: rotateX(62deg);
}
.grid-plane::before {
  content: "";
  position: absolute;
  inset: -44px 0 0;
  background-image: linear-gradient(#b8ebff69 1px, transparent 1px),
    linear-gradient(90deg, #b8ebff66 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .62;
  animation: grid-forward 7s linear infinite paused;
}
html[data-motion="on"] .grid-atmosphere.is-motion-visible .grid-plane::before { animation-play-state: running; }
@keyframes grid-forward { to { transform: translateY(44px); } }

.contact-atmosphere {
  height: min(100%, 900px);
  mask-image: linear-gradient(#000 72%, transparent);
}
.contact-aurora { position: absolute; inset: 0; }
.contact-aurora::before {
  background: radial-gradient(ellipse at 74% 53%, #005cb955, transparent 43%),
    radial-gradient(ellipse at 94% 34%, #007cba33, transparent 33%);
}

/* All slices reuse the selected source of the existing responsive image. */
.clip-surface { position: relative; }
.clip-stack {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.clip-slice {
  position: absolute;
  inset: 0;
  background: var(--clip-image) var(--clip-position, center) / var(--clip-fit, cover) no-repeat;
  clip-path: var(--clip-closed);
  transform: translate3d(var(--clip-x), var(--clip-y), 0);
  transition: clip-path .48s var(--ease), transform .55s var(--ease);
  transition-delay: var(--clip-out);
}
.clip-source { transition: filter .28s ease, opacity .28s ease; }
html[data-motion="on"] [data-clip-active] .clip-slice {
  clip-path: var(--clip-open);
  transform: translate3d(0, 0, 0);
  transition-delay: var(--clip-in);
}
html[data-motion="on"] [data-clip-active] .clip-source { filter: brightness(.69) saturate(.88); }
html[data-motion="on"] .hero-wordmark[data-clip-active] .clip-source { filter: none; opacity: .42; }
html:not([data-motion="on"]) .clip-stack { display: none; }
.service-link {
  position: relative;
  isolation: isolate;
  background: linear-gradient(145deg, #ffffffdf, #eaf4ffd4);
  transition: transform .3s var(--ease), background .2s, border-color .2s, box-shadow .25s;
}
.service-link:hover {
  background: linear-gradient(145deg, #ffffffef, #e2f2ffe0);
}
html[data-motion="on"] .service-link[data-tilted]:not(:active) {
  transform: perspective(820px) translateY(-2px) rotateX(var(--glass-rx, 0deg)) rotateY(var(--glass-ry, 0deg));
}
.service-link[data-tilted]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--glass-x, 50%) var(--glass-y, 50%), #c1e8ffb0, transparent 53%);
  pointer-events: none;
}
.faq-list {
  display: grid;
  gap: 10px;
}
.faq-list details, .faq-list details:last-child, .contact-form {
  min-width: 0;
  border: 1px solid #8ebce037;
  border-radius: 15px;
  background: linear-gradient(142deg, #d9edff17, #24476c22);
  box-shadow: inset 0 1px #ffffff09;
}
.faq-list details[open] { border-color: #9ed5fc70; }
.faq-list summary { padding-inline: clamp(12px, 2.5vw, 25px); }
.faq-list summary:focus-visible { outline-offset: -4px; border-radius: 13px; }
.faq-answer { padding-inline: clamp(9px, 1.5vw, 19px); }
.contact-form { padding: clamp(15px, 3vw, 30px); }
@media (min-width: 701px) {
  :is(.service-link, .faq-list details, .contact-form) {
    backdrop-filter: blur(9px);
  }
}
@media (max-width: 900px) {
  .studio-layout { grid-template-areas: "copy" "portrait"; }
}
@media (max-width: 700px) {
  .fluid-position { width: 130%; right: -23%; top: 0; }
  .grid-plane { inset-inline: -120%; }
  .hero-aurora::before, .hero-aurora::after { opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
  .clip-stack { display: none; }
  :is(.hero-aurora, .contact-aurora, .grid-plane)::before,
  .hero-aurora::after, .fluid-bands { animation: none !important; }
  .studio-starlight > canvas { visibility: hidden; }
}