/* =========================================================
   HERO · ANIMACIÓN DE VIDEOS Y ANUNCIOS
========================================================= */

:root{
    --td-orange:#f28a1a;
    --td-orange-soft:#ff9d2e;

    --td-green:#2f9b57;
    --td-green-soft:#55c47f;

    --td-black:#171717;
}


/* =========================================================
   HERO
========================================================= */

.td-motion-hero{
    position:relative;

    width:100%;
    min-height:88vh;

    display:flex;
    align-items:center;

    overflow:hidden;

    padding:
        clamp(100px,10vw,145px)
        24px
        clamp(75px,7vw,105px);

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(242,138,26,.075),
            transparent 24%
        ),
        radial-gradient(
            circle at 72% 75%,
            rgba(47,155,87,.055),
            transparent 22%
        ),
        #fff;
}


/* =========================================================
   GRID
========================================================= */

.td-motion-hero__grid{
    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.24;

    background-image:
        linear-gradient(
            rgba(0,0,0,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.035) 1px,
            transparent 1px
        );

    background-size:42px 42px;

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.35) 45%,
            rgba(0,0,0,.75) 100%
        );
}


/* =========================================================
   GLOWS
========================================================= */

.td-motion-hero__glow{
    position:absolute;

    border-radius:50%;

    filter:blur(85px);

    pointer-events:none;
}


.td-motion-hero__glow--orange{
    width:300px;
    height:300px;

    right:6%;
    top:15%;

    background:
        rgba(242,138,26,.07);
}


.td-motion-hero__glow--green{
    width:240px;
    height:240px;

    right:29%;
    bottom:10%;

    background:
        rgba(47,155,87,.055);
}


/* =========================================================
   INNER
========================================================= */

.td-motion-hero__inner{
    position:relative;
    z-index:2;

    width:min(1240px,100%);
    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(530px,1.1fr);

    gap:
        clamp(50px,7vw,105px);

    align-items:center;
}


/* =========================================================
   CONTENIDO
========================================================= */

.td-motion-hero__content{
    max-width:665px;
}


.td-motion-hero__eyebrow{
    display:inline-flex;
    align-items:center;

    gap:12px;

    margin-bottom:24px;

    font-size:12px;
    font-weight:800;

    letter-spacing:.15em;
    text-transform:uppercase;

    color:#666;
}


.td-motion-hero__eyebrow > span{
    width:38px;
    height:3px;

    border-radius:99px;

    background:var(--td-orange);
}


/* =========================================================
   TITLE
========================================================= */

.td-motion-hero h1{
    margin:0;

    font-size:
        clamp(50px,5.5vw,86px);

    line-height:.95;

    letter-spacing:-.055em;

    font-weight:500;

    color:#171717;
}


.td-motion-hero h1 strong{
    display:block;

    margin-top:8px;

    font-weight:900;

    color:var(--td-orange);

    animation:
        tdMotionTitle
        .9s
        cubic-bezier(.2,.75,.2,1)
        both;
}


@keyframes tdMotionTitle{

    from{
        opacity:0;
        transform:translateY(24px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================================
   LEAD
========================================================= */

.td-motion-hero__lead{
    max-width:620px;

    margin:
        clamp(32px,3.5vw,44px)
        0
        0;

    font-size:
        clamp(18px,1.35vw,21px);

    line-height:1.75;

    color:#656565;
}


/* =========================================================
   ACTIONS
========================================================= */

.td-motion-hero__actions{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:24px;

    margin-top:32px;
}


.td-motion-hero__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:16px;

    min-height:58px;

    padding:
        0
        24px;

    border-radius:999px;

    background:#171717;

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:800;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.td-motion-hero__button:hover{
    transform:translateY(-3px);

    background:var(--td-orange);

    box-shadow:
        0 18px 42px
        rgba(242,138,26,.22);
}


.td-motion-hero__button span:last-child{
    display:grid;
    place-items:center;

    width:28px;
    height:28px;

    border-radius:50%;

    background:
        rgba(255,255,255,.15);
}


.td-motion-hero__link{
    display:inline-flex;
    align-items:center;

    gap:8px;

    color:#555;

    text-decoration:none;

    font-size:14px;
    font-weight:700;
}


.td-motion-hero__link:hover{
    color:var(--td-green);
}


/* =========================================================
   META
========================================================= */

.td-motion-hero__meta{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:28px;

    font-size:10px;
    font-weight:800;

    letter-spacing:.08em;
    text-transform:uppercase;

    color:#8d8d8d;
}


.td-motion-hero__meta i{
    width:4px;
    height:4px;

    border-radius:50%;

    background:var(--td-green);
}


/* =========================================================
   VISUAL
========================================================= */

.td-motion-hero__visual{
    position:relative;

    min-height:580px;
}


/* =========================================================
   STUDIO
========================================================= */

.td-motion-studio{
    position:absolute;

    left:50%;
    top:50%;

    width:min(550px,91%);

    transform:translate(-50%,-50%);

    overflow:hidden;

    border-radius:24px;

    background:#171717;

    color:#fff;

    border:
        1px solid
        rgba(255,255,255,.07);

    box-shadow:
        0 36px 90px
        rgba(0,0,0,.20);

    animation:
        tdMotionStudioFloat
        7s
        ease-in-out
        infinite;
}


@keyframes tdMotionStudioFloat{

    0%,100%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50%{
        transform:
            translate(-50%,-50%)
            translateY(-8px);
    }

}


/* =========================================================
   HEADER
========================================================= */

.td-motion-studio__header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:
        16px
        19px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.td-motion-studio__header-left{
    display:flex;
    align-items:center;

    gap:8px;

    font-size:8px;
    font-weight:800;

    letter-spacing:.12em;
}


.td-motion-status{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--td-green);

    box-shadow:
        0 0 0 5px
        rgba(47,155,87,.08);

    animation:
        tdMotionStatus
        2s
        ease-in-out
        infinite;
}


@keyframes tdMotionStatus{

    50%{
        box-shadow:
            0 0 0 10px
            rgba(47,155,87,0);
    }

}


.td-motion-studio__header-right{
    font-size:8px;

    color:
        rgba(255,255,255,.38);
}


/* =========================================================
   PREVIEW
========================================================= */

.td-motion-preview{
    position:relative;

    height:300px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f1eee9,
            #dfe5df
        );
}


.td-motion-preview__grid{
    position:absolute;
    inset:0;

    opacity:.40;

    background-image:
        linear-gradient(
            rgba(0,0,0,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.06) 1px,
            transparent 1px
        );

    background-size:24px 24px;
}


/* =========================================================
   ART
========================================================= */

.td-motion-art{
    position:absolute;

    inset:0;

    overflow:hidden;
}


.td-motion-art__circle{
    position:absolute;

    width:165px;
    height:165px;

    right:55px;
    top:52px;

    border-radius:50%;

    background:var(--td-orange);

    animation:
        tdMotionCircle
        6s
        ease-in-out
        infinite;
}


@keyframes tdMotionCircle{

    0%,100%{
        transform:
            translate(0,0)
            scale(1);
    }

    50%{
        transform:
            translate(-22px,14px)
            scale(.88);
    }

}


.td-motion-art__square{
    position:absolute;

    width:120px;
    height:120px;

    left:65px;
    bottom:40px;

    border-radius:18px;

    background:var(--td-green);

    transform:rotate(12deg);

    animation:
        tdMotionSquare
        7s
        ease-in-out
        infinite;
}


@keyframes tdMotionSquare{

    0%,100%{
        transform:
            rotate(12deg)
            translate(0,0);
    }

    50%{
        transform:
            rotate(-3deg)
            translate(15px,-15px);
    }

}


.td-motion-art__line{
    position:absolute;

    width:180px;
    height:4px;

    left:45%;

    top:55%;

    border-radius:99px;

    background:#171717;

    transform:
        translate(-50%,-50%)
        rotate(-24deg);

    animation:
        tdMotionLine
        5s
        ease-in-out
        infinite;
}


@keyframes tdMotionLine{

    50%{
        width:230px;

        transform:
            translate(-50%,-50%)
            rotate(12deg);
    }

}


/* =========================================================
   TEXTO
========================================================= */

.td-motion-art__text{
    position:absolute;

    z-index:5;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:75%;

    text-align:center;
}


.td-motion-art__text > span{
    display:block;

    margin-bottom:6px;

    font-size:9px;
    font-weight:900;

    letter-spacing:.18em;

    color:#555;
}


.td-motion-art__text strong{
    display:block;

    font-size:
        clamp(32px,4vw,48px);

    line-height:.85;

    letter-spacing:-.055em;

    color:#171717;
}


.td-motion-art__text b{
    display:block;

    color:#fff;

    text-shadow:
        0 2px 15px
        rgba(0,0,0,.15);
}


/* =========================================================
   PLAY
========================================================= */

.td-motion-art__play{
    position:absolute;

    z-index:8;

    right:22px;
    bottom:20px;

    display:grid;
    place-items:center;

    width:40px;
    height:40px;

    border-radius:50%;

    background:#171717;

    color:#fff;

    font-size:11px;

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.17);

    animation:
        tdMotionPlay
        3s
        ease-in-out
        infinite;
}


@keyframes tdMotionPlay{

    50%{
        transform:scale(1.08);
    }

}


/* =========================================================
   CORNERS
========================================================= */

.td-motion-corner{
    position:absolute;

    width:24px;
    height:24px;
}


.td-motion-corner--tl{
    left:20px;
    top:20px;

    border-left:1px solid rgba(0,0,0,.45);
    border-top:1px solid rgba(0,0,0,.45);
}


.td-motion-corner--tr{
    right:20px;
    top:20px;

    border-right:1px solid rgba(0,0,0,.45);
    border-top:1px solid rgba(0,0,0,.45);
}


.td-motion-corner--bl{
    left:20px;
    bottom:20px;

    border-left:1px solid rgba(0,0,0,.45);
    border-bottom:1px solid rgba(0,0,0,.45);
}


.td-motion-corner--br{
    right:20px;
    bottom:20px;

    border-right:1px solid rgba(0,0,0,.45);
    border-bottom:1px solid rgba(0,0,0,.45);
}


/* =========================================================
   PREVIEW INFO
========================================================= */

.td-motion-preview__info{
    position:absolute;

    z-index:9;

    top:18px;

    padding:
        6px
        8px;

    border-radius:7px;

    background:
        rgba(255,255,255,.72);

    backdrop-filter:blur(6px);

    font-size:7px;
    font-weight:900;

    color:#555;
}


.td-motion-preview__info--one{
    left:55px;
}


.td-motion-preview__info--two{
    left:105px;
}


/* =========================================================
   TIMELINE
========================================================= */

.td-motion-timeline{
    position:relative;

    padding:
        17px
        16px
        20px;

    background:#1e2021;
}


/* TIME */

.td-motion-timeline__time{
    display:flex;
    justify-content:space-between;

    margin-left:58px;
    margin-bottom:9px;

    padding-bottom:8px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    font-size:6px;

    color:
        rgba(255,255,255,.28);
}


/* =========================================================
   PLAYHEAD
========================================================= */

.td-motion-playhead{
    position:absolute;

    z-index:10;

    left:31%;
    top:14px;
    bottom:12px;

    width:1px;

    background:var(--td-orange);

    animation:
        tdMotionPlayhead
        8s
        linear
        infinite;
}


.td-motion-playhead span{
    position:absolute;

    left:50%;
    top:-3px;

    width:9px;
    height:9px;

    transform:
        translateX(-50%)
        rotate(45deg);

    background:var(--td-orange);
}


@keyframes tdMotionPlayhead{

    0%{
        left:22%;
    }

    100%{
        left:92%;
    }

}


/* =========================================================
   TRACK
========================================================= */

.td-motion-track{
    display:grid;

    grid-template-columns:
        48px
        1fr;

    gap:10px;

    align-items:center;

    margin-top:7px;
}


.td-motion-track__label{
    font-size:6px;
    font-weight:800;

    letter-spacing:.09em;

    color:
        rgba(255,255,255,.30);
}


.td-motion-track__content{
    display:flex;
    align-items:center;

    gap:5px;

    min-height:26px;
}


.td-motion-clip{
    display:flex;
    align-items:center;

    height:24px;

    padding:
        0
        10px;

    border-radius:5px;

    font-size:6px;
    font-weight:800;

    color:#fff;
}


.td-motion-clip--orange{
    width:38%;

    background:
        rgba(242,138,26,.78);
}


.td-motion-clip--dark{
    width:28%;

    background:#56595a;
}


.td-motion-clip--green{
    width:58%;

    margin-left:15%;

    background:
        rgba(47,155,87,.72);
}


/* =========================================================
   AUDIO
========================================================= */

.td-motion-wave{
    width:70%;
    height:24px;

    display:flex;
    align-items:center;

    gap:3px;

    padding:
        0
        8px;

    border-radius:5px;

    background:
        rgba(255,255,255,.045);
}


.td-motion-wave i{
    display:block;

    width:2px;

    background:
        rgba(255,255,255,.45);

    animation:
        tdMotionWave
        1.2s
        ease-in-out
        infinite;
}


.td-motion-wave i:nth-child(1){height:6px;}
.td-motion-wave i:nth-child(2){height:14px;}
.td-motion-wave i:nth-child(3){height:9px;}
.td-motion-wave i:nth-child(4){height:18px;}
.td-motion-wave i:nth-child(5){height:11px;}
.td-motion-wave i:nth-child(6){height:16px;}
.td-motion-wave i:nth-child(7){height:7px;}
.td-motion-wave i:nth-child(8){height:13px;}
.td-motion-wave i:nth-child(9){height:19px;}
.td-motion-wave i:nth-child(10){height:8px;}


@keyframes tdMotionWave{

    50%{
        transform:scaleY(.45);
    }

}


/* =========================================================
   FLOATS
========================================================= */

.td-motion-float{
    position:absolute;
    z-index:12;

    display:flex;
    align-items:center;

    gap:10px;

    padding:
        11px
        14px;

    border-radius:14px;

    background:#fff;

    border:
        1px solid
        rgba(0,0,0,.06);

    box-shadow:
        0 16px 36px
        rgba(0,0,0,.10);

    animation:
        tdMotionFloat
        6s
        ease-in-out
        infinite;
}


.td-motion-float > span{
    display:grid;
    place-items:center;

    width:35px;
    height:35px;

    border-radius:10px;

    background:#f3f3f1;

    color:var(--td-orange);

    font-size:11px;
    font-weight:900;
}


.td-motion-float strong,
.td-motion-float small{
    display:block;
}


.td-motion-float strong{
    font-size:10px;

    color:#333;
}


.td-motion-float small{
    margin-top:2px;

    font-size:7px;

    color:#999;
}


.td-motion-float--one{
    left:0;
    top:11%;
}


.td-motion-float--two{
    right:0;
    top:18%;

    animation-delay:.8s;
}


.td-motion-float--two > span{
    color:var(--td-green);
}


.td-motion-float--three{
    right:4%;
    bottom:5%;

    animation-delay:1.5s;
}


@keyframes tdMotionFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1050px){

    .td-motion-hero{
        min-height:auto;
    }

    .td-motion-hero__inner{
        grid-template-columns:1fr;

        gap:60px;
    }

    .td-motion-hero__content{
        max-width:800px;
    }

    .td-motion-hero__visual{
        width:min(700px,100%);
        min-height:560px;

        margin:0 auto;
    }

}


@media (max-width:700px){

    .td-motion-hero{
        padding:
            95px
            20px
            65px;
    }

    .td-motion-hero h1{
        font-size:
            clamp(45px,12.5vw,68px);
    }

    .td-motion-hero__lead{
        font-size:17px;
    }

    .td-motion-hero__actions{
        flex-direction:column;
        align-items:flex-start;

        gap:18px;
    }

    .td-motion-hero__visual{
        min-height:520px;

        transform:scale(.88);

        transform-origin:center top;

        margin-bottom:-55px;
    }

}


@media (max-width:520px){

    .td-motion-hero__visual{
        width:122%;
        left:-11%;

        transform:scale(.74);

        margin-bottom:-120px;
    }

}


@media (prefers-reduced-motion:reduce){

    .td-motion-studio,
    .td-motion-art__circle,
    .td-motion-art__square,
    .td-motion-art__line,
    .td-motion-art__play,
    .td-motion-playhead,
    .td-motion-wave i,
    .td-motion-float,
    .td-motion-status{
        animation:none;
    }

}
/* =========================================================
   BLOQUE 02 · ANIMACIÓN DE VIDEOS Y ANUNCIOS
========================================================= */

.td-motion-services{
    position:relative;
    overflow:hidden;

    padding:
        clamp(80px,8vw,125px)
        24px;

    background:#f8f8f6;
}


.td-motion-services::before{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    right:-220px;
    top:12%;

    border-radius:50%;

    border:
        1px solid
        rgba(242,138,26,.10);

    pointer-events:none;
}


.td-motion-services__inner{
    position:relative;
    z-index:2;

    width:min(1180px,100%);
    margin:0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.td-motion-services__intro{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.95fr);

    gap:
        clamp(45px,7vw,100px);

    align-items:start;
}


.td-motion-services__eyebrow{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:11px;
    font-weight:800;

    letter-spacing:.15em;
    text-transform:uppercase;

    color:#777;
}


.td-motion-services__eyebrow span{
    width:35px;
    height:3px;

    border-radius:99px;

    background:var(--td-orange);
}


.td-motion-services h2{
    margin:0;

    font-size:
        clamp(42px,4.8vw,70px);

    line-height:.98;

    letter-spacing:-.052em;

    font-weight:500;

    color:#171717;
}


.td-motion-services h2 strong{
    display:block;

    margin-top:7px;

    font-weight:900;

    color:var(--td-orange);
}


.td-motion-services__copy > p{
    margin:0 0 20px;

    font-size:
        clamp(16px,1.2vw,19px);

    line-height:1.8;

    color:#6d6d6d;
}


.td-motion-services__copy strong{
    color:#222;
}


/* =========================================================
   IDEA
========================================================= */

.td-motion-services__idea{
    display:grid;

    grid-template-columns:auto 1fr;

    gap:15px;

    align-items:start;

    margin-top:28px;

    padding:19px;

    border-radius:17px;

    background:#fff;

    border:
        1px solid
        rgba(0,0,0,.06);
}


.td-motion-services__idea > span{
    display:grid;
    place-items:center;

    min-width:52px;
    height:31px;

    border-radius:999px;

    background:
        rgba(242,138,26,.10);

    color:var(--td-orange);

    font-size:8px;
    font-weight:900;

    letter-spacing:.09em;
}


.td-motion-services__idea p{
    margin:0;

    font-size:13px;
    line-height:1.65;

    color:#777;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.td-motion-services__grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:16px;

    margin-top:
        clamp(70px,7vw,100px);
}


.td-motion-service{
    position:relative;

    min-height:560px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    padding:25px;

    border-radius:25px;

    background:#fff;

    border:
        1px solid
        rgba(0,0,0,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.td-motion-service:hover{
    transform:translateY(-7px);

    box-shadow:
        0 24px 55px
        rgba(0,0,0,.075);
}


/* =========================================================
   TOP
========================================================= */

.td-motion-service__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}


.td-motion-service__number{
    font-size:9px;
    font-weight:900;

    color:#aaa;
}


.td-motion-service__tag{
    padding:
        6px
        9px;

    border-radius:999px;

    background:#f4f4f2;

    font-size:7px;
    font-weight:900;

    letter-spacing:.1em;
    text-transform:uppercase;

    color:#888;
}


/* =========================================================
   VISUAL ANIMATION
========================================================= */

.td-motion-service__visual{
    position:relative;

    height:180px;

    margin:
        27px
        0
        28px;

    overflow:hidden;

    border-radius:18px;

    background:#f3f1ed;
}


.td-motion-shape{
    position:absolute;
}


.td-motion-shape--circle{
    width:100px;
    height:100px;

    right:22px;
    top:20px;

    border-radius:50%;

    background:var(--td-orange);

    animation:
        tdServiceCircle
        5s
        ease-in-out
        infinite;
}


.td-motion-shape--square{
    width:75px;
    height:75px;

    left:28px;
    bottom:23px;

    border-radius:15px;

    background:var(--td-green);

    transform:rotate(12deg);

    animation:
        tdServiceSquare
        6s
        ease-in-out
        infinite;
}


.td-motion-shape--line{
    width:130px;
    height:3px;

    left:50%;
    top:50%;

    border-radius:99px;

    background:#171717;

    transform:
        translate(-50%,-50%)
        rotate(-25deg);

    animation:
        tdServiceLine
        5.5s
        ease-in-out
        infinite;
}


@keyframes tdServiceCircle{

    50%{
        transform:
            translate(-25px,18px)
            scale(.82);
    }

}


@keyframes tdServiceSquare{

    50%{
        transform:
            translate(17px,-12px)
            rotate(-5deg);
    }

}


@keyframes tdServiceLine{

    50%{
        width:175px;

        transform:
            translate(-50%,-50%)
            rotate(18deg);
    }

}


/* =========================================================
   EDIT PREVIEW
========================================================= */

.td-motion-edit-preview{
    height:180px;

    margin:
        27px
        0
        28px;

    overflow:hidden;

    border-radius:18px;

    background:#202020;
}


.td-motion-edit-preview__screen{
    height:125px;

    display:grid;
    place-items:center;

    background:
        linear-gradient(
            135deg,
            #ddd9d2,
            #aaa
        );
}


.td-motion-edit-preview__screen span{
    display:grid;
    place-items:center;

    width:42px;
    height:42px;

    border-radius:50%;

    background:#171717;

    color:#fff;

    font-size:10px;
}


.td-motion-edit-preview__timeline{
    position:relative;

    height:55px;

    display:flex;
    align-items:center;

    gap:4px;

    padding:0 12px;
}


.td-motion-edit-preview__timeline i{
    display:block;

    height:16px;

    border-radius:4px;
}


.td-motion-edit-preview__timeline i:nth-child(1){
    width:35%;
    background:var(--td-orange);
}


.td-motion-edit-preview__timeline i:nth-child(2){
    width:25%;
    background:#555;
}


.td-motion-edit-preview__timeline i:nth-child(3){
    width:29%;
    background:var(--td-green);
}


.td-motion-edit-preview__timeline b{
    position:absolute;

    left:48%;
    top:7px;
    bottom:7px;

    width:1px;

    background:#fff;

    animation:
        tdEditPlayhead
        4s
        ease-in-out
        infinite;
}


@keyframes tdEditPlayhead{

    0%,100%{
        left:15%;
    }

    50%{
        left:84%;
    }

}


/* =========================================================
   AD PREVIEW
========================================================= */

.td-motion-ad-preview{
    height:180px;

    margin:
        27px
        0
        28px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(242,138,26,.12),
            rgba(47,155,87,.08)
        );
}


.td-motion-ad-preview__phone{
    position:relative;

    width:110px;
    height:155px;

    padding:17px 13px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    overflow:hidden;

    border-radius:
        17px
        17px
        0
        0;

    background:#171717;

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.18);

    animation:
        tdAdPhone
        5s
        ease-in-out
        infinite;
}


@keyframes tdAdPhone{

    50%{
        transform:
            translateY(-6px)
            rotate(2deg);
    }

}


.td-motion-ad-preview__label{
    position:absolute;

    left:12px;
    top:13px;

    font-size:6px;
    font-weight:900;

    letter-spacing:.1em;

    color:var(--td-orange);
}


.td-motion-ad-preview strong{
    font-size:15px;

    line-height:.95;

    letter-spacing:-.04em;

    color:#fff;
}


.td-motion-ad-preview strong b{
    display:block;

    color:var(--td-orange);
}


.td-motion-ad-preview__button{
    width:fit-content;

    margin-top:12px;

    padding:
        5px
        8px;

    border-radius:999px;

    background:var(--td-green);

    color:#fff;

    font-size:6px;
    font-weight:800;
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.td-motion-service h3{
    margin:0;

    font-size:
        clamp(27px,2.5vw,36px);

    line-height:1;

    letter-spacing:-.04em;

    color:#171717;
}


.td-motion-service > p{
    margin:
        16px
        0
        22px;

    font-size:13px;
    line-height:1.7;

    color:#747474;
}


/* =========================================================
   USES
========================================================= */

.td-motion-service__uses{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:auto;
}


.td-motion-service__uses span{
    padding:
        7px
        9px;

    border-radius:999px;

    background:#f5f5f3;

    font-size:8px;
    font-weight:800;

    color:#777;
}


/* =========================================================
   APPLICATIONS
========================================================= */

.td-motion-applications{
    display:grid;

    grid-template-columns:
        minmax(300px,.75fr)
        minmax(0,1.25fr);

    gap:
        clamp(45px,7vw,90px);

    align-items:start;

    margin-top:
        clamp(80px,8vw,120px);

    padding-top:
        clamp(55px,6vw,80px);

    border-top:
        1px solid
        rgba(0,0,0,.08);
}


.td-motion-applications__heading > span{
    display:block;

    margin-bottom:13px;

    font-size:10px;
    font-weight:800;

    letter-spacing:.15em;
    text-transform:uppercase;

    color:var(--td-green);
}


.td-motion-applications h3{
    margin:0;

    font-size:
        clamp(36px,4vw,56px);

    line-height:.98;

    letter-spacing:-.05em;

    font-weight:500;

    color:#171717;
}


.td-motion-applications h3 strong{
    display:block;

    margin-top:5px;

    font-weight:900;
}


/* =========================================================
   APPLICATION LIST
========================================================= */

.td-motion-applications__list{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:12px;
}


.td-motion-applications__list article{
    display:grid;

    grid-template-columns:auto 1fr;

    gap:14px;

    padding:20px;

    border-radius:17px;

    background:#fff;

    border:
        1px solid
        rgba(0,0,0,.055);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.td-motion-applications__list article:hover{
    transform:translateY(-4px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.055);
}


.td-motion-applications__list article > span{
    display:grid;
    place-items:center;

    width:31px;
    height:31px;

    border-radius:50%;

    background:
        rgba(242,138,26,.09);

    color:var(--td-orange);

    font-size:8px;
    font-weight:900;
}


.td-motion-applications h4{
    margin:2px 0 0;

    font-size:17px;

    color:#222;
}


.td-motion-applications p{
    margin:8px 0 0;

    font-size:11px;
    line-height:1.6;

    color:#818181;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:950px){

    .td-motion-services__intro{
        grid-template-columns:1fr;
    }


    .td-motion-services__grid{
        grid-template-columns:1fr;
    }


    .td-motion-service{
        min-height:auto;
    }


    .td-motion-applications{
        grid-template-columns:1fr;
    }

}


@media (max-width:650px){

    .td-motion-services{
        padding:
            70px
            20px;
    }


    .td-motion-applications__list{
        grid-template-columns:1fr;
    }

}


@media (prefers-reduced-motion:reduce){

    .td-motion-shape,
    .td-motion-edit-preview__timeline b,
    .td-motion-ad-preview__phone{
        animation:none;
    }

}
/* =========================================================
   BLOQUE 03 · MOTION SHOWCASE
========================================================= */

.td-motion-showcase{
    position:relative;
    overflow:hidden;

    padding:
        clamp(80px,8vw,125px)
        24px;

    background:#fff;
}

.td-motion-showcase__inner{
    width:min(1180px,100%);
    margin:0 auto;
}


/* INTRO */

.td-motion-showcase__intro{
    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(280px,.65fr);

    gap:clamp(40px,7vw,90px);

    align-items:end;
}

.td-motion-showcase__eyebrow{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:17px;

    font-size:10px;
    font-weight:800;

    letter-spacing:.15em;
    text-transform:uppercase;

    color:#777;
}

.td-motion-showcase__eyebrow i{
    width:34px;
    height:3px;

    border-radius:99px;

    background:var(--td-orange);
}

.td-motion-showcase h2{
    max-width:800px;

    margin:0;

    font-size:clamp(40px,4.8vw,68px);

    line-height:.98;
    letter-spacing:-.052em;

    font-weight:500;

    color:#171717;
}

.td-motion-showcase h2 strong{
    display:block;

    margin-top:5px;

    font-weight:900;

    color:var(--td-orange);
}

.td-motion-showcase__intro > p{
    margin:0 0 4px;

    font-size:15px;
    line-height:1.8;

    color:#777;
}


/* =========================================================
   VIDEO
========================================================= */

.td-motion-showcase__video{
    position:relative;

    margin-top:clamp(45px,6vw,70px);

    overflow:hidden;

    border-radius:28px;

    background:#171717;

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.13);
}

.td-motion-showcase__frame{
    position:relative;

    width:100%;
    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#111;
}

.td-motion-showcase__frame video{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


/* BAR */

.td-motion-showcase__bar{
    min-height:62px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;

    padding:0 22px;

    background:#171717;

    color:#fff;
}

.td-motion-showcase__bar > div{
    display:flex;
    align-items:center;

    gap:10px;
}

.td-motion-showcase__status{
    width:7px;
    height:7px;

    flex:0 0 auto;

    border-radius:50%;

    background:var(--td-green);

    box-shadow:
        0 0 0 6px
        rgba(47,155,87,.09);

    animation:
        tdShowcaseStatus
        2.4s
        ease-in-out
        infinite;
}

@keyframes tdShowcaseStatus{
    50%{
        box-shadow:
            0 0 0 11px
            rgba(47,155,87,0);
    }
}

.td-motion-showcase__bar p,
.td-motion-showcase__bar > span{
    margin:0;

    font-size:8px;
    font-weight:800;

    letter-spacing:.13em;
}

.td-motion-showcase__bar p{
    color:rgba(255,255,255,.62);
}

.td-motion-showcase__bar > span{
    color:var(--td-orange);
}


/* =========================================================
   STATEMENT
========================================================= */

.td-motion-showcase__statement{
    display:grid;

    grid-template-columns:auto 1fr;

    gap:clamp(25px,4vw,55px);

    align-items:start;

    max-width:900px;

    margin:
        clamp(40px,5vw,60px)
        auto
        0;
}

.td-motion-showcase__statement > span{
    padding-top:8px;

    font-size:9px;
    font-weight:900;

    letter-spacing:.12em;

    color:var(--td-green);
}

.td-motion-showcase__statement p{
    margin:0;

    font-size:clamp(24px,3vw,42px);

    line-height:1.15;
    letter-spacing:-.035em;

    color:#777;
}

.td-motion-showcase__statement strong{
    color:#171717;
}


/* =========================================================
   BLOQUE 04 · CTA FINAL
========================================================= */

.td-motion-cta{
    position:relative;

    padding:
        clamp(75px,8vw,110px)
        24px;

    overflow:hidden;

    background:#f8f8f6;
}

.td-motion-cta::before{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    right:-140px;
    top:-180px;

    border-radius:50%;

    background:rgba(242,138,26,.06);

    pointer-events:none;
}

.td-motion-cta::after{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    left:-130px;
    bottom:-150px;

    border-radius:50%;

    background:rgba(47,155,87,.05);

    pointer-events:none;
}

.td-motion-cta__inner{
    position:relative;
    z-index:2;

    width:min(1120px,100%);
    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(340px,.85fr);

    gap:clamp(45px,7vw,90px);

    align-items:center;
}


/* CONTENT */

.td-motion-cta__eyebrow{
    display:block;

    margin-bottom:15px;

    font-size:10px;
    font-weight:800;

    letter-spacing:.15em;
    text-transform:uppercase;

    color:var(--td-green);
}

.td-motion-cta h2{
    margin:0;

    font-size:clamp(42px,5vw,70px);

    line-height:.96;
    letter-spacing:-.055em;

    font-weight:500;

    color:#171717;
}

.td-motion-cta h2 strong{
    display:block;

    margin-top:7px;

    font-weight:900;

    color:var(--td-orange);
}

.td-motion-cta__content > p{
    max-width:650px;

    margin:24px 0 0;

    font-size:16px;
    line-height:1.75;

    color:#727272;
}


/* =========================================================
   WHATSAPP
========================================================= */

.td-motion-cta__action{
    padding-left:clamp(0px,3vw,35px);

    border-left:
        1px solid
        rgba(0,0,0,.08);
}

.td-motion-cta__whatsapp{
    display:flex;
    align-items:center;

    gap:14px;

    width:100%;
    max-width:430px;

    min-height:76px;

    padding:
        10px
        16px;

    border-radius:20px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    box-shadow:
        0 20px 45px
        rgba(37,211,102,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.td-motion-cta__whatsapp:hover{
    transform:translateY(-4px);

    box-shadow:
        0 25px 55px
        rgba(37,211,102,.27);
}

.td-motion-cta__wa-icon{
    display:grid;
    place-items:center;

    width:45px;
    height:45px;

    flex:0 0 auto;

    border-radius:50%;

    background:
        rgba(255,255,255,.16);
}

.td-motion-cta__wa-icon svg{
    width:25px;
    height:25px;

    fill:#fff;
}

.td-motion-cta__whatsapp > span:nth-child(2){
    flex:1;

    font-size:14px;
    font-weight:800;
}

.td-motion-cta__whatsapp small{
    display:block;

    margin-bottom:2px;

    font-size:8px;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;

    color:rgba(255,255,255,.72);
}

.td-motion-cta__whatsapp b{
    display:grid;
    place-items:center;

    width:31px;
    height:31px;

    border-radius:50%;

    background:
        rgba(255,255,255,.15);
}

.td-motion-cta__action > p{
    max-width:430px;

    margin:13px 0 0;

    text-align:center;

    font-size:9px;
    font-weight:700;

    letter-spacing:.08em;
    text-transform:uppercase;

    color:#999;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){

    .td-motion-showcase__intro,
    .td-motion-cta__inner{
        grid-template-columns:1fr;
    }

    .td-motion-showcase__intro{
        align-items:start;
    }

    .td-motion-showcase__intro > p{
        max-width:700px;
    }

    .td-motion-cta__action{
        padding-left:0;
        padding-top:30px;

        border-left:0;

        border-top:
            1px solid
            rgba(0,0,0,.08);
    }

}


@media (max-width:600px){

    .td-motion-showcase,
    .td-motion-cta{
        padding-left:20px;
        padding-right:20px;
    }

    .td-motion-showcase__video{
        border-radius:19px;
    }

    .td-motion-showcase__bar{
        min-height:55px;

        padding:0 15px;
    }

    .td-motion-showcase__bar > span{
        display:none;
    }

    .td-motion-showcase__statement{
        grid-template-columns:1fr;

        gap:10px;
    }

    .td-motion-cta__whatsapp{
        max-width:100%;
    }

}


@media (prefers-reduced-motion:reduce){

    .td-motion-showcase__status{
        animation:none;
    }

}