/* ==========================================================
   TRAVIO — Integrazioni / API
   Caricare dopo bootstrap.min.css e travio.css
   ========================================================== */

/* ---------- INTRO ---------- */
.int-intro{background:#fff;color:#14171E;
  padding:clamp(26px,3vw,42px) 0 clamp(40px,4.6vw,64px)}

/* briciole di pane */
.briciole{display:flex;align-items:center;gap:9px;margin:0 0 clamp(20px,2.4vw,34px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.briciole a{color:#8A9099;transition:color .2s}
.briciole a:hover{color:var(--giallo-scuro)}
.briciole span{color:rgba(20,23,30,.25)}
.briciole b{font-weight:500;color:#14171E}

.int-cifra{display:flex;align-items:center;gap:clamp(20px,3.5vw,48px);flex-wrap:wrap}
.int-cifra__n{display:flex;align-items:flex-start;margin:0;flex:none;line-height:1}
.int-cifra__n b{font-family:var(--display);font-weight:800;letter-spacing:-.05em;
  font-size:clamp(74px,9vw,128px);line-height:.82;
  background:linear-gradient(160deg,#14171E 35%,#4A5364 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.int-cifra__n em{font-style:normal;font-family:var(--display);font-weight:800;
  font-size:clamp(30px,3.4vw,48px);color:var(--giallo-scuro);margin-top:.1em}
.int-cifra__testo{flex:1 1 420px;min-width:280px}
.int-cifra__testo h1{font-size:clamp(22px,2.5vw,34px);margin:0 0 12px;color:#14171E}
.int-cifra__testo p{margin:0;color:#5A6270;font-size:15px;line-height:1.65;max-width:none}

/* ---------- I QUATTRO TIPI ---------- */
.int-tipi{background:var(--carta);color:#14171E;padding:clamp(34px,4vw,56px) 0 clamp(30px,3.4vw,46px)}

.int-guida{margin:0 0 clamp(14px,1.6vw,20px);font-size:14.5px;line-height:1.6;color:#5A6270;
  max-width:none}
.int-guida b{color:#14171E;font-weight:600;
  box-shadow:inset 0 -.5em 0 rgba(255,210,63,.45)}

.int-tabs{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:clamp(24px,2.8vw,38px)}
@media (min-width:640px){.int-tabs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.int-tabs{grid-template-columns:repeat(4,1fr);gap:16px}}

.int-tab{position:relative;text-align:left;cursor:pointer;
  background:#fff;border:1px solid rgba(20,23,30,.12);border-radius:6px;
  padding:clamp(16px,1.6vw,22px);
  transition:border-color .25s,transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s,background .25s}
.int-tab:hover{transform:translateY(-3px);border-color:rgba(20,23,30,.25);
  box-shadow:0 18px 34px -26px rgba(13,16,22,.6)}
.int-tab__n{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  color:#9AA0AA;margin-bottom:10px;transition:color .25s}
.int-tab b{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(17px,1.5vw,21px);color:#14171E;margin-bottom:5px}
.int-tab b i{font-style:normal;color:var(--giallo-scuro)}
.int-tab em{display:block;font-style:normal;font-size:13px;color:#6B7280}

.int-tab.is-attiva{background:var(--ink);border-color:var(--ink)}
.int-tab.is-attiva .int-tab__n{color:var(--giallo)}
.int-tab.is-attiva b{color:#fff}
.int-tab.is-attiva b i{color:var(--giallo)}
.int-tab.is-attiva em{color:rgba(255,255,255,.6)}

/* ---------- SPIEGAZIONE ---------- */
.int-spiega{position:relative}
.int-pannello{display:none;border-top:2px solid var(--giallo);padding-top:clamp(20px,2.2vw,30px)}
.int-pannello.is-attiva{display:block;animation:int-entra .45s cubic-bezier(.2,.7,.3,1)}
@keyframes int-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.int-pannello h2{font-size:clamp(20px,2vw,27px);margin:0 0 10px}
.int-perc{color:var(--giallo-scuro)}
.int-pannello > p{margin:0 0 16px;color:#5A6270;font-size:15px;line-height:1.7;max-width:none}
.int-pannello > p b{color:#14171E;font-weight:600}

.int-punti{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.int-punti li{position:relative;padding-left:18px;font-size:14px;color:#5A6270}
.int-punti li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  background:var(--giallo);transform:rotate(45deg)}
.int-pannello .btn-t{margin-top:20px}

/* ---------- ELENCHI DI LOGHI ---------- */
.int-elenchi{background:#fff;color:#14171E;
  padding:clamp(34px,4vw,56px) 0 clamp(40px,4.6vw,66px)}

.int-barra{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:clamp(20px,2.4vw,32px)}
.int-barra__titolo{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(15px,1.2vw,17px)}

.int-cerca{display:flex;align-items:center;gap:9px;background:var(--carta);border-radius:3px;
  border:1px solid rgba(20,23,30,.14);padding:0 14px;min-height:44px;color:#6B7280;
  transition:border-color .2s}
.int-cerca:focus-within{border-color:var(--ink)}
.int-cerca input{border:0;outline:0;background:none;font-family:var(--body);font-size:14px;
  color:#14171E;min-width:200px;padding:0}

.int-griglia{display:none;list-style:none;padding:0;margin:0;
  grid-template-columns:repeat(2,1fr);gap:1px;background:transparent;border:0}
.int-griglia.is-attiva{display:grid}
@media (min-width:1000px){.int-griglia{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1450px){.int-griglia{grid-template-columns:repeat(4,1fr)}}


/* la linea la disegna ogni cella: dove i loghi finiscono resta bianco */
.logo-item{background:#fff;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:26px 22px 18px;min-height:132px;text-align:center;
  box-shadow:0 0 0 1px rgba(20,23,30,.12)}
/* il logo sta dentro un riquadro con aria attorno: i file sono già
   ritagliati, quindi senza margini finirebbero attaccati ai bordi */
.logo-item img{width:100%;max-width:58%;height:46px;object-fit:contain;display:block}
.logo-item span{font-size:13px;line-height:1.25;color:#6B7280}
.logo-item[hidden]{display:none}

.int-griglia-vuota{display:none;background:#fff;border:1px solid rgba(20,23,30,.1);
  border-radius:6px;padding:clamp(22px,2.4vw,32px);max-width:70ch}
.int-griglia-vuota.is-attiva{display:block}
.int-griglia-vuota p{margin:0 0 18px;color:#5A6270;font-size:15px;line-height:1.7}

.int-nessuno{margin:22px 0 0;color:#6B7280;font-size:14px}

/* ---------- CHIUSURA ---------- */
.int-chiusura{background:var(--ink);color:#fff;padding:clamp(36px,4.2vw,60px) 0}
.int-chiusura .container-t{display:flex;flex-wrap:wrap;gap:22px 40px;
  align-items:center;justify-content:space-between}
.int-chiusura h2{margin:0 0 8px;font-size:clamp(20px,2.2vw,30px);color:#fff}
.int-chiusura p{margin:0;color:var(--txt);font-size:15px;line-height:1.65;max-width:60ch;
  font-weight:300}
.int-chiusura__azioni{display:flex;flex-wrap:wrap;gap:12px}
.btn-t--ghost-scuro{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn-t--ghost-scuro:hover{background:#fff;color:var(--ink);border-color:#fff}