/* ==========================================================================
   Nuberina · Secciones
   Formas orgánicas con significado (moodboard): puntos = conexión,
   ondas = movimiento, formas superpuestas = colaboración,
   contorno orgánico = adaptación. Nada se mueve porque sí.
   ========================================================================== */

/* Toda sección puede anclar decoración absoluta */
.section {
  position: relative;
}

/* --------------------------------------------------------------------------
   01 · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Anclado al ancho de contenido: en monitores anchos las figuras
     acompañan al texto en vez de perderse en el borde del viewport */
  max-width: var(--content-max);
  margin-inline: auto;
  min-height: min(88vh, 60rem);
  display: flex;
  align-items: center;
  padding-block: var(--space-24) var(--space-32);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.hero .eyebrow {
  margin-bottom: var(--space-6);
}

.hero h1 {
  font-size: var(--font-hero);
  font-weight: 800;
  margin-bottom: var(--space-8);
}

/* Palabra acento en color. --color-lilac-ink: 3.3:1 sobre cream,
   válido solo porque el titular es texto grande. No reutilizar en cuerpo. */
.hero h1 .script {
  color: var(--color-lilac-ink);
}


.hero-lead {
  font-size: var(--font-body-lg);
  line-height: 1.6;
  max-width: 34rem;
  margin-bottom: var(--space-12);
}

/* Composición orgánica: ideas (lila) y personas (coral) se superponen
   (colaboración), los puntos conectan y el hilo avanza hacia el amarillo.
   Sale parcialmente del viewport por la derecha. */
.hero-visual {
  position: absolute;
  top: 0;
  right: min(-4rem, -6vw);
  height: 100%;
  width: min(52vw, 46rem);
  pointer-events: none;
}

.hero-visual svg {
  width: 100%;
  height: 100%;
  /* La mancha coral nace fuera del viewBox (y negativa): sin esto el SVG
     la recorta justo donde empieza el header */
  overflow: visible;
}

@media (max-width: 56rem) {
  .hero {
    min-height: 0;
    padding-block: var(--space-16) var(--space-24);
  }

  .hero-visual {
    right: -30vw;
    width: 80vw;
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .forma,
  .js .hero-dot {
    opacity: 0;
    transition: opacity 1000ms var(--ease-out);
  }

  .js .forma--lila {
    transition-delay: 250ms;
  }

  .js .forma--turquesa {
    transition-delay: 450ms;
  }

  .js .forma--sol {
    transition-delay: 650ms;
  }

  .js .is-inview .forma {
    opacity: 1;
  }

  .js .hero-path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 1600ms var(--ease-in-out) 500ms;
  }

  .js .hero-dot--avance {
    transition-delay: 1800ms;
  }

  .js .is-inview .hero-dot {
    opacity: 1;
  }

  .js .is-inview .hero-path {
    stroke-dashoffset: 0;
  }

  /* Las figuras flotan como nubes; donde CSS soporta `d: path()`,
     además cambian de forma sin parar (transformarse) */
  .js .is-inview .forma--coral {
    --fx: 12px;
    --fy: 9px;
    animation: flotar 26s var(--ease-in-out) 2s infinite;
  }

  .js .is-inview .forma--lila {
    --fx: -10px;
    --fy: 8px;
    animation: flotar 22s var(--ease-in-out) 3s infinite;
  }

  .js .is-inview .forma--turquesa {
    --fx: 9px;
    --fy: -8px;
    animation: flotar 30s var(--ease-in-out) 2.5s infinite;
  }

  .js .is-inview .forma--sol {
    --fx: -8px;
    --fy: -7px;
    animation: flotar 19s var(--ease-in-out) 4s infinite;
  }

  @supports (d: path("M0 0 H1")) {
    .js .is-inview .forma--coral {
      animation:
        flotar 26s var(--ease-in-out) 2s infinite,
        morph-coral 15s var(--ease-in-out) infinite alternate;
    }

    .js .is-inview .forma--lila {
      animation:
        flotar 22s var(--ease-in-out) 3s infinite,
        morph-lila 12s var(--ease-in-out) 1s infinite alternate;
    }

    .js .is-inview .forma--turquesa {
      animation:
        flotar 30s var(--ease-in-out) 2.5s infinite,
        morph-turquesa 17s var(--ease-in-out) 2s infinite alternate;
    }

    .js .is-inview .forma--sol {
      animation:
        flotar 19s var(--ease-in-out) 4s infinite,
        morph-sol 10s var(--ease-in-out) infinite alternate;
    }
  }

  /* Pulso que recorre la conexión: la idea avanza */
  .js .hero-flujo {
    stroke-dasharray: 18 2382;
    stroke-dashoffset: 2418;
    opacity: 0;
  }

  .js .is-inview .hero-flujo {
    animation: fluir 7s linear 3s infinite;
  }

  /* El punto de avance responde al llegar el pulso */
  .js .is-inview .hero-dot--avance {
    animation: latir 7s var(--ease-out) 3s infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
}

/* Flotación de nube compartida; amplitud por --fx/--fy */
@keyframes flotar {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(var(--fx, 8px), calc(var(--fy, 6px) * -1));
  }

  50% {
    transform: translate(calc(var(--fx, 8px) * 2), var(--fy, 6px));
  }

  75% {
    transform: translate(var(--fx, 8px), calc(var(--fy, 6px) * 1.6));
  }
}

@keyframes fluir {
  0% {
    stroke-dashoffset: 2418;
    opacity: 0;
  }

  4% {
    opacity: 0.9;
  }

  52% {
    opacity: 0.9;
  }

  58% {
    stroke-dashoffset: 18;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 18;
    opacity: 0;
  }
}

@keyframes latir {
  0%,
  50% {
    transform: scale(1);
  }

  58% {
    transform: scale(1.35);
  }

  70%,
  100% {
    transform: scale(1);
  }
}

/* Los pulsos duplican el trazo del hilo: sin animación no deben verse
   (con reduced motion la información completa sigue ahí) */
.hero-flujo,
.hilo-flujo {
  opacity: 0;
}


/* --------------------------------------------------------------------------
   02 · Diferencia (fondo Navy)
   -------------------------------------------------------------------------- */
.diferencia {
  position: relative;
  background-color: var(--color-navy);
  color: var(--color-cream);
  overflow: hidden;
}

.diferencia .container {
  position: relative;
  z-index: 1;
}

/* Brumas de color sobre el navy (dirección de la presentación):
   profundidad sin dibujo, como la niebla de Asturias pero con la paleta */
.diferencia::before,
.diferencia::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.diferencia::before {
  left: -12%;
  bottom: -22%;
  width: 55%;
  aspect-ratio: 1.6 / 1;
  background: radial-gradient(closest-side, rgb(167 139 250 / 0.2), transparent 70%);
}

.diferencia::after {
  right: -10%;
  top: -18%;
  width: 50%;
  aspect-ratio: 1.6 / 1;
  background: radial-gradient(closest-side, rgb(31 175 156 / 0.16), transparent 70%);
}

/* Origen del nombre (Manual de Marca v1): el Nuberu, contado en corto */
.origen {
  margin-top: var(--space-16);
  margin-left: clamp(0rem, 12vw, 12rem);
  max-width: 52ch;
}

.origen-titulo {
  font-family: var(--font-expressive);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 700;
  color: var(--color-turquoise); /* 6.0:1 sobre navy */
  margin-bottom: var(--space-3);
}

.origen-texto {
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.origen-frase {
  font-weight: 800;
  font-size: var(--font-body-lg);
  color: var(--color-yellow); /* 10.7:1 sobre navy */
}

@media (max-width: 56rem) {
  .origen {
    margin-left: 0;
  }
}

.diferencia h2 {
  font-size: var(--font-h1);
  max-width: 12em;
  margin-bottom: var(--space-8);
}

/* Apoyo indentado: asimetría controlada */
.diferencia-apoyo {
  font-family: var(--font-display);
  font-size: var(--font-h3);
  font-weight: 600;
  margin-left: clamp(0rem, 12vw, 12rem);
  margin-bottom: var(--space-12);
  max-width: none;
}

.diferencia-apoyo .script {
  color: var(--color-turquoise); /* 6.7:1 sobre navy */
}

.diferencia-texto {
  margin-left: clamp(0rem, 12vw, 12rem);
  max-width: 46ch;
  font-size: var(--font-body-lg);
  line-height: 1.7;
}

.diferencia-frase {
  margin-top: var(--space-12);
  margin-left: clamp(0rem, 12vw, 12rem);
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-turquoise);
  font-family: var(--font-display);
  font-size: var(--font-h3);
  font-weight: 600;
  line-height: 1.3;
  max-width: 24ch;
}

/* El hilo entra desde arriba (continuidad con el hero), llega a la persona
   (coral) y escucha: ondas que responden. Decorativo. */
.diferencia-visual {
  position: absolute;
  /* Anclada arriba con proporción fija: si la sección crece (bloque origen),
     la escena no se re-escala ni invade el texto */
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1440 / 700;
  pointer-events: none;
}

.diferencia-visual svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .js .diferencia .hilo {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 1600ms var(--ease-in-out);
  }

  .js .diferencia.is-inview .hilo {
    stroke-dashoffset: 0;
  }

  .js .diferencia .onda {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
  }

  .js .diferencia.is-inview .onda {
    animation: escuchar 6s var(--ease-out) infinite;
  }

  .js .diferencia.is-inview .onda--2 {
    animation-delay: 1.2s;
  }

  /* Pulso que baja por el hilo hasta la persona */
  .js .diferencia .hilo-flujo {
    stroke-dasharray: 14 1386;
    stroke-dashoffset: 1414;
    opacity: 0;
  }

  .js .diferencia.is-inview .hilo-flujo {
    animation: fluir-hilo 6s linear 1.8s infinite;
  }

  /* La persona respira mientras escucha */
  .js .diferencia.is-inview .persona-dot {
    animation: respirar 6s var(--ease-in-out) infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
}

@keyframes fluir-hilo {
  0% {
    stroke-dashoffset: 1414;
    opacity: 0;
  }

  6% {
    opacity: 0.9;
  }

  40% {
    opacity: 0.9;
  }

  48% {
    stroke-dashoffset: 14;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 14;
    opacity: 0;
  }
}

@keyframes respirar {
  0%,
  40% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.14);
  }

  75%,
  100% {
    transform: scale(1);
  }
}

@keyframes escuchar {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }

  18% {
    opacity: 0.7;
  }

  55% {
    opacity: 0;
    transform: scale(1.6);
  }

  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@media (max-width: 56rem) {
  .diferencia-apoyo,
  .diferencia-texto,
  .diferencia-frase {
    margin-left: 0;
  }

  .diferencia-visual {
    opacity: 0.5;
  }
}

/* --------------------------------------------------------------------------
   03 · Método: la misma idea evoluciona en cada paso y avanza a la derecha
   -------------------------------------------------------------------------- */
.metodo h2 {
  font-size: var(--font-h2);
  margin-block: var(--space-4) var(--space-16);
  max-width: 14em;
}

.pasos {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.paso {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  /* Cada paso avanza un poco más: --n la asigna el HTML */
  margin-left: calc(var(--n, 0) * clamp(0rem, 5vw, 5.5rem));
  max-width: 34rem;
}

/* Chip opaco tintado: el camino pasa por detrás y no cruza la figura
   (regla de Cristina). Fondos sólidos: mezcla del acento con el cream. */
.paso-glifo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.paso:nth-child(1) .paso-glifo {
  background-color: color-mix(in srgb, var(--color-coral) 14%, var(--color-cream));
  border-radius: 57% 43% 46% 54% / 48% 60% 40% 52%;
}

.paso:nth-child(2) .paso-glifo {
  background-color: color-mix(in srgb, var(--color-lilac) 16%, var(--color-cream));
  border-radius: 40% 60% 55% 45% / 58% 42% 58% 42%;
}

.paso:nth-child(3) .paso-glifo {
  background-color: color-mix(in srgb, var(--color-turquoise) 14%, var(--color-cream));
  border-radius: 52% 48% 40% 60% / 44% 56% 44% 56%;
}

.paso:nth-child(4) .paso-glifo {
  background-color: color-mix(in srgb, var(--color-yellow) 20%, var(--color-cream));
  border-radius: 62% 38% 52% 48% / 52% 46% 54% 48%;
}

.paso:nth-child(5) .paso-glifo {
  background-color: color-mix(in srgb, var(--color-coral) 12%, var(--color-cream));
  border-radius: 45% 55% 60% 40% / 60% 45% 55% 40%;
}

.paso h3 {
  margin-bottom: var(--space-1);
}

.paso h3 span {
  /* Numeración decorativa (el orden real lo da <ol>); mezcla navy/cream
     con contraste AA en lugar de acento puro, que no llega sobre cream */
  color: color-mix(in srgb, var(--color-navy) 60%, var(--color-cream));
  font-weight: 600;
  margin-right: var(--space-2);
  font-feature-settings: "tnum";
}

.paso p {
  max-width: 40ch;
}

@media (max-width: 56rem) {
  .paso {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   04 · Capacidades: tarjetas suaves iguales en retícula 2×3 (dirección
   elegida 2026-08-13 tras descartar las manchas con silueta propia).
   Lo orgánico queda en los detalles: punto de color y decos de la sección.
   -------------------------------------------------------------------------- */
.capacidades h2 {
  font-size: var(--font-h2);
  margin-block: var(--space-4) var(--space-16);
}

.capacidades-lista {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

.capacidad {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-8), 3vw, 3rem) clamp(var(--space-8), 3.4vw, 3.5rem);
  border-radius: calc(var(--radius-lg) - 4px);
  background-color: color-mix(in srgb, var(--tinte, var(--color-turquoise)) 12%, var(--color-cream));
  transition: transform var(--duration-ui) var(--ease-out);
}

.capacidades-lista .capacidad:nth-child(1) { --tinte: var(--color-turquoise); }
.capacidades-lista .capacidad:nth-child(2) { --tinte: var(--color-lilac); }
.capacidades-lista .capacidad:nth-child(3) { --tinte: var(--color-coral); }
.capacidades-lista .capacidad:nth-child(5) { --tinte: var(--color-turquoise); }
.capacidades-lista .capacidad:nth-child(6) { --tinte: var(--color-lilac); }

/* El amarillo necesita algo más de tinte para no desaparecer sobre crema */
.capacidades-lista .capacidad:nth-child(4) {
  --tinte: var(--color-yellow);
  background-color: color-mix(in srgb, var(--tinte) 18%, var(--color-cream));
}

.capacidad:hover {
  transform: translateY(-4px);
}

.capacidad h3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  margin-bottom: var(--space-3);
}

.capacidad p {
  max-width: 34ch;
  line-height: 1.65;
}

/* Reveal escalonado de la lista */
.capacidades-lista .capacidad:nth-child(2) { --reveal-delay: 80ms; }
.capacidades-lista .capacidad:nth-child(3) { --reveal-delay: 160ms; }
.capacidades-lista .capacidad:nth-child(4) { --reveal-delay: 240ms; }
.capacidades-lista .capacidad:nth-child(5) { --reveal-delay: 320ms; }
.capacidades-lista .capacidad:nth-child(6) { --reveal-delay: 400ms; }

/* Punto que responde (decorativo; el color varía por capacidad) */
.capacidad .punto {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--punto, var(--color-turquoise));
  transition: transform var(--duration-fast) var(--ease-out);
}

.capacidad:hover .punto {
  transform: translateX(4px);
}

.capacidad p {
  color: color-mix(in srgb, var(--color-navy) 78%, var(--color-cream));
}

@media (max-width: 56rem) {
  .capacidades-lista {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   05 · Proyectos (casos editoriales pendientes de contenido)
   -------------------------------------------------------------------------- */
.proyectos {
  position: relative;
}

.proyectos h2 {
  font-size: var(--font-h2);
  margin-block: var(--space-4) var(--space-8);
}

.proyectos-nota {
  font-size: var(--font-body-lg);
  max-width: 44ch;
}

.proyectos-nota .script {
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   06 · Personas
   -------------------------------------------------------------------------- */
.personas h2 {
  font-size: var(--font-h2);
  margin-block: var(--space-4) var(--space-8);
}

.personas p {
  font-size: var(--font-body-lg);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   07 · Asturias (raíz, niebla contemporánea)
   -------------------------------------------------------------------------- */
.asturias {
  position: relative;
  background-color: var(--color-navy);
  color: var(--color-cream);
  overflow: hidden;
}

.asturias .container {
  position: relative;
}

.asturias h2 {
  font-size: var(--font-h1);
  max-width: 13em;
}

.asturias h2 .script {
  color: var(--color-turquoise); /* 6.7:1 sobre navy */
  white-space: nowrap;
}

/* Ondas: mar y movimiento, decorativas */
.asturias-ondas {
  margin-top: var(--space-12);
  width: min(20rem, 50vw);
}

@media (prefers-reduced-motion: no-preference) {
  .js .asturias-ondas path {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
  }

  .js .asturias.is-inview .asturias-ondas path {
    transition: stroke-dashoffset 1400ms var(--ease-in-out);
    stroke-dashoffset: 0;
  }

  .js .asturias.is-inview .asturias-ondas path:nth-child(2) {
    transition-delay: 200ms;
  }

  .js .asturias.is-inview .asturias-ondas path:nth-child(3) {
    transition-delay: 400ms;
  }
}

/* --------------------------------------------------------------------------
   08 · Contacto
   -------------------------------------------------------------------------- */
/* Una sola tarjeta centrada (como la presentación): intro + formulario
   dentro de la misma superficie, sobre la mancha Apoyo A */
.contacto .container {
  max-width: 56rem;
}

.contacto h2 {
  font-size: var(--font-h2);
  margin-block: var(--space-4) var(--space-6);
}

.contacto-texto {
  font-size: var(--font-body-lg);
  max-width: 30ch;
}

.form-status {
  min-height: 1.5em;
  font-weight: 500;
  margin-top: var(--space-4);
}


/* --------------------------------------------------------------------------
   Motion adicional por sección. Cada pieza expresa una idea de MOTION.md;
   todo transform/opacity/stroke y bajo prefers-reduced-motion: no-preference.
   -------------------------------------------------------------------------- */

/* Hero: la composición se queda ligeramente atrás al hacer scroll (avance).
   Solo donde existen scroll-driven animations; en el resto, estática. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .hero-visual {
      animation: hero-quedarse linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes hero-quedarse {
  to {
    transform: translateY(90px);
  }
}

/* Método: cada glifo cuenta su paso al entrar */
@media (prefers-reduced-motion: no-preference) {
  /* Escuchar: las ondas se dibujan desde el punto */
  .js .metodo .g-arco {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    transition: stroke-dashoffset 700ms var(--ease-out);
  }

  .js .metodo .g-arco--1 {
    transition-delay: 300ms;
  }

  .js .metodo .g-arco--2 {
    transition-delay: 550ms;
  }

  .js .metodo .paso.is-inview .g-arco {
    stroke-dashoffset: 0;
  }

  /* Entender: el anillo enfoca y el centro aparece */
  .js .metodo .g-anillo,
  .js .metodo .g-centro,
  .js .metodo .g-dot,
  .js .metodo .g-sol {
    transform-box: fill-box;
    transform-origin: center;
  }

  .js .metodo .g-anillo {
    opacity: 0;
    transform: scale(1.5);
    transition:
      opacity 600ms var(--ease-out) 200ms,
      transform 600ms var(--ease-out) 200ms;
  }

  .js .metodo .g-centro {
    opacity: 0;
    transform: scale(0);
    transition:
      opacity 400ms var(--ease-out) 650ms,
      transform 400ms var(--ease-out) 650ms;
  }

  .js .metodo .paso.is-inview .g-anillo,
  .js .metodo .paso.is-inview .g-centro {
    opacity: 1;
    transform: scale(1);
  }

  /* Conectar: los puntos aparecen y la línea los une */
  .js .metodo .g-dot {
    opacity: 0;
    transform: scale(0);
    transition:
      opacity 400ms var(--ease-out) 200ms,
      transform 400ms var(--ease-out) 200ms;
  }

  .js .metodo .g-dot--b {
    transition-delay: 350ms;
  }

  .js .metodo .g-linea {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 500ms var(--ease-out) 550ms;
  }

  .js .metodo .paso.is-inview .g-dot {
    opacity: 1;
    transform: scale(1);
  }

  .js .metodo .paso.is-inview .g-linea {
    stroke-dashoffset: 0;
  }

  /* Dar forma: el contorno se dibuja */
  .js .metodo .g-forma {
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    transition: stroke-dashoffset 900ms var(--ease-in-out) 250ms;
  }

  .js .metodo .paso.is-inview .g-forma {
    stroke-dashoffset: 0;
  }

  /* Hacer avanzar: el sol aparece y la flecha empuja periódicamente */
  .js .metodo .g-sol {
    opacity: 0;
    transform: scale(0);
    transition:
      opacity 400ms var(--ease-out) 250ms,
      transform 400ms var(--ease-out) 250ms;
  }

  .js .metodo .paso.is-inview .g-sol {
    opacity: 1;
    transform: scale(1);
  }

  .js .metodo .paso.is-inview .g-flecha {
    animation: empujar 4.5s var(--ease-out) 1s infinite;
  }
}

@keyframes empujar {
  0%,
  72% {
    transform: translateX(0);
  }

  82% {
    transform: translateX(4px);
  }

  92%,
  100% {
    transform: translateX(0);
  }
}

/* Asturias: el mar no se para */
@media (prefers-reduced-motion: no-preference) {
  .js .asturias.is-inview .asturias-ondas path {
    animation: olas 9s var(--ease-in-out) 1.6s infinite alternate;
  }

  .js .asturias.is-inview .asturias-ondas path:nth-child(2) {
    animation-delay: 2.1s;
  }

  .js .asturias.is-inview .asturias-ondas path:nth-child(3) {
    animation-delay: 2.6s;
  }
}

@keyframes olas {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-10px);
  }
}

/* --------------------------------------------------------------------------
   Detalles del moodboard: colina con brote, garabatos, línea de impulso,
   forma en contacto y niebla en Asturias. Todo decorativo (aria-hidden).
   -------------------------------------------------------------------------- */

/* Asturias: brumas de degradado puro que derivan despacio */
.asturias-niebla {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bruma {
  position: absolute;
}

.bruma--1 {
  left: -10%;
  bottom: -30%;
  width: 70%;
  aspect-ratio: 2.6 / 1;
  background: radial-gradient(closest-side, rgb(255 247 235 / 0.11), transparent 72%);
}

.bruma--2 {
  right: -12%;
  bottom: -36%;
  width: 85%;
  aspect-ratio: 2.8 / 1;
  background: radial-gradient(closest-side, rgb(255 247 235 / 0.08), transparent 72%);
}

.bruma--3 {
  left: 22%;
  top: -30%;
  width: 60%;
  aspect-ratio: 2.6 / 1;
  background: radial-gradient(closest-side, rgb(31 175 156 / 0.1), transparent 72%);
}

@media (prefers-reduced-motion: no-preference) {
  .js .asturias.is-inview .bruma--1 {
    animation: niebla-deriva 38s var(--ease-in-out) infinite alternate;
  }

  .js .asturias.is-inview .bruma--2 {
    animation: niebla-deriva 50s var(--ease-in-out) 4s infinite alternate-reverse;
  }

  .js .asturias.is-inview .bruma--3 {
    animation: niebla-deriva 44s var(--ease-in-out) 2s infinite alternate;
  }
}

@keyframes niebla-deriva {
  from {
    transform: translateX(-30px);
  }

  to {
    transform: translateX(30px);
  }
}

/* --------------------------------------------------------------------------
   Bordes orgánicos entre secciones (las formas atraviesan secciones)
   -------------------------------------------------------------------------- */
.borde {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  pointer-events: none;
  z-index: 2;
}

.borde--top {
  top: -1px;
}

.borde--bottom {
  bottom: -1px;
  transform: rotate(180deg);
}

.site-footer {
  position: relative;
  padding-top: calc(var(--space-16) + clamp(40px, 6vw, 90px));
}

/* --------------------------------------------------------------------------
   Método como camino (desktop): los pasos viven sobre un sendero
   -------------------------------------------------------------------------- */
.pasos-wrap {
  position: relative;
}

.mapa-camino {
  display: none;
}

@media (min-width: 64rem) {
  .pasos-wrap {
    position: relative;
    max-width: 72rem;
    margin-inline: auto;
  }

  /* Serpenteo con geometría fija (2026-08-12, validado sobre el PDF):
     los pasos alternan izquierda/derecha por todo el ancho y el hilo
     (svg estirado) zigzaguea entre ellos por las bandas vacías.
     Filas de altura constante e indentación porcentual para que el
     trazado case a cualquier ancho. */
  .mapa-camino {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .pasos {
    display: grid;
    grid-auto-rows: 10.5rem;
    gap: 0;
  }

  .paso {
    margin: 0;
    max-width: 38ch;
  }

  /* Indentación del serpenteo (los % casan con el path de .mapa-camino) */
  .pasos .paso:nth-child(1) { margin-left: 2%; }
  .pasos .paso:nth-child(2) { margin-left: 48%; }
  .pasos .paso:nth-child(3) { margin-left: 10%; }
  .pasos .paso:nth-child(4) { margin-left: 42%; }
  .pasos .paso:nth-child(5) { margin-left: 18%; }

  .paso .paso-glifo {
    width: 72px;
    height: 72px;
  }

  .paso h3 {
    white-space: nowrap;
  }
}

/* Reveal escalonado de los pasos (usa el --n del HTML) */
.paso {
  --reveal-delay: calc(var(--n, 0) * 140ms);
}

/* El camino aparece y un pulso amarillo lo recorre: la necesidad avanza */
.camino-flujo {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .camino {
    opacity: 0;
    transition: opacity 900ms var(--ease-out) 200ms;
  }

  .js .metodo.is-inview .camino {
    opacity: 0.9;
  }

  .js .camino-flujo {
    stroke-dasharray: 16 1984;
    stroke-dashoffset: 2016;
  }

  .js .metodo.is-inview .camino-flujo {
    animation: fluir-camino 9s linear 2s infinite;
  }
}

@keyframes fluir-camino {
  0% {
    stroke-dashoffset: 2016;
    opacity: 0;
  }

  4% {
    opacity: 0.95;
  }

  62% {
    opacity: 0.95;
  }

  68% {
    stroke-dashoffset: 16;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 16;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Cálido orgánico depurado: veladuras, superficies elevadas y luz
   -------------------------------------------------------------------------- */

/* Figuras del hero: color pleno de la paleta, formas vivas.
   Los solapamientos multiplican color (colaboración). */
.forma--lila,
.forma--sol {
  mix-blend-mode: multiply;
}

@keyframes morph-coral {
  from {
    d: path("M 600 -160 C 500 -150 460 -80 470 -10 C 477 40 440 60 450 105 C 462 160 520 185 585 175 C 630 168 650 195 700 200 C 775 205 830 140 828 60 C 826 -40 760 -105 690 -140 C 660 -155 630 -163 600 -160 Z");
  }

  to {
    d: path("M 595 -155 C 490 -155 450 -75 468 -5 C 480 42 435 70 455 115 C 472 162 535 178 595 165 C 638 155 660 200 710 195 C 780 188 835 125 825 50 C 815 -45 755 -115 685 -145 C 655 -158 625 -160 595 -155 Z");
  }
}

@keyframes morph-lila {
  from {
    d: path("M 460 120 C 390 130 350 190 365 250 C 375 290 350 310 365 350 C 382 395 445 410 500 390 C 540 375 545 340 580 320 C 620 296 625 230 590 185 C 555 140 520 112 460 120 Z");
  }

  to {
    d: path("M 455 128 C 382 142 345 200 368 258 C 382 295 358 320 378 358 C 398 398 460 402 510 380 C 548 362 545 330 575 308 C 612 282 615 222 582 180 C 550 138 515 118 455 128 Z");
  }
}

@keyframes morph-turquesa {
  from {
    d: path("M 250 555 C 175 570 130 640 155 710 C 172 758 220 770 260 795 C 300 820 360 830 405 800 C 452 768 455 700 420 655 C 395 622 355 625 330 595 C 305 566 295 546 250 555 Z");
  }

  to {
    d: path("M 245 562 C 168 582 125 650 160 718 C 182 760 232 762 270 788 C 308 812 368 818 408 788 C 448 755 445 692 412 650 C 390 620 348 630 325 600 C 302 572 288 548 245 562 Z");
  }
}

@keyframes morph-sol {
  from {
    d: path("M 560 395 C 522 400 498 432 505 468 C 510 495 535 505 558 515 C 585 527 620 522 638 498 C 656 474 648 435 625 415 C 605 397 585 392 560 395 Z");
  }

  to {
    d: path("M 562 390 C 520 402 495 440 508 474 C 517 498 542 500 565 510 C 590 520 625 512 640 490 C 654 468 645 430 620 410 C 602 396 585 385 562 390 Z");
  }
}

/* Contacto: la tarjeta es una superficie cálida elevada */
.contacto-card {
  background-color: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3.2vw, var(--space-12)) clamp(var(--space-8), 6vw, 5.5rem);
  box-shadow: var(--shadow-soft);
}

.contacto form {
  margin-top: var(--space-6);
}

/* Luz de fondo en secciones amplias (profundidad sin dibujo) */
.proyectos::before,
.personas::before {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.proyectos {
  position: relative;
}

.proyectos::before {
  right: -12%;
  top: 4%;
  width: 44%;
  background: radial-gradient(closest-side, rgb(167 139 250 / 0.17), transparent 72%);
}

.personas {
  position: relative;
}

.personas::before {
  left: -14%;
  bottom: -30%;
  width: 46%;
  background: radial-gradient(closest-side, rgb(31 175 156 / 0.13), transparent 72%);
}

/* --------------------------------------------------------------------------
   Decoración compartida: puntitos (conexión), trazos (movimiento) y
   formas geo (transformación) repartidas por las secciones
   -------------------------------------------------------------------------- */
.deco {
  position: absolute;
  pointer-events: none;
}

.deco svg {
  width: 100%;
  height: auto;
}

@media (max-width: 56rem) {
  .deco {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Los puntitos aparecen en cascada */
  .js .puntito {
    opacity: 0;
    transition: opacity 500ms var(--ease-out);
    transition-delay: calc(300ms + var(--i, 0) * 80ms);
  }

  .js [data-inview].is-inview .puntito {
    opacity: 1;
  }

  /* Los trazos se dibujan */
  .js .trazo {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    transition: stroke-dashoffset 1100ms var(--ease-in-out) 400ms;
  }

  .js .trazo + .trazo {
    transition-delay: 700ms;
  }

  .js [data-inview].is-inview .trazo {
    stroke-dashoffset: 0;
  }

  /* Las formas geo aparecen, flotan y cambian de forma */
  .js .forma-deco {
    opacity: 0;
    transition: opacity 900ms var(--ease-out) 250ms;
  }

  .js [data-inview].is-inview .forma-deco {
    opacity: 1;
    animation: flotar 28s var(--ease-in-out) 2s infinite;
  }

  @supports (d: path("M0 0 H1")) {
    .js [data-inview].is-inview .forma-deco.geoa {
      animation:
        flotar 28s var(--ease-in-out) 2s infinite,
        morph-geoa 13s var(--ease-in-out) infinite alternate;
    }

    .js [data-inview].is-inview .forma-deco.geob {
      animation:
        flotar 24s var(--ease-in-out) 3s infinite,
        morph-geob 16s var(--ease-in-out) 1s infinite alternate;
    }

    .js [data-inview].is-inview .forma-deco.geoc {
      animation:
        flotar 31s var(--ease-in-out) 2.5s infinite,
        morph-geoc 11s var(--ease-in-out) infinite alternate;
    }
  }
}

@keyframes morph-geoa {
  from {
    d: path("M 210 40 C 130 30 70 90 80 160 C 86 205 120 225 150 250 C 175 272 160 320 210 340 C 270 362 340 320 350 255 C 358 205 320 180 310 140 C 298 92 280 48 210 40 Z");
  }

  to {
    d: path("M 200 50 C 125 45 65 100 85 170 C 98 212 135 220 155 245 C 172 268 150 310 205 332 C 268 356 345 310 348 245 C 350 198 310 185 305 145 C 297 100 268 55 200 50 Z");
  }
}

@keyframes morph-geob {
  from {
    d: path("M 140 60 C 80 85 55 155 75 215 C 92 265 145 280 195 270 C 235 262 250 285 295 285 C 350 285 380 230 365 175 C 350 120 295 110 250 115 C 205 120 190 40 140 60 Z");
  }

  to {
    d: path("M 135 70 C 72 95 50 165 80 220 C 100 262 150 270 198 262 C 240 255 258 280 300 275 C 352 268 378 220 360 168 C 342 118 292 118 248 122 C 202 127 185 50 135 70 Z");
  }
}

@keyframes morph-geoc {
  from {
    d: path("M 200 70 C 160 68 150 100 115 110 C 70 122 55 175 75 220 C 98 270 170 290 235 275 C 300 260 340 205 325 150 C 312 102 260 73 200 70 Z");
  }

  to {
    d: path("M 205 65 C 168 70 155 105 122 118 C 80 135 60 180 85 225 C 110 268 180 282 240 265 C 298 248 335 198 318 145 C 303 98 258 60 205 65 Z");
  }
}

/* --------------------------------------------------------------------------
   Contacto con más vida: respaldo de color que se balancea, campos en
   cascada y foco que responde
   -------------------------------------------------------------------------- */
.contacto-trazo {
  width: 8.5rem;
  margin-block: var(--space-4) var(--space-2);
}


/* La tarjeta va ligeramente ladeada sobre una mancha amarilla grande del
   repertorio (Apoyo A, "fondos y respaldos") — dirección validada el
   2026-08-12 sobre la presentación. La mancha vive FUERA del form: el
   rotate crea stacking context y un hijo con z-index -1 taparía su fondo. */
.contacto-panel-wrap {
  position: relative;
}

.contacto-card {
  position: relative;
  z-index: 1;
  transform: rotate(-1.2deg);
}

.contacto-respaldo {
  position: absolute;
  inset: -14% -12% -12% -16%;
  z-index: 0;
  pointer-events: none;
}

.contacto-respaldo svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .js .contacto .contacto-respaldo {
    opacity: 0;
    transition: opacity 900ms var(--ease-out) 150ms;
  }

  .js .contacto.is-inview .contacto-respaldo {
    opacity: 1;
    animation: balanceo 13s var(--ease-in-out) 1s infinite alternate;
  }
}

@keyframes balanceo {
  from {
    transform: rotate(-0.6deg) translate(4px, 2px);
  }

  to {
    transform: rotate(0.7deg) translate(-4px, 6px);
  }
}

/* El foco responde: aparece un punto turquesa junto al label */
.field label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.field label::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-turquoise);
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.field:focus-within label::after {
  opacity: 1;
  transform: scale(1);
}