/* =========================================================
   HERO · DISEÑO GRÁFICO
========================================================= */

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

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

    --td-black:#171717;
    --td-gray:#666;
    --td-light:#f7f7f5;
}


/* =========================================================
   BASE
========================================================= */

.td-graphic-hero{
    position:relative;

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

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 78% 32%,
            rgba(242,138,26,.08),
            transparent 25%
        ),
        radial-gradient(
            circle at 72% 70%,
            rgba(47,155,87,.07),
            transparent 24%
        ),
        #fff;

    padding:
        clamp(95px, 9vw, 135px)
        24px
        clamp(65px, 6vw, 90px);
}


/* =========================================================
   GRID DE FONDO
========================================================= */

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

    pointer-events:none;

    opacity:.32;

    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,.8) 35%,
            rgba(0,0,0,.8) 100%
        );
}


/* =========================================================
   DECORACIÓN
========================================================= */

.td-graphic-hero__decor{
    position:absolute;

    border-radius:999px;

    filter:blur(2px);

    pointer-events:none;
}


.td-graphic-hero__decor--orange{
    width:360px;
    height:360px;

    right:-160px;
    top:12%;

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


.td-graphic-hero__decor--green{
    width:190px;
    height:190px;

    left:-90px;
    bottom:12%;

    border:1px solid rgba(47,155,87,.18);
}


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

.td-graphic-hero__inner{
    position:relative;
    z-index:5;

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

    display:grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(520px, 1.12fr);

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

    align-items:center;
}


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

.td-graphic-hero__content{
    position:relative;
    z-index:10;

    max-width:650px;
}


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

    gap:12px;

    margin-bottom:24px;

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

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

    color:#565656;
}


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

    border-radius:20px;

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


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

    font-size:
        clamp(58px, 6.4vw, 104px);

    line-height:.91;

    letter-spacing:-.065em;

    font-weight:500;

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


.td-graphic-hero h1 strong{
    position:relative;

    display:block;

    width:max-content;

    max-width:100%;

    font-weight:900;

    color:var(--td-orange);

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


.td-graphic-hero h1 strong::after{
    content:"";

    position:absolute;

    left:2px;
    bottom:-12px;

    width:44%;
    height:5px;

    border-radius:20px;

    background:var(--td-green);

    transform-origin:left center;

    animation:
        tdGraphicLine
        1.2s
        .5s
        cubic-bezier(.2,.75,.2,1)
        both;
}


@keyframes tdGraphicWordIn{

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

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

}


@keyframes tdGraphicLine{

    from{
        transform:scaleX(0);
    }

    to{
        transform:scaleX(1);
    }

}


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

.td-graphic-hero__lead{
    max-width:600px;

    margin:
        clamp(38px,4vw,52px)
        0
        0;

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

    line-height:1.75;

    color:#626262;
}


/* =========================================================
   ACCIONES
========================================================= */

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

    flex-wrap:wrap;

    gap:26px;

    margin-top:34px;
}


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

    gap:16px;

    min-height:58px;

    padding:0 24px;

    border-radius:999px;

    background:var(--td-black);

    color:#fff;

    text-decoration:none;

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

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


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

    background:var(--td-orange);

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


.td-graphic-hero__button-arrow{
    display:grid;
    place-items:center;

    width:28px;
    height:28px;

    border-radius:50%;

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


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

    gap:9px;

    color:#555;

    text-decoration:none;

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

    transition:color .25s ease;
}


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


/* =========================================================
   NOTA
========================================================= */

.td-graphic-hero__note{
    display:flex;
    align-items:center;

    gap:10px;

    margin-top:30px;

    font-size:13px;

    color:#8a8a8a;
}


.td-graphic-hero__note-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--td-green);

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


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

.td-graphic-hero__visual{
    position:relative;

    min-height:520px;

    isolation:isolate;
}


/* =========================================================
   ÓRBITA
========================================================= */

.td-graphic-hero__orbit{
    position:absolute;

    width:470px;
    height:470px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    border:
        1px dashed
        rgba(0,0,0,.10);

    animation:
        tdGraphicOrbit
        28s
        linear
        infinite;
}


.td-graphic-hero__orbit::before{
    content:"";

    position:absolute;

    width:9px;
    height:9px;

    top:-5px;
    left:50%;

    border-radius:50%;

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


@keyframes tdGraphicOrbit{

    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

}


/* =========================================================
   PIEZAS
========================================================= */

.td-graphic-card{
    position:absolute;

    overflow:hidden;

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

    box-shadow:
        0 28px 70px
        rgba(0,0,0,.12);

    transition:
        transform .4s
        cubic-bezier(.2,.75,.2,1),
        box-shadow .4s ease;

    will-change:transform;
}


.td-graphic-card:hover{
    z-index:20;

    box-shadow:
        0 38px 90px
        rgba(0,0,0,.18);
}


/* =========================================================
   REVISTA
========================================================= */

.td-graphic-card--magazine{
    width:280px;
    height:370px;

    right:8%;
    top:8%;

    padding:28px;

    background:#181818;

    color:#fff;

    transform:rotate(5deg);

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


@keyframes tdFloatMagazine{

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

    50%{
        transform:
            rotate(3deg)
            translateY(-14px);
    }

}


.td-graphic-card__top{
    font-size:9px;
    font-weight:700;

    letter-spacing:.18em;

    opacity:.6;
}


.td-graphic-card__magazine-title{
    position:absolute;

    left:28px;
    bottom:35px;

    font-size:35px;
    line-height:.95;

    letter-spacing:-.04em;
}


.td-graphic-card__magazine-title strong{
    display:block;

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


.td-graphic-card__circle{
    position:absolute;

    width:145px;
    height:145px;

    right:-25px;
    top:75px;

    border-radius:50%;

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


.td-graphic-card__lines{
    position:absolute;

    left:28px;
    top:80px;

    display:flex;
    flex-direction:column;

    gap:7px;
}


.td-graphic-card__lines span{
    display:block;

    width:65px;
    height:2px;

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


/* =========================================================
   SOCIAL
========================================================= */

.td-graphic-card--social{
    width:220px;
    height:220px;

    left:3%;
    top:28%;

    padding:24px;

    background:var(--td-orange);

    transform:rotate(-7deg);

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


@keyframes tdFloatSocial{

    0%,100%{
        transform:
            rotate(-7deg)
            translateY(0);
    }

    50%{
        transform:
            rotate(-5deg)
            translateY(14px);
    }

}


.td-graphic-card__tag{
    display:inline-flex;

    padding:5px 9px;

    border-radius:20px;

    background:#fff;

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

    letter-spacing:.12em;
}


.td-graphic-card--social strong{
    position:absolute;

    left:24px;
    bottom:22px;

    font-size:28px;
    line-height:.94;

    letter-spacing:-.04em;

    color:#fff;
}


.td-graphic-card__social-symbol{
    position:absolute;

    right:20px;
    top:24px;

    font-size:42px;

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

    animation:
        tdGraphicPlus
        10s
        linear
        infinite;
}


@keyframes tdGraphicPlus{

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   BUSINESS CARD
========================================================= */

.td-graphic-card--business{
    width:260px;
    height:145px;

    right:23%;
    bottom:9%;

    padding:20px;

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

    background:#fff;

    transform:rotate(-4deg);

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


@keyframes tdFloatBusiness{

    0%,100%{
        transform:
            rotate(-4deg)
            translateY(0);
    }

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

}


.td-graphic-card__business-logo{
    display:grid;
    place-items:center;

    width:44px;
    height:44px;

    border-radius:50%;

    background:var(--td-green);

    color:#fff;

    font-weight:800;
}


.td-graphic-card--business strong{
    display:block;

    font-size:14px;
}


.td-graphic-card--business span{
    display:block;

    margin-top:4px;

    color:#999;

    font-size:10px;
}


/* =========================================================
   FLYER
========================================================= */

.td-graphic-card--flyer{
    width:180px;
    height:240px;

    left:23%;
    bottom:3%;

    padding:22px;

    background:#f4f1ec;

    transform:rotate(8deg);

    animation:
        tdFloatFlyer
        6.5s
        ease-in-out
        infinite;
}


@keyframes tdFloatFlyer{

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

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

}


.td-graphic-card__flyer-number{
    color:var(--td-orange);

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


.td-graphic-card__flyer-title{
    position:absolute;

    left:22px;
    bottom:42px;

    font-size:24px;
    line-height:1;

    font-weight:800;

    letter-spacing:-.04em;
}


.td-graphic-card__flyer-line{
    position:absolute;

    left:22px;
    bottom:22px;

    width:55px;
    height:4px;

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


/* =========================================================
   CHIPS
========================================================= */

.td-graphic-chip{
    position:absolute;

    padding:10px 16px;

    border-radius:999px;

    background:#fff;

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

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.08);

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

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

    color:#585858;
}


.td-graphic-chip--one{
    top:7%;
    left:24%;

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


.td-graphic-chip--two{
    top:58%;
    right:0;

    animation:
        tdChipFloat
        6s
        .5s
        ease-in-out
        infinite;
}


.td-graphic-chip--three{
    bottom:3%;
    right:3%;

    animation:
        tdChipFloat
        7s
        1s
        ease-in-out
        infinite;
}


@keyframes tdChipFloat{

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

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

}


/* =========================================================
   CURSOR
========================================================= */

.td-graphic-cursor{
    position:absolute;

    left:48%;
    top:46%;

    width:18px;
    height:18px;

    border-radius:50%;

    background:var(--td-orange);

    box-shadow:
        0 0 0 8px
        rgba(242,138,26,.12);

    animation:
        tdGraphicCursorMove
        8s
        ease-in-out
        infinite;
}


.td-graphic-cursor span{
    position:absolute;

    width:35px;
    height:1px;

    left:15px;
    top:8px;

    background:
        rgba(0,0,0,.25);
}


@keyframes tdGraphicCursorMove{

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

    25%{
        transform:translate(90px,-70px);
    }

    50%{
        transform:translate(125px,65px);
    }

    75%{
        transform:translate(-40px,95px);
    }

}


/* =========================================================
   SCROLL
========================================================= */

.td-graphic-hero__scroll{
    position:absolute;

    left:50%;
    bottom:24px;

    transform:translateX(-50%);

    display:flex;
    align-items:center;

    gap:13px;

    z-index:10;

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

    letter-spacing:.14em;

    text-transform:uppercase;

    color:#999;
}


.td-graphic-hero__scroll-line{
    position:relative;

    width:46px;
    height:1px;

    overflow:hidden;

    background:
        rgba(0,0,0,.12);
}


.td-graphic-hero__scroll-line i{
    position:absolute;

    inset:0;

    background:var(--td-orange);

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


@keyframes tdScrollLine{

    0%{
        transform:translateX(-100%);
    }

    50%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(100%);
    }

}


/* =========================================================
   HOVER GENERAL
========================================================= */

.td-graphic-card--magazine:hover{
    transform:
        rotate(1deg)
        translateY(-12px)
        scale(1.035);
}


.td-graphic-card--social:hover{
    transform:
        rotate(-2deg)
        translateY(-10px)
        scale(1.035);
}


.td-graphic-card--business:hover{
    transform:
        rotate(0deg)
        translateY(-10px)
        scale(1.035);
}


.td-graphic-card--flyer:hover{
    transform:
        rotate(3deg)
        translateY(-10px)
        scale(1.035);
}


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

@media (max-width:1050px){

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

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

        gap:60px;
    }

    .td-graphic-hero__content{
        max-width:760px;
    }

    .td-graphic-hero__visual{
        width:min(690px,100%);
        min-height:520px;

        margin:0 auto;
    }

}


@media (max-width:700px){

    .td-graphic-hero{
        padding:
            95px
            20px
            60px;
    }

    .td-graphic-hero h1{
        font-size:
            clamp(52px,15vw,76px);
    }

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

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

        gap:18px;
    }

    .td-graphic-hero__visual{
        min-height:500px;

        transform:
            scale(.9);

        transform-origin:center top;

        margin-bottom:-40px;
    }

    .td-graphic-card--magazine{
        width:230px;
        height:310px;

        right:1%;
    }

    .td-graphic-card--social{
        width:180px;
        height:180px;

        left:0;
    }

    .td-graphic-card--business{
        width:220px;

        right:8%;
    }

    .td-graphic-card--flyer{
        width:150px;
        height:205px;

        left:18%;
    }

    .td-graphic-hero__orbit{
        width:410px;
        height:410px;
    }

}


@media (max-width:520px){

    .td-graphic-hero__visual{
        width:115%;
        left:-7.5%;

        transform:scale(.78);

        margin-bottom:-90px;
    }

    .td-graphic-hero__scroll{
        display:none;
    }

}
/* =========================================================
   BLOQUE 02 · DISEÑO GRÁFICO PARA EMPRESAS
========================================================= */

.td-graphic-info{
    position:relative;

    padding:
        clamp(65px, 7vw, 100px)
        24px;

    background:#f8f8f6;

    overflow:hidden;
}


.td-graphic-info::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    top:110px;

    border-radius:50%;

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


.td-graphic-info__inner{
    position:relative;
    z-index:2;

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


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

.td-graphic-info__intro{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-areas:
        "eyebrow copy"
        "title   copy";
    gap:18px clamp(55px,7vw,110px);
    align-items:start;
}


.td-graphic-info__eyebrow{
    grid-area:eyebrow;
    margin-bottom:0;

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

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

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


.td-graphic-info h2{
    margin:0;

    max-width:600px;

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

    line-height:.98;

    letter-spacing:-.055em;

    font-weight:500;

    color:#171717;
    grid-area:title;
}


.td-graphic-info h2 strong{
    display:block;

    color:#171717;

    font-weight:900;
}


.td-graphic-info__copy{
    grid-area:copy;
    padding-top:0;
}


.td-graphic-info__copy p{
    margin:0 0 20px;

    font-size:
        clamp(17px,1.3vw,20px);

    line-height:1.8;

    color:#666;
}


.td-graphic-info__copy p:last-child{
    margin-bottom:0;
}


.td-graphic-info__copy strong{
    color:#262626;
}


/* =========================================================
   SERVICIOS
========================================================= */

.td-graphic-info__services{
    display:grid;

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

    gap:22px;

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


.td-graphic-service{
    position:relative;

    min-height:420px;

    padding:
        30px
        28px
        28px;

    display:flex;
    flex-direction:column;

    border-radius:26px;

    background:#fff;

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

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.045);

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


.td-graphic-service:hover{
    transform:translateY(-8px);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.08);
}


.td-graphic-service__number{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    margin-bottom:45px;

    border-radius:50%;

    background:#171717;

    color:#fff;

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


.td-graphic-service--orange
.td-graphic-service__number{
    background:var(--td-orange);
}


.td-graphic-service--green
.td-graphic-service__number{
    background:var(--td-green);
}


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

    font-size:
        clamp(28px,2.6vw,38px);

    line-height:1;

    letter-spacing:-.045em;

    font-weight:500;

    color:#1c1c1c;
}


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

    font-weight:900;
}


.td-graphic-service p{
    margin:
        22px
        0
        28px;

    font-size:15px;

    line-height:1.75;

    color:#707070;
}


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

    gap:8px;

    margin-top:auto;
}


.td-graphic-service__tags span{
    padding:
        7px
        11px;

    border-radius:999px;

    background:#f4f4f2;

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

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

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

    color:#777;
}


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

.td-graphic-info__statement{
    display:flex;
    align-items:center;

    gap:20px;

    margin-top:38px;

    padding-top:26px;

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


.td-graphic-info__statement > span{
    flex:0 0 auto;

    width:50px;
    height:4px;

    border-radius:20px;

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


.td-graphic-info__statement p{
    margin:0;

    font-size:
        clamp(19px,2vw,27px);

    line-height:1.35;

    letter-spacing:-.025em;

    color:#555;
}


.td-graphic-info__statement strong{
    color:#171717;
}


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

@media (max-width:900px){

    .td-graphic-info__intro{
        grid-template-columns:1fr;
        grid-template-areas:
            "eyebrow"
            "title"
            "copy";
        gap:22px;
    }

    .td-graphic-info__copy{
        padding-top:0;
    }

    .td-graphic-info__services{
        grid-template-columns:1fr;
    }

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

}


@media (max-width:600px){

    .td-graphic-info{
        padding:
            65px
            20px;
    }

    .td-graphic-service{
        padding:
            26px
            22px;
    }

    .td-graphic-service__number{
        margin-bottom:32px;
    }

    .td-graphic-info__statement{
        align-items:flex-start;
    }

}
/* =========================================================
   BLOQUE 03 · CTA FINAL
========================================================= */

.td-graphic-cta{
    position:relative;
    overflow:hidden;
    display:block !important;

    padding:
        clamp(75px,7vw,100px)
        24px !important;

    background:#171717;

    min-height:auto !important;
    height:auto !important;
    color:#fff;
}


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

.td-graphic-cta__grid{
    position:absolute;
    inset:0;

    opacity:.12;

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

    background-size:48px 48px;
}


/* =========================================================
   FORMAS
========================================================= */

.td-graphic-cta__shape{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}


.td-graphic-cta__shape--orange{
     width:280px;
    height:280px;

    right:-90px;
    top:-100px;

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

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


.td-graphic-cta__shape--green{
    width:220px;
    height:220px;

    left:-80px;
    bottom:-90px;

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

    border:
        1px solid
        rgba(47,155,87,.15);
}


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

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

    width:min(900px,100%);
    margin:0 auto;
    padding:0 !important;

    top:auto !important;
    bottom:auto !important;
    transform:none !important;

    text-align:center;
}


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

.td-graphic-cta__eyebrow{
    margin-bottom:18px;

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

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

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


.td-graphic-cta h2{
    margin:0 auto;

    font-size:
        clamp(48px,6vw,88px);

    line-height:.95;

    letter-spacing:-.06em;

    font-weight:500;

    color:#fff;
}


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

    font-weight:900;

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


.td-graphic-cta > *
{
    position:relative;
}


.td-graphic-cta__inner > p{
    max-width:760px;

    margin:
        35px
        auto
        0;

    font-size:
        clamp(17px,1.45vw,21px);

    line-height:1.75;

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


.td-graphic-cta__inner
.td-graphic-cta__secondary{
    margin-top:14px;

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


/* =========================================================
   BOTÓN
========================================================= */

.td-graphic-cta__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:18px;

    min-height:62px;

    margin-top:38px;

    padding:
        0
        27px;

    border-radius:999px;

    background:var(--td-orange);

    color:#fff;

    text-decoration:none;

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

    box-shadow:
        0 20px 50px
        rgba(242,138,26,.20);

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


.td-graphic-cta__button:hover{
    transform:translateY(-4px);

    background:var(--td-green);

    box-shadow:
        0 24px 55px
        rgba(47,155,87,.22);
}


.td-graphic-cta__button span:last-child{
    display:grid;
    place-items:center;

    width:31px;
    height:31px;

    border-radius:50%;

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


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

.td-graphic-cta__meta{
    display:flex;
    align-items:center;
    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:34px;

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

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

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


.td-graphic-cta__meta span{
    width:4px;
    height:4px;

    border-radius:50%;

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


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

@media (max-width:600px){

    .td-graphic-cta{
        padding:
            72px
            20px;
    }

    .td-graphic-cta__inner > p{
        font-size:16px;
    }

    .td-graphic-cta__button{
        width:100%;

        max-width:330px;
    }

    .td-graphic-cta__meta{
        line-height:1.8;
    }

}