/* slide 4 */

    section.third-slide {
        background-color: var(--secondary);
    }

   .third.t-section {
        width: 100%;
        max-width: 100vw;
        align-items: center;
    }

    .T-Shape-Wrapper{
        position: absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width: 500px;
        height: 500px;
    }

    /* T centrale */
    .third.T-shapeHorizontal{
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        margin: 0 auto;      /* centra orizzontalmente */
        width: 100%;
        height: 30%;
        background: var(--t);
        z-index: 1;
        transform: translateY(-1000px);
        opacity: 0;
        transition: width  1.5s ease-in-out , left  1.5s ease-in-out,height  1.5s ease-in-out;
        transition-delay: 0s;
    }

    .third.T-shapeVertical{
        position: absolute;
        bottom: 6%;
        left: 50%;
        transform: translateX(-50%) translateY(1000px);
        min-width: 30%;
        min-height: 70%;
        background: var(--t);
        z-index: 1;
        opacity: 0  ;
        top: 30%;
    }   
    .third.T-shapeHorizontal.hidden,
    .third.T-shapeVertical.hidden {
       opacity: 0 !important;
    }

    .third.T-shapeHorizontal
     {
        z-index: 1;
        top:0;
    }
    .third.T-shapeVertical {
        z-index: 1;
        /* top:0; */
    }
    .plus-btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: none;
        background: #ffffff;
        display: block;
        position: absolute;
        cursor: pointer;
        padding: 0;
        z-index: 55;
        animation: pulse 1600ms infinite;
    }

    /* linee del + */
    .plus-btn::before,
    .plus-btn::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background: #004040;   /* colore del + */
        transform: translate(-50%, -50%);
    }
    /* linea verticale */
    .plus-btn::before {
        width: 2px;            /* spessore sottile */
        height: 50%;           /* lunghezza linea */
    }

    /* linea orizzontale */
    .plus-btn::after {
        width: 50%;
        height: 2px;
    }

    #btnPlus1{
        opacity: 0;
        right: -30px;
        top:50%; /*35%*/
        transform: translateY(-50%);
    }

    #btnPlus1.hidden,
    #btnPlus2.hidden{
        opacity: 0 !important;
    }

    #btnPlus2{
        opacity: 0;
        right: -30px;
        top:45%; /*35.5*/
        transform: translateY(-50%);
    }

    /* pill bianche */
    .pill{
        position: absolute;
        padding: 26px 40px;
        background: #fff;
        color: #0D312B;
        border-radius: 9999px;
        box-shadow: 0 16px 32px rgba(0, 0, 0, .16);
        width: 423px; /* auto */
        z-index: 2;
        
    }
    .pill1{
        top: 5%;
        left: -114%;
        opacity: 0;
    }
    .pill2{
        top: 51%;
        left: -114%;
        opacity: 0;
    }
    .pill-text{
        display:flex;
        flex-direction:column;
        line-height:1.2;
        text-align: center;
        color: var(--dot-ring);
    }

    .pill .k{
        font-weight:600;
        opacity:.7;
        font-size:.98rem;
    }

    .pill .v{
        font-weight:900;
        font-size:1.06rem;
        letter-spacing:.2px;
    }


    .pill.hidden{
        display: none ;
    }


    /* connettore fuori dal bordo destro */
    .connector{
        position:absolute;
        top:50%;
        left:100%;
        transform:translateY(-50%);
        width:209px;
        height:30px;        /* coerente col viewBox */
        overflow:visible;
        z-index:110;
        opacity: 1;
    }

    .connector line{
        stroke:#DDE6E1;
        stroke-width:2;
        stroke-linecap:round;
    }

    .connector .dot{
        fill:#fff;
        stroke:#0B2A24;
        stroke-width:7;
    }
    .connector .dot-outer{
        fill: var(--t);     /* stesso verde della T, come “buco” */
        stroke:#ffffff;     /* bordo bianco */
        stroke-width:11.5;
    }

    .connector .dot-core{
        fill:#fff;
    }

    .pill1 .connector{
        width: 0; /* 110px; */
     }

    .pill2 .connector{
        width: 0 ;/* 460px;  */
    }
    
    .inside-text{
        display: block;
        position: relative;
        font-size: 1.2rem;
        color: #fff;
        background-color: var(--opacgreen);
        z-index: 15;
        display: block;
        overflow: hidden;
        padding-left: 2%;
        padding-right: 2%;
        text-align: justify;
        font-weight: normal;
        transition: opacity 1.5s ease-in-out,height 1.5s ease-in-out, width  1.5s ease-in-out , left  1.5s ease-in-out;;
        z-index: 56;
        opacity: 0;
    }
    .inside-text-big{
        font-size: 1.3rem;
        color:#fff;
    }

    /* horizontal */
    .horizontal-text-wrapper{
        display: block;  
        position: relative;
        width: 100%;
        top: 0;
        border-top: 80px solid var(--primary);
        border-left: 0px solid var(--primary);
        border-right: 0px solid var(--primary);
        border-bottom: 80px solid var(--primary);
        transition: width  1.5s ease-in-out , left  1.5s ease-in-out,height  1.5s ease-in-out;
        pointer-events: none;
        opacity: 1;
        height: 0;
        opacity: 1;
        background-color: var(--primary);
        overflow: hidden;
        /* left: 50%; */
    }
    .horizontal-text-wrapper.active {
        pointer-events: all;
        width: 100%;
        height: 370px;
        max-height: 370px;
        overflow: hidden;
        /* left: -50%;
        transform: translateX(50%); */
    }
    .third.T-shapeHorizontal.active{
        width: 170%;
        transition: width 1.2s ease-in-out, left 1.3s ease-in-out, height 1s ease-in-out;
        height: fit-content;
        left: -35%;
    }
    #horizontal-text.active{
        display: block;
        opacity: 1;
    } 

    .third.T-shapeHorizontal.active-vert{
        width: 1300px;
        left: -400px;
        transition: width 1.2s ease-in-out, left 1.3s ease-in-out, height 1s ease-in-out ;
        transition-delay: 0s;
    }
      

    /* vertical */
    .vertical-text-wrapper{
        display: block;
        position: relative;
        top: 0px;
        /* left:20%;  */
        width: 0;
        border-top: 9px solid var(--primary);
        
        border-bottom: 0px solid var(--primary);
        transition: width  1.3s ease-in-out ,height  2.5s ease-in-out ;
        /* transition: width  1.3s ease-in-out , left  1.5s ease-in-out, top  1.5s ease-in-out, height  1.5s ease-in-out; */
        pointer-events: none;
        height: 0;
        opacity: 1;
        background-color: var(--primary);
        left: 0;
        overflow: hidden;
    }
    .vertical-text-wrapper.active{
        pointer-events: all;
        height: 530px;
        max-height: 393px;
        width: 800px;
        z-index: 77;
        left: 0;
        overflow: hidden;
        bottom:0;
        border-left: 60px solid var(--primary);
        border-right: 60px solid var(--primary);
    }
    .third.T-shapeVertical.active{
        width: fit-content;
        transition: width  1.2s ease-in-out, left 1.3s ease-in-out, height 1s ease-in-out ;
        /* left: -50%;
        transform: translateX(-50%); */
        height: fit-content;
        
    }
    #vertical-text.active{
        display: block;
        opacity: 1;
    } 

    


    .btnClose {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: none;
        background: #ffffff;
        display: none;
        position: fixed;
        cursor: pointer;
        padding: 0;
        transform: rotate(45deg);
        cursor: pointer;
        z-index: 15;
    }

    .btnClose.active{
        display: block;
    }

    /* linee del + */
    .btnClose::before,
    .btnClose::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        background: #004040;   /* colore del + */
        transform: translate(-50%, -50%);
    }
    /* linea verticale */
    .btnClose::before {
        width: 2px;            /* spessore sottile */
        height: 50%;           /* lunghezza linea */
    }

    /* linea orizzontale */
    .btnClose::after {
        width: 50%;
        height: 2px;
    }

    .close-vertical{
        right: -2%;
        top: 5%;
    }
    .close-horizontal{
        right: -2%;
        top: 4%;
        z-index: 57;
    }


    




/* slide 4 */

    section.fourth-slide {
        background-color: var(--primary);
    }

   .fourth.t-section {
        width: 100%;
        max-width: 100vw;
        align-items: center;
    }

    .T-Shape-Wrapper-inverse{
        position: absolute;
        top:50%;
        left:30%;
        transform:translate(-50%,-50%);
        width: 500px;
        height: 500px;
    }

    /* T centrale */
    .fourth.T-shapeHorizontal-inverse{
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        margin: 0 auto;      /* centra orizzontalmente */
        width: 100%;
        height: 30%;
        background: var(--tdark);
        z-index: 1;
        transform: translateY(-1000px);
        opacity: 0;
        transition: width  1.5s ease-in-out , left  1.5s ease-in-out,height  1.5s ease-in-out;
    }

    .fourth.T-shapeVertical-inverse{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(1000px);
        min-width: 30%;
        min-height: 70%;
        background: var(--tdark);
        z-index: 1;
        opacity: 0  ;
    }   
    .fourth.T-shapeHorizontal-inverse.hidden,
    .fourth.T-shapeVertical-inverse.hidden {
       opacity: 0 !important;
    }



    .fourth.T-shapeHorizontal-inverse,
    .fourth.T-shapeVertical-inverse {
        z-index: 1;
        top:0;
    }

    /* pill bianche */
    .pill-inverse{
        position: absolute;
        padding: 26px 40px;
        background: #fff;
        color: #0D312B;
        border-radius: 9999px;
        /* box-shadow: 0 16px 32px rgba(0, 0, 0, .16); */
        width:  80%;
        z-index: 2;
    }
    .pill1-inverse{
        top: 8%;
        left: 144%;
        opacity: 0;
    }
    .pill2-inverse{
        top: 54.5%;
        left: 144%;
        opacity: 0;
    }
    .pill-text-inverse{
        display:flex;
        flex-direction:column;
        line-height:1.2;
        text-align: center;
        color: var(--dot-ring);
    }

    .pill-inverse   .k{
        font-weight:600;
        opacity:.7;
        font-size:.98rem;
    }

    .pill-inverse .v{
        font-weight:900;
        font-size:1.06rem;
        letter-spacing:.2px;
    }


    .pill-inverse.hidden{
        display: none ;
    }


    /* connettore fuori dal bordo destro */
    .connector-inverse{
        position:absolute;
        top:50%;
        right:100%;
        transform:translateY(-50%);
        /* width:209px; */
        height:30px;        /* coerente col viewBox */
        overflow:visible;
        z-index:110;
        opacity: 1;
        width: 0; /* Usa la width piena del viewBox */
        transform-origin: right center; /* Ancoraggio a destra */
        /* scale-x: 0; Stato iniziale nascosto */
    }

    .connector-inverse line{
        stroke:#DDE6E1;
        stroke-width:2;
        stroke-linecap:round;
    }

    .connector-inverse .dot{
        fill:#fff;
        stroke:#0B2A24;
        stroke-width:7;
    }
    .connector-inverse .dot-outer{
        fill: var(--t);     /* stesso verde della T, come “buco” */
        stroke:#000000;     /* bordo bianco */
        stroke-width:11.5;
    }
    .connector-inverse .dot-inner{
        fill: var(--primary);     /* stesso verde della T, come “buco” */
        /* stroke:#ffffff;      */
    }
    .connector-inverse .dot-core{
        fill:#fff;
    }

    .pill1-inverse .connector-inverse{
        width: 0;
    }

    .pill2-inverse .connector-inverse{
        width: 0;
    }
    

    .pill-inverse:hover {
        background-color: var(--tdark);
        color: #ffffff;
    } 
    .pill-inverse:hover .v {
        background-color: var(--tdark);
        color: #ffffff;
    }


.rows {
    width: 60%;
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}
.row-mask {
  overflow: hidden;
  width: 100%;
  height: 45px;
}

.row-mask img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* non taglia, lascia eventualmente spazio vuoto */
  object-position: center; /* centrata nel box */
  transform: translateY(100%);
  opacity: 0;
  /* transition: all 1s ease; */
}

/* stato visibile dopo trigger JS */
/* .row-mask.reveal img {
  transform: translateY(0);
  opacity: 1;
} */