/* ============================================================================
   CAFÉ CAPÃO — style.css
   Paleta e tipografia da marca (espresso + amarelo limão + creme).
   Títulos: Fraunces (aproxima a serifa da logo). Corpo: Poppins. Micro: JetBrains Mono.
   ============================================================================ */

:root{
  /* fundos (café / espresso avermelhado, extraído da referência de cor) */
  --espresso:  #1B0C06;
  --bg:        #21100A;
  --surface:   #301A12;
  --surface-2: #3A2318;
  --surface-3: #45291D;
  --line:      #4E2F21;

  /* texto */
  --cream:     #F6EDE1;
  --cream-dim: #CBB6A4;
  --cream-dimmer:#9C8474;

  /* marca */
  --yellow:      #F2E652;   /* amarelo Café Capão */
  --yellow-2:    #FFF483;
  --yellow-deep: #E4CE3C;
  --amber:       #D89A3C;
  --ink:         #23110B;   /* texto escuro sobre amarelo */

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 18px 45px -22px rgba(0,0,0,.75);
  --shadow-soft: 0 10px 30px -18px rgba(0,0,0,.65);
  --ring: 0 0 0 3px rgba(242,230,82,.22);
  --maxw: 1000px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
  min-height:100%;
}
.display{font-family:'Fraunces','Georgia',serif; font-optical-sizing:auto;}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
strong{color:var(--cream); font-weight:600;}

/* ---------- textura de fundo (brilhos quentes + grãos sutis) ---------- */
.bg-fx{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%, rgba(242,230,82,.10), transparent 42%),
    radial-gradient(circle at 88% 14%, rgba(216,154,60,.12), transparent 45%),
    radial-gradient(circle at 78% 88%, rgba(216,154,60,.08), transparent 46%),
    radial-gradient(circle at 20% 96%, rgba(242,230,82,.06), transparent 40%);
}
.bg-fx::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.4px);
  background-size:5px 5px;
  opacity:.5;
  mix-blend-mode:screen;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1;}

/* ============================ HEADER / NAV ============================ */
.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 24px 6px;
}
.brand{display:inline-flex; align-items:center; transition:transform .25s var(--ease);}
.brand:hover{transform:translateY(-1px);}
.brand-logo{height:62px; width:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));}
.top-nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.top-link{
  font-size:13px; font-weight:500; color:var(--cream-dim);
  padding:8px 12px; border-radius:100px; transition:color .2s, background .2s;
  white-space:nowrap;
}
.top-link:hover{color:var(--cream);}
.top-link--cta{
  color:var(--yellow); border:1px solid rgba(242,230,82,.35);
}
.top-link--cta:hover{background:rgba(242,230,82,.12); color:var(--yellow-2);}

/* ============================ HERO ============================ */
.hero{padding:52px 0 30px;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--yellow),transparent);}
h1{
  font-family:'Fraunces',serif; font-weight:700;
  font-size:clamp(36px, 6.4vw, 62px);
  line-height:1.03; letter-spacing:-.015em;
  max-width:16ch; color:var(--cream);
}
h1 em{font-style:italic; font-weight:600; color:var(--yellow);
  background:linear-gradient(180deg,transparent 62%, rgba(242,230,82,.16) 62%);}
.hero .sub{
  margin-top:22px; max-width:52ch; color:var(--cream-dim);
  font-size:clamp(15px,2.4vw,17.5px); font-weight:300;
}
.hero .sub strong{font-weight:600;}

/* ============================ SEARCH CARD ============================ */
.search-card{
  margin-top:36px;
  background:linear-gradient(180deg,var(--surface),var(--surface) 60%, #34201700);
  background-color:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
  position:relative;
}
.search-card::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  padding:1px; pointer-events:none;
  background:linear-gradient(180deg, rgba(242,230,82,.25), transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.6;
}
.search-row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;}
.search-field{flex:1 1 250px; min-width:0;}
.search-field label{
  display:block; font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cream-dim); margin-bottom:9px;
}
.search-field input{
  width:100%; height:52px;
  background:var(--surface-2); border:1px solid var(--line);
  color:var(--cream); font-family:'Poppins',sans-serif; font-size:16px;
  padding:0 15px; border-radius:var(--radius-sm); outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.search-field input::placeholder{color:var(--cream-dimmer);}
.search-field input:focus{border-color:var(--yellow); box-shadow:var(--ring); background:var(--surface-3);}

/* botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:15px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  cursor:pointer; white-space:nowrap; height:52px; padding:0 22px;
  transition:transform .16s var(--ease), background .2s, box-shadow .2s, border-color .2s, color .2s;
}
.btn .ic{width:19px; height:19px; fill:currentColor; flex-shrink:0;}
.btn:active{transform:scale(.975);}
.btn:disabled{opacity:.55; cursor:default; transform:none;}
.btn--primary{background:var(--yellow); color:var(--ink); box-shadow:0 10px 24px -12px rgba(242,230,82,.6);}
.btn--primary:hover:not(:disabled){background:var(--yellow-2); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(242,230,82,.7);}
.btn--ghost{background:transparent; color:var(--cream); border-color:var(--line);}
.btn--ghost:hover:not(:disabled){border-color:var(--yellow); color:var(--yellow); background:rgba(242,230,82,.07);}
.btn--ghost .ic{fill:var(--yellow);}
.btn--solid{background:var(--cream); color:var(--ink); box-shadow:var(--shadow-soft);}
.btn--solid:hover{transform:translateY(-2px); background:#fff;}

.search-secondary{display:flex; align-items:center; gap:16px; margin-top:14px; flex-wrap:wrap;}
.search-secondary .btn--ghost{height:46px; padding:0 16px; font-size:14px;}
.hint{font-size:12.5px; color:var(--cream-dimmer); font-family:'JetBrains Mono',monospace; transition:opacity .3s;}

/* ---------- radar / localizando ---------- */
.radar-zone{display:none; align-items:center; gap:18px; padding:26px 4px 6px;}
.radar-zone.active{display:flex; animation:fade .4s var(--ease);}
.radar{position:relative; width:46px; height:46px; flex-shrink:0;}
.radar .dot-core{position:absolute; inset:0; margin:auto; width:10px; height:10px; border-radius:50%; background:var(--yellow); box-shadow:0 0 12px rgba(242,230,82,.8);}
.radar .ring{position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--yellow); opacity:0; animation:pulse 1.8s ease-out infinite;}
.radar .ring:nth-child(2){animation-delay:.6s;}
.radar .ring:nth-child(3){animation-delay:1.2s;}
@keyframes pulse{0%{transform:scale(.3); opacity:.85;} 100%{transform:scale(2.6); opacity:0;}}
.radar-text{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--cream-dim); letter-spacing:.03em;}

/* ---------- mensagem "não encontrado" ---------- */
.empty-note{
  display:none; margin-top:16px; padding:12px 16px;
  font-size:13.5px; color:#F4C8A0;
  background:rgba(216,154,60,.10); border:1px solid rgba(216,154,60,.3);
  border-radius:var(--radius-sm); font-family:'Poppins',sans-serif;
}
.empty-note.active{display:block; animation:fade .35s var(--ease);}

/* ============================ RESULTADO ============================ */
.result{display:none; margin-top:22px;}
.result.active{display:block; animation:fadeUp .5s var(--ease);}
.result-label{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.pin-dot{width:9px; height:9px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(242,230,82,.18); animation:beat 1.8s ease-in-out infinite;}
@keyframes beat{0%,100%{box-shadow:0 0 0 4px rgba(242,230,82,.18);}50%{box-shadow:0 0 0 7px rgba(242,230,82,.06);}}
.result-card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft);}
.result-body{padding:22px 22px 20px; display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap;}
.result-info{min-width:0; flex:1 1 60%;}
.result-name{font-size:clamp(20px,3.4vw,26px); font-weight:600; color:var(--cream); line-height:1.15;}
.result-addr{color:var(--cream-dim); font-size:14.5px; margin-top:7px; max-width:42ch; font-weight:300;}
.result-hours{display:flex; align-items:center; gap:7px; margin-top:9px; color:var(--yellow); font-size:13.5px; font-weight:500;}
.result-hours .ic-sm{width:15px; height:15px; fill:var(--yellow); flex-shrink:0;}
.result-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.btn-line{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--yellow); color:var(--yellow);
  font-weight:600; font-size:13.5px; padding:10px 16px; border-radius:10px;
  transition:background .2s, color .2s, transform .16s var(--ease);
}
.btn-line .ic-sm{width:15px; height:15px; fill:currentColor;}
.btn-line:hover{background:var(--yellow); color:var(--ink); transform:translateY(-1px);}
.result-distance{text-align:right; flex-shrink:0;}
.result-distance .km{font-size:30px; font-weight:600; color:var(--yellow); line-height:1;}
.result-distance .km-label{font-size:11px; color:var(--cream-dim); letter-spacing:.06em; margin-top:3px;}
#map{height:250px; width:100%; background:var(--surface-3); filter:saturate(.92) brightness(.96);}
.result-footnote{margin-top:11px; font-size:12px; color:var(--cream-dimmer); font-family:'JetBrains Mono',monospace; line-height:1.5;}

/* marcadores do mapa (Leaflet divIcon) */
.pin{border-radius:50%; border:2px solid var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.5);}
.pin-unit{width:16px; height:16px; background:var(--yellow);}
.pin-user{width:13px; height:13px; background:var(--cream);}

/* ============================ COMO FUNCIONA ============================ */
.how{padding:92px 0 20px; border-top:1px solid var(--line); margin-top:78px;}
.how h2{font-family:'Fraunces',serif; font-size:clamp(26px,4.4vw,38px); font-weight:700; letter-spacing:-.01em; max-width:18ch; margin:6px 0 46px; color:var(--cream);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;}
.step:hover{transform:translateY(-4px); border-color:rgba(242,230,82,.4); box-shadow:var(--shadow-soft);}
.step .num{color:var(--yellow); font-size:13px; letter-spacing:.1em; margin-bottom:14px;}
.step-title{font-size:19px; font-weight:600; color:var(--cream); margin-bottom:8px; line-height:1.2;}
.step p{font-size:14.5px; color:var(--cream-dim); font-weight:300;}

/* faixa B2B */
.b2b-strip{
  margin-top:56px; position:relative; overflow:hidden;
  background:linear-gradient(120deg,#3A2113,#54301A 55%,#6E3F1F);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap; box-shadow:var(--shadow);
}
.b2b-strip::after{
  content:""; position:absolute; right:-40px; top:-60px; width:260px; height:260px;
  background:radial-gradient(circle,rgba(242,230,82,.18),transparent 68%); pointer-events:none;
}
.b2b-txt{max-width:44ch; position:relative; z-index:1;}
.b2b-txt h3{font-family:'Fraunces',serif; font-size:clamp(19px,3vw,23px); font-weight:600; color:var(--cream); margin-bottom:8px; line-height:1.2;}
.b2b-txt p{font-size:14px; color:#EAD9C6; font-weight:300;}
.b2b-strip .btn--solid{position:relative; z-index:1;}

/* ============================ RODAPÉ ============================ */
footer{
  border-top:1px solid var(--line); margin-top:80px; padding:34px 24px 56px;
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
}
.foot-logo{height:66px; width:auto; opacity:.95;}
.foot-cols{display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right;}
.foot-link{font-size:13.5px; color:var(--yellow); font-weight:500; transition:color .2s;}
.foot-link:hover{color:var(--yellow-2);}
.foot-mono{font-size:11.5px; color:var(--cream-dimmer);}

/* ============================ ANIMAÇÕES DE ENTRADA ============================ */
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:translateY(0);}}

/* revelar ao rolar (só ativa quando o JS marca <html class="js">) */
.js .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.js .reveal.is-visible{opacity:1; transform:none;}
.js .steps .step{transition:opacity .7s var(--ease), transform .3s var(--ease);}
.js .reveal.is-visible .step:nth-child(2){transition-delay:.08s;}
.js .reveal.is-visible .step:nth-child(3){transition-delay:.16s;}

/* ============================ RESPONSIVO ============================ */
@media (max-width:760px){
  .steps{grid-template-columns:1fr;}
  .how{padding-top:70px; margin-top:60px;}
  .b2b-strip{padding:26px; flex-direction:column; align-items:flex-start;}
  .b2b-strip .btn--solid{width:100%;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .top{padding:16px 18px 4px;}
  .brand-logo{height:50px;}
  .top-link{padding:7px 10px; font-size:12.5px;}
  .hero{padding:34px 0 22px;}
  .search-card{padding:18px;}
  .search-row{gap:10px;}
  .btn--primary{flex:1 1 100%;}
  .search-secondary{gap:10px;}
  .search-secondary .btn--ghost{flex:1 1 100%;}
  .result-body{padding:18px;}
  .result-distance{text-align:left;}
  #map{height:210px;}
  footer{flex-direction:column; align-items:flex-start;}
  .foot-cols{align-items:flex-start; text-align:left;}
}

/* acessibilidade: quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  .js .reveal{opacity:1; transform:none;}
}