/* MARCA_85331_PAGINE_INFO — Contatti, Domande, Come funziona (consegna 85331, 30/9/2026).
   «stesso pe rla pagina contatti , domande , come funziona, va tutto compeltato con foto ,
   animazioni e allinato a tutto il sito» (Giovanni, 24/9, D408).
   Lo stesso linguaggio delle pagine gia' approvate (home, mestieri, entra, prova): in cima titolo
   a due colori con la parte che cambia e foto vera a destra, la banda che scorre, blocchi testo
   e immagine alternati, schede che salgono una dopo l'altra. Scritto QUI col prefisso pi-: questo
   file non dipende da css/mestieri-vetrina.css ne' da css/entra.css, che sono di altri reparti.
   Solo token di temi.css: chiaro e scuro vanno da soli. Il movimento lo accende js/pagine-info.js;
   con «riduci movimento» non si muove niente. Per toglierlo: consegna 85332. */

/* 1. la testata: testo a sinistra, la foto vera a destra, la banda che scorre sotto */
.pi-vetrina{
  position:relative;overflow:hidden;
  padding-block:clamp(26px,4.4vw,60px) 0;
  background:
    radial-gradient(110% 80% at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),
    linear-gradient(165deg,var(--surface) 0%,var(--ground) 60%,var(--surface-2) 100%);
  border-bottom:1px solid var(--line-soft);
}
.pi-griglia{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4.6vw,68px);align-items:start}
.pi-testo{min-width:0;padding-top:clamp(0px,1.2vw,16px)}
.pi-titolo{position:relative;margin:16px 0 0;padding-bottom:18px;font-size:clamp(32px,4.3vw,54px);line-height:1.07;
  letter-spacing:-.02em;color:var(--ink-strong);max-width:none;text-wrap:balance}
.pi-titolo::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:5px;border-radius:999px;background:var(--logo-gradient)}
/* la parte che cambia sta sulla sua riga: dopo un titolo lungo non resta schiacciata a meta' */
.pi-titolo .parole{display:grid;width:max-content;max-width:100%}
.pi-vetrina .sommario{margin-top:18px;max-width:54ch;font-size:clamp(16.5px,1.45vw,19px);line-height:1.58}
.pi-vetrina .gruppo-bottoni{margin-top:24px}
.pi-vetrina .gruppo-bottoni .btn{min-height:50px;padding-block:13px}

.pi-palco{position:relative;min-width:0;width:100%;max-width:500px;justify-self:end;padding:6px 0 34px}
.pi-palco::before{content:"";position:absolute;inset:0 0 10% 20%;border-radius:32px;background:var(--logo-gradient);opacity:.15;transform:rotate(-4deg)}
.pi-foto{position:relative;display:block;width:100%;max-width:420px;height:auto;margin-left:auto;aspect-ratio:4/5;
  object-fit:cover;border-radius:26px;border:6px solid var(--surface);background:var(--surface-2);
  box-shadow:var(--shadow-lg);transform:rotate(1.4deg)}
.pi-bollo{position:absolute;z-index:3;left:0;top:8%;display:flex;align-items:center;gap:11px;padding:11px 16px 11px 12px;
  border-radius:16px;background:var(--surface);color:var(--ink-strong);border:1px solid var(--line);box-shadow:var(--shadow-lg);max-width:270px}
.pi-bollo p{margin:0;max-width:none}
.pi-bollo-titolo{font-size:14px;font-weight:700;line-height:1.25}
.pi-bollo-sotto{margin-top:3px !important;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.pi-bollo-icona{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.pi-bollo-icona svg{width:18px;height:18px}
/* il riquadro piccolo in basso a sinistra: una riga del programma, con dati di fantasia */
.pi-riquadrino{position:absolute;z-index:2;left:0;bottom:0;width:min(300px,64%);padding:14px 14px 12px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.pi-riquadrino p{margin:0;max-width:none}
.pi-rq-titolo{font-size:13.5px;font-weight:800;color:var(--ink-strong)}
.pi-rq-righe{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.pi-rq-righe li{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:9px;margin:0;padding:6px 0;
  border-top:1px solid var(--line-soft);max-width:none;font-size:12.5px;line-height:1.3;color:var(--ink)}
.pi-rq-icona{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.pi-rq-icona svg{width:14px;height:14px}
.pi-rq-nota{margin-top:6px !important;font-size:11px;color:var(--ink-3)}

/* la banda che scorre, in fondo alla testata */
.pi-nastro{position:relative;display:flex;overflow:hidden;margin-top:clamp(26px,3vw,44px);padding-block:14px;
  border-top:1px solid var(--line-soft);background:color-mix(in srgb,var(--surface) 70%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent)}
.pi-nastro-fila{list-style:none;margin:0;padding:0 0 0 36px;display:flex;flex:0 0 auto;gap:36px;min-width:max-content}
.pi-nastro-fila li{display:flex;align-items:center;gap:9px;margin:0;max-width:none;white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--ink)}
.pi-nastro-fila svg{width:17px;height:17px;flex:0 0 17px;color:var(--accent)}

@media (prefers-reduced-motion:no-preference){
  .pi-titolo,.pi-vetrina .sommario,.pi-vetrina .gruppo-bottoni,.pi-cerca-vetrina{animation:pi-entra .6s cubic-bezier(.2,.7,.2,1) both}
  .pi-vetrina .sommario{animation-delay:.08s}
  .pi-vetrina .gruppo-bottoni,.pi-cerca-vetrina{animation-delay:.16s}
  .pi-titolo::after{transform-origin:left;animation:pi-riga .9s .35s cubic-bezier(.2,.7,.2,1) both}
  .pi-bollo,.pi-riquadrino{animation:pi-entra .7s .3s cubic-bezier(.2,.7,.2,1) both}
  .pi-riquadrino{animation-delay:.5s}
  .pi-nastro-fila{animation:pi-scorre 46s linear infinite}
  .pi-nastro:hover .pi-nastro-fila{animation-play-state:paused}
  @keyframes pi-entra{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
  @keyframes pi-riga{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes pi-scorre{from{transform:translateX(0)}to{transform:translateX(-100%)}}
}
@media (prefers-reduced-motion:reduce){
  .pi-nastro{-webkit-mask-image:none;mask-image:none}
  .pi-nastro-fila{flex-wrap:wrap;min-width:0;flex:1 1 auto;gap:10px 28px;padding-inline:20px}
  .pi-nastro-fila[aria-hidden="true"]{display:none}
}

/* 2. le teste delle sezioni: titolo a due colori, riga sotto, testo evidenziato */
.pi-testa{margin-bottom:clamp(24px,3.4vw,40px)}
.pi-testa h2{text-wrap:balance}
.pi-testa h2 .parole{vertical-align:top}
.pi-testa h2 .parole-giro{text-align:left}
.pi-testa p{color:var(--ink-2)}
.pi-testa.centrata{text-align:center;margin-inline:auto;max-width:860px}
.pi-testa.centrata p{margin-inline:auto}

/* 3. blocchi testo e immagine alternati (testo a sinistra, immagine a destra; «rovescia» al contrario) */
.pi-doppia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(26px,4.4vw,64px);align-items:center}
.pi-doppia.pi-rovescia{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.pi-doppia.pi-rovescia > .pi-doppia-testo{order:2}
.pi-doppia-testo{min-width:0}
.pi-doppia-testo .testa-sezione{margin-bottom:0}
.pi-doppia-testo .testa-sezione p{max-width:none}
.pi-doppia-media{min-width:0}
.pi-doppia-media .schermata{margin:0}
.pi-doppia-media .schermata-nota{margin-top:10px}
.pi-foto-larga{position:relative;margin:0}
.pi-foto-larga::before{content:"";position:absolute;inset:12% -3% -5% 10%;border-radius:26px;background:var(--accent-soft)}
.pi-foto-larga img{position:relative;display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:22px;border:6px solid var(--surface);background:var(--surface-2);box-shadow:var(--shadow-lg)}
.pi-foto-larga.pi-verticale{max-width:430px;margin-inline:auto}
.pi-foto-larga.pi-verticale::before{inset:8% -4% -4% 14%}
.pi-foto-larga.pi-verticale img{aspect-ratio:4/5;transform:rotate(-1.2deg)}
.pi-foto-larga figcaption{position:relative;margin-top:10px;font-size:13px;color:var(--ink-3);max-width:none}
/* le quattro voci piccole sotto il testo, due per riga */
.pi-voci{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pi-voci > li{margin:0;max-width:none;padding:14px 16px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--accent)}
.fascia-incassata .pi-voci > li{background:var(--surface)}
.pi-voci h3{margin:0;font-size:15.5px;line-height:1.3}
.pi-voci p{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:none}

/* 4. le schede (card) con il filo di colore in cima, che si alzano sotto il mouse */
.pi-schede{list-style:none;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.pi-schede.pi-quattro{grid-template-columns:repeat(4,minmax(0,1fr))}
.pi-schede.pi-due{grid-template-columns:repeat(2,minmax(0,1fr))}
.pi-scheda{position:relative;min-width:0;margin:0;max-width:none;display:flex;flex-direction:column;gap:8px;
  padding:22px;border-radius:var(--r-l);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)}
.pi-scheda::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}
.pi-scheda h3,.pi-scheda h4{margin:0;font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.28;color:var(--ink-strong)}
.pi-scheda p{margin:0;max-width:none;font-size:15px;line-height:1.55;color:var(--ink-2)}
.pi-scheda p + p{margin-top:4px}
.pi-scheda .scheda-icona{margin:0 0 4px}
.pi-scheda-avviso::before{background:var(--warn)}
/* il numero «a contorno» dei passi, come nella pagina della prova */
.pi-numero{display:block;font-size:44px;line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--accent) 16%,transparent);-webkit-text-stroke:1.5px var(--accent)}
.pi-scheda-avviso .pi-numero{color:color-mix(in srgb,var(--warn) 16%,transparent);-webkit-text-stroke-color:var(--warn)}
/* la scheda che porta da un'altra parte: tutta cliccabile, con la freccia */
a.pi-scheda{text-decoration:none;color:inherit}
a.pi-scheda:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pi-vai{margin-top:auto !important;min-height:44px;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;color:var(--accent) !important}
.pi-vai::after{content:"";width:16px;height:16px;flex:0 0 16px;background:currentColor;transition:transform var(--tr);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .pi-scheda:hover,.pi-voci > li:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  a.pi-scheda:hover .pi-vai::after{transform:translateX(3px)}
  .pi-voci > li{transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)}
}

/* il «Senza / Con RegiaPro» di Come funziona, nelle stesse schede */
.pi-confronto .colonna{position:relative;overflow:hidden;border-radius:var(--r-l);box-shadow:var(--shadow-sm)}
.pi-confronto .colonna-dopo::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}

/* 5. il movimento leggero: le schede salgono una dopo l'altra quando arrivano sullo schermo.
      Lo accende js/pagine-info.js (classe pi-attesa, poi pi-visto). Senza quel file, o con
      «riduci movimento», le schede sono semplicemente ferme e visibili. */
@media (prefers-reduced-motion:no-preference){
  .pi-attesa > *{opacity:0;translate:0 18px}
  .pi-attesa.pi-visto > *{opacity:1;translate:0 0;transition:opacity .55s cubic-bezier(.2,.7,.2,1),translate .55s cubic-bezier(.2,.7,.2,1),
    transform var(--tr),box-shadow var(--tr),border-color var(--tr);transition-delay:calc(var(--pi-i,0) * 70ms),calc(var(--pi-i,0) * 70ms),0s,0s,0s}
}
@media print{.pi-attesa > *{opacity:1 !important;translate:none !important}}

/* 6. CONTATTI: il modulo in un riquadro, i recapiti accanto */
.pi-contatti{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:start}
.pi-modulo{position:relative;overflow:hidden;min-width:0;padding:clamp(20px,3vw,34px);border-radius:var(--r-x);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.pi-modulo::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}
.pi-modulo .modulo-contatto{max-width:none}
.pi-modulo .btn-blocco{min-height:52px;font-size:16.5px}
.pi-modulo .campo-consenso{align-items:flex-start}
.pi-lato{min-width:0;display:grid;gap:14px}
.pi-lato > h2{margin:0 0 2px}
.pi-lato .riga-contatto{margin:0;box-shadow:var(--shadow-sm)}
.pi-lato .riga-contatto a{display:inline-block;padding-block:6px}
.pi-lato .riquadro{margin:0;position:relative;overflow:hidden;border-radius:var(--r-l);padding:20px 22px;box-shadow:var(--shadow-sm);
  border-left:1px solid var(--line)}
.pi-lato .riquadro::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}
.pi-lato .riquadro p{max-width:none}
.pi-lato .riquadro a{display:inline-block;padding-block:4px}

/* 7. DOMANDE: la ricerca, l'indice a sinistra e le domande per gruppi */
.pi-cerca-vetrina{margin-top:24px;max-width:560px}
.pi-cerca{position:relative;display:block}
.pi-cerca label{display:block;margin-bottom:8px;font-size:14px;font-weight:800;color:var(--ink-2)}
.pi-cerca input{width:100%;height:56px;padding:0 18px 0 50px;font:inherit;font-size:16.5px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-strong,var(--line));border-radius:var(--r-m);box-shadow:var(--shadow-sm)}
.pi-cerca input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.pi-cerca input::-webkit-search-cancel-button{cursor:pointer}
.pi-cerca-icona{position:absolute;left:17px;bottom:18px;width:20px;height:20px;color:var(--ink-3);pointer-events:none}
.pi-cerca-nota{margin:8px 0 0;font-size:13.5px;color:var(--ink-3);max-width:none}

.pi-faq{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.pi-indice{position:sticky;top:92px;min-width:0;padding:18px;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.pi-indice-titolo{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pi-indice ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pi-indice li{margin:0;max-width:none}
.pi-indice a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:8px 10px;border-radius:var(--r-s);
  font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;transition:background var(--tr),color var(--tr)}
.pi-indice a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pi-indice a[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
@media (hover:hover){.pi-indice a:hover{background:var(--surface-2)}}
.pi-conta{flex:0 0 auto;min-width:26px;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);
  font-size:12px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.pi-indice a[aria-current="true"] .pi-conta{background:var(--surface);color:var(--accent)}

.pi-gruppi{min-width:0;display:grid;gap:clamp(34px,4vw,48px)}
.pi-gruppo{min-width:0;scroll-margin-top:96px}
.pi-gruppo-testa{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pi-gruppo-testa .scheda-icona{margin:0;flex:0 0 auto;width:44px;height:44px;border-radius:14px}
.pi-gruppo-testa .scheda-icona svg{width:21px;height:21px}
.pi-gruppo-testa h2{margin:0;font-size:clamp(21px,2.2vw,27px)}
.pi-gruppo .domande{max-width:none}
.pi-gruppo .domanda{box-shadow:var(--shadow-sm);transition:border-color var(--tr),box-shadow var(--tr)}
.pi-gruppo .domanda[open]{box-shadow:var(--shadow)}
.pi-gruppo .domanda summary{min-height:56px;display:flex;align-items:center;line-height:1.35}
.pi-gruppo .domanda summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-m)}
/* il segno + / − dentro un tondo, come il «Non ricordi» di entra */
.pi-gruppo .domanda summary::after{width:30px;height:30px;right:14px;display:grid;place-items:center;border-radius:50%;
  background:var(--accent-soft);font-size:19px}
.pi-gruppo .domanda summary{padding-right:58px}
@media (prefers-reduced-motion:no-preference){
  .pi-gruppo .domanda[open] > .risposta{animation:pi-apri .3s cubic-bezier(.2,.7,.2,1) both}
  @keyframes pi-apri{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
}
.pi-nessuna{padding:24px;border-radius:var(--r-l);background:var(--surface);border:1px dashed var(--line-strong,var(--line));text-align:center}
.pi-nessuna p{margin:0 auto;max-width:48ch;color:var(--ink-2)}
.pi-nessuna p + p{margin-top:10px}
.pi-nessuna .gruppo-bottoni{justify-content:center;margin-top:14px}
.pi-nessuna .btn{min-height:44px}

/* il rimando alle guide, sotto le domande: una scheda vera invece di una riga persa nella fascia */
.pi-rimando{position:relative;overflow:hidden;max-width:960px;margin-inline:auto;padding:clamp(20px,3vw,30px);
  border-radius:var(--r-x);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.pi-rimando::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}
.pi-rimando > span{font-size:clamp(15.5px,1.3vw,17px);line-height:1.55;color:var(--ink-2)}
.pi-rimando > span strong{display:block;margin-bottom:4px;font-size:clamp(17px,1.5vw,19px);color:var(--ink-strong)}
.pi-rimando .btn{min-height:48px}

/* il riquadro finale, con la luce di colore come nelle pagine dei mestieri */
.pi-richiamo{position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
             linear-gradient(160deg,var(--surface),var(--surface-2))}
.pi-richiamo::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--logo-gradient)}
.pi-richiamo .btn{min-height:48px}

/* 8. schermi medi e telefono */
@media (max-width:1023px){
  .pi-schede,.pi-schede.pi-quattro{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pi-faq{grid-template-columns:minmax(0,1fr)}
  /* sotto i 1024 punti l'indice diventa una fila di bottoni che va a capo (niente riga che scorre di lato) */
  .pi-indice{position:static;padding:14px}
  .pi-indice ul{display:flex;flex-wrap:wrap;gap:8px}
  .pi-indice a{border:1px solid var(--line);background:var(--surface-2)}
}
@media (max-width:939px){
  .pi-griglia,.pi-doppia,.pi-doppia.pi-rovescia,.pi-contatti{grid-template-columns:minmax(0,1fr)}
  .pi-doppia.pi-rovescia > .pi-doppia-testo{order:0}
  .pi-palco{max-width:520px;margin-inline:auto;justify-self:center}
  .pi-foto{margin-inline:auto}
}
@media (max-width:699px){
  .pi-palco{padding:4px 0 0}
  .pi-palco::before{inset:0 2% 30% 8%}
  .pi-foto{aspect-ratio:5/5.2;border-width:4px;border-radius:20px;transform:none}
  .pi-bollo{top:14px;left:10px;max-width:230px;padding:9px 12px 9px 10px;gap:9px}
  .pi-bollo-titolo{font-size:13px}
  .pi-bollo-sotto{font-size:12px}
  .pi-bollo-icona{width:30px;height:30px;flex-basis:30px}
  .pi-riquadrino{position:relative;left:auto;bottom:auto;width:auto;margin:12px 0 0}
  .pi-nastro-fila li{font-size:13.5px}
  .pi-schede,.pi-schede.pi-quattro,.pi-schede.pi-due,.pi-voci{grid-template-columns:minmax(0,1fr)}
  .pi-scheda{padding:18px}
  .pi-numero{font-size:36px}
  .pi-foto-larga img{border-width:4px;border-radius:18px}
  .pi-modulo{border-radius:var(--r-l)}
  .pi-gruppo .domanda summary{font-size:15.5px}
}
/* MARCA_85331_PAGINE_INFO:fine */

/* MARCA_86231_CONTATTI_SENZA_FOTO — Contatti senza la foto (consegna 86231, 2/10/2026, D620).
   «Nella pagina contatti quella foto non rispecchia nulla cambiala con persone italiane sennò toglia la».
   Tolta la foto, a destra del titolo restano i due riquadri che le stavano sopra («Ti risponde una
   persona» e «Il giro di un messaggio»): qui smettono di galleggiare sulla foto e stanno in colonna,
   un po' piu' grandi, sullo stesso alone colorato. Vale solo dove c'e' .pi-senza-foto (la pagina
   Contatti): Domande e Come funziona restano come sono. Per toglierlo: consegna 86232. */
.pi-palco.pi-senza-foto{display:grid;gap:16px;align-content:start;max-width:440px;padding:clamp(8px,2.2vw,30px) 0 12px}
.pi-palco.pi-senza-foto::before{inset:4% -3% -2% 14%}
.pi-senza-foto .pi-bollo,.pi-senza-foto .pi-riquadrino{position:relative;left:auto;top:auto;bottom:auto;margin:0}
.pi-senza-foto .pi-bollo{justify-self:start;max-width:100%}
.pi-senza-foto .pi-riquadrino{width:auto;padding:18px 20px 14px;margin-left:clamp(0px,3vw,36px)}
.pi-senza-foto .pi-rq-titolo{font-size:15.5px}
.pi-senza-foto .pi-rq-righe{margin-top:10px}
.pi-senza-foto .pi-rq-righe li{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:10px 0;font-size:14.5px;line-height:1.35}
.pi-senza-foto .pi-rq-icona{width:36px;height:36px}
.pi-senza-foto .pi-rq-icona svg{width:17px;height:17px}
@media (max-width:939px){
  .pi-palco.pi-senza-foto{max-width:520px}
}
@media (max-width:699px){
  .pi-palco.pi-senza-foto{gap:12px;padding:0}
  .pi-palco.pi-senza-foto::before{inset:6% 0 -4% 10%}
  .pi-senza-foto .pi-bollo{max-width:100%}
  .pi-senza-foto .pi-riquadrino{margin-left:0;padding:16px 16px 12px}
  .pi-senza-foto .pi-rq-righe li{font-size:14px}
}
/* MARCA_86231_CONTATTI_SENZA_FOTO:fine */