:root{
  --bg:#06070b;
  --bg-soft:#0b0d13;
  --panel:rgba(13,15,22,.86);
  --panel-strong:#10131a;
  --line:rgba(255,255,255,.08);
  --text:#e6e0d4;
  --text-dim:#a5a0a3;
  --gold:#c8a05a;
  --violet:#a87cff;
  --green:#6cbf7d;
  --blue:#78a8ff;
  --teal:#6fb4c0;
  --red:#c66a6a;
  --shadow:0 24px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 10%, rgba(166,124,255,.10), transparent 25%),
    radial-gradient(circle at 80% 15%, rgba(200,160,90,.10), transparent 20%),
    linear-gradient(180deg, #04050a 0%, #080a10 48%, #050608 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(4,5,10,.08), rgba(4,5,10,.22) 62%, rgba(4,5,10,.45));
  z-index:-4;
}
body .cosmic-bg,
body .stars{
  position:fixed;
  inset:0;
  pointer-events:none;
}
body .cosmic-bg{
  background:
    radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%239b59b6" fill-opacity="0.10" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,128,1344,112,1392,96L1440,96L1440,320L0,320Z"></path></svg>');
  background-size:cover;
  background-position:center;
  z-index:-3;
  opacity:.9;
}
body .stars{
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0));
  background-repeat:repeat;
  background-size:200px 200px;
  opacity:.24;
  z-index:-2;
  animation:twinkle 5s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:.22}
  50%{opacity:.38}
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.14) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.10) 0 1px, transparent 1px),
    radial-gradient(circle at 55% 70%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 25% 80%, rgba(255,255,255,.12) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,.10) 0 1px, transparent 1px);
  background-size:420px 420px, 520px 520px, 600px 600px, 700px 700px, 800px 800px;
  opacity:.5;
}
a{color:inherit;text-decoration:none}
.shell{
  width:min(1500px, calc(100vw - 32px));
  margin:16px auto;
  background:linear-gradient(180deg, rgba(18,20,27,.76), rgba(8,9,13,.82));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.shell::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg, transparent 10%, rgba(200,160,90,.08) 35%, transparent 60%);
  pointer-events:none;
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 20px;
  background:rgba(5,7,10,.75);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:5;
  backdrop-filter:blur(12px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1.08rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.brand-mark{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(200,160,90,.45);
  display:grid;
  place-items:center;
  color:var(--gold);
  box-shadow:0 0 18px rgba(200,160,90,.12);
}
.nav{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  font-size:1rem;
}
.nav a{
  color:var(--text-dim);
  padding:6px 2px;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--text);border-bottom-color:var(--gold)}
.hero{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
  align-items:center;
  padding:44px 28px 28px;
  min-height:520px;
  position:relative;
}
.hero-copy{max-width:660px;position:relative;z-index:2}
.hero-kicker{
  font-size:.82rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.hero h1{
  margin:0;
  font-family:"IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  font-size:clamp(2.6rem, 5vw, 4.9rem);
  line-height:.95;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.hero-subtitle{
  margin:18px 0 8px;
  font-size:clamp(1.35rem, 2.2vw, 1.9rem);
  color:#f0dc9e;
  max-width:22ch;
}
.hero-tagline{
  margin:18px 0 0;
  color:var(--text);
  font-family:"IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  max-width:68ch;
  font-size:clamp(1rem, 1.45vw, 1.28rem);
  line-height:1.45;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-actions{display:none}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid rgba(168,124,255,.55);
  background:linear-gradient(180deg, rgba(24,26,36,.9), rgba(10,12,18,.9));
  color:#fff;
  font-size:1.02rem;
  box-shadow:0 0 0 1px rgba(168,124,255,.15), 0 10px 30px rgba(0,0,0,.25);
}
.button:hover{border-color:rgba(200,160,90,.75);transform:translateY(-1px)}
.button.secondary{border-color:rgba(255,255,255,.12);color:var(--text)}
.hero-art{
  min-height:420px;
  position:relative;
  display:grid;
  place-items:center;
}
.portal{
  width:min(100%, 520px);
  aspect-ratio:1/1;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(200,160,90,.18);
  background:
    radial-gradient(circle at 50% 50%, rgba(32,28,45,.2) 0 16%, transparent 16% 24%, rgba(168,124,255,.12) 24% 35%, transparent 35% 100%),
    radial-gradient(circle at 50% 44%, rgba(168,124,255,.9) 0 5%, rgba(20,18,28,.25) 8% 22%, transparent 22% 30%),
    radial-gradient(circle at 50% 51%, rgba(0,0,0,.96) 0 36%, rgba(20,18,28,.6) 36% 39%, rgba(168,124,255,.16) 39% 45%, transparent 45% 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.65), 0 0 80px rgba(168,124,255,.08), 0 0 0 1px rgba(255,255,255,.02);
}
.portal::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  border:1px solid rgba(200,160,90,.18);
  box-shadow:0 0 0 24px rgba(255,255,255,.01), 0 0 60px rgba(168,124,255,.09);
  pointer-events:none;
}
.portal::after{
  content:"";
  position:absolute;
  inset:20px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 58%, rgba(255,255,255,.06) 0 1px, transparent 1px),
    radial-gradient(circle at 60% 63%, rgba(255,255,255,.06) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12));
  filter:blur(.2px);
  pointer-events:none;
}
.portal-image{
  position:absolute;
  inset:10px;
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  clip-path:circle(50% at 50% 50%);
  filter:contrast(1.02) saturate(.88) brightness(.92);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -44px 64px rgba(0,0,0,.34);
}
.section{
  padding:0 28px 28px;
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 16px;
}
.section-title{
  margin:0;
  font-size:1.12rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#d5b26a;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.card,
.site-card{
  position:relative;
  background:linear-gradient(180deg, rgba(18,20,28,.92), rgba(10,12,17,.96));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  min-height:178px;
  padding:18px 18px 16px 18px;
  display:grid;
  grid-template-columns:72px 1fr;
  gap:14px;
  box-shadow:0 16px 34px rgba(0,0,0,.25);
}
.site-card{
  color:inherit;
  text-decoration:none;
}
.card::before,
.site-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 32%, transparent 68%, rgba(255,255,255,.06));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.card:hover,
.site-card:hover{transform:translateY(-2px);border-color:rgba(200,160,90,.25)}
.card-icon{
  width:72px;
  height:72px;
  border-radius:18px;
  background:radial-gradient(circle at 50% 25%, rgba(255,255,255,.18), transparent 55%), rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  font-size:2rem;
  box-shadow:inset 0 0 30px rgba(0,0,0,.28);
}
.card h3{
  margin:0;
  font-size:1.34rem;
  line-height:1.1;
}
.card p{
  margin:8px 0 0;
  color:var(--text-dim);
  font-size:1.03rem;
  line-height:1.58;
}
.badge-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  border:1px solid rgba(255,255,255,.12);
  color:#f0dfc0;
  background:rgba(255,255,255,.03);
}
.badge.activo{color:#bbf4c6;border-color:rgba(108,191,125,.25);background:rgba(108,191,125,.10)}
.badge.beta{color:#f8e0a3;border-color:rgba(200,160,90,.25);background:rgba(200,160,90,.10)}
.badge.desarrollo{color:#d0ddff;border-color:rgba(120,168,255,.25);background:rgba(120,168,255,.10)}
.badge.privado{color:#dac9ff;border-color:rgba(168,124,255,.25);background:rgba(168,124,255,.10)}
.panel{
  display:block;
}
.timeline,
.archive{
  background:linear-gradient(180deg, rgba(14,16,22,.92), rgba(10,11,15,.94));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px;
  box-shadow:0 16px 34px rgba(0,0,0,.25);
}
.timeline-item{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:14px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
.timeline-item:first-child{border-top:0;padding-top:0}
.timeline-item time{color:#cab883;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}
.timeline-item strong{display:block;margin-bottom:4px;font-size:1.12rem}
.timeline-item p{margin:0;color:var(--text-dim);font-size:1.03rem;line-height:1.6}
.poem-block{
  margin:0;
  padding:24px 28px 26px;
  border-top:1px solid rgba(200,160,90,.16);
  background:rgba(5,7,10,.42);
}
.poem-kicker{
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}
.poem-text{
  margin:0;
  white-space:pre-wrap;
  font-family:"IM Fell English SC", "Cormorant Garamond", Georgia, serif;
  font-size:clamp(1rem, 1.50vw, 1.18rem);
  line-height:1.62;
  letter-spacing:.05em;
  color:var(--text);
  text-align:center;
}
.poem-wide{
  width:100%;
  max-width:none;
}
.archive-layout{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
}
.projects-panel{
  min-width:0;
}
.projects-panel .grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.poem-column{
  margin-top:0;
}
.archive-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px}
.archive-card{
  display:flex;
  flex-direction:column;
  min-height:152px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(24,26,34,.92), rgba(10,11,15,.94));
  cursor:pointer;
}
.archive-card:focus-visible{outline:2px solid rgba(200,160,90,.7);outline-offset:3px}
.archive-card h4{margin:8px 0 6px;font-size:1.12rem}
.archive-card p{margin:0;color:var(--text-dim);line-height:1.55;font-size:1.03rem}
.archive-card .badge{margin-top:10px}
.archive-accept-note{margin-top:auto;padding-top:14px}
.archive-vote-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:8px;
}
.archive-vote{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  border:1px solid rgba(200,160,90,.35);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(42,43,51,.9), rgba(18,19,26,.94));
  color:var(--text);
  cursor:pointer;
  font:inherit;
}
.archive-vote:hover{border-color:rgba(200,160,90,.7)}
.archive-vote.is-saving{opacity:.72;pointer-events:none}
.archive-vote.is-selected{
  border-color:rgba(200,160,90,.78);
  background:linear-gradient(180deg, rgba(68,58,38,.95), rgba(24,22,18,.96));
}
.archive-vote-count{min-width:2ch;text-align:left}
.site-card .badge-row{margin-top:10px}
.footer{
  padding:18px 28px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-top:1px solid var(--line);
  color:var(--text-dim);
  background:rgba(5,7,10,.72);
}
.footer small{display:block;font-size:1.02rem;line-height:1.65}
.nav,
.footer-links{display:none}
@media (max-width: 1100px){
  .hero{grid-template-columns:1fr}
  .hero-art{min-height:320px}
  .grid,.archive-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .archive-layout{grid-template-columns:1fr}
  .projects-panel .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 720px){
  .shell{width:calc(100vw - 18px);margin:9px auto;border-radius:14px}
  .topbar,.hero,.section,.poem-block,.footer{padding-left:14px;padding-right:14px}
  .hero{padding-top:28px;min-height:auto}
  .hero-subtitle{max-width:none}
  .grid,.archive-grid{grid-template-columns:1fr}
  .card,.site-card{grid-template-columns:64px 1fr}
  .card-icon{width:64px;height:64px}
  .timeline-item{grid-template-columns:1fr;gap:6px}
  .footer{flex-direction:column;align-items:flex-start}
  .projects-panel .grid{grid-template-columns:1fr}
}