.hero-sectioncontal {
     position: relative;
     width: 100%;
     height: 500px;
     background-image: url(../images/legal/fondo-legal-privacidad.png);
     background-size: contain;
     background-repeat: no-repeat;
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     aspect-ratio: 16 / 9;
     background-position: center center;
     padding: 0px;
     border-radius: 0px;
 }

 .hero-sectioncontal1 {
     position: relative;
     width: 100%;
     height: 500px;
     background-image: url(../images/legal/fondo-legal-terminosycodiciones.png);
     background-size: contain;
     background-repeat: no-repeat;
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     aspect-ratio: 16 / 9;
     background-position: center center;
     padding: 0px;
     border-radius: 0px;
 }

 .hero-sectionl-movil {
     position: static;
     width: 100%;
     background: no-repeat;
     background-image: url(../images/legal/movil-fondo-legal-privacidad.png);
     background-position: center;
     display: flex;
     align-items: center;
     box-sizing: border-box;
     border-radius: 10px;
 }

 .hero-sectionl-movil1 {
     position: static;
     width: 100%;
     background: no-repeat;
     background-image: url(../images/legal/movil-fondo-legal-terminosycodiciones.png);
     background-position: center;
     display: flex;
     align-items: center;
     box-sizing: border-box;
     border-radius: 10px;
 }

 .hero-fullscreen {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-size: contain;
     /*height: 100vh;*/
     /*padding: 0 0 0 100px;*/
 }

 .button.is-primary.is-rounded-custom {
     border-radius: 9999px;
     padding-left: 1.5em;
     padding-right: 1.5em;
 }


 .expandable-header-legal {
     display: flex;
     align-items: center;
     padding: 0.5rem;
     background-color: white;
     cursor: pointer;
     position: relative;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s;
     border-radius: 15px;
     border: 1px solid #2A52F320;
     background-color: #00098105;
 }

 .legal {
     font-family: "NexaXBold", sans-serif;
     font-size: 1.3rem;
     color: #000981;
 }

 .expandable-section.is-active .expandable-header .legal {
     color: white;
 }

 .expandable-section.is-active .expandable-header-legal .legal {
     color: white;
 }

 .expandable-section:not(.is-active):hover .expandable-header .legal {
     color: white;
 }

 .expandable-section:not(.is-active):hover .expandable-header-legal {
     color: white;
 }

 .servicio-card-legal {
     background-color: ##00098105;
     border: 1px solid #2a52f320;
     border-radius: 8px;
     padding: 15px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     min-height: 120px;
     font-family: "NexaBook", sans-serif;
     color: #000981;
 }

 .expandable-section {

     border-radius: 10px;
     margin-bottom: 0px;
     overflow: hidden;
     transition: all 0.3s ease-in-out;
 }

 .expandable-header {
     display: flex;
     align-items: center;
     padding-top: 0.5rem;
     padding-right: 1.5rem;
     padding-bottom: 0.5rem;
     padding-left: 0.5rem;
     background-color: white;
     cursor: pointer;
     position: relative;
     transition: background-color 0.3s, color 0.3s, border-color 0.3s;
     border-radius: 15px;
     border: 1px solid #2A52F3;
 }

 .expandable-section:not(.is-active):hover {
     border-color: transparent;

 }

 .expandable-section:not(.is-active):hover .expandable-header {
     background-color: #000981;
     color: white;
 }

 .expandable-section:not(.is-active):hover .expandable-header .componentes,
 .expandable-section:not(.is-active):hover .expandable-header .componentest {
     color: white;
 }

 .expandable-section:not(.is-active):hover .expandable-header .icon-wrapper {
     background-color: rgba(255, 255, 255, 1);
     border-color: white;
 }

 .expandable-section:not(.is-active):hover .expandable-header .icon-wrapper img {}

 .expandable-section:not(.is-active):hover .expandable-header .arrow-icon-wrapper {
     background-color: white;
 }

 .expandable-section:not(.is-active):hover .expandable-header .arrow-icon-wrapper svg {
     fill: #209CEE;
 }

 .expandable-section.is-active .expandable-header {
     background-color: #000981;
     color: white;
     border-bottom: 0px solid #dbdbdb;
 }

 .expandable-section.is-active .expandable-header-legal {
     background-color: #000981;
     color: white;
     border-bottom: 0px solid #dbdbdb;
 }

 .expandable-section.is-active .expandable-header .componentes,
 .expandable-section.is-active .expandable-header .componentest {
     color: white;
 }

 .expandable-section.is-active .expandable-header .icon-wrapper {
     background-color: white;
     border-color: white;
 }

 .expandable-section.is-active .expandable-header .icon-wrapper img {}

 .expandable-section.is-active .expandable-header .arrow-icon-wrapper {
     background-color: white;
 }

 .expandable-section.is-active .expandable-header .arrow-icon-wrapper svg {
     fill: #2A52F3;
     transform: rotate(90deg);
 }

 .expandable-section.is-active .expandable-content {
     max-height: 3000px;
     opacity: 1;
     visibility: visible;
     padding-bottom: 1.5rem;
     padding-top: 0.5rem;
     border-top: 0px solid #dbdbdb;
 }

 .expandable-content {
     max-height: 0;
     opacity: 0;
     visibility: hidden;
     transition: max-height 0.6s ease-in-out, opacity 0.5s ease-out, visibility 0.5s;
     padding: 0 1.5rem;
     background-color: white;
     border-top: 0px solid transparent;
 }

 .expandable-content .columns {
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
 }

 .expandable-content .column {
     padding: 0.75rem;
 }

 .expandable-content .inner-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     padding: 0;
     border-radius: 15px;
     background-color: #fbfbfb;
     border: 0px solid #e0e0e0;
     transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
     height: 100%;
     overflow: hidden;
 }

 .expandable-content .inner-item:hover {
     background-color: #2A52F3;
     color: white;
     transform: translateY(-3px);
 }

 .expandable-content .inner-item .item-image-container {
     position: relative;
     width: 100%;
     height: 25vh;
     border-radius: 15px;
     overflow: hidden;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
 }

 .expandable-content .inner-item .item-title {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 90%;
     padding: 0.5rem 0.5rem;
     font-size: 1rem;
     color: #FFF;
     background-color: #000981;
     border-radius: 10px 10px 0 0;
     font-family: "NexaBlack", sans-serif;
     text-transform: uppercase;
     text-align: center;
     z-index: 5;
     transition: opacity 0.3s ease-in-out;
 }

 .expandable-content .inner-item .hover-overlay {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     font-size: 0.9rem;
     opacity: 0;
     z-index: 10;
     flex-direction: column;
     font-family: "NexaBlack", sans-serif;
     background: linear-gradient(0deg, rgba(0, 9, 129, 0.8) 0%, rgba(42, 82, 243, 0.4) 100%);
     padding: 1rem;
     transition: opacity 0.3s ease-in-out;
     border-radius: 15px;
 }

 .expandable-content .inner-item .hover-title {
     font-family: "NexaBlack", sans-serif;
     font-size: 1.2rem;
     margin-bottom: 0.5rem;
     text-transform: uppercase;
 }

 .expandable-content .inner-item .hover-text {
     font-family: "NexaBook", sans-serif;
     font-size: 0.95rem;
     line-height: 1.3;
     margin: 0;
     max-width: 90%;
 }

 .expandable-content .inner-item:hover .hover-overlay {
     opacity: 1;
 }

 .expandable-content .inner-item:hover .item-title {
     opacity: 0;
 }

 .expandable-section.is-active .expandable-header {
     background-color: #000981;
     color: white;
     border-bottom: 0px solid #dbdbdb;
 }

 .expandable-section.is-active .expandable-header .componentes,
 .expandable-section.is-active .expandable-header .componentest {
     color: white;
 }

 .expandable-section.is-active .expandable-header .icon-wrapper {
     background-color: rgb(255, 255, 255);
     border-color: #000981;
 }

 .expandable-section.is-active .expandable-header .icon-wrapper img {}

 .expandable-section.is-active .expandable-header .arrow-icon-wrapper {
     background-color: white;
 }

 .expandable-section.is-active .expandable-header .arrow-icon-wrapper svg {
     fill: #2A52F3;
     transform: rotate(90deg);
 }



 .expandable-section:hover {
     border-color: transparent;
 }


 .buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-start;
    flex-direction: column;
}

 @media (max-width: 768px) {

     .legal {
         font-family: "NexaXBold", sans-serif !important;
         font-size: 1rem !important;
         color: #000981;
         text-align: center;
         padding: 0.4rem 0 0 0 !important;
     }

     .subtitle2 {
         color: #000981;
         font-family: "NexaBook", sans-serif;
         font-size: 1rem;

     }

     .expandable-section.is-active .expandable-content {
         max-height: 3500px;
         opacity: 1;
         visibility: visible;
         padding-bottom: 1.5rem;
         padding-top: 0.5rem;
         border-top: 0px solid #dbdbdb;
     }

     .section {
         padding-top: 3rem;
         padding-bottom: 3rem !important;
         padding-left: 0rem !important;
         padding-right: 0rem !important;
     }

     .title2 {
         color: #000981;
         font-family: "NexaBook", sans-serif;
         font-size: 1.2rem;

     }

     .button.is-primary.is-rounded-custom {
        border-radius: 9999px;
        padding-left: 1.5em;
        padding-right: 1.5em;
        align-items: center;
        flex: auto;
     }

     .buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-start;

    }

 }