/*commons*/
 a {
     transition: transform .5s !important;
 }

 a:hover {
     transform: translate(0, -2px);
 }

 :root {
     --cream: #FDFAF5;
     --sand: #F7F3ED;
     --teal: #28AEA4;
     --yellow: #FFD91F;
     --black: #1A1A1A;
     --gray: #555555;
     --light-gray: #F7F3ED;
 }

 .linkurl {
     color: var(--teal);
     font-weight: bold;
 }

 .sauton-pnei-page .row {
     max-width: 1400px !important;
 }

 /* HERO Section */
 .heropnei {
     position: relative;
     padding: 80px 60px;
     background: var(--cream);
     text-align: center;
 }

 .heropnei h1 {
     font-size: 44px;
     line-height: 1.2;
     color: var(--black);
     margin-bottom: 20px;
 }

 .hero-subtitle {
     font-size: 18px;
     margin: 0 auto;
 }

 /* COS'È LA PNEI Section */
 .cose-pnei {
     position: relative;
     padding: 80px 60px;
     background: white;
 }

 .section-title {
     font-size: 32px;
     color: var(--black);
     margin-bottom: 10px;
     text-align: center;
 }

 .pnei-intro {
     margin: 0 auto;
     text-align: center;
     font-size: 18px;
 }

 .pnei-intro p {
     margin-bottom: 15px;
 }

 .pnei-intro strong {
     color: var(--black);
 }

 .highlight-box {
     background: var(--sand);
     border-left: 4px solid var(--teal);
     padding: 25px 30px;
     margin: 40px auto 0;
     font-style: italic;
     text-align: left;
 }


 /* I 4 SISTEMI Section */
 .sistemi {
     position: relative;
     padding: 80px 60px;
     background: var(--sand);
 }

 .sistemi-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 30px;
     margin: 40px auto 0;
 }

 .sistema-card {
     background: white;
     padding: 30px;
     border-radius: 12px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }

 .sistema-header {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 15px;
 }

 .sistema-icon {
     width: 50px;
     height: 50px;
     background: var(--white);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     border: 1px solid var(--teal);
 }

 .sistema-card h3 {
     color: var(--teal);
     font-size: 16px;
 }

 .sistema-card h3 span {
     display: block;
     font-size: 12px;
     color: var(--gray);
     font-weight: normal;
     margin-top: 2px;
 }

 .sistema-card p {
     font-size: 16px;
     margin: 0;
 }

 .sistemi-connessione {
     text-align: center;
     margin-top: 30px;
     color: var(--gray);
     font-size: 14px;
 }

 .sistemi-connessione span {
     display: inline-block;
     padding: 8px 20px;
     background: var(--teal);
     color: white;
     border-radius: 20px;
     font-weight: 600;
     font-size: 22px;
 }

 /* EVIDENZE Section */
 .evidenze {
     position: relative;
     padding: 80px 60px;
     background: white;
 }

 .evidenze-intro {
     margin: 0 auto 40px;
     text-align: center;
     font-size: 18px;
 }

 .evidenze-list {
     max-width: 800px;
     margin: 0 auto;
 }

 .evidenza-item {
     padding: 25px 0;
     border-bottom: 1px solid #eee;
 }

 .evidenza-item:last-child {
     border-bottom: none;
 }

 .evidenza-item h4 {
     color: var(--black);
     font-size: 22px;
     margin-bottom: 10px;
     font-weight: bold;
 }

 .evidenza-item p {
     font-size: 16px;
     margin: 0;
 }

 .evidenze-link {
     text-align: center;
     margin-top: 30px;
 }

 .evidenze-link a {
     color: var(--teal);
     font-weight: 600;
     text-decoration: none;
 }

 .fonti-box {
     display: flex;
     align-items: center;
     gap: 15px;
     background: var(--sand);
     border: 2px solid var(--teal);
     border-radius: 12px;
     padding: 20px 30px;
 }

 .fonti-icon {
     font-size: 28px;
 }

 .fonti-text {
     text-align: left;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
 }

 .fonti-text strong {
     display: block;
     color: var(--black);
     font-size: 22px;
     font-family: 'Montserrat', sans-serif;
 }

 .fonti-text a {
     font-size: 15px;
 }

 /* DUE MONDI Section */
 .due-mondi {
     position: relative;
     padding: 80px 60px;
     background: var(--sand);
 }

 .mondi-container {
     display: flex;
     gap: 40px;
     margin: 40px auto 0;
     align-items: stretch;
 }

 .mondo-card {
     flex: 1;
     background: white;
     padding: 30px;
     border-radius: 12px;
 }

 .mondo-card h3 {
     color: var(--teal);
     font-size: 18px;
     margin-bottom: 20px;
     text-align: center;
     padding-bottom: 15px;
     border-bottom: 2px solid var(--sand);
     font-weight: bold;
 }

 .mondo-card ul {
     list-style: none;
 }

 .mondo-card li {
     padding: 10px 0;
     font-size: 16px;
     padding-left: 25px;
     position: relative;
 }

 .mondo-card li:before {
     content: "•";
     color: var(--teal);
     font-size: 55px;
     position: absolute;
     left: 0;
     top: 5px;
 }

 .mondi-centro {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .mondi-centro span {
     width: 60px;
     height: 60px;
     background: var(--teal);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 24px;
 }

 .conclusione {
     margin: 40px auto 0;
     text-align: center;
     font-size: 16px;
     color: #444;
 }

 .conclusione p {
     font-size: 18px;
 }

 .conclusione strong {
     color: var(--black);
 }

 /* DALLA TEORIA ALLA PRATICA Section */
 .pratica {
     position: relative;
     padding: 80px 60px;
     background: white;
 }

 .pratica-intro {
     margin: 0 auto 40px;
     text-align: center;
     font-size: 18px;
 }

 .pratica-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 40px;
     margin: 0 auto;
 }

 .pratica-colonna h4 {
     color: var(--teal);
     font-size: 24px;
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 2px solid var(--teal);
     font-weight: bold;
 }

 .pratica-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 15px;
 }

 .pratica-item a {
     font-size: 16px;
 }

 .pratica-item .check {
     color: var(--teal);
     font-weight: bold;
     font-size: 18px;
 }

 .pratica-item strong {
     color: var(--black);
 }

 .per-chi {
     display: block;
     margin-top: 6px;
     font-size: 12px;
     color: var(--teal);
     font-style: italic;
 }


 .pratica-item div {
     font-family: 'Montserrat', sans-serif;
     font-size: 16px;
 }

 /* ===== CTA FINALE ===== */
 .cta-finale {
     position: relative;
     padding: 80px 60px;
     background: var(--teal);
     text-align: center;
 }

 .cta-finale h2 {
     color: white;
     font-size: 42px;
 }

 .cta-finale p {
     color: #fff;
     font-size: 20px;
 }

 .hero-ctas {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .hero-ctas .btn-primary {
     background: var(--teal) !important;
     color: white !important;
     padding: 14px 18px !important;
     border: none !important;
     border-radius: 8px !important;
     font-size: 16px !important;
     font-weight: 700 !important;
     cursor: pointer !important;
     border: 2px solid var(--teal) !important;
 }

 .hero-ctas .btn-secondary {
     background: transparent !important;
     color: #27aea4 !important;
     padding: 14px 18px !important;
     border: 2px solid #27aea4 !important;
     border-radius: 8px !important;
     font-size: 16px !important;
     font-weight: 700 !important;
     cursor: pointer;
 }

 .cta-finale .btn-primary {
     background: var(--yellow) !important;
     color: black !important;
 }

 .cta-finale .btn-secondary {
     background: transparent !important;
     color: white !important;
     border-color: rgba(255, 255, 255, 0.45) !important;
 }

 section.cta-finale .hero-ctas {
     justify-content: center;
 }

 img.fontiimg {
     max-width: 60px;
 }

 img.mondiimg {
     display: inline-block;
     max-width: 40px;
 }


 @media only screen and (max-width: 1024px) {
     .sauton-pnei-page .row .columns.medium-9 {
         width: 100%;
     }
 }

 @media only screen and (max-width: 768px) {

     .due-mondi,
     .pratica {
         padding: 80px 0;
     }

     .mondi-container {
         gap: 0;
     }
 }

 @media only screen and (max-width: 639px) {
     .sauton-pnei-page .row .columns.medium-9 {
         width: 100%;
     }

     section.heropnei {
         padding: 2em 0;
     }

     .heropnei h1 {
         font-size: 33px;
     }

     .hero-subtitle,
     .pnei-intro p,
     p.highlight-box,
     p.evidenze-intro,
     .conclusione p,
     p.pratica-intro {
         font-size: 16px;
     }

     section.cose-pnei {
         padding: 2em 0;
     }

     .pnei-intro {
         text-align: left;
     }


     section.cose-pnei h2 {
         text-align: left;
     }

     h2.section-title {
         font-size: 28px;
     }

     section.sistemi {
         padding: 2em 0;
     }

     .sistemi-grid {
         grid-template-columns: repeat(1, 1fr);
     }

     section.evidenze {
         padding: 2em 0;
     }


     .fonti-text {
         display: block;
         text-align: center;
     }

     section.due-mondi,
     section.pratica {
         padding: 2em 0;
     }

     .mondi-container {
         display: block;
     }

     .mondi-centro {
         margin: 20px 0;
     }

     .pratica-grid {
         grid-template-columns: repeat(1, 1fr);
     }

     section.cta-finale {
         padding: 2em 0;
     }

     section.cta-finale h2 {
         font-size: 25px;
     }

     section.cta-finale p {
         font-size: 16px;
     }

     section.cta-finale .hero-ctas {
         display: block;
     }

     section.cta-finale .hero-ctas a {
         width: 100%;
         display: block;
         margin: 10px 0;
     }

     img.mondiimg {
         display: block;
         max-width: 60px;
         margin: 0 auto;
     }

     .fonti-box {
         display: block;
     }
 }