/* =============================================================================
   inKarma - foglio di stile principale
   =============================================================================

   INDICE
     1.  Font (DM Sans, self-hosted)
     2.  Token e variabili
     3.  Reset ed elementi base
     4.  Layout comune
     5.  Header e navigazione
     6.  Hero
          6.1  Eyebrow (riusata in tutte le sezioni)
          6.2  Bottoni (riusati nei Contatti)
          6.3  Artwork e card flottanti
     7.  Servizi
          7.1  Pannello dettaglio servizio
     8.  Progetti
     9.  Metodo
     10. Chi siamo
     11. Contatti
     12. Footer
     13. Skip link
     14. Animazioni
     15. Pannello laterale
     16. Pagine di dettaglio (.doc)
     17. Consenso cookie
     18. Breakpoint >= 1700px
     19. Breakpoint <= 1150px
     20. Breakpoint <= 760px (mobile)
     21. Pannello, dettaglio e progetti su mobile
     22. Riduzione del movimento

   NOTE
     - L'ordine delle regole e' quello originale. Non riordinare senza
       verificare la cascata: piu' regole hanno pari specificita'.
     - I breakpoint stanno in fondo e sovrascrivono le regole di base.
     - Il blocco 17 azzera animazioni e transizioni in modo globale: le
       animazioni gestite via JavaScript vanno protette a parte con
       matchMedia('(prefers-reduced-motion: reduce)').
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. FONT  -  DM Sans, font variabile self-hosted (licenza SIL OFL 1.1)
   Asse wght verificato sul file: da 100 a 1000, quindi basta una dichiarazione
   per intervallo Unicode invece dei 14 blocchi separati serviti da Google.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -----------------------------------------------------------------------------
   2. TOKEN E VARIABILI
   -------------------------------------------------------------------------- */

:root {
  --wine: #200e15;
  --ink: #30131c;
  --cream: #ffebe2;
  --orange: #ff653b;
  --muted: #c7b4b9;
  --line: rgba(255, 226, 218, .17);
  font-family: 'DM Sans', Arial, sans-serif;
  color: var(--cream);
  background: var(--wine);
  font-synthesis: none;
  color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   3. RESET ED ELEMENTI BASE
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 35px;
}

body {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 6px;
}

img {
  max-width: 100%;
  display: block;
}

em {
  font-style: normal;
  color: var(--orange);
}

/* -----------------------------------------------------------------------------
   4. LAYOUT COMUNE
   -------------------------------------------------------------------------- */

.wrap {
  width: min(1400px, calc(100% - 112px));
  margin-inline: auto;
}

.dark-top {
  background: radial-gradient(ellipse at 76% 42%, #42182488, transparent 58%), radial-gradient(ellipse at 14% 0%, #3b172077, transparent 50%), var(--wine);
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   5. HEADER E NAVIGAZIONE
   -------------------------------------------------------------------------- */

.header {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 17px;
}

.brand span {
  font-size: 44px;
  letter-spacing: -2px;
  font-weight: 550;
  line-height: 1;
}

.header nav {
  display: flex;
  align-items: center;
  gap: 42px;
  font-size: 15px;
}

.header nav a:not(.nav-cta) {
  transition: color .2s;
}

.header nav a:hover {
  color: var(--orange);
}

.nav-cta {
  border: 1px solid #d95d39;
  border-radius: 40px;
  padding: 14px 28px;
  margin-left: 45px;
  display: flex;
  gap: 28px;
  align-items: center;
}

.nav-cta span {
  font-size: 24px;
}

.menu-toggle {
  display: none;
}

/* -----------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */

.hero {
  min-height: 620px;
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: center;
  gap: 0;
  padding-block: 45px 45px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

/* --- 6.1  Eyebrow - riusata in tutte le sezioni --- */

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .25em;
  display: flex;
  align-items: center;
  gap: 22px;
  line-height: 1.6;
  margin: 0 0 28px;
  color: var(--muted);
}

.eyebrow>span {
  width: 30px;
  height: 1px;
  background: var(--orange);
  flex-shrink: 0;
}

h1 {
  font-size: clamp(58px, 6.2vw, 96px);
  font-weight: 550;
  letter-spacing: -.065em;
  line-height: 1.04;
  margin: 0 0 24px;
}

h1 em {
  font-weight: 600;
}

.intro {
  font-size: clamp(20px, 2.05vw, 29px);
  line-height: 1.45;
  letter-spacing: -.025em;
  color: #e7d4d7;
  margin: 0 0 32px;
}

.actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- 6.2  Bottoni - riusati nei Contatti --- */

.button {
  /* Il sito non azzera i pulsanti a monte, e questa classe vive sia su <a> sia
     su <button>: sull'ancora il bordo non c'e', sul bottone comparirebbe
     quello predefinito del browser (outset 2px bianco). La riga sotto lo
     toglie; .secondary, piu' avanti, dichiara il suo e continua a vincere. */
  border: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  border-radius: 40px;
  padding: 15px 24px;
  font-size: 14px;
  font-weight: 550;
  transition: transform .2s, background .2s, box-shadow .2s;
}

.button:hover {
  transform: translateY(-3px);
}

.primary {
  background: var(--orange);
  color: #200e15;
  box-shadow: 0 3px 22px #ff653b10;
}

.primary:hover {
  background: #ff825a;
  box-shadow: 0 5px 24px #ff653b28;
}

.button span {
  font-size: 23px;
  line-height: 1;
}

.secondary {
  border: 1px solid #a3838a;
  color: var(--cream);
}

.secondary:hover {
  background: #ffffff08;
}

.benefits {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 45px 0 0;
  gap: 0;
}

.benefits li {
  border-left: 1px solid #aa858a;
  padding: 10px 20px;
  font-size: 13px;
  line-height: 1.5;
}

.benefits li:first-child {
  padding-left: 14px;
}

/* --- 6.3  Artwork e card flottanti --- */

.hero-art {
  height: 535px;
  position: relative;
  margin-left: -5px;
  isolation: isolate;
}

.artwork {
  position: absolute;
  inset: -20px -25px 0;
  width: calc(100% + 50px);
  height: 100%;
  object-fit: contain;
  z-index: -1;
  mask-image: radial-gradient(ellipse at center, black 42%, transparent 74%);
}

.floating {
  position: absolute;
  border: 1px solid #bf8a9277;
  border-radius: 10px;
  background: linear-gradient(120deg, #6a3b474d, #29121c99);
  box-shadow: 0 10px 40px #07010733, inset 0 1px 0 #ffd4c82b;
  padding: 18px;
  backdrop-filter: blur(8px);
  animation: float 7s ease-in-out infinite;
}

.mini-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.card-web {
  left: 8%;
  top: 12px;
  width: 188px;
  transform: rotate(7deg);
  --rotate: 7deg;
}

.browser-dots {
  font-size: 8px;
  color: #f0bdad;
  border-block: 1px solid var(--line);
  padding: 7px 0;
  margin: 12px -5px;
}

.card-web strong {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
}

.mini-button {
  width: 39px;
  height: 7px;
  background: var(--orange);
  border-radius: 10px;
  margin-top: 13px;
}

.card-seo {
  top: 223px;
  left: 0;
  width: 154px;
  --rotate: 5deg;
  transform: rotate(5deg);
  animation-delay: -2s;
}

.bars {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 65px;
  margin-top: 15px;
}

.bars i {
  width: 11px;
  background: linear-gradient(var(--orange), #813425);
  height: 26%;
}

.bars i:nth-child(2) {
  height: 45%;
}

.bars i:nth-child(3) {
  height: 38%;
}

.bars i:nth-child(4) {
  height: 68%;
}

.bars i:nth-child(5) {
  height: 82%;
}

.bars i:nth-child(6) {
  height: 100%;
}

.card-marketing {
  top: 174px;
  right: -3%;
  width: 176px;
  --rotate: -6deg;
  transform: rotate(-6deg);
  animation-delay: -4s;
}

.card-marketing svg {
  width: 100%;
  margin-top: 18px;
}

.card-ai {
  bottom: 45px;
  right: 3%;
  width: 202px;
  --rotate: -3deg;
  transform: rotate(-3deg);
  animation-delay: -1s;
}

.ai-content {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
}

.ai-content p {
  font-size: 12px;
  line-height: 1.8;
  margin: 0;
  color: #e0c2c5;
}

.ai-icon {
  border: 1px solid #c2918c;
  padding: 8px;
  border-radius: 4px;
  font-size: 23px;
}

.art-caption {
  position: absolute;
  bottom: 5px;
  left: 10%;
  font-size: 11px;
  letter-spacing: .23em;
  line-height: 1.8;
  color: #cba4aa;
}

/* -----------------------------------------------------------------------------
   7. SERVIZI
   -------------------------------------------------------------------------- */

.services {
  background: radial-gradient(ellipse at 75% 60%, #ffe6d9, transparent 75%), #fff0e9;
  color: var(--ink);
  padding: 40px 0 24px;
}

.section-meta {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 25px;
}

.section-meta .eyebrow {
  color: #8d6570;
}

.section-meta>p:last-child {
  margin: 0;
  font-size: 13px;
  letter-spacing: .19em;
}

.services-layout {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 48px;
  align-items: start;
}

h2 {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 550;
  letter-spacing: -.05em;
  line-height: 1.14;
  margin: 0 0 26px;
}

.section-copy>p {
  font-size: 15px;
  line-height: 1.7;
  max-width: 480px;
  margin: 28px 0 0;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}

.service {
  min-width: 0;
  min-height: 170px;
  padding: 20px 13px 14px;
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left;
  border: 1px solid #e7c8be;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  transition: background .2s, transform .2s, border-color .2s;
}

.service:hover,
.service[aria-expanded=true] {
  background: #fff9f4;
  transform: translateY(-5px);
  border-color: #c88670;
}

.service svg {
  width: 33px;
  height: 33px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  margin-bottom: 17px;
}

.service span {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.3;
}

.service b {
  margin-top: auto;
  padding-top: 12px;
  font-size: 23px;
  font-weight: 400;
  color: #9a4532;
}

.section-end {
  text-align: right;
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: .22em;
  color: #8d6570;
}

/* --- 7.1  Pannello dettaglio servizio --- */

.service-detail {
  margin-top: 28px;
  border-top: 1px solid #dfbbb0;
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
}

.service-detail[hidden] {
  display: none;
}

.service-detail .eyebrow {
  font-size: 10px;
  color: #986452;
  margin-bottom: 10px;
}

.service-detail h3 {
  font-size: 25px;
  margin: 0 0 12px;
}

.detail-copy {
  max-width: 750px;
  line-height: 1.7;
  margin: 0;
}

.text-link {
  white-space: nowrap;
  border-bottom: 1px solid;
  padding-bottom: 5px;
}

.detail-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

/* -----------------------------------------------------------------------------
   8. PROGETTI
   -------------------------------------------------------------------------- */

/* Le card usano il "link che copre tutta la scheda": il testo del collegamento
   resta il titolo (utile a chi naviga per link), ma l'area cliccabile e' l'intera
   card grazie allo pseudo-elemento in posizione assoluta. */

.projects {
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse at 18% 0%, #3b172077, transparent 62%);
  padding-block: 84px 94px;
}

.projects-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 46px;
}

.projects-head h2 {
  margin: 0;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px 28px;
}

.project {
  position: relative;
  display: flex;
  flex-direction: column;
}

.project img {
  width: 100%;
  /* Indispensabile: gli attributi width/height dell'<img> valgono come stile di
     presentazione. Sovrascrivendo in CSS solo la larghezza, resterebbe in vigore
     height: 600px dall'attributo e, con entrambe le dimensioni definite,
     aspect-ratio verrebbe ignorato. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform .35s ease, border-color .25s;
}

.project:hover img {
  transform: translateY(-6px);
  border-color: #c88670;
}

.project-sector {
  margin: 19px 0 0;
  font-size: 11px;
  letter-spacing: .2em;
  color: #cba4aa;
}

.project h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.03em;
  margin: 11px 0 0;
}

.project h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.project h3 a:hover {
  color: var(--orange);
}

.project p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

/* Con :has() l'anello di focus circonda tutta la card invece del solo titolo.
   Dove :has() non c'e', resta il contorno predefinito sul link: nessuna perdita. */

@supports selector(:has(*)) {
  .project h3 a:focus-visible {
    outline: none;
  }

  .project:has(a:focus-visible) {
    outline: 3px solid var(--orange);
    outline-offset: 8px;
    border-radius: 14px;
  }
}

/* --- 8.1  Risultati nei casi studio, e avviso sui contenuti di esempio --- */

.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.result b {
  display: block;
  font-size: 38px;
  font-weight: 550;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--orange);
}

.result span {
  display: block;
  margin-top: 11px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Nell'elenco la griglia vive dentro la colonna stretta di .doc: tre colonne
   sarebbero illeggibili, sia a pagina intera sia dentro il pannello. */

.doc .project-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 34px 24px;
  margin-top: 44px;
}

.placeholder-note {
  margin: 0 0 32px;
  padding: 15px 19px;
  border: 1px dashed #a3838a;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #e7d4d7;
}

/* -----------------------------------------------------------------------------
   9. METODO
   -------------------------------------------------------------------------- */

.method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  padding-block: 105px;
}

.method-intro>p:last-child {
  color: var(--muted);
  max-width: 365px;
  line-height: 1.7;
}

.steps article {
  display: flex;
  gap: 27px;
  border-top: 1px solid var(--line);
  padding: 25px 0;
}

.number {
  font-size: 13px;
  color: var(--orange);
  padding-top: 7px;
}

.steps h3 {
  font-size: 25px;
  font-weight: 500;
  margin: 0 0 9px;
  letter-spacing: -.025em;
}

.steps p {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
  max-width: 490px;
}

/* -----------------------------------------------------------------------------
   10. CHI SIAMO
   -------------------------------------------------------------------------- */

.about {
  border-block: 1px solid var(--line);
  background: radial-gradient(ellipse at 85% 50%, #63273055, transparent 65%);
}

.about-inner {
  padding-block: 72px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0 80px;
}

.about .eyebrow {
  grid-column: 1/-1;
}

.about h2 {
  margin: 0;
}

.about-inner>p:last-child {
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
}

/* -----------------------------------------------------------------------------
   10.1 DOMANDE RICORRENTI
   -------------------------------------------------------------------------- */

/* Costruita con <details>/<summary>: apertura, chiusura e uso da tastiera sono
   nativi del browser, senza una riga di JavaScript. L'attributo name sui
   details fa chiudere le altre quando se ne apre una.

   NOTA: qui non c'e' markup FAQPage, ed e' voluto. Google ha disattivato quel
   risultato arricchito il 7 maggio 2026: il markup non produrrebbe piu' nulla.
   Il contenuto resta perche' serve a chi legge, e il testo e' comunque
   indicizzabile come qualsiasi altro testo della pagina. */

.faq {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 90px;
  /* Sopra c'e' la fascia .about, che si chiude con un bordo: con soli 20px il
     titolo delle domande restava appiccicato a quella riga. 105px riporta lo
     stacco in linea con le altre sezioni (qui sopra 177px, sotto 190px). */
  padding-block: 105px 100px;
}

.faq-intro > p:last-child {
  max-width: 340px;
  line-height: 1.7;
  color: var(--muted);
}

.domanda {
  border-top: 1px solid var(--line);
}

.domanda:last-child {
  border-bottom: 1px solid var(--line);
}

.domanda summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}

.domanda summary::-webkit-details-marker {
  display: none;
}

.domanda summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  color: var(--orange);
  transition: transform .25s;
}

.domanda[open] summary::after {
  content: "\2212";
}

.domanda summary:hover {
  color: var(--orange);
}

.domanda summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.domanda p {
  max-width: 62ch;
  margin: 0;
  padding: 0 0 24px;
  color: var(--muted);
  line-height: 1.75;
}

/* -----------------------------------------------------------------------------
   11. CONTATTI
   -------------------------------------------------------------------------- */

.contact {
  padding-block: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.contact p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

.contact .button {
  padding: 19px 30px;
}

/* --- 11.1  Modulo di contatto --- */

/* Il modulo non sta piu' in questa sezione: da qui si apre la finestra
   (sezione 24). Percio' l'allineamento in alto, che serviva quando a destra
   c'era una colonna alta, e' stato tolto: la riga base della sezione 11 torna
   a centrare le due colonne. Le regole del modulo restano qui sotto perche'
   il modulo esiste ancora, dentro la finestra e in fondo alla pagina per chi
   non ha JavaScript. */

.contact-intro {
  flex: 1 1 360px;
  max-width: 520px;
}

/* Stessa ragione di specificita' della regola qui sotto: .contact p:not(.eyebrow)
   azzera i margini e batterebbe un semplice .contact-azione. */

.contact p.contact-azione {
  margin-top: 32px;
}

/* Selettore volutamente piu' specifico: la regola .contact p:not(.eyebrow)
   della sezione 11 azzera i margini e batterebbe un semplice .contact-alt. */

.contact p.contact-alt {
  margin-top: 26px;
  font-size: 14px;
}

.contact-alt a {
  color: var(--cream);
  border-bottom: 1px solid #a3838a;
}

.form {
  flex: 1 1 440px;
  max-width: 560px;
  display: grid;
  gap: 16px;
}

.campo {
  display: grid;
  gap: 7px;
}

.campo label {
  font-size: 13px;
  color: var(--cream);
}

.campo label span {
  color: var(--muted);
}

.campo input,
.campo textarea {
  font: inherit;
  font-size: 15px;
  padding: 13px 15px;
  color: var(--cream);
  background: #ffffff0a;
  border: 1px solid #a3838a;
  border-radius: 10px;
  transition: border-color .2s, background .2s;
}

.campo textarea {
  min-height: 112px;
  resize: vertical;
}

.campo input:hover,
.campo textarea:hover {
  border-color: #c88670;
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: #ffffff14;
}

.campo [aria-invalid="true"] {
  border-color: #ff7a6a;
}

.campo-doppio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.errore {
  margin: 0;
  font-size: 13px;
  color: #ff9b8a;
}

.errore[hidden] {
  display: none;
}

.campo-consenso {
  display: flex;
  align-items: start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.campo-consenso input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--orange);
}

.campo-consenso a {
  color: var(--cream);
  border-bottom: 1px solid #a3838a;
}

/* Il campo esca viene spostato fuori schermo, non nascosto con display:none:
   diversi automatismi riconoscono gli elementi nascosti e saltano il tranello,
   mentre un campo fuori vista lo compilano. */

.esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form button {
  justify-self: start;
}

.form-esito {
  margin: 0;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.form-esito[hidden] {
  display: none;
}

.form-esito.is-ok {
  background: #1d3d2a;
  color: #cdf0d8;
}

.form-esito.is-ko {
  background: #4a1b1b;
  color: #ffd3cb;
}

/* -----------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 30px;
  gap: 25px;
}

footer .brand span {
  font-size: 32px;
}

footer p,
.footer-contatti {
  font-size: 13px;
  color: var(--muted);
}

.footer-contatti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.footer-contatti a {
  color: var(--muted);
  transition: color .2s;
}

.footer-contatti a:hover {
  color: var(--orange);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
}

.footer-links a {
  color: var(--muted);
  transition: color .2s;
}

.footer-links a:hover {
  color: var(--orange);
}

/* -----------------------------------------------------------------------------
   13. SKIP LINK
   -------------------------------------------------------------------------- */

.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--cream);
  color: var(--ink);
  padding: 15px;
  z-index: 100;
}

.skip:focus {
  top: 15px;
}

/* -----------------------------------------------------------------------------
   14. ANIMAZIONI
   -------------------------------------------------------------------------- */

@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -9px;
  }
}

/* --- 14.1  Comparsa allo scorrimento, accesa da anim.js ------------------

   La classe reveal-on la mette JavaScript, mai il CSS. Se nascondessimo da
   qui, un errore di script lascerebbe la pagina bianca; e con "riduci
   movimento" la sezione 22 azzera le transizioni, quindi gli elementi
   resterebbero a opacita' zero per sempre. anim.js non accende nulla in quel
   caso: il contenuto resta semplicemente visibile. */

html.reveal-on [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}

html.reveal-on [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease-out,
              transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* --- 14.2  Parallasse dell'illustrazione ---------------------------------

   Riusa --rotate, che il foglio originale dichiara su ogni card ma non usa in
   nessuna regola: cosi' lo spostamento si somma alla rotazione invece di
   cancellarla. La transizione lunga fa "inseguire" il puntatore con un po'
   di inerzia, che si legge come peso fisico.
   L'animazione float agisce sulla proprieta' translate, distinta da
   transform: le due si compongono senza disturbarsi. */

.hero-art .artwork,
.hero-art .floating {
  transform: rotate(var(--rotate, 0deg)) translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* --- 14.5  Apertura del dettaglio servizio -------------------------------

   Il pannello compare sotto la griglia, lontano dal punto in cui si e'
   cliccato. Senza movimento molte persone non si accorgono che qualcosa e'
   cambiato fuori dal proprio fuoco visivo: l'animazione serve a segnalare
   dove guardare, non ad abbellire.
   L'animazione e' legata alla comparsa dell'elemento, quindi riparte a ogni
   apertura. Con "riduci movimento" la sezione 22 la azzera e il pannello
   compare di colpo: comportamento corretto. */

.service-detail:not([hidden]) {
  animation: dettaglio-entra .34s cubic-bezier(.22, .61, .36, 1);
}

@keyframes dettaglio-entra {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* --- 14.3  Sezione corrente nel menu ------------------------------------- */

.header nav a[aria-current="true"] {
  color: var(--orange);
}

/* --- 14.4  Riscontro alla pressione --------------------------------------

   Sotto i 100 ms la risposta e' percepita come istantanea e restituisce la
   sensazione di aver causato l'effetto. Queste regole stanno dopo quelle di
   :hover perche', a parita' di specificita', vince l'ultima dichiarata. */

.button:active,
.service:active,
.consent-btn:active,
.panel-close:active,
.project h3 a:active {
  transform: translateY(0) scale(.975);
  transition-duration: .08s;
}

/* -----------------------------------------------------------------------------
   15. PANNELLO LATERALE
   -------------------------------------------------------------------------- */

/* Riusa i token e i bottoni gia' definiti sopra. Il pannello viene creato da
   panel.js: qui c'e' solo il vestito. Con "riduci movimento" la sezione 20
   azzera la transizione e il pannello compare di colpo, che e' il comportamento
   voluto: panel.js non dipende da transitionend. */

html.panel-open {
  overflow: hidden;
}

.panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #14070bcc;
  opacity: 0;
  transition: opacity .35s ease;
}

.panel-backdrop.is-open {
  opacity: 1;
}

.panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 91;
  width: min(780px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 90% 0%, #42182488, transparent 60%), var(--wine);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px #070107aa;
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}

.panel.is-open {
  transform: none;
}

/* L'attributo hidden vale display:none solo finche' nessuna regola dichiara
   un display: .panel usa flex e lo sovrascriverebbe, lasciando il pannello
   nel layout e nell'albero di accessibilita' anche da chiuso. */

.panel[hidden],
.panel-backdrop[hidden] {
  display: none;
}

.panel-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 17px 32px;
  border-bottom: 1px solid var(--line);
}

.panel-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border: 1px solid #a3838a;
  border-radius: 40px;
  background: none;
  color: var(--cream);
  font-size: 14px;
  transition: background .2s, border-color .2s;
}

.panel-close:hover {
  background: #ffffff0e;
  border-color: var(--orange);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* -----------------------------------------------------------------------------
   16. PAGINE DI DETTAGLIO (.doc)
   -------------------------------------------------------------------------- */

/* --- 16.1  Briciole di pane --------------------------------------------------
   Compaiono solo sulle pagine autonome, fuori da data-panel-content: dentro il
   pannello laterale la via d'uscita e' il bottone Chiudi, e un secondo percorso
   confonderebbe invece di orientare. */

.briciole {
  padding-top: 26px;
  font-size: 13px;
  color: var(--muted);
}

.briciole ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.briciole li + li::before {
  content: "\203A";
  margin-right: 10px;
  color: #8d6570;
}

.briciole a {
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

.briciole a:hover {
  color: var(--orange);
  border-bottom-color: currentColor;
}

.briciole [aria-current="page"] {
  color: var(--cream);
}

/* Stesso markup sia come pagina intera sia dentro il pannello: la larghezza e'
   relativa al contenitore, quindi non serve duplicare nulla.
   Per l'elenco dei passaggi si riusa .steps / .number della sezione 8. */

.doc {
  width: min(780px, 100% - 64px);
  margin-inline: auto;
  padding-block: 58px 88px;
}

.doc h1 {
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 550;
  letter-spacing: -.055em;
  line-height: 1.08;
  margin: 0 0 22px;
}

.doc .lead {
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: -.02em;
  color: #e7d4d7;
  margin: 0;
}

.doc h2 {
  font-size: 27px;
  margin: 58px 0 6px;
}

.doc p {
  color: var(--muted);
  line-height: 1.75;
  margin: 18px 0 0;
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}

.doc-list li {
  position: relative;
  border-top: 1px solid var(--line);
  padding: 14px 0 14px 28px;
  color: var(--muted);
  line-height: 1.6;
}

.doc-list li::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--orange);
}

.doc-list strong {
  color: var(--cream);
  font-weight: 500;
}

.doc-cta {
  margin-top: 58px;
  border-top: 1px solid var(--line);
  padding-top: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}

.doc-cta p {
  margin: 0;
  flex: 1 1 260px;
}

/* Le tabelle delle informative non si comprimono sotto una certa larghezza:
   meglio farle scorrere in orizzontale che spezzare le righe illeggibilmente. */

.tabella-scroll {
  overflow-x: auto;
  margin-top: 24px;
}

.doc table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 13px 20px 13px 0;
  border-top: 1px solid var(--line);
  line-height: 1.55;
  color: var(--muted);
}

.doc th {
  color: var(--cream);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .14em;
}

.doc td:first-child {
  color: var(--cream);
}

/* -----------------------------------------------------------------------------
   17. CONSENSO COOKIE
   -------------------------------------------------------------------------- */

/* I tre bottoni sono deliberatamente IDENTICI. Le linee guida del Garante
   chiedono che accettare e rifiutare abbiano lo stesso risalto grafico: un
   "Accetta" pieno e colorato accanto a un "Rifiuta" smorto e' il tipico
   schema scoraggiante da evitare. Qui l'estetica cede alla conformita'. */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}

.consent.is-open {
  opacity: 1;
  transform: none;
}

.consent[hidden] {
  display: none;
}

.consent-box {
  position: relative;
  width: min(1080px, 100%);
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #2b1119;
  box-shadow: 0 20px 60px #070107aa;
}

.consent h2 {
  font-size: 21px;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}

.consent p {
  max-width: 82ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.consent a {
  color: var(--cream);
  border-bottom: 1px solid #a3838a;
}

.consent-x {
  position: absolute;
  top: 11px;
  right: 13px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 27px;
  line-height: 1;
  transition: color .2s, background .2s;
}

.consent-x:hover {
  color: var(--cream);
  background: #ffffff12;
}

.consent-prefs {
  display: grid;
  gap: 13px;
  margin-top: 21px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
}

.consent-prefs[hidden] {
  display: none;
}

.consent-cat {
  display: flex;
  align-items: start;
  gap: 13px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.consent-cat input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--orange);
}

.consent-cat strong {
  color: var(--cream);
  font-weight: 550;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.consent-btn {
  min-height: 46px;
  padding: 13px 28px;
  border: 1px solid var(--orange);
  border-radius: 40px;
  background: var(--orange);
  color: #200e15;
  font-size: 14px;
  font-weight: 550;
  transition: background .2s, transform .18s;
}

.consent-btn:hover {
  background: #ff825a;
  transform: translateY(-2px);
}

.consent-btn[hidden] {
  display: none;
}

/* -----------------------------------------------------------------------------
   18. BREAKPOINT >= 1700px
   -------------------------------------------------------------------------- */

@media (min-width:1700px) {
  .hero {
    min-height: 700px;
  }

  .hero-art {
    height: 590px;
  }
}

/* -----------------------------------------------------------------------------
   19. BREAKPOINT <= 1150px
   -------------------------------------------------------------------------- */

@media (max-width:1150px) {
  .wrap {
    width: calc(100% - 64px);
  }

  .header nav {
    gap: 26px;
  }

  .nav-cta {
    margin-left: 0;
  }

  .hero {
    grid-template-columns: 1.12fr 1fr;
    padding-top: 30px;
    min-height: 590px;
  }

  h1 {
    font-size: 65px;
  }

  .hero-art {
    height: 480px;
  }

  .intro {
    font-size: 23px;
  }

  .actions {
    gap: 10px;
  }

  .button {
    font-size: 13px;
    padding: 14px 18px;
  }

  .benefits li {
    padding: 8px 12px;
    font-size: 12px;
  }

  .card-web {
    width: 155px;
    padding: 14px;
    left: 10%;
  }

  .card-seo {
    width: 130px;
    padding: 13px;
    top: 213px;
  }

  .card-marketing {
    width: 145px;
    padding: 13px;
    right: -4%;
  }

  .card-ai {
    width: 172px;
    padding: 13px;
    right: 0;
    bottom: 30px;
  }

  .mini-label {
    font-size: 12px;
  }

  .services-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .section-copy {
    display: flex;
    gap: 35px;
    justify-content: space-between;
  }

  .section-copy h2 {
    margin: 0;
  }

  .section-copy>p {
    margin: 0;
    max-width: 350px;
  }

  .service {
    min-height: 145px;
  }

  .service span {
    font-size: 15px;
  }

  .method {
    gap: 55px;
  }
}

/* -----------------------------------------------------------------------------
   20. BREAKPOINT <= 760px  (mobile)
   -------------------------------------------------------------------------- */

@media (max-width:760px) {
  .wrap {
    width: calc(100% - 40px);
  }

  .header {
    height: 86px;
  }

  .brand span {
    font-size: 35px;
  }

  .brand img {
    width: 32px;
    height: 37px;
  }

  .brand {
    gap: 12px;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    color: var(--cream);
    background: none;
    border: 0;
    font-size: 14px;
  }

  .menu-toggle span {
    font-size: 20px;
  }

  .header nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 20px;
    right: 20px;
    z-index: 10;
    padding: 24px;
    background: #351822;
    border: 1px solid var(--line);
    border-radius: 15px;
    box-shadow: 0 15px 40px #0005;
  }

  .header nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .nav-cta {
    justify-content: space-between;
  }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: 30px 15px;
    gap: 15px;
  }

  .eyebrow {
    font-size: 10px;
    letter-spacing: .18em;
    gap: 15px;
    margin-bottom: 25px;
  }

  h1 {
    font-size: clamp(48px, 10vw, 72px);
    letter-spacing: -.06em;
  }

  .intro {
    font-size: 21px;
    line-height: 1.5;
  }

  .desktop-break {
    display: none;
  }

  .button {
    font-size: 13px;
    min-height: 49px;
    padding: 14px 18px;
    gap: 15px;
  }

  .benefits {
    margin-top: 29px;
  }

  .benefits li {
    font-size: 11px;
    padding: 5px 11px;
  }

  .hero-art {
    width: min(100%, 490px);
    align-self: center;
    margin: 0;
    height: 410px;
  }

  .card-web {
    top: 12px;
    left: 10%;
    width: 151px;
  }

  .card-seo {
    top: 195px;
    left: 0;
    width: 127px;
  }

  .card-marketing {
    top: 125px;
    right: 0;
  }

  .card-ai {
    bottom: 24px;
    right: 2%;
  }

  .art-caption {
    font-size: 9px;
    bottom: 0;
    left: 5%;
  }

  .services {
    padding-top: 30px;
  }

  .section-meta {
    display: block;
  }

  .section-meta>p:last-child {
    font-size: 11px;
    letter-spacing: .1em;
    margin-bottom: 25px;
  }

  .section-meta .eyebrow {
    margin-bottom: 14px;
  }

  .section-copy {
    display: block;
  }

  .section-copy>p {
    margin-top: 20px;
    font-size: 16px;
  }

  .section-copy h2 {
    font-size: 34px;
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .service:last-child {
    grid-column: 1/-1;
    min-height: 95px;
    display: grid;
    grid-template-columns: 40px 1fr 25px;
    align-items: center;
    gap: 15px;
  }

  .service:last-child svg {
    margin: 0;
  }

  .service:last-child b {
    margin: 0;
    padding: 0;
  }

  .service {
    min-height: 155px;
    padding: 19px;
  }

  .service span {
    font-size: 16px;
  }

  .service-detail {
    align-items: start;
    flex-direction: column;
    gap: 20px;
  }

  .section-end {
    font-size: 9px;
    line-height: 1.8;
  }

  .method {
    grid-template-columns: 1fr;
    gap: 25px;
    padding-block: 65px;
  }

  h2 {
    font-size: 37px;
  }

  .method-intro>p:last-child {
    max-width: none;
  }

  .about-inner {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: 50px;
  }

  .about .eyebrow {
    margin-bottom: 0;
  }

  .contact {
    align-items: start;
    flex-direction: column;
    padding-block: 60px;
    gap: 30px;
  }

  .contact .eyebrow {
    font-size: 9px;
  }

  footer {
    flex-wrap: wrap;
    gap: 20px;
  }

  footer .brand {
    width: 100%;
  }

  footer p {
    margin: 0;
    font-size: 12px;
  }

  .footer-contatti {
    font-size: 12px;
  }
}

/* -----------------------------------------------------------------------------
   21. PANNELLO, DETTAGLIO E PROGETTI SU MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 1150px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .panel {
    width: 100%;
    border-left: 0;
  }

  .panel-bar {
    padding: 13px 20px;
  }

  .doc {
    width: calc(100% - 40px);
    padding-block: 38px 62px;
  }

  .doc h2 {
    font-size: 23px;
    margin-top: 44px;
  }

  .doc .lead {
    font-size: 19px;
  }

  .projects {
    padding-block: 58px 66px;
  }

  .projects-head {
    display: block;
  }

  .projects-head h2 {
    margin-bottom: 18px;
  }

  .project-grid,
  .doc .project-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .results {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .consent {
    padding: 10px;
  }

  .consent-box {
    padding: 22px 20px;
  }

  .consent h2 {
    font-size: 19px;
    padding-right: 34px;
  }

  .consent-actions {
    display: grid;
    gap: 10px;
  }

  .campo-doppio {
    grid-template-columns: 1fr;
  }

  .form,
  .contact-intro {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }

  .faq {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-block: 10px 66px;
  }

  .faq-intro > p:last-child {
    max-width: none;
  }

  .domanda summary {
    font-size: 17px;
    padding: 19px 0;
  }

  .briciole {
    padding-top: 18px;
    font-size: 12px;
  }
}

/* -----------------------------------------------------------------------------
   22. RIDUZIONE DEL MOVIMENTO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none!important;
    transition: none!important;
  }
}

/* -----------------------------------------------------------------------------
   23. ASSISTENTE (CHAT)
   -------------------------------------------------------------------------- */

/* Aggiunta in coda di proposito: le sezioni precedenti dipendono dal loro
   ordine e spostarle romperebbe la cascata. Qui in fondo non tocca niente.
   I colori sono i token gia' definiti in cima al foglio; il pannello riprende
   il fondo e il bordo del riquadro dei consensi, per non introdurre una terza
   personalita' grafica in un sito che ne ha gia' due. */

/* --- 23.1  Il pulsante che apre ------------------------------------------ */

.chat-avvio {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 94;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 20px 12px 17px;
  border-radius: 40px;
  border: 0;
  font-size: 14px;
  font-weight: 550;
  color: #200e15;
  background: var(--orange);
  box-shadow: 0 6px 26px #ff653b38;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.chat-avvio:hover {
  transform: translateY(-3px);
  background: #ff825a;
  box-shadow: 0 8px 30px #ff653b48;
}
.chat-avvio:active {
  transform: translateY(0) scale(.975);
  transition-duration: .08s;
}
.chat-avvio svg {
  width: 21px;
  height: 21px;
}

/* Mentre il banner dei consensi e' aperto il pulsante sparisce. Il banner
   occupa tutta la larghezza in basso e la sua altezza cambia col testo:
   invece di rincorrerla con un calcolo che sbaglierebbe a ogni modifica, si
   toglie di mezzo il pulsante. Chi visita il sito ha comunque una decisione
   sola da prendere prima, e la prende in un clic. */
:root[data-consenso-aperto] .chat-avvio {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- 23.2  Il pannello ---------------------------------------------------- */

.chat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 96;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 36px));
  height: min(620px, calc(100vh - 36px));
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #2b1119;
  box-shadow: 0 20px 60px #070107aa;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .24s ease, transform .24s ease;
}
.chat.is-open {
  opacity: 1;
  transform: none;
}

/* L'attributo hidden vale display:none solo finche' nessuna regola dichiara
   un display diverso: questa lo rimette al suo posto. Stessa avvertenza gia'
   scritta per il pannello laterale. */
.chat[hidden] {
  display: none;
}

.chat__testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 13px 18px;
  border-bottom: 1px solid var(--line);
}
.chat__titolo {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.chat__stato {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
}
.chat__chiudi {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: none;
  font-size: 19px;
  line-height: 1;
  color: var(--muted);
  transition: background .2s, color .2s;
}
.chat__chiudi:hover {
  background: #ffffff10;
  color: var(--cream);
}

/* --- 23.3  Il corpo dei messaggi ------------------------------------------ */

.chat__corpo {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 6px;
  scrollbar-width: thin;
  scrollbar-color: #5a3540 transparent;
}
.chat__corpo:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -3px;
}

.chat__msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
}
.chat__msg--bot {
  align-self: flex-start;
  background: #ffffff0d;
  border-bottom-left-radius: 5px;
}
.chat__msg--io {
  align-self: flex-end;
  color: #200e15;
  background: var(--orange);
  border-bottom-right-radius: 5px;
}

/* I tre pallini. Sotto "riduci movimento" la sezione 22 spegne l'animazione
   con !important: restano fermi, ma visibili, perche' l'opacita' di partenza
   non e' zero. */
.chat__scrive {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #ffffff0d;
}
.chat__scrive span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: .6;
  animation: chat-pallini 1.2s infinite ease-in-out;
}
.chat__scrive span:nth-child(2) { animation-delay: .18s; }
.chat__scrive span:nth-child(3) { animation-delay: .36s; }

@keyframes chat-pallini {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* --- 23.4  Le opzioni da cliccare ----------------------------------------- */

.chat__opzioni {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 2px 0 4px;
}
.chat__opz {
  padding: 9px 15px;
  border: 1px solid #a3838a;
  border-radius: 40px;
  background: none;
  font-size: 13.5px;
  text-align: left;
  color: var(--cream);
  transition: border-color .2s, background .2s, transform .12s;
}
.chat__opz:hover {
  border-color: var(--orange);
  background: #ffffff0d;
}
.chat__opz:active {
  transform: scale(.97);
}

/* --- 23.5  La scheda del progetto ----------------------------------------- */

.chat__scheda {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff08;
}
.chat__scheda-testa {
  display: block;
  margin-bottom: 11px;
  font-size: 14px;
}
.chat__scheda-griglia {
  display: grid;
  gap: 9px;
}
.chat__scheda-voce {
  display: grid;
  gap: 1px;
}
.chat__scheda-voce span {
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.chat__scheda-voce b {
  font-size: 14.5px;
  font-weight: 550;
}
.chat__scheda-servizi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.chat__scheda-link {
  font-size: 13.5px;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chat__scheda-nota {
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* --- 23.6  Il modulo dentro la chat --------------------------------------- */

.chat__modulo {
  display: grid;
  gap: 11px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff08;
  transition: opacity .2s;
}
.chat__modulo.is-inviato {
  opacity: .5;
}
.chat__modulo-testa b {
  display: block;
  font-size: 14.5px;
}
.chat__modulo-testa span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.chat__campo {
  display: grid;
  gap: 5px;
  font-size: 12.5px;
  color: var(--muted);
}
.chat__campo i {
  font-style: normal;
  color: var(--orange);
}
.chat__campo input,
.chat__campo select,
.chat__campo textarea {
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  color: var(--cream);
  background: #ffffff0a;
  border: 1px solid #a3838a;
  border-radius: 9px;
  transition: border-color .2s, background .2s;
}
.chat__campo select option {
  color: #200e15;
}
.chat__campo input:focus,
.chat__campo select:focus,
.chat__campo textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: #ffffff14;
}
.chat__consenso {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.chat__consenso input {
  flex: none;
  margin-top: 2px;
  accent-color: var(--orange);
}
.chat__consenso a {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat__invia {
  min-height: 44px;
  border-radius: 40px;
  border: 0;
  font-size: 14px;
  font-weight: 550;
  color: #200e15;
  background: var(--orange);
  transition: background .2s;
}
.chat__invia:hover {
  background: #ff825a;
}
.chat__invia:disabled {
  opacity: .6;
}

/* --- 23.7  Recapiti e conferma -------------------------------------------- */

.chat__persona,
.chat__fatto {
  display: grid;
  gap: 8px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff08;
  font-size: 14px;
}
.chat__persona-b {
  padding: 10px 14px;
  border: 1px solid #a3838a;
  border-radius: 40px;
  font-size: 13.5px;
  text-align: center;
  color: var(--cream);
  transition: border-color .2s, background .2s;
}
.chat__persona-b:hover {
  border-color: var(--orange);
  background: #ffffff0d;
}
.chat__persona-b--fioco {
  color: var(--muted);
}
.chat__fatto {
  border-color: #3f7d5a;
  background: #143a271f;
}
.chat__fatto span {
  font-size: 13px;
  color: var(--muted);
}
.chat__fatto code {
  padding: 1px 6px;
  border-radius: 5px;
  background: #ffffff14;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--cream);
}

/* --- 23.8  Il campo di scrittura ------------------------------------------ */

.chat__scrivi {
  display: flex;
  gap: 8px;
  padding: 12px 16px 0;
}
.chat__input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14.5px;
  padding: 11px 15px;
  color: var(--cream);
  background: #ffffff0a;
  border: 1px solid #a3838a;
  border-radius: 40px;
  transition: border-color .2s, background .2s;
}
.chat__input::placeholder {
  color: var(--muted);
}
.chat__input:focus {
  outline: none;
  border-color: var(--orange);
  background: #ffffff14;
}
.chat__manda {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #200e15;
  background: var(--orange);
  transition: background .2s, transform .12s;
}
.chat__manda:hover {
  background: #ff825a;
}
.chat__manda:active {
  transform: scale(.94);
}

.chat__nota {
  padding: 9px 16px 13px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* --- 23.9  Telefono ------------------------------------------------------- */

@media (max-width: 760px) {
  /* A schermo stretto un riquadro da 400px lascia margini inutili e la
     tastiera software si mangia meta' della conversazione: meglio tutto
     schermo. Le tacche e la barra di sistema si rispettano con env(). */
  .chat {
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .chat-avvio {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .chat__msg {
    max-width: 90%;
  }
}

/* Con il pannello aperto a tutto schermo la pagina sotto non deve scorrere:
   altrimenti si scorre quella invece della conversazione. Sopra i 761px il
   pannello e' un riquadro e la pagina resta libera. */
@media (max-width: 760px) {
  .chat-aperta,
  .chat-aperta body {
    overflow: hidden;
  }
}

/* -----------------------------------------------------------------------------
   24. FINESTRA DEL MODULO DI CONTATTO
   -------------------------------------------------------------------------- */

/* Il modulo sta nel markup come blocco normale e funziona senza JavaScript.
   Qui viene nascosto, perche' con JavaScript lo si apre a richiesta; il blocco
   <noscript> nella pagina annulla questa riga per chi JavaScript non ce l'ha,
   e il modulo torna a farsi vedere in fondo alla pagina. */

.modale {
  display: none;
}

/* --- 24.1  Da blocco a finestra, quando JavaScript c'e' ------------------ */

/* La classe la mette modale.js: senza, nessuna di queste regole si applica. */

.modale.is-modale {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 97;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .24s ease;
}

.modale.is-modale.is-open {
  opacity: 1;
}

/* Come per il pannello e per l'assistente: hidden vale display:none solo
   finche' nessuna regola dichiara un display diverso. */
.modale.is-modale[hidden] {
  display: none;
}

.modale-fondo {
  position: absolute;
  inset: 0;
  background: #0d0409cc;
  backdrop-filter: blur(3px);
}

.modale-riquadro {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #2b1119;
  box-shadow: 0 30px 80px #07010799;
  transform: translateY(14px);
  transition: transform .24s ease;
  scrollbar-width: thin;
  scrollbar-color: #5a3540 transparent;
}

.modale.is-open .modale-riquadro {
  transform: none;
}

.modale-chiudi {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  transition: background .2s, color .2s;
}

.modale-chiudi:hover {
  background: #ffffff10;
  color: var(--cream);
}

.modale-testa {
  margin-bottom: 26px;
  padding-right: 40px;      /* non finire sotto al pulsante di chiusura */
}

.modale-testa h2 {
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.modale-testa p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Nella sezione 11 il modulo era una delle due colonne e aveva una base
   flessibile: qui dentro occupa tutto il riquadro. */
.modale .form {
  flex: none;
  max-width: none;
  width: 100%;
}

/* L'assistente sta piu' in basso di questa finestra e resta inerte mentre e'
   aperta: lasciarne il pulsante acceso sotto al velo darebbe solo fastidio. */
:root.modale-aperta .chat-avvio {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- 24.2  Telefono ------------------------------------------------------- */

@media (max-width: 760px) {
  /* A schermo stretto il riquadro centrato lascia margini inutili e la
     tastiera software copre meta' del modulo: meglio tutto schermo. */
  .modale.is-modale {
    padding: 0;
  }

  .modale-riquadro {
    width: 100%;
    max-height: none;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    padding-top: calc(28px + env(safe-area-inset-top, 0px));
  }

  .modale-testa h2 {
    font-size: 23px;
  }
}

/* Con la finestra aperta la pagina sotto non deve scorrere: altrimenti si
   scorre quella invece del modulo. */
.modale-aperta,
.modale-aperta body {
  overflow: hidden;
}