.nopal-deptos{
--nopal-deptos-gold:#B8A064;
--nopal-deptos-text:#4C4B4B;
position:relative;
width:100%;
max-width:1200px;
margin-inline:auto;
padding-bottom:42px;
overflow:hidden;
color:var(--nopal-deptos-text);
}
.nopal-deptos,
.nopal-deptos *{
box-sizing:border-box;
}
.nopal-deptos__viewport{
width:100%;
overflow:hidden;
}
.nopal-deptos__track{
display:flex;
width:100%;
transition:transform .55s cubic-bezier(.22,.61,.36,1);
will-change:transform;
}
.nopal-deptos__slide{
flex:0 0 100%;
min-width:100%;
display:grid;
grid-template-columns:minmax(0,2.05fr) minmax(290px,.95fr);
align-items:stretch;
gap:12px;
}
.nopal-deptos__main,
.nopal-deptos__info{
position:relative;
min-height:570px;
} .nopal-deptos__main{
display:grid;
grid-template-columns:115px minmax(0,1fr);
align-items:center;
gap:0 18px;
padding:34px 34px 34px 32px;
}
.nopal-deptos__location{
align-self:end;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding-bottom:72px;
}
.nopal-deptos__location img{
width:92px;
height:122px;
display:block;
object-fit:contain;
}
.nopal-deptos__location span{
max-width:110px;
font:400 10px/1.2 "Public Sans",sans-serif;
text-align:center;
}
.nopal-deptos__plan{
min-width:0;
display:flex;
align-items:center;
justify-content:center;
}
.nopal-deptos__plan img{
width:100%;
max-width:565px;
max-height:520px;
display:block;
object-fit:contain;
} .nopal-deptos__info{
padding:30px 54px 40px 42px;
border-left:1px solid rgba(76,75,75,.08);
}
.nopal-deptos__heading{
margin-bottom:22px;
padding-bottom:7px;
border-bottom:1px solid rgba(76,75,75,.35);
}
.nopal-deptos__heading h3{
margin:0;
display:flex;
align-items:baseline;
gap:.18em;
font-size:clamp(44px,4.5vw,70px);
line-height:.92;
letter-spacing:-.04em;
color:var(--nopal-deptos-text);
}
.nopal-deptos__title-main{
font-family:"Public Sans",sans-serif;
font-weight:400;
}
.nopal-deptos__title-type{
font-family:"Public Sans",sans-serif;
font-weight:100;
}
.nopal-deptos__code{
margin-top:3px;
font:400 14px/1.2 "Public Sans",sans-serif;
text-align:right;
}
.nopal-deptos__rooms{
margin:0;
padding-left:22px;
font:400 15px/1.35 "Public Sans",sans-serif;
}
.nopal-deptos__details{
margin-top:34px;
padding-top:24px;
border-top:1px solid rgba(76,75,75,.35);
}
.nopal-deptos__view{
display:block;
margin-bottom:13px;
font:700 14px/1.2 "Public Sans",sans-serif;
}
.nopal-deptos__details dl{
margin:0;
}
.nopal-deptos__details dl > div{
display:grid;
grid-template-columns:1fr auto;
align-items:baseline;
gap:16px;
}
.nopal-deptos__details dt,
.nopal-deptos__details dd{
margin:0;
font:400 14px/1.35 "Public Sans",sans-serif;
}
.nopal-deptos__details dd{
font-weight:700;
}
.nopal-deptos__details sup{
position:relative;
top:-.25em;
font-size:.58em;
line-height:0;
} .nopal-deptos__arrow{
position:absolute;
top:50%;
z-index:30;
width:42px;
height:60px;
padding:0 !important;
display:flex !important;
align-items:center;
justify-content:center;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:var(--nopal-deptos-gold) !important;
transform:translateY(-50%);
cursor:pointer;
transition:color .25s ease, transform .25s ease;
}
.nopal-deptos__arrow svg{
width:21px;
height:35px;
display:block;
fill:currentColor !important;
}
.nopal-deptos__arrow--prev{
left:4px;
}
.nopal-deptos__arrow--next{
right:4px;
}
.nopal-deptos__arrow--prev:hover{
color:#806E3E !important;
transform:translate(-3px,-50%);
}
.nopal-deptos__arrow--next:hover{
color:#806E3E !important;
transform:translate(3px,-50%);
} .nopal-deptos__pagination{
position:absolute;
left:50%;
bottom:8px;
z-index:35;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
transform:translateX(-50%);
}
.nopal-deptos__bullet{
width:12px;
height:12px;
margin:0;
padding:0;
border:0;
border-radius:50%;
background:#C8C8C8;
cursor:pointer;
}
.nopal-deptos__bullet.is-active{
background:#595959;
}
.nopal-deptos__mobile-location-row,
.nopal-deptos__mobile-location{
display:none;
} @media(max-width:1024px){
.nopal-deptos__slide{
grid-template-columns:minmax(0,1.65fr) minmax(260px,.85fr);
}
.nopal-deptos__main{
grid-template-columns:90px minmax(0,1fr);
padding:28px 28px 28px 24px;
}
.nopal-deptos__location img{
width:75px;
height:105px;
}
.nopal-deptos__plan img{
max-width:470px;
max-height:470px;
}
.nopal-deptos__info{
padding:28px 42px 36px 30px;
}
.nopal-deptos__heading h3{
font-size:46px;
}
} @media(max-width:767px){
.nopal-deptos{
padding-bottom:64px;
}
.nopal-deptos__slide{
display:block;
}
.nopal-deptos__main,
.nopal-deptos__info{
min-height:0;
}
.nopal-deptos__main{
display:block;
padding:18px 38px 0;
}
.nopal-deptos__location{
display:none;
} .nopal-deptos__plan{
padding-inline:18px;
}
.nopal-deptos__plan img{
width:100%;
max-width:520px;
max-height:560px;
margin-inline:auto;
}
.nopal-deptos__info{
padding:20px 20px 28px;
border-left:0;
}
.nopal-deptos__heading{
margin-bottom:0;
padding-bottom:10px;
}
.nopal-deptos__heading h3{
width:100%;
display:flex;
flex-wrap:nowrap;
align-items:baseline;
gap:.18em;
font-size:32px;
line-height:1;
letter-spacing:-.02em;
white-space:nowrap;
}
.nopal-deptos__title-main,
.nopal-deptos__title-type{
display:inline-block;
white-space:nowrap;
flex:0 0 auto;
}
.nopal-deptos__code{
margin-top:2px;
font-size:17px;
text-align:left;
} .nopal-deptos__mobile-location-row{
min-height:56px;
display:flex;
align-items:center;
justify-content:flex-end;
padding:0;
border-bottom:1px solid rgba(76,75,75,.35);
}
.nopal-deptos__location-toggle{
width:auto;
min-height:56px;
padding:0 !important;
display:inline-flex !important;
align-items:center;
justify-content:flex-end;
gap:12px;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:var(--nopal-deptos-text) !important;
cursor:pointer;
}
.nopal-deptos__location-label{
font:400 12px/1.2 "Public Sans",sans-serif;
color:var(--nopal-deptos-text);
}
.nopal-deptos__location-toggle svg{
flex:0 0 auto;
width:18px;
height:11px;
display:block;
overflow:visible;
fill:none !important;
stroke:currentColor !important;
stroke-width:1.5;
transition:transform .3s ease;
}
.nopal-deptos__location-toggle svg path{
fill:none !important;
stroke:currentColor !important;
stroke-width:1.5;
stroke-linecap:square;
stroke-linejoin:miter;
}
.nopal-deptos__location-toggle[aria-expanded="true"] svg{
transform:rotate(180deg);
}
.nopal-deptos__mobile-location{
max-height:0;
display:block;
overflow:hidden;
opacity:0;
transition:max-height .35s ease, opacity .3s ease, padding .35s ease;
}
.nopal-deptos__mobile-location.is-open{
max-height:250px;
padding:18px 0 8px;
opacity:1;
}
.nopal-deptos__mobile-location img{
width:100%;
max-height:210px;
display:block;
object-fit:contain;
}
.nopal-deptos__content-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(140px,.92fr);
align-items:start;
gap:28px;
padding-top:24px;
}
.nopal-deptos__rooms{
padding-left:19px;
font-size:11.5px !important;
line-height:1.42;
}
.nopal-deptos__details{
margin:0;
padding:0;
border:0;
}
.nopal-deptos__view{
margin-bottom:26px;
font-size:11.5px !important;
}
.nopal-deptos__details dl > div{
gap:10px;
}
.nopal-deptos__details dt,
.nopal-deptos__details dd{
font-size:11.5px !important;
} .nopal-deptos__arrow{
top:31%;
width:34px;
height:50px;
z-index:40;
}
.nopal-deptos__arrow--prev{
left:8px;
}
.nopal-deptos__arrow--next{
right:8px;
}
.nopal-deptos__arrow svg{
width:15px;
height:26px;
} .nopal-deptos__pagination{
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
}
}
@media(max-width:420px){
.nopal-deptos__main{
padding-inline:34px;
}
.nopal-deptos__content-grid{
grid-template-columns:minmax(0,1fr) 140px;
gap:18px;
}
}
@media(prefers-reduced-motion:reduce){
.nopal-deptos__track,
.nopal-deptos__mobile-location,
.nopal-deptos__location-toggle svg{
transition:none;
}
}  @media (min-width:768px){
.nopal-deptos__heading--long h3{
display:block;
line-height:.94;
}
.nopal-deptos__heading--long .nopal-deptos__title-main,
.nopal-deptos__heading--long .nopal-deptos__title-type{
display:block;
}
.nopal-deptos__heading--long .nopal-deptos__title-type{
margin-top:2px;
}
} @media (max-width:767px){
.nopal-deptos__heading--long h3{
display:flex;
flex-wrap:nowrap;
align-items:baseline;
white-space:nowrap;
}
.nopal-deptos__heading--long .nopal-deptos__title-main,
.nopal-deptos__heading--long .nopal-deptos__title-type{
display:inline-block;
white-space:nowrap;
}
.nopal-deptos__mobile-location-figure{
margin:0;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.nopal-deptos__mobile-location img{
width:84px;
max-width:84px;
height:auto;
max-height:118px;
margin-inline:auto;
object-fit:contain;
}
.nopal-deptos__mobile-location figcaption{
font:400 9.5px/1.2 "Public Sans",sans-serif;
color:var(--nopal-deptos-text);
text-align:center;
}
.nopal-deptos__mobile-location.is-open{
max-height:190px;
padding:16px 0 10px;
}
} .nopal-deptos__location-visual{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.nopal-deptos__location-side{
display:block;
writing-mode:vertical-rl;
transform:rotate(180deg);
white-space:nowrap;
font:400 10px/1.2 "Public Sans",sans-serif;
color:var(--nopal-deptos-text);
}
.nopal-deptos__location-bottom{
display:block;
max-width:120px;
font:400 10px/1.2 "Public Sans",sans-serif;
text-align:center;
}
@media(max-width:1024px) and (min-width:768px){
.nopal-deptos__location-visual{
gap:6px;
}
.nopal-deptos__location-side,
.nopal-deptos__location-bottom{
font-size:9px;
}
}
@media(max-width:767px){
.nopal-deptos__mobile-location-visual{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
}
.nopal-deptos__mobile-location-side{
display:block;
writing-mode:vertical-rl;
transform:rotate(180deg);
white-space:nowrap;
font:400 9px/1.2 "Public Sans",sans-serif;
color:var(--nopal-deptos-text);
}
} .nopal-deptos__plan{
position:relative;
}
.nopal-deptos__zoom-trigger{
position:absolute;
right:14px;
bottom:14px;
z-index:25;
width:42px;
height:42px;
padding:0;
border:1px solid rgba(76,75,75,.22);
border-radius:50%;
background:rgba(255,255,255,.94);
color:#4C4B4B;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.10);
transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.nopal-deptos__zoom-trigger:hover{
transform:scale(1.06);
background:#fff;
box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.nopal-deptos__zoom-trigger:focus-visible{
outline:2px solid #4C4B4B;
outline-offset:3px;
}
.nopal-deptos__zoom-trigger svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.nopal-deptos__zoom{
position:fixed;
inset:0;
z-index:999999;
display:none;
align-items:center;
justify-content:center;
padding:24px;
}
.nopal-deptos__zoom.is-open{
display:flex;
}
.nopal-deptos__zoom-backdrop{
position:absolute;
inset:0;
background:rgba(20,20,20,.82);
backdrop-filter:blur(3px);
}
.nopal-deptos__zoom-dialog{
position:relative;
z-index:2;
width:min(1120px, 94vw);
height:min(820px, 88vh);
background:#fff;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:0 18px 60px rgba(0,0,0,.28);
}
.nopal-deptos__zoom-stage{
position:relative;
flex:1;
min-height:0;
overflow:hidden;
touch-action:none;
cursor:grab;
background:#fff;
}
.nopal-deptos__zoom-stage.is-dragging{
cursor:grabbing;
}
.nopal-deptos__zoom-image{
position:absolute;
left:50%;
top:50%;
max-width:88%;
max-height:88%;
width:auto;
height:auto;
object-fit:contain;
transform:translate(-50%,-50%) scale(1);
transform-origin:center;
user-select:none;
-webkit-user-drag:none;
will-change:transform;
}
.nopal-deptos__zoom-close{
position:absolute;
top:14px;
right:14px;
z-index:5;
width:42px;
height:42px;
padding:0;
border:1px solid rgba(76,75,75,.18);
border-radius:50%;
background:rgba(255,255,255,.95);
color:#4C4B4B;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.nopal-deptos__zoom-close svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
}
.nopal-deptos__zoom-controls{
position:absolute;
left:50%;
bottom:18px;
z-index:5;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:8px;
padding:7px;
background:rgba(255,255,255,.96);
border:1px solid rgba(76,75,75,.16);
box-shadow:0 5px 18px rgba(0,0,0,.12);
}
.nopal-deptos__zoom-controls button{
min-width:42px;
height:38px;
padding:0 12px;
border:0;
background:transparent;
color:#4C4B4B;
font:500 16px/1 "Public Sans",sans-serif;
cursor:pointer;
}
.nopal-deptos__zoom-controls button[data-zoom-reset]{
min-width:66px;
font-size:13px;
}
.nopal-deptos__zoom-controls button:hover{
background:#f3f3f3;
}
body.nopal-zoom-open{
overflow:hidden !important;
}
@media(max-width:767px){
.nopal-deptos__zoom-trigger{
right:8px;
bottom:8px;
width:38px;
height:38px;
}
.nopal-deptos__zoom-trigger svg{
width:19px;
height:19px;
}
.nopal-deptos__zoom{
padding:10px;
}
.nopal-deptos__zoom-dialog{
width:100%;
height:88vh;
}
.nopal-deptos__zoom-image{
max-width:94%;
max-height:84%;
}
.nopal-deptos__zoom-close{
top:10px;
right:10px;
width:38px;
height:38px;
}
.nopal-deptos__zoom-controls{
bottom:12px;
}
}
@media(prefers-reduced-motion:reduce){
.nopal-deptos__zoom-trigger{
transition:none;
}
}