/* =========================================================
   HERO 08 · FOTOGRAFÍA PARA HOTELES
========================================================= */

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


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

.td-hotelphoto-hero{
    position:relative;

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

    display:grid;

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

    overflow:hidden;

    background:#fff;
}


/* =========================================================
   FOTOGRAFÍA
========================================================= */

.td-hotelphoto-hero__photo{
    position:relative;

    min-height:88vh;

    overflow:hidden;

    background:#222;
}


.td-hotelphoto-hero__photo > img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1.04);

    animation:
        tdHotelPhotoZoom
        18s
        ease-in-out
        infinite alternate;
}


@keyframes tdHotelPhotoZoom{

    from{
        transform:scale(1.04);
    }

    to{
        transform:scale(1.11);
    }

}


/* =========================================================
   SOMBRA
========================================================= */

.td-hotelphoto-hero__shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.06),
            transparent 45%
        ),
        linear-gradient(
            0deg,
            rgba(0,0,0,.42),
            transparent 38%
        );
}


/* =========================================================
   VIEWFINDER
========================================================= */

.td-hotelphoto-viewfinder{
    position:absolute;

    z-index:3;

    inset:
        clamp(35px,5vw,70px);

    pointer-events:none;
}


.td-hotelphoto-corner{
    position:absolute;

    width:45px;
    height:45px;

    opacity:.75;

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


.td-hotelphoto-corner--tl{
    left:0;
    top:0;

    border-left:1px solid #fff;
    border-top:1px solid #fff;
}


.td-hotelphoto-corner--tr{
    right:0;
    top:0;

    border-right:1px solid #fff;
    border-top:1px solid #fff;
}


.td-hotelphoto-corner--bl{
    left:0;
    bottom:0;

    border-left:1px solid #fff;
    border-bottom:1px solid #fff;
}


.td-hotelphoto-corner--br{
    right:0;
    bottom:0;

    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}


@keyframes tdHotelFocusCorner{

    0%,100%{
        width:45px;
        height:45px;

        opacity:.65;
    }

    50%{
        width:55px;
        height:55px;

        opacity:1;
    }

}


/* =========================================================
   FOCUS CENTRAL
========================================================= */

.td-hotelphoto-focus{
    position:absolute;

    left:50%;
    top:50%;

    width:58px;
    height:58px;

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

    opacity:.65;
}


.td-hotelphoto-focus span{
    position:absolute;

    width:15px;
    height:15px;
}


.td-hotelphoto-focus span:nth-child(1){
    left:0;
    top:0;

    border-left:1px solid #fff;
    border-top:1px solid #fff;
}


.td-hotelphoto-focus span:nth-child(2){
    right:0;
    top:0;

    border-right:1px solid #fff;
    border-top:1px solid #fff;
}


.td-hotelphoto-focus span:nth-child(3){
    left:0;
    bottom:0;

    border-left:1px solid #fff;
    border-bottom:1px solid #fff;
}


.td-hotelphoto-focus span:nth-child(4){
    right:0;
    bottom:0;

    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}


/* =========================================================
   CAMERA INFO
========================================================= */

.td-hotelphoto-camera{
    position:absolute;

    z-index:5;

    left:
        clamp(35px,5vw,70px);

    bottom:
        clamp(35px,5vw,60px);

    display:flex;
    align-items:center;

    gap:11px;

    padding:
        9px
        13px;

    border-radius:8px;

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

    backdrop-filter:blur(8px);

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

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

    letter-spacing:.08em;
}


.td-hotelphoto-camera i{
    width:3px;
    height:3px;

    border-radius:50%;

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


/* =========================================================
   MARKERS
========================================================= */

.td-hotelphoto-marker{
    position:absolute;
    z-index:6;

    display:flex;
    align-items:center;

    gap:9px;

    color:#fff;

    font-size:9px;

    text-shadow:
        0 2px 12px
        rgba(0,0,0,.35);

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


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

    width:26px;
    height:26px;

    border-radius:50%;

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

    font-size:7px;
}


.td-hotelphoto-marker strong{
    font-size:9px;

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


.td-hotelphoto-marker--one{
    left:15%;
    top:27%;
}


.td-hotelphoto-marker--two{
    right:12%;
    top:47%;

    animation-delay:.8s;
}


.td-hotelphoto-marker--three{
    left:30%;
    bottom:22%;

    animation-delay:1.5s;
}


@keyframes tdHotelMarker{

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

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

}


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

.td-hotelphoto-hero__content{
    position:relative;

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

    min-height:88vh;

    padding:
        clamp(90px,9vw,130px)
        clamp(35px,5vw,75px)
        55px;

    background:#fff;
}


.td-hotelphoto-hero__content::before{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-100px;
    top:5%;

    border-radius:50%;

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

    filter:blur(30px);
}


.td-hotelphoto-hero__content-inner{
    position:relative;
    z-index:2;

    max-width:620px;
}


/* =========================================================
   EYEBROW
========================================================= */

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

    gap:11px;

    margin-bottom:24px;

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

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

    color:#777;
}


.td-hotelphoto-hero__eyebrow > span{
    width:36px;
    height:3px;

    border-radius:99px;

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


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

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

    font-size:
        clamp(48px,5vw,78px);

    line-height:.96;

    letter-spacing:-.055em;

    font-weight:500;

    color:#171717;
}


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

    margin-top:7px;

    font-weight:900;

    color:var(--td-orange);

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


@keyframes tdHotelTitle{

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

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

}


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

.td-hotelphoto-hero__lead{
    max-width:570px;

    margin:
        clamp(28px,3vw,38px)
        0
        0;

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

    line-height:1.75;

    color:#696969;
}


/* =========================================================
   TYPES
========================================================= */

.td-hotelphoto-types{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:9px;

    margin-top:25px;

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

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

    color:#969696;
}


.td-hotelphoto-types i{
    width:4px;
    height:4px;

    border-radius:50%;

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


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

.td-hotelphoto-actions{
    display:flex;
    align-items:center;

    flex-wrap:wrap;

    gap:22px;

    margin-top:31px;
}


.td-hotelphoto-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:16px;

    min-height:58px;

    padding:
        0
        23px;

    border-radius:999px;

    background:#171717;

    color:#fff;

    text-decoration:none;

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

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


.td-hotelphoto-button:hover{
    transform:translateY(-3px);

    background:var(--td-orange);

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


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

    width:28px;
    height:28px;

    border-radius:50%;

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


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

    gap:8px;

    color:#666;

    text-decoration:none;

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


.td-hotelphoto-more:hover{
    color:var(--td-green);
}


/* =========================================================
   QUOTE
========================================================= */

.td-hotelphoto-quote{
    position:relative;
    z-index:2;

    max-width:520px;

    display:flex;
    align-items:flex-start;

    gap:13px;

    margin-top:
        clamp(35px,5vw,60px);

    padding-top:23px;

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


.td-hotelphoto-quote > span{
    font-family:Georgia,serif;

    font-size:38px;
    line-height:.8;

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


.td-hotelphoto-quote p{
    margin:0;

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

    color:#8a8a8a;
}


.td-hotelphoto-quote strong{
    color:#555;
}


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

@media (max-width:1050px){

    .td-hotelphoto-hero{
        grid-template-columns:1fr;
    }


    .td-hotelphoto-hero__photo{
        min-height:65vh;
    }


    .td-hotelphoto-hero__content{
        min-height:auto;

        padding:
            70px
            35px;
    }


    .td-hotelphoto-hero__content-inner,
    .td-hotelphoto-quote{
        width:min(760px,100%);
        max-width:none;

        margin-left:auto;
        margin-right:auto;
    }

}


@media (max-width:650px){

    .td-hotelphoto-hero__photo{
        min-height:57vh;
    }


    .td-hotelphoto-viewfinder{
        inset:25px;
    }


    .td-hotelphoto-marker--one{
        left:10%;
        top:25%;
    }


    .td-hotelphoto-marker--two{
        right:8%;
    }


    .td-hotelphoto-marker--three{
        left:18%;
    }


    .td-hotelphoto-camera{
        left:25px;
        bottom:25px;
    }


    .td-hotelphoto-hero__content{
        padding:
            60px
            20px;
    }


    .td-hotelphoto-hero h1{
        font-size:
            clamp(45px,12vw,64px);
    }


    .td-hotelphoto-actions{
        flex-direction:column;
        align-items:flex-start;

        gap:17px;
    }

}


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

    .td-hotelphoto-hero__photo > img,
    .td-hotelphoto-corner,
    .td-hotelphoto-marker,
    .td-hotelphoto-hero h1 strong{
        animation:none;
    }

}
/* =========================================================
   CIERRE · FOTOGRAFÍA PARA HOTELES · VERSIÓN BLANCA
========================================================= */

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

    padding:
        clamp(70px,7vw,105px)
        24px
        32px;

    background:#fff;
    color:#171717;
}


/* detalles ambientales */

.td-hotelphoto-cta::before{
    content:"";
    position:absolute;

    width:430px;
    height:430px;

    right:-160px;
    top:-230px;

    border-radius:50%;

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

    filter:blur(30px);
}


.td-hotelphoto-cta::after{
    content:"";
    position:absolute;

    width:320px;
    height:320px;

    left:-170px;
    bottom:-200px;

    border-radius:50%;

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

    filter:blur(30px);
}


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

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

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

    display:grid;

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

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

    align-items:center;
}


/* =========================================================
   EYEBROW
========================================================= */

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

    gap:11px;

    margin-bottom:17px;

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

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

    color:#8a8a8a;
}


.td-hotelphoto-cta__eyebrow span{
    width:35px;
    height:3px;

    border-radius:99px;

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


/* =========================================================
   TÍTULO
========================================================= */

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

    margin:0;

    font-size:clamp(40px,4.7vw,66px);

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

    font-weight:500;

    color:#171717;
}


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

    margin-top:5px;

    font-weight:900;

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


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

    margin:24px 0 0;

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

    line-height:1.75;

    color:#6f6f6f;
}


/* =========================================================
   ÁREA DE ACCIÓN
========================================================= */

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

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


.td-hotelphoto-cta__question{
    margin-bottom:17px;

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

    letter-spacing:.04em;

    color:#555;
}


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

.td-hotelphoto-cta__whatsapp{
    display:flex;
    align-items: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,
        filter .3s ease;
}


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

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

    filter:brightness(.97);
}


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

    width:35px;
    height:35px;

    flex:0 0 auto;

    border-radius:50%;

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


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

    fill:#fff;
}


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

    width:29px;
    height:29px;

    margin-left:3px;

    border-radius:50%;

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


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

    max-width:330px;

    margin-top:14px;

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

    color:#999;
}


/* =========================================================
   PALABRAS INFERIORES
========================================================= */

.td-hotelphoto-cta__footer{
    position:relative;
    z-index:2;

    width:min(1120px,100%);

    margin:
        clamp(50px,6vw,75px)
        auto
        0;

    padding-top:24px;

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

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

    flex-wrap:wrap;

    gap:12px;

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

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

    color:#999;
}


.td-hotelphoto-cta__footer i{
    width:4px;
    height:4px;

    border-radius:50%;

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


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

@media (max-width:850px){

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


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

        border-left:0;

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

}


@media (max-width:600px){

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


    .td-hotelphoto-cta__whatsapp{
        width:100%;
        max-width:365px;

        justify-content:center;
    }


    .td-hotelphoto-cta__footer{
        margin-top:50px;
        gap:9px;
    }

}