/* Contatti — la struttura di questa pagina (04/10/2026, Design/STRUTTURE-PAGINE.md).
   La linea grafica è quella di style.css (colori di :root, Archivo e Instrument Sans, la cornice
   quadrata del logo, il segno sopra i titoli, pulsanti, fascia navy, entrate morbide): qui cambia solo
   la struttura. Apertura: i CANALI SUBITO (tre grandi tasselli: WhatsApp, telefono, email; niente
   foto grande) · modulo-firma: il MODULO GRANDE a destra, fermo mentre a sinistra scorrono la
   richiesta, l'ispezione in navy, dove siamo (illustrazione costiera e foto piccola) e i social.
   Caricato solo da /contatti/, dopo style.css. */

/* testo per lo screen reader che non si vede (i due punti fra voce e numero) */
.canale__due-punti{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── apertura: titolo e invito in una riga, sotto i tre tasselli ── */
.hero.canali-apertura{padding:clamp(36px,4vw,64px) 0 clamp(52px,5.4vw,84px)}
.canali-apertura__testa{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:22px clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(34px,3.6vw,54px)}
.canali-apertura .canali-apertura__titolo{font-size:clamp(36px,3.9vw,58px);line-height:1.03;font-stretch:var(--wide);margin-bottom:0}
.canali-apertura__intro{padding-bottom:4px}
.canali-apertura__intro .hero__lead{max-width:25em;margin-bottom:10px}
.canali-apertura__intro .hero__sub{margin-bottom:16px}

.canali{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.04fr);gap:clamp(16px,1.6vw,24px);align-items:stretch}
.canali__gruppo{display:flex;flex-direction:column;min-width:0}
/* le etichette dei due gruppi: il quadrato del marchio, il nome, un filo fino in fondo */
.canali__titolo{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:var(--font-display);font-stretch:var(--wide);font-size:13px;font-weight:640;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.canali__titolo::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid currentColor;border-radius:1px}
.canali__titolo::after{content:"";flex:1;height:1px;background:rgba(53,104,154,.3)}
.canali__tasselli{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}

.canale{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;height:100%;padding:clamp(24px,2.3vw,34px);
  background:var(--white);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-2);transition:box-shadow .45s var(--ease),border-color .35s ease}
.canale__icona{--sq:58px}
.canale__voce{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.canale__etichetta{font-size:14.5px;font-weight:600;line-height:1.3;color:var(--body)}
.canale__valore{width:fit-content;font-family:var(--font-display);font-stretch:var(--wide);font-size:clamp(25px,2.25vw,33px);font-weight:650;line-height:1.08;letter-spacing:-.02em;color:var(--heading);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.canale__valore:hover{color:var(--primary)}
.canale__nota{font-size:14.5px;line-height:1.5;max-width:30em}
.canale__azione{margin-top:auto}
/* 05/10 (M2): tre tasselli: WhatsApp alto a sinistra, i due telefoni (studio e reperibilità) uno sotto l'altro */
.canale--whatsapp{grid-row:span 2}

/* WhatsApp: il tassello pieno, nel navy della fascia */
.canale--whatsapp{background:var(--navy);border-color:var(--navy);color:var(--on-navy);box-shadow:var(--sh-3)}
.canale--whatsapp::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 90% at 100% 0%,rgba(53,104,154,.4),transparent 62%),radial-gradient(70% 80% at 0% 100%,rgba(15,37,71,.5),transparent 70%)}
.canale--whatsapp .canale__etichetta{color:var(--on-navy)}
.canale--whatsapp .canale__valore{color:var(--white)}
.canale--whatsapp .canale__valore:hover{color:var(--on-navy)}
.canale--whatsapp .canale__nota{color:var(--on-navy)}
.canale--whatsapp :focus-visible{outline-color:var(--white)}

/* telefono: il tassello intero si tocca per chiamare */
.canale--telefono .canale__valore::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.canale--telefono::after{content:"";position:absolute;right:clamp(22px,2.2vw,32px);bottom:clamp(22px,2.2vw,32px);width:22px;height:22px;opacity:.5;
  background:var(--primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M5 5h14v14'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M5 5h14v14'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:opacity .3s ease,transform .35s var(--ease)}
.canale--telefono .canale__valore:focus-visible{outline:none}
.canale--telefono:has(.canale__valore:focus-visible){outline:2px solid var(--primary);outline-offset:3px}
@media (hover:hover){
  .canale--telefono:hover,.canale--email:hover{border-color:#C9D9E7;box-shadow:var(--sh-3)}
  .canale--telefono:hover .canale__valore{color:var(--primary)}
  .canale--telefono:hover::after{opacity:1;transform:translate(2px,-2px)}
  .canale--telefono:hover .sq,.canale--email:hover .sq{background:var(--navy);color:var(--white)}
  .canale--telefono:hover .sq::after,.canale--email:hover .sq::after{border-color:rgba(255,255,255,.36)}
}

/* email: le tre caselle, una per servizio */
.canale__intro{font-size:15.5px;line-height:1.5;color:var(--heading);margin-top:6px}
.caselle{width:100%;margin-top:2px}
.casella{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-top:1px solid var(--border);font-size:14.5px;line-height:1.45;color:var(--body)}
.casella:last-child{padding-bottom:0}
.casella__indirizzo{width:fit-content;font-weight:600;color:var(--heading);text-decoration:underline;text-decoration-color:rgba(53,104,154,.35);text-underline-offset:4px;white-space:nowrap;transition:color .2s ease,text-decoration-color .2s ease}
.casella__indirizzo:hover{color:var(--primary);text-decoration-color:currentColor}

/* ── modulo-firma: il modulo grande a destra, fermo mentre si scorre ── */
.richiesta{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(36px,5vw,88px);align-items:start}
.richiesta > *{grid-column:1;min-width:0}
.richiesta > .richiesta__modulo{grid-column:2;grid-row:1 / span 4;position:sticky;top:calc(var(--header-c) + 24px)}
.richiesta section > * + *{margin-top:14px}
.richiesta section > .h2 + *{margin-top:0}
.richiesta .text{max-width:32em}
.richiesta .lead{max-width:28em}

/* il modulo: più grande, con la cornice sottile del marchio dentro */
.form-card.richiesta__modulo{padding:clamp(30px,3.2vw,50px) clamp(26px,3vw,46px) clamp(28px,3vw,44px)}
.richiesta__modulo::after{content:"";position:absolute;inset:10px;border:1px solid rgba(53,104,154,.15);border-radius:var(--r-xs);pointer-events:none}
.richiesta__modulo .form{position:relative;z-index:1;gap:20px}
.richiesta__modulo .field textarea{min-height:120px}

/* se arriva un'ispezione: la fascia navy, nella colonna */
.ispezione{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2vw,28px);align-items:start;
  margin-top:clamp(48px,5vw,80px);padding:clamp(28px,3vw,44px);background:var(--navy);border-radius:var(--r-lg);color:var(--on-navy)}
.ispezione::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0%,rgba(53,104,154,.34),transparent 62%),radial-gradient(60% 70% at 0% 100%,rgba(15,37,71,.5),transparent 70%)}
.ispezione__icona{--sq:clamp(64px,5.4vw,78px)}
.ispezione > .ispezione__testo{margin-top:0}
.ispezione .h2{margin-bottom:12px}
.ispezione .lead{max-width:none}
.ispezione strong{color:var(--white);font-weight:650;white-space:nowrap}
.ispezione__numero{margin-top:12px;font-size:clamp(15.5px,1.1vw,16.5px);line-height:1.55;color:var(--on-navy)}
.ispezione__numero a{color:var(--white);font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;white-space:nowrap;transition:text-decoration-color .2s ease}
.ispezione__numero a:hover{text-decoration-color:var(--white)}
.ispezione :focus-visible{outline-color:var(--white)}

/* dove siamo: l'illustrazione costiera del kit e la foto piccola della laguna, come una cartolina */
.dove{margin-top:clamp(52px,5.4vw,84px)}
.dove .cartolina{display:grid;grid-template-columns:minmax(0,1fr);margin-top:clamp(26px,2.6vw,36px)}
.cartolina__foto{grid-row:1;grid-column:1;justify-self:start;width:clamp(170px,44%,250px);aspect-ratio:2;z-index:1;box-shadow:var(--sh-2)}
.cartolina__foto img{object-position:50% 0}
.cartolina__foto::after{inset:7px}
.cartolina .cartolina__costa{grid-row:2;grid-column:1;width:100%;max-width:none;margin-top:-34px}

/* social: due pulsanti */
.social{margin-top:clamp(52px,5.4vw,84px)}
.social .social__pulsanti{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.social__btn{min-width:178px;justify-content:space-between;background:var(--white);color:var(--heading);border-color:var(--input);box-shadow:var(--sh-1)}
.social__btn .icon{color:var(--primary)}
.social__btn:hover{border-color:var(--primary);color:var(--primary);box-shadow:var(--sh-2)}

/* ═══ tablet ═══ */
@media (max-width:1099px){
  .canali{grid-template-columns:minmax(0,1fr)}
  .canale--email{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:start}
  .canale--email .canale__icona{grid-row:1 / span 2}
  .canale--email .caselle{grid-column:2}
}
@media (max-width:959px){
  .canali-apertura__testa{grid-template-columns:minmax(0,1fr)}
  .richiesta{grid-template-columns:minmax(0,1fr)}
  .richiesta > .richiesta__modulo{grid-column:1;grid-row:auto;position:relative;top:auto;margin-top:clamp(26px,4vw,36px)}
}

/* ═══ telefono ═══ */
@media (max-width:640px){
  .hero.canali-apertura{padding:24px 0 44px}
  .canali-apertura .canali-apertura__titolo{font-size:clamp(29px,8vw,34px);line-height:1.06}
  .canali-apertura__testa{gap:16px;margin-bottom:28px}
  .canali-apertura__intro .hero__lead{font-size:16.5px}
  .canali{gap:22px}
  .canali__titolo{font-size:12px;margin-bottom:10px}
  .canali__tasselli{grid-template-columns:minmax(0,1fr);gap:10px}
  .canale--whatsapp{grid-row:auto}
  .canale{gap:12px;padding:20px 18px}
  .canale__icona{--sq:48px}
  .canale__valore{font-size:clamp(23px,6.6vw,27px)}
  .canale__nota{font-size:14px}
  .canale__azione{width:100%}
  /* il telefono dello studio, in riga: icona, voce e numero */
  .canale--telefono{flex-direction:row;align-items:center;gap:14px;padding:16px 18px}
  .canale--telefono .canale__icona{--sq:44px}
  .canale--telefono .canale__voce{margin-top:0;gap:2px}
  .canale--telefono .canale__etichetta{font-size:13.5px}
  .canale--telefono .canale__valore{font-size:21px}
  .canale--telefono::after{right:18px;bottom:auto;top:50%;margin-top:-10px;width:20px;height:20px}
  .canale--email{display:flex;padding:20px 18px 18px}
  .canale__intro{font-size:15px}
  .casella{font-size:14px;padding:10px 0}

  .form-card.richiesta__modulo{padding:24px 18px 22px}
  .richiesta__modulo::after{inset:6px}
  .ispezione{grid-template-columns:minmax(0,1fr);gap:16px;padding:28px 18px 24px;border-radius:var(--r)}
  .ispezione__icona{--sq:56px}
  .ispezione .lead{font-size:16px}
  .ispezione__numero{font-size:15px}
  .cartolina__foto{width:56%}
  .cartolina .cartolina__costa{margin-top:-22px}
  .social .social__pulsanti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .social__btn{min-width:0;padding:12px 16px}
}

@media (prefers-reduced-motion:reduce){
  .canale,.canale--telefono::after{transition:none}
}