/* ===================================================================
   hero.css — bloque de encabezado principal
   Variantes: imagen_derecha · imagen_abajo · fondo_completo ·
              centrado_sin_imagen
   =================================================================== */

.hero { overflow: hidden; }

.hero__rejilla {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}

.hero__texto { max-width: 34rem; }

.hero__titulo {
  font-size: clamp(var(--paso-4), 5.2vw, var(--paso-6));
  font-stretch: 112%;            /* Archivo tiene eje de ancho: se abre un poco */
  margin-block: var(--e-4) 0;
}

.hero__subtitulo {
  font-size: var(--paso-1);
  line-height: 1.55;
  color: var(--tenue);
  margin-top: var(--e-5);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}

/* ── Medio ─────────────────────────────────────────────────────── */

.hero__medio { position: relative; }

.hero__imagen {
  width: 100%;
  border-radius: var(--radio-medio);
  border: var(--borde);
}

/* La captura de un sistema se lee mejor apoyada que flotando: una
   línea de acento abajo a la izquierda la ancla sin marco decorativo. */
.hero__medio::after {
  content: '';
  position: absolute;
  left: calc(var(--e-4) * -1);
  bottom: calc(var(--e-4) * -1);
  width: 45%;
  height: 3px;
  background: var(--color-acento);
}

.hero__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radio-medio);
}

/* ── Variante: imagen a la derecha (por defecto) ───────────────── */

.hero--imagen_derecha .hero__rejilla {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/* ── Variante: imagen abajo ────────────────────────────────────── */

.hero--imagen_abajo .hero__rejilla { grid-template-columns: 1fr; }
.hero--imagen_abajo .hero__texto {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.hero--imagen_abajo .hero__acciones { justify-content: center; }
.hero--imagen_abajo .hero__medio { max-width: 980px; margin-inline: auto; }
.hero--imagen_abajo .hero__medio::after { display: none; }

/* ── Variante: centrado sin imagen ─────────────────────────────── */

.hero--centrado_sin_imagen .hero__rejilla { grid-template-columns: 1fr; }
.hero--centrado_sin_imagen .hero__texto {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.hero--centrado_sin_imagen .hero__acciones { justify-content: center; }
.hero--centrado_sin_imagen .hero__titulo {
  font-size: clamp(var(--paso-5), 6vw, 4.6rem);
}

/* ── Variante: fondo completo ──────────────────────────────────── */

.hero--fondo_completo { display: grid; }
.hero--fondo_completo > * { grid-area: 1 / 1; }

.hero--fondo_completo .hero__rejilla { grid-template-columns: 1fr; }
.hero--fondo_completo .hero__texto { max-width: 38rem; }

.hero__fondo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(11, 37, 69, .94) 0%,
    rgba(11, 37, 69, .82) 45%,
    rgba(11, 37, 69, .35) 100%
  );
}

.hero--fondo_completo .bloque__contenido {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
}

/* ── Patrón de lotificación ────────────────────────────────────
   El elemento firma. Es el dibujo del que vive el producto: la
   traza de un fraccionamiento, en línea delgada y desvanecida.
   Se apaga desde el admin para clientes de otro giro.            */

.hero__patron {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--color-secundario);
  opacity: .13;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 72%);
          mask-image: linear-gradient(to left, #000 0%, transparent 72%);
}

.fondo--oscuro .hero__patron,
.hero--fondo_completo .hero__patron {
  color: var(--color-acento);
  opacity: .16;
}

.hero--centrado_sin_imagen .hero__patron {
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 25%, #000 78%);
          mask-image: radial-gradient(ellipse at center, transparent 25%, #000 78%);
}

/* ── Entrada ───────────────────────────────────────────────────
   Una sola secuencia al cargar, escalonada. Nada de efectos
   sueltos por elemento.                                          */

@media (prefers-reduced-motion: no-preference) {
  .hero__texto > * {
    animation: hero-entra 620ms cubic-bezier(.2, .7, .3, 1) backwards;
  }
  .hero__texto > *:nth-child(1) { animation-delay:  60ms; }
  .hero__texto > *:nth-child(2) { animation-delay: 140ms; }
  .hero__texto > *:nth-child(3) { animation-delay: 220ms; }
  .hero__texto > *:nth-child(4) { animation-delay: 300ms; }
  .hero__medio { animation: hero-entra 700ms 260ms cubic-bezier(.2,.7,.3,1) backwards; }
}

@keyframes hero-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── Responsivo ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero--imagen_derecha .hero__rejilla { grid-template-columns: 1fr; }
  .hero--imagen_derecha .hero__texto { max-width: none; }
  .hero__medio::after { display: none; }
  .hero--fondo_completo .bloque__contenido { min-height: 58vh; }
  .hero__velo {
    background: linear-gradient(
      180deg, rgba(11,37,69,.9) 30%, rgba(11,37,69,.7) 100%);
  }
}

@media (max-width: 600px) {
  .hero__acciones { flex-direction: column; align-items: stretch; }
  .boton { justify-content: center; }
}