/* ── AUTOMAZIONI — stili condivisi da /automazioni.html e /automazioni/*.html ──
   Gli elementi sono visibili di default: le animazioni (gsap.from) partono dagli
   script di pagina, così se GSAP non carica il contenuto resta leggibile. */

.au-lead {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.25rem);
  color: var(--t2); line-height: 1.6; max-width: 32em;
  margin-bottom: 3.5rem;
}
.au-lead strong { color: var(--text); font-weight: 500; }
.au-sub.flush { margin-bottom: 0; }
/* link nel testo in ciano; i pulsanti dentro le card tengono il loro colore (prima il testo spariva sul fondo ciano) */
.au-lead a, .au-card a:not(.au-btn), .au-faq p a, .au-note a { color: var(--accent); }

.au-kicker {
  display: flex; align-items: center; gap: .65rem;
  font-size: var(--fs-meta); font-weight: 500; color: var(--accent); margin-bottom: .9rem;
}
.au-kicker::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.au-kicker.violet { color: #a77bff; }
/* .au-h2 è in style.css (lo usa anche la home) */
.au-sub { font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.75; max-width: 31em; margin-bottom: 2.4rem; }   /* circa 75 battute per riga */
.au-block { margin-bottom: 5rem; }
.au-block:last-child { margin-bottom: 0; }

/* Card */
.au-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; }
.au-grid.three { grid-template-columns: repeat(3,1fr); }
@media (max-width: 900px) { .au-grid.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .au-grid, .au-grid.three { grid-template-columns: 1fr; } }
.au-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  padding: 1.9rem 1.8rem;
}
.au-icon {
  display: block; width: 44px; height: 44px; padding: 10px; margin-bottom: 1rem;
  border-radius: 10px; background: rgba(var(--accent-rgb),.10); color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.au-card h3 {
  font-family: var(--fd); font-size: var(--fs-title-card); font-weight: 700;
  line-height: 1.3; margin-bottom: .7rem;
}
.au-card p { font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.7; }
.au-card p + p { margin-top: .6rem; }

/* Problema → automazione → risultato */
.au-steps { list-style: none; margin: 1rem 0 0; padding: 0; }
.au-steps li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem;
  padding: .65rem 0; border-top: 1px solid var(--line);
  font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.6;
}
.au-steps li span {
  font-size: var(--fs-tag); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t3); padding-top: .15rem;
}
.au-steps li:last-child span { color: var(--accent); }
.au-steps li:last-child { color: var(--text); }
/* etichetta sopra e testo a tutta larghezza dove la card è stretta: griglie a tre colonne,
   e sotto i 1100px anche le altre (con l'etichetta di fianco al testo restavano 2-3 parole per riga) */
.au-grid.three .au-steps li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
.au-grid.three .au-steps li span { padding-top: 0; }
@media (max-width: 1100px) {
  .au-steps li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .au-steps li span { padding-top: 0; }
}

/* Card-link verso gli strumenti */
a.au-link-card {
  display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.07), rgba(123,47,255,.04)), var(--surface-1);
  border: 1px solid rgba(var(--accent-rgb),.16);
  padding: 1.9rem 1.8rem; position: relative;
  transition: transform .3s, border-color .3s, background .3s;
}
a.au-link-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb),.4); background: linear-gradient(135deg, rgba(var(--accent-rgb),.1), rgba(123,47,255,.06)), var(--surface-2); }
a.au-link-card h3 { font-family: var(--fd); font-size: var(--fs-title-card); font-weight: 700; }
a.au-link-card p { font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.65; flex: 1; }
.au-arrow {
  font-size: var(--fs-button); font-weight: 600;
  color: var(--accent);
}

/* Tag */
.au-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.au-tag {
  font-size: var(--fs-meta); letter-spacing: 0; color: var(--t3);
  border: 1px solid var(--line-hi); padding: .25rem .6rem;
}

/* Processo numerato */
.au-process { list-style: none; padding: 0; margin: 0; counter-reset: au; max-width: 760px; }
.au-process li {
  counter-increment: au; position: relative;
  padding: 0 0 2rem 3.6rem; border-left: 1px solid rgba(var(--accent-rgb),.18); margin-left: 1.1rem;
}
.au-process li:last-child { border-left-color: transparent; padding-bottom: 0; }
.au-process li::before {
  content: counter(au, decimal-leading-zero);
  position: absolute; left: -1.15rem; top: -.2rem;
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
  background: var(--surface-1); border: 1px solid rgba(var(--accent-rgb),.4);
  font-size: var(--fs-label); font-weight: 600; color: var(--accent);
}
.au-process h3 { font-family: var(--fd); font-size: var(--fs-title-card); font-weight: 700; margin-bottom: .4rem; }
.au-process p { font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.7; max-width: 68ch; }

/* Lista "incluso" */
.au-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 2rem; }
@media (max-width: 680px) { .au-checks { grid-template-columns: 1fr; } }
.au-checks li {
  position: relative; padding: .6rem 0 .6rem 1.6rem;
  border-bottom: 1px solid var(--line); font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.6;
}
.au-checks li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }

.au-note {
  border-left: 2px solid var(--purple); background: rgba(123,47,255,.06);
  padding: 1.1rem 1.3rem; font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.7; max-width: 34em;
}

/* Bottoni: stile in style.css (sezione PULSANTI) */
.au-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.au-input::placeholder { color: rgba(255,255,255,.6); }   /* ≥4.5:1, come nel modulo contatti */


/* CTA finale */
.au-cta {
  position: relative; z-index: 10; background: var(--page-bg);
  border-top: 1px solid rgba(var(--accent-rgb),.14);
  padding: 4.5rem clamp(1.25rem,5vw,4rem); text-align: center;
}
.au-cta-inner { max-width: 620px; margin: 0 auto; }
.au-cta h2 { font-family: var(--fd); font-size: clamp(1.4rem,2.6vw,2rem); font-weight: 700; margin-bottom: 1rem; }
.au-cta p { font-size: var(--fs-body-sm); color: var(--t2); line-height: 1.7; margin-bottom: 1.6rem; }
.au-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ── CALCOLATORE ── */
.calc { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
.calc-panel { background: var(--surface-1); border: 1px solid var(--line); padding: 1.8rem; }
.calc-panel h2 { font-family: var(--fd); font-size: 1.25rem; font-weight: 700; margin-bottom: .4rem; }
.calc-hint { font-size: var(--fs-meta); color: var(--t3); line-height: 1.6; margin-bottom: 1.4rem; }
.calc-head, .calc-row { display: grid; grid-template-columns: minmax(0,1fr) 5.2rem 5.2rem 2.2rem; gap: .5rem; align-items: center; }
.calc-head { font-size: var(--fs-meta); color: var(--t3); margin-bottom: .5rem; }
.calc-row { margin-bottom: .5rem; }
/* etichetta dei campi numerici: nascosta su desktop (c'è .calc-head), visibile su mobile */
.calc-field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) {
  .calc-head { display: none; }
  .calc-row { grid-template-columns: 1fr 1fr 2.4rem; align-items: end; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .calc-row .au-input[data-f="nome"] { grid-column: 1 / -1; }
  .calc-field span {
    position: static; width: auto; height: auto; clip: auto; display: block;
    font-size: var(--fs-tag); color: var(--t3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem;
  }
}
.au-input {
  width: 100%; background: rgba(0,0,0,.25); color: var(--text);
  border: 1px solid var(--line-hi); padding: .65rem .7rem;
  font: 400 1rem var(--fb); border-radius: 0;
}
.au-input:focus { border-color: var(--accent); outline: none; }
.au-input[type="number"] { -moz-appearance: textfield; text-align: right; }
.au-input::-webkit-outer-spin-button, .au-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-del {
  width: 2.2rem; height: 2.4rem; background: none; border: 1px solid var(--line);
  color: var(--t3); cursor: pointer; font-size: 1rem;
}
.calc-del:hover { color: #ff6b8a; border-color: rgba(255,107,138,.4); }
.calc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.8rem; }
.calc-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.6rem; }
.calc-preset {
  font: 400 var(--fs-meta) var(--fb); color: var(--t2); background: none;
  border: 1px dashed var(--line-hi); padding: .4rem .7rem; cursor: pointer;
}
.calc-preset:hover { color: var(--accent); border-color: var(--accent); }
.calc-params { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }
@media (max-width: 600px) { .calc-params { grid-template-columns: 1fr; } }
.calc-params label { display: block; font-size: var(--fs-meta); color: var(--t3); letter-spacing: 0; margin-bottom: .4rem; line-height: 1.4; }
.calc-out { position: sticky; top: calc(var(--nav-h) + 1.5rem); border-color: rgba(var(--accent-rgb),.22); background: rgba(var(--accent-rgb),.035); }
.calc-big { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.calc-big:last-of-type { border-bottom: none; }
.calc-big span { display: block; font-size: var(--fs-meta); color: var(--t3); margin-bottom: .35rem; }
.calc-big strong { font-family: var(--fd); font-size: clamp(1.7rem,3.2vw,2.4rem); font-weight: 700; line-height: 1.1; }
.calc-big.hi strong { color: var(--accent); }
.calc-big small { display: block; font-size: var(--fs-meta); color: var(--t2); margin-top: .3rem; }
.calc-out .au-btn { width: 100%; margin-top: 1.2rem; }
.calc-disclaimer { font-size: var(--fs-meta); color: var(--t3); line-height: 1.6; margin-top: 1rem; }

/* ── WORKFLOW ── */
.wf-card { display: flex; flex-direction: column; }
.wf-meta { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.wf-meta li { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--line); font-size: var(--fs-meta); color: var(--t2); line-height: 1.55; }
.wf-meta li span { font-size: var(--fs-meta); color: var(--t3); padding-top: .15rem; }
.wf-card .au-btn { margin-top: auto; align-self: flex-start; }