/* ================================================================
   Lotus Organizer Museum — Y2K Web Style (1999-2003)
   Cores oficiais Lotus + Verdana/Tahoma/Trebuchet
   ================================================================ */
:root{
  /* ── Cores ORIGINAIS do Lotus Organizer ── */
  --tab-calendar:#A13A2E;
  --tab-todo:#D9A93A;
  --tab-address:#2F6B3A;
  --tab-calls:#2C4F7C;
  --tab-planner:#C66B2D;
  --tab-notepad:#7E57C2;
  --tab-anniversary:#5B3B8A;

  --lotus-sidebar:#1F4A3A;        /* verde escuro do painel esquerdo do Lotus */
  --lotus-sidebar-dark:#163A2C;
  --lotus-titlebar:#1A3A5C;       /* azul navy do title bar */
  --lotus-paper:#FFF8D4;          /* amarelo creme das páginas */
  --lotus-paper-edge:#E8D99A;
  --lotus-granite:#5b6d80;        /* fundo granito */
  --lotus-granite-dark:#3a4860;

  /* ── Cores de 2000s Web ── */
  --tan:#D9C9A0;
  --tan-dark:#B89E70;
  --beige:#F5E8C8;
  --link:#0033CC;
  --link-visited:#660099;
  --link-hover:#FF6600;
  --text:#1A1A1A;
  --text-soft:#333333;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding:0;
  background:var(--lotus-granite);
  /* tile pattern de granito tipo "marble" anos 2000 */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.42  0 0 0 0 0.5  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  color:var(--text);
  font-family:Verdana,Geneva,Arial,sans-serif;
  font-size:11px;
  line-height:1.5;
}

/* ============================================
   CONTAINER PRINCIPAL (centered table layout)
   ============================================ */
.site{
  width:960px;max-width:100%;
  margin:14px auto;
  background:var(--beige);
  border:1px solid #444;
  box-shadow:5px 5px 0 rgba(0,0,0,.45);
}

/* ============================================
   BANNER TOPO (title bar azul + logo)
   ============================================ */
.banner{
  background:linear-gradient(180deg,#2C5688 0%,var(--lotus-titlebar) 100%);
  border-bottom:3px solid var(--lotus-sidebar);
  padding:14px 18px;
  display:flex;align-items:center;gap:16px;
  color:#fff;
}
.banner .logo{
  width:60px;height:60px;
  background:linear-gradient(180deg,#fff8d4 0%,#d8c878 100%);
  border:2px outset #b89e50;
  display:grid;place-items:center;
  font-family:'Trebuchet MS',Tahoma,Verdana,sans-serif;
  font-size:36px;font-weight:bold;color:#A13A2E;
  text-shadow:1px 1px 0 #fff;
}
.banner .title-block h1{
  font-family:'Trebuchet MS',Tahoma,Verdana,sans-serif;
  font-size:30px;font-weight:bold;
  margin:0;color:#FFF8D4;
  text-shadow:2px 2px 0 #000, 3px 3px 0 rgba(0,0,0,.3);
  letter-spacing:-1px;
}
.banner .title-block .sub{
  font-size:11px;color:#CCDDEE;margin-top:4px;
  font-family:Verdana,sans-serif;font-style:italic;
}
.banner .last-updated{
  margin-left:auto;text-align:right;
  font-family:'Courier New',monospace;font-size:10px;
  color:#FFF8D4;background:rgba(0,0,0,.3);
  padding:4px 10px;border:1px dashed #fff8d4;
}

/* ============================================
   MARQUEE (anos 2000 staple)
   ============================================ */
.marquee{
  background:var(--tab-todo);
  border-top:1px solid #fff;border-bottom:1px solid #000;
  font-family:Verdana,sans-serif;font-size:11px;font-weight:bold;
  color:#3a2a1a;padding:5px 0;overflow:hidden;
  text-shadow:1px 1px 0 rgba(255,255,255,.4);
}
.marquee span{display:inline-block;padding-left:100%;animation:scroll 30s linear infinite;white-space:nowrap}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ============================================
   TOP NAV BAR (horizontal, beveled)
   ============================================ */
.topnav{
  background:linear-gradient(180deg,#3a6a4a 0%,var(--lotus-sidebar) 100%);
  border-bottom:2px ridge #2a4a3a;
  padding:0;
  display:flex;flex-wrap:wrap;
}
.topnav a{
  flex:1;text-align:center;
  display:block;padding:8px 12px;
  font-family:Verdana,sans-serif;font-size:11px;font-weight:bold;
  color:#FFF8D4;text-decoration:none;
  border-right:1px solid #163A2C;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
  transition:background .15s;
}
.topnav a:hover{background:#A13A2E;color:#fff}
.topnav a:last-child{border-right:0;background:linear-gradient(180deg,#C66B2D 0%,#A13A2E 100%)}
.topnav a:last-child:hover{background:linear-gradient(180deg,#E07A25 0%,#C0392B 100%)}

/* ============================================
   BODY LAYOUT (2 colunas)
   ============================================ */
.body-row{display:grid;grid-template-columns:200px 1fr;gap:0}
@media (max-width:720px){.body-row{grid-template-columns:1fr}}

/* ============================================
   SIDEBAR ESQUERDA (verde Lotus)
   ============================================ */
.sidebar{
  background:var(--lotus-sidebar);
  background-image:linear-gradient(180deg,#235040 0%,var(--lotus-sidebar) 100%);
  color:#FFF8D4;
  padding:10px;
  border-right:2px ridge #163A2C;
}
.sidebox{
  background:var(--lotus-sidebar-dark);
  border:1px outset #4a6a5a;
  margin-bottom:12px;
  padding:0;
}
.sidebox h3{
  margin:0;background:linear-gradient(180deg,#A13A2E 0%,#7a2a1f 100%);
  color:#FFF8D4;font-family:'Trebuchet MS',Verdana,sans-serif;font-size:12px;
  padding:5px 8px;border-bottom:1px solid #000;
  text-transform:uppercase;letter-spacing:1px;
  text-shadow:1px 1px 0 rgba(0,0,0,.6);
}
.sidebox.green h3{background:linear-gradient(180deg,#2F6B3A 0%,#1f4a2a 100%)}
.sidebox.blue h3{background:linear-gradient(180deg,#2C4F7C 0%,#1a3a5c 100%)}
.sidebox.purple h3{background:linear-gradient(180deg,#7E57C2 0%,#5b3b8a 100%)}
.sidebox.orange h3{background:linear-gradient(180deg,#C66B2D 0%,#a14a1a 100%)}
.sidebox ul{margin:0;padding:6px 6px 6px 22px;list-style:square}
.sidebox ul li{padding:2px 0;font-size:11px}
.sidebox ul li a{color:#FFF8D4;text-decoration:none}
.sidebox ul li a:hover{color:#D9A93A;text-decoration:underline}
.sidebox .inner{padding:8px}
.sidebox .inner p{margin:4px 0;font-size:10px;color:#D9C9A0}

/* Hit counter (vintage style) */
.hitcounter{
  background:#000;color:#0F0;
  font-family:'Courier New',monospace;font-size:18px;font-weight:bold;
  padding:6px 8px;text-align:center;
  border:2px inset #444;
  letter-spacing:3px;
  text-shadow:0 0 4px #0F0;
}

/* Best viewed badge */
.bestviewed{
  font-family:Verdana,sans-serif;font-size:9px;
  color:#FFF8D4;text-align:center;padding:6px 4px;
  background:rgba(0,0,0,.3);border:1px dashed rgba(255,255,255,.3);
}

/* 88x31 banner badges */
.badges88{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:6px 0}
.badge88{
  width:88px;height:31px;
  border:1px outset #888;
  display:flex;align-items:center;justify-content:center;
  font-family:'Courier New',monospace;font-size:9px;font-weight:bold;
  text-align:center;line-height:1.1;text-decoration:none;
}
.b-ie{background:linear-gradient(180deg,#0078d4,#005a9e);color:#fff}
.b-ff{background:linear-gradient(180deg,#FF8C00,#cc6600);color:#fff}
.b-w3c{background:linear-gradient(180deg,#005A9C,#003366);color:#fff}
.b-html{background:#FFA500;color:#000}
.b-rss{background:#FF6600;color:#fff}
.b-1024{background:#000;color:#0F0}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main{
  background:var(--lotus-paper);
  padding:0;
  /* linhas horizontais sutis tipo caderno */
  background-image:repeating-linear-gradient(180deg,
    transparent 0,transparent 28px,
    rgba(180,150,80,.12) 28px,rgba(180,150,80,.12) 29px);
}

/* Cabeçalho de seção tipo "Windows 2000 group box" */
.section-head{
  background:linear-gradient(180deg,var(--tab-calendar) 0%,#7a2a1f 100%);
  color:#FFF8D4;
  padding:7px 14px;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:15px;font-weight:bold;
  border-top:1px outset #c14a3e;border-bottom:1px solid #000;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
  letter-spacing:1px;
  display:flex;align-items:center;gap:10px;
}
.section-head .ico{
  display:inline-block;width:20px;height:20px;
  background:#FFF8D4;color:var(--tab-calendar);
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:13px;font-weight:bold;
  text-align:center;line-height:20px;
  border:1px inset #888;
  text-shadow:none;
}
.sh-cal{background:linear-gradient(180deg,var(--tab-calendar) 0%,#7a2a1f 100%)}.sh-cal .ico{color:var(--tab-calendar)}
.sh-todo{background:linear-gradient(180deg,var(--tab-todo) 0%,#a87a1a 100%);color:#3a2a1a;text-shadow:none}.sh-todo .ico{color:#a87a1a}
.sh-addr{background:linear-gradient(180deg,var(--tab-address) 0%,#1f4a2a 100%)}.sh-addr .ico{color:var(--tab-address)}
.sh-calls{background:linear-gradient(180deg,var(--tab-calls) 0%,#1a3a5c 100%)}.sh-calls .ico{color:var(--tab-calls)}
.sh-plan{background:linear-gradient(180deg,var(--tab-planner) 0%,#a14a1a 100%)}.sh-plan .ico{color:var(--tab-planner)}
.sh-note{background:linear-gradient(180deg,var(--tab-notepad) 0%,#5b3b8a 100%)}.sh-note .ico{color:var(--tab-notepad)}

section{padding:18px 22px;border-bottom:1px dotted #b89e70}
section:last-child{border-bottom:0}
section h3{
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:14px;
  color:var(--tab-anniversary);margin:14px 0 6px 0;
  border-bottom:1px solid var(--tab-anniversary);padding-bottom:2px;
}
section h4{
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:12px;
  color:var(--tab-calls);margin:10px 0 4px 0;
}
section p{font-size:11px;margin:6px 0;color:var(--text);line-height:1.55}
section p strong{color:#000}
section a{color:var(--link);text-decoration:underline}
section a:visited{color:var(--link-visited)}
section a:hover{color:var(--link-hover)}

/* "Drop cap" para parágrafo de abertura */
.drop::first-letter{
  font-family:'Trebuchet MS',serif;font-size:38px;font-weight:bold;
  float:left;line-height:.85;padding:4px 6px 0 0;color:var(--tab-calendar);
}

/* ============================================
   TIMELINE table-style
   ============================================ */
.tl-table{width:100%;border-collapse:collapse;margin-top:8px}
.tl-table tr{border-bottom:1px dotted #c8b890}
.tl-table tr:nth-child(even){background:rgba(180,150,80,.07)}
.tl-table td{padding:6px 8px;vertical-align:top;font-size:11px}
.tl-table .yr{width:60px;font-family:'Trebuchet MS',Verdana,sans-serif;font-weight:bold;color:var(--tab-calendar);font-size:13px}
.tl-table .ver{width:110px;font-family:'Courier New',monospace;font-size:10px;color:var(--tab-address)}
.tl-table .ttl{font-weight:bold;color:#000}

/* ============================================
   FEATURE GRID
   ============================================ */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:10px}
.feature{
  background:#FFFCE8;
  border:2px outset #d8c878;
  padding:10px;
}
.feature .ico{font-size:20px;display:block;margin-bottom:4px}
.feature h4{margin:0 0 3px 0;color:var(--tab-anniversary);font-size:12px;border:0}
.feature p{margin:0;font-size:10.5px;color:#555}

/* ============================================
   GALERIA
   ============================================ */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:10px}
.thumb{
  background:#fff;
  padding:6px 6px 22px 6px;
  border:1px solid #888;
  box-shadow:3px 3px 0 rgba(0,0,0,.2);
  position:relative;
}
.thumb img{width:100%;display:block;background:#eee;min-height:120px}
.thumb .cap{
  position:absolute;bottom:4px;left:6px;right:6px;
  font-family:Verdana,sans-serif;font-size:9px;
  text-align:center;color:#555;
}

/* ============================================
   VÍDEOS
   ============================================ */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-top:10px}
.vidbox{
  background:var(--lotus-sidebar);
  padding:6px;border:2px outset #2a4a3a;
}
.vidbox .vf{position:relative;padding-bottom:56.25%;height:0;background:#000;border:1px solid #000}
.vidbox .vf.s{padding-bottom:177.78%;max-width:220px;margin:0 auto}
.vidbox .vf iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.vidbox .vm{padding:6px 2px 2px 2px;color:#FFF8D4}
.vidbox .vm .t{font-family:'Trebuchet MS',Verdana,sans-serif;font-size:12px;font-weight:bold;margin:0}
.vidbox .vm .c{font-family:'Courier New',monospace;font-size:10px;color:#D9A93A;margin:3px 0}
.vidbox .vm .w{color:#FFF8D4;font-size:10px;font-weight:bold;text-decoration:underline}

/* ============================================
   QUOTES
   ============================================ */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;margin-top:8px}
.quote{
  background:#FFFCE8;
  border-left:4px solid var(--tab-todo);
  border-top:1px solid #d8c878;border-right:1px solid #d8c878;border-bottom:1px solid #d8c878;
  padding:10px 12px;font-family:Georgia,serif;font-size:11.5px;font-style:italic;color:#333;
}
.quote .who{display:block;margin-top:6px;font-family:Verdana,sans-serif;font-style:normal;font-size:10px;color:#888;font-weight:bold}
.quote .who::before{content:"— "}

/* ============================================
   LINKS DIRETÓRIO
   ============================================ */
.lcluster{margin-top:10px}
.lcluster .lhead{
  background:linear-gradient(180deg,#3a5a8a 0%,var(--tab-calls) 100%);
  color:#FFF8D4;padding:4px 10px;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:11px;font-weight:bold;
  display:flex;align-items:center;gap:8px;
  border:1px outset #5a7aaa;
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
}
.lhead .pill{
  font-family:'Courier New',monospace;font-size:9px;
  background:#FFF8D4;color:var(--tab-calls);
  padding:1px 6px;border-radius:2px;
}
.lhead .pill.pt{background:#A8DDB0;color:var(--tab-address)}
.lhead .pill.es{background:#F5C8C0;color:var(--tab-calendar)}
.lhead .ct{margin-left:auto;font-family:'Courier New',monospace;font-size:10px;background:rgba(0,0,0,.2);padding:1px 6px;border-radius:2px}
.lcluster ul{
  margin:0;padding:6px 8px 6px 26px;list-style:square;
  background:#FFFCE8;border:1px solid #d8c878;border-top:0;
}
.lcluster ul li{padding:2px 0;font-size:11px}
.lcluster ul li::marker{color:var(--tab-todo)}
.lcluster ul li .note{font-size:10px;color:#888;font-style:italic}

/* ============================================
   SEÇÃO VULCAN (destaque)
   ============================================ */
.vulcan{
  background:linear-gradient(180deg,#FFFCE8 0%,#FFE8C8 100%);
  padding:0;
  border-top:3px ridge var(--tab-planner);
  border-bottom:3px ridge var(--tab-planner);
}
.vulcan-head{
  background:linear-gradient(180deg,#E07A25 0%,#C66B2D 100%);
  color:#fff;padding:10px 14px;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:18px;font-weight:bold;
  text-shadow:2px 2px 0 rgba(0,0,0,.4);
  border-bottom:2px solid #8a4a1a;
  letter-spacing:1px;
}
.vulcan-body{padding:16px 20px}
.vulcan-body h3{font-family:'Trebuchet MS',Verdana,sans-serif;font-size:18px;color:#A14A1A;border:0;margin:0 0 10px 0}
.vulcan-body h3 em{color:var(--tab-calendar);font-style:italic}
.vulcan-body p{font-size:11.5px;line-height:1.6;color:#1a1a1a}
.vulcan-body p strong{color:#000}
.vulcan-body p em{color:var(--tab-planner);font-style:normal;font-weight:bold}
.vulcan-quote{
  font-family:Georgia,serif;font-style:italic;font-size:13px;text-align:center;
  padding:10px;margin:12px 0;
  border-top:1px solid #c66b2d;border-bottom:1px solid #c66b2d;
  background:rgba(255,255,255,.4);color:#5a3a1a;
}
.vulcan-cta{
  background:linear-gradient(180deg,#FFE0B0 0%,#FFD080 100%);
  border:3px outset #C66B2D;
  padding:20px;text-align:center;margin-top:14px;
  box-shadow:4px 4px 0 rgba(0,0,0,.25);
}
.vulcan-cta .flag{
  display:inline-block;background:#A13A2E;color:#FFF8D4;
  padding:3px 12px;font-family:Verdana,sans-serif;font-size:10px;font-weight:bold;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;
  border:1px outset #c14a3e;
}
.vulcan-cta h3{
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:22px;
  color:#1a3a4a;margin:0 0 8px 0;border:0;
  text-shadow:1px 1px 0 rgba(255,255,255,.6);
}
.vulcan-cta h3 em{color:#C66B2D;font-style:italic}
.vulcan-cta p{font-size:11.5px;color:#3a3a3a;max-width:480px;margin:6px auto 14px auto}
.cta-btn{
  display:inline-block;
  background:linear-gradient(180deg,#FF9933 0%,#C66B2D 100%);
  color:#fff;text-decoration:none;
  padding:10px 26px;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:13px;font-weight:bold;
  border:2px outset #FFA050;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
  box-shadow:2px 2px 0 rgba(0,0,0,.3);
  margin:4px;
  text-transform:uppercase;letter-spacing:1px;
}
.cta-btn:hover{background:linear-gradient(180deg,#FFA050 0%,#E07A25 100%);border-style:inset}
.cta-btn.alt{background:linear-gradient(180deg,#FFF8D4 0%,#d8c878 100%);color:#A14A1A;border-color:#d8c878;text-shadow:none}

/* ============================================
   BANNER SLOTS (placeholders)
   ============================================ */
.slot{
  background:repeating-linear-gradient(45deg,#FFFCE8 0 10px,#F0E8C0 10px 20px);
  border:2px dashed #C66B2D;
  margin:12px 0;padding:14px;
  text-align:center;color:#888;
  font-family:Verdana,sans-serif;font-size:10px;
}
.slot strong{color:#C66B2D;font-size:11px;display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:1.5px}
.slot.hero{min-height:140px;display:flex;flex-direction:column;justify-content:center}

/* ============================================
   FOOTER
   ============================================ */
.footer{
  background:linear-gradient(180deg,#2a3850 0%,var(--lotus-granite-dark) 100%);
  color:#FFF8D4;
  padding:14px 18px;
  text-align:center;
  font-family:Verdana,sans-serif;font-size:10px;
  border-top:3px ridge #4a5870;
}
.footer .row{margin:4px 0}
.footer a{color:#D9A93A;text-decoration:underline}
.footer a:hover{color:#FFF;background:#A13A2E;padding:0 3px}
.footer .ringlinks{margin:8px 0;font-family:'Courier New',monospace;font-size:10px}
.footer .copyright{font-family:'Courier New',monospace;font-size:9px;color:#999;margin-top:10px;border-top:1px dashed #555;padding-top:6px}

/* ================================================================
   BANNERS VULCAN — design moderno com cores Lotus
   Cada banner ocupa ~180px de altura, full-width na coluna main
   ================================================================ */
.vb{
  display:grid;
  background:#1A3A5C;
  border:1px solid #0e1f30;
  border-radius:6px;
  overflow:hidden;
  margin:14px 0;
  box-shadow:3px 3px 0 rgba(0,0,0,.2);
  color:#FFF8D4;
  font-family:'Trebuchet MS','Tahoma',Verdana,sans-serif;
  position:relative;
  text-decoration:none;
}
.vb:hover{box-shadow:5px 5px 0 rgba(0,0,0,.3);transform:translate(-1px,-1px);transition:all .15s}
.vb .brand{
  position:absolute;top:8px;right:10px;
  font-family:'Courier New',monospace;font-size:10px;
  color:rgba(255,248,212,.6);letter-spacing:1.5px;
  text-transform:uppercase;
}
.vb .brand b{color:#FFB840}
.vb-cta{
  display:inline-block;
  background:linear-gradient(180deg,#FF9933,#C66B2D);
  color:#fff;text-decoration:none;
  padding:8px 20px;border:1px solid #8a4a1a;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:12px;font-weight:bold;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
  margin-top:10px;
  text-transform:uppercase;letter-spacing:1px;
}
.vb-cta:hover{background:linear-gradient(180deg,#FFB050,#E07A25)}

/* ──── Banner 1 · GENÉRICO + IA ──── */
.vb1{
  grid-template-columns:1.2fr 1fr;
  background:linear-gradient(135deg,#1A3A5C 0%,#2C4F7C 60%,#1F4A3A 130%);
  min-height:180px;
}
.vb1 .txt{padding:20px 24px;display:flex;flex-direction:column;justify-content:center}
.vb1 .ai-tag{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  background:linear-gradient(135deg,#FFB840,#C66B2D);
  color:#1A1A1A;font-size:10px;font-weight:bold;letter-spacing:2px;
  padding:3px 10px;border-radius:3px;text-transform:uppercase;
  margin-bottom:10px;
  box-shadow:0 2px 6px rgba(255,184,64,.4);
}
.vb1 .ai-tag::before{content:"✨";font-size:11px}
.vb1 h2{
  font-family:'Trebuchet MS',Tahoma,sans-serif;
  font-size:22px;font-weight:bold;line-height:1.1;margin:0 0 8px 0;
  color:#FFF8D4;text-shadow:1px 1px 0 rgba(0,0,0,.4);
  letter-spacing:-.5px;
}
.vb1 h2 em{color:#FFB840;font-style:italic}
.vb1 p{font-size:12px;color:#CCD9E5;margin:0 0 6px 0;line-height:1.4;font-family:Verdana,sans-serif}
.vb1 .img-wrap{
  background:#0e1f30;
  border-left:2px solid #2F6B3A;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.vb1 .img-wrap img{
  width:88%;height:88%;object-fit:cover;
  border:2px solid #4a6a8a;
  box-shadow:4px 4px 0 rgba(0,0,0,.4);
  transform:rotate(-2deg);
}
.vb1 .img-wrap::after{
  content:"AGORA COM IA";
  position:absolute;top:14px;left:-30px;
  background:#A13A2E;color:#FFF8D4;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:10px;font-weight:bold;
  padding:4px 36px;letter-spacing:2px;
  transform:rotate(-30deg);
  box-shadow:0 2px 4px rgba(0,0,0,.4);
  border-top:1px solid #c14a3e;border-bottom:1px solid #7a2a1f;
}

/* ──── Banner 2 · GOOGLE INTEGRATION ──── */
.vb2{
  grid-template-columns:1fr 1.2fr;
  background:linear-gradient(135deg,#FFF8D4 0%,#FFE8B0 100%);
  color:#1A3A5C;
  min-height:180px;
  border-color:#C66B2D;
}
.vb2 .txt{padding:18px 22px;display:flex;flex-direction:column;justify-content:center}
.vb2 .google-logos{
  display:flex;gap:8px;margin-bottom:10px;align-items:center;
}
.vb2 .glogo{
  width:32px;height:32px;border-radius:50%;
  background:#fff;border:1px solid #ddd;
  display:flex;align-items:center;justify-content:center;
  font-family:Arial,sans-serif;font-size:18px;font-weight:bold;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}
.vb2 .glogo.g1{background:linear-gradient(135deg,#4285F4,#34A853);color:#fff}
.vb2 .glogo.g2{background:linear-gradient(135deg,#EA4335,#FBBC05);color:#fff}
.vb2 .plus{font-size:18px;color:#666;font-weight:bold}
.vb2 h2{
  font-family:'Trebuchet MS',Tahoma,sans-serif;
  font-size:21px;font-weight:bold;line-height:1.1;margin:0 0 6px 0;
  color:#1A3A5C;letter-spacing:-.5px;
}
.vb2 h2 em{color:#A13A2E;font-style:normal}
.vb2 p{font-size:12px;color:#3a3a3a;margin:0 0 8px 0;line-height:1.45;font-family:Verdana,sans-serif}
.vb2 .img-wrap{
  background:#1A3A5C;
  display:flex;align-items:center;justify-content:center;padding:8px;
}
.vb2 .img-wrap img{
  width:100%;max-height:160px;object-fit:cover;
  border:2px solid #FFB840;
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
}

/* ──── Banner 3 · TUDO EM UM ──── */
.vb3{
  grid-template-columns:1fr 1fr;
  background:linear-gradient(90deg,#1A3A5C 0%,#1A3A5C 50%,#FFF8D4 50%,#FFF8D4 100%);
  min-height:200px;
}
.vb3 .left{
  padding:20px 24px;display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,#1A3A5C,#2C4F7C);
  position:relative;
}
.vb3 .left::after{
  content:"";position:absolute;right:0;top:0;bottom:0;width:30px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.3));
}
.vb3 .left .kicker{
  font-family:'Courier New',monospace;font-size:9px;
  color:#FFB840;letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;
}
.vb3 .left h2{
  font-family:'Trebuchet MS',Tahoma,sans-serif;
  font-size:32px;font-weight:bold;line-height:.95;margin:0;
  color:#FFF8D4;text-shadow:2px 2px 0 rgba(0,0,0,.4);
  letter-spacing:-1px;
}
.vb3 .left h2 em{color:#FFB840;display:block;font-style:italic;font-size:24px;margin-top:4px}
.vb3 .left p{font-size:11px;color:#CCD9E5;margin:10px 0 0 0;line-height:1.4;font-family:Verdana,sans-serif}
.vb3 .right{
  padding:18px 22px;color:#1A1A1A;
  display:flex;flex-direction:column;justify-content:center;
}
.vb3 .right .head{
  font-family:'Trebuchet MS',Tahoma,sans-serif;font-size:12px;font-weight:bold;
  color:#A13A2E;text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;
}
.vb3 .right ul{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;
}
.vb3 .right li{
  font-family:Verdana,sans-serif;font-size:11.5px;color:#1A1A1A;
  padding-left:18px;position:relative;line-height:1.5;
}
.vb3 .right li::before{
  content:"";position:absolute;left:0;top:7px;
  width:10px;height:10px;border-radius:2px;
}
.vb3 .right li:nth-child(1)::before{background:#A13A2E}
.vb3 .right li:nth-child(2)::before{background:#D9A93A}
.vb3 .right li:nth-child(3)::before{background:#2F6B3A}
.vb3 .right li:nth-child(4)::before{background:#2C4F7C}
.vb3 .right li:nth-child(5)::before{background:#C66B2D}
.vb3 .right li:nth-child(6)::before{background:#7E57C2}
.vb3 .right li b{font-weight:bold}
.vb3 .right li span{display:block;font-size:9.5px;color:#666;margin-top:1px}

/* ──── Banner 4 · VISÕES (Dia · Semana · Mês) ──── */
.vb4{
  grid-template-columns:1fr;
  background:linear-gradient(135deg,#D9A93A 0%,#C66B2D 100%);
  color:#3a2a1a;
  min-height:200px;
  padding:18px 20px;
}
.vb4 .top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.vb4 .top h2{
  font-family:'Trebuchet MS',Tahoma,sans-serif;
  font-size:22px;font-weight:bold;margin:0;color:#1A1A1A;
  text-shadow:1px 1px 0 rgba(255,255,255,.3);
  letter-spacing:-.5px;
}
.vb4 .top h2 em{color:#A13A2E;font-style:normal;font-weight:bold}
.vb4 .top p{font-size:11px;color:#3a2a1a;margin:2px 0 0 0;font-family:Verdana,sans-serif}
.vb4 .views{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.vb4 .view{
  background:rgba(255,248,212,.95);
  border:1px solid #8a4a1a;border-radius:3px;
  padding:6px;text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,.2);
}
.vb4 .view .label{
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:10px;font-weight:bold;
  color:#A13A2E;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:3px;
}
.vb4 .view img{width:100%;height:55px;object-fit:cover;display:block;border:1px solid #8a6a1a}
.vb4 .view.summary{background:linear-gradient(180deg,#2F6B3A,#1f4a2a);color:#FFF8D4;border-color:#1f4a2a}
.vb4 .view.summary .label{color:#FFF8D4}
.vb4 .view.summary .imgph{
  height:55px;display:flex;align-items:center;justify-content:center;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:9px;color:#FFF8D4;
  background:rgba(0,0,0,.2);border:1px dashed rgba(255,248,212,.4);
}

/* ──── Banner 5 · TEMAS & STAMPS ──── */
.vb5{
  grid-template-columns:1.2fr 1fr;
  background:#FFF8D4;
  min-height:200px;
  border-color:#7E57C2;
  position:relative;
}
.vb5::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,
    #A13A2E 0%,#A13A2E 14.28%,
    #D9A93A 14.28%,#D9A93A 28.56%,
    #2F6B3A 28.56%,#2F6B3A 42.84%,
    #2C4F7C 42.84%,#2C4F7C 57.12%,
    #C66B2D 57.12%,#C66B2D 71.40%,
    #7E57C2 71.40%,#7E57C2 85.68%,
    #5B3B8A 85.68%,#5B3B8A 100%);
}
.vb5 .txt{padding:20px 22px 18px 22px;display:flex;flex-direction:column;justify-content:center;color:#1A1A1A}
.vb5 .kicker{
  font-family:'Courier New',monospace;font-size:9px;color:#7E57C2;
  letter-spacing:3px;text-transform:uppercase;margin-bottom:6px;
}
.vb5 h2{
  font-family:'Trebuchet MS',Tahoma,sans-serif;
  font-size:22px;font-weight:bold;line-height:1.1;margin:0 0 6px 0;
  color:#1A1A1A;letter-spacing:-.5px;
}
.vb5 h2 em{color:#7E57C2;font-style:italic}
.vb5 p{font-size:11.5px;color:#3a3a3a;margin:0 0 12px 0;font-family:Verdana,sans-serif;line-height:1.45}
.vb5 .stats{
  display:flex;gap:10px;margin-bottom:8px;
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:10px;color:#5B3B8A;font-weight:bold;
}
.vb5 .stats span{background:rgba(126,87,194,.12);padding:3px 8px;border:1px solid rgba(126,87,194,.3);border-radius:3px}
.vb5 .right{
  background:linear-gradient(135deg,#2C1654 0%,#5B3B8A 100%);
  padding:18px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;
  position:relative;
}
/* Stamps row */
.vb5 .stamps{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:200px}
.vb5 .stamp{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;background:#FFF8D4;color:#1A1A1A;
  border:2px solid #FFB840;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
  transform:rotate(var(--r,0deg));
}
.vb5 .stamp:nth-child(1){--r:-8deg;background:#FFE0E0}
.vb5 .stamp:nth-child(2){--r:5deg;background:#FFF0C0}
.vb5 .stamp:nth-child(3){--r:-3deg;background:#D0F0D8}
.vb5 .stamp:nth-child(4){--r:7deg;background:#D0E0F0}
.vb5 .stamp:nth-child(5){--r:-5deg;background:#FFD8B0}
.vb5 .stamp:nth-child(6){--r:4deg;background:#E0D0F0}
.vb5 .stamp:nth-child(7){--r:-6deg;background:#FFE8E0}
.vb5 .stamp:nth-child(8){--r:3deg;background:#FFF8D4}
/* Themes row */
.vb5 .themes{display:flex;gap:4px}
.vb5 .theme{
  width:20px;height:30px;border-radius:2px;
  border:1px solid rgba(0,0,0,.3);
  box-shadow:0 2px 3px rgba(0,0,0,.3);
}

/* ──── Banner sidebar (hero — vertical) ──── */
.vb-side{
  background:linear-gradient(180deg,#1A3A5C 0%,#0e1f30 100%);
  border:1px solid #0e1f30;
  border-radius:4px;
  padding:14px 12px;
  color:#FFF8D4;
  text-align:center;
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
  text-decoration:none;
  display:block;
}
.vb-side .ai-tag{
  display:inline-block;
  background:linear-gradient(135deg,#FFB840,#C66B2D);
  color:#1A1A1A;font-size:9px;font-weight:bold;letter-spacing:1.5px;
  padding:2px 8px;border-radius:2px;text-transform:uppercase;
  margin-bottom:8px;
}
.vb-side h4{
  font-family:'Trebuchet MS',Verdana,sans-serif;font-size:14px;font-weight:bold;
  color:#FFF8D4;margin:0 0 6px 0;line-height:1.1;
  text-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.vb-side h4 em{color:#FFB840;font-style:italic;display:block;font-size:12px;margin-top:2px}
.vb-side p{font-size:10px;color:#CCD9E5;margin:4px 0 8px 0;line-height:1.4;font-family:Verdana,sans-serif}
.vb-side img{
  width:100%;border:1px solid #4a6a8a;
  box-shadow:2px 2px 0 rgba(0,0,0,.4);
  margin:6px 0;
}
.vb-side .vb-cta{padding:6px 14px;font-size:10px;margin-top:6px}
.vb-side .brand-small{
  font-family:'Courier New',monospace;font-size:9px;
  color:#FFB840;letter-spacing:1.5px;margin-top:8px;
  border-top:1px dashed rgba(255,184,64,.3);padding-top:6px;
}

@media (max-width:720px){
  .vb1,.vb2,.vb3,.vb5{grid-template-columns:1fr}
  .vb3{background:linear-gradient(180deg,#1A3A5C 0%,#1A3A5C 50%,#FFF8D4 50%,#FFF8D4 100%)}
  .vb4 .views{grid-template-columns:repeat(2,1fr)}
}

/* ================================================================
   NAV BAR REFINADA (sticky, sem colchetes, mais sóbria)
   ================================================================ */
.topnav{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#235040 0%,var(--lotus-sidebar) 100%);
  border-top:2px solid #FFB840;
  border-bottom:2px solid #0e1f30;
  padding:0;
  display:flex;flex-wrap:wrap;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.topnav a{
  flex:1;text-align:center;
  display:block;padding:11px 12px;
  font-family:'Trebuchet MS','Tahoma',Verdana,sans-serif;
  font-size:12px;font-weight:bold;
  color:#FFF8D4;text-decoration:none;
  border-right:1px solid rgba(0,0,0,.3);
  border-left:1px solid rgba(255,255,255,.06);
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
  letter-spacing:.5px;
  text-transform:uppercase;
  transition:background .12s,color .12s;
  position:relative;
}
.topnav a:first-child{border-left:0}
.topnav a:last-child{border-right:0}
.topnav a:hover{
  background:rgba(255,184,64,.18);
  color:#FFB840;
}
.topnav a.cta{
  background:linear-gradient(180deg,#C66B2D 0%,#A14A1A 100%);
  color:#FFF8D4;
  border-left:2px solid #FFB840;
}
.topnav a.cta:hover{
  background:linear-gradient(180deg,#E07A25 0%,#C66B2D 100%);
  color:#fff;
}