/* ==========================================================================
   Rosimari Ranheri Podologia
   Fontes auto-hospedadas — subsets latin e latin-ext (pt-BR).
   ========================================================================== */

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/librefranklin-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/librefranklin-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  --plum-900: #4A1030;
  --plum-800: #4A1236;
  --plum-700: #5A1943;
  --rose-600: #A82565;
  --rose-700: #8E1E54;
  --gold-700: #8A6529;
  --gold-600: #B58A4E;
  --gold-400: #C79A5C;
  --gold-300: #E5C79A;
  --gold-200: #F6D9A8;

  --ink: #2C1420;
  --ink-2: #4A2A38;
  --muted: #674454;
  --muted-2: #75586A;

  --bg: #FEFBFC;
  --bg-soft: #FAF3F6;
  --bg-pink: #FDF6F9;
  --bg-pink-2: #FDF0F6;

  --line: #EFDFE6;
  --line-2: #E5D0DA;
  --line-3: #EFD3E0;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Altura do cabeçalho fixo. O painel do menu e o scroll das âncoras
     dependem dela, então fica num só lugar. */
  --header-h: 118px;

  --shell: 1180px;
  --gutter: clamp(20px, 4vw, 28px);
  --band: clamp(56px, 8vw, 104px);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--rose-600); text-decoration: none; }
a:hover { color: var(--plum-900); }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--rose-600);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--plum-900);
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
  font-size: 15px;
}
.skip-link:focus {
  left: 0;
  color: #FFFFFF;
}

/* Fica fora da tela sem sair da árvore de acessibilidade. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

section[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.title {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--plum-900);
  text-wrap: pretty;
}

/* Marca do WhatsApp: a mesma silhueta de balão usada em todo o design. */
.wa-mark {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 50% 50% 50% 10%;
  transform: rotate(-8deg);
}
.wa-mark.is-sm { width: 15px; height: 15px; border-width: 1.6px; }
.wa-mark.is-nav { width: 14px; height: 14px; border-width: 1.6px; }

/* Ícones do conjunto desenhado para o site. A cor vem de currentColor, então
   quem define é o contexto — cartão, cidade ou diferencial. */
.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* Ilustrações vetoriais: ocupam a largura da coluna e mantêm a proporção. */
.hero-art,
.sport-art {
  margin: 0;
  line-height: 0;
}
.hero-art svg,
.sport-art svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.hero-art img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.portrait {
  /* 4/3.6 faz a coluna do retrato + bloco do diploma terminar junto com a
     coluna de texto ao lado. Com 4/4.5 a esquerda sobrava 96px e o diploma
     ficava pendurado abaixo do fim do texto. */
  aspect-ratio: 4 / 3.6;
  width: 100%;
  border-radius: 6px;
}
img.portrait {
  display: block;
  height: auto;
  object-fit: cover;
  object-position: center 18%;
  border: 1px solid var(--line-2);
}


/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color 160ms ease, color 160ms ease;
}

.btn-primary {
  background: var(--rose-600);
  color: #FFFFFF;
  font-size: 17px;
  padding: 19px 34px;
}
.btn-primary:hover { background: var(--rose-700); color: #FFFFFF; }

.btn-nav {
  background: var(--plum-900);
  color: #FFFFFF;
  gap: 8px;
  font-size: clamp(12.5px, 1.4vw, 14px);
  font-weight: 500;
  padding: clamp(9px, 1.2vw, 12px) clamp(14px, 2vw, 20px);
  white-space: nowrap;
}
.btn-nav:hover { background: var(--rose-600); color: #FFFFFF; }

.btn-gold {
  gap: 10px;
  border: 1px solid var(--gold-400);
  color: var(--gold-300);
  font-size: 16px;
  font-weight: 500;
  padding: 17px 30px;
  align-self: flex-start;
  margin-top: 8px;
}
.btn-gold:hover { background: var(--gold-600); color: var(--plum-800); }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(254, 251, 252, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .shell {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  /* Acima do painel, para o botão de fechar continuar alcançável. */
  position: relative;
  z-index: 46;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img {
  height: clamp(44px, 9vw, 98px);
  width: auto;
  max-width: 52vw;
  object-fit: contain;
  display: block;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  /* flex-start + margin-left:auto: encostado à direita quando cabe, mas ao
     virar linha própria no celular a rolagem começa no primeiro item em vez
     de deixar "Tratamentos" cortado fora da área visível. */
  justify-content: flex-start;
  margin-left: auto;
  align-items: center;
  gap: clamp(10px, 2.2vw, 28px);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0;
}
.site-nav::-webkit-scrollbar { display: none; }
/* :not(.btn) mantém o botão "Agendar" fora destas regras — sem isso elas
   venceriam .btn-nav por especificidade e o texto ficaria escuro sobre escuro. */
.site-nav a:not(.btn) {
  font-size: clamp(12.5px, 1.4vw, 14px);
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  /* O texto tem 15px de altura; o padding leva a área de toque a ~37px.
     Sem isso o alvo fica bem abaixo do mínimo confortável no celular. */
  padding: 11px 0;
}
.site-nav a:not(.btn):hover { color: var(--rose-600); }

/* ==========================================================================
   Menu do celular
   ========================================================================== */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* 44x44: alvo de toque cheio, mesmo o ícone medindo 24px. */
  width: 44px;
  height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--plum-900);
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
/* Sem texto na tela, mas o botão precisa de nome para leitor de tela — e ele
   muda com o estado, como o ícone. */
.lbl-fechar { display: none; }
.menu-open .lbl-abrir { display: none; }
.menu-open .lbl-fechar { display: inline; }
.bars {
  position: relative;
  width: 24px;
  height: 16px;
  flex: 0 0 auto;
}
.bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 220ms ease, opacity 140ms ease;
}
.bars span:nth-child(1) { top: 0; }
.bars span:nth-child(2) { top: 7px; }
.bars span:nth-child(3) { top: 14px; }
/* As barras viram X: as extremas caminham para o centro e giram. */
.menu-open .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .bars span:nth-child(2) { opacity: 0; }
.menu-open .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--plum-800);
  color: #F6E3EC;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--header-h) + 20px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.menu-open .menu { opacity: 1; transform: none; }
/* Trava a rolagem do fundo enquanto o painel está aberto. */
body.menu-open { overflow: hidden; }
/* O botão flutuante cobriria o rodapé do painel. */
body.menu-open .wa-float { display: none; }

.menu-nav { display: flex; flex-direction: column; }
.menu-nav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(246, 227, 236, 0.14);
  font-family: var(--serif);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.menu-nav a:first-child { border-top: 1px solid rgba(246, 227, 236, 0.14); }
.menu-nav a:hover,
.menu-nav a:focus-visible { color: var(--gold-300); }
.menu-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold-300);
  flex: 0 0 auto;
}

.menu-foot { display: flex; flex-direction: column; gap: 20px; }
.menu-foot .btn { justify-content: center; align-self: stretch; }
.menu-foot p { font-size: 15px; line-height: 1.6; color: #DCBAC9; }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 761px) {
  /* Sem o painel no DOM visível, nada do estado aberto deve sobrar. */
  .menu { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--bg-pink);
  color: var(--plum-900);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 85% at 88% 10%, rgba(168, 37, 101, 0.1), rgba(253, 246, 249, 0) 62%);
}
.hero .shell {
  position: relative;
  padding-top: var(--band);
  padding-bottom: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 620px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  border: 1px solid rgba(168, 37, 101, 0.35);
  color: var(--rose-600);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--plum-900);
  text-wrap: pretty;
}
.hero-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 540px;
  text-wrap: pretty;
}
.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.hero-note {
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--muted-2);
}

/* ==========================================================================
   Apresentação
   ========================================================================== */

.intro { background: var(--bg); }
.intro .shell {
  padding-top: var(--band);
  padding-bottom: var(--band);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.intro-head { display: flex; flex-direction: column; gap: 20px; }
.intro-body { display: flex; flex-direction: column; gap: 22px; }
.prose {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ==========================================================================
   Serviços
   ========================================================================== */

.services {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.services .shell { padding-top: var(--band); padding-bottom: var(--band); }
.services-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 54px);
}
.services-head > div { display: flex; flex-direction: column; gap: 18px; }
.services-head p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}
.service {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px 28px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.service:hover { border-color: var(--rose-600); transform: translateY(-3px); }
.svc-ico {
  width: 36px;
  height: 36px;
  color: var(--rose-600);
  margin-bottom: 2px;
}
.service h3 { font-size: 20px; line-height: 1.3; color: var(--plum-900); font-weight: 500; }
.service .term {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: -6px;
}
.service p:last-child {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--muted);
  text-wrap: pretty;
}

/* ==========================================================================
   Faixa de fotos
   ========================================================================== */

.gallery {
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.gallery .shell {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 3vw, 30px);
}
.gallery figure { margin: 0; }
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.gallery figcaption {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted-2);
  text-wrap: pretty;
}

/* ==========================================================================
   Podologia esportiva
   ========================================================================== */

.sport {
  background: var(--plum-800);
  color: #F6E3EC;
  position: relative;
  overflow: hidden;
}
.sport::before,
.sport::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sport::before {
  top: -140px; right: -120px;
  width: 520px; height: 520px;
  border: 1px solid rgba(168, 37, 101, 0.22);
}
.sport::after {
  top: -60px; right: -40px;
  width: 340px; height: 340px;
  border: 1px solid rgba(168, 37, 101, 0.16);
}
.sport .shell {
  position: relative;
  padding-top: clamp(60px, 8vw, 108px);
  padding-bottom: clamp(60px, 8vw, 108px);
}
.sport-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.sport-copy { display: flex; flex-direction: column; gap: 26px; }
.tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 10px;
  background: var(--gold-600);
  color: var(--plum-800);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 3px;
}
.sport h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
/* :not(.tag) mantém o selo fora desta regra — sem isso ela vence .tag por
   especificidade e o texto sai rosa claro sobre o dourado, ilegível. */
.sport-copy p:not(.tag) {
  font-size: 17.5px;
  line-height: 1.72;
  color: #DCBAC9;
  text-wrap: pretty;
}
/* Os quatro pontos passam a correr sob a ilustração, em vez de dividirem a
   largura com ela. */
.sport-list {
  margin-top: clamp(38px, 5vw, 58px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 2px;
  background: rgba(168, 37, 101, 0.18);
  border-radius: 6px;
  overflow: hidden;
}
.sport-list li {
  background: var(--plum-700);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sport-list .num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold-300);
}
.sport-list .text {
  font-size: 16.5px;
  line-height: 1.55;
  color: #F6E3EC;
}

/* ==========================================================================
   Cidades
   ========================================================================== */

.cities { background: var(--bg); }
.cities .shell { padding-top: var(--band); padding-bottom: var(--band); }
.cities-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 660px;
  margin-bottom: 52px;
}
.cities-head p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}
.city {
  border: 1px solid var(--line);
  background: #FFFFFF;
  border-radius: 6px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.city .kind {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.city-ico { width: 26px; height: 26px; }
.city h3 { font-family: var(--serif); font-size: 30px; color: var(--plum-900); }
.city p { font-size: 15.5px; line-height: 1.68; color: var(--muted); }
.city .foot {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted-2);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: auto;
}
.city.is-primary {
  border-color: var(--rose-600);
  background: var(--rose-600);
  color: #FDEEF4;
}
.city.is-primary .kind { color: var(--gold-200); }
.city.is-primary h3 { color: #FFFFFF; }
.city.is-primary p { color: #F7DDE9; }
.city.is-primary .foot {
  color: #F3CEDF;
  border-top-color: rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   Sobre
   ========================================================================== */

.about {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Três blocos: título, retrato e texto. No celular a coluna é uma só e a
   ordem do DOM manda — título, retrato, texto —, que é como a seção deve
   abrir. No desktop as áreas recolocam o retrato à esquerda, com o título
   acima do texto na coluna da direita. */
.about .shell {
  padding-top: var(--band);
  padding-bottom: var(--band);
  display: grid;
  gap: 26px;
}
@media (min-width: 761px) {
  .about .shell {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "aside head"
      "aside body";
    align-items: start;
    column-gap: clamp(36px, 5vw, 72px);
  }
  .about-head { grid-area: head; }
  .about-aside { grid-area: aside; }
  .about-body { grid-area: body; }
}
.about-head { display: flex; flex-direction: column; gap: 14px; }
.about-aside { display: flex; flex-direction: column; gap: 22px; }
.about-body { display: flex; flex-direction: column; gap: 26px; }

/* No celular o retrato e o diploma deixam de ser um bloco só: display:contents
   promove os dois a itens do grid, e o diploma vai para o fim. Antes ele caía
   entre a foto e a biografia, cortando a leitura no meio. */
@media (max-width: 760px) {
  .about-aside { display: contents; }
  .about-head { order: 1; }
  .about .shell .portrait { order: 2; }
  .about-body { order: 3; }
  .about .shell .diploma { order: 4; }
}

.about h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--plum-900);
}
.diploma {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
}
.diploma-seal {
  flex: 0 0 62px;
  height: 62px;
  border-radius: 14px;
  border: 1px solid var(--line-3);
  background: var(--bg-pink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-600);
}
.diploma-seal .ico { width: 32px; height: 32px; }
.diploma-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.diploma-text strong { font-size: 16px; font-weight: 600; color: var(--plum-900); }
.diploma-text span { font-size: 13.5px; line-height: 1.55; color: var(--muted-2); }
.diploma-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 3px;
}
.diploma-links a {
  padding: 6px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rose-600);
  border-bottom: 1px solid rgba(168, 37, 101, 0.35);
}
.diploma-links a:hover { color: var(--plum-900); border-bottom-color: var(--plum-900); }

.credentials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 22px;
  margin-top: 8px;
}
.credentials > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 2px solid var(--gold-600);
  padding-top: 18px;
}
.credentials h3 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-900);
  font-weight: 600;
}
.credentials ul { display: flex; flex-direction: column; gap: 9px; }
.credentials li { font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* ==========================================================================
   Diferenciais
   ========================================================================== */

.values { background: var(--bg); }
.values .shell {
  padding-top: var(--band);
  padding-bottom: clamp(56px, 8vw, 96px);
}
.values h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--plum-900);
  margin-bottom: 46px;
  max-width: 560px;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px 34px;
}
.value { display: flex; flex-direction: column; gap: 12px; }
.value strong { font-size: 18px; font-weight: 600; color: var(--plum-900); }
.value p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--muted);
  text-wrap: pretty;
}

.icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--bg-pink-2);
  border: 1px solid var(--line-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rose-600);
}
.icon .ico { width: 27px; height: 27px; }

/* ==========================================================================
   Contato
   ========================================================================== */

.contact {
  background: var(--bg-soft);
  color: var(--plum-900);
  border-top: 1px solid var(--line);
}
.contact .shell {
  padding-top: var(--band);
  padding-bottom: clamp(56px, 8vw, 100px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}
.contact-copy { display: flex; flex-direction: column; gap: 26px; }
.contact h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--plum-900);
}
.contact-copy > p {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 480px;
  text-wrap: pretty;
}
.contact-copy .btn {
  align-self: flex-start;
  padding: 19px 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.contact-copy .btn span { white-space: nowrap; }

.details {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-2);
}
.details > div {
  display: grid;
  grid-template-columns: minmax(96px, 120px) 1fr;
  gap: 10px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-2);
}
.details > div:last-child { border-bottom: 0; }
.details dt {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.details dd { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--plum-900); }
.details dd a {
  color: var(--plum-900);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  margin: -6px 0;
}
.details dd a:hover { color: var(--rose-600); }

/* Endereço clicável. Herda a cor do contexto — funciona igual sobre o card
   rosa de Imbituba, sobre o fundo claro do contato e no rodapé escuro. */
/* text-decoration em vez de border-bottom: a borda acompanha a caixa do
   link, que tem padding para dar área de toque, e o traço ficava solto
   longe do texto. O sublinhado segue a linha de base. */
.map-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease;
}
.map-link:hover {
  color: inherit;
  text-decoration-color: currentColor;
}
.details .map-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  text-decoration: none;
}
.details .map-link span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 160ms ease;
}
.details .map-link:hover span { text-decoration-color: currentColor; }
.map-pin { width: 17px; height: 17px; margin-top: 3px; }

/* ==========================================================================
   Rodapé
   ========================================================================== */

.site-footer { background: var(--plum-800); color: #C2A0B0; }
.site-footer .shell {
  padding-top: 46px;
  padding-bottom: 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 28px;
  justify-content: space-between;
  align-items: center;
}
.site-footer > .shell > div { display: flex; flex-direction: column; gap: 6px; }
.site-footer .name {
  font-family: var(--serif);
  font-size: 21px;
  color: #FFFFFF;
}
.site-footer p { font-size: 14.5px; line-height: 1.6; }
.site-footer .wa {
  display: flex;
  align-items: center;
  gap: 9px;
}
.site-footer .wa-mark { width: 14px; height: 14px; border-width: 1.5px; }
.site-footer a {
  color: inherit;
  display: inline-block;
  padding: 6px 0;
  margin: -6px 0;
}
.site-footer a:hover { color: #FFFFFF; }
.site-footer .legal {
  font-size: 13px;
  color: #A98C9A;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
}

/* ==========================================================================
   Botão flutuante
   ========================================================================== */

.wa-float {
  position: fixed;
  right: clamp(12px, 3vw, 24px);
  bottom: clamp(12px, 3vw, 24px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 24px);
  background: var(--rose-600);
  color: #FFFFFF;
  font-size: clamp(14px, 1.4vw, 15px);
  font-weight: 600;
  padding: 15px clamp(18px, 2.4vw, 24px);
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(44, 10, 28, 0.32);
  transition: background-color 160ms ease;
}
.wa-float:hover { background: var(--rose-700); color: #FFFFFF; }
.wa-float .wa-mark { width: 17px; height: 17px; border-width: 1.9px; }

/* ==========================================================================
   Ajustes de telas estreitas
   ========================================================================== */

/* Entre o ponto de corte e o tamanho máximo do logotipo, o cabeçalho fica
   em torno de 92px — a --header-h acompanha para o scroll das âncoras não
   sobrar espaço demais. */
@media (min-width: 761px) and (max-width: 1088px) {
  :root { --header-h: 92px; }
}

@media (max-width: 760px) {
  /* Uma linha só. A --header-h alimenta o topo do painel e o scroll das
     âncoras, então precisa bater com a altura real. */
  :root { --header-h: 78px; }
  .brand img { height: 58px; }
  .site-header .shell { flex-wrap: nowrap; }
}

@media (max-width: 520px) {
  /* Rótulo acima do valor: a coluna fixa de 120px espremia o endereço. */
  .details > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  /* Espaço para o botão flutuante não cobrir a última linha do rodapé. */
  .site-footer .shell { padding-bottom: 108px; }
}