/* leilosoc.art — correções mobile (carregado em todas as páginas) */
img,svg,video{max-width:100%;height:auto}
html,body{overflow-x:hidden;max-width:100%}
.foot .links{flex-wrap:wrap;gap:12px 22px}

/* menu mobile */
.mnav-btn{display:none}
@media(max-width:950px){
  .mnav-btn{display:flex;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink,#1a1208);padding:0;z-index:60}
  .mnav-btn span{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background .2s}
  .mnav-btn span::before,.mnav-btn span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .25s}
  .mnav-btn span::before{top:-7px}.mnav-btn span::after{top:7px}
  body.mnav-open .mnav-btn span{background:transparent}
  body.mnav-open .mnav-btn span::before{transform:translateY(7px) rotate(45deg)}
  body.mnav-open .mnav-btn span::after{transform:translateY(-7px) rotate(-45deg)}
  .mnav{display:none;position:fixed;left:0;right:0;top:81px;bottom:0;background:#fff;z-index:45;padding:20px 28px 40px;overflow-y:auto}
  body.mnav-open .mnav{display:block}
  body.mnav-open{overflow:hidden}
  .mnav a{display:block;padding:16px 0;border-bottom:1px solid var(--line,#e4ddd2);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink,#1a1208)}
  .mnav a.on{color:var(--ochre,#c8903a)}
  .mnav .mnav-cta{margin-top:28px;display:inline-block;border:1px solid var(--ink,#1a1208);padding:12px 20px;font-size:11px}
  .mnav .mnav-lang{margin-top:30px;padding-top:18px;border-top:1px solid var(--line,#e4ddd2);font-size:11px;color:var(--grey,#766a59);letter-spacing:.16em;text-transform:uppercase}
  .mnav .mnav-lang a{display:inline;border:0;padding:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey,#766a59)}
  .mnav .mnav-lang a.on{color:var(--ink,#1a1208);font-weight:600}
  .mnav .mnav-lang svg{display:none}
  header{position:sticky}
}

@media(max-width:760px){
  .wrap{padding:0 18px}
  .topbar{height:64px}
  .mnav{top:65px}
  .lang{left:18px}
  .brand{font-size:18px;letter-spacing:.18em}
  .subnav{height:auto;padding:10px 12px;gap:10px 16px;font-size:10px}

  /* hero */
  .hero,.hero.center,.hero.short{min-height:60vh}
  .hero-inner{padding:48px 18px 36px}
  .hero h1{font-size:30px;line-height:1.12;margin:12px 0 10px}
  .hero.center h1{font-size:28px}
  .hero h2{font-size:16px}
  .hero .label,.hero.center .sub{font-size:10px;letter-spacing:.16em}
  .hero-note{font-size:11px;line-height:1.6}
  .hero-actions{gap:10px;margin-top:20px}
  .hero-actions .btn{padding:10px 16px;font-size:10px}

  /* secções */
  section{padding-top:52px;padding-bottom:52px}
  .sec-head h3{font-size:26px}
  h2{margin:28px 0 10px}
  .big{font-size:30px}
  .facts{grid-template-columns:1fr 1fr;gap:20px}

  /* grelhas */
  .lots{grid-template-columns:repeat(2,1fr)!important;gap:28px 14px}
  .lots .n,.lots .e{font-size:10px}
  .lots h5{font-size:12px}
  .lots .t{font-size:15px}
  .lots .d{font-size:11px}
  /* Cartoes de leilao: a duas colunas o titulo parte-se e as datas em
     maiusculas espacadas ocupam tres linhas. Uma coluna abaixo dos 560px. */
  .grid{grid-template-columns:repeat(2,1fr)!important;gap:24px 14px}
  .grid .card h4{font-size:19px;line-height:1.2;margin:14px 0 4px}
  .grid .dates{letter-spacing:.10em;font-size:10px;line-height:1.7}
  .grid .tag{font-size:9px;letter-spacing:.14em;padding:5px 9px}
  .artist-grid{grid-template-columns:repeat(2,1fr)!important;gap:22px 14px}

  /* página de lote */
  .lotpage{grid-template-columns:1fr!important;gap:26px}
  .lp-img{min-height:auto;padding:14px}
  .lp-img img{max-height:62vh}
  .thumbs{gap:8px}.thumbs img{width:60px;height:60px}
  .lp-meta .t{font-size:24px}
  .lotnum{font-size:20px}
  .lotnav{flex-wrap:wrap;gap:12px 16px;padding:16px 18px;font-size:10px}
  .lotnav>span{flex:1 1 100%;order:3}
  .lotnav select,.lotsel{flex:1;min-width:0;max-width:100%;font-size:12px}
  .lp-details p,.lp-desc{font-size:14px;line-height:1.7}

  /* venda direta */
  .wk{grid-template-columns:1fr!important;gap:24px;padding:28px 0}
  .wnav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;font-size:11px}
  .wthumbs img{width:56px;height:56px}
  .price{font-size:20px}
  .rform{grid-template-columns:1fr!important;max-width:100%}

  /* formulários e tabelas */
  form input,form select,form textarea{font-size:16px}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13px}

  /* rodapé */
  .foot{flex-direction:column;align-items:flex-start;gap:18px}
  .foot .links{gap:10px 18px}

  /* info bar */
  .infobar .wrap{padding-top:28px;padding-bottom:28px}
}
@media(max-width:400px){
  .lots{grid-template-columns:1fr!important}
  .brand{font-size:16px;letter-spacing:.14em}
}

/* o balao do chat nao deve flutuar por cima do menu aberto.
   Os ids do tawk.to mudam a cada carregamento; so o title e estavel. */
body.mnav-open iframe[title*="chat" i],
body.mnav-open iframe[title*="tawk" i]{display:none!important}

/* === leilosoc-fix-pack (Cowork) — appended 2026-09-20 === */

/* Fix hero dots vs botão "O Artista" em mobile (375px) */
@media (max-width: 600px){
  .slider .heredots{
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    justify-content: center !important;
    bottom: 10px !important;
  }
  .hero-inner{ padding-bottom: 44px !important; }
}

/* Badge "Ficha em preparação" */
.lote-preparacao{
  display: inline-block;
  padding: 4px 10px;
  margin: 6px 0 10px;
  font: 500 11px/1.2 Poppins, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a5b1e;
  background: #f5e9c8;
  border: 1px solid #d9c084;
  border-radius: 2px;
}

/* Correcções ao .lp-meta em mobile: esconder .lotnum isolado, ajustar hierarquia */
@media (max-width: 600px){
  .lp-meta .lotnum{ display: none !important; }
  .lp-meta h1{ font-size: 22px !important; margin: 2px 0 6px !important; }
  .lp-meta .n{ font-size: 10px !important; letter-spacing: 0.12em !important; }
  .lp-meta .t{ font-size: 14px !important; font-style: italic !important; }
  .lotsel{ font-size: 12px !important; padding: 9px 30px 9px 10px !important; width: 100% !important; box-sizing: border-box !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
  .lp-nav{ flex-direction: column !important; gap: 8px !important; }
}

/* Telemovel estreito: os cartoes de leilao passam a coluna unica.
   A grelha de lotes mantem duas, que sao miniaturas quadradas. */
@media(max-width:560px){
  .grid{grid-template-columns:1fr!important;gap:30px}
  .grid .card h4{font-size:24px}
  .grid .dates{font-size:11px;letter-spacing:.14em}
  .grid .card-img{aspect-ratio:16/10}
  .grid .actions{padding-top:14px}
}

/* Antevisoes das vendas: no telemovel a lista fica um "Contactar" atras do
   outro por baixo de cada imagem. O botao de contacto da seccao chega.
   No computador mantem-se. */
@media(max-width:700px){
  .lots .e.contact{display:none}
  .lots h5{margin-top:10px}
}