) reacts to hover; a plain
badge stays static so it doesn't pretend to be interactive. */
a.proj_award { cursor: pointer; }
a.proj_award .proj_award__img { transition: filter 0.35s ease, transform 0.35s ease; }
a.proj_award:hover .proj_award__img,
a.proj_award:focus-visible .proj_award__img {
transform: translateY(3px);
filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.50)) drop-shadow(0 4px 9px rgba(0, 0, 0, 0.40));
}
@keyframes projAwardDrop {
from { opacity: 0; transform: translateY(-16px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.proj_award { animation: none; }
}
/* ≤768px: header collapses to one compact row, so the badge can sit higher;
keep it a touch smaller and away from the burger. */
@media (max-width: 768px) {
.proj_award {
top: clamp(120px, 17vh, 162px);
right: 12px;
width: clamp(104px, 30vw, 160px);
}
.proj_award .proj_award__img {
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.42)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.32));
}
}
.proj_specs {
max-width: 1280px;
margin: 80px auto 0;
padding: 0 24px;
}
.proj_specs__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
border-top: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
}
.proj_specs__grid li {
padding: 28px 24px;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
display: flex;
flex-direction: column;
gap: 10px;
}
.proj_specs__label {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #999;
}
.proj_specs__value {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 32px;
line-height: 1;
color: #111;
}
.proj_specs__price .proj_specs__value {
color: #b58c4d;
font-size: clamp(24px, 2.4vw, 30px);
white-space: nowrap;
}
.proj_specs_cta {
max-width: 1280px;
margin: clamp(22px, 3vw, 36px) auto clamp(58px, 5vw, 88px);
padding: 0 24px;
display: flex;
justify-content: center;
}
.proj_specs_cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 58px;
padding: 0 clamp(28px, 4vw, 54px);
border: 1px solid #111;
background: #111;
color: #fff;
font-size: 13px;
letter-spacing: .12em;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.proj_specs_cta__btn:hover {
background: #b58c4d;
border-color: #b58c4d;
color: #fff;
}
.proj_specs_cta + .proj_about,
.proj_specs_cta + .proj_desc--editorial {
margin-top: 0;
}
.proj_specs_cta--before-location {
margin-top: clamp(34px, 4vw, 64px);
margin-bottom: 0;
}
.proj_specs_cta--before-location + .obj_loc {
padding-top: clamp(34px, 3vw, 56px);
}
.proj_desc,
.proj_features,
.proj_gallery,
.proj_units {
max-width: 1280px;
margin: 80px auto;
padding: 0 24px;
}
.proj_desc__title,
.proj_features__title,
.proj_gallery__title,
.proj_units__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(28px, 3.5vw, 52px);
line-height: 1.1;
margin: 0 0 32px;
color: #111;
}
.proj_desc__body {
font-size: 17px;
line-height: 1.7;
color: #333;
max-width: 880px;
}
.proj_desc__body p { margin: 0 0 1em; }
/* =========================================================
"Sobre el proyecto" — editorial layout with photos intercalated
between paragraphs. Pure single-column flow with each block
asymmetrically aligned (start / end / full-bleed) so the eye
scans down a magazine-style column.
========================================================= */
.proj_desc--editorial {
max-width: none;
padding: 0;
margin: clamp(80px, 8vw, 140px) 0;
}
.proj_desc--editorial .proj_desc__title {
max-width: 1280px;
margin: 0 auto 56px;
padding: 0 clamp(24px, 5vw, 96px);
font-size: clamp(32px, 4vw, 56px);
letter-spacing: -0.01em;
}
.proj_desc__story {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 96px);
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 5vw, 88px);
}
.proj_desc__para {
font-size: clamp(16px, 1.05vw, 18px);
line-height: 1.75;
color: #2a2a2a;
max-width: 640px;
margin: 0;
}
.proj_desc__para p { margin: 0 0 1em; }
.proj_desc__para p:last-child { margin-bottom: 0; }
.proj_desc__para--start { justify-self: start; }
.proj_desc__para--end { justify-self: end; text-align: left; }
/* Photo blocks. Three layouts cycle so the page never looks repetitive:
- left : 64% width, anchored to the left rail, dramatic but not full bleed
- right: 64% width anchored to the right rail
- full : edge-to-edge of the content column, taller aspect ratio */
.proj_desc__shot {
margin: 0;
overflow: hidden;
background: #efeae3;
position: relative;
box-shadow: 0 30px 60px -30px rgba(0,0,0,0.25);
}
.proj_desc__shot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.proj_desc__shot:hover img { transform: scale(1.04); }
.proj_desc__shot--left {
width: clamp(280px, 64%, 820px);
justify-self: start;
aspect-ratio: 4 / 3;
}
.proj_desc__shot--right {
width: clamp(280px, 64%, 820px);
justify-self: end;
aspect-ratio: 4 / 3;
}
.proj_desc__shot--full {
width: 100%;
justify-self: stretch;
aspect-ratio: 21 / 9;
}
@media (max-width: 900px) {
.proj_desc__para { max-width: 100%; }
.proj_desc__shot--left,
.proj_desc__shot--right {
width: 100%;
aspect-ratio: 4 / 3;
}
.proj_desc__shot--full { aspect-ratio: 16 / 10; }
}
.proj_desc__shell {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 96px);
}
.proj_desc__intro {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
gap: clamp(32px, 4vw, 72px);
align-items: start;
}
.proj_desc__intro-copy {
padding-top: clamp(6px, 1vw, 18px);
}
.proj_desc--editorial .proj_desc__title {
max-width: none;
margin: 0 0 28px;
padding: 0;
}
.proj_desc__lead {
max-width: 760px;
font-size: clamp(22px, 1.8vw, 30px);
line-height: 1.45;
color: #171717;
}
.proj_desc__lead p { margin: 0; }
.proj_desc__visuals {
position: relative;
padding: 0 0 36px 28px;
}
.proj_desc__visual {
margin: 0;
overflow: hidden;
background: #efeae3;
box-shadow: 0 30px 60px -34px rgba(0,0,0,0.22);
}
.proj_desc__visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.proj_desc__visual:hover img { transform: scale(1.04); }
.proj_desc__visual--main {
aspect-ratio: 4 / 3;
border-radius: 0; /* straight (square) corners — no rounding */
}
.proj_desc__visual--accent {
position: absolute;
left: 0;
bottom: 0;
width: clamp(180px, 38%, 260px);
aspect-ratio: 1 / 1;
border-radius: 0; /* straight (square) corners — no rounding */
border: 8px solid #f6f2eb;
}
.proj_desc__body-rich {
margin-top: clamp(40px, 5vw, 72px);
padding-top: clamp(28px, 3vw, 40px);
border-top: 1px solid #e9e0d6;
}
.proj_desc__body-copy {
font-size: clamp(16px, 1.02vw, 18px);
line-height: 1.82;
color: #2a2a2a;
}
.proj_desc__body-copy--top {
max-width: 940px;
}
.proj_desc__body-copy--bottom {
max-width: 1020px;
margin-left: auto;
}
.proj_desc__body-copy p {
margin: 0 0 1.15em;
}
.proj_desc__body-copy p:last-child { margin-bottom: 0; }
.proj_desc__body-visual {
margin: clamp(32px, 4vw, 48px) 0;
overflow: hidden;
border-radius: 0; /* straight (square) corners — no rounding */
background: #efeae3;
box-shadow: 0 30px 60px -34px rgba(0,0,0,0.2);
}
.proj_desc__body-visual img {
width: 100%;
aspect-ratio: 16 / 8;
object-fit: cover;
display: block;
}
.proj_desc--no-visuals .proj_desc__intro {
grid-template-columns: 1fr;
}
.proj_desc--no-visuals .proj_desc__lead {
max-width: 880px;
}
@media (max-width: 980px) {
.proj_desc__intro {
grid-template-columns: 1fr;
gap: 28px;
}
.proj_desc__visuals {
padding: 0;
max-width: 760px;
}
.proj_desc__visual--accent {
left: auto;
right: 18px;
bottom: -24px;
width: clamp(160px, 34%, 220px);
}
.proj_desc__body-rich {
margin-top: 56px;
}
}
@media (max-width: 720px) {
.proj_desc--editorial {
margin: 64px 0;
}
.proj_desc--editorial .proj_desc__title {
margin-bottom: 18px;
font-size: clamp(28px, 8vw, 40px);
}
.proj_desc__lead {
font-size: 18px;
line-height: 1.5;
}
.proj_desc__visuals {
padding-bottom: 0;
}
.proj_desc__visual--main {
aspect-ratio: 16 / 11;
border-radius: 0;
}
.proj_desc__visual--accent {
position: relative;
right: auto;
bottom: auto;
width: min(68%, 240px);
margin: -24px 0 0 auto;
border-width: 6px;
border-radius: 0;
}
.proj_desc__body-rich {
margin-top: 32px;
padding-top: 22px;
}
.proj_desc__body-copy {
font-size: 15px;
line-height: 1.75;
}
.proj_desc__body-visual {
margin: 24px 0;
border-radius: 0;
}
.proj_desc__body-visual img {
aspect-ratio: 16 / 10;
}
}
/* =========================================================
"Sobre el proyecto" intro block — sits ABOVE the scrolly-
telling story so readers always see the description, even
when the story scenes are configured.
========================================================= */
.proj_about {
max-width: 1100px;
margin: clamp(60px, 6vw, 100px) auto clamp(40px, 4vw, 64px);
padding: 0 clamp(24px, 5vw, 96px);
}
.proj_about__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(28px, 3.5vw, 52px);
line-height: 1.1;
margin: 0 0 24px;
color: #111;
}
.proj_about__body {
font-size: clamp(16px, 1.05vw, 18px);
line-height: 1.75;
color: #333;
max-width: 880px;
}
.proj_about__body p { margin: 0 0 1em; }
.proj_about__body p:last-child { margin-bottom: 0; }
/* "After" copy block (paragraphs 3+) sits below the scroll-telling stage
without its own title, so we want a touch more top breathing room. */
.proj_about--after { margin-top: clamp(40px, 4vw, 80px); }
/* =========================================================
PROJ_STORY — scrollytelling "Sobre el proyecto" experience
One scene per viewport of scroll. Section is N × 100vh tall
with a sticky stage inside; project-single.js maps scroll
position to the active scene and to a per-scene 0→1
progress used for the Ken Burns zoom transform.
Design rules (per editor feedback):
- No dark "veil" overlay on the photo (image renders clean).
- Caption (eyebrow + title + description) sits at the bottom-left
of each scene, on top of a SOFT bottom gradient only where the
text lives — the rest of the image is fully visible.
- Single column, no left-rail "intro" paragraph. Each scene has
its OWN title + description so a new paragraph appears as the
visitor scrolls to a new image.
- Title and description stack with proper margins → no overlap.
========================================================= */
.proj_story {
position: relative;
background: #0a0a0a;
color: #fff;
width: 100vw;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
/* The section's scroll height = N × 100vh on desktop; tablets scroll
through scenes faster (75vh each) and phones faster still (60vh) so
small screens don't feel like they're trapped in a never-ending
sticky stage. --story-scenes is set inline by PHP. */
height: calc(var(--story-scenes, 1) * 100vh);
}
.proj_story__sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.proj_story__scene {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity .6s cubic-bezier(.2,.7,.2,1);
}
.proj_story__scene.is-active {
opacity: 1;
pointer-events: auto;
}
.proj_story__media {
position: absolute;
inset: 0;
overflow: hidden;
}
.proj_story__media img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.04);
transform-origin: 50% 50%;
will-change: transform;
transition: transform .15s linear;
}
/* Soft bottom gradient ONLY where the caption lives — the upper half
of the photo stays clean. ::after on the scene so it sits between the
image and the caption text. */
.proj_story__scene::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55%;
background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0) 100%);
pointer-events: none;
z-index: 1;
}
.proj_story__caption {
position: absolute;
left: clamp(28px, 6vw, 96px);
right: clamp(28px, 6vw, 96px);
bottom: clamp(40px, 8vh, 100px);
z-index: 2;
color: #fff;
max-width: 720px;
transform: translateY(36px);
opacity: 0;
transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease;
}
.proj_story__scene.is-active .proj_story__caption {
transform: translateY(0);
opacity: 1;
}
.proj_story__eyebrow {
display: block;
font-family: 'Inter', sans-serif;
font-size: 12px;
letter-spacing: .24em;
text-transform: uppercase;
color: #b58c4d;
margin: 0 0 18px;
}
.proj_story__num {
color: rgba(255,255,255,0.75);
margin-left: 6px;
}
.proj_story__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(34px, 4.4vw, 68px);
line-height: 1.05;
margin: 0 0 22px;
color: #fff;
text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}
.proj_story__desc {
font-family: 'Inter', sans-serif;
font-size: clamp(15px, 1.05vw, 18px);
line-height: 1.65;
margin: 0;
color: #f4f0e8;
max-width: 620px;
text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
/* Scroll progress bar (vertical, right edge). */
.proj_story__progress {
position: absolute;
top: 50%;
right: clamp(14px, 2vw, 32px);
transform: translateY(-50%);
width: 2px;
height: 32vh;
background: rgba(255,255,255,0.15);
z-index: 3;
border-radius: 2px;
overflow: hidden;
}
.proj_story__progress-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(180deg, #b58c4d 0%, #f0e0c0 100%);
transition: height .2s linear;
}
@media (max-width: 720px) {
.proj_story__caption {
left: 20px;
right: 20px;
bottom: 28px;
}
.proj_story__title { font-size: clamp(26px, 7vw, 38px); margin-bottom: 14px; }
.proj_story__desc { font-size: 15px; }
.proj_story__scene::after { height: 65%; }
.proj_story__progress { right: 10px; height: 22vh; }
}
/* Mobile tweak — the scrollytelling stays fully active (sticky stage,
scroll-driven scene activation, Ken Burns zoom). We only:
1. Shrink the per-scene scroll distance so visitors advance faster
through the scenes (75vh tablet, 60vh phone) instead of dragging
through the full 100vh per scene.
2. Soften the caption padding and progress-bar position so the text
and the indicator never overflow narrow viewports. */
@media (max-width: 1024px) {
.proj_story { height: calc(var(--story-scenes, 1) * 75vh); }
}
@media (max-width: 900px) {
.proj_story { height: calc(var(--story-scenes, 1) * 65vh); }
.proj_story__caption {
left: 18px;
right: 18px;
bottom: 24px;
max-width: none;
}
.proj_story__title { font-size: clamp(28px, 7vw, 42px); margin-bottom: 14px; }
.proj_story__desc { font-size: 15px; line-height: 1.55; }
.proj_story__scene::after { height: 65%; }
.proj_story__progress { right: 10px; height: 22vh; }
}
@media (max-width: 600px) {
.proj_story { height: calc(var(--story-scenes, 1) * 55vh); }
}
.proj_features__list {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 64px;
}
.proj_features__list li {
padding: 14px 0 14px 28px;
border-bottom: 1px solid #eee;
position: relative;
break-inside: avoid;
font-size: 16px;
color: #333;
}
.proj_features__list li::before {
content: '';
position: absolute;
left: 0; top: 22px;
width: 14px; height: 1px;
background: #b58c4d;
}
@media (max-width: 720px) {
.proj_features__list { columns: 1; }
}
/* ============ GALLERY: 2-col grid with collapsed/expanded states ============ */
.proj_gallery__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
position: relative;
}
.proj_gallery__cell {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f5f5f5;
cursor: zoom-in;
position: relative;
}
.proj_gallery__cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .55s ease;
}
.proj_gallery__cell:hover img { transform: scale(1.05); }
/* Collapsed: cells 5–6 act as teasers (half visible, fade out at the bottom).
Cells 7+ are hidden entirely. The "Show all photos" button expands.
Two equivalent selectors so a stylesheet override or a JS-set class on the
section both work — see .is-expanded path below. */
.proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell--teaser {
max-height: 220px;
aspect-ratio: auto;
}
.proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell--teaser::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.65) 55%, rgba(255,255,255,0.98) 100%);
pointer-events: none;
}
.proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell--hidden { display: none; }
/* Expanded: explicitly reset teaser + reveal hidden cells. Acts as a safety
net even when [data-state="expanded"] is set on the grid (the cascade order
here matters since the rules above use the SAME specificity). */
.proj_gallery.is-expanded .proj_gallery__cell--teaser {
max-height: none;
aspect-ratio: 4 / 3;
}
.proj_gallery.is-expanded .proj_gallery__cell--teaser::after { content: none; }
.proj_gallery.is-expanded .proj_gallery__cell--hidden { display: block; }
.proj_gallery.is-expanded .proj_gallery__more { display: none; }
.proj_gallery__grid[data-state="expanded"] .proj_gallery__cell--teaser {
max-height: none;
aspect-ratio: 4 / 3;
}
.proj_gallery__grid[data-state="expanded"] .proj_gallery__cell--teaser::after { content: none; }
.proj_gallery__grid[data-state="expanded"] .proj_gallery__cell--hidden { display: block; }
.proj_gallery__more {
display: block;
margin: 28px auto 0;
padding: 14px 36px;
background: transparent;
border: 1px solid #010101;
color: #010101;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
font-family: inherit;
transition: background .2s ease, color .2s ease;
}
.proj_gallery__more:hover { background: #010101; color: #fff; }
.proj_gallery__more-count { opacity: .65; margin-left: 6px; }
.proj_gallery__grid[data-state="expanded"] + .proj_gallery__more { display: none; }
@media (max-width: 720px) {
.proj_gallery__grid { grid-template-columns: 1fr; gap: 10px; }
.proj_gallery__grid[data-state="collapsed"] .proj_gallery__cell--teaser { max-height: 160px; }
}
/* ============ GALLERY CAROUSEL (project page) — horizontal strip + side arrows ============
Photos scroll left/right via the two side arrows instead of stacking down the
page. The 5th cell fades (teaser) when more photos exist behind the lightbox.
The legacy .proj_gallery__grid styles above are kept for the property page. */
.proj_gallery__carousel {
position: relative;
margin-top: 8px;
}
.proj_gallery__viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
/* NOTE: deliberately NOT using -webkit-overflow-scrolling: touch — on iOS
Safari it spawns a compositor layer that paints ABOVE position:fixed
overlays, letting this carousel + its arrows bleed over (and steal taps
from) the fullscreen lightbox. Momentum scrolling is the default on
modern iOS anyway. */
}
/* While the fullscreen lightbox is open, take the carousel out of paint + hit
testing so its side arrows can never cover the lightbox or swallow taps
meant for the lightbox's prev/next (which made it look "stuck"). */
body.proj-lightbox-open .proj_gallery__carousel {
visibility: hidden;
pointer-events: none;
}
.proj_gallery__viewport::-webkit-scrollbar { display: none; }
.proj_gallery__track {
display: flex;
gap: 14px;
}
.proj_gallery__track .proj_gallery__cell {
flex: 0 0 calc((100% - 28px) / 2.3); /* ~2.3 photos in view → the next one peeks */
scroll-snap-align: start;
}
.proj_gallery__track .proj_gallery__cell--teaser::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(255,255,255,0) 28%, rgba(255,255,255,0.55) 70%, rgba(255,255,255,0.94) 100%);
pointer-events: none;
}
/* Side arrows */
.proj_gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff;
border: 1px solid #e2e2e2;
color: #010101;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.proj_gallery__nav:hover { background: #010101; color: #fff; border-color: #010101; }
.proj_gallery__nav--prev { left: -8px; }
.proj_gallery__nav--next { right: -8px; }
.proj_gallery__nav[hidden] { display: none; }
.proj_gallery__nav:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
.proj_gallery__track .proj_gallery__cell { flex-basis: 82%; }
.proj_gallery__nav { width: 42px; height: 42px; }
.proj_gallery__nav--prev { left: 4px; }
.proj_gallery__nav--next { right: 4px; }
}
/* Progress photo groups on project pages: centered title + gallery layout. */
body.single-inm_project .obj_progress {
max-width: 1280px;
margin: 80px auto;
padding: 0 24px;
border-top: 0;
}
body.single-inm_project .obj_progress::before,
body.single-inm_project .obj_progress::after {
content: none;
}
body.single-inm_project .obj_progress__row {
display: block;
padding: 0;
border-bottom: 0;
margin: 0 0 80px;
}
body.single-inm_project .obj_progress__row:last-child {
margin-bottom: 0;
}
body.single-inm_project .obj_progress__label {
padding: 0;
margin: 0 0 32px;
text-align: center;
}
body.single-inm_project .obj_progress__heading {
max-width: none;
margin: 0 auto;
text-align: center;
font-size: clamp(28px, 3.5vw, 52px);
line-height: 1.1;
}
body.single-inm_project .obj_progress__photo {
width: calc((100% - 14px) / 2);
margin: 0 auto;
aspect-ratio: 4 / 3;
overflow: hidden;
}
body.single-inm_project .obj_progress__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.single-inm_project .obj_progress__gallery-wrap {
width: 100%;
}
body.single-inm_project .obj_progress__gallery-wrap.is-animating {
overflow: hidden;
transition: height .45s ease;
}
body.single-inm_project .obj_progress__gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
body.single-inm_project .obj_progress__gallery-cell {
aspect-ratio: 4 / 3;
background: #f5f5f5;
overflow: hidden;
opacity: 1;
transform: translateY(0);
}
body.single-inm_project .obj_progress__gallery-cell img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.single-inm_project .obj_progress__gallery[data-state="collapsed"] .obj_progress__gallery-cell--hidden {
display: none;
}
body.single-inm_project .obj_progress__gallery[data-state="expanded"] .obj_progress__gallery-cell--hidden {
display: block;
}
body.single-inm_project .obj_progress__gallery-wrap.is-expanding .obj_progress__gallery-cell--hidden {
animation: obj-progress-fade-in .38s ease both;
}
body.single-inm_project .obj_progress__gallery-wrap.is-expanded .obj_progress__more,
body.single-inm_project .obj_progress__gallery-wrap:not(.is-expanded) .obj_progress__less {
display: none;
}
body.single-inm_project .obj_progress__more,
body.single-inm_project .obj_progress__less {
display: block;
margin: 24px auto 0;
padding: 14px 36px;
background: transparent;
border: 1px solid #010101;
color: #010101;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
font-family: inherit;
transition: background .2s ease, color .2s ease;
}
body.single-inm_project .obj_progress__more:hover,
body.single-inm_project .obj_progress__less:hover {
background: #010101;
color: #fff;
}
body.single-inm_project .obj_progress__more-count {
opacity: .65;
margin-left: 6px;
}
@keyframes obj-progress-fade-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 720px) {
body.single-inm_project .obj_progress {
margin: 64px auto;
}
body.single-inm_project .obj_progress__photo {
width: 100%;
}
body.single-inm_project .obj_progress__gallery {
grid-template-columns: 1fr;
gap: 10px;
}
}
/* ============ LIGHTBOX: full-screen viewer + thumbnail strip ============ */
body.proj-lightbox-open { overflow: hidden; }
.proj_lightbox {
position: fixed;
inset: 0;
background: rgba(8, 10, 14, 0.96);
z-index: 99999;
display: grid;
grid-template-rows: 1fr auto;
gap: 20px;
padding: 60px 80px 24px;
}
.proj_lightbox[hidden] { display: none; }
.proj_lightbox__close,
.proj_lightbox__prev,
.proj_lightbox__next {
position: absolute;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background .2s ease, border-color .2s ease;
}
.proj_lightbox__close:hover,
.proj_lightbox__prev:hover,
.proj_lightbox__next:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
.proj_lightbox__close { top: 18px; right: 22px; }
.proj_lightbox__prev { top: 50%; left: 22px; transform: translateY(-50%); }
.proj_lightbox__next { top: 50%; right: 22px; transform: translateY(-50%); }
.proj_lightbox__main {
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 0;
}
.proj_lightbox__main img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
.proj_lightbox__counter {
position: absolute;
bottom: -34px;
left: 50%;
transform: translateX(-50%);
color: #d8d8d8;
font-size: 12px;
letter-spacing: .14em;
font-family: 'Inter', sans-serif;
}
.proj_lightbox__thumbs {
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
padding: 12px 4px 4px;
max-width: 100%;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.proj_lightbox__thumbs::-webkit-scrollbar { height: 8px; }
.proj_lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }
.proj_lightbox__thumbs::-webkit-scrollbar-track { background: transparent; }
.proj_lightbox__thumb {
flex: 0 0 auto;
width: 110px;
height: 78px;
padding: 0;
border: 2px solid transparent;
background: none;
cursor: pointer;
overflow: hidden;
opacity: 0.45;
transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.proj_lightbox__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.proj_lightbox__thumb:hover { opacity: 0.85; }
.proj_lightbox__thumb.is-active {
opacity: 1;
border-color: #fff;
}
.proj_lightbox__data { display: none; }
@media (max-width: 720px) {
.proj_lightbox { padding: 50px 14px 14px; }
.proj_lightbox__close { top: 10px; right: 10px; width: 40px; height: 40px; }
.proj_lightbox__prev { left: 8px; width: 40px; height: 40px; }
.proj_lightbox__next { right: 8px; width: 40px; height: 40px; }
.proj_lightbox__thumb { width: 78px; height: 56px; }
.proj_lightbox__counter { bottom: -22px; font-size: 11px; }
}
.proj_units__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.proj_units__card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid #ececec;
transition: box-shadow .25s ease, transform .25s ease;
}
.proj_units__card:hover {
box-shadow: 0 12px 28px rgba(0,0,0,.08);
transform: translateY(-2px);
}
.proj_units__photo {
aspect-ratio: 4/3;
overflow: hidden;
background: #f5f5f5;
}
.proj_units__photo img { width: 100%; height: 100%; object-fit: cover; }
.proj_units__body { padding: 18px 20px 22px; }
.proj_units__name {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
font-weight: 300;
margin: 0 0 8px;
color: #111;
}
.proj_units__specs {
list-style: none;
margin: 0 0 12px;
padding: 0;
font-size: 13px;
color: #777;
}
.proj_units__specs li { margin: 0 0 4px; }
.proj_units__price {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
color: #b58c4d;
margin: 0;
}
/* Hidden cards (3rd+) — fully removed from layout until the "see more"
button is clicked. Project-single.js toggles .is-expanded on .proj_units
to reveal them. */
.proj_units__card--hidden { display: none; }
.proj_units.is-expanded .proj_units__card--hidden { display: flex; }
/* "Ver más inmuebles del proyecto" CTA — outline style matching the gallery
"Show all photos" button so the page reads consistently. First click on
a project with >2 properties expands the hidden cards; if the admin
configured a destination URL, a second click (after expansion) navigates
there. */
.proj_units__more-wrap {
display: flex;
justify-content: center;
margin: 40px 0 0;
}
.proj_units__more {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 36px;
background: transparent;
border: 1px solid #010101;
color: #010101;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background .2s ease, color .2s ease;
}
.proj_units__more:hover { background: #010101; color: #fff; }
.proj_units__more-count { opacity: .65; }
.proj_units__more svg { transition: transform .2s ease; }
.proj_units__more:hover svg { transform: translateX(4px); }
.proj_units.is-expanded .proj_units__more-wrap { display: none; }
.proj_units.is-expanded[data-has-url="0"] .proj_units__more-wrap { display: none; }
/* =========================================================
PROJECT PANEL — 4 centered tabs (Plans / Properties /
Location / Payment) below the linked-properties grid.
========================================================= */
.proj_panel {
max-width: 1280px;
margin: clamp(60px, 6vw, 100px) auto;
padding: 0 clamp(24px, 5vw, 96px);
}
.proj_panel__tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 40px;
}
.proj_panel__tab {
background: none;
border: 0;
border-bottom: 2px solid transparent;
padding: 16px 28px;
margin: 0 4px;
font-family: 'Inter', sans-serif;
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: #888;
cursor: pointer;
position: relative;
top: 1px;
transition: color .2s ease, border-color .2s ease;
}
.proj_panel__tab:hover { color: #010101; }
.proj_panel__tab.is-active {
color: #010101;
border-bottom-color: #b58c4d;
}
.proj_panel__content { min-height: 280px; }
.proj_panel__pane { display: none; }
.proj_panel__pane.is-active { display: block; animation: proj-panel-fade .35s ease; }
@keyframes proj-panel-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Plans tab — 4 columns of small thumbnails (max 240px tall); click opens
the full-size image in a dedicated lightbox. The grid degrades to 2 cols
at tablet widths and 1 col below 480px. */
.proj_panel__plans-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.proj_panel__plan {
display: block;
background: #f5f5f5;
overflow: hidden;
aspect-ratio: 4 / 3;
border: 1px solid #ececec;
cursor: zoom-in;
transition: box-shadow .25s ease, transform .25s ease;
}
.proj_panel__plan:hover { box-shadow: 0 12px 28px rgba(0,0,0,.10); transform: translateY(-2px); }
.proj_panel__plan img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s ease;
}
.proj_panel__plan:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
.proj_panel__plans-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 680px) {
.proj_panel__plans-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 380px) {
.proj_panel__plans-grid { grid-template-columns: 1fr; }
}
/* Plans lightbox — separate from the gallery lightbox; same UX pattern. */
body.proj-plans-lightbox-open { overflow: hidden; }
.proj_plans_lightbox {
position: fixed;
inset: 0;
background: rgba(8, 10, 14, 0.96);
z-index: 99999;
padding: 60px 80px;
display: flex;
align-items: center;
justify-content: center;
}
.proj_plans_lightbox[hidden] { display: none; }
.proj_plans_lightbox__close,
.proj_plans_lightbox__prev,
.proj_plans_lightbox__next {
position: absolute;
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s ease, border-color .2s ease;
}
.proj_plans_lightbox__close:hover,
.proj_plans_lightbox__prev:hover,
.proj_plans_lightbox__next:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
}
.proj_plans_lightbox__close { top: 18px; right: 22px; }
.proj_plans_lightbox__prev { top: 50%; left: 22px; transform: translateY(-50%); }
.proj_plans_lightbox__next { top: 50%; right: 22px; transform: translateY(-50%); }
.proj_plans_lightbox__main {
display: flex;
align-items: center;
justify-content: center;
position: relative;
max-width: 100%;
max-height: 100%;
}
.proj_plans_lightbox__main img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
.proj_plans_lightbox__counter {
position: absolute;
bottom: -36px;
left: 50%;
transform: translateX(-50%);
color: #d8d8d8;
font-size: 12px;
letter-spacing: .14em;
font-family: 'Inter', sans-serif;
}
.proj_plans_lightbox__data { display: none; }
@media (max-width: 720px) {
.proj_plans_lightbox { padding: 50px 14px; }
.proj_plans_lightbox__close { top: 10px; right: 10px; width: 40px; height: 40px; }
.proj_plans_lightbox__prev { left: 8px; width: 40px; height: 40px; }
.proj_plans_lightbox__next { right: 8px; width: 40px; height: 40px; }
}
/* Properties tab — table. */
.proj_panel__table-wrap { overflow-x: auto; }
.proj_panel__table {
width: 100%;
border-collapse: collapse;
font-family: 'Inter', sans-serif;
}
.proj_panel__table th,
.proj_panel__table td {
padding: 16px 20px;
border-bottom: 1px solid #ececec;
text-align: left;
font-size: 15px;
}
.proj_panel__table th {
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: #888;
background: #fafafa;
}
.proj_panel__table tbody tr:hover { background: #fafafa; }
.proj_panel__table td:nth-child(4) { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #b58c4d; }
/* "Show all available properties" CTA under the props table — same outline
style as the linked-properties expand button so the page reads coherent. */
.proj_panel__table-more-wrap {
display: flex;
justify-content: center;
margin: 32px 0 0;
}
.proj_panel__table-more {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
background: transparent;
border: 1px solid #010101;
color: #010101;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, color .2s ease;
}
.proj_panel__table-more:hover { background: #010101; color: #fff; }
.proj_panel__table-more-count { opacity: .65; }
.proj_panel__table-more svg { transition: transform .2s ease; }
.proj_panel__table-more:hover svg { transform: translateX(4px); }
.proj_panel__table-note {
text-align: center;
margin: 24px 0 0;
font-size: 13px;
color: #999;
font-style: italic;
}
/* Location tab — address. */
.proj_panel__address {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.3;
margin: 0;
color: #111;
}
.proj_panel__address-link {
display: inline-block;
margin-top: 16px;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: #b58c4d;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
/* Payment tab — multiline text. */
.proj_panel__payment {
font-size: 17px;
line-height: 1.7;
color: #2a2a2a;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.proj_panel__payment p { margin: 0 0 1em; }
.proj_panel__payment p:last-child { margin-bottom: 0; }
@media (max-width: 720px) {
.proj_panel__tab { padding: 12px 16px; font-size: 12px; }
.proj_panel__table th,
.proj_panel__table td { padding: 12px 14px; font-size: 14px; }
}
/* =========================================================
PROJ_ZONE — "Sobre la zona": editorial block about the AREA
the project sits in, rendered right under the location map.
Everything is per-project meta (see single-inm_project.php),
so each project describes its own area. Three optional parts:
eyebrow + title + copy (left), area photo (right), and a row
of "Label / Value" facts (distances, golf, beaches…) below.
With no photo the grid collapses to one readable column.
========================================================= */
.proj_zone {
max-width: 1100px;
margin: clamp(48px, 5vw, 88px) auto clamp(40px, 4vw, 72px);
padding: 0 clamp(24px, 5vw, 96px);
}
.proj_zone__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(28px, 4vw, 64px);
align-items: start;
}
.proj_zone__grid--nomedia {
grid-template-columns: minmax(0, 1fr);
}
.proj_zone__grid--nomedia .proj_zone__text {
max-width: 880px;
}
.proj_zone__eyebrow {
display: block;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: #b58c4d;
margin: 0 0 14px;
}
.proj_zone__title {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(28px, 3.5vw, 52px);
line-height: 1.1;
margin: 0 0 24px;
color: #111;
}
.proj_zone__body {
font-size: clamp(16px, 1.05vw, 18px);
line-height: 1.75;
color: #333;
}
.proj_zone__body p { margin: 0 0 1em; }
.proj_zone__body p:last-child { margin-bottom: 0; }
.proj_zone__link {
display: inline-block;
margin-top: 22px;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: #b58c4d;
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: color .2s ease;
}
.proj_zone__link:hover { color: #111; }
/* Area photo — portrait-ish so it balances a 2-3 paragraph text
without pushing the facts row far down the page. */
.proj_zone__media {
margin: 0;
overflow: hidden;
}
.proj_zone__img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
/* Facts row — no boxes, just a hairline above each cell so the
set reads as one quiet band under the copy and wraps cleanly. */
.proj_zone__facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: clamp(18px, 2.5vw, 36px);
list-style: none;
margin: clamp(32px, 4vw, 56px) 0 0;
padding: 0;
}
.proj_zone__fact {
border-top: 1px solid #e3e3e3;
padding-top: 16px;
}
.proj_zone__fact-label {
display: block;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: #8a8a8a;
margin-bottom: 8px;
}
.proj_zone__fact-value {
display: block;
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(20px, 1.9vw, 28px);
line-height: 1.2;
color: #111;
}
@media (max-width: 900px) {
.proj_zone__grid {
grid-template-columns: minmax(0, 1fr);
}
.proj_zone__img { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
.proj_zone__facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 20px;
}
.proj_zone__fact-value { font-size: 20px; }
}
.proj_cta {
text-align: center;
padding: 40px 24px 100px;
}
.proj_cta__btn {
display: inline-block;
padding: 16px 40px;
background: #111;
color: #fff;
text-decoration: none;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 13px;
transition: background .2s ease;
}
.proj_cta__btn:hover { background: #b58c4d; }