/* ============================================================
   PerioPrime — Brand System (assinatura)
   Direção: editorial, granulado, tinta + pergaminho + latão fosco + rosé.
   Sans do sistema (SF Pro) é o protagonista; Cormorant só acento.
   Uma folha, todas as ferramentas. Link isto e use as classes.
   ============================================================ */

:root{
  /* ---- base escura quente ---- */
  --bg:#100c0a;          /* fundo dominante */
  --ink:#17130f;         /* superfície escura / texto sobre claro */
  --grafite:#211a13;     /* superfície escura 2 */
  --espresso:#2a2016;    /* superfície dramática quente */

  /* ---- claros (creme, nunca branco 100%) ---- */
  --perg:#ece3d0;        /* pergaminho: superfície clara / leitura */
  --bone:#f4ecda;        /* creme mais claro */
  --creme:#efe7d6;       /* texto sobre escuro */
  --creme-70:rgba(239,231,214,.72);
  --creme-45:rgba(239,231,214,.45);
  --creme-20:rgba(239,231,214,.14);
  --tint-70:rgba(23,19,15,.72);
  --tint-55:rgba(23,19,15,.55);
  --tint-40:rgba(23,19,15,.4);

  /* ---- acento latão (fosco, nunca brilhante) ---- */
  --brass:#a8823c;
  --brass-lite:#c8a05a;
  --brass-ink:#7a5c26;   /* latão-texto sobre pergaminho */

  /* ---- assinatura rosé cerâmico (3-5%) ---- */
  --rose:#c9a19a;
  --rose-deep:#b98a83;

  /* ---- semânticos ---- */
  --line:rgba(239,231,214,.13);
  --line-ink:rgba(23,19,15,.14);
  --ok:#8a9a63; --warn:#c8913c;  /* status discretos, dentro da paleta quente */

  /* ---- tipografia ---- */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,sans-serif;
  --corm:"Cormorant",Georgia,serif;

  /* ---- forma ---- */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-pill:9999px;
  --maxw:1180px; --gutter:44px;
  --spring:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--creme);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- grão ---------- */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.gs{position:relative}
.gs::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.84' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-ink{height:1px;background:var(--line-ink);border:0;margin:0}
.pad{padding:104px 0}
.pad-sm{padding:64px 0}
section{position:relative}

/* ---------- tipografia ---------- */
.kicker{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;margin:0;color:var(--brass-lite)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-lite);margin:0}
.micro{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--creme-45)}
.display{font-family:var(--sans);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--creme);text-wrap:balance;margin:0}
.d1{font-size:clamp(40px,6vw,80px)}
.d2{font-size:clamp(32px,4.6vw,60px)}
.d3{font-size:clamp(26px,3.4vw,40px)}
.lead{font-size:18px;line-height:1.78;color:var(--creme-70);max-width:58ch;margin:0}
.sf{font-family:var(--corm);font-style:italic;font-weight:500}          /* acento serifa */
.sf-brass{font-family:var(--corm);font-style:italic;font-weight:500;color:var(--brass-lite)}
.script{font-family:"Ballet",cursive;color:var(--brass-lite);line-height:.8}
.anton{font-family:"Anton",var(--sans);font-weight:400;letter-spacing:.01em;line-height:.9}
.tnum{font-variant-numeric:tabular-nums}
.serif-quote{font-family:var(--corm);font-style:italic;font-weight:500;color:var(--creme)}

/* on paper */
.on-paper{background:var(--perg);color:var(--ink)}
.on-paper .display{color:var(--ink)}
.on-paper .lead{color:var(--tint-70)}
.on-paper .kicker,.on-paper .eyebrow{color:var(--brass-ink)}
.on-paper .display em,.on-paper .sf-brass{color:var(--brass-ink)}

/* ---------- botões (pill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--r-pill);padding:.9rem 1.7rem;font-family:var(--sans);font-size:14.5px;font-weight:600;line-height:1;border:none;cursor:pointer;text-decoration:none;transition:transform .45s var(--spring),background-color .3s,box-shadow .3s,color .3s}
.btn:active{transform:scale(.97)}
.btn-brass{background:var(--brass);color:var(--ink)}
.btn-brass:hover{background:var(--brass-lite);transform:translateY(-1px)}
.btn-creme{background:var(--creme);color:var(--ink)}
.btn-creme:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--creme-70);box-shadow:inset 0 0 0 1px var(--creme-20)}
.btn-ghost:hover{color:var(--creme);box-shadow:inset 0 0 0 1px rgba(200,160,90,.6)}
.btn-ink{background:var(--ink);color:var(--creme)}
.btn-sm{padding:.6rem 1.1rem;font-size:13px}

/* ---------- stickers / selos ---------- */
.stk{display:inline-block;font-family:var(--sans);font-weight:800;font-size:11px;padding:4px 10px;border-radius:6px;letter-spacing:.02em;transform:rotate(-3deg);background:var(--perg);color:var(--ink)}
.stk.br{background:var(--brass);color:var(--ink)}
.stk.ink{background:var(--ink);color:var(--brass-lite)}
.stk.rose{background:var(--rose);color:var(--ink)}
.stk.sf{font-family:var(--corm);font-style:italic;font-weight:600;font-size:15px;text-transform:none;transform:rotate(-2deg)}

/* ---------- chips / pills ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--creme-70)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none}
.tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill)}
.tag-brass{background:rgba(168,130,60,.16);color:var(--brass-lite)}
.tag-rose{background:rgba(201,161,154,.18);color:var(--rose)}
.tag-ok{background:rgba(138,154,99,.18);color:var(--ok)}
.tag-warn{background:rgba(200,145,60,.18);color:var(--warn)}

/* ---------- cards / superfícies ---------- */
.card{background:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-2{background:var(--grafite);border:1px solid var(--line);border-radius:var(--r)}
.card-paper{background:var(--perg);border:1px solid var(--line-ink);border-radius:var(--r-lg);color:var(--ink)}
.card-hover{transition:transform .5s var(--spring),border-color .35s}
.card-hover:hover{transform:translateY(-2px);border-color:var(--creme-20)}
.glass{background:rgba(16,12,10,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}

/* ---------- brand mark ---------- */
.logo{border-radius:8px;display:block}
.brandrow{display:flex;align-items:center;gap:11px}
.brandrow .wm{font-family:var(--sans);font-weight:700;font-size:17px;letter-spacing:-.03em;color:var(--creme)}

/* ---------- posts 4:5 / feed ---------- */
.cv{aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:4px;display:flex;flex-direction:column;isolation:isolate}
.cv .hd{position:absolute;top:12px;left:15px;z-index:3;font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.cv img,.ft img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ft{aspect-ratio:4/5;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate;padding:14px}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 20px}
.strip::-webkit-scrollbar{height:6px}.strip::-webkit-scrollbar-thumb{background:var(--line-ink);border-radius:var(--r-pill)}
.sl{flex:0 0 300px;scroll-snap-align:center;aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:4px;display:flex;flex-direction:column;isolation:isolate}
.duo-bw{filter:grayscale(1) contrast(1.05) brightness(.92)}
.duo-brass{filter:grayscale(1) sepia(.5) brightness(.92) contrast(1.02)}

/* ---------- form ---------- */
.field{width:100%;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--ink);padding:.85rem 1rem;font-size:16px;font-family:var(--sans);color:var(--creme);outline:none;transition:border-color .2s}
.field:focus{border-color:var(--brass)}
.label{display:block;margin-bottom:8px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--creme-45)}
.optbtn{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border-radius:var(--r);padding:1rem 1.25rem;cursor:pointer;font-family:var(--sans);background:var(--ink);border:1px solid var(--line);color:var(--creme-70);transition:all .2s}
.optbtn:hover{border-color:rgba(168,130,60,.5);color:var(--creme)}
.optbtn.on{background:rgba(168,130,60,.1);border-color:var(--brass);color:var(--creme)}
.optbtn .letter{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:var(--r-pill);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line);color:var(--creme-45)}
.optbtn.on .letter{border-color:var(--brass);color:var(--brass-lite)}

/* ---------- progress / bars ---------- */
.bar{width:100%;height:6px;border-radius:var(--r-pill);background:var(--creme-20);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-pill);background:var(--brass-lite);transition:width 1.1s var(--spring)}

/* ---------- table (CRM) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--creme-45);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px;border-bottom:1px solid var(--line);color:var(--creme-70)}
.tbl tr{cursor:pointer;transition:background .2s}
.tbl tbody tr:hover{background:rgba(239,231,214,.03)}
.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--espresso);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--brass-lite);flex:none}

/* ---------- modal / popup ---------- */
.scrim{position:fixed;inset:0;z-index:400;background:rgba(8,6,5,.66);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.open{opacity:1;pointer-events:auto}
.modal{width:100%;max-width:560px;max-height:90vh;overflow:auto;background:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);transform:translateY(16px) scale(.98);transition:transform .45s var(--spring)}
.scrim.open .modal{transform:none}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--spring),transform .8s var(--spring)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.bar>i{transition:none}}

/* ---------- links ---------- */
a{color:var(--brass-lite);text-decoration:none}
a.plain{color:inherit}

/* ---------- marquee ---------- */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.mq-track{display:flex;width:max-content;animation:mq 55s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* ---------- responsive ---------- */
@media(max-width:820px){:root{--gutter:24px}.pad{padding:72px 0}.feed{grid-template-columns:repeat(3,1fr)}}