/* =========================================================
   Fondo de vídeo del hero — «el mar detrás del cristal»
   ---------------------------------------------------------
   El vídeo es la costa de Almería al amanecer: luz muy alta,
   cielo crema y mar gris azulado. Por eso NO se oscurece ni se
   pasa el texto a blanco (el tópico); se hace al revés: un velo
   del propio --bg del sitio protege la columna del titular y se
   abre hacia la derecha, donde el mar queda a la vista detrás de
   la tarjeta de flujo, que pasa a ser cristal.

   Depende de las variables de styles.css (--bg, --text, --line).
   ========================================================= */

.hero { isolation: isolate; padding-bottom: clamp(56px, 8vw, 110px); }

/* ---------- la capa de imagen ---------- */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}

.hero-media video,
.hero-media .hero-media-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 62% baja el encuadre: deja el horizonte alto y conserva el
     promontorio de la derecha, que es donde se apoya la tarjeta. */
  object-position: 50% 62%;
  /* El original viene lavadísimo; sin este empujón el mar desaparece
     bajo el velo y el fondo parece un degradado sin más. */
  filter: saturate(1.08) contrast(1.10) brightness(1);
}

/* El MP4 trae letterbox incrustado: 18 filas negras arriba y 18 abajo
   (1024x576 declarados, 1024x540 de imagen real; cosa de WhatsApp).
   object-fit no sabe de esas barras porque son píxeles del vídeo, así que
   asomaban como una franja gris bajo la cabecera. Se amplía lo justo para
   echarlas fuera del recorte: 576/540 = 1.067, más un pelín de margen.
   El póster ya se guardó recortado, así que a él no se le aplica. */
.hero-media video {
  transform: scale(1.075);
  transform-origin: center center;
}

.hero-media .hero-media-fallback {
  display: none;
  background: center / cover no-repeat url("/assets/video/hero-fondo-poster.jpg");
}

/* ---------- el velo: tres degradados, todos claros ---------- */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* 1. horizontal: blinda la columna del titular, abre a la derecha */
    linear-gradient(100deg,
      var(--bg) 0%,
      rgba(244, 248, 252, .93) 18%,
      rgba(244, 248, 252, .60) 40%,
      rgba(244, 248, 252, .18) 64%,
      rgba(244, 248, 252, .06) 100%),
    /* 2. arriba: separa la imagen de la cabecera blanca */
    linear-gradient(180deg, rgba(244, 248, 252, .72) 0%, rgba(244, 248, 252, 0) 20%),
    /* 3. abajo: el hero se disuelve en la sección siguiente en vez de cortarse */
    linear-gradient(0deg, var(--bg) 0%, rgba(244, 248, 252, .70) 9%, rgba(244, 248, 252, 0) 28%);
}

/* El resplandor azul original sobra: con imagen detrás, ensucia el cielo. */
.hero-glow { display: none; }

/* ---------- la tarjeta de flujo, ahora cristal ---------- */
.flow-card {
  background: rgba(255, 255, 255, .74);
  border-color: rgba(255, 255, 255, .85);
  box-shadow:
    0 28px 60px -32px rgba(15, 40, 64, .55),
    0 2px 10px -4px rgba(15, 40, 64, .12);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .flow-card {
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
  }
}

/* Los pasos de dentro también se aclaran, o el cristal se ve sucio. */
.flow-step { background: rgba(255, 255, 255, .55); }

/* ---------- las insignias, legibles sobre la imagen ---------- */
.hero-trust-badges .badge {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(255, 255, 255, .9);
}

/* ---------- móvil ----------
   A pantalla estrecha, «cover» sobre un hero altísimo recorta una tira
   vertical del 15% central del plano: se pierde la composición entera y
   queda una banda sin sentido. Así que aquí el vídeo deja de ser fondo
   completo y pasa a ser una FRANJA DE HORIZONTE anclada arriba, que se
   disuelve antes de que empiece el titular. El titular cae sobre fondo
   limpio, que es lo que necesita un texto de cinco líneas.            */
@media (max-width: 860px) {
  .hero-media {
    height: clamp(230px, 42vw + 130px, 340px);
    bottom: auto;                 /* deja de estirarse hasta abajo */
  }

  .hero-media video,
  .hero-media .hero-media-fallback { object-position: 50% 52%; }

  .hero-media::after {
    background:
      /* velo suave arriba, para separar de la cabecera */
      linear-gradient(180deg,
        rgba(244, 248, 252, .58) 0%,
        rgba(244, 248, 252, .34) 26%,
        rgba(244, 248, 252, .40) 55%,
        rgba(244, 248, 252, .90) 80%,
        /* opaco del todo ANTES del borde: si el degradado llega justo al
           100%, el redondeo deja una costura de 1px al acabar la franja */
        var(--bg) 93%,
        var(--bg) 100%);
  }
}

/* ---------- accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
  .hero-media .hero-media-fallback { display: block; }
}