/* =====================================================================
   ADORTO - GRAFICA DEL SITO (unico file di stile)
   ---------------------------------------------------------------------
   Per cambiare un colore in tutto il sito basta cambiarlo qui sotto,
   nella sezione "COLORI". Regola 60-30-10:
     60% blu notte (fondo) · 30% blu/pervinca (riquadri) · 10% oro (accento)
     verde petrolio = SOS Vita · crema = solo il riquadro della Messa
   ===================================================================== */

/* ---------- CARATTERI (ospitati sul sito, licenza OFL: vedi stile/fonts) ---------- */
@font-face{font-family:"Montserrat";src:url("fonts/Montserrat.woff") format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond.woff") format("woff");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/CormorantGaramond-Italic.woff") format("woff");font-weight:300 700;font-style:italic;font-display:swap}

/* ---------- COLORI ---------- */
:root{
  --notte:#0b0d26;          /* fondo della pagina */
  --pannello:#141a46;       /* riquadri */
  --pannello2:#1a2258;      /* riquadri, parte chiara */
  --bordo:rgba(160,170,255,.16);
  --blu:#3046d6;
  --pervinca:#8f97ff;
  --lavanda:#d9dcff;
  --testo:#e8eaff;          /* testo normale */
  --tenue:#a3a8d6;          /* testo secondario */
  --giallo:#e8b84a;         /* oro: l'unico accento */
  --oro-chiaro:#f3d68f;
  --crema:#f7efdc;          /* solo riquadro della Messa */
  --petrolio:#0f4c5c;       /* SOS Vita */
  --petrolio-scuro:#0a3340;
  --petrolio-luce:#5fc2c9;
  --f-display:"Bahnschrift","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --f-serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --f-titoli:"Cormorant Garamond",var(--f-serif);
  --r:16px;                 /* arrotondamento dei riquadri */
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
html{scroll-padding-top:90px}
body{margin:0;color:var(--testo);font:16px/1.55 var(--f-display);
  background:radial-gradient(1000px 600px at 90% -10%,rgba(143,151,255,.22),transparent 60%),
             radial-gradient(800px 500px at -10% 40%,rgba(48,70,214,.18),transparent 60%),var(--notte);
  background-attachment:fixed}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--giallo);outline-offset:3px;border-radius:12px}
.w{max-width:1280px;margin:0 auto;padding-inline:clamp(14px,3vw,32px)}
.salta{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--giallo);color:#1d1503;padding:10px 16px;border-radius:10px;font-weight:700}
.salta:focus{left:12px}
.nascosto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- TESTATA: logo completo + scritta ADORTO ---------- */
.testata{padding-top:16px}
.riga1{display:flex;align-items:center;justify-content:space-between;gap:20px}
.marchio{display:flex;align-items:center;gap:24px}
.logo-pieno{flex:none;display:block;height:132px;aspect-ratio:442/569;border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 14px 34px rgba(0,0,0,.5)}
.logo-pieno img{width:100%;height:100%;object-fit:contain}
.nome{display:flex;flex-direction:column;gap:8px;border-left:4px solid var(--giallo);padding-left:20px}
.nome b{font-family:"Montserrat",var(--f-display);font-weight:800;font-size:62px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#fff}
.nome .sotto{font-family:"Montserrat",var(--f-display);font-weight:500;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lavanda);white-space:nowrap}
.lingue{display:flex;gap:6px;flex:none}
.lingue img{width:28px;height:19px;border-radius:3px;opacity:.9}
.lingue a:hover img{opacity:1}

/* ---------- MENU (resta in alto mentre si scorre) ---------- */
.barra{position:sticky;top:10px;z-index:30;margin-top:16px}
.menu{display:flex;justify-content:space-between;gap:4px;padding:8px;border-radius:999px;background:rgba(20,18,58,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--bordo)}
.menu a{flex:1 1 auto;text-align:center;white-space:nowrap;font-size:14px;font-weight:500;padding:9px 10px;border-radius:999px;color:#c9c4f2;transition:background .2s,color .2s}
.menu a:hover{color:#fff;background:rgba(157,140,255,.16)}
.menu a[aria-current]{background:var(--giallo);color:#1d1503;font-weight:600}

/* ---------- MOSAICO DELLA HOME ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:16px;padding-block:28px 40px}
.t{position:relative;overflow:hidden;border-radius:var(--r);background:linear-gradient(160deg,var(--pannello2),var(--pannello));border:1px solid var(--bordo);padding:26px;transition:transform .25s,border-color .25s}
a.t:hover,.t.hov:hover{transform:translateY(-3px);border-color:rgba(124,128,255,.5)}
.etich{font-family:"Bahnschrift SemiBold Condensed","Bahnschrift",var(--f-display);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--pervinca);font-weight:600;margin:0 0 10px}

/* slogan */
.slogan{grid-column:span 3;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;
  background:radial-gradient(520px 340px at 80% 10%,rgba(43,70,255,.65),transparent 65%),radial-gradient(420px 260px at 0% 110%,rgba(255,233,74,.14),transparent 60%),linear-gradient(160deg,#101858,#090e33)}
.slogan > *{position:relative;z-index:1}
.slogan .figura{position:absolute;z-index:0;right:-2%;top:-14%;width:52%;max-width:none;filter:invert(1) grayscale(1) contrast(1.2);mix-blend-mode:screen;opacity:.5;
  -webkit-mask-image:radial-gradient(closest-side at 55% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side at 55% 45%,#000 55%,transparent 100%)}
.slogan h1{margin:0;font-family:var(--f-titoli);font-style:italic;font-weight:500;font-size:clamp(30px,3.1vw,44px);line-height:1.15;letter-spacing:-.01em}
.slogan h1 b{font-weight:600;color:var(--oro-chiaro)}

/* SOS Vita */
.sos{grid-column:span 1;display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  background:linear-gradient(165deg,var(--petrolio),var(--petrolio-scuro));border-color:rgba(95,194,201,.28)}
.sos-chiama{display:flex;flex-direction:column;gap:14px;color:inherit}
.sos .icona{width:52px;height:52px;border-radius:16px;background:var(--petrolio-luce);display:grid;place-items:center}
.sos .icona svg{width:26px;height:26px;fill:#062a31}
.sos .numero{font-size:clamp(24px,2.1vw,30px);font-weight:700;letter-spacing:.01em;color:#fff;line-height:1}
.sos p{margin:8px 0 0;color:#c4e6e8;font-size:13.5px;line-height:1.45}
.sos b{color:#fff}
.sos-chat{display:inline-block;font-weight:600;font-size:14px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(95,194,201,.45);padding:9px 14px;border-radius:12px}
.sos-chat:hover{background:rgba(255,255,255,.2)}
.sos-sola{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:#0b0d26;background:var(--giallo);padding:10px 16px;border-radius:12px;align-self:flex-start}
.sos-sola:hover{background:var(--oro-chiaro)}

/* libro */
.libro{grid-column:span 4;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-areas:"img tit" "img txt" "img az";column-gap:40px;row-gap:14px;align-items:start;
  background:radial-gradient(500px 400px at 15% 50%,rgba(143,151,255,.22),transparent 65%),linear-gradient(170deg,var(--pannello2),var(--pannello))}
.libro h2{grid-area:tit;align-self:end;margin:0;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.libro > a{grid-area:img;align-self:center}
.libro img{width:100%;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.5);transform:perspective(900px) rotateY(-8deg) rotateX(3deg);transition:transform .4s}
.libro:hover img{transform:none}
.libro p{grid-area:txt;margin:0;max-width:62ch;color:#c4c8f0;font-family:var(--f-serif);font-size:16.5px;line-height:1.65}
.libro .azioni{grid-area:az;margin-top:6px}
.azioni{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;padding:13px 20px;border-radius:999px;font-weight:600;font-size:15px;border:0;cursor:pointer;font-family:inherit;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.giallo{background:var(--giallo);color:#1d1503}
.btn.vetro{background:rgba(255,255,255,.08);border:1px solid var(--bordo);color:#fff}

/* aiuto concreto (Centri di Aiuto alla Vita, Progetto Gemma) */
.aiuto{grid-column:span 2;display:flex;gap:18px;align-items:flex-start;background:linear-gradient(165deg,#123f4c,#0c2d3a);border-color:rgba(95,194,201,.25)}
.aiuto .ic{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(95,194,201,.18);display:grid;place-items:center}
.aiuto svg{width:24px;height:24px;stroke:var(--petrolio-luce);fill:none;stroke-width:1.7}
.aiuto strong{display:block;font-size:20px;color:#fff;margin-bottom:6px}
.aiuto p{margin:0 0 12px;color:#c4e6e8;font-size:15px;line-height:1.5}
.aiuto .vai2{display:inline-block;color:var(--oro-chiaro);font-weight:600;font-size:14.5px}

/* download */
.dl{grid-column:span 1;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.dl .ic{width:48px;height:48px;border-radius:14px;background:rgba(143,151,255,.14);display:grid;place-items:center}
.dl svg{width:24px;height:24px;stroke:var(--pervinca);fill:none;stroke-width:1.7}
.dl span{font-weight:600;font-size:16px;line-height:1.3}
.dl small{display:block;color:var(--tenue);font-weight:400;font-size:13.5px;margin-top:4px}
.dl .vai{position:absolute;top:22px;right:22px;color:var(--tenue);transition:transform .25s,color .25s}
.dl:hover .vai{color:var(--oro-chiaro);transform:translate(3px,-3px)}
.evang{grid-column:span 2;flex-direction:row;align-items:center;justify-content:flex-start;min-height:auto}

/* Messa per i bambini non nati */
.messa{grid-column:span 2;background:var(--crema);color:#0b1240;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.messa .data{width:104px;border-radius:18px;background:var(--notte);color:#fff;text-align:center;padding:12px 0}
.messa .data .m{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--oro-chiaro)}
.messa .data .g{font-size:52px;font-weight:700;line-height:1}
.messa .etich{color:#5b5f8f}
.messa .titolo{display:block;font-family:var(--f-serif);font-style:italic;font-size:24px;line-height:1.2;margin-bottom:6px}
.messa .titolo:hover{text-decoration:underline}
.messa .quando{margin:0;font-weight:600}
.messa.senza-data{grid-template-columns:minmax(0,1fr)}

/* diretta */
.diretta{grid-column:span 2;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(120deg,var(--blu),#5b4fe0 60%,#7a6cf0)}
.diretta .live{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;background:rgba(0,0,0,.25);padding:6px 12px;border-radius:999px}
.diretta .live i{width:8px;height:8px;border-radius:50%;background:#ff4d4d;animation:lampeggia 1.4s infinite}
@keyframes lampeggia{50%{opacity:.2}}
.diretta strong{display:block;font-size:clamp(18px,1.7vw,22px);line-height:1.25;margin-top:12px;font-weight:600}
.diretta .play{flex:none;width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .25s}
.diretta:hover .play{transform:scale(1.08)}
.diretta .play svg{width:24px;height:24px;fill:var(--blu);margin-left:4px}

/* articoli e libri */
.articoli{grid-column:span 2}
.articoli ul{list-style:none;margin:0;padding:0}
.articoli a{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--bordo);font-family:var(--f-serif);font-size:19px;transition:color .2s,padding .2s}
.articoli a:hover{color:var(--oro-chiaro);padding-left:6px}
.articoli a::after{content:"↗";color:var(--pervinca)}
.copertina{grid-column:span 1;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center}
.copertina img{flex:none;height:200px;width:auto;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.copertina span{font-family:var(--f-serif);font-style:italic;font-size:16.5px;line-height:1.35;color:#d6d9ff}
.servizi{grid-column:span 2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px;padding:30px 34px;background:linear-gradient(110deg,#26359f,var(--blu) 45%,#5b62e6)}
.servizi .etich{color:#fff;margin:0;opacity:.85}
.servizi a{font-family:var(--f-serif);font-style:italic;font-size:clamp(26px,2.6vw,36px);line-height:1.15;color:#fff}
.servizi a:hover{color:var(--giallo)}

/* ---------- PAGINA "NON SEI SOLA" ---------- */
.intro{grid-column:1/-1;padding:clamp(26px,4vw,48px);background:radial-gradient(120% 140% at 0% 0%,#1d2565,#0b0d26 70%)}
.intro h1{font-family:"Montserrat",var(--f-display);font-weight:800;font-size:clamp(28px,4vw,46px);line-height:1.1;margin:0 0 14px;color:#fff}
.intro h1 b{color:var(--giallo)}
.intro p{margin:0;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:#dfe2ff;max-width:44ch}
.tre{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tre > .t{grid-column:auto}
.riga-dl{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;gap:16px}
.riga-dl .vai{position:static;margin-left:auto}

/* ---------- PAGINE INTERNE ---------- */
/* fascia SOS sotto il menu */
.fascia-sos{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 16px;border-radius:var(--r);
  background:linear-gradient(165deg,var(--petrolio),var(--petrolio-scuro));border:1px solid rgba(95,194,201,.28);color:#c4e6e8;font-size:14px}
.fascia-sos .tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:#fff}
.fascia-sos .tel svg{width:20px;height:20px;fill:var(--petrolio-luce)}
.fascia-sos .testo{flex:1 1 260px}
.fascia-sos .sos-chat{padding:7px 12px}
.fascia-sos .sos-sola{padding:8px 14px;align-self:auto}

.pagina{padding-block:22px 48px}
.briciole{font-size:14px;color:var(--tenue);margin:0 0 14px}
.briciole a{color:var(--lavanda)}
.briciole a:hover{color:var(--oro-chiaro)}
.carta{max-width:900px;margin:0 auto;border-radius:var(--r);background:linear-gradient(170deg,var(--pannello2),var(--pannello));border:1px solid var(--bordo);padding:clamp(22px,4vw,52px)}
.testo-pagina{font-family:var(--f-serif);font-size:18px;line-height:1.75;color:#e3e5f7}
.testo-pagina h1{font-family:var(--f-titoli);font-style:italic;font-weight:600;font-size:clamp(32px,4vw,46px);line-height:1.12;color:#fff;margin:0 0 22px}
.testo-pagina h2{font-family:var(--f-titoli);font-weight:600;font-size:clamp(25px,2.6vw,31px);line-height:1.2;color:var(--oro-chiaro);margin:1.6em 0 .5em}
.testo-pagina h3{font-family:var(--f-display);font-weight:700;font-size:19px;color:#fff;margin:1.4em 0 .4em}
.testo-pagina p{margin:0 0 1em}
.testo-pagina a{color:var(--oro-chiaro);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.testo-pagina a:hover{color:#fff}
.testo-pagina blockquote{margin:1.2em 0;padding:14px 22px;border-left:3px solid var(--giallo);background:rgba(255,255,255,.04);border-radius:0 12px 12px 0}
.testo-pagina ul,.testo-pagina ol{padding-left:1.4em;margin:0 0 1em}
.testo-pagina li{margin:.25em 0}
.testo-pagina img{border-radius:10px;margin:1em auto}
.testo-pagina table{width:100%;border-collapse:collapse;font-family:var(--f-display);font-size:15px;margin:1em 0;display:block;overflow-x:auto}
.testo-pagina th,.testo-pagina td{border:1px solid var(--bordo);padding:8px 10px;text-align:left;vertical-align:top}
.testo-pagina hr{border:0;border-top:1px solid var(--bordo);margin:2em 0}
.testo-pagina .fonte{font-size:15px;color:var(--tenue);font-style:italic}
.testo-pagina .centro{text-align:center}

/* elenco di pagine (indici di sezione) */
.elenco{list-style:none;margin:1.2em 0;padding:0;display:grid;gap:10px}
.elenco a{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--bordo);
  font-family:var(--f-serif);font-size:18px;color:var(--testo);text-decoration:none;transition:border-color .2s,background .2s}
.elenco a::after{content:"→";color:var(--pervinca)}
.elenco a:hover{border-color:rgba(232,184,74,.6);background:rgba(232,184,74,.06);color:#fff}

/* pulsanti in fondo alla pagina */
.pulsanti{display:flex;flex-wrap:wrap;gap:10px;margin-top:2em}
.testo-pagina .pulsanti a{text-decoration:none}
.testo-pagina .btn.giallo{color:#1d1503}
.testo-pagina .btn.vetro{color:#fff}

/* ---------- FORM ---------- */
.modulo{display:grid;gap:18px;margin-top:1.4em;font-family:var(--f-display);font-size:16px}
.modulo label{display:block;font-weight:600;margin-bottom:6px;color:#fff}
.modulo input[type=text],.modulo input[type=number],.modulo textarea{width:100%;font:inherit;font-size:17px;color:#fff;background:rgba(0,0,0,.25);border:1px solid rgba(160,170,255,.35);border-radius:12px;padding:12px 14px}
.modulo textarea{min-height:160px;resize:vertical}
.modulo .casella{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.modulo .casella input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--giallo)}
.modulo .nota{font-size:14px;color:var(--tenue);margin:4px 0 0}
.modulo .trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.avviso{padding:14px 18px;border-radius:12px;margin:1em 0;font-family:var(--f-display);font-size:16px}
.avviso.errore{background:rgba(255,90,90,.12);border:1px solid rgba(255,120,120,.5);color:#ffd9d9}
.avviso.ok{background:rgba(95,194,201,.12);border:1px solid rgba(95,194,201,.5);color:#d7f3f4}

/* ---------- PULSANTE SOS FISSO ---------- */
.sos-fisso{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;gap:8px;align-items:center}
.sos-fisso a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:12px 16px;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.f-chiama{background:var(--petrolio-luce);color:#062a31}
.f-chiama svg{width:18px;height:18px;fill:#062a31}
.f-chat{background:var(--notte);color:#fff;border:1px solid rgba(95,194,201,.5)}

/* ---------- PIEDE ---------- */
.piede{border-top:1px solid var(--bordo);margin-top:10px}
.piede .w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-block:26px 90px;color:var(--tenue);font-size:14px}
.piede nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.piede nav a:hover{color:#fff}
.piede nav [aria-current]{color:var(--giallo)}

/* =====================================================================
   SCHERMI PIÙ PICCOLI
   ===================================================================== */
@media (max-width:1180px){.menu a{font-size:13px;padding:9px 6px}}
@media (max-width:1080px){.menu{padding:6px}.menu a{font-size:12px;padding:8px 4px}}

/* tablet: due colonne */
@media (max-width:1060px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slogan,.libro,.servizi,.messa,.diretta,.articoli,.aiuto,.evang,.sos{grid-column:span 2}
  .copertina,.dl{grid-column:span 1}
  .slogan{min-height:260px}
  .libro{grid-template-columns:minmax(0,1fr);grid-template-areas:"tit" "img" "txt" "az"}
  .libro img{max-width:300px;margin:0 auto}
  .sos-chiama{flex-direction:row;align-items:center;gap:18px}
  .sos .numero{font-size:30px}
  .dl{min-height:0;flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
  .dl .vai{position:static;margin-left:auto;flex:none}
  .dl .ic{flex:none}
}
@media (max-width:900px){
  .menu{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;border-radius:22px;padding-right:40px;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .menu::-webkit-scrollbar{display:none}
  .menu a{flex:none;padding:9px 12px}
  .tre{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .marchio{gap:14px}
  .logo-pieno{height:92px}
  .nome{padding-left:12px;border-left-width:3px}
  .nome b{font-size:36px}
  .nome .sotto{font-size:10.5px;letter-spacing:.08em;white-space:normal}
  .riga1{flex-wrap:wrap;gap:10px}
  .riga1 .lingue{width:100%;justify-content:flex-end;margin-top:-6px}
  .sos-sola{align-self:stretch;justify-content:center}
  .fascia-sos .sos-sola,.fascia-sos .sos-chat{flex:1 1 100%;text-align:center;justify-content:center}
  .testo-pagina{font-size:17px}
}
/* telefono: una colonna */
@media (max-width:560px){
  .bento{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:12px}
  .slogan,.libro,.servizi,.messa,.diretta,.articoli,.sos,.copertina,.dl,.aiuto,.evang{grid-column:span 1}
  .messa{grid-template-columns:minmax(0,1fr);text-align:center}
  .messa .data{margin:0 auto}
  .servizi{flex-direction:column;align-items:flex-start}
  .diretta{flex-direction:column-reverse;align-items:flex-start}
  .sos-chiama{flex-direction:column;align-items:center}
  .slogan{min-height:210px;padding:22px}
  .slogan .figura{width:90%;top:-10%}
  .slogan h1{font-size:27px}
  .dl{padding:16px 18px}
  .dl span{font-size:15px}
  .sos-fisso{left:12px;right:12px;justify-content:center}
  .sos-fisso a{flex:1;justify-content:center;font-size:14px;padding:12px 10px}
}

/* stampa: niente menu e pulsanti */
@media print{
  body{background:#fff;color:#000}
  .barra,.fascia-sos,.sos-fisso,.piede,.lingue{display:none}
  .carta{border:0;background:none;padding:0}
  .testo-pagina,.testo-pagina h1,.testo-pagina h2,.testo-pagina h3{color:#000}
}

/* riquadri Messa + diretta in cima alla pagina "Battesimo" */
.bento-pagina{max-width:900px;margin:0 auto 18px;padding:0;grid-auto-rows:auto}
.bento-pagina .messa,.bento-pagina .diretta{grid-column:span 2}
.messa .luogo{margin:2px 0 0;font-size:15px;color:#3b3f6b}
@media (max-width:560px){.bento-pagina .messa,.bento-pagina .diretta{grid-column:span 1}}
.testo-pagina blockquote p:last-child{margin-bottom:0}
/* telefono: nella fascia SOS delle pagine interne restano numero e pulsanti */
@media (max-width:640px){.fascia-sos .testo{display:none}.fascia-sos{gap:8px}}

/* =====================================================================
   PANNELLO /gestione/
   ===================================================================== */
.pannello-testa{display:flex;align-items:center;gap:14px;padding-block:16px}
.pannello-marchio{display:flex;align-items:center;gap:12px;margin-right:auto;font-family:"Montserrat",var(--f-display);font-weight:800;font-size:22px;letter-spacing:.04em}
.pannello-marchio img{height:48px;width:auto;border-radius:8px;background:#fff}
.pannello-marchio small{font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--lavanda)}
.esci{font-size:14px;color:var(--lavanda);padding:8px 12px;border-radius:999px;border:1px solid var(--bordo)}
.esci:hover{color:#fff;border-color:var(--pervinca)}
.menu-pannello{display:flex;flex-wrap:wrap;gap:6px}
.menu-pannello a{padding:9px 14px;border-radius:999px;font-size:14px;background:rgba(255,255,255,.05);border:1px solid var(--bordo);color:#d6d9ff}
.menu-pannello a:hover{border-color:var(--pervinca);color:#fff}
.menu-pannello a[aria-current]{background:var(--giallo);color:#1d1503;border-color:var(--giallo);font-weight:600}
.pannello-corpo{padding-block:22px 60px;font-size:16px}
.pannello-corpo h1{font-family:var(--f-titoli);font-style:italic;font-weight:600;font-size:36px;margin:0 0 16px}
.pannello-corpo h2{font-size:20px;margin:28px 0 8px;color:var(--oro-chiaro)}
.pannello-corpo a:not(.btn):not(.scheda){color:var(--oro-chiaro);text-decoration:underline}
.pannello pre,.pannello code{font-family:Consolas,"Courier New",monospace;background:rgba(0,0,0,.35);border:1px solid var(--bordo);border-radius:8px;padding:2px 6px;color:#fff}
.pannello pre{padding:12px 14px;overflow-x:auto;font-size:15px}
.nota-pannello{font-size:14px;color:var(--tenue)}
.modulo input[type=password],.modulo input[type=date],.modulo input[type=file],.tabella input{width:100%;font:inherit;font-size:16px;color:#fff;background:rgba(0,0,0,.25);border:1px solid rgba(160,170,255,.35);border-radius:10px;padding:10px 12px;color-scheme:dark}
.btn.piccolo{padding:8px 14px;font-size:14px}
.btn.rosso{background:rgba(255,90,90,.15);border:1px solid rgba(255,120,120,.5);color:#ffd9d9}
.schede{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.scheda{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--r);background:linear-gradient(170deg,var(--pannello2),var(--pannello));border:1px solid var(--bordo)}
.scheda b{font-size:24px;color:#fff;line-height:1.2}
.scheda span{color:var(--tenue);font-size:14px}
.scheda.evidenza{border-color:var(--giallo);box-shadow:0 0 0 1px var(--giallo) inset}
.scheda:hover{border-color:var(--pervinca)}
.tabella{width:100%;border-collapse:collapse;margin:10px 0}
.tabella th,.tabella td{padding:8px 10px;border-bottom:1px solid var(--bordo);text-align:left;vertical-align:middle}
.tabella th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.tabella tr.passata{opacity:.5}
.azioni-pannello{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.filtri{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.filtri a{padding:6px 12px;border-radius:999px;font-size:14px;border:1px solid var(--bordo);text-decoration:none!important;color:#d6d9ff!important}
.filtri a[aria-current]{background:rgba(232,184,74,.15);border-color:var(--giallo);color:#fff!important}
.iscrizioni{display:grid;gap:10px}
.iscr{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--bordo);border-left:4px solid var(--bordo)}
.iscr.stato-nuova{border-left-color:var(--giallo)}
.iscr.stato-approvata{border-left-color:var(--petrolio-luce)}
.iscr-testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.iscr-testa small{flex-basis:100%;color:var(--tenue)}
.iscr-nome{font-size:20px;color:#fff}
.etichetta{font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(143,151,255,.18);color:var(--lavanda)}
.iscr-azioni{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:10px}
.iscr-azioni details{flex-basis:100%}
.iscr-azioni summary{cursor:pointer;color:var(--tenue);font-size:14px;margin:4px 0}
.iscr-azioni details form{margin:8px 0}
.riga-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.riga-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--tenue)}
.riga-form input{font:inherit;color:#fff;background:rgba(0,0,0,.25);border:1px solid rgba(160,170,255,.35);border-radius:10px;padding:8px 10px}
.storia{font-size:13px;color:var(--tenue);margin:8px 0 0}
.commento{white-space:normal;margin:10px 0;font-family:var(--f-serif);font-size:17px;line-height:1.6}
.campo-testo{padding:12px 14px;border-radius:12px;border:1px solid var(--bordo);background:rgba(255,255,255,.03)}
.campo-testo.cambiato{border-color:rgba(232,184,74,.6)}
.campo-testo .casella{font-size:13px;color:var(--tenue);margin-top:6px}
.pannello .piede{display:none}

/* elenco dei nomi dei bambini non nati */
.carta-larga{max-width:1100px}
.nomi{list-style:none;margin:1.4em 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.nomi li{margin:0;padding:8px 10px;text-align:center;border-radius:10px;background:rgba(143,151,255,.10);border:1px solid var(--bordo);font-size:16px;line-height:1.3;color:var(--lavanda)}

/* pagine in serie: precedente / successiva */
.serie{max-width:900px;margin:18px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.serie a{flex:1 1 260px;padding:14px 18px;border-radius:12px;background:linear-gradient(170deg,var(--pannello2),var(--pannello));border:1px solid var(--bordo);font-family:var(--f-serif);font-size:16px;line-height:1.35;color:var(--lavanda)}
.serie a:hover{border-color:rgba(232,184,74,.6);color:#fff}
.serie .succ{text-align:right;margin-left:auto}

/* indici lunghi su due colonne */
@media (min-width:900px){.carta-larga .elenco{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* schede dei libri da scaricare */
.libri-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:1.4em 0;font-family:var(--f-display)}
.libro-scheda{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--bordo);text-decoration:none!important;color:var(--testo)!important;transition:border-color .2s,background .2s}
.libro-scheda:hover{border-color:rgba(232,184,74,.6);background:rgba(232,184,74,.06)}
.libro-scheda .ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(143,151,255,.14);display:grid;place-items:center}
.libro-scheda svg{width:24px;height:24px;stroke:var(--pervinca);fill:none;stroke-width:1.7}
.libro-scheda span{font-weight:600;font-size:16px;line-height:1.35}
.libro-scheda small{display:block;font-weight:400;color:var(--tenue);font-size:14px;margin-top:3px}
.poesia{font-style:italic;text-align:center;line-height:1.9}
.chi-siamo-simbolo{max-width:260px;border-radius:14px;background:#fff;margin:1em auto}

/* menu corto delle pagine in francese e in inglese */
.menu-corto{justify-content:flex-start;flex-wrap:wrap;border-radius:22px}
.menu-corto a{flex:0 1 auto}

/* poesie: versi uno sotto l'altro */
.versi p{margin:0 0 .25em}
.versi{font-style:italic}
.testo-pagina .firma{text-align:right;font-style:italic;font-weight:600;margin:1em 0 1.4em}
.riga-dl .ic svg{fill:none}