/* ==========================================================================
   Contatti (/contatti), dal mockup di Gaia (9/10/2026). Si carica dopo
   prodotto.css (fondi, hero d'area). Prefisso ct-; le FAQ ridisegnano le
   regole .faq di site.css solo qui (.contatti-g).
   ========================================================================== */

/* --- Hero: come funziona --------------------------------------------------- */
@media (min-width: 1001px) {
  .ct-hero.hero__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 27.5rem); gap: clamp(3rem, 7vw, 6rem); }
}
.ct-come {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: 27.5rem;
  justify-self: center;
  padding: 2.5rem;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--sh-ombra);
}
.ct-come__etichetta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--sh-ruggine); }
.ct-come__passi { list-style: none; margin: 0; padding: 0; }
.ct-come__passi li { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1.125rem; padding-bottom: 1.625rem; }
.ct-come__passi li:last-child { padding-bottom: 0; }
.ct-come__passi li:not(:last-child)::after { content: ""; position: absolute; left: 1.3125rem; top: 3rem; bottom: 0.125rem; width: 2px; background: #f3d9bf; }
.ct-come__passi span { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--sh-arancio); color: #fff; font-family: var(--font-titoli); font-size: 1.25rem; font-weight: 800; }
.ct-come__passi b { padding-top: 0.125rem; font-family: var(--font-titoli); font-size: 1.375rem; font-weight: 700; color: var(--teal-profondo); }
.ct-come__passi small { margin-top: 0.25rem; font-size: 1rem; line-height: 1.55; color: var(--grigio); }
.ct-come__bottone { align-self: flex-start; }
.ct-come__privacy { padding-top: 0.25rem; font-size: 0.8125rem; color: var(--grigio); }
.ct-come__privacy a { color: var(--teal-scuro); }
.ct-come__passi { padding-bottom: 1.75rem; border-bottom: 1px solid #f3e4d2; }
@media (max-width: 560px) { .ct-come { padding: 1.75rem 1.375rem; } }

/* --- Commerciale, customer care, accesso ------------------------------------ */
.ct-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.ct-card__voce { display: flex; flex-direction: column; gap: 1.25rem; padding: 2.25rem 2rem; border: 1px solid #e2ecec; border-radius: 24px; background: #fff; }
.ct-card__voce h2 { font-size: 1.625rem; font-weight: 700; line-height: 1.15; color: var(--teal-profondo); }
.ct-card__icona { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: #e3f4f5; color: var(--teal-scuro); }
.ct-card__voce p { display: flex; flex-direction: column; gap: 0.25rem; }
.ct-card__voce small { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sh-ruggine); }
.ct-card__voce p a { font-size: 1.125rem; font-weight: 600; color: var(--teal-profondo); text-decoration: none; overflow-wrap: anywhere; }
.ct-card__voce p a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ct-card__voce p span { font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--teal-profondo); }
.ct-card__voce .ct-card__testo { font-size: 1.0625rem; line-height: 1.6; color: var(--grigio); }
.ct-card__bottone { margin-top: auto; align-self: flex-start; }
.ct-card__voce--scura { border-color: var(--sh-scuro); background: var(--sh-scuro); }
.ct-card__voce--scura h2, .ct-card__voce--scura p a, .ct-card__voce--scura p span { color: #fff; }
.ct-card__voce--scura small { color: #7fd0d7; }
.ct-card__voce--scura .ct-card__icona { background: #16525a; color: #fff; }
@media (max-width: 1000px) { .ct-card { grid-template-columns: minmax(0, 1fr); max-width: 32rem; margin-inline: auto; } }
@media (max-width: 560px) { .ct-card__voce { padding: 1.75rem 1.375rem; } }

/* --- FAQ a due colonne --------------------------------------------------------- */
.ct-faq { display: grid; grid-template-columns: minmax(0, 21.25rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.ct-faq__titolo { margin-top: 0.875rem; font-size: clamp(2.125rem, 2.4vw + 1.25rem, 3.25rem); line-height: 1.1; }
.contatti-g .faq { gap: 1rem; margin-top: 0; }
.contatti-g .faq__voce { border: 0; border-radius: 20px; background: #fff; }
.contatti-g .faq__voce[open] { background: #fff; }
.contatti-g .faq__domanda { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 2rem; gap: 1rem; align-items: center; padding: 1.625rem 1.875rem; }
.contatti-g .faq__numero { font-family: var(--font-titoli); font-size: 1.375rem; font-weight: 800; color: var(--sh-arancio); }
.contatti-g .faq__testo { font-family: var(--font-titoli); font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
.contatti-g .faq__segno { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #e3f4f5; color: var(--teal-scuro); font-size: 1.375rem; font-weight: 500; line-height: 1; }
.contatti-g .faq__risposta { padding: 0 1.875rem 1.75rem 6.375rem; font-size: 1rem; line-height: 1.6; color: var(--grigio); }
.faq__orari { margin-top: 0.875rem; }
.faq__orari-titolo { padding-bottom: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sh-ruggine); }
.faq__orari-riga { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid #e2ecec; }
.faq__orari-riga b { font-weight: 600; color: var(--teal-profondo); }
@media (max-width: 1000px) { .ct-faq { grid-template-columns: minmax(0, 1fr); } }
/* Il blocco mobile di site.css nasconde il numero e passa a due colonne:
   qui il numero resta (mockup di Gaia), quindi tre colonne anche su telefono. */
@media (max-width: 560px) {
  .contatti-g .faq__numero { display: block; }
  .contatti-g .faq__domanda { grid-template-columns: 2.25rem minmax(0, 1fr) 2rem; gap: 0.625rem; padding: 1.25rem 1.125rem; }
  .contatti-g .faq__testo { font-size: 1.125rem; }
  .contatti-g .faq__risposta { padding: 0 1.125rem 1.375rem; }
  .faq__orari-riga { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

/* Le FAQ sono l'ultima fascia: niente strappo sotto, e il grigio continua
   dietro gli angoli del footer. */
.contatti-g > .sezione:last-child::after { display: none; }
body:has(.contatti-g) .site-footer { position: relative; }
body:has(.contatti-g) .site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4rem; background: var(--sh-grigio); z-index: -1; }

/* --- Il form contatti nella card (assets/js/form-contatti.js) ------------
   Desktop: prende il posto dei tre passi. Fino a 760px: la card diventa un
   modale a tutto schermo. */
.ct-come__intro { display: flex; flex-direction: column; gap: 1.75rem; }
.ct-come--form .ct-come__intro { display: none; }
.ct-come:focus { outline: none; }   /* il fuoco ci arriva da #modulo (form-contatti.js) */
.ct-form[hidden], .ct-form__grazie[hidden], .ct-form__errore[hidden] { display: none; }
.ct-form, .ct-form__grazie { display: flex; flex-direction: column; gap: 1rem; }
.ct-form__testa { display: flex; justify-content: space-between; align-items: center; margin: -0.75rem -0.75rem 0; }
.ct-form__indietro, .ct-form__chiudi {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5rem 0.75rem; border: 0; border-radius: 999px; background: none;
  color: var(--teal-scuro); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.ct-form__chiudi { display: none; width: 2.75rem; height: 2.75rem; justify-content: center; padding: 0; font-size: 1.75rem; font-weight: 400; color: var(--grigio); }
.ct-form__indietro:hover, .ct-form__chiudi:hover { background: var(--teal-chiaro); }
.ct-form__titolo { margin-top: -0.25rem; font-size: clamp(1.5rem, 1vw + 1.1rem, 1.875rem); font-weight: 700; line-height: 1.15; color: var(--teal-profondo); }
.ct-form__campi { display: grid; gap: 0.875rem; }
.ct-form__riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ct-form__campo { display: flex; flex-direction: column; gap: 0.3125rem; }
.ct-form__campo label { font-size: 0.875rem; font-weight: 600; color: var(--teal-profondo); }
.ct-form__campo input, .ct-form__campo textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid #d5e0e1;
  border-radius: 12px;
  background: #f9fbfb;
  color: var(--teal-profondo);
  font: inherit;
  font-size: 1rem;              /* 16px: su iPhone non zooma al tocco */
  line-height: 1.4;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ct-form__campo textarea { min-height: 6.5rem; resize: vertical; }
.ct-form__campo input::placeholder, .ct-form__campo textarea::placeholder { color: #8a9a9d; }
.ct-form__campo input:focus, .ct-form__campo textarea:focus { outline: 2px solid var(--teal-scuro); outline-offset: 1px; border-color: transparent; background: #fff; }
.ct-form__campo [aria-invalid="true"] { border-color: #c4320a; background: #fff8f6; }
.ct-form__nota { font-size: 0.8125rem; color: #b42318; }
.ct-form__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-form__spunta { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; line-height: 1.45; color: var(--grigio); cursor: pointer; }
.ct-form__spunta input { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; accent-color: var(--teal-scuro); }
.ct-form__privacy { font-size: 0.8125rem; line-height: 1.5; color: var(--grigio); }
.ct-form__privacy a { color: var(--teal-scuro); }
.ct-form__errore { padding: 0.75rem 0.875rem; border-radius: 12px; background: #fdecea; color: #8a1c12; font-size: 0.875rem; line-height: 1.5; }
.ct-form__errore a { color: inherit; font-weight: 600; }
.ct-form__codice { display: block; margin-top: 0.375rem; font-size: 0.75rem; opacity: 0.75; overflow-wrap: anywhere; }
.ct-form__invia { align-self: flex-start; }
.ct-form__invia:disabled { opacity: 0.7; cursor: progress; }
.ct-form__grazie:focus { outline: none; }
.ct-form__grazie p:not(.ct-come__etichetta) { font-size: 1rem; line-height: 1.6; color: var(--teal-profondo); }
.ct-form__grazie .btn { align-self: flex-start; margin-top: 0.25rem; }
.ct-form__grazie .ct-form__testa { display: none; }

@media (max-width: 760px) {
  /* Il modale: la card esce dalla pagina e la copre tutta. */
  .ct-come.ct-come--form {
    position: fixed;
    inset: 0;
    z-index: 300;
    max-width: none;
    margin: 0;
    padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html.ct-modale-aperto, html.ct-modale-aperto body { overflow: hidden; }
  .ct-form__indietro { display: none; }
  .ct-form__chiudi { display: inline-flex; margin-left: auto; }
  .ct-form__testa { margin: -0.5rem -0.5rem 0; }
  .ct-form__grazie .ct-form__testa { display: flex; }
  .ct-form__invia, .ct-form__grazie .btn { align-self: stretch; }
}
@media (max-width: 420px) { .ct-form__riga { grid-template-columns: minmax(0, 1fr); } }

/* Le FAQ sono l'ultima fascia: niente strappo sotto, e il grigio continua
   dietro gli angoli del footer. */
.contatti-g > .sezione:last-child::after { display: none; }
body:has(.contatti-g) .site-footer { position: relative; }
body:has(.contatti-g) .site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 4rem; background: var(--sh-grigio); z-index: -1; }

/* Il form HubSpot nella card "Come funziona", aperto dal pulsante. Il
   form v2 si disegna in un iframe di HubSpot: lo stile dei campi si cambia
   dal form in HubSpot, le regole qui sotto valgono se HubSpot lo rende
   senza iframe. */
.ct-come__form[hidden], .ct-come__bottone[hidden] { display: none; }
.ct-come__attesa { font-size: 0.9375rem; color: var(--grigio); }
.ct-come__attesa a { color: var(--teal-scuro); }
.ct-come__form .hs-form-field { margin-bottom: 0.875rem; }
.ct-come__form label { display: block; margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--teal-profondo); }
.ct-come__form .hs-input:not([type=checkbox]):not([type=radio]) {
  width: 100% !important;
  padding: 0.625rem 0.75rem;
  border: 1px solid #dce7e8;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--teal-profondo);
}
.ct-come__form .hs-input:focus { outline: 2px solid var(--teal-scuro); outline-offset: 1px; border-color: transparent; }
.ct-come__form textarea.hs-input { min-height: 6rem; }
.ct-come__form .hs-error-msgs { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.8125rem; color: #b42318; }
.ct-come__form .legal-consent-container, .ct-come__form .hs-richtext { font-size: 0.75rem; line-height: 1.5; color: var(--grigio); }
.ct-come__form .hs-button {
  margin-top: 0.5rem;
  padding: 0.875rem 1.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--teal-scuro);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ct-come__form .hs-button:hover { background: var(--teal-profondo); }
.ct-come__form fieldset { max-width: none !important; }
.ct-come__form .submitted-message { font-size: 1rem; line-height: 1.6; color: var(--teal-profondo); }