/* ---------- Hero ---------- */
.hero {
  padding: 60px 0 70px;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
  align-items: center;
}
.hero h1 { font-size: 2.6rem; }
.hero p.lead { font-size: 1.05rem; color: var(--texto-suave); max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* ---------- Hero con imagen "sangrada" al borde derecho ----------
   La foto se extiende hasta el borde real de la ventana en vez de quedar
   encerrada en una caja. Por eso esta sección NO usa .container: es
   .hero-split-bleed directamente dentro de <section>. El texto ya NO se
   alinea con el margen de .container (dejaba un hueco enorme sin usar a
   la izquierda en pantallas anchas) — usa un margen fijo que aprovecha
   ese espacio, acorde al difuminado del lado izquierdo de la foto. */
.hero-split-bleed {
  display: grid;
  grid-template-columns: minmax(320px, 560px) 1fr;
  align-items: center;
  gap: 30px;
  padding: 36px 0 56px;
}
.hero-split-bleed-text {
  padding-left: clamp(24px, 6vw, 100px);
  padding-right: 24px;
}
.hero-split-bleed-text h1 { font-size: 2.35rem; }
.hero-divider { display: flex; align-items: center; gap: 14px; width: 220px; margin: 22px 0; color: var(--petroleo); }
.hero-divider span { flex: 1; height: 1px; background: var(--borde); }
.hero-divider i { font-size: 1.1rem; color: var(--dorado); }
.hero-split-bleed-media {
  aspect-ratio: 16/10;
  overflow: hidden;
  /* Borde izquierdo difuminado: la foto se desvanece hacia el fondo
     crema en vez de cortar en seco contra el texto. */
  /* --fundido: cuánto se desvanece el borde izquierdo de la foto hacia el
     texto (lo mueve la barra de la demo). */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black calc(var(--fundido, 12) * 1%));
  mask-image: linear-gradient(to right, transparent 0%, black calc(var(--fundido, 12) * 1%));
}

/* Variante para heros con poco texto (ej. Quiénes somos): con la proporción
   16/10 normal la imagen queda casi el doble de alta que el texto y se ve
   descompensado. Esta variante achica la imagen y centra el texto respecto
   a ella en vez de pegarlo arriba. */
.hero-split-bleed--compact { align-items: center; }
.hero-split-bleed--compact .hero-split-bleed-media { aspect-ratio: 16/9; }
.hero-split-bleed-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero con imagen de fondo a todo el ancho (banner) ---------- */
.hero-banner {
  position: relative;
  /* min-height y no height: con alto fijo, una página con más texto (el lead
     de Alianza con propietarios ocupa 3 líneas) deja el contenido apretado
     contra el header y contra el borde de abajo, y con un poco más llega a
     desbordar la caja. Así el banner crece lo que haga falta y conserva el
     aire del padding. */
  /* --banner-alto y --banner-encuadre los mueve la barra de la demo. */
  min-height: var(--banner-alto, 340px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-banner-media { position: absolute; inset: 0; z-index: 0; }
.hero-banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: center var(--banner-encuadre, 40%); }
.hero-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Velo en verde petróleo (no negro): la foto se integra con la paleta. */
  /* Velo en verde petróleo concentrado detrás del texto y desvanecido antes
     de la mitad: la parte derecha de la foto queda limpia (sin veladura), y
     el texto conserva contraste AA incluso sobre cielo o agua. Medido sobre
     los píxeles reales de cada banner, no a ojo. */
  /* --velo-rgb (color), --velo-fuerza (0 a 1) y --velo-ancho (% del ancho de
     la foto) son los tres valores que mueve la barra de la demo; los de acá
     son los aprobados. */
  background: linear-gradient(90deg,
    rgba(var(--velo-rgb), var(--velo-fuerza)) 0%,
    rgba(var(--velo-rgb), calc(var(--velo-fuerza) * 0.957)) calc(var(--velo-ancho) * 0.476%),
    rgba(var(--velo-rgb), calc(var(--velo-fuerza) * 0.63)) calc(var(--velo-ancho) * 0.69%),
    rgba(var(--velo-rgb), calc(var(--velo-fuerza) * 0.174)) calc(var(--velo-ancho) * 0.857%),
    rgba(var(--velo-rgb), 0) calc(var(--velo-ancho) * 1%));
}
.hero-banner-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  /* 48px arriba y abajo para que, cuando el banner tenga que crecer por el
     largo del texto, el contenido siga separado del header y del borde
     inferior en vez de quedar pegado. */
  padding: 48px 24px;
  padding-left: max(24px, calc((100vw - 1220px) / 2 + 24px));
  color: var(--blanco);
}
.hero-banner-copy-text { max-width: 560px; }
.hero-banner-copy .eyebrow { color: var(--crema-2); }
.hero-banner-copy h1 { color: var(--crema); font-size: 2.6rem; }
.hero-banner-copy p.lead { color: rgba(248, 245, 233, 0.9); font-size: 0.95rem; }
.hero-banner-copy .hero-actions { margin-top: 18px; }
/* Portada: título largo y foto protagonista, un poco más alto que el resto. */
.hero-banner--alto { min-height: var(--banner-alto, 460px); }
/* Encuadre propio de cada banner: qué franja de la foto se ve, elegida para que
   la escena entre completa y el texto no caiga sobre las personas. */
.hero-banner--inicio { --banner-encuadre: 67%; }
.hero-banner--alianza { --banner-encuadre: 22%; }
.hero-banner--quienes { --banner-encuadre: 70%; }
.hero-banner--servicios { --banner-encuadre: 55%; }
@media (min-width: 1200px) {
  /* El alto extra solo en escritorio: apilado, la franja de foto ya tiene el
     suyo y 470px taparían la pantalla del celular. */
  .hero-banner--quienes, .hero-banner--servicios { --banner-alto: 470px; }
}
.hero-banner--alto .hero-banner-copy-text { max-width: 620px; }
.hero-banner--alto h1 { font-size: 2.5rem; }
/* Sobre la foto, el divisor y la bajada de Contacto van en tonos claros. */
.hero-banner-copy .hero-divider span { background: rgba(248, 245, 233, 0.4); }
.hero-banner-copy .hero-divider i { color: var(--crema); }
.hero-banner-copy .contacto-subtitulo { color: var(--crema); }
/* Saltos de línea elegidos a mano en los titulares de banner, para que el
   texto no quede sobre las caras de las personas. Solo valen cuando el texto
   va encima de la foto: apilado, el texto fluye en su propio ancho. */
.br-banner { display: none; }
@media (min-width: 1200px) {
  .br-banner { display: inline; }
}
/* Las palabras destacadas del título: sobre la foto el azul petróleo se apaga,
   así que van en crema con un subrayado ocre. */
.hero-banner-copy h1 em {
  color: var(--crema);
  text-decoration: underline;
  text-decoration-color: var(--dorado);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.hero-banner-copy .btn-outline { border-color: var(--crema); color: var(--crema); }
.hero-banner-copy .btn-outline:hover { background: var(--crema); color: var(--petroleo-oscuro); }

/* Hasta 1200px el texto ocuparía casi todo el ancho de la foto y haría falta
   un velo pesado para leerlo. En vez de eso la foto va arriba y el texto
   debajo sobre el fondo crema: se lee perfecto y la foto se ve entera. El
   texto sobre la foto queda solo en escritorio ancho, donde hay lugar. */
@media (max-width: 1199.98px) {
  .hero-banner { display: block; min-height: 0; }
  /* Apilado: el alto que se ajusta es el de la franja de foto. */
  .hero-banner-media { position: relative; height: var(--banner-alto, clamp(230px, 32vw, 380px)); }
  /* Apilado: el alto lo manda la franja de la foto, no el banner entero. */
  .hero-banner { min-height: 0; }
  .hero-banner-media::after { background: linear-gradient(rgba(var(--velo-rgb), 0.08), rgba(var(--velo-rgb), 0.08)); }
  .hero-banner .hero-banner-copy { padding: 26px 20px 4px; color: var(--texto); }
  .hero-banner .hero-banner-copy h1 { color: var(--petroleo-oscuro); }
  .hero-banner .hero-banner-copy .eyebrow { color: var(--dorado-oscuro); background: none; padding: 0; }
  .hero-banner .hero-banner-copy p.lead { color: var(--texto-suave); }
  .hero-banner .hero-banner-copy .contacto-subtitulo { color: var(--petroleo); }
  .hero-banner .hero-banner-copy h1 em { color: var(--petroleo); text-decoration: none; }
  .hero-banner .hero-banner-copy .hero-divider span { background: var(--borde); }
  .hero-banner .hero-banner-copy .hero-divider i { color: var(--dorado); }
  .hero-banner--alto { min-height: 0; }
  .hero-banner .hero-banner-copy .btn-outline { border-color: var(--petroleo-oscuro); color: var(--petroleo-oscuro); }
}

.page-hero {
  padding: 50px 0 60px;
}
.page-hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.page-hero h1 { font-size: 2.3rem; }
.hero-split-bleed-text .lead, .page-hero .lead { color: var(--texto-suave); }
/* Bajada del título en Contacto ("De cómo podemos hacerte la vida más fácil"). */
.contacto-subtitulo {
  font-family: var(--ff-titulo);
  font-size: 1.35rem;
  font-weight: 600;
  /* petróleo claro sobre crema queda en 4.4:1 — justo por debajo de AA para
     este tamaño, así que la bajada usa el tono oscuro. */
  color: var(--petroleo-oscuro);
  margin: -6px 0 14px;
}
/* Variante sin imagen (FAQ, blog, testimoniales): antes esto era un
   style="grid-template-columns:1fr;text-align:center;" puesto en el <section>,
   que no tenía ningún efecto real porque el grid de 2 columnas está definido
   en .page-hero .container (el hijo), no en la section — a pantalla ancha el
   título quedaba apretado en la mitad izquierda en vez de centrado. */
.page-hero--centered .container { grid-template-columns: 1fr; text-align: center; }