/* estilo.css — visual da prévia da Clínica Estética Viver Bella.
   Cores medidas nas artes do Instagram da clínica: terracota dos carrosséis, coral das faixas, creme do fundo.
   O gesto que vem das artes deles: fotos em molduras arredondadas com um anel deslocado (como os círculos do post do Botox Day)
   e as pétalas da flor do logo, que aqui viram o arco da foto da capa.
   Duas fontes: Newsreader (serifada, leve, com itálico) nos títulos e nas frases da clínica; Mulish no texto e nos botões. */
:root {
  --terracota: #b15741;      /* fundo dos carrosséis */
  --barro: #7a3826;          /* terracota escura: títulos e texto forte */
  --coral: #e9815b;          /* faixas e detalhes das artes */
  --petala: #f3c4b1;         /* pétala clara do logo, para filetes e anéis */
  --petala-clara: #fbeee7;   /* tinta bem leve */
  --creme: #f4ece3;          /* fundo creme das artes */
  --creme-2: #e6d9cb;        /* divisórias sobre o creme */
  --papel: #fffcf8;          /* base da página: branco quente */
  --tinta: #2b1c16;
  --cinza: #6e5a51;
  --zap: #1a7f45;
  --zap-escuro: #146a39;
  --foco: #b15741;
  --altura-topo: 112px;
  --serif: "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Mulish", "Helvetica Neue", Arial, sans-serif;
}
html { color: var(--tinta); background: var(--papel); }
body { font: 400 17px/1.6 var(--sans); }
@media (min-width: 900px) { :root { --altura-topo: 108px; } }

/* ---------- títulos ---------- */
.titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.6vw, 48px); line-height: 1.1; letter-spacing: -.01em; color: var(--barro); text-wrap: balance; }
.titulo--claro { color: #fff; }
.bloco__intro { max-width: 58ch; margin-top: 16px; font-size: 18px; color: var(--cinza); }
.bloco__intro q { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--barro); quotes: "“" "”"; }
h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; }

/* ---------- botões: formato de pílula, como nas artes da clínica ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 16.5px; line-height: 1.15; text-align: center; }
.botao svg { width: 24px; height: 24px; flex: none; }
.botao--zap { background: var(--zap); color: #fff; }
.botao--zap:hover { background: var(--zap-escuro); }
.botao--marca { background: var(--terracota); color: #fff; }
.botao--marca:hover { background: var(--barro); }
.botao--linha { border: 1.5px solid var(--terracota); color: var(--barro); background: transparent; }
.botao--linha:hover { background: var(--petala-clara); }
.botao--grande { min-height: 62px; padding: 0 30px; font-size: 18px; }

/* ---------- faixa de prévia e topo ---------- */
.fixo { position: sticky; top: 0; z-index: 50; }
.faixa-previa { margin: 0; padding: 8px 16px; background: var(--barro); color: #fff; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.4; }
.topo { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 16px; background: rgba(255, 252, 248, .96); border-bottom: 1px solid var(--creme-2); backdrop-filter: blur(6px); }
.topo__marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.topo__marca img { width: 42px; height: 42px; }
.topo__nome { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1; color: var(--barro); letter-spacing: -.01em; }
.topo nav { display: none; gap: 26px; margin-left: 14px; }
.topo nav a { text-decoration: none; font-weight: 600; font-size: 16px; color: var(--tinta); padding: 6px 0; border-bottom: 2px solid transparent; }
.topo nav a:hover { border-bottom-color: var(--coral); }
.topo__zap { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--zap); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.topo__zap svg { width: 22px; height: 22px; }
.topo__zap:hover { background: var(--zap-escuro); }
@media (max-width: 420px) { .topo__zap span { display: none; } .topo__zap { padding: 0 12px; } }
@media (min-width: 900px) { .topo { padding: 10px 40px; } .topo nav { display: flex; } }

/* ---------- capa ---------- */
.capa { position: relative; overflow: hidden; padding: 40px 16px 48px; }
.capa::before { content: ""; position: absolute; z-index: 0; right: -30vw; top: -8vw; width: 78vw; height: 78vw; max-width: 760px; max-height: 760px; border-radius: 50%; background: var(--creme); }
.capa__grade { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; gap: 40px; }
.capa__grade > * { min-width: 0; }
.capa__cima { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--terracota); }
.capa h1 { margin-top: 14px; font-family: var(--serif); font-weight: 350; font-size: clamp(38px, 8.2vw, 74px); line-height: 1.04; letter-spacing: -.02em; color: var(--barro); text-wrap: balance; }
.capa__lead { margin-top: 22px; max-width: 52ch; font-size: 18px; color: var(--cinza); }
.capa__onde { margin-top: 20px; font-size: 16px; color: var(--cinza); }
.capa__onde a { color: var(--tinta); font-weight: 700; white-space: nowrap; text-decoration-color: var(--petala); text-underline-offset: 3px; }

/* a foto da avaliação dentro de um arco, com o anel deslocado das artes da clínica */
.capa__foto { position: relative; margin: 0 auto; width: min(100%, 420px); }
.capa__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 28px 28px; }
.capa__foto::after { content: ""; position: absolute; inset: 0; transform: translate(14px, 14px); border: 1.5px solid var(--terracota); border-radius: 999px 999px 28px 28px; pointer-events: none; z-index: -1; }
@media (min-width: 900px) {
  .capa { padding: 64px 40px 80px; }
  .capa__grade { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 64px; }
  .capa__foto { width: min(100%, 460px); margin: 0 0 0 auto; }
  .capa__foto::after { transform: translate(18px, 18px); }
}

/* uma entrada só, na capa; o base.css desliga em "reduzir movimento" */
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.capa__texto > * { animation: subir .7s ease-out both; }
.capa__texto > :nth-child(2) { animation-delay: .08s; }
.capa__texto > :nth-child(3) { animation-delay: .16s; }
.capa__texto > :nth-child(4) { animation-delay: .24s; }
.capa__texto > :nth-child(5) { animation-delay: .3s; }
.capa__foto { animation: aparecer .9s ease-out both; }

/* ---------- blocos ---------- */
.bloco { padding: 60px 16px; }
.bloco > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .bloco { padding: 88px 40px; } }

/* ---------- avaliação: texto e citação de um lado, os três passos do outro ---------- */
.avaliacao { border-top: 1px solid var(--creme-2); }
.avaliacao__grade { display: grid; gap: 36px; }
.citacao { margin-top: 28px; padding-left: 22px; border-left: 2px solid var(--coral); }
.citacao p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.35; color: var(--barro); }
.citacao footer { margin-top: 10px; font-size: 15px; color: var(--cinza); }
.passos { display: grid; gap: 18px; }
.passo { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 22px 0 0; border-top: 1px solid var(--creme-2); }
.passo:first-child { border-top: 0; padding-top: 0; }
.passo__numero { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--terracota); color: #fff; font-family: var(--serif); font-size: 22px; line-height: 1; }
.passo h3 { font-size: 24px; color: var(--barro); }
.passo p { margin-top: 6px; color: var(--cinza); }
@media (min-width: 900px) {
  .avaliacao__grade { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .passos { padding-top: 10px; }
}

/* ---------- tratamentos: lista com divisórias sobre o creme; o laser leva a foto ---------- */
.tratamentos { padding: 60px 0; background: var(--creme); }
.tratamentos__dentro { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.lista-trat { margin-top: 36px; border-top: 1px solid var(--creme-2); }
.trat { padding: 28px 0; border-bottom: 1px solid var(--creme-2); }
.trat__foto { margin: 0 0 20px; }
.trat__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 160px 160px 18px 18px; }
.trat__nome { font-size: clamp(26px, 3.4vw, 32px); color: var(--barro); }
.trat__dados { display: grid; gap: 14px; margin-top: 14px; }
.trat__dados dt { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--terracota); }
.trat__dados dd { margin-top: 4px; color: var(--tinta); }
.trat__perguntar { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--terracota); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15.5px; color: var(--barro); }
.trat__perguntar svg { width: 20px; height: 20px; }
.trat__perguntar:hover { background: #fff; }
.tratamentos__aviso { max-width: 62ch; margin-top: 28px; padding: 12px 16px; border: 1px dashed var(--terracota); border-radius: 10px; font-size: 15px; color: var(--barro); background: var(--papel); }
.tratamentos__mais { max-width: 62ch; margin-top: 18px; color: var(--cinza); }
.tratamentos__mais a { color: var(--barro); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 720px) {
  .trat__dados { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (min-width: 900px) {
  .tratamentos { padding: 88px 0; }
  .tratamentos__dentro { padding: 0 40px; }
  .trat { display: grid; grid-template-columns: 260px 1fr; gap: 18px 40px; align-items: start; padding: 36px 0; }
  .trat__nome { grid-column: 1; }
  .trat__texto { display: contents; }
  .trat__dados, .trat__perguntar { grid-column: 2; }
  .trat__dados { margin-top: 0; }
  .trat__perguntar { justify-self: start; margin-top: 0; }
  /* o tratamento com foto: a foto ocupa a coluna do nome e o nome vai para cima do texto */
  .trat:has(.trat__foto) { grid-template-columns: 300px 1fr; grid-template-rows: auto auto 1fr; }
  .trat:has(.trat__foto) .trat__foto { grid-column: 1; grid-row: 1 / 4; margin: 0; }
  .trat:has(.trat__foto) .trat__foto img { aspect-ratio: 4 / 5; }
  .trat:has(.trat__foto) .trat__nome, .trat:has(.trat__foto) .trat__dados, .trat:has(.trat__foto) .trat__perguntar { grid-column: 2; }
  .trat:has(.trat__foto) .trat__dados { margin-top: 0; }
}

/* ---------- perguntas ---------- */
.perguntas__grade { display: grid; gap: 28px; }
.faq { border-top: 1px solid var(--creme-2); }
.faq__item { border-bottom: 1px solid var(--creme-2); }
.faq__item summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--barro); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--terracota); background: linear-gradient(var(--terracota), var(--terracota)) center / 12px 1.5px no-repeat, linear-gradient(var(--terracota), var(--terracota)) center / 1.5px 12px no-repeat; transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { max-width: 64ch; padding: 0 44px 20px 0; color: var(--cinza); }
@media (min-width: 900px) {
  .perguntas__grade { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .perguntas__texto { position: sticky; top: calc(var(--altura-topo) + 24px); }
}

/* ---------- onde fica ---------- */
.onde { border-top: 1px solid var(--creme-2); }
.onde__grade { display: grid; gap: 32px; }
.onde__dados { display: grid; gap: 14px; margin-top: 26px; }
.onde__dados div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--creme-2); }
.onde__dados dt { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--terracota); }
.onde__dados dd a { color: var(--tinta); font-weight: 700; text-underline-offset: 3px; text-decoration-color: var(--petala); }
.onde__equipe { max-width: 58ch; margin-top: 24px; padding: 12px 16px; border: 1px dashed var(--terracota); border-radius: 10px; font-size: 15px; color: var(--barro); }
.onde__mapa { border-radius: 24px; overflow: hidden; border: 1px solid var(--creme-2); }
@media (min-width: 900px) {
  .onde__grade { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}

/* ---------- chamada final: terracota, como os slides dos carrosséis ---------- */
.chamada { padding: 64px 16px; background: var(--terracota); color: #fff; }
.chamada__dentro { max-width: 1180px; margin: 0 auto; display: grid; gap: 28px; }
.chamada p { margin-top: 14px; max-width: 50ch; font-size: 18px; color: #fbe9e0; }
.chamada__acao { display: grid; gap: 14px; justify-items: start; }
.chamada__numero { margin: 0 !important; font-family: var(--serif); font-size: clamp(32px, 6vw, 48px); line-height: 1; color: #fff !important; font-variant-numeric: tabular-nums; }
.chamada__numero a { text-decoration: none; }
.chamada__numero a:hover { text-decoration: underline; text-underline-offset: 6px; }
@media (min-width: 900px) {
  .chamada { padding: 88px 40px; }
  .chamada__dentro { grid-template-columns: 1.2fr 1fr; align-items: center; gap: 48px; }
  .chamada__acao { justify-items: end; text-align: right; }
}

/* ---------- rodapé ---------- */
.rodape { padding: 36px 16px 110px; background: var(--barro); color: #ead6cb; font-size: 15px; line-height: 1.6; }
.rodape__dentro { max-width: 1180px; margin: 0 auto; }
.rodape p { margin-bottom: 6px; }
.rodape__nome { font-family: var(--serif); font-style: italic; font-size: 24px; color: #fff; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.rodape a { color: #fff; text-underline-offset: 3px; }
.rodape__previa { margin-top: 18px !important; color: #d3b6a8; }
@media (min-width: 900px) { .rodape { padding: 44px 40px 100px; } }

/* ---------- botão flutuante some na capa ---------- */
.na-capa .wa-flutuante { opacity: 0; pointer-events: none; }
.wa-flutuante { transition: opacity .2s; }

.capa__legenda { margin-top: 10px; font-size: 14px; color: var(--barro, #5a2d22); text-align: center; font-style: italic; }

/* Seção da Andreia (informada por ela em 22/10/2026) */
.andreia { background: var(--barro); color: var(--papel); padding: clamp(56px, 9vw, 112px) 20px; }
.andreia__grade { max-width: 1120px; margin: 0 auto; display: grid; gap: 36px; align-items: center; }
.andreia__foto { margin: 0; position: relative; max-width: 440px; justify-self: center; width: 100%; }
.andreia__foto img { width: 100%; height: auto; display: block; border-radius: 220px 220px 18px 18px; box-shadow: 0 0 0 10px var(--terracota), 0 0 0 11px var(--petala); }
.andreia__rotulo { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--petala); margin: 0 0 10px; }
.andreia__nome { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 7vw, 76px); line-height: 1.02; letter-spacing: -.015em; margin: 0; color: #fff; }
.andreia__formacao { font-size: clamp(17px, 2vw, 20px); font-weight: 700; color: var(--petala); margin: 14px 0 22px; }
.andreia__fala { font-size: 18px; line-height: 1.65; max-width: 52ch; color: var(--petala-clara); margin: 0 0 28px; }
@media (min-width: 860px) { .andreia__grade { grid-template-columns: 0.9fr 1.1fr; gap: 72px; } }