/* Odonto Clínica Dra. Viviane Marques (Palhoça/SC, conversa #341). Arquétipo: livro de colorir da sala de espera.
   Papel branco, tinta violeta-escura, lilás do elefante do logo, violeta e amarelo do site atual, rosa e lilás das nuvens do
   papel de parede do consultório infantil. Fredoka nos títulos + Andika no texto. N3 sem efeito nenhum: o desenho é a assinatura. */
:root {
  --fundo: #ffffff;
  --tinta: #2a2253;
  --suave: #57507d;
  --marca: #5d47d1;          /* violeta do site atual escurecido para texto branco (5,9:1) */
  --violeta: #765fe7;        /* rgb(118, 95, 231) do site atual */
  --violeta-claro: #9a87f0;
  --lilas: #a090e8;          /* elefante do logo */
  --lilas-claro: #ece8fc;
  --rosa: #f4b2c9;
  --rosa-claro: #fde9f0;
  --amarelo: #f9cf10;        /* botões de agendamento do site atual */
  --coroa: #f2b53a;          /* coroa do logo */
  --papel: #fffdf6;
  --fonte-titulo: "Fredoka", "Trebuchet MS", sans-serif;
  --fonte-texto: "Andika", "Segoe UI", sans-serif;
  --wa-cor: var(--marca);
  --wa-tinta: #fff;
  --oferta-botao: var(--amarelo);
  --oferta-tinta: var(--tinta);
}
body { font-size: clamp(16px, 1.1vw, 18.5px); line-height: 1.62; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; }
h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; }
a { text-underline-offset: 3px; }
.rotulo { margin: 0 0 .6rem; font: 600 1rem/1.3 var(--fonte-titulo); color: var(--marca); }
section { padding-block: clamp(64px, 9vw, 120px); }

/* botões */
.botao { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.05rem; letter-spacing: 0; padding: 1em 1.6em; }
.botao--amarelo { --b-fundo: var(--amarelo); --b-tinta: var(--tinta); box-shadow: 0 4px 0 #d9ae00; }
.botao--amarelo:hover { box-shadow: 0 4px 0 #d9ae00, 0 14px 30px -14px rgb(217 174 0 / .9); }
.link-texto { display: inline-flex; align-items: center; min-height: 44px; font: 600 1.05rem/1.2 var(--fonte-titulo); color: var(--marca); text-decoration: underline; text-decoration-thickness: 2px; }
.link-giz { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-top: .4rem; font: 600 1rem/1.2 var(--fonte-titulo); color: var(--marca); text-decoration: underline; text-decoration-thickness: 2px; }
.link-giz svg { width: 1.2em; height: 1.2em; flex: none; }

/* ===== motivo 4: papel de parede de nuvens do consultório infantil ===== */
.nuvens {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='200' viewBox='0 0 260 200'%3E%3Cpath fill='%23f9d6e2' d='M18 52a11 11 0 0 1 18-9a15 15 0 0 1 28 4a10 10 0 0 1 2 20H20a9 9 0 0 1-2-15z'/%3E%3Cpath fill='%23e1daf9' d='M150 30a9 9 0 0 1 15-7a12 12 0 0 1 23 3a8 8 0 0 1 1 16h-37a7 7 0 0 1-2-12z'/%3E%3Cpath fill='%23e1daf9' d='M70 132a12 12 0 0 1 20-10a17 17 0 0 1 31 5a11 11 0 0 1 2 22H72a10 10 0 0 1-2-17z'/%3E%3Cpath fill='%23f9d6e2' d='M196 118a8 8 0 0 1 13-6a11 11 0 0 1 20 3a7 7 0 0 1 1 14h-32a6 6 0 0 1-2-11z'/%3E%3Cpath fill='%23f9d6e2' d='M120 186a7 7 0 0 1 11-5a10 10 0 0 1 18 2a6 6 0 0 1 1 12h-28a5 5 0 0 1-2-9z'/%3E%3C/svg%3E");
  background-size: 260px 200px;
}

/* ===== motivo 1: desenho de contorno pintado a giz ===== */
.desenho { overflow: visible; }
.desenho .traco { fill: none; stroke: var(--tinta); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: url(#giz-traco); }
.desenho .traco--fino { stroke-width: 4.5; }
.desenho .traco--fio { stroke: var(--marca); stroke-width: 4; }
.desenho .tinta-cheia { fill: var(--tinta); }
.desenho .peca { fill: #fff; stroke: var(--tinta); stroke-width: 5; stroke-linejoin: round; }
.desenho .giz-pintura { filter: url(#giz); opacity: .95; }

/* ===== motivo 2: contorno de giz em volta das fotos ===== */
.foto { margin: 0; }
.foto__quadro { position: relative; }
.foto__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.contorno { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.contorno path { fill: none; stroke: var(--violeta); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: url(#giz-traco); }
.contorno path + path { stroke-width: 5; opacity: .8; }
.contorno--lilas path { stroke: var(--lilas); }
.contorno--rosa path { stroke: #ec8fb1; }
.contorno--amarelo path { stroke: #e9b800; }
.foto figcaption { margin-top: 1.1rem; font: 600 1.05rem/1.3 var(--fonte-titulo); color: var(--suave); }

/* ===== cabeçalho ===== */
.topo { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / .96); border-bottom: 3px solid var(--lilas-claro); }
.topo__linha { display: flex; align-items: center; gap: 2rem; min-height: 84px; }
.topo__marca { display: inline-flex; align-items: center; min-height: 48px; }
.topo__marca img { height: 62px; width: auto; }
.topo__menu { display: flex; align-items: center; gap: 1.8rem; margin-left: auto; font: 500 1.02rem/1 var(--fonte-titulo); color: var(--tinta); }
.topo__menu a { padding: .5rem 0; border-bottom: 3px solid transparent; }
.topo__menu a:hover { border-bottom-color: var(--amarelo); }
.topo__ig { display: inline-flex; align-items: center; gap: .45em; color: var(--marca); }
.topo__ig svg { width: 1.3em; height: 1.3em; flex: none; }
.topo__cta { padding: .85em 1.4em; }
.topo__burger { display: none; }

/* ===== hero ===== */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 110px); border-bottom: 3px solid var(--lilas-claro); }
.hero__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.hero__texto { background: #fff; border-radius: 28px; padding: clamp(20px, 2.4vw, 36px) clamp(20px, 2.6vw, 40px); box-shadow: 0 0 0 4px var(--lilas-claro); }
.hero h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.0; letter-spacing: -0.015em; color: var(--marca); font-weight: 700; }
.hero__onde { margin-top: 1.2rem; font: 600 clamp(19px, 1.6vw, 23px)/1.3 var(--fonte-titulo); color: var(--tinta); }
.hero__sub { margin-top: 1rem; max-width: 34em; color: var(--suave); }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; }
.hero__arte { position: relative; padding: 18px 18px 64px 34px; }
.hero__dente { position: absolute; left: -22px; bottom: -12px; width: clamp(110px, 12vw, 168px); }

/* ===== o espaço ===== */
.espaco h2 { max-width: 15em; }
.espaco__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 4.4vw, 64px) clamp(28px, 3.4vw, 52px); margin-top: clamp(40px, 5vw, 64px); }
.foto--larga { grid-column: 1 / span 7; }
.foto--quadrada { grid-column: 8 / span 5; align-self: end; }
.foto--media { grid-column: 1 / span 5; }
.foto--larga2 { grid-column: 6 / span 7; margin-top: clamp(0px, 4vw, 56px); }
.espaco__texto { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(48px, 6vw, 80px); }
.espaco__kids { font: 500 clamp(22px, 2.1vw, 30px)/1.32 var(--fonte-titulo); color: var(--tinta); }
.espaco__medo { align-self: end; padding-left: 1.2rem; border-left: 5px solid var(--rosa); color: var(--suave); }
.espaco__medo a { color: var(--marca); text-decoration: underline; }

/* ===== quem somos ===== */
.quem { background: var(--lilas-claro); }
.quem__grade { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.quem__texto h2 { max-width: 17em; margin-bottom: 1.4rem; }
.quem__texto p + p { margin-top: .9rem; }
.quem__texto p:not(.rotulo) { max-width: 40em; }
.quem__foco { font: 600 1.15rem/1.4 var(--fonte-titulo); color: var(--marca); }
.quem__elefante { width: min(100%, 300px); justify-self: center; }

/* ===== motivo 3: caixa de 12 gizes ===== */
.tratamentos__topo p { margin-top: .8rem; color: var(--suave); }
.caixa { display: grid; grid-template-columns: minmax(200px, .42fr) minmax(0, 1.58fr); margin-top: clamp(36px, 4.6vw, 60px); border: 5px solid var(--tinta); border-radius: 22px; overflow: hidden; background: var(--papel); box-shadow: 0 8px 0 var(--tinta); }
.caixa__tampa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 2rem 1.4rem; background: var(--amarelo); border-right: 5px solid var(--tinta); text-align: center; }
.caixa__tampa img { width: 120px; }
.caixa__marca { font: 500 1.05rem/1.25 var(--fonte-titulo); color: var(--tinta); }
.caixa__marca b { display: block; font-size: 1.45rem; font-weight: 700; color: var(--marca); }
.caixa__conta { display: inline-block; padding: .35em 1em; border: 3px solid var(--tinta); border-radius: 999px; background: #fff; font: 600 .98rem/1.2 var(--fonte-titulo); }
.caixa__gizes { list-style: none; margin: 0; padding: clamp(20px, 2.6vw, 34px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(18px, 2.4vw, 32px); background: repeating-linear-gradient(0deg, transparent 0 58px, rgb(42 34 83 / .05) 58px 60px); }
.giz { --c: var(--lilas); display: flex; align-items: stretch; min-height: 52px; filter: drop-shadow(0 3px 0 rgb(42 34 83 / .22)); }
.giz__ponta { flex: none; width: 46px; background: var(--c); clip-path: polygon(0 50%, 58% 10%, 100% 10%, 100% 90%, 58% 90%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3C/filter%3E%3Crect width='60' height='60' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); background-blend-mode: multiply; }
.giz__papel { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: .45rem .9rem; background: color-mix(in srgb, var(--c) 26%, #fff); border-block: 4px solid var(--c); font-family: var(--fonte-titulo); line-height: 1.12; }
.giz__papel b { font-weight: 600; font-size: 1.05rem; color: var(--tinta); }
.giz__papel small { font-size: .86rem; color: var(--suave); }
.giz__fundo { flex: none; width: 22px; background: var(--c); border-radius: 0 10px 10px 0; }
.giz--lilas { --c: #a090e8; } .giz--amarelo { --c: #f9cf10; } .giz--violeta { --c: #765fe7; } .giz--rosa { --c: #f4a7c3; }
.giz--ceu { --c: #8fc3f0; } .giz--creme { --c: #f3dc8f; } .giz--coroa { --c: #f2b53a; } .giz--uva { --c: #4b3aa8; }
.giz--lilas2 { --c: #c7bbf6; } .giz--azul { --c: #3e63dd; } .giz--rosa2 { --c: #e77fa6; } .giz--menta { --c: #8cd3b8; }

/* tratamentos explicados */
.explicados { display: grid; gap: clamp(48px, 6vw, 88px); margin-top: clamp(64px, 8vw, 110px); }
.trat { display: grid; grid-template-columns: minmax(140px, .5fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 80px); align-items: center; max-width: 1040px; }
.trat--inverso { grid-template-columns: minmax(0, 1.5fr) minmax(140px, .5fr); margin-left: auto; }
.trat--inverso .trat__desenho { order: 2; }
.trat__desenho .desenho { width: min(100%, 230px); margin-inline: auto; }
.trat__texto h3 { margin-bottom: .7rem; color: var(--marca); }
.trat__texto p + p { margin-top: .7rem; }
.trat__texto p { color: var(--suave); max-width: 38em; }
.trat__fala { padding-left: 1rem; border-left: 5px solid var(--coroa); }
.trat__fala a { color: var(--marca); text-decoration: underline; }

/* ===== recados (página de atividades) ===== */
.recados { background: var(--rosa-claro); }
.recados__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.recados__escova { width: min(100%, 380px); margin-inline: auto; }
.recados__intro { margin-top: 1rem; color: var(--suave); }
.recados__intro a, .recados__lista a { color: var(--marca); text-decoration: underline; }
.recados__lista { list-style: none; margin: 1.8rem 0 1.4rem; padding: 0; display: grid; gap: 1.1rem; }
.recados__lista li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: .9rem; align-items: start; }
.recados__lista p { font: 500 1.2rem/1.35 var(--fonte-titulo); color: var(--tinta); }
.recados__lista a { grid-column: 2; font-size: .92rem; display: inline-flex; min-height: 32px; align-items: center; }
.tique { width: 30px; margin-top: .1rem; overflow: visible; }
.tique path { fill: none; stroke: var(--marca); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: url(#giz-traco); }

/* ===== unidades ===== */
.unidades { border-top: 3px solid var(--lilas-claro); }
.unidades__topo { max-width: 46em; background: #fff; border-radius: 18px; padding: 1.2rem 1.4rem; margin-left: -1.4rem; }
.unidades__topo p { margin-top: .8rem; color: var(--suave); }
.unidades__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 52px); align-items: start; }
.unidade { display: flex; flex-direction: column; gap: 1.3rem; padding: clamp(24px, 3vw, 40px); background: #fff; border: 4px solid var(--tinta); border-radius: 22px; box-shadow: 0 7px 0 var(--lilas); }
.unidade h3 { font-size: clamp(26px, 2.6vw, 36px); color: var(--marca); }
.unidade dt { font: 600 .95rem/1.2 var(--fonte-titulo); color: var(--suave); }
.unidade__rt dd { display: flex; flex-direction: column; margin: .35rem 0 0; }
.unidade__rt b { font: 600 1.3rem/1.25 var(--fonte-titulo); color: var(--tinta); }
.unidade__rt span { color: var(--suave); }
.unidade__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.4rem; margin: 0; }
.unidade__dados dd { margin: .3rem 0 0; }
.unidade__dados a { text-decoration: underline; }
.unidade__onde { color: var(--suave); }
.unidade__fones a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.unidade .botao { margin-top: auto; align-self: flex-start; }
.unidades__pe { margin-top: 2rem; max-width: 40em; padding: .6rem 1rem; background: #fff; border-radius: 12px; color: var(--suave); }

/* ===== motivo 5: nota do Google circulada a giz ===== */
.nota { position: relative; align-self: flex-start; display: inline-flex; align-items: center; min-height: 52px; padding: .7rem 1.6rem; font: 600 1.12rem/1.2 var(--fonte-titulo); color: var(--tinta); }
.nota span { position: relative; z-index: 1; text-decoration: underline; text-decoration-color: rgb(42 34 83 / .3); }
.circulo { position: absolute; inset: -4px -10px; width: calc(100% + 20px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.circulo path { fill: none; stroke: #e9b800; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: url(#giz-traco); }

/* ===== rodapé ===== */
.rodape { padding-block: clamp(48px, 6vw, 80px) 1.6rem; background: var(--tinta); color: #eeeaff; }
.rodape__grade { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.rodape__marca img { width: 210px; background: #fff; border-radius: 16px; padding: 10px 14px; }
.rodape__marca p { margin-top: 1rem; }
.rodape__titulo { margin-bottom: .5rem; font: 600 1rem/1.2 var(--fonte-titulo); color: var(--amarelo); }
.rodape p + p { margin-top: .8rem; }
.rodape a { text-decoration: underline; }
.rodape__ig { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; }
.rodape__ig svg { width: 1.3em; height: 1.3em; flex: none; }
.rodape__previa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid rgb(238 234 255 / .18); font-size: .9rem; color: rgb(238 234 255 / .8); }
.rodape__previa a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; }
.rodape__previa svg { width: 1.1em; height: 1.1em; }

/* WhatsApp na cor da marca também no desktop (o celular herda --marca no motor) */
.wa-flutuante { background: var(--marca); color: #fff; }

/* ===== responsivo ===== */
@media (max-width: 1100px) {
  .topo__menu { gap: 1.2rem; }
  .topo__ig span { display: none; }
}
@media (max-width: 900px) {
  .topo__cta { display: none; }
  .topo__burger { display: inline-grid; place-items: center; gap: 6px; width: 48px; height: 48px; margin-left: auto; border: 0; background: transparent; cursor: pointer; }
  .topo__burger span { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--marca); transition: transform .25s; }
  .menu-aberto .topo__burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-aberto .topo__burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .topo__menu { position: fixed; inset: 84px 0 auto 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem clamp(16px, 4vw, 48px) 1.2rem; background: #fff; border-bottom: 3px solid var(--lilas-claro); font-size: 1.1rem; }
  .menu-aberto .topo__menu { display: flex; }
  .topo__menu a { border-bottom: 1px solid var(--lilas-claro); }
  .topo__ig span { display: inline; }
  .hero__grade, .quem__grade, .recados__grade, .espaco__texto { grid-template-columns: minmax(0, 1fr); }
  .hero__arte { padding: 10px 14px 56px 30px; }
  .unidades__topo { margin-left: 0; }
  .quem__elefante { width: 160px; justify-self: start; order: -1; }
  .caixa { grid-template-columns: minmax(0, 1fr); }
  .caixa__tampa { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; border-right: 0; border-bottom: 5px solid var(--tinta); padding: 1.2rem 1.4rem; }
  .caixa__tampa img { width: 72px; }
  .unidades__grade { grid-template-columns: minmax(0, 1fr); }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
  .recados__escova { width: min(70%, 300px); }
}
@media (max-width: 640px) {
  .topo__linha { min-height: 72px; }
  .topo__menu { inset: 72px 0 auto 0; }
  .topo__marca img { height: 50px; }
  section { padding-block: 56px; }
  .hero { padding-top: 36px; }
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .hero__acoes .botao { width: 100%; }
  .hero__dente { width: 96px; left: -12px; bottom: -6px; }
  .espaco__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .foto--larga, .foto--quadrada, .foto--media, .foto--larga2 { grid-column: 1; margin-top: 0; }
  .caixa__gizes { grid-template-columns: minmax(0, 1fr); padding: 18px 14px; gap: 12px; }
  .trat, .trat--inverso { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .trat--inverso .trat__desenho { order: 0; }
  .trat__desenho .desenho { width: 150px; margin-inline: 0; }
  .unidade__dados { grid-template-columns: minmax(0, 1fr); }
  .unidade .botao { align-self: stretch; }
  .recados__lista p { font-size: 1.1rem; }
}