:root {
    --bg-crema: #f8f9ff;
    --terra-calda: #e63329;
    --terra-dark: #c72a21;
    --verde-salvia: #7d9482;
    --testo-scuro: #2d2926;
    --testo-chiaro: #6b645f;
    --bianco: #ffffff;
    --shadow: 0 10px 30px rgba(45, 41, 38, 0.05);
    --radius: 16px;
    --myself-rosso: #e63329;
    --myself-blu-notte: #1a1a5e;
    --myself-blu-chiaro: #2d2d8e;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-crema);
    color: var(--testo-scuro);
    line-height: 1.6;
}

/* Barretta rossa sotto i titoli principali, coerente con app.html (.card h2) */
h1, h2:not(.section-title) {
    width: fit-content;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--myself-rosso);
}
.section-title {
    position: relative;
    padding-bottom: 16px;
}
.section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--myself-rosso);
}

/* Menu di navigazione comune — pagine pubbliche */
.nav-bar {
    background-color: var(--bianco);
    border-bottom: 1px solid rgba(26, 26, 94, 0.12);
    padding: 0;
}
.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 0;
}
.nav-brand { display: flex; align-items: center; }
.nav-logo { height: 44px; width: auto; display: block; }
.nav-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}
.nav-link {
    color: var(--myself-blu-notte);
    text-decoration: none;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--myself-blu-chiaro); text-decoration: underline; }
.nav-cta {
    background-color: var(--myself-blu-notte);
    color: var(--bianco);
    padding: 10px 20px;
    border-radius: var(--radius);
    border-bottom: none;
}
.nav-cta:hover { background-color: var(--myself-blu-chiaro); color: var(--bianco); text-decoration: none; }
body.pg-spazio .nav-link[href="spazio-costellazioni.php"],
body.pg-prenota .nav-link[href="prenota-costellazione-individuale.php"] {
    border-bottom: 2px solid var(--myself-rosso);
}
@media (max-width: 700px) {
    .nav-wrap { flex-direction: column; align-items: flex-start; }
    .nav-menu { width: 100%; justify-content: flex-start; }
}

/* Footer comune — link informativa privacy */
.nav-footer-link {
    color: var(--myself-blu-notte);
    text-decoration: none;
}
.nav-footer-link:hover { color: var(--myself-blu-chiaro); text-decoration: underline; }