/* ==========================================================================
   SECCIÓN: HERO
   ========================================================================== */

.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(56,189,248,.22), transparent 60%),
    radial-gradient(700px 500px at 0% 110%, rgba(45,212,191,.14), transparent 60%),
    var(--ink);
  color: var(--text-on-dark);
  padding-top: calc(var(--header-h) + var(--space-7));
  padding-bottom: var(--space-8);
}
.hero::before { /* grilla sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.hero__grid {
  position: relative; display: grid; gap: var(--space-7); align-items: center;
}
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.35fr .65fr; } }

.hero__title { font-size: var(--fs-hero); font-weight: 800; margin-bottom: var(--space-5); }
.hero__title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { font-size: var(--fs-lg); color: var(--text-on-dark-soft); max-width: 620px; margin-bottom: var(--space-6); }
.hero__lead strong { color: #fff; font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Retrato */
.portrait { position: relative; width: min(100%, 340px); margin-inline: auto; aspect-ratio: 4 / 5; }
.portrait__frame {
  position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait__fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 5rem; letter-spacing: -.04em;
  color: rgba(255,255,255,.14);
}
.portrait::after { /* halo */
  content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 32px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); opacity: .35; filter: blur(34px);
}
.portrait__badge {
  position: absolute; left: -14px; bottom: 28px; z-index: 2;
  background: var(--surface); color: var(--text); border-radius: 14px; padding: .65rem .95rem;
  box-shadow: var(--shadow); font-size: var(--fs-xs); line-height: 1.35;
}
.portrait__badge strong { display: block; font-family: var(--font-display); font-size: .95rem; }

/* Franja de métricas */
.hero__stats {
  position: relative; margin-top: var(--space-8);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 760px) { .hero__stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: rgba(10,16,32,.7); padding: var(--space-5); }
.stat__num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: #fff; line-height: 1; }
.stat__num span { color: var(--accent); }
.stat__label { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-on-dark-soft); }

/* Empresas con las que trabajó */
.trust { margin-top: var(--space-6); text-align: center; }
.trust__label { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark-soft); margin-bottom: var(--space-3); }
.trust__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); }
.trust__list li { font-family: var(--font-display); font-weight: 700; color: rgba(232,238,251,.55); }

@media (max-width: 959px) {
  .hero__grid { gap: var(--space-6); }
  .portrait { width: 220px; margin-inline: 0; }
  .portrait__badge { left: auto; right: -40px; }
}