/* 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}
}
/* Móvil: el cuadro completo. A pantalla completa se recortaba casi la mitad
   del ancho, que es lo que cortaba las torres de los extremos. */
@media(max-width:900px){
body[data-foundation] .foundation-film-zone{
  display:block;height:auto!important;min-height:0!important;padding:0!important;
  background:
    linear-gradient(180deg,rgba(10,19,26,.2),rgba(10,19,26,.95) 62%),
    url('/img/cimentacion-fondo-v7.jpg') center/cover no-repeat,
    #0c171f!important}
body[data-foundation] .foundation-film-zone::before{display:none}
.foundation-film-zone .foundation-background-video{
  position:relative!important;inset:auto!important;display:block;
  width:100%!important;height:auto!important;max-width:none;
  aspect-ratio:1008/1222;object-fit:cover;object-position:center}
body[data-foundation] .foundation-film-zone .foundation-intro{
  position:relative;z-index:2;min-height:0;background:transparent;
  padding:26px 0 30px!important}
body[data-foundation] .foundation-film-zone .foundation-intro .kicker{
  display:inline-flex;align-items:center;gap:10px;margin:0}
body[data-foundation] .foundation-film-zone .foundation-intro .kicker::before{
  content:"";width:26px;height:2px;background:var(--senal);flex:none}
body[data-foundation] .foundation-intro h1{margin:12px 0 14px}
.foundation-film-zone .foundation-video-toggle{
  position:relative;left:auto;right:auto;top:auto;bottom:auto;z-index:3;
  display:inline-block;margin:18px var(--page-gutter) 26px}
}

/* 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}
}