/* ============================================================
   fbascunan.cl — Estilos globales compartidos
   Fase 1 (fundaciones): chrome + tokens extraídos de los bloques
   <style> inline que estaban duplicados y desincronizados en las
   páginas. Este archivo es el ÚNICO origen de verdad del chrome
   (tokens, reset, grain, nav sólido, footer, responsive de chrome).

   El CSS específico de cada página permanece scopeado en un <style>
   mínimo dentro de esa página. La home (index.html) usa un nav
   transparente/stuck propio: lo redefine en su <style> local, que
   sobreescribe el nav sólido de aquí por venir después del <link>.
   ============================================================ */

/* ── BRAND TOKENS ─────────────────────────────────────── */
:root {
  --purple:  #AE80FE;
  --power:   #A404F8;
  --cyan:    #C6FBFB;
  --black:   #141414;
  --off:     #1A1A1A;
  --white:   #FAFAFA;
  --grey:    #A0A9C1;
  --muted:   #2E2E2E;
  --title:   'DharmaGothicE-RegularItalic', sans-serif;
  --body:    'Inter', sans-serif;
}

/* ── RESET ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }

/* ── GRAIN ────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
}

/* ── NAV (sólido — páginas interiores) ────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 1.3rem 3rem;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(20,20,20,.93);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(174,128,254,.1);
}
.nav-logo img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey); transition: color .2s;
}
.nav-links a:hover { color: var(--white); }
.nav-cta {
  background: var(--purple) !important; color: var(--black) !important;
  padding: .45rem 1.3rem; border-radius: 4px; font-weight: 600 !important;
}
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 201; }
.burger span { width: 22px; height: 1.5px; background: var(--white); transition: .3s; }

/* ── FOOTER ───────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--muted); padding: 2rem 3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-logo img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.footer-tag { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.footer-copy { font-size: .68rem; color: var(--muted); }

/* ── BREADCRUMBS (posts template A) ───────────────────── */
/* .breadcrumbs es un <nav>, así que el selector de tipo nav{} le impone
   position:fixed y lo convierte en una barra que tapa el nav principal.
   Reseteamos aquí (clase 0,1,0 gana al tipo nav 0,0,1) para que fluya como
   texto inline dentro del .post-header y haga scroll con el contenido. */
.breadcrumbs {
  position: static; z-index: auto;
  display: block; padding: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: none;
  font-size: .7rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem;
}
.breadcrumbs a { color: var(--purple); transition: color .2s; }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs span { color: var(--grey); }
/* separadores generados por CSS: al ocultar un crumb, su "·" desaparece con él */
.breadcrumbs > * + *::before { content: "·"; margin: 0 .45em; color: var(--muted); }

/* ── RESPONSIVE (chrome) ──────────────────────────────── */
@media (max-width: 768px) {
  nav { padding: 1.1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    /* dimensionar contra el VIEWPORT, no contra el nav (que es containing block
       por su backdrop-filter). 100vh como fallback antes de 100dvh. */
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100dvh;
    background: var(--black); align-items: center; justify-content: center;
    gap: 2.5rem; z-index: 199;
  }
  .burger { display: flex; }
  footer { flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; gap: .8rem; }
  /* móvil: ocultar el título (último crumb) para no duplicar el <h1>; su "·" se oculta con él */
  .breadcrumbs span { display: none; }
}