/* 口贴公司 - 巴西签证服务站点 全站样式 */
:root{
  --bg:#f8fafc;
  --bg-gradient: linear-gradient(180deg,#f8fafc 0%, #f1f5f9 100%);
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --primary:#0ea5a6; /* teal */
  --primary-2:#22d3ee;
  --accent:#f59e0b; /* amber */
  --success:#22c55e;
  --danger:#ef4444;
  --radius:14px;
  --shadow:0 12px 30px rgba(2,6,23,.08);
  --border: rgba(2,6,23,.08);
  --header-bg: rgba(255,255,255,.7);
}
[data-theme="dark"]{
  --bg:#0b1220;
  --bg-gradient: linear-gradient(180deg,#0b1220 0%, #0b1220 40%, #0a1428 100%);
  --card:#0f182a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --shadow:0 12px 30px rgba(0,0,0,.25);
  --border: rgba(148,163,184,.12);
  --header-bg: rgba(11,18,32,.7);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color:var(--text); background: var(--bg-gradient);
  line-height:1.6;
  opacity:0; transition:opacity .35s ease;
  min-height:100vh; display:flex; flex-direction:column;
}
body.page-loaded{opacity:1}
body.page-exit{opacity:0}
img{max-width:100%; height:auto; display:block}
.container{width:min(1120px, 92%); margin:0 auto}

/* 顶部条（浅色优化 + 深色覆盖） */
.topbar{background:rgba(16,185,129,.1); color:#0f766e; font-size:14px}
[data-theme="dark"] .topbar{color:#c7f9ec}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0}
.topbar .wechat{display:flex; align-items:center; gap:10px}
.badge{display:inline-flex; align-items:center; gap:6px; background:rgba(14,165,233,.12); color:#0e7490; border:1px solid rgba(14,165,233,.25); padding:4px 10px; border-radius:999px}
[data-theme="dark"] .badge{background:rgba(34,211,238,.12); color:#a5f3fc; border-color:rgba(34,211,238,.25)}
.copy-btn{background:var(--success); color:#062b16; border:none; padding:6px 12px; border-radius:999px; cursor:pointer; font-weight:600}
.copy-btn:hover{filter:brightness(1.05)}

/* 导航 */
.header{position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background:var(--header-bg); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand img{width:120px}
.nav ul{list-style:none; display:flex; gap:20px; margin:0; padding:0}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; padding:8px 12px; border-radius:10px; transition:.2s}
.nav a:hover, .nav a.active{color:var(--text); background:rgba(14,165,233,.13)}
[data-theme="dark"] .nav a:hover, [data-theme="dark"] .nav a.active{color:#fff; background:rgba(34,211,238,.12)}
.burger{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text)}

/* 移动导航 */
@media (max-width: 820px){
  .nav ul{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
  .nav.open ul{display:flex; position:absolute; left:4%; right:4%; top:70px; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px}
}

/* 按钮 */
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700; cursor:pointer; border:1px solid transparent; transition:.2s}
.btn.primary{background:linear-gradient(90deg,var(--primary), var(--primary-2)); color:#062b16}
.btn.primary:hover{transform:translateY(-1px)}
.btn.secondary{background:transparent; border-color:var(--border); color:var(--text)}
.btn.secondary:hover{background:rgba(14,165,233,.10)}

/* Hero */
.hero{padding:64px 0 32px; position:relative; overflow:hidden}
.hero .grid{display:grid; grid-template-columns: 1.2fr 1fr; gap:32px; align-items:center}
.hero h1{font-size:44px; line-height:1.2; margin:0 0 12px}
.hero p{color:var(--muted); font-size:18px; margin:0 0 16px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .pill{display:inline-flex; gap:8px; align-items:center; background:rgba(245,158,11,.12); color:#92400e; border:1px solid rgba(245,158,11,.25); padding:6px 12px; border-radius:999px; font-weight:700}
[data-theme="dark"] .hero .pill{color:#fde68a}
.shape{position:absolute; right:-140px; top:-120px; width:420px; height:420px; background:radial-gradient(50% 50% at 50% 50%, rgba(34,211,238,.2) 0%, rgba(14,165,233,.06) 40%, rgba(14,165,233,0) 70%); filter:blur(2px)}

@media (max-width: 820px){
  .hero .grid{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}

/* 卡片与板块 */
.section{padding:36px 0}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid-3{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.card h3{margin:0 0 6px}
.muted{color:var(--muted)}

/* 流程时间线 */
.timeline{display:grid; gap:14px}
.step{display:grid; grid-template-columns: 40px 1fr; gap:14px; align-items:flex-start}
.step .dot{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--primary-2)); display:grid; place-items:center; font-weight:800; color:#062b16}
.step .body{padding:8px 12px; background:rgba(148,163,184,.08); border-radius:12px}

/* FAQ */
.faq{display:grid; gap:12px}
.faq-item{background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.faq-q{width:100%; text-align:left; padding:14px 16px; background:transparent; color:var(--text); border:none; font-weight:700; display:flex; align-items:center; justify-content:space-between}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 16px}
.faq-item.open .faq-a{max-height:240px; padding:0 16px 14px}

/* 表单 */
.form{display:grid; gap:12px}
.input{background:var(--card); border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:12px; width:100%}
.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.field{display:grid; gap:6px}
.error{color:#fecaca; font-size:13px; display:none}
.field.invalid .error{display:block}

/* 浮动聊天窗 */
.chat-fab{position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#22c55e,#16a34a); color:#062b16; border:none; box-shadow:var(--shadow); cursor:pointer; z-index:60}
.chat-panel{position:fixed; right:20px; bottom:90px; width:320px; max-width:92vw; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); display:none; z-index:60}
.chat-panel.open{display:block}
.chat-header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border)}
.chat-body{max-height:280px; overflow:auto; padding:12px; display:grid; gap:8px}
.msg{display:inline-block; padding:10px 12px; border-radius:12px; max-width:80%}
.msg.user{background:#1f2a44; justify-self:end}
.msg.bot{background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25)}
.chat-input{display:flex; gap:8px; padding:10px; border-top:1px solid var(--border)}
.chat-input input{flex:1}

/* 返回顶部 */
.to-top{position:fixed; right:20px; bottom:90px; transform:translateY(70px); opacity:0; transition:.2s; z-index:40}
.to-top.show{transform:translateY(0); opacity:1}

/* 页脚 */
.footer{border-top:1px solid var(--border); padding:22px 0 40px; color:var(--muted)}
.footer .grid{display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:center}
@media (max-width: 700px){ .footer .grid{grid-template-columns:1fr} }

/* 进场 Reveal */
.reveal{opacity:0; transform:translateY(14px); transition: all .4s ease}
.reveal.in-view{opacity:1; transform:none}

/* 提示 Toast */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:rgba(34,197,94,.10); color:#166534; border:1px solid rgba(34,197,94,.22); padding:10px 16px; border-radius:12px; display:none; z-index:70}
[data-theme="dark"] .toast{background:rgba(34,197,94,.12); color:#bbf7d0; border-color:rgba(34,197,94,.25)}
.toast.show{display:block}
/* 页面主体占满剩余高度，确保页脚贴底 */
.page{flex:1}
/* 细文字在浅色下默认更柔和 */
small{color:var(--muted)}
/* 文本语义色彩工具类 */
.text-muted{color:var(--muted)}
.text-primary{color:var(--primary)}
.text-accent{color:var(--accent)}
.text-strong{color:var(--text); font-weight:700}
/* 表单 */
.form{display:grid; gap:12px}
.input{background:var(--card); border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:12px; width:100%}
.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.field{display:grid; gap:6px}
.error{color:#fecaca; font-size:13px; display:none}
.field.invalid .error{display:block}

/* 浮动聊天窗 */
.chat-fab{position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#22c55e,#16a34a); color:#062b16; border:none; box-shadow:var(--shadow); cursor:pointer; z-index:60}
.chat-panel{position:fixed; right:20px; bottom:90px; width:320px; max-width:92vw; background:var(--card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); display:none; z-index:60}
.chat-panel.open{display:block}
.chat-header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border)}
.chat-body{max-height:280px; overflow:auto; padding:12px; display:grid; gap:8px}
.msg{display:inline-block; padding:10px 12px; border-radius:12px; max-width:80%}
.msg.user{background:#e8eefc; justify-self:end; color:var(--text)}
.msg.bot{background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.22); color:var(--text)}
[data-theme="dark"] .msg.user{background:#1f2a44; color:#e5e7eb}
[data-theme="dark"] .msg.bot{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.25); color:#bbf7d0}
.chat-input{display:flex; gap:8px; padding:10px; border-top:1px solid var(--border)}
.chat-input input{flex:1}

/* 返回顶部 */
.to-top{position:fixed; right:20px; bottom:90px; transform:translateY(70px); opacity:0; transition:.2s; z-index:40}
.to-top.show{transform:translateY(0); opacity:1}

/* 页脚 */
.footer{border-top:1px solid var(--border); padding:22px 0 40px; color:var(--muted)}
.footer .grid{display:grid; grid-template-columns: 1fr auto; gap:20px; align-items:center}
@media (max-width: 700px){ .footer .grid{grid-template-columns:1fr} }

/* 进场 Reveal */
.reveal{opacity:0; transform:translateY(14px); transition: all .4s ease}
.reveal.in-view{opacity:1; transform:none}

/* 提示 Toast */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:rgba(34,197,94,.10); color:#166534; border:1px solid rgba(34,197,94,.22); padding:10px 16px; border-radius:12px; display:none; z-index:70}
[data-theme="dark"] .toast{background:rgba(34,197,94,.12); color:#bbf7d0; border-color:rgba(34,197,94,.25)}
.toast.show{display:block}
/* 页面主体占满剩余高度，确保页脚贴底 */
.page{flex:1}
/* 细文字在浅色下默认更柔和 */
small{color:var(--muted)}
/* 文本语义色彩工具类 */
.text-muted{color:var(--muted)}
.text-primary{color:var(--primary)}
.text-accent{color:var(--accent)}
.text-strong{color:var(--text); font-weight:700}
a, p, button, label, li{color:var(--text)}
a:not(.btn){color:var(--primary); text-decoration:none}
a:not(.btn):hover{text-decoration:underline}