/* =========================================================
   HERO · GAFETES DE IDENTIFICACIÓN
========================================================= */

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


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

.td-badge-hero{
    position:relative;

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

    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-badge-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-badge-hero__glow{
    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    pointer-events:none;
}


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

    right:8%;
    top:17%;

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


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

    right:30%;
    bottom:12%;

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


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

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

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

    display:grid;

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

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

    align-items:center;
}


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

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


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

    border-radius:99px;

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


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

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

    line-height:.95;

    letter-spacing:-.055em;

    font-weight:500;

    color:#171717;
}


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

    margin-top:8px;

    font-weight:900;

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


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

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

    flex-wrap:wrap;

    gap:24px;

    margin-top:32px;
}


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

    background:var(--td-orange);

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


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

    width:28px;
    height:28px;

    border-radius:50%;

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


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

    gap:8px;

    color:#555;

    text-decoration:none;

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


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


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

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

    border-radius:50%;

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


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

.td-badge-hero__visual{
    position:relative;

    min-height:570px;
}


/* =========================================================
   GAFETE PRINCIPAL
========================================================= */

.td-badge-card{
    position:absolute;

    left:50%;
    top:50%;

    width:360px;
    min-height:470px;

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

    padding:27px;

    border-radius:26px;

    background:#fff;

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

    box-shadow:
        0 34px 85px
        rgba(0,0,0,.14);

    overflow:hidden;

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


@keyframes tdBadgeFloat{

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

    50%{
        transform:
            translate(-50%,-50%)
            rotate(-1deg)
            translateY(-10px);
    }

}


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

.td-badge-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;

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

    letter-spacing:.13em;

    color:#777;
}


.td-badge-card__status{
    display:flex;
    align-items:center;

    gap:6px;

    padding:
        6px
        9px;

    border-radius:999px;

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

    color:var(--td-green);

    font-size:7px;
}


.td-badge-card__status i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--td-green);

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


/* =========================================================
   BODY
========================================================= */

.td-badge-card__body{
    display:grid;

    grid-template-columns:
        95px
        1fr;

    gap:20px;

    align-items:center;

    margin-top:45px;
}


.td-badge-card__photo{
    display:grid;
    place-items:center;

    width:95px;
    height:115px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #f1eee8,
            #dedbd5
        );

    color:#777;

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


.td-badge-card__info small,
.td-badge-card__info strong,
.td-badge-card__info span{
    display:block;
}


.td-badge-card__info small{
    margin-bottom:5px;

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

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

    color:#aaa;
}


.td-badge-card__info strong{
    font-size:19px;

    line-height:1.05;

    color:#171717;
}


.td-badge-card__info span{
    margin-top:7px;

    font-size:9px;

    color:#888;
}


/* =========================================================
   DIVIDER
========================================================= */

.td-badge-card__divider{
    height:1px;

    margin:
        38px
        0
        25px;

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


/* =========================================================
   BOTTOM
========================================================= */

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


.td-badge-card__bottom small,
.td-badge-card__bottom strong{
    display:block;
}


.td-badge-card__bottom small{
    margin-bottom:4px;

    font-size:7px;

    color:#aaa;
}


.td-badge-card__bottom strong{
    font-size:11px;

    color:#555;
}


/* =========================================================
   QR SIMULADO
========================================================= */

.td-badge-card__qr{
    width:58px;
    height:58px;

    display:grid;

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

    gap:4px;

    padding:5px;

    background:#f6f6f4;
}


.td-badge-card__qr span{
    background:#171717;
}


/* =========================================================
   STRIPE
========================================================= */

.td-badge-card__stripe{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:7px;

    background:
        linear-gradient(
            90deg,
            var(--td-orange),
            var(--td-orange) 62%,
            var(--td-green) 62%
        );
}


/* =========================================================
   SECONDARY BADGE
========================================================= */

.td-badge-secondary{
    position:absolute;

    right:3%;
    bottom:8%;

    width:185px;
    height:225px;

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

    border-radius:22px;

    background:#171717;

    color:#fff;

    box-shadow:
        0 28px 60px
        rgba(0,0,0,.18);

    transform:rotate(7deg);

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


.td-badge-secondary > span{
    font-size:8px;
    font-weight:800;

    letter-spacing:.15em;

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


.td-badge-secondary strong{
    margin-top:22px;

    font-size:26px;

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


.td-badge-secondary small{
    margin-top:9px;

    font-size:9px;

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


@keyframes tdBadgeSecondary{

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

}


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

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


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

    width:34px;
    height:34px;

    border-radius:10px;

    background:#f3f3f1;

    color:var(--td-orange);

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


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


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

    color:#333;
}


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

    font-size:7px;

    color:#999;
}


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


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

    animation-delay:.7s;
}


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


.td-badge-float--three{
    left:4%;
    bottom:8%;

    animation-delay:1.4s;
}


@keyframes tdBadgeCardFloat{

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

}


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

@media (max-width:1050px){

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

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

        gap:60px;
    }

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

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

        margin:0 auto;
    }

}


@media (max-width:700px){

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

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

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

        gap:18px;
    }

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

        transform:scale(.88);

        transform-origin:center top;

        margin-bottom:-55px;
    }

}


@media (max-width:520px){

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

        transform:scale(.74);

        margin-bottom:-120px;
    }

}/* =========================================================
   BLOQUE 02 · GAFETES DE IDENTIFICACIÓN
========================================================= */

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

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

    background:#f8f8f6;
}

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


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

.td-badge-services__intro{
    display:grid;

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

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

    align-items:start;
}

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

    border-radius:99px;

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

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

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

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

    font-weight:500;

    color:#171717;
}

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

    margin-top:7px;

    font-weight:900;

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

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

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

    color:#6d6d6d;
}

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


/* =========================================================
   CARDS
========================================================= */

.td-badge-services__grid{
    display:grid;

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

    gap:16px;

    margin-top:clamp(60px,6vw,90px);
}

.td-badge-service{
    min-height:300px;

    padding:26px;

    border-radius:22px;

    background:#fff;

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

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

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

    box-shadow:
        0 22px 50px
        rgba(0,0,0,.07);
}

.td-badge-service__number{
    display:grid;
    place-items:center;

    width:40px;
    height:40px;

    margin-bottom:38px;

    border-radius:50%;

    background:#171717;

    color:#fff;

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

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

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

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

    font-size:clamp(26px,2.5vw,35px);

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

    font-weight:500;

    color:#171717;
}

.td-badge-service h3 strong{
    display:block;
    font-weight:900;
}

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

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

    color:#747474;
}


/* =========================================================
   DATA
========================================================= */

.td-badge-data{
    margin-top:clamp(70px,7vw,105px);
}

.td-badge-data__heading{
    max-width:760px;
}

.td-badge-data__heading > span{
    display:block;

    margin-bottom:12px;

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

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

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

.td-badge-data h3{
    margin:0;

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

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

    font-weight:500;

    color:#171717;
}

.td-badge-data h3 strong{
    display:block;
    font-weight:900;
}

.td-badge-data__list{
    display:grid;

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

    gap:12px;

    margin-top:34px;
}

.td-badge-data__list div{
    display:flex;
    align-items:center;

    gap:12px;

    min-height:68px;

    padding:15px 17px;

    border-radius:15px;

    background:#fff;

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

.td-badge-data__list span{
    display:grid;
    place-items:center;

    width:30px;
    height:30px;

    flex:0 0 auto;

    border-radius:50%;

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

    color:var(--td-orange);

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

.td-badge-data__list strong{
    font-size:12px;

    color:#444;
}


/* =========================================================
   SEGURIDAD
========================================================= */

.td-badge-security{
    display:grid;

    grid-template-columns:auto 1fr;

    gap:26px;

    align-items:start;

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

    padding:
        clamp(30px,4vw,46px);

    border-radius:26px;

    background:#fff;

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

.td-badge-security__icon{
    display:grid;
    place-items:center;

    width:58px;
    height:58px;

    border-radius:18px;

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

    color:var(--td-green);

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

.td-badge-security__content > span{
    display:block;

    margin-bottom:12px;

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

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

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

.td-badge-security h3{
    margin:0;

    max-width:760px;

    font-size:clamp(30px,3.5vw,48px);

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

    font-weight:500;

    color:#171717;
}

.td-badge-security h3 strong{
    display:block;

    font-weight:900;
}

.td-badge-security p{
    max-width:830px;

    margin:18px 0 0;

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

    color:#707070;
}


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

@media (max-width:950px){

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

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

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

}

@media (max-width:600px){

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

    .td-badge-data__list{
        grid-template-columns:1fr;
    }

    .td-badge-security{
        grid-template-columns:1fr;

        gap:18px;

        padding:26px 22px;
    }

}
/* =========================================================
   BLOQUE 03 · GAFETES COSTA RICA
========================================================= */

.td-gcr{
    position:relative;
    overflow:hidden;

    padding:
        clamp(85px,9vw,135px)
        24px;

    background:#fff;
}


/* detalle superior */

.td-gcr::before{
    content:"";

    position:absolute;

    left:50%;
    top:0;

    width:min(1180px,calc(100% - 48px));
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.09),
            transparent
        );
}


/* glow */

.td-gcr::after{
    content:"";

    position:absolute;

    width:480px;
    height:480px;

    right:-180px;
    top:5%;

    border-radius:50%;

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

    filter:blur(20px);

    pointer-events:none;
}


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

.td-gcr__inner{
    position:relative;
    z-index:2;

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

    display:grid;

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

    gap:
        clamp(55px,8vw,110px);

    align-items:center;
}


/* =========================================================
   BRAND
========================================================= */

.td-gcr__brand{
    max-width:590px;
}


/* eyebrow */

.td-gcr__eyebrow{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:28px;

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

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

    color:#777;
}


.td-gcr__eyebrow i{
    width:35px;
    height:3px;

    border-radius:99px;

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


/* =========================================================
   LOGO
========================================================= */

.td-gcr__logo{
    display:flex;
    align-items:center;

    min-height:90px;

    margin-bottom:32px;
}


.td-gcr__logo img{
    display:block;

    width:min(360px,100%);
    height:auto;
}


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

.td-gcr h2{
    margin:0;

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

    line-height:.98;

    letter-spacing:-.05em;

    font-weight:500;

    color:#171717;
}


.td-gcr h2 strong{
    display:block;

    margin-top:6px;

    font-weight:900;

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


/* =========================================================
   COPY
========================================================= */

.td-gcr__brand > p{
    max-width:580px;

    margin:
        25px
        0
        0;

    font-size:
        clamp(15px,1.2vw,18px);

    line-height:1.8;

    color:#6e6e6e;
}


.td-gcr__brand > p strong{
    color:#292929;
}


/* =========================================================
   BUTTON
========================================================= */

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

    gap:17px;

    min-height:58px;

    margin-top:30px;

    padding:
        0
        11px
        0
        23px;

    border-radius:999px;

    background:#171717;

    color:#fff;

    text-decoration:none;

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

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


.td-gcr__button > span:last-child{
    display:grid;
    place-items:center;

    width:37px;
    height:37px;

    border-radius:50%;

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


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

    background:var(--td-orange);

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


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

.td-gcr__visual{
    position:relative;

    min-height:510px;
}


/* =========================================================
   PANEL
========================================================= */

.td-gcr__panel{
    position:absolute;

    left:50%;
    top:50%;

    width:min(470px,88%);

    min-height:405px;

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

    padding:24px;

    overflow:hidden;

    border-radius:27px;

    background:#f6f5f2;

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

    box-shadow:
        0 32px 75px
        rgba(0,0,0,.11);

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


@keyframes tdGcrPanelFloat{

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

    50%{
        transform:
            translate(-50%,-50%)
            rotate(-.5deg)
            translateY(-8px);
    }

}


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

.td-gcr__panel-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-bottom:18px;

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


.td-gcr__panel-top > span{
    font-size:7px;
    font-weight:900;

    letter-spacing:.14em;

    color:#999;
}


.td-gcr__panel-status{
    display:flex;
    align-items:center;

    gap:8px;

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

    letter-spacing:.1em;

    color:#555;
}


.td-gcr__panel-status i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--td-green);

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

    animation:
        tdGcrStatus
        2.5s
        ease-in-out
        infinite;
}


@keyframes tdGcrStatus{

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

}


/* =========================================================
   BADGE
========================================================= */

.td-gcr__badge{
    display:grid;

    grid-template-columns:
        92px
        1fr;

    gap:20px;

    align-items:center;

    margin-top:28px;

    padding:22px;

    border-radius:20px;

    background:#fff;

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


.td-gcr__badge-photo{
    display:grid;
    place-items:center;

    width:92px;
    height:108px;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #ece9e3,
            #dcd8d0
        );

    color:#777;

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


.td-gcr__badge-info small,
.td-gcr__badge-info strong,
.td-gcr__badge-info > span{
    display:block;
}


.td-gcr__badge-info small{
    margin-bottom:5px;

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

    letter-spacing:.12em;

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


.td-gcr__badge-info strong{
    font-size:20px;

    color:#202020;
}


.td-gcr__badge-info > span{
    margin-top:5px;

    font-size:9px;

    color:#888;
}


.td-gcr__badge-code{
    display:inline-flex;

    margin-top:14px;

    padding:
        6px
        9px;

    border-radius:7px;

    background:#f3f3f1;

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

    letter-spacing:.09em;

    color:#777;
}


/* =========================================================
   PROCESS
========================================================= */

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

    gap:10px;

    margin-top:24px;
}


.td-gcr__process > i{
    flex:1;

    height:1px;

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


.td-gcr__process-item{
    display:flex;
    align-items:center;

    gap:8px;
}


.td-gcr__process-item > span{
    display:grid;
    place-items:center;

    width:28px;
    height:28px;

    flex:0 0 auto;

    border-radius:50%;

    background:#fff;

    color:var(--td-orange);

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


.td-gcr__process-item strong,
.td-gcr__process-item small{
    display:block;
}


.td-gcr__process-item strong{
    font-size:8px;

    color:#444;
}


.td-gcr__process-item small{
    margin-top:1px;

    font-size:6px;

    color:#aaa;
}


/* =========================================================
   BOTTOM
========================================================= */

.td-gcr__panel-bottom{
    display:flex;
    justify-content:space-between;

    gap:15px;

    margin-top:25px;
    padding-top:16px;

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


.td-gcr__panel-bottom span,
.td-gcr__panel-bottom strong{
    font-size:6px;
    font-weight:900;

    letter-spacing:.11em;
}


.td-gcr__panel-bottom span{
    color:#aaa;
}


.td-gcr__panel-bottom strong{
    color:var(--td-green);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.td-gcr__float{
    position:absolute;
    z-index:10;

    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:
        tdGcrFloat
        6s
        ease-in-out
        infinite;
}


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

    width:34px;
    height:34px;

    border-radius:10px;

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

    color:var(--td-orange);

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


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


.td-gcr__float strong{
    font-size:10px;

    color:#333;
}


.td-gcr__float small{
    margin-top:2px;

    font-size:7px;

    color:#999;
}


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


.td-gcr__float--two{
    right:0;
    top:19%;

    animation-delay:.7s;
}


.td-gcr__float--two > span{
    color:var(--td-green);

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


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

    animation-delay:1.4s;
}


@keyframes tdGcrFloat{

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

}


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

@media (max-width:1000px){

    .td-gcr__inner{
        grid-template-columns:1fr;

        gap:60px;
    }


    .td-gcr__brand{
        max-width:760px;
    }


    .td-gcr__visual{
        width:min(680px,100%);

        margin:0 auto;
    }

}


@media (max-width:650px){

    .td-gcr{
        padding:
            70px
            20px;
    }


    .td-gcr__logo img{
        width:min(300px,100%);
    }


    .td-gcr__visual{
        min-height:480px;

        transform:scale(.88);

        transform-origin:center top;

        margin-bottom:-55px;
    }


    .td-gcr__process-item div{
        display:none;
    }

}


@media (max-width:480px){

    .td-gcr__visual{
        width:118%;
        left:-9%;

        transform:scale(.76);

        margin-bottom:-110px;
    }

}


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

    .td-gcr__panel,
    .td-gcr__float,
    .td-gcr__panel-status i{
        animation:none;
    }

}
/* =========================================================
   BLOQUE 03 · CIERRE GAFETES
========================================================= */

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

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

    background:#fff;
}


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

    position:absolute;

    width:400px;
    height:400px;

    right:-190px;
    top:-210px;

    border-radius:50%;

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

    pointer-events:none;
}


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

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

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(360px,.75fr);

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

    align-items:center;
}


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

.td-badge-cta__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-badge-cta__eyebrow span{
    width:35px;
    height:3px;

    border-radius:99px;

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


.td-badge-cta h2{
    max-width:720px;

    margin:0;

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

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

    font-weight:500;

    color:#171717;
}


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

    margin-top:6px;

    font-weight:900;

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


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

    margin:24px 0 0;

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

    color:#707070;
}


/* =========================================================
   REQUIREMENTS
========================================================= */

.td-badge-cta__requirements{
    display:grid;

    gap:9px;

    margin-top:32px;
}


.td-badge-cta__requirements > div{
    display:grid;

    grid-template-columns:auto 1fr;

    gap:13px;

    align-items:center;

    padding:13px 0;

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


.td-badge-cta__requirements > div > span{
    display:grid;
    place-items:center;

    width:32px;
    height:32px;

    border-radius:50%;

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

    color:var(--td-orange);

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


.td-badge-cta__requirements p{
    margin:0;

    font-size:12px;
    line-height:1.45;

    color:#8a8a8a;
}


.td-badge-cta__requirements strong{
    display:block;

    margin-bottom:2px;

    font-size:13px;

    color:#333;
}


/* =========================================================
   ACTION CARD
========================================================= */

.td-badge-cta__card{
    position:relative;

    padding:
        clamp(28px,4vw,38px);

    overflow:hidden;

    border-radius:27px;

    background:#171717;

    color:#fff;

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


.td-badge-cta__card::after{
    content:"";

    position:absolute;

    width:170px;
    height:170px;

    right:-85px;
    top:-85px;

    border-radius:50%;

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


.td-badge-cta__card-label{
    display:block;

    margin-bottom:18px;

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

    letter-spacing:.16em;

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


.td-badge-cta__card h3{
    margin:0;

    font-size:clamp(28px,3vw,40px);

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

    font-weight:500;
}


.td-badge-cta__card h3 strong{
    display:block;

    margin-top:4px;

    color:var(--td-orange);

    font-weight:900;
}


.td-badge-cta__card > p{
    margin:18px 0 0;

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

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


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

.td-badge-cta__whatsapp{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:12px;

    width:100%;

    margin-top:25px;

    min-height:66px;

    padding:
        8px
        12px;

    border-radius:17px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

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


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

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


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

    width:42px;
    height:42px;

    flex:0 0 auto;

    border-radius:50%;

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


.td-badge-cta__wa-icon svg{
    width:24px;
    height:24px;

    fill:#fff;
}


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

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


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

    margin-bottom:2px;

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

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

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


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

    width:29px;
    height:29px;

    border-radius:50%;

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


/* =========================================================
   GAFETES COSTA RICA
========================================================= */

.td-badge-cta__specialist{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-top:12px;

    padding:
        14px
        16px;

    border-radius:16px;

    background:#f7f7f5;

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


.td-badge-cta__specialist span,
.td-badge-cta__specialist strong{
    display:block;
}


.td-badge-cta__specialist span{
    margin-bottom:3px;

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

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

    color:#999;
}


.td-badge-cta__specialist strong{
    font-size:14px;

    color:#333;
}


.td-badge-cta__specialist > a{
    display:grid;
    place-items:center;

    width:35px;
    height:35px;

    flex:0 0 auto;

    border-radius:50%;

    background:#fff;

    color:var(--td-orange);

    text-decoration:none;

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

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.td-badge-cta__specialist > a:hover{
    transform:rotate(8deg);

    background:var(--td-orange);

    color:#fff;
}


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

@media (max-width:900px){

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

    .td-badge-cta__action{
        max-width:520px;
    }

}


@media (max-width:600px){

    .td-badge-cta{
        padding:
            65px
            20px;
    }

}