@layer pages {
  /* ---------- abertura ---------- */
  .hh { position: relative; isolation: isolate; overflow: clip; min-block-size: 100svh; display: grid; align-items: end; padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-8); background: var(--black); }
  .hh__bg { position: absolute; z-index: -2; inset: 0 0 auto 0; block-size: 78svh; }
  .hh__bg img { inline-size: 100%; block-size: 120%; object-fit: cover; object-position: 66% 12%; mask-image: linear-gradient(180deg, #000 14%, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000 14%, transparent 70%); opacity: .85; }
  .hh__ghost { position: absolute; z-index: -1; inset-block-start: 14%; inset-inline-start: -14%; inline-size: min(64rem, 120vw); opacity: .05; pointer-events: none; }
  .hh__in { position: relative; max-inline-size: 64rem; padding-block-start: 14svh; }
  .hh__logo { inline-size: clamp(4.25rem, 9.5vw, 9.5rem); block-size: auto; aspect-ratio: 473/449; margin-block-end: var(--s-5); }
  .hh h1 { font-size: var(--t-hero); line-height: .96; letter-spacing: -.03em; margin-block-start: var(--s-5); }
  .hh h1 .ln { display: block; }
  .hh .lead { margin-block-start: var(--s-6); max-inline-size: 48ch; font-size: var(--t-md); color: var(--gray-1); }
  .ux-trust { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-block-start: var(--s-6); padding-block-start: var(--s-5); border-block-start: 1px solid var(--line); font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-2); }
  .ux-trust span { display: inline-flex; align-items: center; gap: var(--s-3); }
  .ux-trust span::before { content: ""; inline-size: var(--s-3); block-size: var(--s-3); border-radius: 50%; background: var(--gold); }
  .hh__badge { display: none; position: absolute; inset-inline-end: var(--gutter); inset-block-start: calc(var(--header-h) + var(--s-6)); text-align: end; font-size: var(--t-sm); color: var(--gray-2); max-inline-size: 15rem; line-height: 1.4; }
  .hh__badge b { display: block; font: 300 var(--t-2xl)/1 var(--f-sans); letter-spacing: -.03em; color: var(--gold-hi); margin-block-end: var(--s-3); }
  .hh__rail { display: none; position: absolute; inset-inline-end: var(--gutter); inset-block-start: 50%; inline-size: 1px; block-size: 6rem; background: linear-gradient(180deg, transparent, var(--gold)); transform-origin: 50% 0; animation: rail 2.4s var(--ease-io) infinite; }
  @keyframes rail { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
  @media (min-width: 62rem) {
    .hh { padding-block-end: var(--s-7); }
    .hh__bg { inset: 0 0 0 30%; block-size: auto; }
    .hh__bg img { block-size: 112%; object-position: 62% 8%; mask-image: linear-gradient(90deg, transparent, #000 52%), linear-gradient(180deg, #000 78%, transparent); mask-composite: intersect; -webkit-mask-image: linear-gradient(90deg, transparent, #000 52%), linear-gradient(180deg, #000 78%, transparent); -webkit-mask-composite: source-in; }
    .hh__in { padding-block-start: 0; }
    .hh__badge { display: block; }
  }

  /* ---------- experiencia ---------- */
  .exp { padding-block: var(--sec-y); background: var(--black); }
  .exp .wrap > h2 { margin-block-start: var(--s-5); max-inline-size: 16ch; }
  .exp__big { margin-block-start: var(--s-7); max-inline-size: 26ch; font-size: var(--t-2xl); font-weight: 300; line-height: 1.12; letter-spacing: -.035em; color: var(--white); }
  .exp__big .w { opacity: var(--wo, .16); transition: opacity .3s; }

  /* ---------- metodo: palco fixo em tela cheia ---------- */
  .mt { position: relative; background: var(--black); }
  .mt__stage { position: relative; isolation: isolate; overflow: clip; min-block-size: 100svh; display: grid; align-content: space-between; gap: var(--s-7); padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-8); }
  .mt__bgs { position: absolute; z-index: -1; inset: 0; background: var(--black); }
  .mt__stage { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .mt__bgs img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.1s var(--ease), transform 2.4s var(--ease); }
  .mt__bgs img.is-active { opacity: .5; transform: scale(1); }
  .mt__bgs::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .78) 0, rgb(0 0 0 / .2) 38%, rgb(0 0 0 / .88) 100%), linear-gradient(90deg, rgb(0 0 0 / .78), transparent 70%); }
  .mt__head h2 { margin-block-start: var(--s-4); font-size: var(--t-2xl); max-inline-size: 15ch; }
  .mt__list { list-style: none; padding: 0; position: relative; block-size: clamp(15rem, 40svh, 22rem); }
  .mt__list > li { display: grid; gap: var(--s-3); align-content: end; max-inline-size: 44rem; }
  .mt__n { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .22em; color: var(--gold); text-transform: uppercase; }
  .mt__big { font: 300 var(--t-num)/.8 var(--f-sans); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--gold); font-variant-numeric: tabular-nums; }
  .mt__list h3 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
  .mt__list p { color: var(--gray-1); font-size: var(--t-md); max-inline-size: 42ch; }
  .mt__ticks { display: none; }
  .pin-on .mt { block-size: calc(100svh + (var(--n) - 1) * 80svh); }
  .pin-on .mt__stage { position: sticky; inset-block-start: 0; block-size: 100svh; min-block-size: 0; }
  .pin-on .mt__list > li { position: absolute; inset: 0; opacity: 0; transform: translateY(3rem); pointer-events: none; transition: opacity .7s var(--ease), transform 1s var(--ease); }
  .pin-on .mt__list > li.is-active { opacity: 1; transform: none; pointer-events: auto; }
  .pin-on .mt__list > li.is-past { transform: translateY(-3rem); }
  .pin-on .mt__ticks { display: flex; gap: var(--s-3); position: absolute; inset-inline: var(--gutter); inset-block-end: var(--s-5); }
  .mt__ticks i { flex: 1; block-size: 1px; background: var(--line); position: relative; overflow: clip; }
  .mt__ticks i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--t, 0)); transform-origin: 0 50%; }
  html:not(.pin-on) .mt__list { block-size: auto; display: grid; gap: var(--s-7); }
  html:not(.pin-on) .mt__bgs img:first-child { opacity: .35; transform: none; }
  @media (min-width: 62rem) {
    .mt__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-content: stretch; align-items: end; }
    .mt__head { align-self: start; grid-column: 1 / -1; }
    .mt__list { grid-column: 1 / -1; }
    .mt__list > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: var(--s-8); align-items: end; max-inline-size: none; }
    .mt__list .mt__n { grid-column: 1; grid-row: 1; align-self: start; }
    .mt__big { grid-column: 1; grid-row: 1 / span 3; align-self: end; }
    .mt__list h3 { grid-column: 2; } .mt__list p { grid-column: 2; font-size: var(--t-lg); }
    .mt__list .mt__n { display: none; }
  }
  @media (max-width: 61.99rem) { .mt__big { font-size: clamp(4.5rem, 24vw, 9rem); } .mt__list h3 { font-size: var(--t-xl); } }

  /* ---------- para quem e ---------- */
  .ind { position: relative; isolation: isolate; overflow: clip; padding-block: var(--sec-y); background: var(--ink-1); }
  .ind__img { position: absolute; z-index: -1; inset: 0 0 0 40%; }
  .ind__img img { inline-size: 100%; block-size: 116%; object-fit: cover; mask-image: linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); opacity: .55; }
  .ind__grid { display: grid; gap: var(--s-7); }
  .ind h2 { margin-block-start: var(--s-5); max-inline-size: 12ch; }
  .ind .lead { margin-block-start: var(--s-6); }
  .ind .list { counter-reset: i; border-block-start: 1px solid var(--line); }
  .ind .list li { counter-increment: i; display: flex; gap: var(--s-5); align-items: baseline; padding-block: var(--s-5); border-block-end: 1px solid var(--line); font-size: var(--t-lg); font-weight: 300; color: var(--white); letter-spacing: -.015em; line-height: 1.3; transition: padding .6s var(--ease), color .3s; }
  .ind .list li::before { content: counter(i, decimal-leading-zero); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .18em; color: var(--gold); flex: none; }
  .ind .list li:hover { padding-inline-start: var(--s-5); color: var(--gold-hi); }
  @media (max-width: 61.99rem) { .ind__img { inset: 0 0 auto 0; block-size: 60%; } .ind__img img { mask-image: linear-gradient(180deg, #000, transparent); -webkit-mask-image: linear-gradient(180deg, #000, transparent); opacity: .3; } }
  @media (min-width: 62rem) { .ind__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; } .ind { min-block-size: 90svh; display: grid; align-items: center; } }

  /* ---------- galeria com rolagem lateral ---------- */
  .sm { position: relative; background: var(--black); border-block-start: 1px solid var(--line); }
  .sm__stage { grid-template-columns: minmax(0, 1fr); overflow: clip; padding-block: var(--sec-y) var(--s-8); display: grid; gap: var(--s-7); align-content: center; }
  .sm__head { padding-inline: var(--gutter); display: grid; gap: var(--s-5); }
  .sm__head h2 { max-inline-size: 15ch; }
  .sm__track { display: flex; gap: var(--s-3); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sm__track::-webkit-scrollbar { display: none; }
  .sm__track figure { border-radius: var(--r-lg); position: relative; flex: none; inline-size: clamp(14rem, 62vw, 26rem); aspect-ratio: 4/5; overflow: clip; scroll-snap-align: start; background: var(--ink-3); }
  .sm__track img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .sm__track figure:nth-child(even) { aspect-ratio: 1; align-self: end; }
  .pin-on .sm { block-size: calc(100svh + var(--dx, 0px)); }
  .pin-on .sm__stage { position: sticky; inset-block-start: 0; block-size: 100svh; padding-block: calc(var(--header-h) + var(--s-5)) var(--s-7); align-content: space-between; }
  .pin-on .sm__track { overflow: visible; scroll-snap-type: none; will-change: transform; inline-size: max-content; }
  .pin-on .sm__track figure { block-size: min(52svh, 34rem); inline-size: auto; }
  .pin-on .sm__track figure:nth-child(even) { aspect-ratio: 1; }

  /* ---------- onde atende ---------- */
  .on { padding-block: var(--sec-y); background: var(--ink-2); border-block-start: 1px solid var(--line); }
  .locais { display: grid; gap: var(--s-7) var(--s-8); margin-block-start: var(--s-8); }
  .addr { display: grid; gap: var(--s-4); align-content: start; padding-block-start: var(--s-5); border-block-start: 1px solid var(--line-gold); }
  .addr h3 { font-size: var(--t-2xl); font-weight: 500; letter-spacing: -.03em; }
  .addr address { color: var(--gray-2); }
  .addr .mapa { margin-block: var(--s-3); }
  .addr .mapa iframe { aspect-ratio: 4/3; }
  .addr p a { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); text-decoration: none; border-block-end: 1px solid var(--line-gold); padding-block: var(--s-3); display: inline-block; }
  @media (min-width: 62rem) { .locais { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---------- duvidas ---------- */
  .fq { padding-block: var(--sec-y); background: var(--black); }
  .fq__grid { display: grid; gap: var(--s-7); }
  .fq h2 { margin-block-start: var(--s-5); max-inline-size: 13ch; font-size: var(--t-2xl); }
  .fq .actions { margin-block-start: var(--s-6); }
  @media (min-width: 62rem) { .fq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-8); } .fq__side { position: sticky; inset-block-start: calc(var(--header-h) + var(--s-6)); align-self: start; } }

  /* ---------- blog ---------- */
  .bl { padding-block: var(--sec-y); background: var(--ink-1); border-block-start: 1px solid var(--line); }
  .bl .sec__cab { margin-block-end: var(--s-6); }
  .bl .grid-3 { border-block-end: 1px solid var(--line); }

  /* ---------- galeria no celular: 1 foto por vez, 100% da largura (sem cantinho da proxima) ---------- */
  @media (max-width: 47.99rem) {
    .pin-on .sm, .sm { block-size: auto; }
    .pin-on .sm__stage, .sm__stage { position: static; inset-block-start: auto; block-size: auto; min-block-size: 0; padding: var(--sec-y) 0 var(--s-7); align-content: start; overflow: visible; }
    .sm__head { padding-inline: var(--gutter); }
    .pin-on .sm__track, .sm__track { overflow-x: auto; scroll-snap-type: x mandatory; inline-size: auto; padding-inline: 0; gap: 0; will-change: auto; transform: none !important; }
    .pin-on .sm__track figure, .sm__track figure { inline-size: 100vw; block-size: auto; aspect-ratio: 4/5; border-radius: 0; scroll-snap-align: center; scroll-snap-stop: always; align-self: stretch; }
    .pin-on .sm__track figure:nth-child(even), .sm__track figure:nth-child(even) { aspect-ratio: 4/5; align-self: stretch; }
  }
}