/* Dra. Cátia Jaine · site
   Direção: capa de revista de beleza, em terracota (brz/Prospects/catia/direcoes-site.md).
   Cormorant nos títulos, a mesma da logo dela (02/10); EB Garamond nas frases e citações (03/10); sem itálico; Jost no texto. Celular primeiro. */

:root{
  /* paleta do guia da logo (03/10): chocolate, terracota, creme, claro; champanhe só nos fios.
     Fora do guia, de propósito: bordô (o vestido, na faixa de seda) e nude (fundo do Sobre). */
  --choco:#3A2620;
  --terra-fundo:#9A522E;   /* a terracota da logo */
  --creme:#F4ECE3;
  --branco-quente:#FFF8F0; /* o claro da logo */
  --champ:#C9A977;         /* só fios e detalhes, nunca texto */
  --bordo:#8A1C24;
  --nude:#E8D3C8;
  --choco-2:color-mix(in srgb, var(--choco) 80%, var(--creme)); /* texto secundário: o chocolate mais leve */
  --fio:rgba(201,169,119,.6);        /* fios champanhe */
  --fio-forte:rgba(201,169,119,.85);
  --fio-leve:rgba(201,169,119,.3);

  --serif:'Cormorant', 'Times New Roman', serif;
  --serif-txt:'EB Garamond', Garamond, 'Times New Roman', serif; /* frases e citações: acento baixo (03/10) */
  --sans:'Jost', system-ui, sans-serif;

  --gutter:max(clamp(22px, 6vw, 72px), env(safe-area-inset-left), env(safe-area-inset-right));
  --max:1240px;
  --ease:cubic-bezier(.2,.7,.1,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:100px }
::selection{ background:var(--branco-quente); color:var(--choco) }
a, button{ touch-action:manipulation; -webkit-tap-highlight-color:var(--fio-leve) }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
body{ background:var(--creme) url("assets/orn/grao-creme.svg") 0 0 / 600px 600px repeat; color:var(--choco); font-family:var(--sans); font-weight:400; font-size:1.0625rem; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--terra-fundo); outline-offset:3px }
.capa :focus-visible, .frase :focus-visible, .aval :focus-visible, .contato :focus-visible, .rodape :focus-visible, .topo:not(.solido) :focus-visible{ outline-color:var(--branco-quente) }

h1,h2,h3{ font-family:var(--serif); font-weight:600; font-variant-numeric:lining-nums; line-height:1.02; letter-spacing:-.015em }
h2,h3{ text-wrap:balance }
.rotulo{ font-family:var(--sans); font-size:0.8438rem; font-weight:500; letter-spacing:.02em; color:var(--terra-fundo) }

.pular{ position:absolute; left:-999px; top:10px; z-index:200; background:var(--choco); color:var(--creme); padding:10px 16px }
.pular:focus{ left:10px }

/* ---------- botões ---------- */
.btn:active, .topo-abre:active, .topo-agendar:active, .painel-fecha:active{ transform:scale(.97); transition-duration:.1s }
.whats:active{ transform:scale(.94) }
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 32px; font-family:var(--sans); font-size:0.9375rem; font-weight:500; line-height:1; letter-spacing:.03em; text-decoration:none; position:relative; isolation:isolate; transition:background-color .4s var(--ease), color .4s var(--ease), transform .25s var(--ease) }
/* passe-partout: fio champanhe por dentro, como a moldura das fotos; no hover ele aperta */
.btn::after{ content:""; position:absolute; inset:4px; border:1px solid var(--fio-forte); pointer-events:none; transition:inset .45s var(--ease) }
.btn:hover::after{ inset:7px }
.btn-creme{ background-color:var(--creme); color:var(--choco) }
.btn-creme:hover{ background-color:var(--choco); color:var(--creme) }
.contato .btn-creme:hover{ background-color:var(--choco); color:var(--branco-quente) }
/* assinatura: os links secundários levam o fio com losango da logo, em Cormorant */
.link-fio{ position:relative; display:inline-flex; align-items:center; gap:14px; min-height:44px; font-family:var(--serif-txt); font-size:1.25rem; font-weight:500; line-height:1.15; letter-spacing:0; text-decoration:none; color:inherit }
.link-fio::before{ content:""; flex:none; width:26px; height:1px; background:currentColor; opacity:.55; transform-origin:left center; transition:transform .45s var(--ease) }
.link-fio::after{ content:""; position:absolute; left:23px; top:50%; width:7px; height:7px; margin-top:-3.5px; background:var(--champ); transform:rotate(45deg); transition:transform .45s var(--ease) }
.link-fio:hover::before{ transform:scaleX(1.3) }
.link-fio:hover::after{ transform:translateX(8px) rotate(45deg) }

/* ---------- topo ---------- */
.topo{ position:fixed; inset:0 0 auto; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px var(--gutter); padding-top:max(18px, env(safe-area-inset-top)); color:var(--creme); transition:transform .6s var(--ease), background .5s var(--ease), color .5s var(--ease) }
.topo.escondido{ transform:translateY(-110%) }
.topo::before{ content:""; position:absolute; inset:0 0 -40px; z-index:-1; background:linear-gradient(180deg, rgba(58,38,32,.55), rgba(58,38,32,0)); pointer-events:none; transition:opacity .5s var(--ease) }
.topo.solido::before{ opacity:0 }
.topo.solido{ background:rgba(244,236,227,.78); color:var(--choco); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%) }
@media (prefers-reduced-transparency:reduce){ .topo.solido{ background:var(--creme); backdrop-filter:none; -webkit-backdrop-filter:none } }
/* logo dela (v2, 03/10), igual ao lockup da logo: perfil solto à esquerda, nome e profissão entre fios champanhe.
   A cor vem do topo: creme na capa, chocolate no topo claro. */
.topo-marca{ display:flex; align-items:center; gap:6px; color:inherit; text-decoration:none }
.topo-simbolo{ display:block; height:56px; aspect-ratio:632/1330; background:currentColor; -webkit-mask:url("assets/marca/simbolo.png") center / contain no-repeat; mask:url("assets/marca/simbolo.png") center / contain no-repeat }
.topo-pilha{ display:flex; flex-direction:column; align-items:center; gap:5px } /* nome centrado na profissão, como na logo */
.topo-nome{ display:block; width:88px; aspect-ratio:590/368; background:currentColor; -webkit-mask:url("assets/marca/nome.svg") center / contain no-repeat; mask:url("assets/marca/nome.svg") center / contain no-repeat }
.topo-prof{ display:flex; align-items:center; gap:4px; font-family:var(--sans); font-size:7px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; line-height:1 }
.topo-prof i{ width:5px; height:1px; background:var(--champ) }
@media (min-width:960px){
  .topo-marca{ gap:8px }
  .topo-simbolo{ height:72px }
  .topo-nome{ width:114px } .topo-pilha{ gap:7px }
  .topo-prof{ gap:6px; font-size:8.5px; letter-spacing:.17em } .topo-prof i{ width:9px }
}
.topo-menu{ display:none; gap:38px }
.topo-abre{ font:600 0.7188rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:inherit; background:none; border:1px solid currentColor; min-height:44px; padding:0 18px; cursor:pointer }
.topo-abre:hover{ background:var(--creme); color:var(--choco) }
.topo.solido .topo-abre:hover{ background:var(--choco); color:var(--creme) }
.topo-agendar{ display:none !important }
.painel{ position:fixed; inset:0; z-index:150; background:var(--creme) url("assets/orn/grao-creme.svg") 0 0 / 600px 600px repeat; color:var(--choco); display:flex; flex-direction:column; justify-content:center; gap:34px; padding:96px var(--gutter) calc(40px + env(safe-area-inset-bottom)); overscroll-behavior:contain }
.painel[hidden]{ display:none }
.painel{ transform-origin:calc(100% - 60px) 40px }
.painel.abrindo{ animation:painel-in .38s var(--ease) both }
.painel.fechando{ animation:painel-out .24s cubic-bezier(.4,0,.8,.3) both }
@keyframes painel-in{ from{ opacity:0; transform:translateY(-10px) scale(.97); filter:blur(8px) } to{ opacity:1; transform:none; filter:none } }
@keyframes painel-out{ from{ opacity:1; transform:none; filter:none } to{ opacity:0; transform:translateY(-10px) scale(.97); filter:blur(8px) } }
.painel-nav{ display:grid; border-top:1px solid var(--champ) }
.painel-nav a{ font-family:var(--serif); font-weight:600; font-size:clamp(1.875rem, 8.6vw, 2.5rem); line-height:1.1; text-decoration:none; padding:16px 0; border-bottom:1px solid var(--fio) }
.painel .btn{ align-self:start }
.painel-tel a{ display:inline-flex; align-items:center; min-height:44px; font-size:0.9375rem; text-underline-offset:5px }
.painel-fecha{ position:absolute; top:max(18px, env(safe-area-inset-top)); right:var(--gutter); font:500 0.7188rem/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--choco); background:none; border:1px solid var(--choco); min-height:44px; padding:0 18px; cursor:pointer }
.painel.abrindo .painel-nav a, .painel.abrindo .btn, .painel.abrindo .painel-tel{ animation:painel-entra .7s var(--ease) both }
.painel.abrindo .painel-nav a:nth-child(2){ animation-delay:.04s } .painel.abrindo .painel-nav a:nth-child(3){ animation-delay:.08s } .painel.abrindo .painel-nav a:nth-child(4){ animation-delay:.12s } .painel.abrindo .painel-nav a:nth-child(5){ animation-delay:.16s }
.painel.abrindo .btn, .painel.abrindo .painel-tel{ animation-delay:.22s }
@keyframes painel-entra{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.topo-menu a{ font-size:0.75rem; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; opacity:.9; padding:12px 0 }
.topo-menu a:hover{ opacity:1 }
.topo-agendar{ font-size:0.7188rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; text-decoration:none; border:1px solid currentColor; padding:10px 18px; transition:background-color .4s var(--ease), color .4s var(--ease) }
.topo-agendar:hover{ background:var(--creme); color:var(--choco) }
.topo.solido .topo-agendar:hover{ background:var(--choco); color:var(--creme) }
@media (min-width:960px){ .topo-menu{ display:flex } .topo-abre, .painel{ display:none !important } .topo-agendar{ display:inline-flex !important } .topo{ padding-top:24px; padding-bottom:24px } }

/* ---------- 1. capa ---------- */
/* celular: a foto fica em cima, inteira, e o texto entra embaixo dela; as letras só encostam no vestido, nunca no rosto */
.capa{ position:relative; background:#3A2620; color:var(--branco-quente); overflow:hidden }
.capa-foto{ position:relative; height:min(72svh, 154vw); background:var(--terra-fundo); overflow:hidden }
.capa-foto img{ width:112%; max-width:none; margin-left:-6%; height:100%; object-fit:cover; object-position:50% 0 }
.capa-foto::after{ content:""; position:absolute; inset:0 0 -2px; background:linear-gradient(180deg, rgba(58,38,32,.22) 0, rgba(58,38,32,0) 16%, rgba(58,38,32,0) 60%, rgba(58,38,32,.78) 86%, #3A2620 99%); pointer-events:none }
.capa-texto{ position:relative; z-index:2; width:100%; margin-top:-11svh; padding:0 var(--gutter) calc(42px + env(safe-area-inset-bottom)) }
.capa h1{ font-size:clamp(3.25rem, 14.3vw, 9.25rem); line-height:.92; margin-top:0; letter-spacing:-.02em }
.capa h1 .ln{ display:block; overflow:hidden; padding-bottom:.26em; margin-bottom:-.26em }
.capa h1 .ln > span{ display:block }
.capa-linha{ font-family:var(--serif); font-weight:600; font-size:clamp(1.375rem, 5.8vw, 1.9375rem); line-height:1.2; letter-spacing:0; color:var(--branco-quente); margin-top:20px; max-width:22em; text-wrap:balance }
.capa-sub{ font-size:1rem; line-height:1.6; max-width:34ch; margin-top:20px; color:var(--branco-quente) }
.capa-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:22px 30px; margin-top:28px }
.estrelas{ color:var(--champ); letter-spacing:.12em; margin-right:6px }

@media (min-width:960px){
  .capa-linha{ white-space:nowrap }
  .capa{ display:flex; min-height:100svh; align-items:center; background:radial-gradient(90% 90% at 80% 40%, color-mix(in srgb, var(--terra-fundo) 92%, var(--branco-quente)) 0%, var(--terra-fundo) 34%, color-mix(in srgb, var(--terra-fundo) 88%, var(--choco)) 72%) }
  .capa-foto::after{ display:none }
  .capa-foto{ position:absolute; inset:0 0 0 auto; width:50vw; height:auto; padding-top:0; background:none; overflow:visible }
  .capa-foto img{ width:100%; margin-left:0; object-position:50% 18%; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%) }
  .capa-texto{ max-width:var(--max); margin:0 auto; padding:120px var(--gutter) 80px }
  .capa h1{ font-size:clamp(7.75rem, 12.4vw, 12.5rem); position:relative; z-index:3; max-width:none; margin-left:-.04em }
  .capa h1 .ln + .ln{ padding-left:3.3em } /* o sobrenome cruza a foto na altura do vestido, nunca do rosto */
  .capa-sub{ font-size:1.125rem; max-width:30ch }
  .capa-texto{ position:relative; z-index:2 }
  .capa-texto > *{ max-width:52vw }
  .capa-texto > h1{ max-width:none }
  .capa-texto > .capa-sub{ max-width:34ch }
}

/* ---------- 2. medo de ficar artificial ---------- */
.natural{ padding:clamp(96px, 16vw, 180px) var(--gutter); display:grid; gap:64px; max-width:var(--max); margin:0 auto }
.arco{ position:relative; width:min(78vw, 420px); margin:0 auto; aspect-ratio:2/3 }
.arco img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:999px 999px 0 0 }
.arco-fio{ position:absolute; left:16px; top:-16px; width:100%; height:100%; overflow:visible; pointer-events:none }
.arco-fio path{ fill:none; stroke:var(--champ); stroke-width:1 }
.natural-texto h2{ font-size:clamp(2.9375rem, 11.8vw, 5.5rem); margin-top:20px; max-width:12.5ch }
.natural-intro{ margin-top:26px; font-size:1.1562rem; line-height:1.65; color:var(--choco); max-width:38ch }
.natural-pontos{ list-style:none; margin-top:40px; border-top:1px solid var(--champ) }
.natural-pontos li{ display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start; padding:22px 0; border-bottom:1px solid var(--fio) }
.pluma{ width:30px; height:52px; margin-top:-8px }
.natural-pontos p{ font-size:1.0625rem; line-height:1.6; color:var(--choco) }
.natural-prova{ margin-top:40px; padding-top:26px; border-top:1px solid var(--champ); max-width:34ch }
.natural-prova blockquote{ font-family:var(--serif-txt); font-weight:400; font-size:clamp(1.25rem, 4.7vw, 1.5rem); line-height:1.4; color:var(--choco) }
.natural-prova figcaption{ margin-top:14px; font-size:0.8438rem; font-weight:500; letter-spacing:.02em; color:var(--terra-fundo) }
.natural-fecho{ font-family:var(--serif-txt); font-weight:400; font-size:clamp(1.75rem, 6.6vw, 2.375rem); line-height:1.3; margin-top:44px; max-width:22ch; }
@media (min-width:960px){
  .natural{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(64px, 8vw, 130px); align-items:center }
  .arco{ width:100%; max-width:440px }
}

/* ---------- comum às seções ---------- */
.sec-cabeca h2{ font-size:clamp(2.9375rem, 11.8vw, 5.875rem); margin-top:20px }
.sec-intro{ margin-top:24px; font-size:1.1562rem; max-width:40ch }
.btn-choco{ background-color:var(--choco); color:var(--creme) }
.btn-choco:hover{ background-color:var(--terra-fundo) }
.rotulo-fino{ margin-top:40px }

/* ---------- 3. procedimentos ---------- */
.procedimentos{ max-width:var(--max); margin:0 auto; padding:clamp(80px, 12vw, 150px) var(--gutter) clamp(90px, 13vw, 160px) }
.linhas{ margin-top:clamp(60px, 9vw, 110px); display:grid; gap:clamp(90px, 13vw, 160px) }
.linha{ display:grid; gap:40px; align-items:center }
.linha-foto{ position:relative; margin-right:14px; isolation:isolate }
.linha-foto::after{ content:""; position:absolute; inset:14px -14px -14px 14px; z-index:-1; border:1px solid var(--champ); pointer-events:none; transition:transform 1s var(--ease) }
.linha-moldura{ position:relative; overflow:hidden }
.linha-moldura img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 25%; transition:transform 1.4s var(--ease) }
.linha h3{ font-size:clamp(2.5625rem, 9.6vw, 4.5625rem); line-height:1 }
.linha-frase{ font-family:var(--serif-txt); font-weight:400; font-size:clamp(1.25rem, 4.7vw, 1.6875rem); line-height:1.3; color:var(--terra-fundo); margin-top:16px; transition:transform .9s var(--ease) }
.linha-txt{ margin-top:18px; font-size:1.0625rem; max-width:42ch }
.linha-ind{ margin-top:14px; font-size:1rem; color:var(--choco-2) }
@media (hover:hover){
  .linha:hover .linha-moldura img{ transform:scale(1.04) }
  .linha:hover .linha-foto::after{ transform:translate(-9px, -9px) }
  .linha:hover .linha-frase{ transform:translateX(6px) }
}
@media (min-width:960px){
  .linha{ grid-template-columns:1fr 1fr; gap:clamp(60px, 7vw, 110px) }
  .linha:nth-child(even) .linha-foto{ order:2 }
  .linha-moldura img{ aspect-ratio:4/5; max-height:660px }
}


/* ---------- 4. sobre ---------- */
.sobre{ background:var(--nude) url("assets/orn/barro-nude.svg?v=2") center / cover no-repeat; padding:clamp(90px, 13vw, 170px) var(--gutter); display:grid; gap:80px }
.colagem{ position:relative; width:100%; max-width:560px; margin:0 auto; aspect-ratio:5/6 }
.colagem-a{ box-shadow:0 18px 40px -20px rgba(74,40,28,.3); position:absolute; left:0; top:0; width:66%; height:78%; display:block; overflow:hidden }
.colagem-a img{ width:100%; height:100%; object-fit:cover; object-position:50% 22% }
.colagem-b img{ width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.colagem-b{ position:absolute; right:0; top:20%; width:44%; height:50%; display:block; overflow:hidden; border:7px solid var(--branco-quente); box-shadow:0 14px 30px -12px rgba(74,40,28,.35), 0 2px 6px rgba(74,40,28,.12) }
/* cor aquecida: brancos e cinzas das fotos puxam pro creme/nude da parede */
.quente::after{ content:""; position:absolute; inset:0; background:#e9cdbb; mix-blend-mode:multiply; opacity:.38; pointer-events:none }
.quente img{ filter:saturate(.92) contrast(.97) }
.colagem-bloco{ position:absolute; left:8%; top:68%; width:86%; background:var(--branco-quente); color:var(--choco); padding:22px 28px 20px 62px; text-wrap:pretty; font-family:var(--serif-txt); font-weight:400; font-size:clamp(1.125rem, 4.4vw, 1.375rem); line-height:1.4; box-shadow:0 14px 30px -12px rgba(74,40,28,.35), 0 2px 6px rgba(74,40,28,.12) }
.colagem-bloco::before{ content:""; position:absolute; inset:8px; border:1px solid var(--fio-forte); pointer-events:none }
.colagem-bloco::after{ content:""; position:absolute; left:26px; top:22px; width:22px; height:38px; background:url("assets/orn/pluma-2.svg") center / contain no-repeat }
.sobre-texto h2{ font-size:clamp(2.6875rem, 10.3vw, 4.8125rem); margin-top:20px; max-width:13ch }
.sobre-texto > p{ margin-top:24px; font-size:1.0938rem; max-width:44ch }
.formacao{ list-style:none; margin-top:40px; border-top:1px solid var(--choco) }
.formacao li{ padding:16px 0; border-bottom:1px solid rgba(58,38,32,.18); font-size:1rem; display:grid; gap:4px }
.formacao span{ font-size:0.8438rem; font-weight:500; letter-spacing:.02em; color:var(--choco) } /* no nude a terracota não dá contraste */
@media (min-width:960px){
  .sobre{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(70px, 8vw, 130px); align-items:center; padding-left:max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-right:max(var(--gutter), calc((100vw - var(--max)) / 2)) }
  .formacao li{ grid-template-columns:150px 1fr; align-items:baseline }
}

/* ---------- 5. atendimento ---------- */
.atendimento{ max-width:var(--max); margin:0 auto; padding:clamp(90px, 13vw, 160px) var(--gutter) }
.etapas-wrap{ position:relative; margin-top:clamp(56px, 8vw, 90px) }
.etapas-fio{ position:absolute; left:0; top:12px; bottom:12px; width:1px; background:var(--champ); transform-origin:top }
.etapas{ list-style:none; display:grid; gap:48px; padding-left:34px }
.etapas li{ position:relative }
.etapa-ponto{ position:absolute; left:-39px; top:20px; width:11px; height:11px; border-radius:50%; background:var(--creme); border:1px solid var(--champ) }
.etapas h3{ font-size:clamp(2.6875rem, 10.7vw, 4.25rem); line-height:1; overflow:hidden; padding-bottom:.2em; margin-bottom:-.2em }
.etapas h3 > span{ display:block }
.etapas p{ margin-top:14px; font-size:1.0625rem; max-width:36ch }
@media (min-width:960px){
  .etapas-fio{ left:0; right:0; top:0; bottom:auto; width:auto; height:1px; transform-origin:left }
  .etapas{ grid-template-columns:repeat(4, 1fr); gap:40px; padding-left:0; padding-top:56px }
  .etapa-ponto{ left:0; top:-62px }
  .etapas h3{ font-size:clamp(2.5625rem, 4.1vw, 3.75rem) }
}

/* ---------- 6. frase ---------- */
.frase{ background:var(--bordo); color:var(--branco-quente); padding:clamp(100px, 16vw, 190px) var(--gutter); position:relative; text-align:center }
.frase::before{ content:""; position:absolute; inset:18px; border:1px solid var(--fio); pointer-events:none; z-index:2 }
.frase{ overflow:hidden }
.frase-seda{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block }
.frase-txt{ position:relative; z-index:1; text-align:center }
.frase .ln{ display:block; overflow:hidden; padding:.16em 0 .1em; margin:-.16em auto -.1em }
.frase .ln > span{ display:block }
.frase-pre{ font-family:var(--serif-txt); font-weight:400; font-size:clamp(1.375rem, 4.2vw, 2.5rem); line-height:1.25; letter-spacing:.01em; opacity:.92 }
.frase-res{ font-family:var(--serif); font-weight:600; font-size:clamp(3.875rem, 12.4vw, 11.5rem); line-height:.95; letter-spacing:-.02em; margin-top:.14em; text-wrap:balance }
.frase .frase-res{ margin-top:.1em }
.frase.com-seda .frase-txt{ text-shadow:0 1px 24px rgba(40,6,10,.35) }

/* ---------- 7. onde atendo ---------- */
.onde{ max-width:var(--max); margin:0 auto; padding:clamp(90px, 13vw, 160px) var(--gutter); display:grid; gap:56px }
.onde-foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 40% }
.onde-texto h2{ font-size:clamp(2.8125rem, 10.7vw, 5.0625rem); margin-top:20px }
.onde-principal{ margin-top:40px; padding:30px 0; border-top:1px solid var(--choco); border-bottom:1px solid var(--choco) }
.onde-principal h3{ font-size:clamp(2rem, 7.5vw, 2.8125rem) }
.onde-principal p{ margin-top:12px; font-size:1.0625rem }
.onde-principal .link-fio{ margin-top:10px }
.onde-lista{ list-style:none; margin-top:16px }
.onde-lista li{ padding:16px 0; border-bottom:1px solid var(--fio); display:grid; gap:4px; font-size:1rem; color:var(--choco-2) }
.onde-lista span{ font-family:var(--serif-txt); font-weight:500; font-size:1.375rem; color:var(--choco) }
.onde-nota{ margin-top:26px; font-size:1rem; max-width:40ch }
.onde .onde-datas{ margin-top:18px }
@media (min-width:960px){
  .onde{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(70px, 8vw, 120px); align-items:start }
  .onde-foto{ margin-top:20px }
  .onde-lista li{ grid-template-columns:220px 1fr; align-items:baseline }
}

/* ---------- 8. avaliações ---------- */
.aval{ background:var(--choco); color:var(--branco-quente); text-align:center; padding:clamp(100px, 14vw, 170px) var(--gutter) clamp(80px, 10vw, 120px) }
.aval-nota{ margin-top:18px; font-size:0.9375rem; letter-spacing:.01em }
.aval-grade{ max-width:1080px; margin:52px auto 0; display:grid; gap:44px; text-align:left }
.aval-item blockquote{ font-family:var(--serif-txt); font-weight:400; font-size:clamp(1.375rem, 5vw, 1.75rem); line-height:1.35 }
.aval-destaque blockquote{ font-size:clamp(1.875rem, 6.8vw, 3.125rem); line-height:1.25 }
.aval-item figcaption{ margin-top:18px; font-size:0.875rem; font-weight:500; letter-spacing:.02em; color:var(--creme) }
.aval-item + .aval-item{ padding-top:36px; border-top:1px solid var(--fio-leve) }
@media (min-width:960px){
  .aval-grade{ grid-template-columns:1fr 1fr; column-gap:64px; row-gap:48px }
  .aval-destaque{ grid-column:1 / -1; text-align:center }
  .aval-destaque blockquote{ max-width:22ch; margin:0 auto }
  .aval-item + .aval-item{ padding-top:36px; grid-column:1 / -1; text-align:center; max-width:46ch; margin:0 auto }
}
.aval .link-fio{ margin-top:48px }

/* ---------- 9. contato ---------- */
.contato{ background:var(--terra-fundo); color:var(--branco-quente); padding:clamp(90px, 12vw, 150px) var(--gutter) clamp(100px, 14vw, 160px); display:grid; gap:48px; justify-items:center; text-align:center }
.contato-arco{ width:min(56vw, 260px); aspect-ratio:2/3 }
.contato-arco img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; border-radius:999px 999px 0 0 }
.contato h2{ font-size:clamp(2.6875rem, 10.3vw, 5.0625rem); max-width:14ch; margin:0 auto }
.contato-texto > p{ margin-top:22px; font-size:1.0625rem; color:var(--branco-quente) }
.contato .btn{ margin-top:32px }
.contato-texto > .contato-linha{ margin-top:22px; font-size:1rem }
.contato-texto > .contato-linha{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 26px }
.contato-linha a{ display:inline-flex; align-items:center; min-height:44px; text-underline-offset:5px }
/* contato: telefone e Instagram com ícone de traço fino num círculo (05/10) */
.contato-texto > .contato-linha{ gap:14px 34px }
.contato-canal{ gap:14px; text-decoration:none; color:var(--branco-quente) }
.canal-icone{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,248,240,.55); transition:background-color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease) }
.canal-icone svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:color .35s var(--ease) }
.canal-icone .ponto{ fill:currentColor; stroke:none }
.canal-txt{ display:grid; text-align:left; font-size:1.0625rem; line-height:1.25; letter-spacing:.01em }
.canal-txt small{ font-size:.75rem; letter-spacing:.06em; opacity:.75; margin-bottom:2px }
.contato-canal:hover .canal-icone, .contato-canal:focus-visible .canal-icone{ background:var(--branco-quente); border-color:var(--branco-quente); color:var(--terra-fundo) }
.contato-canal:active .canal-icone{ transform:scale(.94) }
@media (max-width:959px){ .contato-texto > .contato-linha{ display:grid; justify-content:center; justify-items:start; gap:14px } }
@media (min-width:960px){
  .contato{ grid-template-columns:auto minmax(0,560px); justify-content:center; justify-items:start; text-align:left; gap:90px; align-items:center }
  .contato h2{ margin:0 }
  .contato-texto > .contato-linha{ justify-content:flex-start }
}

/* ---------- rodapé ---------- */
.rodape{ background:var(--choco); color:var(--creme); text-align:center; padding:36px var(--gutter) calc(40px + env(safe-area-inset-bottom)); border-top:1px solid var(--fio-leve) }
.rodape-logo{ display:block; width:min(68vw, 300px); height:auto; margin:0 auto }
.rodape-crf{ margin-top:14px; font-size:0.8125rem; letter-spacing:.12em }

/* ---------- clarify (02/10) ---------- */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* área de toque mínima de 44px nos links sublinhados e no Agendar do topo */
.topo-agendar{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px }


.sec-nota{ margin-top:10px; font-size:0.9375rem; color:var(--choco-2) }

/* quadro Duração · Sessões · Volta à rotina */
.quadro{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:26px; border-top:1px solid var(--champ); border-bottom:1px solid var(--champ) }
.quadro > div{ padding:14px 12px 14px 0 }
.quadro > div + div{ padding-left:14px; border-left:1px solid var(--fio) }
.quadro dt{ font-size:0.8438rem; font-weight:500; letter-spacing:.02em; color:var(--terra-fundo) }
.quadro dd{ margin-top:6px; font-family:var(--serif-txt); font-weight:500; font-size:1.0625rem; font-variant-numeric:lining-nums; line-height:1.3 }
@media (max-width:560px){
  .quadro{ grid-template-columns:1fr }
  .quadro > div, .quadro > div + div{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-left:0 }
  .quadro > div + div{ border-top:1px solid var(--fio) }
  .quadro dd{ margin-top:0; text-align:right }
}

/* pergunta no fim de cada procedimento: uma frase dela + link discreto, cada uma diferente */
.proc-pergunta{ margin-top:24px; font-family:var(--serif-txt); font-weight:400; font-size:clamp(1.1875rem, 4.5vw, 1.3125rem); line-height:1.35; color:var(--choco); display:flex; flex-wrap:wrap; align-items:baseline; column-gap:14px }
.proc-pergunta .link-fio{ color:var(--terra-fundo); font-size:1.3125rem }


/* avaliações: título de seção */
.aval-titulo{ font-size:clamp(2.25rem, 8.6vw, 4rem); color:var(--branco-quente) }

/* ---------- whatsapp flutuante ---------- */
.whats.oculto, .whats.cede{ opacity:0; transform:translateY(16px); pointer-events:none }
.whats{ position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:90; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--terra-fundo); color:var(--branco-quente); box-shadow:0 10px 30px rgba(58,38,32,.28); transition:transform .4s var(--ease), background .4s var(--ease), opacity .4s var(--ease) }
.whats::after{ content:""; position:absolute; inset:4px; border-radius:50%; border:1px solid var(--fio-forte); pointer-events:none; transition:inset .45s var(--ease) }
.whats:hover::after{ inset:6px }
.whats:hover{ transform:translateY(-3px); background:var(--choco) }

/* ---------- animação: estados iniciais só com JS ativo ---------- */
.js [data-entra], .js [data-sobe]{ opacity:0; transform:translateY(12px) }
.js .arco-fio path{ stroke-dasharray:1; stroke-dashoffset:1 }
.js .frase .ln > span{ transform:translateY(115%) }
.js .arco img, .js .contato-arco img{ clip-path:inset(0 50% 0 50%) }
@media (prefers-reduced-motion:reduce){
  .js [data-entra], .js [data-sobe]{ opacity:1; transform:none }
  .js .arco-fio path{ stroke-dashoffset:0 }
  .js .capa h1 .ln > span, .js .frase .ln > span{ transform:none }
  .js .arco img, .js .contato-arco img{ clip-path:none }
  /* sem deslocamento, mas as trocas de cor e de opacidade continuam curtas e visíveis */
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; transition-delay:0s !important }
  .whats.oculto, .whats.cede{ transform:none }
  .btn:active, .topo-abre:active, .topo-agendar:active, .painel-fecha:active, .whats:active{ transform:none }
  .linha:hover .linha-moldura img, .linha:hover .linha-foto::after, .linha:hover .linha-frase, .whats:hover{ transform:none }
  .topo.escondido{ transform:none }
}


@media (max-width:560px){ .btn{ padding:0 26px } }

/* celular: hierarquia mais clara (04/10). Nome > títulos de seção > procedimentos > etapas */
@media (max-width:959px){
  .natural-texto h2, .sec-cabeca h2, .sobre-texto h2, .onde-texto h2, .contato h2{ font-size:clamp(2.125rem, 9.5vw, 2.75rem) }
  .linha h3{ font-size:clamp(1.875rem, 8.6vw, 2.5rem) }
  .etapas h3{ font-size:clamp(1.75rem, 8vw, 2.25rem) }
}
.etapas-cta{ margin-top:clamp(36px, 6vw, 56px) }

/* o nome projeta na parede a mesma sombra macia da foto: luz do alto, à direita (05/10) */
.capa h1 .ln{ overflow:visible }
.capa h1 .ln > span{ position:relative }
.capa h1 .ln > span::before{ content:attr(data-sombra); position:absolute; left:0; top:0; z-index:-1; pointer-events:none; color:#3a1407; transform:translate(-.085em, .1em) skewX(5deg); filter:blur(.075em); opacity:.36 }
@media (max-width:959px){ .capa h1 .ln > span::before{ opacity:.5; transform:translate(-.04em, .05em); filter:blur(.045em); color:#120705 } }

/* ---------- 2b. o que te incomoda? (05/10) ---------- */
.queixa{ max-width:var(--max); margin:0 auto; padding:clamp(56px, 9vw, 110px) var(--gutter) 0 }
.queixa-caixa{ margin-top:clamp(32px, 5vw, 48px); border-top:1px solid var(--champ); padding-top:clamp(24px, 4vw, 36px) }
.queixa-opcoes{ display:flex; flex-wrap:wrap; gap:10px }
.queixa-opcao{ font:500 0.9375rem/1.2 var(--sans); color:var(--choco); background:transparent; border:1px solid var(--fio-forte); min-height:44px; padding:10px 18px; cursor:pointer; text-align:left; transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease) }
.queixa-opcao:hover{ border-color:var(--choco) }
.queixa-opcao[aria-selected="true"]{ background:var(--choco); color:var(--creme); border-color:var(--choco) }
.queixa-paineis{ margin-top:clamp(24px, 4vw, 36px) }
.queixa-painel + .queixa-painel{ margin-top:28px }
.queixa-resposta{ font-family:var(--serif-txt); font-weight:400; font-size:clamp(1.3125rem, 4.6vw, 1.75rem); line-height:1.4; max-width:34ch; color:var(--choco) }
.queixa-links{ display:flex; flex-wrap:wrap; gap:4px 32px; margin-top:14px }
.queixa-links .link-fio{ color:var(--terra-fundo) }
.queixa-corpo{ margin-top:clamp(28px, 4vw, 40px); padding-top:18px; border-top:1px solid var(--fio); font-size:1rem; color:var(--choco-2) }
/* com JS: um painel por vez, todos ocupando o mesmo lugar (a altura não pula ao trocar) */
.js .queixa-paineis{ display:grid }
.js .queixa-painel{ grid-area:1 / 1 }
.js .queixa-painel + .queixa-painel{ margin-top:0 }
.js .queixa-painel[hidden]{ display:block; visibility:hidden }
@media (min-width:960px){
  .queixa-caixa{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(48px, 6vw, 96px); align-items:start }
  .queixa-opcoes{ flex-direction:column; align-items:stretch; gap:8px }
  .queixa-paineis{ margin-top:0 }
  .queixa-corpo{ grid-column:1 / -1 }
}

/* ---------- 3b. o que vai na sua pele (05/10) ---------- */
.pele{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter) clamp(90px, 13vw, 160px) }
.subst-lista{ margin-top:clamp(32px, 5vw, 48px); border-top:1px solid var(--champ) }
.subst{ padding:clamp(24px, 4vw, 36px) 0; border-bottom:1px solid var(--fio) }
.subst h3{ font-size:clamp(1.875rem, 6vw, 2.75rem); line-height:1.05 }
.subst dl{ margin-top:16px; display:grid; gap:14px }
.subst dt{ font-size:0.8438rem; font-weight:500; letter-spacing:.02em; color:var(--terra-fundo) }
.subst dd{ margin-top:4px; font-size:1.0625rem; line-height:1.6; max-width:46ch }
.pele-nota{ margin-top:22px; font-family:var(--serif-txt); font-size:clamp(1.25rem, 4vw, 1.5rem); color:var(--choco) }
@media (min-width:960px){
  .subst{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:clamp(48px, 6vw, 96px); align-items:start }
  .subst dl{ margin-top:6px; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px }
}