/* Fskin Dermatologia — visual do site original sobre Bootstrap 5 (fontes: Montserrat + Cooper Hewitt) */
@font-face { font-family: 'Cooper Hewitt'; font-weight: 400; src: url('/tema/fonts/cooperhewitt-book-webfont.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 600; src: url('/tema/fonts/cooperhewitt-medium-webfont.woff2') format('woff2'); font-display: swap; }
:root { --escuro: #4a4f55; --cinza: #7f7f7f; --rosa: #e18c7d; --menu: #58595b; --azulado: #e8ecee; --azulado-2: #d8dfe3; }
body { font-family: 'Montserrat', sans-serif; color: #333; background: #fff; padding-top: 126px; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
.cooper { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-weight: 400; }
.cooper-i { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-style: italic; }
.escuro { color: var(--escuro) !important; }
.titulo-secao { font-size: 20px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: var(--escuro); }

/* topo */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #fff; box-shadow: 0 0 60px #ccc; padding: 20px 0; transition: padding .5s; }
.topo.fixo { padding: 5px 0; }
.topo .logo img { max-width: 100%; height: auto; max-height: 86px; }
.topo nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.topo nav li { display: inline-block; }
.topo nav a { display: block; padding: 12px 15px 5px; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--menu); transition: color .6s; }
.topo nav a:hover, .topo nav a.ativo { color: var(--rosa); }
.busca { position: relative; width: 100%; }
.busca input { width: 100%; height: 40px; border: 1px solid #d5d5d5; padding: 5px 40px 5px 10px; font-family: 'Montserrat', sans-serif; font-size: 13px; color: #888; outline: none; background: #fff; }
.busca button { position: absolute; top: 0; right: 0; width: 40px; height: 40px; background: transparent; border: 0; color: #b5b5b5; }
.topo-mobile { display: none; }
.menu-m ul { list-style: none; margin: 0; padding: 0; }
.menu-m a { display: block; padding: 12px 0; font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--menu); border-bottom: 1px solid #eee; }
.menu-m a.ativo { color: var(--rosa); }

/* carrossel da home */
.carrossel .carousel-item img { width: 100%; height: auto; display: block; }
.carrossel .carousel-indicators { position: static; margin: 12px 0 0; }
.carrossel .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #aaa; background: transparent; opacity: 1; margin: 0 4px; }
.carrossel .carousel-indicators .active { background: #888; }
.apresentacao { font-size: 18px; line-height: 40px; letter-spacing: .7px; color: var(--escuro); }

/* cartões de tratamentos */
.linha { width: 200px; height: 1px; margin: 0 auto; background: #636363; }
.cartao { display: block; background: var(--azulado); transition: background .8s; }
.cartao:hover { background: var(--azulado-2); }
.cartao-2 { padding: 30px 25px 50px; text-align: center; height: 100%; }
.cartao-2 .foto { box-shadow: 1px 1px 7px #ccc; }
.cartao-2 .foto img { width: 100%; height: auto; display: block; }
.cartao-1 { margin-bottom: 30px; }
.cartao-1 .corpo { padding: 40px 15px; text-align: center; }
.cartao h3 { font-size: 18px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: var(--escuro); margin: 20px 0; }
.cartao p { font-size: 18px; font-weight: 300; letter-spacing: 1.4px; text-transform: uppercase; color: var(--escuro); margin: 20px 0 0; }
.cartao p.e { font-size: 30px; }
.btn-info-fskin { display: inline-block; background: #d8d8d8; color: #fff; font-size: 16px; font-weight: 300; letter-spacing: 1.4px; text-transform: uppercase; padding: 7px 15px; margin-top: 30px; transition: color .3s; }
.btn-info-fskin:hover { color: #848484; }

/* dicas úteis na home */
.dicas-chamada { font-size: 20px; line-height: 35px; color: var(--escuro); }
.dica-img { position: relative; display: block; }
.dica-img img { width: 100%; height: auto; display: block; }
.dica-img::after { content: ''; position: absolute; inset: 0; background: rgba(255, 191, 181, .43); opacity: 0; transition: opacity .4s; }
.dica-img:hover::after { opacity: 1; }
.mais-dicas { font-size: 18px; letter-spacing: .7px; color: var(--cinza); text-transform: uppercase; transition: color .6s; }
.mais-dicas:hover { color: #edbfaf; }

/* faixa do formulário da home */
.faixa-cinza { background: #f1f1f1; padding: 100px 0; margin-top: 100px; }
.form-fskin input, .form-fskin textarea { width: 100%; display: block; border: 1px solid #fff; background: #fff; padding: 10px; margin-bottom: 15px; font-family: 'Montserrat', sans-serif; font-size: 15px; letter-spacing: .6px; color: #555; outline: none; }
.form-fskin input { height: 35px; }
.form-fskin textarea { height: 120px; resize: vertical; }
.form-fskin button { width: 100%; background: var(--rosa); border: 0; color: #fff; padding: 7px 15px; font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase; }
.form-fskin button:hover { opacity: .85; }
.form-status { font-size: 14px; margin-top: 8px; }

/* tratamentos */
.secao-trat { background: var(--azulado); padding: 40px 25px 20px; margin: 50px 0; scroll-margin-top: 140px; }
.secao-trat h2 { font-size: 18px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: var(--escuro); margin: 20px 0 30px; text-align: center; }
.menu-tratamento { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.menu-tratamento li { width: 33.333%; text-align: center; margin: 5px 0 15px; }
.menu-tratamento a { display: block; padding: 0 8px; font-size: 13px; font-weight: 300; letter-spacing: 1.4px; text-transform: uppercase; color: #636363; }
.menu-tratamento a:hover { font-weight: 600; color: #565656; }

/* página interna (tratamento / dica / política) */
.interna h1 { font-size: 25px; font-weight: 400; letter-spacing: 1.4px; text-transform: uppercase; color: var(--escuro); text-align: center; margin: 30px 0 40px; }
.interna .texto, .interna .texto p, .interna .texto li { font-size: 16px; letter-spacing: .5px; line-height: 30px; }
.interna .texto img { max-width: 100%; height: auto; }
.interna .texto h2, .interna .texto h3, .interna .texto h4 { color: var(--escuro); letter-spacing: 1px; margin: 24px 0 10px; }
.btn-volta { display: inline-block; color: #afadad; font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase; }
.btn-volta:hover { color: #8c8a8a; }
.data-post { text-align: center; color: var(--cinza); font-size: 14px; margin: -20px 0 30px; }

/* dra. fernanda */
.perfil-nome { font-size: 18px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--escuro); margin-top: 15px; }
.perfil-cargo { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cinza); margin-top: 10px; }
.perfil-crm { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cinza); margin-top: 5px; white-space: pre-wrap; }
.perfil-destaque { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rosa); margin-top: 20px; }
.curriculo, .curriculo p { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-size: 16px; letter-spacing: 1px; line-height: 25px; color: var(--escuro); }

/* dicas úteis (blog) */
.blog-categorias { padding: 0; list-style: none; margin: 50px 0 0; }
.blog-categorias .titulo-blog { display: inline-block; text-transform: uppercase; border-bottom: 2px solid var(--escuro); letter-spacing: 1.4px; font-size: 18px; color: var(--escuro); padding: 18px 10px 15px 0; margin-bottom: 20px; }
.blog-categorias a { display: block; padding: 18px 10px 18px 0; letter-spacing: 1.4px; text-transform: uppercase; font-size: 15px; color: #484747; }
.blog-categorias a:hover, .blog-categorias a.ativo { color: #000; }
.vitrine-grid { display: flex; flex-wrap: wrap; margin: 50px 0; }
.vitrine { width: 25%; display: flex; flex-direction: column; transition: background .6s; box-sizing: border-box; }
.vitrine:hover { background: #f5f5f5; }
.vitrine-content { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 35px; position: relative; text-align: center; }
.vitrine-content img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.vitrine-info { flex: 1; margin-top: 10px; }
.vitrine-titulo { font-size: 16px; line-height: 25px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--escuro); }
.vitrine-data { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-size: 15px; color: var(--escuro); margin-top: 20px; }
.vitrine-resumo { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-size: 15px; line-height: 25px; color: var(--cinza); margin-top: 30px; }
.vitrine-vis { padding-top: 25px; color: #8d8d8d; font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase; }
.vitrine-content > a.cobre { position: absolute; inset: 0; z-index: 2; }
.paginacao { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 70px; }
.paginacao a, .paginacao span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid #d8d8d8; color: #636363; font-size: 14px; letter-spacing: 1px; transition: all .3s; }
.paginacao a:hover { background: var(--azulado); }
.paginacao .atual { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.paginacao .off { color: #c4c4c4; }

/* contato */
.faixa-rosa { background: #fde2da; padding: 100px 0; }
.contato-dados { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-size: 18px; line-height: 40px; color: var(--escuro); }
.contato-dados a { color: var(--escuro); text-decoration: underline; }
.faixa-galeria { background: #ffe3da; padding: 15px 50px 100px; }
.faixa-galeria a { position: relative; display: block; }
.faixa-galeria img { width: 100%; height: auto; display: block; }
.faixa-galeria a::after { content: 'Ampliar'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; letter-spacing: 1.4px; text-transform: uppercase; background: rgba(255, 191, 181, .35); opacity: 0; transition: opacity .3s; }
.faixa-galeria a:hover::after { opacity: 1; }
dialog.ampliada { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
dialog.ampliada::backdrop { background: rgba(0, 0, 0, .8); }
dialog.ampliada img { max-width: 92vw; max-height: 92vh; display: block; }

/* rodapé */
.rodape { background: #ecbfb0; padding: 30px 0; margin-top: 0; }
.rodape h4 { font-size: 16px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--escuro); }
.rodape ul { list-style: none; padding: 0; margin: 10px 0 0; }
.rodape li { margin-bottom: 6px; }
.rodape li a { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-size: 16px; color: var(--menu); }
.rodape li a:hover { font-weight: 600; }
.rodape .info { font-family: 'Cooper Hewitt', 'Montserrat', sans-serif; font-size: 16px; line-height: 25px; color: var(--escuro); margin-top: 10px; }
.rodape .info strong { font-weight: 600; letter-spacing: 1px; }
.rodape .redes a { display: block; margin-bottom: 5px; }
.rodape .redes img { max-width: 100%; height: auto; }

@media (max-width: 1023px) {
  body { padding-top: 76px; }
  .topo { padding: 8px 0; }
  .topo-desktop { display: none !important; }
  .topo-mobile { display: flex; align-items: center; justify-content: space-between; }
  .topo-mobile img { max-height: 56px; width: auto; }
  .topo-mobile button { background: transparent; border: 0; font-size: 30px; line-height: 1; color: var(--menu); }
  .vitrine { width: 50%; }
  .vitrine-grid { margin-top: 20px; }
  .blog-categorias { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 20px 0 0; }
  .blog-categorias .titulo-blog { width: 100%; }
  .blog-categorias a { padding: 8px 0; }
  .rodape .redes { margin-top: 20px; display: flex; gap: 8px; justify-content: center; }
  .rodape .redes a { margin: 0; }
  .rodape .redes img { max-width: 48px; }
  .faixa-galeria { padding: 15px 15px 60px; }
  .faixa-cinza, .faixa-rosa { padding: 50px 0; }
}
@media (max-width: 575px) {
  .vitrine { width: 100%; }
  .menu-tratamento li { width: 100%; }
  .cartao-2 { padding: 15px 15px 40px; }
  .apresentacao { font-size: 16px; line-height: 32px; }
}

.galeria-trat img { border: 2px solid #cfcfcf; }
.galeria-trat .legenda { text-align: center; font-size: 13px; color: #7f7f7f; margin-top: 4px; }