/* Ilha de navegação (v3.17.0, Rômulo, 22/10): Parceiro · Ajuda · HUB · Instalação · Loja, em toda página do site (loja, blog,
   institucionais, LP de instaladores e home). Marcação em scripts/loja.mjs (topo), comportamento em js/ilha.js.
   Celular: barra flutuando embaixo; desktop: barra na vertical, à esquerda. Ajuda e Loja abrem como aba de pasta: a aba
   aberta fica branca e emenda no painel com as curvas por dentro. Tudo com escopo em .ilha (as páginas têm CSS diferentes). */
.ilha {
  --i-azul: #0A84FF; --i-cinza: #F5F5F7; --i-txt: #1D1D1F; --i-mudo: #6E6E73; --i-ease: cubic-bezier(.16, 1, .3, 1);
  --i-sombra-card: inset 0 0 0 1px rgba(0,0,0,.05), 0 18px 40px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.05);
  position: fixed; z-index: 60;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: 15px; line-height: 1.3; letter-spacing: normal; color: var(--i-txt); -webkit-font-smoothing: antialiased;
}
.ilha *, .ilha *::before, .ilha *::after { box-sizing: border-box; }
/* resets em :where() (especificidade zero): sem isso o .ilha button vencia o .ilha__t e Ajuda e Loja (botões) saíam com outra
   fonte, peso e cor que Parceiro e Instalação (links) */
:where(.ilha) a { color: inherit; text-decoration: none; }
:where(.ilha) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.ilha img { display: block; max-width: 100%; }
.ilha p { margin: 0; }
.ilha svg.lucide { width: 20px; height: 20px; flex: none; stroke-width: 1.75; } /* traço único em toda página (a loja.css põe 2) */
.ilha [hidden] { display: none !important; }
.ilha :focus-visible { outline: 3px solid rgba(10,132,255,.55); outline-offset: 2px; }

.ilha__in { display: flex; padding: 5px; border-radius: 30px; background: rgba(255,255,255,.86);
  backdrop-filter: blur(22px) saturate(1.8); -webkit-backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: 0 18px 40px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.07); transition: background .25s; }
/* com um painel aberto, o resto da ilha recua para cinza: a pasta por trás */
.ilha.is-aberta .ilha__in { background: rgba(226,230,236,.95); }
.ilha__bar { display: grid; align-items: center; }

/* atalhos (hover igual ao do card de produto: sobe 4 px, fundo branco, borda fina, sombra; o ícone cresce 6%) */
.ilha__t { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: 22px; font-size: 12px; font-weight: 500; color: #3C3C43; white-space: nowrap;
  transition: translate .4s var(--i-ease), box-shadow .4s var(--i-ease), background .25s; }
.ilha__t svg.lucide { color: var(--i-azul); transition: scale .7s var(--i-ease); }
.ilha__t--loja { color: var(--i-azul); } .ilha__t--loja span { font-weight: 600; } /* a Loja é o destaque: azul e um peso acima */
.ilha__t::before, .ilha__t::after { content: none; position: absolute; width: 20px; height: 20px; pointer-events: none; }
.ilha__t[aria-expanded="true"] { z-index: 2; background: #fff; color: var(--i-txt); }
.ilha__t--loja[aria-expanded="true"] { color: var(--i-azul); }

/* HUB: titânio, leva ao início */
.ilha__hub { position: relative; overflow: hidden; display: grid; place-items: center; justify-self: center; width: 62px; height: 62px; border-radius: 19px;
  background: linear-gradient(160deg, #48484C 0%, #1C1C1E 48%, #0A0A0B 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.1);
  transition: translate .4s var(--i-ease), scale .2s var(--i-ease), box-shadow .4s var(--i-ease), filter .4s var(--i-ease); }
.ilha__hub img { width: auto; height: 21px; transition: scale .7s var(--i-ease); }
.ilha__hub:active { scale: .96; transition-duration: .12s; }

/* painéis */
.ilha__p { position: relative; z-index: 1; background: #fff; border-radius: 24px; padding: 14px; overflow: auto; overscroll-behavior: contain; }
.ilha__k { margin: 2px 4px 12px !important; font-size: 13px; color: var(--i-mudo); }
.ilha__ct { display: grid; gap: 8px; }
.ilha__i { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--i-cinza);
  transition: translate .4s var(--i-ease), box-shadow .4s var(--i-ease), background .25s; }
.ilha__i b { display: block; font-size: 15.5px; font-weight: 500; } .ilha__i small { display: block; font-size: 13px; color: var(--i-mudo); }
.ilha__ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; overflow: hidden; background: #fff; color: var(--i-azul);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); transition: scale .7s var(--i-ease); }
.ilha__ic img { width: 100%; height: 100%; }
.ilha__i--wa { background: #E9F9EF; } .ilha__i--wa .ilha__ic { background: none; box-shadow: none; }
.ilha__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: 10px; }
.ilha__cats a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px;
  transition: translate .4s var(--i-ease), box-shadow .4s var(--i-ease), background .25s; }
.ilha__cats img { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: contain; transition: scale .7s var(--i-ease); }
.ilha__cats a:not([href*="/pro/"]) img { padding: 5px !important; background: var(--i-cinza) !important; }
.ilha__cats b { display: block; font-size: 15px; font-weight: 500; } .ilha__cats small { display: block; font-size: 12.5px; color: var(--i-mudo); }
.ilha__cats b, .ilha__cats small { pointer-events: none; }
/* "Ver a loja completa" em contorno azul (v3.19.1, Rômulo, 22/10): o azul da Loja sem pesar como botão cheio */
.ilha__todos { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--i-azul); color: var(--i-azul); font-weight: 600; transition: background .25s; }
.ilha__todos svg.lucide { width: 16px; height: 16px; }

@media (hover: hover) {
  .ilha__t:hover, .ilha__cats a:hover, .ilha__i:hover { background: #fff; translate: 0 -4px; box-shadow: var(--i-sombra-card); }
  .ilha__i--wa:hover { background: #E9F9EF; }
  .ilha__t:hover svg.lucide, .ilha__cats a:hover img, .ilha__i:hover .ilha__ic { scale: 1.06; }
  .ilha__t[aria-expanded="true"]:hover { translate: none; box-shadow: none; } /* a aba aberta é a boca da pasta: não sobe */
  .ilha__todos:hover { background: rgba(10,132,255,.08); }
  /* HUB: o mesmo gesto dos atalhos (sobe 4 px, a marca cresce 6%), só a sombra um pouco mais funda e o titânio um tom mais claro.
     Sem faixa de brilho nem halo (chamavam atenção demais, Rômulo, 22/10) */
  .ilha__hub:hover { translate: 0 -4px; filter: brightness(1.08);
    box-shadow: 0 14px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.1); }
  .ilha__hub:hover img { scale: 1.06; }
}

.ilha-veu { position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.28); }
.ilha-veu[hidden] { display: none; }

/* ---------- celular: barra embaixo; o painel abre para cima ---------- */
@media (max-width: 760px) {
  .ilha { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); transition: translate .35s var(--i-ease), opacity .3s; }
  .ilha__in { flex-direction: column-reverse; }
  .ilha__bar { grid-template-columns: 1fr 1fr auto 1fr 1fr; height: 54px; }
  .ilha__t { height: 54px; padding: 0 2px; font-size: 11.5px; }
  .ilha__hub { align-self: start; margin-top: -16px; width: 58px; height: 58px; border-radius: 18px; }
  .ilha__hub img { height: 19px; }
  .ilha__p { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); padding: 12px; }
  .ilha__cats { grid-template-columns: 1fr 1fr; }
  /* aba de pasta: a aba aberta desce do painel */
  .ilha__t[aria-expanded="true"] { border-radius: 0 0 22px 22px; }
  .ilha__t[aria-expanded="true"]::before { content: ''; top: 0; left: -20px; background: radial-gradient(circle at 0 100%, transparent 19.5px, #fff 20px); }
  .ilha__t[aria-expanded="true"]::after { content: ''; top: 0; right: -20px; background: radial-gradient(circle at 100% 100%, transparent 19.5px, #fff 20px); }
  .ilha__t--loja[aria-expanded="true"]::after { content: none; } /* a Loja fica na ponta: o canto do painel é que fica reto */
  .ilha.is-loja .ilha__p--loja { border-bottom-right-radius: 0; }
  /* espaço para a barra no fim da página e barras fixas de compra acima dela */
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .mg-sticky, .pn-sticky { left: 10px; right: 10px; bottom: calc(80px + env(safe-area-inset-bottom)); border-radius: 20px; border: 0; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
  /* na home, com os controles da casa abertos, a ilha sai e os controles ficam no lugar dela (main.js → initCasa) */
  body[data-casa="on"] .ilha { opacity: 0; translate: 0 140%; pointer-events: none; }
}

/* ---------- desktop: barra na vertical, à esquerda; o painel abre para a direita ---------- */
@media (min-width: 761px) {
  .ilha { left: 14px; top: 50%; translate: 0 -50%; }
  .ilha__in { flex-direction: row; align-items: stretch; }
  .ilha__bar { grid-template-columns: 78px; gap: 4px; align-content: end; }
  .ilha__t { width: 78px; height: 66px; }
  .ilha__t svg.lucide { width: 21px; height: 21px; }
  .ilha__hub { margin: 8px 0; }
  /* os painéis ficam fora do fluxo: abrir Ajuda ou Loja não muda a altura da ilha, então a barra não se mexe. Ajuda desce a
     partir do topo da barra; Loja (último atalho) sobe a partir da base. A moldura cinza da pasta vai no próprio painel */
  .ilha__in { position: relative; }
  .ilha__p { position: absolute; left: 83px; max-height: calc(50vh + 160px); box-shadow: 0 0 0 5px rgba(226,230,236,.95), 0 18px 40px rgba(0,0,0,.16); }
  .ilha__p--ajuda { top: 5px; }
  .ilha__p--loja { bottom: 5px; }
  .ilha.is-aberta .ilha__in { border-top-right-radius: 0; border-bottom-right-radius: 0; }
  .ilha__p--ajuda { width: 380px; } /* Ajuda em 1 coluna */
  .ilha__p--loja { width: 540px; } /* Loja em 2 colunas */
  /* aba de pasta: a aba aberta estica até o painel */
  .ilha__t[aria-expanded="true"] { width: 84px; margin-right: -6px; border-radius: 22px 0 0 22px; }
  .ilha__t[aria-expanded="true"]::before { content: ''; right: 0; top: -20px; background: radial-gradient(circle at 0 0, transparent 19.5px, #fff 20px); }
  .ilha__t[aria-expanded="true"]::after { content: ''; right: 0; bottom: -20px; background: radial-gradient(circle at 0 100%, transparent 19.5px, #fff 20px); }
  .ilha__t--loja[aria-expanded="true"]::after { content: none; }
  .ilha.is-loja .ilha__p--loja { border-bottom-left-radius: 0; }

  /* a ilha flutua por cima da página e o conteúdo não pode passar por baixo dela. Partes presas à borda da tela (o texto da
     casa na home, o rodapé do blog) recuam sempre */
  /* home: a cena da casa (texto, casa, dicas) começa depois da ilha, com a mesma composição de antes no espaço que sobra */
  .hero__stage { left: 128px; }
  .hero__content, .hero__log { left: calc(128px + var(--pad)); }
  /* ultrawide: a cena fica numa faixa de até 1760 px no centro (o texto não cola na borda nem a casa fica solta no meio da
     tela); o fundo do hero segue de ponta a ponta */
  @media (min-width: 1900px) {
    .hero__stage {
      left: calc((100vw - 1760px) / 2 + 128px); right: calc((100vw - 1760px) / 2);
      /* o chão da casa some aos poucos na borda da faixa, sem corte reto contra o fundo */
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 88%, transparent);
    }
    .hero__content, .hero__log { left: calc((100vw - 1760px) / 2 + 128px + var(--pad)); }
  }
  body > .site-footer { padding-left: 128px !important; }
  .blog-main { padding-left: max(24px, calc(152px - max(0px, (100vw - 1200px) / 2))); }
}
/* até 1575 px (1320 do container + 2 × 128) a margem natural não cobre a ilha: as seções recuam 128 px, com os fundos de ponta
   a ponta. Acima disso (inclusive ultrawide) o container centrado já passa da ilha e nada se move: tudo segue alinhado ao centro */
@media (min-width: 761px) and (max-width: 1575px) {
  #conteudo:not(.blog-main) > *, body > .foot, body > footer.footer { padding-left: 128px !important; }
  #conteudo:not(.blog-main) > .container { padding-left: calc(128px + var(--pad, 20px)) !important; }
  .rail__track, .vitrine__track { --edge: var(--pad); }
}

@media (prefers-reduced-motion: reduce) {
  .ilha *, .ilha { transition: none !important; }
}
@media print { .ilha, .ilha-veu { display: none !important; } }