/**
 * promesa.css — Estilos de la sección Nuestra Promesa (NuestraPromesa.tsx).
 *
 * Depende de: tokens.css. Las entradas fadeUp usan inview.js:
 * [data-lm-inview] arranca oculto y .is-inview lo revela; el delay por
 * elemento llega en la variable --d (inline en el markup, valores del TSX).
 */

/* ==========================================================================
   Sección
   ========================================================================== */
.lm-promesa {
  position: relative;
  overflow: hidden;
  background: var(--tertiary);
  color: var(--on-tertiary);
  padding: 5rem 0; /* py-20 */
}

/* Glow decorativo (tintes de tertiary-container y primary, del TSX) */
.lm-promesa__glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(157, 230, 221, 0.14),
      transparent 26rem
    ),
    radial-gradient(
      circle at 88% 82%,
      rgba(249, 226, 135, 0.12),
      transparent 24rem
    );
}

.lm-promesa__container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 85svw;
  margin: 0 auto;
  padding: 0 1.5rem; /* px-6 */
}

.lm-promesa__grid {
  display: grid;
  align-items: center;
  gap: 2.5rem; /* gap-10 */
}

/* ==========================================================================
   Ilustración + badge
   ========================================================================== */
.lm-promesa__media {
  position: relative;
  order: 2; /* en mobile la foto va después del contenido */
}

.lm-promesa__frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  border-radius: 2rem; /* rounded-4xl */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
}
.lm-promesa__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  transition: transform 1.2s cubic-bezier(0, 0, 0.2, 1); /* duration-[1.2s] ease-out */
}
.lm-promesa__frame:hover img {
  transform: scale(1.05);
}

/* Degradado inferior sobre la foto (from-tertiary/45 → transparente) */
.lm-promesa__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--tertiary) 45%, transparent),
    transparent 50%
  );
}

/* Sticker badge flotante */
.lm-promesa__badge {
  position: absolute;
  bottom: -1.25rem; /* -bottom-5 */
  right: -0.75rem; /* -right-3 */
  display: flex;
  align-items: center;
  gap: 0.625rem; /* gap-2.5 */
  border-radius: 9999px;
  background: var(--primary);
  padding: 0.75rem 1.25rem; /* py-3 px-5 */
  color: var(--on-primary-container);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
}
.lm-promesa__badge svg {
  display: block;
}
.lm-promesa__badge span {
  font-family: var(--font-text);
  font-size: 0.75rem; /* text-xs */
  font-weight: 800; /* font-extrabold */
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ==========================================================================
   Contenido
   ========================================================================== */
.lm-promesa__content {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Kicker con línea */
.lm-promesa__kicker {
  margin-bottom: 1.5rem; /* mb-6 */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--tertiary-container);
}
.lm-promesa__kicker-line {
  height: 1px;
  width: 2rem; /* w-8 */
  background: color-mix(in srgb, var(--tertiary-container) 70%, transparent);
}

/* Cita */
.lm-promesa__quote {
  position: relative;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.875rem; /* text-3xl */
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.025em; /* tracking-wide */
  color: var(--on-tertiary);
}
.lm-promesa__quote svg {
  display: block;
  margin-bottom: 0.75rem; /* mb-3 */
  color: color-mix(in srgb, var(--tertiary-container) 80%, transparent);
}

.lm-promesa__body {
  margin: 1.75rem 0 0; /* mt-7 */
  max-width: 36rem; /* max-w-xl */
  font-family: var(--font-text);
  font-size: 1rem; /* text-base */
  line-height: 1.625; /* leading-relaxed */
  color: color-mix(in srgb, var(--on-tertiary) 80%, transparent);
}

/* Métricas */
.lm-promesa__stats {
  margin: 2.25rem 0 0; /* mt-9 */
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.5rem; /* gap-x-10 */
  row-gap: 1.5rem; /* gap-y-6 */
  border-top: 1px solid color-mix(in srgb, var(--on-tertiary) 15%, transparent);
  padding-top: 1.75rem; /* pt-7 */
}
.lm-promesa__stat {
  display: flex;
  flex-direction: column;
}
.lm-promesa__stat dt {
  order: 2;
  margin-top: 0.25rem; /* mt-1 */
  font-family: var(--font-text);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--on-tertiary) 65%, transparent);
}
.lm-promesa__stat dd {
  order: 1;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 2.25rem; /* text-4xl */
  line-height: 1;
  color: var(--primary);
}

/* CTA con flecha deslizante */
.lm-promesa__cta {
  margin-top: 2.5rem; /* mt-10 */
  display: inline-flex;
  height: 3.5rem; /* h-14 */
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  border-radius: 9999px;
  background: var(--on-tertiary);
  padding: 0 2rem; /* px-8 */
  font-family: var(--font-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.025em; /* tracking-wide */
  color: var(--tertiary);
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.lm-promesa__cta:hover {
  background: var(--primary);
  color: var(--on-primary-container);
}
.lm-promesa__cta svg {
  transition: transform 0.3s ease;
}
.lm-promesa__cta:hover svg {
  transform: translateX(0.25rem); /* group-hover:translate-x-1 */
}

/* ==========================================================================
   Entradas fadeUp (inview.js) — duración/easing/y exactos del TSX;
   el delay por elemento llega en --d (inline en el markup).
   ========================================================================== */
.lm-promesa [data-lm-inview] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.lm-promesa [data-lm-inview].is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Breakpoints (md 768 / lg 1024)
   ========================================================================== */
@media (min-width: 768px) {
  .lm-promesa {
    padding: 7rem 0; /* md:py-28 */
  }
  .lm-promesa__container {
    padding: 0 2rem; /* md:px-8 */
  }
  .lm-promesa__grid {
    grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    gap: 3.5rem; /* md:gap-14 */
  }
  .lm-promesa__media {
    order: 1; /* md:order-1 (foto a la izquierda) */
  }
  .lm-promesa__content {
    order: 2;
  }
  .lm-promesa__frame {
    border-radius: 2.5rem; /* md:rounded-[2.5rem] */
  }
  .lm-promesa__badge {
    right: -1.5rem; /* md:-right-6 */
  }
  .lm-promesa__quote {
    font-size: 2.25rem; /* md:text-4xl */
  }
  .lm-promesa__stat dd {
    font-size: 3rem; /* md:text-5xl */
  }
}

@media (min-width: 1024px) {
  .lm-promesa__grid {
    gap: 5rem; /* lg:gap-20 */
  }
  .lm-promesa__quote {
    font-size: 2.85rem; /* lg:text-[2.85rem] */
  }
}

/* ==========================================================================
   Accesibilidad: movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lm-promesa [data-lm-inview] {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .lm-promesa__frame img,
  .lm-promesa__cta svg {
    transition: none;
  }
}