/* =====================================================================
   DNAEquestra — folha de estilo
   Um arquivo só, usado por todas as páginas. Mudou aqui, mudou no site.
   ===================================================================== */

:root{
  --ground:#F3F6F1; --surface:#FFFFFF; --surface-2:#EAEFE7;
  --ink:#16211C; --ink-2:#556358; --ink-3:#7C8A80;
  --line:#DBE2D8; --line-strong:#C2CDBE;
  --accent:#1D5B44; --accent-soft:#DCEAE1; --rail:#CBD6C7;
  --warn-bg:#FBF4E4; --warn-line:#E4D3A8; --warn-ink:#6B5117;
  --slot:#EFF3ED; --slot-line:#C6D1C2;
  --shadow:0 1px 2px rgba(22,33,28,.05), 0 8px 24px -16px rgba(22,33,28,.25);
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#101512; --surface:#181F1B; --surface-2:#1F2823;
    --ink:#E9EEE8; --ink-2:#A3B0A7; --ink-3:#7B8880;
    --line:#28322C; --line-strong:#3A463F;
    --accent:#6EC29B; --accent-soft:#1D2F27; --rail:#2E3A33;
    --warn-bg:#241E10; --warn-line:#4A3D1C; --warn-ink:#D9BF83;
    --slot:#1C2420; --slot-line:#334039;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:32px 24px 72px;display:flex;flex-direction:column;gap:40px}

/* --- topo de site ---------------------------------------------------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.marca{font-family:"Instrument Serif",Georgia,serif;font-size:23px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.marca b{color:var(--accent);font-weight:400}
.busca{display:flex;gap:8px}
.busca input{
  font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--line-strong);
  border-radius:3px;background:var(--surface);color:var(--ink);min-width:220px;
}
.busca input:focus{outline:2px solid var(--accent);outline-offset:1px}
.busca button{
  font:inherit;font-size:14px;font-weight:600;padding:8px 16px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:var(--ground);border-radius:3px;
}

.flag{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.flag b{color:var(--accent);font-weight:600}

/* --- identidade ------------------------------------------------------ */
.hero{display:grid;grid-template-columns:216px 1fr;gap:28px;align-items:start}
@media (max-width:700px){ .hero{grid-template-columns:1fr} }

.slot{
  background:var(--slot); border:1px dashed var(--slot-line); border-radius:3px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:14px;color:var(--ink-3);
  background-image:repeating-linear-gradient(135deg,transparent 0 9px,rgba(124,138,128,.07) 9px 10px);
}
.slot .mark{width:22px;height:22px;border:1.5px solid var(--slot-line);border-radius:50%;position:relative}
.slot .mark::after{content:"";position:absolute;inset:5px 4px 7px;border:1.5px solid var(--slot-line);border-top:none;border-radius:0 0 6px 6px}
.slot .t{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.slot .s{font-size:11px;line-height:1.4;max-width:22ch}
.portrait{aspect-ratio:4/5}

.idtext{display:flex;flex-direction:column;gap:14px;padding-top:2px}
h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(40px,6.4vw,66px);line-height:.98;letter-spacing:-.01em;margin:0;text-wrap:balance}
.kicker{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:clamp(17px,2.2vw,22px);color:var(--ink-2);line-height:1.35;max-width:56ch;margin:0}
.origin{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);padding-top:4px;border-top:1px solid var(--line)}
.origin b{color:var(--ink-2);font-weight:500}

/* --- números --------------------------------------------------------- */
.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.stat{background:var(--surface);padding:18px 20px 16px;display:flex;flex-direction:column;gap:5px}
.stat .n{font-family:"Instrument Serif",Georgia,serif;font-size:38px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.stat .n small{font-family:"Archivo",sans-serif;font-size:15px;font-weight:500;color:var(--ink-2)}
.stat .l{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}

.srcnote{display:flex;align-items:flex-start;gap:9px;margin:-28px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5;max-width:76ch}
.srcnote .dot{flex:none;margin-top:5px;width:7px;height:7px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.srcnote b{color:var(--ink-2);font-weight:600}

/* --- seções ---------------------------------------------------------- */
section{display:flex;flex-direction:column;gap:16px}
h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin:0;padding-bottom:10px;border-bottom:1px solid var(--line-strong)}
.prose{max-width:66ch;display:flex;flex-direction:column;gap:14px}
.prose p{margin:0;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.lede{font-size:16.5px;color:var(--ink)}

/* --- pedigree -------------------------------------------------------- */
.pedscroll{overflow-x:auto}
.ped{display:flex;gap:10px;min-width:640px}
.pedcol{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:space-around}
.pedcol .colhead{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding-bottom:2px}
.node{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 3px 3px 0;padding:11px 13px;display:flex;flex-direction:column;gap:3px;flex:1;justify-content:center}
.node .nm{font-weight:600;font-size:14px;line-height:1.25}
.node .rl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.node .src{font-size:11px;color:var(--accent);font-weight:500}
.node.empty{border-left-color:var(--slot-line);border-style:dashed;border-left-style:solid;background:var(--slot)}
.node.empty .nm{color:var(--ink-3);font-weight:500;font-style:italic}
.node.self{border-left-color:var(--ink);background:var(--surface-2)}
.pedmeter{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
.pips{display:flex;gap:4px}
.pip{width:11px;height:11px;border-radius:2px;border:1px solid var(--slot-line);background:var(--slot);display:inline-block}
.pip.on{background:var(--accent);border-color:var(--accent)}

/* --- tabelas --------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:3px;background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px}
thead th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap;background:var(--surface)}
thead th.num{text-align:right}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even) td{background:var(--surface-2)}
td.name{font-weight:600;color:var(--ink);white-space:nowrap}
td.name a{color:inherit;text-decoration:none}
td.name a:hover{text-decoration:underline}
td.dam{color:var(--ink-2);white-space:nowrap}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.zero{color:var(--ink-3)}
.tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.07em;padding:2px 6px;border-radius:2px;border:1px solid var(--line-strong);color:var(--ink-2)}
.tag.te{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.tag.ia{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.tag.mn{background:var(--surface-2);color:var(--ink-2)}
.tag.none{border-style:dashed;color:var(--ink-3)}
.sex{font-size:11px;color:var(--ink-3);letter-spacing:.06em}

.railcell{min-width:150px}
.rail{display:flex;align-items:center;gap:9px}
.track{position:relative;flex:1;height:14px;min-width:74px}
.track::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--rail);border-radius:1px}
.track .fill{position:absolute;left:0;top:6px;height:2px;background:var(--accent);border-radius:1px}
.track .pin{position:absolute;top:1px;width:2px;height:12px;background:var(--accent);border-radius:1px;transform:translateX(-1px)}
.track .gp{position:absolute;top:0;right:0;width:1px;height:14px;background:var(--line-strong)}
.hval{font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;width:44px;text-align:right}
.scalekey{display:flex;align-items:center;gap:9px;font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;padding:10px 14px 0;flex-wrap:wrap}
.scalekey .track{max-width:120px;min-width:80px}

/* --- galeria e cartões ----------------------------------------------- */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.gallery .slot{aspect-ratio:3/2}

.findings{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.finding{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 3px 3px 0;padding:16px 18px;display:flex;flex-direction:column;gap:7px}
.finding .t{font-weight:600;font-size:14px}
.finding p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* --- avisos ---------------------------------------------------------- */
.notice{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:3px;padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.notice > .hd{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn-ink);font-weight:700}
.rules{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.rule{display:flex;flex-direction:column;gap:5px}
.rule .rt{font-weight:700;font-size:13px;color:var(--warn-ink)}
.rule p{margin:0;font-size:13px;line-height:1.5;color:var(--warn-ink);opacity:.92}
.correct{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--warn-line);padding-top:16px}
.btn{display:inline-block;background:var(--accent);color:var(--ground);font-weight:600;font-size:13px;padding:9px 16px;border-radius:3px;text-decoration:none;border:1px solid var(--accent)}
.correct span{font-size:12.5px;color:var(--warn-ink);max-width:46ch}

.vazio{border:1px dashed var(--line-strong);border-radius:3px;padding:28px;text-align:center;color:var(--ink-2);background:var(--surface)}

footer{border-top:1px solid var(--line);padding-top:18px;font-size:12px;color:var(--ink-3);display:flex;flex-direction:column;gap:6px}
footer b{color:var(--ink-2);font-weight:500}

@media (max-width:640px){ .wrap{padding:24px 16px 56px;gap:32px} .stat .n{font-size:31px} }