/* ==========================================================================
   LANDING HÍBRIDA (templates/cidades/lp_hibrida.html)
   Corpo de landing dentro do layout do site. Tudo escopado em .hib para não
   tocar header, menu de categorias, cards de produto e footer do site.
   Usa os tokens de style.css (--pink-*, --gold-*, --ink, --line...), ao
   contrário de lp-cidade.css, que redefine as cores globais e só serve para
   a landing pura de Campinas.
   ========================================================================== */

.hib { color: var(--ink); }
.hib img { max-width: 100%; height: auto; }

/* ---------- tipografia ---------- */
.hib-h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.08; letter-spacing: -.02em; font-weight: 900;
  margin: 0 0 14px; color: var(--white);
}
.hib-h2 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.15; letter-spacing: -.01em; font-weight: 800;
  margin: 0 0 10px; color: var(--ink);
}
.hib-h3 { font-size: 1.05rem; font-weight: 800; margin: 22px 0 10px; }
.hib-head { max-width: 720px; margin-bottom: 22px; }
.hib-head p { color: var(--muted); margin: 0; }
.hib-note { color: var(--muted); font-size: .92rem; margin: 14px 0 0; }
.hib-center { text-align: center; margin-top: 24px; }

/* ---------- seções ---------- */
.hib-section { padding: 48px 0; }
.hib-section--alt { background: var(--bg-alt); }

/* ---------- botões ---------- */
.hib-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 20px; border-radius: 999px;
  font-weight: 800; text-decoration: none; line-height: 1.1;
}
.hib-btn--lg { min-height: 54px; padding: 14px 24px; font-size: 1.02rem; }
.hib-btn--wa { background: var(--green-wa); color: #06361a; }
.hib-btn--wa:hover { background: #1ebe5b; color: #06361a; }

/* ---------- hero ---------- */
.hib-hero {
  background:
    radial-gradient(900px 420px at 90% -10%, rgba(255, 108, 182, .35), transparent 60%),
    linear-gradient(135deg, var(--pink-900), var(--pink-700));
  color: var(--white);
  padding: 28px 0 40px;
}
.hib-hero__grid { display: grid; gap: 24px; align-items: center; }
.hib-crumbs { font-size: .85rem; opacity: .85; margin-bottom: 14px; }
.hib-crumbs a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.hib-kicker {
  display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.hib-lead { font-size: 1.08rem; line-height: 1.6; margin: 0 0 20px; color: #fde6f1; max-width: 640px; }
.hib-lead strong { color: var(--white); }
.hib-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.hib-trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .92rem; }
.hib-trust li { display: flex; align-items: center; gap: 8px; }
.hib-trust .ic { color: var(--gold-500); flex: none; }
.hib-hero__visual { margin: 0; justify-self: center; max-width: 360px; }
.hib-hero__visual img { border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }

/* ---------- como comprar ---------- */
.hib-passos { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.hib-passo {
  position: relative; padding: 20px 20px 18px 72px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.hib-passo__num {
  position: absolute; left: 20px; top: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pink-500); color: var(--white); font-weight: 900;
}
.hib-passo h3 { margin: 0 0 6px; font-size: 1.05rem; }
.hib-passo p { margin: 0; color: var(--ink-2); }

/* ---------- categorias ---------- */
.hib-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hib-cat {
  display: flex; align-items: center; gap: 10px; min-height: 60px;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--white); border: 1px solid var(--line);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.hib-cat:hover { border-color: var(--pink-500); color: var(--pink-700); }
.hib-cat img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.hib-cat__ph {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--pink-100); color: var(--pink-700); font-weight: 900;
}

/* ---------- entrega ---------- */
.hib-entrega { display: grid; gap: 24px; }
.hib-entrega__destaque { display: flex; gap: 8px; align-items: flex-start; font-size: 1.05rem; margin: 6px 0 8px; }
.hib-entrega__destaque .ic { color: var(--pink-500); flex: none; margin-top: 2px; }
.hib-facts { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.hib-facts li { display: flex; gap: 10px; align-items: flex-start; }
.hib-facts .ic { color: var(--pink-500); flex: none; margin-top: 3px; }
.hib-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hib-chips li {
  padding: 6px 12px; border-radius: 999px; font-size: .88rem;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-2);
}
.hib-entrega__calc {
  align-self: start; padding: 20px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.hib-entrega__calc .hib-btn { width: 100%; margin-top: 14px; }

/* ---------- equipe ---------- */
.hib-equipe { display: grid; gap: 14px; }
.hib-card {
  padding: 20px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
}
.hib-card .ic { color: var(--pink-500); }
.hib-card h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.hib-card p { margin: 0; color: var(--ink-2); }

/* ---------- depoimentos ---------- */
.hib-depos { display: grid; gap: 14px; }
.hib-depo {
  margin: 0; padding: 18px 20px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
}
.hib-depo__stars { color: var(--gold-500); letter-spacing: 2px; }
.hib-depo p { margin: 8px 0; color: var(--ink-2); }
.hib-depo footer { font-weight: 700; font-size: .9rem; }

/* ---------- marcas ---------- */
.hib-marcas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hib-marca { text-align: center; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); }
.hib-marca img { width: 88px; height: 88px; object-fit: contain; margin: 0 auto; display: block; }
.hib-marca h3 { margin: 10px 0 4px; font-size: 1rem; }
.hib-marca p { margin: 0; color: var(--muted); font-size: .88rem; }

/* ---------- FAQ ---------- */
.hib-faq { display: grid; gap: 22px; }
.hib-faq__aside p { color: var(--muted); }
.hib-faq__list { display: grid; gap: 10px; }
.hib-faq__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.hib-faq__item summary {
  list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 700;
  display: flex; justify-content: space-between; gap: 12px; min-height: 48px;
}
.hib-faq__item summary::-webkit-details-marker { display: none; }
.hib-faq__item summary span { color: var(--pink-500); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.hib-faq__item[open] summary span { transform: rotate(45deg); }
.hib-faq__a { padding: 0 18px 16px; color: var(--ink-2); }

/* ---------- editorial ---------- */
.hib-editorial { max-width: 820px; }
.hib-rich p { color: var(--ink-2); line-height: 1.7; }

/* ---------- CTA final ---------- */
.hib-final { background: linear-gradient(135deg, var(--pink-900), var(--pink-700)); color: var(--white); padding: 48px 0; }
.hib-final__inner { text-align: center; }
.hib-final .hib-h2 { color: var(--white); }
.hib-final p { color: #fde6f1; max-width: 620px; margin: 0 auto 20px; }
.hib-final .hib-hero__ctas { justify-content: center; margin-bottom: 0; }

/* ---------- celular: título e botões acima da dobra ----------
   O banner e o trilho de navegação ocupavam uma tela inteira antes dos
   produtos. No celular o banner some (a promessa já está no texto) e o
   trilho fica só no desktop — o schema BreadcrumbList continua na página. */
@media (max-width: 767px) {
  .hib-hero__visual, .hib-crumbs { display: none; }
  .hib-hero { padding: 20px 0 28px; }
  .hib-kicker { font-size: .78rem; }
  .hib-hero__ctas .hib-btn { flex: 1 1 100%; }
}

/* ---------- desktop ---------- */
@media (min-width: 768px) {
  .hib-hero { padding: 36px 0 56px; }
  .hib-hero__grid { grid-template-columns: 1.4fr 1fr; gap: 40px; }
  .hib-trust { grid-template-columns: 1fr 1fr; }
  .hib-passos { grid-template-columns: repeat(3, 1fr); }
  .hib-cats { grid-template-columns: repeat(3, 1fr); }
  .hib-entrega { grid-template-columns: 1.4fr 1fr; gap: 36px; }
  .hib-equipe { grid-template-columns: repeat(3, 1fr); }
  .hib-depos { grid-template-columns: repeat(3, 1fr); }
  .hib-marcas { grid-template-columns: repeat(4, 1fr); }
  .hib-faq { grid-template-columns: 1fr 2fr; gap: 36px; }
  .hib-section { padding: 64px 0; }
}
@media (min-width: 1024px) {
  .hib-cats { grid-template-columns: repeat(4, 1fr); }
}