/* ============================================================
   GRULLA ESTUDIO — Método (S02)
   ============================================================ */


/* ------------------------------------------------------------
   Section
   ------------------------------------------------------------ */

.metodo {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--sp-16), 11vh, var(--sp-24));
}


/* ------------------------------------------------------------
   Background photo — faded, no competing with content
   ------------------------------------------------------------ */

.metodo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.metodo__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}


/* ------------------------------------------------------------
   Container — two columns
   ------------------------------------------------------------ */

.metodo__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: grid;
  grid-template-columns: clamp(300px, 34%, 460px) 1fr;
  gap: clamp(var(--sp-8), 4vw, var(--sp-14));
  align-items: center;
}


/* ------------------------------------------------------------
   Left column — text
   ------------------------------------------------------------ */

.metodo__overline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-charcoal);
  line-height: 1.5;
  margin-bottom: var(--sp-5);
}

.metodo__overline strong {
  font-weight: 700;
}

.metodo__headline {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.metodo__headline strong {
  font-weight: 700;
}


/* ------------------------------------------------------------
   Right column
   ------------------------------------------------------------ */

.metodo__right {
  position: relative;
  padding: clamp(40px, 6vw, 72px) clamp(10px, 3vw, 32px);
}


/* ------------------------------------------------------------
   Decorative elements
   ------------------------------------------------------------ */

.metodo__deco-estrella {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(72px, 8vw, 120px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  transform: translate(10%, -25%);
}

.metodo__deco-circle {
  position: absolute;
  bottom: 0;
  left: clamp(60px, 12vw, 140px);
  width: clamp(90px, 10vw, 140px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  transform: translateY(18%);
}


/* ------------------------------------------------------------
   Cards stack — fan layout

   Sin borde contenedor. Las tarjetas flotan libremente
   con drop-shadow propio.
   ------------------------------------------------------------ */

.metodo__cards {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.metodo__card + .metodo__card {
  margin-left: clamp(-100px, -11vw, -120px);
}


/* ------------------------------------------------------------
   Card base
   ------------------------------------------------------------ */

.metodo__card {
  position: relative;
  flex: 0 0 clamp(210px, 22vw, 268px);
  width: clamp(210px, 22vw, 268px);
  height: clamp(268px, 30vw, 358px);
  padding: clamp(var(--sp-5), 2.5vw, var(--sp-8));
  display: flex;
  flex-direction: column;
  transform: var(--card-rot, none);
  transition:
    transform var(--ease-normal),
    filter var(--ease-normal);
  cursor: default;
}

/* Icon — top-right */
.metodo__card-icon {
  display: block;
  width: clamp(72px, 8vw, 110px);
  height: auto;
  align-self: flex-end;
  flex-shrink: 0;
}

/* Flexible space between icon and title */
.metodo__card-spacer {
  flex: 1;
}

.metodo__card-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}

.metodo__card--negocio .metodo__card-title {
  font-weight: 400;
}

.metodo__card-title strong {
  font-weight: 700;
  display: block;
}

.metodo__card-body {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.1vw, var(--text-base));
  font-weight: 400;
  line-height: 1.55;
}


/* ------------------------------------------------------------
   Card 1 — Dorada (amarillo cálido, atrás izquierda)

   Chamfer grande en esquina inferior izquierda (55px).
   Esquinas normales con chamfer pequeño (10px) → parecen redondeadas.
   ------------------------------------------------------------ */

.metodo__card--negocio {
  --card-rot: rotate(-8deg) translateY(18px);
  background-color: var(--color-gold);
  color: var(--color-white);
  z-index: 1;
  clip-path: polygon(
    0 10px, 10px 0,
    calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    55px 100%, 0 calc(100% - 55px)
  );
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.18));
}

.metodo__card--negocio:hover {
  --card-rot: rotate(-4deg) translateY(9px);
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.24));
  z-index: 5;
}


/* ------------------------------------------------------------
   Card 2 — Lima (adelante, frente)

   Chamfer grande en esquina inferior derecha (55px).
   ------------------------------------------------------------ */

.metodo__card--foco {
  --card-rot: rotate(0deg);
  background-color: var(--color-lime);
  color: var(--color-black);
  z-index: 3;
  clip-path: polygon(
    0 10px, 10px 0,
    calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 55px), calc(100% - 55px) 100%,
    10px 100%, 0 calc(100% - 10px)
  );
  filter: drop-shadow(0 12px 36px rgba(0, 0, 0, 0.20));
}

.metodo__card--foco:hover {
  --card-rot: translateY(-6px);
  filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.24));
  z-index: 5;
}


/* ------------------------------------------------------------
   Card 3 — Negra (detrás derecha)

   Chamfer grande en esquina superior derecha (55px).
   ------------------------------------------------------------ */

.metodo__card--creatividad {
  --card-rot: rotate(6deg) translateY(18px);
  background-color: var(--color-black);
  color: var(--color-white);
  z-index: 2;
  clip-path: polygon(
    0 10px, 10px 0,
    calc(100% - 55px) 0, 100% 55px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px)
  );
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.30));
}

.metodo__card--creatividad .metodo__card-body {
  color: rgba(255, 255, 255, 0.72);
}

.metodo__card--creatividad:hover {
  --card-rot: rotate(3deg) translateY(9px);
  filter: drop-shadow(0 16px 44px rgba(0, 0, 0, 0.36));
  z-index: 5;
}


/* ------------------------------------------------------------
   Scroll reveal — animation (no transition) para opacity,
   así animation-delay funciona correctamente y las tarjetas
   aparecen en secuencia sin ghost text por bleed-through.
   El hover usa transition de transform/filter por separado.
   ------------------------------------------------------------ */

@keyframes metodoCardFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {

  .metodo__card.anim-on-scroll {
    opacity: 0;
    transform: var(--card-rot, none);
    /* Solo animamos transform/filter en hover — opacity lo maneja @keyframes */
    transition:
      transform var(--ease-normal),
      filter var(--ease-normal);
  }

  .metodo__card.anim-on-scroll.is-visible {
    /* fill-mode: both mantiene opacity 0 durante el delay y 1 al terminar */
    animation: metodoCardFadeIn 180ms ease-out both;
    animation-delay: var(--anim-delay, 0ms);
    opacity: 1;
    transform: var(--card-rot, none);
  }

}


/* ------------------------------------------------------------
   Tablet (768–1023px)
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1023px) {

  .metodo__inner {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--sp-10);
  }

  .metodo__headline {
    font-size: clamp(2rem, 5.5vw, 3rem);
  }

  .metodo__card {
    height: clamp(240px, 32vw, 320px);
  }

  .metodo__card + .metodo__card {
    margin-left: clamp(-80px, -9vw, -96px);
  }

  .metodo__deco-estrella {
    width: clamp(56px, 7vw, 88px);
  }

}


/* ------------------------------------------------------------
   Mobile (<768px) — tarjetas compactas en layout de grid interno
   ------------------------------------------------------------ */

/* Ocultar hint en desktop/tablet */
.metodo__swipe-hint { display: none; }

@media (max-width: 767px) {

  .metodo {
    padding-block: var(--sp-12) var(--sp-10);
  }

  .metodo__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }

  .metodo__headline {
    font-size: clamp(2rem, 9.5vw, 2.75rem);
  }

  .metodo__right {
    padding: 0;
  }

  /* Stack vertical con gap mínimo */
  .metodo__cards {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .metodo__card + .metodo__card {
    margin-left: 0;
  }

  /* Cada card usa grid interno:
     col 1 (flex): título arriba + cuerpo abajo
     col 2 (fijo): ícono alineado al top-right
  */
  .metodo__card {
    flex: none;
    width: 100%;
    height: auto;
    --card-rot: none;
    clip-path: none;
    border-radius: 16px;

    display: grid;
    grid-template-columns: 1fr 52px;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: var(--sp-3);
    row-gap: var(--sp-2);
    padding: var(--sp-5);
  }

  /* Ícono → columna 2, fila 1 */
  .metodo__card-icon {
    grid-column: 2;
    grid-row: 1;
    width: 52px;
    align-self: start;
  }

  /* Spacer no aporta en layout compacto */
  .metodo__card-spacer {
    display: none;
  }

  /* Título → columna 1, fila 1 */
  .metodo__card-title {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(1.25rem, 5.5vw, 1.625rem);
    line-height: 1.15;
    margin-bottom: 0;
    align-self: center;
  }

  /* Cuerpo → fila 2, ambas columnas */
  .metodo__card-body {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    line-height: 1.55;
  }

  .metodo__card--negocio  { filter: drop-shadow(0 3px 12px rgba(0,0,0,0.12)); }
  .metodo__card--foco     { filter: drop-shadow(0 3px 12px rgba(0,0,0,0.12)); }
  .metodo__card--creatividad { filter: drop-shadow(0 3px 12px rgba(0,0,0,0.18)); }

  .metodo__card--negocio:hover,
  .metodo__card--foco:hover,
  .metodo__card--creatividad:hover { --card-rot: none; }

  .metodo__deco-estrella,
  .metodo__deco-circle { display: none; }

}