/* Clínica Ipê, link na bio
   Paleta tirada da logo: o verde-sálvia do letreiro, o tronco escurecido para o texto
   e o rosa do ipê reservado para a ação de agendar. O único movimento que não vem do
   toque é o ciclo do ipê na abertura, que pausa pelo botão e fora da tela. */

:root {
  --folha: #F2F4F1;
  --casca: #1F2D27;
  --salvia: #52655C;
  --ipe: #9B3F5B;
  --ipe-press: #7E3049;
  --petala: #F1D7D2;
  --petala-leve: #F7E7E3;

  --linha: #D3DBD5;
  --trilho: #E3E9E4;
  --branco: #FFFFFF;

  --ramo: #5E7268;
  --flor-clara: #EDB8B6;
  --flor-viva: #D8879C;
  --flor-funda: #C46C86;

  --f-titulo: "Italiana", "Didot", "Bodoni 72", Georgia, serif;
  --f-texto: "Atkinson Hyperlegible Next", "Segoe UI", Roboto, Arial, sans-serif;

  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --shift-sm: 6px;
  --press-scale: 0.98;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
  --maxw: 560px;
  --ipe-largura: min(72vw, 320px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--folha);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--folha);
  color: var(--casca);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, address { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--casca);
  outline-offset: 3px;
  border-radius: 6px;
}

.pagina {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.titulo {
  font-family: var(--f-titulo);
  font-size: 30px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* ------------------------------------------------------------- abertura */

/* O galho sai pela borda direita: a própria cena recorta, sem rolagem lateral. */
.abertura {
  position: relative;
  overflow: hidden;
  padding: calc(20px + var(--safe-top)) var(--gutter) 6px;
}

.ipe {
  position: absolute;
  top: calc(-4px + var(--safe-top));
  right: -22px;
  width: var(--ipe-largura);
  aspect-ratio: 320 / 220;
  pointer-events: none;
}

.ipe__arte {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ipe__galhos { stroke: var(--ramo); }
.ipe__botoes { color: var(--flor-viva); }
.ipe .clara { color: var(--flor-clara); }
.ipe .viva { color: var(--flor-viva); }
.ipe .funda { color: var(--flor-funda); }

/* Flores vivas: elementos HTML por cima do desenho, para o ciclo rodar só com
   transform e opacity, fora da thread principal. Sem animação, ficam abertas no galho. */
.ipe__vivas {
  position: absolute;
  inset: 0;
}

.vf {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  transform: rotate(var(--r));
}

.vf--trompete { aspect-ratio: 2 / 3; }

.vf svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ipe-pausa {
  position: absolute;
  top: calc(6px + var(--safe-top));
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--salvia);
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* O círculo visível é menor que a área de toque. */
.ipe-pausa::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: rgb(242 244 241 / 0.88);
  box-shadow: 0 0 0 1px var(--linha);
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
}

.ipe-pausa i { position: relative; }
.ipe-pausa:active::before { transform: scale(0.92); background: var(--trilho); }
.ipe-pausa:focus-visible { outline-offset: -2px; border-radius: 50%; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Em telas estreitas a copa chega perto do nome: a marca fica por cima,
   com um halo da cor do fundo que só aparece quando há flor atrás. */
.marca {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.marca__avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F1F1F1;
  box-shadow: 0 0 0 1px var(--linha);
}

.marca__texto {
  text-shadow: 0 0 2px var(--folha), 0 0 6px var(--folha), 0 0 10px var(--folha);
}

.marca__nome {
  font-family: var(--f-titulo);
  font-size: 24px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.marca__perfil {
  margin-top: 2px;
  color: var(--salvia);
  font-size: 14px;
  line-height: 1.3;
}

/* A frase começa logo abaixo do galho: a altura do SVG acompanha a largura. */
.frase {
  position: relative;
  max-width: 11.5em;
  margin-top: calc(var(--ipe-largura) * 0.6875 - 64px);
  font-family: var(--f-titulo);
  font-size: clamp(32px, 9.6vw, 40px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.12;
  letter-spacing: 0.003em;
  text-wrap: balance;
}

.apoio {
  max-width: 30ch;
  margin-top: 14px;
  color: var(--salvia);
  font-size: 17px;
  line-height: 1.5;
}

.btn-agendar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 24px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--ipe);
  color: var(--branco);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 10px 22px -14px rgb(155 63 91 / 0.75);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.btn-agendar .fa-whatsapp { font-size: 22px; }

.btn-agendar:active {
  transform: scale(var(--press-scale));
  background: var(--ipe-press);
  box-shadow: 0 4px 10px -8px rgb(155 63 91 / 0.75);
}

.btn-agendar:focus-visible { outline-offset: 4px; }

.abertura__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 10px;
}

.status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--salvia);
  font-size: 15px;
  line-height: 1.45;
}

.abertura .status { flex: 1 1 14em; }

/* O ponto só aparece quando o JavaScript calcula o status de agora. */
.status__ponto {
  display: none;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-1px);
}

.status.is-aberto .status__ponto {
  display: block;
  background: var(--salvia);
}

.status.is-fechado .status__ponto {
  display: block;
  box-shadow: inset 0 0 0 1.5px var(--salvia);
}

.status.is-aberto { color: var(--casca); }

.link-local {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--casca);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--linha);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color var(--motion-instant) var(--ease-standard);
}

.link-local .fa-location-dot { color: var(--ipe); font-size: 15px; }
.link-local:active { text-decoration-color: var(--casca); }

/* ------------------------------------------------------------ caminhos */

.caminhos,
.equipe,
.visita,
.fim { padding: 0 var(--gutter); }

.caminhos { margin-top: 56px; }
.equipe { margin-top: 56px; }
.visita { margin-top: 60px; }
.fim { margin-top: 64px; }

.seletor {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 20px;
  padding: 4px;
  border-radius: 999px;
  background: var(--trilho);
}

.seletor__marca {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--branco);
  box-shadow: 0 1px 3px rgb(31 45 39 / 0.14);
  transition: transform var(--motion-standard) var(--ease-emphasis);
}

.seletor[data-ativo="odontologia"] .seletor__marca { transform: translateX(100%); }

.seletor__aba {
  position: relative;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--salvia);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--motion-fast) var(--ease-standard);
}

.seletor__aba[aria-selected="true"] { color: var(--casca); }
.seletor__aba:focus-visible { outline-offset: -3px; }

.caminho { margin-top: 28px; }

/* Com o seletor ativo, o nome da área já está na aba. */
.js-seletor .caminho { margin-top: 22px; }
.js-seletor .caminho__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.caminho__titulo {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.caminho__lema {
  margin-top: 2px;
  color: var(--salvia);
  font-family: var(--f-titulo);
  font-size: 24px;
  line-height: 1.2;
}

.caminho:focus-visible { outline-offset: 6px; }

.caminho.is-entrando {
  animation: painel-entra var(--motion-standard) var(--ease-enter);
}

@keyframes painel-entra {
  from { opacity: 0; transform: translateY(var(--shift-sm)); }
}

.servicos {
  margin-top: 14px;
  border-top: 1px solid var(--linha);
}

.servicos li { border-bottom: 1px solid var(--linha); }

/* A linha ocupa a largura toda para o toque; o recuo volta no padding. */
.servico {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 14px var(--gutter);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-instant) var(--ease-standard);
}

.servico:active { background: var(--petala-leve); }
.servico:focus-visible { outline-offset: -3px; }

.servico__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.servico__nome {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.servico__texto {
  max-width: 36ch;
  color: var(--salvia);
  font-size: 15px;
  line-height: 1.45;
}

.servico__icone {
  flex: 0 0 auto;
  color: var(--ipe);
  font-size: 24px;
}

.nota {
  margin-top: 12px;
  color: var(--salvia);
  font-size: 14px;
  line-height: 1.45;
}

/* -------------------------------------------------------------- equipe */

.equipe__lista {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.equipe__pessoa {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.equipe__nome { font-size: 18px; font-weight: 600; line-height: 1.3; }
.equipe__registro { color: var(--salvia); font-size: 15px; }

/* -------------------------------------------------------------- visita */

.endereco {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}

.status--visita { margin-top: 14px; }

.horario {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 16px;
}

.horario__titulo {
  padding-bottom: 8px;
  color: var(--salvia);
  font-size: 14px;
  text-align: left;
}

.horario tr { border-top: 1px solid var(--linha); }
.horario tr:last-child { border-bottom: 1px solid var(--linha); }

.horario th,
.horario td {
  padding: 12px 0;
  line-height: 1.35;
}

.horario th { font-weight: 400; text-align: left; }

.horario td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* O dia de hoje ganha a cor das pétalas; a palavra "hoje" repete a informação sem depender da cor. */
.horario tr.is-hoje { background: var(--petala); }
.horario tr.is-hoje th,
.horario tr.is-hoje td { font-weight: 600; }
.horario tr.is-hoje th { padding-left: 12px; }
.horario tr.is-hoje td { padding-right: 12px; }

.hoje {
  margin-left: 8px;
  color: var(--ipe-press);
  font-size: 13px;
  font-weight: 600;
}

.visita__acoes {
  display: grid;
  gap: 4px;
  margin-top: 22px;
}

.btn-rota {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--casca);
  font-size: 16px;
  font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.btn-rota:active {
  transform: scale(var(--press-scale));
  background: var(--trilho);
}

.btn-mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--casca);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-instant) var(--ease-standard);
}

.btn-mapa .fa-map { color: var(--salvia); }
.btn-mapa:active { background: var(--trilho); }

.mapa {
  position: relative;
  margin-top: 12px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--trilho);
}

.mapa__aviso {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--salvia);
  font-size: 15px;
}

.mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--motion-emphasis) var(--ease-standard);
}

.mapa.is-carregado iframe { opacity: 1; }

/* ----------------------------------------------------------------- fim */

.fim__texto {
  max-width: 34ch;
  margin-top: 10px;
  color: var(--salvia);
  font-size: 17px;
  line-height: 1.5;
}

.fim .btn-agendar { margin-top: 20px; }

.redes {
  margin-top: 36px;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.rede {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 12px var(--gutter);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-instant) var(--ease-standard);
}

.rede:active { background: var(--trilho); }
.rede:focus-visible { outline-offset: -3px; }

.rede__icone {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--linha);
  font-size: 21px;
}

.rede__corpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rede__nome { font-size: 17px; font-weight: 600; line-height: 1.3; }
.rede__texto { color: var(--salvia); font-size: 15px; }

/* Os blocos com display próprio precisam respeitar o atributo hidden. */
.seletor[hidden],
.status[hidden],
.btn-mapa[hidden],
.mapa[hidden],
.equipe[hidden],
.ipe-pausa[hidden],
.caminho[hidden] { display: none; }

.rodape {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px var(--gutter) calc(32px + var(--safe-bottom));
  color: var(--salvia);
  font-size: 13px;
}

.rodape__credito { margin-top: 4px; }

.rodape__credito a {
  display: inline-block;
  margin: -14px 0;
  padding: 14px 0;
  color: var(--casca);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--linha);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}

.rodape__credito a:active { text-decoration-color: var(--casca); }

/* ----------------------------------------------------- interação fina */

@media (hover: hover) and (pointer: fine) {
  .btn-agendar:hover { background: var(--ipe-press); }
  .servico:hover { background: var(--petala-leve); }
  .rede:hover,
  .btn-mapa:hover,
  .btn-rota:hover { background: var(--trilho); }
  .link-local:hover { text-decoration-color: var(--casca); }
  .seletor__aba:hover { color: var(--casca); }
  .ipe-pausa:hover::before { background: var(--trilho); }
  .rodape__credito a:hover { text-decoration-color: var(--casca); }
}

/* Telas baixas: o galho encolhe para o botão continuar na primeira tela. */
@media (max-height: 680px) {
  :root { --ipe-largura: min(52vw, 240px); }
}

@media (max-width: 359px) {
  .ipe { right: -30px; }
}

@media (min-width: 600px) {
  .abertura { padding-top: calc(40px + var(--safe-top)); }
  .ipe { top: calc(12px + var(--safe-top)); right: 0; }
}

/* ------------------------------------------------------------ o ciclo do ipê
   Cada flor viva nasce como botão (estreita), abre, fica florida, se solta e cai
   balançando até sumir antes da frase, e renasce no mesmo ponto. Tempos e atrasos
   diferentes por flor: a copa nunca esvazia e nada pisca de uma vez.
   Só roda com JavaScript, porque é ele que liga o botão de pausa. */
@media (prefers-reduced-motion: no-preference) {
  .js .vf {
    animation: ipe-ciclo var(--dur, 18s) linear var(--atraso, 0s) infinite both;
    will-change: transform, opacity;
  }

  .ipe.is-pausado .vf { animation-play-state: paused; }
}

@keyframes ipe-ciclo {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(calc(var(--r) - 40deg)) scale(0.08, 0.16);
    animation-timing-function: ease-out;
  }
  6% {
    opacity: 1;
    transform: translate(0, 0) rotate(calc(var(--r) - 24deg)) scale(0.16, 0.34);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  18% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--r)) scale(1);
  }
  62% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--r)) scale(1);
    animation-timing-function: ease-in;
  }
  68% {
    opacity: 1;
    transform: translate(calc(var(--dx) * 0.1), calc(var(--dy) * 0.06)) rotate(calc(var(--r) + var(--giro) * 0.1)) scale(0.98);
    animation-timing-function: ease-in-out;
  }
  76% {
    opacity: 0.95;
    transform: translate(calc(var(--dx) * 0.55), calc(var(--dy) * 0.3)) rotate(calc(var(--r) + var(--giro) * 0.4)) scale(0.94);
    animation-timing-function: ease-in-out;
  }
  84% {
    opacity: 0.7;
    transform: translate(calc(var(--dx) * 0.15), calc(var(--dy) * 0.62)) rotate(calc(var(--r) + var(--giro) * 0.7)) scale(0.9);
    animation-timing-function: ease-in-out;
  }
  92% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) + var(--giro))) scale(0.85);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0) rotate(calc(var(--r) - 40deg)) scale(0.08, 0.16);
  }
}

/* ------------------------------------------------------------ reduced motion
   O ipê fica florido e parado: as flores vivas param abertas no galho e o botão
   de pausa some. Trocar de área vira corte com mudança de cor. O toque muda cor,
   sem encolher. Nenhuma informação depende de movimento. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --press-scale: 1;
    --shift-sm: 0px;
  }

  .js .vf { animation: none; }
  .ipe-pausa { display: none; }
  .seletor__marca { transition: none; }
  .caminho.is-entrando { animation: none; }
  .mapa iframe { transition: none; }
}