/* ==========================================================================
   NEXOCORE — estilos propios de equipo.html
   Se carga DESPUES de nx.v1.css, que aporta tokens, base, botones, eyebrow,
   tag, footer y conmutador de tema. Aqui solo va lo que es de esta pagina.
   Para actualizarlo hay que renombrarlo (equipo.v2.css): /assets/css/* se
   sirve con cache immutable de un ano.
   ========================================================================== */

/* La nav de equipo es sticky y de ancho completo, no la pastilla flotante
   del index. */
.nx-eq-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: var(--surface-base);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
body.nx-scrolled .nx-eq-nav {
  background: var(--nav-scrolled, rgba(24,24,27,0.82));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
}
html[data-theme="light"] { --nav-scrolled: rgba(250,250,250,0.82); }

.nx-eq-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.nx-eq-brand:hover { text-decoration: none; color: inherit; }
.nx-eq-brand img { height: 28px; width: auto; display: block; }
/* Ver la nota en nx.v1.css: el isotipo va dentro de un <span class="nx-logo">,
   asi que hay que excluirlo o se estiliza y se oculta junto al texto. */
.nx-eq-brand > span:not(.nx-logo) {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 18px; letter-spacing: 0.02em; color: var(--text-primary);
}
.nx-eq-navright { display: flex; align-items: center; gap: 28px; }
.nx-eq-back {
  color: var(--text-secondary); font-size: 14px; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.nx-eq-back:hover { color: var(--text-primary); text-decoration: none; }

/* ------------------------------------------------------------------ HERO */
.nx-eq-hero { padding: 120px 40px 70px; border-bottom: 1px solid var(--border-subtle); }
.nx-eq-hero h1 {
  font-size: clamp(38px, 6vw, 84px); margin: 20px 0 0;
  letter-spacing: -0.035em; line-height: 1.02; max-width: 980px;
}
.nx-eq-hero p {
  margin: 28px 0 0; font-size: 19px; line-height: 1.6;
  color: var(--text-secondary); max-width: 620px;
}

/* -------------------------------------------------------------- FUNDADORES */
.nx-founders { padding: 20px 40px 40px; }
.nx-founder {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(32px, 6vw, 80px);
  padding: 72px 0; border-bottom: 1px solid var(--border-subtle);
}
/* En el DOM la foto va siempre primero, para que en movil aparezca arriba sin
   depender de ninguna regla. En escritorio, el segundo fundador invierte las
   columnas con `order`. */
.nx-founder--reverse .nx-founder-media { order: 2; }
.nx-founder--reverse .nx-founder-bio   { order: 1; }

.nx-founder-media {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.nx-portrait { position: relative; width: 260px; max-width: 100%; margin: 0 auto; flex-shrink: 0; }
.nx-portrait-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; }
.nx-founder-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  display: block; border-radius: 14px; background: #000;
}

/* Los dos corchetes del isotipo: mitad izquierda en un gris, mitad derecha en
   otro, recortadas con clip-path sobre el mismo PNG. */
.nx-isotype-frame { position: absolute; top: -26px; width: 38%; }
.nx-portrait--right .nx-isotype-frame { right: -50px; left: auto; }
.nx-portrait--left  .nx-isotype-frame { left: -50px; right: auto; }
.nx-isotype-frame img { display: block; width: 100%; height: auto; pointer-events: none; }
.nx-isotype-frame img[data-bracket="onyx"] {
  filter: brightness(0) saturate(100%) invert(65%);
  clip-path: inset(0 50% 0 0);
}
.nx-isotype-frame img[data-bracket="gray"] {
  position: absolute; inset: 0;
  filter: brightness(0) saturate(100%) invert(42%);
  clip-path: inset(0 0 0 50%);
}
/* El PNG es blanco: en modo claro hay que tenirlo o desaparece */
html[data-theme="light"] .nx-isotype-frame img[data-bracket="onyx"] {
  filter: brightness(0) saturate(100%) invert(9%) sepia(6%) saturate(500%) hue-rotate(201deg);
}
html[data-theme="light"] .nx-isotype-frame img[data-bracket="gray"] {
  filter: brightness(0) saturate(100%) invert(45%);
}

.nx-founder-index {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em;
  color: var(--accent); margin-top: 40px;
}
.nx-founder-media h2 {
  font-size: clamp(28px, 3.2vw, 46px); margin: 14px 0 6px;
  letter-spacing: -0.03em; line-height: 1.02;
}
.nx-founder-role {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--text-muted); margin-bottom: 22px;
}
.nx-founder-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.nx-founder-bio { max-width: 520px; margin-left: auto; text-align: left; }
.nx-founder--reverse .nx-founder-bio { margin-left: 0; margin-right: auto; text-align: right; }
.nx-founder-bio p {
  font-size: 18px; line-height: 1.7; color: var(--text-secondary);
  margin: 0 0 18px; position: relative; left: -100px;
}
.nx-founder-bio p:last-child { margin-bottom: 0; }
.nx-founder--reverse .nx-founder-bio p { left: 100px; }

/* ---------------------------------------------------------------- MISION */
.nx-mission {
  padding: 90px 40px 110px; background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}
.nx-mission-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.nx-mission-claim {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(26px, 3.6vw, 46px); letter-spacing: -0.02em;
  line-height: 1.15; margin: 26px 0 40px; color: var(--text-primary);
}
.nx-mission-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------- RASTRO DE CURSOR */
#nx-cursor-trail {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 250;
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 860px) {
  .nx-founder {
    grid-template-columns: 1fr; gap: 28px; padding: 56px 0;
  }
  /* Foto primero en las dos tarjetas */
  .nx-founder--reverse .nx-founder-media,
  .nx-founder--reverse .nx-founder-bio { order: 0; }
  .nx-founder-bio,
  .nx-founder--reverse .nx-founder-bio {
    max-width: 100%; margin: 0 auto; text-align: center;
  }
  .nx-founder-bio p,
  .nx-founder--reverse .nx-founder-bio p { left: 0; }

  .nx-portrait--right .nx-isotype-frame { right: -10px; width: 28%; }
  .nx-portrait--left  .nx-isotype-frame { left: -10px; width: 28%; }

  .nx-eq-nav { padding: 12px 16px; gap: 10px; }
  /* Solo el texto "NEXOCORE"; el isotipo se queda */
  .nx-eq-brand > span:not(.nx-logo) { display: none; }
  .nx-eq-navright { gap: 14px; }
  .nx-eq-navright .nx-btn { padding: 9px 14px; font-size: 11px; white-space: nowrap; }
}

@media (max-width: 560px) {
  .nx-eq-hero, .nx-founders, .nx-mission { padding-left: 22px; padding-right: 22px; }
}