/* Wordmark da Dra. Carolina Okimoto na navbar. O link do logo fica mais alto
   que a linha do menu; a margem negativa mantém a altura original da barra. */
.framer-b3pg68 {
    height: 68px !important;
    margin-block: -20px;
}
/* No celular a barra cresce junto com a wordmark, para sobrar respiro em
   cima e embaixo (pedido de 12/10/2026). */
@media (max-width: 809.98px) {
    .framer-b3pg68 {
        height: 52px !important;
        margin-block: 0;
    }
    /* A barra é fixa e ficou 16 px mais alta; o conteúdo desce o mesmo tanto. */
    .framer-11hb6jp-container ~ .framer-XXWUU > :first-child {
        margin-top: 16px;
    }
}

/* Wordmark no rodapé, no lugar do logo de 136x26 px do template. */
.framer-144dr09 {
    width: 219px !important;
    height: 76px !important;
}

/* A foto de atendimento preserva o quadro e o arredondamento originais.
   No celular, a proporção da foto evita cortar o rosto ou o aparelho. */
@media (max-width: 809.98px) {
    .framer-1gpytvh-container:has(> .marca-foto-atendimento) {
        height: auto !important;
        aspect-ratio: 4 / 3;
    }
}

/* Carrossel de categorias em "Nossos tratamentos" (scripts/marca-carrossel.js).
   Cores e fontes são as do próprio site; canto de 16 px nos cartões, como o
   manual indica. */
.marca-categorias-bloco {
    width: 100%;
}
.marca-carrossel-trilho {
    display: flex;
    column-gap: 20px;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.marca-carrossel-trilho::-webkit-scrollbar {
    display: none;
}
@media (hover: hover) {
    .marca-carrossel-trilho {
        cursor: grab;
        user-select: none;
    }
}
.marca-carrossel-trilho.marca-carrossel-arrastando {
    cursor: grabbing;
    scroll-snap-type: none;
}
.marca-carrossel-cartao img {
    -webkit-user-drag: none;
}
.marca-carrossel-cartao {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 60px) / 4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-snap-align: start;
}
.marca-carrossel-cartao img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 12px;
    background: rgb(233, 217, 200);
}
.marca-carrossel-cartao h3 {
    margin: 0;
    font-family: "Hedvig Letters Serif", "Hedvig Letters Serif Placeholder", serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    color: rgb(99, 59, 44);
}
.marca-carrossel-cartao p {
    margin: 0;
    font-family: "General Sans", "General Sans Placeholder", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: rgb(122, 104, 93);
}
.marca-carrossel-botoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 28px;
}
.marca-carrossel-seta {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(99, 59, 44, 0.2);
    border-radius: 50%;
    background: transparent;
    color: rgb(99, 59, 44);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.marca-carrossel-seta:hover:not(:disabled) {
    background: rgb(99, 59, 44);
    color: rgb(253, 247, 239);
}
.marca-carrossel-seta:focus-visible {
    outline: 2px solid rgb(152, 106, 62);
    outline-offset: 3px;
}
.marca-carrossel-seta:disabled {
    opacity: 0.35;
    cursor: default;
}
.marca-carrossel-seta-voltar svg {
    transform: scaleX(-1);
}
@media (max-width: 1199.98px) {
    .marca-carrossel-cartao {
        flex-basis: calc((100% - 40px) / 2.6);
    }
}
@media (max-width: 809.98px) {
    .marca-carrossel-trilho {
        column-gap: 12px;
    }
    .marca-carrossel-cartao {
        flex-basis: 68%;
    }
    .marca-carrossel-cartao h3 {
        font-size: 22px;
    }
    .marca-carrossel-botoes {
        margin-top: 20px;
    }
}

/* Ícone trama no lugar da flor do template. O desenho é mais fino que a flor,
   então aparece um pouco maior dentro da mesma caixa. Nos botões o próprio
   template gira o ícone 180 graus no hover (.framer-x1zsfu); nos demais links
   e botões (o de enviar formulário, por exemplo) o giro vem daqui. */
img[src*="marca-icone-trama"] {
    transform: scale(1.3);
    transition: transform 0.5s cubic-bezier(0.44, 0, 0.56, 1);
}
:is(a, button):hover :not(.framer-x1zsfu) > div > img[src*="marca-icone-trama"] {
    transform: scale(1.3) rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    img[src*="marca-icone-trama"] {
        transition: none;
    }
}

/* Etiquetas de seção ("Tratamentos", "Cuidado especializado em cada etapa"
   etc.): sem a bolinha, em todas as páginas (pedido de 11/10/2026). */
.framer-609we5 {
    display: none;
}

/* Botões de Instagram, WhatsApp e mapa na primeira coluna do rodapé, abaixo
   da wordmark: alinhados à esquerda, com o tamanho do próprio conteúdo. */
.framer-166qxni .framer-1jz8fii {
    flex: none !important;
    width: auto !important;
    justify-content: flex-start !important;
    overflow: visible;
}

/* Foto do rodapé: o rodapé é mais alto que a foto e corta as laterais.
   Puxa o enquadramento para a direita, onde estão as mãos. */
.framer-1ob81dz img {
    object-position: 85% center !important;
}

/* Ícone acima de "Conheça nossos tratamentos", no topo da página inicial: a
   18 px o desenho da trama embolava. A caixa cresce para 30 px e sobe para
   fora do botão, que deixa de recortar, sem mudar a altura dele. */
.framer-mE1Qv {
    overflow: visible !important;
}
.framer-mE1Qv .framer-18zvy5m {
    width: 30px !important;
    height: 30px !important;
    margin-top: -12px;
    overflow: visible !important;
}
.framer-18zvy5m img[src*="marca-icone-trama"] {
    transform: none;
}
a:hover .framer-18zvy5m img[src*="marca-icone-trama"] {
    transform: rotate(180deg);
}

/* Pílulas giratórias do topo: letra um pouco menor e menos folga à direita,
   para o rótulo mais longo caber. Se algum ainda passar, termina em
   reticências em vez de ser cortado no meio da letra. */
.framer-oMy7n {
    padding-right: 12px !important;
}
.framer-oMy7n .framer-jlbwfp {
    flex: 1 1 0 !important;
    min-width: 0;
    overflow: hidden;
}
.framer-oMy7n .framer-jlbwfp p {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botão do topo da página inicial: no celular o texto é mais curto, "Nossos
   tratamentos" (pedido de 12/10/2026). O texto original fica no HTML para
   leitores de tela e some só visualmente. */
@media (max-width: 809.98px) {
    .framer-mE1Qv p {
        font-size: 0 !important;
    }
    .framer-mE1Qv p::after {
        content: "Nossos tratamentos";
        font-size: 14px;
    }
}

/* Seção da frase de apresentação, no desktop (a galeria só existe a partir de
   1200 px). As quatro mídias ficam do mesmo tamanho, duas de cada lado, e o
   texto ocupa só a coluna do meio, para passar entre elas e não por trás. */
@media (min-width: 1200px) {
    .framer-1cn78bf {
        --marca-midia: clamp(200px, 17vw, 280px);
    }
    .framer-1w04dh0 .framer-17jhv6u,
    .framer-1w04dh0 .framer-1un9t5e-container,
    .framer-1w04dh0 .framer-ytp3ha,
    .framer-1w04dh0 .framer-panede {
        width: var(--marca-midia) !important;
        height: calc(var(--marca-midia) * 1.3) !important;
        aspect-ratio: auto !important;
    }
    .framer-1w04dh0 .framer-uemcly,
    .framer-1w04dh0 .framer-ffnq4 {
        height: auto !important;
    }
    .framer-1cn78bf .framer-1rwlcjf {
        max-width: calc(100vw - 200px - 2 * var(--marca-midia) - 120px) !important;
    }
}

/* Ícone trama em 3D abaixo da frase de apresentação (scripts/marca-3d.js). */
.marca-icone-3d {
    flex: none;
    width: 190px;
    height: 190px;
}
.marca-icone-3d canvas {
    display: block;
    width: 100%;
    height: 100%;
}
@media (max-width: 809.98px) {
    .marca-icone-3d {
        width: 150px;
        height: 150px;
    }
}

/* A foto que entrou no lugar do vídeo da galeria herda o canto arredondado. */
.framer-1w04dh0 .framer-1un9t5e-container {
    border-radius: 20px;
    overflow: hidden;
}

/* Seção da frase de apresentação abaixo de 1200 px: fica presa na tela
   (100svh) enquanto as fotos sobem uma por vez, alternando os lados
   (scripts/marca-subida.js). O texto ocupa só a coluna entre as fotos. */
.marca-subida {
    display: none;
}
@media (max-width: 1199.98px) {
    .framer-1cn78bf {
        --marca-foto: 20vw;
        --marca-borda: 30px;
        --marca-coluna: calc(100vw - 2 * (var(--marca-foto) + var(--marca-borda) + 30px));
        display: block !important;
        align-content: normal !important;
        height: 282svh !important;
        padding: 0 !important;
        /* O bloco preso tem a altura da tela e o conteúdo fica no meio dele,
           o que deixava um vazio grande antes e depois. A seção sobe sobre o
           fim da anterior e a seguinte sobe sobre o fim desta, o bastante para
           sobrar um respiro normal. Os números são a altura aproximada do
           conteúdo (etiqueta, frase e ícone) no tablet. */
        margin-top: min(0px, calc(201px - 50svh)) !important;
        margin-bottom: min(0px, calc(387px - 50svh)) !important;
        pointer-events: none;
    }
    .framer-1cn78bf .framer-9r21nx {
        display: block !important;
        /* O template centraliza o conteúdo com align-content, que também vale
           em bloco: o texto preso começava no meio da seção, depois de uma
           tela e meia em branco. */
        align-content: normal !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        padding: 0 !important;
    }
    .framer-1cn78bf .framer-1q2157c {
        position: sticky !important;
        top: 0;
        width: 100% !important;
        height: 100svh !important;
        box-sizing: border-box;
        padding-top: 72px !important;
        justify-content: center !important;
        /* O template move e encolhe este bloco conforme a rolagem; preso na
           tela, ele precisa ficar parado e visível. */
        transform: none !important;
        opacity: 1 !important;
    }
    .framer-1cn78bf .framer-1rwlcjf {
        max-width: var(--marca-coluna) !important;
    }
    .marca-subida {
        display: block;
        position: absolute;
        inset: 0;
        overflow: clip;
        pointer-events: none;
    }
    .marca-subida img {
        position: absolute;
        top: 0;
        left: var(--marca-borda);
        width: var(--marca-foto);
        aspect-ratio: 10 / 13;
        object-fit: cover;
        border-radius: 20px;
        transform: translate3d(0, 100svh, 0);
        will-change: transform;
    }
    .marca-subida img:nth-child(even) {
        left: auto;
        right: var(--marca-borda);
    }
}
/* No celular as fotos passam inteiras e as bordas delas podem cobrir o
   começo e o fim das linhas da frase (pedido do Gustavo em 12/10/2026). */
@media (max-width: 809.98px) {
    .framer-1cn78bf {
        --marca-foto: 27vw;
        --marca-borda: 8px;
        --marca-coluna: calc(100vw - 140px);
        margin-top: min(0px, calc(169px - 50svh)) !important;
        margin-bottom: min(0px, calc(321px - 50svh)) !important;
    }
    .framer-1cn78bf .framer-1rwlcjf {
        gap: 2px 7px !important;
    }
    .framer-1cn78bf .framer-1rwlcjf .framer-text {
        font-size: clamp(20px, 6.2vw, 28px) !important;
        line-height: 1.25 !important;
    }
    .marca-subida img {
        border-radius: 16px;
    }
}

/* Identificação da clínica no rodapé: ocupa a linha inteira acima do crédito
   e do copyright, com um fio fino separando do resto. */
.framer-1pxck0l {
    flex-wrap: wrap !important;
    row-gap: 24px;
}
.marca-legal {
    flex: 0 0 100%;
    box-sizing: border-box;
    padding-top: 24px;
    border-top: 1px solid rgba(99, 59, 44, 0.12);
    font-family: "General Sans", "General Sans Placeholder", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgb(122, 104, 93);
}
.marca-legal p {
    margin: 0;
}
.marca-legal .marca-legal-nome {
    color: rgb(99, 59, 44);
    letter-spacing: 0.04em;
}
/* No tablet e no celular a faixa vira coluna: cada bloco ocupa a largura
   toda e o texto pode quebrar, em vez de sair pela lateral. */
@media (max-width: 1199.98px) {
    .marca-legal {
        flex: none;
        width: 100%;
    }
    .framer-1pxck0l .framer-xc3wen,
    .framer-1pxck0l .framer-h1lh2m {
        width: 100% !important;
        white-space: normal !important;
    }
    .framer-1pxck0l .framer-xc3wen p,
    .framer-1pxck0l .framer-h1lh2m p {
        white-space: normal !important;
    }
}
@media (max-width: 809.98px) {
    .marca-legal,
    .framer-1pxck0l .framer-xc3wen p,
    .framer-1pxck0l .framer-h1lh2m p {
        text-align: center !important;
    }
}

/* Entrada escalonada da frase de apresentação (scripts/marca-frase.js). As
   palavras só ficam escondidas depois que o script marca a frase, para não
   sumirem se ele não carregar. */
.marca-frase .framer-text {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-0.5em);
    transition: opacity 0.6s linear, filter 0.6s linear, transform 0.6s linear;
    will-change: opacity, filter, transform;
}
.marca-frase.marca-frase-visivel .framer-text {
    opacity: 1;
    filter: blur(0);
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .marca-frase .framer-text {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}

/* Seção "Quiet Beauty por" + wordmark, entre o topo e a frase de
   apresentação. A altura é a do conteúdo, com respiro em cima e embaixo:
   em uma tela inteira sobrava espaço morto (pedido de 12/10/2026). */
.marca-assinatura {
    flex: none;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2.4vw, 32px);
    padding: clamp(72px, 9vw, 112px) 24px 64px;
}
/* No desktop a seção do topo já deixa 200 px embaixo e a da frase 100 px em
   cima; esta deixa os 200 px de cima como estão e 208 px abaixo da wordmark. */
@media (min-width: 1200px) {
    .marca-assinatura {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 208px;
    }
}
/* Abaixo de 1200 px a seção seguinte sobe sobre o fim desta (margem negativa
   do bloco preso); o respiro de baixo compensa. */
@media (max-width: 1199.98px) {
    .marca-assinatura {
        padding-bottom: 232px;
    }
}
.marca-assinatura-texto {
    margin: 0;
    font-family: "Hedvig Letters Serif", "Hedvig Letters Serif Placeholder", serif;
    font-size: clamp(34px, 5vw, 72px);
    font-weight: 400;
    line-height: 1.1;
    color: rgb(99, 59, 44);
    text-align: center;
}
.marca-assinatura-logo {
    display: block;
    width: clamp(260px, 36vw, 560px);
    height: auto;
}

/* Botão "Agendar consulta" da navbar igual ao botão principal do site
   ("Agendar consulta"): fundo bronze, texto branco e o ícone dentro do círculo
   branco (pedido do Gustavo em 12/10/2026, depois de testar a versão em
   café). O seletor usa a classe do componente porque, no hover, o template
   tira o nome (data-framer-name) do botão. */
nav a.framer-2oe2s5 {
    background-color: rgb(152, 106, 62) !important;
}
nav a.framer-2oe2s5 p {
    --framer-text-color: rgb(255, 255, 255) !important;
}
nav a.framer-2oe2s5 .framer-1f1ikpr,
nav a.framer-2oe2s5 .framer-1cln3iq {
    background-color: rgb(255, 255, 255) !important;
}

/* Cartão "Uma clínica comprometida com você", no desktop: a foto ganha a
   altura da coluna de texto, para a etiqueta alinhar com o topo da foto e o
   botão com a base. */
@media (min-width: 1200px) {
    .framer-1cftz4f .framer-9sg8e4,
    .framer-1cftz4f .framer-d8iv6w {
        height: 100% !important;
        aspect-ratio: auto !important;
    }
    .framer-1cftz4f .framer-8x1zdy {
        height: 100% !important;
        justify-content: space-between !important;
    }
}

/* Ícone trama do cartão da médica: em 24 px o traço fino serrilhava. A caixa
   passa a 40 px e o ícone ocupa a caixa inteira, sem a ampliação por escala. */
.framer-oaxxfl .framer-odeuyq {
    width: 40px !important;
    height: 40px !important;
}
.framer-oaxxfl .framer-odeuyq img[src*="marca-icone-trama"] {
    transform: none;
}

/* Trama oficial na legenda da foto da Carolina na página Sobre. */
.framer-1kfxba3 .framer-1tervd1 {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
}
.framer-1kfxba3 .framer-1tervd1 img {
    transform: none;
    object-fit: contain;
}

.marca-contato-horarios {
    position: absolute;
    z-index: 1;
    left: 20px;
    right: 20px;
    bottom: 20px;
    box-sizing: border-box;
    max-width: none;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #fff0 0%, #986a3e80 100%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: #fffdf9;
    font-family: Inter, sans-serif;
}
.marca-contato-horarios::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #986a3e80 0%, #986a3e99 100%);
    filter: blur(30px);
    opacity: 0.6;
    pointer-events: none;
}
.marca-contato-horarios h3 {
    margin: 0 0 8px;
    font-family: "Hedvig Letters Serif", "Hedvig Letters Serif Placeholder", serif;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400;
    color: inherit;
}
.marca-contato-horarios ul {
    display: grid;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.4;
}
.marca-contato-horarios li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 16px;
}
.marca-horario-dia { font-weight: 500; }
.marca-horario-valor { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 809.98px) {
    .marca-contato-horarios {
        left: 20px;
        right: 20px;
        bottom: 20px;
        max-width: none;
        padding: 14px 16px;
        border-radius: 16px;
    }
    .marca-contato-horarios h3 { font-size: 21px; margin-bottom: 6px; }
    .marca-contato-horarios ul { font-size: 13px; gap: 4px; }
}

/* Local único da clínica, com os mesmos dados usados no rodapé. */
.marca-local-bloco {
    width: 100%;
    max-width: 1120px;
}
.marca-local-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    overflow: hidden;
    border-radius: 32px;
    background: #f7ecdf;
}
.marca-local-marca {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px;
    background: #f4ece3 url('/assets/marca-trama-fio.svg') center / 240px 240px repeat;
}
.marca-local-marca img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}
.marca-local-info {
    padding: 48px;
    color: #806e62;
    font-family: Inter, sans-serif;
}
.marca-local-info h3 {
    margin: 0 0 24px;
    font-family: "Hedvig Letters Serif", "Hedvig Letters Serif Placeholder", serif;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 400;
    color: #633b2c;
}
.marca-local-info address { font-style: normal; }
.marca-local-info p {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.6;
}
.marca-local-telefone {
    color: inherit;
    font-size: 18px;
    text-decoration: none;
}
.marca-local-telefone:hover { text-decoration: underline; }
.marca-local-mapa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 13px 22px;
    border-radius: 999px;
    background: #9e7043;
    color: #fffdf9;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s;
}
.marca-local-mapa img {
    width: 26px;
    height: 26px;
    padding: 5px;
    box-sizing: border-box;
    background: #fffdf9;
    border-radius: 50%;
}
.marca-local-mapa:hover { background: #633b2c; }
.marca-local-card a:focus-visible { outline: 2px solid #633b2c; outline-offset: 5px; }
.marca-politica { color: #806e62; }
.marca-politica h2 { margin: 36px 0 16px; }
.marca-politica h2:first-child { margin-top: 0; }
.marca-politica p { margin: 0 0 16px; line-height: 1.65; }
.marca-politica ul { margin: 0 0 24px; padding-left: 24px; }
.marca-politica li { margin-bottom: 10px; line-height: 1.65; }
.marca-politica a { color: #633b2c; text-underline-offset: 3px; }
@media (max-width: 809.98px) {
    .marca-local-card { grid-template-columns: 1fr; border-radius: 24px; }
    .marca-local-marca { padding: 32px; }
    .marca-local-marca img { max-width: 230px; }
    .marca-local-info { padding: 32px; }
    .marca-local-info h3 { font-size: 28px; }
    .marca-local-info p { font-size: 16px; }
}

/* Trama branca repetida na apresentação da médica na home. */
.framer-1k8s1rt {
    background-image: url("/assets/marca-trama-fio.svg");
    background-size: 240px 240px;
    background-position: center top;
    background-repeat: repeat;
}

/* Cartão do nome da médica no celular (pedido do Gustavo em 12/10/2026): o
   cartão cobria o rosto. Fica baixo, com o ícone ao lado do texto, letras bem
   menores e só "Médica - CRM-SP ..." na segunda linha. */
.marca-so-celular {
    display: none;
}
@media (max-width: 809.98px) {
    .marca-so-telas-largas {
        display: none;
    }
    .marca-so-celular {
        display: inline;
    }
    .framer-oaxxfl {
        top: auto !important;
        height: auto !important;
        padding: 12px !important;
    }
    .framer-oaxxfl .framer-qxjomm {
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: auto !important;
        padding: 12px 16px !important;
    }
    .framer-oaxxfl .framer-1yh9zmo {
        align-items: flex-start !important;
        gap: 2px !important;
        height: auto !important;
        width: auto !important;
    }
    .framer-oaxxfl h2 {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }
    .framer-oaxxfl p {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    .framer-oaxxfl .framer-odeuyq {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Cartão "Avaliação da pele": sem o selo "Grátis" do template; a avaliação
   não é gratuita e o site não fala de preço (pedido de 12/10/2026). */
.framer-1395ubc .framer-xz0ays {
    display: none !important;
}
/* Sem o selo o cartão encolhia e a base dele deixava de alinhar com o vídeo ao
   lado: ele passa a ocupar o espaço que sobra na coluna. */
.framer-1cl7edk .framer-1395ubc {
    flex: 1 1 auto !important;
    height: auto !important;
    justify-content: center !important;
}
.framer-1b5rdob {
    align-items: stretch !important;
}
.framer-1b5rdob > .framer-1cl7edk {
    height: auto !important;
    align-self: stretch !important;
}

/* Cartão "Suporte para consultas" sobre a foto da recepção: menor e no canto
   de baixo, à esquerda, para não cobrir o rosto da secretária, que fica no
   terço direito da foto. */
.framer-10llhsd {
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: max-content !important;
    height: auto !important;
    max-width: calc(100% - 40px);
    padding: 20px !important;
}
.framer-10llhsd .framer-1t2ukbf {
    width: max-content !important;
    max-width: 100%;
    height: auto !important;
    padding: 20px !important;
}
.framer-10llhsd .framer-sfzlc {
    width: auto !important;
    height: auto !important;
    gap: 12px !important;
}
.framer-10llhsd .framer-4yac5l {
    width: 28px !important;
    height: 28px !important;
}
.framer-10llhsd .framer-geh59a {
    width: auto !important;
    height: auto !important;
}
.framer-10llhsd h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
}

/* Foto vertical da recepção no celular (9:16), com o cartão de suporte
   embaixo. */
@media (max-width: 809.98px) {
    .framer-a7uj4x {
        height: auto !important;
        aspect-ratio: 9 / 16;
    }
    .framer-a7uj4x .framer-1n6rqv0 {
        overflow: hidden !important;
    }
    .framer-a7uj4x .framer-1n6rqv0 img {
        object-position: right top !important;
        transform: scale(2) !important;
        transform-origin: right 35%;
        border-radius: 0 !important;
    }
}
@media (max-width: 359.98px) {
    .framer-a7uj4x .framer-1n6rqv0 img { transform: scale(1.6) !important; }
}
@media (min-width: 410px) and (max-width: 599.98px) {
    .framer-a7uj4x .framer-1n6rqv0 img { transform: scale(2.3) !important; }
}
@media (min-width: 600px) and (max-width: 809.98px) {
    .framer-a7uj4x .framer-1n6rqv0 img {
        object-position: center !important;
        transform: none !important;
    }
}

/* Bloco "Dermatologia clínica" no desktop: com oito itens a coluna de texto
   cresce, e a foto acompanha a altura dela para as duas bases alinharem. */
@media (min-width: 1200px) {
    .framer-a7uj4x {
        height: auto !important;
        align-self: stretch !important;
    }
}

/* Seção "O que nossos pacientes dizem": canto de 32 px e a trama em branco
   no fundo, como na seção da médica (pedido de 12/10/2026). */
.framer-1suwj66 {
    border-radius: 32px;
    background-image: url("/assets/marca-trama-fio.svg");
    background-size: 240px 240px;
    background-position: center top;
}

/* Comparação: sem título de resultados ou linha de prazo/prévia.
   Gustavo pediu manter somente Cuidados com a acne em 14/10/2026. */
.framer-pn7rdo {
    display: none !important;
}

/* Legenda da comparação: tamanho acompanha o conteúdo e admite quebra. */
.framer-1zlc0c .framer-1m0xbp {
    gap: 16px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    overflow: visible !important;
}
.framer-1zlc0c .framer-1bo8o3v { min-width: 0; overflow: visible !important; }
.framer-1zlc0c :is(.framer-cnz4pf-container, .framer-1ggtcf-container) {
    width: max-content !important;
    max-width: 100% !important;
    height: auto !important;
    flex: none !important;
}
.framer-1zlc0c .framer-lO06e {
    width: max-content !important;
    max-width: 100% !important;
    height: auto !important;
    gap: 8px !important;
    overflow: visible !important;
}
.framer-1zlc0c .framer-qef2dy {
    min-width: 0;
    width: auto !important;
    height: auto !important;
    flex: 0 1 auto !important;
    white-space: normal !important;
}
.framer-1zlc0c .framer-qef2dy p { white-space: normal !important; }

/* O ano fica dentro do cartão, com respiro para as letras e os cantos. */
.framer-147i9cv { padding-bottom: 64px !important; }
.framer-147i9cv .framer-v4oh5h {
    left: 20px !important;
    bottom: 16px !important;
    width: calc(100% - 40px) !important;
    max-height: 40px;
    overflow: visible !important;
}
/* Indicadores da página Sobre: contraste sobre a foto clara de pele. */
.framer-1unvnn6 .framer-18dsyvy::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 30%, rgba(43, 33, 28, 0.68) 100%);
    z-index: 1;
}
.framer-1unvnn6 .framer-1y2mclf {
    z-index: 2 !important;
}
.marca-indicador-sobre { text-align: center; color: #fff; }
.marca-indicador-valor {
    margin: 0;
    font-family: "Hedvig Letters Serif", serif;
    font-size: 80px;
    line-height: 1;
}
.marca-indicador-rotulo {
    margin: 8px 0 0;
    font-family: "General Sans", sans-serif;
    font-size: 18px;
    line-height: 1.3;
}
@media (max-width: 809.98px) {
    .marca-indicador-valor { font-size: 50px; }
    .marca-indicador-rotulo { font-size: 16px; }
}
/* Seção de cuidados na página Sobre: dois grupos iguais, ícones voltados
   para o vídeo e linhas de texto com a mesma altura. */
.framer-zgcrpa .framer-1romo9h {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 28vw, 380px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 40px !important;
}
.framer-zgcrpa :is(.framer-1f2vgm4, .framer-xfhssq) {
    display: grid !important;
    grid-template-rows: repeat(2, 1fr);
    align-items: start !important;
    align-content: stretch !important;
    width: 100% !important;
    height: 400px !important;
    gap: 48px !important;
    overflow: visible !important;
}
.framer-zgcrpa .framer-1fzrgnj { width: 100% !important; }
.framer-zgcrpa .framer-ujr0fh-container { width: 100% !important; height: 512px !important; }
.marca-cuidado-cartao {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    align-content: start;
    align-items: start;
}
.framer-1f2vgm4 .marca-cuidado-cartao { grid-template-columns: minmax(0, 1fr) 64px; }
.framer-1f2vgm4 .marca-cuidado-icone { grid-column: 2; grid-row: 1; }
.framer-1f2vgm4 .marca-cuidado-texto { grid-column: 1; grid-row: 1; text-align: right; }
.marca-cuidado-icone {
    width: 64px; height: 64px; display: grid; place-items: center;
    background: #FAF6F1; border-radius: 16px; color: #A07A3E;
}
.marca-cuidado-icone svg { width: 32px; height: 32px; }
.marca-cuidado-texto h3 {
    font-family: "Hedvig Letters Serif", serif;
    font-size: 26px; font-weight: 400; line-height: 1.2;
    min-height: 62.4px; margin: 0 0 14px; color: #633B2C;
}
.marca-cuidado-texto p {
    font-family: "General Sans", sans-serif; font-size: 18px; line-height: 1.45;
    margin: 0; color: #75625A;
}
@media (min-width: 810px) and (max-width: 1100px) {
    .framer-zgcrpa .framer-1romo9h { grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr) !important; gap: 24px !important; }
    .framer-zgcrpa :is(.framer-1f2vgm4, .framer-xfhssq) { height: 460px !important; }
    .marca-cuidado-cartao { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
    .framer-1f2vgm4 .marca-cuidado-cartao { grid-template-columns: minmax(0, 1fr) 48px; }
    .marca-cuidado-icone { width: 48px; height: 48px; }
    .marca-cuidado-texto h3 { font-size: 22px; min-height: 79.2px; }
    .marca-cuidado-texto p { font-size: 16px; }
}
@media (max-width: 809.98px) {
    .framer-zgcrpa .framer-1romo9h { grid-template-columns: 1fr !important; gap: 36px !important; }
    .framer-zgcrpa .framer-1fzrgnj { order: -1; max-width: 300px; justify-self: center; }
    .framer-zgcrpa .framer-ujr0fh-container { height: 430px !important; }
    .framer-zgcrpa :is(.framer-1f2vgm4, .framer-xfhssq) { height: auto !important; grid-template-rows: auto auto; gap: 36px !important; }
    .marca-cuidado-cartao, .framer-1f2vgm4 .marca-cuidado-cartao { grid-template-columns: 56px minmax(0, 1fr); gap: 18px; }
    .framer-1f2vgm4 .marca-cuidado-icone { grid-column: 1; }
    .framer-1f2vgm4 .marca-cuidado-texto { grid-column: 2; text-align: left; }
    .marca-cuidado-icone { width: 56px; height: 56px; }
    .marca-cuidado-texto h3 { font-size: 24px; min-height: 0; margin-bottom: 12px; }
    .marca-cuidado-texto p { font-size: 17px; }
}