/* ===== Extro Srl – effetti dinamici ===== */

/* Ingresso pagina */
body { animation: entra-pagina .5s ease both; }
@keyframes entra-pagina { from { opacity: 0; } to { opacity: 1; } }

/* Header: trasparente sopra la parte scura, si nasconde scendendo */
.header { transition: background .3s, border-color .3s, box-shadow .2s, transform .35s ease; }
.header.scorrimento { box-shadow: none; }
.header.nascosto { transform: translateY(-100%); box-shadow: none; }
.header--top { background: transparent; border-color: transparent; backdrop-filter: none; }

.header--top .menu-toggle span,
.header--top .menu-toggle span::before,
.header--top .menu-toggle span::after { background: var(--bianco); }
@media (min-width: 821px) { .header--top .menu a { color: var(--bianco); } }

/* Barra di avanzamento tricolore */

/* Parallax degli sfondi scuri */
.slide--scura, .pagina-testa { background-position: center calc(50% + var(--parallax, 0px)); }

/* Hero: formula scritta a macchina + titolo che sale */
.formula__testo::after {
  content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 3px;
  background: currentColor; vertical-align: -.12em; animation: cursore 1s steps(1) infinite;
}
.formula.finita .formula__testo::after { animation: cursore 1s steps(1) 3; opacity: 0; }
@keyframes cursore { 50% { opacity: 0; } }
.hero sub { opacity: 0; transition: opacity .6s; }
.hero .formula.finita sub { opacity: 1; }
.hero h1 .titolo-riga { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .titolo-riga > span { display: block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.hero h1 .titolo-riga:nth-child(2) > span { transition-delay: .15s; }
.hero h1.entrato .titolo-riga > span { transform: none; }

/* Indicatore "scorri" */
.scorri {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #bdbdbd;
  transition: opacity .3s;
}
.scorri i { width: 1px; height: 44px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.scorri i::after {
  content: ""; position: absolute; left: 0; top: -50%; width: 100%; height: 50%;
  background: var(--bianco); animation: scorri 1.8s ease-in-out infinite;
}
@keyframes scorri { to { top: 100%; } }

/* Comparsa a cascata degli elementi in griglia */

/* Hover: schede che si sollevano */
.materiale, .lavoro {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .3s, opacity .6s;
}
.lavoro:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.materiale:hover { box-shadow: 0 18px 40px rgba(0,0,0,.07); }

.lavoro { overflow: hidden; }
.lavoro img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.lavoro:hover img { transform: scale(1.05); }

.icona { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s; }
.fasi li:hover .icona, .contatto-voce:hover .icona { transform: rotate(-8deg) scale(1.08); background: var(--giallo); color: var(--nero); }
.tag li, .settori li { transition: background .25s, border-color .25s, color .25s; }

/* Bottoni */
.bottone { position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.bottone::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transition: transform .6s;
}
.bottone:hover { box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.bottone:hover::before { transform: translateX(110%); }

/* Torna su */
.torna-su {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--nero); color: var(--bianco); display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s, background .3s;
}
.torna-su.visibile { opacity: 1; visibility: visible; transform: none; }
.torna-su:hover { background: var(--giallo); color: var(--nero); }
.torna-su svg { width: 20px; height: 20px; }

/* Movimento ridotto: niente animazioni */
@media (prefers-reduced-motion: reduce) {
  body, .hero h1 .titolo-riga > span, .hero sub { animation: none; transition: none; opacity: 1; transform: none; }
  .scorri i::after, .formula__testo::after { animation: none; }
  .lavoro:hover { transform: none; }
}

/* Hero: nome azienda sotto la formula */
.hero .hero__azienda {
  font-family: var(--font-titoli); font-weight: 700; font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: .35em; color: var(--bianco); margin: 4px 0 18px;
  opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s;
}
.hero .formula.finita + .hero__azienda { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero .hero__azienda { opacity: 1; transform: none; transition: none; } }

/* Logo testuale nell'header */
.header__logo.logo-testo { transition: color .3s, transform .3s; }
.header__logo.logo-testo:hover { transform: translateY(-1px); }

/* Hero come il biglietto: formula nera su fascia gialla + sottotitolo */
.hero .formula { display: inline-block; background: var(--giallo); color: var(--nero); padding: 4px 14px; border-radius: 2px; }
.hero .hero__sotto {
  font-size: clamp(14px, 1.4vw, 18px); font-weight: 600; color: var(--giallo); margin: -12px 0 22px;
  opacity: 0; transform: translateY(8px); transition: opacity .6s .15s, transform .6s .15s;
}
.hero .formula.finita ~ .hero__sotto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hero .hero__sotto { opacity: 1; transform: none; transition: none; } }

/* ===== Materiali a fisarmonica (home) ===== */
.fisa { display: flex; gap: 14px; height: 520px; align-items: center; margin-top: 36px; }
.fisa__voce {
  position: relative; flex: 0 0 92px; height: 100%; min-width: 0;
  border-radius: 18px; overflow: hidden;
  background-color: var(--nero); background-position: center; background-size: cover;
  transition: flex .75s cubic-bezier(.65,0,.25,1), height .75s cubic-bezier(.65,0,.25,1), box-shadow .4s;
}
.fisa__voce[data-dist="1"] { height: 90%; }
.fisa__voce[data-dist="2"] { height: 80%; }
.fisa__voce[data-dist="3"] { height: 72%; }
.fisa__voce.aperto { flex: 1 1 0; height: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.12); }

/* Linguetta (voce chiusa) */
.fisa__linguetta {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; padding: 22px 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%);
  color: var(--bianco); display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  font: inherit; transition: opacity .35s, background .3s;
}
.fisa__linguetta:hover { background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.15) 60%); }
.fisa__linguetta:focus-visible { outline: 3px solid var(--giallo); outline-offset: -3px; }
.fisa__verticale {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-titoli); font-weight: 800; font-size: 20px; letter-spacing: .08em; white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.fisa__num {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--nero); font-family: var(--font-titoli); font-weight: 800; font-size: 15px;
  transition: background .3s, transform .3s;
}
.fisa__linguetta:hover .fisa__num { background: var(--giallo); transform: scale(1.08); }
.fisa__voce.aperto .fisa__linguetta { opacity: 0; pointer-events: none; }

/* Contenuto (voce aperta) */
.fisa__contenuto {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(220px, 42%) minmax(340px, 1fr);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.fisa__voce.aperto .fisa__contenuto { opacity: 1; visibility: visible; transition: opacity .5s .35s, visibility 0s .35s; }
.fisa__visual {
  position: relative; background-position: center; background-size: cover; color: var(--bianco);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 32px;
}
.fisa__visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent 60%); }
.fisa__visual > * { position: relative; }
.fisa__visual h3 { font-size: clamp(30px, 3vw, 42px); font-weight: 800; margin: 4px 0 2px; }
.fisa__sistema { font-family: var(--font-titoli); font-weight: 700; font-size: 18px; color: var(--giallo-chiaro); }
.fisa__testo { padding: 30px 34px; overflow-y: auto; background: var(--chiaro); }
.fisa__testo .card__titoletto { margin-top: 18px; }
.fisa__testo .card__titoletto:first-child { margin-top: 0; }
.fisa__stampi { font-weight: 600; }
.fisa__testo .badge-v0 { margin-top: 8px; }
.fisa__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  font-family: var(--font-titoli); font-weight: 700; font-size: 14px;
  border-bottom: 2px solid var(--giallo); padding-bottom: 2px;
}
.fisa__link span { transition: transform .3s; }
.fisa__link:hover span { transform: translateX(5px); }

/* Elementi che entrano quando la voce si apre */
.fisa__voce .fisa__visual > *, .fisa__voce .fisa__testo > * { opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; }
.fisa__voce.aperto .fisa__visual > *, .fisa__voce.aperto .fisa__testo > * { opacity: 1; transform: none; }
.fisa__voce.aperto .fisa__visual > :nth-child(1) { transition-delay: .45s; }
.fisa__voce.aperto .fisa__visual > :nth-child(2) { transition-delay: .52s; }
.fisa__voce.aperto .fisa__visual > :nth-child(3) { transition-delay: .59s; }
.fisa__voce.aperto .fisa__testo > * { transition-delay: .55s; }
.fisa__voce.aperto .fisa__testo > :nth-child(n+3) { transition-delay: .62s; }
.fisa__voce.aperto .fisa__testo > :nth-child(n+5) { transition-delay: .69s; }
.fisa__voce.aperto .fisa__testo > :nth-child(n+7) { transition-delay: .76s; }

/* Tablet e telefono: fisarmonica verticale */
@media (max-width: 900px) {
  .fisa { flex-direction: column; height: auto; gap: 10px; align-items: stretch; }
  .fisa__voce, .fisa__voce[data-dist] { flex: none; height: 76px; width: 100%; }
  .fisa__voce.aperto { height: auto; }
  .fisa__linguetta { flex-direction: row; padding: 0 16px 0 22px; background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.1)); }
  .fisa__verticale { writing-mode: horizontal-tb; transform: none; font-size: 19px; }
  .fisa__voce.aperto .fisa__linguetta { display: none; }
  .fisa__contenuto { position: static; grid-template-columns: 1fr; display: none; }
  .fisa__voce.aperto .fisa__contenuto { display: grid; }
  .fisa__visual { min-height: 190px; padding: 24px; }
  .fisa__testo { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .fisa__voce, .fisa__contenuto, .fisa__voce .fisa__visual > *, .fisa__voce .fisa__testo > * { transition: none !important; }
}

/* Intestazione centrata (sezione materiali in home) */
.intestazione-centrata { text-align: center; }
.intestazione-centrata h2 { margin-bottom: 0; }
.intestazione-centrata .bottone { margin-top: 24px; }
.intestazione-centrata .bottone span { display: inline-block; transition: transform .3s; }
.intestazione-centrata .bottone:hover span { transform: translateX(4px); }

/* ===== Hero: formula di struttura disegnata ===== */
.hero__griglia {
  position: relative; width: 100%; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center;
}
.hero__griglia .slide__inner { margin: 0; }
.mol { margin: 0; }
.mol svg { width: 100%; height: auto; display: block; overflow: visible; }
.mol__legame {
  stroke: #ececec; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
  transition: stroke-dashoffset .6s ease calc(var(--i) * 70ms + .2s);
}
.mol__atomo {
  font-family: var(--font-titoli); font-weight: 700; font-size: 30px;
  text-anchor: middle; dominant-baseline: central;
  opacity: 0; transition: opacity .5s ease calc(var(--i) * 90ms);
}
.mol__atomo--etero { fill: var(--giallo-chiaro); }
.mol__atomo--c { fill: var(--bianco); }
.mol__atomo--r { fill: #cfcfcf; font-style: italic; font-weight: 600; }
.mol__atomo--h { fill: #bdbdbd; font-size: 22px; font-weight: 600; }
.mol__gruppo {
  fill: rgba(242,183,5,.06); stroke: rgba(242,183,5,.55); stroke-width: 1.5; stroke-dasharray: 6 6;
  opacity: 0; transition: opacity .8s ease 1.4s;
}
.mol__nota {
  fill: #a8a8a8; font-family: var(--font-testo); font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  text-anchor: middle; opacity: 0; transition: opacity .8s ease 1.6s;
}
.mol.disegna .mol__legame { stroke-dashoffset: 0; }
.mol.disegna .mol__atomo, .mol.disegna .mol__gruppo, .mol.disegna .mol__nota { opacity: 1; }
.mol.disegna svg { animation: fluttua 7s ease-in-out 2.5s infinite; }
@keyframes fluttua { 50% { transform: translateY(-8px); } }

@media (max-width: 900px) {
  .hero__griglia { grid-template-columns: 1fr; gap: 28px; }
  .mol { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .mol__legame { stroke-dashoffset: 0; transition: none; }
  .mol__atomo, .mol__gruppo, .mol__nota { opacity: 1; transition: none; }
  .mol.disegna svg { animation: none; }
}
.hero__griglia .hero h1, .hero .hero__griglia h1 { font-size: clamp(44px, 5.6vw, 84px); }

/* =========================================================
   Respiro e responsive (spaziature più ampie, controlli per ogni larghezza)
   ========================================================= */
:root { --gutter: clamp(20px, 6vw, 96px); --respiro: clamp(80px, 10vw, 140px); }

.slide { padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) var(--gutter) var(--respiro); }
.hero { padding-bottom: clamp(110px, 12vw, 150px); }
.sezione { padding: var(--respiro) var(--gutter); }
.pagina-testa { padding: calc(var(--header-h) + clamp(64px, 9vw, 120px)) var(--gutter) clamp(64px, 8vw, 104px); }
.footer-grande { padding: var(--respiro) var(--gutter) 6px; }
.header { padding: 0 var(--gutter); }

h2 { margin-bottom: clamp(18px, 2vw, 26px); }
.testo-grigio, .pagina-testa p { max-width: 62ch; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* Distanze tra titolo e contenuto */
.fasi, .fisa { margin-top: clamp(40px, 5vw, 64px); }

.chi-siamo { gap: clamp(48px, 7vw, 112px); }
.due-col { gap: clamp(48px, 7vw, 104px); }

.fasi li { padding: 34px 0; }
.materiale + .materiale { margin-top: 32px; }
.portfolio, .lavori { gap: clamp(20px, 2.5vw, 32px); }
.intestazione-centrata .bottone { margin-top: 32px; }

/* Footer: colonne che non escono dallo schermo */
.contatti { gap: clamp(40px, 6vw, 96px); }
.contatti__dati { gap: 32px clamp(32px, 4vw, 56px); margin-top: 44px; }
@media (max-width: 1180px) {
  .contatti { grid-template-columns: 1fr; }
  .logo-testo--grande { justify-self: start; }
}

/* Tablet */
@media (max-width: 1024px) {
  
  
  
  
  .materiale { grid-template-columns: 1fr; }
  .materiale__img { min-height: 200px; }
}
@media (max-width: 820px) {
  .slide { padding-top: calc(var(--header-h) + 48px); }
  .hero { min-height: 100svh; }
  
  .lavoro img { height: 380px; }
}

/* Telefono */
@media (max-width: 600px) {
  :root { --respiro: 76px; }
  h2 { font-size: clamp(28px, 7.5vw, 34px); }
  
  
  
  
  .materiale__corpo { grid-template-columns: 1fr; gap: 24px; }
  
  .contatti__dati { grid-template-columns: 1fr 1fr; }
  .contatti__dati dd { white-space: normal; font-size: 16px; }
  .logo-testo--grande { padding: 0 20px 16px; }
  .logo-testo--grande .logo-testo__formula { margin: 0 -20px 12px; padding: 7px 20px; font-size: 13px; }
  .logo-testo--grande .logo-testo__nome { font-size: 30px; }
  .footer__base { flex-direction: column; align-items: flex-start; }
  .fasi li { padding: 26px 0; }
  .modulo { padding: 24px 20px; }
  .mappa { height: 300px; }

  /* Tabella confronto: diventa una scheda per materiale */
  
  
  
  
  
  
  
  
  
  
  
}
@media (max-width: 380px) {
  .contatti__dati { grid-template-columns: 1fr; }
  .logo-testo__formula { font-size: 9px; }
  .logo-testo__nome { font-size: 16px; }
}
@media (max-width: 1180px) { .contatti { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .contatti__dati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contatti__dati > div:last-child { grid-column: 1 / -1; }
  .contatti__dati dd a { overflow-wrap: anywhere; }
}
@media (max-width: 380px) { .contatti__dati { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) { .hero .hero__griglia h1 { font-size: clamp(46px, 10vw, 84px); } }

/* =========================================================
   1. Cosa facciamo: linea del tempo che si riempie scorrendo
   ========================================================= */
.linea-tempo { position: relative; margin-top: clamp(48px, 6vw, 80px); --punto: 60px; }
.linea-tempo__binario {
  position: absolute; left: 10%; right: 10%; top: calc(var(--punto) / 2 - 2px); height: 4px;
  background: #dcdcd4; border-radius: 4px; overflow: hidden;
}
.linea-tempo__riempimento {
  position: absolute; inset: 0; background: var(--giallo); border-radius: 4px;
  transform-origin: left; transform: scaleX(var(--avanzamento, 0));
}
.linea-tempo__fasi { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.5vw, 32px); position: relative; }
.lt-fase { text-align: center; display: flex; flex-direction: column; align-items: center; }
.lt-fase__punto {
  width: var(--punto); height: var(--punto); border-radius: 50%; flex: none;
  display: grid; place-items: center; margin-bottom: 22px;
  background: var(--bianco); color: #9a9a92; border: 2px solid #dcdcd4;
  transition: background .45s, color .45s, border-color .45s, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
}
.lt-fase__punto svg { width: 24px; height: 24px; }
.lt-fase__num { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #a5a59c; margin-bottom: 8px; transition: color .45s; }
.lt-fase h3 { font-size: 18px; margin-bottom: 10px; color: #8c8c86; transition: color .45s; }
.lt-fase p { font-size: 14px; color: var(--grigio); opacity: .5; transition: opacity .45s; max-width: 24ch; }

@media (max-width: 820px) {
  .linea-tempo { --punto: 52px; }
  .linea-tempo__binario { left: calc(var(--punto) / 2 - 2px); right: auto; top: calc(var(--punto) / 2); bottom: calc(var(--punto) / 2); width: 4px; height: auto; }
  .linea-tempo__riempimento { transform-origin: top; transform: scaleY(var(--avanzamento, 0)); }
  .linea-tempo__fasi { grid-template-columns: 1fr; gap: 36px; }
  .lt-fase { display: grid; grid-template-columns: var(--punto) 1fr; column-gap: 20px; text-align: left; align-items: start; }
  .lt-fase__punto { grid-row: 1 / span 3; margin: 0; }
  .lt-fase__num { margin: 4px 0 4px; }
  .lt-fase p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lt-fase__punto, .lt-fase h3, .lt-fase p { transition: none; }
}