/* ============================================================
   PARCERIAS v2 (teste) — contrapartidas em destaque, página mais curta
   ============================================================ */

/* Modalidades: Master em destaque na largura toda, demais em grade */
.px-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.px-mod { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 30px); background: var(--noite); border: 1px solid var(--linha); transition: border-color .35s var(--ease); }
.px-mod:hover { border-color: rgba(191, 165, 122, .5); }
.px-mod h3 { margin: 0; font: 500 clamp(1.45rem, 1.9vw, 1.7rem)/1.08 var(--serifa); }
.px-mod-texto { margin: 0; color: var(--texto-2); font-weight: 300; font-size: .92rem; }
.px-recebe { margin: 6px 0 0; padding: 14px 16px; background: rgba(191, 165, 122, .08); border-left: 2px solid var(--latao); font-size: .88rem; line-height: 1.55; color: var(--texto); }
.px-recebe b { display: block; margin-bottom: 6px; font: 600 .64rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--latao-2); }
.px-mod .link-seta { align-self: flex-start; margin-top: auto; padding-top: 8px; }
.px-mod.destaque { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 10px clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 3.4vw, 48px); border-color: rgba(191, 165, 122, .55); background: linear-gradient(120deg, rgba(191, 165, 122, .1), transparent 60%), var(--noite); }
.px-mod.destaque > div { display: flex; flex-direction: column; gap: 12px; }
.px-mod.destaque h3 { font-size: clamp(2rem, 3vw, 2.6rem); }
.px-mod.destaque .px-mod-texto { font-size: 1rem; max-width: 52ch; }
.px-mod.destaque .px-recebe { margin: 0; padding: 20px 22px; font-size: .95rem; }
.px-mod.destaque .link-seta { margin-top: 4px; }

/* Contrapartidas: seção própria, cartões com ícone */
.px-contra-secao { background: radial-gradient(120% 140% at 0% 0%, rgba(191, 165, 122, .13), transparent 55%), var(--noite-2); }
.px-contra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.px-contra li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 24px 22px; background: rgba(7, 12, 17, .55); border: 1px solid rgba(191, 165, 122, .28); }
.px-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(191, 165, 122, .5); background: rgba(191, 165, 122, .08); }
.px-ic::before { content: ''; width: 24px; height: 24px; background: var(--latao-2); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.px-contra-num { display: block; margin-bottom: 6px; font: 400 .7rem/1 var(--mono); color: var(--latao); }
.px-contra p { margin: 0; font: 500 1.2rem/1.25 var(--serifa); color: var(--texto); }
.px-contra-nota { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 0; max-width: 90ch; font-size: .86rem; color: var(--texto-3); }
.px-contra-nota::before { content: 'i'; flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--texto-3); border-radius: 50%; font: italic 500 .78rem/1 var(--serifa); }

/* Formatos: faixa compacta */
.px-formatos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); counter-reset: fm; }
.px-formatos li { counter-increment: fm; padding: 22px 22px 24px 0; }
.px-formatos li + li { padding-left: 22px; border-left: 1px solid var(--linha); }
.px-formatos li::before { content: '0' counter(fm); display: block; margin-bottom: 12px; font: 400 .7rem/1 var(--mono); color: var(--latao); }
.px-formatos b { display: block; margin-bottom: 8px; font: 500 1.35rem/1.1 var(--serifa); color: var(--texto); }
.px-formatos p { margin: 0; font-size: .88rem; font-weight: 300; color: var(--texto-2); }

/* Como funciona: linha do tempo horizontal */
.px-passos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: ps; }
.px-passos::before { content: ''; position: absolute; top: 22px; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, var(--latao), rgba(191, 165, 122, .2)); }
.px-passos li { position: relative; counter-increment: ps; padding-top: 64px; color: var(--texto); font: 500 1.15rem/1.3 var(--serifa); }
.px-passos li::before { content: counter(ps); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--latao); border-radius: 50%; background: var(--noite); font: 500 .85rem/1 var(--mono); color: var(--latao-2); }
.px-passos li:last-child::before { background: var(--latao); color: var(--noite); }

/* Tablet */
@media (max-width: 1199px) {
  .px-mods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .px-mod.destaque { grid-template-columns: 1fr; }
  .px-contra { grid-template-columns: 1fr 1fr; }
  .px-formatos { grid-template-columns: 1fr 1fr; }
  .px-formatos li:nth-child(3) { padding-left: 0; border-left: 0; }
  .px-formatos li:nth-child(n+3) { border-top: 1px solid var(--linha); }
}
/* Celular */
@media (max-width: 760px) {
  .px-mods, .px-contra { grid-template-columns: 1fr; }
  .px-mod, .px-mod.destaque { padding: 22px 20px; }
  .px-contra li { grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 16px; }
  .px-ic { width: 40px; height: 40px; }
  .px-ic::before { width: 20px; height: 20px; }
  .px-contra-num { display: none; }
  .px-contra p { font-size: 1.05rem; }
  .px-formatos { grid-template-columns: 1fr; }
  .px-formatos li, .px-formatos li + li, .px-formatos li:nth-child(3) { padding: 16px 0; border-left: 0; }
  .px-formatos li + li { border-top: 1px solid var(--linha); }
  .px-formatos li { display: grid; grid-template-columns: 34px 1fr; }
  .px-formatos li::before { grid-row: span 2; margin: 4px 0 0; }
  .px-passos { grid-template-columns: 1fr; gap: 0; }
  .px-passos::before { top: 18px; bottom: 18px; left: 17px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--latao), rgba(191, 165, 122, .2)); }
  .px-passos li { padding: 8px 0 18px 56px; min-height: 36px; font-size: 1.05rem; }
  .px-passos li::before { width: 36px; height: 36px; }
}

/* Ícones das contrapartidas (na ordem da lista) */
.px-contra li:nth-child(1) .px-ic::before { --ic: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 24 24%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%271.4%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%3E%3Cpath d%3D%27M4 5h16v11H9l-5 4z%27%2F%3E%3Cpath d%3D%27M12 13.2s-3-1.9-3-3.9a1.6 1.6 0 0 1 3-.8 1.6 1.6 0 0 1 3 .8c0 2-3 3.9-3 3.9z%27%2F%3E%3C%2Fsvg%3E"); }
.px-contra li:nth-child(2) .px-ic::before { --ic: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 24 24%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%271.4%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%3E%3Cpath d%3D%27M12 2c3.5 3.5 4.5 9 3.6 13.5C14.9 19 13.4 22 12 22s-2.9-3-3.6-6.5C7.5 11 8.5 5.5 12 2z%27%2F%3E%3Cpath d%3D%27M12 7v11%27%2F%3E%3C%2Fsvg%3E"); }
.px-contra li:nth-child(3) .px-ic::before { --ic: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 24 24%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%271.4%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%3E%3Cpath d%3D%27M4 8h3l2-3h6l2 3h3v11H4z%27%2F%3E%3Ccircle cx%3D%2712%27 cy%3D%2713%27 r%3D%273.5%27%2F%3E%3C%2Fsvg%3E"); }
.px-contra li:nth-child(4) .px-ic::before { --ic: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 24 24%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%271.4%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%3E%3Cpath d%3D%27M8 4h8v5a4 4 0 0 1-8 0z%27%2F%3E%3Cpath d%3D%27M8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M9 20h6M10 17h4%27%2F%3E%3C%2Fsvg%3E"); }
.px-contra li:nth-child(5) .px-ic::before { --ic: url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 24 24%27 fill%3D%27none%27 stroke%3D%27black%27 stroke-width%3D%271.4%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%3E%3Crect x%3D%273%27 y%3D%274%27 width%3D%2718%27 height%3D%2716%27 rx%3D%271.5%27%2F%3E%3Cpath d%3D%27M3 16l5-5 4 4 3-3 6 6%27%2F%3E%3Ccircle cx%3D%2715.5%27 cy%3D%278.5%27 r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }

/* Master no celular: contrapartidas antes do link */
@media (max-width: 900px) {
  .px-mod.destaque { display: flex; flex-direction: column; gap: 12px; }
  .px-mod.destaque > div { display: contents; }
  .px-mod.destaque .link-seta { order: 2; }
}
@media (max-width: 760px) { .px-passos::before { bottom: 44px; } }

/* Modalidades logo após a abertura: menos espaço no topo */
body .ha-secao#modalidades { padding-top: clamp(40px, 4.5vw, 64px); }

/* Master separado das demais modalidades */
.px-mod.destaque { margin-bottom: 16px; }
.px-dica { display: none; }
@media (max-width: 900px) { .px-mod.destaque { align-items: stretch; text-align: left; } }

/* Celular: demais modalidades numa fileira deslizante (contrapartidas sempre à vista) */
@media (max-width: 760px) {
  .px-dica { display: block; margin: 4px 0 12px; font: 500 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--latao); }
  .px-mods {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px 0;
  }
  .px-mods::-webkit-scrollbar { display: none; }
  .px-mods > .px-mod { flex: 0 0 84%; scroll-snap-align: start; }
}

/* 5 contrapartidas: 3 em cima, 2 embaixo, ocupando a largura toda */
@media (min-width: 901px) {
  .px-contra { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .px-contra li { grid-column: span 2; }
  .px-contra li:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 761px) and (max-width: 900px) { .px-contra li:last-child { grid-column: 1 / -1; } }