/* ==========================================================================
   hero.css · Portada: presentación, terminal, foto, cifras y fondo 3D
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
  padding-block: var(--space-6);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}

/* Halo ámbar detrás del contenido */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  z-index: 0;
  width: min(720px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 65%);
  pointer-events: none;
}

/* ---------- Fondo 3D (canvas insertado por assets/js/chip3d.js) ---------- */
.hero__bg3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* El <canvas> se estiliza en assets/css/sections/chip3d.css */

/* ---------- Rejilla principal ---------- */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  grid-template-areas:
    "content media"
    "stats stats";
  align-items: center;
  column-gap: var(--space-7);
  row-gap: var(--space-6);
}

.hero__content {
  grid-area: content;
  min-width: 0;
}

.hero__media {
  grid-area: media;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 360px;
}

.hero__stats {
  grid-area: stats;
}

/* ---------- Texto ---------- */
/* .eyebrow (base.css) da la fuente mono, el tamaño, las mayúsculas y el tracking */
.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  color: var(--accent);
}

.hero__tag::before {
  content: "";
  width: var(--space-5);
  height: 1px;
  background: var(--accent);
  box-shadow: var(--glow-strong);
}

.hero__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.hero__hello {
  display: block;
  color: var(--text-main);
}

.hero__name {
  display: block;
  color: var(--accent);
  background: linear-gradient(100deg, var(--accent-bright), var(--accent) 55%, var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__lead {
  max-width: 60ch;
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-lg);
}

.hero__lead strong {
  color: var(--text-main);
  font-weight: 500;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__btn-icon {
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}

@media (hover: hover) {
  .hero__actions .btn--primary:hover .hero__btn-icon {
    transform: translateX(3px);
  }

  .hero__actions .btn--ghost:hover .hero__btn-icon {
    transform: translateY(2px);
  }
}

/* ---------- Mini terminal ---------- */
.hero__terminal {
  max-width: 560px;
  margin-top: var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.hero__term-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-panel-strong);
}

.hero__term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-deep);
}

.hero__term-dot:nth-child(2) {
  background: var(--accent);
}

.hero__term-dot:nth-child(3) {
  background: var(--accent-bright);
}

.hero__term-title {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.hero__term-body {
  /* Reserva dos líneas para que el cambio de frase no mueva la página */
  min-height: calc(2 * 1.6em + 2 * var(--space-4));
  padding: var(--space-4);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.hero__term-prompt {
  color: var(--accent);
  font-weight: 700;
}

.hero__term-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hero__term-key {
  color: var(--accent-bright);
}

.hero__term-op {
  color: var(--text-muted);
}

.hero__term-val {
  color: var(--text-main);
}

.hero__term-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  box-shadow: var(--glow-strong);
  /* Parpadeo finito (WCAG 2.2.2): al acabar queda visible y fijo */
  animation: hero-blink 1s steps(1, end) 6;
}

@keyframes hero-blink {
  50% {
    opacity: 0;
  }
}

/* ---------- Foto ---------- */
.hero__photo-frame {
  position: relative;
  width: 100%;
  padding: 6px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--accent-soft), transparent 60%);
  box-shadow: var(--glow), var(--glow-strong);
}

/* Esquinas tipo marca de alineación */
.hero__photo-frame::before,
.hero__photo-frame::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--accent);
  pointer-events: none;
}

.hero__photo-frame::before {
  top: -10px;
  left: -10px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: var(--radius-sm);
}

.hero__photo-frame::after {
  right: -10px;
  bottom: -10px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: var(--radius-sm);
}

.hero__photo {
  width: 100%;
  border-radius: calc(var(--radius-lg) - 6px);
  object-fit: cover;
}

/* "Buscando prácticas": aspecto de .pill (base.css) */
.hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: var(--glow-strong);
  animation: hero-pulse 2.4s var(--ease) 2;
}

@keyframes hero-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.7);
    opacity: 0.55;
  }
}

/* ---------- Cifras ---------- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
}

/* .card (base.css) da padding, borde, radio, fondo y la transición
   `var(--t-hover), var(--t-reveal)` (.card.reveal). No son enlaces: sin hover. */
.hero__stat {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.hero__stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

/* Aparición escalonada */
.hero__stat:nth-child(2) {
  --reveal-delay: 0.1s;
}

.hero__stat:nth-child(3) {
  --reveal-delay: 0.2s;
}

.hero__stat-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
}

.hero__stat-label {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

/* ---------- Responsive ---------- */
@media (width < 960px) {
  .hero__bg3d {
    display: none;
  }

  .hero {
    padding-block: var(--space-6) var(--space-7);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "content"
      "stats";
    row-gap: var(--space-6);
  }

  .hero__media {
    max-width: 220px;
  }

  .hero__terminal {
    max-width: none;
  }
}

@media (width < 720px) {
  .hero__stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .hero__stat {
    display: grid;
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-4);
  }

  .hero__stat-value {
    font-size: var(--fs-lg);
  }

  .hero__stat-label {
    margin-top: 0;
  }
}

@media (width < 480px) {
  .hero__media {
    max-width: 180px;
  }

  .hero__lead {
    font-size: var(--fs-base);
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__stat {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__term-cursor,
  .hero__badge-dot {
    animation: none;
  }
}