#hero3D{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;

}
#hero3DFront{
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;
}
.hero-canvasWrap{
    position: absolute;
    width: 100%;
    height: 100dvh;
    left:0;
    top:0;
    background-color: var(--secondColor);
}
.hero-canvasWrap .backfall{
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;
    overflow: hidden;
}
.hero-canvasWrap .backfall .fill{
    width: 100%;
    height: 100%;
    background-color: var(--thirdColor);
    border-radius: 20px;
    box-sizing: border-box;
}
#land{
    /*width: 100px;*/
    width: 0px;
    height: 100px;
}
.hero{
    position: relative;
    height: 100dvh;

}

.hero-overlay{
    color: var(--mainColor);
    /*position: fixed;*/
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-columns: 10px 3fr 3fr 3fr 10px;
    grid-template-rows: 100px 6fr 2fr 2fr 40px;
}
.hero-overlay-2{
    /*position: fixed;*/
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-columns: 10px repeat(10, 1fr) 10px;
    grid-template-rows: 100px repeat(10, 1fr) 40px;
}
.hero-banner-1{
    grid-column: 2 / 7;
    grid-row: 2 / 5;
    background-color: var(--twelveColor);
    color:var(--thirdColor);
}
.hero-banner-2{
    grid-column: 7 / 12;
    grid-row: 2 / 5;
    background-color: var(--sixthColor);
    color:var(--thirdColor);
    text-align: right;
    align-items: flex-end;
}
.hero-banner-2 h1{
    width: 70%;
}
.hero-banner-3{
    grid-column: 2 / 12;
    grid-row: 11 / 12;
    background-color: var(--secondColor);
    color:var(--thirdColor);
    text-align: right;
    align-items: flex-end;
    justify-content: flex-end;
}
.hero-banner-3 p{
    width: 100%;
}
.hero-banner-4{
    grid-column: 2 / 12;
    grid-row: 10 / 11;
    background-color: var(--seventColor);
    color:var(--secondColor);
}
.hero-button-box{
    grid-column: 2/ 12;
    grid-row: 9 / 10;
    background-color: var(--secondColor);
    color:var(--thirdColor);
    justify-content: center;

}
/*body:has(.hero-button-to-canvas:hover) #hero3D,
body:has(.hero-button-to-canvas:focus-visible) #hero3D
{
    filter: url(#chromatic-aberration);
    will-change: filter;
}*/
.hero-overlay .bigText{
    grid-column: 2 / 5;
    grid-row: 2 / 3;
    max-width: 80%;
    text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1);
    z-index: 1;
    display: flex;
        flex-direction: column;
        justify-content: flex-end;
}
.hero-overlay .bigText p{
    font-size: 2.5em;
    font-weight: 700;
    margin: 0;
    line-height: 1em;
    color: var(--secondColor);
    position: relative;
}



.hero-overlay .bigText p span{
    color: var(--seventColor);
}
.hero-overlay-2 .banner-box p{
    display: none;
}
.hero-bajada{
    grid-column: 2 / 4;
    grid-row: 4 / 5;
}
.hero-botones-a{
    grid-column: 3 / 6;
    grid-row: 2 / 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
.hero-botones-a div{
    margin-top:20px;
}
.hero-botones-b {
    grid-column: 3 / 6;
    grid-row: 4 / 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.big-text-area{
    font-size: 3em;
    font-weight: bold;
    color: var(--seventColor);
    padding: 10px;
}
.big-text-area p{
    margin: 0;
}
.big-text-area p span{
    color: var(--thirdColor);
}
#clockClip1{
    height: 100px;
    width: 150px;
}
#roscasClip1{
    height: 100px;
    width: 150px;
    margin-left: 20px;
}
.carrousel-area{
    margin-top: 100px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.carrousel-header{
    display: flex;
    color: var(--seventColor);
    padding: 10px;
    gap: 20px;
    flex-direction: column;
}
.carrousel-header-title{
    flex: 0 2 auto;
    font-size: 3em;
    font-weight: 900;
    line-height: 1.2em;

}
.carrousel-header-title span{
    color: var(--thirdColor);
}
.carrousel-header-detail{
    flex: 0 2 auto;
    font-size: 2em;
    word-spacing: 0.25em;
    text-wrap: balance;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.carrousel-header-space{
    flex: 0 1 10%;
}
.drag-carousel{
  width: 100%;
  overflow: hidden;
  position: relative;

  /* clave: evita el “scroll horizontal” nativo, pero deja pan vertical */
  touch-action: pan-y;

  user-select: none;
  cursor: grab;
}
.drag-carousel:active{ cursor: grabbing; }

.drag-carousel .track{
  display: flex;
  gap: 16px;
  will-change: transform;
    padding-left: 10px;
  transform: translate3d(0,0,0);

}

.drag-carousel .slide{
  flex: 0 0 auto;
  width: min(80vw, 520px);
  height: 70vh;
  /*border-radius: 18px;*/
  /*background: #ddd;*/
  display: grid;
  place-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
}
.drag-carousel .slide canvas{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transform-origin: center center;
    transition: transform .15s ease, filter .15s ease;
}
/*.drag-carousel .slide .titulo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 3em;
    font-weight: 700;
    padding: 20px;
    color: var(--mainColor);
    line-height: 1.2em;
    background-color: rgba(0, 0, 0, 0.3);
    letter-spacing: -0.05em;
    box-sizing:border-box;
    transition: font-size .15s ease;
}*/
.drag-carousel .slide .titulo{
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    box-sizing:border-box;
    /*margin: 10px;*/
    font-size: 1.5em;
    font-weight: 200;
    padding: 20px;
    color: var(--secondColor);
    line-height: 0.9em;
    background-color: var(--seventColor);

    transition: font-size .15s ease;
    border-radius: 30px;

}
.drag-carousel .slide-end{
    padding: 25px;
}
.drag-carousel .slide .background{
    position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
    top: 0;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
/*.drag-carousel .slide .content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
    padding: 20px;
    padding-bottom: 50px;
    background-color: rgba(0, 0, 0, 0.3);

  transform: translateY(24px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;

  pointer-events: none;
}*/
.drag-carousel .slide .content{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
    padding: 20px;
    padding-bottom: 50px;
    background-color: var(--secondColor);

    border-radius: 30px 30px 0 0;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;

  pointer-events: none;
}
.drag-carousel .slide .content p{
    color: var(--seventColor);
    font-size: 1em;
}

/* aparece y queda cuando entrás a sus botones */
.drag-carousel .slide:hover .content,
.drag-carousel .slide:focus-within .content{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.drag-carousel .slide:hover .background,
.drag-carousel .slide:focus-within .background{
  opacity: 1;
}
.drag-carousel .slide:hover canvas,
.drag-carousel .slide:focus-within canvas{
  filter: sepia(1) grayscale(0.3) blur(1px);
    transform: scale(1.1);
    transform-origin: center center;
}
.drag-carousel .slide:hover .titulo,
.drag-carousel .slide:focus-within .titulo{
  font-size: 2em;
    word-break: break-word;
}
.divisor-1{
    position: relative;
}
.divisor-2{
    position: relative;
}
.divisor-lines-1{
    position: absolute;
    width: 100%;
    height: 200vh;
    left: 0;
    top: -40vh;
    z-index: -2;
    display: flex;
    overflow: hidden;
}
.divisor-lines-1 img{
    position: relative;
    top: 700px;
}
.panel-big-text{
    flex: 4;
    height: 400px;
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
}
.panel-big-text h1{
    position: absolute;
    margin:0;
    padding:10px;
    bottom: 0;
    font-size: 2em;
    font-weight: 100;
    line-height: 1em;
}
.panel-big-text img{
    position: absolute;
    right: -20px;
    top: -30px;
}
.panel-big-agenda{
    flex: 2;
    height: 400px;
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background-color: var(--thirdColor);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 10px;
    color: var(--secondColor);
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
    align-items: flex-end;
    gap: 5px;
}
.panel-big-agenda:hover{
    filter: url(#chromatic-aberration);
    will-change: filter;
    background-color: var(--sixthColor);
    color: var(--mainColor);
    transform: translateX(5px);

}
.panel-big-agenda .panel-circle-logo{
    position: absolute;
    width: 50px;
    height: 50px;
    top:20px;
    right: 20px;
    color: var(--seventColor);
}
.panel-big-agenda .panel-circle-logo i{
    width: 100%;
    height: 100%;
}
.panel-big-agenda h1{
    font-size: 2em;
    font-weight: 200;
    margin: 0;
    padding: 0;
    line-height: 1em;
}
.panel-big-agenda i{
    font-size: 3em;
}
.home-generacion-1{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    box-sizing: border-box;
    padding: 20px;
    width: 100%;
    margin-top: 150px;
    gap: 5px;
}
.home-generacion-1 .texto-big-1{
    font-size: 3em;
    grid-column: 1 / 7;
    grid-row: 1 / 3;
    line-height: 1em;
    font-weight: 100;
}
.home-generacion-1 .texto-small-1{
    font-size: 1.2em;
    grid-column: 1 / 7;
    grid-row: 6 / 7;
}
.home-generacion-1 .texto-small-2{
    font-size: 1.5em;
    grid-column: 1 / 2;
    grid-row: 9 / 10;
    align-self: end;
    font-weight: 800;
}
.home-generacion-1 .texto-small-3{
    font-size: 2em;
    grid-column: 1 / 7;
    grid-row: 7 / 8;
    align-self: end;
    line-height: 1em;
    text-align: right;
    padding: 30px 0
}
.home-generacion-1 .boton-1{
    font-size: 1.5em;
    grid-column: 1 / 7;
    grid-row: 11 / 12;
    text-align: center;
}
.home-generacion-1 .icono-big{
    grid-column: 1 / 3;
    grid-row: 3 / 6;
     width: 100%;
    height: 100%;
    align-self: end;
    text-align: center;
}
.home-generacion-1 .icono-big img{

    width: 90%;
    height: 100%;
    object-fit: contain; /* mantiene proporción sin deformar */
    align-self: end;
}
.home-nosotros{
    box-sizing: border-box;
    width: 100%;
    position: relative;
}
.home-nosotros .border-top{
    width: 100%;
    height: 100px;
    background-color: var(--secondColor);
    border-radius: 0 0 var(--r) var(--r);
    position: relative;
    z-index: 2;
}
.home-nosotros .border-bottom{
    width: 100%;
    height: 100px;
    background-color: var(--secondColor);
    border-radius: var(--r) var(--r) 0 0;
    position: relative;
    z-index: 2;
}
.home-nosotros .nosotros-container{
    box-sizing: border-box;
    width: 100%;
    margin-top: -40px;

    background-color: var(--seventColor);
    padding-top: 90px;
    padding-bottom: 90px;
    margin-bottom: -40px;
}
.nosotros-container .nosotros-cuerpo{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px;
    color: var(--secondColor);
    gap: 30px;
}
.nosotros-container .nosotros-cuerpo h1{
    font-size: 2.5em;
    margin: 0;
    padding: 0;
    line-height: 1em;
}
.nosotros-container .nosotros-cuerpo h2{
    margin-bottom: 0;
}
.nosotros-container .nosotros-cuerpo p{
    margin-bottom: 0;
}
.nosotros-container .nosotros-cuerpo canvas{
    width: 100%;
    height: 200px;
    /*height: 400px;*/
    /*background-color: var(--secondColor);*/
    border-radius: var(--r);
    transition: transform .3s ease;
}
.nosotros-container .nosotros-cuerpo canvas:hover{
    filter: url(#chromatic-aberration);
    will-change: filter;
    transform: scale(1.2);
}
.nosotros-big-text{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nosotros-autopartistas{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.nosotros-colectiva{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dm-metrics{
    width: 100%;
}

/* ====== MARQUEE ====== */
.dm-marquee{
    width: 100%;
    overflow: hidden;
    padding: 18px 0;
}

.dm-marquee__track{
    display: flex;
    width: max-content;
    will-change: transform;
    animation: dm-marquee 30s linear infinite; /* <- velocidad */
}

.dm-marquee__content{
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-right: 18px;
    /*font: 800 clamp(26px, 3.2vw, 52px)/1.05 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
    font-size: 5em;
    font-weight: 100;
    letter-spacing: 0.02em;
    /*text-transform: uppercase;*/
    color: var(--secondColor);
    white-space: nowrap;
}

.dm-marquee__content .sep{
    opacity: .25;
    font-weight: 700;
}

/* Pausa al hover (opcional) */
.dm-marquee:hover .dm-marquee__track{
    animation-play-state: paused;
}

@keyframes dm-marquee{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); } /* porque duplicamos 2 bloques */
}
/* ====== CAROUSEL ====== */
.dm-carousel{
    padding: 22px 0 26px;
}

.dm-carousel__viewport{
    /* “área gris” / ventana visible */
    margin: 0 auto;
    width: min(1120px, calc(100% - 48px));
    overflow: hidden;
    border-radius: 10px;
    /*background:
      radial-gradient(circle at 1px 1px, rgba(0,0,0,.12) 1px, transparent 1px) 0 0 / 16px 16px;
    outline: none;*/
}

.dm-carousel__track{
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dm-carousel__track::-webkit-scrollbar{ display: none; }

.dm-slide{
    flex: 0 0 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
    padding: 34px 10px 0px;
}

.dm-metric{
    display: flex;
    /*grid-template-columns: auto 1fr;*/
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.dm-metric__big{
    /*font: 300 clamp(56px, 6vw, 92px)/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
    letter-spacing: -0.02em;
    color: var(--secondColor);
    font-size: 6em;
}

.dm-metric__text{
    /*font: 600 clamp(16px, 1.4vw, 20px)/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
    color: var(--secondColor);
    max-width: 36ch;
    font-size: 2em;
    line-height: 1em;
}

.dm-metric__text strong{
    font-weight: 800;
}

/* Dots */
.dm-dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 14px;
}

.dm-dot{
    width: 12px;
    height: 12px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,.25);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.dm-dot.is-active{
    background: var(--secondColor);
    transform: scale(1.25);
}

/* Opcional: cambia layout en mobile (si querés)
@media (max-width: 560px){
.dm-metric{
  grid-template-columns: 1fr;
  gap: 12px;
}
}*/
.dm-panels#product-run .carousel__viewport{
    padding-top: 50px;
}
.dm-panels#product-run .track{
    min-height: 420px;
}
.title-track-2 {
    font-size: 2em;
    font-weight: 200;
    line-height:1;
    position: absolute;
  top:-90px;
  color:var(--seventColor);
}
.home-otros{
    box-sizing: border-box;
    width: 100%;
    position: relative;
}
.home-otros .border-top{
    width: 100%;
    height: 100px;
    background-color: var(--secondColor);
    border-radius: 0 0 var(--r) var(--r);
    position: relative;
    z-index: 2;
}
.home-otros .border-bottom{
    width: 100%;
    height: 100px;
    background-color: var(--seventColor);
    border-radius: 0 0 var(--r) var(--r);
    position: relative;
    z-index: 2;
    margin-bottom: -60px;
}
.home-otros .otros-container{
    box-sizing: border-box;
    width: 100%;
    margin-top: -40px;
    background-color: var(--seventColor);
    padding: 20px;
    padding-top: 210px;
    padding-bottom: 100px;
    margin-bottom: -40px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    color: var(--secondColor);
    gap: 20px;
}
.home-otros .otros-container h1{
    margin: 0;
    padding: 0;
    line-height: 1em;
    font-size: 2em;
    grid-column: 1/3;
    grid-row: 1/2;
    font-weight: 100;
}
.home-otros .otros-container h2{
    margin: 0;
    padding: 0;

    font-size: 2em;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    font-weight: 200;
}
.home-otros .otros-container h2 b{
    font-weight: 700;
}
.home-otros .otros-container .boton-1{
    margin: 0;
    padding: 0;
    line-height: 1em;
    font-size: 1em;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}
.home-otros .otros-container .logos{
    display: flex;
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 30px;
    gap: 20px;
}
.home-otros .otros-container .logos img{
    height: 60px;
    transition: transform .3s ease;
}
.home-otros .otros-container .logos img:hover{
    transform: scale(1.2);
}
.fix-boton-vermas-1{
    position: absolute;
    left: 20px;
    top: 20px;
}