/* ============================================================
   PETLIÊ V7.3.6 — PRIMEIRA DOBRA MOBILE COMPACTA
   Corrige proporção vertical do hero em celulares.
   ============================================================ */

@media (max-width: 768px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  /* topo bem compacto */
  body > .announcement{
    min-height:36px !important;
    padding:6px 12px !important;
    gap:8px !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }

  body > .announcement span,
  body > .announcement a{
    font-size:12px !important;
    line-height:1.15 !important;
  }

  /* cabeçalho */
  body > header.site-header{
    min-height:72px !important;
    height:72px !important;
    padding:8px 14px !important;
  }

  body > header.site-header .brand{
    width:auto !important;
    min-width:0 !important;
    gap:8px !important;
  }

  body > header.site-header .brand img.header-logo{
    width:92px !important;
    max-width:92px !important;
    height:56px !important;
    max-height:56px !important;
    object-fit:contain !important;
  }

  body > header.site-header .brand #headerTagline{
    font-size:11px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
  }

  body > header.site-header nav,
  body > header.site-header #headerWhatsapp{
    display:none !important;
  }

  /* hero: menos respiro e tipografia proporcional */
  main > section.hero#inicio{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    padding:20px 16px 18px !important;
    gap:18px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  main > section.hero#inicio > .hero-copy{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  main > section.hero#inicio > .hero-copy > .eyebrow{
    margin:0 0 11px !important;
    font-size:11px !important;
    line-height:1.15 !important;
    letter-spacing:.16em !important;
  }

  main > section.hero#inicio > .hero-copy > h1{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:clamp(27px, 7.6vw, 33px) !important;
    line-height:1.06 !important;
    letter-spacing:-.035em !important;
    font-weight:500 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }

  main > section.hero#inicio > .hero-copy > #heroTagline{
    margin:14px 0 0 !important;
    font-size:14px !important;
    line-height:1.42 !important;
    max-width:100% !important;
  }

  main > section.hero#inicio .hero-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:16px !important;
  }

  main > section.hero#inicio .hero-actions .button,
  main > section.hero#inicio .hero-actions a,
  main > section.hero#inicio .hero-actions button{
    width:100% !important;
    min-height:44px !important;
    height:44px !important;
    padding:8px 10px !important;
    border-radius:14px !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  main > section.hero#inicio .hero-social{
    margin-top:14px !important;
    gap:6px !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }

  main > section.hero#inicio .hero-social *{
    font-size:12px !important;
  }

  /* arte passa a ser complementar, não metade da página */
  main > section.hero#inicio > .hero-art{
    width:100% !important;
    height:210px !important;
    min-height:210px !important;
    max-height:210px !important;
    border-radius:20px !important;
    margin:0 !important;
    overflow:hidden !important;
  }

  main > section.hero#inicio > .hero-art .hero-card{
    inset:20px 18px !important;
    padding:15px !important;
    border-radius:18px !important;
  }

  main > section.hero#inicio > .hero-art .hero-logo{
    width:min(66%,210px) !important;
    max-width:210px !important;
    max-height:118px !important;
  }

  /* benefícios */
  .benefits,
  .store-benefits,
  .benefits-grid,
  .commercial-benefits{
    margin-top:12px !important;
  }

  /* WhatsApp reduzido: não deve virar elemento dominante */
  #floatingWhatsapp,
  .floating-whatsapp{
    right:10px !important;
    bottom:10px !important;
    min-height:40px !important;
    height:40px !important;
    padding:7px 12px !important;
    font-size:12px !important;
    border-radius:999px !important;
    z-index:100 !important;
  }
}

@media (max-width: 430px){
  main > section.hero#inicio .hero-actions{
    grid-template-columns:1fr 1fr !important;
  }

  main > section.hero#inicio > .hero-copy > h1{
    font-size:28px !important;
  }

  main > section.hero#inicio > .hero-art{
    height:195px !important;
    min-height:195px !important;
    max-height:195px !important;
  }
}

@media (max-width: 350px){
  main > section.hero#inicio .hero-actions{
    grid-template-columns:1fr !important;
  }

  main > section.hero#inicio > .hero-copy > h1{
    font-size:26px !important;
  }
}