/* =========================================================
   HERO · TOUR VIRTUAL 360
========================================================= */

:root{
    --td-orange:#f28a1a;
    --td-green:#2f9b57;
    --td-black:#171717;
}


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

.td-360-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-360-hero__grid{
    position:absolute;
    inset:0;

    opacity:.23;

    pointer-events:none;

    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,
            rgba(0,0,0,.72)
        );
}


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

.td-360-hero__glow{
    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    pointer-events:none;
}


.td-360-hero__glow--orange{
    width:290px;
    height:290px;

    right:8%;
    top:17%;

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


.td-360-hero__glow--green{
    width:230px;
    height:230px;

    right:30%;
    bottom:12%;

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


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

.td-360-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;
}


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

.td-360-hero__content{
    max-width:670px;
}


.td-360-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-360-hero__eyebrow > span{
    width:38px;
    height:3px;

    border-radius:99px;

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


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

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

    line-height:.95;

    letter-spacing:-.055em;

    font-weight:500;

    color:#171717;
}


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

    margin-top:8px;

    font-weight:900;

    color:var(--td-orange);

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


@keyframes td360Title{

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

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

}


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

.td-360-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-360-hero__actions{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:24px;

    margin-top:32px;
}


.td-360-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-360-hero__button:hover{
    transform:translateY(-3px);

    background:var(--td-orange);

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


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

    width:28px;
    height:28px;

    border-radius:50%;

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


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

    gap:8px;

    color:#555;

    text-decoration:none;

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


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


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

.td-360-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-360-hero__meta i{
    width:4px;
    height:4px;

    border-radius:50%;

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


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

.td-360-hero__visual{
    position:relative;

    min-height:580px;
}


/* =========================================================
   VIEWER
========================================================= */

.td-360-viewer{
    position:absolute;

    left:50%;
    top:50%;

    width:min(550px,90%);

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

    overflow:hidden;

    border-radius:25px;

    background:#171717;

    color:#fff;

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

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


@keyframes td360ViewerFloat{

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

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

}


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

.td-360-viewer__header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:17px 20px;

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

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

    letter-spacing:.12em;
}


.td-360-viewer__header div{
    display:flex;
    align-items:center;

    gap:8px;
}


.td-360-viewer__header div > span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--td-green);

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


.td-360-viewer__header small{
    font-size:9px;

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


/* =========================================================
   SCENE
========================================================= */

.td-360-scene{
    position:relative;

    height:400px;

    overflow:hidden;

    perspective:700px;

    background:
        linear-gradient(
            #dfe9e5 0%,
            #edf1ed 50%,
            #c7bba8 51%,
            #a78f70 100%
        );
}


/* sky */

.td-360-scene__sky{
    position:absolute;

    inset:
        0
        0
        48%;

    background:
        linear-gradient(
            #e8efec,
            #d4e2dd
        );
}


/* walls */

.td-360-scene__wall{
    position:absolute;

    top:20%;
    bottom:24%;

    width:43%;

    background:#eeeae2;
}


.td-360-scene__wall--left{
    left:-10%;

    transform:
        skewY(-8deg)
        rotateY(18deg);
}


.td-360-scene__wall--right{
    right:-10%;

    transform:
        skewY(8deg)
        rotateY(-18deg);
}


/* floor */

.td-360-scene__floor{
    position:absolute;

    left:-15%;
    right:-15%;

    bottom:-20%;

    height:60%;

    background:
        repeating-linear-gradient(
            90deg,
            #a98e6c 0,
            #a98e6c 26px,
            #b59b79 27px,
            #b59b79 52px
        );

    transform:
        perspective(500px)
        rotateX(60deg);

    transform-origin:bottom center;
}


/* window */

.td-360-scene__window{
    position:absolute;

    left:50%;
    top:19%;

    width:190px;
    height:145px;

    transform:translateX(-50%);

    border:10px solid #f5f5f1;

    background:
        linear-gradient(
            #9ec3ca,
            #c8ddd4 55%,
            #6b8e70 56%
        );

    box-shadow:
        0 15px 25px
        rgba(0,0,0,.08);
}


/* table */

.td-360-scene__table{
    position:absolute;

    z-index:3;

    left:50%;
    bottom:18%;

    width:145px;
    height:45px;

    transform:
        translateX(-50%)
        perspective(250px)
        rotateX(55deg);

    border-radius:50%;

    background:#765c44;

    box-shadow:
        0 24px 25px
        rgba(0,0,0,.18);
}


/* =========================================================
   HOTSPOTS
========================================================= */

.td-360-hotspot{
    position:absolute;
    z-index:10;

    display:flex;
    align-items:center;

    gap:7px;

    padding:0;

    border:0;

    background:transparent;

    color:#333;

    font-family:inherit;

    cursor:pointer;

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


.td-360-hotspot > span{
    display:grid;
    place-items:center;

    width:31px;
    height:31px;

    border-radius:50%;

    background:var(--td-orange);

    color:#fff;

    box-shadow:
        0 0 0 7px
        rgba(242,138,26,.14);

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


.td-360-hotspot small{
    padding:
        6px
        8px;

    border-radius:7px;

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

    backdrop-filter:blur(5px);

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

    letter-spacing:.07em;
    text-transform:uppercase;
}


.td-360-hotspot--one{
    left:12%;
    top:41%;
}


.td-360-hotspot--two{
    right:12%;
    top:29%;

    animation-delay:.6s;
}


.td-360-hotspot--two > span{
    background:var(--td-green);

    box-shadow:
        0 0 0 7px
        rgba(47,155,87,.13);
}


.td-360-hotspot--three{
    left:50%;
    bottom:20%;

    transform:translateX(-50%);

    flex-direction:column;

    animation-delay:1.2s;
}


@keyframes td360Hotspot{

    50%{
        margin-top:-5px;
    }

}


/* =========================================================
   CROSSHAIR
========================================================= */

.td-360-crosshair{
    position:absolute;

    z-index:5;

    left:50%;
    top:50%;

    width:60px;
    height:60px;

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

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

    border-radius:50%;

    opacity:.7;
}


.td-360-crosshair::before,
.td-360-crosshair::after{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

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


.td-360-crosshair::before{
    width:80px;
    height:1px;

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


.td-360-crosshair::after{
    width:1px;
    height:80px;

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


.td-360-crosshair span{
    position:absolute;

    left:50%;
    top:50%;

    width:6px;
    height:6px;

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

    border-radius:50%;

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


/* =========================================================
   PANORAMA LINE
========================================================= */

.td-360-panorama-line{
    position:absolute;

    z-index:4;

    left:8%;
    right:8%;

    top:50%;

    height:42px;

    border-top:
        1px dashed
        rgba(255,255,255,.32);

    border-radius:50%;

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


.td-360-panorama-line span{
    position:absolute;

    left:20%;

    top:-4px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#fff;

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


@keyframes td360PanDot{

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

    50%{
        left:82%;
    }

}


@keyframes td360Panorama{

    50%{
        transform:scaleX(.92);
    }

}


/* =========================================================
   ROTATE
========================================================= */

.td-360-rotate{
    position:absolute;

    z-index:12;

    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;

    gap:9px;

    padding:
        8px
        11px;

    border-radius:999px;

    background:
        rgba(0,0,0,.35);

    backdrop-filter:blur(7px);

    color:#fff;
}


.td-360-rotate > div{
    font-size:6px;
    font-weight:900;

    letter-spacing:.12em;
}


/* =========================================================
   FOOTER VIEWER
========================================================= */

.td-360-viewer__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    min-height:58px;

    padding:0 20px;
}


.td-360-viewer__footer > span{
    font-size:7px;
    font-weight:800;

    letter-spacing:.12em;

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


.td-360-viewer__controls{
    display:flex;
    align-items:center;

    gap:13px;
}


.td-360-viewer__controls span{
    display:grid;
    place-items:center;

    width:25px;
    height:25px;

    border-radius:50%;

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

    color:
        rgba(255,255,255,.55);

    font-size:13px;
}


.td-360-viewer__controls strong{
    font-size:9px;

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


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

.td-360-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:
        td360Float
        6s
        ease-in-out
        infinite;
}


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

    width:35px;
    height:35px;

    border-radius:10px;

    background:#f3f3f1;

    color:var(--td-orange);

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


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


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

    color:#333;
}


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

    font-size:7px;

    color:#999;
}


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


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

    animation-delay:.7s;
}


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


.td-360-float--three{
    right:3%;
    bottom:7%;

    animation-delay:1.4s;
}


@keyframes td360Float{

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

}


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

@media (max-width:1050px){

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


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

        gap:60px;
    }


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

        margin:0 auto;
    }

}


@media (max-width:700px){

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


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


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

        gap:18px;
    }


    .td-360-hero__visual{
        min-height:510px;

        transform:scale(.88);

        transform-origin:center top;

        margin-bottom:-55px;
    }

}


@media (max-width:520px){

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

        transform:scale(.74);

        margin-bottom:-120px;
    }

}


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

    .td-360-viewer,
    .td-360-hotspot,
    .td-360-panorama-line,
    .td-360-panorama-line span,
    .td-360-float{
        animation:none;
    }

}
/* =========================================================
   BLOQUE 02 · TOUR VIRTUAL 360
========================================================= */

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

    padding:
        clamp(78px,8vw,118px)
        24px;

    background:#f8f8f6;
}

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


/* INTRO */

.td-360-services__intro{
    display:grid;

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

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

    align-items:start;
}

.td-360-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-360-services__eyebrow span{
    width:35px;
    height:3px;

    border-radius:99px;

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

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

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

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

    font-weight:500;

    color:#171717;
}

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

    margin-top:7px;

    font-weight:900;

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

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

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

    color:#6d6d6d;
}


/* GRID */

.td-360-services__grid{
    display:grid;

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

    gap:16px;

    margin-top:clamp(65px,7vw,95px);
}

.td-360-service{
    min-height:500px;

    display:flex;
    flex-direction:column;

    padding:27px;

    border-radius:24px;

    background:#fff;

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

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

.td-360-service:hover{
    transform:translateY(-6px);

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

.td-360-service--dark{
    background:#171717;
    color:#fff;
}

.td-360-service--featured{
    background:
        linear-gradient(
            145deg,
            rgba(242,138,26,.10),
            rgba(47,155,87,.06)
        );
}


/* TOP */

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

.td-360-service__top > span{
    display:grid;
    place-items:center;

    width:40px;
    height:40px;

    border-radius:50%;

    background:#171717;

    color:#fff;

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

.td-360-service--dark
.td-360-service__top > span{
    background:var(--td-orange);
}

.td-360-service--featured
.td-360-service__top > span{
    background:var(--td-green);
}

.td-360-service__top small{
    font-size:7px;
    font-weight:900;

    letter-spacing:.12em;

    color:#aaa;
}


/* ICON */

.td-360-service__icon{
    display:grid;
    place-items:center;

    width:82px;
    height:82px;

    margin-top:42px;

    border-radius:50%;

    background:#f4f4f2;

    color:var(--td-orange);

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

.td-360-service--dark
.td-360-service__icon{
    background:
        rgba(255,255,255,.07);

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

.td-360-service--featured
.td-360-service__icon{
    background:#fff;
}


/* TITLE */

.td-360-service h3{
    margin:30px 0 0;

    font-size:clamp(28px,2.8vw,39px);

    line-height:1;
    letter-spacing:-.045em;

    font-weight:500;

    color:#171717;
}

.td-360-service h3 strong{
    display:block;

    margin-top:4px;

    font-weight:900;
}

.td-360-service--dark h3{
    color:#fff;
}


/* COPY */

.td-360-service > p{
    margin:18px 0 0;

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

    color:#747474;
}

.td-360-service--dark > p{
    color:
        rgba(255,255,255,.60);
}


/* TAGS */

.td-360-service__tags{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:auto;
    padding-top:28px;
}

.td-360-service__tags span{
    padding:
        7px
        9px;

    border-radius:999px;

    background:#f4f4f2;

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

    color:#777;
}

.td-360-service--dark
.td-360-service__tags span{
    background:
        rgba(255,255,255,.07);

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

.td-360-service--featured
.td-360-service__tags span{
    background:#fff;
}


/* RESPONSIVE */

@media (max-width:950px){

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

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

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

}

@media (max-width:600px){

    .td-360-services{
        padding:
            68px
            20px;
    }

}
/* =========================================================
   BLOQUE 03 · USOS TOUR 360
========================================================= */

.td-360-uses{
    padding:
        clamp(78px,8vw,115px)
        24px;

    background:#fff;
}

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

.td-360-uses__heading{
    max-width:780px;
}

.td-360-uses__heading > span{
    display:block;

    margin-bottom:12px;

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

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

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

.td-360-uses h2{
    margin:0;

    font-size:clamp(40px,4.6vw,64px);

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

    font-weight:500;

    color:#171717;
}

.td-360-uses h2 strong{
    display:block;

    margin-top:5px;

    font-weight:900;

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

.td-360-uses__heading > p{
    max-width:680px;

    margin:22px 0 0;

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

    color:#707070;
}

.td-360-uses__grid{
    display:grid;

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

    gap:14px;

    margin-top:38px;
}

.td-360-uses__grid article{
    min-height:240px;

    padding:24px;

    border-radius:19px;

    background:#f8f8f6;

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

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

.td-360-uses__grid article:hover{
    transform:translateY(-5px);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.06);
}

.td-360-uses__grid article > span{
    display:block;

    margin-bottom:37px;

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

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

.td-360-uses__grid h3{
    margin:0;

    font-size:22px;
    line-height:1.05;

    color:#171717;
}

.td-360-uses__grid p{
    margin:14px 0 0;

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

    color:#777;
}

@media (max-width:900px){

    .td-360-uses__grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}

@media (max-width:600px){

    .td-360-uses{
        padding:
            68px
            20px;
    }

    .td-360-uses__grid{
        grid-template-columns:1fr;
    }

    .td-360-uses__grid article{
        min-height:auto;
    }

}
/* =========================================================
   BLOQUE 04 · CTA TOUR VIRTUAL 360
========================================================= */

.td-360-cta{
    position:relative;
    overflow:hidden;

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

    background:#f8f8f6;
}

.td-360-cta__inner{
    width:min(1120px,100%);
    margin:0 auto;

    display:grid;

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

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

    align-items:center;
}

.td-360-cta__eyebrow{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:16px;

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

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

    color:#777;
}

.td-360-cta__eyebrow span{
    width:34px;
    height:3px;

    border-radius:99px;

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

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

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

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

    font-weight:500;

    color:#171717;
}

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

    margin-top:6px;

    font-weight:900;

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

.td-360-cta__content p{
    max-width:680px;

    margin:24px 0 0;

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

    color:#6f6f6f;
}

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

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

.td-360-cta__whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:14px;

    width:fit-content;

    min-height:62px;

    padding:0 18px;

    border-radius:999px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

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

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

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

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

    box-shadow:
        0 24px 52px
        rgba(37,211,102,.26);
}

.td-360-cta__icon{
    display:grid;
    place-items:center;

    width:35px;
    height:35px;

    flex:0 0 auto;

    border-radius:50%;

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

.td-360-cta__icon svg{
    width:21px;
    height:21px;

    fill:#fff;
}

.td-360-cta__arrow{
    display:grid;
    place-items:center;

    width:29px;
    height:29px;

    border-radius:50%;

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

.td-360-cta__action small{
    display:block;

    max-width:350px;

    margin-top:13px;

    font-size:10px;
    line-height:1.55;

    color:#999;
}

@media (max-width:900px){

    .td-360-cta__inner{
        grid-template-columns:1fr;
    }

    .td-360-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-360-cta{
        padding:
            65px
            20px;
    }

    .td-360-cta__whatsapp{
        width:100%;
        max-width:370px;
    }

}