.ctco04-cities,
.ctco04-cities *{
    box-sizing:border-box;
}

.ctco04-cities{
    width:100%;
    overflow:hidden;
    padding:var(--ctco04-pad) 0;
    background:var(--ctco04-bg);
    color:var(--ctco04-title);
    font-family:Arial,Helvetica,sans-serif;
}

.ctco04-shell{
    width:min(var(--ctco04-container),calc(100% - 60px));
    margin:0 auto;
}

.ctco04-reveal{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.2,.7,.2,1);
}

.ctco04-visible{
    opacity:1!important;
    transform:none!important;
}

.ctco04-delay-1{
    transition-delay:.12s;
}

.ctco04-kicker{
    display:inline-block;
    color:var(--ctco04-accent);
    font-size:12px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.ctco04-section-head{
    display:grid;
    grid-template-columns:1fr .7fr;
    gap:100px;
    align-items:end;
    margin-bottom:55px;
}

.ctco04-section-head h2{
    margin:15px 0 0;
    color:var(--ctco04-title);
    font-size:var(--ctco04-title-size);
    line-height:1.15;
    font-weight:600;
    letter-spacing:-.035em;
}

.ctco04-section-head>p{
    margin:0;
    color:var(--ctco04-text);
    font-size:16px;
    line-height:1.75;
}

.ctco04-city-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:var(--ctco04-card-h);
    gap:var(--ctco04-gap);
}

.ctco04-city{
    position:relative;
    overflow:hidden;
    min-width:0;
    background:#0b2438;
}

.ctco04-city--wide{
    grid-column:span 2;
}

.ctco04-city img,
.ctco04-city__placeholder{
    width:100%;
    height:100%;
}

.ctco04-city img{
    display:block;
    object-fit:cover;
    transition:
        transform 1s cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}

.ctco04-city__placeholder{
    background:
        linear-gradient(135deg,#0d2a3e,#123d56);
}

.ctco04-city:hover img{
    transform:scale(1.07);
    filter:
        saturate(.78)
        contrast(1.04);
}

.ctco04-city__overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(5,17,28,.03) 18%,
            rgba(5,17,28,.25) 48%,
            rgba(5,17,28,.94) 100%
        );
    transition:background .5s ease;
}

.ctco04-city:hover .ctco04-city__overlay{
    background:
        linear-gradient(
            180deg,
            rgba(10,51,76,.05) 15%,
            rgba(12,65,94,.30) 50%,
            rgba(8,48,76,.96) 100%
        );
}

.ctco04-city__content{
    position:absolute;
    z-index:3;
    left:32px;
    right:32px;
    bottom:30px;
}

.ctco04-city__content>span{
    color:var(--ctco04-card-text-color)!important;
    opacity:.72;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.ctco04-city h3{
    margin:10px 0 12px;
    color:var(--ctco04-card-title-color)!important;
    font-size:var(--ctco04-card-title);
    line-height:1.15;
    font-weight:600;
}

.ctco04-city p{
    max-width:540px;
    margin:0;
    color:var(--ctco04-card-text-color)!important;
    opacity:.88;
    font-size:var(--ctco04-body);
    line-height:1.62;
}

.ctco04-city a{
    display:inline-block;
    margin-top:17px;
    color:var(--ctco04-card-title-color)!important;
    font-size:14px;
    font-weight:600;
    text-decoration:none!important;
}

@media(max-width:1024px){
    .ctco04-city-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .ctco04-city--wide{
        grid-column:span 2;
    }
}

@media(max-width:767px){
    .ctco04-shell{
        width:min(var(--ctco04-container),calc(100% - 30px));
    }

    .ctco04-cities{
        padding:75px 0;
    }

    .ctco04-section-head{
        grid-template-columns:1fr;
        gap:22px;
    }

    .ctco04-section-head h2{
        font-size:clamp(30px,9vw,var(--ctco04-title-size));
    }

    .ctco04-city-grid{
        grid-template-columns:1fr;
        grid-auto-rows:410px;
    }

    .ctco04-city--wide{
        grid-column:auto;
    }

    .ctco04-city h3{
        font-size:26px;
    }

    .ctco04-city p{
        font-size:15px;
    }
}

@media(max-width:420px){
    .ctco04-city-grid{
        grid-auto-rows:420px;
    }

    .ctco04-city__content{
        left:23px;
        right:23px;
        bottom:24px;
    }
}

@media(prefers-reduced-motion:reduce){
    .ctco04-reveal,
    .ctco04-city img{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }
}


/* v1.2.1 - protege los colores frente al CSS del tema */
.ctco04-cities .ctco04-section-head h2{
    color:var(--ctco04-title)!important;
}

.ctco04-cities .ctco04-section-head>p{
    color:var(--ctco04-text)!important;
}

.ctco04-cities .ctco04-city .ctco04-city__content h3{
    color:var(--ctco04-card-title-color)!important;
}

.ctco04-cities .ctco04-city .ctco04-city__content p,
.ctco04-cities .ctco04-city .ctco04-city__content>span{
    color:var(--ctco04-card-text-color)!important;
}