/* fazenda-de-acasalamento.css -- página /estrutura/fazenda-de-acasalamento/como-funciona.
   Depende de codex.css e pals-list.css (cabeçalho). Tom: rosa do coração da fazenda e creme de casca de ovo. */
.fa-pagina{
  --fa-cor: #ff8fb4;
  --fa-soft: rgba(255,143,180,.12);
  --fa-line: rgba(255,143,180,.36);
  --fa-creme: #f3dcaa;
}
.fa-trilha{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:1rem; font-size:.8rem; color: var(--text-dim); }
.fa-trilha a{ color: var(--text-dim); text-decoration:none; }
.fa-trilha a:hover{ color: var(--fa-cor); }
.fa-trilha i{ font-size:.65rem; opacity:.6; }
.fa-trilha span{ color: var(--text); }

.fa-hero{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem 2rem;
  margin-bottom:1.5rem; padding:1.6rem 1.8rem; border:1px solid var(--fa-line); border-radius:20px;
  background: radial-gradient(90% 140% at 0% 0%, var(--fa-soft), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(243,220,170,.08), transparent 60%), var(--panel);
}
.fa-hero-texto{ text-align:left; margin:0; flex:1 1 380px; }
.fa-hero-texto h1 em{ color: var(--fa-cor); }
.fa-hero-texto p{ max-width:62ch; }
.fa-resumo{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0; }
.fa-resumo div{ min-width:5.2rem; padding:.6rem .9rem; text-align:center; background: rgba(10,13,20,.45); border:1px solid var(--hairline); border-radius:14px; }
.fa-resumo dt, .fa-tabela thead th{ font-family: var(--font-mono); font-size:.64rem; font-weight:500; text-transform:uppercase; letter-spacing:.07em; color: var(--text-dim); }
.fa-resumo dd{ margin:.15rem 0 0; font-family: var(--font-display); font-weight:700; font-size:1.5rem; line-height:1; color: var(--fa-creme); font-variant-numeric: tabular-nums; }

.fa-painel{ margin-bottom:1.5rem; padding:1.25rem; border-radius:18px; border:1px solid var(--hairline); background: var(--panel); scroll-margin-top:90px; }
.fa-titulo{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:0 0 .9rem; font-size:1.05rem; font-weight:700; color: var(--text-bright); }
.fa-titulo i{ color: var(--fa-cor); }
.fa-sub{ margin:-.4rem 0 1rem; font-size:.85rem; color: var(--text-dim); max-width:90ch; }
.fa-sub a, .fa-nota a, .fa-passos a, .fa-cartao a{ color: var(--fa-cor); }
.fa-nota{ margin:.85rem 0 0; font-size:.75rem; color: var(--text-dim); max-width:110ch; }
.fa-nota code, .fa-cartao code{ font-family: var(--font-mono); color: var(--text); }
.fa-fontes{ margin:0 0 2rem; }

.fa-passos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:.75rem; }
.fa-passos li{ display:flex; gap:.75rem; padding:.85rem; border-radius:12px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.05); }
.fa-passos li > span{ flex-shrink:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font-weight:800; color:#2a1018; background: var(--fa-cor); }
.fa-passos p{ margin:0; font-size:.86rem; color: var(--text); }
.fa-passos b{ color: var(--text-bright); }

.fa-tabela-wrap{ overflow-x:auto; border:1px solid var(--hairline); border-radius:12px; background: var(--panel-2); }
.fa-tabela{ width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric: tabular-nums; font-size:.84rem; }
.fa-tabela th, .fa-tabela td{ padding:.5rem .6rem; text-align:center; border-bottom:1px solid var(--hairline); color: var(--text); }
.fa-tabela tbody tr:last-child > *{ border-bottom:0; }
.fa-tabela thead th{ background:#12161f; }
.fa-tabela td b{ color: var(--text-bright); }
.fa-tabela td small{ display:block; font-size:.7rem; color: var(--text-dim); }
.fa-tabela .fa-col-item{ text-align:left; min-width:12rem; font-weight:600; color: var(--text-bright); }
.fa-tabela .fa-col-item small{ font-weight:500; color: var(--fa-cor); margin-left:.2rem; }
.fa-col-item a{ display:inline-flex; align-items:center; gap:.5rem; color: var(--text-bright); text-decoration:none; }
.fa-col-item a:hover{ color: var(--fa-cor); }
.fa-col-item img{ width:28px; height:28px; flex-shrink:0; object-fit:contain; }
.fa-vazio{ color: var(--text-dim); opacity:.6; }

.fa-cartoes{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:.75rem; }
.fa-cartao{ display:flex; flex-direction:column; gap:.4rem; padding:1rem; border-radius:14px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.06); }
.fa-cartao h3{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:0; font-size:.95rem; font-weight:700; color: var(--text-bright); }
.fa-cartao h3 small{ font-size:.7rem; font-weight:500; color: var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.fa-cartao h3 img{ width:28px; height:28px; object-fit:contain; }
.fa-cartao p{ margin:0; font-size:.84rem; color: var(--text); }
.fa-cartao b{ color: var(--text-bright); }
.fa-cartao-num{ font-family: var(--font-display); font-weight:700; font-size:1.7rem; line-height:1; color: var(--fa-creme); font-variant-numeric: tabular-nums; }
.fa-cartao-extra{ padding-top:.4rem; border-top:1px dashed var(--hairline); color: var(--text-dim) !important; }
@media (max-width:640px){ .fa-hero{ padding:1.2rem; } .fa-tabela .fa-col-item{ min-width:9rem; } }