/* ─────────────────────────────────────────────────────────────────────
   cf-artigo.css — sistema de design dos guias da Canton Fair
   amoembarque.com · extraido em 29/07/2026

   Origem: o <style> embutido de /corporativo/canton-fair/guia-canton-fair.html,
   acrescido dos blocos de grade de setor, linha do tempo e leituras
   relacionadas que so existiam em fases-canton-fair-outubro-2026.html.

   As tres paginas legadas (guia, fases, tecnologias) CONTINUAM com o CSS
   embutido de proposito: estao indexadas e performando, e converter nao traz
   retorno. Esta folha existe para as paginas NOVAS da familia nascerem no
   sistema certo em vez de reinventarem um. Ver build/padroes.json,
   familia "canton-fair-artigo".

   Nao editar sem rodar 'python3 build/consistencia.py' depois.
   ───────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url(/assets/fonts/pjs-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url(/assets/fonts/pjs-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url(/assets/fonts/pjs-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url(/assets/fonts/pjs-latin-ext-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url(/assets/fonts/fraunces-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url(/assets/fonts/fraunces-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url(/assets/fonts/fraunces-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 100 900;
  font-display: swap; src: url(/assets/fonts/fraunces-latin-ext-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --g:#7DFF00;--g2:#6fa02e;--g-glow:rgba(125,255,0,.18);
  --bg:#080B08;--card:#0f130f;--b:rgba(125,255,0,.12);--bs:rgba(125,255,0,.35);
  --white:#F4F7EE;--wd:rgba(244,247,238,.72);--wdd:rgba(244,247,238,.58);
  --ff-h:'Fraunces',Georgia,serif;--ff-s:'Plus Jakarta Sans',sans-serif;
  --t:.28s;--ease:cubic-bezier(.23,1,.32,1);
  --max:720px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-s);background:var(--bg);color:var(--white);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:var(--g);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
strong{color:var(--white);font-weight:600;}

/* ── NAV ── */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,11,8,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--b);
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-logo img{width:32px;height:32px;border-radius:6px;object-fit:cover;}
.nav-logo span{font-size:13px;font-weight:700;color:var(--white);letter-spacing:-.01em;}
.nav-back{
  font-size:12px;color:var(--wd);display:flex;align-items:center;gap:6px;
  text-decoration:none;transition:color var(--t);
}
.nav-back:hover{color:var(--g);text-decoration:none;}
.nav-cta{
  background:var(--g);color:#0a0f0a;font-size:12px;font-weight:700;
  padding:8px 16px;border-radius:30px;text-decoration:none;
  white-space:nowrap;transition:background var(--t);
}
.nav-cta:hover{background:var(--g2);text-decoration:none;}

/* ── HERO ── */
.article-hero{
  padding:64px 24px 48px;
  max-width:calc(var(--max) + 48px);
  margin:0 auto;
}
.breadcrumb{
  display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--wdd);margin-bottom:24px;letter-spacing:.04em;
}
.breadcrumb a{color:var(--wdd);transition:color var(--t);}
.breadcrumb a:hover{color:var(--g);text-decoration:none;}
.breadcrumb span{color:var(--wdd);}
.art-label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g);margin-bottom:16px;
}
.art-label::before{content:'';width:24px;height:1.5px;background:var(--g);}
h1.art-h1{
  font-family:var(--ff-h);font-size:clamp(28px,5vw,46px);
  font-weight:900;line-height:1.1;color:var(--white);
  letter-spacing:-.02em;margin-bottom:20px;
}
h1.art-h1 em{color:var(--g);font-style:italic;}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  font-size:12px;color:var(--wdd);border-top:1px solid var(--b);
  padding-top:16px;margin-top:16px;
}
.art-meta-author{display:flex;align-items:center;gap:8px;}
.art-meta-author img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid var(--bs);}
.art-meta strong{color:var(--wd);}
.art-reading{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--card);border:1px solid var(--b);
  padding:4px 10px;border-radius:20px;font-size:11px;color:var(--wdd);
}

/* ── HERO IMAGE ── */
.art-hero-img{
  width:100%;max-width:calc(var(--max) + 48px);
  margin:0 auto 0;
  border-radius:16px;overflow:hidden;
  border:1px solid var(--b);
  aspect-ratio:16/7;
}
.art-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center top;}

/* ── ARTICLE BODY ── */
.art-body{
  max-width:var(--max);margin:0 auto;
  padding:0 24px 80px;
}

/* Table of contents */
.toc{
  background:var(--card);border:1px solid var(--b);border-radius:14px;
  padding:20px 24px;margin:40px 0;
}
.toc-title{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wdd);margin-bottom:12px;}
.toc ol{padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.toc li{font-size:14px;}
.toc a{color:var(--wd);transition:color var(--t);}
.toc a:hover{color:var(--g);text-decoration:none;}

/* Sections */
.art-section{margin-top:56px;}
h2.art-h2{
  font-family:var(--ff-h);font-size:clamp(22px,3.5vw,30px);
  font-weight:800;color:var(--white);letter-spacing:-.01em;
  margin-bottom:16px;line-height:1.2;
}
h2.art-h2 em{color:var(--g);font-style:italic;}
h3.art-h3{
  font-family:var(--ff-s);font-size:17px;font-weight:700;
  color:var(--white);margin:28px 0 10px;
}
p.art-p{font-size:15px;color:var(--wd);line-height:1.78;margin-bottom:16px;}
p.art-p:last-child{margin-bottom:0;}

/* Callout boxes */
.callout{
  border-radius:12px;padding:18px 20px;margin:24px 0;
  display:flex;gap:14px;align-items:flex-start;
}
.callout.green{background:rgba(125,255,0,.08);border:1px solid rgba(125,255,0,.25);}
.callout.amber{background:rgba(251,188,5,.07);border:1px solid rgba(251,188,5,.22);}
.callout.blue{background:rgba(66,133,244,.07);border:1px solid rgba(66,133,244,.2);}
.callout-ico{font-size:18px;flex-shrink:0;line-height:1;}
.callout-text{font-size:14px;color:var(--wd);line-height:1.65;}
.callout-text strong{color:var(--white);}

/* Phase cards */
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0;}
.phase-card{
  background:var(--card);border:1px solid var(--b);border-radius:12px;
  padding:16px;transition:border-color var(--t);
}
.phase-card:hover{border-color:var(--bs);}
.phase-num{font-size:11px;font-weight:700;color:var(--g);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.phase-name{font-size:14px;font-weight:700;color:var(--white);margin-bottom:6px;line-height:1.3;}
.phase-date{font-size:12px;color:var(--wdd);margin-bottom:8px;}
.phase-tags{display:flex;flex-wrap:wrap;gap:4px;}
.phase-tag{font-size:10px;background:rgba(125,255,0,.1);border:1px solid rgba(125,255,0,.2);color:var(--g);padding:2px 7px;border-radius:20px;}

/* Checklist */
.checklist{list-style:none;display:flex;flex-direction:column;gap:10px;margin:20px 0;}
.checklist li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:14px;color:var(--wd);line-height:1.55;
}
.checklist li::before{
  content:'✓';color:var(--g);font-weight:700;font-size:13px;
  flex-shrink:0;margin-top:1px;
}
.checklist li strong{color:var(--white);}

/* Comparison table */
.comp-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:13px;}
.comp-table th{
  background:rgba(125,255,0,.1);color:var(--g);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:10px 14px;text-align:left;border-bottom:1px solid var(--b);
}
.comp-table td{
  padding:12px 14px;border-bottom:1px solid var(--b);color:var(--wd);
  vertical-align:top;line-height:1.5;
}
.comp-table tr:last-child td{border-bottom:none;}
.comp-table td:first-child{color:var(--white);font-weight:600;}
.comp-table .good{color:var(--g);}
.comp-table .bad{color:#e55;}

/* Quote / depoimento */
.art-quote{
  border-left:3px solid var(--g);padding:16px 20px;
  margin:28px 0;background:var(--card);border-radius:0 10px 10px 0;
}
.art-quote p{font-family:var(--ff-h);font-size:16px;color:var(--white);font-style:italic;line-height:1.6;margin-bottom:8px;}
.art-quote cite{font-size:12px;color:var(--wdd);}

/* Sticky CTA */
.art-cta-box{
  background:linear-gradient(135deg,rgba(125,255,0,.12) 0%,rgba(8,11,8,0) 100%);
  border:1px solid var(--bs);border-radius:16px;
  padding:28px 28px;margin:48px 0;text-align:center;
}
.art-cta-box h3{
  font-family:var(--ff-h);font-size:22px;font-weight:800;color:var(--white);
  margin-bottom:8px;
}
.art-cta-box h3 em{color:var(--g);font-style:italic;}
.art-cta-box p{font-size:14px;color:var(--wd);margin-bottom:20px;}
.cta-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.btn-primary{
  background:var(--g);color:#080B08;font-size:14px;font-weight:700;
  padding:13px 24px;border-radius:30px;text-decoration:none;
  transition:background var(--t);
}
.btn-primary:hover{background:var(--g2);text-decoration:none;}
.btn-secondary{
  background:transparent;color:var(--white);font-size:14px;font-weight:600;
  padding:12px 22px;border-radius:30px;border:1px solid rgba(244,247,238,.2);
  text-decoration:none;transition:border-color var(--t);
}
.btn-secondary:hover{border-color:var(--bs);text-decoration:none;}

/* Divider */
.art-divider{height:1px;background:var(--b);margin:40px 0;}

/* Info pills */
.info-pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;}
.info-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--b);
  border-radius:30px;padding:6px 14px;font-size:12px;color:var(--wd);
}
.info-pill span{color:var(--g);font-weight:700;}

/* Author box */
.author-box{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--card);border:1px solid var(--b);border-radius:14px;
  padding:20px;margin:48px 0;
}
.author-box img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--bs);}
.author-info h4{font-size:14px;font-weight:700;color:var(--white);margin-bottom:2px;}
.author-info p{font-size:12px;color:var(--wd);line-height:1.55;}

/* Footer */
.art-footer{
  background:rgba(13,18,13,.9);border-top:1px solid var(--b);
  padding:32px 24px;text-align:center;
}
.art-footer p{font-size:12px;color:var(--wdd);}
.art-footer a{color:var(--g);text-decoration:underline;text-underline-offset:2px;}

@media(max-width:640px){
  .phase-grid{grid-template-columns:1fr;}
  .art-meta{gap:10px;}
  .nav-back span{display:none;}
  .author-box{flex-direction:column;}
}
/* FAQ */
.faq-item{border:1px solid var(--b);border-radius:12px;margin-bottom:8px;overflow:hidden;cursor:pointer;transition:border-color var(--t);}
.faq-item:hover,.faq-item.open{border-color:var(--bs);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;font-size:14px;font-weight:600;color:var(--white);user-select:none;}
.faq-ico{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--bs);color:var(--g);font-size:14px;transition:transform var(--t);}
.faq-item.open .faq-ico{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.23,1,.32,1);}
.faq-item.open .faq-a{max-height:260px;}
.faq-a p{font-size:13px;color:var(--wd);line-height:1.65;padding:0 18px 16px;border-top:1px solid var(--b);padding-top:12px;}


/* ── vindos de fases-canton-fair-outubro-2026.html ── */

/* Sector grid */
.sector-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0;}
.sector-card{background:var(--card);border:1px solid var(--b);border-radius:12px;padding:14px 16px;transition:border-color var(--t);}
.sector-card:hover{border-color:var(--bs);}
.sector-card h4{font-size:13px;font-weight:700;color:var(--white);margin-bottom:4px;}
.sector-card p{font-size:12px;color:var(--wd);line-height:1.55;}
.sector-icon{font-size:18px;margin-bottom:6px;}

/* Timeline */
.timeline{position:relative;margin:24px 0;}
.tl-item{display:flex;gap:16px;margin-bottom:20px;position:relative;}
.tl-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;margin-top:2px;}
.tl-dot.f1{background:rgba(66,133,244,.15);color:#82B0F7;border:1px solid rgba(66,133,244,.3);}
.tl-dot.f2{background:rgba(26,107,58,.15);color:#5EC47A;border:1px solid rgba(26,107,58,.3);}
.tl-dot.f3{background:rgba(186,117,23,.15);color:#E6A840;border:1px solid rgba(186,117,23,.3);}
.tl-content h3,.tl-content h4{font-size:15px;font-weight:700;color:var(--white);margin-bottom:4px;}
.tl-content p{font-size:13px;color:var(--wd);line-height:1.6;}
.tl-date{font-size:11px;font-weight:700;letter-spacing:.04em;margin-bottom:4px;}
.tl-dot.f1 ~ .tl-content .tl-date{color:#82B0F7;}
.tl-dot.f2 ~ .tl-content .tl-date{color:#5EC47A;}
.tl-dot.f3 ~ .tl-content .tl-date{color:#E6A840;}

/* Internal links */
.internal-links{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;}
.int-link{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--b);border-radius:8px;padding:8px 14px;font-size:13px;color:var(--wd);text-decoration:none;transition:border-color var(--t),color var(--t);}
.int-link:hover{border-color:var(--bs);color:var(--white);text-decoration:none;}
.int-link svg{width:12px;height:12px;flex-shrink:0;}