/* =============================================================================
   L'ACCHIANATA DI SANTA ROSALIA
   assets/css/pagina.css - Pagine di contenuto
   -----------------------------------------------------------------------------
   Foglio condiviso da guida, storia, contatti e pagine legali: componenti
   generici, non legati a una pagina sola.
   ============================================================================= */

/* --- Testata -------------------------------------------------------------- */

.testata-pagina{
  background:linear-gradient(165deg,#2A1220 0%,#1B2A3A 100%);
  color:#F3EDE2;
  padding:clamp(48px,8vw,86px) 0 clamp(44px,7vw,72px);
  margin-bottom:clamp(30px,5vw,50px);
}
.testata-pagina h1{color:#fff;margin-bottom:.35em}
.testata-pagina .occhiello{color:var(--oro)}
.testata-pagina .sommario{color:#C4CCD5;margin:0}

/* --- Sezioni -------------------------------------------------------------- */

.sezione--filetto{
  border-top:1px solid var(--bordo);
  padding-top:clamp(34px,5vw,52px);
}
.sezione h2{margin-bottom:.7em}

/* --- Passi numerati ------------------------------------------------------- */

.passi{display:grid;gap:26px;margin:0;padding:0}

.passo-guida{display:flex;gap:20px;align-items:flex-start}

.passo-guida__numero{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.35rem;
  background:var(--bordeaux);color:var(--oro-chiaro);
}
.passo-guida h3{font-size:1.3rem;margin-bottom:.4em}
.passo-guida p{color:var(--testo-morbido);margin-bottom:1em}
.passo-guida .bottone{margin-top:4px}

@media (max-width:520px){
  .passo-guida{gap:14px}
  .passo-guida__numero{flex:0 0 38px;width:38px;height:38px;font-size:1.1rem}
  .passo-guida h3{font-size:1.15rem}
}

/* --- Dati in evidenza ----------------------------------------------------- */

.dati{
  display:grid;gap:2px;
  margin:30px 0;
  background:var(--bordo);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  overflow:hidden;
}
@media (min-width:560px){.dati{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.dati{grid-template-columns:repeat(4,1fr)}}

.dato{
  background:var(--sfondo-alt);
  padding:22px 18px;
  display:flex;flex-direction:column;gap:3px;
  text-align:center;
}
.dato__numero{
  font-family:var(--font-display);
  font-size:2.1rem;line-height:1;color:var(--bordeaux);
}
.dato__unita{font-size:.9rem;font-weight:700}
.dato__nota{font-size:.8rem;color:var(--testo-morbido)}

/* --- Nota in blocco ------------------------------------------------------- */

.nota-blocco{
  position:relative;
  padding:16px 18px 16px 46px;
  background:var(--sfondo-alt);
  border-left:4px solid var(--oro);
  border-radius:0 var(--raggio-piccolo) var(--raggio-piccolo) 0;
  font-size:.95rem;
}
.nota-blocco i{position:absolute;left:16px;top:1.15em;color:var(--oro)}

/* Segnaposto in attesa dei dati del committente: deve dare fastidio,
   così non finisce online per distrazione */
.incompleto{
  display:inline-block;
  background:#FFF3CD;color:#7A5B00;
  border:1px dashed #C9A227;border-radius:4px;
  padding:1px 7px;font-size:.86rem;
}

/* --- Dotazione ------------------------------------------------------------ */

.dotazione{display:grid;gap:16px;margin:24px 0 0}
.dotazione li{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 20px;
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);border-radius:var(--raggio);
}
.dotazione i{font-size:1.5rem;color:var(--rosa);flex-shrink:0;line-height:1.2}
.dotazione div{display:flex;flex-direction:column;gap:4px;font-size:.95rem;color:var(--testo-morbido)}
.dotazione strong{color:var(--testo);font-size:1.02rem}

/* --- Avvertenze ----------------------------------------------------------- */

.avvertenze{display:grid;gap:11px;margin:22px 0 26px}
.avvertenze li{
  position:relative;padding-left:28px;
  color:var(--testo-morbido);
}
.avvertenze li::before{
  content:"\f26e";                    /* bi-check-lg */
  font-family:"bootstrap-icons";
  position:absolute;left:0;top:0;
  color:var(--pietra);font-size:.95rem;
}

/* --- Domande frequenti ---------------------------------------------------- */

.domande{display:grid;gap:10px;margin-top:22px}

.domande details{
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);
  border-radius:var(--raggio-piccolo);
  overflow:hidden;
}
.domande summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;list-style:none;
  padding:16px 20px;
  font-weight:700;font-size:1rem;
}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{
  content:"\f282";                    /* bi-plus-lg */
  font-family:"bootstrap-icons";
  font-weight:400;font-size:.9rem;
  width:26px;height:26px;flex-shrink:0;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--rosa-chiaro);color:var(--bordeaux);
  transition:background var(--transizione);
}
.domande details[open] summary::after{
  content:"\f2ea";                    /* bi-dash-lg */
  background:var(--oro-chiaro);
}
.domande summary:hover{background:var(--avorio)}
.domande details p{
  margin:0;padding:0 20px 18px;
  color:var(--testo-morbido);font-size:.96rem;
}

/* --- Richiamo finale ------------------------------------------------------ */

.richiamo{
  text-align:center;
  padding:clamp(30px,5vw,46px) 26px;
  background:linear-gradient(160deg,rgba(201,162,39,.12),rgba(92,26,50,.07));
  border:1px solid var(--oro);
  border-radius:var(--raggio);
}
.richiamo h2{margin-bottom:.4em}
.richiamo p{color:var(--testo-morbido);max-width:52ch;margin:0 auto 1.6em}

/* --- Cronologia ----------------------------------------------------------- */

.cronologia{
  position:relative;
  display:grid;gap:0;
  margin:0;padding:0;
}
.cronologia li{
  position:relative;
  display:grid;gap:2px 22px;
  padding:16px 0 16px 34px;
  border-bottom:1px dashed var(--bordo);
}
.cronologia li:last-child{border-bottom:0}

/* Filo verticale con il pallino su ogni data */
.cronologia::before{
  content:"";position:absolute;
  left:7px;top:24px;bottom:24px;width:2px;
  background:linear-gradient(180deg,transparent,var(--oro) 10%,var(--oro) 90%,transparent);
  opacity:.45;
}
.cronologia li::before{
  content:"";position:absolute;left:2px;top:24px;
  width:12px;height:12px;border-radius:50%;
  background:var(--oro);
  box-shadow:0 0 0 3px var(--sfondo);
}

.cronologia__data{
  font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--rosa);
}
.cronologia__fatto{font-size:1.05rem;color:var(--testo)}

@media (min-width:680px){
  .cronologia li{grid-template-columns:150px 1fr;align-items:baseline}
  .cronologia__data{text-align:right;padding-top:.25em}
}

/* --- Prosa ---------------------------------------------------------------- */

.prosa{font-size:1.08rem;line-height:1.82}
.prosa p{margin:0 0 1.3em}
.prosa p:first-of-type::first-letter{
  font-family:var(--font-display);
  float:left;font-size:3.6rem;line-height:.82;
  padding:8px 13px 0 0;color:var(--bordeaux);
}

.citazione{
  margin:2em 0;padding:18px 0 18px 24px;
  border-left:3px solid var(--oro);
  font-family:var(--font-display);font-style:italic;
  font-size:1.35rem;line-height:1.45;color:var(--bordeaux);
}
.citazione cite{
  display:block;margin-top:.7em;
  font-family:var(--font-testo);font-style:normal;
  font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--testo-morbido);
}

/* --- Confronto fra due cose ---------------------------------------------- */

.confronto{display:grid;gap:20px;margin:26px 0}
@media (min-width:760px){.confronto{grid-template-columns:1fr 1fr}}

.confronto__lato{
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);
  border-radius:var(--raggio);
  padding:24px;
}
.confronto__lato h3{font-size:1.4rem;margin-bottom:.5em}
.confronto__lato p:last-child{color:var(--testo-morbido);margin:0}

.confronto__quando{
  font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--testo-morbido);margin-bottom:.6em;
}

/* Il lato che riguarda questo progetto si distingue */
.confronto__lato--nostra{
  border-color:var(--oro);
  background:linear-gradient(160deg,rgba(201,162,39,.1),rgba(92,26,50,.05));
}
.confronto__lato--nostra .confronto__quando{color:var(--oro)}

/* --- Firma finale --------------------------------------------------------- */

.firma-motto{
  font-family:var(--font-display);font-style:italic;
  font-size:1.35rem;color:var(--oro);
  text-align:center;margin:2em 0 0;
}

.richiamo__azioni{
  display:flex;flex-wrap:wrap;gap:11px;justify-content:center;
}


/* --- Pagine legali -------------------------------------------------------- */

.legale{font-size:1rem;line-height:1.75;padding-bottom:20px}
.legale section{
  padding-bottom:26px;margin-bottom:26px;
  border-bottom:1px solid var(--bordo);
}
.legale section:last-of-type{border-bottom:0}
.legale h2{font-size:1.35rem;margin-bottom:.6em}
.legale h3{font-size:1.05rem;margin:1.4em 0 .5em;color:var(--pietra)}
.legale p{margin:0 0 1.1em}
.legale ul{display:grid;gap:9px;margin:0 0 1.3em}
.legale ul li{
  position:relative;padding-left:20px;color:var(--testo-morbido);
}
.legale ul li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--rosa);
}
.legale ul li strong{color:var(--testo)}

.legale__aggiornamento{
  font-size:.85rem;color:var(--testo-morbido);
  padding-bottom:20px;margin-bottom:26px;
  border-bottom:1px solid var(--bordo);
}

.legale__avvertenza{
  position:relative;
  margin-top:30px;padding:16px 18px 16px 46px;
  background:#FFF9E8;border:1px dashed var(--oro);
  border-radius:var(--raggio-piccolo);
  font-size:.9rem;color:#7A5B00;
}
.legale__avvertenza i{position:absolute;left:16px;top:1.15em}

/* Tabelle dei documenti */
.tabella-legale{
  width:100%;border-collapse:collapse;
  margin:0 0 1.4em;font-size:.94rem;
}
.tabella-legale th,
.tabella-legale td{
  text-align:left;vertical-align:top;
  padding:12px 14px;
  border-bottom:1px solid var(--bordo);
}
.tabella-legale th{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--pietra);background:var(--sfondo-alt);
}
.tabella-legale td:first-child{font-weight:500}
.tabella-legale code{
  background:var(--avorio-scuro);padding:2px 7px;
  border-radius:4px;font-size:.86rem;
}

@media (max-width:600px){
  .tabella-legale,.tabella-legale tbody,.tabella-legale tr,.tabella-legale td{display:block;width:100%}
  .tabella-legale thead{display:none}
  .tabella-legale tr{
    border:1px solid var(--bordo);border-radius:var(--raggio-piccolo);
    margin-bottom:12px;padding:6px 0;
  }
  .tabella-legale td{border-bottom:1px dashed var(--bordo);padding:10px 14px}
  .tabella-legale td:last-child{border-bottom:0}
}

/* --- Recapiti ------------------------------------------------------------- */

.recapiti{display:grid;gap:14px;margin-bottom:26px}
@media (min-width:760px){.recapiti{grid-template-columns:repeat(3,1fr)}}

.recapito{
  display:flex;gap:14px;align-items:center;
  padding:18px 20px;
  background:var(--sfondo-alt);
  border:1px solid var(--bordo);border-radius:var(--raggio);
  color:var(--testo);
}
a.recapito:hover{border-color:var(--oro);color:var(--testo)}
.recapito i{font-size:1.5rem;color:var(--rosa);flex-shrink:0}
.recapito span{display:flex;flex-direction:column;gap:2px;font-size:.94rem;min-width:0}
.recapito strong{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--testo-morbido);font-weight:700;
}

/* Campo esca antispam: fuori dallo schermo, non display:none, perché gli
   automatismi saltano i campi nascosti in quel modo */
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.facoltativo{
  font-weight:400;font-size:.78rem;
  color:var(--testo-morbido);text-transform:none;letter-spacing:0;
}

/* --- Pagina di errore ----------------------------------------------------- */

.errore-pagina{text-align:center;padding:clamp(20px,5vw,40px) 0}
.errore-pagina__numero{
  font-family:var(--font-display);
  font-size:clamp(4.5rem,16vw,8rem);
  line-height:.9;color:var(--oro);
  margin:0 0 .1em;
}
.errore-pagina h1{font-size:clamp(1.6rem,4.6vw,2.3rem);margin-bottom:.5em}
.errore-pagina .sommario{margin:0 auto 2em}
.errore-pagina__strade{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}