/* =============================================================================
   Rubi Odonto :: home.css (só a página inicial)
   Topo com a recepção sob o véu vinho, números, a dentista, diferenciais,
   tratamentos, a clínica em fotos, FAQ em duas colunas e artigos.
   Cards, depoimentos e a faixa de agendamento são de base.css.
   ========================================================================== */

/* ===== Topo ===== */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(6rem, 11vw, 8.5rem);
  overflow: hidden;
  color: rgba(255, 255, 255, .9);
}

/* A foto da recepção cobre o topo inteiro, atrás do conteúdo */
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Véu vinho: escuro à esquerda (texto legível), deixa a foto aparecer à direita */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(46, 9, 16, .94) 0%, rgba(74, 17, 26, .86) 42%, rgba(122, 0, 42, .55) 75%, rgba(163, 13, 60, .35) 100%);
}

@media (max-width: 991.98px) {
  .hero::before {
    background: linear-gradient(180deg, rgba(46, 9, 16, .9) 0%, rgba(74, 17, 26, .85) 60%, rgba(122, 0, 42, .8) 100%);
  }
}

.hero__titulo {
  margin-bottom: 1.25rem;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: #fff;
}

.hero__titulo em {
  display: block;
  font-style: normal;
  color: var(--rbo-rosa);
}

/* A linha de lugar dentro do h1: a palavra-chave local, sem roubar o título */
.hero__local {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
  font-family: var(--rbo-fonte-texto);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--rbo-rosa);
}

.hero__texto {
  max-width: 54ch;
  margin-bottom: 2rem;
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
}

.hero__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 2rem;
}

.hero__checks {
  display: grid;
  gap: .6rem;
  margin: 0;
  font-size: 1rem;
}

.hero__checks li {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.hero__checks .icone {
  color: var(--rbo-rosa);
}

/* Cartão de vidro com a Dra. Keith */
.hero__cartao {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.25rem;
  max-width: 440px;
  margin-left: auto;
  padding: 1.75rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 24px;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}

.hero__rosto {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 3px solid var(--rbo-rosa);
  object-fit: cover;
}

.hero__cartao p {
  margin: 0;
}

.hero__cartao-nome {
  font-family: var(--rbo-fonte-titulo);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
}

.hero__cartao-cargo {
  font-size: .95rem;
}

.hero__cartao .hero__cartao-cro {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  font-size: .85rem;
  color: var(--rbo-rosa);
}

.hero__cartao-nota {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-weight: 700;
  color: #fff;
}

.hero__cartao {
  animation: rbo-flutuar 7s ease-in-out infinite;
}

/* ===== Números: na home sobem sobre o fim do topo ===== */
.numeros--sobre-topo {
  margin-top: -4.5rem;
}

/* ===== A dentista ===== */
.dentista {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, var(--rbo-rubi-50), #fff8f9);
}

.dentista .lista-check {
  margin: 1.5rem 0;
}

/* ===== Tratamentos ===== */
.tratamentos-home {
  background: var(--rbo-fundo-cinza);
}

/* ===== A clínica em fotos (a faixa é de base.css) ===== */
/* ===== FAQ em duas colunas ===== */
@media (min-width: 992px) {
  .faq--home .col-lg-4 {
    position: sticky;
    top: 120px;
    align-self: flex-start;
  }
}

/* ===== Artigos ===== */
.artigos-home {
  background: var(--rbo-fundo-cinza);
}