/* 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,.hero-caption,.vertical-status,figcaption{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}
}

/* v36 · Banner principal: la fotografía ocupa su propio panel y se ve limpia.
   Antes la foto vivía detrás del texto, atenuada y con dos degradados encima,
   así que en escritorio prácticamente no se distinguía la obra. */
@media(min-width:901px){
body.home-compact .hero.hero-fullbleed{
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-rows:minmax(0,1fr) auto;
  height:clamp(468px,38vw,566px);
  min-height:0;gap:0;padding:0;background:#111d27;overflow:hidden}
body.home-compact .hero-fullbleed .bg{
  position:relative;inset:auto;grid-column:2;grid-row:1/-1;
  width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;z-index:0;overflow:hidden}
body.home-compact .hero-fullbleed .bg img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;opacity:0;transform:none!important}
body.home-compact .hero-fullbleed .bg img.on{opacity:1}
body.home-compact .hero-fullbleed .bg::after{
  background:linear-gradient(90deg,#111d27 0%,rgba(17,29,39,.55) 7%,rgba(17,29,39,.12) 18%,transparent 34%)}
body.home-compact .hero-fullbleed .inner{
  grid-column:1;grid-row:1;align-self:center;z-index:1;
  width:100%;max-width:none;
  padding:clamp(20px,2.4vw,34px) clamp(26px,2.6vw,44px) 0 var(--page-gutter)}
body.home-compact .hero-fullbleed h1{font-size:clamp(38px,3.7vw,56px);line-height:1.06;max-width:none}
body.home-compact .hero-fullbleed .tag{margin-bottom:14px}
body.home-compact .hero-fullbleed .inner>p:not(.tag){font-size:15.5px;line-height:1.62;max-width:46ch;margin-top:16px}
body.home-compact .hero-fullbleed .cta{margin-top:20px}
body.home-compact .hero-fullbleed .hero-dock{
  grid-column:1;grid-row:2;z-index:1;
  grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;
  padding:0 clamp(26px,2.6vw,44px) clamp(20px,2vw,28px) var(--page-gutter)}
body.home-compact .hero-fullbleed .hero-pagination{gap:10px}
body.home-compact .hero-fullbleed .hero-pagination button{font-size:12px;gap:8px;min-height:34px}
body.home-compact .hero-fullbleed .hero-caption{font-size:12.5px;line-height:1.55}
body.home-compact .hero-fullbleed .hero-controls{margin-right:0!important;gap:6px}
body.home-compact .hero-fullbleed .hero-controls button{width:38px;height:38px;padding:8px}
body.home-compact .hero-fullbleed .hero-controls svg{width:19px;height:19px}
body.home-compact .hero-fullbleed .hero-count{font-size:12px;margin-right:10px}
}
/* 701–900 px: se conserva la foto de fondo, pero sin el velo que la apagaba. */
@media(min-width:701px) and (max-width:900px){
body.home-compact .hero-fullbleed .bg img.on{opacity:1}
body.home-compact .hero-fullbleed .bg::after{
  background:linear-gradient(90deg,rgba(17,29,39,.9) 0%,rgba(17,29,39,.72) 38%,rgba(17,29,39,.18) 62%,transparent 78%),linear-gradient(0deg,rgba(17,29,39,.92) 0%,rgba(17,29,39,.3) 16%,transparent 34%)}
}

/* v36 · Marca de agua A|CP: la filigrana sube y se acota en altura para que
   las cifras queden por debajo y dejen de taparla en escritorio. */
@media(min-width:701px){
section.civil-photo::before{
  background-position:93% 20%;
  background-size:auto clamp(190px,23vw,310px)}
section.civil-photo .mini{margin-top:clamp(56px,6vw,86px)}
section.civil-photo .mini div{border-top-color:var(--senal)}
}

/* v36 · Logos del grupo: la columna interna de cada tarjeta ocupa todo el ancho
   de la celda, así el logotipo y su pie quedan centrados y no pegados al margen. */
.logos.company-cards figure{grid-template-columns:minmax(0,1fr);justify-items:center;justify-content:center;text-align:center}
.logos.company-cards figure img{width:auto!important;max-width:min(100%,190px)!important;margin-inline:auto}
.logos.company-cards figcaption{width:100%;text-align:center}

/* v36 · Flota propia con el mismo peso visual que los carruseles de división:
   a todo lo ancho, fotografía a sangre y cifras grandes y aireadas. */
@media(min-width:901px){
.fleet-immersive{padding:clamp(40px,4vw,64px) 0 0}
.fleet-immersive>.kicker{margin:0 0 clamp(20px,2.2vw,30px);padding-inline:var(--page-gutter);font-size:13px}
.fleet-layout{margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);gap:0;
  align-items:stretch;height:clamp(440px,41vw,600px)}
.fleet-photo{position:relative;margin:0;align-self:stretch;height:100%;min-height:0;overflow:hidden;border:0;background:#0f1922}
.fleet-photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;min-height:0;object-fit:cover;object-position:center}
.fleet-layout .flota{margin:0;height:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;gap:1px;background:#ffffff1f}
.fleet-immersive .flota>div{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,2.6vw,44px) clamp(24px,2.4vw,40px);border-bottom:0;background:#16222dcc}
.fleet-immersive .flota>div:nth-child(even){padding-right:max(var(--page-gutter),clamp(24px,2.4vw,40px))}
.fleet-immersive .flota b{font-size:clamp(44px,4.4vw,68px);line-height:.95}
.fleet-immersive .flota span{font-size:11.5px;letter-spacing:.16em;margin-top:14px}
.fleet-immersive .flota em{font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.65;margin-top:16px}
}

/* v37 · El mismo banner dividido de la portada en La empresa y Obras y proyectos:
   texto en panel sólido a la izquierda, fotografía limpia en su propio panel. */
@media(min-width:901px){
.hero.hero-fullbleed.compact-banner{
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-rows:minmax(0,1fr) auto;
  height:clamp(468px,38vw,566px);
  min-height:0!important;max-height:none;gap:0;padding:0;
  background:#111d27;overflow:hidden;position:relative}
.compact-banner .bg{
  position:relative!important;inset:auto!important;grid-column:2;grid-row:1/-1;
  width:100%;height:100%!important;min-height:0!important;max-height:none;
  aspect-ratio:auto!important;z-index:0;overflow:hidden}
.compact-banner .bg img{
  position:absolute;inset:0;width:100%;height:100%;max-height:none;
  object-fit:cover;object-position:center;opacity:0;transform:none!important}
.compact-banner .bg img.on{opacity:1}
.compact-banner .bg::after{
  background:linear-gradient(90deg,#111d27 0%,rgba(17,29,39,.55) 7%,rgba(17,29,39,.12) 18%,transparent 34%)}
.compact-banner .banner-expand{
  grid-column:2;grid-row:1/-1;position:relative;inset:auto;width:100%;height:100%;z-index:2}
.compact-banner .inner{
  grid-column:1;grid-row:1;align-self:center;z-index:1;width:100%;max-width:none;
  padding:clamp(20px,2.4vw,34px) clamp(26px,2.6vw,44px) 0 var(--page-gutter)}
.compact-banner h1{font-size:clamp(34px,3.3vw,52px);line-height:1.07;max-width:none;margin:0}
.compact-banner .inner .kicker,.compact-banner .inner .tag{margin:0 0 14px;font-size:13px;letter-spacing:.09em}
.compact-banner .inner>p:not(.kicker):not(.tag){
  font-size:15.5px;line-height:1.62;max-width:46ch;margin:16px 0 0}
.compact-banner .inner .btn{display:inline-flex;margin-top:20px;font-size:13px;min-height:48px;padding:13px 20px}
.compact-banner .hero-dock{
  grid-column:1;grid-row:2;z-index:1;
  grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;
  padding:0 clamp(26px,2.6vw,44px) clamp(20px,2vw,28px) var(--page-gutter)}
.compact-banner .hero-pagination{gap:10px}
.compact-banner .hero-pagination button{font-size:12px;gap:8px;min-height:34px}
.compact-banner .hero-caption{font-size:12.5px;line-height:1.55;margin:0}
.compact-banner .hero-controls{margin-right:0!important;gap:6px}
.compact-banner .hero-controls button{width:38px;height:38px;padding:8px}
.compact-banner .hero-controls svg{width:19px;height:19px}
.compact-banner .hero-count{font-size:12px;margin-right:10px}
}
/* Móvil y tablet: se conserva la foto arriba y el texto debajo, con el mando al pie. */
@media(max-width:900px){
.compact-banner .hero-dock{padding:16px var(--page-gutter) 22px;gap:10px}
.compact-banner .hero-caption{font-size:12.5px;margin:0}
}

/* v40 · Banda de cimentación. El video es vertical, así que antes se recortaba
   (a todo el ancho) o imponía una altura enorme (con panel propio). Aquí la altura
   de la banda manda y el ancho del panel se deriva de ella, topado en 660 px: ese
   es el límite real del material —el original aporta 720 px de detalle— así que
   más allá sólo se vería blando. El fondo deja ver la propia foto desenfocada y
   la filigrana A|CP, en lugar del negro plano. */
@media(min-width:901px){
body[data-foundation] .foundation-film-zone{
  display:grid;align-items:stretch;
  grid-template-columns:minmax(0,1fr) clamp(430px,36.3vw,660px);
  position:relative;width:100%;height:clamp(520px,44vw,800px)!important;min-height:0!important;
  padding:0!important;
  background:
    linear-gradient(100deg,rgba(10,19,26,.95) 0%,rgba(14,26,35,.87) 46%,rgba(19,33,44,.7) 100%),
    url('/img/cimentacion-fondo-v7.jpg') center/cover no-repeat,
    #0c171f!important;
  border-block:1px solid rgba(255,255,255,.08)}
.foundation-film-zone .foundation-background-video{
  position:relative!important;inset:auto!important;grid-column:2;grid-row:1;
  display:block;width:100%!important;height:100%!important;max-width:none;
  aspect-ratio:auto;object-fit:cover;object-position:center}
body[data-foundation] .foundation-film-zone::before{
  content:"";position:relative;inset:auto;grid-column:2;grid-row:1;z-index:2;
  align-self:stretch;justify-self:stretch;width:100%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,23,31,.96) 0%,rgba(12,23,31,.5) 7%,rgba(12,23,31,.1) 20%,transparent 36%)}
body[data-foundation] .foundation-film-zone .foundation-intro{
  grid-column:1;grid-row:1;align-self:center;z-index:2;position:relative;isolation:isolate;
  width:100%;min-height:0;padding:0!important;background:transparent}
body[data-foundation] .foundation-film-zone .foundation-intro>.wrap{
  padding:0 clamp(28px,3vw,56px) 0 var(--page-gutter)}
/* Filigrana A|CP detrás del texto, como en la portada. */
body[data-foundation] .foundation-film-zone .foundation-intro::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:clamp(10px,1.6vw,40px);top:54%;transform:translateY(-50%);
  width:min(50%,470px);aspect-ratio:361/153;opacity:.085;
  background:url('/img/acp-marca-agua.svg') no-repeat center/contain}
body[data-foundation] .foundation-intro h1{font-size:clamp(44px,5.4vw,88px);max-width:12ch;margin:16px 0 22px;line-height:1.04}
body[data-foundation] .foundation-intro p{max-width:64ch;font-size:clamp(16px,1.2vw,19px);line-height:1.68;margin:0}
body[data-foundation] .foundation-film-zone .foundation-intro .kicker{
  display:inline-flex;align-items:center;gap:14px;font-size:clamp(12px,.95vw,14px);margin:0}
body[data-foundation] .foundation-film-zone .foundation-intro .kicker::before{
  content:"";width:clamp(28px,3vw,54px);height:2px;background:var(--senal);flex:none}
.foundation-film-zone .foundation-video-toggle{
  position:absolute;left:var(--page-gutter);right:auto;top:auto;
  bottom:clamp(24px,2.6vw,40px);z-index:3;margin:0}
}
/* v43 · Móvil y tablet: el video vuelve a ser portada a pantalla completa,
   con el texto encima (reglas base de arriba: 100svh, object-fit:cover y velo). */

/* v39 · Sistemas y procedimientos: al abrir una ficha, su vecina de fila quedaba
   corta y se veía el fondo de la rejilla como un recuadro vacío. La ficha abierta
   pasa a ocupar la fila completa —igual que la trayectoria y el catálogo— y las
   celdas vuelven a igualar altura, así no queda fondo expuesto. */
.sistemas{align-items:stretch;background:transparent;gap:1px;border-block:0}
.sistema{display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.sistema[open]{grid-column:1/-1}

/* v42 · Flota propia alineada con Sistemas y procedimientos. El bloque deja de
   ir a sangre: foto y cifras toman los mismos márgenes que la rejilla de arriba,
   y sólo el fondo de la banda sigue a todo lo ancho. */
.fleet-immersive{
  width:auto;margin-left:0;margin-right:0;padding-inline:0;overflow:visible;
  background:#1a2430;box-shadow:0 0 0 100vmax #1a2430;clip-path:inset(0 -100vmax)}
.fleet-immersive::before{display:none}
.fleet-immersive>.kicker{padding-inline:0}
/* Escritorio: la foto conserva la altura del bloque y su ancho sale de la
   proporción del original (1320 × 1618), así se ve completa, sin recorte. */
@media(min-width:901px){
.fleet-immersive{--fleet-h:clamp(440px,41vw,600px)}
.fleet-layout{
  grid-template-columns:calc(var(--fleet-h) * 1320 / 1618) minmax(0,1fr);
  height:auto;min-height:var(--fleet-h)}
.fleet-photo{height:var(--fleet-h);align-self:start}
.fleet-photo img{object-fit:contain;object-position:center}
.fleet-immersive .flota>div:nth-child(even){padding-right:clamp(24px,2.4vw,40px)}
}
/* Escritorio angosto: las fichas se compactan para caber en la altura de la foto. */
@media(min-width:901px) and (max-width:1180px){
.fleet-immersive .flota>div{padding-block:18px}
.fleet-immersive .flota span{margin-top:10px}
.fleet-immersive .flota em{margin-top:10px;line-height:1.55}
}

/* v43 · Las etiquetas no se parten con guion ("Ecko Te-rra"). */
.kicker{hyphens:none;-webkit-hyphens:none}
/* v48 · Justificado también en las fichas de flota y en las listas de datos. */
body .flota em,body dd{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}

/* v46 · Portada de cimentación: texto | Ecko Terra | video.
   El bloque Ecko Terra vive dentro de .foundation-film-zone y queda en logo
   + un solo párrafo. El control del video pasa a flotar sobre el propio video. */

/* Control del video: píldora con icono (el icono sale de aria-pressed). */
.foundation-film-zone .foundation-video-toggle{
  display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px 0 14px;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;
  background:rgba(10,19,26,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font:500 12.5px/1 'Poppins','Poppins Respaldo',system-ui,sans-serif;letter-spacing:.01em;
  cursor:pointer;transition:background-color .2s,border-color .2s}
.foundation-film-zone .foundation-video-toggle::before{
  content:"";flex:none;width:10px;height:12px;
  background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.foundation-film-zone .foundation-video-toggle[aria-pressed="true"]::before{
  width:11px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.foundation-film-zone .foundation-video-toggle:hover{background:rgba(10,19,26,.8);border-color:var(--senal)}
.foundation-film-zone .foundation-video-toggle:focus-visible{outline:2px solid var(--senal);outline-offset:3px}

/* Bloque Ecko Terra: logo arriba, párrafo debajo. */
body[data-foundation] .foundation-film-zone .foundation-story .rama.ecko-brand{
  display:block!important;margin:0!important;padding:0!important;border:0}
body[data-foundation] .foundation-film-zone .foundation-story .ecko-brand .mk{width:auto;margin:0!important}
body[data-foundation] .foundation-film-zone .foundation-story .ecko-brand .mk img{
  display:block;width:min(100%,520px)!important;max-width:520px!important;height:auto;margin:0!important}
body[data-foundation] .foundation-film-zone .foundation-story .lede{
  margin:0!important;max-width:44ch;
  font-size:clamp(15.5px,1.1vw,18px);line-height:1.65;color:#dbe2e8}
body[data-foundation] .foundation-film-zone .foundation-story .ecko-brand{animation-delay:.52s}
body[data-foundation] .foundation-film-zone .foundation-story .lede{animation-delay:.68s}

/* Móvil y tablet: fila 1 = video a pantalla completa con el texto encima;
   fila 2 = Ecko Terra. Los elementos absolutos se anclan a la fila 1. */
@media(max-width:900px){
body[data-foundation] .foundation-film-zone{
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:max(540px,100svh) auto;align-items:end;
  height:auto!important;min-height:0!important}
.foundation-film-zone .foundation-background-video,
body[data-foundation] .foundation-film-zone::before,
.foundation-film-zone .foundation-video-toggle{grid-column:1/2;grid-row:1/2}
body[data-foundation] .foundation-film-zone .foundation-intro{grid-column:1;grid-row:1;align-self:end}
.foundation-film-zone .foundation-video-toggle{
  position:absolute;top:auto;right:auto;bottom:22px;left:var(--page-gutter);z-index:3;margin:0}
.foundation-film-zone .foundation-explanation{
  grid-column:1;grid-row:2;position:relative;z-index:2;padding:40px 0 44px!important}
body[data-foundation] .foundation-film-zone .foundation-story{
  display:flex;flex-direction:column;gap:22px;padding-top:0!important}
body[data-foundation] .foundation-film-zone .foundation-story .ecko-brand .mk img{width:min(100%,400px)!important}
body[data-foundation] .foundation-film-zone .foundation-story .lede{max-width:52ch}
}
@media(max-width:700px){
body[data-foundation] .foundation-film-zone{grid-template-rows:max(560px,100svh) auto}
body[data-foundation] .foundation-film-zone .foundation-story .lede{font-size:16px}
}

/* Escritorio. */
@media(min-width:901px){
body[data-foundation] .foundation-film-zone{
  --film-w:clamp(420px,32vw,620px);--hd-h:75px;
  --intro-pad:clamp(24px,2.6vw,56px);--h1-size:clamp(42px,3.8vw,76px);--wm-gap:clamp(14px,1.2vw,24px);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) var(--film-w);
  grid-template-rows:minmax(0,1fr);
  height:auto!important;min-height:clamp(580px,44vw,800px)!important}
body[data-foundation] .foundation-film-zone::before{display:none}
.foundation-film-zone .foundation-background-video{grid-column:3;grid-row:1/-1}
body[data-foundation] .foundation-film-zone .foundation-intro{
  grid-column:1;grid-row:1;align-self:center;
  padding:calc(var(--hd-h) + 48px) 0 56px!important}
body[data-foundation] .foundation-film-zone .foundation-intro>.wrap{
  padding:0 var(--intro-pad) 0 var(--page-gutter)}
body[data-foundation] .foundation-intro h1{font-size:var(--h1-size);margin:18px 0 22px}
body[data-foundation] .foundation-film-zone .foundation-intro p:not(.kicker){max-width:48ch}
/* Filigrana A|CP detrás del título, completa y con aire (sube más de lo que
   baja, sin deformarse): arranca a --wm-gap
   del borde de la pantalla y nunca llega a la línea del bloque Ecko Terra.
   La .wrap es rejilla para que la filigrana se centre en la fila del título. */
body[data-foundation] .foundation-film-zone .foundation-intro::after{content:none}
body[data-foundation] .foundation-film-zone .foundation-intro>.wrap{
  display:grid;grid-template-columns:minmax(0,1fr);position:relative}
body[data-foundation] .foundation-film-zone .foundation-intro>.wrap::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  grid-column:1/2;grid-row:2/3;
  left:calc(var(--wm-gap) - var(--page-gutter));top:50%;transform:translateY(-62%);
  width:min(calc(100% + var(--page-gutter) + var(--intro-pad) - 2 * var(--wm-gap)),calc(var(--h1-size) * 10));
  aspect-ratio:361/153;opacity:.085;
  background:url('/img/acp-marca-agua.svg') no-repeat center/contain}
/* Etiqueta: si parte en dos renglones, la línea queda con el primero. */
body[data-foundation] .foundation-film-zone .foundation-intro .kicker{align-items:flex-start;line-height:1.7}
body[data-foundation] .foundation-film-zone .foundation-intro .kicker::before{margin-top:.85em}
/* Ecko Terra: columna propia, separada del título por un filete. */
.foundation-film-zone .foundation-explanation{
  grid-column:2;grid-row:1;align-self:center;position:relative;z-index:2;background:transparent;
  padding:calc(var(--hd-h) + 48px) clamp(24px,2.6vw,56px) 56px 0!important}
body[data-foundation] .foundation-film-zone .foundation-story{
  display:flex;flex-direction:column;gap:clamp(22px,2vw,32px);max-width:none;
  padding:6px 0 6px clamp(24px,2.4vw,48px)!important;
  border-left:1px solid rgba(255,255,255,.14)}
/* Control del video sobre el video, abajo a la izquierda. */
.foundation-film-zone .foundation-video-toggle{
  grid-column:3;grid-row:1;position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:3;
  align-self:end;justify-self:start;margin:0 0 clamp(20px,2vw,32px) clamp(20px,2vw,32px)}
}
/* Escritorio angosto: Ecko Terra debajo del título, junto al video. */
@media(min-width:901px) and (max-width:1279px){
body[data-foundation] .foundation-film-zone{
  grid-template-columns:minmax(0,1fr) var(--film-w);grid-template-rows:auto auto}
.foundation-film-zone .foundation-background-video{grid-column:2;grid-row:1/-1}
body[data-foundation] .foundation-film-zone .foundation-intro{align-self:end;padding-bottom:0!important}
.foundation-film-zone .foundation-explanation{
  grid-column:1;grid-row:2;align-self:start;
  padding:36px clamp(32px,3.4vw,64px) 56px var(--page-gutter)!important}
body[data-foundation] .foundation-film-zone .foundation-story{
  padding:32px 0 0!important;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
.foundation-film-zone .foundation-video-toggle{grid-column:2;grid-row:2}
}

/* v50 · Ajustes de uso en pantallas táctiles.
   - Campos a 16 px: con menos, el iPhone amplía la página al tocarlos.
   - Enlaces sueltos con al menos 44 px de alto para tocarlos cómodo. */
@media(max-width:900px),(pointer:coarse){
.f input,.f select,.f textarea{font-size:16px}
.f input,.f select{min-height:44px}
a.native-back{display:inline-flex;align-items:center;min-height:44px}
.mapa a{display:inline-flex;align-items:center;min-height:44px}
}
/* v50 · Fichas de proyecto: el alcance va justificado y la ubicación/fecha
   pasa a su propio renglón (antes quedaba pegada: "ventas.Aldea Zamá"). */
.native-scope{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
.native-scope>span>i{display:block;margin-top:12px;font-size:.88em;line-height:1.6;color:#6b7684;text-align:start}

/* v51 · Sin guiones: el texto se justifica sin partir palabras. */
*{-webkit-hyphens:manual!important;hyphens:manual!important}
/* Los bloques de texto usan todo el ancho de su columna para que la
   justificación no deje huecos grandes al no partir palabras. */
@media(min-width:901px){
body[data-foundation] .foundation-film-zone .foundation-intro p:not(.kicker),
body[data-foundation] .foundation-film-zone .foundation-story .lede{max-width:none}
#ecko>.wrap>.lede{max-width:none}
}
/* v51 · Más aire entre título y subtítulo en Cimentación. */
#ecko .wrap>h2{margin-bottom:0}
#ecko .wrap>h2+.lede{margin-top:clamp(14px,1.3vw,22px)!important}

/* v51 · Divisiones (Inicio) como acordeón de paneles.
   Solo aplica cuando divisiones-acordeon.js marca la tira con .divs-accordion;
   sin JavaScript queda el carrusel anterior. */
.car-nav[data-target="divs-track"]{display:none!important}
#divs-track.divs-accordion{
  display:flex;gap:0;overflow:hidden;scroll-snap-type:none;
  height:clamp(460px,40vw,640px);background:#111a23}
#divs-track.divs-accordion>.div{
  position:relative;display:block;flex:1 1 0;min-width:0;min-height:0;height:auto;margin:0;
  overflow:hidden;border-left:1px solid rgba(255,255,255,.14);background:#16202b;
  transition:flex-grow .75s cubic-bezier(.22,.61,.36,1)}
#divs-track.divs-accordion>.div:first-child{border-left:0}
#divs-track.divs-accordion>.div.is-open{flex-grow:5.2}
#divs-track.divs-accordion>.div>img{
  position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;z-index:0;
  transform:scale(1.08);filter:saturate(.55) brightness(.62);
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1),filter .75s ease}
#divs-track.divs-accordion>.div.is-open>img{transform:scale(1);filter:none}
/* velo: azul marca en franjas, degradado inferior en el panel abierto */
#divs-track.divs-accordion>.div::after{
  content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(12,19,27,.88),rgba(12,19,27,.35) 55%,rgba(20,44,70,.30));
  transition:opacity .75s ease}
#divs-track.divs-accordion>.div.is-open::after{
  background:linear-gradient(to top,rgba(12,19,27,.94) 0%,rgba(12,19,27,.72) 30%,rgba(12,19,27,.18) 62%,rgba(12,19,27,0) 100%)}
/* texto del panel abierto: ancho fijo para que no se reacomode al animar */
#divs-track.divs-accordion>.div .t{
  position:absolute;left:0;bottom:0;z-index:2;
  width:min(640px,calc(50vw - 24px));padding:0 clamp(24px,2.6vw,44px) clamp(26px,2.6vw,42px);
  opacity:0;transform:translateY(14px);visibility:hidden;
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
#divs-track.divs-accordion>.div.is-open .t{
  opacity:1;transform:none;visibility:visible;
  transition:opacity .5s ease .38s,transform .6s cubic-bezier(.22,.61,.36,1) .38s,visibility 0s}
#divs-track.divs-accordion>.div .t h3{font-size:clamp(24px,2.3vw,36px);line-height:1.1}
#divs-track.divs-accordion>.div .t p{max-width:46ch}
/* nombre vertical en las franjas */
#divs-track.divs-accordion .div-label{
  position:absolute;z-index:2;left:50%;bottom:clamp(24px,2.4vw,38px);
  display:flex;align-items:center;gap:14px;
  writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);
  color:#fff;font:700 clamp(15px,1.15vw,19px)/1 'Poppins','Poppins Respaldo',system-ui,sans-serif;
  letter-spacing:.01em;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.55);
  transition:opacity .35s ease .3s}
#divs-track.divs-accordion .div-label b{
  font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.18em;color:var(--senal)}
#divs-track.divs-accordion .div-label::after{
  content:"";width:1px;height:38px;background:rgba(255,255,255,.45)}
#divs-track.divs-accordion>.div.is-open .div-label{opacity:0;transition:opacity .2s ease}
#divs-track.divs-accordion>.div:not(.is-open):hover>img{filter:saturate(.8) brightness(.78)}
#divs-track.divs-accordion>.div:focus-visible{outline:3px solid var(--senal);outline-offset:-3px}

/* Celular y tablet: acordeón vertical. */
@media(max-width:900px){
#divs-track.divs-accordion{flex-direction:column;height:auto}
#divs-track.divs-accordion>.div{
  flex:none;height:74px;border-left:0;border-top:1px solid rgba(255,255,255,.14);
  transition:height .65s cubic-bezier(.22,.61,.36,1)}
#divs-track.divs-accordion>.div:first-child{border-top:0}
#divs-track.divs-accordion>.div.is-open{height:clamp(420px,112vw,560px)}
#divs-track.divs-accordion>.div .t{width:100%;padding:0 var(--page-gutter) 28px}
#divs-track.divs-accordion .div-label{
  writing-mode:horizontal-tb;transform:translateY(50%);left:var(--page-gutter);right:var(--page-gutter);
  bottom:50%;gap:14px;font-size:17px}
#divs-track.divs-accordion .div-label::after{width:auto;height:1px;flex:1;order:2;background:rgba(255,255,255,.28)}
#divs-track.divs-accordion .div-label>span{order:1}
#divs-track.divs-accordion .div-label>b{order:0}
}
@media(prefers-reduced-motion:reduce){
#divs-track.divs-accordion>.div,#divs-track.divs-accordion>.div>img,
#divs-track.divs-accordion>.div .t,#divs-track.divs-accordion .div-label{transition:none!important}
}
/* v51 · Galerías de fichas: las fotos verticales muy altas se limitan en alto
   (sin deformarse) para que la cuadrícula no deje huecos enormes. */
.native-gallery-grid figure>a{display:block}
.native-gallery-grid img{width:100%;height:auto;max-height:min(78vh,760px);object-fit:contain;display:block}