@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');


:root {
  --bg: #080910;
  --surface: #10111c;
  --ink: #f6f4fc;
  --muted: #aaaaba;

  --purple: #b494ff;
  --accent: #8054ee;
  --purple-deep: #5d32cf;
  --purple-bright: #c4a5ff;

  --line: #ffffff20;

  --gutter: clamp(22px, 5vw, 84px);
  --max: 1536px;

  --heading: 'Space Grotesk', Arial, sans-serif;
  --body: 'Manrope', Arial, sans-serif;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}


body {
  margin: 0;

  background: var(--bg);
  color: var(--ink);

  font-family: var(--body);
  font-size: 16px;

  -webkit-font-smoothing: antialiased;
}


body:before {
  content: '';

  position: fixed;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 90% 12%,
      #5532a616,
      transparent 40%
    );

  z-index: -1;
}


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


button,
input,
select,
textarea {
  font: inherit;
}


button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}


button {
  cursor: pointer;
}


a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 5px;
}


::selection {
  background: #7954ee;
  color: #fff;
}


h1,
h2,
h3,
p {
  margin: 0;
}


h1,
h2,
h3 {
  font-family: var(--heading);
  font-weight: 500;
}


p {
  color: var(--muted);
  line-height: 1.75;
}


h2 {
  font-size: clamp(34px, 4vw, 62px);

  line-height: 1.12;

  letter-spacing: -.045em;
}


h2 > span {
  color: var(--purple);
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

.skip {
  position: fixed;

  left: 20px;
  top: -100px;

  background: #fff;
  color: #080910;

  padding: 15px;

  z-index: 99;
}


.skip:focus {
  top: 12px;
}


/* =========================================================
   TEXTOS PEQUEÑOS
========================================================= */

.eyebrow,
.micro,
.tiny {
  font-family: var(--heading);

  font-weight: 500;

  letter-spacing: .13em;

  line-height: 1.5;
}


.eyebrow {
  font-size: 13px;
}


.micro {
  font-size: 12px;

  color: var(--muted);
}


.tiny {
  font-size: 12px;

  color: var(--purple);
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
  position: sticky;

  top: 0;

  z-index: 30;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  padding:
    21px
    var(--gutter);

  background:
    #080910e8;

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid
    var(--line);
}


.brand {
  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;
}


.brand > img {
  width: 46px;

  height: 35px;

  object-fit: contain;

  mix-blend-mode: screen;
}


.brand > span {
  font-family:
    var(--heading);

  font-size:
    22px;

  font-weight:
    700;

  letter-spacing:
    -.045em;
}


.brand small {
  display: block;

  font-size:
    10px;

  letter-spacing:
    .23em;

  color:
    var(--muted);

  margin-top:
    3px;
}


.site-header nav {
  display: flex;

  align-items: center;

  gap:
    clamp(
      17px,
      2vw,
      32px
    );

  font-size:
    14px;
}


.site-header nav > a:not(.button) {
  transition:
    color .2s;
}


.site-header nav > a:hover {
  color:
    var(--purple);
}


.portal-link > span,
.demo-tag {
  border:
    1px solid
    #b494ff50;

  color:
    var(--purple);

  font-size:
    12px;

  letter-spacing:
    .06em;

  padding:
    3px
    5px;

  margin-left:
    5px;
}


/* =========================================================
   BOTONES
========================================================= */

.button {
  display:
    inline-flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    10px;

  min-height:
    48px;

  padding:
    15px
    24px;

  border:
    1px solid
    #ffffff30;

  background:
    #ffffff04;

  border-radius:
    4px;

  color:
    var(--ink);

  font-size:
    14px;

  font-weight:
    600;

  transition:
    background .2s,
    transform .2s,
    border-color .2s;

  text-align:
    center;
}


.button:hover {
  background:
    #b494ff14;

  border-color:
    var(--purple);

  transform:
    translateY(-2px);
}


.button.primary {
  background:
    var(--purple);

  color:
    #100b20;

  border-color:
    var(--purple);

  box-shadow:
    0 0 32px
    #8054ee12;
}


.button.primary:hover {
  background:
    #c9b1ff;
}


.button-small {
  padding:
    11px
    20px;

  min-height:
    42px;
}


.quiet-link {
  font-size:
    14px;

  font-weight:
    600;

  border-bottom:
    1px solid
    #ffffff55;

  padding:
    6px 0;

  display:
    inline-block;

  line-height:
    1.5;

  transition:
    color .2s;
}


.quiet-link:hover {
  color:
    var(--purple);
}


/* =========================================================
   MENÚ
========================================================= */

.menu-toggle {
  display:
    none;

  background:
    transparent;

  border:
    0;

  padding:
    12px;

  color:
    var(--ink);
}


.menu-toggle span {
  display:
    block;

  width:
    25px;

  height:
    1px;

  background:
    currentColor;

  margin:
    6px 0;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  padding:
    25px
    var(--gutter)
    0;

  max-width:
    var(--max);

  margin:
    auto;

  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;
}


.hero-top {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    25px;
}


.hero-top .eyebrow {
  color:
    #c3bad8;
}


.cross {
  font-size:
    20px;

  color:
    var(--purple);

  margin-left:
    28px;
}


.hero-layout {
  display:
    grid;

  grid-template-columns:
    1.08fr
    1fr;

  align-items:
    center;

  position:
    relative;

  min-height:
    680px;
}


.hero-copy {
  position:
    relative;

  z-index:
    2;

  padding:
    46px
    0
    66px;
}


.hero h1 {
  font-size:
    clamp(
      65px,
      7.65vw,
      118px
    );

  line-height:
    .98;

  letter-spacing:
    -.065em;

  font-weight:
    500;
}


.hero h1 > span {
  color:
    var(--purple);

  text-shadow:
    0 0 70px
    #8054ee28;
}


.hero-copy > p {
  font-size:
    17px;

  max-width:
    460px;

  margin-top:
    30px;

  line-height:
    1.7;
}


.hero-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    25px;

  margin-top:
    29px;

  flex-wrap:
    wrap;
}


.hero-visual {
  position:
    relative;

  align-self:
    stretch;

  display:
    flex;

  align-items:
    center;

  min-width:
    0;

  pointer-events:
    none;
}


.hero-art {
  width:
    128%;

  max-width:
    none;

  height:
    auto;

  margin-left:
    -12%;

  mix-blend-mode:
    screen;

  animation:
    float
    8s
    ease-in-out
    infinite;

  filter:
    drop-shadow(
      0 0 30px
      #8054ee16
    );
}


.visual-label {
  position:
    absolute;

  font-family:
    var(--heading);

  font-size:
    12px;

  letter-spacing:
    .1em;

  color:
    #c5bed8;
}


.label-top {
  right:
    0;

  top:
    42px;
}


.label-bottom {
  left:
    40px;

  bottom:
    38px;
}


.visual-corner {
  position:
    absolute;

  width:
    25px;

  height:
    25px;

  border-color:
    #b494ff65;

  border-style:
    solid;
}


.corner-tl {
  left:
    30px;

  top:
    42px;

  border-width:
    1px
    0
    0
    1px;
}


.corner-br {
  right:
    0;

  bottom:
    38px;

  border-width:
    0
    1px
    1px
    0;
}


.visual-index {
  position:
    absolute;

  right:
    0;

  top:
    46%;

  writing-mode:
    vertical-rl;

  font-family:
    var(--heading);

  font-size:
    12px;

  letter-spacing:
    .18em;

  color:
    #a99cbc;
}


.visual-index > span {
  margin-top:
    24px;
}


.hero-bottom {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid
    var(--line);

  padding:
    23px 0;

  gap:
    20px;

  position:
    relative;

  z-index:
    2;

  font-size:
    13px;

  color:
    var(--muted);
}


.hero-bottom > a {
  font-family:
    var(--heading);

  font-size:
    12px;

  letter-spacing:
    .1em;

  color:
    #d7cbed;
}


.hero:before {
  content:
    '';

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      #b494ff05
      1px,
      transparent
      1px
    ),
    linear-gradient(
      90deg,
      #b494ff05
      1px,
      transparent
      1px
    );

  background-size:
    72px
    72px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black
    );
}


.hero:after {
  content:
    '';

  position:
    absolute;

  top:
    0;

  left:
    var(--gutter);

  right:
    var(--gutter);

  height:
    1px;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent,
      #b494ff85,
      transparent
    );

  box-shadow:
    0 0 24px
    #b494ff55;
}


/* =========================================================
   FRANJA LÍQUIDA
   MOVIMIENTO CONSTANTE HACIA LA IZQUIERDA
========================================================= */

.discipline-band {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-evenly;

  gap:
    20px;

  min-height:
    132px;

  padding:
    28px
    var(--gutter);

  border-top:
    1px solid
    rgba(226, 211, 255, .46);

  border-bottom:
    1px solid
    rgba(226, 211, 255, .38);

  background:
    linear-gradient(
      110deg,
      #17082f 0%,
      #5420a8 15%,
      #9b5cff 31%,
      #5222c1 46%,
      #bb75ff 59%,
      #5420ac 73%,
      #210b45 88%,
      #17082f 100%
    );

  /*
    Fondo ancho para poder desplazarse
    de derecha a izquierda de forma continua.
  */

  background-size:
    350% 100%;

  animation:
    liquidFlowLeft
    10s
    linear
    infinite;

  font-family:
    var(--heading);

  font-size:
    clamp(
      15px,
      2.3vw,
      34px
    );

  letter-spacing:
    -.035em;

  color:
    #fff;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.20),

    inset 0 -1px 0
    rgba(255,255,255,.10),

    inset 0 20px 60px
    rgba(255,255,255,.035),

    0 0 60px
    rgba(128,84,238,.17);

  will-change:
    background-position;
}


/* =========================================================
   MASA GEL 1
   NACE A LA DERECHA Y VIAJA HACIA LA IZQUIERDA
========================================================= */

.discipline-band::before {
  content:
    '';

  position:
    absolute;

  z-index:
    0;

  pointer-events:
    none;

  width:
    62%;

  height:
    270%;

  /*
    Parte desde fuera del lado derecho.
  */

  left:
    110%;

  top:
    -85%;

  border-radius:
    42% 58% 31% 69% /
    61% 37% 63% 39%;

  background:
    radial-gradient(
      ellipse at 45% 46%,
      rgba(255,255,255,.50) 0%,
      rgba(233,209,255,.33) 12%,
      rgba(188,123,255,.36) 29%,
      rgba(120,52,225,.23) 47%,
      rgba(64,18,131,.10) 65%,
      transparent 74%
    );

  filter:
    blur(13px);

  mix-blend-mode:
    screen;

  opacity:
    .88;

  will-change:
    transform,
    border-radius;

  animation:
    liquidBlobLeftOne
    9s
    linear
    infinite;
}


/* =========================================================
   MASA GEL 2
   TAMBIÉN SE MUEVE HACIA LA IZQUIERDA
========================================================= */

.discipline-band::after {
  content:
    '';

  position:
    absolute;

  z-index:
    0;

  pointer-events:
    none;

  width:
    55%;

  height:
    250%;

  /*
    Empieza más a la derecha y con otro timing
    para que no parezca una repetición.
  */

  left:
    140%;

  top:
    -75%;

  border-radius:
    63% 37% 55% 45% /
    38% 67% 33% 62%;

  background:
    radial-gradient(
      ellipse at 56% 46%,
      rgba(255,255,255,.38) 0%,
      rgba(228,194,255,.30) 15%,
      rgba(172,100,255,.34) 32%,
      rgba(99,43,204,.25) 48%,
      rgba(50,15,110,.08) 67%,
      transparent 75%
    );

  filter:
    blur(17px);

  mix-blend-mode:
    screen;

  opacity:
    .86;

  will-change:
    transform,
    border-radius;

  animation:
    liquidBlobLeftTwo
    12s
    linear
    infinite;

  animation-delay:
    -5s;
}


/* =========================================================
   TEXTO DE LA FRANJA
========================================================= */

.discipline-band > span {
  position:
    relative;

  z-index:
    3;

  color:
    #fdfaff;

  text-shadow:
    0 2px 14px
    rgba(20, 4, 50, .75);

  transition:
    transform .35s ease,
    text-shadow .35s ease,
    color .35s ease;
}


.discipline-band > span:not(.band-plus) {
  padding:
    13px
    7px;
}


@media (hover: hover) and (pointer: fine) {

  .discipline-band > span:not(.band-plus):hover {
    transform:
      translateY(-5px)
      scale(1.07);

    color:
      #fff;

    text-shadow:
      0 0 12px
      rgba(255,255,255,.55),

      0 0 28px
      rgba(213,173,255,.60),

      0 0 50px
      rgba(128,84,238,.55);
  }

}


/* =========================================================
   SIGNOS +
========================================================= */

.band-plus {
  position:
    relative;

  z-index:
    4;

  color:
    #f0dcff;

  font-size:
    23px;

  text-shadow:
    0 0 15px
    rgba(237,210,255,.90),

    0 0 30px
    rgba(178,105,255,.70);

  animation:
    plusBreathing
    2.6s
    ease-in-out
    infinite;
}


/* =========================================================
   ANIMACIÓN DE FONDO HACIA LA IZQUIERDA
========================================================= */

@keyframes liquidFlowLeft {

  0% {
    background-position:
      100% 50%;
  }

  100% {
    background-position:
      0% 50%;
  }

}


/* =========================================================
   GEL 1 HACIA LA IZQUIERDA
========================================================= */

@keyframes liquidBlobLeftOne {

  0% {
    transform:
      translate3d(0, 0, 0)
      rotate(16deg)
      scaleX(.95)
      scaleY(1.08);

    border-radius:
      42% 58% 31% 69% /
      61% 37% 63% 39%;
  }

  20% {
    transform:
      translate3d(-55vw, -6%, 0)
      rotate(7deg)
      scaleX(1.24)
      scaleY(.74);

    border-radius:
      64% 36% 53% 47% /
      42% 65% 35% 58%;
  }

  40% {
    transform:
      translate3d(-105vw, 5%, 0)
      rotate(-4deg)
      scaleX(.91)
      scaleY(1.18);

    border-radius:
      35% 65% 63% 37% /
      68% 36% 64% 32%;
  }

  60% {
    transform:
      translate3d(-155vw, -4%, 0)
      rotate(-14deg)
      scaleX(1.18)
      scaleY(.80);

    border-radius:
      57% 43% 35% 65% /
      41% 62% 38% 59%;
  }

  80% {
    transform:
      translate3d(-205vw, 4%, 0)
      rotate(-22deg)
      scaleX(.94)
      scaleY(1.11);

    border-radius:
      39% 61% 58% 42% /
      65% 34% 66% 35%;
  }

  100% {
    transform:
      translate3d(-260vw, 0, 0)
      rotate(-30deg)
      scaleX(1.1)
      scaleY(.88);

    border-radius:
      60% 40% 37% 63% /
      39% 66% 34% 61%;
  }

}


/* =========================================================
   GEL 2 HACIA LA IZQUIERDA
========================================================= */

@keyframes liquidBlobLeftTwo {

  0% {
    transform:
      translate3d(0, -4%, 0)
      rotate(-14deg)
      scaleX(1.1)
      scaleY(.86);

    border-radius:
      63% 37% 55% 45% /
      38% 67% 33% 62%;
  }

  25% {
    transform:
      translate3d(-70vw, 5%, 0)
      rotate(-4deg)
      scaleX(.90)
      scaleY(1.18);

    border-radius:
      38% 62% 42% 58% /
      61% 33% 67% 39%;
  }

  50% {
    transform:
      translate3d(-140vw, -5%, 0)
      rotate(8deg)
      scaleX(1.20)
      scaleY(.78);

    border-radius:
      67% 33% 60% 40% /
      37% 61% 39% 63%;
  }

  75% {
    transform:
      translate3d(-205vw, 4%, 0)
      rotate(18deg)
      scaleX(.92)
      scaleY(1.13);

    border-radius:
      44% 56% 34% 66% /
      66% 37% 63% 34%;
  }

  100% {
    transform:
      translate3d(-285vw, -3%, 0)
      rotate(27deg)
      scaleX(1.16)
      scaleY(.82);

    border-radius:
      61% 39% 59% 41% /
      36% 64% 41% 59%;
  }

}


/* =========================================================
   RESPIRACIÓN DE LOS +
========================================================= */

@keyframes plusBreathing {

  0%,
  100% {
    transform:
      scale(.82)
      rotate(0deg);

    opacity:
      .62;
  }

  50% {
    transform:
      scale(1.25)
      rotate(90deg);

    opacity:
      1;
  }

}


/* =========================================================
   SECCIONES
========================================================= */

.section {
  max-width:
    var(--max);

  padding:
    105px
    var(--gutter);

  margin:
    auto;
}


.section-label {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    20px;

  margin-bottom:
    49px;

  color:
    var(--muted);
}


.section-label .eyebrow {
  color:
    var(--purple);
}


.intro-layout {
  display:
    grid;

  grid-template-columns:
    1.2fr
    1fr;

  gap:
    90px;
}


.intro-layout > div {
  max-width:
    465px;

  padding-top:
    6px;
}


.intro-layout p + p {
  margin-top:
    20px;
}


.focus-note {
  border-top:
    1px solid
    var(--line);

  padding-top:
    28px;

  margin-top:
    31px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    25px;
}


.focus-note strong {
  font-size:
    14px;

  font-weight:
    500;

  line-height:
    1.6;
}


.focus-note .tiny {
  flex-shrink:
    0;

  padding-top:
    3px;
}


.section-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    70px;

  margin-bottom:
    46px;
}


.section-heading > p {
  max-width:
    350px;

  flex:
    1;

  font-size:
    16px;
}


/* =========================================================
   SERVICIOS
========================================================= */

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


.service-cards {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    18px;
}


.service-card {
  padding:
    30px
    28px;

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid
    var(--line);

  border-radius:
    7px;

  background:
    linear-gradient(
      145deg,
      #ffffff05,
      transparent 65%
    );

  transition:
    border-color .2s;
}


.service-card:hover {
  border-color:
    #b494ff80;
}


.service-card.featured {
  border-color:
    #b494ff70;

  background:
    radial-gradient(
      ellipse at 70% 0,
      #8054ee24,
      transparent 70%
    ),
    #13111e;

  box-shadow:
    0 0 60px
    #7954ee0b;
}


.card-top {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    48px;
}


.card-top .micro {
  font-size:
    12px;
}


.card-symbol {
  font-family:
    var(--heading);

  font-size:
    28px;

  color:
    var(--purple);
}


.service-card h3 {
  font-size:
    42px;

  letter-spacing:
    -.045em;

  line-height:
    1.1;

  margin-bottom:
    23px;
}


.service-card h3 > small {
  font-size:
    18px;

  display:
    block;

  color:
    var(--purple);

  margin-top:
    8px;
}


.service-card .service-lead {
  color:
    var(--ink);

  font-family:
    var(--heading);

  font-size:
    22px;

  line-height:
    1.35;

  margin-bottom:
    16px;
}


.service-card > p:not(.service-lead) {
  font-size:
    16px;

  line-height:
    1.7;
}


.service-card ul {
  padding:
    24px
    0
    28px;

  list-style:
    none;

  margin:
    0;

  font-size:
    14px;

  color:
    #c5c2d1;

  line-height:
    1.55;
}


.service-card li {
  position:
    relative;

  padding-left:
    17px;

  margin-bottom:
    14px;
}


.service-card li:before {
  content:
    '+';

  position:
    absolute;

  left:
    0;

  color:
    var(--purple);
}


.service-card .button {
  margin-top:
    auto;

  width:
    100%;
}


.comparison {
  border-bottom:
    1px solid
    var(--line);

  margin-top:
    27px;
}


summary {
  list-style:
    none;

  cursor:
    pointer;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;
}


summary::-webkit-details-marker {
  display:
    none;
}


summary > span {
  color:
    var(--purple);

  font-size:
    25px;

  flex-shrink:
    0;
}


details[open] > summary > span {
  transform:
    rotate(45deg);
}


.comparison > summary {
  padding:
    18px
    0;

  font-size:
    14px;
}


.table-wrap {
  overflow-x:
    auto;

  padding:
    12px
    0
    27px;
}


table {
  width:
    100%;

  border-collapse:
    collapse;

  font-size:
    14px;

  min-width:
    650px;

  text-align:
    left;
}


caption {
  text-align:
    left;

  color:
    var(--muted);

  font-size:
    13px;

  margin-bottom:
    20px;
}


th,
td {
  border-bottom:
    1px solid
    var(--line);

  padding:
    17px
    10px;

  font-weight:
    400;

  line-height:
    1.5;
}


thead th {
  color:
    var(--purple);

  font-weight:
    500;
}


tbody th {
  max-width:
    230px;

  color:
    #d4d0dd;
}


tbody td {
  color:
    var(--muted);
}


/* =========================================================
   MÉTODO
========================================================= */

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


.method-system {
  display:
    grid;

  grid-template-columns:
    1fr
    1.65fr;

  border:
    1px solid
    #b494ff35;

  border-radius:
    8px;

  overflow:
    hidden;

  background:
    #0d0d16;
}


.method-tabs {
  border-right:
    1px solid
    var(--line);

  background:
    linear-gradient(
      180deg,
      #11101b,
      #090a10
    );
}


.method-tabs button {
  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  gap:
    27px;

  background:
    transparent;

  width:
    100%;

  border:
    0;

  border-bottom:
    1px solid
    var(--line);

  padding:
    26px
    28px;

  color:
    var(--muted);

  text-align:
    left;

  font-family:
    var(--heading);

  font-size:
    23px;

  transition:
    color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}


.method-tabs button:last-child {
  border-bottom:
    0;
}


.method-tabs button > span {
  position:
    relative;

  z-index:
    2;

  font-size:
    12px;

  color:
    var(--purple);
}


.method-tabs button:hover {
  color:
    #e6dcff;

  background:
    linear-gradient(
      90deg,
      rgba(128, 84, 238, .08),
      transparent 75%
    );
}


.method-tabs button[aria-selected="true"] {
  color:
    #fff;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(196, 165, 255, .24),
      transparent 34%
    ),
    linear-gradient(
      105deg,
      rgba(128, 84, 238, .42),
      rgba(87, 49, 173, .27) 45%,
      rgba(34, 22, 65, .14)
    );

  box-shadow:
    inset 4px 0
    var(--purple-bright),

    inset 0 0 42px
    rgba(128,84,238,.12);
}


.method-tabs button[aria-selected="true"]::before {
  content:
    '';

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      115deg,
      transparent 10%,
      rgba(255,255,255,.025) 35%,
      rgba(196,165,255,.12) 49%,
      rgba(255,255,255,.025) 62%,
      transparent 90%
    );

  animation:
    activeMethodGlow
    5.5s
    ease-in-out
    infinite;
}


.method-panel {
  position:
    relative;

  padding:
    42px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(180,148,255,.12),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #151125,
      #0d0d17 55%,
      #090a10
    );
}


.method-number {
  position:
    absolute;

  right:
    23px;

  top:
    4px;

  font-family:
    var(--heading);

  font-size:
    155px;

  line-height:
    1;

  color:
    #b494ff10;

  letter-spacing:
    -.08em;

  pointer-events:
    none;
}


.method-panel .eyebrow {
  color:
    #bea2ff;

  position:
    relative;
}


.method-panel h3 {
  font-size:
    32px;

  line-height:
    1.2;

  letter-spacing:
    -.035em;

  margin-top:
    24px;

  position:
    relative;
}


.method-panel > p {
  margin-top:
    17px;

  max-width:
    490px;

  position:
    relative;
}


.method-output {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  border-top:
    1px solid
    #b494ff25;

  padding-top:
    23px;

  margin-top:
    32px;
}


.method-output strong {
  font-size:
    14px;

  font-weight:
    500;
}


@keyframes activeMethodGlow {

  0%,
  100% {
    transform:
      translateX(-45%);

    opacity:
      .35;
  }

  50% {
    transform:
      translateX(35%);

    opacity:
      .85;
  }

}


/* =========================================================
   PROYECTOS
========================================================= */

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


.project-card {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  border:
    1px solid
    var(--line);

  border-radius:
    7px;

  overflow:
    hidden;
}


.project-brand {
  min-height:
    430px;

  padding:
    30px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  align-items:
    center;

  background:
    radial-gradient(
      ellipse at 50% 45%,
      #56368b33,
      transparent 65%
    ),
    #0d0d18;

  position:
    relative;
}


.project-brand > .micro {
  align-self:
    flex-start;
}


.project-brand img {
  max-width:
    260px;

  width:
    65%;

  height:
    auto;

  mix-blend-mode:
    screen;

  margin:
    25px 0;
}


.project-word {
  font-family:
    var(--heading);

  font-size:
    14px;

  letter-spacing:
    .23em;

  color:
    #a7a0b6;
}


.project-copy {
  padding:
    45px;

  background:
    #12111a;

  border-left:
    1px solid
    var(--line);
}


.tags {
  display:
    flex;

  gap:
    8px;

  flex-wrap:
    wrap;
}


.tags span {
  font-size:
    12px;

  letter-spacing:
    .04em;

  padding:
    6px
    8px;

  border:
    1px solid
    #ffffff25;

  color:
    var(--muted);
}


.project-copy h3 {
  font-size:
    34px;

  line-height:
    1.2;

  letter-spacing:
    -.04em;

  margin:
    25px
    0
    18px;
}


.project-copy p {
  font-size:
    16px;
}


.project-copy details {
  margin:
    20px
    0;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);
}


.project-copy summary {
  font-size:
    14px;

  padding:
    15px
    0;
}


.project-copy ul {
  font-size:
    14px;

  color:
    var(--muted);

  line-height:
    1.65;

  padding:
    0 0 5px 18px;
}


.project-copy li {
  margin:
    10px
    0;
}


/* =========================================================
   PORTAL
========================================================= */

.portal-section {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    80px;

  align-items:
    center;

  border-top:
    1px solid
    var(--line);
}


.portal-intro h2 {
  margin:
    25px
    0;
}


.portal-intro p {
  max-width:
    440px;
}


.portal-intro .button {
  margin-top:
    27px;
}


.portal-intro .demo-note {
  font-size:
    13px;

  margin-top:
    13px;

  color:
    #b4a7ca;
}


.portal-preview {
  border:
    1px solid
    #b494ff50;

  border-radius:
    10px;

  background:
    linear-gradient(
      135deg,
      #8054ee18,
      #101018 60%
    );

  box-shadow:
    0 0 90px
    #8054ee0d;

  overflow:
    hidden;
}


.preview-header {
  padding:
    21px
    25px;

  border-bottom:
    1px solid
    var(--line);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.preview-title {
  padding:
    27px
    28px
    19px;
}


.preview-title h3 {
  font-size:
    28px;

  margin-top:
    8px;
}


.preview-row {
  display:
    flex;

  align-items:
    center;

  gap:
    17px;

  margin:
    0
    25px;

  padding:
    21px
    0;

  border-bottom:
    1px solid
    var(--line);
}


.preview-row:last-child {
  border-bottom:
    0;

  margin-bottom:
    10px;
}


.preview-icon {
  border:
    1px solid
    #b494ff40;

  border-radius:
    6px;

  padding:
    11px
    9px;

  font-family:
    var(--heading);

  font-size:
    12px;

  color:
    var(--purple);
}


.preview-row > div {
  flex:
    1;
}


.preview-row strong {
  display:
    block;

  font-size:
    15px;

  font-weight:
    500;
}


.preview-row div > span {
  font-size:
    13px;

  color:
    var(--muted);

  display:
    block;

  margin-top:
    5px;
}


.pill {
  background:
    #b494ff12;

  color:
    var(--purple);

  padding:
    5px
    9px;

  border:
    1px solid
    #b494ff25;

  border-radius:
    20px;

  font-size:
    12px;

  white-space:
    nowrap;
}


/* =========================================================
   FAQ
========================================================= */

.faq {
  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    80px;

  border-top:
    1px solid
    var(--line);
}


.faq h2 {
  margin-top:
    25px;
}


.faq-list details {
  border-bottom:
    1px solid
    var(--line);
}


.faq-list summary {
  padding:
    23px
    0;

  font-size:
    16px;

  line-height:
    1.5;
}


.faq-list p {
  font-size:
    16px;

  padding-bottom:
    24px;
}


/* =========================================================
   CONTACTO
========================================================= */

.contact {
  border-top:
    1px solid
    var(--line);

  background:
    radial-gradient(
      ellipse at 0 100%,
      #8054ee14,
      transparent 60%
    );
}


.contact-layout {
  display:
    grid;

  grid-template-columns:
    1.2fr
    1fr;

  gap:
    80px;
}


.contact-layout h2 {
  font-size:
    clamp(
      35px,
      4.3vw,
      68px
    );
}


.contact-layout > div > p {
  margin-top:
    25px;

  max-width:
    450px;
}


.contact-meta {
  display:
    flex;

  flex-direction:
    column;

  gap:
    23px;

  margin-top:
    38px;
}


.contact-meta a {
  font-family:
    var(--heading);

  font-size:
    22px;

  color:
    #d7c4ff;

  letter-spacing:
    -.025em;

  overflow-wrap:
    anywhere;
}


.contact-meta > span {
  font-size:
    14px;

  color:
    var(--muted);

  line-height:
    1.7;
}


.contact-form {
  display:
    flex;

  flex-direction:
    column;
}


.contact-form label {
  font-size:
    14px;

  margin-bottom:
    10px;

  line-height:
    1.4;
}


.contact-form label > span {
  color:
    var(--muted);
}


input,
select,
textarea {
  width:
    100%;

  border:
    1px solid
    #ffffff25;

  color:
    var(--ink);

  background:
    #13121d;

  border-radius:
    4px;

  padding:
    14px;

  font-size:
    16px;

  margin-bottom:
    24px;

  line-height:
    1.5;

  min-width:
    0;
}


input::placeholder,
textarea::placeholder {
  color:
    #96919f;
}


textarea {
  resize:
    vertical;
}


select {
  color:
    var(--ink);
}


.contact-form .button {
  width:
    100%;
}


.form-note {
  font-size:
    13px;

  line-height:
    1.6;

  margin-top:
    12px;

  text-align:
    center;
}


.form-status {
  font-size:
    14px;

  margin-top:
    10px;

  color:
    var(--purple);

  overflow-wrap:
    anywhere;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  display:
    flex;

  align-items:
    center;

  gap:
    38px;

  flex-wrap:
    wrap;

  justify-content:
    space-between;

  border-top:
    1px solid
    var(--line);

  padding:
    36px
    var(--gutter);

  font-size:
    14px;

  color:
    var(--muted);
}


.site-footer .brand {
  color:
    var(--ink);
}


/* =========================================================
   HERO FLOAT
========================================================= */

@keyframes float {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-16px);
  }

}


/* =========================================================
   DESKTOP GRANDE
========================================================= */

@media (min-width: 1700px) {

  .site-header,
  .site-footer {
    padding-left:
      max(
        var(--gutter),
        calc((100vw - 1368px) / 2)
      );

    padding-right:
      max(
        var(--gutter),
        calc((100vw - 1368px) / 2)
      );
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {

  .site-header nav {
    gap:
      17px;
  }


  .site-header .brand > span {
    font-size:
      20px;
  }


  .hero-layout {
    min-height:
      610px;
  }


  .hero-actions {
    gap:
      18px;
  }


  .hero-art {
    width:
      123%;

    margin-left:
      -12%;
  }


  .intro-layout,
  .portal-section,
  .faq,
  .contact-layout {
    gap:
      50px;
  }


  .section-heading {
    gap:
      45px;
  }


  .service-card {
    padding:
      27px
      21px;
  }


  .service-card h3 {
    font-size:
      35px;
  }


  .project-copy {
    padding:
      33px;
  }

}


/* =========================================================
   1000px
========================================================= */

@media (max-width: 1000px) {

  .site-header {
    padding-top:
      17px;

    padding-bottom:
      17px;
  }


  .menu-toggle {
    display:
      block;
  }


  .site-header nav {
    display:
      none;

    position:
      absolute;

    left:
      0;

    right:
      0;

    top:
      100%;

    background:
      #101018;

    flex-direction:
      column;

    align-items:
      stretch;

    padding:
      18px
      var(--gutter);

    border-bottom:
      1px solid
      var(--line);

    gap:
      0;
  }


  .site-header nav.is-open {
    display:
      flex;
  }


  .site-header nav > a {
    padding:
      15px
      0;

    font-size:
      16px;
  }


  .site-header nav > .button {
    margin:
      12px
      0;

    padding:
      14px;
  }


  .hero-layout {
    grid-template-columns:
      1.15fr
      1fr;

    min-height:
      560px;
  }


  .hero h1 {
    font-size:
      clamp(
        62px,
        8.1vw,
        78px
      );
  }


  .section {
    padding-top:
      80px;

    padding-bottom:
      80px;
  }


  .method-panel {
    padding:
      32px;
  }


  .method-tabs button {
    padding:
      25px
      22px;

    font-size:
      21px;
  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 640px) {

  html {
    scroll-padding-top:
      92px;
  }


  .hero {
    padding-top:
      19px;
  }


  .hero-top .micro {
    display:
      none;
  }


  .hero-layout {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    min-height:
      0;
  }


  .hero-copy {
    padding:
      42px
      0
      0;
  }


  .hero h1 {
    font-size:
      clamp(
        59px,
        13.8vw,
        85px
      );

    line-height:
      1.02;
  }


  .hero-visual {
    height:
      355px;

    margin:
      13px
      0
      0;
  }


  .hero-art {
    width:
      400px;

    max-width:
      115%;

    margin:
      auto;
  }


  /* FRANJA GEL MÓVIL */

  .discipline-band {
    min-height:
      125px;

    padding:
      23px
      var(--gutter);

    justify-content:
      space-between;

    gap:
      9px;

    flex-wrap:
      wrap;

    font-size:
      15px;

    background-size:
      420% 100%;

    animation-duration:
      12s;
  }


  .discipline-band::before {
    width:
      110%;

    left:
      120%;

    animation-duration:
      10s;
  }


  .discipline-band::after {
    width:
      100%;

    left:
      150%;

    animation-duration:
      13s;
  }


  .band-plus {
    font-size:
      16px;
  }


  .discipline-band .band-plus:nth-child(6) {
    display:
      none;
  }


  .section {
    padding-top:
      64px;

    padding-bottom:
      64px;
  }


  .section-label {
    margin-bottom:
      30px;
  }


  .section-label .micro {
    display:
      none;
  }


  .intro-layout,
  .portal-section,
  .faq,
  .contact-layout {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .section-heading {
    display:
      block;

    margin-bottom:
      32px;
  }


  .service-cards {
    grid-template-columns:
      1fr;

    gap:
      17px;
  }


  .method-system {
    grid-template-columns:
      1fr;
  }


  .method-tabs {
    display:
      flex;

    border-right:
      0;

    border-bottom:
      1px solid
      var(--line);

    overflow-x:
      auto;
  }


  .method-tabs button {
    flex-shrink:
      0;

    width:
      auto;

    gap:
      9px;

    font-size:
      16px;

    padding:
      20px
      16px;

    border:
      0;
  }


  .method-tabs button[aria-selected="true"] {
    box-shadow:
      inset 0 -3px
      var(--purple-bright),

      inset 0 0 30px
      rgba(128,84,238,.14);
  }


  .method-panel {
    padding:
      29px
      24px;

    min-height:
      350px;
  }


  .method-panel h3 {
    font-size:
      28px;

    max-width:
      300px;
  }


  .method-number {
    font-size:
      130px;
  }


  .project-card {
    grid-template-columns:
      1fr;
  }


  .project-brand {
    min-height:
      315px;

    padding:
      25px;
  }


  .project-brand img {
    max-width:
      190px;

    margin:
      24px;
  }


  .project-copy {
    border-left:
      0;

    border-top:
      1px solid
      var(--line);

    padding:
      29px
      25px;
  }


  .portal-intro h2,
  .faq h2,
  .contact-layout h2 {
    font-size:
      40px;
  }


  .site-footer .brand {
    flex-basis:
      100%;
  }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  .hero-art {
    animation:
      none;
  }


  .discipline-band {
    animation-duration:
      30s;
  }


  .discipline-band::before {
    animation-duration:
      26s;
  }


  .discipline-band::after {
    animation-duration:
      32s;
  }


  .band-plus {
    animation:
      none;
  }

}


/* =========================================================
   CELULARES MUY PEQUEÑOS
========================================================= */

@media (max-width: 350px) {

  .hero h1 {
    font-size:
      54px;
  }


  .discipline-band {
    font-size:
      13px;
  }


  .section-heading h2,
  .intro-layout h2,
  .portal-intro h2,
  .faq h2,
  .contact-layout h2 {
    font-size:
      34px;
  }

}
/* =========================================================
   CORRECCIÓN FRANJA GEL EN MÓVIL
   Mantiene todo en una sola línea
========================================================= */

@media (max-width: 640px) {

  .discipline-band {
    min-height: 92px;
    padding: 18px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-wrap: nowrap;
    gap: 6px;

    font-size: 12px;

    overflow: hidden;

    background-size: 420% 100%;
    animation-duration: 12s;
  }

  .discipline-band > span {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .discipline-band > span:not(.band-plus) {
    padding: 8px 2px;
  }

  .band-plus {
    display: inline-block !important;
    flex-shrink: 0;
    font-size: 14px;
  }

  .discipline-band .band-plus:nth-child(6) {
    display: inline-block !important;
  }
}


/* =========================================================
   CELULARES MUY PEQUEÑOS
========================================================= */

@media (max-width: 350px) {

  .discipline-band {
    min-height: 84px;
    padding: 15px 10px;
    gap: 4px;
    font-size: 11px;
  }

  .discipline-band > span:not(.band-plus) {
    padding: 6px 1px;
  }

  .band-plus {
    font-size: 12px;
  }
}
/* =========================================================
   AJUSTE IMAGEN HERO EN MÓVIL
   Más pequeña y perfectamente centrada
========================================================= */

@media (max-width: 640px) {

  .hero-visual {
    height: 300px;
    margin-top: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
  }

  .hero-art {
    width: 290px;
    max-width: 82vw;

    height: auto;

    margin: 0 auto;

    display: block;

    transform: none;
  }

  .label-top {
    right: 12px;
  }

  .label-bottom {
    left: 12px;
  }

  .corner-tl {
    left: 12px;
  }

  .corner-br {
    right: 12px;
  }

  .visual-index {
    right: 8px;
  }
}


/* =========================================================
   CELULARES MUY PEQUEÑOS
========================================================= */

@media (max-width: 350px) {

  .hero-visual {
    height: 270px;
  }

  .hero-art {
    width: 255px;
    max-width: 78vw;
  }
}