/* Architectural editorial system. Color is a signature, space is the structure. */
h1,h2 { font-weight:700; letter-spacing:-.055em }
h2 { line-height:1.08 }
em { font:inherit; color:inherit }
::selection { background:var(--forest); color:var(--paper) }
.section-space { padding-block:clamp(76px,9vw,144px) }
.eyebrow { font-weight:500; letter-spacing:.2em }
.tiny-square { width:5px; height:5px; background:var(--forest); margin-right:12px }
.text-link { font-size:11px; letter-spacing:.13em; padding-block:17px; transition:color 200ms ease }
.text-link span { font-weight:400 }
.button { font-size:11px; letter-spacing:.1em }
.button.outline { padding:17px 0; border:0; border-bottom:1px solid currentColor; color:var(--ink); background:transparent }
.button.dark { background:var(--ink) }
:root { --header-h:clamp(110px,10vw,160px); --nav-h:74px }
.site-header { height:var(--header-h); position:relative; z-index:1; background:var(--paper) }
/* Past the hero the header returns as a slim fixed bar; body padding keeps the layout still. */
body[data-nav-pinned] { padding-top:var(--header-h) }
body[data-nav-pinned] .site-header { position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:40; max-width:none; padding-inline:max(var(--gutter),calc((100% - 1600px)/2 + var(--gutter))); border-bottom:1px solid rgba(28,32,34,.12) }
body[data-nav-pinned][data-page="inicio"] .site-header::before { display:none }
body[data-nav-pinned] .site-header>.brand svg { width:34px; height:39px }
body[data-nav-pinned] .site-header>.brand>span { font-size:17px }
body[data-nav-pinned] .site-header>.brand small { font-size:9px; margin-top:2px }
@media(prefers-reduced-motion:no-preference) {
  body[data-nav-pinned] .site-header { animation:nav-drop .4s cubic-bezier(.22,.61,.36,1) both }
  @keyframes nav-drop { from { transform:translateY(-100%) } to { transform:translateY(0) } }
}
body[data-page="inicio"] .site-header::before { content:""; position:absolute; z-index:-1; inset:0 0 0 56%; background:#dddcda }
.brand { gap:14px }
.brand svg { width:54px; height:62px }
.brand>span { font-size:25px; letter-spacing:.015em }
.brand small { font-size:13px; letter-spacing:.09em; margin-top:4px }
.desktop-nav { gap:clamp(25px,4vw,64px); text-transform:uppercase; font-size:10px; letter-spacing:.2em }
.desktop-nav>a:first-child { display:none }
.desktop-nav>a:not(:last-child):after { height:1px; background:var(--forest) }
/* Contacto: botón oscuro. El verde entra como barrido desde abajo, detrás del texto. */
.desktop-nav>a:last-child { position:relative; isolation:isolate; overflow:hidden; padding:14px 20px; border:0; gap:12px; background:var(--ink); color:var(--paper) }
.desktop-nav>a:last-child::after { content:""; position:absolute; z-index:-1; inset:0; background:var(--forest); transform:scaleY(0); transform-origin:bottom; transition:transform 260ms var(--ease-out) }
.desktop-nav>a:last-child span { display:inline-flex; font-size:15px; line-height:1; transition:transform 200ms var(--ease-out) }
.desktop-nav>a:last-child[aria-current] { background:var(--ink); color:var(--paper); box-shadow:none }
.desktop-nav>a:last-child[aria-current]::after { transform:scaleY(1) }

/* Botón flotante de WhatsApp: siempre a mano, pero se retira antes de tapar la firma del footer. */
.whatsapp-float { position:fixed; right:clamp(16px,4vw,32px); bottom:clamp(16px,4vw,32px); z-index:35; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:#25d366; box-shadow:0 6px 20px rgb(0 0 0 / .28); transition:transform 260ms var(--ease-out),opacity 260ms var(--ease-out),box-shadow 200ms ease }
.whatsapp-float svg { width:30px; height:30px }
.whatsapp-float.is-docked { transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none }
.whatsapp-float:focus-visible { outline:2px solid var(--forest); outline-offset:3px }
@media(hover:hover) and (pointer:fine) {
  .whatsapp-float:hover { transform:scale(1.06); box-shadow:0 8px 26px rgb(0 0 0 / .35) }
}
@media(max-width:480px) {
  .whatsapp-float { width:52px; height:52px }
  .whatsapp-float svg { width:27px; height:27px }
}
@media(prefers-reduced-motion:reduce) {
  .whatsapp-float { transition:opacity 200ms ease }
  .whatsapp-float.is-docked { transform:none }
  .whatsapp-float:hover { transform:none }
}

.home-hero { position:relative; background:var(--paper) }
.hero-frame { max-width:1600px; margin-inline:auto; position:relative; height:auto; min-height:0; aspect-ratio:1536 / 875; background:var(--paper) }
.hero-content { position:relative; z-index:1; width:38.4%; padding:7.15% 0 0 var(--gutter); background:var(--paper) }
.hero-content h1 { font-size:clamp(50px,5.86vw,94px); line-height:.93; letter-spacing:-.048em; font-weight:800; margin:0 0 30px }
.hero-period { color:var(--burgundy); margin-left:.025em }
.hero-title-line { display:block; width:max-content; transform-origin:top left }
.hero-content>p { font-size:clamp(10px,1vw,16px); font-weight:400; letter-spacing:.25em; line-height:1.7; padding-left:5px }
.hero-link { display:flex; width:clamp(190px,17.7vw,283px); justify-content:space-between; margin:clamp(30px,3.4vw,54px) 0 0 5px; padding:12px 8px; font-size:11px; letter-spacing:.2em }
.hero-link span { font-size:26px; line-height:1 }
.hero-content>p { width:max-content; max-width:100%; transform-origin:top left }
.hero-link { transform-origin:top left }
.hero-brand { display:none; position:absolute; white-space:nowrap; transform-origin:top left }
.hero-brand-layer { display:none; position:absolute; inset:0; z-index:2; pointer-events:none }
.hero-brand-layer .hero-brand { pointer-events:auto }
.hero-architecture { position:absolute; top:0; right:0; width:61.6%; aspect-ratio:946 / 723; overflow:hidden; background:#d4d0c9 }
/* Use the supplied reference intact. These windows display only its photo regions. */
.hero-architecture img { position:absolute; max-width:none; width:162.3679%; height:141.6321%; left:-62.3679%; top:-21.1618% }
.hero-material { position:absolute; top:69%; left:0; width:30.66%; aspect-ratio:471 / 267; overflow:hidden; background:#353735 }
.hero-material img { position:absolute; max-width:none; width:326.1146%; height:383.5206%; top:-283.5206%; left:0 }
.facts { padding-block:60px; border-top:1px solid var(--line) }
.facts strong { font-weight:500 }
.facts>div:first-child strong { font-size:64px; line-height:1 }
.facts>div:first-child strong span { font-size:16px }
.facts .place span { color:var(--forest) }
.about-section { grid-template-columns:1.15fr 1fr; gap:12% }
.about-copy { max-width:460px }
.about-copy>p { line-height:1.9 }
.about-copy .lead { font-size:clamp(22px,2vw,30px); line-height:1.45 }
.selected { background:var(--paper); border-top:1px solid var(--line) }
.section-heading { margin-bottom:60px }
.work-grid { grid-template-columns:1.2fr 1fr; gap:72px 7% }
.selected .work-card:nth-child(even) { padding-top:130px }
.work-image { background:#d4d0c7 }
.work-image img { height:clamp(360px,35vw,540px); transition:transform 800ms var(--ease-out) }
.selected .work-card:nth-child(even) .work-image img { height:clamp(290px,28vw,430px) }
.image-arrow { bottom:0; right:0; width:48px; height:48px; background:var(--paper) }
.work-caption { border-top:1px solid var(--line); margin-top:18px; padding-top:17px }
.work-caption h2,.work-caption h3 { font-weight:500; font-size:23px }
.work-number { color:var(--forest); font-variant-numeric:tabular-nums }
.services-preview { border-top:1px solid var(--line); gap:10% }
.service-links a { padding-block:34px }
.service-links a>span:first-child { color:var(--forest) }
.cta { background:var(--paper); padding-block:100px; border-top:1px solid var(--ink) }
.cta h2 { font-size:clamp(34px,4vw,64px) }
.site-footer { padding-top:80px }
.footer-top { padding-bottom:80px }
.page-intro { padding-block:80px 100px; border-top:0 }
.intro-row { gap:8%; margin-top:36px }
.intro-row h1 { font-size:clamp(48px,6.2vw,96px); font-weight:700; letter-spacing:-.055em; line-height:1.02 }
.intro-row h1 em { color:var(--ink) }
.intro-copy { line-height:1.9; max-width:300px }
.story-visual { width:88%; margin-left:auto; margin-right:0; height:clamp(360px,43vw,660px); padding-right:0 }
.story-photo { height:100%; overflow:hidden }
.story-photo img { width:calc(100% + 70px); height:100%; object-fit:cover; object-position:left 55% }
.story-stamp { background:var(--paper); border-top:2px solid var(--forest); bottom:-35px; right:var(--gutter); width:180px; height:180px }
.story-stamp strong { font-weight:600 }
.values,.process { background:#ece8df }
.three-grid { gap:7%; margin-top:65px }
.three-grid article { border-color:var(--line) }
.value-number { color:var(--forest); font-size:11px; letter-spacing:.1em }
.gallery-grid .work-card:nth-child(even) { padding-top:110px }
.gallery-grid .work-image img { height:clamp(360px,35vw,540px) }
.filters { gap:22px }
.filters button { padding:13px 0; border:0; border-bottom:1px solid transparent; font-size:11px; letter-spacing:.06em; transition:color 200ms ease,border-color 200ms ease }
.filters button[aria-pressed=true] { color:var(--forest); background:transparent; border-color:var(--forest) }
.filters button:hover:not([aria-pressed=true]) { border-color:var(--line) }
.service-detail { gap:12%; padding-block:85px }
.service-detail>img { height:clamp(360px,37vw,570px) }
.service-info h2 { font-size:clamp(34px,3.3vw,51px) }
.service-info>p:not(.eyebrow) { line-height:1.85 }
.service-info .eyebrow { color:var(--forest) }
.tags { gap:0; display:block; margin-block:24px }
.tags li { display:inline; border:0; padding:0; color:var(--muted); font-size:11px; line-height:2 }
.tags li+li::before { content:" / "; padding-inline:8px; color:#9c978d }
.contact-layout { gap:12%; padding-bottom:130px }
#contact-form { padding:0 0 0 40px; background:transparent; border-left:1px solid var(--line) }
.field label { letter-spacing:.04em }
input,select,textarea { background:transparent; border:0; border-bottom:1px solid #9b988f; border-radius:0; padding-inline:0 }
input:focus,select:focus,textarea:focus { outline:2px solid var(--forest); outline-offset:4px; border-color:var(--forest) }
.contact-experience strong { font-weight:600 }
.contact-info h2 { font-size:clamp(32px,3vw,46px) }

@media(hover:hover) and (pointer:fine) {
  .text-link:hover,.button.outline:hover { color:var(--forest) }
  .hero-link:hover span { transform:translateX(4px) }
  .desktop-nav>a:last-child:hover { background:var(--ink); color:var(--paper) }
  .desktop-nav>a:last-child:hover::after { transform:scaleY(1) }
  .desktop-nav>a:last-child:hover span { transform:translate(3px,-3px) }
}
@media(min-width:1600px) { .hero-content h1 { font-size:94px } }
@media(max-width:1100px) and (min-width:761px) {
  .brand>span { font-size:21px }
  .brand small { font-size:11px }
  .brand svg { width:44px }
  .desktop-nav { gap:24px; font-size:9px }
  .hero-content h1 { font-size:5.85vw }
  .hero-content>p { font-size:10px; letter-spacing:.17em }
  .hero-link { margin-top:25px; width:180px; font-size:9px }
  .hero-content h1 { margin-bottom:22px }
  .intro-row h1 { font-size:6vw }
}
@media(max-width:760px) {
  :root { --header-h:100px; --nav-h:62px }
  body[data-page="inicio"] .site-header::before { display:none }
  .brand { gap:10px }
  .brand svg { width:38px; height:48px }
  .brand>span { font-size:21px }
  .brand small { font-size:10px; letter-spacing:.12em }
  .hero-frame { aspect-ratio:auto; padding-top:35px; padding-bottom:60px; display:grid; grid-template-columns:1fr }
  .hero-content { width:100%; padding:0 var(--gutter) 40px }
  .hero-content h1 { font-size:clamp(58px,11.8vw,88px); line-height:.94; margin-bottom:26px }
  .hero-content>p { font-size:11px; letter-spacing:.21em; padding-left:2px }
  .hero-link { margin:28px 0 0 2px; width:220px; font-size:10px }
  .hero-architecture { position:relative; width:calc(100% - var(--gutter)); margin-left:auto }
  .hero-material { position:relative; width:35%; margin-top:-28px; top:auto; aspect-ratio:471 / 267 }
  .facts { padding-block:35px }
  .facts>div:first-child strong { font-size:52px }
  .facts>div:nth-child(2) strong { font-size:21px }
  .about-section { grid-template-columns:1fr; gap:32px }
  .section-heading { margin-bottom:36px }
  .work-grid { grid-template-columns:1fr; gap:48px }
  .selected .work-card:nth-child(even),.gallery-grid .work-card:nth-child(even) { padding-top:0; margin-left:12% }
  .work-image img,.gallery-grid .work-image img { height:420px }
  .selected .work-card:nth-child(even) .work-image img { height:340px }
  .work-caption h2,.work-caption h3 { font-size:22px }
  .work-number { display:block }
  .services-preview { gap:36px }
  .cta { padding-block:64px }
  .site-footer { padding-top:60px }
  .footer-top { padding-bottom:50px }
  .page-intro { padding-block:45px 60px }
  .intro-row { gap:24px; margin-top:26px }
  .intro-row h1 { font-size:clamp(43px,8.3vw,64px) }
  .intro-copy { max-width:420px }
  .story-visual { width:100%; height:360px }
  .story-stamp { width:140px; height:140px }
  .three-grid { gap:35px; margin-top:40px }
  .filters { gap:18px }
  .filters button { font-size:10px }
  .service-detail { gap:32px; padding-block:48px }
  .service-detail>img { height:360px }
  .service-info h2 { font-size:36px }
  .contact-layout { gap:48px; padding-bottom:76px }
  #contact-form { border-left:0; border-top:1px solid var(--line); padding:32px 0 0 }
  input,select,textarea { font-size:16px }
}
@media(max-width:480px) {
  .hero-content h1 { font-size:clamp(48px,12vw,58px) }
  .hero-content>p { font-size:10px }
  .work-image img,.gallery-grid .work-image img { height:330px }
  .selected .work-card:nth-child(even) .work-image img { height:280px }
  .service-links a { gap:15px }
  .service-links a h3 { font-size:19px }
  .story-visual { height:290px }
}
@media(prefers-reduced-motion:reduce) {
  .work-image img,.hero-link span { transition:none }
  .hero-link:hover span { transform:none }
  .desktop-nav>a:last-child::after,.desktop-nav>a:last-child span { transition:none }
  .desktop-nav>a:last-child:hover span { transform:none }
}

/* Honed white limestone, softened only enough to keep typography clear. */
body,
body[data-page="inicio"] main,
.selected,
.cta,
.values,
.process,
.site-footer,
.story-stamp,
.image-arrow,
.lightbox,
#mobile-menu {
  --stone-opacity:.75;
  --stone-wash:rgb(244 240 232 / calc(1 - .68 * var(--stone-opacity)));
  background-image:linear-gradient(var(--stone-wash),var(--stone-wash)),url('./white-limestone.webp');
  background-repeat:repeat;
  background-size:auto,1000px 1000px;
}
.values,.process { --stone-wash:rgb(236 232 223 / calc(1 - .6 * var(--stone-opacity))) }
.site-footer { --stone-wash:rgb(28 32 34 / calc(1 - .06 * var(--stone-opacity))) }
body[data-page="inicio"] { isolation:isolate; background:var(--paper) }
body[data-page="inicio"] .site-header::before { background:var(--paper) }
@media(max-width:760px) {
  body,body[data-page="inicio"] main,.selected,.cta,.values,.process,.site-footer,.story-stamp,.image-arrow,.lightbox,#mobile-menu {
    background-size:auto,700px 700px;
  }
}

@media(min-width:1024px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .home-hero[data-parallax] .hero-content {
    background:transparent;
    color:#fff;
    mix-blend-mode:difference;
  }
  .home-hero[data-parallax] .hero-period { color:inherit }
  body[data-hero-parallax][data-hero-active] .site-header>.brand { visibility:hidden }
  .home-hero[data-parallax] .hero-brand-layer { display:block; will-change:transform }
  .home-hero[data-parallax] .hero-brand { display:inline-flex; color:var(--ink) }
  .home-hero[data-parallax] .hero-content,
  .home-hero[data-parallax] .hero-architecture,
  .home-hero[data-parallax] .hero-material { will-change:transform }
}

.hero-content .hero-link {
  width:min(100%,330px);
  min-height:56px;
  padding:17px 18px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  font-size:11px;
  letter-spacing:.12em;
  gap:16px;
}
.home-hero[data-parallax] .hero-link { background:#fff; color:#111; border-color:#fff }
@media(hover:hover) and (pointer:fine) {
  .hero-content .hero-link:hover { background:var(--forest); color:var(--paper); border-color:var(--forest) }
  .home-hero[data-parallax] .hero-link:hover { background:#e3e3e3; color:#111; border-color:#e3e3e3 }
}

/* Services: an editorial spread with a tall architectural image at its centre. */
.services-editorial {
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,1.12fr);
  gap:4.8%;
  align-items:stretch;
  padding-block:clamp(76px,7vw,112px);
}
.services-editorial-intro { display:flex; flex-direction:column; padding-top:clamp(55px,8vw,125px); padding-bottom:42px }
.services-editorial h2,.services-editorial h3 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.055em;
}
.services-editorial h2 { font-size:clamp(45px,5vw,80px); line-height:1.01; margin:0 }
.services-editorial h2 span { display:block }
.services-editorial-subtitle { margin-top:38px; font-size:clamp(10px,.94vw,14px); letter-spacing:.22em; line-height:1.65; text-transform:uppercase; color:var(--muted) }
.services-editorial-link { margin-top:44px; width:min(100%,320px); justify-content:space-between; gap:16px; font-size:10px; letter-spacing:.16em; text-transform:uppercase }
.services-editorial-link span { font-size:25px }
.services-editorial-signature { margin-top:auto; padding-top:55px; padding-left:82px; position:relative; font-family:Georgia,'Times New Roman',serif; font-size:14px; font-style:italic; line-height:1.5; color:var(--muted) }
.services-editorial-signature::before { content:""; position:absolute; left:60px; bottom:4px; width:1px; height:32px; background:var(--line) }
.services-editorial-signature::after { content:""; position:absolute; left:0; bottom:4px; width:39px; height:32px; background:linear-gradient(to right,var(--forest) 0 33.333%,var(--paper) 33.333% 66.667%,var(--burgundy) 66.667% 100%) }
.services-editorial-photo { position:relative; align-self:start; aspect-ratio:384 / 778; overflow:hidden; background:#d4d0c7 }
/* Display only the central photograph of the supplied reference. */
.services-editorial-photo img { position:absolute; max-width:none; width:400%; height:131.6195%; left:-150%; top:-18.6375% }
.services-editorial-list { display:flex; flex-direction:column; justify-content:center; padding-block:34px }
.services-editorial-list>a { display:grid; grid-template-columns:25px minmax(0,1fr) 24px; gap:18px; padding-block:42px; border-bottom:1px solid var(--line) }
.services-editorial-list>a:last-child { border-bottom:0 }
.services-editorial-number { font-size:12px; line-height:1.2; padding-top:9px; font-variant-numeric:tabular-nums; color:var(--muted) }
.services-editorial-list>a:first-child .services-editorial-number { color:var(--forest) }
.services-editorial h3 { font-size:clamp(25px,2.4vw,38px); line-height:1.06; padding-bottom:17px; border-bottom:1px solid var(--line) }
.services-editorial-list p { margin-top:16px; font-size:clamp(9px,.75vw,11px); line-height:1.75; letter-spacing:.17em; text-transform:uppercase; color:var(--muted) }
.services-editorial-arrow { padding-top:8px; font-size:28px; line-height:1; transition:transform 200ms var(--ease-out) }
@media(min-width:1101px) {
  .services-editorial-list>a:last-child h3 { font-size:clamp(25px,2vw,32px) }
}
@media(hover:hover) and (pointer:fine) {
  .services-editorial-list>a:hover .services-editorial-arrow { transform:translate(3px,-3px) }
  .services-editorial-list>a:hover h3 { color:var(--forest) }
}
@media(min-width:761px) and (max-width:1100px) {
  .services-editorial { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px 7% }
  .services-editorial-intro { padding-top:50px; padding-bottom:20px }
  .services-editorial h2 { font-size:clamp(48px,6.3vw,68px) }
  .services-editorial-list { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:0 }
  .services-editorial-list>a { grid-template-columns:20px minmax(0,1fr); gap:14px; border-top:1px solid var(--line); border-bottom:0; padding-block:25px; position:relative }
  .services-editorial-arrow { position:absolute; right:0; top:18px; font-size:22px }
  .services-editorial h3 { font-size:28px; padding-right:20px; min-height:108px }
}
@media(max-width:760px) {
  .services-editorial { grid-template-columns:minmax(0,1fr); gap:38px; padding-block:64px }
  .services-editorial-intro { padding:0 }
  .services-editorial h2 { font-size:clamp(43px,9.8vw,66px); line-height:1.02 }
  .services-editorial-subtitle { margin-top:26px; font-size:11px }
  .services-editorial-link { margin-top:25px }
  .services-editorial-signature { margin-top:28px; padding-top:0; font-size:13px }
  .services-editorial-photo { width:72%; justify-self:center }
  .services-editorial-list { padding:0 }
  .services-editorial-list>a { padding-block:30px; gap:14px; grid-template-columns:22px minmax(0,1fr) 25px }
  .services-editorial h3 { font-size:32px; padding-bottom:15px }
  .services-editorial-list p { font-size:10px; margin-top:14px }
  .services-editorial-list>a:first-child { border-top:1px solid var(--line) }
}
@media(prefers-reduced-motion:reduce) {
  .services-editorial-arrow { transition:none }
  .services-editorial-list>a:hover .services-editorial-arrow { transform:none }
}

/* About: serif headline and milestones balanced against copy and materials. */
.about-editorial {
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(60px,7vw,110px) 10.5%;
  align-items:start;
  padding-block:clamp(76px,8vw,128px);
}
.about-editorial h2 { margin-top:36px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(43px,5.1vw,79px); font-weight:400; line-height:1.02; letter-spacing:-.06em }
.about-editorial h2 em { color:var(--forest); font-style:italic }
.about-editorial .about-copy { padding-top:65px; max-width:none }
.about-editorial .about-copy .lead { font-family:Georgia,'Times New Roman',serif; font-size:clamp(24px,2.25vw,35px); font-weight:400; letter-spacing:-.045em; line-height:1.12; margin-bottom:28px }
.about-editorial .about-copy>p:not(.lead) { font-size:14px; line-height:1.6; margin-bottom:22px }
.about-editorial .text-link { width:min(100%,315px); justify-content:space-between; gap:15px; font-size:10px; letter-spacing:.09em; text-transform:uppercase; padding-block:13px }
.about-milestones { margin:0; display:flex; border-bottom:1px solid #a6a297; padding-bottom:20px }
.about-milestones>div { display:flex; flex-direction:column-reverse; align-items:center; width:max-content }
.about-milestones dt { font-size:15px; line-height:1.4; letter-spacing:.36em; padding-left:.36em; text-align:center; text-transform:uppercase; color:var(--muted) }
.about-milestones dd { margin:0 0 16px; font-family:Georgia,'Times New Roman',serif; font-weight:400; font-size:clamp(110px,11.5vw,175px); line-height:.85; letter-spacing:-.065em }
.about-editorial-photo { margin-top:30px; position:relative; width:100%; aspect-ratio:324 / 160; overflow:hidden; background:#d4d0c7 }
/* Window onto the architectural still life in the client-supplied reference. */
.about-editorial-photo img { position:absolute; max-width:none; width:334.5679%; height:450%; left:-205.5556%; top:-265% }
@media(min-width:761px) and (max-width:1100px) {
  .about-editorial { gap:64px 7%; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) }
  .about-editorial h2 { font-size:clamp(37px,5vw,55px) }
  .about-editorial .about-copy { padding-top:58px }
  .about-editorial .about-copy>p:not(.lead) { font-size:13px }
  .about-milestones dd { font-size:110px }
}
@media(max-width:760px) {
  .about-editorial { grid-template-columns:minmax(0,1fr); gap:38px; padding-block:64px }
  .about-editorial h2 { margin-top:24px; font-size:clamp(38px,8.8vw,62px); letter-spacing:-.055em }
  .about-editorial .about-copy { padding-top:0 }
  .about-editorial .about-copy .lead { font-size:28px; margin-bottom:22px }
  .about-editorial .about-copy>p:not(.lead) { font-size:13px }
  .about-milestones { margin-top:8px }
  .about-milestones dd { font-size:110px }
  .about-milestones dt { font-size:12px }
  .about-editorial-photo { margin-top:0 }
}

/* Relato de trayectoria: el texto del cliente, entero, con aire entre cada tramo. */
.story-lead { border-top:1px solid var(--line) }
.story-lead p { margin:0; columns:2; column-gap:clamp(40px,6vw,96px); font-family:Georgia,'Times New Roman',serif; font-size:clamp(19px,1.85vw,29px); font-weight:400; line-height:1.42; letter-spacing:-.025em }
.story-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,64px) }
.story-columns p { margin:0; padding-top:24px; border-top:1px solid var(--line); font-size:14px; line-height:1.72; color:var(--muted) }
/* Destacados: negrita en tinta plena para los hechos, serif itálica verde para las ideas. */
.story-lead strong,.story-columns strong { font-weight:600; color:var(--ink) }
.story-lead em,.story-columns em,.intro-copy em { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; color:var(--forest) }
.story-columns em { font-size:15px }
body[data-page="trayectoria"] .intro-row h1 em { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; letter-spacing:-.035em; color:var(--forest) }
.story-close-lead { max-width:min(100%,780px); margin:28px 0 0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(22px,2.4vw,36px); font-weight:400; line-height:1.28; letter-spacing:-.035em }
.story-close-lead em { color:var(--forest); font-style:italic }
.story-close-mark { margin:clamp(52px,6.5vw,104px) 0 0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(28px,4.2vw,66px); font-weight:400; line-height:1.1; letter-spacing:-.05em; text-align:right }
.story-close-mark em { color:var(--forest); font-style:italic }
@media(max-width:1100px) {
  .story-columns { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
}
@media(max-width:760px) {
  .story-lead p { columns:1; font-size:19px }
  .story-columns { grid-template-columns:minmax(0,1fr); gap:26px }
  .story-close-mark { margin-top:44px; text-align:left }
}

/* Obra en proceso: fotografías verticales de trabajo, en contrapunto con la obra terminada. */
.obra-band { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,32px); align-items:start }
.obra-shot { margin:0 }
.obra-shot img { width:100%; height:clamp(280px,31vw,440px); object-fit:cover; background:#d4d0c7 }
.obra-shot-lead img { height:clamp(340px,39vw,545px) }
.obra-shot:nth-of-type(2) { margin-top:clamp(26px,5vw,86px) }
.obra-shot:nth-of-type(3) { margin-top:clamp(12px,2.4vw,42px) }
.obra-shot figcaption,.contact-visual figcaption { margin-top:12px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.service-detail>img.obra-photo { height:clamp(420px,45vw,620px); object-position:center }
.contact-visual { margin:0 auto clamp(30px,4vw,56px) }
.contact-visual img { width:100%; height:clamp(240px,27vw,400px); object-fit:cover; object-position:center 48%; background:#d4d0c7 }
@media(max-width:760px) {
  .obra-band { grid-template-columns:minmax(0,1fr); gap:28px }
  .obra-shot img,.obra-shot-lead img { height:clamp(300px,74vw,420px) }
  .obra-shot:nth-of-type(2),.obra-shot:nth-of-type(3) { margin-top:0 }
  .service-detail>img.obra-photo { height:380px }
  .contact-visual img { height:260px }
}

/* Real-work imagery: immersive project gallery, paired carousels and restrained depth. */
.hero-architecture img,
.hero-material img {
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
}
.hero-architecture img { object-position:center }
.hero-material img { object-position:25% 68%; transform:scale(1.08); filter:grayscale(1) }
.services-editorial-photo img {
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  object-position:58% center;
}

.project-gallery { padding-bottom:clamp(80px,10vw,160px) }
.project-gallery .gallery-bar {
  align-items:flex-end;
  padding-block:28px 36px;
  margin-bottom:clamp(54px,7vw,108px);
}
.project-gallery .gallery-bar>div:first-child { display:grid; gap:22px }
.project-gallery .filters { gap:clamp(16px,2.5vw,38px) }
.gallery-status { display:grid; justify-items:end; gap:15px }
.gallery-status>p { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted) }
.gallery-motion-toggle {
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  padding:8px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  font-size:9px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.gallery-motion-toggle span { width:12px; color:var(--forest) }
.gallery-motion-toggle:disabled { cursor:default; opacity:.7 }

.project-gallery .gallery-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(48px,6vw,96px) clamp(18px,2.2vw,36px);
}
.project-gallery .project-card { min-width:0; padding-top:0 }
.project-gallery .project-card:nth-child(1) { grid-column:1 / 8 }
.project-gallery .project-card:nth-child(2) { grid-column:8 / 13; padding-top:clamp(90px,11vw,170px) }
.project-gallery .project-card:nth-child(3) { grid-column:2 / 7 }
.project-gallery .project-card:nth-child(4) { grid-column:7 / 13; padding-top:clamp(70px,8vw,130px) }
.project-gallery .project-card:nth-child(5) { grid-column:2 / 12 }
@media(min-width:761px) {
  .project-gallery .gallery-grid:not([data-filtered]) .project-card:nth-child(3),
  .project-gallery .gallery-grid:not([data-filtered]) .project-card:nth-child(4) {
    margin-top:clamp(-40px,-2.5vw,-24px);
  }
}
.project-media { position:relative }
.project-viewport { position:relative; overflow:hidden; background:#cbc9c2; isolation:isolate }
.project-card:nth-child(1) .project-viewport { aspect-ratio:1.46 / 1 }
.project-card:nth-child(2) .project-viewport { aspect-ratio:.9 / 1 }
.project-card:nth-child(3) .project-viewport { aspect-ratio:1 / 1 }
.project-card:nth-child(4) .project-viewport { aspect-ratio:1.05 / 1 }
.project-card:nth-child(5) .project-viewport { aspect-ratio:1.72 / 1 }
.project-parallax { position:absolute; inset:-34px 0; will-change:auto }
.project-image-button { position:absolute; inset:0; width:100%; padding:0; border:0; overflow:hidden; background:#cbc9c2 }
.project-shot {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.015);
  transition:opacity 900ms var(--ease-in-out),transform 900ms var(--ease-out);
}
.project-shot.is-active { opacity:1; transform:scale(1) }
.project-card:nth-child(1) .project-shot { object-position:center 48% }
.project-card:nth-child(2) .project-shot { object-position:center }
.project-card:nth-child(3) .project-shot { object-position:center }
.project-card:nth-child(4) .project-shot { object-position:center }
.project-card:nth-child(5) .project-shot { object-position:center 48% }
.project-open-mark {
  position:absolute;
  z-index:2;
  top:18px;
  right:18px;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  background:rgb(244 240 232 / .94);
  color:var(--ink);
  font-size:22px;
  transition:transform 200ms var(--ease-out),background-color 200ms ease;
}
.project-media-chrome {
  position:absolute;
  z-index:3;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  gap:16px;
  min-height:50px;
  padding-left:18px;
  background:var(--paper);
}
.project-shot-count { min-width:47px; font-size:9px; letter-spacing:.13em; color:var(--muted); font-variant-numeric:tabular-nums }
.project-shot-count b { color:var(--ink); font-weight:500 }
.project-shot-controls { display:flex }
.project-shot-controls button {
  width:48px;
  height:50px;
  border:0;
  border-left:1px solid var(--line);
  background:transparent;
  font-size:18px;
  transition:background-color 200ms ease,color 200ms ease;
}
.project-gallery .work-caption { align-items:start; margin-top:19px; padding-top:19px }
.project-gallery .work-caption h2 { font-size:clamp(24px,2.3vw,37px); font-weight:600; letter-spacing:-.045em }
.project-description { max-width:530px; margin-top:12px; font-size:12px; line-height:1.7; color:var(--muted) }
.project-gallery .work-number { font-size:12px; letter-spacing:.14em }
.project-gallery .gallery-note { margin-top:clamp(70px,9vw,130px); letter-spacing:.08em; text-transform:uppercase }

.lightbox {
  width:min(1420px,96vw);
  max-width:none;
  max-height:96dvh;
  padding:14px;
  overflow:hidden;
  background:#111513;
  background-image:none;
  color:var(--paper);
}
.lightbox::backdrop { background:rgb(8 11 9 / .94) }
.lightbox .close-dialog {
  z-index:5;
  top:26px;
  right:26px;
  width:46px;
  height:46px;
  border:1px solid rgb(255 255 255 / .3);
  background:rgb(17 21 19 / .82);
  color:#fff;
}
.lightbox-stage { position:relative; height:min(76dvh,820px); overflow:hidden; background:#080a09 }
.lightbox-stage>img { width:100%; height:100%; object-fit:contain; will-change:transform,opacity }
.lightbox-arrow {
  position:absolute;
  z-index:3;
  top:50%;
  width:52px;
  height:64px;
  border:1px solid rgb(255 255 255 / .3);
  background:rgb(17 21 19 / .72);
  color:#fff;
  font-size:22px;
  transform:translateY(-50%);
  transition:background-color 200ms ease,border-color 200ms ease;
}
.lightbox-arrow-prev { left:18px }
.lightbox-arrow-next { right:18px }
.lightbox .lightbox-caption { min-height:106px; padding:18px 8px 4px }
.lightbox .lightbox-caption h2 { font-size:clamp(25px,2.2vw,34px) }
.lightbox .lightbox-caption p:not(.eyebrow) { color:#b8bdb7 }
.lightbox .lightbox-caption .eyebrow { color:#a9b7ae }
.lightbox-controls { display:grid; justify-items:end; min-width:230px }
.lightbox-controls>span:first-child { font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#c3c8c3 }
.lightbox-progress { display:block; width:100%; height:1px; margin-top:12px; overflow:hidden; background:rgb(255 255 255 / .25) }
.lightbox-progress i { display:block; width:100%; height:100%; transform:scaleX(.1); transform-origin:left; background:var(--paper); transition:transform 250ms var(--ease-in-out) }

@media(hover:hover) and (pointer:fine) {
  .project-parallax { will-change:transform }
  .project-image-button:hover .project-shot.is-active { transform:scale(1.025) }
  .project-image-button:hover .project-open-mark { transform:translate(3px,-3px); background:#fff }
  .project-shot-controls button:hover,.lightbox-arrow:hover { background:var(--forest); color:#fff }
  .lightbox-arrow:hover { border-color:var(--forest) }
}

@media(max-width:900px) {
  .project-gallery .gallery-grid { gap:54px 22px }
  .project-gallery .project-card:nth-child(1) { grid-column:1 / 8 }
  .project-gallery .project-card:nth-child(2) { grid-column:8 / 13; padding-top:70px }
  .project-gallery .project-card:nth-child(3) { grid-column:1 / 7 }
  .project-gallery .project-card:nth-child(4) { grid-column:7 / 13; padding-top:60px }
  .project-gallery .project-card:nth-child(5) { grid-column:1 / 13 }
  .project-parallax { inset:0 }
}

@media(max-width:760px) {
  .project-gallery .gallery-bar { align-items:flex-start; flex-wrap:wrap; margin-bottom:55px }
  .project-gallery .gallery-bar>div:first-child { gap:15px }
  .gallery-status { width:100%; display:block }
  .gallery-status>p { display:none }
  .gallery-motion-toggle { margin-top:4px }
  .project-gallery .filters { gap:12px 18px }
  .project-gallery .filters button { padding-block:9px }
  .project-gallery .gallery-grid { grid-template-columns:1fr; gap:56px }
  .project-gallery .project-card:nth-child(n) { grid-column:1; padding-top:0; margin-left:0 }
  .project-card:nth-child(n) .project-viewport { aspect-ratio:1.15 / 1 }
  .project-card:nth-child(2n) .project-viewport { aspect-ratio:.96 / 1 }
  .project-card:nth-child(5) .project-viewport { aspect-ratio:1.3 / 1 }
  .project-open-mark { top:12px; right:12px; width:42px; height:42px }
  .project-media-chrome { min-height:46px }
  .project-shot-controls button { width:44px; height:46px }
  .project-gallery .work-caption { display:grid; grid-template-columns:minmax(0,1fr) auto }
  .project-gallery .work-caption h2 { font-size:27px }
  .project-description { grid-column:1 / -1; font-size:11px }
  .project-gallery .work-number { display:block }
  .lightbox { width:100vw; max-height:100dvh; margin:auto 0 0; padding:8px }
  .lightbox-stage { height:66dvh }
  .lightbox .close-dialog { top:18px; right:18px }
  .lightbox-arrow { top:auto; bottom:12px; width:48px; height:48px; transform:none }
  .lightbox-arrow-prev { left:12px }
  .lightbox-arrow-next { right:12px }
  .lightbox .lightbox-caption { min-height:0; gap:12px; padding:14px 5px 6px }
  .lightbox .lightbox-caption h2 { font-size:24px }
  .lightbox .lightbox-caption p:not(.eyebrow) { display:none }
  .lightbox-controls { align-self:stretch; min-width:0; width:100%; justify-items:start }
}

/* Filtered collections flow from the first available space, independent of source order. */
.project-gallery .gallery-grid[data-filtered] {
  display:flex;
  flex-wrap:wrap;
  gap:64px 30px;
}
.project-gallery .gallery-grid[data-filtered] .project-card {
  flex:1 1 300px;
  padding-top:0;
  margin-left:0;
}
.project-gallery .gallery-grid[data-filtered] .project-viewport { aspect-ratio:1 / 1 }

@media(prefers-reduced-motion:reduce) {
  .project-shot,.project-open-mark,.lightbox-progress i { transition:none }
  .project-image-button:hover .project-shot.is-active,.project-image-button:hover .project-open-mark { transform:none }
  .lightbox-stage>img { will-change:auto }
}