/* RIBONDI — ajustes próprios do projeto.
   Carregado depois da garet.css e dos CSS gerados pelo Elementor. */

/* ---------------------------------------------------------------
   Handle "@ribondiodontologia" ao lado do ícone — DESATIVADO.

   O widget de ícones sociais do Elementor não comporta texto: o
   .elementor-grid-item vem com `min-width: 0` e `word-break: break-word`,
   e o container com `font-size: 0`. O @ quebrava letra a letra mesmo com
   flex + white-space: nowrap. Decisão: mostrar só o ícone no menu mobile
   e dar presença ao Instagram pelo ícone do rodapé (widget 42e1e4c5).

   A regra abaixo é uma trava: se o <span class="ribondi-handle"> voltar
   ao HTML por alguma reversão, ele continua oculto em vez de quebrar.
   --------------------------------------------------------------- */
.ribondi-handle {
  display: none !important;
}

/* ---------------------------------------------------------------
   Instagram no bloco de contato do rodapé (widget 7a0b9f69).

   Fica no widget icon-list, e não no de redes sociais: o icon-list
   foi feito para ícone + texto na mesma linha, então o "@" não quebra.
   O widget 42e1e4c5 (barra inferior) voltou a ficar oculto.
   --------------------------------------------------------------- */

/* Os outros itens da lista são texto puro; só o Instagram é link.
   O realce no hover deixa isso explícito. */
.elementor-1616 .elementor-element.elementor-element-7a0b9f69 .elementor-icon-list-item > a:hover .elementor-icon-list-text {
  color: #fff;
}

/* ---------------------------------------------------------------
   Ícone de Instagram do menu mobile (widget bb14612) — removido.
   O Instagram agora vive no bloco de contato do rodapé, junto com
   telefone, horário e endereço. Sem seletor de container, para valer
   tanto no escopo .elementor-1616 quanto no template do menu (1087).
   --------------------------------------------------------------- */
.elementor-element.elementor-element-bb14612 {
  display: none !important;
}

/* ===============================================================
   PADRÃO DE HOVER DOS BOTÕES

   O site tinha três comportamentos convivendo: escurecer o fundo,
   esvaziar o fundo (deixando texto #D9D9D9 quase ilegível) e, no
   botão do WhatsApp, nenhum hover — ele é estilizado inline.

   Regra única:
     · Botão sólido  -> o preenchimento ESCURECE ~15%, o texto mantém
                        a cor, e o botão sobe 2px com sombra.
     · Botão de texto -> só a cor escurece (é o que os "Saiba mais"
                        já faziam; ficaram como estavam).
   Nunca esvaziar o fundo: era isso que gerava os casos ilegíveis.
   =============================================================== */
:root {
  --ribondi-hover-laranja: #BA411E; /* #DB4C23 escurecido 15% */
  --ribondi-hover-escuro:  #353236; /* #3E3B3F escurecido 15% */
  --ribondi-hover-claro:   #EDE9E7; /* #FCFCFC escurecido 15% */
  --ribondi-hover-sombra:  0 8px 20px rgba(0, 0, 0, 0.22);
  --ribondi-transicao: background-color .25s ease, color .25s ease,
                       border-color .25s ease, box-shadow .25s ease,
                       transform .25s ease;
}

/* Transição uniforme em todos os botões */
.elementor-button,
.eael-call-to-action .cta-button {
  transition: var(--ribondi-transicao);
}

/* --- "Agende sua avaliação" (647b4a0): pílula branca sobre laranja --- */
.elementor-1616 .elementor-element.elementor-element-647b4a0 .elementor-button:hover,
.elementor-1616 .elementor-element.elementor-element-647b4a0 .elementor-button:focus-visible {
  background-color: var(--ribondi-hover-claro);
  color: #DB4C23;
  fill: #DB4C23;
  box-shadow: var(--ribondi-hover-sombra);
  transform: translateY(-2px);
}

/* --- "Contato" (423ef751): sólido escuro --- */
.elementor-1616 .elementor-element.elementor-element-423ef751 .elementor-button:hover,
.elementor-1616 .elementor-element.elementor-element-423ef751 .elementor-button:focus-visible {
  background-color: var(--ribondi-hover-escuro);
  color: var(--e-global-color-871508e);
  border-color: var(--ribondi-hover-escuro);
  box-shadow: var(--ribondi-hover-sombra);
  transform: translateY(-2px);
}

/* --- "Agendar pelo WhatsApp" (dentro de 3cf458c4): sólido laranja.
       O widget é declarado como formulário, mas não tem nenhum campo —
       seu conteúdo é este único link, estilizado inline. Como estilo
       inline vence qualquer seletor, cor e fundo precisam de !important. --- */
.elementor-1616 .elementor-element.elementor-element-3cf458c4 a.elementor-button:hover,
.elementor-1616 .elementor-element.elementor-element-3cf458c4 a.elementor-button:focus-visible {
  background-color: var(--ribondi-hover-laranja) !important;
  color: #FCFCFC !important;
  box-shadow: var(--ribondi-hover-sombra);
  transform: translateY(-2px);
}

/* --- CTA do Essential Addons (4885171): sólido laranja --- */
.elementor-1616 .elementor-element.elementor-element-4885171 .eael-call-to-action.cta-preset-1:not(.cta-preset-2) .cta-button:hover:not(.cta-secondary-button) {
  background: var(--ribondi-hover-laranja);
  color: #FCFCFC;
  box-shadow: var(--ribondi-hover-sombra);
  transform: translateY(-2px);
}

/* --- Botões da hero (markup próprio: .hero__btn) ---------------

   BUG DE CONTRASTE: o CSS da hero está inline no index.html e os
   :hover só declaravam background/border, nunca a cor do texto.
   Sem `color` no :hover, quem vence é a regra global do OceanWP

       a:hover { color:#d05c1e }        -> especificidade (0,1,1)

   contra .hero__btn--primary{color:#fff} -> (0,1,0). Resultado: no
   hover o texto virava laranja sobre o fundo #a43f2f, dando 1,57:1
   de contraste (WCAG AA pede 4,5:1). Por isso `color` agora é
   sempre declarado explicitamente nos dois estados.

   O bloco inline vem na linha ~250, DEPOIS deste arquivo, então
   ordem de carga não basta: o "a" na frente sobe a especificidade
   para (0,2,1) e vence o (0,2,0) do inline. ------------------- */
a.hero__btn {
  transition: var(--ribondi-transicao);
}

/* Primário: laranja que escurece 15%, seguindo o padrão dos demais */
a.hero__btn--primary:hover,
a.hero__btn--primary:focus-visible {
  background: #B14E1A;
  border-color: #B14E1A;
  color: #fff;
  box-shadow: var(--ribondi-hover-sombra);
  transform: translateY(-2px);
}

/* Ghost: preenche com o laranja da marca e texto branco */
a.hero__btn--ghost:hover,
a.hero__btn--ghost:focus-visible {
  background: #d05c1e;
  border-color: #d05c1e;
  color: #fff;
  box-shadow: var(--ribondi-hover-sombra);
  transform: translateY(-2px);
}

/* --- Respiro no topo da hero (mobile / portrait) ---------------

   Em portrait a .hero é min-height:100svh com align-items:flex-start,
   e a foto é background-position:bottom center — presa na base da
   seção. O conteúdo já ocupava quase toda a altura: sobravam poucos
   pixels entre os selos e a cabeça da foto.

   Por isso não dá para simplesmente aumentar o padding-top: cada
   pixel somado no topo empurra os selos para dentro da imagem.
   (E mover o padding para .hero__col--copy não mudaria nada — em
   portrait a coluna de arte tem display:none, então o grid tem uma
   coluna só e o padding do __inner já É o da coluna de texto.)

   Solução: em vez de PEGAR EMPRESTADO espaço de dentro do bloco
   (apertando as margens de título/texto/botões), a seção passa a ser
   mais alta que a viewport. O espaço é criado, não redistribuído —
   por isso o ritmo tipográfico original fica intacto.

   Como a foto é `cover` ancorada na base, aumentar a altura da seção
   afasta a cabeça da foto do fim do texto. Em troca, a imagem escala
   junto e é cortada um pouco mais nas laterais.

   ESCOPO: "orientation:portrait" sozinho também casaria com uma
   janela de desktop mais alta que larga. Por isso vem somado a
   "max-width:1200px" — o mesmo limite que o CSS da hero usa para
   definir --hero-header-offset (126px só a partir de 1201px).
   Assim o desktop fica intocado em 100svh.

   "section.hero" (0,1,1) em vez de ".hero" (0,1,0): o bloco inline
   vem depois deste arquivo no HTML, então ordem de carga não basta.
   As duas linhas de min-height são o par vh/svh do CSS original —
   svh sobrescreve vh em quem suporta, vh atende o resto. */
@media (orientation: portrait) and (max-width: 1200px) {
  section.hero {
    min-height: calc(110vh - var(--hero-header-offset));
    min-height: calc(110svh - var(--hero-header-offset));
  }
  .hero .hero__inner {
    padding-top: clamp(48px, 8vh, 80px);
  }
}

/* Respeita quem pediu menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
  a.hero__btn:hover,
  a.hero__btn:focus-visible {
    transform: none;
  }
  .elementor-button,
  .eael-call-to-action .cta-button {
    transition: background-color .25s ease, color .25s ease;
  }
  .elementor-button:hover,
  .elementor-button:focus-visible,
  .eael-call-to-action .cta-button:hover {
    transform: none;
  }
}



/* ---------------------------------------------------------------
   Seção "Nossa Equipe" (c08cded) — foto de parallax removida.

   A mudança está em wp-content/uploads/elementor/css/post-1616.css,
   e não aqui: editar a origem faz o crawler do build-deploy.py parar
   de enxergar sala-ribondi-parallax.webp, e os 65 KB da imagem deixam
   de viajar para o deploy. Um override neste arquivo esconderia a
   foto mas continuaria publicando o peso.

   No lugar entrou #DB4C23 chapado. A cor não é decorativa: o título
   (widget 7558178) é #D9D9D9 e só tem contraste sobre fundo escuro.
   Se algum dia a faixa virar branca, o título tem que ir junto para
   #3E3B3F, senão some.

   Saiu também o background-attachment: fixed, que o Safari do iOS
   ignora e que no desktop forçava repaint a cada scroll.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Ícones em SVG inline (Task 7 do plano 2026-07-30-html-puro).

   Os 14 glifos que a página usa custavam 260 KB de fonte de ícone
   — fa-brands, fa-solid e eicons. Inline somam menos de 4 KB, sem
   requisição e sem o piscar que fonte de ícone sempre custa.

   O fill é currentColor, então todo o CSS de `color` que o
   Elementor gerou continua valendo sem adaptação nenhuma.

   1em de largura e altura faz o SVG acompanhar o font-size do
   contexto, que é exatamente como a fonte de ícone se comportava
   — assim as regras de tamanho existentes também seguem valendo.
   --------------------------------------------------------------- */
.rb-icone {
  display: inline-block;
  vertical-align: -0.125em;
  /* Dentro de flex container, sem isso o ícone é espremido pelo texto. */
  flex: none;
}

/* ---------------------------------------------------------------
   Faixa "Nossa Equipe" (c08cded) — altura ajustada à cor chapada.

   Os 307px de min-height foram dimensionados para a foto de parallax
   que ocupava a faixa. Com a foto fora e a cor chapada no lugar,
   sobrava um retângulo laranja quase vazio: o título ocupa o terço
   esquerdo e os outros dois terços não tinham mais nada para mostrar.

   A faixa passa a abraçar o título com respiro próprio, virando um
   cabeçalho de seção em vez de um painel. O alinhamento à esquerda é
   o original — no site antigo o título ficava no canto inferior
   esquerdo da foto — e foi mantido de propósito.
   --------------------------------------------------------------- */
.elementor-1616 .elementor-element.elementor-element-c08cded > .elementor-container {
  min-height: 0;
}
.elementor-1616 .elementor-element.elementor-element-c08cded {
  padding-top: 44px;
  padding-bottom: 44px;
}

/* ---------------------------------------------------------------
   Rodapé — o que faltava.

   1. O botão. A coluna da direita prometia "Agende sua avaliação
      pelo WhatsApp" e não oferecia nada para clicar: o último
      elemento terminava em 109px de uma coluna de 329px, deixando
      220px de vazio embaixo de uma chamada para ação. Texto que
      promete e não entrega é pior que texto nenhum.

      O href aponta para api.whatsapp.com de propósito: o
      rb-form.js intercepta esses links e abre o modal que captura
      o lead na planilha. O botão entra no mesmo funil do resto do
      site sem uma linha de JavaScript nova.

   2. Telefone e endereço clicáveis. Numa clínica, a maior parte do
      tráfego é celular, e um telefone que não disca é um passo a
      mais entre a pessoa e o agendamento.
   --------------------------------------------------------------- */

.rb-rodape-cta {
  margin-top: 22px;
}

.rb-rodape-botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: #39BF53;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.rb-rodape-botao:hover,
.rb-rodape-botao:focus-visible {
  background: #339B4F;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

.rb-rodape-nota {
  margin: 12px 0 0;
  font-size: 13px;
  opacity: .75;
}

/* Telefone e endereço: viram link sem mudar de aparência. A cor é herdada
   para o item continuar lendo como informação, não como menu; o sublinhado
   só aparece no hover, sinalizando que dá para tocar. */
.rb-contato-link {
  color: inherit;
  text-decoration: none;
}
.rb-contato-link:hover,
.rb-contato-link:focus-visible {
  color: inherit;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .rb-rodape-botao {
    transition: background-color .25s ease;
  }
  .rb-rodape-botao:hover,
  .rb-rodape-botao:focus-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------
   EQUIPE — moldura padrão

   Retratos de corpo, em 3:4 e maiores. O enquadramento equivalente
   entre os dois (cabeça junto ao topo, corte na altura da coxa) é
   feito no recorte da imagem, não em CSS — por isso aqui não há mais
   scale nem object-position corrigindo distância de câmera.

   As paredes continuam diferentes: a Dra. Carla na ripada de madeira,
   o Dr. Juliano na da logo. O que sobrou para aproximá-las é discreto
   e não mexe na nitidez: um sépia leve, que iguala a temperatura, e
   uma vinheta suave nas bordas. O desfoque de fundo que existia aqui
   saiu a pedido.

   Quando chegarem os PNGs recortados, é só trocar o src e zerar o
   --rb-equipe-veu: a moldura já é o fundo padrão que fica por baixo.
   --------------------------------------------------------------- */

.rb-equipe {
  padding: 60px 20px 70px;
  --rb-equipe-veu: .07;
}

.rb-equipe__grade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 48px 64px;
  max-width: 1140px;
  margin: 0 auto;
}

.rb-equipe__card {
  flex: 0 1 400px;
  margin: 0;
  text-align: center;
}

/* O fundo do card é o que aparece caso a foto ainda esteja carregando
   ou venha recortada: já é o tom claro da marca, não o branco do papel. */
.rb-equipe__moldura {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ribondi-hover-claro);
  box-shadow: 0 14px 34px rgba(62, 59, 63, .20),
              inset 0 0 0 1px rgba(62, 59, 63, .06);
}

/* Retrato 3:4 sem aspect-ratio: o público da clínica usa celular antigo
   e este site não tem build step para servir fallback. É a mesma razão
   das imagens (900x1200), então o cover não corta nada. */
.rb-equipe__moldura::before {
  content: "";
  display: block;
  padding-top: 133.333%;
}

/* O sépia leve é o que iguala a temperatura das duas paredes — a de
   madeira já é quente, a de mármore é fria. Em 8% ele aproxima as duas
   sem amarelar a pele e sem tirar nitidez. */
.rb-equipe__foto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  filter: saturate(.94) sepia(.08);
}

/* Vinheta só, sem desfoque: escurece de leve as quatro bordas, o que
   basta para as duas paredes pararem de disputar atenção com os rostos. */
.rb-equipe__moldura::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 78% 72% at 50% 42%, rgba(62, 59, 63, 0) 58%, rgba(62, 59, 63, .26) 100%),
    linear-gradient(rgba(219, 76, 35, var(--rb-equipe-veu)), rgba(219, 76, 35, var(--rb-equipe-veu)));
  pointer-events: none;
}

.rb-equipe__nome {
  margin: 22px 0 8px;
  font-size: 22px;
  line-height: 1.3;
  color: #3E3B3F;
}

.rb-equipe__cargo {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: #DB4C23;
}

@media (max-width: 767px) {
  .rb-equipe__grade {
    gap: 36px;
  }
  .rb-equipe__moldura {
    max-width: 320px;
  }
}