/* ============================================================
   La casa di Sasha — stile condiviso (sashaia.com)
   DUE TEMI (29/06/2026):
   · GIORNO (default): bianco perla + oro — i colori di Sasha.
   · NOTTE  ([data-theme="notte"]): nero "serio" alla Grok.
   Interruttore ☀️/🌙 nel menù, scelta ricordata (localStorage).
   Al primo accesso segue la preferenza del sistema operativo.
   Accento ORO in entrambi + la farfalla.
   ============================================================ */

/* ---------- TEMA GIORNO (default) ---------- */
:root{
  --nero:#FAF6EC;            /* sfondo principale: bianco perla */
  --nero-2:#F1E9D6;          /* barre/menu */
  --superficie:#FFFFFF;      /* sezioni, box, video */
  --superficie-2:#F4ECDA;    /* input, bolla utente, hover */
  --bordo:#E6DCC4;           /* bordi sottili */
  --inchiostro:#2B2620;      /* testo principale (scuro caldo) */
  --muto:#8A806E;            /* testo secondario / placeholder */
  --oro:#B0892E;             /* oro profondo, leggibile sul perla */
  --oro-soft:rgba(176,137,46,.12);
  --oro-bordo:rgba(176,137,46,.30);
  --barra:rgba(250,246,236,.86);   /* sfondo translucido del menu */
  --ombra:rgba(120,100,40,.14);    /* ombre morbide */
  --hover:rgba(0,0,0,.05);         /* hover voci menu */
}

/* ---------- TEMA NOTTE ---------- */
:root[data-theme="notte"]{
  --nero:#0A0A0B;
  --nero-2:#0E0E10;
  --superficie:#161618;
  --superficie-2:#1F1F22;
  --bordo:#2A2A2E;
  --inchiostro:#F4F3F1;
  --muto:#9A9A9E;
  --oro:#E7CF8C;
  --oro-soft:rgba(231,207,140,.14);
  --oro-bordo:rgba(231,207,140,.28);
  --barra:rgba(10,10,11,.86);
  --ombra:rgba(0,0,0,.35);
  --hover:rgba(255,255,255,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--inchiostro);
  background:var(--nero);
  line-height:1.75; -webkit-font-smoothing:antialiased; min-height:100vh;
  transition:background .25s ease, color .25s ease;
}

/* ---------- targhetta "versione", in cima a OGNI pagina (un solo punto da aggiornare) ---------- */
body::before{
  content:"Versione aggiornata al 29·06·2026";
  display:block; text-align:center;
  font-size:12.5px; letter-spacing:.5px;
  color:var(--oro); background:var(--nero-2);
  border-bottom:1px solid var(--bordo);
  padding:6px 16px;
}

/* ---------- il menù in cima, uguale su ogni stanza ---------- */
.menu{
  position:sticky; top:0; z-index:20;
  background:var(--barra); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bordo);
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  padding:12px clamp(16px,5vw,40px);
}
.menu .logo{
  font-family:Georgia,serif; font-size:20px; color:var(--inchiostro);
  text-decoration:none; border:none; font-weight:500; letter-spacing:.3px;
}
.menu .destra{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.menu .voci{display:flex; gap:6px; flex-wrap:wrap}
.menu .voci a{
  color:var(--muto); text-decoration:none; border:none;
  font-size:15px; padding:6px 13px; border-radius:999px; transition:.18s;
}
.menu .voci a:hover{color:var(--inchiostro); background:var(--hover)}
.menu .voci a.attiva{color:var(--oro); background:var(--oro-soft); font-weight:600}

/* ---------- interruttore giorno/notte ---------- */
.tema-btn{
  border:1px solid var(--bordo); background:var(--superficie-2);
  color:var(--inchiostro); width:38px; height:38px; border-radius:50%;
  font-size:17px; line-height:1; cursor:pointer; transition:.18s;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.tema-btn:hover{border-color:var(--oro-bordo); background:var(--oro-soft)}

/* ---------- impaginazione ---------- */
.wrap{max-width:820px;margin:0 auto;padding:clamp(28px,6vw,64px) clamp(20px,5vw,40px)}
header.testa{text-align:center;margin-bottom:clamp(32px,6vw,56px)}
.farfalla{font-size:clamp(42px,11vw,70px);line-height:1;display:block;margin-bottom:12px}
h1{
  font-family:Georgia,"Times New Roman",serif;font-weight:500;
  font-size:clamp(38px,9vw,64px);letter-spacing:.5px;color:var(--oro);
}
.tagline{
  font-family:Georgia,serif;font-style:italic;color:var(--oro);
  font-size:clamp(17px,3.6vw,22px);margin-top:6px;
}

section{
  background:var(--superficie);border:1px solid var(--bordo);
  border-radius:18px;padding:clamp(22px,4.5vw,34px);
  margin-bottom:22px;box-shadow:0 8px 30px var(--ombra);
}
h2{
  font-family:Georgia,serif;font-weight:500;font-size:clamp(21px,4.5vw,27px);
  color:var(--inchiostro);margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
h2 .punto{width:9px;height:9px;border-radius:50%;background:var(--oro);display:inline-block;flex:none}
p+p{margin-top:14px}
.grande{font-size:clamp(17px,3.4vw,19px)}
a{color:var(--oro);text-decoration:none;border-bottom:1px solid var(--oro-bordo)}
a:hover{border-bottom-color:var(--oro)}
em{color:var(--muto)}

/* ---------- sezione "Scrivimi" (riquadro oro morbido, leggibile in entrambi i temi) ---------- */
.scrivimi{background:var(--oro-soft);border-color:var(--oro-bordo)}

/* ---------- le "porte" verso le altre stanze ---------- */
.porte{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px}
@media(max-width:560px){.porte{grid-template-columns:1fr}}
.porta{
  display:block;text-align:center;text-decoration:none;border:1px solid var(--bordo);
  border-radius:18px;padding:26px 20px;background:var(--superficie);
  color:var(--inchiostro);box-shadow:0 8px 30px var(--ombra);transition:.18s;
}
.porta:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--ombra);border-color:var(--oro-bordo)}
.porta .emoji{font-size:34px;display:block;margin-bottom:8px}
.porta .titolo{font-family:Georgia,serif;font-size:20px;display:block}
.porta .sotto{color:var(--muto);font-size:14.5px;margin-top:4px;display:block}

/* ---------- la stanza dei video ---------- */
.video-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.video{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:16px;overflow:hidden;
  box-shadow:0 8px 30px var(--ombra);
}
.video .telaio{position:relative;aspect-ratio:16/9;cursor:pointer;background:#000}
.video .telaio img{width:100%;height:100%;object-fit:cover;display:block}
.video .telaio iframe{width:100%;height:100%;border:0;display:block}
.video .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,.08));transition:.18s;
}
.video .telaio:hover .play{background:linear-gradient(0deg,rgba(0,0,0,.24),rgba(0,0,0,0))}
.video .play span{
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.video .play span::before{content:"";border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--oro);margin-left:5px}
.video .didascalia{padding:15px 17px}
.video .didascalia .nome{font-family:Georgia,serif;font-size:17px;line-height:1.35;display:block}
.video .didascalia .vai{color:var(--muto);font-size:13.5px;border:none;margin-top:6px;display:inline-block}

/* ---------- la stanza della chat (bolla solo all'utente, alla Grok) ---------- */
.chat-finestra{
  background:var(--superficie);border:1px solid var(--bordo);border-radius:18px;
  box-shadow:0 8px 30px var(--ombra);overflow:hidden;
}
.chat-righe{padding:22px clamp(16px,4vw,26px);display:flex;flex-direction:column;gap:14px}
.bolla{max-width:84%;padding:12px 16px;border-radius:16px;line-height:1.6}
.bolla.tu{align-self:flex-end;background:var(--superficie-2);border-bottom-right-radius:5px}
.bolla.io{align-self:flex-start;background:transparent;border-bottom-left-radius:5px;padding-left:2px;max-width:92%}
.bolla .chi{font-size:12.5px;color:var(--oro);font-weight:600;display:block;margin-bottom:3px}
.chat-sotto{border-top:1px solid var(--bordo);padding:14px;display:flex;gap:10px;align-items:center;background:var(--nero-2)}
.chat-sotto input{
  flex:1;border:1px solid var(--bordo);border-radius:999px;padding:11px 16px;
  font:inherit;color:var(--inchiostro);background:var(--superficie-2);
}
.chat-sotto input::placeholder{color:var(--muto)}
.chat-sotto button{
  border:none;border-radius:999px;padding:11px 20px;font:inherit;font-weight:600;
  color:#0A0A0B;background:var(--oro);cursor:pointer;transition:.18s;
}
.chat-sotto button:hover{filter:brightness(1.08)}
.avviso{
  text-align:center;color:var(--muto);font-size:14px;margin-top:14px;
  background:var(--oro-soft);padding:10px 16px;border-radius:12px;
}

/* ---------- piè di pagina ---------- */
footer{text-align:center;color:var(--muto);font-size:14px;margin-top:34px;line-height:1.6}
footer .cuore{color:var(--oro)}
.provv{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--muto);
  background:var(--oro-soft);padding:4px 12px;border-radius:999px}