:root{
  --marfil:#F5EFE0;
  --marfil-suave:#FAF6EC;
  --dorado:#B8860B;
  --dorado-claro:#D4A62E;
  --granate:#6B1E23;
  --oscuro:#2A1F14;
  --patron:#5A4A3A;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:#7B1032; color-scheme:light;}
body{
  background:#7B1032;
  color:var(--oscuro);
  font-family:'EB Garamond', serif;
  line-height:1.6;
  position:relative;
}
a{color:inherit;text-decoration:none;}

/* ---------- NAV ---------- */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 6vw;
  border-bottom:1px solid rgba(184,134,11,0.35);
  background:var(--marfil-suave);
  box-shadow:0 2px 14px rgba(42,31,20,0.06);
  position:relative; z-index:2;
}
.wordmark{
  font-family:'Cinzel',serif;
  font-size:20px;
  letter-spacing:3px;
  color:var(--granate);
  font-weight:600;
  display:flex; align-items:center; gap:12px;
}
.wordmark i{
  width:6px;height:6px;
  border:1px solid var(--dorado);
  transform:rotate(45deg);
  display:inline-block;
}
nav ul{display:flex; list-style:none;}
nav li + li{margin-left:38px;}
nav a{
  font-family:'EB Garamond',serif;
  font-size:16px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--oscuro);
  position:relative;
  padding-bottom:4px;
}
nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--dorado);
  transition:width .25s ease;
}
nav a:hover::after{width:100%;}

@media (max-width:640px){
  header{flex-direction:column; gap:14px; padding:20px 6vw; text-align:center;}
  nav ul{justify-content:center; flex-wrap:wrap;}
  nav li + li{margin-left:22px;}
  nav a{font-size:13px;}
}

/* ---------- Elementos ornamentales reutilizables ---------- */
.divisor{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin:0 auto 24px;
}
.divisor span{width:34px;height:1px;background:var(--dorado);}
.divisor i{width:8px;height:8px;border:1px solid var(--dorado);transform:rotate(45deg);}

.retrato-marco{position:relative; display:inline-block; filter:drop-shadow(0 10px 22px rgba(42,31,20,0.35));}
.retrato-marco img{
  display:block;
  border:3px solid var(--dorado);
  outline:1px solid var(--dorado);
  outline-offset:5px;
}
.esquina{
  position:absolute; width:22px; height:22px;
  border-top:2px solid var(--dorado);
  border-left:2px solid var(--dorado);
}
.esquina.tl{top:-10px; left:-10px;}
.esquina.tr{top:-10px; right:-10px; border-left:none; border-right:2px solid var(--dorado);}
.esquina.bl{bottom:-10px; left:-10px; border-top:none; border-bottom:2px solid var(--dorado);}
.esquina.br{bottom:-10px; right:-10px; border-top:none; border-left:none; border-right:2px solid var(--dorado); border-bottom:2px solid var(--dorado);}

.etiqueta{
  font-family:'EB Garamond',serif; font-weight:500;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--granate); font-size:14px; margin-bottom:14px;
}

.boton{
  display:inline-block;
  font-family:'EB Garamond',serif;
  letter-spacing:2px; text-transform:uppercase; font-size:14px;
  color:var(--marfil); background:var(--granate);
  padding:14px 34px; border:1px solid var(--granate);
  transition:background .25s ease, color .25s ease;
}
.boton:hover{background:transparent; color:var(--granate);}
.boton.secundario{color:var(--marfil); background:transparent; border-color:var(--dorado);}
.boton.secundario:hover{background:var(--dorado); color:var(--oscuro); border-color:var(--dorado);}

footer{
  border-top:1px solid rgba(184,134,11,0.35);
  background:var(--marfil-suave);
  padding:34px 6vw; text-align:center;
  font-size:14px; letter-spacing:1px; color:var(--patron);
}
footer .divisor{margin-bottom:16px;}