/*
 * I blocchi di testo e foto del sito nuovo di www.kitebeachcaboverde.com: testata, titolo, titolo-sezione,
 * evidenziato, divisore, testo, testo-foto, bottoni, riquadri, servizi, squadra, invito, loghi, colonne (kb/modelli/blocchi/), e il
 * bottone comune .kb-bottone. Passo 3.8 di docs/rifacimento-2026-09-24/PIANO.md, corsia M-a. Usa le
 * variabili di :root di kb-layout.css, che si carica prima: un colore scritto qui a mano invece che con la
 * sua variabile lo dice la prova (tools/prova_testo_foto.py sabota --kb-azzurro). Nei commenti di questo
 * foglio nessun percorso comincia con la barra: tools/verifica_asset.py legge ogni indirizzo di assets/
 * scritto qui dentro e lo cerca sul disco.
 *
 * Le misure vengono da docs/rifacimento-2026-09-24/analisi-aspetto.md (sezioni 3.4, 4, 7-9, 11); i difetti
 * di oggi che qui NON si copiano dalla sezione 19: titoli che al telefono non scendono (clamp), testo
 * giustificato, ritratti uno per riga, animazioni che nascondono, tratto dei titoli che si ridisegna.
 * Le controlla tools/verifica_aspetto.js con tools/aspetto-atteso-testo-foto.json, sul banco
 * tools/banco_testo_foto.php.
 *
 * Ogni blocco ha la classe kb-b-<tipo> sulla radice (kb-b-, perche' kb-testata e' gia' la barra del layout).
 * Punti di rottura quelli del layout: 767 px il telefono.
 */

/* --- La cornice: la larghezza del contenuto (1140 px, 20 px ai lati al telefono), lo spazio fra i blocchi */

.kb-b-titolo,.kb-b-titolo-sezione,.kb-b-evidenziato,.kb-b-divisore,.kb-b-testo,.kb-b-testo-foto,.kb-b-bottoni,.kb-b-riquadri,.kb-b-servizi,.kb-b-squadra,.kb-b-loghi{max-width:calc(var(--kb-contenuto) + 2 * var(--kb-margine));margin:40px auto;padding:0 var(--kb-margine)}
.kb-b-riquadri,.kb-b-servizi,.kb-b-squadra{margin-top:60px;margin-bottom:60px}
/* le ancore (#lezioni...) non finiscono sotto la barra fissa */
.kb-b-testata,.kb-b-titolo,.kb-b-titolo-sezione,.kb-b-evidenziato,.kb-b-divisore,.kb-b-testo,.kb-b-testo-foto,.kb-b-bottoni,.kb-b-riquadri,.kb-b-servizi,.kb-b-squadra,.kb-b-invito,.kb-b-loghi{scroll-margin-top:90px}

/* --- Il bottone (7): Roboto 500 16/16, bianco su blu, 15 px 50 px, alto 46, squadrato, iniziali maiuscole come
   oggi; al passaggio azzurro e piu' grande ("grow", PIANO 12), fermo con prefers-reduced-motion. L'icona a sinistra */

.kb-bottone{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:15px 50px;border:0;border-radius:0;background:var(--kb-blu);color:var(--kb-bianco);font:500 16px/16px var(--kb-roboto);text-align:center;text-transform:capitalize;text-decoration:none;cursor:pointer;transition:background-color .3s,transform .3s}
.kb-bottone:hover,.kb-bottone:focus-visible{background:var(--kb-azzurro);transform:scale(1.1)}
.kb-bottone .kb-icona{width:16px;height:16px}

/* --- La testata (9): foto sovrapposte, una accesa; kb-testata.js le fa girare -------------------------- */

.kb-b-testata{position:relative;overflow:hidden;width:100%;aspect-ratio:1400/950;max-height:950px;margin:0 0 40px;background:var(--kb-chiaro)}
.kb-b-testata--media{aspect-ratio:1400/800;max-height:800px}
.kb-b-testata--bassa{aspect-ratio:1400/600;max-height:600px}
.kb-b-testata__foto{position:absolute;top:0;left:0;display:block;width:100%;max-width:none;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}
/* la foto che entra sta sopra quella di prima, che resta accesa finche' la nuova non e' piena */
.kb-b-testata__foto--attiva{opacity:1;z-index:2}
.kb-b-testata__foto--prima{opacity:1;z-index:1}
/* il titolo della home (9.1): Bungee maiuscolo scuro in alto, come lo slider di oggi (Slider Revolution 7), che ha
   quattro griglie in scala con la finestra, corpo e interlinea arrotondati al pixel: da 1024 px quella da 1400x950 (60/70
   spaziatura 4 su 1047 px; a 1366 59/68 3,90 su 1022; a 1024 44/51 2,93 su 766), da 778 a 1023 quella da 1024x700, da 480
   a 777 quella da 778x500 (a 768 60/59 0,99 su 616) e sotto quella da 480 (a 390 26/33 spaziatura 0); la testata alta
   come oggi */
.kb-b-testata__titolo{position:absolute;top:calc(100% * 93 / 950);left:0;right:0;z-index:3;max-width:min(1047px,calc(100vw * 1047 / 1400));margin:0 auto;padding:0;font:400 min(60px,calc(100vw * 60 / 1400))/min(70px,calc(100vw * 70 / 1400)) var(--kb-bungee);font-size:round(min(60px,100vw * 60 / 1400),1px);line-height:round(min(70px,100vw * 70 / 1400),1px);letter-spacing:min(4px,calc(100vw * 4 / 1400));text-transform:uppercase;text-align:center;text-wrap:balance;color:var(--kb-scuro)}
@media (min-width:778px) and (max-width:1023px){
  .kb-b-testata,.kb-b-testata--media,.kb-b-testata--bassa{aspect-ratio:1024/700;max-height:none}
  .kb-b-testata__titolo{top:calc(100% * 68 / 700);left:calc(100% * 40 / 1024);max-width:calc(100% * 765 / 1024);padding:0;font-size:calc(100vw * 43 / 1024);font-size:round(calc(100vw * 43 / 1024),1px);line-height:calc(100vw * 51 / 1024);line-height:round(calc(100vw * 51 / 1024),1px);letter-spacing:calc(100vw * 2 / 1024)}
}
@media (min-width:480px) and (max-width:777px){
  .kb-b-testata,.kb-b-testata--media,.kb-b-testata--bassa{aspect-ratio:778/500;max-height:none}
  .kb-b-testata__titolo{top:calc(100% * 38 / 500);max-width:calc(100% * 624 / 778);font-size:calc(100vw * 61 / 778);font-size:round(calc(100vw * 61 / 778),1px);line-height:calc(100vw * 60 / 778);line-height:round(calc(100vw * 60 / 778),1px);letter-spacing:calc(100vw / 778)}
}
@media (max-width:479px){
  .kb-b-testata{aspect-ratio:3/2;max-height:none}
  .kb-b-testata--media,.kb-b-testata--bassa{aspect-ratio:6/5}
  .kb-b-testata__titolo{top:calc(100% * 22 / 320);max-width:calc(100% * 397 / 480);font-size:calc(100vw * 32 / 480);font-size:round(calc(100vw * 32 / 480),1px);line-height:calc(100vw * 40 / 480);line-height:round(calc(100vw * 40 / 480),1px);letter-spacing:normal}
}

/* --- Il titolo della pagina (3.4): H1 Roboto 600 50/50 maiuscolo azzurro, centrato --------------------- */

.kb-b-titolo__testo{margin:0;font:600 clamp(30px,4vw + 16px,50px)/1 var(--kb-roboto);text-transform:uppercase;text-align:center;color:var(--kb-azzurro)}

/* --- Il titolo di sezione (3.4): H2 Roboto 600 40/40 maiuscolo azzurro (oggi alto 40 px), spaziatura 2,1 px (25/35 al
   telefono) */

.kb-b-titolo-sezione__testo{margin:0;font:600 clamp(25px,2.4vw + 15.6px,40px)/1 var(--kb-roboto);letter-spacing:2.1px;text-transform:uppercase;text-align:center;color:var(--kb-azzurro)}
/* GO PRO, il titolo di sezione sotto la foto grande del kite: oggi senza spaziatura, a ogni larghezza */
.kb-foto + .kb-b-titolo-sezione .kb-b-titolo-sezione__testo{letter-spacing:normal}
/* sopra un testo con la foto a destra ("I nostri centri") come oggi al computer (da 1025 px): il titolo a sinistra in
   cima alla colonna del testo (10 px dentro, alto 50), la foto che sale di una riga del titolo piu' i 40 px fra i
   blocchi (post-825.css). Al tablet oggi la sezione e' impilata e centrata: sotto, nel blocco del tablet */
@media (min-width:1025px){
  .kb-b-titolo-sezione:has(+ .kb-b-testo-foto--foto-destra) .kb-b-titolo-sezione__testo{max-width:calc(50% - 20px);margin-left:10px;line-height:1.25;text-align:left}
  .kb-b-titolo-sezione:has(+ .kb-b-testo-foto--foto-destra) + .kb-b-testo-foto--foto-destra .kb-b-testo-foto__foto{margin-top:calc(-1.25 * clamp(25px,2.4vw + 15.6px,40px) - 40px)}
}

/* --- Il titolo evidenziato (8.1): Roboto Slab 43/51,6 grigio, la parola Roboto 600 col tratto fermo ----- */

.kb-b-evidenziato__titolo{margin:0;font:400 clamp(28px,3vw + 5px,43px)/1.2 var(--kb-slab);text-align:center;color:var(--kb-grigio-titolo)}
.kb-b-evidenziato__parola{position:relative;display:inline-block;font-family:var(--kb-roboto);font-weight:600;color:var(--kb-blu)}
.kb-b-evidenziato__dentro{position:relative;z-index:1}
.kb-b-evidenziato__tratto{position:absolute;top:50%;left:50%;width:calc(100% + 20px);height:calc(100% + 20px);overflow:visible;transform:translate(-50%,-50%);pointer-events:none}
/* i colori per variante misurati sui 51 titoli di oggi (analisi-aspetto 8.1): riccio blu, sottolineato blu col tratto
   azzurro, zigzag rosso; "The vibe" e' dichiarato. Il sabotaggio colori-scambiati vuole le tre righe qui sotto di fila */
.kb-b-evidenziato__tratto path{fill:none;stroke:var(--kb-blu);stroke-width:9}
.kb-b-evidenziato--sottolineato .kb-b-evidenziato__tratto path{stroke:var(--kb-azzurro)}
.kb-b-evidenziato--zigzag .kb-b-evidenziato__parola{color:var(--kb-rosso)}
.kb-b-evidenziato--zigzag .kb-b-evidenziato__tratto path{stroke:var(--kb-rosso-tratto)}

/* --- Il divisore (8.2): linea azzurra da 3 px (2 nei sottili), etichetta Roboto 600 15/15 al centro ----- */

.kb-b-divisore{display:flex;align-items:center;gap:10px;padding-top:15px;padding-bottom:15px}
.kb-b-divisore--2{padding-top:10px;padding-bottom:10px}
.kb-b-divisore__linea{flex:1 1 0;min-width:20px;height:3px;background:var(--kb-azzurro)}
.kb-b-divisore--2 .kb-b-divisore__linea{height:2px}
.kb-b-divisore__etichetta{flex:0 1 auto;font:600 15px/15px var(--kb-roboto);text-align:center;color:var(--kb-azzurro)}
.kb-b-divisore--3 .kb-b-divisore__etichetta{text-transform:uppercase}

/* --- Il testo (3.4): Roboto 16/25,6 grigio, allineato a sinistra (19.6: oggi giustificato); 32 px fra un paragrafo e
   l'altro, come oggi (il 16 di prima li stringeva) */

.kb-b-testo,.kb-b-testo-foto__testo{font:400 16px/25.6px var(--kb-roboto);text-align:left;color:var(--kb-testo)}
.kb-b-testo p,.kb-b-testo ul,.kb-b-testo ol,.kb-b-testo-foto__testo p,.kb-b-testo-foto__testo ul,.kb-b-testo-foto__testo ol{margin:0 0 32px}
.kb-b-testo ul,.kb-b-testo ol,.kb-b-testo-foto__testo ul,.kb-b-testo-foto__testo ol{padding-left:1.5em}
.kb-b-testo>:last-child,.kb-b-testo-foto__testo>:last-child{margin-bottom:0}
.kb-b-testo strong,.kb-b-testo-foto__testo strong{font-weight:700}
/* il titoletto (h4, l'unico ammesso) come l'h3 di oggi nei testi: Bungee 20/30, scuro, iniziali maiuscole, senza margini */
.kb-b-testo h4,.kb-b-testo-foto__testo h4{margin:0;font:400 20px/30px var(--kb-bungee);text-transform:capitalize;color:var(--kb-scuro)}
/* i link del testo scuri, i bottoni no: bianchi come ovunque (tools/verifica_colori.js, sabotaggio regola) */
.kb-b-testo a:not(.kb-bottone),.kb-b-testo-foto__testo a:not(.kb-bottone){color:var(--kb-scuro)}

/* --- Testo e foto (11.2): due colonne come oggi, in percento del contenuto (la foto 50, 40 o 30: il campo colonna)
   e 10 px dentro per lato (a meta': 550 px a 123 e 693); la foto dal suo lato, mai piu' larga dei suoi pixel e al
   centro della colonna; al telefono una colonna sola, nell'ordine della pagina (la foto a sinistra viene prima) --- */

.kb-b-testo-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 0;align-items:start}
.kb-b-testo-foto--colonna-40{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.kb-b-testo-foto--colonna-30{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
.kb-b-testo-foto--foto-sinistra.kb-b-testo-foto--colonna-40{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.kb-b-testo-foto--foto-sinistra.kb-b-testo-foto--colonna-30{grid-template-columns:minmax(0,3fr) minmax(0,7fr)}
.kb-b-testo-foto>*{padding:0 10px}
.kb-b-testo-foto--foto-sinistra .kb-b-testo-foto__foto{order:-1}
.kb-b-testo-foto__foto{display:grid;gap:20px}
.kb-b-testo-foto__immagine{display:block;max-width:100%;height:auto;margin:0 auto}
/* il bottone sotto il testo, al centro della sua colonna, 20 px sotto (i bottoni dei centri di oggi) */
.kb-b-testo-foto__azione{margin:20px 0 0;text-align:center}

/* --- Le colonne: due testi affiancati, larghi uguali (l'istruttore, il kite camp). 1120 px di contenuto e 20 fra le due:
   a 1366 px 550 a 123 e 693, al tablet come oggi (a 1024 px 482 a 20 e 522). Dentro, titolo evidenziato e testo senza la
   loro cornice, 50 px fra titolo e testo. Al telefono una sotto l'altra: 20 fra le due, 50 prima di un titolo --------- */

.kb-b-colonne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;max-width:calc(var(--kb-contenuto) - 20px + 2 * var(--kb-margine));margin:40px auto;padding:0 var(--kb-margine);scroll-margin-top:90px}
.kb-b-colonne .kb-b-evidenziato,.kb-b-colonne .kb-b-testo{max-width:none;margin:0;padding:0}
.kb-b-colonne .kb-b-evidenziato{margin-bottom:50px}

/* --- I bottoni in fila (7): come le colonne di oggi, una per bottone, larghe uguali, il bottone al centro della sua
   (le quattro ancore del kite a 1366 px: 176, 463, 759, 1023); al telefono uno sotto l'altro, centrati ------------ */

.kb-b-bottoni__elenco{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 0;margin:0;padding:0;list-style:none}
.kb-b-bottoni__elenco>li{display:flex;flex:1 1 0;justify-content:center;min-width:max-content}
/* il bottone grande (7): i bottoni col calendario, 20 px, alto 50 (come .kb-pr-bottone dei prezzi) */
.kb-bottone--grande{font-size:20px;line-height:20px}
.kb-bottone--grande .kb-icona{width:20px;height:20px}

/* --- I riquadri (11.1): 263 px ai due bordi del contenuto, azzurrini, icona 90x90 a 32 px dal titolo, titolo Roboto
   600 20/30 azzurro, iniziali maiuscole. Nella pagina del camp come oggi: senza fondo, tre colonne piene, icona 50x50 */

.kb-b-riquadri__elenco{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,263px));justify-content:space-between;gap:20px;margin:0;padding:0;list-style:none}
.kb-b-riquadri__voce{padding:75px 20px 57px;background:var(--kb-chiaro);text-align:center}
.kb-b-riquadri__icona{display:block;width:90px;height:90px;margin:0 auto 32px;color:var(--kb-azzurro)}
.kb-modello-camp .kb-b-riquadri__elenco{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kb-modello-camp .kb-b-riquadri__voce{padding:0;background:none}
.kb-modello-camp .kb-b-riquadri__icona{width:50px;height:50px;margin-bottom:15px}
/* il titolo del camp (un H1) a 40 px come oggi, non 50 */
.kb-modello-camp .kb-b-titolo__testo{font-size:clamp(30px,4vw + 16px,40px)}
.kb-b-riquadri__titolo{margin:0 0 10px;font:600 20px/30px var(--kb-roboto);text-transform:capitalize;color:var(--kb-azzurro)}
.kb-b-riquadri__testo{margin:0;font:400 16px/25.6px var(--kb-roboto);color:var(--kb-testo)}

/* --- I servizi (11.1): schede con la foto 357:240 ritagliata e il bottone sotto, tre per riga ----------- */

.kb-b-servizi__elenco{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;margin:0;padding:0;list-style:none}
.kb-b-servizi__voce{display:flex;flex-direction:column;align-items:center;gap:20px}
.kb-b-servizi__foto{display:block;width:100%;height:auto;aspect-ratio:357/240;object-fit:cover}

/* --- La squadra (11.1): la prima persona 342x428 col riquadro, poi i ritratti 190:271, sei per riga ------- */

.kb-b-squadra__primo{display:grid;grid-template-columns:342px minmax(0,1fr);margin:0 0 40px;background:var(--kb-chiaro)}
.kb-b-squadra__primo .kb-b-squadra__ritratto{display:block;width:342px;height:428px;object-fit:cover}
.kb-b-squadra__scheda{display:flex;flex-direction:column;justify-content:center;padding:40px;background:var(--kb-chiaro)}
.kb-b-squadra__scheda .kb-b-squadra__nome{margin:0 0 20px}
.kb-b-squadra__righe{margin:0;padding-left:1.5em;font:400 16px/25.6px var(--kb-roboto);color:var(--kb-testo)}
.kb-b-squadra__nome{margin:10px 0 0;font:600 20px/20px var(--kb-roboto);text-transform:uppercase;text-align:center;color:var(--kb-azzurro)}
.kb-b-squadra__altri{display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0;list-style:none}
.kb-b-squadra__persona{flex:0 0 calc(100% / 6);min-width:0}
.kb-b-squadra__persona .kb-b-squadra__ritratto{display:block;width:100%;height:auto;aspect-ratio:190/271;object-fit:cover}

/* --- L'invito (11.1): la fascia a tutta larghezza con la foto dietro, titolo bianco 40 px, bottone. Misure di oggi
   (post-825.css): il titolo in una colonna di 444 px (due righe, tre in portoghese), la fascia alta 463 px a 1366,
   e la foto tagliata come oggi (a destra, al centro in altezza), e gli spazi di oggi prima e dopo (fino al piede: 321 px,
   183 al telefono); al telefono titolo 25/35 e bottone centrati ------ */

.kb-b-invito{position:relative;overflow:hidden;margin:154px 0 321px;background:var(--kb-scuro)}
.kb-b-invito__sfondo{position:absolute;top:0;left:0;display:block;width:100%;max-width:none;height:100%;object-fit:cover;object-position:100% 50%}
.kb-b-invito__dentro{position:relative;z-index:1;max-width:calc(var(--kb-contenuto) + 2 * var(--kb-margine));margin:0 auto;padding:100.8px var(--kb-margine)}
.kb-b-invito__titolo{max-width:444px;margin:37px 0 74px;font:600 40px/50px var(--kb-roboto);letter-spacing:1.4px;text-transform:uppercase;color:var(--kb-bianco)}
.kb-b-invito .kb-bottone{padding:17px 36px}

/* --- I loghi (11.3): in fila, centrati, alti 120 px ----------------------------------------------------- */

.kb-b-loghi__elenco{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px;margin:0;padding:0;list-style:none}
.kb-b-loghi__logo{display:block;width:auto;max-width:100%;height:120px;object-fit:contain}

/* --- Il tablet (da 768 a 1024 px): come oggi ---------------------------------------------------------------------
   Le misure di oggi a 1024 e a 768 px (la misura del tablet dell'ondata H, 28/09/2026). I corpi dei titoli sono quelli
   del computer da 768 px in su: oggi scendono solo al telefono (righe 113 e 155 di tools/differenze-volute.json). Le
   imbottiture che oggi cambiano con la pagina o la lingua non si copiano (riga 153): qui quelle di un blocco su tutte
   le sue pagine. La riga dei corpi la guasta il sabotaggio titoli-tablet di tools/verifica_impaginazione.js */

@media (min-width:768px){.kb-b-titolo__testo{font-size:50px}.kb-b-titolo-sezione__testo{font-size:40px}.kb-b-evidenziato__titolo{font-size:43px}}
@media (min-width:768px) and (max-width:1024px){
  /* i titoli di sezione della home in una colonna di 592 px (336 a 768), centrati, alti 50 */
  .kb-b-titolo-sezione:has(+ .kb-b-testo-foto--foto-destra, + .kb-b-servizi, + .kb-b-riquadri, + .kb-b-squadra) .kb-b-titolo-sezione__testo{margin:0 196px;line-height:50px}
  /* testo e foto: le due colonne a 20 px dal bordo (oggi i centri italiani, l'IKO e i camp) */
  .kb-b-testo-foto{padding-left:10px;padding-right:10px}
  /* i centri della home impilati come oggi: il testo centrato in 592 px (336 a 768), 16/26; sotto la foto, a 24 px dal
     bordo e alta al massimo 1024 (a 1024 px 870x1024, la misura large di WordPress di oggi). La sua larghezza viene da
     sizes, che per questa foto al tablet dice la pagina meno 48 px (blocchi/testo-foto.php) */
  .kb-b-titolo-sezione + .kb-b-testo-foto{grid-template-columns:minmax(0,1fr)}
  .kb-b-titolo-sezione + .kb-b-testo-foto .kb-b-testo-foto__testo{padding:0 206px;text-align:center;line-height:26px}
  .kb-b-titolo-sezione + .kb-b-testo-foto .kb-b-testo-foto__foto{padding:0 14px}
  .kb-b-titolo-sezione + .kb-b-testo-foto .kb-b-testo-foto__immagine{width:auto;max-height:1024px}
  /* i servizi della home due per riga, 56 px dal bordo, la foto al massimo 357 px al centro della sua colonna */
  .kb-b-servizi{padding-left:56px;padding-right:56px}
  .kb-b-servizi__elenco{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0}
  .kb-b-servizi__foto{max-width:357px}
  /* i riquadri della home due per riga, 56 px dal bordo, 30 fra l'uno e l'altro; quelli del camp 10 px dal bordo */
  .kb-modello-pagina .kb-b-riquadri{padding-left:56px;padding-right:56px}
  .kb-modello-pagina .kb-b-riquadri__elenco{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:normal;gap:30px}
  .kb-modello-pagina .kb-b-riquadri__voce{padding:50px 80px}
  .kb-modello-pagina .kb-b-riquadri__titolo{margin-bottom:24px}
  .kb-modello-camp .kb-b-riquadri{padding-left:10px;padding-right:10px}
  /* la squadra 56 px dal bordo: la prima persona col ritratto nel 42% (4:5) e la scheda nel 58%, poi i ritratti due per
     riga (7:10), come oggi; nella colonna stretta della scheda (54 px a 768) le parole lunghe vanno a capo dentro la
     parola, come oggi */
  .kb-b-squadra{padding-left:56px;padding-right:56px}
  .kb-b-squadra__primo{grid-template-columns:42% 58%;background:none}
  .kb-b-squadra__primo .kb-b-squadra__ritratto{width:100%;height:auto;aspect-ratio:4/5;align-self:start}
  .kb-b-squadra__scheda{padding:0 128px 0 144px}
  .kb-b-squadra__righe{margin:0 10px;padding-left:32px;overflow-wrap:anywhere}
  .kb-b-squadra__altri{justify-content:flex-start}
  .kb-b-squadra__persona{flex:0 0 42%}
  .kb-b-squadra__persona .kb-b-squadra__ritratto{aspect-ratio:7/10}
  .kb-b-squadra__persona .kb-b-squadra__nome{margin-top:20px}
  /* nella home italiana riquadri, servizi e squadra 24 px dal bordo invece di 56, come oggi */
  .kb-modello-pagina .kb-b-riquadri:lang(it),.kb-b-servizi:lang(it),.kb-b-squadra:lang(it){padding-left:24px;padding-right:24px}
  /* gli elenchi dei testi rientrati di 32 px come oggi (al computer e al telefono 24: riga 153) */
  .kb-b-testo ul,.kb-b-testo ol,.kb-b-testo-foto__testo ul,.kb-b-testo-foto__testo ol{padding-left:32px}
  /* l'invito col titolo e il bottone centrati, il titolo in una colonna di 704 px (448 a 768) */
  .kb-b-invito__dentro{padding-bottom:133.8px;text-align:center}
  .kb-b-invito__titolo{max-width:none;margin:30px 140px 74px}
  /* i bottoni in fila: 20 px fra le colonne, e la scritta che non ci sta va a capo dentro la parola, come oggi; ognuno
     alto quanto la sua scritta. Le colonne a 20 px dal bordo, a 10 in italiano e a 66 in portoghese: i centri dei
     bottoni di oggi nelle tre lingue (a 1024 px 135,5, 128 e 170 il primo) */
  .kb-b-bottoni__elenco{gap:20px}
  .kb-b-bottoni__elenco>li{min-width:0;align-items:flex-start}
  .kb-b-bottoni .kb-bottone{max-width:100%;overflow-wrap:anywhere}
  .kb-b-bottoni:lang(it){padding-left:10px;padding-right:10px}
  .kb-b-bottoni:lang(pt){padding-left:66px;padding-right:66px}
  /* i titoli evidenziati portoghesi 76 px dal bordo, come oggi: a 768 vanno a capo dove vanno oggi («Para todos os
     níveis» / «de capacidade», «Transforme a sua paixão» / «numa carreira») */
  .kb-b-evidenziato:lang(pt):not(.kb-b-colonne *){padding-left:76px;padding-right:76px}
  /* le colonne del kite camp (titolo evidenziato e testo) 76 px dal bordo, come oggi nelle tre lingue */
  .kb-b-colonne:has(.kb-b-evidenziato){padding-left:76px;padding-right:76px}
}

/* --- Il telefono (fino a 767 px) --------------------------------------------------------------------------- */

@media (max-width:767px){
  .kb-b-titolo,.kb-b-titolo-sezione,.kb-b-evidenziato,.kb-b-divisore,.kb-b-testo,.kb-b-testo-foto,.kb-b-bottoni,.kb-b-riquadri,.kb-b-servizi,.kb-b-squadra,.kb-b-loghi{margin-top:30px;margin-bottom:30px}
  .kb-b-testata,.kb-b-titolo,.kb-b-titolo-sezione,.kb-b-evidenziato,.kb-b-divisore,.kb-b-testo,.kb-b-testo-foto,.kb-b-bottoni,.kb-b-riquadri,.kb-b-servizi,.kb-b-squadra,.kb-b-invito,.kb-b-loghi{scroll-margin-top:60px}
  .kb-b-testata{margin-bottom:30px}
  .kb-b-titolo__testo{line-height:1.15}
  .kb-b-titolo-sezione__testo{line-height:1.4}
  .kb-b-testo-foto,.kb-b-testo-foto--foto-sinistra[class*=colonna-]{grid-template-columns:minmax(0,1fr)}
  .kb-b-testo-foto>*{padding:0}
  .kb-b-colonne{grid-template-columns:minmax(0,1fr);margin-top:30px;margin-bottom:30px;scroll-margin-top:60px}
  .kb-b-colonne__colonna+.kb-b-colonne__colonna>.kb-b-evidenziato{margin-top:30px}
  .kb-b-riquadri__elenco{grid-template-columns:minmax(0,1fr)}
  .kb-b-riquadri__voce{padding-left:40px;padding-right:40px}
  .kb-b-riquadri__titolo{font-size:18px;line-height:27px}
  .kb-modello-camp .kb-b-riquadri__voce{padding:0}
  .kb-modello-camp .kb-b-riquadri__titolo{font-size:20px;line-height:30px}
  .kb-b-squadra__primo{grid-template-columns:minmax(0,1fr)}
  .kb-b-squadra__primo .kb-b-squadra__ritratto{width:100%;height:auto;aspect-ratio:342/428}
  .kb-b-squadra__scheda{padding:30px 20px}
  .kb-b-squadra__persona{flex-basis:50%}
  .kb-b-squadra__nome{font-size:18px;line-height:18px}
  .kb-b-bottoni__elenco{flex-direction:column;align-items:center}
  .kb-b-bottoni__elenco>li{flex:none;min-width:0}
  .kb-b-invito{margin:100px 0 183px}
  .kb-b-invito__dentro{padding:64px 24px 96px;text-align:center}
  .kb-b-invito__titolo{max-width:none;font-size:25px;line-height:35px}
  .kb-b-loghi__logo{height:80px}
}

/* --- Fermo per chi lo chiede (18): niente dissolvenze, niente bottoni che crescono ---------------------- */

@media (prefers-reduced-motion:reduce){
  .kb-b-testata__foto,.kb-bottone{transition:none}
  .kb-bottone:hover,.kb-bottone:focus-visible{transform:none}
}