/* =========================================================
   Polimeno Pietro S.r.l. - Pagina introduttiva
   "Sito in allestimento": logo e nome in primo piano
   Usa i token e i bottoni definiti in style.css
   ========================================================= */

.pagina-intro{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:linear-gradient(155deg, var(--blu-900) 0%, var(--blu) 62%, var(--blu-800) 100%);
  position:relative;
  /* solo orizzontale: con overflow:hidden le finestre basse non
     riuscivano a scorrere e la pagina restava tagliata */
  overflow-x:hidden;
  padding:clamp(28px,5vw,56px) 0 0;
}
/* Le due decorazioni sono "fixed" di proposito: da absolute, con il
   cerchio spostato sopra il bordo (top negativo), l'area scorrevole
   della pagina risultava falsata e su telefoni e schermi bassi non si
   riusciva a scorrere fino agli orari. Fisse non entrano nel calcolo
   dello scroll e restano un fondale immobile. */

/* trama a quadretti, come la carta millimetrata */
.pagina-intro::before{
  content:"";position:fixed;inset:0;opacity:.18;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(85% 70% at 50% 8%, #000 20%, transparent 78%);
  mask-image:radial-gradient(85% 70% at 50% 8%, #000 20%, transparent 78%);
}
.pagina-intro::after{
  content:"";position:fixed;left:50%;top:-220px;width:760px;height:760px;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 66%);
}

/* il contenuto resta sopra il fondale decorativo */
.intro,.intro__fondo{position:relative;z-index:1}

.intro{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding-block:clamp(24px,5vw,48px)}

/* foglio bianco centrale */
.foglio{
  position:relative;width:min(100% - 36px, 880px);background:#fff;
  border-radius:var(--r-xl);box-shadow:0 50px 90px -40px rgba(0,0,0,.65), 0 2px 6px rgba(4,28,82,.18);
  padding:clamp(84px,11vw,112px) clamp(26px,5vw,72px) clamp(34px,5vw,52px);
  text-align:center;
}
/* riga rossa del quaderno sul bordo sinistro del foglio */
.foglio::before{
  content:"";position:absolute;left:clamp(14px,3vw,30px);top:22px;bottom:22px;width:2px;
  background:linear-gradient(to bottom, transparent, rgba(211,9,24,.35) 12%, rgba(211,9,24,.35) 88%, transparent);
  border-radius:2px;
}

/* marchio in evidenza */
.intro__marchio{
  position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:clamp(122px,19vw,164px);height:clamp(122px,19vw,164px);
  border-radius:30px;overflow:hidden;background:#fff;
  border:6px solid #fff;box-shadow:0 26px 54px -22px rgba(4,28,82,.8);
}
.intro__marchio img{width:100%;height:100%;object-fit:cover;display:block}

.intro__stato{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--rosso-050);color:var(--rosso-scuro);border:1px solid rgba(211,9,24,.22);
  border-radius:999px;padding:9px 18px 9px 14px;
  font-family:var(--font-titoli);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
}
.intro__stato .punto{width:9px;height:9px;border-radius:50%;background:var(--rosso);flex:none;position:relative}
.intro__stato .punto::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(211,9,24,.35);
  animation:pulsa 2.4s ease-out infinite;
}
@keyframes pulsa{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.4);opacity:0}}

.intro__nome{
  margin-top:24px;font-size:clamp(30px,6.2vw,58px);line-height:1.02;color:var(--blu-900);
  letter-spacing:.02em;text-transform:uppercase;
}
.intro__nome .srl{
  display:inline-block;font-size:.3em;letter-spacing:.16em;color:var(--blu);
  vertical-align:.3em;margin-left:.2em;white-space:nowrap;text-transform:none;
}
.intro__claim{
  margin-top:18px;font-family:var(--font-titoli);font-weight:800;font-size:clamp(16px,2.6vw,21px);
  letter-spacing:.01em;text-transform:none;color:var(--blu);
}
.intro__specialita{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.intro__specialita li{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--carta);border:1px solid var(--riga);border-radius:999px;
  padding:9px 16px;font-size:14.2px;font-weight:600;color:var(--blu-900);line-height:1.35;
}
.intro__specialita li::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--rosso);flex:none;
}
.intro__divisore{display:block;width:76px;height:3px;background:var(--rosso);border-radius:3px;margin:26px auto 0}
.intro__testo{margin-top:26px;color:var(--testo-soft);font-size:clamp(16px,2.2vw,18px);max-width:48ch;margin-inline:auto}

.intro__azioni{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}

.intro__info{
  margin-top:38px;padding-top:30px;border-top:1px solid var(--riga);
  display:grid;grid-template-columns:1.2fr .8fr 1.15fr;gap:26px;text-align:left;
}
.info-blocco{display:flex;gap:12px;align-items:flex-start}
.info-blocco svg{color:var(--blu);flex:none;margin-top:3px}
.info-blocco strong{
  display:block;font-family:var(--font-titoli);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--testo-tenue);margin-bottom:5px;
}
.info-blocco span,.info-blocco a{font-size:15px;color:var(--blu-900);line-height:1.5}
.info-blocco a{font-weight:700;transition:color var(--transizione)}
.info-blocco a:hover{color:var(--rosso)}
.info-blocco address{font-style:normal;font-size:15px;color:var(--blu-900);line-height:1.5}
.intro .stato{display:flex;margin-top:10px;font-size:15px}
.intro .scheda-stato__dettaglio{margin-top:4px;font-size:13.5px;color:var(--testo-soft)}

.intro__anteprima{
  display:inline-flex;align-items:center;gap:9px;margin-top:34px;
  font-weight:700;font-size:14.5px;color:var(--blu);
  border-bottom:2px solid transparent;transition:color var(--transizione), border-color var(--transizione), gap var(--transizione);
}
.intro__anteprima:hover{color:var(--rosso);border-color:var(--rosso);gap:14px}

.intro__fondo{
  position:relative;text-align:center;color:rgba(255,255,255,.66);font-size:13.4px;
  padding:26px 20px calc(26px + env(safe-area-inset-bottom));
}
.intro__fondo p + p{margin-top:6px}

@media (max-width:720px){
  .foglio{padding-top:clamp(66px,17vw,84px)}
  .intro__info{grid-template-columns:1fr;gap:18px;text-align:left}
  .intro__azioni{flex-direction:column;align-items:stretch}
  .intro__azioni .btn{width:100%}
  .foglio::before{display:none}
}