@page { size: A4; margin: 0; background-color: #f8fafc; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #f8fafc; color: #1e293b; line-height: 1.5; font-size: 10pt; }
.page-container { padding: 10mm 15mm 12mm 15mm; }
.top-nav { width: 100%; margin-bottom: 12px; }
.top-nav-table { width: 100%; border-collapse: collapse; }
.brand-logo { font-size: 11pt; font-weight: 800; color: #0f172a; letter-spacing: 0.5px; }
.brand-logo span { color: #0284c7; }
.login-link-cell { text-align: right; }
.login-btn { display: inline-block; border: 1px solid #0284c7; color: #0284c7; background-color: #ffffff; font-size: 8.5pt; font-weight: 700; padding: 5px 14px; border-radius: 6px; text-decoration: none; }
.hero { background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 15px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.brand-badge { display: inline-block; background-color: #e0f2fe; color: #0369a1; font-size: 8pt; font-weight: bold; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; border: 1px solid #bae6fd; }
h1 { font-size: 18pt; color: #0f172a; line-height: 1.2; margin-bottom: 10px; font-weight: 800; }
h1 span { color: #0284c7; }
.subtitle { font-size: 10pt; color: #475569; max-width: 90%; margin: 0 auto 15px auto; }
.cta-button { display: inline-block; background-color: #0284c7; color: #ffffff; font-weight: bold; font-size: 9.5pt; padding: 10px 22px; border-radius: 6px; text-decoration: none; box-shadow: 0 4px 10px rgba(2,132,199,0.25); }
.tech-bar { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px 15px; margin-bottom: 15px; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.tech-title { font-size: 8pt; text-transform: uppercase; color: #64748b; letter-spacing: 0.8px; margin-bottom: 6px; font-weight: 700; }
.tech-tags { display: block; text-align: center; }
.tag { display: inline-block; background-color: #f1f5f9; color: #0369a1; border: 1px solid #cbd5e1; font-size: 8pt; font-weight: 600; padding: 3px 8px; border-radius: 4px; margin: 2px 4px; }
.tag-inpi { background-color: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.section-header { margin-bottom: 12px; border-left: 4px solid #0284c7; padding-left: 10px; }
.section-header h2 { font-size: 13pt; color: #0f172a; font-weight: 700; }
.section-header p { font-size: 8.5pt; color: #64748b; }
.modules-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; background-color: #ffffff; border-radius: 6px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.modules-table th { background-color: #f1f5f9; color: #0f172a; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; }
.modules-table td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-size: 8.5pt; vertical-align: top; }
.modules-table tr:last-child td { border-bottom: none; }
.module-num { color: #0284c7; font-weight: bold; font-size: 9pt; width: 8%; }
.module-name { color: #0f172a; font-weight: bold; width: 32%; }
.module-desc { color: #475569; width: 60%; }

/* ─── Tabela de tópicos MQTT ─── */
.topics-table td:first-child { width: 38%; }
.topics-table td:nth-child(2) { width: 20%; }
.topics-table td:last-child { width: 42%; }
.topics-table code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-size: 8pt; color: #0369a1; white-space: nowrap; }
.grid-table { width: 100%; border-collapse: separate; border-spacing: 10px; margin-left: -10px; margin-right: -10px; margin-bottom: 10px; }
.grid-card { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 10px 12px; vertical-align: top; width: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.card-title { color: #0369a1; font-size: 9pt; font-weight: bold; margin-bottom: 4px; }
.card-desc { color: #64748b; font-size: 8pt; }
.conversion-container { background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%); border: 1px solid #0284c7; border-radius: 8px; padding: 15px 20px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(2,132,199,0.08); }
.form-table { width: 100%; border-collapse: collapse; }
.form-info { width: 50%; padding-right: 15px; vertical-align: middle; }
.form-info h3 { color: #0f172a; font-size: 11.5pt; margin-bottom: 6px; font-weight: 700; }
.form-info p { color: #475569; font-size: 8.5pt; }
.form-box { width: 50%; background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 12px; }
.form-field { margin-bottom: 8px; }
.form-label { display: block; font-size: 7.5pt; color: #475569; margin-bottom: 3px; text-transform: uppercase; font-weight: 600; }
.form-input { width: 100%; background-color: #f8fafc; border: 1px solid #cbd5e1; border-radius: 4px; padding: 5px 8px; color: #0f172a; font-size: 8.5pt; }
.submit-btn { width: 100%; background-color: #0284c7; color: #ffffff; border: none; border-radius: 4px; padding: 8px; font-weight: bold; font-size: 8.5pt; text-align: center; margin-top: 5px; }
.landing-footer { border-top: 1px solid #e2e8f0; padding-top: 10px; text-align: center; font-size: 7.5pt; color: #64748b; }
.landing-footer .footer-highlight { color: #047857; font-weight: 600; }

/* ─── Imagem de destaque (hero) ─── */
.hero-figure { margin: 0 auto 15px auto; }
.hero-figure img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 2px 10px rgba(2,132,199,0.10); }

/* ─── Faixa de imagem de processo ─── */
.process-figure { margin-bottom: 15px; }
.process-figure img { width: 100%; height: auto; display: block; border: 1px solid #e2e8f0; border-radius: 8px; background-color: #ffffff; }

/* ─── Galeria de projetos / componentes ─── */
.gallery-table { width: 100%; border-collapse: separate; border-spacing: 10px; margin: 0 -10px 10px -10px; }
.gallery-card { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0; overflow: hidden; vertical-align: top; width: 33.33%; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.gallery-card img { width: 100%; height: 170px; object-fit: contain; display: block; background-color: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 6px; }
.gallery-caption { padding: 8px 10px; }
.gallery-caption b { display: block; color: #0f172a; font-size: 8.5pt; margin-bottom: 2px; }
.gallery-caption span { color: #64748b; font-size: 7.5pt; }

/* ─── Bloco destaque (imagem + texto) ─── */
.feature-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.feature-media { width: 40%; padding: 0; vertical-align: middle; }
.feature-media img { width: 100%; height: 100%; max-height: 240px; object-fit: cover; display: block; background-color: #f8fafc; }
.feature-text { padding: 16px 18px; vertical-align: middle; }
.feature-text h3 { color: #0f172a; font-size: 11.5pt; margin-bottom: 6px; font-weight: 700; }
.feature-text p { color: #475569; font-size: 8.5pt; margin-bottom: 8px; }
.feature-list { margin: 0; padding-left: 16px; }
.feature-list li { color: #475569; font-size: 8.5pt; margin-bottom: 3px; }

/* ─── FAQ ─── */
.faq { margin-bottom: 15px; }
.faq-item { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; margin-bottom: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.faq-item summary { cursor: pointer; padding: 10px 36px 10px 14px; font-size: 9pt; font-weight: 700; color: #0f172a; list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #0284c7; font-size: 14pt; font-weight: 800; line-height: 1; }
.faq-item[open] summary { background-color: #f0f9ff; border-bottom: 1px solid #e2e8f0; }
.faq-item[open] summary::after { content: '\2013'; }
.faq-answer { padding: 10px 14px; font-size: 8.5pt; color: #475569; }

/* ─── Responsivo (páginas abertas no navegador) ─── */
@media (max-width: 720px) {
  .topics-table code { white-space: normal; word-break: break-all; }

  /* Empilha cards de características e o bloco de contato no mobile */
  .grid-table, .grid-table tbody, .grid-table tr { display: block; }
  .grid-table { border-spacing: 0; margin-left: 0; margin-right: 0; }
  .grid-table tr:last-child .grid-card:last-child { margin-bottom: 0; }
  .grid-card { display: block; width: 100%; margin-bottom: 8px; }

  .form-table, .form-table tbody, .form-table tr { display: block; }
  .form-info { display: block; width: 100%; padding-right: 0; margin-bottom: 12px; }
  .form-box { display: block; width: 100%; }
}

@media print { header, footer, .wa-float, .site-footer { display: none !important; } }