/* =========================================================
   Tema: PERFIL FEET (claro, creme e laranja da logo; saúde com acolhimento)
   Parte da direção Moderna Minimal, adaptada para podologia.
   Fontes no <head>: Fraunces (títulos, eixo SOFT no máximo para lembrar a letra
   arredondada da logo) + Manrope (texto e rótulos).
   ========================================================= */
:root {
  --cor-fundo: #fbf7f1;
  --cor-fundo-2: #f4ece2;
  --cor-superficie: #ffffff;
  --cor-texto: #2a1d16;
  --cor-texto-suave: #6b5b50;
  --cor-acento: #c2491a;      /* laranja da logo escurecido: contraste AA com texto branco */
  --cor-acento-texto: #ffffff;
  --cor-enfase: #d9531e;      /* itálicos dos títulos grandes */
  --cor-marca: #f26322;       /* laranja exato da logo: só em detalhes (pegadas, selo, barras) */
  --cor-detalhe: var(--cor-marca);
  --cor-escuro: #241812;
  --cor-creme: #fff7ef;
  --cor-linha: rgb(42 29 22 / 0.12);
  --cor-linha-forte: rgb(42 29 22 / 0.3);
  --sombra: 0 18px 44px rgb(42 29 22 / 0.12);

  --fonte-titulo: 'Fraunces', Georgia, serif;
  --fonte-texto: 'Manrope', system-ui, sans-serif;
  --fonte-rotulo: 'Manrope', system-ui, sans-serif;
  --titulo-peso: 400;
  --titulo-espaco: -0.025em;
  --titulo-altura: 1;
  --rotulo-peso: 600;
  --rotulo-espaco: 0.18em;

  --raio: 16px;
  --raio-botao: 999px;
  --filtro-foto: saturate(0.94) contrast(1.02);
  --filtro-mapa: grayscale(0.85) sepia(0.2) contrast(1.02);
  --grao: 0.025;
  --ritmo: 1.05;
}

/* Fraunces com cantos macios em todo texto de título */
:is(.titulo-xxl, .titulo-xl, .titulo-l, .titulo-m, .faixa__item, .servico__nome,
  .numeros__valor, .nota-google__valor, .depoimento blockquote p, .faq__item summary, .menu__links a,
  .rodape__gigante, .passo__num, .hero__nota-valor) { font-variation-settings: 'SOFT' 100; }
:where(.titulo-xxl, .titulo-xl, .titulo-l, .titulo-m) em { color: var(--cor-enfase); }

/* Pegada (desenho único, no sprite do index.html) */
.sprite { position: absolute; overflow: hidden; }
.pegada { display: block; fill: currentColor; }

.progresso { background: var(--cor-marca); }

/* ---------- Navegação ---------- */
.nav__logo img { height: 46px; }
.status { background: rgb(255 255 255 / 0.7); }

/* ---------- Hero ---------- */
.hero--dividido { padding-bottom: clamp(64px, 8vw, 110px); }
.hero__brilho {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 76% 48%, rgb(242 99 34 / 0.13), transparent 70%),
    radial-gradient(32% 40% at 8% 96%, rgb(242 99 34 / 0.06), transparent 70%);
}
.hero--dividido .hero__conteudo { align-items: center; gap: clamp(64px, 6vw, 96px); }
.hero__bloco { order: 1; }
.hero__visual { position: relative; order: 2; justify-self: center; width: min(100%, 440px, 58svh); }
.hero--dividido .hero__midia.hero__arco { width: 100%; aspect-ratio: 4 / 5; max-height: none; border-radius: 999px 999px var(--raio) var(--raio); }
.hero__titulo { font-size: clamp(3rem, 7vw, 7.4rem); max-width: 11ch; }
.hero__texto { max-width: 31rem; }
.hero__nota {
  position: absolute; top: 16%; right: -34px; display: grid; gap: 6px; justify-items: start;
  padding: 16px 20px; border-radius: 14px; background: var(--cor-superficie); box-shadow: var(--sombra);
  font-size: 0.78rem; line-height: 1.2; color: var(--cor-texto-suave);
  transition: transform 0.5s var(--ease);
}
.hero__nota:hover { transform: translateY(-4px); }
.hero__nota-valor { font-family: var(--fonte-titulo); font-size: 2.2rem; line-height: 1; color: var(--cor-texto); }
.hero__nota .estrelas { color: var(--cor-marca); }
.hero__nota .estrelas svg { width: 14px; height: 14px; }
.hero__selo { left: -60px; bottom: 36px; border-radius: 50%; background: var(--cor-fundo); color: var(--cor-marca); box-shadow: var(--sombra); }
.selo__icone.pegada { width: 18%; height: 36%; }
@media (max-width: 899px) {
  .hero--dividido { padding-top: calc(var(--nav-altura) + 28px); }
  .hero__visual { width: min(86%, 380px); }
  .hero__nota { right: -16px; top: 10%; padding: 12px 16px; }
  .hero__nota-valor { font-size: 1.8rem; }
  .hero__selo { left: -22px; bottom: -26px; width: 100px; }
}

/* ---------- Faixa: pegadas no lugar do ✦ ---------- */
.faixa__item:nth-child(4n + 3) { color: var(--cor-enfase); }
.faixa__sep { width: clamp(14px, 1.6vw, 22px); height: clamp(30px, 3.4vw, 46px); color: var(--cor-marca); transform: rotate(-90deg); }

/* ---------- Sobre ---------- */
.sobre__etiqueta {
  position: absolute; right: clamp(-28px, -2vw, -12px); bottom: 36px;
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border-radius: 14px; background: var(--cor-superficie); box-shadow: var(--sombra);
  font-size: 0.86rem; font-weight: 600; line-height: 1.3;
}
.sobre__etiqueta .pegada { flex: none; width: 15px; height: 32px; color: var(--cor-marca); }
.numeros__valor { color: var(--cor-acento); }

/* ---------- Tratamentos (sem preço: tag no lugar; cada linha abre os detalhes) ---------- */
.servico__item > summary { list-style: none; cursor: pointer; }
.servico__item > summary::-webkit-details-marker { display: none; }
.servico__link { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 18px; align-items: baseline; }
.servico__icone { grid-column: 3; grid-row: 1; align-self: center; }
.servico__item[open] .faq__icone::after { transform: rotate(0deg); }
.servico__nome { transition: transform 0.6s var(--ease), color 0.4s; }
.servico__item[open] .servico__nome { color: var(--cor-acento); }
.servico__detalhe { display: grid; gap: 14px; max-width: 46rem; padding: 0 0 34px 38px; color: var(--cor-texto-suave); }
.servico__detalhe ul { display: grid; gap: 8px; }
.servico__detalhe li { display: flex; gap: 12px; }
.servico__detalhe li::before { content: ''; flex: none; width: 14px; height: 1px; margin-top: 0.85em; background: var(--cor-acento); }
.servico__detalhe .botao { justify-self: start; margin-top: 6px; }
@supports (interpolate-size: allow-keywords) {
  .servico__item::details-content { block-size: 0; overflow: hidden; transition: block-size 0.6s var(--ease), content-visibility 0.6s allow-discrete; }
  .servico__item[open]::details-content { block-size: auto; }
}
.servico__num { grid-column: 1; grid-row: 1 / span 3; padding-top: 0.5em; font: 600 0.74rem/1 var(--fonte-rotulo); letter-spacing: 0.14em; color: var(--cor-acento); }
.servico__nome { grid-column: 2; grid-row: 1; }
.servico__desc { grid-column: 2; grid-row: 2; max-width: 44rem; }
.servico__tag {
  grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; padding: 7px 12px;
  border: 1px solid var(--cor-linha-forte); border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  color: var(--cor-texto-suave); transition: color 0.4s, border-color 0.4s;
}
.servico__link:is(:hover, :focus-visible) .servico__tag { color: var(--cor-acento); border-color: var(--cor-acento); }
@media (min-width: 900px) {
  .servico__link { grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.3fr) 200px 28px; gap: 32px; align-items: center; }
  .servico__num, .servico__nome, .servico__desc, .servico__tag, .servico__icone { grid-column: auto; grid-row: auto; }
  .servico__num { padding-top: 0; }
  .servico__tag { margin-top: 0; }
  .servico__icone { justify-self: end; }
  .servico__detalhe { padding-left: 76px; }
}

/* ---------- Como funciona: trilha de pegadas ---------- */
.passos__grade { display: grid; gap: clamp(56px, 7vw, 110px); }
.passos__cabecalho { margin-bottom: 0; }
.passos__cabecalho .botao { justify-self: start; margin-top: 8px; }
@media (min-width: 900px) {
  .passos__grade { grid-template-columns: 0.9fr 1.1fr; }
  .passos__cabecalho { position: sticky; top: calc(var(--nav-altura) + 48px); align-self: start; }
}
.passos__corpo { position: relative; padding-left: clamp(72px, 8vw, 104px); }
.passos__trilha { position: absolute; left: 0; top: 0; bottom: 0; width: clamp(44px, 4.4vw, 60px); }
.passos__linha { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--cor-marca), rgb(242 99 34 / 0.12)); transform-origin: top; }
.passos__pegada { position: absolute; top: calc((var(--i) + 0.25) * 100% / 12); width: clamp(16px, 1.5vw, 21px); height: clamp(34px, 3.1vw, 44px); color: var(--cor-marca); }
.passos__pegada--d { left: 2px; }
.passos__pegada--e { right: 2px; }
.passos__pegada .pegada { width: 100%; height: 100%; transform: rotate(180deg); }
.passos__pegada--e .pegada { transform: rotate(180deg) scaleX(-1); }
.passos__lista { display: grid; gap: clamp(64px, 9vw, 140px); padding-block: 8px; }
.passo { display: grid; gap: 14px; max-width: 34rem; }
.passo p { color: var(--cor-texto-suave); }
.passo__num {
  font-family: var(--fonte-titulo); font-size: clamp(3.2rem, 5.5vw, 5rem); line-height: 0.9;
  color: transparent; -webkit-text-stroke: 1px var(--cor-linha-forte);
  transition: color 0.9s var(--ease), -webkit-text-stroke-color 0.9s var(--ease);
}
.passo--ativo .passo__num { color: var(--cor-acento); -webkit-text-stroke-color: transparent; }

/* ---------- O espaço ---------- */
.espaco__cabecalho { margin-bottom: clamp(40px, 5vw, 72px); }
.espaco__foto { aspect-ratio: 16 / 9; margin: 0; }

/* ---------- Diferenciais: seção escura ---------- */
.diferenciais {
  --cor-texto: #f7eee6;
  --cor-texto-suave: #c4b3a5;
  --cor-linha: rgb(247 238 230 / 0.14);
  --cor-linha-forte: rgb(247 238 230 / 0.32);
  --cor-enfase: #f58a5a;
  --cor-superficie: #31231b;
  background: var(--cor-escuro); color: var(--cor-texto);
}
.diferenciais .cartao-foto__num { color: var(--cor-enfase); }
.diferenciais .cartao-foto .midia img { transition: transform 1.1s var(--ease); }
.diferenciais .cartao-foto:hover .midia img { transform: scale(1.05); }

/* ---------- Depoimentos ---------- */
.depoimento { background: var(--cor-superficie); }
.estrelas { color: var(--cor-marca); }

/* ---------- Contato ---------- */
.contato__endereco strong { font-weight: 600; }
.contato__horario { max-width: 28rem; color: var(--cor-texto-suave); }

/* ---------- Chamada final na cor da marca ---------- */
.cta-final--marca { background: var(--cor-acento); color: var(--cor-creme); --cor-texto-suave: rgb(255 247 239 / 0.85); }
.cta-final--marca .titulo-xxl em { color: var(--cor-escuro); }
.cta-final--marca .rotulo::before { background: var(--cor-creme); }
.cta-final--marca .cta-final__botao { background: var(--cor-creme); color: var(--cor-acento); }
.cta-final--marca .cta-final__botao::before { background: var(--cor-escuro); }
.cta-final--marca .cta-final__botao:is(:hover, :focus-visible) { color: var(--cor-creme); }
.cta-final--marca :focus-visible { outline-color: var(--cor-creme); }
.cta-final__pegadas { position: absolute; inset: 0; pointer-events: none; }
.cta-final__interno { position: relative; }
.cta-final__pegadas span { position: absolute; left: var(--x); top: var(--y); width: clamp(22px, 2.6vw, 36px); height: clamp(46px, 5.4vw, 76px); color: rgb(255 247 239 / 0.16); }
.cta-final__pegadas .pegada { width: 100%; height: 100%; transform: rotate(32deg); }
.cta-final__pegadas .esq .pegada { transform: rotate(32deg) scaleX(-1); }

/* ---------- Rodapé ---------- */
.rodape__logo img { width: auto; height: 64px; }
/* preenchido bem claro: o contorno mostrava as sobreposições internas da fonte variável */
.rodape__gigante { font-style: italic; font-weight: 600; color: rgb(242 99 34 / 0.1); -webkit-text-stroke: 0; }

/* ---------- Detalhes ---------- */
.cursor__anel { width: 30px; height: 30px; }
.whats { box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); transition: opacity 0.4s var(--ease), transform 0.6s var(--ease), visibility 0s; }
.whats--oculto { opacity: 0; visibility: hidden; transform: translateY(24px) scale(0.6); transition: opacity 0.3s, transform 0.4s, visibility 0s 0.4s; }