/* ═══════════════════════════════════════════════════════════════════════════
   A BASE NO CELULAR (PR 3 do mobile, out/2026) — docs/base-no-celular.md

   Só abaixo de 860 px (a mesma faixa do Atlas, #318) e só com a classe
   `solos-base-cel` no <html>, que o base-celular-tela.js põe e tira. No
   computador, e no modo Studio (?studio=canonical), nenhuma regra daqui vale.

   Nada é duplicado: a folha de baixo mostra OS MESMOS painéis do computador,
   reposicionados — o Dashboard (#panel-right) é a aba Resumo; o painel
   esquerdo (#panel) se reparte em Produto e Torre. Os números são os mesmos
   elementos, então não há como divergir.

   Os seletores levam `html.solos-base-cel` na frente: as folhas antigas estão
   cheias de !important, e é a especificidade que decide.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes bfBarraDesce { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes bfPulinho    { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes bfFolhaSobe  { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@keyframes bfCresce     { from { transform: scaleX(0); } to { transform: none; } }

/* O que a casca cria (a folha e o atalho do "Inc.") só existe para o celular: fora dele, fica escondido —
   inclusive quando a janela alarga com a Base aberta. É a única regra desta folha que vale no computador. */
#solos-base-folha, #panel-right > .bf-extra { display: none; }

@media (max-width: 860px) {

  html.solos-base-cel {
    /* [MAPA ATÉ AS BORDAS] a área segura vem de um lugar só (<style id="solos-area-segura">, no SOLOS-V1.html) */
    --bf-seguro-cima: var(--solos-seguro-cima, env(safe-area-inset-top, 0px));
    --bf-seguro-baixo: var(--solos-seguro-baixo, env(safe-area-inset-bottom, 0px));
    --bf-topo: calc(116px + var(--bf-seguro-cima));          /* onde a folha cheia começa: abaixo da coluna de ações (12 + 42 + 8 + 42 + 12) */
    --bf-meia: min(420px, 58dvh);                             /* a altura da folha no estado "meia" */
    --bf-cab: 111px;                                          /* puxador + nome + Resumo/Produto/Torre */
    --bf-curso: calc(100dvh - var(--bf-meia) - var(--bf-topo));
    --bf-y: var(--bf-curso);                                  /* quanto a folha está abaixo da cheia */
    --bf-tinta: #1B1F1A;
    --bf-apoio: #5F645C;
    overscroll-behavior: none;
  }
  html.solos-base-cel[data-folha-estado="cheia"] { --bf-y: 0px; }
  /* [FOLHA RECOLHIDA out/2026] o terceiro estado, o da abertura: só o puxador, o nome e o valor do terreno à vista */
  html.solos-base-cel { --bf-recolhida: calc(96px + var(--bf-seguro-baixo)); }
  html.solos-base-cel[data-folha-estado="recolhida"] { --bf-y: calc(100dvh - var(--bf-recolhida) - var(--bf-topo)); }

  /* ── O TOPO: os botões de seção e de ação são do topo-em-botoes.css (12/10/2026). Daqui só saem as medidas que a
     folha e o 3D usam: onde a folha cheia começa (--bf-topo) e onde as páginas de documento começam. ── */
  /* "Inc." não fica na coluna de ações da Base no celular: o mesmo botão é acionado pelo fim da folha (Resumo) */
  html.solos-base-cel #v14-view-area .v45-topbar .bt-actions #v14-btn-share-inc-header { display: none !important; }
  /* as outras abas (Matriz, Negociações, Comercial) começam abaixo da coluna de ações (Salvar e Atlas) */
  html.solos-base-cel #v14-panel-matriz,
  html.solos-base-cel #v14-panel-neg:not(.neg-gaveta),
  html.solos-base-cel #v14-panel-arquivos,
  html.solos-base-cel #v14-panel-historico { padding-top: calc(116px + var(--bf-seguro-cima)) !important; }
  html.solos-base-cel #v14-panel-commercial { top: calc(124px + var(--bf-seguro-cima)) !important; }

  /* ── O 3D: a metade de cima. O MESMO mapa, a mesma cena — só o tamanho muda ── */
  html.solos-base-cel #v50-base-shell #viewport {
    inset: 0 0 auto 0 !important; width: 100vw !important;
    height: calc(100dvh - var(--bf-meia) + 26px) !important;     /* 26 px por baixo do canto arredondado da folha */
  }
  /* com a folha recolhida o 3D ocupa a tela (quem liga e desliga é o base-celular-tela.js, uma vez por mudança de estado) */
  html.solos-base-cel[data-folha-3d="alto"] #v50-base-shell #viewport {
    height: calc(100dvh - var(--bf-recolhida) + 26px) !important;
  }
  html.solos-base-cel #v50-base-shell #view-controls {
    position: fixed !important; top: var(--bf-topo) !important; right: 12px !important; left: auto !important; bottom: auto !important;
    transform: none !important; width: auto !important; max-width: none !important;
    display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important;
    padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    z-index: 30 !important;
  }
  html.solos-base-cel #v50-base-shell #view-controls .view-btn {
    height: 36px !important; min-width: 65px; padding: 0 12px !important; margin: 0 !important;
    border-radius: 12px !important; border: 1px solid rgba(255,255,255,.7) !important;
    background: rgba(250,250,246,.6) !important; color: var(--bf-apoio) !important;
    font: 500 12px Jost, -apple-system, system-ui, sans-serif !important;
    letter-spacing: 0 !important; text-transform: lowercase !important; box-shadow: none !important;
  }
  html.solos-base-cel #v50-base-shell #view-controls .view-btn::first-letter { text-transform: uppercase; }
  html.solos-base-cel #v50-base-shell #view-controls #btn-recuos-wire-mode::after { content: none !important; }   /* no celular: "Recuos" */
  html.solos-base-cel #v50-base-shell #view-controls .view-btn.active,
  html.solos-base-cel #v50-base-shell #view-controls .view-btn.wire-active {
    background: rgba(250,250,246,.94) !important; color: var(--bf-tinta) !important; font-weight: 600 !important;
    box-shadow: inset 0 0 0 1.5px #C3EA4F !important;
  }
  /* os botões de zoom do mapa saem (no toque é a pinça); o crédito do mapa sobe para fora da folha */
  html.solos-base-cel #v50-base-shell #viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: none !important; }
  html.solos-base-cel #v50-base-shell #viewport .maplibregl-ctrl-bottom-right,
  html.solos-base-cel #v50-base-shell #viewport .maplibregl-ctrl-bottom-left { bottom: 28px !important; }
  /* o aviso da união fica sobre o 3D, logo acima da folha; a folha cheia passa por cima dele */
  html.solos-base-cel #v50-base-shell #solos-uniao-aviso {
    left: 12px !important; right: 12px !important; transform: none !important;
    width: auto !important; max-width: none !important; z-index: 230 !important;
    bottom: calc(var(--bf-meia) + 10px) !important;
  }
  /* [FOLHA RECOLHIDA] com a folha recolhida o aviso desce junto com ela (no mesmo tempo e na mesma curva), para não ficar no meio do 3D */
  html.solos-base-cel #v50-base-shell #solos-uniao-aviso { transition: transform .32s cubic-bezier(.2,.8,.2,1) !important; }
  html.solos-base-cel[data-folha-estado="recolhida"] #v50-base-shell #solos-uniao-aviso { transform: translate3d(0, calc(var(--bf-meia) - var(--bf-recolhida)), 0) !important; }

  /* ── A FOLHA: vidro, canto de 26, puxador; meia (padrão) e cheia ── */
  html.solos-base-cel #solos-base-folha {
    display: block; position: fixed; left: 0; right: 0; top: var(--bf-topo); bottom: 0; z-index: 240;
    transform: translate3d(0, var(--bf-y), 0);
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
    border-radius: 26px 26px 0 0; border: 1px solid rgba(255,255,255,.8); border-bottom: 0;
    background: rgba(250,250,246,.94);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    box-shadow: 0 -10px 40px rgba(20,24,18,.16);
    font-family: Jost, -apple-system, system-ui, sans-serif; color: var(--bf-tinta);
    touch-action: none;                                           /* o arrasto aqui é da folha, não da página */
    -webkit-user-select: none; user-select: none;
  }
  html.solos-base-cel #solos-base-folha .bf-puxador {
    display: block; width: 100%; height: 28px; margin: 0; padding: 11px 0 12px; border: 0; background: transparent; cursor: grab;
  }
  html.solos-base-cel #solos-base-folha .bf-puxador span { display: block; width: 40px; height: 5px; margin: 0 auto; border-radius: 3px; background: rgba(27,31,26,.2); }
  html.solos-base-cel #solos-base-folha .bf-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; height: 27px; margin: 0 16px 12px; }
  html.solos-base-cel #solos-base-folha .bf-nome { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 27px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  html.solos-base-cel #solos-base-folha .bf-apoio { font-size: 13px; color: var(--bf-apoio); white-space: nowrap; flex-shrink: 0; }
  /* recolhida: no lugar de "bairro · zona", o valor do terreno; as abas saem (só opacidade: nada muda de lugar) */
  html.solos-base-cel #solos-base-folha .bf-valor { display: none; font-size: 15px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
  html.solos-base-cel[data-folha-estado="recolhida"] #solos-base-folha .bf-valor { display: block; }
  html.solos-base-cel[data-folha-estado="recolhida"] #solos-base-folha .bf-apoio { display: none; }
  html.solos-base-cel[data-folha-estado="recolhida"] #solos-base-folha .bf-cab { cursor: pointer; }
  html.solos-base-cel #solos-base-folha .bf-abas { transition: opacity .2s cubic-bezier(.2,.8,.2,1); }
  html.solos-base-cel[data-folha-estado="recolhida"] #solos-base-folha .bf-abas { opacity: 0; pointer-events: none; }
  html.solos-base-cel #solos-base-folha .bf-sonda { position: absolute; left: 0; top: 0; width: 0; height: var(--bf-recolhida); visibility: hidden; pointer-events: none; }
  html.solos-base-cel #solos-base-folha .bf-abas { display: flex; gap: 4px; height: 44px; margin: 0 16px; padding: 4px; box-sizing: border-box; border-radius: 14px; background: rgba(27,31,26,.06); }
  html.solos-base-cel #solos-base-folha .bf-abas button {
    flex: 1 1 0; min-width: 0; height: 36px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
    font: 500 13px Jost, -apple-system, system-ui, sans-serif; color: var(--bf-apoio);
  }
  html.solos-base-cel #solos-base-folha .bf-abas button[aria-selected="true"] { background: #fff; color: var(--bf-tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

  /* os dois painéis do computador, no corpo da folha */
  html.solos-base-cel #v50-base-shell #panel,
  html.solos-base-cel #v50-base-shell #panel-right {
    position: fixed !important; left: 0 !important; right: 0 !important; width: auto !important;
    top: calc(var(--bf-topo) + var(--bf-cab)) !important; bottom: 0 !important;
    height: auto !important; max-height: none !important; min-height: 0 !important;
    margin: 0 !important; box-sizing: border-box !important;
    padding: 12px 16px calc(20px + var(--bf-seguro-baixo)) !important;
    transform: translate3d(0, var(--bf-y), 0) !important;
    transition: transform .32s cubic-bezier(.2,.8,.2,1) !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    z-index: 241 !important;
    overflow-x: hidden !important; overflow-y: hidden !important;
    overscroll-behavior: contain;
    touch-action: none;                                           /* na meia, arrastar a folha em qualquer ponto abre a cheia */
    visibility: visible;
  }
  html.solos-base-cel[data-folha-estado="cheia"] #v50-base-shell #panel,
  html.solos-base-cel[data-folha-estado="cheia"] #v50-base-shell #panel-right {
    overflow-y: auto !important; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  }
  /* enquanto o dedo arrasta: sem transição (a folha acompanha) e sem desfoque (custa caro a cada quadro) */
  html.solos-base-cel.bf-arrastando #solos-base-folha,
  html.solos-base-cel.bf-arrastando #v50-base-shell #panel,
  html.solos-base-cel.bf-arrastando #v50-base-shell #panel-right { transition: none !important; }
  html.solos-base-cel.bf-arrastando #solos-base-folha { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250,250,246,.98); }

  /* qual painel aparece em cada aba da folha */
  html.solos-base-cel[data-folha-aba="resumo"] #v50-base-shell #panel,
  html.solos-base-cel:not([data-folha-aba="resumo"]) #v50-base-shell #panel-right { visibility: hidden !important; pointer-events: none !important; }
  html.solos-base-cel[data-folha-aba="produto"] #v50-base-shell #panel [data-folha="torre"],
  html.solos-base-cel[data-folha-aba="torre"] #v50-base-shell #panel [data-folha="produto"],
  html.solos-base-cel #v50-base-shell #panel [data-folha="lote"],
  html.solos-base-cel #v50-base-shell #panel [data-folha="oculto"],
  html.solos-base-cel #v50-base-shell #panel > .brand { display: none !important; }
  html.solos-base-cel #v50-base-shell #panel .section { margin-left: 0 !important; margin-right: 0 !important; }
  html.solos-base-cel #v50-base-shell #panel > .section:first-of-type,
  html.solos-base-cel #v50-base-shell #panel [data-folha-primeira] { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }

  /* campo de digitar com 16 px: abaixo disso o Safari do iPhone aproxima a página inteira ao focar (lição do #318) */
  html.solos-base-cel #v50-base-shell #panel input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  html.solos-base-cel #v50-base-shell #panel select,
  html.solos-base-cel #v50-base-shell #panel textarea,
  html.solos-base-cel #v50-base-shell #panel-right input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  html.solos-base-cel #v50-base-shell #panel-right select,
  html.solos-base-cel #v50-base-shell #panel-right textarea { font-size: 16px !important; }

  /* ── RESUMO: os cartões do Dashboard, em grade 2 × 2 ── */
  html.solos-base-cel #v50-base-shell #panel-right > .dash-title,
  html.solos-base-cel #v50-base-shell #panel-right > .dash-subtitle { display: none !important; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; margin: 0 0 8px !important; padding: 0 !important;
  }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card {
    margin: 0 !important; padding: 12px 14px 11px !important; min-width: 0; box-sizing: border-box;
    border-radius: 14px !important; border: 1px solid rgba(27,31,26,.06) !important;
    background: #fff !important; box-shadow: none !important;
  }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card-label {
    font: 600 10px/15px Jost, sans-serif !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--bf-apoio) !important;
    margin: 0 0 3px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card-value {
    font: 700 min(20px, 5.1vw)/29px Jost, sans-serif !important; letter-spacing: 0 !important; color: var(--bf-tinta) !important;
    margin: 0 !important; white-space: nowrap;      /* se ainda assim não couber, o script diminui a letra — o valor nunca é cortado */
  }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card-sub { display: none !important; }
  /* os nomes do desenho, sobre os mesmos cartões */
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card:nth-child(2) .deal-card-label,
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card:nth-child(3) .deal-card-label,
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card:nth-child(4) .deal-card-label { font-size: 0 !important; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card:nth-child(2) .deal-card-label::after { content: 'Valor do terreno'; font-size: 10px; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card:nth-child(3) .deal-card-label::after { content: 'R$/m² médio'; font-size: 10px; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card:nth-child(4) .deal-card-label::after { content: 'Dinheiro × permuta'; font-size: 10px; }
  html.solos-base-cel #v50-base-shell #panel-right #dash-deal-fonte-neg {
    font: 600 11px/16px Jost, sans-serif !important; letter-spacing: 0 !important; text-transform: lowercase !important; color: #3F5610 !important; margin: 3px 0 0 !important;
  }
  html.solos-base-cel #v50-base-shell #panel-right #v50-cadastre-status {
    font: 400 11px/16px Jost, sans-serif !important; color: var(--bf-apoio) !important; margin: 3px 0 0 !important; padding: 0 !important;
  }
  html.solos-base-cel #v50-base-shell #panel-right #v50-cadastre-status button {
    display: block; margin: 4px 0 0; height: 24px; padding: 0 8px; border-radius: 8px; border: 1px solid rgba(27,31,26,.14); background: #fff;
    font: 600 10px Jost, sans-serif; color: var(--bf-tinta);
  }
  /* dinheiro × permuta: a barra de 10 px (lime e areia) com os percentuais embaixo */
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-bar {
    display: flex !important; height: auto !important; margin: 6px 0 0 !important; overflow: visible !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-cash,
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-swap {
    position: relative; display: flex !important; height: auto !important; min-width: 0; box-sizing: border-box;
    padding: 14px 0 0 !important; overflow: visible !important; white-space: nowrap;
    background: none !important; color: var(--bf-tinta) !important;
    font: 600 12px/18px Jost, sans-serif !important; letter-spacing: 0 !important;
  }
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-cash { justify-content: flex-start !important; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-swap { justify-content: flex-end !important; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-cash::before,
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-swap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; transform-origin: left center; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-cash::before { background: #C3EA4F; border-radius: 5px 0 0 5px; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-swap::before { background: #C9A87A; border-radius: 0 5px 5px 0; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-cash[style*="100%"]::before { border-radius: 5px; }     /* sem permuta: a barra é uma só */
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-values {
    display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; margin: 0 !important;
    font: 500 10px/14px Jost, sans-serif !important; color: var(--bf-apoio) !important;
  }
  html.solos-base-cel #v50-base-shell #panel-right .deal-mix-values span { font: inherit !important; color: inherit !important; }
  /* na meia, depois dos 4 cartões, o convite; a intermediação (5º cartão) e o VGV vêm abaixo, na cheia */
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid .deal-card:nth-child(5) { grid-column: 1 / -1; order: 3; }
  html.solos-base-cel #v50-base-shell #panel-right .deal-summary-grid::after {
    content: 'Arraste para cima para ver VGV e intermediação'; grid-column: 1 / -1; order: 2;
    display: flex; align-items: center; justify-content: center; height: 44px; box-sizing: border-box;
    margin: 4px 0 600px;        /* na meia, o que vem depois do convite fica fora da tela (a folha não rola) */
    border: 1px dashed rgba(27,31,26,.2); border-radius: 14px;
    font: 600 13px Jost, sans-serif; color: var(--bf-apoio); text-align: center;
  }
  html.solos-base-cel[data-folha-estado="cheia"] #v50-base-shell #panel-right .deal-summary-grid::after { display: none; }
  html.solos-base-cel #v50-base-shell #panel-right .vgv-hero { margin: 0 0 8px !important; }
  /* o que saiu da barra ("Inc."): logo abaixo do VGV e da intermediação, antes do resto do Dashboard */
  html.solos-base-cel #v50-base-shell #panel-right .bf-extra { display: flex; margin: 0 0 12px; }
  html.solos-base-cel #v50-base-shell #panel-right .bf-extra button {
    flex: 1 1 0; height: 44px; padding: 0 16px; border-radius: 16px; border: 1.5px solid rgba(27,31,26,.14); background: #fff; cursor: pointer;
    font: 700 12px Jost, -apple-system, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-tinta);
  }

  /* ── ENTRADA: uma vez, curta ── */
  html.solos-base-cel.bf-entrando #v14-view-area .v45-topbar .bt-actions { animation: bfBarraDesce .5s cubic-bezier(.2,.8,.2,1) both; }
  html.solos-base-cel.bf-entrando #v14-view-area .v45-topbar #v14-tabs .v14-tab { animation: bfPulinho .4s cubic-bezier(.3,1.5,.5,1) both; }
  html.solos-base-cel.bf-entrando #v14-view-area .v45-topbar #v14-tabs .v14-tab:nth-of-type(1) { animation-delay: .1s; }
  html.solos-base-cel.bf-entrando #v14-view-area .v45-topbar #v14-tabs .v14-tab:nth-of-type(2) { animation-delay: .15s; }
  html.solos-base-cel.bf-entrando #v14-view-area .v45-topbar #v14-tabs .v14-tab:nth-of-type(5) { animation-delay: .2s; }
  html.solos-base-cel.bf-entrando #v14-view-area .v45-topbar #v14-tabs .v14-tab:nth-of-type(6) { animation-delay: .25s; }
  html.solos-base-cel.bf-entrando #solos-base-folha,
  html.solos-base-cel.bf-entrando #v50-base-shell #panel-right,
  html.solos-base-cel.bf-entrando #v50-base-shell #panel { animation: bfFolhaSobe .6s cubic-bezier(.2,.8,.2,1) .15s both; }
  html.solos-base-cel.bf-entrando #v50-base-shell #panel-right .deal-mix-cash::before,
  html.solos-base-cel.bf-entrando #v50-base-shell #panel-right .deal-mix-swap::before { animation: bfCresce .6s cubic-bezier(.2,.8,.2,1) .3s both; }
}

/* [MAPA ATÉ AS BORDAS out/2026] deitado, num aparelho com recorte: os controles da Base ficam entre os recortes.
   O 3D continua de borda a borda. Em pé (e em qualquer aparelho sem recorte) as duas medidas valem 0: nada muda. */
@media (max-width: 860px) {
  html.solos-base-cel #v14-view-area .v14-area-header.v45-topbar,
  html.solos-base-cel #v50-base-shell #solos-uniao-aviso { left: calc(12px + var(--solos-seguro-esq, 0px)) !important; right: calc(12px + var(--solos-seguro-dir, 0px)) !important; }
  html.solos-base-cel #v50-base-shell #view-controls { right: calc(12px + var(--solos-seguro-dir, 0px)) !important; }
  html.solos-base-cel #solos-base-folha,
  html.solos-base-cel #v50-base-shell #panel,
  html.solos-base-cel #v50-base-shell #panel-right { left: var(--solos-seguro-esq, 0px) !important; right: var(--solos-seguro-dir, 0px) !important; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  html.solos-base-cel.bf-entrando #v14-view-area .v45-topbar *,
  html.solos-base-cel.bf-entrando #v14-view-area .v14-area-header.v45-topbar::before,
  html.solos-base-cel.bf-entrando #solos-base-folha,
  html.solos-base-cel.bf-entrando #v50-base-shell #panel,
  html.solos-base-cel.bf-entrando #v50-base-shell #panel-right,
  html.solos-base-cel.bf-entrando #v50-base-shell #panel-right .deal-mix-cash::before,
  html.solos-base-cel.bf-entrando #v50-base-shell #panel-right .deal-mix-swap::before { animation: none !important; }
  html.solos-base-cel #solos-base-folha,
  html.solos-base-cel #v50-base-shell #panel,
  html.solos-base-cel #v50-base-shell #panel-right { transition: none !important; }
  /* [FOLHA RECOLHIDA] as abas que somem e o aviso que desce com a folha também não animam */
  html.solos-base-cel #solos-base-folha .bf-abas,
  html.solos-base-cel #v50-base-shell #solos-uniao-aviso { transition: none !important; }
}