/* ============================================================
   migliorie.css — livello aggiuntivo per cardtalento.it
   Si carica DOPO style2.css e non ne sostituisce nessuna regola:
   togliendo il <link> il sito torna esattamente com'era.
   Nessuna immagine rimossa, nessuna struttura riscritta.
   ============================================================ */

:root {
  --blu:        #019be5;   /* il blu gia' usato dal sito */
  --blu-scuro:  #0d2b39;
  --inchiostro: #243238;
  --testo:      #3b4448;
  --spento:     #5c6366;   /* al posto di #7f8385: contrasto 5,4:1 su bianco */
  --filo:       #e4ecf1;
  --superficie: #f6fafc;
  --ombra:      0 1px 2px rgba(13,43,57,.06), 0 8px 24px rgba(13,43,57,.07);
  --raggio:     12px;
}

/* ---------- 1. leggibilita' del testo ---------------------- */

/* il testo giustificato su colonne strette apre "fiumi" di spazi:
   su schermo si legge meglio allineato a sinistra */
.text-justify,
p[style*="text-align: justify"],
h1.text-justify, h2.text-justify, h3.text-justify {
  text-align: left !important;
}

body {
  color: var(--testo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.grey { color: var(--spento) !important; }

/* lunghezza di riga leggibile: oltre ~70 caratteri l'occhio perde il rigo */
section p, section h4, section li { max-width: 68ch; }
section .text-center p,
section .text-center h4,
section p.text-center,
section h4.text-center { margin-left: auto; margin-right: auto; }

/* scala tipografica coerente, fluida fra telefono e desktop */
section h1 { font-size: clamp(27px, 3.4vw, 40px); line-height: 1.22; font-weight: 500; color: var(--inchiostro); letter-spacing: -.01em; }
section h2 { font-size: clamp(21px, 2.3vw, 28px); line-height: 1.3;  font-weight: 500; }
section h3 { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.35; font-weight: 500; }
section h4 { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6;  font-weight: 400; }

.welcome-blue h1, .welcome-blue h2, .welcome-blue h3 { color: #fff; }

/* ---------- 2. respiro fra le sezioni ---------------------- */
/* .section-padding nel foglio originale dichiara solo overflow:hidden:
   il nome prometteva un passo che non c'era */
section.section-padding { padding-top: 56px; padding-bottom: 56px; }
section#consumer, section#imprese { padding: 0; }

/* ---------- 3. il listino delle card ----------------------- */

.listino {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.listino-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.listino > div {
  background: #fff;
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  padding: 22px 20px 24px;
  box-shadow: var(--ombra);
  display: flex;
  flex-direction: column;
}
.listino h3 {
  margin: 0 0 4px;
  color: var(--inchiostro) !important;
  font-weight: 700;
  font-size: 17px !important;
  letter-spacing: .01em;
  text-align: left !important;
}
.listino .prezzo {
  display: block;
  font-size: 30px;
  font-weight: 300;
  color: var(--blu);
  line-height: 1.1;
  margin: 6px 0 2px;
}
.listino .prezzo small { font-size: 13px; color: var(--spento); font-weight: 400; }
.listino .a-chi {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blu);
  background: #e8f6fd;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.listino p {
  margin: 0;
  padding: 0 !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--spento);
  text-align: left !important;
  max-width: none;
}

/* le tre porte d'accesso: il pulsante sta in fondo, allineato
   anche quando i testi sopra hanno lunghezze diverse */
.azioni-porta {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto !important;
}
.azioni-porta .btn-talento { padding: 10px 22px; font-size: 14px; }
.link-porta { color: var(--blu); font-size: 14px; text-decoration: underline; }

/* ---------- 4. pulsanti ------------------------------------ */

.btn-talento {
  display: inline-block;
  background: var(--blu);
  color: #fff !important;
  border: 2px solid var(--blu);
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none !important;
  transition: background .15s ease, transform .15s ease;
}
.btn-talento:hover { background: #0186c7; border-color: #0186c7; transform: translateY(-1px); }
.btn-talento-chiaro {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255,255,255,.65);
}
.btn-talento-chiaro:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- 5. la testata ---------------------------------- */
/* Prima il titolo era disegnato dentro inner.png: non si poteva
   ingrandire, tradurre, selezionare, e sul telefono spariva.
   Ora e' testo vero sopra la stessa fotografia, ritagliata. */

header.hero {
  height: auto !important;
  background: var(--blu-scuro) !important;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: stretch;
  /* --barra la misura un rigo di script: la barra fissa cambia altezza
     quando il menu va a capo, e il titolo non deve finirci sotto */
  margin-top: var(--barra, 90px);
}
.hero-testo {
  padding: clamp(32px, 5vw, 72px) clamp(24px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-occhiello {
  color: #7fd0f5;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.hero-testo h1 {
  color: #fff !important;
  font-size: clamp(30px, 3.9vw, 50px) !important;
  line-height: 1.12;
  font-weight: 300;
  margin: 0 0 18px;
  letter-spacing: -.015em;
  max-width: 16ch;
}
.hero-testo h1 strong { font-weight: 600; }
.hero-sottotitolo {
  color: rgba(255,255,255,.82);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.65;
  margin: 0 0 26px;
  max-width: 46ch;
}
.hero-azioni { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-foto {
  background-image: url(../img/hero-foto.jpg);
  background-size: cover;
  background-position: 50% 28%;
  min-height: 300px;
}

/* ---------- 6. la barra del menu --------------------------- */
/* Bootstrap chiude il menu a 768px, ma fra 768 e 1200 le otto voci
   piu' il logo non entrano su un rigo e la barra diventa alta tre righe.
   Qui il menu a panino sale fino a 1199px. */

@media (max-width: 1199px) {
  .navbar-header { float: none; }
  .navbar-toggle { display: block; }
  .navbar-collapse { border-top: 1px solid rgba(0,0,0,.08); max-height: 80vh; }
  .navbar-collapse.collapse { display: none !important; }
  .navbar-collapse.collapse.in { display: block !important; overflow-y: auto; }
  .navbar-nav { float: none !important; margin: 8px -15px; }
  .navbar-nav > li { float: none; }
  .navbar-nav > li > a { padding-top: 11px; padding-bottom: 11px; }
}

.navbar-default { box-shadow: 0 1px 0 rgba(13,43,57,.08); }

/* ---------- 7. dettagli di finitura ------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #7fd0f5;
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

/* arrivando da un'ancora, il titolo non deve finire sotto la barra fissa */
section[id], header[id] { scroll-margin-top: calc(var(--barra, 90px) + 14px); }

footer .copyright p { margin: 18px 0 0; color: rgba(255,255,255,.75); font-size: 13.5px; }
footer .dati-societari { color: rgba(255,255,255,.6); font-size: 12.5px; margin-top: 4px; }

/* ---------- 8. telefono ------------------------------------ */

@media (max-width: 991px) {
  header.hero { grid-template-columns: 1fr; }
  .hero-foto { min-height: 230px; order: -1; background-position: 50% 22%; }
  .hero-testo h1 { max-width: none; }
  .listino, .listino-tre { grid-template-columns: 1fr; }
  section.section-padding { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------- 12. la fascia scura sotto l'apertura ------------ */
/* Era nera (#1c1c1c) con il titolo color inchiostro: il testo non si
   leggeva e la fascia sembrava una lastra vuota. Diventa il blu cupo
   del sito, il titolo bianco, le due colonne allineate in mezzo. */
.welcome {
  background: var(--blu-scuro);
  color: #c9d7de;
  padding: 40px 0;
}
.welcome h1,
.welcome h2,
.welcome h3,
.welcome p { color: #fff; }
.welcome h1 {
  font-size: clamp(23px, 2.6vw, 32px);
  line-height: 1.25;
  max-width: 22ch;
  margin: 0;
}
.welcome .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.welcome img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .welcome .row { display: block; }
  .welcome h1 { max-width: none; margin-bottom: 22px; }
  .welcome img { max-width: 320px; }
}

/* ---------- 13. mission e vision --------------------------- */
/* Il testo stava in una colonna stretta con mezzo schermo vuoto
   accanto: colonne allineate in mezzo e riga piu' corta. */
.about .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.about h3 { max-width: 46ch; }
.about img { max-width: 100%; height: auto; }

@media (max-width: 991px) {
  .about .row { display: block; }
  .about h3 { max-width: none; }
}


/* ---------- menu Accedi: tre porte ------------------------ */
.menu-accedi .dropdown-menu { min-width: 220px; padding: 6px 0; }
.menu-accedi .dropdown-menu > li > a { padding: 10px 18px; font-weight: 600; }
.menu-accedi .dropdown-menu small { display: block; font-weight: 400; color: #5a6270; }