/* Cabecera de área — template-parts/components/area-hero.php
   El color entra por --area / --area-ink (los pone la plantilla desde data-area). */

.area-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--c-bg-dark);
  color: var(--c-text-inv);
}

.area-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(85vh, 56rem);
  padding-block: var(--sp-7);
}

/* ---------- Foto de fondo a sangre (area-hero--bg, El Parque) ---------- */
.area-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: 66vw;
  right: 0;
  top: 0;

  left: auto;
  bottom: auto;
}

.area-hero__bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(90% 72.62% at 64% 29%, rgba(5, 12, 64, 0) 0%, var(--c-bg-dark) 100%);
}

.area-hero__bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--c-bg-dark) 0%, rgb(28 32 77 / .35) 60%, transparent 100%);
}

.area-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.area-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(28 32 77 / .85) 0%, rgb(28 32 77 / .35) 60%, transparent 100%);
}

/* ---------- Texto ---------- */
.area-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  width: min(100%, 42rem);
}

.area-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.area-hero__iso {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--area);
}

.area-hero__title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-h1);
}

.area-hero__title strong {
  font-weight: var(--fw-semibold);
  color: var(--area);
}

.area-hero__text {
  max-width: 36rem;
  font-size: var(--fs-md);
  opacity: .9;
}

/* Lista de enlaces con icono, sobre caja tenue */
.area-hero__links {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
  padding: var(--sp-4);
  list-style: none;
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / .05);
}

.area-hero__link {
  gap: var(--sp-3);
  font-size: var(--fs-md);
  color: inherit;
}

.area-hero__link-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

.area-hero__link-icon>* {
  width: 100%;
  height: 100%;
}

.area-hero__link .btn-arrow__icon {
  color: var(--area);
}

/* ---------- Foto con máscara del isotipo ----------
   Como en el prototipo: el isotipo es grande, ocupa la mitad derecha y se sale
   por arriba, por abajo y por la derecha; la sección lo recorta (overflow: clip). */
.area-hero__media {
  position: absolute;
  top: 50%;
  right: -14vw;
  margin: 0;
  width: clamp(34rem, 50vw, 66rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  z-index: -1;
}

.area-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.area-hero__media::before {
  /* velo navy para que el bloque no compita con el texto */
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(28 32 77 / .6);
}

.area-hero__media::after {
  /* degradado hacia el color del área, abajo a la derecha */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, color-mix(in srgb, var(--area) 70%, transparent) 100%);
  mix-blend-mode: screen;
}

@media (max-width: 60rem) {
  .area-hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-5);
    min-height: 0;
    padding-block: var(--sp-5) var(--sp-6);
  }

  .area-hero__media {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    width: min(100%, 24rem);
    margin-inline: auto;
    transform: none;
  }

  .area-hero__title {
    font-size: var(--fs-2xl);
  }
}

/* ---------- Variante «bg» (El Parque): prefijo en negrita blanca, resto en azul; enlaces sin caja ---------- */
.area-hero__lead {
  color: inherit;
}

.area-hero__accent {
  color: var(--area);
  font-weight: var(--fw-regular);
}

.area-hero--bg .area-hero__content {
  max-width: 46rem;
}

.area-hero--bg .area-hero__links {
  padding: 0;
  background: none;
}
/* En la variante «bg» (El Parque, La Fundación) el kicker va solo en texto, como en la publicada */
.area-hero--bg .area-hero__iso { display: none; }
.area-hero--bg .area-hero__kicker { font-weight: var(--fw-regular); letter-spacing: .2em; font-size: var(--fs-xs); opacity: .7; }