/* =========================================================
   METODOLOGÍA
   LedLab — landing. Editar SOLO lo de esta sección acá.
   ---------------------------------------------------------
   Fondo: el mismo mesh gradient del hero (componente .mesh de
   css/base/mesh.css) con el modificador .mesh--mirror, que lo espeja en
   horizontal para que los colores queden del otro lado.
   Izquierda: rompecabezas + título + bajada.
   Derecha: tres tarjetas apiladas y rotadas, que "caen" una sobre otra al
   entrar en pantalla y se enderezan en hover.
   ========================================================= */
.metodologia {
  --color-text: var(--color-text-light);
}

/* La etiqueta va en crema y no en rosa: sobre este degradado saturado el
   rosa de --color-5 casi no se lee. */
.metodologia .section-label {
  color: var(--color-text-light);
}

.metodologia__inner {
  position: relative; /* por encima del mesh */
  z-index: 1;
  width: 100%;
}

/* ---------------------------------------------------------
   COLUMNA IZQUIERDA
   --------------------------------------------------------- */
.metodologia__puzzle {
  display: block;
  width: 100%;
  max-width: clamp(160px, 22vh, 300px);
  height: auto;
  margin-bottom: var(--space-5);
}

.metodologia__title {
  font-size: clamp(1.8rem, 2.8vw, 3.2rem);
  line-height: 1.1;
  color: var(--color-text-light);
}

.metodologia__text p {
  margin-top: var(--space-3);
  font-size: 18px;
  line-height: 1.55;
  max-width: 46ch;
  color: var(--color-text-light);
}

/* ---------------------------------------------------------
   TARJETAS APILADAS
   Cada tarjeta declara su propia rotación en el HTML con --card-rot.
   Se superponen con un margen negativo y se ordenan con z-index para que
   cada una tape a la anterior, como en el Figma.
   --------------------------------------------------------- */
.metodologia__cards {
  display: flex;
  flex-direction: column;
}

.metodologia__card {
  --card-rot: 0deg;

  position: relative;
  background: var(--color-bg);
  color: var(--color-text-dark);
  padding: var(--space-4);
  /* Sin sombra (regla del sitio): el borde es lo que separa una tarjeta
     de la otra cuando se superponen, porque las tres son del mismo crema.
     Va en el oscuro de marca (--color-text-dark, el mismo #1D1D1B del
     menú), no en negro pleno. */
  border: var(--border-width) solid var(--color-text-dark);

  /* Estado inicial: arriba de su lugar y ya rotada. SIN opacidad: la
     entrada es un slide desde arriba, como si cayeran, no un
     desvanecimiento. La curva remata con un leve pasarse de largo para
     que se lea el aterrizaje. */
  transform: translateY(-7rem) rotate(var(--card-rot));
  transition: transform 0.7s cubic-bezier(0.22, 1.12, 0.36, 1)
    var(--reveal-delay, 0s);
}

/* Se superponen apenas: con estas rotaciones, más solape hace que las
   esquinas se coman el texto de la tarjeta vecina. */
.metodologia__card + .metodologia__card {
  margin-top: var(--space-2);
}
/* Orden de apilado: Comunidad sobre Conexión, y Conexión sobre
   Creatividad (o sea, la primera adelante). */
.metodologia__card:nth-child(1) { z-index: 3; }
.metodologia__card:nth-child(2) { z-index: 2; }
.metodologia__card:nth-child(3) { z-index: 1; }

/* Aterrizada: baja a su lugar y conserva la rotación. */
.metodologia__card.is-in-view {
  transform: translateY(0) rotate(var(--card-rot));
}

/* En hover se endereza y pasa al frente. El delay se anula: el
   enderezado tiene que ser inmediato, no heredar el de la entrada. */
.metodologia__card:hover,
.metodologia__card:focus-within {
  z-index: 4; /* la que está en hover siempre al frente */
  transform: translateY(0) rotate(0deg);
  transition-delay: 0s;
}

.metodologia__card-title {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: clamp(1.4rem, 2vw, 2.4rem);
  line-height: 1.1;
  color: var(--color-text-dark);
}
/* El cuadrado del lenguaje de marca, igual que en botones y menú. */
.metodologia__card-title::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  flex: 0 0 auto;
  background: currentColor;
}

.metodologia__card p {
  margin-top: var(--space-2);
  font-size: clamp(0.85rem, 1.5vh, 1.05rem);
  line-height: 1.45;
  color: var(--color-text-dark);
}

/* ---------------------------------------------------------
   RESPONSIVE
   En mobile las tarjetas se enderezan y dejan de superponerse: rotadas y
   pisándose no se leen en una columna angosta.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .metodologia__puzzle {
    max-width: 150px;
    margin-bottom: var(--space-4);
  }
  .metodologia__card {
    --card-rot: 0deg;
  }
  .metodologia__card + .metodologia__card {
    margin-top: var(--space-2);
  }
}