/* =========================================================
   Full Time Corretora · Otimização para celular
   Carregado por último. TUDO aqui fica dentro de (max-width:620px),
   então nada neste arquivo afeta o computador nem o tablet.
   ========================================================= */
@media (max-width:620px){

  /* ---------- 1. Toque mais confortável ---------- */
  .ft a,.ft button,.ft label,.ck button{-webkit-tap-highlight-color:rgba(180,135,94,.18);touch-action:manipulation}
  .top > a:first-child{display:flex;align-items:center;min-height:44px}
  .chips button,.seg2 button{min-height:44px}
  .opt input{width:22px;height:22px}
  /* Respiro entre o título e o texto de abertura */
  .hero .sub{margin-top:20px}

  /* Textos pequenos demais para ler no celular */
  .warn,.lgpd,p.warn,span.warn{font-size:13px}
  .lgpd{line-height:1.5}
  .meia{font-size:12px}
  .field label small{font-size:12px}

  /* Botão flutuante do WhatsApp: um pouco menor e some quando atrapalha
     (campo em foco com teclado aberto ou formulário em destaque na tela) */
  .wa img{width:54px}
  .wa{transition:opacity .3s ease,transform .3s ease}
  .fab-off .wa{opacity:0;pointer-events:none;transform:translateY(14px)}

  /* ---------- 2. Rodapé: listas lado a lado e links fáceis de tocar ---------- */
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row dense;column-gap:16px;row-gap:28px}
  .fgrid > div:first-child{grid-column:1/-1}
  /* coluna "Contato" (textos longos) ocupa a largura toda */
  .fgrid > div:nth-child(3):nth-last-child(2),
  .fgrid > div:nth-child(2):nth-last-child(2){grid-column:1/-1}
  .fgrid h4{margin-bottom:6px}
  .fgrid ul{gap:0}
  .fgrid ul a{display:inline-flex;align-items:center;min-height:40px}
  .fgrid ul li{padding:3px 0}
  .fgrid ul li:has(a){padding:0}

  /* ---------- 3. Páginas de produto: a ferramenta sobe na tela ---------- */
  /* O selo de prova (ou a lista de coberturas) passa para depois da ferramenta,
     para o simulador/formulário aparecer mais cedo no celular. */
  .pg-consorcio .hgrid,.pg-seguro-saude .hgrid,.pg-seguro-auto .hgrid{row-gap:0}
  .pg-consorcio .hgrid > div:first-child,
  .pg-seguro-saude .hgrid > div:first-child,
  .pg-seguro-auto .hgrid > div:first-child{display:contents}
  .pg-consorcio .hgrid > .tool,
  .pg-seguro-saude .hgrid > .tool,
  .pg-seguro-auto .hgrid > .tool{order:1}
  /* Ordem no celular: título → (Auto: tipo de carro) → ferramenta → subtítulo → etiquetas → prova → depoimento.
     Assim a primeira pergunta da ferramenta aparece já na primeira tela. */
  .pg-consorcio .hgrid .sub,.pg-seguro-saude .hgrid .sub,.pg-seguro-auto .hgrid .sub{order:2;margin-top:28px}
  .pg-consorcio .hgrid .facts,.pg-seguro-saude .hgrid .seal{order:3;margin-top:18px}
  .pg-consorcio .hgrid .proof,.pg-seguro-saude .hgrid .proof,.pg-seguro-auto .hgrid .covers{order:4;margin-top:24px}
  .pg-consorcio .hgrid .depo,.pg-seguro-saude .hgrid .depo,.pg-seguro-auto .hgrid .depo{order:5;margin-top:24px}
  .pg-consorcio .hgrid > .tool,.pg-seguro-saude .hgrid > .tool,.pg-seguro-auto .hgrid > .tool{margin-top:24px}
  .pg-seguro-auto .segtabs{margin-top:20px}

  /* Consórcio: selo "R$ 100 mi+" empilhado, sem apertar o texto */
  .pg-consorcio .proof{grid-template-columns:minmax(0,1fr);gap:6px;max-width:none}
  .pg-consorcio .proof .big{grid-row:auto;font-size:30px}

  /* Consórcio: tabela vira "fichas" — cada linha com o rótulo em cima
     e Financiamento x Consórcio lado a lado */
  .pg-consorcio .tbl,.pg-consorcio .tbl thead,.pg-consorcio .tbl tbody{display:block}
  .pg-consorcio .tbl tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;border-bottom:1px solid #d6dee8}
  .pg-consorcio .tbl thead tr{border-bottom:2px solid #002e5d}
  .pg-consorcio .tbl thead th:first-child{display:none}
  .pg-consorcio .tbl th,.pg-consorcio .tbl td{border-bottom:0;padding:10px 12px}
  .pg-consorcio .tbl td:first-child{grid-column:1/-1;width:auto;padding:14px 0 2px;font:700 13px/1.3 "Red Hat Display",sans-serif;letter-spacing:0;text-transform:none;color:#8a6440}
  .pg-consorcio .tbl td{font-size:15px;padding-top:6px;padding-bottom:14px}
  .pg-consorcio .tbl td.c{border-radius:10px}

  /* Cards com ícone: ícone ao lado do título, para encurtar a página */
  .pg-consorcio .cat,.pg-outros-servicos .svc{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:center}
  .pg-consorcio .cat .ic,.pg-outros-servicos .svc .ic{width:44px;height:44px;border-radius:12px}
  .pg-consorcio .cat .ic svg,.pg-outros-servicos .svc .ic svg{width:22px;height:22px}
  .pg-consorcio .cat h3{font-size:22px}
  .pg-consorcio .cat p,.pg-consorcio .cat a,
  .pg-outros-servicos .svc p,.pg-outros-servicos .svc a.go{grid-column:1/-1}
  .pg-consorcio .cat a{display:inline-flex;align-items:center;min-height:44px;justify-self:start}

  /* Seguro Auto: os 4 diferenciais em linhas compactas */
  .pg-seguro-auto .feat{grid-template-columns:minmax(0,1fr);gap:10px}
  .pg-seguro-auto .feat div{flex-direction:row;align-items:center;gap:14px;padding:14px 16px}
  .pg-seguro-auto .feat .ic{flex:none}

  /* Seguro Saúde: logos das operadoras mais baixos; link do guia tocável */
  .pg-seguro-saude .lg{height:72px;padding:12px 16px}
  .pg-seguro-saude .logos .lg img{max-height:44px}
  .pg-seguro-saude .guide a{display:inline-flex;align-items:center;min-height:44px}

  /* ---------- 4. Página inicial ---------- */
  /* Os três caminhos (Consórcio, Saúde, Auto) entram na primeira tela; o relógio vem logo abaixo */
  .pg-index .hgrid{grid-template-areas:"copy" "pick" "dial";row-gap:28px}
  .pg-index .dbox{max-width:340px}
  /* Link "Converse com um especialista": área de toque de 44px */
  .pg-index .cline a{display:inline-flex;align-items:center;min-height:44px}


  /* Logos da Porto: uma por linha, com tamanho legível */
  .pg-index .plogos{grid-template-columns:minmax(0,1fr);gap:8px}
  .pg-index .plogo{height:68px;padding:14px 24px}
  .pg-index .plogo img{width:auto;max-width:220px;max-height:36px}

  /* Depoimentos: carrossel de arrastar para o lado */
  .pg-index .depos{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding:0 max(20px,env(safe-area-inset-left,0px)) 4px;scroll-padding:0 max(20px,env(safe-area-inset-left,0px))}
  .pg-index .depos::-webkit-scrollbar{display:none}
  .pg-index .depos > figure{flex:0 0 86%;scroll-snap-align:start;padding:22px!important}
  .pg-index .depos blockquote{font-size:17px!important}
  .dots{display:flex;justify-content:center;gap:2px;margin-top:8px}
  .dots button{width:32px;height:44px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
  .dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(169,187,209,.45);transition:width .3s ease,background-color .3s ease}
  .dots button[aria-current="true"]::before{width:22px;background:#d4ab80}


  /* ---------- 5. Contato: canais em grade compacta, card inteiro clicável ---------- */
  .pg-contato .chan{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:10px}
  .pg-contato .chan > .ch:nth-child(2),.pg-contato .chan > .ch:nth-child(4){grid-column:1/-1}
  .pg-contato .ch{position:relative;padding:14px 16px}
  .pg-contato .ch b{font-size:16px}
  .pg-contato .ch b.mail{font-size:16px}
  .pg-contato .ch b a::after{content:"";position:absolute;inset:0;border-radius:18px}

  /* ---------- 6. Política e Termos: índice vira barra de atalhos fixa ---------- */
  .pv{gap:20px!important}
  .pv .toc{position:sticky;top:var(--bar-h,72px);z-index:6;display:flex!important;flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;
    margin:0 calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding:10px max(20px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:0;border-bottom:1px solid #e1e8f0}
  .pv .toc::-webkit-scrollbar{display:none}
  .pv .toc a{flex:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 14px!important;margin:0!important;border:1.5px solid #d5dde8!important;border-radius:999px;color:#24364d;font-size:14px;background:#fff}
  .pv .toc a.on{background:#002e5d;border-color:#002e5d!important;color:#fff}
  .ft .doc h2,.ft .doc h2:target{scroll-margin-top:84px}
}
