/* Cuspide — identità visiva v6.
   REGOLA DEI DUE LINGUAGGI:
   - Il SITO è in chiaro (osso), per leggere i testi lunghi delle pagine SEO.
   - La CARD condivisibile resta SCURA e materica (superficie, grana, rilievo, ombra):
     è l'oggetto del marchio, non cambia mai contesto.
   VARIANTE CHIARA v6: la menta #3DF0AE non si legge sul chiaro; il suo ruolo per
   titoli, linee, accenti e pulsanti lo prende la SUPERFICIE #0C6349 (var --petrolio).
   La menta ricompare solo dentro gli elementi scuri: le card e i riquadri verdi pieni.
   Font auto-ospitati (niente Google Fonts esterno → GDPR-clean). */

/* ---- font auto-ospitati (niente Google Fonts esterno → GDPR-clean) ---- */
/* Fraunces è VARIABILE: un solo file (subset latino) copre tutti i pesi 400-700.
   Serve alla v6 per i titoli in 700 e le frasi in 600. font-optical-sizing:auto
   fa salire il contrasto sui titoli grandi senza altri file. */
@font-face { font-family:'Fraunces'; font-weight:100 900; font-display:swap; src:url('/assets/fonts/fraunces-var.woff2') format('woff2-variations'); }
@font-face { font-family:'Plex Sans'; font-weight:400; font-display:swap; src:url('/assets/fonts/plexsans-400.woff2') format('woff2'); }
@font-face { font-family:'Plex Sans'; font-weight:500; font-display:swap; src:url('/assets/fonts/plexsans-500.woff2') format('woff2'); }
@font-face { font-family:'Plex Sans'; font-weight:600; font-display:swap; src:url('/assets/fonts/plexsans-600.woff2') format('woff2'); }
@font-face { font-family:'Plex Mono'; font-weight:400; font-display:swap; src:url('/assets/fonts/plexmono-400.woff2') format('woff2'); }
@font-face { font-family:'Plex Mono'; font-weight:500; font-display:swap; src:url('/assets/fonts/plexmono-500.woff2') format('woff2'); }

:root {
  /* sito, chiaro (v6). --petrolio = superficie #0C6349: fa titoli/linee/accenti/pulsanti */
  --osso:#FBFAF7; --inchiostro:#16161A; --petrolio:#0C6349; --menta:#3DF0AE;
  --grigio:#55564F; --linea:#DDDACE; --sfondo2:#EEEBE2;
  /* card e oggetti scuri (v6): la menta vive qui */
  --c-bg:#04241E; --c-surf:#0C6349; --c-surf2:#12805F; --c-accent:#3DF0AE; --c-soft:#8FF0CB; --c-ink:#FBFAF7;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:'Plex Mono', ui-monospace, 'Consolas', monospace;
  --max:900px;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--osso); color:var(--inchiostro); font-family:var(--sans); font-size:16px; line-height:1.62; }
img { max-width:100%; height:auto; }
a { color:var(--petrolio); }

.mono, .eyebrow, .marchio, time, .etichetta { font-family:var(--mono); font-weight:500; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; }
.eyebrow { color:var(--petrolio); display:inline-block; margin-bottom:.7rem; }

/* v6: titoli in Fraunces 700, spaziatura −0,045em (come l'app). Il carattere pesante
   è la modifica che fa il 70% della differenza tra v5 e v6: vale anche sul sito. */
h1,h2,h3 { font-family:var(--serif); line-height:1.1; }
h1 { font-weight:700; letter-spacing:-.045em; line-height:1.06; font-size:clamp(2.1rem,6vw,3.4rem); margin:0 0 1rem; }
h2 { font-weight:700; letter-spacing:-.045em; font-size:clamp(1.5rem,4vw,2.1rem); margin:2.6rem 0 .8rem; padding-bottom:.5rem; border-bottom:1.5px solid var(--petrolio); }
h3 { font-weight:600; letter-spacing:-.035em; font-size:1.2rem; margin:1.6rem 0 .4rem; color:var(--petrolio); }

/* la "cuspide": linea sottile del marchio. Sul chiaro la menta non si legge → superficie (v6) */
.cuspide { border:0; height:0; border-top:2px solid var(--petrolio); width:72px; margin:1.4rem 0; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }

/* header / nav */
.sito-header { border-bottom:1.5px solid var(--linea); }
.sito-header .wrap { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; }
.logo { font-family:var(--serif); font-weight:700; letter-spacing:-.03em; font-size:1.5rem; text-decoration:none; color:var(--inchiostro); display:inline-flex; align-items:center; gap:11px; }
.logo .segno { display:inline-block; width:26px; height:26px; border:2px solid var(--osso); border-radius:50%; position:relative; background:var(--petrolio); }
.logo .segno::after { content:""; position:absolute; left:50%; top:5px; bottom:5px; width:2px; transform:translateX(-50%); background:var(--menta); }
.nav a { font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; text-decoration:none; color:var(--inchiostro); margin-left:20px; }
.nav a:hover { color:var(--petrolio); }

.hero { padding:72px 0 40px; }
.hero p.lead { font-family:var(--serif); font-weight:600; letter-spacing:-.035em; font-size:1.35rem; line-height:1.3; max-width:34ch; color:var(--inchiostro); }

/* pulsanti */
.btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; align-items:center; }
.btn { font-family:var(--mono); font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; text-decoration:none; padding:14px 22px; border-radius:12px; cursor:pointer; border:1.5px solid var(--petrolio); color:var(--petrolio); background:transparent; display:inline-flex; align-items:center; gap:9px; }
.btn-primario { background:var(--petrolio); border-color:var(--petrolio); color:var(--osso); }
.btn-store { background:var(--inchiostro); border-color:var(--inchiostro); color:var(--osso); position:relative; }
.btn-store.disabilitato { opacity:.4; pointer-events:none; }
.nota-store { font-family:var(--mono); font-size:.68rem; color:var(--grigio); text-transform:uppercase; letter-spacing:.06em; margin-top:12px; }

/* griglia + schede chiare */
.griglia { display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); margin:32px 0; }
.scheda { border:1.5px solid var(--linea); border-radius:12px; padding:22px; background:var(--osso); }
.scheda h3 { margin-top:0; }
a.scheda { text-decoration:none; color:inherit; }
a.scheda:hover { border-color:var(--petrolio); }

/* ---------- LA CARD: oggetto scuro materico (v5 §5) ---------- */
.card-obj { aspect-ratio:9/16; border-radius:14px; overflow:hidden; position:relative; background:var(--c-surf);
  box-shadow:0 10px 26px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.22) inset; padding:24px 20px; display:flex; flex-direction:column; }
.card-obj::before { content:""; position:absolute; inset:0; z-index:1; background-image:radial-gradient(rgba(255,255,255,.09) .7px, transparent .7px); background-size:3px 3px; opacity:.62; }
.card-obj::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(177deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.20) 100%); }
.card-obj > * { position:relative; z-index:2; }
.card-obj .ctop { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.card-obj .k { font-family:var(--mono); font-weight:500; font-size:.6rem; letter-spacing:.18em; color:var(--c-accent); }
.card-obj .tono { font-family:var(--mono); font-weight:500; font-size:.52rem; letter-spacing:.16em; text-transform:uppercase; color:var(--c-soft); white-space:nowrap; }
.card-obj .center { flex:1; display:flex; align-items:center; }
.card-obj .qq { font-family:var(--serif); font-weight:600; font-size:1.5rem; line-height:1.16; letter-spacing:-.035em; color:var(--c-ink); }
.card-obj .qq-sm { font-size:1.12rem; }
.card-obj .expl { font-family:var(--sans); font-size:.72rem; color:var(--c-soft); margin-bottom:9px; }
.card-obj .cuspi { height:2.5px; border-radius:1px; background:linear-gradient(180deg, rgba(0,0,0,.5) 0 46%, var(--c-accent) 46% 100%); margin:6px 0 9px; }
.card-obj .foot { display:flex; justify-content:space-between; align-items:center; }
.card-obj .w { font-family:var(--mono); font-size:.6rem; letter-spacing:.26em; color:var(--c-soft); }
.card-obj .g { font-size:1.1rem; color:var(--c-accent); line-height:1; }

/* pastiglia glifo (v5): quadrato pieno, glifo osso; utente = invertito menta */
.glifo-pill { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:var(--petrolio); color:var(--osso); font-size:1.05rem; }
.glifo-pill.utente { background:var(--menta); color:var(--c-bg); }

/* contenuto SEO + FAQ */
article.contenuto p { max-width:66ch; }
.faq { margin-top:8px; }
.faq details { border-top:1px solid var(--linea); padding:14px 0; }
.faq summary { font-family:var(--serif); font-weight:600; letter-spacing:-.025em; font-size:1.12rem; cursor:pointer; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"→ "; color:var(--petrolio); }
.faq details[open] summary::before { content:"↓ "; }

.cta-scarica { border:1.5px solid var(--petrolio); border-radius:12px; padding:24px; margin:40px 0; background:var(--sfondo2); }
.cta-scarica h3 { margin-top:0; color:var(--petrolio); }

.provvisorio { background:#e9efe9; border:1px dashed var(--petrolio); font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--petrolio); padding:8px 12px; border-radius:6px; display:inline-block; margin-bottom:16px; }

/* calcolatore creator */
.calc { border:1.5px solid var(--linea); border-radius:12px; padding:26px; margin:28px 0; }
.calc .riga { margin:18px 0; }
.calc label { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; display:flex; justify-content:space-between; }
.calc input[type=range] { width:100%; accent-color:var(--petrolio); margin-top:8px; }
.calc input[type=date] { font-family:var(--mono); font-size:1rem; padding:10px; border:1.5px solid var(--linea); border-radius:10px; width:100%; margin-top:8px; background:#fff; }
.calc .valore { color:var(--petrolio); font-weight:600; }
.risultati { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); margin-top:22px; }
.metrica { border:1.5px solid var(--linea); border-radius:10px; padding:18px; }
.metrica .n { font-family:var(--serif); font-weight:700; letter-spacing:-.055em; font-size:2rem; color:var(--petrolio); line-height:1; }
.metrica .et { font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.05em; margin-top:6px; }
.metrica .banda { font-family:var(--mono); font-size:.68rem; color:var(--grigio); margin-top:8px; }
.nota-onesta { font-size:.92rem; border-left:3px solid var(--petrolio); padding-left:14px; margin-top:18px; }
.fondatori { border:2px solid var(--petrolio); border-radius:12px; padding:24px; margin:28px 0; }
.fondatori .posti { font-family:var(--mono); color:var(--petrolio); font-size:1.05rem; }

/* ---------- Ruota della compatibilità (segni solari) ---------- */
.ruota-compat { margin:26px 0 8px; text-align:center; }
.rc-svg { width:100%; max-width:460px; height:auto; display:block; margin:0 auto; touch-action:manipulation; }
.rc-set { fill:#EFEDE6; stroke:#FBFAF7; stroke-width:2.5; transition:fill .12s; }
.rc-sec:not(.on):hover .rc-set { fill:#E2E8DF; }
.rc-sec.on .rc-set { fill:#0C6349; }
.rc-sym { fill:#16161A; font-size:28px; }
.rc-nom { fill:#55564F; font-family:var(--sans); font-weight:500; font-size:12.5px; letter-spacing:.02em; }
.rc-sec.on .rc-sym { fill:#3DF0AE; }
.rc-sec.on .rc-nom { fill:#8FF0CB; }
.rc-centro { fill:#0C6349; }
.rc-big { font-family:var(--serif); font-weight:700; }
.rc-big.q { font-size:38px; fill:#8FF0CB; }
.rc-big.glyph { font-size:42px; fill:#3DF0AE; }
.rc-big.score { font-size:70px; fill:#3DF0AE; letter-spacing:-.04em; }
.rc-small { font-family:var(--mono); font-size:10px; fill:#8FF0CB; letter-spacing:.14em; }
.rc-guida { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--petrolio); margin-top:14px; min-height:1em; }
.rc-esito { margin-top:12px; }
.rc-esito .provvisorio { margin-bottom:12px; }
.rc-frase { font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:-.02em; color:var(--inchiostro); max-width:32ch; margin:0 auto 8px; line-height:1.3; }
.rc-nomi { font-family:var(--sans); font-size:12px; color:#55564F; }
.rc-leggi { display:inline-block; margin-top:12px; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--petrolio); text-decoration:none; }
.rc-leggi:hover { text-decoration:underline; }
.rc-ricomincia { display:block; margin:16px auto 0; background:transparent; border:0; cursor:pointer; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--grigio); }
.rc-verita { margin:22px auto 0; max-width:46ch; }
.rc-verita p { font-family:var(--sans); font-size:.9rem; color:var(--grigio); margin:0 0 14px; }
.rc-verita .btn { text-decoration:none; }

/* ---------- Selettore astrologia (posizione + segno) ---------- */
.sel-astro { margin:24px 0 10px; }
.sel-riga { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.sel-pill { font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; padding:9px 14px; border-radius:10px; border:0; background:#EFEDE6; color:var(--inchiostro); cursor:pointer; transition:background .12s; }
.sel-pill:hover { background:#E2E8DF; }
.sel-pill.on { background:#0C6349; color:var(--osso); }
.sel-guida { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--grigio); margin:4px 0 0; min-height:1em; }

/* footer */
.sito-footer { border-top:1.5px solid var(--linea); margin-top:64px; padding:40px 0; }
.sito-footer .wrap { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; }
.sito-footer a { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; color:var(--inchiostro); }
.sito-footer .col a { display:block; margin:6px 0; }
.sito-footer .marchio-f { font-family:var(--serif); font-weight:700; letter-spacing:-.03em; }

.breadcrumb { font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--grigio); margin:24px 0 0; }
.breadcrumb a { color:var(--inchiostro); text-decoration:none; }

/* documenti legali */
.legale table { width:100%; border-collapse:collapse; margin:14px 0 22px; font-size:.92rem; }
.legale th { background:var(--petrolio); color:var(--osso); text-align:left; padding:9px 11px; font-weight:500; font-family:var(--sans); }
.legale td { padding:9px 11px; border-bottom:1px solid var(--linea); vertical-align:top; }
.legale blockquote { border-left:3px solid var(--petrolio); margin:18px 0; padding:4px 0 4px 16px; color:var(--grigio); }
.legale h2 { font-size:1.5rem; }
.legale ul { max-width:70ch; }

@media (max-width:620px) { .sito-header .wrap { flex-direction:column; gap:12px; align-items:flex-start; } .nav a { margin:0 14px 0 0; } }