/*
 * L'aspetto comune del sito nuovo di www.kitebeachcaboverde.com: caratteri, variabili, la barra col menu,
 * le tendine, il cassetto del telefono, il piede, il "torna su". Passo 3.7 di
 * docs/rifacimento-2026-09-24/PIANO.md; lo schema (variabili in cima, base, barra, menu, piede) viene dal
 * foglio del layout di QuadZone (qz-layout.css), i valori no. 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 2-7, 17), i difetti di oggi
 * che qui NON si copiano dalla sezione 19. Le controlla tools/verifica_aspetto.js con
 * tools/aspetto-atteso.json, che sabota anche le variabili qui sotto una per una: se un colore e' scritto
 * a mano invece che con la sua variabile, la prova lo dice.
 *
 * Qui solo cio' che vale per tutte le pagine. Ogni famiglia di blocchi ha il suo foglio (i passi 3.8-3.11),
 * che puo' usare le variabili di :root.
 *
 * Punti di rottura: 1024 px (tablet: barra 70, logo 170) e 767 px (telefono: barra 50, logo 100), come il
 * tema di oggi; in piu' LA SOGLIA DEL PANINO, 1319 px (vedi "Il menu" qui sotto): fino a li' il menu e' il
 * cassetto, da 1320 px in su sta sulla barra, su una riga. Oggi, col Bungee vero, il menu sta su una riga
 * da 1373 px in inglese, da 1350 in portoghese e da 1298 in italiano, e sotto va su due (misurato al pixel
 * il 28/09/2026 sul congelato, coi caratteri di assets/caratteri/ al posto di Google).
 */

/* I caratteri, in locale (assets/caratteri/, licenze in LEGGIMI.txt): solo le famiglie e i pesi usati
   (3.2). Via Inter, Bona Nova, Jost e Rubik, che nessun testo usa (PIANO 12). */
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/caratteri/outfit-300.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/caratteri/outfit-500.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/caratteri/outfit-600.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/caratteri/outfit-700.woff2) format('woff2')}
@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/caratteri/bungee-400.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/caratteri/roboto-400.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/caratteri/roboto-500.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/caratteri/roboto-600.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/caratteri/roboto-700.woff2) format('woff2')}
/* Il corsivo del Roboto (28/09/2026): le date e il grassetto corsivo del camp. Senza, il browser inclinava il tondo,
   piu' largo del corsivo vero di oggi (5 px sulla riga delle date). Un file variabile come quello di oggi: tutti i pesi */
@font-face{font-family:'Roboto';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/caratteri/roboto-italic.woff2) format('woff2')}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/caratteri/roboto-slab-400.woff2) format('woff2')}

/* I colori e le misure di oggi (2.3), anche dove il contrasto e' sotto AA (fedelta': PIANO 12) */
:root{
  --kb-blu:#008FB0;
  --kb-azzurro:#6EC1E4;
  --kb-rosso:#D90036;
  --kb-rosso-tratto:#DB0047;   /* il tratto dei titoli a zigzag (8.1) */
  --kb-scuro:#282828;
  --kb-nero:#000;
  --kb-bianco:#fff;
  --kb-chiaro:#F2F9FB;
  --kb-testo:#7A7A7A;
  --kb-testo-tabelle:#666;
  --kb-grigio-titolo:#54595F;
  --kb-filo:#EEE;
  --kb-salta-testo:#21759B;    /* il link per saltare al contenuto col fuoco, come oggi */
  --kb-salta-fondo:#F1F1F1;
  /* i caratteri, sempre con un ripiego generico (3.1: il tema non lo metteva, e senza Bungee usciva un serif) */
  --kb-outfit:'Outfit',sans-serif;
  --kb-bungee:'Bungee',system-ui,sans-serif;
  --kb-roboto:'Roboto',sans-serif;
  --kb-slab:'Roboto Slab',serif;
  /* la larghezza del contenuto e il margine laterale al telefono (4) */
  --kb-contenuto:1140px;
  --kb-margine:20px;
}

/* --- La base ---------------------------------------------------------------------------------------- */

[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--kb-bianco);color:var(--kb-scuro);font-family:var(--kb-outfit);font-size:16px;font-weight:300;line-height:1.6}
img{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
.kb-icona{display:inline-block;flex:none;width:1em;height:1em;fill:currentColor;vertical-align:middle}
/* flow-root: il margine del primo blocco resta dentro, e il contenuto comincia proprio sotto la barra */
.kb-contenuto{display:flow-root;scroll-margin-top:80px}
.kb-bandiera{flex:none;width:16px;height:11px;margin-right:.3em}

/* Salta al contenuto: fuori schermo finche' non lo raggiunge il tasto Tab (5.6). Col fuoco com'e' oggi (lo
   screen-reader-text del tema): a (4, 4), Outfit 700 14 px blu su grigio chiaro, con l'ombra e senza
   sottolineatura. Il testo in italiano e portoghese e' tradotto (differenze-volute.json, righe del layout) */
.kb-salta{position:absolute;left:-9999px;top:0;z-index:1300;padding:8px 14px;background:var(--kb-bianco);color:var(--kb-scuro)}
.kb-salta:focus{left:4px;top:4px;padding:15px 23px 14px;border-radius:3px;background:var(--kb-salta-fondo);box-shadow:0 0 2px 2px rgba(0,0,0,.6);color:var(--kb-salta-testo);font-size:14px;font-weight:700;line-height:normal;text-decoration:none}

/* --- La barra (5.1, 5.4): fissa in cima, 80 px, 70 scorrendo; il segnaposto tiene il posto ------------ */

.kb-testata{height:80px}
.kb-barra{position:fixed;top:0;left:0;right:0;z-index:1200;--kb-alta:80px;--kb-bordo:50px;background:var(--kb-blu)}
.kb-barra__dentro{display:flex;align-items:center;justify-content:space-between;height:var(--kb-alta);padding:0 var(--kb-bordo)}
.kb-logo{display:flex;flex:none;align-items:center;line-height:0}
.kb-logo img{display:block;width:152px;height:auto}
.kb-panino{display:none;flex:none;align-items:center;justify-content:center;width:40px;height:40px;margin-right:-10px;padding:0;border:0;background:none;color:var(--kb-bianco);cursor:pointer}
.kb-panino .kb-icona{width:20px;height:20px}
@media (min-width:1025px){
  .kb-barra--stretta{--kb-alta:70px}
}

/* --- Il menu sulla barra (5.1-5.3), da 1320 px in su ----------------------------------------------------
   Bungee 14 px maiuscolo, spaziatura 1,5 px, nero; bianco al passaggio del mouse. Col fuoco da tastiera il
   colore resta quello di prima, come oggi: cambia solo l'anello. 25 px di imbottitura per parte e niente
   spazio fra il logo e il menu, come oggi; e le misure del tema anche per le frecce (12,6 px, a 14 px dalla
   fine del testo) e per la bandiera: le voci sono larghe come oggi, e il menu va a capo dove va a capo oggi.
   LE SOGLIE SONO MISURATE sul congelato (28/09/2026, la finestra ristretta un pixel alla volta): il menu sta
   su una riga quando la finestra, tolti 252 px (il logo da 152 e i due bordi da 50), e' larga almeno
   quanto le voci: da 1373 px in inglese, da 1350 in portoghese, da 1298 in italiano. Sotto la soglia del
   panino (1319) c'e' il cassetto; fra 1320 e 1372 px in inglese e fra 1320 e 1349 in portoghese, dove oggi
   il menu va su due righe, qui sta su una con 16 px per parte. Tutte e due le cose sono scritte, con le
   misure, nella riga del menu su due righe di tools/differenze-volute.json. Se cambia un'etichetta del
   menu (interfaccia.json) o il logo, le soglie si rimisurano: tools/aspetto-atteso.json ha le voci
   "soglia" a 1319, 1320 e 1460 px nelle tre lingue. */

.kb-menu{flex:0 1 auto;min-width:0}
.kb-menu__chiudi{display:none}
.kb-menu__lista{--kb-voce:25px;display:flex;flex-wrap:wrap;justify-content:flex-end;margin:0;padding:0;list-style:none}
.kb-menu__voce{position:relative;display:flex;align-items:center}
.kb-menu__link{display:flex;align-items:center;height:var(--kb-alta);margin:0;padding:0 var(--kb-voce);border:0;background:none;font:400 14px/22.4px var(--kb-bungee);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:var(--kb-nero);cursor:pointer}
.kb-menu__voce:first-child>.kb-menu__link{padding-left:0}
.kb-menu__voce:last-child>.kb-menu__link{padding-right:0}
.kb-menu__link:hover{color:var(--kb-bianco)}
/* la voce della pagina, e quella che la contiene: bianche come al passaggio (5.7; oggi uguali alle altre) */
.kb-menu__link[aria-current="page"],.kb-menu__voce--contiene>.kb-menu__link{color:var(--kb-bianco)}
/* la freccia 12,6 px, 1,6 px sotto il centro della riga (2,2 quella della lingua) e la bandiera 1,1 px: i
   posti di oggi. I margini fanno 14 px in tutto, quanti ne lascia oggi il tema fra il testo e la fine */
.kb-menu__apri .kb-icona{position:relative;top:1.6px;width:12.6px;height:12.6px;margin:0 -1.26px 0 2.66px}
.kb-menu__voce--lingua>.kb-menu__apri .kb-icona{top:2.2px}
.kb-menu__voce--lingua>.kb-menu__link .kb-bandiera{position:relative;top:1.1px}
.kb-menu__apri[aria-expanded="true"] .kb-icona{transform:rotate(180deg)}
/* una voce con la sua pagina E una tendina: il link, poi il bottone con la freccia, che porta lui lo spazio a destra */
.kb-menu__voce--tendina>a.kb-menu__link{padding-right:0}
.kb-menu__apri:not(.kb-menu__apri--intera){display:flex;align-items:center;height:var(--kb-alta);margin:0;padding:0 var(--kb-voce) 0 0;border:0;background:none;color:var(--kb-nero);cursor:pointer}
.kb-menu__voce:last-child>.kb-menu__apri{padding-right:0}
/* le tendine: blu, larghe 200 px, voci scure con 14 px di margine a sinistra (oggi 0: il testo toccava il bordo) */
.kb-menu__sotto{display:none;position:absolute;top:100%;left:0;z-index:10;width:200px;margin:0;padding:0;list-style:none;background:var(--kb-blu)}
.kb-menu__voce--lingua>.kb-menu__sotto{left:auto;right:0}
.kb-menu__voce--aperta>.kb-menu__sotto{display:block}
.kb-menu__sottolink{display:flex;align-items:center;padding:15.54px 14px;border-bottom:1px solid rgba(28,178,241,.16);font:400 14px/22.4px var(--kb-bungee);letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;color:var(--kb-scuro)}
.kb-menu__sottolink:hover,.kb-menu__sottolink[aria-current="page"]{color:var(--kb-bianco)}
@media (min-width:1320px) and (hover:hover){
  .kb-menu__voce--tendina:hover>.kb-menu__sotto{display:block}
}
/* dove oggi il menu va su due righe, qui 16 px per parte e una riga sola (vedi le soglie qui sopra) */
@media (min-width:1320px) and (max-width:1372px){
  .kb-menu__lista:lang(en){--kb-voce:16px}
}
@media (min-width:1320px) and (max-width:1349px){
  .kb-menu__lista:lang(pt){--kb-voce:16px}
}
/* senza JavaScript la tendina senza pagina (The centres) si apre anche dalla tastiera */
html:not(.kb-js) .kb-menu__voce--tendina:focus-within>.kb-menu__sotto{display:block}

/* --- Il piede (6): su azzurro chiarissimo, le icone social, il filo blu, il copyright; 210 px ---------
   149 + 1 + 60 al computer, 158 + 1 + 50,6 al telefono (misurati sul congelato). Il filo, come oggi, ha
   24 px di margine per parte (oggi sta sul contenitore interno del fondo, che ha 24 px di imbottitura), e al
   tablet il copyright scende di 15 px (l'imbottitura di oggi sopra la riga) */

.kb-piede{background:var(--kb-chiaro);color:var(--kb-scuro)}
.kb-piede__social{padding:62px 24px 49px}
.kb-piede__elenco{display:flex;justify-content:center;gap:1.2em;margin:0;padding:0;list-style:none;font-size:19px;line-height:1}
.kb-piede__icona{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--kb-scuro);border-radius:0;background:var(--kb-chiaro);color:var(--kb-scuro)}
.kb-piede__icona:hover,.kb-piede__icona:focus-visible{border-color:var(--kb-blu);color:var(--kb-blu)}
.kb-piede__icona .kb-icona{width:19px;height:19px}
.kb-piede__fondo{display:flex;align-items:center;justify-content:center;min-height:61px;margin:0 24px;padding:0;border-top:1px solid var(--kb-blu)}
.kb-piede__copyright{margin:0;font:300 16px/25.6px var(--kb-outfit);text-align:center}

/* --- Il "torna su" (5.6): 36x36 blu, fisso a 30 px da destra e dal basso; compare scorrendo ------------ */

.kb-su{position:fixed;right:30px;bottom:30px;z-index:1100;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;background:var(--kb-blu);color:var(--kb-bianco);visibility:hidden}
.kb-su .kb-icona{width:20px;height:20px}
.kb-su--vista{visibility:visible}

/* --- Il panino e il cassetto (5.4), fino a 1319 px ---------------------------------------------------
   Com'e' oggi (decisione 3 del 28/09/2026: il cassetto uguale a oggi). Bianco a tutto schermo; la X blu di
   due sbarre da 18 x 1,92 px, in un bottone di 31,2 x 52,8 px a 24 px dal bordo destro; le voci da y 52,8,
   Bungee scure senza spaziatura fra le lettere, 24 px di margine per parte, righe da 51,4 px (50,4 e un
   filo bianco al 10%, che sul bianco non si vede: come oggi); le frecce da 16 px a 11,2 px dalla fine della
   riga; le tendine rientrate di 14 px, quella della lingua con righe da 45,8 px e la bandiera a 9,1 px dal
   nome. Blu: la voce della pagina aperta, anche quando e' la prima o l'ultima (il rilievo 0 dell'ondata G:
   la regola del colore non sta piu' insieme a quella del :first-child), e ogni voce al passaggio del mouse.
   La voce che contiene la pagina resta scura e la sua tendina e' gia' aperta quando il cassetto si apre
   (kb-layout.js); la lingua della pagina, nella tendina della lingua, e' scura come le altre. Col fuoco da
   tastiera il colore non cambia: cambia l'anello, come oggi. Panino e cassetto solo con JavaScript (la
   classe kb-js): senza, il menu resta aperto sotto la riga del logo, con le tendine aperte, e la barra non
   resta in cima (coprirebbe lo schermo). */

@media (max-width:1319px){
  .kb-js .kb-panino{display:flex}
  .kb-js .kb-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;overflow-y:auto;padding:52.8px 0 40px;background:var(--kb-bianco)}
  .kb-js .kb-barra--aperta .kb-menu{display:block}
  .kb-js .kb-menu__chiudi{display:block;position:absolute;top:0;right:24px;width:31.2px;height:52.8px;padding:0;border:0;background:none;color:var(--kb-blu);cursor:pointer}
  .kb-menu__sbarra{position:absolute;top:50%;left:50%;width:18px;height:1.92px;margin:-.96px 0 0 -9px;border-radius:1.92px;background:currentColor;transform:rotate(45deg)}
  .kb-menu__sbarra+.kb-menu__sbarra{transform:rotate(-45deg)}
  .kb-menu__lista{display:block;margin:0 24px}
  .kb-menu__voce{display:block}
  .kb-menu__link,.kb-menu__voce:first-child>.kb-menu__link,.kb-menu__voce:last-child>.kb-menu__link{width:100%;height:auto;padding:14px 7px;border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:normal;text-align:left}
  .kb-menu__link,.kb-menu__voce--contiene>.kb-menu__link{color:var(--kb-scuro)}
  .kb-menu__link:hover,.kb-menu__link[aria-current="page"]{color:var(--kb-blu)}
  .kb-menu__voce--lingua>.kb-menu__link .kb-bandiera{top:1.3px}
  .kb-menu__lista .kb-menu__apri .kb-icona{top:0;width:16px;height:16px;margin:0 4.2px 0 auto}
  .kb-menu__lista .kb-menu__voce--tendina>a.kb-menu__link{padding-right:46px}
  .kb-menu__apri:not(.kb-menu__apri--intera){position:absolute;top:0;right:0;justify-content:center;width:39.4px;height:50.4px;margin:0;padding:0;color:var(--kb-scuro)}
  .kb-menu__lista .kb-menu__apri:not(.kb-menu__apri--intera) .kb-icona{margin:0}
  .kb-menu__sotto,.kb-menu__voce--lingua>.kb-menu__sotto{position:static;width:auto;padding:0 0 0 14px;background:none}
  .kb-menu__sottolink{padding:14px 7px;border-bottom:1px solid rgba(255,255,255,.1);letter-spacing:normal;color:var(--kb-scuro)}
  .kb-menu__sottolink:hover,.kb-menu__sottolink[aria-current="page"]{color:var(--kb-blu)}
  .kb-menu__voce--lingua .kb-menu__sottolink{line-height:16.8px}
  .kb-menu__voce--lingua .kb-menu__sottolink .kb-bandiera{margin-right:9.1px}
  .kb-menu__voce--lingua .kb-menu__sottolink[aria-current="page"]{color:var(--kb-scuro)}
  .kb-menu__voce--lingua .kb-menu__sottolink[aria-current="page"]:hover{color:var(--kb-blu)}
  html.kb-cassetto-aperto{overflow:hidden}
  /* senza JavaScript */
  html:not(.kb-js) .kb-testata{height:auto}
  html:not(.kb-js) .kb-barra{position:relative}
  html:not(.kb-js) .kb-barra__dentro{flex-wrap:wrap;height:auto}
  html:not(.kb-js) .kb-logo{min-height:var(--kb-alta)}
  html:not(.kb-js) .kb-menu{flex:1 0 100%;margin:0 calc(-1 * var(--kb-bordo));padding:0 0 10px;background:var(--kb-bianco)}
  html:not(.kb-js) .kb-menu__sotto{display:block}
  html:not(.kb-js) .kb-menu__apri .kb-icona{display:none}
}

/* --- Tablet (fino a 1024 px) e telefono (fino a 767 px): la barra, il logo, il piede ------------------- */

@media (max-width:1024px){
  .kb-testata{height:70px}
  .kb-barra{--kb-alta:70px;--kb-bordo:30px}
  .kb-logo img{width:170px}
  .kb-contenuto{scroll-margin-top:70px}
  .kb-piede__social{padding:70px 24px 50px}
  .kb-piede__fondo{padding-top:15px}
}
/* A 1024 px esatti oggi la barra non resta in cima, scorre via con la pagina: il tema la tiene ferma con la
   testata del computer da 1024 px in su (breakPoints.desktop <= innerWidth), ma fino a 1024 compreso si vede
   quella del tablet, che cosi' non e' ferma. Un difetto del tema; la decisione 5 del 28/09/2026 e' "la barra
   al tablet uguale a oggi", e qui costa una riga. */
@media (min-width:1024px) and (max-width:1024px){
  .kb-barra{position:absolute}
}
/* Fra 768 e 1023 px, scorrendo, oggi la barra scende da 70 a 50 px e il logo diventa alto 50 (132,8 x 50) */
@media (min-width:768px) and (max-width:1023px){
  .kb-barra--stretta{--kb-alta:50px}
  .kb-barra--stretta .kb-logo img{width:auto;height:50px}
}
@media (max-width:767px){
  .kb-testata{height:50px}
  .kb-barra{--kb-alta:50px;--kb-bordo:15px}
  .kb-logo img{width:100px}
  .kb-contenuto{scroll-margin-top:50px}
  .kb-piede__fondo{min-height:51.6px;padding:15px 0 10px}
}