/* PREVIEW-ONLY logo correction (round 5) — icon stays fixed on the left,
   the wordmark is ~13-15% larger than the site's original sizes (header
   20-21px->24px, footer/mobile 19-20px->23px). Does NOT modify
   assets/aec-logo-lockup.css (shared with production EN/DE) — applied
   identically on every ES page.

   Why a negative margin instead of just cropping the source image:
   the symbol's PNG canvas (541x500) was checked pixel-by-pixel and is
   ALREADY tightly cropped to its content — something touches every one
   of the four edges (the wave swoosh reaches the right edge, the arc
   reaches the top, the wave reaches the left/bottom). There is no
   uncropped transparent margin around the artwork to trim. The visible
   gap next to the wordmark is genuine negative space *inside* the "C"
   shape, left where the airplane used to be — removing it without
   cutting the wave/arc/ship isn't possible with a rectangular crop.
   So the wordmark is positioned against the symbol's real visible
   silhouette (verified in-browser at 3x zoom, not just in code) rather
   than against the image box's empty edge. Ship, wave and arc pixels
   are completely unmodified. */
.aec-logo-lockup > picture,
.aec-logo-lockup--header > picture {
  width: 92px !important;
  height: 85px !important;
  flex-shrink: 0 !important;
}

.aec-logo-lockup--footer > picture {
  width: 83px !important;
  height: 77px !important;
  flex-shrink: 0 !important;
}

.aec-logo-lockup > span {
  margin-left: -63px !important;
  font-size: 24px !important;
  flex-shrink: 0 !important;
}

.aec-logo-lockup--footer > span {
  margin-left: -59px !important;
  font-size: 23px !important;
}

@media (max-width: 620px) {
  .aec-logo-lockup--header > picture {
    width: 82px !important;
    height: 76px !important;
  }

  .aec-logo-lockup--header > span {
    margin-left: -59px !important;
    font-size: 23px !important;
  }

  /* Compact legal and 404 headers: keep the logo and WhatsApp on the first
     row, then give the breadcrumb the full second row. */
  header > .pad:not(.hdr) {
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }

  header > .pad:not(.hdr) nav {
    order: 3;
    flex: 1 0 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  header > .pad:not(.hdr) > [data-feature="whatsapp"] {
    margin-left: auto !important;
  }
}

/* PREVIEW-ONLY bug fix: subpage header (.hdr) overflowed horizontally between
   901px and ~1180px — nothing wrapped in that range (existing wrap rule only
   fires at max-width:900px; confirmed this overflow pre-exists in production
   too, e.g. es/about/ at 1024px). Extends the same wrap behavior upward so
   nothing is clipped; no visual change outside this dead zone. */
@media (min-width: 901px) and (max-width: 1340px) {
  .hdr {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .hdr nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 16px !important;
    font-size: 14px !important;
  }
}