/* reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
img { max-width: 100%; display:block; height:auto; }



html { scroll-behavior: smooth; } /* smooth scroll */

/* global */
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; color: #0e1726; line-height: 1.45; }
a { color: inherit; text-decoration: none; }


    :root {

      --verde-chiaro: #87c79a;
      --beige: #f3e7d8;
      --terracotta: #c66a3a;
      --terracotta-600: #a5552e;
      --grigio-800: #2b2b2b;
      --grigio-600: #505050;
      --bianco: #ffffff;
      --radius: 12px;
      --shadow: 0 8px 24px rgba(0,0,0,0.08);
      --header-h: 76px;
    }



/* helpers */
.tc { text-align: center !important; }
.tl { text-align: left !important; }
.tr { text-align: right !important; }

.cw { color: #fff !important; }
.bw { color: #fff !important; }

.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: 10px !important; }
.mb2 { margin-bottom: 20px !important; }
.mb3 { margin-bottom: 30px !important; }
.mb4 { margin-bottom: 40px !important; }
.mb5 { margin-bottom: 50px !important; }
@media (min-width: 640px){ .mb0d { margin-bottom: 0px !important; } }
@media (min-width: 640px){ .mb1d { margin-bottom: 10px !important; } }
@media (min-width: 640px){ .mb2d { margin-bottom: 20px !important; } }
@media (min-width: 640px){ .mb3d { margin-bottom: 30px !important; } }
@media (min-width: 640px){ .mb4d { margin-bottom: 40px !important; } }
@media (max-width: 640px){ .mb0m { margin-bottom: 0px !important; } }
@media (max-width: 640px){ .mb1m { margin-bottom: 10px !important; } }
@media (max-width: 640px){ .mb2m { margin-bottom: 20px !important; } }
@media (max-width: 640px){ .mb3m { margin-bottom: 30px !important; } }
@media (max-width: 640px){ .mb4m { margin-bottom: 40px !important; } }

.mt0 { margin-top: 0 !important; }
.mt1 { margin-top: 10px !important; }
.mt2 { margin-top: 20px !important; }
.mt3 { margin-top: 30px !important; }
.mt4 { margin-top: 40px !important; }
.mt5 { margin-top: 50px !important; }
@media (min-width: 640px){ .mt0d { margin-top: 0px !important; } }
@media (min-width: 640px){ .mt1d { margin-top: 10px !important; } }
@media (min-width: 640px){ .mt2d { margin-top: 20px !important; } }
@media (min-width: 640px){ .mt3d { margin-top: 30px !important; } }
@media (min-width: 640px){ .mt4d { margin-top: 40px !important; } }
@media (max-width: 640px){ .mt0m { margin-top: 0px !important; } }
@media (max-width: 640px){ .mt1m { margin-top: 10px !important; } }
@media (max-width: 640px){ .mt2m { margin-top: 20px !important; } }
@media (max-width: 640px){ .mt3m { margin-top: 30px !important; } }
@media (max-width: 640px){ .mt4m { margin-top: 40px !important; } }



    body { margin: 0; font-family: 'Lato', Arial, Helvetica, sans-serif; color: var(--grigio-800); background: #fafafa; line-height: 1.5; }
    h1, h2, h3, .brand { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-weight: 700; letter-spacing: .2px; margin: 0 0 1rem; }


    .btn, .cta { display: inline-block; background: #e27f3c; color: var(--bianco); text-decoration: none; font-weight: 700; padding: .7rem 1.5rem; /* border-radius: 999px; */ box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: background-color 0.08s ease, transform 0.08s ease; }
    .btn:hover, .cta:hover { background-color: #c66a3a; transform: translateY(-1px); 
}



 

        .container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }



        .cta2 {
          display: inline-block;
          padding:16px 20px;
          border:1.5px solid #e27f3c;
        }




/***************************************************
  PAGE
**************************************************/        

main.page { padding: 2rem 0 4rem; }

main.page.spacer { padding-top: 140px; }

/*     .demo-card { 
        background: #f3e7d8; 
        padding: 1.25rem; 
        border-radius: 10px; 
        box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
    } */

.title1 {
    color: #44508A;
    font-size: 22px;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 
    font-weight: 700; 
    letter-spacing: .2px; 
    margin: 0 0 1rem;
}
h4, .title2 {
    color: #44508A;
    font-size: 18px;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 
    font-weight: 700; 
    letter-spacing: .2px; 
    margin: 0 0 1rem;
}


    .section {
margin: 60px auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
padding: 0;
}


.card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.card img {
width: 100%;
height: 350px;
object-fit: cover;
object-position: center -75px ;
}


.card h3 {
margin: 15px 20px 10px;
color: #2b7bb9;
}


.card p {
margin: 0 20px 20px;
color: #555;
}


.card .cta {
margin: 0 20px 20px;
padding: 8px 16px;
background: #f8b322;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}



/****************************
  HERO
****************************/

/* --- HERO HOME SLIDER --- */
.hero-home{
  position:relative;
  min-height:80vh;
  overflow:hidden;
}

.hero-home .hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
}

.hero-home .track{
  position:relative;
  width:100%;
  height:100%;
}

.hero-home .track img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition: opacity 1.2s ease;

  will-change: opacity;
}

.hero-home .track img.active{
  opacity:1;
}

@media (max-width: 768px){
  .hero-home{
    min-height: 80vh;
  }
}




    /* --- HERO --- */
    .hero { position: relative; min-height: 80vh; min-height: 80svh; isolation: isolate; overflow: clip; margin-top: -20px;  }
    .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: -2; }
    .hero::after { 
        content: ""; 
        position: absolute; 
        inset: 0; 
        background: linear-gradient(180deg, rgba(0,0,0,.035) 0%, rgba(0,0,0,.355) 100%); 
        z-index: -1; }



.hero-overlay {
  display: grid;
  place-items: start start;
  min-height: inherit;
  padding: 60px 0 0; /* invece di padding-top:100px */
}

.hero-caption {
  color: #44508A;
  width: 100%;

  
  margin-top: 100px;
  text-align: center;
}

    .hero-caption h1 { margin: 0 0 1px; font-weight: 700; letter-spacing: 0.2px; /* text-wrap: balance; */ font-size: clamp(1.6rem, 3.5vw + .5rem, 3rem); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
    .hero-caption h2 { margin: 0 auto 29px; max-width: 45ch;   text-shadow: 0 1px 2px rgba(0,0,0,.25);    }



    .btn { background: transparent; display: inline-block; padding: 19px 25px; padding: 14px 22px; font-size: 1.02rem; border-radius: 0; border: solid 2px #F69250; color: #F69250; font-weight: 700; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
    .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.22); }
    .btn:active { transform: translateY(0); box-shadow: 0 6px 18px rgba(0,0,0,.18); }

 

     .hero-caption {
          margin-top: 230px;
          color: #fff;
    }

    @media (max-width: 768px){
      .hero-caption h1 {
        margin-top: -65px;
      }
       .hero-caption h2 {
        font-size: 16.5px;
      }
    }

    .btn { background: #e27f3c; display: inline-block; padding: 19px 25px; padding: 14px 22px; font-size: 19px; border-radius: 0; border: solid 0px #F69250; color: #FFF; font-weight: 700; line-height: 1; box-shadow: 0 6px 18px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }




    /* hero responsive */
@media (max-width: 768px) {
  .hero.hero2{
    min-height: auto !important;
    margin-top: 35px;
  }
  .hero.hero2 img{
    object-position: center center !important;
  }
}



/* --- HERO ERGOTERAPIA --- */
.hero.hero-ergo{
  min-height: 90svh;
}
.hero.hero-ergo img{
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  object-position: center 60px;
}
.hero.hero-ergo h1{
  margin-top:-25px; 
  max-width: 650px; 
  text-shadow: 1px 1px 1px #000000; 
  text-transform: none;
  text-align: left;
  color: #FFF;
  margin-bottom: 10px;
}
.hero.hero-ergo h2{
  text-shadow: 1px 1px 1px #000000; 
  font-size: 24px;
  text-align: left;
  color: #FFF;
}
@media (max-width: 992px){
  .hero.hero-ergo{
    min-height: 75svh;
  }
  .hero.hero-ergo img{
    object-position: right 100px;
    object-fit: cover; 
  }
  .hero.hero-ergo h1{
    margin-top:-80px; 
    font-size: 24px;
    text-align: center;
    text-wrap: balance;
  }
  .hero.hero-ergo h2{
    font-size: 18px;
    text-align: center;
    text-wrap: balance;
  }
}


/***************************************************
  MENU
**************************************************/


    header{font-family:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Arial, sans-serif;}

    /* Header */
  .site-header { position: fixed; top: 0; left: 0; right: 0; z-index:1000;background:linear-gradient(1180deg, #2b7bb9 0%, #22689a 100%);color:#ffffff;box-shadow:0 2px 10px rgba(0,0,0,.12)}
 
      .menuT{background:transparent; box-shadow: none;}
    .header-inner{display:grid;grid-template-columns:auto 1fr auto; justify-content:space-between;align-items:center;gap:12px;min-height:120px}

.main-nav {
 /*  justify-self: center;  */ /* sposta il menu in centro SE CE CTA ICONA A DESTRA */
   justify-self: end; /* sposta il menu a destra */
}

    /* Logo */
    .logo{display:inline-flex;align-items:center;text-decoration:none}
    .logo img{height:100px;display:block}

    /* CTA */
    .btn-cta{
        max-width: 40px;
        /* color: #F8B322; */
    }
    .btn-cta-OLD {
   /*  display:hidden !important; */
      display:inline-block;color:#fff;text-decoration:none;padding:17px 1.25rem ;font-weight:700;white-space:nowrap;line-height:1;
  text-transform:uppercase;

  height: 50px;
  border-radius: 0;
  /* background: rgba(255,255,255,0.12); */
  /* background: #F69250; */
  backdrop-filter: blur(2px);
  border: solid 2px #F69250;
  color: #44508A;


  border: solid 2px #F8B322;
  /* background: #F8B322; */
  color: #F8B322;
}

    /* Nav */

    .main-nav ul:not(.sub){list-style:none;display:flex;/* gap:32px; */padding:0;margin:0}

    .main-nav a:hover, 
    .main-nav a.active,
    .main-nav span:hover, 
    .main-nav span.active   
    {opacity:1;text-decoration:none; border: solid 1.5px #F69250; /* background: #F8B322; */ }

.main-nav a , .main-nav span {


  color:#44508A;
  text-decoration:none;
  font-weight:700;
  font-weight:600;
  opacity:.95;
  text-transform:uppercase; 
  padding: 0 3px;  
  transition: all 0.25s ease;
  margin: 0 5px;

  color: #ffffff;
    height: 55px;
    display: block;
    line-height: 55px;
    padding: 0 16px; 
    letter-spacing: 0.5px;
    border: solid 1.5px #fafafa;
  }
.site-header { background: #44508A;}


   /* burger menu */ 

.burger {
  display:none;
  appearance:none;
  padding:0;
  align-items:center;
  justify-content:center;

    width: 36px;
    height: 24px;
    cursor: pointer;


	

	
	background: transparent; 
	border: none; 
}

.burger span {
    width: 100%;
    height: 4px;
    background-color:  #44508A;
    border-radius: 12px;
    display: block;
    transition: background-color 0.5s ease-in-out;
}

.burger span::before,
.burger span::after {
    content: "";
    width: 100%;
    background-color: #44508A;
    display: block;
    transition: all 0.5s ease-in-out;
    border-radius: 12px;
    height: 4px;
}
.burger span::before {
    transform: translateY(-10px);
}
.burger span::after {
    transform: translateY(10px);
    margin-top: -4px;
}
.burger.active span {
    background-color: transparent;
}
.burger.active span::before {
    transform: rotateZ(45deg) translateY(0);
}
.burger.active span::after {
    transform: rotateZ(-45deg) translateY(0);
}


 /* Mobile layout */
    @media (max-width: 860px){
      .header-inner{grid-template-columns:auto 1fr auto}
      .burger{display:inline-flex}
      .logo{justify-self:center}
      .main-nav{position:absolute;left:0;right:0;top:120px;background:linear-gradient(1180deg, #2b7bb9 0%, #22689a 100%);display:none;padding:14px 16px 18px;border-bottom:1px solid rgba(255,255,255,.15)}
      .main-nav ul{flex-direction:column;gap:12px}
      .site-header.menu-open .main-nav{display:block}

      /* .btn-cta { display: none;} */

      .logo{justify-self:left}
      .burger{justify-self:right}
    }

    /* Desktop enforcement: logo | nav | CTA  */
    @media (min-width: 861px){
      .header-inner{grid-template-columns:auto 1fr auto}
      .main-nav{display:block}
    }



.offcanvas {
  position: fixed;
  top: 120px;
  right: 0;
  width: 260px;
  height: calc(100vh - 120px);
  background: #F8B322;
  background: #fafafa;
  /* box-shadow: -4px 0 16px rgba(0,0,0,0.15); */
  /* box-shadow: inset 8px 0 10px -6px rgba(0,0,0,.12); */
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  z-index: 9999;
  padding: 10px 10px 20px 10px; /* spazio per header */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

   overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.offcanvas.is-open {
  transform: translateX(0);
}

.offcanvas-overlay {
  position: fixed;
  top: 120px !important;
  inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-out;
  z-index: 9990;
}

.offcanvas-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Menu base */
.offcanvas-menu {
  list-style: none;
  margin: 0;
  padding: 0;

  user-select: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* vecchi Edge */

}

.offcanvas-menu > li {
  margin-bottom: 10px;
}

.offcanvas a,
.submenu-toggle {
  display: block;
  width: 100%;
  padding: 8px 0 8px 10px;
  text-decoration: none;
  border: none;
  background: none;
  text-align: left;
  font-size: 16px;
  cursor: pointer;
  font: 600 16px "Poppins";
  color: #44508A;
  text-transform: uppercase;
  border: solid 1.5px #fafafa;
/*   margin-left: 10px;
  margin-right: 10px; */
  
}


.offcanvas a.active,
.offcanvas a:hover,
.submenu-toggle.active:not(.submenu),
.submenu-toggle:hover:not(.submenu li a) {
  border: solid 1.5px #F69250;
}

/* Sottovoci */
.has-submenu .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding-left: 0;
  list-style: none;
}

.has-submenu.open .submenu {
  max-height: 400px; /* abbastanza per contenere le voci */
}

.offcanvas ul li ul li a {
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
/*   margin-right: -10px; */
}

/* Piccola animazione icona testo submenu */
/* .submenu-toggle::after {
  content: "▾";
  float: right;
  font-size: 12px;
  transform: translateY(2px);
  transition: transform 0.2s ease;
}

.has-submenu.open .submenu-toggle::after {
  transform: rotate(180deg) translateY(-1px);
} */

/* Blocca scroll se menu aperto */
html.no-scroll .site-header,
body.no-scroll {
  overflow: hidden;
  padding-right: var(--scrollbar-width);
}



/* VARIANTE nuovo menu bianco */
.site-header { background: #fafafa; box-shadow:0 2px 10px rgba(0,0,0,.12)}
.main-nav a, .main-nav span {color:#44508A; }
/* .main-nav a , .main-nav span { border: 0; } */



/* dropdown menu desktop */
.has-sub{ position:relative; }

.has-sub > span{
  cursor:pointer;
  display:block;
}



.sub{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fafafa;
  min-width:200px;
  box-shadow: 0 6px 10px -4px rgba(0,0,0,.12);
  padding:8px 0;
  z-index:100;
  list-style: none;
}

.sub li a{
  display:block;
  padding:8px 14px;
  white-space:nowrap;

  font-weight: normal;
  text-transform: none;
  line-height: 1;
  height: auto;
}

.has-sub:hover .sub{
  display:block;
}


/********************************
  FOOTER
*********************************/

footer.site-footer {
  background: linear-gradient(180deg, #2b7bb9 0%, #22689a 100%);
  background: #44508A;
  color: #ffffff;
  margin-top: 1rem;
  padding-top: 3rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: auto 1.2fr 1fr 1fr 1fr;
  gap: 2rem;
}

.logo-col {
  display: flex;
  align-items: flex-start;
}
.logo-col img {
  width: 120px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
  padding-right: 1rem;
}

/* Testi */
.footer-col h6 {
  font-size: 1rem;
  text-transform: uppercase;
  opacity: .95;
  margin-bottom: .75rem;
  margin-top: 0;
}

.footer-col,
.footer-address {
  line-height: 1.7;
}

.footer-address {
  font-size: 1rem;
}

/* Link */
.footer-address a,
.footer-col a {
  color: #e8f4ff;
  text-decoration: none;
}
.footer-address a:hover,
.footer-col a:hover {
  text-decoration: underline;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}
.footer-col li {
  margin: .35rem 0;
}

/* Socials */
.socials {
  display: flex;
  gap: .75rem;
  margin-top: 1.5rem;
}
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(2px);
  transition: transform .15s ease, background .15s ease;
}
.socials a:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.22);
}
.socials svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}

.inline-icon { margin-right:  8px; }
.inline-icon path { fill: #fff; }

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 1rem;
  opacity: .95;
  margin-top: 2rem;
  background: #44508A;
}


/* Responsive */
@media (max-width: 920px) {
  .footer-inner {
    grid-template-columns: 1fr 1.2fr 1fr;
  }
  .logo-col {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .footer-bottom {
    text-align: center;
  }
  .footer-bottom span {
    display: none;
  }
}

@media (max-width: 680px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-col {
    border-top: 1px dashed rgba(255,255,255,0.25);
    padding-top: 1rem;
  }
  .footer-col:first-of-type {
    /* border-top: none; */
    padding-top: 20px;
  }
}



/* FOOTER GRIGIO  NEW */


/* ! SPOSTARE QUI DA META.PHP QUANDO HANNO DECISO */


/*******************************************************
  ERGOTERAPIA
********************************************************/


    .demo-card { 
        background: #f3e7d8; 
        padding: 1.25rem; 
        /* border-radius: 10px; */ 
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        font: 700 18px/1.2 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        color: #44508A;


            border: solid 2px #e27f3c;
    margin: 25px auto 95px;
    padding: 35px;
    text-align: center;
    background: #FFF;
    }


.ergo-section{
  display: flex;
  flex-wrap: wrap;
 /*  justify-content: center; */
  gap: 40px;
  margin: 40px -20px;
  margin: 40px 0;
}

.box {
  background: #fff;
  /* width: calc(33.33% - 40px); */
  width: calc((100% - 2 * 40px) / 3);
  /* border-radius: 10px; */
  overflow: hidden;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* primi due */
.box:nth-child(-n+2){
  /* width: calc(50% - 40px); */
  width: calc((100% - 40px) / 2);
}



.box img {
  width: 100%;
  display: block;
  height: 250px;
  object-fit: cover;
  object-position: right center;
}

.box h3 {
  margin: 15px 20px 5px;


    margin: 25px 20px 6px;
  color: #44508A;
  font-size: 17px;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
}

.box p {
  margin: 0 20px 15px;

  font-size: 14px;

  font-size: 16px;
  font-weight: 400;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  margin: 0 20px 20px;
  color: #555;
}

.box a, .box span {
  display: inline-block;
  margin-bottom: 15px;
  padding: 8px 14px;
  background: #2a7ae4;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  text-align: center;

  margin-top: 20px;
  display: block;
  width: 100%;
  padding: 12px 0;
  background: #44508A;
  background: #e27f3c;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-top: 1px solid #ddd;
  margin-bottom: 0;
  /* border-radius: 0 0 10px 10px; */

  width: calc( 100% - 30px );
  border-radius: 0px;
  margin: 20px 15px 15px;
  border: 0;

  transition: background-color 0.08s ease, transform 0.08s ease;
}


.box a:hover, .box span:hover {
  background-color: #c66a3a;
  transform: translateY(-1px);
}

/* responsive (mobile) */
@media (max-width: 600px) {
  .box,
  .box:nth-child(-n+2)  {
    width: 100%;
  }
}


/* cta */
  .xbox {
    border: solid 2px #e27f3c;
    margin: 25px auto 95px;
    padding: 35px;
    text-align: center;
    background: #FFF;
      position: relative;
  overflow: visible;
  }
  .xbox::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 1px;
  width: 40px;   /* dimensione immagine */
  height: 40px;
  background: url("../img/corner2.png") no-repeat center/contain;
  z-index: 2; /* sopra il bordo */
  pointer-events: none;
}

  .xbox p {
     margin: 0 auto;
  padding: 8px 0;
  font-size: 19px;
  line-height: 1.35;
  color: rgb(85, 85, 85);
  }



/* ergoterapia single page + home first section */
  .two-cols{
  display:flex;
  align-items:flex-start;
}

.col-fixed{
  flex: 0 0 350px;
}

.col-fixed img{
  margin-bottom: 30px;
}
.col-fixed img:first-child {
  margin-top: 20px;
}

.col-fluid{
  flex: 1;
  margin-right: 60px;
}

/* responsive */
@media (max-width: 768px){
  .two-cols{
    flex-direction: column;
  }

  .col-fixed{
    width: 100%;
  }

  .col-fluid{
    margin-right: 0;
    /* margin-top: 30px; */
  }
}


/*******************************************************
  ABOUT / CHI SIAMO
********************************************************/




#about .section .card img {

  object-position: center center;
}

.highlight {
  display: block;
  padding: 14px 100px;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1.4;
  margin: 30px 0 0;
  font-size: 20px;
  text-align: center;
  background: #fff; /* #44508A;  */
  border: solid 3px #44508A;
  color:#44508A;
}

#about .section {
  margin: 30px 0;
}

h1.title11 {
  
   color: #44508A;
    font-size: 22px;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 
    font-weight: 700; 
    letter-spacing: .2px; 
    margin: 0 0 1rem;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 1.3;
}

h2.title22  {
  color: #44508A;
  font-size: 18px;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; 
  font-weight: 700; 
  letter-spacing: .2px; 
  margin: -5px 0 1rem;
  color: #333;
  color: #e27f3c;
  

  height: 1px;
  overflow: hidden;
}

#privacy h3 {
  margin: 1.5rem 0 1rem;
}

#about p,
#privacy p,
#ergoterapia p {
  font-weight: 400;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

#privacy p a {
  text-decoration: underline;
}

/* cta ergoterpaie */
.cta-wrapper {
 /*  max-width: 520px; */
  margin: 20px 0 0;
  display: inline-block;
}

.cta-btn-full {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  background-color: #F69250;
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.08s ease, transform 0.08s ease;
}

.cta-btn-full:hover {
  background-color: #c66a3a;
  transform: translateY(-1px);
}

/* immagine */
.cta-icon {
  width: 42px;
  height: auto;
  flex-shrink: 0;
}

/* contenitore del testo (impedisce il side-by-side) */
.cta-text {
  display: flex;
  flex-direction: column;   /* <<< forza il testo su 2 righe */
}

/* linee di testo */
.cta-line-1 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: -1px;
}

.cta-line-2 {
  font-size: 20px;
  font-weight: 700;
}




#about .card {
  border-radius: 3px;
}

#about .card-img {
  position: relative;
  overflow: hidden;
}

#about .card-img img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center -40px;
  display: block;
}

#about .card-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 0
}

#about .section .cta {
  border-radius: 0;
  box-shadow: none;

  width: 85%;
  text-align: center;
  background: #e27f3c;
  transition: background-color 0.08s ease, transform 0.08s ease;
}

#about .section .cta:hover {
  transform: translateY(-1px);
  background: #c66a3a;
}


#about .section .card h3 {
margin: 25px 20px 6px;
color: #44508A;
}


#about .section .card p {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* numero di righe */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 20px;


    font-weight: 400;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}



  .stripe{
  background: #f1f5f4;  
  background: #f2f2f2;
  margin: -2rem  0 40px 0;
  padding: 50px 0 75px;
  /* border-bottom: solid 1px #ddd; */
}
.stripe p{
  /* max-width: 70ch; */
  margin: 0 auto;
  padding: 8px 0;
  /* font-weight: 700; */
  /* font-size: clamp(1.1rem, 1vw + 1rem, 1.4rem); */
  font-size: 19px;
  line-height: 1.35;
  /* text-align: center; */
  color: rgb(85, 85, 85);
}
@media (max-width: 768px) {
  .stripe p{
    font-size: 17px;
  }
}






/************************/
/************************/
/* pagine membri singoli */
/************************/
/************************/

.team-grid {
  display: grid;
  grid-template-columns: 0.75fr 2.25fr 1fr;
  gap: 30px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 35px 0 0;
}

.col-center {
     padding-right: 45px;
}

.col-center h4 {
    color: rgb(85, 85, 85);
    font-weight: 500;
    padding-top: 2px;
}

.col-center p {
    font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-weight: 400;
    color: rgb(85, 85, 85);
}
.col-center p strong {
    font-weight: 500;
}

.col-left img {
  width: 100%;
 border-radius: 16px;
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px 2px;
 /*  border: solid 2px #e27f3c;
  padding: 10px; */
  
  
  margin-top: 48px;
  margin-bottom: 10px;
 
}
@media (max-width: 768px) {
  .col-left img {
    margin-top: 0px;
  }
}

/* .col-left h2 {
  margin: 10px 0 5px;
} */

.col-right h3 a {
  color: #44508A;
  text-decoration: none;
}

.col-right ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.col-right ul li {
      padding: 8px 0;
}

.col-right ul li a {
  text-decoration: none;
  color: rgb(85, 85, 85);
  font-weight: 400;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

}

.col-right ul li a.active {

  color: #e27f3c;
  font-weight: 500;
}

.back-link {
  font-weight: normal !important;
}


@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

/*   .col-left   { order: 1; }  /* immagine */
/*  .col-center { order: 2; }  /* testo */
 /* .col-right  { order: 3; }  /* menu */ 



  .col-center { display: contents; } /* fa sì che intro e bio contino come elementi diretti */

  .intro { order: 1; text-align: center; margin-top: -12px; }
  .col-left { order: 2; }
  .bio { order: 3; }
  .col-right { order: 4; }
}