/* =============================================================================
   Rubi Odonto :: institucional.css (Sobre; depois Dra. Keith e as páginas locais)
   Topo escuro com foto, a história com a foto e o selo "2017", quem vem de longe.
   Números, diferenciais, fotos e a Dra. Keith são de base.css.
   ========================================================================== */

/* ===== Topo escuro com foto ===== */
.topo-pagina {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 5.5rem);
  overflow: hidden;
  color: rgba(255, 255, 255, .9);
}

.topo-pagina__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.topo-pagina::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(46, 9, 16, .94) 0%, rgba(74, 17, 26, .85) 55%, rgba(122, 0, 42, .6) 100%);
}

.topo-pagina__titulo {
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: #fff;
}

.topo-pagina__texto {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}

/* Trilha clara sobre o fundo escuro */
.topo-pagina .trilha__lista,
.topo-pagina .trilha a {
  color: rgba(255, 255, 255, .85);
}

.topo-pagina .trilha a:hover {
  color: #fff;
}

.topo-pagina :focus-visible {
  outline-color: #fff;
}

/* ===== Nossa história ===== */
.historia .texto {
  font-size: 1.08rem;
}

.historia__foto {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}

.historia__foto .foto-clinica {
  width: 100%;
  border-radius: 24px;
  box-shadow: var(--rbo-sombra);
}

/* Selo "2017": quando a clínica nasceu */
.historia__desde {
  position: absolute;
  left: -16px;
  bottom: 28px;
  display: grid;
  padding: 1rem 1.25rem;
  background: var(--rbo-fundo);
  border-radius: var(--rbo-raio);
  box-shadow: var(--rbo-sombra);
  line-height: 1.1;
  animation: rbo-flutuar 6s ease-in-out infinite;
}

.historia__desde strong {
  font-family: var(--rbo-fonte-titulo);
  font-size: 2rem;
  color: var(--rbo-rubi-700);
}

.historia__desde span {
  font-size: .88rem;
  color: var(--rbo-texto-suave);
}

@media (max-width: 575.98px) {
  .historia__desde {
    left: 12px;
  }
}

/* Números logo depois da história, colados na seção rosada de baixo */
.historia + .numeros {
  margin-bottom: -3rem;
}

/* ===== Como é o seu atendimento ===== */
.atendimento {
  padding-top: calc(clamp(3rem, 7vw, 5.5rem) + 3rem);
  background: linear-gradient(180deg, var(--rbo-rubi-50), #fff8f9);
}

.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 0;
}

.passo {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--rbo-fundo);
  border-radius: var(--rbo-raio);
  box-shadow: var(--rbo-sombra-sm);
}

.passo__numero {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--rbo-framboesa), var(--rbo-framboesa-escuro));
  border-radius: 50%;
  color: #fff;
  font-family: var(--rbo-fonte-titulo);
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: 0 10px 22px -10px rgba(214, 51, 108, .7);
}

/* Linha ligando os passos no computador: mostra que é uma sequência */
@media (min-width: 1200px) {
  .passo:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(2rem + 26px);
    left: calc(1.75rem + 60px);
    right: -1.5rem;
    border-top: 2px dashed var(--rbo-rubi-300);
  }
}

.passo__titulo {
  margin-bottom: .5rem;
  font-size: 1.25rem;
}

.passo p {
  margin: 0;
  color: var(--rbo-texto-suave);
  font-size: .98rem;
}

/* ===== Fotos em grade: uma grande e quatro menores ===== */
.clinica-grade {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0;
}

.clinica-grade li:first-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .clinica-grade {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }

  .clinica-grade li:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* A grande ocupa duas linhas: a altura vem da grade, não da proporção */
  .clinica-grade li:first-child .foto-clinica {
    aspect-ratio: auto;
  }
}

.clinica-grade li,
.clinica-grade .foto-ampliar {
  height: 100%;
}

.clinica-grade .foto-clinica {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--rbo-raio);
  box-shadow: var(--rbo-sombra-sm);
}

.clinica-grade .foto-ampliar:hover .foto-clinica {
  transform: scale(1.02);
}

/* ===== Quem vem de longe ===== */
.de-longe {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.de-longe__caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(246, 60, 76, .35), transparent 70%),
    linear-gradient(135deg, var(--rbo-rubi-800), var(--rbo-rubi-900));
  border-radius: 28px;
  box-shadow: var(--rbo-sombra);
  color: rgba(255, 255, 255, .9);
}

.de-longe__icone {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  color: var(--rbo-rosa);
}

.de-longe__icone .icone {
  width: 34px;
  height: 34px;
}

.de-longe__texto {
  flex: 1 1 380px;
}

.de-longe__titulo {
  margin-bottom: .5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #fff;
}

.de-longe__texto p {
  margin: 0;
}

/* ===== A Dra. Keith ===== */
.sobre-keith {
  background: var(--rbo-fundo-cinza);
}

.sobre-keith .lista-check {
  margin: 1.25rem 0 1.5rem;
}

/* ===== Página da Dra. Keith ===== */

/* Topo sem foto de fundo: degradê vinho com brilho, o retrato é o destaque */
.topo-pagina--perfil {
  padding-bottom: clamp(3rem, 7vw, 4.5rem);
  background:
    radial-gradient(45% 70% at 85% 40%, rgba(246, 60, 76, .35), transparent 70%),
    linear-gradient(135deg, var(--rbo-vinho-profundo), var(--rbo-rubi-900) 55%, var(--rbo-rubi-800));
}

.topo-pagina--perfil::before {
  content: none;
}

.topo-pagina__chapeu {
  margin-bottom: .75rem;
  font-weight: 700;
  color: var(--rbo-rosa);
}

.perfil__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.5rem 0 2rem;
}

.perfil__chips li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
}

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

/* Retrato em arco, com o brilho rubi atrás */
.perfil__retrato {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}

.perfil__retrato::before {
  content: '';
  position: absolute;
  inset: 6% -5% -3% 8%;
  background: linear-gradient(160deg, var(--rbo-rubi-500), var(--rbo-framboesa-escuro));
  border-radius: 999px 999px 32px 32px;
  transform: rotate(4deg);
}

.perfil__retrato img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 720 / 833;
  object-fit: cover;
  border-radius: 999px 999px 32px 32px;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6);
}

/* Linha do tempo da formação */
.formacao {
  background: linear-gradient(180deg, var(--rbo-rubi-50), #fff8f9);
}

.linha-tempo {
  position: relative;
  display: grid;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
}

/* A linha vertical que liga os itens */
.linha-tempo::before {
  content: '';
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: calc(.5rem + .25rem + 21px); /* centro do ícone: respiro do item + margem + metade dos 44px */
  border-left: 2px dashed var(--rbo-rubi-300);
}

.linha-tempo__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.4rem 1.1rem .5rem;
}

.linha-tempo__icone {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-left: .25rem;
  background: var(--rbo-fundo);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--rbo-rubi-50), var(--rbo-sombra-sm);
  color: var(--rbo-rubi-700);
}

.linha-tempo__item > div {
  flex-grow: 1;
  padding: 1rem 1.25rem;
  background: var(--rbo-fundo);
  border-radius: var(--rbo-raio-sm);
  box-shadow: var(--rbo-sombra-sm);
}

.linha-tempo__titulo {
  margin-bottom: .2rem;
  font-size: 1.12rem;
}

.linha-tempo__item p {
  margin: 0;
  font-size: .95rem;
  color: var(--rbo-texto-suave);
}

/* A graduação: ícone cheio, é a base de tudo */
.linha-tempo__item--destaque .linha-tempo__icone {
  background: linear-gradient(135deg, var(--rbo-framboesa), var(--rbo-framboesa-escuro));
  color: #fff;
}

/* A frase dela */
.frase {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.frase__figura {
  margin: 0;
  text-align: center;
}

.frase__aspas {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--rbo-rubi-300);
}

.frase__texto {
  margin: 0 0 1.5rem;
  font-family: var(--rbo-fonte-titulo);
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.4;
  color: var(--rbo-rubi-900);
}

.frase__texto p {
  margin: 0;
}

.frase__autor {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  font-size: .95rem;
  color: var(--rbo-texto-suave);
}

.frase__autor img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--rbo-rubi-100);
}

.frase__autor span {
  display: grid;
}

.frase__autor strong {
  font-family: var(--rbo-fonte-titulo);
  color: var(--rbo-rubi-900);
}

/* Especialistas parceiros */
.parceiros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--rbo-fundo-cinza);
  border-radius: 28px;
}

.parceiros__icone {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  background: var(--rbo-fundo);
  border-radius: 50%;
  box-shadow: var(--rbo-sombra-sm);
  color: var(--rbo-rubi-700);
}

.parceiros__icone .icone {
  width: 30px;
  height: 30px;
}

.parceiros__texto {
  flex: 1 1 380px;
}

.parceiros__titulo {
  margin-bottom: .4rem;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}

.parceiros__texto p {
  margin: 0;
  color: var(--rbo-texto-suave);
}

/* ===== Páginas locais ===== */
.topo-pagina__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* Cartão da clínica ao lado do texto: fica fixo enquanto se lê, no computador */
.cartao-clinica {
  padding: 1.75rem;
  background: var(--rbo-fundo);
  border-radius: 24px;
  box-shadow: var(--rbo-sombra);
}

@media (min-width: 992px) {
  .cartao-clinica {
    position: sticky;
    top: 110px;
  }
}

.cartao-clinica > img {
  width: 40px;
  height: auto;
  margin-bottom: .75rem;
}

.cartao-clinica__titulo {
  margin-bottom: .4rem;
  font-size: 1.5rem;
}

.cartao-clinica__nota {
  margin-bottom: 1rem;
  font-size: .9rem;
}

.cartao-clinica__dados {
  display: grid;
  gap: .75rem;
  margin: 0 0 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rbo-rubi-100);
  font-size: .95rem;
  color: var(--rbo-texto-suave);
}

.cartao-clinica__dados li {
  display: flex;
  gap: .6rem;
}

.cartao-clinica__dados .icone {
  margin-top: .2em;
  color: var(--rbo-rubi-700);
}

.cartao-clinica__dados address {
  margin: 0;
}