/* Global Connect · phone and tablet fixes over the pages' own stylesheets.
   Loaded on every page, after the page's CSS (added by _build/site-chrome/build.py). Each block names the page or
   component it fixes and why; the Webflow breakpoints are 991px (tablet), 767px and 479px (phones). */

/* ── Webflow hero text blocks (home, Global Connect Mobility). The export gives them fixed widths (950px, 1200px,
      370px) and fixed heading heights, so a longer title was cut off on tablets and small phones, and the page
      scrolled sideways. ── */
@media screen and (max-width: 991px) {
  .frame-37 { width: 100%; max-width: 100%; padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
  .frame-515074 { width: 100%; max-width: 100%; }
  .h1.is-regular, .h1.is-extrabold-italic, .h1.is-bold { height: auto; line-height: 1.2; }
}
@media screen and (max-width: 479px) {
  .frame-37 { padding-left: 0; padding-right: 0; }
}

/* ── Global Connect Mobility · plans. On tablets the four plan cards shared a 700px row (text down to 9px); they
      now take two per row. On phones a card no longer has a fixed height, so its list never spills out (e.g. with
      the accessibility tool's larger text). ── */
@media screen and (max-width: 991px) {
  .pricing20_component { width: 100%; max-width: 700px; }
  .pricing20_plan .body-small { font-size: 12px; line-height: 16px; }
}
@media screen and (min-width: 480px) and (max-width: 991px) {
  .pricing20_grid-list { display: grid; grid-template-columns: 1fr 1fr; }
  .pricing20_grid-list > .pricing-card-gradient { width: 100%; height: auto; box-sizing: border-box; }
  .pricing20_grid-list .pricing20_plan { width: auto; height: 100%; box-sizing: border-box; }
  .pricing20_grid-list .pricing20_feature-list { width: auto; }
}
@media screen and (max-width: 479px) {
  .pricing20_plan { height: auto; }
  .pricing22_row.header .button-6.small, .pricing22_row.header .button-7.small { font-size: 12px; padding-left: 8px; padding-right: 8px; }
}
/* Comparison table: on 320–400px phones the four «Comenzar / Get started» buttons were wider than the screen and
   pushed the first column off it; they now fit their column (two lines if needed). */
@media screen and (max-width: 400px) {
  .pricing22_row.header .pricing22_row-content { min-width: 0; padding-left: 2px; padding-right: 2px; }
  .pricing22_row.header .button-6.small, .pricing22_row.header .button-7.small {
    width: 100%; min-width: 0; box-sizing: border-box; padding: 8px 4px; font-size: 11px; line-height: 13px; white-space: normal; text-align: center;
  }
}

/* ── Nosotros. On tablets the culture cards kept a 350px maximum height (their text ran out of the card), and the
      team photos kept their natural width inside wider cards, so the name bar floated below them; the team list
      was also wider (740px) than a tablet's content. ── */
@media screen and (max-width: 991px) {
  .layout241_component { height: auto; }
  .layout241_component .grid-3 { align-items: stretch; }
  .layout241_component .culture_card { height: auto; max-height: none; }
  .team20_list { width: 100%; max-width: 740px; }
  .team20_item > div:not([class]) { width: 100%; height: 100%; }
  .team20_item .image-8, .team20_item .image-9 { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
}
@media screen and (max-width: 767px) {
  .team20_item { width: 100%; max-width: 340px; }
}

/* ── Home · «Somos miembros y participantes». The title had no side margin, so on small phones it touched the
      screen edges. ── */
@media screen and (max-width: 479px) {
  .section_logos.is-partners .padding-section-large > .h3 { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
}

/* ── Home · news. Justified text left wide gaps between words on narrow screens, and on tablets the slide kept
      its two columns, leaving a narrow text column: image above text up to 991px. ── */
@media screen and (max-width: 991px) {
  .gc-news__p { text-align: left !important; }
  .gc-news__slide { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Blog · the search box took half the width of a phone. ── */
@media screen and (max-width: 767px) {
  .blog-search-input { max-width: 100%; }
}
/* Blog · category filters. They stayed on one line that scrolled sideways, so on phones only «Ver todos» showed
   and nothing hinted at the rest; they now wrap onto as many lines as needed (inline flow, so the list markup and
   its role stay as they are). */
@media screen and (max-width: 991px) {
  .content-filter_form { display: block; overflow: visible; }
  .content-filter_form .w-dyn-list, .content-filter_form .content-filter_filter-list { display: inline; }
  .content-filter_form > .content-filter_filter_button, .content-filter_form .w-dyn-item { display: inline-block; vertical-align: middle; margin: 0 8px 10px 0; }
  .content-filter_form .content-filter_filter_button { width: auto; }
}

/* ── Global Connect Advisor · the interest tiles of the preview were too narrow for their labels on phones. ── */
@media screen and (max-width: 479px) {
  .gc-af__tiles { gap: 6px; }
  .gc-af__tile strong { font-size: 11px; line-height: 14px; margin: 8px 6px 6px; overflow-wrap: anywhere; hyphens: auto; }
}

/* ── Search results (Webflow's default page, which has no design of its own). ── */
.gc-search { max-width: 1240px; margin: 0 auto; padding: 4rem 20px 5rem; font-family: Figtree, sans-serif; color: #141518; }
.gc-search h1 { font-size: 2.5rem; line-height: 1.2; font-weight: 700; margin: 0 0 1.5rem; }
.gc-search form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 2rem; }
.gc-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gc-search .w-input { flex: 1 1 260px; height: 48px; margin: 0; padding: 12px 20px; border: 0; border-radius: 50px; background: #f7f7f7; font: inherit; font-size: 16px; }
.gc-search .w-button { height: 48px; padding: 0 28px; border-radius: 50px; background: #141518; color: #fff; font: inherit; font-size: 16px; }
@media screen and (max-width: 479px) {
  .gc-search { padding-top: 2.5rem; }
  .gc-search h1 { font-size: 1.75rem; }
  .gc-search .w-button { width: 100%; }
}

/* ── Headings for agents and screen readers (added by _build/agents/build.py, data.json → headings). ──
   A Webflow title wrapper made a real <h1>: same look as the <div> it was (the tag's own browser and Webflow
   defaults are reset; the element's classes still style it). */
h1:where(.gc-h) { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
/* An <h1> only screen readers and agents see, on pages whose visible title is an image. */
.gc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Search results (site-tools.js) and the 404 page. ── */
.gc-search__status { margin: 0 0 1rem; color: #4a4d55; }
.gc-search__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.gc-search__list a { font-size: 1.15rem; font-weight: 700; color: #141518; text-decoration: underline; text-underline-offset: 3px; }
.gc-search__list p { margin: .35rem 0 0; color: #4a4d55; line-height: 1.5; }
.gc-404__text { font-size: 1.1rem; line-height: 1.5; margin: 0 0 1.5rem; max-width: 640px; }
.gc-404__links a { color: #141518; text-decoration: underline; text-underline-offset: 3px; }

/* ── Contact · other ways to reach us. ── */
.gc-contact-more { max-width: 560px; margin: 2.5rem auto 0; font-family: Figtree, sans-serif; color: #141518; text-align: left; }
.gc-contact-more__title { margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.gc-contact-more__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: 1rem; line-height: 1.5; }
.gc-contact-more__list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gc-contact-more__intro { margin: 0 0 1rem; line-height: 1.5; }