/* ===== SEZIONE CONTATTI — ARANCIO (fix overflow iOS + responsive old iPhone) ===== */


.sezione-contatti-pro{


  --orange:#a87344;    /* arancio mattone (palette progetto) */


  --olive:#35392a;     /* oliva */


  --text:#ffffff;


  --glass: rgba(255,255,255,0.08);


  --glass-strong: rgba(255,255,255,0.14);





  position:relative;


  background:var(--orange);


  color:var(--text);


  isolation:isolate;





  /* IMPORTANTI per evitare “tagli” e sforamenti su iOS */


  width:100%;


  max-width:100%;


  box-sizing:border-box;





  /* padding fluido + safe area */


  padding-inline: max(16px, env(safe-area-inset-left), 5vw);


  padding-block: clamp(64px, 12vh, 128px);





  /* lasciamo i contenuti liberi, tagliamo solo gli sfondi nei loro wrapper */


  overflow:visible;


}





/* texture e blobs — spostati su wrapper che può “tagliare” senza incidere sul contenuto */


.contatti-pro-bg{


  position:absolute; inset:-1px; /* -1px evita il taglio subpixel sul bordo dx */


  background:


    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,0.10), transparent 60%),


    radial-gradient(900px 500px at 90% 110%, rgba(255,255,255,0.08), transparent 60%);


  z-index:0;


  pointer-events:none;


  overflow:hidden;


}


.contatti-pro-grain{


  position:absolute; inset:-1px; z-index:0; opacity:.08; pointer-events:none;


  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 2px);


  mix-blend-mode: multiply;


  overflow:hidden;


}


/* SVG decorativo: niente click; dimensioni elastiche per coprire senza sbordare visivamente */


.contatti-pro-blobs{


  position:absolute; z-index:0;


  width:120%; height:120%;


  left:-10%; top:-10%;


  pointer-events: none;


}





/* layout */


.contatti-pro-container{


  position:relative; z-index:2;


  max-width: 1100px; margin: 0 auto;


  display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px);


  align-items: start;


}


@media (max-width: 900px){


  .contatti-pro-container{ grid-template-columns: 1fr; }


}





/* copy & CTA */


.contatti-pro-copy h2{


  font-size: clamp(28px, 5vw, 44px);


  line-height: 1.15; margin: 0 0 12px;


  font-weight: 700;


  letter-spacing: -0.02em;


}


.contatti-pro-copy .claim{


  font-size: clamp(16px, 2.1vw, 20px);


  line-height: 1.6; opacity:.95; margin: 0 0 20px;


}


.contatti-pro-copy .point-list{


  list-style: none; padding:0; margin: 0 0 28px;


}


.contatti-pro-copy .point-list li{


  display:flex; align-items:flex-start; gap:10px;


  font-size: 16px; line-height:1.6; opacity:.98; margin: 6px 0;


}


.contatti-pro-copy .dot{


  width:8px; height:8px; border-radius:50%; background:#fff; margin-top:9px; flex:0 0 8px;


}





/* bottone WhatsApp */


.btn-whatsapp-pro{


  display:inline-flex; flex-direction:column; align-items:flex-start;


  gap:6px; text-decoration:none; color:#fff;


  background:#afbdad; padding:14px 18px; border-radius:16px;


  box-shadow: 0 10px 30px rgba(0,0,0,0.25);


  transform: translateZ(0);


  transition: transform .2s ease, box-shadow .3s ease, filter .3s ease;


}


.btn-whatsapp-pro .ico{ width:22px; height:22px; fill:currentColor; }


.btn-whatsapp-pro .note{ font-size:12px; opacity:.85; }


.btn-whatsapp-pro:hover{ transform: translateY(-2px); filter: saturate(1.05); }





/* card form */


.contatti-pro-formwrap{


  background: var(--glass);


  border: 1px solid var(--glass-strong);


  backdrop-filter: blur(6px);


  border-radius: 20px;


  box-shadow: 0 20px 40px rgba(0,0,0,0.25);


  padding: clamp(18px, 3vw, 28px);


}


.contatti-pro-form .field-grid{


  display:grid; grid-template-columns: 1fr 1fr; gap: 16px;


}


@media (max-width: 700px){


  .contatti-pro-form .field-grid{ grid-template-columns: 1fr; }


}


.contatti-pro-form .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }


.contatti-pro-form label{ font-size:14px; opacity:.9; }


.contatti-pro-form input[type="text"],


.contatti-pro-form input[type="email"],


.contatti-pro-form select,


.contatti-pro-form textarea{


  border: 1px solid rgba(255,255,255,0.35);


  background: rgba(0,0,0,0.15);


  color:#fff; border-radius:12px; padding:12px 12px;


  font-size:16px; outline:none; transition: border-color .2s ease, background .2s ease;


}


.contatti-pro-form textarea{ resize: vertical; }


.contatti-pro-form input::placeholder,


.contatti-pro-form textarea::placeholder{ color: rgba(255,255,255,.65); }





.contatti-pro-form input:focus,


.contatti-pro-form select:focus,


.contatti-pro-form textarea:focus{


  border-color:#fff; background: rgba(0,0,0,0.22);


}





.contatti-pro-form .checkbox{


  flex-direction:row; align-items:center; gap:10px;


}


.contatti-pro-form .checkbox label a{ color:#fff; text-decoration: underline; text-underline-offset: 2px; }





.contatti-pro-form .btn-submit{


  margin-top:8px;


  display:inline-flex; align-items:center; gap:10px;


  background:#fff; color:var(--olive);


  border: none; border-radius: 12px; padding: 12px 16px;


  font-weight: 700; cursor:pointer;


  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;


}


.contatti-pro-form .btn-submit:hover{


  transform: translateY(-1px);


  box-shadow: 0 10px 22px rgba(0,0,0,0.2);


  background: #fffdf7;


}


.contatti-pro-form .send-ico{ width:18px; height:18px; fill: currentColor; }


.contatti-pro-form .form-footnote{


  font-size:12px; opacity:.8; margin-top:10px;


}





/* errori & toast */


.contatti-pro-form .err{ font-size:12px; color:#ffe4e4; min-height: 16px; }


.contatti-pro-form .toast{


  position:fixed; left:50%; bottom:24px; transform: translateX(-50%) translateY(20px);


  background:#1b1f17; color:#fff; padding:10px 14px; border-radius:10px;


  box-shadow: 0 10px 24px rgba(0,0,0,.3);


  opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;


  z-index: 9999;


}


.contatti-pro-form .toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }





/* fade-in */


[data-fade]{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }


[data-fade].in{ opacity:1; transform:none; }





/* highlight compatibile con tuo sistema */


.sezione-contatti-pro .hl-strong{


  background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,.28) 60%);


  color: inherit;


}





/* honeypot invisibile ma accessibile */


.hp-field{


  position:absolute !important; left:-10000px !important; top:auto !important;


  width:1px !important; height:1px !important; overflow:hidden !important;


}





/* Kicker/sovratitolo sopra l'H2 */


.contatti-pro-supertitle{


  font-size: clamp(14px, 1.6vw, 15px);


  letter-spacing: .06em;


  text-transform: uppercase;


  opacity:.9;


  margin: 0 0 10px;


}





/* ====== GLOBAL ANTI-OVERFLOW ====== */


html, body{


  width:100%;


  max-width:100%;


  overflow-x:hidden; /* niente scroll orizzontale globale */


}





/* Se qualche elemento interno è “fullbleed”, impedisci 100vw (causa primaria su iOS) */


.sezione-contatti-pro [data-fullbleed],


.sezione-contatti-pro .fullbleed{


  width:100%;


  max-width:100%;


  box-sizing:border-box;


}





/* ===== CENTRATURA MOBILE + TIPOGRAFIA CONTENUTA ===== */


@media (max-width: 768px){


  /* wrapper della sezione contatti */


  section[class*="contatti"], section[id*="contatti"],


  section[class*="contact"],  section[id*="contact"]{


    display:flex;


    flex-direction:column;


    align-items:center !important;


    justify-content:center !important;


    text-align:center;


  }





  /* figli diretti centrati e width sicura */


  section[class*="contatti"] > *, section[id*="contatti"] > *,


  section[class*="contact"]  > *, section[id*="contact"]  > *{


    max-width: min(640px, 100%);


    margin-inline:auto !important;


  }





  /* form width comoda */


  section[class*="contatti"] form,


  section[class*="contact"]  form{


    width:min(560px, 100%);


    margin-inline:auto !important;


  }





  .sezione-contatti-pro{


    padding-inline: max(14px, env(safe-area-inset-left));


    padding-block: clamp(56px, 10vh, 96px);


  }





  .contatti-pro-blobs{


    width:140%; height:140%;


    left:-20%; top:-20%;


  }





  .sezione-contatti-pro h2{


    font-size: clamp(22px, 5.8vw, 28px);


    line-height: 1.2;


    word-break: break-word;


  }


  .sezione-contatti-pro p,


  .sezione-contatti-pro label,


  .sezione-contatti-pro input,


  .sezione-contatti-pro textarea,


  .sezione-contatti-pro button{


    font-size: clamp(14px, 4.2vw, 16px);


  }


}





/* ===== iPhone “stretti” (5/5s 320px) e 6/7/8 Plus (414px) ===== */


@media (max-width: 430px){


  /* Clip orizzontale SOLO sui layer, non sul contenuto */


  .contatti-pro-bg,


  .contatti-pro-grain{


    overflow:hidden;


  }





  /* rimuove la causa principale: scale che sborda */


  .contatti-pro-blobs{


    transform:none !important;


    width:130%; height:130%;


    left:-15%; top:-15%;


  }





  .contatti-pro-container{


    margin-left:auto; margin-right:auto;


    max-width:100%;


  }





  /* elementi potenzialmente larghi si adattano */


  .sezione-contatti-pro img,


  .sezione-contatti-pro svg,


  .btn-whatsapp-pro,


  .contatti-pro-formwrap,


  .contatti-pro-form .btn-submit{


    display:block;


    max-width:100%;


    width:100%;


    box-sizing:border-box;


  }


}





/* iPhone 6/7/8 Plus (414px) piccola rifinitura tipografica */


@media (min-width:401px) and (max-width:420px){


  .sezione-contatti-pro h2{ font-size: 26px; }


}





/* ------ iOS viewport quirks ------ */


@supports (-webkit-touch-callout: none){


  .sezione-contatti-pro{


    min-height: -webkit-fill-available;


  }


}