@media (hover: none), (pointer: coarse){
  .navActions{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:10px;
    width:100%;
  }

  .btnDetails{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }

  .detailsPopover{
    left:0;
    right:auto;
    width:100%;
    max-width:none;
  }
}

@media (max-width: 1100px){
  .headerSpacer{
    height:168px !important;
  }

  .heroWideInner{
    grid-template-columns:260px minmax(0, 1fr);
    gap:40px;
    padding:44px 30px;
  }

  .heroPhotoCircle{
    width:244px;
    height:244px;
    flex-basis:244px;
  }

  .heroWideTitle{
    font-size:clamp(28px, 3.6vw, 44px);
  }

  .homeInfoCard{
    padding-left:170px;
  }

  .homeInfoCard::before{
    left:26px;
    width:96px;
    height:96px;
  }

  .homeInfoCard::after{
    left:49px;
    width:50px;
    height:50px;
  }
}

@media (max-width: 860px){
  .headerSpacer{
    height:250px !important;
  }

  .siteHeader .top,
  .siteHeader .navRow{
    max-width:none;
    width:100%;
    padding-left:14px;
    padding-right:14px;
  }

  .siteHeader.isCompact .top{
    max-height:0;
    opacity:0;
    padding-top:0;
    padding-bottom:0;
  }

  .navRow{
    gap:12px;
  }

  .cols3{
    grid-template-columns: repeat(2, 1fr);
  }

  .heroWideInner{
    grid-template-columns:1fr;
    gap:30px;
    text-align:center;
    padding:38px 22px;
  }

  .heroWideTextCol{
    align-items:center;
  }

  .heroWideTitle{
    max-width:none;
    font-size:clamp(28px, 6vw, 42px);
  }

  .heroWideDivider{
    margin-left:auto;
    margin-right:auto;
  }

  .homeInner{
    padding:0 16px 6px;
  }

  .homeInfoCard{
    padding:132px 24px 28px;
    min-height:auto;
    text-align:center;
  }

  .homeInfoCard::before{
    left:50%;
    top:34px;
    transform:translateX(-50%);
    width:92px;
    height:92px;
  }

  .homeInfoCard::after{
    left:50%;
    top:55px;
    transform:translateX(-50%);
    width:44px;
    height:44px;
  }

  .homeInfoCard h3{
    font-size:22px;
  }

  .homeInfoCard p{
    max-width:none;
  }
}

/* MOBILE — Cards "Podemos trabajar en" */
@media (max-width: 768px){
  .workCard{
    grid-template-columns:1fr;
    gap:18px;
    padding:26px 22px;
    text-align:center;
    justify-items:center;
  }

  .workCardIcon{
    justify-content:center;
    width:100%;
  }

  .workCardIconCircle{
    margin-left:auto;
    margin-right:auto;
  }

  .workCardContent{
    width:100%;
  }

  .workCardContent h3{
    text-align:center;
  }

  .workCardContent p{
    max-width:none;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width: 640px){
  .headerSpacer{
    height:270px !important;
  }

  .siteHeader .top,
  .siteHeader .navRow{
    padding-left:12px;
    padding-right:12px;
  }

  .waWidget{
    right:16px;
    bottom:28px;
  }

  .waPanel{
    width:min(340px, calc(100vw - 16px));
  }

  .waToggle{
    width:58px;
    height:58px;
  }

  .heroWideInner{
    padding:30px 16px;
  }

  .heroPhotoCircle{
    width:210px;
    height:210px;
    flex-basis:210px;
    border-width:2px;
    box-shadow:
      0 0 0 7px rgba(255,255,255,.18),
      0 0 0 1px rgba(122,63,99,.05),
      0 12px 28px rgba(55,33,47,.08);
  }

  .heroWideTitle{
    font-size:clamp(26px, 8vw, 38px);
    line-height:1.12;
  }

  .heroWideEyebrow{
    font-size:12px;
    letter-spacing:.09em;
  }

  .heroWideDivider{
    width:170px;
  }

  .heroWideTag{
    font-size:15px;
  }
}

@media (max-width: 560px){
  .headerSpacer{
    height:282px !important;
  }

  .contactGrid{
    grid-template-columns:1fr;
  }

  .footerRow{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
}

@media (max-width: 520px){
  .headerSpacer{
    height:290px !important;
  }

  .cols3{
    grid-template-columns: 1fr;
  }

  .cols1{
    grid-template-columns: 1fr;
  }

  .hero{
    padding:22px 28px 26px;
  }

  .lead{
    font-size:17px;
    line-height:1.85;
  }

  .homeInfoCard{
    border-radius:18px;
    padding:126px 18px 24px;
  }

  .homeInfoCard h3{
    font-size:20px;
  }

  .homeInfoCard p{
    font-size:15px;
    line-height:1.8;
  }
}

/* MOBILE PEQUENO — Cards "Podemos trabajar en" */
@media (max-width: 480px){
  .workCard{
    gap:16px;
    padding:24px 18px;
    border-radius:22px;
  }

  .workCardIconCircle{
    width:104px;
    height:104px;
    background-size:76px 76px;
  }

  .workCardContent h3{
    font-size:22px;
  }

  .workCardContent p{
    font-size:15.2px;
    line-height:1.75;
  }
}