/* Página geral de vendas do AcheMe (vendas/index.html) — 30/09/2026.
   Carrega depois de sales.css, familia.css, nicho.css e nicho-cores.css (.cor-<nicho> dá --brand/--nicho
   a cada cartão). Só tokens: dia (.tema-dia) e noite (.theme-acheme). */

/* ── topo: parede de fotos dos ramos subindo devagar ── */
.hero-geral { position:relative; overflow:hidden; isolation:isolate; min-height:min(94vh,900px); display:flex; align-items:center; padding:110px 0 70px; color:#fff; background:#05080f; }
.mosaico { position:absolute; inset:0 0 0 38%; z-index:-2; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 14px; transform:rotate(-6deg) scale(1.2); transform-origin:center; }
.mosaico-col { overflow:hidden; }
.mosaico-trilho { display:flex; flex-direction:column; gap:14px; animation:mosaicoSobe 60s linear infinite; }
.mosaico-col:nth-child(2) .mosaico-trilho { animation-duration:75s; animation-direction:reverse; }
.mosaico-col:nth-child(3) .mosaico-trilho { animation-duration:68s; }
.mosaico img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:14px; }
.hero-veu-geral { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#05080f 30%,rgba(5,8,15,.82) 52%,rgba(5,8,15,.35) 80%,rgba(5,8,15,.55)),linear-gradient(0deg,var(--page-bg),transparent 18%),radial-gradient(circle at 15% 80%,color-mix(in srgb,var(--brand) 30%,transparent),transparent 45%); }
.hero-geral .eyebrow { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.1); }
.hero-geral h1 { max-width:720px; color:#fff; font-size:clamp(2.5rem,5.6vw,4.4rem); }
.hero-geral .titulo-palavras .gradient-text .palavra > span { background:linear-gradient(120deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; }
.hero-geral .hero-copy { max-width:560px; color:rgba(255,255,255,.85); font-size:1.12rem; }
.hero-geral .hero-actions { margin-top:28px; }
.hero-geral .hero-selos strong { color:var(--brand-2); }
/* 16/10/2026: o topo da home é escuro também no dia → laranja mais claro para ler bem */
.tema-dia .hero-geral .titulo-palavras .gradient-text .palavra > span { background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 78%,#fff),color-mix(in srgb,var(--brand) 62%,#fff)); -webkit-background-clip:text; background-clip:text; }
.tema-dia .hero-geral .hero-selos strong { color:color-mix(in srgb,var(--brand) 70%,#fff); }

/* ── faixa com todos os ramos passando ── */
.faixa { overflow:hidden; padding:18px 0; border-block:1px solid var(--line); background:var(--surface); }
.faixa-trilho { display:flex; gap:12px; width:max-content; animation:faixaAnda 90s linear infinite; }
.faixa-item { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:.9rem; font-weight:600; white-space:nowrap; }
.faixa-item i { width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 10px var(--brand); }

/* ── ramos: busca + cartões com foto e cor ── */
.busca-ramo { display:block; max-width:560px; margin:0 auto 34px; }
.busca-ramo input { width:100%; padding:16px 22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); font:inherit; font-size:1rem; box-shadow:var(--shadow); }
.busca-ramo input:focus { outline:2px solid color-mix(in srgb,var(--brand) 60%,transparent); outline-offset:2px; }
.busca-vazia { text-align:center; color:var(--muted); }
.familia-bloco { margin-top:38px; }
.familia-titulo { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:16px; font-size:1.3rem; }
.familia-titulo a { color:var(--muted); font-size:.85rem; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.ramos-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ramo-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); text-decoration:none; transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .35s; }
.ramo-card::before { content:""; position:absolute; inset:0 0 auto; height:4px; z-index:1; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }
.ramo-foto { display:block; overflow:hidden; aspect-ratio:16/9; background:var(--nicho-escuro); }
.ramo-foto img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.ramo-nome { padding:14px 16px 2px; font-weight:800; letter-spacing:-.01em; }
.ramo-ver { padding:0 16px 14px; color:var(--brand); font-size:.84rem; font-weight:700; }
.ramo-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--brand) 55%,transparent); box-shadow:0 22px 50px color-mix(in srgb,var(--brand) 22%,transparent); }
.ramo-card:hover .ramo-foto img { transform:scale(1.08); }
.ramo-card[hidden], .familia-bloco[hidden] { display:none; }

/* ── a cara de cada ramo: telas reais ── */
.telas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tela-cor { position:relative; display:block; padding:8px; border-radius:16px; background:linear-gradient(135deg,var(--brand),var(--nicho-escuro)); text-decoration:none; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.tela-cor img { display:block; width:100%; height:auto; border-radius:10px; }
.tela-cor span { position:absolute; left:18px; bottom:18px; padding:6px 12px; border-radius:999px; background:rgba(0,0,0,.72); color:#fff; font-size:.82rem; font-weight:700; }
.tela-cor:hover { transform:translateY(-6px) rotate(-.6deg); }

/* ── o que tem, por área ── */
.areas { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-items:start; }
.area-item { border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.area-item summary { display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:18px 20px; cursor:pointer; list-style:none; }
.area-item summary::-webkit-details-marker { display:none; }
.area-nome { font-weight:800; font-size:1.05rem; }
.area-texto { grid-column:1; color:var(--muted); font-size:.88rem; }
.area-qtd { grid-row:1 / 3; grid-column:2; align-self:center; display:grid; place-items:center; min-width:40px; height:40px; border-radius:12px; background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand); font-weight:900; }
.area-item[open] { border-color:color-mix(in srgb,var(--brand) 40%,transparent); }
.area-item ul { display:grid; gap:10px; margin:0; padding:0 20px 20px; list-style:none; }
.area-item li { display:grid; gap:2px; padding-top:10px; border-top:1px solid var(--line); }
.area-item li strong { font-size:.95rem; }
.area-item li span { color:var(--muted); font-size:.86rem; line-height:1.5; }

.difs-4 { grid-template-columns:repeat(4,1fr); }

@keyframes mosaicoSobe { from { transform:translateY(0); } to { transform:translateY(-50%); } }
@keyframes faixaAnda { from { transform:translateX(0); } to { transform:translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .mosaico-trilho, .faixa-trilho { animation:none; }
}
@media (max-width: 1060px) {
  .ramos-grid { grid-template-columns:repeat(3,1fr); }
  .difs-4 { grid-template-columns:repeat(2,1fr); }
  .mosaico { inset:0 0 0 20%; }
}
@media (max-width: 760px) {
  .ramos-grid, .telas-grid { grid-template-columns:repeat(2,1fr); }
  .areas { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .hero-geral { min-height:0; padding:96px 0 50px; }
  .mosaico { inset:0; opacity:.55; }
  .hero-veu-geral { background:linear-gradient(180deg,rgba(5,8,15,.7),#05080f 75%),linear-gradient(0deg,var(--page-bg),transparent 10%); }
  .hero-geral h1 { font-size:clamp(2.2rem,11vw,3rem); }
  .hero-geral .hero-actions .btn { width:100%; }
  .ramos-grid { gap:10px; }
  .ramo-nome { padding:10px 12px 2px; font-size:.92rem; }
  .ramo-ver { padding:0 12px 12px; font-size:.78rem; }
  .telas-grid, .difs-4 { grid-template-columns:1fr; }
}