/* VOU — Fondo del header en la página de contacto (Quiero asesoría)
   La página se renderiza con React en un único <section class="pt-32 pb-24">,
   por eso el fondo NO se aplica a la sección completa (estiraría la imagen),
   sino a una banda superior dibujada con ::before, detrás del texto.
   Imagen: vou-contacto-header-background.jpg (2000x672). */

.min-h-screen.bg-background > section.pt-32 {
  position: relative;
}

.min-h-screen.bg-background > section.pt-32::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Banda con la misma proporción que la imagen (672/2000) */
  height: clamp(20rem, calc(100vw * 672 / 2000), 34rem);
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      90deg,
      #000 0%,
      rgba(0, 0, 0, 0.85) 12%,
      rgba(0, 0, 0, 0.4) 34%,
      rgba(0, 0, 0, 0.08) 55%,
      rgba(0, 0, 0, 0.15) 74%,
      rgba(0, 0, 0, 0.6) 92%,
      #000 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.1) 32%,
      rgba(0, 0, 0, 0.45) 78%,
      #000 100%
    ),
    url('/lovable-uploads/vou-contacto-header-background.png');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center center;
  background-size: cover, cover, cover;
}

/* El contenido (título, subtítulo, formulario) siempre sobre la banda */
.min-h-screen.bg-background > section.pt-32 > .container {
  position: relative;
  z-index: 1;
  /* Mismos márgenes laterales que el resto del sitio (.casos-container / navbar):
     gutter 1rem (móvil) / 8rem (desktop) y ancho máximo 1400px. */
  max-width: none;
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--vou-gutter, 1rem);
}

@media (min-width: 1400px) {
  .min-h-screen.bg-background > section.pt-32 > .container {
    max-width: var(--vou-content-max, 1400px);
  }
}

/* Ocultar el enlace "Volver" (primer bloque del container) */
.min-h-screen.bg-background > section.pt-32 > .container > div.mb-12:first-child {
  display: none;
}

/* Título "Contacto" con la misma proporción que casos (evitar que sea muy grande) */
.min-h-screen.bg-background > section.pt-32 h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.min-h-screen.bg-background > section.pt-32 > .container > .max-w-4xl > p {
  font-size: clamp(0.95rem, 1.8vw, 1.125rem) !important;
}

/* En tablet/desktop el texto del header va alineado a la izquierda,
   pero coincidiendo con el borde izquierdo de las cards de abajo.
   Las cards usan .max-w-7xl (80rem) centrado, así que el header usa la
   misma región para que "Contacto" y el subtítulo queden al margen de las cards. */
@media (min-width: 768px) {
  .min-h-screen.bg-background > section.pt-32 > .container > .max-w-4xl {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-width: 80rem; /* = max-w-7xl de las cards */
  }

  /* El subtítulo mantiene un ancho legible, alineado a la izquierda */
  .min-h-screen.bg-background > section.pt-32 > .container > .max-w-4xl > p {
    max-width: 46rem;
  }
}

/* En tablet/móvil la banda es más alta (el texto ocupa más) y la foto
   se corre a la derecha para mantener visible a la persona. */
@media (max-width: 1023px) {
  .min-h-screen.bg-background > section.pt-32::before {
    height: clamp(16rem, 38vh, 24rem);
    background-position: center, center, 82% center;
    background-size: cover, cover, cover;
  }

  /* Espacios más compactos en móvil */
  .min-h-screen.bg-background > section.pt-32 {
    padding-top: 7.5rem;   /* despeja el navbar fijo sin dejar tanto vacío */
    padding-bottom: 3rem;
  }

  /* Menos separación entre el bloque de título y el formulario */
  .min-h-screen.bg-background > section.pt-32 > .container > .max-w-4xl {
    margin-bottom: 2.5rem;
  }

  /* Título y subtítulo un poco más juntos */
  .min-h-screen.bg-background > section.pt-32 h1 {
    margin-bottom: 1rem;
  }
  .min-h-screen.bg-background > section.pt-32 > .container > .max-w-4xl > p {
    margin-bottom: 0;
  }
}