:root{
    --td-orange:#f28a1a;
    --td-orange-soft:#ff9d2e;
    --td-green:#2f9b57;
    --td-green-soft:#55c47f;

    --td-text:#171717;
    --td-text-soft:#686868;
    --td-bg:#ffffff;
    --td-bg-soft:#f7f7f5;
}


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

.td-services{
    position:relative;
    width:100%;
    padding:clamp(80px, 8vw, 130px) 24px;
    overflow:hidden;

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


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

.td-services__intro{
    width:min(1180px, 100%);
    margin:0 auto clamp(55px, 7vw, 90px);
}


.td-services__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:20px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;

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


.td-services__eyebrow::before{
    content:"";
    width:34px;
    height:2px;

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


.td-services__intro h1{
    max-width:880px;
    margin:0;

    font-size:clamp(42px, 6vw, 82px);
    line-height:.98;
    letter-spacing:-.045em;
    font-weight:700;

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


.td-services__intro h1 span{
    display:block;
    color:var(--td-orange);
}


.td-services__intro p{
    max-width:650px;
    margin:30px 0 0;

    font-size:clamp(17px, 1.4vw, 20px);
    line-height:1.7;

    color:var(--td-text-soft);
}


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

.td-services__grid{
    width:min(1380px, 100%);
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(12, 1fr);
    grid-auto-rows:130px;

    gap:18px;
}


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

.td-service-card{
    position:relative;

    grid-column:span 4;
    grid-row:span 3;

    min-height:390px;

    overflow:hidden;
    border-radius:26px;

    text-decoration:none;
    isolation:isolate;

    background:var(--td-bg-soft);

    box-shadow:
        0 18px 50px rgba(0,0,0,.08),
        0 2px 10px rgba(0,0,0,.04);

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


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

    box-shadow:
        0 28px 70px rgba(0,0,0,.13),
        0 5px 16px rgba(0,0,0,.06);
}


.td-service-card--large{
    grid-column:span 7;
    grid-row:span 4;
}


.td-service-card--vertical{
    grid-column:span 4;
    grid-row:span 4;
}


.td-service-card--wide{
    grid-column:span 8;
    grid-row:span 4;
}


/* =========================================================
   IMAGEN
========================================================= */

.td-service-card img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.01);

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;
}


.td-service-card:hover img{
    transform:scale(1.055);
}


/* =========================================================
   TRATAMIENTO CLARO SOBRE FOTO
========================================================= */

.td-service-card__shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02) 0%,
            rgba(255,255,255,.06) 35%,
            rgba(255,255,255,.82) 74%,
            rgba(255,255,255,.97) 100%
        );

    z-index:1;

    transition:background .45s ease;
}


.td-service-card:hover .td-service-card__shade{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02) 0%,
            rgba(255,255,255,.04) 30%,
            rgba(255,255,255,.78) 68%,
            rgba(255,255,255,.98) 100%
        );
}


/* =========================================================
   BORDE
========================================================= */

.td-service-card::before{
    content:"";

    position:absolute;
    inset:0;

    border:1px solid rgba(0,0,0,.08);
    border-radius:inherit;

    z-index:5;
    pointer-events:none;

    transition:border-color .4s ease;
}


.td-service-card::after{
    content:"";

    position:absolute;

    left:24px;
    right:24px;
    bottom:0;

    height:3px;

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

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .5s cubic-bezier(.2,.7,.2,1);

    z-index:6;
}


.td-service-card:hover::before{
    border-color:rgba(242,138,26,.30);
}


.td-service-card:hover::after{
    transform:scaleX(1);
}


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

.td-service-card__content{
    position:absolute;

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

    padding:clamp(26px, 3vw, 44px);

    z-index:3;

    transform:translateY(34px);

    transition:transform .45s cubic-bezier(.2,.7,.2,1);
}


.td-service-card:hover .td-service-card__content{
    transform:translateY(0);
}


.td-service-card__category{
    display:block;

    margin-bottom:12px;

    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;

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


.td-service-card h2{
    margin:0;

    max-width:90%;

    font-size:clamp(27px, 3vw, 45px);
    line-height:1.05;
    letter-spacing:-.035em;

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


.td-service-card p{
    max-width:520px;

    margin:15px 0 0;

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

    color:#555;

    opacity:0;
    transform:translateY(10px);

    transition:
        opacity .4s ease,
        transform .4s ease;
}


.td-service-card:hover p{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
   LINK
========================================================= */

.td-service-card__link{
    display:flex;
    align-items:center;
    gap:12px;

    margin-top:20px;

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

    color:var(--td-text);

    opacity:0;
    transform:translateY(10px);

    transition:
        opacity .4s ease .05s,
        transform .4s ease .05s;
}


.td-service-card:hover .td-service-card__link{
    opacity:1;
    transform:translateY(0);
}


.td-service-card__link b{
    display:grid;
    place-items:center;

    width:34px;
    height:34px;

    border-radius:50%;

    background:var(--td-orange);
    color:#fff;

    font-size:18px;
    font-weight:400;

    transition:
        transform .35s ease,
        background .35s ease;
}


.td-service-card:hover .td-service-card__link b{
    transform:translateX(4px);
}


/* =========================================================
   VARIANTE VERDE OPCIONAL
========================================================= */

.td-service-card--green .td-service-card__category{
    color:var(--td-green);
}


.td-service-card--green .td-service-card__link b{
    background:var(--td-green);
}


.td-service-card--green:hover::before{
    border-color:rgba(47,155,87,.30);
}


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

@media(max-width:1050px){

    .td-services__grid{
        grid-template-columns:repeat(2,1fr);
        grid-auto-rows:auto;
    }


    .td-service-card,
    .td-service-card--large,
    .td-service-card--vertical,
    .td-service-card--wide{
        grid-column:auto;
        grid-row:auto;

        min-height:440px;
    }

}


/* =========================================================
   RESPONSIVE MÓVIL
========================================================= */

@media(max-width:680px){

    .td-services{
        padding:65px 16px 75px;
    }


    .td-services__intro{
        margin-bottom:42px;
    }


    .td-services__intro h1{
        font-size:clamp(39px, 13vw, 58px);
        line-height:1;
    }


    .td-services__intro p{
        margin-top:22px;
        font-size:16px;
    }


    .td-services__grid{
        display:block;
    }


    .td-service-card,
    .td-service-card--large,
    .td-service-card--vertical,
    .td-service-card--wide{
        display:block;

        min-height:430px;

        margin-bottom:16px;

        border-radius:22px;
    }


    .td-service-card__content{
        padding:28px 24px;
        transform:none;
    }


    .td-service-card p,
    .td-service-card__link{
        opacity:1;
        transform:none;
    }


    .td-service-card::after{
        transform:scaleX(1);
    }


    .td-service-card h2{
        max-width:100%;
        font-size:32px;
    }

}
/* =========================================================
   TRANSICIÓN PRODUCCIÓN
========================================================= */

.td-services-transition{
    position:relative;
    padding:clamp(75px, 8vw, 120px) 24px 45px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8faf8 100%
        );
}


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


.td-services-transition__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:18px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;

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


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

    width:34px;
    height:2px;

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


.td-services-transition h2{
    max-width:900px;
    margin:0;

    font-size:clamp(38px, 5.5vw, 72px);
    line-height:1.02;
    letter-spacing:-.04em;

    color:#171717;
}


.td-services-transition h2 span{
    display:block;
    color:var(--td-green);
}


.td-services-transition p{
    max-width:680px;

    margin:26px 0 0;

    font-size:clamp(16px, 1.3vw, 19px);
    line-height:1.7;

    color:#686868;
}


/* segundo bloque con fondo muy claro */
.td-services--production{
    padding-top:35px;

    background:
        linear-gradient(
            180deg,
            #f8faf8 0%,
            #ffffff 100%
        );
}
/* =========================================================
   TD SERVICIOS — IMAGEN & EXPERIENCIAS
========================================================= */

.td-services-experience{
    position:relative;
    width:100%;

    padding:
        clamp(85px, 9vw, 140px)
        24px
        clamp(90px, 10vw, 150px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 48%,
            #ffffff 100%
        );

    overflow:hidden;
}


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

.td-services-experience__intro{
    width:min(1180px, 100%);
    margin:0 auto clamp(50px, 6vw, 80px);
}


.td-services-experience__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-bottom:18px;

    font-size:13px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;

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


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

    width:34px;
    height:2px;

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


.td-services-experience__intro h2{
    max-width:900px;
    margin:0;

    font-size:clamp(40px, 5.5vw, 72px);
    line-height:1.02;
    letter-spacing:-.04em;

    color:#171717;
}


.td-services-experience__intro h2 span{
    color:var(--td-orange);
}


.td-services-experience__intro p{
    max-width:670px;

    margin:26px 0 0;

    font-size:clamp(16px, 1.3vw, 19px);
    line-height:1.7;

    color:#686868;
}


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

.td-services-experience__grid{
    width:min(1380px, 100%);
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(12, 1fr);
    grid-template-rows:repeat(2, minmax(280px, 1fr));

    gap:18px;
}


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

.td-experience-card{
    position:relative;

    overflow:hidden;

    min-height:420px;

    border-radius:28px;

    text-decoration:none;

    background:#efefef;

    isolation:isolate;

    box-shadow:
        0 18px 50px rgba(0,0,0,.08),
        0 2px 10px rgba(0,0,0,.04);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease;
}


.td-experience-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 30px 75px rgba(0,0,0,.14),
        0 6px 20px rgba(0,0,0,.06);
}


/* =========================================================
   DISTRIBUCIÓN DIFERENTE
========================================================= */

.td-experience-card--hotel{
    grid-column:span 7;
    grid-row:span 2;

    min-height:650px;
}


.td-experience-card--animation{
    grid-column:span 5;
    grid-row:span 1;
}


.td-experience-card--tour{
    grid-column:span 5;
    grid-row:span 1;
}


/* =========================================================
   IMAGEN
========================================================= */

.td-experience-card img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.01);

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1),
        filter .8s ease;
}


.td-experience-card:hover img{
    transform:scale(1.06);
}


/* =========================================================
   OVERLAY CLARO
========================================================= */

.td-experience-card__overlay{
    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02) 0%,
            rgba(255,255,255,.02) 30%,
            rgba(255,255,255,.70) 68%,
            rgba(255,255,255,.98) 100%
        );

    transition:background .45s ease;
}


.td-experience-card:hover .td-experience-card__overlay{
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.00) 0%,
            rgba(255,255,255,.02) 25%,
            rgba(255,255,255,.66) 64%,
            rgba(255,255,255,.98) 100%
        );
}


/* =========================================================
   BORDE
========================================================= */

.td-experience-card::before{
    content:"";

    position:absolute;
    inset:0;

    border:1px solid rgba(0,0,0,.08);
    border-radius:inherit;

    pointer-events:none;
    z-index:5;

    transition:border-color .4s ease;
}


.td-experience-card:hover::before{
    border-color:rgba(242,138,26,.28);
}


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

.td-experience-card__content{
    position:absolute;

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

    z-index:3;

    padding:clamp(26px, 3vw, 44px);

    transform:translateY(30px);

    transition:transform .45s cubic-bezier(.2,.7,.2,1);
}


.td-experience-card:hover .td-experience-card__content{
    transform:translateY(0);
}


.td-experience-card__category{
    display:block;

    margin-bottom:10px;

    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;

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


.td-experience-card h3{
    max-width:580px;

    margin:0;

    font-size:clamp(28px, 3vw, 48px);
    line-height:1.04;
    letter-spacing:-.035em;

    color:#171717;
}


.td-experience-card p{
    max-width:520px;

    margin:15px 0 0;

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

    color:#555;

    opacity:0;
    transform:translateY(10px);

    transition:
        opacity .4s ease,
        transform .4s ease;
}


.td-experience-card:hover p{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
   ACCIÓN
========================================================= */

.td-experience-card__action{
    display:flex;
    align-items:center;
    gap:12px;

    margin-top:18px;

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

    color:#171717;

    opacity:0;
    transform:translateY(10px);

    transition:
        opacity .4s ease .05s,
        transform .4s ease .05s;
}


.td-experience-card:hover .td-experience-card__action{
    opacity:1;
    transform:translateY(0);
}


.td-experience-card__action b{
    display:grid;
    place-items:center;

    width:34px;
    height:34px;

    border-radius:50%;

    background:var(--td-orange);
    color:#fff;

    font-size:18px;
    font-weight:400;

    transition:
        transform .35s ease,
        background .35s ease;
}


.td-experience-card:hover .td-experience-card__action b{
    transform:translateX(4px);
}


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

.td-experience-card__badge{
    position:absolute;

    top:24px;
    right:24px;

    z-index:4;
}


.td-experience-card__badge span{
    display:grid;
    place-items:center;

    width:62px;
    height:62px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

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

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

    color:var(--td-green);

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        background .4s ease;
}


.td-experience-card:hover .td-experience-card__badge span{
    transform:rotate(12deg) scale(1.06);
}


/* =========================================================
   PEQUEÑO ACENTO
========================================================= */

.td-experience-card::after{
    content:"";

    position:absolute;

    left:28px;
    right:28px;
    bottom:0;

    height:3px;

    z-index:6;

    background:linear-gradient(
        90deg,
        var(--td-orange),
        var(--td-orange-soft),
        var(--td-green)
    );

    transform:scaleX(0);
    transform-origin:left;

    transition:transform .5s cubic-bezier(.2,.7,.2,1);
}


.td-experience-card:hover::after{
    transform:scaleX(1);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

    .td-services-experience__grid{
        grid-template-columns:repeat(2, 1fr);
        grid-template-rows:auto;
    }


    .td-experience-card--hotel,
    .td-experience-card--animation,
    .td-experience-card--tour{
        grid-column:auto;
        grid-row:auto;

        min-height:480px;
    }


    .td-experience-card--hotel{
        grid-column:1 / -1;
        min-height:560px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media(max-width:680px){

    .td-services-experience{
        padding:
            70px
            16px
            80px;
    }


    .td-services-experience__intro{
        margin-bottom:42px;
    }


    .td-services-experience__intro h2{
        font-size:clamp(38px, 12vw, 55px);
    }


    .td-services-experience__grid{
        display:block;
    }


    .td-experience-card,
    .td-experience-card--hotel,
    .td-experience-card--animation,
    .td-experience-card--tour{
        display:block;

        min-height:440px;

        margin-bottom:16px;

        border-radius:22px;
    }


    .td-experience-card__content{
        padding:28px 24px;
        transform:none;
    }


    .td-experience-card p,
    .td-experience-card__action{
        opacity:1;
        transform:none;
    }


    .td-experience-card::after{
        transform:scaleX(1);
    }


    .td-experience-card__badge{
        top:18px;
        right:18px;
    }


    .td-experience-card__badge span{
        width:54px;
        height:54px;
    }

}