.on-dark{
  --btn-color: var(--seventColor);
  --btn-hover-color: var(--thirdColor);
    --btn-underline-color: var(--thirdColor);
    --btn-back-color: var(--thirdColor);
    --btn-back-hover-color: var(--thirdColor);
}
.on-light{
  --btn-color: var(--nineColor);
  --btn-hover-color: var(--fourthColor);
    --btn-underline-color: var(--fourthColor);
    --btn-back-color: var(--thirdColor);
    --btn-back-hover-color: var(--seventColor);
}
.on-btn-set-1{
  --btn-color: var(--nineColor);
  --btn-hover-color: var(--secondColor);
    --btn-underline-color: var(--secondColor);
    --btn-back-color: var(--seventColor);
    --btn-back-hover-color: var(--seventColor);
}
.on-btn-set-2{
  --btn-color: var(--secondColor);
  --btn-hover-color: var(--seventColor);
    --btn-underline-color: var(--seventColor);
    --btn-back-color: var(--seventColor);
    --btn-back-hover-color: var(--secondColor);
}
.on-btn-set-3{
  --btn-color: var(--secondColor);
  --btn-hover-color: var(--seventColor);
    --btn-underline-color: var(--seventColor);
    --btn-back-color: var(--seventColor);
    --btn-back-hover-color: var(--sixthColor);
}
.on-btn-set-4{
  --btn-color: var(--seventColor);
  --btn-hover-color: var(--seventColor);
    --btn-underline-color: var(--seventColor);
    --btn-back-color: var(--sixthColor);
    --btn-back-hover-color: var(--secondColor);
}
.on-btn-set-5{
  --btn-color: var(--seventColor);
  --btn-hover-color: var(--seventColor);
    --btn-underline-color: var(--seventColor);
    --btn-back-color: var(--secondColor);
    --btn-back-hover-color: var(--fourthColor);
}
.label-lateral-right {
    display: inline-block;
    border-top-left-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    font-size: 1.5rem;
    font-weight: 900;
    padding-left: 1em;
    padding-right: 2em;
    height: 2em;
    line-height: 2em;
}
.label-lateral-right .icon-arrow{
    rotate: 180deg;
    margin-right: 5px;
    transition: margin-right 220ms ease;
}
.label-lateral-right:hover .icon-arrow,
.label-lateral-right:focus-visible .icon-arrow{
    margin-right: 25px;
}
.button-text-simple{
    position: relative;
    width: fit-content;
    font-size: 1.5rem;
    font-weight: 300;
    cursor: pointer;
    color: var(--btn-color, currentColor);
    transition: color 220ms ease;
    font-family: "neo-sans", sans-serif;
}

.button-text-simple:hover,
.button-text-simple:focus-visible{
  color: var(--btn-hover-color, var(--btn-color, currentColor));
}

.button-text-simple.is-sub::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;          /* ajustá según font */
  width: 100%;
  height: 2px;

  background: var(--btn-underline-color, currentColor);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.button-text-simple.is-sub:hover::after,
.button-text-simple.is-sub:focus-visible::after{
  transform: scaleX(1);
}
.button-text-simple.is-sub .icon-arrow{
    margin-left: 5px;
    transition: margin-left 220ms ease;
}
.button-text-simple.is-sub:hover .icon-arrow,
.button-text-simple.is-sub:focus-visible .icon-arrow{
    margin-left: 25px;
}

.button-text-simple.is-label{
    transition: background-color 220ms ease;
}
.button-text-simple.is-label:hover,
.button-text-simple.is-label:focus-visible{
  background-color: var(--mainColor) !important;
}


.button-simple{
    color: var(--btn-color, currentColor);
    transition: color 220ms ease,
                background-color 290ms ease,
                transform 320ms ease;
    background-color: var(--btn-back-color, currentColor);
    cursor: pointer;
}

.button-simple:hover,
.button-simple:focus-visible{
  color: var(--btn-hover-color, var(--btn-color, currentColor)) !important;
  background-color: var(--btn-back-hover-color, var(--btn-back-color, currentColor)) !important;
    filter: url(#chromatic-aberration);
    will-change: filter;
}
.button-simple.add-move-left:hover,
.button-simple.add-move-left:focus-visible{
  transform: translateX(-20px);
}
.button-simple.add-move-right:hover,
.button-simple.add-move-right:focus-visible{
  transform: translateX(20px);
}
.button-simple.add-move-top:hover,
.button-simple.add-move-top:focus-visible{
  transform: translateY(-20px);
}
.button-simple * {
  pointer-events: none;
}


.icon-arrow {
    display: inline-block;
  width: 1em;
  height: 1em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/arrows/flecha1A.svg') center / contain no-repeat;
          mask: url('../assets/arrows/flecha1A.svg') center / contain no-repeat;
}
.icon-oferta {
    display: inline-block;
  width: 1em;
  height: 1.5em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/icons/icon_oferta.svg') center / contain no-repeat;
          mask: url('../assets/icons/icon_oferta.svg') center / contain no-repeat;
}
.icon-path {
    display: inline-block;
  width: 1em;
  height: 1em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/icons/icon_path.svg') center / contain no-repeat;
          mask: url('../assets/icons/icon_path.svg') center / contain no-repeat;
}
.icon-centralizado {
    display: inline-block;
  width: 1em;
  height: 1em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/icons/icon_centralizado.svg') center / contain no-repeat;
          mask: url('../assets/icons/icon_centralizado.svg') center / contain no-repeat;
}
.icon-logo-hubspot {
    display: inline-block;
  width: 1em;
  height: 1em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/icons/icon-logo-hubspot.svg') center / contain no-repeat;
          mask: url('../assets/icons/icon-logo-hubspot.svg') center / contain no-repeat;
}
.icon-logo-mp {
    display: inline-block;
  width: 1em;
  height: 1em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/icons/icon-logo-mp.svg') center / contain no-repeat;
          mask: url('../assets/icons/icon-logo-mp.svg') center / contain no-repeat;
}
.icon-logo-rol {
    display: inline-block;
  width: 1em;
  height: 1em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/icons/icon-logo-rol.svg') center / contain no-repeat;
          mask: url('../assets/icons/icon-logo-rol.svg') center / contain no-repeat;
}
.icon-logo-bi {
    display: inline-block;
  width: 1em;
  height: 1em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/icons/icon-logo-bi.svg') center / contain no-repeat;
          mask: url('../assets/icons/icon-logo-bi.svg') center / contain no-repeat;
}
.icon-people {
    display: inline-block;
  width: 1em;
  height: 1em;
    vertical-align: middle;

  background-color: currentColor;

  -webkit-mask: url('../assets/icons/icon-people.svg') center / contain no-repeat;
          mask: url('../assets/icons/icon-people.svg') center / contain no-repeat;
}
.lineas-full{
    display: inline-block;
    width: 7.5em;
    height: 1em;
    vertical-align: middle;

    background-color: currentColor;
    -webkit-mask: url('../assets/svg/arcoiris1.svg') left / contain no-repeat;
            mask: url('../assets/svg/arcoiris1.svg') left / contain no-repeat;
}
.logo-full{
    display: inline-block;
    width: 7.5em;
    height: 1em;
    vertical-align: middle;

    background-color: currentColor;
    -webkit-mask: url('../assets/logo/logoDigitalma.svg') left / contain no-repeat;
            mask: url('../assets/logo/logoDigitalma.svg') left / contain no-repeat;
}
.logo-short{
    display: inline-block;
    width: 3em;
    height: 1em;
    vertical-align: middle;

    background-color: currentColor;
    -webkit-mask: url('../assets/logo/logoDigitalmaShort.svg') left / contain no-repeat;
            mask: url('../assets/logo/logoDigitalmaShort.svg') left / contain no-repeat;
}
.logo-dma{
    cursor: pointer;
    display: inline-block;
    width: 3.5em;
    height: 1em;
    vertical-align: middle;

    background-color: currentColor;
    -webkit-mask: url('../assets/logo/logoDMA.svg') left / contain no-repeat;
            mask: url('../assets/logo/logoDMA.svg') left / contain no-repeat;
}
.logo-dma-wire{
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;

    background-color: currentColor;
    -webkit-mask: url('../assets/logo/logoDMAwire.svg') left / contain no-repeat;
            mask: url('../assets/logo/logoDMAwire.svg') left / contain no-repeat;
}
.logo-circle-alone{
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;

    background-color: currentColor;
    -webkit-mask: url('../assets/logo/logo-circ-alone.svg') left / contain no-repeat;
            mask: url('../assets/logo/logo-circ-alone.svg') left / contain no-repeat;
}
.banner-box{
    /*display: block;*/
    position: relative;
    border-radius: 12px;
    padding:10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.banner-box h1{
    padding: 0;
    width: 80%;
    margin: 0;
    line-height: 1em;
    font-size: 1rem;
}
.banner-box .space{
    height:10px;
}
.banner-box p{
    padding: 0;
    width: 80%;
    margin: 0;
    line-height: 1em;
    font-size: 1rem;
    font-weight: 400;
}
.banner-box .icon{
    font-size: 2rem;
    position: absolute;
}
.banner-box .icon.t-r{
    right: 10px;
    top: 5px;
}
.banner-box .icon.b-r{
    right: 10px;
    bottom: 5px;
}
.banner-box .icon.t-l{
    left: 10px;
    top: 5px;
}
.banner-box .icon.c-r{
    right: 10px;
    top: auto;
    bottom: auto;
}
.force-pastilla{
    border-radius: 9999px;
}
.banner-box.force-pastilla{
    padding-left: 20px;
    padding-right: 20px;
}
.banner-box.force-pastilla .icon.c-r {
    right: 20px;
}
.box-pastilla{
    display: inline-block;
    border-radius: 9999px;
    padding: 10px;
    font-size: 1rem;
    font-weight: 800;
}
/*html {
    filter: url(#chromatic-aberration);
    will-change: filter;
}*/
.aberration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Crucial: para poder clickear lo que está atrás */
    backdrop-filter: url(#chromatic-aberration-raw); /* Aplica el filtro a lo que hay debajo */
    z-index: 9999; /* Siempre arriba de todo */
    /*-webkit-mask-image: linear-gradient(to bottom, transparent 75%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 75%, black 100%);*/
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 25%,
        transparent 75%,
        black 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 25%,
        transparent 75%,
        black 100%
    );

    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.aberration-active {
    opacity: 1;
}
.text-big-2{
    line-height: 1em;
    overflow-wrap: break-word;
}
.panel{
    margin:10px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
}
.panel-product-title{
    display: flex;
    flex-direction: column;
    margin: 20px;
    justify-content: space-between;
    gap: 5px;
}
.panel-product-title .logo-product{
    width: 300px;
    max-width: 40vw;
}
.panel-product-title .panel-subtitle{
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: space-between;
    align-items: flex-end;
}
.panel-product-title .panel-subtitle .etiquetas{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;
}
.panel-product-title .panel-subtitle .subtitle{
    font-size: 1.5em;
    font-weight: 200;
    line-height: 1.2em;
    /*width: 600px;*/
    width: 100%;
    color: var(--secondColor);
}
.panel-product-title .panel-subtitle .subtitle b{
    font-weight: 600;
}
.panel-product-title .logo-brand{
    width: 40px;
    position: absolute;
    right: 30px;
}
.panel-info-generic{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0px 5px 20px;
    height: 500px;
}
.panel-generic{
    border-radius: var(--r);
    overflow: hidden;
    height: 200px;
}
.etiquetas p{
    background-color: var(--secondColor);
    color: var(--seventColor);
    border-radius: 9999px;
    padding: 5px 15px 6px 15px;
    font-size: 1.3em;
    line-height: 1em;
    margin: 0;
    margin-left: 5px;
}
.f-bottom{
    position: absolute;
    bottom: 0;
}
.f-top{
    position: absolute;
    top: 0;
}
.f-top-right{
    position: absolute;
    top: 0;
    right: 0;
}
.f-top-left{
    position: absolute;
    top: 0;
    left: 0;
}
.f-bottom-right{
    position: absolute;
    bottom: 0;
    right: 0;
}
.f-bottom-left{
    position: absolute;
    bottom: 0;
    left: 0;
}
.f-text-small{
    font-size: 1rem;
}
.f-1fr{
    flex:1;
}
.f-2fr{
    flex:2;
}
.f-3fr{
    flex:3;
}
.f-4fr{
    flex:4;
}

.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 10000;
}
.loader .logo-intro{
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 0;
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.loader .logo-intro img{
    max-height: 100dvh;
}
.loader .counter{
    position: absolute;
    top: 50px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.loader .counter .stage{
    font-size: 2em;
}
.loader .counter .number{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;
}
.loader .counter .number .value{
    font-size: 3em;
    line-height: 0.7em;
}
.loader .counter .number .simbol{
    font-size: 1em;
    line-height: 1em;
}

.force-bold{
    font-weight: bold !important;
}
.footer{

    /*background-color: var(--tenColor);*/
    background-color: var(--fivethteenColor);

    display: flex;
    padding: 50px 20px;
    padding-top:200px;
    padding-bottom: 100px;
    /*color: var(--fourthteenColor);*/
    color: var(--secondColor);
    justify-content: space-evenly;
}
.footer .footer-container{
    /*max-width: 1200px;*/
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 20px;
}
.footer h1{
    margin: 0;
    padding: 0;
    font-size: 2em;
    line-height: 1em;
    font-weight: 200;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.footer .logo-footer{
    font-size: 2em;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}
.footer .footer-cotiza{
    height: 100%;
    align-self: end;
    grid-column: 3/6;
    grid-row: 1/3;
    background-color: var(--seventColor);
    border-radius: var(--r);
    color: var(--secondColor);
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 10px;
    font-size: 2em;
    font-weight: 400;
    line-height: 1em;
    transition: all .3s ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
}
.footer .footer-cotiza span{
    height: 30px;
}
.footer .footer-cotiza:hover,
.footer .footer-cotiza:focus-visible{
    filter: url(#chromatic-aberration);
    will-change: filter;
    background-color: var(--secondColor);
    color: var(--seventColor);
    transform: translateX(20px);
}
.footer .footer-agenda{
    height: 100%;
    align-self: end;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    /*background-color: var(--thirdColor);*/
    background-color: var(--seventColor);
    border-radius: var(--r);
    color: var(--secondColor);
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 10px;
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1.1em;
    transition: all .3s ease-in-out;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
}
.footer .footer-agenda:hover,
.footer .footer-agenda:focus-visible{
    filter: url(#chromatic-aberration);
    will-change: filter;
    background-color: var(--secondColor);
    color: var(--seventColor);
    transform: translateX(20px);
}
.footer .footer-links {
    display: flex;
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    /* padding-top: 40px; */
    align-content: flex-start;
}
.footer .footer-links.lista-2 {
    display: flex;
    grid-column: 1 / 2;
    grid-row: 5 / 6;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    /* padding-top: 40px; */
    align-content: flex-start;
}
.footer .footer-logo{
    grid-column: 1 / 2;
    grid-row: 7 / 8;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.footer .footer-logo img{
    width: 100%;
    opacity: 0.3;
}
.footer .footer-links .sub{
    margin-left: 10px;
}
.footer .footer-links .box-pastilla{
    padding: 5px 10px;
    border-radius: 8px;
}
.footer .footer-newsletter{
    grid-column: 1 / 3;
    grid-row: 5 / 6;
}
.footer .footer-newsletter h3{
    margin: 0;
    padding: 0;
}
.footer .footer-newsletter form{
    display: flex;
    gap: 5px;
}
.footer .footer-newsletter form input{
    min-width: 400px;
}
.footer .footer-data{
    display: flex;
    /*grid-column: 3 / 6;*/
    grid-column: 1 / 2;
    grid-row: 6 / 7;
    /*align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
    padding-right: 10px;*/
    justify-content: flex-end;
    flex-direction: column;
    padding-right: 10px;
    align-items: flex-start;
}
.footer .footer-social{
    display: flex;
    gap: 5px;
    font-size: 3em;
    /*color: var(--fourthteenColor);*/

}
.footer .footer-social span{
    transition: all .3s ease-in-out;
}
.footer .footer-social span:hover,
.footer .footer-social span:focus-visible{
    filter: url(#chromatic-aberration);
    will-change: filter;
    transform: scale(1.2);
    color: var(--thirdColor);
}
.footer .footer-address{
    /*text-align: right;*/
    text-align: left;
    /*color: var(--fourthteenColor);*/
    font-size: 1em;
    font-weight: 600;
}
.footer .footer-email{
    font-weight: 900;
}
.footer .footer-loca{
    font-size: 1rem;
}
.top-bar{
    /*position: fixed;*/
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 110px;
    z-index: 9999;
    overflow: hidden;
}
.top-bar .logo-background{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--secondColorTransparent);
    opacity: 0.3;
}
.top-bar .logo{
    position: fixed;
    top: 20px;
    left: 10px;
    font-size: 2em;
    color: var(--sixthColor);
    transition: all 0.9s ease-in-out;
}
.top-bar .logo .logo.full{
    cursor: pointer;
}
.top-bar .menu-buttons{
    position: absolute;
    right: 20px;
    top: -150px;
    display: flex;
    flex-direction: row;
    gap: 20px;
    font-size: 1.3em;
    font-weight: 800;
    color: var(--seventColor);
    transition: top 0.3s ease-in-out;

}
.top-bar .menu-buttons .item{
    cursor: pointer;
    position: relative;
}
.top-bar .menu-buttons .item::before{
    position: absolute;
    content: '';
    width: 0;
    height: 2px;
    bottom: -2px;
    background-color: currentColor;
    transition: width .3s ease-in-out;
}
.top-bar .menu-buttons .item:hover::before{
    width: 100%;
}
.top-bar .menu-buttons-mini{
    position: absolute;
    top: 0;
    right: 0;
    transition: top 0.3s ease-in-out;
}
.top-bar .burguer{
    position: absolute;
    top: 25px;
    right: 20px;
    font-size: 3em;
    color: var(--secondColor);
    background-color: var(--mainColor);
    border-radius: 9999px;
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.top-bar .burguer.close{
    color: var(--mainColor);
    background-color: var(--secondColor);
}
.top-bar .menu-buttons .item b{
    color: var(--sixthColor);
    font-weight: 800;
}

.menu-over-all{
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    right: 0;
    height: 100dvh;
    overflow: hidden;
    background-color: var(--thirdColor);
}
.menu-over-all .menu-buttons{
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    padding: 20px;
    font-size: 4em;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    height: calc(100% - 80px);
    box-sizing: border-box;
}
.menu-over-all .menu-buttons .item{
    cursor: pointer;
    position: relative;
}
.menu-over-all .menu-buttons .item::before{
    position: absolute;
    content: '';
    width: 0;
    height: 2px;
    bottom: -2px;
    background-color: currentColor;
    transition: width .3s ease-in-out;
}
.menu-over-all .menu-buttons .item:hover::before{
    width: 100%;
}
.menu-over-all .menu-buttons .item b{
    color: var(--sixthColor);
}
.dm-tabs{
    margin: 5px;
    box-sizing: border-box;
    position: relative;
    margin-top: 0;
}

.dm-tablist{
    display:flex;
    gap:0;
    overflow:hidden;
    border-radius: var(--r);
    height: 90px;
}

.dm-tab{

    flex:1;
    padding: 18px 8px;
    font-size: 0.8em;
    border:0;
    color:var(--seventColor);

    letter-spacing:.02em;
    cursor:pointer;
    background:var(--fifthColor);
    text-align:left;
    opacity:1;
      position: relative;
    z-index: 2;
      border-radius: var(--r) var(--r) 0 var(--r);
      display: flex;
      transition:all .3s ease;
}
.dm-tab:hover{
    filter: url(#chromatic-aberration);
    will-change: filter;
    transform: translateY(-10px);
    background-color: var(--thirdColor) !important;
    color: var(--secondColor);
}
.dm-tab:nth-child(2){
    margin-left: var(--r2);
    padding-left: 30px;
    z-index: 1;
    background:var(--sixthColor);
}
.dm-tab:nth-child(3){
    margin-left: var(--r2);
    padding-left: 30px;
    z-index: 0;
    background:var(--fourthColor);
}
.dm-tab.is-active{
    opacity:1;
    z-index:4;
    font-size: 1em;
    line-height: 1em;
    padding-left: 10px;
}
.dm-tab:focus-visible{ outline:3px solid rgba(255,255,255,.7); outline-offset:-3px; }

.dm-panels{

    border-radius:calc(var(--r) + 16px);
    padding:0;
    padding-top: 30px;
    background:var(--eightColor);
      position: relative;
    z-index: 3;
      transition: background-color .3s ease;
}
.dm-panels.with-tabs{
    margin-top: -38px;
}

.dm-panel[hidden]{ display:none !important; }

.carousel{
    position:relative;
    border-radius:calc(var(--r) + 16px);
    padding:10px;
}

.carousel__viewport{
    overflow:hidden;
    border-radius:calc(var(--r) + 16px);
}

.carousel__track{
    display:flex;
    transition:transform 450ms ease;
    will-change:transform;
    touch-action:pan-y;
    margin-top: 50px;
}

.carousel__track .track{
    box-sizing: border-box;
    flex:0 0 100%;
    border-radius:calc(var(--r) + 8px);
    padding:14px 4px 0px;
    min-height:220px;
    display:flex;
    flex-direction:column;
    gap:20px;
    justify-content:space-between;
    position:relative;
    height: 600px;
}
.card-track{
    flex:1;
    border-radius:var(--r);
    background-color: var(--seventColor);
    color: var(--secondColor);
    position: relative;
    transition: all .3s ease;
}
.card-track:hover{
    background-color: var(--thirdColor);
    transform: scale(1.01) translateY(-5px);

}
.card-track-line{
    display: flex;
    flex-direction: row;
}
.card-icon{
    font-size: 2em;
    padding: 10px;
}
.card-icon-2{
    font-size: 2em;
    margin: 10px;
}
.card-text-small{
    font-size:1em;
    line-height:1;
    font-weight:400;
    padding:20px;
}
.card-text-small b{
    font-weight: 800;
}
.card-text-big{
    font-size:2em;
    line-height:1;
    font-weight:200;
    padding:20px;
}
.card-text-superbig{
    font-size:3em;
    line-height:1;
    font-weight:200;
    padding:20px;
}
.card-text-big b{
    font-weight: 800;
}
.card-text-mid{
    font-size:1em;
    line-height:1;
    font-weight:200;
    padding:20px;
}
.card-text-mid b{
    font-weight: 800;
}
.title-track{
    font-size:1.5em;
    line-height:1;
    font-weight:300;
    position: absolute;
    top:-50px;
    color:var(--seventColor);
}
.title-track.t-r{
    right: 20px;
    text-align: right;
}
.title-track.t-l{
    left: 20px;
    text-align: left;
}


.muted{ color:var(--mainColor); font-weight:500; font-size:.8em; }

.carousel__btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    border:0;
    width:42px;
    height:42px;
    border-radius:999px;
    background:rgba(0,0,0,.12);
    color:#fff;
    cursor:pointer;
    display:grid;
    place-items:center;
    font-size:28px;
    line-height:1;
    transition:all .3s ease;

}
.carousel__btn:hover{
    background:rgba(0,0,0,.2);
    transform: translateY(-55%);
    filter: url(#chromatic-aberration);
    will-change: filter;
}
.carousel__btn.prev{ left:10px; }
.carousel__btn.next{ right:10px; }

.carousel__dots{
    display:flex;
    gap:10px;
    justify-content:center;
    padding-top:14px;
}
.dot{
    width:10px; height:10px;
    border-radius:999px;
    border:0;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}
.dot.is-active{ background:rgba(255,255,255,.95); }
.bloque-general{
    width: 100%;
    overflow: hidden;
}
.header-general{
    height: 100dvh;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 20px 20px;
    padding-top: 80px;
}
.header-container{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.header-title{
    display: flex;
    flex-direction: column;
    font-size: 3em;
    line-height: 1em;
    flex: 2;
    justify-content: flex-end;
}
.header-title .header-h1 b{
    color: var(--sixthColor);
}
.header-subtitle{
    text-transform: uppercase;
    font-size: 1.5em;
    margin-top:30px;
    flex: 1;
    display: flex;
    align-items: center;
}
.header-buttons {
    display: flex;
    flex-direction: column-reverse;

    gap: 10px;
}