/* ============================================================
   project.css — Plantilla compartida para páginas de proyecto
   (proyectos/eneagrama/, y cualquier proyecto futuro que siga
   el mismo patrón: logo + volver, título, intro, checklist,
   nota de privacidad, botón de inicio).
   Los tokens de color/tipografía viven en site.css.
   ============================================================ */

body{
  min-height:100vh;
  background:radial-gradient(ellipse at 50% 0%, var(--void-2), var(--void) 70%);
  line-height:1.7;
}

header{ padding:1.6rem 6vw; display:flex; align-items:center; justify-content:space-between; }
.brand-logo{ display:block; height:60px; }
.brand-logo img{ height:100%; width:auto; display:block; }
.back-link{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none; color:var(--gold-bright); border-bottom:1px solid transparent; transition:border-color .3s;
}
.back-link:hover{ border-color:var(--gold-bright); }

main{ max-width:640px; margin:0 auto; padding:6vh 6vw 10vh; text-align:center; }

main h1{
  font-style:italic; margin:0 0 2rem;
  font-size:clamp(2rem, 5vw, 3rem); color:var(--parchment);
}
.intro p{ color:var(--parchment-dim); font-size:1.05rem; margin:0 0 1.3rem; text-align:left; }
.intro p strong{ color:var(--parchment); font-weight:600; }

/* Lista en dos columnas reales: la columna de la derecha siempre
   empieza en el mismo punto, aunque la etiqueta de la izquierda ocupe varias líneas. */
.checklist{ list-style:none; padding:0; margin:2.6rem 0; text-align:left; }
.checklist li{
  display:grid; grid-template-columns:180px 1fr; gap:0.3rem 1.6rem;
  align-items:start; margin-bottom:1.6rem; padding-left:1.4rem; position:relative;
}
.checklist li::before{ content:"◆"; position:absolute; left:0; top:0.3em; color:var(--gold); font-size:0.6rem; }
.checklist .label{ color:var(--parchment); font-weight:600; font-size:0.98rem; }
.checklist .desc{ color:var(--parchment-dim); font-size:0.98rem; }
@media (max-width:520px){
  .checklist li{ grid-template-columns:1fr; gap:0.25rem; }
}

.privacy-note{
  margin:2.6rem 0; padding:1.3rem 1.5rem; border:1px solid rgba(209,172,95,0.25);
  background:rgba(23,19,16,0.4); border-radius:2px; text-align:left;
}
.privacy-note p{ margin:0; color:var(--parchment-dim); font-size:0.92rem; }
.privacy-note strong{ color:var(--gold-bright); }

.start-btn{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
  background:var(--gold); color:var(--ink); border:none; padding:1rem 2.4rem; border-radius:999px;
  cursor:pointer; margin-top:1rem; transition:transform .2s ease, background .3s ease;
  text-decoration:none; display:inline-block;
}
.start-btn:hover{ transform:translateY(-2px); background:var(--gold-bright); }

.start-note{
  margin-top:1.2rem; font-family:var(--mono); font-size:0.72rem; color:var(--parchment-dim);
  opacity:0; transform:translateY(-4px); transition:opacity .3s ease, transform .3s ease;
}
.start-note.show{ opacity:1; transform:translateY(0); }