@font-face {
  font-family: "Figtree";
  src: url("fontes/figtree-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fontes/literata-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

/* ==========================================================================
   Sistema: toda medida da pagina sai daqui. Nada de px solto nas regras.
   ========================================================================== */
:root {
  /* cor: moca e blush da marca dela, nevoa azul-acinzentada da sala; neutros
     puxados para o malva, nunca para o creme */
  --fundo: #FCFBFB;
  --faixa: #EDF0F0;         /* nevoa */
  --texto: #2A2427;
  --suave: #5E5357;
  --moca: #4E3B37;          /* marca: titulos, botao principal */
  --moca-escuro: #3A2C2C;
  --noite: #2F2427;         /* faixas escuras e rodape */
  --blush: #E4C3B7;         /* destaque: so sobre escuro, ou com texto escuro dentro */
  --blush-claro: #EDD3C9;
  --taupe: #A88D80;         /* bolinha do rotulo, detalhe */
  --claro-suave: #D3C6C5;   /* texto secundario sobre escuro */
  --linha: #E3DCDB;
  --estrela: #C49A5A;        /* dourado apagado, no registro da moca (gosto, regra 3) */
  --rosado: #F3E7E3;        /* faixa das avaliacoes: blush bem claro, cartoes brancos por cima */
  --linha-escura: rgb(228 195 183 / .2);
  --borda-ui: rgb(78 59 55 / .5);

  /* tipo: escala fluida (celular -> computador); letras apertam com o tamanho */
  --titulo: "Literata", Georgia, serif;
  --corpo: "Figtree", system-ui, sans-serif;
  --t-h1: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);     /* 40 -> 68 */
  --t-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);   /* 30 -> 48 */
  --t-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);    /* 20 -> 24 */
  --t-lg: 1.25rem;     /* 20 */
  --t-base: 1.125rem;  /* 18 */
  --t-sm: .9375rem;    /* 15 */
  --t-rotulo: .8125rem;/* 13 */
  --tr-h1: -.025em; --tr-h2: -.02em; --tr-corpo: 0em; --tr-rotulo: .14em;

  /* espaco: base 4 */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --secao: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  --largura: 72rem;
  --margem: clamp(1.25rem, .6rem + 2vw, 2.5rem);

  --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-pilula: 999px;
  --toque: 48px;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --d-1: 150ms; --d-2: 300ms; --d-3: 600ms;

  --altura-cabecalho: 76px;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
section[id] { scroll-margin-top: calc(var(--s-7) - var(--secao)); }
html { scroll-padding-top: var(--altura-cabecalho); scrollbar-color: var(--moca) var(--faixa); accent-color: var(--moca); }
body { margin: 0; color: var(--texto); background: var(--fundo); font: 400 var(--t-base)/1.6 var(--corpo); letter-spacing: var(--tr-corpo); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; }
::selection { background: rgb(228 195 183 / .6); color: var(--texto); }
:focus-visible { outline: 2px solid var(--moca); outline-offset: 3px; border-radius: var(--r-sm); }
.abertura :focus-visible, .chamada :focus-visible, .rodape :focus-visible { outline-color: var(--blush); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; color: var(--moca); text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: var(--tr-h1); }
h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: var(--tr-h2); }
p { max-width: 62ch; text-wrap: pretty; }
figure { margin: 0; }
.envolve { width: min(100% - 2 * var(--margem), var(--largura)); margin-inline: auto; }
.pular { position: absolute; top: var(--s-2); left: var(--s-2); z-index: 40; padding: var(--s-3) var(--s-5); border-radius: var(--r-sm); color: var(--texto); background: var(--blush); transform: translateY(-160%); transition: transform var(--d-1) var(--curva); }
.pular:focus { transform: none; }

/* rotulo: bolinha + texto pequeno espacado. Um por secao, sempre acima do titulo */
.rotulo { display: flex; width: fit-content; align-items: center; gap: var(--s-2); max-width: none; font: 600 var(--t-rotulo)/1 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; color: var(--suave); }
.rotulo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); }
.rotulo + h1, .rotulo + h2 { margin-top: var(--s-5); }

/* ==========================================================================
   Botoes: pilula, sempre em par quando ha escolha (solido + contorno)
   ========================================================================== */
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: var(--toque); padding: 0 var(--s-6); border-radius: var(--r-pilula); border: 1px solid transparent; background: var(--moca); color: var(--fundo); font: 600 var(--t-sm)/1 var(--corpo); letter-spacing: .01em; text-decoration: none; white-space: nowrap; transition: background-color var(--d-1) var(--curva), transform var(--d-1) var(--curva); }
.botao:hover { background: var(--moca-escuro); }
.botao:active { transform: scale(.98); }
.botao-contorno { background: transparent; color: var(--moca); border-color: var(--borda-ui); }
.botao-contorno:hover { background: rgb(78 59 55 / .06); }
.botao-blush { background: var(--blush); color: var(--noite); }
.botao-blush:hover { background: var(--blush-claro); }
.seta { font-size: 1.2em; line-height: 0; transition: transform var(--d-1) var(--curva); }
.botao:hover .seta, .botao:focus-visible .seta, .link-com-seta:hover .seta, .link-com-seta:focus-visible .seta { transform: translateX(3px); }
.link-com-seta { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--toque); color: var(--moca); font: 600 var(--t-base)/1 var(--corpo); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat; }

/* ==========================================================================
   Cabecalho fixo com vidro: nome e as duas acoes (ligar, agendar) sempre a vista.
   62% + desfoque forte: o que passa por baixo vira mancha de cor, nao texto.
   Sem desfoque, 95%.
   ========================================================================== */
.cabecalho { position: sticky; top: 0; z-index: 30; background: rgb(252 251 251 / .95); border-bottom: 1px solid rgb(255 255 255 / .7); box-shadow: 0 1px 0 rgb(78 59 55 / .08), 0 8px 24px -12px rgb(78 59 55 / .2); }
@supports (backdrop-filter: blur(1px)) {
  .cabecalho { background: rgb(252 251 251 / .62); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); }
}
.cabecalho-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--altura-cabecalho); }
.marca { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--toque); min-width: 0; color: var(--moca); text-decoration: none; }
.marca-texto { display: block; min-width: 0; }
.marca-nome { display: block; font: 600 1rem/1.05 var(--titulo); letter-spacing: -.01em; }
.quebra { display: block; }
.marca-segunda { display: none; margin-top: var(--s-1); color: var(--suave); font: 500 .75rem/1.2 var(--corpo); letter-spacing: .02em; }
.marca-simbolo { flex: none; width: 26px; height: 26px; }
.gota-brilho { stroke: var(--taupe); }
.nav-larga { display: none; gap: var(--s-6); }
.nav-larga a, .nav-celular a { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--moca); font: 500 var(--t-sm)/1 var(--corpo); letter-spacing: .01em; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 12px) / 0 1.5px no-repeat; transition: background-size var(--d-1) var(--curva); }
.nav-larga a:hover, .nav-larga a:focus-visible, .nav-celular a:hover, .nav-celular a:focus-visible { background-size: 100% 1.5px; }
.topo-acoes { display: flex; flex: none; align-items: center; gap: var(--s-2); }
.telefone-topo, .agendar-topo { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pilula); font: 600 var(--t-sm)/1 var(--corpo); text-decoration: none; white-space: nowrap; transition: background-color var(--d-1) var(--curva); }
.telefone-topo { color: var(--moca); border: 1px solid var(--borda-ui); font-variant-numeric: tabular-nums; }
.telefone-topo:hover { background: rgb(78 59 55 / .07); }
.telefone-topo svg { width: 16px; height: 16px; flex: none; transition: transform var(--d-1) var(--curva); }
.telefone-topo:hover svg { transform: rotate(-12deg); }
.agendar-topo { gap: 0; background: var(--moca); color: var(--fundo); border: 1px solid var(--moca); }
.agendar-topo:hover { background: var(--moca-escuro); }
.agendar-resto, .telefone-numero { display: none; }
.nav-celular { display: flex; justify-content: space-between; gap: var(--s-4); border-bottom: 1px solid var(--linha); }

/* ==========================================================================
   Abertura: texto centralizado sobre foto escura, de ponta a ponta. A foto e so
   ambiente (7.1); a camada moca garante o contraste em qualquer ponto dela.
   ========================================================================== */
.abertura { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: min(46rem, calc(100svh - var(--altura-cabecalho))); padding-block: clamp(4rem, 2rem + 7vw, 8rem); text-align: center; background: var(--noite); color: var(--fundo); }
.abertura-fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 96% 60%; }
.abertura::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 62% 72% at 50% 50%, rgb(36 27 29 / .66), rgb(36 27 29 / .3)); }
.abertura-texto { display: flex; flex-direction: column; align-items: center; }
.abertura h1 { max-width: 22ch; color: var(--fundo); text-shadow: 0 2px 30px rgb(0 0 0 / .3); }
.introducao { margin-top: var(--s-5); max-width: 36rem; font-size: var(--t-lg); line-height: 1.55; }
.abertura .introducao { color: var(--claro-suave); }
.abertura .acoes { justify-content: center; margin-top: var(--s-7); }
/* No celular os dois botoes empilham com a mesma largura, centrados um sobre o outro. */
.abertura .acoes .botao, .chamada .acoes .botao { width: min(100%, 17.5rem); }
.botao-vidro { background: rgb(255 255 255 / .08); color: var(--fundo); border-color: rgb(255 255 255 / .45); font-variant-numeric: tabular-nums; }
.botao-vidro:hover { background: rgb(255 255 255 / .16); }
@supports (backdrop-filter: blur(1px)) { .botao-vidro { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }

/* ==========================================================================
   About: o negocio (nao a pessoa de novo). Topo com foto, foco em quatro
   blocos, tecnologia na faixa escura, a sala em duas colunas.
   ========================================================================== */
.sobre-topo { padding-block: var(--s-8) var(--secao); }
.sobre-topo-grade { display: grid; gap: var(--s-7); align-items: center; }
.sobre-topo .acoes { margin-top: var(--s-6); }
.sobre-topo .foto-secundaria img { aspect-ratio: 3 / 2; object-position: 70% 50%; }
.foco { padding-bottom: var(--secao); }
.foco-texto, .suite-texto { margin-top: var(--s-4); max-width: 34rem; color: var(--suave); font-size: var(--t-lg); line-height: 1.55; }
.foco-grade { display: grid; gap: var(--s-3); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.foco-grade li { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); min-height: 9rem; padding: var(--s-5); border-radius: var(--r-lg); background: var(--faixa); color: var(--moca); font: 600 var(--t-h3)/1.25 var(--titulo); letter-spacing: -.01em; }
.foco-numero { color: var(--taupe); font: 600 var(--t-rotulo)/1 var(--corpo); letter-spacing: var(--tr-rotulo); }
.tecnologia { padding-block: var(--secao); background: var(--noite); color: var(--claro-suave); }
.tecnologia h2, .tecnologia h3 { color: var(--fundo); }
.tecnologia .rotulo { color: var(--claro-suave); }
.tecnologia .rotulo::before { background: var(--blush); }
.tecnologia-grade { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.tecnologia-grade > div { padding-top: var(--s-5); border-top: 1px solid var(--linha-escura); }
.tecnologia-grade h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em; }
.tecnologia-grade p { margin-top: var(--s-3); }
.tecnologia .link-com-seta { margin-top: var(--s-6); color: var(--blush); }
.tecnologia :focus-visible { outline-color: var(--blush); }
.suite { padding-block: var(--secao); }
.suite-grade { display: grid; gap: var(--s-5); align-items: end; }
.suite .link-com-seta { margin-top: var(--s-4); }

/* ==========================================================================
   Antes de vir: claro, foto a esquerda, duas listas curtas
   ========================================================================== */
.preparar { padding-block: var(--secao); }
.preparar-grade { display: grid; gap: var(--s-7); align-items: center; }
.preparar-colunas { display: grid; gap: var(--s-6); margin-top: var(--s-7); }
.preparar-colunas h3 { color: var(--suave); font: 600 var(--t-rotulo)/1.2 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.checklist { display: grid; margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-5); border-bottom: 1px solid var(--linha); line-height: 1.45; }
.checklist li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-3) + .55em); width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); }
.foto-secundaria { overflow: hidden; border-radius: var(--r-lg); box-shadow: 0 24px 60px -24px rgb(47 36 39 / .4); }
.foto-secundaria img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 60% 50%; }

/* ==========================================================================
   Visita: um cartao so, dados a esquerda e o mapa preenchendo o lado direito.
   O mapa nunca vai de ponta a ponta (gosto, regra 21).
   ========================================================================== */
.visita { padding-block: var(--s-8) var(--secao); }
.visita-cartao { display: grid; overflow: hidden; border-radius: var(--r-lg); background: var(--faixa); box-shadow: 0 24px 60px -30px rgb(47 36 39 / .35); }
.visita-dados { padding: var(--s-6) var(--s-5); }
.visita-dados h1 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: var(--tr-h2); }
.visita-mapa { min-height: 18rem; background: var(--linha); }
.visita-mapa iframe { display: block; width: 100%; height: 100%; min-height: 18rem; border: 0; }
/* Versao curta na home: sem estacionamento e pagamento, mapa pequeno. No computador os
   dados viram duas colunas, o que deixa o cartao baixo e o mapa estreito. */
.visita-curta { padding-block: var(--secao); }
.visita-curta-cartao { display: grid; overflow: hidden; border-radius: var(--r-lg); background: var(--faixa); }
.visita-curta-dados { padding: var(--s-6) var(--s-5); }
.visita-curta .dados-contato { margin-bottom: var(--s-5); }
.visita-curta .acoes { gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.visita-curta-mapa { background: var(--linha); }
.visita-curta-mapa iframe { display: block; width: 100%; height: 14rem; border: 0; }
address { margin-top: var(--s-4); font-size: var(--t-lg); font-style: normal; line-height: 1.5; }
.dados-contato { display: grid; margin: var(--s-5) 0 var(--s-6); border-top: 1px solid rgb(78 59 55 / .14); }
.dados-contato > div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid rgb(78 59 55 / .14); font-size: var(--t-sm); line-height: 1.5; }
.dados-contato dt { color: var(--suave); }
.dados-contato dd { margin: 0; }
.dados-contato a { text-decoration: none; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Chamada final: cartao de vidro centralizado sobre a foto
   ========================================================================== */
.chamada { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--secao); background: var(--noite); }
.chamada-fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.chamada::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(36 27 29 / .35), rgb(36 27 29 / .6)); }
.chamada-cartao { max-width: 40rem; margin-inline: auto; padding: var(--s-7) var(--s-6); border-radius: var(--r-lg); text-align: center; color: var(--fundo); background: rgb(47 36 39 / .84); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 30px 80px -30px rgb(0 0 0 / .6); border: 1px solid rgb(255 255 255 / .14); }
@supports (backdrop-filter: blur(1px)) {
  .chamada-cartao { background: rgb(47 36 39 / .58); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
}
.chamada h2 { margin-inline: auto; max-width: 16ch; color: var(--fundo); }
.chamada p { margin: var(--s-4) auto 0; max-width: 28rem; color: var(--claro-suave); }
.chamada .acoes { justify-content: center; margin-top: var(--s-6); }

/* ==========================================================================
   Rodape: o nome grande em cima, tres colunas curtas embaixo
   ========================================================================== */
.rodape { padding-block: var(--s-8) var(--s-6); background: var(--noite); color: var(--claro-suave); font-size: var(--t-sm); }
.rodape-grade { display: grid; gap: var(--s-5); }
.rodape-grade p + p { margin-top: var(--s-2); }
.rodape-marca { grid-column: 1 / -1; margin-bottom: var(--s-3); color: var(--fundo); font: 600 clamp(1.75rem, 1.3rem + 2vw, 2.75rem)/1.05 var(--titulo); letter-spacing: -.025em; }
.rodape a { color: var(--fundo); text-decoration: none; }
.rodape a:hover { text-decoration: underline; }
.rodape-credito { grid-column: 1 / -1; max-width: none; margin-top: var(--s-6); padding-top: var(--s-5); text-align: right; border-top: 1px solid var(--linha-escura); font-size: .75rem; }
.rodape .rodape-credito a, .rodape .rodape-credito a:hover { color: inherit; text-decoration: none; }

/* ==========================================================================
   Varias paginas: a pagina atual marcada no menu; h1 das paginas internas no
   tamanho de h2, porque ali o titulo nao disputa com foto
   ========================================================================== */
.nav-larga a[aria-current="page"], .nav-celular a[aria-current="page"] { background-size: 100% 1.5px; font-weight: 600; }
.pagina-topo { padding-block: var(--s-9) var(--s-7); }
.sobre-topo h1 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: var(--tr-h2); }
.pagina-intro { margin-top: var(--s-4); max-width: 34rem; color: var(--suave); font-size: var(--t-lg); line-height: 1.55; }

/* ==========================================================================
   Home: Carisa logo abaixo do topo, com a vaga dos tratamentos ao lado;
   avaliacoes andando de lado sozinhas, cartoes brancos sobre blush claro
   ========================================================================== */
.carisa { padding-block: var(--secao); }
.carisa-grade { display: grid; gap: var(--s-7); align-items: stretch; }
.carisa-cabeca { display: flex; align-items: center; gap: var(--s-5); }
.carisa-cabeca .rotulo + h2 { margin-top: var(--s-3); }
.foto-pendente { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); background: var(--faixa); border: 1px dashed rgb(78 59 55 / .3); color: var(--suave); font: 600 .6875rem/1 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.carisa-foto { flex: none; width: 5.5rem; height: 5.5rem; border-radius: 50%; }
.carisa-foto svg { width: 20px; height: 20px; color: var(--taupe); }
.carisa-intro { margin-top: var(--s-6); max-width: 36rem; color: var(--suave); font-size: var(--t-lg); line-height: 1.55; }
.carisa-sub { margin-top: var(--s-7); color: var(--suave); font: 600 var(--t-rotulo)/1.2 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.certificados { display: grid; margin: var(--s-3) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); }
.certificados li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-5); border-bottom: 1px solid var(--linha); line-height: 1.4; }
.certificados li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-3) + .55em); width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); }

.slot-tratamentos { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 24rem; overflow: hidden; border-radius: var(--r-lg); color: var(--fundo); text-decoration: none; box-shadow: 0 24px 60px -24px rgb(47 36 39 / .4); }
.slot-tratamentos img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-3) var(--curva); }
.slot-tratamentos::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(36 27 29 / 0) 10%, rgb(36 27 29 / .88) 75%); }
.slot-tratamentos:focus-visible { outline-offset: 4px; }
.slot-texto { display: grid; gap: var(--s-2); padding: var(--s-6); }
.slot-rotulo { color: var(--blush); font: 600 var(--t-rotulo)/1.2 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.slot-titulo { font: 600 var(--t-h3)/1.2 var(--titulo); letter-spacing: -.01em; }
.slot-linha { color: var(--claro-suave); }
.slot-acao { display: inline-flex; align-items: center; gap: var(--s-3); width: fit-content; min-height: 44px; margin-top: var(--s-3); padding: 0 var(--s-5); border-radius: var(--r-pilula); background: var(--blush); color: var(--noite); font: 600 var(--t-sm)/1 var(--corpo); transition: background-color var(--d-1) var(--curva); }
.slot-tratamentos:hover .slot-acao { background: var(--blush-claro); }
.slot-tratamentos:hover .seta, .slot-tratamentos:focus-visible .seta { transform: translateX(3px); }

.avaliacoes { padding-block: var(--secao); background: var(--rosado); }
/* A faixa rola de lado. O script do carrossel faz ela andar sozinha e emenda as copias
   (aria-hidden) sem fim; sem script, so o original aparece e a pessoa rola com o dedo. */
.carrossel { margin-top: var(--s-7); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.carrossel::-webkit-scrollbar { display: none; }
.carrossel:focus-visible { outline-offset: -2px; }
.carrossel.arrastando { cursor: grabbing; user-select: none; }
.carrossel-trilho { display: flex; gap: var(--s-5); width: max-content; margin: 0; padding: var(--s-2) var(--margem) var(--s-6); list-style: none; }
.avaliacao[aria-hidden] { display: none; }
.com-carrossel .avaliacao[aria-hidden] { display: block; }
.com-carrossel .carrossel-trilho { padding-inline: 0; }
.avaliacao { flex: none; width: min(80vw, 24rem); padding: var(--s-6); border-radius: var(--r-lg); background: #FFFFFF; box-shadow: 0 16px 40px -24px rgb(78 59 55 / .35); }
.avaliacao blockquote { margin: 0; }
.avaliacao-nota { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); color: var(--moca); font: 600 var(--t-base)/1 var(--corpo); font-variant-numeric: tabular-nums; }
.avaliacao-nota svg { width: 20px; height: 20px; color: var(--estrela); }
.avaliacao blockquote p { color: var(--texto); font-size: var(--t-base); line-height: 1.6; }

/* ==========================================================================
   Tratamentos e precos: atalhos fixos, consulta em destaque, uma tabela por
   categoria. Cada linha inteira e o link que abre o Vagaro naquele servico.
   ========================================================================== */
.atalhos { position: sticky; top: var(--altura-cabecalho); z-index: 20; background: rgb(252 251 251 / .94); border-block: 1px solid var(--linha); }
@supports (backdrop-filter: blur(1px)) {
  .atalhos { background: rgb(252 251 251 / .72); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); }
}
.atalhos-linha { display: flex; gap: var(--s-2); overflow-x: auto; padding-block: var(--s-3); scrollbar-width: none; }
.atalhos-linha::-webkit-scrollbar { display: none; }
.atalhos a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pilula); border: 1px solid var(--linha); color: var(--moca); font: 500 var(--t-sm)/1 var(--corpo); text-decoration: none; white-space: nowrap; transition: background-color var(--d-1) var(--curva), border-color var(--d-1) var(--curva); }
.atalhos a:hover { background: var(--faixa); border-color: var(--borda-ui); }
.tratamentos { padding-block: var(--s-7) var(--secao); }
.categorias { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
section.categoria { scroll-margin-top: calc(var(--altura-cabecalho) + 4.5rem); padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); background: var(--faixa); }
.categoria-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--moca); }
.categoria-cabeca h2 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.015em; }
.categoria-cabeca p { color: var(--suave); font-size: var(--t-sm); }
.precos { margin: 0; padding: 0; list-style: none; }
.precos li + li { border-top: 1px solid rgb(78 59 55 / .14); }
.precos a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-1) var(--s-4); min-height: var(--toque); padding: var(--s-3) var(--s-2); margin-inline: calc(-1 * var(--s-2)); border-radius: var(--r-sm); color: var(--texto); text-decoration: none; transition: background-color var(--d-1) var(--curva); }
.precos a:hover { background: var(--fundo); }
.p-nome { display: flex; flex-direction: column; gap: 2px; color: var(--moca); font: 600 1.125rem/1.3 var(--titulo); }
.p-nota { color: var(--suave); font: 400 var(--t-sm)/1.4 var(--corpo); }
.p-preco { color: var(--moca); font: 600 1.1875rem/1 var(--titulo); font-variant-numeric: tabular-nums; text-align: right; }
.p-consulta { max-width: 9rem; font: italic 400 var(--t-sm)/1.3 var(--corpo); color: var(--suave); }
.p-agendar { grid-column: 1 / -1; justify-self: start; color: var(--suave); font: 600 var(--t-rotulo)/1 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; transition: color var(--d-1) var(--curva), transform var(--d-1) var(--curva); }
.precos a:hover .p-agendar, .precos a:focus-visible .p-agendar { color: var(--moca); transform: translateX(3px); }
.consulta-destaque { display: grid; gap: var(--s-2); padding: var(--s-6); border-radius: var(--r-lg); background: var(--noite); color: var(--fundo); text-decoration: none; }
.consulta-destaque:focus-visible { outline-offset: 4px; }
.consulta-rotulo { color: var(--claro-suave); font: 600 var(--t-rotulo)/1.2 var(--corpo); letter-spacing: var(--tr-rotulo); text-transform: uppercase; }
.consulta-nome { font: 600 clamp(1.875rem, 1.4rem + 2vw, 2.75rem)/1.05 var(--titulo); letter-spacing: -.03em; }
.consulta-texto { color: var(--claro-suave); }
.consulta-preco { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-3); font: 600 1.5rem/1 var(--titulo); }
.consulta-agendar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-5); border-radius: var(--r-pilula); background: var(--blush); color: var(--noite); font: 600 var(--t-sm)/1 var(--corpo); transition: background-color var(--d-1) var(--curva); }
.consulta-destaque:hover .consulta-agendar { background: var(--blush-claro); }

.rodape-avisos p + p { margin-top: var(--s-3); }

@media (min-width: 40rem) {
  .categoria { padding: var(--s-6); }
  .precos a { grid-template-columns: 1fr auto auto; }
  .p-agendar { grid-column: auto; opacity: .55; }
  .precos a:hover .p-agendar, .precos a:focus-visible .p-agendar { opacity: 1; }
}
@media (min-width: 48rem) {
  .carisa-grade { grid-template-columns: 7fr 5fr; gap: var(--s-9); }
  .foco-grade { grid-template-columns: 1fr 1fr; }
  .tecnologia-grade { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
  .suite-grade { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .visita-cartao { grid-template-columns: 5fr 6fr; }
  .visita-dados { padding: var(--s-7); }
  .consulta-destaque { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s-7); padding: var(--s-7); }
  .consulta-rotulo, .consulta-nome, .consulta-texto { grid-column: 1; }
  .consulta-preco { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: flex-end; margin: 0; font-size: 2rem; }
}
@media (min-width: 64rem) {
  .categorias { grid-template-columns: 1fr 1fr; align-items: start; }
  .atalhos-linha { justify-content: center; }
}

/* ==========================================================================
   Movimento: toque, entrada do topo, blocos na rolagem (design/animacao.md)
   ========================================================================== */
main { overflow-x: clip; }
@media (hover: hover) {
  .foto-secundaria img { transition: transform var(--d-3) var(--curva); }
  .foto-secundaria:hover img { transform: scale(1.03); }
}
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.abertura-texto > * { animation: subir 800ms cubic-bezier(.16, 1, .3, 1) both; }
.abertura-texto > :nth-child(2) { animation-delay: 100ms; }
.abertura-texto > :nth-child(3) { animation-delay: 200ms; }
.abertura-texto > :nth-child(4) { animation-delay: 300ms; }
.anima [data-bloco] { transition: opacity 800ms ease-out, transform 800ms cubic-bezier(.16, 1, .3, 1); }
.anima [data-bloco]:not(.visto) { opacity: 0; transform: translateY(18px); }

/* ==========================================================================
   Telas maiores
   ========================================================================== */
@media (min-width: 26rem) {
  .marca-nome { font-size: 1.0625rem; }
  .marca-simbolo { width: 30px; height: 30px; }
}
@media (min-width: 40rem) {
  .abertura-fundo { object-position: center; }
  .abertura .acoes .botao, .chamada .acoes .botao { width: auto; }
  .preparar-colunas { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
  .rodape-grade { grid-template-columns: repeat(3, 1fr); }
  .agendar-resto { display: inline; }
}
@media (min-width: 48rem) {
  .marca { gap: var(--s-3); }
  .marca-nome { font-size: 1.1875rem; }
  .quebra { display: inline; }
  .marca-segunda { display: block; }
  .marca-simbolo { width: 34px; height: 34px; }
  .telefone-curto { display: none; }
  .telefone-numero { display: inline; }
  .telefone-topo, .agendar-topo { padding: 0 var(--s-5); }
  .sobre-topo-grade { grid-template-columns: 6fr 5fr; gap: var(--s-9); }
  .preparar-grade { grid-template-columns: 4fr 7fr; gap: var(--s-9); }
  .foto-secundaria img { aspect-ratio: 4 / 5; }
  .chamada-cartao { padding: var(--s-8) var(--s-7); }
}
@media (min-width: 64rem) {
  /* So o cabecalho usa a tela inteira: nome e acoes nos cantos, links no centro exato. */
  .cabecalho .envolve { width: calc(100% - 2 * var(--margem)); }
  .cabecalho-linha { display: grid; grid-template-columns: 1fr auto 1fr; }
  .topo-acoes { justify-self: end; }
  .nav-larga { display: flex; }
  .nav-celular { display: none; }
  .foco-grade { grid-template-columns: repeat(4, 1fr); }
  .visita-curta-cartao { grid-template-columns: 1fr 20rem; }
  .visita-curta-dados { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-8); align-content: start; padding: var(--s-7); }
  .visita-curta-dados > :not(.dados-contato) { grid-column: 1; }
  .visita-curta .dados-contato { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  .visita-curta-mapa iframe { height: 100%; min-height: 18rem; }
}

/* ==========================================================================
   Movimento reduzido e impressao
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .rotulo::before, .checklist li::before { background: CanvasText; }
}
@media print {
  body { font-size: 12pt; }
  .cabecalho { position: static; }
  .nav-larga, .nav-celular, .botao, .pular, .visita-mapa, .visita-curta-mapa, .foto-secundaria, .slot-tratamentos, .carrossel, .chamada-fundo, .foto-pendente, .topo-acoes { display: none; }
  .chamada, .chamada-cartao, .rodape { background: white; color: black; }
  .chamada h2, .rodape-marca, .rodape a { color: black; }
}