/* ==========================================================
   HERO · portada con foto y diagonales
   ========================================================== */

.hero { min-height: 100vh; display: flex; align-items: center; padding: 110px 0 120px; overflow: hidden; }
.hero .wrap { position: relative; z-index: 3; width: 100%; }   /* por encima de las franjas (z-index 2) */

.hero-grid { display: grid; grid-template-columns: minmax(0, .45fr) minmax(0, .55fr); column-gap: 56px; align-items: center; }
.hero-text { display: flex; flex-direction: column; align-items: flex-start; }

.hero h1 { font-size: clamp(2.8rem, 6.2vw, 5.2rem); margin: .15em 0 .35em; }
.hero-familia { font: 400 2rem/1.1 var(--font-title); text-transform: uppercase; color: var(--color-cream); margin: .2em 0 .9rem; }

.hero .foto-frame { transform: rotate(-2deg); }
.hero .foto-frame .foto { aspect-ratio: 4/3; }
.hero-photo .kicker { margin: 1.6rem 0 0; color: var(--color-silver); text-align: center; }

@media (max-width: 900px) {
  .hero-grid { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-text { display: contents; }
  .hero-text > .hero-kicker, .hero-text > h1 { order: 1; }
  .hero-photo { order: 2; align-self: stretch; margin: 1.6rem 0 1.4rem; }
  .hero-text > :not(.hero-kicker):not(h1) { order: 3; }
  .hero { padding-top: 96px; }
}

.hero-badge {
  display: inline-block;
  background: var(--color-yellow);
  color: var(--color-black);
  font-weight: 700;
  font-size: .85rem;
  padding: .35em 1em;
  margin: 1.2rem 0;
  transform: skewX(-8deg);
}
.hero-disciplinas { font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-cream); font-weight: 600; }
.hero-note { margin-top: 1.4rem; font-size: .9rem; }

/* Diagonales con parallax (data-parallax) */
.hero-diag { position: absolute; left: -5%; width: 110%; height: 70px; z-index: 2; pointer-events: none; }
.hero-diag.hero-diag-red { bottom: 20px; background: var(--color-accent); clip-path: polygon(0 60%, 100% 0, 100% 40%, 0 100%); }
.hero-diag.hero-diag-silver { bottom: 0; background: var(--color-silver); clip-path: polygon(0 80%, 100% 30%, 100% 42%, 0 100%); }