/* Bruno Odonto · base · VISS Digital · viss.digital
   Escala proporcional no MODO ACESSÍVEL (raiz mista: parte fixa + parte proporcional),
   para o zoom do navegador continuar funcionando (cliente de saúde, WCAG 1.4.4).
   Frames: 390 / 768 / 1440, onde 1rem = 16px. Tudo em rem (px do original ÷ 16).
   Faixas do original: celular até 767, tablet de 768 a 1024, desktop a partir de 1025. */

/* ---- fontes (latin, auto-hospedadas) ---- */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('../fonts/poppins-200.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/poppins-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('../fonts/poppins-300-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/roboto-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('../fonts/montserrat-200.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('../fonts/playfair-display-600-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- escala · modo acessível ---- */
:root {
  /* celular · frame 390 */
  font-size: clamp(15px, calc(4px + 100vw / 390 * 12), 17.5px);
}
@media (min-width: 768px) {
  /* tablet · frame 768 */
  :root { font-size: clamp(16px, calc(4px + 100vw / 768 * 12), 17.5px); }
}
@media (min-width: 1025px) {
  /* desktop · frame 1440 */
  :root { font-size: clamp(14.5px, calc(4px + 100vw / 1440 * 12), 20px); }
}

html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
input, select, textarea { font-size: max(1rem, 16px); }

/* ---- tokens ---- */
:root {
  /* espaço · px do original ÷ 16 */
  --space-5: .3125rem;  --space-10: .625rem;  --space-15: .9375rem; --space-20: 1.25rem;
  --space-25: 1.5625rem; --space-50: 3.125rem; --space-100: 6.25rem;
  --content: 75rem;            /* 1200 · largura do conteúdo no desktop */

  /* fontes */
  --font-titulo: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-botao: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-destaque: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* cor · valores reais do CSS do Elementor */
  --color-text: #3d4459;        /* corpo (Montserrat) */
  --color-title: #313131;       /* títulos */
  --color-subtitle: #5f5f5f;    /* subtítulos de seção */
  --color-white: #ffffff;
  --color-ink: #161616;         /* texto do botão de contorno escuro */
  --color-blue: #0575e6;        /* etiqueta "odontologia feita pra você" */
  --color-blue-btn: #0875e3;    /* botão enviar do formulário */
  --color-navy: #142242;        /* fundo das faixas escuras */
  --color-navy-header: #0d2160; /* cabeçalho rolado */
  --color-footer: #021021;
  --color-footer-bar: #041427;
  --color-card-title: #39374d;
  --color-card-text: #748494;
  --color-focus: #0575e6;
  --gradient-btn: linear-gradient(80deg, #0349ae 15%, #0465d0 96%);
  --gradient-agende: linear-gradient(80deg, #3153d5 14%, #0577e4 100%);

  /* forma */
  --radius-pill: 6.25rem;
  --shadow-card: 0 0 1.25rem 0 rgb(0 0 0 / .05);
  --shadow-moldura: 0 .625rem 1.875rem 0 rgb(0 0 0 / .25);

  /* camadas */
  --layer-header: 999; --layer-popup: 998; --layer-whats: 999;
}

/* ---- reset enxuto ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body {
  min-height: 100vh;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-texto);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
:where(ul[role='list']) { list-style: none; padding: 0; }

/* foco visível: some só para quem clica com o mouse */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: .125rem solid var(--color-focus); outline-offset: .1875rem; }
.escuro :focus-visible, .rodape :focus-visible, .topo :focus-visible, .hero :focus-visible { outline-color: #fff; }

/* só para leitor de tela */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: fixed; top: .5rem; left: .5rem; z-index: 1000;
  padding: .75rem 1rem; background: #fff; color: #000; font: 500 1rem/1 var(--font-titulo);
  transform: translateY(-300%);
}
.pular:focus { transform: none; }

/* iframe do GTM (noscript): invisível */
.gtm-ns { display: none; visibility: hidden; }

/* sprite de ícones fora do fluxo */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icone { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---- botão (Roboto 500, pílula) ---- */
.botao {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-pill);
  font: 500 .9375rem/1 var(--font-botao);
  text-align: center;
  color: #fff;
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.botao--gradiente { background: var(--gradient-btn); }
.botao--claro { border: 1px solid rgb(255 255 255 / .75); background: transparent; }
.botao--escuro { border: 1px solid rgb(88 88 88 / .75); background: transparent; color: var(--color-ink); }
.botao--flutua:hover, .botao--flutua:focus-visible { transform: translateY(-.5rem); }
.botao--gradiente:hover { color: #fff; }

/* linha de botões lado a lado (3 colunas no original: os 2 botões ficam em 1/3 cada) */
.botoes { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.botoes > .botao { width: auto; }
@media (max-width: 767px) { .botoes { padding-bottom: 1px; } }
.botoes > :first-child { margin-right: .3125rem; }
.botoes > :nth-child(2) { margin-left: .3125rem; }

/* ---- títulos animados do Elementor: "Texto <i>destaque</i>" ---- */
.titulo {
  /* bloco do original: 8 de respiro, a linha e 16 de respiro; mais 20 de margem do widget */
  height: 4rem; margin: 0 0 1.25rem; padding: .5rem 0 1rem;
  font: 600 2rem/2.5rem var(--font-titulo);
  color: var(--color-title);
  text-wrap: balance;
}
.titulo__texto { line-height: 1.2; }
.titulo__destaque { display: inline-block; font: italic 600 1em/1.2 var(--font-destaque); }
.subtitulo {
  /* o original sobe o texto do subtítulo 25px: a caixa só tem altura se o texto passar disso */
  display: flow-root;
  font: 300 1.125rem/1 var(--font-titulo);
  color: var(--color-subtitle);
}
.subtitulo > span { display: block; margin-top: -1.5625rem; }
.centro { text-align: center; }
/* cabeçalho de seção: título, subtítulo (sem colapso de margem, como o flex do original) */
.cabecalho { display: flex; flex-direction: column; padding: .625rem 0; }

@media (max-width: 767px) {
  .titulo { height: 3rem; font-size: 1.25rem; line-height: 1.5rem; }
  .subtitulo { font-size: 1rem; }
}

/* movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---- WhatsApp flutuante (botão e caixinha "Iniciar Atendimento", réplica do plugin antigo, com as cores do original) ---- */
.whats { font-family: Arial, Helvetica, sans-serif; }
.whats__botao {
  position: fixed; right: 1.875rem; bottom: 1.875rem; z-index: var(--layer-whats);
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: #044ab2; box-shadow: 0 .375rem .5rem .125rem rgb(0 0 0 / .14);
}
.whats__botao svg { position: absolute; width: 1.875rem; height: 1.875rem; transition: opacity .4s ease, transform .4s ease; }
.whats__botao::after {
  content: ''; position: absolute; width: .875rem; height: .875rem; opacity: 0;
  background: url('../img/whats-fechar.svg') center / contain no-repeat;
  transform: scale(0) rotate(-360deg); transition: opacity .4s ease, transform .4s ease;
}
.whats.is-aberto .whats__botao svg { opacity: 0; transform: scale(0) rotate(360deg); }
.whats.is-aberto .whats__botao::after { opacity: 1; transform: none; }
.whats__rotulo {
  position: fixed; right: 5.8125rem; bottom: 2.4375rem; z-index: var(--layer-whats);
  width: 9.75rem; padding: .4375rem 0 .4375rem .75rem; border-radius: .25rem;
  background: #f5f7f9; color: #43474e; font-size: .75rem; line-height: 1.125rem; letter-spacing: -.03em;
  pointer-events: none; transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.whats.is-aberto .whats__rotulo { opacity: 0; visibility: hidden; transform: translateY(.9375rem); }
.whats__caixa {
  position: fixed; right: 1.5625rem; bottom: 6.375rem; z-index: var(--layer-popup);
  width: 21.9375rem; max-width: calc(100% - 3.125rem); overflow: hidden; border-radius: .3125rem .3125rem .5rem .5rem;
  box-shadow: 0 .625rem .625rem .25rem rgb(0 0 0 / .04);
  opacity: 0; visibility: hidden; transform: translateY(3.125rem);
  transition: opacity .4s ease, transform .4s ease, visibility .4s, box-shadow .4s ease;
}
.whats__caixa:hover { box-shadow: 0 .625rem .625rem .25rem rgb(32 32 37 / .23); }
.whats.is-aberto .whats__caixa { opacity: 1; visibility: visible; transform: none; }
.whats__topo { position: relative; padding: .9375rem 2.6875rem 1.0625rem 4.625rem; background: #044ab2; }
.whats__topo::before {
  content: ''; position: absolute; top: 1.25rem; left: .75rem; width: 2.0625rem; height: 2.0625rem;
  background: url('../img/whats-logo.svg') center top / 2.0625rem no-repeat;
}
.whats__titulo { padding-top: .125rem; font-size: 1.125rem; line-height: 1.5rem; color: #fff; }
.whats__intro { padding-top: .25rem; font-size: .75rem; line-height: 1.25rem; color: #fff; opacity: .8; }
.whats__corpo { padding: .8125rem 1.25rem 1.3125rem 1.1875rem; background: #fff; }
.whats__aviso { padding: 0 .1875rem; font-size: .6875rem; font-weight: 500; color: #a5abb7; }
.whats__conta {
  position: relative; display: flex; align-items: center; min-height: 4.5625rem; margin-top: .875rem;
  padding: .8125rem 2.5rem .75rem 4.625rem; border-left: .125rem solid #044ab2; border-radius: .125rem .25rem .125rem .25rem;
  background: #f5f7f9; transition: background-color .2s ease, box-shadow .2s ease;
}
.whats__conta:hover, .whats__conta:focus-visible { background: #fff; box-shadow: 0 .4375rem .9375rem 1px rgb(55 62 70 / .07); }
.whats__conta::after {
  content: ''; position: absolute; top: 1.625rem; right: .875rem; width: 1.25rem; height: 1.25rem;
  background: url('../img/whats-logo-verde.svg') center / 100% 100% no-repeat;
}
.whats__avatar { position: absolute; left: .75rem; top: .75rem; width: 3rem; height: 3rem; }
.whats__txt { display: flex; flex-direction: column; justify-content: center; min-height: 3rem; }
.whats__nome { display: block; font-size: .875rem; line-height: 1.188; color: #363c47; }
.whats__funcao { display: block; padding-top: .125rem; font-size: .6875rem; line-height: 1.125; color: #989b9f; }


@media (prefers-reduced-motion: reduce) {
  .whats__botao svg, .whats__botao::after, .whats__rotulo, .whats__caixa { transition: none; }
}