/* ==========================================================================
   Testata, pulsanti d'azione, card del portfolio, barra contatti mobile
   e pagina "Soluzioni per il turismo" (aggiornamento ottobre 2026).
   Colore del marchio: #e31e24
   ========================================================================== */

/* --- testata della home -------------------------------------------------- */
.HomeHero            {max-width:900px; margin:0 auto 30px auto; text-align:center; padding:0 15px;}
.HomeHeroSub         {font-family:'Encode Sans Condensed', sans-serif; font-size:20px; line-height:30px; color:#333; margin:0 0 22px 0;}
.HomeHeroSub b       {color:#000; font-weight:600;}
.HomeHeroLink        {text-align:center; margin:14px 0 0 0; font-size:18px;}
.HomeHeroLink a      {color:#e31e24; text-decoration:none; border-bottom:1px solid transparent;}
.HomeHeroLink a:hover{border-bottom-color:#e31e24;}

/* --- pulsanti d'azione --------------------------------------------------- */
.HomeCta             {display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.cta                 {display:inline-block; box-sizing:border-box; text-align:center; min-height:48px; line-height:24px; padding:12px 22px; border-radius:6px; font-family:'Oswald', sans-serif; font-size:19px; letter-spacing:1px; text-decoration:none; transition:background .25s, color .25s, box-shadow .25s;}
.cta-primaria        {background:#e31e24; color:#fff; box-shadow:0 4px 14px rgba(227,30,36,.35);}
.cta-primaria:hover  {background:#b9151a; color:#fff;}
.cta-secondaria      {background:#fff; color:#222; border:2px solid #222;}
.cta-secondaria:hover{background:#222; color:#fff;}

/* --- card del portfolio (home e pagina turismo) -------------------------- */
.SchedePreview .Scheda.SchedaCard              {height:310px;}
.SchedePreview .Scheda.SchedaCard .SchedaLink  {display:block; position:absolute; inset:0; color:inherit; text-decoration:none;}
.SchedePreview .Scheda.SchedaCard .imgbox      {height:66%;}
.SchedePreview .Scheda.SchedaCard .text        {top:200px; height:105px;}
.SchedePreview .Scheda.SchedaCard .text p      {padding:6px 10px 0 10px; line-height:19px;}
.SchedePreview .Scheda.SchedaCard .tipo        {font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:#e31e24;}
.SchedePreview .Scheda.SchedaCard .desc        {font-size:14px; color:#444;}
.SchedePreview .Scheda.SchedaCard:hover .text p b {color:#e31e24;}
.SchedePreview .Scheda.SchedaCard .SchedaLink:focus-visible {outline:3px solid #e31e24; outline-offset:4px;}

/* --- barra contatti fissa (solo smartphone) ----------------------------- */
.BarraContatti       {display:none;}
@media (max-width: 760px) {
    .BarraContatti   {display:flex; position:fixed; left:0; right:0; bottom:0; z-index:950; background:#121212; box-shadow:0 -2px 10px rgba(0,0,0,.35); padding-bottom:env(safe-area-inset-bottom);}
    .BarraContatti a {flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:56px; color:#fff; text-decoration:none; font-family:'Encode Sans Condensed', sans-serif; font-size:13px; letter-spacing:.5px; border-right:1px solid #2a2a2a;}
    .BarraContatti a:last-child {border-right:0; background:#e31e24;}
    .BarraContatti svg {width:22px; height:22px; margin-bottom:3px; fill:currentColor;}
    body             {padding-bottom:56px;}
    /* il pulsante WhatsApp flottante e' gia' nella barra */
    .wa-jump         {display:none !important;}
    .HomeHeroSub     {font-size:17px; line-height:25px;}
    .cta             {width:100%; font-size:17px;}
    .SchedePreview .Scheda.SchedaCard {width:320px; max-width:calc(100% - 16px); height:290px;}
    .SchedePreview .Scheda.SchedaCard .text {top:188px;}
}

/* --- pagina Soluzioni per il turismo ------------------------------------ */
.Turismo             {max-width:1100px; margin:0 auto; padding:0 15px; text-align:left;}
.Turismo .intro      {font-family:'Encode Sans Condensed', sans-serif; font-size:20px; line-height:30px; color:#333; text-align:center; max-width:860px; margin:0 auto 26px auto;}
.Turismo .blocchi    {display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin:30px 0;}
.Turismo .blocco     {background:#fff; border:1px solid #e4e4e4; border-top:4px solid #e31e24; border-radius:8px; padding:20px 22px; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.Turismo .blocco h2  {font-size:24px; line-height:30px; margin:0 0 10px 0; color:#222; text-align:left;}
.Turismo .blocco p, .Turismo .blocco li {font-family:'Encode Sans Condensed', sans-serif; font-size:16px; line-height:24px; color:#444;}
.Turismo .blocco ul  {margin:8px 0 0 18px; padding:0;}
.Turismo .evidenza   {background:#1b1b1b; color:#eee; border-radius:10px; padding:26px 28px; margin:30px 0;}
.Turismo .evidenza h2{color:#fff; text-align:left; margin:0 0 10px 0; font-size:28px;}
.Turismo .evidenza p, .Turismo .evidenza li {font-family:'Encode Sans Condensed', sans-serif; font-size:17px; line-height:26px; color:#ddd;}
.Turismo .evidenza ul{margin:8px 0 18px 18px; padding:0;}
.Turismo .evidenza .cta-secondaria {background:transparent; color:#fff; border-color:#fff;}
.Turismo .evidenza .cta-secondaria:hover {background:#fff; color:#111;}
.Turismo .chiusura   {text-align:center; margin:36px 0 10px 0;}
.Turismo .chiusura h2{font-size:30px; margin:0 0 16px 0;}

/* --- percorso di navigazione -------------------------------------------- */
.Briciole            {margin:14px 0 0 0; font-family:'Encode Sans Condensed', sans-serif; font-size:14px;}
.Briciole ol         {list-style:none; margin:0; padding:6px 12px; display:flex; flex-wrap:wrap; gap:2px 0; background:rgba(255,255,255,.7); border-radius:6px;}
.Briciole li         {color:#555;}
.Briciole li + li::before {content:"\203A"; margin:0 8px; color:#999;}
.Briciole a          {color:#e31e24;}
.Briciole a:hover    {text-decoration:underline; color:#b9151a;}
.Briciole [aria-current] {color:#222; font-weight:600;}

/* --- mappa del sito nel piede pagina ------------------------------------ */
.MappaSito           {background:#1b1b1b; color:#bbb; padding:30px 5% 10px 5%; font-family:'Encode Sans Condensed', sans-serif;}
.MappaSito h4        {color:#fff; text-align:center; padding:0 0 16px 0; margin:0; text-transform:uppercase; letter-spacing:2px; font-size:16px;}
.MappaColonne        {display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px 24px; max-width:1200px; margin:0 auto;}
.MappaColonna ul     {list-style:none; margin:6px 0 16px 0; padding:0;}
.MappaColonna li     {margin:0 0 4px 0; font-size:14px; line-height:19px; break-inside:avoid;}
.MappaSito .MappaColonna a       {color:#bbb;}
.MappaSito .MappaColonna a:hover {color:#fff; text-decoration:underline;}
/* sezioni con molte voci (Servizi): due colonne */
.MappaColonna.MappaLarga         {grid-column:span 2;}
.MappaColonna.MappaLarga ul      {column-count:2; column-gap:24px;}
@media (max-width: 520px) {
    .MappaColonna.MappaLarga     {grid-column:auto;}
    .MappaColonna.MappaLarga ul  {column-count:1;}
}
.MappaTitolo         {font-family:'Oswald', sans-serif; font-size:17px; letter-spacing:1px; color:#fff !important; text-transform:uppercase;}

/* --- preferenze di lettura (tema e dimensione del testo) ---------------- */
.Accessibilita       {position:fixed; left:12px; bottom:20px; z-index:960; display:flex; flex-direction:column; gap:6px;}
.acc-btn             {width:40px; height:40px; border-radius:50%; border:1px solid #ccc; background:#fff; color:#222; font-family:'Oswald', sans-serif; font-size:15px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2); display:flex; align-items:center; justify-content:center; padding:0;}
.acc-btn:hover       {background:#e31e24; border-color:#e31e24; color:#fff;}
.acc-btn:disabled    {opacity:.4; cursor:default; background:#fff; color:#222; border-color:#ccc;}
.acc-btn:focus-visible {outline:3px solid #e31e24; outline-offset:2px;}
.acc-btn svg         {width:20px; height:20px; fill:currentColor;}
.acc-btn .ico-sole   {display:none;}
html.tema-scuro .acc-btn .ico-sole {display:block;}
html.tema-scuro .acc-btn .ico-luna {display:none;}
@media (max-width: 760px) {
    .Accessibilita   {left:8px; bottom:68px; flex-direction:row;}
    .acc-btn         {width:36px; height:36px; font-size:14px;}
}

/* dimensione del testo: tutta l'area dei contenuti viene ingrandita */
html.testo-1 .Main, html.testo-1 .MappaSito, html.testo-1 .Footer {zoom:1.12;}
html.testo-2 .Main, html.testo-2 .MappaSito, html.testo-2 .Footer {zoom:1.25;}

/* --- tema scuro ---------------------------------------------------------- */
html.tema-scuro, html.tema-scuro body {background:#121417; color:#d8d8d8;}
html.tema-scuro .Wallpaper .Gradient  {background:linear-gradient(180deg, rgba(18,20,23,.80), rgba(18,20,23,1));}
html.tema-scuro .MainContent          {background:#1c1f24;}
html.tema-scuro h1                    {color:#ff5459; text-shadow:none; border-bottom-color:#444;}
html.tema-scuro h2, html.tema-scuro h4 {color:#ff5459;}
html.tema-scuro h3                    {color:#aaa;}
html.tema-scuro a                     {color:#ff6b6f;}
html.tema-scuro a:hover               {color:#fff;}
html.tema-scuro hr                    {filter:invert(1) brightness(.8);}
html.tema-scuro .TextBox              {color:#d8d8d8; background:rgba(28,31,36,.92);}
html.tema-scuro .TextBox h1           {color:#ff5459;}
html.tema-scuro .servicebox           {background:#1c1f24; color:#ddd;}
html.tema-scuro .box-inner h3         {color:#ddd;}
html.tema-scuro .Cella100             {background:#22262c; color:#eee; border-color:#3a3f47;}
html.tema-scuro .SchedePreview .Scheda .text p {color:#e6e6e6; text-shadow:none;}
html.tema-scuro .SchedePreview .Scheda.SchedaCard .desc {color:#bbb;}
html.tema-scuro .HomeHeroSub          {color:#ccc;}
html.tema-scuro .HomeHeroSub b        {color:#fff;}
html.tema-scuro .cta-secondaria       {background:transparent; color:#eee; border-color:#eee;}
html.tema-scuro .cta-secondaria:hover {background:#eee; color:#111;}
html.tema-scuro .cta-primaria         {color:#fff;}
html.tema-scuro .Turismo .intro       {color:#ccc;}
html.tema-scuro .Turismo .blocco      {background:#1c1f24; border-color:#333; border-top-color:#e31e24;}
html.tema-scuro .Turismo .blocco h2   {color:#eee;}
html.tema-scuro .Turismo .blocco p    {color:#bbb;}
html.tema-scuro .Briciole ol          {background:rgba(28,31,36,.85);}
html.tema-scuro .Briciole li          {color:#aaa;}
html.tema-scuro .Briciole [aria-current] {color:#eee;}
html.tema-scuro .acc-btn              {background:#22262c; color:#eee; border-color:#444;}
html.tema-scuro .acc-btn:disabled     {background:#22262c; color:#eee; border-color:#444;}
html.tema-scuro .Gallery a img        {filter:none;}
html.tema-scuro .MappaSito h4         {color:#fff;}

/* immagini di sfondo e logo in versione scura (img\*-dark.*) */
html.tema-scuro, html.tema-scuro body {background:#121417 url('/img/Bk-Main-dark.png');}
html.tema-scuro .HeadConteiner,
html.tema-scuro .header               {background-color:#1b1d21; background-image:url('/img/Bk-Header-dark.jpg');}
html.tema-scuro .logo,
html.tema-scuro .header .LogoMob,
html.tema-scuro .logoSW               {background-image:url('/img/logo_kefa-wide-dark.png');}
html.tema-scuro .StarWars             {background-color:#16202a; background-image:url('/img/Copertina_bk-dark.jpg'); color:#8cc4e0;}
html.tema-scuro .fog                  {background-image:url('/img/Copertina_fog-dark.png');}

/* scheda del portfolio: l'ingrandimento al passaggio del mouse usa solo transform,
   cosi' l'altezza del riquadro non cambia (prima, vicino al bordo, l'immagine
   rimpiccioliva e ingrandiva di continuo) */
.SchedaCopertina:hover img {width:66%; max-width:70%; margin:0 -7.5% 0 0; padding:1% 0 4% 0; transform:perspective(1000px) rotateY(0) rotateX(0) rotateZ(0) translateX(-5.5%) scale(1.18);}

/* --- schede del portfolio: archivio e collaborazione parziale ----------- */
.scheda.scheda-archivio              {position:relative;}
.scheda.scheda-archivio .imgbox      {filter:grayscale(100%) drop-shadow(0 0 4px #383838); opacity:.8;}
.badge-stato                         {position:absolute; top:6px; left:6px; z-index:5; background:#555; color:#fff; font-family:'Oswald', sans-serif; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:2px 8px; border-radius:4px;}
.NotaStato                           {max-width:900px; margin:0 auto 18px auto; padding:10px 16px; border-left:4px solid #888; background:rgba(255,255,255,.75); font-size:16px; color:#333; text-align:left;}
.NotaStato.NotaParziale              {border-left-color:#e31e24;}
html.tema-scuro .NotaStato           {background:rgba(28,31,36,.9); color:#ddd;}

/* --- collegamenti interni (scheda, servizi, turismo) -------------------- */
.Collegamenti        {max-width:1000px; margin:30px auto; padding:20px 24px; background:rgba(255,255,255,.8); border-radius:10px; border-top:4px solid #e31e24; text-align:center;}
.Collegamenti h2     {text-align:center; margin:0 0 14px 0; padding:0; font-size:24px;}
.CollegamentiVoci    {display:flex; flex-wrap:wrap; justify-content:center; gap:10px 14px; align-items:center;}
.CollegamentiVoci a:not(.cta) {display:inline-block; padding:8px 14px; border:1px solid #e31e24; border-radius:20px; font-size:16px; color:#e31e24; background:#fff;}
.CollegamentiVoci a:not(.cta):hover {background:#e31e24; color:#fff;}
html.tema-scuro .Collegamenti {background:rgba(28,31,36,.9);}
html.tema-scuro .CollegamentiVoci a:not(.cta) {background:transparent; color:#ff6b6f; border-color:#ff6b6f;}
html.tema-scuro .CollegamentiVoci a:not(.cta):hover {background:#e31e24; color:#fff;}
.SchedaCaratteristiche div a, .ShowcaseCaratteristiche div a {color:inherit; text-decoration:none; display:block;}

/* --- testata e menu su smartphone --------------------------------------- */
@media (max-width: 760px) {
    /* testata rossa, logo bianco al centro, pulsante menu a destra */
    .header, html.tema-scuro .header {background:#e31e24 none; height:56px; padding:0 56px; box-shadow:0 2px 8px rgba(0,0,0,.25);}
    .header .LogoMob, html.tema-scuro .header .LogoMob {width:100%; max-width:220px; height:40px; margin:8px auto 0 auto; background:url('/img/logo_kefa-wide-white.png') no-repeat center center; background-size:contain;}
    .header a        {left:auto; right:6px; top:4px; width:48px; height:48px; background:none;}
    .header a::before,
    .header a::after,
    .header a span   {content:""; position:absolute; left:12px; width:24px; height:3px; border-radius:2px; background:#fff;}
    .header a::before {top:16px; box-shadow:0 7px 0 #fff;}
    .header a::after  {top:30px;}
    .Main            {padding-top:58px;}

    /* titoli: un po' di margine ai lati */
    h1               {padding-left:16px; padding-right:16px;}
    .HomeHero        {padding:0 18px;}
}

/* menu laterale (jQuery mmenu) */
#menu.mm-menu                    {background:#1b1b1b; color:#eee; font-family:'Oswald', sans-serif;}
#menu.mm-menu .mm-list > li > a,
#menu.mm-menu .mm-list > li > span {font-size:19px; letter-spacing:1px; padding-top:14px; padding-bottom:14px; color:#f1f1f1; text-transform:uppercase;}
#menu.mm-menu .mm-list > li:not(.mm-subtitle):not(.mm-label):not(.mm-search):not(.mm-noresults):after {border-color:#2e2e2e;}
#menu.mm-menu .mm-list > li > a:hover,
#menu.mm-menu .mm-list > li.mm-selected > a {background:#e31e24; color:#fff;}
#menu.mm-menu .mm-list > li > a.mm-subopen:before {border-color:#2e2e2e;}
#menu.mm-menu .mm-list > li > a.mm-subopen:after,
#menu.mm-menu .mm-list > li > a.mm-subclose:before {border-color:#e31e24;}
#menu.mm-menu .mm-list .mm-list > li > a,
#menu.mm-menu .mm-panel .mm-list > li > a {font-size:17px; text-transform:none;}
#menu.mm-menu .mm-subtitle,
#menu.mm-menu .mm-list > li > a.mm-subclose {background:#e31e24; color:#fff; text-transform:uppercase;}
#menu.mm-menu .mm-panel           {background:#1b1b1b;}

/* --- elenco del portfolio: griglia di card ------------------------------- */
.GrigliaProgetti     {display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:22px; padding:10px 6px 30px 6px; text-align:left;}
.Progetto            {display:flex; flex-direction:column; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.12); color:#222; text-decoration:none; transition:transform .25s, box-shadow .25s;}
.Progetto:hover      {transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.18); color:#222;}
.Progetto:focus-visible {outline:3px solid #e31e24; outline-offset:3px;}
.ProgettoImg         {display:block; position:relative; aspect-ratio:16 / 10; background:#eee no-repeat center top; background-size:cover; border-bottom:1px solid #eee;}
.ProgettoTesto       {display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px 14px; flex:1;}
.ProgettoTesto .tipo {font-family:'Encode Sans Condensed', sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:#e31e24;}
.ProgettoTesto b     {font-family:'Oswald', sans-serif; font-weight:400; font-size:19px; line-height:24px; color:#111;}
.ProgettoTesto .desc {font-family:'Encode Sans Condensed', sans-serif; font-size:14px; line-height:19px; color:#555; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.ProgettoTesto .vedi {margin-top:auto; padding-top:6px; font-size:14px; color:#e31e24;}
.Progetto:hover .vedi {text-decoration:underline;}
.Progetto-archivio .ProgettoImg {filter:grayscale(100%); opacity:.75;}
.Progetto-archivio .ProgettoTesto .tipo {color:#888;}
.Progetto .badge-stato {top:8px; left:8px;}
@media (max-width: 760px) {
    .GrigliaProgetti {grid-template-columns:1fr; gap:16px; padding:6px 16px 24px 16px;}
}
html.tema-scuro .Progetto              {background:#1c1f24; color:#ddd; box-shadow:0 2px 10px rgba(0,0,0,.5);}
html.tema-scuro .ProgettoTesto b       {color:#f1f1f1;}
html.tema-scuro .ProgettoTesto .desc   {color:#aaa;}
html.tema-scuro .ProgettoImg           {border-bottom-color:#2a2d33;}