/* Página de recursos (WP-80): /recursos, /en/features, /es/recursos. Vem depois de landing-entry-v1.css (tokens, header, botões, status).
   Marcação gerada por ops/features-build.mjs. Raios: 8 (controles) e pílula só nos selos de status, como na LP.
   Camadas: header 20. Sem JS a lista inteira aparece aberta; com JS entram busca, filtros e o acordeão do celular. */
.lp-links a[aria-current=page]{color:var(--q-text);text-decoration:underline;text-decoration-color:var(--q-accent);text-decoration-thickness:2px;text-underline-offset:10px}
.fp-hero{padding-block:72px 36px}
.fp-title{font:600 clamp(36px,4.6vw,64px)/1.06 var(--q-font-display);letter-spacing:-.045em;margin:0 0 20px;max-width:20ch}
.fp-lead{color:var(--lp-ink-2);font-size:clamp(17px,1.5vw,20px);max-width:60ch}

/* Ferramentas */
.fp-tools{display:grid;gap:16px;margin-bottom:28px}
.fp-tools[hidden]{display:none}
.fp-tools-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.fp-search{flex:1 1 320px;max-width:480px;display:grid;gap:8px}
.fp-search label{font-size:14px;color:var(--q-muted)}
.fp-search input{width:100%;min-height:48px;padding:0 16px;border:0;border-radius:var(--q-control-radius);background:var(--q-surface);color:var(--q-text);box-shadow:inset 0 0 0 1px var(--lp-line-2);font-size:16px;transition:box-shadow var(--q-feedback) ease}
.fp-search input::placeholder{color:var(--q-muted);opacity:1}
.fp-search input:hover{box-shadow:inset 0 0 0 1px #ffffff40}
.fp-search input:focus-visible{outline:3px solid var(--q-focus);outline-offset:3px}
.fp-seg{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));flex:0 1 460px;padding:4px;border-radius:var(--q-control-radius);background:var(--q-surface);box-shadow:inset 0 0 0 1px var(--lp-line)}
.fp-seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 4);border-radius:6px;background:var(--q-surface-raised);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--q-accent) 45%,transparent);transform:translateX(calc(var(--active,0) * 100%))}
.fp-seg.is-ready .fp-seg-thumb{transition:transform var(--q-enter) var(--lp-ease)}
.fp-seg-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;border:0;border-radius:6px;background:transparent;color:var(--q-muted);font-size:14px;font-weight:500;transition:color var(--q-feedback) ease,transform var(--q-feedback) ease}
.fp-seg-btn b{font-weight:600;font-variant-numeric:tabular-nums;font-size:13px;opacity:.85}
.fp-seg-btn[aria-pressed=true]{color:var(--q-text)}
.fp-seg-btn[aria-pressed=true] b{color:var(--q-accent);opacity:1}
.fp-seg-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.fp-seg-btn:hover{color:var(--q-text)}}
.fp-chips{display:flex;flex-wrap:wrap;gap:8px}
.fp-chip{min-height:40px;padding:0 14px;border:0;border-radius:var(--q-control-radius);background:transparent;color:var(--lp-ink-2);box-shadow:inset 0 0 0 1px var(--lp-line-2);font-size:14px;transition:background-color var(--q-feedback) ease,color var(--q-feedback) ease,box-shadow var(--q-feedback) ease,transform var(--q-feedback) ease}
.fp-chip[aria-pressed=true]{background:color-mix(in srgb,var(--q-accent) 12%,transparent);color:var(--q-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--q-accent) 45%,transparent)}
.fp-chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.fp-chip:hover:not([aria-pressed=true]){background:#ffffff0a;color:var(--q-text)}}
.fp-result{font-size:14px;color:var(--q-muted);font-variant-numeric:tabular-nums}

/* Lista por categoria */
.fp-cat{border-top:1px solid var(--lp-line-2);margin-top:12px;min-width:0}
.fp-cat[hidden]{display:none}
.fp-cat summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px;list-style:none;min-height:44px;padding-top:22px}
.fp-cat summary::-webkit-details-marker{display:none}
.fp-cat h2{font:600 clamp(22px,2.2vw,28px)/1.2 var(--q-font-display);letter-spacing:-.03em;margin:0}
.fp-cat-count{flex:none;font-size:14px;color:var(--q-muted);font-variant-numeric:tabular-nums}
.fp-items{list-style:none;margin:0;padding:24px 0 36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px}
.fp-item{display:grid;gap:8px;justify-items:start;align-content:start;min-width:0;scroll-margin-top:calc(var(--lp-header) + 16px)}
.fp-item[hidden]{display:none}
.fp-item h3{font:600 18px/1.3 var(--q-font-display);letter-spacing:-.02em;margin:0}
.fp-item p{font-size:15px;line-height:1.55;color:var(--lp-ink-2);max-width:62ch}
.fp-item .fp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:2px;font-size:13px;line-height:1.4;color:var(--q-muted)}
.fp-state{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--q-text)}
.fp-state::before{content:"";width:9px;height:9px;border-radius:50%;flex:none;box-sizing:border-box}
.fp-state[data-status=live]{color:var(--q-accent)}
.fp-state[data-status=live]::before{background:var(--q-accent)}
.fp-state[data-status=testing]::before{border:2px solid var(--q-text);background:linear-gradient(90deg,var(--q-text) 50%,transparent 50%)}
.fp-state[data-status=soon]{color:var(--lp-ink-2)}
.fp-state[data-status=soon]::before{border:2px dashed var(--q-muted)}
@media (min-width:761px){.fp-cat summary{pointer-events:none}}
.fp-empty{display:grid;gap:16px;justify-items:start;padding:56px 0 24px;border-top:1px solid var(--lp-line-2)}
.fp-empty[hidden]{display:none}
.fp-empty p{font-size:18px;color:var(--lp-ink-2);max-width:48ch}

/* Roteiro */
.fp-roadmap{padding-block:88px 96px;margin-top:40px;border-top:1px solid var(--lp-line)}
.fp-roadmap .lp-h2{margin-bottom:12px}
.fp-road-lead{color:var(--lp-ink-2);font-size:18px;margin-bottom:44px}
.fp-road-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.fp-road-col{border-top:1px solid var(--lp-line-2);padding-top:20px;min-width:0}
.fp-road-col h3{font:600 22px/1.2 var(--q-font-display);letter-spacing:-.03em;margin:0 0 6px}
.fp-road-note{font-size:14px;color:var(--q-muted);margin-bottom:18px}
.fp-road-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fp-road-col li{display:grid;gap:2px;font-size:16px;line-height:1.4;color:var(--q-text)}
.fp-road-col small{font-size:13px;color:var(--q-muted)}

/* Convite final */
.fp-close{border-top:1px solid var(--lp-line);background:radial-gradient(ellipse at 6% 40%,color-mix(in srgb,var(--q-accent) 6%,transparent),transparent 60%),var(--q-surface)}
.fp-close-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-block:64px}
.fp-close-title{font:600 clamp(26px,3vw,38px)/1.15 var(--q-font-display);letter-spacing:-.035em;margin:0 0 8px}
.fp-close p{color:var(--lp-ink-2);font-size:18px}
.fp-body .lp-footer{padding-bottom:48px}

@media (max-width:1060px){
 .fp-tools-row{flex-direction:column;align-items:stretch}
 .fp-search{max-width:none;flex-basis:auto}
 .fp-seg{flex-basis:auto}
 .fp-road-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media (max-width:760px){
 .fp-hero{padding-block:36px 24px}
 .fp-tools{gap:14px;margin-bottom:20px}
 .fp-seg-btn{flex-direction:column;align-items:center;gap:0;padding:4px 2px;font-size:13px}
 .fp-chips{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:2px 16px;scroll-snap-type:x proximity;scrollbar-width:none}
 .fp-chips::-webkit-scrollbar{display:none}
 .fp-chip{flex:none;min-height:44px;scroll-snap-align:start;white-space:nowrap}
 .fp-cat{margin-top:0}
 .fp-cat:last-of-type{border-bottom:1px solid var(--lp-line-2)}
 .fp-cat summary{min-height:64px;align-items:center;padding-top:0}
 .fp-cat summary::after{content:"";flex:none;width:9px;height:9px;margin:-4px 4px 0 6px;border-right:2px solid var(--q-muted);border-bottom:2px solid var(--q-muted);transform:rotate(45deg);transition:transform var(--q-feedback) ease}
 .fp-cat[open] summary::after{transform:rotate(-135deg);margin-top:4px}
 .fp-cat-count{margin-left:auto}
 .fp-cat h2{font-size:20px}
 .fp-items{grid-template-columns:minmax(0,1fr);gap:26px;padding:6px 0 28px}
 /* Same accordion motion as the landing summary: chevron and content together, after the first frame, never under reduced motion. */
 @media (prefers-reduced-motion:no-preference){
  @supports selector(::details-content){
   .fp-cat{interpolate-size:allow-keywords}
   .fp-cat::details-content{block-size:0;overflow:hidden;opacity:0}
   .fp-cat[open]::details-content{block-size:auto;opacity:1}
   .fp-cat.is-ready::details-content{transition:block-size var(--q-enter) var(--lp-ease),opacity var(--q-feedback) ease,content-visibility var(--q-enter) allow-discrete}
  }
 }
 .fp-roadmap{padding-block:64px 64px}
 .fp-road-lead{margin-bottom:32px}
 .fp-close-inner{flex-direction:column;align-items:stretch;gap:28px;padding-block:48px}
 .fp-close .lp-btn{width:100%}
}
@media (max-width:380px){
 .fp-chips{margin-inline:-12px;padding-inline:12px}
}