.mac-book-air-1,
.mac-book-air-1 * {
  box-sizing: border-box;
}
.mac-book-air-1 {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  height: auto;
  position: relative;
  overflow: hidden;
}
.frame-10 {
  background: #f8f3ec;
  padding: 10px 90px 10px 90px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1280px;
  position: relative;
}
.logo-cor-horizontal-1 {
  flex-shrink: 0;
  width: 164px;
  height: 55px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 164/55;
}
.frame-9 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.home {
  color: #917c6a;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.manifesto {
  color: #917c6a;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.sobre-mim {
  color: #917c6a;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.especialidades {
  color: #917c6a;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.procedimentos {
  color: #917c6a;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.cl-nica {
  color: #917c6a;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.contato {
  color: #917c6a;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 400;
  position: relative;
}
.frame-26 {
  padding: 0px 700px 0px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 832px;
  min-width: 1280px;
  min-height: 832px;
  position: relative;
}
.transforme-seu-corpo-com-seguran-a-especialistas-em-harmoniza-o-corporal-lipedema-e-recupera-o-p-s-operat-ria {
  color: #ffffff;
  text-align: left;
  position: relative;
  align-self: stretch;
}
.transforme-seu-corpo-com-seguran-a-especialistas-em-harmoniza-o-corporal-lipedema-e-recupera-o-p-s-operat-ria-span {
  font-family: "Haboro Contrast", "Cinzel", serif;
  font-size: 63px;
  font-weight: 400;
  text-transform: uppercase;
}
.transforme-seu-corpo-com-seguran-a-especialistas-em-harmoniza-o-corporal-lipedema-e-recupera-o-p-s-operat-ria-span2 {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  font-weight: 400;
}
.frame-1 {
  background: #f8f3ec;
  border-radius: 5px;
  padding: 10px 17px 9px 18px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 49px;
  position: relative;
}
.agendar-minha-avalia-o {
  color: #af8245;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 400;
  position: relative;
}
.frame-27 {
  padding: 0px 80px 0px 750px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 832px;
  min-width: 1280px;
  min-height: 832px;
  position: relative;
}
.seu-corpo-n-o-um-card-pio {
  color: #af8245;
  text-align: right;
  font-family: "Haboro Contrast", "Cinzel", serif;
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  align-self: stretch;
}
.acredito-em-uma-abordagem-global-e-individualizada-o-tratamento-est-tico-e-funcional-vai-muito-al-m-de-escolher-procedimentos-isolados-meu-foco-entender-as-suas-necessidades-tratar-a-causa-e-entregar-resultados-que-unem-sa-de-bem-estar-e-est-tica-respeitando-a-sua-individualidade {
  color: #af8245;
  text-align: right;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.frame-28 {
  padding: 0px 650px 0px 80px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 832px;
  min-width: 1280px;
  min-height: 832px;
  position: relative;
}
.quem-a-patr-cia {
  color: #ffffff;
  text-align: left;
  font-family: "Haboro Contrast", "Cinzel", serif;
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  align-self: stretch;
}
.crefito-4-112440-f-sou-a-dra-patr-cia-honorato-fisioterapeuta-dermatofuncional-com-ampla-experi-ncia-na-rea-dedico-minha-carreira-a-transformar-a-rela-o-das-mulheres-com-seus-corpos-atrav-s-de-tratamentos-baseados-em-ci-ncia-e-tecnologia-por-fim-deve-se-mencionar-os-locais-de-atua-o-destacando-que-os-atendimentos-s-o-realizados-na-nobilit-cl-nica-um-espa-o-preparado-para-oferecer-o-melhor-em-conforto-e-tecnologia {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.crefito-4-112440-f-sou-a-dra-patr-cia-honorato-fisioterapeuta-dermatofuncional-com-ampla-experi-ncia-na-rea-dedico-minha-carreira-a-transformar-a-rela-o-das-mulheres-com-seus-corpos-atrav-s-de-tratamentos-baseados-em-ci-ncia-e-tecnologia-por-fim-deve-se-mencionar-os-locais-de-atua-o-destacando-que-os-atendimentos-s-o-realizados-na-nobilit-cl-nica-um-espa-o-preparado-para-oferecer-o-melhor-em-conforto-e-tecnologia-span {
  font-family: "Montserrat", sans-serif;
}
.crefito-4-112440-f-sou-a-dra-patr-cia-honorato-fisioterapeuta-dermatofuncional-com-ampla-experi-ncia-na-rea-dedico-minha-carreira-a-transformar-a-rela-o-das-mulheres-com-seus-corpos-atrav-s-de-tratamentos-baseados-em-ci-ncia-e-tecnologia-por-fim-deve-se-mencionar-os-locais-de-atua-o-destacando-que-os-atendimentos-s-o-realizados-na-nobilit-cl-nica-um-espa-o-preparado-para-oferecer-o-melhor-em-conforto-e-tecnologia-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.frame-29 {
  background: #8d8176;
  padding: 90px 0px 90px 0px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 854px;
  min-width: 1280px;
  position: relative;
}
.group-26 {
  flex-shrink: 0;
  width: 842px;
  height: 59px;
  position: static;
}
.reas-de-atua-o-especializada {
  color: #ffffff;
  text-align: center;
  font-family: "Haboro Contrast", "Cinzel", serif;
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  position: absolute;
  left: 219px;
  top: 90px;
  width: 842px;
}
.frame-13 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-shrink: 0;
  height: 179px;
  position: relative;
}
.image-5 {
  border-radius: 20px;
  flex-shrink: 0;
  width: 289px;
  height: 179px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 289/179;
}
.harmoniza-o-corporal-protocolos-avan-ados-para-remodela-o-corporal-tratamento-de-gordura-localizada-e-flacidez-buscando-harmonia-e-propor-o-com-resultados-naturais {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 400;
  position: relative;
  width: 675px;
}
.harmoniza-o-corporal-protocolos-avan-ados-para-remodela-o-corporal-tratamento-de-gordura-localizada-e-flacidez-buscando-harmonia-e-propor-o-com-resultados-naturais-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.harmoniza-o-corporal-protocolos-avan-ados-para-remodela-o-corporal-tratamento-de-gordura-localizada-e-flacidez-buscando-harmonia-e-propor-o-com-resultados-naturais-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.frame-14 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-shrink: 0;
  height: 179px;
  position: relative;
}
.tratamento-de-lipedema-protocolos-avan-ados-para-remodela-o-corporal-tratamento-de-gordura-localizada-e-flacidez-buscando-harmonia-e-propor-o-com-resultados-naturais {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 400;
  position: relative;
  width: 675px;
}
.tratamento-de-lipedema-protocolos-avan-ados-para-remodela-o-corporal-tratamento-de-gordura-localizada-e-flacidez-buscando-harmonia-e-propor-o-com-resultados-naturais-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.tratamento-de-lipedema-protocolos-avan-ados-para-remodela-o-corporal-tratamento-de-gordura-localizada-e-flacidez-buscando-harmonia-e-propor-o-com-resultados-naturais-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.frame-15 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 179px;
  position: relative;
}
.p-s-operat-rio-cuidados-essenciais-e-especializados-ap-s-cirurgias-pl-sticas-e-reparadoras-acelerando-a-recupera-o-prevenindo-complica-es-como-fibroses-e-otimizando-os-resultados-cir-rgicos {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 400;
  position: relative;
  width: 675px;
}
.p-s-operat-rio-cuidados-essenciais-e-especializados-ap-s-cirurgias-pl-sticas-e-reparadoras-acelerando-a-recupera-o-prevenindo-complica-es-como-fibroses-e-otimizando-os-resultados-cir-rgicos-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.p-s-operat-rio-cuidados-essenciais-e-especializados-ap-s-cirurgias-pl-sticas-e-reparadoras-acelerando-a-recupera-o-prevenindo-complica-es-como-fibroses-e-otimizando-os-resultados-cir-rgicos-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.frame-30 {
  background: #af8245;
  padding: 90px 80px 90px 80px;
  display: flex;
  flex-direction: column;
  gap: 52px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 1106.11px;
  min-width: 1280px;
  position: relative;
}
.group-262 {
  flex-shrink: 0;
  width: 1040px;
  height: 59px;
  position: static;
}
.programas-de-tratamento-e-tecnologias {
  color: #ffffff;
  text-align: center;
  font-family: "Haboro Contrast", "Cinzel", serif;
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 90px;
}
.frame-25 {
  align-self: stretch;
  flex-shrink: 0;
  display: grid;
  gap: 52px;
  row-gap: 31px;
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, fit-content(100%));
}
.frame-16 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}
.ellipse-1 {
  border-radius: 50%;
  border-style: solid;
  border-color: #ffffff;
  border-width: 2.84px;
  flex-shrink: 0;
  width: 138.22px;
  height: 138.22px;
  position: relative;
}
.programa-lipedema-12-semanas-protocolo-intensivo-e-personalizado-para-tratamento-do-lipedema {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.programa-lipedema-12-semanas-protocolo-intensivo-e-personalizado-para-tratamento-do-lipedema-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.programa-lipedema-12-semanas-protocolo-intensivo-e-personalizado-para-tratamento-do-lipedema-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.layer-1 {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: visible;
}
.frame-21 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.harmoniza-o-corporal-12-semanas-planejamento-estrat-gico-de-3-meses-com-tecnologias-de-alta-performance {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.harmoniza-o-corporal-12-semanas-planejamento-estrat-gico-de-3-meses-com-tecnologias-de-alta-performance-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.harmoniza-o-corporal-12-semanas-planejamento-estrat-gico-de-3-meses-com-tecnologias-de-alta-performance-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.layer-12 {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: visible;
}
.frame-17 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}
.ultrassom-micro-e-macrofocado-corporal-atua-na-flacidez-estimulando-a-produ-o-de-col-geno-em-diferentes-camadas-da-pele {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.ultrassom-micro-e-macrofocado-corporal-atua-na-flacidez-estimulando-a-produ-o-de-col-geno-em-diferentes-camadas-da-pele-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.ultrassom-micro-e-macrofocado-corporal-atua-na-flacidez-estimulando-a-produ-o-de-col-geno-em-diferentes-camadas-da-pele-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.frame {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: hidden;
}
.outline {
  width: 93.71%;
  height: 94.51%;
  position: absolute;
  right: 3.14%;
  left: 3.15%;
  bottom: 2.75%;
  top: 2.75%;
  overflow: visible;
}
.frame-22 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}
.radiofrequ-ncia-aquece-os-tecidos-para-melhorar-a-firmeza-da-pele-e-estimular-o-col-geno {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.radiofrequ-ncia-aquece-os-tecidos-para-melhorar-a-firmeza-da-pele-e-estimular-o-col-geno-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.radiofrequ-ncia-aquece-os-tecidos-para-melhorar-a-firmeza-da-pele-e-estimular-o-col-geno-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.layer-13 {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: visible;
}
.frame-18 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 1 / span 1;
  grid-row: 3 / span 1;
}
.microbody-facilita-a-permea-o-de-ativos-e-bioestimuladores-na-pele {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.microbody-facilita-a-permea-o-de-ativos-e-bioestimuladores-na-pele-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.microbody-facilita-a-permea-o-de-ativos-e-bioestimuladores-na-pele-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.outline2 {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: visible;
}
.frame-23 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 2 / span 1;
  grid-row: 3 / span 1;
}
.pump-gl-teo-promove-efeito-lifting-melhora-o-contorno-e-hidrata-profundamente-a-regi-o {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.pump-gl-teo-promove-efeito-lifting-melhora-o-contorno-e-hidrata-profundamente-a-regi-o-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.pump-gl-teo-promove-efeito-lifting-melhora-o-contorno-e-hidrata-profundamente-a-regi-o-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.frame2 {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: visible;
}
.frame-19 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 1 / span 1;
  grid-row: 4 / span 1;
}
.limpeza-de-pele-remove-impurezas-oleosidade-e-c-lulas-mortas-da-pele {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.limpeza-de-pele-remove-impurezas-oleosidade-e-c-lulas-mortas-da-pele-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.limpeza-de-pele-remove-impurezas-oleosidade-e-c-lulas-mortas-da-pele-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.line-cutting-stroke-ex {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: hidden;
}
.group {
  width: 93.83%;
  height: 93.75%;
  position: absolute;
  right: 3.12%;
  left: 3.04%;
  bottom: 3.12%;
  top: 3.13%;
  overflow: visible;
}
.frame-24 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 2 / span 1;
  grid-row: 4 / span 1;
}
.drenagem-linf-tica-especializada-reduz-incha-o-melhora-a-circula-o-linf-tica-e-alivia-desconfortos {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.drenagem-linf-tica-especializada-reduz-incha-o-melhora-a-circula-o-linf-tica-e-alivia-desconfortos-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.drenagem-linf-tica-especializada-reduz-incha-o-melhora-a-circula-o-linf-tica-e-alivia-desconfortos-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.layer-14 {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: visible;
}
.frame-20 {
  display: flex;
  flex-direction: row;
  gap: 23.67px;
  align-items: center;
  justify-content: flex-start;
  height: 138.22px;
  position: relative;
  grid-column: 1 / span 1;
  grid-row: 5 / span 1;
}
.programa-refine-tratamento-avan-ado-com-enzimas-para-redu-o-da-gordura-localizada {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20.827980041503906px;
  font-weight: 400;
  position: relative;
  width: 371.12px;
}
.programa-refine-tratamento-avan-ado-com-enzimas-para-redu-o-da-gordura-localizada-span {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.programa-refine-tratamento-avan-ado-com-enzimas-para-redu-o-da-gordura-localizada-span2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
.capa-1 {
  flex-shrink: 0;
  width: 94.67px;
  height: 94.67px;
  position: absolute;
  left: 21.77px;
  top: 21.77px;
  overflow: hidden;
}
.group2 {
  height: auto;
  position: absolute;
  left: 0px;
  top: 0.71px;
  overflow: visible;
}
.frame-35 {
  padding: 0px 550px 0px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 832px;
  min-width: 1280px;
  min-height: 832px;
  position: relative;
}
.frame-34 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.d-o-primeiro-passo-para-a-sua-transforma-o {
  color: #af8245;
  text-align: left;
  font-family: "Haboro Contrast", "Cinzel", serif;
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  align-self: stretch;
}
.agende-sua-avalia-o-e-descubra-o-tratamento-ideal-para-as-suas-necessidades-com-um-plano-totalmente-personalizado {
  color: #af8245;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 400;
  position: relative;
  width: 488px;
}
.frame-2 {
  background: #af8245;
  border-radius: 5px;
  padding: 10px 17px 9px 18px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 49px;
  position: relative;
}
.agendar-minha-avalia-o2 {
  color: #ffffff;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 400;
  position: relative;
}
.frame-33 {
  background: #f8f3ec;
  padding: 90px 78px 90px 78px;
  display: flex;
  flex-direction: row;
  gap: 94px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-32 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 541px;
  position: relative;
}
.image-6 {
  align-self: stretch;
  flex-shrink: 0;
  height: 456px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 541/456;
}
.frame-31 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.onde-a-sua-transforma-o-acontece {
  color: #af8245;
  text-align: right;
  font-family: "Haboro Contrast", "Cinzel", serif;
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  position: relative;
  width: 466px;
}
.meus-atendimentos-s-o-realizados-na-nobilit-cl-nica-um-ambiente-moderno-acolhedor-e-equipado-com-as-melhores-tecnologias-do-mercado {
  color: #af8245;
  text-align: right;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  font-weight: 400;
  position: relative;
  width: 489px;
}
.frame-222 {
  background: #544139;
  padding: 60px 400px 60px 400px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1280px;
  height: 346px;
  position: relative;
}
.logo-clara-horizontal-1 {
  flex-shrink: 0;
  width: 344px;
  height: 115px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 344/115;
}
.group-32 {
  flex-shrink: 0;
  width: 219px;
  height: 27px;
  position: static;
}
.crefito-4-112440-f {
  color: #f2e2d8;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 400;
  position: absolute;
  left: 530.5px;
  top: 197px;
}
.frame-212 {
  display: flex;
  flex-direction: row;
  gap: 88px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.instagram {
  flex-shrink: 0;
  width: 211px;
  height: 40px;
  position: static;
}
.apatriciahonorato {
  color: #f2e2d8;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 40px;
  font-weight: 400;
  position: absolute;
  left: 32px;
  top: 0px;
}
.hugeicons-instagram {
  width: 29px;
  height: 29px;
  position: absolute;
  left: 0px;
  top: 6px;
  overflow: hidden;
  aspect-ratio: 1;
}
.group3 {
  width: 75%;
  height: 75%;
  position: absolute;
  right: 12.5%;
  left: 12.5%;
  bottom: 12.5%;
  top: 12.5%;
  overflow: visible;
}
.whatsapp {
  flex-shrink: 0;
  width: 173px;
  height: 40px;
  position: static;
}
._34-99918-1103 {
  color: #f2e2d8;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 40px;
  font-weight: 400;
  position: absolute;
  left: 326px;
  top: 0px;
}
.vector {
  width: 5.08%;
  height: 60%;
  position: absolute;
  right: 31.57%;
  left: 63.35%;
  bottom: 20%;
  top: 20%;
  overflow: visible;
}


/* ==========================================================================
   V2 — MELHORIAS DE FUNCIONALIDADE E ESTILO (Iluminar / ILMWeb)
   Tudo daqui pra baixo sobrepõe a exportação do Figma acima.
   ========================================================================== */

@font-face {
  font-family: "Haboro Contrast";
  src: url("fonts/HaboroContrast-Normal-Regular.woff2") format("woff2"),
       url("fonts/HaboroContrast-Normal-Regular.woff")  format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --marrom-escuro: #544139;
  --dourado:       #af8245;
  --dourado-escuro:#946c34;
  --creme:         #f8f3ec;
  --creme-claro:   #f2e2d8;
  --cinza-marca:   #8d8176;
  --texto-nav:     #917c6a;
  --display: "Haboro Contrast", "Cinzel", serif;
  --corpo:   "Montserrat", sans-serif;
  --header-h: 78px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; font-family: var(--corpo); }
img  { max-width: 100%; height: auto; }
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }
.mac-book-air-1 { height: auto; width: 100%; overflow: visible; }

/* Esconde o cabeçalho ANTIGO do Figma (substituído pelo novo) */
.frame-10 { display: none !important; }

/* ---------- Botões CTA reutilizáveis ---------- */
.btn-cta {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 14px 30px; border-radius: 6px;
  font-family: var(--corpo); font-weight: 500; font-size: 18px;
  letter-spacing: .02em; line-height: 1; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  background: var(--creme); color: var(--dourado);
  box-shadow: 0 4px 14px rgba(84,65,57,.18);
  transition: transform .3s ease, box-shadow .3s ease,
              background .3s ease, letter-spacing .3s ease;
}
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(84,65,57,.28); letter-spacing: .05em; }
.btn-cta:active { transform: translateY(-1px); }
.btn-cta i { font-size: 1.05em; }
.btn-cta--gold  { background: var(--dourado); color: #fff; }
.btn-cta--gold:hover { background: var(--dourado-escuro); }
.btn-cta--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.85); box-shadow: none; }
.btn-cta--outline:hover { background: #fff; color: var(--dourado); }

/* ==========================================================================
   CABEÇALHO NOVO — fixo, translúcido, com hover em "pílula" e menu sanduíche
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 1000; width: 100%;
  background: rgba(248,243,236,.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled { background: rgba(248,243,236,.94); box-shadow: 0 2px 20px rgba(84,65,57,.14); }
.header-inner {
  max-width: 1280px; margin: 0 auto; padding: 8px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand { display: inline-flex; }
.brand img { height: 52px; width: auto; display: block; }

.primary-nav .menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
  position: relative; z-index: 0; display: inline-block;
  padding: 10px 15px; border-radius: 999px;
  color: var(--texto-nav); font-family: var(--corpo);
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  text-decoration: none; transition: color .3s ease;
}
.primary-nav a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 999px; background: var(--dourado);
  opacity: 0; transform: scale(.8);
  transition: opacity .3s ease, transform .3s ease;
}
.primary-nav a:hover, .primary-nav a:focus-visible { color: #fff; }
.primary-nav a:hover::before, .primary-nav a:focus-visible::before { opacity: 1; transform: scale(1); }

.menu-toggle {
  display: none; flex-direction: column; gap: 5px;
  width: 46px; height: 46px; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
}
.menu-toggle span { display: block; width: 26px; height: 2px; background: var(--marrom-escuro); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 992px) {
  .menu-toggle { display: flex; }
  .header-inner { padding: 8px 20px; position: relative; }
  .primary-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(248,243,236,.98);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 14px 26px rgba(84,65,57,.16);
    max-height: 0; overflow: hidden; transition: max-height .38s ease;
  }
  .primary-nav.open { max-height: 80vh; }
  .primary-nav .menu { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0; }
  .primary-nav a { border-radius: 0; padding: 15px 26px; }
  .primary-nav a::before { border-radius: 0; }
}

/* ==========================================================================
   HERO — imagem sem corte, texto em coluna e quebra igual ao Figma
   ========================================================================== */
.frame-26.hero {
  position: relative; width: 100%;
  min-width: 0; padding: 0;
  height: 86vh; min-height: 560px; max-height: 820px;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  background-size: cover !important;
  /* mantém o rosto no enquadramento e recorta a parte inferior (colo/pernas)  */
  /* AJUSTE FINO: se cortar a cabeça, aumente o 2º valor (ex.: 30%); se cortar as pernas, diminua */
  background-position: 72% 22% !important;
}
.hero-inner {
  max-width: 560px; padding: 0; margin-left: 7%; margin-right: auto;
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
  text-align: left; position: relative; z-index: 2;
  text-shadow: 0 2px 14px rgba(84,65,57,.28);
}
/* título do hero um pouco mais controlado */
.hero-inner .transforme-seu-corpo-com-seguran-a-especialistas-em-harmoniza-o-corporal-lipedema-e-recupera-o-p-s-operat-ria-span { font-size: 54px; line-height: 1.08; letter-spacing: .01em; white-space: nowrap; }
.hero-inner .transforme-seu-corpo-com-seguran-a-especialistas-em-harmoniza-o-corporal-lipedema-e-recupera-o-p-s-operat-ria-span2 { font-size: 22px; line-height: 1.4; display: inline-block; margin-top: 14px; }

/* ==========================================================================
   MANIFESTO ("Seu corpo não é um cardápio") — coluna à direita (imagem 3)
   ========================================================================== */
.frame-27 {
  min-width: 0; height: 58vh; min-height: 440px; max-height: 560px;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  padding: 0 6% 0 50%;
  background-size: cover !important;
  /* foto fica à esquerda. AJUSTE FINO: 2º valor sobe/desce o recorte (top mantém o rosto) */
  background-position: left top !important;
}
.manifesto-inner { max-width: 100%; display: flex; flex-direction: column; gap: 16px; text-align: right; }
.manifesto-inner .seu-corpo-n-o-um-card-pio { font-size: 37px; line-height: 1.12; }
.manifesto-inner .acredito-em-uma-abordagem-global-e-individualizada-o-tratamento-est-tico-e-funcional-vai-muito-al-m-de-escolher-procedimentos-isolados-meu-foco-entender-as-suas-necessidades-tratar-a-causa-e-entregar-resultados-que-unem-sa-de-bem-estar-e-est-tica-respeitando-a-sua-individualidade { font-size: 21px; line-height: 1.5; }

/* ==========================================================================
   SOBRE ("Quem é a Patrícia?") — coluna à esquerda, um pouco mais ao centro (imagem 4)
   ========================================================================== */
.frame-28 {
  min-width: 0; height: 76vh; min-height: 560px; max-height: 740px;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  padding: 0 50% 0 6%;
  background-size: cover !important;
  /* rosto fica à direita. AJUSTE FINO: 2º valor sobe/desce o recorte */
  background-position: right 28% !important;
}
.sobre-inner { max-width: 100%; margin-left: 0; display: flex; flex-direction: column; gap: 14px; }
.sobre-inner .quem-a-patr-cia { font-size: 46px; line-height: 1.08; }
.sobre-inner .crefito-4-112440-f-sou-a-dra-patr-cia-honorato-fisioterapeuta-dermatofuncional-com-ampla-experi-ncia-na-rea-dedico-minha-carreira-a-transformar-a-rela-o-das-mulheres-com-seus-corpos-atrav-s-de-tratamentos-baseados-em-ci-ncia-e-tecnologia-por-fim-deve-se-mencionar-os-locais-de-atua-o-destacando-que-os-atendimentos-s-o-realizados-na-nobilit-cl-nica-um-espa-o-preparado-para-oferecer-o-melhor-em-conforto-e-tecnologia { font-size: 20px; line-height: 1.5; }

/* ==========================================================================
   ÁREAS DE ATUAÇÃO — hover nas imagens + botão CTA
   ========================================================================== */
.image-5 { transition: transform .45s ease, box-shadow .45s ease, filter .45s ease; cursor: pointer; }
.frame-13:hover .image-5, .frame-14:hover .image-5, .frame-15:hover .image-5 {
  transform: scale(1.05); box-shadow: 0 16px 34px rgba(0,0,0,.30); filter: brightness(1.05);
}
.especialidades-cta { display: flex; justify-content: center; margin-top: 34px; }

/* ==========================================================================
   PROGRAMAS DE TRATAMENTO — círculos menores + hover elegante
   ========================================================================== */
.ellipse-1 { width: 84px !important; height: 84px !important; transition: transform .35s ease, background .35s ease, border-color .35s ease; }
/* re-centraliza os ícones dentro do círculo menor */
.layer-1, .layer-12, .layer-13, .layer-14, .outline2,
.frame, .capa-1, .line-cutting-stroke-ex, .frame2 {
  width: 54px !important; height: 54px !important; left: 15px !important; top: 15px !important;
}
.frame-16, .frame-17, .frame-18, .frame-19, .frame-20,
.frame-21, .frame-22, .frame-23, .frame-24 {
  height: auto !important; padding: 6px; border-radius: 14px; gap: 16px !important;
  transition: transform .35s ease, background .35s ease;
}
.frame-16:hover, .frame-17:hover, .frame-18:hover, .frame-19:hover, .frame-20:hover,
.frame-21:hover, .frame-22:hover, .frame-23:hover, .frame-24:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.frame-16:hover .ellipse-1, .frame-17:hover .ellipse-1, .frame-18:hover .ellipse-1,
.frame-19:hover .ellipse-1, .frame-20:hover .ellipse-1, .frame-21:hover .ellipse-1,
.frame-22:hover .ellipse-1, .frame-23:hover .ellipse-1, .frame-24:hover .ellipse-1 {
  transform: scale(1.06); background: rgba(255,255,255,.14);
}
.frame-25 {
  grid-template-columns: repeat(2, minmax(0, 460px)) !important;
  justify-content: center; align-content: start;
  gap: 16px 32px !important; max-width: 1000px; margin: 0 auto;
}
/* conteúdo dos itens proporcional aos ícones menores */
.frame-25 [class$="-span"]  { font-size: 17px !important; line-height: 1.25; }
.frame-25 [class$="-span2"] { font-size: 14.5px !important; line-height: 1.42; }
.frame-16, .frame-17, .frame-18, .frame-19, .frame-20,
.frame-21, .frame-22, .frame-23, .frame-24 { align-items: flex-start !important; }

/* ==========================================================================
   "DÊ O PRIMEIRO PASSO" — texto mais ao centro-esquerda + botão com hover
   ========================================================================== */
.frame-35 {
  min-width: 0; height: 72vh; min-height: 500px; max-height: 700px;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  padding: 0 14% 0 23%;
  background-size: cover !important;
  /* mulher fica à direita. AJUSTE FINO: 2º valor sobe/desce o recorte */
  background-position: right center !important;
}
.frame-34 { max-width: 520px; margin-left: 5%; gap: 16px; align-self: center !important; }
.frame-34 .d-o-primeiro-passo-para-a-sua-transforma-o { font-size: 46px; line-height: 1.1; }
.frame-34 .agende-sua-avalia-o-e-descubra-o-tratamento-ideal-para-as-suas-necessidades-com-um-plano-totalmente-personalizado { width: auto; font-size: 21px; line-height: 1.5; }

/* botões antigos do Figma (hero e faixa) ganham a transição elegante */
a.frame-1, a.frame-2 {
  text-decoration: none; cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease, letter-spacing .3s ease;
  box-shadow: 0 4px 14px rgba(84,65,57,.16);
}
a.frame-1:hover, a.frame-2:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(84,65,57,.34); letter-spacing: .03em; }
/* hero: passa de creme -> dourado com texto branco (mais destaque) */
a.frame-1:hover { background: var(--dourado) !important; }
a.frame-1:hover .agendar-minha-avalia-o { color: #fff !important; }
a.frame-2:hover { background: var(--dourado-escuro); }

/* ==========================================================================
   CLÍNICA — imagem à esquerda, conteúdo à direita, contatos + mapa
   ========================================================================== */
.frame-33.clinic {
  background: var(--creme); width: 100%;
  flex-direction: column; gap: 44px; padding: 80px 6%;
  align-items: center;
}
.clinic-grid {
  width: 100%; max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.clinic-photo img {
  width: 100%; height: 100%; max-height: 470px; object-fit: cover;
  border-radius: 14px; box-shadow: 0 18px 44px rgba(84,65,57,.20); display: block;
}
.clinic-info { display: flex; flex-direction: column; gap: 18px; }
.clinic-title {
  font-family: var(--display); color: var(--dourado);
  font-size: 44px; line-height: 1.1; text-transform: uppercase; font-weight: 400;
}
.clinic-text { font-family: var(--corpo); color: var(--dourado); font-size: 19px; line-height: 1.6; }
.clinic-contacts { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.clinic-contacts li { display: flex; align-items: flex-start; gap: 12px; color: var(--marrom-escuro); font-size: 16px; line-height: 1.5; }
.clinic-contacts i { color: var(--dourado); width: 20px; text-align: center; margin-top: 3px; }
.clinic-contacts a { color: var(--marrom-escuro); text-decoration: none; transition: color .25s ease; }
.clinic-contacts a:hover { color: var(--dourado); }
.clinic-info .btn-cta { align-self: flex-start; margin-top: 6px; }

.clinic-map {
  width: 100%; max-width: 1160px; margin: 0 auto;
  border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px rgba(84,65,57,.18);
  aspect-ratio: 16 / 6;
}
.clinic-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   RODAPÉ NOVO — logo à esquerda, colunas ao centro-direita, fonte menor
   ========================================================================== */
.frame-222 { display: none !important; } /* esconde rodapé antigo do Figma, se existir */

.site-footer { background: var(--marrom-escuro); color: var(--creme-claro); width: 100%; padding: 58px 6% 0; }
.footer-grid {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 40px; align-items: start;
}
.footer-brand img { width: 210px; max-width: 100%; height: auto; }
.footer-col h3 {
  font-family: var(--display); font-size: 17px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; font-weight: 500; margin-bottom: 14px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer-col a { color: var(--creme-claro); text-decoration: none; font-size: 14px; transition: color .25s ease; }
.footer-col a:hover { color: var(--dourado); }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; margin-bottom: 9px; }
.footer-contact i { color: var(--dourado); width: 18px; text-align: center; margin-top: 3px; }

.footer-bottom {
  max-width: 1160px; margin: 32px auto 0;
  border-top: 1px solid rgba(242,226,216,.18); padding: 18px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; font-size: 13px; color: rgba(242,226,216,.85);
}
.footer-bottom a { color: var(--dourado); text-decoration: none; transition: color .25s ease; }
.footer-bottom a:hover { color: #fff; }

/* ==========================================================================
   BOTÃO FLUTUANTE DO WHATSAPP (com tooltip + mini chat)
   ========================================================================== */
.joinchat { position: fixed; right: 22px; bottom: 22px; z-index: 1200; font-family: var(--corpo); }
.joinchat-button {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: #25d366; color: #fff; font-size: 30px;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  animation: joinchat-pulse 2.4s infinite;
  transition: transform .25s ease;
}
.joinchat-button:hover { transform: scale(1.06); }
@keyframes joinchat-pulse {
  0%   { box-shadow: 0 8px 24px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,.5); }
  70%  { box-shadow: 0 8px 24px rgba(37,211,102,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 8px 24px rgba(37,211,102,.45), 0 0 0 0 rgba(37,211,102,0); }
}
.joinchat-tooltip {
  position: absolute; right: 72px; top: 50%; transform: translateY(-50%);
  background: #fff; color: var(--marrom-escuro); font-size: 14px; font-weight: 500;
  padding: 9px 14px; border-radius: 10px; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(84,65,57,.22); opacity: 1; transition: opacity .3s ease;
}
.joinchat-tooltip::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border: 6px solid transparent; border-left-color: #fff; }
.joinchat.chat-open .joinchat-tooltip { opacity: 0; pointer-events: none; }
.joinchat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px;
  background: #ff3b30; color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.joinchat.chat-open .joinchat-badge { display: none; }

.joinchat-box {
  position: absolute; right: 0; bottom: 76px; width: 300px; max-width: 78vw;
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(84,65,57,.28);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96); transform-origin: bottom right;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.joinchat.chat-open .joinchat-box { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.joinchat-header { background: #075e54; color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; }
.joinchat-close { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; opacity: .85; }
.joinchat-close:hover { opacity: 1; }
.joinchat-body { padding: 18px 16px; background: #e5ddd5; }
.joinchat-bubble { background: #fff; border-radius: 4px 12px 12px 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #333; box-shadow: 0 1px 2px rgba(0,0,0,.1); margin-bottom: 14px; }
.joinchat-open {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #25d366; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 12px; border-radius: 10px; transition: background .25s ease;
}
.joinchat-open:hover { background: #1ebe5a; }

/* ==========================================================================
   BANNER DE COOKIES (LGPD)
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 1150;
  max-width: 560px; margin: 0 auto;
  background: #fff; color: var(--marrom-escuro);
  border-radius: 14px; box-shadow: 0 16px 44px rgba(84,65,57,.26);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  transform: translateY(140%); opacity: 0; transition: transform .45s ease, opacity .45s ease;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; }
.cookie-banner p { font-size: 13.5px; line-height: 1.55; margin: 0; }
.cookie-banner a { color: var(--dourado); text-decoration: underline; }
.cookie-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn-cookie-accept {
  background: var(--dourado); color: #fff; border: none; cursor: pointer;
  padding: 10px 24px; border-radius: 8px; font-family: var(--corpo);
  font-size: 14px; font-weight: 600; transition: background .25s ease, transform .2s ease;
}
.btn-cookie-accept:hover { background: var(--dourado-escuro); transform: translateY(-1px); }
.btn-cookie-link { color: var(--texto-nav); font-size: 13.5px; text-decoration: none; }
.btn-cookie-link:hover { color: var(--dourado); }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 992px) {
  .clinic-grid { grid-template-columns: 1fr; gap: 30px; }
  .clinic-photo img { max-height: 360px; }
  .clinic-map { aspect-ratio: 16 / 10; }
}
@media (max-width: 900px) {
  /* HERO: mostra a figura sem achatar e garante leitura do texto */
  .frame-26.hero { height: auto !important; min-height: 82vh; max-height: none; background-position: 72% center !important; }
  .hero-inner { margin-left: 0; }
  .frame-26.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(84,65,57,.60) 0%, rgba(84,65,57,.25) 55%, rgba(84,65,57,0) 100%); }
  .hero-inner { max-width: 100%; margin-left: 0; }
  .hero-inner .transforme-seu-corpo-com-seguran-a-especialistas-em-harmoniza-o-corporal-lipedema-e-recupera-o-p-s-operat-ria-span { font-size: 42px; }

  /* Manifesto e Sobre: altura automática p/ caber o texto no celular */
  .frame-27, .frame-28, .frame-35 { height: auto !important; min-height: 78vh; max-height: none !important; padding: 70px 7%; }
  .frame-27 { justify-content: center; }
  .manifesto-inner { text-align: center; }
  .manifesto-inner, .sobre-inner, .frame-34 { max-width: 100%; margin: 0; }
  .manifesto-inner .seu-corpo-n-o-um-card-pio,
  .sobre-inner .quem-a-patr-cia,
  .clinic-title,
  .frame-34 .d-o-primeiro-passo-para-a-sua-transforma-o { font-size: 34px; }

  /* Programas: 1 coluna */
  .frame-25 { grid-template-columns: 1fr !important; }
  .frame-25 > * { grid-column: auto !important; grid-row: auto !important; }

  /* Áreas: imagem em cima, texto embaixo */
  .frame-13, .frame-14, .frame-15 { flex-direction: column; height: auto; text-align: center; }

  .footer-grid { grid-template-columns: 1fr; text-align: left; }
  .footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .header-inner { padding: 8px 16px; }
  .brand img { height: 44px; }
  .btn-cta { font-size: 16px; padding: 13px 24px; }
  .joinchat { right: 16px; bottom: 16px; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .joinchat-button { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ==========================================================================
   CORREÇÕES DE OVERFLOW — neutraliza larguras/alturas fixas herdadas do Figma
   ========================================================================== */
.frame-29, .frame-30 { min-width: 0 !important; height: auto !important; }
.group-26, .group-262 { position: static !important; width: auto !important; height: auto !important; }
.reas-de-atua-o-especializada,
.programas-de-tratamento-e-tecnologias {
  position: static !important; left: auto !important; top: auto !important;
  width: auto !important; max-width: 100%; translate: none !important;
  margin: 0 auto; text-align: center;
}
@media (max-width: 900px) {
  .frame-13 > div, .frame-14 > div, .frame-15 > div { width: auto !important; max-width: 100%; }
  .frame-25 > div > div:not(.ellipse-1) { width: auto !important; max-width: 100%; }
  .image-5 { width: 100% !important; max-width: 360px; height: auto !important; aspect-ratio: 289/179; }
}

@media (max-width: 900px) {
  .frame-30 { padding: 60px 5vw !important; }
  .frame-29 { padding: 70px 5vw !important; }
  .frame-25 { gap: 22px !important; }
  .frame-16, .frame-17, .frame-18, .frame-19, .frame-20,
  .frame-21, .frame-22, .frame-23, .frame-24 { justify-content: flex-start; gap: 16px; }
}

/* título das seções escuras: permitir quebra e nunca exceder a tela */
.group-26, .group-262 { max-width: 100% !important; }
.reas-de-atua-o-especializada, .programas-de-tratamento-e-tecnologias { max-width: 100% !important; overflow-wrap: break-word; }

/* telas muito estreitas (<=380px): ícone acima do texto nos programas */
@media (max-width: 380px) {
  .frame-16, .frame-17, .frame-18, .frame-19, .frame-20,
  .frame-21, .frame-22, .frame-23, .frame-24 {
    flex-direction: column; align-items: center; text-align: center; gap: 12px;
  }
  .frame-25 > div > div:not(.ellipse-1) { text-align: center; }
}

@media (max-width: 900px) {
  /* impede que os itens da grade excedam a coluna em telas estreitas */
  .frame-25 > div { min-width: 0 !important; width: 100% !important; }
  .frame-25 > div > div:not(.ellipse-1) { min-width: 0 !important; }
}

/* impede imagens de estourarem as colunas do grid (fix clássico min-width:auto) */
.clinic-grid > * { min-width: 0; }
.clinic-photo img { max-width: 100%; }

/* equilíbrio das linhas do título do hero */
.hero-inner .transforme-seu-corpo-com-seguran-a-especialistas-em-harmoniza-o-corporal-lipedema-e-recupera-o-p-s-operat-ria-span { text-wrap: balance; }

@media (max-width: 992px) {
  .hero-inner .transforme-seu-corpo-com-seguran-a-especialistas-em-harmoniza-o-corporal-lipedema-e-recupera-o-p-s-operat-ria-span { white-space: normal; }
}


/* ==========================================================================
   SEÇÃO DE CITAÇÃO (meio do site)
   ========================================================================== */
.quote-band {
  width: 100%; background: var(--creme);
  padding: 92px 6%; display: flex; justify-content: center;
  border-top: 1px solid rgba(175,130,69,.12);
  border-bottom: 1px solid rgba(175,130,69,.12);
}
.quote-inner { max-width: 880px; text-align: center; position: relative; }
.quote-mark {
  display: block; font-family: var(--display); color: var(--dourado);
  font-size: 96px; line-height: .6; opacity: .4; margin-bottom: 6px;
}
.quote-text {
  font-family: var(--corpo); font-style: italic; font-weight: 300;
  font-size: 29px; line-height: 1.55; color: var(--marrom-escuro);
}
.quote-text strong {
  font-family: var(--display); font-style: normal; font-weight: 500;
  color: var(--dourado); letter-spacing: .06em;
}
@media (max-width: 700px) {
  .quote-band { padding: 64px 8%; }
  .quote-text { font-size: 22px; }
  .quote-mark { font-size: 72px; }
}

/* ==========================================================================
   V3 — Hero novo, seção Sobre com foto, ícones robustos e correções mobile
   ========================================================================== */

/* ---------- HERO (novo texto/headline) ---------- */
.hero-title {
  font-family: var(--display); font-weight: 400; color: #fff;
  font-size: 29px; line-height: 1.22; letter-spacing: .01em;
}
.hero-sub {
  font-family: var(--corpo); font-weight: 300; color: #fff;
  font-size: 19px; line-height: 1.45;
}

/* ---------- SEÇÃO "QUEM É A PATRÍCIA" (2 colunas + foto recortada) ---------- */
.sobre { width: 100%; overflow: hidden;
  background: linear-gradient(115deg, #a3865a 0%, #c1a473 55%, #d6c398 100%); }
.sobre-grid {
  max-width: 1180px; margin: 0 auto; padding: 0 6%;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 30px;
  min-height: 600px;
}
.sobre-text { align-self: center; padding: 72px 0; max-width: 560px; }
.sobre-title {
  font-family: var(--display); color: #fff; font-weight: 400;
  font-size: 46px; line-height: 1.1; text-transform: uppercase; margin-bottom: 14px;
}
.sobre-crefito { font-family: var(--corpo); color: #fff; font-size: 16px; margin-bottom: 18px; }
.sobre-body { font-family: var(--corpo); color: #fff; font-size: 17.5px; line-height: 1.55; margin-bottom: 14px; }
.sobre-body--bold { font-weight: 600; }
.sobre-photo { align-self: end; display: flex; justify-content: center; align-items: flex-end; }
.sobre-photo img { width: 100%; max-width: 440px; height: auto; display: block;
  filter: drop-shadow(0 18px 34px rgba(60,40,25,.32)); }

/* ---------- PROGRAMAS — ícones centralizados no círculo (robusto p/ todos) ---------- */
.frame-25 > div {
  position: relative; display: flex; align-items: center !important;
  min-height: 92px; padding: 6px 6px 6px 108px !important;
  border-radius: 14px; height: auto !important;
  transition: transform .35s ease, background .35s ease;
}
.frame-25 > div > .ellipse-1 {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 84px !important; height: 84px !important; margin: 0 !important;
  transition: transform .35s ease, background .35s ease;
}
.frame-25 > div > *:last-child {
  position: absolute !important; left: 12px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  width: 84px !important; height: 84px !important; margin: 0 !important;
  padding: 19px !important; box-sizing: border-box !important;
  object-fit: contain !important; object-position: center !important;
}
.frame-25 > div > *:nth-child(2) { width: 100%; }
.frame-25 > div:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.frame-25 > div:hover > .ellipse-1 { transform: translateY(-50%) scale(1.06); background: rgba(255,255,255,.14); }

/* ==========================================================================
   MOBILE (correções dos prints)
   ========================================================================== */
@media (max-width: 900px) {
  /* Sobre: empilha texto e foto (sem sobreposição) */
  .sobre-grid { grid-template-columns: 1fr; min-height: 0; gap: 4px; text-align: center; }
  .sobre-text { padding: 54px 0 8px; max-width: 100%; align-self: auto; }
  .sobre-title { font-size: 31px; }
  .sobre-photo img { max-width: 290px; }

  /* Manifesto e "Dê o primeiro passo": painel translúcido p/ o texto não sumir na foto */
  .manifesto-inner, .frame-34 {
    background: rgba(248,243,236,.92);
    padding: 24px 22px !important; border-radius: 14px;
    box-shadow: 0 10px 30px rgba(84,65,57,.18);
  }
  .frame-34 { align-self: center !important; }

  /* Hero: escurece mais o fundo p/ o texto branco ficar legível sobre a foto */
  .frame-26.hero::after {
    background: linear-gradient(90deg, rgba(58,44,36,.74) 0%, rgba(58,44,36,.50) 55%, rgba(58,44,36,.30) 100%) !important;
  }
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 17px; }

  /* Títulos grandes no celular (corrige "TECNOLOGIA/S" e quebra ruim) */
  .reas-de-atua-o-especializada,
  .programas-de-tratamento-e-tecnologias { font-size: 27px !important; line-height: 1.18; }
  .manifesto-inner .seu-corpo-n-o-um-card-pio { font-size: 28px; }
}

@media (max-width: 900px) {
  /* Hero: respiro nas laterais (não colar no canto) */
  .hero-inner { margin-left: 0; padding: 0 22px; }

  /* "Dê o primeiro passo": título/texto/botão menores e sem quebra ruim */
  .frame-34 .d-o-primeiro-passo-para-a-sua-transforma-o { font-size: 26px !important; }
  .frame-34 .agende-sua-avalia-o-e-descubra-o-tratamento-ideal-para-as-suas-necessidades-com-um-plano-totalmente-personalizado { font-size: 16px !important; }
  a.frame-2 { padding: 12px 20px !important; }
  a.frame-2 .agendar-minha-avalia-o2 { font-size: 16px !important; white-space: nowrap; }
  .manifesto-inner, .frame-34 { background: rgba(248,243,236,.96); }
}
@media (max-width: 560px) {
  /* Programas: "badge" (círculo+ícone) menor no celular */
  .frame-25 > div { padding-left: 92px !important; min-height: 82px; }
  .frame-25 > div > .ellipse-1 { width: 72px !important; height: 72px !important; left: 8px !important; }
  .frame-25 > div > *:last-child { width: 72px !important; height: 72px !important; left: 8px !important; padding: 16px !important; }
}




/* ==========================================================================
   MANIFESTO — duas colunas: foto à esquerda (de ponta a ponta) + texto à direita
   ========================================================================== */
.manifesto { width: 100%; background: #f6f1e8; overflow: hidden; }
.manifesto-grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; align-items: stretch;
  min-height: 600px;
}
.manifesto-photo { position: relative; min-height: 600px; }
.manifesto-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
.manifesto-text {
  align-self: center; padding: 70px 8%; max-width: 720px;
}
.manifesto-title {
  font-family: var(--display); color: var(--dourado); font-weight: 400;
  font-size: 38px; line-height: 1.14; text-transform: uppercase; margin-bottom: 18px;
}
.manifesto-body {
  font-family: var(--corpo); color: var(--dourado); font-size: 18px; line-height: 1.6;
}

@media (max-width: 900px) {
  .manifesto-grid { grid-template-columns: 1fr; min-height: 0; }
  .manifesto-photo { min-height: 340px; height: 62vh; max-height: 460px; }
  .manifesto-photo img { position: absolute; }
  .manifesto-text { padding: 48px 7%; max-width: 100%; text-align: center; }
  .manifesto-title { font-size: 27px; }
}


@media (max-width: 900px) {
  /* Botão do hero: largura conforme o texto e sem quebra de linha */
  .hero-inner a.frame-1 { align-self: flex-start !important; width: auto !important; padding: 13px 22px !important; }
  a.frame-1 .agendar-minha-avalia-o { font-size: 16px !important; white-space: nowrap !important; }
}