/* ============================================================
   Luismar Alvarez Carrillo — sistema de diseño
   Paleta: papel/tinta (negro y blanco) + cuatro familias frías
   integradas: cian-teal, azul cielo, azul-violeta (índigo) y
   violeta-lavanda. El índigo actúa como acento "puente" entre
   el azul y el violeta. Tipografía: Spectral (serif de lectura,
   para títulos) + Inter (texto) + JetBrains Mono (etiquetas,
   cifras, secciones — el registro "de cuaderno").
   ============================================================ */

:root{
  --paper:       #f7f7f2;
  --paper-grid:  #e9ebe2;
  --paper-2:     #eef0e7;
  --white:       #ffffff;
  --ink:         #14161a;
  --ink-soft:    #4a4d54;
  --ink-faint:   #86898f;
  --line:        #dadce0;
  --line-strong: #c3c6cc;

  --blue:        #3672b8;
  --blue-soft:   #6ba0d8;
  --blue-tint:   #dbe8f5;

  --teal:        #1c8f9e;
  --teal-soft:   #4fb8c4;
  --teal-tint:   #d3eef0;

  --indigo:      #5f4fae;
  --indigo-soft: #8d7fce;
  --indigo-tint: #e1def2;

  --violet:      #8955ab;
  --violet-soft: #b087cc;
  --violet-tint: #ecdff2;

  /* alias retrocompatible: el rol que antes cubría "verde" ahora lo cubre teal */
  --green:       var(--teal);
  --green-soft:  var(--teal-soft);
  --green-tint:  var(--teal-tint);

  --accent:      #5f4fae; /* índigo — puente azul-violeta, color de firma */
  --accent-soft: #8d7fce;

  --radius: 3px;
  --serif: 'Spectral', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', monospace;
}

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

html{ scroll-behavior:smooth; }

body{
  font-family: var(--sans);
  background:
    linear-gradient(var(--paper-grid) 1px, transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px) 0 0/32px 32px,
    var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--accent); color: var(--white); }

a{ color: var(--accent); }
a:focus-visible, button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.container{ max-width: 880px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Navbar ---------- */
.navbar{
  position: sticky; top: 0; z-index: 20;
  background: rgba(247,247,242,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.navbar-inner{
  max-width: 880px; margin: 0 auto; padding: 0.9rem 1.5rem;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap: wrap; gap: 0.75rem;
}
.brand{
  font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); text-decoration:none; letter-spacing: 0.01em;
}
.brand em{ color: var(--accent); font-style: normal; }
.nav-links{ display:flex; gap: 1.6rem; list-style:none; flex-wrap: wrap; }
.nav-links a{
  text-decoration:none; color: var(--ink-soft);
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-links a:hover{ color: var(--accent); }
.nav-links a.active{ color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Hero ---------- */
.hero{ padding: 4rem 0 2.5rem; }
.hero-grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items:center;
}
.eyebrow{
  display:inline-block; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.9rem;
}
.eyebrow::before{ content:"§ "; color: var(--ink-faint); }
.hero h1{
  font-family: var(--serif); font-weight: 600; font-size: 2.7rem;
  line-height: 1.1; color: var(--ink); letter-spacing: -0.01em;
}
.hero .role{
  font-family: var(--serif); font-style: italic; font-size: 1.15rem;
  color: var(--ink-soft); margin-top: 0.6rem;
}
.hero p.lede{ margin-top: 1.1rem; max-width: 46ch; color: var(--ink-soft); }
.hero-actions{ display:flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }

.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em;
  text-transform: uppercase; text-decoration:none;
  padding: 0.65rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--ink); color: var(--ink);
  background: transparent; transition: 0.15s;
}
.btn:hover{ background: var(--ink); color: var(--paper); }
.btn.primary{ background: var(--ink); color: var(--paper); }
.btn.primary:hover{ background: var(--accent); border-color: var(--accent); }
.btn svg{ width:14px; height:14px; }

/* signature SVG */
.signature{ display:flex; justify-content:center; }
.signature svg{ width: 100%; max-width: 300px; height:auto; }
.curve-blue, .curve-green{
  fill:none; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: draw 2.4s ease forwards 0.2s;
}
.curve-blue{ stroke: var(--blue); }
.curve-green{ stroke: var(--teal-soft); animation-delay: 0.5s; }
.sig-dot{ fill: var(--accent); opacity:0; animation: fadein 0.6s ease forwards 2.4s; }
@keyframes draw{ to{ stroke-dashoffset: 0; } }
@keyframes fadein{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .curve-blue, .curve-green, .sig-dot{ animation: none; stroke-dashoffset:0; opacity:1; }
}

/* ---------- Sections ---------- */
section.block{ padding: 2.4rem 0; border-top: 1px solid var(--line); }
section.block:first-of-type{ border-top: none; }
.block h2{
  font-family: var(--serif); font-weight: 600; font-size: 1.55rem; color: var(--ink);
}
.block > p.intro{ color: var(--ink-soft); max-width: 60ch; margin-top: 0.6rem; }

/* ---------- Definition-style list (Sobre mí) ---------- */
.def-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap: 1.4rem; margin-top: 1.6rem;
}
.def{ border-top: 2px solid var(--blue); padding-top: 0.8rem; }
.def:nth-child(3n+2){ border-top-color: var(--teal); }
.def:nth-child(3n){ border-top-color: var(--violet); }
.def h3{
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.55rem;
}
.def ul{ list-style:none; }
.def li{ color: var(--ink-soft); padding: 0.18rem 0; font-size:0.95rem; }
.def li::before{ content:"— "; color: var(--ink-faint); }

/* ---------- Tag pills (áreas de interés) ---------- */
.tags{ display:flex; flex-wrap:wrap; gap: 0.6rem; margin-top: 1.4rem; }
.tag{
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.4rem 0.7rem; border-radius: var(--radius);
  border: 1px solid var(--line-strong); color: var(--ink-soft);
}
.tag:nth-child(4n+1){ border-color: var(--blue-soft); color: var(--blue); }
.tag:nth-child(4n+2){ border-color: var(--teal-soft); color: var(--teal); }
.tag:nth-child(4n+3){ border-color: var(--indigo-soft); color: var(--indigo); }
.tag:nth-child(4n){ border-color: var(--violet-soft); color: var(--violet); }

/* ---------- Cards (theorem-box) ---------- */
.grid-2{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1.3rem; margin-top:1.6rem; }
.card{
  background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius); padding: 1.3rem 1.4rem;
}
.card.green{ border-top-color: var(--teal); }
.card.indigo{ border-top-color: var(--indigo); }
.card.violet{ border-top-color: var(--violet); }
.card .label{
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.5rem; display:block;
}
.card h3{ font-family: var(--serif); font-size: 1.15rem; color: var(--ink); margin-bottom:0.5rem; }
.card ul{ list-style:none; margin-top:0.4rem; }
.card li{ color: var(--ink-soft); padding: 0.15rem 0; }
.card li::before{ content:"— "; color: var(--ink-faint); }
.card p{ color: var(--ink-soft); }

/* ---------- Expository notes ---------- */
.note-card{
  background: var(--white); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  margin-bottom: 1rem; display:flex; flex-direction:column; gap:0.3rem;
}
.note-card .note-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.note-card h3{ font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.note-card .note-date{ font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; }
.note-card p{ color: var(--ink-soft); font-size: 0.94rem; }
.note-card .note-link{ font-family: var(--mono); font-size: 0.72rem; text-transform:uppercase; letter-spacing:0.05em; margin-top:0.3rem; }
.note-card.pending{
  border-left-style: dashed; border-color: var(--line-strong); border-left-color: var(--line-strong);
  background: transparent;
}
.note-card.pending h3{ color: var(--ink-faint); font-style: italic; }
.note-card.pending p{ color: var(--ink-faint); }

/* ---------- Bibliography ---------- */
.biblio-group{ margin-top: 1.8rem; }
.biblio-group h3{
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent); margin-bottom: 0.8rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--line);
}
.biblio-list{ list-style:none; }
.biblio-list li{
  display:flex; gap: 0.9rem; padding: 0.7rem 0; border-bottom: 1px dashed var(--line);
}
.biblio-list li:last-child{ border-bottom:none; }
.biblio-num{ font-family: var(--mono); color: var(--ink-faint); font-size:0.85rem; flex-shrink:0; width: 1.6rem; }
.biblio-text .title{ font-family: var(--serif); font-style: italic; color: var(--ink); }
.biblio-text .author{ color: var(--ink-soft); font-size: 0.92rem; }
.biblio-text .note{ color: var(--ink-faint); font-size: 0.86rem; margin-top: 0.2rem; }

/* ---------- Timeline (eventos) ---------- */
.timeline{ margin-top: 1.8rem; border-left: 1px solid var(--line-strong); padding-left: 1.4rem; }
.tl-item{ position: relative; padding-bottom: 1.6rem; }
.tl-item:last-child{ padding-bottom: 0; }
.tl-item::before{
  content:""; position:absolute; left:-1.485rem; top: 0.35rem;
  width: 8px; height:8px; border-radius:50%; background: var(--accent);
}
.tl-date{ font-family: var(--mono); font-size: 0.72rem; letter-spacing:0.05em; color: var(--ink-faint); text-transform:uppercase; }
.tl-item h3{ font-family: var(--serif); font-size: 1.05rem; margin-top: 0.25rem; color: var(--ink); }
.tl-item p{ color: var(--ink-soft); margin-top: 0.2rem; font-size: 0.94rem; }

/* ---------- Footer ---------- */
footer{
  text-align:center; padding: 2.4rem 0 3rem; margin-top: 1rem;
  border-top: 1px solid var(--line); color: var(--ink-faint);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.03em;
}
footer .foot-links{ display:flex; justify-content:center; gap:1rem; margin-top:0.7rem; }
footer a{ color: var(--ink-soft); }
footer a:hover{ color: var(--accent); }
footer svg{ width:16px; height:16px; vertical-align:middle; }

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .navbar-inner{ flex-direction:column; align-items:flex-start; }
  .nav-links{ gap: 1rem; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 2.1rem; }
  .signature{ margin-top: 1.5rem; }
}