/* ==========================================================================
   PAGINE SECONDARIE — partecipazione.html (cartolina) e pensiero.html (libretto).
   Usa solo le variabili di css/theme.css.
   ========================================================================== */

/* Prima dell'animazione d'ingresso la pagina resta nascosta (si vede solo la scena di apertura) */
html:not(.js) body[data-ingresso] { visibility: hidden; }

.pagina { min-height: 100svh; padding: 1.25rem var(--margine) 4rem; background: var(--c-sfondo); }
.pagina__corpo { max-width: 42rem; margin: 0 auto; padding-top: 1rem; }
.indietro { display: inline-block; margin-bottom: 2rem; text-decoration: none; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accento); }
.titolo-script { font: 400 clamp(3.4rem, 17vw, 6.5rem)/1 var(--f-corsivo); color: var(--c-accento); margin-bottom: 1.5rem; }

/* ---- Un pensiero: pagina del libretto ---- */
.libretto {
  background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--raggio); padding: clamp(1.5rem, 6vw, 3rem);
  box-shadow: var(--ombra);
  background-image: linear-gradient(90deg, rgba(0,0,0,.04), transparent 6%, transparent 94%, rgba(0,0,0,.04));
}
.foto-gatti { margin: 0 0 2rem; }
.foto-gatti img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raggio-campo); background: var(--c-rosa); }
.foto-gatti figcaption { margin-top: .6rem; font: italic 1rem var(--f-titoli); color: var(--c-testo-soft); text-align: center; }
.testo-lungo p { font-size: 1.1rem; }
.testo-lungo p:first-child::first-letter { float: left; font: 400 4.2rem/.8 var(--f-corsivo); color: var(--c-accento); padding: .35rem .6rem 0 0; }
.dati dt { margin-top: 1.25rem; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--c-accento); }
.dati dd { margin: .25rem 0 0; }
.dati code { display: block; margin-bottom: .75rem; font: 400 1.05rem/1.5 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
.libretto .card { margin-top: 2rem; box-shadow: none; background: var(--c-sfondo); }

/* ---- partecipazione: la cartolina ---- */
.cartolina { background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--raggio); padding: clamp(1.25rem, 5vw, 2.5rem); box-shadow: var(--ombra); position: relative; }
.cartolina::before { content: ""; position: absolute; inset: .6rem; border: 1px dashed var(--c-rosa); border-radius: calc(var(--raggio) - .4rem); pointer-events: none; }
.cartolina > * { position: relative; }
.cartolina::after { content: ""; position: absolute; top: 1.4rem; right: 1.4rem; width: 3.2rem; height: 4rem; background: var(--francobollo) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); pointer-events: none; }   /* stesso francobollo del retro che si gira */
.cartolina .titolo-script { padding-right: 4.5rem; }
.cartolina form { max-width: none; gap: 1.5rem; }
.cartolina__gruppo { font: italic 400 1.5rem var(--f-titoli); color: var(--c-accento); margin-bottom: 1.25rem; }
.mini { margin: .25rem 0 0; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-testo-soft); }
.grazie { text-align: center; padding-block: 2rem; }
.grazie h2 { font-size: 2.6rem; margin-bottom: 1rem; }

/* ---- Contatti: persone con i pulsanti per chiamare, scrivere su WhatsApp, mandare un'email ---- */
.libretto .busta { width: min(9rem, 40%); margin: 0 0 1.5rem; color: var(--c-accento); --c-ornamento: var(--c-accento); }
.contatti { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.contatto { display: grid; gap: .9rem; padding: 1.25rem; border: 1px solid var(--c-linea); border-radius: var(--raggio-campo); background: var(--c-sfondo); }
.contatto strong { display: block; font: 500 1.6rem var(--f-titoli); }
.contatto small { color: var(--c-testo-soft); }
.contatto__azioni { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Allergeni: pagina di consultazione ---- */
.tondo { display: grid; place-items: center; width: 3.1rem; aspect-ratio: 1; border: 1.5px solid currentColor; border-radius: 50%; flex: none; transition: all .25s; }
.tondo svg { width: 62%; }
.allergeni-pagina { display: grid; gap: .9rem; margin: 2rem 0; }
.allergene-scheda { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem; border: 1px solid var(--c-linea); border-radius: var(--raggio-campo); background: var(--c-superficie); color: var(--c-testo-soft); }
.allergene-scheda h2 { margin: 0 0 .35rem; font: 500 1.6rem var(--f-titoli); color: var(--c-testo); }
.allergene-scheda p { margin: .25rem 0; font-size: .95rem; }
.allergene-scheda strong { color: var(--c-accento); font-weight: 500; }
.allergene-scheda .tondo { width: 3.4rem; color: var(--c-accento); }
.fonti { margin: 0 0 2rem; font-size: .85rem; color: var(--c-testo-soft); }
.fonti h2 { font: italic 1.5rem var(--f-titoli); color: var(--c-accento); }
.fonti ul { padding-left: 1.1rem; display: grid; gap: .3rem; }
.fonti a { color: var(--c-accento); }
.torna { margin-bottom: 1rem; }
/* Allergeni: pagina verde salvia (si apre come un libro) */
.allergeni-pag .pagina { background: var(--c-sfondo-alt); }
.allergeni-pag .sopratitolo, .allergeni-pag .titolo-script, .allergeni-pag .fonti h2, .allergeni-pag .fonti a, .allergeni-pag .btn--link { color: var(--c-salvia-scuro); }
.allergeni-pag .btn:not(.btn--link) { background: var(--c-salvia-scuro); }
.allergeni-pag .allergene-scheda { border-color: var(--c-salvia); border-left: 4px solid var(--c-salvia-scuro); }
.allergeni-pag .allergene-scheda strong, .allergeni-pag .allergene-scheda .tondo { color: var(--c-salvia-scuro); }