/* ============================================================
   EM FLORIPA — Design System v1 (F0)
   Tokens do mockup aprovado (GT 04/07 00:32):
   liquid glass · blur 28 · radius 12/18/28 · Inter
   dark #081827 / light #F8F4EC · accent #FF8B39/#F68B2C
   Filosofia: "A cidade é o fundo, a interface é vidro que flutua"
   ============================================================ */

:root {
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --sombra: 0 20px 60px rgba(0, 0, 0, .25);
  --borda-vidro: 1px solid rgba(255, 255, 255, .18);
  --blur: 28px;
  --fonte: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
  --bg: #081827;
  --texto: #F2F6FA;
  --mudo: #9FB2C4;
  --primaria: #53A8FF;
  --accent: #FF8B39;
  --sucesso: #49B675;
  --vidro: rgba(18, 31, 47, .58);
  --vidro-forte: rgba(18, 31, 47, .82);
  --brilho: rgba(255, 255, 255, .35);
}
html[data-theme="light"] {
  --bg: #F8F4EC;
  --texto: #12212F;
  --mudo: #5A6B7C;
  --primaria: #0A74D8;
  --accent: #F68B2C;
  --sucesso: #2E8B57;
  --vidro: rgba(255, 255, 255, .65);
  --vidro-forte: rgba(255, 255, 255, .88);
  --brilho: rgba(255, 255, 255, .8);
  --borda-vidro: 1px solid rgba(255, 255, 255, .55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: 110px;
  transition: background .6s ease, color .6s ease;
}

/* ---------- O CENÁRIO (a cidade é o fundo) ---------- */
.cenario {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 55% at 85% 0%, rgba(83, 168, 255, .14), transparent 60%),
    radial-gradient(90% 45% at 10% 100%, rgba(255, 139, 57, .22), transparent 65%),
    radial-gradient(60% 35% at 70% 90%, rgba(73, 182, 117, .10), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  transition: opacity .6s ease;
}
html[data-theme="light"] .cenario {
  background:
    radial-gradient(110% 50% at 80% 0%, rgba(10, 116, 216, .10), transparent 60%),
    radial-gradient(90% 45% at 8% 100%, rgba(246, 139, 44, .18), transparent 65%),
    radial-gradient(70% 40% at 75% 92%, rgba(46, 139, 87, .08), transparent 70%),
    linear-gradient(180deg, #FBF8F1 0%, #F8F4EC 100%);
}

/* ---------- VIDRO ---------- */
.glass {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.25);
  backdrop-filter: blur(var(--blur)) saturate(1.25);
  border: var(--borda-vidro);
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra), inset 0 1px 0 var(--brilho);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: var(--vidro-forte); }
}

main { max-width: 680px; margin: 0 auto; padding: 96px 16px 24px; }

a { color: inherit; text-decoration: none; }
h1 { font-size: clamp(26px, 6vw, 34px); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(20px, 5vw, 26px); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 18px; font-weight: 600; }
.muted { color: var(--mudo); font-size: 14px; }

/* ---------- TOPO ---------- */
.topo {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(680px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; z-index: 50;
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.topo-acoes { display: flex; align-items: center; gap: 10px; }
.botao-tema {
  font-size: 17px; width: 38px; height: 38px; border-radius: 50%;
  border: var(--borda-vidro); background: var(--vidro); color: var(--texto);
  cursor: pointer; transition: transform .12s ease;
}
.botao-tema:active { transform: scale(.9); }

/* ---------- BOTÕES ---------- */
.botao {
  display: inline-block; padding: 10px 18px; border-radius: 22px;
  font-weight: 600; font-size: 14px; border: var(--borda-vidro);
  background: var(--vidro); color: var(--texto);
  transition: transform .12s ease, box-shadow .12s ease;
}
.botao:active { transform: scale(.97); }
.botao-accent {
  background: linear-gradient(135deg, var(--accent), #F4532E);
  color: #fff; border: none; box-shadow: 0 8px 24px rgba(255, 120, 40, .35);
}
.botao-zap { background: linear-gradient(135deg, #2AB859, #128C4A); color: #fff; border: none; }

/* ---------- HERO / BUSCA ---------- */
.hero { padding: 28px 4px 8px; }
.hero h1 { max-width: 18ch; }
.hero-sub { margin: 10px 0 20px; max-width: 42ch; }
.busca {
  display: flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 20px; border-radius: 29px;
}
.busca input {
  flex: 1; height: 100%; background: none; border: none; outline: none;
  color: var(--texto); font-size: 16px; font-family: var(--fonte);
}
.busca input::placeholder { color: var(--mudo); }
#busca-resultados { margin-top: 10px; padding: 8px; }
#busca-resultados a {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-md); font-weight: 600;
}
#busca-resultados a:hover { background: rgba(255, 255, 255, .08); }
#busca-resultados .muted { font-weight: 400; }

/* ---------- SEÇÕES ---------- */
.secao { margin: 30px 0; }
.secao-cabeca {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; padding: 0 4px;
}
.secao-nota { margin: -8px 4px 14px; }
.ver-todos { color: var(--primaria); font-size: 14px; font-weight: 600; }

/* ---------- CARDS DE CATEGORIA (trilho) ---------- */
.trilho {
  display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 14px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.card-categoria {
  scroll-snap-align: start; flex: 0 0 116px; min-height: 128px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px; border-radius: 26px;
  transition: transform .12s ease;
  position: relative; overflow: hidden;
}
.card-categoria:hover { transform: translateY(-6px); }
.card-categoria:active { transform: scale(.97); }
.cat-icone { font-size: 30px; }
.cat-nome { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.card-categoria .seta { align-self: flex-end; color: var(--accent); font-weight: 800; }

/* gradientes diagonais (cada categoria tem um céu próprio) */
.grad-ocean   { background: linear-gradient(135deg, rgba(10,116,216,.35), rgba(83,168,255,.12)); }
.grad-dusk    { background: linear-gradient(135deg, rgba(94,63,161,.38),  rgba(255,139,57,.14)); }
.grad-forest  { background: linear-gradient(135deg, rgba(46,139,87,.38),  rgba(73,182,117,.12)); }
.grad-sunset  { background: linear-gradient(135deg, rgba(255,110,60,.38), rgba(255,60,110,.14)); }
.grad-lagoon  { background: linear-gradient(135deg, rgba(30,160,170,.36), rgba(83,168,255,.12)); }
.grad-coral   { background: linear-gradient(135deg, rgba(240,90,120,.34), rgba(255,160,120,.14)); }
.grad-sky     { background: linear-gradient(135deg, rgba(70,140,240,.32), rgba(140,200,255,.12)); }
.grad-dune    { background: linear-gradient(135deg, rgba(200,150,70,.34), rgba(240,200,130,.14)); }
.grad-steel   { background: linear-gradient(135deg, rgba(110,130,150,.36), rgba(160,180,200,.12)); }
.grad-meadow  { background: linear-gradient(135deg, rgba(120,180,70,.34), rgba(180,220,120,.12)); }
.grad-sand    { background: linear-gradient(135deg, rgba(210,170,110,.34), rgba(250,220,170,.14)); }
.grad-night   { background: linear-gradient(135deg, rgba(50,70,120,.42),  rgba(110,130,190,.14)); }

/* ---------- CARDS DE NEGÓCIO ---------- */
.lista-cards { display: flex; flex-direction: column; gap: 14px; }
.card-negocio {
  display: flex; align-items: stretch; gap: 14px; padding: 12px;
  border-radius: 26px; transition: transform .12s ease;
  position: relative;
}
.card-negocio:hover { transform: translateY(-4px); }
.card-negocio:active { transform: scale(.98); }
.foto {
  flex: 0 0 34%; min-height: 108px; border-radius: var(--radius-md);
  display: grid; place-items: center; overflow: hidden;
}
.foto-icone { font-size: 40px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.foto-icone.grande { font-size: 72px; }
.card-info { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.desc-curta { font-size: 13.5px; color: var(--mudo); }
.card-negocio .seta { align-self: center; color: var(--accent); font-weight: 800; font-size: 18px; padding-right: 6px; }

/* placeholders por categoria (fotos reais entram no F1/claim) */
.foto-gastronomia            { background: linear-gradient(135deg, #0A74D8aa, #FF8B3955); }
.foto-onde-ficar             { background: linear-gradient(135deg, #5E3FA1aa, #FF8B3955); }
.foto-natureza-e-aventura    { background: linear-gradient(135deg, #2E8B57aa, #53A8FF55); }
.foto-cultura-e-entretenimento { background: linear-gradient(135deg, #FF6E3Caa, #FF3C6E55); }
.foto-saude-e-bem-estar      { background: linear-gradient(135deg, #1EA0AAaa, #53A8FF55); }
.foto-beleza-e-estetica      { background: linear-gradient(135deg, #F05A78aa, #FFA07855); }
.foto-educacao               { background: linear-gradient(135deg, #468CF0aa, #8CC8FF55); }
.foto-comercio-e-compras     { background: linear-gradient(135deg, #C89646aa, #F0C88255); }
.foto-automotivo             { background: linear-gradient(135deg, #6E8296aa, #A0B4C855); }
.foto-pet-e-agro             { background: linear-gradient(135deg, #78B446aa, #B4DC7855); }
.foto-imoveis-e-construcao   { background: linear-gradient(135deg, #D2AA6Eaa, #FADCAA55); }
.foto-servicos-profissionais { background: linear-gradient(135deg, #324678aa, #6E82BE55); }

/* ---------- CHIPS ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-negocio { margin: 16px 0; }
.chip {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px;
  border-radius: var(--radius-sm); border: var(--borda-vidro);
  background: var(--vidro); color: var(--texto);
}
a.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip-info { color: var(--mudo); border-style: dashed; }
.chip-ok { color: var(--sucesso); border-color: var(--sucesso); }
.chip-titulo { font-size: 20px; padding: 4px 12px; color: var(--accent); }

/* ---------- PÁGINA (cabeçalho interno) ---------- */
.pagina-cabeca {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 4px 0;
}
.voltar {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--vidro); border: var(--borda-vidro);
  font-size: 18px; margin-top: 4px;
}
.cabeca-icone {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center;
  font-size: 26px; border-radius: var(--radius-md); border: var(--borda-vidro);
}

/* ---------- PILLS DE SUBCATEGORIA ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  padding: 9px 16px; border-radius: 20px; font-size: 14px; font-weight: 600;
  transition: transform .12s ease;
}
.pill:hover { transform: translateY(-3px); color: var(--accent); }

/* ---------- NEGÓCIO ---------- */
.hero-negocio {
  position: relative; min-height: 220px; display: grid; place-items: center;
  margin-bottom: 4px;
}
.hero-negocio .badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--vidro-forte); border: var(--borda-vidro);
  padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
}
.descricao { font-size: 17px; max-width: 56ch; margin: 4px 2px 20px; }
.acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.grade-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.caixa-info { padding: 16px 18px; border-radius: var(--radius-md); }
.caixa-info h3 { font-size: 14px; color: var(--mudo); margin-bottom: 6px; }
.caixa-info p { font-size: 14.5px; }
@media (max-width: 520px) { .grade-info { grid-template-columns: 1fr; } }

/* ---------- BANNERS / ESTADOS ---------- */
.banner-cta { padding: 26px; text-align: center; }
.banner-cta h2 { margin-bottom: 8px; }
.banner-cta .botao { margin-top: 16px; }
.banner-claim { margin: 8px 0 30px; }
.estado-vazio { padding: 34px 26px; text-align: center; }
.vazio-icone { font-size: 40px; margin-bottom: 10px; }
.estado-vazio .botao { margin-top: 16px; }

/* ---------- PROSA ---------- */
.caixa-prosa { padding: 28px 26px; }
.caixa-prosa p { margin-bottom: 14px; }
.caixa-prosa h2 { margin: 22px 0 10px; font-size: 20px; }
.passos { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.destaque-cta { margin-top: 20px; padding: 18px; border-radius: var(--radius-md); border: 1px dashed var(--accent); text-align: center; }

/* ---------- RODAPÉ ---------- */
.rodape { max-width: 680px; margin: 40px auto 0; padding: 0 16px; }
.rodape-caixa { padding: 24px; text-align: center; }
.rodape-marca { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; }
.rodape-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.rodape-links a:hover { color: var(--accent); }
.rodape-nota { margin-top: 6px; font-size: 12.5px; }

/* ---------- NAVBAR (bottom, mobile-first) ---------- */
.navbar {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  width: min(480px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-around;
  padding: 10px 8px; z-index: 50;
}
.navbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600; color: var(--mudo); min-width: 54px;
}
.navbar a span { font-size: 19px; }
.navbar a:hover { color: var(--texto); }
.navbar .fab {
  width: 54px; height: 54px; margin-top: -30px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  background: radial-gradient(circle at 30% 25%, #FFB36B, var(--accent) 55%, #F4532E);
  box-shadow: 0 12px 30px rgba(255, 120, 40, .45);
  border: 2px solid rgba(255, 255, 255, .35);
  transition: transform .12s ease;
}
.navbar .fab:active { transform: scale(.92); }

/* ---------- ACESSIBILIDADE / MOTION ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}


/* ===== fotos reais (Onda 1 da maquina, 04/07) ===== */
.hero-foto{padding:0;overflow:hidden;position:relative}
.hero-foto img{width:100%;height:340px;object-fit:cover;display:block;border-radius:inherit}
.hero-foto .badge{position:absolute;left:18px;bottom:18px}
.galeria-fotos{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.galeria-fotos img{width:100%;height:110px;object-fit:cover;border-radius:14px;border:1px solid rgba(255,255,255,.14)}
.atribuicao{font-size:.72rem;margin-top:6px;opacity:.75}
@media (max-width:640px){.hero-foto img{height:230px}.galeria-fotos{grid-template-columns:repeat(2,1fr)}}