/* Home 01 · Hero de portada (variantes C, B y A) */
.me-hero { position: relative; background: var(--me-color-bg); overflow: hidden; }
.me-hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.me-hero__copy { max-width: 880px; margin-inline: auto; text-align: center; }

.me-hero__h1 {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 1.25rem;
  font-family: var(--me-font-body);
  font-size: var(--me-fs-kicker);
  font-weight: var(--me-fw-semibold);
  line-height: 1.45;
  letter-spacing: var(--me-ls-kicker);
  text-transform: uppercase;
  color: var(--me-ui-azul-tinta);
  text-wrap: balance;
}
/* Centrado y en varias líneas, la raya va arriba y no a un costado */
.me-hero--c .me-hero__h1, .me-hero--b .me-hero__h1 { flex-direction: column; gap: .85rem; }

.me-hero__title {
  margin: 0 0 1.25rem;
  font-family: var(--me-font-heading);
  font-size: var(--me-fs-display);
  font-weight: var(--me-fw-bold);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--me-color-text);
  text-wrap: balance;
}
.me-hero__lead { max-width: 62ch; margin: 0 auto 2rem; font-size: var(--me-fs-lead); color: var(--me-color-muted); }

/* --- C: franja a todo el ancho bajo el texto --- */
.me-hero__strip { padding-inline: var(--me-gutter); }
.me-hero__strip-video,
.me-hero__strip-fotos { max-width: 1440px; margin-inline: auto; }
.me-hero__strip-video video { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--me-radius-lg) var(--me-radius-lg) 0 0; }
.me-hero__strip-fotos { display: grid; gap: .75rem; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.me-hero__strip-fotos .me-media { aspect-ratio: 4 / 3; border-radius: var(--me-radius) var(--me-radius) 0 0; }
.me-hero__strip-fotos--1 .me-media { aspect-ratio: 21 / 9; }
.me-hero__strip-fotos--pendiente .me-ph { aspect-ratio: auto; height: clamp(220px, 26vw, 380px); border-radius: var(--me-radius-lg) var(--me-radius-lg) 0 0; border-bottom: 0; }
@media (max-width: 767px) {
  .me-hero__strip-fotos { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-hero__strip-fotos--1, .me-hero__strip-fotos--pendiente { grid-template-columns: 1fr; }
  .me-hero__strip-fotos--pendiente .me-ph { height: 240px; }
}

/* --- B: media a pantalla completa con el texto encima --- */
.me-hero--b { min-height: min(88vh, 820px); display: grid; align-items: center; background: var(--me-color-negro); }
.me-hero__bg { position: absolute; inset: 0; z-index: 0; }
.me-hero__bg .me-hero__bgmedia,
.me-hero__bg .me-media,
.me-hero__bg video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.me-hero__bg .me-ph { height: 100%; aspect-ratio: auto; border-radius: 0; border: 0; place-items: end start; padding: 1.25rem var(--me-gutter); }
/* En la B el aviso de material pendiente va como etiqueta en la esquina: al centro
   quedaría detrás de la caja del texto y se mezclaría con el titular. */
.me-hero__bg .me-ph__label {
  position: relative; z-index: 2; max-width: none;
  padding: .45rem .9rem; border-radius: var(--me-radius-pill);
  background: var(--me-color-blanco); color: var(--me-color-text); font-size: .8125rem;
}
/* Oscurecido parejo + un poco más arriba, donde va el header transparente */
.me-hero--b .me-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 30%), linear-gradient(var(--me-color-overlay), var(--me-color-overlay));
}
.me-hero--b .me-hero__copy {
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--me-radius-lg);
}
/* Con video o foto: sin tarjeta, texto blanco directo sobre la imagen oscurecida (pedido del
   equipo, 1-oct). El header va transparente encima (base.css), así que el hero empieza en el
   borde superior y deja arriba el alto del header. */
/* Alto 20 % menor que antes (pedido del equipo, 1-oct): el mínimo × .8 y menos relleno
   interno, para que el contenido no lo estire (sin video no hay etiqueta abajo que reservar). */
.me-hero--b:not(.me-hero--puntos) {
  padding-top: var(--me-spacer-h);
  min-height: calc((min(88vh, 820px) + var(--me-spacer-h) / 2) * .8);
}
.me-hero--b:not(.me-hero--puntos) .me-hero__inner { padding-block: clamp(1rem, 2vw, 1.5rem); }
.me-hero--b:not(.me-hero--puntos) .me-hero__lead { font-size: clamp(.97rem, 1.2vw, 1.125rem); }
@media (max-width: 767px) {
  /* En celular el alto lo pone el texto: se acortan los espacios entre bloques para llegar al −20 % */
  .me-hero--b:not(.me-hero--puntos) .me-hero__h1 { margin-bottom: .9rem; }
  .me-hero--b:not(.me-hero--puntos) .me-hero__title { margin-bottom: 1rem; }
  .me-hero--b:not(.me-hero--puntos) .me-hero__lead { margin-bottom: 1.25rem; }
}
.me-hero--b:not(.me-hero--puntos) .me-hero__copy { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.me-hero--b:not(.me-hero--puntos) :is(.me-hero__title, .me-hero__h1) { color: var(--me-color-blanco); }
.me-hero--b:not(.me-hero--puntos) .me-hero__lead { color: rgba(255, 255, 255, .92); }
.me-hero--b:not(.me-hero--puntos) .me-btn--ghost { border-color: var(--me-color-blanco); color: var(--me-color-blanco); }
.me-hero--b:not(.me-hero--puntos) .me-btn--ghost:hover { background: var(--me-color-blanco); color: var(--me-color-negro); }
.me-hero--b .me-hero__title { font-size: var(--me-fs-h1); }
/* Espacio bajo la caja para la etiqueta de material pendiente (en móvil la caja ocupa casi todo el alto) */
.me-hero--b .me-hero__inner { padding-bottom: clamp(5.5rem, 10vw, 6rem); }

/* --- A: dos columnas --- */
.me-hero--a .me-hero__copy { text-align: left; margin-inline: 0; }
.me-hero--a .me-hero__lead { margin-inline: 0; }
.me-hero__side .me-media,
.me-hero__side video,
.me-hero__side .me-ph { aspect-ratio: 4 / 3; border-radius: var(--me-radius-lg); }
.me-hero__side video { width: 100%; object-fit: cover; }
.me-hero--a .me-hero__side { margin-top: var(--me-space-block); }
@media (min-width: 1025px) {
  .me-hero--a .me-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  .me-hero--a .me-hero__side { margin-top: 0; }
  .me-hero--a .me-hero__title { font-size: var(--me-fs-h1); }
}


/* B · fondo de prueba: blanco con una mancha de puntos animados (colores del isotipo).
   La máscara da la forma de mancha orgánica e irregular: unión de 5 lóbulos elípticos suaves
   de distinto tamaño; ninguno pasa del borde del hero, así no queda cortada en línea recta. */
.me-hero--puntos { background: var(--me-color-bg); }   /* crema de la página (22-oct) */
.me-hero--puntos .me-hero__bg::after { display: none; }   /* sin el oscurecido del video */
.me-hero__bg--puntos .me-puntos {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: radial-gradient(ellipse 44% 40% at 50% 50%, black 60%, transparent 100%), radial-gradient(ellipse 24% 22% at 26% 30%, black 50%, transparent 100%), radial-gradient(ellipse 26% 22% at 74% 70%, black 50%, transparent 100%), radial-gradient(ellipse 20% 18% at 74% 22%, black 45%, transparent 100%), radial-gradient(ellipse 18% 20% at 28% 78%, black 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 44% 40% at 50% 50%, black 60%, transparent 100%), radial-gradient(ellipse 24% 22% at 26% 30%, black 50%, transparent 100%), radial-gradient(ellipse 26% 22% at 74% 70%, black 50%, transparent 100%), radial-gradient(ellipse 20% 18% at 74% 22%, black 45%, transparent 100%), radial-gradient(ellipse 18% 20% at 28% 78%, black 45%, transparent 100%);
}
.me-hero--puntos .me-hero__copy {
  background: var(--me-color-blanco);
  border: 1px solid var(--me-color-border);
  box-shadow: var(--me-shadow-lift);
}
@media (max-width: 767px) {
  /* Móvil: la tarjeta tapa casi todo el hero; se agrega alto arriba y abajo para que la
     mancha se vea más (pedido del equipo, 1-oct). La máscara llega más cerca de los bordes
     de arriba y abajo para aprovechar ese alto. */
  .me-hero--puntos .me-hero__inner { padding-block: 7.5rem 7.5rem; }
  .me-hero__bg--puntos .me-puntos {
    -webkit-mask-image: radial-gradient(ellipse 48% 44% at 50% 50%, black 62%, transparent 100%), radial-gradient(ellipse 30% 20% at 36% 22%, black 50%, transparent 100%), radial-gradient(ellipse 30% 20% at 64% 80%, black 50%, transparent 100%), radial-gradient(ellipse 22% 16% at 74% 30%, black 45%, transparent 100%), radial-gradient(ellipse 20% 16% at 26% 70%, black 45%, transparent 100%);
    mask-image: radial-gradient(ellipse 48% 44% at 50% 50%, black 62%, transparent 100%), radial-gradient(ellipse 30% 20% at 36% 22%, black 50%, transparent 100%), radial-gradient(ellipse 30% 20% at 64% 80%, black 50%, transparent 100%), radial-gradient(ellipse 22% 16% at 74% 30%, black 45%, transparent 100%), radial-gradient(ellipse 20% 16% at 26% 70%, black 45%, transparent 100%);
  }
}