/* ==========================================================================
   LP 1 · Consórcio (objetivos)
   ========================================================================== */

@layer page {
  /* ------------------------------------------------------------------
     Dobra 1 · Hero
     ------------------------------------------------------------------ */
  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(6.5rem, 4.5rem + 8vw, 9.5rem) calc(clamp(4.5rem, 3.5rem + 5vw, 7.5rem) + 2.75rem);
    background: var(--forest-800);
    color: var(--text);
  }
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(55% 55% at 78% 36%, rgb(232 186 34 / 0.2), transparent 70%),
      radial-gradient(45% 55% at 4% 100%, rgb(47 125 68 / 0.45), transparent 72%),
      linear-gradient(180deg, var(--forest-900), var(--forest-800) 70%);
  }
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(70% 70% at 72% 40%, #000, transparent 75%);
    mask-image: radial-gradient(70% 70% at 72% 40%, #000, transparent 75%);
  }
  .hero__grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
  }
  .hero__copy {
    display: grid;
    gap: 1.6rem;
    justify-items: start;
  }
  .hero h1 {
    max-inline-size: 13ch;
    color: #fff;
  }
  .hl {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    color: var(--gold-400);
  }
  .hl__line {
    position: absolute;
    inset-inline: -2%;
    inset-block-end: -0.2em;
    inline-size: 104%;
    block-size: 0.28em;
    fill: none;
    stroke: var(--gold-500);
    stroke-width: 6px;
    stroke-linecap: round;
    overflow: visible;
  }
  .hl__line path {
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hl__line path {
      animation: line-draw 1.1s var(--ease-out) 1.15s backwards;
    }
  }
  .hero__lead {
    color: rgb(244 247 241 / 0.82);
    max-inline-size: 36rem;
  }
  .hero__cta {
    padding-block-start: 0.4rem;
  }
  .hero .seals {
    padding-block-start: 0.6rem;
  }

  @media (min-width: 62rem) {
    .hero__grid {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    }
    .hero h1 {
      max-inline-size: 11.5ch;
    }
  }
  @media (max-width: 24rem) {
    .hl {
      white-space: normal;
    }
  }

  /* ---------- Visual do hero ---------- */
  .hv {
    position: relative;
    inline-size: min(100%, 30rem);
    margin-inline: auto;
    aspect-ratio: 1 / 1.1;
    container-type: inline-size;
  }
  .hv__glow {
    position: absolute;
    inset: 8% -6% 0;
    background: radial-gradient(closest-side, rgb(232 186 34 / 0.34), transparent 72%);
    filter: blur(14px);
  }
  .hv__stage {
    position: absolute;
    inset: 0 9.5%;
  }

  .hv__keybox,
  .hv__cardbox,
  .hv__pillbox {
    position: absolute;
  }
  .hv__keybox {
    inset-inline-start: 52.5%;
    inset-block-start: 36%;
    inline-size: 11.5%;
  }
  .hv__key {
    inline-size: 100%;
    filter: drop-shadow(0 18px 18px rgb(0 0 0 / 0.45));
    transform-origin: 50% 8%;
    rotate: -12deg;
  }
  .hv__key svg {
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
  }
  .hv__cardbox {
    inset-inline-start: -3%;
    inset-block-start: 43%;
    inline-size: 41%;
    z-index: 2;
  }
  @media (max-width: 40rem) {
    .hv__cardbox {
      inset-inline-start: 1%;
      inline-size: 44%;
    }
  }
  .hv__pillbox--a {
    inset-inline-end: -1%;
    inset-block-start: 15%;
  }
  .hv__pillbox--b {
    inset-inline-end: -3%;
    inset-block-end: 6%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hv__keybox {
      animation: pop-in 0.9s var(--ease-spring) 2.1s backwards;
    }
    .hv__key {
      animation: float-key 7s var(--ease-in-out) 3s infinite;
    }
    .hv__cardbox {
      animation: reveal-up 1.1s var(--ease-out) 2.25s backwards;
    }
    .hv__doc {
      animation: float-b 8s var(--ease-in-out) 3.4s infinite;
    }
    .hv__pillbox--a {
      animation: reveal-scale 0.9s var(--ease-spring) 2.5s backwards;
    }
    .hv__pillbox--b {
      animation: reveal-scale 0.9s var(--ease-spring) 2.75s backwards;
    }
    @keyframes float-key {
      0%, 100% { rotate: -12deg; translate: 0 0; }
      50% { rotate: -6deg; translate: 0 -0.6rem; }
    }
  }

  /* ------------------------------------------------------------------
     Dobra 2 · Objetivos
     ------------------------------------------------------------------ */
  .goals {
    z-index: 2;
    margin-block-start: -2.75rem;
    border-radius: 2.75rem 2.75rem 0 0;
    padding-block-end: calc(var(--section-y) * 0.7);
  }
  .goals__grid {
    display: grid;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .goal {
    display: grid;
  }
  .goal > .card {
    block-size: 100%;
  }
  .goal__core {
    display: grid;
    gap: 1.5rem;
    align-content: space-between;
    justify-items: start;
    min-block-size: 17.5rem;
    padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  }
  .goal__text {
    display: grid;
    gap: 0.5rem;
  }
  .goal__text p {
    color: var(--text-2);
    max-inline-size: 30ch;
  }
  .goal .btn {
    inline-size: 100%;
    justify-content: space-between;
    gap: 0.6rem;
    padding-inline-start: 1.25rem;
    font-size: 0.93rem;
  }
  .goal .ico {
    --ico: var(--forest-800);
    --ico-accent: var(--gold-500);
    --ico-bg: #fff;
  }
  .goal--feature .goal__core {
    --goal-pad: clamp(1.6rem, 1rem + 2vw, 2.6rem);
    min-block-size: 100%;
    padding: var(--goal-pad);
  }
  /* Foto como cabeçalho do card em destaque; o ícone vira uma plaquinha sobre a borda da foto */
  .goal__photo {
    --ph-pos: 50% 34%;
    margin: calc(var(--goal-pad) * -1) calc(var(--goal-pad) * -1) 0;
    justify-self: stretch;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
  }
  .goal__photo .ph__pic {
    border-radius: 0;
    box-shadow: none;
  }
  .goal--feature .goal__core > .ico {
    --ico-size: 4.6rem;
    box-sizing: content-box;
    position: relative;
    z-index: 3;
    margin-block-start: -4.4rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: var(--shadow-2), inset 0 0 0 1px rgb(13 32 19 / 0.06);
  }
  .goal--feature .goal__core::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset-block-start: 1.6rem;
    inset-inline-end: 1.8rem;
    inline-size: 6.2rem;
    aspect-ratio: 100 / 158;
    background: url("../img/mark.svg") center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out), translate 0.6s var(--ease-spring), scale 0.6s var(--ease-spring);
  }
  @media (hover: hover) and (pointer: fine) {
    .goal--feature .card:hover .goal__core::after {
      opacity: 0.95;
      translate: 0 -4px;
      scale: 1.04;
    }
  }
  .goal--feature h3 {
    font-size: var(--fs-2xl);
  }
  .goal--feature .goal__text p {
    font-size: var(--fs-lg);
  }

  @media (min-width: 40rem) {
    .goals__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .goal--feature {
      grid-column: 1 / -1;
    }
    .goal--feature .goal__core {
      grid-template-columns: auto 1fr;
      grid-template-areas: "pho pho" "ico txt" "btn btn";
      align-items: start;
      column-gap: 2rem;
      min-block-size: 15rem;
    }
    .goal__photo {
      grid-area: pho;
      aspect-ratio: 21 / 8;
    }
    .goal--feature .goal__core > .ico {
      grid-area: ico;
    }
    .goal--feature .goal__text {
      grid-area: txt;
    }
    .goal--feature .btn {
      grid-area: btn;
    }
  }
  @media (min-width: 75rem) {
    .goals__grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .goal {
      grid-column: span 3;
    }
    .goal--feature {
      grid-column: span 6;
      grid-row: span 2;
    }
    .goal--feature .goal__core {
      grid-template-columns: 1fr;
      grid-template-areas: none;
      align-content: space-between;
      min-block-size: 100%;
    }
    .goal--feature .goal__core > .ico,
    .goal--feature .goal__text,
    .goal--feature .btn,
    .goal__photo {
      grid-area: auto;
    }
    .goal__photo {
      aspect-ratio: 4 / 3;
    }
  }

  /* ------------------------------------------------------------------
     Dobra 3 · Plano
     ------------------------------------------------------------------ */
  .plan {
    padding-block-start: 0;
  }
  .plan__panel {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.6rem, 1rem + 4vw, 4.2rem);
    border-radius: var(--r-xl);
    background: linear-gradient(150deg, #f3c639, var(--gold-500) 45%, #dcaa14);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), 0 40px 60px -40px rgb(138 106 5 / 0.8);
    color: var(--text);
  }
  .plan__panel::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto auto;
    inline-size: 26rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 255 255 / 0.45), transparent 70%);
    pointer-events: none;
  }
  .plan__copy {
    position: relative;
    display: grid;
    gap: 1.4rem;
    justify-items: start;
    align-content: center;
  }
  .plan__copy .lead {
    color: var(--text);
    opacity: 0.86;
  }
  .plan__viz {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }
  .plan__inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .plan__links {
    inline-size: 100%;
    fill: none;
    stroke: var(--forest-800);
    stroke-width: 2px;
    stroke-linecap: round;
    overflow: visible;
  }
  .plan__links--v {
    block-size: 3.6rem;
  }
  .plan__links--h {
    display: none;
  }
  @media (min-width: 36rem) {
    .plan__viz {
      grid-template-columns: minmax(0, 1fr) clamp(2.5rem, 7vw, 4.5rem) minmax(6.5rem, 9.5rem);
      min-block-size: 17rem;
    }
    .plan__inputs {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 0.7rem;
    }
    .pn {
      flex-direction: row;
      justify-content: flex-start;
      gap: 0.75rem;
      padding: 0.7rem 0.9rem;
      text-align: start;
      font-size: var(--fs-sm);
    }
    .pn .ico {
      --ico-size: 2.3rem;
    }
    @media (hover: hover) and (pointer: fine) {
      .pn:hover {
        transform: translateX(4px);
      }
    }
    .plan__links--h {
      display: block;
      block-size: 100%;
      contain: size;
    }
    .plan__links--v {
      display: none;
    }
  }
  .plan__end {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.9rem;
  }
  .plan__door {
    inline-size: min(100%, 7.4rem);
  }
  .plan__door .hs__bars rect {
    fill: var(--forest-800);
  }
  .plan__door .hs__roof {
    stroke: var(--forest-800);
  }
  .plan__door .hs__attic {
    fill: var(--forest-800);
  }
  .plan__out {
    margin: 0;
    text-align: center;
    font-weight: 800;
    font-size: var(--fs-sm);
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  @media (prefers-reduced-motion: no-preference) {
    .js .plan__viz:not(.is-play) .pn,
    .js .plan__viz:not(.is-play) .plan__out {
      opacity: 0;
    }
    .js .plan__viz:not(.is-play) .plan__links {
      clip-path: inset(0 100% 100% 0);
    }
    .js .plan__viz:not(.is-play) .hs__leaf {
      --door: 0deg;
    }
    .js .plan__viz:not(.is-play) :is(.hs__lamp, .hs__beam) {
      opacity: 0;
    }
    .plan__viz.is-play .pn {
      animation: reveal-up 0.8s var(--ease-out) backwards;
      animation-delay: calc(var(--i) * 0.14s);
    }
    .plan__viz.is-play .plan__links--h {
      animation: wipe-x 1.2s var(--ease-out) 0.65s backwards;
    }
    .plan__viz.is-play .plan__links--v {
      animation: wipe-y 1.1s var(--ease-out) 0.65s backwards;
    }
    .plan__viz.is-play .hs__leaf {
      animation: door-open 1.6s var(--ease-spring) 1.7s backwards;
    }
    .plan__viz.is-play :is(.hs__lamp, .hs__beam) {
      animation: lamp-on 1.2s var(--ease-out) 1.8s backwards;
    }
    .plan__viz.is-play .plan__out {
      animation: reveal-scale 0.9s var(--ease-spring) 2.5s backwards;
    }
  }

  @media (min-width: 62rem) {
    .plan__panel {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
    }
  }

  /* ------------------------------------------------------------------
     Dobra 4 · Como funciona
     ------------------------------------------------------------------ */
  .how {
    z-index: 2;
    margin-block-start: -2.75rem;
    border-radius: 2.75rem 2.75rem 0 0;
    background: linear-gradient(180deg, var(--forest-800), var(--forest-900));
    padding-block-start: calc(var(--section-y) + 0.5rem);
  }
  .plan {
    padding-block-end: calc(var(--section-y) + 2.75rem);
  }
  .how__after {
    display: grid;
    gap: 1.75rem;
    justify-items: start;
    margin-block-start: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  }
  @media (min-width: 64rem) {
    .how__after {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 2rem;
    }
  }

  /* ------------------------------------------------------------------
     Dobra 5 · Por que o consórcio
     ------------------------------------------------------------------ */
  .why {
    z-index: 2;
    margin-block-start: -2.75rem;
    border-radius: 2.75rem 2.75rem 0 0;
  }
  .how {
    padding-block-end: calc(var(--section-y) + 2.75rem);
  }
  .bento {
    display: grid;
    gap: 1.1rem;
  }
  .bn > .card__core,
  .bn__core {
    display: grid;
    gap: 1.6rem;
    align-content: space-between;
    min-block-size: 18rem;
    padding: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  }
  .bn__text {
    display: grid;
    gap: 0.5rem;
  }
  .bn__text h3 {
    font-size: var(--fs-xl);
  }
  .bn__text p {
    color: var(--text-2);
    max-inline-size: 36ch;
  }
  .bn .ico {
    --ico-accent: var(--gold-500);
  }

  /* lance = modalidade (livre, fixo ou fidelidade) + reforço (embutido e FGTS) */
  .mix {
    display: grid;
    gap: 0.75rem;
  }
  .mix__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
  }
  .mix__tag {
    inline-size: 100%;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  @media (min-width: 30rem) {
    .mix__tag {
      inline-size: 7.2rem;
    }
  }
  .mix__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.05rem;
    border-radius: var(--r-pill);
    background: var(--mist-100);
    box-shadow: inset 0 0 0 1.5px var(--mist-200);
    font-weight: 700;
    font-size: var(--fs-sm);
  }
  .mix__chip--mode {
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--mist-300);
    transition: box-shadow 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
  }
  .mix__chip--b {
    background: var(--forest-100);
    box-shadow: inset 0 0 0 1.5px var(--forest-200);
  }
  .mix__chip--sum {
    padding-inline-start: 0.7rem;
    background: var(--gold-500);
    color: var(--forest-900);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), var(--shadow-gold);
    --ico: var(--forest-900);
    --ico-accent: var(--forest-800);
  }
  .mix__op {
    font-style: normal;
    font-weight: 800;
    color: var(--text-3);
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal].is-in .mix__chip--mode {
      animation: pop-in 0.7s var(--ease-spring) calc(0.2s + var(--k) * 0.12s) backwards, mix-pick 7.5s var(--ease-in-out) calc(1.6s + var(--k) * 2.5s) infinite;
    }
    [data-reveal].is-in .mix__chip--a {
      animation: mix-l 0.9s var(--ease-spring) 0.55s backwards;
    }
    [data-reveal].is-in .mix__chip--b {
      animation: mix-r 0.9s var(--ease-spring) 0.65s backwards;
    }
    [data-reveal].is-in .mix__chip--sum {
      animation: pop-in 0.8s var(--ease-spring) 1.05s backwards;
    }
    @keyframes mix-l { from { opacity: 0; translate: -1.6rem 0; } }
    @keyframes mix-r { from { opacity: 0; translate: 1.6rem 0; } }
    /* destaca uma modalidade por vez: livre, fixo, fidelidade */
    @keyframes mix-pick {
      0%, 30%, 100% { background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--mist-300); }
      6%, 24% { background-color: var(--gold-100); box-shadow: inset 0 0 0 2px var(--gold-500); }
    }
  }

  /* parcelas = barras (reduzida → cheia) */
  .bars {
    display: grid;
    gap: 0.7rem;
  }
  .bars__row {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    block-size: 7.2rem;
    padding-block-start: 1.8rem;
  }
  .bars__row i {
    flex: 1;
    block-size: calc(var(--h) * 100%);
    border-radius: 0.4rem 0.4rem 0.2rem 0.2rem;
    background: var(--gold-500);
    transform-origin: 50% 100%;
    transition: background-color 0.3s var(--ease-out), scale 0.5s var(--ease-spring);
  }
  .bars__row i:nth-of-type(n + 7) {
    background: var(--forest-700);
  }
  .bars__flag {
    position: relative;
    flex: none;
    inline-size: 2px;
    align-self: stretch;
    margin-inline: 0.15rem;
    background: repeating-linear-gradient(180deg, var(--forest-800) 0 5px, transparent 5px 9px);
  }
  .bars__flag em {
    position: absolute;
    inset-block-start: -0.2rem;
    inset-inline-start: 50%;
    translate: -50% -100%;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-pill);
    background: var(--forest-800);
    color: var(--gold-400);
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .bars__cap {
    font-size: var(--fs-xs);
    color: var(--text-3);
  }
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal].is-in .bars__row i {
      animation: bar-up 0.9s var(--ease-spring) backwards;
      animation-delay: calc(0.25s + var(--n) * 55ms);
    }
    @keyframes bar-up { from { scale: 1 0; } }
  }
  @media (hover: hover) and (pointer: fine) {
    .bn--parcelas:hover .bars__row i:nth-of-type(-n + 6) {
      background: var(--gold-400);
    }
  }

  /* sem juros */
  .bn__big {
    display: grid;
    place-items: center;
    padding-block: 0.5rem;
  }
  .bn--juros .ico {
    --ico: var(--forest-800);
  }

  /* um consórcio para cada objetivo */
  .tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tiles li {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem 0.85rem;
    border-radius: var(--r-md);
    background: var(--mist-100);
    box-shadow: inset 0 0 0 1px var(--mist-200);
    font-weight: 700;
    font-size: var(--fs-sm);
    transition: background-color 0.3s var(--ease-out), transform 0.45s var(--ease-spring);
  }
  @media (hover: hover) and (pointer: fine) {
    .tiles li:hover {
      background: #fff;
      transform: translateY(-4px);
    }
  }
  @media (min-width: 40rem) {
    .tiles {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (min-width: 62rem) {
    .bento {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .bn--lance { grid-column: span 7; }
    .bn--parcelas { grid-column: span 5; }
    .bn--juros { grid-column: span 5; }
    .bn--objetivos { grid-column: span 7; }
  }

  /* ------------------------------------------------------------------
     Dobra 6 · Por que a Lamont
     ------------------------------------------------------------------ */
  .lamont {
    z-index: 2;
    margin-block-start: -2.75rem;
    border-radius: 2.75rem 2.75rem 0 0;
    --bg: var(--forest-700);
    background: radial-gradient(60% 80% at 100% 0%, rgb(232 186 34 / 0.14), transparent 70%), var(--forest-700);
    padding-block-start: calc(var(--section-y) + 0.5rem);
  }
  .why {
    padding-block-end: calc(var(--section-y) + 2.75rem);
  }
  .lamont__grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }
  .lamont__copy {
    display: grid;
    gap: 1.9rem;
    justify-items: start;
  }
  .lamont__copy h2 {
    max-inline-size: 15ch;
  }
  .proof {
    display: grid;
    gap: 1.6rem;
    padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
    text-align: center;
    justify-items: center;
  }
  .proof__score {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
  }
  .proof__num {
    font-size: clamp(5.5rem, 4rem + 6vw, 8.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: var(--gold-400);
    font-variant-numeric: tabular-nums;
  }
  .proof__stars {
    padding-block-start: 0.55rem;
  }
  .proof__stars .stars svg {
    inline-size: 1.85rem;
    block-size: 1.85rem;
  }
  .proof__strip {
    display: grid;
    gap: 0.85rem;
    justify-items: center;
    margin: 0;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--line);
    inline-size: 100%;
    font-weight: 600;
    color: var(--text);
  }
  .proof__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
  }
  .proof__item + .proof__item {
    position: relative;
    padding-block-start: 0.85rem;
  }
  .proof__item + .proof__item::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 38%;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  }
  @media (min-width: 36rem) {
    .proof__strip {
      grid-template-columns: auto auto;
      justify-content: center;
      column-gap: 1.6rem;
    }
    .proof__item + .proof__item {
      padding: 0 0 0 1.6rem;
    }
    .proof__item + .proof__item::before {
      inset: 12% auto 12% 0;
      inline-size: 1px;
      block-size: auto;
      background: linear-gradient(180deg, transparent, var(--gold-500), transparent);
    }
  }
  .proof__item img {
    block-size: 1.7rem;
    inline-size: auto;
    border-radius: 0.5rem;
  }
  /* Foto de atendimento com o cartão de avaliação sobreposto */
  .lamont__proof {
    display: grid;
  }
  .lamont__photo {
    --ph-pos: 50% 32%;
    inline-size: 88%;
    justify-self: end;
    aspect-ratio: 4 / 3;
  }
  .lamont__score {
    --card-shell: rgb(24 66 38);
    --card-core: linear-gradient(180deg, rgb(26 70 40), rgb(19 55 29));
    position: relative;
    z-index: 2;
    margin-block-start: -2.5rem;
  }
  @media (min-width: 36rem) {
    .lamont__score {
      margin-block-start: -3.5rem;
    }
  }
  @media (min-width: 62rem) {
    .lamont__grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
  }

  /* ------------------------------------------------------------------
     Dobra 7 · FAQ
     ------------------------------------------------------------------ */
  .faqs {
    z-index: 2;
    margin-block-start: -2.75rem;
    border-radius: 2.75rem 2.75rem 0 0;
    padding-block-start: calc(var(--section-y) + 0.5rem);
  }
  .lamont {
    padding-block-end: calc(var(--section-y) + 2.75rem);
  }
  .faqs__grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .faqs__head {
    display: grid;
    gap: 2rem;
    justify-items: start;
  }
  .faqs__mark {
    inline-size: clamp(4rem, 10vw, 6.5rem);
    fill: var(--gold-500);
    filter: drop-shadow(0 18px 20px rgb(138 106 5 / 0.35));
  }
  .faqs__mark svg {
    inline-size: 100%;
    block-size: auto;
  }
  @media (min-width: 62rem) {
    .faqs__grid {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
    .faqs__head {
      position: sticky;
      inset-block-start: 7rem;
    }
  }

  /* ------------------------------------------------------------------
     Dobra 8 · CTA final
     ------------------------------------------------------------------ */
  .cta {
    position: relative;
    isolation: isolate;
    overflow: clip;
    z-index: 2;
    margin-block-start: -2.75rem;
    border-radius: 2.75rem 2.75rem 0 0;
    padding-block: calc(var(--section-y) + 0.5rem) calc(var(--section-y) + 1rem);
    background: var(--forest-900);
    color: var(--text);
  }
  .faqs {
    padding-block-end: calc(var(--section-y) + 2.75rem);
  }
  .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(55% 70% at 85% 60%, rgb(232 186 34 / 0.24), transparent 70%),
      radial-gradient(45% 60% at 0% 0%, rgb(47 125 68 / 0.4), transparent 72%);
  }
  .cta__grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
  }
  .cta__copy {
    display: grid;
    gap: 1.6rem;
    justify-items: start;
  }
  .cta__copy h2 {
    max-inline-size: 16ch;
    color: #fff;
  }
  /* Porta + foto: a pessoa que acabou de abrir a porta */
  .cta__visual {
    position: relative;
    display: grid;
    place-items: center;
  }
  .cta__photo {
    --ph-pos: 50% 50%;
    position: absolute;
    z-index: 2;
    inset-inline-start: 0.5rem;
    inset-block-end: 3%;
    inline-size: clamp(6.5rem, 30%, 11rem);
    aspect-ratio: 2 / 3;
    rotate: -4deg;
    filter: drop-shadow(0 22px 22px rgb(0 0 0 / 0.5));
  }
  .cta__photo .ph__pic {
    box-shadow: none;
  }
  @media (min-width: 62rem) {
    .cta__photo {
      inset-inline-start: -3%;
    }
  }
  @media (min-width: 62rem) {
    .cta__grid {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
  }

  /* Rodapé leva o mesmo desenho de sobreposição */
  .footer {
    position: relative;
    z-index: 1;
  }
}