/* MOBILE HERO — FINAL DEVICE-SAFE LAYOUT
   Keeps the editorial order while preventing any child from creating
   a wider canvas than the viewport. Desktop is untouched. */
@media (max-width: 900px){
  html, body{
    max-width:100%;
    overflow-x:hidden!important;
  }

  .hero{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .hero .site-wrap-contents{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }

  /* display:contents is retained only for the intentional mobile order:
     kicker → title → image → paragraph → CTA. */
  .hero-copy{
    display:contents!important;
  }

  .hero .kicker{
    order:1!important;
    width:100%!important;
    margin:0 0 18px!important;
  }

  .hero h1{
    order:2!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    font-size:50px!important;
    line-height:.93!important;
    letter-spacing:-.055em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .hero-visual{
    order:3!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:235px!important;
    margin:18px 0!important;
    padding:0!important;
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .hero-image{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    margin:0!important;
    transform:none!important;
  }

  .hero .lede{
    order:4!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 0 18px!important;
    padding:0!important;
    font-size:14px!important;
    line-height:1.65!important;
    box-sizing:border-box!important;
  }

  .hero .hero-cta{
    order:5!important;
    align-self:flex-start!important;
    margin:0!important;
    max-width:100%!important;
  }
}

/* MOBILE RESULT — ONE CARD PER ROW
   The four result cards stack vertically to keep the entire section
   inside the physical mobile viewport and prevent horizontal pressure. */
@media (max-width: 900px){
  #resultado .results-v27__collage{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:32px!important;
    margin:0!important;
    padding:0!important;
  }

  #resultado .results-v27__card,
  #resultado .results-v27__placeholder,
  #resultado .results-v27__card-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  #resultado .results-v27__placeholder .campaign-image{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
  }
}

/* =========================================================
   MOBILE HERO — CLEANER FIRST FOLD
   Keep the headline. Remove only the supporting kicker,
   lede and CTA on mobile. Desktop remains untouched.
   ========================================================= */
@media (max-width:900px){
  .hero .kicker,
  .hero .lede,
  .hero .hero-cta{
    display:none!important;
  }

  .hero h1{
    display:block!important;
    order:1!important;
    margin:0!important;
  }

  .hero-visual{
    order:2!important;
  }
}