/* Click Experience v3.4.1 — responsive header + corporate mobile hotfixes */

/* Keep the sticky header below the fixed WordPress admin bar on desktop/laptop. */
@media (min-width:783px){
  body.admin-bar .cxs-header{top:32px!important}
}

/* Laptop: preserve the complete informational strip instead of hiding content. */
@media (min-width:961px) and (max-width:1320px){
  .cxs-topbar__inner{
    grid-template-columns:minmax(210px,.78fr) minmax(0,1.5fr) auto!important;
    gap:10px!important;
  }
  .cxs-topbar__message{
    display:block!important;
    font-size:8.2px!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .cxs-topbar__chips{
    gap:5px!important;
    overflow-x:auto!important;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);
    mask-image:linear-gradient(90deg,#000 94%,transparent);
  }
  .cxs-topbar__chips::-webkit-scrollbar{display:none}
  .cxs-topbar__chips a{
    display:inline-flex!important;
    flex:0 0 auto;
    min-height:18px!important;
    padding:3px 6px!important;
    font-size:6.8px!important;
  }
  .cxs-topbar__email{display:inline-flex!important;font-size:8px!important}
}

/* Tablet / phone: two-level information bar.
   Row 1 keeps the institutional message visible.
   Row 2 keeps ALL service chips scrollable and the email permanently visible. */
@media (max-width:960px){
  :root{
    --cxs-header-topbar:58px;
    --cxs-header-nav:68px;
  }
  html{scroll-padding-top:138px!important}
  .cxs-header::before{inset:var(--cxs-header-topbar) 0 0!important}
  .cxs-topbar,.cxs-topbar__inner{min-height:var(--cxs-header-topbar)!important}
  .cxs-topbar__inner{
    width:100%!important;
    max-width:none!important;
    padding:5px 18px 6px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "message message"
      "chips email"!important;
    grid-template-rows:20px 24px;
    align-content:center;
    align-items:center;
    gap:3px 10px!important;
    overflow:visible!important;
  }
  .cxs-topbar__message{
    grid-area:message;
    display:block!important;
    width:100%;
    max-width:none;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px!important;
    line-height:1.2;
    font-weight:500;
  }
  .cxs-topbar__chips{
    grid-area:chips;
    display:flex!important;
    min-width:0;
    max-width:100%;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  }
  .cxs-topbar__chips::-webkit-scrollbar{display:none}
  .cxs-topbar__chips a,
  .cxs-topbar__chips a:nth-child(4){
    display:inline-flex!important;
    flex:0 0 auto!important;
    min-height:19px!important;
    padding:3px 7px!important;
    font-size:6.8px!important;
  }
  .cxs-topbar__email{
    grid-area:email;
    display:inline-flex!important;
    flex:none;
    max-width:132px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:7.6px!important;
  }
  .cxs-header-inner{min-height:var(--cxs-header-nav)!important}
  .cxs-site.cxs-has-scrolled .cxs-header-inner{min-height:60px!important}

  /* On mobile the main menu remains compact, but Services + Search + Explore stay visible. */
  .cxs-mobile-nav button:first-child{display:flex!important}
  .cxs-mobile-nav{gap:9px!important}
  .cxs-mobile-nav button{font-size:9.5px!important;min-height:40px!important}
  .cxs-header-tools{gap:6px!important}
}

@media (max-width:600px){
  :root{
    --cxs-header-topbar:60px;
    --cxs-header-nav:66px;
  }
  html{scroll-padding-top:136px!important}
  .cxs-topbar__inner{
    padding:5px 12px 6px!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:20px 24px;
    gap:3px 8px!important;
  }
  .cxs-topbar__message{font-size:7.4px!important;letter-spacing:-.015em}
  .cxs-topbar__chips{gap:5px!important}
  .cxs-topbar__chips a,
  .cxs-topbar__chips a:nth-child(n+3),
  .cxs-topbar__chips a:nth-child(4){
    display:inline-flex!important;
    min-height:18px!important;
    padding:3px 6px!important;
    font-size:6.2px!important;
  }
  .cxs-topbar__email{display:inline-flex!important;max-width:112px;font-size:6.8px!important}
  .cxs-header-inner{width:calc(100% - 24px)!important;gap:7px!important}
  .cxs-logo{width:94px!important}
  .cxs-site.cxs-has-scrolled .cxs-logo{width:88px!important}
  .cxs-header-search-toggle{width:38px;height:38px;flex:none}
  .cxs-mobile-nav{gap:7px!important;flex:none}
  .cxs-mobile-nav button{padding:10px 0!important;font-size:9px!important;gap:5px!important;white-space:nowrap}
}

@media (max-width:390px){
  .cxs-logo{width:88px!important}
  .cxs-site.cxs-has-scrolled .cxs-logo{width:84px!important}
  .cxs-header-inner{width:calc(100% - 20px)!important;gap:6px!important}
  .cxs-header-search-toggle{width:36px;height:36px}
  .cxs-mobile-nav{gap:6px!important}
  .cxs-mobile-nav button{font-size:8.6px!important}
  .cxs-topbar__email{max-width:104px;font-size:6.5px!important}
}

/* NOSOTROS: the late desktop grid declaration in the original component was
   squeezing the text column to almost zero on phones. Force the intended one-column flow. */
@media (max-width:1120px){
  .cxs-about-page__hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:36px!important;
  }
  .cxs-about-page__hero-grid>*{min-width:0!important}
  .cxs-about-page__hero-copy{width:100%!important;max-width:760px!important;min-width:0!important}
  .cxs-about-page__hero-visual{width:100%!important;max-width:760px!important;min-width:0!important}
}

@media (max-width:760px){
  .cxs-about-page__hero{
    min-height:auto!important;
    padding:34px 0 66px!important;
  }
  .cxs-about-page__hero-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:30px!important;
  }
  .cxs-about-page__hero-copy{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }
  .cxs-about-page__hero h1{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    font-size:clamp(43px,12.4vw,60px)!important;
    line-height:.94!important;
    letter-spacing:-.058em!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }
  .cxs-about-page__hero h1>span,
  .cxs-about-page__hero h1>strong{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  .cxs-about-page__hero .cxs-corp-eyebrow{
    max-width:100%;
    font-size:9px!important;
    letter-spacing:.11em!important;
  }
  .cxs-about-page__hero .cxs-corp-lead{
    max-width:44ch!important;
    font-size:14px!important;
    line-height:1.75!important;
  }
  .cxs-about-page__hero-visual{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:410px!important;
    margin:0!important;
  }
}

@media (max-width:420px){
  .cxs-about-page__hero h1{font-size:clamp(40px,12vw,52px)!important}
  .cxs-about-page__hero-visual{min-height:360px!important}
}

@media (prefers-reduced-motion:reduce){
  .cxs-topbar__chips{scroll-behavior:auto!important}
}

/* v3.4.3 — phones: remove the cyan utility strip entirely.
   Desktop/laptop/tablet keep the premium informational strip unchanged. */
@media (max-width:767px){
  :root{
    --cxs-header-topbar:0px;
    --cxs-header-nav:66px;
  }
  html{scroll-padding-top:78px!important}
  .cxs-topbar{display:none!important}
  .cxs-header::before{inset:0!important}
  .cxs-header-inner{min-height:var(--cxs-header-nav)!important}
  .cxs-site.cxs-has-scrolled .cxs-header-inner{min-height:58px!important}
  .cxs-header-mobile-search{top:100%!important}
}

@media (max-width:420px){
  :root{--cxs-header-nav:64px}
  html{scroll-padding-top:74px!important}
}