/* ============================================================
   06 · COMPONENTS · Hero
   Above-the-fold split (text + portrait) with grid + glow accents.
   ============================================================ */

.c-hero {
  position: relative;
  min-height: min(calc(100svh - 110px), 820px);
  padding-top: 18px;
  padding-bottom: 24px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.c-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(10, 10, 15, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 15, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 40%, #000 30%, transparent 80%);
}

.c-hero__glow {
  position: absolute;
  width: 900px;
  height: 900px;
  top: -250px;
  right: -180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 94, 213, 0.5), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  animation: ch-floaty 16s ease-in-out infinite;
}

.c-hero__inner {
  padding-top: 144px;
  width: 100%;
}

.c-hero__top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.c-hero__bottom {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 0;
}

@media (max-width: 900px) {
  .c-hero__bottom {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.c-hero__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.c-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.2vw, 76px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin-bottom: 14px;
}

/* On phones the rotator reserves the width of its widest word, so the title
   line ("contenido con resultados") would overflow and get clipped on the
   right. Scale the headline down so it always fits the viewport. */
@media (max-width: 600px) {
  .c-hero__title { font-size: clamp(22px, 7vw, 34px); }
}

.c-hero__title-row { display: block; }

.c-hero__title-outline {
  -webkit-text-stroke: 1.5px var(--text);
  color: transparent;
  font-style: italic;
  font-weight: 700;
}

.c-hero__sub {
  color: var(--text-2);
  font-size: clamp(15px, 1.25vw, 18px);
  max-width: 48ch;
  line-height: 1.4;
  margin-bottom: 16px;
}

.c-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.c-hero__meta {
  color: var(--text-3);
  font-size: 12.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.c-hero__portrait {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop);
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 420px;
  max-height: min(52vh, 460px);
  min-height: 300px;
  justify-self: end;
  display: flex;
}

@media (max-width: 900px) {
  .c-hero__portrait {
    justify-self: stretch;
    max-width: 100%;
    max-height: 60vh;
    min-height: 280px;
  }
}

.c-hero__portrait-fill {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(30, 94, 213, 0.35), transparent 55%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(10, 10, 15, 0.04) 14px 15px);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

.c-hero__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
  box-shadow: var(--glow);
}

.c-hero__portrait-meta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  z-index: 2;
}