/* ==========================================================================
   Cartão Saúde do Bem — Catálogo da rede credenciada
   Compartilhado entre index.html (seção) e catalogo.html (página completa).
   ========================================================================== */

:root {
  --green: #00a82c;
  --green-dark: #008a22;
  --green-darker: #00701b;
  --yellow: #ffd200;
  --dark: #1a1a1a;
  --azul: #16408f;
  --azul-claro: #1f55b8;
  --vinho: #6d1526;
  --vinho-claro: #9c2440;
}

/* ═══════════════════════════════════════════════════════════════════
   CATÁLOGO DA REDE CREDENCIADA (busca + filtros em tempo real)
   ═══════════════════════════════════════════════════════════════════ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.rede { background: #f4faf6; padding: 84px 40px; }
.rede-inner { max-width: 1200px; margin: 0 auto; }

.rede-head {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 38px;
}
.rede-capa {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(16,60,26,.18);
  line-height: 0;
}
.rede-capa img { width: 100%; height: auto; display: block; }

.rede-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1.5px solid var(--green);
  color: var(--green-dark);
  border-radius: 50px;
  padding: 7px 16px;
  font-size: 13px; font-weight: 900;
  letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 16px;
}
.rede-title { font-size: clamp(26px, 4vw, 42px); font-weight: 900; margin-bottom: 14px; line-height: 1.15; }
.rede-sub { font-size: 17px; color: #555; max-width: 620px; margin-bottom: 22px; }
.rede-sub strong { color: var(--green-dark); font-weight: 900; }

.rede-stats { display: flex; gap: 32px; flex-wrap: wrap; }
.rede-stat .n { font-size: 32px; font-weight: 900; color: var(--green); line-height: 1; }
.rede-stat .l { font-size: 13.5px; color: #777; margin-top: 3px; }

/* ── barra de busca ── */
.rede-search {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 26px rgba(16,60,26,.08);
  padding: 22px 24px;
  margin-bottom: 22px;
}
.rede-search-row { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 14px; }

.rede-input-wrap { position: relative; }
.rede-input-wrap svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; fill: #9aa89e; pointer-events: none;
}
.rede-search input,
.rede-search select {
  width: 100%;
  border: 1.5px solid #dbe4de;
  border-radius: 12px;
  padding: 15px 16px;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.rede-search input { padding-left: 48px; }
.rede-search select {
  appearance: none; cursor: pointer; padding-right: 42px;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235c6b60'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 13px center / 21px;
}
.rede-search input:focus, .rede-search select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(0,168,44,.13);
}
.rede-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: #eef3f0; color: #6b7a70; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
}
.rede-clear.show { display: flex; }
.rede-clear:hover { background: #e0e8e3; color: var(--dark); }

/* ── chips de categoria ── */
.rede-chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid #dbe4de;
  background: #fff;
  color: #4a5a50;
  border-radius: 50px;
  padding: 9px 16px;
  font-family: 'Lato', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--green); color: var(--green-dark); }
.chip .c {
  background: #eef3f0; color: #6b7a70;
  border-radius: 20px; padding: 1px 8px;
  font-size: 12px; font-weight: 900;
}
.chip.active {
  background: var(--green); border-color: var(--green); color: #fff;
  box-shadow: 0 4px 12px rgba(0,168,44,.28);
}
.chip.active .c { background: rgba(255,255,255,.26); color: #fff; }

/* ── resultados ── */
.rede-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 26px 0 16px;
  font-size: 15px; color: #667;
}
.rede-meta strong { color: var(--dark); font-weight: 900; }
.rede-reset {
  background: none; border: none; cursor: pointer;
  color: var(--green-dark); font-family: 'Lato', sans-serif;
  font-size: 14px; font-weight: 900;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
}
.rede-reset:hover { background: #e6f4ea; }

.rede-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.rede-card {
  background: #fff;
  border: 1px solid #e4ebe7;
  border-radius: 16px;
  padding: 22px 24px;
  display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.rede-card:hover {
  box-shadow: 0 10px 30px rgba(16,60,26,.1);
  transform: translateY(-3px);
  border-color: #cbe6d3;
}
.rede-card-top { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 13px; }
.rede-card-icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 11px;
  background: #e8f5e9;
  display: flex; align-items: center; justify-content: center;
}
.rede-card-icon svg { width: 21px; height: 21px; fill: var(--green); }
.rede-card-nome { font-family: 'Nunito', sans-serif; font-size: 16.5px; font-weight: 900; line-height: 1.3; }
.rede-card-cat {
  font-size: 11.5px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase;
  color: var(--green); margin-top: 4px;
}
.rede-card-end {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14.2px; color: #5d6b62; line-height: 1.5;
  margin-bottom: 14px;
}
.rede-card-end svg { width: 16px; height: 16px; fill: #9aa89e; flex-shrink: 0; margin-top: 3px; }

.rede-card-tels { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.tel-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid #dbe4de;
  border-radius: 50px;
  padding: 8px 15px;
  font-size: 13.8px; font-weight: 700;
  color: #46564c; text-decoration: none;
  transition: all .18s;
}
.tel-btn:hover { border-color: var(--green); background: #f2fbf4; color: var(--green-dark); }
.tel-btn svg { width: 15px; height: 15px; fill: currentColor; }
/* WhatsApp — botão verde oficial da marca */
.tel-btn.zap {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(37,211,102,.3);
}
.tel-btn.zap:hover {
  background: #1da851;
  border-color: #1da851;
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,211,102,.42);
}
.tel-btn.zap svg { fill: #fff; }

.rede-empty { text-align: center; padding: 60px 20px; color: #667; }
.rede-empty .ico { font-size: 46px; margin-bottom: 14px; }
.rede-empty h3 { font-size: 21px; font-weight: 900; color: var(--dark); margin-bottom: 8px; }

.rede-more { text-align: center; margin-top: 30px; }
.rede-more button {
  background: #fff;
  border: 2px solid var(--green);
  color: var(--green-dark);
  border-radius: 50px;
  padding: 15px 38px;
  font-family: 'Lato', sans-serif;
  font-size: 15.5px; font-weight: 900;
  cursor: pointer;
  transition: all .2s;
}
.rede-more button:hover { background: var(--green); color: #fff; transform: translateY(-2px); }

.rede-note { text-align: center; font-size: 13.5px; color: #8b968f; margin-top: 22px; }

/* ── faixa de logos da rede ── */
.logos-rede { background: #fff; padding: 56px 40px 60px; overflow: hidden; }
.logos-rede h2 {
  text-align: center; font-size: clamp(20px, 3vw, 28px); font-weight: 900;
  margin-bottom: 8px;
}
.logos-rede p { text-align: center; color: #777; font-size: 15px; margin-bottom: 34px; }
.logos-track {
  display: flex; gap: 20px; width: max-content;
  animation: desliza 46s linear infinite;
}
.logos-viewport { position: relative; }
.logos-viewport::before, .logos-viewport::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.logos-viewport::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.logos-viewport::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.logos-viewport:hover .logos-track { animation-play-state: paused; }
@keyframes desliza { to { transform: translateX(-50%); } }
.logo-chip {
  width: 148px; height: 92px; flex-shrink: 0;
  border: 1px solid #e4ebe7; border-radius: 14px;
  background: #fff; padding: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .2s, transform .2s;
}
.logo-chip:hover { box-shadow: 0 8px 22px rgba(16,60,26,.1); transform: translateY(-3px); }
.logo-chip img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .logos-track { animation: none; } }

/* ── faixa promocional (banners do site) ── */
.faixa-promo { padding: 0; line-height: 0; background: #fff; }
.faixa-promo img { width: 100%; height: auto; display: block; }

.telemedicina { background: #fff; padding: 70px 40px; }
.telemedicina-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 44px; align-items: center;
}
.telemedicina img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 12px 34px rgba(16,60,26,.14); }
.telemedicina h2 { font-size: clamp(24px, 3.6vw, 36px); font-weight: 900; margin-bottom: 14px; }
.telemedicina p { font-size: 16.5px; color: #555; margin-bottom: 20px; }
.telemedicina ul { list-style: none; display: grid; gap: 11px; margin-bottom: 26px; }
.telemedicina li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; color: #555; }
.telemedicina li span { color: var(--green); font-weight: 900; }

/* ── responsivo do catálogo ── */
@media (max-width: 900px) {
  .rede { padding: 62px 20px; }
  .rede-head { grid-template-columns: 1fr; gap: 26px; }
  .rede-capa { max-width: 260px; margin: 0 auto; }
  .rede-search-row { grid-template-columns: 1fr; }
  .telemedicina { padding: 56px 20px; }
  .telemedicina-inner { grid-template-columns: 1fr; gap: 30px; }
  .logos-rede { padding: 46px 20px 50px; }
}
@media (max-width: 560px) {
  .rede { padding: 48px 14px; }
  .rede-search { padding: 16px; border-radius: 14px; }
  .rede-grid { grid-template-columns: 1fr; gap: 14px; }
  .rede-card { padding: 18px 18px; }
  .rede-stats { gap: 22px; }
  .rede-stat .n { font-size: 26px; }
  .rede-chips { gap: 7px; }
  .chip { font-size: 13px; padding: 8px 13px; }
  .logo-chip { width: 118px; height: 76px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROXIMIDADE — geolocalização, distância e rota
   ═══════════════════════════════════════════════════════════════════ */
.rede-geo { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

.btn-geo {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--green); color: #fff;
  border: none; border-radius: 50px;
  padding: 12px 22px;
  font-family: 'Lato', sans-serif;
  font-size: 14.5px; font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,168,44,.28);
  transition: background .18s, transform .15s, box-shadow .18s;
}
.btn-geo:hover { background: var(--green-dark); transform: translateY(-2px); }
.btn-geo:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-geo svg { width: 17px; height: 17px; fill: currentColor; }
.btn-geo.ativo { background: var(--yellow); color: var(--dark); box-shadow: 0 4px 14px rgba(255,210,0,.4); }

.geo-status {
  font-size: 13.5px; color: #667; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
}
.geo-status.ok  { color: var(--green-dark); }
.geo-status.err { color: #d33; }
.geo-spinner {
  width: 15px; height: 15px;
  border: 2px solid #dbe4de; border-top-color: var(--green);
  border-radius: 50%; animation: geogira .7s linear infinite;
}
@keyframes geogira { to { transform: rotate(360deg); } }

/* selo de distância no card */
.rede-card-dist {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eaf4ff; color: #14509b;
  border: 1px solid #cfe2fb;
  border-radius: 50px;
  padding: 4px 11px;
  font-size: 12.5px; font-weight: 900;
  margin-top: 7px;
  white-space: nowrap;
}
.rede-card-dist svg { width: 13px; height: 13px; fill: currentColor; }
.rede-card-dist.aprox { background: #fff6e0; border-color: #ffe4a3; color: #8a6300; }

.tel-btn.rota { border-color: #cfe2fb; background: #f2f8ff; color: #14509b; }
.tel-btn.rota:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   PARCEIRO EM DESTAQUE — card azul com estrela dourada
   ═══════════════════════════════════════════════════════════════════ */
.rede-card.destaque {
  color: #fff;
}
/* BR — azul */
.rede-card.destaque.azul {
  background: linear-gradient(150deg, var(--azul) 0%, var(--azul-claro) 100%);
  border-color: var(--azul);
  box-shadow: 0 8px 26px rgba(22,64,143,.28);
}
.rede-card.destaque.azul:hover { box-shadow: 0 14px 38px rgba(22,64,143,.36); border-color: var(--azul-claro); }

/* Dediq — vinho */
.rede-card.destaque.vinho {
  background: linear-gradient(150deg, var(--vinho) 0%, var(--vinho-claro) 100%);
  border-color: var(--vinho);
  box-shadow: 0 8px 26px rgba(109,21,38,.3);
}
.rede-card.destaque.vinho:hover { box-shadow: 0 14px 38px rgba(109,21,38,.38); border-color: var(--vinho-claro); }
.rede-card.destaque.vinho .tel-btn:hover { color: var(--vinho); }
.rede-card.destaque .rede-card-nome { color: #fff; }
.rede-card.destaque .rede-card-cat  { color: var(--yellow); }
.rede-card.destaque .rede-card-end  { color: rgba(255,255,255,.9); }
.rede-card.destaque .rede-card-end svg { fill: rgba(255,255,255,.65); }

.rede-card.destaque .rede-card-icon { background: rgba(255,255,255,.16); }
.rede-card.destaque .rede-card-icon svg { fill: var(--yellow); }

/* logo da marca — retangular e maior, os logos são horizontais */
.rede-card-icon.logo {
  width: 84px; height: 56px;
  border-radius: 10px;
  background: #fff;
  padding: 6px 8px;
  overflow: hidden;
}
.rede-card-icon.logo img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.rede-card.destaque .rede-card-icon.logo { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.16); }

.rede-card.destaque .tel-btn {
  border-color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.rede-card.destaque .tel-btn:hover { background: #fff; color: var(--azul); border-color: #fff; }
.rede-card.destaque .tel-btn.zap { background: #25d366; border-color: #25d366; color: #fff; }
.rede-card.destaque .tel-btn.zap:hover { background: #1da851; border-color: #1da851; color: #fff; }
.rede-card.destaque .rede-card-dist {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.32);
  color: #fff;
}

/* estrela dourada */
.estrela {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  margin-left: auto;
}
.estrela svg {
  width: 24px; height: 24px;
  fill: var(--yellow);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
}
.selo-destaque {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--yellow); color: var(--dark);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 900;
  letter-spacing: .7px; text-transform: uppercase;
  margin-bottom: 12px;
}
.selo-destaque svg { width: 13px; height: 13px; fill: currentColor; }

/* ordenação */
.rede-ordem { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: #667; }
.rede-ordem select {
  border: 1.5px solid #dbe4de; border-radius: 10px;
  padding: 8px 34px 8px 12px;
  font-family: 'Lato', sans-serif; font-size: 14px;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235c6b60'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 9px center / 18px;
  appearance: none; cursor: pointer;
}
.rede-ordem select:focus { outline: none; border-color: var(--green); }

@media (max-width: 560px) {
  .rede-geo { width: 100%; }
  .btn-geo { width: 100%; justify-content: center; }
  .rede-ordem { width: 100%; }
  .rede-ordem select { flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   PARCERIA ALLOYAL — clube de vantagens nacional
   ═══════════════════════════════════════════════════════════════════ */
.alloyal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  background: linear-gradient(135deg, #0f2f6b 0%, var(--azul) 55%, #1f55b8 100%);
  border-radius: 18px;
  padding: 28px 32px;
  margin: 26px 0 0;
  color: #fff;
  box-shadow: 0 12px 34px rgba(15,47,107,.26);
  position: relative;
  overflow: hidden;
}
.alloyal::after {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.alloyal-icon {
  width: 62px; height: 62px; flex-shrink: 0;
  border-radius: 16px;
  background: var(--yellow);
  display: flex; align-items: center; justify-content: center;
}
.alloyal-icon svg { width: 30px; height: 30px; fill: #0f2f6b; }

.alloyal-txt { position: relative; z-index: 1; }
.alloyal-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 11px; font-weight: 900;
  letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 10px;
}
.alloyal h3 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(19px, 2.4vw, 25px); font-weight: 900;
  margin-bottom: 8px; line-height: 1.25;
}
.alloyal p { font-size: 15px; color: rgba(255,255,255,.88); line-height: 1.55; }
.alloyal strong { color: var(--yellow); font-weight: 900; }

.alloyal-nums { display: flex; gap: 30px; flex-shrink: 0; position: relative; z-index: 1; }
.alloyal-num .n {
  font-family: 'Nunito', sans-serif;
  font-size: 30px; font-weight: 900; color: var(--yellow); line-height: 1;
}
.alloyal-num .l { font-size: 12.5px; color: rgba(255,255,255,.82); margin-top: 4px; }

@media (max-width: 900px) {
  .alloyal { grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 24px; }
  .alloyal-nums { grid-column: 1 / -1; gap: 26px; }
}
@media (max-width: 560px) {
  .alloyal { grid-template-columns: 1fr; text-align: left; padding: 22px 20px; }
  .alloyal-icon { width: 52px; height: 52px; }
  .alloyal-nums { gap: 22px; }
  .alloyal-num .n { font-size: 25px; }
}