/* /home-v6 - tablet + mobile adaptation of the desktop reproduction.

   The reference (https://n335.com.br/home-v4/) ships almost no responsive
   rules of its own: on a phone its 114px hero headline overflows the viewport
   by 256px, the page scrolls sideways by 224px, and the logo strip shows one
   viewport-wide logo. Per the brief, mobile/tablet may be adapted with good
   responsive practice as long as the design stays the same page - that is all
   this file does. Every rule is inside a media query, so the desktop (>1024px)
   reproduction is untouched. Selectors repeat the page CSS's own
   `.elementor-1659 .elementor-element.elementor-element-<id>` prefix and this
   file is loaded after home-v6.css, so they win on source order - no
   !important needed. Side padding at <=1024px comes from the site-wide
   mobile-fixes.css (24px / 16px), same as every other Elementor page here. */

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1024px) {
  /* About: the 600+ / 120+ counters live in 19% / 18% columns (a min-width:768px
     rule in the page CSS) - 129px wide at 768px for an 80px numeral, so the
     figures spilled out of their columns. Let the row wrap: the two counters
     side by side, the description paragraph on its own line below. */
  .elementor-1659 .elementor-element.elementor-element-5f7efef {
    --flex-wrap: wrap;
    flex-wrap: wrap;
    --gap: 24px 40px;
    --row-gap: 24px;
    --column-gap: 40px;
  }
  .elementor-1659 .elementor-element.elementor-element-46873fa,
  .elementor-1659 .elementor-element.elementor-element-a6deea5 {
    /* --width feeds .e-con{max-width:min(100%,var(--width))}: 100% lifts the 19%/18% cap */
    --width: 100%;
    width: auto;
    --flex-grow: 0;
    --flex-shrink: 0;
    flex: 0 0 auto;
  }
  .elementor-1659 .elementor-element.elementor-element-b04c223 {
    --width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  /* Hero: the headline's 114px is the desktop size (no step-down exists in the
     reference). Sized to keep "moves you forward" on one line on a 390px
     phone; the subtitle widget gets the full width instead of the narrow
     desktop column that wrapped it 1-2 words per line. */
  .elementor-1659 .elementor-element.elementor-element-1c280ba {
    font-size: 40px;
    line-height: 1.1em;
  }
  .elementor-1659 .elementor-element.elementor-element-c0b7498 {
    --container-widget-width: 100%;
    width: 100%;
    max-width: 100%;
  }

  /* About: title 37px -> 32px; counters 80px -> 64px so both fit side by side
     on a phone; the arrow button keeps its desktop size. */
  .elementor-1659 .elementor-element.elementor-element-dc62755 .elementor-icon-box-title,
  .elementor-1659 .elementor-element.elementor-element-dc62755 .elementor-icon-box-title a {
    font-size: 32px;
  }
  .elementor-1659 .elementor-element.elementor-element-860d58d .elementor-heading-title,
  .elementor-1659 .elementor-element.elementor-element-db3ff3e .elementor-heading-title {
    font-size: 64px;
  }
}

/* ---------------------------------------------------- tablet: Airport row */
@media (max-width: 1024px) {
  /* About title: the desktop text-align:justify spreads a two-line title
     ("About      VMI / Security") once it wraps; hero subtitle: the 47% desktop
     column wraps it 3-4 words per line on a tablet. */
  .elementor-1659 .elementor-element.elementor-element-dc62755 .elementor-icon-box-wrapper {
    text-align: left;
  }
  .elementor-1659 .elementor-element.elementor-element-c0b7498 {
    --container-widget-width: 70%;
    width: 70%;
    max-width: 70%;
  }
  /* Airport: text column (44.464%) + product-card column side by side leaves
     each of the two cards ~164px wide at 768px (the reference has the same
     problem: 178px, text overflowing inside the cards). Wrap the row instead:
     text on its own line, the two cards below at half the width each. */
  .elementor-1659 .elementor-element.elementor-element-65c246d {
    --flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .elementor-1659 .elementor-element.elementor-element-19b5da0,
  .elementor-1659 .elementor-element.elementor-element-9761900 {
    --width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ======================================================================
   Sections added to the reference after /home-v5 (Air cargo, Posts and
   Custons, Prison System, Forensics, ARPIA, Service, FAQ, Certifications).
   Same approach as above: desktop untouched, tablet keeps the row/column
   structure where it fits and wraps where the reference's fixed 44%/33%/47%
   widths leave 120-170px columns, mobile stacks. */

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1024px) {
  /* Site header: "Contact Us" pill broke onto two lines next to the logo. */
  .elementor-location-header .elementor-button-text { white-space: nowrap; }

  /* Posts and Custons / Prison System / Forensics: same text-column (44.464%) +
     two-product-cards row as Airport - wrap it the same way (text on its own
     line, cards below). */
  .elementor-1659 .elementor-element.elementor-element-729c4d2,
  .elementor-1659 .elementor-element.elementor-element-8222c03,
  .elementor-1659 .elementor-element.elementor-element-924902e {
    --flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .elementor-1659 .elementor-element.elementor-element-84c86e6,
  .elementor-1659 .elementor-element.elementor-element-d3b194b,
  .elementor-1659 .elementor-element.elementor-element-7c0eada,
  .elementor-1659 .elementor-element.elementor-element-037b633,
  .elementor-1659 .elementor-element.elementor-element-43c7fe3,
  .elementor-1659 .elementor-element.elementor-element-717288f {
    --width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }

  /* Air cargo: three photo cards in one row are ~170px wide at 768px (specs
     wrapping word by word) - two per row, the third below. */
  .elementor-1659 .elementor-element.elementor-element-03d768f {
    --flex-direction: row;
    --flex-wrap: wrap;
    flex-wrap: wrap;
    --justify-content: flex-start;
  }
  .elementor-1659 .elementor-element.elementor-element-c8f01be,
  .elementor-1659 .elementor-element.elementor-element-127d545,
  .elementor-1659 .elementor-element.elementor-element-0b93a25 {
    --width: calc(50% - 10px);
    width: calc(50% - 10px);
    flex: 0 0 calc(50% - 10px);
    min-height: 320px;
  }

  /* ARPIA: four 47%-wide columns squeezed into one row - 2 x 2 grid. */
  .elementor-1659 .elementor-element.elementor-element-130cdea {
    --flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .elementor-1659 .elementor-element.elementor-element-541dddc,
  .elementor-1659 .elementor-element.elementor-element-2f551b0,
  .elementor-1659 .elementor-element.elementor-element-2b238a1,
  .elementor-1659 .elementor-element.elementor-element-2221c9b {
    --width: calc(50% - 12px);
    width: calc(50% - 12px);
    flex: 0 0 calc(50% - 12px);
  }

  /* "View all solutions" pills (Air cargo, ARPIA) are capped at 33% of the
     row on desktop - 250px at 768px for a 12px, two-line label. */
  .elementor-1659 .elementor-element.elementor-element-e75cd8b,
  .elementor-1659 .elementor-element.elementor-element-0eff1bc {
    --container-widget-width: auto;
    width: auto;
    max-width: 100%;
  }

  /* Service counters: the titles are set with line-height:3px (a desktop
     value that only works while they stay on one line); once they wrap on a
     tablet the lines print on top of each other and over the figure. */
  .elementor-1659 .elementor-element.elementor-element-724b7e8 .elementor-counter-title,
  .elementor-1659 .elementor-element.elementor-element-3f87629 .elementor-counter-title {
    line-height: 1.3;
  }
  .elementor-1659 .elementor-element.elementor-element-724b7e8 > .elementor-widget-container {
    padding-right: 24px;
  }
  .elementor-1659 .elementor-element.elementor-element-c1b08f2 {
    --gap: 24px 24px;
    --row-gap: 24px;
    --column-gap: 24px;
  }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  /* Segment titles are 87px on desktop (no step-down exists in the
     reference): "Forensics" is clipped at the right edge of a 390px phone and
     "Posts and Custons" runs three lines tall. 52px keeps each on 1-2 lines. */
  .elementor-1659 .elementor-element.elementor-element-2163633 .elementor-image-box-title,
  .elementor-1659 .elementor-element.elementor-element-d981b10 .elementor-image-box-title,
  .elementor-1659 .elementor-element.elementor-element-eee4b7f .elementor-image-box-title,
  .elementor-1659 .elementor-element.elementor-element-ef5cc5e .elementor-image-box-title,
  .elementor-1659 .elementor-element.elementor-element-3f5195f .elementor-image-box-title {
    font-size: 52px;
    line-height: 1.05em;
  }
  .elementor-1659 .elementor-element.elementor-element-ef5cc5e > .elementor-widget-container,
  .elementor-1659 .elementor-element.elementor-element-3f5195f > .elementor-widget-container {
    margin: 0;
  }
  /* ARPIA "Automatec inspecton" 77px and "Service" 94px overflowed the phone. */
  .elementor-1659 .elementor-element.elementor-element-ed85c39 .elementor-image-box-title {
    font-size: 44px;
    line-height: 1.05em;
  }
  .elementor-1659 .elementor-element.elementor-element-18c09cb {
    font-size: 56px;
  }

  /* Air cargo photo cards and ARPIA columns: one per row. */
  .elementor-1659 .elementor-element.elementor-element-c8f01be,
  .elementor-1659 .elementor-element.elementor-element-127d545,
  .elementor-1659 .elementor-element.elementor-element-0b93a25,
  .elementor-1659 .elementor-element.elementor-element-541dddc,
  .elementor-1659 .elementor-element.elementor-element-2f551b0,
  .elementor-1659 .elementor-element.elementor-element-2b238a1,
  .elementor-1659 .elementor-element.elementor-element-2221c9b {
    --width: 100%;
    width: 100%;
    flex: 1 1 100%;
  }

  /* CTA pills take the full width so the label stays on one or two lines. */
  .elementor-1659 .elementor-element.elementor-element-e75cd8b,
  .elementor-1659 .elementor-element.elementor-element-0eff1bc {
    --container-widget-width: 100%;
    width: 100%;
  }
  .elementor-1659 .elementor-element.elementor-element-e75cd8b .elementor-button,
  .elementor-1659 .elementor-element.elementor-element-0eff1bc .elementor-button {
    width: 100%;
  }

  /* Service counters side by side at 64px like the About counters. */
  .elementor-1659 .elementor-element.elementor-element-724b7e8 .elementor-counter-number-wrapper,
  .elementor-1659 .elementor-element.elementor-element-3f87629 .elementor-counter-number-wrapper {
    font-size: 64px;
  }
}

/* ---------------------------------------------- follow-ups from the audit */
@media (max-width: 1024px) {
  /* Air cargo: the three photo cards sit in 52bea15 (a nowrap row inside
     ddcbf29) - the half-width cards above only wrap once that row wraps. */
  .elementor-1659 .elementor-element.elementor-element-ddcbf29,
  .elementor-1659 .elementor-element.elementor-element-52bea15 {
    --flex-wrap: wrap;
    flex-wrap: wrap;
    --justify-content: center;
  }
}
@media (max-width: 767px) {
  /* FAQ: the intro paragraph is a 54% column next to the title and the arrow
     button; on a phone it ran 3-4 words per line. Title + button stay on the
     first line, the paragraph takes the full width below. */
  .elementor-1659 .elementor-element.elementor-element-af5fc38 {
    --flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .elementor-1659 .elementor-element.elementor-element-aa75379 {
    --container-widget-width: 100%;
    width: 100%;
    max-width: 100%;
    order: 3;
  }
}