/* ============================================================
   HOME — secciones del one-page
   ============================================================ */

/* ============================================================
   HERO  (sticky = se queda fijo; la sección siguiente sube encima)
   ============================================================ */
.hero {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate; /* contiene el stacking del gradiente */
}

/* --- Mesh gradient: capa a todo el hero, detrás del contenido ---
   Manchas de color REALES (saturadas) que cubren todo el hero, incluido el
   borde inferior (sin gap). Cada .blob sigue el cursor con lerp (ver gradient.js).
   Están ancladas con offsets negativos para que el movimiento no asome bordes. */
.hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Base estática que GARANTIZA color en todo el borde inferior (sin gap),
     debajo de las manchas que se mueven. */
  background: radial-gradient(85% 45% at 50% 104%, rgba(150, 87, 254, 0.92) 0%, rgba(150, 87, 254, 0) 60%);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  will-change: transform;
}
/* rosa-púrpura intenso detrás de la foto (arriba-derecha) */
.blob--pink {
  width: 58vw; height: 58vw;
  right: -12vw; top: -10vw;
  background: var(--c-pink-purple);
  opacity: 0.92;
}
/* púrpura fuerte anclado abajo a la izquierda (núcleo bajo, para no invadir
   la zona del título y mantener legible "sistemas claros") */
.blob--purple {
  width: 52vw; height: 52vw;
  left: -18vw; bottom: -30vw;
  background: var(--c-purple);
  opacity: 0.95;
}
/* púrpura que cubre la franja inferior central (mata el gap blanco) */
.blob--purple-2 {
  width: 56vw; height: 56vw;
  left: 24vw; bottom: -24vw;
  background: var(--c-purple);
  filter: blur(95px);
  opacity: 0.85;
}
/* lavanda inferior derecha: une el rosa y el púrpura y cubre el borde */
.blob--lavender {
  width: 48vw; height: 48vw;
  right: 0vw; bottom: -14vw;
  background: var(--c-lavender);
  opacity: 0.9;
}
/* Veladura blanca detrás del bloque del título (izquierda, de arriba hacia
   la mitad) para que el texto y el resaltado se lean sobre el color. */
.hero__gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(62% 82% at -4% 27%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.85) 42%, rgba(255, 255, 255, 0) 72%);
}

/* --- Contenido (encima del gradiente) -------------------- */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* el padding-top deja aire entre el nav (header) y la foto/contenido */
  padding: clamp(7rem, 13vh, 10rem) var(--gutter) 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: minmax(0, 1fr); /* la fila llena la altura disponible */
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 4rem);
}

/* El título usa todo el ancho de su columna (antes 34ch lo ahogaba y cortaba
   la línea larga). El subtítulo se limita con su propio max-width.
   align-self:center mantiene el texto centrado vertical aunque la celda estire. */
.hero__content { max-width: none; align-self: center; }

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  /* tamaño propio del hero, ajustado para que "en sistemas claros" quepa en una línea */
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
/* Cada línea es una máscara para el reveal; el padding evita cortar
   descendentes (la "j" de complejidad, la "p", etc.) */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.08em;
}
.hero__title .word { display: inline-block; will-change: transform; }
.hero__title .hl {
  background: linear-gradient(100deg, #7b2ff2 0%, #5a1fb0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero__subtitle {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 44ch;
  text-wrap: pretty; /* evita la palabra huérfana al final */
  will-change: transform, opacity;
}

/* --- Columna de la foto ---------------------------------- */
.hero__visual {
  position: relative;
  justify-self: end;
  width: 100%;
  /* sin alto fijo: la celda estira (align-items:stretch) y la foto llega
     desde el espacio bajo el nav hasta el borde inferior del hero */
  align-self: stretch;
}
.hero__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center; /* la figura se apoya en el borde inferior */
  will-change: transform, opacity;
}

/* ============================================================
   MI ENFOQUE — sube por encima del hero (efecto cortina)
   ============================================================ */
.enfoque {
  position: relative;
  z-index: 2; /* cubre el hero (sticky, z-index 1) al subir */
  background: var(--c-white);
}

/* --- Intro grande (stage): borde redondeado = canto de la cortina --- */
.enfoque__stage {
  position: relative;
  height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--gutter);
  background: linear-gradient(168deg, var(--c-lavender) 0%, var(--c-ghost) 52%, var(--c-white) 100%);
  overflow: hidden;
}
.enfoque__stage-content {
  max-width: 44rem; /* ancho suficiente para "Mi enfoque" en una sola línea */
  will-change: transform, opacity;
}
.enfoque__stage-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  white-space: nowrap; /* "Mi enfoque" siempre en una línea */
  margin: 0.6rem 0 1.5rem;
}
.enfoque__stage-lead {
  font-size: var(--fs-h5);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 30rem; /* el lead cae en ~2 líneas, más angosto que el título */
  margin-inline: auto;
}

.enfoque__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(5rem, 12vh, 9rem) var(--gutter) clamp(6rem, 14vh, 10rem);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}

/* --- Columna izquierda (fija mientras scrollea la lista) --- */
.enfoque__intro {
  position: sticky;
  top: clamp(5rem, 16vh, 9rem);
}
.enfoque__label {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-nav);
  letter-spacing: 0.12em;
  color: var(--c-purple-dark);
  margin-bottom: 1.25rem;
}
.enfoque__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.enfoque__lead {
  font-size: var(--fs-h6);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 34ch;
}

/* --- Columna derecha: lista de principios --- */
.enfoque__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.principle {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.principle:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.principle__title {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: 1.15;
  margin-bottom: 0.65rem;
}
.principle__lead {
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--c-purple-dark);
  margin-bottom: 0.9rem;
}
.principle__body {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 52ch;
}

/* ============================================================
   MI PROCESO — sección oscura e inmersiva (partículas + journey)
   ============================================================ */
.proceso {
  position: relative;
  z-index: 2;
  color: var(--c-white);
  background: #160a30; /* fallback bajo el fondo fijo */
}

/* Fondo degradado FIJO a la pantalla (igual en todas las vistas).
   El margin-bottom negativo evita que ocupe espacio en el flujo. */
.proceso__bg {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100svh;
  margin-bottom: -100svh;
  /* iguala 03-Mi proceso Fondo oscuro.png: violeta vivo arriba-izq → oscuro abajo-centro */
  background:
    radial-gradient(95% 90% at 14% 20%, #8a3ef2 0%, rgba(138, 62, 242, 0) 55%),
    radial-gradient(85% 85% at 60% 112%, #100522 0%, rgba(16, 5, 34, 0) 62%),
    linear-gradient(125deg, #7a34e0 0%, #3a1a7a 44%, #160a30 100%);
}

/* Canvas de puntos: también fijo a la pantalla, sobre el fondo y bajo el texto.
   Arranca invisible; aparece tras el intro (ver proceso.js). */
.proceso__particles {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100svh;
  margin-bottom: -100svh;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}

/* --- Intro: stage pinneado (transparente: muestra el fondo fijo) --- */
.proceso__stage {
  position: relative;
  z-index: 2;
  height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--gutter);
}
.proceso__stage-content {
  max-width: 44rem;
  will-change: transform, opacity;
}
.proceso__stage-title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0.6rem 0 1.25rem;
}
.proceso__stage-lead {
  font-size: var(--fs-h5);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  max-width: 34ch;
  margin-inline: auto;
}

.proceso__inner {
  position: relative;
  z-index: 2; /* contenido sobre el fondo fijo y los puntos */
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Cada beat ocupa una pantalla completa, con el contenido centrado vertical */
.proceso__panel {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(4rem, 9vh, 7rem);
}

/* Leyenda de la red, al fondo y en letra pequeña */
.proceso__vars-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2.5rem, 7vh, 5rem);
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--fw-light);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
}
.proceso__panel--center {
  justify-items: center;
  text-align: center;
}
/* Vista del statement: las dos líneas ("…complejidad" y "en claridad")
   apiladas y centradas como una sola frase, con aire entre ellas. */
.proceso__panel--statement {
  row-gap: clamp(2rem, 6vh, 4rem);
}

/* Label "02" del stage */
.proceso__label {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-nav);
  letter-spacing: 0.12em;
  color: var(--c-pink-purple);
}

/* --- Statement grande --- */
.proceso__statement {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin: 0;
}
/* Relleno por palabra: arrancan tenues y se vuelven blancas con el scroll.
   El piso de opacidad (0.42) mantiene el efecto pero cumple WCAG 3:1 para
   texto grande contra el fondo sólido de .proceso (#160a30). */
.proceso .fill-word {
  color: rgba(255, 255, 255, 0.42);
}
.proceso__statement-hl {
  background: linear-gradient(100deg, var(--c-pink-purple) 0%, var(--c-lavender) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- 3. Áreas + línea de tiempo --- */
.proceso__areas { width: 100%; max-width: 50rem; }
.proceso__areas-label {
  font-size: var(--fs-h6);
  font-weight: var(--fw-light);
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2rem;
}
.proceso__areas-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 1rem);
}
.proceso__areas-list li {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  cursor: default;
}
/* Hover: pasa de blanco a degradado de púrpuras */
.proceso__areas-list li:hover {
  background: linear-gradient(100deg, var(--c-purple) 0%, var(--c-pink-purple) 55%, var(--c-lavender) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.proceso__areas-list li:hover .fill-word {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.proceso__timeline {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  /* más separación entre los textos centrales y la línea de tiempo */
  margin-top: clamp(6rem, 14vh, 10rem);
}
.proceso__year {
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h6);
  color: rgba(255, 255, 255, 0.8);
}
.proceso__track {
  position: relative;
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-around;
  transform-origin: left center;
}
.proceso__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-pink-purple);
  box-shadow: 0 0 12px rgba(222, 151, 255, 0.8);
}

/* --- 4. Bloque sistémico: párrafos + variables --- */
.proceso__systemic {
  width: 100%;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  text-align: left;
  align-items: start;
}
.proceso__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 76ch; /* caja más ancha: menos cortes y palabras sueltas */
  margin-inline: auto;
  text-align: center; /* el párrafo va centrado */
}
.proceso__body p {
  font-size: var(--fs-h5);
  font-weight: var(--fw-light);
  line-height: 1.65;
  text-wrap: pretty; /* evita dejar una palabra sola al final del párrafo */
}
/* El cuerpo es texto NORMAL (16px) → piso de opacidad mayor (0.5) para
   cumplir WCAG 4.5:1; la legibilidad prima sobre el dramatismo del fade. */
.proceso__body .fill-word {
  color: rgba(255, 255, 255, 0.5);
}
/* Negritas dentro del relleno: peso medio (el color lo da el relleno) */
.proceso__body .fill-word--bold,
.proceso__body strong {
  font-weight: var(--fw-medium);
}
/* Variables flotando en el espacio (conectadas por líneas en el canvas) */
.proceso__vars {
  position: relative;
  width: 100%;
  height: min(68svh, 600px);
}
.proceso__vars-list {
  position: absolute;
  inset: 0;
  list-style: none;
  z-index: 1;
}
.var {
  position: absolute;
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: clamp(2rem, 5vw, 3.5rem); /* tipografía más grande */
  line-height: 1;
  color: var(--c-lavender);
  cursor: default;
  white-space: nowrap;
  transform: translate(-50%, -50%); /* el punto de anclaje es el centro */
  animation: varFloat var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
/* posiciones bien dispersas (centro del item en %) */
.var--1 { top: 24%; left: 17%; --dur: 7s;   --delay: 0s; }   /* usuarios (arriba-izq) */
.var--2 { top: 52%; left: 49%; --dur: 8.5s; --delay: -2s; }  /* tecnología (centro) */
.var--3 { top: 80%; left: 23%; --dur: 6.5s; --delay: -4s; }  /* procesos (abajo-izq) */
.var--4 { top: 22%; left: 81%; --dur: 7.8s; --delay: -1s; }  /* restricciones (arriba-der) */
.var--5 { top: 80%; left: 77%; --dur: 9s;   --delay: -3s; }  /* negocio (abajo-der) */

@keyframes varFloat {
  0%, 100% { transform: translate(-50%, calc(-50% - 10px)); }
  50%      { transform: translate(-50%, calc(-50% + 10px)); }
}

/* Ícono inline (con <linearGradient> propio): encima de la palabra, aparece en hover */
.var__icon {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.6rem);
  width: clamp(2.5rem, 5vw, 3.75rem);
  height: clamp(2.5rem, 5vw, 3.75rem);
  opacity: 0;
  transform: translate(-50%, 12px) scale(0.7);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out);
  pointer-events: none;
}
.var__icon svg { width: 100%; height: 100%; display: block; }
.var:hover .var__icon {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.var:hover .var__word { color: #fff; transition: color 0.3s ease; }

/* Canvas que dibuja las líneas (nodos) entre las palabras flotantes */
.net__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- Statement grande con reveal de palabras (máscara + subida) --- */
.proceso__bigstatement {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.75rem, 4.2vw, 3.25rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
}
/* cada palabra es una máscara; su interior sube desde abajo (reutilizable) */
.rw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.rw__i {
  display: inline-block;
  will-change: transform;
}

/* --- Texto centrado de la sección sistémica --- */
.organize__text--center {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.organize__text--center p {
  font-size: var(--fs-h6);
  font-weight: var(--fw-light);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
  text-wrap: pretty;
}

/* --- 5. Cierre --- */
.proceso__closing {
  max-width: 40ch;
  margin-inline: auto;
}
.proceso__explore {
  font-size: var(--fs-h6);
  font-weight: var(--fw-light);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  max-width: 52ch;
  margin: 0 auto clamp(4rem, 9vh, 6rem);
}
.proceso__final {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.proceso__final span { display: block; }
.proceso__final-hl {
  margin-top: 0.6rem;
  background: linear-gradient(100deg, var(--c-pink-purple) 0%, var(--c-lavender) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   LO QUE CONTINÚA — cierre en tono claro (transición dark → light)
   ============================================================ */
.continua {
  position: relative;
  z-index: 2;
  background: var(--c-white);
  color: var(--c-dark);
  overflow: hidden;
}
/* Aurora interactiva: capa fija a la pantalla mientras se recorre la sección.
   La posición (--mx/--my) la mueve continua.js (cursor + deriva en reposo). */
.continua__aurora {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh; /* no ocupa espacio en el flujo */
  z-index: 0;
  pointer-events: none;
  --aurora-1: 150, 87, 254;  /* púrpura */
  --aurora-2: 222, 151, 255;  /* rosa-púrpura */
  background:
    radial-gradient(45vw 45vw at var(--mx, 50%) var(--my, 42%), rgba(var(--aurora-1), 0.22) 0%, rgba(var(--aurora-1), 0) 60%),
    radial-gradient(38vw 38vw at calc(var(--mx, 50%) + 14vw) calc(var(--my, 42%) + 10vh), rgba(var(--aurora-2), 0.18) 0%, rgba(var(--aurora-2), 0) 62%);
}
.continua__panel {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(4rem, 9vh, 7rem) var(--gutter);
}
/* sección en blanco normal (sin degradado de transición) */
.continua__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-nav);
  letter-spacing: 0.12em;
  color: var(--c-purple);
  margin-bottom: 1rem;
}
.continua__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-dark);
}
/* puntos "cargando": sensación de que sigue escribiendo */
.continua__dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.16em;
  margin-left: 0.12em;
  padding-bottom: 0.16em;
}
.continua__dots i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--c-purple);
  animation: dotLoad 1.4s ease-in-out infinite;
}
.continua__dots i:nth-child(2) { animation-delay: 0.18s; }
.continua__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes dotLoad {
  0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
  35%           { opacity: 1; transform: translateY(-0.4em); }
}
.continua__explore {
  font-size: var(--fs-h5);
  font-weight: var(--fw-light);
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 42ch;
  margin-inline: auto;
  text-wrap: pretty;
}
/* manifiesto: grande y resaltado */
.continua__manifesto {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: clamp(1.75rem, 4.5vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-dark);
  max-width: 24ch;
  margin-inline: auto;
  text-wrap: balance;
}
.continua__manifesto strong {
  font-weight: var(--fw-medium);
  background: linear-gradient(100deg, var(--c-purple) 0%, var(--c-pink-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   PROYECTOS — galería (intro + tarjetas a los casos)
   ============================================================ */
.proyectos {
  position: relative;
  z-index: 2;
  background: var(--c-white);
  color: var(--c-dark);
  padding-block: clamp(6rem, 14vh, 11rem);
}
.proyectos__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.proyectos__head {
  max-width: 58ch;
  margin-bottom: clamp(3rem, 8vh, 6rem);
}
.proyectos__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  font-size: var(--fs-nav);
  letter-spacing: 0.12em;
  color: var(--c-purple-dark);
  margin-bottom: 1rem;
}
.proyectos__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.proyectos__intro {
  font-size: var(--fs-h6);
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: var(--text-soft);
}

.proyectos__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.project-card {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.project-card:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.project-card__link {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  transition: padding-left 0.4s var(--ease-out);
}
.project-card__link:hover { padding-left: clamp(0.4rem, 1.2vw, 1rem); }
.project-card__cat {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  letter-spacing: 0.04em;
  color: var(--c-purple-dark);
  margin-bottom: 0.6rem;
}
.project-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color 0.3s var(--ease-out);
}
.project-card__link:hover .project-card__title { color: var(--c-purple); }
.project-card__sub {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 46ch;
}

/* ============================================================
   CONTACTO — cierre del one-page
   ============================================================ */
.contacto {
  position: relative;
  z-index: 2; /* cubre el hero (sticky, z-index 1); si no, reaparece el inicio */
  background: var(--c-ghost);
  min-height: 100svh; /* llena la pantalla: evita que Proyectos asome arriba */
  display: flex;
  flex-direction: column;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter) clamp(2rem, 5vh, 3rem);
}
.contacto__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* bloque de contacto centrado vertical */
  max-width: var(--maxw);
  width: 100%;
  margin-inline: auto;
}
.contacto__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  color: var(--c-purple);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.contacto__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-dark);
  max-width: 16ch;
  text-wrap: balance;
}
.contacto__title strong {
  font-weight: var(--fw-medium);
  color: var(--c-purple);
}
.contacto__lead {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 44ch;
  text-wrap: pretty;
}
.contacto__email {
  display: inline-block;
  margin-top: clamp(2rem, 6vh, 3.5rem);
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--c-dark);
  position: relative;
  transition: color 0.3s var(--ease-out);
}
.contacto__email::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 1px;
  background: var(--c-purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.contacto__email:hover { color: var(--c-purple); }
.contacto__email:hover::after { transform: scaleX(1); }

.contacto__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: clamp(2rem, 5vh, 3rem);
}
.contacto__link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--c-dark);
  padding: 0.6rem 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.contacto__link:hover { border-color: var(--c-purple); color: var(--c-purple); }

.contacto__foot {
  margin-top: auto; /* pegado al fondo de la sección (que ocupa 100svh) */
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  letter-spacing: 0.02em;
  color: var(--text-soft);
}

/* ============================================================
   RESPONSIVE — Mobile (gradiente estático, sin lerp)
   ============================================================ */
@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto; /* apilado vertical: texto + foto */
    min-height: 0;
    gap: 1.5rem;
    padding-top: 6rem;
    align-content: center;
  }
  .hero__content { max-width: none; order: 1; align-self: auto; }
  .hero__visual { order: 2; justify-self: center; align-self: auto; height: min(50svh, 420px); }
  .hero__title { font-size: clamp(2.25rem, 11vw, 3.25rem); }

  /* En mobile las manchas quedan estáticas (gradient.js no corre) pero
     siguen cubriendo todo el hero, con foco en la mitad inferior (la foto). */
  .blob { filter: blur(60px); }
  .blob--pink     { width: 90vw; height: 90vw; right: -20vw; top: auto; bottom: 28%; }
  .blob--purple   { width: 85vw; height: 85vw; left: -25vw; bottom: -8vw; }
  .blob--purple-2 { width: 80vw; height: 80vw; left: 10vw; bottom: -16vw; }
  .blob--lavender { width: 80vw; height: 80vw; right: -15vw; bottom: 6%; }

  /* Mi enfoque: una sola columna; el intro deja de ser sticky */
  .enfoque__inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8vw, 3rem);
  }
  .enfoque__intro { position: static; top: auto; }
  .principle { padding: 1.75rem 0; }

  /* Mi proceso: el bloque sistémico pasa a una sola columna */
  .proceso__systemic {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8vw, 3rem);
  }
  .proceso__statement { margin-block: clamp(3.5rem, 10vh, 6rem); }

  /* Variables: en mobile se apilan centradas (sin flotar ni líneas) */
  .proceso__vars { height: auto; }
  .proceso__vars-list {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .net__canvas { display: none; } /* sin líneas en mobile */
  .var {
    position: static;
    transform: none;
    animation: none;
  }
  .var__icon { display: none; } /* el hover de ícono no aplica en táctil */

  /* Proyectos: las tarjetas se apilan en una sola columna */
  .project-card__link {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.6rem;
    padding: 1.75rem 0;
  }
  .project-card__cta { justify-self: start; margin-top: 0.5rem; }
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .hero__gradient { will-change: auto; }
  .blob { will-change: auto; }
  .var { animation: none; transform: translate(-50%, -50%); }
  .continua__dots i { animation: none; opacity: 0.6; }
}