/* personalita.css — componenti condivisi (testata, piè, stato, pillole)
   Caricato dopo ridgeline.css per tutto il sito. */

/* ===== palette e variabili condivise ===== */
:root {
  --live: #429e5c;
  --soft: #f5f6f7; --deep: #133153; --deep-2: #0e1c32;
  --line: #e4e7e5; --line-soft: rgba(18,22,27,.12);
  --shadow-card: 0 2px 12px rgba(0,0,0,.05); --shadow-pop: 0 8px 24px rgba(0,0,0,.12);
  --sans: "Instrument Sans", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* verde vivo: un solo significato, "in esercizio adesso" */
.vivo-punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; vertical-align: 1px; animation: vivo 2.6s ease-out infinite }
@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgba(66,158,92,.5) } 70%, 100% { box-shadow: 0 0 0 7px rgba(66,158,92,0) } }
@media (prefers-reduced-motion: reduce) { .vivo-punto { animation: none; box-shadow: 0 0 0 4px rgba(66,158,92,.18) } }
.stato .dx .vivo-voce { display: inline-flex; align-items: center; gap: 10px; color: var(--ink) }

/* barra di stato */
.stato { display: flex; justify-content: space-between; gap: 16px; padding: 4px 8px 14px; color: var(--muted) }
.stato .dx { display: flex; gap: 22px }

/* testata: targa che resta in alto dentro il pozzo */
header.testata { position: sticky; top: 16px; z-index: 20; margin-bottom: 16px }
.targa { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 10px 0 24px; border-radius: 20px;
  background: rgba(255,255,255,.86); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-card) }
.marchio { font: 700 22px/1 var(--sans); letter-spacing: -.04em; text-decoration: none; color: var(--ink) }
.voci { display: flex; align-items: center; gap: 26px }
.voci a { text-decoration: none; color: var(--muted); transition: color 150ms var(--ease) }
.voci a:hover { color: var(--ink) }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 28px; border: 0; cursor: pointer;
  font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; text-decoration: none; transition: background 200ms var(--ease), color 200ms var(--ease) }
.pill.piena { background: var(--deep); color: #fff }
.pill.piena:hover { background: var(--deep-2) }
.pill.chiara { background: #fff; color: var(--deep) }
.pill.chiara:hover { background: #e9eef4 }
.pill.vuota { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-soft) }
.pill.vuota:hover { box-shadow: inset 0 0 0 1px var(--ink) }
.pill .fr { transition: transform 250ms var(--ease) } .pill:hover .fr { transform: translateX(3px) }
.voci .pill, .voci .pill:hover { color: #fff }
.apri { display: none; height: 44px; padding: 0 18px; border-radius: 28px; border: 1px solid var(--line-soft); background: #fff; color: var(--ink); cursor: pointer; font: 500 14px/1 var(--mono); letter-spacing: .0625rem; text-transform: uppercase; align-items: center; gap: 10px }
.apri i { width: 16px; height: 10px; border-block: 2px solid currentColor; position: relative; display: block }
.menu-mob { margin-top: 10px; border-radius: 20px; background: var(--deep); padding: 10px 22px 22px; display: grid }
.menu-mob a { color: #fff; text-decoration: none; font: 600 24px/1.2 var(--sans); letter-spacing: -.02em; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14) }
.menu-mob .pill { margin-top: 20px; border-bottom: 0; font: 500 14px/1 var(--mono); padding: 0 22px }

/* piede blu notte */
footer { background: var(--deep); color: rgba(255,255,255,.82); border-radius: 32px 32px 32px 32px; padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px) 28px; margin-top: 0; container-type: inline-size }
footer .alto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px }
footer .slogan { font: 700 clamp(1.8rem, 3.4vw, 2.75rem)/1.1 var(--sans); letter-spacing: -0.035em; color: #fff }
footer .slogan span { color: rgba(255,255,255,.55); display: block }
footer .griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-block: 1px solid rgba(255,255,255,.14); padding-block: 24px }
footer .griglia .mono { color: rgba(255,255,255,.85); display: block; margin-bottom: 10px; font-size: 12.5px }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15.5px }
footer a { text-decoration: none } footer a:hover { color: #fff }
footer .parola { font: 700 30cqw/0.86 var(--sans); letter-spacing: -0.06em; color: #fff; margin: 32px 0 12px; white-space: nowrap }
footer .legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.72); font-size: 12.5px }

/* responsive testata */
@media (max-width: 860px) {
  .voci, .stato .dx { display: none } .apri { display: inline-flex }
  .menu-mob { display: none } .menu-mob[hidden] { display: none } .menu-mob:not([hidden]) { display: grid }
}
@media (max-width: 520px) {
  .targa { padding: 0 8px 0 18px; height: 60px }
  footer .griglia { grid-template-columns: 1fr }
}