/* ============================================================
   WUJI KUNG FU — style.css
   Base · Tokens · Tipografia · Layout · Header/Footer · Componentes
   Conceito: 無極 — o templo moderno. Preto profundo, grafite,
   dourado envelhecido, vermelho imperial. Minimalismo oriental.
   ============================================================ */

/* ---------- 1. Fontes ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;600;900&display=swap');

/* ---------- 2. Tokens ---------- */
:root{
  /* Cores */
  --preto:#0a0a0c;
  --preto-2:#101013;
  --grafite:#17171b;
  --grafite-2:#1e1e23;
  --dourado:#c19551;          /* dourado do enso (amostrado da logo) */
  --dourado-claro:#e2c88f;
  --dourado-fosco:#8f6f38;
  --dourado-sombra:#6b5228;
  --vermelho:#8c1b1b;          /* vermelho do selo 功夫 */
  --vermelho-vivo:#b3272c;
  --tinta:#101010;             /* preto da caligrafia */
  --branco:#f2efe7;            /* osso / papel de arroz */
  --cinza:#a5a4ac;
  --cinza-fraco:#6b6b73;
  --borda:rgba(193,149,81,.18);
  --borda-forte:rgba(193,149,81,.42);

  /* Tipografia */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --hanzi:'Noto Serif SC','Songti SC',serif;

  /* Ritmo */
  --container:1200px;
  --gutter:clamp(20px,5vw,48px);
  --radius:16px;
  --radius-sm:10px;

  /* Transições */
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,1,.3,1);
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--preto);
  color:var(--branco);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--vermelho);color:#fff}
:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}

/* ---------- 4. Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.hanzi{font-family:var(--hanzi)}
.serif{font-family:var(--serif)}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.4em;text-transform:uppercase;color:var(--dourado);
}
.eyebrow--center{display:flex;align-items:center;justify-content:center;gap:14px}
.eyebrow--center::before,.eyebrow--center::after{
  content:"";width:34px;height:1px;background:var(--borda-forte);
}

.lead{color:var(--cinza);font-size:clamp(1rem,2vw,1.15rem);font-weight:300}
.lead b,.lead strong{color:var(--dourado-claro);font-weight:500}

/* ---------- 5. Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.section{padding:clamp(70px,11vw,140px) 0;position:relative}
.section--tight{padding:clamp(50px,7vw,90px) 0}

.section-head{text-align:center;max-width:760px;margin:0 auto clamp(44px,6vw,72px)}
.section-head h2{font-size:clamp(2.1rem,6vw,3.4rem);margin:16px 0 18px;color:#fff}
.section-head .hanzi-mark{
  font-family:var(--hanzi);font-weight:900;color:var(--dourado);
  font-size:clamp(1.4rem,4vw,2rem);opacity:.9;letter-spacing:.3em;
}

/* Marca d'água hanzi de fundo de seção */
.watermark{
  position:absolute;font-family:var(--hanzi);font-weight:900;
  color:rgba(245,243,238,.018);pointer-events:none;user-select:none;
  font-size:clamp(14rem,34vw,30rem);line-height:1;z-index:0;
  top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;
}

/* ---------- 6. Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:.8rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:15px 32px;border-radius:100px;position:relative;
  transition:all .4s var(--ease);
}
.btn--gold{background:var(--dourado);color:var(--preto)}
.btn--gold:hover{background:var(--dourado-claro);transform:translateY(-2px);box-shadow:0 12px 30px rgba(193,149,81,.28)}
.btn--ghost{border:1px solid var(--borda-forte);color:var(--dourado-claro)}
.btn--ghost:hover{background:rgba(193,149,81,.08);border-color:var(--dourado)}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

/* ---------- 7. Header / Navegação ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
  padding:20px 0;
}
.site-header.solid{
  background:rgba(10,10,12,.82);
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom-color:var(--borda);
  padding:12px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px}
.brand .seal{
  width:46px;height:46px;flex:none;object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(193,149,81,.22));
  transition:transform .6s var(--slow);
}
.brand:hover .seal{transform:rotate(-8deg) scale(1.04)}
.brand .wordmark{font-family:var(--serif);font-weight:600;font-size:1.24rem;letter-spacing:.30em;line-height:1;color:var(--branco);text-indent:.30em}
.brand .wordmark b{
  display:flex;align-items:center;gap:8px;
  font-family:var(--serif);font-weight:600;color:var(--vermelho-vivo);
  font-size:.62rem;letter-spacing:.34em;margin-top:6px;text-indent:0;
}
.brand .wordmark b::before,.brand .wordmark b::after{
  content:"";flex:1;height:1px;min-width:14px;
  background:linear-gradient(90deg,transparent,var(--dourado-fosco),transparent);
}
.brand .wordmark small{display:block;font-family:var(--hanzi);font-weight:400;font-size:.6rem;letter-spacing:.34em;color:var(--dourado-fosco);margin-top:5px;text-indent:0;text-align:center}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links a{
  font-size:.74rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cinza);padding:9px 13px;border-radius:8px;position:relative;transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;
  background:var(--dourado);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--dourado-claro)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

.nav-toggle{display:none;width:46px;height:42px;border:1px solid var(--borda);border-radius:10px;position:relative}
.nav-close{display:none}
.nav-toggle span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--dourado);transition:.35s var(--ease)}
.nav-toggle span:nth-child(1){top:15px}
.nav-toggle span:nth-child(2){top:20px}
.nav-toggle span:nth-child(3){top:25px}
.nav-toggle.open span:nth-child(1){top:20px;transform:rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){top:20px;transform:rotate(-45deg)}

/* Barra de progresso de leitura */
.read-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:110;
  background:linear-gradient(90deg,var(--vermelho),var(--dourado),var(--dourado-claro));box-shadow:0 0 10px rgba(193,149,81,.5)}

/* ---------- 8. Footer ---------- */
.site-footer{
  border-top:1px solid var(--borda);background:var(--preto-2);
  padding:70px 0 40px;position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;right:-90px;top:50%;transform:translateY(-50%);
  width:420px;height:420px;opacity:.045;pointer-events:none;
  background:url("../assets/mark.png") center/contain no-repeat;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:50px}
.footer-brand .seal-lg{display:flex;align-items:center;gap:16px}
.footer-brand .seal-lg img{width:74px;height:74px;flex:none;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.footer-brand .seal-lg .fm{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:.28em;color:var(--branco);line-height:1;text-indent:.28em}
.footer-brand .seal-lg .fm span{display:block;font-size:.62rem;letter-spacing:.32em;color:var(--vermelho-vivo);margin-top:7px;text-indent:0}
.footer-brand .seal-lg .fm em{display:block;font-family:var(--hanzi);font-style:normal;font-size:.62rem;letter-spacing:.3em;color:var(--dourado-fosco);margin-top:5px;text-indent:0}
.footer-brand p{color:var(--cinza);margin-top:16px;max-width:340px;font-size:.92rem}
.footer-col h4{font-size:1.15rem;color:#fff;margin-bottom:18px}
.footer-col a{display:block;color:var(--cinza);font-size:.88rem;padding:5px 0;transition:color .3s var(--ease)}
.footer-col a:hover{color:var(--dourado-claro)}
.footer-bottom{border-top:1px solid var(--borda);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--cinza-fraco);font-size:.78rem;letter-spacing:.04em}

/* ---------- 9. Cards genéricos ---------- */
.card{
  background:linear-gradient(158deg,var(--grafite),var(--preto-2));
  border:1px solid var(--borda);border-radius:var(--radius);
  padding:clamp(22px,3vw,32px);position:relative;overflow:hidden;
  transition:transform .5s var(--slow),border-color .5s var(--ease);
}
.card:hover{transform:translateY(-6px);border-color:var(--borda-forte)}
.card__hanzi{
  position:absolute;top:-16px;right:-6px;font-family:var(--hanzi);font-weight:900;
  font-size:6rem;line-height:1;color:rgba(193,149,81,.05);pointer-events:none;white-space:nowrap;
}

/* ---------- 10. Utilidades ---------- */
.text-gold{color:var(--dourado-claro)}
.text-red{color:var(--vermelho-vivo)}
.center{text-align:center}
.divider{width:1px;height:64px;margin:0 auto;background:linear-gradient(var(--dourado),transparent)}
.pinyin{font-style:italic;color:var(--vermelho-vivo);font-size:.9rem;letter-spacing:.02em}
.cn-name{font-family:var(--hanzi);color:var(--dourado);font-weight:600}


/* ============================================================
   Ícones SVG da marca (sprite injetado por js/icons.js)
   ============================================================ */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;
  fill:none;stroke:currentColor;color:var(--dourado);flex:none}

/* ============================================================
   CTA flutuante WhatsApp
   ============================================================ */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:900;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px 13px 16px;border-radius:100px;
  background:linear-gradient(135deg,#1faa55,#128c40);
  color:#fff;font-family:var(--sans);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  box-shadow:0 10px 30px rgba(18,140,64,.4),0 2px 8px rgba(0,0,0,.3);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa-float svg,.wa-float .ico{width:26px;height:26px;flex:none;color:#fff;stroke:#fff}
.wa-float:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 40px rgba(18,140,64,.5)}
.wa-float span{white-space:nowrap}
@media(max-width:600px){
  .wa-float{right:16px;bottom:16px;padding:14px}
  .wa-float span{display:none}   /* no mobile vira botão redondo só com ícone */
  .wa-float{border-radius:50%}
}