:root{
  --bg:#F4EFEB; --bg-soft:#FBF8F4;
  --gold:#644C1F; --gold-bright:#76432B;
  --terracotta:#73442E; --cream:#4A2F23; --muted:#584F43; --rule:#CBBFA9;
  --bronze-frame:#C8A97E; --chocolate:#4A2F23;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg); color:var(--cream); font-family:'Montserrat',sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.6rem;
  padding:1.2rem 6vw; border-bottom:1px solid var(--rule);
}
.brand{font-family:'Piazzolla',serif; font-style:italic; font-weight:400; font-size:1.15rem;}
.brand a{color:inherit; text-decoration:none;}
.navlink{font-family:'Montserrat',sans-serif; font-size:.85rem; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; transition:color .2s ease;}
.navlink:hover{color:var(--gold);}

main{
  flex:1; padding:7vh 6vw 8vh; max-width:760px; margin:0 auto; width:100%;
}
.page-header{text-align:center; margin-bottom:3rem;}
.eyebrow{font-size:1rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem;}
h1{
  font-family:'Piazzolla',serif; font-style:italic; font-weight:400; font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:1.1; margin:0 auto 1.4rem; max-width:18ch;
}
h1 em{font-style:italic; font-weight:500; color:var(--gold);}
p.desc{max-width:52ch; color:var(--muted); font-size:1.02rem; line-height:1.65; margin:0 auto;}

/* --- Listado de posts (índice /rincones/) --- */
.rincones-list{display:flex; flex-direction:column; gap:2.6rem;}
.rincones-card{
  display:flex; gap:1.8rem; align-items:flex-start; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--rule); padding-bottom:2.6rem;
}
.rincones-card:last-child{border-bottom:none;}
.rincones-card-photo{
  flex:0 0 180px; aspect-ratio:4/5; overflow:hidden; border:3px solid var(--bronze-frame);
}
.rincones-card-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:sepia(0.16) contrast(1.08) brightness(0.93) saturate(0.88);}
.rincones-card-body h2{font-family:'Piazzolla',serif; font-style:italic; font-weight:400; font-size:1.5rem; color:var(--cream); margin-bottom:.5rem; line-height:1.25;}
.rincones-card-body .meta{font-family:'Montserrat',sans-serif; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:.7rem;}
.rincones-card-body p{font-family:'Piazzolla',serif; font-size:1rem; color:var(--muted); line-height:1.6;}
@media (max-width:560px){
  .rincones-card{flex-direction:column;}
  .rincones-card-photo{flex-basis:auto; width:100%; max-width:280px;}
}

/* --- Artículo individual --- */
article.rincones-post{max-width:680px; margin:0 auto;}
.rincones-post .hero-photo{
  width:100%; aspect-ratio:4/5; max-height:520px; overflow:hidden; margin-bottom:2.4rem;
  border:3px solid var(--bronze-frame);
}
.rincones-post .hero-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:sepia(0.16) contrast(1.08) brightness(0.93) saturate(0.88);}
.rincones-post h2{font-family:'Piazzolla',serif; font-style:italic; font-weight:500; font-size:1.5rem; color:var(--gold); margin:2.4rem 0 1rem;}
.rincones-post p{font-family:'Piazzolla',serif; font-size:1.08rem; line-height:1.75; color:var(--cream); margin-bottom:1.3rem;}
.rincones-post figure{margin:2.2rem 0;}
.rincones-post figure img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; border:3px solid var(--bronze-frame);}
.rincones-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  padding:.9rem 1.8rem; background:var(--gold-bright); border-radius:4px;
  font-family:'Piazzolla',serif; font-style:italic; font-weight:600; font-size:1.15rem;
  color:var(--bg-soft); text-decoration:none; margin-top:1rem;
  transition:opacity .25s ease, transform .2s ease;
}
.rincones-cta:hover{opacity:.88; transform:translateY(-1px);}
.breadcrumb{font-family:'Montserrat',sans-serif; font-size:.82rem; color:var(--muted); margin-bottom:2rem;}
.breadcrumb a{color:var(--muted); text-decoration:none;}
.breadcrumb a:hover{color:var(--gold);}

@media (max-width:480px){
  nav{padding:1rem 5vw; justify-content:center; text-align:center;}
  main{padding:5vh 6vw;}
}