:root{
  --paper:#EDE6D6;
  --paper-alt:#F7F2E7;
  --ink:#201A14;
  --ink-soft:#5A4F42;
  --accent:#8C3D2E;
  --accent-soft:#C9AE8C;
  --moss:#5C6B47;
  --rule:#D8CDB4;
  --maxw:920px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}

.display{
  font-family:'Fraunces', serif;
  font-weight:450;
  letter-spacing:-0.01em;
}

/* ---- Spine (signature element) ---- */
.spine{
  position:fixed;
  top:0; left:0;
  height:100vh;
  width:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--rule);
  z-index:50;
  background:var(--paper);
}
.spine span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.16em;
  color:var(--ink-soft);
  white-space:nowrap;
}
.spine .dot{color:var(--accent); margin:0 2px;}

main{margin-left:34px;}
@media (max-width:720px){
  .spine{display:none;}
  main{margin-left:0;}
}

section{
  padding:5rem 1.5rem;
  max-width:var(--maxw);
  margin:0 auto;
}

/* ---- Hero ---- */
.hero{
  padding-top:6rem;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:1.5rem;
  padding-right:1.5rem;
}
.hero .eyebrow{display:block; margin-bottom:1.1rem;}
.hero h1{
  font-family:'Fraunces', serif;
  font-weight:450;
  font-size:clamp(2.1rem, 5.4vw, 3.7rem);
  line-height:1.08;
  margin:0 0 1.6rem 0;
  max-width:14ch;
}
.hero .dek{
  font-size:1.15rem;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0 0 2.4rem 0;
}
.btn{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--paper);
  background:var(--ink);
  padding:0.95rem 1.7rem;
  border:1px solid var(--ink);
  transition:background 0.15s ease, color 0.15s ease;
}
.btn:hover{background:var(--accent); border-color:var(--accent);}

.hero-foot{
  margin-top:3.5rem;
  padding-top:1.3rem;
  border-top:1px solid var(--rule);
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  gap:0.6rem;
  flex-wrap:wrap;
}
.hero-foot .sep{color:var(--accent-soft);}

/* ---- Section heads ---- */
.sec-head{
  display:flex;
  align-items:baseline;
  gap:0.9rem;
  margin-bottom:2.2rem;
}
.sec-num{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--accent);
  letter-spacing:0.08em;
}
.sec-title{
  font-family:'Fraunces', serif;
  font-weight:450;
  font-size:clamp(1.5rem, 3vw, 2.1rem);
  margin:0;
}
.rule{
  border:none; border-top:1px solid var(--rule);
  max-width:var(--maxw); margin:0 auto;
}

/* ---- Quién soy ---- */
.quien p{max-width:62ch;}
.quien p:first-of-type::first-letter{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:3.6rem;
  float:left;
  line-height:0.8;
  padding-right:0.5rem;
  padding-top:0.4rem;
  color:var(--accent);
}
.pullquote{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:450;
  font-size:clamp(1.3rem, 2.6vw, 1.7rem);
  line-height:1.4;
  color:var(--ink);
  max-width:34ch;
  margin:2.6rem 0 2.6rem auto;
  padding:1.4rem 0 1.4rem 1.6rem;
  border-left:2px solid var(--accent);
}

/* ---- A quién sirve ---- */
.filter-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
}
@media (max-width:640px){ .filter-grid{grid-template-columns:1fr;} }
.filter-col .tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  display:block;
  margin-bottom:1rem;
}
.filter-col.si .tag{color:var(--moss);}
.filter-col.no .tag{color:var(--accent);}
.filter-col ul{padding-left:1.1rem; margin:0;}
.filter-col li{margin-bottom:0.9rem; color:var(--ink-soft);}
.filter-col li::marker{color:var(--accent-soft);}

/* ---- Cómo trabajo ---- */
.fase{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:1.6rem;
  padding:2.4rem 0;
  border-top:1px solid var(--rule);
}
.fase:last-child{border-bottom:1px solid var(--rule);}
@media (max-width:640px){ .fase{grid-template-columns:1fr; gap:0.6rem;} }
.fase-num{
  font-family:'Fraunces', serif;
  font-weight:300;
  font-size:2.8rem;
  color:var(--accent-soft);
  line-height:1;
}
.fase h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.3rem;
  margin:0 0 0.6rem 0;
}
.fase p{margin:0; color:var(--ink-soft); max-width:56ch;}

/* ---- Pomarrosa aside ---- */
.aside-box{
  background:var(--paper-alt);
  border:1px solid var(--rule);
  padding:2.2rem;
}
.aside-box p{margin:0 0 1rem 0; color:var(--ink-soft);}
.aside-box p:last-child{margin-bottom:0;}
.aside-box .link-out{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.06em;
}

/* ---- Contacto ---- */
.contacto{text-align:left;}
.contacto h2{
  font-family:'Fraunces', serif;
  font-weight:450;
  font-size:clamp(1.8rem, 4vw, 2.6rem);
  max-width:16ch;
  margin:0 0 1.4rem 0;
}
.contact-links{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  margin-top:2rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:14px;
}
.contact-links a{text-decoration:none; border-bottom:1px solid var(--accent-soft);}
.contact-links a:hover{border-color:var(--accent);}

footer{
  max-width:var(--maxw);
  margin:0 auto;
  padding:2.5rem 1.5rem 3.5rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:0.5rem;
}