/* v34: one shared geometry for desktop and mobile. */
:root{--page-gutter:clamp(20px,3.4vw,64px)}
body .wrap{width:100%;max-width:none;padding-inline:var(--page-gutter)}
body p,body .lede,body .nota,body .desc,body .viewer-description p,body .native-content p{text-align:justify;text-justify:inter-word;hyphens:auto;text-wrap:pretty}
p.kicker,p.tag,p.loc,.project-category,.hero-pagination p{text-align:start;text-wrap:wrap}
img{display:block}
section{padding-block:clamp(36px,4vw,64px)}
/* Keep photographs flush with the frame, preserving their proportions. */
.portfolio-page #grp-clientes>.vertical-carousel{width:100%;max-width:none;height:clamp(440px,68vh,720px);min-height:0;margin:20px 0 0!important;padding:0;border:0;border-radius:0;scroll-snap-type:y mandatory}
.portfolio-page .vertical-carousel .journey-card{display:block;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:0;overflow:hidden;scroll-snap-stop:normal}
.portfolio-page .vertical-carousel .journey-card .project-cover{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr);gap:0;padding:0!important;width:100%;height:100%!important;min-height:0!important;align-items:stretch}
.portfolio-page .vertical-carousel .journey-card .editorial-card-photo,
.portfolio-page .vertical-carousel .journey-card .project-cover>canvas{grid-area:1/1!important;display:block;width:100%!important;max-width:100%;height:100%!important;min-height:0!important;margin:0!important;object-fit:cover!important;object-position:center;background:transparent}
.portfolio-page .vertical-carousel .journey-card .project-info{grid-area:1/2;align-self:stretch;justify-content:center;gap:12px;padding:clamp(24px,3.5vw,64px)!important;overflow:auto}
.portfolio-page .vertical-carousel .project-info>b{max-width:none;font-size:clamp(25px,2.5vw,42px);line-height:1.2}
.portfolio-page .vertical-carousel .project-category{margin:0}
.portfolio-page .vertical-carousel .project-location{margin:0;line-height:1.6}
.portfolio-page .vertical-carousel .project-cue{margin-top:12px!important;flex-shrink:0;align-self:flex-start}
.vertical-status{max-width:none;margin-inline:0}
/* Remove nested gutters around horizontal galleries. */
section:has(.car-track)>.wrap{padding-inline:0;max-width:none}
section:has(.car-track)>.wrap>:not(.carousel):not(.car-track){margin-inline:var(--page-gutter)}
section:has(.car-track) .carousel{width:100%;max-width:none;margin-inline:0}
.car-track{width:100%;max-width:none;padding-inline:0;scroll-padding-inline:0;gap:0}
.car-track.divs>.div{flex:0 0 33.333333%;min-width:0;margin:0;border-radius:0;min-height:clamp(400px,38vw,600px)}
.car-track img{object-fit:cover}
.car-nav.prev{left:16px}.car-nav.next{right:16px}
#destacados-track>.obra{flex:0 0 100%;width:100%;margin:0;border-radius:0}
/* Equal logo cells, with ten brands arranged in two complete rows. */
.logos.company-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px}
.logos.company-cards figure{display:grid;grid-template-rows:90px 1fr;align-items:center;justify-items:center;align-content:start;gap:16px;margin:0;padding:22px 14px;min-width:0;min-height:190px;aspect-ratio:auto;border-radius:0}
.logos.company-cards figure img{width:100%!important;max-width:180px!important;height:80px!important;max-height:80px!important;object-fit:contain;object-position:center}
.logos.company-cards figcaption{font-size:13px;line-height:1.5;align-self:start;text-align:center}
/* Video occupies the first viewport; the explanation follows naturally. */
body[data-foundation] .foundation-film-zone{position:relative;isolation:isolate;display:flex;align-items:flex-end;width:100%;height:100svh;min-height:540px;padding:0!important;background-size:cover}
.foundation-film-zone .foundation-background-video{z-index:0;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
body[data-foundation] .foundation-film-zone::before{z-index:1;background:linear-gradient(0deg,rgba(12,23,31,.86),rgba(12,23,31,.2) 40%,transparent 68%)}
body[data-foundation] .foundation-film-zone .foundation-intro{position:relative;z-index:2;min-height:0;width:100%;padding:120px 0 90px!important;background:transparent}
body[data-foundation] .foundation-intro h1{font-size:clamp(42px,6.7vw,100px);max-width:18ch;margin:14px 0 20px}
body[data-foundation] .foundation-intro p{max-width:65ch}
.foundation-film-zone .foundation-video-toggle{z-index:3;top:auto;bottom:20px;right:var(--page-gutter)}
body[data-foundation] .foundation-explanation{padding-block:32px 24px}
body[data-foundation] .foundation-explanation .foundation-story{padding-top:0!important;padding-bottom:0}
body[data-foundation] .foundation-story .lede{max-width:none;margin:0 0 22px!important}
body[data-foundation] .foundation-story .rama.ecko-brand{display:grid!important;grid-template-columns:minmax(200px,.7fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:center;margin:0!important;padding:0}
body[data-foundation] .foundation-story .ecko-brand .mk{width:100%;margin:0}
body[data-foundation] .foundation-story .ecko-brand .mk img{width:100%!important;max-width:360px!important;height:auto;margin:auto}
body[data-foundation] .foundation-story .ecko-brand p{max-width:none;margin:0!important}
.sistemas{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.sistema summary{min-height:85px}
.fleet-layout{gap:0;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.fleet-photo{border:0;background:transparent;max-width:none;align-self:start}
.fleet-photo img{width:100%;height:auto}
.fleet-layout .flota{height:100%;gap:0}
@media(min-width:1800px){.car-track.divs>.div{flex-basis:25%}}
@media(max-width:1000px){
.logos.company-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.car-track.divs>.div{flex-basis:50%}
body[data-foundation] .foundation-story .rama.ecko-brand{grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr)}
}
@media(max-width:700px){
.portfolio-page #grp-clientes>.vertical-carousel{height:clamp(530px,78svh,740px);min-height:0}
.portfolio-page .vertical-carousel .journey-card .project-cover{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:48% minmax(0,1fr);}
.portfolio-page .vertical-carousel .journey-card .project-info{grid-area:2/1;padding:20px!important;gap:10px;justify-content:center}
.portfolio-page .vertical-carousel .project-info>b{font-size:clamp(21px,5.6vw,30px)}
.portfolio-page .vertical-carousel .project-location{font-size:14px}
.portfolio-page .vertical-carousel .project-cue{font-size:14px;margin-top:4px!important;padding:8px 14px!important}
.vertical-status{font-size:12px;gap:10px}
.car-track.divs>.div{flex-basis:100%;min-height:0}
.car-track.divs>.div>img{height:auto;aspect-ratio:3/2;object-fit:cover}
#destacados-track .ph img{width:100%;height:100%;object-fit:cover}
body[data-foundation] .foundation-film-zone{height:100svh;min-height:560px}
body[data-foundation] .foundation-film-zone .foundation-intro{padding:100px 0 90px!important}
body[data-foundation] .foundation-intro h1{font-size:clamp(40px,10vw,64px)}
body[data-foundation] .foundation-intro p{font-size:15px;line-height:1.6}
body[data-foundation] .foundation-story .rama.ecko-brand{grid-template-columns:1fr;gap:20px}
body[data-foundation] .foundation-story .ecko-brand .mk img{max-width:300px!important}
.sistemas{grid-template-columns:1fr}.sistema summary{min-height:0}
.fleet-layout{grid-template-columns:1fr}.fleet-layout .flota{grid-template-columns:repeat(2,minmax(0,1fr))}
.fleet-immersive .flota>div{padding:20px 14px}.fleet-immersive .flota em{font-size:14px}
.logos.company-cards figure{padding:18px 12px;grid-template-rows:74px 1fr;min-height:178px;gap:12px}
.logos.company-cards figure img{height:68px!important;max-height:68px!important}
}

/* Let the catalogue span the viewport while its headings retain a reading gutter. */
.portfolio-page #grp-clientes>.vertical-carousel{width:calc(100% + 2 * var(--page-gutter));max-width:none;margin-left:calc(-1 * var(--page-gutter))!important;margin-right:calc(-1 * var(--page-gutter))!important}
/* Native project pages keep full images without forced-height letterboxing. */
.native-hero,.native-gallery a{background:transparent}
.native-hero img,.native-hero .clean-photo,.native-gallery img,.native-gallery .clean-photo{width:100%;height:auto;max-height:none;min-height:0;object-fit:cover}
.native-gallery-grid{gap:20px}
.featured-fullbleed .head,.featured-fullbleed .lede,.featured-fullbleed .tipos,.featured-fullbleed>.wrap>.kicker{max-width:none;padding-inline:0}
@media(min-width:701px){#destacados-track>.obra{padding-left:var(--page-gutter);padding-right:var(--page-gutter)}}
.foundation-film-zone .foundation-video-toggle{left:var(--page-gutter);right:auto}
@media(max-width:700px){
.portfolio-page .vertical-carousel .journey-card .project-cover{grid-template-rows:minmax(0,1fr) auto}
.portfolio-page .vertical-carousel .journey-card .project-info{padding:24px 20px!important;max-height:360px}
}
/* Content is immediately readable, including during fast scrolling. */
.rv{opacity:1!important;transform:none!important;transition:none!important}
/* v35: a compact main banner avoids enlarging photos to viewport height. */
@media(min-width:701px){
body.home-compact .hero.hero-fullbleed{min-height:0;height:clamp(510px,43vw,640px);gap:16px;padding:0;justify-content:space-between}
body.home-compact .hero-fullbleed .inner{padding:54px var(--page-gutter) 12px;margin-top:0}
body.home-compact .hero-fullbleed h1{font-size:clamp(40px,4.2vw,62px);max-width:none;line-height:1.08}
body.home-compact .hero-fullbleed .inner>p:not(.tag){font-size:16px;line-height:1.6;max-width:54ch;margin-top:18px}
body.home-compact .hero-fullbleed .tag{margin-bottom:16px}
body.home-compact .hero-fullbleed .cta{margin-top:20px}
body.home-compact .hero-fullbleed .hero-dock{padding:0 var(--page-gutter) 24px}
body.home-compact .hero-fullbleed .bg img{object-fit:cover;object-position:center;transform:none!important}
}
@media(min-width:701px){
body.home-compact .hero.hero-fullbleed{display:flex;flex-direction:column;position:relative}
body.home-compact .hero-fullbleed .bg{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%;max-height:none;z-index:0}
body.home-compact .hero-fullbleed .inner,body.home-compact .hero-fullbleed .hero-dock{flex-shrink:0;position:relative;z-index:1}
}