/**
 * about.css — Estilos de la sección About (about-section.component.tsx).
 *
 * Depende de: tokens.css y components/horizontal-scroll.css (mecanismo).
 * Aquí solo vive lo específico de la sección: fondo, leyenda, título y galería.
 *
 * Los estilos de .about-title / .about-legend / .about-slider del Astro se
 * portaron 1:1 (los transform 3D identidad del original se simplifican a
 * translateZ(0): mismo efecto — capa propia + contexto de apilamiento).
 */

/* Fondo de toda la sección (bg-tertiary del TSX) */
.lm-about {
  background: var(--tertiary);
}

/* ==========================================================================
   Overlay: leyenda + título
   ========================================================================== */
.lm-about__overlay {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 7rem 2.75rem; /* py-28 px-11 */
  max-width: 90svw;
  margin: 0 auto;
}

/* Leyenda: párrafo + CTA en grid, alineada a la derecha */
.lm-about__legend {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr; /* adaptación mobile (el TSX no la definía) */
  gap: 1.5rem;
  margin-left: auto;
  transform: translateZ(0);
  transform-style: preserve-3d;
}
.lm-about__legend p {
  color: var(--on-tertiary);
  font-size: 1.125rem; /* text-lg */
  font-weight: 400;
  line-height: 135%;
  margin: 0;
}

.lm-about__cta {
  padding: 0 2rem; /* px-8 */
  height: 3.5rem; /* h-14 */
  justify-self: start;
  background: var(--on-tertiary);
  color: var(--tertiary);
  font-family: var(--font-text);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 9999px;
  border: 1px solid transparent; /* reserva el borde del hover (sin salto) */
  cursor: pointer;
  pointer-events: auto; /* reactiva clics dentro del overlay */
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}
.lm-about__cta:hover {
  border-color: var(--secondary);
  color: var(--secondary);
}

/* Título gigante (.about-title del Astro) */
.lm-about__title {
  position: relative;
  z-index: 0; /* queda detrás de la leyenda (z-20) */
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-style: normal;
  font-weight: 600;
  line-height: 95%;
  color: var(--primary);
  transform: translateZ(0);
  transform-style: preserve-3d;
  /* Adaptación mobile (el original solo contemplaba escritorio);
     los valores exactos del Astro se restauran en el breakpoint md. */
  font-size: clamp(3rem, 13vw, 7.75rem);
  margin: -2rem 0 0;
}

/* ==========================================================================
   Track: galería horizontal
   ========================================================================== */
.lm-about__slider {
  display: flex;
  align-items: center;
  gap: 2rem; /* gap-8 */
  padding: 0 2rem; /* px-8 */
  height: 100%;
  flex: auto;
  position: relative;
  z-index: 10;
  margin-top: 12rem; /* baja la galería para despejar el título */
  transform: translateZ(0);
  transform-style: preserve-3d;
}

/* Espaciadores para que la galería arranque después del título */
.lm-about__spacer {
  flex-shrink: 0;
}
.lm-about__spacer--start {
  width: 50vw;
}
.lm-about__spacer--end {
  width: 10vw;
}

.lm-about__item {
  flex-shrink: 0;
}

/* Marco de la imagen: píldora (esquinas suaves) o círculo */
.lm-about__picture {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: none;
  width: 70vw; /* base mobile (el TSX solo definía lg) */
  height: auto;
}
.lm-about__picture--pill {
  border-radius: calc(var(--radius) - 4px); /* rounded-sm */
}
.lm-about__picture--round {
  border-radius: 9999px;
}

.lm-about__picture img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1); /* ease-out 700ms */
}
.lm-about__picture:hover img {
  transform: scale(1.1);
}

/* ==========================================================================
   Breakpoints (md 768 / lg 1024)
   ========================================================================== */
@media (min-width: 768px) {
  .lm-about__legend {
    grid-template-columns: 41.625rem min-content; /* grid del TSX */
    column-gap: 2rem; /* gap-x-8 */
  }
  .lm-about__title {
    font-size: 7.75rem; /* valores exactos del .about-title original */
    margin-top: -7.5rem;
  }
  .lm-about__slider {
    gap: 4rem; /* md:gap-16 */
  }
  .lm-about__spacer--start {
    width: 60vw; /* md:w-[60vw] */
  }
}

@media (min-width: 1024px) {
  .lm-about__slider {
    padding: 0 5rem; /* lg:px-20 */
  }
  .lm-about__picture {
    width: 24vw; /* lg:w-[24vw] */
  }
}