/* Módulo hero (portada). Artboard 1440: sección de 760px, texto a la izquierda
   y, a la derecha, el chevron amarillo (873×760) con la pareja encima. */

.m-hero {
  --m-hero-tracking: var(--tracking-tight); /* tracking −20 del PDF */
  /* En el PDF el arte (morado, foto, chevron, pareja) va de y=−10 a 750: la
     foto sube 10px y los 10px de abajo quedan en blanco antes de la sección 2. */
  --m-hero-cut: min(.625rem, .694vw);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  clip-path: inset(0 0 var(--m-hero-cut));
  display: flex;
  align-items: center;
  min-height: min(47.5rem, 52.78vw);   /* 760px a 1440, proporcional por debajo */
  /* Abajo un poco más: el bloque queda en el centro óptico, como en el diseño */
  padding-block: var(--space-6) calc(var(--space-6) + var(--space-1));
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.m-hero__bg {
  position: absolute;
  inset: 0;
  top: calc(-1 * var(--m-hero-cut));  /* con height: 100% no se reescala el cover */
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;       /* las uniones de la foto quedan tras el chevron */
}

.m-hero__inner { position: relative; z-index: 1; }

/* Título: Medium blanco en mayúsculas; remate Bold amarillo. Por debajo de 1440
   escala con el arte (4.445vw = 64px a 1440) para no tocar el chevron. */
.m-hero__title {
  max-width: 10em;                    /* corta tras «DEMOCRACIA» */
  font-size: min(var(--text-display), 4.445vw);
  font-weight: var(--weight-medium);
  letter-spacing: var(--m-hero-tracking);
  color: var(--color-on-dark);
  text-transform: uppercase;
}
.m-hero__title .section-title__accent { font-weight: var(--weight-bold); }

.m-hero__text,
.m-hero__actions { max-width: min(37rem, 47vw - 1rem); } /* no pisa a la pareja entre 1088 y 1440 */

.m-hero__text { margin-top: var(--space-3); }

.m-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.m-hero__cta-alt { min-width: min(16.125rem, 100%); } /* 258px */
/* El anillo global usa currentColor: en el botón amarillo sería morado sobre la foto morada */
.m-hero .btn:focus-visible { outline-color: var(--color-on-dark); }

/* Arte: caja 873×760 anclada abajo a la derecha; chevron + pareja en % de la caja */
.m-hero__art {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  aspect-ratio: 873.3 / 760;
}
.m-hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  clip-path: polygon(0 -1.32%, 42.88% 65%, 20.29% 100%, 77.06% 100%, 100% 64.28%, 57.39% -0.96%);
}
.m-hero__img {
  position: absolute;
  left: 11.94%;
  bottom: 0;
  width: 85.77%;
}

/* Más de 1440: el fondo crece con el ancho; el arte sigue a las uniones de la
   foto (59.82% del ancho) para que queden tapadas por la pareja y el chevron,
   como en el PDF. min() lo mantiene dentro si hay barra de scroll (873px = 54.58rem). */
@media (min-width: 90rem) {
  .m-hero__art { right: auto; left: min(100% - 54.58rem, 59.82% - 18.42rem); }
}

/* Tablet y móvil: texto arriba, arte debajo (la pareja apoyada en el borde inferior) */
@media (max-width: 67.99rem) {
  .m-hero {
    --m-hero-cut: 0px;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-block: var(--space-6) 0;
  }
  /* Velo morado tras el texto: aquí no hay diseño y la foto tiene zonas claras */
  .m-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;                      /* sobre .m-hero__bg (va después en el DOM), bajo el contenido */
    background: linear-gradient(color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 65%);
  }
  .m-hero__title { font-size: var(--text-display); }
  .m-hero__text,
  .m-hero__actions { max-width: 37rem; }

  .m-hero__art {
    position: relative;
    width: min(100%, 40rem);
    height: auto;
    margin-top: var(--space-4);
    margin-left: auto;
  }
  /* El borde superior recto quedaría a media sección: el brazo de arriba acaba
     en un corte perpendicular a su diagonal */
  .m-hero__art::before {
    clip-path: polygon(20.96% 31.1%, 42.88% 65%, 20.29% 100%, 77.06% 100%, 100% 64.28%, 57.39% 0);
  }
}

@media (max-width: 47.99rem) {
  .m-hero { padding-top: var(--space-5); }
  .m-hero__actions { flex-direction: column; }
  .m-hero__actions .btn { width: 100%; }
}

/* ==========================================================
   Variante «interior» (páginas internas): banda de 606px y chevron
   apuntando a la izquierda. Caja del arte 883×804 del diseño, pegada
   al borde derecho; la foto de fondo (1920×806) encaja justa.
   ========================================================== */
.m-hero--interior {
  --m-hero-cut: 0px;                   /* aquí el arte no se sale de la banda */
  min-height: min(37.875rem, 42.08vw); /* 606px a 1440 */
}
.m-hero--interior .m-hero__art { aspect-ratio: 883 / 804; }
.m-hero--interior .m-hero__art::before { scale: -1 1; } /* mismo chevron, espejado */
.m-hero--interior .m-hero__img { left: 4.2%; width: 86%; }

/* El arte empieza en x=776 (no en 683): título y párrafo tienen más sitio.
   Con 11em cabe «APRENDER Y ACTUAR» (672px) y con 41rem el párrafo va en una línea. */
.m-hero--interior .m-hero__title { max-width: min(11em, 48vw); }
.m-hero--interior .m-hero__text { max-width: min(41rem, 50vw); }

/* Aquí el chevron sí queda pegado al borde: no sigue a las uniones de la foto. */
@media (min-width: 90rem) {
  .m-hero--interior .m-hero__art { right: 0; left: auto; }
}

/* ==========================================================
   Variante «interior» con la figura apuntando a la DERECHA
   (Oferta Académica, Noticias y Recursos, Contacto). Misma banda de 606px
   que «interior», pero la caja del arte es la del diseño (649×605) y el
   chevron no se espeja. La persona se exporta ya encuadrada a esa caja.
   ========================================================== */
.m-hero--interior-der .m-hero__art { aspect-ratio: 649 / 605; }
.m-hero--interior-der .m-hero__art::before {
  scale: 1 1; /* anula el espejado de «interior» */
  clip-path: polygon(0 0, 45.89% 66.3%, 22.61% 100%, 76.38% 100%, 100% 65.58%, 54.45% .36%);
}
/* La figura va anclada a la derecha con la altura de la caja y el ancho lo decide el
   archivo, que se exporta con su aire hasta el borde derecho de la sección. Así cabe
   aunque asome por fuera del chevron (Contacto: la pareja arranca en x=669, 122px antes). */
.m-hero--interior-der .m-hero__img { left: auto; right: 0; width: auto; max-width: none; height: 100%; } /* max-width: el reset global la aplastaría a la caja */

/* Tablet y móvil: como en la portada, el brazo de arriba se corta perpendicular
   a su diagonal para que el borde superior no quede recto a media sección. */
@media (max-width: 67.99rem) {
  .m-hero--interior-der .m-hero__art::before {
    clip-path: polygon(22% 31.8%, 45.89% 66.3%, 22.61% 100%, 76.38% 100%, 100% 65.58%, 54.45% 0);
  }
  /* Apilada, la caja ocupa toda la pantalla: la figura no puede sobresalir por la
     izquierda, así que se ajusta al ancho y se apoya abajo. (width: auto no sirve:
     con srcset+sizes el ancho intrínseco pasa a ser el de «sizes», 549px.) */
  .m-hero--interior-der .m-hero__img { width: 100%; height: auto; }
}

/* Apilado no hay arte al lado que esquivar: los topes en vw de la variante
   interior (48vw del título, 50vw del texto) valen 187px a 390 y parten las
   palabras por la mitad. Va al final del archivo a propósito: comparte
   especificidad con las reglas de la variante y tiene que ganar por orden. */
@media (max-width: 67.99rem) {
  .m-hero--interior .m-hero__title { max-width: 11em; }
  .m-hero--interior .m-hero__text { max-width: 37rem; }
}

/* ==========================================================
   Variante «paneles» (Comunidad): sin chevron ni persona recortada. Dos fotos
   y la franja amarilla del borde son el MISMO paralelogramo de 471,8 × 604,7,
   colocado en x=700,3 · x=1015,4 · x=1330 del artboard.
   ========================================================== */
.m-hero--paneles {
  --m-hero-paralelogramo: polygon(33.6% 0, 100% 0, 66.4% 100%, 0 100%);
}
.m-hero--paneles .m-hero__art {
  inset: 0;
  right: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
/* La franja amarilla sale por el borde derecho; la corta el overflow de la sección. */
.m-hero--paneles .m-hero__art::before {
  inset: 0 auto 0 92.36%;
  width: 32.78%;
  scale: 1 1;
  clip-path: var(--m-hero-paralelogramo);
}
.m-hero--paneles .m-hero__panel {
  position: absolute;
  top: 0;
  width: 32.76%;
  height: 100%;
  object-fit: cover;
  clip-path: var(--m-hero-paralelogramo);
}
.m-hero--paneles .m-hero__panel--1 { left: 48.63%; }
.m-hero--paneles .m-hero__panel--2 { left: 70.51%; }

/* Los paneles arrancan en el 48,6%: el texto no puede pasar de ahí. */
/* El renglón más largo del diseño mide 625px y los paneles arrancan en x=700;
   a la altura del párrafo su borde en diagonal ya va por x≈730. */
.m-hero--paneles .m-hero__title { max-width: min(13em, 44vw); }
.m-hero--paneles .m-hero__text { max-width: min(40rem, 45vw); }

/* Apilado: los paneles pasan a una banda bajo el texto, uno al lado del otro. */
@media (max-width: 67.99rem) {
  .m-hero--paneles .m-hero__art {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: var(--space-4);
  }
  .m-hero--paneles .m-hero__art::before { content: none; }
  .m-hero--paneles .m-hero__panel { width: 56%; }
  .m-hero--paneles .m-hero__panel--1 { left: -6%; }
  .m-hero--paneles .m-hero__panel--2 { left: 44%; }
  .m-hero--paneles .m-hero__title { max-width: 11em; }
  .m-hero--paneles .m-hero__text { max-width: 37rem; }
}

/* ==========================================================
   Variante «interior_izq» (Aliados): figura apuntando a la izquierda, igual que
   «interior», pero con la geometría exacta del artboard — chevron de 692 × 603 en
   x=778 (se sale 30 por la derecha) y la persona de 552,1 en x=771,2. La persona
   se exporta recortada a esa caja, así que aquí solo se coloca en %.
   ========================================================== */
.m-hero--interior-izq .m-hero__art {
  inset: 0;
  right: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.m-hero--interior-izq .m-hero__art::before {
  inset: 0 auto 0 54.03%;  /* 778 / 1440 */
  width: 48.06%;           /* 692 / 1440 */
  scale: 1 1;              /* el polígono ya viene espejado */
  clip-path: polygon(100% 0, 57.1% 66.3%, 78.86% 100%, 22.08% 100%, 0 65.58%, 42.59% .36%);
}
.m-hero--interior-izq .m-hero__img {
  position: absolute;
  left: 53.56%;   /* 771,2 / 1440 */
  bottom: 0;
  width: 38.34%;  /* 552,1 / 1440 */
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

@media (max-width: 67.99rem) {
  .m-hero--interior-izq .m-hero__art {
    position: relative;
    height: auto;
    aspect-ratio: 692 / 603;
    margin-top: var(--space-4);
  }
  .m-hero--interior-izq .m-hero__art::before { inset: 0 auto 0 8%; width: 92%; }
  .m-hero--interior-izq .m-hero__img { left: 6%; width: 74%; }
}

/* Más de 1440: la caja se queda en los 1440 del diseño, pegada a la derecha. Si creciera
   con la pantalla (la banda no pasa de 606px), el chevron se estiraría y la persona, con
   object-fit: cover, perdería la cabeza. */
@media (min-width: 90rem) {
  .m-hero--interior-izq .m-hero__art { left: auto; right: 0; width: 90rem; }
}