/* ==========================================================================
   Cida Queiroz — landing page · V2
   Sistema: off-white quente + marrom profundo + verde oliva (acento de
   identidade) + dourado pontual. Instrument Serif nos grandes momentos,
   Manrope na interface. A linguagem dos posts da Cida (arco, linha fina,
   losango, estrela de quatro pontas) segue presente, mas de forma mais
   leve e assimétrica.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variavel.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Allura";
  src: url("../fonts/allura-assinatura.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Superfícies */
  --papel: #FBF8F3;          /* branco quente */
  --papel-2: #F6F1E9;
  --creme: #F2EADD;
  --creme-forte: #ECE1D0;
  --nevoa: #ECEDE2;          /* névoa oliva */
  --nevoa-claro: #F3F3EA;    /* fundo da seção de sinais */
  --salvia: #DFE0CF;
  --salvia-2: #D2D4BF;

  /* Verde oliva — acento de identidade */
  --oliva: #55603C;
  --oliva-escuro: #434C2F;
  --oliva-profundo: #39402B;
  --oliva-disco: #444C34;
  --oliva-claro: #8E9672;
  --oliva-linha: rgba(85, 96, 60, .22);
  --oliva-linha-forte: rgba(85, 96, 60, .5);

  /* Marrons e dourado */
  --cacau: #33241A;
  --cacau-fundo: #3A281D;    /* fundo do contato final */
  --cacau-arco: #46322A;
  --areia: #E9DED0;          /* texto claro sobre marrom */
  --tinta: #4A3D33;
  --tinta-suave: #6E6155;
  --ouro: #B08A4F;
  --ouro-texto: #82602E;
  --ouro-claro: #D6B67F;

  /* Sobre fundo escuro */
  --claro: #FBF8F3;
  --claro-suave: #D9DCC8;

  /* Tipografia */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --script: "Allura", "Segoe Script", "Apple Chancery", cursive;

  /* Layout */
  --gutter: clamp(20px, 5.2vw, 64px);
  --max: 1240px;

  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.03rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; }

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

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pular {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--oliva); color: var(--claro);
  padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.pular:focus { top: 12px; }

.icone { width: 20px; height: 20px; flex: none; }

/* Ornamentos da identidade */
.filete {
  position: relative; display: block;
  width: 152px; height: 9px; margin-inline: auto;
  background:
    linear-gradient(var(--oliva-linha-forte), var(--oliva-linha-forte)) left center / calc(50% - 13px) 1px no-repeat,
    linear-gradient(var(--oliva-linha-forte), var(--oliva-linha-forte)) right center / calc(50% - 13px) 1px no-repeat;
}
.filete::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; background: var(--ouro);
  transform: translate(-50%, -50%) rotate(45deg);
}

.titulo-secao {
  font-family: var(--serif);
  font-size: clamp(2.35rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--cacau);
  text-wrap: balance;
}

/* ---------- Botões e links ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 15px 28px;
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-weight: 650; font-size: .97rem; line-height: 1.25;
  letter-spacing: 0; text-decoration: none; text-align: center; text-wrap: balance;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.botao .icone { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.botao:hover .icone { transform: rotate(-10deg) scale(1.08); }
.botao--oliva { background: var(--oliva); color: var(--claro); box-shadow: 0 10px 24px -14px rgba(57, 64, 43, .7); }
.botao--oliva:hover { background: var(--oliva-escuro); }
.botao--contorno { border-color: var(--oliva-linha-forte); color: var(--oliva); background: transparent; }
.botao--contorno:hover { background: var(--oliva); border-color: var(--oliva); color: var(--claro); }
.botao--claro { background: var(--claro); color: var(--oliva-profundo); }
.botao--claro:hover { background: #FFFFFF; }
.botao--claro:focus-visible { outline-color: var(--claro); }

.link-oliva {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  color: var(--oliva); font-weight: 650; font-size: .94rem;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px; text-decoration-color: var(--oliva-linha-forte);
  transition: color .25s ease, text-decoration-color .25s ease;
}
.link-oliva:hover { color: var(--oliva-escuro); text-decoration-color: currentColor; }
.link-oliva .icone { width: 17px; height: 17px; }

/* ==========================================================================
   Topo
   ========================================================================== */
.topo { position: relative; z-index: 20; background: var(--papel); }
.topo__barra {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  height: 80px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marca {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; text-decoration: none; color: var(--cacau);
}
.marca__logo {
  width: 52px; height: 52px; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--oliva-linha), 0 6px 16px -10px rgba(51, 36, 26, .45);
}
.marca__nome {
  font-family: var(--serif); font-size: clamp(1.2rem, 5.2vw, 1.4rem); line-height: 1;
  letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; color: var(--cacau);
}

.menu-botao {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 0 4px 0 10px;
  background: none; border: 0; color: var(--cacau);
  font: 600 .9rem/1 var(--sans); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-botao__linhas {
  position: relative; width: 22px; height: 11px;
  border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transition: border-color .2s ease;
}
.menu-botao__linhas::before, .menu-botao__linhas::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1.5px; margin-top: -.75px; background: currentColor;
  transform: scaleX(0); transition: transform .25s ease;
}
.menu-aberto .menu-botao__linhas { border-color: transparent; }
.menu-aberto .menu-botao__linhas::before { transform: rotate(45deg); }
.menu-aberto .menu-botao__linhas::after { transform: rotate(-45deg); }

.menu__lista a { text-decoration: none; color: var(--cacau); }

@media (max-width: 1023.98px) {
  .js .menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papel);
    padding: 4px var(--gutter) 28px;
    border-top: 1px solid var(--oliva-linha);
    box-shadow: 0 22px 30px -22px rgba(51, 36, 26, .35);
  }
  .js.menu-aberto .menu { display: block; }
  html:not(.js) .menu-botao { display: none; }
  html:not(.js) .menu { padding: 0 var(--gutter) 16px; }
  .menu__lista li { border-bottom: 1px solid var(--oliva-linha); }
  .menu__lista a {
    display: flex; align-items: center; min-height: 60px;
    font-family: var(--serif); font-size: 1.9rem;
  }
  .menu__whats { width: 100%; margin-top: 22px; background: var(--oliva); color: var(--claro); border-color: var(--oliva); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; background: var(--papel); overflow: hidden; }
.hero__grade {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.hero__texto { padding-top: clamp(14px, 3vw, 24px); }

.hero__funcoes {
  display: flex; flex-direction: column; gap: 2px;
  font-size: .84rem; font-weight: 650; line-height: 1.45;
  letter-spacing: .01em; color: var(--oliva);
}
.hero__ponto { display: none; width: 5px; height: 5px; background: var(--ouro); transform: rotate(45deg); flex: none; }

.hero__titulo {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(2.4rem, .125rem + 10vw, 4.75rem);
  line-height: 1; letter-spacing: -0.015em;
  color: var(--cacau);
}
.hero__linha { display: block; }
.hero__linha--oliva { color: var(--oliva); }

.hero__sub {
  margin-top: 20px; max-width: 34ch;
  font-size: 1.03rem; line-height: 1.6; color: var(--tinta);
}
.hero__cta {
  margin-top: 28px; width: 100%;
  padding-inline: 16px; gap: 10px;
  font-size: clamp(.86rem, 3.75vw, .97rem);
}

/* Retrato: painel sálvia + arco incompleto */
.hero__visual {
  position: relative;
  margin-top: 40px;
  width: calc(100% + var(--gutter) - 10px);
  margin-right: calc(-1 * var(--gutter));
  justify-self: end;
  aspect-ratio: 781 / 1240;
}
.hero__forma {
  position: absolute; left: 0; right: 0; bottom: 0; top: 15%;
  border-top-left-radius: 62% 46%;
  background: linear-gradient(168deg, #E6E7D8 0%, var(--salvia) 45%, var(--salvia-2) 100%);
}
.hero__traco {
  position: absolute; z-index: 1;
  left: 7%; top: 1%;
  width: 96%; height: auto; aspect-ratio: 400 / 470;
  overflow: visible;
}
.hero__arco {
  fill: none; stroke: var(--oliva); stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.hero__estrela { color: var(--ouro); }
.hero__foto {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}

.hero__marcas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: 24px 40px;
  text-align: center;
}
.hero__marcas li {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-inline: 8px; line-height: 1.25;
}
.hero__marcas li + li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 5px; height: 5px; background: var(--ouro);
  transform: translate(-50%, -50%) rotate(45deg);
}
.hero__valor { font-family: var(--serif); font-size: 1.62rem; line-height: 1.05; color: var(--cacau); }
.hero__legenda { margin-top: 5px; font-size: .82rem; font-weight: 550; line-height: 1.3; color: var(--tinta-suave); }

/* Entrada: uma sequência única no carregamento */
@media all {
  .hero__texto > * { animation: surgir .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__texto > :nth-child(2) { animation-delay: .08s; }
  .hero__texto > :nth-child(3) { animation-delay: .18s; }
  .hero__texto > :nth-child(4) { animation-delay: .26s; }
  .hero__arco { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracar 1.8s cubic-bezier(.45, .1, .2, 1) .35s forwards; }
  .hero__estrela { opacity: 0; animation: aparecer .6s ease 1.9s forwards; }
}
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }

/* ==========================================================================
   Sinais no pós-operatório (textos do conteúdo da própria Cida)
   ========================================================================== */
.sinais {
  background: var(--nevoa-claro);
  padding-block: 88px 96px;
}
.sinais__grade { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sinais__titulo { text-wrap: balance; }
.sem-quebra { white-space: nowrap; }
.sinais__titulo > span { display: inline; }
.sinais__oliva { color: var(--oliva); }
.sinais__intro { margin-top: 20px; max-width: 52ch; color: var(--tinta); }

.sinais__lista {
  margin-top: 40px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
.sinal {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px;
  padding: 22px 22px 24px 20px;
  background: rgba(255, 253, 249, .7);
  border: 1px solid var(--oliva-linha);
  border-top-right-radius: 22px;
}
.sinal__marca { grid-row: 1 / span 2; width: 22px; height: 22px; margin-top: 4px; color: var(--oliva); }
.sinal__titulo {
  font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; color: var(--cacau);
  text-wrap: balance;
}
.sinal__texto { margin-top: 8px; font-size: .98rem; line-height: 1.6; color: var(--tinta); }

/* ==========================================================================
   23 anos + Sobre (composição única)
   ========================================================================== */
.sobre {
  background: var(--papel-2);
  padding-block: 80px 96px;
}
.sobre__visual {
  position: relative; isolation: isolate;
  container-type: inline-size;
  width: 100%;
}
.sobre__forma {
  position: absolute; left: 0; right: 7%; bottom: 0; top: 14%;
  z-index: 0;
  border-top-right-radius: 58% 40%;
  background: linear-gradient(180deg, var(--creme) 0%, var(--creme-forte) 100%);
}
.sobre__quadro {
  position: relative; z-index: 2;
  margin-left: auto; margin-right: var(--gutter);
  width: 70%;
  aspect-ratio: 899 / 1240;
}
.sobre__anos { margin: 0; }
.sobre__numero {
  position: absolute; z-index: 3;
  left: var(--gutter); top: 21%;
  font-family: var(--serif);
  font-size: 39cqw;
  line-height: .82; letter-spacing: -0.04em;
  color: var(--oliva);
  font-variant-numeric: lining-nums;
}
.sobre__legenda {
  position: absolute; z-index: 3;
  left: var(--gutter); top: calc(21% + 39cqw * .86);
  width: 112px;
  font-size: .8125rem; line-height: 1.35; font-weight: 550; color: var(--tinta-suave);
}
.sobre__legenda strong { display: block; font-weight: 750; color: var(--cacau); }
.sobre__foto {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}

.sobre__texto {
  padding: 64px var(--gutter) 0;
  max-width: 640px;
}
.sobre__intro { margin-top: 24px; max-width: 56ch; }

.credenciais { margin-top: 40px; }
.credenciais li {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 16px;
  padding-block: 17px;
  border-bottom: 1px solid rgba(85, 96, 60, .16);
  font-family: var(--serif); font-size: 1.42rem; line-height: 1.15; color: var(--cacau);
}
.credenciais li:first-child { border-top: 1px solid rgba(85, 96, 60, .16); }
.credenciais__icone { display: grid; place-items: center; width: 24px; height: 24px; color: var(--oliva); }
.credenciais__icone svg { width: 22px; height: 22px; }
.credenciais li.credenciais__principal { font-size: 1.75rem; color: var(--oliva); padding-block: 20px; }
.credenciais__principal .credenciais__icone svg { width: 24px; height: 24px; }

.sobre__fecho {
  margin-top: 48px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); line-height: 1.1;
  color: var(--oliva);
}
.sobre__brilho { width: 16px; height: 16px; flex: none; color: var(--ouro); }

/* ==========================================================================
   Atendimentos
   ========================================================================== */
.servicos { background: var(--papel); padding-block: 88px 104px; border-top: 1px solid var(--oliva-linha); }
.servicos__topo, .servicos__grade {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
}
.servicos__topo p { margin-top: 16px; max-width: 36ch; color: var(--tinta-suave); }
.servicos__grade { display: grid; gap: 48px; margin-top: 40px; }

/* Destaque: o atendimento principal */
.destaque { position: relative; isolation: isolate; margin-right: 12px; }
.destaque::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--oliva-linha-forte);
  border-top-right-radius: 120px;
  transform: translate(12px, 12px);
}
.destaque__corpo {
  position: relative;
  padding: 32px 22px 28px;
  background: linear-gradient(160deg, #EFF0E6 0%, var(--nevoa) 50%, #E3E5D5 100%);
  border-top-right-radius: 120px;
}
.destaque__topo { display: flex; align-items: center; gap: 14px; }
.destaque__icone {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--oliva-linha-forte); color: var(--oliva);
  background: rgba(251, 248, 243, .55);
}
.destaque__icone svg { width: 28px; height: 28px; }
.selo {
  display: inline-block;
  padding: 6px 13px 7px; border-radius: 999px;
  background: var(--oliva); color: var(--claro);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2;
}
.destaque__titulo {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: clamp(2.05rem, 1.5rem + 2.2vw, 3rem);
  line-height: 1.04; letter-spacing: -0.01em; color: var(--cacau);
  text-wrap: balance;
}
.destaque__texto { margin-top: 16px; max-width: 42ch; }
.destaque__cta { margin-top: 26px; width: 100%; padding-inline: 14px; gap: 10px; font-size: clamp(.86rem, 3.75vw, .97rem); }

/* Acordeão */
.acordeao__titulo {
  font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; color: var(--cacau);
  margin-bottom: 14px;
}
.acordeao__item { border-bottom: 1px solid var(--oliva-linha); }
.acordeao__titulo + .acordeao__item { border-top: 1px solid var(--oliva-linha); }
.acordeao__cabeca { margin: 0; font: inherit; }
.acordeao__botao {
  -webkit-appearance: none; appearance: none;
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 34px; align-items: center; gap: 16px;
  width: 100%; min-height: 72px; padding: 12px 0;
  background: none; border: 0; border-radius: 0;
  font: 600 1.02rem/1.3 var(--sans); color: var(--cacau); text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acordeao__icone {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--nevoa); color: var(--oliva);
  transition: background-color .35s ease, color .35s ease;
}
.acordeao__icone svg { width: 24px; height: 24px; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.acordeao__sinal {
  position: relative; justify-self: end;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--oliva-linha-forte);
  transition: background-color .3s ease, border-color .3s ease;
}
.acordeao__sinal::before, .acordeao__sinal::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.5px; margin: -.75px 0 0 -6px;
  background: var(--oliva);
  transition: transform .35s ease, background-color .3s ease;
}
.acordeao__sinal::after { transform: rotate(90deg); }
.acordeao__botao:hover .acordeao__icone { background: var(--salvia); }
.acordeao__botao:hover .acordeao__icone svg { transform: rotate(-8deg) scale(1.06); }
.acordeao__botao:hover .acordeao__nome { color: var(--oliva-escuro); }
.acordeao__botao[aria-expanded="true"] .acordeao__icone { background: var(--oliva); color: var(--claro); }
.acordeao__botao[aria-expanded="true"] .acordeao__sinal { background: var(--oliva); border-color: var(--oliva); }
.acordeao__botao[aria-expanded="true"] .acordeao__sinal::before,
.acordeao__botao[aria-expanded="true"] .acordeao__sinal::after { background: var(--claro); }
.acordeao__botao[aria-expanded="true"] .acordeao__sinal::after { transform: rotate(0deg); }

.acordeao__painel { display: grid; grid-template-rows: 1fr; }
.acordeao__conteudo { overflow: hidden; min-height: 0; padding-left: 62px; }
.acordeao__conteudo p { max-width: 48ch; font-size: .96rem; line-height: 1.65; color: var(--tinta); }
.acordeao__conteudo .link-oliva { margin: 8px 0 20px; }
.js .acordeao__painel { grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.2, .7, .2, 1); }
.js .acordeao__conteudo { visibility: hidden; transition: visibility 0s linear .42s; }
.js .acordeao__item.is-aberto .acordeao__painel { grid-template-rows: 1fr; }
.js .acordeao__item.is-aberto .acordeao__conteudo { visibility: visible; transition-delay: 0s; }

/* ==========================================================================
   Home Care — a porta da casa
   ========================================================================== */
.homecare {
  position: relative; overflow: hidden;
  background: var(--creme);
  padding: 72px var(--gutter) 56px;
  text-align: center;
}
.homecare__curva {
  position: absolute; width: 120px; height: auto;
  color: var(--oliva-claro); pointer-events: none;
}
.homecare__ponta { color: var(--ouro); }
.homecare__curva--a { top: 0; left: 0; }
.homecare__curva--b { bottom: 0; right: 0; transform: rotate(180deg); display: none; }

.homecare__porta {
  position: relative; z-index: 1; isolation: isolate;
  max-width: 720px; margin-inline: auto;
  padding: 56px 16px 52px;
}
.homecare__porta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--oliva-linha-forte); border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
.homecare__porta::after {
  content: ""; position: absolute; inset: 12px 12px 0; z-index: -2;
  border-radius: 999px 999px 0 0;
  background:
    radial-gradient(ellipse 70% 38% at 50% 0%, rgba(251, 248, 243, .75), rgba(251, 248, 243, 0) 100%),
    linear-gradient(180deg, #E4E5D3 0%, #ECEADC 50%, rgba(242, 234, 221, 0) 100%);
  pointer-events: none;
}
.homecare__brilho { width: 22px; height: 22px; margin: 0 auto 16px; color: var(--ouro); }
.homecare__titulo {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 1.2rem + 7.2vw, 6.2rem);
  line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--oliva);
}
.homecare__titulo .maiuscula { font-size: 1.24em; }
.homecare__lema {
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.06; color: var(--cacau);
  text-wrap: balance;
}
.homecare .filete { margin-block: 26px; }
.homecare__texto {
  max-width: 30ch; margin-inline: auto;
  font-size: 1.12rem; line-height: 1.55; font-weight: 500; color: var(--cacau);
  text-wrap: balance;
}
.homecare__local { margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--tinta-suave); }
.homecare__ponto {
  display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px;
  background: var(--ouro); transform: rotate(45deg); vertical-align: middle;
}
.homecare .botao { margin-top: 28px; }

.assinatura { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.assinatura__nome {
  font-family: var(--serif); font-size: 1rem;
  letter-spacing: .26em; padding-left: .26em; text-transform: uppercase;
  color: var(--ouro-texto);
  padding-bottom: 10px; border-bottom: 1px solid var(--oliva-linha);
}
.assinatura__script { font-family: var(--script); font-size: 2.05rem; line-height: 1.1; color: var(--oliva); }

.homecare__soleira {
  position: relative; z-index: 1;
  max-width: 960px; margin-inline: auto;
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--oliva-linha-forte);
  font-size: .82rem; font-weight: 650; letter-spacing: .01em; color: var(--tinta-suave);
}
.homecare__losango {
  position: absolute; left: 50%; top: 0;
  width: 7px; height: 7px; background: var(--ouro);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ==========================================================================
   Depoimentos — carrossel
   ========================================================================== */
.depoimentos {
  position: relative; overflow: hidden;
  background: var(--papel);
  padding-block: 88px 64px;
  text-align: center;
}
.depoimentos__titulo {
  padding-inline: var(--gutter);
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.8rem);
  line-height: 1.04; letter-spacing: -0.012em; color: var(--cacau);
}
.depoimentos__titulo { text-wrap: balance; }
.depoimentos__titulo span { display: inline; }
.depoimentos__oliva { color: var(--oliva); }

.carrossel { margin-top: 44px; }
.carrossel:focus-within .depo.is-ativo { box-shadow: 0 0 0 2px var(--oliva-linha-forte), 0 30px 60px -42px rgba(51, 36, 26, .5); }
.carrossel__trilho {
  --passo: calc(100% + 14px);
  --giro: 0deg;
  --encolhe: .05;
  --esmaece: .4;
  display: grid; grid-template-areas: "card";
  justify-items: center; align-items: center;
  padding-block: 8px 12px;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.carrossel__trilho:active { cursor: grabbing; }
.depo {
  --o: 0; --a: 0;
  grid-area: card;
  position: relative;
  width: min(calc(100% - 2 * var(--gutter) - 28px), 440px);
  margin: 0;
  display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  text-align: left;
  background: #FFFDF9;
  border: 1px solid var(--oliva-linha);
  border-radius: 28px 28px 28px 6px;
  box-shadow: 0 30px 60px -44px rgba(51, 36, 26, .45);
  transform:
    translateX(calc(var(--o) * var(--passo)))
    rotate(calc(var(--o) * var(--giro)))
    scale(calc(1 - var(--a) * var(--encolhe)));
  opacity: calc(1 - var(--a) * var(--esmaece));
  z-index: calc(5 - var(--a));
}
.carrossel__trilho.is-pronto .depo {
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .5s ease, background-color .45s ease, border-color .45s ease, filter .5s ease;
}
.depo.is-ativo {
  background: linear-gradient(165deg, #E9EBDD 0%, #E1E4D2 100%);
  border-color: transparent;
}
.depo.is-longe { opacity: 0; visibility: hidden; }

.depo__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.depo__aspas {
  font-family: var(--serif); font-size: 4.2rem; line-height: .7; height: 34px;
  color: var(--oliva);
}
.depo__exemplo {
  padding: 5px 11px 6px; border-radius: 999px;
  border: 1px dashed var(--oliva-linha-forte);
  font-size: .8125rem; font-weight: 600; letter-spacing: 0; line-height: 1.2;
  color: var(--tinta-suave); white-space: nowrap;
}
.depo__citacao { margin: 18px 0 0; }
.depo__destaque {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.05rem);
  line-height: 1.08; letter-spacing: -0.005em; color: var(--cacau);
  text-wrap: balance;
}
.depo__texto { margin-top: 14px; font-size: .97rem; line-height: 1.6; color: var(--tinta); }
.depo__autor {
  display: flex; align-items: center; gap: 12px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--oliva-linha);
}
.depo__avatar {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--papel); color: var(--ouro);
  font-size: .85rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--oliva-linha);
}
.depo__avatar svg { width: 14px; height: 14px; }
.depo__quem { display: flex; flex-direction: column; line-height: 1.3; }
.depo__nome { font-size: .92rem; font-weight: 700; color: var(--cacau); }
.depo__contexto { font-size: .82rem; color: var(--tinta-suave); }

.carrossel__controles {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 28px;
}
.carrossel__seta {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 1px solid var(--oliva-linha-forte);
  color: var(--oliva); cursor: pointer;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.carrossel__seta svg { width: 20px; height: 20px; }
.carrossel__seta:hover:not(:disabled) { background: var(--oliva); color: var(--claro); }
.carrossel__seta:disabled { opacity: .35; cursor: default; }
.carrossel__pontos { display: flex; margin-inline: -4px; }
.carrossel__ponto {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carrossel__ponto::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--oliva-linha-forte);
  transition: width .3s ease, background-color .3s ease;
}
.carrossel__ponto[aria-current="true"]::before { width: 22px; background: var(--oliva); }

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

/* ==========================================================================
   Contato final — marrom profundo + foto da Cida
   ========================================================================== */
.contato {
  position: relative; overflow: hidden;
  background: var(--cacau-fundo); color: var(--areia);
}
.contato__grade {
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.contato__texto { padding: 80px 0 48px; }
.contato__brilho { width: 20px; height: 20px; margin-bottom: 24px; color: var(--ouro-claro); }
.contato__titulo {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 1.3rem + 5.6vw, 4.9rem);
  line-height: 1; letter-spacing: -0.015em; color: var(--claro);
  text-wrap: balance;
}
.contato__sub { margin-top: 18px; max-width: 34ch; color: var(--areia); }
.contato .botao { margin-top: 30px; width: 100%; padding-inline: 18px; }
.contato .botao .icone { color: var(--oliva); }
.contato .botao--claro { color: var(--cacau); }
.contato .botao--claro:hover { background: #E7EAD9; }
.contato__numero { margin-top: 16px; font-size: .92rem; color: #CBBBAA; }
.contato__numero span { margin-left: 4px; color: var(--claro); font-weight: 700; font-variant-numeric: tabular-nums; }

.contato__visual {
  position: relative; isolation: isolate;
  justify-self: center;
  width: min(92%, 400px);
  aspect-ratio: 945 / 1280;
}
.contato__arco {
  position: absolute; left: 4%; right: 4%; top: 7%; bottom: 0; z-index: -1;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #4A3529 0%, var(--cacau-arco) 55%, #3E2B21 100%);
}
.contato__linha {
  position: absolute; left: -2%; right: 10%; top: 3%; bottom: 0; z-index: -1;
  border: 1px solid rgba(214, 182, 127, .45); border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.contato__foto {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}

/* ==========================================================================
   Rodapé — mínimo
   ========================================================================== */
.rodape {
  background: var(--papel); color: var(--tinta-suave);
  padding: 36px var(--gutter) calc(26px + env(safe-area-inset-bottom, 0px));
  font-size: .88rem;
}
.rodape__linha {
  max-width: var(--max); margin-inline: auto;
  display: grid; gap: 14px; justify-items: start;
}
.rodape__marca {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  text-decoration: none; color: var(--cacau);
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase;
}
.rodape__marca img { width: 40px; height: 40px; border-radius: 50%; }
.rodape__local { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.rodape__ponto { width: 5px; height: 5px; background: var(--ouro); transform: rotate(45deg); }
.rodape__links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.rodape__links a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  color: var(--oliva); font-weight: 650; text-decoration: none;
}
.rodape__links a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.rodape__links .icone { width: 18px; height: 18px; }
.rodape__copy {
  max-width: var(--max); margin: 18px auto 0;
  padding-top: 16px; border-top: 1px solid var(--oliva-linha);
  font-size: .82rem;
}

/* ==========================================================================
   WhatsApp flutuante
   ========================================================================== */
.whats-flutuante {
  position: fixed; z-index: 30;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--oliva); color: var(--claro);
  box-shadow: 0 10px 24px -8px rgba(57, 64, 43, .55);
  transition: opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.whats-flutuante svg { width: 26px; height: 26px; }
.whats-flutuante:hover { background: var(--oliva-escuro); }
.js .whats-flutuante { opacity: 0; transform: translateY(14px) scale(.92); pointer-events: none; visibility: hidden; }
.js .whats-flutuante.is-visivel { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
@media (max-width: 1023.98px) {
  .whats-flutuante, .js .whats-flutuante.is-visivel { display: none; }
}

/* ==========================================================================
   Celular: menos interface, mais conteúdo
   ========================================================================== */
@media (max-width: 639.98px) {
  /* Depoimentos: um card por vez, vizinhos só sugeridos nas bordas */
  .depo:not(.is-ativo) { background: #F1EFE6; }

  /* Atendimentos: ícone sem círculo, indicador de expansão discreto */
  .destaque { margin-right: 0; }
  .destaque::before { display: none; }
  .destaque__corpo { border-top-right-radius: 96px; padding: 30px 22px 26px; }
  .destaque__icone { width: auto; height: auto; border: 0; background: none; }
  .destaque__icone svg { width: 26px; height: 26px; }
  .acordeao__titulo { margin-bottom: 6px; }
  .acordeao__titulo + .acordeao__item { border-top-color: var(--oliva-linha); }
  .acordeao__botao { grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 16px; min-height: 64px; }
  .acordeao__icone, .acordeao__botao:hover .acordeao__icone { width: 26px; height: 26px; background: none; color: var(--oliva-claro); }
  .acordeao__icone svg { width: 24px; height: 24px; }
  .acordeao__botao[aria-expanded="true"] .acordeao__icone { background: none; color: var(--oliva); }
  .acordeao__botao[aria-expanded="true"] .acordeao__nome { color: var(--oliva); }
  .acordeao__sinal { width: 18px; height: 18px; border: 0; }
  .acordeao__sinal::before, .acordeao__sinal::after { width: 12px; margin-left: -6px; background: var(--oliva-claro); }
  .acordeao__botao[aria-expanded="true"] .acordeao__sinal { background: none; }
  .acordeao__botao[aria-expanded="true"] .acordeao__sinal::before,
  .acordeao__botao[aria-expanded="true"] .acordeao__sinal::after { background: var(--oliva); }
  .acordeao__conteudo { padding-left: 42px; }

  /* Home Care: menos ornamentos simultâneos */
  .homecare { padding: 80px var(--gutter) 72px; }
  .homecare__curva--a, .homecare__soleira, .assinatura__nome { display: none; }
  .assinatura { margin-top: 32px; }
  .homecare__porta { padding: 52px 14px 44px; }
  .homecare__porta::before, .homecare__porta::after {
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }

}

/* ==========================================================================
   A partir de 640px
   ========================================================================== */
@media (min-width: 640px) {
  .hero__funcoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
  .hero__ponto { display: inline-block; }
  .hero__cta { width: auto; padding-inline: 28px; gap: 12px; }
  .hero__visual { width: min(80%, 460px); margin-right: 0; justify-self: center; }
  .hero__marcas { grid-template-columns: repeat(3, auto); justify-content: center; gap: 0 48px; }
  .hero__marcas li + li::before { left: -24px; }

  .sobre__visual { width: min(84%, 560px); }
  .sobre__quadro { margin-right: 0; }
  .sobre__texto { margin-inline: auto; }

  .destaque__cta { width: auto; padding-inline: 28px; font-size: .97rem; }

  .sinais__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .depo { padding: 30px 30px 26px; }

  .contato .botao { width: auto; padding-inline: 32px; }
  .contato__visual { width: min(78%, 440px); }

  .homecare__curva--a { width: clamp(150px, 24vw, 360px); }

  .homecare__soleira { font-size: .82rem; }

  .rodape__linha { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
  .rodape__local { justify-self: center; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 1024px) {
  body { font-size: 1.09rem; }

  .topo__barra { height: 104px; max-width: 1320px; }
  .marca { gap: 16px; }
  .marca__logo { width: 62px; height: 62px; }
  .marca__nome { font-size: 1.65rem; letter-spacing: .17em; }
  .menu-botao { display: none; }
  .menu { display: flex; align-items: center; gap: 40px; }
  .menu__lista { display: flex; gap: 34px; }
  .menu__lista a {
    display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px;
    font-size: .92rem; font-weight: 600; color: var(--tinta);
    background: linear-gradient(var(--oliva), var(--oliva)) left calc(100% - 8px) / 0 1px no-repeat;
    transition: background-size .35s ease, color .25s ease;
  }
  .menu__lista a:hover { color: var(--oliva); background-size: 100% 1px; }
  .menu__whats { min-height: 46px; padding: 10px 22px; font-size: .9rem; }

  /* Hero */
  .hero__grade {
    max-width: 1320px;
    grid-template-columns: minmax(0, 1fr) clamp(360px, 31vw, 460px);
    grid-template-rows: 1fr auto;
    grid-template-areas: "texto visual" "marcas visual";
    column-gap: clamp(48px, 6vw, 110px);
  }
  .hero__texto { grid-area: texto; align-self: center; padding-block: 36px 40px; }
  .hero__funcoes { font-size: .88rem; }
  .hero__titulo { margin-top: 26px; font-size: clamp(3.6rem, 1rem + 4.2vw, 4.75rem); }
  .hero__sub { margin-top: 26px; font-size: 1.14rem; max-width: 36ch; }
  .hero__cta { margin-top: 38px; }
  .hero__visual {
    grid-area: visual; align-self: end;
    width: 100%; margin: 16px 0 0; justify-self: stretch;
    aspect-ratio: 781 / 1400;
  }
  .hero__forma { top: 13%; }
  .hero__traco { left: 6%; top: 0; width: 98%; }
  .hero__marcas {
    grid-area: marcas; align-self: end;
    justify-content: start; gap: 0 56px; text-align: left;
    padding-block: 0 56px;
  }
  .hero__marcas li { padding-inline: 0; }
  .hero__marcas li + li::before { left: -28px; top: 17px; }
  .hero__valor { font-size: 2.1rem; }
  .hero__legenda { font-size: .82rem; }

  /* Sinais */
  .sinais { padding-block: 120px 128px; }
  .sinais__titulo { font-size: clamp(2.8rem, 1.2rem + 2.6vw, 3.6rem); }
  .sinais__titulo > span { display: block; }
  .sinais__intro { margin-top: 24px; }
  .sinais__lista { margin-top: 56px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .sinal { display: block; padding: 30px 30px 32px; }
  .sinal__marca { width: 24px; height: 24px; margin: 0 0 16px; }
  .sinal__titulo { font-size: 1.75rem; }
  .sinal__texto { margin-top: 10px; }

  /* 23 + Sobre */
  .sobre {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [a-start] minmax(0, 540px) [a-end]
      clamp(56px, 7vw, 110px)
      [b-start] minmax(0, 540px) [b-end]
      minmax(var(--gutter), 1fr) [full-end];
    padding-block: 120px 0;
  }
  .sobre__visual { grid-column: full-start / a-end; grid-row: 1; align-self: end; width: auto; }
  .sobre__forma { top: 12%; right: 0; border-top-right-radius: 320px 300px; }
  .sobre__quadro { width: min(100%, 500px); margin-right: 0; aspect-ratio: 899 / 1647; }
  .sobre__numero {
    left: max(var(--gutter), calc(100% - 550px)); top: 14%;
    font-size: min(43cqw, 270px);
  }
  .sobre__legenda {
    left: max(var(--gutter), calc(100% - 550px)); top: calc(14% + min(43cqw, 270px) * .86);
    width: 112px; font-size: .86rem;
  }
  .sobre__texto { grid-column: b-start / b-end; grid-row: 1; align-self: center; padding: 0 0 120px; margin: 0; max-width: none; }
  .sobre__intro { margin-top: 28px; }
  .credenciais { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .credenciais li { font-size: 1.36rem; padding-block: 18px; gap: 14px; }
  .credenciais li:nth-child(2) { border-top: 0; }
  .credenciais li.credenciais__principal { grid-column: 1 / -1; font-size: 1.9rem; padding-block: 22px; }

  /* Atendimentos */
  .servicos { padding-block: 128px 136px; }
  .servicos__topo {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end; column-gap: 64px;
  }
  .servicos__topo p { margin: 0 0 8px; justify-self: end; }
  .servicos__topo .titulo-secao { max-width: 12.5em; }
  .servicos__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(56px, 7vw, 112px);
    margin-top: 64px; align-items: start;
  }
  .destaque { margin-right: 18px; position: sticky; top: 40px; }
  .destaque::before, .destaque__corpo { border-top-right-radius: 190px; }
  .destaque::before { transform: translate(18px, 18px); }
  .destaque__corpo { padding: 52px 48px 50px; }
  .destaque__icone { width: 64px; height: 64px; }
  .destaque__icone svg { width: 32px; height: 32px; }
  .destaque__titulo { margin-top: 34px; }
  .acordeao__titulo { font-size: 2rem; }
  .acordeao__botao { min-height: 78px; font-size: 1.06rem; }

  /* Home Care */
  .homecare { padding: 120px var(--gutter) 88px; }
  .homecare__porta { padding: 112px 72px 76px; }
  .homecare__porta::after { inset: 18px 18px 0; }
  .homecare__soleira { font-size: .86rem; max-width: 840px; }
  .homecare__curva--b { display: block; width: clamp(180px, 22vw, 340px); }
  .assinatura__script { font-size: 2.4rem; }

  /* Depoimentos */
  .depoimentos { padding-block: 128px 88px; }
  .depoimentos__titulo span { display: block; }
  .carrossel { margin-top: 64px; }
  .carrossel__trilho { --passo: 108%; --giro: 2.5deg; --encolhe: .07; --esmaece: .28; padding-block: 24px 28px; }
  .depo { width: 460px; padding: 36px 38px 30px; }
  .depo:not(.is-ativo) { filter: blur(.4px) saturate(.95); }
  .depo:not(.is-ativo):hover { filter: none; opacity: .9; }
  .carrossel__controles { margin-top: 36px; }

  /* Contato */
  .contato__grade {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(56px, 7vw, 120px); align-items: end;
  }
  .contato__visual { grid-row: 1; grid-column: 1; width: min(100%, 520px); margin-top: 88px; justify-self: start; }
  .contato__texto { grid-row: 1; grid-column: 2; align-self: center; padding: 120px 0; }
  .contato__brilho { width: 22px; height: 22px; }
  .contato__sub { font-size: 1.14rem; }
  .contato .botao { min-height: 60px; padding-inline: 36px; }
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
html.sem-mov { scroll-behavior: auto; }
html.sem-mov *, html.sem-mov *::before, html.sem-mov *::after { animation: none !important; transition: none !important; }