@layer components {
  /* ---------- botoes ---------- */
  .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4); min-block-size: 3.4rem; padding: 0 var(--s-6); border-radius: var(--r); background: var(--gold); color: var(--black); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; transition: background .35s var(--ease), color .35s, transform .35s var(--ease); }
  .btn::after { content: "\2192" / ""; font-size: 1.2em; transition: transform .45s var(--ease); }
  .btn:hover { background: var(--gold-hi); color: var(--black); }
  .btn:hover::after { transform: translateX(.35rem); }
  .btn--ghost { background: transparent; color: var(--white); padding-inline: var(--s-5); border: 1px solid var(--gold); min-block-size: 3rem; }
  .btn--ghost::after { color: var(--gold); }
  .btn--ghost:hover { background: rgb(201 164 92 / .1); color: var(--gold-hi); border-color: var(--gold-hi); }
  .btn--ghost:hover::after { color: var(--gold-hi); }
  .btn--light { background: var(--white); color: var(--black); box-shadow: inset 0 -3px 0 var(--gold); }
  .btn--light::after { color: var(--gold-lo); }
  .btn--light:hover { background: var(--gold-hi); box-shadow: inset 0 -3px 0 var(--gold-lo); }
  .btn--light:hover::after { color: var(--black); }
  .ico { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .hero__pontos .ico, .lista-ic .ico { color: var(--gold); inline-size: 1.1rem; block-size: 1.1rem; }

  /* ---------- indices (substitui cartoes): linhas com numero, titulo e texto ---------- */
  .feats { list-style: none; padding: 0; counter-reset: f; border-block-start: 1px solid var(--line); }
  .feat { position: relative; counter-increment: f; display: grid; gap: var(--s-3) var(--s-5); padding-block: var(--s-6); border-block-end: 1px solid var(--line); grid-template-columns: 1fr auto; grid-template-areas: "num ic" "title title" "text text" "link link"; align-items: start; transition: padding .6s var(--ease); }
  .feat::before { content: counter(f, decimal-leading-zero); grid-area: num; font: 400 var(--t-xs)/1.6 var(--f-mono); letter-spacing: .18em; color: var(--gold); }
  .feat::after { content: ""; position: absolute; inset: auto 0 -1px; block-size: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }
  .feat:hover::after { transform: scaleX(1); }
  .feat__ic { grid-area: ic; color: var(--gold); }
  .feat h3 { grid-area: title; font-size: var(--t-xl); font-weight: 500; letter-spacing: -.03em; transition: transform .6s var(--ease), color .3s; }
  .feat p { grid-area: text; color: var(--gray-2); max-inline-size: 52ch; }
  .feat__link { grid-area: link; justify-self: start; font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); text-decoration: none; padding-block: var(--s-3); border-block-end: 1px solid var(--line-gold); }
  .feat:hover h3 { transform: translateX(var(--s-4)); color: var(--gold-hi); }
  @media (min-width: 62rem) {
    .feat { grid-template-columns: 4.5rem 2.4rem minmax(0, 1.1fr) minmax(0, 1.5fr) 11rem; grid-template-areas: "num ic title text link"; align-items: baseline; padding-block: var(--s-7); }
    .feat__ic { align-self: center; }
    .feat__link { justify-self: end; align-self: center; }
    .feat:not(:has(.feat__link)) { grid-template-columns: 4.5rem 2.4rem minmax(0, 1.1fr) minmax(0, 1.5fr); }
  }
  @media (min-width: 62rem) {
    .feats--4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); }
    .feats--4 .feat { grid-template-columns: 1fr auto; grid-template-areas: "num ic" "title title" "text text" "link link"; align-items: start; padding-block: var(--s-6); }
    .feats--4 .feat__link, .feats--4 .feat__ic { justify-self: start; align-self: start; }
    .feats--4 .feat__ic { justify-self: end; }
    .feats--4 { border-block-start: 0; }
    .feats--4 .feat { border-block-start: 1px solid var(--line); border-block-end: 0; }
    .feats--4 .feat::after { inset: 0 0 auto; }
  }

  /* ---------- numeros grandes ---------- */
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); margin-block-start: var(--s-8); }
  .stat { padding-block-start: var(--s-5); border-block-start: 1px solid var(--line-gold); font-size: var(--t-sm); color: var(--gray-2); line-height: 1.5; }
  .stat b { display: block; font: 300 clamp(1.9rem, .9rem + 2.9vw, 3.9rem)/1 var(--f-sans); letter-spacing: -.03em; white-space: nowrap; color: var(--white); margin-block-end: var(--s-4); font-variant-numeric: tabular-nums; }
  @media (min-width: 62rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }

  /* ---------- faixa de credenciais ---------- */
  .trustband { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .trustband li { display: grid; gap: var(--s-2); align-content: start; padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); font-size: var(--t-sm); color: var(--gray-2); line-height: 1.45; }
  .trustband .ico { color: var(--gold); margin-block-end: var(--s-3); }
  .trustband b { font-size: var(--t-md); font-weight: 500; color: var(--white); letter-spacing: -.01em; }
  .trustband:has(li:nth-child(5)) li:last-child { grid-column: 1 / -1; }
  @media (min-width: 62rem) { .trustband { grid-template-columns: repeat(5, minmax(0, 1fr)); } .trustband:has(li:nth-child(5)) li:last-child { grid-column: auto; } .trustband:not(:has(li:nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---------- texto + imagem sangrando para a borda ---------- */
  .duo { display: grid; gap: var(--s-7); align-items: center; }
  .duo__fig { margin-inline: calc(-1 * var(--gutter)); overflow: clip; position: relative; }
  .duo__fig img { inline-size: 100%; aspect-ratio: 4/3; object-fit: cover; mask-image: linear-gradient(180deg, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .duo__txt > * + * { margin-block-start: var(--s-5); }
  .duo__txt h2 { max-inline-size: 14ch; }
  .duo__txt p { max-inline-size: 54ch; color: var(--gray-2); }
  .duo__nota { color: var(--gray-3); font-size: var(--t-sm); }
  @media (min-width: 62rem) {
    .duo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); }
    .duo__fig { margin-inline-end: 0; }
    .duo__fig img { aspect-ratio: 1; max-block-size: 88svh; mask-image: linear-gradient(90deg, #000 62%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); }
    .duo--inv { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
    .duo--inv .duo__fig { order: 2; margin-inline: 0 calc(-1 * var(--gutter)); }
    .duo--inv .duo__fig img { mask-image: linear-gradient(270deg, #000 62%, transparent); -webkit-mask-image: linear-gradient(270deg, #000 62%, transparent); }
    .duo--mapa { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; }
    .duo--mapa .mapa { margin-inline-end: calc(-1 * var(--gutter)); }
  }
  .lista-ic { list-style: none; padding: 0; border-block-start: 1px solid var(--line); }
  .lista-ic li { display: flex; gap: var(--s-4); align-items: flex-start; padding-block: var(--s-4); border-block-end: 1px solid var(--line); color: var(--gray-1); }
  .lista-ic .ico { margin-block-start: .2rem; }
  .list { list-style: none; padding: 0; }

  /* ---------- galeria em mosaico, de borda a borda ---------- */
  .gal { list-style: none; padding: 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--s-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); grid-auto-rows: clamp(13rem, 52vw, 22rem); }
  .gal__i { position: relative; overflow: clip; background: var(--ink-3); border-radius: var(--r-lg); }
  .gal__i--larga { grid-column: 1 / -1; }
  .gal__i figure { block-size: 100%; }
  .gal__i img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s; filter: saturate(.92); }
  .gal__i:hover img { transform: scale(1.06); filter: none; }
  .gal figcaption { position: absolute; inset: auto 0 0; padding: var(--s-7) var(--s-5) var(--s-4); background: linear-gradient(0deg, rgb(0 0 0 / .8), transparent); font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray-1); }
  @media (min-width: 62rem) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(18rem, 32vw, 30rem); } .gal__i--larga { grid-column: span 2; } }

  /* ---------- tabela comparativa ---------- */
  .cmp { overflow-x: auto; }
  .cmp table { inline-size: 100%; text-align: start; }
  .cmp th, .cmp td { text-align: start; vertical-align: top; padding: var(--s-5) var(--s-5) var(--s-5) 0; border-block-end: 1px solid var(--line); font-weight: 300; }
  .cmp thead th { font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border-block-end-color: var(--line-gold); }
  .cmp tbody th { font-weight: 500; color: var(--white); font-size: var(--t-lg); letter-spacing: -.02em; inline-size: 22%; }
  .cmp td { color: var(--gray-2); }
  .cmp__fonte { margin-block-start: var(--s-6); }
  @media (max-width: 47.99rem) {
    .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; inline-size: 100%; }
    .cmp thead { position: absolute; clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; }
    .cmp tr { padding-block: var(--s-5); border-block-end: 1px solid var(--line); }
    .cmp th, .cmp td { border: 0; padding: 0; }
    .cmp tbody th { inline-size: 100%; margin-block-end: var(--s-4); }
    .cmp td { margin-block-start: var(--s-4); }
    .cmp td::before { display: block; font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-block-end: var(--s-2); }
    .cmp td:nth-of-type(1)::before { content: "Porcelana (cerâmica)"; }
    .cmp td:nth-of-type(2)::before { content: "Resina composta"; }
  }

  /* ---------- investimento ---------- */
  .pagto { display: grid; gap: 0 var(--s-8); margin-block-start: var(--s-7); }
  .pagto > div { display: grid; gap: var(--s-3); padding-block: var(--s-6); border-block-start: 1px solid var(--line); }
  .pagto .ico { color: var(--gold); }
  .pagto h3 { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.03em; }
  .pagto p { color: var(--gray-2); max-inline-size: 44ch; }
  @media (min-width: 48rem) { .pagto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- locais, bairros, links ---------- */
  .grid-3 { display: grid; gap: 0; }
  .local { display: grid; gap: var(--s-4); align-content: start; padding-block: var(--s-6); border-block-start: 1px solid var(--line); }
  .local__ic { color: var(--gold); }
  .local h3 { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.03em; }
  .local address { color: var(--gray-2); max-inline-size: 36ch; }
  .local .feat__link { justify-self: start; }
  @media (min-width: 62rem) { .grid-3:has(.local) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-8); } }
  .cidades__t { font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-block-end: var(--s-5); }
  .cidades { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
  .cidades li { font-size: var(--t-xl); font-weight: 300; letter-spacing: -.03em; color: var(--gray-1); line-height: 1.3; }
  .cidades svg { display: none; }
  .links-linha { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-block-start: var(--s-6); }
  .links-linha a { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); text-decoration: none; padding: var(--s-4) var(--s-5); border: 1px solid var(--line-gold); border-radius: var(--r); display: inline-block; }
  .links-linha a:hover { color: var(--white); border-color: var(--white); }
  .nota { margin-block-start: var(--s-6); padding-inline-start: var(--s-5); border-inline-start: 1px solid var(--gold); color: var(--gray-2); max-inline-size: 62ch; font-size: var(--t-sm); }
  .mapa { position: relative; min-block-size: 18rem; background: var(--ink-3); border-radius: var(--r-lg); overflow: clip; }
  .mapa iframe { inline-size: 100%; block-size: 100%; min-block-size: 18rem; aspect-ratio: 16/10; border: 0; filter: grayscale(1) invert(.92) contrast(.9) brightness(.85); }
  .mapa__abrir { position: absolute; inset: auto var(--s-5) var(--s-5) auto; padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--black); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi); text-decoration: none; }
  .chips { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-block-start: var(--s-6); }

  /* ---------- sumario da pagina (barra grudada) ---------- */
  .toc { position: sticky; inset-block-start: var(--header-h); z-index: 50; display: flex; align-items: center; gap: var(--s-5); padding: 0 var(--gutter); background: rgb(0 0 0 / .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block: 1px solid var(--line); }
  .toc__t { display: none; flex: none; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
  .toc__list { list-style: none; padding: 0; display: flex; gap: var(--s-6); overflow-x: auto; scrollbar-width: none; min-inline-size: 0; }
  .toc__list::-webkit-scrollbar { display: none; }
  .toc__list a { display: block; white-space: nowrap; padding-block: var(--s-4); font-size: var(--t-sm); color: var(--gray-2); text-decoration: none; }
  .toc__list a:hover, .toc__list a.is-current { color: var(--white); }
  @media (min-width: 62rem) { .toc__t { display: block; } }

  /* ---------- perguntas ---------- */
  .faq { border-block-start: 1px solid var(--line); }
  .faq details { border-block-end: 1px solid var(--line); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-block-size: 4.5rem; padding-block: var(--s-5); list-style: none; cursor: pointer; font-size: var(--t-xl); font-weight: 400; letter-spacing: -.03em; line-height: 1.15; color: var(--white); transition: color .3s, padding .5s var(--ease); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; flex: none; font: 300 2.2rem/1 var(--f-sans); color: var(--gold); transition: transform .5s var(--ease); }
  .faq summary:hover { color: var(--gold-hi); padding-inline-start: var(--s-4); }
  .faq details[open] summary { color: var(--gold-hi); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { padding-block-end: var(--s-6); max-inline-size: 64ch; color: var(--gray-2); font-size: var(--t-md); animation: faq-in .6s var(--ease) both; }
  .faq__mais { margin-block-start: var(--s-6); }
  .faq__mais a { color: var(--gold-hi); }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-.6rem); } }
  .ux-faq-tools { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; margin-block-end: var(--s-6); }
  .ux-search { position: relative; flex: 1 1 18rem; max-inline-size: 34rem; }
  .ux-search input { inline-size: 100%; min-block-size: 3.4rem; padding: 0 var(--s-5); background: rgb(255 255 255 / .06); border: 1px solid transparent; border-radius: var(--r); color: var(--white); font-size: var(--t-lg); font-weight: 300; }
  .ux-search input::placeholder { color: var(--gray-3); }
  .ux-search input:focus { outline: 0; border-color: var(--gold); background: rgb(255 255 255 / .09); }
  .ux-faq-tools button, .ux-chips button { min-block-size: 2.75rem; padding: 0 var(--s-5); background: transparent; border: 1px solid var(--line); border-radius: var(--r); color: var(--gray-1); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .3s, border-color .3s; }
  .ux-faq-tools button:hover, .ux-chips button:hover { color: var(--gold-hi); border-color: var(--gold); }
  .ux-chips button[aria-pressed="true"], .ux-faq-tools button[aria-pressed="true"] { color: var(--gold-hi); border-color: var(--gold); }
  details[hidden], [data-cat][hidden], .ux-empty[hidden] { display: none !important; }

  .faq-pagina { display: grid; }
  .faq-grupo { display: grid; gap: var(--s-6); padding-block: var(--s-7); border-block-start: 1px solid var(--line); scroll-margin-block-start: calc(var(--header-h) + var(--s-5)); }
  .faq-grupo > h2 { display: flex; align-items: flex-start; gap: var(--s-4); font-size: var(--t-xl); font-weight: 500; }
  .faq-grupo__ic { color: var(--gold); padding-block-start: .2rem; }
  .faq-grupo .faq { border-block-start: 0; }
  @media (min-width: 62rem) { .faq-grupo { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--s-8); } .faq-grupo > h2 { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-6)); align-self: start; } }

  .atalhos { list-style: none; padding: 0; border-block-start: 1px solid var(--line); }
  .atalho { display: flex; align-items: center; gap: var(--s-5); padding-block: var(--s-5); border-block-end: 1px solid var(--line); text-decoration: none; transition: padding .5s var(--ease), color .3s; }
  .atalho .ico { color: var(--gold); }
  .atalho span { font-size: var(--t-xl); font-weight: 400; letter-spacing: -.03em; color: var(--white); flex: 1; line-height: 1.15; }
  .atalho small { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gray-2); }
  .atalho:hover { padding-inline-start: var(--s-5); }
  .atalho:hover span { color: var(--gold-hi); }

  /* ---------- artigos listados: linhas, nao cartoes ---------- */
  .post-item { display: block; }
  .post-card { position: relative; display: grid; gap: var(--s-3) var(--s-6); padding-block: var(--s-6); border-block-start: 1px solid var(--line); text-decoration: none; color: var(--gray-2); grid-template-columns: 1fr; transition: padding .6s var(--ease); }
  .post-card small { font: 400 var(--t-xs)/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
  .post-card h3 { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.035em; color: var(--white); transition: color .3s, transform .6s var(--ease); max-inline-size: 26ch; }
  .post-card p { max-inline-size: 58ch; }
  .post-card .more { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
  .post-card .more::after { content: " \2192" / ""; }
  .post-card:hover h3 { color: var(--gold-hi); transform: translateX(var(--s-4)); }
  @media (min-width: 62rem) {
    .post-card { grid-template-columns: 15rem minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: baseline; padding-block: var(--s-7); }
    .post-card small { grid-column: 1; } .post-card h3 { grid-column: 2; } .post-card p { grid-column: 3; } .post-card .more { grid-column: 4; }
  }
  .ux-filter { display: grid; gap: var(--s-5); margin-block-end: var(--s-6); }
  .ux-chips { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
  .ux-count { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-3); }
  .ux-empty { color: var(--gray-2); padding-block: var(--s-6); }
  .ux-empty a { color: var(--gold-hi); }
}