/* ==========================================================================
   MODO — 03. Método MODO
   Título fijo a la izquierda. A la derecha pasan los 5 pasos, uno por
   pantalla. Detrás, la red de metaballs se reorganiza con el scroll.
   ========================================================================== */

.metodo {
  position: relative;
  background-color: var(--azul-oscuro);
  color: var(--blanco);
  padding-block: clamp(4rem, 7vw, 7rem) 0;
  overflow-x: clip;
}

.metodo__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 5vw, 5rem);
}

/* --------------------------------------------------------------------------
   Lateral fijo
   -------------------------------------------------------------------------- */
.metodo__aside-inner {
  position: sticky;
  top: calc(var(--header-h) + 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

.metodo__eyebrow {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--azul-claro);
}

.metodo__title {
  font-size: var(--fs-h2);
  max-width: 12ch;
}
.metodo__title em {
  font-style: normal;
  color: var(--lima);
}

/* --- Indicador vertical 01 — 05 --- */
.metodo__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.metodo__nav-btn {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.4rem 0;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(254, 254, 252, 0.4);
  transition: color var(--t-med) var(--ease-soft);
}
.metodo__nav-btn::before {
  content: '';
  width: 26px;
  height: 1px;
  flex: none;
  background-color: currentColor;
  transition: width var(--t-med) var(--ease),
              background-color var(--t-med) var(--ease-soft);
}
.metodo__nav-btn:hover { color: rgba(254, 254, 252, 0.8); }

.metodo__nav-btn[aria-current='true'] {
  color: var(--blanco);
}
.metodo__nav-btn[aria-current='true']::before {
  width: 46px;
  background-color: var(--lima);
}

/* --------------------------------------------------------------------------
   Lienzo de la red — sticky detrás de los pasos
   El margin-bottom negativo hace que los pasos se monten encima.
   -------------------------------------------------------------------------- */
.metodo__canvas {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

.metodo__net {
  width: min(120%, 780px);
  aspect-ratio: 1;
  opacity: 0.55;
  filter: blur(28px);
  transition: filter 1100ms var(--ease), opacity 1100ms var(--ease);
}

/* Los círculos se reacomodan; al acercarse, el filtro los fusiona
   en la misma forma del isotipo. */
.metodo__net circle {
  transition: cx 1200ms var(--ease),
              cy 1200ms var(--ease),
              r  1200ms var(--ease);
}

/* Firma final: el iso aparece recién en el paso 05 */
.metodo__signature {
  position: absolute;
  right: 4%;
  bottom: 12%;
  width: 74px;
  color: var(--blanco);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.metodo.is-final .metodo__signature { opacity: 0.5; transform: none; }

/* --------------------------------------------------------------------------
   Pasos
   -------------------------------------------------------------------------- */
.metodo__track { position: relative; }

.metodo__step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-block: var(--sp-6);
  opacity: 0.24;
  transition: opacity var(--t-slow) var(--ease-soft);
}
.metodo__step.is-active { opacity: 1; }

.metodo__num {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 9vw, 8.5rem);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--azul-electrico);
  margin-bottom: var(--sp-4);
  transition: color var(--t-slow) var(--ease-soft),
              transform var(--t-slow) var(--ease);
  transform: translateY(14px);
}
.metodo__step.is-active .metodo__num {
  transform: none;
  color: var(--azul-electrico);
}

.metodo__step-title {
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  margin-bottom: var(--sp-3);
  max-width: 15ch;
}

.metodo__step-text {
  max-width: 46ch;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 300;
  line-height: var(--lh-normal);
  color: var(--texto-tenue);
}
.metodo__step-text strong {
  font-weight: 400;
  color: var(--lima);
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199px) {
  .metodo__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .metodo__aside-inner {
    position: static;
    margin-bottom: clamp(2rem, 5vw, 4rem);
  }
  .metodo__title { max-width: 18ch; }
  .metodo__nav { flex-direction: row; gap: 1.25rem; }
  .metodo__nav-btn { width: auto; }
  .metodo__nav-btn::before { width: 14px; }
  .metodo__nav-btn[aria-current='true']::before { width: 26px; }

  .metodo__net { width: min(120%, 620px); opacity: 0.4; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  /* El bloque del título va FIJO, no sticky.
     El sticky depende de la altura del contenedor, y en mobile el navegador
     la recalcula cada vez que oculta la barra de direcciones: al bajar se
     soltaba y al subir volvía. Con position: fixed no depende de ningún
     contenedor, y un control por scroll decide cuándo mostrarlo. */
  .metodo__grid { display: contents; }

  .metodo__track {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    /* Espacio reservado para el bloque fijo, medido por JS */
    padding-top: calc(var(--alto-aside, 150px) + 0.75rem);
  }

  .metodo__aside {
    position: fixed;
    top: var(--header-h-sm);
    left: 0;
    right: 0;
    z-index: 90;                 /* por debajo del header, que es 100 */
    padding: 0.875rem var(--gutter) 0.75rem;
    background-color: var(--azul-oscuro);
    box-shadow: 0 10px 18px -10px rgba(0, 20, 51, 0.9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms var(--ease-soft), visibility 0s linear 260ms;
  }

  /* La clase la pone js/metodo.js mientras la sección ocupa la pantalla */
  .metodo.esta-en-vista .metodo__aside {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* svh en lugar de vh: no cambia cuando el navegador oculta la barra */
  .metodo__canvas { height: 100svh; margin-bottom: -100svh; }
  .metodo__aside-inner { gap: 0.75rem; margin-bottom: 0; }

  .metodo__eyebrow { font-size: 0.625rem; }
  .metodo__title { font-size: 1.5rem; max-width: none; }
  .metodo__nav { gap: 0.875rem; }

  /* Los pasos estaban demasiado separados entre sí */
  .metodo__step {
    min-height: 56vh;
    padding-block: var(--sp-4);
  }
  .metodo__num { font-size: clamp(3.25rem, 17vw, 5rem); margin-bottom: var(--sp-3); }
  .metodo__step-title { font-size: 1.375rem; max-width: none; }

  .metodo__net { width: 130%; opacity: 0.26; }
  .metodo__signature { width: 52px; right: 2%; }
}

@media (prefers-reduced-motion: reduce) {
  .metodo__step { opacity: 1; }
  .metodo__num { transform: none; }
  .metodo__net circle { transition: none; }
}