/* ============================================================
   CODEX EXPERIENCE — hoja de estilos compartida
   ============================================================ */

:root{
  --ink:#0c0906;
  --ink-2:#17120c;
  --ink-3:#221a12;
  --rule:#3a2a1c;
  --parchment:#e9dfc4;
  --parchment-dim:#a99a78;
  --blood:#7a1420;
  --blood-bright:#b3202c;
  --gold:#c6a15b;
  --gold-dim:#8a7040;
  --gold-bright:#e4c47e;
  --shadow: 0 20px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:'EB Garamond', Georgia, serif;
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}

h1,h2,h3{
  font-family:'Cinzel', 'Times New Roman', serif;
  font-weight:600;
  letter-spacing:.02em;
  text-wrap:balance;
  margin:0;
  color:var(--gold);
}

.eyebrow{
  font-family:'Space Mono', monospace;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:12.5px;
  color:var(--parchment-dim);
  display:inline-flex;
  align-items:center;
  gap:.65em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--blood-bright);
  display:inline-block;
}

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding-inline:24px;
}
.prose{max-width:66ch;}

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

/* ---------------- top nav ---------------- */
.sitenav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:14px 24px;
  background:rgba(12,9,6,.86);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.sitenav .brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  color:var(--gold);
  font-family:'Cinzel', serif;
  font-size:1rem;
  letter-spacing:.04em;
}
.sitenav .brand img{width:34px; height:34px; object-fit:contain; flex-shrink:0;}
.sitenav .links{
  display:flex; gap:26px;
  list-style:none; margin:0; padding:0;
  flex-wrap:wrap;
}
.sitenav .links a{
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--parchment-dim);
  text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.sitenav .links a:hover, .sitenav .links a.active{
  color:var(--gold);
  border-color:var(--blood-bright);
}

/* ---------------- page hero (subpages) ---------------- */
.page-hero{
  min-height:46vh;
  display:flex; align-items:flex-end;
  padding-block:64px 40px;
}
.page-hero .wrap{width:100%;}
.page-hero h1{font-size:clamp(2.2rem, 5.5vw, 3.4rem); line-height:1.05;}
.page-hero .tagline{
  font-family:'EB Garamond', serif; font-style:italic;
  color:var(--parchment); opacity:.92;
  max-width:52ch; margin-top:14px;
  font-size:clamp(1rem, 1.6vw, 1.2rem);
}
.hero-graveyard-bg{background:linear-gradient(180deg, rgba(10,7,5,.4) 0%, rgba(10,7,5,.65) 55%, var(--ink) 100%), linear-gradient(0deg, rgba(122,20,32,.26), rgba(122,20,32,.04) 55%), url("hero-graveyard.jpg") center 30%/cover no-repeat;}
.hero-pentagram-bg{background:linear-gradient(180deg, rgba(10,7,5,.4) 0%, rgba(10,7,5,.65) 55%, var(--ink) 100%), linear-gradient(0deg, rgba(122,20,32,.26), rgba(122,20,32,.04) 55%), url("pentagram-floor.jpg") center 25%/cover no-repeat;}
.hero-stage-bg{background:linear-gradient(180deg, rgba(10,7,5,.4) 0%, rgba(10,7,5,.65) 55%, var(--ink) 100%), linear-gradient(0deg, rgba(122,20,32,.26), rgba(122,20,32,.04) 55%), url("stage-crowd.jpg") center 35%/cover no-repeat;}

/* ---------------- sections ---------------- */
section{padding-block:80px; position:relative;}
section.tight{padding-block:56px;}
section.on-2{background:var(--ink-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}

.stat-row{display:flex; flex-wrap:wrap; gap:14px; margin-block:36px 44px;}
.stat{
  flex:1 1 200px;
  border:1px solid var(--rule);
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
  padding:20px 22px;
}
.stat .n{font-family:'Cinzel', serif; color:var(--gold); font-size:1.9rem; display:block;}
.stat .l{font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-dim);}

.frame-photo{position:relative; border:1px solid var(--rule); margin-block:40px;}
.frame-photo img{filter:sepia(.25) saturate(1.15) contrast(1.05);}
.frame-photo .cap{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:.05em;
  color:var(--parchment-dim); padding:12px 16px;
  border-top:1px solid var(--rule); background:var(--ink-2);
}

.logi-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px;}
.logi-list li{padding-left:30px; position:relative; color:var(--parchment); opacity:.94;}
.logi-list li::before{content:"✦"; position:absolute; left:0; top:2px; color:var(--blood-bright); font-size:.85em;}
.logi-list strong{color:var(--gold); font-weight:600;}

.compare{width:100%; border-collapse:collapse; margin-block:8px 12px; font-size:.96rem;}
.compare caption{text-align:left; font-family:'Space Mono', monospace; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--parchment-dim); margin-bottom:14px;}
.compare th, .compare td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--rule); vertical-align:top;}
.compare thead th{font-family:'Cinzel', serif; font-weight:600; color:var(--gold); font-size:.92rem; letter-spacing:.03em; border-bottom:1px solid var(--gold-dim);}
.compare tbody th{font-family:'EB Garamond', serif; font-style:italic; font-weight:500; color:var(--parchment-dim); width:34%;}
.compare td.codex{color:var(--parchment); position:relative;}
.compare td.codex::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--blood-bright);}
.compare-scroll{overflow-x:auto;}
@media (max-width:640px){ .compare{min-width:560px;} }

.file-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule);}
@media (max-width:680px){ .file-grid{grid-template-columns:1fr;} }
.file-item{background:var(--ink-2); padding:26px 28px;}
.file-item .k{font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blood-bright); display:block; margin-bottom:10px;}
.file-item .v{color:var(--parchment); font-size:1.02rem;}

.cta{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Cinzel', serif; letter-spacing:.06em;
  color:var(--ink); background:var(--gold);
  padding:16px 34px; text-decoration:none;
  border:1px solid var(--gold);
  transition:background .2s ease, color .2s ease;
}
.cta:hover, .cta:focus-visible{background:transparent; color:var(--gold);}
.cta svg{width:18px; height:18px;}
.cta.ghost{background:transparent; color:var(--gold);}
.cta.ghost:hover{background:var(--gold); color:var(--ink);}

.dev-note{
  border:1px dashed var(--gold-dim);
  background:rgba(198,161,91,.05);
  padding:16px 20px;
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  color:var(--parchment-dim);
  margin-block:22px;
}
.dev-note strong{color:var(--gold);}

.contact-grid{display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-bottom:10px;}
.contact-card{border:1px solid var(--rule); background:rgba(12,9,6,.55); padding:18px 26px; min-width:220px;}
.contact-card .k{font-family:'Space Mono', monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--parchment-dim); display:block; margin-bottom:8px;}
.contact-card a{color:var(--gold); text-decoration:none; font-family:'Cinzel', serif; font-size:1rem;}
.contact-card a:hover, .contact-card a:focus-visible{color:var(--blood-bright);}

footer.sitefoot{
  padding-block:34px;
  text-align:center;
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:.1em;
  color:var(--parchment-dim);
  background:var(--ink);
  border-top:1px solid var(--rule);
}
footer.sitefoot a{color:var(--parchment-dim);}

@media (max-width:640px){
  .sitenav{flex-wrap:wrap;}
  .sitenav .links{gap:16px;}
}