/* CTA móvel compartilhada. A ação só entra quando o JavaScript comprova que
   não há outra ação ou conteúdo legível na faixa que ela ocuparia. */
.mobile-action{display:none}

@media(max-width:600px){
  body{padding-bottom:0!important}
  .topbar .top-cta{display:none!important}
  .mobile-action{
    position:fixed;
    z-index:50;
    right:12px;
    bottom:max(10px,env(safe-area-inset-bottom));
    left:12px;
    display:flex!important;
    min-width:0;
    min-height:52px;
    max-width:calc(100vw - 24px);
    align-items:center;
    justify-content:center;
    padding:14px 18px;
    border:1px solid transparent;
    background:var(--red,var(--garnet,#af1f3c));
    box-shadow:0 8px 30px rgba(48,26,32,.24);
    color:#fff;
    font:800 11px/1.25 var(--sans,"Hanken Grotesk",Arial,sans-serif);
    letter-spacing:.08em;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    visibility:hidden;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateY(calc(100% + 32px))!important;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
  }
  .mobile-action.is-visible{
    visibility:visible;
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
    transition-delay:0s;
  }
  /* Com a ação fixa ativa, as ações internas continuam disponíveis, mas são
     visualmente secundárias. Assim há sempre uma única CTA primária na tela e
     o botão fixo não precisa piscar quando outra ação entra na viewport. */
  body.mobile-action-engaged :is(.button.primary,.primary-action,[data-primary-action]):not(.mobile-action){
    border-color:var(--red,var(--garnet,#af1f3c))!important;
    background:var(--paper,#fffaf5)!important;
    box-shadow:none!important;
    color:var(--red,var(--garnet,#af1f3c))!important;
  }
  footer{padding-bottom:calc(34px + env(safe-area-inset-bottom))!important}
  .topbar .brand,footer .brand,footer a,.text-link{display:inline-flex;min-height:44px;align-items:center}

  /* O separador ocupa uma linha própria; nunca é rotacionado sobre os textos. */
  .comparison{grid-template-columns:1fr!important}
  .comparison-mark{
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    border:0!important;
    border-top:1px solid var(--line,#d9ceca)!important;
    border-bottom:1px solid var(--line,#d9ceca)!important;
    transform:none!important;
  }
  .before-after .comparison-mark{font-size:0!important}
  .before-after .comparison-mark::before{
    content:'\2193';
    font-size:28px;
    line-height:1;
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-action{transition:none!important}
}

/* Telefones em paisagem ultrapassam 600px de largura, mas continuam exigindo
   áreas de toque confortáveis. A altura curta identifica esse cenário. */
@media(max-width:900px) and (max-height:500px){
  .topbar .top-cta,.topbar .brand,.text-link,footer .brand,footer a{
    display:inline-flex!important;
    min-height:44px!important;
    align-items:center!important;
  }
}