/* ═══════════════════════════════════════════════════════════
   Alba Labs — hoja de estilos única
   Orden: tokens · base · fondo · estructura · nav · hero ·
          secciones · contacto · footer · utilidades
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Progreso del amanecer: 0 = noche, 1 = alba. Lo escribe main.js con el scroll. */
  --dawn: 0;

  --noche:      #080B1E;
  --penumbra:   #10152F;
  --violeta:    #4A2E8C;
  --rosa:       #C64C8C;
  --ambar:      #FFAE6B;
  --texto:      #EAECF7;
  --tenue:      #878CB2;
  --linea:      rgba(255,255,255,.10);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background: var(--noche);
  color: var(--texto);
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Cielo: capas fijas detrás de todo ─────────────────── */
.sky{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

.sky__night{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%, #161C42 0%, var(--noche) 60%);
}

.sky__stars{ position:absolute; inset:0; width:100%; height:100%;
  opacity: calc(1 - var(--dawn) * .85); }

.sky__dawn{
  position:absolute; inset:0;
  opacity: calc(var(--dawn) * .85);
  background: linear-gradient(to top,
    rgba(255,174,107,.55) 0%,
    rgba(198,76,140,.40) 14%,
    rgba(74,46,140,.30) 34%,
    transparent 62%);
}

.sky__horizon{
  position:absolute; left:50%; bottom:-22vh;
  width:150vw; height:44vh; transform:translateX(-50%);
  opacity: calc(.15 + var(--dawn) * .6);
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,174,107,.65) 0%,
    rgba(198,76,140,.30) 38%,
    transparent 70%);
  filter: blur(30px);
}

/* ── Estructura ────────────────────────────────────────── */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.rule{ height:1px; background:linear-gradient(to right,
    transparent, var(--linea) 15%, var(--linea) 85%, transparent); }

.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tenue);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:.7rem 1.1rem; border-radius:0 0 10px 0;
  background:var(--ambar); color:var(--noche);
  font-family:var(--mono); font-size:.75rem; text-decoration:none;
}
.skip:focus{ left:0; }

/* ── Nav ───────────────────────────────────────────────── */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(1.4rem,3vw,2.4rem) var(--pad);
}
.nav__mark{ font-family:var(--display); font-weight:700;
  font-size:1.05rem; letter-spacing:-.02em; }
.nav__links{ display:flex; gap:clamp(1rem,3vw,2.2rem); }
.nav__links a{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
  color:var(--tenue); text-decoration:none; transition:color .25s;
}
.nav__links a:hover{ color:var(--texto); }

/* ── Hero ──────────────────────────────────────────────── */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block: 9rem 5rem;
}
.hero__eyebrow{ margin-bottom:2rem; display:flex; align-items:center; gap:.7rem; }
.hero__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ambar); box-shadow:0 0 12px var(--ambar);
}

h1{
  font-family:var(--display);
  font-size: clamp(2.9rem, 8.5vw, 6.6rem);
  font-weight:600; line-height:.94; letter-spacing:-.035em;
  max-width: 14ch;
}
h1 em{
  font-style:normal;
  background:linear-gradient(100deg, var(--rosa) 10%, var(--ambar) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__sub{
  margin-top:2rem; max-width:46ch; color:var(--tenue);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.hero__actions{ margin-top:2.8rem; display:flex; flex-wrap:wrap; gap:1rem; }

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.5rem; border-radius:100px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em;
  text-decoration:none; transition:transform .25s, box-shadow .25s, border-color .25s;
}
.btn--solid{
  color:var(--noche); font-weight:500;
  background:linear-gradient(100deg, var(--ambar), #FFC894);
  box-shadow:0 6px 30px rgba(255,174,107,.22);
}
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 10px 38px rgba(255,174,107,.34); }
.btn--ghost{
  color:var(--texto); border:1px solid var(--linea);
}
.btn--ghost:hover{ border-color:rgba(255,255,255,.3); transform:translateY(-2px); }

/* ── Secciones ─────────────────────────────────────────── */
.section{ padding-block: clamp(5rem, 11vh, 8.5rem); }

.section__head{ margin-bottom:3.5rem; }
.section__head h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.9rem, 4vw, 3rem); letter-spacing:-.028em;
  line-height:1.05; margin-top:1rem; max-width:20ch;
}

/* Capacidades */
.caps{ display:grid; gap:2.5rem 3rem;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); }
.cap__bar{
  width:34px; height:2px; margin-bottom:1.2rem;
  background:linear-gradient(to right, var(--rosa), var(--ambar));
}
.cap h3{
  font-family:var(--display); font-weight:600; font-size:1.25rem;
  letter-spacing:-.015em; margin-bottom:.6rem;
}
.cap p{ color:var(--tenue); font-size:.98rem; }

.stack{
  margin-top:3.5rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1.2rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--tenue);
}
.stack__label{ text-transform:uppercase; letter-spacing:.18em; opacity:.7; }
.stack__items{ color:var(--texto); opacity:.75; }

/* Proyectos */
.projects{ display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.project{
  display:block; text-decoration:none; color:inherit;
  padding:2rem 1.9rem 1.9rem;
  border:1px solid var(--linea); border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.project:hover{
  transform:translateY(-4px);
  border-color:rgba(255,174,107,.35);
  box-shadow:0 14px 44px rgba(0,0,0,.34);
}
.project__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-bottom:1.1rem;
}
.project h3{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:-.02em;
}
.project__url{ font-family:var(--mono); font-size:.7rem; color:var(--tenue); white-space:nowrap; }
.project p{ color:var(--tenue); font-size:.95rem; }
.project__tags{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.45rem; }
.tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.04em;
  padding:.3rem .65rem; border-radius:100px;
  border:1px solid var(--linea); color:var(--tenue);
}

/* ── Contacto ──────────────────────────────────────────── */
.contact{ text-align:center; padding-block: clamp(6rem,14vh,10rem); }
.contact h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.2rem, 6vw, 4.2rem); letter-spacing:-.03em;
  line-height:1; margin:1.2rem 0 1.6rem;
}
.contact p{ color:var(--tenue); max-width:40ch; margin:0 auto 2.6rem; }

/* Enlace de correo — se usará cuando la casilla esté operativa */
.mailto{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.1rem, 2.6vw, 1.7rem); letter-spacing:-.01em;
  color:var(--texto); text-decoration:none;
  border-bottom:1px solid rgba(255,174,107,.45); padding-bottom:.2rem;
  transition:border-color .25s, color .25s;
}
.mailto:hover{ color:var(--ambar); border-color:var(--ambar); }

/* Estado provisional mientras no hay casilla de correo */
.contact__soon{
  display:inline-block;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--tenue);
  padding:.7rem 1.3rem; border-radius:100px;
  border:1px dashed rgba(255,174,107,.35);
}

footer{
  display:flex; flex-wrap:wrap; gap:.8rem 2rem;
  justify-content:space-between; align-items:center;
  padding-block:2.2rem 3rem;
  font-family:var(--mono); font-size:.7rem; color:var(--tenue);
  letter-spacing:.05em;
}

/* ── Reveal ────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

@media (max-width:560px){
  .nav__links a:not(:last-child){ display:none; }
  h1{ max-width:100%; }
}