/* Shared by proyectos.html and proyecto.html (same palette as index.html and the emails). */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --green-deep: #0D1B16;
    --green-card: #13271F;
    --green-line: #2A3F36;
    --green-forest: #1B4D3E;
    --gold: #C6A962;
    --gold-light: #D4BC7B;
    --cream: #FAFAF8;
    --muted: #9FB0A8;
    --soft: #D8DED9;
    --danger: #E8A4A4;
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--green-deep);
    color: var(--cream);
    line-height: 1.6;
    min-height: 100vh;
}
a { color: var(--gold); }
button { font: inherit; }

.pj-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(13, 27, 22, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--green-line);
}
.pj-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold); }
.pj-logo img { height: 36px; }
.pj-logo span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; font-weight: 600; letter-spacing: 1px; }
.pj-header-right { display: flex; align-items: center; gap: 10px; }
.pj-nav-link { color: var(--soft); text-decoration: none; font-size: 0.85rem; }
.pj-nav-link:hover { color: var(--gold); }
.lang-toggle { display: flex; background: rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 3px; }
.lang-btn { padding: 5px 12px; border: none; background: transparent; color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; font-weight: 600; border-radius: 16px; cursor: pointer; }
.lang-btn.active { background: var(--gold); color: var(--green-deep); }

.pj-main { max-width: 1080px; margin: 0 auto; padding: 32px 16px 64px; }
.pj-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.pj-h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(2.1rem, 6vw, 3.2rem); font-weight: 600; line-height: 1.1; margin: 8px 0 12px; }
.pj-h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.8rem; font-weight: 600; margin: 48px 0 18px; }
.pj-lead { color: var(--soft); font-size: 1.02rem; max-width: 640px; }
.pj-verse { margin-top: 14px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; color: var(--muted); font-size: 1.05rem; }

.pj-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 720px) { .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pj-card {
    display: flex;
    flex-direction: column;
    background: var(--green-card);
    border: 1px solid var(--green-line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
a.pj-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.pj-cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--green-forest), var(--green-deep)); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.pj-cover img { width: 100%; height: 100%; object-fit: cover; }
.pj-card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pj-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.45rem; font-weight: 600; line-height: 1.2; }
.pj-card-text { color: var(--soft); font-size: 0.9rem; }
.pj-card-foot { margin-top: auto; }

.pj-badge { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; background: rgba(198, 169, 98, 0.15); color: var(--gold); border: 1px solid rgba(198, 169, 98, 0.4); }
.pj-badge.muted { background: rgba(255, 255, 255, 0.06); color: var(--muted); border-color: var(--green-line); }

.pj-progress { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pj-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-forest), var(--gold)); transition: width 0.8s ease; }
.pj-stats { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 0.82rem; color: var(--muted); }
.pj-stats strong { color: var(--cream); font-size: 1rem; }

.pj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border: none;
    border-radius: 10px;
    background: var(--gold);
    color: var(--green-deep);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}
.pj-btn:hover { background: var(--gold-light); }
.pj-btn:disabled { opacity: 0.55; cursor: default; }
.pj-btn.ghost { background: transparent; color: var(--gold); border: 1px solid var(--gold); }

.pj-empty { text-align: center; padding: 48px 20px; background: var(--green-card); border: 1px dashed var(--green-line); border-radius: 14px; color: var(--soft); }
.pj-empty-icon { font-size: 2.4rem; }
.pj-empty p { margin: 8px 0 16px; }
.pj-loading { text-align: center; padding: 60px 0; color: var(--muted); }

.pj-footer { text-align: center; padding: 32px 16px 48px; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--green-line); }
.pj-footer strong { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--gold); font-size: 1rem; letter-spacing: 1px; }