/* Sección hero (igual estilo de páginas internas) */
.lm-hero--page {
  padding: 6rem 0 3rem;
  text-align: center;
}
.lm-hero--page .lm-hero__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
}
.lm-hero--page .lm-hero__subtitle {
  margin-top: .5rem;
  opacity: .8;
}

/* Layout about: coherente con Contacto (grid 2 columnas) */
.about-wrap {
  padding: 3rem 0 5rem;
}
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr; /* ajustado para video vertical */
  gap: 2rem;
  align-items: start;
}
@media (max-width: 960px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

.about-copy {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 1.5rem;
}
.about-title {
  margin: 0 0 1rem 0;
  font-size: 1.6rem;
  letter-spacing: .01em;
}

/* Video derecha - FORMATO REEL (9:16) */
.about-media { 
  display: grid; 
  gap: .75rem; 
  justify-items: center; /* centra el video vertical */
}
.about-video-wrap {
  position: relative;
  background: #000;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  aspect-ratio: 9 / 16;            /* FORMATO REEL: 9:16 */
  width: 100%;
  max-width: 300px;                 /* ancho máximo para no ser demasiado ancho */
}
.about-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* mantiene proporción y llena el contenedor */
}
.about-caption {
  text-align: center;               /* centra el texto del caption */
}
.about-caption h3 {
  margin: 0 0 .25rem 0;
}
.about-caption p {
  margin: 0;
  opacity: .85;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .about-video-wrap {
    max-width: 250px;               /* más pequeño en móviles */
  }
  .about-grid {
    gap: 1.5rem;
  }
}

/* Pequeñas mejoras de tipografía */
.lead {
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Fondo blanco solo para esta página */
body {
  background: #fff !important;
  color: #111; /* asegura contraste en textos */
}