/* [Claude] Fase 4 — estilos para páginas internas (system-architect y siguientes).
   Complementa assets/css/index.css; no redefine tokens ni componentes base. */

.page-hero {
  min-height: auto;
  padding: 112px 0 26px;
}

/* W neón arriba del hero, igual que el index; usa la clase .hero-w de index.css */

.page-hero h1 {
  max-width: none;
  margin-bottom: 10px;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  text-shadow: 0 0 22px rgba(241, 83, 113, .3);
}

.page-path {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--console-blue);
  font-family: "Nova Square", "Space Mono", monospace;
  font-size: .82rem;
  text-shadow: 0 0 14px rgba(103, 216, 255, .4);
}

.page-lead {
  max-width: 62ch;
  margin: 0 auto 30px;
  color: var(--muted);
  font-size: clamp(.94rem, 1.4vw, 1.08rem);
}

/* Bloque de consola libre: texto flotando sobre el grid, sin panel */
.page-log {
  display: inline-block;
  margin-inline: auto;
  text-align: left;
  font-size: clamp(.66rem, .78vw, .84rem);
  line-height: 1.8;
  text-shadow: 0 0 16px rgba(35, 255, 196, .18);
}

/* Sección de texto libre, misma lógica que el hero del index */
.free-section {
  width: var(--container);
  margin: 0 auto;
  padding: 34px 0 72px;
  text-align: center;
}

.free-section h2 {
  margin-bottom: 18px;
}

.free-section > p {
  max-width: 66ch;
  margin: 0 auto 18px;
  color: rgba(243, 255, 251, .82);
  font-size: clamp(.98rem, 1.15vw, 1.14rem);
  line-height: 1.72;
}

.free-section .free-highlight {
  color: var(--ink);
  font-size: clamp(1.12rem, 1.6vw, 1.5rem);
  line-height: 1.55;
  max-width: 56ch;
  text-shadow: 0 0 22px rgba(35, 255, 196, .16);
}

.free-section .page-log {
  margin-top: 14px;
}

/* Perfil como tarjeta glassmórfica (iteración 3): vidrio oscuro + glow neón,
   mismo lenguaje que el panel del núcleo en index.css. Esquinas redondeadas,
   más angosta que las filas de tarjetas de abajo. */
.profile-card {
  width: min(720px, 100%);
  margin: 0 auto;
  padding: clamp(30px, 4vw, 50px);
  border: 1px solid rgba(103, 216, 255, .34);
  border-radius: 36px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015) 52%, rgba(35, 255, 196, .04)),
    rgba(0, 0, 0, .46);
  box-shadow:
    0 0 34px rgba(103, 216, 255, .14),
    0 0 68px rgba(35, 255, 196, .08),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(128%);
}

.profile-card .section-kicker {
  margin-bottom: 10px;
}

.profile-card h2 {
  margin-bottom: 16px;
}

.profile-card .free-highlight {
  margin: 0 auto 16px;
}

.profile-card > p:not(.free-highlight) {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(.94rem, 1.1vw, 1.06rem);
  line-height: 1.7;
}

/* [Claude] Fase 4 #2 — /bin/projects: registro destacado y tarjetas de caso */

/* Variante del glass de .profile-card para el caso destacado del listado */
.case-feature {
  width: min(880px, 100%);
}

.case-feature .hero-actions {
  justify-content: center;
  margin-top: 24px;
}

/* Marcador de registro aún sin página propia (sustituye al .route-link) */
.route-lock {
  margin-top: auto;
  padding-top: 18px;
  color: rgba(243, 255, 251, .38);
  font-family: "Nova Square", "Space Mono", monospace;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-cards {
  padding-top: 10px;
  padding-bottom: 54px;
}

.page-cards .route-card {
  min-height: 300px;
}

.page-cta {
  width: var(--container);
  margin: 0 auto;
  padding: 4px 0 110px;
  text-align: center;
}

.page-cta h2 {
  margin-bottom: 8px;
}

.page-cta p {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--muted);
}

.page-cta .hero-actions {
  justify-content: center;
}

/* [Claude] Fase 4 #3 — canal.html: datos de contacto y enlaces en línea */
.channel-list {
  margin-top: 22px;
  display: grid;
  gap: 8px;
}

.channel-list p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: "Space Mono", monospace;
  font-size: .92rem;
}

.channel-label {
  min-width: 84px;
  color: var(--console-blue);
  font-family: "Nova Square", "Space Mono", monospace;
  font-size: .72rem;
  letter-spacing: .12em;
}

.channel-list a,
.inline-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 255, 196, .34);
  transition: color 180ms ease, border-color 180ms ease;
}

.channel-list a:hover,
.inline-link:hover,
.channel-list a:focus-visible,
.inline-link:focus-visible {
  color: var(--console-blue);
  border-color: var(--console-blue);
}

/* [Claude] Fase 5 — enlaces sociales con icono en Canal (Instagram · LinkedIn) */
.channel-social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 0;
}

.channel-social-link .social-icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.channel-social-link span {
  border-bottom: 1px solid rgba(35, 255, 196, .34);
  transition: border-color 180ms ease;
}

.channel-social-link:hover span,
.channel-social-link:focus-visible span {
  border-color: var(--console-blue);
}

/* [Claude] Fase 4 — enlaces sociales en el footer global (Instagram · LinkedIn · Sistema) */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.footer-social a {
  color: rgba(243, 255, 251, .68);
  text-decoration: none;
  letter-spacing: .04em;
  transition: color 180ms ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--pink);
}

.footer-social span[aria-hidden] {
  color: rgba(103, 216, 255, .38);
}

/* [Claude] Fase 5 — captura de proyecto en marco de ventana (duotono atenuado → color en hover) */
.case-shot {
  width: min(980px, calc(100vw - 48px));
  margin: 6px auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(9, 16, 22, .72);
  border: 1px solid rgba(103, 216, 255, .28);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  transition: border-color 320ms ease, box-shadow 320ms ease;
}

.case-shot:hover,
.case-shot:focus-within {
  border-color: rgba(35, 255, 196, .5);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .5), 0 0 24px rgba(35, 255, 196, .18);
}

.case-shot-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(103, 216, 255, .18);
  font-family: "Nova Square", "Space Mono", monospace;
  font-size: .72rem;
  letter-spacing: .07em;
  color: rgba(243, 255, 251, .7);
}

.case-shot-dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}

.case-shot-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(103, 216, 255, .4);
}

.case-shot-dots i:nth-child(1) { background: rgba(241, 83, 113, .72); }
.case-shot-dots i:nth-child(2) { background: rgba(255, 190, 92, .72); }
.case-shot-dots i:nth-child(3) { background: rgba(35, 255, 196, .72); }

.case-shot-url {
  margin-left: auto;
  color: var(--console-blue);
}

.case-shot-frame {
  display: block;
  line-height: 0;
}

.case-shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.55) brightness(.92);
  transition: filter 340ms ease;
}

.case-shot:hover .case-shot-frame img,
.case-shot:focus-within .case-shot-frame img {
  filter: saturate(1) brightness(1);
}

/* [Claude] Fase 4 #3 — trayectoria.html: línea de tiempo vertical (página experimental) */
.timeline-section {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
  padding: 8px 0 72px;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(35, 255, 196, .6), rgba(103, 216, 255, .3), rgba(241, 83, 113, .35));
}

.timeline-item {
  position: relative;
  padding: 0 0 40px 40px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(35, 255, 196, .6);
}

.timeline-year {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--console-blue);
  font-family: "Nova Square", "Space Mono", monospace;
  font-size: .82rem;
  letter-spacing: .14em;
  text-shadow: 0 0 14px rgba(103, 216, 255, .4);
}

.timeline-item h3 {
  margin: 0 0 10px;
  font-family: "Syne", sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--ink);
}

.timeline-item p {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(.94rem, 1.1vw, 1.06rem);
  line-height: 1.7;
}

/* [Claude] Fase 4 #3 — nucleo.html: tratamiento restringido (rosa/rojo) del manifiesto */
.core-path {
  color: var(--pink);
  text-shadow: 0 0 14px rgba(241, 83, 113, .45);
}

.core-hero h1 {
  text-shadow: 0 0 26px rgba(241, 83, 113, .42);
}

.core-log {
  color: rgba(241, 83, 113, .82);
  text-shadow: 0 0 16px rgba(241, 83, 113, .2);
}

.core-kicker {
  color: var(--pink);
  text-shadow: 0 0 16px rgba(241, 83, 113, .4);
}

.core-panel {
  border-color: rgba(241, 83, 113, .5);
}

.core-copy {
  color: rgba(241, 83, 113, .82);
}

@media (max-width: 860px) {
  .page-hero {
    padding-top: 128px;
  }

  .page-log {
    font-size: clamp(.66rem, 2.2vw, .82rem);
  }

  .free-section {
    width: min(calc(100% - 32px), 560px);
    padding-bottom: 56px;
  }

  .channel-list p {
    flex-direction: column;
    gap: 2px;
  }
}