:root{
  --cemento:#d9d5cd; --inchiostro:#191713; --grigio:#6c665d; --segnale:#f5a800; --rosso:#c0392b;
  --cielo:#eaf6fc; --cielo-scuro:#cbe8f6; --blunotte:#2b4c63;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
     -webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

.barra{display:flex;align-items:center;justify-content:space-between;gap:1rem;
       padding:1.4rem clamp(1rem,5vw,3.5rem);position:relative;z-index:10}
.marchio{font-size:.82rem;letter-spacing:.16em;font-weight:600;color:var(--grigio)}
.zona-accesso{position:relative;margin-left:auto}
.bottone{font:inherit;font-weight:700;font-size:.95rem;color:var(--inchiostro);
         background:var(--segnale);border:2px solid var(--inchiostro);border-radius:2px;
         padding:.6rem 1.5rem;cursor:pointer;text-decoration:none;display:inline-block;
         box-shadow:4px 4px 0 var(--inchiostro);transition:transform .12s ease,box-shadow .12s ease}
.bottone:hover,.bottone:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--inchiostro)}

.pannello{position:absolute;top:calc(100% + .9rem);right:0;width:min(20rem,calc(100vw - 2rem));
          background:#fff;border:2px solid var(--inchiostro);box-shadow:6px 6px 0 rgba(25,23,19,.18);
          padding:1.4rem;display:none;text-align:left;color:var(--inchiostro)}
.pannello.aperto{display:block}
.pannello h2{margin:0 0 1rem;font-size:1.05rem}
.campo{margin-bottom:.9rem}
.campo label{display:block;font-size:.78rem;font-weight:600;color:var(--grigio);margin-bottom:.3rem}
.campo input{font:inherit;width:100%;padding:.6rem .7rem;border:1.5px solid var(--grigio);
             border-radius:2px;background:#fdfdfc}
.campo input:focus{border-color:var(--inchiostro);outline:none;box-shadow:0 0 0 3px rgba(245,168,0,.45)}
.invia{font:inherit;font-weight:700;width:100%;padding:.7rem;margin-top:.3rem;
       border:2px solid var(--inchiostro);border-radius:2px;background:var(--inchiostro);color:#fff;cursor:pointer}
.invia:hover{background:#000}
.avviso{margin:0 0 .9rem;padding:.6rem .7rem;font-size:.85rem;line-height:1.4;
        background:#fdecea;border-left:4px solid var(--rosso);color:#7d251c}

.cantiere{background:var(--cemento);color:var(--inchiostro)}
.nastro{height:14px;background:repeating-linear-gradient(-45deg,var(--segnale) 0 18px,var(--inchiostro) 18px 36px)}
.cantiere main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
     align-items:center;gap:clamp(2rem,6vw,5rem);
     padding:clamp(1.5rem,5vw,4rem) clamp(1rem,5vw,3.5rem) clamp(3rem,7vw,5rem);
     max-width:1180px;margin:0 auto;width:100%}
.lingue{list-style:none;margin:0;padding:0}
.lingue li{display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;border-top:1.5px solid rgba(25,23,19,.22)}
.lingue li:last-child{border-bottom:1.5px solid rgba(25,23,19,.22)}
.sigla{flex:none;width:2.2rem;font-size:.78rem;font-weight:600;color:var(--grigio)}
.frase{font-size:clamp(1.5rem,4.2vw,2.6rem);font-weight:800;line-height:1.06;letter-spacing:-.02em;margin:0}
.nota{margin:1.8rem 0 0;max-width:34ch;font-size:.98rem;line-height:1.55;color:var(--grigio)}
.figura-cantiere{margin:0;display:flex;justify-content:center}
.figura-cantiere img{width:100%;max-width:380px}
.pie{padding:1.2rem clamp(1rem,5vw,3.5rem);font-size:.8rem;color:var(--grigio);
     border-top:1.5px solid rgba(25,23,19,.18)}
@media(max-width:760px){
  .cantiere main{grid-template-columns:1fr}
  .figura-cantiere{order:-1}
  .figura-cantiere img{max-width:260px}
}

.accoglienza{background:radial-gradient(120% 90% at 50% -10%,var(--cielo-scuro) 0%,var(--cielo) 60%);
             color:var(--blunotte)}
.accoglienza .marchio{color:rgba(43,76,99,.7)}
.accoglienza .bottone{background:transparent;border-color:var(--blunotte);color:var(--blunotte);
                      box-shadow:3px 3px 0 rgba(43,76,99,.3);font-size:.85rem;padding:.5rem 1.15rem}
.accoglienza main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
                  text-align:center;padding:0 1.5rem clamp(2.5rem,6vw,4rem)}
.saluto{font-family:Cormorant,"Iowan Old Style",Georgia,serif;font-style:italic;font-weight:400;
        font-size:clamp(3rem,11vw,6.4rem);line-height:1;margin:0 0 .35rem}
.sottotitolo{margin:0 0 clamp(1.6rem,4vw,2.6rem);font-size:.95rem;line-height:1.5;
             color:rgba(43,76,99,.75);max-width:40ch}
.figura-benvenuto{margin:0}
.figura-benvenuto img{width:min(400px,80vw);border-radius:14px;box-shadow:0 14px 34px rgba(43,76,99,.16)}
@media(prefers-reduced-motion:no-preference){
  .saluto,.sottotitolo,.figura-benvenuto{animation:entra .7s cubic-bezier(.2,.7,.3,1) both}
  .sottotitolo{animation-delay:.1s}
  .figura-benvenuto{animation-delay:.2s}
}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- pagine interne (registrazione, accesso, profilo) ---------------- */
.foglio{background:var(--cemento);color:var(--inchiostro);min-height:100vh}
.foglio main{flex:1;width:100%;max-width:34rem;margin:0 auto;
             padding:clamp(1rem,4vw,2.5rem) clamp(1rem,5vw,2rem) 4rem}
.scheda{background:#fff;border:2px solid var(--inchiostro);box-shadow:6px 6px 0 rgba(25,23,19,.18);
        padding:clamp(1.2rem,4vw,2rem)}
.scheda h1{font-size:1.5rem;margin:0 0 .3rem;letter-spacing:-.01em}
.scheda .occhiello{margin:0 0 1.5rem;color:var(--grigio);font-size:.92rem;line-height:1.5}
.scheda .campo{margin-bottom:1rem}
.aiuto{display:block;margin-top:.3rem;font-size:.76rem;color:var(--grigio);line-height:1.45}
.riga-fondo{margin-top:1.4rem;font-size:.88rem;color:var(--grigio);text-align:center}
.buono{margin:0 0 .9rem;padding:.6rem .7rem;font-size:.85rem;line-height:1.45;
       background:#e8f5e9;border-left:4px solid #1a7f37;color:#14532d}
.stato-chiavi{margin-top:1rem;padding:.7rem .8rem;font-size:.8rem;line-height:1.5;
              background:#f4f1ea;border-left:4px solid var(--segnale)}
.dati dt{font-size:.74rem;font-weight:600;color:var(--grigio);margin-top:.9rem}
.dati dd{margin:.15rem 0 0;font-size:.98rem}
.pillola{display:inline-block;padding:.15rem .55rem;border-radius:99px;font-size:.74rem;
         font-weight:700;background:var(--segnale);color:var(--inchiostro)}
.pillola.spenta{background:#ddd8ce;color:var(--grigio)}

/* ---- menu di navigazione -------------------------------------------- */
.menu-sito{display:flex;flex-wrap:wrap;gap:.2rem;align-items:center;
           padding:0 clamp(1rem,5vw,3.5rem) .9rem;font-size:.86rem}
.menu-sito a{padding:.35rem .8rem;text-decoration:none;border:1.5px solid transparent;
             border-radius:2px;font-weight:600;opacity:.75}
.menu-sito a:hover{opacity:1;border-color:currentColor}
.menu-sito .conta{display:inline-block;margin-left:.35rem;padding:0 .4rem;border-radius:99px;
                  background:var(--rosso);color:#fff;font-size:.72rem}

/* ---- elenchi e schede di contenuto ---------------------------------- */
.elenco{list-style:none;margin:0;padding:0}
.elenco li{border-top:1.5px solid rgba(25,23,19,.18);padding:1.1rem 0}
.elenco li:last-child{border-bottom:1.5px solid rgba(25,23,19,.18)}
.elenco h3{margin:0 0 .3rem;font-size:1.15rem;line-height:1.25}
.elenco h3 a{text-decoration:none}
.elenco h3 a:hover{text-decoration:underline}
.meta{font-size:.76rem;color:var(--grigio);margin:0 0 .45rem}
.estratto{margin:0;font-size:.92rem;line-height:1.55;color:#3b372f}
.etichetta{display:inline-block;padding:.1rem .5rem;border-radius:2px;font-size:.68rem;
           font-weight:700;background:var(--segnale);color:var(--inchiostro);margin-left:.4rem}
.etichetta.attesa{background:#ffe0b2} .etichetta.bozza{background:#ddd8ce;color:var(--grigio)}
.etichetta.rifiutato{background:#fdecea;color:#b3261e}
.corpo{font-size:1.02rem;line-height:1.65}
.corpo p{margin:0 0 1.1rem}
.navigazione{display:flex;justify-content:space-between;align-items:center;
             margin-top:1.6rem;font-size:.86rem}
.larga{width:100%;max-width:46rem;margin:0 auto}
textarea{font:inherit;width:100%;padding:.6rem .7rem;border:1.5px solid var(--grigio);
         border-radius:2px;background:#fdfdfc;line-height:1.55;resize:vertical}
textarea:focus{border-color:var(--inchiostro);outline:none;box-shadow:0 0 0 3px rgba(245,168,0,.45)}

/* ---- immagine di testata delle sezioni ------------------------------ */
.testata-sezione{display:flex;align-items:center;gap:clamp(1rem,3vw,1.6rem);margin-bottom:.6rem}
.testata-sezione.senza-immagine{display:block}
.testata-sezione img{flex:none;width:clamp(5.5rem,18vw,9rem);aspect-ratio:1;object-fit:cover;
                     border-radius:10px;box-shadow:0 8px 22px rgba(25,23,19,.14)}
.testata-sezione > div{flex:1;min-width:0}
.testata-sezione p{margin-bottom:0 !important}

/* ====================================================================
   PAGINA INIZIALE
   ==================================================================== */
.ingresso{background:var(--cemento);color:var(--inchiostro)}

/* fascia superiore */
.fascia{display:flex;align-items:center;gap:clamp(.8rem,3vw,2rem);flex-wrap:wrap;
        padding:.9rem clamp(1rem,4vw,3rem);background:var(--inchiostro);color:#fff}
.fascia .logo{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;text-decoration:none;color:var(--segnale)}
.sezioni{display:flex;flex-wrap:wrap;gap:.2rem;flex:1}
.sezioni a{padding:.35rem .75rem;text-decoration:none;font-size:.92rem;font-weight:600;
           opacity:.82;border-radius:2px}
.sezioni a:hover{opacity:1;background:rgba(255,255,255,.12)}
.invito{display:inline-block;padding:.5rem 1.2rem;background:var(--segnale);color:var(--inchiostro);
        font-weight:800;font-size:.88rem;text-decoration:none;border-radius:2px;
        box-shadow:3px 3px 0 rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s}
.invito:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.invito.grande{padding:.8rem 2rem;font-size:1rem;box-shadow:4px 4px 0 var(--inchiostro)}

/* seconda fascia */
.fascia-due{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
            padding:.7rem clamp(1rem,4vw,3rem);background:#fff;font-size:.86rem;
            border-bottom:1.5px solid rgba(25,23,19,.14)}
.contatore{color:var(--grigio)}
.contatore b{color:var(--inchiostro);font-size:1rem}
.contatore.verde::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
                         background:#1a7f37;margin-right:.4rem;vertical-align:middle}
.accessi{margin-left:auto;display:flex;gap:1rem}
.accessi a{text-decoration:none;font-weight:600}
.accessi a.sottolineato{text-decoration:underline}

/* striscia di immagini */
.vetrina{display:flex;overflow:hidden;background:var(--inchiostro)}
.vetrina img{flex:1 1 0;min-width:0;height:clamp(8rem,16vw,13rem);object-fit:cover;
             filter:saturate(.92)}
@media(max-width:760px){.vetrina img:nth-child(n+5){display:none}}

.slogan{text-align:center;font-size:clamp(1.1rem,3vw,1.5rem);font-weight:800;letter-spacing:-.01em;
        margin:1.4rem 1rem .4rem}

/* accesso e iscrizione affiancati */
.due-colonne{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
             gap:clamp(1rem,4vw,2.5rem);max-width:58rem;margin:2rem auto 3rem;
             padding:0 clamp(1rem,4vw,2rem)}
.due-colonne .colonna{background:#fff;border:2px solid var(--inchiostro);padding:clamp(1.2rem,3vw,1.8rem);
                      box-shadow:6px 6px 0 rgba(25,23,19,.16)}
.due-colonne h2{margin:0 0 1.2rem;font-size:1.5rem;letter-spacing:-.01em}
.oppure{align-self:center;color:var(--grigio);font-size:.82rem;font-weight:600}
.presentazione{font-size:.98rem;line-height:1.6;color:#3b372f;margin:0 0 1.4rem}
.minuta{font-size:.76rem;color:var(--grigio);margin:.8rem 0 0}
@media(max-width:760px){
  .due-colonne{grid-template-columns:1fr}
  .oppure{text-align:center;padding:.4rem 0}
}

/* blocchi sotto */
.in-vista,.in-costruzione{max-width:58rem;margin:0 auto 3rem;padding:0 clamp(1rem,4vw,2rem)}
.in-vista h2{font-size:1.1rem;margin:0 0 .6rem}
.in-costruzione{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
                align-items:center;gap:2rem;opacity:.85}
.in-costruzione .frase{font-size:clamp(1.1rem,2.6vw,1.6rem)}
.in-costruzione .figura-cantiere img{max-width:220px}
@media(max-width:760px){.in-costruzione{grid-template-columns:1fr}}

/* ---- campi degli annunci -------------------------------------------- */
.due-campi{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.due-campi{grid-template-columns:1fr}}
select{font:inherit;width:100%;padding:.55rem .6rem;border:1.5px solid var(--grigio);
       border-radius:2px;background:#fdfdfc}
.scheda-annuncio{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0 0 1.6rem;
                 padding:1rem 1.2rem;background:#fff;border-left:4px solid var(--segnale)}
.scheda-annuncio dt{font-size:.74rem;font-weight:600;color:var(--grigio);align-self:center}
.scheda-annuncio dd{margin:0;font-size:.95rem;align-self:center}
.riservato{display:inline-block;padding:.15rem .6rem;border-radius:2px;background:#f2efe9;
           color:var(--grigio);font-size:.82rem;font-style:italic}
.filtri{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:0 0 1.2rem}
.filtri select{width:auto;min-width:9rem;font-size:.84rem;padding:.35rem .5rem}

/* ---- immagini degli annunci ----------------------------------------- */
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;
          margin:1.6rem 0 .6rem}
.galleria a{display:block;line-height:0;border:1.5px solid rgba(25,23,19,.2);border-radius:3px;
            overflow:hidden;background:#fff}
.galleria img{width:100%;height:150px;object-fit:cover;transition:transform .2s}
.galleria a:hover img{transform:scale(1.04)}
.riservato-blocco{margin:1.6rem 0;padding:1rem 1.2rem;background:#f2efe9;
                  border-left:4px solid var(--segnale);font-size:.92rem;line-height:1.55}
.griglia-mini{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.griglia-mini img{width:88px;height:88px;object-fit:cover;border:1.5px solid rgba(25,23,19,.2);
                  border-radius:3px;display:block}
.mini-img{display:block;text-align:center}
.mini-img span{display:block;font-size:.7rem;color:var(--grigio);margin-top:.15rem}
.anteprima-riga{float:right;width:72px;height:72px;object-fit:cover;margin:0 0 .5rem .8rem;
                border:1.5px solid rgba(25,23,19,.2);border-radius:3px}
input[type=file]{font:inherit;font-size:.86rem;width:100%;padding:.5rem;background:#fdfdfc;
                 border:1.5px dashed var(--grigio);border-radius:2px}

/* ---- dialogo con il server di posta ---------------------------------- */
.dialogo{background:#191713;color:#e8e4dc;padding:1rem 1.2rem;border-radius:3px;overflow-x:auto;
         font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.55;
         white-space:pre-wrap;word-break:break-word}

/* ====================================================================
   STANZE ROSSE
   ==================================================================== */
.rosso{--rosso-fondo:#1c0a10;--rosso-carta:#2a0f16;--rosso-vivo:#b3122f;
       --rosso-chiaro:#e86b7f;--corda:#d9b68c;
       background:var(--rosso-fondo);color:#f0e6e2}
.rosso .barra{background:#12060a}
.rosso .marchio{color:#c9a99c}
.rosso .menu-sito a{color:#e9d9d4}
.rosso .bottone{background:var(--rosso-vivo);border-color:#000;color:#fff;
                box-shadow:3px 3px 0 #00000070}
.rosso .pie{color:#a58b84;border-top-color:#ffffff1a}
.rosso a{color:var(--rosso-chiaro)}
.rosso h1,.rosso h2,.rosso h3{color:#fbeeea}

.insegna-stanze{display:flex;align-items:center;gap:clamp(1rem,4vw,2rem);flex-wrap:wrap;
                margin:0 0 1.8rem}
.insegna-stanze img{width:clamp(7rem,20vw,11rem);height:auto;border-radius:12px;
                    box-shadow:0 10px 30px #00000080}
.insegna-stanze h1{font-size:clamp(1.6rem,4.5vw,2.4rem);margin:0 0 .4rem;letter-spacing:-.02em}
.insegna-stanze p{margin:0;max-width:40ch;line-height:1.55;color:#d8c6c1;font-size:.95rem}

.riquadro-rosso{background:var(--rosso-carta);border:1px solid #ffffff14;border-left:4px solid var(--rosso-vivo);
                padding:1.2rem 1.4rem;margin:0 0 1.4rem;border-radius:3px}
.riquadro-rosso h2{font-size:1.05rem;margin:0 0 .8rem}
.riquadro-rosso.attesa{border-left-color:var(--corda);animation:respiro 2.4s ease-in-out infinite}
@keyframes respiro{0%,100%{opacity:1}50%{opacity:.78}}
@media(prefers-reduced-motion:reduce){.riquadro-rosso.attesa{animation:none}}

.riga-invito,.riga-stanza{display:flex;align-items:center;justify-content:space-between;gap:1rem;
                          flex-wrap:wrap;padding:.6rem 0;border-top:1px solid #ffffff12}
.riquadro-rosso h2 + .riga-invito,.riquadro-rosso h2 + .riga-stanza{border-top:none}
.riga-crea{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.riga-crea input{flex:1;min-width:11rem;padding:.45rem .6rem;border-radius:2px;
                 border:1px solid #ffffff2e;background:#00000038;color:#fbeeea;font:inherit;font-size:.9rem}
.rosso .minuta{color:#b39a94;font-size:.8rem}

.due-colonne-scelte{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:620px){.due-colonne-scelte{grid-template-columns:1fr}}
.due-colonne-scelte h3{font-size:.95rem;margin:0 0 .5rem}
.gruppo{font-size:.72rem;letter-spacing:.12em;color:#a98c85;margin:.9rem 0 .35rem}
.tassello{display:inline-flex;align-items:center;gap:.35rem;margin:0 .35rem .35rem 0;
          padding:.28rem .7rem;border:1px solid #ffffff2b;border-radius:99px;cursor:pointer;
          font-size:.84rem;background:#00000030}
.tassello:hover{border-color:var(--rosso-chiaro)}
.tassello input{accent-color:var(--rosso-vivo);margin:0}
.tassello:has(input:checked){background:var(--rosso-vivo);border-color:var(--rosso-vivo);color:#fff}
.etichetta-rossa{display:inline-block;padding:.08rem .5rem;margin:.2rem .2rem 0 0;border-radius:99px;
                 background:#ffffff14;font-size:.72rem;color:#e6cfc9}
.rosso .mini{background:#00000040;border-color:#ffffff33;color:#f0e6e2}
.rosso .mini:hover{background:var(--rosso-vivo);border-color:var(--rosso-vivo)}
.rosso .mini.chiaro{background:var(--corda);border-color:var(--corda);color:#2a0f16;font-weight:700}
.invia.rosso{background:var(--rosso-vivo);border-color:#000;color:#fff}
.invia.chiaro{background:transparent;border-color:var(--corda);color:var(--corda)}
.rosso .avviso{background:#3a1018;border-left-color:var(--rosso-vivo);color:#ffd9de}
.rosso .buono{background:#12301a;border-left-color:#3ea35f;color:#d6f2de}
.voce-rossa{color:#e86b7f !important}
.menu-sito .voce-rossa:hover,.sezioni .voce-rossa:hover{border-color:#e86b7f}
.modulo-crea{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;
             border-top:1px solid #ffffff12;padding-top:.9rem}
.modulo-crea input{padding:.45rem .6rem;border-radius:2px;border:1px solid #ffffff2e;
                   background:#00000038;color:#fbeeea;font:inherit;font-size:.9rem}
.modulo-crea button{align-self:flex-start}

/* ---- pannello dei filtri, chiuso finché non serve --------------------- */
.filtri-stanze{border:1px solid #ffffff1f;border-radius:3px;background:#00000026}
.filtri-stanze > summary{list-style:none;cursor:pointer;padding:.6rem .8rem;
                         display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.filtri-stanze > summary::-webkit-details-marker{display:none}
.filtri-stanze > summary::after{content:"▾";margin-left:auto;opacity:.6}
.filtri-stanze[open] > summary::after{content:"▴"}
.filtri-stanze > summary:hover{background:#ffffff0d}
.filtri-stanze .due-colonne-scelte,.filtri-stanze > .minuta{padding:0 .8rem}
.filtri-stanze > .minuta{padding-bottom:.8rem}
.etichetta-filtra{font-weight:700;font-size:.82rem;letter-spacing:.06em;
                  padding:.12rem .6rem;border-radius:99px;background:var(--rosso-vivo);color:#fff}
.etichetta-rossa.viva{background:#b3122f55;color:#ffd9de}
.insegna-stanze img{width:clamp(5.5rem,14vw,8rem)}
.insegna-stanze p{font-size:.88rem}

/* ---- profili pubblici ----------------------------------------------- */
.testata-profilo{display:flex;gap:clamp(1rem,3vw,1.6rem);align-items:flex-start;flex-wrap:wrap}
.ritratto{width:clamp(6rem,18vw,9rem);height:clamp(6rem,18vw,9rem);object-fit:cover;
          border:2px solid var(--inchiostro);border-radius:4px;flex:none}
.stato-foto{display:block;font-size:.68rem;font-weight:700;padding:.1rem .4rem;border-radius:2px;
            margin-top:.2rem}
.stato-foto.in_attesa{background:#ffe0b2;color:#7a4b00}
.stato-foto.approvata{background:#dcf0e2;color:#14532d}
.stato-foto.rifiutata{background:#fdecea;color:#b3261e}
.griglia-profili{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.8rem}
.scheda-profilo{display:block;text-decoration:none;background:#fff;border:1.5px solid rgba(25,23,19,.2);
                border-radius:3px;padding:.5rem;text-align:center;font-size:.86rem;
                transition:transform .12s,box-shadow .12s}
.scheda-profilo:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(25,23,19,.14)}
.scheda-profilo img{width:100%;height:120px;object-fit:cover;border-radius:2px;margin-bottom:.4rem}
.scheda-profilo .senza-foto{display:flex;align-items:center;justify-content:center;height:120px;
                            background:#efece5;color:var(--grigio);margin-bottom:.4rem;border-radius:2px}

/* ---- menù personale sotto il pulsante col nome ----------------------- */
.menu-io{position:relative;display:inline-block}
.menu-io > summary{list-style:none;cursor:pointer;user-select:none}
.menu-io > summary::-webkit-details-marker{display:none}
.menu-io > summary::after{content:" ▾";font-size:.8em;opacity:.7}
.menu-io .tendina{position:absolute;right:0;top:calc(100% + .5rem);min-width:13rem;z-index:40;
                  background:#fff;border:2px solid var(--inchiostro);border-radius:2px;
                  box-shadow:6px 6px 0 rgba(25,23,19,.2);padding:.3rem;display:flex;
                  flex-direction:column}
.menu-io .tendina a{padding:.5rem .7rem;text-decoration:none;font-size:.9rem;color:var(--inchiostro);
                    border-radius:2px}
.menu-io .tendina a:hover{background:var(--segnale)}
.rosso .menu-io .tendina{background:var(--rosso-carta);border-color:#000}
.rosso .menu-io .tendina a{color:#f0e6e2}
.rosso .menu-io .tendina a:hover{background:var(--rosso-vivo)}
@media(max-width:560px){.menu-io .tendina{right:auto;left:0}}

/* ====================================================================
   SCHERMI PICCOLI
   --------------------------------------------------------------------
   Un solo sito che si adatta alla larghezza della finestra, invece di
   tre versioni separate per telefono, tablet e computer: il
   riconoscimento del dispositivo sbaglia spesso, e tre versioni da
   tenere allineate invecchiano male.
   ==================================================================== */

/* niente ingrandimenti automatici del testo quando si ruota il telefono */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* nessun elemento può far scorrere la pagina di lato */
body{overflow-x:hidden}
.corpo,.estratto,.presentazione,.occhiello{overflow-wrap:anywhere}

/* --- fino a 900px: tablet in verticale e telefoni ------------------- */
@media(max-width:900px){
  .barra,.fascia,.fascia-due{padding-left:1rem;padding-right:1rem}
  .larga,.in-vista,.in-costruzione,.due-colonne{padding-left:1rem;padding-right:1rem}

  /* le sezioni scorrono di lato invece di accavallarsi su più righe */
  .sezioni,.menu-sito{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
                      -webkit-overflow-scrolling:touch}
  .sezioni::-webkit-scrollbar,.menu-sito::-webkit-scrollbar{display:none}
  .sezioni a,.menu-sito a{white-space:nowrap;flex:none}

  /* le tabelle non si comprimono: scorrono */
  table.dati-tab{display:block;overflow-x:auto;white-space:nowrap}
  .blocco,.riquadro-rosso{padding-left:1rem;padding-right:1rem}

  /* ombre nette meno ingombranti sullo stretto */
  .scheda,.due-colonne .colonna,.dato,.blocco,.menu-io .tendina{box-shadow:0 3px 12px rgba(25,23,19,.16)}
}

/* --- fino a 620px: telefoni ---------------------------------------- */
@media(max-width:620px){
  /* i campi sotto i 16px fanno ingrandire la pagina da soli su iPhone */
  input,select,textarea,.campo input,.riga-crea input,.modulo-crea input,
  .filtri select,input[type=file]{font-size:16px}

  /* righe che diventano colonne, invece di uscire dallo schermo */
  .riga-invito,.riga-stanza,.navigazione,.fascia-due{
      flex-direction:column;align-items:flex-start;gap:.5rem}
  .fascia-due .accessi{margin-left:0}
  .navigazione{gap:.3rem}

  .barra,.fascia{flex-wrap:wrap;gap:.6rem}
  .fascia .logo{font-size:1.1rem}

  /* il menù personale a tutta larghezza: più facile da centrare col dito */
  .menu-io .tendina{position:static;width:100%;min-width:0;margin-top:.5rem;
                    box-shadow:none;border-width:1.5px}

  .insegna-stanze{gap:.9rem}
  .insegna-stanze img{width:5rem}
  .griglia-profili{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.6rem}
  .scheda-profilo img,.scheda-profilo .senza-foto{height:96px}
  .galleria{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .galleria img{height:120px}
  .pannelli{grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.5rem}
  .dato{padding:.7rem .8rem}
  .dato .numero{font-size:1.5rem}
  .testata-profilo{gap:.9rem}
  .scheda-annuncio{grid-template-columns:1fr;gap:.1rem .6rem;padding:.9rem 1rem}
  .scheda-annuncio dt{margin-top:.5rem}
}

/* --- comandi da toccare con il dito -------------------------------- */
@media(pointer:coarse){
  .mini,.bottone,.invito,.invia,.tassello,.menu-io .tendina a{
      min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .mini{padding:.55rem .9rem;font-size:.82rem}
  .tassello{padding:.45rem .9rem}
  .sezioni a,.menu-sito a{padding-top:.6rem;padding-bottom:.6rem}
  .elenco h3 a,.scheda-profilo{padding-top:.2rem;padding-bottom:.2rem}
}

/* ---- pagine che hanno bisogno di più larghezza ----------------------- */
.ampio main{max-width:64rem}
.pagina-amministrazione{width:100%;max-width:100%;margin:0 auto}
/* le barrette del grafico non devono mai ereditare stili dalla testata */
.grafico > *{padding:0 !important;margin:0 !important;border:0 !important}
.segnala{font-size:.82rem;color:var(--grigio);text-decoration:underline}
.segnala:hover{color:var(--rosso)}
.rosso .segnala{color:#c9a99c}
.segno{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;
       border-radius:50%;font-weight:800;font-size:.85rem;color:#fff}
.segno.ok{background:#1a7f37} .segno.avviso{background:#c98700} .segno.male{background:#b3261e}

/* ---- conversazione nelle stanze ------------------------------------- */
.blocco-sblocco{background:#00000030;border:1px dashed #ffffff30;border-radius:3px;padding:.9rem}
.messaggi{max-height:24rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;
          padding:.4rem;background:#00000026;border-radius:3px;min-height:6rem}
.messaggio{max-width:80%;padding:.5rem .7rem;border-radius:10px;background:#ffffff12;
           align-self:flex-start}
.messaggio.mio{align-self:flex-end;background:#b3122f4d}
.messaggio .chi{display:block;font-size:.7rem;color:#c3a8a2;margin-bottom:.15rem}
.messaggio p{margin:0;font-size:.95rem;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:620px){.messaggio{max-width:92%}.messaggi{max-height:16rem}}
.adesivi{margin-top:.8rem}
.adesivi > summary{list-style:none;cursor:pointer}
.adesivi > summary::-webkit-details-marker{display:none}
.griglia-adesivi{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.adesivo{background:#00000038;border:1px solid #ffffff24;border-radius:8px;padding:.25rem;
         cursor:pointer;line-height:0}
.adesivo:hover{border-color:var(--rosso-chiaro);background:#ffffff14}
.adesivo-inviato{width:72px;height:72px;display:block}
.immagine-inviata{max-width:220px;max-height:220px;border-radius:6px;display:block;margin:.2rem 0}
.riga-traduzione{margin:.25rem 0 0;display:flex;align-items:center;gap:.4rem;opacity:.85}
.riga-traduzione .mini{padding:.1rem .45rem;font-size:.75rem;background:transparent;
  border:1px solid currentColor;border-radius:2px;color:inherit;cursor:pointer}
.riga-traduzione .mini:hover{background:#ffffff1a}
.riga-traduzione span{font-size:.72rem}