/* PETLIÊ V7.3.5 — MOBILE REAL / HERO + CAMPANHAS */
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}

@media(max-width:900px){
  .site-header{padding-left:16px!important;padding-right:16px!important;gap:10px!important}
  .site-header nav{display:none!important}
  .site-header .brand{min-width:0!important}
  .site-header .header-logo{max-width:120px!important;height:auto!important}
  .site-header .brand span{white-space:normal!important}

  .hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:24px!important;
    padding:34px 20px 24px!important;
    overflow:hidden!important;
  }
  .hero-copy,.hero-art{width:100%!important;max-width:100%!important;min-width:0!important}
  .hero-copy{padding:0!important}
  .hero-copy h1{font-size:clamp(2.35rem,9vw,4rem)!important;line-height:1.04!important;letter-spacing:-.03em!important}
  .hero-copy p{max-width:none!important;font-size:1rem!important;line-height:1.5!important}
  .hero-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
  .hero-actions .button{min-width:0!important}

  /* O ponto principal: a arte não usa mais altura fixa nem crop */
  .hero-art{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  .hero-card{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    padding:28px 18px!important;
    border-radius:30px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  .hero-logo{
    width:min(68%,280px)!important;
    height:auto!important;
    max-height:170px!important;
    object-fit:contain!important;
    object-position:center!important;
    flex:0 1 auto!important;
  }
  .hero-card span,.hero-card small{max-width:92%!important;text-align:center!important;white-space:normal!important}
  .hero-orbit{pointer-events:none!important;max-width:100%!important}

  .store-campaigns{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important;overflow:hidden!important}
  .store-campaign{
    width:100%!important;max-width:100%!important;min-width:0!important;
    grid-template-columns:1fr!important;gap:18px!important;padding:22px!important;
  }
  .store-campaign-copy,.store-campaign-showcase,.store-campaign-products{width:100%!important;max-width:100%!important;min-width:0!important}
  .store-campaign-showcase,.store-campaign-products{min-height:0!important;height:auto!important;max-height:none!important}
  .store-campaign-slide{width:100%!important;max-width:100%!important;min-width:100%!important;height:auto!important;min-height:0!important}
  .store-campaign-product-media{height:auto!important;min-height:0!important;aspect-ratio:4/3!important;background:#faf6f2!important}
  .store-campaign-product-media img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;background:#faf6f2!important}
  .store-campaign.display-grid .store-campaign-products{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .benefits{grid-template-columns:1fr!important;margin-left:16px!important;margin-right:16px!important}
  .catalog-section,.brand-story,.size-guide,.contact-section{max-width:100%!important;overflow:hidden!important}
}

@media(max-width:640px){
  .announcement{padding:10px 16px!important;gap:8px!important;font-size:.82rem!important;flex-wrap:wrap!important}
  .site-header{padding:14px 16px!important}
  .site-header .button.secondary{display:none!important}
  .header-logo{width:115px!important;height:auto!important}

  .hero{padding:28px 16px 20px!important;gap:20px!important}
  .hero-copy h1{font-size:clamp(2.2rem,11vw,3.25rem)!important}
  .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .hero-actions .button{width:100%!important;padding-left:10px!important;padding-right:10px!important;text-align:center!important;justify-content:center!important}
  .hero-social{display:flex!important;flex-wrap:wrap!important;gap:6px!important}
  .hero-card{aspect-ratio:1.15/1!important;padding:24px 16px!important;border-radius:26px!important}
  .hero-logo{width:min(72%,240px)!important;max-height:145px!important}

  .store-campaign{padding:18px!important;border-radius:22px!important}
  .store-campaign h2{font-size:clamp(1.9rem,9vw,2.5rem)!important;line-height:1.04!important}
  .store-campaign-product-media{aspect-ratio:1/1!important}
  .store-campaign-product-media img{object-fit:contain!important}
  .store-campaign.display-grid .store-campaign-products{grid-template-columns:1fr!important}
  .store-campaign-floating-name{left:14px!important;right:14px!important;max-width:calc(100% - 28px)!important}
  .store-campaign-price{right:12px!important;max-width:calc(100% - 24px)!important}

  .benefits{margin:12px!important;border-radius:18px!important;overflow:hidden!important}
  .benefits>div{padding:18px!important}

  .product-grid,.petlie-model-grid{grid-template-columns:1fr!important;width:100%!important;max-width:100%!important}
  .petlie-model-card,.product-card{width:100%!important;max-width:100%!important;min-width:0!important}
  .petlie-model-media img,.product-card img{object-fit:contain!important;background:#faf6f2!important}

  .petlie-first-visit,.petlie-first-visit-backdrop{padding:12px!important}
  .petlie-first-visit-dialog,.petlie-first-visit-modal,.petlie-first-visit-card{width:calc(100vw - 24px)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important}
  .petlie-first-visit-grid{grid-template-columns:1fr!important}
  .petlie-first-visit-media img,.petlie-first-visit-image{width:100%!important;height:auto!important;max-height:38dvh!important;object-fit:contain!important;background:#faf6f2!important}

  .floating-whatsapp{right:12px!important;bottom:12px!important;max-width:calc(100vw - 24px)!important}
}

@media(max-width:430px){
  .hero-actions{grid-template-columns:1fr!important}
  .hero-card{aspect-ratio:1/1!important}
  .hero-logo{width:min(75%,220px)!important}
  .announcement{justify-content:center!important;text-align:center!important}
}