/* ---------- Sección con imagen lateral ---------- */
/* .split es una .row de Bootstrap (g-5 align-items-center) con dos columnas
   col-lg-*: el ancho de cada lado se elige en el HTML y bajo lg (992px) se
   apilan solas. La imagen va en un .split-img dentro de su columna. */
.split-img { overflow: hidden; aspect-ratio: 4/3; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
/* Borde difuminado hacia el texto, en el lado que corresponda según el orden. */
.split > :first-child .split-img {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 12%);
  mask-image: linear-gradient(to left, transparent 0%, black 12%);
}
.split > :last-child .split-img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%);
  mask-image: linear-gradient(to right, transparent 0%, black 12%);
}
/* Frase destacada dentro de la columna de texto (Quiénes somos). */
.split__quote { font-family: var(--ff-titulo); font-style: italic; color: var(--petroleo-oscuro); font-size: 1.1rem; }
.split h2 { font-size: 2rem; }
.split .lead { color: var(--texto-suave); }

/* Variante sin el borde desvanecido: la foto se ve entera, con su recorte
   limpio (sección "Cuidamos cada detalle..." del inicio). */
.split--sin-fundido > :first-child .split-img,
.split--sin-fundido > :last-child .split-img {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Variante sin difuminado y con borde (Servicios). */
.split--no-fade .split-img {
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra);
}
.split--no-fade > * .split-img {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Variante "tarjeta": toda la sección lleva el borde redondeado, la imagen
   queda a ras (sin difuminado ni radio propio) recortada por el overflow. */
.split--card {
  margin-left: 0;
  margin-right: 0;
  background: var(--crema-2);
  border-radius: 28px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.split--card > div:first-child { padding: 24px; }
.split--card .split-img { aspect-ratio: auto; height: 100%; }
.split--card .split-img {
  -webkit-mask-image: none;
  mask-image: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
}