/* =============================================================
   DRA. GISELE PONTIN — v2 (overrides do redesign; mesma base do Roberto v2)
   Carregar DEPOIS de components.css.
   ============================================================= */

/* ---- Timeline "Como funciona" agora com 4 passos ---- */
.jornada__track { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 880px) {
  .jornada__track { grid-template-columns: 1fr !important; }
}

/* ---- Timeline: fundo verde, conteúdo branco ---- */
.jornada { background: var(--primary) !important; }
.jornada .s-head h2 { color: #fff !important; }
.jornada .s-head h2 em { color: #fff !important; }
.jornada .s-head p { color: rgba(255,255,255,.82) !important; }
.jornada__num-big { color: #fff !important; }
.jornada__num-unit { color: rgba(255,255,255,.6) !important; }
.jornada__title { color: #fff !important; }
.jornada__desc { color: rgba(255,255,255,.78) !important; }
/* linha e marcadores */
.jornada__line { background: rgba(255,255,255,.22) !important; }
.jornada__line-fill { background: #fff !important; }
.jornada__marker {
  background: transparent !important;
  border-color: rgba(255,255,255,.45) !important;
  color: #fff !important;
}
.jornada__step.is-active .jornada__marker {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--primary) !important;
}
.jornada__step.is-active .jornada__num-big { color: #fff !important; }
.jornada__ico { color: inherit !important; }
.jornada__avatar { background: #fff !important; color: var(--primary) !important; }

/* ---- Cirurgias: grid 3 colunas, bolinha "+", cards compactos ---- */
.quadros__grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  align-items: stretch;
}
@media (max-width: 880px) { .quadros__grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px) { .quadros__grid { grid-template-columns: 1fr !important; } }

/* esconde o "Saber mais →" antigo, se sobrar em algum lugar */
.quadros__more { display: none !important; }

/* card compacto */
.quadros__card {
  position: relative;
  padding: 28px 24px !important;
  gap: 14px !important;
  min-height: 0 !important;
}
.quadros__card h4 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  margin: 0 !important;
}
.quadros__card p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.quadros__icon { margin-bottom: 4px !important; }

/* bolinha de + no canto superior direito */
.quadros__plus {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--primary);
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  z-index: 2;
}
.quadros__card:hover .quadros__plus {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: rotate(90deg);
}

/* ---- Localização: seção de mapa (no lugar das especialidades) ---- */
.loc2 { padding: var(--section-pad) 0; }
.loc2__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: 28px; align-items: stretch; margin-top: 8px;
}
.loc2__info {
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 40px;
}
.loc2__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.loc2__addr { font-size: 17px; line-height: 1.7; color: var(--ink-2); text-wrap: balance; }
.loc2__info .btn { align-self: flex-start; }
.loc2__map {
  position: relative; overflow: hidden; min-height: 360px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.loc2__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.loc2__map::after { content: ''; position: absolute; inset: 0; background: var(--primary); opacity: .14; mix-blend-mode: multiply; pointer-events: none; }
@media (max-width: 880px) { .loc2__grid { grid-template-columns: 1fr; } .loc2__map { min-height: 300px; } }

/* ---- Localização: fundo verde, conteúdo branco (igual à timeline) ---- */
.loc2 { background: var(--primary) !important; }
.loc2 .s-head h2 { color: #fff !important; }
.loc2 .s-head h2 em { color: #fff !important; }
.loc2 .s-head p { color: rgba(255,255,255,.82) !important; }
/* card do endereço fica branco sólido sobre o verde */
.loc2__info {
  background: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
}
.loc2__map { border-color: rgba(255,255,255,.24) !important; }

/* ---- Foto do Sobre: sem moldura/borda em volta ---- */
.about__photo { border: none !important; outline: none !important; }
.about__photo::before,
.about__photo::after { display: none !important; }

/* ---- FAQ: linhas mais finas e fracas ---- */
.faq__item { border-bottom-color: rgba(26,24,22,.10) !important; }
.faq__item:first-child { border-top-color: rgba(26,24,22,.10) !important; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  /* foto do doutor no hero: imagem inteira, sem corte/zoom */
  .hero__photo {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
  }
  .hero__img {
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
  /* lista de programas: cabe em uma linha no celular */
  .programa__list li { font-size: 15px; gap: 9px; }
  /* oculta o texto introdutório dos programas no celular */
  .programas__intro { display: none !important; }
  /* oculta o texto introdutório da timeline no celular */
  .jornada__intro { display: none !important; }
  /* oculta o botão "Falar com o consultório" dos depoimentos no celular */
  .depo2__cta { display: none !important; }
  /* aproxima o título dos depoimentos do card no celular */
  .depo2__inner { gap: 8px !important; padding-top: 16px !important; padding-bottom: 24px !important; }
  .depo2__left { gap: 8px !important; }
  /* Localização: título centralizado e sem descrição no celular */
  .loc2 .s-head,
  .loc2 .s-head h2 { text-align: center !important; }
  .loc2 .s-head p { display: none !important; }
  /* oculta o botão "Falar com o consultório" do FAQ no celular */
  .faq__cta { display: none !important; }

  /* Stats: carrossel marquee (roda sozinho) com linhas separando */
  .stats { overflow: hidden; padding-top: 28px !important; padding-bottom: 28px !important; }
  .stats > .container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }
  .stats__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    gap: 0 !important;
    border: 0 !important; /* remove a moldura tracejada (linhas de cima/baixo) */
  }
  .stats__grid.stats__grid--marquee { animation: stats-marquee 26s linear infinite; }
  /* linha separando cada item (vence o media query de 880px) */
  .stats__item,
  .stats__item:nth-child(2n),
  .stats__item:last-child {
    flex: 0 0 auto !important;
    width: 64vw !important;
    max-width: 270px !important;
    box-sizing: border-box;
    padding: 4px 26px !important;
    border-right: 1px dashed rgba(14,40,56,.18) !important;
    border-bottom: 0 !important;
  }
}
@keyframes stats-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}