/* -----------------------------------------------------------------------------
 * DGJC PRODUTOS DIGITAIS LTDA  -  dgjc.com.br
 * Arquivo....: assets/vendor/page-cidade.css
 * Projeto....: Chef Pequenas Patas - landing de cidade (/onde-encontrar/{cidade}/)
 * Criado em..: 2026-08-31 (America/Sao_Paulo)
 * Proposito..: Layout proprio da landing de cidade, na identidade do site
 *              (marrom #5E240D, cream #F5F3F0, laranja #F08046, amarelo #FED16E,
 *              verde-oliva #A6B85A). So o header/footer usam o CSS do Elementor.
 * -------------------------------------------------------------------------- */

.cpp{
  --brown:#5E240D; --cream:#F5F3F0; --orange:#F08046; --yellow:#FED16E;
  --olive:#A6B85A; --ink:#3a2a12; --line:#e6ddd6; --muted:#7a5c48;
  font-family:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--brown);
}
.cpp *{box-sizing:border-box}
.cpp-wrap{max-width:1108px;margin:0 auto;padding-left:20px;padding-right:20px}

/* ---- hero ---- */
.cpp-hero{padding:26px 0 6px}
.cpp-crumb{font-size:14px;font-weight:800;margin:0}
.cpp-crumb a{color:var(--orange);text-decoration:none}
.cpp-crumb a:hover{text-decoration:underline}
.cpp-h1{
  font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;
  color:var(--brown);font-size:clamp(28px,4.2vw,44px);line-height:1.08;
  margin:14px 0 16px;
}
.cpp-intro{max-width:760px;font-size:17px;line-height:1.65}
.cpp-intro p{margin:0 0 12px}
.cpp-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--yellow);
  color:var(--ink);font-weight:800;border-radius:16px;padding:11px 18px;margin:8px 0 2px;
}
.cpp-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:18px 0 4px}

/* botao "chunky" - mesmo padrao dos botoes do site */
.cpp-btn{
  display:inline-block;font-weight:800;border-radius:22px;padding:13px 24px 11px;
  text-decoration:none;text-align:center;transition:transform .06s ease;
}
.cpp-btn:active{transform:translateY(2px)}
.cpp-btn--wa{background:var(--olive);color:var(--ink);border:1px solid #86994a;border-bottom-width:5px}
.cpp-btn--wa:hover{background:#9fb352}
.cpp-btn--ghost{background:#fff;color:var(--brown);border:1px solid var(--line);border-bottom-width:5px}
.cpp-btn--ghost:hover{background:var(--cream)}
.cpp-link{color:var(--orange);font-weight:800;text-decoration:none}
.cpp-link:hover{text-decoration:underline}

/* ---- secoes ---- */
.cpp-sec{padding:36px 0}
.cpp-sec-h{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.cpp-sec-h svg{flex:0 0 auto}
.cpp-sec-h h2{
  font-family:"Lilita One",sans-serif;font-weight:400;text-transform:uppercase;
  color:var(--brown);font-size:clamp(20px,2.8vw,29px);line-height:1.1;margin:0;
}
.cpp-band{background:#efe9e3}

/* ---- grid de pontos ---- */
.cpp-pts{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px}
.cpp-pt{
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 18px;
  display:flex;flex-direction:column;gap:8px;
}
.cpp-pt__pin{color:var(--orange);line-height:0}
.cpp-pt__city{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.cpp-pt__name{font-family:"Lilita One",sans-serif;font-weight:400;font-size:18px;line-height:1.15;margin:0;color:var(--brown)}
.cpp-tags{display:flex;flex-wrap:wrap;gap:6px}
.cpp-tag{background:var(--yellow);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.04em;border-radius:10px;padding:4px 9px 3px}
.cpp-pt__addr{font-size:13.5px;line-height:1.5;color:var(--muted);margin:2px 0 0}
.cpp-pt__tel{font-weight:800;font-size:15px;margin:0}
.cpp-pt__sp{flex:1 1 auto}
.cpp-pt__acts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.cpp-pt__acts .cpp-btn{padding:10px 14px 8px;font-size:14px;border-bottom-width:4px}

/* ---- como funciona ---- */
.cpp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cpp-step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 18px;text-align:center}
.cpp-step__n{
  width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;
  font-family:"Lilita One",sans-serif;font-size:20px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;padding-top:2px;
}
.cpp-step h3{font-family:"Lilita One",sans-serif;font-weight:400;font-size:16px;margin:0 0 6px;text-transform:uppercase;color:var(--brown)}
.cpp-step p{font-size:14px;line-height:1.55;margin:0;color:var(--muted)}

/* ---- faq ---- */
.cpp-faq{max-width:820px}
.cpp-faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2px 18px;margin:0 0 10px}
.cpp-faq summary{font-weight:800;padding:15px 26px 15px 0;cursor:pointer;list-style:none;font-size:16px;position:relative}
.cpp-faq summary::-webkit-details-marker{display:none}
.cpp-faq summary::after{content:"+";position:absolute;right:0;top:12px;color:var(--orange);font-size:24px;line-height:1}
.cpp-faq details[open] summary::after{content:"\2013"}
.cpp-faq details p{margin:0 0 16px;line-height:1.6;color:#5f4636}

/* ---- outras cidades ---- */
.cpp-cities{display:flex;flex-wrap:wrap;gap:8px}
.cpp-cities a{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px 13px;
  font-size:14px;font-weight:800;color:var(--brown);text-decoration:none;
}
.cpp-cities a:hover{background:var(--yellow)}

@media(max-width:720px){
  .cpp-steps{grid-template-columns:1fr}
}